/* =========================================================================== USA CommNet, LLC — design system Palette: bold red, black, white, dark neutrals. Premium automotive. Single stylesheet, no build step. Ordered: tokens -> reset -> utilities -> typography -> buttons -> header -> hero -> components -> forms -> footer -> motion. =========================================================================== */ /* --- Tokens ------------------------------------------------------------- */ :root { /* Brand */ --red: #E10600; --red-hot: #FF1A0D; --red-deep: #A50400; /* Neutrals: near-black through to white */ --black: #08090A; --ink: #0F1113; --surface: #15181B; --surface-2: #1D2126; --surface-3: #272C33; --white: #FFFFFF; --mute: #9AA3AD; --mute-dim: #6B7480; /* Hairlines */ --line: rgba(255, 255, 255, 0.10); --line-soft: rgba(255, 255, 255, 0.06); --line-strong: rgba(255, 255, 255, 0.18); /* Type */ --display: "Barlow Condensed", "Arial Narrow", system-ui, sans-serif; --body: "Montserrat", system-ui, -apple-system, "Segoe UI", sans-serif; /* Rhythm. Sections breathe — this is what reads as premium. */ --pad-section: clamp(4.5rem, 9vw, 9rem); --gutter: clamp(1.25rem, 4vw, 3rem); --maxw: 1280px; --maxw-narrow: 760px; /* Motion */ --ease: cubic-bezier(0.22, 0.61, 0.36, 1); --ease-out: cubic-bezier(0.16, 1, 0.3, 1); } /* --- Reset -------------------------------------------------------------- */ *, *::before, *::after { box-sizing: border-box; } html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; } body { margin: 0; background: var(--black); color: var(--white); font-family: var(--body); font-size: 1rem; line-height: 1.65; -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; } /* NOTE: there is deliberately NO overflow-x on or . On it makes body its own scroll container and freezes document.scrollingElement, silently breaking every anchor link. On , "clip" disables programmatic scrolling outright and "hidden" turns the root into a scroll port. Horizontal bleed is contained by the components that actually cause it instead - .hero, .band and .frame all clip their own media. If a new component bleeds sideways, clip it there, not globally. */ img, video { display: block; max-width: 100%; height: auto; } a { color: inherit; text-decoration: none; } button, input, select, textarea { font: inherit; color: inherit; } /* Visible focus everywhere. Never remove without a replacement. */ :focus-visible { outline: 2px solid var(--red-hot); outline-offset: 3px; border-radius: 2px; } /* Respect the OS setting. Every transition below is decorative. */ @media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } *, *::before, *::after { animation-duration: 0.001ms !important; animation-iteration-count: 1 !important; transition-duration: 0.001ms !important; } } /* --- Utilities ---------------------------------------------------------- */ .wrap { width: 100%; max-width: var(--maxw); margin-inline: auto; padding-inline: var(--gutter); } .wrap-narrow { width: 100%; max-width: var(--maxw-narrow); margin-inline: auto; padding-inline: var(--gutter); } .section { padding-block: var(--pad-section); } .section--tight { padding-block: clamp(3rem, 6vw, 5.5rem); } .section--ink { background: var(--ink); } .section--surface { background: var(--surface); } .skip-link { position: absolute; left: -9999px; top: 0; z-index: 200; background: var(--red); color: var(--white); padding: 0.85rem 1.4rem; font-family: var(--display); font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase; } .skip-link:focus { left: 0; } .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; } /* --- Typography --------------------------------------------------------- */ h1, h2, h3, h4 { font-family: var(--display); font-weight: 700; line-height: 0.94; letter-spacing: -0.01em; text-transform: uppercase; margin: 0; } /* Large, confident display type is the backbone of the look. */ .h-hero { font-size: clamp(3.25rem, 11vw, 8.5rem); } .h-1 { font-size: clamp(2.5rem, 6.5vw, 5rem); } .h-2 { font-size: clamp(2rem, 4.2vw, 3.25rem); } .h-3 { font-size: clamp(1.35rem, 2.2vw, 1.85rem); line-height: 1.05; } p { margin: 0 0 1.15rem; } p:last-child { margin-bottom: 0; } .lede { font-size: clamp(1.05rem, 1.5vw, 1.3rem); line-height: 1.6; color: var(--mute); font-weight: 300; } .body-mute { color: var(--mute); } /* Eyebrow: small red-ruled label above a heading. Used on every section. */ .eyebrow { display: inline-flex; align-items: center; gap: 0.7rem; font-family: var(--display); font-weight: 600; font-size: 0.95rem; letter-spacing: 0.22em; text-transform: uppercase; color: var(--mute); margin: 0 0 1.1rem; } .eyebrow::before { content: ""; width: 2.25rem; height: 2px; background: var(--red); flex: none; } .eyebrow--center { justify-content: center; } .section-head { max-width: 46rem; margin-bottom: clamp(2.5rem, 5vw, 4rem); } .section-head--center { margin-inline: auto; text-align: center; } /* --- Buttons ------------------------------------------------------------ */ .btn { display: inline-flex; align-items: center; justify-content: center; gap: 0.6rem; font-family: var(--display); font-weight: 600; font-size: 1.05rem; letter-spacing: 0.14em; text-transform: uppercase; padding: 1rem 2rem; border: 2px solid transparent; border-radius: 2px; cursor: pointer; transition: background-color 0.25s var(--ease), border-color 0.25s var(--ease), color 0.25s var(--ease), transform 0.25s var(--ease); } .btn:hover { transform: translateY(-2px); } .btn:active { transform: translateY(0); } .btn--primary { background: var(--red); color: var(--white); } .btn--primary:hover { background: var(--red-hot); } .btn--ghost { background: transparent; color: var(--white); border-color: var(--line-strong); } .btn--ghost:hover { border-color: var(--white); background: rgba(255, 255, 255, 0.06); } .btn--light { background: var(--white); color: var(--black); } .btn--light:hover { background: var(--mute); } .btn--wide { width: 100%; } /* Text link with a red rule that widens on hover. */ .link-arrow { display: inline-flex; align-items: center; gap: 0.5rem; font-family: var(--display); font-weight: 600; letter-spacing: 0.14em; text-transform: uppercase; color: var(--white); padding-bottom: 0.25rem; border-bottom: 2px solid var(--red); transition: gap 0.25s var(--ease), color 0.25s var(--ease); } .link-arrow:hover { gap: 0.9rem; color: var(--red-hot); } /* --- Header ------------------------------------------------------------- */ .site-header { position: fixed; inset: 0 0 auto 0; z-index: 100; border-bottom: 1px solid transparent; transition: background-color 0.35s var(--ease), border-color 0.35s var(--ease); } /* Scrolled state is toggled by js/main.js. This is the ONLY backdrop-filter layer on the page: nesting a second one inside washes both out. */ .site-header.is-scrolled { background: rgba(8, 9, 10, 0.88); -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px); border-bottom-color: var(--line); } .nav { display: flex; align-items: center; justify-content: space-between; gap: 2rem; height: 84px; } /* Text-based brand mark. No logo was supplied; this is the placeholder treatment: condensed caps, a red block accent, LLC set small. */ .brand { display: inline-flex; align-items: baseline; gap: 0.5rem; font-family: var(--display); font-weight: 700; font-size: clamp(1.35rem, 2.5vw, 1.65rem); letter-spacing: 0.02em; text-transform: uppercase; line-height: 1; white-space: nowrap; } .brand__usa { background: var(--red); color: var(--white); padding: 0.28em 0.42em 0.2em; border-radius: 2px; } .brand__name { color: var(--white); } .brand__llc { font-size: 0.62em; font-weight: 500; letter-spacing: 0.18em; color: var(--mute); } .nav__links { display: flex; align-items: center; gap: clamp(1.25rem, 2.5vw, 2.5rem); list-style: none; margin: 0; padding: 0; } .nav__link { position: relative; font-family: var(--display); font-weight: 600; font-size: 1.05rem; letter-spacing: 0.13em; text-transform: uppercase; color: var(--mute); padding-block: 0.4rem; transition: color 0.25s var(--ease); } .nav__link::after { content: ""; position: absolute; left: 0; bottom: 0; width: 100%; height: 2px; background: var(--red); transform: scaleX(0); transform-origin: left; transition: transform 0.3s var(--ease); } .nav__link:hover { color: var(--white); } .nav__link:hover::after { transform: scaleX(1); } /* Active page is marked in the HTML with aria-current="page" — never derived in JS from the filename. Netlify Pretty URLs rewrite "cars.html" to "/cars" in the served markup, so filename matching silently stops working. */ .nav__link[aria-current="page"] { color: var(--white); } .nav__link[aria-current="page"]::after { transform: scaleX(1); } .nav__cta { display: none; } .nav__toggle { display: inline-flex; flex-direction: column; justify-content: center; gap: 5px; width: 44px; height: 44px; padding: 0 9px; background: none; border: 0; cursor: pointer; } .nav__toggle span { display: block; height: 2px; width: 100%; background: var(--white); transition: transform 0.3s var(--ease), opacity 0.2s var(--ease); } .nav__toggle[aria-expanded="true"] span:nth-child(1) { transform: translateY(7px) rotate(45deg); } .nav__toggle[aria-expanded="true"] span:nth-child(2) { opacity: 0; } .nav__toggle[aria-expanded="true"] span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); } @media (min-width: 981px) { .nav__toggle { display: none; } .nav__cta { display: inline-flex; } } /* Mobile drawer */ @media (max-width: 980px) { .nav__links { position: fixed; inset: 84px 0 auto 0; flex-direction: column; align-items: stretch; gap: 0; background: var(--ink); border-bottom: 1px solid var(--line); padding: 0.5rem var(--gutter) 1.75rem; max-height: calc(100dvh - 84px); overflow-y: auto; /* Clear the 84px header offset as well as the drawer's own height, or a short menu stops before it is off-screen and its last link stays visible. visibility keeps the closed links out of the tab order. */ transform: translateY(calc(-100% - 84px)); visibility: hidden; transition: transform 0.4s var(--ease-out), visibility 0s linear 0.4s; } .nav__links.is-open { transform: translateY(0); visibility: visible; transition: transform 0.4s var(--ease-out), visibility 0s linear 0s; } .nav__link { font-size: 1.5rem; padding-block: 1rem; border-bottom: 1px solid var(--line-soft); } .nav__link::after { display: none; } .nav__link[aria-current="page"] { color: var(--red-hot); } } /* --- Hero --------------------------------------------------------------- */ .hero { position: relative; display: flex; flex-direction: column; justify-content: flex-end; min-height: 100svh; padding-top: 84px; overflow: hidden; background: var(--black); } .hero--inner { min-height: 58svh; justify-content: center; } .hero__media { position: absolute; inset: 0; z-index: 0; } .hero__media img { width: 100%; height: 100%; object-fit: cover; } @keyframes heroPush { from { transform: scale(1.08); } to { transform: scale(1); } } /* Two-stop scrim: keeps display type legible over any photograph. */ .hero__media::after { content: ""; position: absolute; inset: 0; background: linear-gradient(to top, rgba(8, 9, 10, 0.96) 0%, rgba(8, 9, 10, 0.55) 42%, rgba(8, 9, 10, 0.25) 100%), linear-gradient(to right, rgba(8, 9, 10, 0.85) 0%, rgba(8, 9, 10, 0) 65%); } .hero__inner { position: relative; z-index: 1; width: 100%; padding-block: clamp(3rem, 7vw, 6rem); } .hero__title { margin-bottom: 1.5rem; max-width: 16ch; } .hero__title em { font-style: normal; color: var(--red); } .hero__copy { max-width: 46ch; margin-bottom: 2.25rem; } .hero__actions { display: flex; flex-wrap: wrap; gap: 1rem; } /* --- Media frame -------------------------------------------------------- */ /* Every photo slot on the site uses this wrapper. Until real photography is supplied it renders a labelled dark placeholder rather than a broken image icon, so layout can be reviewed without assets. See IMAGE-BRIEF.md. */ .frame { position: relative; overflow: hidden; background: linear-gradient(135deg, var(--surface-2) 0%, var(--ink) 55%, var(--black) 100%); border: 1px solid var(--line-soft); } .frame::after { content: ""; position: absolute; inset: 0; background: linear-gradient(to top, rgba(8, 9, 10, 0.55), transparent 55%); pointer-events: none; } .frame img { width: 100%; height: 100%; object-fit: cover; transition: transform 0.7s var(--ease); } .frame--4x3 { aspect-ratio: 4 / 3; } .frame--16x9 { aspect-ratio: 16 / 9; } .frame--3x4 { aspect-ratio: 3 / 4; } .frame--square { aspect-ratio: 1 / 1; } /* --- Vehicle cards ------------------------------------------------------ */ .grid-cards { display: grid; gap: clamp(1.25rem, 2.5vw, 2rem); grid-template-columns: 1fr; } @media (min-width: 641px) { .grid-cards { grid-template-columns: repeat(2, 1fr); } } @media (min-width: 1001px) { .grid-cards--3 { grid-template-columns: repeat(3, 1fr); } } .card { display: flex; flex-direction: column; background: var(--surface); border: 1px solid var(--line-soft); border-radius: 3px; overflow: hidden; transition: border-color 0.35s var(--ease), transform 0.35s var(--ease); } .card:hover { border-color: var(--line-strong); transform: translateY(-4px); } .card:hover .frame img { transform: scale(1.05); } .card__media { position: relative; } .card__tag { position: absolute; z-index: 2; top: 1rem; left: 1rem; font-family: var(--display); font-weight: 600; font-size: 0.82rem; letter-spacing: 0.16em; text-transform: uppercase; background: var(--red); color: var(--white); padding: 0.35rem 0.7rem; border-radius: 2px; } .card__tag--dark { background: rgba(8, 9, 10, 0.85); border: 1px solid var(--line-strong); } .card__body { display: flex; flex-direction: column; flex: 1; padding: clamp(1.25rem, 2.2vw, 1.75rem); } .card__title { margin-bottom: 0.4rem; } .card__meta { font-family: var(--display); font-weight: 500; font-size: 0.95rem; letter-spacing: 0.14em; text-transform: uppercase; color: var(--mute-dim); margin-bottom: 1.1rem; } /* --- Split feature ------------------------------------------------------ */ .split { display: grid; gap: clamp(2rem, 5vw, 4.5rem); align-items: center; grid-template-columns: 1fr; } @media (min-width: 901px) { .split { grid-template-columns: repeat(2, 1fr); } .split--flip .split__media { order: 2; } } /* --- Feature list ------------------------------------------------------- */ .feature-list { list-style: none; margin: 1.75rem 0 0; padding: 0; } .feature-list li { position: relative; padding-left: 2.25rem; padding-block: 0.85rem; border-top: 1px solid var(--line-soft); color: var(--mute); } .feature-list li:last-child { border-bottom: 1px solid var(--line-soft); } .feature-list li::before { content: ""; position: absolute; left: 0; top: 1.45rem; width: 1.25rem; height: 2px; background: var(--red); } .feature-list strong { display: block; color: var(--white); font-family: var(--display); font-weight: 600; font-size: 1.2rem; letter-spacing: 0.04em; text-transform: uppercase; margin-bottom: 0.15rem; } /* --- Numbered process --------------------------------------------------- */ .steps { display: grid; gap: clamp(1.5rem, 3vw, 2.5rem); grid-template-columns: 1fr; list-style: none; margin: 0; padding: 0; counter-reset: step; } @media (min-width: 701px) { .steps { grid-template-columns: repeat(2, 1fr); } } @media (min-width: 1001px) { .steps--4 { grid-template-columns: repeat(4, 1fr); } } .step { counter-increment: step; border-top: 2px solid var(--line); padding-top: 1.5rem; transition: border-color 0.35s var(--ease); } .step:hover { border-top-color: var(--red); } .step::before { content: "0" counter(step); display: block; font-family: var(--display); font-weight: 700; font-size: 2.75rem; line-height: 1; color: var(--red); margin-bottom: 0.85rem; } /* --- CTA band ----------------------------------------------------------- */ .cta-band { position: relative; background: var(--red); overflow: hidden; } .cta-band__inner { position: relative; z-index: 1; display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 2rem; padding-block: clamp(3rem, 6vw, 5rem); } .cta-band p { color: rgba(255, 255, 255, 0.82); max-width: 48ch; } /* --- Forms -------------------------------------------------------------- */ .form-grid { display: grid; gap: 1.25rem; grid-template-columns: 1fr; } @media (min-width: 641px) { .form-grid--2 { grid-template-columns: repeat(2, 1fr); } .field--full { grid-column: 1 / -1; } } .field { display: flex; flex-direction: column; gap: 0.5rem; } .field label { font-family: var(--display); font-weight: 600; font-size: 0.92rem; letter-spacing: 0.16em; text-transform: uppercase; color: var(--mute); } .field label .req { color: var(--red); } .field input, .field select, .field textarea { background: var(--ink); border: 1px solid var(--line); border-radius: 2px; padding: 0.9rem 1rem; color: var(--white); transition: border-color 0.25s var(--ease), background-color 0.25s var(--ease); } .field input::placeholder, .field textarea::placeholder { color: var(--mute-dim); } .field input:focus, .field select:focus, .field textarea:focus { border-color: var(--red); background: var(--black); } .field textarea { resize: vertical; min-height: 8rem; } .field select { appearance: none; background-image: linear-gradient(45deg, transparent 50%, var(--mute) 50%), linear-gradient(135deg, var(--mute) 50%, transparent 50%); background-position: calc(100% - 20px) calc(50% + 2px), calc(100% - 14px) calc(50% + 2px); background-size: 6px 6px, 6px 6px; background-repeat: no-repeat; padding-right: 2.75rem; } .form-note { font-size: 0.85rem; color: var(--mute-dim); line-height: 1.6; } /* Netlify's honeypot field must never be visible or focusable. */ .hp { position: absolute; left: -9999px; opacity: 0; } /* --- Contact details ---------------------------------------------------- */ .detail-list { list-style: none; margin: 0; padding: 0; } .detail-list li { padding-block: 1.15rem; border-bottom: 1px solid var(--line-soft); } .detail-list li:first-child { border-top: 1px solid var(--line-soft); } .detail__key { font-family: var(--display); font-weight: 600; font-size: 0.85rem; letter-spacing: 0.2em; text-transform: uppercase; color: var(--mute-dim); margin-bottom: 0.35rem; } .detail__val { font-size: 1.05rem; } .detail__val a { border-bottom: 1px solid var(--red); padding-bottom: 1px; } .detail__val a:hover { color: var(--red-hot); } /* --- Footer ------------------------------------------------------------- */ .site-footer { background: var(--ink); border-top: 1px solid var(--line); padding-top: clamp(3.5rem, 6vw, 5.5rem); } .footer-grid { display: grid; gap: clamp(2rem, 4vw, 3rem); grid-template-columns: 1fr; padding-bottom: clamp(2.5rem, 5vw, 4rem); } @media (min-width: 641px) { .footer-grid { grid-template-columns: repeat(2, 1fr); } } @media (min-width: 1001px) { .footer-grid { grid-template-columns: 1.6fr 1fr 1fr 1.2fr; } } .footer__brand { margin-bottom: 1.25rem; } .footer__blurb { color: var(--mute); max-width: 34ch; font-size: 0.95rem; } .footer__title { font-family: var(--display); font-weight: 600; font-size: 0.9rem; letter-spacing: 0.2em; text-transform: uppercase; color: var(--white); margin-bottom: 1.1rem; } .footer__list { list-style: none; margin: 0; padding: 0; } .footer__list li { margin-bottom: 0.7rem; } .footer__list a, .footer__list span { color: var(--mute); font-size: 0.95rem; transition: color 0.25s var(--ease); } .footer__list a:hover { color: var(--red-hot); } .footer-bar { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 1rem; padding-block: 1.75rem; border-top: 1px solid var(--line-soft); font-size: 0.85rem; color: var(--mute-dim); } .footer-bar a { color: var(--mute); } .footer-bar a:hover { color: var(--red-hot); } .footer-credit a { color: var(--white); border-bottom: 1px solid var(--red); padding-bottom: 1px; } .footer-credit a:hover { color: var(--red-hot); } /* --- Scroll-reveal ------------------------------------------------------ */ /* js/main.js adds .is-in when the element enters the viewport. The starting state is applied by JS too (via .reveal-ready on ), so that with JavaScript disabled the content is simply visible. */ .reveal-ready .reveal { opacity: 0; transform: translateY(28px); transition: opacity 0.7s var(--ease-out), transform 0.7s var(--ease-out); } .reveal-ready .reveal.is-in { opacity: 1; transform: none; } @media (prefers-reduced-motion: reduce) { .reveal-ready .reveal { opacity: 1; transform: none; } } /* --- Photo placeholder -------------------------------------------------- */ /* No photography was supplied with the brief. Each .frame that has no shows this marker instead, so the layout is reviewable and every missing asset is visible at a glance. Drop the real file in and delete the .frame__slot element — nothing else changes. See IMAGE-BRIEF.md. */ .frame__slot { position: absolute; inset: 0; z-index: 1; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 0.5rem; text-align: center; padding: 1.5rem; } .frame__slot::before { content: ""; position: absolute; inset: 0; background: repeating-linear-gradient( -45deg, transparent 0 14px, rgba(255, 255, 255, 0.022) 14px 28px ); } .frame__slot span { position: relative; font-family: var(--display); font-weight: 600; font-size: 0.78rem; letter-spacing: 0.24em; text-transform: uppercase; color: var(--mute-dim); } .frame__slot span:first-child { color: var(--red); padding-bottom: 0.45rem; border-bottom: 2px solid var(--red); margin-bottom: 0.2rem; } /* In a hero the slot fills the whole stage, so a centred label lands on top of the headline. Pin it into the bottom-right corner instead. */ .hero__media .frame__slot { align-items: flex-end; justify-content: flex-end; padding: var(--gutter); text-align: right; } .hero__media .frame__slot span:first-child { border-bottom-width: 1px; padding-bottom: 0.3rem; } /* =========================================================================== PHASE 2 COMPONENTS =========================================================================== */ /* --- Anchor offset ------------------------------------------------------ */ /* The header is fixed at 84px. Without this, jumping to #contact parks the section heading underneath it. */ :target, section[id], [id="contact"] { scroll-margin-top: 96px; } /* --- Temporary-content notice ------------------------------------------- */ /* Marks a block whose real content is still with the client. Deliberately visible: nobody should mistake placeholder structure for signed-off copy. */ .notice { display: flex; flex-wrap: wrap; align-items: baseline; gap: 0.4rem 0.9rem; border: 1px dashed var(--line-strong); border-left: 3px solid var(--red); background: rgba(225, 6, 0, 0.045); border-radius: 2px; padding: 1rem 1.25rem; font-size: 0.9rem; color: var(--mute); } .notice__label { font-family: var(--display); font-weight: 600; font-size: 0.82rem; letter-spacing: 0.2em; text-transform: uppercase; color: var(--red-hot); flex: none; } .notice p { margin: 0; } /* --- Tiles (offer / value grids) ---------------------------------------- */ .grid-tiles { display: grid; gap: clamp(1rem, 2vw, 1.5rem); grid-template-columns: 1fr; } @media (min-width: 601px) { .grid-tiles { grid-template-columns: repeat(2, 1fr); } } @media (min-width: 1001px) { .grid-tiles--3 { grid-template-columns: repeat(3, 1fr); } } @media (min-width: 1001px) { .grid-tiles--4 { grid-template-columns: repeat(4, 1fr); } } .tile { position: relative; display: flex; flex-direction: column; background: var(--surface); border: 1px solid var(--line-soft); border-radius: 3px; padding: clamp(1.5rem, 2.6vw, 2.25rem); overflow: hidden; transition: border-color 0.35s var(--ease), transform 0.35s var(--ease), background-color 0.35s var(--ease); } /* Red rule that wipes in along the top edge on hover. */ .tile::before { content: ""; position: absolute; inset: 0 0 auto 0; height: 2px; background: var(--red); transform: scaleX(0); transform-origin: left; transition: transform 0.4s var(--ease); } .tile:hover { border-color: var(--line-strong); background: var(--surface-2); transform: translateY(-4px); } .tile:hover::before { transform: scaleX(1); } .tile__mark { font-family: var(--display); font-weight: 700; font-size: 0.95rem; letter-spacing: 0.2em; color: var(--red); margin-bottom: 1.1rem; } .tile h3 { margin-bottom: 0.7rem; } .tile p { color: var(--mute); font-size: 0.97rem; } /* --- Full-width lifestyle band ------------------------------------------ */ .band { position: relative; display: flex; align-items: center; min-height: clamp(26rem, 62svh, 40rem); overflow: hidden; background: var(--black); } .band__media { position: absolute; inset: 0; z-index: 0; } .band__media img { width: 100%; height: 100%; object-fit: cover; } /* Two layers, not one: a vertical scrim for overall depth plus a centred radial pool behind the text. The band photograph has bright highlights (a lit windscreen) that a single 35%-in-the-middle gradient left showing through, dropping the centred copy to roughly 0.39 luminance. */ .band__media::after { content: ""; position: absolute; inset: 0; background: radial-gradient(ellipse 70% 62% at 50% 50%, rgba(8, 9, 10, 0.72) 0%, rgba(8, 9, 10, 0) 100%), linear-gradient(to top, rgba(8, 9, 10, 0.92) 0%, rgba(8, 9, 10, 0.6) 55%, rgba(8, 9, 10, 0.72) 100%); } .band__inner { position: relative; z-index: 1; width: 100%; text-align: center; padding-block: clamp(3.5rem, 8vw, 6rem); } .band__inner .lede { margin-inline: auto; max-width: 52ch; /* Brighter than --mute: this sits on a photograph, not a flat panel. */ color: rgba(255, 255, 255, 0.9); } /* Slow settle on the band image, driven by the same IntersectionObserver that handles .reveal. Decorative only. */ .reveal-ready .zoom-media .band__media img { transform: scale(1.14); transition: transform 2s var(--ease-out); } .reveal-ready .zoom-media.is-in .band__media img { transform: scale(1); } @media (prefers-reduced-motion: reduce) { .reveal-ready .zoom-media .band__media img { transform: none; } } /* --- Pending data rows (Cars listing cards) ----------------------------- */ /* Shows WHERE real vehicle data will sit without inventing any of it. Every value is an em dash until the client supplies the inventory. */ .pending { list-style: none; margin: 0 0 1.5rem; padding: 0; border-top: 1px solid var(--line-soft); } .pending li { display: flex; align-items: baseline; justify-content: space-between; gap: 1rem; padding-block: 0.6rem; border-bottom: 1px solid var(--line-soft); } .pending__key { font-family: var(--display); font-weight: 600; font-size: 0.82rem; letter-spacing: 0.16em; text-transform: uppercase; color: var(--mute-dim); } .pending__val { font-family: var(--display); font-weight: 600; font-size: 1rem; color: var(--mute-dim); } .card__foot { display: flex; align-items: center; justify-content: space-between; gap: 1rem; margin-top: auto; padding-top: 0.25rem; } /* --- Contact section ---------------------------------------------------- */ .contact-grid { display: grid; gap: clamp(2.5rem, 5vw, 4.5rem); grid-template-columns: 1fr; align-items: start; } @media (min-width: 901px) { .contact-grid { grid-template-columns: 1.05fr 0.95fr; } } .contact-card { background: var(--surface); border: 1px solid var(--line-soft); border-radius: 3px; padding: clamp(1.5rem, 3vw, 2.5rem); } /* Address block: keep the postal formatting, drop the italic default. */ .address { font-style: normal; font-size: 1.05rem; line-height: 1.7; color: var(--mute); } .address strong { display: block; font-family: var(--display); font-weight: 700; font-size: 1.35rem; letter-spacing: 0.02em; text-transform: uppercase; color: var(--white); margin-bottom: 0.5rem; } /* --- Footer contact block ----------------------------------------------- */ .footer__address { font-style: normal; color: var(--mute); font-size: 0.95rem; line-height: 1.8; } .footer__address a:hover { color: var(--red-hot); } /* --- Responsive refinements --------------------------------------------- */ /* Large desktop: let the layout breathe rather than stretch. */ @media (min-width: 1600px) { :root { --maxw: 1400px; --pad-section: clamp(6rem, 8vw, 10rem); } } /* Tablet: two-up grids need a little more air between rows than columns. */ @media (min-width: 601px) and (max-width: 1000px) { .grid-tiles { row-gap: clamp(1.25rem, 3vw, 2rem); } } /* Touch targets: anything tappable clears 44px on coarse pointers. */ @media (pointer: coarse) { .btn { padding-block: 1.05rem; } .link-arrow { padding-block: 0.6rem 0.35rem; } .footer__list a, .detail__val a { display: inline-block; padding-block: 0.3rem; } } /* Very small phones: stop the display type from overwhelming the viewport. */ @media (max-width: 380px) { .h-hero { font-size: clamp(2.6rem, 13vw, 3.25rem); } .hero__actions { flex-direction: column; align-items: stretch; } .hero__actions .btn { width: 100%; } } /* =========================================================================== INTERACTIVE HERO (home page only) Three crossfading slides, pointer parallax, and a scroll cue. The static heroes on the inner pages are untouched. =========================================================================== */ /* The slow push-in belongs to the STATIC heroes. On the slideshow the same property is driven by the parallax transform, so the two would fight. */ .hero:not([data-hero]) .hero__media img { animation: heroPush 18s var(--ease) forwards; } /* --- Slides ------------------------------------------------------------- */ .hero__slide { position: absolute; inset: 0; z-index: 1; opacity: 0; /* Only the active slide is readable by assistive tech and hit-testable. */ visibility: hidden; transition: opacity 0.9s var(--ease-out), visibility 0s linear 0.9s; } .hero__slide.is-active { opacity: 1; visibility: visible; transition: opacity 0.9s var(--ease-out), visibility 0s linear 0s; } .hero__slide img { width: 100%; height: 100%; object-fit: cover; /* Scaled up so the parallax offset never exposes an edge. */ transform: scale(1.08) translate3d( calc(var(--hero-px, 0) * -14px), calc(var(--hero-py, 0) * -14px), 0 ); transition: transform 0.5s var(--ease-out); will-change: transform; } /* Keep the scrim above the slides. */ .hero__media::after { z-index: 2; } /* --- Controls ----------------------------------------------------------- */ .hero__controls { position: absolute; z-index: 3; left: 0; right: 0; bottom: clamp(1.25rem, 3vw, 2.25rem); } .hero__controls-inner { display: flex; align-items: center; gap: 1rem; } .hero__arrow { flex: none; display: inline-flex; align-items: center; justify-content: center; width: 48px; height: 48px; font-size: 1.1rem; color: var(--white); background: rgba(8, 9, 10, 0.55); border: 1px solid var(--line-strong); border-radius: 2px; cursor: pointer; transition: background-color 0.25s var(--ease), border-color 0.25s var(--ease), transform 0.25s var(--ease); } .hero__arrow:hover { background: var(--red); border-color: var(--red); transform: translateY(-2px); } .hero__dots { display: flex; align-items: center; gap: 0.6rem; } /* Wide bars rather than circles — they read as a progress track and give a much larger pointer target than a 10px dot. */ .hero__dot { position: relative; width: 44px; height: 22px; /* 44x22 hit area, 3px visible bar */ padding: 0; background: none; border: 0; cursor: pointer; } .hero__dot::after { content: ""; position: absolute; left: 0; right: 0; top: 50%; height: 3px; transform: translateY(-50%); background: rgba(255, 255, 255, 0.3); transition: background-color 0.3s var(--ease); } .hero__dot:hover::after { background: rgba(255, 255, 255, 0.6); } .hero__dot[aria-selected="true"]::after { background: var(--red); } .hero__counter { margin-left: auto; font-family: var(--display); font-weight: 600; font-size: 0.95rem; letter-spacing: 0.16em; color: var(--mute-dim); } .hero__counter b { color: var(--white); font-weight: 600; } /* --- Scroll cue --------------------------------------------------------- */ .hero__cue { position: absolute; z-index: 3; right: clamp(1.25rem, 4vw, 3rem); bottom: clamp(5.5rem, 9vw, 7rem); display: none; /* shown from the tablet breakpoint up */ flex-direction: column; align-items: center; gap: 0.75rem; color: var(--mute); transition: color 0.25s var(--ease); } .hero__cue:hover { color: var(--white); } .hero__cue-text { font-family: var(--display); font-weight: 600; font-size: 0.8rem; letter-spacing: 0.22em; text-transform: uppercase; writing-mode: vertical-rl; } .hero__cue-line { width: 1px; height: 3.5rem; background: linear-gradient(to bottom, transparent, var(--line-strong)); position: relative; overflow: hidden; } /* A short highlight that runs down the line. Decorative only. */ .hero__cue-line::after { content: ""; position: absolute; left: 0; top: -40%; width: 1px; height: 40%; background: var(--red); animation: cueRun 2.4s var(--ease) infinite; } @keyframes cueRun { 0% { top: -40%; } 60% { top: 100%; } 100% { top: 100%; } } @media (min-width: 781px) { .hero__cue { display: flex; } } /* --- Motion and coarse-pointer preferences ------------------------------ */ @media (prefers-reduced-motion: reduce) { .hero__slide img { transform: scale(1.02); transition: none; } .hero__cue-line::after { animation: none; opacity: 0; } } /* Parallax is pointer-driven, so it is meaningless on touch. */ @media (pointer: coarse) { .hero__slide img { transform: scale(1.04); } } /* Small phones: the counter is the first thing to go. */ @media (max-width: 480px) { .hero__counter { display: none; } .hero__dot { width: 32px; } .hero__arrow { width: 44px; height: 44px; } } /* --- Slideshow scrim ----------------------------------------------------- */ /* The static heroes each sit under one known photograph. This one cycles three, so the scrim has to protect the headline on ALL of them. Measured peak luminance inside the headline box reaches ~1.0 on every slide — blown highlights on white bodywork and headlights — so the left-to-right wash is both deeper and carried much further across than the inner pages need. Re-check this if a brighter image is ever added to the rotation. */ .hero[data-hero] .hero__media::after { background: linear-gradient(to top, rgba(8, 9, 10, 0.96) 0%, rgba(8, 9, 10, 0.5) 45%, rgba(8, 9, 10, 0.32) 100%), linear-gradient(to right, rgba(8, 9, 10, 0.94) 0%, rgba(8, 9, 10, 0.88) 30%, rgba(8, 9, 10, 0.45) 62%, rgba(8, 9, 10, 0.12) 100%); } /* Belt and braces for the display type wherever a highlight still lands underneath it. Soft and wide, so it reads as depth rather than as a shadow. */ .hero[data-hero] .hero__title, .hero[data-hero] .hero__copy { text-shadow: 0 2px 28px rgba(8, 9, 10, 0.6); } /* Hold the headline in a left-hand column. The static heroes can run the type wide because each sits on one known photograph; this one cycles three, and a headline spanning 80% of the width left the images nowhere to show. Wrapping it narrower protects the type AND gives the photography a clear right half, so the scrim above can stay light where the car actually is. */ .hero[data-hero] .hero__title { max-width: 11ch; } .hero[data-hero] .hero__copy { max-width: 38ch; } /* The dot is a 3px bar inside a much larger invisible hit area. On touch that area has to clear 44px in BOTH directions, not just horizontally. */ @media (pointer: coarse) { .hero__dot { height: 44px; } } @media (max-width: 480px) { .hero__dot { width: 40px; } }