/* ========================================================================== TOKENS — the single source of truth for colour, type, space and motion. Palette is sampled directly from the company's vintage badge logo: crimson #ED1B33 (40% of logo pixels), royal violet #462F91 (29%), gold #FFC20E (the gilded script). Everything below is derived from those. ========================================================================== */ @font-face { font-family: 'Fraunces'; src: url('../fonts/fraunces-latin.woff2') format('woff2-variations'); font-weight: 400 900; font-style: normal; font-display: swap; /* Trimmed to the glyphs we actually render. */ unicode-range: U+0000-00FF, U+2018-201D, U+2013-2014, U+2026, U+00A0; } @font-face { font-family: 'Inter Tight'; src: url('../fonts/inter-tight-latin.woff2') format('woff2-variations'); font-weight: 300 700; font-style: normal; font-display: swap; unicode-range: U+0000-00FF, U+2018-201D, U+2013-2014, U+2026, U+00A0; } /* Metric-matched fallback so the swap doesn't shift layout (CLS guard). */ @font-face { font-family: 'Fraunces Fallback'; src: local('Georgia'), local('Times New Roman'); size-adjust: 103%; ascent-override: 92%; descent-override: 24%; line-gap-override: 0%; } @font-face { font-family: 'Inter Tight Fallback'; src: local('Arial'), local('Helvetica'); size-adjust: 97%; ascent-override: 96%; descent-override: 24%; line-gap-override: 0%; } :root { /* ---- Ink: near-black with the logo's violet undertone -------------- */ --ink-950: #06040C; --ink-900: #0C0916; /* page background */ --ink-850: #100C1B; --ink-800: #14101F; /* alternating section background */ --ink-700: #1C1730; /* card / raised surface */ --ink-650: #241E3D; --ink-600: #2E2750; /* hairline borders */ --ink-500: #423A66; /* ---- Violet: straight from the logo badge -------------------------- */ --violet-700: #33217A; --violet-600: #462F91; /* logo violet */ --violet-500: #5A3EB8; --violet-400: #7B5BD6; /* ---- Gold: the gilded script. Primary accent. ---------------------- */ --gold-200: #FFF4D6; --gold-300: #FFE3A5; /* champagne highlight */ --gold-400: #FFD677; --gold-500: #FFC20E; /* logo gold — primary accent */ --gold-600: #E0A208; --gold-700: #A87406; /* antique bronze — gradient shadow stop */ /* ---- Crimson: the logo red. Secondary / urgency only. -------------- */ --crimson-600: #C4142A; --crimson-500: #ED1B33; /* logo red — fills only (3.6:1 on ink) */ --crimson-400: #FF4256; /* text-safe variant (4.6:1 on ink) */ /* ---- Neutrals: warm bone, violet-tinted greys ---------------------- */ --bone-50: #F7F4EC; /* primary text on dark — 17.2:1 */ --bone-100: #E9E4D8; --mist-400: #A9A2B8; /* secondary body text — 7.9:1 */ --mist-500: #857D96; /* tertiary / meta — 5.0:1 */ /* ---- Semantic ------------------------------------------------------ */ --success: #3FCF8E; --error: #FF6B6B; --focus: var(--gold-400); /* ---- Gold as a *material*, never a flat fill ----------------------- */ --grad-gold: linear-gradient( 135deg, var(--gold-700) 0%, var(--gold-500) 28%, var(--gold-300) 48%, var(--gold-500) 68%, var(--gold-600) 100% ); --grad-gold-text: linear-gradient( 100deg, var(--gold-600) 0%, var(--gold-400) 22%, var(--gold-200) 44%, var(--gold-400) 66%, var(--gold-600) 100% ); --grad-violet-glow: radial-gradient( circle at 50% 50%, color-mix(in srgb, var(--violet-500) 55%, transparent) 0%, transparent 68% ); --grad-ink-veil: linear-gradient( 180deg, color-mix(in srgb, var(--ink-900) 12%, transparent) 0%, color-mix(in srgb, var(--ink-900) 72%, transparent) 58%, var(--ink-900) 100% ); /* ---- Type ---------------------------------------------------------- */ --ff-display: 'Fraunces', 'Fraunces Fallback', Georgia, 'Times New Roman', serif; --ff-body: 'Inter Tight', 'Inter Tight Fallback', -apple-system, BlinkMacSystemFont, 'Segoe UI', Arial, sans-serif; --fs-hero: clamp(2.6rem, 7vw, 6.25rem); --fs-h1: clamp(2.25rem, 5.6vw, 4.5rem); --fs-h2: clamp(1.875rem, 4.2vw, 3.25rem); --fs-h3: clamp(1.375rem, 2.4vw, 1.95rem); --fs-h4: clamp(1.125rem, 1.6vw, 1.375rem); --fs-lead: clamp(1.0625rem, 1.5vw, 1.375rem); --fs-body: clamp(1rem, 1.02vw, 1.0938rem); --fs-sm: 0.9375rem; --fs-xs: 0.8125rem; --fs-eyebrow: 0.6875rem; --lh-display: 0.98; --lh-tight: 1.15; --lh-body: 1.72; --ls-display: -0.032em; --ls-tight: -0.018em; --ls-eyebrow: 0.2em; /* ---- Space (8px base) ---------------------------------------------- */ --s-1: 0.25rem; --s-2: 0.5rem; --s-3: 0.75rem; --s-4: 1rem; --s-5: 1.5rem; --s-6: 2rem; --s-7: 3rem; --s-8: 4rem; --s-9: 6rem; --s-10: 8rem; --s-11: 12rem; --section-y: clamp(4.5rem, 10vw, 11rem); --gutter: clamp(1.25rem, 4vw, 3rem); --container: 78rem; /* 1248px */ --container-wide: 92rem; /* 1472px */ --measure: 68ch; /* ---- Radii --------------------------------------------------------- */ --r-sm: 6px; --r-md: 14px; --r-lg: 24px; --r-xl: 32px; --r-pill: 999px; /* ---- Elevation: always layered, never a single shadow -------------- */ --shadow-sm: 0 1px 2px rgb(0 0 0 / 0.5), 0 3px 8px -3px rgb(0 0 0 / 0.42); --shadow-lift: 0 1px 2px rgb(0 0 0 / 0.55), 0 8px 16px -6px rgb(0 0 0 / 0.5), 0 32px 64px -24px rgb(0 0 0 / 0.66), inset 0 1px 0 rgb(247 244 236 / 0.07); --shadow-deep: 0 2px 4px rgb(0 0 0 / 0.6), 0 16px 32px -10px rgb(0 0 0 / 0.55), 0 56px 96px -32px rgb(0 0 0 / 0.72), inset 0 1px 0 rgb(247 244 236 / 0.09); --shadow-gold: 0 0 0 1px rgb(255 194 14 / 0.3), 0 10px 28px -10px rgb(255 194 14 / 0.34), 0 28px 64px -28px rgb(255 194 14 / 0.26); --shadow-neon-red: 0 0 0 1px rgb(237 27 51 / 0.4), 0 0 24px -4px rgb(237 27 51 / 0.5), 0 0 60px -12px rgb(237 27 51 / 0.35); /* ---- Glass --------------------------------------------------------- */ --glass-bg: color-mix(in srgb, var(--ink-800) 62%, transparent); --glass-bg-strong: color-mix(in srgb, var(--ink-850) 86%, transparent); --glass-border: color-mix(in srgb, var(--bone-50) 11%, transparent); --glass-blur: blur(20px) saturate(165%); /* ---- Motion -------------------------------------------------------- */ --ease-out: cubic-bezier(0.16, 1, 0.3, 1); --ease-in-out: cubic-bezier(0.65, 0, 0.35, 1); --ease-spring: cubic-bezier(0.34, 1.56, 0.64, 1); --t-micro: 180ms; --t-base: 320ms; --t-enter: 620ms; --t-hero: 900ms; /* ---- Z-index scale — every layer declared here, nowhere else ------- */ --z-raised: 10; --z-sticky: 20; --z-mobilebar: 30; --z-menu: 40; --z-modal: 50; --z-skip: 60; /* Height of the mobile call/WhatsApp bar; JS keeps it in sync so the footer never sits underneath it. */ --mobilebar-h: 0px; --header-h: 76px; } /* Opaque fallbacks wherever backdrop-filter isn't supported. */ @supports not (backdrop-filter: blur(1px)) { :root { --glass-bg: color-mix(in srgb, var(--ink-800) 97%, transparent); --glass-bg-strong: color-mix(in srgb, var(--ink-850) 99%, transparent); } }