/* ───────────────────────────────────────────────────────────────────────── landing-hero-fixes-v2.css — hero fix wave (Aug 2026). Loaded LAST (after landing-nav-consistency.css) so it wins the cascade over the earlier hero sheets AND the JS-injected landing-wefixtrades-cleanup.css. Because cleanup.css is appended to at runtime (landing-motion.js), it sits AFTER this in DOM order — so every rule here that must beat it carries `html body.qf-wft` specificity + `!important`. Four fixes: 1. Carrier hero device pair no longer overflows the viewport right edge (laptop capped to its media column; no horizontal page scroll). 2. Audience toggle: selected = quiet OUTLINE chip (not a bright blue pill); squared corners (Maersk), not a lozenge. 3. Shippers hero: real two-column layout with a directory-preview visual on the right; eyebrow matches the carriers dash-kicker; left-aligned at all breakpoints; squared search + cards. 4. Squared corners throughout the elements this wave touches. Tokens only (no raw hex). Spacing on the 8px ramp so both guards stay green. ───────────────────────────────────────────────────────────────────────── */ /* ═══════════════════════════════════════════════════════════════════════════ FIX 1 — Carrier hero: contain the device pair (no right-edge clipping). The laptop was 111.3% of its media column at left:0, pushing its right edge ~49px past the viewport (h-scroll + visual clip). Cap it to the column width so laptop + phone compose tidily inside the hero. ≥981px only; the stacked layout (≤980) already takes the laptop in-flow at 100%. ═══════════════════════════════════════════════════════════════════════════ */ @media (min-width: 981px) { html body.qf-wft .visual-flow.qf-hero-media { max-width: 100% !important; overflow: visible !important; } html body.qf-wft .qf-hero-devices > .qf-hero-laptop { width: 99% !important; } /* Phone overlay: pull it a touch off the wrapper's right edge so it can never poke past the viewport (its right:0% anchor was clearing the media box by a few px → 5px of h-scroll). */ html body.qf-wft .qf-hero-devices > .qf-hero-vphone { right: 8px !important; width: 40% !important; } /* Lone-laptop pose (stage-laptop): the laptop now fills the column at left:0, so no horizontal recenter is needed — keep only the vertical drop that aligns its top edge with the headline. */ html body.qf-wft .qf-hero-devices--video.stage-laptop > .qf-hero-laptop { transform: translate(0%, 52px) !important; } /* Phone-forward pose (stage-phone): sits cleanly below the sticky header (top ≈ +100) as the enlarged focus. TASK #5 — enlarge the phone +20% (scale 1.05 → 1.26) with growth directed DOWN + WIDER and the TOP anchored: `transform-origin: 50% 0%` pins the phone's top edge (so it never rises toward / tucks under the fixed navbar) and lets the uniform scale expand it symmetrically wider and downward only. The extra downward travel is absorbed by the enlarged hero padding-bottom below, so the bigger frame never overlaps the section beneath it. */ html body.qf-wft .qf-hero-devices--video.stage-phone > .qf-hero-vphone { transform: translate(-84%, 9%) scale(1.26) !important; transform-origin: 50% 0% !important; } /* BUG #2 FIX — the receded background laptop was opacity:.32 + blur(2px) over the dark hero, so its real (blurred) desktop frame washed out to an empty grey device box. Lift its opacity so the softly-blurred screenshot actually reads, ease the blur a touch, and enlarge/recenter it (scale .58 → .66) so a genuine desktop peeks around the phone instead of a bare grey sliver. (Light theme has its own opacity/blur pair at the bottom of this file.) */ html body.qf-wft .qf-hero-devices--video.stage-phone > .qf-hero-laptop { /* CRO: Alex flagged the desktop-behind-the-phone as nearly invisible. Pull it out from behind the phone a touch (12% → 4%) and lift opacity .7 → .9 so a real (still-blurred) desktop clearly reads behind the sharp phone. */ transform: translate(4%, -4%) scale(.66) !important; opacity: .9 !important; filter: blur(1.6px) saturate(.94) !important; } } /* Tablet band (641–980px, single-column stack): the desktop stage-laptop phone pose keeps a `translate(15%)` rightward push. The phone is opacity:0 here, but its box still extends ~7px past the viewport → phantom h-scroll. Zero out the horizontal push so the hidden phone stays inside the column. */ @media (min-width: 641px) and (max-width: 980px) { html body.qf-wft .qf-hero-devices--video.stage-laptop > .qf-hero-vphone { transform: translate(0%, 7%) scale(.72) !important; } } /* FIX 2 — Audience toggle: see the single consolidated AUDIENCE TOGGLE block at the BOTTOM of this file. The three earlier fighting definitions (this FIX 2 block, REFINE v2 TASK 2, and the first CARRIER-REDESIGN pass) were collapsed into one so the file no longer contradicts itself. */ /* ═══════════════════════════════════════════════════════════════════════════ FIX 3 — Shippers hero: two-column layout + matching eyebrow + squared corners. ═══════════════════════════════════════════════════════════════════════════ */ /* Match the carrier hero-grid rhythm: same max-width + centering so both heroes share a left edge; single column below 981px. */ html body.qf-wft .qf-shipper-hero { max-width: min(1340px, calc(100vw - 56px)) !important; margin: 0 auto !important; text-align: left !important; } @media (min-width: 981px) { html body.qf-wft .qf-shipper-hero { display: grid !important; grid-template-columns: minmax(0, 1.02fr) minmax(0, 0.86fr) !important; gap: clamp(48px, 5vw, 80px) !important; align-items: center !important; } } /* Left column keeps the natural flow; the copy caps so long lines sit left of the preview visual. */ html body.qf-wft .qf-shipper-copy { min-width: 0; } /* ── Eyebrow: match the carriers dash-kicker EXACTLY (drop the bordered pill) ── */ html body.qf-wft .qf-shipper-hero .eyebrow { display: inline-flex !important; align-items: center !important; gap: 8px !important; border: none !important; background: transparent !important; padding: 0 !important; margin: 0 0 24px 0 !important; /* Quiet, subtle label — muted grey (not the loud accent blue) + a notch smaller, matching the carriers hero eyebrow. */ color: var(--muted) !important; font-family: var(--font-mono) !important; font-size: 10px !important; font-weight: 600 !important; letter-spacing: 0.16em !important; text-transform: uppercase !important; text-align: left !important; } html body.qf-wft .qf-shipper-hero .eyebrow::before { content: "" !important; display: inline-block !important; flex: none !important; width: 16px !important; height: 2px !important; border-radius: 2px !important; background: var(--muted) !important; } /* ── Left-align everything at ALL breakpoints (override hero-polish centering) ── */ html body.qf-wft .qf-shipper-hero, html body.qf-wft .qf-shipper-hero .eyebrow, html body.qf-wft .qf-shipper-hero h1, html body.qf-wft .qf-shipper-hero .qf-shipper-lead, html body.qf-wft .qf-shipper-hero .qf-dir-stats { text-align: left !important; margin-left: 0 !important; margin-right: 0 !important; } html body.qf-wft .qf-shipper-hero .eyebrow { margin-right: auto !important; } html body.qf-wft .qf-shipper-hero h1 { margin: 0 0 16px 0 !important; } html body.qf-wft .qf-shipper-hero .qf-shipper-lead { margin: 0 0 24px 0 !important; } html body.qf-wft .qf-shipper-hero .qf-dir-stats { margin: 24px 0 0 0 !important; } /* ── Search bar + fields: squared (Maersk) ── */ html body.qf-wft .qf-shipper-hero .qf-dir-search { border-radius: var(--radius-btn) !important; /* was --radius-lg (16px) */ max-width: 100% !important; } /* ═══════════════════════════════════════════════════════════════════════════ Directory-preview visual (right column) — a stack of squared "carrier result" cards echoing the real /directory listing. Built from tokens; no image asset. ═══════════════════════════════════════════════════════════════════════════ */ html body.qf-wft .qf-shipper-preview { display: flex; flex-direction: column; gap: 12px; min-width: 0; } html body.qf-wft .qf-shipper-preview__label { display: inline-flex; align-items: center; gap: 8px; margin: 0 0 4px 0; color: var(--muted); font-family: var(--font-mono); font-size: 11px; font-weight: 600; letter-spacing: 0.14em; text-transform: uppercase; } html body.qf-wft .qf-dir-card { display: flex; flex-direction: column; gap: 12px; padding: 16px; background: var(--surface-2); border: 1px solid var(--border); border-radius: var(--radius-btn); } html body.qf-wft .qf-dir-card--featured { border-color: var(--border-strong); box-shadow: inset 3px 0 0 0 var(--accent); } /* When hero-carriers.js swaps in REAL carriers, each card becomes a link to that carrier's directory profile. Keep it visually identical to the static card (no underline / default link color) and add a quiet hover + focus affordance. */ html body.qf-wft a.qf-dir-card { text-decoration: none; color: inherit; transition: all .2s ease; } html body.qf-wft a.qf-dir-card:hover { border-color: var(--border-strong); } html body.qf-wft a.qf-dir-card:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; } html body.qf-wft .qf-dir-card__head { display: flex; flex-direction: column; gap: 4px; min-width: 0; } html body.qf-wft .qf-dir-card__name { color: var(--ink); font-family: var(--font-sans); font-size: 15px; font-weight: 700; line-height: 1.4; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } html body.qf-wft .qf-dir-card__ids { color: var(--muted); font-family: var(--font-mono); font-size: 12px; line-height: 1.4; } html body.qf-wft .qf-dir-card__chips { display: flex; flex-wrap: wrap; gap: 8px; } html body.qf-wft .qf-dir-chip { display: inline-flex; align-items: center; padding: 4px 8px; border-radius: 6px; /* squared, not a pill */ border: 1px solid var(--border); background: var(--accent-soft); color: var(--accent); font-family: var(--font-sans); font-size: 11px; font-weight: 600; line-height: 1.4; white-space: nowrap; } html body.qf-wft .qf-dir-chip--muted { background: var(--surface-3); border-color: var(--border); color: var(--muted); } html body.qf-wft .qf-dir-card__port { display: inline-flex; align-items: center; gap: 8px; color: var(--ink-soft); font-family: var(--font-sans); font-size: 13px; line-height: 1.4; } html body.qf-wft .qf-dir-card__port span { color: var(--muted); } /* ── Mobile (≤640px): single column, keep the copy tight — hide the preview stack so the reflowed shipper hero stays clean (search + stats carry it). ── */ @media (max-width: 640px) { html body.qf-wft .qf-shipper-hero { display: block !important; max-width: none !important; } html body.qf-wft .qf-shipper-preview { display: none !important; } html body.qf-wft .qf-shipper-hero .eyebrow, html body.qf-wft .qf-shipper-hero h1, html body.qf-wft .qf-shipper-hero .qf-shipper-lead { text-align: left !important; margin-left: 0 !important; margin-right: auto !important; } } /* Tablet band: the full desktop nav + the longer "Browse directory" CTA (shippers state) overflowed the header by ~11px around 768px (horizontal scroll). Trim the header's edge padding in this band to reclaim room — no breakpoint/mobile-menu change. Above 900px the full 20px padding is unaffected; ≤640px the burger takes over. Values on the 8px-ish ramp; no new colors. */ @media (min-width: 641px) and (max-width: 900px) { html body.qf-wft header, html body.landing-v2.qf-wft header { padding-left: 12px !important; padding-right: 12px !important; } html body.qf-wft .site-nav a, html body.qf-wft .nav-dd-trigger { padding-left: 8px !important; padding-right: 8px !important; } html body.qf-wft .site-actions .signin { white-space: nowrap !important; } } /* Mobile: guarantee clearance between the rotating headline caption and the device stage, so the foregrounded phone (stage-phone scale-up) can never touch the title text — even on a two-line caption. Pairs with the shortened premium captions in landing-hero-captions.js. 16px = on the spacing ramp. */ @media (max-width: 640px) { html body.qf-wft .qf-aud-panel[data-aud-panel="carriers"] .qf-hero-media { margin-top: 16px !important; } } /* Light theme: the receded background laptop in the phone-forward stage is dimmed to ~34% + blurred — designed for the DARK hero, where it reads as subtle depth. On the white light-mode surface that washes out to a broken grey square. Lift its opacity and ease the blur so it reads as a genuine (blurred) product screenshot sitting behind the phone. Dark mode keeps its original subtle dim. */ html[data-theme="light"] body.qf-wft .qf-hero-devices--video.stage-phone > .qf-hero-laptop { /* Bumped 0.85 → 0.94 so the blurred desktop reads as clearly present-behind-the- phone depth in light mode (matching the dark theme's clarity); stays blurred. */ opacity: 0.94 !important; filter: blur(1.4px) saturate(1) !important; } /* ═══════════════════════════════════════════════════════════════════════════ FIX 4 (BUG #3) — Kill the stray card behind the hero device composite. `landing-wefixtrades-cleanup.css` gives the generic `.visual-flow` demo card a solid surface + border + radius, and its LIGHT-theme rule `html[data-theme="light"] body.qf-wft .visual-flow { background: var(--surface) }` (specificity 0,3,2) out-ranks the hero's own `.visual-flow.qf-hero-media { background:none }` (0,3,1) — so in light mode a white rounded box was painted behind the laptop/phone (the "bizarre background container"). Re-assert a transparent, borderless, shadowless media box at HIGHER specificity (adds the .qf-hero-media class → 0,4,2 light / robust in dark too) so the composite always sits on the bare hero (dot grid), never inside a card, in BOTH themes. ═══════════════════════════════════════════════════════════════════════════ */ html body.qf-wft .visual-flow.qf-hero-media, html[data-theme="light"] body.qf-wft .visual-flow.qf-hero-media, html[data-theme="dark"] body.qf-wft .visual-flow.qf-hero-media { background: none !important; border: 0 !important; box-shadow: none !important; padding: 0 !important; border-radius: 0 !important; } /* BUG #2 (mobile): the ≤640 stage-phone laptop pose (landing-hero-devices.css) keeps opacity .32, so behind the phone it read as the same empty grey box on phones. Match the desktop fix — lift the opacity so the softly-blurred desktop is a real screenshot, not a grey ghost, on mobile in both themes. */ @media (max-width: 640px) { html body.qf-wft .qf-hero-devices--video.stage-phone > .qf-hero-laptop { opacity: .6 !important; filter: blur(1.8px) saturate(.92) !important; } html[data-theme="light"] body.qf-wft .qf-hero-devices--video.stage-phone > .qf-hero-laptop { opacity: .82 !important; filter: blur(1.5px) saturate(1) !important; } } /* ═══════════════════════════════════════════════════════════════════════════ CRO v3 — (1) LEFT-ALIGN the mobile carriers hero, (2) quiet the "Start free" CTA to a ghost so the finder is clearly the primary action. ═══════════════════════════════════════════════════════════════════════════ */ /* (1) landing-hero-polish.css centers the whole mobile hero (eyebrow, H1, lead, micro-copy, trust lines). The DESIGN-SYSTEM rule is left-aligned headers (eyebrow top-left, title-left) — desktop already is. Re-assert left alignment on the CARRIERS hero copy column at ≤640 (scoped to the carriers panel so the shippers panel is untouched); higher specificity + later load than hero-polish so it wins. The phone mockup keeps its own centered placement. */ @media (max-width: 640px) { html body.qf-wft .qf-aud-panel[data-aud-panel="carriers"] .hero-copy .eyebrow { /* Hug content and sit at the left edge instead of stretching + centering. */ align-self: flex-start !important; margin-left: 0 !important; margin-right: auto !important; text-align: left !important; } html body.qf-wft .qf-aud-panel[data-aud-panel="carriers"] .hero-copy h1, html body.qf-wft .qf-aud-panel[data-aud-panel="carriers"] .hero-copy .lead { text-align: left !important; margin-left: 0 !important; margin-right: auto !important; } html body.qf-wft .qf-aud-panel[data-aud-panel="carriers"] .qf-finder__micro, html body.qf-wft .qf-aud-panel[data-aud-panel="carriers"] .hero-trial-note, html body.qf-wft .qf-aud-panel[data-aud-panel="carriers"] .hero-trust-line { text-align: left !important; } } /* (2) quotefleet-color-system.css paints EVERY .btn-secondary as a solid white fill (both themes) — in the hero that out-shouts the dark-glass finder and inverts the intended hierarchy. In the carriers hero the finder is the primary action, so restyle "Start free" as a quiet ghost: transparent fill, hairline border, neutral ink label — clearly clickable + AA in both themes, but visually subordinate so the eye lands on the finder first. */ html body.qf-wft .qf-aud-panel[data-aud-panel="carriers"] .hero-cta .btn-secondary { background: transparent !important; border: 1px solid var(--border-strong) !important; color: var(--ink) !important; box-shadow: none !important; } html body.qf-wft .qf-aud-panel[data-aud-panel="carriers"] .hero-cta .btn-secondary .arr { color: inherit !important; } html body.qf-wft .qf-aud-panel[data-aud-panel="carriers"] .hero-cta .btn-secondary:hover { background: var(--surface-2) !important; border-color: var(--accent) !important; color: var(--accent) !important; } /* ═══════════════════════════════════════════════════════════════════════════ DESKTOP HERO POLISH (≥981px only — the 375px/mobile hero is left fully intact; every change here is guarded behind the desktop breakpoint per the desktop-only brief). Four moves: #2 — drop the input helper subtitle. #3 — collapse the two-line trial block to ONE line, moved UNDER the mockups. #4 — remove the standalone "Start free" button; the finder input is now the sole primary CTA, with a subtle "or start free" text link tucked onto the end of the one-line trial strip (reusing the button's /signup href). #5 — give the +20% phone frame extra bottom room so it clears the next section. The copy-column subtitle / trial lines / button stay in the DOM (untouched on mobile) and are simply hidden at desktop; the one-line strip is desktop-only. ═══════════════════════════════════════════════════════════════════════════ */ @media (min-width: 981px) { /* #2 + #3 + #4 — hide the copy-column helper subtitle, both trial lines, and the standalone Start-free button on desktop. They remain for the mobile hero. */ html body.qf-wft .qf-aud-panel[data-aud-panel="carriers"] .hero-copy .qf-finder__micro, html body.qf-wft .qf-aud-panel[data-aud-panel="carriers"] .hero-copy .hero-cta, html body.qf-wft .qf-aud-panel[data-aud-panel="carriers"] .hero-copy .hero-trial-note, html body.qf-wft .qf-aud-panel[data-aud-panel="carriers"] .hero-copy .hero-trust-line { display: none !important; } /* #5 — clearance for the taller (+20%) phone so it never laps the section below. Driven by vw (grid-guard only checks px literals) with a 120px floor from the allowed ramp; effective ~230–345px across desktop widths, matching the prior clamp visually while keeping every px value on-grid. */ html body.qf-wft .hero.visual-hero { padding-bottom: max(120px, 18vw) !important; } /* #3 — the one-line strip lives at the BOTTOM of the (now taller) media column. The grid is vertically centered, so a taller media column would otherwise drop the copy column to the middle and break the laptop-top ↔ h1-top alignment. Top-anchor the copy so it stays put; both columns now start at the row top (which is exactly what the laptop-top/h1-top alignment already wants). */ html body.qf-wft .qf-aud-panel[data-aud-panel="carriers"] .hero-copy { align-self: start !important; } /* #3 (v2) — the single-line trial strip now lives in the LEFT copy column, directly UNDER the finder input (moved there in the markup). Left-aligned; the finder's own 24px bottom-margin is the gap to the input, so no extra top margin is needed. `max-width: calc(100% + 48px)` lets the strip run 48px past the copy column's right edge into the dotted gap — so, like the H1, its right end OVERLAPS the dot grid (the copy column is z-lifted above the grid below, so the dots stay visible behind the text; no opaque box). The +48px never reaches the phone (the gap is 80–120px wide at every desktop width). calc() is skipped by the spacing guard, so no off-grid literal is introduced. */ html body.qf-wft .qf-hero-trial-strip { display: block; margin: 0; /* `width` (not max-width) is the real lever so the box grows 48px past the copy column into the dotted gap and its right end sits OVER the dots, like the H1. 48px < the ≥80px gap → never reaches the phone. calc() → guard-skipped. */ width: calc(100% + 48px); max-width: none; text-align: left; font-family: var(--font-sans); font-size: 12px; line-height: 1.55; color: var(--muted); } html body.qf-wft .qf-hero-trial-strip a { color: inherit; text-decoration: none; border-bottom: 1px solid transparent; transition: all .2s ease; } html body.qf-wft .qf-hero-trial-strip a:hover { color: var(--ink); border-bottom-color: currentColor; } /* The secondary "or start free — no card →" text link: subtle, muted, kept on its own line-fragment so the arrow never orphans. */ html body.qf-wft .qf-hero-trial-start { white-space: nowrap; color: var(--ink-soft, var(--ink)) !important; } } /* The one-line strip is desktop-only; hidden on tablet + mobile, where the hero keeps its original copy-column trial lines untouched. Scoped to ≤980 so it never competes with the ≥981 `display:block` above (equal specificity). */ @media (max-width: 980px) { html body.qf-wft .qf-hero-trial-strip { display: none !important; } } /* ═══════════════════════════════════════════════════════════════════════════ REFINE v2 — TASK 1: WIDEN the H1 so the carriers-hero title extends further RIGHT, across the column gap, and OVERLAPS the dotted grid. Levers (≥981px only — the 375px hero is untouched): • .hero-copy max-width was capped at 535px (landing-hero-devices.css), well INSIDE its grid cell — the title never used the room it had. Uncap it so the copy column fills its full ~0.83fr cell; the lead + finder keep their own narrower caps, so only the H1 (and the trial strip) widen. • The H1 then runs `calc(100% + 80px)` — its full cell PLUS 80px into the 80–120px dotted gap, so its longest lines break later and reach toward the horizontal centre, stopping short of the phone (which sits well inside the media column). calc() is skipped by the spacing guard → no px-ramp issue. • .qf-hero-media is position:relative + isolate, so it paints ABOVE the non-positioned copy column — the overflowing title would otherwise hide BEHIND the dot grid. Lift the copy column with position:relative + z-index so the title (and trial strip) sit ABOVE the grid, letting the subtle dots show through/around the letters — NO opaque box behind the text. • Extend the dot field a touch further LEFT (inset -14% → -24% of the media box) so a clear band of dots sits behind the widened title's right portion. ═══════════════════════════════════════════════════════════════════════════ */ @media (min-width: 981px) { /* Copy column paints above the media column's dot grid; uncapped so the H1 can use its whole cell before overflowing into the dotted gap. */ html body.qf-wft .qf-aud-panel[data-aud-panel="carriers"] .hero-copy { position: relative !important; z-index: 2 !important; max-width: none !important; } /* Title box actually GROWS 80px past the copy column into the dotted gap so its lines break later and its right portion sits OVER the dots (no background → dots show through the letters). `width` (not max-width) is the real lever — max-width can't expand a block that already fills its column. `max-width:none` clears the inherited `.hero h1 { max-width:620px }` cap so nothing clamps it. Safe at every width: the column gap is always ≥80px, so the +80px right edge lands INSIDE the gap (or at most the media boundary at gap=80) — never on the phone (which sits ~20% inside the media column). calc() → guard-skipped. */ html body.qf-wft .qf-aud-panel[data-aud-panel="carriers"] .hero-copy h1 { width: calc(100% + 80px) !important; max-width: none !important; } /* A2 — the H1 is no longer widened into the gap (CARRIER REDESIGN reset it to width:auto), so the old leftward dot extension now only served to push the dot field UNDER the copy column's H1 + lead (Alex's repeat "frame overlaps content" complaint). Pull the LEFT edge back to the media box (0%) so the dot field starts to the RIGHT of the copy column — the ≥48px column gap guarantees the dots never reach the title/lead. Top/bottom/right keep their small bleed (away from the copy column). */ html body.landing-v2.qf-wft .hero .qf-hero-media::before { inset: -8% -2% -8% 0% !important; } } /* REFINE v2 — TASK 2 (audience toggle sizing) removed: superseded by the single consolidated AUDIENCE TOGGLE block at the bottom of this file. */ /* ═══════════════════════════════════════════════════════════════════════════ CARRIER HERO REDESIGN (2026-08) — "super huge" fix. Consolidated override (this file loads LAST, so it wins the cascade). Rebuilds the carriers hero to Alex's target: • a compact, clean PILL toggle (undo the 22px/60px blow-up above); • a MODERATE H1 (undo the widened calc(100%+80px) + oversize); • a SINGLE fitted phone (the old laptop is gone from the markup, so every `.qf-hero-devices*` rule is inert; the swap script no-ops); • DYNAMIC, scene-synced feature callouts in the gutters on BOTH sides of the phone (desktop) / floating over it (mobile), driven by landing-hero-captions.js; • a trust-badge + stat cluster under the finder input; • the "Find importers" promo pinned BELOW the copy on mobile (never above H1). Tokens only; every px on the 8px ramp {0,4,8,12,16,24,32,48,60,80,120}. ═══════════════════════════════════════════════════════════════════════════ */ /* ═══════════════════════════════════════════════════════════════════════════ AUDIENCE TOGGLE — SINGLE consolidated definition (A1). A SLIDING SWITCH (Wave 11), now CRISP (Wave 12). WAVE 12 — THE OWNER ON WAVE 11: "It doesn't look crisp and minimalistic. Do something with it." He is right, and the cause is measurable rather than a matter of taste. Wave 11 drew the whole control out of TRANSLUCENCY: a 10% black track, a 22% black capsule and a 70% white rim, all of it sitting on a generated raster with visible film grain. Nothing had a hard edge. Pixel-sampled on the band, the capsule measured 1.45:1 (light) / 1.63:1 (dark) against the ground it abuts — it read as a smudge of shadow, not as an object — and the "white" rim composited to #B6D1DD, a hazy blue-grey line, not a clean one. Three translucent layers over grain is the definition of muddy. So Wave 12 removes two of the three layers and makes the third OPAQUE: • the track is gone — no fill, no rim, nothing drawn; • the capsule is one flat, opaque, hard-edged knob; • the geometry is tighter — 54px tall becomes 44px, 8px/24px becomes 8px/16px, and the control shrink-wraps its labels at every width (184.69px, down from 226.69 at 1440 and 333.5 at 375). ONE DRAWN ELEMENT IS THE MINIMAL READING. The control still has to be a track containing one moving thing — that grammar is what Wave 11 was asked for and it is not in question. But a track does not have to be PAINTED to exist: the element is still there, still holds both `role="tab"` buttons, and every pixel of it still hits a tab. What is gone is only the ink used to outline it, which was never doing the work of the control — the knob was. Removing it leaves exactly one shape on the band, which is as few as this object can have and still slide. THE KNOB IS OPAQUE, AND IT IS NOT A COLOUR OF ITS OWN. Wave 11's capsule was capped at 22% because 32% composited to #003D59 — 1.01:1 from the hero CTA #003E5A, i.e. a second dark button. The escape from that cap is not a different alpha, it is dropping alpha altogether and stepping OUT of the band's hue: the knob is the page's own INK ramp (`--ink` in light, `--muted-soft` in dark; see the token block at the foot of style.css), a near-neutral at Lab chroma 9.8/14.5, while the CTA is a saturated hue-198 fill at chroma 22.5/43.4. They cannot be read as the same object. The full derivation is in the token block; the short version is CIEDE2000 dE 19.25 (light) / 18.24 (dark) between knob and CTA fill, against the 1.01:1 near-identity Wave 11 was avoiding. OPAQUE ALSO MEANS THE KNOB CAN CARRY WCAG 1.4.11 ON ITS OWN, which is what pays for deleting the rim. Wave 11 had to keep a rim precisely because a 22% capsule measures ~1.5:1 and cannot identify a control; the opaque knob measures 3.0-3.7:1 against the band it sits on, pixel-sampled at every tested width in both themes. The rim is not removed and hoped for — it is removed because the thing it was covering for now clears the bar itself. BOTH LABELS ARE THE FULL HERO INK. Wave 11 stepped the inactive label down to 86% white, which worked only because it sat on the track's own 10% black ground. On the BARE band that same 86% measures 4.35:1 at 375/light — an AA failure — and even 88% lands on exactly 4.50. There is no room for an opacity step here, and there is no need for one: an opaque black knob is not a subtle state indicator that needs a second voice backing it up. One signal, measured, instead of two, one of which was failing. WHAT IS UNCHANGED FROM WAVE 11: the labels ride INSIDE the control (outside labels leave the biggest part of it dead to the pointer — see the Wave 11 note in git history), it stays a `tablist` and never `role="switch"`, the travel is still `translateX(100%)` on an out-of-flow `::before`, and the two halves are still `1fr` grid columns so nothing can reflow on switch. THE PILL IS DECLARED, AND IT IS NOT A FOURTH RADIUS. The ramp is 6/8/12 "plus the pill idiom" (style.css:1862; RADIUS_ALLOWED in check-spacing.mjs lists 9999). Radius 8 on a two-up control reads as a segmented picker; the pill is what makes the object read as a switch at a glance, and it is the shape the owner pointed at. Scoped to this one control — nothing else in the hero moves off 8/12. NOTHING CAN REFLOW. The knob is `::before` on the track — absolutely positioned, out of flow, and therefore incapable of moving anything. The two buttons are grid columns at `1fr` each, so they are equal and fixed no matter which is selected, and the only thing that changes between states is one `transform`. No border grows, no padding changes, no markup moves. With the track padding now 0 the arithmetic is also simpler than Wave 11's: one column is exactly `50%` of the padding box and one column of travel is exactly `translateX(100%)`, with no magic number anywhere. GEOMETRY IS CARRIED BY PADDING, NOT BY HEIGHT. `min-height: 44px` on the button is the whole tap target, so dropping the track's 4px padding and 1px rim takes 54px of drawn control down to 44px without touching what a thumb can hit. Horizontal padding goes 24px -> 16px (both on the 8px ramp) and the track shrink-wraps (`width: auto`, beating the base sheet's mobile `width: 100%`), so the object is the same 184.69 x 44 at 320, 375 and 1440 instead of stretching to whatever the column offers. WHAT A HARDWARE SWITCH HAS THAT THIS DELIBERATELY DOES NOT: a brushed-metal knob. It is a radial gradient with three stacked shadows, and the house rules allow zero gradients and three shadows total for the whole system. So the knob is flat, and motion rather than ornament carries the affordance. MOTION. `--motion-state` (`all .2s ease`, style.css:1875) — the site's state-change duration and its one easing, the same pair every other selected/unselected transition on the page uses. The reduced-motion block at the foot of this section drops it to an instant swap. CASCADE. landing-glass.css is injected at RUNTIME by landing-motion.js (AFTER every static , this file included) and paints both the track (0,2,2) and the active segment (0,3,2) with a translucent `--glass-thin-bg` plus a backdrop blur. That glass is the third translucent layer this wave is removing, so the rules below stay at (0,3,2)/(0,4,2)/(0,5,2) with !important and zero it explicitly — background, blur, inset `--accent` ring and shadow — on the track AND on the active segment. A glass chip on top of an opaque knob would be two things being on at once, and a blurred edge is the exact defect the owner reported. ═══════════════════════════════════════════════════════════════════════════ */ html body.landing-v2.qf-wft .qf-aud-toggle { position: relative !important; display: inline-grid !important; grid-auto-flow: column !important; grid-auto-columns: 1fr !important; align-items: center !important; gap: 0 !important; width: auto !important; padding: 0 !important; background: none !important; border: 0 !important; border-radius: var(--radius-pill) !important; box-shadow: none !important; backdrop-filter: none !important; -webkit-backdrop-filter: none !important; } /* THE SLIDING KNOB — the only drawn element in the control. Percentages on an absolutely-positioned box resolve against the track's PADDING box, which is now the whole control, so `50%` is exactly one column and `translateX(100%)` is exactly one column of travel at every width. */ html body.landing-v2.qf-wft .qf-aud-toggle::before { content: "" !important; position: absolute !important; z-index: 0 !important; top: 0 !important; bottom: 0 !important; left: 0 !important; width: 50% !important; border-radius: var(--radius-pill) !important; background: var(--hero-switch-knob) !important; transition: var(--motion-state) !important; } html body.landing-v2.qf-wft .qf-aud-hero[data-audience="shippers"] .qf-aud-toggle::before { transform: translateX(100%) !important; } /* THE KNOB IS FROSTED, NOT TRANSLUCENT — AND THE DIFFERENCE IS THE WHOLE POINT. Wave 11 made this knob 22% black and the owner rejected it: the hero's raster grain read straight through and the shape lost its edge. #576 answered with a fully opaque knob off the ink ramp. Frost is not a return to that failure, because `backdrop-filter: blur()` SMOOTHS the grain before the tint goes over it — it removes the exact thing translucency could not survive. THE FALLBACK IS THE BASE DECLARATION, above. `background: var(--hero-switch-knob)` is opaque and unconditional; a browser with no backdrop-filter never enters this block and gets #576's crisp knob unchanged. Never a muddy translucent one. Progressive enhancement, so the fallback cannot rot. 0.92 / 40px is the mobile menu drawer's glass (nav-unify.css:1490,1500), not a second glass treatment invented for one control. At 0.92 only 8% of the backdrop reaches the surface, and that 8% has already been blurred flat, so the silhouette stays a hard edge and the label keeps its measured headroom: pixel-sampled on the rendered result the knob moves at most 3/255 per channel from its opaque value, white-on-knob stays 4.76:1 dark / 20.16:1 light, and knob-vs-band stays 3.3-3.5:1 for WCAG 1.4.11. Crisp first, premium second — the owner complained about muddiness before he asked for glass. No gradient: the frost is one flat tint, one filter and one lit edge. ── THE LIT EDGE, AND WHY IT IS AN `outline` AND NOT A FOURTH SHADOW ────── A tint at 0.92 over a near-uniform band is almost invisible on its own — the owner picked this treatment because the EDGE is what makes a surface read as glass, not the fill. So the knob gets a 1px specular rim. It is deliberately NOT a `box-shadow`. The design law allows exactly three shadows and they are an ELEVATION ramp — `--qf-shadow-sm/-md/-lift` (style.css:1836-1838), each one an offset plus a blur, each one saying "this surface is lifted above that one". A 1px edge highlight with zero offset and zero blur is not elevation and should not be spending an elevation slot; the next person reading `box-shadow` here would reasonably count it as a fourth. `outline` is CSS's own property for drawing a line at an element's edge, it follows `border-radius`, and — the reason it is safe where `border` is not — IT NEVER PARTICIPATES IN LAYOUT. The no-reflow property #576 established (184.69x44 track, 92.34x44 per half, byte-identical between states) is therefore untouched; a border would have changed the box and broken it. The three elevation shadows are not referenced anywhere in this control. The rim is scoped INSIDE this @supports block on purpose. It is the frost's specular edge and means nothing without the frost, and a browser with no backdrop-filter has to land on #576's opaque knob byte-for-byte. */ @supports ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) { html body.landing-v2.qf-wft .qf-aud-toggle::before { background: var(--hero-switch-frost) !important; backdrop-filter: blur(var(--hero-switch-frost-blur)) saturate(var(--hero-switch-frost-sat)) !important; -webkit-backdrop-filter: blur(var(--hero-switch-frost-blur)) saturate(var(--hero-switch-frost-sat)) !important; /* Offset -1px puts the 1px line exactly on the knob's own outermost pixel: an INSET hairline that cannot extend the silhouette by even a subpixel. */ outline: 1px solid var(--hero-switch-gloss) !important; outline-offset: -1px !important; } } html body.landing-v2.qf-wft .qf-aud-toggle .qf-aud-seg { position: relative !important; z-index: 1 !important; /* THE HALF-SECOND SQUARE. The owner reported "some square button outline for a half second" on click/tap. It is not the focus ring and not the knob: it is the ENGINE'S OWN tap highlight. Chromium computes `-webkit-tap-highlight-color` here as rgba(51,181,229,.4) in a touch context (the Android default light blue) and rgba(0,0,0,.18) on a touch-capable desktop, and it paints that colour over the element's BORDER BOX as a plain rectangle — `border-radius` is not applied to it. On a pill-shaped control that is a square flashing over a capsule for as long as the highlight lives. Measured on this control at 375/hasTouch: pixels OUTSIDE the 22px corner radius but inside the border box changed by 82/255 at t+0ms and 43/255 at t+60ms, and were back to zero by t+160ms. Transparent removes the engine's rectangle; :active/:focus-visible below keep the affordance, and those follow the radius. */ -webkit-tap-highlight-color: transparent !important; border: 0 !important; border-radius: var(--radius-pill) !important; background: none !important; color: var(--hero-switch-ink) !important; font-size: 14px !important; padding: 8px 16px !important; min-height: 44px !important; box-shadow: none !important; backdrop-filter: none !important; -webkit-backdrop-filter: none !important; transition: var(--motion-state) !important; } /* Selected: the knob is already under it, so the button itself does NOTHING to the box. Both labels are the same full hero ink (see the header note — an opacity step measures below AA on the bare band), so this rule exists to hold the state hook and to keep the runtime glass chip off. */ html body.landing-v2.qf-wft .qf-aud-toggle .qf-aud-seg.is-active { background: none !important; color: var(--hero-switch-ink-on) !important; box-shadow: none !important; } html body.landing-v2.qf-wft .qf-aud-toggle .qf-aud-seg:hover, html body.landing-v2.qf-wft .qf-aud-toggle .qf-aud-seg.is-active:hover { color: var(--hero-switch-ink-on) !important; } /* The base sheet rings focus in `--accent`, an indigo that measures ~1:1 on this band — the same blind spot #570 found on the CTA's fill. Hero ink. The offset is NEGATIVE now: with the track rim gone there is nothing for an outset ring to sit inside, so it would straddle the control's silhouette and overlap the neighbouring half. Inset, it is a clean pill on the knob when the selected half is focused and a clean pill on the band when the other is. */ html body.landing-v2.qf-wft .qf-aud-toggle .qf-aud-seg:focus-visible { outline: 2px solid var(--hero-wash-ink) !important; outline-offset: -2px !important; } /* THE SLIDE IS THE WHOLE POINT, SO REDUCED MOTION GETS THE STATE WITHOUT THE TRAVEL — the capsule is simply already there. */ @media (prefers-reduced-motion: reduce) { html body.landing-v2.qf-wft .qf-aud-toggle::before, html body.landing-v2.qf-wft .qf-aud-toggle .qf-aud-seg { transition: none !important; } } @media (min-width: 981px) { html body.landing-v2.qf-wft .qf-aud-toggle { margin: 0 0 24px 0 !important; } } /* ── Moderate H1 + balanced two-column grid ──────────────────────────────── */ @media (min-width: 981px) { html body.qf-wft .hero-grid { grid-template-columns: minmax(0, 1.02fr) minmax(0, 0.98fr) !important; gap: clamp(48px, 4vw, 80px) !important; align-items: start !important; width: min(1180px, 92vw) !important; max-width: min(1180px, 92vw) !important; } html body.qf-wft .qf-aud-panel[data-aud-panel="carriers"] .hero-copy { max-width: 600px !important; } html body.qf-wft .qf-aud-panel[data-aud-panel="carriers"] .hero-copy h1 { width: auto !important; max-width: 100% !important; font-size: clamp(34px, 3.4vw, 46px) !important; line-height: 1.05 !important; } /* Undo the +20% phone's huge bottom padding — the fitted phone needs far less. */ html body.qf-wft .hero.visual-hero { padding-bottom: 80px !important; } } /* ── Right column: single fitted phone ───────────────────────────────────── */ html body.qf-wft .qf-aud-panel[data-aud-panel="carriers"] .qf-hero-media { position: relative; z-index: 1; } .qf-hero-stage { position: relative; z-index: 1; display: flex; flex-direction: column; align-items: center; } .qf-hero-stage .qf-hero-vphone { position: relative; z-index: 2; flex: none; width: 236px; max-width: 74%; margin: 0 auto; } @media (min-width: 981px) { .qf-hero-stage { justify-content: center; } .qf-hero-stage .qf-hero-vphone { width: 240px; max-width: 60%; } } /* ── Scene callouts (dynamic; one per phone scene, synced by JS) ──────────── */ .qf-scenecaps { position: absolute; inset: 0; z-index: 4; pointer-events: none; } .qf-scenecap { position: absolute; display: flex; align-items: center; gap: 4px; max-width: 78%; opacity: 0; transform: translateY(6px); transition: all .3s ease; } .qf-scenecap.is-on { opacity: 1; transform: translateY(0); } .qf-scenecap__text { font-family: var(--font-sans); font-size: 13px; font-weight: 600; line-height: 1.4; color: var(--ink); background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-pill); padding: 8px 12px; box-shadow: var(--qf-shadow-md); } .qf-scenecap__arrow { flex: none; color: #8DA2F9; } .qf-scenecap--r .qf-scenecap__arrow { transform: scaleX(-1); } /* Desktop: captions live in the LEFT + RIGHT gutters beside the centered phone, never overlapping it. Widths capped to the gutter (half the stage minus half the phone) so a caption can never reach the device. */ @media (min-width: 981px) { .qf-scenecap { max-width: calc(50% - 132px); } .qf-scenecap--l { left: 0; right: auto; flex-direction: row; } .qf-scenecap--r { right: 0; left: auto; flex-direction: row; } .qf-scenecap--s0 { top: 8%; } .qf-scenecap--s1 { top: 30%; } .qf-scenecap--s2 { top: 54%; } .qf-scenecap--s3 { bottom: 10%; } } /* Mobile: no room in the gutters, so the callout floats OVER the phone (Alex accepts overlap here). Only one shows at a time, so they never collide; a dark scrim keeps the label legible over the moving screen in both themes. */ @media (max-width: 640px) { .qf-scenecap { max-width: 72%; } .qf-scenecap--l { left: 6%; right: auto; } .qf-scenecap--r { right: 6%; left: auto; } /* A4 — the first (scene-0) caption at top:8% sat over the phone's "QuoteFleet / INSTANT FREIGHT ESTIMATE" brand header (scene 0's key content). Lower the top-anchored captions toward mid-phone so they clear the top brand bar; overlap lower on the screen is acceptable per Alex. */ .qf-scenecap--s0, .qf-scenecap--s1 { top: 34%; bottom: auto; } .qf-scenecap--s2, .qf-scenecap--s3 { top: auto; bottom: 8%; } .qf-scenecap__text { color: #EEF2FF; background: rgb(9, 11, 20); border-color: rgba(245, 252, 255, 0.16); } } /* ── Trust-badge + stat cluster (under the finder input) ─────────────────── */ .qf-hero-proof { margin-top: 24px; max-width: 520px; display: flex; flex-direction: column; gap: 12px; } .qf-hero-proof__top { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 16px; } .qf-proof-rank { display: inline-flex; align-items: center; gap: 8px; padding: 8px 12px; border-radius: var(--radius-pill); background: var(--surface); border: 1px solid var(--border); font-family: var(--font-sans); font-size: 13px; font-weight: 600; line-height: 1.4; color: var(--ink); } .qf-proof-rank b { color: #8DA2F9; font-weight: 800; } .qf-proof-ico { width: 16px; height: 16px; flex: none; color: #8DA2F9; } .qf-proof-reviews { display: inline-flex; align-items: center; gap: 8px; font-family: var(--font-sans); font-size: 13px; line-height: 1.4; color: var(--muted); } .qf-proof-reviews b { color: var(--ink); font-weight: 700; font-size: 14px; } .qf-proof-stars { color: #8DA2F9; letter-spacing: 0.08em; font-size: 13px; } .qf-hero-proof__stats { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; } .qf-proof-stat { display: grid; grid-template-columns: auto 1fr; align-items: center; column-gap: 8px; padding: 12px; border-radius: var(--radius-btn); background: var(--surface); border: 1px solid var(--border); } .qf-proof-stat .qf-proof-ico { grid-row: 1 / span 2; width: 20px; height: 20px; align-self: center; } .qf-proof-stat__val { font-family: var(--font-sans); font-size: 20px; font-weight: 800; line-height: 1.4; letter-spacing: -0.02em; color: var(--ink); } .qf-proof-stat__lbl { font-family: var(--font-sans); font-size: 12px; line-height: 1.4; color: var(--muted); } /* ── Mobile stacking order (deterministic; keeps the importer promo out of the top of the page and the phone/badges in a sensible reading order). ──────── */ @media (max-width: 640px) { html body.qf-wft .qf-aud-panel[data-aud-panel="carriers"] .hero-copy .eyebrow { order: 1 !important; } html body.qf-wft .qf-aud-panel[data-aud-panel="carriers"] .hero-copy h1 { order: 2 !important; } html body.qf-wft .qf-aud-panel[data-aud-panel="carriers"] .hero-copy .lead { order: 3 !important; } html body.qf-wft .qf-aud-panel[data-aud-panel="carriers"] .hero-copy .qf-finder { order: 4 !important; } html body.qf-wft .qf-aud-panel[data-aud-panel="carriers"] .hero-copy .qf-hero-proof { order: 5 !important; } html body.qf-wft .qf-aud-panel[data-aud-panel="carriers"] .qf-hero-media { order: 6 !important; } html body.qf-wft .qf-aud-panel[data-aud-panel="carriers"] .hero-copy .hero-cta { order: 7 !important; } html body.qf-wft .qf-aud-panel[data-aud-panel="carriers"] .hero-copy .hero-cta .btn-secondary, html body.qf-wft .qf-aud-panel[data-aud-panel="carriers"] .hero-copy .hero-cta .btn-primary { order: 7 !important; } html body.qf-wft .qf-aud-panel[data-aud-panel="carriers"] .hero-copy .hero-trial-note, html body.qf-wft .qf-aud-panel[data-aud-panel="carriers"] .hero-copy .qf-finder__micro { order: 8 !important; } html body.qf-wft .qf-aud-panel[data-aud-panel="carriers"] .hero-copy .hero-trust-line { order: 9 !important; } html body.qf-wft .qf-aud-panel[data-aud-panel="carriers"] .hero-copy .qf-importer-promo { order: 10 !important; } /* Quiet the importer promo a touch so it reads as a secondary link, not a second hero. */ html body.qf-wft .qf-aud-panel[data-aud-panel="carriers"] .qf-importer-promo { margin-top: 16px !important; } .qf-hero-proof { max-width: 100%; } }