/* ============================================================ WTB .co.id — Kontrak Token "Cinematic Signature" · Register PORCELAIN (terang) Sumber nilai: docs/superpowers/design-language/cinematic-signature-kit/tokens.css Dimuat via di BaseLayout.astro, SEBELUM global.css (Tailwind + reset) — token custom-property harus tersedia lebih dulu di cascade sebelum dipakai var() di berkas lain. Dipindah dari coid/src/styles/global.css (M96, 2026-08-23) supaya file token statis bisa di-cache terpisah dari CSS Tailwind yang di-bundle. Nilai hex TIDAK diubah sedikit pun saat pemindahan ini. ============================================================ */ :root { /* ══ KONTRAK MASTER — Porcelain (:root tokens.css) ══ */ --background: #f4f2f7; /* porcelain dingin */ --foreground: #1a1626; /* indigo-ink */ --card: #ffffff; --card-foreground: #1a1626; --primary: #7b3fa0; /* CTA terang = violet solid */ --primary-foreground: #ffffff; --secondary: #ece8f2; --secondary-foreground: #3a3350; --muted: #f0edf5; --muted-foreground: #5b5470; --accent: #ede7f5; --accent-foreground: #4a2f66; --border: rgba(123, 63, 160, 0.14); --input: rgba(26, 22, 38, 0.12); --ring: #7b3fa0; /* ekstensi WTB */ --brand: #7b3fa0; /* violet master (dari logo) */ --brand-secondary: #5566a0; /* periwinkle-navy — kebaca di porcelain */ --brand-navy: #3f5489; --cta: #7b3fa0; --cta-foreground: #ffffff; --cta-hover: #6a3390; /* aurora signature (register-invariant, plat selalu gelap) */ --aurora-1: #8ea5d3; /* periwinkle */ --aurora-2: #6b5bc4; /* indigo */ --aurora-3: #7b3fa0; /* violet */ --aurora-4: #7b2fd6; /* magenta-violet tip */ --sig-gradient: linear-gradient(100deg, var(--aurora-1), var(--aurora-2), var(--aurora-3), var(--aurora-4)); /* ══ DEEP SPACE — token plat gelap (persis .dark master) ══ */ --deepspace: #0d0b1f; --deepspace-card: #221c34; --deepspace-secondary: #1c1729; --deepspace-foreground: #edeaf5; --deepspace-muted-foreground: #9b92b5; --deepspace-border: rgba(237, 234, 245, 0.13); --deepspace-brand: #9b6fd0; /* violet dinaikkan agar hidup di deep-space */ --deepspace-cta: #7b2fd6; /* CTA gelap = violet panas */ --deepspace-cta-hover: #9a5cf0; /* elevasi gelap = surface tint bertingkat + rim-light (bukan drop-shadow hitam) */ --shadow-deep-sm: inset 0 0 0 9999px rgba(255,255,255,0.04), inset 0 1px 0 rgba(255,255,255,0.10), 0 2px 8px rgba(0,0,0,0.5); --shadow-deep-md: inset 0 0 0 9999px rgba(255,255,255,0.085), inset 0 1px 0 rgba(255,255,255,0.16), 0 24px 60px -24px rgba(0,0,0,0.85); --shadow-deep-lg: inset 0 0 0 9999px rgba(255,255,255,0.14), inset 0 1px 0 rgba(255,255,255,0.22), 0 44px 96px -30px rgba(0,0,0,0.9); /* ══ LIQUID GLASS — token per-register (default kartu/kaca) ══ */ --glass-bg: rgba(255, 255, 255, 0.72); --glass-border: rgba(123, 63, 160, 0.16); --glass-blur: 12px; /* ── Alias legacy — dipetakan ke palet master (kompat komponen lama) ── */ --ivory: var(--background); --ivory-deep: var(--secondary); --ivory-dark: #e2ddeb; --ink: var(--foreground); --ink-soft: var(--secondary-foreground); --ink-muted: var(--muted-foreground); --ink-faint: #8a82a0; --indigo-mid: var(--cta-hover); --indigo-pale: var(--aurora-2); --brass: var(--brand); /* aksen utama kini violet */ --brass-light: var(--aurora-1); /* aksen di plat gelap = periwinkle */ --hairline: var(--border); --hairline-warm: rgba(123, 63, 160, 0.22); --color-bg: var(--background); --color-bg-subtle: var(--secondary); --color-surface: var(--card); --color-ink: var(--foreground); --color-ink-muted: var(--muted-foreground); --color-ink-faint: var(--ink-faint); --color-accent: var(--brand); --color-accent-dark: var(--cta-hover); --color-accent-bg: rgba(123,63,160,0.08); --color-border: var(--border); --color-border-subtle:rgba(26,22,38,0.07); --color-success: #2ECC71; --color-error: #DC2626; --color-dark-bg: var(--deepspace); --color-dark-surface: var(--deepspace-card); /* ── Typography — bahasa master Cinematic Signature ── */ --ff-display: 'Schibsted Grotesk Variable', 'Schibsted Grotesk', 'Hanken Grotesk', system-ui, sans-serif; --ff-serif: 'Newsreader Variable', 'Newsreader', Georgia, 'Times New Roman', serif; --ff-body: 'Hanken Grotesk', system-ui, -apple-system, 'Segoe UI', sans-serif; --ff-mono: 'JetBrains Mono Variable', 'JetBrains Mono', ui-monospace, 'SFMono-Regular', monospace; /* Legacy alias */ --font-sans: var(--ff-body); /* ── Skala fluid ── */ --text-display: clamp(3rem, 5.5vw + 1rem, 5.5rem); --text-h1: clamp(2.25rem, 4vw + 0.5rem, 4rem); --text-h2: clamp(1.75rem, 3vw + 0.25rem, 3rem); --text-h3: clamp(1.25rem, 1.8vw, 2rem); --text-lg: 1.125rem; --text-base: 1rem; --text-sm: 0.875rem; --text-xs: 0.8125rem; /* 13px — min readable */ /* ── Spacing (base 4px) ── */ --space-1: 0.25rem; --space-2: 0.5rem; --space-3: 0.75rem; --space-4: 1rem; --space-5: 1.25rem; --space-6: 1.5rem; --space-8: 2rem; --space-10: 2.5rem; --space-12: 3rem; --space-16: 4rem; --space-20: 5rem; --space-24: 6rem; --space-32: 8rem; /* ── Radius — mikro sober + kartu mengambang master ── */ --radius-sm: 2px; --radius-md: 6px; --radius-lg: 8px; --radius-xl: 8px; --radius-card: 18px; /* kartu mengambang besar (ala Tome) */ --radius-full: 9999px; --radius-pill: 9999px; /* ── Shadow (register terang = drop-shadow indigo-ink) ── */ --shadow-sm: 0 1px 3px rgba(26,22,38,0.08); --shadow-md: 0 4px 16px rgba(26,22,38,0.10); --shadow-lg: 0 12px 40px rgba(26,22,38,0.14); /* ── Motion (easing signature master) ── */ --duration-fast: 150ms; --duration-normal: 240ms; --duration-slow: 500ms; --ease-out: cubic-bezier(0.0, 0, 0.2, 1); --ease-silk: cubic-bezier(0.22, 1, 0.36, 1); /* = --ease-hover master */ --ease-snap: cubic-bezier(0.16, 1, 0.3, 1); /* = --ease-enter master */ --ease-standard: cubic-bezier(0.4, 0, 0.2, 1); --ease-enter: var(--ease-snap); --ease-hover: var(--ease-silk); /* ══════════════════════════════════════════════════════════ EKSTENSI LOKAL .co.id — token dekoratif turunan (M96, 2026-08-23) Bukan bagian kontrak master lintas-WTB. Lahir dari tokenisasi hex literal tersebar di coid/src (ChatAssistant/index/konsultasi/ CaseStudyCard/CtaSection/layanan) — nilai identik dgn hex asal, hanya direlokasi jadi custom property supaya tak duplikat + gampang diaudit. Tiap nilai dideklarasikan SEKALI di sini. ══════════════════════════════════════════════════════════ */ /* Alert / status inline (form konsultasi + widget chat) */ --status-success-bg: #f0fdf4; --status-success-border: #bbf7d0; --status-success-text: #15803d; --status-error-bg: #fff3f3; /* widget chat */ --status-error-bg-soft: #fef2f2; /* form konsultasi (sedikit beda dari widget chat) */ --status-error-border: #fecaca; --status-error-text: #b91c1c; --status-error-text-strong: #991b1b; /* varian teks pesan error widget chat */ /* Teks di atas plat Deep Space (index.astro showcase card + CaseStudyCard) */ --on-dark-link: #C7D6F5; /* link/url periwinkle di latar gelap */ --on-dark-heading: #FBFAFD; /* heading/hover nyaris putih di latar gelap */ --on-dark-positive: #5EE88A; /* status/metrik positif (dot + teks) di latar gelap */ /* Plate gradasi Deep Space per-seksi (.section-cara/.section-portfolio/ .cta-section--dark/.cta-product-note/showcase card) — bukan token register (--deepspace) tunggal karena tiap seksi punya tangga luminance gradasi sendiri. */ --deepspace-grad-top: #141130; /* dasar plat CTA/section-cara */ --deepspace-grad-alt-top: #171331; /* section-portfolio, setingkat lebih terang */ --deepspace-grad-alt-bottom: #12102a; --deepspace-grad-cta-top: #1a1640; /* puncak gradasi cta-section--dark */ --deepspace-card-deep: #14102A; /* ujung gradasi showcase-feature-card */ /* Dekoratif lepas (satu pemakaian, tanpa padanan register) */ --panel-titlebar-bg: #eae6f1; /* browser-titlebar index.astro */ --chat-ai-ink: #2B2440; /* teks bubble AI di atas porcelain (index.astro) */ --deco-mac-red: #FF5F57; /* titik traffic-light macOS */ --deco-mac-yellow: #FFBD2E; --deco-mac-green: #28C840; } /* ══════════════════════════════════════════════════════════════════════════ .dark — REGISTER GELAP "Deep Space" (JOB DEWAN-M146, 24 Agu 2026) Swap murni via class .dark di (bootstrap no-FOUC + tombol toggle, lihat BaseLayout.astro) — mekanisme SAMA PERSIS dgn yang sudah dipakai token sejak awal (:root → .dark), bukan mekanisme baru. Default WTB tetap Porcelain (:root, TIDAK berubah) — blok ini hanya AKTIF kalau user pilih gelap manual atau OS minta gelap (ketokan Bos 24 Agu 2026). Nilai di bawah TIDAK BARU — semuanya reuse token --deepspace-* yang SUDAH ada di :root di atas (dikonfirmasi "dikunci persis nilai register .dark master" di komentar puncak file ini), kecuali --muted yang diambil literal dari wtb-design-system/css/wtb-cinematic.css blok .dark (kanonik, nol hex baru diciptakan). Hanya property yang benar-benar dipakai di coid/src (termasuk tombol .theme-toggle baru) yang di-override — subset sengaja lebih kecil dari kontrak shadcn penuh, cermin cara :root di file ini juga sudah ditrim (nol --popover, --chart-N, --sidebar-N yang tak pernah dipakai). ══════════════════════════════════════════════════════════════════════════ */ .dark { --background: var(--deepspace); --foreground: var(--deepspace-foreground); --card: var(--deepspace-card); --secondary: var(--deepspace-secondary); --secondary-foreground: #d9d3e8; /* persis .dark master wtb-cinematic.css — dipakai alias --ink-soft (nav-link, body text ~40 titik) */ --muted: #17131f; /* persis .dark master wtb-cinematic.css */ --muted-foreground: var(--deepspace-muted-foreground); --border: var(--deepspace-border); --ring: var(--deepspace-cta); --brand: var(--deepspace-brand); --cta-foreground: #ffffff; --cta-hover: var(--deepspace-cta-hover); }