/* ========================================================================== BEIKORA — CSS Custom Properties Design System V4: OKLCH, achromatic, premium depth Base: #0F1210 scaffold — true neutral gray, zero green bias ========================================================================== */ :root { /* -------------------------------------------------------------------------- SURFACES — OKLCH achromatic grays (chroma = 0, pure neutral) Every step is perceptually uniform (~3L between levels). -------------------------------------------------------------------------- */ --scaffold: oklch(0.14 0 0); /* Base — hero, alternating sections */ --surface: oklch(0.165 0 0); /* +2.5L — trust bar, nav scrolled */ --surface-low: oklch(0.165 0 0); --surface-container: oklch(0.19 0 0); /* +5L — feature cards, inputs */ --surface-high: oklch(0.22 0 0); /* +8L — pricing featured, hover */ --surface-highest: oklch(0.26 0 0); /* +12L — borders, active */ --surface-lowest: oklch(0.11 0 0); /* -3L — footer */ /* HEX fallbacks for older browsers (Safari <15.4, old Chrome) */ --scaffold-fallback: #0F0F0F; --surface-fallback: #141414; --surface-container-fallback: #1A1A1A; --surface-high-fallback: #1F1F1F; --surface-highest-fallback: #272727; /* -------------------------------------------------------------------------- TEXT — Warm achromatic (tiny positive chroma at h=75 for +1% warmth) -------------------------------------------------------------------------- */ --on-surface: oklch(0.97 0.003 75); /* F4F3F2 warm white */ --on-surface-muted: oklch(0.66 0.003 75); /* #9A9996 */ --on-surface-faint: oklch(0.44 0.003 75); /* #5F5E5C */ --on-surface-variant: oklch(0.66 0.003 75); /* alias */ /* -------------------------------------------------------------------------- PRIMARY — Achromatic (pure white/gray, zero chroma) Buttons are white with dark text; hovers/subtles reuse the white. -------------------------------------------------------------------------- */ --primary: oklch(0.97 0.003 75); /* warm white */ --primary-hover: oklch(1 0 0); /* pure white */ --primary-subtle: oklch(0.97 0.003 75 / 0.06); --primary-glow: oklch(0.97 0.003 75 / 0.10); --primary-border: oklch(0.97 0.003 75 / 0.12); /* -------------------------------------------------------------------------- SECONDARY — DEPRECATED. Kept only as alias to primary to avoid breaks. Clay/forest are FORBIDDEN in the landing UI per BEIKORA rules. -------------------------------------------------------------------------- */ --secondary: var(--on-surface); --secondary-hover: var(--on-surface); --secondary-subtle: var(--primary-subtle); --stone: oklch(0.66 0 0); --stone-subtle: oklch(0.97 0 0 / 0.08); /* -------------------------------------------------------------------------- SEMANTIC — Reserved for status only (success/warn/error). Not in UI chrome. -------------------------------------------------------------------------- */ --accent-success: oklch(0.72 0.14 155); --accent-warning: oklch(0.78 0.14 75); --error: oklch(0.66 0.22 25); --stars: oklch(0.85 0.17 85); /* -------------------------------------------------------------------------- BORDERS — On-surface with alpha (perfectly achromatic) -------------------------------------------------------------------------- */ --border: oklch(0.97 0.003 75 / 0.07); --border-strong: oklch(0.97 0.003 75 / 0.12); --border-accent: oklch(0.97 0.003 75 / 0.18); /* -------------------------------------------------------------------------- NAV — Glassmorphism achromatic -------------------------------------------------------------------------- */ --glass-bg: oklch(0.14 0 0 / 0.72); --glass-border: oklch(0.97 0.003 75 / 0.08); --glass-blur: 20px; /* -------------------------------------------------------------------------- SHADOWS — Layered depth (3-layer composition) Premium shadows never use #000 @ 100%. -------------------------------------------------------------------------- */ --shadow-xs: 0 1px 2px oklch(0 0 0 / 0.35), 0 1px 1px oklch(0 0 0 / 0.20); --shadow-sm: 0 1px 2px oklch(0 0 0 / 0.30), 0 2px 4px oklch(0 0 0 / 0.20), inset 0 1px 0 oklch(1 0 0 / 0.04); --shadow-md: 0 2px 4px oklch(0 0 0 / 0.30), 0 8px 16px oklch(0 0 0 / 0.25), 0 16px 32px oklch(0 0 0 / 0.15), inset 0 1px 0 oklch(1 0 0 / 0.05); --shadow-lg: 0 4px 8px oklch(0 0 0 / 0.30), 0 16px 32px oklch(0 0 0 / 0.30), 0 32px 64px oklch(0 0 0 / 0.20), inset 0 1px 0 oklch(1 0 0 / 0.06); --shadow-xl: 0 8px 16px oklch(0 0 0 / 0.35), 0 32px 64px oklch(0 0 0 / 0.35), 0 64px 128px oklch(0 0 0 / 0.25), inset 0 1px 0 oklch(1 0 0 / 0.08); /* Elevated halo for the featured pricing card */ --shadow-glow: 0 0 0 1px oklch(0.97 0.003 75 / 0.14), 0 20px 60px -20px oklch(0 0 0 / 0.50), 0 40px 120px -40px oklch(0 0 0 / 0.35), inset 0 1px 0 oklch(1 0 0 / 0.08); /* -------------------------------------------------------------------------- FOCUS RING — Accessible, achromatic -------------------------------------------------------------------------- */ --focus-ring: 0 0 0 2px oklch(0.14 0 0), 0 0 0 4px oklch(0.97 0.003 75 / 0.70); /* -------------------------------------------------------------------------- SPACING — 8px base grid + fluid hero -------------------------------------------------------------------------- */ --space-xs: 4px; --space-sm: 8px; --space-md: 16px; --space-lg: 24px; --space-xl: 32px; --space-xxl: 48px; --space-hero: 80px; --section-py: clamp(80px, 10vw, 128px); /* -------------------------------------------------------------------------- BORDER RADIUS -------------------------------------------------------------------------- */ --radius-xs: 4px; --radius-sm: 8px; --radius-md: 12px; --radius-lg: 16px; --radius-xl: 24px; --radius-2xl: 32px; --radius-full: 9999px; /* -------------------------------------------------------------------------- TYPOGRAPHY — DM Serif Display + Plus Jakarta Sans + DM Mono -------------------------------------------------------------------------- */ --font-display: 'DM Serif Display', Georgia, 'Times New Roman', serif; --font-body: 'Plus Jakarta Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif; --font-mono: 'DM Mono', 'SF Mono', 'Courier New', monospace; /* -------------------------------------------------------------------------- TYPOGRAPHY — Fluid scale (modular 1.25 ratio + editorial hero) -------------------------------------------------------------------------- */ --text-hero: clamp(2.75rem, 7.2vw, 5.75rem); --text-h2: clamp(2rem, 4.2vw, 3.5rem); --text-h3: clamp(1.25rem, 2vw, 1.625rem); --text-body-lg: clamp(1.0625rem, 1.1vw, 1.1875rem); --text-body: 1rem; --text-sm: 0.875rem; --text-xs: 0.75rem; --text-overline: 0.6875rem; /* -------------------------------------------------------------------------- TYPOGRAPHY — Letter spacing (premium tracking) Display needs tighter tracking; mono/overline needs looser. -------------------------------------------------------------------------- */ --ls-display: -0.035em; --ls-tighter: -0.03em; --ls-tight: -0.022em; --ls-snug: -0.012em; --ls-normal: 0; --ls-wide: 0.02em; --ls-wider: 0.08em; --ls-widest: 0.14em; /* -------------------------------------------------------------------------- TYPOGRAPHY — Line heights -------------------------------------------------------------------------- */ --lh-display: 0.95; --lh-tight: 1.05; --lh-snug: 1.2; --lh-normal: 1.5; --lh-relaxed: 1.65; /* -------------------------------------------------------------------------- OPACITY SCALE -------------------------------------------------------------------------- */ --opacity-subtle: 0.06; --opacity-light: 0.10; --opacity-medium: 0.14; --opacity-heavy: 0.20; --opacity-overlay: 0.70; --opacity-disabled: 0.38; /* -------------------------------------------------------------------------- ANIMATION — Durations -------------------------------------------------------------------------- */ --duration-instant: 80ms; --duration-short: 140ms; --duration-medium: 240ms; --duration-long: 400ms; --duration-slow: 640ms; --stagger-delay: 60ms; /* -------------------------------------------------------------------------- ANIMATION — Premium easings (ease-out curves for UI feel) All default interactions use --ease-out-premium. -------------------------------------------------------------------------- */ --ease-default: cubic-bezier(0.16, 1, 0.3, 1); /* premium ease-out */ --ease-out-premium: cubic-bezier(0.16, 1, 0.3, 1); --ease-emphasized: cubic-bezier(0.2, 0, 0, 1); /* Material Emphasized */ --ease-enter: cubic-bezier(0.16, 1, 0.3, 1); --ease-exit: cubic-bezier(0.4, 0, 1, 1); --ease-in-out: cubic-bezier(0.65, 0, 0.35, 1); --ease-spring: cubic-bezier(0.34, 1.56, 0.64, 1); /* -------------------------------------------------------------------------- LAYOUT -------------------------------------------------------------------------- */ --container-max: 1200px; --container-md: 900px; --container-sm: 720px; --nav-height: 64px; --section-gap: 128px; --section-gap-lg: 160px; /* -------------------------------------------------------------------------- GRAIN / NOISE — subtle film texture overlay -------------------------------------------------------------------------- */ --grain-opacity: 0.035; --grain-url: url("data:image/svg+xml,%3Csvg viewBox='0 0 300 300' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.95' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 1 0 0 0 0 1 0 0 0 0 1 0 0 0 0.9 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E"); } /* ========================================================================== Fallback for browsers without oklch() — keeps the landing usable. Chrome 111+, Safari 15.4+, Firefox 113+ have oklch. ========================================================================== */ @supports not (color: oklch(0 0 0)) { :root { --scaffold: #0F0F0F; --surface: #141414; --surface-low: #141414; --surface-container: #1A1A1A; --surface-high: #1F1F1F; --surface-highest: #272727; --surface-lowest: #0A0A0A; --on-surface: #F4F3F2; --on-surface-muted: #9A9996; --on-surface-faint: #5F5E5C; --on-surface-variant: #9A9996; --primary: #F4F3F2; --primary-hover: #FFFFFF; --primary-subtle: rgba(244, 243, 242, 0.06); --primary-glow: rgba(244, 243, 242, 0.10); --primary-border: rgba(244, 243, 242, 0.12); --border: rgba(244, 243, 242, 0.07); --border-strong: rgba(244, 243, 242, 0.12); --border-accent: rgba(244, 243, 242, 0.18); --glass-bg: rgba(15, 15, 15, 0.72); --glass-border: rgba(244, 243, 242, 0.08); } }