/* Tactile — kit design TOKENAI. Estetika elevated brutalism: tekstur kertas, kedalaman berlapis, material fisik hangat — kartu seperti karton terangkat dari halaman. Kontrak: docs/kontrak-kit-design.md. Semua nilai design tinggal di :root. */ /* == tk: tokens ================================================= */ :root { --tk-color-primary: #E4572E; --tk-color-primary-hover: #C74620; --tk-color-primary-contrast: #FFF8EF; --tk-color-secondary: #FFFDF8; --tk-color-secondary-hover: #F1E9D9; --tk-color-secondary-contrast: #1A1713; --tk-color-accent: #274690; --tk-color-background: #F3EFE7; --tk-color-surface: #FFFDF8; --tk-color-surface-2: #ECE5D6; --tk-color-text: #1A1713; --tk-color-text-muted: #6E6759; --tk-color-border: #1A1713; --tk-color-success: #3F6C51; --tk-color-success-soft: #DFEAE2; --tk-color-warning: #96690C; --tk-color-warning-soft: #F4E7C3; --tk-color-danger: #B3261E; --tk-color-danger-soft: #F6DCD9; --tk-color-info: #274690; --tk-color-info-soft: #DDE4F2; --tk-font-heading: 'Fraunces', Georgia, serif; --tk-font-body: 'Work Sans', system-ui, sans-serif; --tk-font-mono: 'Chivo Mono', ui-monospace, monospace; --tk-weight-heading: 700; --tk-weight-body: 400; --tk-leading-heading: 1.05; --tk-leading-body: 1.62; --tk-text-display: 56px; --tk-text-h1: 42px; --tk-text-h2: 30px; --tk-text-h3: 23px; --tk-text-h4: 18px; --tk-text-title: 17px; --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: 6px; --tk-radius: 8px; --tk-radius-lg: 12px; --tk-radius-full: 999px; --tk-border-width: 2px; /* Kedalaman berlapis khas tactile: offset tinta yang keras DITAMBAH bayangan lembut, sehingga elemen terasa seperti karton yang benar-benar terangkat dari kertas. */ --tk-shadow-sm: 3px 3px 0 var(--tk-color-border), 0 6px 14px rgba(26, 23, 19, 0.10); --tk-shadow: 5px 5px 0 var(--tk-color-border), 0 14px 26px rgba(26, 23, 19, 0.14); --tk-shadow-lg: 8px 8px 0 var(--tk-color-border), 0 22px 40px rgba(26, 23, 19, 0.18); --tk-transition: 130ms ease; --tk-container: 1200px; } /* Mode gelap: karton kopi — kertas menjadi kayu gelap hangat, tinta menjadi krem, dan terracotta menyala jadi oranye bara. Aktifkan dengan atribut data-tk-theme="dark" pada atau . */ [data-tk-theme="dark"] { --tk-color-primary: #FF6B35; --tk-color-primary-hover: #FF8557; --tk-color-primary-contrast: #17130E; --tk-color-secondary: #221C14; --tk-color-secondary-hover: #2E261B; --tk-color-secondary-contrast: #EFE7D8; --tk-color-accent: #8FA8E8; --tk-color-background: #17130E; --tk-color-surface: #221C14; --tk-color-surface-2: #2E261B; --tk-color-text: #EFE7D8; --tk-color-text-muted: #A69B87; --tk-color-border: #EFE7D8; --tk-color-success: #8FBF9F; --tk-color-success-soft: #1E2E24; --tk-color-warning: #E0B94C; --tk-color-warning-soft: #332A12; --tk-color-danger: #E8766C; --tk-color-danger-soft: #351511; --tk-color-info: #8FA8E8; --tk-color-info-soft: #1B2337; --tk-shadow-sm: 3px 3px 0 var(--tk-color-border), 0 6px 14px rgba(0, 0, 0, 0.45); --tk-shadow: 5px 5px 0 var(--tk-color-border), 0 14px 26px rgba(0, 0, 0, 0.5); --tk-shadow-lg: 8px 8px 0 var(--tk-color-border), 0 22px 40px rgba(0, 0, 0, 0.55); } /* == tk: base =================================================== */ body { margin: 0; background: var(--tk-color-background); 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; } /* == 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); letter-spacing: -0.01em; } .tk-display { font-size: var(--tk-text-display); font-weight: 800; } .tk-h1 { font-size: var(--tk-text-h1); } .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: 600; 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); } .tk-muted { color: var(--tk-color-text-muted); } .tk-link { color: var(--tk-color-accent); font-weight: 600; text-decoration: underline; text-decoration-thickness: 2px; text-underline-offset: 3px; } .tk-link:hover { color: var(--tk-color-primary); } .tk-code { font-family: var(--tk-font-mono); font-size: 0.9em; background: var(--tk-color-surface-2); padding: 2px 6px; border-radius: 4px; border: 1px solid var(--tk-color-border); } /* == tk: button ================================================= */ .tk-btn { display: inline-flex; align-items: center; justify-content: center; gap: var(--tk-space-sm); font-family: var(--tk-font-mono); font-size: var(--tk-text-body-sm); font-weight: 700; text-transform: uppercase; letter-spacing: 0.02em; line-height: 1; padding: 11px 18px; border-radius: var(--tk-radius-sm); border: var(--tk-border-width) solid var(--tk-color-border); box-shadow: 3px 3px 0 var(--tk-color-border); cursor: pointer; transition: background var(--tk-transition), color var(--tk-transition), box-shadow var(--tk-transition), transform var(--tk-transition); text-decoration: none; white-space: nowrap; } .tk-btn:disabled { opacity: 0.5; cursor: not-allowed; } .tk-btn:hover:not(:disabled) { transform: translate(-1px, -1px); box-shadow: 4px 4px 0 var(--tk-color-border), 0 10px 18px rgba(26, 23, 19, 0.14); } .tk-btn:not(:disabled):active { transform: translate(3px, 3px); box-shadow: none; } .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-primary:active:not(:disabled) { background: var(--tk-color-primary); } .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: transparent; color: var(--tk-color-text); border-color: var(--tk-color-border); box-shadow: none; } .tk-btn-outline:hover:not(:disabled) { background: var(--tk-color-surface); box-shadow: 3px 3px 0 var(--tk-color-border); } .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; box-shadow: none; } .tk-btn-danger { background: var(--tk-color-danger); color: #FFF8EF; } .tk-btn-danger:hover:not(:disabled) { filter: brightness(0.94); } .tk-btn-text { background: none; color: var(--tk-color-accent); border-color: transparent; box-shadow: none; padding-left: 4px; padding-right: 4px; } .tk-btn-text:hover:not(:disabled) { transform: none; box-shadow: none; text-decoration: underline; text-decoration-thickness: 2px; text-underline-offset: 3px; } .tk-btn-sm { font-size: var(--tk-text-caption); padding: 7px 12px; } .tk-btn-lg { font-size: var(--tk-text-body); padding: 15px 26px; border-radius: var(--tk-radius); } .tk-btn-icon { padding: 11px; } .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, .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: 600; color: var(--tk-color-text); } .tk-help { font-size: var(--tk-text-caption); color: var(--tk-color-text-muted); font-family: var(--tk-font-mono); } .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: var(--tk-border-width) solid var(--tk-color-border); border-radius: var(--tk-radius-sm); padding: 11px 12px; box-shadow: inset 2px 2px 0 rgba(26, 23, 19, 0.06); transition: box-shadow var(--tk-transition), border-color 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-color-primary); box-shadow: inset 2px 2px 0 rgba(26, 23, 19, 0.06), 3px 3px 0 var(--tk-color-primary); } .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: 3px 3px 0 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: 3px 3px 0 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