/* ============================================================ LEGACY SEO PAGES (vehicle-specific + specialty pages) Used by: toyota-camry-sunroof-repair.html ford-sunroof.html mercedes-panoroof-fix-recommended.html shuttered-panoramic-sunroof-replacement.html SCOPE: every selector is prefixed .lg- and lives in this file alone, so the frozen Gallery / Reviews / FAQ / Knowledge Center / Contact pages and the shared header + footer are never affected. Colours, radii and shadows come from the existing site tokens. ============================================================ */ /* ---------- Hero: copy left, contained real photo right ---------- */ .lg-hero-grid{ grid-template-columns:1.5fr 1fr; gap:44px; align-items:center; } .lg-kicker{ font-family:var(--font-sans); font-size:0.76rem; font-weight:800; letter-spacing:0.13em; text-transform:uppercase; color:var(--orange); margin-bottom:12px; } .lg-hero-copy .lede{ font-weight:800; color:var(--charcoal); font-size:1.06rem; margin-top:12px; margin-bottom:16px; } .lg-hero-copy p:not(.lede):not(.lg-kicker){ color:var(--charcoal-soft); font-size:0.97rem; line-height:1.72; margin-bottom:14px; } .lg-hero-photo{ display:flex; justify-content:center; } /* Contained, never a billboard. Shown whole so nothing important is cropped. */ .lg-hero-photo img{ width:100%; max-width:430px; height:auto; display:block; border-radius:18px; box-shadow:0 12px 30px rgba(23,20,18,0.15); } /* ---------- Symptom list ---------- */ .lg-symptoms{ display:grid; grid-template-columns:repeat(2, 1fr); gap:14px; margin-top:26px; } .lg-symptom{ display:flex; gap:13px; align-items:flex-start; background:var(--white); border:1px solid var(--line); border-radius:var(--radius); box-shadow:var(--shadow-sm); padding:18px 20px; } .lg-symptom svg{ width:20px; height:20px; color:var(--red); flex-shrink:0; margin-top:2px; } .lg-symptom span{ font-size:0.94rem; color:var(--charcoal); line-height:1.55; } /* ---------- Numbered process steps ---------- */ .lg-steps{ counter-reset:lgstep; margin-top:26px; max-width:860px; } .lg-step{ counter-increment:lgstep; display:flex; gap:18px; align-items:flex-start; padding:18px 0; border-bottom:1px solid var(--line); } .lg-step:last-child{ border-bottom:0; } .lg-step::before{ content:counter(lgstep); flex-shrink:0; width:36px; height:36px; border-radius:50%; background:var(--red); color:var(--white); font-family:var(--font-sans); font-weight:800; font-size:0.95rem; display:flex; align-items:center; justify-content:center; } .lg-step h3{ font-family:var(--font-sans); font-size:0.95rem; font-weight:800; text-transform:uppercase; letter-spacing:0.02em; color:var(--charcoal); margin-bottom:5px; } .lg-step p{ font-size:0.95rem; color:var(--charcoal-soft); line-height:1.65; } /* ---------- Body copy + model lists ---------- */ .lg-prose{ max-width:820px; } .lg-prose p{ color:var(--charcoal-soft); font-size:0.98rem; line-height:1.75; margin-bottom:15px; } .lg-prose p:last-child{ margin-bottom:0; } .lg-prose a{ color:var(--red); font-weight:700; } .lg-prose a:hover{ text-decoration:underline; } .lg-models{ display:flex; flex-wrap:wrap; gap:11px; margin-top:22px; } .lg-model{ display:inline-flex; align-items:center; background:var(--white); border:1.5px solid rgba(242,96,12,0.32); border-radius:999px; padding:9px 18px; font-family:var(--font-sans); font-size:0.88rem; font-weight:700; color:var(--charcoal); } /* ---------- Two photos side by side, contained ---------- */ .lg-photo-pair{ display:grid; grid-template-columns:1fr 1fr; gap:22px; max-width:900px; margin:30px auto 0; } .lg-photo{ border-radius:var(--radius); overflow:hidden; border:1px solid var(--line); box-shadow:var(--shadow-sm); aspect-ratio:4/3; } .lg-photo img{ width:100%; height:100%; object-fit:cover; display:block; } .lg-photo-caption{ text-align:center; color:var(--charcoal-soft); font-size:0.9rem; margin-top:16px; } /* ---------- Related service links ---------- */ .lg-related{ display:grid; grid-template-columns:repeat(3, 1fr); gap:18px; margin-top:28px; } .lg-related-card{ display:block; background:var(--white); border:1px solid var(--line); border-radius:var(--radius); box-shadow:var(--shadow-sm); padding:22px 22px 20px; text-decoration:none; color:inherit; transition:transform 0.18s ease, box-shadow 0.18s ease; } .lg-related-card:hover{ transform:translateY(-3px); box-shadow:var(--shadow-md); } .lg-related-card h3{ font-family:var(--font-sans); font-size:0.94rem; font-weight:800; text-transform:uppercase; letter-spacing:0.01em; color:var(--charcoal); margin-bottom:7px; line-height:1.3; } .lg-related-card p{ font-size:0.89rem; color:var(--charcoal-soft); line-height:1.6; } .lg-related-card .lg-more{ display:inline-block; margin-top:11px; font-size:0.8rem; font-weight:800; text-transform:uppercase; letter-spacing:0.05em; color:var(--red); } .lg-related-card:hover .lg-more{ text-decoration:underline; } /* ---------- Shop facts strip (plain info, not a promo banner) ---------- */ .lg-facts{ max-width:860px; margin:0 auto; background:var(--white); border:1px solid var(--line); border-radius:var(--radius); box-shadow:var(--shadow-sm); padding:28px 30px; display:grid; grid-template-columns:repeat(2, 1fr); gap:18px 30px; } .lg-fact{ display:flex; gap:13px; align-items:flex-start; } .lg-fact svg{ width:20px; height:20px; color:var(--red); flex-shrink:0; margin-top:2px; } .lg-fact div{ font-size:0.95rem; color:var(--charcoal-soft); line-height:1.6; } .lg-fact strong{ display:block; font-family:var(--font-sans); font-size:0.77rem; font-weight:800; letter-spacing:0.06em; text-transform:uppercase; color:var(--charcoal); margin-bottom:3px; } .lg-facts a{ color:var(--red); font-weight:700; } .lg-facts a:hover{ text-decoration:underline; } /* ---------- Responsive ---------- */ @media (max-width: 900px){ .lg-hero-grid{ grid-template-columns:1fr; gap:30px; } .lg-hero-copy{ order:1; } .lg-hero-photo{ order:2; } .lg-symptoms{ grid-template-columns:1fr; } .lg-related{ grid-template-columns:1fr; max-width:520px; margin-inline:auto; } .lg-facts{ grid-template-columns:1fr; } } @media (max-width: 640px){ .lg-photo-pair{ grid-template-columns:1fr; gap:16px; max-width:420px; } .lg-facts{ padding:24px 22px; } .lg-step{ gap:14px; } } /* ============================================================ CAMRY PAGE — real repair video in the hero + portrait photo trio Video behaviour mirrors the approved Page #6 / Gallery pattern: poster first, transparent click target, no autoplay, no sound until the visitor presses play. ============================================================ */ .lg-hero-video{ display:flex; justify-content:center; } .lg-video-frame{ position:relative; width:100%; max-width:300px; aspect-ratio:9/16; overflow:hidden; border:3px solid var(--orange); border-radius:18px; box-shadow:0 10px 28px rgba(23,20,18,0.16); background:var(--charcoal); } .lg-video-frame video{ width:100%; height:100%; display:block; object-fit:cover; background:var(--charcoal); } /* Transparent click target. The poster artwork carries its own play graphic, so nothing visible is drawn on top of it. */ .lg-video-play{ display:none; } .lg-video-frame.js-overlay .lg-video-play{ display:block; position:absolute; inset:0; width:100%; height:100%; margin:0; padding:0; border:0; background:transparent; cursor:pointer; -webkit-appearance:none; appearance:none; transition:background 0.18s ease; } .lg-video-frame.js-overlay .lg-video-play:hover{ background:rgba(242,96,12,0.12); } .lg-video-frame.js-overlay .lg-video-play:focus-visible{ outline:3px solid var(--orange); outline-offset:-8px; } .lg-video-frame.is-playing .lg-video-play{ display:none; } /* Three portrait photos. 3/4 matches the source files, so nothing is cropped. */ .lg-photo-trio{ display:grid; grid-template-columns:repeat(3, 1fr); gap:20px; max-width:840px; margin:30px auto 0; } .lg-photo-tall{ border-radius:var(--radius); overflow:hidden; border:1px solid var(--line); box-shadow:var(--shadow-sm); aspect-ratio:3/4; } .lg-photo-tall img{ width:100%; height:100%; object-fit:cover; display:block; } @media (max-width: 900px){ .lg-hero-video{ order:2; } } @media (max-width: 640px){ .lg-video-frame{ max-width:260px; } .lg-photo-trio{ grid-template-columns:1fr; gap:16px; max-width:330px; } } /* ============================================================ VEHICLE MAKES HUB ( .vm-* ) — /vehicle-makes/ Added 2026-08-31 (Phase 3). Scoped to the hub page only; no existing rule is modified. Region cards reuse the sitewide card look; brand chips come in two states, and the difference is the whole point of the page: a.vm-brand — a completed landing page exists, so it links span.vm-brand — we service the make, but no page is built yet Listing every make answers "do you work on my vehicle?" without creating dead links or thin placeholder pages. ============================================================ */ .vm-regions{ display:grid; grid-template-columns:repeat(3, 1fr); gap:26px; margin-top:8px; } .vm-region{ background:var(--white); border:1px solid var(--line); border-radius:14px; box-shadow:var(--shadow-sm); padding:26px 24px 28px; } .vm-region > h3{ font-family:var(--font-sans); font-size:1.05rem; font-weight:900; text-transform:uppercase; letter-spacing:0.02em; color:var(--charcoal); padding-bottom:12px; margin-bottom:16px; border-bottom:3px solid var(--red); } .vm-sub{ font-size:0.74rem; font-weight:800; text-transform:uppercase; letter-spacing:0.06em; color:var(--charcoal-soft); margin:16px 0 9px; } .vm-sub:first-of-type{ margin-top:0; } .vm-brands{ display:flex; flex-wrap:wrap; gap:8px; } .vm-brand{ display:inline-flex; align-items:center; gap:6px; font-size:0.88rem; font-weight:700; line-height:1.2; padding:9px 13px; border-radius:8px; border:1px solid var(--line); background:var(--cream); color:var(--charcoal-soft); } a.vm-brand{ background:var(--white); border-color:var(--red); color:var(--red); transition:background 0.15s ease, color 0.15s ease, transform 0.15s ease; } a.vm-brand::after{ content:"\203A"; font-size:1.05rem; line-height:1; margin-top:-2px; } a.vm-brand:hover{ background:var(--red); color:var(--white); transform:translateY(-2px); } .vm-note{ margin-top:26px; font-size:0.88rem; color:var(--charcoal-soft); line-height:1.65; max-width:820px; } .vm-note strong{ color:var(--charcoal); } @media (max-width: 1000px){ .vm-regions{ grid-template-columns:1fr 1fr; } } @media (max-width: 700px){ .vm-regions{ grid-template-columns:1fr; gap:20px; } .vm-region{ padding:22px 20px 24px; } .vm-brand{ padding:11px 14px; font-size:0.9rem; } } /* Hub-only helpers that would otherwise be inline styles. */ .vm-spotlight{ max-width:900px; margin:26px auto 0; } .vm-spotlight-card{ display:block; } .vm-spotlight-card .lg-more{ display:inline-block; margin-top:12px; } .vm-cta-row{ margin-top:30px; } /* ------------------------------------------------------------------ 2026-09-01 — READABILITY PASS, HUB ONLY ( body.vm ) Owner-approved typography-only change, deliberately scoped to /vehicle-makes/ via the `vm` class on that page's . Nothing here may leak onto the frozen service pages, which share .section-sub, .lg-related-card and .lg-fact with this page. Only font-size (and one line-height) changes. No colour, weight, casing, spacing, card or heading changes. The large headings — h1, the section h2s, .vm-region h3 and .vm-spotlight-card h3 — are untouched. Every selector here is one level more specific than the shared rule it overrides, including the shared rules that sit inside max-width media queries, so the larger sizes hold at every viewport. ------------------------------------------------------------------ */ /* Intro paragraph under the H1. */ .vm .page-hero .lede{ font-size:1.15rem; line-height:1.65; } /* ------------------------------------------------------------------ 2026-09-02 — HERO READABILITY PASS, HUB HERO ONLY ( .vm .vmc-hero ) Owner-approved. The header logo, 18px navigation, enlarged Call/Text control and the 122px orbit discs all grew, which left the small hero type looking undersized beside them. Only font-size, line-height and the CTA's padding change here — no wording, colour, weight, casing or section layout. Scoped to `.vm .vmc-hero`, one level more specific than the shared `.breadcrumb` (pages.css), `.lg-kicker` and `.page-hero .lede` rules, so the frozen service pages are untouched. Nothing is scaled DOWN. ------------------------------------------------------------------ */ /* Breadcrumb: 0.82rem / 13.1px -> 0.95rem / 15.2px. */ .vm .vmc-hero .breadcrumb{ font-size:0.95rem; gap:10px; margin-bottom:16px; } /* "ASIAN · EUROPEAN · DOMESTIC" kicker: 0.76rem / 12.2px -> 0.92rem / 14.7px. Letter-spacing is left to the rule further down this file. */ .vm .vmc-hero .lg-kicker{ font-size:0.92rem; margin-bottom:14px; } /* Hero paragraph: 1.15rem / 18.4px -> 1.24rem / 19.8px, with the line height opened up to match. max-width rises with it so the measure stays near 70 characters instead of tightening as the type grows. */ .vm .vmc-hero .lede{ font-size:1.24rem; line-height:1.72; max-width:600px; } /* "View All 31 Vehicle Makes": 1.02rem / 16.3px -> 1.1rem / 17.6px, with proportional padding so the button grows with its label. RESPONSIVE BUG FOUND IN THE 2026-09-02 SWEEP, fixed here. At 390px the hero column is 342px wide; the enlarged label plus 36px of side padding needed more than that, so .btn's flex-wrap dropped the arrow onto its own line and the button became a 109px-tall two-line block. The increase is therefore held to 481px and up, where there is room for it. Below that the button keeps the .btn-lg defaults it had before this pass — the approved mobile state, one line, arrow inline. */ @media (min-width: 481px){ .vm .vmc-hero .vmc-viewall{ font-size:1.1rem; padding:19px 36px; gap:13px; } } /* Legend under the orbit: 0.92rem / 14.7px -> 1rem / 16px. It is hero text at the same distance as everything else above, and it carries the "makes in red" explanation for the four ringed discs. */ .vm .vmc-hero .vmc-legend{ font-size:1rem; max-width:500px; } /* Explanatory line under each section heading (stays uppercase). */ .vm .section-sub{ font-size:0.95rem; } /* Ford spotlight description. */ .vm .vm-spotlight-card p{ font-size:1.05rem; } /* Asian / European / Domestic cards. */ .vm .vm-sub{ font-size:0.82rem; } .vm .vm-brand{ font-size:0.95rem; } .vm .vm-note{ font-size:1rem; } /* "What We Repair" cards. */ .vm .lg-related-card h3{ font-size:1.05rem; } .vm .lg-related-card p{ font-size:1rem; } /* "Tell Us Your Year, Make And Model" facts. */ .vm .lg-fact strong{ font-size:0.85rem; } .vm .lg-fact div{ font-size:1rem; } /* ---------- Kia landing page ( /kia-sunroof-repair/ ) ---------- */ .kia-hero-cta{ margin-top:22px; } .kia-mid-cta, .kia-final-cta{ margin-top:32px; } .kia-answers{ margin-top:28px; } .kia-models{ margin-top:22px; } .kia-model-note{ margin-top:20px; } .kia-symptoms{ margin-top:26px; } .kia-prose{ margin-top:30px; } .kia-faq .lg-step h3{ text-transform:none; } /* Secondary model link inside a brand group (e.g. Toyota -> Camry). Visibly subordinate to the brand chips so it never reads as a brand page. */ a.vm-brand--sub{ border-style:dashed; font-size:0.8rem; font-weight:600; color:var(--charcoal-soft); border-color:var(--line-strong,var(--line)); background:var(--cream); } a.vm-brand--sub::after{ content:"\203A"; opacity:0.6; } a.vm-brand--sub:hover{ background:var(--charcoal); color:var(--white); border-color:var(--charcoal); } /* ================================================================== 2026-09-01 — VEHICLE MAKE SELECTOR ("clock") HERO ( body.vm only ) Circular make selector beside the hero copy on /vehicle-makes/. Everything is scoped to `.vm` so no other page is touched. PLACEHOLDER: `.vmc-mark` currently holds TEXT, not badge artwork. The project holds no licensed manufacturer logo files. To swap in real artwork later, put an inside `.vmc-mark` and add a `.vmc-name` label beneath the disc — the ring maths, link logic, hover physics and responsive rules all stay as they are. Geometry: each slot is placed with rotate(i*30deg) -> translate(0,-ring) -> rotate(-i*30deg) so the discs sit on a circle but stay upright. The disc itself keeps its own transform free for the hover lift, which is why the lift and the placement never fight each other. ================================================================== */ .vm .vmc-grid{ display:block; } .vm .vmc-copy .lede{ margin-bottom:0; } /* ---------- the "View all" CTA ---------- */ .vm .vmc-cta-row{ margin-top:24px; } .vm .vmc-viewall{ display:inline-flex; align-items:center; gap:11px; flex-wrap:wrap; max-width:100%; background:var(--charcoal); color:var(--white); border:1px solid var(--charcoal); text-transform:uppercase; letter-spacing:0.04em; font-weight:800; box-shadow:0 2px 5px rgba(0,0,0,0.12); transition:background 0.18s ease, transform 0.18s ease, box-shadow 0.18s ease; } .vm .vmc-viewall:hover{ background:#000; color:var(--white); transform:translateY(-2px); box-shadow:0 6px 16px rgba(0,0,0,0.20); } .vm .vmc-viewall .vmc-arrow{ transition:transform 0.18s ease; } .vm .vmc-viewall:hover .vmc-arrow{ transform:translateX(4px); } .vm .vmc-contact-row{ margin-top:14px; } /* ---------- the selector ---------- */ .vm .vmc-visual{ margin-top:38px; } .vm .vmc{ --clock:540px; --btn:96px; --gap:18px; --ring:calc((var(--clock) - var(--btn)) / 2); position:relative; width:var(--clock); height:var(--clock); margin:0 auto; } .vm .vmc-portrait{ position:absolute; top:50%; left:50%; width:calc(var(--clock) - (var(--btn) * 2) - (var(--gap) * 2)); aspect-ratio:1/1; transform:translate(-50%,-50%); border-radius:50%; overflow:hidden; border:5px solid var(--white); box-shadow:0 0 0 2px var(--red), 0 18px 44px rgba(0,0,0,0.22); background:var(--cream); } .vm .vmc-portrait img{ width:100%; height:100%; object-fit:cover; object-position:36% 26%; } /* the faint guide circle the discs sit on */ .vm .vmc::before{ content:""; position:absolute; top:50%; left:50%; width:calc(var(--ring) * 2); height:calc(var(--ring) * 2); transform:translate(-50%,-50%); border:1px dashed var(--line-strong, #CFC6BA); border-radius:50%; opacity:0.65; pointer-events:none; } .vm .vmc-ring{ list-style:none; margin:0; padding:0; } .vm .vmc-slot{ position:absolute; top:50%; left:50%; perspective:640px; transform: rotate(calc(var(--i) * 30deg)) translate(0, calc(var(--ring) * -1)) rotate(calc(var(--i) * -30deg)) translate(-50%,-50%); } .vm .vmc-btn{ display:flex; align-items:center; justify-content:center; text-align:center; width:var(--btn); height:var(--btn); border-radius:50%; padding:8px; background:linear-gradient(158deg, #FFFFFF 0%, #FFFFFF 52%, #F1ECE4 100%); border:1px solid var(--line); box-shadow: inset 0 1px 0 rgba(255,255,255,0.95), inset 0 -3px 6px rgba(0,0,0,0.05), 0 1px 2px rgba(0,0,0,0.07), 0 7px 16px rgba(0,0,0,0.11); transform:translateY(0) rotateX(0deg) rotateY(0deg); transition:transform 210ms cubic-bezier(0.2,0.7,0.3,1), box-shadow 210ms ease; will-change:transform; } .vm .vmc-mark{ font-family:var(--font-sans); font-size:0.8rem; font-weight:800; line-height:1.15; letter-spacing:0.02em; text-transform:uppercase; color:var(--charcoal-soft); } .vm a.vmc-btn .vmc-mark{ color:var(--red); } /* Only real links move. A disc with no destination stays put, so the page never offers an affordance it cannot honour. */ .vm a.vmc-btn:hover, .vm a.vmc-btn:focus-visible{ transform:translateY(-5px) rotateX(2.5deg) rotateY(-2.5deg); box-shadow: inset 0 1px 0 rgba(255,255,255,0.95), inset 0 -3px 6px rgba(0,0,0,0.05), 0 2px 4px rgba(0,0,0,0.08), 0 16px 30px rgba(0,0,0,0.19); } .vm a.vmc-btn:active{ transform:translateY(-1px) scale(0.975) rotateX(1deg) rotateY(-1deg); box-shadow: inset 0 2px 5px rgba(0,0,0,0.10), 0 1px 2px rgba(0,0,0,0.10), 0 4px 9px rgba(0,0,0,0.10); transition-duration:90ms; } .vm a.vmc-btn:focus-visible{ outline:3px solid var(--red); outline-offset:4px; } .vm .vmc-legend{ margin:26px auto 0; max-width:460px; text-align:center; font-size:0.92rem; line-height:1.6; color:var(--charcoal-soft); } .vm .vmc-legend strong{ color:var(--red); } .vm .vmc-legend a{ color:var(--red); font-weight:700; text-decoration:underline; text-underline-offset:2px; } .vm .sr-only{ position:absolute; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; border:0; } /* ---------- two columns on real desktop ---------- CASCADING tiers, not exclusive ranges. The right-hand track has to hold the whole circle, and the usable width is clientWidth minus the scrollbar minus 48px of .wrap padding — at a 1216px viewport that is 1153px, not 1216px. Sizing the clock off the viewport instead of the real track is what made it overflow. Each tier only raises the clock once the track has genuinely grown. ---------- */ /* 2026-09-02 — ORBIT ENLARGED. The badges were 96px carrying a 30px mark, which is not recognisable at a normal desktop viewing distance. The whole assembly is now bigger. The extra width comes from the GRID GAP (48px -> 32px), deliberately NOT from the copy column: `minmax(0,620px)` is left exactly as it was so the hero paragraph keeps its line breaks. At a 1280px content column that moves the visual track from 564px to 580px. The portrait is NOT squeezed to pay for the bigger badges — it grows too: 576 - (2 x 110) - (2 x 18) = 320px, up from 312px. */ @media (min-width: 1216px){ .vm .vmc-grid{ display:grid; grid-template-columns:minmax(0,620px) minmax(480px,1fr); gap:32px; align-items:center; } .vm .vmc-visual{ margin-top:0; } .vm .vmc{ --clock:496px; --btn:106px; --gap:14px; } } /* From ~1300px the .wrap is at its 1280px cap, so the visual track stops growing at 580px — this is the widest the clock ever gets. Inside that fixed 576px clock the badges are pushed to 122px, which is what the wide WORDMARKS need: they are capped by width, not height, so Nissan (6.8:1) and Hyundai (7.8:1) only gain height when the badge itself gets wider. */ @media (min-width: 1300px){ .vm .vmc{ --clock:576px; --btn:122px; --gap:16px; } } /* ---------- tablet: stacked, circle scaled down ---------- */ @media (max-width: 1215px){ .vm .vmc{ --clock:min(560px, 92vw); --btn:104px; --gap:16px; } } @media (max-width: 860px){ .vm .vmc{ --clock:min(470px, 94vw); --btn:92px; --gap:12px; } } /* ---------- phones: the ring cannot stay readable, so it becomes a grid. Twelve 30-degree slots on a 300px circle would put the discs closer together than their own diameter. A 3-column grid keeps every target finger-sized. 2026-09-02: the make names are screen-reader-only here too, so each cell is now one large mark rather than a small logo over a 0.76rem label. ---------- */ @media (max-width: 700px){ .vm .vmc{ --btn:92px; width:100%; height:auto; margin:0; display:flex; flex-direction:column; align-items:center; gap:26px; } .vm .vmc::before{ display:none; } .vm .vmc-portrait{ position:static; transform:none; width:min(230px, 62vw); } .vm .vmc-ring{ position:static; width:100%; display:grid; grid-template-columns:repeat(3, 1fr); justify-items:center; gap:16px 8px; } .vm .vmc-slot{ position:static; transform:none; } .vm .vmc-mark{ font-size:0.76rem; } .vm .vmc-legend{ margin-top:20px; } } @media (max-width: 380px){ .vm .vmc{ --btn:82px; } .vm .vmc-ring{ gap:14px 6px; } .vm .vmc-mark{ font-size:0.7rem; } } /* ---------- motion preference ---------- */ @media (prefers-reduced-motion: reduce){ .vm .vmc-btn, .vm .vmc-viewall, .vm .vmc-viewall .vmc-arrow{ transition:none; } .vm a.vmc-btn:hover, .vm a.vmc-btn:focus-visible, .vm a.vmc-btn:active, .vm .vmc-viewall:hover{ transform:none; } .vm .vmc-viewall:hover .vmc-arrow{ transform:none; } html{ scroll-behavior:auto; } } /* The "View all" label is long. On the narrowest phones it has to give up its letter-spacing and go full width, or it pushes the page sideways. */ @media (max-width: 430px){ .vm .vmc-viewall{ width:100%; justify-content:center; text-align:center; font-size:0.86rem; letter-spacing:0.02em; gap:8px; padding-left:14px; padding-right:14px; } } /* ================================================================== 2026-09-01 — VEHICLE MAKE DIRECTORY PANELS ( body.vm only ) Replaces the three text-only region boxes with three premium panels of raised logo tiles. Scoped to `.vm` — the frozen service pages share none of these class names, and nothing here touches the hero clock, the Ford spotlight, What We Repair, Tell Us, or the footer. PROVISIONAL ARTWORK: the tiles show the make NAME, not a logo. The project contains no manufacturer logo files of any kind, so there is nothing to place in the logo slot yet. See the note above .vmd-logo-img for the exact swap once licensed artwork exists. ================================================================== */ .vm .vmd{ display:grid; grid-template-columns:repeat(3, 1fr); gap:24px; align-items:start; margin-top:8px; } .vm .vmd-panel{ --panel:var(--red); --panel-deep:var(--red-dark, #A50F15); background:var(--white); border:1px solid var(--line); border-top:0; border-radius:16px; box-shadow:0 1px 2px rgba(0,0,0,0.05), 0 10px 28px rgba(0,0,0,0.09); overflow:hidden; } .vm .vmd-panel--asian{ --panel:#D2141B; --panel-deep:#9E0F14; } .vm .vmd-panel--european{ --panel:#1B4E8C; --panel-deep:#123A69; } .vm .vmd-panel--domestic{ --panel:#1E7A4D; --panel-deep:#155A38; } .vm .vmd-head{ margin:0; padding:15px 18px; background:linear-gradient(180deg, var(--panel) 0%, var(--panel-deep) 100%); color:var(--white); text-align:center; font-family:var(--font-sans); font-size:0.98rem; font-weight:900; text-transform:uppercase; letter-spacing:0.09em; text-shadow:0 1px 1px rgba(0,0,0,0.22); box-shadow:inset 0 -1px 0 rgba(0,0,0,0.18), inset 0 1px 0 rgba(255,255,255,0.22); } .vm .vmd-grid{ list-style:none; margin:0; padding:16px; display:grid; grid-template-columns:repeat(3, minmax(0,1fr)); gap:12px; } .vm .vmd-grid > li{ display:block; } .vm .vmd-tile{ display:flex; flex-direction:column; align-items:center; justify-content:center; gap:7px; height:100%; min-height:96px; padding:12px 6px 10px; border-radius:12px; background:linear-gradient(168deg, #FFFFFF 0%, #FFFFFF 58%, #F2EEE8 100%); border:1px solid var(--line); box-shadow: inset 0 1px 0 rgba(255,255,255,0.95), inset 0 -2px 5px rgba(0,0,0,0.045), 0 1px 2px rgba(0,0,0,0.06), 0 5px 12px rgba(0,0,0,0.08); transform:translateY(0); transition:transform 200ms cubic-bezier(0.2,0.7,0.3,1), box-shadow 200ms ease; text-decoration:none; } /* THE LOGO SLOT — currently unused. There is no manufacturer logo artwork in this project, so the tiles show the make name alone rather than a monogram that would simply repeat it. When licensed artwork lands, add as the tile's first child and drop `.vmd-name` back to 0.78rem — the tile box, grid and hover physics do not move. */ .vm .vmd-logo-img{ display:block; margin-bottom:2px; max-width:100%; max-height:44px; width:auto; height:auto; object-fit:contain; } .vm .vmd-name{ font-family:var(--font-sans); font-size:0.94rem; font-weight:800; text-transform:uppercase; letter-spacing:0.03em; line-height:1.2; color:var(--charcoal-soft); text-align:center; overflow-wrap:break-word; hyphens:auto; } .vm a.vmd-tile .vmd-name{ color:var(--red); } .vm .vmd-panel--european a.vmd-tile .vmd-name{ color:var(--red); } /* Only tiles with a destination lift. A tile with nowhere to go keeps the same resting treatment but never behaves like a control. */ .vm a.vmd-tile:hover, .vm a.vmd-tile:focus-visible{ transform:translateY(-5px); box-shadow: inset 0 1px 0 rgba(255,255,255,0.95), 0 2px 4px rgba(0,0,0,0.07), 0 14px 26px rgba(0,0,0,0.17); border-color:var(--panel); } .vm a.vmd-tile:active{ transform:translateY(-1px) scale(0.985); box-shadow:inset 0 2px 5px rgba(0,0,0,0.10), 0 2px 5px rgba(0,0,0,0.09); transition-duration:90ms; } .vm a.vmd-tile:focus-visible{ outline:3px solid var(--panel); outline-offset:3px; } /* ---------- "Do not see your make?" ---------- */ .vm .vmd-note{ display:flex; align-items:flex-start; gap:16px; margin-top:26px; padding:20px 24px; background:var(--white); border:1px solid var(--line); border-left:4px solid var(--red); border-radius:14px; box-shadow:0 1px 2px rgba(0,0,0,0.05), 0 8px 20px rgba(0,0,0,0.07); } .vm .vmd-note-icon{ flex-shrink:0; display:flex; align-items:center; justify-content:center; width:42px; height:42px; border-radius:10px; background:var(--red); color:var(--white); } .vm .vmd-note-icon svg{ width:22px; height:22px; } .vm .vmd-note p{ margin:0; font-size:1rem; line-height:1.65; color:var(--charcoal-soft); } .vm .vmd-note strong{ color:var(--charcoal); } .vm .vmd-note a{ color:var(--red); font-weight:800; } /* ---------- responsive ---------- */ @media (max-width: 1100px){ .vm .vmd{ grid-template-columns:1fr 1fr; gap:20px; } .vm .vmd-panel--domestic{ grid-column:1 / -1; } .vm .vmd-panel--domestic .vmd-grid{ grid-template-columns:repeat(6, minmax(0,1fr)); } } @media (max-width: 860px){ /* one panel per row, so each grid can spread wider */ .vm .vmd{ grid-template-columns:1fr; } .vm .vmd-grid, .vm .vmd-panel--domestic .vmd-grid{ grid-template-columns:repeat(5, minmax(0,1fr)); } } @media (max-width: 700px){ .vm .vmd-grid, .vm .vmd-panel--domestic .vmd-grid{ grid-template-columns:repeat(4, minmax(0,1fr)); } } @media (max-width: 560px){ .vm .vmd-grid, .vm .vmd-panel--domestic .vmd-grid{ grid-template-columns:repeat(3, minmax(0,1fr)); gap:10px; padding:14px; } .vm .vmd-tile{ min-height:82px; } .vm .vmd-note{ padding:18px; gap:13px; } } @media (max-width: 360px){ .vm .vmd-grid, .vm .vmd-panel--domestic .vmd-grid{ grid-template-columns:repeat(2, minmax(0,1fr)); } .vm .vmd-name{ font-size:0.72rem; } } @media (prefers-reduced-motion: reduce){ .vm .vmd-tile{ transition:none; } .vm a.vmd-tile:hover, .vm a.vmd-tile:focus-visible, .vm a.vmd-tile:active{ transform:none; } } /* ================================================================== 2026-09-01 — DEPTH PASS ( body.vm only ) Adds dimension to the Vehicle Makes page: layered shadows, thin inset highlights, restrained gradients, small press movement. No layout, no copy, no link and no colour-identity changes — every rule below sets only box-shadow, background, border, border-radius, transform or transition. Scoped to `.vm` throughout, so the frozen pages that share .lg-related-card, .lg-facts, .btn-* and the footer are untouched. House recipe, so the page reads as one system: inset 0 1.5px 0 rgba(255,255,255,1) — top highlight (the bevel) inset 0 -3px 6px rgba(0,0,0,.05) — base shading 0 1px 2px rgba(0,0,0,.06) — contact shadow 0 Npx Mpx rgba(0,0,0,.10) — the lift ================================================================== */ /* ---------- 1. HERO — make badges ---------- */ .vm .vmc-btn{ background: radial-gradient(115% 95% at 30% 12%, #FFFFFF 0%, #FFFFFF 46%, #F4F0EA 78%, #E9E3DA 100%); border:1px solid #E2DBD1; box-shadow: inset 0 1.5px 0 rgba(255,255,255,1), inset 0 -4px 8px rgba(0,0,0,0.06), inset 0 0 0 1px rgba(255,255,255,0.55), 0 1px 2px rgba(0,0,0,0.07), 0 4px 8px rgba(0,0,0,0.07), 0 12px 22px rgba(0,0,0,0.11); } /* thin accent ring on the badges that actually go somewhere */ .vm a.vmc-btn{ border-color:rgba(210,20,27,0.30); box-shadow: inset 0 1.5px 0 rgba(255,255,255,1), inset 0 -4px 8px rgba(0,0,0,0.06), inset 0 0 0 1px rgba(255,255,255,0.55), 0 0 0 2px rgba(210,20,27,0.11), 0 1px 2px rgba(0,0,0,0.07), 0 4px 8px rgba(0,0,0,0.07), 0 12px 22px rgba(0,0,0,0.11); } .vm a.vmc-btn:hover, .vm a.vmc-btn:focus-visible{ box-shadow: inset 0 1.5px 0 rgba(255,255,255,1), inset 0 -4px 8px rgba(0,0,0,0.05), 0 0 0 2px rgba(210,20,27,0.22), 0 2px 4px rgba(0,0,0,0.08), 0 10px 18px rgba(0,0,0,0.12), 0 22px 38px rgba(0,0,0,0.18); } .vm a.vmc-btn:active{ box-shadow: inset 0 3px 7px rgba(0,0,0,0.13), inset 0 -1px 0 rgba(255,255,255,0.7), 0 1px 2px rgba(0,0,0,0.10), 0 3px 7px rgba(0,0,0,0.10); } /* ---------- 2. HERO BUTTONS ---------- */ .vm .btn-lg{ transition:transform 170ms cubic-bezier(0.2,0.7,0.3,1), box-shadow 170ms ease, background 170ms ease; } .vm .vmc-viewall{ background:linear-gradient(180deg, #34302C 0%, #201D1A 55%, #171412 100%); border-color:#171412; box-shadow: inset 0 1px 0 rgba(255,255,255,0.18), inset 0 -2px 4px rgba(0,0,0,0.35), 0 1px 2px rgba(0,0,0,0.14), 0 6px 14px rgba(0,0,0,0.20); } .vm .vmc-viewall:hover{ background:linear-gradient(180deg, #3D3833 0%, #262220 55%, #171512 100%); box-shadow: inset 0 1px 0 rgba(255,255,255,0.22), 0 2px 4px rgba(0,0,0,0.16), 0 12px 24px rgba(0,0,0,0.26); } .vm .btn-primary{ background:linear-gradient(180deg, #E4262D 0%, #D2141B 52%, #B5121A 100%); border-color:#A50F15; box-shadow: inset 0 1px 0 rgba(255,255,255,0.28), inset 0 -2px 4px rgba(0,0,0,0.20), 0 1px 2px rgba(0,0,0,0.12), 0 6px 14px rgba(210,20,27,0.24); } .vm .btn-primary:hover{ background:linear-gradient(180deg, #EC3038 0%, #D2141B 52%, #A50F15 100%); box-shadow: inset 0 1px 0 rgba(255,255,255,0.30), 0 2px 4px rgba(0,0,0,0.14), 0 12px 24px rgba(210,20,27,0.30); } .vm .btn-outline-dark{ background:linear-gradient(180deg, #FFFFFF 0%, #FFFFFF 58%, #F3EFE9 100%); border-color:#2B2622; box-shadow: inset 0 1px 0 rgba(255,255,255,1), inset 0 -2px 4px rgba(0,0,0,0.05), 0 1px 2px rgba(0,0,0,0.07), 0 6px 13px rgba(0,0,0,0.10); } .vm .btn-outline-dark:hover{ background:linear-gradient(180deg, #2B2622 0%, #171412 100%); box-shadow: inset 0 1px 0 rgba(255,255,255,0.16), 0 2px 4px rgba(0,0,0,0.14), 0 12px 22px rgba(0,0,0,0.22); } .vm .btn-lg:active{ transform:translateY(1px) scale(0.995); box-shadow: inset 0 3px 6px rgba(0,0,0,0.22), 0 1px 2px rgba(0,0,0,0.12); transition-duration:80ms; } /* ---------- 3. FORD SPOTLIGHT ---------- */ .vm .vm-spotlight-card{ background:linear-gradient(180deg, #FFFFFF 0%, #FFFFFF 70%, #FBF8F4 100%); border:1px solid #E6DFD5; border-radius:16px; box-shadow: inset 0 1px 0 rgba(255,255,255,1), 0 1px 2px rgba(0,0,0,0.05), 0 6px 14px rgba(0,0,0,0.07), 0 14px 34px rgba(0,0,0,0.10); transition:transform 190ms cubic-bezier(0.2,0.7,0.3,1), box-shadow 190ms ease, border-color 190ms ease; } .vm a.vm-spotlight-card:hover{ transform:translateY(-4px); border-color:rgba(210,20,27,0.35); box-shadow: inset 0 1px 0 rgba(255,255,255,1), 0 2px 5px rgba(0,0,0,0.07), 0 14px 26px rgba(0,0,0,0.11), 0 26px 52px rgba(0,0,0,0.15); } .vm a.vm-spotlight-card:active{ transform:translateY(-1px); box-shadow:inset 0 2px 6px rgba(0,0,0,0.09), 0 3px 8px rgba(0,0,0,0.10); transition-duration:90ms; } /* ---------- 4. REGION PANELS ---------- */ .vm .vmd-panel{ border:1px solid #E4DDD3; border-top:0; box-shadow: inset 0 0 0 1px rgba(255,255,255,0.7), 0 1px 2px rgba(0,0,0,0.05), 0 8px 18px rgba(0,0,0,0.08), 0 20px 44px rgba(0,0,0,0.12); } .vm .vmd-head{ background: linear-gradient(180deg, color-mix(in srgb, var(--panel) 86%, #FFFFFF) 0%, var(--panel) 42%, var(--panel-deep) 100%); box-shadow: inset 0 1px 0 rgba(255,255,255,0.34), inset 0 -1px 0 rgba(0,0,0,0.26), 0 3px 8px rgba(0,0,0,0.14); } .vm .vmd-grid{ background:linear-gradient(180deg, #FBF9F6 0%, #FFFFFF 46%); box-shadow:inset 0 1px 0 rgba(255,255,255,0.9); } .vm .vmd-tile{ background: radial-gradient(120% 100% at 32% 8%, #FFFFFF 0%, #FFFFFF 52%, #F5F1EB 82%, #EDE7DE 100%); border:1px solid #E4DDD3; box-shadow: inset 0 1.5px 0 rgba(255,255,255,1), inset 0 -3px 6px rgba(0,0,0,0.05), 0 1px 2px rgba(0,0,0,0.06), 0 4px 9px rgba(0,0,0,0.07), 0 9px 18px rgba(0,0,0,0.07); } .vm a.vmd-tile{ border-color:color-mix(in srgb, var(--panel) 34%, #E4DDD3); box-shadow: inset 0 1.5px 0 rgba(255,255,255,1), inset 0 -3px 6px rgba(0,0,0,0.05), 0 0 0 2px color-mix(in srgb, var(--panel) 13%, transparent), 0 1px 2px rgba(0,0,0,0.06), 0 4px 9px rgba(0,0,0,0.07), 0 9px 18px rgba(0,0,0,0.07); } .vm a.vmd-tile:hover, .vm a.vmd-tile:focus-visible{ box-shadow: inset 0 1.5px 0 rgba(255,255,255,1), 0 0 0 2px color-mix(in srgb, var(--panel) 26%, transparent), 0 2px 4px rgba(0,0,0,0.07), 0 12px 22px rgba(0,0,0,0.12), 0 22px 38px rgba(0,0,0,0.13); } .vm a.vmd-tile:active{ box-shadow: inset 0 3px 7px rgba(0,0,0,0.11), inset 0 -1px 0 rgba(255,255,255,0.75), 0 1px 3px rgba(0,0,0,0.09); } /* ---------- 5. THE DO-NOT-SEE-YOUR-MAKE CARD ---------- */ .vm .vmd-note{ background:linear-gradient(180deg, #FFFFFF 0%, #FFFFFF 72%, #FBF8F4 100%); border:1px solid #E6DFD5; border-left:4px solid var(--red); border-radius:16px; box-shadow: inset 0 1px 0 rgba(255,255,255,1), 0 1px 2px rgba(0,0,0,0.05), 0 6px 14px rgba(0,0,0,0.07), 0 16px 34px rgba(0,0,0,0.10); } .vm .vmd-note-icon{ border-radius:50%; background:radial-gradient(120% 110% at 32% 14%, #EE3038 0%, #D2141B 52%, #A50F15 100%); box-shadow: inset 0 1.5px 0 rgba(255,255,255,0.42), inset 0 -3px 6px rgba(0,0,0,0.22), 0 1px 2px rgba(0,0,0,0.14), 0 6px 13px rgba(210,20,27,0.30); } /* ---------- 6. WHAT WE REPAIR ---------- */ .vm .lg-related-card{ background:linear-gradient(180deg, #FFFFFF 0%, #FFFFFF 68%, #FBF8F4 100%); border:1px solid #E6DFD5; border-radius:15px; box-shadow: inset 0 1px 0 rgba(255,255,255,1), inset 0 -2px 5px rgba(0,0,0,0.035), 0 1px 2px rgba(0,0,0,0.05), 0 6px 13px rgba(0,0,0,0.07), 0 14px 30px rgba(0,0,0,0.09); transition:transform 190ms cubic-bezier(0.2,0.7,0.3,1), box-shadow 190ms ease, border-color 190ms ease; } .vm .lg-related-card:hover{ transform:translateY(-5px); border-color:rgba(210,20,27,0.34); box-shadow: inset 0 1px 0 rgba(255,255,255,1), 0 2px 5px rgba(0,0,0,0.07), 0 14px 26px rgba(0,0,0,0.11), 0 26px 48px rgba(0,0,0,0.14); } .vm .lg-related-card:active{ transform:translateY(-1px); box-shadow:inset 0 2px 6px rgba(0,0,0,0.09), 0 3px 8px rgba(0,0,0,0.10); transition-duration:90ms; } /* ---------- 7. TELL US YOUR YEAR, MAKE AND MODEL ---------- */ .vm .lg-facts{ background:linear-gradient(180deg, #FFFFFF 0%, #FFFFFF 72%, #FAF7F3 100%); border:1px solid #E6DFD5; border-radius:16px; box-shadow: inset 0 1.5px 0 rgba(255,255,255,1), inset 0 -2px 6px rgba(0,0,0,0.035), 0 1px 2px rgba(0,0,0,0.05), 0 8px 18px rgba(0,0,0,0.07), 0 20px 44px rgba(0,0,0,0.11); } /* ---------- 8. FOOTER CALL / TEXT PANEL ---------- NOTE: scoped to `.vm`, so this treatment appears on THIS page only. The footer is otherwise a sitewide frozen component in home.css, and the other 29 pages are unchanged. If it is approved, promoting it sitewide is a separate decision and a separate edit to home.css. */ .vm .ct-banner--footer{ background:linear-gradient(180deg, #FFFFFF 0%, #FFFFFF 62%, #F6F1EA 100%); box-shadow: inset 0 2px 0 rgba(255,255,255,1), inset 0 -3px 8px rgba(0,0,0,0.06), 0 2px 4px rgba(0,0,0,0.16), 0 12px 26px rgba(0,0,0,0.28), 0 28px 60px rgba(0,0,0,0.32); } .vm .ct-banner--footer .ct-icon-btn{ box-shadow: inset 0 1.5px 0 rgba(255,255,255,0.5), inset 0 -3px 6px rgba(0,0,0,0.20), 0 1px 2px rgba(0,0,0,0.16), 0 7px 15px rgba(242,96,12,0.34); } .vm .ct-banner--footer .ct-banner-strip{ box-shadow:inset 0 1px 0 rgba(255,255,255,0.9), 0 1px 3px rgba(0,0,0,0.07); } .vm .ct-banner--footer .ct-banner-crown{ box-shadow:0 4px 12px rgba(0,0,0,0.22), inset 0 1px 0 rgba(255,255,255,0.9); } /* ---------- motion preference ---------- */ @media (prefers-reduced-motion: reduce){ .vm .btn-lg, .vm .vm-spotlight-card, .vm .lg-related-card{ transition:none; } .vm .btn-lg:active, .vm a.vm-spotlight-card:hover, .vm a.vm-spotlight-card:active, .vm .lg-related-card:hover, .vm .lg-related-card:active{ transform:none; } } /* ================================================================== 2026-09-01 — FINAL DIMENSIONAL PASS ( body.vm only ) Turns the flat panels into physically-constructed components: raised outer frame -> thin red inset accent -> recessed content surface Built entirely with pseudo-elements and layered shadows, so NO markup changed: `vehicle-makes.html` is untouched by this pass. Every rule is scoped to `.vm`, so the frozen pages that share .type-card, .lg-facts, .lg-fact, .lg-related-card and .btn-* are unaffected. DEPTH HIERARCHY (deliberate, to stop the page becoming noisy): hero clock ........ strongest Ford frame ........ strong (frame + accent + recess) Tell Us console ... strong (frame + accent + 4 raised modules) region panels ..... strong What We Repair .... medium (left as the earlier pass set it) note card, chips .. light ================================================================== */ /* ------------------------------------------------------------------ B. HERO — orbit line and portrait ring ------------------------------------------------------------------ */ .vm .vmc::before{ border:1px solid rgba(242,96,12,0.30); border-style:solid; opacity:1; box-shadow: inset 0 0 0 1px rgba(255,255,255,0.55), 0 1px 3px rgba(0,0,0,0.04); } .vm .vmc-portrait{ border:6px solid #FFFFFF; box-shadow: 0 0 0 2px rgba(210,20,27,0.85), 0 0 0 3px rgba(255,255,255,0.9), inset 0 2px 6px rgba(0,0,0,0.18), 0 10px 22px rgba(0,0,0,0.16), 0 26px 56px rgba(0,0,0,0.24); } /* ------------------------------------------------------------------ B + E. DASHBOARD CONTROLS — Call / Text / View All A solid lower edge gives real physical depth; the press collapses it. ------------------------------------------------------------------ */ .vm .btn-lg{ border-bottom-width:1px; transition:transform 190ms cubic-bezier(0.2,0.7,0.3,1), box-shadow 190ms ease, background 190ms ease; } .vm .btn-primary{ box-shadow: inset 0 1px 0 rgba(255,255,255,0.32), inset 0 -2px 4px rgba(0,0,0,0.22), 0 5px 0 #8E0D12, 0 7px 10px rgba(0,0,0,0.18), 0 14px 26px rgba(210,20,27,0.24); } .vm .btn-primary:hover{ transform:translateY(-3px); box-shadow: inset 0 1px 0 rgba(255,255,255,0.34), 0 8px 0 #8E0D12, 0 11px 16px rgba(0,0,0,0.20), 0 20px 34px rgba(210,20,27,0.28); } .vm .btn-outline-dark{ box-shadow: inset 0 1px 0 rgba(255,255,255,1), inset 0 -2px 4px rgba(0,0,0,0.05), 0 5px 0 #2B2622, 0 7px 10px rgba(0,0,0,0.16), 0 14px 24px rgba(0,0,0,0.12); } .vm .btn-outline-dark:hover{ transform:translateY(-3px); box-shadow: inset 0 1px 0 rgba(255,255,255,0.16), 0 8px 0 #100E0C, 0 11px 16px rgba(0,0,0,0.20), 0 20px 32px rgba(0,0,0,0.18); } .vm .vmc-viewall{ box-shadow: inset 0 1px 0 rgba(255,255,255,0.20), inset 0 -2px 4px rgba(0,0,0,0.35), 0 5px 0 #0B0A09, 0 7px 10px rgba(0,0,0,0.20), 0 14px 26px rgba(0,0,0,0.22); } .vm .vmc-viewall:hover{ transform:translateY(-3px); box-shadow: inset 0 1px 0 rgba(255,255,255,0.24), 0 8px 0 #0B0A09, 0 11px 16px rgba(0,0,0,0.22), 0 20px 34px rgba(0,0,0,0.26); } .vm .btn-lg:active{ transform:translateY(4px) scale(0.99); box-shadow: inset 0 3px 7px rgba(0,0,0,0.24), 0 1px 0 rgba(0,0,0,0.35), 0 2px 4px rgba(0,0,0,0.14); transition-duration:80ms; } .vm .btn-lg:focus-visible{ outline:3px solid var(--red); outline-offset:4px; } /* ------------------------------------------------------------------ D. FORD FEATURE FRAME frame (the itself) -> ::before accent hairline -> ::after recess ------------------------------------------------------------------ */ .vm .vm-spotlight-card{ position:relative; isolation:isolate; padding:42px 40px 38px; border-radius:30px; border:1px solid #E8E0D4; background: linear-gradient(157deg, #FFFFFF 0%, #FCF9F4 34%, #F4EEE4 72%, #EAE2D5 100%); box-shadow: inset 0 2px 0 rgba(255,255,255,1), inset 2px 0 0 rgba(255,255,255,0.7), inset 0 -3px 0 rgba(0,0,0,0.06), inset -2px 0 0 rgba(0,0,0,0.04), 0 2px 4px rgba(0,0,0,0.06), 0 12px 24px rgba(0,0,0,0.10), 0 30px 60px rgba(0,0,0,0.14); } /* thin Sunroof King accent line, sunk just inside the frame */ .vm .vm-spotlight-card::before{ content:""; position:absolute; inset:13px; border:1.5px solid rgba(210,20,27,0.42); border-radius:21px; pointer-events:none; z-index:0; box-shadow:0 1px 0 rgba(255,255,255,0.85); } /* softly recessed content surface */ .vm .vm-spotlight-card::after{ content:""; position:absolute; inset:22px; border-radius:16px; background:linear-gradient(180deg, #FEFCF9 0%, #FBF7F1 100%); box-shadow: inset 0 2px 5px rgba(0,0,0,0.07), inset 0 -1px 0 rgba(255,255,255,0.9); pointer-events:none; z-index:0; } .vm .vm-spotlight-card > *{ position:relative; z-index:1; } .vm a.vm-spotlight-card:hover{ transform:translateY(-4px); border-color:#E2D8C9; box-shadow: inset 0 2px 0 rgba(255,255,255,1), inset 0 -3px 0 rgba(0,0,0,0.06), 0 3px 6px rgba(0,0,0,0.07), 0 20px 36px rgba(0,0,0,0.13), 0 44px 78px rgba(0,0,0,0.17); } .vm a.vm-spotlight-card:active{ transform:translateY(-1px); box-shadow: inset 0 3px 8px rgba(0,0,0,0.10), 0 3px 8px rgba(0,0,0,0.11); transition-duration:90ms; } .vm a.vm-spotlight-card:focus-visible{ outline:3px solid var(--red); outline-offset:5px; } /* the "View Ford sunroof repair" control */ .vm .vm-spotlight-card .lg-more{ display:inline-flex; align-items:center; gap:9px; margin-top:20px; padding:13px 24px; border-radius:11px; background:linear-gradient(180deg, #FFFFFF 0%, #FFFFFF 55%, #F5F0E8 100%); border:1px solid #E4DCCE; color:var(--red); font-weight:800; box-shadow: inset 0 1.5px 0 rgba(255,255,255,1), inset 0 -2px 4px rgba(0,0,0,0.05), 0 4px 0 #DFD6C6, 0 6px 9px rgba(0,0,0,0.10), 0 12px 20px rgba(0,0,0,0.09); transition:transform 190ms cubic-bezier(0.2,0.7,0.3,1), box-shadow 190ms ease; } .vm a.vm-spotlight-card:hover .lg-more{ transform:translateY(-2px); text-decoration:none; box-shadow: inset 0 1.5px 0 rgba(255,255,255,1), 0 6px 0 #DFD6C6, 0 9px 14px rgba(0,0,0,0.12), 0 18px 28px rgba(0,0,0,0.11); } .vm a.vm-spotlight-card:active .lg-more{ transform:translateY(2px); box-shadow:inset 0 2px 5px rgba(0,0,0,0.12), 0 1px 0 #DFD6C6; } /* ------------------------------------------------------------------ E. TELL US — information console ------------------------------------------------------------------ */ .vm .lg-facts{ position:relative; isolation:isolate; max-width:1000px; padding:44px 42px; border-radius:32px; border:1px solid #E8E0D4; background: linear-gradient(157deg, #FFFFFF 0%, #FCF9F4 34%, #F4EEE4 72%, #E9E1D4 100%); grid-template-columns:repeat(2, minmax(0,1fr)); gap:22px; box-shadow: inset 0 2px 0 rgba(255,255,255,1), inset 2px 0 0 rgba(255,255,255,0.7), inset 0 -3px 0 rgba(0,0,0,0.06), inset -2px 0 0 rgba(0,0,0,0.04), 0 2px 4px rgba(0,0,0,0.06), 0 14px 28px rgba(0,0,0,0.11), 0 34px 68px rgba(0,0,0,0.15); } .vm .lg-facts::before{ content:""; position:absolute; inset:13px; border:1.5px solid rgba(210,20,27,0.42); border-radius:23px; pointer-events:none; z-index:0; box-shadow:0 1px 0 rgba(255,255,255,0.85); } .vm .lg-fact{ position:relative; z-index:1; align-items:center; gap:18px; padding:22px 22px; border-radius:16px; border:1px solid #EBE4D9; background:linear-gradient(180deg, #FFFFFF 0%, #FEFCF9 58%, #F8F3EC 100%); box-shadow: inset 0 1.5px 0 rgba(255,255,255,1), inset 0 -3px 6px rgba(0,0,0,0.045), 0 1px 2px rgba(0,0,0,0.05), 0 6px 13px rgba(0,0,0,0.07), 0 14px 26px rgba(0,0,0,0.07); } /* icon presented as a raised disc */ .vm .lg-fact svg{ width:60px; height:60px; padding:17px; box-sizing:border-box; margin-top:0; border-radius:50%; background:radial-gradient(118% 108% at 32% 12%, #FFFFFF 0%, #FFFFFF 54%, #F2ECE3 100%); border:1px solid #E7DFD3; box-shadow: inset 0 1.5px 0 rgba(255,255,255,1), inset 0 -3px 6px rgba(0,0,0,0.06), 0 1px 2px rgba(0,0,0,0.07), 0 6px 12px rgba(0,0,0,0.10); } /* vertical accent divider between the disc and the copy */ .vm .lg-fact > div{ border-left:2px solid rgba(210,20,27,0.55); padding-left:17px; align-self:stretch; display:flex; flex-direction:column; justify-content:center; } .vm .lg-fact strong{ font-size:0.86rem; margin-bottom:5px; } /* ------------------------------------------------------------------ C. REGION PANELS — physical display shells ------------------------------------------------------------------ */ .vm .vmd-panel{ border-radius:20px; border:1px solid #E4DCCE; border-top:0; background:linear-gradient(180deg, #FFFFFF 0%, #FCFAF7 62%, #F4EFE7 100%); box-shadow: inset 0 -3px 0 rgba(0,0,0,0.05), inset 2px 0 0 rgba(255,255,255,0.8), inset -2px 0 0 rgba(0,0,0,0.03), 0 2px 4px rgba(0,0,0,0.06), 0 14px 26px rgba(0,0,0,0.10), 0 32px 60px rgba(0,0,0,0.14); } .vm .vmd-head{ box-shadow: inset 0 1.5px 0 rgba(255,255,255,0.40), inset 0 -2px 0 rgba(0,0,0,0.30), 0 4px 10px rgba(0,0,0,0.18); } .vm .vmd-grid{ margin:12px; padding:14px; border-radius:14px; background:linear-gradient(180deg, #F8F5F0 0%, #FDFCFA 100%); box-shadow: inset 0 2px 5px rgba(0,0,0,0.06), inset 0 -1px 0 rgba(255,255,255,0.9); } .vm .vmd-tile{ border-radius:13px; box-shadow: inset 0 1.5px 0 rgba(255,255,255,1), inset 0 -3px 6px rgba(0,0,0,0.055), 0 1px 2px rgba(0,0,0,0.06), 0 4px 0 rgba(0,0,0,0.045), 0 7px 12px rgba(0,0,0,0.08), 0 13px 22px rgba(0,0,0,0.07); } .vm a.vmd-tile{ box-shadow: inset 0 1.5px 0 rgba(255,255,255,1), inset 0 -3px 6px rgba(0,0,0,0.055), 0 0 0 2px color-mix(in srgb, var(--panel) 15%, transparent), 0 1px 2px rgba(0,0,0,0.06), 0 4px 0 color-mix(in srgb, var(--panel) 16%, #E0D8CB), 0 7px 12px rgba(0,0,0,0.08), 0 13px 22px rgba(0,0,0,0.07); } .vm a.vmd-tile:hover, .vm a.vmd-tile:focus-visible{ box-shadow: inset 0 1.5px 0 rgba(255,255,255,1), 0 0 0 2px color-mix(in srgb, var(--panel) 30%, transparent), 0 2px 4px rgba(0,0,0,0.07), 0 7px 0 color-mix(in srgb, var(--panel) 20%, #E0D8CB), 0 12px 20px rgba(0,0,0,0.12), 0 24px 40px rgba(0,0,0,0.12); } .vm a.vmd-tile:active{ transform:translateY(-1px) scale(0.985); box-shadow: inset 0 3px 7px rgba(0,0,0,0.12), 0 1px 0 color-mix(in srgb, var(--panel) 16%, #E0D8CB); } /* ------------------------------------------------------------------ G. RESPONSIVE — frames must not crush their contents on small screens ------------------------------------------------------------------ */ @media (max-width: 900px){ .vm .lg-facts{ padding:30px 26px; border-radius:26px; gap:18px; } .vm .lg-facts::before{ inset:10px; border-radius:18px; } .vm .vm-spotlight-card{ padding:32px 28px 30px; border-radius:24px; } .vm .vm-spotlight-card::before{ inset:10px; border-radius:16px; } .vm .vm-spotlight-card::after{ inset:18px; border-radius:12px; } } @media (max-width: 700px){ /* one column, so each module keeps comfortable padding and a legible icon */ .vm .lg-facts{ grid-template-columns:1fr; padding:22px 18px; border-radius:22px; } .vm .lg-facts::before{ inset:8px; border-radius:15px; } .vm .lg-fact{ padding:18px 16px; gap:14px; } .vm .lg-fact svg{ width:52px; height:52px; padding:14px; } .vm .lg-fact > div{ padding-left:14px; } .vm .vm-spotlight-card{ padding:26px 20px 24px; border-radius:20px; } .vm .vm-spotlight-card::before{ inset:8px; border-radius:13px; } .vm .vm-spotlight-card::after{ inset:14px; border-radius:10px; } .vm .vmd-grid{ margin:9px; padding:11px; } } @media (max-width: 400px){ .vm .lg-facts{ padding:16px 12px; } .vm .lg-facts::before{ inset:6px; border-radius:13px; } .vm .lg-fact{ padding:15px 13px; gap:12px; } .vm .lg-fact svg{ width:46px; height:46px; padding:12px; } .vm .lg-fact > div{ padding-left:12px; } .vm .vm-spotlight-card{ padding:20px 15px 18px; } .vm .vm-spotlight-card::before{ inset:6px; border-radius:11px; } .vm .vm-spotlight-card::after{ inset:11px; } .vm .vm-spotlight-card .lg-more{ padding:11px 16px; } } /* ------------------------------------------------------------------ H. MOTION PREFERENCE ------------------------------------------------------------------ */ @media (prefers-reduced-motion: reduce){ .vm .btn-lg, .vm .vm-spotlight-card, .vm .vm-spotlight-card .lg-more{ transition:none; } .vm .btn-primary:hover, .vm .btn-outline-dark:hover, .vm .vmc-viewall:hover, .vm .btn-lg:active, .vm a.vm-spotlight-card:hover, .vm a.vm-spotlight-card:active, .vm a.vm-spotlight-card:hover .lg-more, .vm a.vm-spotlight-card:active .lg-more, .vm a.vmd-tile:active{ transform:none; } } /* ================================================================== 2026-09-01 — CONSISTENCY PASS ( body.vm only ) Two areas only. Everything else on the page is deliberately left as approved: header, hero, clock, portrait, hero buttons, Ford frame and its CTA, region panels and tiles, the note strip, and the footer. DEPTH LADDER after this pass (outermost shadow layer, so the numbers are directly comparable): region panels ....... 0 32px 60px rgba(0,0,0,0.14) strong Ford feature frame .. 0 30px 60px rgba(0,0,0,0.14) strong Tell Us console ..... 0 38px 76px rgba(0,0,0,0.17) medium-strong What We Repair ...... 0 18px 36px rgba(0,0,0,0.105) medium/light note strip .......... 0 16px 34px rgba(0,0,0,0.10) light What We Repair stays at roughly two-thirds the spread and two-thirds the opacity of the panels, so the six cards read as secondary controls rather than consoles. ================================================================== */ /* ------------------------------------------------------------------ 1. WHAT WE REPAIR — six molded cards (medium / light) ------------------------------------------------------------------ */ .vm .lg-related-card{ border-radius:15px; border:1px solid #EAE2D6; background:linear-gradient(178deg, #FFFFFF 0%, #FEFCF9 56%, #F8F3EC 100%); box-shadow: inset 0 1.5px 0 rgba(255,255,255,1), inset 0 0 0 1px rgba(255,255,255,0.6), inset 0 -3px 6px rgba(0,0,0,0.045), 0 1px 2px rgba(0,0,0,0.05), 0 3px 0 rgba(0,0,0,0.035), 0 8px 15px rgba(0,0,0,0.08), 0 18px 36px rgba(0,0,0,0.105); transition:transform 195ms cubic-bezier(0.2,0.7,0.3,1), box-shadow 195ms ease, border-color 195ms ease; } .vm .lg-related-card:hover{ transform:translateY(-4px); border-color:rgba(210,20,27,0.30); box-shadow: inset 0 1.5px 0 rgba(255,255,255,1), inset 0 0 0 1px rgba(255,255,255,0.6), 0 2px 4px rgba(0,0,0,0.06), 0 5px 0 rgba(0,0,0,0.04), 0 12px 22px rgba(0,0,0,0.10), 0 24px 44px rgba(0,0,0,0.115); } .vm .lg-related-card:active{ transform:translateY(-1px); box-shadow: inset 0 2px 5px rgba(0,0,0,0.085), inset 0 -1px 0 rgba(255,255,255,0.8), 0 1px 0 rgba(0,0,0,0.05), 0 3px 8px rgba(0,0,0,0.09); transition-duration:95ms; } .vm .lg-related-card:focus-visible{ outline:3px solid var(--red); outline-offset:4px; } /* ------------------------------------------------------------------ 2. TELL US CONSOLE — frame ~12% stronger, discs more substantial. Structure, 2x2 grid, padding, radius, accent line and recess are all unchanged; only shadow weight and disc modelling move. ------------------------------------------------------------------ */ .vm .lg-facts{ box-shadow: inset 0 2.5px 0 rgba(255,255,255,1), inset 3px 0 0 rgba(255,255,255,0.75), inset 0 -4px 0 rgba(0,0,0,0.07), inset -3px 0 0 rgba(0,0,0,0.05), 0 2px 5px rgba(0,0,0,0.07), 0 16px 32px rgba(0,0,0,0.12), 0 38px 76px rgba(0,0,0,0.17); } .vm .lg-fact svg{ border:1px solid #E3DACD; background: radial-gradient(118% 108% at 30% 10%, #FFFFFF 0%, #FFFFFF 50%, #F4EEE5 82%, #EBE3D7 100%); box-shadow: inset 0 2px 0 rgba(255,255,255,1), inset 0 -4px 8px rgba(0,0,0,0.075), inset 0 0 0 1px rgba(255,255,255,0.55), 0 1px 2px rgba(0,0,0,0.08), 0 3px 0 rgba(0,0,0,0.04), 0 8px 16px rgba(0,0,0,0.13); } /* ------------------------------------------------------------------ MOTION PREFERENCE ------------------------------------------------------------------ */ @media (prefers-reduced-motion: reduce){ .vm .lg-related-card{ transition:none; } .vm .lg-related-card:hover, .vm .lg-related-card:active{ transform:none; } } /* ================================================================== 2026-09-01 — CLOCK BADGES: real logo + name ( body.vm only ) The 12 badges around the portrait now carry the sourced manufacturer artwork above the make name. NOTHING about the clock geometry moves: badge diameter, ring radius, slot angles, portrait size, orbit line, gaps and hover/press physics are all untouched. Only the INSIDE of each badge changes from one centred label to logo-over-name. Logos are constrained on BOTH axes and object-fit:contain, so a wide mark (Ford oval, Audi rings) and a square one (Mercedes star, BMW roundel) sit on the same optical baseline without distortion. ================================================================== */ /* 2026-09-02 — LOGO ONLY, NO VISIBLE NAME. The badges previously stacked a ~30px logo over a 0.6rem (9.6px) name. Both were too small to read, and the name duplicated the logo it sat under. The name is now removed from SIGHT ONLY: .vmc-mark is clipped with the standard screen-reader technique rather than display:none, so it still supplies the accessible name of each badge — "Mercedes Benz", "Kia" — to screen readers, and the linked badges keep a real link text. Nothing is removed from the HTML. That frees the whole badge for the mark, which is now roughly twice the height it was and optically centred. */ .vm .vmc-btn{ flex-direction:column; justify-content:center; gap:0; padding:8px; } /* The mark fills the badge. .vmc-logo takes the whole content box and the is capped on BOTH axes with object-fit:contain, so a wide wordmark (NISSAN, INFINITI) is limited by width and a round or square mark (Mercedes star, BMW roundel, Audi rings) by height — they land on the same optical weight instead of one dwarfing the other. */ .vm .vmc-logo{ display:flex; align-items:center; justify-content:center; width:100%; height:100%; flex-shrink:0; } .vm .vmc-logo img{ display:block; max-height:76px; max-width:100%; width:auto; height:auto; object-fit:contain; } /* The make name is hidden from SIGHT ONLY — clipped with the standard screen-reader technique rather than display:none, so it still supplies the accessible name of every badge ("Mercedes Benz", "Kia", ...) and the linked badges keep real link text. Nothing was removed from the HTML. */ .vm .vmc-mark{ position:absolute; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; border:0; } /* With the names gone, the red type no longer signals which makes have a dedicated page. That cue moves to the badge itself: a red ring, so the legend's "Makes in red have a dedicated repair page" still reads true. */ .vm a.vmc-btn{ border-color:var(--red); box-shadow: inset 0 0 0 1px var(--red), inset 0 1px 0 rgba(255,255,255,0.95), inset 0 -3px 6px rgba(0,0,0,0.05), 0 1px 2px rgba(0,0,0,0.07), 0 7px 16px rgba(0,0,0,0.11); } .vm a.vmc-btn:hover, .vm a.vmc-btn:focus-visible{ box-shadow: inset 0 0 0 1px var(--red), inset 0 1px 0 rgba(255,255,255,0.95), inset 0 -3px 6px rgba(0,0,0,0.05), 0 2px 4px rgba(0,0,0,0.08), 0 16px 30px rgba(0,0,0,0.19); } /* ---- badge sizes step down at these widths, so the mark follows ---- */ @media (max-width: 1299px){ /* 106px badge */ .vm .vmc-logo img{ max-height:66px; } } @media (max-width: 1215px){ /* 104px badge, stacked hero */ .vm .vmc-logo img{ max-height:64px; } } @media (max-width: 860px){ /* 92px badge */ .vm .vmc-btn{ padding:9px; } .vm .vmc-logo img{ max-height:56px; } } @media (max-width: 700px){ /* 92px badge, 3-col grid */ .vm .vmc-btn{ padding:9px; } .vm .vmc-logo img{ max-height:56px; } } @media (max-width: 380px){ /* 82px badge */ .vm .vmc-btn{ padding:8px; } .vm .vmc-logo img{ max-height:50px; } } /* ================================================================== 2026-09-01 — REGION TILES: real logo + name ( body.vm only ) The 31 tiles inside the Asian / European / Domestic panels now carry the sourced manufacturer artwork above the make name — the same concept as the clock badges. The three outer panels are NOT touched: red / blue / green headers, frames, bevels, shadows, grid columns, make order and the four links are all exactly as approved. Only the inside of each tile changes. 29 of 31 tiles have artwork. Genesis and Porsche carry `data-noart` and stay TEXT-ONLY on purpose — no placeholder, no empty box, no invented logo. Their name is set at the original tile size so the tile reads as finished rather than broken. Tile height grows 96 -> 118px (desktop) and 82 -> 104px (mobile). That is unavoidable when a tile has to hold a logo AND a name. ================================================================== */ .vm .vmd-tile{ min-height:118px; gap:9px; padding:14px 8px 12px; } /* the logo zone — fixed height so every logo shares one baseline */ .vm .vmd-logo{ display:flex; align-items:center; justify-content:center; width:100%; height:44px; flex-shrink:0; } /* constrained on BOTH axes: a wide wordmark and a square emblem both fit without distortion */ .vm .vmd-logo img{ display:block; max-height:44px; max-width:100%; width:auto; height:auto; object-fit:contain; } /* name becomes the secondary element under the logo */ .vm .vmd-tile .vmd-name{ font-size:0.78rem; line-height:1.22; } /* ...except on the two tiles with no artwork yet, where the name is the whole tile and keeps its original weight */ .vm .vmd-tile[data-noart] .vmd-name{ font-size:0.94rem; line-height:1.25; } /* ---------- responsive ---------- */ @media (max-width: 1100px){ .vm .vmd-tile{ min-height:120px; } } @media (max-width: 560px){ .vm .vmd-tile{ min-height:104px; gap:7px; padding:11px 6px 9px; } .vm .vmd-logo{ height:34px; } .vm .vmd-logo img{ max-height:34px; } .vm .vmd-tile .vmd-name{ font-size:0.7rem; } .vm .vmd-tile[data-noart] .vmd-name{ font-size:0.84rem; } } @media (max-width: 360px){ .vm .vmd-tile{ min-height:100px; } .vm .vmd-logo{ height:32px; } .vm .vmd-logo img{ max-height:32px; } .vm .vmd-tile .vmd-name{ font-size:0.66rem; } .vm .vmd-tile[data-noart] .vmd-name{ font-size:0.78rem; } } /* ================================================================== 2026-09-01 — HYUNDAI LANDING PAGE ( body.hy only ) /hyundai-sunroof-repair/. Reuses the approved landing-page system (.page-hero, .eyebrow-rule, .lg-*, .problem-*, .btn-*) and adds only what is specific to this page. Scoped to `.hy` so nothing here can reach the frozen pages that share those classes. ================================================================== */ /* ---------- hero: brand mark beside the heading ---------- */ .hy .hy-hero-head{ display:flex; align-items:center; gap:22px; flex-wrap:wrap; } .hy .hy-badge{ display:flex; align-items:center; justify-content:center; flex-shrink:0; width:96px; height:96px; border-radius:50%; background:radial-gradient(118% 108% at 30% 12%, #FFFFFF 0%, #FFFFFF 52%, #F4EFE7 100%); border:1px solid #E4DCCE; box-shadow: inset 0 1.5px 0 rgba(255,255,255,1), inset 0 -4px 8px rgba(0,0,0,0.05), 0 1px 2px rgba(0,0,0,0.07), 0 8px 18px rgba(0,0,0,0.10); } .hy .hy-badge img{ display:block; width:64px; height:auto; } .hy .hy-hero-head h1{ margin:0; } .hy .hy-hero-head .lg-kicker{ margin-bottom:6px; } .hy .hy-hero-cta{ margin-top:24px; } /* ---------- confirmed model ---------- */ .hy .hy-models{ margin-top:6px; } .hy .lg-model{ display:inline-block; padding:12px 20px; border-radius:10px; background:var(--white); border:1px solid var(--line); font-family:var(--font-sans); font-size:1rem; font-weight:800; color:var(--red); box-shadow: inset 0 1.5px 0 rgba(255,255,255,1), 0 1px 2px rgba(0,0,0,0.05), 0 5px 12px rgba(0,0,0,0.07); } .hy .hy-model-note{ margin-top:22px; } /* ---------- panoramic vs sunroof ---------- */ .hy .hy-systems{ margin-top:6px; } /* the part-number callout: the one piece of hard evidence on the page */ .hy .hy-part-note{ margin-top:30px; padding:26px 28px; background:linear-gradient(180deg, #FFFFFF 0%, #FFFFFF 72%, #FBF8F4 100%); border:1px solid #E6DFD5; border-left:4px solid var(--red); border-radius:14px; box-shadow: inset 0 1px 0 rgba(255,255,255,1), 0 1px 2px rgba(0,0,0,0.05), 0 6px 14px rgba(0,0,0,0.07), 0 16px 32px rgba(0,0,0,0.09); } .hy .hy-part-note h3{ font-family:var(--font-sans); font-size:1.02rem; font-weight:800; text-transform:uppercase; letter-spacing:0.02em; color:var(--charcoal); margin-bottom:10px; } .hy .hy-part-note p{ font-size:1rem; line-height:1.7; color:var(--charcoal-soft); margin:0; } .hy .hy-part-note strong{ font-family:var(--font-mono, ui-monospace, SFMono-Regular, Menlo, monospace); color:var(--red); letter-spacing:0.02em; } .hy .hy-part-note em{ color:var(--charcoal); font-style:italic; } /* ---------- service cards + CTAs ---------- */ .hy .hy-services{ margin-top:6px; } .hy .hy-mid-cta, .hy .hy-final-cta{ margin-top:32px; } .hy .hy-steps{ margin-top:6px; } .hy .hy-closing{ margin-top:24px; text-align:center; } /* ---------- general workmanship photos ---------- Two images only. The caption carries the disclaimer, and it is part of the design rather than a footnote, so the images can never be mistaken for Hyundai evidence. */ .hy .hy-shots{ display:grid; grid-template-columns:1fr 1fr; gap:26px; margin-top:6px; } .hy .hy-shots figure{ margin:0; background:var(--white); border:1px solid #E6DFD5; border-radius:15px; overflow:hidden; box-shadow: inset 0 1px 0 rgba(255,255,255,1), 0 1px 2px rgba(0,0,0,0.05), 0 6px 13px rgba(0,0,0,0.07), 0 16px 30px rgba(0,0,0,0.09); } .hy .hy-shots img{ display:block; width:100%; height:260px; object-fit:cover; } .hy .hy-shots figcaption{ padding:14px 18px 16px; font-size:0.86rem; line-height:1.55; color:var(--charcoal-soft); border-top:1px solid var(--line); background:linear-gradient(180deg, #FFFFFF 0%, #FBF8F4 100%); } /* ---------- responsive ---------- */ @media (max-width: 860px){ .hy .hy-shots{ grid-template-columns:1fr; gap:20px; } .hy .hy-shots img{ height:230px; } } @media (max-width: 700px){ .hy .hy-hero-head{ gap:16px; } .hy .hy-badge{ width:76px; height:76px; } .hy .hy-badge img{ width:50px; } .hy .hy-part-note{ padding:20px 18px; } .hy .lg-model{ font-size:0.92rem; padding:11px 16px; } } @media (max-width: 420px){ .hy .hy-badge{ width:64px; height:64px; } .hy .hy-badge img{ width:42px; } .hy .hy-shots img{ height:200px; } .hy .lg-model{ font-size:0.84rem; } } /* `.lg-symptom` is built for an icon beside a line of text. This page uses a heading above a paragraph, so within .hy it stacks instead of sitting side by side - otherwise a longer heading is squeezed into a narrow column and wraps to four lines on a phone. */ .hy .hy-systems .lg-symptom{ flex-direction:column; gap:8px; padding:22px 22px 20px; } .hy .hy-systems .lg-symptom h3{ font-family:var(--font-sans); font-size:0.98rem; font-weight:800; text-transform:uppercase; letter-spacing:0.02em; color:var(--charcoal); margin:0; } .hy .hy-systems .lg-symptom p{ font-size:0.95rem; line-height:1.6; color:var(--charcoal-soft); margin:0; } /* ================================================================ SUPERSEDED 2026-09-01 — these .vm-spotlight-card rules are INERT. No element on any page carries that class any more; the Ford spotlight is now a plain linked . Verified: a page load makes ZERO requests for the old background. The two url() layers were changed to `none` because the file is not staged for deploy and the path would resolve to css/assets/ on the server, so reinstating the class would 404. Rendering is unaffected - the rules match nothing. ================================================================ */ /* ================================================================== 2026-09-01 — FORD FEATURE: IMAGE-FIRST BANNER ( body.vm only ) Source: assets/ford-f150-cowboy-web.webp (1088x630, 34 KB), cropped from the supplied mockup composite. The 1.52 MB original PNG stays untouched as the master - it has text baked into its pixels. LAYER ROLES WERE SWAPPED so the photo can be graded without touching the type. Previously `filter` sat on the card, which filtered the heading, copy and button along with the background: ::before full-bleed photo + local wash + grading (was the accent line) ::after red accent hairline, no fill (was the recess) children real HTML, z-index 1, unfiltered The wash is a LOCALISED ellipse anchored to the left edge behind the copy, not a full-width ramp. It is gone by roughly 60% of the panel, so the seats, dash and roof stay clearly readable across the middle and right. ================================================================== */ .vm .vm-spotlight-card{ /* the ivory frame itself - the photo layer sits on top of this */ background-image: linear-gradient(157deg, #FFFFFF 0%, #FCF9F4 34%, #F4EEE4 72%, #EAE2D5 100%); background-size:auto; background-position:center; filter:none; /* grading moved to the photo layer */ overflow:hidden; /* keeps the photo inside the frame radius */ } /* ---------- the photo layer ---------- */ .vm .vm-spotlight-card::before{ content:""; position:absolute; inset:0; border:0; border-radius:inherit; background-image: /* localised cream wash - an ellipse behind the copy, fading fast */ radial-gradient(ellipse 60% 135% at 0% 50%, rgba(254,252,249,0.96) 0%, rgba(254,252,249,0.93) 26%, rgba(254,252,249,0.72) 44%, rgba(254,252,249,0.34) 58%, rgba(254,252,249,0.10) 72%, rgba(254,252,249,0.00) 86%), /* depth - darkens the photo without greying it */ linear-gradient(rgba(20,17,14,0.14), rgba(20,17,14,0.14)), none /* was url("assets/ford-f150-cowboy-web.webp") - see note above */; background-repeat:no-repeat, no-repeat, no-repeat; background-size:auto, auto, cover; background-position:center, center, center 42%; /* natural clarity lift - contrast and a touch of saturation only */ filter:contrast(1.12) saturate(1.08) brightness(0.97); box-shadow:none; pointer-events:none; z-index:0; } /* ---------- the red accent hairline ---------- */ .vm .vm-spotlight-card::after{ content:""; position:absolute; inset:13px; border:1.5px solid rgba(210,20,27,0.42); border-radius:21px; background:none; box-shadow:0 1px 0 rgba(255,255,255,0.35); pointer-events:none; z-index:0; } /* copy sits above both layers and is never filtered */ .vm .vm-spotlight-card > *{ position:relative; z-index:1; } .vm .vm-spotlight-card h3, .vm .vm-spotlight-card p{ max-width:56%; } @media (max-width: 1100px){ .vm .vm-spotlight-card h3, .vm .vm-spotlight-card p{ max-width:62%; } } /* ---------- stacked layouts ---------- The copy runs full width here, so the wash has to cover more - but it is still a gradient that clears toward the bottom, leaving the lower half of the truck plainly visible rather than fogging the whole panel. */ @media (max-width: 820px){ .vm .vm-spotlight-card::before{ background-image: linear-gradient(180deg, rgba(254,252,249,0.94) 0%, rgba(254,252,249,0.90) 38%, rgba(254,252,249,0.66) 60%, rgba(254,252,249,0.34) 78%, rgba(254,252,249,0.16) 100%), linear-gradient(rgba(20,17,14,0.14), rgba(20,17,14,0.14)), none /* was url("assets/ford-f150-cowboy-web.webp") - see note above */; background-size:auto, auto, cover; background-position:center, center, center 46%; } .vm .vm-spotlight-card::after{ inset:10px; border-radius:16px; } .vm .vm-spotlight-card h3, .vm .vm-spotlight-card p{ max-width:100%; } } @media (max-width: 700px){ .vm .vm-spotlight-card::after{ inset:8px; border-radius:13px; } } /* ================================================================== 2026-09-01 - FORD SPOTLIGHT: SUPPLIED GRAPHIC, SHOWN WHOLE ( body.vm only - /vehicle-makes/ ) The Ford card is no longer a text card with a photo behind it. The owner-supplied graphic IS the card. It already carries its own heading, service list and badge in its pixels, so the panel adds NOTHING on top of it: no cream wash, no tint, no accent hairline, no heading, no paragraph, no button. The old .vm-spotlight-card rules above are deliberately left in place but are now inert - nothing on the page carries that class. Restoring the previous card is therefore a markup-only revert. Deliberate choices: - The anchor carries NO border-radius and NO overflow clipping, so not one pixel of the graphic is cut. Rounded corners would nibble the sky, the sand and the seat. - The only decoration is a drop shadow, which sits UNDER the image, never over it. - width/height attributes match the file exactly (1370x1148) so the browser reserves the right box and the page does not shift. ================================================================== */ /* 2026-09-01 - STRUCTURAL WIDTH CORRECTION. The 90% / 1150px version could never get wider than ~1109px, because .wrap caps the content column at 1280px minus 24px gutters = 1232px. Constraining the image harder was never going to help; the CONTAINER was the limit. So this Ford banner - and nothing else on the page - breaks out of .wrap. Break-out mechanics (desktop only): margin-left:50% puts the box's left edge on the centre line of .wrap's content box transform:translateX(-50%) pulls it back by half its own width .wrap is itself centred in the viewport, so its centre line IS the viewport centre and the banner lands centred. Nothing in the chain clips it: .content-section is padding-only and neither html nor body sets overflow-x. At a 1440px viewport this renders ~1325px wide - inside the 1250-1350px target. Only the BOX changes; the keeps width:100% / height:auto, so the 1370x1148 ratio is exact and no pixel is cropped. */ /* Phone and tablet keep the normal page gutter - no break-out. */ .vm .vm-spotlight{ width:100%; max-width:none; margin-left:auto; margin-right:auto; } /* Desktop: wide showcase banner, out past the text column. */ @media (min-width: 901px){ .vm .vm-spotlight{ width:92vw; max-width:1400px; margin-left:50%; margin-right:0; transform:translateX(-50%); } } .vm .vm-spotlight-img{ display:block; line-height:0; /* kills the inline-image descender gap */ background:none; border:0; padding:0; box-shadow: 0 2px 4px rgba(0,0,0,0.06), 0 12px 24px rgba(0,0,0,0.10), 0 30px 60px rgba(0,0,0,0.14); transition:transform 190ms cubic-bezier(0.2,0.7,0.3,1), box-shadow 190ms ease; } /* The complete image, proportions preserved, fluid to the container. */ .vm .vm-spotlight-img img{ display:block; width:100%; height:auto; max-width:100%; } .vm a.vm-spotlight-img:hover{ transform:translateY(-4px); box-shadow: 0 3px 6px rgba(0,0,0,0.07), 0 20px 36px rgba(0,0,0,0.13), 0 44px 78px rgba(0,0,0,0.17); } .vm a.vm-spotlight-img:active{ transform:translateY(-1px); box-shadow:0 3px 8px rgba(0,0,0,0.11); transition-duration:90ms; } .vm a.vm-spotlight-img:focus-visible{ outline:3px solid var(--red); outline-offset:5px; } @media (prefers-reduced-motion: reduce){ .vm .vm-spotlight-img, .vm a.vm-spotlight-img:hover, .vm a.vm-spotlight-img:active{ transform:none; transition:none; } } /* ================================================================== 2026-09-01 - WHAT WE REPAIR: SUPPLIED WIDE GRAPHIC ( body.vm only ) Replaces the six .lg-related-card tiles. Same break-out mechanics as the Ford banner directly above it, so the two wide graphics on this page line up on the same edges: margin-left:50% + transform:translateX(-50%) .wrap is centred in the viewport, so its centre line is the viewport centre and the banner lands centred. Desktop only - phone and tablet keep the normal page gutter. Only the BOX is styled. The is width:100% / height:auto, so the 1774x887 (exactly 2:1) proportions are preserved and nothing is cropped. No radius, no overflow clipping, no filter, no overlay. ================================================================== */ .vm .vm-wwr{ width:100%; max-width:none; margin:26px auto 0; } .vm .vm-wwr img{ display:block; width:100%; height:auto; max-width:100%; } @media (min-width: 901px){ .vm .vm-wwr{ width:92vw; max-width:1400px; margin-left:50%; margin-right:0; transform:translateX(-50%); } } /* ---------- screen-reader-only heading + supporting line ---------- Scoped: applied only where .vm-sr-only is written into the markup, which is the What We Repair

block and its .section-sub. NOT display:none - both stay in the accessibility tree and in the document outline. */ .vm .vm-sr-only{ position:absolute; width:1px; height:1px; margin:-1px; padding:0; overflow:hidden; clip:rect(0 0 0 0); clip-path:inset(50%); white-space:nowrap; border:0; } /* ---------- the six transparent service hotspots ---------- The graphic paints six panels and six "LEARN MORE" affordances, so the clickable areas must sit ON those panels rather than in a separate list. Positions are PERCENTAGES of .vm-wwr, so they scale with the image at every viewport and never need re-measuring. They were read off a 2.5% calibration grid rendered over the trimmed 1774x816 artwork. Row 1 spans 4.0-39.5% vertically, row 2 spans 62.0-97.0%. The gap between them is the centre "WHAT WE REPAIR" plate, which is deliberately NOT clickable - it names the section, it is not a service. Nothing here paints anything: background is transparent and there is no border until focus. The graphic is untouched. */ .vm .vm-wwr{ position:relative; } .vm .vm-wwr-hot{ position:absolute; display:block; background:transparent; border-radius:10px; text-decoration:none; -webkit-tap-highlight-color:transparent; } /* Visible keyboard focus. Only ever drawn on :focus-visible, so a mouse click never paints a ring over the artwork. */ .vm .vm-wwr-hot:focus{ outline:none; } .vm .vm-wwr-hot:focus-visible{ outline:3px solid var(--red); outline-offset:-3px; background:rgba(210,20,27,0.07); } /* rows */ .vm .vm-wwr-hot--r1c1, .vm .vm-wwr-hot--r1c2, .vm .vm-wwr-hot--r1c3{ top:4.0%; height:35.5%; } .vm .vm-wwr-hot--r2c1, .vm .vm-wwr-hot--r2c2, .vm .vm-wwr-hot--r2c3{ top:62.0%; height:35.0%; } /* columns */ .vm .vm-wwr-hot--r1c1, .vm .vm-wwr-hot--r2c1{ left:2.0%; width:29.5%; } .vm .vm-wwr-hot--r1c2, .vm .vm-wwr-hot--r2c2{ left:32.2%; width:32.0%; } .vm .vm-wwr-hot--r1c3, .vm .vm-wwr-hot--r2c3{ left:65.3%; width:32.6%; } /* ================================================================== 2026-09-01 - REGION + SERVICE DASHBOARDS ( body.vm only ) Two owner-supplied graphics become the visible design for "Browse By Vehicle Region" and the shop-information block. Same break-out geometry as the Ford and What We Repair banners, so all four wide graphics on this page share one set of edges. NOTHING was deleted from the markup. The region directory and the four information cards are still in the DOM as .vm-sr-only text - clipped, never display:none - so every make name, the shop address and the opening hours stay indexable and stay in the accessibility tree. See the notes in vehicle-makes.html. ================================================================== */ .vm .vm-rgn, .vm .vm-svc{ position:relative; width:100%; max-width:none; margin:26px auto 0; } .vm .vm-rgn img, .vm .vm-svc img{ display:block; width:100%; height:auto; max-width:100%; } @media (min-width: 901px){ .vm .vm-rgn, .vm .vm-svc{ width:92vw; max-width:1400px; margin-left:50%; margin-right:0; transform:translateX(-50%); } } /* ---------- region anchor points ---------- Zero-size landing points pinned over their painted column, so the 81+ sitewide links into #asian / #european / #domestic still scroll to the right part of the graphic. home.css already sets [id]{scroll-margin-top:96px}, which clears the sticky header. */ .vm .vm-rgn-anchor{ position:absolute; width:0; height:0; overflow:hidden; pointer-events:none; } .vm .vm-rgn-anchor--asian{ left:6.0%; top:21%; } .vm .vm-rgn-anchor--european{ left:36.0%; top:21%; } .vm .vm-rgn-anchor--domestic{ left:66.5%; top:21%; } /* ---------- make hotspots ---------- Percentages of the 1691x930 artwork, read off a calibration grid, so they track the image at every viewport. Only the four makes that have a dedicated page are clickable - the rest carry no destination to give. */ .vm .vm-rgn-hot{ position:absolute; display:block; background:transparent; border-radius:12px; text-decoration:none; -webkit-tap-highlight-color:transparent; } .vm .vm-rgn-hot:focus{ outline:none; } .vm .vm-rgn-hot:focus-visible{ outline:3px solid var(--red); outline-offset:-3px; background:rgba(210,20,27,0.10); } .vm .vm-rgn-hot--kia{ left:7.4%; top:29.5%; width:7.8%; height:13.5%; } .vm .vm-rgn-hot--toyota{ left:7.4%; top:43.5%; width:7.8%; height:13.5%; } .vm .vm-rgn-hot--mercedes{ left:37.8%; top:29.5%; width:7.8%; height:14.5%; } .vm .vm-rgn-hot--ford{ left:68.2%; top:29.5%; width:7.8%; height:13.5%; } /* ================================================================== 2026-09-01 - "DO NOT SEE YOUR MAKE?" DASHBOARD ( body.vm only ) Same break-out geometry and edges as the Ford, What We Repair, region and service graphics, so all five line up. The graphic is the entire visible presentation - deliberately NO card, border, background, heading or repeated wording is drawn around it. ================================================================== */ .vm .vm-dns{ position:relative; width:100%; max-width:none; margin:26px auto 0; } .vm .vm-dns img{ display:block; width:100%; height:auto; max-width:100%; } @media (min-width: 901px){ .vm .vm-dns{ width:92vw; max-width:1400px; margin-left:50%; margin-right:0; transform:translateX(-50%); } } /* The phone hotspot, sized in percentages of the 1916x821 artwork so it tracks the painted number at every viewport. Read off a calibration grid: the number occupies roughly 56.5-75% across and 51-58% down. */ /* Anchored on the CENTRE of the painted number rather than its top-left, so the min sizes below can grow it symmetrically. Without them the box would scale to 53x12 px at a 320px viewport - far under the 44x44 minimum touch target - and the number would be almost untappable on a phone. On desktop the percentages already exceed 44px, so the minimums change nothing there. */ .vm .vm-dns-hot{ position:absolute; left:65.75%; top:54.75%; transform:translate(-50%, -50%); width:19.5%; height:10.5%; min-width:44px; min-height:44px; display:block; background:transparent; border-radius:8px; text-decoration:none; -webkit-tap-highlight-color:transparent; } .vm .vm-dns-hot:focus{ outline:none; } .vm .vm-dns-hot:focus-visible{ outline:3px solid var(--red); outline-offset:2px; background:rgba(210,20,27,0.10); } /* ---------- keyboard escape hatch for screen-reader-only links ---------- .vm-sr-only blocks are clipped, so a link inside one would otherwise be a focus stop with nothing visible on screen - a WCAG 2.4.11 problem. When anything inside gains focus the block un-clips and pins itself top-left, exactly like a skip link. Screen readers and crawlers are unaffected. */ .vm .vm-sr-only:focus-within{ position:fixed; top:14px; left:14px; width:auto; height:auto; max-width:min(560px, calc(100vw - 28px)); margin:0; padding:14px 18px; overflow:visible; clip:auto; clip-path:none; white-space:normal; z-index:2000; background:#FFFFFF; color:var(--charcoal, #222); border:2px solid var(--red); border-radius:12px; box-shadow:0 10px 28px rgba(0,0,0,0.24); } /* ================================================================== 2026-09-01 - VEHICLE MAKES HERO: 3D MOLDED DASHBOARD SKIN ( body.vm only, and only the hero - nothing below it is touched ) Reference: Website Media/Website Photos/Graphics/ vehicle-makes-hero-3d-sunroof-king.png Deliberately CSS-ONLY. The hero is still real HTML: real H1, real breadcrumb, real lede, real buttons, real links, the real owner portrait and the real 12 manufacturer SVGs. No screenshot is used, so text stays selectable and indexable and the ring stays keyboard navigable. Nothing here changes GEOMETRY. The --clock / --btn / --gap variables and the rotate->translate->rotate placement are untouched, so every existing responsive rule still governs layout. This block only adds surface: colour, moulding, trim, screws, depth and glow. Layer order inside .vmc-hero: ::before moulded outer frame + corner screws z-index 0 ::after orange illuminated inner trim z-index 1 .wrap all real content z-index 2 ================================================================== */ /* ---------- the warm cream ground ---------- */ .vm .vmc-hero{ position:relative; isolation:isolate; border-bottom:0; padding:30px 0 34px; background: radial-gradient(120% 90% at 82% 22%, 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.85) 0%, rgba(255,255,255,0) 60%), linear-gradient(168deg, #FBF4E9 0%, #F7EEE0 46%, #F2E6D4 100%); } /* ---------- moulded outer frame ---------- Four radial-gradients paint the corner screws; the border and layered shadows do the moulding. No extra markup, no images. */ .vm .vmc-hero::before{ content:""; position:absolute; inset:14px; border-radius:26px; border:1px solid #E3D5BF; background-image: radial-gradient(circle at 26px 26px, #C9BCA6 0 3.5px, #EFE6D6 3.5px 7px, rgba(0,0,0,0) 7.5px), radial-gradient(circle at calc(100% - 26px) 26px, #C9BCA6 0 3.5px, #EFE6D6 3.5px 7px, rgba(0,0,0,0) 7.5px), radial-gradient(circle at 26px calc(100% - 26px), #C9BCA6 0 3.5px, #EFE6D6 3.5px 7px, rgba(0,0,0,0) 7.5px), radial-gradient(circle at calc(100% - 26px) calc(100% - 26px), #C9BCA6 0 3.5px, #EFE6D6 3.5px 7px, rgba(0,0,0,0) 7.5px); box-shadow: inset 0 2px 0 rgba(255,255,255,0.95), inset 0 -3px 0 rgba(0,0,0,0.06), inset 3px 0 0 rgba(255,255,255,0.55), inset -3px 0 0 rgba(0,0,0,0.04), 0 2px 4px rgba(23,20,18,0.06), 0 16px 34px rgba(23,20,18,0.11), 0 36px 70px rgba(23,20,18,0.13); pointer-events:none; z-index:0; } /* ---------- orange illuminated inner trim ---------- */ .vm .vmc-hero::after{ content:""; position:absolute; inset:26px; border-radius:18px; border:2px solid rgba(242,96,12,0.55); box-shadow: 0 0 0 1px rgba(255,255,255,0.75), 0 0 14px rgba(242,96,12,0.28), inset 0 0 22px rgba(242,96,12,0.10); pointer-events:none; z-index:1; } .vm .vmc-hero > .wrap{ position:relative; z-index:2; padding-top:20px; padding-bottom:20px; } /* ---------- copy column ---------- */ .vm .vmc-hero .lg-kicker{ color:var(--orange); letter-spacing:0.12em; } .vm .vmc-hero h1{ text-shadow:0 1px 0 rgba(255,255,255,0.9), 0 2px 3px rgba(23,20,18,0.10); } .vm .vmc-hero .page-hero-accent{ background:linear-gradient(90deg, var(--orange) 0%, var(--orange-dark) 100%); box-shadow:0 1px 0 rgba(255,255,255,0.8), 0 2px 6px rgba(242,96,12,0.35); } .vm .vmc-hero .breadcrumb .current{ color:var(--orange-dark); } /* ---------- dimensional CTAs ---------- A hard colour edge under each control does the moulded-key look; the press state removes it so the button physically sinks. */ .vm .vmc-hero .vmc-viewall{ border-radius:12px; box-shadow: inset 0 1px 0 rgba(255,255,255,0.22), 0 5px 0 #0C0A09, 0 8px 14px rgba(23,20,18,0.26), 0 16px 30px rgba(23,20,18,0.20); } .vm .vmc-hero .vmc-viewall:hover{ transform:translateY(-2px); box-shadow: inset 0 1px 0 rgba(255,255,255,0.22), 0 7px 0 #0C0A09, 0 12px 20px rgba(23,20,18,0.30), 0 22px 38px rgba(23,20,18,0.24); } .vm .vmc-hero .vmc-viewall:active{ transform:translateY(3px); box-shadow:inset 0 2px 6px rgba(0,0,0,0.45), 0 1px 0 #0C0A09; } .vm .vmc-hero .vmc-contact-row .btn-primary{ border-radius:12px; box-shadow: inset 0 1px 0 rgba(255,255,255,0.35), 0 5px 0 var(--red-dark), 0 8px 14px rgba(210,20,27,0.32), 0 16px 30px rgba(23,20,18,0.18); } .vm .vmc-hero .vmc-contact-row .btn-primary:hover{ transform:translateY(-2px); box-shadow: inset 0 1px 0 rgba(255,255,255,0.35), 0 7px 0 var(--red-dark), 0 12px 20px rgba(210,20,27,0.38), 0 22px 38px rgba(23,20,18,0.22); } .vm .vmc-hero .vmc-contact-row .btn-primary:active{ transform:translateY(3px); box-shadow:inset 0 2px 6px rgba(0,0,0,0.30), 0 1px 0 var(--red-dark); } .vm .vmc-hero .vmc-contact-row .btn-outline-dark{ border-radius:12px; background:linear-gradient(180deg, #FFFFFF 0%, #FFFDF9 55%, #F3EADC 100%); border-color:#E0D2BC; color:var(--charcoal); box-shadow: inset 0 1.5px 0 rgba(255,255,255,1), 0 5px 0 #D8C9B2, 0 8px 14px rgba(23,20,18,0.16), 0 16px 28px rgba(23,20,18,0.13); } .vm .vmc-hero .vmc-contact-row .btn-outline-dark:hover{ background:linear-gradient(180deg, #FFFFFF 0%, #FFFFFF 55%, #F7F0E5 100%); color:var(--charcoal); transform:translateY(-2px); box-shadow: inset 0 1.5px 0 rgba(255,255,255,1), 0 7px 0 #D8C9B2, 0 12px 20px rgba(23,20,18,0.20), 0 22px 36px rgba(23,20,18,0.16); } .vm .vmc-hero .vmc-contact-row .btn-outline-dark:active{ transform:translateY(3px); box-shadow:inset 0 2px 6px rgba(0,0,0,0.14), 0 1px 0 #D8C9B2; } /* ---------- the ring guide, now an illuminated orange track ---------- */ .vm .vmc-hero .vmc::before{ border:2px solid rgba(242,96,12,0.30); opacity:1; box-shadow:0 0 12px rgba(242,96,12,0.20), inset 0 0 12px rgba(242,96,12,0.10); } /* ---------- owner portrait: orange rim and glow ---------- */ .vm .vmc-hero .vmc-portrait{ border:6px solid #FFFDF8; box-shadow: 0 0 0 3px var(--orange), 0 0 0 7px rgba(242,96,12,0.20), 0 0 26px rgba(242,96,12,0.35), 0 20px 46px rgba(23,20,18,0.26); } /* ---------- make discs: moulded cream keys ---------- */ .vm .vmc-hero .vmc-btn{ background:linear-gradient(162deg, #FFFFFF 0%, #FFFCF6 48%, #F2E7D6 100%); border:1px solid #E6D8C2; box-shadow: inset 0 1.5px 0 rgba(255,255,255,1), inset 0 -4px 8px rgba(150,120,80,0.13), 0 1px 2px rgba(23,20,18,0.08), 0 8px 18px rgba(23,20,18,0.14); } /* linked discs read as live controls: orange rim, orange label */ .vm .vmc-hero a.vmc-btn{ border-color:rgba(242,96,12,0.55); box-shadow: inset 0 1.5px 0 rgba(255,255,255,1), inset 0 -4px 8px rgba(150,120,80,0.13), 0 0 0 1px rgba(242,96,12,0.18), 0 0 12px rgba(242,96,12,0.22), 0 8px 18px rgba(23,20,18,0.16); } .vm .vmc-hero a.vmc-btn .vmc-mark{ color:var(--orange-dark); } .vm .vmc-hero a.vmc-btn:hover, .vm .vmc-hero a.vmc-btn:focus-visible{ box-shadow: inset 0 1.5px 0 rgba(255,255,255,1), 0 0 0 1px rgba(242,96,12,0.30), 0 0 20px rgba(242,96,12,0.38), 0 18px 34px rgba(23,20,18,0.22); } .vm .vmc-hero .vmc-legend a{ color:var(--orange-dark); } /* ---------- responsive: the frame must not crush the content ---------- */ @media (max-width: 900px){ .vm .vmc-hero{ padding:20px 0 24px; } .vm .vmc-hero::before{ inset:10px; border-radius:20px; } .vm .vmc-hero::after{ inset:19px; border-radius:14px; } .vm .vmc-hero > .wrap{ padding-top:14px; padding-bottom:14px; } } @media (max-width: 560px){ .vm .vmc-hero{ padding:14px 0 18px; } .vm .vmc-hero::before{ inset:7px; border-radius:16px; } .vm .vmc-hero::after{ inset:14px; border-radius:11px; } .vm .vmc-hero > .wrap{ padding-top:12px; padding-bottom:12px; } } @media (max-width: 380px){ .vm .vmc-hero::before{ inset:5px; border-radius:13px; } .vm .vmc-hero::after{ inset:11px; border-radius:9px; } } @media (prefers-reduced-motion: reduce){ .vm .vmc-hero .vmc-viewall, .vm .vmc-hero .vmc-contact-row .btn{ transition:none; } .vm .vmc-hero .vmc-viewall:hover, .vm .vmc-hero .vmc-contact-row .btn:hover{ transform:none; } }