/* ============================================================ CVN — Design Tokens, dipakai bersama CVN-OS dan website cvn.asia Satu-satunya tempat nilai warna, ukuran, dan tipografi hidup. JANGAN pernah tulis hex atau px mentah di file lain. Tinggal di apps/web karena deploy menyalin apps/web ke akar situs publik dan ke os/web. OS memuatnya lewat ../web/tokens.css, yang dari akar os. menjadi /web/tokens.css. Dua permukaan, satu kosakata token: - OS (bawaan :root): panel kaca di atas wallpaper, aksen oranye + violet. Wallpaper diatur js/appearance.js di OS. - Website (:root[data-surface='web']): hitam sinematik, aksen hijau. Hanya nilai yang berbeda yang ditimpa; sisanya ikut OS. ============================================================ */ :root { color-scheme: dark; /* ---------- Permukaan padat ---------- Untuk yang HARUS padat: modal, dropdown, toast, header tabel yang sticky, sel yang diedit. Panel biasa memakai --glass-card di bawah. */ --bg-void: #07050D; --bg-base: #0B0814; /* warna di balik wallpaper saat gambar belum termuat */ --bg-surface: #151024; /* modal, panel dropdown, header sticky */ --bg-raised: #1C1630; /* hover, kartu di dalam modal */ --bg-overlay: rgba(255, 255, 255, 0.06); /* chip, hover baris, input */ --bg-scrim: rgba(5, 3, 10, 0.6); /* ---------- Kaca ---------- Tiga tingkat: - glass-bg : sidebar & topbar (paling tebal) - glass-card : kartu, statistik, kolom kanban - glass-ctrl : input, tombol, pill filter Di layar sentuh / sempit blur dimatikan dan kartu memakai versi lebih pekat (--glass-card-solid) — backdrop-filter bertumpuk di area yang digulir membuat gulir patah-patah di HP menengah. Lihat base.css. */ --glass-bg: rgba(16, 11, 28, 0.58); --glass-blur: blur(28px) saturate(150%); --glass-card: rgba(24, 18, 40, 0.52); --glass-card-solid: rgba(20, 15, 34, 0.9); --glass-card-line: rgba(255, 255, 255, 0.08); --glass-card-blur: blur(22px) saturate(140%); --glass-inset: rgba(255, 255, 255, 0.035); /* baris di dalam kartu kaca */ --glass-ctrl: rgba(255, 255, 255, 0.05); --glass-ctrl-line: rgba(255, 255, 255, 0.1); --glass-ctrl-blur: blur(12px) saturate(150%); /* Kilau tepi atas panel kaca — memberi kesan lembaran kaca, bukan kotak. */ --edge-hi: inset 0 1px 0 rgba(255, 255, 255, 0.07); --hi-on-color: inset 0 1px 0 rgba(255, 255, 255, 0.25); /* ---------- Garis ---------- */ --line-hair: rgba(255, 255, 255, 0.06); --line-soft: rgba(255, 255, 255, 0.09); --line-strong: rgba(255, 255, 255, 0.18); /* ---------- Teks ---------- */ --ink-bright: #F6F3FC; --ink-body: #D2CCE0; --ink-muted: #9C94B2; --ink-faint: #6E6684; --ink-invert: #0B0814; /* ---------- Aksen ---------- accent (violet) : tombol utama, fokus, seri utama grafik accent-2 (oranye): menu aktif, sorotan, seri kedua grafik Gradiennya dipakai di menu aktif & tombol utama. */ --accent: #8B5CF6; --accent-dim: #7C3AED; --accent-glow: rgba(139, 92, 246, 0.28); --accent-soft: rgba(139, 92, 246, 0.14); --accent-2: #F97316; --accent-2-dim: #EA580C; --accent-2-glow: rgba(249, 115, 22, 0.32); --accent-2-soft: rgba(249, 115, 22, 0.14); --grad-primary: linear-gradient(135deg, #9B6BFF 0%, #7C3AED 100%); --grad-active: linear-gradient(135deg, #FB923C 0%, #EA580C 100%); --grad-brand: linear-gradient(120deg, #F97316 0%, #C026D3 55%, #7C3AED 100%); /* Nama lama dipertahankan supaya modul yang masih menulis var(--pink) tidak putus. Isadaya tetap pink lewat brands.color di database. */ --pink: #EC4899; --pink-dim: #BE2D74; --pink-glow: rgba(236, 72, 153, 0.18); --pink-soft: rgba(236, 72, 153, 0.12); --cyan: #06B6D4; --cyan-dim: #0A8DA5; --cyan-glow: rgba(6, 182, 212, 0.2); --cyan-soft: rgba(6, 182, 212, 0.12); --violet: #A855F7; --violet-glow: rgba(168, 85, 247, 0.18); /* ---------- Warna unit bisnis (fallback; nilai final dari brands.color) ---------- */ --unit-isadaya: var(--pink); --unit-von: var(--cyan); --unit-breaker: var(--violet); --unit-holding: #64748B; /* ---------- Logo CVN (empat warna kepingan) ---------- */ --logo-pink: #ED2474; --logo-blue: #1997D4; --logo-yellow: #E9BD2A; --logo-green: #88C75B; /* ---------- Merek pihak luar ---------- */ --whatsapp: #25D366; /* ---------- Grafik ---------- Seri utama violet, seri pembanding oranye, sisanya --chart-dim. Divalidasi terhadap --glass-card-solid: violet 4.6, oranye 6.7, chart-dim 2.7. */ --chart-accent: var(--accent); --chart-accent-2: var(--accent-2); --chart-dim: #5E5680; --chart-grid: rgba(255, 255, 255, 0.06); /* ---------- Wallpaper preset (gelap) ---------- Dipilih lewat atribut data-wp di #wallpaper. Gambar unggahan sendiri menimpa semuanya lewat style inline dari js/appearance.js. */ --wp-aurora: radial-gradient(60% 70% at 0% 100%, rgba(249, 115, 22, 0.55), transparent 60%), radial-gradient(50% 60% at 100% 0%, rgba(124, 58, 237, 0.6), transparent 60%), radial-gradient(40% 50% at 55% 55%, rgba(192, 38, 211, 0.22), transparent 70%), linear-gradient(160deg, #120A22 0%, #0B0814 55%, #140A12 100%); --wp-senja: radial-gradient(70% 70% at 10% 90%, rgba(251, 113, 133, 0.5), transparent 60%), radial-gradient(60% 60% at 90% 10%, rgba(249, 115, 22, 0.5), transparent 60%), linear-gradient(160deg, #1E0B14 0%, #120810 100%); --wp-samudra: radial-gradient(60% 70% at 0% 100%, rgba(6, 182, 212, 0.45), transparent 60%), radial-gradient(55% 60% at 100% 0%, rgba(59, 130, 246, 0.5), transparent 60%), linear-gradient(160deg, #06121E 0%, #070B16 100%); --wp-hutan: radial-gradient(60% 70% at 0% 100%, rgba(16, 185, 129, 0.4), transparent 60%), radial-gradient(55% 60% at 100% 0%, rgba(132, 204, 22, 0.28), transparent 60%), linear-gradient(160deg, #06140F 0%, #070D0B 100%); /* Kartu promosi dashboard */ --promo-bg: radial-gradient(60% 80% at 85% 75%, #F97316, transparent 60%), radial-gradient(70% 90% at 55% 30%, #C026D3, transparent 60%), linear-gradient(135deg, #2A1250, #110A22); --promo-ink: #FFFFFF; --wp-grafit: radial-gradient(70% 60% at 50% 0%, rgba(255, 255, 255, 0.06), transparent 70%), linear-gradient(180deg, #121118 0%, #09080D 100%); /* ---------- Gradien ikon aplikasi desktop (js/apps.js → tone) ---------- */ --tone-violet: linear-gradient(135deg, #A78BFA 0%, #7C3AED 100%); --tone-orange: linear-gradient(135deg, #FDBA74 0%, #EA580C 100%); --tone-cyan: linear-gradient(135deg, #67E8F9 0%, #0891B2 100%); --tone-green: linear-gradient(135deg, #86EFAC 0%, #16A34A 100%); --tone-blue: linear-gradient(135deg, #93C5FD 0%, #2563EB 100%); --tone-pink: linear-gradient(135deg, #F9A8D4 0%, #DB2777 100%); --tone-amber: linear-gradient(135deg, #FDE68A 0%, #D97706 100%); --tone-slate: linear-gradient(135deg, #CBD5E1 0%, #475569 100%); /* ---------- Jendela aplikasi ---------- Jendela memakai SATU blur untuk dirinya. Panel di dalamnya tidak memakai blur lagi (lihat base.css) — blur bertumpuk itulah yang dulu membuat gulir patah-patah. */ --glass-win: rgba(14, 10, 26, 0.62); --glass-win-line: rgba(255, 255, 255, 0.1); --win-bar-h: 44px; --taskbar-h: 56px; /* ---------- Semantik ---------- */ --ok: #22C55E; --ok-glow: rgba(34, 197, 94, 0.16); --warn: #F59E0B; --warn-glow: rgba(245, 158, 11, 0.16); --danger: #EF4444; --danger-glow: rgba(239, 68, 68, 0.16); --info: #3B82F6; --info-glow: rgba(59, 130, 246, 0.16); /* ---------- Tipografi ---------- */ --font-display: 'Plus Jakarta Sans', 'Inter', system-ui, sans-serif; --font-body: 'Inter', system-ui, -apple-system, sans-serif; --font-mono: 'JetBrains Mono', ui-monospace, 'SF Mono', monospace; --fs-2xs: 0.6875rem; /* 11px */ --fs-xs: 0.75rem; /* 12px */ --fs-sm: 0.8125rem; /* 13px */ --fs-base: 0.875rem; /* 14px */ --fs-md: 1rem; /* 16px — input (hindari zoom iOS) */ --fs-lg: 1.125rem; /* 18px */ --fs-xl: 1.375rem; /* 22px */ --fs-2xl: 1.75rem; /* 28px */ --fs-3xl: 2.25rem; /* 36px */ --fw-normal: 400; --fw-medium: 500; --fw-semibold: 600; --fw-bold: 700; --fw-heavy: 800; --lh-tight: 1.2; --lh-snug: 1.4; --lh-normal: 1.6; --track-tight: -0.015em; --track-tighter: -0.03em; --track-wide: 0.06em; /* ---------- Spacing (skala 4px) ---------- */ --sp-1: 0.25rem; --sp-2: 0.5rem; --sp-3: 0.75rem; --sp-4: 1rem; --sp-5: 1.25rem; --sp-6: 1.5rem; --sp-8: 2rem; --sp-10: 2.5rem; --sp-12: 3rem; --sp-16: 4rem; /* ---------- Radius ---------- */ --r-xs: 4px; --r-sm: 8px; --r-md: 12px; --r-lg: 18px; --r-xl: 24px; --r-full: 999px; /* ---------- Elevasi ---------- */ --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.35); --shadow-md: 0 6px 16px rgba(0, 0, 0, 0.35); --shadow-lg: 0 24px 48px -12px rgba(0, 0, 0, 0.6); --shadow-card: 0 10px 30px -14px rgba(0, 0, 0, 0.7); --shadow-accent: 0 8px 22px -6px var(--accent-glow); --shadow-accent-2: 0 8px 22px -6px var(--accent-2-glow); --shadow-pink: var(--shadow-accent); /* ---------- Layout ---------- */ --frame-gap: 14px; /* jarak panel kaca dari tepi layar (desktop) */ --sidebar-w: 256px; --sidebar-w-mini: 76px; --topbar-h: 64px; --bottombar-h: 66px; --content-max: 1480px; --rail-w: 3px; /* ---------- Motion ---------- */ --ease-out: cubic-bezier(0.22, 1, 0.36, 1); --ease-inout: cubic-bezier(0.65, 0, 0.35, 1); --dur-fast: 140ms; --dur-base: 220ms; --dur-slow: 380ms; /* ---------- Z-index ---------- */ --z-wallpaper: -1; --z-base: 1; --z-sticky: 50; --z-desktop: 10; --z-window: 60; --z-taskbar: 120; --z-startmenu: 130; --z-sidebar: 100; --z-topbar: 110; --z-menu: 150; --z-drawer: 200; --z-modal: 300; --z-toast: 400; --z-boot: 500; } /* ============================================================ MODE TERANG — kaca susu di atas wallpaper pastel ============================================================ */ :root[data-theme='light'] { color-scheme: light; --bg-void: #EEEAF7; --bg-base: #F3F0FA; --bg-surface: #FFFFFF; --bg-raised: #F7F5FC; --bg-overlay: rgba(40, 20, 80, 0.05); --bg-scrim: rgba(30, 20, 50, 0.35); --glass-bg: rgba(255, 255, 255, 0.55); --glass-card: rgba(255, 255, 255, 0.58); --glass-card-solid: rgba(255, 255, 255, 0.92); --glass-card-line: rgba(255, 255, 255, 0.75); --glass-inset: rgba(255, 255, 255, 0.55); --glass-ctrl: rgba(255, 255, 255, 0.6); --glass-ctrl-line: rgba(60, 40, 110, 0.12); --edge-hi: inset 0 1px 0 rgba(255, 255, 255, 0.9); --line-hair: rgba(40, 20, 80, 0.06); --line-soft: rgba(40, 20, 80, 0.09); --line-strong: rgba(40, 20, 80, 0.18); --ink-bright: #17122A; --ink-body: #3D3652; --ink-muted: #6C6484; --ink-faint: #A199B6; --ink-invert: #FFFFFF; --accent-soft: rgba(139, 92, 246, 0.12); --accent-2-soft: rgba(249, 115, 22, 0.12); --chart-dim: #A79FC4; --glass-win: rgba(255, 255, 255, 0.5); --glass-win-line: rgba(255, 255, 255, 0.8); --chart-grid: rgba(40, 20, 80, 0.07); --wp-aurora: radial-gradient(60% 70% at 0% 100%, rgba(253, 186, 116, 0.75), transparent 60%), radial-gradient(55% 60% at 100% 0%, rgba(196, 181, 253, 0.85), transparent 60%), radial-gradient(40% 50% at 60% 60%, rgba(244, 114, 182, 0.25), transparent 70%), linear-gradient(160deg, #F6F1FF 0%, #F3F0FA 55%, #FFF4EC 100%); --wp-senja: radial-gradient(70% 70% at 10% 90%, rgba(251, 164, 175, 0.7), transparent 60%), radial-gradient(60% 60% at 90% 10%, rgba(253, 186, 116, 0.7), transparent 60%), linear-gradient(160deg, #FFF3F0 0%, #FFF8F2 100%); --wp-samudra: radial-gradient(60% 70% at 0% 100%, rgba(103, 232, 249, 0.6), transparent 60%), radial-gradient(55% 60% at 100% 0%, rgba(147, 197, 253, 0.75), transparent 60%), linear-gradient(160deg, #EFF8FF 0%, #F1F5FE 100%); --wp-hutan: radial-gradient(60% 70% at 0% 100%, rgba(110, 231, 183, 0.6), transparent 60%), radial-gradient(55% 60% at 100% 0%, rgba(190, 242, 100, 0.45), transparent 60%), linear-gradient(160deg, #EFFBF5 0%, #F4FAF0 100%); --wp-grafit: linear-gradient(180deg, #F4F3F8 0%, #E9E7F0 100%); --promo-bg: radial-gradient(60% 80% at 85% 75%, #FDBA74, transparent 60%), radial-gradient(70% 90% at 55% 30%, #E9D5FF, transparent 60%), linear-gradient(135deg, #F5F0FF, #FFF1E6); --promo-ink: #17122A; --shadow-card: 0 10px 30px -16px rgba(60, 30, 120, 0.28); --shadow-lg: 0 24px 48px -16px rgba(60, 30, 120, 0.35); --shadow-md: 0 6px 16px rgba(60, 30, 120, 0.12); } /* ============================================================ WEBSITE — hitam sinematik dengan aksen hijau glitch Dipasang lewat di apps/web/index.html. ============================================================ */ :root[data-surface='web'] { /* Website tidak pernah menyatakan color-scheme; dark akan mengubah kontrol bawaan browser (select, scrollbar) yang sudah dirancang. */ color-scheme: normal; --bg-base: #000000; --bg-surface: #0A0A0A; --bg-raised: #12160F; /* wadah media karya sebelum gambarnya termuat */ --stripe-a: #101408; /* pola garis media karya yang kosong */ --stripe-b: #0C0F07; --line-hair: rgba(255, 255, 255, 0.06); --line-soft: rgba(255, 255, 255, 0.12); --ink-bright: #FFFFFF; --ink-muted: #9A9A9A; --ink-faint: #555555; --ink-invert: #000000; --accent: #B6FF3A; /* hijau glitch, sesuai video pembuka */ --accent-2: #FFC14D; /* tombol Contact di menu HP */ --accent-2-hi: #FFD98A; /* Dock karya: lembar terang di dasar layar karya */ --paper: #FFFFFF; --paper-tile: #E9E9E9; --paper-ink: #111111; --paper-muted: #8A8A8A; --font-body: 'Inter', system-ui, -apple-system, 'Segoe UI', sans-serif; --font-display: 'Geist', system-ui, -apple-system, 'Segoe UI', sans-serif; } @media (prefers-reduced-motion: reduce) { :root { --dur-fast: 0ms; --dur-base: 0ms; --dur-slow: 0ms; } }