/* Neo Brutal — kit design TOKENAI. Estetika neo-brutalism: border tebal, warna cerah, shadow keras, kartu sederhana bersudut lembut, tipografi bold — brutalism yang usable. Kontrak: docs/kontrak-kit-design.md. Semua nilai design tinggal di :root. */ /* == tk: tokens ================================================= */ :root { --tk-color-primary: #FF90E8; --tk-color-primary-hover: #FF6BDF; --tk-color-primary-contrast: #111111; --tk-color-secondary: #FFFFFF; --tk-color-secondary-hover: #FFF1A6; --tk-color-secondary-contrast: #111111; --tk-color-accent: #0057FF; --tk-color-background: #FDF4E7; --tk-color-surface: #FFFFFF; --tk-color-surface-2: #F6EBD9; --tk-color-text: #111111; --tk-color-text-muted: #6B6353; --tk-color-border: #111111; --tk-color-success: #00A96C; --tk-color-success-soft: #CFF5E5; --tk-color-warning: #A87800; --tk-color-warning-soft: #FFF0B3; --tk-color-danger: #E5484D; --tk-color-danger-soft: #FFDBDD; --tk-color-info: #0057FF; --tk-color-info-soft: #D6E4FF; --tk-font-heading: 'Bricolage Grotesque', system-ui, sans-serif; --tk-font-body: 'DM Sans', system-ui, sans-serif; --tk-font-mono: 'DM Mono', ui-monospace, monospace; --tk-weight-heading: 800; --tk-weight-body: 400; --tk-leading-heading: 1.08; --tk-leading-body: 1.6; --tk-text-display: 54px; --tk-text-h1: 42px; --tk-text-h2: 31px; --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: 8px; --tk-radius: 10px; --tk-radius-lg: 14px; --tk-radius-full: 999px; --tk-border-width: 2px; --tk-shadow-sm: 3px 3px 0 var(--tk-color-border); --tk-shadow: 5px 5px 0 var(--tk-color-border); --tk-shadow-lg: 8px 8px 0 var(--tk-color-border); --tk-transition: 100ms ease; --tk-container: 1200px; } /* Mode gelap: papan tulis malam — latar arang hangat, border dan bayangan berganti krem sehingga offset kerasnya justru menyala; pink dan kuning stabilo tetap cerah. Aktifkan dengan atribut data-tk-theme="dark" pada atau . */ [data-tk-theme="dark"] { --tk-color-primary: #FF90E8; --tk-color-primary-hover: #FFA9EE; --tk-color-primary-contrast: #111111; --tk-color-secondary: #26242E; --tk-color-secondary-hover: #322F3C; --tk-color-secondary-contrast: #F4F0E6; --tk-color-accent: #86A8FF; --tk-color-background: #1C1B22; --tk-color-surface: #26242E; --tk-color-surface-2: #322F3C; --tk-color-text: #F4F0E6; --tk-color-text-muted: #A9A297; --tk-color-border: #F4F0E6; --tk-color-success: #3DD68C; --tk-color-success-soft: #12352A; --tk-color-warning: #FFD84D; --tk-color-warning-soft: #37301A; --tk-color-danger: #FF7A80; --tk-color-danger-soft: #3A1A1E; --tk-color-info: #86A8FF; --tk-color-info-soft: #1D2743; --tk-shadow-sm: 3px 3px 0 var(--tk-color-border); --tk-shadow: 5px 5px 0 var(--tk-color-border); --tk-shadow-lg: 8px 8px 0 var(--tk-color-border); } /* == 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.015em; } .tk-display { font-size: var(--tk-text-display); } .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: 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); } .tk-muted { color: var(--tk-color-text-muted); } .tk-link { color: var(--tk-color-accent); font-weight: 700; text-decoration: underline; text-decoration-thickness: 2px; text-underline-offset: 3px; } .tk-link:hover { background: var(--tk-color-warning-soft); } .tk-code { font-family: var(--tk-font-mono); font-size: 0.9em; background: var(--tk-color-surface-2); padding: 2px 6px; border-radius: 6px; 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-body); font-size: var(--tk-text-body-sm); font-weight: 700; line-height: 1; padding: 11px 18px; border-radius: var(--tk-radius-sm); border: var(--tk-border-width) solid var(--tk-color-border); box-shadow: var(--tk-shadow-sm); 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(-2px, -2px); box-shadow: var(--tk-shadow); } .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); } .tk-btn-outline:hover:not(:disabled) { background: var(--tk-color-surface); } .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: #FFFFFF; } .tk-btn-danger:hover:not(:disabled) { filter: brightness(0.95); } .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: 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: var(--tk-border-width) solid var(--tk-color-border); border-radius: var(--tk-radius-sm); padding: 11px 12px; 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 { box-shadow: 3px 3px 0 var(--tk-color-accent); } .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