/* ═══════════════════════════════════════════════════════════════════════════
nav-ia.css — HOMEPAGE half of the navigation / information-architecture
rebuild. Injected LAST by landing-motion.js (after landing-glass.css, which
is itself injected after every static groups' sub-headings, which are new. */
html body.qf-wft .site-mobile-menu .mm-group { border-top: 1px solid var(--border); }
html body.qf-wft .site-mobile-menu .mm-group:first-child { border-top: 0; }
html body.qf-wft .site-mobile-menu .mm-sub {
margin: 8px 0 0;
padding: 8px 16px 4px;
font-family: var(--font-mono);
font-size: 10px;
letter-spacing: 0.12em;
text-transform: uppercase;
font-weight: 700;
color: var(--muted);
}
html body.qf-wft .site-mobile-menu .mm-group > .mm-sub:first-of-type { margin-top: 0; }
html body.qf-wft .site-mobile-menu .mm-flat {
border-top: 1px solid var(--border);
font-weight: 600;
}
/* `hidden` must stay authoritative against the display rules above. */
html body.qf-wft .site-mobile-menu a[hidden],
html body.qf-wft .site-mobile-menu .mm-group > a[hidden],
html body.qf-wft .site-actions [hidden],
html body.qf-wft .site-nav [hidden] { display: none !important; }
/* ── Mega-menu panels: declared column counts ───────────────────────────── */
html body.qf-wft .nav-dd-panel--cols1 { grid-template-columns: max-content !important; }
html body.qf-wft .nav-dd-panel--cols3 { grid-template-columns: repeat(3, max-content) !important; }
/* Wide panels anchor to the header card so they cannot run off the viewport —
the For Shippers panel overflowed the right edge by 100px at 1024px. Same
rules as nav-unify.css; restated because the homepage does not load it. */
html body.qf-wft .site-header-inner { position: relative; }
html body.qf-wft .nav-dd--wide { position: static; }
html body.qf-wft .nav-dd--wide > .nav-dd-panel { top: calc(100% + 8px); }
/* READABILITY OVER MATERIAL. landing-glass.css paints the dropdown with
`--glass-ultra-bg`, and this rule used to answer it with --glass-card-solid:
the glass system's most opaque SOLID token, but still 0.98 alpha — 2% of
whatever the panel covers reaching the link text. It never actually rendered,
only because the chrome / WAVE 4 blocks further down this file are later at
equal specificity. A translucent fill aimed at this element with !important
and kept one cascade shuffle away from winning is not a material choice, it
is a latent regression, so it now names the same opaque chrome token the rest
of the flyout uses. Line count held so the guard baselines do not renumber.
Both themes, tokens only. Elevation and the edge: see WAVE 4 at EOF. */
html body.qf-wft .nav-dd-panel,
html[data-theme="light"] body.qf-wft .nav-dd-panel,
html:not([data-theme="light"]) body.qf-wft .nav-dd-panel {
background: var(--chrome-panel-bg) !important;
}
/* ── 3 — Audience toggle rides the hero column ──────────────────────────── */
html body.qf-wft .qf-aud-togglerow {
margin-bottom: 0;
align-items: start;
}
html body.qf-wft .qf-aud-togglerow > .qf-aud-toggle {
justify-self: start;
align-self: start;
max-width: 100%;
}
/* At phone widths the segmented control is deliberately full-width; the
.hero-grid row now supplies the side gutter it never had. */
@media (max-width: 640px) {
html body.qf-wft .qf-aud-togglerow > .qf-aud-toggle { width: 100%; }
}
/* ── Footer: five columns mirroring the three header menus + Company/Legal ─
THE HOMEPAGE SHIPS THE SAME FOOTER MARKUP AS EVERY OTHER PAGE. It did not:
landing.html is a static file that never passes through applyFullSiteHeader,
so it carried its own hardcoded four-column PRODUCT / SOLUTIONS / COMPANY /
LEGAL footer while the shared PREMIUM_FOOTER moved to five. The five-track
grid below was applied to it regardless, so `/` rendered four columns in five
tracks — a permanently empty 203–230px trailing track from 981px to 1600px —
and linked to none of Importers Directory, Manifest Privacy, Carrier Market
Guides, Directory Pro, Request Freight Quotes or Partners. landing.html now
embeds PREMIUM_FOOTER verbatim (pinned by navInformationArchitecture.test.ts),
so the markup and the grid finally describe the same footer.
TRACK LADDER — 5 → 3 → 1, skipping 4 and 2. The full arithmetic lives in the
matching block at the foot of nav-unify.css: with N=5 link columns, any track
count T where `N mod T === 1` strands one column alone on the last row, which
rules out T=4 and T=2. The homepage does not load nav-unify.css, so the same
ladder is restated here at `html body.qf-wft` specificity to beat
landing-conversion.css's own `.premium-footer-inner` rules (1.4fr + 3 tracks
at base, `1fr 1fr` at ≤980px, `1fr` at ≤720px) at EVERY width — hence no
`min-width` floor on the base rule. */
/* THE HOMEPAGE FOOTER HAD NO SIDE OR BOTTOM INSET AT ALL — measured
`54px 0 0 0` against `54px 24px 34px 24px` on every other page. Cause:
landing-wefixtrades.css applies `all: unset` to `body.qf-wft .premium-footer`,
which wipes landing-conversion.css's padding, and the cleanup sheet restores
only `padding-top`. Harmless while the inner grid was capped at 1120px and the
viewport was wider — but from 641px to 1120px the grid runs the full viewport
width, so every column heading and link sat flush against the screen edge, and
the payment strip sat flush against the bottom of the document.
`display: block` is half the fix and the non-obvious half: `all: unset` also
drops back to `display: inline`, and horizontal padding on an inline
box does not indent a block-level child — the grid escaped the padding and
measured the full 900px of a 900px viewport even once the padding was
restored. Restoring the element's own default display is what makes the inset
real. Left deliberately NOT `!important`, so landing-home-fixes.css's phone
treatment (footer padding 0, 16px on the inner instead) still wins below
641px. */
html body.qf-wft .premium-footer {
display: block;
padding-left: 24px;
padding-right: 24px;
padding-bottom: 32px;
}
html body.qf-wft .premium-footer .premium-footer-inner {
grid-template-columns: repeat(5, minmax(0, 1fr));
column-gap: 32px;
}
html body.qf-wft .premium-footer .footer-brand { grid-column: 1 / -1; }
@media (max-width: 1100px) {
html body.qf-wft .premium-footer .premium-footer-inner {
grid-template-columns: repeat(3, minmax(0, 1fr));
}
}
@media (max-width: 640px) {
html body.qf-wft .premium-footer .premium-footer-inner {
grid-template-columns: minmax(0, 1fr);
}
}
/* The brand block owns a full-width row, so give the homepage the same compact
HORIZONTAL lockup the rest of the site gets from nav-unify.css. Without this
it inherits landing-conversion.css's stacked treatment (168px logo above the
wordmark), which on a full-width row is ~110px of vertical dead space. */
html body.qf-wft .premium-footer .footer-brand {
display: flex;
flex-direction: row;
align-items: center;
gap: 16px;
}
html body.qf-wft .premium-footer .footer-brand .qf-footer-brand {
flex: 0 0 auto;
margin: 0;
}
html body.qf-wft .premium-footer .footer-brand .qf-footer-logo {
width: auto;
height: 60px;
max-width: 100%;
}
html body.qf-wft .premium-footer .qf-footer-brandtext {
display: flex;
flex-direction: column;
gap: 4px;
min-width: 0;
}
html body.qf-wft .premium-footer .footer-brand .qf-footer-tagline {
margin: 0;
max-width: 340px;
font-size: 13px;
line-height: 1.55;
}
@media (max-width: 640px) {
html body.qf-wft .premium-footer .footer-brand { gap: 12px; }
html body.qf-wft .premium-footer .footer-brand .qf-footer-logo { height: 48px; }
}
/* ═══════════════════════════════════════════════════════════════════════════
NAV POLISH — the homepage half. nav-unify.css carries the same two fixes for
every other page. The homepage loads that sheet too now (wave 3 put it on
the same injection path), but its own bundle outranks it on every
`body.qf-wft` selector, so they are restated here at `html body.qf-wft`
specificity (this sheet is injected LAST by landing-motion.js, so it wins
the cascade without !important on layout).
1. NO BUTTON WRAPS ITS OWN LABEL. The homepage broke "For Carriers &/Brokers"
across two lines at 1024–1032px — a narrower band than the directory
pages' 1024–1100px only because its action cluster is "View demo →"
rather than "Claim your listing — free →". Same flex-shrink cause, same
fix, and the same rule that nowrap may not buy itself header overflow:
the compaction below ships with it and both are measured together.
2. THE FOUR-ITEM TRUST BAR GOES 2×2, NEVER 3+1 — the homepage is where the
459–673px orphan band was measured. Full arithmetic in nav-unify.css.
═══════════════════════════════════════════════════════════════════════════ */
html body.qf-wft .site-nav .nav-dd-trigger,
html body.qf-wft .site-nav > a,
html body.qf-wft .site-actions .signin { white-space: nowrap; }
@media (min-width: 1024px) and (max-width: 1140px) {
html body.qf-wft .site-header-inner { gap: 16px; }
html body.qf-wft .site-nav { gap: 0; }
html body.qf-wft .site-nav > a,
html body.qf-wft .site-nav .nav-dd-trigger { padding-left: 8px; padding-right: 8px; font-size: 13px; }
html body.qf-wft .site-actions { gap: 8px; }
}
@media (max-width: 720px) {
html body.qf-wft .qf-footer-trustbar {
display: grid;
grid-template-columns: repeat(2, minmax(0, 1fr));
}
}
/* ── PHONE FOOTER — TWO COLUMNS (homepage copy of the shared ladder) ───────
Same arithmetic as the block at the foot of nav-unify.css: N=5 link columns,
`5 mod 2 === 1`, so the last column spans both tracks and paginates its own
links into two CSS columns. The four that remain wrap 2+2 with no remainder.
Restated here at `html body.qf-wft` specificity because the homepage bundle
outranks nav-unify.css: landing-conversion.css and landing-home-fixes.css
both declare a one-track phone footer of their own. */
@media (max-width: 640px) {
html body.qf-wft .premium-footer .premium-footer-inner {
grid-template-columns: repeat(2, minmax(0, 1fr));
column-gap: 16px;
row-gap: 24px;
}
html body.qf-wft .premium-footer .premium-footer-inner > .footer-col:last-child {
grid-column: 1 / -1;
display: block;
columns: 2;
column-gap: 16px;
}
html body.qf-wft .premium-footer .premium-footer-inner > .footer-col:last-child h4 { column-span: all; }
html body.qf-wft .premium-footer .premium-footer-inner > .footer-col:last-child a { break-inside: avoid; }
}
/* ── NARROW PHONES: THE BURGER MUST FIT ON SCREEN ──────────────────────────
MEASURED, at 320px, on the settled homepage: brand 106px ending at 122,
then `.site-actions` 233px wide — theme toggle 40, "View demo" 113, burger
40 — which puts the burger at 327-367. `.site-header-inner` is 320px and
does not wrap, so the burger hung 47px PAST the right edge and took the
document's horizontal scrollbar with it.
The header renders at that same 367px on every width, so the real boundary
is 367px rather than anything in the existing ladder: the mobile menu
button was clipped on a 360px Android and an iPhone SE alike, and the whole
page scrolled sideways underneath it. Only the homepage carries the extra
CTA, which is why /pricing, /directory and /tools/heavy-haul-quote measure
clean at the same width.
"View demo" is the one item that can go. It is a SECONDARY CTA that the
burger panel already offers twice — as "See a Live Demo" and "Start Free" —
so nothing becomes unreachable, and the ladder above already hides
`.site-oog` and `.signin` on the same principle. The cut is at 390px rather
than 367px because 375px cleared the edge by 8px, which is thinner than the
variation between a fallback font and a loaded one. */
@media (max-width: 390px) {
/* `!important` because landing-home-fixes.css declares this same button
`display: inline-flex !important`, which no amount of specificity beats.
Same reason the `.signin` rule at the top of this file carries one. */
html body.qf-wft .site-actions .btn-secondary { display: none !important; }
}
/* ═══════════════════════════════════════════════════════════════════════════
WAVE 3 — THE CHROME, ON THE DESIGN SYSTEM: the homepage half.
WHY THIS BLOCK EXISTS AT ALL. The markup is now single-sourced — the
homepage declares `` / `` and
siteChrome.ts fills them, exactly like every other static page, and it loads
nav-unify.css for the first time. The CSS is NOT single-sourced yet: seven
homepage sheets (landing-conversion, landing-home-fixes, landing-glass,
landing-nav-consistency, landing-footer-polish, landing-wefixtrades and its
cleanup) style `.site-header` / `.premium-footer` at `body.qf-wft` and
`body.qf-wft.landing-v2` specificity, most of it `!important`, and one of
them does `all: unset` on both elements. Unpicking that is a CSS
consolidation wave of its own; doing it inside a markup-dedup wave would
mean deleting rules from seven sheets whose literals four VALUE tests pin.
So the homepage gets the same RESULT stated at the homepage bundle's own
specificity — and, critically, from the SAME VALUES: every declaration below
reads the --chrome-* / --footer-* tokens defined once at the foot of
style.css, which nav-unify.css also reads. Change the header height or the
footer ground there and both surfaces move together. There is no second
number to keep in step.
The selector lists are deliberately explicit rather than clever: one entry
per specificity the sheets below us actually use, so this wins by stated
rule instead of by load-order luck. Removing a competing sheet's chrome
rules later simply makes an entry here redundant; nothing breaks.
═══════════════════════════════════════════════════════════════════════════ */
/* ── Header: 83px, flat, opaque, no border, no blur, no scroll state ─────── */
html body.qf-wft .site-header,
html body.qf-wft.landing-v2 .site-header,
html[data-theme="light"] body.qf-wft.landing-v2 .site-header,
html:not([data-theme="light"]) body.qf-wft.landing-v2 .site-header {
display: block !important;
position: sticky !important;
top: 0 !important;
z-index: 70 !important;
padding: 0 !important;
background: var(--chrome-bg) !important;
border: 0 !important;
border-bottom: 0 !important;
box-shadow: none !important;
backdrop-filter: none !important;
transition: none !important;
}
html body.qf-wft .site-header-inner,
html body.qf-wft.landing-v2 .site-header-inner,
html[data-theme="light"] body.qf-wft.landing-v2 .site-header-inner,
html:not([data-theme="light"]) body.qf-wft.landing-v2 .site-header-inner {
display: flex !important;
align-items: center !important;
max-width: var(--container-max) !important;
margin: 0 auto !important;
min-height: var(--chrome-h) !important;
padding: 0 var(--container-gutter) !important;
gap: var(--space-3) !important;
justify-content: flex-start !important;
background: transparent !important;
border: 0 !important;
border-radius: 0 !important;
box-shadow: none !important;
backdrop-filter: none !important;
}
html body.qf-wft .site-brand { color: var(--chrome-ink) !important; }
@media (max-width: 1023px) {
html body.qf-wft .site-header-inner,
html body.qf-wft.landing-v2 .site-header-inner,
html[data-theme="light"] body.qf-wft.landing-v2 .site-header-inner,
html:not([data-theme="light"]) body.qf-wft.landing-v2 .site-header-inner {
min-height: var(--chrome-h-compact) !important;
padding: 0 var(--space-2) !important;
gap: var(--space-1-5) !important;
justify-content: space-between !important;
}
html body.qf-wft .site-actions { margin-left: auto !important; }
html[data-theme="light"] body.qf-wft .site-burger { color: var(--chrome-ink) !important; }
}
@media (min-width: 641px) and (max-width: 1023px) {
html body.qf-wft .site-header-inner,
html body.qf-wft.landing-v2 .site-header-inner {
padding: 0 var(--container-gutter) !important;
}
}
/* ── Mega-menu panel: 12px shell, 4px padding, 8px cards, gap dividers ──── */
html body.qf-wft .nav-dd-panel,
html[data-theme="light"] body.qf-wft .nav-dd-panel,
html:not([data-theme="light"]) body.qf-wft .nav-dd-panel {
padding: var(--chrome-panel-pad) !important;
gap: var(--chrome-panel-pad) !important;
background: var(--chrome-panel-bg) !important;
border: 0 !important;
border-radius: var(--chrome-panel-radius) !important;
box-shadow: var(--qf-shadow-md) !important;
backdrop-filter: none !important;
}
html body.qf-wft .nav-dd-group {
padding: var(--space-1-5) !important;
background: var(--chrome-card-bg) !important;
border-radius: var(--chrome-card-radius) !important;
gap: 0 !important;
}
html body.qf-wft .nav-dd-head { padding: 0 var(--space-1) !important; margin: 0 0 var(--space-1) !important; }
html body.qf-wft .nav-dd-panel a { padding: var(--space-1) !important; border-radius: var(--radius-sm) !important; }
html body.qf-wft .nav-dd-panel a:hover,
html body.qf-wft .nav-dd-panel a:focus-visible { color: var(--accent) !important; background: var(--chrome-panel-bg) !important; }
/* ── Mobile drawer ──────────────────────────────────────────────────────── */
@media (max-width: 1023px) {
html body.qf-wft .site-mobile-menu:not([hidden]),
html[data-theme="light"] body.qf-wft .site-mobile-menu:not([hidden]) {
gap: var(--chrome-panel-pad) !important;
padding: var(--chrome-panel-pad) !important;
margin: var(--space-1) var(--space-2) var(--space-2) !important;
background: var(--chrome-panel-bg) !important;
border: 0 !important;
border-radius: var(--chrome-panel-radius) !important;
box-shadow: var(--qf-shadow-md) !important;
}
html body.qf-wft .site-mobile-menu .mm-group {
border-top: 0 !important;
background: var(--chrome-card-bg) !important;
border-radius: var(--chrome-card-radius) !important;
padding: var(--space-1) 0 !important;
}
html body.qf-wft .site-mobile-menu .mm-flat,
html body.qf-wft .site-mobile-menu .mm-account {
border-top: 0 !important;
margin-top: 0 !important;
padding-top: var(--space-1-5) !important;
background: var(--chrome-card-bg) !important;
border-radius: var(--chrome-card-radius) !important;
}
}
/* -- Footer: the dark band, as the same TOKEN ISLAND ---------------------
Identical device to nav-unify.css: re-point --ink / --ink-soft / --muted /
--border / --accent ON the footer element so the whole subtree recolours,
including the homepage skin's var(--muted) !important rules, which no
per-element override here could outrank, and the payment trust list, which
this sheet must not open a rule block for. */
html body.qf-wft .premium-footer,
html body.qf-wft.landing-v2 .premium-footer,
html[data-theme="light"] body.qf-wft .premium-footer {
--ink: var(--footer-ink);
--ink-soft: var(--footer-link);
--muted: var(--footer-quiet);
--border: var(--footer-rule);
--border-strong: var(--footer-rule);
--accent: var(--footer-accent);
display: block !important;
background: var(--footer-bg) !important;
border-top: 0 !important;
color: var(--footer-ink) !important;
}
html body.qf-wft .premium-footer .premium-footer-inner { max-width: var(--container-max) !important; }
html body.qf-wft .premium-footer .qf-footer-wordmark { color: var(--footer-ink) !important; }
html body.qf-wft .premium-footer .footer-brand .qf-footer-tagline { color: var(--footer-link) !important; }
html body.qf-wft .premium-footer .footer-col h4 { color: var(--footer-ink) !important; }
html body.qf-wft .premium-footer .footer-col a { color: var(--footer-link) !important; }
html body.qf-wft .premium-footer .footer-col a:hover,
html body.qf-wft .premium-footer .footer-col a:focus-visible { color: var(--footer-accent) !important; }
html body.qf-wft .premium-footer .qf-footer-trustbar {
max-width: var(--container-max) !important;
border-top: 1px solid var(--footer-rule) !important;
}
html body.qf-wft .premium-footer .qf-footer-trustbar li { color: var(--footer-link) !important; }
html body.qf-wft .premium-footer .footer-bottom {
max-width: var(--container-max) !important;
border-top: 1px solid var(--footer-rule) !important;
color: var(--footer-quiet) !important;
}
html body.qf-wft .premium-footer .footer-bottom .qf-foot-operator,
html body.qf-wft .premium-footer .footer-bottom strong,
html body.qf-wft .premium-footer .footer-bottom span { color: var(--footer-quiet) !important; }
html body.qf-wft .premium-footer .footer-bottom .qf-foot-oog { color: var(--footer-link) !important; }
html body.qf-wft .premium-footer .footer-bottom .qf-foot-oog:hover,
html body.qf-wft .premium-footer .footer-bottom .qf-foot-oog:focus-visible { color: var(--footer-accent) !important; }
html body.qf-wft .premium-footer .qf-footer-payrow { border-top: 1px solid var(--footer-rule) !important; }
html body.qf-wft .premium-footer .qf-paymark,
html body.qf-wft .premium-footer .qf-pm { color: var(--footer-ink) !important; fill: currentColor !important; }
/* ── The footer track ladder, keyed on the count the markup declares ─────
qf-footer-ladder: columns=5 wide=5 mid=3 phone=1 span-last=no
Derived by footerTrackLadder(FOOTER_COLUMNS.length) in siteChrome.ts and
re-checked against this sentinel by siteChromeSingleSource.test.ts. Same
arithmetic, same numbers, same `data-cols` key as nav-unify.css — stated
here at homepage specificity because landing-conversion.css and
landing-home-fixes.css both declare a phone footer of their own. */
html body.qf-wft .premium-footer .premium-footer-inner[data-cols="5"] {
grid-template-columns: repeat(5, minmax(0, 1fr)) !important;
}
@media (max-width: 1100px) {
html body.qf-wft .premium-footer .premium-footer-inner[data-cols="5"] {
grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
}
}
@media (max-width: 640px) {
html body.qf-wft .premium-footer .premium-footer-inner[data-cols="5"] {
grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
column-gap: 16px !important;
row-gap: 24px !important;
}
html body.qf-wft .premium-footer .premium-footer-inner[data-cols-odd] > .footer-col:last-child {
grid-column: 1 / -1 !important;
display: block !important;
columns: 2 !important;
column-gap: 16px !important;
}
}
/* ═══════════════════════════════════════════════════════════════════════════
WAVE 4 — FLYOUT ELEVATION (homepage copy).
The reasoning, the measurements and the interaction contract are written out
once at the foot of nav-unify.css; this is the same rule restated at the
`html body.qf-wft` specificity the homepage needs, because landing.html does
not load nav-unify.css and its own bundle (landing-footer-polish.css paints
this panel `rgb(20,24,30)`, landing-glass.css paints it at 0.98 alpha) would
otherwise out-cascade it. In one line: the fill was already opaque and the
pixel diff proves it — what the flyout lacked was an EDGE, so it takes the
largest of the three shadow tokens and a 1px --border-strong hairline (the
measurements behind that choice are in nav-unify.css), and the drawer gets
the z-index it never had.
--qf-shadow-lift is named directly, not via --shadow-lg, because the dark
theme re-points --shadow-lg at --qf-shadow-md; the lavender tint is the halo
that reads as elevation on a dark ground, where 4% black reads as nothing.
═══════════════════════════════════════════════════════════════════════════ */
html body.qf-wft .nav-dd-panel,
html[data-theme="light"] body.qf-wft .nav-dd-panel,
html:not([data-theme="light"]) body.qf-wft .nav-dd-panel,
html body.qf-wft .site-mobile-menu:not([hidden]),
html[data-theme="light"] body.qf-wft .site-mobile-menu:not([hidden]),
html:not([data-theme="light"]) body.qf-wft .site-mobile-menu:not([hidden]) {
background-color: var(--chrome-panel-bg) !important;
background-image: none !important;
opacity: 1 !important;
border: 1px solid var(--border-strong) !important;
box-shadow: var(--qf-shadow-lift) !important;
backdrop-filter: none !important;
-webkit-backdrop-filter: none !important;
z-index: 80 !important;
}
/* Open motion — `.2s ease`, as a keyframe because the panel is revealed by
toggling `hidden` and `display` is not animatable. Opacity reaches 1 at 40%
of the 200ms so the settle is fully opaque: a see-through open would be the
reported bug in miniature. */
@keyframes qf-flyout-in {
from { opacity: 0; transform: translateY(-4px); }
40% { opacity: 1; }
to { opacity: 1; transform: translateY(0); }
}
html body.qf-wft .nav-dd-panel:not([hidden]),
html body.qf-wft .site-mobile-menu:not([hidden]) {
animation: qf-flyout-in .2s ease !important;
}
@media (prefers-reduced-motion: reduce) {
html body.qf-wft .nav-dd-panel:not([hidden]),
html body.qf-wft .site-mobile-menu:not([hidden]) { animation: none !important; }
}
/* The chat launcher stands down while the drawer is open — same stacking fix,
same reasoning as the block of that name at the foot of nav-unify.css. */
html body:has(#site-burger[aria-expanded="true"]) .qf-mc-fab { display: none !important; }
/* ═══════════════════════════════════════════════════════════════════════════
FOOTER COLUMN HEADINGS — NO ORPHANED WORD
---------------------------------------------------------------------------
Appended at EOF: both CI guards key their baselines by `file:line`
(docs/design-refactor/baseline-protocol.md r1), so a new rule goes at the
foot of the sheet rather than mid-file where it would renumber every entry
below it.
The house rule is that a wrap must never strand a single item alone on its
own line (DESIGN-SYSTEM.md §8 — the same arithmetic that sets the footer's
own 5 → 3 → 2 track ladder, and the same rule `.dirfoot-legal` and
`.qf-partner-title` already answer with `text-wrap: balance`).
The five `.footer-col h4` labels were breaking it. Measured on the rendered
homepage, at BOTH 320 and 375: "For Carriers & Brokers" split
["For Carriers &" 112.5px | "Brokers" 56.3px] — one word by itself. The four
others ("For Shippers", "Free Tools", "Company", "Legal") each fit their
track on one line and are untouched by this, which is exactly why the
declaration goes on the SELECTOR rather than on the single heading that
wraps today: add a longer label to FOOTER_COLUMNS and it inherits the fix.
`text-wrap: balance` and nothing else — no width cap, no ` that now wraps them.
KEYED ON [data-cols-odd] AND !important, because that is exactly what the
rule it has to beat carries (nav-ia.css:547 declares
`columns: 2 !important` at (0,6,2) — this sheet's whole homepage-override
layer is !important, since four earlier sheets style this footer).
Measured with the weaker forms: LEGAL kept `column-count: 2`, so its ONE
collapsed summary was balanced into the SECOND of two CSS columns and
rendered half-width in the right half of a full-bleed row — which reads
as exactly the orphaned column the ladder exists to prevent. */
html body.qf-wft .premium-footer .premium-footer-inner[data-cols-odd] > .footer-col:last-child { columns: auto !important; }
html body.qf-wft .premium-footer .premium-footer-inner[data-cols-odd] > .footer-col:last-child .qf-fdisc-body {
columns: 2;
column-gap: var(--space-2);
}
html body.qf-wft .premium-footer .premium-footer-inner[data-cols-odd] > .footer-col:last-child a { break-inside: avoid; }
}
/* ═══ WAVE 5b — the homepage's copy of the stacked, launcher-clearing footer.
Same two changes as the block at the foot of nav-unify.css, restated at
`html body.qf-wft` + !important because that is what the rules they replace
carry (nav-ia.css:541 declares the two-track phone grid !important, since
landing-conversion.css and landing-home-fixes.css each ship a phone footer
of their own). Numbers are the shared ones, not homepage taste. ═══ */
@media (max-width: 640px) {
html body.qf-wft .premium-footer .premium-footer-inner[data-cols="5"] {
grid-template-columns: repeat(1, minmax(0, 1fr)) !important;
row-gap: var(--space-0-5) !important;
}
/* Same correction as nav-unify.css: the attribute-free `columns: 2` rule at
nav-ia.css:306 still matches now that [data-cols-odd] is gone, and it
pushed LEGAL's collapsed summary into a second CSS column. */
html body.qf-wft .premium-footer .premium-footer-inner > .footer-col:last-child {
columns: auto !important;
}
html body.qf-wft .premium-footer .footer-brand { margin-bottom: var(--space-1); }
}
@media (max-width: 900px) {
/* !important because landing-home-fixes.css:517 reaches this element as
`body.qf-wft.landing-v2 .premium-footer` — (0,3,1), which outranks this
sheet's `html body.qf-wft .premium-footer` at (0,2,2). Measured without
it: 54px of top padding on the homepage footer where 24 was declared. */
html body.qf-wft .premium-footer {
padding-top: var(--space-3) !important;
/* 80 -> 24 with the rest of the launcher clearance: the button is a 56px
corner, so it is cleared by the two horizontal gutters at the foot of
nav-unify.css, not by a full-width band of air. Arithmetic and the
96-combination re-measurement are in that block. */
padding-bottom: calc(24px + env(safe-area-inset-bottom, 0px)) !important;
}
}
/* ── Wave 5c: THE HOMEPAGE BUNDLE'S COPY OF THE MARKS-NOTE TONE ─────────────
Same result as `.premium-footer .qf-foot-marks .qf-foot-marks-line a` in
style.css, restated at the specificity this bundle requires — the standing
pattern for footer chrome here, and the reason this sheet exists.
THE NUMBER IT HAS TO CLEAR, read off the live page with
CSS.getMatchedStylesForNode rather than inferred: landing-wefixtrades-cleanup
.css:1241 paints EVERY light-theme link on the homepage with
html[data-theme="light"] body.qf-wft a:not(.btn):not(.nav-link):not(.signin):not(.demo-link)
{ color: var(--accent) !important }
at (0,6,3). style.css reaches the mailto at (0,3,1), so in DARK it wins and
in LIGHT it lost — the removal address rendered brand blue against a
--footer-quiet sentence, which is the same "reads as bold" problem the round
was asked to fix, just in a different colour.
The selector below is that blanket rule with this one element carved out of
it, which is why it carries the same :not() chain: (0,8,3) states the
exception without changing what the blanket does everywhere else. The link
keeps its underline, so removing the colour cue does not cost the affordance.
Measured on the footer ground: 7.17:1, over the 4.5 floor. */
html[data-theme="light"] body.qf-wft .premium-footer .qf-foot-marks a:not(.btn):not(.nav-link):not(.signin):not(.demo-link) {
color: var(--footer-quiet) !important;
font-weight: 400 !important;
text-decoration: underline !important;
text-decoration-color: currentColor !important;
}