/* Swiss — kit design TOKENAI. Estetika Swiss Style (International Typographic Style): grid sangat disiplin, sans-serif grotesque, penjajaran rata kiri yang kuat, whitespace luas, dan hierarki informasi yang sangat jelas. Sudut siku tanpa radius, nyaris tanpa bayangan, garis hairline sebagai pemisah, dan satu merah Swiss sebagai aksen presisi. Kontrak: docs/kontrak-kit-design.md. Semua nilai design tinggal di :root. */ /* == tk: tokens ================================================= */ :root { --tk-color-primary: #E30613; --tk-color-primary-hover: #C00511; --tk-color-primary-contrast: #FFFFFF; --tk-color-secondary: #111111; --tk-color-secondary-hover: #000000; --tk-color-secondary-contrast: #FFFFFF; --tk-color-accent: #111111; --tk-color-background: #FFFFFF; --tk-color-surface: #FFFFFF; --tk-color-surface-2: #F4F4F4; --tk-color-text: #111111; --tk-color-text-muted: #6E6E6E; --tk-color-border: #E2E2E2; --tk-color-success: #1A7F37; --tk-color-success-soft: #EDF7EF; --tk-color-warning: #9A6700; --tk-color-warning-soft: #FFF6E0; --tk-color-danger: #C00511; --tk-color-danger-soft: #FDECEA; --tk-color-info: #0550AE; --tk-color-info-soft: #EBF2FB; --tk-font-heading: 'Hanken Grotesk', 'Helvetica Neue', system-ui, sans-serif; --tk-font-body: 'Hanken Grotesk', 'Helvetica Neue', system-ui, sans-serif; --tk-font-mono: 'Fragment Mono', ui-monospace, monospace; --tk-weight-heading: 700; --tk-weight-body: 400; --tk-leading-heading: 1.08; --tk-leading-body: 1.6; --tk-text-display: 64px; --tk-text-h1: 44px; --tk-text-h2: 32px; --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: 120px; /* Sudut siku: radius 0 adalah tanda tangan Swiss; full tetap ada untuk kontrol yang memang bundar (toggle, avatar). */ --tk-radius-sm: 0px; --tk-radius: 0px; --tk-radius-lg: 0px; --tk-radius-full: 999px; /* Flat: kedalaman dari garis dan penjajaran, bukan bayangan; menu tetap diberi bayangan sangat tipis agar terpisah dari kanvas. */ --tk-border-width: 1px; --tk-shadow-sm: 0 0 0 rgba(0, 0, 0, 0); --tk-shadow: 0 1px 2px rgba(0, 0, 0, 0.05); --tk-shadow-lg: 0 8px 24px rgba(0, 0, 0, 0.10); --tk-transition: 140ms ease; --tk-container: 1140px; /* Token khas swiss (bukan kontrak): garis tegas untuk kontrol form dan aturan tipografis (rule) yang menandai awal seksi. */ --tk-sw-line-strong: #ADADAD; --tk-sw-rule: #111111; } /* Mode gelap: tinta dibalik — hitam pekat, teks putih, hairline abu tua; merah Swiss sedikit lebih terang agar tetap menyala di kanvas gelap. Aktifkan dengan atribut data-tk-theme="dark" pada atau . */ [data-tk-theme="dark"] { --tk-color-primary: #FF2B36; --tk-color-primary-hover: #FF4D56; --tk-color-primary-contrast: #FFFFFF; --tk-color-secondary: #FAFAFA; --tk-color-secondary-hover: #FFFFFF; --tk-color-secondary-contrast: #111111; --tk-color-accent: #FAFAFA; --tk-color-background: #0C0C0C; --tk-color-surface: #131313; --tk-color-surface-2: #1C1C1C; --tk-color-text: #F5F5F5; --tk-color-text-muted: #8F8F8F; --tk-color-border: #2A2A2A; --tk-color-success: #4ADE80; --tk-color-success-soft: #0E2417; --tk-color-warning: #FBBF24; --tk-color-warning-soft: #271D08; --tk-color-danger: #FF6B72; --tk-color-danger-soft: #2A100E; --tk-color-info: #6CA6F5; --tk-color-info-soft: #0E1B30; --tk-shadow-sm: 0 0 0 rgba(0, 0, 0, 0); --tk-shadow: 0 1px 2px rgba(0, 0, 0, 0.5); --tk-shadow-lg: 0 8px 24px rgba(0, 0, 0, 0.6); --tk-sw-line-strong: #4A4A4A; --tk-sw-rule: #F5F5F5; } /* == 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; } ::selection { background: var(--tk-color-primary); color: var(--tk-color-primary-contrast); } /* == 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); font-weight: 800; letter-spacing: -0.025em; line-height: 1.02; } .tk-h1 { font-size: var(--tk-text-h1); letter-spacing: -0.02em; } .tk-h2 { font-size: var(--tk-text-h2); letter-spacing: -0.015em; } .tk-h3 { font-size: var(--tk-text-h3); letter-spacing: -0.01em; } .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.08em; } .tk-muted { color: var(--tk-color-text-muted); } .tk-link { color: var(--tk-color-primary); font-weight: 600; 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 persegi tegas: merah Swiss untuk aksi utama, hitam tinta untuk sekunder. */ .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: 600; line-height: 1; padding: 13px 22px; border-radius: var(--tk-radius); border: 1px solid transparent; cursor: pointer; transition: background var(--tk-transition), color var(--tk-transition), border-color var(--tk-transition), opacity var(--tk-transition); text-decoration: none; white-space: nowrap; } .tk-btn:disabled { opacity: 0.4; cursor: not-allowed; } .tk-btn:not(:disabled):active { opacity: 0.85; } .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: transparent; color: var(--tk-color-text); border-color: var(--tk-color-text); } .tk-btn-outline:hover:not(:disabled) { background: var(--tk-color-text); color: var(--tk-color-background); } .tk-btn-ghost { background: transparent; color: var(--tk-color-text); } .tk-btn-ghost:hover:not(:disabled) { background: var(--tk-color-surface-2); } .tk-btn-danger { background: var(--tk-color-danger); color: #FFFFFF; } .tk-btn-danger:hover:not(:disabled) { filter: brightness(0.9); } .tk-btn-text { background: none; color: var(--tk-color-primary); padding-left: 4px; padding-right: 4px; } .tk-btn-text:hover:not(:disabled) { text-decoration: underline; text-decoration-thickness: 2px; text-underline-offset: 3px; } .tk-btn-sm { font-size: var(--tk-text-caption); padding: 9px 14px; } .tk-btn-lg { font-size: var(--tk-text-body); padding: 16px 30px; } .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: 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); letter-spacing: 0.02em; text-transform: none; } .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: 1px solid var(--tk-sw-line-strong); border-radius: var(--tk-radius); padding: 12px 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-color-text); box-shadow: 0 0 0 1px var(--tk-color-text); } .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