/* Memphis — kit design TOKENAI. Estetika Memphis Group era 80-an: bentuk geometris playful, pola polka dots, squiggle, dan warna cerah pink-teal-kuning. Tampilannya fun dan sengaja tidak terlalu formal: tombol pil gemuk bergaris tinta dengan bayangan offset, ikon fitur yang bergiliran bentuk, dan headline yang digarisbawahi squiggle. Kontrak: docs/kontrak-kit-design.md. Semua nilai design tinggal di :root. */ /* == tk: tokens ================================================= */ :root { --tk-color-primary: #F0368F; --tk-color-primary-hover: #D42579; --tk-color-primary-contrast: #FFFFFF; --tk-color-secondary: #241F35; --tk-color-secondary-hover: #171226; --tk-color-secondary-contrast: #FFFFFF; --tk-color-accent: #00A6A0; --tk-color-background: #FFF8EE; --tk-color-surface: #FFFFFF; --tk-color-surface-2: #FBEFDD; --tk-color-text: #241F35; --tk-color-text-muted: #6F6885; --tk-color-border: #E7DCC8; --tk-color-success: #1E9E56; --tk-color-success-soft: #DFF5E7; --tk-color-warning: #9A6E00; --tk-color-warning-soft: #FFF1C4; --tk-color-danger: #E0284A; --tk-color-danger-soft: #FDE3E8; --tk-color-info: #0E7ED9; --tk-color-info-soft: #E1F0FC; --tk-font-heading: 'Fredoka', system-ui, sans-serif; --tk-font-body: 'Nunito', system-ui, sans-serif; --tk-font-mono: 'Space Mono', ui-monospace, monospace; --tk-weight-heading: 600; --tk-weight-body: 400; --tk-leading-heading: 1.12; --tk-leading-body: 1.65; --tk-text-display: 58px; --tk-text-h1: 42px; --tk-text-h2: 31px; --tk-text-h3: 24px; --tk-text-h4: 18px; --tk-text-title: 16px; --tk-text-body-lg: 18px; --tk-text-body: 16px; --tk-text-body-sm: 14px; --tk-text-caption: 12px; --tk-space-xs: 4px; --tk-space-sm: 8px; --tk-space-md: 16px; --tk-space-lg: 24px; --tk-space-xl: 32px; --tk-space-2xl: 48px; --tk-space-3xl: 64px; --tk-space-section: 96px; --tk-radius-sm: 10px; --tk-radius: 16px; --tk-radius-lg: 22px; --tk-radius-full: 999px; /* Kedalaman playful: bayangan offset keras bergaris tinta, bukan blur. */ --tk-border-width: 2px; --tk-shadow-sm: 2px 2px 0 var(--tk-color-text); --tk-shadow: 4px 4px 0 var(--tk-color-text); --tk-shadow-lg: 8px 8px 0 var(--tk-color-text); --tk-transition: 160ms ease; --tk-container: 1160px; /* Token khas memphis (bukan kontrak): kuning & ungu playful, titik polka dots untuk kanvas, dan squiggle SVG penggarisbawah headline. */ --tk-mp-yellow: #FFC93C; --tk-mp-yellow-ink: #241F35; --tk-mp-teal: #00A6A0; --tk-mp-purple: #7B5BE6; --tk-mp-dot: rgba(36, 31, 53, 0.10); --tk-mp-squiggle: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='48' height='10' viewBox='0 0 48 10'%3E%3Cpath d='M0 5 Q 6 0 12 5 T 24 5 T 36 5 T 48 5' fill='none' stroke='%23F0368F' stroke-width='3' stroke-linecap='round'/%3E%3C/svg%3E"); } /* Mode gelap: kanvas ungu malam dengan dots samar — pink, teal, dan kuning dibuat lebih menyala; bayangan offset memakai tinta gelap pekat. Aktifkan dengan atribut data-tk-theme="dark" pada atau . */ [data-tk-theme="dark"] { --tk-color-primary: #FF5CA8; --tk-color-primary-hover: #FF7DBA; --tk-color-primary-contrast: #241F35; --tk-color-secondary: #F3EDE0; --tk-color-secondary-hover: #FFFFFF; --tk-color-secondary-contrast: #241F35; --tk-color-accent: #2ED9D2; --tk-color-background: #221E36; --tk-color-surface: #2C2745; --tk-color-surface-2: #363052; --tk-color-text: #F3EDE0; --tk-color-text-muted: #A69FBE; --tk-color-border: #453E66; --tk-color-success: #4FCB84; --tk-color-success-soft: #16311F; --tk-color-warning: #F3C64F; --tk-color-warning-soft: #322809; --tk-color-danger: #FF6B85; --tk-color-danger-soft: #391218; --tk-color-info: #5FB2F2; --tk-color-info-soft: #12253A; --tk-shadow-sm: 2px 2px 0 #14101F; --tk-shadow: 4px 4px 0 #14101F; --tk-shadow-lg: 8px 8px 0 #14101F; --tk-mp-yellow: #FFD34D; --tk-mp-yellow-ink: #241F35; --tk-mp-teal: #2ED9D2; --tk-mp-purple: #9D82F5; --tk-mp-dot: rgba(243, 237, 224, 0.07); --tk-mp-squiggle: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='48' height='10' viewBox='0 0 48 10'%3E%3Cpath d='M0 5 Q 6 0 12 5 T 24 5 T 36 5 T 48 5' fill='none' stroke='%23FF5CA8' stroke-width='3' stroke-linecap='round'/%3E%3C/svg%3E"); } /* == tk: base =================================================== */ body { margin: 0; background: var(--tk-color-background); background-image: radial-gradient(var(--tk-mp-dot) 1.6px, transparent 1.7px); background-size: 26px 26px; color: var(--tk-color-text); font-family: var(--tk-font-body); font-size: var(--tk-text-body); font-weight: var(--tk-weight-body); line-height: var(--tk-leading-body); -webkit-font-smoothing: antialiased; } .tk-container { max-width: var(--tk-container); margin: 0 auto; padding: 0 var(--tk-space-lg); } iconify-icon { display: inline-block; vertical-align: -0.125em; } ::selection { background: var(--tk-mp-yellow); color: var(--tk-mp-yellow-ink); } /* == tk: typography ============================================= */ .tk-display, .tk-h1, .tk-h2, .tk-h3, .tk-h4 { font-family: var(--tk-font-heading); font-weight: var(--tk-weight-heading); line-height: var(--tk-leading-heading); color: var(--tk-color-text); margin: 0 0 var(--tk-space-md); } .tk-display { font-size: var(--tk-text-display); letter-spacing: -0.01em; line-height: 1.06; } .tk-h1 { font-size: var(--tk-text-h1); letter-spacing: -0.01em; } .tk-h2 { font-size: var(--tk-text-h2); } .tk-h3 { font-size: var(--tk-text-h3); } .tk-h4 { font-size: var(--tk-text-h4); } .tk-title { font-size: var(--tk-text-title); font-weight: 700; margin: 0 0 var(--tk-space-sm); } .tk-body-lg { font-size: var(--tk-text-body-lg); } .tk-body { font-size: var(--tk-text-body); } .tk-body-sm { font-size: var(--tk-text-body-sm); } .tk-caption { font-size: var(--tk-text-caption); color: var(--tk-color-text-muted); font-family: var(--tk-font-mono); text-transform: uppercase; letter-spacing: 0.07em; } .tk-muted { color: var(--tk-color-text-muted); } .tk-link { color: var(--tk-mp-teal); font-weight: 700; text-decoration: none; } .tk-link:hover { text-decoration: underline; text-decoration-thickness: 2px; text-underline-offset: 3px; } .tk-code { font-family: var(--tk-font-mono); font-size: 0.9em; background: var(--tk-color-surface-2); padding: 2px 6px; border-radius: var(--tk-radius-sm); } /* == tk: button ================================================= */ /* Tombol pil gemuk bergaris tinta dengan bayangan offset — menekan saat hover seperti mainan karet. */ .tk-btn { display: inline-flex; align-items: center; justify-content: center; gap: var(--tk-space-sm); font-family: var(--tk-font-heading); font-size: var(--tk-text-body-sm); font-weight: 600; line-height: 1; padding: 13px 24px; border-radius: var(--tk-radius-full); border: 2px solid var(--tk-color-text); box-shadow: var(--tk-shadow-sm); cursor: pointer; transition: background var(--tk-transition), color var(--tk-transition), transform var(--tk-transition), box-shadow var(--tk-transition); text-decoration: none; white-space: nowrap; } .tk-btn:hover:not(:disabled) { transform: translate(-1px, -1px); box-shadow: 3px 3px 0 var(--tk-color-text); } .tk-btn:not(:disabled):active { transform: translate(1px, 1px); box-shadow: 1px 1px 0 var(--tk-color-text); } .tk-btn:disabled { opacity: 0.4; cursor: not-allowed; } .tk-btn-primary { background: var(--tk-color-primary); color: var(--tk-color-primary-contrast); } .tk-btn-primary:hover:not(:disabled) { background: var(--tk-color-primary-hover); } .tk-btn-secondary { background: var(--tk-color-secondary); color: var(--tk-color-secondary-contrast); } .tk-btn-secondary:hover:not(:disabled) { background: var(--tk-color-secondary-hover); } .tk-btn-outline { background: var(--tk-color-surface); color: var(--tk-color-text); } .tk-btn-outline:hover:not(:disabled) { background: var(--tk-color-surface-2); } .tk-btn-ghost { background: transparent; color: var(--tk-color-text); border-color: transparent; box-shadow: none; } .tk-btn-ghost:hover:not(:disabled) { background: var(--tk-color-surface-2); transform: none; } .tk-btn-danger { background: var(--tk-color-danger); color: #FFFFFF; } .tk-btn-danger:hover:not(:disabled) { filter: brightness(0.92); } .tk-btn-text { background: none; color: var(--tk-mp-teal); border-color: transparent; box-shadow: none; padding-left: 4px; padding-right: 4px; } .tk-btn-text:hover:not(:disabled) { text-decoration: underline; text-decoration-thickness: 2px; text-underline-offset: 3px; transform: none; } .tk-btn-sm { font-size: var(--tk-text-caption); padding: 9px 16px; } .tk-btn-lg { font-size: var(--tk-text-body); padding: 16px 32px; } .tk-btn-icon { padding: 13px; } .tk-btn-loading { position: relative; color: transparent !important; pointer-events: none; } .tk-btn-loading::after { content: ''; position: absolute; width: 14px; height: 14px; border: 2px solid var(--tk-color-primary-contrast); border-top-color: transparent; border-radius: var(--tk-radius-full); animation: tk-spin 0.6s linear infinite; } .tk-btn-secondary.tk-btn-loading::after { border-color: var(--tk-color-secondary-contrast); border-top-color: transparent; } .tk-btn-outline.tk-btn-loading::after, .tk-btn-ghost.tk-btn-loading::after { border-color: var(--tk-color-text); border-top-color: transparent; } @keyframes tk-spin { to { transform: rotate(360deg); } } /* == tk: form =================================================== */ .tk-field { display: flex; flex-direction: column; gap: var(--tk-space-xs); margin-bottom: var(--tk-space-md); } .tk-label { font-size: var(--tk-text-body-sm); font-weight: 700; color: var(--tk-color-text); } .tk-help { font-size: var(--tk-text-caption); color: var(--tk-color-text-muted); } .tk-input, .tk-textarea, .tk-select-trigger { font-family: var(--tk-font-body); font-size: var(--tk-text-body-sm); color: var(--tk-color-text); background: var(--tk-color-surface); border: 2px solid var(--tk-color-text); border-radius: var(--tk-radius); padding: 11px 14px; transition: border-color var(--tk-transition), box-shadow var(--tk-transition); outline: none; } .tk-input::placeholder, .tk-textarea::placeholder { color: var(--tk-color-text-muted); } .tk-input:focus, .tk-textarea:focus { border-color: var(--tk-mp-teal); box-shadow: 0 0 0 1px var(--tk-mp-teal); } .tk-textarea { min-height: 96px; resize: vertical; } .tk-field-error .tk-input, .tk-field-error .tk-select-trigger, .tk-field-error .tk-textarea { border-color: var(--tk-color-danger); box-shadow: 0 0 0 1px var(--tk-color-danger); } .tk-field-error .tk-help { color: var(--tk-color-danger); } .tk-field-success .tk-input { border-color: var(--tk-color-success); box-shadow: 0 0 0 1px var(--tk-color-success); } .tk-field-success .tk-help { color: var(--tk-color-success); } /* Seluruh kontrol pilihan digambar sendiri — tidak ada tampilan bawaan browser sama sekali. Select tidak memakai