/* ========================================================================== ChessLX landing — scoped copy of the sample stylesheet. Generated from public/final-samples/brand.css by scoping every rule under #cx-landing, so it can load site-wide (shared root layout) without touching h1/h2/p/.card/.btn/etc. on the dashboard or admin pages. html/body/:root rules became #cx-landing itself; [data-brand]/[data-theme] compound onto it rather than looking for a descendant that carries the attribute, because in this app those attributes live on the wrapper div, not on . Do not hand-edit selectors here — fix public/final-samples/brand.css and regenerate (script kept in the session that produced this). ========================================================================== */ /* ========================================================================== ChessLX — shared brand foundation for the final landing candidates. One stylesheet so the ten pages differ in idea, not in craft. Two accent families, no purple: [data-brand="gold"] warm brass on near-black / warm paper [data-brand="blue"] brand navy + teal on deep navy / cool paper Two themes, both first-class. The logo is NOT tinted with CSS filters — each theme swaps to a purpose-made asset, because the navy wordmark on a black header is the thing that was invisible before. ========================================================================== */ @import url('https://fonts.googleapis.com/css2?family=Instrument+Serif:ital@0;1&family=Manrope:wght@400;500;600;700;800&display=swap'); /* ---- tokens ------------------------------------------------------------ */ #cx-landing { --r-sm: 8px; --r: 14px; --r-lg: 22px; --r-pill: 999px; --pad: clamp(20px, 5vw, 48px); --maxw: 1560px; --t-fast: 160ms; --t: 220ms; --ease: cubic-bezier(.2, .7, .3, 1); --z-nav: 40; --z-pop: 60; } /* gold · dark (default) */ #cx-landing[data-brand="gold"] { --bg: #09090C; --bg-2: #0F0F14; --surface: #14141B; --raise: #1B1B24; --line: #262631; --ink: #F5F2EA; --muted: #A9A497; --faint: #6F6B60; --accent: #E5B454; --accent-2: #F2D08A; --accent-deep: #B98526; --accent-soft: rgba(229, 180, 84, .12); --on-accent: #1A1206; --good: #4FBF87; --warn: #E5A24C; --bad: #E4695F; --shadow: 0 30px 70px -40px rgba(0, 0, 0, .9); } #cx-landing[data-brand="gold"][data-theme="light"] { --bg: #FBF8F2; --bg-2: #F4EFE4; --surface: #FFFFFF; --raise: #FBF7EF; --line: #E6DFD0; --ink: #1A1712; --muted: #5E574A; --faint: #918876; --accent: #A9761A; --accent-2: #8A5F10; --accent-deep: #7A5410; --accent-soft: rgba(169, 118, 26, .10); --on-accent: #FFFFFF; --good: #1E8F5F; --warn: #A96B14; --bad: #B5443C; --shadow: 0 30px 60px -38px rgba(60, 44, 12, .4); } /* blue · dark */ #cx-landing[data-brand="blue"] { --bg: #050A12; --bg-2: #08111D; --surface: #0D1826; --raise: #122234; --line: #1E3247; --ink: #EAF2FB; --muted: #93A8BF; --faint: #5E748C; --accent: #47A0F5; --accent-2: #38D0D8; --accent-deep: #2E7FD1; --accent-soft: rgba(71, 160, 245, .13); --on-accent: #04121F; --good: #3FC28C; --warn: #E5A24C; --bad: #F0736A; --shadow: 0 30px 70px -40px rgba(0, 8, 20, .9); } #cx-landing[data-brand="blue"][data-theme="light"] { --bg: #F7FAFD; --bg-2: #EDF3FA; --surface: #FFFFFF; --raise: #F6FAFF; --line: #DCE7F3; --ink: #0B1A2B; --muted: #4C5F75; --faint: #7B8CA1; --accent: #12459E; --accent-2: #0E7F8C; --accent-deep: #0C357C; --accent-soft: rgba(18, 69, 158, .09); --on-accent: #FFFFFF; --good: #17845C; --warn: #A2670F; --bad: #B23A33; --shadow: 0 28px 60px -38px rgba(11, 26, 43, .35); } /* ---- base -------------------------------------------------------------- */ #cx-landing, #cx-landing * { box-sizing: border-box; } #cx-landing { -webkit-text-size-adjust: 100%; overflow-x: hidden; } #cx-landing { margin: 0; background: var(--bg); color: var(--ink); font-family: 'Manrope', ui-sans-serif, system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif; font-size: 17px; line-height: 1.62; -webkit-font-smoothing: antialiased; /* NOT overflow-x: hidden. `hidden` makes an element scrollable-by-script even with no visible scrollbar, so body — having its own non-visible overflow — became a second scroll container nested inside . The sticky nav then pinned itself to THAT box, and calling window.scrollTo (which moves the outer, html-level scroller) left the nav behind: it "unstuck" the instant you scrolled the page. `clip` forbids scrolling outright, so body never becomes a scroll container and the nav has only one scroller — the viewport — to stick to. */ overflow-x: clip; } #cx-landing h1, #cx-landing h2, #cx-landing h3, #cx-landing h4 { margin: 0; line-height: 1.06; letter-spacing: -.022em; text-wrap: balance; font-weight: 800; } #cx-landing h1 { font-size: clamp(38px, 6.4vw, 76px); } #cx-landing h2 { font-size: clamp(27px, 3.7vw, 44px); } #cx-landing h3 { font-size: clamp(19px, 2vw, 24px); letter-spacing: -.01em; } #cx-landing p { margin: 0; } /* The editorial face, used deliberately and never for whole paragraphs. */ #cx-landing .serif { font-family: 'Instrument Serif', Georgia, 'Times New Roman', serif; font-weight: 400; letter-spacing: -.005em; } #cx-landing .serif em { font-style: italic; } #cx-landing a { color: inherit; } #cx-landing img { max-width: 100%; display: block; } #cx-landing .mono { font-family: ui-monospace, 'SF Mono', 'Cascadia Mono', Menlo, Consolas, monospace; } #cx-landing .num { font-variant-numeric: tabular-nums; } #cx-landing .accent { color: var(--accent); } #cx-landing .muted { color: var(--muted); } #cx-landing .faint { color: var(--faint); } #cx-landing :focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; border-radius: 6px; } #cx-landing .wrap { width: 100%; max-width: var(--maxw); margin: 0 auto; padding: 0 var(--pad); } #cx-landing .narrow { max-width: 780px; } #cx-landing .kicker { font-size: 12px; font-weight: 700; letter-spacing: .16em; text-transform: uppercase; color: var(--accent); margin: 0 0 16px; } #cx-landing .lede { font-size: clamp(16.5px, 1.7vw, 20px); color: var(--muted); max-width: 62ch; } /* The nav freezes at the top of the viewport, so any anchor jump — the nav links, or a script scrolling a section into view — must land far enough down that the nav does not cover the thing it just scrolled to. */ #cx-landing section[id] { scroll-margin-top: 76px; } #cx-landing .section { padding: clamp(56px, 9vw, 116px) 0; } #cx-landing .section-tight { padding: clamp(38px, 6vw, 72px) 0; } #cx-landing .rule { height: 1px; background: var(--line); border: 0; margin: 0; } /* ---- logo -------------------------------------------------------------- */ /* Two assets, one shown per theme. A CSS filter cannot rescue a navy mark on black — it only makes a muddy one — so the artwork itself changes. */ #cx-landing .logo { display: flex; align-items: center; gap: 10px; text-decoration: none; flex-shrink: 0; --logo-h: 30px; } #cx-landing .logo img { height: var(--logo-h, 30px); width: auto; display: none; } #cx-landing .hero-mark img { display: none; } /* Gold brand: brass on dark, brand navy on paper. Blue brand: lifted ice-blue on dark, brand navy on paper. The navy original is never placed on a dark surface. */ /* Applies wherever the mark appears — the nav lockup and the hero mark both. */ #cx-landing[data-brand="gold"] :where(.logo, .hero-mark) .lg-gold, #cx-landing[data-brand="blue"] :where(.logo, .hero-mark) .lg-ice, #cx-landing[data-theme="light"] :where(.logo, .hero-mark) .lg-blue { display: block; } #cx-landing[data-theme="light"] :where(.logo, .hero-mark) .lg-gold, #cx-landing[data-theme="light"] :where(.logo, .hero-mark) .lg-ice { display: none; } /* The nav logo plays as a film on phones — the big hero film is dropped there instead (see .mark-film's own comment), so this is where "the logo is a video" actually shows up on a phone. `:not([data-theme="light"])` keeps this fully out of light theme's way rather than fighting the lg-blue display rule above on specificity: the film is shot on black and `screen`-blended, so on paper it would just wash out — light theme keeps the static navy wordmark. Sized well past the wordmark's own tiny height (30px/26px) — matching or slightly scaling that footprint made the horse mark and "ChessLX" text unreadable next to the nav buttons. This is sized off the buttons instead: bigger than .btn-sm's 38px min-height, so it reads as the dominant thing in the row, not a detail next to it. The row simply grows to fit it. */ #cx-landing .logo-film-box { display: none; } @media (max-width: 900px) { #cx-landing:not([data-theme="light"]) .nav .logo img { display: none; } #cx-landing:not([data-theme="light"]) .logo-film-box { display: flex; align-items: center; height: 60px; } #cx-landing:not([data-theme="light"]) .logo-film { display: block; height: 100%; width: auto; aspect-ratio: 848 / 368; object-fit: cover; object-position: 50% 50%; mix-blend-mode: screen; filter: contrast(1.22) brightness(1.06); -webkit-mask-image: radial-gradient(ellipse 76% 72% at 42% 50%, #000 55%, transparent 100%); mask-image: radial-gradient(ellipse 76% 72% at 42% 50%, #000 55%, transparent 100%); } } @media (max-width: 380px) { #cx-landing:not([data-theme="light"]) .logo-film-box { height: 51px; } } /* ---- buttons ----------------------------------------------------------- */ #cx-landing .btn { display: inline-flex; align-items: center; justify-content: center; gap: 9px; min-height: 46px; padding: 12px 22px; cursor: pointer; font: inherit; font-size: 15.5px; font-weight: 700; text-decoration: none; border: 1px solid transparent; border-radius: var(--r-pill); transition: background-color var(--t) var(--ease), border-color var(--t) var(--ease), color var(--t) var(--ease), box-shadow var(--t) var(--ease); } #cx-landing .btn-primary { background: var(--accent); color: var(--on-accent); } #cx-landing .btn-primary:hover { background: var(--accent-deep); } #cx-landing .btn-ghost { border-color: var(--line); color: var(--ink); background: transparent; } #cx-landing .btn-ghost:hover { border-color: var(--accent); color: var(--accent); } #cx-landing .btn-sm { min-height: 38px; padding: 8px 16px; font-size: 14px; } #cx-landing .btn-lg { min-height: 54px; padding: 15px 30px; font-size: 17px; } /* ---- nav --------------------------------------------------------------- */ #cx-landing .nav { position: sticky; top: 0; z-index: var(--z-nav); background: color-mix(in srgb, var(--bg) 86%, transparent); backdrop-filter: blur(14px); border-bottom: 1px solid var(--line); } #cx-landing .nav-in { display: flex; align-items: center; justify-content: space-between; gap: 18px; padding-block: 13px; } #cx-landing .nav-links { display: flex; align-items: center; gap: 26px; font-size: 15px; } #cx-landing .nav-links a { color: var(--muted); text-decoration: none; transition: color var(--t) var(--ease); } #cx-landing .nav-links a:hover { color: var(--ink); } #cx-landing .nav-right { display: flex; align-items: center; gap: 10px; } @media (max-width: 820px) { #cx-landing .nav-links { display: none; } } @media (max-width: 380px) { #cx-landing .nav-in { gap: 10px; } #cx-landing .nav-right { gap: 6px; } #cx-landing .nav .logo { --logo-h: 26px; } #cx-landing .nav .btn-sm { padding-inline: 12px; font-size: 13px; white-space: nowrap; } } /* Theme + brand switch, present on every page so both can be judged. */ #cx-landing .switch { display: flex; align-items: center; gap: 6px; } #cx-landing .switch button { width: 38px; height: 38px; display: grid; place-items: center; cursor: pointer; background: transparent; border: 1px solid var(--line); border-radius: 10px; color: var(--muted); transition: color var(--t) var(--ease), border-color var(--t) var(--ease); } #cx-landing .switch button:hover { color: var(--accent); border-color: var(--accent); } #cx-landing .switch button svg { width: 17px; height: 17px; } /* ---- surfaces ---------------------------------------------------------- */ #cx-landing .card { background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-lg); padding: clamp(18px, 2.4vw, 26px); } #cx-landing .card-flat { background: var(--bg-2); } #cx-landing .measure { max-width: 62ch; } #cx-landing .grid { display: grid; grid-template-columns: 1fr; gap: clamp(14px, 2vw, 22px); } @media (min-width: 720px) { #cx-landing .g-2 { grid-template-columns: 1fr 1fr; } } @media (min-width: 960px) { #cx-landing .g-3 { grid-template-columns: repeat(3, 1fr); } #cx-landing .g-4 { grid-template-columns: repeat(4, 1fr); } } #cx-landing .pill { display: inline-flex; align-items: center; gap: 7px; padding: 6px 13px; border-radius: var(--r-pill); background: var(--accent-soft); color: var(--accent); font-size: 12.5px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; } #cx-landing .stack > .pill, #cx-landing .stack > .tag { align-self: flex-start; } #cx-landing .dot { width: 7px; height: 7px; border-radius: 50%; background: currentColor; } @media (prefers-reduced-motion: no-preference) { #cx-landing .dot-live { animation: pulse 2s var(--ease) infinite; } } @keyframes pulse { 0%, 100% { opacity: 1; } 50% { opacity: .35; } } /* ---- the board -------------------------------------------------------- Unicode chess glyphs come from whatever font the device happens to have, so the same board rendered thin on one machine and cartoonish on another. These are the app's own Chessnut SVGs — the pieces a student actually sees inside ChessLX — laid over the squares as positioned elements so a move can be animated rather than redrawn. */ #cx-landing .board { position: relative; width: 100%; aspect-ratio: 1; border-radius: var(--r); overflow: hidden; border: 1px solid var(--line); box-shadow: 0 18px 40px -28px rgba(0, 0, 0, .8); } #cx-landing .board-sq { position: absolute; inset: 0; display: grid; grid-template-columns: repeat(8, 1fr); } #cx-landing .board-sq i { display: block; position: relative; } #cx-landing .board-sq i.l { background: #EFE3CC; } #cx-landing .board-sq i.d { background: #B58863; } #cx-landing[data-brand="gold"] .board-sq i.l { background: #F2E4C4; } #cx-landing[data-brand="gold"] .board-sq i.d { background: #B0803C; } #cx-landing[data-brand="blue"] .board-sq i.l { background: #E4EDF6; } #cx-landing[data-brand="blue"] .board-sq i.d { background: #6D91B5; } /* Marks sit under the pieces so a highlight never dims the piece on it. */ #cx-landing .board-mark { position: absolute; width: 12.5%; height: 12.5%; box-shadow: inset 0 0 0 3px var(--accent); background: color-mix(in srgb, var(--accent) 22%, transparent); } #cx-landing .board-pc { position: absolute; width: 12.5%; height: 12.5%; display: grid; place-items: center; transition: left 420ms var(--ease), top 420ms var(--ease), opacity 200ms linear; will-change: left, top; } #cx-landing .board-pc img { width: 86%; height: 86%; display: block; } #cx-landing .board-pc.gone { opacity: 0; } @media (prefers-reduced-motion: reduce) { #cx-landing .board-pc { transition: none; } } /* The last move, shown the way a board shows it. */ #cx-landing .board-trail { position: absolute; width: 12.5%; height: 12.5%; background: color-mix(in srgb, var(--accent) 34%, transparent); transition: left 420ms var(--ease), top 420ms var(--ease), opacity 300ms linear; } #cx-landing .board-cap { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-top: 10px; font-size: 13px; color: var(--faint); } /* ---- ask → answer ------------------------------------------------------ */ /* The core interaction of several candidates: the question sits at the top, the answer resolves underneath it on the SAME screen. Nothing important lives below the fold, which is what made the earlier version unreadable on a phone. */ #cx-landing .ask { display: flex; align-items: center; gap: 12px; padding: 14px 16px; border-radius: var(--r); background: var(--surface); border: 1px solid var(--line); box-shadow: var(--shadow); } #cx-landing .ask-mark { flex-shrink: 0; width: 26px; height: 26px; color: var(--accent); } #cx-landing .ask-text { flex: 1; min-width: 0; font-size: clamp(15px, 1.8vw, 18px); font-weight: 600; } #cx-landing .caret { display: inline-block; width: 2px; height: 1.05em; margin-left: 2px; background: var(--accent); vertical-align: text-bottom; } @media (prefers-reduced-motion: no-preference) { #cx-landing .caret { animation: blink 1.05s steps(2) infinite; } } @keyframes blink { 50% { opacity: 0; } } #cx-landing .answer { margin-top: 14px; border-radius: var(--r); background: var(--surface); border: 1px solid var(--line); opacity: 0; transform: translateY(10px); transition: opacity 420ms var(--ease), transform 420ms var(--ease); } #cx-landing .answer.in { opacity: 1; transform: none; } @media (prefers-reduced-motion: reduce) { #cx-landing .answer { transition: none; opacity: 1; transform: none; } } #cx-landing .answer-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 12px 16px; border-bottom: 1px solid var(--line); font-size: 12.5px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--faint); } #cx-landing .answer-body { padding: 16px; } #cx-landing .row { display: flex; align-items: center; justify-content: space-between; gap: 14px; padding: 11px 0; border-bottom: 1px solid var(--line); } #cx-landing .row:last-child { border-bottom: 0; } #cx-landing .row-name { font-weight: 600; } #cx-landing .tag { padding: 3px 10px; border-radius: var(--r-pill); font-size: 12.5px; font-weight: 700; background: var(--accent-soft); color: var(--accent); } #cx-landing .tag-good { background: color-mix(in srgb, var(--good) 16%, transparent); color: var(--good); } #cx-landing .tag-warn { background: color-mix(in srgb, var(--warn) 18%, transparent); color: var(--warn); } #cx-landing .tag-bad { background: color-mix(in srgb, var(--bad) 16%, transparent); color: var(--bad); } /* Question chips — the visitor drives the demo instead of watching a loop. */ #cx-landing .chips { display: flex; flex-wrap: wrap; gap: 9px; } #cx-landing .chip { cursor: pointer; font: inherit; font-size: 14px; font-weight: 600; padding: 9px 15px; min-height: 40px; border-radius: var(--r-pill); background: transparent; color: var(--muted); border: 1px solid var(--line); transition: color var(--t) var(--ease), border-color var(--t) var(--ease), background-color var(--t) var(--ease); } #cx-landing .chip:hover { color: var(--ink); border-color: var(--accent); } #cx-landing .chip[aria-pressed="true"] { background: var(--accent-soft); color: var(--accent); border-color: var(--accent); } /* ---- price ------------------------------------------------------------- */ /* Per student, always. The total is deliberately secondary: it only resolves once someone moves the slider, which is the moment they are actually sizing a purchase. */ #cx-landing .price-unit { display: flex; align-items: baseline; gap: 8px; flex-wrap: wrap; } #cx-landing .price-figure { font-size: clamp(44px, 6vw, 68px); font-weight: 800; letter-spacing: -.03em; line-height: 1; } #cx-landing .price-per { font-size: 16px; color: var(--muted); font-weight: 600; } #cx-landing .slider { width: 100%; margin: 20px 0 6px; -webkit-appearance: none; appearance: none; background: transparent; cursor: pointer; } #cx-landing .slider::-webkit-slider-runnable-track { height: 6px; border-radius: 99px; background: var(--line); } #cx-landing .slider::-moz-range-track { height: 6px; border-radius: 99px; background: var(--line); } #cx-landing .slider::-webkit-slider-thumb { -webkit-appearance: none; appearance: none; width: 24px; height: 24px; margin-top: -9px; border-radius: 50%; background: var(--accent); border: 3px solid var(--bg); cursor: pointer; } #cx-landing .slider::-moz-range-thumb { width: 24px; height: 24px; border-radius: 50%; background: var(--accent); border: 3px solid var(--bg); cursor: pointer; } #cx-landing .total { margin-top: 14px; padding: 14px 16px; border-radius: var(--r); background: var(--bg-2); border: 1px dashed var(--line); opacity: .45; transition: opacity var(--t) var(--ease), border-style var(--t) var(--ease); } #cx-landing .total.live { opacity: 1; border-style: solid; border-color: var(--accent); } /* ---- footer ------------------------------------------------------------ */ #cx-landing .foot { border-top: 1px solid var(--line); padding: 34px 0; color: var(--faint); font-size: 14.5px; } #cx-landing .foot-in { display: flex; align-items: center; justify-content: space-between; gap: 18px; flex-wrap: wrap; } /* ---- utilities --------------------------------------------------------- */ #cx-landing .stack { display: flex; flex-direction: column; } #cx-landing .gap-s { gap: 10px; } #cx-landing .gap-m { gap: 18px; } #cx-landing .gap-l { gap: 30px; } #cx-landing .cluster { display: flex; flex-wrap: wrap; align-items: center; gap: 12px; } #cx-landing .center { text-align: center; } #cx-landing .center .lede, #cx-landing .center .kicker { margin-left: auto; margin-right: auto; } #cx-landing .hide-sm { display: none; } @media (min-width: 720px) { #cx-landing .hide-sm { display: revert; } } /* The sample gated this on a `.js` class set by an inline script, before first paint, so a no-JS visitor never got stuck looking at permanently-invisible content. This production copy drops that gate: the rest of the app already requires JS for everything (dashboard, auth, payments), so there is no real no-JS path left to protect here, and dropping it avoids re-deriving that head-script trick inside a React tree where the wrapper element does not exist yet when parses. */ #cx-landing .reveal { opacity: 0; transform: translateY(18px); transition: opacity 620ms var(--ease), transform 620ms var(--ease); } #cx-landing .reveal.in { opacity: 1; transform: none; } /* If the deferred landing runtime is missed or delayed, never leave essential marketing content permanently invisible. A healthy runtime sets data-runtime-ready immediately and keeps the normal scroll reveals. */ #cx-landing:not([data-runtime-ready="true"]) .reveal { animation: cx-landing-reveal-failsafe 1ms linear 1500ms forwards; } @keyframes cx-landing-reveal-failsafe { to { opacity: 1; transform: none; } } @media (prefers-reduced-motion: reduce) { #cx-landing .reveal { opacity: 1; transform: none; transition: none; } } /* ========================================================================== Round three — additions ========================================================================== */ /* ---- app window -------------------------------------------------------- The chrome that made the copilot mock read as software rather than as a marketing box: a title bar with real window buttons, a monospace command line, and results that arrive as rows. Used for every product surface on the page so they read as one application. */ #cx-landing .win { background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-lg); overflow: hidden; box-shadow: var(--shadow); } #cx-landing .win-bar { display: flex; align-items: center; gap: 10px; padding: 11px 14px; border-bottom: 1px solid var(--line); background: color-mix(in srgb, var(--raise) 70%, var(--surface)); } #cx-landing .win-dots { display: flex; gap: 6px; flex-shrink: 0; } #cx-landing .win-dots i { width: 11px; height: 11px; border-radius: 50%; display: block; } #cx-landing .win-dots i:nth-child(1) { background: #E4695F; } #cx-landing .win-dots i:nth-child(2) { background: #E5B454; } #cx-landing .win-dots i:nth-child(3) { background: #4FBF87; } #cx-landing .win-title { font-family: ui-monospace, 'SF Mono', Menlo, Consolas, monospace; font-size: 12.5px; color: var(--faint); min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } #cx-landing .win-body { padding: 16px; } #cx-landing .win-prompt { display: flex; gap: 9px; align-items: baseline; font-family: ui-monospace, 'SF Mono', Menlo, Consolas, monospace; font-size: 14px; line-height: 1.5; color: var(--ink); margin-bottom: 14px; } #cx-landing .win-prompt::before { content: '›'; color: var(--accent); font-weight: 700; } #cx-landing .res { display: flex; align-items: center; gap: 12px; padding: 11px 13px; margin-bottom: 8px; background: var(--bg-2); border: 1px solid var(--line); border-radius: var(--r); } #cx-landing .res:last-child { margin-bottom: 0; } #cx-landing .res-ic { width: 26px; height: 26px; flex-shrink: 0; border-radius: 8px; display: grid; place-items: center; background: color-mix(in srgb, var(--good) 18%, transparent); color: var(--good); } #cx-landing .res-ic svg { width: 15px; height: 15px; } #cx-landing .res-t { flex: 1; min-width: 0; font-size: 15px; font-weight: 600; } #cx-landing .res-m { font-size: 12.5px; color: var(--faint); font-family: ui-monospace, Menlo, monospace; flex-shrink: 0; } /* Sparkline bars — a chart, not a decoration: each bar is a real value. */ #cx-landing .spark { display: flex; align-items: flex-end; gap: 3px; height: 26px; flex-shrink: 0; } #cx-landing .spark i { width: 6px; border-radius: 2px; background: var(--accent); display: block; opacity: .55; } #cx-landing .spark i:last-child { opacity: 1; } /* ---- hero mark --------------------------------------------------------- The logo where the film used to be. It carries the brand on its own, at a size the film never let it reach, and it costs 100KB instead of 2MB. */ #cx-landing .hero-mark { position: relative; display: inline-block; } #cx-landing .hero-mark img { height: clamp(64px, 12vw, 132px); width: auto; position: relative; z-index: 1; } #cx-landing .hero-mark::after { content: ''; position: absolute; z-index: 0; inset: -34% 0; background: radial-gradient(closest-side, var(--accent-soft), transparent 72%); pointer-events: none; } @media (prefers-reduced-motion: no-preference) { #cx-landing .hero-mark::after { animation: breathe 7s var(--ease) infinite; } } @keyframes breathe { 0%, 100% { opacity: .75; transform: scale(1); } 50% { opacity: 1; transform: scale(1.06); } } /* ---- carousel ---------------------------------------------------------- One slide at a time at every width — a grid of six feature cards is unreadable on a phone, and a phone is where this gets opened. Native scroll-snap does the work, so it swipes on touch and keeps working with JS off; the dots and arrows are the enhancement. */ #cx-landing .car { position: relative; } #cx-landing .car-track { display: grid; grid-auto-flow: column; grid-auto-columns: 100%; gap: 0; overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none; -ms-overflow-style: none; border-radius: var(--r-lg); } #cx-landing .car-track::-webkit-scrollbar { display: none; } #cx-landing .car-slide { scroll-snap-align: center; scroll-snap-stop: always; min-width: 0; align-self: start; } /* The track takes the height of the slide on show. Sizing every slide to the tallest one left a third of the panel empty on the short ones — the analytics wall is twice the height of a board and a paragraph. */ #cx-landing .car-track { transition: height 320ms var(--ease); } @media (prefers-reduced-motion: reduce) { #cx-landing .car-track { transition: none; } } #cx-landing .car-dots { display: flex; justify-content: center; gap: 9px; margin-top: 22px; } #cx-landing .car-dots button { width: 34px; height: 34px; padding: 0; cursor: pointer; border: 0; background: none; display: grid; place-items: center; border-radius: 50%; } #cx-landing .car-dots button::before { content: ''; width: 8px; height: 8px; border-radius: 50%; background: var(--faint); transition: background-color var(--t) var(--ease), width var(--t) var(--ease); } #cx-landing .car-dots button[aria-current="true"]::before { background: var(--accent); width: 24px; border-radius: 99px; } #cx-landing .car-arrows { display: flex; gap: 8px; } #cx-landing .car-arrows button { width: 44px; height: 44px; cursor: pointer; display: grid; place-items: center; border-radius: 50%; border: 1px solid var(--line); background: var(--surface); color: var(--ink); transition: border-color var(--t) var(--ease), color var(--t) var(--ease); } #cx-landing .car-arrows button:hover { border-color: var(--accent); color: var(--accent); } #cx-landing .car-arrows button:disabled { opacity: .35; cursor: default; } #cx-landing .car-arrows svg { width: 18px; height: 18px; } /* ---- who uses it ------------------------------------------------------- Academies and coaches, each a link to their own page. A row of real destinations, not a logo wall and emphatically not a scrolling ticker. */ #cx-landing .who { display: grid; grid-template-columns: 1fr; gap: 14px; } @media (min-width: 640px) { #cx-landing .who { grid-template-columns: 1fr 1fr; } } @media (min-width: 1000px) { #cx-landing .who { grid-template-columns: repeat(3, 1fr); } } #cx-landing .who a { display: flex; align-items: center; gap: 14px; text-decoration: none; padding: 16px 18px; background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-lg); transition: border-color var(--t) var(--ease), background-color var(--t) var(--ease); } #cx-landing .who a:hover { border-color: var(--accent); background: var(--raise); } #cx-landing .who .crest { width: 46px; height: 46px; flex-shrink: 0; border-radius: 13px; display: grid; place-items: center; font-weight: 800; font-size: 17px; background: var(--accent-soft); color: var(--accent); } #cx-landing .who .who-n { font-weight: 700; } #cx-landing .who .who-m { font-size: 13.5px; color: var(--faint); } /* ========================================================================== Round four — full width, motion, and the directory marquee ========================================================================== */ /* Full-bleed band inside a centred page. */ #cx-landing .bleed { width: 100%; } #cx-landing .bleed-in { max-width: none; padding-left: var(--pad); padding-right: var(--pad); } /* ---- directory marquee ------------------------------------------------- Academies and coaches drifting sideways. This is NOT the feature ticker that was rejected: those were words scrolling past to look busy. These are real destinations with a face on them, moving slowly enough to read, and the row stops the moment you point at it. */ #cx-landing .marq { position: relative; overflow: hidden; padding: 4px 0; } #cx-landing .marq::before, #cx-landing .marq::after { content: ''; position: absolute; top: 0; bottom: 0; width: clamp(40px, 8vw, 140px); z-index: 2; pointer-events: none; } #cx-landing .marq::before { left: 0; background: linear-gradient(90deg, var(--bg), transparent); } #cx-landing .marq::after { right: 0; background: linear-gradient(270deg, var(--bg), transparent); } #cx-landing .marq-track { display: flex; gap: 16px; width: max-content; } @media (prefers-reduced-motion: no-preference) { #cx-landing .marq-track { animation: drift var(--marq-dur, 64s) linear infinite; } #cx-landing .marq:hover .marq-track, #cx-landing .marq:focus-within .marq-track { animation-play-state: paused; } } @keyframes drift { from { transform: translateX(0); } to { transform: translateX(-50%); } } /* Bigger and uniform: a fixed footprint regardless of how long a name or meta line runs, so the row reads as a rank of equal cards rather than a jumble of different widths. Glass rather than a filled surface — it drifts over the section background instead of sitting on top of it as a box. */ #cx-landing .org { display: flex; align-items: center; gap: 18px; text-decoration: none; flex-shrink: 0; width: 340px; height: 128px; padding: 20px 24px; background: color-mix(in srgb, var(--surface) 46%, transparent); backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px); border: 1px solid var(--line); border-radius: var(--r-lg); transition: border-color var(--t) var(--ease), background-color var(--t) var(--ease), transform var(--t) var(--ease); } #cx-landing .org:hover, #cx-landing .org:focus-visible { border-color: var(--accent); background: color-mix(in srgb, var(--surface) 66%, transparent); transform: translateY(-3px); } #cx-landing .org-badge { position: relative; overflow: hidden; width: 64px; height: 64px; flex-shrink: 0; border-radius: 16px; display: grid; place-items: center; background: var(--accent-soft); } #cx-landing .org-badge img, #cx-landing .org-badge svg { width: 100%; height: 100%; display: block; } /* The logo itself moves: a diagonal sheen sweeps across the crest on a loop, staggered per card so the row never sweeps in unison. */ #cx-landing .org-badge::after { content: ''; position: absolute; inset: -60% -20%; background: linear-gradient(115deg, transparent 40%, color-mix(in srgb, var(--accent-2) 65%, white) 50%, transparent 60%); transform: translateX(-120%); mix-blend-mode: overlay; } @media (prefers-reduced-motion: no-preference) { #cx-landing .org-badge::after { animation: sheen 5.5s ease-in-out infinite; } #cx-landing .org:nth-of-type(3n+1) .org-badge::after { animation-delay: 0s; } #cx-landing .org:nth-of-type(3n+2) .org-badge::after { animation-delay: 1.6s; } #cx-landing .org:nth-of-type(3n) .org-badge::after { animation-delay: 3.2s; } } @keyframes sheen { 0%, 55% { transform: translateX(-120%); } 85%, 100% { transform: translateX(120%); } } #cx-landing .org > span:last-child { min-width: 0; } #cx-landing .org-n { display: -webkit-box; -webkit-line-clamp: 1; -webkit-box-orient: vertical; overflow: hidden; font-weight: 700; font-size: 17px; line-height: 1.3; } #cx-landing .org-m { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; font-size: 13.5px; color: var(--faint); margin-top: 4px; line-height: 1.4; } /* ---- typing + staged results ------------------------------------------- */ #cx-landing .res.staged { opacity: 0; transform: translateY(8px); transition: opacity 320ms var(--ease), transform 320ms var(--ease); } #cx-landing .res.staged.in { opacity: 1; transform: none; } @media (prefers-reduced-motion: reduce) { #cx-landing .res.staged { opacity: 1; transform: none; } } /* ---- carousel autoplay progress ---------------------------------------- */ #cx-landing .car-dots button { position: relative; } #cx-landing .car-dots button[aria-current="true"]::after { content: ''; position: absolute; left: 5px; right: 5px; bottom: 4px; height: 2px; background: color-mix(in srgb, var(--accent) 45%, transparent); border-radius: 2px; transform-origin: left; transform: scaleX(0); } @media (prefers-reduced-motion: no-preference) { #cx-landing .car:not(.paused) .car-dots button[aria-current="true"]::after { animation: fill var(--car-dur, 20s) linear forwards; } } @keyframes fill { to { transform: scaleX(1); } } /* ========================================================================== Round five — video mark, analytics wall, hover reviews, tier pricing ========================================================================== */ /* ---- the film as the mark ---------------------------------------------- The reveal is shot on black, so `screen` drops its background out and only the light of the mark survives. That is what lets the film sit in the page instead of sitting in a box on top of it. */ #cx-landing .mark-film { position: relative; width: min(560px, 100%); aspect-ratio: 848 / 368; margin-left: calc(var(--film-bleed, 6%) * -1); margin-bottom: 6px; } /* The source clip is now pre-cropped to this exact banner shape (supplied already trimmed), so the container just matches it — no bias needed to crop empty headroom out of a taller source the way the old 16:9 file needed. On a phone the film is dropped entirely rather than shrunk: the headline and the ask window are the point, and the video was still a scroll's worth of height before either showed. The nav logo carries the film on phones instead — see .logo-film below. */ @media (max-width: 900px) { #cx-landing .mark-film { display: none; } } #cx-landing .mark-film video { width: 100%; height: 100%; object-fit: cover; object-position: 50% 50%; display: block; mix-blend-mode: screen; /* The film is not shot on pure black — it has a faint lit backdrop, which `screen` leaves behind as a visible grey rectangle. Lifting the contrast pushes that backdrop down to black, and the mask feathers the frame edges so the mark sits in the page instead of in a box. */ filter: contrast(1.22) brightness(1.06); -webkit-mask-image: radial-gradient(ellipse 76% 72% at 42% 50%, #000 55%, transparent 100%); mask-image: radial-gradient(ellipse 76% 72% at 42% 50%, #000 55%, transparent 100%); } #cx-landing[data-theme="light"] .mark-film video { /* On paper `screen` would wash the mark out entirely, so the light theme shows the still wordmark instead — the film has nothing to sit on. */ display: none; } #cx-landing .mark-film .mark-still { display: none; } #cx-landing[data-theme="light"] .mark-film { aspect-ratio: auto; margin-left: 0; } #cx-landing[data-theme="light"] .mark-film .mark-still { display: block; height: clamp(56px, 8vw, 104px); width: auto; } /* ---- section head: statement left, note right -------------------------- */ #cx-landing .head-split { display: grid; grid-template-columns: 1fr; gap: 16px; align-items: end; margin-bottom: 26px; } @media (min-width: 900px) { #cx-landing .head-split { grid-template-columns: 1.15fr .85fr; gap: 48px; } } #cx-landing .head-split .note { color: var(--muted); font-size: 16px; max-width: 52ch; } /* ---- analytics wall ----------------------------------------------------- */ #cx-landing .wall { display: grid; grid-template-columns: 1fr; gap: 14px; } @media (min-width: 700px) { #cx-landing .wall { grid-template-columns: 1fr 1fr; } } @media (min-width: 1120px) { #cx-landing .wall { grid-template-columns: repeat(3, 1fr); } } #cx-landing .panel { background: var(--bg-2); border: 1px solid var(--line); border-radius: var(--r); padding: 14px 16px; } #cx-landing .panel h4 { margin: 0 0 2px; font-size: 12px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--faint); } #cx-landing .panel .big { font-size: 26px; font-weight: 800; letter-spacing: -.02em; } #cx-landing .panel svg { width: 100%; height: auto; display: block; margin-top: 8px; } /* Card sizing, transparency and the moving crest now live with the rest of the .org rules above — the flip-to-review treatment that used to live here was removed; the card shows only its face. */ /* ---- analytics slide: a chart draws itself in, once, per visit ---------- */ #cx-landing .panel { padding: 12px 14px; } #cx-landing .panel svg { width: 100%; height: auto; display: block; margin-top: 6px; } #cx-landing .draw { stroke-dasharray: 900; stroke-dashoffset: 900; transition: stroke-dashoffset 1100ms var(--ease) 200ms; } #cx-landing .car-slide.is-active .draw { stroke-dashoffset: 0; } @media (prefers-reduced-motion: reduce) { #cx-landing .draw { stroke-dashoffset: 0; transition: none; } } /* ---- tier cards --------------------------------------------------------- */ #cx-landing .tiers { display: grid; grid-template-columns: 1fr; gap: 16px; } @media (min-width: 780px) { #cx-landing .tiers { grid-template-columns: repeat(3, 1fr); } } #cx-landing .tier { position: relative; display: flex; flex-direction: column; gap: 14px; } #cx-landing .tier.popular { border-color: var(--accent); } #cx-landing .tier-flag { position: absolute; top: -11px; left: 22px; padding: 3px 12px; border-radius: var(--r-pill); background: var(--accent); color: var(--on-accent); font-size: 11.5px; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; } #cx-landing .tier-rate { display: flex; align-items: baseline; gap: 7px; } #cx-landing .tier-rate b { font-size: 38px; font-weight: 800; letter-spacing: -.03em; line-height: 1; } #cx-landing .tier-total { font-size: 14.5px; color: var(--muted); } #cx-landing .tier ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 9px; } #cx-landing .tier li { display: flex; gap: 9px; align-items: flex-start; font-size: 14.5px; color: var(--muted); } #cx-landing .tier li svg { width: 16px; height: 16px; flex-shrink: 0; margin-top: 3px; color: var(--accent); } #cx-landing .cycle { display: inline-flex; padding: 4px; gap: 4px; border: 1px solid var(--line); border-radius: var(--r-pill); } #cx-landing .cycle button { cursor: pointer; font: inherit; font-size: 14px; font-weight: 700; min-height: 36px; padding: 6px 16px; border: 0; border-radius: var(--r-pill); background: transparent; color: var(--muted); transition: background-color var(--t) var(--ease), color var(--t) var(--ease); } #cx-landing .cycle button[aria-pressed="true"] { background: var(--accent); color: var(--on-accent); } /* ---- per-slide entrance -------------------------------------------------- Every slide gets some life when it becomes the active one: its rows and tags rise in, staggered, rather than simply sitting there while only the board plays. Re-triggers every time the slide comes back around, because a demonstration that only plays once on first load is not much of one. */ #cx-landing .car-slide .row, #cx-landing .car-slide > .win .cluster > .tag { opacity: 0; transform: translateY(7px); transition: opacity 380ms var(--ease), transform 380ms var(--ease); } #cx-landing .car-slide.is-active .row, #cx-landing .car-slide.is-active > .win .cluster > .tag { opacity: 1; transform: none; } #cx-landing .car-slide .row:nth-of-type(1) { transition-delay: 80ms; } #cx-landing .car-slide .row:nth-of-type(2) { transition-delay: 200ms; } #cx-landing .car-slide .row:nth-of-type(3) { transition-delay: 320ms; } #cx-landing .car-slide .row:nth-of-type(4) { transition-delay: 440ms; } #cx-landing .car-slide .cluster > .tag:nth-of-type(1) { transition-delay: 260ms; } #cx-landing .car-slide .cluster > .tag:nth-of-type(2) { transition-delay: 360ms; } #cx-landing .car-slide .cluster > .tag:nth-of-type(3) { transition-delay: 460ms; } @media (prefers-reduced-motion: reduce) { #cx-landing .car-slide .row, #cx-landing .car-slide > .win .cluster > .tag { opacity: 1; transform: none; transition: none; } } /* ========================================================================== Round six — the desk itself, not a slideshow of it ========================================================================== */ /* One frame, tabs at the top AND a sidebar on the left — both control the same content, because the ask was "make sure both work", not "pick one". */ #cx-landing .product-shell { overflow: hidden; } #cx-landing .product-bar { flex-wrap: wrap; gap: 10px 18px; } #cx-landing .tabs { display: flex; gap: 4px; margin-left: auto; } #cx-landing .tab { cursor: pointer; font: inherit; font-size: 13px; font-weight: 600; border: 0; border-radius: 8px; padding: 7px 13px; background: transparent; color: var(--faint); transition: color var(--t) var(--ease), background-color var(--t) var(--ease); } #cx-landing .tab:hover { color: var(--ink); } #cx-landing .tab.active { color: var(--on-accent); background: var(--accent); } #cx-landing .product-body { display: grid; grid-template-columns: 200px 1fr; min-height: 420px; } @media (max-width: 760px) { #cx-landing .product-body { grid-template-columns: 1fr; } } /* Both control panels are real and both work — but on a phone the top tabs and the sidebar-turned-row show the exact same four words twice in a row. The sidebar survives (it is the one place any of these six items would normally live); the tabs step aside rather than repeating it. */ @media (max-width: 760px) { #cx-landing .product-bar .tabs { display: none; } } #cx-landing .side-nav { border-right: 1px solid var(--line); padding: 16px 12px; display: flex; flex-direction: column; gap: 2px; } @media (max-width: 760px) { #cx-landing .side-nav { border-right: 0; border-bottom: 1px solid var(--line); flex-direction: row; overflow-x: auto; padding: 10px 12px; } } #cx-landing .side-link { display: block; padding: 10px 12px; border-radius: 9px; font-size: 14px; font-weight: 600; color: var(--faint); text-decoration: none; white-space: nowrap; transition: color var(--t) var(--ease), background-color var(--t) var(--ease); } #cx-landing .side-link:hover { color: var(--ink); background: var(--bg-2); } #cx-landing .side-link.active { color: var(--accent); background: var(--accent-soft); } #cx-landing .dash-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 16px; margin-bottom: 18px; } #cx-landing .dash-head h3 { font-size: 21px; margin-bottom: 4px; } #cx-landing .dash-head p { margin: 0; color: var(--muted); font-size: 14px; } #cx-landing .dash-grid { display: grid; grid-template-columns: 1fr; gap: 14px; } @media (min-width: 620px) { #cx-landing .dash-grid { grid-template-columns: 1.15fr .85fr; } } #cx-landing .pane h4 { margin: 0 0 12px; font-size: 12px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--faint); } /* An SVG with only a viewBox (no width/height attributes) sizes itself to fill its containing block — the reports pane is wide, so the radar and rating charts were blowing up to fill it edge to edge. Cap them the same as they were sized inside the carousel's narrower column. */ #cx-landing .pane svg { max-width: 210px; height: auto; display: block; margin: 0 auto; overflow: visible; } #cx-landing .airow { margin-top: 16px; display: flex; align-items: center; gap: 12px; padding: 13px 15px; border-radius: var(--r); border: 1px solid var(--accent); background: var(--accent-soft); } #cx-landing .airow b { display: block; font-size: 13.5px; } #cx-landing .airow small { color: var(--muted); font-size: 12.5px; } #cx-landing .spark-ic { flex-shrink: 0; width: 30px; height: 30px; border-radius: 9px; display: grid; place-items: center; background: var(--accent); color: var(--on-accent); font-size: 14px; } /* ---- pricing: four cards, the academy included rather than bolted on ---- */ #cx-landing .tiers { grid-template-columns: 1fr; } @media (min-width: 700px) { #cx-landing .tiers { grid-template-columns: repeat(2, 1fr); } } @media (min-width: 1180px) { #cx-landing .tiers { grid-template-columns: repeat(4, 1fr); } } #cx-landing .tier-academy { border-color: color-mix(in srgb, var(--accent) 45%, var(--line)); } #cx-landing .tier-academy .tier-rate small { display: block; font-size: 13.5px; color: var(--muted); font-weight: 600; margin-top: 4px; } /* ========================================================================== Page-local overrides (formerly a