/* ========================================================================== Wexler Funnel Kit — theme.css Token layer. Nothing here draws a component; it defines the variables that blocks.css and heroes.css consume. Reskin a whole page from : Self-hosted fonts, no CDN, no external request. Everlast does the same via next/font, which is part of why their page feels instant. ========================================================================== */ /* ---------- 0. Fonts ---------------------------------------------------- Inter variable, 400-900, latin + latin-ext. This is the face Everlast's headings actually render in: their carries next/font's Inter class, is Tailwind `font-sans`, and their h1 sets font-weight 900 with no family override. CircularStd appears in their markup only inside the legacy cookie banner, and it is a paid Lineto face we could not self-host anyway. unicode-range gates the ext slice, so an English page downloads 48KB and never fetches the other 85KB. ------------------------------------------------------------------------ */ @font-face { font-family: "InterVar"; src: url("fonts/inter-latin.woff2") format("woff2"); font-weight: 100 900; font-style: normal; font-display: swap; unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; } @font-face { font-family: "InterVar"; src: url("fonts/inter-latin-ext.woff2") format("woff2"); font-weight: 100 900; font-style: normal; font-display: swap; unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; } /* ---------- 1. Reset ---------------------------------------------------- */ *, *::before, *::after { box-sizing: border-box; } html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; /* `clip`, not `hidden`. .wx-bleed uses 50vw, and 100vw counts the scrollbar, so it overshoots by the scrollbar width. `hidden` would clip that too but establishes a scroll container and breaks position:sticky descendants (see .wx-sticksplit). `clip` does not. */ overflow-x: clip; } body, h1, h2, h3, h4, p, figure, blockquote, dl, dd, ol, ul { margin: 0; padding: 0; } ol, ul { list-style: none; } img, svg, video { display: block; max-width: 100%; height: auto; } button, input, select, textarea { font: inherit; color: inherit; } button { background: none; border: 0; cursor: pointer; } a { color: inherit; } /* ---------- 2. Palette -------------------------------------------------- Near-black ground with a blue cast, and a bright accent. The earlier navy (#0E1B2C) plus mustard gold (#C9A227) measured dim against the reference: ground too light, accent too dark, so nothing popped. Their formula is a near-black field with one high-luminance accent, and that is what this is. Wexler navy and gold remain available as --wx-navy / --wx-gold for anything that must match the deck exactly. ------------------------------------------------------------------------ */ :root { --wx-bg: #080C12; /* near-black, faint blue cast */ --wx-well: #05070B; /* insets, mock chrome */ --wx-card: #0E141D; /* raised surface */ --wx-card-2: #141C28; /* raised, hovered */ --wx-border: #1E2938; --wx-border-strong: #2C3A4D; --wx-fg: #FFFFFF; --wx-fg-2: #C8D3E0; --wx-muted: #8494A6; /* Accent. Bright gold: same hue family as Wexler gold, high luminance so it carries on near-black. Roughly 14:1 against the ground. RESERVED FOR ACTION. --wx-primary means "click this". Use it for buttons, the one emphasised span in the h1, the progress fill and the short rule. Nothing else. It was previously painted on eyebrows, every stat figure, every icon well, tick marks and case labels: 60+ elements in gold text against 5 gold buttons. The buttons then had no way to stand out, because being gold was the page's default state rather than a signal. */ --wx-primary: #FFD23D; --wx-on-primary: #0A0A0A; /* Decorative markers: eyebrows, icon wells, tick marks, section labels. Anything that orients the reader but is not clickable. */ --wx-marker: #93A4B8; --wx-marker-weak: #4A5A6E; /* Documented deck brand, kept for anything that must match exactly. */ --wx-navy: #0E1B2C; --wx-gold: #C9A227; --wx-ink: #1A2A3F; --wx-slate: #5B6B7E; --wx-brand-blue: #37A2E3; /* the fill in the real Wexler logo mark */ --wx-green: #3DD68C; --wx-red: #FF5C72; /* Accent tints. Centralised so no block writes its own color-mix. */ --wx-tint-6: color-mix(in oklch, var(--wx-primary) 6%, transparent); --wx-tint-10: color-mix(in oklch, var(--wx-primary) 10%, transparent); --wx-tint-16: color-mix(in oklch, var(--wx-primary) 16%, transparent); --wx-tint-28: color-mix(in oklch, var(--wx-primary) 28%, transparent); --wx-tint-50: color-mix(in oklch, var(--wx-primary) 50%, transparent); --wx-green-tint: color-mix(in oklch, var(--wx-green) 18%, transparent); --wx-red-tint: color-mix(in oklch, var(--wx-red) 18%, transparent); /* Glow. The reference leans on this heavily for icon wells and CTAs, and its absence was most of why ours read flat. */ --wx-glow-sm: 0 0 16px color-mix(in oklch, var(--wx-primary) 26%, transparent); --wx-glow: 0 0 34px color-mix(in oklch, var(--wx-primary) 32%, transparent); --wx-glow-lg: 0 0 68px color-mix(in oklch, var(--wx-primary) 26%, transparent); /* ---------- 3. Type ---------- */ --wx-font-body: "InterVar", ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif; --wx-font-display: var(--wx-font-body); /* Mono is for DATA ONLY: figures in the mocks, metric cells. It is not used for eyebrows or badges any more, because monospace on a marketing page reads as code and was the single biggest tell. */ --wx-font-mono: ui-monospace, "SF Mono", "Cascadia Mono", "Segoe UI Mono", Menlo, Consolas, monospace; /* Bigger, and closer to the reference. Their h1 computes to ~45px and their h2 to ~40px; ours were 36.5 and 25.3, which is why headings looked small and bundled up. */ --wx-t-display: clamp(2.5rem, 6.2vw, 4rem); /* 40 -> 64px */ --wx-t-h2: clamp(1.95rem, 4.8vw, 2.85rem); /* 31 -> 46px */ --wx-t-h3: 1.2rem; --wx-t-lead: clamp(1.09rem, 1.7vw, 1.28rem); --wx-t-body: 1.0625rem; --wx-t-sm: 0.9375rem; --wx-t-xs: 0.8125rem; --wx-t-eyebrow: 0.78rem; --wx-lh-tight: 1.05; --wx-lh-snug: 1.14; --wx-lh-body: 1.65; /* Heavy and tight, which is the reference's whole typographic signature. */ --wx-w-display: 900; --wx-w-h2: 800; --wx-track-display: -0.035em; --wx-track-h2: -0.028em; --wx-track-eyebrow: 0.16em; /* ---------- 4. Space (4px base) ---------- */ --wx-s-1: 0.25rem; --wx-s-2: 0.5rem; --wx-s-3: 0.75rem; --wx-s-4: 1rem; --wx-s-5: 1.25rem; --wx-s-6: 1.5rem; --wx-s-8: 2rem; --wx-s-10: 2.5rem; --wx-s-12: 3rem; --wx-s-16: 4rem; --wx-s-20: 5rem; --wx-s-24: 6rem; --wx-block-gap: clamp(4rem, 9vw, 7.5rem); --wx-gutter: clamp(1.15rem, 4vw, 1.5rem); /* ---------- 5. Radius ---------- */ --wx-r-sm: 8px; --wx-r-md: 12px; --wx-r-lg: 18px; --wx-r-pill: 999px; /* ---------- 6. Measure ---------- Headings get a wider measure than body copy. Constraining an h2 to the 720px prose column is what made them look cramped. */ --wx-w-narrow: 640px; --wx-w-text: 720px; --wx-w-heading: 940px; --wx-w-main: 1060px; --wx-w-wide: 1240px; /* ---------- 7. Motion ---------- */ --wx-ease: cubic-bezier(0.22, 0.61, 0.36, 1); --wx-ease-out: cubic-bezier(0.16, 1, 0.3, 1); --wx-dur-fast: 160ms; --wx-dur: 240ms; --wx-dur-slow: 520ms; --wx-loop: 14s; /* shared by every hero mock so panels stay in step */ --wx-loop-rm: 26s; /* calmer tempo for the cross-fades under reduced motion */ } /* ---------- 8. Accent variants ------------------------------------------ The reskin lever. Change data-primary and every tint, glow, border, button and chart colour follows, including the logo mark, which inherits currentColor. ------------------------------------------------------------------------ */ [data-primary="gold"] { --wx-primary: #FFD23D; --wx-on-primary: #0A0A0A; } [data-primary="deckgold"] { --wx-primary: #C9A227; --wx-on-primary: #0A0A0A; } [data-primary="wexler"] { --wx-primary: #37A2E3; --wx-on-primary: #04101B; } [data-primary="yellow"] { --wx-primary: #FAEF70; --wx-on-primary: #14140A; } [data-primary="green"] { --wx-primary: #3DD68C; --wx-on-primary: #04150D; } [data-primary="copper"] { --wx-primary: #FF9E5A; --wx-on-primary: #1A0E05; } /* ---------- 9. Font variants -------------------------------------------- */ [data-font="inter"] { --wx-font-display: var(--wx-font-body); } /* Serif display, for a page that wants an editorial register instead. */ [data-font="serif"] { --wx-font-display: Georgia, "Iowan Old Style", serif; --wx-w-display: 700; --wx-w-h2: 700; } /* ---------- 10. Light theme -------------------------------------------- */ [data-theme="light"] { --wx-marker: #5B6B7E; --wx-marker-weak: #A8B4C2; --wx-bg: #FBFAF7; --wx-well: #F1EFE9; --wx-card: #FFFFFF; --wx-card-2: #F7F5F0; --wx-border: #E4E0D6; --wx-border-strong: #CFC9BA; --wx-fg: #0B1219; --wx-fg-2: #38465A; --wx-muted: #66748A; --wx-primary: #B8860B; --wx-on-primary: #FFFFFF; --wx-glow-sm: none; --wx-glow: none; --wx-glow-lg: none; } /* ---------- 11. Base --------------------------------------------------- */ body { background: var(--wx-bg); color: var(--wx-fg); font-family: var(--wx-font-body); font-size: var(--wx-t-body); line-height: var(--wx-lh-body); -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; overflow-x: clip; } h1, h2, h3, h4 { font-family: var(--wx-font-display); color: var(--wx-fg); text-wrap: balance; } h1 { font-size: var(--wx-t-display); font-weight: var(--wx-w-display); line-height: var(--wx-lh-tight); letter-spacing: var(--wx-track-display); } h2 { font-size: var(--wx-t-h2); font-weight: var(--wx-w-h2); line-height: var(--wx-lh-snug); letter-spacing: var(--wx-track-h2); } h3 { font-size: var(--wx-t-h3); font-weight: 700; line-height: 1.32; letter-spacing: -0.014em; } p { text-wrap: pretty; } strong, b { font-weight: 700; color: var(--wx-fg); } /* Data only. Tabular so figures in a column line up. */ .wx-num, .wx-mono { font-family: var(--wx-font-mono); font-variant-numeric: tabular-nums; font-feature-settings: "tnum" 1; } /* ---------- 12. Focus -------------------------------------------------- */ :focus-visible { outline: 2px solid var(--wx-primary); outline-offset: 3px; border-radius: var(--wx-r-sm); } .wx-skip { position: absolute; left: var(--wx-s-4); top: var(--wx-s-4); z-index: 200; padding: var(--wx-s-2) var(--wx-s-4); background: var(--wx-primary); color: var(--wx-on-primary); border-radius: var(--wx-r-sm); font-size: var(--wx-t-xs); font-weight: 700; transform: translateY(-200%); transition: transform var(--wx-dur) var(--wx-ease); } .wx-skip:focus { transform: translateY(0); } /* ---------- 13. Reduced motion ----------------------------------------- */ @media (prefers-reduced-motion: reduce) { html:not([data-motion="force"]) { scroll-behavior: auto; } /* `animation: none`, not a 1ms duration. Squashing the duration leaves the animation running, and a running animation outranks normal author declarations, so the resting states in heroes.css would lose to whatever the final keyframe is. The final keyframe of a loop is the reset frame, which resolved to the "problem" state and showed an accessibility user the failure case as the outcome. Removing the animation from the cascade lets the explicit resting states win. */ html:not([data-motion="force"]) *, html:not([data-motion="force"]) *::before, html:not([data-motion="force"]) *::after { animation: none !important; transition-duration: 1ms !important; transition-delay: 0ms !important; } html:not([data-motion="force"]) .wx-reveal { opacity: 1 !important; transform: none !important; } /* ...then allow back the animations that are PURE CROSS-FADE, at a calmer tempo. `prefers-reduced-motion` exists to stop motion that can cause vestibular discomfort, and that means movement: travel, parallax, scaling, spinning. An opacity change is not movement. Killing these too left the hero mock looking frozen and the page looking broken to anyone with Windows animation effects switched off, which is common. Numbers still climb, the verdict still flips, the model chips still cycle. Nothing travels. Marquee, scroll reveals, the pulsing dot and the typing caret stay off, because those all move. More specific selectors than the blanket `*` above, so these win. */ html:not([data-motion="force"]) .wx-cyc > span.wx-v1 { animation: wx-v1 var(--wx-loop-rm) linear infinite !important; } html:not([data-motion="force"]) .wx-cyc > span.wx-v2 { animation: wx-v2 var(--wx-loop-rm) linear infinite !important; } html:not([data-motion="force"]) .wx-cyc > span.wx-v3 { animation: wx-v3 var(--wx-loop-rm) linear infinite !important; } html:not([data-motion="force"]) .wx-llm__verdict .is-absent { animation: wx-llm-absent var(--wx-loop-rm) linear infinite !important; } html:not([data-motion="force"]) .wx-llm__verdict .is-cited { animation: wx-llm-cited var(--wx-loop-rm) linear infinite !important; } html:not([data-motion="force"]) .wx-llm__model--on { animation: wx-llm-chip var(--wx-loop-rm) linear infinite !important; } /* The `animation` shorthand above resets animation-delay to 0, and the blanket `animation: none !important` already outranked the base nth-child delays, so without these all four chips pulse in unison instead of sweeping across the models. The sweep is the point: it reads as "we check every assistant". */ html:not([data-motion="force"]) .wx-llm__model:nth-child(2).wx-llm__model--on { animation-delay: calc(var(--wx-loop-rm) * -0.25) !important; } html:not([data-motion="force"]) .wx-llm__model:nth-child(3).wx-llm__model--on { animation-delay: calc(var(--wx-loop-rm) * -0.5) !important; } html:not([data-motion="force"]) .wx-llm__model:nth-child(4).wx-llm__model--on { animation-delay: calc(var(--wx-loop-rm) * -0.75) !important; } html:not([data-motion="force"]) .wx-aeo__verdict .is-absent { animation: wx-aeo-absent var(--wx-loop-rm) linear infinite !important; } html:not([data-motion="force"]) .wx-aeo__verdict .is-cited { animation: wx-aeo-cited var(--wx-loop-rm) linear infinite !important; } /* The logo marquee keeps running, at half speed. This one is a judgement call rather than a rule: it is continuous movement, which reduced-motion guidance generally says to stop. But it is slow, linear, small in the viewport, not scroll-coupled and not parallax, which is the profile that actually causes vestibular trouble. Without it the page reads as completely frozen on any machine with Windows animation effects off, and "looks broken" is its own accessibility problem. To stop it as well, delete this rule. */ html:not([data-motion="force"]) .wx-marquee__track { animation: wx-marquee 64s linear infinite !important; } } /* ---------- 13b. Motion preview override -------------------------------- Windows "Show animations in Windows" being off sets prefers-reduced-motion for every browser on the machine, so the hero loops correctly stop and the page looks frozen to whoever is reviewing it. `data-motion="force"` on , or `?motion=force` on the URL (funnel.js sets the attribute), plays them anyway. Design review and demos only. Never hardcode it on a public page: it overrides a stated accessibility preference. ------------------------------------------------------------------------ */ /* ---------- 14. Print -------------------------------------------------- */ @media print { body { background: #fff; color: #000; } .wx-stickybar, .wx-consent, .wx-mock, .wx-modal { display: none !important; } }