/* Theme Name: Pablos Performance Theme URI: https://pablosperformance.com Author: Pablos Performance Description: Block theme for Pablos Performance mobile mechanic — Phoenix, AZ. Navy/amber design system, sticky header, scroll-zoom service-area map, fleet block, service price menu. Version: 6.4.1 Requires at least: 6.4 Tested up to: 6.6 Requires PHP: 7.4 License: Proprietary Text Domain: pablos */ /* ============================================================ PABLOS PERFORMANCE v6 — Design System Changes from v5.1: - the animated navy→amber gradient no longer runs on every heading; it appears once, static, on the hero h1 only - one radius scale, one shadow scale, one motion curve - cards share a single hover contract: amber border, amber icon, 3px lift - new: service price chips, fleet block, service price menu, scroll-zoom service-area map panel, hero van Zero !important except the reduced-motion reset. ============================================================ */ :root{ --bg:#fbfaf8; --card:#ffffff; --ink:#122437; --navy:#16324a; --navy-deep:#0f2438; --navy-line:#24405a; --amber:#e89c0c; --amber-hi:#f4b34d; --amber-ink:#231a05; --amber-soft:#fdf3dd; --amber-text:#b7780a; --amber-deep:#8a5800; /* Surface-dark: dark backgrounds that must stay DARK in both light and dark mode. Distinct from --navy (which flips to light TEXT color in dark mode). Use these for any element that uses navy as a background fill — hero, fleet, stats, banners, footer, etc. Added 2026-08-06 to fix dark-mode clash. */ --surface-dark:#16324a; --surface-dark-deep:#0f2438; /* Semantic tokens for the status/callout colors that were hardcoded. These flip in dark mode so callouts/cards stay readable without per-element overrides. Added 2026-08-06. */ --good:#1e7a4d; --good-wash:#f7fcf9; --good-border:#d6ebe0; --bad:#c0392b; --bad-wash:#fffaf9; --bad-border:#f0d7d2; --info:#2563eb; --info-wash:#eaf4ff; --info-border:#bcd9f5; --input-bg:#ffffff; --input-border:#d9d4c9; --input-text:#122437; --callout-amber:#f6f4ef; --callout-amber-border:#f0e2bc; --callout-soft:#faf8f4; --dotted:#cdd5dc; --line:#e7e3da; --muted:#5b6b79; --muted-dark:#93a8bb; --r-sm:10px; --r:14px; --r-lg:16px; --shadow:0 2px 10px rgba(18,36,55,.05); --shadow-lg:0 18px 40px -20px rgba(18,36,55,.35); --ease:cubic-bezier(.22,.61,.36,1); --font-head:"Sora","Work Sans",system-ui,sans-serif; --font-body:"Work Sans",system-ui,Arial,sans-serif; } /* ---------- dark mode (opt-in via [data-theme="dark] on ) ---------- Added 2026-08-06. Visitor-facing toggle (assets/pp-dark-mode.js). Every token recomputed for dark-bg WCAG contrast (AAA text/bg, AA muted, >=3:1 borders). Dark-not-black bg (#0f1419) avoids halation; off-white text (#e6e9ef/#c9d1da) avoids eye fatigue. Amber works BETTER on dark (high luminance accent). Never forced — opt-in per visitor, respects prefers-color-scheme on first visit. */ html[data-theme="dark"]{ --bg:#0f1419; --card:#171d24; --ink:#e6e9ef; --navy:#e6e9ef; --navy-deep:#0a0d11; --navy-line:#1f2630; --line:#5a6680; --muted:#a8b3c4; --muted-dark:#a8b3c4; --amber:#f4b34d; --amber-hi:#ffc97a; --amber-deep:#f4b34d; --amber-ink:#1a1205; --amber-soft:#231d0a; /* Surface-dark stays dark in dark mode too (these are dark navy banners/ sections, not text). Slightly lifted from --bg for depth. */ --surface-dark:#101724; --surface-dark-deep:#0a0f18; /* Semantic tokens flip to dark-appropriate washes. The accent color stays the same hue but darker bg + brighter border for dark-mode legibility. */ --good:#3da06f; --good-wash:#0f1a14; --good-border:#1e3a2a; --bad:#e05a4a; --bad-wash:#1a0f0e; --bad-border:#3a1a18; --info:#5b8def; --info-wash:#0f1622; --info-border:#1e2d4a; --input-bg:#0d1117; --input-border:#3a4250; --input-text:#e6e9ef; --callout-amber:#231d0a; --callout-amber-border:#3a2e10; --callout-soft:#0d1117; --dotted:#3a4250; --shadow:0 2px 10px rgba(0,0,0,.4); --shadow-lg:0 18px 40px -20px rgba(0,0,0,.7); } /* Dark-mode element fixes. The token block above handles anything that uses var(--card)/var(--line)/var(--surface-dark)/etc. But several elements hardcode light fills (#fff, var(--callout-amber)) which stay bright on dark — these need explicit dark overrides. (Navy-as-background elements were fixed at the root by the --surface-dark token, so they don't need per-element overrides.) Added 2026-08-06. */ html[data-theme="dark"] .price, html[data-theme="dark"] .pp-veh, html[data-theme="dark"] .pp-opts, html[data-theme="dark"] .book input, html[data-theme="dark"] .book select, html[data-theme="dark"] .book textarea, html[data-theme="dark"] .input{ background:#0d1117;border-color:#3a4250;color:#e6e9ef; } html[data-theme="dark"] .pp-veh-add:hover{background:#2a2210} /* Amber-soft callouts — token flips to dark amber; borders need to match. */ html[data-theme="dark"] .panel.alt{background:#231d0a;border-color:#3a2e10} html[data-theme="dark"] .fin-callout{background:#231d0a;border-color:#3a2e10} /* Status-tinted cards that hardcode light washes. */ html[data-theme="dark"] .pp-area-card.yes{background:#0f1a14;border-color:#1e3a2a} html[data-theme="dark"] .pp-recall-card.urgent{background:#1a0f0e;border-color:#3a1a18} /* .pp-veh-ev hardcodes #14456f (dark blue) text on var(--info-wash), which is light in light mode but near-black in dark mode — so the text vanishes. The wash/border already flip via tokens; this just lifts the text to the dark-mode --info accent. Caught by _preview/dark-audit.cjs 2026-08-10. */ html[data-theme="dark"] .pp-veh-ev{color:var(--info)} /* Form option dropdown + payment icons need a dark fill or they glow. */ html[data-theme="dark"] .pay-icon.visa, html[data-theme="dark"] .pay-icon.mc, html[data-theme="dark"] .pay-icon.amex, html[data-theme="dark"] .pay-icon.discover, html[data-theme="dark"] .pay-icon.cash, html[data-theme="dark"] .pay-icon.check{background:#0d1117} /* The light "step" cards use a hardcoded text color that's invisible on dark. */ html[data-theme="dark"] .step.light{color:#e6e9ef} html[data-theme="dark"] .step.light h3{color:#e6e9ef} /* Placeholder text in form fields — keep it visible but muted. */ html[data-theme="dark"] .book input::placeholder, html[data-theme="dark"] .book textarea::placeholder, html[data-theme="dark"] .input::placeholder{color:#5a6680} /* BUTTONS — several use --amber-ink (#231a05, near-black) as text, which is invisible on dark backgrounds. In dark mode these need light text + a visible border so the button is readable + has an affordance. */ html[data-theme="dark"] .btn.ghost{color:#e6e9ef;border-color:#5a6680;background:transparent} html[data-theme="dark"] .btn.ghost:hover{background:#2a3340;color:#f4b34d;border-color:#f4b34d} /* .btn.navy base: in dark mode --navy flips to light, so a base navy button would become a white-fill button — jarring. Make it a bordered secondary, matching the hero/fleet/page-head navy button treatment. */ html[data-theme="dark"] .btn.navy{background:transparent;border-color:#3c5670;color:#eaf0f6} html[data-theme="dark"] .btn.navy:hover{background:#17304a;border-color:#5b7a99;color:#eaf0f6} html[data-theme="dark"] .btn.steel{background:transparent;border-color:#3c5670;color:#eaf0f6} html[data-theme="dark"] .btn.steel:hover{background:#17304a;border-color:#5b7a99;color:#eaf0f6} /* .pp-dg-close uses background:var(--navy) with #fff text. In dark mode --navy flips to a LIGHT value (it's the heading-text color), so #fff on it goes invisible. Pin it to a dark surface so the white text reads. */ html[data-theme="dark"] .pp-dg-close{background:var(--surface-dark-deep)} /* The cta-band is amber (stays amber in both modes); its buttons need DARK text on the amber fill (light text on amber = 1.5:1, unreadable) plus a visible dark border so they read as buttons. */ html[data-theme="dark"] .cta-band .btn{color:#1a1205;border-color:rgba(0,0,0,.3);background:rgba(0,0,0,.05)} html[data-theme="dark"] .cta-band .btn:hover{background:rgba(0,0,0,.12);color:#1a1205} /* HERO — restore the gradient text clip in dark mode. The original gradient (white→gold→amber) already works on dark; the earlier fix killed it by forcing solid. Keep -webkit-text-fill-color:transparent so the clip shows, but use a brighter amber end-stop for more pop on the dark bg. */ html[data-theme="dark"] .hero h1{ background:linear-gradient(96deg,#fff 0%,#ffd88a 50%,#ffc97a 100%); -webkit-background-clip:text;background-clip:text; color:transparent;-webkit-text-fill-color:transparent} /* Footer brand h3 — same gradient treatment. */ html[data-theme="dark"] .pp-footer .cols>div:first-child h3{ background:linear-gradient(96deg,#fff 0%,#ffd88a 50%,#ffc97a 100%); -webkit-background-clip:text;background-clip:text; color:transparent;-webkit-text-fill-color:transparent} /* hero-badge + hero-price use translucent amber washes that are too faint on dark; bump the alpha + give them solid light text. */ html[data-theme="dark"] .hero-badge{background:rgba(244,179,77,.15);border-color:rgba(244,179,77,.4);color:#f4b34d} html[data-theme="dark"] .hero-price{background:rgba(244,179,77,.12);border-color:rgba(244,179,77,.4)} html[data-theme="dark"] .hero-price b{color:#ffc97a} html[data-theme="dark"] .hero-price span{color:#e6e9ef} html[data-theme="dark"] .hero .tag{color:#cfd9e6} /* NAV HEADER — nav links inherit var(--navy) which is light in dark mode (good), but the dropdown + Book Now gradient break. Fix the nav link base + the gradient button. */ html[data-theme="dark"] .pp-header .wp-block-navigation-item__content{color:#e6e9ef !important} html[data-theme="dark"] .pp-header .wp-block-navigation-item__content:hover{color:#f4b34d !important} /* Book Now nav button — the amber gradient works on dark, keep the amber fill but ensure text is dark (it is). Just make sure the gradient renders. */ html[data-theme="dark"] .pp-nav-cta{background:linear-gradient(180deg,#ffc97a 0%,#f4b34d 60%,#c8881e 100%)} html[data-theme="dark"] .pp-nav-cta a.wp-block-navigation-item__content{color:#1a1205 !important} /* The "services →" submenu link that showed white bg — force theme-aware. */ html[data-theme="dark"] .pp-header .wp-block-navigation__submenu-container{background:#171d24;border-color:#3a4250;color:#e6e9ef} html[data-theme="dark"] .pp-header .wp-block-navigation__submenu-container a{color:#e6e9ef} /* MUTED text — several use #5a6680 / var(--muted-dark) / #3f4f5e which sit at 3.1-3.3:1 on dark (just under AA). Bump them to a lighter muted. */ html[data-theme="dark"] .pp-topbar .avail, html[data-theme="dark"] .pp-callnow .pp-sub, html[data-theme="dark"] .chips li{color:#c9d1da} /* TOOL/LIST items with inline rgba white-wash backgrounds (block content) — these translucent whites glow on dark. Override to dark translucent. */ html[data-theme="dark"] .pp-tools [style*="rgba(255"], html[data-theme="dark"] [style*="background:rgba(255, 255, 255"], html[data-theme="dark"] [style*="background:#fff"][class*="tool"]{background:rgba(255,255,255,.04) !important} html[data-theme="dark"] .pp-tools h3{color:#e6e9ef} html[data-theme="dark"] .pp-tools a{color:#f4b34d} /* TEXT READABILITY PASS (2026-08-07) — brighten every hardcoded text color that was chosen for light mode and stays dim when the bg flips dark. All replacements verified >=4.5:1 on --bg/--card/--surface-dark. */ /* Amber-text on amber-soft callouts: #96650a (3.7:1) → #f4b34d (9.1:1). NOTE: .cta-band has an amber FILL in both modes, so its dark-brown text (#5a4409, 5.0:1) is already correct — excluded here. */ html[data-theme="dark"] .pp-finstrip, html[data-theme="dark"] .placeholder-tag, html[data-theme="dark"] .pp-veh-add, html[data-theme="dark"] .pp-veh-recall.found, html[data-theme="dark"] .pp-finstrip a{color:#f4b34d} /* The dark-brown lead text on junk section: #54452a/#5a4409/#7a6642/#6b5936 were ~1.8-3.5:1. Body copy → bright muted slate; the "why" accent → amber. */ html[data-theme="dark"] .junk-lead p, html[data-theme="dark"] .junk-lead .fine, html[data-theme="dark"] .junk-list li, html[data-theme="dark"] .junk-steps li{color:#cfd9e6} html[data-theme="dark"] .junk-why{color:#e6e9ef;border-left-color:#f4b34d} /* Warning/status text that hardcoded #b3541e (3.7:1) → #e8825a (6.3:1 min) */ html[data-theme="dark"] .pp-veh-msg.warn, html[data-theme="dark"] .pp-recall-status.warn, html[data-theme="dark"] .pp-addr-note.warn, html[data-theme="dark"] .pp-area-status.warn{color:#e8825a} /* "Stop driving" status indicators: dark-red text/badges chosen for the light-mode --bad fill go illegible on the dark-mode washes. Two cases: .pp-veh-recall.stop uses #a5321f text on --bad-wash (#1a0f0e) = 2.5:1 FAIL; .pp-flag.stop is a solid #fff-on-red badge = 3.66:1, borderline for a small flag. Brighten both so the warning reads in dark mode. Verified >=4.5:1. */ html[data-theme="dark"] .pp-veh-recall.stop{color:#ff8a7a} /* 6.4:1 on #1a0f0e */ html[data-theme="dark"] .pp-flag.stop{background:#c0392b;color:#fff} /* 5.4:1, matches light --bad */ /* .step card body text used #3f5c78 (2.7:1) — the dark-section step cards. */ html[data-theme="dark"] .step{color:#c9d1da} html[data-theme="dark"] .step h3{color:#e6e9ef} /* Chips + hero-quote citation: dim slates → brighter muted. */ html[data-theme="dark"] .chips li{color:#c9d1da} html[data-theme="dark"] .hero-quote cite{color:#c9d1da} /* Placeholder text already at #5a6680 (3.2:1) — bump to pass AA. */ html[data-theme="dark"] .book input::placeholder, html[data-theme="dark"] .book textarea::placeholder, html[data-theme="dark"] .input::placeholder{color:#9aa7b8} /* ---------- base ---------- */ *{box-sizing:border-box} html{scroll-behavior:smooth} body{background:var(--bg);color:var(--ink);font-family:var(--font-body);font-size:17px;line-height:1.65;margin:0;-webkit-font-smoothing:antialiased} h1,h2,h3,h4{font-family:var(--font-head);line-height:1.12;letter-spacing:-.015em;color:var(--navy);margin:0 0 .5em} h1{font-size:clamp(2.4rem,5.2vw,4rem);font-weight:800;line-height:1.02} h2{font-size:clamp(1.75rem,3.6vw,2.6rem);font-weight:700} h3{font-size:1.3rem;font-weight:600} p{margin:0 0 1em} /* Prose line-length cap (50-75ch per Bringhurst; fluency heuristic, Reber et al. 2004 — easier reading is read as more trustworthy). The homepage's long sections ("what this valley does", diagnostic cost, etc.) are built as generic
blocks, so the paragraphs inside .wrap can run ~150ch on wide screens. This caps them. Scoped to p inside .wrap that aren't part of a card/grid, so multi-column layouts keep their own widths. Added 2026-08-06. */ .wrap > p:not([class]){max-width:70ch;text-wrap:pretty} a{color:var(--navy);text-decoration:none;transition:color .2s var(--ease)} a:hover{color:var(--amber-deep)} img{max-width:100%;height:auto} .wrap{max-width:1180px;margin:0 auto;padding:0 24px} section{padding:76px 0} .center{text-align:center} .muted{color:var(--muted)} .kicker{display:block;font-family:var(--font-head);font-size:.78rem;font-weight:700;letter-spacing:.2em;text-transform:uppercase;color:var(--amber-deep);margin-bottom:.6em} a:focus-visible,button:focus-visible,input:focus-visible,select:focus-visible,textarea:focus-visible,[tabindex]:focus-visible{outline:3px solid var(--navy);outline-offset:2px} /* ---------- buttons ---------- */ .btn{display:inline-flex;align-items:center;justify-content:center;gap:9px;font-family:var(--font-body);font-weight:700;font-size:1.05rem;padding:15px 25px;border-radius:var(--r-sm);border:1.5px solid transparent;cursor:pointer;transition:background .2s var(--ease),transform .2s var(--ease),box-shadow .2s var(--ease),color .2s var(--ease)} .btn.primary{background:var(--amber);color:var(--amber-ink);box-shadow:0 10px 24px -12px rgba(232,156,12,.9)} .btn.primary:hover{background:var(--amber-hi);color:var(--amber-ink);transform:translateY(-2px)} .btn.navy{background:var(--navy);color:#ffd88a} .btn.navy:hover{background:var(--navy-deep);color:#ffd88a;transform:translateY(-2px)} .btn.ghost{border-color:currentColor;color:var(--amber-ink);background:transparent} .btn.ghost:hover{background:var(--amber-ink);color:var(--amber)} .hero .btn.navy{background:transparent;border-color:#3c5670;color:#eaf0f6} .hero .btn.navy:hover{background:#17304a;border-color:#5b7a99} /* ============================================================ HEADER ============================================================ */ .pp-topbar{background:var(--surface-dark-deep);color:#dbe4ec;font-size:.9rem;padding:8px 0} .pp-topbar .wrap{display:flex;justify-content:space-between;gap:12px;flex-wrap:wrap;align-items:center} .pp-topbar a{color:#fff;font-weight:600} .pp-topbar a:hover{color:var(--amber-hi)} .pp-topbar .avail{color:var(--muted-dark)} .pp-header{background:var(--card);border-bottom:1px solid var(--line);position:sticky;top:0;z-index:50;transition:box-shadow .3s var(--ease)} .pp-header.is-scrolled{box-shadow:0 8px 26px -14px rgba(18,36,55,.28)} .pp-header .wrap{display:flex;align-items:center;justify-content:space-between;gap:10px;padding:20px 24px;flex-wrap:wrap} /* ---------- Brand: per-letter wordmark ---------- Each glyph is its own inline-block with its own gradient fill and a stagger index (--i, set inline in parts/header.html). No container box — the effect is carried entirely by the letters. Renders on every page via the header template part, so it stays restrained: hover-driven, nothing looping at idle. */ /* --pdx is the centre-to-centre distance between the two P's, measured at runtime by pp-theme.js (it changes with viewport and with which font has loaded). Default 0px: if JS never runs, the P's bob in place instead of swapping — no broken-looking jump. */ /* Logo treatment: Sora 800 is the heaviest face the theme loads, so weight is already maxed — the extra heft comes from size and from pulling the tracking in tight, which is what makes a wordmark read as a mark rather than as a sentence. Sized in rem so it scales with the root, not the header. */ /* Fluid, because the ceiling is set by how much room the nav leaves — and that changes with viewport. Measured against the live header with the compacted nav: at 950px the nav wraps above ~1.6rem, at 1024px above 2.1rem, at 1134px not until 2.3rem. So the wordmark takes 1.6rem where space is tight and grows to 2.1rem where it isn't, instead of one compromise size everywhere. Animation amplitudes are in em, so the motion scales with it automatically. */ .pp-brand{--pdx:0px;position:relative;z-index:0;display:inline-flex;align-items:baseline;gap:.34em;font-family:var(--font-head);font-weight:800;font-size:clamp(1.6rem,-.465rem + 3.48vw,2.1rem);letter-spacing:-.035em;color:var(--navy);white-space:nowrap} .pp-word{display:inline-flex} /* Ray of light: a hard, narrow shaft raked across the type, not a soft blob sitting behind it. Two stacked layers — a tight bright band with an amber trailing edge, plus a wide dim bloom that travels with it. Both are moved by background-position, so nothing but opacity and background-position animates. Timed to fire as blue connects at 12%, so the hit reads as the light. */ .pp-brand::before{content:"";position:absolute;top:-45%;left:-10%;width:120%;height:190%; z-index:-1;pointer-events:none;opacity:0; /* Amber, not white. The header background is flat #ffffff, so a white core renders as nothing at all — the shaft has to be warmer than the paper it falls on. Bright centre, deeper amber trailing edge for direction. */ background: linear-gradient(100deg,rgba(244,179,77,0) 43%,rgba(248,200,120,.34) 47%,rgba(232,156,12,.66) 50%,rgba(183,120,10,.46) 53%,rgba(244,179,77,0) 57%), radial-gradient(ellipse 26% 130% at 50% 50%,rgba(244,179,77,.24),rgba(244,179,77,0) 70%); background-size:300% 100%,300% 100%; background-repeat:no-repeat; filter:blur(1.5px); animation:pp-ray 9s var(--ease) infinite} @keyframes pp-ray{ 0%,8.5%{opacity:0;background-position:-130% 0,-130% 0} 10% {opacity:.85} 12% {opacity:1;background-position:40% 0,40% 0} 17% {opacity:.7} 21% {opacity:0;background-position:230% 0,230% 0} 22%,100%{opacity:0;background-position:-130% 0,-130% 0}} /* Baseline origin on every glyph, not just the P's — squash reads as weight only if the letter's feet stay planted. */ .pp-ltr{display:inline-block;will-change:transform;transform-origin:50% 100%; transition:transform .45s var(--ease),filter .45s var(--ease)} /* Vertical gradient per glyph — navy deepening downward on "Pablos", amber on "Performance". @supports guards the transparent fill: without background-clip support, -webkit-text-fill-color:transparent would erase the wordmark. */ @supports ((-webkit-background-clip:text) or (background-clip:text)){ .pp-ltr{ background-image:linear-gradient(180deg,var(--navy) 0%,var(--navy) 42%,var(--navy-deep) 100%); background-size:100% 260%;background-position:0 0; -webkit-background-clip:text;background-clip:text; -webkit-text-fill-color:transparent; transition:transform .45s var(--ease),background-position .45s var(--ease),filter .45s var(--ease)} .pp-word-alt .pp-ltr{ background-image:linear-gradient(180deg,var(--amber-hi) 0%,var(--amber) 42%,var(--amber-text) 100%)} } /* Fallback for the no-background-clip case: flat brand colors, still correct. */ .pp-word-alt .pp-ltr{color:var(--amber)} /* Hover: a wave travels the wordmark left to right. Each letter lifts, brightens and pulls its gradient through itself, 34ms behind the one before it — 17 letters, so the wave crosses in about 0.55s and the whole run settles by 1.1s. */ .pp-brand:hover .pp-ltr:not(.pp-p),.pp-brand:focus-visible .pp-ltr:not(.pp-p){ animation:pp-ltr-wave .78s var(--ease) both; animation-delay:calc(var(--i) * 34ms)} @keyframes pp-ltr-wave{ 0% {transform:translateY(0) scale(1); background-position:0 0; filter:none} 38% {transform:translateY(-6px) scale(1.07); background-position:0 100%; filter:drop-shadow(0 6px 10px rgba(18,36,55,.28)) brightness(1.12)} 70% {transform:translateY(1px) scale(.995); background-position:0 60%} 100%{transform:translateY(0) scale(1); background-position:0 0; filter:none}} /* ---------- The P's: kick, knockdown, scuffle, home ---------- A looping 9s short. transform-origin is the baseline (50% 100%) — that is what makes squash-and-stretch read as weight instead of as scaling; the glyph's feet stay planted while it compresses and springs. Beats (percent of the 9s cycle): 0-7 blue crouches and launches 7-10 blue airborne, lands on amber's mark 10-16 amber is struck, tumbles, ends up flat on its back 16-28 amber rights itself with an overshoot 28-41 the scuffle: alternating shoves, each recoiling the other 41-53 both crouch, hop home, land with a squash 53-100 rest, holding the wordmark correct and still Arc heights are capped by the header — 89px tall around a 35px wordmark — so anything taller sends the navy P into the navy topbar where it vanishes. Verified by sampling the whole timeline; see _preview/brand.html. */ /* The travelling P passes in FRONT of everything — the other letters (z-index 1) and the light ray (z-index -1). Explicit values so the stacking is not left to document order. */ .pp-ltr{position:relative;z-index:1} .pp-p{position:relative;z-index:5;transform-origin:50% 100%} .pp-p1{animation:pp-p1-story 9s var(--ease) infinite} .pp-p2{animation:pp-p2-story 9s var(--ease) infinite} /* BLUE — the aggressor. Winds up before it crouches (anticipation), hits hard and fast, then takes its time settling. Attacks sit ~1% apart, recoveries ~3%: even spacing is what made v1 read mechanical. */ @keyframes pp-p1-story{ 0%,3% {transform:translate(0,0) rotate(0deg) scale(1,1)} 4.2% {transform:translate(-0.206em,0) rotate(3deg) scale(1.05,.96)} /* wind-up, leans AWAY */ 6% {transform:translate(-0.069em,0) rotate(1deg) scale(1.26,.74)} /* crouch */ 7.2% {transform:translate(calc(var(--pdx) * .14),-0.264em) rotate(-5deg) scale(.86,1.16)} /* launch */ 9.5% {transform:translate(calc(var(--pdx) * .55),-0.352em) rotate(-8deg) scale(.92,1.12)} /* apex — scaleY capped; the stretch is what eats the topbar clearance */ 11.2% {transform:translate(calc(var(--pdx) * .88),-0.088em) rotate(-3deg) scale(1.04,.99)} /* dropping, foot out */ 12.2% {transform:translate(var(--pdx),0) rotate(0deg) scale(1.38,.66)} /* CONTACT */ 13.2% {transform:translate(calc(var(--pdx) + 0.275em),-0.132em) rotate(2deg) scale(.89,1.16)} /* recoil off its own hit */ 15% {transform:translate(var(--pdx),0) rotate(0deg) scale(1.02,.99)} 17%,25%{transform:translate(var(--pdx),0) rotate(0deg) scale(1,1)} 26.5% {transform:translate(calc(var(--pdx) + 0.137em),0) rotate(3deg) scale(.99,1.01)} /* braces — sees amber coming */ 29% {transform:translate(calc(var(--pdx) + 0.961em),0) rotate(10deg) scale(.92,1.06)} /* SHOVED */ 30.5% {transform:translate(calc(var(--pdx) + 0.549em),0) rotate(5deg) scale(1.01,1)} 32% {transform:translate(calc(var(--pdx) - 0.412em),0) rotate(-9deg) scale(1.13,.92)} /* shoves back */ 33.5% {transform:translate(calc(var(--pdx) + 0.343em),0) rotate(3deg) scale(.97,1.03)} 35%,37%{transform:translate(calc(var(--pdx) + 0.069em),0) rotate(0deg) scale(1,1)} /* the glare — a held beat makes the flurry land */ 38.2% {transform:translate(calc(var(--pdx) - 0.275em),0) rotate(-7deg) scale(1.09,.95)} 39.2% {transform:translate(calc(var(--pdx) + 0.481em),0) rotate(6deg) scale(.95,1.04)} 40.2% {transform:translate(calc(var(--pdx) - 0.137em),0) rotate(-4deg) scale(1.05,.97)} 41.5% {transform:translate(var(--pdx),0) rotate(0deg) scale(1,1)} 44% {transform:translate(var(--pdx),0) rotate(0deg) scale(1.24,.76)} /* crouch home */ 45.5% {transform:translate(calc(var(--pdx) * .8),-0.309em) rotate(5deg) scale(.89,1.16)} 48% {transform:translate(calc(var(--pdx) * .4),-0.352em) rotate(3deg) scale(.92,1.12)} 50.5% {transform:translate(0,0) rotate(0deg) scale(1.34,.70)} /* land */ 52% {transform:translate(0,-0.226em) rotate(0deg) scale(.96,1.06)} 53.5% {transform:translate(0,0) rotate(0deg) scale(1.02,.99)} 55%,100%{transform:translate(0,0) rotate(0deg) scale(1,1)}} /* AMBER — flinches before the hit lands (it sees it coming), takes the fall, tries to get up too early and flops back, then comes back swinging harder. */ @keyframes pp-p2-story{ 0%,9.5%{transform:translate(0,0) rotate(0deg) scale(1,1)} 10.6% {transform:translate(-0.137em,0) rotate(-7deg) scale(.97,1.04)} /* flinch */ 12.2% {transform:translate(calc(var(--pdx) * -.24),-0.264em) rotate(-32deg) scale(1.1,.9)} /* STRUCK */ 13.6% {transform:translate(calc(var(--pdx) * -.6),-0.352em) rotate(-64deg) scale(1,1)} /* tumbling */ 15.2% {transform:translate(calc(var(--pdx) * -.88),0.088em) rotate(-93deg) scale(1.24,.78)} /* hits the deck */ 16.2% {transform:translate(calc(var(--pdx) * -.95),-0.044em) rotate(-87deg) scale(.95,1.05)} /* bounces off it */ 17.5%,20%{transform:translate(calc(var(--pdx) * -.95),0.088em) rotate(-90deg) scale(1,1)} /* flat out */ 21.5% {transform:translate(calc(var(--pdx) * -.95),0.088em) rotate(-71deg) scale(1,1)} /* false start */ 22.6% {transform:translate(calc(var(--pdx) * -.95),0.088em) rotate(-87deg) scale(1.04,.97)} /* flops back */ 24.2% {transform:translate(calc(var(--pdx) * -.95),0.088em) rotate(-54deg) scale(1,1)} /* up for real */ 25.6% {transform:translate(calc(var(--pdx) * -.95),0) rotate(-20deg) scale(1,1)} 27% {transform:translate(calc(var(--pdx) * -.95),0) rotate(12deg) scale(.92,1.1)} /* overshoots vertical */ 28.2% {transform:translate(calc(var(--pdx) * -.95),0) rotate(-3deg) scale(1.03,.98)} 29% {transform:translate(calc(var(--pdx) * -1 + 1.03em),0) rotate(12deg) scale(1.15,.91)} /* SHOVES */ 30.8% {transform:translate(calc(var(--pdx) * -1 + 0.275em),0) rotate(-3deg) scale(.98,1.02)} 32% {transform:translate(calc(var(--pdx) * -1 - 0.343em),0) rotate(-10deg) scale(.93,1.06)} /* takes one back */ 33.5% {transform:translate(calc(var(--pdx) * -1 + 0.412em),0) rotate(6deg) scale(1.02,.99)} 35%,37%{transform:translate(calc(var(--pdx) * -1 + 0.069em),0) rotate(0deg) scale(1,1)} /* the glare */ 38.2% {transform:translate(calc(var(--pdx) * -1 + 0.549em),0) rotate(8deg) scale(1.06,.96)} 39.2% {transform:translate(calc(var(--pdx) * -1 - 0.206em),0) rotate(-5deg) scale(.96,1.03)} 40.2% {transform:translate(calc(var(--pdx) * -1 + 0.343em),0) rotate(4deg) scale(1.03,.98)} 41.5% {transform:translate(calc(var(--pdx) * -.95),0) rotate(0deg) scale(1,1)} 45% {transform:translate(calc(var(--pdx) * -.95),0) rotate(0deg) scale(1.24,.76)} /* crouch home */ 46.5% {transform:translate(calc(var(--pdx) * -.75),-0.309em) rotate(-5deg) scale(.89,1.16)} 49% {transform:translate(calc(var(--pdx) * -.35),-0.352em) rotate(-3deg) scale(.92,1.12)} 51.5% {transform:translate(0,0) rotate(0deg) scale(1.34,.70)} /* land */ 53% {transform:translate(0,-0.226em) rotate(0deg) scale(.96,1.06)} 54.5% {transform:translate(0,0) rotate(0deg) scale(1.02,.99)} 56%,100%{transform:translate(0,0) rotate(0deg) scale(1,1)}} /* The wake. The travelling P is moving fast enough to knock the letters it passes, so each one gets shoved aside IN THE DIRECTION OF TRAVEL and snaps back behind it — not one uniform thud on impact. The 70ms-per-letter stagger is what turns a block-move into a ripple: blue crosses a-b-l-o-s in roughly 450ms, so at 70ms apart each letter is hit as the P actually reaches it. Outbound shoves right (blue, left-to-right); the tumble-back shoves left (amber, right-to-left). */ .pp-ltr:not(.pp-p){animation:pp-ltr-wake 9s var(--ease) infinite;animation-delay:calc(var(--i) * 70ms)} @keyframes pp-ltr-wake{ 0%,7% {transform:translate(0,0) rotate(0deg) scale(1,1)} 8.2% {transform:translate(0.151em,-0.135em) rotate(2.5deg) scale(.97,1.03)} /* blue blows past */ 9.6% {transform:translate(-0.055em,0.045em) rotate(-1deg) scale(1.02,.98)} /* snaps back */ 11% {transform:translate(0.021em,0) rotate(.3deg) scale(1,1)} 12.3% {transform:translate(0,0.147em) rotate(0deg) scale(1.04,.96)} /* the hit lands */ 13.6% {transform:translate(-0.137em,-0.114em) rotate(-2deg) scale(.98,1.02)} /* amber tumbles back through */ 15.2% {transform:translate(0.048em,0.035em) rotate(.8deg) scale(1.01,.99)} 16.6% {transform:translate(-0.021em,0) rotate(0deg) scale(1,1)} 18%,44% {transform:translate(0,0) rotate(0deg) scale(1,1)} 46.5% {transform:translate(-0.124em,-0.114em) rotate(-2deg) scale(.98,1.02)} /* both hop home through them */ 48.5% {transform:translate(0.048em,0.035em) rotate(.8deg) scale(1.01,.99)} 50.5% {transform:translate(0,0.091em) rotate(0deg) scale(1.02,.98)} 52%,100%{transform:translate(0,0) rotate(0deg) scale(1,1)}} .pp-nav{display:flex;align-items:center;gap:2px;flex-wrap:nowrap} /* Tightened to buy horizontal room for the wordmark. min-height stays at 40px: that is the tap-target floor, and shrinking it would break thumb accuracy on mobile even though the labels would still fit. */ .pp-nav a{padding:8px 7px;color:var(--ink);font-weight:500;font-size:.92rem;border-radius:var(--r-sm);display:inline-flex;align-items:center;min-height:40px;white-space:nowrap;transition:background .2s var(--ease),color .2s var(--ease)} .pp-nav a:hover,.pp-nav a[aria-current="page"]{background:var(--amber-soft);color:var(--navy)} /* ---------- "Liquid Amber" CTA — the 2026 glass-gleam Book Now button ---------- Solid amber base with a glassy top-highlight (inset white line) instead of a flat fill, plus a diagonal light sweep (::before) that drifts across on a slow loop and speeds up on hover, alongside a real color shift to a richer amber shade — so hover reads as both a shine AND a shade change, not just an animation. z-index keeps the label text above the sweep. */ /* Same treatment, smaller: gradient, pill radius, gleam and shadow all unchanged — only the type size, padding and shadow spread are scaled down. */ .pp-nav-cta{position:relative;overflow:hidden;background:linear-gradient(180deg,var(--amber-hi) 0%,var(--amber) 60%,#d68a06 100%);border-radius:999px;font-weight:700;font-size:.8rem;padding:7px 15px;margin-left:6px;box-shadow:0 5px 13px -6px rgba(232,156,12,.8),inset 0 1px 0 rgba(255,255,255,.5);transition:background .3s var(--ease),box-shadow .3s var(--ease),transform .2s var(--ease)} .pp-nav-cta::before{content:"";position:absolute;top:0;left:-60%;width:40%;height:100%;z-index:1;background:linear-gradient(120deg,transparent 0%,rgba(255,255,255,.55) 50%,transparent 100%);transform:skewX(-20deg);animation:pp-gleam 3.2s ease-in-out infinite} .pp-nav-cta:hover{background:linear-gradient(180deg,#ffcf6b 0%,var(--amber-hi) 60%,var(--amber) 100%);transform:translateY(-1px);box-shadow:0 10px 22px -8px rgba(232,156,12,.9),inset 0 1px 0 rgba(255,255,255,.6)} .pp-nav-cta:hover::before{animation-duration:1.1s} @keyframes pp-gleam{0%{left:-60%}55%,100%{left:130%}} /* WP's own global-styles utility class .has-ink-color ships with !important (theme.json preset support), and the nav block carries that class — it was silently forcing navy text onto this amber "Book Now" pill, making it read as inverted/wrong-contrast. Matched with !important here, same exception pattern as the .has-*-font-size overrides elsewhere in this file. Also pinned to z-index:2 so the label always sits above the gleam sweep. */ .pp-nav-cta a.wp-block-navigation-item__content{position:relative;z-index:2;color:var(--amber-ink) !important} /* ---------- Header icon buttons (account + cart) — a little TLC ---------- Matches the existing .pp-nav a:hover treatment (amber-soft pill + lift) so the account/cart icons read as part of the same header system instead of bare, unstyled default icons. */ .pp-header .wc-block-customer-account__link, .pp-header .wc-block-mini-cart__button{border-radius:999px;padding:9px;color:var(--navy);transition:background .2s var(--ease),color .2s var(--ease),transform .2s var(--ease)} .pp-header .wc-block-customer-account__link:hover, .pp-header .wc-block-mini-cart__button:hover{background:var(--amber-soft);color:var(--amber-deep);transform:translateY(-1px)} .pp-finstrip{background:var(--amber-soft);border-bottom:1px solid var(--callout-amber-border);color:#5a4409;font-size:.95rem;text-align:center;padding:10px 24px} .pp-finstrip a{color:#96650a;text-decoration:underline} /* ============================================================ HERO — copy left, animated service van right ============================================================ */ .hero{background:var(--surface-dark-deep);color:#eaf0f6;padding:84px 0 76px;overflow:hidden} .hero .wrap{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(340px,100%),1fr));gap:44px;align-items:center} .hero-copy{display:flex;flex-direction:column;gap:22px;align-items:flex-start} .hero-badge{display:inline-flex;align-items:center;gap:8px;background:rgba(232,156,12,.12);border:1px solid rgba(232,156,12,.35);color:var(--amber-deep);font-size:.8rem;font-weight:600;letter-spacing:.14em;text-transform:uppercase;padding:7px 14px;border-radius:999px} /* the one place the gradient fill survives from v5 — static, hero only */ .hero h1{max-width:16ch;margin:0;background:linear-gradient(96deg,#fff 0%,#ffd88a 55%,var(--amber) 100%);-webkit-background-clip:text;background-clip:text;color:transparent;padding-bottom:4px} .hero .tag{font-size:1.15rem;line-height:1.6;max-width:52ch;color:#adbecd;text-wrap:pretty;margin:0} .hero-actions{display:flex;flex-wrap:wrap;gap:12px} .hero-trust{display:flex;flex-wrap:wrap;gap:14px;color:#8ba0b4;font-size:.9rem} .hero-quote{margin:6px 0 0;padding-left:18px;border-left:2px solid var(--amber);max-width:52ch;font-size:1.05rem;line-height:1.5;color:var(--muted-dark);font-style:italic} .hero-quote cite{display:block;margin-top:9px;font-style:normal;font-size:.82rem;letter-spacing:.14em;text-transform:uppercase;color:#6f849a} .pp-van{display:flex;flex-direction:column;align-items:center;gap:12px;animation:pp-drive 1.4s var(--ease) both} [data-pp-van],[data-pp-tow]{display:block;width:100%} [data-pp-tow]{max-width:150px;flex:none} .pp-van svg{width:100%;max-width:470px;height:auto;display:block;animation:pp-bob 2.4s ease-in-out 1.4s infinite} .pp-van figcaption{font-family:var(--font-head);font-size:.76rem;letter-spacing:.2em;text-transform:uppercase;color:#7b90a5} .pp-van .pp-wheel{transform-box:fill-box;transform-origin:center;animation:pp-spin 1.1s linear infinite} .pp-van .pp-road{animation:pp-dash 1.4s linear infinite} @keyframes pp-drive{from{transform:translateX(150%);opacity:0}to{transform:translateX(0);opacity:1}} @keyframes pp-bob{0%,100%{transform:translateY(0)}50%{transform:translateY(-4px)}} @keyframes pp-spin{to{transform:rotate(360deg)}} @keyframes pp-dash{to{stroke-dashoffset:-132}} @keyframes pp-feed{0%{transform:translateX(0) scale(1);opacity:0}15%{opacity:1}70%{transform:translateX(24px);opacity:1}100%{transform:translateX(30px) scale(.2);opacity:0}} /* ---------- hero photo (2026-08-23: static photo replaces the animated van) ---------- */ .hero-photo{position:relative;justify-self:center;width:100%;max-width:460px;aspect-ratio:5/6;max-height:540px;border-radius:18px;overflow:hidden;border:1px solid rgba(255,255,255,.12);box-shadow:0 30px 70px -30px rgba(0,0,0,.8);background:#16324a} .hero-photo img{display:block;width:100%;height:100%;object-fit:cover;object-position:center 32%} .hero-stars{display:inline-flex;align-items:center;gap:11px;text-decoration:none} .hero-stars .g{color:var(--amber);font-size:1.1rem;letter-spacing:.18em} .hero-stars .txt{font-size:.9rem;color:#8ba0b4} .hero-stars .txt b{color:#ffd88a} .hero-stars:hover .txt b{color:#ffe9b0} /* ---------- new-customer offer band ---------- */ .offer{background:var(--surface-dark);border-left:4px solid var(--amber);border-radius:var(--r);padding:24px 28px;display:flex;flex-wrap:wrap;gap:20px;align-items:center;justify-content:space-between;box-shadow:0 18px 40px -18px rgba(18,36,55,.45);transform:translateY(-30px)} .offer .tagline{color:#cfdae5;font-size:1.02rem;line-height:1.55;max-width:76ch;margin:0;text-wrap:pretty} .offer .tagline b{color:var(--amber-deep)} .offer .tagline b.white{color:#fff} .offer a.underline{color:#ffd88a;text-decoration:underline} /* ============================================================ SERVICE CARDS — one hover contract ============================================================ */ .cards{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(300px,100%),1fr));gap:20px} .scard{background:var(--card);border:1px solid var(--line);border-left:4px solid var(--amber);border-radius:var(--r);padding:26px;display:flex;flex-direction:column;gap:13px;color:var(--amber-deep); transition:border-color .18s var(--ease),color .18s var(--ease),transform .18s var(--ease),box-shadow .18s var(--ease)} .scard:hover{border-color:var(--amber);color:var(--amber-deep);transform:translateY(-3px);box-shadow:var(--shadow-lg)} .scard-top{display:flex;align-items:center;justify-content:space-between;gap:12px} .svc-icon{width:46px;height:46px;border-radius:12px;background:var(--amber-soft);display:flex;align-items:center;justify-content:center;color:inherit;transition:color .18s var(--ease)} .scard h3{font-size:1.35rem;color:var(--navy);margin:0} .scard p{color:var(--muted);line-height:1.6;flex:1;font-size:1rem;margin:0;text-wrap:pretty} /* price chip — each service reads as a bookable product */ .price{background:var(--callout-amber);border:1px solid var(--line);border-radius:999px;padding:6px 12px;font-family:var(--font-head);font-size:.78rem;font-weight:600;color:var(--navy);white-space:nowrap} .scard .row{display:flex;gap:16px;align-items:center;padding-top:12px;border-top:1px solid #eeebe4} .scard .row .quote{font-weight:600;color:var(--amber-deep)} .scard .row .more{color:var(--muted)} /* ---------- fleet block ---------- */ .fleet{margin-top:34px;background:var(--surface-dark);border-radius:var(--r-lg);padding:clamp(24px,3vw,38px);display:grid;grid-template-columns:repeat(auto-fit,minmax(min(300px,100%),1fr));gap:30px;align-items:center;color:#eaf0f6} .fleet h3{font-size:clamp(1.5rem,2.8vw,2.1rem);font-weight:700;color:#fff} .fleet p{color:#b8c6d3;line-height:1.6;max-width:56ch;text-wrap:pretty} .fleet .kicker{color:var(--amber-deep)} .fleet-points{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(150px,100%),1fr));gap:12px} .fleet-points div{border-left:2px solid var(--amber);padding-left:12px} .fleet-points b{display:block;font-family:var(--font-head);font-size:.92rem;font-weight:600;color:#fff} .fleet-points span{color:var(--muted-dark);font-size:.88rem;line-height:1.45} .fleet-cta{display:flex;flex-direction:column;gap:13px;background:var(--surface-dark-deep);border-left:4px solid var(--amber);border-radius:var(--r);padding:26px} .fleet-cta .lead{color:#fff;font-size:1.08rem;line-height:1.5;font-weight:600;margin:0} .fleet-cta p{color:var(--muted-dark);font-size:.95rem;margin:0} .fleet-cta .btn.navy{border-color:#3c5670;background:transparent;color:#eaf0f6} .fleet-cta .btn.navy:hover{background:#17304a} .fleet-cta .fine{color:#a3b4c4;font-size:.8rem} /* ---------- stats ---------- */ .stats{background:var(--surface-dark);color:#eaf0f6;padding:56px 0} .stats .wrap{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(180px,100%),1fr));gap:28px;text-align:center} .stats .num{font-family:var(--font-head);font-size:3.2rem;line-height:1;font-weight:800;color:var(--amber)} .stats .lbl{margin-top:8px;font-size:.8rem;letter-spacing:.14em;text-transform:uppercase;color:var(--muted-dark)} /* ---------- meet pablo ---------- */ .meet-pablo .wrap{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(300px,100%),1fr));gap:48px;align-items:center} .mp-photo{position:relative} .mp-photo::after{content:"";position:absolute;inset:16px -16px -16px 16px;border:2px solid var(--amber);border-radius:var(--r)} .mp-photo img{position:relative;z-index:1;width:100%;aspect-ratio:4/3;object-fit:cover;object-position:50% 14%;border-radius:var(--r);box-shadow:0 18px 40px -18px rgba(18,36,55,.4)} .mp-text{display:flex;flex-direction:column;gap:15px;align-items:flex-start} .chips{display:flex;flex-wrap:wrap;gap:8px;list-style:none;margin:0;padding:0} .chips li{background:var(--card);border:1px solid var(--line);border-radius:999px;padding:8px 15px;font-size:.88rem;color:#3f4f5e} /* ---------- service price menu ---------- */ .estimate{background:var(--card);border:1px solid var(--line);border-left:4px solid var(--amber);border-radius:var(--r-lg);padding:clamp(22px,3vw,34px);box-shadow:var(--shadow)} .est-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(320px,100%),1fr));gap:0 40px} .est-row{display:flex;align-items:baseline;gap:10px;padding:11px 0;border-bottom:1px dashed var(--line)} .est-row .svc{color:var(--ink);font-size:1rem} .est-row .dots{flex:1;border-bottom:1px dotted var(--dotted);transform:translateY(-4px)} .est-row .price{background:none;border:0;padding:0;font-family:var(--font-head);font-weight:600;color:var(--navy)} .est-note{margin:20px 0 0;color:var(--muted);font-size:.88rem;line-height:1.6;border-top:1px solid #eeebe4;padding-top:16px;text-wrap:pretty} /* ============================================================ BOOKING STEPS + SERVICE-AREA MAP (side by side) ============================================================ */ .areas{background:var(--surface-dark-deep);color:#eaf0f6;padding:76px 0 60px} .areas .wrap{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(320px,100%),1fr));gap:48px} .areas .kicker{color:var(--amber-deep)} .areas h2{color:#fff} .areas p{color:var(--muted-dark)} .steps-col{position:sticky;top:96px;display:flex;flex-direction:column;gap:14px} .step{background:var(--surface-dark);border:1px solid var(--navy-line);border-radius:var(--r);padding:22px 24px;display:flex;flex-direction:column;gap:8px;color:#3f5c78; transition:border-color .18s var(--ease),color .18s var(--ease),transform .18s var(--ease),box-shadow .18s var(--ease)} .step:hover{border-color:var(--amber);color:var(--amber);transform:translateY(-3px);box-shadow:0 16px 30px -16px rgba(0,0,0,.6)} .step .n{font-family:var(--font-head);font-size:1.9rem;line-height:1;font-weight:800;color:inherit} .step h3{font-size:1.3rem;color:#fff;margin:0} .step p{color:var(--muted-dark);line-height:1.55;font-size:.97rem;margin:0} .metro-scroll{position:relative;height:508px;width:100%;max-width:571px} .metro-stage{position:sticky;top:96px;height:500px;background:#122b42;border:1px solid var(--navy-line);border-radius:var(--r);overflow:hidden;display:flex;flex-direction:column} .metro-head,.metro-foot{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:13px 18px;background:var(--surface-dark)} .metro-head{border-bottom:1px solid #1d3450} .metro-foot{border-top:1px solid #1d3450;padding:12px 18px} .metro-head span,.metro-foot span{font-family:var(--font-head);font-size:.72rem;letter-spacing:.2em;text-transform:uppercase;color:#4f6478} .metro-status{font-family:var(--font-head);font-size:.88rem;font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:var(--amber-deep);margin:0;white-space:nowrap} .metro-map{position:relative;flex:1;min-height:0;padding:16px;overflow:hidden} .metro-map svg{width:100%;height:100%;display:block;overflow:hidden} .metro-bar{flex:1;height:2px;background:var(--navy-line);border-radius:2px;overflow:hidden} .metro-bar i{display:block;height:100%;width:0;background:var(--amber)} /* ---------- reviews ---------- */ .grid4{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(280px,100%),1fr));gap:20px} .rcard{background:var(--card);border:1px solid var(--line);border-left:4px solid var(--amber);border-radius:var(--r);padding:26px;display:flex;flex-direction:column;gap:12px} .rcard p{margin:0;color:var(--muted);line-height:1.6;text-wrap:pretty} .rcard .who{font-weight:600;color:var(--navy);font-size:.95rem} .rcard .stars{color:var(--amber);font-size:1.05rem;letter-spacing:3px} .placeholder-tag{align-self:flex-start;background:var(--amber-soft);color:#96650a;font-size:.68rem;letter-spacing:.12em;text-transform:uppercase;font-weight:700;padding:5px 10px;border-radius:999px} /* ---------- FAQ ---------- */ details{background:var(--card);border:1px solid var(--line);border-left:4px solid var(--amber);border-radius:12px;padding:18px 22px;margin-bottom:10px} details summary{font-family:var(--font-head);font-size:1.12rem;font-weight:600;color:var(--navy);cursor:pointer;list-style:none} details summary::-webkit-details-marker{display:none} details p{color:var(--muted);line-height:1.6;margin:10px 0 0} /* ---------- closing CTA ---------- */ .cta-band{background:var(--amber);color:var(--amber-ink);padding:64px 0} .cta-band .wrap{display:flex;flex-wrap:wrap;gap:26px;align-items:center;justify-content:space-between} .cta-band h2{color:var(--amber-ink);font-weight:800;margin:0} .cta-band p{font-size:1.05rem;color:#5a4409;margin:6px 0 0} .cta-lead{display:flex;align-items:center;gap:18px;flex-wrap:wrap} .cta-band .tow{width:150px;flex:none} .cta-band .tow .pp-bill{animation:pp-feed 2.4s ease-in infinite} .cta-band .tow .pp-bill.b2{animation-delay:.9s} .cta-band .tow .pp-body{animation:pp-bob 2.6s ease-in-out infinite} /* ============================================================ FOOTER ============================================================ */ .pp-footer{background:var(--surface-dark-deep);color:#b8c6d3;padding:60px 0 28px} /* 220px min fitted four columns; the Tools column makes five, so the floor drops to 190px to keep them on one row at full width. auto-fit still collapses them gracefully below that. */ .pp-footer .cols{max-width:1180px;margin:0 auto;padding:0 24px;display:grid;grid-template-columns:repeat(auto-fit,minmax(min(190px,100%),1fr));gap:30px} .pp-footer h3{color:#fff;font-size:1.05rem;font-weight:700;letter-spacing:.06em;text-transform:uppercase} /* Same navy→amber gradient text-fill as the hero h1, scaled down for the footer brand heading — a small brand-consistency touch, not structural. */ .pp-footer .cols>div:first-child h3{background:linear-gradient(96deg,#fff 0%,#ffd88a 55%,var(--amber) 100%);-webkit-background-clip:text;background-clip:text;color:transparent;font-size:1.18rem;letter-spacing:-.01em;text-transform:none;font-weight:700} .pp-footer p{font-size:.95rem;line-height:1.6;color:var(--muted-dark);text-wrap:pretty} .pp-footer ul{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:7px;font-size:.95rem} .pp-footer a{color:#b8c6d3} .pp-footer a:hover{color:var(--amber)} .pp-footer .pp-pay-icons{list-style:none;display:flex;flex-direction:row;flex-wrap:wrap;gap:7px;margin-top:6px} .pp-pay-icons__icon{width:38px;height:26px;border-radius:4px;overflow:hidden;box-shadow:0 1px 3px rgba(0,0,0,.35)} .pp-pay-icons__icon svg{width:100%;height:100%;display:block} .pp-pay-es{display:block;margin-top:8px;color:var(--muted-dark);font-size:.9rem} .pp-footer .legal{max-width:1180px;margin:26px auto 0;padding:18px 24px 0;border-top:1px solid #1d3450;color:#8ea3b8;font-size:.83rem;line-height:1.6;text-wrap:pretty} /* floating click-to-call — the site's primary conversion, on every page */ .float-call{position:fixed;right:18px;bottom:18px;z-index:80;display:inline-flex;align-items:center;gap:9px;background:var(--amber);color:var(--amber-ink);font-family:var(--font-head);font-weight:700;font-size:1rem;padding:14px 20px;border-radius:999px;box-shadow:0 14px 30px -10px rgba(0,0,0,.55);transition:background .2s var(--ease),transform .2s var(--ease)} .float-call:hover{background:var(--amber-hi);color:var(--amber-ink);transform:translateY(-2px)} /* ---------- contact head: hood-up teardown illustration ---------- */ .page-head.with-art .wrap{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(320px,100%),1fr));gap:40px;align-items:center} .pp-teardown{width:100%;max-width:480px;justify-self:end} .pp-teardown .pp-ping{transform-box:fill-box;transform-origin:center} .pp-teardown svg{width:100%;height:auto;display:block} .pp-teardown.has-photo{position:relative} .pp-teardown.has-photo img{width:100%;height:auto;display:block;border-radius:var(--r);box-shadow:0 20px 44px -20px rgba(0,0,0,.6)} .pp-teardown.has-photo::after{content:"";position:absolute;inset:14px -14px -14px 14px;border:2px solid var(--amber);border-radius:var(--r);z-index:-1} .pp-teardown .pp-line{stroke-dasharray:1400;stroke-dashoffset:1400;animation:pp-draw 2.2s var(--ease) forwards} .pp-teardown circle.pp-line{stroke-dasharray:240;stroke-dashoffset:240;animation:pp-draw 1.4s var(--ease) .5s forwards} .pp-teardown .pp-scanbar{animation:pp-sweep 4.4s cubic-bezier(.5,0,.5,1) 1.4s infinite} .pp-teardown .pp-scanline{animation:pp-sweepline 4.4s cubic-bezier(.5,0,.5,1) 1.4s infinite} .pp-teardown .pp-hot{opacity:0;animation:pp-pop 4.4s ease-out 1.4s infinite} .pp-teardown .pp-hot.h2{animation-delay:1.9s} .pp-teardown .pp-hot.h3{animation-delay:2.5s} .pp-teardown .pp-hot.h4{animation-delay:3.1s} .pp-teardown .pp-ping{animation:pp-ping 1.8s ease-out infinite} .pp-teardown .pp-blink{animation:pp-lamp 1.2s steps(2,end) infinite} @keyframes pp-draw{to{stroke-dashoffset:0}} @keyframes pp-sweep{0%{transform:translateX(0)}70%,100%{transform:translateX(570px)}} @keyframes pp-sweepline{0%{transform:translateX(0);opacity:1}70%{transform:translateX(480px);opacity:1}71%,100%{opacity:0}} @keyframes pp-pop{0%,8%{opacity:0;transform:translateY(4px)}16%,88%{opacity:1;transform:translateY(0)}100%{opacity:0}} @keyframes pp-ping{0%{transform:scale(1);opacity:.9}100%{transform:scale(3.2);opacity:0}} @keyframes pp-lamp{0%,100%{opacity:1}50%{opacity:.25}} /* ---------- responsive ---------- */ @media (max-width:900px){ .pp-teardown{justify-self:center;max-width:420px} section{padding:56px 0} .steps-col,.metro-stage{position:static} .metro-scroll{height:auto} .metro-stage{height:440px} } @media (max-width:768px){ .pp-nav{flex-wrap:wrap} .offer{transform:none;margin-top:-30px} .float-call{right:12px;bottom:12px;padding:13px 18px} } /* ============================================================ INNER PAGES — page head, panels, checklists, price callout, related cards, contact + intake form, vehicle fields, legal ============================================================ */ .page-head{background:var(--surface-dark-deep);color:#eaf0f6;padding:72px 0 64px} .page-head h1{color:#fff;max-width:20ch;margin:0 0 .4em} .page-head p{color:#adbecd;font-size:1.12rem;line-height:1.6;max-width:60ch;margin:0 0 22px;text-wrap:pretty} .page-head .kicker{color:var(--amber-hi)} .page-head .btn.navy{background:transparent;border-color:#3c5670;color:#eaf0f6} .page-head .btn.navy:hover{background:#17304a} .content{padding:64px 0} .split{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(320px,100%),1fr));gap:24px;align-items:start} .panel{background:var(--card);border:1px solid var(--line);border-left:4px solid var(--amber);border-radius:var(--r-lg);padding:clamp(22px,3vw,32px)} .panel.alt{background:var(--amber-soft);border-color:var(--callout-amber-border)} .panel h2{font-size:clamp(1.4rem,2.6vw,1.9rem);margin-bottom:.6em} .panel p{color:var(--muted);text-wrap:pretty} .checklist{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:11px} .checklist li{position:relative;padding-left:30px;color:var(--ink);line-height:1.55} .checklist li::before{content:"";position:absolute;left:0;top:.42em;width:16px;height:16px;border-radius:50%;background:var(--amber);box-shadow:inset 0 0 0 4px var(--card)} .checklist.warn li::before{background:var(--surface-dark);box-shadow:inset 0 0 0 4px var(--amber-soft)} .price-callout{margin-top:32px;background:var(--surface-dark);color:#eaf0f6;border-left:4px solid var(--amber);border-radius:var(--r-lg);padding:clamp(24px,3vw,34px);display:flex;flex-wrap:wrap;gap:24px;align-items:center;justify-content:space-between} .price-callout .kicker{color:var(--amber-hi)} .price-callout .big{font-family:var(--font-head);font-size:clamp(1.6rem,3vw,2.3rem);font-weight:800;color:#fff;margin:0 0 .3em} .price-callout .muted{color:var(--muted-dark);max-width:62ch;margin:0;font-size:.97rem;text-wrap:pretty} .steps-row{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(260px,100%),1fr));gap:18px;margin-top:32px} .step.light{background:var(--card);border-color:var(--line);color:#c9cfd6} .step.light h3{color:var(--navy)} .step.light p{color:var(--muted)} .step.light:hover{border-color:var(--amber);color:var(--amber);box-shadow:var(--shadow-lg)} .faq-wrap{max-width:820px;margin:22px auto 0} .rel-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(240px,100%),1fr));gap:16px;margin-top:22px} .rel-card{display:flex;flex-direction:column;gap:6px;background:var(--card);border:1px solid var(--line);border-left:4px solid var(--amber);border-radius:var(--r);padding:20px 22px;transition:border-color .18s var(--ease),transform .18s var(--ease),box-shadow .18s var(--ease)} .rel-card b{font-family:var(--font-head);font-size:1.08rem;color:var(--navy)} .rel-card span{color:var(--muted);font-size:.93rem} .rel-card:hover{border-color:var(--amber);transform:translateY(-3px);box-shadow:var(--shadow-lg)} /* ---------- contact + intake ---------- */ .contact-quick{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(220px,100%),1fr));gap:14px;margin-bottom:30px} .contact-card{display:flex;align-items:center;gap:14px;background:var(--card);border:1px solid var(--line);border-left:4px solid var(--amber);border-radius:var(--r);padding:16px 18px;transition:border-color .18s var(--ease),transform .18s var(--ease)} .contact-card:hover{border-color:var(--amber);transform:translateY(-2px)} .cc-icon{width:40px;height:40px;flex:none;border-radius:11px;background:var(--amber-soft);color:var(--amber-deep);display:flex;align-items:center;justify-content:center} .contact-card h3{font-size:.95rem;margin:0 0 2px;color:var(--navy)} .contact-card p{margin:0;color:var(--muted);font-size:.95rem} .contact-form{background:var(--card);border:1px solid var(--line);border-left:4px solid var(--amber);border-radius:var(--r-lg);padding:clamp(24px,3.4vw,40px);box-shadow:var(--shadow)} .contact-form h2{margin-bottom:.3em} .book{display:flex;flex-direction:column;gap:16px} .book label{display:flex;flex-direction:column;gap:6px;font-weight:600;color:var(--navy);font-size:.95rem} .book input,.book select,.book textarea,.input{font-family:var(--font-body);font-size:1rem;font-weight:400;color:var(--ink);background:var(--input-bg);border:1px solid var(--input-border);border-radius:var(--r-sm);padding:12px 14px;width:100%;transition:border-color .18s var(--ease),box-shadow .18s var(--ease)} .book input:focus,.book select:focus,.book textarea:focus,.input:focus{border-color:var(--amber);box-shadow:0 0 0 3px rgba(232,156,12,.18);outline:none} .book textarea{resize:vertical} .book .checkbox{flex-direction:row;align-items:center;gap:10px;font-weight:400;color:var(--ink)} .book .checkbox input{width:auto} .book .btn{align-self:flex-start} .form-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(240px,100%),1fr));gap:16px;align-items:stretch} .form-grid>label{justify-content:space-between} /* Invalid fields get a red edge as well as the message, so the highlight is visible the moment the page scrolls to them. */ .book .invalid input,.book .invalid select,.book .invalid textarea, .pp-veh .field.invalid .input{ border-color:var(--bad);box-shadow:0 0 0 3px rgba(192,57,43,.13)} /* Count of outstanding fields, shown next to the submit button. */ .pp-form-summary{ margin:0 0 4px;color:var(--bad);font-weight:600;font-size:.92rem} .pp-form-summary[hidden]{display:none} .pp-required{color:var(--bad)} .pp-error{display:none;color:var(--bad);font-weight:500;font-size:.85rem} .book .invalid .pp-error{display:inline} .pp-honeypot{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden} .pp-form-status{margin-top:14px;font-weight:600;color:var(--navy)} .fine{font-size:.85rem;font-weight:400} /* address block (contact form) — styled to match the vehicle fieldset below */ .pp-address-fieldset{border:1px solid var(--line);border-radius:var(--r);padding:20px 22px;margin:4px 0;display:flex;flex-direction:column;gap:14px} .pp-address-fieldset legend{font-family:var(--font-head);font-weight:600;color:var(--navy);padding:0 8px} .pp-address-fieldset>.muted{font-size:.92rem;margin:0;text-wrap:pretty} /* vehicle fields (assets/pp-vehicle.js renders into [data-pp-vehicles]) */ .pp-veh-fieldset{border:1px solid var(--line);border-radius:var(--r);padding:20px 22px;margin:4px 0;display:flex;flex-direction:column;gap:14px} .pp-veh-fieldset legend{font-family:var(--font-head);font-weight:600;color:var(--navy);padding:0 8px} .pp-veh-fieldset>.muted{font-size:.92rem;margin:0;text-wrap:pretty} .pp-veh-rows{display:flex;flex-direction:column;gap:16px} .pp-veh{background:var(--callout-soft);border:1px solid var(--line);border-left:4px solid var(--amber);border-radius:var(--r);padding:16px 18px;display:flex;flex-direction:column;gap:12px} .pp-veh-head{display:flex;align-items:center;justify-content:space-between;gap:12px} .pp-veh-label{font-family:var(--font-head);font-size:.78rem;letter-spacing:.16em;text-transform:uppercase;color:var(--amber-deep)} .pp-veh-remove{background:none;border:0;color:var(--muted);font:inherit;font-size:.85rem;cursor:pointer;text-decoration:underline} .pp-veh-remove:hover{color:var(--bad)} .pp-veh-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(170px,100%),1fr));gap:13px} .pp-veh .field{display:flex;flex-direction:column;gap:6px} /* These two set an explicit display, which beats the UA rule for [hidden] and left elements on screen that JS had already marked hidden. Both need saying again at higher specificity. */ .pp-veh-grid[hidden]{display:none} .pp-veh .field[hidden]{display:none} .pp-veh label{font-weight:600;color:var(--navy);font-size:.88rem} .pp-combo{position:relative} .pp-opts{position:absolute;z-index:20;top:100%;left:0;right:0;margin-top:4px;max-height:230px;overflow:auto;background:var(--input-bg);border:1px solid var(--line);border-radius:var(--r-sm);box-shadow:0 18px 34px -18px rgba(18,36,55,.45);display:flex;flex-direction:column} .pp-opt{text-align:left;background:none;border:0;padding:10px 13px;font:inherit;font-size:.95rem;color:var(--ink);cursor:pointer} .pp-opt:hover,.pp-opt.is-active{background:var(--amber-soft)} .pp-veh-msg{margin:0;font-size:.85rem;color:var(--muted);min-height:1px} .pp-veh-msg.ok{color:var(--good)} .pp-veh-msg.warn{color:#b3541e} .pp-veh-add{align-self:flex-start;background:var(--amber-soft);border:1px solid var(--callout-amber-border);color:#96650a;font-family:var(--font-head);font-weight:600;font-size:.92rem;padding:10px 16px;border-radius:999px;cursor:pointer;transition:background .18s var(--ease)} .pp-veh-add:hover{background:var(--callout-amber)} .fin-callout{background:var(--amber-soft);border:1px solid var(--callout-amber-border);border-left:4px solid var(--amber);border-radius:var(--r);padding:24px} .btn.steel{background:var(--navy);color:#ffd88a} .btn.steel:hover{background:var(--navy-deep);color:#ffd88a} .pay-strip{margin-top:28px;display:flex;flex-wrap:wrap;align-items:center;gap:12px;justify-content:center;text-align:center} .pay-label{font-family:var(--font-head);font-size:.76rem;letter-spacing:.18em;text-transform:uppercase;color:var(--muted)} .pay-icons{list-style:none;display:flex;flex-wrap:wrap;gap:8px;margin:0;padding:0} .pay-icon{width:44px;height:30px;border-radius:5px;overflow:hidden;box-shadow:0 1px 4px rgba(18,36,55,.14)} .pay-icon svg{width:100%;height:100%;display:block} .pay-icon.visa,.pay-icon.mc,.pay-icon.amex,.pay-icon.discover,.pay-icon.cash,.pay-icon.check{background:#fff} .pay-note{width:100%;color:var(--muted);font-size:.88rem} /* legal pages */ .legal-body .legal-block{background:var(--card);border:1px solid var(--line);border-left:4px solid var(--amber);border-radius:var(--r-lg);padding:clamp(22px,3vw,36px);margin-bottom:18px;max-width:820px;margin-left:auto;margin-right:auto} .legal-body h2{font-size:clamp(1.3rem,2.4vw,1.7rem)} .legal-body h3{font-size:1.1rem;margin-top:1.4em} .legal-body p,.legal-body li{color:var(--muted);line-height:1.7} .legal-body ul,.legal-body ol{padding-left:20px} /* ---------- accessibility: reduced motion ---------- Targeted, not a blanket freeze. Looping decoration stops; anything that *reveals* content lands on its finished frame so nothing disappears; hovers keep a short transition. Add class="pp-motion-always" to to opt back in (the offline previews in _preview/ do this so you can see the motion). */ @media (prefers-reduced-motion:reduce){ html:not(.pp-motion-always){scroll-behavior:auto} html:not(.pp-motion-always) .pp-van, html:not(.pp-motion-always) .pp-van svg, html:not(.pp-motion-always) .pp-van .pp-wheel, html:not(.pp-motion-always) .pp-van .pp-road, html:not(.pp-motion-always) .cta-band .tow .pp-bill, html:not(.pp-motion-always) .cta-band .tow .pp-body, html:not(.pp-motion-always) .pp-nav-cta, html:not(.pp-motion-always) .pp-nav-cta::before, html:not(.pp-motion-always) .pp-ltr, html:not(.pp-motion-always) .pp-brand::before, html:not(.pp-motion-always) .pp-p1, html:not(.pp-motion-always) .pp-p2, html:not(.pp-motion-always) .pp-teardown .pp-scanbar, html:not(.pp-motion-always) .pp-teardown .pp-scanline, html:not(.pp-motion-always) .pp-teardown .pp-ping, html:not(.pp-motion-always) .pp-teardown .pp-blink, html:not(.pp-motion-always) .stats .num, html:not(.pp-motion-always) .pp-veh-add{animation:none !important} html:not(.pp-motion-always) .pp-teardown .pp-line{stroke-dashoffset:0 !important;animation:none !important} html:not(.pp-motion-always) .pp-teardown .pp-hot{opacity:1 !important;animation:none !important} html:not(.pp-motion-always) .pp-van{opacity:1 !important;transform:none !important} html:not(.pp-motion-always) *, html:not(.pp-motion-always) *::before, html:not(.pp-motion-always) *::after{transition-duration:.12s !important} } /* ---------- WooCommerce product icons (no photo uploaded) ---------- functions.php renders for any tile that links to a DIFFERENT product (Shop grid, Related, Upsells) and a plain
for the single product page's own gallery image (no point linking a product to itself). Small 46px badge everywhere by default; the "div.product div.pp-product-icon" override below bumps ONLY that static div up to 220px on the single product page — it must stay scoped to the div selector, not the shared .pp-product-icon class, or it also inflates the small Related-Products tiles that share that page. Likewise hover/pointer styling is scoped to the "a." selector only, so a static div never looks clickable and a real link is never dead. */ a.pp-product-icon,div.pp-product-icon{width:46px;height:46px;aspect-ratio:1/1;max-height:none;margin:0 auto 14px;display:flex !important;align-items:center !important;justify-content:center !important;text-align:center;background:var(--amber-soft);border-radius:12px;color:var(--navy);transition:transform .2s var(--ease),color .2s var(--ease)} a.pp-product-icon{cursor:pointer} a.pp-product-icon:hover{color:var(--amber);transform:translateY(-3px)} .pp-product-icon svg.pp-icon-svg{width:24px;height:24px;max-width:60%;max-height:60%;display:block;flex:none;margin:0 auto} div.product div.pp-product-icon{width:220px;height:220px;max-width:100%;border-radius:var(--r);margin:0 auto 24px;cursor:default} div.product div.pp-product-icon svg.pp-icon-svg{width:96px;height:96px} /* ---------- Shop page: menu-style list rows ---------- Scoped to .wp-block-woocommerce-product-collection (the block that only exists on the Shop/Product Catalog template) so none of this touches the single Product page's own icon treatment, or Related/Upsell product tiles elsewhere on the site — those keep the badge-style icon rules above. Icon shrinks to a small inline glyph next to the name instead of the big amber badge, name sits left, price is pushed right via space-between. */ .wp-block-woocommerce-product-collection .pp-shop-list-row{align-items:center;padding:16px 12px;border-bottom:1px solid var(--line)} .wp-block-woocommerce-product-collection .pp-shop-list-row:first-child{padding-top:0} /* Zebra striping — targets the
  • WooCommerce wraps each product in (.wc-block-product-template > li), not .pp-shop-list-row itself, since the row div is the
  • 's only child and never repeats as a sibling — nth-child has to count the actual repeating element. */ .wp-block-woocommerce-product-collection .wc-block-product-template > li:nth-child(odd){background:var(--amber-soft)} .wp-block-woocommerce-product-collection .pp-shop-list-left{align-items:center;gap:14px} .wp-block-woocommerce-product-collection .pp-shop-list-left .pp-product-icon{width:32px;height:32px;margin:0;flex:none;background:none;color:var(--amber)} .wp-block-woocommerce-product-collection .pp-shop-list-left .pp-product-icon svg.pp-icon-svg{width:26px;height:26px} .wp-block-woocommerce-product-collection .pp-shop-list-left .pp-product-icon:hover{color:var(--navy);transform:translateY(-2px)} .wp-block-woocommerce-product-collection .pp-shop-list-left .wp-block-post-title{margin:0;text-align:left} .wp-block-woocommerce-product-collection .pp-shop-list-right{align-items:center;gap:14px} /* Price column is a FIXED width, right-aligned. Without this the price box is only as wide as its own text, and because the row is justified space-between that width difference pushes the Add-to-cart button sideways: $205.00 measured 65px and $60.00 measured 55px, so the button sat 9px further right on every cheaper row and the whole column looked ragged. tabular-nums keeps digits equal width so same-length prices land identically. min-width (not width) so a future four-figure price still fits instead of being clipped. */ .wp-block-woocommerce-product-collection .wp-block-woocommerce-product-price{margin:0;white-space:nowrap;min-width:7.5ch;text-align:right;font-variant-numeric:tabular-nums} .wp-block-woocommerce-product-collection .pp-shop-list-button{margin:0;flex:none} /* Narrow screens: the name and the button/price pair cannot share one line at 375px, so the row wraps and the right-hand group takes its own full-width line. The reserved price column is KEPT — once the group has its own line there is room for it (button 118px + gap + price 65px against ~340px), and dropping it just reintroduced the same ragged button edge on mobile. */ @media (max-width:600px){ .wp-block-woocommerce-product-collection .pp-shop-list-row{flex-wrap:wrap;gap:10px} .wp-block-woocommerce-product-collection .pp-shop-list-right{width:100%;justify-content:flex-end} } /* ---------- Product CATEGORY archives: real gallery ---------- The Shop archive and a category archive share one block template, so the list-row rules above were landing here too — built for a 32px icon, they collapsed a real product photo to 0px wide and squeezed the title into a 19px column 486px tall. Category archives are the one place we DO show photos (pp_product_image_block_icon only forces icons on is_shop), so they get a proper card grid instead. Scoped on body.tax-product_cat so the Shop list is untouched. auto-fill, not auto-fit, is deliberate: with a single product auto-fit would collapse the empty tracks and blow that one card up to full width. auto-fill keeps the empty columns, so one keychain sits at normal card size and the grid visibly has room for more. */ body.tax-product_cat .wp-block-woocommerce-product-collection .wc-block-product-template{ display:grid;grid-template-columns:repeat(auto-fill,minmax(min(240px,100%),1fr)); gap:20px;list-style:none;margin:0;padding:0} body.tax-product_cat .wp-block-woocommerce-product-collection .wc-block-product-template > li{ display:block;background:var(--card);border:1px solid var(--line);border-radius:var(--r); padding:16px;transition:border-color .18s var(--ease),transform .18s var(--ease),box-shadow .18s var(--ease)} body.tax-product_cat .wp-block-woocommerce-product-collection .wc-block-product-template > li:hover{ border-color:var(--amber);transform:translateY(-3px);box-shadow:var(--shadow)} /* the Shop zebra striping makes no sense on cards */ body.tax-product_cat .wp-block-woocommerce-product-collection .wc-block-product-template > li:nth-child(odd){background:var(--card)} body.tax-product_cat .wp-block-woocommerce-product-collection .pp-shop-list-row{ flex-direction:column;align-items:stretch;gap:12px;padding:0;border-bottom:0} body.tax-product_cat .wp-block-woocommerce-product-collection .pp-shop-list-left{ flex-direction:column;align-items:stretch;gap:10px} /* Square media box; contain so a keychain on transparency is never cropped. */ body.tax-product_cat .wp-block-woocommerce-product-collection .wc-block-components-product-image{ display:block;width:100%;margin:0;aspect-ratio:1/1;background:var(--bg); border-radius:var(--r-sm);overflow:hidden} body.tax-product_cat .wp-block-woocommerce-product-collection .wc-block-components-product-image a{ display:block;width:100%;height:100%} /* !important is load-bearing here, not laziness. WooCommerce's Product Image block writes style="object-fit:cover;aspect-ratio:1/1" as an INLINE attribute on the , and an inline style beats any selector no matter how specific — which is why the padding below applied from this same rule while object-fit silently did not. cover crops a keychain shot to fill the square; contain scales the whole object to fit, which is the point of a product gallery. */ body.tax-product_cat .wp-block-woocommerce-product-collection .wc-block-components-product-image img{ width:100%;height:100%;object-fit:contain!important;padding:14px;display:block} body.tax-product_cat .wp-block-woocommerce-product-collection .pp-shop-list-left .wp-block-post-title{ width:auto;font-size:1.02rem;line-height:1.32} /* DOM order is button then price; column-reverse puts the price above a full-width button, which is the order a shopper reads a product card in. */ body.tax-product_cat .wp-block-woocommerce-product-collection .pp-shop-list-right{ flex-direction:column-reverse;align-items:stretch;width:100%;gap:10px} body.tax-product_cat .wp-block-woocommerce-product-collection .wp-block-woocommerce-product-price{ min-width:0;text-align:left;font-size:1.05rem;color:var(--amber-deep);font-weight:600} body.tax-product_cat .wp-block-woocommerce-product-collection .pp-shop-list-button, body.tax-product_cat .wp-block-woocommerce-product-collection .pp-shop-list-button .wp-block-button__link{ width:100%} /* ---------- Shop diagnostic-funnel banner ---------- */ .pp-shop-banner{display:flex;flex-wrap:wrap;gap:20px;align-items:center;justify-content:space-between;background:var(--surface-dark-deep);color:#eaf0f6;border-left:4px solid var(--amber);border-radius:var(--r);padding:24px 28px;margin-bottom:32px} .pp-shop-banner strong{display:block;font-family:var(--font-head);font-size:1.1rem;color:#fff} .pp-shop-banner p{margin:.3em 0 0;color:var(--muted-dark);max-width:52ch} .pp-shop-banner .btn{flex:none} /* ---------- Shop DIY-rescue banner ---------- Renders below the product grid via woocommerce_after_shop_loop (functions.php). Deliberately amber, not navy, so it doesn't read as a repeat of the .pp-shop-banner above the grid — same layout, opposite color, so shoppers register it as a second, different offer instead of skimming past it. */ .pp-diy-banner{display:flex;flex-wrap:wrap;gap:20px;align-items:center;justify-content:space-between;background:var(--amber-soft);border:1px solid var(--amber);border-radius:var(--r);padding:24px 28px;margin-top:36px} .pp-diy-banner strong{display:block;font-family:var(--font-head);font-size:1.1rem;color:var(--navy)} .pp-diy-banner p{margin:.3em 0 0;color:var(--muted);max-width:52ch} .pp-diy-banner .btn{flex:none} /* ---------- Shop: merchandise section ---------- Deliberately reads as a different KIND of thing from the services grid above: navy field instead of the page background, so the eye registers a boundary rather than more of the same list. Merch is also the one place a real photo beats an icon, so the cards are light panels on the dark field to let the product sit on white. */ /* Same banner shape as .pp-shop-banner / .pp-diy-banner above, so the three read as one family, but on the deep navy field so merch registers as a different KIND of thing from the services list rather than another offer. No product images here on purpose — the button leads to the category archive, which is where the photos live. */ .pp-merch{display:flex;flex-wrap:wrap;gap:20px;align-items:center;justify-content:space-between;background:var(--surface-dark-deep);color:#eaf0f6;border-left:4px solid var(--amber);border-radius:var(--r);padding:24px 28px;margin-top:36px} .pp-merch-kicker{display:block;font-family:var(--font-head);font-size:.74rem;letter-spacing:.16em;text-transform:uppercase;color:var(--amber-hi);margin-bottom:6px} .pp-merch-copy strong{display:block;font-family:var(--font-head);font-size:1.1rem;color:#fff} .pp-merch-copy p{margin:.3em 0 0;color:var(--muted-dark);max-width:52ch} .pp-merch .btn{flex:none} /* ---------- Order-received page: appointment CTA ---------- */ .pp-appt-cta{background:var(--amber-soft);border:1px solid var(--callout-amber-border);border-left:4px solid var(--amber);border-radius:var(--r);padding:24px 28px;margin:28px 0;text-align:center} .pp-appt-cta h3{margin:0 0 8px} .pp-appt-cta p{max-width:52ch;margin:0 auto 16px} /* ---------- Shop grid: override WordPress's built-in font-size presets ---------- The Product Collection block ships with "Small"/"Medium" preset classes on the product title/price, smaller than the rest of the site's type scale. WP core's own .has-*-font-size rules use !important, so matching that is the only way to override — same justified exception as reduced-motion. */ .wp-block-post-title.has-medium-font-size{font-size:1.2rem !important;font-family:var(--font-head);color:var(--navy)} .wp-block-woocommerce-product-price.has-small-font-size{font-size:1.05rem !important;font-family:var(--font-head);font-weight:600;color:var(--navy)} /* ---------- junk car buying ---------- */ .junk{background:var(--amber-soft);border-top:1px solid var(--line);border-bottom:1px solid var(--line)} .junk .wrap{display:grid;grid-template-columns:1.05fr .95fr;gap:clamp(28px,4vw,56px);align-items:start} .junk-lead p{color:#54452a;max-width:56ch} .junk-offer{display:grid;grid-template-columns:repeat(3,1fr);gap:12px;margin:26px 0} .junk-offer>div{background:var(--card);border:1px solid var(--line);border-left:4px solid var(--amber);border-radius:var(--r);padding:18px 20px;box-shadow:var(--shadow); transition:border-color .18s var(--ease),transform .18s var(--ease),box-shadow .18s var(--ease)} .junk-offer>div:hover{border-color:var(--amber);transform:translateY(-3px);box-shadow:var(--shadow-lg)} .jo-num{display:block;font-family:var(--font-head);font-size:clamp(1.2rem,1.55vw,1.5rem);font-weight:800;color:var(--navy);line-height:1.1;white-space:nowrap} .jo-lbl{display:block;margin-top:4px;font-size:.78rem;letter-spacing:.12em;text-transform:uppercase;color:var(--muted)} .junk-cta{display:flex;flex-wrap:wrap;gap:12px;margin-bottom:18px} .junk-lead .fine{color:#7a6642;max-width:60ch} .junk-side{display:flex;flex-direction:column;gap:16px} .junk-card{background:var(--card);border:1px solid var(--line);border-left:4px solid var(--amber);border-radius:var(--r-lg);padding:clamp(20px,2.6vw,28px);box-shadow:var(--shadow); transition:border-color .18s var(--ease),transform .18s var(--ease),box-shadow .18s var(--ease)} .junk-card:hover{border-color:var(--amber);transform:translateY(-3px);box-shadow:var(--shadow-lg)} .junk-card h3{margin:0 0 14px} .junk-list,.junk-steps{margin:0;padding:0 0 0 0;list-style:none;display:flex;flex-direction:column;gap:10px} .junk-list li{position:relative;padding-left:26px;color:#43525f;font-size:.97rem;line-height:1.5} .junk-list li::before{content:"";position:absolute;left:6px;top:.62em;width:8px;height:8px;border-radius:2px;background:var(--amber)} .junk-steps{counter-reset:jstep} .junk-steps li{counter-increment:jstep;position:relative;padding-left:34px;color:#43525f;font-size:.97rem;line-height:1.5} .junk-steps li::before{content:counter(jstep);position:absolute;left:0;top:0;width:23px;height:23px;border-radius:999px;background:var(--surface-dark);color:var(--amber-hi); font-family:var(--font-head);font-size:.8rem;font-weight:700;display:flex;align-items:center;justify-content:center} .junk-steps b{color:var(--navy)} .junk-why{margin:2px 0 0;font-size:.93rem;line-height:1.6;color:#6b5936;border-left:3px solid var(--amber);padding-left:14px} @media(max-width:900px){.junk .wrap{grid-template-columns:1fr} .junk-offer{grid-template-columns:repeat(auto-fit,minmax(min(140px,100%),1fr))}} /* ---------- "Get cash" nav pill — the /cash-for-cars entry point ---------- Reads as the secondary companion to the amber "Book Now" pill: same 999px radius, same .8rem/700 type, same 1px hover lift — navy outline rather than amber fill, so only one button in the header claims primary action. Replaces a hover-swap that hid the real text under two pseudo-element labels ("I give up on it 🏳" → "Get cash 💵"). Using a plain text node instead fixes three things at once: the visible label no longer disagrees with the link's accessible name; touch devices have no hover, so phones had only ever shown "I give up on it"; and the label is no longer absolutely positioned, so the pill sizes to the nav's own 40px rhythm. The old 1px border sat outside a 40px min-height and made this the only 42px item in the row, 1px high. The green (#0f5132/#eef7f0/#1a7a4a) and the emoji went with it — neither appears anywhere else in the navy/amber system. */ .pp-nav .pp-nav-junk a{ height:40px;padding:7px 15px;margin-left:6px; border:1px solid rgba(22,50,74,.24);border-radius:999px; background:var(--card);font-weight:700;font-size:.8rem; transition:background .25s var(--ease),border-color .25s var(--ease),color .25s var(--ease),transform .2s var(--ease)} /* Inverts to a navy fill with an amber label — the same contract .btn.navy and .btn.steel already use elsewhere. The current-page state takes the fill but not the lift; a permanently raised pill would reintroduce the misalignment. */ .pp-nav .pp-nav-junk a:hover, .pp-nav .pp-nav-junk a:focus-visible, .pp-nav .pp-nav-junk a[aria-current="page"]{background:var(--surface-dark);border-color:var(--navy)} .pp-nav .pp-nav-junk a:hover, .pp-nav .pp-nav-junk a:focus-visible{transform:translateY(-1px)} /* !important on color only, and for the same documented reason as the Book Now pill above: the Navigation block carries textColor:"ink", WordPress emits .has-ink-color{color:... !important} as a preset, and unmatched it would force near-black text onto the navy fill. */ .pp-nav .pp-nav-junk a.wp-block-navigation-item__content{color:var(--navy) !important} .pp-nav .pp-nav-junk a.wp-block-navigation-item__content:hover, .pp-nav .pp-nav-junk a.wp-block-navigation-item__content:focus-visible, .pp-nav .pp-nav-junk a.wp-block-navigation-item__content[aria-current="page"]{color:#ffd88a !important} /* ---------- Services dropdown ---------- Core's Navigation block supplies the open/close behaviour and the keyboard handling; this is purely the skin. Twelve items is a tall list, so it is a single column with tight rows rather than a mega-menu. */ .pp-nav .wp-block-navigation__submenu-container{ background:var(--card); border:1px solid var(--line); border-radius:var(--r); box-shadow:0 20px 44px -22px rgba(18,36,55,.42),0 2px 6px -2px rgba(18,36,55,.12); padding:8px; min-width:262px; margin-top:6px} /* The 6px offset below "Services" was dead space — the pointer left the menu's hover chain crossing it and the dropdown shut before you could reach an item. This transparent bridge fills the gap, so the visual spacing survives but the hover doesn't break. Its height must stay equal to the margin-top above. */ .pp-nav .wp-block-navigation__submenu-container::before{ content:"";position:absolute;left:0;right:0;bottom:100%;height:6px} /* Closing is held briefly so a diagonal path toward the list, or a moment's wobble, doesn't dismiss it. Opening stays instant. */ .pp-nav .has-child>.wp-block-navigation__submenu-container{ transition:opacity .16s linear,visibility .16s linear;transition-delay:.35s} .pp-nav .has-child:hover>.wp-block-navigation__submenu-container, .pp-nav .has-child:focus-within>.wp-block-navigation__submenu-container{ transition-delay:0s} .pp-nav .wp-block-navigation__submenu-container li{width:100%} .pp-nav .wp-block-navigation__submenu-container a{ padding:9px 12px; border-radius:var(--r-sm); font-size:.92rem; font-weight:500; min-height:0; white-space:nowrap; width:100%} .pp-nav .wp-block-navigation__submenu-container a:hover, .pp-nav .wp-block-navigation__submenu-container a:focus-visible{ background:var(--amber-soft);color:var(--navy)} /* Last item is the catch-all back to the index — set it apart with a rule. */ .pp-nav .wp-block-navigation__submenu-container .pp-sub-all{ border-top:1px solid var(--line);margin-top:6px;padding-top:6px} .pp-nav .wp-block-navigation__submenu-container .pp-sub-all a{ font-weight:700;color:var(--amber-deep)} /* Mobile: the overlay menu stacks, so drop the card treatment and let it flow. */ @media (max-width:768px){ .pp-nav .wp-block-navigation__submenu-container{ border:0;box-shadow:none;padding:0 0 0 12px;min-width:0;margin-top:0} .pp-nav .wp-block-navigation__submenu-container a{white-space:normal} } /* ============================================================ Free VIN recall check — /recall-check Rendered by assets/pp-recall.js into [data-pp-recall]. ============================================================ */ /* Gold page-head. Same 96deg fill as the hero h1 so the two read as one family, over a navy base warmed by a low amber wash. */ .page-head.gold{ position:relative;overflow:hidden; background: linear-gradient(100deg,rgba(232,156,12,0) 38%,rgba(232,156,12,.12) 50%,rgba(232,156,12,0) 62%), radial-gradient(ellipse 70% 140% at 22% 0%,rgba(244,179,77,.20),rgba(244,179,77,0) 68%), linear-gradient(165deg,#1b3b57 0%,var(--navy-deep) 58%,#0b1c2c 100%)} .page-head.gold::after{ content:"";position:absolute;left:0;right:0;bottom:0;height:3px; background:linear-gradient(90deg,var(--amber-text) 0%,var(--amber-hi) 42%,#ffe6b0 55%,var(--amber) 78%,var(--amber-text) 100%)} .page-head.gold h1{ background:linear-gradient(96deg,#fff 0%,#ffd88a 55%,var(--amber) 100%); -webkit-background-clip:text;background-clip:text;color:transparent; padding-bottom:4px} .page-head.gold .kicker{color:#ffd88a} .pp-recall-form{display:flex;flex-direction:column;gap:8px;max-width:620px} .pp-recall-form>label{font-family:var(--font-head);font-weight:600;color:var(--navy)} .pp-recall-field{display:flex;gap:10px;flex-wrap:wrap} .pp-recall-field .input{ flex:1 1 280px;font-family:ui-monospace,Menlo,monospace;letter-spacing:.09em; text-transform:uppercase;font-size:1.05rem} .pp-recall-field .btn{flex:none} .pp-recall-help{margin:0;color:var(--muted);font-size:.9rem;max-width:56ch;text-wrap:pretty} .pp-recall-status{margin:18px 0 0;font-family:var(--font-head);font-weight:600;color:var(--muted)} .pp-recall-status.ok{color:var(--good)} .pp-recall-status.warn{color:#b3541e} .pp-recall-out{display:flex;flex-direction:column;gap:20px;margin-top:18px} .pp-recall-out:empty{margin-top:0} /* decoded vehicle summary */ .pp-recall-vehicle{ background:var(--surface-dark);color:#eaf0f6;border-left:4px solid var(--amber);border-radius:var(--r);padding:20px 24px; box-shadow:var(--shadow-lg)} .pp-recall-vehicle .kicker{color:#ffd88a} .pp-recall-vehicle h3{margin:6px 0 0;color:#fff;font-size:1.5rem;line-height:1.2} .pp-recall-spec{margin:8px 0 0;color:var(--muted-dark);font-size:.95rem} /* one card per campaign */ .pp-recall-list{display:flex;flex-direction:column;gap:16px} .pp-recall-card{ background:var(--card);border:1px solid var(--line);border-left:4px solid var(--amber); border-radius:var(--r);padding:20px 24px;box-shadow:var(--shadow)} .pp-recall-card.urgent{border-left-color:var(--bad);background:var(--bad-wash)} .pp-recall-card-head{ display:flex;align-items:baseline;justify-content:space-between;gap:14px;flex-wrap:wrap} .pp-recall-card-head h4{ margin:0;font-family:var(--font-head);font-size:1.12rem;color:var(--navy);line-height:1.3} .pp-recall-id{ font-family:ui-monospace,Menlo,monospace;font-size:.82rem;color:var(--muted); background:var(--bg);border:1px solid var(--line);border-radius:999px;padding:3px 11px; white-space:nowrap} .pp-recall-flags{display:flex;flex-wrap:wrap;gap:8px;margin-top:12px} .pp-flag{ font-family:var(--font-head);font-size:.76rem;font-weight:700;letter-spacing:.07em; text-transform:uppercase;border-radius:999px;padding:5px 12px} .pp-flag.stop{background:var(--bad);color:#fff} .pp-flag.soft{background:var(--amber-soft);color:var(--amber-deep)} .pp-flag.date{background:var(--bg);color:var(--muted);border:1px solid var(--line)} .pp-recall-detail{margin-top:14px} .pp-recall-term{ display:block;font-family:var(--font-head);font-size:.76rem;font-weight:700; letter-spacing:.14em;text-transform:uppercase;color:var(--amber-deep);margin-bottom:3px} .pp-recall-detail p{margin:0;color:var(--ink);text-wrap:pretty} .pp-recall-maker{margin:14px 0 0;font-size:.86rem;color:var(--muted)} /* what to do next */ .pp-recall-cta{ background:var(--amber-soft);border:1px solid var(--callout-amber-border);border-left:4px solid var(--amber);border-radius:var(--r);padding:24px 26px} .pp-recall-cta h3{margin:0 0 8px;color:var(--navy);font-size:1.3rem;line-height:1.25} .pp-recall-cta p{margin:0 0 12px;color:var(--ink);max-width:64ch;text-wrap:pretty} .pp-recall-cta p:last-of-type{margin-bottom:18px} .pp-recall-cta .hero-actions{margin:0} /* Cost/reimbursement disclosure inside the CTA. Deliberately not styled as a warning — it's the terms of the offer, and it should read as candour rather than a hazard notice. */ .pp-recall-disclose{ background:rgba(255,255,255,.72);border:1px solid var(--callout-amber-border);border-left:4px solid var(--amber);border-radius:var(--r-sm); padding:15px 17px;margin:0 0 18px} .pp-recall-disclose p{margin:0 0 9px;font-size:.9rem;line-height:1.6;color:var(--ink)} .pp-recall-disclose p:last-child{margin-bottom:0} .pp-recall-fineprint{ margin:0;color:var(--muted);font-size:.85rem;line-height:1.6;max-width:70ch;text-wrap:pretty} @media (max-width:600px){ .pp-recall-field .btn{width:100%} .pp-recall-card{padding:18px 18px} .pp-recall-vehicle{padding:18px 20px} } /* ============================================================ Intake form steps — the numbered banners on /contact that split the form into who / what vehicle / where / what's wrong. ============================================================ */ .pp-step{ border-top:1px solid var(--line); padding-top:22px;margin-top:26px} .pp-step:first-of-type{border-top:0;padding-top:0;margin-top:0} .pp-step-head{display:flex;gap:14px;align-items:flex-start;margin-bottom:16px} .pp-step-n{ flex:none;width:32px;height:32px;border-radius:999px; display:grid;place-items:center; background:var(--surface-dark);color:#fff; font-family:var(--font-head);font-weight:700;font-size:.95rem;line-height:1} .pp-step-head h3{ margin:0;font-family:var(--font-head);font-size:1.18rem;color:var(--navy);line-height:1.25} .pp-step-head p{ margin:5px 0 0;color:var(--muted);font-size:.92rem;line-height:1.55; max-width:62ch;text-wrap:pretty} /* Address block. The street line runs full width; ZIP, city and state share the row beneath so the ZIP reads as the field that drives the other two. */ .pp-addr-grid .pp-addr-street{grid-column:1 / -1} .pp-addr-note{ margin:12px 0 0;font-size:.92rem;line-height:1.5;color:var(--muted); min-height:1.4em;text-wrap:pretty} .pp-addr-note.ok{ color:var(--good);font-family:var(--font-head);font-weight:600} .pp-addr-note.ok::before{content:"✓ ";font-weight:700} .pp-addr-note.warn{color:#b3541e} @media (max-width:600px){ .pp-step-head{gap:11px} .pp-step-n{width:28px;height:28px;font-size:.85rem} .pp-step-head h3{font-size:1.06rem} } /* ============================================================ Google reviews — [pp_reviews], rendered server-side in functions.php from the Places API. Renders nothing at all when unconfigured, so these styles simply go unused. ============================================================ */ .pp-reviews-empty{ background:var(--amber-soft);border:1px dashed var(--callout-amber-border);border-left:4px solid var(--amber);border-radius:var(--r-sm); padding:14px 16px;color:var(--amber-deep);font-size:.92rem} .pp-reviews-head{display:flex;align-items:baseline;gap:10px;flex-wrap:wrap;margin-bottom:18px} .pp-reviews-score{ font-family:var(--font-head);font-size:2rem;font-weight:700;color:var(--navy);line-height:1} .pp-reviews-stars{color:var(--amber);font-size:1.15rem;letter-spacing:.05em} .pp-reviews-count{color:var(--muted);font-size:.92rem} .pp-reviews-list{display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));gap:16px} .pp-review{ margin:0;background:var(--card);border:1px solid var(--line);border-left:4px solid var(--amber);border-radius:var(--r); padding:20px 22px;box-shadow:var(--shadow); display:flex;flex-direction:column;gap:10px} .pp-review-stars{color:var(--amber);font-size:.95rem;letter-spacing:.05em} .pp-review blockquote{margin:0} .pp-review blockquote p{ margin:0;color:var(--ink);line-height:1.65;text-wrap:pretty} .pp-review figcaption{ margin-top:auto;font-family:var(--font-head);font-weight:600;color:var(--navy);font-size:.92rem} .pp-review-when{font-weight:400;color:var(--muted)} .pp-reviews-attrib{margin:16px 0 0;font-size:.86rem;color:var(--muted)} .pp-reviews-attrib a{color:var(--amber-deep);text-decoration:underline;text-underline-offset:3px} /* ============================================================ Service-area check — rendered by assets/pp-area.js into [data-pp-area]. Answers "do you come to my ZIP". ============================================================ */ .pp-area-form{display:flex;flex-direction:column;gap:8px;max-width:520px} .pp-area-form>label{font-family:var(--font-head);font-weight:600;color:var(--navy)} .pp-area-field{display:flex;gap:10px;flex-wrap:wrap} .pp-area-field .input{ flex:0 1 160px;font-family:ui-monospace,Menlo,monospace;letter-spacing:.18em; font-size:1.05rem;text-align:center} .pp-area-field .btn{flex:none} .pp-area-status{margin:14px 0 0;font-family:var(--font-head);font-weight:600;color:var(--muted)} .pp-area-status.warn{color:#b3541e} .pp-area-out:empty{display:none} .pp-area-card{ margin-top:16px;border-radius:var(--r);padding:22px 24px;box-shadow:var(--shadow); border:1px solid var(--line);border-left:4px solid var(--amber);background:var(--card)} .pp-area-card.yes{border-left-color:var(--good);background:var(--good-wash);border-color:var(--good-border)} .pp-area-card.no{border-left-color:var(--amber);background:var(--amber-soft);border-color:var(--callout-amber-border)} .pp-area-card h3{margin:6px 0 0;color:var(--navy);font-size:1.35rem;line-height:1.2} .pp-area-card .kicker{color:var(--amber-deep)} .pp-area-card.yes .kicker{color:var(--good)} .pp-area-card p{margin:10px 0 0;color:var(--ink);max-width:58ch;text-wrap:pretty} .pp-area-dist{font-size:.92rem;color:var(--muted)} .pp-area-fee{ font-family:var(--font-head);font-weight:600;color:var(--navy)} .pp-area-card .hero-actions{margin:18px 0 0} @media (max-width:600px){ .pp-area-field .input,.pp-area-field .btn{width:100%;flex:1 1 100%} .pp-area-card{padding:18px 20px} } /* ============================================================ Known problems lookup — /known-problems Rendered by assets/pp-problems.js into [data-pp-problems]. Shares the status line, vehicle card, CTA and fineprint styles with the recall tool above; only the ranked list is new. ============================================================ */ .pp-prob-form{display:flex;flex-direction:column;gap:14px;max-width:680px} .pp-prob-route{display:flex;flex-direction:column;gap:8px} .pp-prob-route>label{font-family:var(--font-head);font-weight:600;color:var(--navy)} .pp-prob-field{display:flex;gap:10px;flex-wrap:wrap} .pp-prob-field .input{ flex:1 1 280px;font-family:ui-monospace,Menlo,monospace;letter-spacing:.09em; text-transform:uppercase;font-size:1.05rem} .pp-prob-field .btn{flex:none} .pp-prob-toggle{ align-self:flex-start;background:none;border:0;padding:0;cursor:pointer; font-family:var(--font-head);font-size:.92rem;font-weight:600;color:var(--amber-deep); text-decoration:underline;text-underline-offset:3px} .pp-prob-toggle:hover{color:var(--navy)} .pp-prob-ymm[hidden]{display:none} .pp-prob-selects{display:flex;gap:10px;flex-wrap:wrap} .pp-prob-selects .input{flex:1 1 150px;min-width:0} .pp-prob-selects .btn{flex:none} .pp-prob-selects .input:disabled{background:var(--bg);color:var(--muted);cursor:not-allowed} .pp-prob-out{display:flex;flex-direction:column;gap:20px;margin-top:18px} .pp-prob-out:empty{margin-top:0} .pp-prob-head{margin:0;font-size:1.3rem;color:var(--navy)} /* Severity strip. Only rendered when a count is non-zero. */ .pp-prob-severity{display:flex;flex-wrap:wrap;gap:12px} .pp-prob-sev{ flex:1 1 130px;background:var(--bad-wash);border:1px solid var(--bad-border);border-left:4px solid var(--bad); border-radius:var(--r-sm);padding:12px 14px} .pp-prob-sev-n{ display:block;font-family:var(--font-head);font-size:1.5rem;font-weight:700; color:var(--bad);line-height:1.1} .pp-prob-sev-l{display:block;font-size:.84rem;color:var(--muted);margin-top:2px} /* Ranked systems */ .pp-prob-list{display:flex;flex-direction:column;gap:14px} .pp-prob-row{ background:var(--card);border:1px solid var(--line);border-left:4px solid var(--amber);border-radius:var(--r); padding:18px 22px;box-shadow:var(--shadow)} .pp-prob-row-head{ display:flex;align-items:baseline;justify-content:space-between;gap:14px;flex-wrap:wrap} .pp-prob-row-head h4{ margin:0;font-family:var(--font-head);font-size:1.1rem;color:var(--navy);line-height:1.3} .pp-prob-count{ font-family:var(--font-head);font-size:.88rem;font-weight:700;color:var(--amber-deep); white-space:nowrap} .pp-prob-bar{ height:8px;background:var(--bg);border-radius:999px;overflow:hidden;margin-top:10px} .pp-prob-bar-fill{ display:block;height:100%;border-radius:999px; background:linear-gradient(90deg,var(--amber) 0%,var(--amber-hi) 100%)} .pp-prob-samples{margin-top:14px} .pp-prob-samples summary{ cursor:pointer;font-family:var(--font-head);font-size:.86rem;font-weight:600; color:var(--amber-deep);list-style:none} .pp-prob-samples summary::-webkit-details-marker{display:none} .pp-prob-samples summary::before{content:"▸ ";display:inline-block;transition:transform .15s} .pp-prob-samples[open] summary::before{content:"▾ "} .pp-prob-samples summary:hover{color:var(--navy)} .pp-prob-samples blockquote{ margin:12px 0 0;padding:0 0 0 14px;border-left:3px solid var(--line)} .pp-prob-samples blockquote p{ margin:0;font-size:.92rem;line-height:1.6;color:var(--ink);text-wrap:pretty} .pp-prob-samples cite{ display:block;margin-top:5px;font-size:.78rem;color:var(--muted);font-style:normal} .pp-prob-link{ display:inline-block;margin-top:14px;font-family:var(--font-head);font-size:.9rem; font-weight:600;color:var(--navy);text-decoration:underline;text-underline-offset:3px} .pp-prob-link:hover{color:var(--amber-deep)} /* Variant chooser, shown when a VIN can't settle 1500 vs 2500 vs 3500. */ .pp-prob-choose{ background:var(--amber-soft);border:1px solid var(--callout-amber-border);border-left:4px solid var(--amber);border-radius:var(--r);padding:22px 24px} .pp-prob-choose h3{margin:0 0 8px;color:var(--navy);font-size:1.2rem} .pp-prob-choose p{margin:0 0 16px;color:var(--ink);max-width:60ch;text-wrap:pretty} .pp-prob-choices{display:flex;gap:10px;flex-wrap:wrap} @media (max-width:600px){ .pp-prob-field .btn,.pp-prob-selects .btn{width:100%} .pp-prob-selects .input{flex:1 1 100%} .pp-prob-row{padding:16px 18px} } /* Decoded detail fields on the contact form, revealed once a VIN resolves. */ .pp-veh-decoded{ border-top:1px dashed var(--line);padding-top:14px;margin-top:2px; display:flex;flex-direction:column;gap:10px} .pp-veh-decoded[hidden]{display:none} .pp-veh-decoded-label{ font-family:var(--font-head);font-size:.72rem;font-weight:700;letter-spacing:.14em; text-transform:uppercase;color:var(--amber-deep)} .pp-veh-decoded .input{background:var(--callout-soft)} /* High-voltage call-out — a hybrid or EV changes what goes on the van. */ .pp-veh-ev{ margin:0;padding:9px 13px;border-radius:var(--r-sm); background:var(--info-wash);border:1px solid var(--info-border);color:#14456f; font-size:.88rem;font-weight:600} .pp-veh-ev[hidden]{display:none} /* Confirmation row shown once the VIN decodes and the year/make/model pickers fold away. */ .pp-veh-confirm{display:flex;align-items:center;gap:14px;flex-wrap:wrap;margin-top:2px} .pp-veh-confirm[hidden]{display:none} .pp-veh-confirm-btn{ background:var(--amber);color:var(--amber-ink);border:1.5px solid transparent; font-family:var(--font-head);font-weight:700;font-size:.9rem; padding:9px 18px;border-radius:999px;cursor:pointer; transition:background .2s var(--ease),transform .2s var(--ease)} .pp-veh-confirm-btn:hover:not(:disabled){background:var(--amber-hi);transform:translateY(-1px)} .pp-veh-confirm-btn:disabled{ background:var(--good-wash);border-color:var(--good-border);color:var(--good);cursor:default;transform:none} .pp-veh-edit-btn{ background:none;border:0;padding:0;color:var(--muted);font:inherit;font-size:.86rem; text-decoration:underline;cursor:pointer} .pp-veh-edit-btn:hover{color:var(--navy)} .pp-veh-confirm.done .pp-veh-edit-btn{color:var(--muted)} /* Open-recall result on the booking form. */ .pp-veh-recall{ margin:0;padding:9px 13px;border-radius:var(--r-sm); font-size:.88rem;font-weight:600;line-height:1.5} .pp-veh-recall[hidden]{display:none} .pp-veh-recall.clear{background:var(--good-wash);border:1px solid var(--good-border);color:var(--good)} .pp-veh-recall.found{background:var(--amber-soft);border:1px solid var(--callout-amber-border);color:#96650a} .pp-veh-recall.stop{background:var(--bad-wash);border:1px solid var(--bad-border);color:#a5321f} /* Read-only shop detail: engine code, HP, GVWR and friends. */ .pp-veh-specs{display:flex;flex-wrap:wrap;gap:7px} .pp-veh-specs[hidden]{display:none} .pp-veh-chip{ display:inline-flex;align-items:baseline;gap:6px; background:var(--bg);border:1px solid var(--line);border-radius:999px; padding:5px 12px;font-size:.82rem;max-width:100%} .pp-veh-chip[hidden]{display:none} .pp-veh-chip-k{ font-family:var(--font-head);font-size:.68rem;font-weight:700;letter-spacing:.1em; text-transform:uppercase;color:var(--muted);white-space:nowrap} .pp-veh-chip-v{ font-family:ui-monospace,Menlo,monospace;color:var(--navy); overflow-wrap:anywhere} .pp-veh-odo{margin-top:2px} /* ============================================================ Home page — conversion bands added in the v6.4 tone pass. Louder and more phone-forward than the original home page, which buried the price and never asked for the call. ============================================================ */ /* Price chip under the hero headline. The single most important number on the site was previously not on the home page at all. */ .hero-price{ display:inline-flex;align-items:baseline;gap:10px;flex-wrap:wrap; background:rgba(232,156,12,.14);border:1px solid rgba(232,156,12,.45); border-radius:999px;padding:9px 18px;margin:0 0 18px} .hero-price b{font-family:var(--font-head);font-size:1.35rem;color:var(--amber);line-height:1} .hero-price span{color:#dbe5ee;font-size:.93rem} /* "Call now" band — phone number as the hero of its own section. */ .pp-callnow{ background:var(--surface-dark);color:#eaf0f6;border-left:4px solid var(--amber);border-radius:var(--r); padding:34px 32px;text-align:center;box-shadow:var(--shadow-lg)} .pp-callnow .kicker{color:#ffd88a} .pp-callnow h2{margin:8px 0 6px;color:#fff;font-size:clamp(1.5rem,3.4vw,2rem);line-height:1.15} .pp-callnow .pp-tel{ display:inline-block;margin:6px 0 4px;font-family:var(--font-head);font-weight:700; font-size:clamp(1.9rem,5vw,2.8rem);letter-spacing:-.02em;color:var(--amber);text-decoration:none} .pp-callnow .pp-tel:hover{color:var(--amber-hi)} .pp-callnow .pp-sub{margin:2px 0 20px;color:var(--muted-dark);font-size:.95rem} .pp-badges{display:flex;flex-wrap:wrap;gap:9px;justify-content:center;margin:0} .pp-badges li{ list-style:none;background:rgba(255,255,255,.09);border:1px solid rgba(255,255,255,.16); border-radius:999px;padding:7px 14px;font-size:.84rem;color:#dbe5ee} /* What the diagnostic buys — two cards, the price explained twice because it is the objection that stops people booking. */ .pp-explain{display:grid;grid-template-columns:repeat(auto-fit,minmax(290px,1fr));gap:18px} .pp-explain > div{ background:var(--card);border:1px solid var(--line);border-left:4px solid var(--amber);border-radius:var(--r); padding:26px 28px;box-shadow:var(--shadow)} .pp-explain .lead-price{ display:flex;align-items:baseline;gap:8px;margin:6px 0 12px} .pp-explain .lead-price b{font-family:var(--font-head);font-size:2.2rem;color:var(--navy);line-height:1} .pp-explain .lead-price span{color:var(--muted);font-size:.92rem} .pp-explain h3{margin:0;font-size:1.2rem;color:var(--navy);line-height:1.25} .pp-explain p{color:var(--ink);text-wrap:pretty} /* Free NHTSA tools — the thing no competitor has. */ .pp-tools{ background:linear-gradient(165deg,#1b3b57 0%,var(--navy-deep) 60%,#0b1c2c 100%); border-left:4px solid var(--amber);border-radius:var(--r);padding:34px 32px;color:#eaf0f6;box-shadow:var(--shadow-lg)} .pp-tools .kicker{color:#ffd88a} .pp-tools h2{margin:8px 0 8px;color:#fff;font-size:clamp(1.4rem,3.2vw,1.9rem);line-height:1.2} .pp-tools > p{color:var(--muted-dark);max-width:64ch;text-wrap:pretty;margin:0 0 22px} .pp-tools-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));gap:16px} .pp-tool{ background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.14);border-left:4px solid var(--amber); border-radius:var(--r-sm);padding:20px 22px;display:flex;flex-direction:column;gap:8px} .pp-tool h3{margin:0;color:#fff;font-size:1.06rem} .pp-tool p{margin:0;color:var(--muted-dark);font-size:.93rem;line-height:1.55;flex:1} .pp-tool a{ align-self:flex-start;margin-top:4px;font-family:var(--font-head);font-weight:600; font-size:.92rem;color:var(--amber);text-decoration:underline;text-underline-offset:3px} .pp-tool a:hover{color:var(--amber-hi)} /* Broken-down interrupt. Short and red-edged on purpose. */ .pp-interrupt{ background:var(--bad-wash);border:1px solid var(--bad-border);border-left:5px solid var(--bad); border-radius:var(--r);padding:24px 28px; display:flex;align-items:center;justify-content:space-between;gap:22px;flex-wrap:wrap} .pp-interrupt h2{margin:0 0 6px;color:var(--navy);font-size:1.35rem;line-height:1.2} .pp-interrupt p{margin:0;color:var(--ink);max-width:58ch;text-wrap:pretty} .pp-interrupt .hero-actions{margin:0;flex:none} @media (max-width:600px){ .pp-callnow,.pp-tools{padding:26px 20px} .pp-interrupt{padding:20px 20px} .pp-explain > div{padding:22px 20px} } /* Offers band — the loyalty coupon and the referral bounty, side by side. Replaces the single cramped strip that tried to explain the coupon in one sentence and made it sound like a catch. */ .pp-offers{display:grid;grid-template-columns:repeat(auto-fit,minmax(300px,1fr));gap:16px} .pp-offer{ background:var(--card);border:1px solid var(--line);border-left:4px solid var(--amber); border-radius:var(--r);padding:24px 26px;box-shadow:var(--shadow); display:flex;flex-direction:column;gap:8px} .pp-offer .kicker{color:var(--amber-deep)} .pp-offer h3{margin:2px 0 0;color:var(--navy);font-size:1.28rem;line-height:1.2} .pp-offer .pp-offer-amt{ font-family:var(--font-head);font-weight:700;color:var(--amber-deep); font-size:2rem;line-height:1;margin:2px 0 4px} .pp-offer p{margin:0;color:var(--ink);text-wrap:pretty} .pp-offer ul.checklist{margin:6px 0 0} .pp-offer .pp-terms{ margin-top:auto;padding-top:12px;border-top:1px dashed var(--line); font-size:.82rem;color:var(--muted);line-height:1.55} .pp-offer .btn{align-self:flex-start;margin-top:14px} /* Arizona-specific failure section. Sits high on the home page because it is the most relatable thing on the site: everyone here has had at least one of these happen in July. Deliberately LIGHT. The call-now and free-tools bands either side of it are both navy, and three dark blocks in a row turn the page into a wall. This uses the same card/line/amber tokens as the rest of the site. */ .pp-az{ background:var(--card);border:1px solid var(--line);border-left:4px solid var(--amber); border-radius:var(--r);padding:34px 32px;box-shadow:var(--shadow)} .pp-az .kicker{color:var(--amber-deep)} .pp-az h2{margin:8px 0 10px;color:var(--navy);font-size:clamp(1.5rem,3.4vw,2.05rem);line-height:1.15;text-wrap:balance} .pp-az > p{margin:0 0 24px;color:var(--ink);max-width:66ch;text-wrap:pretty} .pp-az-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(250px,1fr));gap:14px} .pp-az-item{ background:var(--bg);border:1px solid var(--line);border-left:4px solid var(--amber); border-radius:var(--r-sm);padding:18px 20px} .pp-az-item h3{ margin:0 0 6px;color:var(--navy);font-size:1.02rem;line-height:1.3; font-family:var(--font-head)} .pp-az-item p{margin:0;color:var(--ink);font-size:.92rem;line-height:1.55;text-wrap:pretty} .pp-az-item a{color:var(--amber-deep);text-decoration:underline;text-underline-offset:3px;white-space:nowrap} .pp-az-item a:hover{color:var(--navy)} .pp-az-foot{ margin:24px 0 0;padding-top:18px;border-top:1px solid var(--line); display:flex;align-items:center;justify-content:space-between;gap:18px;flex-wrap:wrap} .pp-az-foot p{margin:0;color:var(--muted);max-width:52ch;text-wrap:pretty} .pp-az-foot .hero-actions{margin:0} /* Free phone estimate callout. Deliberately plain — it is the one thing on the page that costs the visitor nothing, so it should not look like an ad. */ .pp-freecall{ background:var(--good-wash,var(--good-wash));border:1px solid var(--good-border);border-left:4px solid var(--good); border-radius:var(--r);padding:22px 26px; display:flex;align-items:center;justify-content:space-between;gap:20px;flex-wrap:wrap} .pp-freecall h3{margin:0 0 6px;color:var(--navy);font-size:1.22rem;line-height:1.2} .pp-freecall p{margin:0;color:var(--ink);max-width:56ch;text-wrap:pretty} .pp-freecall .pp-hours{ display:block;margin-top:8px;font-size:.88rem;color:var(--muted)} .pp-freecall .hero-actions{margin:0;flex:none} @media (max-width:600px){ .pp-az{padding:26px 20px} .pp-freecall{padding:20px} } /* ============================================================ BLOG — article layout, reading progress, scroll-reveal. Added 2026-08-05 with the blog launch. Uses the design tokens above and the existing card/hover motion contract. Every animation here is listed in the prefers-reduced-motion reset (search "pp-reveal" / "pp-progress") so motion-opt-out users get finished frames with no movement. ============================================================ */ /* Reading-progress bar. Fixed under the header, full width, an amber fill whose width is driven by assets/pp-blog.js on scroll. */ .pp-progress{ position:fixed;top:0;left:0;right:0;height:3px;z-index:60; background:transparent;pointer-events:none} .pp-progress__bar{ height:100%;width:0; background:linear-gradient(90deg,var(--amber),var(--amber-hi)); transition:width .08s linear} /* Article shell — one readable column, generous margins, the same max-width feel as the rest of the site's long-form pages. */ .pp-article{padding:64px 20px 80px} .pp-article__inner{max-width:760px;margin:0 auto} .pp-article .kicker{margin-bottom:1.2em} /* Post title inherits the global h1 clamp; just tighten the spacing. */ .pp-article__title{margin-bottom:.35em} /* Meta line: the post date. Muted, smaller, sits under the title. */ .pp-article__meta{ display:block;font-size:.92rem;color:var(--muted); font-family:var(--font-body);margin:0 0 2.4em} /* Body typography for long-form reading. */ .pp-article__body{font-size:1.08rem;line-height:1.75;color:var(--ink)} .pp-article__body p{margin:0 0 1.3em;text-wrap:pretty} .pp-article__body h2{ margin:2.2em 0 .6em;padding-top:.4em; scroll-margin-top:90px} .pp-article__body h3{margin:1.8em 0 .5em;scroll-margin-top:90px} .pp-article__body ul,.pp-article__body ol{margin:0 0 1.3em;padding-left:1.4em} .pp-article__body li{margin:0 0 .5em} .pp-article__body a{color:var(--amber-deep);text-decoration:underline;text-underline-offset:3px} .pp-article__body a:hover{color:var(--navy)} .pp-article__body blockquote{ margin:1.6em 0;padding:.2em 1.2em;border-left:3px solid var(--amber); color:var(--muted);font-style:italic} /* Inline emphasis blocks used in the post drafts (tier cards, key lines). */ .pp-article__body strong{color:var(--navy)} /* Closing CTA band on every post. Echoes the homepage CTA contract. */ .pp-article__cta{ margin-top:3em;padding:32px 28px;border-radius:var(--r-lg); background:var(--card);border:1px solid var(--line);border-left:4px solid var(--amber); box-shadow:var(--shadow)} .pp-article__cta h2{margin:.2em 0 .5em} .pp-article__cta p{margin:0 0 1em;max-width:60ch;color:var(--ink)} .pp-article__cta .hero-actions{margin:.4em 0 0} /* Scroll-reveal. Elements with .pp-reveal start faded+shifted and settle to finished state when assets/pp-blog.js adds .pp-reveal--in. The initial state is invisible, so if JS fails to load the content would stay hidden — guarded below by a