/* =========================================================================== TRU AUTO SALES — DESIGN B ("motion") SITE-WIDE LAYER --------------------------------------------------------------------------- Ported from the approved design-review mockup B-motion-hero.html. Loaded LAST (after master.css, style.css and Bootstrap) so it wins the cascade without any of those files being edited. It REPLACES the older light-theme redesign.css — swap the single in resources/views/layouts/header.blade.php to move between the two. Design decisions carried over from the approved concept: 1. Pitch-black canvas, one amber/ember accent gradient for actions 2. Open Sans throughout — the typeface the live site already asks for; display/body/label roles are separated by weight and tracking 3. Motion as a first-class layer — but every animation is gated behind prefers-reduced-motion 4. Dark theme applies to EVERY public page, so PART 9 re-skins the legacy Bootstrap/master.css markup the inner pages still use. This file is public-facing only. The admin panel renders through layouts/admin_header.blade.php and never loads it. =========================================================================== */ /* ===================== PART 0 — TYPEFACE ================================= Open Sans — the face the rest of the site already asks for. master.css declares it, but its @font-face src is `url('web_assets/fonts/…')`, which resolves RELATIVE TO master.css as /web_assets/css/web_assets/fonts/… and 404s on production. The result is that truautosales.com has never actually served a webfont: every visitor without Open Sans installed locally falls back to generic sans-serif. These declarations fix that. Paths are relative to THIS file (/web_assets/css/), so ../fonts/ resolves correctly under any host or subdirectory. woff2 first (~60KB each vs ~215KB for the TTF), with the existing TTF as the fallback. font-display:swap so text paints immediately. =========================================================================== */ @font-face{ font-family:"Open Sans";font-style:normal;font-weight:400;font-display:swap; src:url("../fonts/OpenSans-Regular.woff2") format("woff2"), url("../fonts/OpenSans-Regular.ttf") format("truetype"); } @font-face{ font-family:"Open Sans";font-style:normal;font-weight:600;font-display:swap; src:url("../fonts/OpenSans-Semibold.woff2") format("woff2"), url("../fonts/OpenSans-Semibold.ttf") format("truetype"); } @font-face{ font-family:"Open Sans";font-style:normal;font-weight:700;font-display:swap; src:url("../fonts/OpenSans-Bold.woff2") format("woff2"), url("../fonts/OpenSans-Bold.ttf") format("truetype"); } @font-face{ font-family:"Open Sans";font-style:normal;font-weight:800;font-display:swap; src:url("../fonts/OpenSans-ExtraBold.woff2") format("woff2"), url("../fonts/OpenSans-ExtraBold.ttf") format("truetype"); } /* ===================== PART 1 — TOKENS ==================================== */ :root{ --pitch:#000000; --ink:#08090A; --carbon:#101114; --raise:#16181C; --edge:rgba(255,255,255,.10); --edge-hi:rgba(255,255,255,.22); --bone:#F2F0EB; --ash:#8B9099; /* The mockup's #5C6169 only reaches 3.37:1 on black — it fails WCAG AA for the 10–11px mono labels it is used on (eyebrows, stat captions, hours, breadcrumbs). Lifted to the darkest grey that still clears 4.5:1. */ --ash-dim:#7C828B; --signal:#FFB020; --signal-deep:#B87400; --g1:#FFB020; --g2:#FF6A2C; --g3:#C2410C; --grad:linear-gradient(118deg,var(--g1) 0%,var(--g2) 52%,var(--g3) 100%); --ice:#93D2FF; --danger:#FF6B6B; --ok:#4ADE80; /* One family in three roles. The mockup used Archivo + Instrument Sans + JetBrains Mono; the site's own face is Open Sans, so the roles are now separated by weight, size and tracking rather than by typeface. NB: Open Sans is not a variable-width font, so the font-stretch values kept below are inert — harmless, and they document the intent. */ --display:"Open Sans",system-ui,-apple-system,"Segoe UI",Roboto,sans-serif; --body:"Open Sans",system-ui,-apple-system,"Segoe UI",Roboto,sans-serif; --mono:"Open Sans",system-ui,-apple-system,"Segoe UI",Roboto,sans-serif; --gutter:clamp(20px,5vw,72px); --maxw:1400px; } /* ===================== PART 2 — BASE ===================================== */ *{box-sizing:border-box} html{scroll-behavior:smooth} body{ margin:0; background:var(--pitch) !important; color:var(--bone) !important; font-family:var(--body) !important; font-size:16px !important; font-weight:400 !important; line-height:1.6 !important; -webkit-font-smoothing:antialiased; overflow-x:hidden; } img{max-width:100%} a{color:inherit;text-decoration:none} a:hover{text-decoration:none} button{font:inherit;color:inherit;background:none;border:0;cursor:pointer} :focus-visible{outline:2px solid var(--signal);outline-offset:3px} hr{border-color:var(--edge) !important;opacity:1} ::selection{background:var(--signal);color:#000} .wrap{max-width:var(--maxw);margin:0 auto;padding-inline:var(--gutter)} /* ===================== PART 3 — TYPE PRIMITIVES ========================== */ h1,h2,h3,h4,h5,h6{ font-family:var(--display) !important; color:var(--bone); margin:0; line-height:.95; letter-spacing:-.02em; } p{color:var(--ash)} .eyebrow{ font-family:var(--mono);font-size:11px;letter-spacing:.22em;text-transform:uppercase; color:var(--signal);display:flex;align-items:center;gap:12px;margin:0 0 22px; } .eyebrow::before{content:"";width:26px;height:1px;background:var(--grad);flex:none} .h-sec{font-size:clamp(34px,5.2vw,68px);font-weight:800;font-stretch:118%;text-transform:uppercase} .lede{color:var(--ash);max-width:56ch;font-size:17px} .grad-text{ background:var(--grad);-webkit-background-clip:text;background-clip:text; -webkit-text-fill-color:transparent;color:var(--signal); } /* ===================== PART 4 — BUTTONS ================================== */ .btn-b{ display:inline-flex;align-items:center;gap:12px;padding:16px 26px; font-family:var(--mono);font-size:12px;letter-spacing:.16em;text-transform:uppercase;font-weight:600; border:1px solid var(--edge-hi);border-radius:2px; transition:.28s cubic-bezier(.2,.7,.3,1); position:relative;overflow:hidden;color:var(--bone); } .btn-b > span{position:relative;z-index:1} .btn-b::after{ content:"";position:absolute;inset:0;background:var(--signal); transform:translateY(101%);transition:transform .34s cubic-bezier(.2,.7,.3,1);z-index:0; } .btn-b:hover::after{transform:translateY(0)} .btn-b:hover{color:#000;border-color:var(--signal)} .btn-b--fill{background:var(--grad);color:#000;border-color:transparent} .btn-b--fill::after{background:var(--bone)} .btn-b--fill:hover{color:#000;border-color:var(--bone)} .arrow{font-family:var(--mono);transition:transform .3s} .btn-b:hover .arrow{transform:translateX(4px)} /* ===================== PART 5 — CHROME =================================== */ /* --- utility bar --- */ .utility{ border-bottom:1px solid var(--edge);background:var(--pitch); font-family:var(--mono);font-size:11px;letter-spacing:.1em;color:var(--ash-dim);text-transform:uppercase; } .utility .wrap{display:flex;justify-content:space-between;gap:24px;padding-block:10px;flex-wrap:wrap} .utility strong{color:var(--ash);font-weight:400} .utility a:hover{color:var(--bone)} .utility .dot{ display:inline-block;width:5px;height:5px;border-radius:50%;background:var(--signal);margin-right:8px; box-shadow:0 0 8px var(--signal);animation:pulse 2.6s infinite; } @keyframes pulse{50%{opacity:.35}} /* --- sticky nav --- */ header.navb{ position:sticky;top:0;z-index:60;background:rgba(0,0,0,.72);backdrop-filter:blur(14px); border-bottom:1px solid var(--edge);transition:background .3s; } /* padding trimmed 14->10px so the taller logo below doesn't push the sticky bar out proportionally: 64 + 10*2 = 84px, versus 72px before */ .navb .wrap{display:flex;align-items:center;justify-content:space-between;gap:24px;padding-block:10px} .brand{display:flex;align-items:center;gap:14px} /* logoo.png is a 2000x2000 SQUARE: circular monogram on top, "Tru Auto Sales" wordmark stacked beneath it. Both share this height, so at 44px the wordmark rendered ~6px tall and was illegible. 64px puts it near 10px. The drop-shadow lifts the mark off the translucent blurred nav behind it. */ .brand img{height:64px;width:auto;transition:height .35s; filter:drop-shadow(0 2px 6px rgba(0,0,0,.55))} .menu{ display:flex;gap:30px;font-size:14px;font-family:var(--mono); letter-spacing:.1em;text-transform:uppercase;color:var(--ash); } .menu a{position:relative;padding-block:6px;transition:color .25s} .menu a::after{content:"";position:absolute;left:0;bottom:0;height:1px;width:0;background:var(--signal);transition:width .3s} .menu a:hover{color:var(--bone)} .menu a:hover::after{width:100%} .menu a.is-active{color:var(--bone)} .menu a.is-active::after{width:100%} .nav-cta{display:flex;align-items:center;gap:14px} .call{font-family:var(--display);font-stretch:112%;font-weight:700;font-size:19px;letter-spacing:0;white-space:nowrap} .call:hover{color:var(--signal)} .burger{display:none;width:44px;height:44px;border:1px solid var(--edge);border-radius:2px;align-items:center;justify-content:center} .burger i{display:block;width:18px;height:1.5px;background:var(--bone);position:relative} .burger i::before,.burger i::after{content:"";position:absolute;left:0;width:18px;height:1.5px;background:var(--bone)} .burger i::before{top:-6px} .burger i::after{top:6px} /* scrolled state — kept proportional to the new 64px base so the wordmark stays readable once the bar condenses */ header.navb.tight .brand img{height:48px} /* --- footer --- */ footer.footb{background:var(--pitch);border-top:1px solid var(--edge);margin-top:0} .foot-grid{display:grid;grid-template-columns:1.4fr 1fr 1fr 1.2fr;gap:44px;padding-block:72px 56px} .foot h5{ font-family:var(--mono);font-size:11px;letter-spacing:.2em;text-transform:uppercase; color:var(--signal);margin:0 0 20px;font-weight:600; } .foot p,.foot a,.foot li{color:var(--ash);font-size:14px} .foot a:hover{color:var(--bone)} .foot ul{list-style:none;padding:0;margin:0;display:grid;gap:11px} .hours{font-family:var(--mono);font-size:14px;color:var(--bone);display:grid;gap:8px} .hours span{color:var(--ash-dim);font-size:11px;letter-spacing:.14em;text-transform:uppercase;display:block} .social{display:flex;gap:10px;margin-top:22px} .social a{ width:40px;height:40px;border:1px solid var(--edge);display:grid;place-items:center; border-radius:50%;transition:.25s;color:var(--ash); } .social a:hover{border-color:var(--signal);color:var(--signal)} /* fill:currentColor is why the hover rule above now recolours the glyph. The previous PNGs were normalised with grayscale(1) brightness(1.7); brightness multiplies, so the pure-black TikTok tile stayed black and vanished into the footer. 18px reads better than the old 16px inside a 40px target. */ .social svg{width:18px;height:18px;fill:currentColor;display:block;transition:fill .25s} /* The icon colour itself is set in section 10.6, which carries !important to beat master.css:791 `footer a{color:#999 !important}`. Setting it here would be silently overridden. */ .legal{ border-top:1px solid var(--edge);padding-block:22px;display:flex;justify-content:space-between; gap:20px;flex-wrap:wrap;font-family:var(--mono);font-size:11px;letter-spacing:.1em; color:var(--ash-dim);text-transform:uppercase; } .legal a:hover{color:var(--bone)} /* scroll progress (injected by design-b.js) */ .progress{position:fixed;top:0;left:0;height:2px;width:0;background:var(--grad);z-index:99;transition:width .1s linear} /* ===================== PART 6 — HOMEPAGE COMPONENTS ====================== */ /* --- motion hero --- */ /* min-height, not height: the finder card is taller than the old hero copy, and a fixed height would clip it on short laptop screens (1366x768). The bottom padding reserves the band the ticker and scroll cue sit in, so content can never slide under them. */ .hero{ position:relative;min-height:min(100vh,940px); display:flex;align-items:center;overflow:hidden;background:var(--pitch); padding-block:clamp(40px,6vh,80px) clamp(150px,18vh,200px); } .hero-video{position:absolute;inset:0;overflow:hidden;z-index:0} .hero-video video{width:100%;height:100%;object-fit:cover;filter:saturate(.88) contrast(1.04) brightness(.92)} .hero-poster{position:absolute;inset:0;background-size:cover;background-position:center;z-index:-1} /* Scrim is deliberately asymmetric: it stays heavy on the left (0–42%) because the white H1/tagline/blurb sit there and need contrast, and thins out across the right where the footage is the point. Lightened 2026-09-23 so the video reads more clearly — if you lighten the 0%/42% stops further, re-check the hero copy still passes contrast against the brightest frame of the video. */ .hero-scrim{ position:absolute;inset:0;background: linear-gradient(to right,rgba(0,0,0,.85) 0%,rgba(0,0,0,.58) 42%,rgba(0,0,0,.10) 78%,rgba(0,0,0,.55) 100%), linear-gradient(to top,rgba(0,0,0,.92) 1%,transparent 38%); } .hero-grain{ position:absolute;inset:0;opacity:.05;pointer-events:none;mix-blend-mode:overlay; background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E"); animation:grain 7s steps(6) infinite; } @keyframes grain{ 0%{transform:translate(0,0)}20%{transform:translate(-3%,2%)}40%{transform:translate(2%,-3%)} 60%{transform:translate(-2%,-2%)}80%{transform:translate(3%,1%)}100%{transform:translate(0,0)} } /* Two columns: headline left, vehicle finder card top-right. Both top-aligned so the card reads as sitting in the hero's upper-right corner, while the pair as a whole stays vertically centred by .hero's flex. */ .hero-inner{ position:relative;z-index:2;width:100%; display:grid;grid-template-columns:minmax(0,1fr) minmax(320px,380px); gap:clamp(28px,4vw,56px);align-items:start; } .hero-copy{max-width:660px} /* --- hero vehicle finder card --- */ .hero-finder{ background:rgba(8,9,10,.82);backdrop-filter:blur(16px); border:1px solid var(--edge-hi);border-radius:3px; padding:26px 24px 24px; } .hero-finder h2{ font-size:21px;font-weight:700;font-stretch:112%; text-transform:uppercase;margin-bottom:7px; } .hf-sub{ font-family:var(--mono);font-size:10px;letter-spacing:.16em;text-transform:uppercase; color:var(--ash);margin:0 0 20px;font-variant-numeric:tabular-nums; } .hero-finder .field{margin-bottom:14px} .hero-finder .btn-b{width:100%;justify-content:center;margin-top:4px} .hf-foot{ margin-top:15px;display:flex;align-items:center;gap:9px; font-family:var(--mono);font-size:10px;letter-spacing:.12em; text-transform:uppercase;color:var(--ash-dim); } .hf-foot b{color:var(--signal);font-weight:700} .tagline{ font-family:var(--mono);font-size:11px;letter-spacing:.26em;text-transform:uppercase; color:var(--signal);margin-bottom:20px;display:flex;align-items:center;gap:12px;flex-wrap:wrap; } .tagline b{font-weight:600;color:var(--bone)} /* Sized for the SEO headline ("Used Cars in Calgary for Different Needs and Budgets", 51 chars). At the mockup's 102px that wrapped to six lines and pushed the blurb and both CTAs below the fold. */ .hero h1{ font-size:clamp(32px,4.1vw,58px);font-weight:800;font-stretch:120%; text-transform:uppercase;line-height:1.02;text-wrap:balance; position:relative;padding-bottom:20px; } /* Same page-heading rule the interior pages carry, on the homepage headline. Delayed 0.85s: design-b.js splits this H1 into per-word spans with staggered transition-delays, and the last word lands around 0.7s — the rule draws in after the headline has settled rather than racing it. The JS rewrites innerHTML, which leaves a ::after untouched. @keyframes h1rule is declared further down with the .inv-title h1 rules — valid, since @keyframes resolve by name and are not order-dependent. */ .hero h1::after{ content:"";position:absolute;left:0;bottom:0;height:4px;width:68px; background:var(--grad);transform-origin:left center; animation:h1rule .5s cubic-bezier(.2,.7,.3,1) .85s both; } .hero p.blurb{color:#C9CCD1;max-width:44ch;margin:22px 0 30px} .hero-actions{display:flex;gap:14px;flex-wrap:wrap} /* word-by-word headline reveal */ .word{display:inline-block;overflow:hidden;vertical-align:top} .word i{ display:inline-block;font-style:normal;transform:translateY(105%) rotate(4deg); transition:transform .95s cubic-bezier(.16,.84,.28,1); } .ready .word i{transform:none} /* Staggered supporting lines. The hidden start state is scoped to .js-motion (set on by an inline script in the head). If that script or design-b.js never runs, the copy simply renders visible instead of being stranded at opacity:0. */ .js-motion .stagger{opacity:0;transform:translateY(16px);transition:opacity .8s ease,transform .8s cubic-bezier(.2,.7,.3,1)} .js-motion .ready .stagger,.ready .stagger{opacity:1;transform:none} .ready .tagline{transition-delay:.15s} .ready .blurb{transition-delay:.75s} .ready .hero-actions{transition-delay:.9s} /* scroll cue */ .cue{ position:absolute;left:var(--gutter);bottom:104px;z-index:3;display:flex;align-items:center;gap:12px; font-family:var(--mono);font-size:10px;letter-spacing:.24em;text-transform:uppercase;color:var(--ash); } .cue i{width:34px;height:1px;background:var(--edge-hi);position:relative;overflow:hidden} .cue i::after{ content:"";position:absolute;inset:0;background:var(--grad); transform:translateX(-100%);animation:sweep 2.1s cubic-bezier(.6,0,.3,1) infinite; } @keyframes sweep{50%{transform:translateX(0)}100%{transform:translateX(100%)}} .cue:hover{color:var(--bone)} /* inventory ticker */ .ticker{ position:absolute;left:0;right:0;bottom:0;z-index:3;border-top:1px solid var(--edge); background:rgba(0,0,0,.55);backdrop-filter:blur(8px);overflow:hidden; -webkit-mask-image:linear-gradient(90deg,transparent,#000 6%,#000 94%,transparent); mask-image:linear-gradient(90deg,transparent,#000 6%,#000 94%,transparent); } .ticker-row{display:flex;gap:0;width:max-content;animation:roll 46s linear infinite;padding-block:17px} .ticker:hover .ticker-row{animation-play-state:paused} @keyframes roll{to{transform:translateX(-50%)}} .tick-item{ display:flex;align-items:center;gap:14px;padding:0 30px;border-right:1px solid var(--edge); font-family:var(--mono);font-size:11px;letter-spacing:.12em;text-transform:uppercase; color:var(--ash);white-space:nowrap; } .tick-item em{font-style:normal;color:var(--bone)} .tick-item s{text-decoration:none;color:var(--signal);font-weight:700} /* --- finder --- */ .finder{background:var(--carbon);border-block:1px solid var(--edge)} /* the grid that used to sit under these chips moved into the hero card, so the strip now carries its own bottom padding */ .chips{display:flex;gap:10px;flex-wrap:wrap;padding-block:26px} .chip{ display:inline-flex;align-items:center;gap:9px;padding:10px 18px;border:1px solid var(--edge); border-radius:100px;font-family:var(--mono);font-size:11px;letter-spacing:.14em;text-transform:uppercase; color:var(--ash);transition:.25s; } .chip:hover,.chip.is-on{ border-color:transparent;color:var(--signal); background:linear-gradient(var(--ink),var(--ink)) padding-box,var(--grad) border-box; border:1px solid transparent; } /* The finder fields now live in the hero card (.hero-finder); the strip below the hero keeps only the quick-filter chips. */ .field label{ display:block;font-family:var(--mono);font-size:10px;letter-spacing:.2em;text-transform:uppercase; color:var(--ash-dim);margin-bottom:9px; } /* background-COLOR, not the background shorthand: the shorthand would wipe the SVG caret that PART 9.5 sets on every placeholders still paint (they are allowed to overflow) but a itself #d77b4a, which on a dark page reads as a solid orange bar with the thumbs lost inside it. Draw a real track with a pseudo-element and put amber thumbs on top. Style only: no ids, no scripts. The sidebar is rendered twice with these same ids (CLAUDE.md gotcha #1), and CSS is the one thing that is safe to apply to both copies. */ .inventory_range{position:relative;height:34px;margin:14px 0 !important;padding:0 !important} /* same centring as .range-bar: input top 8 + height 18 => thumb centre 17; track top 15 + height 4 => track centre 17. --fill-a / --fill-b are set by the mirroring script in inventory.blade.php and mark the two thumb centres, so the amber span sits exactly between the handles instead of each input painting its own full-width bar. */ .inventory_range::before{ content:"";position:absolute;top:15px;left:0;right:0;height:4px;border-radius:2px; background:linear-gradient(to right, var(--edge) 0%, var(--edge) var(--fill-a,0%), var(--g1) var(--fill-a,0%), var(--g2) var(--fill-b,100%), var(--edge) var(--fill-b,100%), var(--edge) 100%); } .inventory_range input[type="range"]{ position:absolute !important;top:8px !important;left:0 !important; width:100% !important;height:18px !important; /* min-height wins over height, so a global form rule setting one silently re-centres the thumbs away from the track. Pinned here so the geometry above cannot be broken from a distance again. */ min-height:0 !important;max-height:18px !important; background:transparent !important;border:0 !important; padding:0 !important;margin:0 !important; pointer-events:none;-webkit-appearance:none;appearance:none; } .inventory_range input[type="range"]::-webkit-slider-runnable-track{background:transparent;height:18px} .inventory_range input[type="range"]::-moz-range-track{background:transparent;height:18px} .inventory_range input[type="range"]::-webkit-slider-thumb{ -webkit-appearance:none;box-sizing:border-box;pointer-events:auto;cursor:pointer; width:18px;height:18px;margin-top:0;border-radius:50%; background:var(--signal);border:2px solid #000;box-shadow:0 0 0 1px var(--signal); } .inventory_range input[type="range"]::-moz-range-thumb{ box-sizing:border-box;pointer-events:auto;cursor:pointer;width:18px;height:18px;border-radius:50%; background:var(--signal);border:2px solid #000; } /* The price and odometer ranges are structurally identical, so side by side in the sidebar they read as one continuous smear of sliders. Each gets its own bordered card and an amber rule-and-label header to separate them from each other and from the select stack above. */ .filter-range{ background:var(--ink) !important; border:1px solid var(--edge) !important; border-radius:2px !important; padding:15px 15px 11px !important; margin:0 0 14px !important; } .filter-range + .filter-range{margin-top:0 !important} .filter-range__label{ display:flex !important;align-items:center;gap:9px; font-family:var(--mono) !important;font-size:10px !important; letter-spacing:.2em !important;text-transform:uppercase !important; color:var(--signal) !important;margin:0 0 4px !important; } .filter-range__label::before{ content:"";width:14px;height:1px;background:var(--grad);flex:none; } .filter-range__vals{margin:0 !important} .filter-range__vals p{ color:var(--bone) !important;font-family:var(--mono) !important; font-size:12px !important;font-variant-numeric:tabular-nums;margin:0 !important; } /* slim page title that replaced the removed .top_page_head banner */ .inv-title{padding-top:26px;padding-bottom:4px} /* PAGE HEADING. Deliberately separated from .s_title (the section heading) on four axes, not just size — they previously shared font, weight, transform, colour AND tracking, so 40px vs 29px was the only signal and it read as one level. Page title: biggest, heaviest, tightest tracking, plus a gradient rule underneath that nothing else on the site carries. See .s_title for the opposite end of each axis. */ .inv-title h1{ font-family:var(--display) !important;font-weight:800 !important; font-size:clamp(30px,4.2vw,54px) !important;text-transform:uppercase !important; letter-spacing:-.02em !important;line-height:1.02 !important;color:var(--bone) !important; position:relative;padding-bottom:18px !important; } .inv-title h1::after{ content:"";position:absolute;left:0;bottom:0;height:4px;width:68px; background:var(--grad);transform-origin:left center; animation:h1rule .5s cubic-bezier(.2,.7,.3,1) both; } /* grows in on load — the page title is the one thing worth announcing. The prefers-reduced-motion block kills this via its blanket animation:none. */ @keyframes h1rule{from{transform:scaleX(0)}to{transform:scaleX(1)}} /* Same treatment on the two page types that carry a real H1 but never used the .inv-title block: the vehicle detail page (the car name IS its page heading) and the error pages. Both inherited legacy styling that made them read as SECTION headings — master.css:947 gives .info_title h1 a 4px amber LEFT bar, the very marker .s_title now uses, so the car name wore the subordinate cue on its own page. Cleared here. */ .info_title h1,.error-content h1{ font-family:var(--display) !important;font-weight:800 !important; /* capped at 44 rather than .inv-title's 54: the car name shares a flex row with the price plate, and long make-model-trim strings need the headroom */ font-size:clamp(26px,3.4vw,44px) !important;text-transform:uppercase !important; letter-spacing:-.02em !important;line-height:1.02 !important;color:var(--bone) !important; position:relative;padding:0 0 18px !important; border-left:0 !important;border-right:0 !important; } .info_title h1::after,.error-content h1::after{ content:"";position:absolute;left:0;bottom:0;height:4px;width:68px; background:var(--grad);transform-origin:left center; animation:h1rule .5s cubic-bezier(.2,.7,.3,1) both; } /* error pages centre their content, so the rule centres with it. Separate keyframe because the centring translate and the reveal scale would otherwise fight over the same transform property. */ .error-content h1::after{left:50%;transform-origin:center;animation-name:h1ruleCentre} @keyframes h1ruleCentre{ from{transform:translateX(-50%) scaleX(0)} to{transform:translateX(-50%) scaleX(1)} } /* __sub carries the tagline the old .top_page_head banner used to show in its right-hand column, on the interior pages that now use this slim title */ .inv-title__count,.inv-title__sub{ font-family:var(--mono) !important;font-size:11px !important;letter-spacing:.18em !important; text-transform:uppercase !important;color:var(--ash-dim) !important;margin:10px 0 0 !important; } /* --- 9.11b inventory intro + FAQ (SEO report sections) ------------------- */ .inv-intro{ color:var(--ash) !important;font-size:15px;line-height:1.75; max-width:78ch;margin:0 0 26px;padding-bottom:22px; border-bottom:1px solid var(--edge); } .inv-faq-q{ font-family:var(--display) !important;font-size:16px !important;font-weight:700 !important; text-transform:uppercase !important;letter-spacing:-.01em !important; color:var(--bone) !important;line-height:1.25 !important; } /* --- 9.11c inventory guide panels + FAQ band ---------------------------- The two guide columns and the FAQ used to be three plain Bootstrap rows on one flat background, so they read as a single wall of prose. Each is now a distinct surface: bordered panels for the guide, a darker ruled band for the FAQ, and a rule above the whole block to separate it from pagination. */ .inv-guide{ border-top:1px solid var(--edge); padding-block:clamp(44px,5.5vw,78px); } .inv-guide-grid{ display:grid;grid-template-columns:1fr 1fr;gap:1px; background:var(--edge);border:1px solid var(--edge); } .inv-panel{background:var(--ink);padding:clamp(26px,3vw,40px)} .inv-panel h2{ font-family:var(--display) !important;font-weight:800 !important; font-size:clamp(21px,2.1vw,29px) !important;text-transform:uppercase !important; letter-spacing:-.02em !important;line-height:1.08 !important; color:var(--bone) !important;margin:0 0 16px !important; /* master.css .s_title brackets headings with an amber border on BOTH sides — these headings deliberately do not use that class, but guard anyway. */ border:0 !important;padding:0 !important; } .inv-panel p{margin-bottom:14px} .inv-panel p:last-child{margin-bottom:0} /* .faq-band / .band-title are the generic names; the inv- prefixed ones are the originals from the inventory page and share the same treatment. */ .inv-faq-band,.faq-band{ background:var(--carbon);border-block:1px solid var(--edge); padding-block:clamp(44px,5.5vw,78px); } .inv-faq-title,.band-title{ font-family:var(--display) !important;font-weight:800 !important; font-size:clamp(24px,3vw,40px) !important;text-transform:uppercase !important; letter-spacing:-.02em !important;line-height:1.04 !important; color:var(--bone) !important;margin:0 0 30px !important;border:0 !important;padding:0 !important; } .faq-band .lede{margin-bottom:30px} /* --- 9.11c(ii) generic section banding ---------------------------------- Alternating surfaces down a page: carbon band, page black, carbon band, and so on. .sec-band is the carbon one and reuses the same tone + hairlines as .faq-band above and .fin-sec--band below, so a banded section looks the same whichever page it's on. .sec-plain looks like nothing but is not optional: it gives the UNbanded sections the same padding-block as the banded ones. Bootstrap's py-5 is a flat 48px, so without it the black sections sat tighter than the carbon ones and the alternation read as accidental rather than designed. Both replace .tas-shadow on the about page, which wrapped whole sections in a bordered --ink card while .opt-band and .faq-band on the same page were full-bleed — two different ideas of what a section is, stacked. */ .sec-band,.sec-plain{padding-block:clamp(44px,5.5vw,78px)} .sec-band{background:var(--carbon);border-block:1px solid var(--edge)} /* Two unbanded sections in a row share one continuous black, so nothing marks where one ends — a band would have its own hairlines to do that. This is the only case that needs the rule; a banded neighbour on either side already supplies the division. */ .sec-plain + .sec-plain{border-top:1px solid var(--edge)} /* Cards have to sit a step away from whatever surface is under them, and the two card components were built for opposite backgrounds: .std is painted #101114 (= --carbon) for the black .standard strip, so on a carbon band it vanishes and drops to --ink. .need-card is painted --ink for carbon bands, so on page black it vanishes the other way and lifts to --carbon. Without these, the card is just its 1px grid lines. */ .sec-band .std{background:var(--ink)} .sec-plain .need-card{background:var(--carbon)} /* buttons closing a run of body copy */ .about-cta{display:flex;flex-wrap:wrap;gap:14px;margin-top:32px} /* --- 9.11d financing options cards ---------------------------------------- */ .opt-band{padding-block:clamp(44px,5.5vw,78px);border-top:1px solid var(--edge)} .opt-band .band-title{margin-bottom:20px !important} .opt-grid{ display:grid;grid-template-columns:repeat(4,1fr);gap:1px; background:var(--edge);border:1px solid var(--edge);margin-top:34px; } /* BUG FIX: .opt-grid is listed in PART 8's 1080px and 640px breakpoints, but those blocks are declared ~600 lines ABOVE this base rule. At equal specificity the later declaration wins, so the collapse never applied and the four financing-option cards stayed four-across on a phone — roughly 90px per card, with the text spilling out of each one. Restated here, after the base rule, which is the only place it can win from. PART 8's mentions of .opt-grid are now redundant but harmless. */ @media (max-width:1080px){ .opt-grid{grid-template-columns:1fr 1fr} } @media (max-width:640px){ .opt-grid{grid-template-columns:1fr} } .opt-card{background:var(--ink);padding:28px 24px 30px;display:flex;flex-direction:column;gap:10px} .opt-n{ font-family:var(--mono);font-size:11px;letter-spacing:.2em;color:var(--signal); font-variant-numeric:tabular-nums; } .opt-card h3{ font-family:var(--display) !important;font-weight:700 !important; font-size:17px !important;text-transform:uppercase !important;letter-spacing:-.01em !important; line-height:1.2 !important;color:var(--bone) !important;margin:0 !important; border:0 !important;padding:0 !important; } .opt-card p{color:var(--ash);font-size:14px;margin:0} /* --- 9.11d finance intro: process steps, proof chips, jump CTA ----------- The four-step explanation used to be a plain