/** * Global design tokens — fonts, colors, space, radius. * Keep in sync with helpers/theme.php defaults. * Palette: monochrome — black / white / gray, no hue. Primary actions invert * against the page (near-black on light, near-white on dark), matching the * cover artwork's grayscale/monochrome direction. */ :root { /* ---- Fonts ---- */ --brand-font-display: 'Poppins', -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; --brand-font-body: 'Inter', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; --font-display: var(--brand-font-display); --font-main: var(--brand-font-body); /* ---- Brand accent (near-white on the dark theme; inverted in light theme below) ---- */ --brand-accent: #f2f3f5; --brand-accent-hover: #d9dbdf; --brand-accent-bright: #ffffff; --brand-accent-soft: rgba(255, 255, 255, 0.10); --brand-accent-glow: rgba(255, 255, 255, 0.25); --brand-accent-border: rgba(255, 255, 255, 0.28); /* Text/icon color to place ON TOP of an accent-filled surface — flips per theme. */ --brand-accent-ink: #0d0d0f; /* ---- Neutrals / brand surfaces ---- */ --brand-page-dark: #0a0a0c; --brand-navy: #131316; --brand-navy-800: #1a1b1e; --brand-ink: #0d0d0f; --brand-muted: #9a9ca1; --brand-faint: #b7b9be; /* ---- Semantic page ---- Surfaces are solid, not translucent glass: a dark editorial site reads as designed, while blur-everything reads as a template. Glass is reserved for the fixed nav/tab bar, where content genuinely passes underneath. */ --page-bg: var(--brand-page-dark); --page-bg-soft: var(--brand-navy); --page-surface: #101012; --page-surface-strong: #17181b; --page-border: rgba(255, 255, 255, 0.08); --page-border-strong: rgba(255, 255, 255, 0.14); --page-text: #ffffff; --page-text-soft: #d6d7da; --page-muted: var(--brand-faint); --page-faint: var(--brand-muted); --page-nav: rgba(8, 8, 10, 0.82); --page-glow-a: rgba(255, 255, 255, 0.05); --page-glow-b: rgba(255, 255, 255, 0.03); --page-glass-blur: blur(14px) saturate(1.1); --page-glass-shadow: 0 10px 30px rgba(0, 0, 0, 0.4); /* ---- Chrome (nav / footer / hero) ---- */ --nav-bg: linear-gradient(180deg, rgba(22, 22, 25, 0.88) 0%, rgba(8, 8, 10, 0.55) 100%); --nav-bg-stuck: rgba(8, 8, 10, 0.92); --nav-wash: linear-gradient(90deg, rgba(255, 255, 255, 0.08) 0%, transparent 38%); --nav-line: rgba(255, 255, 255, 0.12); --hero-bg: radial-gradient(115% 65% at 72% -12%, rgba(255, 255, 255, 0.08) 0%, transparent 60%), linear-gradient(180deg, #131316 0%, var(--page-bg) 68%); --footer-bg: linear-gradient(0deg, rgba(22, 22, 25, 0.88) 0%, rgba(8, 8, 10, 0.5) 100%); --sheet-bg: rgba(16, 16, 18, 0.92); --page-overlay: rgba(6, 6, 8, 0.55); --page-overlay-strong: rgba(6, 6, 8, 0.94); color-scheme: dark; /* ---- Type scale ---- */ --fs-hero: clamp(2.15rem, 3.9vw + 0.55rem, 3.5rem); --fs-h1: clamp(2rem, 3.2vw + 0.9rem, 3.1rem); --fs-h2: clamp(1.55rem, 1.7vw + 0.9rem, 2.35rem); --fs-h3: clamp(1.15rem, 0.6vw + 0.95rem, 1.45rem); --fs-body: clamp(0.98rem, 0.22vw + 0.93rem, 1.08rem); --fs-lead: clamp(1.05rem, 0.5vw + 0.95rem, 1.25rem); --fs-small: clamp(0.82rem, 0.1vw + 0.8rem, 0.92rem); --fs-label: clamp(0.68rem, 0.15vw + 0.66rem, 0.76rem); --tracking-tight: -0.025em; --tracking-wide: 0.16em; /* ---- Space (4px base) ---- */ --space-1: 0.25rem; --space-2: 0.5rem; --space-3: 0.75rem; --space-4: 1rem; --space-5: 1.25rem; --space-6: 1.5rem; --space-7: 2rem; --space-8: 2.5rem; --space-9: 3rem; --space-10: 4rem; /* Section padding. Kept deliberately below the old 6.5rem: with a divider drawn between every section, a large gap on both sides read as a hole. */ --space-section: clamp(2.5rem, 3.1vw + 1.1rem, 4.25rem); --shell-max: 1240px; --shell-pad: clamp(1.1rem, 3.5vw, 2.5rem); /* ---- Radius ---- Restrained corners. Heavily rounded cards look soft and generic; these sit closer to architecture, which suits a builder's brand. */ --radius-xs: 4px; --radius-sm: 8px; --radius-md: 12px; --radius-lg: 14px; --radius-xl: 18px; --radius-2xl: 22px; --radius-pill: 9999px; /* ---- Motion ---- */ --ease-spring: cubic-bezier(0.22, 1, 0.36, 1); --ease-out: cubic-bezier(0.25, 0.8, 0.25, 1); --dur-fast: 0.18s; --dur-med: 0.3s; --dur-slow: 0.6s; /* ---- Shadows ---- Neutral depth only; coloured glows read as neon. */ --shadow-sm: 0 2px 10px rgba(0, 0, 0, 0.3); --shadow-md: 0 10px 28px rgba(0, 0, 0, 0.4); --shadow-accent: 0 4px 14px rgba(0, 0, 0, 0.45); /* ---- Layout ---- */ --nav-height: 66px; --tabbar-height: 62px; } @media (prefers-reduced-motion: reduce) { :root { --dur-fast: 0.01ms; --dur-med: 0.01ms; --dur-slow: 0.01ms; } } html[data-theme="light"] { color-scheme: light; --page-bg: #f7f7f8; --page-bg-soft: #ececee; --page-surface: #ffffff; --page-surface-strong: #f1f1f2; --page-border: rgba(10, 10, 12, 0.10); --page-border-strong: rgba(10, 10, 12, 0.16); --page-text: #101113; --page-text-soft: #34353a; --page-muted: #5c5e64; --page-faint: #7b7d84; --page-nav: rgba(255, 255, 255, 0.86); --page-glow-a: rgba(10, 10, 12, 0.05); --page-glow-b: rgba(10, 10, 12, 0.03); /* Primary action inverts to near-black in the light theme. */ --brand-accent: #121214; --brand-accent-hover: #2b2c30; --brand-accent-bright: #101113; --brand-accent-soft: rgba(16, 17, 19, 0.06); --brand-accent-glow: rgba(16, 17, 19, 0.16); --brand-accent-border: rgba(16, 17, 19, 0.18); --brand-accent-ink: #ffffff; --shadow-sm: 0 2px 10px rgba(10, 10, 12, 0.08); --shadow-md: 0 10px 28px rgba(10, 10, 12, 0.10); --shadow-accent: 0 4px 14px rgba(10, 10, 12, 0.18); --page-glass-shadow: 0 10px 30px rgba(10, 10, 12, 0.08); --nav-bg: linear-gradient(180deg, rgba(255, 255, 255, 0.94) 0%, rgba(247, 247, 248, 0.78) 100%); --nav-bg-stuck: rgba(255, 255, 255, 0.94); --nav-wash: linear-gradient(90deg, rgba(16, 17, 19, 0.06) 0%, transparent 38%); --nav-line: rgba(16, 17, 19, 0.10); --hero-bg: radial-gradient(115% 65% at 72% -12%, rgba(16, 17, 19, 0.05) 0%, transparent 60%), linear-gradient(180deg, #ffffff 0%, var(--page-bg) 68%); --footer-bg: linear-gradient(0deg, rgba(255, 255, 255, 0.96) 0%, rgba(247, 247, 248, 0.78) 100%); --sheet-bg: rgba(255, 255, 255, 0.96); --page-overlay: rgba(16, 17, 19, 0.4); --page-overlay-strong: rgba(16, 17, 19, 0.78); }