/* Self-hosted faces for the homepage's mockup design - spec §1.3, and the
* policy layout.js states in its own header:
*
* "NO THIRD-PARTY FONT FETCH by default ... §1.3 recommends self-hosting
* woff2 - it removes a render-blocking third-party round trip from every
* page, and removes a dependency on Google from a site whose entire value
* is organic search. The woff2 files are not in the repo yet, so this emits
* NO font link at all rather than silently reintroducing the Google
* request. Pass `fontHref` once the files land."
*
* THIS IS WHY THE HOMEPAGE SHIPPED IN THE WRONG TYPEFACE. home.css asks for
* "Barlow Condensed" and Inter; nothing defined them. The preview only looked
* right because its hand-written carried a fonts.googleapis.com link,
* and renderHead - correctly, per the policy above - emits none. Measured on
* production: 0 font faces loaded, 0 font links, so both families fell back
* (the H1 to Impact, the body to system-ui) and the H1 wrapped to two lines
* where the mockup fits one.
*
* The fix is the one the policy asks for: the files landed. Same pattern as
* fonts.css, which covers Barlow / Oswald / IBM Plex Mono for the other pages.
*
* LATIN SUBSET ONLY, matching fonts.css: the Google CSS serves 37 faces across
* seven subsets and 7 of them are latin. The copy is English and the data is
* US place names.
*
* INTER IS ONE VARIABLE FILE. Google serves 400, 500, 600 and 700 from the
* SAME woff2 - so it is declared once over the 400-700 range rather than as
* four @font-face rules pointing at one download.
*
* font-display: swap on every face, so text paints in a fallback immediately
* rather than blocking on the download.
*
* Licences permit self-hosting: Barlow Condensed and Inter are both OFL. */
@font-face{font-family:'Barlow Condensed';font-style:normal;font-weight:600;font-display:swap;src:url('/assets/fonts/barlow-condensed-600.woff2') format('woff2')}
@font-face{font-family:'Barlow Condensed';font-style:normal;font-weight:700;font-display:swap;src:url('/assets/fonts/barlow-condensed-700.woff2') format('woff2')}
@font-face{font-family:'Barlow Condensed';font-style:normal;font-weight:800;font-display:swap;src:url('/assets/fonts/barlow-condensed-800.woff2') format('woff2')}
@font-face{font-family:'Inter';font-style:normal;font-weight:400 700;font-display:swap;src:url('/assets/fonts/inter-400-700.woff2') format('woff2')}
/*
* home.css - the homepage's stylesheet, in the approved mockup design.
*
* ===== PROVENANCE =====
*
* Everything above the "PREVIEW LAYER" banner is docs/biguglytruck-mockup.tar.gz's
* styles.css, BYTE FOR BYTE. Nothing in it is retyped or reformatted; only this
* header is added. Everything below that banner is the layer RONNIE approved on
* top of it, and every rule there carries its own reason.
*
* ===== WHY THIS IS NOT site.css =====
*
* site.css is linked by the homepage AND by roughly 64 other pages - about-us,
* faq, sell-my-fleet, contact, the seven tool pages, the posts, the 51 state
* hubs, /thank-you/ and the /where-we-buy/ index. Those pages carry COMPOSED
* SHELL markup (.sheet .hd .band .blk .body-col .quote-card), not the mockup's
* (.wrap .topbar .hero-grid .field .seller-card).
*
* Measured before splitting the sheet: of the 66 distinct classes those pages
* use, this stylesheet styles 9 - thirteen per cent. Making it "the site sheet"
* today would leave 57 classes unstyled on every non-city page except the one
* that has been rewritten, which is the wall-of-unstyled-text failure the
* composed.css switch was careful to avoid.
*
* So the homepage links this and the others keep site.css. When those pages are
* rewritten into mockup markup too, this becomes the site sheet and site.css
* retires - that is a deliberate, separate piece of work, not a side effect of
* shipping the homepage.
*
* The 21,387 composed city pages are unaffected either way: they link
* composed.css and always have.
*/
/* Sticky nav safety */
html { overflow-x: hidden; }
body { overflow-x: hidden; }
:root {
--ink: #0f1216;
--ink-2: #1a1f27;
--steel: #2a3340;
--muted: #8b95a5;
--paper: #f4f1ea;
--white: #ffffff;
--amber: #f0a202;
--amber-deep: #d98900;
--line: rgba(255,255,255,.12);
--ok: #3ecf8e;
--shadow: 0 18px 50px rgba(0,0,0,.35);
--radius: 14px;
--max: 1280px;
}
* { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; }
body {
font-family: Inter, system-ui, sans-serif;
color: var(--ink);
background: var(--paper);
line-height: 1.5;
-webkit-font-smoothing: antialiased;
}
a { color: inherit; text-decoration: none; }
img { max-width: 100%; display: block; }
ul { list-style: none; }
.wrap { width: min(100% - 2rem, var(--max)); margin-inline: auto; }
.display {
font-family: "Barlow Condensed", Impact, sans-serif;
letter-spacing: .02em;
text-transform: uppercase;
line-height: .95;
}
.btn {
display: inline-flex; align-items: center; justify-content: center; gap: .5rem;
border: 0; border-radius: 999px; padding: .9rem 1.35rem;
font-weight: 700; font-size: .95rem; cursor: pointer;
transition: transform .15s ease, background .15s ease, box-shadow .15s ease;
}
.btn:focus-visible { outline: 3px solid #fff; outline-offset: 3px; }
.btn-primary {
background: var(--amber); color: var(--ink);
box-shadow: 0 8px 24px rgba(240,162,2,.35);
}
.btn-primary:hover { background: var(--amber-deep); transform: translateY(-1px); }
.btn-ghost {
background: transparent; color: var(--white);
border: 1px solid var(--line);
}
.btn-ghost:hover { background: rgba(255,255,255,.06); }
.btn-dark {
background: var(--ink); color: var(--white);
}
.btn-dark:hover { background: #000; }
.btn-outline {
background: transparent; color: var(--ink);
border: 1px solid #cfc8b8;
}
.btn-outline:hover { background: #ebe6db; }
/* Top bar */
.topbar {
background: rgba(15, 18, 22, 0.97);
color: var(--white);
border-bottom: 1px solid var(--line);
position: sticky;
top: 0;
z-index: 50;
backdrop-filter: blur(10px);
-webkit-backdrop-filter: blur(10px);
box-shadow: 0 10px 28px rgba(0, 0, 0, 0.28);
}
.topbar-inner {
display: flex; align-items: center; justify-content: space-between;
gap: 1rem; padding: .85rem 0;
}
.brand {
display: flex; align-items: center; gap: .7rem; min-width: 0;
}
.brand-mark {
width: 38px; height: 38px; border-radius: 10px;
background: linear-gradient(145deg, var(--amber), #ff6b1a);
display: grid; place-items: center;
font-family: "Barlow Condensed", sans-serif;
font-weight: 800; font-size: 1.15rem; color: var(--ink);
flex-shrink: 0;
}
.brand strong {
font-family: "Barlow Condensed", sans-serif;
font-size: 1.35rem; letter-spacing: .04em; text-transform: uppercase;
display: block;
}
.brand span { color: var(--muted); font-size: .75rem; display: block; margin-top: -2px; }
.nav-actions { display: flex; align-items: center; gap: .65rem; flex-wrap: wrap; justify-content: flex-end; flex-shrink: 0; }
.nav-bar {
border-top: 1px solid var(--line);
background: rgba(10, 12, 16, 0.97);
}
.nav-bar .wrap {
padding: .45rem 0 .55rem;
}
.site-nav {
display: flex;
align-items: center;
justify-content: flex-start;
gap: .35rem .85rem;
flex-wrap: wrap;
}
.topbar-inner { position: relative; }
.nav-panel { position: relative; }
.nav-menu-btn {
display: none;
list-style: none;
cursor: pointer;
color: #e8edf5;
font-weight: 700;
font-size: .88rem;
padding: .45rem .85rem;
border: 1px solid var(--line);
border-radius: 999px;
background: rgba(255,255,255,.05);
user-select: none;
}
.nav-menu-btn::-webkit-details-marker { display: none; }
.nav-menu-btn::marker { content: ""; }
.nav-menu-btn:hover { border-color: rgba(240,162,2,.5); color: var(--amber); }
.site-nav {
display: flex; align-items: center; gap: .1rem .55rem; flex-wrap: wrap;
}
.site-nav > a,
.site-nav .nav-dropdown > summary {
color: #c9d1dc; font-size: .78rem; font-weight: 600;
padding: .25rem 0;
white-space: nowrap;
}
.site-nav > a:hover,
.site-nav > a[aria-current="page"],
.site-nav .nav-dropdown[open] > summary,
.site-nav .nav-dropdown > summary:hover { color: var(--amber); }
.nav-dropdown {
position: relative;
}
.nav-dropdown > summary {
list-style: none;
cursor: pointer;
display: inline-flex;
align-items: center;
gap: .3rem;
user-select: none;
}
.nav-dropdown > summary::-webkit-details-marker { display: none; }
.nav-dropdown > summary::marker { content: ""; }
.nav-dropdown > summary::after {
content: "";
width: 0; height: 0;
border-left: 4px solid transparent;
border-right: 4px solid transparent;
border-top: 5px solid currentColor;
opacity: .75;
}
.nav-dropdown-menu {
display: none;
position: absolute;
top: calc(100% + .45rem);
left: 50%;
transform: translateX(-50%);
width: min(36rem, calc(100vw - 2rem));
min-width: 22rem;
background: #151a22;
border: 1px solid var(--line);
border-radius: 14px;
padding: .55rem;
box-shadow: 0 16px 40px rgba(0,0,0,.45);
z-index: 80;
}
.nav-dropdown[open] > .nav-dropdown-menu,
.nav-dropdown:hover > .nav-dropdown-menu,
.nav-dropdown:focus-within > .nav-dropdown-menu {
display: grid;
grid-template-columns: 1fr 1fr;
gap: .15rem .45rem;
}
.nav-dropdown-menu a {
color: #c9d1dc;
font-size: .82rem;
font-weight: 600;
padding: .55rem .7rem;
border-radius: 8px;
white-space: normal;
}
.nav-dropdown-menu a:hover { background: rgba(240,162,2,.12); color: var(--amber); }
.phone {
font-weight: 700; font-size: .95rem; white-space: nowrap;
color: var(--amber);
}
.phone:hover { text-decoration: underline; }
@media (min-width: 981px) {
.nav-menu-btn { display: none !important; }
.nav-panel > .site-nav { display: flex !important; }
}
@media (max-width: 980px) {
.nav-menu-btn { display: inline-flex; align-items: center; gap: .35rem; }
/* nav always visible in nav-bar */
.nav-panel[open] > .site-nav {
display: grid;
grid-template-columns: 1fr 1fr;
align-items: start;
gap: .15rem .75rem;
position: absolute;
top: calc(100% + .35rem);
left: 50%;
right: auto;
transform: translateX(-50%);
width: min(40rem, calc(100vw - 1rem));
background: #12161d;
border: 1px solid var(--line);
border-radius: 14px;
padding: .85rem 1rem 1.1rem;
box-shadow: 0 18px 40px rgba(0,0,0,.45);
z-index: 70;
max-height: none;
overflow: visible;
}
.nav-panel[open] > .site-nav > .nav-dropdown {
grid-column: 1 / -1;
}
.nav-panel[open] > .site-nav > a,
.nav-panel[open] > .site-nav .nav-dropdown > summary {
font-size: .92rem;
padding: .55rem .35rem;
border-bottom: 1px solid rgba(255,255,255,.06);
}
.nav-dropdown-menu {
position: static;
left: auto;
transform: none;
width: 100%;
min-width: 0;
box-shadow: none;
border: 0;
background: transparent;
padding: .15rem 0 .35rem 0;
}
.nav-dropdown[open] > .nav-dropdown-menu {
display: grid;
grid-template-columns: 1fr 1fr;
gap: .1rem .5rem;
}
/* On mobile, rely on tap/open — disable hover-open flash */
.nav-dropdown:not([open]):hover > .nav-dropdown-menu {
display: none;
}
}
a.pill {
transition: border-color .15s ease, color .15s ease, background .15s ease;
}
a.pill:hover {
border-color: rgba(240,162,2,.55);
color: var(--amber-deep);
background: #fff8e8;
}
/* Hero */
/* THE HERO IS A LIGHT SECTION (owner's ruling, 2026-09-12).
*
* It used to be the only dark block on the page: every other section is either
* the page ground (--paper, plain `section`) or .bg-tint's #ebe6db. It now
* takes --paper, the same token the plain sections inherit from body, so the
* page reads as one surface from the header down to the footer.
*
* The header bar is NOT affected - .topbar and .nav-bar carry their own dark
* backgrounds and are unchanged.
*
* Everything the hero paints on top of that ground had to move with it, or it
* would be white-on-paper: the eyebrow, tagline, lede, proof row, the check
* glyph, the silhouette, and the quote card's shadow. Each one below takes an
* EXISTING light-section value rather than a newly invented colour - the
* source of each is named in place.
*/
.hero {
background: var(--paper);
color: var(--ink);
padding: 3.25rem 0 4rem;
position: relative;
overflow: hidden;
}
.hero::after {
content: "";
position: absolute; inset: auto -10% -40% 40%;
height: 70%;
/* The truck silhouette was white at 4% - invisible on --paper. Same shape,
* inked instead: --ink (#0f1216) at 5%, which lands at a comparable weight
* against the light ground. */
background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 800 240'%3E%3Cpath fill='%230f1216' fill-opacity='0.05' d='M20 160h90l20-40h80l30-50h70l25 50h90l18 40h140v30H20z'/%3E%3C/svg%3E") no-repeat right bottom;
background-size: min(720px, 90vw);
pointer-events: none;
}
.hero-grid {
display: grid; gap: 2.25rem;
grid-template-columns: 1.15fr .85fr;
align-items: start;
position: relative; z-index: 1;
}
@media (max-width: 900px) {
.hero-grid { grid-template-columns: 1fr; }
}
.eyebrow {
display: inline-flex; align-items: center; gap: .5rem;
/* --amber (#f0a202) is the ON-DARK amber. On a light ground the sheet's own
* light-context amber is --amber-deep (#d98900) - what .section-kicker uses
* on every plain section. The fill and border keep their amber tint and are
* nudged up so the pill still reads as a pill against --paper. */
background: rgba(240,162,2,.14); color: var(--amber-deep);
border: 1px solid rgba(240,162,2,.45);
border-radius: 999px; padding: .35rem .75rem;
font-size: .78rem; font-weight: 700; letter-spacing: .04em;
text-transform: uppercase; margin-bottom: 1rem;
}
.hero h1 {
font-size: clamp(2.6rem, 6vw, 4.4rem);
max-width: 11ch;
margin-bottom: .85rem;
}
/* THE HEADLINE ROW - the H1, and the truck in the space beside it.
*
* HEIGHT. The brief is "no more than the H1 block's rendered height, aspect
* preserved". align-items:stretch makes the figure exactly the row's height,
* and the row's height is the H1's, so the figure tracks the heading through
* every wrap - one line at 700px, three at 1280 - with no magic number to keep
* in sync. aspect-ratio then derives the WIDTH from that height, which is what
* keeps the aspect honest: nothing here sets both dimensions.
*
* The H1 keeps its own margin-bottom; the row carries it instead, so the photo
* is measured against the heading alone and not against the heading plus its
* trailing space.
*
* NO CROPPING, EVER. min-width:0 and flex-shrink let the figure narrow when
* the copy column is tight rather than push the row wide, and object-fit:
* contain means a narrowed box letterboxes the truck instead of cutting it.
* cover is the rule that would crop, and it is deliberately not used.
*/
.hero-headline {
display: flex;
align-items: stretch;
gap: clamp(.9rem, 2vw, 2rem);
margin-bottom: .85rem;
}
.hero-headline h1 { margin-bottom: 0; flex: 0 1 auto; }
.hero-truck {
margin: 0;
flex: 1 1 auto;
min-width: 0;
align-self: stretch;
display: flex;
align-items: flex-end; /* the truck sits on the headline's baseline */
justify-content: flex-start; /* immediately to the right of the H1 */
}
/* THE IMAGE SIZES ITSELF, NOT ITS BOX.
*
* width/height auto with BOTH maxes at 100% is what makes the two rules hold at
* once: the browser scales the intrinsic 1016x647 down until it fits the
* narrower of the two constraints, and preserves the ratio while doing it. So
* the height is capped by the H1 and the width by whatever the copy column has
* left, whichever binds first.
*
* An aspect-ratio box was tried first and is wrong here: when the column got
* tight the box shrank below the artwork's ratio, object-fit:contain
* letterboxed inside it, and the truck rendered SMALLER than its own box with
* dead space beside it - measured at 901, 1024 and 1280 (box ratios 1.24, 1.27,
* 1.53 against the artwork's 1.5703). Sizing the image itself leaves no box to
* diverge from.
*/
.hero-truck img {
width: auto;
height: auto;
max-width: 100%;
max-height: 100%;
}
/* THE ROLL-IN. One gentle glide from the left as the page paints, and then it
* is still - no loop, no hover, nothing that keeps moving while someone is
* trying to read the headline next to it.
*
* TRANSFORM ONLY, NO OPACITY. If the animation never runs - an old engine, a
* blocked stylesheet, a reduced-motion setting - the truck is still there at
* full strength. An opacity fade would leave it invisible in exactly those
* cases, which is the failure mode worth designing out.
*
* .hero is overflow:hidden, so the off-screen start of the glide cannot widen
* the page.
*/
@keyframes hero-truck-roll-in {
from { transform: translateX(-16%); }
to { transform: translateX(0); }
}
.hero-truck img {
animation: hero-truck-roll-in 1100ms cubic-bezier(.22, .61, .36, 1) 1 both;
}
@media (prefers-reduced-motion: reduce) {
.hero-truck img { animation: none; transform: none; }
}
.hero-lead {
/* #c9d1dc was body text for a dark hero. #4b5563 is .section-lead's colour,
* the sheet's established body grey on a light section. */
font-size: 1.08rem; color: #4b5563; max-width: 36rem;
margin-bottom: 1.25rem;
}
.tagline {
font-family: "Barlow Condensed", sans-serif;
/* --amber-deep for the same reason as .eyebrow: the light-context amber. */
font-size: 1.35rem; color: var(--amber-deep); letter-spacing: .03em;
text-transform: uppercase; margin-bottom: 1.5rem;
}
.proof-row {
display: flex; flex-wrap: wrap; gap: .75rem 1.25rem;
/* #5b6573 is the card-paragraph grey used by .seller-card p and friends. */
color: #5b6573; font-size: .9rem; font-weight: 600;
}
.proof-row strong { color: var(--ink); }
/* --ok (#3ecf8e) is a mid green tuned for a dark ground and goes weak on
* --paper. #0f5132 is the sheet's own on-light green, from .toast. */
.check { color: #0f5132; margin-right: .35rem; }
/* Page hero (inner pages) */
.page-hero {
background:
radial-gradient(800px 400px at 85% -20%, rgba(240,162,2,.18), transparent 55%),
linear-gradient(160deg, #0d1015 0%, #1a2230 60%, #12161d 100%);
color: var(--white);
padding: 2.75rem 0 2.5rem;
}
.page-hero h1 {
font-size: clamp(2.2rem, 5vw, 3.4rem);
max-width: 18ch;
margin-bottom: .75rem;
}
.page-hero .hero-lead { margin-bottom: 0; }
/* Quote card */
.quote-card {
background: var(--white); color: var(--ink);
border-radius: calc(var(--radius) + 4px);
padding: 1.35rem 1.35rem 1.2rem;
/* --shadow is 0 18px 50px rgba(0,0,0,.35) - a lift built to separate a white
* card from a near-black hero. On --paper it reads as a grey smudge. The
* light sections separate their white cards with a 1px #e6e1d6 border
* (.type-card / .seller-card / .factor-card / .ready-card), so the border is
* taken from there. The card keeps a shadow rather than going flat like
* those - it is the page's primary CTA and the only card above the fold -
* but at an on-light weight instead of the dark-hero one. */
border: 1px solid #e6e1d6;
box-shadow: 0 10px 30px rgba(15,18,22,.07);
}
.quote-card h2 {
font-family: "Barlow Condensed", sans-serif;
text-transform: uppercase; letter-spacing: .03em;
font-size: 1.55rem; margin-bottom: .25rem;
}
.quote-card .sub {
color: #5b6573; font-size: .88rem; margin-bottom: 1rem;
}
.form-grid {
display: grid; gap: .7rem;
grid-template-columns: 1fr 1fr;
}
@media (max-width: 520px) {
.form-grid { grid-template-columns: 1fr; }
}
.field { display: flex; flex-direction: column; gap: .3rem; }
.field.full { grid-column: 1 / -1; }
label { font-size: .75rem; font-weight: 700; color: #4b5563; text-transform: uppercase; letter-spacing: .04em; }
input, select, textarea {
border: 1px solid #d5dbe5; border-radius: 10px;
padding: .75rem .8rem; font: inherit; background: #fafbfd;
}
input:focus, select:focus, textarea:focus {
outline: 2px solid rgba(240,162,2,.55); border-color: var(--amber);
background: #fff;
}
.form-note {
margin-top: .75rem; font-size: .78rem; color: #6b7280; text-align: center;
}
/* THE REFUSAL MESSAGE. layout.js's FORM_SCRIPT creates this paragraph on the
* fly -
's INNER
* HTML against the capture's, character for character - `shipped[0] ===
* capH1.trim()` over the raw match, not textContent. So a , a
* around any pair of words, or an each fails the gate. The H1's markup
* and text stay exactly "Sell your semi truck for cash", and the break comes
* from the box.
*
* WHY 5.2em, AND WHY em. font-size here is 7.5vw (clamped 1.7-2.35rem), so an
* em cap scales with it and the break is identical at every phone width; a px
* cap would hold at 390 and fail at 430.
*
* Line breaking is greedy, so a three-line break of these six words needs the
* cap to clear each LINE while refusing each three-word RUN. Measured in the
* H1's own computed style (Barlow Condensed 700, uppercase, letter-spacing
* .02em), as a multiple of font-size:
*
* lines "Sell your" 3.985em
* "semi truck" 4.427em <- cap must be >= this
* "for cash" 3.560em
* 3-word runs "Sell your semi" 5.942em <- cap must be < this
* "semi truck for" 6.072em
*
* The window is 4.427-5.942em, 1.515em wide; 5.2em sits inside it with 17.5%
* clearance to the low edge and 12.5% to the high one. At 320px - the
* narrowest width checked - that is 141px inside a 300px box, so the cap and
* not the viewport is what breaks the line.
*/
@media (max-width: 560px) {
.hero h1 { max-width: 5.2em; }
}
/* Additive mobile chrome (does not override hero-copy / form order rules) */
@media (max-width: 900px) {
.mock-banner {
font-size: .68rem;
padding: .3rem .6rem;
letter-spacing: .03em;
}
.topbar-inner { padding: .55rem 0; }
.brand span { display: none; }
.brand-mark { width: 34px; height: 34px; font-size: 1.05rem; }
.brand strong { font-size: 1.15rem; }
}
@media (max-width: 700px) {
body { padding-bottom: 4.75rem; }
}
@media (max-width: 420px) {
.wrap { width: min(100% - 1.25rem, var(--max)); }
}
/* mock-banner scrolls away; topbar sticks */
.mock-banner {
position: relative;
z-index: 40;
}
/* Major truck types display */
.type-grid.major-types {
grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
gap: 1rem;
}
@media (min-width: 901px) {
.type-grid.major-types {
grid-template-columns: repeat(4, 1fr);
}
.type-grid.major-types .type-card.primary {
grid-column: span 1;
}
}
.type-grid.major-types .type-card {
display: flex;
flex-direction: column;
min-height: 100%;
padding: 1.25rem 1.2rem 1.3rem;
transition: border-color .15s ease, box-shadow .15s ease, transform .15s ease;
}
.type-grid.major-types .type-card:hover {
border-color: rgba(240,162,2,.4);
box-shadow: 0 10px 28px rgba(15,18,22,.08);
transform: translateY(-2px);
}
.type-grid.major-types .type-card h3 {
font-family: "Barlow Condensed", sans-serif;
text-transform: uppercase;
letter-spacing: .03em;
font-size: 1.35rem;
line-height: 1.15;
margin-bottom: .5rem;
}
.type-grid.major-types .type-card.primary {
background: linear-gradient(165deg, #fffdf8 0%, #fff 55%);
border-color: rgba(240,162,2,.55);
box-shadow: 0 0 0 1px rgba(240,162,2,.18), 0 12px 30px rgba(217,137,0,.12);
}
.type-grid.major-types .type-card.primary h3 {
color: var(--ink);
}
.type-grid.major-types .type-card p {
flex: 1;
font-size: .9rem;
line-height: 1.45;
}
#what-we-buy {
scroll-margin-top: 5.5rem;
}
.type-strip {
background: linear-gradient(180deg, #151a22 0%, var(--ink-2) 100%);
border-bottom: 1px solid var(--line);
color: var(--white);
}
.type-strip-inner {
display: flex;
flex-wrap: wrap;
align-items: center;
gap: .45rem .5rem;
padding: .95rem 0;
}
.type-strip-label {
font-family: "Barlow Condensed", sans-serif;
text-transform: uppercase;
letter-spacing: .08em;
color: var(--amber);
font-size: 1.1rem;
font-weight: 700;
margin-right: .45rem;
}
.type-chip {
display: inline-flex;
align-items: center;
padding: .4rem .8rem;
border-radius: 999px;
border: 1px solid rgba(255,255,255,.14);
background: rgba(255,255,255,.05);
color: #e8edf5;
font-size: .8rem;
font-weight: 700;
letter-spacing: .01em;
transition: border-color .15s ease, color .15s ease, background .15s ease;
}
.type-chip:hover {
border-color: rgba(240,162,2,.6);
color: var(--amber);
background: rgba(240,162,2,.08);
}
.type-chip-primary {
border-color: rgba(240,162,2,.55);
background: rgba(240,162,2,.14);
color: var(--amber);
}
.type-chip-primary:hover {
background: rgba(240,162,2,.22);
color: #ffd56a;
}
@media (max-width: 560px) {
.type-strip-inner { gap: .4rem; }
.type-chip { font-size: .75rem; padding: .35rem .65rem; }
}
/* Always-visible nav row — no hamburger hide */
.nav-menu-btn { display: none !important; }
.nav-panel { display: contents; }
.nav-panel > .site-nav,
.nav-bar .site-nav {
display: flex !important;
}
@media (max-width: 980px) {
.nav-panel:not([open]) > .site-nav { display: flex !important; }
.nav-bar .site-nav {
gap: .25rem .65rem;
}
.site-nav > a,
.site-nav .nav-dropdown > summary {
font-size: .75rem;
}
.nav-dropdown-menu {
left: 0;
transform: none;
width: min(36rem, calc(100vw - 1.5rem));
}
}
/* FINAL: always-visible wrapping nav bar */
.nav-bar {
display: block !important;
visibility: visible !important;
border-top: 1px solid var(--line);
background: rgba(10, 12, 16, 0.97);
}
.nav-bar .wrap { padding: .5rem 0 .65rem; }
.nav-bar .site-nav {
display: flex !important;
flex-wrap: wrap !important;
align-items: center;
justify-content: flex-start !important;
gap: .4rem 1rem !important;
width: 100%;
overflow: visible !important;
}
.nav-bar .site-nav > a,
.nav-bar .site-nav .nav-dropdown > summary {
display: inline-flex !important;
color: #e8edf5 !important;
font-size: .86rem !important;
font-weight: 650;
padding: .35rem 0;
}
.nav-menu-btn { display: none !important; }
/* ======================= PREVIEW LAYER ======================= */
/* ==========================================================================
THE ONLY CSS ADDED TO THE MOCKUP'S SHEET.
==========================================================================
styles.css above is the mockup's, byte for byte. Everything here exists
because OUR field set has two controls the mockup's form does not:
a Comments textarea and the `website` honeypot. Both are styled from the
mockup's own .field input rules so they cannot drift from it.
Nothing here changes a font, colour, size or spacing the mockup defines.
========================================================================== */
.field textarea{
width:100%; font:inherit; font-size:.95rem; color:var(--ink);
background:var(--white); border:1px solid #d9d3c7; border-radius:10px;
padding:.7rem .8rem; min-height:5.5rem; resize:vertical;
}
.field textarea:focus{outline:2px solid var(--amber); outline-offset:1px; border-color:var(--amber);}
.hp{position:absolute; left:-9999px;}
/* Our states grid links out; the mockup's pills are inert s. Same pill. */
a.state-pill{text-decoration:none;}
/* ==========================================================================
FIT THE WHOLE QUOTE CARD IN THE FIRST SCREEN - DESKTOP ONLY
==========================================================================
RONNIE, 2026-09-11: the card must be fully visible without scrolling at
1440x900 and 1280x800. Measured before: the submit button's bottom edge sat
at 964 against an 800px viewport - 164px over.
SCOPED TO min-width:1280px. These are compaction values chosen for a short
WIDE viewport; applying them to a phone made the mobile rendering wrong,
which is what this scoping fixes. Below 1280 the mockup's own values stand.
The mockup's own answer was to scroll the card
(.quote-card-scroll{max-height:min(78vh,820px);overflow:auto}), which is why
the button was off-screen inside a scroll container. Undone here.
Where styles.css already had a compact value in its phone set, that value is
promoted rather than a new one invented - each marked (mockup's) below.
========================================================================== */
@media (min-width: 1280px){
.quote-card-scroll{max-height:none;overflow:visible}
.hero{padding:.5rem 0 1.25rem} /* bottom mockup's; top new */
.quote-card{padding:1rem .95rem .85rem} /* (mockup's) */
.quote-card h2{font-size:1.25rem} /* (mockup's) */
.quote-card .sub{margin-bottom:.5rem;font-size:.8rem} /* size mockup's; margin new */
.form-grid{gap:.55rem} /* (mockup's) */
.field input,.field select{padding:.5rem .7rem} /* (new) */
.field textarea{min-height:3rem;padding:.5rem .7rem} /* (new) */
.field{gap:.2rem} /* (new) */
.field label{font-size:.7rem;line-height:1.25} /* (new) */
.quote-card .btn-primary{padding:.62rem 1.35rem} /* (new) */
.quote-card .form-note{margin-top:.4rem} /* (new) */
}
/* ==========================================================================
THE SUBMIT BUTTON INHERITS THE PAGE FONT (RONNIE, 2026-09-11)
==========================================================================
The mockup's .btn sets no font-family, and a