/* ============================================================================ JANGAN edit di produk — sumber kebenaran: wtb-design-system/css/wtb-cinematic.css ============================================================================ WTB CINEMATIC SIGNATURE — KONTRAK TOKEN SEMANTIK PT Widigital Tri Buana · bahasa desain master ============================================================================ DUA REGISTER, SATU BRAND (Branded House): :root = TERANG "Porcelain" → widigitaltribuana.co.id (B2B elok) .dark = GELAP "Deep Space" → widigitaltribuana.com + produk (epik) Cara pakai: - Halaman gelap penuh: - Halaman terang: (default) - Plat gelap di halaman terang: gunakan token --deepspace-* + kelas .deep-field ATURAN komponen: selalu pakai class token SEMANTIK (bg-card, text-muted-foreground, rounded-[var(--radius-card)], bg-primary) — BUKAN warna hardcoded. @font-face / @import font: tanggung jawab KONSUMEN via @fontsource-variable. File ini hanya mendeklarasikan --ff-* / --font-* dengan fallback stack. ============================================================================ */ /* ============================================================================ :root — REGISTER TERANG "Porcelain" ============================================================================ */ :root { /* ── 1. SHADCN CONTRACT — nama variabel jangan diubah ── */ --background: #f4f2f7; /* porcelain dingin */ --foreground: #1a1626; /* indigo-ink */ --card: #ffffff; --card-foreground: #1a1626; --popover: #ffffff; --popover-foreground: #1a1626; --primary: #7b3fa0; /* violet solid — CTA terang */ --primary-foreground: #ffffff; --secondary: #ece8f2; --secondary-foreground: #3a3350; --muted: #f0edf5; --muted-foreground: #5b5470; --accent: #ede7f5; /* tint violet lembut */ --accent-foreground: #4a2f66; --destructive: #c8402f; --destructive-foreground: #ffffff; --border: rgba(123, 63, 160, 0.14); --input: rgba(26, 22, 38, 0.12); --ring: #7b3fa0; --chart-1: #7b3fa0; /* violet */ --chart-2: #6b5bc4; /* indigo */ --chart-3: #5f79b8; /* periwinkle-navy (kebaca di porcelain) */ --chart-4: #7b2fd6; /* magenta-violet */ --chart-5: #3f5489; /* navy */ --radius: 0.5rem; /* 8px — radius UI mikro shadcn */ --sidebar: #f0edf5; --sidebar-foreground: #1a1626; --sidebar-primary: #7b3fa0; --sidebar-primary-foreground:#ffffff; --sidebar-accent: #ede7f5; --sidebar-accent-foreground: #4a2f66; --sidebar-border: rgba(123, 63, 160, 0.14); --sidebar-ring: #7b3fa0; /* ── 2. EKSTENSI WTB — brand, CTA, aurora ── */ --brand: #7b3fa0; /* violet master (dari logo WTB) */ --brand-secondary: #5566a0; /* periwinkle-navy — kebaca di porcelain */ --brand-navy: #3f5489; --cta: #7b3fa0; --cta-foreground: #ffffff; --cta-hover: #6a3390; /* aurora signature — DNA logo, periwinkle→indigo→violet→magenta register-invariant: selalu dipakai di plat gelap (deep-field / deep-wash) */ --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)); /* sub-aksen per produk (keluarga violet-indigo-kosmik) */ --accent-studio: #7b2fd6; --accent-pengacaraku: #6b5bc4; --accent-klinova: #8ea5d3; --accent-stp: #7b3fa0; --accent-tribuanacloud: #3f5489; /* ── 3. DEEP SPACE — token plat gelap (untuk seksi dark di halaman terang) ── Nilai persis sama dengan override .dark di bawah. Pakai token ini di kelas .deep-field dan seksi inline deep-space. */ --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; --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); /* ── 4. TIPOGRAFI ── Konsumen load font via @fontsource-variable, bukan @import di sini. */ /* kanonik WTB (--ff-*) */ --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; /* alias shadcn/Tailwind (--font-*) — tunjuk ke --ff-* */ --font-sans: var(--ff-body); --font-display: var(--ff-display); --font-serif: var(--ff-serif); --font-mono: var(--ff-mono); /* ── 5. 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 */ /* ── 6. 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; /* ── 7. RADIUS ── */ --radius-sm: 2px; /* border tag/chip mikro */ --radius-md: 6px; --radius-lg: 8px; /* = --radius (shadcn base) */ --radius-xl: 8px; --radius-card: 18px; /* kartu mengambang besar (ala Tome) */ --radius-full: 9999px; --radius-pill: 9999px; /* ── 8. SHADOW — 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); /* ── 9. MOTION — easing signature master ── */ --duration-fast: 150ms; --duration-normal: 240ms; --duration-slow: 500ms; --dur-fast: 150ms; /* alias singkat */ --dur: 240ms; --dur-slow: 500ms; --ease-out: cubic-bezier(0.0, 0, 0.2, 1); --ease-silk: cubic-bezier(0.22, 1, 0.36, 1); /* hover / keluar */ --ease-snap: cubic-bezier(0.16, 1, 0.3, 1); /* enter / reveal */ --ease-standard: cubic-bezier(0.4, 0, 0.2, 1); --ease-enter: var(--ease-snap); --ease-hover: var(--ease-silk); /* ── 10. ALIAS LEGACY — opsional, kompat komponen lama ── Komponen baru HARUS pakai token kanonik di atas, bukan alias ini. Alias di bawah tidak akan dihapus agar komponen lama tidak rusak. */ --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); /* ── 11. GLASS TOKENS — liquid glass register terang ── */ --glass-bg: rgba(255,255,255,0.72); --glass-border: rgba(123,63,160,0.16); --glass-blur: 12px; } /* ============================================================================ .dark — REGISTER GELAP "Deep Space" Pakai: untuk wajah gelap (.com / produk / AI) ============================================================================ */ .dark { /* ── shadcn contract — override register gelap ── */ --background: #0d0b1f; --foreground: #edeaf5; --card: #221c34; /* panel mengambang: beda luminance vs kanvas */ --card-foreground: #edeaf5; --popover: #16121e; --popover-foreground: #edeaf5; --primary: #7b2fd6; /* violet panas — energi Tome */ --primary-foreground: #ffffff; --secondary: #1c1729; --secondary-foreground: #d9d3e8; --muted: #17131f; --muted-foreground: #9b92b5; --accent: #241a33; --accent-foreground: #d6c4ea; --destructive: #e5654f; --destructive-foreground: #ffffff; --border: rgba(237, 234, 245, 0.13); /* hairline netral putih-alpha */ --input: rgba(237, 234, 245, 0.18); --ring: #7b2fd6; --chart-1: #b678d6; --chart-2: #8b7ce0; --chart-3: #8ea5d3; --chart-4: #7b2fd6; --chart-5: #5a74b0; --sidebar: #0d0b1f; --sidebar-foreground: #edeaf5; --sidebar-primary: #7b2fd6; --sidebar-primary-foreground:#ffffff; --sidebar-accent: #241a33; --sidebar-accent-foreground: #d6c4ea; --sidebar-border: rgba(237, 234, 245, 0.09); --sidebar-ring: #7b2fd6; /* ── ekstensi WTB — override gelap ── */ --brand: #9b6fd0; /* violet lebih terang agar hidup di deep-space */ --brand-secondary: #8ea5d3; --brand-navy: #5a74b0; --cta: #7b2fd6; /* violet panas + glow */ --cta-foreground: #ffffff; --cta-hover: #9a5cf0; /* shadow gelap = surface tint bertingkat (Material/Apple-style) override --shadow-sm/md/lg sehingga komponen gelap otomatis dapat tint TANPA perlu kelas tambahan atau variabel berbeda */ --shadow-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-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-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); /* alias legacy — update ke register gelap */ --ivory: var(--background); --ivory-deep: var(--secondary); --ink: var(--foreground); --ink-soft: var(--secondary-foreground); --ink-muted: var(--muted-foreground); --hairline: var(--border); --color-bg: var(--background); --color-surface: var(--card); --color-ink: var(--foreground); --color-ink-muted: var(--muted-foreground); --color-border: var(--border); /* glass tokens — override gelap */ --glass-bg: rgba(20,16,35,0.78); --glass-border: rgba(255,255,255,0.16); --glass-blur: 14px; } /* ============================================================================ @theme inline — Tailwind v4: expose token ke kelas utility (bg-background, text-muted-foreground, bg-primary, bg-brand, bg-cta, font-display, rounded-card, dsb.) Abaikan blok ini jika tidak pakai Tailwind v4 — tidak ada efek di CSS biasa. ============================================================================ */ @theme inline { /* warna shadcn */ --color-background: var(--background); --color-foreground: var(--foreground); --color-card: var(--card); --color-card-foreground: var(--card-foreground); --color-popover: var(--popover); --color-popover-foreground: var(--popover-foreground); --color-primary: var(--primary); --color-primary-foreground: var(--primary-foreground); --color-secondary: var(--secondary); --color-secondary-foreground: var(--secondary-foreground); --color-muted: var(--muted); --color-muted-foreground: var(--muted-foreground); --color-accent: var(--accent); --color-accent-foreground: var(--accent-foreground); --color-destructive: var(--destructive); --color-destructive-foreground: var(--destructive-foreground); --color-border: var(--border); --color-input: var(--input); --color-ring: var(--ring); --color-chart-1: var(--chart-1); --color-chart-2: var(--chart-2); --color-chart-3: var(--chart-3); --color-chart-4: var(--chart-4); --color-chart-5: var(--chart-5); --color-sidebar: var(--sidebar); --color-sidebar-foreground: var(--sidebar-foreground); --color-sidebar-primary: var(--sidebar-primary); --color-sidebar-primary-foreground: var(--sidebar-primary-foreground); --color-sidebar-accent: var(--sidebar-accent); --color-sidebar-accent-foreground: var(--sidebar-accent-foreground); --color-sidebar-border: var(--sidebar-border); --color-sidebar-ring: var(--sidebar-ring); /* ekstensi WTB */ --color-brand: var(--brand); --color-brand-secondary: var(--brand-secondary); --color-brand-navy: var(--brand-navy); --color-cta: var(--cta); --color-cta-foreground: var(--cta-foreground); --color-aurora-1: var(--aurora-1); --color-aurora-2: var(--aurora-2); --color-aurora-3: var(--aurora-3); --color-aurora-4: var(--aurora-4); --color-accent-studio: var(--accent-studio); --color-accent-pengacaraku: var(--accent-pengacaraku); --color-accent-klinova: var(--accent-klinova); --color-accent-stp: var(--accent-stp); --color-accent-tribuanacloud: var(--accent-tribuanacloud); /* font */ --font-sans: var(--font-sans); --font-display: var(--font-display); --font-serif: var(--font-serif); --font-mono: var(--font-mono); /* radius */ --radius: var(--radius); --radius-card: var(--radius-card); --radius-pill: var(--radius-pill); }