/* ============================================================ ZENTAVOR — Theme tokens Three concepts driven by [data-concept] on : a = Dark Infra (default — Vercel/Linear near-black) b = Light Enterprise(Provectus — crisp white, indigo) c = Soft Premium (ElevenLabs — airy, soft gradients) ============================================================ */ :root { /* Type */ --font-display: "Space Grotesk", system-ui, sans-serif; --font-mono: "JetBrains Mono", ui-monospace, monospace; --font-body: "Inter", system-ui, sans-serif; /* Motion */ --ease: cubic-bezier(0.16, 1, 0.3, 1); --ease-spring: cubic-bezier(0.34, 1.56, 0.64, 1); /* Layout */ --maxw: 1200px; --gutter: 40px; --section-y: 140px; /* Defaults overridden per concept */ --shadow-card: 0 1px 0 rgba(255,255,255,0.04) inset; --card-blur: 0px; } /* ---------- Concept A · Dark Infra (default) ---------- */ :root, [data-concept="a"] { color-scheme: dark; --bg: #08080D; --bg-elev: #0B0B12; --bg-deep: #050509; --surface: rgba(255,255,255,0.05); --surface-2: rgba(255,255,255,0.085); --surface-solid: #111119; --border: rgba(255,255,255,0.10); --border-strong: rgba(255,255,255,0.20); --text: #F0F0F5; --text-muted: #9CA2AE; --text-faint: #8A909C; --accent: #7C3AED; --accent-soft: #A78BFA; --accent-2: #06B6D4; --pos: #10B981; --warn: #F59E0B; --neg: #F87171; --grid-line: rgba(255,255,255,0.045); /* fine grain for "шершавые" panels — grayscale noise, blend via overlay at low opacity */ --grain: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='g'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.82' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23g)'/%3E%3C/svg%3E"); --radius: 18px; --radius-lg: 24px; --card-blur: 14px; --shadow-card: 0 1px 0 rgba(255,255,255,0.06) inset, 0 24px 60px -30px rgba(0,0,0,0.9); --shadow-hover: 0 1px 0 rgba(255,255,255,0.10) inset, 0 40px 80px -32px rgba(0,0,0,0.95); --header-bg: rgba(8,8,13,0.72); --chip-bg: rgba(255,255,255,0.04); --hero-glow: radial-gradient(800px 500px at 22% 8%, rgba(124,58,237,0.20), transparent 60%), radial-gradient(700px 520px at 86% 30%, rgba(6,182,212,0.14), transparent 62%); } /* ---------- Concept B · Light Enterprise ---------- */ [data-concept="b"] { color-scheme: light; --bg: #FFFFFF; --bg-elev: #F6F8FB; --bg-deep: #EEF1F6; --surface: #FFFFFF; --surface-2: #F6F8FB; --surface-solid: #FFFFFF; --border: rgba(13,18,28,0.09); --border-strong: rgba(13,18,28,0.16); --text: #0B0F1A; --text-muted: #4A5568; --text-faint: #5F6878; --accent: #4F46E5; --accent-soft: #6366F1; --accent-2: #0EA5E9; --pos: #059669; --warn: #D97706; --neg: #DC2626; --grid-line: rgba(13,18,28,0.05); --grain: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='g'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.82' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23g)'/%3E%3C/svg%3E"); --radius: 16px; --radius-lg: 22px; --card-blur: 0px; --shadow-card: 0 1px 2px rgba(13,18,28,0.04), 0 12px 30px -18px rgba(13,18,28,0.18); --shadow-hover: 0 2px 4px rgba(13,18,28,0.06), 0 30px 60px -24px rgba(79,70,229,0.30); --header-bg: rgba(255,255,255,0.78); --chip-bg: #F6F8FB; --hero-glow: radial-gradient(760px 460px at 88% -4%, rgba(79,70,229,0.10), transparent 60%), radial-gradient(620px 420px at 6% 18%, rgba(14,165,233,0.07), transparent 64%); } /* ---------- Concept C · Soft Premium ---------- */ [data-concept="c"] { color-scheme: light; --bg: #F7F5FB; --bg-elev: #FFFFFF; --bg-deep: #EFEBF7; --surface: #FFFFFF; --surface-2: #FBFAFE; --surface-solid: #FFFFFF; --border: rgba(40,30,70,0.08); --border-strong: rgba(40,30,70,0.14); --text: #1B1630; --text-muted: #6A6285; --text-faint: #6E6786; --accent: #7C5CFC; --accent-soft: #A88FFF; --accent-2: #46BFB0; --pos: #2FB67C; --warn: #E8915B; --neg: #E5484D; --grid-line: rgba(40,30,70,0.045); --grain: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='g'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.82' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23g)'/%3E%3C/svg%3E"); --radius: 26px; --radius-lg: 34px; --card-blur: 0px; --shadow-card: 0 2px 6px rgba(60,40,110,0.05), 0 24px 60px -28px rgba(90,70,160,0.30); --shadow-hover: 0 4px 10px rgba(60,40,110,0.07), 0 40px 80px -30px rgba(110,80,200,0.36); --header-bg: rgba(247,245,251,0.74); --chip-bg: #FFFFFF; --hero-glow: radial-gradient(820px 520px at 16% 0%, rgba(124,92,252,0.16), transparent 60%), radial-gradient(760px 540px at 92% 18%, rgba(70,191,176,0.14), transparent 62%), radial-gradient(680px 480px at 60% 80%, rgba(232,145,91,0.08), transparent 66%); }