/* ========================================================== Sunroof King — Homepage Styles (Red / Black / White) Light, bright, premium automotive shop site. Built to match: Website Media/Website Design References/ Sunroof-King-Homepage-Visual-Reference-CORRECT-2026-08-17.png ========================================================== */ :root{ --red:#D2141B; --red-dark:#A50F15; --black:#171412; --charcoal:#221E1B; --charcoal-soft:#4A433D; --white:#FFFFFF; --cream:#FAF8F5; --gray-light:#F4F3F1; --line:#E7E3DD; --shadow-sm: 0 2px 10px rgba(23,20,18,0.08); --shadow-md: 0 10px 28px rgba(23,20,18,0.13); --shadow-lg: 0 24px 56px rgba(23,20,18,0.24); --radius: 12px; /* Approved Call/Text banner artwork (call and text us/call and text.png) uses its own orange brand color, independent of the red used elsewhere on the page. */ --orange:#F2600C; --orange-dark:#C94A03; /* Cream/orange molded header band (2026-09-02). Header chrome only. */ --hdr-cream-1:#FFFDFA; --hdr-cream-2:#FBF5EC; --hdr-cream-3:#F4EBDD; --hdr-edge:#E7DCC9; --hdr-edge-soft:#F0E7D9; --font-serif: Georgia, 'Times New Roman', Times, serif; --font-sans: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif; /* 2026-09-07 BODY FONT (owner approved): running copy moves off Segoe UI onto Arial. Deliberately a SEPARATE token rather than a change to --font-sans, because --font-sans also drives headings and chrome that must not move - above all the frozen homepage hero H1, whose SUNROOF line measures 519px inside a 523px column. Arial sets wider and would overflow it. Headings keep --font-serif (Georgia), and every element that names --font-sans explicitly is unchanged. */ --font-body: Arial, 'Helvetica Neue', Helvetica, sans-serif; } *{ box-sizing:border-box; margin:0; padding:0; } html{ scroll-behavior:smooth; } /* Clearance for the sticky header when an in-page anchor is followed. 2026-09-02: the desktop header grew from 120px to 150px, so the wide tier needs its own value or anchor targets land underneath it. Below 861px the header is 76-131px and 96px still clears it. */ /* 2026-09-07 (revised): the service bar is now tied to the primary-nav breakpoint, 1240px, so the tall three-tier header only exists at 1240 and up. Measured sticky-header heights: 80px at 390, 126px at 320, 109px at 768, 136px at 1024-1239, 184px at 1240, 189px at 1440. The 210px value therefore starts at 1240, not 981 - at 1239 the header is 136px and 210px would drop anchor targets 74px too low. */ /* Measured sticky-header heights, 2026-09-07: <=389px 126px (the Call/Text control wraps below the logo) 390-640 78-80px 641-860 109px 861-1239 136px >=1240 184-189px (three tiers: logo row, nav row, service bar) The two narrow tiers below were short before this pass - 96px against a 126px header at 320-389 dropped anchor targets 30px underneath it, and the same at 641-860 by 13px. Each value now clears its own header with a small gap, rather than one value guessed for all of them. */ [id]{ scroll-margin-top:96px; } @media (max-width: 389px){ [id]{ scroll-margin-top:140px; } } @media (min-width: 641px) and (max-width: 860px){ [id]{ scroll-margin-top:125px; } } @media (min-width: 861px){ [id]{ scroll-margin-top:162px; } } @media (min-width: 1240px){ [id]{ scroll-margin-top:210px; } } body{ font-family:var(--font-body); background:var(--white); color:var(--charcoal); line-height:1.6; -webkit-font-smoothing:antialiased; } img{ max-width:100%; display:block; } a{ color:inherit; text-decoration:none; } ul{ list-style:none; } .wrap{ max-width:1280px; margin:0 auto; padding:0 24px; } h1,h2,h3{ font-family:var(--font-serif); font-weight:700; color:var(--black); } .eyebrow-rule{ display:flex; align-items:center; justify-content:center; gap:16px; margin-bottom:6px; } .eyebrow-rule .line{ width:56px; height:3px; background:var(--red); border-radius:2px; } .eyebrow-rule h2{ font-size:2rem; text-transform:uppercase; letter-spacing:0.02em; } .eyebrow-rule h2 .accent{ color:var(--red); } .section-sub{ text-align:center; color:var(--charcoal-soft); font-weight:700; text-transform:uppercase; letter-spacing:0.1em; font-size:0.82rem; margin-bottom:30px; } .section{ padding:52px 0; } /* ---------- Buttons ---------- */ .btn{ display:inline-flex; align-items:center; justify-content:center; gap:10px; padding:15px 30px; font-weight:700; font-size:0.98rem; border-radius:8px; border:2px solid transparent; cursor:pointer; transition:transform 0.15s ease, box-shadow 0.15s ease, background 0.15s ease, border-color 0.15s ease; white-space:nowrap; } .btn-primary{ background:var(--red); border-color:var(--red); color:var(--white); box-shadow:var(--shadow-sm); } .btn-primary:hover{ background:var(--red-dark); border-color:var(--red-dark); transform:translateY(-2px); } .btn-outline-dark{ background:transparent; border-color:var(--black); color:var(--black); } .btn-outline-dark:hover{ background:var(--black); color:var(--white); transform:translateY(-2px); } .btn-outline-light{ background:rgba(255,255,255,0.08); border-color:rgba(255,255,255,0.8); color:var(--white); } .btn-outline-light:hover{ background:var(--white); color:var(--black); transform:translateY(-2px); } .btn-lg{ padding:17px 34px; font-size:1.02rem; } .btn-row{ display:flex; gap:14px; flex-wrap:wrap; } .btn svg{ width:19px; height:19px; flex-shrink:0; } /* ============================================================ HEADER ============================================================ */ /* 2026-09-02 — CREAM / ORANGE MOLDED HEADER. Prototype A, owner-approved. THE STRATEGY, which replaces everything that came before it here: the logo, the nav type and the Call/Text control are sized for LEGIBILITY and are NEVER shrunk to force the eight nav items into one row. When the full nav stops fitting, the hamburger takes over instead. Approved 2026-09-02 (visual readability pass): 280px of VISIBLE logo artwork, 18px/700 nav, an enlarged Call/Text control, full nav through 1240px, hamburger from 1239px down. Superseded: the first pass used a 234px logo CSS box, 17px nav and a 1220px breakpoint. It read as undersized because a third of the logo file is white margin — see the .brand-logo-img note below. WHY THE HEADER IS TWO LEVELS. Measured at the approved sizes, a strict single row needs: brand plate 262 + nav 812 + Call/Text 242 + two gaps 44 = 1360px + 48px gutter + 15px scrollbar = 1423px of viewport which would hand a hamburger to every 1280px and 1366px laptop. Putting the Call/Text control ABOVE the nav takes the nav out of the logo's row and drops the requirement to 1139 + 48 + 15 = 1202px — without making one thing smaller. Hence the 1220px breakpoint. The five "narrow-desktop tiers" that used to live here (981 / 1024 / 1110 / 1200 / 1280, shrinking the logo to 130px and the nav to 15px) are gone. They existed only to force the single row and are what made the header look undersized. Do not reintroduce them. */ header{ background:linear-gradient(180deg, var(--hdr-cream-1) 0%, var(--hdr-cream-2) 58%, var(--hdr-cream-3) 100%); position:sticky; top:0; z-index:100; border-bottom:0; box-shadow: inset 0 1px 0 rgba(255,255,255,0.9), 0 1px 0 rgba(255,255,255,0.6), 0 8px 22px rgba(23,20,18,0.10); } /* thin orange dimensional edge along the foot of the band */ header::after{ content:""; position:absolute; left:0; right:0; bottom:0; height:3px; background:linear-gradient(90deg, rgba(242,96,12,0.22) 0%, var(--orange) 18%, #FFA25C 50%, var(--orange) 82%, rgba(242,96,12,0.22) 100%); box-shadow:0 -1px 0 rgba(255,255,255,0.55), 0 1px 3px rgba(201,74,3,0.35); pointer-events:none; } /* LAYOUT — brand left (spanning both rows), Call/Text over the nav on the right. CSS grid, so the existing markup order (brand, nav, Call/Text, hamburger) is untouched and no page's HTML has to change. */ .header-inner{ display:grid; grid-template-columns:auto 1fr; grid-template-rows:auto auto; align-items:center; column-gap:24px; row-gap:7px; padding:12px 0; } .brand { grid-column:1; grid-row:1 / span 2; } .ct-banner--sm{ grid-column:2; grid-row:1; justify-self:end; } .main-nav { grid-column:2; grid-row:2; justify-self:end; } .hamburger { grid-column:2; grid-row:1 / span 2; justify-self:end; } /* BRAND — molded cream plate behind the unchanged logo artwork */ .brand{ position:relative; display:flex; align-items:center; flex-shrink:0; padding:15px 18px 17px; border-radius:18px; background:linear-gradient(158deg, #FFFFFF 0%, #FFFFFF 54%, #F5EEE3 100%); border:1px solid var(--hdr-edge-soft); box-shadow: inset 0 1px 0 rgba(255,255,255,0.98), inset 0 -3px 7px rgba(23,20,18,0.055), 0 1px 2px rgba(23,20,18,0.07), 0 9px 20px rgba(23,20,18,0.11); } /* thin recessed orange accent along the foot of the plate */ .brand::after{ content:""; position:absolute; left:20px; right:20px; bottom:6px; height:2px; border-radius:2px; background:linear-gradient(90deg, rgba(242,96,12,0.15), var(--orange) 45%, rgba(242,96,12,0.15)); box-shadow:0 -1px 1px rgba(23,20,18,0.13), 0 1px 0 rgba(255,255,255,0.85); } /* 2026-09-02 — VISIBLE LOGO SIZE. assets/logo.png is 640x284, but the artwork inside it only occupies x 35..620, y 43..229 — 586x187. That is 91.6% of the file's width and just 65.8% of its height: a third of the image is baked-in white margin. So a `width:234px` logo was only ever drawing a 214x68 mark, which is why the header read as undersized no matter what the CSS said. The margin is cropped here rather than in the file: assets/logo.png is also the FOOTER logo (.footer-logo-img on every page), and re-cropping the file would change the footer's aspect ratio too. clip-path hides the margin (it clips to transparent, so the plate's gradient shows through — negative margins alone would have painted the logo's opaque near-white ground over it), and the negative margins pull that hidden margin back out of layout so the plate hugs the artwork. --logo-w is the FILE width. Visible artwork = --logo-w x 0.9156. Responsive tiers below set --logo-w only; the crop maths follows it. rendered height = w x 284/640 = w x 0.44375 margin-top = -(w x 0.44375 x 43/284) = -(w x 0.06719) margin-bottom = -(w x 0.44375 x 54/284) = -(w x 0.08437) margin-left = -(w x 35/640) = -(w x 0.05469) margin-right = -(w x 19/640) = -(w x 0.02969) */ .brand-logo-img{ --logo-w:306px; /* 280px of visible artwork */ width:var(--logo-w); height:auto; display:block; clip-path:inset(15.141% 2.969% 19.014% 5.469%); margin: calc(var(--logo-w) * -0.06719) calc(var(--logo-w) * -0.02969) calc(var(--logo-w) * -0.08437) calc(var(--logo-w) * -0.05469); } /* NAVIGATION — full size, never shrunk */ .main-nav{ display:flex; gap:4px; font-size:1.125rem; /* 18px — raised from 17px, 2026-09-02 */ font-weight:700; color:var(--charcoal); flex-wrap:nowrap; white-space:nowrap; align-items:center; position:relative; /* containing block for .mega — see below */ } .main-nav > a, .nav-item--mega > a{ position:relative; /* 6px horizontal, not 10px: the hover pill's padding is invisible width. Trimming it is what buys the 18px TYPE its room — the type itself is never reduced. */ padding:9px 6px; border-radius:9px; border-bottom:0; color:var(--charcoal); transition:background 0.16s ease, color 0.16s ease, box-shadow 0.16s ease; } .main-nav > a:hover, .nav-item--mega > a:hover{ color:var(--red); border-bottom:0; background:linear-gradient(180deg, #FFFFFF 0%, #F7F0E5 100%); box-shadow: inset 0 1px 0 rgba(255,255,255,0.95), 0 1px 2px rgba(23,20,18,0.08), 0 4px 10px rgba(23,20,18,0.09); } .main-nav a.is-active{ color:var(--red); border-bottom:0; background:linear-gradient(180deg, #FFFFFF 0%, #FBF3E8 100%); box-shadow: inset 0 1px 0 rgba(255,255,255,0.98), inset 0 -2px 5px rgba(23,20,18,0.05), 0 1px 2px rgba(23,20,18,0.08); } /* recessed orange underscore marking the current page */ .main-nav a.is-active::before{ content:""; position:absolute; left:6px; right:6px; bottom:3px; height:2px; border-radius:2px; background:var(--orange); box-shadow:0 -1px 1px rgba(23,20,18,0.14); } /* DESKTOP GUTTER. .header-inner overrides .wrap's `padding:0 24px` with its own vertical-only padding, so the header row has always run edge-to-edge while the body below it is inset 24px. With a molded plate around the logo that flush edge reads as a mistake, so the gutter is restored here — which also lines the logo up with the content column beneath it. Deliberately left at 0 below 981px: the approved 2026-08-25 mobile header fit was measured against a zero-padding row. */ @media (min-width: 981px){ .header-inner{ padding:12px 24px; } } /* The breakpoint block that drives the nav/hamburger swap lives further down, immediately after the .hamburger base rule — it has to, or the base `display:none` beats it on source order and the hamburger never appears. */ /* ============================================================ REUSABLE COMPONENT — Call / Text Banner ( .ct-banner ) This reproduces the approved artwork at `call and text us/call and text.png` (= assets/call-text-banner-reference.png) in live HTML/CSS so it keeps real tel:/sms: links, instead of a flat image. Three sizes: --sm (header), --lg (footer, full width), --card (fitted to a narrower column, used in the "Visit Our Shop" CTA card). ============================================================ */ .ct-banner{ position:relative; background:var(--white); border:2px solid var(--orange); border-radius:28px; box-shadow:0 22px 50px rgba(242,96,12,0.14), 0 18px 40px rgba(23,20,18,0.16), 0 2px 6px rgba(23,20,18,0.08); } .ct-icon-btn{ flex-shrink:0; border-radius:50%; border:3px solid var(--white); display:flex; align-items:center; justify-content:center; color:var(--white); background:radial-gradient(circle at 32% 28%, #FFB066 0%, var(--orange) 55%, var(--orange-dark) 100%); box-shadow:0 10px 20px rgba(242,96,12,0.4), inset 0 2px 3px rgba(255,255,255,0.65), inset 0 -4px 8px rgba(0,0,0,0.22); transition:transform 0.15s ease; } .ct-icon-btn:hover{ transform:translateY(-2px) scale(1.05); } .ct-strip-dot{ width:4px; height:4px; border-radius:50%; background:var(--orange); display:inline-block; flex-shrink:0; } /* ---- Shared banner internals (sized down per variant below) ---- */ .ct-banner-crown{ position:absolute; top:-24px; left:50%; transform:translateX(-50%); width:54px; height:54px; border-radius:50%; background:var(--white); border:2px solid var(--orange); color:var(--orange-dark); display:flex; align-items:center; justify-content:center; box-shadow:0 6px 14px rgba(23,20,18,0.16); } .ct-banner-crown svg{ width:26px; height:26px; } .ct-banner-row{ display:flex; align-items:center; justify-content:center; gap:28px; flex-wrap:wrap; row-gap:14px; } .ct-banner-center{ text-align:center; } .ct-banner-label{ display:flex; align-items:center; justify-content:center; gap:14px; font-size:1.22rem; font-weight:700; font-style:italic; color:var(--charcoal); font-family:var(--font-serif); margin-bottom:4px; } .ct-line{ width:32px; height:2px; background:linear-gradient(90deg, transparent, var(--orange)); } .ct-banner-label .ct-line:last-child{ background:linear-gradient(90deg, var(--orange), transparent); } .ct-banner-phone{ display:block; font-family:var(--font-sans); font-weight:800; color:var(--black); font-size:clamp(1.9rem, 4.4vw, 3.1rem); letter-spacing:0.01em; } .ct-banner-phone:hover{ color:var(--orange-dark); } .ct-banner-strip{ margin-top:22px; background:var(--cream); border:1px solid var(--orange); border-radius:999px; padding:12px 22px; display:flex; align-items:center; justify-content:center; flex-wrap:wrap; gap:8px 12px; font-size:0.8rem; font-weight:700; color:var(--charcoal-soft); text-transform:uppercase; letter-spacing:0.02em; } .ct-banner-strip svg{ width:15px; height:15px; color:var(--orange-dark); flex-shrink:0; } /* ---- Compact variant (header) ---- 2026-09-02: rebuilt as a dimensional cream/orange control to match the molded band. The two compact tiers that used to follow this block (min-width:981 and min-width:1110, shrinking the icons to 30px and the number to 0.8rem) are gone with the rest of the shrink-to-fit strategy — the control is now one size from 481px up. */ .ct-banner--sm{ display:inline-flex; align-items:center; gap:10px; padding:6px 17px 6px 5px; border-radius:999px; flex-shrink:0; background:linear-gradient(180deg, #FFFFFF 0%, #FFFFFF 46%, #F7EFE3 100%); border:2px solid var(--orange); box-shadow: inset 0 1px 0 rgba(255,255,255,0.98), inset 0 -4px 9px rgba(201,74,3,0.10), 0 2px 4px rgba(23,20,18,0.10), 0 10px 22px rgba(242,96,12,0.20); } .ct-banner--sm .ct-icon-btn{ width:38px; height:38px; border-width:2px; } .ct-banner--sm .ct-icon-btn svg{ width:17px; height:17px; } .ct-banner-center-sm{ display:flex; flex-direction:column; line-height:1.2; } .ct-banner-label-sm{ font-size:0.64rem; text-transform:uppercase; letter-spacing:0.07em; color:var(--charcoal-soft); font-weight:700; } .ct-banner-phone-sm{ font-size:1.04rem; font-weight:800; color:var(--black); font-family:var(--font-sans); } .ct-banner-phone-sm:hover{ color:var(--orange-dark); } /* 2026-09-02 — the control reads too small on a real desktop, so it steps up from 861px, where the header row has hundreds of pixels spare. It is held at the size above for 481-860px: at 481px the row is 135 logo + 246 pill + 38 hamburger + 40 gaps = 459px in a 481px window, and the larger pill (285px) would overflow it. */ @media (min-width: 861px){ .ct-banner--sm{ padding:7px 21px 7px 6px; gap:12px; } .ct-banner--sm .ct-icon-btn{ width:44px; height:44px; } .ct-banner--sm .ct-icon-btn svg{ width:20px; height:20px; } .ct-banner-label-sm{ font-size:0.7rem; letter-spacing:0.08em; } .ct-banner-phone-sm{ font-size:1.2rem; } } /* ---- Reduced footer variant — same design, sized down in fixed px (not vw-clamp) so it complements the footer instead of dominating it. ---- */ .ct-banner--footer{ max-width:460px; margin:0 auto; padding:22px 24px 13px; } .ct-banner--footer .ct-banner-row{ gap:16px; } .ct-banner--footer .ct-icon-btn{ width:52px; height:52px; } .ct-banner--footer .ct-icon-btn svg{ width:22px; height:22px; } .ct-banner--footer .ct-banner-label{ font-size:0.98rem; margin-bottom:2px; } .ct-banner--footer .ct-banner-phone{ font-size:1.7rem; } .ct-banner--footer .ct-banner-crown{ width:42px; height:42px; top:-20px; } .ct-banner--footer .ct-banner-crown svg{ width:19px; height:19px; } .ct-banner--footer .ct-banner-strip{ font-size:0.64rem; padding:8px 14px; gap:5px 7px; margin-top:16px; } /* 2026-09-02: restyled into the molded family. This block MUST stay above the responsive section — declared below it, it beat the phone tier on source order and left a 46px plated button on a 390px row. */ .hamburger{ display:none; flex-direction:column; justify-content:center; gap:5px; width:46px; height:46px; cursor:pointer; padding:0 10px; flex-shrink:0; border-radius:12px; background:linear-gradient(158deg, #FFFFFF 0%, #FFFFFF 52%, #F5EEE3 100%); border:1px solid var(--hdr-edge-soft); box-shadow: inset 0 1px 0 rgba(255,255,255,0.98), 0 1px 2px rgba(23,20,18,0.07), 0 6px 14px rgba(23,20,18,0.10); } .hamburger span{ display:block; width:100%; height:2.5px; background:var(--charcoal); border-radius:2px; } /* THE ONE BREAKPOINT. 2026-09-02: moved 1220px -> 1240px. The logo grew to 280px of visible artwork and the nav to 18px, and the row now measures 318px brand plate + 24px gap + 819px nav = 1161px of content, + 48px gutter = 1209px of layout, + 15px scrollbar = 1224px of viewport. 1220px would have been 4px short. Per the owner's instruction the breakpoint moved up rather than the logo or type coming back down; 1240px keeps ~16px of slack and still sits below 1280px, so 1280px and 1366px laptops keep the full navigation. Below it the full nav is replaced by the hamburger — nothing is resized. Placed here, straight after the .hamburger base rule, ON PURPOSE. Both carry the same specificity, so source order decides: higher up the page the base `display:none` won and the hamburger stayed invisible at every width. Do not move this block back above .hamburger. */ @media (min-width: 1240px){ .main-nav{ display:flex; } .hamburger{ display:none; } } @media (max-width: 1239px){ .main-nav{ display:none; } .hamburger{ display:flex; } /* no nav to stack under, so the row collapses back to a simple flex row */ .header-inner{ display:flex; align-items:center; justify-content:space-between; gap:20px; } } .mobile-nav{ display:none; flex-direction:column; background:linear-gradient(180deg, #FFFDFA 0%, #FBF5EC 100%); border-top:1px solid var(--hdr-edge); padding:8px 24px 20px; } .mobile-nav.is-open{ display:flex; } .mobile-nav a{ color:var(--charcoal); padding:12px 0; font-size:1.02rem; font-weight:700; border-bottom:1px solid var(--line); } .mobile-nav-cta{ display:flex; gap:12px; margin-top:16px; flex-wrap:wrap; } .mobile-nav-cta .btn{ flex:1; } /* ============================================================ HERO ============================================================ */ .hero{ background:var(--white); padding:36px 0 0; overflow:hidden; } .hero-grid{ display:grid; grid-template-columns:1fr 1.15fr; gap:44px; align-items:center; } .hero-copy h1{ font-family:var(--font-sans); font-weight:900; text-transform:uppercase; font-size:clamp(2.1rem, 4vw, 3.05rem); line-height:1.08; letter-spacing:-0.01em; color:var(--black); } .hero-copy h1 .accent{ color:var(--red); } /* 2026-09-02 — hero paragraph raised 1.12rem (17.9px) -> 1.2rem (19.2px) to match the Vehicle Makes readability standard. Measure held by widening max-width with it, so the line length does not tighten as the type grows. */ .hero-copy p.lede{ margin-top:18px; font-size:1.2rem; line-height:1.68; color:var(--charcoal-soft); max-width:530px; } .hero-copy .btn-row{ margin-top:22px; } /* ============================================================ HERO TRUST PANEL ( .hero-badges — index.html only ) 2026-09-02, owner-approved redesign. Replaces four separate weak cards that carried 10.9px uppercase labels and 17px icons — the smallest text anywhere on the site — with ONE molded cream/orange dashboard panel holding four internal segments. Built from the same tokens as the frozen Vehicle Makes hero: cream gradient ground, molded outer frame, orange illuminated trim, dimensional inset/outset shadows. The four messages, their icons and the markup are unchanged; only the surface and the sizing move. Sizes: trust titles 19.2px (was 10.9px), icons 30px inside 54px discs (was 17px inside 34px). Nothing here drops below 15px at any width. .hero-badges exists on index.html alone, so this block cannot reach the frozen pages even though it lives in the shared stylesheet. ============================================================ */ /* ---- "View Our Services": molded cream key with orange illuminated inset ---- Chamfered corners come from clip-path, so no extra markup and no image. The href and link text are untouched. */ .hero-copy .btn-row .btn-outline-dark.btn-lg{ position:relative; padding:20px 40px; font-size:1.2rem; font-weight:800; letter-spacing:0.01em; color:var(--black); border:1px solid #DCCFB8; border-radius:0; clip-path:polygon(16px 0, calc(100% - 16px) 0, 100% 16px, 100% calc(100% - 16px), calc(100% - 16px) 100%, 16px 100%, 0 calc(100% - 16px), 0 16px); background: radial-gradient(90% 70% at 12% 0%, rgba(255,255,255,0.95) 0%, rgba(255,255,255,0) 62%), linear-gradient(168deg, #FFFDF9 0%, #FAF3E8 52%, #F2E7D6 100%); box-shadow: inset 0 2px 0 rgba(255,255,255,0.95), inset 0 -3px 0 rgba(0,0,0,0.07), 0 2px 4px rgba(23,20,18,0.08), 0 12px 26px rgba(23,20,18,0.16); transition:transform 0.15s ease, box-shadow 0.15s ease; } /* the recessed orange trim inside the key */ .hero-copy .btn-row .btn-outline-dark.btn-lg::before{ content:""; position:absolute; inset:6px; clip-path:polygon(12px 0, calc(100% - 12px) 0, 100% 12px, 100% calc(100% - 12px), calc(100% - 12px) 100%, 12px 100%, 0 calc(100% - 12px), 0 12px); border:2px solid rgba(242,96,12,0.62); box-shadow:0 0 12px rgba(242,96,12,0.30), inset 0 0 14px rgba(242,96,12,0.10); pointer-events:none; } /* orange arrow at the right, decorative only */ .hero-copy .btn-row .btn-outline-dark.btn-lg::after{ content:"\2192"; margin-left:16px; font-size:1.3rem; font-weight:800; line-height:1; color:var(--orange-dark); text-shadow:0 1px 0 rgba(255,255,255,0.9); } .hero-copy .btn-row .btn-outline-dark.btn-lg:hover{ background: radial-gradient(90% 70% at 12% 0%, rgba(255,255,255,0.98) 0%, rgba(255,255,255,0) 62%), linear-gradient(168deg, #FFFFFF 0%, #FDF8F0 52%, #F6EDDF 100%); color:var(--black); transform:translateY(-2px); box-shadow: inset 0 2px 0 rgba(255,255,255,0.98), 0 2px 4px rgba(23,20,18,0.08), 0 18px 34px rgba(242,96,12,0.24); } .hero-copy .btn-row .btn-outline-dark.btn-lg:active{ transform:translateY(2px); box-shadow:inset 0 3px 8px rgba(0,0,0,0.18), 0 1px 2px rgba(23,20,18,0.10); } .hero-badges{ position:relative; grid-column:1 / -1; display:grid; grid-template-columns:repeat(4, 1fr); gap:0; margin-top:44px; max-width:100%; padding:18px; border-radius:0; clip-path:polygon(30px 0, calc(100% - 30px) 0, 100% 30px, 100% calc(100% - 30px), calc(100% - 30px) 100%, 30px 100%, 0 calc(100% - 30px), 0 30px); border:1px solid var(--hdr-edge); background: radial-gradient(120% 90% at 82% 18%, rgba(242,96,12,0.10) 0%, rgba(242,96,12,0) 58%), radial-gradient(90% 70% at 8% 0%, rgba(255,255,255,0.9) 0%, rgba(255,255,255,0) 60%), linear-gradient(168deg, #FBF4E9 0%, #F7EEE0 46%, #F2E6D4 100%); box-shadow: inset 0 2px 0 rgba(255,255,255,0.95), inset 0 -3px 0 rgba(0,0,0,0.06), 0 2px 4px rgba(23,20,18,0.06), 0 14px 32px rgba(23,20,18,0.13); } /* orange illuminated inner border, the hero's signature detail */ .hero-badges::after{ content:""; position:absolute; inset:9px; clip-path:polygon(24px 0, calc(100% - 24px) 0, 100% 24px, 100% calc(100% - 24px), calc(100% - 24px) 100%, 24px 100%, 0 calc(100% - 24px), 0 24px); border:3px solid rgba(242,96,12,0.6); box-shadow: 0 0 16px rgba(242,96,12,0.30), inset 0 0 22px rgba(242,96,12,0.10); pointer-events:none; } /* restrained corner fasteners */ .hero-badges::before{ content:""; position:absolute; inset:0; background-image: radial-gradient(circle at 21px 21px, #B5A88F 0 3px, #EFE6D6 3px 6px, rgba(0,0,0,0) 6.5px), radial-gradient(circle at calc(100% - 21px) 21px, #B5A88F 0 3px, #EFE6D6 3px 6px, rgba(0,0,0,0) 6.5px), radial-gradient(circle at 21px calc(100% - 21px), #B5A88F 0 3px, #EFE6D6 3px 6px, rgba(0,0,0,0) 6.5px), radial-gradient(circle at calc(100% - 21px) calc(100% - 21px), #B5A88F 0 3px, #EFE6D6 3px 6px, rgba(0,0,0,0) 6.5px); pointer-events:none; } /* four dimensional internal sections, divided by moulded grooves */ .hero-badge-card{ position:relative; z-index:1; display:flex; align-items:center; gap:18px; background:none; border:0; border-radius:0; box-shadow:none; padding:26px 22px; text-align:left; } .hero-badge-card:not(:last-child){ border-right:1px solid rgba(181,168,143,0.55); } .hero-badge-card:not(:last-child)::after{ content:""; position:absolute; top:18px; bottom:18px; right:-1px; width:1px; background:rgba(255,255,255,0.95); } /* dimensional icon disc */ .hero-badge-card .icon{ width:66px; height:66px; border-radius:50%; flex-shrink:0; margin:0; color:var(--white); background:radial-gradient(circle at 32% 26%, #F0575E 0%, var(--red) 52%, var(--red-dark) 100%); border:3px solid var(--white); display:flex; align-items:center; justify-content:center; box-shadow: 0 10px 22px rgba(165,15,21,0.34), inset 0 2px 4px rgba(255,255,255,0.55), inset 0 -5px 10px rgba(0,0,0,0.26); } .hero-badge-card .icon svg{ width:34px; height:34px; } /* 19.2px bold uppercase, two-tone as in the reference */ .hero-badge-card .hb-title{ display:block; font-family:var(--font-sans); font-size:1.2rem; font-weight:900; text-transform:uppercase; letter-spacing:0.01em; line-height:1.16; text-shadow:0 1px 0 rgba(255,255,255,0.9); } .hero-badge-card .hb-a{ color:var(--black); } .hero-badge-card .hb-b{ color:var(--red); display:block; } /* ---- trust panel reflow ---- Below 560px the two columns become one, so the vertical groove is removed and the horizontal groove has to run between every segment instead of only the first two. Type stays at 19.2px on the phone; only the icon and the padding come down. */ /* ---- trust housing reflow ---- 4 across -> 2x2 -> 1 column. The vertical groove becomes a horizontal one at each step. Trust titles hold 19.2px the whole way down; only the icon, the padding and the chamfer come in. */ @media (max-width: 1100px){ .hero-badge-card{ padding:22px 16px; gap:14px; } .hero-badge-card .icon{ width:58px; height:58px; } .hero-badge-card .icon svg{ width:30px; height:30px; } } @media (max-width: 900px){ .hero-badges{ grid-template-columns:repeat(2, 1fr); } .hero-badge-card:not(:last-child){ border-right:0; } .hero-badge-card:not(:last-child)::after{ display:none; } .hero-badge-card:nth-child(odd){ border-right:1px solid rgba(181,168,143,0.55); } .hero-badge-card:nth-child(odd)::after{ content:""; display:block; position:absolute; top:18px; bottom:18px; right:-1px; width:1px; background:rgba(255,255,255,0.95); } .hero-badge-card:nth-child(-n+2){ border-bottom:1px solid rgba(181,168,143,0.55); } .hero-badge-card:nth-child(-n+2)::before{ content:""; position:absolute; left:18px; right:18px; bottom:-1px; height:1px; background:rgba(255,255,255,0.95); } } @media (max-width: 560px){ .hero-badges{ grid-template-columns:1fr; margin-top:28px; padding:12px; clip-path:polygon(20px 0, calc(100% - 20px) 0, 100% 20px, 100% calc(100% - 20px), calc(100% - 20px) 100%, 20px 100%, 0 calc(100% - 20px), 0 20px); } .hero-badges::after{ inset:7px; clip-path:polygon(16px 0, calc(100% - 16px) 0, 100% 16px, 100% calc(100% - 16px), calc(100% - 16px) 100%, 16px 100%, 0 calc(100% - 16px), 0 16px); border-width:2px; } .hero-badge-card{ padding:17px 14px; gap:14px; } .hero-badge-card:nth-child(odd){ border-right:0; } .hero-badge-card:nth-child(odd)::after{ display:none; } .hero-badge-card:nth-child(-n+2){ border-bottom:0; } .hero-badge-card:nth-child(-n+2)::before{ display:none; } .hero-badge-card:not(:last-child){ border-bottom:1px solid rgba(181,168,143,0.55); } .hero-badge-card:not(:last-child)::before{ content:""; position:absolute; left:14px; right:14px; bottom:-1px; height:1px; background:rgba(255,255,255,0.95); display:block; } .hero-badge-card .icon{ width:54px; height:54px; } .hero-badge-card .icon svg{ width:28px; height:28px; } /* the two-tone stack becomes one line on a narrow column */ .hero-badge-card .hb-b{ display:inline; } .hero-copy .btn-row .btn-outline-dark.btn-lg{ padding:18px 26px; font-size:1.12rem; } } .hero-photo{ position:relative; } .hero-social{ display:flex; align-items:center; justify-content:center; gap:20px; margin-bottom:18px; } .hero-social-icon{ width:60px; height:60px; border-radius:50%; flex-shrink:0; display:flex; align-items:center; justify-content:center; color:var(--white); border:3px solid var(--white); box-shadow:0 12px 24px rgba(23,20,18,0.28), inset 0 2px 3px rgba(255,255,255,0.55), inset 0 -5px 9px rgba(0,0,0,0.28); transition:transform 0.15s ease, box-shadow 0.15s ease; } .hero-social-icon svg{ width:28px; height:28px; } .hero-social-icon:hover{ transform:translateY(-4px) scale(1.07); box-shadow:0 16px 30px rgba(23,20,18,0.34), inset 0 2px 3px rgba(255,255,255,0.55), inset 0 -5px 9px rgba(0,0,0,0.28); } .hero-social-icon.instagram{ background:radial-gradient(circle at 30% 105%, #fdf497 0%, #fdf497 6%, #fd5949 42%, #d6249f 62%, #285AEB 92%); } .hero-social-icon.tiktok{ background:radial-gradient(circle at 32% 26%, #3a3a3a 0%, #161616 55%, #000000 100%); } .hero-social-icon.youtube{ background:radial-gradient(circle at 32% 26%, #ff6b62 0%, #FF0000 55%, #c40000 100%); } .hero-photo-frame{ position:relative; border-radius:var(--radius); overflow:hidden; box-shadow:var(--shadow-lg); aspect-ratio:1672/941; background:var(--cream); } .hero-photo-frame img{ width:100%; height:100%; object-fit:cover; } /* Two equal hero panels, STACKED at every width (2026-08-31): team photo on top, Ford promo directly beneath it, linking to the Ford page. Both are 1fr grid rows sharing .hero-photo-frame's fixed aspect-ratio, so they can never differ in size and neither image can stretch. Each fills the full width of the right-hand hero column. */ .hero-photo-pair{ display:grid; grid-template-columns:1fr; gap:18px; } a.hero-photo-frame{ display:block; transition:transform 0.15s ease, box-shadow 0.15s ease; } a.hero-photo-frame:hover{ transform:translateY(-4px); box-shadow:0 30px 62px rgba(23,20,18,0.28); } /* ---------- Trust strip ---------- */ .trust-strip{ background:var(--black); margin-top:32px; } .trust-strip-inner{ display:flex; align-items:center; justify-content:center; flex-wrap:wrap; gap:14px 40px; padding:20px 24px; text-align:center; } .trust-strip .trust-item{ display:flex; align-items:center; gap:10px; position:relative; } .trust-strip .trust-item svg{ width:19px; height:19px; color:var(--red); flex-shrink:0; } .trust-strip .trust-item span{ font-size:0.8rem; font-weight:700; color:var(--white); text-transform:uppercase; letter-spacing:0.04em; } .trust-strip .trust-item:not(:last-child)::after{ content:""; position:absolute; right:-20px; top:50%; transform:translateY(-50%); width:4px; height:4px; border-radius:50%; background:var(--red); } /* ============================================================ SERVICE DIRECTORY — "Everything We Do at Sunroof King" Text-only list restored from the pre-redesign homepage backup. Sits between the hero/trust strip and the 12-card services grid. No photos, no icons — deliberately plain and scannable. ============================================================ */ .directory-section{ background:var(--white); padding:44px 0 6px; } .directory-grid{ display:grid; grid-template-columns:repeat(3, 1fr); gap:36px; max-width:1080px; margin:0 auto; } .directory-group h3{ font-family:var(--font-serif); font-size:1.05rem; color:var(--black); padding-bottom:9px; margin-bottom:8px; border-bottom:2px solid rgba(210,20,27,0.28); } .directory-list{ list-style:none; } /* 2026-09-07 READABILITY: 0.86rem = 13.76px across 27 rows, and at line-height 1.3 the rows were tight as well as small. 0.97rem = 15.52px with 1.45 leading; the dashed rules and 700 weight are unchanged. */ .directory-list li{ font-weight:700; font-size:0.97rem; color:var(--charcoal); padding:7px 0; border-bottom:1px dashed var(--line); line-height:1.45; } .directory-list li:last-child{ border-bottom:none; } /* ============================================================ SERVICES ============================================================ */ .services-section{ background:var(--white); } .svc-grid{ display:grid; grid-template-columns:repeat(6, 1fr); gap:20px; } .svc-card{ background:var(--white); border:1px solid var(--line); border-radius:var(--radius); overflow:hidden; box-shadow:var(--shadow-sm); text-align:center; transition:transform 0.18s ease, box-shadow 0.18s ease; } .svc-card:hover{ transform:translateY(-4px); box-shadow:var(--shadow-md); } .svc-photo{ position:relative; aspect-ratio:4/3; overflow:hidden; background:var(--cream); } .svc-photo img{ width:100%; height:100%; object-fit:cover; display:block; } .svc-icon{ position:absolute; left:50%; bottom:-19px; transform:translateX(-50%); width:38px; height:38px; border-radius:50%; background:var(--red); color:var(--white); display:flex; align-items:center; justify-content:center; border:3px solid var(--white); box-shadow:var(--shadow-sm); } .svc-icon svg{ width:18px; height:18px; } .svc-body{ padding:28px 14px 18px; } .svc-body h3{ font-family:var(--font-sans); font-size:0.92rem; font-weight:800; text-transform:uppercase; letter-spacing:0.01em; margin-bottom:6px; line-height:1.3; } /* 2026-09-07 READABILITY: 0.86rem computed to 13.76px. This is the sentence that tells a visitor what each service actually is - the most-read body copy in the services grid - and it was the smallest real prose on the site. 0.97rem = 15.52px, with the leading opened 1.48 -> 1.55. */ .svc-body p{ font-size:0.97rem; color:var(--charcoal-soft); line-height:1.55; } /* Service cards that link to a detail page. Purely additive: keeps the exact approved .svc-card appearance and hover lift, just makes the card clickable and adds a small "View Details" affordance. */ a.svc-card--link{ display:block; color:inherit; text-decoration:none; } .svc-more{ display:inline-block; margin-top:10px; font-size:0.74rem; font-weight:800; text-transform:uppercase; letter-spacing:0.06em; color:var(--red); } .svc-more::after{ content:" \2192"; } a.svc-card--link:hover .svc-more{ text-decoration:underline; } /* ============================================================ WHY CHOOSE US — dark section ============================================================ */ .why-section{ background:var(--black); padding:52px 0; } .why-section .eyebrow-rule h2{ color:var(--white); } .why-grid{ display:grid; grid-template-columns:repeat(4, 1fr); gap:22px; margin-top:28px; } .why-card{ display:flex; align-items:flex-start; gap:16px; } .why-icon{ width:52px; height:52px; border-radius:50%; background:var(--red); color:var(--white); display:flex; align-items:center; justify-content:center; flex-shrink:0; } .why-icon svg{ width:24px; height:24px; } .why-card h3{ font-family:var(--font-sans); font-size:0.98rem; font-weight:800; text-transform:uppercase; color:var(--white); margin-bottom:6px; line-height:1.3; } .why-card p{ font-size:0.86rem; color:rgba(255,255,255,0.68); line-height:1.5; } /* ============================================================ OWNER MESSAGE — "A Personal Note" (homepage only) ============================================================ */ .owner-section{ background:var(--white); padding:48px 0; } .owner-card{ display:grid; grid-template-columns:300px 1fr; gap:40px; align-items:center; max-width:1140px; margin:0 auto; background:var(--cream); border:1px solid var(--line); border-radius:20px; box-shadow:var(--shadow-md); padding:36px 42px; } .owner-photo-col{ text-align:center; } .owner-photo-frame{ border-radius:var(--radius); overflow:hidden; box-shadow:var(--shadow-sm); border:1px solid var(--line); aspect-ratio:4/5; } .owner-photo-frame img{ width:100%; height:100%; object-fit:cover; } .owner-name{ font-family:var(--font-serif); font-style:italic; font-size:1.2rem; color:var(--black); margin-top:14px; } .owner-title{ font-size:0.72rem; font-weight:800; text-transform:uppercase; letter-spacing:0.08em; color:var(--charcoal-soft); margin-top:5px; padding-top:9px; border-top:1px solid var(--line); display:inline-block; } .owner-copy .eyebrow-rule{ justify-content:flex-start; margin-bottom:4px; } .owner-copy .eyebrow-rule .line{ display:none; } .owner-copy .eyebrow-rule h2{ font-size:1.7rem; text-transform:none; } .owner-subtitle{ color:var(--red); font-weight:800; text-transform:uppercase; letter-spacing:0.14em; font-size:0.72rem; margin-bottom:14px; display:flex; align-items:center; gap:12px; } .owner-subtitle::before, .owner-subtitle::after{ content:""; width:26px; height:2px; background:var(--red); } .owner-copy p{ color:var(--charcoal); font-size:0.98rem; line-height:1.68; margin-bottom:11px; } .owner-signoff{ font-family:var(--font-sans); font-weight:800; color:var(--black); font-size:0.92rem; margin-bottom:0 !important; } /* ============================================================ OUR PROCESS ============================================================ */ .process-section{ background:var(--gray-light); padding:40px 0; } .process-row{ display:flex; align-items:flex-start; justify-content:center; gap:0; margin-top:26px; flex-wrap:wrap; } .process-step{ display:flex; flex-direction:column; align-items:center; text-align:center; width:132px; } .process-icon{ width:48px; height:48px; border-radius:50%; background:var(--red); color:var(--white); display:flex; align-items:center; justify-content:center; box-shadow:var(--shadow-sm); margin-bottom:10px; } .process-icon svg{ width:21px; height:21px; } .process-step h3{ font-family:var(--font-sans); font-size:0.82rem; font-weight:800; text-transform:uppercase; margin-bottom:3px; } .process-step p{ font-size:0.74rem; color:var(--charcoal-soft); line-height:1.35; } .process-arrow{ color:var(--red); flex-shrink:0; align-self:center; margin-top:12px; } .process-arrow svg{ width:18px; height:18px; } /* ============================================================ VISIT SHOP + CTA ============================================================ */ .shop-section{ background:var(--white); } .shop-grid{ display:grid; grid-template-columns:1.3fr 1fr; gap:28px; align-items:stretch; } .shop-photo{ border-radius:var(--radius); overflow:hidden; box-shadow:var(--shadow-md); } .shop-photo img{ width:100%; height:100%; object-fit:cover; min-height:340px; } .shop-info-stack{ display:flex; flex-direction:column; justify-content:center; gap:22px; } .shop-info-card{ background:var(--white); border:1px solid var(--line); border-radius:var(--radius); box-shadow:var(--shadow-sm); padding:28px 30px; } .shop-info-card h3{ font-size:1.3rem; margin-bottom:4px; } .shop-info-card .shop-info-highlight{ color:var(--red); font-weight:800; text-transform:uppercase; font-size:0.92rem; letter-spacing:0.03em; margin-bottom:16px; } .shop-info-line{ display:flex; align-items:flex-start; gap:12px; padding:9px 0; border-bottom:1px dashed var(--line); font-size:0.92rem; font-weight:600; color:var(--charcoal); } .shop-info-line:last-child{ border-bottom:none; } .shop-info-line svg{ width:19px; height:19px; color:var(--red); flex-shrink:0; margin-top:2px; } .shop-info-line a{ color:var(--red); font-weight:700; } .shop-info-line a:hover{ color:var(--red-dark); } /* ============================================================ FOOTER ============================================================ */ footer{ background:var(--black); color:rgba(255,255,255,0.85); padding:32px 0 0; } .footer-grid{ display:grid; grid-template-columns:1.3fr 1fr 1fr 1fr; gap:28px; padding-bottom:20px; border-bottom:1px solid rgba(255,255,255,0.12); } .footer-logo-chip{ display:inline-block; background:var(--white); padding:8px 14px; border-radius:8px; line-height:0; } .footer-logo-img{ height:48px; width:auto; display:block; } /* 2026-09-07 READABILITY: same reasoning as .footer-col above - 14.08px at 68% opacity. 0.95rem = 15.2px. */ .footer-brand p{ font-size:0.95rem; line-height:1.6; margin-top:10px; color:rgba(255,255,255,0.68); } .footer-cta{ padding:10px 0 0; } /* CONTRAST FIX 2 (2026-09-07 QC): --red (#D2141B) on the near-black footer (#171412) measured 3.37:1 at 12.5px - below the 4.5:1 WCAG AA floor. The brand red is unchanged everywhere it sits on a light ground; this is a lighter tint of the SAME red used only where it sits on the dark footer, and it measures ~4.8:1. Size, weight, tracking and case are unchanged. */ .footer-col h4{ color:#F4363E; text-transform:uppercase; letter-spacing:0.08em; font-size:0.78rem; margin-bottom:12px; font-weight:800; } /* 2026-09-07 READABILITY: 0.88rem = 14.08px, set at 500 weight in white at 72% opacity on a near-black ground - the lowest-contrast text on the site, so it read smaller than its measurement. 0.95rem = 15.2px. Colour, weight, spacing and the four-column structure are untouched. */ .footer-col a, .footer-col p{ display:block; font-size:0.95rem; font-weight:500; margin-bottom:8px; color:rgba(255,255,255,0.72); } .footer-col a:hover{ color:var(--red); } .footer-col .footer-line-icon{ display:flex; align-items:flex-start; gap:9px; } .footer-col .footer-line-icon svg{ width:16px; height:16px; color:var(--red); flex-shrink:0; margin-top:2px; } .footer-bottom{ background:var(--red); margin-top:0; padding:9px 0; } /* 2026-09-07 READABILITY: 0.82rem = 13.12px, and it carries the copyright and the Privacy Policy link. 0.88rem = 14.08px. The red bar, white text, 700 weight and two-child flex row are unchanged, so nothing moves. */ .footer-bottom-inner{ display:flex; justify-content:space-between; flex-wrap:wrap; gap:8px; font-size:0.88rem; color:var(--white); font-weight:700; } /* 2026-09-01 — Privacy Policy link in the footer-bottom row. Additive only: the row keeps its frozen red bar, white text, 0.82rem size and 700 weight, and stays a two-child flex row, so nothing moves. The underline is the only thing that marks it as a link, since a{color:inherit} would otherwise make it indistinguishable from the copyright text beside it. */ .footer-bottom-inner a{ text-decoration:underline; text-underline-offset:2px; white-space:nowrap; } .footer-bottom-inner a:hover{ text-decoration:none; } /* ============================================================ RESPONSIVE ============================================================ */ @media (max-width: 1100px){ .svc-grid{ grid-template-columns:repeat(3, 1fr); } .why-grid{ grid-template-columns:repeat(2, 1fr); } .hero-badges{ max-width:100%; } /* already a 2-col panel; only the cap is released */ .directory-grid{ grid-template-columns:1fr 1fr; max-width:640px; } } /* 2026-09-02: the nav/hamburger swap used to live here. It now happens at 1220px — see "THE ONE BREAKPOINT" up in the header section. Everything else in this block is page layout and is unchanged. */ @media (max-width: 980px){ .hero-grid{ grid-template-columns:1fr; } .hero-photo{ order:-1; } .hero-photo-pair{ gap:14px; } .footer-grid{ grid-template-columns:1fr 1fr; } .shop-grid{ grid-template-columns:1fr; } .owner-card{ grid-template-columns:240px 1fr; gap:30px; padding:30px 34px; } } /* Brand-plate tiers. CASCADING max-width steps, so they must stay in this order: 860, then 700, then the 640 block below (which already carries the 135px logo), then 560. Each simply overrides the one above it. */ @media (max-width: 860px){ .brand{ padding:7px 12px 9px; border-radius:13px; } .brand-logo-img{ --logo-w:262px; } /* 240px visible */ } @media (max-width: 760px){ .owner-card{ grid-template-columns:1fr; gap:20px; text-align:center; padding:26px 22px; border-radius:16px; } .owner-photo-frame{ max-width:220px; margin:0 auto; aspect-ratio:1/1; } .owner-copy{ text-align:left; } } @media (max-width: 700px){ .process-row{ flex-direction:column; align-items:center; gap:24px; } .process-arrow{ display:none; } .brand{ padding:6px 10px 8px; border-radius:12px; } .brand-logo-img{ --logo-w:216px; } /* 198px visible */ .brand::after{ left:9px; right:9px; bottom:4px; } } @media (max-width: 640px){ .brand-logo-img{ --logo-w:147px; } /* 135px visible - unchanged from the approved mobile size */ .hero{ padding-top:32px; } .hero-copy h1{ font-size:1.9rem; } .btn-row{ flex-direction:column; align-items:stretch; } .btn{ text-align:center; } /* single column on phones: the divider logic follows in the block below */ .trust-strip-inner{ gap:10px 20px; } .section{ padding:52px 0; } .eyebrow-rule h2{ font-size:1.5rem; } .svc-grid{ grid-template-columns:1fr 1fr; gap:14px; } .svc-body{ padding:24px 10px 16px; } .svc-body h3{ font-size:0.8rem; } .why-grid{ grid-template-columns:1fr; } .directory-section{ padding:36px 0 4px; } .directory-grid{ grid-template-columns:1fr; max-width:100%; gap:26px; } .footer-grid{ grid-template-columns:1fr; gap:28px; } .footer-bottom-inner{ flex-direction:column; text-align:center; justify-content:center; } .ct-banner--footer{ padding:24px 18px 14px; border-radius:22px; } .ct-banner--footer .ct-icon-btn{ width:46px; height:46px; } .ct-banner--footer .ct-icon-btn svg{ width:19px; height:19px; } .ct-banner--footer .ct-banner-strip{ font-size:0.6rem; padding:8px 12px; gap:5px 8px; } } :focus-visible{ outline:3px solid var(--red); outline-offset:2px; } /* Mobile: show the shop photo whole. The 340px min-height on .shop-photo img squeezes a 16:9 photo into a near-square box and crops ~46% of its width, cutting off the Sunroof King signage. .shop-photo is used by index.html only. */ @media (max-width: 640px){ .shop-photo img{ min-height:0; height:auto; aspect-ratio:16/9; } } /* PHONE: the molded plate and the plated hamburger are switched OFF here. The cut-off is 560px, not 480px. At 481px the plate (+22px) and the plated hamburger (+8px) put the row at 489px in a 481px window — an 8px overflow, because the Call/Text control does not compact until 480px. Dropping both at 560px leaves 481-560 at 459px, comfortably clear, and hands the approved 2026-08-25 mobile arrangement back untouched at its approved sizes. The cream band and the orange edge still carry the look down to the phone. */ @media (max-width: 560px){ .brand{ padding:0; border:0; border-radius:0; background:none; box-shadow:none; } .brand::after{ display:none; } .hamburger{ width:38px; height:38px; padding:0; border:0; background:none; box-shadow:none; border-radius:0; } .hamburger span{ height:2px; } } /* ============================================================ MOBILE HEADER — CALL / TEXT CTA (added 2026-08-25) The header Call/Text pill used to be switched off below 700px (`.ct-banner--sm{ display:none }`), leaving phones with only a logo and a hamburger. Mobile is the primary customer experience, so the CTA now stays in the header at every width. Nothing here is new design: the 701-980px band already renders exactly this arrangement (logo + Call/Text pill + hamburger on one row) and is approved. These rules only size that same arrangement down so it fits a phone. The markup, the wording, and the tel:/sms: hrefs are untouched. Desktop (>= 981px) is not reached by any rule below. Fit arithmetic, measured on staging at the header's real widths (the header row has no horizontal padding: `.header-inner{ padding:14px 0 }` overrides `.wrap`, so the full viewport width is available): <= 700px 205 + 240 + 38 + 48 gaps = 531 fits from 531px <= 480px 135 + 204 + 38 + 24 gaps = 401 fits from 402px <= 400px 118 + 195 + 38 + 20 gaps = 371 fits from 372px <= 374px wraps to two rows, so it cannot overflow at any width ============================================================ */ /* Step 1 — 481-700px. The pill fits at its approved size; it only had to stop being hidden. No other change in this band. */ /* Step 2 — <= 480px. Below ~462px the approved pill no longer clears the logo and the hamburger, so the pill is sized down. Wording, colours, artwork and links are unchanged; only metrics move. */ @media (max-width: 480px){ .header-inner{ gap:12px; } .ct-banner--sm{ padding:4px 12px 4px 4px; gap:7px; } .ct-banner--sm .ct-icon-btn{ width:34px; height:34px; } .ct-banner--sm .ct-icon-btn svg{ width:15px; height:15px; } .ct-banner-label-sm{ font-size:0.55rem; letter-spacing:0.04em; } .ct-banner-phone-sm{ font-size:0.86rem; } /* Touch targets. The icon buttons are 34px so the pill stays compact, but a tap target must be at least 44px. An empty, transparent ::after centred on each button extends the hit area to 44px without the artwork growing: the pseudo-element is part of the , so a tap anywhere in it still triggers the same tel:/sms: link. The centre text link reaches 44px through min-height instead, which is shorter than the pill's own height and so does not make the header taller. */ .ct-banner--sm .ct-icon-btn{ position:relative; } .ct-banner--sm .ct-icon-btn::after{ content:""; position:absolute; top:50%; left:50%; transform:translate(-50%, -50%); width:44px; height:44px; border-radius:50%; } .ct-banner-center-sm{ min-height:44px; justify-content:center; } } /* Step 3 — <= 400px. The last step that keeps one row on a 375px iPhone. The logo takes one more step down, 135px -> 118px, continuing the reduction it already makes at 981px (205px) and 640px (135px). */ @media (max-width: 400px){ .header-inner{ gap:10px; } .brand-logo-img{ --logo-w:129px; } /* 118px visible - unchanged from the approved mobile size */ .ct-banner--sm{ padding:4px 10px 4px 4px; gap:6px; } .ct-banner-phone-sm{ font-size:0.82rem; } } /* Step 4 — <= 374px. Narrower than any current iPhone (SE is 375px), so this is a safety net rather than a layout anyone should see. Rather than let the row overflow, the pill drops onto its own full-width line beneath the logo and hamburger. Wrapping is done with flex order on the existing elements, so the markup order is untouched. */ @media (max-width: 374px){ .header-inner{ flex-wrap:wrap; row-gap:8px; } .brand{ order:1; } .hamburger{ order:2; margin-left:auto; } .ct-banner--sm{ order:3; flex-basis:100%; justify-content:center; } } /* ============================================================ VEHICLE MAKES MEGA-MENU (desktop) — added 2026-08-31 One top-level nav item that is BOTH a link to /vehicle-makes/ and the trigger for a grouped panel. Opens on hover and on keyboard focus (:focus-within), so it needs no extra focusable control in the nav row — the header has no width left for one. Escape and outside-click are handled in script.js. Brands with a finished page are links; the rest are plain spans, same rule as the hub itself. No dead links. ============================================================ */ /* 2026-09-02: .nav-item--mega gives up its containing block and .main-nav takes it (see `position:relative` on .main-nav above), so the 880px panel is anchored to the RIGHT EDGE OF THE NAV instead of being centred on the "Vehicle Makes" item. Centred, the item's new position further right pushed the panel past the viewport and gave every page a horizontal scrollbar — even while closed, because visibility:hidden still counts toward scrollWidth. Hover, focus-within, Escape and outside-click behaviour are unchanged. */ .nav-item--mega{ position:static; display:flex; align-items:center; } .nav-item--mega > a::after{ content:""; display:inline-block; width:0; height:0; margin-left:5px; border-left:3.5px solid transparent; border-right:3.5px solid transparent; border-top:4px solid currentColor; vertical-align:middle; transition:transform 0.15s ease; } .nav-item--mega:hover > a::after, .nav-item--mega:focus-within > a::after{ transform:rotate(180deg); } .mega{ position:absolute; top:calc(100% + 10px); left:auto; right:0; transform:translateY(6px); width:min(880px, calc(100vw - 48px)); background:linear-gradient(180deg, #FFFFFF 0%, #FDFAF5 100%); border:1px solid var(--hdr-edge-soft); border-radius:14px; box-shadow:0 2px 6px rgba(23,20,18,0.08), 0 26px 60px rgba(23,20,18,0.22); padding:26px 28px 24px; display:grid; grid-template-columns:repeat(3, 1fr); gap:26px; opacity:0; visibility:hidden; pointer-events:none; transition:opacity 0.16s ease, transform 0.16s ease, visibility 0.16s; z-index:120; } .nav-item--mega:hover .mega, .nav-item--mega:focus-within .mega, .mega.is-open{ opacity:1; visibility:visible; pointer-events:auto; transform:translateY(0); } /* 2026-09-04 — HOVER BRIDGE. `.mega` is offset 10px below the nav row, and the panel is opened only by `.nav-item--mega:hover`. That left a ~16px band of plain header between the "Vehicle Makes" item and the panel: moving the pointer down toward the menu crossed non-hoverable ground, `:hover` dropped, and the panel closed before the pointer could reach it. This invisible strip spans that band and, being a child of `.mega` (itself inside `.nav-item--mega`), keeps `:hover` true across the crossing. It is transparent, adds no layout, and inherits `pointer-events` from `.mega` — so while the menu is CLOSED it is `pointer-events:none` and cannot swallow clicks on the header beneath it. Desktop only: the panel does not exist below 981px, so mobile is untouched. */ .mega::before{ content:""; position:absolute; left:0; right:0; top:-18px; height:18px; background:transparent; } .mega-group h4{ font-family:var(--font-sans); font-size:0.95rem; font-weight:900; text-transform:uppercase; letter-spacing:0.08em; color:var(--charcoal); padding-bottom:9px; margin-bottom:11px; border-bottom:2px solid var(--red); } .mega-list{ display:flex; flex-direction:column; gap:1px; } .mega-list a, .mega-list span{ font-size:1.05rem; font-weight:600; line-height:1.3; padding:7px 9px; border-radius:6px; border-bottom:0; } .mega-list span{ color:var(--charcoal-soft); font-weight:500; } .mega-list a{ color:var(--red); } .mega-list a:hover{ background:var(--cream); color:var(--red-dark); border-bottom:0; } .mega-foot{ grid-column:1 / -1; border-top:1px solid var(--line); padding-top:14px; margin-top:2px; display:flex; align-items:center; justify-content:space-between; gap:16px; flex-wrap:wrap; } .mega-foot p{ font-size:0.9rem; color:var(--charcoal-soft); margin:0; } .mega-foot a{ font-size:0.92rem; font-weight:800; color:var(--red); border-bottom:0; } .mega-foot a:hover{ text-decoration:underline; } @media (prefers-reduced-motion: reduce){ .mega{ transition:none; } .nav-item--mega > a::after{ transition:none; } } /* ---------- Mobile: Vehicle Makes as an expandable group ---------- 2026-09-02 — SPLIT INTO TWO CONTROLS. The whole row used to be one full-width