lists identical when editing. */ .marquee { margin-top: clamp(22px, 3vw, 32px); overflow: hidden; -webkit-mask-image: linear-gradient(90deg, transparent, #000 5%, #000 95%, transparent); mask-image: linear-gradient(90deg, transparent, #000 5%, #000 95%, transparent); } .marquee__track { display: flex; width: max-content; animation: tas-marquee 58s linear infinite; } .marquee:hover .marquee__track, .marquee:focus-within .marquee__track { animation-play-state: paused; } .marquee__row { display: flex; align-items: center; gap: 10px; padding-right: 10px; } .marquee__row span { padding: 12px 20px; background: #FFFFFF; border: 1px solid #E4DFD6; font-family: 'Oswald', Arial, sans-serif; font-weight: 500; font-size: 15px; letter-spacing: .12em; text-transform: uppercase; color: #2E333A; white-space: nowrap; } .marquee__note { margin-top: 14px; text-align: center; font-size: 15.5px; color: #767B83; } /* The fifth tile: the same language as the four above it, spanning the whole grid so the quadrant and the tire band read as one block. The caption is padded back in to the column gutter since the photo runs edge to edge. */ .tile--wide { grid-column: 1 / -1; min-height: clamp(260px, 30vw, 420px); scroll-margin-top: 120px; } /* The shop-front photo used to sit here and was cropped to the banner across the top of the building, away from the cars parked in front. The client's tire-bay photo replaced it and is a centred close-up of a wheel being fitted, so it wants the middle of the frame; anchoring high cut the hands off. Kept as an explicit rule rather than deleted, because this box is far wider than the photo and the crop is the thing worth stating. */ .tile--wide img { object-position: 50% 50%; } .tile--wide .tile__body { padding: 24px clamp(16px, 4.5vw, 40px) 26px; } .tile--wide .tile__text { max-width: 62ch; } @keyframes tas-marquee { from { transform: translate3d(0, 0, 0); } to { transform: translate3d(-50%, 0, 0); } } @media (prefers-reduced-motion: reduce) { .marquee { overflow-x: auto; -webkit-mask-image: none; mask-image: none; } .marquee__track { animation: none; } .marquee__row[aria-hidden="true"] { display: none; } } .offer { margin-top: clamp(26px, 3.4vw, 40px); padding: clamp(22px, 3vw, 32px); background: #FFFFFF; border: 1px solid #E4DFD6; border-left: 4px solid #C8202F; display: flex; flex-wrap: wrap; gap: 18px 28px; align-items: center; justify-content: space-between; } .offer__body { max-width: 62ch; } .offer__kicker { display: block; font-family: 'Oswald', Arial, sans-serif; font-size: 12.5px; letter-spacing: .16em; text-transform: uppercase; color: #A8801F; } .offer__price { margin-top: 8px; font-family: 'Oswald', Arial, sans-serif; font-weight: 600; font-size: clamp(23px, 2.8vw, 32px); line-height: 1.1; text-transform: uppercase; } .offer__note { margin-top: 10px; font-size: 16.5px; color: #545A63; } .offer__actions { display: flex; flex-wrap: wrap; gap: 10px; } /* Same reasoning as .btn--directions: this button sits on a white card, and the band hover turns it white on white. The border stays dark instead. */ .offer .btn--band-book:hover { border-color: #14161A; } .figure-band { margin: clamp(22px, 3vw, 34px) 0 0; } .figure-band img { width: 100%; height: clamp(240px, 32vw, 380px); object-fit: cover; object-position: 50% 45%; } .figure-band figcaption { margin-top: 10px; font-size: 15.5px; color: #767B83; } /* ------------------------------------------------------- large monitors --- */ /* The export's hero is a fixed 1448:1086 box. On a 2560px-wide monitor that works out to a 1920px-tall hero, so the page loads showing the top of the photo and nothing else — the headline and both buttons sit below the fold. Capping the height at one viewport minus the header keeps the whole hero on screen at any width; the ratio still drives the height below that cap. */ .hero { max-height: calc(100vh - var(--header-h)); max-height: calc(100svh - var(--header-h)); } /* Landscape phones are shorter than the hero's min-height, and min beats max in CSS. Below 560px of viewport height, let the hero simply fit the screen. */ @media (max-height: 560px) { .hero { min-height: 0; } } /* Full bleed at every width: the photo always fills the hero, never letterboxed and never framed. A 4:3 photo in a box near 2:1 has to lose height somewhere, so the crop is anchored high rather than centred — centring cut the top off the shop sign, which is the thing worth seeing. What goes instead is the bottom of the forecourt. A wider source photo is still the real fix: at 1449px the image is upscaled on anything past about 1600px wide. */ .hero { background-position: center, center 28%; } /* The wider the viewport, the more height `cover` has to throw away: a 4:3 photo in a box near 2:1 overflows by roughly half its own height, and a fixed percentage then hides progressively more of the top as the screen grows. So the anchor steps toward the top as the box gets wider, which keeps about the same amount of sky above the sign at every size instead of slowly eating it. Phones keep 28% — their hero is close enough to 4:3 that there is little overflow to place. Judged against the sign: 15% at 1885px is the point where the whole banner clears the header with sky above it, and the headline still lands on the wall below rather than across the middle of the sign. Going further (10%) put the copy over the brightest part of the sign and cost more than the extra sky was worth. */ @media (min-width: 1240px) { .hero { background-position: center, center 18%; } } @media (min-width: 1800px) { .hero { background-position: center, center 15%; } } /* The headline wrapped in the middle of the width range and nowhere else: it was two lines on a laptop, three on a desktop, two again on a large monitor. The font grows with the viewport up to a 70px cap it reaches at ~1061px, but the column it sits in was fixed at 760px until 1800px, where it stepped to 880. "to get you the extra miles" measures 833px at 70px, so anything between the point the type outgrows 760px and the point the column catches up had to wrap. The column now widens with the type instead of long after it. 960px is where 880 first fits inside the padding, and the copy is capped by the available width below that anyway, so nothing overflows. */ @media (min-width: 960px) { .hero__copy { max-width: 880px; } } /* Past ~1800px the 1240px column starts to look like a stripe down the middle of the screen. Everything steps up together so the proportions hold. */ @media (min-width: 1800px) { .wrap, .topbar__inner, .header__inner, .hero__inner, .pagehero__inner, .services__head-wrap, .footer__grid, .footer__bottom-inner, .actionbar__inner { max-width: 1440px; } .wrap--narrow { max-width: 1040px; } .hero__copy { max-width: 880px; } body { font-size: 18px; } } @media (min-width: 2300px) { .wrap, .topbar__inner, .header__inner, .hero__inner, .pagehero__inner, .services__head-wrap, .footer__grid, .footer__bottom-inner, .actionbar__inner { max-width: 1600px; } .tiles { grid-template-columns: repeat(4, minmax(0, 1fr)); } } /* ========================================================================== Responsive images and the mini header. Both are additive: every rule below overrides a property set earlier without removing the earlier declaration, so the export-parity check still sees the originals it expects. ========================================================================== */ /* ---------------------------------------------------