/* ── Root token surface. Everything in this family is scoped to .cf ─────── */ .cf { /* Canvas + elevation ladder. White first; the alternate bands are a cool off-white so long pages still read in sections without a dark band. */ --cf-canvas: #FFFFFF; --cf-canvas-2: #F5F8FC; --cf-surface: #EEF3F9; --cf-elevated: #FFFFFF; --cf-raised: #FFFFFF; --cf-glass: rgba(255,255,255,0.86); --cf-glass-2: rgba(255,255,255,0.97); /* The faint fill a control or chip sits on. Replaced the dark build's rgba(255,255,255,0.03) washes, which are invisible on white. */ --cf-tint: rgba(11,40,80,0.035); --cf-tint-2: rgba(11,40,80,0.06); /* Hairlines. */ --cf-line: rgba(11,40,80,0.10); --cf-line-2: rgba(11,40,80,0.17); --cf-line-live: rgba(11,103,196,0.45); /* Type colours: see the contrast ledger above before changing any */ --cf-ink: #0B1B33; --cf-text: #2A3A52; --cf-muted: #52627A; --cf-faint: #8A97A8; /* decorative only, NEVER carries copy */ /* Accent scale */ --cf-accent: #0B67C4; --cf-accent-2: #0A5BB0; --cf-accent-deep: #08417F; --cf-accent-ink: #0A5BB0; --cf-accent-soft: rgba(11,103,196,0.08); --cf-accent-glow: rgba(11,103,196,0.22); /* Amber: a single highlighted datum. */ --cf-amber: #D9650F; --cf-amber-ink: #A3470A; --cf-amber-soft: rgba(217,101,15,0.10); --cf-up: #0E8A5F; --cf-down: #C23B3B; --cf-grad-text: linear-gradient(96deg, #08417F 0%, #0B67C4 55%, #0693E3 100%); --cf-grad-fill: linear-gradient(135deg, #0B67C4 0%, #0A55A8 100%); --cf-grad-edge: linear-gradient(90deg, transparent, var(--cf-line-2), transparent); --cf-grad-veil: linear-gradient(180deg, rgba(255,255,255,0) 0%, rgba(255,255,255,0.6) 55%, var(--cf-canvas) 100%); --cf-r-1: 2px; --cf-r-2: 6px; --cf-r-3: 10px; --cf-r-pill: 999px; /* Soft neutral shadows: on white, depth comes from shade, not glow. */ --cf-shadow-1: 0 1px 2px rgba(11,27,51,0.05), 0 6px 18px -12px rgba(11,27,51,0.18); --cf-shadow-2: 0 1px 2px rgba(11,27,51,0.06), 0 18px 40px -22px rgba(11,27,51,0.28); --cf-shadow-3: 0 30px 70px -30px rgba(11,27,51,0.35); --cf-glow-accent: 0 0 0 1px var(--cf-line-live), 0 8px 24px -12px var(--cf-accent-glow); --cf-glow-amber: 0 0 0 1px rgba(217,101,15,0.42), 0 8px 24px -12px rgba(217,101,15,0.25); --cf-inset-top: inset 0 1px 0 rgba(255,255,255,0.18); /* Z-layers — one ladder, so nothing is ever guessed at a call site */ --cf-z-base: 1; --cf-z-raise: 5; --cf-z-sticky: 60; --cf-z-header: 70; --cf-z-menu: 75; --cf-z-drawer: 80; --cf-z-progress: 90; /* ONE primary easing curve. Menus get a softer landing (a large panel on a fast curve reads as a snap), progress gets linear (an eased read-progress indicator lags the scroll thumb and reads as a bug). */ --cf-ease: cubic-bezier(.22,1,.36,1); --cf-ease-menu: cubic-bezier(.16,1,.3,1); --cf-ease-in: cubic-bezier(.55,0,.65,1); /* Duration scale */ --cf-d-1: 140ms; /* colour / opacity nudge */ --cf-d-2: 260ms; /* control state change */ --cf-d-3: 520ms; /* element entrance */ --cf-d-4: 900ms; /* set-piece / mask wipe */ --cf-d-5: 1400ms; /* count-up, bar draw */ /* Fluid type scale */ --cf-t-display: clamp(2.7rem, 6vw, 5rem); --cf-t-h1: clamp(2.3rem, 4.6vw, 3.9rem); --cf-t-h2: clamp(1.85rem, 3.1vw, 2.85rem); --cf-t-h3: clamp(1.15rem, 1.6vw, 1.45rem); --cf-t-lede: clamp(1.02rem, 1.35vw, 1.2rem); --cf-t-body: 1rem; --cf-t-small: 0.875rem; --cf-t-micro: 0.75rem; /* Measure + rhythm */ --cf-max: 1240px; --cf-max-narrow: 880px; --cf-max-wide: 1440px; --cf-pad-x: clamp(1.15rem, 3vw, 2rem); --cf-section-y: clamp(4.5rem, 9vw, 8rem); --cf-gap: clamp(1rem, 1.8vw, 1.6rem); --cf-header-h: 76px; --cf-header-h-stuck: 62px; /* Families. Space Grotesk is the display face — technical, sharp, slightly mechanical counters; Inter carries copy; JetBrains Mono carries every NUMBER, label and eyebrow, which is what makes the page read as an instrument rather than a brochure. */ --cf-font-display: 'Space Grotesk', 'Inter', system-ui, -apple-system, sans-serif; --cf-font-body: 'Inter', system-ui, -apple-system, 'Segoe UI', sans-serif; --cf-font-mono: 'JetBrains Mono', ui-monospace, SFMono-Regular, Menlo, monospace; /* ── Legacy aliases (pre-redesign page templates read these) ─────────── */ --cf-primary: var(--cf-accent-2); --cf-bright: var(--cf-accent); --cf-navy: var(--cf-surface); --cf-bg: var(--cf-canvas); --cf-fg: var(--cf-text); --cf-radius: var(--cf-r-1); /* Drive the renderer's global hs-* properties from the new palette. */ --tenant-primary: var(--cf-canvas); --tenant-accent: var(--cf-accent); --tenant-fg: var(--cf-text); } /* ── Base ───────────────────────────────────────────────────────────────── */ /* overflow-x must be 'clip', not 'hidden'. 'hidden' on one axis forces the other to compute to 'auto', which makes .cf a scroll container — and then the sticky header sticks to .cf's scrollport, which never scrolls, so the bar scrolls away with the page. 'hidden' stays first for Safari < 16. */ .cf { background: var(--cf-canvas); color: var(--cf-text); font-family: var(--cf-font-body); font-size: var(--cf-t-body); line-height: 1.7; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; overflow-x: hidden; overflow-x: clip; scroll-behavior: smooth; font-variant-numeric: tabular-nums; } /* Neutralize the platform measure container. * * Every cf template roots at

, and * app/globals.css gives .tenant-prose a max-width of 72ch plus margin auto and * 2rem/1.25rem padding. That is right for a CMS blog body and catastrophic for * a full-bleed marketing page: it squeezed the entire site into a ~725px * column on a 1440px viewport, clipping the last nav item mid-word, while * every section still looked internally correct. Nothing errors and no test * catches it — only a screenshot does. * * Kept at (0,2,0) rather than relying on .cf (0,1,0) winning on source order. * CF_CSS is injected as a style element after the globals stylesheet today, so * order alone would work, but that is an accident of injection order and not * something this file should depend on. * * The .tenant-prose DESCENDANT rules are deliberately left alone — they are * all wrapped in :where() at (0,1,0), so the cf element rules out-specify them * normally. Only the container itself is the problem. * * NOTE: this file is one big template literal. Never use a backtick in these * comments — it terminates the string and every cf page 500s. */ .cf.tenant-prose { max-width: none; margin: 0; padding: 0; } .cf *, .cf *::before, .cf *::after { box-sizing: border-box; } .cf img, .cf svg, .cf canvas, .cf video { max-width: 100%; display: block; } .cf :where(p) { margin: 0; } /* Anything hash-linked clears the sticky bar instead of hiding under it. */ .cf [id] { scroll-margin-top: calc(var(--cf-header-h) + 16px); } .cf ::selection { background: var(--cf-accent); color: #fff; } .cf h1, .cf h2, .cf h3, .cf h4, .cf h5, .cf h6 { font-family: var(--cf-font-display); color: var(--cf-ink); font-weight: 700; letter-spacing: -0.025em; line-height: 1.08; /* Ragged last words are the single most common "looks unfinished" tell on a fluid headline. Balance is cheap and universally supported now. */ text-wrap: balance; } /* Zero-specificity margin reset: :where() adds no specificity, so a single-class component rule (.cf-post-title { margin-top: 1.1rem }) still wins. Written as ".cf h1" the reset scored 0,1,1 and won every such tie, silently flattening the authored margin. */ .cf :where(h1, h2, h3, h4, h5, h6) { margin: 0; } .cf h1 { font-size: var(--cf-t-h1); } .cf h2 { font-size: var(--cf-t-h2); } .cf h3 { font-size: var(--cf-t-h3); line-height: 1.25; letter-spacing: -0.015em; } .cf p { text-wrap: pretty; } /* One focus ring for the whole family — a keyboard visitor on a dark site with no ring is simply lost. */ .cf :focus-visible { outline: 2px solid var(--cf-accent-ink); outline-offset: 3px; border-radius: var(--cf-r-2); } /* Unclassed links inherit; every styled link declares its own colour. */ .cf a:not([class]) { color: var(--cf-accent-ink); text-decoration: none; } .cf a:not([class]):hover { text-decoration: underline; } /* Skip link — first focusable thing on the page. */ .cf-skip { position: absolute; left: 1rem; top: -4rem; z-index: var(--cf-z-progress); background: var(--cf-accent); color: #fff; font-family: var(--cf-font-mono); font-size: var(--cf-t-small); font-weight: 700; padding: 0.7rem 1.15rem; border-radius: 0 0 var(--cf-r-3) var(--cf-r-3); text-decoration: none; transition: top var(--cf-d-2) var(--cf-ease); } .cf-skip:focus-visible { top: 0; } /* ══ 1. Scroll reveal ═════════════════════════════════════════════════════ The resting (hidden) state is gated on .cf-motion-ready — see the note at the top of this file. --cf-d is the per-element stagger, written by the controller as BOTH transition-delay and a custom property, because a CSS *animation* cannot read transition-delay: any keyframed detail nested inside a revealed element reads --cf-d and stays in step with its own container instead of firing with the first card in the group. */ .cf.cf-motion-ready .cf-reveal { opacity: 0; transform: translateY(22px); } .cf .cf-reveal.is-visible { opacity: 1; transform: none; transition: opacity var(--cf-d-3) var(--cf-ease), transform var(--cf-d-3) var(--cf-ease); } /* Discrete objects (cards, tiles, panels) also rise out of a 1.5% underscale, which is what separates "a block faded in" from "a card was placed". The scale is deliberately tiny — at 0.95 a grid of nine tiles reads as a pitch deck rather than a trading desk. ':not(.is-visible)' is load-bearing: without it these selectors outrank '.cf .cf-reveal.is-visible' and the cards never reach their resting transform. */ .cf.cf-motion-ready .cf-card.cf-reveal:not(.is-visible), .cf.cf-motion-ready .cf-panel.cf-reveal:not(.is-visible), .cf.cf-motion-ready .cf-stat.cf-reveal:not(.is-visible), .cf.cf-motion-ready .cf-term.cf-reveal:not(.is-visible) { transform: translateY(28px) scale(0.985); } .cf .cf-card.cf-reveal.is-visible, .cf .cf-panel.cf-reveal.is-visible, .cf .cf-stat.cf-reveal.is-visible, .cf .cf-term.cf-reveal.is-visible { transition: opacity 0.72s var(--cf-ease), transform 0.72s var(--cf-ease); } /* Directional variants, for a two-column band where both halves arriving from below reads as a single slab dropping in. ':not(.is-visible)' is load-bearing here too: these come AFTER '.cf .cf-reveal.is-visible' at the same specificity, so without it they win and the element stays 26px off (or at 94% scale) after it is revealed. */ .cf.cf-motion-ready .cf-reveal--left:not(.is-visible) { transform: translateX(-26px); } .cf.cf-motion-ready .cf-reveal--right:not(.is-visible) { transform: translateX(26px); } .cf.cf-motion-ready .cf-reveal--scale:not(.is-visible) { transform: scale(0.94); } .cf.cf-motion-ready .cf-reveal--blur { filter: blur(10px); } .cf .cf-reveal--blur.is-visible { filter: none; transition: opacity var(--cf-d-3) var(--cf-ease), transform var(--cf-d-3) var(--cf-ease), filter var(--cf-d-4) var(--cf-ease); } /* Mask wipe — the "set-piece" reveal. Used on a hero image, a chart, a table. Backwards fill so it holds the from-state through its delay. */ .cf .cf-reveal.is-visible .cf-clip, .cf .cf-clip.is-visible { animation: cf-clip-up var(--cf-d-4) var(--cf-ease) backwards; animation-delay: var(--cf-d, 0ms); } @keyframes cf-clip-up { from { clip-path: inset(100% 0 0 0); transform: translateY(14px); } to { clip-path: inset(0 0 0 0); transform: none; } } @keyframes cf-clip-in { from { clip-path: inset(0 100% 0 0); } to { clip-path: inset(0 0 0 0); } } /* ══ 2. Hero entrance — TRANSFORM ONLY ════════════════════════════════════ No opacity. If JS never runs this element has already animated (CSS-only, 'both' fill) and if animations are off it is simply in place. */ .cf-enter { transform: translateY(24px); animation: cf-enter-up 0.9s var(--cf-ease) both; animation-delay: var(--cf-enter-d, 0ms); } @keyframes cf-enter-up { to { transform: none; } } /* ══ 3. Parallax hooks ════════════════════════════════════════════════════ The controller only ever writes the custom properties, so a layer that never scrolls into view (or a page where JS failed) simply sits at 0. */ [data-cf-parallax] { transform: translate3d(0, var(--cf-parallax-y, 0px), 0); will-change: transform; } /* Pointer parallax (fine pointers only, damped in JS). Composed with the scroll offset so a layer can carry both. */ [data-cf-pointer-depth] { transform: translate3d(var(--cf-px, 0px), calc(var(--cf-py, 0px) + var(--cf-parallax-y, 0px)), 0); transition: transform 0.5s cubic-bezier(.16,1,.3,1); } /* ══ 4. Ambient continuous motion ═════════════════════════════════════════ */ /* Slow drift for gradient orbs / glow fields behind a hero. */ @keyframes cf-drift { 0% { transform: translate3d(0,0,0) scale(1); } 50% { transform: translate3d(2.5%, -2%, 0) scale(1.06); } 100% { transform: translate3d(0,0,0) scale(1); } } .cf-drift { animation: cf-drift 22s ease-in-out infinite; will-change: transform; } .cf-drift--slow { animation-duration: 34s; } .cf-drift--rev { animation-direction: reverse; } /* Ken Burns — paired with the crossfade slideshow controller. Alternating, so there is never a jump back to the start. */ @keyframes cf-kenburns { from { transform: scale(1.02) translate3d(0,0,0); } to { transform: scale(1.12) translate3d(-1.2%, -1%, 0); } } .cf-slides { position: absolute; inset: 0; overflow: hidden; } .cf-slide { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: 0; transition: opacity 1.6s var(--cf-ease); } /* The FIRST slide is visible with no class, so a JS-less visitor still gets a hero photograph rather than a black box. */ .cf-slide:first-child { opacity: 1; } .cf-slide.is-active { opacity: 1; animation: cf-kenburns 16s ease-out both; } .cf-slides.is-armed .cf-slide:first-child:not(.is-active) { opacity: 0; } /* Glow pulse — a live/priced indicator. */ @keyframes cf-glow-pulse { 0%, 100% { opacity: 0.45; transform: scale(1); } 50% { opacity: 1; transform: scale(1.35); } } .cf-live__dot { animation: cf-glow-pulse 2.4s ease-in-out infinite; } /* Node pulse — the ambient node-graph's static fallback and any SVG node. */ @keyframes cf-node-pulse { 0%, 100% { opacity: 0.25; } 50% { opacity: 0.9; } } /* Scanline — the terminal motif. A single 1px band travelling a panel. */ @keyframes cf-scan { from { transform: translateY(-100%); } to { transform: translateY(2400%); } } /* Marquee / tape — duplicate the track's children in markup and translate by exactly -50% so the loop is seamless. */ @keyframes cf-marquee { from { transform: translateX(0); } to { transform: translateX(-50%); } } .cf-marquee { overflow: hidden; position: relative; } .cf-marquee__track { display: flex; width: max-content; animation: cf-marquee 42s linear infinite; } .cf-marquee:hover .cf-marquee__track { animation-play-state: paused; } .cf-marquee--fast .cf-marquee__track { animation-duration: 24s; } .cf-marquee--rev .cf-marquee__track { animation-direction: reverse; } /* Edge fade so items enter and leave rather than being chopped by the frame. */ .cf-marquee::before, .cf-marquee::after { content: ""; position: absolute; top: 0; bottom: 0; width: clamp(2rem, 8vw, 7rem); z-index: 2; pointer-events: none; } .cf-marquee::before { left: 0; background: linear-gradient(90deg, var(--cf-canvas), transparent); } .cf-marquee::after { right: 0; background: linear-gradient(270deg, var(--cf-canvas), transparent); } /* Sheen — swept highlight across a primary button on hover, and across a card edge on reveal. */ @keyframes cf-sheen { from { transform: translateX(-160%) skewX(-18deg); } to { transform: translateX(260%) skewX(-18deg); } } /* Shimmer — a moving gradient behind text or a loading bar. */ @keyframes cf-shimmer { from { background-position: -180% 0; } to { background-position: 180% 0; } } .cf-shimmer { background-image: linear-gradient(100deg, transparent 20%, rgba(127,210,255,0.55) 50%, transparent 80%); background-size: 180% 100%; animation: cf-shimmer 5.5s linear infinite; } /* Count-in — the stat's own settle, separate from the numeric count-up. */ @keyframes cf-count-in { from { transform: translateY(6px) scale(0.96); opacity: 0; } to { transform: none; opacity: 1; } } .cf .cf-reveal.is-visible .cf-stat__value { animation: cf-count-in 0.6s var(--cf-ease) both; animation-delay: calc(var(--cf-d, 0ms) + 120ms); } /* Bar draw — benchmark / allocation bars. transform:scaleX so it composites instead of relaying out, and the delay INHERITS the row's stagger. */ .cf .cf-bar__fill { transform: scaleX(0); transform-origin: 0 50%; transition: transform var(--cf-d-5) var(--cf-ease); transition-delay: var(--cf-d, 0ms); } .cf .cf-reveal.is-visible .cf-bar__fill, .cf .cf-bar.is-visible .cf-bar__fill { transform: scaleX(var(--cf-bar, 1)); } /* Eyebrow rule — draws itself out from the label on reveal. */ @keyframes cf-rule-draw { from { width: 0; } to { width: var(--cf-rule-w, 34px); } } .cf .cf-reveal.is-visible .cf-eyebrow::after, .cf .cf-eyebrow.is-visible::after { animation: cf-rule-draw 0.7s var(--cf-ease) both; animation-delay: calc(var(--cf-d, 0ms) + 140ms); } /* Menu row settle — the mega-menu's rows arrive behind the panel, which is what makes it feel assembled rather than pasted. */ @keyframes cf-menu-row { from { opacity: 0; transform: translateY(-7px); } to { opacity: 1; transform: none; } } /* ══ 5. Read-progress hairline ════════════════════════════════════════════ scaleX off a custom property: one composited transform per frame, never a width relayout. Linear, short — an eased catch-up lags the scroll thumb. */ .cf .cf-progress { position: fixed; top: 0; left: 0; right: 0; height: 2px; z-index: var(--cf-z-progress); pointer-events: none; background: linear-gradient(90deg, var(--cf-accent-ink), var(--cf-accent) 55%, var(--cf-amber)); transform: scaleX(var(--cf-progress, 0)); transform-origin: 0 50%; transition: transform 0.1s linear; } /* ══ 6. Ambient node field (canvas) ═══════════════════════════════════════ The canvas is painted by a family EXTENSION, not by the shared engine (see README §"What is deliberately not shared"). The element carries a CSS gradient underneath it so the area is never an empty black rectangle when JS is off, when the observer has it paused, or under reduced motion. */ .cf-nodefield { position: absolute; inset: 0; width: 100%; height: 100%; z-index: 0; pointer-events: none; opacity: 0.9; /* Fades in once the controller has drawn a frame, so there is no pop. */ transition: opacity 1.2s var(--cf-ease); } .cf-nodefield__wrap { position: absolute; inset: 0; z-index: 0; pointer-events: none; overflow: hidden; background: radial-gradient(ellipse 52% 60% at 18% 12%, rgba(6,147,227,0.20), transparent 62%), radial-gradient(ellipse 44% 52% at 84% 78%, rgba(49,130,206,0.16), transparent 66%); } .cf-nodefield__wrap::after { /* Grid substrate. Static, cheap, and it gives the drifting nodes something to read against — a node field over flat black looks like dust. */ content: ""; position: absolute; inset: -1px; background-image: linear-gradient(rgba(125,171,224,0.055) 1px, transparent 1px), linear-gradient(90deg, rgba(125,171,224,0.055) 1px, transparent 1px); background-size: 72px 72px; mask-image: radial-gradient(ellipse 80% 70% at 50% 40%, #000 30%, transparent 78%); -webkit-mask-image: radial-gradient(ellipse 80% 70% at 50% 40%, #000 30%, transparent 78%); } /* ══ 7. Phones: shorter travel, no cascade ════════════════════════════════ A 90ms stagger that reads as choreography on a desktop reads as lag on a phone. Zeroing --cf-d kills every derived animation-delay in one line. */ @media (max-width: 768px) { /* ':not(.is-visible)' on every hidden state below: this block comes after the revealed rule at the same specificity, so a bare hidden rule wins and a revealed element sits 14px low with no rise (measured on CCVS phones, 2026-10-20). */ .cf.cf-motion-ready .cf-reveal:not(.is-visible) { transform: translateY(14px); } .cf .cf-reveal.is-visible { transition: opacity 0.36s var(--cf-ease), transform 0.36s var(--cf-ease) !important; transition-delay: 0s !important; --cf-d: 0ms !important; } .cf.cf-motion-ready .cf-card.cf-reveal:not(.is-visible), .cf.cf-motion-ready .cf-panel.cf-reveal:not(.is-visible), .cf.cf-motion-ready .cf-stat.cf-reveal:not(.is-visible), .cf.cf-motion-ready .cf-term.cf-reveal:not(.is-visible) { transform: translateY(14px) scale(0.992); } .cf.cf-motion-ready .cf-reveal--left:not(.is-visible), .cf.cf-motion-ready .cf-reveal--right:not(.is-visible) { transform: translateY(14px); } .cf.cf-motion-ready .cf-reveal--blur { filter: none; } .cf-marquee__track { animation-duration: 26s; } } /* ══ 8. Reduced motion — blanket kill switch ══════════════════════════════ '.cf *' does NOT match pseudo-elements, and this sheet animates ::before / ::after in several places (the eyebrow rule, the button sheen, the marquee edges), so both pseudo selectors are listed explicitly. '.cf' itself is listed for the same reason: the universal selector never matches the root. The resting states that exist ONLY to be animated are neutralised too — otherwise killing the animation freezes a card at opacity:0 forever, which is strictly worse than the motion was. */ @media (prefers-reduced-motion: reduce) { .cf, .cf *, .cf *::before, .cf *::after { animation: none !important; transition: none !important; scroll-behavior: auto !important; } .cf .cf-reveal, .cf.cf-motion-ready .cf-reveal, .cf .cf-enter { opacity: 1 !important; transform: none !important; filter: none !important; } .cf [data-cf-parallax], .cf [data-cf-pointer-depth] { transform: none !important; } .cf .cf-bar__fill { transform: scaleX(var(--cf-bar, 1)) !important; } .cf .cf-eyebrow::after { width: var(--cf-rule-w, 34px) !important; } .cf .cf-slide { opacity: 0 !important; } .cf .cf-slide:first-child, .cf .cf-slide.is-active { opacity: 1 !important; } .cf .cf-marquee__track { transform: none !important; width: 100% !important; } .cf .cf-progress { display: none !important; } .cf .cf-nodefield { display: none !important; } } /* ══════════════════════════════════════════════════════════════════════════ BRAND LOCKUP — pure CSS + inline SVG, no image dependency. A square "aperture" mark: a bracketed frame with a rising tick inside it, which is the whole company in one glyph (a trading bracket + a bid). It scales with the header shrink because it is sized in em off the wordmark. ══════════════════════════════════════════════════════════════════════════ */ .cf-brand { display: inline-flex; align-items: center; gap: 0.6rem; text-decoration: none; flex-shrink: 0; } /* The mark is the CLIENT'S OWN four-petal logo (CfMark in CfChrome.tsx). * * It deliberately sits on NOTHING — no tile, no border, no corner brackets. * The earlier mark here was an invented glyph that needed a container to read * as a logo; a real trademark does not, and boxing someone's logo inside our * furniture is how it stops looking like theirs. The glow lives on the artwork * via drop-shadow (which follows the petal outline) rather than on a box * (which would halo a square that is not part of the logo). */ .cf-brand__mark { position: relative; width: 32px; height: 32px; flex: none; display: grid; place-items: center; transition: width var(--cf-d-2) var(--cf-ease), height var(--cf-d-2) var(--cf-ease); } .cf-brand__mark svg { width: 100%; height: 100%; /* Their petals are #5FCDFE; --cf-accent-ink is #7FD2FF — the same colour to within a few points, so this reads as their logo while being a site token. */ /* On white the mark carries the client's own petal blue at full strength; the wordmark beside it is their navy (#072C7C). */ color: #1E8FDB; filter: none; transition: filter var(--cf-d-2) var(--cf-ease), color var(--cf-d-2) var(--cf-ease); } .cf-brand:hover .cf-brand__mark svg { color: var(--cf-accent-deep); filter: none; } .cf-brand__name { font-family: var(--cf-font-display); font-weight: 700; font-size: 1.22rem; letter-spacing: -0.03em; color: #072C7C; line-height: 1; white-space: nowrap; transition: font-size var(--cf-d-2) var(--cf-ease); } /* The client's wordmark is a SINGLE colour (their navy #072C7C), so ours is * too — the blue lives in the mark, exactly as it does on corrfirst.com. The * is kept in the markup rather than removed so a two-tone treatment is a * one-line change here if they'd rather have it back. */ .cf-brand__name em { font-style: normal; color: inherit; } .cf-brand__tag { display: block; font-family: var(--cf-font-mono); font-size: 0.58rem; font-weight: 500; letter-spacing: 0.2em; text-transform: uppercase; color: var(--cf-faint); margin-top: 3px; } /* ══════════════════════════════════════════════════════════════════════════ HEADER The frosted glass lives on a ::before pseudo-element, NEVER on .cf-header itself. A non-none backdrop-filter makes an element the containing block for its position:fixed DESCENDANTS — and .cf-drawer / .cf-scrim are fixed and nested inside this header, so with the filter on the header they resolve against the 76px bar instead of the viewport: the drawer collapses to a sliver and the scrim covers only the header. A pseudo-element has no element descendants, so it filters harmlessly. This is not a style choice. ══════════════════════════════════════════════════════════════════════════ */ .cf-header { position: sticky; top: 0; z-index: var(--cf-z-header); background: transparent; border-bottom: 1px solid transparent; transition: border-color var(--cf-d-2) var(--cf-ease), box-shadow var(--cf-d-2) var(--cf-ease); } .cf-header::before { content: ""; position: absolute; inset: 0; z-index: -1; background: rgba(255,255,255,0.92); -webkit-backdrop-filter: blur(14px) saturate(1.25); backdrop-filter: blur(14px) saturate(1.25); transition: background var(--cf-d-2) var(--cf-ease); } /* Past the fold the bar earns its weight: near-opaque, ruled, lifted, shorter. Toggled with hysteresis by CfMotion (enter at 48px, leave below 4px) so a trackpad hovering the boundary cannot flicker it. */ .cf-header.is-stuck::before { background: var(--cf-glass-2); } .cf-header.is-stuck { border-bottom-color: var(--cf-line); box-shadow: 0 10px 30px -24px rgba(11,27,51,0.35); } .cf-header__row { display: flex; align-items: center; gap: 1.4rem; height: var(--cf-header-h); max-width: var(--cf-max-wide); margin: 0 auto; padding: 0 var(--cf-pad-x); transition: height var(--cf-d-2) var(--cf-ease); } .cf-header.is-stuck .cf-header__row { height: var(--cf-header-h-stuck); } .cf-header.is-stuck .cf-brand__mark { width: 29px; height: 29px; } .cf-header.is-stuck .cf-brand__name { font-size: 1.1rem; } .cf-header.is-stuck .cf-brand__tag { display: none; } /* ── Primary nav ─────────────────────────────────────────────────────────── */ .cf-nav { display: flex; align-items: center; gap: 1.5rem; flex: 1; justify-content: center; } .cf-nav__item { position: relative; display: flex; align-items: center; } /* The mega panel centres on the PAGE, not on its trigger. * * With the item as the containing block, left:50% + translateX(-50%) centres a * 58rem panel on the "Loan Programs" link — which sits left of centre, so the * panel hung ~240px off the left edge of the viewport and the first column of * programs was cut in half. Making the item static promotes the containing * block to .cf-header (position: sticky, so it IS positioned), which spans the * full page width, so the same centring maths now centres on the page. * * top:100% then resolves against the header rather than the nav item, which is * also more correct: the panel hangs off the bottom of the header and follows * it when the sticky state shrinks its height. * * The underline and caret are unaffected — they position against * .cf-nav__link, which keeps its own position: relative. * * (No backticks in this file — it is one template literal; see tokens.ts.) */ .cf-nav__item:has(> .cf-mega) { position: static; } .cf-nav__link { position: relative; display: inline-flex; align-items: center; gap: 0.34rem; font-family: var(--cf-font-body); font-size: 0.885rem; font-weight: 500; color: var(--cf-text); text-decoration: none; white-space: nowrap; padding: 0.35rem 0; border-bottom: 2px solid transparent; transition: color var(--cf-d-1) var(--cf-ease); } /* ORIGIN-AWARE UNDERLINE. A border-color swap snaps a rule into existence under the whole word at once; a scaleX'd bar wipes in from the leading edge and back OUT toward the trailing edge, so the pointer appears to drag it on and off. Transform only — it composites and never reflows the bar. */ .cf-nav__link::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 2px; background: linear-gradient(90deg, var(--cf-accent-ink), var(--cf-accent)); transform: scaleX(0); transform-origin: right center; transition: transform var(--cf-d-2) var(--cf-ease); } .cf-nav__link:hover, .cf-nav__link:focus-visible { color: var(--cf-ink); } .cf-nav__link:hover::after, .cf-nav__link:focus-visible::after, .cf-nav__item:hover > .cf-nav__link::after, .cf-nav__item.is-open > .cf-nav__link::after, .cf-nav__item:focus-within > .cf-nav__link::after { transform: scaleX(1); transform-origin: left center; } .cf-nav__link[aria-current="page"] { color: var(--cf-ink); } .cf-nav__link[aria-current="page"]::after { transform: scaleX(1); transform-origin: left center; opacity: 0.5; } .cf-nav__caret { width: 13px; height: 13px; opacity: 0.55; transition: transform var(--cf-d-2) var(--cf-ease), opacity var(--cf-d-2) var(--cf-ease); } .cf-nav__item:hover .cf-nav__caret, .cf-nav__item.is-open .cf-nav__caret, .cf-nav__item:focus-within .cf-nav__caret { transform: rotate(180deg); opacity: 1; } /* ── Mega menu ───────────────────────────────────────────────────────────── */ .cf-mega { position: absolute; top: 100%; left: 50%; transform: translate(-50%, 10px); width: min(58rem, calc(100vw - 3rem)); z-index: var(--cf-z-menu); padding: 1.15rem; background: linear-gradient(180deg, var(--cf-elevated) 0%, var(--cf-surface) 100%); border: 1px solid var(--cf-line-2); border-radius: var(--cf-r-3); box-shadow: var(--cf-shadow-3); opacity: 0; visibility: hidden; pointer-events: none; transition: opacity var(--cf-d-2) var(--cf-ease-menu), transform var(--cf-d-2) var(--cf-ease-menu), visibility var(--cf-d-2); transition-delay: 0s; } /* WHO OWNS OPEN/CLOSED * * With JS, the mega menu is driven ENTIRELY by the controller in CfMotion.tsx, * which adds .cf-mega-js to on mount and toggles .is-open on the nav * item. The pure :hover / :focus-within rules below are the JS-off (and * pre-hydration) fallback ONLY, which is why they are scoped to * html:not(.cf-mega-js). * * They are scoped rather than left as a union with .is-open because a union * makes the CSS able to CONTRADICT the controller: press Escape while the * pointer still rests on the trigger and :hover re-opens the panel the * controller just closed, and :focus-within does the same the instant Escape * returns focus to the trigger. The controller reproduces both behaviours * (pointer intent, and focus entering the trigger or panel) itself. * * DO NOT REINSTATE A transition-delay CLOSE HACK HERE. This rule used to * carry transition-delay: 240ms on the base .cf-mega as a "grace period". * pointer-events IS NOT A TRANSITIONABLE PROPERTY — it flips to none the * moment the selector stops matching, so the panel merely LOOKED open for * 240ms while already being inert, and any test asserting on visibility or * opacity got a false pass while real clicks fell through. The grace period * is a timer in the controller, where it can hold pointer-events too. */ .cf-mega { transition-delay: 0s; } /* Invisible hover bridge across the dead gap between the trigger and the panel. * JS-OFF ONLY — see below. * * This used to be 14px, which was right when the panel hung off the nav ITEM. * Centring the panel on the page re-parented it to .cf-header, so it now hangs * off the header's bottom edge: the gap grew to roughly half the header height * (76px) minus the link, about 34px, and the pointer crossed dead space and the * menu closed before anyone could reach a program. 34px + the 6px open-state * translate, rounded up. * * It is scoped to the JS-off fallback because the bridge is as wide as the * panel (58rem), so while the menu is open it lies OVER the sibling nav links * and swallows clicks on them. The controller has no dead gap to bridge — it * keeps the panel open for anything inside the header row or the panel — so * under JS the bridge is pure cost. */ html:not(.cf-mega-js) .cf-mega::before { content: ""; position: absolute; left: 0; right: 0; top: -44px; height: 44px; } html:not(.cf-mega-js) .cf-nav__item:hover > .cf-mega, html:not(.cf-mega-js) .cf-nav__item:focus-within > .cf-mega { opacity: 1; visibility: visible; pointer-events: auto; transform: translate(-50%, 6px); /* OPEN-INTENT delay for the pointer: stops the panel firing when the cursor merely crosses the trigger on its way somewhere else. */ transition-delay: 130ms; } /* Keyboard opens INSTANTLY — open-intent damping is a pointer concern. */ html:not(.cf-mega-js) .cf-nav__item:focus-within > .cf-mega { transition-delay: 0s; } /* JS-driven open state. The controller has already applied its own open-intent delay before adding the class, so there is no transition-delay here. */ .cf-nav__item.is-open > .cf-mega { opacity: 1; visibility: visible; pointer-events: auto; transform: translate(-50%, 6px); transition-delay: 0s; } /* A KEYBOARD OPEN IS NOT ANIMATED, AND THAT IS LOAD-BEARING — not just taste. * * ArrowDown on the trigger has to move focus into the panel immediately, and a * HIDDEN element cannot take focus: .focus() is a silent no-op on it. With * visibility transitioned, the panel still computes as hidden at t=0 of the * transition, so the focus call lands on nothing and the user is left on the * trigger with an open panel they are not inside. Killing the transition for * this state lets the controller force one synchronous style flush and focus * in the same tick, with no frame-timing race to lose. * * data-cf-open="key" is written by the controller, which sets it explicitly on * the ArrowDown path rather than trusting whatever opened the panel first. */ .cf-nav__item.is-open[data-cf-open="key"] > .cf-mega { transition: none; } .cf-mega__head { display: flex; align-items: baseline; justify-content: space-between; gap: 1rem; padding: 0.15rem 0.55rem 0.9rem; border-bottom: 1px solid var(--cf-line); margin-bottom: 0.85rem; } .cf-mega__label { font-family: var(--cf-font-mono); font-size: 0.66rem; font-weight: 700; letter-spacing: 0.2em; text-transform: uppercase; color: var(--cf-accent-ink); } .cf-mega__all { font-family: var(--cf-font-mono); font-size: 0.7rem; color: var(--cf-muted); text-decoration: none; } .cf-mega__all:hover { color: var(--cf-accent-ink); } .cf-mega__grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0.3rem; } /* Quantity queries — the panel must not strand empty columns if the programs list is trimmed. Wrapped in min-width because :has() carries specificity and @media does not (lib/template-grid-balance.test.ts). 981px is this grid's own largest max-width breakpoint (980px, where the desktop nav is replaced by the drawer) + 1. */ @media (min-width: 981px) { .cf-mega__grid:has(> :nth-child(2):last-child) { grid-template-columns: repeat(2, minmax(0, 1fr)); } .cf-mega__grid:has(> :only-child) { grid-template-columns: minmax(0, 22rem); } } .cf-mega__item { display: flex; gap: 0.7rem; align-items: flex-start; padding: 0.75rem 0.8rem; border-radius: var(--cf-r-2); text-decoration: none; border: 1px solid transparent; transition: background var(--cf-d-1) var(--cf-ease), border-color var(--cf-d-1) var(--cf-ease), transform var(--cf-d-1) var(--cf-ease); } .cf-mega__item:hover { background: var(--cf-accent-soft); border-color: var(--cf-line-live); transform: translateX(2px); } .cf-mega__ic { flex: none; width: 32px; height: 32px; display: grid; place-items: center; border-radius: var(--cf-r-2); color: var(--cf-accent-ink); background: rgba(6,147,227,0.10); box-shadow: inset 0 0 0 1px var(--cf-line); } .cf-mega__ic svg { width: 16px; height: 16px; } .cf-mega__item b { display: block; font-family: var(--cf-font-display); font-size: 0.9rem; font-weight: 600; color: var(--cf-ink); letter-spacing: -0.01em; } .cf-mega__item span { display: block; font-size: 0.76rem; line-height: 1.5; color: var(--cf-muted); margin-top: 0.15rem; } /* Rows settle in BEHIND the panel — the thing that makes a menu feel assembled rather than pasted. Only while open, so at rest there is no animation attached at all. */ /* Scoped to the state that actually opened the panel. Under JS the hover variant must NOT fire: hovering the trigger starts the 120ms open-intent timer, and an animation-fill-mode: both run against a still-hidden panel would be finished by the time .is-open lands, so the rows would appear already settled and the choreography would be lost. */ html:not(.cf-mega-js) .cf-nav__item:hover > .cf-mega .cf-mega__item, html:not(.cf-mega-js) .cf-nav__item:focus-within > .cf-mega .cf-mega__item, .cf-nav__item.is-open > .cf-mega .cf-mega__item { animation: cf-menu-row 0.34s var(--cf-ease) both; } .cf-mega__item:nth-child(1) { animation-delay: 0.16s; } .cf-mega__item:nth-child(2) { animation-delay: 0.20s; } .cf-mega__item:nth-child(3) { animation-delay: 0.24s; } .cf-mega__item:nth-child(4) { animation-delay: 0.28s; } .cf-mega__item:nth-child(5) { animation-delay: 0.32s; } .cf-mega__item:nth-child(n+6) { animation-delay: 0.36s; } /* Keyboard/focus opens skip the stagger — a keyboard user is waiting on the first item to be focusable, not watching an entrance. data-cf-open="key" is written by the controller; the :focus-within form is the JS-off twin. */ html:not(.cf-mega-js) .cf-nav__item:focus-within > .cf-mega .cf-mega__item { animation-delay: 0s; } .cf-nav__item.is-open[data-cf-open="key"] > .cf-mega .cf-mega__item { animation-delay: 0s; } .cf-mega__foot { display: flex; align-items: center; justify-content: space-between; gap: 1rem; margin-top: 0.9rem; padding: 0.8rem 0.85rem 0.2rem; border-top: 1px solid var(--cf-line); font-size: 0.78rem; color: var(--cf-muted); } /* ── Header right-hand cluster ───────────────────────────────────────────── */ .cf-header__cta { display: flex; align-items: center; gap: 0.85rem; flex-shrink: 0; } .cf-header__phone { display: inline-flex; align-items: center; gap: 0.45rem; font-family: var(--cf-font-mono); font-size: 0.82rem; font-weight: 500; color: var(--cf-text); text-decoration: none; white-space: nowrap; transition: color var(--cf-d-1) var(--cf-ease); } .cf-header__phone svg { width: 15px; height: 15px; color: var(--cf-accent-ink); } .cf-header__phone:hover { color: var(--cf-accent-ink); } /* Header buttons are COMPACT, and only the header's. The base .cf-btn is 46px, correct for a page CTA and for a touch target in the body, but in a 62-76px bar those pills dominate the chrome and crowd the nav. */ .cf-header__cta .cf-btn { min-height: 38px; padding: 0.5rem 1.15rem; font-size: 0.82rem; } .cf-header.is-stuck .cf-header__cta .cf-btn { min-height: 34px; padding: 0.42rem 1rem; } /* ── Mobile drawer (CSS only, keyboard-reachable) ────────────────────────── */ /* THE TOGGLE IS FOCUSABLE. display:none on a checkbox makes it unfocusable, and a is not keyboard-activatable on its own — that combination is how a "CSS-only" nav ends up completely unreachable by keyboard. It is merely transparent here: present, tabbable, sized and positioned exactly over the burger so pointer taps land on it, with the burger drawn underneath and the focus ring forwarded onto it. */ /* FIXED, not absolute. The header is sticky, so an absolutely-positioned toggle stays at the top of the DOCUMENT and slides out from under the burger the moment the page scrolls — taps then land on whatever is behind it. Fixed keeps it welded to the burger, which is why the mobile header row is also pinned to a constant height below (the desktop shrink would move the burger out from under a fixed box). */ .cf-navtoggle { position: fixed; opacity: 0; margin: 0; width: 46px; height: 46px; right: var(--cf-pad-x); top: 15px; z-index: calc(var(--cf-z-drawer) + 3); cursor: pointer; } .cf-navtoggle:focus-visible ~ .cf-header .cf-burger { outline: 2px solid var(--cf-accent-ink); outline-offset: 2px; } .cf-burger, .cf-scrim, .cf-drawer, .cf-mobileonly { display: none; } @media (min-width: 981px) { .cf-navtoggle { display: none; } } @media (max-width: 980px) { .cf-nav { display: none; } /* Constant height — see the .cf-navtoggle note. The stuck state still changes the glass, the rule and the shadow; it just doesn't move the burger. */ .cf-header.is-stuck .cf-header__row { height: var(--cf-header-h); } .cf-header__phone { display: none; } .cf-header__row { justify-content: space-between; } .cf-burger { display: grid; place-items: center; width: 46px; height: 46px; border-radius: var(--cf-r-2); border: 1px solid var(--cf-line-2); background: var(--cf-tint); cursor: pointer; } .cf-burger span { display: block; width: 20px; height: 1.5px; background: var(--cf-ink); border-radius: 2px; position: relative; transition: background var(--cf-d-2) var(--cf-ease); } .cf-burger span::before, .cf-burger span::after { content: ""; position: absolute; left: 0; width: 20px; height: 1.5px; background: var(--cf-ink); border-radius: 2px; transition: transform var(--cf-d-2) var(--cf-ease); } .cf-burger span::before { top: -6px; } .cf-burger span::after { top: 6px; } .cf-navtoggle:checked ~ .cf-header .cf-burger span { background: transparent; } .cf-navtoggle:checked ~ .cf-header .cf-burger span::before { transform: translateY(6px) rotate(45deg); } .cf-navtoggle:checked ~ .cf-header .cf-burger span::after { transform: translateY(-6px) rotate(-45deg); } .cf-scrim { display: block; position: fixed; inset: 0; z-index: var(--cf-z-drawer); background: rgba(11,27,51,0.45); -webkit-backdrop-filter: blur(3px); backdrop-filter: blur(3px); opacity: 0; pointer-events: none; transition: opacity var(--cf-d-2) var(--cf-ease); } .cf-navtoggle:checked ~ .cf-scrim { opacity: 1; pointer-events: auto; } .cf-drawer { display: flex; flex-direction: column; position: fixed; top: 0; right: 0; bottom: 0; width: min(23rem, 88vw); z-index: calc(var(--cf-z-drawer) + 2); background: linear-gradient(180deg, var(--cf-surface) 0%, var(--cf-canvas) 100%); border-left: 1px solid var(--cf-line-2); box-shadow: -30px 0 80px -40px rgba(11,27,51,0.45); transform: translateX(102%); transition: transform 0.36s var(--cf-ease); overflow-y: auto; overscroll-behavior: contain; padding: 1.25rem 1.25rem 2rem; } .cf-navtoggle:checked ~ .cf-drawer { transform: none; } .cf-drawer__label { font-family: var(--cf-font-mono); font-size: 0.64rem; font-weight: 700; letter-spacing: 0.2em; text-transform: uppercase; color: var(--cf-faint); padding: 1.1rem 0 0.4rem; } .cf-drawer__link { display: flex; align-items: center; justify-content: space-between; gap: 0.75rem; min-height: 50px; font-size: 1rem; font-weight: 500; color: var(--cf-text); text-decoration: none; border-bottom: 1px solid var(--cf-line); } .cf-drawer__link:hover { color: var(--cf-accent-ink); } .cf-drawer__link--sub { padding-left: 0.9rem; font-size: 0.92rem; color: var(--cf-muted); } .cf-drawer__foot { margin-top: auto; padding-top: 1.5rem; display: grid; gap: 0.7rem; } .cf-drawer .cf-btn { width: 100%; } .cf-mobileonly { display: block; } } /* ══════════════════════════════════════════════════════════════════════════ FOOTER ══════════════════════════════════════════════════════════════════════════ */ .cf-footer { position: relative; background: var(--cf-canvas-2); border-top: 1px solid var(--cf-line); padding: clamp(3.5rem, 6vw, 5.5rem) 0 0; overflow: hidden; } /* A single luminous hairline across the top edge — the one piece of decoration in the footer, and it ties back to the header's live rule. */ .cf-footer::before { content: ""; position: absolute; top: -1px; left: 0; right: 0; height: 1px; background: var(--cf-grad-edge); } .cf-footer__inner { max-width: var(--cf-max); margin: 0 auto; padding: 0 var(--cf-pad-x); } .cf-footer__grid { display: grid; grid-template-columns: 1.5fr repeat(3, minmax(0, 1fr)); gap: clamp(1.75rem, 4vw, 3.5rem); } @media (max-width: 1040px) { .cf-footer__grid { grid-template-columns: 1fr 1fr; } } @media (max-width: 620px) { .cf-footer__grid { grid-template-columns: 1fr; } } .cf-footer__blurb { margin-top: 1.1rem; font-size: 0.9rem; line-height: 1.7; color: var(--cf-muted); max-width: 34ch; } .cf-footer__col h4 { font-family: var(--cf-font-mono); font-size: 0.68rem; font-weight: 700; letter-spacing: 0.2em; text-transform: uppercase; color: var(--cf-faint); margin: 0 0 1rem; } .cf-footer__col ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 0.6rem; } .cf-footer__col a { font-size: 0.9rem; color: var(--cf-text); text-decoration: none; transition: color var(--cf-d-1) var(--cf-ease), padding-left var(--cf-d-1) var(--cf-ease); } .cf-footer__col a:hover { color: var(--cf-accent-ink); padding-left: 3px; } .cf-footer__contact { display: grid; gap: 0.7rem; font-size: 0.9rem; } .cf-footer__contact a { color: var(--cf-text); text-decoration: none; display: inline-flex; align-items: center; gap: 0.5rem; } .cf-footer__contact a:hover { color: var(--cf-accent-ink); } .cf-footer__contact svg { width: 15px; height: 15px; color: var(--cf-accent); flex: none; } .cf-footer__social { display: flex; gap: 0.5rem; margin-top: 1.4rem; } .cf-footer__social a { width: 36px; height: 36px; display: grid; place-items: center; border-radius: var(--cf-r-2); border: 1px solid var(--cf-line-2); color: var(--cf-muted); background: var(--cf-tint); transition: color var(--cf-d-1) var(--cf-ease), border-color var(--cf-d-1) var(--cf-ease), transform var(--cf-d-1) var(--cf-ease); } .cf-footer__social a:hover { color: var(--cf-accent-ink); border-color: var(--cf-line-live); transform: translateY(-2px); } .cf-footer__social svg { width: 16px; height: 16px; } .cf-footer__bar { margin-top: clamp(2.5rem, 5vw, 4rem); border-top: 1px solid var(--cf-line); padding: 1.4rem 0 1.8rem; display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 0.9rem; font-size: 0.78rem; color: var(--cf-faint); } .cf-footer__bar p { max-width: 70ch; } .cf-footer__legal { display: flex; flex-wrap: wrap; gap: 1.1rem; } .cf-footer__legal a { color: var(--cf-faint); text-decoration: none; transition: color var(--cf-d-1) var(--cf-ease); } .cf-footer__legal a:hover { color: var(--cf-accent-ink); } .cf-footer__disclaimer { margin-top: 0.4rem; padding-bottom: 2rem; font-size: 0.74rem; line-height: 1.65; color: var(--cf-faint); max-width: 92ch; } /* ══ Layout shells ════════════════════════════════════════════════════════ */ .cf-wrap { max-width: var(--cf-max); margin: 0 auto; padding: 0 var(--cf-pad-x); width: 100%; } .cf-wrap--narrow { max-width: var(--cf-max-narrow); } .cf-wrap--wide { max-width: var(--cf-max-wide); } .cf-band { position: relative; padding: var(--cf-section-y) 0; background: var(--cf-canvas); } .cf-band--alt { background: var(--cf-canvas-2); } .cf-band--surface { background: var(--cf-surface); } /* A band that must feel lit from within — used once or twice per page, no more, or the "elevated" step stops meaning anything. */ .cf-band--lit { background: radial-gradient(ellipse 70% 60% at 50% -10%, rgba(6,147,227,0.16), transparent 70%), var(--cf-canvas-2); } .cf-band--tight { padding: clamp(2.75rem, 5vw, 4.5rem) 0; } /* Hairline rules between bands. Gradient, not a flat border — a flat 1px line across 1440px of near-black reads as a seam. */ .cf-band--ruled { border-top: 1px solid transparent; border-image: var(--cf-grad-edge) 1; } .cf-band__glow { position: absolute; z-index: 0; pointer-events: none; width: 46rem; height: 46rem; border-radius: 50%; filter: blur(70px); opacity: 0.5; background: radial-gradient(circle, var(--cf-accent-glow), transparent 62%); } .cf-band > .cf-wrap, .cf-band > .cf-wrap--narrow, .cf-band > .cf-wrap--wide { position: relative; z-index: var(--cf-z-base); } /* ══ Section head ═════════════════════════════════════════════════════════ */ .cf-head { max-width: 62ch; } .cf-head--center { margin-inline: auto; text-align: center; } .cf-head--center .cf-eyebrow { justify-content: center; } .cf-head + * { margin-top: clamp(2rem, 4vw, 3.25rem); } /* Eyebrow — monospace label with a rule that draws itself on reveal. */ /* Section eyebrow. * * Sized against the copy it introduces, not against the shared micro token. * It began at 0.75rem and a first pass moved it to 0.85rem, which was still * SMALLER THAN THE BODY LEDE (--cf-t-lede tops out at 1.2rem) while sitting * above headings that reach 2.85rem. At that ratio it read as a caption rather * than as a label and the client flagged it twice. * * Two things make uppercase mono look smaller than its nominal size: the * 0.2em tracking spends width on gaps rather than glyphs, and mono faces have * a smaller x-height than the display face beside them. So the tracking comes * down slightly as the size goes up, which buys legibility without letting the * label sprawl across the column. * * The dot and rule scale with it so the lockup stays balanced, and the bottom * margin grows a little so the bigger label does not crowd the heading. */ .cf-eyebrow { display: inline-flex; align-items: center; gap: 0.72rem; font-family: var(--cf-font-mono); font-size: clamp(0.95rem, 1.05vw, 1.06rem); font-weight: 700; letter-spacing: 0.16em; text-transform: uppercase; color: var(--cf-accent-ink); margin: 0 0 1.3rem; } .cf-eyebrow::before { content: ""; width: 8px; height: 8px; border-radius: 50%; background: var(--cf-accent); box-shadow: 0 0 12px var(--cf-accent-glow); flex: none; } .cf-eyebrow::after { content: ""; width: var(--cf-rule-w, 52px); height: 1px; background: linear-gradient(90deg, var(--cf-accent), transparent); flex: none; } .cf-eyebrow--amber { color: var(--cf-amber-ink); } .cf-eyebrow--amber::before { background: var(--cf-amber); box-shadow: 0 0 10px rgba(247,106,12,0.5); } .cf-eyebrow--amber::after { background: linear-gradient(90deg, var(--cf-amber), transparent); } .cf-eyebrow--plain::after { display: none; } .cf-h1 { font-size: var(--cf-t-h1); } .cf-h2 { font-size: var(--cf-t-h2); } .cf-display { font-family: var(--cf-font-display); font-size: var(--cf-t-display); font-weight: 700; letter-spacing: -0.035em; line-height: 1.02; color: var(--cf-ink); text-wrap: balance; margin: 0; } /* Gradient phrase inside a heading — the family's signature type effect. background-clip:text needs a colour fallback for the ~0 browsers without it, hence the explicit -webkit- pair plus color:transparent last. */ .cf-grad { background: var(--cf-grad-text); -webkit-background-clip: text; background-clip: text; color: transparent; /* Descenders get clipped by background-clip on some engines without this. */ padding-bottom: 0.04em; } .cf-lede { font-size: var(--cf-t-lede); line-height: 1.72; color: var(--cf-muted); max-width: 58ch; margin-top: 1.15rem; } .cf-head--center .cf-lede { margin-inline: auto; } .cf-prose { color: var(--cf-text); line-height: 1.8; max-width: 68ch; } .cf-prose > * + * { margin-top: 1.15rem; } .cf-prose h2 { margin-top: 2.4rem; } .cf-prose h3 { margin-top: 1.9rem; } .cf-prose a { color: var(--cf-accent-ink); } .cf-prose strong { color: var(--cf-ink); font-weight: 600; } .cf-prose ul, .cf-prose ol { padding-left: 1.15rem; display: grid; gap: 0.55rem; } .cf-prose li::marker { color: var(--cf-accent); } /* ══ Buttons ══════════════════════════════════════════════════════════════ */ .cf-btn { position: relative; display: inline-flex; align-items: center; justify-content: center; gap: 0.5rem; min-height: 46px; padding: 0.8rem 1.6rem; font-family: var(--cf-font-body); font-size: 0.9rem; font-weight: 600; letter-spacing: 0.005em; border-radius: var(--cf-r-2); border: 1px solid transparent; text-decoration: none; cursor: pointer; white-space: nowrap; overflow: hidden; transition: background var(--cf-d-2) var(--cf-ease), border-color var(--cf-d-2) var(--cf-ease), color var(--cf-d-2) var(--cf-ease), transform var(--cf-d-2) var(--cf-ease), box-shadow var(--cf-d-2) var(--cf-ease); } .cf-btn svg { width: 16px; height: 16px; } /* DARK ink on the blue fill: white on #0693E3 is 3.3:1 and fails AA. */ .cf-btn--primary { background: var(--cf-grad-fill); color: #fff; box-shadow: var(--cf-inset-top), 0 10px 30px -14px var(--cf-accent-glow); } .cf-btn--primary:hover { transform: translateY(-2px); box-shadow: var(--cf-inset-top), 0 16px 40px -14px var(--cf-accent-glow); } .cf-btn--primary::after { content: ""; position: absolute; top: 0; bottom: 0; left: 0; width: 45%; background: linear-gradient(90deg, transparent, rgba(255,255,255,0.42), transparent); transform: translateX(-160%) skewX(-18deg); pointer-events: none; } .cf-btn--primary:hover::after, .cf-btn--primary:focus-visible::after { animation: cf-sheen 0.85s cubic-bezier(.33,0,.2,1); } .cf-btn--ghost { background: var(--cf-tint); color: var(--cf-ink); border-color: var(--cf-line-2); } .cf-btn--ghost:hover { background: var(--cf-tint-2); border-color: var(--cf-line-live); color: var(--cf-accent-ink); transform: translateY(-2px); } .cf-btn--amber { background: var(--cf-amber); color: #1A0A00; box-shadow: var(--cf-inset-top), 0 10px 30px -14px rgba(247,106,12,0.5); } .cf-btn--amber:hover { transform: translateY(-2px); } .cf-btn--light { background: var(--cf-ink); color: var(--cf-canvas); } .cf-btn--light:hover { transform: translateY(-2px); background: #fff; } .cf-btn--sm { min-height: 38px; padding: 0.5rem 1.1rem; font-size: 0.82rem; } .cf-btn--block { width: 100%; } .cf-btn[aria-disabled="true"], .cf-btn:disabled { opacity: 0.5; pointer-events: none; } .cf-link { display: inline-flex; align-items: center; gap: 0.45rem; font-family: var(--cf-font-body); font-size: 0.88rem; font-weight: 600; color: var(--cf-accent-ink); text-decoration: none; transition: color var(--cf-d-1) var(--cf-ease), gap var(--cf-d-1) var(--cf-ease); } .cf-link svg { width: 15px; height: 15px; transition: transform var(--cf-d-2) var(--cf-ease); } .cf-link:hover svg, .cf-link:focus-visible svg { transform: translateX(4px); } /* A card wrapping a link is the hover target, not the link itself. */ .cf-card:hover .cf-link svg { transform: translateX(4px); } .cf-btnrow { display: flex; flex-wrap: wrap; gap: 0.85rem; margin-top: 2rem; } .cf-head--center .cf-btnrow { justify-content: center; } /* ══ Cards ════════════════════════════════════════════════════════════════ */ .cf-card { position: relative; display: flex; flex-direction: column; padding: clamp(1.3rem, 2.2vw, 1.8rem); background: var(--cf-elevated); border: 1px solid var(--cf-line); border-radius: var(--cf-r-3); box-shadow: var(--cf-shadow-1); text-decoration: none; color: inherit; overflow: hidden; transition: transform var(--cf-d-2) var(--cf-ease), border-color var(--cf-d-2) var(--cf-ease), box-shadow var(--cf-d-2) var(--cf-ease), background var(--cf-d-2) var(--cf-ease); } /* Top-edge light. It is the border-glow: a 1px gradient that brightens on hover, which reads as the card catching light rather than as a colour swap. */ .cf-card::before { content: ""; position: absolute; top: 0; left: 0; right: 0; height: 1px; background: var(--cf-grad-edge); opacity: 0.5; transition: opacity var(--cf-d-2) var(--cf-ease); } .cf-card:hover { transform: translateY(-4px); background: var(--cf-raised); border-color: var(--cf-line-live); box-shadow: var(--cf-shadow-2); } .cf-card:hover::before { opacity: 1; } /* Hover lifts must out-specify '.cf .cf-reveal.is-visible', which sets transform:none at (0,3,0) — a bare '.cf-card:hover' is (0,2,0) and loses, which is how every revealed card silently stops lifting. */ .cf .cf-card.cf-reveal.is-visible:hover { transform: translateY(-4px); } .cf-card h3 { margin-bottom: 0.55rem; } .cf-card p { font-size: 0.92rem; line-height: 1.68; color: var(--cf-muted); } .cf-card__ic { width: 46px; height: 46px; display: grid; place-items: center; margin-bottom: 1.1rem; border-radius: var(--cf-r-2); color: var(--cf-accent-ink); background: linear-gradient(150deg, rgba(6,147,227,0.16), rgba(6,147,227,0.04)); box-shadow: inset 0 0 0 1px var(--cf-line-2); } .cf-card__ic svg { width: 22px; height: 22px; } .cf-card__foot { margin-top: auto; padding-top: 1.15rem; } .cf-card__tag { align-self: flex-start; margin-bottom: 0.9rem; font-family: var(--cf-font-mono); font-size: 0.66rem; font-weight: 700; letter-spacing: 0.16em; text-transform: uppercase; color: var(--cf-faint); } /* Optional pointer spotlight. CfMotion writes --cf-mx/--cf-my on hover; with no JS the layer simply never becomes visible. */ .cf-card--spot::after { content: ""; position: absolute; inset: 0; pointer-events: none; opacity: 0; background: radial-gradient(22rem 22rem at var(--cf-mx, 50%) var(--cf-my, 0%), rgba(6,147,227,0.14), transparent 60%); transition: opacity var(--cf-d-2) var(--cf-ease); } .cf-card--spot:hover::after { opacity: 1; } .cf-panel { position: relative; padding: clamp(1.5rem, 3vw, 2.4rem); background: linear-gradient(170deg, var(--cf-elevated), var(--cf-surface)); border: 1px solid var(--cf-line-2); border-radius: var(--cf-r-3); box-shadow: var(--cf-shadow-2); } .cf-glass { background: var(--cf-glass); -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px); border: 1px solid var(--cf-line-2); border-radius: var(--cf-r-3); } /* ══ Grids ════════════════════════════════════════════════════════════════ */ .cf-grid { display: grid; gap: var(--cf-gap); } .cf .cf-grid--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); } .cf .cf-grid--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); } .cf .cf-grid--4 { grid-template-columns: repeat(4, minmax(0, 1fr)); } /* Quantity caps. See the header comment on the :has() specificity trap. 1081px = .cf-grid--4's largest max-width breakpoint (1080px) + 1. */ @media (min-width: 1081px) { .cf .cf-grid--4:has(> :nth-child(3):last-child) { grid-template-columns: repeat(3, minmax(0, 1fr)); } .cf .cf-grid--4:has(> :nth-child(2):last-child) { grid-template-columns: repeat(2, minmax(0, 1fr)); max-width: 62rem; } .cf .cf-grid--4:has(> :only-child) { grid-template-columns: minmax(0, 34rem); } } /* 901px = .cf-grid--3's largest max-width breakpoint (900px) + 1. */ @media (min-width: 901px) { .cf .cf-grid--3:has(> :nth-child(2):last-child) { grid-template-columns: repeat(2, minmax(0, 1fr)); max-width: 58rem; } .cf .cf-grid--3:has(> :only-child) { grid-template-columns: minmax(0, 34rem); } } /* THE FOURTH-CARD ORPHAN. * * The quantity queries above only ever cap DOWNWARD, which is the limitation * recorded in CLAUDE.md ("the pattern only caps downward; a list LONGER than * the declared column count still strands cells on the final row"). A 4-item * list in a 3-up grid therefore rendered 3 + 1, and the lone card on its own * row reads as a layout bug rather than as content. It was reported three * separate times, on three different pages, because the lists are * dashboard-editable: nobody declares the count, the content does. * * Fixing it here rather than at each call site is deliberate. Seven grids in * this family use --3 and every one of them is fed a variable-length list, so * patching them one at a time just waits for the next page to grow a fourth * item. * * Two breakpoints because four text cards need the room: 4-up only above * 1081px (where --grid-4 itself is 4-up), and a balanced 2x2 in the 901-1080 * band, which is what --grid-4 does there too. Below 901px the base rules * already collapse to 2-up and then 1-up. */ @media (min-width: 1081px) { .cf .cf-grid--3:has(> :nth-child(4):last-child) { grid-template-columns: repeat(4, minmax(0, 1fr)); } } @media (min-width: 901px) and (max-width: 1080px) { .cf .cf-grid--3:has(> :nth-child(4):last-child) { grid-template-columns: repeat(2, minmax(0, 1fr)); } } @media (max-width: 1080px) { .cf .cf-grid--4 { grid-template-columns: repeat(2, minmax(0, 1fr)); } } @media (max-width: 900px) { .cf .cf-grid--3 { grid-template-columns: repeat(2, minmax(0, 1fr)); } } @media (max-width: 620px) { .cf .cf-grid--4, .cf .cf-grid--3, .cf .cf-grid--2 { grid-template-columns: minmax(0, 1fr); } } /* Two-column editorial split (copy + media). */ .cf-split { display: grid; grid-template-columns: 1.05fr 0.95fr; gap: clamp(2rem, 5vw, 4.5rem); align-items: center; } .cf-split--reverse > :first-child { order: 2; } .cf-split > * { min-width: 0; } @media (max-width: 900px) { .cf-split { grid-template-columns: minmax(0, 1fr); gap: 2.5rem; } .cf-split--reverse > :first-child { order: 0; } } /* ══ Stats ════════════════════════════════════════════════════════════════ */ .cf .cf-stats { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 1px; background: var(--cf-line); border: 1px solid var(--cf-line); border-radius: var(--cf-r-3); overflow: hidden; } /* 901px = .cf-stats' largest max-width breakpoint (900px) + 1. The 1px-gap construction means an empty trailing cell renders as a visible blank box, not just whitespace, so these caps matter more here than elsewhere. */ @media (min-width: 901px) { .cf .cf-stats:has(> :nth-child(3):last-child) { grid-template-columns: repeat(3, minmax(0, 1fr)); } .cf .cf-stats:has(> :nth-child(2):last-child) { grid-template-columns: repeat(2, minmax(0, 1fr)); } .cf .cf-stats:has(> :only-child) { grid-template-columns: minmax(0, 1fr); } } @media (max-width: 900px) { .cf .cf-stats { grid-template-columns: repeat(2, minmax(0, 1fr)); } } @media (max-width: 480px) { .cf .cf-stats { grid-template-columns: minmax(0, 1fr); } } .cf-stat { padding: clamp(1.25rem, 2.4vw, 1.9rem); background: var(--cf-canvas-2); } .cf-stat__value { display: block; font-family: var(--cf-font-display); font-weight: 700; font-size: clamp(1.9rem, 3.4vw, 2.7rem); line-height: 1; letter-spacing: -0.03em; color: var(--cf-ink); font-variant-numeric: tabular-nums; } .cf-stat__value em { font-style: normal; color: var(--cf-accent-ink); } .cf-stat__label { display: block; margin-top: 0.6rem; font-family: var(--cf-font-mono); font-size: 0.7rem; font-weight: 500; letter-spacing: 0.14em; text-transform: uppercase; color: var(--cf-muted); } .cf-stat__note { display: block; margin-top: 0.4rem; font-size: 0.8rem; color: var(--cf-faint); } /* ══ Badges / pills / chips ═══════════════════════════════════════════════ */ .cf-badge { display: inline-flex; align-items: center; gap: 0.45rem; padding: 0.34rem 0.8rem; border-radius: var(--cf-r-pill); font-family: var(--cf-font-mono); font-size: 0.7rem; font-weight: 600; letter-spacing: 0.1em; text-transform: uppercase; color: var(--cf-accent-ink); background: var(--cf-accent-soft); border: 1px solid var(--cf-line-live); } .cf-badge--amber { color: var(--cf-amber-ink); background: var(--cf-amber-soft); border-color: rgba(247,106,12,0.4); } .cf-badge--quiet { color: var(--cf-muted); background: var(--cf-tint); border-color: var(--cf-line); } .cf-badge svg { width: 13px; height: 13px; } .cf-chips { display: flex; flex-wrap: wrap; gap: 0.55rem; } .cf-chip { display: inline-flex; align-items: center; gap: 0.45rem; padding: 0.45rem 0.9rem; border-radius: var(--cf-r-2); font-size: 0.82rem; font-weight: 500; color: var(--cf-text); background: var(--cf-tint); border: 1px solid var(--cf-line-2); -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); } .cf-chip svg { width: 15px; height: 15px; color: var(--cf-accent-ink); } /* Live indicator — the "this is a running system" tell. */ .cf-live { display: inline-flex; align-items: center; gap: 0.5rem; font-family: var(--cf-font-mono); font-size: 0.72rem; letter-spacing: 0.12em; text-transform: uppercase; color: var(--cf-muted); } .cf-live__dot { width: 7px; height: 7px; border-radius: 50%; background: var(--cf-up); box-shadow: 0 0 12px rgba(52,211,153,0.8); flex: none; } /* ══ Check list ═══════════════════════════════════════════════════════════ */ .cf-points { list-style: none; padding: 0; margin: 1.4rem 0 0; display: grid; gap: 0.8rem; } .cf-points li { display: flex; gap: 0.7rem; align-items: flex-start; color: var(--cf-text); font-size: 0.94rem; line-height: 1.62; } .cf-points li::before { content: ""; flex: none; margin-top: 0.18rem; width: 20px; height: 20px; border-radius: var(--cf-r-2); background: var(--cf-accent-soft) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%230A5BB0' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='20 6 9 17 4 12'/%3E%3C/svg%3E") center/12px no-repeat; box-shadow: inset 0 0 0 1px var(--cf-line-2); } /* ══ Numbered steps ═══════════════════════════════════════════════════════ */ .cf-step { position: relative; padding-top: 1.6rem; } .cf-step__num { position: absolute; top: 0; left: 0; font-family: var(--cf-font-mono); font-size: 0.72rem; font-weight: 700; letter-spacing: 0.18em; color: var(--cf-accent-ink); } .cf-step::before { content: ""; position: absolute; top: 0.55rem; left: 2.6rem; right: 0; height: 1px; background: var(--cf-grad-edge); } .cf-step h3 { margin-top: 0.8rem; } .cf-step p { margin-top: 0.55rem; color: var(--cf-muted); font-size: 0.92rem; line-height: 1.68; } /* ══ Bars (allocation / benchmark) ════════════════════════════════════════ */ .cf-bar { display: grid; gap: 0.5rem; } .cf-bar__meta { display: flex; align-items: baseline; justify-content: space-between; gap: 1rem; font-family: var(--cf-font-mono); font-size: 0.76rem; color: var(--cf-muted); } .cf-bar__meta b { color: var(--cf-ink); font-weight: 600; } .cf-bar__track { height: 6px; border-radius: var(--cf-r-pill); background: var(--cf-tint-2); overflow: hidden; } .cf-bar__fill { height: 100%; border-radius: inherit; background: var(--cf-grad-fill); box-shadow: 0 0 18px -4px var(--cf-accent-glow); } .cf-bar--amber .cf-bar__fill { background: linear-gradient(90deg, var(--cf-amber), #FFB067); box-shadow: 0 0 18px -4px rgba(247,106,12,0.6); } /* ══ Tables ═══════════════════════════════════════════════════════════════ */ .cf-tablewrap { overflow-x: auto; border: 1px solid var(--cf-line); border-radius: var(--cf-r-3); background: var(--cf-canvas-2); } .cf-table { width: 100%; border-collapse: collapse; font-size: 0.9rem; min-width: 34rem; } .cf-table th { text-align: left; padding: 0.9rem 1.1rem; font-family: var(--cf-font-mono); font-size: 0.68rem; font-weight: 700; letter-spacing: 0.16em; text-transform: uppercase; color: var(--cf-muted); background: var(--cf-tint); border-bottom: 1px solid var(--cf-line-2); white-space: nowrap; } .cf-table td { padding: 0.95rem 1.1rem; border-bottom: 1px solid var(--cf-line); color: var(--cf-text); } .cf-table tbody tr:last-child td { border-bottom: 0; } .cf-table tbody tr { transition: background var(--cf-d-1) var(--cf-ease); } .cf-table tbody tr:hover { background: rgba(6,147,227,0.05); } .cf-table .num { font-family: var(--cf-font-mono); text-align: right; color: var(--cf-ink); font-variant-numeric: tabular-nums; } .cf-table .up { color: var(--cf-up); } .cf-table .down { color: var(--cf-down); } /* ══ FAQ / accordion ══════════════════════════════════════════════════════ */ .cf-faq { display: grid; gap: 0.7rem; } .cf-faq details { border: 1px solid var(--cf-line); border-radius: var(--cf-r-3); background: var(--cf-canvas-2); overflow: hidden; transition: border-color var(--cf-d-2) var(--cf-ease), background var(--cf-d-2) var(--cf-ease); } .cf-faq details[open] { border-color: var(--cf-line-live); background: var(--cf-elevated); } .cf-faq summary { display: flex; align-items: center; justify-content: space-between; gap: 1rem; padding: 1.05rem 1.25rem; cursor: pointer; list-style: none; font-family: var(--cf-font-display); font-size: 1rem; font-weight: 600; color: var(--cf-ink); } .cf-faq summary::-webkit-details-marker { display: none; } .cf-faq summary::after { content: ""; flex: none; width: 11px; height: 11px; border-right: 1.5px solid var(--cf-accent-ink); border-bottom: 1.5px solid var(--cf-accent-ink); transform: rotate(45deg) translateY(-2px); transition: transform var(--cf-d-2) var(--cf-ease); } .cf-faq details[open] summary::after { transform: rotate(-135deg) translateY(-2px); } .cf-faq__a { padding: 0 1.25rem 1.25rem; color: var(--cf-muted); font-size: 0.94rem; line-height: 1.75; max-width: 76ch; } .cf-faq details[open] .cf-faq__a { animation: cf-menu-row 0.34s var(--cf-ease) both; } /* ══ Forms ════════════════════════════════════════════════════════════════ */ .cf-form { display: grid; gap: 1rem; } .cf-field { display: grid; gap: 0.4rem; } .cf-label { font-family: var(--cf-font-mono); font-size: 0.68rem; font-weight: 600; letter-spacing: 0.14em; text-transform: uppercase; color: var(--cf-muted); } .cf-input, .cf-select, .cf-textarea, .cf .tenant-form input, .cf .tenant-form textarea, .cf .tenant-form select { width: 100%; min-height: 46px; padding: 0.7rem 0.9rem; font-family: var(--cf-font-body); font-size: 0.94rem; color: var(--cf-ink); background: var(--cf-tint); border: 1px solid var(--cf-line-2); border-radius: var(--cf-r-2); transition: border-color var(--cf-d-1) var(--cf-ease), background var(--cf-d-1) var(--cf-ease), box-shadow var(--cf-d-1) var(--cf-ease); } .cf-textarea, .cf .tenant-form textarea { min-height: 8rem; resize: vertical; line-height: 1.6; } .cf-input::placeholder, .cf-textarea::placeholder, .cf .tenant-form input::placeholder, .cf .tenant-form textarea::placeholder { color: var(--cf-faint); } .cf-input:focus, .cf-select:focus, .cf-textarea:focus, .cf .tenant-form input:focus, .cf .tenant-form textarea:focus, .cf .tenant-form select:focus { outline: none; border-color: var(--cf-accent); background: rgba(6,147,227,0.06); box-shadow: 0 0 0 3px rgba(6,147,227,0.16); } .cf .tenant-form button, .cf .tenant-form [type="submit"] { min-height: 46px; padding: 0.8rem 1.6rem; border: 0; cursor: pointer; font-family: var(--cf-font-body); font-size: 0.9rem; font-weight: 600; color: #fff; background: var(--cf-grad-fill); border-radius: var(--cf-r-2); box-shadow: var(--cf-inset-top), 0 10px 30px -14px var(--cf-accent-glow); transition: transform var(--cf-d-2) var(--cf-ease); } .cf .tenant-form button:hover { transform: translateY(-2px); } .cf-formnote { font-size: 0.78rem; color: var(--cf-faint); line-height: 1.6; } /* Definition-driven form furniture, emitted by CfFormFields.tsx and shared by EVERY form in the family (the pop-up and the contact page today). These are primitives rather than per-surface BEM on purpose: both surfaces render the same tenant form from the same definition, so a control skin that lived on one surface's prefix could be silently lost by the other. */ .cf-form__row { display: grid; gap: 0.95rem; } @media (min-width: 561px) { .cf-form__row { grid-template-columns: 1fr 1fr; } } /* Amber is this family's "attention" signal. */ .cf-form__req { color: var(--cf-amber-ink); } .cf-form__err { font-size: 0.78rem; color: var(--cf-down); } .cf-control--error { border-color: var(--cf-down) !important; } /* A single acknowledgement checkbox nests its input inside the label, so this is a flex container on the itself — and the label reverts to body copy, since the mono micro-caps of .cf-label are unreadable as a sentence. */ .cf-form__check { display: flex; gap: 0.65rem; align-items: flex-start; font-family: var(--cf-font-body); font-size: 0.9rem; font-weight: 400; letter-spacing: 0; text-transform: none; color: var(--cf-text); line-height: 1.55; cursor: pointer; } .cf-form__check input { width: 17px; height: 17px; min-height: 0; margin-top: 0.15rem; flex: none; accent-color: var(--cf-accent); } /* File inputs: the native control is unstyleable, so it is visually replaced by its own . It stays in the accessibility tree and keyboard- focusable — display:none would make it unreachable. */ .cf-form__filewrap { position: relative; } .cf-form__fileinput { position: absolute; width: 1px; height: 1px; min-height: 0; opacity: 0; overflow: hidden; } .cf-form__filebtn { display: block; width: 100%; min-height: 46px; padding: 0.7rem 0.9rem; font-family: var(--cf-font-body); font-size: 0.94rem; text-transform: none; letter-spacing: 0; font-weight: 400; color: var(--cf-ink); background: var(--cf-tint); border: 1px dashed var(--cf-line-2); border-radius: var(--cf-r-2); cursor: pointer; } .cf-form__filebtn:hover { border-color: var(--cf-accent); } .cf-form__fileinput:focus-visible + .cf-form__filebtn { outline: 2px solid var(--cf-accent-ink); outline-offset: 3px; } /* ══ Data / terminal motif — this is what carries the AI story ═════════════ A framed monospace panel with a title bar and a scanline. Used for tape readouts, model output, pricing runs. It is a VISUAL device: never put copy a visitor has to read carefully inside one. */ .cf-term { position: relative; overflow: hidden; background: var(--cf-canvas-2); border: 1px solid var(--cf-line-2); border-radius: var(--cf-r-3); box-shadow: var(--cf-shadow-2); font-family: var(--cf-font-mono); } .cf-term__bar { display: flex; align-items: center; gap: 0.6rem; padding: 0.6rem 0.9rem; border-bottom: 1px solid var(--cf-line); background: var(--cf-tint); font-size: 0.68rem; letter-spacing: 0.16em; text-transform: uppercase; color: var(--cf-faint); } .cf-term__dots { display: flex; gap: 5px; } .cf-term__dots i { width: 7px; height: 7px; border-radius: 50%; background: var(--cf-line-2); display: block; } .cf-term__dots i:first-child { background: rgba(247,106,12,0.55); } .cf-term__body { padding: 1rem 1.1rem; font-size: 0.8rem; line-height: 1.85; color: var(--cf-text); } .cf-term__row { display: flex; align-items: baseline; justify-content: space-between; gap: 1rem; white-space: nowrap; } .cf-term__row + .cf-term__row { border-top: 1px dashed rgba(125,171,224,0.12); padding-top: 0.35rem; margin-top: 0.35rem; } .cf-term__k { color: var(--cf-faint); } .cf-term__v { color: var(--cf-accent-ink); font-variant-numeric: tabular-nums; } .cf-term__v--up { color: var(--cf-up); } .cf-term__v--down { color: var(--cf-down); } .cf-term__v--amber { color: var(--cf-amber-ink); } .cf-term__scan { position: absolute; left: 0; right: 0; top: 0; height: 1px; pointer-events: none; background: linear-gradient(90deg, transparent, rgba(127,210,255,0.55), transparent); animation: cf-scan 7s linear infinite; } .cf-term__cursor { display: inline-block; width: 7px; height: 1em; background: var(--cf-accent-ink); vertical-align: -2px; animation: cf-glow-pulse 1.1s steps(1, end) infinite; } /* ══ Ticker / tape row (built on .cf-marquee from motion.ts) ══════════════ */ .cf-tape { border-top: 1px solid var(--cf-line); border-bottom: 1px solid var(--cf-line); background: var(--cf-canvas-2); } .cf-tape__item { display: inline-flex; align-items: baseline; gap: 0.6rem; padding: 0.75rem 1.5rem; font-family: var(--cf-font-mono); font-size: 0.78rem; color: var(--cf-muted); white-space: nowrap; border-right: 1px solid var(--cf-line); } .cf-tape__item b { color: var(--cf-ink); font-weight: 600; } .cf-tape__item .up { color: var(--cf-up); } .cf-tape__item .down { color: var(--cf-down); } /* ══ Media frames ═════════════════════════════════════════════════════════ */ .cf-frame { position: relative; overflow: hidden; border-radius: var(--cf-r-3); border: 1px solid var(--cf-line-2); box-shadow: var(--cf-shadow-2); } .cf-frame img { width: 100%; height: 100%; object-fit: cover; } /* Photography on this site is GRADED, never raw: ungraded stock competes with the copy for attention and breaks the near-black palette. */ .cf-frame--graded img { filter: none; } .cf-frame::after { content: ""; position: absolute; inset: 0; pointer-events: none; background: none; } .cf-frame--plain::after { display: none; } /* ══ CTA band ═════════════════════════════════════════════════════════════ */ .cf-cta { position: relative; overflow: hidden; text-align: center; padding: clamp(3.5rem, 7vw, 6rem) var(--cf-pad-x); background: radial-gradient(ellipse 60% 80% at 50% 120%, rgba(6,147,227,0.28), transparent 70%), linear-gradient(180deg, var(--cf-surface), var(--cf-canvas)); border-top: 1px solid var(--cf-line); } .cf-cta__inner { position: relative; z-index: var(--cf-z-base); max-width: 46rem; margin: 0 auto; } .cf-cta h2 { margin-bottom: 1rem; } .cf-cta p { color: var(--cf-muted); font-size: var(--cf-t-lede); } .cf-cta .cf-btnrow { justify-content: center; } /* ══ Disclaimer ═══════════════════════════════════════════════════════════ */ .cf-disclaimer { font-size: 0.76rem; line-height: 1.7; color: var(--cf-faint); border-top: 1px solid var(--cf-line); padding-top: 1.4rem; margin-top: 2.5rem; max-width: 92ch; } .cf-sr { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; } /* ══════════════════════════════════════════════════════════════════════════ 1. HERO — cinematic, full-bleed, five stacked layers. The negative top margin pulls the band up UNDER the sticky glass header (which is transparent until .is-stuck), so the photograph runs edge to edge behind the nav instead of starting below a 76px letterbox. Layer order: media 0 · scrim 1 · node field + glows 2 · content 3. ══════════════════════════════════════════════════════════════════════════ */ .cf-home-hero { position: relative; overflow: hidden; isolation: isolate; background: var(--cf-canvas-2); margin-top: calc(-1 * var(--cf-header-h)); padding: calc(var(--cf-header-h) + clamp(3rem, 7vw, 5.5rem)) 0 clamp(2.5rem, 5vw, 4.5rem); } /* Inset beyond the frame on the vertical axis so the parallax translate can never expose an edge. */ .cf-home-hero__media { position: absolute; inset: -9% 0 -7% 0; z-index: 0; pointer-events: none; } .cf-home-hero__img { width: 100%; height: 100%; object-fit: cover; /* Photography here is GRADED, never raw — an untreated stock exterior at full saturation fights the headline and breaks the near-black palette. */ filter: saturate(0.5) brightness(0.46) contrast(1.1); transform: scale(1.06); animation: cf-kenburns 34s ease-in-out infinite alternate; } .cf-home-hero__scrim { position: absolute; inset: 0; z-index: 1; pointer-events: none; background: linear-gradient(100deg, var(--cf-canvas) 4%, rgba(6,11,20,0.90) 34%, rgba(6,11,20,0.52) 66%, rgba(6,11,20,0.82) 100%), radial-gradient(ellipse 62% 58% at 16% 6%, rgba(6,147,227,0.22), transparent 70%), var(--cf-grad-veil); } .cf-home-hero .cf-nodefield__wrap, .cf-home-hero .cf-band__glow { z-index: 2; } .cf-home-hero__inner { position: relative; z-index: 3; } .cf-home-hero__grid { display: grid; grid-template-columns: 1.06fr 0.94fr; gap: clamp(2.25rem, 4.5vw, 4rem); align-items: center; } .cf-home-hero__grid > * { min-width: 0; } @media (max-width: 1000px) { .cf-home-hero__grid { grid-template-columns: minmax(0, 1fr); gap: 2.75rem; } } .cf-home-hero__kicker { display: flex; flex-wrap: wrap; align-items: center; gap: 0.7rem; margin-bottom: 1.25rem; } .cf-home-hero h1 { margin: 0; } .cf-home-hero .cf-lede { max-width: 54ch; } .cf-home-hero__meta { display: flex; flex-wrap: wrap; align-items: center; gap: 0.6rem 1.4rem; margin-top: 1.9rem; padding-top: 1.3rem; border-top: 1px solid var(--cf-line); font-family: var(--cf-font-mono); font-size: 0.72rem; letter-spacing: 0.13em; text-transform: uppercase; color: var(--cf-muted); } .cf-home-hero__meta b { color: var(--cf-accent-ink); font-weight: 600; } /* ── The pricing-engine micro-widget ────────────────────────────────────── A decorative instrument, aria-hidden: it illustrates that a machine is pricing continuously. Never put copy a visitor must read inside it. */ .cf-home-panel { position: relative; } .cf-home-widget { width: 100%; } .cf-home-widget .cf-term__body { display: grid; gap: 0.85rem; } .cf-home-widget__head { display: flex; align-items: baseline; justify-content: space-between; gap: 1rem; font-size: 0.68rem; letter-spacing: 0.16em; text-transform: uppercase; color: var(--cf-faint); } .cf-home-widget__price { font-family: var(--cf-font-display); font-size: clamp(1.6rem, 3vw, 2.15rem); font-weight: 700; letter-spacing: -0.02em; line-height: 1; color: var(--cf-ink); } .cf-home-widget__price em { font-style: normal; color: var(--cf-amber-ink); } .cf-home-spark { display: block; width: 100%; height: clamp(72px, 11vw, 104px); overflow: visible; } .cf-home-spark__grid { stroke: rgba(125,171,224,0.12); stroke-width: 1; } .cf-home-spark__area { opacity: 0.5; animation: cf-home-fade 1.5s var(--cf-ease) 1.5s backwards; } .cf-home-spark__line { fill: none; stroke: var(--cf-accent-ink); stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; stroke-dasharray: 620; stroke-dashoffset: 0; animation: cf-home-draw 2.4s var(--cf-ease) 0.5s backwards; } .cf-home-spark__dot { fill: var(--cf-amber-ink); transform-box: fill-box; transform-origin: center; animation: cf-glow-pulse 2.3s ease-in-out infinite; } @keyframes cf-home-draw { from { stroke-dashoffset: 620; } to { stroke-dashoffset: 0; } } @keyframes cf-home-fade { from { opacity: 0; } } /* Floating readouts around the panel — the layered-depth tell. They ride pointer parallax at different depths, which is what makes the cluster read as three planes rather than one flat card. */ .cf-home-float { position: absolute; z-index: 4; display: inline-flex; align-items: center; gap: 0.5rem; padding: 0.5rem 0.85rem; border-radius: var(--cf-r-2); background: var(--cf-glass-2); border: 1px solid var(--cf-line-2); -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px); box-shadow: var(--cf-shadow-2); font-family: var(--cf-font-mono); font-size: 0.7rem; letter-spacing: 0.08em; color: var(--cf-text); white-space: nowrap; } .cf-home-float b { color: var(--cf-ink); font-weight: 700; } .cf-home-float .up { color: var(--cf-up); } .cf-home-float--tl { top: -1.1rem; left: -1.4rem; } .cf-home-float--br { bottom: -1.2rem; right: -1.1rem; } @media (max-width: 620px) { .cf-home-float { display: none; } } /* Scroll cue — a hairline that runs down its own track, forever. */ .cf-home-cue { display: inline-flex; align-items: center; gap: 0.7rem; margin-top: clamp(2rem, 4vw, 3rem); font-family: var(--cf-font-mono); font-size: 0.66rem; letter-spacing: 0.22em; text-transform: uppercase; color: var(--cf-faint); } .cf-home-cue::before { content: ""; width: 1px; height: 34px; background: linear-gradient(180deg, var(--cf-accent), transparent); transform-origin: 0 0; animation: cf-home-cue 2.6s var(--cf-ease) infinite; } @keyframes cf-home-cue { 0% { transform: scaleY(0.15); opacity: 0.2; } 45% { transform: scaleY(1); opacity: 1; } 100% { transform: scaleY(1); opacity: 0; } } /* ══════════════════════════════════════════════════════════════════════════ 2. TRUST STRIP — glass shelf riding the hero's bottom edge. auto-fit, not repeat(N): the chip list is editable, and an auto-fit track list cannot strand a trailing cell however many chips are seeded. ══════════════════════════════════════════════════════════════════════════ */ .cf-home-trustband { position: relative; z-index: 4; /* Rides UP over the hero's bottom edge — the shelf belongs to the hero composition, not to the band after it. */ margin-top: calc(-1 * clamp(1.5rem, 4vw, 3.25rem)); padding-bottom: clamp(2rem, 4vw, 3.25rem); } .cf-home-trust { display: grid; grid-template-columns: repeat(auto-fit, minmax(15.5rem, 1fr)); gap: 1px; background: var(--cf-line); border: 1px solid var(--cf-line-2); border-radius: var(--cf-r-3); overflow: hidden; box-shadow: var(--cf-shadow-2); } .cf-home-trustcard { display: flex; align-items: flex-start; gap: 0.85rem; padding: clamp(1.1rem, 2vw, 1.5rem); background: var(--cf-glass-2); -webkit-backdrop-filter: blur(16px); backdrop-filter: blur(16px); transition: background var(--cf-d-2) var(--cf-ease); } .cf-home-trustcard:hover { background: var(--cf-elevated); } .cf-home-trustcard__ic { flex: none; width: 38px; height: 38px; display: grid; place-items: center; border-radius: var(--cf-r-2); color: var(--cf-accent-ink); background: linear-gradient(150deg, rgba(6,147,227,0.18), rgba(6,147,227,0.04)); box-shadow: inset 0 0 0 1px var(--cf-line-2); } .cf-home-trustcard__ic svg { width: 19px; height: 19px; } .cf-home-trustcard__t { display: block; font-family: var(--cf-font-display); font-weight: 600; font-size: 0.98rem; line-height: 1.35; color: var(--cf-ink); letter-spacing: -0.01em; } .cf-home-trustcard__d { display: block; margin-top: 0.35rem; font-size: 0.85rem; line-height: 1.6; color: var(--cf-muted); } /* The tape rows sit on --cf-canvas-2; the shared marquee edge fade is written against --cf-canvas, which leaves a visible pair of seams at both ends. */ .cf-tape.cf-marquee::before { background: linear-gradient(90deg, var(--cf-canvas-2), transparent); } .cf-tape.cf-marquee::after { background: linear-gradient(270deg, var(--cf-canvas-2), transparent); } /* ══════════════════════════════════════════════════════════════════════════ 3. HOW IT WORKS — three sequenced steps over a connector that draws itself. The connector is a SIBLING of the grid, not a child: a decorative child would shift every :nth-child index the quantity caps below depend on. ══════════════════════════════════════════════════════════════════════════ */ .cf-home-flowwrap { position: relative; } .cf-home-flow__line { position: absolute; top: 2.35rem; left: 8%; right: 8%; height: 1px; pointer-events: none; } .cf-home-flow__line::after { content: ""; position: absolute; inset: 0; background: linear-gradient(90deg, transparent, var(--cf-line-live) 12%, var(--cf-accent) 50%, var(--cf-line-live) 88%, transparent); transform-origin: 0 50%; } .cf .cf-home-flow__line.cf-reveal.is-visible::after { animation: cf-home-draw-x 1.5s var(--cf-ease) backwards; animation-delay: calc(var(--cf-d, 0ms) + 120ms); } @keyframes cf-home-draw-x { from { transform: scaleX(0); } to { transform: scaleX(1); } } @media (max-width: 900px) { .cf-home-flow__line { display: none; } } .cf-home-flow { display: grid; gap: clamp(1.5rem, 3vw, 2.75rem); grid-template-columns: repeat(3, minmax(0, 1fr)); } /* 901px = this grid's own largest max-width breakpoint (900px) + 1. */ @media (min-width: 901px) { .cf-home-flow:has(> :nth-child(2):last-child) { grid-template-columns: repeat(2, minmax(0, 1fr)); max-width: 58rem; margin-inline: auto; } .cf-home-flow:has(> :only-child) { grid-template-columns: minmax(0, 34rem); margin-inline: auto; } } @media (max-width: 900px) { .cf-home-flow { grid-template-columns: minmax(0, 1fr); } } .cf-home-stepcard { position: relative; padding-top: 4.4rem; } .cf-home-stepcard__num { position: absolute; top: 0; left: 0; width: 3.1rem; height: 3.1rem; display: grid; place-items: center; border-radius: 50%; background: var(--cf-canvas); box-shadow: inset 0 0 0 1px var(--cf-line-live), 0 0 34px -10px var(--cf-accent-glow); font-family: var(--cf-font-mono); font-size: 0.9rem; font-weight: 700; color: var(--cf-accent-ink); letter-spacing: 0.04em; } .cf-home-stepcard__num::after { content: ""; position: absolute; inset: -5px; border-radius: 50%; border: 1px solid var(--cf-line-live); opacity: 0.5; animation: cf-home-ping 3.4s var(--cf-ease) infinite; } @keyframes cf-home-ping { 0% { transform: scale(0.86); opacity: 0.7; } 70% { transform: scale(1.28); opacity: 0; } 100% { transform: scale(1.28); opacity: 0; } } .cf-home-stepcard h3 { margin-bottom: 0.6rem; } .cf-home-stepcard p { color: var(--cf-muted); font-size: 0.94rem; line-height: 1.72; } /* ══════════════════════════════════════════════════════════════════════════ 4. AI SHOWPIECE — the page's memorable moment. A console: model readout, a live score distribution that builds bar by bar, and the drawn allocation bars beside it. ══════════════════════════════════════════════════════════════════════════ */ .cf-home-ai { position: relative; overflow: hidden; } /* The gutter is deliberately generous: the console is a dense, high-contrast object and the prose beside it is not, so a tight gap made the paragraph feel pinned to the chart's edge rather than set beside it. */ .cf-home-ai__grid { display: grid; grid-template-columns: 1.15fr 0.85fr; gap: clamp(2.5rem, 6vw, 5.5rem); align-items: center; } .cf-home-ai__grid > * { min-width: 0; } @media (max-width: 980px) { .cf-home-ai__grid { grid-template-columns: minmax(0, 1fr); } } .cf-home-console { position: relative; overflow: hidden; } .cf-home-console .cf-term__body { display: grid; gap: 1.15rem; } .cf-home-hist { display: flex; align-items: flex-end; gap: clamp(3px, 0.55vw, 7px); height: clamp(8.5rem, 17vw, 12.5rem); padding-top: 0.5rem; border-bottom: 1px solid var(--cf-line-2); } .cf-home-hist__col { flex: 1 1 0; min-width: 0; height: calc(var(--h, 0.5) * 100%); border-radius: var(--cf-r-1) var(--cf-r-1) 0 0; background: linear-gradient(180deg, var(--cf-accent-ink) 0%, rgba(6,147,227,0.42) 55%, rgba(6,147,227,0.10) 100%); box-shadow: 0 0 20px -10px var(--cf-accent-glow); transform-origin: 50% 100%; } /* One bucket carries the amber signal: the pool's clearing level. Amber is a priced datum in this family, and there is exactly one of them here. */ .cf-home-hist__col--bid { background: linear-gradient(180deg, var(--cf-amber-ink) 0%, rgba(247,106,12,0.45) 55%, rgba(247,106,12,0.10) 100%); box-shadow: 0 0 22px -8px rgba(247,106,12,0.55); } .cf .cf-reveal.is-visible .cf-home-hist__col { animation: cf-home-rise 0.8s var(--cf-ease) backwards; animation-delay: calc(var(--cf-d, 0ms) + var(--i, 0) * 52ms); } @keyframes cf-home-rise { from { transform: scaleY(0.04); opacity: 0.15; } to { transform: none; opacity: 1; } } /* ── Keeping the chart alive after it has built ─────────────────────────── The build is a one-shot: scroll past it and the histogram is a static picture from then on, which is exactly what a "score distribution, live" should NOT look like. Three continuous, cheap layers run afterwards. All three are transform/opacity only, and all three are pure CSS animation, so the family's blanket prefers-reduced-motion rule switches them off with everything else. They also start AFTER the build (animation-delay past the staggered rise) so they never fight the entrance. */ /* 1. The buckets breathe — each column drifts on its own slightly different period, so the field never pulses in unison (which would read as a flashing UI rather than as data settling). */ .cf .cf-reveal.is-visible .cf-home-hist__col::after { content: ""; position: absolute; inset: 0; border-radius: inherit; background: linear-gradient(180deg, rgba(255,255,255,0.18), transparent 60%); opacity: 0; animation: cf-home-breathe 4.2s var(--cf-ease) infinite; animation-delay: calc(900ms + var(--i, 0) * 130ms); } .cf-home-hist__col { position: relative; } @keyframes cf-home-breathe { 0%, 100% { opacity: 0; } 50% { opacity: 0.5; } } /* 2. A scan sweeps the distribution left to right — the model re-reading the tape. Masked to the histogram box so it cannot spill into the readout. */ .cf-home-hist { position: relative; overflow: hidden; } .cf .cf-reveal.is-visible .cf-home-hist::after { content: ""; position: absolute; top: 0; bottom: 0; width: 26%; background: linear-gradient(90deg, transparent, rgba(127,210,255,0.13), transparent); transform: translateX(-120%); animation: cf-home-scan 5.6s linear infinite; animation-delay: 1.4s; pointer-events: none; } @keyframes cf-home-scan { to { transform: translateX(460%); } } /* 3. The clearing level keeps its glow moving. Exactly one column does this — it is the one number on the panel that means something. */ .cf .cf-reveal.is-visible .cf-home-hist__col--bid { animation: cf-home-rise 0.8s var(--cf-ease) backwards, cf-home-bidglow 3.4s var(--cf-ease) 1.2s infinite; } @keyframes cf-home-bidglow { 0%, 100% { box-shadow: 0 0 22px -8px rgba(247,106,12,0.55); } 50% { box-shadow: 0 0 30px -4px rgba(247,106,12,0.85); } } .cf-home-hist__axis { display: flex; justify-content: space-between; font-family: var(--cf-font-mono); font-size: 0.64rem; letter-spacing: 0.12em; text-transform: uppercase; color: var(--cf-faint); } .cf-home-ai__bars { display: grid; gap: 1.15rem; margin-top: 2rem; } .cf-home-ai__note { margin-top: 1.6rem; font-family: var(--cf-font-mono); font-size: 0.72rem; letter-spacing: 0.1em; color: var(--cf-faint); } /* ══════════════════════════════════════════════════════════════════════════ 5. WHY — split with a mask-wiped, parallaxed image. ══════════════════════════════════════════════════════════════════════════ */ .cf-home-why__media { position: relative; } .cf-home-why__frame { aspect-ratio: 4 / 3.2; } .cf-home-why__frame img { width: 100%; height: 100%; object-fit: cover; } .cf-home-why__stamp { position: absolute; left: clamp(-0.5rem, -1vw, -1.5rem); bottom: -1.25rem; z-index: 2; display: grid; gap: 0.2rem; padding: 0.9rem 1.2rem; background: var(--cf-glass-2); border: 1px solid var(--cf-line-2); border-radius: var(--cf-r-3); -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px); box-shadow: var(--cf-shadow-2); } .cf-home-why__stamp b { font-family: var(--cf-font-display); font-size: 1.5rem; line-height: 1; color: var(--cf-ink); letter-spacing: -0.02em; } .cf-home-why__stamp span { font-family: var(--cf-font-mono); font-size: 0.64rem; letter-spacing: 0.16em; text-transform: uppercase; color: var(--cf-muted); } .cf-home-why__body { color: var(--cf-text); line-height: 1.78; } .cf-home-why__body > * + * { margin-top: 1.05rem; } .cf-home-why__body strong { color: var(--cf-ink); } .cf-home-why__body a { color: var(--cf-accent-ink); } /* ══════════════════════════════════════════════════════════════════════════ 6. AUDIENCE — compact tiles, icon over label. ══════════════════════════════════════════════════════════════════════════ */ .cf-home-aud { align-items: center; text-align: center; } .cf-home-aud .cf-card__ic { margin-inline: auto; } .cf-home-aud__label { font-family: var(--cf-font-display); font-weight: 600; font-size: 1rem; color: var(--cf-ink); letter-spacing: -0.01em; } /* ══════════════════════════════════════════════════════════════════════════ 7. FAQ — question column left, accordion right. ══════════════════════════════════════════════════════════════════════════ */ .cf-home-faq { display: grid; grid-template-columns: 0.78fr 1.22fr; gap: clamp(2rem, 4vw, 3.5rem); align-items: start; } .cf-home-faq > * { min-width: 0; } .cf-home-faq__aside { position: sticky; top: calc(var(--cf-header-h) + 1.5rem); } @media (max-width: 900px) { .cf-home-faq { grid-template-columns: minmax(0, 1fr); } .cf-home-faq__aside { position: static; } } /* ══════════════════════════════════════════════════════════════════════════ 8. CLOSING CTA — glow panel over the ambient field. ══════════════════════════════════════════════════════════════════════════ */ .cf-home-cta { position: relative; overflow: hidden; } .cf-home-cta .cf-cta__inner { z-index: 3; } .cf-home-cta .cf-nodefield__wrap { z-index: 1; } .cf-home-ctaglow { position: absolute; z-index: 2; left: 50%; top: 50%; width: min(52rem, 120%); height: 26rem; transform: translate(-50%, -50%); pointer-events: none; filter: blur(60px); opacity: 0.55; background: radial-gradient(ellipse at center, var(--cf-accent-glow), transparent 62%); } /* ══ 1. Interior page hero ════════════════════════════════════════════════ A cinematic band, not a photo with a caption: node field + drifting glow + a graded frame that mask-wipes up while the copy rises. */ .cf-ia-hero { position: relative; overflow: hidden; padding: clamp(4.5rem, 10vw, 8rem) 0 clamp(3.25rem, 7vw, 5.5rem); } .cf-ia-hero__grid { display: grid; grid-template-columns: 1.06fr 0.94fr; gap: clamp(2rem, 5vw, 4.5rem); align-items: center; } .cf-ia-hero__grid > * { min-width: 0; } /* A hero with no image field renders one child; without this it would hold a dead 0.94fr column. Wrapped in a min-width query because :has() carries specificity and would otherwise outrank the phone rule below. 941px = this grid's largest max-width breakpoint (940px) + 1. */ @media (min-width: 941px) { .cf-ia-hero__grid:has(> :only-child) { grid-template-columns: minmax(0, 62rem); } } @media (max-width: 940px) { .cf-ia-hero__grid { grid-template-columns: minmax(0, 1fr); gap: 2.75rem; } } /* Monospace key/value rail under the hero copy — the "instrument" tell that separates this from a brochure hero. */ .cf-ia-rail { display: flex; flex-wrap: wrap; gap: 0.75rem 2.2rem; margin-top: clamp(1.9rem, 4vw, 2.6rem); padding-top: 1.35rem; border-top: 1px solid var(--cf-line); } .cf-ia-rail__item { display: grid; gap: 0.3rem; } .cf-ia-rail__k { font-family: var(--cf-font-mono); font-size: 0.64rem; font-weight: 600; letter-spacing: 0.18em; text-transform: uppercase; color: var(--cf-faint); } .cf-ia-rail__v { font-family: var(--cf-font-mono); font-size: 0.92rem; font-weight: 500; color: var(--cf-ink); font-variant-numeric: tabular-nums; } .cf-ia-rail__v em { font-style: normal; color: var(--cf-accent-ink); } /* Figure stack: the frame plus an overlapping glass readout. */ .cf-ia-figstack { position: relative; } .cf-ia-fig { aspect-ratio: 4 / 3.1; } .cf-ia-fig img { display: block; } /* The mask-wipe wrapper must fill the frame, or the image collapses to its intrinsic height the moment .cf-clip is introduced. */ .cf-ia-fig > .cf-clip, .cf-ia-story__media .cf-clip { display: block; width: 100%; height: 100%; } /* Corner registration ticks. Static, purely optical — they make the frame read as a viewport onto data rather than as a stock photo. */ .cf-ia-fig::before { content: ""; position: absolute; z-index: 2; pointer-events: none; top: 0.7rem; left: 0.7rem; width: 1.6rem; height: 1.6rem; border-top: 1px solid var(--cf-line-live); border-left: 1px solid var(--cf-line-live); } .cf-ia-fig__tick { position: absolute; z-index: 2; pointer-events: none; right: 0.7rem; bottom: 0.7rem; width: 1.6rem; height: 1.6rem; border-bottom: 1px solid var(--cf-line-live); border-right: 1px solid var(--cf-line-live); } .cf-ia-float { position: absolute; z-index: 3; left: clamp(-0.5rem, -1vw, 0rem); bottom: -1.4rem; min-width: min(19rem, 82%); padding: 0.95rem 1.15rem; background: var(--cf-glass); -webkit-backdrop-filter: blur(16px); backdrop-filter: blur(16px); border: 1px solid var(--cf-line-2); border-radius: var(--cf-r-3); box-shadow: var(--cf-shadow-3); } .cf-ia-float__row { display: flex; align-items: baseline; justify-content: space-between; gap: 1rem; } .cf-ia-float__row + .cf-ia-float__row { margin-top: 0.5rem; padding-top: 0.5rem; border-top: 1px dashed rgba(125,171,224,0.14); } .cf-ia-float__k { font-family: var(--cf-font-mono); font-size: 0.66rem; letter-spacing: 0.14em; text-transform: uppercase; color: var(--cf-faint); } .cf-ia-float__v { font-family: var(--cf-font-mono); font-size: 0.86rem; color: var(--cf-ink); font-variant-numeric: tabular-nums; } .cf-ia-float__v--accent { color: var(--cf-accent-ink); } .cf-ia-float__v--amber { color: var(--cf-amber-ink); } @media (max-width: 640px) { .cf-ia-float { position: static; margin-top: 1rem; min-width: 0; width: 100%; } } /* ══ 2. Story split — mask-wipe media, floating caption ═══════════════════ */ .cf-ia-story__media { position: relative; } .cf-ia-story__media .cf-frame { aspect-ratio: 4 / 3.4; } .cf-ia-quote { margin-top: 1.6rem; padding-left: 1.15rem; border-left: 2px solid transparent; border-image: var(--cf-grad-edge) 1; font-family: var(--cf-font-display); font-size: clamp(1.02rem, 1.6vw, 1.22rem); line-height: 1.6; color: var(--cf-ink); text-wrap: balance; } .cf-ia-quote__by { display: block; margin-top: 0.6rem; font-family: var(--cf-font-mono); font-size: 0.68rem; font-weight: 600; letter-spacing: 0.16em; text-transform: uppercase; color: var(--cf-muted); } /* ══ 3. The engine pipeline — a connector that DRAWS itself ═══════════════ */ .cf-ia-pipe { position: relative; display: grid; gap: clamp(1rem, 2vw, 1.5rem); } .cf .cf-ia-pipe { grid-template-columns: repeat(4, minmax(0, 1fr)); } /* 1081px = this grid's largest max-width breakpoint (1080px) + 1. */ @media (min-width: 1081px) { .cf .cf-ia-pipe:has(> :nth-child(3):last-child) { grid-template-columns: repeat(3, minmax(0, 1fr)); } .cf .cf-ia-pipe:has(> :nth-child(2):last-child) { grid-template-columns: repeat(2, minmax(0, 1fr)); max-width: 62rem; } .cf .cf-ia-pipe:has(> :only-child) { grid-template-columns: minmax(0, 34rem); } } @media (max-width: 1080px) { .cf .cf-ia-pipe { grid-template-columns: repeat(2, minmax(0, 1fr)); } } @media (max-width: 620px) { .cf .cf-ia-pipe { grid-template-columns: minmax(0, 1fr); } } /* The connector rides behind the stages at the height of their index row. */ .cf-ia-pipe__line { position: absolute; z-index: 0; left: 0; right: 0; top: 2.35rem; height: 1px; background: linear-gradient(90deg, var(--cf-accent), rgba(6,147,227,0.15) 70%, transparent); transform: scaleX(1); transform-origin: 0 50%; } .cf.cf-motion-ready .cf-reveal:not(.is-visible) .cf-ia-pipe__line { transform: scaleX(0); } .cf .cf-reveal.is-visible .cf-ia-pipe__line { transition: transform var(--cf-d-5) var(--cf-ease); transition-delay: var(--cf-d, 0ms); } @media (max-width: 620px) { .cf-ia-pipe__line { display: none; } } .cf-ia-stage { position: relative; z-index: 1; padding: 1.35rem 1.25rem 1.5rem; background: var(--cf-elevated); border: 1px solid var(--cf-line); border-radius: var(--cf-r-3); box-shadow: var(--cf-shadow-1); transition: border-color var(--cf-d-2) var(--cf-ease), background var(--cf-d-2) var(--cf-ease); } .cf-ia-stage:hover { border-color: var(--cf-line-live); background: var(--cf-raised); } .cf-ia-stage__head { display: flex; align-items: center; gap: 0.65rem; margin-bottom: 0.95rem; } .cf-ia-stage__dot { width: 9px; height: 9px; border-radius: 50%; flex: none; background: var(--cf-accent); box-shadow: 0 0 0 4px var(--cf-accent-soft), 0 0 14px var(--cf-accent-glow); } .cf-ia-stage__n { font-family: var(--cf-font-mono); font-size: 0.66rem; font-weight: 700; letter-spacing: 0.2em; text-transform: uppercase; color: var(--cf-accent-ink); } .cf-ia-stage__ic { color: var(--cf-accent-ink); margin-left: auto; opacity: 0.7; } .cf-ia-stage__ic svg { width: 17px; height: 17px; } .cf-ia-stage h3 { font-size: 1.02rem; margin: 0 0 0.45rem; } .cf-ia-stage p { font-size: 0.88rem; line-height: 1.66; color: var(--cf-muted); margin: 0; } .cf-ia-stage__meter { margin-top: 1.05rem; } /* ══ 4. Numbered process with a drawn spine ═══════════════════════════════ */ /* The wrapper owns positioning so the connector line can be a SIBLING of the grid. Keeping the line inside the grid made it child 1, which shifted every :nth-child() index the quantity caps below depend on. See CfServicesTemplate. */ .cf-ia-steps__wrap { position: relative; } .cf-ia-steps { display: grid; gap: clamp(1.4rem, 3vw, 2.4rem); } .cf .cf-ia-steps { grid-template-columns: repeat(4, minmax(0, 1fr)); } /* 1081px = this grid's largest max-width breakpoint (1080px) + 1. */ @media (min-width: 1081px) { .cf .cf-ia-steps:has(> :nth-child(3):last-child) { grid-template-columns: repeat(3, minmax(0, 1fr)); } .cf .cf-ia-steps:has(> :nth-child(2):last-child) { grid-template-columns: repeat(2, minmax(0, 1fr)); max-width: 62rem; } .cf .cf-ia-steps:has(> :only-child) { grid-template-columns: minmax(0, 34rem); } } @media (max-width: 1080px) { .cf .cf-ia-steps { grid-template-columns: repeat(2, minmax(0, 1fr)); } } @media (max-width: 620px) { .cf .cf-ia-steps { grid-template-columns: minmax(0, 1fr); } } .cf-ia-steps__line { position: absolute; z-index: 0; left: 0; right: 0; top: 0.55rem; height: 1px; background: var(--cf-grad-edge); transform: scaleX(1); transform-origin: 0 50%; } .cf.cf-motion-ready .cf-reveal:not(.is-visible) .cf-ia-steps__line { transform: scaleX(0); } .cf .cf-reveal.is-visible .cf-ia-steps__line { transition: transform var(--cf-d-5) var(--cf-ease); transition-delay: var(--cf-d, 0ms); } @media (max-width: 620px) { .cf-ia-steps__line { display: none; } } /* The shared .cf-step already draws its own hairline; inside the spine that would double the rule, so it is suppressed here. */ .cf-ia-steps .cf-step { position: relative; z-index: 1; } .cf-ia-steps .cf-step::before { display: none; } .cf-ia-steps .cf-step__num { display: inline-flex; align-items: center; justify-content: center; position: static; width: 2.2rem; height: 2.2rem; margin-bottom: 0.5rem; border-radius: var(--cf-r-2); background: var(--cf-canvas); box-shadow: inset 0 0 0 1px var(--cf-line-live); } /* ══ 5. Loan-program directory (cf_loans) ════════════════════════════════ A row, not a tile: index, glyph, name, blurb, eligibility chips and a mono metric block, so the directory carries real information density and reads as an index into the detail pages. */ .cf-ia-dir { display: grid; gap: clamp(0.85rem, 1.6vw, 1.15rem); } .cf-ia-prog { position: relative; display: grid; align-items: start; grid-template-columns: 3.6rem minmax(0, 1fr) minmax(0, 20rem); gap: clamp(1rem, 2.4vw, 2rem); padding: clamp(1.25rem, 2.4vw, 1.85rem); background: var(--cf-elevated); border: 1px solid var(--cf-line); border-radius: var(--cf-r-3); box-shadow: var(--cf-shadow-1); text-decoration: none; color: inherit; overflow: hidden; transition: transform var(--cf-d-2) var(--cf-ease), border-color var(--cf-d-2) var(--cf-ease), background var(--cf-d-2) var(--cf-ease), box-shadow var(--cf-d-2) var(--cf-ease); } .cf-ia-prog::before { content: ""; position: absolute; top: 0; left: 0; right: 0; height: 1px; background: var(--cf-grad-edge); opacity: 0.45; transition: opacity var(--cf-d-2) var(--cf-ease); } .cf-ia-prog:hover { transform: translateY(-3px); background: var(--cf-raised); border-color: var(--cf-line-live); box-shadow: var(--cf-shadow-2); } /* Must out-specify '.cf .cf-reveal.is-visible { transform: none }' (0,3,0). */ .cf .cf-ia-prog.cf-reveal.is-visible:hover { transform: translateY(-3px); } .cf-ia-prog:hover::before { opacity: 1; } @media (max-width: 940px) { .cf-ia-prog { grid-template-columns: 3rem minmax(0, 1fr); } .cf-ia-prog__side { grid-column: 1 / -1; } } @media (max-width: 560px) { .cf-ia-prog { grid-template-columns: minmax(0, 1fr); } .cf-ia-prog__side { grid-column: auto; } } .cf-ia-prog__glyph { display: grid; gap: 0.65rem; justify-items: start; } .cf-ia-prog__n { font-family: var(--cf-font-mono); font-size: 0.68rem; font-weight: 700; letter-spacing: 0.18em; color: var(--cf-faint); } .cf-ia-prog__ic { width: 42px; height: 42px; display: grid; place-items: center; border-radius: var(--cf-r-2); color: var(--cf-accent-ink); background: linear-gradient(150deg, rgba(6,147,227,0.16), rgba(6,147,227,0.04)); box-shadow: inset 0 0 0 1px var(--cf-line-2); } .cf-ia-prog__ic svg { width: 20px; height: 20px; } .cf-ia-prog__body h3 { font-size: clamp(1.06rem, 1.6vw, 1.24rem); margin: 0 0 0.5rem; } .cf-ia-prog__body p { font-size: 0.93rem; line-height: 1.68; color: var(--cf-muted); margin: 0; } .cf-ia-prog__chips { margin-top: 1rem; } .cf-ia-prog__foot { margin-top: 1.15rem; } .cf-ia-prog__side { display: grid; gap: 0.55rem; align-content: start; padding: 0.9rem 1rem; border-radius: var(--cf-r-2); background: var(--cf-tint); box-shadow: inset 0 0 0 1px var(--cf-line); } .cf-ia-prog__srow { display: flex; align-items: baseline; justify-content: space-between; gap: 1rem; } .cf-ia-prog__sk { font-family: var(--cf-font-mono); font-size: 0.64rem; letter-spacing: 0.14em; text-transform: uppercase; color: var(--cf-faint); } .cf-ia-prog__sv { font-family: var(--cf-font-mono); font-size: 0.84rem; color: var(--cf-ink); font-variant-numeric: tabular-nums; } .cf-ia-prog__sv--accent { color: var(--cf-accent-ink); } .cf-ia-prog__sv--amber { color: var(--cf-amber-ink); } /* ══ 6. Metric trio (used under the intro prose) ══════════════════════════ */ .cf-ia-metrics { display: grid; gap: 1px; background: var(--cf-line); border: 1px solid var(--cf-line); border-radius: var(--cf-r-3); overflow: hidden; } .cf .cf-ia-metrics { grid-template-columns: repeat(3, minmax(0, 1fr)); } /* 561px = this grid's largest max-width breakpoint (560px) + 1. */ @media (min-width: 561px) { .cf .cf-ia-metrics:has(> :nth-child(2):last-child) { grid-template-columns: repeat(2, minmax(0, 1fr)); } .cf .cf-ia-metrics:has(> :only-child) { grid-template-columns: minmax(0, 1fr); } } @media (max-width: 560px) { .cf .cf-ia-metrics { grid-template-columns: minmax(0, 1fr); } } .cf-ia-metric { padding: 1.05rem 1.15rem; background: var(--cf-canvas-2); } .cf-ia-metric__v { display: block; font-family: var(--cf-font-mono); font-size: 1.06rem; font-weight: 500; color: var(--cf-ink); font-variant-numeric: tabular-nums; } .cf-ia-metric__k { display: block; margin-top: 0.4rem; font-family: var(--cf-font-mono); font-size: 0.64rem; letter-spacing: 0.16em; text-transform: uppercase; color: var(--cf-muted); } /* ══ 7. Section-level helpers ═════════════════════════════════════════════ */ /* A band whose content must sit above an ambient canvas. */ .cf-ia-layer { position: relative; z-index: 1; } .cf-ia-band { position: relative; overflow: hidden; } /* Intro prose column with a hairline spine on the left at desktop widths. */ .cf-ia-intro { position: relative; } @media (min-width: 941px) { .cf-ia-intro { padding-left: 2rem; border-left: 1px solid transparent; border-image: var(--cf-grad-edge) 1; } } /* ══ Interior hero (all three templates) ══════════════════════════════════ A compact, cinematic page opener: node field + drifting glow + an optional photograph laid in as a MASKED, graded backdrop layer rather than as a full-bleed image — the copy has to stay the brightest thing on screen. */ .cf-ib-hero { padding-top: clamp(5rem, 9vw, 8rem); padding-bottom: clamp(3.5rem, 6vw, 5.5rem); overflow: hidden; } .cf-ib-hero__photo { position: absolute; inset: 0; z-index: 0; pointer-events: none; overflow: hidden; opacity: 0.42; -webkit-mask-image: linear-gradient(180deg, rgba(0,0,0,0.9), transparent 82%); mask-image: linear-gradient(180deg, rgba(0,0,0,0.9), transparent 82%); } .cf-ib-hero__photo img { width: 100%; height: 100%; object-fit: cover; filter: saturate(0.55) brightness(0.62) contrast(1.08); transform: scale(1.06); } .cf-ib-hero__photo::after { content: ""; position: absolute; inset: 0; background: var(--cf-grad-veil); } /* Mono meta rail under a hero — "kind · updated · read time". Decorative furniture that makes an otherwise bare legal page read as a document. */ .cf-ib-meta { display: flex; flex-wrap: wrap; align-items: center; gap: 0.55rem 1.4rem; margin-top: 1.6rem; padding-top: 1.1rem; border-top: 1px solid var(--cf-line); font-family: var(--cf-font-mono); font-size: 0.7rem; letter-spacing: 0.14em; text-transform: uppercase; color: var(--cf-muted); } .cf-ib-meta b { color: var(--cf-ink); font-weight: 600; } .cf-ib-meta svg { width: 14px; height: 14px; color: var(--cf-accent-ink); } .cf-ib-meta > span { display: inline-flex; align-items: center; gap: 0.45rem; } /* Hero media stack: a graded frame with a floating readout panel clipped to its lower-left corner. The float is absolutely positioned only where there is room for it; below 900px it returns to normal flow under the frame. */ .cf-ib-stack { position: relative; } /* THE FAMILY'S ONLY REAL CLS, fixed 2026-08-13. * * .cf-frame img is width:100% / height:100% / object-fit:cover (primitives.ts), * but a percentage height only resolves against a definite one — and .cf-ib-stack * above is position:relative with height:auto, so it computed to auto and * the loan-program hero image laid out at whatever ratio the downloaded bitmap * happened to have. That is an in-flow, above-the-fold image on the six most * commercially important interior pages: the layout jumped on every cold load. * * Every sibling frame in the family already reserves its box this way * (.cf-ia-fig 4/3.1, .cf-ia-story__media .cf-frame 4/3.4, .cf-home-why__frame * 4/3.2), which is why those eight images need no width/height attributes * either. This is the one that was missed. Ratio matches its neighbours. */ .cf-ib-stack .cf-frame { aspect-ratio: 4 / 3.2; } .cf-ib-float { margin-top: 1rem; background: var(--cf-glass-2); -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px); border: 1px solid var(--cf-line-2); border-radius: var(--cf-r-3); box-shadow: var(--cf-shadow-2); padding: 0.95rem 1.15rem; } .cf-ib-float__k { display: block; font-family: var(--cf-font-mono); font-size: 0.64rem; font-weight: 700; letter-spacing: 0.18em; text-transform: uppercase; color: var(--cf-faint); } .cf-ib-float__v { display: block; margin-top: 0.3rem; font-family: var(--cf-font-display); font-size: 1.35rem; font-weight: 700; letter-spacing: -0.02em; color: var(--cf-ink); font-variant-numeric: tabular-nums; } .cf-ib-float__v em { font-style: normal; color: var(--cf-amber-ink); } @media (min-width: 901px) { .cf-ib-float { position: absolute; left: -1.5rem; bottom: -1.5rem; margin-top: 0; min-width: 15rem; z-index: 2; } } /* ══ The step path — a sequenced spine that draws itself ═══════════════════ One column, a luminous rule down the left, a numbered node per step. The rule is a pseudo-element on the container so there is exactly one thing to animate, and it composites (scaleY) rather than relaying out. */ .cf-path { position: relative; display: grid; gap: clamp(1.6rem, 3vw, 2.6rem); padding-left: 3.6rem; } .cf-path::before { content: ""; position: absolute; left: 1.15rem; top: 0.6rem; bottom: 0.6rem; width: 2px; background: linear-gradient(180deg, var(--cf-accent), var(--cf-accent-deep) 62%, transparent); border-radius: var(--cf-r-pill); transform-origin: 50% 0; transform: scaleY(1); box-shadow: 0 0 18px -2px var(--cf-accent-glow); } /* Collapsed ONLY once the controller is live — see the header note. */ .cf.cf-motion-ready .cf-path.cf-reveal:not(.is-visible)::before { transform: scaleY(0); } .cf .cf-path.cf-reveal.is-visible::before { transform: scaleY(1); transition: transform 1.7s var(--cf-ease) 0.12s; } .cf-path__item { position: relative; } .cf-path__node { position: absolute; left: -3.6rem; top: 0; width: 2.3rem; height: 2.3rem; display: grid; place-items: center; border-radius: 50%; font-family: var(--cf-font-mono); font-size: 0.78rem; font-weight: 700; letter-spacing: 0.02em; color: var(--cf-accent-ink); background: radial-gradient(circle at 30% 25%, var(--cf-raised), var(--cf-canvas-2)); box-shadow: inset 0 0 0 1px var(--cf-line-live), 0 0 22px -6px var(--cf-accent-glow); } /* The node's own halo pulses in behind it, in step with its card's stagger — an animation, so it reads --cf-d rather than a transition-delay. */ .cf .cf-path__item.cf-reveal.is-visible .cf-path__node::after { content: ""; position: absolute; inset: -6px; border-radius: 50%; border: 1px solid var(--cf-line-live); animation: cf-ib-ping 1.4s var(--cf-ease) both; animation-delay: calc(var(--cf-d, 0ms) + 180ms); } @keyframes cf-ib-ping { from { opacity: 0.85; transform: scale(0.72); } to { opacity: 0; transform: scale(1.35); } } .cf-path__label { font-family: var(--cf-font-mono); font-size: 0.68rem; font-weight: 700; letter-spacing: 0.2em; text-transform: uppercase; color: var(--cf-faint); } .cf-path__item h3 { margin-top: 0.45rem; } .cf-path__item p { margin-top: 0.65rem; color: var(--cf-muted); line-height: 1.75; max-width: 62ch; } .cf-path__item > .cf-panel { padding: clamp(1.15rem, 2.2vw, 1.7rem); } @media (max-width: 620px) { .cf-path { padding-left: 2.9rem; gap: 1.6rem; } .cf-path::before { left: 0.85rem; } .cf-path__node { left: -2.9rem; width: 1.9rem; height: 1.9rem; font-size: 0.7rem; } } /* ══ Long-form document typography ════════════════════════════════════════ This is what makes a page whose only field is a body HTML blob — a privacy policy, a terms page, an unmapped CMS page — still look designed. It styles the tags an editor actually emits, and nothing else. */ .cf-doc { color: var(--cf-text); font-size: 1.02rem; line-height: 1.85; max-width: 72ch; } .cf-doc > * + * { margin-top: 1.15rem; } .cf-doc > :first-child { margin-top: 0; } .cf-doc h2 { margin-top: clamp(2.6rem, 4.5vw, 3.6rem); font-size: clamp(1.5rem, 2.4vw, 2rem); padding-top: 1.5rem; border-top: 1px solid var(--cf-line); } .cf-doc h3 { margin-top: 2.2rem; font-size: clamp(1.1rem, 1.6vw, 1.32rem); color: var(--cf-ink); } .cf-doc h4 { margin-top: 1.9rem; font-family: var(--cf-font-mono); font-size: 0.76rem; font-weight: 700; letter-spacing: 0.16em; text-transform: uppercase; color: var(--cf-accent-ink); } /* The opening paragraph carries the lede's weight without the editor having to mark it up — a plain blob still gets a designed entry point. */ .cf-doc > p:first-of-type { font-size: var(--cf-t-lede); line-height: 1.75; color: var(--cf-ink); } .cf-doc a { color: var(--cf-accent-ink); text-decoration: underline; text-underline-offset: 3px; text-decoration-thickness: 1px; text-decoration-color: var(--cf-line-live); transition: text-decoration-color var(--cf-d-1) var(--cf-ease); } .cf-doc a:hover { text-decoration-color: var(--cf-accent-ink); } .cf-doc strong, .cf-doc b { color: var(--cf-ink); font-weight: 600; } .cf-doc em { color: var(--cf-text); } .cf-doc small { color: var(--cf-muted); } .cf-doc ul, .cf-doc ol { padding-left: 1.3rem; display: grid; gap: 0.6rem; } .cf-doc li { line-height: 1.75; } .cf-doc li::marker { color: var(--cf-accent); font-family: var(--cf-font-mono); font-size: 0.85em; } .cf-doc li > ul, .cf-doc li > ol { margin-top: 0.6rem; } .cf-doc blockquote { margin: 1.8rem 0; padding: 0.15rem 0 0.15rem 1.4rem; border-left: 2px solid var(--cf-accent); color: var(--cf-ink); font-size: 1.08rem; line-height: 1.7; font-style: normal; } .cf-doc blockquote p + p { margin-top: 0.9rem; } .cf-doc hr { border: 0; height: 1px; background: var(--cf-grad-edge); margin: 2.6rem 0; } .cf-doc img { border-radius: var(--cf-r-3); border: 1px solid var(--cf-line-2); } .cf-doc figure { margin: 2rem 0; } .cf-doc figcaption { margin-top: 0.7rem; font-family: var(--cf-font-mono); font-size: 0.72rem; letter-spacing: 0.1em; text-transform: uppercase; color: var(--cf-faint); } .cf-doc code { font-family: var(--cf-font-mono); font-size: 0.86em; color: var(--cf-accent-ink); background: var(--cf-accent-soft); border: 1px solid var(--cf-line); border-radius: var(--cf-r-1); padding: 0.12em 0.38em; } .cf-doc pre { overflow-x: auto; padding: 1.1rem 1.2rem; border-radius: var(--cf-r-3); background: var(--cf-canvas-2); border: 1px solid var(--cf-line-2); font-family: var(--cf-font-mono); font-size: 0.84rem; line-height: 1.7; color: var(--cf-text); } .cf-doc pre code { background: none; border: 0; padding: 0; color: inherit; } /* Tables an editor pastes in get the family's table skin without the editor knowing about .cf-table. Wrapped in overflow so a wide table scrolls instead of pushing the page sideways. */ .cf-doc table { width: 100%; border-collapse: collapse; font-size: 0.9rem; margin: 1.8rem 0; border: 1px solid var(--cf-line); border-radius: var(--cf-r-3); overflow: hidden; background: var(--cf-canvas-2); } .cf-doc th { text-align: left; padding: 0.85rem 1rem; font-family: var(--cf-font-mono); font-size: 0.68rem; font-weight: 700; letter-spacing: 0.16em; text-transform: uppercase; color: var(--cf-muted); background: var(--cf-tint); border-bottom: 1px solid var(--cf-line-2); } .cf-doc td { padding: 0.85rem 1rem; border-bottom: 1px solid var(--cf-line); } .cf-doc tbody tr:last-child td { border-bottom: 0; } .cf-doc dl { display: grid; gap: 0.5rem; } .cf-doc dt { font-family: var(--cf-font-mono); font-size: 0.74rem; letter-spacing: 0.14em; text-transform: uppercase; color: var(--cf-accent-ink); } .cf-doc dd { margin: 0 0 0.9rem; color: var(--cf-muted); } /* Reading rail — a hairline to the left of the document that draws itself as the block enters, the same gesture as the step path's spine. NOT driven by --cf-progress: CfMotion writes that property onto the .cf-progress ELEMENT, not the root, so it does not inherit down here. A rail reading it would sit permanently at scaleY(0) — an invisible failure that looks exactly like "the designer wanted a plain hairline". */ .cf-doc-rail { position: relative; padding-left: clamp(1.25rem, 3vw, 2.25rem); } .cf-doc-rail::before { content: ""; position: absolute; left: 0; top: 0.35rem; bottom: 0.35rem; width: 1px; background: var(--cf-line); } .cf-doc-rail::after { content: ""; position: absolute; left: 0; top: 0.35rem; bottom: 0.35rem; width: 1px; background: linear-gradient(180deg, var(--cf-accent-ink), var(--cf-accent) 55%, transparent); transform-origin: 50% 0; transform: scaleY(1); box-shadow: 0 0 12px -2px var(--cf-accent-glow); } .cf.cf-motion-ready .cf-doc-rail.cf-reveal:not(.is-visible)::after { transform: scaleY(0); } .cf .cf-doc-rail.cf-reveal.is-visible::after { transform: scaleY(1); transition: transform 1.9s var(--cf-ease) 0.1s; } @media (max-width: 720px) { .cf-doc-rail { padding-left: 0; } .cf-doc-rail::before, .cf-doc-rail::after { display: none; } } /* ══ Document + aside layout ══════════════════════════════════════════════ Two columns only (never repeat(N>=3)), so no quantity query applies. The aside is sticky under the header and collapses above the body on tablet. */ .cf-ib-split { display: grid; grid-template-columns: minmax(0, 1fr) 20rem; gap: clamp(2rem, 4vw, 3.5rem); align-items: start; } @media (max-width: 980px) { .cf-ib-split { grid-template-columns: minmax(0, 1fr); } .cf-ib-split > aside { order: -1; } } .cf-ib-aside { position: sticky; top: calc(var(--cf-header-h) + 1.25rem); display: grid; gap: 1rem; } .cf-ib-aside h4 { font-family: var(--cf-font-mono); font-size: 0.7rem; font-weight: 700; letter-spacing: 0.18em; text-transform: uppercase; color: var(--cf-faint); margin: 0 0 0.85rem; } .cf-ib-aside p { font-size: 0.9rem; line-height: 1.7; color: var(--cf-muted); } .cf-ib-aside .cf-btn { width: 100%; } .cf-ib-aside ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 0.15rem; } .cf-ib-aside ul a { display: flex; align-items: center; gap: 0.6rem; padding: 0.55rem 0.65rem; border-radius: var(--cf-r-2); font-size: 0.88rem; color: var(--cf-text); text-decoration: none; transition: background var(--cf-d-1) var(--cf-ease), color var(--cf-d-1) var(--cf-ease); } .cf-ib-aside ul a:hover { background: var(--cf-accent-soft); color: var(--cf-accent-ink); } .cf-ib-aside ul svg { width: 15px; height: 15px; color: var(--cf-accent-ink); flex: none; } @media (max-width: 980px) { .cf-ib-aside { position: static; } } /* ══ Loan-detail specifics ════════════════════════════════════════════════ */ /* Eligibility / parameter rows — a definition table without a . */ .cf-spec { display: grid; gap: 0; border: 1px solid var(--cf-line); border-radius: var(--cf-r-3); overflow: hidden; background: var(--cf-canvas-2); } .cf-spec__row { display: flex; align-items: baseline; justify-content: space-between; gap: 1.25rem; padding: 0.85rem 1.1rem; border-bottom: 1px solid var(--cf-line); transition: background var(--cf-d-1) var(--cf-ease); } .cf-spec__row:last-child { border-bottom: 0; } .cf-spec__row:hover { background: rgba(6,147,227,0.05); } .cf-spec__k { font-family: var(--cf-font-mono); font-size: 0.72rem; letter-spacing: 0.12em; text-transform: uppercase; color: var(--cf-muted); } .cf-spec__v { font-family: var(--cf-font-mono); font-size: 0.86rem; color: var(--cf-ink); text-align: right; font-variant-numeric: tabular-nums; } /* Cross-program strip. The card is a link; the arrow is the affordance. */ .cf-xlink { display: flex; align-items: center; gap: 0.9rem; } .cf-xlink__ic { width: 38px; height: 38px; flex: none; display: grid; place-items: center; border-radius: var(--cf-r-2); color: var(--cf-accent-ink); background: linear-gradient(150deg, rgba(6,147,227,0.16), rgba(6,147,227,0.04)); box-shadow: inset 0 0 0 1px var(--cf-line-2); } .cf-xlink__ic svg { width: 19px; height: 19px; } .cf-xlink b { display: block; font-family: var(--cf-font-display); font-size: 1rem; color: var(--cf-ink); letter-spacing: -0.015em; } /* ══ Reduced motion ═══════════════════════════════════════════════════════ The kill switch in motion.ts removes animations and transitions, but it cannot undo a transform that a resting state applied. Everything in this file whose resting state exists ONLY to be animated is restored here. */ @media (prefers-reduced-motion: reduce) { .cf .cf-path::before, .cf.cf-motion-ready .cf-path.cf-reveal:not(.is-visible)::before { transform: scaleY(1) !important; } .cf .cf-path__item .cf-path__node::after { display: none !important; } .cf .cf-doc-rail::after, .cf.cf-motion-ready .cf-doc-rail.cf-reveal:not(.is-visible)::after { transform: scaleY(1) !important; } } /* ══ HERO ═══════════════════════════════════════════════════════════════════ Layer stack, back to front: graded photograph (scroll parallax) → veil → ambient node field → drifting glow → copy. */ .cf-contactpage .cf-cx-hero { overflow: hidden; padding-top: clamp(4.5rem, 11vw, 8rem); padding-bottom: clamp(3.5rem, 7vw, 6rem); } .cf-contactpage .cf-cx-hero__bg { position: absolute; /* Overscan: the parallax layer travels, and a flush inset would expose the canvas at the top or bottom of the band as it does. */ inset: -14% 0; z-index: 0; pointer-events: none; } .cf-contactpage .cf-cx-hero__bg img { width: 100%; height: 100%; object-fit: cover; /* Photography on this site is GRADED, never raw — see .cf-frame--graded. */ filter: saturate(0.55) brightness(0.5) contrast(1.08); } .cf-contactpage .cf-cx-hero__bg::after { content: ""; position: absolute; inset: 0; background: linear-gradient(100deg, var(--cf-canvas) 6%, rgba(6,11,20,0.72) 48%, rgba(6,11,20,0.35) 100%), var(--cf-grad-veil); } .cf-contactpage .cf-cx-hero__glowwrap { position: absolute; inset: 0; z-index: 0; pointer-events: none; } .cf-contactpage .cf-cx-hero__glow { top: -16rem; right: -12rem; opacity: 0.42; } .cf-contactpage .cf-cx-hero__wrap { position: relative; z-index: var(--cf-z-raise); } .cf-contactpage .cf-cx-hero__grid { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, 0.9fr); gap: clamp(2rem, 5vw, 4rem); align-items: center; } .cf-contactpage .cf-cx-hero__copy { min-width: 0; } .cf-contactpage .cf-cx-hero__live { margin-top: 1.6rem; } .cf-contactpage .cf-cx-hero__term { min-width: 0; } @media (max-width: 980px) { .cf-contactpage .cf-cx-hero__grid { grid-template-columns: minmax(0, 1fr); gap: 2.5rem; } } @media (max-width: 700px) { /* The terminal is a decorative device; on a phone it costs a screen of scroll before the visitor reaches the form, which is the page's job. */ .cf-contactpage .cf-cx-hero__term { display: none; } } /* The marquee's edge fades are authored against --cf-canvas; the tape sits on --cf-canvas-2, so unpatched they read as two faint vertical seams. */ .cf-contactpage .cf-tape.cf-marquee::before { background: linear-gradient(90deg, var(--cf-canvas-2), transparent); } .cf-contactpage .cf-tape.cf-marquee::after { background: linear-gradient(270deg, var(--cf-canvas-2), transparent); } /* ══ RAIL + FORM ════════════════════════════════════════════════════════════ Two columns only — no repeat(), so no quantity cap applies. */ .cf-contactpage .cf-cx-contact { scroll-margin-top: calc(var(--cf-header-h) + 16px); } .cf-contactpage .cf-cx-grid { display: grid; grid-template-columns: minmax(0, 0.84fr) minmax(0, 1.16fr); gap: clamp(1.5rem, 3.4vw, 2.75rem); align-items: start; } @media (max-width: 1024px) { .cf-contactpage .cf-cx-grid { grid-template-columns: minmax(0, 1fr); } } .cf-contactpage .cf-cx-railpanel { display: grid; gap: 1.5rem; overflow: hidden; } .cf-contactpage .cf-cx-railpanel::before { content: ""; position: absolute; top: 0; left: 0; right: 0; height: 1px; background: var(--cf-grad-edge); } @media (min-width: 1025px) { /* The form is the taller column; the rail follows the visitor down it. */ .cf-contactpage .cf-cx-rail { position: sticky; top: calc(var(--cf-header-h) + 1.25rem); } } .cf-contactpage .cf-cx-phone { display: grid; gap: 0.35rem; padding-bottom: 1.4rem; border-bottom: 1px solid var(--cf-line); } .cf-contactpage .cf-cx-phone__label { font-family: var(--cf-font-mono); font-size: 0.68rem; font-weight: 600; letter-spacing: 0.16em; text-transform: uppercase; color: var(--cf-muted); } .cf-contactpage .cf-cx-phone__num { font-family: var(--cf-font-mono); font-weight: 700; font-size: clamp(1.45rem, 2.6vw, 1.95rem); line-height: 1.15; letter-spacing: -0.01em; color: var(--cf-ink); text-decoration: none; font-variant-numeric: tabular-nums; transition: color var(--cf-d-1) var(--cf-ease), text-shadow var(--cf-d-2) var(--cf-ease); } a.cf-cx-phone__num:hover, a.cf-cx-phone__num:focus-visible { color: var(--cf-accent-ink); text-shadow: 0 0 26px var(--cf-accent-glow); } .cf-contactpage .cf-cx-info { list-style: none; margin: 0; padding: 0; display: grid; gap: 1.15rem; } .cf-contactpage .cf-cx-info__row { display: grid; grid-template-columns: 34px minmax(0, 1fr); gap: 0.85rem; align-items: start; } .cf-contactpage .cf-cx-info__ic { width: 34px; height: 34px; display: grid; place-items: center; border-radius: var(--cf-r-2); color: var(--cf-accent-ink); background: linear-gradient(150deg, rgba(6,147,227,0.18), rgba(6,147,227,0.04)); box-shadow: inset 0 0 0 1px var(--cf-line-2); } .cf-contactpage .cf-cx-info__ic svg { width: 17px; height: 17px; } .cf-contactpage .cf-cx-info__body { display: block; min-width: 0; font-size: 0.92rem; line-height: 1.7; color: var(--cf-text); } .cf-contactpage .cf-cx-info__label { display: block; margin-bottom: 0.2rem; font-family: var(--cf-font-mono); font-size: 0.64rem; font-weight: 700; letter-spacing: 0.16em; text-transform: uppercase; color: var(--cf-muted); } .cf-contactpage .cf-cx-info__body a { color: var(--cf-accent-ink); text-decoration: none; word-break: break-word; } .cf-contactpage .cf-cx-info__body a:hover { text-decoration: underline; } .cf-contactpage .cf-cx-rail__live { border-top: 1px solid var(--cf-line); padding-top: 1.25rem; } /* ── The form panel ──────────────────────────────────────────────────────── */ .cf-contactpage .cf-cx-formpanel { overflow: hidden; padding: clamp(1.4rem, 3vw, 2.4rem); background: radial-gradient(ellipse 70% 45% at 82% -8%, rgba(6,147,227,0.16), transparent 68%), linear-gradient(170deg, var(--cf-elevated), var(--cf-surface)); box-shadow: var(--cf-shadow-3); } .cf-contactpage .cf-cx-formpanel__edge { position: absolute; top: 0; left: 0; right: 0; height: 1px; background: var(--cf-grad-edge); } .cf-contactpage .cf-cx-formhead { margin-bottom: 1.6rem; } .cf-contactpage .cf-cx-formhead .cf-lede { font-size: 1rem; margin-top: 0.85rem; max-width: 52ch; } .cf-contactpage .cf-cx-formnote { margin-top: 1.4rem; border-top: 1px solid var(--cf-line); padding-top: 1.1rem; } /* ══ THE LIVE FORM ══════════════════════════════════════════════════════════ Rendered by app/_templates/cf/CfContactForm.tsx + CfFormFields.tsx — the family's OWN client component, in the family's own control vocabulary (.cf-field / .cf-label / .cf-input / .cf-form__row, all in ../primitives.ts). It used to be the platform's shared 'TenantFormClient', a light-theme Tailwind component, and everything below reached into that foreign markup by structure and by the Tailwind classes it happened to carry ('.text-red-600', '.border-gray-300', '.justify-between', inline 'background-color' needing !important). All of that is gone: the markup is ours now, the buttons are real '.cf-btn--primary's, and what is left here is only the extra DEPTH this panel wants over the family default — the recessed control fill, the accent focus glow, the validation states and the success panel. The swap was not cosmetic. TenantFormClient renders a VISIBLE Turnstile checkbox whose site key comes from resolveTurnstileSiteKey(hostname), which resolves the PLATFORM widget on *.workspacecms.ai — while the pop-up form on the same site used the TENANT widget. See CfContactForm.tsx. '.cf-cx-form' is also CfLeadModal's INLINE_FORM_SELECTOR sentinel. It is on the wrapper the template always renders, never on the form itself, so the bail-out survives the success state. */ .cf-contactpage .cf-cx-form { width: 100%; } .cf-contactpage .cf-cxf { gap: 1.15rem; } .cf-contactpage .cf-cxf__field { min-width: 0; } /* Controls. Base sizing/colour comes from .cf-input/.cf-select/.cf-textarea in primitives.ts; these add the depth and the state model this panel wants. */ .cf-contactpage .cf-cx-form :is(input, select, textarea):not([type="radio"]):not([type="checkbox"]) { background: var(--cf-canvas); border-color: var(--cf-line-2); border-radius: var(--cf-r-2); box-shadow: inset 0 1px 0 rgba(255,255,255,0.03); color: var(--cf-ink); } .cf-contactpage .cf-cx-form :is(input, select, textarea):not([type="radio"]):not([type="checkbox"]):hover { border-color: var(--cf-line-live); } /* Focus: accent glow. */ .cf-contactpage .cf-cx-form :is(input, select, textarea):not([type="radio"]):not([type="checkbox"]):focus { border-color: var(--cf-accent); background: rgba(6,147,227,0.08); box-shadow: inset 0 1px 0 rgba(255,255,255,0.04), 0 0 0 3px rgba(6,147,227,0.20), 0 0 26px -8px var(--cf-accent-glow); } /* THE FOCUS RING. primitives.ts sets outline:none on .cf-input:focus, which beats the token sheet's .cf :focus-visible — so without this rule a keyboard visitor gets a coloured border and no ring anywhere inside the form. Do not remove it as a duplicate of the token sheet; it is not one. */ .cf-contactpage .cf-cx-form :is(input, select, textarea, button, a):focus-visible { outline: 2px solid var(--cf-accent-ink); outline-offset: 3px; } /* Validation states. :user-invalid/:user-valid only match after the visitor has interacted, so a pristine form is never painted red or green. The form carries noValidate (the hook owns validation and the messaging), but the fields still carry 'required', which is what these pseudo-classes read. */ .cf-contactpage .cf-cx-form :is(input, select, textarea):not([type="radio"]):not([type="checkbox"]):user-invalid { border-color: var(--cf-down); box-shadow: inset 0 1px 0 rgba(255,255,255,0.03), 0 0 0 3px rgba(248,113,113,0.15); } .cf-contactpage .cf-cx-form :is(input, select, textarea):not([type="radio"]):not([type="checkbox"]):user-valid { border-color: rgba(52,211,153,0.42); } .cf-contactpage .cf-cx-form input[type="radio"], .cf-contactpage .cf-cx-form input[type="checkbox"] { accent-color: var(--cf-accent); } /* Submit-level error. Announced, and the visitor's input stays on screen — a rejected submit must never look like a success or wipe what they typed. */ .cf-contactpage .cf-cxf__formerr { margin: 0; padding: 0.8rem 1rem; font-size: 0.86rem; line-height: 1.55; background: rgba(248,113,113,0.10); border: 1px solid rgba(248,113,113,0.42); border-radius: var(--cf-r-2); color: var(--cf-down); } /* The submit button is a real .cf-btn--primary now, so it inherits the family's gradient fill, its sheen and its hover lift with no local rules at all — that is the whole point of owning the markup. It only needs to fill the panel. */ .cf-contactpage .cf-cxf .cf-btn--block { margin-top: 0.2rem; } /* Success state — the form is swapped out for this panel, so without a skin the visitor's reward for handing over a portfolio is a bare stack of text. It keeps the phone number in reach: someone who has just sent a tape is exactly the person who might want to talk now. */ .cf-contactpage .cf-cxf__done { display: grid; justify-items: center; gap: 0.8rem; text-align: center; padding: clamp(1.6rem, 3vw, 2.4rem) clamp(1rem, 2vw, 1.6rem); background: linear-gradient(170deg, var(--cf-elevated), var(--cf-surface)); border: 1px solid var(--cf-line-live); border-radius: var(--cf-r-3); box-shadow: var(--cf-shadow-2); } .cf-contactpage .cf-cxf__doneic { display: grid; place-items: center; width: 54px; height: 54px; border-radius: 50%; color: var(--cf-accent-ink); background: rgba(6,147,227,0.12); border: 1px solid var(--cf-line-live); box-shadow: 0 0 30px -8px var(--cf-accent-glow); } .cf-contactpage .cf-cxf__doneic svg { width: 26px; height: 26px; } .cf-contactpage .cf-cxf__done h3 { margin: 0; font-family: var(--cf-font-display); font-size: 1.3rem; font-weight: 600; color: var(--cf-ink); } .cf-contactpage .cf-cxf__done p { margin: 0; max-width: 34rem; color: var(--cf-muted); font-size: 0.96rem; line-height: 1.7; } .cf-contactpage .cf-cxf__done .cf-btn { margin-top: 0.4rem; } /* ══ SEQUENCE ═══════════════════════════════════════════════════════════════ Composed on .cf-grid--4, which already carries its quantity caps. */ .cf-contactpage .cf-cx-seq__item { padding-top: 1.9rem; } .cf-contactpage .cf-cx-seq__ic { display: grid; place-items: center; width: 40px; height: 40px; margin-bottom: 0.9rem; border-radius: var(--cf-r-2); color: var(--cf-accent-ink); background: linear-gradient(150deg, rgba(6,147,227,0.16), rgba(6,147,227,0.03)); box-shadow: inset 0 0 0 1px var(--cf-line-2); } .cf-contactpage .cf-cx-seq__ic svg { width: 19px; height: 19px; } /* ══ Index hero ═══════════════════════════════════════════════════════════ Quieter than the home hero and louder than the interior one: the blog is a destination, but the first article card is the real headline. */ .cf-blog-hero { padding-top: clamp(5rem, 9vw, 7.5rem); padding-bottom: clamp(2.5rem, 5vw, 4rem); overflow: hidden; } .cf-blog-hero__row { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: 1.5rem 2.5rem; } .cf-blog-hero__count { font-family: var(--cf-font-mono); font-size: 0.72rem; letter-spacing: 0.16em; text-transform: uppercase; color: var(--cf-faint); display: inline-flex; align-items: center; gap: 0.6rem; padding-bottom: 0.4rem; } .cf-blog-hero__count b { color: var(--cf-accent-ink); font-weight: 500; } /* ══ Lead article ═════════════════════════════════════════════════════════ The newest post gets a split treatment. It is an , so the whole card is one hit target and there is no nested-interactive ambiguity. */ .cf-blog-lead { position: relative; display: grid; gap: 0; overflow: hidden; grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr); background: linear-gradient(150deg, var(--cf-elevated), var(--cf-surface)); border: 1px solid var(--cf-line-2); border-radius: var(--cf-r-3); box-shadow: var(--cf-shadow-2); text-decoration: none; color: inherit; transition: transform var(--cf-d-2) var(--cf-ease), box-shadow var(--cf-d-2) var(--cf-ease), border-color var(--cf-d-2) var(--cf-ease); } .cf-blog-lead:hover { transform: translateY(-3px); border-color: var(--cf-line-live); box-shadow: var(--cf-shadow-3); } .cf-blog-lead__media { position: relative; min-height: 17rem; background-size: cover; background-position: center; background-color: var(--cf-canvas-2); border-right: 1px solid var(--cf-line); } .cf-blog-lead__media::after { content: ""; position: absolute; inset: 0; background: linear-gradient(100deg, transparent 35%, rgba(11,27,51,0.22)); } .cf-blog-lead__body { padding: clamp(1.6rem, 3.2vw, 2.6rem); display: flex; flex-direction: column; } .cf .cf-blog-lead__title { font-family: var(--cf-font-display); color: var(--cf-ink); font-size: clamp(1.4rem, 2.6vw, 2.05rem); line-height: 1.2; text-wrap: balance; margin: 0.75rem 0 0; } .cf-blog-lead__excerpt { margin-top: 0.9rem; color: var(--cf-muted); line-height: 1.75; font-size: 0.98rem; } .cf-blog-lead__foot { margin-top: auto; padding-top: 1.4rem; } /* ══ Card grid ════════════════════════════════════════════════════════════ */ .cf-blog-grid { display: grid; gap: clamp(1.1rem, 2vw, 1.6rem); grid-template-columns: repeat(3, minmax(0, 1fr)); margin-top: clamp(1.6rem, 3vw, 2.4rem); } .cf-blog-card { position: relative; overflow: hidden; display: flex; flex-direction: column; background: linear-gradient(170deg, var(--cf-elevated), var(--cf-surface)); border: 1px solid var(--cf-line-2); border-radius: var(--cf-r-3); box-shadow: var(--cf-shadow-1); text-decoration: none; color: inherit; transition: transform var(--cf-d-2) var(--cf-ease), box-shadow var(--cf-d-2) var(--cf-ease), border-color var(--cf-d-2) var(--cf-ease); } .cf-blog-card:hover { transform: translateY(-4px); border-color: var(--cf-line-live); box-shadow: var(--cf-shadow-3); } .cf-blog-card__media { position: relative; aspect-ratio: 16 / 9; background-size: cover; background-position: center; background-color: var(--cf-canvas-2); border-bottom: 1px solid var(--cf-line); } .cf-blog-card__media::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, transparent 45%, rgba(11,27,51,0.2)); } /* Generated cover for a post with no featured image: the family's own grid substrate plus the title's initial, so a card is never a flat rectangle. */ .cf-blog-card__media--gen, .cf-blog-lead__media--gen { display: grid; place-items: center; background-image: linear-gradient(180deg, rgba(6,147,227,0.16), transparent 70%), linear-gradient(90deg, var(--cf-line) 1px, transparent 1px), linear-gradient(180deg, var(--cf-line) 1px, transparent 1px); background-size: auto, 48px 48px, 48px 48px; } .cf-blog-card__mark { position: relative; z-index: 1; font-family: var(--cf-font-display); font-size: 3rem; line-height: 1; color: var(--cf-accent-ink); opacity: 0.5; } .cf-blog-card__body { padding: clamp(1.15rem, 2vw, 1.5rem); display: flex; flex-direction: column; flex: 1; } .cf .cf-blog-card__title { font-family: var(--cf-font-display); color: var(--cf-ink); font-size: clamp(1.02rem, 1.4vw, 1.2rem); line-height: 1.3; text-wrap: balance; margin: 0.7rem 0 0; } .cf-blog-card__excerpt { margin-top: 0.7rem; color: var(--cf-muted); font-size: 0.9rem; line-height: 1.7; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; } .cf-blog-card__foot { margin-top: auto; padding-top: 1.1rem; } .cf-blog-card:hover .cf-link svg, .cf-blog-lead:hover .cf-link svg { transform: translateX(4px); } /* ══ Shared article meta line ═════════════════════════════════════════════ Mono, because every label on this site is mono — it is what makes the page read as an instrument rather than a magazine. */ .cf-blog-meta { display: flex; flex-wrap: wrap; align-items: center; gap: 0.45rem 0.7rem; font-family: var(--cf-font-mono); font-size: 0.68rem; letter-spacing: 0.13em; text-transform: uppercase; color: var(--cf-faint); } .cf-blog-meta__sep { color: var(--cf-line-live); } .cf-blog-meta__read { color: var(--cf-accent-ink); } /* ══ Empty state ══════════════════════════════════════════════════════════ A blog with no posts must still be a designed page, not a bare sentence — this surface 200s deliberately (a tenant mid-content-build is normal). */ .cf-blog-empty { padding: clamp(2.5rem, 6vw, 4.5rem); text-align: center; background: var(--cf-surface); border: 1px dashed var(--cf-line-2); border-radius: var(--cf-r-3); color: var(--cf-muted); } /* ══ Post: hero + banner ══════════════════════════════════════════════════ */ .cf-post-hero { padding-top: clamp(5rem, 9vw, 7.5rem); padding-bottom: clamp(1.5rem, 3vw, 2.5rem); overflow: hidden; } .cf-post-back { display: inline-flex; align-items: center; gap: 0.5rem; font-family: var(--cf-font-mono); font-size: 0.7rem; letter-spacing: 0.14em; text-transform: uppercase; color: var(--cf-accent-ink); text-decoration: none; } .cf-post-back:hover { text-decoration: underline; text-underline-offset: 3px; } .cf-post-title { margin-top: 1.1rem; text-wrap: balance; } .cf-post-lede { margin-top: 1rem; } .cf-post-hero .cf-blog-meta { margin-top: 1.4rem; } .cf-post-banner { /* It is a
, which carries a UA margin-inline of 40px — zero it or the banner sits inset from the column it is supposed to span. */ position: relative; margin: clamp(1.8rem, 3.5vw, 2.8rem) 0 0; border: 1px solid var(--cf-line-2); border-radius: var(--cf-r-3); overflow: hidden; box-shadow: var(--cf-shadow-2); } .cf-post-banner img { display: block; width: 100%; height: auto; aspect-ratio: 16 / 7; object-fit: cover; } .cf-post-banner::after { content: ""; position: absolute; inset: 0; pointer-events: none; background: linear-gradient(180deg, transparent 55%, rgba(11,27,51,0.16)); } /* ══ Post: body ═══════════════════════════════════════════════════════════ .cf-doc / .cf-doc-rail come from ./interior_b.ts. Only the measure widens here: a long-form article reads better a touch wider than a legal page. */ .cf-post-body.cf-doc { max-width: 74ch; } /* ══ Post: tags ═══════════════════════════════════════════════════════════ */ .cf-post-tags { display: flex; flex-wrap: wrap; gap: 0.5rem; margin-top: clamp(2rem, 4vw, 3rem); } /* ══ Post: related rail ═══════════════════════════════════════════════════ */ .cf-post-related { display: grid; gap: clamp(1rem, 2vw, 1.5rem); grid-template-columns: repeat(3, minmax(0, 1fr)); margin-top: clamp(1.6rem, 3vw, 2.2rem); } .cf-post-related__card { position: relative; overflow: hidden; display: flex; flex-direction: column; padding: clamp(1.15rem, 2vw, 1.5rem); background: linear-gradient(170deg, var(--cf-elevated), var(--cf-surface)); border: 1px solid var(--cf-line-2); border-radius: var(--cf-r-3); text-decoration: none; color: inherit; transition: transform var(--cf-d-2) var(--cf-ease), border-color var(--cf-d-2) var(--cf-ease); } .cf-post-related__card:hover { transform: translateY(-3px); border-color: var(--cf-line-live); } .cf .cf-post-related__title { font-family: var(--cf-font-display); color: var(--cf-ink); font-size: 1rem; line-height: 1.35; margin: 0.6rem 0 0; text-wrap: balance; } .cf-post-related__excerpt { margin-top: 0.55rem; color: var(--cf-muted); font-size: 0.88rem; line-height: 1.65; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; } /* ══ Quantity caps ════════════════════════════════════════════════════════ Both grids fall to 2-up at 1000px, so 1001px is the correct floor here: below it these caps must NOT apply or they out-specify the max-width rules further down (:has() carries specificity, @media does not). */ @media (min-width: 1001px) { .cf .cf-blog-grid:has(> :nth-child(2):last-child) { grid-template-columns: repeat(2, minmax(0, 1fr)); } .cf .cf-blog-grid:has(> :only-child) { grid-template-columns: minmax(0, 34rem); } .cf .cf-post-related:has(> :nth-child(2):last-child) { grid-template-columns: repeat(2, minmax(0, 1fr)); } .cf .cf-post-related:has(> :only-child) { grid-template-columns: minmax(0, 34rem); } } @media (max-width: 1000px) { .cf-blog-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } .cf-post-related { grid-template-columns: repeat(2, minmax(0, 1fr)); } } @media (max-width: 900px) { .cf-blog-lead { grid-template-columns: minmax(0, 1fr); } .cf-blog-lead__media { min-height: 13rem; border-right: 0; border-bottom: 1px solid var(--cf-line); } } @media (max-width: 640px) { .cf-blog-grid { grid-template-columns: minmax(0, 1fr); } .cf-post-related { grid-template-columns: minmax(0, 1fr); } .cf-blog-hero__row { align-items: flex-start; } } /* ══ Sticky card stack ════════════════════════════════════════════════════ */ .cf-stack { position: relative; /* The inset is what makes the rounded corner legible against the canvas — a full-bleed rounded rectangle has no visible corner. */ padding-inline: clamp(0px, 1.6vw, 22px); } /* NOTE THE ABSENCE OF A top HERE. It belongs with position: sticky, inside the media query below, and nowhere else: on a position: relative box a top is not an inert fallback, it is a live offset. Declared at this level it shifted every card down 80px on phones — where the pin is off by design — pushing the last card 80px into the section after it. Caught in a 390px capture; nothing about it is visible at desktop width. */ .cf-stack__item { position: relative; } /* Cards butt together ONLY when they overlap. The gap is therefore the base state and the pin removes it, not the other way round — that way every case where the pin does not run (no JS, phone, reduced motion) gets air between the cards without having to be enumerated. */ .cf-stack__item + .cf-stack__item { margin-top: clamp(1rem, 2vw, 1.75rem); } .cf-stack__card { position: relative; overflow: hidden; /* 14px, not the --cf-r-3 8px the rest of the family uses. Radius reads relative to the size of the thing it is cutting: 8px on a 1240px-wide, viewport-tall surface is invisible, and the whole point of the effect is that the overlap is legible as one card sliding over another. */ border-radius: 14px; border: 1px solid var(--cf-line-2); /* Opaque, so a card can never let the card beneath it show through. */ background: var(--cf-canvas); /* The shadow is cast UPWARD as well as down: what sells the overlap is the incoming card's top edge darkening the card it is covering. */ box-shadow: 0 -24px 60px -30px rgba(0, 0, 0, 0.95), 0 34px 80px -40px rgba(0, 0, 0, 1), var(--cf-inset-top); transform-origin: 50% 0; } /* The recede veil. z-index 5 clears .cf-band > .cf-wrap (1) and the CTA inner (3); .cf-stack__card is a stacking context whenever it is transformed, so nothing inside a card can escape above this. */ .cf-stack__card::after { content: ""; position: absolute; inset: 0; z-index: 5; pointer-events: none; background: linear-gradient(180deg, rgba(4, 9, 17, 0.55) 0%, rgba(4, 9, 17, 0.9) 100%); opacity: 0; } /* Sections inside a card give back some of their own vertical padding: the shorter the card, the more of it can be pinned without the stick point having to drop to keep its bottom reachable. */ .cf-stack__card > .cf-band { padding-block: clamp(3.25rem, 6.4vw, 5.75rem); } /* A band rule is a seam between full-bleed bands. Inside a bordered card it is a second line 1px inside the first. */ .cf-stack__card > .cf-band--ruled { border-top: 0; border-image: none; } /* ── The pin + the recede: desktop, and only once the engine has measured ── */ @media (min-width: 901px) { /* The declared stick point is the design value and covers the single frame before CfMotion measures; the measured value (which is lower for any card taller than the viewport) arrives as an inline style. */ .cf.cf-motion-ready .cf-stack__item { position: sticky; top: calc(var(--cf-header-h-stuck) + 18px); } .cf.cf-motion-ready .cf-stack__item + .cf-stack__item { margin-top: 0; } .cf.cf-motion-ready .cf-stack__card { transform: translate3d(0, calc(var(--cf-stack-p, 0) * -1.4rem), 0) scale(calc(1 - var(--cf-stack-p, 0) * 0.055)); /* No transition: --cf-stack-p is rewritten every scroll frame, so a transition on top of it would lag the scroll thumb the way an eased read-progress bar does. */ } .cf.cf-motion-ready .cf-stack__card::after { opacity: calc(var(--cf-stack-p, 0) * 0.86); } /* Only the pinned cards need a compositor layer, and only while the stack is on screen; the engine adds this class to the run in view. */ .cf-stack.is-active .cf-stack__card { will-change: transform; } } /* ── Reduced motion ─────────────────────────────────────────────────────── The family's blanket kill switch removes animations and transitions, but it cannot undo a resting transform or a position: sticky — both have to be unset by name or the page ships permanently pinned and shrunk. */ @media (prefers-reduced-motion: reduce) { .cf .cf-stack__item, .cf.cf-motion-ready .cf-stack__item { position: relative !important; top: auto !important; } .cf .cf-stack__card, .cf.cf-motion-ready .cf-stack__card { transform: none !important; will-change: auto !important; } .cf .cf-stack__card::after, .cf.cf-motion-ready .cf-stack__card::after { opacity: 0 !important; } /* !important because the rule this is undoing is (0,3,0) inside the min-width block above and this one would otherwise lose on specificity. */ .cf .cf-stack__item + .cf-stack__item, .cf.cf-motion-ready .cf-stack__item + .cf-stack__item { margin-top: clamp(1rem, 2vw, 1.75rem) !important; } } @media (max-width: 900px) { .cf .cf-stack__card { border-radius: 10px; } } /* The platform .tenant-prose list styles give every ul a marker and an indent. These lists are UI, not prose, so they opt out at (0,2,1). */ .cf ul.cf-passon__tags, .cf ul.cf-audience, .cf .cf-list ul, .cf ul.cf-hero__badges, .cf .cf-footer ul, .cf ol.cf-steps, .cf ul.cf-points { list-style: none; padding-left: 0; } .cf ul.cf-passon__tags > li, .cf ul.cf-audience > li, .cf .cf-list li, .cf ul.cf-hero__badges > li, .cf .cf-footer li, .cf ol.cf-steps > li, .cf ul.cf-points > li { list-style: none; } /* ══════════════════════════════════════════════════════════════════════════ HEADER AND MEGA-MENU, restyled for the white site (2026-10-04). The chrome still carried the trading-desk look: a transparent bar with no edge until scroll, the phone and "SELLER PORTAL" in monospace micro-caps, and a panel whose icon tiles were never centred. That last one was a real bug: ".cf-mega__item span { display: block }" also matched the icon tile (a span), overriding its grid centring, so every glyph sat top-left. Everything here is scoped under .cf at higher specificity than chrome.ts. ══════════════════════════════════════════════════════════════════════════ */ .cf .cf-header { border-bottom: 1px solid var(--cf-line); } .cf .cf-header::before { background: rgba(255,255,255,0.97); } .cf .cf-header.is-stuck { box-shadow: 0 8px 24px -18px rgba(11,27,51,0.35); } .cf .cf-nav { gap: clamp(18px, 1.4vw, 26px); } .cf .cf-nav__link { font-size: 15px; font-weight: 600; color: var(--cf-ink); padding: 9px 0; } .cf .cf-nav__link:hover, .cf .cf-nav__link:focus-visible { color: var(--cf-accent); } .cf .cf-nav__link::after { background: var(--cf-accent); bottom: -2px; border-radius: 2px; } .cf .cf-nav__link[aria-current="page"]::after { opacity: 1; } .cf .cf-header__phone { font-family: var(--cf-font-body); font-size: 14.5px; font-weight: 600; color: var(--cf-ink); letter-spacing: 0; } .cf .cf-header__phone svg { color: var(--cf-accent); } .cf .cf-header__portal { font-family: var(--cf-font-body); font-size: 14px; font-weight: 500; letter-spacing: 0; text-transform: none; color: var(--cf-muted); padding: 6px 0 6px 15px; border: 0; border-left: 1px solid var(--cf-line-2); border-radius: 0; } .cf .cf-header__portal:hover { color: var(--cf-accent); background: none; border-color: var(--cf-line-2); } .cf .cf-drawer__portal { font-family: var(--cf-font-body); font-size: 0.9rem; letter-spacing: 0; text-transform: none; } .cf .cf-live { font-family: var(--cf-font-body); font-size: 0.85rem; letter-spacing: 0; text-transform: none; } .cf .cf-mega { padding: 1.4rem 1.4rem 1.1rem; background: #fff; border: 1px solid var(--cf-line); border-radius: 14px; box-shadow: 0 30px 70px -30px rgba(11,27,51,0.38), 0 2px 6px rgba(11,27,51,0.05); } .cf .cf-mega__head { padding: 0 0.6rem 1rem; margin-bottom: 0.9rem; align-items: center; } .cf .cf-mega__label { font-family: var(--cf-font-body); font-size: 0.78rem; font-weight: 700; letter-spacing: 0.08em; color: var(--cf-muted); } .cf .cf-mega__all { font-family: var(--cf-font-body); font-size: 0.86rem; font-weight: 600; color: var(--cf-accent); } .cf .cf-mega__all:hover { color: var(--cf-accent-deep); text-decoration: underline; text-underline-offset: 3px; } .cf .cf-mega__grid { gap: 0.35rem 0.6rem; } .cf .cf-mega__item { gap: 0.95rem; padding: 0.9rem 0.95rem; border-radius: 12px; align-items: flex-start; } .cf .cf-mega__item:hover { background: var(--cf-canvas-2); border-color: transparent; transform: none; } .cf .cf-mega__item > .cf-mega__ic { display: grid; place-items: center; flex: none; width: 42px; height: 42px; margin: 0; padding: 0; font-size: 0; line-height: 0; border-radius: 11px; background: var(--cf-accent-soft); color: var(--cf-accent); box-shadow: inset 0 0 0 1px rgba(11,103,196,0.12); transition: background var(--cf-d-1) var(--cf-ease), color var(--cf-d-1) var(--cf-ease); } .cf .cf-mega__item:hover > .cf-mega__ic { background: var(--cf-accent); color: #fff; box-shadow: none; } .cf .cf-mega__item > .cf-mega__ic svg { width: 21px; height: 21px; } .cf .cf-mega__item b { font-size: 0.97rem; font-weight: 600; margin-top: 0.1rem; } .cf .cf-mega__item > span:not(.cf-mega__ic) span { font-size: 0.82rem; line-height: 1.5; margin-top: 0.25rem; } .cf .cf-mega__foot { margin-top: 0.9rem; padding: 1rem 0.6rem 0.2rem; } .cf .cf-mega__foot .cf-link { font-size: 0.9rem; color: var(--cf-accent); } /* THE ROW HAS TO FIT. At full size brand + nav + phone + portal + CTA needs about 1,440px, so every laptop narrower than that pushed "Sell a Loan" off the right edge (reported 2026-10-04). Below the full width the row sheds, least important first: the portal link (it is in the footer and drawer too), then the phone number's digits (the icon stays a tel: link), then the nav tightens. Each band kicks in ~100px before the measured overflow, because a 13-inch laptop still clipped at the measured breakpoints: real machines render this text a little wider than headless Chrome does. The drawer takes over at 980px as before. Measured with a 981-1600px sweep: nothing in .cf-header__row crosses the viewport. */ @media (min-width: 981px) and (max-width: 1499px) { .cf .cf-header__portal { display: none; } } @media (min-width: 981px) and (max-width: 1399px) { .cf .cf-header__phone { font-size: 0; gap: 0; padding: 0.5rem; } .cf .cf-header__phone svg { width: 18px; height: 18px; } } @media (min-width: 981px) and (max-width: 1279px) { .cf .cf-header__row { gap: 16px; } .cf .cf-nav { gap: 18px; } .cf .cf-nav__link { font-size: 14px; } .cf .cf-header__cta { gap: 8px; } } @media (min-width: 981px) and (max-width: 1139px) { .cf .cf-nav { gap: 14px; } .cf .cf-nav__link { font-size: 13px; } .cf .cf-header__cta .cf-btn { padding: 7px 14px; } } /* THE HEADER IS SIZED IN PX, deliberately. Everything else on the site is rem-based and scales with the reader's browser font setting, but the header row is a fixed-width budget: at Chrome's "Large" font size (125%) the rem version overflowed at every width from 981 to 1591px. Fixed sizes keep the row fitting; the page body still scales. */ .cf .cf-brand__name { font-size: 19.5px; } .cf .cf-header__cta .cf-btn { font-size: 13.5px; min-height: 38px; padding: 8px 18px; } .cf .cf-header.is-stuck .cf-header__cta .cf-btn { min-height: 34px; padding: 6px 16px; } @media (min-width: 981px) and (max-width: 1139px) { .cf .cf-header__cta .cf-btn { padding: 7px 14px; } } /* The narrowest desktop band. The number is still in the sticky bar and the footer, so the header can let it go. */ @media (min-width: 981px) and (max-width: 1099px) { .cf .cf-header__phone { display: none; } } @media (max-width: 380px) { .cf .cf-header__row { gap: 0.6rem; } .cf .cf-header__cta { gap: 0.4rem; } .cf .cf-header__cta .cf-btn { padding: 0.45rem 0.75rem; font-size: 0.78rem; } } /* ── Page hero ─────────────────────────────────────────────────────────── */ .cf-hero { position: relative; padding: clamp(3rem, 6vw, 5.5rem) 0 clamp(3.5rem, 7vw, 6rem); background: radial-gradient(ellipse 60% 70% at 100% 0%, rgba(11,103,196,0.07), transparent 70%), linear-gradient(180deg, var(--cf-canvas-2), var(--cf-canvas)); border-bottom: 1px solid var(--cf-line); } .cf-hero__grid { display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(0, 0.95fr); gap: clamp(2rem, 5vw, 4.5rem); align-items: center; } .cf-hero--noimg .cf-hero__grid { grid-template-columns: minmax(0, 1fr); max-width: 52rem; } .cf-hero__copy .cf-lede { max-width: 54ch; } .cf-hero--home .cf-display { font-size: clamp(2.5rem, 5.4vw, 4.4rem); } .cf-hero__sub { margin-top: 0.9rem; max-width: 54ch; font-size: 0.95rem; line-height: 1.6; color: var(--cf-text); padding-left: 0.9rem; border-left: 3px solid var(--cf-accent); } .cf-hero__textlink { display: inline-flex; align-items: center; gap: 0.4rem; align-self: center; font-weight: 600; font-size: 0.92rem; color: var(--cf-accent-ink); text-decoration: none; padding: 0.4rem 0.2rem; } .cf-hero__textlink svg { width: 15px; height: 15px; transition: transform var(--cf-d-2) var(--cf-ease); } .cf-hero__textlink:hover svg { transform: translateX(4px); } .cf-hero__textlink:hover { text-decoration: underline; text-underline-offset: 3px; } .cf-hero__badges { list-style: none; padding: 0; margin: 1.8rem 0 0; display: flex; flex-wrap: wrap; gap: 0.6rem 1.4rem; } .cf-hero__badges li { display: inline-flex; align-items: center; gap: 0.45rem; font-size: 0.88rem; font-weight: 600; color: var(--cf-ink); } .cf-hero__badges svg { width: 16px; height: 16px; color: var(--cf-up); flex: none; } .cf-hero__media { position: relative; border-radius: var(--cf-r-3); overflow: hidden; aspect-ratio: 4 / 3.1; box-shadow: var(--cf-shadow-3); background: var(--cf-surface); } .cf-hero--home .cf-hero__media { aspect-ratio: 4 / 3.4; } .cf-hero__media img { width: 100%; height: 100%; object-fit: cover; } /* Parallax layer: oversized vertically so the translate never shows an edge. */ .cf-hero__parallax, .cf-photo__parallax { position: absolute; inset: -8% 0; } .cf-photo { position: relative; } /* Slow Ken Burns on the hero photo. Rests at scale(1) under the reduced- motion kill-switch, which is the "finished" state, so nothing freezes. */ .cf .cf-hero__kb { animation: cf-hero-kb 28s ease-in-out infinite alternate; transform-origin: 60% 40%; } @keyframes cf-hero-kb { from { transform: scale(1); } to { transform: scale(1.09) translate3d(-1%, -1%, 0); } } /* The platform .tenant-prose image rule adds a 24px top margin, which pushed every framed photo down and left a grey strip across its top. (0,2,1) wins. */ .cf .cf-hero__media img, .cf .cf-photo img { margin: 0; width: 100%; height: 100%; object-fit: cover; } /* Phones and small tablets: the copy and the buttons come first and the photo becomes a short band under them. At the desktop 4:3 ratio the photo filled an entire phone screen and read as the page (reported 2026-10-04). */ @media (max-width: 900px) { .cf-hero { padding: 2rem 0 2.5rem; } .cf-hero__grid { grid-template-columns: minmax(0, 1fr); gap: 1.75rem; } .cf-hero__copy { order: 0; } .cf-hero__media, .cf-hero--home .cf-hero__media { order: 1; aspect-ratio: 16 / 9; max-height: 240px; box-shadow: var(--cf-shadow-2); } .cf-photo { aspect-ratio: 16 / 9; max-height: 260px; } } /* ── Proof bar (real numbers only; omitted when empty) ─────────────────── */ .cf-proof { padding: clamp(2.25rem, 4vw, 3.25rem) 0; border-bottom: 1px solid var(--cf-line); } .cf-proof .cf-stat { background: var(--cf-canvas); } /* ── Cards: a numbered variant and a link variant ──────────────────────── */ .cf-card__num { display: inline-block; margin-bottom: 0.9rem; font-family: var(--cf-font-mono); font-size: 0.78rem; font-weight: 700; letter-spacing: 0.12em; color: var(--cf-accent-ink); } .cf-card::before { display: none; } .cf-card--spot::after { display: none; } /* Hover lift, restored 2026-10-04. Written at (0,4,0) for the revealed case: ".cf .cf-reveal.is-visible { transform: none }" is (0,3,0) and silently flattens a plain .cf-card:hover lift. */ .cf-card:hover { transform: translateY(-4px); box-shadow: var(--cf-shadow-2); border-color: var(--cf-line-2); } .cf .cf-card.cf-reveal.is-visible:hover { transform: translateY(-4px); } .cf-card--link:hover { border-color: var(--cf-line-live); } .cf .cf-track, .cf .cf-resource, .cf .cf-list { transition: transform var(--cf-d-2) var(--cf-ease), box-shadow var(--cf-d-2) var(--cf-ease); } .cf .cf-track.cf-reveal.is-visible:hover, .cf .cf-resource:hover { transform: translateY(-3px); box-shadow: var(--cf-shadow-2); } .cf-card__ic { background: var(--cf-accent-soft); box-shadow: none; } /* ── Buy box ───────────────────────────────────────────────────────────── */ .cf-buybox { display: grid; grid-template-columns: minmax(0, 0.8fr) minmax(0, 1.2fr); gap: clamp(1.75rem, 4vw, 3.5rem); align-items: start; } .cf-buybox .cf-head + * { margin-top: 0; } @media (max-width: 900px) { .cf-buybox { grid-template-columns: minmax(0, 1fr); } } .cf-buybox__table { border: 1px solid var(--cf-line-2); border-radius: var(--cf-r-3); overflow: hidden; background: var(--cf-canvas); box-shadow: var(--cf-shadow-1); } .cf-spec { width: 100%; border-collapse: collapse; font-size: 0.95rem; } .cf-spec th, .cf-spec td { padding: 0.95rem 1.2rem; text-align: left; vertical-align: top; border-bottom: 1px solid var(--cf-line); } .cf-spec tr:last-child th, .cf-spec tr:last-child td { border-bottom: 0; } .cf-spec th { width: 38%; font-weight: 600; color: var(--cf-ink); background: var(--cf-canvas-2); font-family: var(--cf-font-body); font-size: 0.9rem; } .cf-spec td { color: var(--cf-text); line-height: 1.6; } @media (max-width: 560px) { .cf-spec, .cf-spec tbody, .cf-spec tr { display: block; width: 100%; } .cf-spec tr { border-bottom: 1px solid var(--cf-line); } .cf-spec tr:last-child { border-bottom: 0; } .cf-spec th, .cf-spec td { display: block; width: auto; border-bottom: 0; } .cf-spec th { border-bottom: 0; padding-bottom: 0.25rem; background: none; } } .cf-buybox__note { padding: 0.85rem 1.2rem; font-size: 0.82rem; color: var(--cf-muted); background: var(--cf-canvas-2); border-top: 1px solid var(--cf-line); } .cf-home-buybox { margin-top: clamp(2.5rem, 5vw, 4rem); } /* ── Loans others pass on ──────────────────────────────────────────────── */ .cf-passon { margin-top: clamp(2rem, 4vw, 3rem); padding: clamp(1.4rem, 3vw, 2rem); border-radius: var(--cf-r-3); background: linear-gradient(135deg, #0B1B33 0%, #10305A 100%); color: #E6EEF8; display: grid; grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.6fr); gap: 1.5rem 2.5rem; align-items: center; } .cf-passon__head h3 { color: #fff; font-size: clamp(1.25rem, 2vw, 1.55rem); } .cf-passon__head p { margin-top: 0.5rem; color: #C3D2E6; font-size: 0.92rem; line-height: 1.6; } .cf-passon__tags { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 0.55rem; } .cf-passon__tags li { padding: 0.5rem 0.9rem; border-radius: var(--cf-r-pill); background: rgba(255,255,255,0.1); border: 1px solid rgba(255,255,255,0.2); font-size: 0.86rem; font-weight: 600; color: #fff; } .cf-passon .cf-link { color: #9CCBFF; grid-column: 1 / -1; } @media (max-width: 900px) { .cf-passon { grid-template-columns: minmax(0, 1fr); } } .cf-passon-detail { margin-top: var(--cf-gap); } .cf-list__lede { margin: -0.4rem 0 1rem; color: var(--cf-muted); font-size: 0.92rem; } /* ── Two lists ─────────────────────────────────────────────────────────── */ .cf-lists { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--cf-gap); } .cf-head + .cf-lists { margin-top: clamp(1.75rem, 3.5vw, 2.75rem); } @media (max-width: 760px) { .cf-lists { grid-template-columns: minmax(0, 1fr); } } .cf-list { padding: clamp(1.3rem, 2.4vw, 1.9rem); border: 1px solid var(--cf-line-2); border-radius: var(--cf-r-3); background: var(--cf-canvas); } .cf-list h3 { font-size: 1.12rem; margin-bottom: 1rem; display: flex; align-items: center; gap: 0.6rem; } .cf-list h3::before { content: ""; width: 10px; height: 10px; border-radius: 50%; background: var(--cf-up); flex: none; } .cf-list--no h3::before { background: var(--cf-down); } .cf-list--doc h3::before { background: var(--cf-accent); } .cf-list ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 0.7rem; } .cf-list li { position: relative; padding-left: 1.6rem; font-size: 0.94rem; line-height: 1.6; color: var(--cf-text); } .cf-list li::before { content: ""; position: absolute; left: 0; top: 0.35rem; width: 14px; height: 14px; background: var(--cf-up); -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='3.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='20 6 9 17 4 12'/%3E%3C/svg%3E") center / contain no-repeat; mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='3.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='20 6 9 17 4 12'/%3E%3C/svg%3E") center / contain no-repeat; } .cf-list--no li::before { background: var(--cf-down); -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='3.2' stroke-linecap='round'%3E%3Cpath d='M6 6l12 12M18 6L6 18'/%3E%3C/svg%3E"); mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='3.2' stroke-linecap='round'%3E%3Cpath d='M6 6l12 12M18 6L6 18'/%3E%3C/svg%3E"); } .cf-list--doc li::before { background: var(--cf-accent); } .cf-lists__foot { margin-top: 1.5rem; display: flex; flex-wrap: wrap; gap: 0.85rem; align-items: center; } .cf-lists__foot p { color: var(--cf-muted); font-size: 0.92rem; flex: 1 1 22rem; } /* ── Photo in a split ──────────────────────────────────────────────────── */ .cf-photo { margin: 0; border-radius: var(--cf-r-3); overflow: hidden; aspect-ratio: 4 / 3.2; box-shadow: var(--cf-shadow-2); background: var(--cf-surface); } .cf-photo img { width: 100%; height: 100%; object-fit: cover; } .cf-split__body { margin-top: 1.1rem; } /* ── Steps (numbered row) ─────────────────────────────────────────────── */ /* auto-fit at 19rem lays Kirk's six steps out 3 + 3 on desktop, 2 + 2 + 2 on a small laptop and one column on a phone, with no stranded last row. */ .cf-steps { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--cf-gap); grid-template-columns: repeat(auto-fit, minmax(19rem, 1fr)); counter-reset: none; } .cf-head + .cf-steps { margin-top: clamp(1.75rem, 3.5vw, 2.75rem); } .cf .cf-steps, .cf .cf-steps li { list-style: none; } .cf .cf-steps { padding-left: 0; } .cf-steps li { position: relative; padding: 1.4rem 1.3rem 1.5rem; border-top: 3px solid var(--cf-accent); background: var(--cf-canvas); border-radius: 0 0 var(--cf-r-3) var(--cf-r-3); box-shadow: var(--cf-shadow-1); } .cf-band--alt .cf-steps li { background: var(--cf-canvas); } .cf-steps__n { font-family: var(--cf-font-mono); font-size: 0.74rem; font-weight: 700; letter-spacing: 0.12em; color: var(--cf-accent-ink); } .cf-steps h3 { margin-top: 0.55rem; font-size: 1.08rem; } .cf-steps p { margin-top: 0.5rem; color: var(--cf-muted); font-size: 0.92rem; line-height: 1.65; } .cf-steps__note { margin-top: 1.5rem; text-align: center; color: var(--cf-text); font-size: 0.98rem; } .cf-steps__note strong { color: var(--cf-ink); } /* ── Tracks: single loan / pool ───────────────────────────────────────── */ .cf-tracks { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--cf-gap); } @media (max-width: 760px) { .cf-tracks { grid-template-columns: minmax(0, 1fr); } } .cf-track { padding: clamp(1.4rem, 2.6vw, 2rem); border: 1px solid var(--cf-line-2); border-radius: var(--cf-r-3); background: var(--cf-canvas); box-shadow: var(--cf-shadow-1); } .cf-track__tag { font-family: var(--cf-font-mono); font-size: 0.72rem; font-weight: 700; letter-spacing: 0.14em; text-transform: uppercase; color: var(--cf-accent-ink); } .cf-track h3 { margin-top: 0.5rem; } .cf-track p { margin-top: 0.6rem; color: var(--cf-text); line-height: 1.7; } .cf-track .cf-btnrow { margin-top: 1.3rem; } .cf-review-line { margin-top: clamp(1.5rem, 3vw, 2.25rem); padding: 1.1rem 1.3rem; border-radius: var(--cf-r-3); background: var(--cf-accent-soft); border: 1px solid var(--cf-line-live); display: flex; gap: 0.9rem; align-items: flex-start; color: var(--cf-ink); line-height: 1.6; } .cf-review-line svg { width: 22px; height: 22px; color: var(--cf-accent); flex: none; margin-top: 0.1rem; } /* ── How we review block (program pages) ──────────────────────────────── */ .cf-reviewblock { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 1.4rem; align-items: start; } .cf-reviewblock__ic { width: 56px; height: 56px; display: grid; place-items: center; border-radius: var(--cf-r-3); background: var(--cf-accent); color: #fff; } .cf-reviewblock__ic svg { width: 28px; height: 28px; } .cf-reviewblock .cf-eyebrow { margin-bottom: 0.7rem; } @media (max-width: 560px) { .cf-reviewblock { grid-template-columns: minmax(0, 1fr); } } /* ── Seller application ───────────────────────────────────────────────── */ .cf-apply { display: grid; grid-template-columns: minmax(0, 0.85fr) minmax(0, 1.15fr); gap: clamp(2rem, 5vw, 4rem); align-items: start; } @media (max-width: 900px) { .cf-apply { grid-template-columns: minmax(0, 1fr); } } .cf-panel { background: var(--cf-canvas); box-shadow: var(--cf-shadow-2); } .cf-cx-rail__note { margin-top: 1.25rem; font-size: 0.88rem; line-height: 1.6; color: var(--cf-muted); } /* ── Audience chips ───────────────────────────────────────────────────── */ .cf-audience { display: flex; flex-wrap: wrap; justify-content: center; gap: 0.7rem; } .cf-audience li { list-style: none; display: inline-flex; align-items: center; gap: 0.55rem; padding: 0.75rem 1.15rem; border-radius: var(--cf-r-pill); border: 1px solid var(--cf-line-2); background: var(--cf-canvas); font-weight: 600; color: var(--cf-ink); } .cf-audience svg { width: 18px; height: 18px; color: var(--cf-accent); } .cf-audience { padding: 0; margin: 0; } /* ── Team ──────────────────────────────────────────────────────────────── */ .cf-person__role { display: block; margin-top: 0.15rem; font-size: 0.84rem; font-weight: 600; color: var(--cf-accent-ink); } /* ── Resource cards (Seller Resources) ────────────────────────────────── */ .cf-resources { display: grid; gap: var(--cf-gap); grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr)); } .cf-resource { display: flex; flex-direction: column; gap: 0.5rem; padding: 1.3rem; border: 1px solid var(--cf-line-2); border-radius: var(--cf-r-3); background: var(--cf-canvas); } .cf-resource h3 { font-size: 1.02rem; } .cf-resource p { font-size: 0.9rem; color: var(--cf-muted); line-height: 1.6; } .cf-resource .cf-link { margin-top: auto; padding-top: 0.6rem; } /* ── Seller Resources filter (CSS only; works with JS off) ─────────────── */ .cf-blog-filter { border: 0; padding: 0; margin: 0 0 1.75rem; display: flex; flex-wrap: wrap; gap: 0.5rem; } .cf-blog-filter label { cursor: pointer; } .cf-blog-filter input { position: absolute; opacity: 0; width: 1px; height: 1px; } .cf-blog-filter span { display: inline-block; padding: 0.5rem 0.95rem; border-radius: var(--cf-r-pill); border: 1px solid var(--cf-line-2); background: var(--cf-canvas); font-size: 0.86rem; font-weight: 600; color: var(--cf-text); } .cf-blog-filter input:checked + span { background: var(--cf-ink); border-color: var(--cf-ink); color: #fff; } .cf-blog-filter input:focus-visible + span { outline: 2px solid var(--cf-accent-ink); outline-offset: 2px; } .cf-blog-filterable:has(input[value="fix-flip"]:checked) .cf-blog-card:not([data-p~="fix-flip"]) { display: none; } .cf-blog-filterable:has(input[value="ground-up"]:checked) .cf-blog-card:not([data-p~="ground-up"]) { display: none; } .cf-blog-filterable:has(input[value="dscr"]:checked) .cf-blog-card:not([data-p~="dscr"]) { display: none; } .cf-blog-filterable:has(input[value="sbc"]:checked) .cf-blog-card:not([data-p~="sbc"]) { display: none; } .cf-blog-filterable:has(input[value="non-qm"]:checked) .cf-blog-card:not([data-p~="non-qm"]) { display: none; } .cf-blog-filterable:has(input[value="pools"]:checked) .cf-blog-card:not([data-p~="pools"]) { display: none; } .cf .cf-stickybar__phone { font-family: var(--cf-font-body); font-weight: 600; letter-spacing: 0; color: var(--cf-ink); } .cf .cf-stickybar__value { font-family: var(--cf-font-body); } /* ── Card stack on the white canvas ─────────────────────────────────────── stack.ts was tuned for near-black: pure-black drop shadows and a dark veil. On white those read as smudges, so the shadow and veil are navy-tinted. */ .cf .cf-stack__card { border-color: var(--cf-line); box-shadow: 0 -18px 40px -28px rgba(11,27,51,0.22), 0 28px 60px -36px rgba(11,27,51,0.30); } .cf .cf-stack__card::after { background: linear-gradient(180deg, rgba(11,27,51,0.05) 0%, rgba(11,27,51,0.22) 100%); } /* ── Closing CTA: the one navy band on a white site ───────────────────── */ .cf-cta { background: linear-gradient(135deg, #0B1B33 0%, #0E2C52 60%, #0B3F78 100%); border-top: 0; } .cf-cta h2 { color: #fff; } .cf-cta p { color: #C8D6E8; } .cf-cta .cf-eyebrow { color: #9CCBFF; } .cf-cta .cf-eyebrow::before { background: #9CCBFF; box-shadow: none; } .cf-cta .cf-eyebrow::after { background: linear-gradient(90deg, #9CCBFF, transparent); } .cf-btn--light { background: #fff; color: #0B1B33; } .cf-btn--light:hover { background: #EAF2FC; transform: translateY(-2px); } .cf-btn--outline-light { background: transparent; color: #fff; border-color: rgba(255,255,255,0.5); } .cf-btn--outline-light:hover { border-color: #fff; background: rgba(255,255,255,0.08); transform: translateY(-2px); } /* ── White-canvas cleanups of the shared primitives ───────────────────── */ .cf-eyebrow { font-size: 0.78rem; letter-spacing: 0.14em; } .cf-eyebrow::before { box-shadow: none; } .cf-btn--primary { background: var(--cf-accent); color: #fff; box-shadow: 0 8px 20px -12px var(--cf-accent-glow); } .cf-btn--primary:hover { background: var(--cf-accent-deep); } .cf-btn--primary::after { display: none; } .cf-btn--ghost { background: var(--cf-canvas); color: var(--cf-ink); border-color: var(--cf-line-2); } .cf-btn--ghost:hover { background: var(--cf-canvas); border-color: var(--cf-accent); color: var(--cf-accent-ink); } .cf-band--lit { background: var(--cf-canvas-2); } .cf-band--ruled { border-top: 1px solid var(--cf-line); border-image: none; } .cf-faq details { background: var(--cf-canvas); } .cf-faq details[open] { background: var(--cf-canvas); } .cf-band--alt .cf-faq details { background: var(--cf-canvas); } /* ══════════════════════════════════════════════════════════════════════════ CLIENT PORTAL — quiet tertiary action in the header + drawer. Deliberately NOT a button: an existing borrower signing in to Nexys is not the conversion this site is built for, and two adjacent filled buttons would put the login in direct competition with "Get Pricing". ══════════════════════════════════════════════════════════════════════════ */ .cf-header__portal { display: none; align-items: center; gap: 0.4rem; font-family: var(--cf-font-mono); font-size: 0.72rem; font-weight: 600; letter-spacing: 0.1em; text-transform: uppercase; color: var(--cf-muted); text-decoration: none; white-space: nowrap; padding: 0.45rem 0.7rem; border-radius: var(--cf-r-2); border: 1px solid transparent; transition: color var(--cf-d-1) var(--cf-ease), border-color var(--cf-d-1) var(--cf-ease), background var(--cf-d-1) var(--cf-ease); } .cf-header__portal svg { width: 14px; height: 14px; } .cf-header__portal:hover { color: var(--cf-accent-ink); border-color: var(--cf-line-2); background: var(--cf-tint); } /* Shown alongside the header phone, which appears at the same breakpoint. */ @media (min-width: 1101px) { .cf-header__portal { display: inline-flex; } } .cf-drawer__portal { display: inline-flex; align-items: center; justify-content: center; gap: 0.5rem; margin-top: 0.35rem; padding: 0.6rem; font-family: var(--cf-font-mono); font-size: 0.74rem; font-weight: 600; letter-spacing: 0.1em; text-transform: uppercase; color: var(--cf-muted); text-decoration: none; } .cf-drawer__portal svg { width: 14px; height: 14px; } .cf-drawer__portal:hover { color: var(--cf-accent-ink); } /* ══════════════════════════════════════════════════════════════════════════ STICKY BOTTOM CTA BAR Rendered by CfStickyBar (shared markup) and revealed by CfMotion from inside the family's single rAF scroll pass. It ships with the [hidden] attribute so a JS-off visitor never gets a bar permanently covering the bottom of the page — CfMotion removes [hidden] on mount, which is also what makes 'display' available to animate against. ══════════════════════════════════════════════════════════════════════════ */ .cf-stickybar { position: fixed; left: 0; right: 0; bottom: 0; z-index: var(--cf-z-sticky); /* Off-screen at rest. Transform rather than display, so the entrance can be animated and the bar never causes a layout shift. */ transform: translateY(110%); transition: transform var(--cf-d-3) var(--cf-ease); padding: 0 0 env(safe-area-inset-bottom, 0px); background: rgba(255,255,255,0.97); border-top: 1px solid var(--cf-line-live); box-shadow: 0 -18px 40px -26px rgba(11,27,51,0.35); } /* backdrop-filter on the bar itself is safe here (unlike on .cf-header) — the bar has no position:fixed descendants to capture. */ @supports (backdrop-filter: blur(14px)) { .cf-stickybar { backdrop-filter: blur(14px) saturate(140%); } } .cf-stickybar.is-visible { transform: translateY(0); } .cf-stickybar[hidden] { display: none; } .cf-stickybar__inner { max-width: var(--cf-max); margin: 0 auto; padding: 0.7rem var(--cf-pad-x); display: flex; align-items: center; justify-content: space-between; gap: 1.25rem; } .cf-stickybar__value { margin: 0; min-width: 0; font-size: 0.92rem; line-height: 1.45; color: var(--cf-text); } .cf-stickybar__actions { display: flex; align-items: center; gap: 0.6rem; flex: none; } .cf-stickybar__phone { display: inline-flex; align-items: center; gap: 0.45rem; font-family: var(--cf-font-mono); font-size: 0.86rem; font-weight: 600; color: var(--cf-ink); text-decoration: none; white-space: nowrap; padding: 0.4rem 0.2rem; transition: color var(--cf-d-1) var(--cf-ease); } .cf-stickybar__phone svg { width: 15px; height: 15px; color: var(--cf-accent-ink); } .cf-stickybar__phone:hover { color: var(--cf-accent-ink); } .cf-stickybar__x { display: grid; place-items: center; width: 34px; height: 34px; flex: none; background: transparent; border: 1px solid var(--cf-line); border-radius: var(--cf-r-2); color: var(--cf-faint); cursor: pointer; transition: color var(--cf-d-1) var(--cf-ease), border-color var(--cf-d-1) var(--cf-ease); } .cf-stickybar__x svg { width: 15px; height: 15px; } .cf-stickybar__x:hover { color: var(--cf-ink); border-color: var(--cf-line-2); } /* Phone: the value line is the first thing to go. The phone number and the CTA are what convert, and a wrapped sentence would double the bar's height over the content the visitor is trying to read. */ @media (max-width: 860px) { .cf-stickybar__value { display: none; } .cf-stickybar__inner { justify-content: center; padding: 0.6rem var(--cf-pad-x); } .cf-stickybar__actions { width: 100%; justify-content: space-between; } .cf-stickybar__phone { font-size: 0.82rem; } } /* ── The bar and the live-chat launcher share the bottom-right corner ────── The chat widget (app/layout.tsx buildChatWidgetScript) appends a 400x700 iframe id '1da-chat' and an 80x80 hit-target id '1da-chat-btn', both position:fixed at bottom:16px right:16px with INLINE styles. TWO TRAPS HERE, and the second one cost a debugging round: 1. Inline styles outrank a stylesheet, so lifting them clear of the bar genuinely requires !important. This is the one place in the family that uses it. 2. THE IDs START WITH A DIGIT, so they CANNOT be written as ID selectors. A CSS identifier may not begin with a digit — '#1da-chat-btn' is a parse error, and a browser discards the ENTIRE rule containing it. The first version of this file used it: the CSS shipped, it read correctly in the served

CorrFirst Gallery