/* ============================================================= Perfect Graphics Auto Design, v6 Layout logic borrowed from the Montar Digital site: one token scale, one section rhythm, hairline rules instead of boxes. Palette stays dark. This is a car shop, not a paper mill. ============================================================= */ *, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; } :root { /* --- surfaces --- */ --bg: #080a06; --surface: #0f1209; --raised: #141810; --line: #1c2018; --line-2: #2e3527; /* --- ink --- */ --text: #eff2ea; --dim: #979c8e; --faint: #5b6151; /* --- accent --- */ --accent: #c7f000; --accent-ink: #080a06; /* text that sits ON the accent, never white */ --accent-hover: #d8ff2b; --accent-soft: rgba(199, 240, 0, 0.08); /* --- type --- */ --display: "Jost", system-ui, sans-serif; --hero-weight: 300; --hero-track: 0.13em; --hero-thin: 300; /* second hero line, must never outweigh the first */ --brand-weight: 500; --sans: "Inter", -apple-system, BlinkMacSystemFont, system-ui, sans-serif; --text-eyebrow: 0.72rem; --text-small: 0.82rem; --text-base: clamp(0.95rem, 0.92rem + 0.2vw, 1.05rem); --text-lede: clamp(1.05rem, 0.98rem + 0.4vw, 1.25rem); --text-h3: clamp(1.2rem, 1.08rem + 0.7vw, 1.6rem); --text-h2: clamp(1.85rem, 1.3rem + 2.4vw, 3.1rem); --text-hero: clamp(2.6rem, 1.5rem + 4.4vw, 5.4rem); --text-statement: clamp(1.4rem, 1.05rem + 1.7vw, 2.3rem); /* --- rhythm --- */ --space-section: clamp(4.5rem, 3rem + 6vw, 8.5rem); --shell-max: 1240px; --shell-pad: clamp(1.25rem, 0.6rem + 3vw, 3rem); --radius: 10px; --duration: 400ms; --ease: cubic-bezier(0.22, 1, 0.36, 1); } /* Previous palette, kept so it can be compared without a checkout. Set data-theme="gold" on . Purely token values, no extra font request, so it costs nothing to leave here. */ :root[data-theme="gold"] { --bg: #08080f; --surface: #0e0e18; --raised: #12121e; --line: #1c1c2c; --line-2: #2c2c42; --text: #f2f2f5; --dim: #9a9aa8; --faint: #5e5e70; --accent: #d4a843; --accent-ink: #0a0a12; --accent-hover: #e0b855; --accent-soft: rgba(212, 168, 67, 0.08); } html { scroll-behavior: smooth; } body { font-family: var(--sans); font-size: var(--text-base); line-height: 1.62; color: var(--text); background: var(--bg); -webkit-font-smoothing: antialiased; overflow-x: hidden; } /* Film grain. Barely there, but it stops the flat black looking like a default terminal background. */ body::before { content: ""; position: fixed; inset: 0; z-index: 1; pointer-events: none; opacity: 0.04; mix-blend-mode: overlay; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E"); } img, video { max-width: 100%; height: auto; display: block; } /* A class that sets display beats the bare [hidden] attribute on specificity, so hidden elements can leak back in. Settle it once. */ [hidden] { display: none !important; } a { color: inherit; text-decoration: none; } ::selection { background: var(--accent); color: var(--accent-ink); } h1, h2, h3 { font-family: var(--display); font-weight: 700; line-height: 1.05; letter-spacing: -0.03em; } .shell { max-width: var(--shell-max); margin-inline: auto; padding-inline: var(--shell-pad); position: relative; z-index: 2; } .skip-link { position: absolute; left: -9999px; top: 0; z-index: 200; background: var(--accent); color: var(--accent-ink); padding: 0.7rem 1.2rem; font-weight: 600; } .skip-link:focus { left: 0; } /* Visible to screen readers only. Used to finish button labels like "Learn More" into "Learn More about window tint", so the links are still distinguishable when read out of context. */ .sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; border: 0; } :focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; } /* ============================================================= SECTION RHYTHM Every section is padded by the same token and separated by a hairline. No cards-on-cards, no alternating background colors. ============================================================= */ section { padding-block: var(--space-section); position: relative; } .sec-line { border-top: 1px solid var(--line); } .sec-raised { background: var(--surface); } .section-head { max-width: 46ch; margin-bottom: clamp(2.5rem, 1.5rem + 2.5vw, 4rem); } .section-head--center { margin-inline: auto; text-align: center; } .eyebrow { font-size: var(--text-eyebrow); font-weight: 600; letter-spacing: 0.16em; text-transform: uppercase; color: var(--accent); margin-bottom: 1rem; } h2 { font-size: var(--text-h2); } h3 { font-size: var(--text-h3); } .lede { font-size: var(--text-lede); color: var(--dim); line-height: 1.55; max-width: 54ch; } .muted { color: var(--dim); } .small { font-size: var(--text-small); color: var(--faint); } /* ============================================================= CAPSULES (ported from Montar's .serp-bar / .serp-go / .serp-call family, the "bubbles". Geometry is identical: 999px radius, same padding, 0.78 to 0.82rem at weight 600. Only the palette moves.) ============================================================= */ .pill { display: inline-flex; align-items: center; gap: 0.45em; border-radius: 999px; padding: 0.4em 0.9em; font-size: 0.82rem; font-weight: 600; line-height: 1.3; border: 1px solid var(--line-2); color: var(--dim); background: transparent; transition: border-color var(--duration) var(--ease), color var(--duration) var(--ease); } a.pill:hover, button.pill:hover { border-color: var(--accent); color: var(--text); } .pill--solid { background: var(--accent); color: var(--accent-ink); border-color: var(--accent); } a.pill--solid:hover { background: var(--accent-hover); border-color: var(--accent-hover); color: var(--accent-ink); } .pill--ghost { background: rgba(255,255,255,0.03); } .pill--sm { font-size: 0.78rem; padding: 0.35em 0.8em; } /* The horizontal capsule bar. Montar uses this for the fake search field; here it carries the shop status line. */ .pill-bar { display: flex; align-items: center; justify-content: space-between; gap: 1rem; border: 1px solid var(--line-2); border-radius: 999px; padding: 0.7rem 0.7rem 0.7rem 1.1rem; font-size: 0.9rem; color: var(--dim); background: rgba(255,255,255,0.02); } .pill-row { display: flex; flex-wrap: wrap; gap: 0.5rem; } /* ============================================================= BUTTONS ============================================================= */ .btn { display: inline-flex; align-items: center; justify-content: center; gap: 0.5rem; padding: 0.85rem 1.5rem; border-radius: var(--radius); font-family: var(--sans); font-size: 0.92rem; font-weight: 600; border: 1px solid transparent; cursor: pointer; transition: transform var(--duration) var(--ease), background var(--duration) var(--ease), border-color var(--duration) var(--ease), color var(--duration) var(--ease); } .btn:hover { transform: translateY(-1px); } .btn-primary { background: var(--accent); color: var(--accent-ink); } .btn-primary:hover { background: var(--accent-hover); } .btn-ghost { border-color: var(--line-2); color: var(--text); } .btn-ghost:hover { border-color: var(--accent); background: var(--accent-soft); } .btn-block { width: 100%; } .link-arrow { display: inline-flex; align-items: center; gap: 0.4rem; font-weight: 600; font-size: 0.9rem; color: var(--text); border-bottom: 1px solid var(--line-2); padding-bottom: 2px; transition: border-color var(--duration) var(--ease), color var(--duration) var(--ease); } .link-arrow:hover { border-color: var(--accent); color: var(--accent); } /* ============================================================= HEADER ============================================================= */ .site-header { position: sticky; top: 0; z-index: 100; background: rgba(8, 8, 15, 0.82); backdrop-filter: blur(20px); -webkit-backdrop-filter: blur(20px); border-bottom: 1px solid transparent; transition: border-color var(--duration) var(--ease), background var(--duration) var(--ease); } .site-header[data-scrolled] { border-bottom-color: var(--line); background: rgba(8, 8, 15, 0.94); } .header-inner { display: flex; align-items: center; justify-content: space-between; padding-block: 1rem; gap: 1rem; } .brand { font-family: var(--display); font-weight: var(--brand-weight); font-size: 1.05rem; letter-spacing: -0.02em; line-height: 1.1; } .brand-suffix { display: block; font-family: var(--sans); font-size: 0.56rem; font-weight: 500; letter-spacing: 0.22em; text-transform: uppercase; color: var(--faint); } /* Header lockup: the sticker badge next to the wordmark. The badge carries the shop name in its own artwork, but at 52px that lettering is far too small to read, so the wordmark does the actual identifying and the badge is decorative (alt=""). */ .brand--logo { display: inline-flex; align-items: center; gap: 0.6rem; } .brand-logo { width: 52px; height: auto; flex: none; } .brand-text { display: block; } .nav { display: flex; align-items: center; gap: 1.6rem; font-size: 0.88rem; } .nav a { color: var(--dim); transition: color var(--duration) var(--ease); } .nav a:hover { color: var(--text); } .nav .pill { color: var(--dim); } .nav .pill--solid { color: var(--accent-ink); } .nav-phone { color: var(--accent) !important; font-variant-numeric: tabular-nums; white-space: nowrap; } /* ============================================================= NAV: SERVICES DROPDOWN + MOBILE PANEL Click driven, never hover: a hover menu cannot be opened by a finger. Above 940px the services list floats under its trigger; below, the whole nav folds into a panel and the list runs inline inside it so nothing is ever positioned off screen. ============================================================= */ .nav-menu { display: flex; align-items: center; gap: 1.6rem; } .nav-dd { position: relative; } .nav-dd-trigger { display: inline-flex; align-items: center; gap: 0.4rem; background: none; border: none; cursor: pointer; font-family: var(--sans); font-size: inherit; color: var(--dim); padding: 0; transition: color var(--duration) var(--ease); } .nav-dd-trigger:hover { color: var(--text); } .nav-dd-caret { width: 0.42em; height: 0.42em; border-right: 1.5px solid currentColor; border-bottom: 1.5px solid currentColor; transform: translateY(-0.15em) rotate(45deg); transition: transform var(--duration) var(--ease); } .nav-dd[data-open] .nav-dd-trigger { color: var(--text); } .nav-dd[data-open] .nav-dd-caret { transform: translateY(0.1em) rotate(-135deg); } .nav-dd-menu { display: none; list-style: none; position: absolute; top: calc(100% + 0.9rem); left: -1rem; min-width: 15rem; background: var(--raised); border: 1px solid var(--line-2); border-radius: 12px; padding: 0.5rem; box-shadow: 0 24px 60px rgba(0,0,0,0.55); } .nav-dd[data-open] .nav-dd-menu { display: block; } .nav-dd-menu a { display: block; padding: 0.6rem 0.8rem; border-radius: 8px; color: var(--dim); transition: background var(--duration) var(--ease), color var(--duration) var(--ease); } .nav-dd-menu a:hover { background: var(--accent-soft); color: var(--text); } /* The page you are already on, marked in both the visible list and the accessibility tree. */ .nav-dd-menu a[aria-current="page"] { color: var(--accent); font-weight: 600; } /* Hamburger. Hidden above the mobile breakpoint. */ .nav-toggle { display: none; align-items: center; justify-content: center; width: 44px; height: 44px; margin-right: -0.5rem; background: none; border: 1px solid var(--line-2); border-radius: 9px; color: var(--text); cursor: pointer; } .nav-toggle-bars, .nav-toggle-bars::before, .nav-toggle-bars::after { display: block; width: 17px; height: 1.5px; background: currentColor; border-radius: 2px; transition: transform var(--duration) var(--ease), opacity var(--duration) var(--ease); } .nav-toggle-bars { position: relative; } .nav-toggle-bars::before, .nav-toggle-bars::after { content: ""; position: absolute; left: 0; } .nav-toggle-bars::before { top: -5.5px; } .nav-toggle-bars::after { top: 5.5px; } .nav[data-open] .nav-toggle-bars { background: transparent; } .nav[data-open] .nav-toggle-bars::before { transform: translateY(5.5px) rotate(45deg); } .nav[data-open] .nav-toggle-bars::after { transform: translateY(-5.5px) rotate(-45deg); } /* Panel-only items. The phone number and Book are already reachable elsewhere on desktop, so they only appear once the nav collapses. The panel's call link gets its own class rather than reusing .nav-phone, which is hidden outright at 560px. */ .nav-links--panel { display: none; } .nav-call { color: var(--accent) !important; font-variant-numeric: tabular-nums; } /* ============================================================= BREADCRUMBS Sits where the old "Home / Wraps" eyebrow was, but as a real ordered list with a Breadcrumb landmark so it reads correctly and matches the BreadcrumbList schema on the same page. ============================================================= */ .breadcrumb { margin-bottom: 1rem; } .breadcrumb ol { list-style: none; display: flex; flex-wrap: wrap; align-items: center; gap: 0.15rem 0.5rem; font-size: 0.78rem; font-weight: 600; letter-spacing: 0.1em; text-transform: uppercase; color: var(--faint); } .breadcrumb li { display: flex; align-items: center; gap: 0.5rem; } .breadcrumb li + li::before { content: "\203A"; color: var(--faint); font-size: 0.95rem; line-height: 1; } .breadcrumb a { color: var(--accent); transition: color var(--duration) var(--ease); } .breadcrumb a:hover { color: var(--accent-hover); } .breadcrumb [aria-current="page"] { color: var(--dim); } /* ============================================================= HERO ============================================================= */ .hero { padding-top: clamp(3rem, 2rem + 4vw, 6rem); padding-bottom: var(--space-section); } .hero-grid { display: grid; grid-template-columns: 1.05fr 0.95fr; gap: clamp(2rem, 1rem + 4vw, 4.5rem); align-items: center; } .hero h1 { font-size: var(--text-hero); font-weight: var(--hero-weight); text-transform: uppercase; letter-spacing: var(--hero-track); } .hero h1 .thin { font-weight: var(--hero-thin); color: var(--dim); } .hero-lede { font-size: var(--text-lede); color: var(--dim); max-width: 40ch; margin-top: 1.4rem; } .hero-actions { display: flex; flex-wrap: wrap; gap: 0.8rem; margin-top: 2rem; } .hero-visual { position: relative; } .hero-stats { display: flex; gap: clamp(1.5rem, 1rem + 2vw, 3rem); margin-top: 2.6rem; flex-wrap: wrap; } .stat-val { font-family: var(--display); font-size: 1.5rem; font-weight: 700; letter-spacing: -0.02em; } .stat-label { font-size: 0.68rem; letter-spacing: 0.12em; text-transform: uppercase; color: var(--faint); margin-top: 0.2rem; } /* The one built element in the hero, not a photo. Montar mocks a search result; we show the Google rating the shop actually has. */ .rating-card { position: absolute; right: 0; bottom: -1.5rem; background: var(--raised); border: 1px solid var(--line-2); border-radius: 14px; padding: 0.9rem 1.1rem; box-shadow: 0 24px 60px rgba(0,0,0,0.55); display: flex; align-items: center; gap: 0.9rem; } .rating-score { font-family: var(--display); font-size: 1.8rem; font-weight: 700; line-height: 1; } .rating-stars { color: var(--accent); font-size: 0.8rem; letter-spacing: 0.12em; } .rating-meta { font-size: 0.72rem; color: var(--faint); margin-top: 0.15rem; } /* ============================================================= LOCAL BAND ============================================================= */ .local-band { border-block: 1px solid var(--line); padding-block: 1.1rem; } .local-row { display: flex; flex-wrap: wrap; gap: 0.5rem 1.6rem; align-items: center; justify-content: center; font-size: 0.82rem; color: var(--faint); list-style: none; } .local-row li { display: flex; align-items: center; gap: 0.5rem; } .local-row li::before { content: ""; width: 5px; height: 5px; border-radius: 50%; background: var(--accent); flex-shrink: 0; } .local-row strong { color: var(--text); font-weight: 600; } /* ============================================================= PROPS ============================================================= */ .props { display: grid; grid-template-columns: repeat(4, 1fr); gap: clamp(1.5rem, 1rem + 2vw, 3rem); } .prop h3 { font-size: 1.05rem; margin-bottom: 0.5rem; } .prop p { font-size: 0.9rem; color: var(--dim); } .prop-mark { font-family: var(--display); font-size: 0.8rem; color: var(--accent); letter-spacing: 0.1em; display: block; margin-bottom: 0.9rem; } /* ============================================================= SERVICE LIST A list, not seven boxes. Rows separated by hairlines, with the button on the right where the price used to sit. The row is no longer a link. The button is the only anchor, and its ::after is stretched over the whole row, so the entire row stays clickable without nesting one inside another. ============================================================= */ .svc-list { list-style: none; border-top: 1px solid var(--line); } .svc-row { position: relative; display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 1rem 2rem; align-items: center; padding-block: clamp(1.2rem, 0.9rem + 1vw, 1.8rem); border-bottom: 1px solid var(--line); transition: background var(--duration) var(--ease); } .svc-row:hover { background: rgba(255,255,255,0.02); } .svc-row:hover .svc-name { color: var(--accent); } .svc-name { font-family: var(--display); font-size: clamp(1.15rem, 1rem + 0.8vw, 1.7rem); font-weight: 700; letter-spacing: -0.025em; transition: color var(--duration) var(--ease); } .svc-desc { font-size: 0.88rem; color: var(--dim); margin-top: 0.35rem; max-width: 52ch; } /* No position on .svc-cta itself: the ::after then resolves against .svc-row, which is the positioned ancestor, and covers the row. */ .svc-cta { white-space: nowrap; } .svc-cta::after { content: ""; position: absolute; inset: 0; z-index: 1; } /* ============================================================= QUOTE LINE (service pages) Replaces the old price block. Every job is priced on the car, so this says what moves the number and sends them to the form instead of naming a figure. ============================================================= */ .quote-line { display: flex; flex-wrap: wrap; align-items: center; gap: 0.8rem 1.2rem; border: 1px solid var(--line-2); border-left: 3px solid var(--accent); border-radius: var(--radius); padding: 1.1rem 1.2rem; margin-top: 2rem; background: rgba(255,255,255,0.02); } .quote-line-note { font-size: 0.9rem; color: var(--dim); flex: 1 1 22ch; min-width: 0; } .quote-line .btn { flex-shrink: 0; } /* ============================================================= PLACEHOLDERS Every image and video slot. Deliberately ugly so nobody mistakes one for finished art. ============================================================= */ .ph { position: relative; width: 100%; border: 2px dashed var(--line-2); border-radius: var(--radius); background: repeating-linear-gradient(135deg, rgba(255,255,255,0.015) 0 10px, transparent 10px 20px), var(--surface); display: flex; flex-direction: column; justify-content: center; align-items: center; gap: 0.5rem; padding: 1rem; text-align: center; overflow: hidden; } .ph-id { font-family: var(--display); font-size: 0.78rem; font-weight: 700; letter-spacing: 0.14em; color: var(--accent); border: 1px solid var(--accent); border-radius: 999px; padding: 0.25em 0.8em; } .ph-note { font-size: 0.72rem; line-height: 1.45; color: var(--dim); max-width: 44ch; } .ph--video { border-style: solid; border-color: var(--accent); } .ph--video .ph-id { background: var(--accent); color: var(--accent-ink); } /* ============================================================= GALLERY GRID ============================================================= */ .grid-2 { display: grid; grid-template-columns: repeat(2, 1fr); gap: 1rem; } .grid-3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1rem; } .grid-4 { display: grid; grid-template-columns: repeat(4, 1fr); gap: 1rem; } /* ============================================================= SPLIT (text + visual) ============================================================= */ .split { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(2rem, 1rem + 4vw, 4.5rem); align-items: center; } .split--wide-left { grid-template-columns: 1.15fr 0.85fr; } /* ============================================================= DETAIL BLOCKS ============================================================= */ .detail-list { list-style: none; display: grid; gap: clamp(1.6rem, 1.2rem + 1.2vw, 2.6rem); } .detail-list--2 { grid-template-columns: repeat(2, 1fr); } .detail h3 { margin-bottom: 0.5rem; } .detail p { color: var(--dim); font-size: 0.92rem; } /* ============================================================= QUOTE / FORM ============================================================= */ .quote-grid { display: grid; grid-template-columns: 0.85fr 1.15fr; gap: clamp(2rem, 1rem + 4vw, 4.5rem); align-items: start; } .promises { list-style: none; display: grid; gap: 0.6rem; margin-top: 1.6rem; font-size: 0.92rem; color: var(--dim); } .promises li { display: flex; gap: 0.6rem; align-items: baseline; } .promises li::before { content: "✓"; color: var(--accent); font-weight: 700; } .quote-contact { margin-top: 2rem; display: grid; gap: 0.3rem; } .quote-contact a { font-weight: 600; } .quote-contact a[href^="tel"] { color: var(--accent); font-size: 1.15rem; font-variant-numeric: tabular-nums; } .form-box { background: var(--surface); border: 1px solid var(--line); border-radius: 14px; padding: clamp(1.4rem, 1rem + 1.5vw, 2.2rem); } .form-box h3 { margin-bottom: 0.3rem; } .form-sub { font-size: 0.85rem; color: var(--faint); margin-bottom: 1.4rem; } .form-box label { display: block; font-size: 0.72rem; letter-spacing: 0.1em; text-transform: uppercase; color: var(--faint); margin-bottom: 0.4rem; font-weight: 600; } .form-box input, .form-box select, .form-box textarea { width: 100%; background: var(--bg); border: 1px solid var(--line-2); border-radius: 8px; color: var(--text); font-family: var(--sans); font-size: 0.92rem; padding: 0.7rem 0.8rem; margin-bottom: 1rem; transition: border-color var(--duration) var(--ease); } .form-box input:focus, .form-box select:focus, .form-box textarea:focus { border-color: var(--accent); outline: none; } .form-box textarea { resize: vertical; } .row-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 0 1rem; } .row-3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: 0 1rem; } .form-reassure { font-size: 0.78rem; color: var(--faint); margin-top: 0.8rem; text-align: center; } .form-consent { font-size: 0.68rem; color: var(--faint); line-height: 1.5; margin-top: 0.8rem; } /* Confirms a color carried over from /colors. Without it the pre-filled message box just looks like a bug. */ .form-colornote { display: flex; align-items: baseline; gap: 0.5rem; font-size: 0.85rem; color: var(--dim); border-left: 3px solid var(--accent); background: var(--accent-soft); border-radius: 0 var(--radius) var(--radius) 0; padding: 0.7rem 0.9rem; margin-bottom: 1.2rem; } .form-colornote strong { color: var(--text); font-weight: 600; } .form-success { display: none; text-align: center; padding: 2rem 0; } .form-success h3 { margin-bottom: 0.6rem; } .form-success p { color: var(--dim); font-size: 0.92rem; } /* Save-to-contacts CTA in the post-submit success panel. Uses var(--accent) so it follows whichever palette is active. */ .save-contact { margin-top: 1.4rem; padding-top: 1.25rem; border-top: 1px solid rgba(255,255,255,0.12); } .form-success .save-contact-lead { font-size: 0.88rem; line-height: 1.5; margin: 0 0 0.75rem; color: var(--text); } .save-contact-btn { display: inline-flex; align-items: center; justify-content: center; gap: 0.5rem; padding: 0.82rem 1.4rem; border-radius: 8px; background: var(--accent); color: var(--accent-ink, #0a0a0a); font-weight: 700; font-size: 0.95rem; text-decoration: none; transition: transform 0.2s, filter 0.2s; } .save-contact-btn:hover { filter: brightness(1.08); transform: translateY(-1px); } .save-contact-btn svg { flex: none; } .form-success .save-contact-alt { font-size: 0.78rem; opacity: 0.65; margin: 0.65rem 0 0; } .save-contact-alt a { color: inherit; } .hp { position: absolute; left: -9999px; } /* ============================================================= REVIEWS ============================================================= */ .reviews { display: grid; grid-template-columns: repeat(3, 1fr); gap: clamp(1.5rem, 1rem + 2vw, 2.5rem); } .review { border-top: 1px solid var(--line-2); padding-top: 1.4rem; } .review .stars { color: var(--accent); font-size: 0.8rem; letter-spacing: 0.14em; margin-bottom: 0.9rem; } .review p { font-size: 0.95rem; line-height: 1.6; } .review .who { margin-top: 1rem; font-size: 0.82rem; font-weight: 600; } .review .who span { display: block; font-weight: 400; color: var(--faint); font-size: 0.75rem; margin-top: 0.15rem; } /* ============================================================= FAQ ============================================================= */ .faq { border-top: 1px solid var(--line); max-width: 78ch; } .faq-item { border-bottom: 1px solid var(--line); } .faq-q { width: 100%; text-align: left; background: none; border: none; cursor: pointer; font-family: var(--sans); font-size: 1rem; font-weight: 600; color: var(--text); padding: 1.1rem 2.5rem 1.1rem 0; position: relative; } .faq-q::after { content: "+"; position: absolute; right: 0.4rem; top: 50%; transform: translateY(-50%); color: var(--accent); font-size: 1.3rem; font-weight: 400; transition: transform var(--duration) var(--ease); } .faq-item.open .faq-q::after { transform: translateY(-50%) rotate(45deg); } .faq-a { max-height: 0; overflow: hidden; transition: max-height var(--duration) var(--ease); } .faq-a p { color: var(--dim); font-size: 0.92rem; padding-bottom: 1.2rem; max-width: 68ch; } /* ============================================================= FOOTER ============================================================= */ .site-footer { border-top: 1px solid var(--line); padding-block: clamp(3rem, 2rem + 3vw, 5rem) 2rem; } .footer-grid { display: grid; grid-template-columns: 1.4fr repeat(3, 1fr); gap: 2rem; } .footer-grid h4 { font-family: var(--sans); font-size: 0.7rem; letter-spacing: 0.14em; text-transform: uppercase; color: var(--faint); margin-bottom: 1rem; font-weight: 600; } .footer-grid ul { list-style: none; display: grid; gap: 0.5rem; font-size: 0.87rem; color: var(--dim); } .footer-grid a:hover { color: var(--accent); } .footer-legal { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 0.5rem; margin-top: clamp(2.5rem, 2rem + 2vw, 4rem); padding-top: 1.5rem; border-top: 1px solid var(--line); font-size: 0.76rem; color: var(--faint); } /* ============================================================= STICKY MOBILE BAR ============================================================= */ .stickybar { display: none; } /* ============================================================= REVEAL ============================================================= */ .reveal { opacity: 0; transform: translateY(14px); transition: opacity 0.6s var(--ease), transform 0.6s var(--ease); } .reveal.is-in { opacity: 1; transform: none; } @media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } *, *::before, *::after { animation-duration: 0.01ms !important; transition-duration: 0.01ms !important; } .reveal { opacity: 1; transform: none; } } /* ============================================================= BREAKPOINTS Two global stops, same as Montar. Components that need a third declare it themselves. ============================================================= */ @media (max-width: 940px) { .hero-grid, .split, .split--wide-left, .quote-grid { grid-template-columns: 1fr; } .props { grid-template-columns: repeat(2, 1fr); } .reviews { grid-template-columns: 1fr; } .footer-grid { grid-template-columns: 1fr 1fr; } .rating-card { position: static; margin-top: 1rem; } .grid-4 { grid-template-columns: repeat(2, 1fr); } /* --- nav folds into a panel ------------------------------------ The links used to be simply hidden here, which left phones with no way into any page but the one they landed on. The panel is anchored to .shell (the nearest positioned ancestor) so it spans the header and can never sit off screen. */ .nav-toggle { display: inline-flex; } .nav-menu { display: none; position: absolute; top: calc(100% + 1rem); left: 0; right: 0; flex-direction: column; align-items: stretch; gap: 0; background: var(--raised); border: 1px solid var(--line-2); border-radius: 12px; padding: 0.5rem; box-shadow: 0 24px 60px rgba(0,0,0,0.55); max-height: calc(100dvh - 6rem); overflow-y: auto; overscroll-behavior: contain; } .nav[data-open] .nav-menu { display: flex; } .nav-menu > a, .nav-dd-trigger { display: flex; align-items: center; min-height: 44px; padding: 0.5rem 0.8rem; border-radius: 8px; font-size: 0.95rem; } .nav-dd { width: 100%; } .nav-dd-trigger { width: 100%; justify-content: space-between; } /* Inline inside the panel rather than a floating card. */ .nav-dd-menu { position: static; min-width: 0; border: none; box-shadow: none; background: transparent; padding: 0 0 0.4rem 0.8rem; border-left: 1px solid var(--line-2); margin: 0.1rem 0 0.3rem 0.8rem; } .nav-dd-menu a { min-height: 44px; display: flex; align-items: center; font-size: 0.92rem; } .nav-links--panel { display: flex; } } @media (max-width: 560px) { /* The header carries the badge, the quote pill and the menu button at this width. The wordmark is clipped rather than display:none so the shop name still reaches a screen reader, and the badge alone stands in visually. */ .brand-text { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; } /* The badge is wider than tall (260x242), so 44px wide lands at 41px high and misses the tap target. 48px clears it. */ .brand-logo { width: 48px; } .brand--logo { gap: 0; } /* Not enough room for brand + number + button. The sticky bar at the bottom of the screen already carries a Call button. */ .nav-phone { display: none; } .props { grid-template-columns: 1fr; } .detail-list--2 { grid-template-columns: 1fr; } .grid-3, .grid-2 { grid-template-columns: 1fr; } .footer-grid { grid-template-columns: 1fr; } .row-2, .row-3 { grid-template-columns: 1fr; } .svc-row { grid-template-columns: 1fr; } .svc-cta { justify-self: start; } .local-row { justify-content: flex-start; } .stickybar { display: flex; gap: 0.6rem; position: fixed; left: 0; right: 0; bottom: 0; z-index: 120; padding: 0.7rem var(--shell-pad) calc(0.7rem + env(safe-area-inset-bottom)); background: rgba(8, 8, 15, 0.95); backdrop-filter: blur(20px); -webkit-backdrop-filter: blur(20px); border-top: 1px solid var(--line); } .stickybar .btn { flex: 1; padding-block: 0.75rem; } body { padding-bottom: 4.5rem; } } /* --- footer row (Montar shape: brand, one nav line, one legal line) --- */ .footer-row { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 1.5rem; } /* The shop's sticker logo. Lives in the footer rather than the header: the header wordmark is typographic and a sticker up there would fight it. Down here it reads as the real thing off the shop wall. */ .brand--mark { display: inline-block; padding-block: 0; line-height: 0; } .brand--mark img { width: 130px; height: auto; } @media (max-width: 560px) { .brand--mark img { width: 108px; } } .footer-nav { display: flex; flex-wrap: wrap; gap: 0.6rem 1.4rem; font-size: 0.87rem; color: var(--dim); } .footer-nav a:hover { color: var(--accent); } .footer-legal a { color: var(--dim); } .footer-legal a:hover { color: var(--accent); } @media (max-width: 560px) { .footer-legal { flex-direction: column; } } /* --- narrow-screen safety ------------------------------------------- A 1fr grid track is sized by its content's min-content width, so one long unbreakable word (PROTECTION on /ppf) or a date input's intrinsic width (on /booking) can push the whole column past the viewport. min-width:0 lets the track shrink; the hero override keeps the longest heading word inside 375px. */ .hero-grid > *, .quote-grid > *, .split > * { min-width: 0; } .form-box input, .form-box select, .form-box textarea { min-width: 0; max-width: 100%; } @media (max-width: 560px) { .hero h1 { font-size: clamp(2.15rem, 0.9rem + 5.6vw, 3rem); } /* "PROTECTION" is the longest single word in any heading on the site and it will not fit at the size above. Only that page opts down. */ .hero h1.h1--long { font-size: clamp(1.7rem, 0.4rem + 6vw, 2.4rem); } } /* --- hero video slots: desktop and mobile cuts, same split as live --- */ .ph-mobile-only { display: none; } @media (max-width: 940px) { .ph-desktop-only { display: none; } .ph-mobile-only { display: flex; } } /* Real hero media, for slots that are no longer placeholders. Mirrors the .ph-*-only split above, so the vertical clip is only shown on the breakpoint it was cut for. width/height and aspect-ratio are both set so the box is reserved before the file arrives and CLS stays at 0. */ .hero-media { display: none; width: 100%; height: auto; border-radius: var(--radius); object-fit: cover; background: var(--surface); } @media (max-width: 940px) { .hero-media--mobile { display: block; } } /* The hero runs one clip at both breakpoints. Desktop crops the vertical file to a 16:10 box via object-fit; mobile keeps its native 9:16. The ratio is set here rather than inline so the media query can win, and the stylesheet is render blocking so the box is still reserved before paint. */ .hero-media--hero { display: block; aspect-ratio: 16 / 10; } @media (max-width: 940px) { .hero-media--hero { aspect-ratio: 9 / 16; } } /* Service-page hero photo. No object-fit and no forced aspect-ratio: the photo keeps its own proportions so nothing is stretched or cropped. The width/height attributes on the tag give the browser the ratio up front, so the box is reserved before the file lands and CLS stays at 0. Unlike .work-media there is no hover transform: this one is not a link. */ .hero-photo { display: block; width: 100%; height: auto; border-radius: var(--radius); background: var(--surface); } /* ============================================================= BEFORE / AFTER PAIR Two shots of the same panel from the same angle. The grid stays at two columns on every screen: side by side is the whole point, and stacking would put the two halves a scroll apart. ============================================================= */ .ba-pair { display: grid; grid-template-columns: 1fr 1fr; gap: 0.6rem; } .ba-item { position: relative; min-width: 0; } .ba-item img { display: block; width: 100%; height: auto; border-radius: var(--radius); background: var(--surface); } /* The only labels on any photo on the site. A before/after is unreadable without them, unlike the gallery tiles. */ .ba-label { position: absolute; left: 0.5rem; bottom: 0.5rem; padding: 0.25em 0.7em; border-radius: 999px; font-size: 0.7rem; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; background: rgba(8, 10, 6, 0.78); backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); color: var(--text); border: 1px solid var(--line-2); } .ba-label--after { background: var(--accent); color: var(--accent-ink); border-color: var(--accent); } /* Real work tiles, for the .grid-3 slots that are no longer placeholders. No object-fit and no forced aspect-ratio: the photo keeps its own proportions, so nothing is ever stretched or cropped. The width and height attributes on the tag give the browser the intrinsic ratio, so the box is still reserved before the file arrives and CLS stays at 0. */ .work-media { display: block; width: 100%; height: auto; border-radius: var(--radius); background: var(--surface); transition: transform var(--duration) var(--ease), filter var(--duration) var(--ease); } @media (hover: hover) { .work-media:hover { transform: translateY(-4px); filter: brightness(1.08); } } @media (prefers-reduced-motion: reduce) { .work-media { transition: none; } .work-media:hover { transform: none; } } /* ============================================================= COLOR BROWSER (/colors) Chips are CSS backgrounds, never images. 69 photos in a grid would be unusable on a phone; a hex costs nothing and paints instantly. Photography is reserved for the detail panel, where it can be a real car we wrapped. ============================================================= */ .cf { display: grid; gap: 1.1rem; padding-bottom: 1.6rem; border-bottom: 1px solid var(--line); } .cf-group { display: flex; align-items: baseline; gap: 0.9rem; flex-wrap: wrap; } .cf-group--end { justify-content: space-between; } .cf-label { font-size: var(--text-eyebrow); font-weight: 600; letter-spacing: 0.14em; text-transform: uppercase; color: var(--faint); flex: 0 0 4.5rem; } .cf .pill { cursor: pointer; } .cf .pill.is-on { background: var(--accent); border-color: var(--accent); color: var(--accent-ink); } .cf-dot { width: 0.7em; height: 0.7em; border-radius: 50%; display: inline-block; margin-right: 0.15em; border: 1px solid rgba(255,255,255,0.25); } .cf-check { display: inline-flex; align-items: center; gap: 0.5rem; font-size: 0.85rem; color: var(--dim); cursor: pointer; } .cf-check input { accent-color: var(--accent); width: 1rem; height: 1rem; } .cf-reset { background: none; border: none; cursor: pointer; font-family: var(--sans); } .cf-count { margin: 1.2rem 0 1.6rem; } .cf-empty { color: var(--dim); font-size: 0.92rem; } .cgrid { list-style: none; display: grid; grid-template-columns: repeat(6, 1fr); gap: 1rem 0.9rem; } .cgrid-item { position: relative; min-width: 0; } .cchip { display: block; width: 100%; background: none; border: none; padding: 0; cursor: pointer; text-align: left; font-family: var(--sans); color: inherit; } .cchip-swatch { display: block; width: 100%; aspect-ratio: 1; border-radius: var(--radius); border: 1px solid var(--line-2); transition: transform var(--duration) var(--ease), border-color var(--duration) var(--ease); } @media (hover: hover) { .cchip:hover .cchip-swatch { transform: translateY(-3px); border-color: var(--accent); } } .cchip-meta { display: block; margin-top: 0.5rem; } .cchip-name { display: block; font-size: 0.82rem; font-weight: 500; color: var(--text); line-height: 1.3; } .cchip-code { display: block; font-size: 0.72rem; color: var(--faint); margin-top: 0.1rem; } .cchip-star { color: var(--accent); } /* Plus button over the top-right of each swatch. 44px hit area with a 26px visual, so a finger has something to land on without the control covering half the colour it is meant to be showing. */ .cchip-add { position: absolute; top: 0; right: 0; width: 44px; height: 44px; display: grid; place-items: center; background: none; border: none; cursor: pointer; color: var(--text); font-size: 0.9rem; line-height: 1; isolation: isolate; opacity: 0; transition: opacity var(--duration) var(--ease); } .cchip-add::before { content: ""; position: absolute; z-index: -1; width: 26px; height: 26px; border-radius: 50%; background: rgba(8,10,6,0.72); border: 1px solid var(--line-2); } .cgrid-item:hover .cchip-add, .cchip-add:focus-visible, .cchip-add.is-on { opacity: 1; } .cchip-add.is-on { color: var(--accent-ink); } .cchip-add.is-on::before { background: var(--accent); border-color: var(--accent); } .cchip-add:disabled { cursor: not-allowed; opacity: 0; } .cgrid-item:hover .cchip-add:disabled { opacity: 0.35; } /* ============================================================= PINNED QUOTE BAR (/colors) Stays on screen while they browse, so the shortlist and the way out of the page are never scrolled away from. ============================================================= */ .cquote { position: fixed; left: 0; right: 0; bottom: 0; z-index: 130; background: rgba(8,10,6,0.95); backdrop-filter: blur(20px); -webkit-backdrop-filter: blur(20px); border-top: 1px solid var(--line-2); padding-block: 0.8rem; padding-bottom: calc(0.8rem + env(safe-area-inset-bottom)); } .cquote-inner { display: flex; align-items: center; justify-content: space-between; gap: 1rem; } .cquote-list { display: flex; gap: 0.4rem; flex-wrap: wrap; } .cquote-chip { width: 30px; height: 30px; border-radius: 7px; border: 1px solid var(--line-2); display: block; } .cquote-go { white-space: nowrap; } body.has-quote-bar { padding-bottom: 5.5rem; } /* --- detail panel --- */ .cpanel { position: fixed; inset: 0; z-index: 200; display: flex; align-items: center; justify-content: center; padding: 1.5rem; } .cpanel[hidden] { display: none; } .cpanel-scrim { position: absolute; inset: 0; background: rgba(0,0,0,0.72); backdrop-filter: blur(4px); } .cpanel-card { --cpanel-pad: clamp(1.4rem, 1rem + 1.5vw, 2.2rem); position: relative; width: min(30rem, 100%); max-height: 90dvh; overflow-y: auto; background: var(--raised); border: 1px solid var(--line-2); border-radius: 16px; padding: var(--cpanel-pad); box-shadow: 0 30px 80px rgba(0,0,0,0.6); } .cpanel-x { position: absolute; top: 0.5rem; right: 0.5rem; width: 44px; height: 44px; background: none; border: none; color: var(--dim); font-size: 1.6rem; line-height: 1; cursor: pointer; } .cpanel-x:hover { color: var(--text); } .cpanel-swatch { width: 100%; aspect-ratio: 16 / 10; border-radius: var(--radius); border: 1px solid var(--line-2); margin-bottom: 1.4rem; } .cpanel-code { font-size: 0.8rem; color: var(--faint); letter-spacing: 0.08em; margin-top: 0.3rem; } .cpanel-notes { font-size: 0.9rem; color: var(--dim); margin-top: 0.9rem; } .cpanel-actions { display: flex; flex-wrap: wrap; gap: 0.6rem; margin-top: 1.6rem; } .cpanel-actions .btn { flex: 1 1 12rem; } /* With no official page to link to, the quote button is the only action and should fill the row rather than sit half-width. */ .cpanel-actions .btn:only-of-type { flex: 1 1 100%; } .cpanel-added { margin-top: 0.9rem; } /* ============================================================= COLOURS ON THE QUOTE FORM Chips above the form, not text dropped into the message box: the visitor's own message stays theirs, and each color can be taken off with one tap. ============================================================= */ .qcolors { border: 1px solid var(--line-2); border-left: 3px solid var(--accent); border-radius: var(--radius); background: rgba(255,255,255,0.02); padding: 0.9rem 1rem; margin-bottom: 1.4rem; } .qcolors-lead { font-size: var(--text-eyebrow); font-weight: 600; letter-spacing: 0.14em; text-transform: uppercase; color: var(--faint); margin-bottom: 0.7rem; } .qcolors-list { list-style: none; display: flex; flex-wrap: wrap; gap: 0.5rem; } .qcolor { display: inline-flex; align-items: center; gap: 0.5rem; border: 1px solid var(--line-2); border-radius: 999px; padding: 0.3rem 0.3rem 0.3rem 0.5rem; background: var(--bg); } .qcolor-dot { width: 18px; height: 18px; border-radius: 50%; border: 1px solid var(--line-2); flex: none; } .qcolor-name { font-size: 0.8rem; color: var(--text); } .qcolor-x { width: 28px; height: 28px; border-radius: 50%; background: none; border: none; cursor: pointer; color: var(--faint); font-size: 1.05rem; line-height: 1; display: grid; place-items: center; } .qcolor-x:hover { color: var(--text); background: rgba(255,255,255,0.06); } @media (max-width: 940px) { .cgrid { grid-template-columns: repeat(4, 1fr); } .cf-label { flex-basis: 100%; } /* No hover on touch, so the add control has to be permanently visible. */ .cchip-add { opacity: 1; } .cchip-add:disabled { opacity: 0.35; } /* Filter pills and the checkbox row have to clear 44px on touch. */ .cf .pill { min-height: 44px; padding-inline: 1rem; } .cf-check { min-height: 44px; } /* 24px is the WCAG 2.2 AA target-size floor; the 44px row comes from the label wrapping it. */ .cf-check input { width: 1.5rem; height: 1.5rem; } .qcolor { padding: 0.35rem 0.35rem 0.35rem 0.6rem; } .qcolor-x { width: 44px; height: 44px; } } @media (max-width: 560px) { .cgrid { grid-template-columns: repeat(3, 1fr); gap: 0.8rem 0.6rem; } /* Swatches are ~100px wide here; a 44px control would cover half of one, so shrink the hit area to 38px and the dot to match. */ .cchip-add { width: 38px; height: 38px; } .cchip-add::before { width: 23px; height: 23px; } .cquote-go { flex: 1; } .cquote-chip { width: 26px; height: 26px; } body.has-quote-bar { padding-bottom: 6rem; } .cchip-name { font-size: 0.75rem; } .cchip-code { font-size: 0.68rem; } .cpanel { padding: 0.9rem; } .cpanel-actions .btn { flex: 1 1 100%; } .cf-quote { width: 100%; } } /* ============================================================= MAP Lazy iframe with a fixed aspect ratio so it reserves its space and CLS stays at 0. The filter inverts Google's light default into something that belongs on a dark page. ============================================================= */ .map-grid { display: grid; grid-template-columns: 0.8fr 1.2fr; gap: clamp(2rem, 1rem + 4vw, 4.5rem); align-items: center; } .map-grid > * { min-width: 0; } .map-frame { position: relative; aspect-ratio: 16 / 10; border: 1px solid var(--line-2); border-radius: 14px; overflow: hidden; background: var(--surface); } .map-frame iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; display: block; filter: invert(1) hue-rotate(180deg) contrast(0.82) brightness(0.92) saturate(0.7); } .map-address { font-family: var(--display); font-size: var(--text-h3); font-weight: 700; letter-spacing: -0.025em; line-height: 1.15; } .map-lines { display: grid; gap: 0.35rem; margin-top: 1.2rem; color: var(--dim); font-size: 0.92rem; } .map-lines a[href^="tel"] { color: var(--accent); font-weight: 600; font-variant-numeric: tabular-nums; } .map-hours { margin-top: 1.4rem; display: grid; gap: 0.3rem; font-size: 0.88rem; color: var(--dim); } .map-hours span { display: flex; justify-content: space-between; gap: 1rem; max-width: 22rem; border-bottom: 1px solid var(--line); padding-bottom: 0.3rem; } .map-hours b { font-weight: 500; color: var(--text); } @media (max-width: 940px) { .map-grid { grid-template-columns: 1fr; } } /* ============================================================= SMALL SCREEN PASS Findings from an audit at 360, 390 and 768. Everything here is a fix for something that was measurably wrong on a phone, not a restyle. Uses the two stops already declared above. ============================================================= */ /* Everything here applies from 940px down, not just at phone width. 768px is a touch screen too, and it was failing the same tap-target and type-size checks the 360px layout was. */ @media (max-width: 940px) { /* A form control under 16px makes iOS Safari zoom the whole page on focus, and it does not zoom back out. Every input was 0.92rem. */ .form-box input, .form-box select, .form-box textarea { font-size: 16px; } .form-box label { font-size: 0.75rem; } /* 0.7rem of padding left the controls at 43.6px, just under the bar. */ .form-box input, .form-box select { padding-block: 0.78rem; } /* --- tap targets, measured at 44px ---------------------------- */ /* Padding rather than min-height: the brand is two stacked lines and a flex column shrinks it to min-content, which wraps the wordmark. */ .brand { display: inline-block; padding-block: 0.5rem; } /* Re-assert the lockup: the rule above would otherwise drop it back to inline-block and stack the badge above the wordmark. The badge is already 52px, so it needs no padding to clear a 44px target. */ .brand--logo { display: inline-flex; align-items: center; padding-block: 0; } .nav .pill { min-height: 44px; padding-inline: 1.1rem; } .footer-nav { gap: 0.2rem 1.4rem; } .footer-nav a { display: flex; align-items: center; min-height: 44px; } .link-arrow { min-height: 44px; } .faq-q { min-height: 44px; } .quote-contact a, .map-lines a { display: inline-flex; align-items: center; min-height: 44px; } .breadcrumb a, .breadcrumb [aria-current="page"] { display: inline-flex; align-items: center; min-height: 44px; } /* Booking time slots were ~30px tall and packed tight. */ .pill-row { gap: 0.55rem; } .time-slot { min-height: 44px; padding-inline: 1rem; } /* --- type that measured under 12px ---------------------------- */ .form-consent { font-size: 0.75rem; } .footer-legal { font-size: 0.8rem; } .stat-label { font-size: 0.75rem; } .rating-meta { font-size: 0.78rem; } .ph-note { font-size: 0.78rem; } .eyebrow { font-size: 0.78rem; } .brand-suffix { font-size: 0.62rem; } } /* The header phone number only exists between 561 and 940px: it is display:none below that. Scoped to the range so raising it to a 44px target cannot resurrect it on the narrow layout, where the sticky Call button already covers it and there is no room in the header. */ @media (min-width: 561px) and (max-width: 940px) { .nav-phone { display: inline-flex; align-items: center; min-height: 44px; } } @media (max-width: 560px) { /* The button in the service-page quote block goes full width rather than sitting alone on a line at 100px wide. The note's flex-grow has to be dropped with it: once the axis is vertical, growing means growing in height, which opens a gap above the button. */ .quote-line { flex-direction: column; align-items: stretch; } .quote-line-note { flex: 0 0 auto; } .quote-line .btn { width: 100%; } /* Was capped at 22rem, which overhung the 360px content column. */ .map-hours span { max-width: none; } /* The gallery keeps two columns rather than dropping to one: a single column of 3:4 tiles makes the page 24 screens long on a phone. */ .grid-4 { gap: 0.6rem; } }