/* * Hanse Studio · Phase K Stripe-tier design tokens * * Loaded BEFORE astra-parent-style + style.css. Defines --hs-* CSS custom * properties used by base-stripe.css + sections-stripe.css. * * Token namespaces: * --hs-bg-* backgrounds (navy depths) * --hs-gold-* gold gradient family * --hs-ink-* text colors * --hs-border-* borders + dividers * --hs-card-* card surfaces * --hs-gradient-* gradient compositions * --hs-ease-* motion timing * --hs-font-* font family stacks * --hs-mouse-* mouse-tracked vars (updated by JS in K3) * * @package HanseStudio · Phase K · 2026-05-13 */ :root { /* Backgrounds — gradient mesh navy depths */ --hs-bg-deep: #0A1430; --hs-bg-navy: #0F1F3D; --hs-bg-elev: #1A2D52; /* Gold gradient family */ --hs-gold: #C8A153; --hs-gold-rich: #B8923C; --hs-gold-bright: #E0B860; --hs-gold-soft: rgba(200, 161, 83, 0.22); --hs-gold-veil: rgba(200, 161, 83, 0.08); /* Ink + soft whites (dark mode default) */ --hs-ink-white: #F8F4EC; --hs-ink-soft: rgba(248, 244, 236, 0.7); --hs-ink-muted: rgba(248, 244, 236, 0.4); --hs-ink-faint: rgba(248, 244, 236, 0.2); /* Borders — subtle to bright */ --hs-border-subtle: rgba(255, 255, 255, 0.08); --hs-border-bright: rgba(255, 255, 255, 0.14); --hs-border-gold: rgba(200, 161, 83, 0.32); /* Card surfaces (4% white glass over gradient mesh) */ --hs-card-bg: rgba(255, 255, 255, 0.04); --hs-card-bg-hover: rgba(255, 255, 255, 0.06); /* Stripe-signature gradient mesh (body bg) */ --hs-gradient-mesh: radial-gradient(at 80% 8%, rgba(200, 161, 83, 0.22), transparent 50%), radial-gradient(at 18% 48%, var(--hs-bg-elev), transparent 60%), radial-gradient(at 90% 92%, rgba(200, 161, 83, 0.10), transparent 55%), var(--hs-bg-deep); /* Gold CTA gradient (135deg gold-bright → gold → gold-rich) */ --hs-cta-gradient: linear-gradient(135deg, var(--hs-gold-bright) 0%, var(--hs-gold) 50%, var(--hs-gold-rich) 100%); /* Hero accent text gradient (animated 8s shift, used w gradient text-clip) */ --hs-text-gradient: linear-gradient(120deg, var(--hs-gold-bright) 0%, var(--hs-ink-white) 30%, var(--hs-gold) 60%, var(--hs-gold-rich) 100%); /* Section hairline divider */ --hs-divider: linear-gradient(90deg, transparent, var(--hs-border-bright), transparent); /* Card gradient border (revealed on hover) */ --hs-card-border-gradient: linear-gradient(135deg, transparent 30%, var(--hs-border-gold) 50%, transparent 70%); /* Motion timing tokens */ --hs-ease-out: cubic-bezier(0.16, 1, 0.3, 1); --hs-ease-in-out: cubic-bezier(0.65, 0, 0.35, 1); --hs-duration-instant: 100ms; --hs-duration-fast: 200ms; --hs-duration-base: 400ms; --hs-duration-slow: 800ms; --hs-duration-glow: 8s; --hs-duration-orb: 12s; /* Type system (reuse existing self-hosted fonts) */ --hs-font-display: 'Fraunces', Georgia, 'Times New Roman', serif; --hs-font-body: 'Manrope', system-ui, -apple-system, BlinkMacSystemFont, sans-serif; --hs-font-mono: 'JetBrains Mono', 'Fira Mono', 'SF Mono', Consolas, monospace; /* Mouse-tracked glow position (updated by JS in K3.1) */ --hs-mouse-x: 50%; --hs-mouse-y: 50%; } /* * Light mode override — reverses ink/bg, softens orbs. * Theme toggle (data-theme="light" on ) is wired in functions.php * FOUC-prevention script (priority 0 wp_head action, reads localStorage 'hs-theme'). */ [data-theme="light"] { --hs-bg-deep: #F8F4EC; --hs-bg-navy: #FAF7F0; --hs-bg-elev: #F2EDDF; --hs-ink-white: #0F1F3D; --hs-ink-soft: rgba(15, 31, 61, 0.72); --hs-ink-muted: rgba(15, 31, 61, 0.5); --hs-ink-faint: rgba(15, 31, 61, 0.24); --hs-border-subtle: rgba(15, 31, 61, 0.08); --hs-border-bright: rgba(15, 31, 61, 0.16); --hs-border-gold: rgba(184, 146, 60, 0.4); --hs-card-bg: rgba(15, 31, 61, 0.04); --hs-card-bg-hover: rgba(15, 31, 61, 0.06); --hs-gold-soft: rgba(184, 146, 60, 0.18); --hs-gold-veil: rgba(184, 146, 60, 0.06); --hs-gradient-mesh: radial-gradient(at 80% 8%, rgba(200, 161, 83, 0.16), transparent 50%), radial-gradient(at 18% 48%, var(--hs-bg-elev), transparent 60%), var(--hs-bg-deep); }