/* ========================================================= M. CROSS MEDIA — Editorial stylesheet Automotive / motorsports photo & video studio ========================================================= */ /* Self-hosted fonts (fonts/ folder) — avoids the DNS/TLS + CSS-then-file */ /* round trip to Google's servers. Also preloaded in each page's so */ /* they start downloading immediately instead of waiting on this file. */ @font-face { font-family: 'Oswald'; font-style: normal; font-weight: 400 700; font-display: swap; src: url('../fonts/oswald-variable_9dde37.woff2') format('woff2'); } @font-face { font-family: 'Source Serif 4'; font-style: normal; font-weight: 400 600; font-display: swap; src: url('../fonts/source-serif-4-variable_2a24ba.woff2') format('woff2'); } @font-face { font-family: 'Source Serif 4'; font-style: italic; font-weight: 400; font-display: swap; src: url('../fonts/source-serif-4-italic_419703.woff2') format('woff2'); } @font-face { font-family: 'IBM Plex Mono'; font-style: normal; font-weight: 400; font-display: swap; src: url('../fonts/ibm-plex-mono-400_c36f50.woff2') format('woff2'); } @font-face { font-family: 'IBM Plex Mono'; font-style: normal; font-weight: 500; font-display: swap; src: url('../fonts/ibm-plex-mono-500_a76f53.woff2') format('woff2'); } :root { --asphalt: #14161A; --asphalt-2: #1B1E24; --graphite: #2A2D33; --paper: #EDEBE6; --paper-dim: #C9C6BE; --red: #C81E3A; --red-bright: #E23A57; --steel: #8A8F98; --display: 'Oswald', sans-serif; --body: 'Source Serif 4', Georgia, serif; --mono: 'IBM Plex Mono', monospace; --container: 1240px; } * { margin: 0; padding: 0; box-sizing: border-box; } html { scroll-behavior: smooth; background: var(--asphalt); } body { background: var(--asphalt); color: var(--paper); font-family: var(--body); font-size: 17px; line-height: 1.6; -webkit-font-smoothing: antialiased; } img { max-width: 100%; display: block; } a { color: inherit; text-decoration: none; } .container { max-width: var(--container); margin: 0 auto; padding: 0 32px; } h1, h2, h3, h4 { font-family: var(--display); font-weight: 600; text-transform: uppercase; letter-spacing: 0.02em; line-height: 1.05; } .eyebrow { font-family: var(--mono); font-size: 12px; letter-spacing: 0.18em; text-transform: uppercase; color: var(--red-bright); display: flex; align-items: center; gap: 10px; margin-bottom: 14px; } .eyebrow::before { content: ""; width: 22px; height: 1px; background: var(--red-bright); } /* ---------- Focus visibility ---------- */ a:focus-visible, button:focus-visible, input:focus-visible, textarea:focus-visible { outline: 2px solid var(--red-bright); outline-offset: 3px; } /* ---------- Header / Nav ---------- */ .site-header { position: sticky; top: 0; z-index: 100; background: rgba(20, 22, 26, 0.92); backdrop-filter: blur(8px); border-bottom: 1px solid rgba(237, 235, 230, 0.08); } .site-header .container { display: flex; align-items: center; justify-content: space-between; height: 76px; } .logo { display: flex; align-items: center; gap: 12px; font-family: var(--display); font-weight: 700; font-size: 18px; letter-spacing: 0.06em; } .logo img { height: 38px; width: auto; } .nav-links { display: flex; gap: 36px; font-family: var(--mono); font-size: 13px; letter-spacing: 0.08em; text-transform: uppercase; } .nav-links a { position: relative; padding: 6px 0; color: var(--paper-dim); transition: color 0.2s ease; } .nav-links a:hover, .nav-links a[aria-current="page"] { color: var(--paper); } .nav-links a[aria-current="page"]::after { content: ""; position: absolute; left: 0; right: 0; bottom: -1px; height: 2px; background: var(--red); } .nav-links a.nav-cta { font-family: var(--mono); font-size: 12px; letter-spacing: 0.1em; text-transform: uppercase; border: 1px solid var(--red); background: var(--red); color: var(--paper) !important; padding: 10px 18px; } .nav-toggle { display: none; background: none; border: 0; color: var(--paper); font-size: 24px; cursor: pointer; } /* ---------- Telemetry strip (signature element) ---------- */ .telemetry { border-top: 1px solid rgba(237, 235, 230, 0.12); border-bottom: 1px solid rgba(237, 235, 230, 0.12); background: var(--asphalt-2); overflow: hidden; white-space: nowrap; padding-left: 32px; opacity: 0; transition: opacity 300ms ease; } /* Hidden (space reserved, no layout jump) until JS finishes duplicating and */ /* timing the ticker; if JS never runs, it just never appears. */ .telemetry.is-ready { opacity: 1; } .telemetry-track { display: inline-flex; padding: 12px 0; font-family: var(--mono); font-size: 12px; letter-spacing: 0.12em; color: var(--steel); animation: scroll-strip 128s linear infinite; will-change: transform; backface-visibility: hidden; } .telemetry-track span { white-space: nowrap; margin-right: 48px; } .telemetry-track span b { color: var(--red-bright); font-weight: 500; } @keyframes scroll-strip { from { transform: translateX(0); } to { transform: translateX(-50%); } } @media (prefers-reduced-motion: reduce) { .telemetry-track { animation: none; } } /* ---------- Hero ---------- */ .hero { position: relative; overflow: hidden; min-height: 88vh; display: flex; align-items: flex-end; padding-bottom: 72px; background: var(--asphalt); } .hero::before { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(20,22,26,0.2) 0%, rgba(20,22,26,0.55) 55%, var(--asphalt) 100%); z-index: 1; } .hero-bg { position: absolute; inset: 0; background-size: cover; background-position: center; background-repeat: no-repeat; z-index: 0; opacity: 0; filter: blur(clamp(5px, 0.6vw, 12px)); transform: scale(1.06); transition: opacity 400ms ease; } .hero-bg.is-loaded { opacity: 1; } .hero-content { position: relative; z-index: 2; max-width: 780px; } .hero h1 { font-size: clamp(44px, 7vw, 88px); margin-bottom: 20px; } .hero h1 em { font-style: normal; color: var(--red-bright); } .hero p { font-family: var(--body); font-size: 19px; color: var(--paper-dim); max-width: 540px; margin-bottom: 32px; } .btn-row { display: flex; gap: 16px; flex-wrap: wrap; } .btn { font-family: var(--mono); font-size: 13px; letter-spacing: 0.1em; text-transform: uppercase; text-align: center; padding: 15px 26px; display: inline-block; transition: all 0.2s ease; border: 1px solid transparent; background: none; appearance: none; -webkit-appearance: none; border-radius: 0; cursor: pointer; } .btn-primary { background: var(--red); color: var(--paper); } .btn-primary:hover { background: var(--red-bright); } .btn-ghost { border-color: rgba(237,235,230,0.3); color: var(--paper); } .btn-ghost:hover { border-color: var(--paper); } /* ---------- Section scaffolding ---------- */ section { padding: 96px 0; } /* Shrinks just the gap between two adjacent sections (e.g. the Studio story and the stat row below it) without affecting section padding elsewhere. */ section.tight-below { padding-bottom: 48px; } section.tight-above { padding-top: 48px; } .section-head { display: flex; justify-content: space-between; align-items: flex-end; gap: 24px; margin-bottom: 48px; flex-wrap: wrap; } .section-head h2 { font-size: clamp(30px, 4vw, 46px); } .section-head p { color: var(--paper-dim); max-width: 420px; font-size: 16px; } /* ---------- Featured grid (Home) ---------- */ .feature-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 2px; } .feature-grid a { position: relative; overflow: hidden; aspect-ratio: 4/5; display: block; } .feature-grid img { width: 100%; height: 100%; object-fit: cover; filter: grayscale(100%); /* Applies on mouse-out: hold the saturated look for 5s (transition-delay), then ease back to grayscale over 1.5s. The hover rule below overrides this with an immediate, undelayed transition for the mouse-in case. */ transition: transform 0.5s ease, filter 1.5s ease 5s; } .feature-grid a:hover img { transform: scale(1.06); filter: grayscale(0%); transition: transform 0.5s ease, filter 0.4s ease; } .feature-grid .cap { position: absolute; left: 0; right: 0; bottom: 0; padding: 18px; background: linear-gradient(0deg, rgba(0,0,0,0.75), transparent); font-family: var(--mono); font-size: 12px; letter-spacing: 0.08em; text-transform: uppercase; opacity: 0; transition: opacity 0.3s ease; } .feature-grid a:hover .cap { opacity: 1; } .feature-hint { text-align: center; margin-top: 14px; font-family: var(--mono); font-size: 12px; letter-spacing: 0.08em; text-transform: uppercase; color: var(--paper-dim); opacity: 0.5; } /* Touch devices can't hover, so the grayscale default would be permanent — show these images at full saturation instead. The hint is meaningless there too, since there's nothing to hover. */ @media (hover: none) { .feature-grid img { filter: none; } .feature-grid .cap { opacity: 1; } .feature-hint { display: none; } } /* ---------- Story / editorial block ---------- */ .story { display: grid; grid-template-columns: 1fr 1fr; gap: 64px; align-items: center; } .story img { aspect-ratio: 4/5; object-fit: cover; } .story .num { font-family: var(--mono); color: var(--red-bright); font-size: 14px; margin-bottom: 12px; } .story h3 { font-size: 30px; margin-bottom: 18px; } .story p { color: var(--paper-dim); margin-bottom: 16px; } /* ---------- Portfolio gallery ---------- */ .filters { display: flex; gap: 10px; margin-bottom: 40px; flex-wrap: wrap; } .filter-btn { font-family: var(--mono); font-size: 12px; letter-spacing: 0.08em; text-transform: uppercase; padding: 9px 16px; border: 1px solid rgba(237,235,230,0.25); color: var(--paper-dim); background: none; cursor: pointer; transition: all 0.2s ease; } .filter-btn:hover, .filter-btn.active { border-color: var(--red); color: var(--paper); background: rgba(200,30,58,0.12); } .gallery { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; } .gallery figure { break-inside: avoid; } .gallery img { width: 100%; object-fit: cover; aspect-ratio: 3/4; } .gallery figure.wide { grid-column: span 2; } /* 1.54 keeps a 2-col-wide tile the same height as the 3:4 portrait tiles */ .gallery figure.wide img { aspect-ratio: 1.54; } .gallery figcaption { font-family: var(--mono); font-size: 11px; letter-spacing: 0.06em; color: var(--steel); margin-top: 8px; text-transform: uppercase; } .gallery [data-cat] { display: block; } .gallery [data-cat].hidden { display: none; } /* ---------- Packages / pricing ---------- */ .tiers { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; } .tier { border: 1px solid rgba(237,235,230,0.14); background: var(--asphalt-2); padding: 40px 32px; display: flex; flex-direction: column; } .tier.featured { border-color: var(--red); position: relative; } .tier.featured::before { content: "MOST BOOKED"; position: absolute; top: -13px; left: 32px; background: var(--red); color: var(--paper); font-family: var(--mono); font-size: 11px; letter-spacing: 0.1em; padding: 4px 10px; } .tier .num { font-family: var(--mono); color: var(--red-bright); font-size: 13px; margin-bottom: 8px; } .tier h3 { font-size: 24px; margin-bottom: 4px; } .tier .price { font-family: var(--mono); font-size: 34px; color: var(--paper); margin: 16px 0; } .tier .price span { font-size: 14px; color: var(--steel); } .tier ul { list-style: none; margin: 20px 0 28px; flex: 1; } .tier li { font-size: 15px; color: var(--paper-dim); padding: 10px 0; border-top: 1px solid rgba(237,235,230,0.08); } .tier li:first-child { border-top: none; } .tier li .label { display: block; font-family: var(--mono); font-size: 11px; letter-spacing: 0.06em; text-transform: uppercase; color: var(--steel); margin-bottom: 4px; } /* ---------- Tier full-details modal ---------- */ dialog.tier-modal { position: fixed; top: 50%; left: 50%; transform: translate(-50%, -50%); margin: 0; width: 90%; max-width: 560px; max-height: 85vh; overflow-y: auto; border: 1px solid rgba(237,235,230,0.14); background: var(--asphalt-2); color: var(--paper); padding: 40px; } dialog.tier-modal::backdrop { background: rgba(20,22,26,0.75); backdrop-filter: blur(4px); } .modal-close { position: absolute; top: 16px; right: 20px; background: none; border: 0; color: var(--paper-dim); font-size: 26px; line-height: 1; cursor: pointer; } .modal-close:hover { color: var(--paper); } dialog.tier-modal h3 { font-size: 24px; margin: 8px 0 4px; } dialog.tier-modal .ideal-for { font-size: 14px; color: var(--steel); margin: 0 0 24px; } dialog.tier-modal .details-list { list-style: none; display: grid; gap: 10px; margin: 0 0 28px; } dialog.tier-modal .details-list li { font-size: 14px; color: var(--paper-dim); padding-left: 16px; position: relative; } dialog.tier-modal .details-list li::before { content: "—"; position: absolute; left: 0; color: var(--red-bright); } /* ---------- Add-ons ---------- */ .addon-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 40px; } .addon-group h5 { font-family: var(--mono); font-size: 12px; letter-spacing: 0.08em; text-transform: uppercase; color: var(--steel); margin-bottom: 14px; } .addon-note { font-family: var(--mono); font-size: 12px; color: var(--steel); margin-top: 8px; line-height: 1.6; } .note-box { margin-top: 40px; border-left: 2px solid var(--red); padding: 16px 24px; background: var(--asphalt-2); font-family: var(--mono); font-size: 13px; color: var(--steel); } /* ---------- About / team ---------- */ .team-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 32px; } .team-card img { aspect-ratio: 1; object-fit: cover; filter: grayscale(100%); margin-bottom: 18px; } .team-card h4 { font-size: 18px; margin-bottom: 4px; } .team-card .role { font-family: var(--mono); font-size: 12px; color: var(--red-bright); letter-spacing: 0.06em; text-transform: uppercase; margin-bottom: 12px; } .team-card p { font-size: 15px; color: var(--paper-dim); } .stat-row { display: grid; grid-template-columns: repeat(4, 1fr); gap: 24px; border-top: 1px solid rgba(237,235,230,0.12); border-bottom: 1px solid rgba(237,235,230,0.12); padding: 40px 0; } .stat { text-align: center; } .stat b { display: block; font-family: var(--display); font-size: 40px; color: var(--paper); } .stat span { font-family: var(--mono); font-size: 12px; color: var(--steel); letter-spacing: 0.08em; text-transform: uppercase; } /* ---------- Forms (booking / contact) ---------- */ .form-wrap { display: grid; grid-template-columns: 1fr 1fr; gap: 64px; } form { display: grid; gap: 20px; } .field label { display: block; font-family: var(--mono); font-size: 12px; letter-spacing: 0.08em; text-transform: uppercase; color: var(--steel); margin-bottom: 8px; } .field input, .field select, .field textarea { width: 100%; min-width: 0; background: var(--asphalt-2); border: 1px solid rgba(237,235,230,0.16); color: var(--paper); padding: 13px 14px; font-family: var(--body); font-size: 15px; } .field input, .field select { height: 48px; } /* Explicit placeholder: WebKit ignores the input's color and uses its own gray, while Firefox dims the color by 0.54. Pin both engines to paper at a fixed opacity so every field's placeholder matches across browsers. */ .field input::placeholder, .field textarea::placeholder { color: var(--paper); opacity: 0.5; } /* iOS Safari gives native date inputs an intrinsic min width and won't honor width:100%, so the field overflows its grid cell and overlaps the neighbor. Stripping the native appearance makes it size like a normal box; the date picker still opens on tap. */ .field input[type="date"] { -webkit-appearance: none; appearance: none; } /* iOS Safari centers the date value inside the box; desktop left-aligns it. Pin the WebKit value pseudo-element to the left so both match. */ .field input[type="date"]::-webkit-date-and-time-value { text-align: left; } /* Desktop only: hide the mm/dd/yyyy format placeholder while the field is empty and unfocused. It reappears on focus so the format is visible while typing, and a selected date always shows. Mobile is left untouched. */ @media (hover: hover) and (pointer: fine) { /* Hide the format placeholder while empty and unfocused. Safari fills date text via -webkit-text-fill-color, which overrides `color`, so set both on the input itself. Reappears on focus; a selected date is :valid and shows. */ .field input[type="date"]:invalid:not(:focus) { color: rgba(237, 235, 230, 0.5); -webkit-text-fill-color: rgba(237, 235, 230, 0.5); } } .field textarea { resize: vertical; min-height: 120px; } .field input:focus, .field select:focus, .field textarea:focus { border-color: var(--red); outline: none; } .form-row { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; } .form-row > .field { min-width: 0; } .submit-btn { font-family: var(--mono); font-size: 13px; letter-spacing: 0.1em; text-transform: uppercase; background: var(--red); color: var(--paper); border: none; padding: 16px; cursor: pointer; transition: background 0.2s ease; } .submit-btn:hover { background: var(--red-bright); } .side-info h3 { font-size: 22px; margin-bottom: 16px; } .side-info p { color: var(--paper-dim); margin-bottom: 24px; } .info-line { display: flex; justify-content: space-between; padding: 14px 0; border-top: 1px solid rgba(237,235,230,0.1); font-family: var(--mono); font-size: 13px; } .info-line span:first-child { color: var(--steel); text-transform: uppercase; letter-spacing: 0.06em; } /* ---------- Footer ---------- */ .site-footer { border-top: 1px solid rgba(237,235,230,0.1); padding: 56px 0 32px; background: var(--asphalt-2); } .footer-top { display: flex; justify-content: space-between; align-items: flex-start; flex-wrap: wrap; gap: 32px; margin-bottom: 40px; } .footer-brand { font-family: var(--display); font-size: 20px; letter-spacing: 0.04em; } .footer-brand .tag { display: block; font-family: var(--mono); font-size: 12px; color: var(--steel); text-transform: none; letter-spacing: 0.02em; margin-top: 8px; } .footer-cols { display: flex; gap: 64px; flex-wrap: wrap; } .footer-col h5 { font-family: var(--mono); font-size: 12px; letter-spacing: 0.08em; color: var(--steel); margin-bottom: 14px; } .footer-col a { display: block; font-size: 14px; color: var(--paper-dim); margin-bottom: 10px; } .footer-col a:hover { color: var(--paper); } .footer-bottom { display: flex; justify-content: space-between; padding-top: 24px; border-top: 1px solid rgba(237,235,230,0.08); font-family: var(--mono); font-size: 12px; color: var(--steel); flex-wrap: wrap; gap: 12px; } /* ---------- Responsive ---------- */ @media (max-width: 900px) { .nav-links { display: none; } .nav-toggle { display: block; } .feature-grid, .gallery, .team-grid, .stat-row { grid-template-columns: repeat(2, 1fr); } .tiers { grid-template-columns: 1fr; } .addon-grid { grid-template-columns: 1fr; gap: 32px; } dialog.tier-modal { padding: 28px 24px; max-height: 80vh; } .story { grid-template-columns: 1fr; gap: 32px; } .form-wrap { grid-template-columns: 1fr; gap: 40px; } } @media (max-width: 560px) { section { padding: 64px 0; } .feature-grid, .gallery, .stat-row { grid-template-columns: 1fr 1fr; } .form-row { grid-template-columns: 1fr; } .footer-top { flex-direction: column; } }