/* * RGB Motors — Phase D-2 design system port. * Tokens + components, matching the Astro demo at rgbmotors.netlify.app. */ /* ─── Tokens ─────────────────────────────────────────────────────────── */ :root { /* RGB Motors v2 — sports identity. * Variable names (cognac / champagne) kept for backward compatibility, * but the values are now racing red. */ --color-canvas: 255 255 255; --color-paper: 255 255 255; --color-surface: 247 247 247; --color-surface-deep: 240 240 240; --color-ink: 16 16 16; --color-ink-soft: 64 64 64; --color-muted: 96 90 78; /* RGB-029 — darker for ≥7:1 contrast on cream */ --color-cognac: 219 5 3; /* racing red — primary accent */ --color-cognac-deep: 163 4 3; /* hover / pressed */ --color-champagne: 255 67 67; /* lighter red — used on dark backgrounds */ --color-hairline: 229 229 229; --color-hairline-strong: 212 212 212; --color-signal: 219 5 3; /* Hero veil — token-driven so it flips with theme */ --veil-strong: 255 255 255; /* near-opaque side of the hero gradient */ --veil-weak: 255 255 255; /* fade-out side of the hero gradient */ --font-display: 'Inter', system-ui, -apple-system, 'Segoe UI', sans-serif; --font-body: 'Inter', system-ui, -apple-system, 'Segoe UI', sans-serif; --font-mono: 'JetBrains Mono', ui-monospace, SFMono-Regular, monospace; --font-sport: 'Saira Condensed', 'Inter', system-ui, sans-serif; --font-script: 'Caveat', 'Brush Script MT', cursive; --gutter: clamp(1.25rem, 3vw, 2.5rem); --section: clamp(5rem, 9vw, 8rem); --section-sm: clamp(3rem, 6vw, 5rem); --container: 1440px; --ease-editorial: cubic-bezier(0.22, 0.61, 0.36, 1); /* Fixed-header clearance. The .site-header is position:fixed and its logo scales 64→72→84px across breakpoints (+ 1.5rem bar padding + 1px border). These values keep page hero chips clear of the header on every viewport with a comfortable buffer so font-load shifts never reintroduce the clip. */ --site-header-height: 6.5rem; } @media (min-width: 768px) { :root { --site-header-height: 7rem; } } @media (min-width: 1024px) { :root { --site-header-height: 8rem; } } /* ─── Dark mode token overrides ─────────────────────────────────────── */ /* Activated by html.theme-dark. Every component uses tokens, so flipping here cascades across the entire site without per-element overrides. */ html.theme-dark { --color-canvas: 0 0 0; /* pure black background */ --color-paper: 18 18 18; /* slight raise for cards/forms */ --color-surface: 26 26 26; --color-surface-deep: 36 36 36; --color-ink: 245 245 245; --color-ink-soft: 200 200 200; --color-muted: 140 140 140; --color-cognac: 219 5 3; /* brand red — same as light mode */ --color-cognac-deep: 163 4 3; --color-champagne: 219 5 3; --color-hairline: 40 40 40; --color-hairline-strong: 64 64 64; --veil-strong: 0 0 0; /* hero veil flips to pure black */ --veil-weak: 0 0 0; } body { transition: background-color 300ms var(--ease-editorial), color 300ms var(--ease-editorial); } /* No-transition guard. The boot script in adds .rgbm-no-transition to on every page load. We strip it on the next animation frame in the body script. This stops the initial light→dark colour swap from animating as a visible flash when navigating between pages. */ html.rgbm-no-transition, html.rgbm-no-transition *, html.rgbm-no-transition *::before, html.rgbm-no-transition *::after { transition: none !important; animation-duration: 0s !important; animation-delay: 0s !important; } /* ─── Reset ──────────────────────────────────────────────────────────── */ *, *::before, *::after { box-sizing: border-box; } html { -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; text-rendering: optimizeLegibility; scroll-behavior: smooth; } body { margin: 0; min-height: 100dvh; background: rgb(var(--color-canvas)); color: rgb(var(--color-ink)); font-family: var(--font-body); font-weight: 400; font-feature-settings: 'cv11', 'ss01', 'ss03'; line-height: 1.55; } ::selection { background: rgb(var(--color-cognac)); color: rgb(var(--color-paper)); } h1, h2, h3, h4 { font-family: var(--font-sport); color: rgb(var(--color-ink)); margin: 0; font-weight: 700; letter-spacing: 0; text-transform: uppercase; } h3, h4 { letter-spacing: 0.04em; } a { color: inherit; text-decoration: none; } img { max-width: 100%; display: block; } /* ─── Layout primitives ──────────────────────────────────────────────── */ .container-rgb { max-width: var(--container); margin-inline: auto; padding-inline: var(--gutter); } .section { padding-block: var(--section); } .section-sm { padding-block: var(--section-sm); } .section-divider { border-top: 1px solid rgb(var(--color-hairline)); } .eyebrow { font-family: var(--font-body); font-size: 0.7rem; letter-spacing: 0.22em; text-transform: uppercase; color: rgb(var(--color-cognac)); font-weight: 600; } .text-mono { font-family: var(--font-mono); font-size: 0.7rem; letter-spacing: 0.22em; text-transform: uppercase; color: rgb(var(--color-muted)); font-weight: 500; } .h-display { font-size: clamp(2.5rem, 7.5vw, 6.25rem); line-height: 0.96; letter-spacing: -0.045em; font-weight: 400; } .h-1 { font-size: clamp(2rem, 6vw, 3.5rem); line-height: 1.04; letter-spacing: -0.035em; font-weight: 400; } .h-2 { font-size: clamp(1.75rem, 5vw, 2.5rem); line-height: 1.05; letter-spacing: -0.03em; font-weight: 500; } .h-3 { font-size: clamp(1.35rem, 3.3vw, 1.65rem); line-height: 1.2; letter-spacing: -0.02em; font-weight: 500; } .h-4 { font-size: 1.25rem; line-height: 1.3; letter-spacing: -0.015em; font-weight: 500; } .accent-cognac { color: rgb(var(--color-cognac)); font-weight: 500; } .italic { font-style: italic; } /* ─── Buttons ────────────────────────────────────────────────────────── */ .btn-primary, .btn-ghost, .btn-light { display: inline-flex; align-items: center; gap: 0.6rem; font-size: 0.78rem; letter-spacing: 0.12em; text-transform: uppercase; font-weight: 600; border: 1px solid transparent; cursor: pointer; text-decoration: none; transition: all 320ms var(--ease-editorial); } .btn-primary { padding: 0.95rem 1.6rem; background: rgb(var(--color-ink)); color: rgb(var(--color-canvas)); } .btn-primary:hover { background: rgb(var(--color-cognac)); color: rgb(var(--color-paper)); transform: translateY(-1px); } .btn-ghost { padding: 0.85rem 1.4rem; border-color: rgb(var(--color-hairline-strong)); color: rgb(var(--color-ink)); background: transparent; font-weight: 500; } .btn-ghost:hover { border-color: rgb(var(--color-cognac)); color: rgb(var(--color-cognac)); transform: translateY(-1px); } .btn-light { padding: 0.95rem 1.6rem; background: rgb(var(--color-paper)); color: rgb(var(--color-ink)); border-color: rgb(var(--color-paper)); } .btn-light:hover { background: transparent; color: rgb(var(--color-paper)); transform: translateY(-1px); } .arrow-glyph { width: 12px; height: 12px; } /* RGB-026 — Properly hidden skip link, revealed on keyboard focus. */ .skip-link { position: absolute; left: -9999px; top: 0; z-index: 1000; background: rgb(var(--color-cognac)); color: #fff; padding: 0.65rem 1rem; font-weight: 600; text-decoration: none; border-radius: 0 0 4px 0; } .skip-link:focus { left: 0; outline: 2px solid rgb(var(--color-ink)); outline-offset: 2px; } /* RGB-066 — desktop phone CTA next to the Enquire button. */ .header-phone { display: none; font-family: var(--font-mono, ui-monospace, SFMono-Regular, Menlo, monospace); font-size: 0.78rem; letter-spacing: 0.05em; color: rgb(var(--color-ink)); text-decoration: none; white-space: nowrap; padding-inline: 0.5rem; } .header-phone:hover { color: rgb(var(--color-cognac)); } @media (min-width: 1024px) { .header-phone { display: inline-flex; align-items: center; gap: 0.25rem; } } /* ─── Header (light, white bg) ───────────────────────────────────────── */ .site-header { position: fixed; inset: 0 0 auto 0; z-index: 40; background: rgb(var(--color-canvas)); border-bottom: 1px solid rgb(var(--color-hairline)); } .site-header__bar { display: flex; align-items: center; justify-content: space-between; padding-block: 0.75rem; gap: 2rem; } .site-logo { display: flex; align-items: center; gap: 0.75rem; } .site-logo__img { height: 64px; width: auto; max-width: 280px; display: block; object-fit: contain; } @media (min-width: 768px) { .site-logo__img { height: 72px; max-width: 340px; } } @media (min-width: 1024px) { .site-logo__img { height: 84px; max-width: 400px; } } /* Show the right logo for the active theme. Both are rendered so neither flashes on toggle. */ .site-logo__img--light { display: block; } .site-logo__img--dark { display: none; } html.theme-dark .site-logo__img--light { display: none; } html.theme-dark .site-logo__img--dark { display: block; } .site-logo__mark { display: inline-grid; place-items: center; width: 2.25rem; height: 2.25rem; border: 1px solid rgb(var(--color-cognac)); border-radius: 999px; font-size: 1.1rem; font-weight: 500; color: rgb(var(--color-cognac)); line-height: 1; } .site-logo__wordmark { display: flex; flex-direction: column; line-height: 1.1; } .site-logo__name { font-weight: 500; letter-spacing: -0.01em; color: rgb(var(--color-ink)); } .site-logo__tagline { font-size: 0.62rem; letter-spacing: 0.22em; text-transform: uppercase; color: rgb(var(--color-ink-soft)); font-weight: 500; } .site-nav { display: none; gap: 2rem; } @media (min-width: 1024px) { .site-nav { display: flex; } } .site-nav a { font-family: var(--font-sport); font-size: 0.92rem; letter-spacing: 0.14em; text-transform: uppercase; font-weight: 700; color: rgb(var(--color-ink)); transition: color 250ms; } .site-nav a:hover { color: rgb(var(--color-muted)); } .site-nav ul { list-style: none; display: flex; gap: 2rem; padding: 0; margin: 0; } .site-header .btn-ghost { border-color: rgb(var(--color-ink)); color: rgb(var(--color-ink)); font-family: var(--font-sport); font-weight: 700; letter-spacing: 0.14em; text-transform: uppercase; } .site-header .btn-ghost:hover { border-color: rgb(var(--color-cognac)); color: rgb(var(--color-cognac)); } .menu-burger { color: rgb(var(--color-ink)); } /* theme-aware base */ /* Theme toggle (sun/moon) — sits in the header */ .theme-toggle { display: inline-flex; align-items: center; justify-content: center; width: 38px; height: 38px; padding: 0; background: transparent; border: 1px solid rgb(var(--color-hairline-strong)); color: rgb(var(--color-ink)); cursor: pointer; transition: border-color 200ms, color 200ms, background 200ms; } .theme-toggle:hover { border-color: rgb(var(--color-cognac)); color: rgb(var(--color-cognac)); } .theme-toggle__sun { display: none; } .theme-toggle__moon { display: block; } html.theme-dark .theme-toggle__sun { display: block; } html.theme-dark .theme-toggle__moon { display: none; } .header-cta { display: none; } @media (min-width: 640px) { .header-cta { display: inline-flex; } } .menu-burger { background: none; border: 0; cursor: pointer; padding: 0.5rem; margin-right: -0.5rem; color: rgb(var(--color-ink)); /* theme-aware: dark on light bg, light on dark bg */ display: inline-flex; } @media (min-width: 1024px) { .menu-burger { display: none; } } /* Header clearance. Value chosen to match the Journal page's spacing — the client confirmed Journal as the canonical visual target. Every standalone page now uses this same padding-top. Each hero section adds its own padding-block-top (2-3rem) on top. */ main { padding-top: clamp(2rem, 4vw, 3rem); } body.admin-bar main { padding-top: calc(clamp(2rem, 4vw, 3rem) + 32px); } @media (max-width: 782px) { body.admin-bar main { padding-top: calc(clamp(2rem, 4vw, 3rem) + 46px); } } /* ─── Mobile drawer ──────────────────────────────────────────────────── Locked to "always dark immersive overlay" with light text, regardless of light/dark site theme. Uses literal values (not theme tokens) so opening the drawer in light mode does not flip the colours. */ .mobile-drawer { position: fixed; inset: 0; width: 100%; height: 100dvh; z-index: 60; background: rgb(0 0 0); /* locked true black */ color: rgb(245 245 245); /* locked near-white */ display: none; } .mobile-drawer.is-open { display: block; } .mobile-drawer__inner { height: 100%; display: flex; flex-direction: column; min-height: 0; } .mobile-drawer__topbar { display: flex; align-items: center; justify-content: space-between; padding-block: 1.25rem; border-bottom: 1px solid rgba(255, 255, 255, 0.1); flex-shrink: 0; } /* Make sure the dark variant of the wordmark shows in the drawer, never the light one */ .mobile-drawer__topbar .site-logo__img--light { display: none !important; } .mobile-drawer__topbar .site-logo__img--dark { display: block !important; } .mobile-drawer__topbar .site-logo__name { color: rgb(245 245 245); } .mobile-drawer__topbar .site-logo__tagline { color: rgba(255, 255, 255, 0.55); } .mobile-drawer__close { background: none; border: 0; color: rgb(245 245 245); cursor: pointer; padding: 0.5rem; margin-right: -0.5rem; } /* Body scrolls inside available height. min-height:0 lets the flex child shrink correctly; padding-bottom respects iOS safe-area so the last row (the email link) is never clipped by the home indicator / bottom inset. */ .mobile-drawer__body { flex: 1 1 0; min-height: 0; overflow-y: auto; -webkit-overflow-scrolling: touch; padding-top: 2.5rem; padding-bottom: calc(3rem + env(safe-area-inset-bottom, 0px)); display: flex; flex-direction: column; } .mobile-drawer__eyebrow { display: flex; align-items: center; gap: 1rem; margin-bottom: 2rem; } .mobile-drawer__eyebrow span:first-child { width: 2.5rem; height: 1px; background: rgba(255, 255, 255, 0.4); } .mobile-drawer__eyebrow p { font-size: 0.62rem; letter-spacing: 0.22em; text-transform: uppercase; color: rgba(255, 255, 255, 0.55); font-weight: 600; margin: 0; } .mobile-nav { display: flex; flex-direction: column; } .mobile-nav a { display: flex; align-items: baseline; justify-content: space-between; padding-block: 1rem; border-bottom: 1px solid rgba(255, 255, 255, 0.1); color: rgb(245 245 245); transition: color 300ms; } .mobile-nav a:hover { color: rgba(255, 255, 255, 0.7); } .mobile-nav a span:first-child { font-size: clamp(1.75rem, 7vw, 2.5rem); letter-spacing: -0.02em; line-height: 1; } .mobile-nav a span:last-child { font-family: var(--font-mono); font-size: 0.6rem; color: rgba(255, 255, 255, 0.4); letter-spacing: 0.22em; text-transform: uppercase; } .mobile-nav a:hover span:last-child { color: rgba(255, 255, 255, 0.6); } .mobile-drawer__direct { margin-top: auto; padding-top: 3rem; } .mobile-drawer__direct .label { font-size: 0.62rem; letter-spacing: 0.22em; text-transform: uppercase; color: rgba(255, 255, 255, 0.4); font-weight: 600; margin-bottom: 1.25rem; display: block; } .mobile-drawer__phone { display: block; font-size: clamp(1.75rem, 7vw, 2.5rem); color: rgb(245 245 245); letter-spacing: -0.03em; line-height: 0.95; } .mobile-drawer__phone .accent { color: rgb(219 5 3); font-weight: 500; } .mobile-drawer__phone:hover { color: rgba(255, 255, 255, 0.75); } .mobile-drawer__email { display: inline-block; margin-top: 0.75rem; color: rgba(255, 255, 255, 0.75); } .mobile-drawer__email:hover { color: rgb(245 245 245); } /* Home page hero is full-bleed; the hero handles its own top spacing. */ main.home { padding-top: 0; } main.home .hero--sports { padding-top: calc(var(--site-header-height) + clamp(1rem, 3vw, 2rem)); } /* ─── Page hero / archive header ─────────────────────────────────────── */ .archive-hero { padding-block: clamp(3rem, 5vw, 4.5rem) clamp(2rem, 4vw, 3.5rem); } .archive-hero__rule { display: flex; align-items: center; gap: 1rem; margin-bottom: 2rem; flex-wrap: wrap; } .archive-hero__rule span:first-child { width: 2.5rem; height: 1px; background: rgb(var(--color-hairline-strong)); } .archive-hero__heading { font-family: var(--font-display); font-size: clamp(2.5rem, 8.5vw, 8.5rem); line-height: 0.9; letter-spacing: -0.05em; font-weight: 400; max-width: 16ch; } .archive-hero__heading .accent { color: rgb(var(--color-ink)); font-weight: 700; } /* Compact variant — used by /inventory/ where the short "Current Inventory." title doesn't need a display-scale 8.5rem heading. Roughly h1-page-scale. */ .archive-hero__heading--compact { font-size: clamp(2rem, 5vw, 3.25rem); line-height: 1.05; letter-spacing: -0.025em; font-weight: 600; max-width: none; } .archive-hero__intro { color: rgb(var(--color-ink-soft)); font-size: 1.125rem; line-height: 1.65; max-width: 38rem; margin-top: 1.5rem; } /* ─── Inventory grid ─────────────────────────────────────────────────── */ .inventory-grid { display: grid; grid-template-columns: 1fr; gap: 1.5rem; list-style: none; padding: 0; margin: 0; } @media (min-width: 640px) { .inventory-grid { grid-template-columns: repeat(2, 1fr); } } @media (min-width: 1024px) { .inventory-grid { grid-template-columns: repeat(3, 1fr); gap: 2rem; } } /* Vehicle card — sports identity. Bold titles, red price chip, sharp hover. */ .vehicle-card { position: relative; border: 1px solid rgb(var(--color-hairline)); background: rgb(var(--color-paper)); overflow: hidden; transition: transform 350ms cubic-bezier(0.2, 0.8, 0.2, 1), box-shadow 350ms ease, border-color 350ms ease; } .vehicle-card:hover { border-color: rgb(var(--color-hairline-strong)); box-shadow: 0 18px 40px -18px rgb(var(--color-ink) / 0.28), 0 8px 24px -12px rgb(var(--color-ink) / 0.18); transform: translateY(-4px); } .vehicle-card__media { position: relative; aspect-ratio: 16 / 10; overflow: hidden; display: block; background: rgb(var(--color-surface)); } .vehicle-card__media img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; transition: transform 700ms cubic-bezier(0.2, 0.8, 0.2, 1); } .vehicle-card:hover .vehicle-card__media img { transform: scale(1.06); } .vehicle-card__shade { /* Overlay removed — the card's hairline border + body-section seam does the visual separation. Kept the element so the positioned badges/overlay still stack correctly above the image. */ position: absolute; inset: 0; background: none; pointer-events: none; } /* Ink accent slash along the top edge — appears on hover */ .vehicle-card::before { content: ''; position: absolute; top: 0; left: 0; right: 0; height: 2px; background: rgb(var(--color-ink)); transform: scaleX(0); transform-origin: left; transition: transform 350ms cubic-bezier(0.2, 0.8, 0.2, 1); z-index: 3; } .vehicle-card:hover::before { transform: scaleX(1); } .vehicle-card__corner { position: absolute; top: 1rem; left: 1rem; right: 1rem; display: flex; align-items: flex-start; justify-content: space-between; z-index: 2; } /* Series tag (was country flag) — outlined glassy pill in the top-left corner */ .vehicle-card__tag { display: inline-flex; align-items: center; gap: 0.5rem; padding: 0.4rem 0.85rem; background: rgb(0 0 0 / 0.55); color: rgb(255 255 255 / 0.95); border: 1px solid rgb(255 255 255 / 0.15); backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px); font-family: var(--font-sport); font-size: 0.72rem; letter-spacing: 0.18em; text-transform: uppercase; font-weight: 800; line-height: 1; } /* Legacy class — keep for backward-compat on any pages still using it */ .vehicle-card__flag { display: inline-flex; align-items: center; gap: 0.5rem; padding: 0.4rem 0.75rem; background: rgb(var(--color-paper) / 0.95); backdrop-filter: blur(8px); font-family: var(--font-sport); font-size: 0.7rem; text-transform: uppercase; letter-spacing: 0.16em; font-weight: 700; color: rgb(var(--color-ink)); } .vehicle-card__badge { font-family: var(--font-sport); font-size: 0.72rem; text-transform: uppercase; letter-spacing: 0.14em; font-weight: 800; padding: 0.45rem 0.85rem; backdrop-filter: blur(8px); } .vehicle-card__badge--price { background: rgb(var(--color-cognac)); color: #ffffff; } .vehicle-card__badge--reserved { background: rgb(var(--color-paper) / 0.95); color: rgb(var(--color-cognac)); border: 1px solid rgb(var(--color-cognac)); } .vehicle-card__badge--sold { background: rgb(var(--color-ink) / 0.92); color: rgb(var(--color-paper)); } .vehicle-card__overlay { position: absolute; bottom: 1rem; right: 1rem; display: flex; align-items: flex-end; color: rgb(var(--color-paper)); z-index: 2; } .vehicle-card__index { font-family: var(--font-mono); font-size: 0.6rem; letter-spacing: 0.22em; text-transform: uppercase; opacity: 0.8; } .vehicle-card__open { font-family: var(--font-sport); font-size: 0.75rem; letter-spacing: 0.18em; text-transform: uppercase; font-weight: 700; opacity: 0; transform: translateX(-6px); transition: opacity 250ms ease, transform 250ms ease, color 250ms ease; display: inline-flex; align-items: center; gap: 0.4rem; } .vehicle-card:hover .vehicle-card__open { color: rgb(var(--color-paper)); opacity: 1; transform: translateX(0); } .vehicle-card__body { padding: 1.5rem 1.75rem 1.75rem; } .vehicle-card__topline { display: flex; align-items: baseline; justify-content: space-between; gap: 1rem; } .vehicle-card__eyebrow { font-family: var(--font-mono); font-size: 0.65rem; letter-spacing: 0.22em; text-transform: uppercase; color: rgb(var(--color-muted)); font-weight: 600; margin: 0; } .vehicle-card__title { font-family: var(--font-sport); font-size: 1.45rem; font-weight: 800; letter-spacing: 0.01em; text-transform: uppercase; line-height: 1.05; margin: 0.5rem 0 0; } .vehicle-card__title a { color: rgb(var(--color-ink)); transition: color 200ms; } .vehicle-card__title a:hover { color: rgb(var(--color-ink-soft)); } .vehicle-card__price { font-family: var(--font-sport); font-size: 1.4rem; font-weight: 800; color: rgb(var(--color-ink)); white-space: nowrap; letter-spacing: 0; } .vehicle-card__specs { display: grid; grid-template-columns: 1fr 1fr; gap: 0.65rem 1rem; margin-top: 1.5rem; font-size: 0.8125rem; padding-top: 1.2rem; border-top: 1px solid rgb(var(--color-hairline)); } .vehicle-card__specs dt { font-family: var(--font-mono); font-size: 0.62rem; letter-spacing: 0.14em; text-transform: uppercase; color: rgb(var(--color-muted)); font-weight: 500; } .vehicle-card__specs dd { margin: 0; text-align: right; color: rgb(var(--color-ink)); font-weight: 500; } .vehicle-card__footer { margin-top: 1.4rem; display: flex; align-items: center; justify-content: space-between; gap: 1rem; } .vehicle-card__footer-note { font-family: var(--font-mono); font-size: 0.65rem; letter-spacing: 0.18em; text-transform: uppercase; color: rgb(var(--color-muted)); } .vehicle-card__details-link { font-family: var(--font-sport); font-size: 0.8rem; font-weight: 700; letter-spacing: 0.14em; text-transform: uppercase; color: rgb(var(--color-ink)); display: inline-flex; align-items: center; gap: 0.45rem; padding: 0.5rem 0.85rem; border: 1px solid rgb(var(--color-hairline-strong)); transition: background 200ms, color 200ms, border-color 200ms; } .vehicle-card__details-link:hover { background: rgb(var(--color-ink)); color: rgb(var(--color-paper)); border-color: rgb(var(--color-ink)); } .vehicle-card__details-link { font-size: 0.8125rem; text-transform: uppercase; letter-spacing: 0.18em; font-weight: 600; color: rgb(var(--color-ink)); display: inline-flex; align-items: center; gap: 0.5rem; } .vehicle-card__details-link:hover { color: rgb(var(--color-paper)); } /* ─── Single vehicle page ────────────────────────────────────────────── */ .breadcrumb { display: flex; align-items: center; gap: 0.5rem; font-family: var(--font-mono); font-size: 0.7rem; letter-spacing: 0.22em; text-transform: uppercase; color: rgb(var(--color-muted)); margin-block: 2.5rem 0; } .breadcrumb a { color: rgb(var(--color-muted)); } .breadcrumb a:hover { color: rgb(var(--color-ink)); } .breadcrumb span:last-child { color: rgb(var(--color-cognac)); } /* The global `main { padding-top: var(--site-header-height) }` rule already clears the fixed header on every template. No extra padding needed here. */ .single-vehicle-page .breadcrumb { margin-block: 1.5rem 0; } .single-vehicle-page .breadcrumb .current { color: rgb(var(--color-ink)); } /* hero grid section */ .single-hero-section { padding-block: var(--section-sm); } .single-grid { display: grid; grid-template-columns: 1fr; gap: 2.5rem; } @media (min-width: 1024px) { .single-grid { grid-template-columns: 7fr 5fr; gap: 4rem; align-items: start; } } /* RGB-006 — When the meta card precedes the main column in DOM order (so the

beats the story

), preserve the visual main-left / aside-right layout with explicit grid placement on desktop, and an `order` swap on mobile so the image still appears above the meta. */ .single-grid--reversed { display: flex; flex-direction: column; gap: 2.5rem; } .single-grid--reversed .single-grid__main { order: 1; } .single-grid--reversed .single-grid__aside { order: 2; } @media (min-width: 1024px) { .single-grid--reversed { display: grid; grid-template-columns: 7fr 5fr; gap: 4rem; align-items: start; } .single-grid--reversed .single-grid__main { grid-column: 1; grid-row: 1; } .single-grid--reversed .single-grid__aside { grid-column: 2; grid-row: 1; } } /* LEFT col */ .single-grid__main { min-width: 0; } .single-hero { position: relative; aspect-ratio: 5 / 4; overflow: hidden; background: rgb(var(--color-surface)); border: 1px solid rgb(var(--color-hairline)); box-shadow: 0 40px 80px -40px rgb(var(--color-ink) / 0.22); margin: 0; } .single-hero img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; display: block; } .single-hero__shade { position: absolute; inset: 0; pointer-events: none; /* Literal black so the vignette darkens the image in both light and dark themes. Using --color-ink would invert to white in dark mode and create a white wash on the hero photo. */ background: linear-gradient(180deg, rgb(0 0 0 / 0.05) 0%, rgb(0 0 0 / 0) 50%, rgb(0 0 0 / 0.45) 100%); } .single-hero__caption { position: absolute; bottom: 1rem; left: 1.25rem; right: 1.25rem; display: flex; align-items: flex-end; justify-content: space-between; gap: 1rem; font-family: var(--font-mono); font-size: 0.65rem; letter-spacing: 0.22em; text-transform: uppercase; color: rgb(var(--color-paper) / 0.85); } /* Story under image */ .single-story { margin-top: 2.5rem; } .single-story__title { font-family: var(--font-display); font-size: clamp(1.75rem, 3.5vw, 2.75rem); line-height: 1.1; letter-spacing: -0.025em; font-weight: 400; margin-top: 0.75rem; color: rgb(var(--color-ink)); } .single-story__body { max-width: 38rem; margin-top: 2.5rem; } .single-story__body p { font-size: 1.05rem; line-height: 1.75; color: rgb(var(--color-ink-soft)); margin-bottom: 1.5rem; } /* RIGHT col — sticky meta card */ .single-grid__aside { min-width: 0; } @media (min-width: 1024px) { .single-grid__aside { position: sticky; top: 7rem; align-self: start; } } .single-meta { border: 1px solid rgb(var(--color-hairline)); background: rgb(var(--color-paper)); padding: 2rem; box-shadow: 0 30px 60px -30px rgb(var(--color-ink) / 0.15); } @media (min-width: 1024px) { .single-meta { padding: 2.5rem; } } .single-meta__head { display: flex; align-items: center; justify-content: space-between; gap: 1rem; } .single-meta__status { font-family: var(--font-mono); font-size: 0.65rem; letter-spacing: 0.22em; text-transform: uppercase; font-weight: 500; padding: 0.25rem 0.625rem; border: 1px solid; } .single-meta__status--reserved { color: rgb(var(--color-champagne)); border-color: rgb(var(--color-champagne)); } .single-meta__status--sold { color: rgb(var(--color-muted)); border-color: rgb(var(--color-muted)); } .single-meta__title { font-family: var(--font-display); font-size: clamp(2.25rem, 4.5vw, 3.25rem); line-height: 1; letter-spacing: -0.035em; font-weight: 400; margin-top: 1rem; color: rgb(var(--color-ink)); } .single-meta__price { font-family: var(--font-display); font-size: clamp(1.75rem, 3.5vw, 2.5rem); color: rgb(var(--color-cognac)); font-weight: 600; margin-top: 1.5rem; letter-spacing: -0.025em; } .single-meta__price-note { font-size: 0.75rem; color: rgb(var(--color-muted)); margin-top: 0.25rem; } .single-meta__list { margin: 2.5rem 0 0; padding: 0; display: flex; flex-direction: column; gap: 1rem; } .single-meta__row { display: flex; align-items: baseline; justify-content: space-between; gap: 1rem; padding-bottom: 0.75rem; border-bottom: 1px solid rgb(var(--color-hairline)); } .single-meta__row dt { font-family: var(--font-mono); font-size: 0.65rem; letter-spacing: 0.16em; text-transform: uppercase; color: rgb(var(--color-muted)); font-weight: 500; margin: 0; } .single-meta__row dd { margin: 0; text-align: right; color: rgb(var(--color-ink-soft)); font-size: 0.95rem; } .single-meta__cta { margin-top: 2rem; display: flex; flex-direction: column; gap: 0.75rem; } .single-meta__cta .btn-primary, .single-meta__cta .btn-ghost { justify-content: center; } .single-meta__disclaimer { margin-top: 2rem; font-size: 0.7rem; line-height: 1.55; color: rgb(var(--color-muted)); } /* ─── Gallery + Lightbox ─────────────────────────────────────────────── */ .single-gallery { padding-block: var(--section-sm); border-top: 1px solid rgb(var(--color-hairline)); } .gallery-header { display: flex; align-items: flex-end; justify-content: space-between; flex-wrap: wrap; gap: 1rem; margin-bottom: 3rem; } .gallery-header h2 { font-family: var(--font-display); font-size: clamp(2rem, 5vw, 3.25rem); line-height: 1.04; letter-spacing: -0.035em; font-weight: 400; margin-top: 0.75rem; color: rgb(var(--color-ink)); } .gallery-header h2 .count { color: rgb(var(--color-cognac)); font-weight: 600; } .gallery-header__lede { margin-top: 1rem; max-width: 28rem; color: rgb(var(--color-ink-soft)); font-size: 1rem; line-height: 1.65; } .gallery-header__tag { font-family: var(--font-mono); font-size: 0.7rem; letter-spacing: 0.22em; text-transform: uppercase; color: rgb(var(--color-muted)); } .gallery-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 0.75rem; } @media (min-width: 768px) { .gallery-grid { grid-template-columns: repeat(3, 1fr); } } @media (min-width: 1024px) { .gallery-grid { grid-template-columns: repeat(4, 1fr); gap: 1rem; } } .gallery-thumb { position: relative; aspect-ratio: 4 / 3; overflow: hidden; border: 1px solid rgb(var(--color-hairline)); background: rgb(var(--color-surface)); cursor: pointer; padding: 0; transition: border-color 500ms var(--ease-editorial); } .gallery-thumb:hover { border-color: rgb(var(--color-cognac)); } .gallery-thumb__shade { position: absolute; inset: 0; pointer-events: none; background: linear-gradient(180deg, transparent 60%, rgb(0 0 0 / 0.55) 100%); opacity: 0; transition: opacity 300ms; } .gallery-thumb:hover .gallery-thumb__shade { opacity: 1; } .gallery-thumb__num { position: absolute; bottom: 0.5rem; left: 0.625rem; font-family: var(--font-mono); font-size: 0.6rem; letter-spacing: 0.18em; text-transform: uppercase; color: rgb(var(--color-paper)); opacity: 0; transition: opacity 300ms; } .gallery-thumb:hover .gallery-thumb__num { opacity: 1; } .gallery-thumb img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; transition: transform 1200ms var(--ease-editorial); } .gallery-thumb:hover img { transform: scale(1.06); } .lightbox { position: fixed; inset: 0; z-index: 70; background: rgb(var(--color-ink) / 0.95); backdrop-filter: blur(12px); display: none; opacity: 0; transition: opacity 300ms; } .lightbox.is-open { display: block; opacity: 1; } .lightbox__img-wrap { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; padding: 3rem; } @media (min-width: 1024px) { .lightbox__img-wrap { padding: 5rem; } } .lightbox__img { max-width: 100%; max-height: 100%; object-fit: contain; } .lightbox__btn { position: absolute; z-index: 71; background: none; cursor: pointer; padding: 0.75rem; color: rgb(var(--color-paper) / 0.8); border: 1px solid rgb(var(--color-paper) / 0.2); transition: all 250ms; } .lightbox__btn:hover { color: rgb(var(--color-paper)); border-color: rgb(var(--color-paper)); } .lightbox__close { top: 1.25rem; right: 1.25rem; } .lightbox__prev { left: 0.75rem; top: 50%; transform: translateY(-50%); padding: 1rem; } .lightbox__next { right: 0.75rem; top: 50%; transform: translateY(-50%); padding: 1rem; } @media (min-width: 1024px) { .lightbox__close { top: 1.75rem; right: 1.75rem; } .lightbox__prev { left: 1.5rem; } .lightbox__next { right: 1.5rem; } } .lightbox__counter { position: absolute; top: 1.5rem; left: 1.5rem; z-index: 71; display: flex; align-items: center; gap: 0.75rem; font-family: var(--font-mono); font-size: 0.72rem; letter-spacing: 0.22em; text-transform: uppercase; color: rgb(var(--color-paper) / 0.85); } .lightbox__counter .rule { width: 3rem; height: 1px; background: rgb(var(--color-champagne)); } .lightbox__counter .label { color: rgb(var(--color-champagne)); } .lightbox__hint { position: absolute; bottom: 1.5rem; inset-inline: 0; text-align: center; z-index: 71; font-family: var(--font-mono); font-size: 0.7rem; letter-spacing: 0.16em; text-transform: uppercase; color: rgb(var(--color-paper) / 0.6); } /* ─── QuoteBand ──────────────────────────────────────────────────────── */ .quote-band { background: rgb(var(--color-canvas)); border-top: 1px solid rgb(var(--color-hairline)); position: relative; overflow: hidden; } .quote-band__inner { padding-block: 5rem; position: relative; } @media (min-width: 1024px) { .quote-band__inner { padding-block: 7rem; } } .quote-band__rule { display: flex; align-items: center; gap: 1rem; margin-bottom: 2.5rem; } .quote-band__rule span:first-child { width: 3rem; height: 1px; background: rgb(var(--color-hairline-strong)); } .quote-band__rule p { font-size: 0.7rem; letter-spacing: 0.22em; text-transform: uppercase; color: rgb(var(--color-muted)); font-weight: 600; margin: 0; } .quote-band__text { font-family: var(--font-display); font-size: clamp(2rem, 5.5vw, 4.75rem); line-height: 1.02; letter-spacing: -0.04em; color: rgb(var(--color-ink)); font-weight: 400; margin: 0; } .quote-band__text .marks { color: rgb(var(--color-muted)); font-weight: 500; } .quote-band__attribution { margin-top: 2.5rem; display: flex; align-items: center; gap: 1.25rem; flex-wrap: wrap; } .quote-band__attribution .from { font-family: var(--font-mono); font-size: 0.7rem; letter-spacing: 0.22em; text-transform: uppercase; color: rgb(var(--color-muted)); } .quote-band__attribution .rule { width: 2rem; height: 1px; background: rgb(var(--color-hairline)); } .quote-band__attribution .name { color: rgb(var(--color-ink)); font-weight: 600; font-size: 0.95rem; letter-spacing: -0.005em; } .quote-band__attribution .role { color: rgb(var(--color-muted)); font-size: 0.72rem; letter-spacing: 0.02em; margin-top: 0.15rem; } /* ─── Footer ─────────────────────────────────────────────────────────── */ .site-footer { color: rgb(var(--color-ink)); } .site-footer__dark { background: rgb(var(--color-canvas)); color: rgb(var(--color-ink)); } .site-footer__light { background: rgb(var(--color-canvas)); color: rgb(var(--color-ink)); border-top: 1px solid rgb(var(--color-hairline)); } .site-footer__inner { padding-block: 5rem 3rem; } .site-footer__top { display: grid; grid-template-columns: 1fr; gap: 2.5rem; padding-bottom: 0; } @media (min-width: 1024px) { .site-footer__top { grid-template-columns: 5fr 7fr; gap: 4rem; } } .site-footer__intro .eyebrow { color: rgb(var(--color-muted)); } .site-footer__intro h2 { font-family: var(--font-display); font-size: clamp(1.75rem, 5vw, 2.5rem); font-weight: 400; letter-spacing: -0.03em; margin-top: 1.25rem; max-width: 22ch; color: rgb(var(--color-ink)); } .site-footer__intro .btn-light { margin-top: 2rem; } .site-footer__cols { display: grid; grid-template-columns: 1fr; gap: 2.5rem; } @media (min-width: 640px) { .site-footer__cols { grid-template-columns: repeat(3, 1fr); } } .site-footer__cols h4 { font-size: 0.7rem; letter-spacing: 0.22em; text-transform: uppercase; color: rgb(var(--color-muted)); font-weight: 600; margin: 0 0 1.25rem; font-family: var(--font-body); } .site-footer__cols ul { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 0.75rem; } .site-footer__cols a { color: rgb(var(--color-ink-soft)); } .site-footer__cols a:hover { color: rgb(var(--color-ink)); } .site-footer__bottom { display: flex; flex-direction: column; gap: 1.5rem; padding-block: 2rem; } @media (min-width: 768px) { .site-footer__bottom { flex-direction: row; align-items: center; justify-content: space-between; } } .site-footer__copyright { display: flex; align-items: center; gap: 1rem; text-decoration: none; color: rgb(var(--color-ink)); } .site-footer__copyright .site-logo__mark { border-color: rgb(var(--color-ink)); color: rgb(var(--color-ink)); } .site-footer__logo-img { height: 64px; width: auto; max-width: 220px; display: block; object-fit: contain; } @media (min-width: 1024px) { .site-footer__logo-img { height: 72px; max-width: 260px; } } /* Dual-render: show light wordmark in light theme, dark wordmark in dark theme */ .site-footer__logo-img--light { display: block; } .site-footer__logo-img--dark { display: none; } html.theme-dark .site-footer__logo-img--light { display: none; } html.theme-dark .site-footer__logo-img--dark { display: block; } .site-footer__tagline { font-family: var(--font-mono); font-size: 0.68rem; letter-spacing: 0.2em; text-transform: uppercase; color: rgb(var(--color-muted)); font-weight: 500; } .site-footer__legal { display: flex; align-items: center; gap: 1.25rem; font-size: 0.8125rem; color: rgb(var(--color-muted)); } .site-footer__legal a { color: rgb(var(--color-ink-soft)); } .site-footer__legal a:hover { color: rgb(var(--color-ink)); } /* ─── Heading emphasis word ────────────────────────────────────────── Default: ink-strong bold (no colour shift). Red is reserved for the inventory marquee only — opt-in via .italic-accent--red. */ .italic-accent { color: rgb(var(--color-ink)); font-weight: 900; font-style: normal; } .italic-accent--red { color: rgb(var(--color-cognac)); } /* ─── Founder section ─────────────────────────────────────────────────── Personal anchor — Ralf's avatar, bio, cursive signature. */ .founder-section { padding-block: var(--section); background: rgb(var(--color-paper)); border-top: 1px solid rgb(var(--color-hairline)); border-bottom: 1px solid rgb(var(--color-hairline)); position: relative; overflow: hidden; } /* Top accent strip removed in restraint pass — section borders carry the edge. */ .founder-section__inner { max-width: 64ch; margin: 0 auto; text-align: left; } /* Avatar + byline row */ .founder-section__byline { display: flex; align-items: center; gap: 1.25rem; margin: 1.5rem 0 2rem; } .founder-section__avatar { display: inline-block; flex: 0 0 auto; width: 88px; height: 88px; border-radius: 50%; overflow: hidden; position: relative; background: rgb(var(--color-surface)); box-shadow: 0 0 0 1px rgb(var(--color-paper)), 0 0 0 2px rgb(var(--color-hairline-strong)); } @media (min-width: 768px) { .founder-section__avatar { width: 104px; height: 104px; } } .founder-section__avatar img { display: block; width: 100%; height: 100%; object-fit: cover; border-radius: 50%; } .founder-section__byline-text { display: inline-flex; flex-direction: column; gap: 0.25rem; min-width: 0; } .founder-section__byline-name { font-family: var(--font-sport); font-size: 1.25rem; font-weight: 800; letter-spacing: 0.01em; text-transform: uppercase; color: rgb(var(--color-ink)); line-height: 1; } .founder-section__byline-role { font-family: var(--font-mono); font-size: 0.66rem; letter-spacing: 0.22em; text-transform: uppercase; color: rgb(var(--color-muted)); } .founder-section__heading { font-family: var(--font-sport); font-size: clamp(2.25rem, 5.5vw, 3.75rem); line-height: 0.98; letter-spacing: 0; font-weight: 800; text-transform: uppercase; color: rgb(var(--color-ink)); margin: 0 0 1.75rem; } .founder-section__heading .accent { color: rgb(var(--color-ink)); } .founder-section__body { font-size: 1.05rem; line-height: 1.65; color: rgb(var(--color-ink-soft)); margin: 0 0 2.5rem; max-width: 56ch; } .founder-section__signoff { display: flex; align-items: center; gap: 1.25rem; flex-wrap: wrap; } .founder-section__signature { font-family: var(--font-script); font-size: clamp(2.25rem, 4.5vw, 3rem); font-weight: 700; color: rgb(var(--color-ink)); line-height: 1; transform: rotate(-2deg); transform-origin: left center; letter-spacing: -0.01em; } .founder-section__signature-rule { width: 2.5rem; height: 1px; background: rgb(var(--color-hairline-strong)); } .founder-section__signature-role { font-family: var(--font-mono); font-size: 0.66rem; letter-spacing: 0.24em; text-transform: uppercase; color: rgb(var(--color-muted)); } /* Dark-mode: keep avatar ring quiet (hairline-strong, same as light) */ html.theme-dark .founder-section { background: rgb(var(--color-paper)); } html.theme-dark .founder-section__avatar { box-shadow: 0 0 0 1px rgb(var(--color-paper)), 0 0 0 2px rgb(var(--color-hairline-strong)); } /* ─── Hero Slider ────────────────────────────────────────────────────── */ .hero-slider { padding-top: clamp(2rem, 4vw, 3rem); padding-bottom: 0; } .hero-slider__rule { display: flex; align-items: center; justify-content: space-between; gap: 1rem; margin-bottom: clamp(1rem, 2vw, 1.5rem); flex-wrap: wrap; } .hero-slider__rule > div { display: flex; align-items: center; gap: 1rem; flex-wrap: wrap; } .hero-slider__rule .rule { width: 2.5rem; height: 1px; background: rgb(var(--color-paper) / 0.45); display: inline-block; } .hero-slider__viewall { display: none; font-family: var(--font-mono); font-size: 0.65rem; letter-spacing: 0.22em; text-transform: uppercase; color: rgb(var(--color-muted)); align-items: center; gap: 0.5rem; } @media (min-width: 768px) { .hero-slider__viewall { display: inline-flex; } } .hero-slider__viewall:hover { color: rgb(var(--color-ink)); } .hero-slider__layout { display: grid; grid-template-columns: 1fr; gap: 2.5rem; } @media (min-width: 1024px) { .hero-slider__layout { grid-template-columns: 7fr 5fr; gap: 3rem; align-items: start; } } @media (min-width: 1280px) { .hero-slider__layout { gap: 4rem; } } .hero-slider__image-stack, .hero-slider__content-stack { display: grid; position: relative; } .hero-slide-image, .hero-slide-content { grid-area: 1 / 1; opacity: 0; transition: opacity 900ms var(--ease-editorial); pointer-events: none; margin: 0; } .hero-slide-image.is-active, .hero-slide-content.is-active { opacity: 1; pointer-events: auto; z-index: 2; } .hero-slide-content { display: flex; flex-direction: column; } .hero-slide__photo { position: relative; aspect-ratio: 4 / 3; overflow: hidden; background: rgb(var(--color-surface)); border: 1px solid rgb(var(--color-hairline)); box-shadow: 0 60px 120px -50px rgb(var(--color-ink) / 0.30); } .hero-slide__photo img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; transform: scale(1.03); transition: transform 8000ms var(--ease-editorial); } .hero-slide-image.is-active .hero-slide__photo img { transform: scale(1); } .hero-slide-image figcaption { margin-top: 0.75rem; display: flex; align-items: center; justify-content: space-between; font-family: var(--font-mono); font-size: 0.6rem; letter-spacing: 0.22em; text-transform: uppercase; color: rgb(var(--color-muted)); } .hero-slide__corner { position: absolute; width: 0.75rem; height: 0.75rem; mix-blend-mode: difference; border-color: rgb(var(--color-paper) / 0.6); pointer-events: none; } .hero-slide__corner--tl { top: 0.75rem; left: 0.75rem; border-top: 1px solid; border-left: 1px solid; } .hero-slide__corner--tr { top: 0.75rem; right: 0.75rem; border-top: 1px solid; border-right: 1px solid; } .hero-slide__corner--bl { bottom: 0.75rem; left: 0.75rem; border-bottom: 1px solid; border-left: 1px solid; } .hero-slide__corner--br { bottom: 0.75rem; right: 0.75rem; border-bottom: 1px solid; border-right: 1px solid; } .hero-slide-content { padding-block: 0.5rem; } .hero-slide__status { font-family: var(--font-mono); font-size: 0.72rem; letter-spacing: 0.24em; text-transform: uppercase; color: rgb(var(--color-cognac)); font-weight: 600; margin: 0; } .hero-slide__title-block { margin-top: clamp(2rem, 4vw, 2.5rem); } .hero-slide__year { font-family: var(--font-mono); font-size: 0.8125rem; letter-spacing: 0.2em; text-transform: uppercase; color: rgb(var(--color-muted)); margin: 0; } .hero-slide__title { font-family: var(--font-display); font-size: clamp(2.5rem, 5vw, 4.25rem); line-height: 0.95; letter-spacing: -0.045em; font-weight: 400; margin: 0.75rem 0 0; color: rgb(var(--color-ink)); } .hero-slide__title span { display: block; color: rgb(var(--color-cognac)); font-size: clamp(1.5rem, 3vw, 2.5rem); margin-top: 0.5rem; font-weight: 500; letter-spacing: -0.025em; } .hero-slide__dek { margin: 2rem 0 0; font-size: 1.15rem; line-height: 1.65; color: rgb(var(--color-ink-soft)); max-width: 32rem; } .hero-slide__specs { display: grid; grid-template-columns: repeat(2, 1fr); gap: 1.25rem 2rem; padding-block: 1.5rem; border-top: 1px solid rgb(var(--color-hairline)); border-bottom: 1px solid rgb(var(--color-hairline)); margin: clamp(2rem, 4vw, 2.5rem) 0 0; } .hero-slide__specs > div dt { font-size: 0.6rem; letter-spacing: 0.22em; text-transform: uppercase; color: rgb(var(--color-muted)); font-weight: 500; margin: 0; } .hero-slide__specs > div dd { margin: 0.4rem 0 0; font-size: 0.875rem; font-weight: 500; color: rgb(var(--color-ink)); letter-spacing: -0.005em; } .hero-slide__footer { margin-top: 1.5rem; display: flex; align-items: flex-end; justify-content: space-between; gap: 1.5rem; flex-wrap: wrap; } .hero-slide__asking-label { font-size: 0.6rem; letter-spacing: 0.22em; text-transform: uppercase; color: rgb(var(--color-muted)); font-weight: 500; margin: 0; } .hero-slide__price { font-family: var(--font-display); font-size: clamp(1.75rem, 3vw, 2.5rem); letter-spacing: -0.025em; font-weight: 600; color: rgb(var(--color-cognac)); margin: 0.4rem 0 0; line-height: 1; } .hero-slide__price-note { font-size: 0.7rem; color: rgb(var(--color-muted)); margin: 0.25rem 0 0; } .hero-slider__controls { margin-top: clamp(1.25rem, 2.5vw, 1.75rem); padding-top: 1.25rem; border-top: 1px solid rgb(var(--color-hairline)); display: flex; align-items: center; justify-content: space-between; gap: 1.5rem; flex-wrap: wrap; } .hero-slider__dots { display: flex; align-items: center; gap: 0.5rem; overflow-x: auto; scrollbar-width: none; flex: 1; min-width: 0; } .hero-slider__dots::-webkit-scrollbar { display: none; } .hero-dot { background: none; border: 0; cursor: pointer; display: flex; flex-direction: column; align-items: stretch; gap: 0.5rem; padding: 0.5rem 0.25rem; min-width: 80px; flex: 1; } .hero-dot__num { font-family: var(--font-mono); font-size: 0.6rem; letter-spacing: 0.2em; text-transform: uppercase; color: rgb(var(--color-muted)); transition: color 250ms; text-align: left; } .hero-dot:hover .hero-dot__num, .hero-dot.is-active .hero-dot__num { color: rgb(var(--color-ink)); } .hero-dot__line { display: block; height: 1px; width: 100%; background: rgb(var(--color-hairline)); position: relative; overflow: hidden; transition: background 250ms; } .hero-dot:hover .hero-dot__line { background: rgb(var(--color-hairline-strong)); } .hero-dot.is-active .hero-dot__line { background: rgb(var(--color-hairline-strong)); } .hero-dot__progress { position: absolute; inset: 0 auto 0 0; width: 0; background: rgb(var(--color-cognac)); } .hero-slider__nav { display: flex; align-items: center; justify-content: flex-end; gap: 0.5rem; flex-shrink: 0; } .hero-nav-btn { background: none; border: 1px solid rgb(var(--color-hairline-strong)); cursor: pointer; padding: 0.75rem; color: rgb(var(--color-ink-soft)); transition: all 250ms; } .hero-nav-btn:hover { border-color: rgb(var(--color-cognac)); color: rgb(var(--color-cognac)); } /* ─── Inventory Section (on homepage) ────────────────────────────────── */ .inventory-section { padding-top: clamp(2rem, 4vw, 3rem); padding-bottom: var(--section); } /* ─── Unified section-head pattern (sports) ─────────────────────────── .section-tag = red pill above heading .section-h2 = big Saira bold caps .section-lede = single short sentence below */ .section-tag { display: inline-flex; align-items: center; gap: 0.55rem; padding: 0.45rem 0.95rem 0.45rem 0.75rem; background: transparent; color: rgb(var(--color-ink)); border: 1px solid rgb(var(--color-hairline-strong)); font-family: var(--font-sport); font-size: 0.72rem; letter-spacing: 0.22em; text-transform: uppercase; font-weight: 800; margin-bottom: 1.25rem; } .section-tag::before { content: ''; width: 6px; height: 6px; border-radius: 50%; background: rgb(var(--color-cognac)); display: inline-block; flex: 0 0 auto; } .section-h2 { font-family: var(--font-sport); font-size: clamp(2.5rem, 6.5vw, 4.5rem); line-height: 0.98; letter-spacing: 0; font-weight: 800; text-transform: uppercase; color: rgb(var(--color-ink)); margin: 0; } .section-h2 .accent { color: rgb(var(--color-cognac)); } .section-lede { margin-top: 1.25rem; font-size: 1.05rem; line-height: 1.55; color: rgb(var(--color-ink-soft)); max-width: 44ch; } .section-meta { margin-top: 1rem; display: inline-flex; align-items: center; gap: 0.6rem; font-family: var(--font-mono); font-size: 0.7rem; letter-spacing: 0.18em; text-transform: uppercase; color: rgb(var(--color-muted)); } .section-meta::before { content: ''; width: 1.5rem; height: 1px; background: rgb(var(--color-hairline-strong)); display: inline-block; } .inventory-section__head { margin-bottom: clamp(2.5rem, 5vw, 3rem); max-width: 60rem; } .inventory-section__heading { font-family: var(--font-sport); font-size: clamp(2.5rem, 6.5vw, 4.5rem); line-height: 0.98; letter-spacing: 0; font-weight: 800; text-transform: uppercase; max-width: none; } .inventory-section__intro { margin-top: 1.25rem; } .inventory-section__intro p:first-child { font-size: 1.05rem; line-height: 1.55; color: rgb(var(--color-ink-soft)); margin: 0; max-width: 44ch; } .inventory-section__intro p:last-child { margin-top: 0.75rem; display: inline-flex; align-items: center; gap: 0.6rem; font-family: var(--font-mono); font-size: 0.7rem; letter-spacing: 0.18em; text-transform: uppercase; color: rgb(var(--color-muted)); } .inventory-section__intro p:last-child::before { content: ''; width: 1.25rem; height: 1px; background: rgb(var(--color-hairline-strong)); } /* Morph the legacy eyebrow+dash structure into the new outlined tag pill (matches .section-tag — outlined ink pill with single red dot leading). */ .inventory-section__eyebrow, .services-section__eyebrow, .contact-section__eyebrow { display: inline-flex; align-items: center; gap: 0.55rem; padding: 0.45rem 0.95rem 0.45rem 0.75rem; background: transparent; color: rgb(var(--color-ink)); border: 1px solid rgb(var(--color-hairline-strong)); margin-bottom: 1.25rem; } .inventory-section__eyebrow::before, .services-section__eyebrow::before, .contact-section__eyebrow::before { content: ''; width: 6px; height: 6px; border-radius: 50%; background: rgb(var(--color-cognac)); display: inline-block; flex: 0 0 auto; } .inventory-section__eyebrow span:first-child, .services-section__eyebrow span:first-child, .contact-section__eyebrow span:first-child { display: none; } .inventory-section__eyebrow .eyebrow, .services-section__eyebrow .eyebrow, .contact-section__eyebrow .eyebrow { display: inline-block; background: transparent; color: rgb(var(--color-ink)); font-family: var(--font-sport); font-size: 0.72rem; letter-spacing: 0.22em; text-transform: uppercase; font-weight: 800; margin: 0; line-height: 1; } .inventory-section__filter { margin-bottom: clamp(2.5rem, 4vw, 3rem); padding-block: 1.25rem; border-top: 1px solid rgb(var(--color-hairline)); border-bottom: 1px solid rgb(var(--color-hairline)); } .filter-strip { display: flex; align-items: center; gap: 0.5rem; overflow-x: auto; scrollbar-width: none; -webkit-overflow-scrolling: touch; } .filter-strip::-webkit-scrollbar { display: none; } .filter-pill { background: rgb(var(--color-paper)); border: 1px solid rgb(var(--color-hairline)); color: rgb(var(--color-ink-soft)); padding: 0.55rem 1rem; border-radius: 999px; font-size: 0.78rem; letter-spacing: 0.04em; font-weight: 500; white-space: nowrap; cursor: pointer; transition: all 250ms var(--ease-editorial); display: inline-flex; align-items: center; gap: 0.5rem; } .filter-pill:hover:not(:disabled) { border-color: rgb(var(--color-ink)); color: rgb(var(--color-ink)); } .filter-pill.is-active { background: rgb(var(--color-ink)); color: rgb(var(--color-paper)); border-color: rgb(var(--color-ink)); } .filter-pill:disabled { opacity: 0.4; cursor: not-allowed; } .filter-pill__count { font-family: var(--font-mono); font-size: 0.62rem; color: rgb(var(--color-muted)); } .filter-pill.is-active .filter-pill__count { color: rgb(var(--color-paper) / 0.6); } .inventory-section__foot { margin-top: clamp(2.5rem, 4vw, 3rem); padding-top: 2.5rem; border-top: 1px solid rgb(var(--color-hairline)); display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 1.25rem; } .inventory-section__foot p { margin: 0; font-family: var(--font-sport); font-size: 1.05rem; font-weight: 700; color: rgb(var(--color-ink)); letter-spacing: 0; text-transform: uppercase; } /* ─── Services Section ───────────────────────────────────────────────── */ .services-section { padding-block: var(--section); background: rgb(var(--color-surface)); border-top: 1px solid rgb(var(--color-hairline)); } .services-section__head { margin-bottom: clamp(2.5rem, 5vw, 3.5rem); max-width: 60rem; } .services-section__heading { font-family: var(--font-sport); font-size: clamp(2.5rem, 6.5vw, 4.5rem); line-height: 0.98; letter-spacing: 0; font-weight: 800; text-transform: uppercase; } .services-section__intro { margin-top: 1.25rem; font-size: 1.05rem; line-height: 1.55; color: rgb(var(--color-ink-soft)); max-width: 44ch; } .services-grid { display: grid; gap: 1px; background: rgb(var(--color-hairline)); border: 1px solid rgb(var(--color-hairline)); grid-template-columns: 1fr; } @media (min-width: 768px) { .services-grid { grid-template-columns: repeat(3, 1fr); } } .service-tile { position: relative; background: rgb(var(--color-canvas)); padding: 2rem 2.5rem; transition: background 350ms, transform 350ms, box-shadow 350ms; display: flex; flex-direction: column; border: 1px solid rgb(var(--color-hairline)); } .service-tile:hover { background: rgb(var(--color-paper)); transform: translateY(-3px); box-shadow: 0 18px 40px -18px rgb(var(--color-ink) / 0.25), 0 8px 20px -10px rgb(var(--color-ink) / 0.15); border-color: rgb(var(--color-hairline-strong)); } /* Red accent bar across the top of each tile — animates on hover */ .service-tile__bar { position: absolute; top: 0; left: 0; width: 48px; height: 4px; background: rgb(var(--color-cognac)); transition: width 350ms cubic-bezier(0.2, 0.8, 0.2, 1); } .service-tile:hover .service-tile__bar { width: 100%; } .service-tile__title { font-family: var(--font-sport); font-size: clamp(1.5rem, 3.3vw, 1.85rem); line-height: 1.05; letter-spacing: 0.01em; font-weight: 800; text-transform: uppercase; margin: 1.5rem 0 1.25rem; } .service-tile__body { font-size: 1rem; line-height: 1.6; color: rgb(var(--color-ink-soft)); flex: 1; } .service-tile__link { margin-top: 2rem; display: inline-flex; align-items: center; gap: 0.5rem; font-family: var(--font-sport); font-size: 0.85rem; letter-spacing: 0.16em; text-transform: uppercase; font-weight: 700; color: rgb(var(--color-ink)); align-self: flex-start; transition: gap 200ms, color 200ms; } .service-tile__link:hover { color: rgb(var(--color-ink-soft)); gap: 0.8rem; } /* ─── /services/ page modifiers ───────────────────────────────────────── 2-column grid (vs the homepage's 3-col), taller tiles with a number prefix and a bullet-list disciplines under the body copy. */ .services-section--page { background: rgb(var(--color-canvas)); } .services-grid--two { grid-template-columns: 1fr; } @media (min-width: 768px) { .services-grid--two { grid-template-columns: repeat(2, 1fr); } } .service-tile--detailed { padding: 2.5rem 2.5rem 3rem; } .service-tile__num { font-family: var(--font-mono, ui-monospace, SFMono-Regular, Menlo, monospace); font-size: 0.75rem; letter-spacing: 0.22em; text-transform: uppercase; color: rgb(var(--color-cognac)); margin: 0; } .service-tile--detailed .service-tile__title { margin-top: 0.75rem; } .service-tile__bullets { list-style: none; margin: 1.5rem 0 0; padding: 1.25rem 0 0; border-top: 1px solid rgb(var(--color-hairline)); display: grid; gap: 0.5rem; } .service-tile__bullets li { position: relative; padding-left: 1.25rem; font-size: 0.95rem; line-height: 1.5; color: rgb(var(--color-ink-soft)); } .service-tile__bullets li::before { content: ''; position: absolute; left: 0; top: 0.6rem; width: 8px; height: 1px; background: rgb(var(--color-cognac)); } /* ─── Contact Section ────────────────────────────────────────────────── */ .contact-section { padding-block: var(--section); border-top: 1px solid rgb(var(--color-hairline)); position: relative; } .contact-section__grid { display: grid; grid-template-columns: 1fr; gap: clamp(2.5rem, 5vw, 4rem); } @media (min-width: 1024px) { .contact-section__grid { grid-template-columns: 1fr 1fr; gap: 4rem; } } .contact-section__eyebrow { display: flex; align-items: center; gap: 1rem; margin-bottom: 1.5rem; } .contact-section__eyebrow span:first-child { width: 2.5rem; height: 1px; background: rgb(var(--color-hairline-strong)); display: inline-block; } .contact-section__heading { font-family: var(--font-sport); font-weight: 800; text-transform: uppercase; font-size: clamp(2.5rem, 6.5vw, 4.5rem); line-height: 0.96; letter-spacing: -0.045em; font-weight: 400; } .contact-section__lede { margin-top: 2rem; font-size: 1.15rem; line-height: 1.65; color: rgb(var(--color-ink-soft)); max-width: 32rem; } .contact-section__details { margin-top: 3rem; max-width: 22rem; } .contact-section__details > div { display: flex; align-items: baseline; justify-content: space-between; gap: 1rem; padding-block: 1rem; border-bottom: 1px solid rgb(var(--color-hairline)); } .contact-section__details > div:last-child { border-bottom: 0; } .contact-section__details dt { font-size: 0.65rem; letter-spacing: 0.22em; text-transform: uppercase; color: rgb(var(--color-muted)); font-weight: 500; margin: 0; } .contact-section__details dd { margin: 0; color: rgb(var(--color-ink-soft)); } .contact-section__details dd a:hover { color: rgb(var(--color-ink)); } .contact-form { border: 1px solid rgb(var(--color-hairline)); background: rgb(var(--color-paper)); padding: clamp(1.75rem, 4vw, 2.5rem); box-shadow: 0 18px 40px -20px rgb(var(--color-ink) / 0.12), 0 8px 24px -12px rgb(var(--color-ink) / 0.08); } .contact-form__row { display: grid; grid-template-columns: 1fr; gap: 1.25rem; } @media (min-width: 640px) { .contact-form__row { grid-template-columns: 1fr 1fr; } } .contact-form label { display: block; } .contact-form label > span:first-child { font-family: var(--font-sport); font-size: 0.72rem; letter-spacing: 0.2em; text-transform: uppercase; color: rgb(var(--color-ink)); font-weight: 700; } .contact-form input, .contact-form select, .contact-form textarea { margin-top: 0.55rem; width: 100%; background: rgb(var(--color-surface)); border: 1px solid rgb(var(--color-hairline)); padding: 0.75rem 0.9rem; font: inherit; color: rgb(var(--color-ink)); resize: none; transition: border-color 200ms, background 200ms, box-shadow 200ms; } .contact-form input:focus, .contact-form select:focus, .contact-form textarea:focus { outline: none; background: rgb(var(--color-paper)); border-color: rgb(var(--color-ink)); box-shadow: 0 0 0 3px rgb(var(--color-ink) / 0.08); } .contact-form input::placeholder, .contact-form textarea::placeholder { color: rgb(var(--color-muted)); } .contact-form__field { margin-top: 1.25rem; } .contact-form__foot { margin-top: 1.75rem; display: flex; align-items: center; justify-content: space-between; gap: 1rem; flex-wrap: wrap; } .contact-form__foot p { font-family: var(--font-mono); font-size: 0.65rem; letter-spacing: 0.14em; text-transform: uppercase; color: rgb(var(--color-muted)); max-width: 20rem; line-height: 1.5; margin: 0; } .contact-form button { cursor: pointer; } .contact-form button.btn-primary, .contact-form .btn-primary { background: rgb(var(--color-cognac)); color: #ffffff; border: 1px solid rgb(var(--color-cognac)); padding: 0.95rem 2rem; font-family: var(--font-sport); font-weight: 700; font-size: 0.9rem; letter-spacing: 0.16em; text-transform: uppercase; display: inline-flex; align-items: center; gap: 0.55rem; transition: background 200ms, transform 200ms; } .contact-form button.btn-primary:hover, .contact-form .btn-primary:hover { background: rgb(var(--color-cognac-deep)); border-color: rgb(var(--color-cognac-deep)); color: #ffffff; transform: translateY(-1px); } .contact-form button.btn-primary .arrow-glyph, .contact-form .btn-primary .arrow-glyph { color: #ffffff; } /* ─── Journal Index ──────────────────────────────────────────────────── */ /* ─── Journal ──────────────────────────────────────────────────────── Brand-aligned: section-tag pills, Saira sport headings, restrained palette (red only as marquee accent + CTAs). Long-form prose retains editorial typography for readability inside articles. */ /* Per-page padding-top now provided by the universal `main` rule. */ .journal-page { /* spacing inherited from main */ } .journal-masthead { padding-block: clamp(2rem, 3vw, 3rem) clamp(3rem, 5vw, 4rem); } .journal-masthead__grid { display: grid; grid-template-columns: 1fr; gap: clamp(2rem, 4vw, 3rem); align-items: end; margin-top: clamp(1.5rem, 3vw, 2rem); } @media (min-width: 1024px) { .journal-masthead__grid { grid-template-columns: 7fr 5fr; gap: clamp(3rem, 5vw, 5rem); } } .journal-masthead__heading { font-family: var(--font-sport); font-size: clamp(2.5rem, 8vw, 6.5rem); line-height: 0.94; letter-spacing: 0; font-weight: 800; text-transform: uppercase; color: rgb(var(--color-ink)); margin: 0; display: flex; flex-direction: column; } .journal-masthead__heading > span { display: block; } .journal-masthead__intro { display: flex; flex-direction: column; gap: 1.5rem; padding-bottom: 0.5rem; } .journal-masthead__intro p { margin: 0; font-size: 1.05rem; line-height: 1.65; color: rgb(var(--color-ink-soft)); } .journal-masthead__meta { font-family: var(--font-mono); font-size: 0.66rem; letter-spacing: 0.22em; text-transform: uppercase; color: rgb(var(--color-muted)) !important; font-weight: 600; } .journal-feature-wrap { padding-bottom: var(--section-sm); } .journal-feature { position: relative; display: block; aspect-ratio: 16 / 8; overflow: hidden; border: 1px solid rgb(var(--color-hairline)); box-shadow: 0 60px 120px -50px rgb(var(--color-ink) / 0.30); color: rgb(var(--color-paper)); } .journal-feature img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; transition: transform 1400ms var(--ease-editorial); } .journal-feature:hover img { transform: scale(1.04); } .journal-feature__shade { /* Hard-coded black vignette so the bottom always darkens for white caption text — independent of light/dark theme. */ position: absolute; inset: 0; background: linear-gradient(180deg, rgb(0 0 0 / 0.05) 0%, rgb(0 0 0 / 0) 30%, rgb(0 0 0 / 0.85) 100%); } .journal-feature__corner { position: absolute; top: 1.25rem; left: 1.25rem; right: 1.25rem; display: flex; align-items: center; justify-content: space-between; gap: 1rem; font-family: var(--font-mono); font-size: 0.62rem; letter-spacing: 0.22em; text-transform: uppercase; color: rgb(255 255 255 / 0.92); } .journal-feature__badge { display: inline-flex; align-items: center; gap: 0.4rem; padding: 0.4rem 0.85rem; background: rgb(0 0 0 / 0.55); color: rgb(255 255 255 / 0.95); border: 1px solid rgb(255 255 255 / 0.15); backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px); font-family: var(--font-sport); font-size: 0.66rem; letter-spacing: 0.2em; text-transform: uppercase; font-weight: 800; } .journal-feature__corner-meta { font-weight: 600; color: rgb(255 255 255 / 0.85); } .journal-feature__caption { position: absolute; bottom: 0; left: 0; right: 0; padding: clamp(1.5rem, 4vw, 3rem); color: rgb(255 255 255 / 0.95); } .journal-feature__meta { margin: 0; font-family: var(--font-mono); font-size: 0.66rem; letter-spacing: 0.22em; text-transform: uppercase; color: rgb(255 255 255 / 0.85); } .journal-feature__title { font-family: var(--font-sport); font-size: clamp(2rem, 5.5vw, 4.5rem); line-height: 0.98; letter-spacing: 0; font-weight: 800; text-transform: uppercase; margin: 1rem 0 0; max-width: 22ch; color: rgb(255 255 255 / 0.98); } .journal-feature__dek { font-size: 1.05rem; line-height: 1.55; margin: 1.25rem 0 0; color: rgb(255 255 255 / 0.85); max-width: 56ch; font-weight: 400; } .journal-feature__read { display: inline-flex; align-items: center; gap: 0.55rem; margin-top: 1.75rem; font-family: var(--font-sport); font-size: 0.78rem; letter-spacing: 0.18em; text-transform: uppercase; font-weight: 800; color: rgb(255 255 255); padding: 0.6rem 1rem; border: 1px solid rgb(255 255 255 / 0.3); transition: background 200ms, border-color 200ms; } .journal-feature:hover .journal-feature__read { background: rgb(255 255 255 / 0.12); border-color: rgb(255 255 255 / 0.6); } .journal-twoup { padding-block: var(--section-sm); border-bottom: 1px solid rgb(var(--color-hairline)); } .journal-twoup__grid { display: grid; grid-template-columns: 1fr; gap: 3rem; } @media (min-width: 1024px) { .journal-twoup__grid { grid-template-columns: 7fr 5fr; gap: 4rem; } } .journal-card { display: block; } .journal-card__media { margin: 0; position: relative; overflow: hidden; border: 1px solid rgb(var(--color-hairline)); aspect-ratio: 5 / 4; background: rgb(var(--color-surface)); } .journal-card--lead .journal-card__media { aspect-ratio: 4 / 3; } .journal-card__media img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; transition: transform 1200ms var(--ease-editorial); } .journal-card:hover .journal-card__media img { transform: scale(1.04); } .journal-card__shade { position: absolute; inset: 0; background: linear-gradient(180deg, transparent 55%, rgb(0 0 0 / 0.6) 100%); } .journal-card__media figcaption { position: absolute; bottom: 0.85rem; left: 1rem; right: 1rem; display: flex; align-items: center; justify-content: space-between; gap: 1rem; color: rgb(255 255 255 / 0.92); font-family: var(--font-mono); font-size: 0.6rem; letter-spacing: 0.22em; text-transform: uppercase; } .journal-card__body { margin-top: 1.5rem; } .journal-card__meta { margin: 0; font-family: var(--font-mono); font-size: 0.66rem; letter-spacing: 0.22em; text-transform: uppercase; color: rgb(var(--color-muted)); font-weight: 600; } .journal-card__title { font-family: var(--font-sport); font-size: clamp(1.35rem, 2.8vw, 1.85rem); line-height: 1.1; letter-spacing: 0.02em; font-weight: 800; text-transform: uppercase; color: rgb(var(--color-ink)); margin: 0.75rem 0 0; transition: color 250ms; } .journal-card--lead .journal-card__title { font-size: clamp(1.85rem, 5vw, 3rem); letter-spacing: 0; } .journal-card:hover .journal-card__title { color: rgb(var(--color-ink-soft)); } .journal-card__dek { font-size: 0.98rem; line-height: 1.6; color: rgb(var(--color-ink-soft)); margin: 1rem 0 0; max-width: 52ch; } .journal-card--lead .journal-card__dek { font-size: 1.05rem; } .journal-archive { padding-block: var(--section); background: rgb(var(--color-paper)); border-top: 1px solid rgb(var(--color-hairline)); border-bottom: 1px solid rgb(var(--color-hairline)); } .journal-archive__head { margin-bottom: clamp(2.5rem, 5vw, 3.5rem); } .journal-archive__heading { margin: 0.85rem 0 0; font-family: var(--font-sport); font-size: clamp(2rem, 5vw, 3.25rem); line-height: 0.98; letter-spacing: 0; font-weight: 800; text-transform: uppercase; color: rgb(var(--color-ink)); display: flex; flex-direction: column; } .journal-archive__heading > span { display: block; } .journal-archive__list { list-style: none; padding: 0; margin: 0; border-top: 1px solid rgb(var(--color-hairline)); border-bottom: 1px solid rgb(var(--color-hairline)); } .journal-archive__list li + li { border-top: 1px solid rgb(var(--color-hairline)); } .journal-archive__list a { display: grid; grid-template-columns: auto 1fr; gap: 1rem 2rem; align-items: center; padding: 1.5rem 0.5rem; transition: background 250ms; } @media (min-width: 1024px) { .journal-archive__list a { grid-template-columns: 1fr 8fr 3fr auto; padding: 1.75rem 1rem; } } .journal-archive__list a:hover { background: rgb(var(--color-canvas) / 0.5); } .journal-archive__list .num { font-family: var(--font-mono); font-size: 0.7rem; letter-spacing: 0.22em; text-transform: uppercase; color: rgb(var(--color-muted)); font-weight: 600; } .journal-archive__list .cat { font-family: var(--font-mono); font-size: 0.62rem; letter-spacing: 0.22em; text-transform: uppercase; color: rgb(var(--color-muted)); font-weight: 600; margin: 0; } .journal-archive__list h3 { font-family: var(--font-sport); font-size: clamp(1.15rem, 2.2vw, 1.55rem); font-weight: 800; letter-spacing: 0.02em; text-transform: uppercase; line-height: 1.15; margin: 0.45rem 0; color: rgb(var(--color-ink)); transition: color 200ms; } .journal-archive__list a:hover h3 { color: rgb(var(--color-ink-soft)); } .journal-archive__list .dek { font-size: 0.95rem; line-height: 1.55; color: rgb(var(--color-ink-soft)); margin: 0; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; } .journal-archive__list .date { display: none; } @media (min-width: 1024px) { .journal-archive__list .date { display: flex; flex-direction: column; align-items: flex-end; gap: 0.3rem; font-family: var(--font-mono); font-size: 0.62rem; letter-spacing: 0.22em; text-transform: uppercase; color: rgb(var(--color-muted)); font-weight: 600; } } .journal-archive__list .arrow { display: none; } @media (min-width: 1024px) { .journal-archive__list .arrow { display: inline-flex; align-items: center; justify-content: center; width: 2.5rem; height: 2.5rem; border: 1px solid rgb(var(--color-hairline-strong)); color: rgb(var(--color-ink)); transition: background 200ms, color 200ms, border-color 200ms; } } .journal-archive__list a:hover .arrow { background: rgb(var(--color-ink)); color: rgb(var(--color-paper)); border-color: rgb(var(--color-ink)); } .journal-newsletter { padding-block: var(--section); border-top: 1px solid rgb(var(--color-hairline)); } .journal-newsletter__grid { display: grid; grid-template-columns: 1fr; gap: clamp(2.5rem, 5vw, 4rem); align-items: start; } @media (min-width: 1024px) { .journal-newsletter__grid { grid-template-columns: 1fr 1fr; gap: 4rem; } } .journal-newsletter__heading { margin: 0.85rem 0 0; font-family: var(--font-sport); font-size: clamp(2rem, 5vw, 3.25rem); line-height: 0.98; letter-spacing: 0; font-weight: 800; text-transform: uppercase; color: rgb(var(--color-ink)); display: flex; flex-direction: column; } .journal-newsletter__heading > span { display: block; } .journal-newsletter__lede { font-size: 1.05rem; line-height: 1.65; color: rgb(var(--color-ink-soft)); margin: 1.75rem 0 0; max-width: 32rem; } .journal-newsletter__form { padding-top: 0.5rem; } /* ─── Journal Article (single post) ──────────────────────────────────── */ .journal-article-page { padding-top: clamp(2rem, 4vw, 3rem); } .journal-article__container { max-width: 64rem; margin-inline: auto; } .journal-article__header { padding-block: clamp(2rem, 4vw, 3rem) clamp(2rem, 4vw, 3.5rem); } .journal-article__header .breadcrumb { margin-block: 0 2rem; } .journal-article__tag { margin-bottom: 2rem; } .journal-article__title { font-family: var(--font-sport); font-size: clamp(2.5rem, 7.5vw, 6rem); line-height: 0.94; letter-spacing: 0; font-weight: 800; text-transform: uppercase; color: rgb(var(--color-ink)); margin: 0; max-width: 22ch; } .journal-article__dek { margin-top: 1.75rem; font-size: clamp(1.05rem, 1.5vw, 1.25rem); line-height: 1.55; color: rgb(var(--color-ink-soft)); max-width: 50rem; } .journal-article__byline { margin-top: 2.5rem; padding-top: 1.5rem; border-top: 1px solid rgb(var(--color-hairline)); display: flex; align-items: flex-end; justify-content: space-between; gap: 2rem; flex-wrap: wrap; } .byline-left { display: flex; align-items: center; gap: 1.25rem; } .byline-avatar { display: inline-grid; place-items: center; width: 3rem; height: 3rem; border: 1px solid rgb(var(--color-hairline-strong)); border-radius: 999px; font-family: var(--font-sport); font-size: 0.85rem; font-weight: 800; letter-spacing: 0.04em; color: rgb(var(--color-ink)); background: rgb(var(--color-surface)); } .byline-text { line-height: 1.3; } .byline-by { font-family: var(--font-mono); font-size: 0.6rem; letter-spacing: 0.22em; text-transform: uppercase; color: rgb(var(--color-muted)); font-weight: 600; margin: 0; } .byline-name { margin: 0.35rem 0 0; font-family: var(--font-sport); font-size: 0.95rem; font-weight: 800; letter-spacing: 0.02em; text-transform: uppercase; color: rgb(var(--color-ink)); } .byline-role { margin: 0.2rem 0 0; font-family: var(--font-mono); font-size: 0.62rem; letter-spacing: 0.18em; text-transform: uppercase; color: rgb(var(--color-muted)); } .byline-right { display: flex; gap: 2.25rem; flex-wrap: wrap; text-align: right; } .byline-fact { display: flex; flex-direction: column; align-items: flex-start; } @media (min-width: 640px) { .byline-fact { align-items: flex-end; } } .byline-label { font-family: var(--font-mono); font-size: 0.6rem; letter-spacing: 0.22em; text-transform: uppercase; color: rgb(var(--color-muted)); font-weight: 600; margin: 0; } .byline-val { margin: 0.35rem 0 0; font-family: var(--font-sport); font-size: 0.85rem; letter-spacing: 0.04em; text-transform: uppercase; font-weight: 800; color: rgb(var(--color-ink)); } .journal-article__cover { position: relative; } .journal-article__cover-img { position: relative; aspect-ratio: 16 / 9; overflow: hidden; border: 1px solid rgb(var(--color-hairline)); box-shadow: 0 60px 120px -50px rgb(var(--color-ink) / 0.30); } .journal-article__cover-img img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; } .journal-article__cover-caption { margin-top: 0.75rem; display: flex; align-items: center; justify-content: space-between; font-family: var(--font-mono); font-size: 0.65rem; letter-spacing: 0.22em; text-transform: uppercase; color: rgb(var(--color-muted)); } .journal-article__body { padding-block: var(--section); } .journal-prose { max-width: 38rem; margin-inline: auto; } .journal-prose > p, .journal-prose > .wp-block-paragraph p { font-size: 1.125rem; line-height: 1.75; color: rgb(var(--color-ink-soft)); margin-bottom: 1.75rem; } .journal-prose > p:first-child::first-letter, .journal-prose .wp-block-paragraph:first-of-type p::first-letter { font-family: var(--font-sport); font-size: 5.5rem; font-weight: 800; float: left; line-height: 0.82; margin-right: 0.75rem; margin-top: 0.25rem; color: rgb(var(--color-ink)); text-transform: uppercase; } .journal-prose h2, .journal-prose .wp-block-heading { font-family: var(--font-sport); font-size: clamp(1.55rem, 2.5vw, 2rem); font-weight: 800; letter-spacing: 0.02em; text-transform: uppercase; line-height: 1.15; margin: 3.5rem 0 1.5rem; color: rgb(var(--color-ink)); } .journal-prose .wp-block-pullquote { margin: 3rem 0; padding: 0; border: 0; border-left: 2px solid rgb(var(--color-hairline-strong)); padding-left: 1.5rem; background: transparent; text-align: left; } .journal-prose .wp-block-pullquote blockquote { margin: 0; } .journal-prose .wp-block-pullquote p { font-family: var(--font-display); font-size: clamp(1.4rem, 2.6vw, 2rem); line-height: 1.2; letter-spacing: -0.02em; font-weight: 500; color: rgb(var(--color-ink)); margin: 0; } .journal-prose .wp-block-pullquote p::before { content: '\201C'; color: rgb(var(--color-muted)); font-weight: 500; } .journal-prose .wp-block-pullquote p::after { content: '\201D'; color: rgb(var(--color-muted)); font-weight: 500; } .journal-prose .wp-block-pullquote cite { display: block; margin-top: 1.25rem; font-family: var(--font-mono); font-size: 0.7rem; letter-spacing: 0.22em; text-transform: uppercase; color: rgb(var(--color-muted)); font-style: normal; } .journal-prose .wp-block-pullquote cite::before { content: '— '; } .journal-prose .wp-block-image { margin: 3rem -8rem; max-width: none; } @media (max-width: 1100px) { .journal-prose .wp-block-image { margin-inline: -4rem; } } @media (max-width: 800px) { .journal-prose .wp-block-image { margin-inline: 0; } } .journal-prose .wp-block-image img { width: 100%; height: auto; border: 1px solid rgb(var(--color-hairline)); } .journal-prose .wp-block-image figcaption { margin-top: 0.75rem; font-family: var(--font-mono); font-size: 0.65rem; letter-spacing: 0.18em; text-transform: uppercase; color: rgb(var(--color-muted)); text-align: center; max-width: 38rem; margin-inline: auto; } .journal-author-bio { max-width: 50rem; margin: 5rem auto 0; padding-top: 2.5rem; border-top: 1px solid rgb(var(--color-hairline)); display: grid; grid-template-columns: auto 1fr; gap: 1.5rem; align-items: flex-start; } .journal-author-bio__avatar { width: 3.25rem; height: 3.25rem; font-size: 0.95rem; } .journal-author-bio__text { max-width: 38rem; } .journal-author-bio .label { font-family: var(--font-mono); font-size: 0.6rem; letter-spacing: 0.22em; text-transform: uppercase; color: rgb(var(--color-muted)); font-weight: 600; margin: 0; } .journal-author-bio .name { margin: 0.4rem 0 0; font-family: var(--font-sport); font-size: 1rem; letter-spacing: 0.04em; text-transform: uppercase; font-weight: 800; color: rgb(var(--color-ink)); } .journal-author-bio .body { font-size: 1rem; line-height: 1.65; color: rgb(var(--color-ink-soft)); margin: 1rem 0 1.5rem; } .journal-author-bio__back { display: inline-flex; align-items: center; gap: 0.55rem; font-family: var(--font-sport); font-size: 0.78rem; letter-spacing: 0.18em; text-transform: uppercase; font-weight: 800; color: rgb(var(--color-ink)); padding: 0.7rem 1.1rem; border: 1px solid rgb(var(--color-hairline-strong)); transition: background 200ms, color 200ms, border-color 200ms; } .journal-author-bio__back:hover { background: rgb(var(--color-ink)); color: rgb(var(--color-paper)); border-color: rgb(var(--color-ink)); } .journal-related { padding-block: var(--section); background: rgb(var(--color-paper)); border-top: 1px solid rgb(var(--color-hairline)); } .journal-related__head { margin-bottom: clamp(2.5rem, 5vw, 3.5rem); max-width: 50rem; } .journal-related__heading { margin: 0.85rem 0 0; font-family: var(--font-sport); font-size: clamp(2rem, 5vw, 3rem); line-height: 0.98; letter-spacing: 0; font-weight: 800; text-transform: uppercase; color: rgb(var(--color-ink)); display: flex; flex-direction: column; } .journal-related__heading > span { display: block; } .journal-related__grid { display: grid; grid-template-columns: 1fr; gap: 3rem; } @media (min-width: 768px) { .journal-related__grid { grid-template-columns: 1fr 1fr; gap: 3.5rem; } } .journal-related .journal-card__media { aspect-ratio: 16 / 9; } /* ─── About page ─────────────────────────────────────────────────────── */ /* Per-page padding-top now provided by the universal `main` rule. */ .about-page { /* spacing inherited from main */ } /* ─── About hero ───────────────────────────────────────────────────── Editorial split: section-tag → 2-line Saira headline → rule + meta → dek + sub-dek + facts table on the left, portrait feature image on the right. Mobile: content first, image stacks below at 16:10. */ .about-hero { padding-block: clamp(2rem, 3vw, 3rem) clamp(4rem, 7vw, 6rem); } .about-hero__grid { display: grid; grid-template-columns: 1fr; gap: clamp(2rem, 4vw, 3rem); align-items: start; } @media (min-width: 1024px) { .about-hero__grid { grid-template-columns: 7fr 5fr; gap: clamp(3rem, 5vw, 5rem); align-items: stretch; } } .about-hero__content { display: flex; flex-direction: column; } .about-hero__heading { font-family: var(--font-sport); font-size: clamp(2.5rem, 8vw, 6rem); line-height: 0.94; letter-spacing: 0; font-weight: 800; text-transform: uppercase; margin: 1.5rem 0 0; color: rgb(var(--color-ink)); display: flex; flex-direction: column; } .about-hero__heading > span { display: block; } .about-hero__rule { display: inline-flex; align-items: center; gap: 0.95rem; margin: 1.75rem 0 0; } .about-hero__rule-line { width: 2.5rem; height: 1px; background: rgb(var(--color-hairline-strong)); flex: 0 0 auto; } .about-hero__rule-text { font-family: var(--font-mono); font-size: 0.68rem; letter-spacing: 0.24em; text-transform: uppercase; color: rgb(var(--color-muted)); font-weight: 600; } .about-hero__dek { margin: 2rem 0 0; font-size: 1.05rem; line-height: 1.65; color: rgb(var(--color-ink-soft)); max-width: 40rem; } .about-hero__sub { margin: 1.25rem 0 0; font-size: 0.95rem; line-height: 1.65; color: rgb(var(--color-muted)); max-width: 40rem; } /* Facts row sits below the copy with a clear breathing gap. (Previously used `margin-top: auto` on desktop to pin to column bottom — that collapsed the visible gap when content was tall.) */ .about-hero__facts { margin: clamp(3rem, 6vw, 4.5rem) 0 0; display: grid; grid-template-columns: 1fr; gap: 0; border-top: 1px solid rgb(var(--color-hairline)); border-bottom: 1px solid rgb(var(--color-hairline)); } @media (min-width: 640px) { .about-hero__facts { grid-template-columns: repeat(3, 1fr); } } .about-hero__facts > div { padding: 1rem 0; border-bottom: 1px solid rgb(var(--color-hairline)); } .about-hero__facts > div:last-child { border-bottom: 0; } @media (min-width: 640px) { .about-hero__facts > div { padding: 1.25rem 1.25rem 1.25rem 0; border-bottom: 0; border-right: 1px solid rgb(var(--color-hairline)); } .about-hero__facts > div + div { padding-left: 1.25rem; } .about-hero__facts > div:last-child { border-right: 0; padding-right: 0; } } .about-hero__facts dt { font-family: var(--font-mono); font-size: 0.6rem; letter-spacing: 0.22em; text-transform: uppercase; color: rgb(var(--color-muted)); font-weight: 600; margin: 0; } .about-hero__facts dd { margin: 0.55rem 0 0; font-family: var(--font-sport); font-size: 0.82rem; letter-spacing: 0.04em; text-transform: uppercase; font-weight: 700; color: rgb(var(--color-ink)); } /* Portrait feature image — fills the right column on desktop, becomes a landscape feature below the content on mobile. */ .about-hero__feature { position: relative; margin: 0; overflow: hidden; background: rgb(var(--color-surface)); border: 1px solid rgb(var(--color-hairline)); box-shadow: 0 60px 120px -50px rgb(var(--color-ink) / 0.28); aspect-ratio: 16 / 10; } @media (min-width: 1024px) { .about-hero__feature { aspect-ratio: auto; height: 100%; min-height: 28rem; } } .about-hero__feature img, .about-hero__feature video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; transition: transform 700ms var(--ease-editorial); display: block; } .about-hero__feature:hover img, .about-hero__feature:hover video { transform: scale(1.02); } /* Video specifically — no audio UI, no controls, no rights-clickable */ .about-hero__video { pointer-events: none; background: rgb(var(--color-surface)); } .about-hero__feature figcaption { position: absolute; bottom: 1rem; left: 1.25rem; right: 1.25rem; display: flex; align-items: flex-end; justify-content: space-between; gap: 1rem; color: rgb(255 255 255 / 0.92); font-family: var(--font-mono); font-size: 0.62rem; letter-spacing: 0.22em; text-transform: uppercase; } /* ─── About stats ──────────────────────────────────────────────────── Big Saira numbers, mono labels. Theme-token border instead of surface. */ .about-stats { padding-block: clamp(2.5rem, 5vw, 3.5rem); border-top: 1px solid rgb(var(--color-hairline)); border-bottom: 1px solid rgb(var(--color-hairline)); background: transparent; } .about-stats__grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 2rem; } @media (min-width: 1024px) { .about-stats__grid { grid-template-columns: repeat(4, 1fr); gap: 3rem; } } .about-stats__grid > div + div { padding-left: 0; } @media (min-width: 1024px) { .about-stats__grid > div + div { border-left: 1px solid rgb(var(--color-hairline)); padding-left: 2.5rem; } } .about-stats__num { font-family: var(--font-sport); font-size: clamp(2.75rem, 6vw, 4.5rem); letter-spacing: 0; font-weight: 800; text-transform: uppercase; line-height: 0.95; margin: 0; color: rgb(var(--color-ink)); } .about-stats__lbl { margin-top: 0.85rem; font-family: var(--font-mono); font-size: 0.66rem; letter-spacing: 0.22em; text-transform: uppercase; color: rgb(var(--color-muted)); font-weight: 500; } /* ─── About index (Six disciplines, one practice.) ───────────────────── Sports headline, neutral list with muted numbering, no red. */ /* ─── About → The Path (founder narrative + timeline) ──────────────── */ .about-story { padding-block: var(--section); border-top: 1px solid rgb(var(--color-hairline)); border-bottom: 1px solid rgb(var(--color-hairline)); } .about-story__inner { max-width: 60rem; margin: 0 auto; } .about-story__heading { font-family: var(--font-sport); font-size: clamp(2rem, 5vw, 3.25rem); line-height: 1.05; letter-spacing: -0.02em; font-weight: 800; text-transform: uppercase; color: rgb(var(--color-ink)); margin: 1.25rem 0 2rem; } .about-story__heading > span { display: block; } .about-story__body p { font-size: 1.075rem; line-height: 1.7; color: rgb(var(--color-ink-soft)); margin: 0 0 1.25rem; } .about-story__body p:last-child { margin-bottom: 0; } .about-story__timeline { display: grid; grid-template-columns: 1fr; gap: 0.75rem 2rem; margin: 2.5rem 0 0; padding-top: 2rem; border-top: 1px solid rgb(var(--color-hairline)); } @media (min-width: 768px) { .about-story__timeline { grid-template-columns: repeat(3, 1fr); } } .about-story__timeline > div { padding-left: 0; border-left: 0; } @media (min-width: 768px) { .about-story__timeline > div + div { border-left: 1px solid rgb(var(--color-hairline)); padding-left: 1.5rem; } } .about-story__timeline dt { font-family: var(--font-sport); font-size: clamp(2.25rem, 4vw, 3rem); line-height: 1; letter-spacing: -0.01em; font-weight: 800; color: rgb(var(--color-cognac)); margin: 0 0 0.5rem; } .about-story__timeline dd { margin: 0; font-size: 0.8125rem; letter-spacing: 0.12em; text-transform: uppercase; color: rgb(var(--color-muted)); line-height: 1.5; } .about-index { padding-block: var(--section-sm); border-bottom: 1px solid rgb(var(--color-hairline)); } .about-index__grid { display: grid; grid-template-columns: 1fr; gap: 2.5rem; align-items: end; } @media (min-width: 1024px) { .about-index__grid { grid-template-columns: 5fr 7fr; gap: 4rem; } } .about-index__heading { font-family: var(--font-sport); font-size: clamp(2.25rem, 5.5vw, 3.75rem); line-height: 0.98; letter-spacing: 0; font-weight: 800; text-transform: uppercase; margin: 0; color: rgb(var(--color-ink)); display: flex; flex-direction: column; } .about-index__heading > span { display: block; } .about-index__list { list-style: none; padding: 0; margin: 0; display: grid; grid-template-columns: 1fr; gap: 0.75rem 2rem; } @media (min-width: 640px) { .about-index__list { grid-template-columns: repeat(2, 1fr); } } .about-index__list li { display: flex; align-items: baseline; gap: 0.75rem; padding: 0.65rem 0; border-bottom: 1px solid rgb(var(--color-hairline)); color: rgb(var(--color-ink-soft)); } .about-index__list .num { font-family: var(--font-mono); font-size: 0.65rem; letter-spacing: 0.22em; color: rgb(var(--color-muted)); font-weight: 600; } .about-index__list .text { font-family: var(--font-sport); font-size: 0.95rem; letter-spacing: 0.04em; text-transform: uppercase; font-weight: 700; color: rgb(var(--color-ink)); } /* ─── About: service blocks (Selling / Buying / Auction) ───────────── Two-column: feature image one side, content the other. Alternating. Section-tag pill on top, Saira sport heading, restrained palette. */ .about-service { padding-block: var(--section); } .about-service--alt { background: rgb(var(--color-paper)); border-top: 1px solid rgb(var(--color-hairline)); border-bottom: 1px solid rgb(var(--color-hairline)); } .about-service__grid { display: grid; grid-template-columns: 1fr; gap: 2.5rem; } @media (min-width: 1024px) { .about-service__grid { grid-template-columns: 6fr 6fr; gap: 5rem; align-items: start; } .about-service__grid--reversed .about-service__media { order: 2; } .about-service__grid--reversed .about-service__content { order: 1; } } .about-service__media figure { margin: 0; position: relative; aspect-ratio: 5 / 6; overflow: hidden; background: rgb(var(--color-surface)); border: 1px solid rgb(var(--color-hairline)); } .about-service__media img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; transition: transform 700ms var(--ease-editorial); } .about-service:hover .about-service__media img { transform: scale(1.02); } /* Service 03 is a landscape race-car shot — give it a landscape frame so the whole car shows without being cropped to a vertical slice. The content column is align-items: start so the height mismatch is fine. */ .about-service[data-service="03"] .about-service__media figure { aspect-ratio: 3 / 2; } .about-service[data-service="03"] .about-service__media img { object-position: center 55%; } .about-service__caption { margin: 0.85rem 0 0; display: flex; justify-content: space-between; gap: 1rem; flex-wrap: wrap; font-family: var(--font-mono); font-size: 0.62rem; letter-spacing: 0.22em; text-transform: uppercase; color: rgb(var(--color-muted)); } .about-service__content { display: flex; flex-direction: column; } @media (min-width: 1024px) { .about-service__content { padding-top: 1rem; } } .about-service__heading { font-family: var(--font-sport); font-size: clamp(2.25rem, 6vw, 3.75rem); line-height: 0.98; letter-spacing: 0; font-weight: 800; text-transform: uppercase; color: rgb(var(--color-ink)); margin: 0; display: flex; flex-direction: column; } .about-service__heading > span { display: block; } .about-service__lede { margin-top: 1.75rem; font-size: 1.05rem; line-height: 1.65; color: rgb(var(--color-ink-soft)); max-width: 36rem; } .about-service__body { margin-top: 1.25rem; font-size: 0.98rem; line-height: 1.65; color: rgb(var(--color-muted)); max-width: 36rem; } .about-service__pullquote { margin-top: 2rem; border-left: 2px solid rgb(var(--color-hairline-strong)); padding-left: 1.25rem; font-size: 1rem; line-height: 1.55; color: rgb(var(--color-ink)); font-style: normal; font-weight: 500; max-width: 36rem; } .about-service__factbox { margin: 2.5rem 0 0; display: grid; grid-template-columns: 1fr; gap: 0; border-top: 1px solid rgb(var(--color-hairline)); border-bottom: 1px solid rgb(var(--color-hairline)); } @media (min-width: 640px) { .about-service__factbox { grid-template-columns: repeat(3, 1fr); } } .about-service__factbox > div { padding: 1.1rem 0; border-bottom: 1px solid rgb(var(--color-hairline)); } .about-service__factbox > div:last-child { border-bottom: 0; } @media (min-width: 640px) { .about-service__factbox > div { padding: 1.25rem 1.25rem 1.25rem 0; border-bottom: 0; border-right: 1px solid rgb(var(--color-hairline)); } .about-service__factbox > div + div { padding-left: 1.25rem; } .about-service__factbox > div:last-child { border-right: 0; padding-right: 0; } } .about-service__factbox dt { font-family: var(--font-mono); font-size: 0.6rem; letter-spacing: 0.22em; text-transform: uppercase; color: rgb(var(--color-muted)); font-weight: 600; margin: 0; } .about-service__factbox dd { margin: 0.55rem 0 0; font-family: var(--font-sport); font-size: 0.82rem; letter-spacing: 0.04em; text-transform: uppercase; font-weight: 700; color: rgb(var(--color-ink)); } .about-service__cta { display: inline-flex; align-items: center; gap: 0.6rem; margin-top: 2.5rem; font-family: var(--font-sport); font-size: 0.78rem; letter-spacing: 0.18em; text-transform: uppercase; font-weight: 800; color: rgb(var(--color-ink)); padding: 0.7rem 1.1rem; border: 1px solid rgb(var(--color-hairline-strong)); align-self: flex-start; transition: background 200ms, color 200ms, border-color 200ms; } .about-service__cta:hover { background: rgb(var(--color-ink)); color: rgb(var(--color-paper)); border-color: rgb(var(--color-ink)); } /* ─── About: How It Works (4-step grid) ────────────────────────────── Service-tile pattern with thin top accent bar animating on hover. */ .about-howitworks { padding-block: var(--section); background: rgb(var(--color-paper)); border-top: 1px solid rgb(var(--color-hairline)); border-bottom: 1px solid rgb(var(--color-hairline)); } .about-howitworks__head { margin-bottom: clamp(2.5rem, 5vw, 3.5rem); max-width: 50rem; } .about-howitworks__heading { margin: 0.85rem 0 0; font-family: var(--font-sport); font-size: clamp(2.25rem, 5.5vw, 3.5rem); line-height: 0.98; letter-spacing: 0; font-weight: 800; text-transform: uppercase; color: rgb(var(--color-ink)); display: flex; flex-direction: column; } .about-howitworks__heading > span { display: block; } .about-howitworks__grid { display: grid; gap: 1px; background: rgb(var(--color-hairline)); border: 1px solid rgb(var(--color-hairline)); grid-template-columns: 1fr; } @media (min-width: 640px) { .about-howitworks__grid { grid-template-columns: repeat(2, 1fr); } } @media (min-width: 1024px) { .about-howitworks__grid { grid-template-columns: repeat(4, 1fr); } } .about-howitworks__tile { position: relative; background: rgb(var(--color-canvas)); padding: 2rem 2.25rem; min-height: 18rem; display: flex; flex-direction: column; transition: background 350ms, transform 350ms; } .about-howitworks__tile:hover { background: rgb(var(--color-paper)); transform: translateY(-2px); } .about-howitworks__bar { position: absolute; top: 0; left: 0; width: 40px; height: 3px; background: rgb(var(--color-cognac)); transition: width 350ms cubic-bezier(0.2, 0.8, 0.2, 1); } .about-howitworks__tile:hover .about-howitworks__bar { width: 100%; } .about-howitworks__num { font-family: var(--font-mono); font-size: 0.66rem; letter-spacing: 0.22em; text-transform: uppercase; color: rgb(var(--color-muted)); font-weight: 600; margin-top: 0.85rem; } .about-howitworks__title { font-family: var(--font-sport); font-size: 1.1rem; font-weight: 800; letter-spacing: 0.04em; text-transform: uppercase; color: rgb(var(--color-ink)); margin: 1.25rem 0 0; line-height: 1.15; } .about-howitworks__body { font-size: 0.95rem; line-height: 1.6; color: rgb(var(--color-ink-soft)); margin: 1rem 0 0; flex: 1; } /* ─── About: Support services (3-tile grid) ────────────────────────── Mirrors the homepage services-strip — section-tag + Saira heading. */ .about-support { padding-block: var(--section); border-top: 1px solid rgb(var(--color-hairline)); background: rgb(var(--color-canvas)); } .about-support__head { display: grid; grid-template-columns: 1fr; gap: 1.5rem 3rem; margin-bottom: clamp(2.5rem, 5vw, 3.5rem); } @media (min-width: 900px) { .about-support__head { grid-template-columns: 5fr 4fr; align-items: end; } } .about-support__heading { margin: 0.85rem 0 0; font-family: var(--font-sport); font-size: clamp(2.25rem, 5.5vw, 3.5rem); line-height: 0.98; letter-spacing: 0; font-weight: 800; text-transform: uppercase; color: rgb(var(--color-ink)); display: flex; flex-direction: column; } .about-support__heading > span { display: block; } .about-support__intro { font-size: 1rem; line-height: 1.65; color: rgb(var(--color-ink-soft)); max-width: 32rem; margin: 0; } .about-support__grid { display: grid; gap: 1px; background: rgb(var(--color-hairline)); border: 1px solid rgb(var(--color-hairline)); grid-template-columns: 1fr; } @media (min-width: 768px) { .about-support__grid { grid-template-columns: repeat(3, 1fr); } } .about-support__tile { position: relative; background: rgb(var(--color-paper)); padding: 2.25rem 2.5rem; min-height: 22rem; display: flex; flex-direction: column; transition: background 350ms, transform 350ms, box-shadow 350ms; } .about-support__tile:hover { background: rgb(var(--color-canvas)); transform: translateY(-3px); box-shadow: 0 18px 40px -18px rgb(var(--color-ink) / 0.18), 0 8px 20px -10px rgb(var(--color-ink) / 0.10); } .about-support__bar { position: absolute; top: 0; left: 0; width: 48px; height: 3px; background: rgb(var(--color-cognac)); transition: width 350ms cubic-bezier(0.2, 0.8, 0.2, 1); } .about-support__tile:hover .about-support__bar { width: 100%; } .about-support__num { font-family: var(--font-mono); font-size: 0.66rem; letter-spacing: 0.22em; text-transform: uppercase; color: rgb(var(--color-muted)); font-weight: 600; margin-top: 0.85rem; } .about-support__title { font-family: var(--font-sport); font-size: clamp(1.4rem, 3vw, 1.7rem); font-weight: 800; letter-spacing: 0.04em; text-transform: uppercase; color: rgb(var(--color-ink)); margin: 1.5rem 0 0; line-height: 1.15; } .about-support__body { font-size: 0.98rem; line-height: 1.65; color: rgb(var(--color-ink-soft)); margin: 1.5rem 0 0; flex: 1; } .about-support__link { display: inline-flex; align-items: center; gap: 0.55rem; margin-top: 2rem; font-family: var(--font-sport); font-size: 0.78rem; letter-spacing: 0.18em; text-transform: uppercase; font-weight: 800; color: rgb(var(--color-ink)); align-self: flex-start; transition: gap 200ms, color 200ms; } .about-support__link:hover { color: rgb(var(--color-ink-soft)); gap: 0.85rem; } /* ─── About: Direct line (closing) ─────────────────────────────────── Section-tag, sport heading, big Saira phone, details panel + CTA. */ .about-directline { padding-block: var(--section); border-top: 1px solid rgb(var(--color-hairline)); background: rgb(var(--color-canvas)); } .about-directline__head { margin-bottom: clamp(2.5rem, 5vw, 3.5rem); } .about-directline__heading { margin: 0.85rem 0 0; font-family: var(--font-sport); font-size: clamp(2.25rem, 5.5vw, 3.5rem); line-height: 0.98; letter-spacing: 0; font-weight: 800; text-transform: uppercase; color: rgb(var(--color-ink)); display: flex; flex-direction: column; } .about-directline__heading > span { display: block; } .about-directline__grid { display: grid; grid-template-columns: 1fr; gap: 3rem; align-items: start; } @media (min-width: 1024px) { .about-directline__grid { grid-template-columns: 7fr 5fr; gap: 4rem; } } .about-directline__phone-wrap { border-top: 1px solid rgb(var(--color-hairline)); border-bottom: 1px solid rgb(var(--color-hairline)); padding-block: clamp(2rem, 4vw, 3rem); } .about-directline__phone-label { margin: 0 0 1.25rem; font-family: var(--font-mono); font-size: 0.66rem; letter-spacing: 0.22em; text-transform: uppercase; color: rgb(var(--color-muted)); font-weight: 600; } .about-directline__phone { display: block; font-family: var(--font-sport); font-size: clamp(2.75rem, 9vw, 7rem); color: rgb(var(--color-ink)); line-height: 0.92; letter-spacing: 0; font-weight: 800; text-transform: uppercase; transition: color 300ms; } .about-directline__phone > span { display: block; } .about-directline__phone:hover { color: rgb(var(--color-ink-soft)); } .about-directline__panel { display: flex; flex-direction: column; } .about-directline__details { display: flex; flex-direction: column; gap: 0; margin: 0; } .about-directline__details > div { padding-block: 1.1rem; border-bottom: 1px solid rgb(var(--color-hairline)); display: flex; align-items: baseline; justify-content: space-between; gap: 1rem; flex-wrap: wrap; } .about-directline__details > div:first-child { border-top: 1px solid rgb(var(--color-hairline)); } .about-directline__details dt { font-family: var(--font-mono); font-size: 0.62rem; letter-spacing: 0.22em; text-transform: uppercase; color: rgb(var(--color-muted)); font-weight: 600; margin: 0; } .about-directline__details dd { margin: 0; font-family: var(--font-sport); font-size: 0.9rem; letter-spacing: 0.04em; text-transform: uppercase; font-weight: 700; color: rgb(var(--color-ink)); text-align: right; } .about-directline__details dd a { color: rgb(var(--color-ink)); } .about-directline__details dd a:hover { color: rgb(var(--color-ink-soft)); } .about-directline__social { display: flex; align-items: center; gap: 0.5rem; } .about-directline__social a { display: inline-flex; align-items: center; justify-content: center; width: 2.25rem; height: 2.25rem; border: 1px solid rgb(var(--color-hairline-strong)); color: rgb(var(--color-ink-soft)); font-family: var(--font-mono); font-size: 0.6rem; font-weight: 700; letter-spacing: 0.05em; transition: background 200ms, color 200ms, border-color 200ms; } .about-directline__social a:hover { background: rgb(var(--color-ink)); color: rgb(var(--color-paper)); border-color: rgb(var(--color-ink)); } .about-directline__btn { margin-top: 2rem; width: 100%; justify-content: center; } /* ─── Sold (Previously Sold archive) ─────────────────────────────────── */ /* ─── Sold (Previously Sold archive) ───────────────────────────────── Restyle: matches home/about brand. Section-tags, Saira sport headings, restrained palette (red only as section-tag dot + marquee accent + CTA). */ /* Per-page padding-top now provided by the universal `main` rule. */ .sold-page { /* spacing inherited from main */ } .sold-hero, .page-masthead { padding-block: clamp(2rem, 3vw, 3rem) clamp(3rem, 5vw, 4rem); } .sold-hero__grid, .page-masthead__grid { display: grid; grid-template-columns: 1fr; gap: clamp(2rem, 4vw, 3rem); align-items: end; margin-top: clamp(1.5rem, 3vw, 2rem); } @media (min-width: 1024px) { .sold-hero__grid, .page-masthead__grid { grid-template-columns: 7fr 5fr; gap: clamp(3rem, 5vw, 5rem); } } .sold-hero__heading, .page-masthead__heading { font-family: var(--font-sport); font-size: clamp(2.5rem, 8vw, 6.5rem); line-height: 0.94; letter-spacing: 0; font-weight: 800; text-transform: uppercase; color: rgb(var(--color-ink)); margin: 0; display: flex; flex-direction: column; } .sold-hero__heading > span, .page-masthead__heading > span { display: block; } /* Founder avatar placeholder — used when no portrait file is present in assets/images/. Renders a cognac circle with the founder's initials so the section doesn't collapse to a single byline line. */ .founder-section__avatar--placeholder { display: inline-flex; align-items: center; justify-content: center; width: 64px; height: 64px; border-radius: 50%; background: rgb(var(--color-cognac)); color: #fff; font-family: var(--font-sport, ui-sans-serif, system-ui); font-weight: 800; font-size: 1.15rem; letter-spacing: 0.05em; } .founder-section__avatar-initials { line-height: 1; } /* Inline variant — keeps the heading on a single line (with the italic-accent span flowing inline). Used by /expertise/ for the short "What we do." form. */ .page-masthead__heading--inline { display: block; } .page-masthead__heading--inline > span { display: inline; } .sold-hero__intro, .page-masthead__intro { font-size: 1.05rem; line-height: 1.65; color: rgb(var(--color-ink-soft)); max-width: 40rem; margin: 0; padding-bottom: 0.5rem; } /* Stats band — Saira numbers, theme-token border (no surface bg). */ .sold-stats { padding-block: clamp(2.5rem, 5vw, 3.5rem); border-top: 1px solid rgb(var(--color-hairline)); border-bottom: 1px solid rgb(var(--color-hairline)); background: transparent; } .sold-stats__grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 2rem; } @media (min-width: 1024px) { .sold-stats__grid { grid-template-columns: repeat(4, 1fr); gap: 3rem; } } .sold-stats__grid > div + div { padding-left: 0; } @media (min-width: 1024px) { .sold-stats__grid > div + div { border-left: 1px solid rgb(var(--color-hairline)); padding-left: 2.5rem; } } .sold-stats__num { font-family: var(--font-sport); font-size: clamp(2.75rem, 6vw, 4.5rem); letter-spacing: 0; font-weight: 800; text-transform: uppercase; line-height: 0.95; margin: 0; color: rgb(var(--color-ink)); } .sold-stats__denom { color: rgb(var(--color-muted)); font-size: 0.55em; font-weight: 700; } .sold-stats__lbl { margin-top: 0.85rem; font-family: var(--font-mono); font-size: 0.66rem; letter-spacing: 0.22em; text-transform: uppercase; color: rgb(var(--color-muted)); font-weight: 500; } /* Archive grid section — section-tag + sport heading. */ .sold-grid-section { padding-block: var(--section); } .sold-grid-section__head { display: grid; grid-template-columns: 1fr; gap: 1.5rem 3rem; margin-bottom: clamp(2.5rem, 5vw, 3.5rem); } @media (min-width: 900px) { .sold-grid-section__head { grid-template-columns: 5fr 4fr; align-items: end; } } .sold-grid-section__heading { margin: 0.75rem 0 0; font-family: var(--font-sport); font-size: clamp(2rem, 5vw, 3.25rem); line-height: 0.98; letter-spacing: 0; font-weight: 800; text-transform: uppercase; color: rgb(var(--color-ink)); display: flex; flex-direction: column; } .sold-grid-section__heading > span { display: block; } .sold-grid-section__caption { margin: 0; font-family: var(--font-mono); font-size: 0.7rem; letter-spacing: 0.2em; text-transform: uppercase; color: rgb(var(--color-muted)); } @media (min-width: 900px) { .sold-grid-section__caption { text-align: right; padding-bottom: 0.35rem; } } .sold-grid-section__caption [data-sold-count] { color: rgb(var(--color-ink)); font-weight: 700; } /* Top-marques row — neutral palette, no red. */ .top-marques { margin-block: clamp(1.5rem, 2.5vw, 2rem); border-top: 1px solid rgb(var(--color-hairline)); border-bottom: 1px solid rgb(var(--color-hairline)); padding-block: 1.25rem; display: flex; align-items: center; gap: 1.25rem; flex-wrap: wrap; } .top-marques__label { flex-shrink: 0; margin: 0; font-family: var(--font-mono); font-size: 0.66rem; letter-spacing: 0.22em; text-transform: uppercase; color: rgb(var(--color-muted)); font-weight: 600; } .top-marques ul { display: flex; gap: 0.6rem 1.5rem; flex-wrap: wrap; list-style: none; padding: 0; margin: 0; } .top-marques li { display: inline-flex; align-items: baseline; gap: 0.45rem; } .top-marques .name { font-family: var(--font-sport); font-size: 0.82rem; letter-spacing: 0.04em; text-transform: uppercase; font-weight: 700; color: rgb(var(--color-ink)); } .top-marques .count { font-family: var(--font-mono); font-size: 0.62rem; letter-spacing: 0.18em; color: rgb(var(--color-muted)); } /* Archive grid */ .sold-grid { list-style: none; padding: 0; margin: clamp(2rem, 4vw, 3rem) 0 0; display: grid; grid-template-columns: repeat(2, 1fr); gap: 0.75rem; } @media (min-width: 768px) { .sold-grid { grid-template-columns: repeat(3, 1fr); gap: 1rem; } } @media (min-width: 1024px) { .sold-grid { grid-template-columns: repeat(4, 1fr); gap: 1.25rem; } } .sold-card { background: rgb(var(--color-paper)); border: 1px solid rgb(var(--color-hairline)); overflow: hidden; transition: border-color 350ms var(--ease-editorial), box-shadow 350ms var(--ease-editorial), transform 350ms var(--ease-editorial), opacity 300ms var(--ease-editorial); } .sold-card:hover { border-color: rgb(var(--color-hairline-strong)); box-shadow: 0 24px 50px -25px rgb(var(--color-ink) / 0.20); transform: translateY(-2px); } /* Filtered-out state — hide cleanly */ .sold-card[hidden] { display: none; } .sold-card__media { position: relative; aspect-ratio: 4 / 3; overflow: hidden; background: rgb(var(--color-surface)); } .sold-card__media img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; transition: transform 1000ms var(--ease-editorial); } .sold-card:hover .sold-card__media img { transform: scale(1.04); } .sold-card__shade { position: absolute; inset: 0; background: linear-gradient(180deg, transparent 55%, rgb(0 0 0 / 0.6) 100%); } .sold-card__badge { position: absolute; top: 0.75rem; right: 0.75rem; font-family: var(--font-sport); font-size: 0.62rem; letter-spacing: 0.2em; text-transform: uppercase; font-weight: 800; padding: 0.3rem 0.6rem; background: rgb(0 0 0 / 0.7); color: rgb(255 255 255 / 0.95); border: 1px solid rgb(255 255 255 / 0.15); backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px); } .sold-card__overlay { position: absolute; bottom: 0.75rem; left: 0.75rem; right: 0.75rem; font-family: var(--font-mono); font-size: 0.6rem; letter-spacing: 0.2em; text-transform: uppercase; color: rgb(255 255 255 / 0.92); } .sold-card__body { padding: 0.95rem 1rem 1.15rem; } .sold-card__make { font-family: var(--font-mono); font-size: 0.6rem; letter-spacing: 0.22em; text-transform: uppercase; color: rgb(var(--color-muted)); font-weight: 600; margin: 0; } .sold-card__title { font-family: var(--font-sport); font-size: 0.95rem; font-weight: 800; line-height: 1.2; letter-spacing: 0.02em; text-transform: uppercase; color: rgb(var(--color-ink)); margin: 0.55rem 0 0; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; min-height: 2.4rem; } /* Empty-state shown when filter has no matches */ .sold-grid__empty { margin: clamp(2rem, 4vw, 3rem) 0 0; padding: 2rem; border: 1px dashed rgb(var(--color-hairline-strong)); text-align: center; font-family: var(--font-sport); font-size: 1rem; letter-spacing: 0.04em; color: rgb(var(--color-ink-soft)); } .sold-grid__reset { background: none; border: 0; padding: 0; font-family: inherit; font-size: inherit; letter-spacing: inherit; color: rgb(var(--color-ink)); text-decoration: underline; text-underline-offset: 3px; cursor: pointer; } .sold-grid__reset:hover { color: rgb(var(--color-ink-soft)); } /* CTA section — closer to homepage contact pattern */ .sold-cta { padding-block: var(--section); border-top: 1px solid rgb(var(--color-hairline)); background: rgb(var(--color-canvas)); } .sold-cta__grid { display: grid; grid-template-columns: 1fr; gap: clamp(2.5rem, 5vw, 4rem); align-items: start; } @media (min-width: 1024px) { .sold-cta__grid { grid-template-columns: 7fr 5fr; gap: 4rem; } } .sold-cta__heading { margin: 0.75rem 0 0; font-family: var(--font-sport); font-size: clamp(2rem, 5.5vw, 3.25rem); line-height: 0.98; letter-spacing: 0; font-weight: 800; text-transform: uppercase; color: rgb(var(--color-ink)); display: flex; flex-direction: column; } .sold-cta__heading > span { display: block; } .sold-cta__lede { margin: 1.75rem 0 0; font-size: 1.05rem; line-height: 1.65; color: rgb(var(--color-ink-soft)); max-width: 38rem; } .sold-cta__panel { border: 1px solid rgb(var(--color-hairline)); background: rgb(var(--color-paper)); padding: clamp(1.75rem, 4vw, 2.5rem); } .sold-cta__label { margin: 0 0 1rem; font-family: var(--font-mono); font-size: 0.66rem; letter-spacing: 0.22em; text-transform: uppercase; color: rgb(var(--color-muted)); font-weight: 600; } .sold-cta__phone { display: block; font-family: var(--font-sport); font-size: clamp(2rem, 5vw, 3.25rem); color: rgb(var(--color-ink)); line-height: 0.92; letter-spacing: 0; font-weight: 800; text-transform: uppercase; transition: color 300ms; } .sold-cta__phone > span { display: block; } .sold-cta__phone:hover { color: rgb(var(--color-ink-soft)); } .sold-cta__email { margin-top: 1.5rem; display: inline-block; font-family: var(--font-mono); font-size: 0.78rem; letter-spacing: 0.16em; text-transform: uppercase; color: rgb(var(--color-ink-soft)); } .sold-cta__email:hover { color: rgb(var(--color-ink)); } .sold-cta__btn { margin-top: 2rem; width: 100%; justify-content: center; } /* ─── Misc utility ───────────────────────────────────────────────────── */ .sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; } body.no-scroll { overflow: hidden; } /* WordPress-injected admin bar offset */ body.admin-bar .site-header { top: 32px; } @media (max-width: 782px) { body.admin-bar .site-header { top: 46px; } } /* ─── Single Vehicle — Highlights numbered grid ──────────────────────── */ .single-highlights { padding-block: var(--section); border-top: 1px solid rgb(var(--color-hairline)); background: rgb(var(--color-surface)); } .single-highlights__title { font-family: var(--font-display); font-size: clamp(2.25rem, 6vw, 4rem); line-height: 1.04; letter-spacing: -0.035em; font-weight: 400; margin-top: 1rem; color: rgb(var(--color-ink)); } .single-highlights__grid { margin-top: 3rem; display: grid; grid-template-columns: 1fr; gap: 1px; background: rgb(var(--color-hairline)); border: 1px solid rgb(var(--color-hairline)); } @media (min-width: 768px) { .single-highlights__grid { grid-template-columns: repeat(2, 1fr); } } @media (min-width: 1024px) { .single-highlights__grid { grid-template-columns: repeat(4, 1fr); } } .single-highlights__card { background: rgb(var(--color-paper)); padding: 1.75rem; } @media (min-width: 1024px) { .single-highlights__card { padding: 2rem; } } .single-highlights__num { font-family: var(--font-mono); font-size: 0.7rem; letter-spacing: 0.04em; color: rgb(var(--color-cognac)); margin: 0; } .single-highlights__body { margin-top: 1.25rem; font-size: 1rem; line-height: 1.65; color: rgb(var(--color-ink-soft)); } /* ─── Single Vehicle — Other cars (related 3-up) ─────────────────────── */ .single-related { padding-block: var(--section); border-top: 1px solid rgb(var(--color-hairline)); } .single-related__head { display: flex; align-items: flex-end; justify-content: space-between; flex-wrap: wrap; gap: 1.5rem; margin-bottom: 2.5rem; } .single-related__title { font-family: var(--font-display); font-size: clamp(2.25rem, 6vw, 4rem); line-height: 1.04; letter-spacing: -0.035em; font-weight: 400; margin-top: 1rem; color: rgb(var(--color-ink)); } .single-related__all { display: none; } @media (min-width: 768px) { .single-related__all { display: inline-flex; } } .single-related__grid { display: grid; grid-template-columns: 1fr; gap: 1.5rem; } @media (min-width: 768px) { .single-related__grid { grid-template-columns: repeat(3, 1fr); gap: 2rem; } } .related-card { border: 1px solid rgb(var(--color-hairline)); background: rgb(var(--color-paper)); overflow: hidden; transition: border-color 500ms var(--ease-editorial), box-shadow 500ms var(--ease-editorial); display: flex; flex-direction: column; } .related-card:hover { border-color: rgb(var(--color-cognac) / 0.7); box-shadow: 0 30px 60px -30px rgb(var(--color-ink) / 0.18); } .related-card__media { position: relative; aspect-ratio: 5 / 4; overflow: hidden; margin: 0; background: rgb(var(--color-surface)); } .related-card__media img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; transition: transform 1200ms var(--ease-editorial); } .related-card:hover .related-card__media img { transform: scale(1.05); } .related-card__shade { position: absolute; inset: 0; pointer-events: none; background: linear-gradient(180deg, transparent 60%, rgb(0 0 0 / 0.65) 100%); } .related-card__body { padding: 1.5rem; } .related-card__name { font-family: var(--font-display); font-size: 1.5rem; line-height: 1.1; letter-spacing: -0.025em; font-weight: 400; margin-top: 0.5rem; color: rgb(var(--color-ink)); transition: color 300ms; } .related-card:hover .related-card__name { color: rgb(var(--color-cognac)); } .related-card__meta { margin-top: 0.75rem; font-family: var(--font-mono); font-size: 0.7rem; letter-spacing: 0.16em; text-transform: uppercase; color: rgb(var(--color-muted)); } /* ─── Legal pages (Privacy / Terms) ──────────────────────────────────── */ .legal-page__head { padding-block: var(--section-sm) 2rem; } .legal-page__rule { display: flex; align-items: center; gap: 1rem; margin-block: 2rem 1.5rem; } .legal-page__rule span { flex: 0 0 3rem; height: 1px; background: rgb(var(--color-cognac)); } .legal-page__rule .eyebrow { margin: 0; color: rgb(var(--color-cognac)); } .legal-page__title { font-family: var(--font-display); font-size: clamp(2.75rem, 8vw, 5.5rem); line-height: 0.98; letter-spacing: -0.045em; font-weight: 400; color: rgb(var(--color-ink)); max-width: 22ch; } .legal-page__dek { margin-top: 2rem; font-size: clamp(1.1rem, 1.6vw, 1.25rem); line-height: 1.6; color: rgb(var(--color-ink-soft)); max-width: 50ch; } .legal-page__body { padding-block: var(--section-sm) var(--section); border-top: 1px solid rgb(var(--color-hairline)); } .legal-prose { max-width: 56rem; margin-inline: 0; } .legal-prose__section { display: grid; grid-template-columns: 1fr; gap: 1rem; padding-block: 2.5rem; border-bottom: 1px solid rgb(var(--color-hairline)); } .legal-prose__section:first-child { padding-top: 1rem; } @media (min-width: 768px) { .legal-prose__section { grid-template-columns: 6rem 1fr; gap: 2rem; padding-block: 3rem; } } .legal-prose__num { font-family: var(--font-mono); font-size: 0.75rem; letter-spacing: 0.2em; color: rgb(var(--color-cognac)); font-weight: 600; padding-top: 0.5rem; margin: 0; } .legal-prose__heading { font-family: var(--font-display); font-size: clamp(1.5rem, 2.5vw, 2rem); line-height: 1.15; letter-spacing: -0.025em; font-weight: 400; color: rgb(var(--color-ink)); margin: 0 0 1.25rem; } .legal-prose p { font-size: 1.05rem; line-height: 1.75; color: rgb(var(--color-ink-soft)); max-width: 38rem; margin-bottom: 1.25rem; } .legal-prose p:last-child { margin-bottom: 0; } .legal-prose__foot { margin-top: 3rem; display: flex; flex-direction: column; gap: 1rem; align-items: flex-start; } @media (min-width: 640px) { .legal-prose__foot { flex-direction: row; justify-content: space-between; align-items: center; } } .arrow-glyph--reverse { transform: scaleX(-1); } /* ─── Hero (sports identity) ─────────────────────────────────────── */ .hero--sports { position: relative; overflow: hidden; background: rgb(var(--color-canvas)); min-height: 72vh; display: flex; align-items: center; padding-block: clamp(2rem, 4vw, 3.5rem); } .hero--sports .hero__bg { position: absolute; inset: 0; background-image: image-set( url('../images/hero-showroom.webp') type('image/webp'), url('../images/hero-showroom.jpg') type('image/jpeg') ); background-image: -webkit-image-set( url('../images/hero-showroom.webp') 1x, url('../images/hero-showroom.jpg') 1x ); background-size: auto 100%; /* image height = hero height, no vertical crop */ background-position: right center; background-repeat: no-repeat; /* Soft-fade the image's left edge so it dissolves into the canvas instead of butting hard against the veil. Transparent at 0–30%, ramps to fully opaque by 65% — coordinated with the veil gradient (which is fully transparent by ~72%). */ -webkit-mask-image: linear-gradient(90deg, transparent 0%, transparent 28%, rgba(0, 0, 0, 0.5) 48%, #000 65%, #000 100%); mask-image: linear-gradient(90deg, transparent 0%, transparent 28%, rgba(0, 0, 0, 0.5) 48%, #000 65%, #000 100%); z-index: 1; transition: opacity 300ms var(--ease-editorial); } html.theme-dark .hero--sports .hero__bg { background-image: image-set( url('../images/hero-dark.webp') type('image/webp'), url('../images/hero-dark.jpg') type('image/jpeg') ); background-image: -webkit-image-set( url('../images/hero-dark.webp') 1x, url('../images/hero-dark.jpg') 1x ); } .hero--sports .hero__veil { position: absolute; inset: 0; background: linear-gradient(90deg, rgb(var(--veil-strong) / 0.96) 0%, rgb(var(--veil-strong) / 0.85) 28%, rgb(var(--veil-weak) / 0.30) 50%, rgb(var(--veil-weak) / 0) 72%); z-index: 2; } .hero--sports .hero__inner { position: relative; z-index: 3; width: 100%; } .hero--sports .hero__content { max-width: 36rem; } .hero__headline { font-family: var(--font-sport); font-weight: 900; font-size: clamp(3.5rem, 10vw, 8rem); line-height: 0.92; letter-spacing: -0.01em; text-transform: uppercase; color: rgb(var(--color-ink)); margin: 0; } .hero__headline-top, .hero__headline-bottom { display: block; } .hero__headline-bottom { color: rgb(var(--color-cognac)); } .hero__rule { display: flex; align-items: center; gap: 0.6rem; margin: 1.5rem 0 1.5rem; color: rgb(var(--color-ink)); max-width: 22rem; } .hero__rule-line { flex: 1; height: 1px; background: rgb(var(--color-ink)); } .hero__rule-glyph { color: rgb(var(--color-cognac)); } .hero__dek { font-family: var(--font-display); font-size: clamp(1rem, 1.4vw, 1.15rem); line-height: 1.5; color: rgb(var(--color-ink-soft)); margin: 0 0 2rem; max-width: 26rem; } .hero__ctas { display: flex; flex-wrap: wrap; gap: 0.85rem; } /* Buttons — sports variant Text is hard-coded white in both themes — red CTAs always need light text for contrast regardless of light/dark theme. */ .btn-red, .btn-red:visited, .btn-red:link { display: inline-flex; align-items: center; justify-content: center; padding: 0.95rem 2rem; background: rgb(var(--color-cognac)); color: #ffffff; font-family: var(--font-sport); font-weight: 700; font-size: 0.95rem; letter-spacing: 0.16em; text-transform: uppercase; border: 1px solid rgb(var(--color-cognac)); transition: background 200ms, border-color 200ms, transform 200ms; } .btn-red:hover, .btn-red:focus { background: rgb(var(--color-cognac-deep)); border-color: rgb(var(--color-cognac-deep)); color: #ffffff; transform: translateY(-1px); } .btn-red .arrow-glyph { color: #ffffff; } .btn-outline { display: inline-flex; align-items: center; justify-content: center; padding: 0.95rem 2rem; background: transparent; color: rgb(var(--color-ink)); font-family: var(--font-sport); font-weight: 700; font-size: 0.95rem; letter-spacing: 0.16em; text-transform: uppercase; border: 1px solid rgb(var(--color-ink)); transition: background 200ms, color 200ms; } .btn-outline:hover { background: rgb(var(--color-ink)); color: rgb(var(--color-paper)); } @media (max-width: 720px) { .hero--sports { min-height: 70vh; padding-block: 3rem; } .hero--sports .hero__veil { background: linear-gradient(180deg, rgb(var(--veil-strong) / 0.95) 0%, rgb(var(--veil-strong) / 0.75) 45%, rgb(var(--veil-weak) / 0.55) 100%); } .hero__rule { max-width: 16rem; } .hero__ctas .btn-red, .hero__ctas .btn-outline { flex: 1 1 auto; padding-inline: 1rem; } } /* ─── Trust badges ───────────────────────────────────────────────── */ .trust-badges { background: rgb(var(--color-canvas)); padding-block: clamp(1.5rem, 3vw, 2.25rem); border-top: 1px solid rgb(var(--color-hairline)); } .trust-badges__grid { display: grid; grid-template-columns: 1fr; gap: 1.5rem; } @media (min-width: 640px) { .trust-badges__grid { grid-template-columns: repeat(2, 1fr); } } @media (min-width: 1000px) { .trust-badges__grid { grid-template-columns: repeat(4, 1fr); gap: 2rem; } } .trust-badge { display: flex; gap: 1rem; align-items: flex-start; } .trust-badge__icon { flex: 0 0 auto; width: 44px; height: 44px; display: inline-flex; align-items: center; justify-content: center; color: rgb(var(--color-ink)); } .trust-badge__icon svg { width: 100%; height: 100%; } .trust-badge__body { flex: 1 1 auto; min-width: 0; } .trust-badge__title { font-family: var(--font-sport); font-weight: 800; font-size: 1.05rem; letter-spacing: 0.12em; text-transform: uppercase; color: rgb(var(--color-ink)); margin: 0.2rem 0 0.45rem; line-height: 1.15; } .trust-badge__desc { font-size: 0.85rem; line-height: 1.5; color: rgb(var(--color-ink-soft)); margin: 0; } /* ─── Graph icon button in header ─────────────────────────────────── */ .graph-toggle { color: rgb(var(--color-ink)); } .graph-toggle:hover { color: rgb(var(--color-cognac)); } /* Smaller theme-toggle when it lives in the /graph topbar so it sits alongside the Recenter graph-btn at the same height. */ .graph-shell__theme { width: 36px; height: 36px; border-color: rgb(var(--color-hairline-strong)); } .graph-shell__theme:hover { border-color: rgb(var(--color-ink)); color: rgb(var(--color-ink)); background: rgb(var(--color-ink)); } .graph-shell__theme:hover svg { color: rgb(var(--color-paper)); } /* ─── /graph full-screen page ───────────────────────────────────────── Force-directed practice map. Ralf pinned at the centre, services and sub-services orbit out via D3. The whole shell is its own layout — no site header / footer / scroll. */ body.graph-page { overflow: hidden; background: rgb(var(--color-canvas)); color: rgb(var(--color-ink)); } .graph-shell { position: fixed; inset: 0; display: grid; grid-template-rows: auto 1fr; height: 100dvh; background: rgb(var(--color-canvas)); } /* Topbar */ .graph-shell__topbar { display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: 1.5rem; padding: 1rem clamp(1.25rem, 3vw, 2rem); border-bottom: 1px solid rgb(var(--color-hairline)); background: rgb(var(--color-canvas)); /* Stack above the canvas so zoomed/dragged SVG content can never visually cover the topbar even if it tries to overflow. */ position: relative; z-index: 10; } .graph-shell__brand { display: inline-flex; align-items: center; gap: 0.55rem; font-family: var(--font-sport); font-size: 0.72rem; letter-spacing: 0.18em; text-transform: uppercase; font-weight: 800; color: rgb(var(--color-ink)); padding: 0.55rem 0.85rem; border: 1px solid rgb(var(--color-hairline-strong)); transition: background 200ms, color 200ms, border-color 200ms; } .graph-shell__brand:hover { background: rgb(var(--color-ink)); color: rgb(var(--color-paper)); border-color: rgb(var(--color-ink)); } .graph-shell__title { text-align: center; line-height: 1.1; } .graph-shell__tag { display: inline-block; font-family: var(--font-mono); font-size: 0.62rem; letter-spacing: 0.22em; text-transform: uppercase; color: rgb(var(--color-muted)); font-weight: 600; } .graph-shell__h1 { margin: 0.4rem 0 0; font-family: var(--font-sport); font-size: clamp(0.95rem, 1.6vw, 1.15rem); font-weight: 800; letter-spacing: 0.04em; text-transform: uppercase; color: rgb(var(--color-ink)); } .graph-shell__actions { display: inline-flex; gap: 0.5rem; } .graph-btn { display: inline-flex; align-items: center; gap: 0.5rem; padding: 0.55rem 0.85rem; background: transparent; border: 1px solid rgb(var(--color-hairline-strong)); color: rgb(var(--color-ink)); font-family: var(--font-sport); font-size: 0.72rem; letter-spacing: 0.16em; text-transform: uppercase; font-weight: 800; cursor: pointer; transition: background 200ms, color 200ms, border-color 200ms; } .graph-btn:hover { background: rgb(var(--color-ink)); color: rgb(var(--color-paper)); border-color: rgb(var(--color-ink)); } @media (max-width: 700px) { .graph-shell__topbar { grid-template-columns: auto 1fr; } .graph-shell__title { display: none; } .graph-btn span { display: none; } } /* Canvas */ .graph-shell__canvas { position: relative; width: 100%; height: 100%; overflow: hidden; background: radial-gradient(circle at 50% 50%, rgb(var(--color-paper)) 0%, rgb(var(--color-canvas)) 70%); /* Sits below the topbar (z:10). Containing the touch action stops pinch/scroll from bubbling up to the browser as a page-level zoom, which on body{overflow:hidden} would push the topbar out of view. d3.zoom still handles wheel/pinch internally. */ z-index: 1; touch-action: none; overscroll-behavior: contain; } .graph-shell__canvas svg { width: 100%; height: 100%; cursor: grab; overflow: hidden; /* belt-and-braces — clip transformed to viewport */ touch-action: none; display: block; /* Hidden until JS preheats the simulation. .is-ready (added after the first settled paint) fades the SVG in, hiding the cold-start flying nodes glitch. */ opacity: 0; transition: opacity 360ms ease; } .graph-shell__canvas.is-ready svg { opacity: 1; } .graph-shell__canvas svg:active { cursor: grabbing; } .graph-shell__hint { position: absolute; bottom: 1rem; left: 1.25rem; display: inline-flex; align-items: center; gap: 0.6rem; padding: 0.55rem 1rem; background: rgb(var(--color-paper) / 0.85); border: 1px solid rgb(var(--color-hairline)); backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); font-family: var(--font-mono); font-size: 0.62rem; letter-spacing: 0.18em; text-transform: uppercase; color: rgb(var(--color-muted)); pointer-events: none; z-index: 5; } .graph-shell__hint .dot { width: 6px; height: 6px; background: rgb(var(--color-cognac)); display: inline-block; } /* Brand mark in the bottom-right of the graph canvas — same horizontal wordmark used in the site header, light/dark variants swap via CSS. */ .graph-shell__brand-mark { position: absolute; bottom: 1rem; right: 1.25rem; z-index: 5; pointer-events: none; opacity: 0.85; display: flex; align-items: center; } .graph-shell__brand-mark-img { height: 56px; width: auto; max-width: 260px; display: block; object-fit: contain; } .graph-shell__brand-mark-img--dark { display: none; } .graph-shell__brand-mark-img--light { display: block; } html.theme-dark .graph-shell__brand-mark-img--light { display: none; } html.theme-dark .graph-shell__brand-mark-img--dark { display: block; } @media (max-width: 600px) { .graph-shell__brand-mark-img { height: 40px; } } /* Node + edge styling */ .graph-edge { stroke: rgb(var(--color-hairline-strong)); stroke-width: 1; stroke-opacity: 0.7; transition: stroke 200ms, stroke-width 200ms, stroke-opacity 200ms; } .graph-edge.is-active { stroke: rgb(var(--color-cognac)); stroke-width: 1.6; stroke-opacity: 1; } .graph-node { cursor: pointer; } .graph-node circle { fill: rgb(var(--color-paper)); stroke: rgb(var(--color-hairline-strong)); stroke-width: 1.2; transition: stroke 200ms, stroke-width 200ms, fill 200ms; } .graph-node text { font-family: var(--font-sport); font-size: 11px; font-weight: 800; letter-spacing: 0.04em; text-transform: uppercase; fill: rgb(var(--color-ink)); pointer-events: none; text-anchor: middle; } .graph-node .graph-node__sub { font-family: var(--font-mono); font-size: 7.5px; letter-spacing: 0.18em; fill: rgb(var(--color-muted)); font-weight: 600; } /* Group colour cues (subtle ring colour) */ .graph-node[data-group="center"] circle { fill: rgb(var(--color-paper)); stroke: rgb(var(--color-cognac)); stroke-width: 2.5; } .graph-node[data-group="service"] circle { stroke: rgb(var(--color-ink)); stroke-width: 1.8; } .graph-node[data-group="generation"] circle { stroke: rgb(var(--color-cognac)); stroke-width: 1.6; } .graph-node[data-group="buying-sub"] circle { stroke: rgb(var(--color-ink)); stroke-width: 1.5; stroke-dasharray: 4 3; } .graph-node[data-group="car"] circle { stroke: rgb(var(--color-hairline-strong)); stroke-dasharray: 2 3; } .graph-node[data-group="car"] text { font-size: 9.5px; } .graph-node[data-group="house"] circle { stroke: rgb(var(--color-hairline-strong)); } .graph-node[data-group="logistics-sub"] circle { stroke: rgb(var(--color-hairline-strong)); } .graph-node[data-group="journal-post"] circle { stroke: rgb(var(--color-hairline-strong)); stroke-dasharray: 4 3; } .graph-node:hover circle, .graph-node.is-active circle { stroke: rgb(var(--color-cognac)); stroke-width: 2.4; stroke-dasharray: 0; } /* Centre node holds the RGB Motors logo (light + dark variants). Both tags are rendered; CSS swaps which one is visible based on the active theme. clip-path keeps the logo neatly inside the brand-red ring even if the PNG has any bleed at the corners. */ .graph-node[data-group="center"] image { clip-path: circle(50%); } .graph-node__logo--dark { display: none; } .graph-node__logo--light { display: block; } html.theme-dark .graph-node__logo--light { display: none; } html.theme-dark .graph-node__logo--dark { display: block; } /* Legend */ .graph-shell__legend { position: absolute; top: calc(72px + 1rem); left: 1.25rem; display: flex; flex-direction: column; gap: 0.5rem; padding: 0.85rem 1rem; background: rgb(var(--color-paper) / 0.9); border: 1px solid rgb(var(--color-hairline)); backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); max-width: 14rem; z-index: 4; } .graph-shell__legend-row { display: inline-flex; align-items: center; gap: 0.55rem; font-family: var(--font-mono); font-size: 0.62rem; letter-spacing: 0.18em; text-transform: uppercase; color: rgb(var(--color-ink-soft)); font-weight: 600; } .graph-shell__legend-dot { width: 10px; height: 10px; border-radius: 50%; background: rgb(var(--color-paper)); border: 1.5px solid rgb(var(--color-hairline-strong)); flex: 0 0 auto; } .graph-shell__legend-dot--center { border-color: rgb(var(--color-cognac)); border-width: 2px; } .graph-shell__legend-dot--service { border-color: rgb(var(--color-ink)); border-width: 2px; } .graph-shell__legend-dot--gen { border-color: rgb(var(--color-cognac)); border-width: 1.5px; } .graph-shell__legend-dot--buying { border-color: rgb(var(--color-ink)); border-width: 1.5px; border-style: dashed; } .graph-shell__legend-dot--car { border-style: dashed; } .graph-shell__legend-dot--post { border-style: dashed; border-width: 1.5px; } @media (max-width: 700px) { .graph-shell__legend { display: none; } } /* ─── Detail panel ───────────────────────────────────────────────── Rich card that appears when a node is clicked. The body is rebuilt per node via JS to suit the node type — cover image at top (cars, journal), specs table, highlights, primary + outline CTAs. */ .graph-shell__panel { position: absolute; top: calc(72px + 1rem); right: 1.25rem; width: min(24rem, calc(100vw - 2.5rem)); max-height: calc(100vh - 7rem); overflow-y: auto; overflow-x: hidden; background: rgb(var(--color-paper)); border: 1px solid rgb(var(--color-hairline)); box-shadow: 0 40px 80px -32px rgb(0 0 0 / 0.45), 0 8px 24px -12px rgb(0 0 0 / 0.15); z-index: 4; animation: graphPanelIn 360ms cubic-bezier(0.22, 0.61, 0.36, 1); } .graph-shell__panel[hidden] { display: none; } .graph-shell__panel::-webkit-scrollbar { width: 6px; } .graph-shell__panel::-webkit-scrollbar-track { background: transparent; } .graph-shell__panel::-webkit-scrollbar-thumb { background: rgb(var(--color-hairline-strong)); border-radius: 3px; } @keyframes graphPanelIn { from { opacity: 0; transform: translateX(16px); } to { opacity: 1; transform: translateX(0); } } .graph-shell__panel-close { position: absolute; top: 0.65rem; right: 0.65rem; z-index: 3; width: 2rem; height: 2rem; background: rgb(0 0 0 / 0.55); color: rgb(255 255 255 / 0.95); border: 0; border-radius: 50%; font-size: 1.25rem; line-height: 1; cursor: pointer; backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px); transition: background 200ms, color 200ms; } .graph-shell__panel-close:hover { background: rgb(var(--color-cognac)); color: #ffffff; } /* Cover image — flush to the top, cars + journal posts */ .graph-panel__cover { position: relative; margin: 0; aspect-ratio: 16 / 10; background: rgb(var(--color-surface)); overflow: hidden; } .graph-panel__cover img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform 700ms var(--ease-editorial); } .graph-shell__panel:hover .graph-panel__cover img { transform: scale(1.03); } .graph-panel__cover::after { content: ''; position: absolute; inset: 0; background: linear-gradient(180deg, transparent 60%, rgb(0 0 0 / 0.4) 100%); pointer-events: none; } /* Body content */ .graph-panel__content { padding: 1.5rem 1.5rem 1.75rem; display: flex; flex-direction: column; } /* Group tag chip — same pattern as the site's section-tag */ .graph-panel__tag { display: inline-flex; align-items: center; gap: 0.5rem; align-self: flex-start; padding: 0.4rem 0.85rem; border: 1px solid rgb(var(--color-hairline-strong)); font-family: var(--font-sport); font-size: 0.65rem; letter-spacing: 0.22em; text-transform: uppercase; font-weight: 800; color: rgb(var(--color-ink)); } .graph-panel__tag::before { content: ''; width: 6px; height: 6px; border-radius: 50%; background: rgb(var(--color-cognac)); flex: 0 0 auto; } .graph-panel__title { margin: 1rem 0 0; font-family: var(--font-sport); font-size: clamp(1.35rem, 2.6vw, 1.6rem); font-weight: 800; letter-spacing: 0.02em; text-transform: uppercase; color: rgb(var(--color-ink)); line-height: 1.12; } .graph-panel__sub { margin: 0.55rem 0 0; font-family: var(--font-mono); font-size: 0.66rem; letter-spacing: 0.22em; text-transform: uppercase; color: rgb(var(--color-muted)); font-weight: 600; } .graph-panel__text { margin: 1.25rem 0 0; font-size: 0.95rem; line-height: 1.6; color: rgb(var(--color-ink-soft)); } /* Highlights — bullet list with a red leading rule */ .graph-panel__highlights { margin: 1.25rem 0 0; padding: 1rem 0; border-top: 1px solid rgb(var(--color-hairline)); border-bottom: 1px solid rgb(var(--color-hairline)); list-style: none; display: flex; flex-direction: column; gap: 0.65rem; } .graph-panel__highlights li { display: flex; align-items: center; gap: 0.85rem; font-family: var(--font-sport); font-size: 0.78rem; letter-spacing: 0.08em; text-transform: uppercase; font-weight: 700; color: rgb(var(--color-ink)); } .graph-panel__highlights li::before { content: ''; width: 1.25rem; height: 1px; background: rgb(var(--color-cognac)); flex: 0 0 auto; } /* Specs grid — 2-column micro-table (cars, houses, center) */ .graph-panel__specs { margin: 1.25rem 0 0; display: grid; grid-template-columns: 1fr 1fr; gap: 0; border-top: 1px solid rgb(var(--color-hairline)); } .graph-panel__specs > div { padding: 0.85rem 0; border-bottom: 1px solid rgb(var(--color-hairline)); } .graph-panel__specs > div:nth-child(odd) { padding-right: 0.85rem; border-right: 1px solid rgb(var(--color-hairline)); } .graph-panel__specs > div:nth-child(even) { padding-left: 0.85rem; } .graph-panel__specs dt { margin: 0; font-family: var(--font-mono); font-size: 0.58rem; letter-spacing: 0.22em; text-transform: uppercase; color: rgb(var(--color-muted)); font-weight: 600; } .graph-panel__specs dd { margin: 0.35rem 0 0; font-family: var(--font-sport); font-size: 0.82rem; letter-spacing: 0.04em; text-transform: uppercase; color: rgb(var(--color-ink)); font-weight: 800; } .graph-panel__edges { margin: 1.25rem 0 0; font-family: var(--font-mono); font-size: 0.6rem; letter-spacing: 0.22em; text-transform: uppercase; color: rgb(var(--color-muted)); font-weight: 600; } /* CTAs — primary (red, white text) + outline */ .graph-panel__ctas { margin: 1.5rem 0 0; display: flex; flex-direction: column; gap: 0.55rem; } .graph-panel__cta { display: inline-flex; align-items: center; justify-content: center; gap: 0.6rem; padding: 0.85rem 1.25rem; font-family: var(--font-sport); font-size: 0.78rem; letter-spacing: 0.18em; text-transform: uppercase; font-weight: 800; transition: background 200ms, color 200ms, border-color 200ms, transform 200ms; } .graph-panel__cta--primary { background: rgb(var(--color-cognac)); color: #ffffff; border: 1px solid rgb(var(--color-cognac)); } .graph-panel__cta--primary:hover { background: rgb(var(--color-cognac-deep)); border-color: rgb(var(--color-cognac-deep)); color: #ffffff; transform: translateY(-1px); } .graph-panel__cta--primary svg { color: #ffffff; } .graph-panel__cta--outline { background: transparent; color: rgb(var(--color-ink)); border: 1px solid rgb(var(--color-hairline-strong)); } .graph-panel__cta--outline:hover { background: rgb(var(--color-ink)); color: rgb(var(--color-paper)); border-color: rgb(var(--color-ink)); } @media (max-width: 700px) { .graph-shell__panel { top: auto; bottom: 4rem; right: 0.75rem; left: 0.75rem; width: auto; max-height: 70vh; } } @media (prefers-reduced-motion: reduce) { .graph-edge, .graph-node circle { transition: none; } }