/* ───────────────────────────────────────────────────────────────────────── 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: border-color 0.15s ease, transform 0.15s ease, box-shadow 0.15s ease; } html body.qf-wft a.qf-dir-card:hover { border-color: var(--border-strong); transform: translateY(-1px); } 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: color .15s ease, border-color .15s 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). Replaces the three fighting blocks that used to live in this file. landing-glass.css is injected at RUNTIME by landing-motion.js (AFTER every static , this file included) and paints BOTH the track `.qf-aud-toggle` AND the active segment `.qf-aud-seg.is-active` with the same translucent `--glass-thin-bg`, so the selected side lost all fill contrast and read as a bare floating blue ring. The active rule below adds the `.qf-aud-toggle` ancestor + `body.landing-v2` (specificity 0,5,2) so it out-specifies landing-glass's active rule (0,3,2) and restores a SOLID raised chip: selected reads via FILL (design-system §4: selected = fill + subtle 1px border), NOT a bright ring. The blue :focus-visible ring (base sheet) stays distinct from this resting fill. Compact segmented pill: ~44px track, ~36px chip, pill radius, both themes. ═══════════════════════════════════════════════════════════════════════════ */ html body.landing-v2.qf-wft .qf-aud-toggle { border-radius: var(--radius-pill) !important; gap: 4px !important; padding: 4px !important; } html body.landing-v2.qf-wft .qf-aud-toggle .qf-aud-seg { border-radius: var(--radius-pill) !important; font-size: 14px !important; padding: 8px 16px !important; min-height: 36px !important; } /* Active = SOLID raised chip — beats landing-glass's translucent active seg and its backdrop-filter blur, so "selected" is obvious by fill, not the ring. */ html body.landing-v2.qf-wft .qf-aud-toggle .qf-aud-seg.is-active { color: var(--ink) !important; background: var(--surface) !important; -webkit-backdrop-filter: none !important; backdrop-filter: none !important; box-shadow: 0 1px 2px rgba(0, 0, 0, 0.18), inset 0 0 0 1px var(--border) !important; } html body.landing-v2.qf-wft .qf-aud-toggle .qf-aud-seg.is-active:hover { color: var(--ink) !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: opacity 0.42s ease, transform 0.42s 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: 0 6px 18px -10px rgba(0, 0, 0, 0.55); } .qf-scenecap__arrow { flex: none; color: #6E8BFF; } .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: rgba(9, 11, 20, 0.86); border-color: rgba(245, 252, 255, 0.16); -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); } } /* ── 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: #6E8BFF; font-weight: 800; } .qf-proof-ico { width: 16px; height: 16px; flex: none; color: #6E8BFF; } .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: #6E8BFF; 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%; } }