/* Vaporwave — kit design TOKENAI. Nostalgia surreal 80s-90s: neon pink-ungu, gradien sunset, grid perspektif menuju horizon, matahari bergaris, tipografi serif klasikal (patung Romawi) dipadu huruf CRT pixel, window UI ber-title bar gradien, dan teks gradien vapor. Mode terang = pastel dream (lavender pucat); mode gelap = neon sunset (indigo dalam, hot pink, cyan menyala). Kontrak: docs/kontrak-kit-design.md. Semua nilai design tinggal di :root. */ /* == tk: tokens ================================================= */ :root { --tk-color-primary: #D935B8; --tk-color-primary-hover: #B7269A; --tk-color-primary-contrast: #FFFFFF; --tk-color-secondary: #0FB5C9; --tk-color-secondary-hover: #0B93A4; --tk-color-secondary-contrast: #FFFFFF; --tk-color-accent: #FF8A5C; --tk-color-background: #F5F0FC; --tk-color-surface: #FFFFFF; --tk-color-surface-2: #F0E9FA; --tk-color-text: #372A54; --tk-color-text-muted: #8B7DA9; --tk-color-border: #DFD3F2; --tk-color-success: #2FB380; --tk-color-success-soft: #DDF5EB; --tk-color-warning: #DB9A00; --tk-color-warning-soft: #FBF0D3; --tk-color-danger: #E24B78; --tk-color-danger-soft: #FBDFE8; --tk-color-info: #5B7CFA; --tk-color-info-soft: #E4E9FE; --tk-font-heading: 'Playfair Display', 'Times New Roman', serif; --tk-font-body: 'Outfit', system-ui, sans-serif; --tk-font-mono: 'VT323', ui-monospace, monospace; --tk-weight-heading: 800; --tk-weight-body: 400; --tk-leading-heading: 1.15; --tk-leading-body: 1.65; --tk-text-display: 46px; --tk-text-h1: 34px; --tk-text-h2: 26px; --tk-text-h3: 20px; --tk-text-h4: 17px; --tk-text-title: 15px; --tk-text-body-lg: 18px; --tk-text-body: 16px; --tk-text-body-sm: 14px; --tk-text-caption: 15px; --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: 14px; --tk-radius-lg: 22px; --tk-radius-full: 999px; --tk-border-width: 1px; --tk-shadow-sm: 0 2px 8px rgba(120, 80, 200, 0.10); --tk-shadow: -6px -6px 18px rgba(34, 205, 238, 0.07), 8px 10px 26px rgba(217, 53, 184, 0.13); --tk-shadow-lg: -8px -8px 24px rgba(34, 205, 238, 0.09), 12px 16px 44px rgba(217, 53, 184, 0.18); --tk-transition: 180ms ease; --tk-container: 1120px; /* Token khas vaporwave (bukan kontrak): gradien vapor pink→ungu→cyan, langit pastel/sunset untuk latar body, gradien matahari, dan warna garis grid perspektif. */ --tk-vw-grad: linear-gradient(120deg, #FF3EA5 0%, #B44CF0 52%, #22CDEE 100%); --tk-vw-bg: linear-gradient(180deg, #FDF3FA 0%, #F3EFFC 45%, #EEF4FE 100%); --tk-vw-sun: linear-gradient(180deg, #FFD76F 0%, #FF7AA8 55%, #C86AF0 100%); --tk-vw-gridline: rgba(199, 88, 205, 0.28); --tk-vw-chroma-a: rgba(34, 205, 238, 0.35); --tk-vw-chroma-b: rgba(255, 62, 165, 0.30); } /* Mode gelap: neon sunset — indigo dalam dengan hot pink dan cyan menyala; grid dan bayangan ikut ber-glow. Aktifkan dengan atribut data-tk-theme="dark" pada atau . */ [data-tk-theme="dark"] { --tk-color-primary: #FF3EA5; --tk-color-primary-hover: #FF6FBE; --tk-color-primary-contrast: #FFFFFF; --tk-color-secondary: #26D6F0; --tk-color-secondary-hover: #6FE5F7; --tk-color-secondary-contrast: #0A2530; --tk-color-accent: #FFB86B; --tk-color-background: #150A32; --tk-color-surface: #1F1244; --tk-color-surface-2: #2B1A5C; --tk-color-text: #F1E8FF; --tk-color-text-muted: #A995D6; --tk-color-border: #463180; --tk-color-success: #3BE8A0; --tk-color-success-soft: #123A2E; --tk-color-warning: #FFC94D; --tk-color-warning-soft: #3A2E10; --tk-color-danger: #FF5C8A; --tk-color-danger-soft: #40142A; --tk-color-info: #7CA1FF; --tk-color-info-soft: #16224A; --tk-shadow-sm: 0 2px 10px rgba(0, 0, 0, 0.35); --tk-shadow: 0 10px 30px rgba(0, 0, 0, 0.45), 0 0 24px rgba(255, 62, 165, 0.12); --tk-shadow-lg: 0 18px 48px rgba(0, 0, 0, 0.55), 0 0 40px rgba(255, 62, 165, 0.16); --tk-vw-grad: linear-gradient(120deg, #FF3EA5 0%, #8A5CFF 52%, #26D6F0 100%); --tk-vw-bg: linear-gradient(180deg, #1D0C45 0%, #150A32 55%, #2A0F52 100%); --tk-vw-sun: linear-gradient(180deg, #FFD76F 0%, #FF5C8A 55%, #B44CF0 100%); --tk-vw-gridline: rgba(255, 62, 165, 0.4); --tk-vw-chroma-a: rgba(38, 214, 240, 0.5); --tk-vw-chroma-b: rgba(255, 62, 165, 0.45); } /* == tk: base =================================================== */ body { margin: 0; background: var(--tk-vw-bg) fixed; 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: #FF3EA5; color: #FFFFFF; } /* == 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); letter-spacing: 0.005em; color: var(--tk-color-text); margin: 0 0 var(--tk-space-md); } /* Display serif miring — patung klasik bertemu kaset VHS. */ .tk-display { font-size: var(--tk-text-display); font-style: italic; line-height: 1.08; } .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-family: var(--tk-font-body); 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); text-transform: uppercase; letter-spacing: 0.08em; } .tk-muted { color: var(--tk-color-text-muted); } /* Tautan mimpi: garis bawah bergelombang seperti air kolam renang. */ .tk-link { color: var(--tk-color-primary); font-weight: 600; text-decoration: underline wavy; text-decoration-thickness: 1px; text-underline-offset: 4px; } .tk-link:hover { color: var(--tk-color-secondary); } .tk-code { font-family: var(--tk-font-mono); font-size: 1.05em; background: var(--tk-color-surface-2); border-radius: var(--tk-radius-sm); color: var(--tk-color-primary); padding: 1px 8px; } /* == tk: button ================================================= */ /* Tombol kapsul: primary memakai gradien vapor penuh dengan glow pink; hover mengambang naik. */ .tk-btn { display: inline-flex; align-items: center; justify-content: center; gap: var(--tk-space-sm); font-family: var(--tk-font-body); font-size: 13px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.09em; line-height: 1; padding: 13px 26px; border: 1px solid transparent; border-radius: var(--tk-radius-full); cursor: pointer; transition: transform var(--tk-transition), box-shadow var(--tk-transition), background var(--tk-transition), color var(--tk-transition), filter var(--tk-transition); text-decoration: none; white-space: nowrap; } .tk-btn:focus-visible { outline: 2px solid var(--tk-color-secondary); outline-offset: 2px; } .tk-btn:not(:disabled):active { transform: translateY(1px); } .tk-btn:disabled { opacity: 0.5; cursor: not-allowed; } .tk-btn-primary { background: var(--tk-vw-grad); color: #FFFFFF; box-shadow: 0 6px 18px rgba(217, 53, 184, 0.35); } .tk-btn-primary:hover:not(:disabled) { filter: brightness(1.08) saturate(1.05); transform: translateY(-1px); box-shadow: 0 10px 26px rgba(217, 53, 184, 0.45); } .tk-btn-secondary { background: var(--tk-color-secondary); color: var(--tk-color-secondary-contrast); box-shadow: 0 6px 18px rgba(15, 181, 201, 0.3); } .tk-btn-secondary:hover:not(:disabled) { background: var(--tk-color-secondary-hover); transform: translateY(-1px); } .tk-btn-outline { background: transparent; color: var(--tk-color-primary); border-color: var(--tk-color-primary); } .tk-btn-outline:hover:not(:disabled) { background: var(--tk-color-primary); color: var(--tk-color-primary-contrast); } .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.92); } .tk-btn-text { background: none; color: var(--tk-color-primary); padding-left: 6px; padding-right: 6px; } .tk-btn-text:hover:not(:disabled) { color: var(--tk-color-secondary); text-decoration: underline wavy; text-underline-offset: 4px; } .tk-btn-sm { font-size: 11px; padding: 9px 18px; } .tk-btn-lg { font-size: 15px; padding: 17px 36px; } .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 rgba(255, 255, 255, 0.95); border-top-color: transparent; border-radius: 50%; animation: tk-spin 0.8s linear infinite; } .tk-btn-outline.tk-btn-loading::after, .tk-btn-ghost.tk-btn-loading::after, .tk-btn-text.tk-btn-loading::after { border-color: var(--tk-color-primary); 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: 13px; font-weight: 600; letter-spacing: 0.02em; color: var(--tk-color-text); } .tk-help { font-size: 13px; 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: 1px solid var(--tk-color-border); border-radius: var(--tk-radius); padding: 12px 16px; 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-primary); box-shadow: 0 0 0 3px rgba(217, 53, 184, 0.18), 0 0 14px rgba(34, 205, 238, 0.12); } .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 3px rgba(226, 75, 120, 0.16); } .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 3px rgba(47, 179, 128, 0.16); } .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