/* Callahan Tire and Lube. Every font size is a multiple of 4px and lives here — see STANDARDS.md §2. */ :root { --fs-label: 12px; --fs-small: 16px; --fs-body: 16px; --fs-lead: 20px; --fs-h3: 24px; --fs-h2: 32px; --fs-script: 96px; --fs-block: 40px; --tire: min(calc(100vw - 2 * var(--pad)), 59vh, 896px); --fs-logo-script: 28px; --fs-logo-block: 12px; --fs-oil: 40px; --fs-score: 36px; --fs-arrow: 28px; --fs-h1: 40px; --font-script: 'Yellowtail', cursive; --font-block: 'Alfa Slab One', Georgia, serif; --font-body: 'Inter', system-ui, sans-serif; --ink: #17110f; --card-ink: #3b3530; --paper: #f4ecc9; --accent: #e0b03c; --card1: #f4d47e; --card2: #f7e6b8; --card3: #f2ece0; --red1: #b52b40; --red2: #9d2235; --red3: #6e1423; --sheet: linear-gradient(172deg, var(--card1), var(--card2) 55%, var(--card3)); --glass: linear-gradient(150deg, var(--red1), var(--red2) 50%, var(--red3)); --line: rgb(59 53 48 / .14); --pad: 20px; --top: 64px; --max: 1200px; --road: #282320; --img-card3: linear-gradient(var(--card3), var(--card3)); --img-ink: linear-gradient(var(--ink), var(--ink)); --img-red2: linear-gradient(var(--red2), var(--red2)); --img-road: linear-gradient(var(--road), var(--road)); --img-card1: linear-gradient(var(--card1), var(--card1)); --under: 0px; } /* Safari fix, step 2 (touch screens): the hero runs on under iOS 26's floating URL box, so real page (the road) shows through it */ @property --under-k { syntax: ''; inherits: true; initial-value: 1; } @media (hover: none) and (pointer: coarse) { :root.ios-safari { --under-full: calc(100lvh - 100svh + env(safe-area-inset-bottom, 0px) + 96px); --under: calc(var(--under-full) * var(--under-k)); } } /* Ryan, 2026-10-20: the run-on road under Safari's URL box is only needed at the very top (full URL box over it). Once the visitor scrolls, it recedes and the next section rides up to meet the road; back at the top it runs on again. Phones and tablets only (site.js sets html.road-in). */ @media (hover: none) and (pointer: coarse) and (max-width: 1099px) { :root.ios-safari { transition: --under-k .4s cubic-bezier(.2, .7, .25, 1); } html.road-in { --under-k: 0; } } @media (prefers-reduced-motion: reduce) { :root.ios-safari { transition: none; } } @media (min-width: 600px) { :root { --fs-h1: 56px; --fs-h2: 44px; --fs-oil: 56px; --pad: 40px; } } @media (min-width: 1100px) { :root { --fs-h1: 72px; --fs-h2: 56px; --fs-oil: 72px; --pad: 72px; --top: 72px; } } @media (min-width: 1800px) { :root { --fs-h1: 88px; --fs-h2: 64px; --fs-oil: 80px; --fs-lead: 24px; --fs-score: 44px; --max: 1480px; } } /* Hero lock-up (tire + Callahan + TIRE AND LUBE). Ryan's mark-up, 2026-10-20: the tire 40% larger than its original rule (59% of the screen height, 896px cap; phones capped by the width). Both words are sized FROM THE TIRE, so the lock-up looks the same on every screen: "Callahan" centred on the hub, TIRE AND LUBE across the bottom of the tire, clear of the C. Narrow screens cap both by the width. Rounded down to the 4px scale. */ :root { --fs-script: round(down, min(var(--tire) * .5, (100vw - 2 * var(--pad)) * .3), 4px); --fs-block: round(down, min(var(--tire) * .14, (100vw - 2 * var(--pad)) / 9.4), 4px); } *, *::before, *::after { box-sizing: border-box; } input, button, select, textarea { font: inherit; } html, body { overflow-x: hidden; overflow-x: clip; overscroll-behavior-x: none; } /* Safari fix, step 1: every full-width background is a one-colour IMAGE, never a flat colour, so iOS 26 Safari shows the page through its bars. Only things pinned at a screen edge (header, call bar) keep a flat colour (step 5). */ html, body { background: var(--img-card3); } /* Safari fix, step 3 (touch screens): while the hero covers the top, one FLAT colour (the header's gold) so the status-bar strip is gold, not white */ @media (hover: none) and (pointer: coarse) { html.top-zone, html.top-zone body { background: var(--card1); } } html { scroll-behavior: smooth; scroll-padding-top: var(--top); } body { margin: 0; color: var(--card-ink); font: 400 var(--fs-body)/1.6 var(--font-body); } img { display: block; max-width: 100%; height: auto; } h1, h2, h3 { margin: 0; line-height: 1; text-wrap: balance; } h2 { font: 400 var(--fs-h2)/1.05 var(--font-block); color: var(--red2); } h3 { font: 800 var(--fs-h3)/1.2 var(--font-body); color: var(--ink); } a { color: var(--red2); } .nowrap { white-space: nowrap; } .center { text-align: center; } .sr { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; } .kicker { margin: 0 0 12px; font: 800 var(--fs-label)/1 var(--font-body); letter-spacing: .24em; text-transform: uppercase; color: var(--red2); } section { padding: 96px var(--pad); } section > * { max-width: var(--max); margin-inline: auto; } /* Buttons */ .btn { display: inline-flex; align-items: center; justify-content: center; gap: 6px; min-height: 48px; padding: 0 24px; border-radius: 999px; font: 800 var(--fs-body)/1 var(--font-body); text-decoration: none; white-space: nowrap; cursor: pointer; border: 0; } .btn-call { background: var(--glass); color: #fff8ea; box-shadow: 0 8px 24px rgb(110 20 35 / .3); } .btn-ghost { border: 3px solid var(--red2); color: var(--red2); background: transparent; } .btn-solid { background: var(--red2); color: #fff8ea; } .btn-small { min-height: 44px; padding: 0 16px; font-size: var(--fs-small); } .cta { display: flex; gap: 12px; justify-content: center; flex-wrap: wrap; margin-top: 28px; } /* Call + Directions: the standard pair (hero, oil, visit, call bar). Two-line buttons: label on top, detail under it. */ .pair { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; width: min(100%, 440px); margin: 28px auto 0; } .pair > *, .pair .dir > * { width: 100%; } /* Directions open: Apple + Google take the WHOLE pair, Call steps aside (house rule, as The Pig and the call bar) */ .pair:has(.dir.open) > .btn { display: none; } .pair:has(.dir.open) > .dir { grid-column: 1 / -1; } @media (min-width: 1800px) { .pair { width: min(100%, 520px); } } .btn:has(> .btn__sub) { flex-direction: column; gap: 2px; min-height: 64px; padding: 8px 12px; line-height: 1.2; } .btn__label { display: inline-flex; align-items: center; justify-content: center; gap: 8px; font-size: var(--fs-lead); } .btn__sub { display: block; max-width: 100%; white-space: nowrap; font: 400 var(--fs-body)/1.25 var(--font-body); } /* Directions opens IN PLACE into Apple Maps + Google Maps: the closed button and the two choices share one grid cell */ .dir { display: inline-grid; vertical-align: top; } .dir > * { grid-area: 1 / 1; min-width: 0; } .dir:not(.open) .dir-opts, .dir.open .dir-toggle { visibility: hidden; } .dir-opts { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; } .dir-opts .btn { min-width: 0; padding-inline: 6px; gap: 6px; box-shadow: none; } .dir-opts .btn svg { width: 20px; height: 20px; flex: none; } .dir.open .dir-opts .btn { animation: dir-in .28s cubic-bezier(.2, 1.2, .4, 1) both; } .dir.open .dir-opts .btn + .btn { animation-delay: .06s; } @keyframes dir-in { from { opacity: 0; transform: scale(.85); } } /* Header */ .top { position: fixed; z-index: 30; inset: 0 0 auto; height: var(--top); display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 16px; padding: 0 var(--pad); background-color: var(--card1); border-bottom: 1px solid var(--line); } .logo { display: flex; flex: none; flex-direction: column; text-decoration: none; line-height: .9; justify-self: start; } .top-right { display: flex; align-items: center; gap: 16px; justify-self: end; } .logo-script { font: 400 var(--fs-logo-script)/.9 var(--font-script); color: var(--red2); transform: rotate(-6deg); transform-origin: left bottom; } .logo-block { font: 400 var(--fs-logo-block)/1 var(--font-block); color: var(--red2); letter-spacing: .02em; white-space: nowrap; } .top-nav { display: none; align-items: center; gap: 24px; } .top-nav a { color: var(--card-ink); font-weight: 600; text-decoration: none; } .top-nav a:hover { color: var(--red2); } /* Services drop-down in the header (Ryan, 2026-10-20): the Directions button's smoky glass and gold, under the tab */ .nav-drop { position: relative; display: flex; align-items: center; } .nav-drop-btn { display: inline-flex; align-items: center; gap: 6px; min-height: 44px; padding: 0; border: 0; background: none; cursor: pointer; color: var(--card-ink); font: inherit; font-weight: 600; } .nav-drop-btn:hover, .nav-drop-btn[aria-expanded='true'] { color: var(--red2); } .nav-drop-btn svg { width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 2.5; stroke-linecap: round; stroke-linejoin: round; transition: transform .2s; } .nav-drop-btn[aria-expanded='true'] svg { transform: rotate(180deg); } .nav-drop-pop { position: absolute; top: calc(100% + 12px); left: 50%; transform: translateX(-50%); z-index: 70; display: grid; min-width: 264px; padding: 8px; border: 3px solid var(--card1); border-radius: 16px; background: rgb(23 17 15 / .82); box-shadow: 0 16px 40px rgb(0 0 0 / .35); -webkit-backdrop-filter: blur(8px) saturate(1.2); backdrop-filter: blur(8px) saturate(1.2); } .nav-drop-pop[hidden] { display: none; } .top-nav .nav-drop-pop a { display: flex; align-items: center; min-height: 44px; padding: 0 12px; border-radius: 8px; color: var(--card2); font-weight: 600; letter-spacing: 0; text-transform: none; white-space: nowrap; } .top-nav .nav-drop-pop a:hover, .top-nav .nav-drop-pop a:focus-visible { background: rgb(244 212 126 / .14); color: var(--card1); } .top-nav .nav-drop-pop .nav-drop-all { margin-top: 4px; border-top: 1px solid rgb(244 212 126 / .3); border-radius: 0 0 8px 8px; color: var(--card1); font-weight: 800; } .hide-phone { display: none; } @media (min-width: 900px) { .top-nav { display: flex; } } /* The header holds logo, nav, open pill and Call from 900px; the number joins Call at 1500px, where it fits beside the four nav links with the pill still in the centre (at 1280 it pushed the pill 40px left) */ @media (min-width: 1500px) { .hide-phone { display: inline; } } /* 900–1199px: the pill already opens the hours, so the Hours link steps out and the pill stays near the centre */ @media (min-width: 900px) and (max-width: 1199px) { .top-nav .nav-hours { display: none; } } /* Open/closed pill in the header on wide screens only (Gunsmoke, The Pig); phones see the hero's and the visit's */ .top .open-pill { background: rgb(12 11 11 / .82); } .top .open-pill.is-open { background: rgb(20 40 16 / .86); } /* Hero (intro 1 — tire roll-in) */ .hero { position: relative; min-height: calc(100svh + var(--under)); display: grid; place-items: center; overflow: hidden; padding: calc(var(--top) + 32px) var(--pad) calc(120px + var(--under)); isolation: isolate; background: var(--img-road); } .hero::before { content: ''; position: absolute; inset: 0 0 var(--under); z-index: -1; background-color: var(--card1); background-image: image-set(url('/img/hero-road-1672.webp?v=85f7bae21f') type('image/webp'), url('/img/hero-road-1672.jpg?v=aa5e69248a') type('image/jpeg')); background-size: cover; background-position: center bottom; background-repeat: no-repeat; } @media (max-width: 700px) { .hero::before { background-image: image-set(url('/img/hero-road-960.webp?v=99cd04bf90') type('image/webp'), url('/img/hero-road-960.jpg?v=89a7d7e26d') type('image/jpeg')); } } .hero > * { max-width: none; } .road { position: absolute; left: 0; right: 0; bottom: 0; height: 14%; background: linear-gradient(#1c1715, #110d0c); z-index: -1; } .road::before { content: ''; position: absolute; left: 0; right: 0; top: 50%; height: 4px; background: repeating-linear-gradient(90deg, var(--accent) 0 48px, transparent 48px 96px); opacity: .5; } .col { display: grid; justify-items: center; } .stage { position: relative; width: var(--tire); height: var(--tire); } /* The words sit ON the tire: same grid cell. Script baseline across the hub, slab caps across the lower tread band. */ .hero .stage, .hero .name { grid-area: 1 / 1; } .roll { position: absolute; inset: 0; } .skid { position: absolute; top: 94%; right: 50%; height: 16px; border-radius: 8px; transform-origin: left center; transform: scaleX(0); background: repeating-linear-gradient(90deg, rgb(0 0 0 / .85) 0 10px, rgb(0 0 0 / .55) 10px 14px); filter: blur(.6px); } .tire-x { position: absolute; inset: 0; } .tire { width: 100%; height: 100%; display: block; filter: drop-shadow(0 12px 16px rgb(0 0 0 / .5)); } .smoke { position: absolute; left: 50%; top: 92%; width: 1px; height: 1px; } .smoke i { position: absolute; width: 48px; height: 48px; margin: -24px; border-radius: 50%; background: radial-gradient(rgb(220 220 220 / .5), transparent 70%); opacity: 0; } .name { position: relative; z-index: 2; display: grid; justify-items: center; align-self: start; text-align: center; line-height: .9; margin-top: calc(var(--tire) * .5 - var(--fs-script) * var(--base)); --base: .5; --band: .87; max-width: 100%; } .name .script { display: inline-block; position: relative; padding: 0 8px 8px; font: 400 var(--fs-script)/1 var(--font-script); transform: rotate(-6deg); } .name .script::before { content: attr(data-text); position: absolute; left: 0; top: 0; padding: inherit; color: var(--paper); -webkit-text-stroke: .07em var(--paper); text-shadow: 0 .05em .08em rgb(0 0 0 / .55); } .name .script .ink { position: relative; padding: .1em .25em; margin: 0 -.25em; background: var(--glass); -webkit-background-clip: text; background-clip: text; color: transparent; } .name .block { display: block; margin-top: calc(var(--tire) * (var(--band) - .5) - var(--fs-block) * .5 - var(--fs-script) * (1 - var(--base)) - 8px); font: 400 var(--fs-block)/1 var(--font-block); color: var(--red2); letter-spacing: .02em; white-space: nowrap; text-shadow: 0 .05em .08em rgb(0 0 0 / .4); } .name .script, .name .block span { opacity: .01; } .name .block span { display: inline-block; } .hero .tagline { margin: 20px 0 0; text-align: center; font-size: var(--fs-lead); } .hero .tagline { opacity: .01; } .hero.ready .tagline { animation: rise .6s ease-out both; } .hero .btn-call { background: var(--glass) fixed; } /* Open pill: in the header row. Desktop: centred between the logo and the nav. Phones: top right, big enough to tap, and the header Call button goes away (the call bar has it). Tap = the week's hours drop down (as Gunsmoke). */ .top .top-pill { margin: 0; justify-self: center; align-self: center; grid-column: 2; border-width: 1px; cursor: pointer; } .top .top-pill svg { width: 14px; height: 14px; flex: none; transition: transform .2s; } .top .top-pill[aria-expanded='true'] svg { transform: rotate(180deg); } .hours-pop { position: absolute; top: calc(100% + 8px); left: 50%; transform: translateX(-50%); z-index: 70; min-width: 240px; padding: 12px 16px; border-radius: 16px; /* Ryan, 2026-10-20: the hero Directions button's look: near-black smoky glass, gold outline */ background: rgb(23 17 15 / .82); -webkit-backdrop-filter: blur(8px) saturate(1.2); backdrop-filter: blur(8px) saturate(1.2); border: 3px solid var(--card1); box-shadow: 0 16px 40px rgb(0 0 0 / .35); color: var(--card2); } .hours-pop[hidden] { display: none; } .hours-pop table { border-collapse: collapse; width: 100%; font-size: var(--fs-small); } .hours-pop td { padding: 4px 0; color: var(--card2); } .hours-pop td + td { text-align: right; padding-left: 24px; white-space: nowrap; } .hours-pop tr.today td { color: var(--card1); font-weight: 700; } .hours-pop a { display: block; margin-top: 8px; color: var(--card1); font-weight: 700; text-decoration: none; min-height: 32px; line-height: 32px; } @media (max-width: 899px) { .top { grid-template-columns: auto 1fr; gap: 8px; padding-inline: 16px; } .top-right { display: none; } .top .top-pill { grid-column: 2; justify-self: end; min-height: 44px; padding: 8px 14px; } .hours-pop { left: auto; right: 16px; transform: none; } } @keyframes rise { from { opacity: .01; transform: translateY(12px); } to { opacity: 1; transform: none; } } /* Trust strip */ .trust { padding: 0; background: var(--img-red2); color: #fff8ea; } .trust ul { list-style: none; margin: 0 auto; padding: 24px var(--pad); display: grid; grid-template-columns: repeat(2, 1fr); gap: 16px; max-width: var(--max); } .trust li { display: flex; flex-direction: column; align-items: center; text-align: center; } .trust b { font: 400 var(--fs-h3)/1.2 var(--font-block); color: var(--card1); } .trust span { font-size: var(--fs-small); opacity: .9; } @media (min-width: 900px) { .trust ul { grid-template-columns: repeat(4, 1fr); } } /* Centered section heads */ .reviews h2, .reviews .kicker, .changer h2, .changer .kicker { text-align: center; } /* Services (Ryan, 2026-10-20): the shop-sign title, then one card per service with what to have ready when you call so the call goes quicker. The hero's icon band links to the cards. */ .services { background: var(--sheet); } .board-title { display: flex; flex-direction: column; align-items: center; font: 400 var(--fs-h2)/1 var(--font-block); color: var(--red2); text-align: center; } .board-script { font: 400 44px/1 var(--font-script); transform: rotate(-6deg); margin-bottom: 4px; } @media (min-width: 600px) { .board-script { font-size: 64px; } } .svc-list { max-width: 1040px; margin: 0 auto; } .svc-intro { margin: 16px auto 0; max-width: 640px; text-wrap: balance; text-align: center; font-size: var(--fs-lead); color: var(--card-ink); } .svc-grid { display: grid; gap: 24px; margin-top: 32px; } .svc { display: flex; flex-direction: column; gap: 12px; min-width: 0; padding: 24px 20px; background: #fbf3d8; border: 3px solid var(--red2); border-radius: 8px; box-shadow: 0 12px 32px rgb(110 20 35 / .12); scroll-margin-top: calc(var(--top) + 16px); } .svc:target { box-shadow: 0 0 0 4px var(--accent), 0 12px 32px rgb(110 20 35 / .12); } .svc-head { display: flex; align-items: center; gap: 12px; } .svc-head svg { flex: none; width: 40px; height: 40px; fill: none; stroke: var(--red2); stroke-width: 3; stroke-linecap: round; stroke-linejoin: round; } .svc h3 { margin: 0; font: 400 var(--fs-h3)/1.1 var(--font-block); color: var(--red2); text-wrap: balance; } .svc-lede { margin: 0; font-weight: 600; color: var(--ink); text-wrap: balance; } .svc-label { margin: 4px 0 0; font: 800 var(--fs-label)/1.2 var(--font-body); letter-spacing: .16em; text-transform: uppercase; color: var(--red2); } .svc-ready { display: grid; gap: 8px; margin: 0; padding: 0; list-style: none; } .svc-ready li { position: relative; padding-left: 24px; color: var(--card-ink); line-height: 1.4; } .svc-ready li::before { content: ''; position: absolute; left: 4px; top: 8px; width: 8px; height: 8px; border-radius: 50%; background: var(--red2); } .svc-tip { margin-top: 4px; padding: 16px; border-radius: 8px; background: rgb(157 34 53 / .06); border-top: 2px dotted rgb(157 34 53 / .3); } .svc-tip p { margin: 4px 0 0; color: var(--card-ink); line-height: 1.45; } .svc-tip .svc-label { margin-top: 0; color: var(--red2); } .svc-size { display: flex; align-items: flex-start; justify-content: center; gap: 12px; margin-top: 12px !important; font: 400 var(--fs-h3)/1 var(--font-block); color: var(--ink) !important; } .svc-size span { display: grid; justify-items: center; gap: 8px; min-width: 64px; } .svc-size b { font-weight: 400; } .svc-size i { font: 700 var(--fs-label)/1 var(--font-body); font-style: normal; letter-spacing: .08em; text-transform: uppercase; color: var(--red2); } .svc-tip .svc-size-key { margin-top: 12px; font-size: var(--fs-small); line-height: 1.45; } .svc-call { align-self: stretch; margin-top: auto; } @media (min-width: 600px) { .svc { padding: 32px; } } /* Ryan, 2026-10-20: two across from 900px, an odd last card centred; wide screens stack 3 over 2 as an upside-down pyramid, each row centred (six half-columns, every card two of them wide). */ @media (min-width: 900px) and (max-width: 1299px) { .svc-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); } .svc { grid-column: span 2; } .svc:last-child:nth-child(odd) { grid-column: 2 / span 2; } } @media (min-width: 1300px) { .svc-list { max-width: 1400px; } .svc-grid { grid-template-columns: repeat(6, minmax(0, 1fr)); } .svc { grid-column: span 2; } .svc:nth-child(4) { grid-column: 2 / span 2; } } @media (max-width: 599px) { .svc-head { justify-content: center; } .svc-lede { text-align: center; } } @media (max-width: 389px) { .svc { padding: 20px 16px; } .svc-tip { padding: 12px; } .svc-size { gap: 4px; } .svc-size span { min-width: 0; } } /* The hero's icon band: each icon is a link to its service */ .hero-band li > a { display: inherit; flex: 1; flex-direction: inherit; align-items: inherit; justify-content: inherit; gap: inherit; min-width: 0; min-height: 48px; color: inherit; text-decoration: none; border-radius: 8px; } .hero-band li > a:hover span, .hero-band li > a:focus-visible span { text-decoration: underline; text-decoration-thickness: 2px; text-underline-offset: 4px; } /* Tire change */ .changer { background: var(--img-ink); color: var(--paper); overflow: hidden; overflow: clip; } .changer h2 { color: var(--card1); } .changer .kicker { color: var(--accent); } .changer-grid { display: grid; gap: 32px; align-items: center; margin-top: 40px; } @media (min-width: 900px) { .changer-grid { grid-template-columns: 1.2fr 1fr; } } .changer-art { position: relative; width: min(100%, 520px); margin-inline: auto; aspect-ratio: 1; overflow: hidden; overflow: clip; } .changer-art svg { width: 100%; height: 100%; display: block; overflow: hidden; } .changer-side { display: grid; gap: 20px; justify-items: center; text-align: center; } @media (min-width: 900px) { .changer-side { justify-items: start; text-align: left; } } .steps { list-style: none; margin: 0; padding: 0; display: flex; gap: 8px; flex-wrap: wrap; justify-content: inherit; } .steps li { font: 800 var(--fs-label)/1 var(--font-body); letter-spacing: .1em; text-transform: uppercase; padding: 8px 12px; border-radius: 999px; border: 1px solid rgb(244 236 201 / .25); color: rgb(244 236 201 / .6); } .steps li.on { background: var(--accent); border-color: var(--accent); color: var(--ink); } .steps li.done { color: var(--paper); border-color: rgb(244 236 201 / .6); } .say { margin: 0; min-height: 80px; font-size: var(--fs-lead); max-width: 480px; } .gauge { width: 160px; height: 124px; } .gauge text { fill: var(--paper); font-family: var(--font-body); } .act { min-width: 240px; user-select: none; -webkit-user-select: none; touch-action: none; } .act[disabled] { opacity: .5; cursor: default; } .act.holding { transform: scale(.97); } /* Reviews — Gunsmoke's Google reviews box: score link, card carousel, arrows on desktop (src/js/reviews.js) */ .reviews { background: var(--sheet); } .rv-head { display: grid; justify-items: center; text-align: center; margin-bottom: 32px; } .rv-head h2 { margin-bottom: 16px; } .rv-score { display: inline-flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: 8px 12px; min-height: 48px; color: var(--ink); text-decoration: none; font-size: var(--fs-body); } .rv-score b { font: 400 var(--fs-score)/1 var(--font-block); color: var(--red2); } .rv-score span:not(.rv-stars):not(.sr) { color: var(--card-ink); font-weight: 600; text-decoration: underline; text-underline-offset: 4px; } .rv-score:hover span:not(.rv-stars):not(.sr) { color: var(--red2); } .rv-stars { color: #c98a0b; letter-spacing: 2px; font-size: var(--fs-lead); line-height: 1; } .rv-wrap { position: relative; } .rv-track { list-style: none; margin: 0; padding: 4px 4px 16px; display: grid; grid-auto-flow: column; grid-auto-columns: min(85%, 360px); gap: 16px; overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: thin; overscroll-behavior-x: contain; } .rv-card { scroll-snap-align: start; display: grid; align-content: start; gap: 12px; padding: 20px; border: 1px solid var(--line); border-radius: 20px; background: rgb(255 250 240 / .85); } .rv-top { display: flex; align-items: center; gap: 12px; } .rv-top > div { display: grid; gap: 4px; min-width: 0; flex: 1; } .rv-avatar { flex: none; width: 40px; height: 40px; border-radius: 50%; display: grid; place-items: center; background: var(--red2); color: var(--card1); font: 800 var(--fs-body)/1 var(--font-body); } .rv-name { color: var(--ink); font-size: var(--fs-body); line-height: 1.2; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .rv-when { color: var(--card-ink); font-size: var(--fs-label); line-height: 1.2; } .rv-src { flex: none; padding: 4px 8px; border: 1px solid var(--line); border-radius: 999px; color: var(--card-ink); font: 800 var(--fs-label)/1 var(--font-body); letter-spacing: .06em; } .rv-text { color: var(--card-ink); font-size: var(--fs-body); line-height: 1.5; display: -webkit-box; -webkit-line-clamp: 5; -webkit-box-orient: vertical; overflow: hidden; } .rv-text p { margin: 0; } .rv-text p + p { margin-top: 8px; } .rv-card.is-open .rv-text { -webkit-line-clamp: unset; display: block; } .rv-more { justify-self: start; min-height: 44px; padding: 0; border: 0; background: none; color: var(--red2); font: 800 var(--fs-body)/1 var(--font-body); text-decoration: underline; text-underline-offset: 3px; cursor: pointer; } .rv-more[hidden] { display: none; } .rv-nav { display: none; } @media (min-width: 1100px) { .rv-track { grid-auto-columns: calc((100% - 32px) / 3); } .rv-nav { display: grid; place-items: center; position: absolute; top: 50%; z-index: 2; width: 48px; height: 48px; margin-top: -32px; padding: 0 0 4px; border: 0; border-radius: 50%; background: var(--red2); color: #fff8ea; font: 400 var(--fs-arrow)/1 var(--font-body); cursor: pointer; box-shadow: 0 6px 16px rgb(110 20 35 / .25); } .rv-nav:hover { background: var(--red3); } .rv-prev { left: -64px; } .rv-next { right: -64px; } } .rv-foot { margin: 16px 0 0; display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 8px; color: var(--card-ink); font-size: var(--fs-body); } .rv-foot a { color: var(--red2); font-weight: 600; } @media (max-width: 699px) { .rv-foot { flex-direction: column; gap: 4px; } .rv-dot { display: none; } .rv-foot a { min-height: 44px; display: inline-flex; align-items: center; } } /* Customer rides — one tile look on both pages: a button holding the photo and its slot number, opening the viewer (src/js/gallery.js). Order and slots come from the home page; tools/sync-chrome.mjs copies the tiles to /gallery/. */ .gallery { background: var(--img-card3); } .gal-head { display: grid; justify-items: center; text-align: center; margin-bottom: 32px; } .gal-tile { position: relative; display: block; width: 100%; aspect-ratio: 4 / 3; padding: 0; border: 0; border-radius: 12px; overflow: hidden; cursor: zoom-in; background-color: var(--road); } .gal-tile img { width: 100%; height: 100%; object-fit: cover; } .gal-tile:focus-visible { outline: 4px solid var(--card1); outline-offset: -4px; box-shadow: inset 0 0 0 7px var(--red2); } .gal-slot { position: absolute; left: 8px; top: 8px; display: grid; place-items: center; min-width: 32px; height: 32px; padding: 0 8px; border-radius: 999px; background: rgb(12 11 11 / .72); color: #fff8ea; font: 800 var(--fs-label)/1 var(--font-body); pointer-events: none; } .gal-foot { max-width: 640px; margin: 24px auto 0; text-align: center; color: var(--card-ink); font-size: var(--fs-small); line-height: 1.5; } .gal-foot a { color: var(--red2); font-weight: 700; } /* Home: a sideways snap carousel (the reviews track's mechanics), arrows from 700px, swipe everywhere */ .gal-wrap { position: relative; } .gal-track { list-style: none; margin: 0; padding: 4px 0 16px; display: grid; grid-auto-flow: column; grid-auto-columns: min(85%, 360px); gap: 12px; overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: thin; overscroll-behavior-x: contain; } .gal-track li { scroll-snap-align: start; } .gal-nav { display: none; } .gal-cta .btn { padding-inline: 12px; } @media (max-width: 699px) { .gallery { padding-inline: 0; } .gal-head, .gal-cta, .gallery .gal-foot { padding-inline: var(--pad); } .gal-cta { width: min(100%, 440px); } .gal-track { padding-inline: var(--pad); scroll-padding-inline: var(--pad); } } @media (min-width: 700px) { .gal-track { grid-auto-columns: calc((100% - 12px) / 2); } .gal-nav { display: grid; place-items: center; position: absolute; top: 50%; z-index: 2; width: 48px; height: 48px; margin-top: -32px; padding: 0 0 4px; border: 0; border-radius: 50%; background: var(--red2); color: #fff8ea; font: 400 var(--fs-arrow)/1 var(--font-body); cursor: pointer; box-shadow: 0 6px 16px rgb(110 20 35 / .25); } .gal-nav:hover { background: var(--red3); } .gal-prev { left: 8px; } .gal-next { right: 8px; } } @media (min-width: 1100px) { .gal-track { grid-auto-columns: calc((100% - 24px) / 3); } .gal-prev { left: -64px; } .gal-next { right: -64px; } } /* /gallery/: two layouts, picked with the Grid / Spotlight switch above the photos (src/js/gallery.js; remembered). Grid (default): the even grid, 2 columns edge to edge on phones, 3 from 700px, 4 from 1100px; nothing grows. Spotlight (hover screens from 700px only): rows of three where the hovered or keyboard-focused tile grows and its row-mates shrink; the row's height comes from its width, so nothing below moves. Touch screens always get Grid. */ .rides { padding-top: calc(var(--top) + 48px); background: var(--img-card3); } .rides-head { display: grid; justify-items: center; text-align: center; margin-bottom: 32px; } .rides h1 { font: 400 var(--fs-h1)/1.05 var(--font-block); color: var(--red2); } .rides-lede { margin: 16px 0 0; font-size: var(--fs-lead); } .gal-mode { display: flex; justify-content: center; gap: 4px; width: fit-content; margin: 0 auto 20px; padding: 4px; border-radius: 999px; background: rgb(59 53 48 / .1); } .gal-mode[hidden] { display: none; } .gal-mode button { min-height: 44px; padding: 0 20px; border: 0; border-radius: 999px; background: transparent; color: var(--card-ink); font: 800 var(--fs-small)/1 var(--font-body); cursor: pointer; } .gal-mode button[aria-pressed='true'] { background: var(--red2); color: #fff8ea; } .gal-mode button:focus-visible { outline: 3px solid var(--red2); outline-offset: 2px; } @media (hover: none), (max-width: 699px) { .gal-mode { display: none; } } .gal-rows { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 4px; } .gal-row { display: contents; list-style: none; margin: 0; padding: 0; } .gal-row > li { min-width: 0; } @media (max-width: 699px) { .rides { padding-inline: 0; } .rides-head { padding-inline: var(--pad); } .gal-rows .gal-tile { border-radius: 0; } } @media (min-width: 700px) { .gal-rows { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; } } @media (min-width: 1100px) { .gal-rows { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 16px; } } @media (min-width: 700px) and (hover: hover) { .gal-rows[data-mode='spotlight'] { display: flex; flex-direction: column; gap: 12px; } .gal-rows[data-mode='spotlight'] .gal-row { display: flex; gap: 12px; aspect-ratio: 4 / 1; min-height: 0; } .gal-rows[data-mode='spotlight'] .gal-row > li { position: relative; flex: 1 1 0; transition: flex-grow .35s ease; } .gal-rows[data-mode='spotlight'] .gal-tile { position: absolute; inset: 0; height: 100%; aspect-ratio: auto; } .gal-rows[data-mode='spotlight'] .gal-row > li:hover, .gal-rows[data-mode='spotlight'] .gal-row > li:has(.gal-tile:focus-visible) { flex-grow: 2.4; } } @media (min-width: 1100px) and (hover: hover) { .gal-rows[data-mode='spotlight'], .gal-rows[data-mode='spotlight'] .gal-row { gap: 16px; } } /* /gallery/: the two forms (tabs). Each form is numbered cards (1 · You, 2 · Your ride, 3 · Your story; take-down: 1 · You, 2 · The photo) and one footer row (photos | consent | Send). Phones: the same cards, one column. Labels 16/700 above the fields, help 16/400 muted, fields 48px, 12px radius, one border colour. */ .post { background: var(--sheet); --field-line: rgb(59 53 48 / .28); --muted: #5f564e; } .post-card { max-width: var(--max); } .post-tabs { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 4px; width: min(100%, 640px); margin: 0 auto 28px; padding: 4px; border-radius: 20px; background: rgb(59 53 48 / .1); } .post-tab { min-height: 48px; padding: 8px 4px; border: 0; border-radius: 16px; background: transparent; color: var(--card-ink); font: 800 var(--fs-body)/1.2 var(--font-body); cursor: pointer; } .post-tab[aria-selected='true'] { background: var(--red2); color: #fff8ea; box-shadow: 0 4px 12px rgb(110 20 35 / .25); } .post-tab:focus-visible { outline: 3px solid var(--red2); outline-offset: 2px; } .post-panel[hidden] { display: none; } .post-panel > h2 { text-align: center; } .post-lede { margin: 12px 0 0; text-align: center; font-size: var(--fs-lead); line-height: 1.4; } .post-form { position: relative; display: grid; gap: 24px; margin-top: 28px; } .f-legend { margin: 0 0 -16px; color: var(--muted); font-size: var(--fs-small); line-height: 1.2; } .f-star { color: var(--red2); font-weight: 800; } .f-card { min-width: 0; padding: 20px; border: 1px solid var(--line); border-radius: 16px; background: #fffaf0; display: grid; gap: 16px; } .f-card-head { display: grid; gap: 4px; } .f-card-title { color: var(--red2); font: 800 var(--fs-label)/1.4 var(--font-body); letter-spacing: .16em; text-transform: uppercase; } .f-card-note { color: var(--muted); font-size: var(--fs-small); line-height: 1.4; } .f-grid { display: grid; gap: 16px; } .f-row { display: grid; gap: 8px; align-content: start; min-width: 0; } .f-row > label { color: var(--ink); font-weight: 700; line-height: 1.3; } .post-form input[type='text'], .post-form input[type='number'], .post-form input[type='tel'], .post-form input[type='email'], .post-form textarea { width: 100%; min-height: 48px; padding: 12px 14px; border: 1px solid var(--field-line); border-radius: 12px; background: #fff; color: var(--ink); font-size: var(--fs-body); line-height: 1.4; } .post-form textarea { resize: vertical; } .post-form input:focus-visible, .post-form textarea:focus-visible { outline: 3px solid var(--red2); outline-offset: 1px; border-color: var(--red2); } .post-form input:user-invalid, .post-form textarea:user-invalid { border-color: var(--red2); } .post-form input[data-vin] { text-transform: uppercase; letter-spacing: .08em; font-variant-numeric: tabular-nums; } .f-hint, .f-msg { margin: 0; color: var(--muted); font-size: var(--fs-small); line-height: 1.4; } .f-msg[hidden], .f-status[hidden], .f-files[hidden] { display: none; } .f-msg[data-kind='error'], .f-status[data-kind='error'] { color: var(--red2); font-weight: 700; } .f-status[data-kind='ok'], .f-vin-say[data-kind='ok'] { color: #2b5e1c; font-weight: 700; } /* Footer row: Add photos (a ghost button over the real file input) | consent | Send */ .f-foot { display: grid; gap: 20px; align-items: center; } .f-photos { display: grid; gap: 8px; justify-items: start; min-width: 0; } .f-file { position: absolute; width: 1px; height: 1px; opacity: 0; overflow: hidden; } .f-add { min-height: 48px; padding: 0 24px; border-width: 2px; } .f-photos:has(.f-file:focus-visible) .f-add { outline: 3px solid var(--red2); outline-offset: 2px; } .f-files { list-style: none; margin: 0; padding: 0; display: flex; gap: 12px; max-width: 100%; overflow: hidden; white-space: nowrap; } .f-files li { display: flex; align-items: center; gap: 6px; min-width: 0; } .f-files img { flex: none; width: 32px; height: 32px; border-radius: 6px; object-fit: cover; background-color: var(--road); } .f-files span { min-width: 0; overflow: hidden; text-overflow: ellipsis; font-size: var(--fs-small); } .f-files:not([hidden]) + .f-photos-hint { display: none; } .f-hp { position: absolute; width: 1px; height: 1px; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap; } .f-check { display: grid; grid-template-columns: 24px 1fr; gap: 12px; align-items: center; } .f-check input { width: 24px; height: 24px; margin: 0; accent-color: var(--red2); } .f-check label { display: block; min-height: 44px; padding: 10px 0; line-height: 1.4; color: var(--ink); cursor: pointer; } /* Post my vehicle: what we may show, three boxes, one tick is enough (Ryan, 2026-10-20) */ .f-show { margin: 0; padding: 0; border: 0; min-width: 0; } .f-show legend { padding: 0; margin-bottom: 4px; font-weight: 700; color: var(--ink); line-height: 1.4; } @media (min-width: 600px) { .f-show { display: flex; flex-wrap: wrap; column-gap: 24px; } .f-show legend { flex-basis: 100%; } } .f-send { width: 100%; min-height: 56px; font-size: var(--fs-lead); } .f-send[disabled] { opacity: .6; cursor: progress; } .f-status { margin: -16px 0 0; font-size: var(--fs-body); } .post-foot { margin: -16px 0 0; color: var(--muted); font-size: var(--fs-small); } .post-why { margin-top: -16px; } .post .gal-foot { margin-top: 32px; } @media (min-width: 600px) { .post-form { gap: 32px; } .f-legend { margin-bottom: -24px; } .post-why { margin-top: -24px; } .f-card { padding: 24px; } .f-you { grid-template-columns: repeat(3, minmax(0, 1fr)); } .f-ride { grid-template-columns: 120px minmax(0, 1fr) minmax(0, 1fr); } .f-slotrow { grid-template-columns: 120px minmax(0, 1fr); } .f-photo-row { grid-template-columns: minmax(0, 1fr) minmax(0, 2fr); align-items: end; } } @media (min-width: 700px) { .f-card-head { display: flex; align-items: baseline; justify-content: space-between; gap: 16px; } .f-card-note { text-align: right; } } @media (min-width: 900px) { .f-story { grid-template-columns: repeat(2, minmax(0, 1fr)); } .f-foot { grid-template-columns: minmax(0, 1fr) minmax(0, 1.4fr) auto; gap: 32px; } .f-foot-2 { grid-template-columns: minmax(0, 1fr) auto; } .f-send { width: auto; min-width: 240px; padding-inline: 32px; justify-self: end; } .f-status { text-align: right; } .post-foot { justify-self: end; max-width: 720px; } } /* The photo viewer: fills the screen, so it is pinned at every edge and keeps a FLAT colour (Safari fix, step 5) */ html.lb-open, html.lb-open body { overflow: hidden; } .lightbox { position: fixed; inset: 0; width: 100%; height: 100%; max-width: none; max-height: none; margin: 0; padding: 0; border: 0; background-color: #0c0b0b; color: var(--paper); overflow: hidden; } .lightbox::backdrop { background-color: #0c0b0b; } .lightbox[open] { display: block; animation: lb-in .2s ease-out; } .lb-fig { margin: 0; height: 100%; display: grid; grid-template-rows: minmax(0, 1fr) auto; padding: calc(64px + env(safe-area-inset-top)) 0 calc(16px + env(safe-area-inset-bottom)); } .lb-stage { position: relative; } .lb-img { position: absolute; inset: 0; margin: auto; width: auto; height: auto; max-width: 100%; max-height: 100%; } .lb-img.swap { animation: lb-in .2s ease-out; } .lb-cap { display: grid; gap: 4px; justify-items: center; max-width: 720px; margin: 0 auto; padding: 12px var(--pad) 0; text-align: center; font-size: var(--fs-body); line-height: 1.4; } .lb-count { font-size: var(--fs-label); font-weight: 800; letter-spacing: .12em; text-transform: uppercase; color: var(--card1); } .lb-owner { display: grid; justify-items: center; gap: 2px; margin-top: 4px; } .lb-who { font-weight: 700; } .lb-story { max-height: 6em; overflow-y: auto; color: #d9d2c6; } .lb-story[hidden], .lb-claim[hidden] { display: none; } /* Claim My Ride (solid) + Request A Take-Down (ghost), the site's pair; a claimed slot shows only the take-down button */ .lb-pair { width: min(100%, 440px); margin: 12px auto 0; } .lb-pair .btn { min-height: 48px; padding: 8px 12px; white-space: normal; text-align: center; line-height: 1.2; } .lb-pair .btn-ghost { border-color: var(--card1); color: var(--card1); } .lb-pair:has(.lb-claim[hidden]) .lb-takedown { grid-column: 1 / -1; } .lb-btn { position: absolute; z-index: 1; display: grid; place-items: center; width: 48px; height: 48px; padding: 0 0 4px; border: 0; border-radius: 50%; background: rgb(12 11 11 / .6); color: var(--paper); font: 400 var(--fs-arrow)/1 var(--font-body); cursor: pointer; box-shadow: inset 0 0 0 1px rgb(244 236 201 / .25); } .lb-btn:hover { background: var(--red2); } .lb-btn:focus-visible { outline: 3px solid var(--card1); outline-offset: 2px; } .lb-close { top: calc(8px + env(safe-area-inset-top)); right: 8px; } .lb-prev, .lb-next { top: 50%; margin-top: -40px; } .lb-prev { left: 8px; } .lb-next { right: 8px; } /* Phones: Previous / Next sit in the top bar beside Close, off the photo, so the caption and its two buttons get the whole width (a sideways swipe also moves through the photos) */ @media (max-width: 899px) { .lb-prev, .lb-next { top: calc(8px + env(safe-area-inset-top)); margin-top: 0; } .lb-next { left: 64px; right: auto; } } @media (min-width: 900px) { .lb-fig { padding-inline: 88px; } .lb-close { top: 16px; right: 16px; } .lb-prev { left: 24px; } .lb-next { right: 24px; } } @keyframes lb-in { from { opacity: 0; } } @media (prefers-reduced-motion: reduce) { .lightbox[open], .lb-img.swap { animation: none; } .gal-row > li { transition: none; } } /* Visit */ .visit { display: grid; gap: 40px; background: var(--img-card3); max-width: none; } .visit > * { max-width: none; margin: 0; } @media (min-width: 900px) { .visit { grid-template-columns: 1fr 1.2fr; align-items: stretch; padding-inline: max(var(--pad), (100% - var(--max)) / 2); } } .visit address { font-style: normal; font-size: var(--fs-lead); margin: 16px 0; } /* Open pill (house look, as Gunsmoke): dark glass, grey dot; green dot and text when open */ .open-pill { display: inline-flex; align-items: center; gap: 8px; min-height: 36px; margin: 16px 0 0; padding: 6px 14px; border-radius: 999px; border: 1px solid rgb(255 255 255 / .16); background: rgb(12 11 11 / .6); color: #d9d2c6; font: 600 var(--fs-small)/1.1 var(--font-body); white-space: nowrap; } .open-pill::before { content: ''; width: 8px; height: 8px; border-radius: 50%; background: #9c978f; flex: none; } .open-pill.is-open { color: #b9f0ae; background: rgb(20 40 16 / .6); border-color: rgb(95 208 74 / .45); } .open-pill.is-open::before { background: #5fd04a; box-shadow: 0 0 8px #5fd04a; } .hours { border-collapse: collapse; width: 100%; max-width: 360px; } .hours caption { text-align: left; font-weight: 800; margin-bottom: 8px; } .hours th, .hours td { padding: 8px 0; border-bottom: 1px solid var(--line); text-align: left; font-weight: 400; } .hours td { text-align: right; } .hours tr.today th, .hours tr.today td { font-weight: 800; color: var(--red2); } .contact-lines { margin: 16px 0 0; } .visit .pair { margin: 32px 0 0; } /* Visit: one centred column until the two-column layout at 900px */ @media (max-width: 899px) { .visit .kicker, .visit h2, .visit address, .visit .contact-lines, .visit .hours caption { text-align: center; } .visit .open-pill { display: flex; width: fit-content; margin-inline: auto; } .hours, .visit .pair { margin-inline: auto; } } .map { min-height: 320px; border-radius: 20px; overflow: hidden; background: #e5dcc4; display: grid; place-items: center; color: var(--card-ink); } .map iframe { width: 100%; height: 100%; min-height: 320px; border: 0; display: block; } /* Footer */ .foot { padding: 64px var(--pad) 48px; background: var(--img-ink); color: var(--paper); text-align: center; } .foot p { margin: 8px 0; } .foot a { color: var(--card1); } .foot-name { display: inline-flex; flex-direction: column; margin-bottom: 16px; } .foot-name .logo-script { color: var(--card1); font-size: 44px; transform-origin: center; } .foot-name .logo-block { color: var(--paper); font-size: var(--fs-body); } .foot .small { font-size: var(--fs-label); opacity: .7; margin-top: 24px; } .foot .foot-legal { margin-top: 8px; } .foot .foot-legal a { display: inline-block; padding: 16px 4px; } /* Terms of Service and Privacy Policy pages (Ryan, 2026-10-20) */ .legal { max-width: 720px; margin: 0 auto; padding: calc(var(--top) + 48px) var(--pad) 64px; color: var(--ink); } .legal h1 { margin: 0; font: 400 var(--fs-h1)/1.1 var(--font-block); color: var(--red2); text-wrap: balance; } .legal h2 { margin: 40px 0 8px; font-size: var(--fs-h3); color: var(--red2); text-wrap: balance; } .legal p, .legal li { line-height: 1.6; } .legal ul { padding-left: 24px; } .legal li + li { margin-top: 8px; } .legal a { color: var(--red2); } .legal-date { color: var(--card-ink); font-size: var(--fs-small); } @media (max-width: 599px) { .legal .kicker, .legal h1, .legal-date { text-align: center; } } /* The line under each gallery form's send button */ .f-agree { margin: 12px 0 0; color: var(--card-ink); font-size: var(--fs-small); line-height: 1.5; text-align: center; } .f-agree a { color: var(--red2); } /* Phone call bar — STANDARDS §4: Call + Directions. Pinned at the bottom edge, so Safari paints the area under its URL box from it and reads background-color: a flat colour under the image (Safari fix, step 5), no blur. Hidden, it fades in place with a short slide (a bar slid just off-screen still shows under the floating URL box). */ .callbar { position: fixed; z-index: 40; left: 0; right: 0; bottom: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; padding: 8px 12px calc(8px + env(safe-area-inset-bottom)); background: var(--img-ink); background-color: var(--ink); border-top: 1px solid rgb(244 236 201 / .15); opacity: 0; visibility: hidden; transform: translateY(12px); transition: opacity .2s ease-out, transform .2s ease-out, visibility 0s .2s; } .callbar.show { opacity: 1; visibility: visible; transform: none; transition: opacity .2s ease-out, transform .2s ease-out, visibility 0s; } .callbar .btn, .callbar .dir { width: 100%; } .callbar .btn { padding-inline: 8px; } .callbar .btn-call { background: var(--glass); } .callbar .btn-ghost { border-color: var(--card1); color: var(--card1); } /* Directions in the bar opens across the whole bar; Call steps aside until it closes */ .callbar:has(.dir.open) > .btn-call { display: none; } .callbar:has(.dir.open) > .dir { grid-column: 1 / -1; } @media (min-width: 900px) { .callbar { display: none; } } /* The credit: the very last line on the page — STANDARDS.md §5 */ .credit { margin: 0; padding: 16px var(--pad) calc(96px + env(safe-area-inset-bottom)); border-top: 1px solid rgb(244 236 201 / .15); text-align: center; font-size: var(--fs-label); color: rgb(244 236 201 / .6); background: var(--img-ink); } .credit a { color: inherit; } @media (min-width: 900px) { .credit { padding-bottom: 16px; } } /* Phones: short headings centered, long paragraphs stay left — STANDARDS.md §3 */ @media (max-width: 599px) { .changer-grid { gap: 16px; margin-top: 24px; } .changer-art { width: min(100%, 300px); } .changer-side { gap: 12px; } .steps { justify-content: center; } .say { min-height: 64px; } } @media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } *, *::before, *::after { animation-duration: .001s !important; animation-delay: 0s !important; animation-iteration-count: 1 !important; transition: none !important; } .name .script, .name .block span, .hero .tagline { opacity: 1; } } /* Tire changer art */ .cg-ground { stroke: rgb(244 236 201 / .25); stroke-width: 2; } .cg-shadow { fill: rgb(0 0 0 / .45); } .cg-tread { fill: none; stroke: #0a0a0a; stroke-width: 9; stroke-dasharray: 6 3.5; } .cg-nail rect, .cg-nail circle { fill: #c3c7cc; } .cg-nail .cg-nail-dot { fill: #8d939b; } .cg-dot { fill: var(--accent); } .cg-weight { fill: #9aa0a7; stroke: #555; stroke-width: .8; } .cg-pops circle { fill: none; stroke: var(--accent); stroke-width: 3; opacity: 0; } .cg-hiss path { stroke: rgb(244 236 201 / .7); stroke-width: 2.5; stroke-linecap: round; fill: none; } /* Oil change: the old oil holds the screen while cards about it slide sideways; at the last card it drains, a fresh gold drop falls, gold fills and shows the details. The track is tall so vertical scroll drives the cards. */ .oil { padding: 0; background: var(--img-ink); } .oil > * { max-width: none; } .oil-track { position: relative; height: 100svh; } .oil-stage { position: sticky; top: 0; height: 100svh; display: grid; place-items: start center; padding-top: calc(14svh + 48px); overflow: hidden; overflow: clip; color: var(--ink); isolation: isolate; background: var(--img-ink); } /* Safari fix, step 4 (touch screens with scroll-driven animations): no position: sticky during the oil effect. The stage rides down its track on a scroll timeline instead, so it looks pinned; oil.js writes --st0 and --sd. */ html.sda .oil-stage { position: relative; top: 0 !important; animation: sd-pin linear both; animation-timeline: scroll(root); animation-range: var(--st0, 0px) calc(var(--st0, 0px) + var(--sd, 0px)); } @keyframes sd-pin { from { transform: translateY(0); } to { transform: translateY(var(--sd, 0px)); } } .oil-old, .oil-new { position: absolute; left: 0; right: 0; bottom: 0; z-index: -1; } .oil-old { height: 100%; background: radial-gradient(120% 40% at 30% 20%, rgb(120 92 52 / .35), transparent 60%), linear-gradient(180deg, #3a2c20, #1c140e 50%, #0a0705); } .oil-old .oil-wave path { fill: #3a2c20; } .oil-old .oil-wave .surface { fill: none; stroke: rgb(240 200 140 / .35); stroke-width: 1.5; vector-effect: non-scaling-stroke; } .oil-blend { position: absolute; left: 0; right: 0; top: 0; height: 160px; z-index: 0; pointer-events: none; background: linear-gradient(var(--ink), transparent); } .oil.drained .oil-old { visibility: hidden; } .oil-blend { transition: opacity .6s; } .oil.drained .oil-blend { opacity: 0; } .oil-new { height: 0; background: linear-gradient(180deg, #f0c157, var(--accent) 30%, #b06d16 85%, #7c4a0e); } .oil-new::before { content: ''; position: absolute; inset: 0; background: linear-gradient(100deg, transparent 30%, rgb(255 255 255 / .25) 45%, transparent 60%) -100% 0 / 200% 100% no-repeat; -webkit-mask-image: linear-gradient(transparent, #000 22%, #000 32%, transparent 70%); mask-image: linear-gradient(transparent, #000 22%, #000 32%, transparent 70%); } .oil.filled .oil-new::before { animation: sheen 6s ease-in-out 1s infinite; } @keyframes sheen { to { background-position: 100% 0; } } .oil-new .oil-wave path { fill: #f0c157; } .oil-new .oil-wave { opacity: 0; } .oil.pouring .oil-new .oil-wave, .oil.filled .oil-new .oil-wave { opacity: 1; } .oil-wave { position: absolute; left: 0; bottom: 100%; width: 200%; height: 24px; margin-bottom: -1px; animation: slosh 3s linear infinite; } @keyframes slosh { to { transform: translateX(-50%); } } .oil-drips { position: absolute; left: 0; right: 0; bottom: 0; height: 0; z-index: -1; } .oil-drips i { position: absolute; bottom: 0; width: 10px; height: 18px; border-radius: 50% 50% 50% 50% / 60% 60% 40% 40%; background: #1a1410; opacity: 0; } .oil-drips i:nth-child(1) { left: 22%; } .oil-drips i:nth-child(2) { left: 51%; } .oil-drips i:nth-child(3) { left: 78%; } .nozzle { position: absolute; left: 50%; top: 0; width: 28px; height: calc(var(--top) + 84px); margin-left: -14px; z-index: 2; opacity: 0; background: linear-gradient(90deg, #5a5f66, #d9dde1 40%, #6c727a); border-radius: 0 0 6px 6px; box-shadow: 4px 0 0 #1f1f1f, -4px 0 0 #1f1f1f, 0 4px 0 #1f1f1f; } .drop { position: absolute; left: 50%; top: calc(var(--top) + 86px); width: 24px; height: 32px; margin-left: -12px; z-index: 2; opacity: 0; background: radial-gradient(circle at 35% 60%, #fff3c4, var(--accent) 35%, #9c5e12 90%); clip-path: path('M12 0 C 12 8, 24 16, 24 22 A 12 10 0 0 1 0 22 C 0 16, 12 8, 12 0 Z'); } .ring { position: absolute; left: 50%; bottom: 0; width: 120px; height: 24px; margin-left: -60px; margin-bottom: -12px; border-radius: 50%; border: 3px solid var(--accent); opacity: 0; } /* Old-oil cards */ .old-head { position: absolute; left: 0; right: 0; top: calc(var(--top) + 32px); text-align: center; padding: 0 var(--pad); color: var(--paper); transition: opacity .4s; } .old-head .kicker { color: #b9a37a; } .old-head h2 { color: var(--paper); } .old-hint { margin: 12px 0 0; font-weight: 800; font-size: var(--fs-small); color: var(--accent); } .old-cards { position: absolute; left: 0; right: 0; top: calc(var(--top) + 200px); transition: opacity .4s; } @media (min-width: 600px) { .old-cards { top: calc(var(--top) + 240px); } } .old-row { display: flex; gap: 16px; padding: 0 var(--pad); width: max-content; will-change: transform; } .old-row article { width: min(78vw, 340px); padding: 24px; border-radius: 20px; color: var(--paper); background: rgb(255 240 210 / .06); border: 1px solid rgb(185 163 122 / .35); } .old-row h3 { color: var(--paper); margin-bottom: 8px; } .old-row p { margin: 0; color: rgb(244 236 201 / .82); } .old-row .tag { margin-bottom: 8px; font: 800 var(--fs-label)/1 var(--font-body); letter-spacing: .2em; text-transform: uppercase; color: #e07a5f; } .old-row { counter-reset: card; } .old-row article::before { counter-increment: card; content: counter(card, decimal-leading-zero); display: block; margin-bottom: 12px; font: 400 40px/1 var(--font-block); color: rgb(224 176 60 / .55); } .old-progress { width: 160px; height: 4px; margin: 16px auto 0; border-radius: 2px; background: rgb(244 236 201 / .15); overflow: hidden; } .old-progress i { display: block; height: 100%; width: 100%; background: var(--accent); transform-origin: left; transform: scaleX(var(--p, 0)); } @media (min-width: 1000px) { .old-head { top: 50%; right: auto; left: 0; width: 38%; transform: translateY(-50%); text-align: left; padding-left: max(var(--pad), (100vw - var(--max)) / 2); } .old-head h2 { font-size: var(--fs-h2); } .old-progress { margin-left: 0; width: 240px; } .old-cards { top: 50%; left: 38%; transform: translateY(-50%); overflow: hidden; -webkit-mask-image: linear-gradient(90deg, transparent, #000 6%); mask-image: linear-gradient(90deg, transparent, #000 6%); } .old-row { gap: 24px; padding: 8px 48px; } .old-row article { width: 400px; min-height: 360px; padding: 36px; } .old-row article::before { font-size: 64px; margin-bottom: 20px; } .old-row h3 { font-size: 28px; } .old-row p { font-size: var(--fs-lead); line-height: 1.5; } .old-row .tag { font-size: var(--fs-label); } } .oil.drained .old-head, .oil.drained .old-cards, .oil.draining .old-head, .oil.draining .old-cards { opacity: 0; pointer-events: none; } .old-hint .hint-swipe { display: none; } /* Under 1000px (Ryan, 2026-10-20): the old-oil cards are a sideways swipe with the page scrolling normally; the stage is one screen and the hint says swipe (oil.js pours when the last card is reached). */ @media (max-width: 999px) { .oil-track { height: auto; } .old-hint .hint-scroll { display: none; } .old-hint .hint-swipe { display: inline; } .old-cards { overflow-x: auto; scroll-snap-type: x mandatory; scroll-padding-inline: var(--pad); overscroll-behavior-x: contain; scrollbar-width: none; } .old-cards::-webkit-scrollbar { display: none; } .old-row { will-change: auto; padding-bottom: 8px; } .old-row article { scroll-snap-align: start; } } @media (max-width: 999px) and (prefers-reduced-motion: no-preference) { .oil-stage { position: relative; } } .oil-copy { position: relative; text-align: center; padding: 0 var(--pad); max-width: 720px; opacity: 0; transform: translateY(24px); pointer-events: none; } .oil.filled .oil-copy { opacity: 1; transform: none; pointer-events: auto; transition: opacity .8s, transform .8s; } .oil-replay { display: inline-flex; align-items: center; min-height: 40px; margin-bottom: 20px; padding: 0 16px; border-radius: 999px; cursor: pointer; border: 2px solid rgb(23 17 15 / .5); background: rgb(255 255 255 / .2); color: var(--ink); font: 800 var(--fs-small)/1 var(--font-body); } .oil-replay:hover { background: rgb(255 255 255 / .35); } .oil .oil-copy .kicker { color: var(--red3); } .oil-copy h2 { color: var(--ink); font-size: var(--fs-oil); } .oil-lede { font-size: var(--fs-lead); margin: 16px auto 0; } .oil-facts { list-style: none; margin: 24px 0 0; padding: 0; display: flex; gap: 24px; justify-content: center; flex-wrap: wrap; } .oil-facts li { display: flex; flex-direction: column; } .oil-facts b { font: 400 var(--fs-h3)/1.2 var(--font-block); color: var(--red3); } .btn-ink { background: var(--ink); color: var(--card1); } /* Transparent on the gold (Ryan, 2026-10-20): the Directions toggle is a