/* ================================================================ Bell Auto Sales — Public Site (v2 redesign) Design system: - Warm paper background (#F4F1EA) with near-black ink - Electric COBALT (#2348FF) as the single hot accent - Soft, rounded "bento" surfaces with hairline borders + soft shadow - American-muscle confidence: huge Space Grotesk display, bold caps - Space Grotesk (display) / Hanken Grotesk (body) / JetBrains Mono (data) Class + CSS-variable names are unchanged from v1 so every Flask template and JS hook keeps working; only the look is rebuilt. ================================================================ */ /* Fonts are loaded via in base.html — see the note there. */ :root { /* New semantic tokens */ --bg: #F4F1EA; --bg-2: #EDE8DC; --surface: #FFFFFF; --surface-2: #FBF8F1; --fg: #15171C; --fg-2: #4C4E55; --accent: #2348FF; --accent-2: #1A38DC; --accent-soft: #E9EDFF; --red: #C23A28; --green: #2F8F5B; --r: 22px; --r-sm: 14px; --r-pill: 999px; --shadow-sm: 0 1px 2px rgba(21,23,28,.05); --shadow: 0 2px 6px rgba(21,23,28,.04), 0 14px 30px -16px rgba(21,23,28,.20); --shadow-lg: 0 4px 10px rgba(21,23,28,.06), 0 30px 60px -24px rgba(21,23,28,.30); /* Legacy aliases — keep inline template styles resolving correctly */ --ink: #15171C; --ink-2: #FFFFFF; /* card surface */ --ink-3: #ECE7DB; /* image placeholder / subtle fill */ --bone: #15171C; /* primary text */ --bone-2: #4C4E55; /* secondary text */ --muted: #8C8B83; --brass: #2348FF; /* accent */ --brass-2: #1A38DC; --oxblood: #C23A28; --border: #E6E1D4; --border-2: #D6D0C0; --font-disp: 'Space Grotesk', system-ui, sans-serif; --font-body: 'Hanken Grotesk', system-ui, -apple-system, BlinkMacSystemFont, sans-serif; --font-mono: 'JetBrains Mono', 'SFMono-Regular', Menlo, monospace; --maxw: 1240px; --gutter: clamp(20px, 4vw, 56px); } /* ─── Reset & base ──────────────────────────────────────────────── */ *, *::before, *::after { box-sizing: border-box; } html { scroll-behavior: smooth; } /* `overflow-x: hidden` here turned into a scroll container, which silently disables position:sticky for every descendant — the car page's price panel scrolled away instead of following the reader. `overflow-x: clip` gives the same "no horizontal scrollbar" result without establishing a scroll container, so sticky works again. The fallback keeps old browsers safe. */ html, body { overflow-x: hidden; } @supports (overflow-x: clip) { html, body { overflow-x: clip; } } body { margin: 0; font-family: var(--font-body); /* Warm paper base + a barely-there fractal grain so flat areas read like stock rather than a sterile flat fill. White surfaces sit on top and hide it, so only the paper gutters carry texture. */ background-color: var(--bg); background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='paper'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23paper)' opacity='0.035'/%3E%3C/svg%3E"); background-repeat: repeat; background-attachment: fixed; color: var(--fg); font-size: 16px; line-height: 1.6; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; } a { color: inherit; text-decoration: none; } img { display: block; max-width: 100%; height: auto; } button { font: inherit; cursor: pointer; } h1, h2, h3, h4, h5 { margin: 0; font-weight: 700; line-height: 1.05; letter-spacing: -0.02em; } p { margin: 0 0 1em; } ::selection { background: var(--accent); color: #fff; } /* ─── Image protection ──────────────────────────────────────────── */ img, .det-gallery img, .inv-card-img img, .feat-card-img img { -webkit-user-select: none; -moz-user-select: none; user-select: none; -webkit-user-drag: none; -webkit-touch-callout: none; user-drag: none; } /* ─── Layout primitives ─────────────────────────────────────────── */ .wrap { max-width: var(--maxw); margin: 0 auto; padding-left: var(--gutter); padding-right: var(--gutter); } .section { padding: clamp(54px, 8vw, 104px) 0; } .section--alt { background: var(--surface); } .eyebrow { display: inline-flex; align-items: center; gap: 8px; font-family: var(--font-mono); font-size: 12px; letter-spacing: 0.16em; text-transform: uppercase; color: var(--accent); background: var(--accent-soft); border: 1px solid #D5DCFF; padding: 7px 14px; border-radius: var(--r-pill); margin-bottom: 22px; } .eyebrow::before { content: ''; width: 6px; height: 6px; border-radius: 50%; background: var(--accent); } .section-title { font-family: var(--font-disp); font-weight: 700; font-size: clamp(34px, 5.2vw, 62px); letter-spacing: -0.03em; line-height: 0.98; text-transform: uppercase; color: var(--fg); } .section-title small { display: block; font-family: var(--font-body); font-weight: 400; font-size: 16.5px; letter-spacing: 0; text-transform: none; color: var(--fg-2); margin-top: 16px; max-width: 60ch; line-height: 1.6; } /* ─── Buttons ───────────────────────────────────────────────────── */ .btn { display: inline-flex; align-items: center; gap: 9px; padding: 14px 24px; font-family: var(--font-body); font-weight: 700; font-size: 13px; letter-spacing: 0.04em; text-transform: uppercase; border: 1px solid var(--accent); background: var(--accent); color: #fff; border-radius: var(--r-pill); transition: transform .15s ease, box-shadow .15s ease, background .15s ease, border-color .15s ease, color .15s ease; white-space: nowrap; box-shadow: 0 2px 0 var(--accent-2), 0 10px 22px -12px rgba(35,72,255,.7); } .btn:hover { background: var(--accent-2); border-color: var(--accent-2); transform: translateY(-2px); box-shadow: 0 4px 0 #1430b8, 0 16px 30px -12px rgba(35,72,255,.8); } .btn:active { transform: translateY(0); box-shadow: 0 1px 0 var(--accent-2); } .btn--ghost { background: var(--surface); color: var(--fg); border-color: var(--border-2); box-shadow: var(--shadow-sm); } .btn--ghost:hover { background: var(--fg); color: #fff; border-color: var(--fg); box-shadow: var(--shadow); } .btn--dark { background: var(--fg); color: #fff; border-color: var(--fg); box-shadow: var(--shadow-sm); } .btn--dark:hover { background: #000; border-color: #000; } .btn--wide { width: 100%; justify-content: center; padding: 16px 26px; } .btn--sm { padding: 9px 16px; font-size: 11px; } /* ─── Top bar (logo + nav) ──────────────────────────────────────── */ .topbar { position: sticky; top: 0; z-index: 60; background: rgba(244, 241, 234, 0.82); backdrop-filter: blur(18px) saturate(1.4); -webkit-backdrop-filter: blur(18px) saturate(1.4); border-bottom: 1px solid var(--border); } .topbar__row { display: flex; align-items: center; justify-content: space-between; height: 74px; gap: 24px; } .brand { display: inline-flex; align-items: baseline; gap: 2px; font-family: var(--font-disp); font-weight: 700; font-size: 23px; letter-spacing: -0.02em; text-transform: uppercase; color: var(--fg); } .brand__dot { color: var(--accent); } .brand img { max-height: 42px; width: auto; } .nav { display: flex; align-items: center; gap: 30px; } .nav a { font-size: 14px; font-weight: 600; letter-spacing: 0; color: var(--fg-2); transition: color 0.15s ease; } .nav a:hover, .nav a.active { color: var(--accent); } .topbar__cta { display: inline-flex; align-items: center; gap: 12px; } .topbar__phone { font-family: var(--font-mono); font-size: 13px; font-weight: 500; color: var(--fg); } .topbar__phone:hover { color: var(--accent); } .nav-toggle { display: none; background: var(--surface); border: 1px solid var(--border-2); border-radius: 12px; width: 44px; height: 44px; padding: 0; position: relative; box-shadow: var(--shadow-sm); } .nav-toggle::before, .nav-toggle::after { content: ''; position: absolute; left: 11px; right: 11px; height: 2px; border-radius: 2px; background: var(--fg); } .nav-toggle::before { top: 16px; } .nav-toggle::after { bottom: 16px; } .nav-toggle::before, .nav-toggle::after, .nav-toggle span { transition: transform 0.25s ease, opacity 0.2s ease; } .nav-toggle span { position: absolute; left: 11px; right: 11px; top: 50%; height: 2px; border-radius: 2px; background: var(--fg); transform: translateY(-50%); } .nav-toggle.is-active::before { top: 50%; transform: translateY(-50%) rotate(45deg); } .nav-toggle.is-active::after { bottom: auto; top: 50%; transform: translateY(-50%) rotate(-45deg); } .nav-toggle.is-active span { opacity: 0; } @media (max-width: 900px) { .topbar__phone { display: none; } .nav { gap: 20px; } } @media (max-width: 720px) { .nav-toggle { display: block; } .nav, .topbar__cta { display: none; } .nav-drawer.is-open { display: block; } } .nav-drawer { display: none; background: var(--surface); border-bottom: 1px solid var(--border); padding: 12px var(--gutter) 24px; } .nav-drawer a { display: block; padding: 14px 0; font-size: 17px; font-weight: 600; border-bottom: 1px solid var(--border); color: var(--fg); } .nav-drawer a:last-child { border-bottom: 0; } .nav-drawer .btn { margin-top: 16px; color: #fff; } /* ─── Hero ──────────────────────────────────────────────────────── */ .hero { position: relative; min-height: clamp(460px, 66vh, 660px); display: flex; align-items: center; overflow: hidden; isolation: isolate; background: radial-gradient(120% 90% at 88% -10%, rgba(35,72,255,.16), transparent 55%), radial-gradient(90% 80% at 6% 110%, rgba(35,72,255,.10), transparent 60%), var(--bg); border-bottom: 1px solid var(--border); } /* Hero photograph. Was opacity 0.05 + grayscale — effectively invisible, so the car never registered. Now shown properly, with two things protecting legibility: the image is anchored to the right half where there is no text, and a paper-coloured scrim fades across it left-to-right so the dark headline always sits on light ground rather than on the car's bodywork. */ .hero__bg { position: absolute; inset: 0; background-size: cover; background-position: center right; background-repeat: no-repeat; opacity: 0.92; z-index: -2; } /* The scrim. Opaque paper on the left under the headline, clearing to nothing on the right so the car reads at full strength. */ .hero__bg::after { content: ''; position: absolute; inset: 0; background: linear-gradient(100deg, var(--bg) 0%, var(--bg) 42%, rgba(244,241,234,.94) 54%, rgba(244,241,234,.66) 68%, rgba(244,241,234,.24) 84%, rgba(244,241,234,0) 100%), /* Soft vertical lift so the pills at the bottom keep their contrast. */ linear-gradient(to top, rgba(244,241,234,.55), transparent 38%); } /* Narrow screens stack the text over the middle of the photo, so the scrim becomes a full veil instead of a side fade — text first, car as texture. */ @media (max-width: 860px) { .hero__bg { background-position: center; opacity: 0.55; } .hero__bg::after { background: linear-gradient(to bottom, rgba(244,241,234,.90) 0%, rgba(244,241,234,.78) 55%, rgba(244,241,234,.92) 100%); } } /* Cobalt "blob" + grid art */ .hero::before { content: ''; position: absolute; top: -18%; right: -8%; width: 46vw; height: 46vw; max-width: 620px; max-height: 620px; background: radial-gradient(circle at 35% 35%, #4f6bff, var(--accent) 55%, var(--accent-2) 100%); border-radius: 46% 54% 60% 40% / 52% 44% 56% 48%; filter: blur(2px); box-shadow: 0 40px 120px -30px rgba(35,72,255,.5); /* Sits behind the photograph now. At -1 it covered the top-right corner — exactly where the car is anchored — and hid the thing it was decorating. Behind, it still reads as a cobalt glow around the bonnet. */ z-index: -3; opacity: 0.55; animation: blob-float 14s ease-in-out infinite; } .hero::after { content: ''; position: absolute; inset: 0; background-image: linear-gradient(rgba(21,23,28,.045) 1px, transparent 1px), linear-gradient(90deg, rgba(21,23,28,.045) 1px, transparent 1px); background-size: 46px 46px; -webkit-mask-image: radial-gradient(120% 90% at 50% 0%, #000 35%, transparent 80%); mask-image: radial-gradient(120% 90% at 50% 0%, #000 35%, transparent 80%); z-index: -1; pointer-events: none; } @keyframes blob-float { 0%,100% { transform: translateY(0) rotate(0deg); } 50% { transform: translateY(26px) rotate(8deg); } } .hero__inner { position: relative; z-index: 2; padding: clamp(56px, 8vw, 90px) 0; width: 100%; } .hero__kicker { font-family: var(--font-mono); font-size: 12px; letter-spacing: 0.2em; text-transform: uppercase; color: var(--accent); margin-bottom: 20px; display: inline-flex; align-items: center; gap: 10px; background: var(--surface); border: 1px solid var(--border-2); padding: 8px 16px; border-radius: var(--r-pill); box-shadow: var(--shadow-sm); } .hero__kicker::before { content: ''; width: 7px; height: 7px; border-radius: 50%; background: var(--accent); box-shadow: 0 0 0 4px var(--accent-soft); } .hero__title { font-family: var(--font-disp); font-weight: 700; font-size: clamp(50px, 8.4vw, 124px); line-height: 0.9; letter-spacing: -0.045em; text-transform: uppercase; max-width: 16ch; color: var(--fg); } .hero__title span { display: block; color: var(--accent); font-style: normal; } /* First heading clause now takes the animated gradient (see .cursor-prox); the trailing span still pops solid cobalt. */ .hero__title .cursor-prox { color: transparent; } .hero__sub { margin-top: 24px; max-width: 540px; font-size: 18px; color: var(--fg-2); line-height: 1.6; } .hero__cta { margin-top: 34px; display: flex; gap: 14px; flex-wrap: wrap; } /* Hero pill checklist row */ .hero__pills { margin-top: 34px; display: flex; gap: 10px; flex-wrap: wrap; } .hero__pill { display: inline-flex; align-items: center; gap: 8px; padding: 10px 18px; font-family: var(--font-mono); font-size: 12px; letter-spacing: 0.06em; color: var(--fg); background: var(--surface); border: 1px solid var(--border-2); border-radius: var(--r-pill); box-shadow: var(--shadow-sm); } .hero__pill svg { color: var(--accent); flex-shrink: 0; } /* ─── Featured / inventory cards ────────────────────────────────── */ .feat { display: grid; gap: 24px; grid-template-columns: repeat(auto-fill, minmax(min(330px, 100%), 1fr)); } .feat-card { background: var(--surface); border: 1px solid var(--border); border-radius: var(--r); overflow: hidden; box-shadow: var(--shadow-sm); transition: border-color .2s ease, transform .25s ease, box-shadow .25s ease; } .feat-card:hover { border-color: var(--accent); transform: translateY(-5px); box-shadow: var(--shadow-lg); } .feat-card-img { position: relative; aspect-ratio: 4 / 3; background: var(--ink-3); overflow: hidden; margin: 10px 10px 0; border-radius: 16px; } .feat-card-img img { width: 100%; height: 100%; object-fit: cover; transition: transform 0.5s cubic-bezier(.2,.8,.2,1); } .feat-card:hover .feat-card-img img { transform: scale(1.05); } .feat-card-img img.feat-card-img__hover { position: absolute; inset: 0; opacity: 0; transition: opacity 0.35s ease, transform 0.5s ease; } .feat-card:hover .feat-card-img img.feat-card-img__hover { opacity: 1; } .feat-card-img__year { position: absolute; bottom: 12px; left: 14px; font-family: var(--font-disp); font-weight: 700; font-size: 30px; line-height: 1; letter-spacing: -0.03em; color: #fff; padding: 5px 12px; background: rgba(21,23,28,.62); backdrop-filter: blur(6px); border-radius: var(--r-pill); } .feat-card-img__sold { position: absolute; top: 12px; right: 12px; background: var(--red); color: #fff; font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.12em; padding: 6px 11px; border-radius: var(--r-pill); text-transform: uppercase; } .feat-card-img__pending { position: absolute; top: 12px; right: 12px; background: var(--accent); color: #fff; font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.12em; padding: 6px 11px; border-radius: var(--r-pill); text-transform: uppercase; font-weight: 600; } .feat-card__body { padding: 18px 20px 22px; } .feat-card__title { font-family: var(--font-disp); font-weight: 700; font-size: 21px; letter-spacing: -0.02em; line-height: 1.15; text-transform: uppercase; color: var(--fg); } .feat-card__specs { display: flex; gap: 8px; margin-top: 14px; flex-wrap: wrap; font-family: var(--font-mono); font-size: 11.5px; color: var(--fg-2); letter-spacing: 0.02em; } .feat-card__specs span { display: inline-flex; align-items: center; background: var(--bg-2); border-radius: var(--r-pill); padding: 5px 11px; } .feat-card__price { margin-top: 18px; font-family: var(--font-disp); font-weight: 700; font-size: 25px; color: var(--fg); letter-spacing: -0.02em; } /* ─── Inventory toolbar ─────────────────────────────────────────── */ .inv-toolbar { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; padding: 18px; background: var(--surface); border: 1px solid var(--border); border-radius: var(--r); box-shadow: var(--shadow-sm); margin: 28px 0 36px; } .inv-search { flex: 1 1 280px; background: var(--surface-2); border: 1px solid var(--border-2); border-radius: var(--r-pill); padding: 13px 18px; color: var(--fg); font-family: var(--font-body); font-size: 14px; } .inv-search::placeholder { color: var(--muted); } .inv-search:focus { outline: none; border-color: var(--accent); box-shadow: 0 0 0 4px var(--accent-soft); } .inv-select { background: var(--surface-2); border: 1px solid var(--border-2); border-radius: var(--r-pill); padding: 13px 18px; color: var(--fg); font-family: var(--font-body); font-weight: 600; font-size: 13px; cursor: pointer; } .inv-select:focus { outline: none; border-color: var(--accent); } .inv-count { font-family: var(--font-mono); font-size: 13px; color: var(--muted); } @media (max-width: 560px) { .inv-toolbar { gap: 10px; } .inv-search, .inv-select { flex: 1 1 100%; } .inv-toolbar .btn { flex: 1 1 auto; justify-content: center; } } .inv-grid { display: grid; gap: 24px; grid-template-columns: repeat(auto-fill, minmax(min(310px, 100%), 1fr)); } /* ─── Car detail page ───────────────────────────────────────────── */ .det { padding-top: 36px; padding-bottom: 80px; } .det-breadcrumb { font-family: var(--font-mono); font-size: 12px; letter-spacing: 0.06em; color: var(--muted); margin-bottom: 22px; } .det-breadcrumb a { color: var(--accent); } .det-breadcrumb a:hover { color: var(--fg); } .det-headrow { display: flex; align-items: flex-end; justify-content: space-between; flex-wrap: wrap; gap: 16px; margin-bottom: 28px; } /* ─── Car detail hero header ───────────────────────────────────────── Lead photo as a full-width band with the year/title/price overlaid on a bottom gradient scrim. Keeps the gallery's #detMainImg/#detPrev/#detNext hooks so the existing gallery script still drives it. */ .det-hero { position: relative; width: 100%; aspect-ratio: 16 / 9; background: var(--surface-2); border: 1px solid var(--border); border-radius: var(--r); overflow: hidden; box-shadow: var(--shadow); } .det-hero__img { width: 100%; height: 100%; object-fit: cover; display: block; } .det-hero__placeholder { width: 100%; height: 100%; display: flex; align-items: center; justify-content: center; color: var(--muted); font-family: var(--font-mono); letter-spacing: 0.2em; } .det-hero__scrim { position: absolute; inset: auto 0 0 0; display: flex; align-items: flex-end; justify-content: space-between; flex-wrap: wrap; gap: 10px 24px; padding: clamp(14px, 2vw, 22px) clamp(16px, 3vw, 28px); padding-top: 48px; background: linear-gradient(to top, rgba(15,17,21,.82) 0%, rgba(15,17,21,.3) 60%, transparent 100%); pointer-events: none; } /* Re-enable clicks for the interactive bits inside the scrim. */ .det-hero__scrim .btn, .det-hero__scrim a { pointer-events: auto; } .det-hero__meta { min-width: 0; } /* Title sits on the photo — override the cobalt-gradient fill with solid white so it stays legible against any image. */ .det-hero .det-title, .det-hero .det-title .cursor-prox { color: #fff; -webkit-text-fill-color: #fff; background: none; animation: none; font-size: clamp(20px, 2.6vw, 32px); } .det-hero .det-year { color: #fff; opacity: .92; font-size: clamp(20px, 2.6vw, 34px); line-height: 1; margin-bottom: 0; } .det-hero__aside { display: flex; flex-direction: column; align-items: flex-start; gap: 12px; flex-shrink: 0; } .det-hero .det-price { color: #fff; } .det-hero .det-price small { color: rgba(255,255,255,.7); } .det-hero__cta { white-space: nowrap; } /* The hero photo is clickable to open the lightbox. */ .det-hero__img { cursor: zoom-in; } /* ─── Photo lightbox ─────────────────────────────────────────────── */ .det-lightbox { position: fixed; inset: 0; z-index: 200; display: flex; align-items: center; justify-content: center; padding: clamp(16px, 4vw, 56px); background: rgba(10, 11, 14, .92); opacity: 0; visibility: hidden; transition: opacity .2s ease, visibility 0s linear .2s; } .det-lightbox.is-open { opacity: 1; visibility: visible; transition: opacity .2s ease; } .det-lightbox__img { max-width: 100%; max-height: 100%; object-fit: contain; border-radius: 6px; box-shadow: 0 20px 60px rgba(0,0,0,.5); cursor: zoom-out; } .det-lightbox__close { position: absolute; top: clamp(12px, 2vw, 24px); right: clamp(12px, 2vw, 24px); width: 46px; height: 46px; display: flex; align-items: center; justify-content: center; background: rgba(255,255,255,.12); color: #fff; border: none; border-radius: 50%; font-size: 30px; line-height: 1; cursor: pointer; transition: background .15s ease; } .det-lightbox__close:hover { background: rgba(255,255,255,.24); } .det-lightbox__nav { position: absolute; top: 50%; transform: translateY(-50%); width: 54px; height: 54px; display: flex; align-items: center; justify-content: center; background: rgba(255,255,255,.12); color: #fff; border: none; border-radius: 50%; font-size: 34px; line-height: 1; cursor: pointer; transition: background .15s ease; } .det-lightbox__nav:hover { background: rgba(255,255,255,.24); } .det-lightbox__nav--prev { left: clamp(8px, 2vw, 28px); } .det-lightbox__nav--next { right: clamp(8px, 2vw, 28px); } .det-lightbox__count { position: absolute; bottom: clamp(12px, 3vw, 28px); left: 50%; transform: translateX(-50%); color: #fff; font-family: var(--font-mono); font-size: 13px; letter-spacing: 0.06em; background: rgba(255,255,255,.12); padding: 6px 14px; border-radius: var(--r-pill); } @media (max-width: 560px) { .det-hero { aspect-ratio: 4 / 5; } .det-hero__scrim { flex-direction: column; align-items: flex-start; } .det-hero__aside { flex-direction: row; align-items: center; gap: 16px; } } .det-year { font-family: var(--font-disp); font-weight: 700; font-size: clamp(44px, 8vw, 96px); line-height: 0.82; color: var(--accent); letter-spacing: -0.04em; display: block; margin-bottom: 6px; } .det-title { font-family: var(--font-disp); font-weight: 700; font-size: clamp(22px, 3vw, 34px); letter-spacing: -0.03em; line-height: 1.02; text-transform: uppercase; color: var(--fg); } .det-price { font-family: var(--font-disp); font-weight: 700; font-size: clamp(28px, 3.6vw, 42px); color: var(--fg); letter-spacing: -0.03em; } .det-price small { display: block; font-family: var(--font-mono); font-weight: 400; font-size: 12px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--muted); margin-bottom: 4px; } .det-cols { display: grid; grid-template-columns: minmax(0, 1.5fr) minmax(280px, 1fr); gap: clamp(24px, 3.5vw, 48px); margin-top: 24px; } @media (max-width: 900px) { .det-cols { grid-template-columns: 1fr; } } .det-gallery { display: flex; flex-direction: column; gap: 12px; } .det-gallery__main { aspect-ratio: 4 / 3; background: var(--surface); border: 1px solid var(--border); border-radius: var(--r); overflow: hidden; position: relative; box-shadow: var(--shadow-sm); } .det-gallery__main img { width: 100%; height: 100%; object-fit: contain; background: var(--surface-2); } .det-gallery__thumbs { display: grid; grid-template-columns: repeat(auto-fill, minmax(78px, 1fr)); gap: 8px; } .det-gallery__thumb { aspect-ratio: 1; background: var(--surface); border: 1px solid var(--border); border-radius: 12px; cursor: pointer; overflow: hidden; transition: border-color 0.15s ease, transform .15s ease; } .det-gallery__thumb:hover { transform: translateY(-2px); } .det-gallery__thumb img { width: 100%; height: 100%; object-fit: cover; } .det-gallery__thumb.is-active { border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-soft); } .det-gallery__nav { position: absolute; top: 50%; transform: translateY(-50%); width: 46px; height: 46px; display: flex; align-items: center; justify-content: center; background: rgba(255,255,255,.9); color: var(--fg); border: 1px solid var(--border-2); border-radius: 50%; font-size: 26px; line-height: 1; cursor: pointer; transition: background 0.15s ease, color 0.15s ease; z-index: 2; box-shadow: var(--shadow); } .det-gallery__nav:hover { background: var(--accent); color: #fff; border-color: var(--accent); } .det-gallery__nav--prev { left: 12px; } .det-gallery__nav--next { right: 12px; } .det-gallery__count { position: absolute; bottom: 12px; right: 12px; padding: 5px 12px; background: rgba(21,23,28,.7); color: #fff; border-radius: var(--r-pill); font-family: var(--font-mono); font-size: 12px; letter-spacing: 0.06em; z-index: 2; } .det-secondary-cta { margin-top: 12px; } .det-cta-banner { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 20px; margin-top: 40px; padding: 28px 32px; background: var(--accent); color: #fff; border-radius: var(--r); overflow: hidden; position: relative; } .det-cta-banner::after { content: ''; position: absolute; top: -60%; right: -6%; width: 320px; height: 320px; background: radial-gradient(circle, rgba(255,255,255,.18), transparent 65%); pointer-events: none; } .det-cta-banner__text h2 { font-family: var(--font-disp); font-weight: 700; font-size: 23px; letter-spacing: -0.02em; text-transform: uppercase; margin: 0 0 6px; color: #fff; } .det-cta-banner__text p { margin: 0; color: rgba(255,255,255,.85); font-size: 15px; } .det-cta-banner__actions { display: flex; gap: 12px; flex-wrap: wrap; position: relative; z-index: 1; } .det-cta-banner__actions .btn { background: #fff; color: var(--accent); border-color: #fff; box-shadow: var(--shadow); } .det-cta-banner__actions .btn:hover { background: var(--fg); color: #fff; border-color: var(--fg); } .det-cta-banner__actions .btn--ghost { background: transparent; color: #fff; border-color: rgba(255,255,255,.55); box-shadow: none; } .det-cta-banner__actions .btn--ghost:hover { background: #fff; color: var(--accent); border-color: #fff; } /* Sticky inquiry bar */ .det-stickybar { position: fixed; left: 16px; right: 16px; bottom: 16px; z-index: 60; display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 12px 14px 12px 22px; padding-right: 100px; background: rgba(255,255,255,.92); border: 1px solid var(--border-2); border-radius: var(--r-pill); backdrop-filter: blur(12px); box-shadow: var(--shadow-lg); transform: translateY(160%); transition: transform 0.32s cubic-bezier(.2,.8,.2,1); } .det-stickybar.is-visible { transform: translateY(0); } .det-stickybar__info { display: flex; align-items: baseline; gap: 14px; min-width: 0; } .det-stickybar__title { font-family: var(--font-disp); font-weight: 700; font-size: 16px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .det-stickybar__price { color: var(--accent); font-weight: 700; white-space: nowrap; font-family: var(--font-disp); } .det-stickybar__actions { display: flex; gap: 10px; flex-shrink: 0; } @media (max-width: 560px) { .det-cta-banner { padding: 22px; } .det-cta-banner__actions { width: 100%; } .det-cta-banner__actions .btn { flex: 1; justify-content: center; } .det-stickybar { padding: 10px 14px; padding-right: 84px; } .det-stickybar__info { flex-direction: column; gap: 0; } .det-stickybar__actions .det-stickybar__call { display: none; } } .det-side { display: flex; flex-direction: column; gap: 18px; /* Stick the Specs / Inquire / call-us stack so it travels with you while the taller gallery and description scroll past. align-self:start anchors it to the top of the grid row rather than stretching the full row height. */ position: sticky; top: 24px; align-self: start; } /* On narrow screens the columns stack, so sticky would just pin the sidebar awkwardly over the gallery — disable it there. */ @media (max-width: 900px) { .det-side { position: static; } } .det-card { background: var(--surface); border: 1px solid var(--border); border-radius: var(--r); padding: 24px; box-shadow: var(--shadow-sm); } .det-card h3 { font-family: var(--font-disp); font-weight: 700; font-size: 17px; letter-spacing: 0.02em; text-transform: uppercase; margin-bottom: 18px; padding-bottom: 14px; border-bottom: 1px solid var(--border); } .det-specs { display: grid; grid-template-columns: 1fr 1fr; gap: 14px 18px; } .det-spec { display: flex; flex-direction: column; gap: 4px; } .det-spec__label { font-family: var(--font-mono); font-size: 10px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--muted); } .det-spec__value { font-family: var(--font-body); font-size: 14px; color: var(--fg); font-weight: 600; line-height: 1.3; word-break: break-word; } .det-form { display: flex; flex-direction: column; gap: 12px; } .det-form input, .det-form textarea { background: var(--surface-2); border: 1px solid var(--border-2); padding: 13px 15px; font-family: var(--font-body); font-size: 14px; color: var(--fg); border-radius: 12px; } .det-form input::placeholder, .det-form textarea::placeholder { color: var(--muted); } .det-form textarea { min-height: 100px; resize: vertical; } .det-form input:focus, .det-form textarea:focus { outline: none; border-color: var(--accent); box-shadow: 0 0 0 4px var(--accent-soft); } .det-desc { margin-top: 36px; padding-top: 36px; border-top: 1px solid var(--border); } .det-desc h2 { font-family: var(--font-disp); font-weight: 700; font-size: 24px; letter-spacing: -0.01em; text-transform: uppercase; margin-bottom: 18px; } .det-desc p { font-size: 16px; line-height: 1.7; color: var(--fg-2); max-width: 720px; } .det-related { margin-top: 60px; } .det-related h2 { font-family: var(--font-disp); font-weight: 700; font-size: 24px; letter-spacing: -0.01em; text-transform: uppercase; margin-bottom: 24px; } /* ─── Testimonials ──────────────────────────────────────────────── */ .testi-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 24px; margin-top: 40px; } .testi { background: var(--surface); border: 1px solid var(--border); border-radius: var(--r); padding: 30px 28px; position: relative; box-shadow: var(--shadow-sm); transition: transform .25s ease, box-shadow .25s ease; } .testi:hover { transform: translateY(-4px); box-shadow: var(--shadow); } .testi::before { content: '"'; position: absolute; top: 14px; right: 22px; font-family: var(--font-disp); font-weight: 700; font-size: 80px; color: var(--accent-soft); line-height: 1; } .testi__text { font-size: 16px; line-height: 1.65; color: var(--fg); margin-bottom: 20px; position: relative; } .testi__name { font-family: var(--font-disp); font-weight: 700; font-size: 16px; letter-spacing: -0.01em; text-transform: uppercase; color: var(--fg); } .testi__loc { font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.12em; text-transform: uppercase; color: var(--muted); margin-top: 4px; } /* ─── Strip / 3-col splits ──────────────────────────────────────── */ .strip { border-top: 1px solid var(--border); border-bottom: 1px solid var(--border); padding: 40px 0; background: var(--surface); } .strip-row { display: grid; grid-template-columns: repeat(3, 1fr); gap: 28px; } .strip-item { padding-left: 18px; border-left: 3px solid var(--accent); } .strip-item h4 { font-family: var(--font-disp); font-weight: 700; font-size: 18px; letter-spacing: -0.01em; text-transform: uppercase; margin-bottom: 8px; color: var(--fg); } .strip-item p { margin: 0; font-size: 14.5px; color: var(--fg-2); line-height: 1.6; } @media (max-width: 720px) { .strip-row { grid-template-columns: 1fr; gap: 22px; } } /* ─── About / split ─────────────────────────────────────────────── */ .split { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(36px, 5vw, 88px); align-items: center; } @media (max-width: 900px) { .split { grid-template-columns: 1fr; } } .split__img { aspect-ratio: 4 / 3; background: var(--ink-3); border: 1px solid var(--border); border-radius: var(--r); overflow: hidden; box-shadow: var(--shadow); } .split__img img { width: 100%; height: 100%; object-fit: cover; } .split__body p { font-size: 16.5px; line-height: 1.75; color: var(--fg-2); max-width: 540px; } /* ─── Contact / page intro ──────────────────────────────────────── */ .page-head { padding: 56px 0 32px; border-bottom: 1px solid var(--border); margin-bottom: 48px; } .contact-grid { display: grid; grid-template-columns: 1.4fr 1fr; gap: 48px; } @media (max-width: 800px) { .contact-grid { grid-template-columns: 1fr; gap: 32px; } } .contact-info { display: flex; flex-direction: column; gap: 18px; } .contact-info__item { display: flex; flex-direction: column; padding: 20px 22px; background: var(--surface); border: 1px solid var(--border); border-left: 3px solid var(--accent); border-radius: var(--r-sm); box-shadow: var(--shadow-sm); } .contact-info__item label { font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--muted); margin-bottom: 6px; } .contact-info__item span { font-family: var(--font-disp); font-weight: 600; font-size: 22px; color: var(--fg); line-height: 1.2; } /* ─── Footer ────────────────────────────────────────────────────── */ .footer { background: var(--fg); color: #C9CAD0; border-top: 1px solid var(--border); padding: 44px 0 20px; } .footer .brand { color: #fff; } .footer-grid { display: grid; grid-template-columns: 1.4fr 1fr 1fr 1fr; gap: 32px; margin-bottom: 28px; } @media (max-width: 800px) { .footer-grid { grid-template-columns: 1fr 1fr; gap: 24px; } } @media (max-width: 480px) { .footer-grid { grid-template-columns: 1fr; } } .footer h5 { font-family: var(--font-disp); font-weight: 700; font-size: 13px; letter-spacing: 0.14em; text-transform: uppercase; color: #fff; margin-bottom: 12px; } .footer a, .footer p { color: #B7B8BF; font-size: 14px; line-height: 1.6; } .footer a:hover { color: var(--accent); } .footer-bottom { padding-top: 18px; border-top: 1px solid rgba(255,255,255,.1); font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.08em; color: #8A8B92; text-transform: uppercase; display: flex; justify-content: space-between; flex-wrap: wrap; gap: 16px; } .footer-legal { display: inline-flex; gap: 22px; } .footer-legal a { color: #8A8B92; } .footer-legal a:hover { color: var(--accent); } /* ─── Flash messages ────────────────────────────────────────────── */ .flash { position: fixed; top: 90px; right: var(--gutter); z-index: 100; padding: 15px 22px; border: 1px solid var(--border-2); border-left: 4px solid var(--accent); background: var(--surface); color: var(--fg); font-size: 14px; font-weight: 600; border-radius: var(--r-sm); box-shadow: var(--shadow-lg); max-width: 360px; } .flash--error { border-left-color: var(--red); } /* ─── Lead modal ────────────────────────────────────────────────── */ .modal-bg { position: fixed; inset: 0; background: rgba(21,23,28,.45); backdrop-filter: blur(6px); z-index: 1000; display: none; align-items: center; justify-content: center; padding: 20px; } .modal-bg.is-open { display: flex; } .modal { background: var(--surface); border: 1px solid var(--border); max-width: 440px; width: 100%; padding: 36px 32px; position: relative; border-radius: var(--r); box-shadow: var(--shadow-lg); } .modal__close { position: absolute; top: 16px; right: 16px; width: 38px; height: 38px; background: var(--bg-2); border: 0; border-radius: 50%; color: var(--fg-2); font-size: 20px; } .modal__close:hover { background: var(--border-2); } .modal h3 { font-family: var(--font-disp); font-weight: 700; font-size: 26px; letter-spacing: -0.02em; text-transform: uppercase; margin-bottom: 8px; } .modal p { color: var(--fg-2); font-size: 14px; margin-bottom: 22px; } .modal form { display: flex; flex-direction: column; gap: 12px; } .modal input, .modal textarea { background: var(--surface-2); border: 1px solid var(--border-2); padding: 13px 15px; font: inherit; color: var(--fg); border-radius: 12px; } .modal input:focus, .modal textarea:focus { outline: none; border-color: var(--accent); box-shadow: 0 0 0 4px var(--accent-soft); } /* ════════ LEAD MODAL — fits any screen ═══════════════════════════════════ The dialog was previously one undivided block with padding and no height cap, so on a laptop (or any short window) it grew taller than the viewport and clipped its own submit button — the visitor could fill the form in but never send it. It is now head / scrolling body / pinned foot inside a height-capped column, so "Send" is reachable at every size. The four short inputs sit two-up, which roughly halves the dialog's height and is what lets it fit without scrolling on most screens. ───────────────────────────────────────────────────────────────────────── */ .modal--form { padding: 0; /* head/body/foot own their own padding */ display: flex; flex-direction: column; max-width: 560px; /* wider than the 440px default: two columns */ /* Never taller than the screen. The 40px matches .modal-bg's 20px padding top and bottom, so the dialog stops short of the viewport edge. */ max-height: calc(100dvh - 40px); } .modal__head { padding: 30px 32px 16px; flex: 0 0 auto; padding-right: 66px; /* clear of the close button */ } .modal--form .modal__head h3 { margin-bottom: 6px; font-size: 24px; } .modal--form .modal__head p { margin-bottom: 0; font-size: 13.5px; line-height: 1.5; } /* The form itself becomes the flex column so the footer can pin. */ .modal__form { display: flex; flex-direction: column; min-height: 0; /* lets the body actually shrink and scroll */ flex: 1 1 auto; } .modal__body { padding: 6px 32px 20px; overflow-y: auto; /* only this region scrolls, if anything does */ min-height: 0; flex: 1 1 auto; -webkit-overflow-scrolling: touch; } .modal__grid { display: grid; grid-template-columns: 1fr 1fr; gap: 14px 16px; } .form-field { display: flex; flex-direction: column; gap: 6px; min-width: 0; } .form-field--full { grid-column: 1 / -1; } .modal .form-field input, .modal .form-field textarea { width: 100%; } .modal .form-field textarea { resize: vertical; min-height: 84px; } .field-label { font-size: 12.5px; font-weight: 600; color: var(--fg); letter-spacing: 0.01em; } .field-label .req { color: var(--accent); margin-left: 2px; } .field-optional { font-weight: 400; color: var(--muted); } /* Sits under the phone/email pair to state the "either one" rule up front, rather than letting the visitor discover it by hitting a validation error. */ .form-hint { margin: -4px 0 0; font-size: 12.5px; color: var(--muted); line-height: 1.45; } /* Pinned action bar. The top border reads as a real edge once the body scrolls under it, so the button never looks like it is floating mid-form. */ .modal__foot { flex: 0 0 auto; padding: 16px 32px 22px; border-top: 1px solid var(--border); background: var(--surface); border-radius: 0 0 var(--r) var(--r); } .modal__note { margin: 10px 0 0 !important; font-size: 12px; color: var(--muted); text-align: center; } /* Short windows: trim the generous vertical padding before the body has to scroll, so most laptops still see the whole form at once. */ @media (max-height: 760px) { .modal__head { padding-top: 22px; padding-bottom: 12px; } .modal--form .modal__head h3 { font-size: 21px; } .modal__foot { padding-top: 14px; padding-bottom: 16px; } .modal .form-field textarea { min-height: 64px; } } /* Phones: one column, and the dialog is allowed to use the full width. */ @media (max-width: 560px) { .modal-bg { padding: 12px; align-items: flex-end; } .modal--form { max-height: calc(100dvh - 24px); border-radius: var(--r); } .modal__grid { grid-template-columns: 1fr; } .modal__head { padding: 24px 20px 12px; padding-right: 58px; } .modal__body { padding: 4px 20px 16px; } .modal__foot { padding: 14px 20px 18px; } /* Thumb-sized targets; 16px also stops iOS zooming the page on focus. */ .modal .form-field input, .modal .form-field textarea { font-size: 16px; padding: 14px 15px; } } /* ─── Empty states ──────────────────────────────────────────────── */ .empty { text-align: center; padding: 80px 24px; color: var(--fg-2); font-size: 15px; background: var(--surface); border: 1px dashed var(--border-2); border-radius: var(--r); } .empty h3 { font-family: var(--font-disp); font-weight: 700; font-size: 26px; letter-spacing: -0.01em; text-transform: uppercase; color: var(--fg); margin-bottom: 12px; } /* ─── Accessibility ─────────────────────────────────────────────── */ :focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; } @media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: 0.01ms !important; transition-duration: 0.01ms !important; } html { scroll-behavior: auto; } } /* ─── Sold card styling ─────────────────────────────────────────── */ .feat-card--sold { cursor: default; pointer-events: auto; opacity: 0.95; } .feat-card--sold:hover { border-color: var(--border); transform: none; box-shadow: var(--shadow-sm); } .feat-card--sold .feat-card-img img { filter: grayscale(1) brightness(0.92); transition: none; } .feat-card--sold:hover .feat-card-img img { transform: none; } .feat-card--sold .feat-card-img::after { content: ''; position: absolute; inset: 0; background: rgba(244,241,234,.25); } .feat-card--sold .feat-card-img__sold-large { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%) rotate(-7deg); font-family: var(--font-disp); font-weight: 700; font-size: clamp(40px, 7vw, 64px); letter-spacing: 0.04em; color: #fff; background: var(--red); padding: 8px 24px; border-radius: var(--r-pill); z-index: 3; text-transform: uppercase; line-height: 1; box-shadow: var(--shadow-lg); } .feat-card--sold .feat-card__title, .feat-card--sold .feat-card__price { color: var(--muted); } .feat-card--sold .feat-card__price { text-decoration: line-through; text-decoration-thickness: 1px; } .sold-section { margin-top: 80px; padding-top: 56px; border-top: 1px solid var(--border); } .sold-section .section-title { color: var(--fg-2); } /* ─── Scroll reveal ─────────────────────────────────────────────── */ .reveal { opacity: 0; transform: translateY(18px); transition: opacity 0.7s cubic-bezier(0.22, 1, 0.36, 1), transform 0.7s cubic-bezier(0.22, 1, 0.36, 1); will-change: opacity, transform; } .reveal.is-in { opacity: 1; transform: translateY(0); } .reveal-stagger > .reveal-item { opacity: 0; transform: translateY(20px); transition: opacity 0.65s cubic-bezier(0.22, 1, 0.36, 1), transform 0.65s cubic-bezier(0.22, 1, 0.36, 1); } .reveal-stagger.is-in > .reveal-item { opacity: 1; transform: translateY(0); } .reveal-stagger.is-in > .reveal-item:nth-child(1) { transition-delay: 0.04s; } .reveal-stagger.is-in > .reveal-item:nth-child(2) { transition-delay: 0.10s; } .reveal-stagger.is-in > .reveal-item:nth-child(3) { transition-delay: 0.16s; } .reveal-stagger.is-in > .reveal-item:nth-child(4) { transition-delay: 0.22s; } .reveal-stagger.is-in > .reveal-item:nth-child(5) { transition-delay: 0.28s; } .reveal-stagger.is-in > .reveal-item:nth-child(6) { transition-delay: 0.34s; } .reveal-stagger.is-in > .reveal-item:nth-child(7) { transition-delay: 0.40s; } .reveal-stagger.is-in > .reveal-item:nth-child(8) { transition-delay: 0.46s; } @keyframes hero-rise { from { opacity: 0; transform: translateY(22px); } to { opacity: 1; transform: translateY(0); } } .hero__kicker { animation: hero-rise 0.7s cubic-bezier(0.22, 1, 0.36, 1) 0.10s both; } .hero__title { animation: hero-rise 0.85s cubic-bezier(0.22, 1, 0.36, 1) 0.22s both; } .hero__sub { animation: hero-rise 0.7s cubic-bezier(0.22, 1, 0.36, 1) 0.42s both; } .hero__cta, .hero__pills { animation: hero-rise 0.7s cubic-bezier(0.22, 1, 0.36, 1) 0.56s both; } @media (prefers-reduced-motion: reduce) { .reveal, .reveal-stagger > .reveal-item, .hero__kicker, .hero__title, .hero__sub, .hero__cta, .hero__pills, .hero::before { opacity: 1 !important; transform: none !important; animation: none !important; transition: none !important; } } /* ════════════════════════════════════════════════════════════════ Shipping page ════════════════════════════════════════════════════════════════ */ .eyebrow-pill { display: inline-flex; align-items: center; padding: 8px 18px; background: var(--accent-soft); border: 1px solid #D5DCFF; border-radius: var(--r-pill); font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.18em; text-transform: uppercase; color: var(--accent); margin-bottom: 20px; } .section-title-underline { display: block; width: 64px; height: 4px; background: var(--accent); margin: 24px auto 16px; border-radius: 2px; } .tx-cards { display: grid; grid-template-columns: repeat(3, 1fr); gap: 22px; margin-top: 40px; } @media (max-width: 900px) { .tx-cards { grid-template-columns: 1fr; } } .tx-card { background: var(--surface); border: 1px solid var(--border); border-radius: var(--r); padding: 34px 28px; display: flex; flex-direction: column; box-shadow: var(--shadow-sm); transition: border-color 0.25s ease, transform 0.25s ease, box-shadow .25s ease; } .tx-card:hover { border-color: var(--accent); transform: translateY(-5px); box-shadow: var(--shadow-lg); } .tx-card__icon { width: 56px; height: 56px; background: var(--accent-soft); border: 1px solid #D5DCFF; border-radius: 16px; display: flex; align-items: center; justify-content: center; color: var(--accent); margin-bottom: 22px; } .tx-card__icon svg { width: 28px; height: 28px; } .tx-card h3 { font-family: var(--font-disp); font-weight: 700; font-size: 23px; letter-spacing: -0.02em; text-transform: uppercase; margin-bottom: 10px; } .tx-card p { color: var(--fg-2); font-size: 14.5px; line-height: 1.6; margin-bottom: 22px; } .tx-card ul { list-style: none; padding: 0; margin: 0 0 24px; } .tx-card ul li { position: relative; padding: 9px 0 9px 26px; font-size: 14px; color: var(--fg-2); border-bottom: 1px solid var(--border); } .tx-card ul li:last-child { border-bottom: 0; } .tx-card ul li::before { content: ''; position: absolute; left: 2px; top: 14px; width: 12px; height: 7px; border-left: 2px solid var(--accent); border-bottom: 2px solid var(--accent); transform: rotate(-45deg); } .tx-card__price { margin-top: auto; padding-top: 18px; border-top: 1px solid var(--border); font-family: var(--font-mono); font-size: 12px; letter-spacing: 0.1em; text-transform: uppercase; color: var(--muted); } .tx-card__price strong { font-family: var(--font-disp); font-weight: 700; font-size: 22px; color: var(--accent); letter-spacing: -0.02em; margin-left: 8px; text-transform: none; } .compare-tbl { width: 100%; border-collapse: separate; border-spacing: 0; margin-top: 32px; background: var(--surface); border: 1px solid var(--border); border-radius: var(--r); overflow: hidden; box-shadow: var(--shadow-sm); } .compare-tbl th, .compare-tbl td { padding: 18px 22px; text-align: left; border-bottom: 1px solid var(--border); font-size: 14px; vertical-align: middle; } .compare-tbl th { background: var(--surface-2); font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--accent); font-weight: 500; } .compare-tbl tbody tr:last-child td { border-bottom: 0; } .compare-tbl tbody tr:hover td { background: var(--accent-soft); } .compare-tbl .row-label { display: flex; align-items: center; gap: 12px; font-weight: 700; font-family: var(--font-disp); font-size: 16px; letter-spacing: -0.01em; text-transform: uppercase; } .compare-tbl .row-label .pop { display: inline-block; padding: 3px 10px; background: var(--accent); color: #fff; font-family: var(--font-mono); font-size: 9px; letter-spacing: 0.14em; text-transform: uppercase; border-radius: var(--r-pill); font-weight: 600; } .compare-note { margin-top: 18px; font-size: 12px; color: var(--muted); text-align: center; font-style: italic; } @media (max-width: 700px) { .compare-tbl, .compare-tbl thead, .compare-tbl tbody, .compare-tbl tr, .compare-tbl th, .compare-tbl td { display: block; } .compare-tbl thead { display: none; } .compare-tbl tr { border-bottom: 1px solid var(--border); padding: 16px 0; } .compare-tbl td { padding: 6px 18px; border-bottom: 0; font-size: 13px; } .compare-tbl td::before { content: attr(data-label) ": "; font-family: var(--font-mono); font-size: 10px; letter-spacing: 0.12em; text-transform: uppercase; color: var(--muted); font-weight: 500; } } /* Why-choose-us */ .why-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 20px; margin-top: 40px; } @media (max-width: 900px) { .why-grid { grid-template-columns: repeat(2, 1fr); } } @media (max-width: 540px) { .why-grid { grid-template-columns: 1fr; } } .why-card { background: var(--surface); border: 1px solid var(--border); border-radius: var(--r); padding: 32px 26px; box-shadow: var(--shadow-sm); transition: border-color 0.25s ease, transform 0.25s ease, box-shadow .25s ease; } .why-card:hover { border-color: var(--accent); transform: translateY(-4px); box-shadow: var(--shadow-lg); } .why-card__icon { width: 56px; height: 56px; background: var(--accent-soft); border: 1px solid #D5DCFF; border-radius: 16px; display: inline-flex; align-items: center; justify-content: center; color: var(--accent); margin-bottom: 20px; } .why-card h4 { font-family: var(--font-disp); font-weight: 700; font-size: 20px; letter-spacing: -0.02em; text-transform: uppercase; margin-bottom: 10px; } .why-card p { color: var(--fg-2); font-size: 14px; line-height: 1.6; margin: 0; } /* How-it-works */ .steps { display: grid; grid-template-columns: repeat(4, 1fr); gap: 20px; margin-top: 40px; position: relative; } @media (max-width: 900px) { .steps { grid-template-columns: 1fr 1fr; } } @media (max-width: 540px) { .steps { grid-template-columns: 1fr; } } .step { background: var(--surface); border: 1px solid var(--border); border-radius: var(--r); padding: 34px 26px 28px; position: relative; box-shadow: var(--shadow-sm); } .step__num { display: inline-flex; align-items: center; justify-content: center; width: 54px; height: 54px; margin-bottom: 22px; background: var(--accent); color: #fff; border-radius: 16px; font-family: var(--font-disp); font-weight: 700; font-size: 24px; box-shadow: 0 8px 18px -8px rgba(35,72,255,.7); } .step h4 { font-family: var(--font-disp); font-weight: 700; font-size: 21px; letter-spacing: -0.02em; text-transform: uppercase; margin-bottom: 12px; } .step p { color: var(--fg-2); font-size: 14px; line-height: 1.6; margin: 0; } /* CTA bar */ .cta-bar { background: var(--fg); color: #fff; border-radius: var(--r); padding: 44px clamp(28px, 4vw, 56px); display: flex; align-items: center; justify-content: space-between; gap: 24px; flex-wrap: wrap; position: relative; overflow: hidden; } .cta-bar::before { content: ''; position: absolute; top: -50%; right: -8%; width: 56%; height: 200%; background: radial-gradient(ellipse at center, rgba(35,72,255,.5) 0%, transparent 66%); pointer-events: none; } .cta-bar__text { position: relative; z-index: 1; } .cta-bar h3 { font-family: var(--font-disp); font-weight: 700; font-size: clamp(26px, 3.5vw, 38px); letter-spacing: -0.03em; text-transform: uppercase; margin-bottom: 8px; color: #fff; } .cta-bar p { margin: 0; color: rgba(255,255,255,.8); font-size: 15px; max-width: 480px; } .cta-bar__actions { position: relative; z-index: 1; display: flex; gap: 12px; flex-wrap: wrap; } /* Quote form card */ .quote-card { background: var(--surface); border: 1px solid var(--border); border-radius: var(--r); padding: clamp(28px, 4vw, 48px); max-width: 760px; margin: 0 auto; box-shadow: var(--shadow); } .quote-card__pills { display: flex; justify-content: center; gap: 10px; flex-wrap: wrap; margin-bottom: 32px; } .quote-card__pills .hero__pill { background: var(--surface-2); } .quote-form { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; } .quote-form .full { grid-column: 1 / -1; } .quote-form label { display: block; font-family: var(--font-mono); font-size: 10px; letter-spacing: 0.16em; text-transform: uppercase; color: var(--muted); margin-bottom: 8px; } .quote-form input, .quote-form select, .quote-form textarea { width: 100%; background: var(--surface-2); border: 1px solid var(--border-2); padding: 14px 16px; font: inherit; font-size: 14px; color: var(--fg); border-radius: 12px; } .quote-form input:focus, .quote-form select:focus, .quote-form textarea:focus { outline: none; border-color: var(--accent); box-shadow: 0 0 0 4px var(--accent-soft); } @media (max-width: 600px) { .quote-form { grid-template-columns: 1fr; } } /* FAQ accordion */ .faq { max-width: 880px; margin: 40px auto 0; } .faq details { background: var(--surface); border: 1px solid var(--border); border-radius: var(--r-sm); margin-bottom: 12px; overflow: hidden; transition: border-color 0.2s ease, box-shadow .2s ease; box-shadow: var(--shadow-sm); } .faq details[open] { border-color: var(--accent); box-shadow: var(--shadow); } .faq summary { list-style: none; cursor: pointer; padding: 20px 24px; display: flex; justify-content: space-between; align-items: center; gap: 16px; font-family: var(--font-disp); font-weight: 700; font-size: 17px; letter-spacing: -0.01em; text-transform: uppercase; color: var(--fg); } .faq summary::-webkit-details-marker { display: none; } .faq summary::after { content: '+'; font-family: var(--font-disp); font-weight: 400; font-size: 28px; color: var(--accent); line-height: 1; transition: transform 0.25s ease; flex-shrink: 0; } .faq details[open] summary::after { transform: rotate(45deg); } .faq details > div { padding: 0 24px 22px; color: var(--fg-2); font-size: 15px; line-height: 1.7; border-top: 1px solid var(--border); padding-top: 18px; } .faq a { color: var(--accent); } .stars { display: inline-flex; gap: 2px; color: var(--accent); margin-bottom: 14px; letter-spacing: 1px; } /* ════════════════════════════════════════════════════════════════ FINANCING PAGE ════════════════════════════════════════════════════════════════ */ .hero--fin { min-height: clamp(420px, 56vh, 580px); } .hero--fin .hero__title { font-size: clamp(44px, 7vw, 96px); } .fin-stats { background: var(--surface); border-top: 1px solid var(--border); border-bottom: 1px solid var(--border); } .fin-stats__row { display: grid; grid-template-columns: repeat(4, 1fr); gap: 0; } .fin-stat { padding: clamp(28px, 4vw, 44px) clamp(18px, 3vw, 36px); border-left: 1px solid var(--border); display: flex; flex-direction: column; gap: 8px; } .fin-stat:first-child { border-left: 0; } .fin-stat__num { font-family: var(--font-disp); font-weight: 700; font-size: clamp(42px, 5vw, 62px); line-height: 0.9; color: var(--accent); letter-spacing: -0.04em; } .fin-stat__num span { font-size: 0.42em; font-weight: 600; color: var(--fg-2); margin-left: 4px; letter-spacing: 0; } .fin-stat__label { font-family: var(--font-disp); font-weight: 700; font-size: 15px; letter-spacing: -0.01em; text-transform: uppercase; color: var(--fg); line-height: 1.25; } .fin-stat__label small { display: block; font-family: var(--font-body); font-weight: 400; font-size: 12.5px; letter-spacing: 0; text-transform: none; color: var(--muted); margin-top: 5px; line-height: 1.45; } @media (max-width: 820px) { .fin-stats__row { grid-template-columns: 1fr 1fr; } .fin-stat:nth-child(odd) { border-left: 0; } .fin-stat:nth-child(even) { border-left: 1px solid var(--border); } .fin-stat:nth-child(3), .fin-stat:nth-child(4) { border-top: 1px solid var(--border); } } @media (max-width: 460px) { .fin-stats__row { grid-template-columns: 1fr; } .fin-stat { border-left: 0 !important; border-top: 1px solid var(--border); } .fin-stat:first-child { border-top: 0; } } /* Payment calculator */ .calc { display: grid; grid-template-columns: 1.15fr 0.85fr; gap: clamp(24px, 3vw, 44px); margin-top: 48px; align-items: stretch; } @media (max-width: 880px) { .calc { grid-template-columns: 1fr; } } .calc__controls, .calc__result { min-width: 0; } .calc__controls { background: var(--surface); border: 1px solid var(--border); border-radius: var(--r); padding: clamp(26px, 3vw, 40px); display: flex; flex-direction: column; gap: 30px; box-shadow: var(--shadow-sm); } .calc__field-head { display: flex; align-items: baseline; justify-content: space-between; gap: 8px 12px; margin-bottom: 14px; flex-wrap: wrap; } .calc__field label { font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--muted); } .calc__val { font-family: var(--font-disp); font-weight: 700; font-size: 22px; color: var(--fg); letter-spacing: -0.02em; } .calc__scale { display: flex; justify-content: space-between; margin-top: 9px; font-family: var(--font-mono); font-size: 10px; letter-spacing: 0.08em; color: var(--muted); } .calc input[type="range"] { --fill: 50%; -webkit-appearance: none; appearance: none; width: 100%; height: 6px; border-radius: var(--r-pill); background: linear-gradient(to right, var(--accent) 0%, var(--accent) var(--fill), var(--bg-2) var(--fill), var(--bg-2) 100%); outline: none; cursor: pointer; } .calc input[type="range"]::-webkit-slider-thumb { -webkit-appearance: none; appearance: none; width: 22px; height: 22px; border-radius: 50%; background: #fff; border: 3px solid var(--accent); box-shadow: var(--shadow); transition: transform 0.12s ease, box-shadow 0.12s ease; } .calc input[type="range"]::-webkit-slider-thumb:hover { transform: scale(1.12); } .calc input[type="range"]:active::-webkit-slider-thumb { box-shadow: 0 0 0 6px var(--accent-soft); } .calc input[type="range"]::-moz-range-thumb { width: 22px; height: 22px; border-radius: 50%; background: #fff; border: 3px solid var(--accent); box-shadow: var(--shadow); cursor: pointer; } .calc input[type="range"]::-moz-range-track { height: 6px; border-radius: var(--r-pill); background: var(--bg-2); } .calc input[type="range"]::-moz-range-progress { height: 6px; border-radius: var(--r-pill); background: var(--accent); } .calc__result { background: var(--fg); color: #fff; border-radius: var(--r); padding: clamp(26px, 3vw, 40px); position: relative; overflow: hidden; display: flex; } .calc__result::before { content: ''; position: absolute; top: -40%; right: -20%; width: 70%; height: 180%; background: radial-gradient(ellipse at center, rgba(35,72,255,.55) 0%, transparent 68%); pointer-events: none; } .calc__result-inner { position: relative; z-index: 1; width: 100%; align-self: center; } .calc__result-label { font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.18em; text-transform: uppercase; color: #9FB0FF; display: block; margin-bottom: 6px; } .calc__payment { display: flex; align-items: baseline; gap: 2px; font-family: var(--font-disp); font-weight: 700; color: #fff; line-height: 0.9; letter-spacing: -0.04em; } .calc__payment #outMonthly { font-size: clamp(46px, 13vw, 92px); } .calc__currency { font-size: clamp(24px, 6vw, 42px); color: #9FB0FF; } .calc__per { font-family: var(--font-mono); font-weight: 400; font-size: 16px; letter-spacing: 0.04em; color: #9A9BA3; margin-left: 4px; } .calc__breakdown { margin-top: 26px; border-top: 1px solid rgba(255,255,255,.16); padding-top: 20px; display: flex; flex-direction: column; gap: 12px; } .calc__brk { display: flex; justify-content: space-between; align-items: baseline; gap: 10px; font-size: 14px; color: #C9CAD0; } .calc__brk span { min-width: 0; } .calc__brk strong { font-family: var(--font-mono); font-weight: 500; font-size: 15px; color: #fff; } .calc__disclaimer { margin: 14px 0 0; font-size: 11px; line-height: 1.5; color: #8A8B92; font-style: italic; } /* Rate / term cards */ .rate-cards { display: grid; grid-template-columns: repeat(3, 1fr); gap: 22px; margin-top: 48px; align-items: start; } @media (max-width: 880px) { .rate-cards { grid-template-columns: 1fr; max-width: 440px; margin-inline: auto; } } .rate-card { background: var(--surface); border: 1px solid var(--border); border-radius: var(--r); padding: 34px 28px; display: flex; flex-direction: column; box-shadow: var(--shadow-sm); transition: border-color 0.25s ease, transform 0.25s ease, box-shadow .25s ease; position: relative; } .rate-card:hover { border-color: var(--accent); transform: translateY(-4px); box-shadow: var(--shadow-lg); } .rate-card--feature { border-color: var(--accent); background: linear-gradient(165deg, var(--surface) 0%, var(--accent-soft) 100%); } @media (min-width: 881px) { .rate-card--feature { transform: scale(1.04); } .rate-card--feature:hover { transform: scale(1.04) translateY(-4px); } } .rate-card__badge { position: absolute; top: -12px; left: 50%; transform: translateX(-50%); background: var(--accent); color: #fff; font-family: var(--font-mono); font-size: 10px; font-weight: 600; letter-spacing: 0.14em; text-transform: uppercase; padding: 6px 16px; border-radius: var(--r-pill); white-space: nowrap; } .rate-card__term { font-family: var(--font-disp); font-weight: 700; font-size: clamp(52px, 9vw, 64px); line-height: 0.85; color: var(--fg); letter-spacing: -0.04em; } .rate-card__term small { display: block; font-family: var(--font-mono); font-weight: 400; font-size: 12px; letter-spacing: 0.12em; text-transform: uppercase; color: var(--muted); margin-top: 8px; } .rate-card__apr { font-family: var(--font-mono); font-size: 13px; letter-spacing: 0.04em; color: var(--accent); margin-top: 20px; } .rate-card__pay { font-family: var(--font-disp); font-weight: 700; font-size: 38px; color: var(--fg); letter-spacing: -0.03em; margin-top: 6px; } .rate-card__pay span { font-family: var(--font-mono); font-weight: 400; font-size: 14px; color: var(--muted); letter-spacing: 0.04em; } .rate-card__list { list-style: none; padding: 0; margin: 24px 0; display: flex; flex-direction: column; gap: 0; } .rate-card__list li { position: relative; padding: 11px 0 11px 26px; font-size: 14px; color: var(--fg-2); border-bottom: 1px solid var(--border); } .rate-card__list li:last-child { border-bottom: 0; } .rate-card__list li::before { content: ''; position: absolute; left: 0; top: 16px; width: 11px; height: 6px; border-left: 2px solid var(--accent); border-bottom: 2px solid var(--accent); transform: rotate(-45deg); } .rate-card .btn { margin-top: auto; } /* Requirements list */ .fin-reqs__title { font-family: var(--font-disp); font-weight: 700; font-size: 22px; letter-spacing: -0.01em; text-transform: uppercase; margin: 32px 0 14px; color: var(--accent); } .fin-reqs { list-style: none; padding: 0; margin: 0; } .fin-reqs li { position: relative; padding: 11px 0 11px 30px; color: var(--fg-2); line-height: 1.5; border-bottom: 1px solid var(--border); } .fin-reqs li:last-child { border-bottom: 0; } .fin-reqs li::before { content: ''; position: absolute; left: 2px; top: 17px; width: 12px; height: 7px; border-left: 2px solid var(--accent); border-bottom: 2px solid var(--accent); transform: rotate(-45deg); } .fin-form-card { border-radius: var(--r); } .fin-form-card__sub { color: var(--fg-2); font-size: 13.5px; margin: -8px 0 20px; line-height: 1.5; } .fin-form-row { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; } @media (max-width: 420px) { .fin-form-row { grid-template-columns: 1fr; } } .fin-form-card__fine { margin: 4px 0 0; font-size: 11px; line-height: 1.5; color: var(--muted); } @media (prefers-reduced-motion: reduce) { .rate-card--feature, .rate-card:hover, .rate-card--feature:hover { transform: none; } } @media (max-width: 600px) { .calc { margin-top: 32px; gap: 18px; } .calc__controls { padding: 24px 20px; gap: 24px; } .calc__result { padding: 26px 22px; } .calc__result-inner { align-self: flex-start; } .fin-stat { padding: 24px 20px; } .rate-cards { margin-top: 36px; gap: 30px; } .rate-card { padding: 30px 24px; } .cta-bar { flex-direction: column; align-items: flex-start; } .cta-bar__actions { width: 100%; } .cta-bar__actions .btn { flex: 1 1 auto; justify-content: center; } } @media (pointer: coarse) { .calc input[type="range"] { height: 8px; } .calc input[type="range"]::-webkit-slider-thumb { width: 26px; height: 26px; } .calc input[type="range"]::-moz-range-thumb { width: 26px; height: 26px; } } .calc, .calc__controls, .calc__result, .rate-cards, .rate-card, .fin-stats__row { max-width: 100%; } .calc__val, .calc__brk strong, .rate-card__pay, .calc__payment { overflow-wrap: anywhere; } /* ─── Legal pages ───────────────────────────────────────────────── */ .legal { max-width: 760px; } .legal h2 { font-family: var(--font-disp); font-weight: 700; text-transform: uppercase; letter-spacing: -0.02em; font-size: clamp(22px, 3vw, 30px); margin: 48px 0 16px; color: var(--fg); } .legal h2:first-of-type { margin-top: 0; } .legal h3 { font-family: var(--font-body); font-weight: 700; font-size: 17px; margin: 28px 0 10px; color: var(--fg); } .legal p, .legal li { color: var(--fg-2); font-size: 16px; line-height: 1.75; } .legal p { margin-bottom: 16px; } .legal ul { margin: 0 0 16px 22px; } .legal li { margin-bottom: 8px; } .legal a { color: var(--accent); } .legal a:hover { color: var(--accent-2); } .legal__updated { font-family: var(--font-mono); font-size: 12px; letter-spacing: 0.08em; text-transform: uppercase; color: var(--muted); margin-bottom: 40px; } .legal__note { margin-top: 48px; padding: 18px 22px; border-left: 3px solid var(--accent); background: var(--surface); border-radius: var(--r-sm); font-size: 14px; color: var(--fg-2); } /* ─── Animated gradient text ──────────────────────────────────────── Ported from the React Bits component to pure CSS. Applied site-wide to .cursor-prox (every main heading already carries that class), replacing the old cursor-proximity letter effect. The fill is the brand cobalt family and animates by sliding background-position. No JS — text-cursor-proximity.js is retired so the plain heading text stays in the DOM for this to paint. */ .cursor-prox { display: inline; /* Cobalt sweep. The original highlight band ran through #CFE0FF to pure #FFFFFF, which against the cream page is 1.18:1 and 1.13:1 — so twice per cycle the main headline faded to almost nothing. The brightest stop is now #5B78FF (3.34:1), which still clears WCAG AA for large text at the peak of the sweep while keeping the motion clearly visible. */ background-image: linear-gradient( 100deg, var(--accent-2) 0%, var(--accent) 18%, #3A5AFF 33%, #4E6DFF 42%, #5B78FF 50%, #4E6DFF 58%, #3A5AFF 67%, var(--accent) 82%, var(--accent-2) 100% ); background-size: 250% 100%; background-repeat: repeat; background-clip: text; -webkit-background-clip: text; color: transparent; -webkit-text-fill-color: transparent; animation: cursor-prox-gradient 9s linear infinite; } @keyframes cursor-prox-gradient { 0% { background-position: 100% 50%; } 100% { background-position: -150% 50%; } } /* Leftover hooks from the retired letter-split script — harmless if they ever appear, kept so nothing breaks if the old script is re-enabled. */ .cursor-prox .cursor-prox__word { display: inline-block; white-space: nowrap; font-style: normal; } .cursor-prox .cursor-prox__letter { display: inline-block; transform-origin: center; font-style: normal; will-change: transform, color; } .cursor-prox .cursor-prox__sr { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; } @media (prefers-reduced-motion: reduce) { .cursor-prox { animation: none; background-position: 0% 50%; } } /* ═══════════════════════════════════════════════════════════════════ Shipment tracking (public) ═══════════════════════════════════════════════════════════════════ */ .md-track-search { max-width: 640px; margin: 28px auto 0; } .track-form { display: flex; gap: 12px; } .track-form input { flex: 1; background: var(--surface); border: 1px solid var(--border-2); padding: 16px 18px; font: inherit; font-size: 15px; color: var(--fg); border-radius: var(--r-pill); letter-spacing: 0.02em; box-shadow: var(--shadow-sm); } .track-form input:focus { outline: none; border-color: var(--accent); box-shadow: 0 0 0 4px var(--accent-soft); } .track-form .btn { white-space: nowrap; } .track-hint { text-align: center; color: var(--muted); font-size: 13px; margin-top: 14px; } @media (max-width: 540px) { .track-form { flex-direction: column; } .track-form .btn { width: 100%; justify-content: center; } } .md-track-card { position: relative; overflow: hidden; max-width: 760px; margin: 36px auto 0; background: var(--surface); border: 1px solid var(--border); border-radius: var(--r); padding: clamp(26px, 4vw, 40px); min-height: 168px; box-shadow: var(--shadow-sm); } .md-track-card--delivered, .md-track-card--approved, .md-track-card--completed { border-color: rgba(47,143,91,.55); } .md-track-card--delayed, .md-track-card--cancelled, .md-track-card--more_info { border-color: rgba(194,58,40,.5); } .md-track-card__main { position: relative; z-index: 1; max-width: 70%; } .md-track-card__icon { display: inline-flex; align-items: center; justify-content: center; width: 52px; height: 52px; border-radius: 16px; background: var(--accent-soft); border: 1px solid #D5DCFF; color: var(--accent); margin-bottom: 18px; } .md-track-card--delivered .md-track-card__icon, .md-track-card--approved .md-track-card__icon, .md-track-card--completed .md-track-card__icon { color: var(--green); background: #E4F2EA; border-color: #C6E4D2; } .md-track-card--delayed .md-track-card__icon, .md-track-card--cancelled .md-track-card__icon, .md-track-card--more_info .md-track-card__icon { color: var(--red); background: #FBE7E3; border-color: #F2CcC4; } .md-track-card__code { font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--muted); margin-bottom: 8px; } .md-track-card__title { font-family: var(--font-disp); font-weight: 700; font-size: clamp(24px, 3.5vw, 32px); line-height: 1.05; letter-spacing: -0.02em; color: var(--fg); margin: 0 0 10px; } .md-track-card__desc { color: var(--fg-2); margin: 0; max-width: 46ch; line-height: 1.6; } .md-track-card__illus { position: absolute; bottom: -8px; right: -6px; width: 168px; height: 140px; object-fit: contain; pointer-events: none; opacity: 0.9; z-index: 0; } @media (max-width: 560px) { .md-track-card__main { max-width: 100%; } .md-track-card__illus { width: 110px; height: 92px; opacity: 0.3; } } .track-banner { max-width: 760px; margin: 16px auto 0; border-radius: var(--r-sm); padding: 14px 18px; font-size: 14px; font-weight: 600; } .track-banner--delayed { background: #FBE7E3; border: 1px solid rgba(194,58,40,.4); color: #A83321; } .track-banner--cancelled { background: #FBE7E3; border: 1px solid rgba(194,58,40,.55); color: #A83321; } .md-track-steps { max-width: 760px; margin: 30px auto 0; display: flex; flex-wrap: wrap; } .md-track-step { position: relative; flex: 1 1 0; min-width: 96px; text-align: center; padding-top: 34px; } .md-track-step::before { content: ''; position: absolute; top: 13px; left: 50%; right: -50%; height: 2px; background: var(--border-2); } .md-track-step:last-child::before { display: none; } .md-track-step__dot { position: absolute; top: 5px; left: 50%; transform: translateX(-50%); width: 20px; height: 20px; border-radius: 50%; background: var(--surface); border: 2px solid var(--border-2); display: flex; align-items: center; justify-content: center; color: #fff; } .md-track-step__label { font-size: 12px; color: var(--muted); line-height: 1.35; padding: 0 6px; } .md-track-step.is-done::before { background: var(--accent); } .md-track-step.is-done .md-track-step__dot { background: var(--accent); border-color: var(--accent); color: #fff; } .md-track-step.is-current .md-track-step__dot { background: var(--accent); border-color: var(--accent); box-shadow: 0 0 0 6px var(--accent-soft); } .md-track-step.is-done .md-track-step__label, .md-track-step.is-current .md-track-step__label { color: var(--fg); } .md-track-step.is-current .md-track-step__label { font-weight: 700; } @media (max-width: 620px) { .md-track-steps { flex-direction: column; gap: 0; max-width: 360px; } .md-track-step { flex: none; text-align: left; padding: 0 0 24px 38px; min-height: 44px; } .md-track-step::before { top: 24px; left: 9px; right: auto; bottom: -2px; width: 2px; height: auto; } .md-track-step__dot { top: 2px; left: 0; transform: none; } .md-track-step__label { padding: 4px 0 0; } } .md-track-meta { max-width: 760px; margin: 34px auto 0; display: grid; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); gap: 1px; background: var(--border); border: 1px solid var(--border); border-radius: var(--r-sm); overflow: hidden; } .md-track-meta__item { background: var(--surface); padding: 16px 18px; display: flex; flex-direction: column; gap: 6px; } .md-track-meta__k { font-family: var(--font-mono); font-size: 10px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--muted); } .md-track-meta__v { color: var(--fg); font-size: 14px; font-weight: 500; } .md-track-arrow { color: var(--accent); padding: 0 4px; } .md-track-history { max-width: 760px; margin: 36px auto 0; } .md-track-history__title { font-family: var(--font-disp); font-weight: 700; font-size: 20px; letter-spacing: -0.01em; color: var(--fg); margin: 0 0 16px; } .track-events { list-style: none; margin: 0; padding: 0; } .md-track-event { display: flex; gap: 16px; } .md-track-event__rail { position: relative; width: 12px; flex: none; } .md-track-event__rail::before { content: ''; position: absolute; left: 5px; top: 0; bottom: 0; width: 2px; background: var(--border-2); } .md-track-event:last-child .md-track-event__rail::before { bottom: auto; height: 18px; } .md-track-event__node { position: absolute; left: 0; top: 12px; width: 12px; height: 12px; border-radius: 50%; background: var(--surface); border: 2px solid var(--border-2); z-index: 1; } .md-track-event.is-latest .md-track-event__node { background: var(--accent); border-color: var(--accent); } .md-track-event__content { padding: 6px 0 22px; flex: 1; } .md-track-event__top { display: flex; justify-content: space-between; gap: 12px; align-items: baseline; } .md-track-event__status { color: var(--fg); font-weight: 700; font-size: 15px; } .md-track-event__time { font-family: var(--font-mono); font-size: 11px; color: var(--muted); white-space: nowrap; } .md-track-event__loc { color: var(--accent); font-size: 13px; margin-top: 3px; } .md-track-event__note { color: var(--fg-2); font-size: 14px; margin-top: 5px; line-height: 1.55; } .md-track-empty { max-width: 560px; margin: 40px auto 0; text-align: center; background: var(--surface); border: 1px solid var(--border); border-radius: var(--r); padding: 44px 32px; box-shadow: var(--shadow-sm); } .md-track-empty__icon { display: inline-flex; align-items: center; justify-content: center; width: 64px; height: 64px; border-radius: 50%; background: var(--bg-2); border: 1px solid var(--border); color: var(--muted); margin-bottom: 18px; } .md-track-empty h3 { font-family: var(--font-disp); font-weight: 700; font-size: 22px; letter-spacing: -0.01em; color: var(--fg); margin: 0 0 10px; } .md-track-empty p { color: var(--fg-2); line-height: 1.6; margin: 0 0 22px; } /* ─── Merch ─────────────────────────────────────────────────────── */ .merch-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 20px; } .merch-card { display: flex; flex-direction: column; background: var(--surface); border: 1px solid var(--border); border-radius: var(--r); overflow: hidden; text-decoration: none; color: var(--fg); box-shadow: var(--shadow-sm); transition: border-color .2s ease, transform .25s ease, box-shadow .25s ease; } .merch-card:hover { border-color: var(--accent); transform: translateY(-4px); box-shadow: var(--shadow-lg); } .merch-card__img { aspect-ratio: 4 / 3; background: var(--ink-3); overflow: hidden; position: relative; margin: 10px 10px 0; border-radius: 16px; } .merch-card__img img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform .35s ease; } .merch-card:hover .merch-card__img img { transform: scale(1.05); } .merch-card__noimg { width: 100%; height: 100%; display: flex; align-items: center; justify-content: center; color: var(--muted); font-family: var(--font-disp); font-size: 40px; letter-spacing: .04em; } .merch-card__body { padding: 16px 18px 18px; display: flex; flex-direction: column; gap: 6px; flex: 1; } .merch-card__name { font-family: var(--font-disp); font-weight: 700; font-size: 17px; letter-spacing: -0.01em; color: var(--fg); } .merch-card__desc { font-size: 13px; line-height: 1.5; color: var(--fg-2); } .merch-card__foot { margin-top: auto; padding-top: 12px; display: flex; align-items: baseline; justify-content: space-between; gap: 10px; } /* ── Parts counter ───────────────────────────────────────────────── */ .part-no { position: absolute; top: 14px; left: 14px; background: var(--surface); color: var(--accent); font-family: var(--font-mono); font-size: 10px; letter-spacing: .1em; padding: 5px 11px; border: 1px solid var(--border-2); border-radius: 999px; } .part-fits { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; margin-top: 10px; } .part-fits span { font-family: var(--font-mono); font-size: 9.5px; letter-spacing: .16em; text-transform: uppercase; color: var(--muted); } .part-fits em { font-style: normal; font-family: var(--font-mono); font-size: 10.5px; color: var(--fg-2); border: 1px solid var(--border); background: var(--surface-2); padding: 3px 9px; border-radius: 999px; } .merch-card__price { font-family: var(--font-mono); font-size: 14px; font-weight: 500; color: var(--accent); } .merch-card__price--muted { color: var(--muted); } .merch-card__cta { font-family: var(--font-mono); font-size: 11px; letter-spacing: .1em; text-transform: uppercase; color: var(--muted); transition: color .2s ease; } .merch-card:hover .merch-card__cta { color: var(--accent); } @media (max-width: 900px) { .merch-grid { grid-template-columns: repeat(2, 1fr); } } @media (max-width: 520px) { .merch-grid { grid-template-columns: 1fr; } } .merch-card__img { position: relative; } .merch-tag { position: absolute; top: 14px; left: 14px; font-family: var(--font-mono); font-size: 10px; letter-spacing: .12em; text-transform: uppercase; color: #fff; background: rgba(21,23,28,.78); padding: 5px 10px; border-radius: var(--r-pill); backdrop-filter: blur(2px); } .merch-card--static:hover { transform: none; border-color: var(--border); box-shadow: var(--shadow-sm); } .merch-card--static:hover .merch-card__img img { transform: scale(1.03); } .merch-card--static .merch-card__foot { align-items: center; } .merch-empty { text-align: center; padding: 60px 20px; border: 1px dashed var(--border-2); border-radius: var(--r); color: var(--fg-2); background: var(--surface); } .merch-empty__mark { color: var(--accent); font-size: 26px; margin-bottom: 12px; } .merch-empty p { max-width: 460px; margin: 0 auto; line-height: 1.6; } .merch-empty a { color: var(--accent); } .merch-modal__err { font-family: var(--font-mono); font-size: 12px; color: var(--red); background: #FBE7E3; border: 1px solid rgba(194,58,40,.4); border-radius: 8px; padding: 9px 11px; } .merch-done__mark { width: 54px; height: 54px; margin: 4px auto 16px; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: 26px; color: #fff; background: var(--accent); } .merch-card__sizes { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 4px; } .merch-card__sizes span { font-family: var(--font-mono); font-size: 10px; letter-spacing: .04em; color: var(--fg-2); border: 1px solid var(--border-2); border-radius: var(--r-pill); padding: 2px 9px; } .merch-size__label { font-family: var(--font-mono); font-size: 11px; letter-spacing: .12em; text-transform: uppercase; color: var(--muted); margin-bottom: 8px; } .merch-size__pills { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 4px; } .merch-size__pill { font-family: var(--font-mono); font-size: 12px; letter-spacing: .04em; color: var(--fg-2); background: var(--surface); border: 1px solid var(--border-2); border-radius: var(--r-pill); padding: 8px 14px; min-width: 44px; cursor: pointer; transition: border-color .15s ease, color .15s ease, background .15s ease; } .merch-size__pill:hover { border-color: var(--accent); color: var(--fg); } .merch-size__pill.is-sel { background: var(--accent); border-color: var(--accent); color: #fff; } /* ================================================================ v2.1 LAYOUT REWORK — Inventory / Financing / Shipping / Contact Additive only. Uses existing design tokens, components, and motion. No token values are hard-coded; shared components are reused and only re-arranged. New classes are namespaced per page. ================================================================ */ /* ── Inventory — sidebar "shop" layout ──────────────────────────── */ .inv-layout { display: grid; grid-template-columns: 272px 1fr; gap: clamp(24px, 3vw, 44px); align-items: start; margin-top: 30px; } .inv-rail { position: sticky; top: 94px; display: flex; flex-direction: column; gap: 16px; } .inv-rail__panel { background: var(--surface); border: 1px solid var(--border); border-radius: var(--r); box-shadow: var(--shadow-sm); padding: 22px; display: flex; flex-direction: column; gap: 18px; } .inv-rail__group { display: flex; flex-direction: column; gap: 9px; min-width: 0; } .inv-rail__label { font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--muted); } .inv-rail .inv-search, .inv-rail .inv-select { width: 100%; flex: 0 0 auto; } .inv-rail__actions { display: flex; flex-direction: column; gap: 10px; margin-top: 2px; } .inv-results-head { display: flex; align-items: baseline; justify-content: space-between; gap: 16px 24px; flex-wrap: wrap; margin-bottom: 24px; } .inv-results-head__count { font-family: var(--font-disp); font-weight: 700; text-transform: uppercase; letter-spacing: -0.02em; font-size: clamp(20px, 2.4vw, 26px); color: var(--fg); } .inv-results-head__count span { color: var(--accent); } .inv-chips { display: flex; flex-wrap: wrap; gap: 8px; } .inv-chip { display: inline-flex; align-items: center; gap: 8px; font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.04em; color: var(--accent); background: var(--accent-soft); border: 1px solid #D5DCFF; border-radius: var(--r-pill); padding: 6px 8px 6px 13px; } .inv-chip a { display: inline-flex; width: 17px; height: 17px; align-items: center; justify-content: center; border-radius: 50%; background: var(--accent); color: #fff; font-weight: 700; line-height: 1; font-size: 12px; } .inv-chip a:hover { background: var(--accent-2); } @media (max-width: 880px) { .inv-layout { grid-template-columns: 1fr; gap: 26px; } .inv-rail { position: static; } .inv-rail__panel { display: grid; grid-template-columns: 1fr 1fr; gap: 16px 14px; align-items: end; } .inv-rail__group--search { grid-column: 1 / -1; } .inv-rail__actions { flex-direction: row; grid-column: 1 / -1; } .inv-rail__actions .btn { flex: 1 1 auto; justify-content: center; } } @media (max-width: 480px) { .inv-rail__panel { grid-template-columns: 1fr; } .inv-rail__actions { flex-direction: column; } } /* ── Financing — split hero with embedded estimator ─────────────── */ .fin-hero { min-height: 0; align-items: stretch; } .fin-hero .hero__inner { padding-top: clamp(48px, 6vw, 76px); padding-bottom: clamp(48px, 6vw, 76px); } .fin-hero__split { display: grid; grid-template-columns: 1.02fr 0.98fr; gap: clamp(34px, 4.5vw, 68px); align-items: center; } .fin-hero__copy { max-width: 560px; } .fin-hero__copy .hero__title { font-size: clamp(40px, 5.6vw, 78px); } .fin-hero__copy .hero__sub { margin-bottom: 0; } @media (max-width: 960px) { .fin-hero__split { grid-template-columns: 1fr; gap: 40px; } } /* Estimator card: reuse .calc internals but stack into a single card */ .calc--hero { grid-template-columns: 1fr; gap: 0; margin-top: 0; box-shadow: var(--shadow-lg); border-radius: var(--r); overflow: hidden; border: 1px solid var(--border); } .calc--hero .calc__controls { border: 0; border-radius: 0; box-shadow: none; gap: 22px; padding: clamp(24px, 2.6vw, 32px); } .calc--hero .calc__result { border-radius: 0; } .calc--hero .calc__head { padding: clamp(22px, 2.4vw, 30px) clamp(24px, 2.6vw, 32px) 0; background: var(--surface); } .calc--hero .calc__head .eyebrow { margin-bottom: 0; } .calc--hero .calc__payment #outMonthly { font-size: clamp(44px, 8vw, 72px); } /* ── Shipping — slim track band ─────────────────────────────────── */ .track-band { background: var(--surface); border: 1px solid var(--border); border-radius: var(--r); box-shadow: var(--shadow-sm); padding: clamp(24px, 3vw, 36px); display: grid; grid-template-columns: 0.9fr 1.1fr; gap: clamp(24px, 3vw, 44px); align-items: center; } .track-band__copy h3 { font-family: var(--font-disp); font-weight: 700; text-transform: uppercase; font-size: clamp(22px, 2.6vw, 30px); letter-spacing: -0.02em; margin-bottom: 8px; } .track-band__copy p { color: var(--fg-2); font-size: 14.5px; margin: 0; max-width: 42ch; } .track-band .md-track-search { margin: 0; max-width: none; } @media (max-width: 760px) { .track-band { grid-template-columns: 1fr; gap: 20px; } } /* Shipping quote as a split (intro left, form card right) */ .ship-quote { align-items: start; grid-template-columns: 0.8fr 1.2fr; } @media (max-width: 900px) { .ship-quote { grid-template-columns: 1fr; } } .ship-quote .quote-card { max-width: none; margin: 0; } .ship-quote__steps { list-style: none; padding: 0; margin: 26px 0 0; display: flex; flex-direction: column; gap: 2px; counter-reset: shipstep; } .ship-quote__steps li { position: relative; padding: 16px 0 16px 52px; border-top: 1px solid var(--border); color: var(--fg-2); font-size: 14.5px; line-height: 1.5; } .ship-quote__steps li:last-child { border-bottom: 1px solid var(--border); } .ship-quote__steps li strong { display: block; color: var(--fg); font-family: var(--font-disp); font-weight: 600; font-size: 16px; margin-bottom: 2px; letter-spacing: -0.01em; } .ship-quote__steps li::before { counter-increment: shipstep; content: counter(shipstep); position: absolute; left: 0; top: 14px; width: 34px; height: 34px; display: flex; align-items: center; justify-content: center; background: var(--accent-soft); color: var(--accent); border: 1px solid #D5DCFF; border-radius: 50%; font-family: var(--font-mono); font-size: 14px; font-weight: 500; } /* ── Contact — bento tiles + centered form ──────────────────────── */ .contact-tiles { display: grid; grid-template-columns: repeat(4, 1fr); gap: 18px; margin-bottom: clamp(36px, 5vw, 56px); } .contact-tiles .contact-info__item { margin: 0; } @media (max-width: 900px) { .contact-tiles { grid-template-columns: repeat(2, 1fr); } } @media (max-width: 520px) { .contact-tiles { grid-template-columns: 1fr; } } .contact-form-wrap { max-width: 680px; margin: 0 auto; } .contact-form-wrap .det-card { padding: clamp(28px, 4vw, 44px); } .contact-split-row { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; } @media (max-width: 480px) { .contact-split-row { grid-template-columns: 1fr; } } /* ── Videos (film room) ──────────────────────────────────────────── */ .vid-grid { display:grid; grid-template-columns:repeat(auto-fill,minmax(360px,1fr)); gap:22px; } .vid-card { margin:0; background:var(--surface); border:1px solid var(--border); border-radius:var(--r); overflow:hidden; display:flex; flex-direction:column; box-shadow:0 1px 2px rgba(20,20,30,.04); } .vid-card__frame { position:relative; aspect-ratio:16/9; background:#0b0d12; overflow:hidden; margin:10px 10px 0; border-radius:16px; } .vid-card__frame video, .vid-card__frame iframe { width:100%; height:100%; display:block; border:0; object-fit:cover; } .vid-card__body { padding:18px 22px 24px; } .vid-card__title { font-family:var(--font-disp); font-weight:700; font-size:19px; letter-spacing:-0.02em; color:var(--fg); } .vid-card__caption { margin-top:7px; color:var(--fg-2); font-size:14.5px; line-height:1.6; } .vid-card__link { display:inline-block; margin-top:12px; font-family:var(--font-mono); font-size:12px; color:var(--accent); } @media (max-width:760px){ .vid-grid { grid-template-columns:1fr; } } /* ════════ FOOTER — "bento" (Bell) ════════ Rounded tiles matching the theme's card language: a full-width accent call tile leads, three information tiles beneath. */ .ftr-bento { background: var(--bg-2); border-top:1px solid var(--border); padding: clamp(40px,6vw,72px) 0 28px; } .ftr-b__call { display:block; background: var(--accent); color:#fff; border-radius: var(--r); padding: clamp(24px,4vw,40px); text-decoration:none; text-align:center; } .ftr-b__call:hover, .ftr-b__call:focus-visible { background: var(--accent-2); } .ftr-b__calllbl { display:block; font-size:14px; letter-spacing:.14em; text-transform:uppercase; opacity:.85; } .ftr-b__callnum { display:block; font-family: var(--font-disp); font-weight:700; letter-spacing:-.02em; font-size: clamp(32px,5.4vw,60px); line-height:1.1; margin:6px 0 4px; } .ftr-b__callsub { display:block; font-size:15px; opacity:.9; } .ftr-b__grid { display:grid; grid-template-columns: repeat(3,1fr); gap:14px; margin-top:14px; } .ftr-b__tile { background: var(--surface); border:1px solid var(--border); border-radius: var(--r-sm); padding: clamp(20px,3vw,28px); } .ftr-b__tile h5 { margin:0 0 12px; font-family: var(--font-disp); font-size:17px; color: var(--fg); } .ftr-b__tile address { font-style:normal; font-size:15.5px; line-height:1.6; color: var(--fg-2); margin-bottom:10px; } .ftr-b__tile a { color: var(--accent); text-decoration:none; } .ftr-b__tile a:hover, .ftr-b__tile a:focus-visible { text-decoration:underline; } .ftr-b__hours { display:grid; grid-template-columns:auto 1fr; gap:4px 16px; margin:0; font-size:15.5px; } .ftr-b__hours dt { color: var(--muted); } .ftr-b__hours dd { margin:0; color: var(--fg-2); } .ftr-b__nav { display:flex; flex-direction:column; } .ftr-b__nav a { padding:7px 0; min-height:40px; display:flex; align-items:center; color: var(--fg-2); } .ftr-b__nav a:hover, .ftr-b__nav a:focus-visible { color: var(--accent); } .ftr-b__base { display:flex; flex-wrap:wrap; align-items:center; gap:16px; justify-content:space-between; margin-top:22px; font-size:14px; color: var(--muted); } .ftr-b__mark { font-family: var(--font-disp); font-weight:700; font-size:18px; letter-spacing:.14em; color: var(--fg); } .ftr-b__legal a { color: var(--fg-2); margin-left:16px; text-decoration:underline; text-underline-offset:3px; } @media (max-width:860px){ .ftr-b__grid { grid-template-columns:1fr; } } /* ════════ CONTACT — "action cards" (Bell) ════════ */ .ctc-m__head { max-width:640px; margin-bottom: clamp(28px,4vw,44px); } .ctc-m__h1 { font-family: var(--font-disp); font-weight:700; font-size: clamp(34px,5.2vw,60px); letter-spacing:-.025em; color: var(--fg); margin:8px 0 12px; } .ctc-m__sub { color: var(--fg-2); font-size:17px; } .ctc-m__cards { display:grid; grid-template-columns:repeat(3,1fr); gap:14px; margin-bottom:18px; } .ctc-m__card { display:flex; flex-direction:column; gap:6px; background: var(--surface); border:1px solid var(--border); border-radius: var(--r); padding: clamp(20px,3vw,28px); text-decoration:none; min-height:150px; } a.ctc-m__card:hover, a.ctc-m__card:focus-visible { border-color: var(--accent); } .ctc-m__card--accent { background: var(--accent); border-color: var(--accent); } .ctc-m__card--accent .ctc-m__k, .ctc-m__card--accent .ctc-m__meta { color: rgba(255,255,255,.85); } .ctc-m__card--accent .ctc-m__v { color:#fff; } .ctc-m__k { font-size:13px; letter-spacing:.14em; text-transform:uppercase; color: var(--muted); } .ctc-m__v { font-family: var(--font-disp); font-weight:700; font-size: clamp(22px,2.6vw,30px); letter-spacing:-.02em; color: var(--fg); line-height:1.15; } .ctc-m__v--sm { font-size:17.5px; font-weight:600; letter-spacing:0; line-height:1.45; } .ctc-m__meta { margin-top:auto; font-size:14px; color: var(--fg-2); } .ctc-m__meta--link { color: var(--accent); text-decoration:none; } .ctc-m__formcard { background: var(--surface); border:1px solid var(--border); border-radius: var(--r); padding: clamp(24px,4vw,44px); max-width:780px; } .ctc-m__formcard h2 { font-family: var(--font-disp); font-size: clamp(22px,2.6vw,30px); color: var(--fg); margin:0 0 6px; } .ctc-m__formsub { color: var(--fg-2); margin:0 0 24px; } @media (max-width:860px){ .ctc-m__cards { grid-template-columns:1fr; } } /* ════════ HEADER — floating pill (Bell) ════════ */ .hdr-pill { position:sticky; top:0; z-index:80; padding:14px 0; background: var(--bg); } .hdr-pill__bar { display:flex; align-items:center; gap:18px; background: var(--surface); border:1px solid var(--border); border-radius:999px; padding:10px 12px 10px 24px; box-shadow:0 6px 20px -12px rgba(20,20,40,.28); } .hdr-pill__mark { font-family: var(--font-disp); font-weight:700; font-size:20px; letter-spacing:.14em; color: var(--fg); text-decoration:none; white-space:nowrap; } .hdr-pill__mark img { max-height:34px; width:auto; display:block; } .hdr-pill__nav { display:flex; align-items:center; gap:2px; margin-left:auto; } .hdr-pill__nav a { font-size:15px; color: var(--fg-2); text-decoration:none; padding:10px 14px; border-radius:999px; min-height:44px; display:inline-flex; align-items:center; } .hdr-pill__nav a:hover, .hdr-pill__nav a:focus-visible { background: var(--accent-soft); color: var(--accent); } .hdr-pill__nav a.is-on { background: var(--accent-soft); color: var(--accent); font-weight:600; } .hdr-pill__call { display:inline-flex; align-items:center; gap:8px; background: var(--accent); color:#fff; border-radius:999px; padding:11px 20px; font-weight:600; text-decoration:none; min-height:48px; white-space:nowrap; } .hdr-pill__call:hover, .hdr-pill__call:focus-visible { background: var(--accent-2); } @media (max-width:1080px){ .hdr-pill__nav { display:none; } .hdr-pill__call span { display:none; } .hdr-pill__call { padding:11px 14px; } .hdr-pill__nav + .hdr-pill__call { margin-left:auto; } } @media (min-width:1081px){ .hdr-pill .nav-toggle { display:none; } } /* ════════ LAYOUT SHAPE — bento tiles (Bell) ════════ Listings sit in an uneven bento: the first car takes a double-width tile, the rest follow as standard tiles. */ .inv-grid { grid-template-columns:repeat(3,1fr) !important; gap:16px !important; } .inv-grid .feat-card { border-radius: var(--r) !important; overflow:hidden; box-shadow:0 2px 10px -6px rgba(20,20,40,.22); transition: transform .25s ease, box-shadow .25s ease; } .inv-grid .feat-card:hover { transform: translateY(-3px); box-shadow:0 14px 28px -18px rgba(20,20,40,.4); } .inv-grid .feat-card:first-child { grid-column: span 2; } .inv-grid .feat-card:first-child .feat-card-img { aspect-ratio:16/9 !important; } .inv-grid .feat-card:first-child .feat-card__title { font-size:26px !important; } .inv-grid .feat-card-img { margin:10px 10px 0; border-radius:16px; overflow:hidden; } @media (max-width:1000px){ .inv-grid { grid-template-columns:repeat(2,1fr) !important; } } @media (max-width:680px){ .inv-grid { grid-template-columns:1fr !important; } .inv-grid .feat-card:first-child { grid-column:span 1; } } /* Car page: sidebar on the LEFT, gallery right — mirrored from the others. */ .det-cols { grid-template-columns: 360px 1fr !important; } .det-gallery { order:2; } .det-side { order:1; } @media (max-width:900px){ .det-cols { grid-template-columns:1fr !important; } .det-gallery { order:1; } .det-side { order:2; } } /* ════════ HOME SHAPE — contained panel (Bell) ════════ The hero sits as an inset rounded panel rather than a full-bleed band, in keeping with the pill header and bento tiles. */ .hero { min-height: clamp(380px, 54vh, 560px); margin: 0 clamp(12px,3vw,28px); border-radius: var(--r); overflow:hidden; border:1px solid var(--border); } .hero__title { font-size: clamp(40px, 6vw, 84px) !important; } .feat { grid-template-columns: repeat(4,1fr) !important; gap:14px !important; } .feat > .feat-card { border-radius: var(--r) !important; } .feat > .feat-card .feat-card-img { margin:10px 10px 0; border-radius:14px; overflow:hidden; } @media (max-width:1050px){ .feat { grid-template-columns:repeat(2,1fr) !important; } } @media (max-width:620px){ .feat { grid-template-columns:1fr !important; } } /* ════════ FINANCING — steps + cobalt calculator card (Bell) ════════ */ .fin-simple__head { max-width:640px; margin-bottom:clamp(26px,4vw,42px); } .fin-simple__head h1 { font-family:var(--font-disp); font-weight:700; font-size:clamp(34px,5.2vw,62px); letter-spacing:-.025em; color:var(--fg); margin:8px 0 12px; } .fin-simple__head p { color:var(--fg-2); font-size:17.5px; max-width:52ch; } .fin-simple__steps { list-style:none; margin:0; padding:0; display:grid; grid-template-columns:repeat(3,1fr); gap:16px; } .fin-simple__steps li { background:var(--surface); border:1px solid var(--border); border-radius:var(--r); padding:clamp(20px,3vw,30px); } .fin-simple__steps span { display:inline-flex; align-items:center; justify-content:center; width:38px; height:38px; border-radius:999px; background:var(--accent-soft); color:var(--accent); font-weight:700; margin-bottom:12px; } .fin-simple__steps h3 { font-family:var(--font-disp); font-size:19px; margin:0 0 6px; color:var(--fg); } .fin-simple__steps p { margin:0; color:var(--fg-2); font-size:15.5px; } .fin-cc__panel { display:grid; grid-template-columns:1fr .85fr; gap:0; border-radius:var(--r); overflow:hidden; border:1px solid var(--border); } .fin-cc__controls { background:var(--surface); padding:clamp(24px,3.6vw,40px); } .fin-cc__controls h2 { font-family:var(--font-disp); font-size:clamp(22px,2.6vw,30px); margin:0 0 22px; color:var(--fg); } .fin-cc__dial { margin-bottom:20px; } .fin-cc__dial label { display:block; font-size:14.5px; color:var(--fg-2); margin-bottom:6px; } .fin-cc__dial input[type=range] { width:100%; accent-color:var(--accent); height:34px; } .fin-cc__dial output { display:block; font-weight:600; color:var(--fg); } .fin-cc__result { background:var(--accent); color:#fff; padding:clamp(24px,3.6vw,40px); display:flex; flex-direction:column; } .fin-cc__lbl { font-size:14px; opacity:.85; } .fin-cc__num { font-family:var(--font-disp); font-weight:700; font-size:clamp(44px,6.4vw,74px); line-height:1; } .fin-cc__per { font-size:15px; opacity:.85; margin-bottom:18px; } .fin-cc__result dl { display:grid; grid-template-columns:1fr auto; gap:7px 14px; margin:0 0 14px; border-top:1px solid rgba(255,255,255,.28); padding-top:16px; font-size:15px; } .fin-cc__result dt { opacity:.85; } .fin-cc__result dd { margin:0; font-weight:600; } .fin-cc__fine { font-size:13.5px; opacity:.85; margin:auto 0 0; } .fin-cc__tiles { display:grid; grid-template-columns:repeat(3,1fr); gap:14px; margin-top:16px; } .fin-cc__tile { background:var(--surface); border:1px solid var(--border); border-radius:var(--r-sm); padding:clamp(18px,2.6vw,26px); } .fin-cc__tile h4 { font-family:var(--font-disp); font-size:20px; color:var(--accent); margin:0 0 6px; } .fin-cc__tile p { margin:0; color:var(--fg-2); font-size:15.5px; } .fin-fc__card { background:var(--surface); border:1px solid var(--border); border-radius:var(--r); padding:clamp(24px,4vw,44px); max-width:780px; } .fin-fc__card h2 { font-family:var(--font-disp); font-size:clamp(24px,2.8vw,32px); margin:0 0 6px; color:var(--fg); } .fin-fc__sub { color:var(--fg-2); margin:0 0 24px; } .fin-fine { font-size:13.5px; color:var(--fg-2); margin-top:14px; } @media (max-width:900px){ .fin-simple__steps, .fin-cc__tiles { grid-template-columns:1fr; } .fin-cc__panel { grid-template-columns:1fr; } } /* ════════ SHIPPING — choose your option (Bell) ════════ */ .ship-choose__head { max-width:640px; margin-bottom:clamp(26px,4vw,42px); } .ship-choose__head h1 { font-family:var(--font-disp); font-weight:700; font-size:clamp(34px,5.2vw,62px); letter-spacing:-.025em; color:var(--fg); margin:8px 0 12px; } .ship-choose__head p { color:var(--fg-2); font-size:17.5px; max-width:56ch; } .ship-choose__opts { display:grid; grid-template-columns:repeat(3,1fr); gap:16px; } .ship-opt { position:relative; background:var(--surface); border:1px solid var(--border); border-radius:var(--r); padding:clamp(22px,3vw,32px); } .ship-opt--best { border-color:var(--accent); box-shadow:0 0 0 3px var(--accent-soft); } .ship-opt__tag { position:absolute; top:-11px; left:22px; background:var(--accent); color:#fff; font-size:12px; font-weight:600; letter-spacing:.08em; padding:4px 12px; border-radius:999px; } .ship-opt h3 { font-family:var(--font-disp); font-size:24px; color:var(--fg); margin:6px 0 8px; } .ship-opt p { color:var(--fg-2); margin:0 0 14px; } .ship-opt ul { margin:0; padding:0; list-style:none; border-top:1px solid var(--border); } .ship-opt li { padding:9px 0 9px 24px; position:relative; color:var(--fg-2); font-size:15.5px; border-bottom:1px solid var(--border); } .ship-opt li:last-child { border-bottom:0; } .ship-opt li::before { content:'✓'; position:absolute; left:0; color:var(--accent); font-weight:700; } .ship-two__grid { display:grid; grid-template-columns:1.15fr .85fr; gap:16px; align-items:start; } .ship-two__card { background:var(--surface); border:1px solid var(--border); border-radius:var(--r); padding:clamp(24px,3.6vw,40px); } .ship-two__card--alt { background:var(--surface-2); } .ship-two__card h2 { font-family:var(--font-disp); font-size:clamp(22px,2.6vw,30px); color:var(--fg); margin:0 0 6px; } .ship-two__sub { color:var(--fg-2); margin:0 0 22px; } .ship-two__help { margin-top:26px; padding-top:20px; border-top:1px solid var(--border); } .ship-two__help h4 { font-family:var(--font-disp); font-size:17px; margin:0 0 6px; color:var(--fg); } .ship-two__help p { margin:0; color:var(--fg-2); font-size:15.5px; } .ship-two__help a { color:var(--accent); } @media (max-width:960px){ .ship-choose__opts, .ship-two__grid { grid-template-columns:1fr; } } /* ════════ SMALL PAGES — shapes (Bell) ════════ Rounded tiles with soft lift, matching the bento language. */ .merch-page .merch-grid { grid-template-columns:repeat(3,1fr) !important; gap:16px !important; } .merch-page .merch-card { border-radius:var(--r) !important; overflow:hidden; box-shadow:0 2px 10px -6px rgba(20,20,40,.2); transition:transform .25s ease; } .merch-page .merch-card:hover { transform:translateY(-3px); } .merch-page .merch-card__img { margin:10px 10px 0; border-radius:14px; overflow:hidden; } .vid-grid { grid-template-columns:repeat(2,1fr) !important; gap:16px !important; } .vid-card { border-radius:var(--r) !important; } .vid-card__frame { margin:10px 10px 0; border-radius:14px; } @media (max-width:1000px){ .merch-page .merch-grid { grid-template-columns:repeat(2,1fr) !important; } } @media (max-width:680px){ .merch-page .merch-grid, .vid-grid { grid-template-columns:1fr !important; } } /* 404 — Bell */ .e404-card__box { background:var(--surface); border:1px solid var(--border); border-radius:var(--r); padding:clamp(28px,5vw,56px); max-width:660px; margin:0 auto; text-align:center; } .e404-card__badge { display:inline-block; background:var(--accent-soft); color:var(--accent); font-weight:700; letter-spacing:.1em; padding:6px 16px; border-radius:999px; } .e404-card h1 { font-family:var(--font-disp); font-weight:700; font-size:clamp(28px,4vw,46px); color:var(--fg); margin:16px 0 10px; } .e404-card p { color:var(--fg-2); } .e404-card__links { display:flex; flex-wrap:wrap; justify-content:center; gap:10px; margin:24px 0 20px; } .e404-card__links a { background:var(--surface-2); border:1px solid var(--border); border-radius:999px; padding:11px 20px; color:var(--fg); text-decoration:none; min-height:46px; display:inline-flex; align-items:center; } .e404-card__links a:hover, .e404-card__links a:focus-visible { border-color:var(--accent); color:var(--accent); } .e404-card__call { font-size:15.5px; } .e404-card__call a { color:var(--accent); } /* ABOUT — plain tiles (Bell) */ .ab-plain__head { max-width:660px; margin-bottom:clamp(26px,4vw,44px); } .ab-plain__head h1 { font-family:var(--font-disp); font-weight:700; font-size:clamp(34px,5.2vw,62px); letter-spacing:-.025em; color:var(--fg); margin:8px 0 14px; } .ab-plain__lead { color:var(--fg-2); font-size:18px; line-height:1.75; } .ab-plain__tiles { display:grid; grid-template-columns:repeat(2,1fr); gap:16px; } .ab-tile { background:var(--surface); border:1px solid var(--border); border-radius:var(--r); padding:clamp(22px,3.2vw,34px); } .ab-tile h3 { font-family:var(--font-disp); font-size:21px; color:var(--fg); margin:0 0 8px; } .ab-tile p { margin:0; color:var(--fg-2); font-size:16px; } @media (max-width:800px){ .ab-plain__tiles { grid-template-columns:1fr; } } /* ════════ ALWAYS-ON REQUEST CONTROL (Bell) ════════ */ .askbar { position:fixed; z-index:70; left:12px; right:12px; bottom:12px; display:flex; gap:10px; } .askbar a, .askbar button { flex:1; display:inline-flex; align-items:center; justify-content:center; gap:9px; min-height:58px; border-radius:999px; font-size:16px; font-weight:600; border:1px solid var(--border); cursor:pointer; text-decoration:none; box-shadow:0 10px 26px -14px rgba(20,20,40,.45); } .askbar__call { background:var(--surface); color:var(--fg); } .askbar__ask { background:var(--accent); color:#fff; border-color:var(--accent); } .askbar__ask:hover, .askbar__ask:focus-visible { background:var(--accent-2); } @media (min-width:861px){ .askbar { left:auto; right:24px; bottom:24px; flex-direction:column; } .askbar a, .askbar button { min-width:220px; justify-content:flex-start; padding:0 22px; } } @media (max-width:860px){ body { padding-bottom:82px; } } /* ════════ INVENTORY — browse tiles (Bell) ════════ */ .md-browse__head { max-width:660px; margin-bottom:clamp(22px,3vw,36px); } .md-browse__head h1 { font-family:var(--font-disp); font-weight:700; font-size:clamp(32px,5vw,58px); letter-spacing:-.025em; color:var(--fg); margin:8px 0 12px; } .md-browse__head p { color:var(--fg-2); font-size:17px; } .md-browse__filter { display:grid; grid-template-columns:2fr 1fr 1fr auto; gap:12px; align-items:end; background:var(--surface); border:1px solid var(--border); border-radius:var(--r); padding:18px; margin-bottom:18px; } .md-browse__filter .form-field { margin:0; } .md-browse__tiles { display:grid; grid-template-columns:repeat(3,1fr); gap:16px; } .md-tile { background:var(--surface); border:1px solid var(--border); border-radius:var(--r); overflow:hidden; display:flex; flex-direction:column; box-shadow:0 2px 10px -6px rgba(20,20,40,.2); transition:transform .25s ease; } .md-tile:hover { transform:translateY(-3px); } .md-tile__shot { position:relative; display:block; aspect-ratio:16/10; margin:10px 10px 0; border-radius:14px; overflow:hidden; background:var(--surface-2); } .md-tile__shot img { width:100%; height:100%; object-fit:cover; } .md-tile__noshot { display:flex; align-items:center; justify-content:center; height:100%; color:var(--muted); font-size:13px; } .md-tile__flag { position:absolute; top:10px; left:10px; background:var(--accent); color:#fff; font-size:12px; font-weight:600; padding:4px 12px; border-radius:999px; } .md-tile__facts { padding:16px 20px 0; } .md-tile__top { display:flex; align-items:center; justify-content:space-between; gap:10px; } .md-tile__year { font-family:var(--font-body); font-style:italic; font-size:13px; color:var(--muted); } .md-tile__price { font-family:var(--font-disp); font-weight:700; font-size:14px; color:var(--accent); background:var(--accent-soft); padding:4px 10px; border-radius:var(--r-sm); white-space:nowrap; } .md-tile__name { display:block; margin-top:5px; font-family:var(--font-disp); font-weight:700; font-size:19px; color:var(--fg); text-decoration:none; } .md-tile__spec { list-style:none; margin:8px 0 0; padding:0; display:flex; flex-wrap:wrap; gap:4px 12px; font-size:14px; color:var(--fg-2); } .md-tile__foot { margin-top:auto; padding:14px 20px 18px; border-top:1px solid var(--border); display:flex; align-items:center; justify-content:space-between; gap:10px; } .md-tile__stock { font-family:var(--font-mono); font-size:11px; color:var(--muted); letter-spacing:0.02em; } .md-tile__ask { display:inline-flex; align-items:center; justify-content:center; padding:8px 14px; font-family:var(--font-body); font-weight:700; font-size:12px; letter-spacing:0.01em; border:1px solid var(--accent); background:transparent; color:var(--accent); border-radius:var(--r-sm); cursor:pointer; white-space:nowrap; transition:background .15s ease, color .15s ease; } .md-tile__ask:hover, .md-tile__ask:focus-visible { background:var(--accent); color:#fff; } .md-browse__empty { color:var(--fg-2); padding:40px 0; } .md-sold h2 { font-family:var(--font-disp); font-size:clamp(22px,2.8vw,32px); color:var(--fg); margin:0 0 6px; } .md-sold__sub { color:var(--fg-2); margin:0 0 18px; } .md-sold__chips { display:flex; flex-wrap:wrap; gap:10px; } .md-sold__chip { background:var(--surface-2); border:1px solid var(--border); border-radius:999px; padding:9px 18px; color:var(--fg-2); font-size:15px; } @media (max-width:1000px){ .md-browse__tiles { grid-template-columns:repeat(2,1fr); } } @media (max-width:820px){ .md-browse__filter { grid-template-columns:1fr 1fr; } } @media (max-width:640px){ .md-browse__tiles { grid-template-columns:1fr; } } /* ════════ INVENTORY GRID — four tiles across (Bell) ════════ */ .md-browse__tiles { grid-template-columns:repeat(4,1fr) !important; } .md-tile__name { font-size:17.5px !important; } .md-tile__price { font-size:13px !important; } .md-browse__empty { grid-column:1/-1; } @media (max-width:1280px){ .md-browse__tiles { grid-template-columns:repeat(3,1fr) !important; } } @media (max-width:900px){ .md-browse__tiles { grid-template-columns:repeat(2,1fr) !important; } } @media (max-width:600px){ .md-browse__tiles { grid-template-columns:1fr !important; } } /* ── Keep the always-on request control clear of the live-chat bubble, which sits at bottom-right 24px. On desktop the bar moves left of it; on phones the chat bubble lifts above the bar. ── */ @media (min-width:861px){ .askbar { right: 104px !important; } } @media (max-width:860px){ .lc-root { bottom: 82px !important; } } /* ── Motion: Bell — tiles lift into place with a small spring, matching the rounded bento language. ── */ .reveal, .reveal-item { opacity:0; transform:translateY(20px) scale(.985); transition:opacity .5s ease, transform .55s cubic-bezier(.34,1.4,.44,1); } .reveal.is-in, .reveal-item.is-in { opacity:1; transform:none; } .btn, .md-tile, .cm-card { transition:transform .22s cubic-bezier(.34,1.4,.44,1), background .22s ease, border-color .22s ease; } .btn:active { transform:scale(.97); } /* ════════ CAR DETAIL — Bell ════════ Rounded bento: gallery tile, spec tile, and a sticky action tile on the right. */ .md-detail { padding: clamp(26px,4vw,52px) 0 clamp(40px,6vw,80px); } .md-detail > .wrap { display:grid; grid-template-columns:1.5fr 1fr; gap: clamp(22px,3.5vw,36px); align-items:start; } /* Two explicit columns. Previously the title and every .md-block spanned the full width (grid-column 1/-1), so the specification table ran the width of the page with a large empty band to its right, and "About this car" was pushed far down. Gallery, title, spec and description now share one column beside the price panel; only the wide sections below still span. */ /* Explicit placement: gallery and the text column stack in column 1, the price panel occupies column 2 across both rows so position:sticky has the full height of the page to travel down. */ .md-gal { grid-column: 1; grid-row: 1; min-width: 0; } .md-main { grid-column: 1; grid-row: 2; min-width: 0; } /* The panel spans BOTH rows, which together now hold every section on the page (video and related cars moved into the main column). Previously those two sections sat outside the aside's row span, so the sticky panel came unstuck partway down and the reader lost the price and both buttons for the rest of the page. */ .md-side { grid-column: 2; grid-row: 1 / span 2; min-width: 0; /* The grid sets align-items:start, which shrinks this column to the height of the panel — leaving position:sticky nowhere to travel, so the price and the two contact buttons scrolled away as soon as you reached the spec table. Stretching the column gives the sticky panel the full run of the page. */ align-self: stretch; } .md-cartop { margin-top: clamp(18px,2.5vw,26px); } .md-cartop h1 { font-size: clamp(26px,3.4vw,42px); line-height:1.1; margin:0; } .md-flag { display:inline-block; margin-top:10px; background: var(--accent); color:#fff; font-size:14px; font-weight:700; padding:5px 14px; } /* Gallery */ .md-gal { } .md-gal__main { position:relative; aspect-ratio:16/9; overflow:hidden; background: var(--bg-2); border:1px solid var(--border); border-radius: var(--r); } .md-gal__main img { width:100%; height:100%; object-fit:cover; display:block; cursor:zoom-in; } .md-gal__nav { position:absolute; top:50%; transform:translateY(-50%); width:52px; height:52px; border:0; background: rgba(0,0,0,.62); color:#fff; font-size:30px; line-height:1; cursor:pointer; } .md-gal__nav--prev { left:0; } .md-gal__nav--next { right:0; } .md-gal__nav:hover, .md-gal__nav:focus-visible { background: var(--accent); } .md-gal__count { position:absolute; right:12px; bottom:12px; background: rgba(0,0,0,.72); color:#fff; font-family: var(--font-mono); font-size:13.5px; padding:5px 11px; border-radius: var(--r-sm); } .md-gal__strip { display:flex; overflow-x:auto; gap:10px; margin-top:10px; } .md-gal__thumb { flex:0 0 96px; aspect-ratio:4/3; padding:0; border:2px solid transparent; background:none; cursor:pointer; overflow:hidden; } .md-gal__thumb img { width:100%; height:100%; object-fit:cover; display:block; } .md-gal__thumb.is-active { border-color: var(--accent); } /* Conversion block — price, the two ways to make contact, and why to bother */ .md-ask { background: var(--surface); border:1px solid var(--border); padding: clamp(20px,3vw,28px); border-radius: var(--r); position:sticky; top:20px; box-shadow:0 8px 24px -18px rgba(20,20,40,.4); } .md-ask__price { font-family: var(--font-disp); font-size: clamp(30px,4vw,44px); line-height:1.05; color: var(--accent); margin-bottom:6px; } .md-ask__note { font-size:15.5px; color: var(--fg-2); margin:0 0 18px; } .md-ask .btn { margin-bottom:10px; } .md-ask__list { list-style:none; margin:16px 0 0; padding:16px 0 0; border-top:1px solid var(--border); } .md-ask__list li { position:relative; padding:6px 0 6px 26px; font-size:15.5px; color: var(--fg-2); } .md-ask__list li::before { content:'✓'; position:absolute; left:0; color: var(--accent); font-weight:700; } .md-ask__doc { display:inline-flex; align-items:center; min-height:44px; margin-top:10px; font-size:15.5px; } /* Blocks */ /* Blocks inside .md-main are normal flow; only the standalone ones below (video, related cars) still span both columns. */ .md-block { margin-top: clamp(22px,3vw,34px); } .md-detail > .wrap > .md-block { grid-column: 1/-1; } .md-block--first { margin-top: clamp(20px,2.6vw,28px); } .md-block h2 { font-size: clamp(22px,2.6vw,30px); margin:0 0 14px; padding-bottom:10px; border-bottom:1px solid var(--border); } .md-block p { color: var(--fg-2); } /* Specification */ .md-spec { width:100%; } table.md-spec { border-collapse:collapse; } table.md-spec th { text-align:left; font-weight:400; color: var(--muted); font-size:15.5px; padding:10px 18px 10px 0; width:150px; border-bottom:1px solid var(--border); vertical-align:top; } table.md-spec td { padding:10px 0; border-bottom:1px solid var(--border); font-size:17px; } dl.md-spec { display:grid; grid-template-columns:auto 1fr; gap:0 22px; margin:0; } dl.md-spec dt { color: var(--muted); font-size:15.5px; padding:10px 0; border-bottom:1px solid var(--border); } dl.md-spec dd { margin:0; padding:10px 0; font-size:17px; border-bottom:1px solid var(--border); } ul.md-spec { list-style:none; margin:0; padding:0; display:grid; grid-template-columns:repeat(auto-fit,minmax(160px,1fr)); gap:2px; } ul.md-spec li { padding:12px 0; border-bottom:1px solid var(--border); } ul.md-spec b { display:block; font-weight:400; font-size:13.5px; color: var(--muted); text-transform:uppercase; letter-spacing:.1em; } ul.md-spec span { font-size:17.5px; } /* Video + related */ .md-videos { display:grid; grid-template-columns:repeat(auto-fit,minmax(300px,1fr)); gap:16px; } .md-videos figure { margin:0; } .md-videos video, .md-videos iframe { width:100%; aspect-ratio:16/9; border:1px solid var(--border); background:#000; display:block; } .md-videos figcaption { margin-top:8px; font-size:15.5px; color: var(--fg-2); } .md-rel { display:grid; grid-template-columns:repeat(4,1fr); gap:14px; } .md-rel__item { text-decoration:none; border:1px solid var(--border); background: var(--surface); border-radius: var(--r); overflow:hidden; display:block; } .md-rel__item:hover, .md-rel__item:focus-visible { border-color: var(--accent); } .md-rel__item img { width:100%; aspect-ratio:4/3; object-fit:cover; display:block; } .md-rel__item span { display:block; padding:12px 14px 0; font-size:16px; color: var(--fg); } .md-rel__item b { display:block; padding:4px 14px 14px; color: var(--accent); font-size:16px; } /* Sticky bar */ .md-sticky { position:fixed; left:0; right:0; bottom:0; z-index:60; background: var(--surface); border-top:2px solid var(--accent); padding:10px 0; display:none; } .md-sticky.is-on { display:block; } .md-sticky .wrap { display:flex; align-items:center; gap:14px; flex-wrap:wrap; } .md-sticky__car { font-weight:700; color: var(--fg); } .md-sticky__price { font-family: var(--font-mono); color: var(--accent); margin-right:auto; } @media (max-width:980px){ .md-detail > .wrap { grid-template-columns:1fr; } /* Single column. Order comes out as gallery -> price panel -> title/specs, so a phone shows the car, then the price and the two ways to make contact, then the detail — without any reordering tricks. */ .md-gal, .md-main, .md-side { grid-column: 1; grid-row: auto; } .md-side { order: 1; } .md-main { order: 2; } .md-ask { position:static; } .md-rel { grid-template-columns:repeat(2,1fr); } } @media (max-width:560px){ .md-rel { grid-template-columns:1fr; } } /* ════════ SHOP / PARTS / FILMS — Bell ════════ */ .md-shop { padding: clamp(34px,5vw,68px) 0; } .md-shop__eyebrow { font-family: var(--font-mono); font-size:12.5px; letter-spacing:.2em; text-transform:uppercase; color: var(--accent); margin:0; } .md-shop__h { font-size: clamp(30px,4.4vw,52px); margin:8px 0 10px; } .md-shop__lead { color: var(--fg-2); font-size:18.5px; max-width:60ch; margin:0 0 clamp(24px,4vw,40px); } .md-shop__grid { display:grid; grid-template-columns:repeat(4,1fr); gap:16px; } .md-good { background: var(--surface); border:1px solid var(--border); display:flex; flex-direction:column; border-radius: var(--r); overflow:hidden; } .md-good:hover { border-color: var(--accent); } .md-good__img { position:relative; aspect-ratio:4/3; background: var(--bg-2); display:flex; align-items:center; justify-content:center; } .md-good__img img { width:100%; height:100%; object-fit:cover; display:block; } .md-good__img span { font-family: var(--font-disp); font-size:44px; color: var(--border-2); } .md-good__no { position:absolute; top:10px; left:10px; font-style:normal; background: var(--surface); border:1px solid var(--border); font-family: var(--font-mono); font-size:11.5px; padding:4px 10px; } .md-good__body { padding:16px 18px 0; display:flex; flex-direction:column; flex:1; } .md-good__body h2 { font-size:19px; margin:0 0 6px; } .md-good__body p { color: var(--fg-2); font-size:16px; margin:0 0 10px; } .md-good__fits b { font-weight:400; color: var(--muted); font-size:13.5px; text-transform:uppercase; letter-spacing:.1em; display:block; } .md-good__foot { margin-top:auto; padding:14px 0 18px; border-top:1px solid var(--border); display:flex; align-items:center; justify-content:space-between; gap:12px; flex-wrap:wrap; } .md-good__price { font-family: var(--font-disp); font-size:19px; color: var(--accent); } .md-films { display:grid; grid-template-columns:repeat(2,1fr); gap:16px; } .md-film { margin:0; background: var(--surface); border:1px solid var(--border); border-radius: var(--r); overflow:hidden; } .md-film__frame { aspect-ratio:16/9; background:#000; } .md-film__frame video, .md-film__frame iframe { width:100%; height:100%; border:0; display:block; } .md-film figcaption { padding:16px 18px 18px; } .md-film figcaption h2 { font-size:19px; margin:0 0 6px; } .md-film figcaption p { color: var(--fg-2); font-size:16px; margin:0 0 8px; } @media (max-width:1100px){ .md-shop__grid { grid-template-columns:repeat(2,1fr); } .md-films { grid-template-columns:1fr; } } @media (max-width:620px){ .md-shop__grid { grid-template-columns:1fr; } } /* ── Lookup + legal pages (Bell) ─────────────────────────────────── */ .md-lookup { padding: clamp(30px,5vw,60px) 0; } .md-lookup h1 { font-size: clamp(28px,4vw,46px); margin:0 0 10px; } .md-lookup__lead { color: var(--fg-2); font-size:18.5px; max-width:56ch; margin:0 0 26px; } .md-help { margin-top:28px; padding:22px; border:1px solid var(--border); background: var(--surface); border-left:3px solid var(--accent); border-radius: var(--r); } .md-help p { margin:0 0 14px; color: var(--fg-2); } .md-help__acts { display:flex; flex-wrap:wrap; gap:12px; margin:0 !important; } .md-legal { padding: clamp(30px,5vw,60px) 0; } .md-legal h1 { font-size: clamp(28px,4vw,46px); margin:0 0 6px; } .md-legal__kicker { font-family: var(--font-mono); font-size:12.5px; letter-spacing:.2em; text-transform:uppercase; color: var(--accent); margin:0 0 8px; } /* ── Recovery + legal capture (Bell) ───────────────────────────── A visitor who reaches a dead end (no matching car, a stale link, or the small print) is still a buyer. Each of these ends with a way to leave a name and a number rather than nothing at all. ── */ .md-wanted { padding: clamp(28px,4vw,52px) 0; background: var(--bg-2); border-top:1px solid var(--border); } .md-wanted h2 { font-size: clamp(24px,3vw,34px); margin:0 0 10px; } .md-wanted p { color: var(--fg-2); max-width:60ch; margin:0 0 22px; } .md-wanted__form { max-width:680px; } .md-wanted__row { display:grid; grid-template-columns:1fr 1fr; gap:16px; } .md-wanted__f { margin-bottom:16px; } .md-wanted__f .field-label { display:block; font-size:16.5px; font-weight:600; margin:0 0 7px; } .md-wanted__f .field-hint { display:block; margin-top:6px; font-size:15px; color: var(--fg-2); } @media (max-width:640px){ .md-wanted__row { grid-template-columns:1fr; } } .md-legalhelp { padding: clamp(22px,3vw,38px) 0; border-top:1px solid var(--border); } .md-legalhelp p { color: var(--fg-2); margin:0 0 14px; } .md-legalhelp__acts { display:flex; flex-wrap:wrap; gap:12px; margin:0 !important; } /* ── Car page layout fix ─────────────────────────────────────────────── Grid children default to min-width:auto, so a full-width button inside the action panel was widening its column and pushing the page sideways — the price and the buttons ran off the right of the screen. Constrain the children, and place the panel explicitly beside the photograph instead of letting it fall below the specification table. ── */ .md-detail > .wrap > * { min-width: 0; } .md-gal { grid-column: 1; grid-row: 1; } .md-ask { grid-column: 2; grid-row: 1; align-self: start; } .md-cartop { grid-column: 1 / -1; } .md-block { grid-column: 1 / -1; } .md-ask .btn { width: 100%; max-width: 100%; white-space: normal; text-align: center; line-height: 1.3; padding-inline: 16px; } .md-ask__price { overflow-wrap: anywhere; } @media (max-width: 980px) { .md-detail > .wrap { grid-template-columns: 1fr; } .md-gal, .md-ask, .md-cartop, .md-block { grid-column: 1 !important; grid-row: auto !important; } .md-ask { position: static !important; } } /* ── Sticky purchase bar vs the floating request control ─────────────── Both offer the same two actions, and on a car page they were landing on top of each other in the bottom-right corner. Once the sticky bar appears the floating control is redundant, so it steps aside. The bar also keeps clear of the live-chat bubble. ── */ body:has(.md-sticky.is-on) .askbar { display: none; } .md-sticky { padding-right: 0; } .md-sticky .wrap { padding-right: 84px; } /* clear of the chat bubble */ .md-sticky__car { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 46vw; } @media (max-width: 860px) { .md-sticky .wrap { padding-right: var(--gutter); gap: 10px; } .md-sticky__car { max-width: 100%; flex: 1 1 100%; } .md-sticky .btn { flex: 1 1 45%; } .lc-root { bottom: 92px !important; } } /* Older browsers without :has() — keep them usable by lifting the control. */ @supports not selector(:has(*)) { .md-sticky.is-on ~ .askbar, .askbar { bottom: 92px; } } /* ── Request control placement: tight to the edge, unless live chat is on and its bubble needs the corner. ── */ @media (min-width:861px){ .askbar { right:20px !important; bottom:20px; } body.chat-on .askbar { right:96px !important; } } /* Visually-hidden but readable by assistive tech. The site had no such utility; the trust band needs one so the rating is announced once, in full, without duplicating it visually. */ .sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap; border: 0; } /* ════════ REVIEW TRUST BAND (Bell) ═══════════════════════════════════════ Third-party ratings shown directly under the hero, where the hero's claim ("honest deals") most needs corroborating. Stays inside the existing token system: paper ground, white bento tiles, hairline borders, and the single cobalt accent — stars are cobalt rather than the reflexive amber so the page keeps to one hot colour. The score uses the display face at a size that can be read across a room; the "/5" denominator uses the mono face, matching how the rest of the site sets data rather than prose. ───────────────────────────────────────────────────────────────────────── */ .trust { padding: clamp(28px, 5vw, 48px) 0; border-bottom: 1px solid var(--border); } .trust__grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(210px, 1fr)); gap: 14px; } .trust__card { display: flex; flex-direction: column; gap: 10px; padding: 22px 22px 20px; background: var(--surface); border: 1px solid var(--border); border-radius: var(--r-sm); box-shadow: var(--shadow-sm); color: inherit; transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease; } /* Only the linked cards advertise interactivity. */ a.trust__card:hover, a.trust__card:focus-visible { transform: translateY(-2px); box-shadow: var(--shadow); border-color: var(--border-2); } .trust__score { display: flex; align-items: baseline; gap: 4px; font-family: var(--font-disp); font-weight: 700; font-size: 40px; line-height: 1; letter-spacing: -0.03em; } .trust__outof { font-family: var(--font-mono); font-size: 13px; font-weight: 400; letter-spacing: 0; color: var(--muted); } .trust__stars { --pct: 100%; position: relative; display: inline-block; /* Two things matter for the partial star to be truthful: 1. align-self — this sits in a flex column, which blockifies the inline-block and stretches it to the full card width. The 94% overlay would then span ~300px of mostly empty space and cover all five glyphs, rendering 4.7 as a solid 5. 2. no letter-spacing — trailing spacing is included in the track width, so the fill percentage would no longer map linearly onto the glyph run. */ align-self: flex-start; font-size: 17px; line-height: 1; /* Empty track, then a clipped cobalt overlay for the earned fraction — this is what lets 4.7 render as a genuinely partial fifth star rather than rounding up to five, which would misstate the rating. */ color: var(--border-2); } .trust__stars::before { content: '★★★★★'; } .trust__stars::after { content: '★★★★★'; position: absolute; inset: 0; width: var(--pct); overflow: hidden; white-space: nowrap; color: var(--accent); } .trust__src { font-family: var(--font-body); font-weight: 600; font-size: 14px; color: var(--fg); } .trust__go { font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--accent); } @media (max-width: 620px) { .trust__grid { grid-template-columns: 1fr 1fr; } .trust__score { font-size: 32px; } /* With an odd number of sources the last card would sit alone in a half-width column next to dead space. Let it run the full width instead. */ .trust__card:last-child:nth-child(odd) { grid-column: 1 / -1; } } @media (prefers-reduced-motion: reduce) { .trust__card { transition: none; } a.trust__card:hover, a.trust__card:focus-visible { transform: none; } } /* ════════ FLOATING CONTROLS — order and clearance ════════════════════════ Previously the live-chat bubble held the bottom-right corner and the Call / Ask pills were pushed sideways to right:96px to dodge it. They still collided: the bubble is 60px tall and overlapped the "Ask a question" pill, and the sideways shift left the pills floating oddly mid-edge. Swapped. The two actions that actually capture a lead now own the corner, and the chat launcher stacks above them on the same right edge — one tidy column instead of two overlapping anchors. Pill height 58px x2 + 10px gap = 126px, + 20px base + 14px breathing room. ───────────────────────────────────────────────────────────────────────── */ @media (min-width: 861px) { /* Corner belongs to the request controls now — no sideways dodge. */ .askbar, body.chat-on .askbar { right: 20px !important; bottom: 20px !important; } /* Chat launcher sits above the pills, aligned to the same edge. */ body.chat-on .lc-root { right: 20px !important; bottom: 160px !important; } } /* Phones: the request bar is full-width along the bottom, so the launcher lifts clear of it rather than sitting on top. */ @media (max-width: 860px) { body.chat-on .lc-root { right: 12px !important; bottom: 84px !important; } } /* When the sticky car bar is showing, the request bar hides (see rule above), so the launcher can drop back down to its normal resting place. */ body:has(.md-sticky.is-on) .lc-root { bottom: 20px !important; } /* ── While the lead dialog is open, hide the floating controls ──────────── The chat launcher carries a z-index in the billions (it is designed to sit above any host page), so it rendered over the dialog — on a phone it landed directly on top of the "Send my question" button. They are redundant routes to the same action while the form is open, so they simply go away. ── */ body:has(#leadModal.is-open) .lc-root, body:has(#leadModal.is-open) .askbar { display: none !important; } /* ── One-tap question chips ─────────────────────────────────────────────── A blank message box is where enquiries get abandoned. These prefill it in a single tap and stay fully editable afterwards. Sized to real thumb targets and allowed to wrap onto as many rows as they need. ── */ .chip-row { display: flex; flex-wrap: wrap; gap: 7px; margin: 2px 0 9px; } .chip { border: 1px solid var(--border-2); background: var(--surface); color: var(--fg-2); border-radius: 999px; padding: 8px 13px; font-size: 12.5px; font-weight: 500; line-height: 1.2; min-height: 34px; cursor: pointer; transition: background .15s ease, color .15s ease, border-color .15s ease; } .chip:hover { border-color: var(--accent); color: var(--accent); } .chip.is-on { background: var(--accent); border-color: var(--accent); color: #fff; } .chip:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; } @media (prefers-reduced-motion: reduce) { .chip { transition: none; } } /* The contact page reuses .form-hint under its phone/email pair. */ .ctc-m__form .form-hint { margin-top: -6px; } /* ── Page photo band ────────────────────────────────────────────────────── One reusable band used across financing / delivery / contact / about and twice on the homepage. Fixed aspect ratio with object-fit means a portrait and a landscape source both crop to the same shape instead of one of them blowing the page layout apart. ── */ .pic-band { padding: clamp(20px, 4vw, 44px) 0; } .pic-band--tight { padding-top: 0; } .pic-band__fig { margin: 0; position: relative; } .pic-band__img { width: 100%; /* 16:9 rather than 21:9. Several of these sources are portrait, and the wider letterbox cropped the car out entirely and left only sky. */ aspect-ratio: 16 / 9; object-fit: cover; /* Per-image focal point: portrait shots carry their subject low in frame, so a centred crop misses it. Set with --focus on the element. */ object-position: center var(--focus, 50%); display: block; border-radius: var(--r); border: 1px solid var(--border); box-shadow: var(--shadow); background: var(--bg-2); } .pic-band__cap { margin-top: 12px; font-size: 13.5px; color: var(--fg-2); line-height: 1.55; max-width: 62ch; } /* Two photos side by side on the homepage. */ .pic-duo { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; } .pic-duo .pic-band__img { aspect-ratio: 4 / 3; } @media (max-width: 720px) { .pic-duo { grid-template-columns: 1fr; } .pic-band__img { aspect-ratio: 16 / 10; } } /* Uploaded wordmark in the footer — capped so a wide logo cannot stretch the base row, and allowed to shrink on narrow screens. */ .ftr-b__mark img { max-height: 20px; width: auto; max-width: min(260px, 60vw); display: block; } /* Header wordmark: the supplied mark is very wide (949x57), so constrain by width as well as height or it crowds the nav on mid-size screens. */ .hdr-pill__mark img { max-height: 26px; max-width: min(230px, 42vw); object-fit: contain; } /* ── Long car description: collapse with a fade ─────────────────────────── Imported descriptions are often several hundred words of dealer boilerplate. Collapsed to roughly a screenful with a soft fade at the cut, so it reads as "there is more" rather than as an abrupt truncation. Pure CSS (a checkbox), so it works with JavaScript disabled. ── */ .md-desc { position: relative; } .md-desc__cb { position: absolute; opacity: 0; pointer-events: none; } .md-desc__text { white-space: pre-wrap; color: var(--fg-2); margin: 0; max-height: 20em; overflow: hidden; transition: max-height .28s ease; } /* Fade only while collapsed. */ .md-desc__text::after { content: ''; position: absolute; left: 0; right: 0; bottom: 2.4em; height: 5em; background: linear-gradient(to bottom, transparent, var(--bg)); pointer-events: none; } .md-desc__cb:checked ~ .md-desc__text { max-height: 400em; } .md-desc__cb:checked ~ .md-desc__text::after { content: none; } .md-desc__more { display: inline-flex; align-items: center; gap: 7px; margin-top: 12px; min-height: 44px; padding: 0 18px; border: 1px solid var(--border-2); border-radius: 999px; background: var(--surface); font-size: 14.5px; font-weight: 600; color: var(--accent); cursor: pointer; } .md-desc__more:hover { border-color: var(--accent); background: var(--accent-soft); } .md-desc__cb:focus-visible ~ .md-desc__more { outline: 2px solid var(--accent); outline-offset: 2px; } .md-desc__more--close { display: none; } .md-desc__cb:checked ~ .md-desc__more .md-desc__more--open { display: none; } .md-desc__cb:checked ~ .md-desc__more .md-desc__more--close { display: inline; } @media (prefers-reduced-motion: reduce) { .md-desc__text { transition: none; } } /* Related cars now live in the narrower main column, so three across is too tight — two reads better and keeps the thumbnails a usable size. */ .md-main .md-rel { grid-template-columns: repeat(2, 1fr); } @media (max-width: 560px) { .md-main .md-rel { grid-template-columns: 1fr; } }