/* Sidedoor frontend stylesheet — generated */ :root { /* ── Ink (text) tones ── */ --fe-ink: #ffffff; --fe-ink-2: #c8c6c1; --fe-ink-3: #a8a292; --fe-ink-muted: #8a857a; --fe-ink-dim: #6a655b; /* ── Surfaces ── */ --fe-surface: #0a0a0a; /* default page background */ --fe-surface-alt: #0c0c0c; /* alternating band */ --fe-surface-soft: #060606; /* deepest (quote dividers) */ --fe-surface-card: #111111; /* card background */ --fe-surface-raise: #1a1a1a; /* hovered surface */ /* ── Lines ── */ --fe-line: #1a1a1a; --fe-line-2: #1e1e1e; --fe-line-soft: #141414; /* Input borders — separate from generic surface lines because fields need a stronger outline to be legible against the dark card background. --fe-line-2 (#1e1e1e) blended with the #111 card. */ --fe-input-border: #3a3a36; --fe-input-border-hover: #4d4d48; /* ── Accent (default: gold) ── */ --fe-accent: #c0a060; --fe-accent-hover: #d4b470; --fe-accent-bg: rgba(192, 160, 96, 0.05); --fe-accent-border: rgba(192, 160, 96, 0.28); --fe-accent-fg: #0a0a0a; /* text on solid accent fill */ /* ── Status (shared across the site) ── */ --fe-success: #6ca07a; --fe-warning: #c8a444; --fe-danger: #b86450; --fe-info: #6a8fcc; /* ── Membership tier colours ── Lifted from the existing live-site tier cards so the new DS renders identical palettes. Free uses neutral surface; Premium is the platform violet; Premium Plus is magenta pink. */ --fe-tier-free: var(--fe-ink-muted); --fe-tier-free-bg: var(--fe-surface); --fe-tier-free-border: var(--fe-line); --fe-tier-premium: #9070c0; --fe-tier-premium-hover: #a888d4; --fe-tier-premium-bg: #14101e; --fe-tier-premium-border: #3a2a52; --fe-tier-premium-plus: #e04a9c; --fe-tier-premium-plus-hover: #ec6bae; --fe-tier-premium-plus-bg: #1c0e16; --fe-tier-premium-plus-border: #5a2a42; /* ── Chrome ── */ --fe-header-h: 72px; --fe-shadow-card: 0 2px 24px rgba(0, 0, 0, 0.35); --fe-shadow-sheet: 0 32px 56px rgba(0, 0, 0, 0.45); --fe-focus-ring: 0 0 0 3px rgba(192, 160, 96, 0.4); /* ── Radii ── */ --fe-radius-sm: 2px; --fe-radius: 4px; --fe-radius-lg: 12px; --fe-radius-pill: 999px; /* ── Safe area ── */ --fe-safe-top: env(safe-area-inset-top, 0px); --fe-safe-bottom: env(safe-area-inset-bottom, 0px); --fe-safe-left: env(safe-area-inset-left, 0px); --fe-safe-right: env(safe-area-inset-right, 0px); color-scheme: dark; } /* Audience accent themes — applied via data-fe-accent on . */ :root[data-fe-accent="gold"] { --fe-accent: #c0a060; --fe-accent-hover: #d4b470; --fe-accent-bg: rgba(192, 160, 96, 0.05); --fe-accent-border: rgba(192, 160, 96, 0.28); --fe-accent-fg: #0a0a0a; } :root[data-fe-accent="teal"] { --fe-accent: #40a08c; --fe-accent-hover: #58b49f; --fe-accent-bg: rgba(64, 160, 140, 0.06); --fe-accent-border: rgba(64, 160, 140, 0.3); --fe-accent-fg: #ffffff; } :root[data-fe-accent="pink"] { --fe-accent: #d8709a; --fe-accent-hover: #e58bb0; --fe-accent-bg: rgba(216, 112, 154, 0.07); --fe-accent-border: rgba(216, 112, 154, 0.32); --fe-accent-fg: #1a0a12; } :root[data-fe-accent="violet"] { --fe-accent: #a27ce6; --fe-accent-hover: #b58eff; --fe-accent-bg: rgba(162, 124, 230, 0.08); --fe-accent-border: rgba(162, 124, 230, 0.32); --fe-accent-fg: #120a22; } /* ── Light theme — opt-in via data-fe-theme="light" on ── Dark is the default; a CMS page flips to light by including the marker comment "@theme: light" anywhere in its custom CSS field (the renderer detects the marker and stamps data-fe-theme). Accents (gold/teal/pink/violet) keep working — only the surface/ink/line palette swaps. */ :root[data-fe-theme="light"] { --fe-ink: #1a1a1a; --fe-ink-2: #3d3a33; --fe-ink-3: #5d574c; --fe-ink-muted: #7a7466; --fe-ink-dim: #a8a294; --fe-surface: #ffffff; --fe-surface-alt: #f7f4ec; --fe-surface-soft: #efece2; --fe-surface-card: #ffffff; --fe-surface-raise: #f1ede4; --fe-line: #e8e3d6; --fe-line-2: #d8d2c2; --fe-line-soft: #f0ece2; --fe-input-border: #c8c1b0; --fe-input-border-hover: #a89f8c; --fe-shadow-card: 0 2px 24px rgba(0, 0, 0, 0.06); --fe-shadow-sheet: 0 32px 56px rgba(0, 0, 0, 0.12); --fe-tier-free: var(--fe-ink-muted); --fe-tier-free-bg: var(--fe-surface); --fe-tier-free-border: var(--fe-line); color-scheme: light; } /* Per-audience accent tints need a stronger alpha on white than the dark-default 5–8% — bump under the light theme. */ :root[data-fe-theme="light"][data-fe-accent="gold"] { --fe-accent-bg: rgba(192, 160, 96, 0.12); --fe-accent-border: rgba(192, 160, 96, 0.4); --fe-focus-ring: 0 0 0 3px rgba(192, 160, 96, 0.45); } :root[data-fe-theme="light"][data-fe-accent="teal"] { --fe-accent-bg: rgba(64, 160, 140, 0.12); --fe-accent-border: rgba(64, 160, 140, 0.42); --fe-focus-ring: 0 0 0 3px rgba(64, 160, 140, 0.45); } :root[data-fe-theme="light"][data-fe-accent="pink"] { --fe-accent-bg: rgba(216, 112, 154, 0.12); --fe-accent-border: rgba(216, 112, 154, 0.42); --fe-focus-ring: 0 0 0 3px rgba(216, 112, 154, 0.45); } :root[data-fe-theme="light"][data-fe-accent="violet"] { --fe-accent-bg: rgba(162, 124, 230, 0.14); --fe-accent-border: rgba(162, 124, 230, 0.44); --fe-focus-ring: 0 0 0 3px rgba(162, 124, 230, 0.45); } /* ── Light-theme component overrides ── Two classes of overrides: 1. Site header: hardcoded to rgba(10,10,10,…) in components/siteHeader.ts because the spec is "dark blurred bar". Under light, swap to a light translucent bar so it doesn't look like a bug. 2. Sections that are dark-by-design (hero / final-cta with a bg photo + dark gradient overlay): re-pin --fe-ink / --fe-ink-2 / --fe-ink-3 inside the section back to their dark-theme values so headings + sub text stay legible against the dark image. Without this, --fe-ink resolves to #1a1a1a in light mode and the heading is black-on-dark photo = invisible. */ /* Light-mode header treatment is two-stage: 1. While the hero is on-screen: solid white. The dark hero image would bleed through a translucent bar and muddy the logo. 2. Once the hero has scrolled out of view (.is-past-hero set by frontend.js IntersectionObserver): flip to a blurred translucent bar. The page content below the hero is light, so translucency reads cleanly and feels lighter than a hard solid bar following the user down the page. */ :root[data-fe-theme="light"] .fe-site-header { background: #ffffff; backdrop-filter: none; -webkit-backdrop-filter: none; } :root[data-fe-theme="light"] .fe-site-header.is-scrolled { background: #ffffff; border-bottom-color: var(--fe-line); } :root[data-fe-theme="light"] .fe-site-header.is-past-hero { background: rgba(255, 255, 255, 0.72); backdrop-filter: saturate(160%) blur(10px); -webkit-backdrop-filter: saturate(160%) blur(10px); } :root[data-fe-theme="light"] .fe-site-header.is-past-hero.is-scrolled { background: rgba(255, 255, 255, 0.86); border-bottom-color: var(--fe-line); } :root[data-fe-theme="light"] .fe-hero--has-bg, :root[data-fe-theme="light"] .fe-final-cta--has-bg { --fe-ink: #ffffff; --fe-ink-2: #d8d4cb; --fe-ink-3: #b8b1a3; --fe-ink-muted: #98927f; --fe-ink-dim: #6a655b; } /* Final-CTA's top/bottom gradient bleed uses --fe-surface for the bookends, which becomes white in light mode and produces an ugly white→dark→white sandwich over the dark photo. Force a dark gradient under light theme so the banner reads as one continuous dark image instead of three bands. The hero gradient already uses hardcoded dark rgba's, so it doesn't need this override. */ :root[data-fe-theme="light"] .fe-final-cta--has-bg .fe-final-cta-bg::after { background: linear-gradient(180deg, rgba(10,10,10,0.78) 0%, rgba(10,10,10,0.45) 35%, rgba(10,10,10,0.45) 65%, rgba(10,10,10,0.92) 100%); } :root[data-fe-theme="light"] .fe-final-cta--has-bg { background: #060402; } /* When a slider lives inside a feature figure, the figure's dark bottom-gradient overlay (intended to add weight to a static photo) muddies the rotating images and competes with the dot pagination. Drop the overlay, the brightness/contrast filter on the slide images, and the prev/next arrows in light mode — dots + swipe are enough on a clean white page. Dark theme keeps the full chrome. */ :root[data-fe-theme="light"] .fe-feature-img:has(.fe-slider)::after { background: none; } :root[data-fe-theme="light"] .fe-feature-img .fe-slider-track > img { filter: none; } :root[data-fe-theme="light"] .fe-slider-arrow { display: none; } .\!container{width:100%!important}.container{width:100%}@media (min-width:768px){.\!container{max-width:768px!important}.container{max-width:768px}}@media (min-width:1024px){.\!container{max-width:1024px!important}.container{max-width:1024px}}@media (min-width:1280px){.\!container{max-width:1280px!important}.container{max-width:1280px}}.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border-width:0}.pointer-events-none{pointer-events:none}.pointer-events-auto{pointer-events:auto}.\!visible{visibility:visible!important}.visible{visibility:visible}.invisible{visibility:hidden}.collapse{visibility:collapse}.static{position:static}.fixed{position:fixed}.absolute{position:absolute}.relative{position:relative}.sticky{position:sticky}.inset-0{inset:0}.inset-y-0{top:0;bottom:0}.-right-0\.5{right:-.125rem}.-top-0\.5{top:-.125rem}.bottom-0{bottom:0}.bottom-full{bottom:100%}.left-0{left:0}.left-2\.5{left:.625rem}.left-3{left:.75rem}.right-0{right:0}.right-2\.5{right:.625rem}.right-\[23px\]{right:23px}.right-\[4px\]{right:4px}.top-0{top:0}.top-1\/2{top:50%}.top-2\.5{top:.625rem}.top-full{top:100%}.z-10{z-index:10}.z-20{z-index:20}.z-30{z-index:30}.z-40{z-index:40}.z-50{z-index:50}.z-\[100\]{z-index:100}.z-\[105\]{z-index:105}.z-\[110\]{z-index:110}.z-\[1\]{z-index:1}.z-\[2\]{z-index:2}.z-\[700\]{z-index:700}.z-\[800\]{z-index:800}.z-\[9000\]{z-index:9000}.order-1{order:1}.order-2{order:2}.col-span-full{grid-column:1/-1}.mx-1{margin-left:.25rem;margin-right:.25rem}.mx-auto{margin-left:auto;margin-right:auto}.my-2{margin-top:.5rem;margin-bottom:.5rem}.-mb-px{margin-bottom:-1px}.-ml-1{margin-left:-.25rem}.mb-1{margin-bottom:.25rem}.mb-1\.5{margin-bottom:.375rem}.mb-10{margin-bottom:2.5rem}.mb-12{margin-bottom:3rem}.mb-14{margin-bottom:3.5rem}.mb-16{margin-bottom:4rem}.mb-2{margin-bottom:.5rem}.mb-2\.5{margin-bottom:.625rem}.mb-3{margin-bottom:.75rem}.mb-4{margin-bottom:1rem}.mb-5{margin-bottom:1.25rem}.mb-6{margin-bottom:1.5rem}.mb-7{margin-bottom:1.75rem}.mb-\[12px\]{margin-bottom:12px}.mb-\[14px\]{margin-bottom:14px}.mb-\[20px\]{margin-bottom:20px}.mb-\[22px\]{margin-bottom:22px}.mb-\[24px\]{margin-bottom:24px}.mb-\[32px\]{margin-bottom:32px}.mb-\[6px\]{margin-bottom:6px}.ml-1{margin-left:.25rem}.ml-1\.5{margin-left:.375rem}.ml-2{margin-left:.5rem}.ml-auto{margin-left:auto}.mt-0\.5{margin-top:.125rem}.mt-1{margin-top:.25rem}.mt-1\.5{margin-top:.375rem}.mt-2{margin-top:.5rem}.mt-2\.5{margin-top:.625rem}.mt-20{margin-top:5rem}.mt-3{margin-top:.75rem}.mt-4{margin-top:1rem}.mt-5{margin-top:1.25rem}.mt-6{margin-top:1.5rem}.mt-8{margin-top:2rem}.mt-\[2px\]{margin-top:2px}.mt-\[8px\]{margin-top:8px}.\!block{display:block!important}.block{display:block}.inline-block{display:inline-block}.inline{display:inline}.flex{display:flex}.inline-flex{display:inline-flex}.table{display:table}.\!grid{display:grid!important}.grid{display:grid}.contents{display:contents}.hidden{display:none}.aspect-\[64\/27\]{aspect-ratio:64/27}.aspect-video{aspect-ratio:16/9}.h-1\.5{height:.375rem}.h-2\.5{height:.625rem}.h-3\.5{height:.875rem}.h-4{height:1rem}.h-5{height:1.25rem}.h-6{height:1.5rem}.h-8{height:2rem}.h-9{height:2.25rem}.h-\[120px\]{height:120px}.h-\[140px\]{height:140px}.h-\[16px\]{height:16px}.h-\[180px\]{height:180px}.h-\[18px\]{height:18px}.h-\[1px\]{height:1px}.h-\[2000px\]{height:2000px}.h-\[300px\]{height:300px}.h-\[30px\]{height:30px}.h-\[380px\]{height:380px}.h-\[4px\]{height:4px}.h-\[56px\]{height:56px}.h-\[60px\]{height:60px}.h-\[75px\]{height:75px}.h-\[88px\]{height:88px}.h-\[var\(--sd-header-h\)\]{height:var(--sd-header-h)}.h-full{height:100%}.max-h-60{max-height:15rem}.max-h-\[240px\]{max-height:240px}.max-h-\[300px\]{max-height:300px}.max-h-\[320px\]{max-height:320px}.min-h-\[12px\]{min-height:12px}.min-h-screen{min-height:100vh}.w-10{width:2.5rem}.w-11{width:2.75rem}.w-2{width:.5rem}.w-2\.5{width:.625rem}.w-24{width:6rem}.w-3\.5{width:.875rem}.w-4{width:1rem}.w-5{width:1.25rem}.w-6{width:1.5rem}.w-64{width:16rem}.w-8{width:2rem}.w-9{width:2.25rem}.w-\[110px\]{width:110px}.w-\[120px\]{width:120px}.w-\[140px\]{width:140px}.w-\[16px\]{width:16px}.w-\[18px\]{width:18px}.w-\[1px\]{width:1px}.w-\[2000px\]{width:2000px}.w-\[22px\]{width:22px}.w-\[4px\]{width:4px}.w-\[56px\]{width:56px}.w-\[60px\]{width:60px}.w-\[72px\]{width:72px}.w-\[var\(--sd-sidebar-w\)\]{width:var(--sd-sidebar-w)}.w-full{width:100%}.w-px{width:1px}.min-w-0{min-width:0}.min-w-\[16px\]{min-width:16px}.min-w-\[18px\]{min-width:18px}.min-w-\[20px\]{min-width:20px}.max-w-\[1100px\]{max-width:1100px}.max-w-\[1200px\]{max-width:1200px}.max-w-\[160px\]{max-width:160px}.max-w-\[260px\]{max-width:260px}.max-w-\[320px\]{max-width:320px}.max-w-\[420px\]{max-width:420px}.max-w-\[440px\]{max-width:440px}.max-w-\[48ch\]{max-width:48ch}.max-w-\[50rem\]{max-width:50rem}.max-w-\[52ch\]{max-width:52ch}.max-w-\[54ch\]{max-width:54ch}.max-w-\[760px\]{max-width:760px}.flex-1{flex:1 1 0%}.flex-shrink{flex-shrink:1}.flex-shrink-0{flex-shrink:0}.shrink{flex-shrink:1}.shrink-0{flex-shrink:0}.grow{flex-grow:1}.border-collapse{border-collapse:collapse}.-translate-y-1\/2{--tw-translate-y:-50%}.-translate-y-1\/2,.transform{transform:translate(var(--tw-translate-x),var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))}.cursor-ew-resize{cursor:ew-resize}.cursor-help{cursor:help}.cursor-not-allowed{cursor:not-allowed}.cursor-pointer{cursor:pointer}.resize-y{resize:vertical}.resize{resize:both}.list-none{list-style-type:none}.grid-cols-1{grid-template-columns:repeat(1,minmax(0,1fr))}.grid-cols-2{grid-template-columns:repeat(2,minmax(0,1fr))}.grid-cols-3{grid-template-columns:repeat(3,minmax(0,1fr))}.grid-cols-7{grid-template-columns:repeat(7,minmax(0,1fr))}.grid-cols-\[1fr_auto_1fr\]{grid-template-columns:1fr auto 1fr}.grid-cols-\[minmax\(0\2c 1fr\)_auto_minmax\(0\2c 1fr\)\]{grid-template-columns:minmax(0,1fr) auto minmax(0,1fr)}.flex-col{flex-direction:column}.flex-wrap{flex-wrap:wrap}.items-start{align-items:flex-start}.items-center{align-items:center}.items-baseline{align-items:baseline}.items-stretch{align-items:stretch}.justify-end{justify-content:flex-end}.justify-center{justify-content:center}.justify-between{justify-content:space-between}.gap-0{gap:0}.gap-1{gap:.25rem}.gap-1\.5{gap:.375rem}.gap-2{gap:.5rem}.gap-2\.5{gap:.625rem}.gap-3{gap:.75rem}.gap-4{gap:1rem}.gap-\[10px\]{gap:10px}.gap-\[6px\]{gap:6px}.gap-\[8px\]{gap:8px}.space-y-1>:not([hidden])~:not([hidden]){--tw-space-y-reverse:0;margin-top:calc(.25rem*(1 - var(--tw-space-y-reverse)));margin-bottom:calc(.25rem*var(--tw-space-y-reverse))}.space-y-2>:not([hidden])~:not([hidden]){--tw-space-y-reverse:0;margin-top:calc(.5rem*(1 - var(--tw-space-y-reverse)));margin-bottom:calc(.5rem*var(--tw-space-y-reverse))}.space-y-3>:not([hidden])~:not([hidden]){--tw-space-y-reverse:0;margin-top:calc(.75rem*(1 - var(--tw-space-y-reverse)));margin-bottom:calc(.75rem*var(--tw-space-y-reverse))}.space-y-4>:not([hidden])~:not([hidden]){--tw-space-y-reverse:0;margin-top:calc(1rem*(1 - var(--tw-space-y-reverse)));margin-bottom:calc(1rem*var(--tw-space-y-reverse))}.space-y-6>:not([hidden])~:not([hidden]){--tw-space-y-reverse:0;margin-top:calc(1.5rem*(1 - var(--tw-space-y-reverse)));margin-bottom:calc(1.5rem*var(--tw-space-y-reverse))}.justify-self-start{justify-self:start}.justify-self-end{justify-self:end}.overflow-auto{overflow:auto}.overflow-hidden{overflow:hidden}.overflow-x-auto{overflow-x:auto}.overflow-y-auto{overflow-y:auto}.truncate{overflow:hidden;text-overflow:ellipsis}.truncate,.whitespace-nowrap{white-space:nowrap}.whitespace-pre-wrap{white-space:pre-wrap}.break-words{overflow-wrap:break-word}.break-all{word-break:break-all}.rounded{border-radius:.25rem}.rounded-\[10px\]{border-radius:10px}.rounded-\[2px\]{border-radius:2px}.rounded-\[3px\]{border-radius:3px}.rounded-\[4px\]{border-radius:4px}.rounded-\[5px\]{border-radius:5px}.rounded-\[6px\]{border-radius:6px}.rounded-\[8px\]{border-radius:8px}.rounded-full{border-radius:9999px}.rounded-lg{border-radius:.5rem}.rounded-md{border-radius:.375rem}.rounded-sm{border-radius:.125rem}.border{border-width:1px}.border-0{border-width:0}.border-y{border-top-width:1px}.border-b,.border-y{border-bottom-width:1px}.border-b-2{border-bottom-width:2px}.border-l{border-left-width:1px}.border-l-2{border-left-width:2px}.border-r{border-right-width:1px}.border-t{border-top-width:1px}.border-dashed{border-style:dashed}.border-\[\#1e1e1e\]{--tw-border-opacity:1;border-color:rgb(30 30 30/var(--tw-border-opacity,1))}.border-\[\#2a2a2a\]{--tw-border-opacity:1;border-color:rgb(42 42 42/var(--tw-border-opacity,1))}.border-\[\#382555\]{--tw-border-opacity:1;border-color:rgb(56 37 85/var(--tw-border-opacity,1))}.border-transparent{border-color:transparent}.bg-\[\#000\]{--tw-bg-opacity:1;background-color:rgb(0 0 0/var(--tw-bg-opacity,1))}.bg-\[\#050505\]{--tw-bg-opacity:1;background-color:rgb(5 5 5/var(--tw-bg-opacity,1))}.bg-\[\#0c0c0c\]{--tw-bg-opacity:1;background-color:rgb(12 12 12/var(--tw-bg-opacity,1))}.bg-\[\#0d0d0d\]{--tw-bg-opacity:1;background-color:rgb(13 13 13/var(--tw-bg-opacity,1))}.bg-\[\#111\]{--tw-bg-opacity:1;background-color:rgb(17 17 17/var(--tw-bg-opacity,1))}.bg-\[\#2a2a2a\]{--tw-bg-opacity:1;background-color:rgb(42 42 42/var(--tw-bg-opacity,1))}.bg-\[\#333\]{--tw-bg-opacity:1;background-color:rgb(51 51 51/var(--tw-bg-opacity,1))}.bg-\[\#c0a060\]{--tw-bg-opacity:1;background-color:rgb(192 160 96/var(--tw-bg-opacity,1))}.bg-\[\#fff\]{--tw-bg-opacity:1;background-color:rgb(255 255 255/var(--tw-bg-opacity,1))}.bg-black\/60{background-color:rgba(0,0,0,.6)}.bg-black\/90{background-color:rgba(0,0,0,.9)}.bg-fe-accent{background-color:var(--fe-accent)}.bg-transparent{background-color:transparent}.bg-white{--tw-bg-opacity:1;background-color:rgb(255 255 255/var(--tw-bg-opacity,1))}.bg-cover{background-size:cover}.bg-center{background-position:50%}.bg-no-repeat{background-repeat:no-repeat}.object-cover{-o-object-fit:cover;object-fit:cover}.p-0{padding:0}.p-1{padding:.25rem}.p-1\.5{padding:.375rem}.p-3{padding:.75rem}.p-4{padding:1rem}.p-5{padding:1.25rem}.p-6{padding:1.5rem}.p-\[12px\]{padding:12px}.p-\[14px\]{padding:14px}.p-\[18px\]{padding:18px}.p-\[24px\]{padding:24px}.p-\[8px\]{padding:8px}.\!px-3{padding-left:.75rem!important;padding-right:.75rem!important}.px-0{padding-left:0;padding-right:0}.px-0\.5{padding-left:.125rem;padding-right:.125rem}.px-1{padding-left:.25rem;padding-right:.25rem}.px-1\.5{padding-left:.375rem;padding-right:.375rem}.px-2{padding-left:.5rem;padding-right:.5rem}.px-2\.5{padding-left:.625rem;padding-right:.625rem}.px-3{padding-left:.75rem;padding-right:.75rem}.px-3\.5{padding-left:.875rem;padding-right:.875rem}.px-4{padding-left:1rem;padding-right:1rem}.px-5{padding-left:1.25rem;padding-right:1.25rem}.px-6{padding-left:1.5rem;padding-right:1.5rem}.px-\[10px\]{padding-left:10px;padding-right:10px}.px-\[12px\]{padding-left:12px;padding-right:12px}.px-\[16px\]{padding-left:16px;padding-right:16px}.px-\[20px\]{padding-left:20px;padding-right:20px}.px-\[26px\]{padding-left:26px;padding-right:26px}.px-\[8px\]{padding-left:8px;padding-right:8px}.py-0\.5{padding-top:.125rem;padding-bottom:.125rem}.py-1{padding-top:.25rem;padding-bottom:.25rem}.py-1\.5{padding-top:.375rem;padding-bottom:.375rem}.py-10{padding-top:2.5rem;padding-bottom:2.5rem}.py-2{padding-top:.5rem;padding-bottom:.5rem}.py-2\.5{padding-top:.625rem;padding-bottom:.625rem}.py-20{padding-top:5rem;padding-bottom:5rem}.py-3{padding-top:.75rem;padding-bottom:.75rem}.py-3\.5{padding-top:.875rem;padding-bottom:.875rem}.py-4{padding-top:1rem;padding-bottom:1rem}.py-5{padding-top:1.25rem;padding-bottom:1.25rem}.py-6{padding-top:1.5rem;padding-bottom:1.5rem}.py-8{padding-top:2rem;padding-bottom:2rem}.py-\[10px\]{padding-top:10px;padding-bottom:10px}.py-\[18px\]{padding-top:18px;padding-bottom:18px}.py-\[2px\]{padding-top:2px;padding-bottom:2px}.py-\[3px\]{padding-top:3px;padding-bottom:3px}.py-\[6px\]{padding-top:6px;padding-bottom:6px}.py-\[8px\]{padding-top:8px;padding-bottom:8px}.pb-2\.5{padding-bottom:.625rem}.pb-4{padding-bottom:1rem}.pb-6{padding-bottom:1.5rem}.pb-\[calc\(40px\+env\(safe-area-inset-bottom\)\)\]{padding-bottom:calc(40px + env(safe-area-inset-bottom))}.pl-0{padding-left:0}.pl-2{padding-left:.5rem}.pl-2\.5{padding-left:.625rem}.pl-4{padding-left:1rem}.pl-9{padding-left:2.25rem}.pr-1{padding-right:.25rem}.pr-11{padding-right:2.75rem}.pr-3{padding-right:.75rem}.pr-4{padding-right:1rem}.pr-7{padding-right:1.75rem}.pt-0\.5{padding-top:.125rem}.pt-1{padding-top:.25rem}.pt-12{padding-top:3rem}.pt-3{padding-top:.75rem}.pt-4{padding-top:1rem}.pt-7{padding-top:1.75rem}.pt-8{padding-top:2rem}.text-left{text-align:left}.text-center{text-align:center}.text-right{text-align:right}.align-top{vertical-align:top}.align-middle{vertical-align:middle}.font-\[inherit\]{font-family:inherit}.font-display{font-family:Fraunces,Playfair Display,Georgia,serif}.font-mono{font-family:ui-monospace,SFMono-Regular,Menlo,Monaco,Consolas,Liberation Mono,Courier New,monospace}.text-2xl{font-size:1.5rem;line-height:2rem}.text-3xl{font-size:1.875rem;line-height:2.25rem}.text-4xl{font-size:2.25rem;line-height:2.5rem}.text-\[10px\]{font-size:10px}.text-\[11px\]{font-size:11px}.text-\[12px\]{font-size:12px}.text-\[13px\]{font-size:13px}.text-\[14px\]{font-size:14px}.text-\[16px\]{font-size:16px}.text-\[17px\]{font-size:17px}.text-\[18px\]{font-size:18px}.text-\[22px\]{font-size:22px}.text-\[32px\]{font-size:32px}.text-\[9px\]{font-size:9px}.text-\[clamp\(34px\2c 4\.4vw\2c 58px\)\]{font-size:clamp(34px,4.4vw,58px)}.text-base{font-size:1rem;line-height:1.5rem}.text-lg{font-size:1.125rem;line-height:1.75rem}.text-sm{font-size:.875rem;line-height:1.25rem}.text-xl{font-size:1.25rem;line-height:1.75rem}.text-xs{font-size:.75rem;line-height:1rem}.font-bold{font-weight:700}.font-light{font-weight:300}.font-medium{font-weight:500}.font-normal{font-weight:400}.font-semibold{font-weight:600}.uppercase{text-transform:uppercase}.normal-case{text-transform:none}.italic{font-style:italic}.tabular-nums{--tw-numeric-spacing:tabular-nums;font-variant-numeric:var(--tw-ordinal) var(--tw-slashed-zero) var(--tw-numeric-figure) var(--tw-numeric-spacing) var(--tw-numeric-fraction)}.leading-\[1\.08\]{line-height:1.08}.leading-\[1\.15\]{line-height:1.15}.leading-\[1\.65\]{line-height:1.65}.leading-\[1\.6\]{line-height:1.6}.leading-none{line-height:1}.leading-normal{line-height:1.5}.leading-relaxed{line-height:1.625}.leading-snug{line-height:1.375}.leading-tight{line-height:1.25}.tracking-\[-0\.025em\]{letter-spacing:-.025em}.tracking-\[-0\.02em\]{letter-spacing:-.02em}.tracking-\[0\.08em\]{letter-spacing:.08em}.tracking-\[0\.12em\]{letter-spacing:.12em}.tracking-\[0\.18em\]{letter-spacing:.18em}.tracking-normal{letter-spacing:0}.tracking-tight{letter-spacing:-.025em}.tracking-wider{letter-spacing:.05em}.tracking-widest{letter-spacing:.1em}.text-\[\#0a0a0a\]{--tw-text-opacity:1;color:rgb(10 10 10/var(--tw-text-opacity,1))}.text-\[\#555\]{--tw-text-opacity:1;color:rgb(85 85 85/var(--tw-text-opacity,1))}.text-\[\#5a8ee0\]{--tw-text-opacity:1;color:rgb(90 142 224/var(--tw-text-opacity,1))}.text-\[\#777\]{--tw-text-opacity:1;color:rgb(119 119 119/var(--tw-text-opacity,1))}.text-\[\#888\]{--tw-text-opacity:1;color:rgb(136 136 136/var(--tw-text-opacity,1))}.text-\[\#aaa\]{--tw-text-opacity:1;color:rgb(170 170 170/var(--tw-text-opacity,1))}.text-\[\#e8e6e1\]{--tw-text-opacity:1;color:rgb(232 230 225/var(--tw-text-opacity,1))}.text-black{--tw-text-opacity:1;color:rgb(0 0 0/var(--tw-text-opacity,1))}.text-fe-ink-2{color:var(--fe-ink-2)}.text-gray-200{--tw-text-opacity:1;color:rgb(229 231 235/var(--tw-text-opacity,1))}.text-white{--tw-text-opacity:1;color:rgb(255 255 255/var(--tw-text-opacity,1))}.underline{text-decoration-line:underline}.antialiased{-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}.opacity-0{opacity:0}.opacity-40{opacity:.4}.opacity-50{opacity:.5}.opacity-60{opacity:.6}.shadow{--tw-shadow:0 1px 3px 0 rgba(0,0,0,.1),0 1px 2px -1px rgba(0,0,0,.1);--tw-shadow-colored:0 1px 3px 0 var(--tw-shadow-color),0 1px 2px -1px var(--tw-shadow-color)}.shadow,.shadow-2xl{box-shadow:var(--tw-ring-offset-shadow,0 0 #0000),var(--tw-ring-shadow,0 0 #0000),var(--tw-shadow)}.shadow-2xl{--tw-shadow:0 25px 50px -12px rgba(0,0,0,.25);--tw-shadow-colored:0 25px 50px -12px var(--tw-shadow-color)}.shadow-\[0_1px_2px_rgba\(0\2c 0\2c 0\2c 0\.25\)\]{--tw-shadow:0 1px 2px rgba(0,0,0,.25);--tw-shadow-colored:0 1px 2px var(--tw-shadow-color)}.shadow-\[0_1px_2px_rgba\(0\2c 0\2c 0\2c 0\.25\)\],.shadow-lg{box-shadow:var(--tw-ring-offset-shadow,0 0 #0000),var(--tw-ring-shadow,0 0 #0000),var(--tw-shadow)}.shadow-lg{--tw-shadow:0 10px 15px -3px rgba(0,0,0,.1),0 4px 6px -4px rgba(0,0,0,.1);--tw-shadow-colored:0 10px 15px -3px var(--tw-shadow-color),0 4px 6px -4px var(--tw-shadow-color)}.outline{outline-style:solid}.ring{--tw-ring-offset-shadow:var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);--tw-ring-shadow:var(--tw-ring-inset) 0 0 0 calc(3px + var(--tw-ring-offset-width)) var(--tw-ring-color)}.ring,.ring-1{box-shadow:var(--tw-ring-offset-shadow),var(--tw-ring-shadow),var(--tw-shadow,0 0 #0000)}.ring-1{--tw-ring-offset-shadow:var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);--tw-ring-shadow:var(--tw-ring-inset) 0 0 0 calc(1px + var(--tw-ring-offset-width)) var(--tw-ring-color)}.ring-4{--tw-ring-offset-shadow:var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);--tw-ring-shadow:var(--tw-ring-inset) 0 0 0 calc(4px + var(--tw-ring-offset-width)) var(--tw-ring-color);box-shadow:var(--tw-ring-offset-shadow),var(--tw-ring-shadow),var(--tw-shadow,0 0 #0000)}.blur{--tw-blur:blur(8px)}.blur,.grayscale{filter:var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow)}.grayscale{--tw-grayscale:grayscale(100%)}.filter{filter:var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow)}.backdrop-filter{-webkit-backdrop-filter:var(--tw-backdrop-blur) var(--tw-backdrop-brightness) var(--tw-backdrop-contrast) var(--tw-backdrop-grayscale) var(--tw-backdrop-hue-rotate) var(--tw-backdrop-invert) var(--tw-backdrop-opacity) var(--tw-backdrop-saturate) var(--tw-backdrop-sepia);backdrop-filter:var(--tw-backdrop-blur) var(--tw-backdrop-brightness) var(--tw-backdrop-contrast) var(--tw-backdrop-grayscale) var(--tw-backdrop-hue-rotate) var(--tw-backdrop-invert) var(--tw-backdrop-opacity) var(--tw-backdrop-saturate) var(--tw-backdrop-sepia)}.transition{transition-property:color,background-color,border-color,text-decoration-color,fill,stroke,opacity,box-shadow,transform,filter,-webkit-backdrop-filter;transition-property:color,background-color,border-color,text-decoration-color,fill,stroke,opacity,box-shadow,transform,filter,backdrop-filter;transition-property:color,background-color,border-color,text-decoration-color,fill,stroke,opacity,box-shadow,transform,filter,backdrop-filter,-webkit-backdrop-filter;transition-timing-function:cubic-bezier(.4,0,.2,1);transition-duration:.15s}.transition-colors{transition-property:color,background-color,border-color,text-decoration-color,fill,stroke;transition-timing-function:cubic-bezier(.4,0,.2,1);transition-duration:.15s}.transition-opacity{transition-property:opacity;transition-timing-function:cubic-bezier(.4,0,.2,1);transition-duration:.15s}.transition-transform{transition-property:transform;transition-timing-function:cubic-bezier(.4,0,.2,1)}.duration-150,.transition-transform{transition-duration:.15s}.ease-in-out{transition-timing-function:cubic-bezier(.4,0,.2,1)}.first\:border-t-0:first-child{border-top-width:0}.first\:pt-0:first-child{padding-top:0}.last\:border-b-0:last-child{border-bottom-width:0}.last\:pb-0:last-child{padding-bottom:0}.first-of-type\:border-t-0:first-of-type{border-top-width:0}.first-of-type\:pt-0:first-of-type{padding-top:0}.last-of-type\:pb-0:last-of-type{padding-bottom:0}.hover\:underline:hover{text-decoration-line:underline}.focus\:outline-none:focus{outline:2px solid transparent;outline-offset:2px}.focus-visible\:outline-none:focus-visible{outline:2px solid transparent;outline-offset:2px}.focus-visible\:ring-1:focus-visible{--tw-ring-offset-shadow:var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);--tw-ring-shadow:var(--tw-ring-inset) 0 0 0 calc(1px + var(--tw-ring-offset-width)) var(--tw-ring-color);box-shadow:var(--tw-ring-offset-shadow),var(--tw-ring-shadow),var(--tw-shadow,0 0 #0000)}.disabled\:cursor-not-allowed:disabled{cursor:not-allowed}.disabled\:opacity-40:disabled{opacity:.4}.disabled\:opacity-50:disabled{opacity:.5}.group[open] .group-open\:rotate-90{--tw-rotate:90deg;transform:translate(var(--tw-translate-x),var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))}.group:focus-within .group-focus-within\:opacity-100{opacity:1}.group:hover .group-hover\:opacity-100{opacity:1}.peer:checked~.peer-checked\:translate-x-\[20px\]{--tw-translate-x:20px;transform:translate(var(--tw-translate-x),var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))}.peer:focus-visible~.peer-focus-visible\:ring-2{--tw-ring-offset-shadow:var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);--tw-ring-shadow:var(--tw-ring-inset) 0 0 0 calc(2px + var(--tw-ring-offset-width)) var(--tw-ring-color);box-shadow:var(--tw-ring-offset-shadow),var(--tw-ring-shadow),var(--tw-shadow,0 0 #0000)}@media (min-width:768px){.md\:order-1{order:1}.md\:order-2{order:2}.md\:block{display:block}.md\:inline{display:inline}.md\:flex{display:flex}.md\:hidden{display:none}.md\:w-\[420px\]{width:420px}.md\:w-\[480px\]{width:480px}.md\:w-\[640px\]{width:640px}.md\:w-\[960px\]{width:960px}.md\:grid-cols-2{grid-template-columns:repeat(2,minmax(0,1fr))}.md\:grid-cols-3{grid-template-columns:repeat(3,minmax(0,1fr))}.md\:grid-cols-4{grid-template-columns:repeat(4,minmax(0,1fr))}.md\:grid-cols-\[minmax\(0\2c 360px\)_1fr\]{grid-template-columns:minmax(0,360px) 1fr}.md\:gap-6{gap:1.5rem}.md\:px-12{padding-left:3rem;padding-right:3rem}.md\:px-4{padding-left:1rem;padding-right:1rem}.md\:px-5{padding-left:1.25rem;padding-right:1.25rem}.md\:py-28{padding-top:7rem;padding-bottom:7rem}.md\:text-\[10px\]{font-size:10px}}@media (min-width:1024px){.lg\:grid-cols-3{grid-template-columns:repeat(3,minmax(0,1fr))}.lg\:grid-cols-6{grid-template-columns:repeat(6,minmax(0,1fr))}}.\[\&_input\:not\(\[type\=checkbox\]\)\:not\(\[type\=radio\]\)\]\:\!w-full input:not([type=checkbox]):not([type=radio]),.\[\&_select\]\:\!w-full select{width:100%!important}.\[\&_svg\]\:h-\[18px\] svg{height:18px}.\[\&_svg\]\:w-\[18px\] svg{width:18px}@media (min-width:768px){.md\:\[\&_svg\]\:h-\[22px\] svg{height:22px}.md\:\[\&_svg\]\:w-\[22px\] svg{width:22px}}.\[\&_textarea\]\:\!w-full textarea{width:100%!important} /* Reset */ *, *::before, *::after { box-sizing: border-box; } * { margin: 0; padding: 0; } html, body { height: 100%; } html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; } /* Cap horizontal overflow at the viewport. Some content blocks (decorative shapes positioned with negative margins, large preformatted code, etc.) can poke past the right edge on narrow screens; clipping at the body stops the whole page from scrolling sideways. Pages that legitimately need horizontal scroll inside a child can opt back in by setting overflow-x: visible on themselves. */ html, body { overflow-x: hidden; max-width: 100%; } body { background: var(--fe-surface); color: var(--fe-ink); font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', system-ui, sans-serif; font-weight: 300; font-size: 16px; line-height: 1.6; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; text-rendering: optimizeLegibility; } /* Media elements stay contained */ img, svg, video, canvas, picture { display: block; max-width: 100%; } /* Links inherit colour unless overridden by a component */ a { color: inherit; text-decoration: none; } a:focus-visible { outline: none; box-shadow: var(--fe-focus-ring); border-radius: var(--fe-radius-sm); } /* Form + button resets */ button, input, select, textarea { font: inherit; color: inherit; } button { background: transparent; border: 0; cursor: pointer; } /* List resets for UL/OL used as semantic containers (components opt in to list-style if they want visible markers). */ ul, ol { list-style: none; } /* Selection */ ::selection { background: var(--fe-accent); color: var(--fe-accent-fg); } /* Smooth heading rhythm */ h1, h2, h3, h4, h5, h6 { font-family: 'Fraunces', 'Playfair Display', Georgia, serif; font-weight: 300; letter-spacing: -0.02em; line-height: 1.1; color: var(--fe-ink); } /* inside headings is recoloured to accent gold without italicising. We keep the semantic emphasis but lean on colour + weight for the accent, matching the house voice. */ h1 em, h2 em, h3 em, h4 em { font-style: normal; color: var(--fe-accent); font-weight: 300; } /* Reduced motion — the reveal system also honours this, but base suppresses transitions on declared components too. */ @media (prefers-reduced-motion: reduce) { * { animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; transition-duration: 0.01ms !important; scroll-behavior: auto !important; } } /* Scroll-reveal — elements tagged [data-fe-reveal] start offset + invisible until the runtime tags them .is-in. See footer JS. */ [data-fe-reveal] { opacity: 0; transform: translateY(24px); transition: opacity 700ms cubic-bezier(0.2, 0.7, 0.2, 1), transform 700ms cubic-bezier(0.2, 0.7, 0.2, 1); will-change: opacity, transform; } [data-fe-reveal].is-in { opacity: 1; transform: none; } [data-fe-reveal][data-fe-reveal-delay="1"] { transition-delay: 80ms; } [data-fe-reveal][data-fe-reveal-delay="2"] { transition-delay: 160ms; } [data-fe-reveal][data-fe-reveal-delay="3"] { transition-delay: 240ms; } [data-fe-reveal][data-fe-reveal-delay="4"] { transition-delay: 320ms; } @media (prefers-reduced-motion: reduce) { [data-fe-reveal] { opacity: 1; transform: none; transition: none; } } /* Utility: visually hidden, still accessible to screen readers. */ .fe-sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; } /* Site-wide container — same max-width as the existing marketing. */ .fe-container { max-width: 1200px; margin: 0 auto; padding-left: 20px; padding-right: 20px; } @media (min-width: 768px) { .fe-container { padding-left: 32px; padding-right: 32px; } } @media (min-width: 1024px) { .fe-container { padding-left: 48px; padding-right: 48px; } } .fe-brand { display: inline-flex; align-items: center; gap: 10px; color: var(--fe-ink); text-decoration: none; transition: opacity 180ms ease; } .fe-brand:hover { opacity: 0.92; } .fe-brand-door { display: inline-block; position: relative; width: 16px; height: 22px; background: var(--fe-ink); border-radius: 1px; flex-shrink: 0; } .fe-brand-door::after { content: ''; position: absolute; right: 3px; top: 50%; transform: translateY(-50%); width: 3px; height: 3px; /* Handle reads as a hole punched through the door, so its colour must contrast with --fe-ink (the door fill). --fe-surface tracks the page background, which is the natural opposite of the ink in either theme — black handle on white door (dark mode), white handle on dark door (light mode). */ background: var(--fe-surface); border-radius: 50%; } .fe-brand-name { font-family: 'Fraunces', serif; font-size: 18px; font-weight: 500; letter-spacing: 0.01em; color: var(--fe-ink); line-height: 1; } .fe-brand--sm .fe-brand-door { width: 13px; height: 18px; } .fe-brand--sm .fe-brand-name { font-size: 15px; } .fe-eyebrow { display: inline-block; font-family: 'Inter', sans-serif; font-size: 11px; font-weight: 500; letter-spacing: 0.22em; text-transform: uppercase; color: var(--fe-accent); line-height: 1.2; } .fe-display-xl { font-family: 'Fraunces', serif; font-weight: 300; font-size: clamp(44px, 7vw, 104px); line-height: 0.98; letter-spacing: -0.035em; color: var(--fe-ink); max-width: 14ch; } .fe-display-lg { font-family: 'Fraunces', serif; font-weight: 300; font-size: clamp(34px, 4.4vw, 58px); line-height: 1.08; letter-spacing: -0.025em; color: var(--fe-ink); } .fe-display-md { font-family: 'Fraunces', serif; font-weight: 400; font-size: clamp(22px, 2.2vw, 28px); line-height: 1.18; letter-spacing: -0.015em; color: var(--fe-ink); } .fe-display-xl em, .fe-display-lg em, .fe-display-md em { font-style: normal; color: var(--fe-accent); font-weight: 300; } .fe-btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; padding: 14px 28px; min-height: 48px; border-radius: var(--fe-radius); font-family: 'Inter', sans-serif; font-size: 13px; font-weight: 600; letter-spacing: 0.12em; text-transform: uppercase; text-decoration: none; transition: background 180ms ease, border-color 180ms ease, color 180ms ease, transform 180ms ease; cursor: pointer; white-space: nowrap; -webkit-tap-highlight-color: transparent; } .fe-btn:active { transform: translateY(1px); } .fe-btn--block { width: 100%; } .fe-btn--sm { padding: 10px 20px; min-height: 36px; font-size: 11px; } .fe-btn--lg { padding: 18px 36px; min-height: 56px; font-size: 14px; } .fe-btn--gold { background: var(--fe-accent); color: var(--fe-accent-fg); border: 1px solid var(--fe-accent); } .fe-btn--gold:hover { background: var(--fe-accent-hover); border-color: var(--fe-accent-hover); } .fe-btn--ghost { background: transparent; color: var(--fe-ink); border: 1px solid var(--fe-line-2); } .fe-btn--ghost:hover { border-color: var(--fe-accent); color: var(--fe-accent); } .fe-btn--light { background: rgba(255,255,255,0.08); color: var(--fe-ink); border: 1px solid rgba(255,255,255,0.14); } .fe-btn--light:hover { background: rgba(255,255,255,0.14); border-color: rgba(255,255,255,0.24); } .fe-btn:disabled, .fe-btn[aria-disabled="true"] { opacity: 0.4; cursor: not-allowed; pointer-events: none; } .fe-btn-icon { display: inline-flex; } .fe-skip-link { position: absolute; top: 0; left: 8px; padding: 10px 16px; background: var(--fe-accent); color: var(--fe-accent-fg); font-family: 'Inter', sans-serif; font-size: 12px; font-weight: 600; letter-spacing: 0.12em; text-transform: uppercase; border-radius: 0 0 var(--fe-radius) var(--fe-radius); transform: translateY(-110%); transition: transform 180ms ease; z-index: 2000; } .fe-skip-link:focus-visible { transform: none; outline: none; } .fe-site-header { position: fixed; top: 0; left: 0; right: 0; z-index: 100; padding: 16px 20px; background: rgba(10, 10, 10, 0.72); backdrop-filter: saturate(160%) blur(10px); -webkit-backdrop-filter: saturate(160%) blur(10px); border-bottom: 1px solid transparent; transition: background 240ms ease, border-color 240ms ease, padding 240ms ease; padding-top: calc(16px + var(--fe-safe-top)); } .fe-site-header.is-scrolled { background: rgba(10, 10, 10, 0.92); border-bottom-color: var(--fe-line); padding-top: calc(12px + var(--fe-safe-top)); padding-bottom: 12px; } .fe-site-header-inner { display: flex; align-items: center; justify-content: space-between; max-width: 1400px; margin: 0 auto; gap: 24px; } .fe-nav-right { display: flex; align-items: center; gap: 28px; } .fe-nav-link { font-family: 'Inter', sans-serif; font-size: 12px; font-weight: 500; letter-spacing: 0.12em; text-transform: uppercase; color: var(--fe-ink-3); transition: color 180ms ease; } .fe-nav-link:hover { color: var(--fe-ink); } .fe-nav-link.is-active { color: var(--fe-accent); } .fe-nav-login { margin-left: 4px; } .fe-hamburger { display: none; width: 32px; height: 32px; position: relative; } .fe-hamburger span { position: absolute; left: 6px; right: 6px; height: 1.5px; background: var(--fe-ink); transition: transform 220ms ease, opacity 220ms ease, top 220ms ease; } .fe-hamburger span:nth-child(1) { top: 10px; } .fe-hamburger span:nth-child(2) { top: 15px; } .fe-hamburger span:nth-child(3) { top: 20px; } .fe-hamburger.is-open span:nth-child(1) { top: 15px; transform: rotate(45deg); } .fe-hamburger.is-open span:nth-child(2) { opacity: 0; } .fe-hamburger.is-open span:nth-child(3) { top: 15px; transform: rotate(-45deg); } /* Mobile: collapse nav, show hamburger. */ @media (max-width: 900px) { .fe-nav-link, .fe-nav-login { display: none; } .fe-hamburger { display: block; } } /* Mobile nav covers the full viewport (inset: 0). The site header sits on top (higher z-index) with its own translucent blur, so the two layer seamlessly — no visible gap. */ .fe-mobile-nav { position: fixed; inset: 0; background: rgba(10, 10, 10, 0.98); backdrop-filter: blur(20px); -webkit-backdrop-filter: blur(20px); z-index: 95; padding-top: calc(var(--fe-header-h) + 32px); padding-right: 24px; padding-bottom: calc(24px + var(--fe-safe-bottom)); padding-left: 24px; overflow-y: auto; opacity: 0; pointer-events: none; transition: opacity 220ms ease; } .fe-mobile-nav.is-open { opacity: 1; pointer-events: auto; } .fe-mobile-nav[hidden] { display: none; } .fe-mnav-inner { display: flex; flex-direction: column; gap: 4px; max-width: 520px; margin: 0 auto; } .fe-mnav-link { display: block; padding: 16px 8px; font-family: 'Fraunces', serif; font-weight: 300; font-size: clamp(26px, 4.6vw, 36px); line-height: 1.1; letter-spacing: -0.025em; color: var(--fe-ink-2); border-bottom: 1px solid var(--fe-line-soft); transition: color 180ms ease; } .fe-mnav-link:hover { color: var(--fe-ink); } .fe-mnav-link.is-active { color: var(--fe-accent); } .fe-mnav-divider { height: 16px; } .fe-mnav-link--secondary { color: var(--fe-ink-3); } .fe-mnav-link--login { margin-top: 0; color: var(--fe-accent); border-bottom: 0; } /* Light theme — flip the near-black overlay to a light surface. The site header already has a light override (tokens.ts); the mobile nav was missed, so in light mode the (now-dark) ink links rendered near-invisibly on the dark default. Links use theme tokens, so only the background needs pinning. */ :root[data-fe-theme="light"] .fe-mobile-nav { background: rgba(255, 255, 255, 0.98); } .fe-footer { background: var(--fe-surface-soft); border-top: 1px solid var(--fe-line); margin-top: 0; } .fe-footer-inner { display: grid; grid-template-columns: 1.6fr 1fr 1.2fr; gap: 48px; padding-top: 72px; padding-bottom: 48px; align-items: start; } .fe-footer-brand { max-width: 320px; } .fe-footer-brand .fe-brand { margin-bottom: 16px; } .fe-footer-tagline { font-size: 13px; color: var(--fe-ink-3); line-height: 1.55; font-weight: 300; } .fe-footer-col { display: flex; flex-direction: column; gap: 14px; } .fe-footer-heading { font-family: 'Inter', sans-serif; font-size: 10px; font-weight: 600; letter-spacing: 0.2em; text-transform: uppercase; color: var(--fe-ink-muted); margin: 0; } .fe-footer-links { display: flex; flex-direction: column; gap: 10px; padding: 0; list-style: none; } .fe-footer-links a { font-size: 13px; color: var(--fe-ink-2); font-weight: 300; transition: color 180ms ease; } .fe-footer-links a:hover { color: var(--fe-accent); } .fe-footer-address { font-style: normal; font-size: 13px; color: var(--fe-ink-2); line-height: 1.6; font-weight: 300; } .fe-footer-address p { margin: 0 0 6px; } .fe-footer-address p:last-child { margin-bottom: 0; } .fe-footer-address a { color: var(--fe-ink-2); font-weight: 300; transition: color 180ms ease; } .fe-footer-address a:hover { color: var(--fe-accent); } .fe-footer-address-line { color: var(--fe-ink-muted); font-size: 12px; margin-top: 10px !important; } .fe-footer-base { border-top: 1px solid var(--fe-line); padding: 18px 0; } .fe-footer-base-inner { display: flex; align-items: center; justify-content: space-between; gap: 24px; flex-wrap: wrap; } .fe-footer-copy { font-size: 12px; color: var(--fe-ink-muted); font-weight: 300; margin: 0; } .fe-footer-legal { display: flex; gap: 18px; padding: 0; list-style: none; } .fe-footer-legal a { font-size: 12px; color: var(--fe-ink-muted); font-weight: 300; transition: color 180ms ease; } .fe-footer-legal a:hover { color: var(--fe-accent); } /* Below 900px: brand spans full width, audiences (left) and contact (right) sit in a 2-col row beneath it. Holds down to small phone widths — the link/contact text wraps cleanly inside the half-width columns. */ @media (max-width: 900px) { .fe-footer-inner { grid-template-columns: 1fr 1fr; gap: 32px; padding-top: 56px; } .fe-footer-brand { grid-column: 1 / -1; max-width: none; } } @media (max-width: 560px) { .fe-footer-inner { gap: 24px 20px; padding-top: 48px; padding-bottom: 36px; } .fe-footer-base-inner { flex-direction: column; align-items: flex-start; gap: 14px; } } .fe-hero { position: relative; display: flex; align-items: center; min-height: 100vh; padding: 140px 0 80px; overflow: hidden; background: var(--fe-surface); } .fe-hero-bg { position: absolute; inset: 0; z-index: 0; margin: 0; overflow: hidden; } .fe-hero-bg img { width: 100%; height: 100%; object-fit: cover; filter: brightness(0.52) contrast(1.05); } .fe-hero-bg::after { content: ''; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(10,8,6,0.25) 0%, rgba(10,8,6,0.55) 60%, rgba(10,8,6,0.92) 100%); pointer-events: none; } .fe-hero--has-bg { background: #060402; } .fe-hero-inner { position: relative; z-index: 2; width: 100%; } .fe-hero-eyebrow { margin-bottom: 20px; } .fe-hero .fe-display-xl { margin-bottom: 28px; } .fe-hero-sub { font-size: 17px; color: var(--fe-ink-2); line-height: 1.65; font-weight: 300; max-width: 46ch; margin-bottom: 44px; } .fe-hero-cta { display: flex; gap: 14px; flex-wrap: wrap; } .fe-hero--center .fe-hero-inner { text-align: center; } .fe-hero--center .fe-display-xl { max-width: 14ch; margin-left: auto; margin-right: auto; } .fe-hero--center .fe-hero-sub { margin-left: auto; margin-right: auto; } .fe-hero--center .fe-hero-cta { justify-content: center; } @media (max-width: 720px) { .fe-hero { padding: 120px 0 64px; min-height: 88vh; } } .fe-stats { border-top: 1px solid var(--fe-line); border-bottom: 1px solid var(--fe-line); padding: 50px 0; background: var(--fe-surface-alt); } .fe-stats-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 40px; text-align: center; } .fe-stat { margin: 0; } .fe-stat-num { font-family: 'Fraunces', serif; font-size: clamp(36px, 5vw, 56px); font-weight: 300; color: var(--fe-accent); line-height: 1; margin-bottom: 10px; letter-spacing: -0.02em; } .fe-stat-lbl { font-family: 'Inter', sans-serif; font-size: 11px; color: var(--fe-ink-3); letter-spacing: 0.12em; text-transform: uppercase; font-weight: 500; max-width: 24ch; margin: 0 auto; line-height: 1.4; } @media (max-width: 720px) { .fe-stats-grid { grid-template-columns: repeat(2, 1fr); gap: 32px; } .fe-stats { padding: 36px 0; } } .fe-intro { padding: 120px 0; background: var(--fe-surface); } .fe-intro-grid { display: grid; grid-template-columns: 1fr 1.4fr; gap: 80px; align-items: start; } .fe-intro-lead .fe-eyebrow { margin-bottom: 20px; } .fe-intro-body p { font-size: 16px; color: var(--fe-ink-3); line-height: 1.75; margin-bottom: 18px; font-weight: 300; } .fe-intro-body p:last-child { margin-bottom: 0; } @media (max-width: 900px) { .fe-intro { padding: 80px 0; } .fe-intro-grid { grid-template-columns: 1fr; gap: 40px; } } .fe-audiences { padding: 120px 0; background: var(--fe-surface); } .fe-audiences-head { text-align: center; max-width: 48rem; margin: 0 auto 64px; } .fe-audiences-head .fe-eyebrow { margin-bottom: 16px; } .fe-audiences-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; } .fe-audience-card { position: relative; display: flex; flex-direction: column; justify-content: flex-end; min-height: 420px; background: var(--fe-surface-card); border: 1px solid var(--fe-line); overflow: hidden; text-decoration: none; color: inherit; transition: transform 0.4s ease, border-color 0.3s ease; } .fe-audience-card:hover { transform: translateY(-4px); border-color: var(--fe-surface-raise); } .fe-audience-media { position: absolute; inset: 0; z-index: 0; } .fe-audience-media img { width: 100%; height: 100%; object-fit: cover; filter: brightness(0.55); } .fe-audience-content { position: relative; z-index: 2; padding: 32px 30px; background: linear-gradient(180deg, transparent, rgba(10,10,10,0.92) 60%); } .fe-audience-eyebrow { margin-bottom: 10px; } .fe-audience-title { font-family: 'Fraunces', serif; font-weight: 400; font-size: 28px; color: var(--fe-ink); margin-bottom: 12px; line-height: 1.18; } .fe-audience-body { font-size: 14px; color: var(--fe-ink-2); line-height: 1.65; font-weight: 300; } @media (max-width: 900px) { .fe-audiences { padding: 80px 0; } .fe-audiences-grid { grid-template-columns: 1fr; gap: 16px; } .fe-audience-card { min-height: 360px; } } .fe-feature { padding: 140px 0; background: var(--fe-surface); } .fe-feature--alt { background: var(--fe-surface-alt); border-top: 1px solid var(--fe-line-soft); border-bottom: 1px solid var(--fe-line-soft); } .fe-feature-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 90px; align-items: center; } .fe-feature-text { max-width: 560px; } .fe-feature-text .fe-eyebrow { margin-bottom: 22px; } .fe-feature-heading { margin-bottom: 24px; } .fe-feature-lead { color: var(--fe-ink-2); font-size: 18px; line-height: 1.55; font-weight: 300; max-width: 52ch; margin-bottom: 22px; } .fe-feature-lead strong { color: var(--fe-ink); font-weight: 500; } .fe-feature-img { position: relative; aspect-ratio: 4 / 5; border-radius: var(--fe-radius-sm); overflow: hidden; margin: 0; } .fe-feature-img picture { display: contents; } .fe-feature-img img { width: 100%; height: 100%; object-fit: cover; } .fe-feature-img::after { content: ''; position: absolute; inset: 0; background: linear-gradient(180deg, transparent 50%, rgba(10,10,10,0.5) 100%); pointer-events: none; } /* Plain variant: opt an image out of the cinematic treatment — no dark gradient overlay, no brightness/contrast filter, no hover zoom. For UI screenshots and anything that should read true-to-source. Add "fe-feature-img--flat" to the
. */ .fe-feature-img--flat::after { display: none; } .fe-feature-img--flat img { filter: none; } .fe-feature-img--flat:hover img { transform: none; } /* Optional vignette — subtle radial edge-darkening for feature images that want a touch more depth. A true vignette rather than the old flat brightness filter. Opt in: class="fe-feature-img fe-feature-img--vignette". Uses ::before so it composes with the bottom gradient (::after). */ .fe-feature-img--vignette::before { content: ''; position: absolute; inset: 0; z-index: 1; pointer-events: none; background: radial-gradient(ellipse at center, transparent 40%, rgba(0,0,0,0.55) 100%); } /* Desktop: show flat illustrations whole rather than cropping them to the 4/5 frame. Mobile keeps cover so the smaller frame stays filled. */ @media (min-width: 901px) { .fe-feature-img--flat img { object-fit: contain; } } .fe-feature--reverse .fe-feature-grid > :first-child { order: 2; } .fe-feature-bullets-top { padding: 0; margin: 0; list-style: none; } .fe-feature-bullets-top li { padding-left: 22px; position: relative; margin-bottom: 10px; color: var(--fe-ink); font-size: 15px; line-height: 1.5; font-weight: 300; } /* Marker: a small accent chevron rather than the old flat 1px dash (which read as a plain hyphen). Subtle, on-brand, not overbearing. */ .fe-feature-bullets-top li::before { content: '›'; position: absolute; left: 2px; top: 0; color: var(--fe-accent); font-size: 16px; line-height: 1.5; font-weight: 600; } .fe-feature-bullets { padding: 0; list-style: none; } .fe-feature-bullets li { padding-left: 22px; position: relative; margin-bottom: 10px; color: var(--fe-ink-2); font-size: 14px; line-height: 1.5; font-weight: 300; } .fe-feature-bullets li::before { content: ''; position: absolute; left: 0; top: 10px; width: 8px; height: 1px; background: var(--fe-ink-muted); } /* "See everything" expander, tile variant: a 2-col grid of icon + label + sub tiles. Replaces the plain dash-list reveal with something scannable and a bit more alive. 1 col on narrow screens. */ .fe-feature-tiles { display: grid; grid-template-columns: repeat(2, 1fr); gap: 10px; } .fe-feature-tile { display: flex; gap: 12px; align-items: flex-start; padding: 14px; border: 1px solid var(--fe-line); border-radius: var(--fe-radius-sm); background: var(--fe-surface); transition: border-color 180ms ease; } .fe-feature-tile:hover { border-color: var(--fe-line-2); } .fe-feature-tile-icon { width: 20px; height: 20px; color: var(--fe-accent); flex-shrink: 0; stroke-width: 1.5; margin-top: 1px; } .fe-feature-tile-text { display: flex; flex-direction: column; gap: 3px; } .fe-feature-tile-label { font-family: 'Inter', sans-serif; font-size: 13px; font-weight: 600; color: var(--fe-ink); line-height: 1.3; } .fe-feature-tile-sub { font-size: 12px; color: var(--fe-ink-3); line-height: 1.4; font-weight: 300; } @media (max-width: 560px) { .fe-feature-tiles { grid-template-columns: 1fr; } } /* Info tiles. Native
: icon + label face with a short body. On mobile they're collapsed and tap-to-expand; on desktop the frontend runtime forces them open and the @media block below strips the expand affordance so they read as static cards. Keyboard accessible. */ .fe-tilegrid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 10px; } .fe-tile { border: 1px solid var(--fe-line); border-radius: var(--fe-radius-sm); background: var(--fe-surface); transition: border-color 180ms ease; } .fe-tile:hover, .fe-tile[open] { border-color: var(--fe-line-2); } .fe-tile > summary { display: flex; align-items: center; gap: 12px; padding: 14px; cursor: pointer; list-style: none; } .fe-tile > summary::-webkit-details-marker { display: none; } .fe-tile > summary:focus-visible { outline: 2px solid var(--fe-accent); outline-offset: -2px; border-radius: var(--fe-radius-sm); } .fe-tile-ico { width: 22px; height: 22px; color: var(--fe-accent); flex-shrink: 0; stroke-width: 1.5; } .fe-tile-label { flex: 1; font-family: 'Inter', sans-serif; font-size: 14px; font-weight: 600; color: var(--fe-ink); line-height: 1.3; } .fe-tile-chev { width: 16px; height: 16px; color: var(--fe-ink-3); flex-shrink: 0; transition: transform 220ms ease; } .fe-tile[open] .fe-tile-chev { transform: rotate(180deg); color: var(--fe-accent); } .fe-tile-body { padding: 0 14px 16px 48px; font-size: 13px; line-height: 1.55; font-weight: 300; color: var(--fe-ink-2); } @media (max-width: 560px) { .fe-tilegrid { grid-template-columns: 1fr; } } /* Desktop: tiles render as static, always-open info cards. The runtime forces the
open at this width; here we drop the expand affordance and block the summary toggle so they read as plain cards. */ @media (min-width: 901px) { .fe-tile > summary { pointer-events: none; cursor: default; } .fe-tile-chev { display: none; } .fe-tile-body { display: block; } } /* Icon flow — a vertical "spine" of points, all visible at once. A left rail carries an icon medallion on a dashed connector line; the card to its right holds title + sub. Reads as a connected sequence, punchier than a collapsible accordion. No JS. */ .fe-flow { list-style: none; margin: 0; padding: 0; } .fe-flow-step { display: flex; gap: 14px; align-items: stretch; } .fe-flow-step + .fe-flow-step { margin-top: 10px; } .fe-flow-rail { position: relative; flex: 0 0 36px; display: flex; align-items: center; justify-content: center; } /* Dashed connector: full rail height + 10px into the gap so consecutive rails meet; trimmed to the medallion centre on the first/last step. */ .fe-flow-rail::before { content: ''; position: absolute; left: 50%; transform: translateX(-50%); top: 0; bottom: -10px; width: 1px; background-image: linear-gradient(var(--fe-accent-border) 55%, transparent 0); background-size: 1px 7px; } .fe-flow-step:first-child .fe-flow-rail::before { top: 50%; } .fe-flow-step:last-child .fe-flow-rail::before { bottom: 50%; } /* Medallion now holds an icon rather than a number. */ .fe-flow-num { position: relative; z-index: 1; width: 38px; height: 38px; flex: 0 0 auto; display: inline-flex; align-items: center; justify-content: center; border-radius: 50%; border: 1px solid var(--fe-accent-border); background: var(--fe-accent-bg); color: var(--fe-accent); } .fe-flow-num svg { width: 19px; height: 19px; stroke-width: 1.5; } .fe-flow-card { flex: 1; min-width: 0; display: flex; align-items: center; padding: 14px 16px; border: 1px solid var(--fe-line); border-radius: var(--fe-radius-lg); background: var(--fe-surface-card); } .fe-flow-text { flex: 1; min-width: 0; } .fe-flow-title { display: block; font-family: 'Inter', sans-serif; font-weight: 600; font-size: 15px; color: var(--fe-ink); line-height: 1.3; } .fe-flow-sub { display: block; margin-top: 3px; font-size: 13px; font-weight: 300; color: var(--fe-ink-3); line-height: 1.45; } @media (max-width: 420px) { .fe-flow-rail { flex-basis: 32px; } .fe-flow-card { padding: 12px 13px; } .fe-flow-num { width: 32px; height: 32px; } .fe-flow-num svg { width: 17px; height: 17px; } } @media (max-width: 900px) { .fe-feature { padding: 80px 0; } .fe-feature-grid { grid-template-columns: 1fr; gap: 40px; } .fe-feature--reverse .fe-feature-grid > :first-child { order: 0; } .fe-feature-img { aspect-ratio: 4 / 3; } } .fe-quote-divider { padding: 110px 32px; background: var(--fe-surface-soft); } .fe-quote-divider-inner { max-width: 940px; margin: 0 auto; text-align: center; } .fe-quote-divider-rule { width: 40px; height: 1px; background: var(--fe-accent); margin: 0 auto 32px; } .fe-quote { margin: 0; } .fe-quote p { font-family: 'Fraunces', serif; font-weight: 300; font-size: clamp(26px, 3.6vw, 38px); line-height: 1.3; color: var(--fe-ink); letter-spacing: -0.01em; } .fe-quote p::before { content: '\201C'; color: var(--fe-accent); margin-right: 4px; } .fe-quote p::after { content: '\201D'; color: var(--fe-accent); margin-left: 4px; } .fe-quote cite { display: block; font-family: 'Inter', sans-serif; font-style: normal; font-size: 11px; font-weight: 600; letter-spacing: 0.16em; text-transform: uppercase; color: var(--fe-accent); margin-top: 32px; } @media (max-width: 720px) { .fe-quote-divider { padding: 72px 20px; } } .fe-swap { padding: 100px 0; background: var(--fe-surface-alt); border-top: 1px solid var(--fe-line); border-bottom: 1px solid var(--fe-line); } .fe-swap-head { text-align: center; max-width: 50rem; margin: 0 auto 56px; } .fe-swap-head .fe-eyebrow { margin-bottom: 16px; } .fe-swap-heading { margin-top: 0; } .fe-swap-body { margin-top: 24px; max-width: 54ch; margin-left: auto; margin-right: auto; color: var(--fe-ink-3); font-size: 17px; line-height: 1.65; font-weight: 300; } .fe-swap-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; max-width: 1100px; margin: 0 auto; padding: 0; list-style: none; } .fe-swap-tile { background: var(--fe-surface); border: 1px solid var(--fe-line); padding: 24px; transition: border-color 180ms ease, background 180ms ease; /* Flex column so the "Replaces…" note can pin to the bottom and line up across all tiles regardless of title length. */ display: flex; flex-direction: column; } .fe-swap-tile:hover { border-color: var(--fe-line-2); } .fe-swap-tile--featured { background: var(--fe-accent-bg); border-color: var(--fe-accent-border); } /* Tile head: flat line-icon (Lucide-style, 1.5 stroke, currentColor → accent) sitting inline to the LEFT of the category label, vertically centred against it. Sized here so the static CMS markup only needs the classes. */ .fe-swap-tilehead { display: flex; align-items: center; gap: 10px; margin-bottom: 14px; } .fe-swap-icon { width: 24px; height: 24px; color: var(--fe-accent); flex-shrink: 0; display: block; stroke-width: 1.5; } .fe-swap-tilehead .fe-swap-category { margin-bottom: 0; } .fe-swap-category { font-family: 'Inter', sans-serif; font-size: 10px; font-weight: 600; letter-spacing: 0.18em; text-transform: uppercase; color: var(--fe-accent); margin-bottom: 12px; } .fe-swap-title { font-family: 'Fraunces', serif; font-weight: 300; font-size: 22px; color: var(--fe-ink); line-height: 1.2; margin-bottom: 12px; letter-spacing: -0.015em; } .fe-swap-note { font-size: 12px; color: var(--fe-ink-muted); line-height: 1.5; font-weight: 300; margin: 0; margin-top: auto; padding-top: 12px; } .fe-swap-note--featured { color: var(--fe-accent); font-weight: 500; } @media (max-width: 900px) { .fe-swap-grid { grid-template-columns: 1fr; } .fe-swap { padding: 72px 0; } } @media (min-width: 600px) and (max-width: 899px) { .fe-swap-grid { grid-template-columns: repeat(2, 1fr); } } /* Soft surface tone gives this section a different shade from the neighbouring fe-stats (alt) above and the fe-feature (surface) below — three tones in a row instead of two-tone repeat. */ .fe-how { padding: 120px 0; /* Was --fe-surface-soft, which matched the quote-divider that sits directly above it (also soft) — the two bands blended into one. Use the base surface so onboarding reads as its own section; it still contrasts the alt-surface pricing block below. */ background: var(--fe-surface); border-top: 1px solid var(--fe-line-soft); border-bottom: 1px solid var(--fe-line-soft); } .fe-how-head { text-align: center; max-width: 48rem; margin: 0 auto 72px; } .fe-how-head .fe-eyebrow { margin-bottom: 20px; } .fe-how-heading { margin-top: 0; } .fe-steps-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 40px; padding: 0; margin: 0; list-style: none; position: relative; max-width: 1080px; margin-left: auto; margin-right: auto; } /* Each step lives on a card — gives the section visual structure instead of three columns of text floating on the surface. The cards stay subtle (low-contrast border, no bg, no shadow) but pick up an accent border on hover so the user understands they represent something tappable / sequential. */ .fe-step { position: relative; padding: 36px 28px 32px; border: 1px solid var(--fe-line-soft); border-radius: var(--fe-radius-lg); background: var(--fe-surface-card); transition: transform 280ms cubic-bezier(.4,0,.2,1), border-color 280ms ease, box-shadow 280ms ease; } .fe-step:hover { transform: translateY(-3px); border-color: var(--fe-accent-border); box-shadow: var(--fe-shadow-card); } /* Number sits inline-left of the title. .fe-step-head is the flex row introduced by the v2 markup; legacy DB-stored markup uses the sibling .fe-step-num + .fe-step-title pair directly under .fe-step, so we apply the same alignment via attribute-free sibling rules below. */ .fe-step-head { display: flex; align-items: center; gap: 16px; margin-bottom: 16px; } /* Numbered medallion — circular with accent ring + filled accent tint inside. Reads as a brand mark instead of just a number. */ .fe-step-num { display: inline-flex; align-items: center; justify-content: center; flex: 0 0 auto; width: 48px; height: 48px; border-radius: 50%; background: var(--fe-accent-bg); border: 1px solid var(--fe-accent-border); color: var(--fe-accent); font-family: 'Fraunces', serif; font-weight: 400; font-size: 20px; letter-spacing: 0; line-height: 1; /* Subtle glow ring picks the eye to 1 first then 2, 3. */ box-shadow: 0 0 0 5px var(--fe-accent-bg); } /* Legacy markup fallback — when num + title are direct siblings under .fe-step (older CMS content not yet re-rendered), float the num to the left so the title still wraps beside it. */ .fe-step > .fe-step-num { float: left; margin: 0 16px 8px 0; } .fe-step > .fe-step-num + .fe-step-title { margin-top: 12px; } .fe-step > .fe-step-num ~ .fe-step-body { clear: both; } /* Connecting dashed line between steps — visualises the flow. Spans the 40px grid gap from each step's right edge into the next one's left edge. Skipped on the last step and on mobile. */ .fe-step:not(:last-child)::after { content: ''; position: absolute; top: 60px; left: calc(100% + 4px); width: calc(40px - 8px); height: 1px; background-image: linear-gradient(to right, var(--fe-accent-border) 50%, transparent 50%); background-size: 6px 1px; background-repeat: repeat-x; pointer-events: none; } .fe-step-title { font-family: 'Fraunces', serif; font-weight: 400; font-size: 22px; color: var(--fe-ink); line-height: 1.25; margin-bottom: 12px; letter-spacing: -0.015em; } .fe-step-body { font-size: 14px; color: var(--fe-ink-2); line-height: 1.65; font-weight: 300; } @media (max-width: 900px) { .fe-how { padding: 72px 0; } .fe-steps-grid { grid-template-columns: 1fr; gap: 16px; max-width: 480px; } .fe-step { padding: 24px 22px; } .fe-step-num { width: 48px; height: 48px; font-size: 18px; margin-bottom: 16px; } .fe-step:not(:last-child)::after { display: none; } } /* Surface-alt tint differentiates pricing from the surface-tone feature blocks above and the surface-tone final-CTA below. */ .fe-pricing { padding: 120px 0; background: var(--fe-surface-alt); border-top: 1px solid var(--fe-line-soft); } .fe-pricing-head { text-align: center; max-width: 48rem; margin: 0 auto 64px; } .fe-pricing-head .fe-eyebrow { margin-bottom: 20px; } .fe-pricing-heading { margin-top: 0; } .fe-pricing-body { margin-top: 20px; max-width: 52ch; margin-left: auto; margin-right: auto; color: var(--fe-ink-3); font-weight: 300; } /* 3-up at >720px so the three tiers always sit side-by-side on tablet+ — auto-fit with minmax(280px) was dropping the third card to a second row at viewport widths around 800–880px. The minmax(0, 1fr) lets each card shrink past its content size if needed, so a slightly narrow viewport still keeps 3 columns. */ .fe-pricing-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 20px; max-width: 1120px; margin: 0 auto; align-items: stretch; } /* When the page only has two cards (e.g. the operators page with Essentials + Enterprise), switch to a 2-up grid at 50% each so we don't leave an empty third column. Detects "exactly two children" via :has(> :nth-child(2):last-child). Cap the row width so each card lands around 420px wide — wider than the 3-up cards and read clearly as a comparison pair. */ .fe-pricing-grid:has(> .fe-price-card:nth-child(2):last-child) { grid-template-columns: repeat(2, minmax(0, 1fr)); max-width: 880px; } @media (max-width: 720px) { .fe-pricing-grid { grid-template-columns: 1fr; } .fe-pricing-grid:has(> .fe-price-card:nth-child(2):last-child) { grid-template-columns: 1fr; } } .fe-price-card { position: relative; background: var(--fe-surface); border: 1px solid var(--fe-line); padding: 48px 36px; display: flex; flex-direction: column; } .fe-price-card--featured { border-color: var(--fe-accent-border); background: linear-gradient(180deg, var(--fe-accent-bg) 0%, var(--fe-surface) 100%); } /* Tier colour skins — applied independent of featured so a card can be both tier=premium AND featured. Each tier overrides border, background gradient, badge fill, and the check-icon colour. */ .fe-price-card--tier-premium { border-color: var(--fe-tier-premium-border); background: linear-gradient(180deg, var(--fe-tier-premium-bg) 0%, var(--fe-surface) 100%); } .fe-price-card--tier-premium .fe-price-badge { background: var(--fe-tier-premium); color: #ffffff; } .fe-price-card--tier-premium .fe-price-row-icon { color: var(--fe-tier-premium); } .fe-price-card--tier-premium .fe-price-intro-note--accent { color: var(--fe-tier-premium); } .fe-price-card--tier-premium .fe-price-sub { color: var(--fe-tier-premium); } .fe-price-card--tier-premium-plus { border-color: var(--fe-tier-premium-plus-border); background: linear-gradient(180deg, var(--fe-tier-premium-plus-bg) 0%, var(--fe-surface) 100%); } .fe-price-card--tier-premium-plus .fe-price-badge { background: var(--fe-tier-premium-plus); color: #ffffff; } .fe-price-card--tier-premium-plus .fe-price-row-icon { color: var(--fe-tier-premium-plus); } .fe-price-card--tier-premium-plus .fe-price-intro-note--accent { color: var(--fe-tier-premium-plus); } .fe-price-card--tier-premium-plus .fe-price-sub { color: var(--fe-tier-premium-plus); } .fe-price-badge { position: absolute; top: -10px; left: 28px; background: var(--fe-accent); color: var(--fe-accent-fg); font-family: 'Inter', sans-serif; font-size: 10px; font-weight: 700; letter-spacing: 0.18em; text-transform: uppercase; padding: 4px 10px; } .fe-price-name { font-family: 'Fraunces', serif; font-weight: 400; font-size: 28px; color: var(--fe-ink); margin-bottom: 8px; letter-spacing: -0.015em; } .fe-price-desc { color: var(--fe-ink-3); font-size: 14px; line-height: 1.55; font-weight: 300; margin-bottom: 28px; } .fe-price-tag { display: flex; align-items: baseline; gap: 6px; margin: 0 0 10px; } .fe-price-num { font-family: 'Fraunces', serif; font-weight: 300; font-size: 56px; color: var(--fe-ink); line-height: 1; letter-spacing: -0.02em; } .fe-price-sub { color: var(--fe-ink-muted); font-size: 14px; font-weight: 400; } .fe-price-intro-note { font-size: 12px; letter-spacing: 0.12em; text-transform: uppercase; font-weight: 500; margin-bottom: 28px; } .fe-price-intro-note--accent { color: var(--fe-accent); } .fe-price-intro-note--muted { color: var(--fe-ink-3); text-transform: none; letter-spacing: 0.02em; font-weight: 300; font-size: 13px; } .fe-price-list { padding: 0; margin: 0; list-style: none; } .fe-price-row { display: flex; align-items: flex-start; gap: 12px; padding: 12px 0; border-bottom: 1px solid var(--fe-line-soft); } .fe-price-row:last-child { border-bottom: 0; } .fe-price-row::marker { content: ''; } .fe-price-row-icon { flex-shrink: 0; margin-top: 2px; color: var(--fe-ink-muted); } /* Featured fallback — tier skins further down override this for Premium / Premium Plus, so declaration order matters. */ .fe-price-card--featured:not(.fe-price-card--tier-premium):not(.fe-price-card--tier-premium-plus) .fe-price-row-icon { color: var(--fe-accent); } .fe-price-row-body { flex: 1; min-width: 0; } .fe-price-row-title { display: block; font-size: 13px; color: var(--fe-ink); font-weight: 500; line-height: 1.4; } .fe-price-row-sub { display: block; font-size: 12px; color: var(--fe-ink-muted); line-height: 1.5; font-weight: 300; margin-top: 2px; } /* Plain-string rows (no title/sub split) keep the ink-2 weight. */ .fe-price-row > .fe-price-row-body:not(:has(.fe-price-row-title)) { font-size: 14px; color: var(--fe-ink-2); font-weight: 300; line-height: 1.55; } .fe-also-available { margin-top: 24px; padding-top: 24px; border-top: 1px dashed var(--fe-line); } .fe-also-available-label { font-family: 'Inter', sans-serif; font-size: 10px; font-weight: 600; letter-spacing: 0.18em; text-transform: uppercase; color: var(--fe-accent); margin-bottom: 12px; } .fe-also-available-list { display: flex; flex-wrap: wrap; gap: 8px; padding: 0; margin: 0; list-style: none; } .fe-also-available-list li { font-size: 12px; color: var(--fe-ink-2); padding: 5px 12px; border: 1px solid var(--fe-line-2); border-radius: var(--fe-radius-pill); background: var(--fe-surface-card); font-weight: 400; } /* CTA sits at the bottom of the flex column; with grid align-items: stretch on the parent, every card's button lands on the same vertical line regardless of list length. Minimum gap above the CTA comes from the list/also-available margin-bottom. */ .fe-price-cta { margin-top: auto; width: 100%; justify-content: center; } .fe-price-list { margin-bottom: 24px; } /* Breathing room between the "Also available" pills and the CTA on cards where flex-auto-space hasn't already pushed them apart. */ .fe-also-available { margin-bottom: 28px; } /* Per-tier CTA colour — Premium + Premium Plus fill the primary button with their own tier colour rather than the page accent (gold). Keeps visual hierarchy equal across tiers while matching each card's skin. */ .fe-price-card--tier-premium .fe-price-cta.fe-btn--gold { background: var(--fe-tier-premium); border-color: var(--fe-tier-premium); color: #fff; } .fe-price-card--tier-premium .fe-price-cta.fe-btn--gold:hover { background: var(--fe-tier-premium-hover); border-color: var(--fe-tier-premium-hover); } .fe-price-card--tier-premium-plus .fe-price-cta.fe-btn--gold { background: var(--fe-tier-premium-plus); border-color: var(--fe-tier-premium-plus); color: #fff; } .fe-price-card--tier-premium-plus .fe-price-cta.fe-btn--gold:hover { background: var(--fe-tier-premium-plus-hover); border-color: var(--fe-tier-premium-plus-hover); } .fe-pricing-footer { text-align: center; color: var(--fe-ink-muted); font-size: 13px; margin-top: 32px; font-weight: 300; } /* Small disclaimer variant — sits under the main footer line at a tighter top margin and softer tone (e.g. "* At participating venues"). Same colour, smaller type. */ .fe-pricing-footer--small { font-size: 11px; margin-top: 6px; opacity: 0.75; letter-spacing: 0.02em; } /* Below 1100px (typical laptop/tablet) tighten the card padding so three 280px-ish cards still fit comfortably side-by-side. The single-column stack only kicks in below 720px (rule above), so the row stays intact on every real desktop width. */ @media (max-width: 1100px) { .fe-price-card { padding: 36px 24px; } .fe-price-num { font-size: 44px; } .fe-price-name { font-size: 24px; } .fe-pricing-grid { gap: 16px; } } @media (max-width: 900px) { .fe-pricing { padding: 80px 0; } } .fe-details { margin-top: 28px; } .fe-details > summary { list-style: none; cursor: pointer; display: inline-flex; align-items: center; gap: 8px; padding: 10px 18px; border: 1px solid var(--fe-line-2); border-radius: var(--fe-radius-pill); background: transparent; color: var(--fe-ink-2); font-family: 'Inter', sans-serif; font-size: 11px; font-weight: 600; letter-spacing: 0.14em; text-transform: uppercase; transition: border-color 180ms ease, color 180ms ease, background 180ms ease; user-select: none; } .fe-details > summary::-webkit-details-marker { display: none; } .fe-details > summary:hover { color: var(--fe-ink); border-color: var(--fe-accent-border); } .fe-details > summary:focus-visible { outline: none; box-shadow: var(--fe-focus-ring); } .fe-details-chev { transition: transform 220ms ease; display: inline-block; line-height: 1; } .fe-details[open] .fe-details-chev { transform: rotate(90deg); } .fe-details[open] .fe-details-label--collapsed { display: none; } .fe-details:not([open]) .fe-details-label--open { display: none; } .fe-details[open] > summary { color: var(--fe-accent); border-color: var(--fe-accent-border); background: var(--fe-accent-bg); } .fe-details-body { padding-top: 20px; animation: feDetailsFadeIn 260ms ease; } @keyframes feDetailsFadeIn { from { opacity: 0; transform: translateY(-4px); } to { opacity: 1; transform: none; } } .fe-final-cta { position: relative; padding: 160px 0; text-align: center; overflow: hidden; background: var(--fe-surface); } .fe-final-cta-bg { position: absolute; inset: 0; z-index: 0; margin: 0; } .fe-final-cta-bg img { width: 100%; height: 100%; object-fit: cover; filter: brightness(0.38) contrast(1.05); } .fe-final-cta-bg::after { content: ''; position: absolute; inset: 0; background: linear-gradient(180deg, var(--fe-surface) 0%, rgba(10,10,10,0.55) 35%, rgba(10,10,10,0.55) 65%, var(--fe-surface) 100%); } .fe-final-cta--has-bg { background: #060402; } .fe-final-cta-inner { position: relative; z-index: 2; } .fe-final-cta-heading { font-family: 'Fraunces', serif; font-weight: 300; font-size: clamp(44px, 6vw, 84px) !important; line-height: 1.05 !important; letter-spacing: -0.035em !important; color: var(--fe-ink); max-width: 18ch; margin: 0 auto 24px; } .fe-final-cta-sub { font-size: 18px; color: var(--fe-ink-2); max-width: 48ch; margin: 0 auto 40px; line-height: 1.6; font-weight: 300; } .fe-final-cta-row { display: flex; gap: 14px; flex-wrap: wrap; justify-content: center; } @media (max-width: 720px) { .fe-final-cta { padding: 96px 0; } } .fe-prose-wrap { padding: 120px 0 96px; background: var(--fe-surface); } .fe-prose-head { max-width: 720px; margin: 0 auto 56px; text-align: center; } .fe-prose-head .fe-eyebrow { margin-bottom: 16px; } .fe-prose-head .fe-display-lg { margin-bottom: 16px; } .fe-prose-meta { font-size: 13px; color: var(--fe-ink-muted); letter-spacing: 0.08em; text-transform: uppercase; font-weight: 500; } .fe-prose { max-width: 720px; margin: 0 auto; font-family: 'Inter', sans-serif; font-size: 16px; line-height: 1.75; color: var(--fe-ink-2); font-weight: 300; } .fe-prose > * + * { margin-top: 20px; } .fe-prose h2 { font-family: 'Fraunces', serif; font-weight: 300; font-size: clamp(26px, 3vw, 34px); line-height: 1.15; letter-spacing: -0.02em; color: var(--fe-ink); margin-top: 56px; } .fe-prose h2:first-child { margin-top: 0; } .fe-prose h3 { font-family: 'Fraunces', serif; font-weight: 400; font-size: 20px; line-height: 1.25; letter-spacing: -0.015em; color: var(--fe-ink); margin-top: 40px; } .fe-prose h4 { font-family: 'Inter', sans-serif; font-size: 13px; font-weight: 600; letter-spacing: 0.14em; text-transform: uppercase; color: var(--fe-accent); margin-top: 32px; } .fe-prose p { margin: 0; } .fe-prose a { color: var(--fe-accent); text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 3px; transition: color 180ms ease; } .fe-prose a:hover { color: var(--fe-accent-hover); } .fe-prose strong { color: var(--fe-ink); font-weight: 500; } .fe-prose em { font-style: normal; color: var(--fe-accent); font-weight: 400; } .fe-prose ul, .fe-prose ol { padding-left: 24px; } .fe-prose ul { list-style: disc; } .fe-prose ol { list-style: decimal; } .fe-prose li { margin-bottom: 8px; } .fe-prose li::marker { color: var(--fe-accent); } .fe-prose blockquote { border-left: 2px solid var(--fe-accent); padding: 4px 0 4px 20px; color: var(--fe-ink-2); font-style: normal; } .fe-prose hr { border: 0; border-top: 1px solid var(--fe-line); margin: 48px 0; } /* Legacy content pages often wrap content in
anchors for table-of-contents links. Treat these as semantic groupings with breathing room between them. */ .fe-prose section { display: block; } .fe-prose section + section, .fe-prose > section:not(:first-child) { margin-top: 56px; } .fe-prose section > :first-child { margin-top: 0; } .fe-prose section h2 { margin-top: 0; padding-top: 24px; border-top: 1px solid var(--fe-line-soft); } .fe-prose > section:first-of-type h2 { border-top: 0; padding-top: 0; } /* In-page table of contents — legacy content pages drop a list of anchors near the top. Rendered as a compact bordered card. */ .fe-prose .fe-toc { list-style: none; padding: 0; margin: 32px 0 56px; border: 1px solid var(--fe-line); border-radius: var(--fe-radius); overflow: hidden; background: var(--fe-surface-alt); } .fe-prose .fe-toc li { margin: 0; border-bottom: 1px solid var(--fe-line-soft); } .fe-prose .fe-toc li:last-child { border-bottom: 0; } .fe-prose .fe-toc li::marker { content: ''; } .fe-prose .fe-toc a { display: block; padding: 12px 16px; font-size: 13px; color: var(--fe-ink-3); text-decoration: none; transition: background 180ms ease, color 180ms ease; } .fe-prose .fe-toc a:hover { background: var(--fe-surface-card); color: var(--fe-ink); } .fe-prose table { width: 100%; border-collapse: collapse; border: 1px solid var(--fe-line); font-size: 14px; } .fe-prose th, .fe-prose td { padding: 10px 12px; border-bottom: 1px solid var(--fe-line-soft); text-align: left; } .fe-prose th { font-family: 'Inter', sans-serif; font-size: 10px; font-weight: 600; letter-spacing: 0.14em; text-transform: uppercase; color: var(--fe-ink-muted); background: var(--fe-surface-alt); } .fe-prose tr:last-child td { border-bottom: 0; } .fe-prose code { font-family: 'IBM Plex Mono', ui-monospace, Menlo, monospace; font-size: 13px; padding: 2px 6px; background: var(--fe-surface-card); border: 1px solid var(--fe-line-soft); border-radius: var(--fe-radius-sm); color: var(--fe-ink); } @media (max-width: 720px) { .fe-prose-wrap { padding: 96px 0 72px; } .fe-prose { font-size: 15px; } } /* ── Label + helper + error ── */ .fe-form-field { margin-bottom: 18px; } .fe-label { display: block; font-family: 'Inter', sans-serif; font-size: 11px; font-weight: 600; letter-spacing: 0.12em; text-transform: uppercase; color: var(--fe-ink-2); margin-bottom: 8px; } .fe-label-req { color: var(--fe-accent); margin-left: 2px; } .fe-input-helper { margin-top: 6px; font-size: 12px; color: var(--fe-ink-muted); line-height: 1.5; } .fe-input-error { margin-top: 6px; font-size: 12px; color: var(--fe-danger); line-height: 1.5; } /* ── Input ── */ .fe-input { display: block; width: 100%; padding: 14px 16px; font-family: 'Inter', sans-serif; font-size: 15px; line-height: 1.4; color: var(--fe-ink); background: var(--fe-surface-card); /* Border was --fe-line-2 (#1e1e1e) which sat 1 step above the #111 card bg — practically invisible. Bumped to a dedicated --fe-input-border (#3a3a36) so the field outline reads at a glance against both the card and the page bg. */ border: 1px solid var(--fe-input-border, #3a3a36); border-radius: var(--fe-radius); transition: border-color 180ms ease, box-shadow 180ms ease, background 180ms ease; -webkit-appearance: none; appearance: none; } .fe-input::placeholder { color: var(--fe-ink-dim); } .fe-input:hover { border-color: var(--fe-input-border-hover, #4d4d48); background: var(--fe-surface-raise); } .fe-input:focus { outline: none; border-color: var(--fe-accent); box-shadow: var(--fe-focus-ring); background: var(--fe-surface-card); } .fe-input:invalid:not(:placeholder-shown) { border-color: var(--fe-danger); } .fe-input-wrap { position: relative; } .fe-input-wrap--password .fe-input { padding-right: 48px; } .fe-input-eye { position: absolute; right: 8px; top: 50%; transform: translateY(-50%); width: 36px; height: 36px; display: inline-flex; align-items: center; justify-content: center; color: var(--fe-ink-muted); border-radius: var(--fe-radius); background: transparent; border: 0; cursor: pointer; transition: color 180ms ease, background 180ms ease; } .fe-input-eye:hover { color: var(--fe-ink); background: var(--fe-surface-raise); } .fe-input-eye .fe-input-eye-hide { display: none; } .fe-input-eye[aria-pressed="true"] .fe-input-eye-show { display: none; } .fe-input-eye[aria-pressed="true"] .fe-input-eye-hide { display: inline; } /* ── Checkbox ── */ .fe-checkbox { display: flex; align-items: flex-start; gap: 12px; padding: 4px 0; font-family: 'Inter', sans-serif; font-size: 13px; line-height: 1.6; color: var(--fe-ink-2); cursor: pointer; font-weight: 300; } .fe-checkbox-input { position: absolute; opacity: 0; width: 0; height: 0; pointer-events: none; } .fe-checkbox-box { flex-shrink: 0; width: 20px; height: 20px; border: 1px solid var(--fe-line-2); border-radius: var(--fe-radius-sm); background: var(--fe-surface-card); display: inline-flex; align-items: center; justify-content: center; color: transparent; transition: border-color 180ms ease, background 180ms ease, color 180ms ease; margin-top: 1px; } .fe-checkbox:hover .fe-checkbox-box { border-color: var(--fe-ink-muted); } .fe-checkbox-input:focus-visible + .fe-checkbox-box { box-shadow: var(--fe-focus-ring); } .fe-checkbox-input:checked + .fe-checkbox-box { background: var(--fe-accent); border-color: var(--fe-accent); color: var(--fe-accent-fg); } .fe-checkbox-label a { color: var(--fe-accent); text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 3px; } .fe-checkbox-label a:hover { color: var(--fe-accent-hover); } /* ── Radio cards (account-type picker) ── */ .fe-radio-card-group { display: flex; flex-direction: column; gap: 10px; } .fe-radio-card { position: relative; display: flex; align-items: center; gap: 16px; padding: 18px 20px; background: var(--fe-surface-card); border: 1px solid var(--fe-line-2); border-radius: var(--fe-radius); cursor: pointer; transition: border-color 180ms ease, background 180ms ease, transform 180ms ease; } .fe-radio-card:hover { border-color: var(--fe-ink-muted); background: var(--fe-surface-raise); } .fe-radio-card-input { position: absolute; opacity: 0; width: 0; height: 0; pointer-events: none; } .fe-radio-card-input:focus-visible ~ .fe-radio-card-mark { box-shadow: var(--fe-focus-ring); } .fe-radio-card-body { flex: 1; min-width: 0; } .fe-radio-card-title { display: block; font-family: 'Fraunces', serif; font-weight: 400; font-size: 17px; line-height: 1.25; color: var(--fe-ink); letter-spacing: -0.015em; margin-bottom: 4px; } .fe-radio-card-description { /* Hidden by default — only the currently-selected card shows its description (see :has rule below). Keeps the list tight and reduces visual noise while the user is scanning options. */ display: none; font-family: 'Inter', sans-serif; font-size: 13px; color: var(--fe-ink-3); line-height: 1.5; font-weight: 300; margin-top: 4px; } .fe-radio-card:has(.fe-radio-card-input:checked) .fe-radio-card-description { display: block; } .fe-radio-card-mark { flex-shrink: 0; width: 22px; height: 22px; border-radius: 999px; border: 1.5px solid var(--fe-line-2); background: var(--fe-surface); color: transparent; display: inline-flex; align-items: center; justify-content: center; transition: border-color 180ms ease, background 180ms ease, color 180ms ease; } .fe-radio-card:has(.fe-radio-card-input:checked) { border-color: var(--fe-accent); background: var(--fe-accent-bg); } .fe-radio-card:has(.fe-radio-card-input:checked) .fe-radio-card-mark { background: var(--fe-accent); border-color: var(--fe-accent); color: var(--fe-accent-fg); } /* ── Tabs ── */ .fe-tabs-bar { display: flex; gap: 0; margin-bottom: 28px; border-bottom: 1px solid var(--fe-line); } .fe-tabs-btn { flex: 1; padding: 14px 16px; background: transparent; border: 0; border-bottom: 2px solid transparent; margin-bottom: -1px; font-family: 'Inter', sans-serif; font-size: 11px; font-weight: 600; letter-spacing: 0.14em; text-transform: uppercase; color: var(--fe-ink-3); cursor: pointer; transition: color 180ms ease, border-color 180ms ease; } .fe-tabs-btn:hover { color: var(--fe-ink-2); } .fe-tabs-btn.is-active { color: var(--fe-ink); border-bottom-color: var(--fe-accent); } .fe-tabs-btn:focus-visible { outline: none; box-shadow: var(--fe-focus-ring); border-radius: var(--fe-radius-sm); } .fe-tabs-panel[hidden] { display: none; } .fe-tabs-panel.is-active { display: block; } /* ── /login page chrome ── The sign-in + register surface uses its own minimal header (brand only) and a centred card. All layout lives here so the page HTML stays pure component composition. */ .fe-auth-header { padding: 20px 0; border-bottom: 1px solid var(--fe-line-soft); background: var(--fe-surface-soft); padding-top: calc(20px + var(--fe-safe-top)); } .fe-auth-header-inner { display: flex; align-items: center; justify-content: center; } .fe-auth-wrap { min-height: calc(100vh - 72px); padding: 48px 0 80px; display: flex; align-items: flex-start; justify-content: center; } .fe-auth-container { width: 100%; max-width: 540px; } .fe-auth-card { background: var(--fe-surface-card); border: 1px solid var(--fe-line); border-radius: var(--fe-radius-lg); padding: 40px 36px; box-shadow: var(--fe-shadow-card); } .fe-auth-card-head { text-align: center; margin-bottom: 28px; } .fe-auth-card-head .fe-eyebrow { margin-bottom: 12px; } .fe-auth-card-head h1 { margin: 0 0 10px; font-size: clamp(26px, 4vw, 34px); } .fe-auth-sub { font-size: 14px; color: var(--fe-ink-3); font-weight: 300; line-height: 1.6; } .fe-auth-form { margin: 0; } .fe-auth-actions { margin-top: 12px; } /* Slot the shared Turnstile widget gets transplanted into. The widget itself sets its own dimensions; we just reserve a centred gutter above the submit button so the layout doesn't jump when the widget appears/disappears between tabs. */ .fe-turnstile-slot { /* Turnstile runs in invisible mode now (data-size="invisible") — no widget UI is ever attached to this slot, so the gutter is just dead vertical space. Collapse fully. If we switch back to a visible challenge later, set min-height: 65px. */ display: none; } /* Plan-intent chip — shown on /login?tab=register&plan=premium* so the user knows we're carrying their Premium selection through and will take payment after they register. */ .fe-plan-notice { margin: 0 0 20px; padding: 12px 16px; font-size: 13px; color: var(--fe-ink); background: var(--fe-accent-bg); border: 1px solid var(--fe-accent-border); border-radius: var(--fe-radius); line-height: 1.5; } .fe-plan-notice strong { color: var(--fe-accent); font-weight: 600; } .fe-auth-error { margin: 0 0 16px; padding: 10px 14px; font-size: 13px; color: var(--fe-danger); background: rgba(184, 100, 80, 0.08); border: 1px solid rgba(184, 100, 80, 0.28); border-radius: var(--fe-radius); line-height: 1.5; } .fe-auth-submit[aria-busy="true"] { cursor: progress; } .fe-role-fieldset { border: 0; padding: 0; margin: 0 0 20px; } .fe-role-fieldset legend { padding: 0; margin-bottom: 12px; } @media (max-width: 560px) { .fe-auth-card { padding: 28px 20px; border-radius: var(--fe-radius); } .fe-auth-wrap { padding: 24px 0 64px; } } .fe-slider { position: relative; width: 100%; border-radius: var(--fe-radius-lg); overflow: hidden; background: var(--fe-surface-card); aspect-ratio: 16 / 9; } .fe-slider[data-aspect="1/1"] { aspect-ratio: 1 / 1; } .fe-slider[data-aspect="4/3"] { aspect-ratio: 4 / 3; } .fe-slider[data-aspect="3/2"] { aspect-ratio: 3 / 2; } .fe-slider[data-aspect="4/5"] { aspect-ratio: 4 / 5; } .fe-slider[data-aspect="21/9"] { aspect-ratio: 21 / 9; } /* Fill mode — for embedding inside another aspect-locked container (e.g. .fe-feature-img which is 4/5). Drops the slider's own aspect-ratio and absolutely fills the parent so the parent's shape wins. */ .fe-slider--fill { aspect-ratio: auto; position: absolute; inset: 0; border-radius: 0; } /* Track holds slides as a horizontal flex row; transform drives the transition so each slide slides into view rather than fading. */ .fe-slider-track { position: absolute; inset: 0; display: flex; transition: transform 600ms cubic-bezier(.4, .0, .2, 1); will-change: transform; } .fe-slider-track > img, .fe-slider-track > .fe-slider-slide { flex: 0 0 100%; width: 100%; height: 100%; object-fit: cover; user-select: none; -webkit-user-drag: none; } /* Prev / next arrows — square pills hugging the slide window's left/right edge. Icon is a chevron drawn as borders so we don't need an SVG asset. */ .fe-slider-arrow { position: absolute; top: 50%; transform: translateY(-50%); width: 44px; height: 44px; display: inline-flex; align-items: center; justify-content: center; background: rgba(10, 10, 10, 0.55); color: #ffffff; border: 1px solid rgba(255, 255, 255, 0.15); border-radius: 50%; cursor: pointer; backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); transition: background 180ms ease, border-color 180ms ease; z-index: 2; } .fe-slider-arrow:hover { background: rgba(10, 10, 10, 0.75); border-color: rgba(255, 255, 255, 0.3); } .fe-slider-arrow:focus-visible { outline: none; box-shadow: var(--fe-focus-ring); } .fe-slider-arrow[hidden] { display: none; } .fe-slider-arrow--prev { left: 16px; } .fe-slider-arrow--next { right: 16px; } .fe-slider-arrow svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; } /* Dot pagination — centred along the slide bottom edge. */ .fe-slider-dots { position: absolute; bottom: 18px; left: 0; right: 0; display: flex; justify-content: center; gap: 8px; z-index: 2; } .fe-slider-dot { width: 8px; height: 8px; border-radius: 50%; background: rgba(255, 255, 255, 0.45); border: 0; cursor: pointer; transition: background 180ms ease, transform 180ms ease; } .fe-slider-dot:hover { background: rgba(255, 255, 255, 0.7); } .fe-slider-dot.is-active { background: #ffffff; transform: scale(1.4); } .fe-slider-dot:focus-visible { outline: none; box-shadow: var(--fe-focus-ring); } /* Mobile — smaller arrows and tighter dots so they don't crowd a narrow viewport. */ @media (max-width: 720px) { .fe-slider-arrow { width: 36px; height: 36px; } .fe-slider-arrow--prev { left: 10px; } .fe-slider-arrow--next { right: 10px; } .fe-slider-dots { bottom: 12px; gap: 6px; } .fe-slider-dot { width: 6px; height: 6px; } } /* Reduced-motion users get an instant cut, no slide animation. */ @media (prefers-reduced-motion: reduce) { .fe-slider-track { transition: none; } } /* ── Lede + body paragraphs (full container width) ─────────────── */ .fe-contact-lede { font-family: 'Inter', sans-serif; font-size: 17px; line-height: 1.7; color: var(--fe-ink-2); font-weight: 300; margin: 0 0 48px; max-width: none; } /* ── Email / enquiry card grid ─────────────────────────────────── */ .fe-contact-cards { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 24px; margin: 0 0 64px; } .fe-contact-card { background: var(--fe-surface-card); border: 1px solid var(--fe-line); border-radius: var(--fe-radius); padding: 32px; transition: border-color 180ms ease, transform 180ms ease; } .fe-contact-card:hover { border-color: var(--fe-accent-border); } .fe-contact-card-label { font-family: 'Inter', sans-serif; font-size: 11px; font-weight: 600; letter-spacing: 0.12em; text-transform: uppercase; color: var(--fe-accent); margin: 0 0 16px; } .fe-contact-card-link { display: inline-block; font-size: 16px; font-weight: 400; color: var(--fe-ink); text-decoration: none; margin: 0 0 12px; transition: color 180ms ease; } .fe-contact-card-link:hover { color: var(--fe-accent); } .fe-contact-card-note { font-size: 13px; line-height: 1.6; color: var(--fe-ink-muted); margin: 0; } /* ── Section divider used between contact blocks ───────────────── */ .fe-contact-section { border-top: 1px solid var(--fe-line); padding-top: 48px; margin-bottom: 56px; } .fe-contact-section:last-child { margin-bottom: 0; } .fe-contact-section-title { font-family: 'Fraunces', serif; font-weight: 300; font-size: clamp(24px, 2.6vw, 32px); line-height: 1.15; letter-spacing: -0.015em; color: var(--fe-ink); margin: 0 0 24px; border: 0; padding: 0; } .fe-contact-section-lede { font-size: 16px; line-height: 1.7; color: var(--fe-ink-2); font-weight: 300; margin: 0 0 32px; max-width: none; } .fe-contact-section-body { font-size: 16px; line-height: 1.75; color: var(--fe-ink-2); font-weight: 300; margin: 0; max-width: none; } /* ── Labelled info pairs (company info) ────────────────────────── */ .fe-info-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 32px; } .fe-info-cell-label { font-family: 'Inter', sans-serif; font-size: 11px; font-weight: 600; letter-spacing: 0.12em; text-transform: uppercase; color: var(--fe-ink-muted); margin: 0 0 8px; } .fe-info-cell-value { font-size: 15px; line-height: 1.65; color: var(--fe-ink-2); margin: 0; } .fe-info-cell-value--mono { font-family: 'IBM Plex Mono', ui-monospace, Menlo, monospace; } .fe-info-cell-value a { color: var(--fe-accent); text-decoration: none; } .fe-info-cell-value a:hover { color: var(--fe-accent-hover); text-decoration: underline; } /* ── Social tiles ──────────────────────────────────────────────── */ .fe-social-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 16px; } .fe-social-tile { display: flex; align-items: center; gap: 10px; background: var(--fe-surface-card); border: 1px solid var(--fe-line); border-radius: var(--fe-radius); padding: 14px 18px; text-decoration: none; color: var(--fe-ink-2); font-size: 13px; font-weight: 400; transition: border-color 180ms ease, color 180ms ease; min-width: 0; } .fe-social-tile:hover { border-color: var(--fe-accent-border); color: var(--fe-ink); } .fe-social-tile svg { flex: 0 0 auto; color: var(--fe-accent); } .fe-social-tile span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; min-width: 0; } /* ── Mobile ────────────────────────────────────────────────────── */ @media (max-width: 720px) { .fe-contact-cards { grid-template-columns: 1fr; gap: 16px; margin-bottom: 40px; } .fe-contact-card { padding: 24px; } .fe-info-grid { grid-template-columns: 1fr; gap: 24px; } .fe-social-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; } .fe-social-tile { padding: 12px 14px; font-size: 12px; } .fe-contact-section { padding-top: 36px; margin-bottom: 36px; } }