/* =========================================================================== Base Brand colours are injected as custom properties by includes/header.php, which reads them from includes/config.php. =========================================================================== */ *, *::before, *::after { box-sizing: border-box; } /* Neutrals are steps on the violet ramp rather than straight greys — it keeps the page reading as one family. The page sits on the light purple --bg while cards stay pure #fff, so every card lifts off the ground without needing a heavier border. header.php overrides --bg, --bg-soft, --bg-tint, --line and the two dark surfaces from config.php; the values here are the fallback for anything that loads this sheet on its own. */ :root { --ink-2: #3F3A6E; --line: #DDD6FE; --line-soft: #EDE9FE; --bg: #F5F3FF; /* light purple — the page ground */ --bg-soft: #EDE9FE; /* soft lavender bands, a step deeper than the ground */ --bg-tint: #EDE9FE; /* lavender wash for hovers and brand chips */ --sidebar: #2E1065; /* deep purple — dark bands, always with #fff text */ --indigo: #312E81; /* dark indigo — the second dark surface */ --surface: #FFFFFF; /* white cards */ --star: #c2860f; /* antique gold stars — 3.1:1 on a white card, where a brighter gold would drop under 3:1 (WCAG 1.4.11) */ --green: #0e7c66; --radius: 14px; --radius-sm: 10px; --shadow: 0 1px 2px rgba(30, 27, 75,.05), 0 8px 24px rgba(30, 27, 75,.07); --shadow-lg: 0 8px 40px rgba(30, 27, 75,.14); --wrap: 1200px; /* The page's side gutter. ONE source of truth, because anything that bleeds out to the screen edge has to cancel it exactly — see .nav-strip ul. When these were typed separately they drifted apart at every breakpoint (24 / 16 / 14 / 12 against -16 / -14), and at 360px the mismatch put the nav strip 2px past the viewport, which was enough to make Chrome widen the layout viewport and shove the whole page left. */ --gutter: 24px; --font: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif; } html { -webkit-text-size-adjust: 100%; } /* Nothing scrolls the page sideways, at any width. THE ROOT MUST USE `hidden`, NOT `clip`. Overflow set on the root element is propagated to the viewport — that is the only reason a rule on can stop the PAGE scrolling at all. But `clip` is excluded from that propagation: the viewport keeps its own `auto` and carries on scrolling. This rule said `clip` for a long time and therefore did nothing, while looking correct in DevTools. It matters even with zero overflowing content, because the layout viewport can be wider than the visible one (browser zoom, a widened layout viewport on Android). The page then pans into that empty gap — everything shifts left and a blank strip appears down the right — with nothing on the page actually too wide. `hidden` on the root does NOT break `position: sticky`: because the value is propagated to the viewport, itself computes back to `visible`, so it never becomes a scroll container. That is only a danger on and on ordinary ancestors, which is why body below keeps `clip`. */ html { max-width: 100%; overflow-x: hidden; } /* `clip` here, deliberately. body IS an ancestor of the sticky header, and `overflow: hidden` on it would make it a scroll container and kill the stickiness. `clip` cuts the overflow without creating one. */ body { max-width: 100%; overflow-x: clip; } /* Belt and braces below the header.
is an ordinary element, so clipping here always works, and it sits below the sticky header. */ main { overflow-x: clip; } /* The usual causes, headed off at the source rather than only clipped. A grid or flex child defaults to min-width:auto — it refuses to shrink below its content, so one long word, a wide table or an un-wrapped URL pushes the whole column past the viewport. */ .wrap, .panel, .panel-body, .rail, .rail-card, .checkout-layout > * { min-width: 0; } .panel-body table { max-width: 100%; } /* An address, an email or a reference number with no spaces in it. */ .rail-item .ri-name, .rail-item .ri-sub, .field .err, .kv dd { overflow-wrap: anywhere; } /* The header is sticky, so an anchor jump would land with the section heading hidden underneath it. Every linkable section reserves that height. */ #services, #reviews, #write-review { scroll-margin-top: 96px; } @media (max-width: 640px) { #services, #reviews, #write-review { scroll-margin-top: 78px; } } body { margin: 0; font-family: var(--font); font-size: 15px; line-height: 1.6; color: var(--ink); background: var(--bg); -webkit-font-smoothing: antialiased; } img { max-width: 100%; display: block; } a { color: inherit; text-decoration: none; } h1, h2, h3, h4 { margin: 0; line-height: 1.25; letter-spacing: -0.02em; font-weight: 700; } p { margin: 0; } ul { margin: 0; padding: 0; list-style: none; } button { font: inherit; cursor: pointer; border: 0; background: none; color: inherit; } input, select, textarea { font: inherit; color: inherit; } .wrap { max-width: var(--wrap); margin: 0 auto; padding: 0 var(--gutter); } .muted { color: var(--muted); } .small { font-size: 13px; } .tiny { font-size: 12px; } .strike { text-decoration: line-through; color: var(--muted); } .center { text-align: center; } .hide { display: none !important; } /* ------------------------------------------------------------------ icons */ /* Icons are inline SVG from includes/icons.php, not emoji: they inherit currentColor, so one icon takes the brand on a white card and white on a purple band, and they all share a single stroke weight. */ .ico, .cb-icon, .track-ico { display: inline-flex; align-items: center; line-height: 0; } .ico svg, .cb-icon svg, .track-ico svg { display: block; } .promise-item .ico, .rail-usp .ico, .pay-opt .ico { color: var(--brand); } /* ---------------------------------------------------------------- buttons */ .btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; padding: 12px 22px; border-radius: var(--radius-sm); font-weight: 600; font-size: 15px; white-space: nowrap; transition: background .15s ease, border-color .15s ease, transform .08s ease; } .btn:active { transform: translateY(1px); } .btn-primary { background: var(--brand); color: #fff; } .btn-primary:hover { background: var(--brand-dark); } .btn-accent { background: var(--accent); color: #fff; } .btn-accent:hover { filter: brightness(.94); } .btn-outline { border: 1.5px solid var(--brand); color: var(--brand); background: #fff; } .btn-outline:hover { background: var(--bg-tint); } .btn-ghost { border: 1px solid var(--line); color: var(--ink); background: #fff; } .btn-ghost:hover { border-color: #C4B5FD; } .btn-block { width: 100%; } .btn-sm { padding: 9px 16px; font-size: 14px; } .btn[disabled], .btn.is-disabled { opacity: .5; pointer-events: none; } /* ---------------------------------------------------------------- ratings */ /* Base size for every star glyph. Without this an unscoped renders at the SVG default size and blows out its line. */ .star { width: 14px; height: 14px; fill: var(--star); flex: none; } .star.off { fill: #DDD6FE; } .rating { display: inline-flex; align-items: center; gap: 4px; font-size: 14px; } .rating .star { width: 14px; height: 14px; fill: var(--star); flex: none; } .rating strong { font-weight: 600; } .rating-count { color: var(--muted); font-weight: 400; } /* =========================================================================== Header =========================================================================== */ .site-header { position: sticky; top: 0; z-index: 60; background: rgba(255,255,255,.92); backdrop-filter: saturate(180%) blur(12px); border-bottom: 1px solid var(--line); } .header-inner { display: flex; align-items: center; gap: 22px; height: 84px; } .logo { display: flex; align-items: center; gap: 10px; font-weight: 800; font-size: 19px; letter-spacing: -0.03em; } .logo-mark { width: 34px; height: 34px; border-radius: 9px; flex: none; background: linear-gradient(135deg, var(--brand), var(--brand-dark)); color: #fff; display: grid; place-items: center; font-size: 16px; font-weight: 800; } .logo-text small { display: block; font-size: 10.5px; font-weight: 500; color: var(--muted); letter-spacing: 0; margin-top: -3px; } .loc-pill { display: flex; align-items: center; gap: 10px; padding: 13px 18px; border: 1px solid var(--line); border-radius: 12px; font-size: 15px; color: var(--ink); width: 100%; max-width: 382px; text-align: left; background: #fff; } .loc-pill:hover { border-color: #C4B5FD; } .loc-pill .pin { flex: none; color: var(--ink); } .loc-pill .caret { flex: none; margin-left: auto; color: var(--ink-2); } .loc-pill span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } /* The pill carries the FULL address, so it is set smaller and tighter than the rest of the header — a whole address at 15px would either wrap the header onto two rows or truncate after the house number. */ .loc-pill { cursor: pointer; padding: 9px 12px; font-size: 12.5px; line-height: 1.35; gap: 8px; max-width: 300px; } .loc-pill .pin, .loc-pill .caret { width: 14px; height: 14px; } .loc-pill .caret { margin-left: 4px; } /* ---- Location picker modal ---- */ .loc-overlay { position: fixed; inset: 0; z-index: 200; display: none; background: rgba(30, 27, 75, .55); padding: 20px; align-items: center; justify-content: center; } .loc-overlay.open { display: flex; } .loc-modal { background: #fff; border-radius: 18px; width: 100%; max-width: 520px; max-height: calc(100dvh - 40px); display: flex; flex-direction: column; overflow: hidden; box-shadow: 0 24px 70px rgba(30, 27, 75, .3); } .loc-modal-head { display: flex; align-items: center; justify-content: space-between; gap: 14px; padding: 18px 22px; border-bottom: 1px solid var(--line); } .loc-modal-head h2 { font-size: 17px; margin: 0; } .loc-x { border: 0; background: none; font-size: 26px; line-height: 1; color: var(--muted); cursor: pointer; padding: 0 4px; } .loc-x:hover { color: var(--ink); } .loc-modal-body { padding: 18px 22px; overflow-y: auto; } .loc-gps { display: flex; align-items: center; justify-content: center; gap: 9px; width: 100%; padding: 13px; border-radius: 11px; cursor: pointer; border: 1.5px solid var(--brand); background: #fff; color: var(--brand); font: inherit; font-weight: 600; font-size: 15px; } .loc-gps:hover { background: var(--brand); color: #fff; } .loc-or { display: flex; align-items: center; gap: 12px; margin: 16px 0; color: var(--muted); font-size: 12.5px; } .loc-or::before, .loc-or::after { content: ''; flex: 1; height: 1px; background: var(--line); } .loc-search, gmp-place-autocomplete { width: 100%; padding: 12px 14px; font: inherit; font-size: 15px; border: 1.5px solid var(--line); border-radius: 11px; margin-bottom: 14px; display: block; } .loc-search:focus { outline: 0; border-color: var(--brand); } .loc-gps[data-busy] { opacity: .75; cursor: wait; } .loc-status { margin: 10px 0 0; font-size: 13px; color: var(--brand); background: #eaf6f2; border-radius: 9px; padding: 9px 12px; } .loc-map-wrap { position: relative; border-radius: 12px; overflow: hidden; } .loc-map { height: 260px; background: var(--bg-soft, #F5F3FF); } /* Fixed centre pin — the map moves under it, the way delivery apps work. One pin only: a draggable marker plus a crosshair is two answers to "where do you live". */ .loc-map-wrap::after { content: ''; position: absolute; left: 50%; top: 50%; width: 18px; height: 18px; margin: -18px 0 0 -9px; border-radius: 50% 50% 50% 0; transform: rotate(-45deg); background: var(--brand); border: 3px solid #fff; pointer-events: none; box-shadow: 0 3px 10px rgba(30, 27, 75, .4); z-index: 2; } .loc-drag-hint { position: absolute; left: 50%; bottom: 10px; transform: translateX(-50%); background: rgba(30, 27, 75, .78); color: #fff; font-size: 11.5px; padding: 5px 11px; border-radius: 999px; pointer-events: none; white-space: nowrap; z-index: 2; } .loc-readout { margin-top: 12px; min-height: 34px; } .loc-preview { font-size: 13.5px; color: var(--ink); line-height: 1.45; } .loc-acc { font-size: 12px; color: var(--muted); margin-top: 3px; } .loc-modal-foot { display: flex; gap: 10px; padding: 16px 22px; border-top: 1px solid var(--line); background: #fff; } .loc-modal-foot .btn { flex: 1; justify-content: center; } @media (max-width: 560px) { .loc-overlay { padding: 0; align-items: flex-end; } .loc-modal { max-width: 100%; border-radius: 18px 18px 0 0; max-height: 86dvh; } /* Compact on a phone: at the desktop spacing the sheet covered most of the screen. Smaller type and padding, and a shorter map — the pin is still easy to place, and Confirm stays in reach without scrolling. */ .loc-modal-head { padding: 12px 16px; } .loc-modal-head h2 { font-size: 15.5px; } .loc-x { font-size: 24px; } .loc-modal-body { padding: 12px 16px; } .loc-gps { padding: 10px; font-size: 14px; border-radius: 10px; } .loc-status { margin-top: 8px; padding: 7px 10px; font-size: 12px; line-height: 1.4; } .loc-or { margin: 10px 0; font-size: 11.5px; } .loc-search, gmp-place-autocomplete { padding: 9px 12px; margin-bottom: 10px; } .loc-map { height: 160px; } .loc-drag-hint { bottom: 8px; padding: 4px 9px; font-size: 10.5px; } .loc-readout { margin-top: 8px; min-height: 0; } .loc-preview { font-size: 12.5px; line-height: 1.4; } .loc-modal-foot { padding: 10px 16px calc(10px + env(safe-area-inset-bottom)); } .loc-modal-foot .btn { padding: 10px 14px; font-size: 14px; } } /* Field on the left, button on the right, as two items in a row. */ .header-search { flex: 1; max-width: 530px; display: flex; align-items: stretch; gap: 8px; } .search-field { position: relative; flex: 1; min-width: 0; } .header-search input { width: 100%; padding: 14px 16px 14px 48px; font-size: 15px; border: 1px solid var(--line); border-radius: 12px; background: #fff; outline: none; } .header-search input:focus { border-color: var(--brand); } /* Scoped to .search-field so it cannot catch an icon in the button beside it. translate(), not translateY(), so the focus nudge in the micro-interaction block below can add an x value without losing the -50% centring. */ .search-field svg { position: absolute; left: 18px; top: 50%; transform: translate(0, -50%); width: 19px; height: 19px; fill: var(--ink-2); } .header-actions { margin-left: auto; display: flex; align-items: center; gap: 12px; } .cart-btn { position: relative; display: flex; align-items: center; gap: 8px; padding: 10px 16px; border: 1px solid var(--line); border-radius: var(--radius-sm); font-weight: 600; font-size: 14px; } .cart-btn:hover { border-color: #C4B5FD; } .cart-btn svg { width: 18px; height: 18px; fill: var(--ink); } .cart-badge { position: absolute; top: -7px; right: -7px; min-width: 20px; height: 20px; padding: 0 5px; background: var(--accent); color: #fff; border-radius: 999px; font-size: 11.5px; font-weight: 700; display: grid; place-items: center; } .nav-strip { border-bottom: 1px solid var(--line); background: #fff; } .nav-strip ul { display: flex; gap: 26px; overflow-x: auto; scrollbar-width: none; } .nav-strip ul::-webkit-scrollbar { display: none; } .nav-strip a { display: block; padding: 13px 0; font-size: 14px; font-weight: 500; color: var(--ink-2); border-bottom: 2px solid transparent; white-space: nowrap; /* The transparent border still reserves its 2px, so the underline below is drawn over that strip and nothing shifts when it appears. */ position: relative; } .nav-strip a:hover { color: var(--brand); } .nav-strip a.active { color: var(--brand); font-weight: 600; } /* =========================================================================== Header micro-interactions Layout, colour, type and spacing are untouched. Every effect below moves only transform, box-shadow, opacity or a pseudo-element — none of which reflow anything, so nothing in the header shifts as you use it. One easing curve throughout: a gentle ease-out that starts quickly and settles, with no overshoot. Durations sit between 180ms and 320ms — fast enough to feel like a response, slow enough to read as deliberate. =========================================================================== */ :root { --ease-out-soft: cubic-bezier(.22, .61, .36, 1); } /* ---- logo: settles in once, on load ---- */ @keyframes logo-in { from { opacity: 0; transform: scale(.96); } to { opacity: 1; transform: scale(1); } } .site-header .logo { animation: logo-in 320ms var(--ease-out-soft) both; transform-origin: left center; } /* ---- location pill: lifts on hover ---- */ .loc-pill { transition: transform 200ms var(--ease-out-soft), box-shadow 200ms var(--ease-out-soft), border-color 200ms var(--ease-out-soft); } .loc-pill:hover { transform: translateY(-2px); box-shadow: 0 6px 16px rgba(30, 27, 75, .10); } .loc-pill:active { transform: translateY(0); transition-duration: 90ms; } /* ---- search: brighter edge on hover, a ring on focus ---- The ring is a box-shadow, so the field never changes size and the header never reflows around it. */ .header-search input { transition: border-color 200ms var(--ease-out-soft), box-shadow 220ms var(--ease-out-soft); } .header-search:hover input:not(:focus) { border-color: #C4B5FD; } .header-search input:focus { border-color: var(--brand); box-shadow: 0 0 0 4px rgba(109, 40, 217, .12); } /* ---- search icon: steps aside as the field takes focus ---- */ .header-search svg { transition: transform 220ms var(--ease-out-soft), fill 220ms var(--ease-out-soft); } .header-search:focus-within svg { transform: translate(2px, -50%); fill: var(--brand); } /* ---- the Search button, beside the field ---- The gradient is the same pair the logo mark uses, which ties the two ends of the header together. No icon: the word is the whole button, and an arrow sliding out from under it read as a glitch rather than a flourish. The movement is a lift, matching the cart button and the location pill, so every pressable thing in the header behaves the same way. */ .search-go { flex: none; display: flex; align-items: center; justify-content: center; padding: 0 22px; border: 0; border-radius: 12px; cursor: pointer; background: linear-gradient(135deg, var(--brand), var(--brand-dark)); color: #fff; font: inherit; font-size: 14px; font-weight: 700; letter-spacing: .01em; white-space: nowrap; box-shadow: 0 1px 2px rgba(46, 16, 101, .18); transition: filter 200ms var(--ease-out-soft), box-shadow 200ms var(--ease-out-soft), transform 200ms var(--ease-out-soft); } .search-go:hover { transform: translateY(-2px); filter: brightness(1.1); box-shadow: 0 6px 18px rgba(46, 16, 101, .28); } .search-go:active { transform: translateY(0); transition-duration: 90ms; } .search-go:focus-visible { outline: 2px solid var(--brand-dark); outline-offset: 3px; } /* ---- cart: lifts and grows a hair ---- */ .cart-btn { transition: transform 200ms var(--ease-out-soft), box-shadow 200ms var(--ease-out-soft), border-color 200ms var(--ease-out-soft); } .cart-btn:hover { transform: translateY(-2px) scale(1.02); box-shadow: 0 6px 18px rgba(30, 27, 75, .12); } .cart-btn:active { transform: translateY(0) scale(1); transition-duration: 90ms; } /* ---- cart icon: a slight tilt, nothing more ---- */ .cart-btn svg { transition: transform 240ms var(--ease-out-soft); } .cart-btn:hover svg { transform: rotate(-3deg); } /* ---- nav: underline grows from the centre ---- A scaled pseudo-element rather than an animated width, so it is composited on the GPU and cannot nudge the text above it. */ .nav-strip a::after { content: ""; position: absolute; left: 0; right: 0; bottom: -2px; height: 2px; background: var(--brand); border-radius: 2px; transform: scaleX(0); transform-origin: center; transition: transform 260ms var(--ease-out-soft); } .nav-strip a:hover::after, .nav-strip a:focus-visible::after { transform: scaleX(1); } /* The current page keeps its underline drawn — same element, already open. */ .nav-strip a.active::after { transform: scaleX(1); } /* ---- header: a shadow that only exists once you have scrolled ---- .is-scrolled is set by the small script at the end of includes/header.php. */ .site-header { transition: box-shadow 260ms var(--ease-out-soft); } .site-header.is-scrolled { box-shadow: 0 4px 18px rgba(30, 27, 75, .07); } /* ---- opt out ---- Someone who has asked their system to reduce motion gets the same header with none of the movement: no load animation, no lift, no growing rule. The focus ring stays, because that one is feedback rather than decoration. */ @media (prefers-reduced-motion: reduce) { .site-header .logo { animation: none; } .loc-pill, .cart-btn, .cart-btn svg, .search-field svg, .search-go, .nav-strip a::after { transition: none; } .loc-pill:hover, .cart-btn:hover, .search-go:hover { transform: none; } .cart-btn:hover svg { transform: none; } .header-search:focus-within svg { transform: translate(0, -50%); } .nav-strip a:hover::after { transform: scaleX(1); } } /* =========================================================================== Hero — entrance, then hover Two separate things live here and they never overlap: 1. A ONE-TIME entrance on load. `both` fill holds the final frame, so once it has run the hero is completely static. Nothing loops. 2. Hover effects, which only exist while the pointer is on a card. Every entrance runs 620ms on one ease-out curve, staggered 100ms apart. =========================================================================== */ :root { --ease-hero: cubic-bezier(.16, .84, .44, 1); } @keyframes hero-rise { from { opacity: 0; transform: translateY(20px); } to { opacity: 1; transform: none; } } @keyframes hero-rise-lg { from { opacity: 0; transform: translateY(25px); } to { opacity: 1; transform: none; } } @keyframes hero-pop { from { opacity: 0; transform: scale(.92); } to { opacity: 1; transform: none; } } .hero h1.hero-in { animation: hero-rise 620ms var(--ease-hero) both; } .hero .cat-card.hero-in { animation: hero-rise-lg 620ms var(--ease-hero) both; animation-delay: 150ms; } /* The three tiles arrive left to right, once the card that holds them has. */ .cat-grid .cat-tile { animation: hero-pop 620ms var(--ease-hero) both; animation-delay: calc(300ms + var(--i, 0) * 100ms); } /* Top-left, top-right, bottom-left, bottom-right — DOM order is grid order, so one counter drives both. */ .hero-collage .collage-cell.hero-in { animation: hero-rise 620ms var(--ease-hero) both; animation-delay: calc(220ms + var(--i, 0) * 100ms); } /* --------------------------------------------------- appliance card hover */ .cat-tile { cursor: pointer; } .cat-tile.soon { cursor: default; } .cat-tile .emoji.has-img { transition: transform 300ms var(--ease-hero), box-shadow 300ms var(--ease-hero); } .cat-tile:not(.soon):hover .emoji.has-img { transform: translateY(-4px); box-shadow: 0 12px 22px rgba(30, 27, 75, .13); } /* The artwork inside grows; the coloured rounded square behind it does not, because only the drawing group is scaled and never the backing . */ .cat-tile .emoji svg { display: block; width: 100%; height: auto; } .cat-tile .emoji svg > g { transform-box: view-box; transform-origin: 45.5px 45.5px; transition: transform 300ms var(--ease-hero); } .cat-tile:not(.soon):hover .emoji svg > g { transform: translateY(-2px) scale(1.04); } /* ---- refrigerator: frost sparkles wake up ---- */ .ic-sparks .ic-spark { opacity: 0; transform-box: view-box; transform-origin: center; transition: opacity 280ms var(--ease-hero), transform 280ms var(--ease-hero); transform: scale(.4); } .cat-tile:hover .ic-sparks .ic-spark { opacity: .9; transform: scale(1); } .cat-tile:hover .ic-sparks .ic-spark:nth-child(2) { transition-delay: 70ms; } .cat-tile:hover .ic-sparks .ic-spark:nth-child(3) { transition-delay: 140ms; } /* ---- washing machine: the water turns inside the drum ---- */ @keyframes drum-turn { to { transform: rotate(360deg); } } .ic-drum { transform-box: view-box; transform-origin: 45.5px 54px; } /* Only while hovered — idle, there is no animation on the element at all. */ .cat-tile:hover .ic-drum { animation: drum-turn 3.2s linear infinite; } /* ---- microwave: the readout pulses ---- */ @keyframes display-pulse { 0%, 100% { opacity: 1; } 50% { opacity: .35; } } .ic-display { transition: opacity 300ms var(--ease-hero); } .cat-tile:hover .ic-display { animation: display-pulse 1.6s ease-in-out infinite; } /* -------------------------------------------------- appliance card: picked Pressing a tile confirms the choice before the page changes: a press-in and a highlight ring, ~320ms, then the browser navigates. Short enough to feel instant, long enough to register. There was a third part — a tick badge in the corner of the artwork. It has been dropped: sitting over the illustration it read as a checkbox waiting to be ticked rather than as confirmation of a tap already made. */ .cat-tile .emoji.has-img { position: relative; } /* The press. Deliberately quick — a slow squash feels like lag, not feedback. */ .cat-tile.is-picked .emoji.has-img { transform: scale(.98); transition-duration: 100ms; box-shadow: 0 0 0 2px var(--brand), 0 10px 24px rgba(46, 16, 101, .20); } /* Held while the browser is on its way to the next page, so the tile does not spring back and look like the click was dropped. */ .cat-tile.is-leaving .emoji.has-img { transform: scale(1); transition-duration: 220ms; } /* Coming back, the tile that was chosen is marked without any animation. */ .cat-tile.was-picked .emoji.has-img { box-shadow: 0 0 0 2px var(--brand); } /* ------------------------------------------------------ collage card hover */ .collage-cell { transition: box-shadow 400ms var(--ease-hero); /* A ring rather than a border, so no 1px is added to the box and the grid cannot shift when it appears. */ box-shadow: 0 0 0 0 rgba(255, 255, 255, 0); } .collage-cell:hover { box-shadow: 0 0 0 1px rgba(255, 255, 255, .30), 0 14px 30px rgba(30, 27, 75, .18); } .collage-cell img, .collage-cell video { transition: transform 420ms var(--ease-hero); } .collage-cell:hover img, .collage-cell:hover video { transform: scale(1.04); } /* The scrim deepens rather than appearing, so the label never flickers. */ .collage-cell.has-photo::after, .collage-cell.has-video::after { transition: opacity 400ms var(--ease-hero); opacity: .82; } .collage-cell:hover.has-photo::after, .collage-cell:hover.has-video::after { opacity: 1; } .collage-cell .c-label { opacity: .88; transition: transform 400ms var(--ease-hero), opacity 400ms var(--ease-hero); } .collage-cell:hover .c-label { transform: translateY(-4px); opacity: 1; } /* ---- Experts card: one light sweep as it comes into view, then done ---- .is-lit is added once by the observer in index.php and never removed, and the animation has no iteration count, so it cannot repeat. */ @keyframes expert-sweep { from { transform: translateX(-120%) skewX(-12deg); } to { transform: translateX(220%) skewX(-12deg); } } .collage-cell.is-experts .c-media::after { content: ""; position: absolute; top: 0; bottom: 0; width: 42%; background: linear-gradient(100deg, rgba(255,255,255,0), rgba(255,255,255,.16), rgba(255,255,255,0)); transform: translateX(-120%) skewX(-12deg); pointer-events: none; } .collage-cell.is-experts.is-lit .c-media::after { animation: expert-sweep 1.5s cubic-bezier(.33, 0, .2, 1) 1 both; } /* ------------------------------------------------------------- opt out ---- */ @media (prefers-reduced-motion: reduce) { .hero h1.hero-in, .hero .cat-card.hero-in, .cat-grid .cat-tile, .hero-collage .collage-cell.hero-in { animation: none; opacity: 1; transform: none; } .cat-tile .emoji.has-img, .cat-tile .emoji svg > g, .collage-cell, .collage-cell img, .collage-cell video, .collage-cell .c-label, .ic-sparks .ic-spark, .ic-display { transition: none; } /* The looping ones are dropped outright, hover or not. */ .cat-tile:hover .ic-drum, .cat-tile:hover .ic-display, .collage-cell.is-experts.is-lit .c-media::after { animation: none; } .cat-tile:not(.soon):hover .emoji svg > g { transform: none; } .collage-cell:hover img, .collage-cell:hover video { transform: none; } .collage-cell:hover .c-label { transform: none; } } /* =========================================================================== Hero (homepage) =========================================================================== */ .hero { padding: 52px 0 44px; } .hero-grid { display: grid; grid-template-columns: 1.05fr .95fr; gap: 56px; align-items: start; } /* Sized to stay on one line at every width, measured rather than guessed. Two columns here, so the heading only gets about half the page: just past the 900px breakpoint the column is at its narrowest relative to the text, which is what sets the 2.5vw slope. Below 900 the grid is a single column and the heading can grow faster — see the override in that breakpoint. */ .hero h1 { font-size: clamp(20px, 2.5vw, 32px); letter-spacing: -0.035em; margin-bottom: 22px; } .cat-card { border: 1px solid var(--line); border-radius: var(--radius); padding: 22px; box-shadow: var(--shadow); } .cat-card h3 { font-size: 13px; text-transform: uppercase; letter-spacing: .07em; color: var(--muted); font-weight: 600; margin-bottom: 16px; } /* Three live appliances, so three columns — and each icon runs the full width of its tile instead of floating in the middle of one. */ .cat-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px 14px; } .cat-tile { display: flex; flex-direction: column; align-items: stretch; gap: 10px; text-align: center; transition: transform .12s; position: relative; } .cat-tile:hover { transform: translateY(-3px); } .cat-tile:hover span { color: var(--brand); } /* The artwork ships with its own pastel ground, so it BECOMES the tile rather than sitting inside a second bordered box drawn around it. */ .cat-tile .emoji { line-height: 0; } .cat-tile .emoji.has-img { width: 100%; background: none; padding: 0; border-radius: var(--radius-sm); overflow: hidden; } .cat-tile .emoji img { display: block; width: 100%; height: auto; } /* Real photos (service_photo()) instead of the drawn icons, cropped to one square so the three tiles line up whatever shape each photo is. */ .cat-tile .emoji img.cat-photo { aspect-ratio: 1 / 1; object-fit: cover; background: var(--bg-soft); } /* A category with no artwork yet still needs a ground of its own to sit on. */ .cat-tile .emoji:not(.has-img) { display: grid; place-items: center; aspect-ratio: 1 / 1; background: var(--bg-soft); border-radius: var(--radius-sm); color: var(--brand); } .cat-tile .emoji:not(.has-img) svg { width: 44%; height: 44%; } .cat-tile span { font-size: 13px; font-weight: 600; line-height: 1.3; transition: color .15s; } .cat-tile.soon { opacity: .55; pointer-events: none; } .cat-tile.soon::after { content: "Soon"; position: absolute; top: 6px; right: 6px; font-size: 9px; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; background: var(--ink); color: #fff; padding: 2px 5px; border-radius: 4px; } .hero-collage { display: grid; grid-template-columns: 1fr 1fr; grid-template-rows: 168px 168px; gap: 14px; } .collage-cell { border-radius: var(--radius); overflow: hidden; position: relative; display: grid; place-items: center; color: #fff; background: linear-gradient(150deg, var(--brand), var(--brand-dark)); } /* Four tiles walking down the violet ramp — dark indigo, then the bright accent, then the deepest purple — so they read as one family at a glance. All four are dark enough to carry the #fff label set on .collage-cell. */ .collage-cell:nth-child(2) { background: linear-gradient(150deg, var(--indigo), var(--sidebar)); } .collage-cell:nth-child(3) { background: linear-gradient(150deg, var(--accent), var(--brand)); } .collage-cell:nth-child(4) { background: linear-gradient(150deg, var(--brand), var(--sidebar)); } .collage-cell .c-emoji { font-size: 46px; filter: drop-shadow(0 3px 8px rgba(0,0,0,.25)); } .collage-cell .c-ico { width: 52px; height: 52px; color: #fff; opacity: .95; } /* .c-media is the clip box. The card itself never moves or scales — the picture zooms inside it, which is why the corners stay exactly put. */ .collage-cell .c-media { position: absolute; inset: 0; overflow: hidden; border-radius: inherit; } .collage-cell img, .collage-cell video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; } /* Photographs and video both vary, so the label gets its own scrim rather than relying on whatever happens to be in the bottom-left of the frame. */ .collage-cell.has-photo::after, .collage-cell.has-video::after { content: ""; position: absolute; inset: 0; background: linear-gradient(to top, rgba(16,10,28,.66), rgba(16,10,28,0) 58%); } /* A looping clip is decoration. Someone who has asked their system to stop animation should get a still frame, not a video they cannot pause. */ @media (prefers-reduced-motion: reduce) { .collage-cell video { display: none; } } .collage-cell .c-label { position: absolute; left: 14px; bottom: 12px; z-index: 2; font-size: 12.5px; font-weight: 600; opacity: .95; } /* Four equal cells. The first used to span two rows, which pushed the fourth onto a stubby implicit row where its label sat under the icon. */ .hero-collage .collage-cell { min-height: 0; } /* ---------------------------------------------------------------- trustbar */ .trustbar { border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); background: var(--bg-soft); } .trustbar-inner { display: flex; gap: 56px; padding: 26px 0; } .trust-item .num { font-size: 27px; font-weight: 800; letter-spacing: -0.03em; display: flex; align-items: center; gap: 6px; } .trust-item .num .star { width: 20px; height: 20px; fill: var(--star); } .trust-item .lbl { font-size: 13.5px; color: var(--muted); } /* =========================================================================== Sections =========================================================================== */ .section { padding: 52px 0; } .section.tinted { background: var(--bg-soft); } .section-head { display: flex; align-items: flex-end; justify-content: space-between; gap: 20px; margin-bottom: 26px; } .section-head h2 { font-size: 26px; } .section-head p { color: var(--muted); margin-top: 6px; font-size: 14.5px; } .section-head a { color: var(--brand); font-weight: 600; font-size: 14px; white-space: nowrap; } /* ---- "See all appliances →" ---- The words shift 1px and the arrow 5px, so the gap between them opens as you hover — the arrow reads as leading rather than the whole label sliding. */ .see-all { position: relative; display: inline-flex; align-items: baseline; gap: 6px; transition: color 220ms var(--ease-out-soft); } .see-all:hover { color: var(--brand-dark); } .see-all-t, .see-all-a { transition: transform 220ms var(--ease-out-soft); } .see-all-t { position: relative; } .see-all:hover .see-all-t { transform: translateX(1px); } .see-all:hover .see-all-a { transform: translateX(5px); } /* Grows from the left, and spans the words only — measured off the text itself, so it stays right whatever the label is changed to. An underline running on past a moving arrow would look detached from it. */ .see-all-t::after { content: ""; position: absolute; left: 0; right: 0; bottom: -3px; height: 1.5px; background: currentColor; border-radius: 2px; transform: scaleX(0); transform-origin: left center; transition: transform 220ms var(--ease-out-soft); } .see-all:hover .see-all-t::after, .see-all:focus-visible .see-all-t::after { transform: scaleX(1); } @media (prefers-reduced-motion: reduce) { .see-all, .see-all-t, .see-all-a, .see-all-t::after { transition: none; } .see-all:hover .see-all-t, .see-all:hover .see-all-a { transform: none; } } /* Appliance tiles used on home + hub */ .appliance-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; } .appliance-card { border: 1px solid var(--line); border-radius: var(--radius); overflow: hidden; background: #fff; transition: transform .15s ease, box-shadow .15s ease, border-color .15s ease; display: flex; flex-direction: column; } .appliance-card:hover { transform: translateY(-3px); box-shadow: var(--shadow-lg); border-color: transparent; } /* A ratio, not a fixed height. At 158px tall the box was far shorter than the photos are: the 4:3 shots lost 38% and the square microwave lost 54%, which is why every appliance looked sliced in half. 4:3 matches the photographs, so the landscape ones now show whole and the square one crops evenly around its centre. */ .appliance-thumb { aspect-ratio: 4 / 3; display: grid; place-items: center; font-size: 54px; background: linear-gradient(150deg, var(--brand), var(--brand-dark)); color: #fff; overflow: hidden; } .appliance-thumb img { width: 100%; height: 100%; object-fit: cover; /* Appliances sit slightly low in these frames; favouring the top keeps the machine in view rather than the ceiling. */ object-position: center 42%; } .appliance-card:nth-child(2) .appliance-thumb { background: linear-gradient(150deg, var(--accent), var(--brand)); } .appliance-card:nth-child(3) .appliance-thumb { background: linear-gradient(150deg, var(--indigo), var(--sidebar)); } .appliance-body { padding: 18px 20px 20px; flex: 1; display: flex; flex-direction: column; } .appliance-body h3 { font-size: 17.5px; margin-bottom: 8px; } .appliance-body .desc { color: var(--muted); font-size: 14px; margin: 8px 0 16px; flex: 1; } .appliance-meta { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding-top: 14px; border-top: 1px solid var(--line-soft); } .appliance-meta .price { font-weight: 700; font-size: 15px; } .appliance-meta .price small { font-weight: 400; color: var(--muted); font-size: 12px; display: block; } /* =========================================================================== Service page =========================================================================== */ .crumbs { padding: 16px 0; font-size: 13px; color: var(--muted); display: flex; gap: 8px; flex-wrap: wrap; } .crumbs a:hover { color: var(--brand); } .svc-layout { display: grid; grid-template-columns: minmax(0,1fr) 348px; gap: 40px; align-items: start; padding-bottom: 60px; } .svc-hero { border: 1px solid var(--line); border-radius: var(--radius); padding: 26px; margin-bottom: 26px; display: flex; gap: 24px; } .svc-hero-icon { width: 88px; height: 88px; border-radius: var(--radius); flex: none; display: grid; place-items: center; font-size: 40px; background: linear-gradient(150deg, var(--brand), var(--brand-dark)); color: #fff; /* the ground is dark purple — never let this inherit --ink */ } .svc-hero h1 { font-size: 30px; margin-bottom: 8px; } .svc-hero .tagline { color: var(--muted); margin: 10px 0 14px; font-size: 14.5px; } .svc-chips { display: flex; flex-wrap: wrap; gap: 8px; } .chip { display: inline-flex; align-items: center; gap: 6px; padding: 6px 12px; border-radius: 999px; background: var(--bg-soft); border: 1px solid var(--line); font-size: 12.5px; font-weight: 500; color: var(--ink-2); } .chip.brand { background: var(--bg-tint); border-color: color-mix(in srgb, var(--brand) 25%, #fff); color: var(--brand-dark); } .cover-banner { display: flex; align-items: center; gap: 16px; margin-bottom: 30px; padding: 18px 22px; border-radius: var(--radius); background: linear-gradient(100deg, var(--brand), var(--brand-dark)); color: #fff; } /* --- CTA banner: energy pulse -------------------------------------------- Deliberately NOT the scan used above. That section informs; this one asks for the booking, so the motion resolves toward the button rather than travelling past it: sweep, confirm, ripple, then the button answers. Trust -> confirmation -> action. */ .cover-banner { position: relative; overflow: hidden; } /* An almost imperceptible drift on the purple ground. 22s, so it reads as a surface catching light rather than as something animating. */ @keyframes cb-drift { 0%, 100% { background-position: 0% 50%; } 50% { background-position: 100% 50%; } } .cover-banner { background: linear-gradient(100deg, var(--brand), var(--brand-dark), var(--brand)); background-size: 200% 100%; animation: cb-drift 22s ease-in-out infinite; } /* ---- the light sweep ---- */ @keyframes cb-sweep { from { transform: translateX(-60%) skewX(-14deg); } to { transform: translateX(320%) skewX(-14deg); } } .cover-banner .cb-sweep { position: absolute; top: 0; bottom: 0; left: 0; width: 30%; background: linear-gradient(100deg, transparent, rgba(255,255,255,.16), transparent); transform: translateX(-60%) skewX(-14deg); pointer-events: none; } .cover-banner.is-pulsing .cb-sweep { animation: cb-sweep 1400ms cubic-bezier(.22, 1, .36, 1); } /* ---- the confirmation mark ---- */ .cover-banner .cb-icon { font-size: 26px; position: relative; display: inline-flex; flex: none; } .cover-banner .cb-check { width: 30px; height: 30px; transform: scale(.82); } .cover-banner .cb-check circle, .cover-banner .cb-check path { stroke-dasharray: 70; stroke-dashoffset: 70; } @keyframes cb-draw { to { stroke-dashoffset: 0; } } @keyframes cb-grow { to { transform: scale(1); } } @keyframes cb-ring { from { transform: scale(.6); opacity: .55; } to { transform: scale(2.2); opacity: 0; } } .cover-banner .cb-ring { position: absolute; inset: 0; border-radius: 50%; border: 2px solid rgba(255,255,255,.75); opacity: 0; pointer-events: none; } .cover-banner.is-pulsing .cb-check { animation: cb-grow 640ms cubic-bezier(.22, 1, .36, 1) 380ms forwards; } .cover-banner.is-pulsing .cb-check circle { animation: cb-draw 620ms cubic-bezier(.22, 1, .36, 1) 380ms forwards; } .cover-banner.is-pulsing .cb-check path { animation: cb-draw 520ms cubic-bezier(.22, 1, .36, 1) 820ms forwards; } .cover-banner.is-pulsing .cb-ring { animation: cb-ring 900ms cubic-bezier(.22, 1, .36, 1) 700ms; } /* Settled state, so it never sits half-drawn — this is what a visitor with reduced motion, or one who never scrolls it into view, sees. */ .cover-banner.is-pulsed .cb-check { transform: scale(1); } .cover-banner.is-pulsed .cb-check circle, .cover-banner.is-pulsed .cb-check path { stroke-dashoffset: 0; } /* ---- the ripple running to the button ---- */ @keyframes cb-ripple { from { transform: translateX(0); opacity: .5; } to { transform: translateX(100%); opacity: 0; } } .cover-banner.is-pulsing::after { content: ""; position: absolute; top: 0; bottom: 0; left: 0; width: 34%; background: linear-gradient(90deg, rgba(255,255,255,.14), transparent); pointer-events: none; animation: cb-ripple 900ms cubic-bezier(.22, 1, .36, 1) 1150ms; } /* ---- the button answers, then settles ---- */ .cover-banner .btn { position: relative; display: inline-flex; align-items: center; gap: 8px; transition: transform 350ms cubic-bezier(.22, 1, .36, 1), box-shadow 350ms cubic-bezier(.22, 1, .36, 1); } .cover-banner.is-arrived .btn { transform: translateY(-3px); box-shadow: 0 10px 26px rgba(0, 0, 0, .22), 0 0 0 4px rgba(255, 255, 255, .18); } .cover-banner .btn-arrow { width: 16px; height: 16px; flex: none; opacity: 0; transform: translateX(-6px); transition: opacity 300ms cubic-bezier(.22, 1, .36, 1), transform 300ms cubic-bezier(.22, 1, .36, 1); } .cover-banner .btn:hover { transform: translateY(-3px); box-shadow: 0 10px 24px rgba(0,0,0,.2); } .cover-banner .btn:hover .btn-arrow { opacity: 1; transform: translateX(0); } @media (prefers-reduced-motion: reduce) { .cover-banner { animation: none; background-position: 0 50%; } .cover-banner .cb-sweep, .cover-banner .cb-ring, .cover-banner.is-pulsing::after { display: none; } .cover-banner .cb-check { transform: scale(1); animation: none !important; } .cover-banner .cb-check circle, .cover-banner .cb-check path { stroke-dashoffset: 0; animation: none !important; } .cover-banner .btn, .cover-banner .btn-arrow { transition: none; } .cover-banner .btn:hover { transform: none; } } .cover-banner h4 { font-size: 16px; margin-bottom: 2px; } .cover-banner p { font-size: 13.5px; opacity: .9; } .cover-banner .btn { margin-left: auto; background: #fff; color: var(--brand-dark); } .group-title { font-size: 20px; margin: 32px 0 16px; } .group-title:first-of-type { margin-top: 0; } /* --- the bookable service card ------------------------------------------ */ .svc-card { display: flex; gap: 20px; padding: 20px 0; border-bottom: 1px solid var(--line-soft); } .svc-card:last-child { border-bottom: 0; } .svc-card-main { flex: 1; min-width: 0; } .svc-card h4 { font-size: 16px; margin-bottom: 7px; } .svc-card-meta { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin-bottom: 9px; } .svc-card .price-line { font-weight: 700; font-size: 15.5px; } .svc-card .price-line .pfx { font-weight: 500; color: var(--ink-2); font-size: 14px; } .svc-card .dot { color: var(--line); } .svc-card .desc { color: var(--muted); font-size: 13.5px; margin-bottom: 8px; } .svc-card .note { display: inline-flex; align-items: center; gap: 6px; font-size: 12.5px; color: var(--ink-2); background: var(--bg-soft); padding: 5px 10px; border-radius: 7px; border: 1px solid var(--line-soft); } .svc-card .opts { font-size: 13px; color: var(--brand); font-weight: 600; margin-top: 9px; display: inline-block; } .svc-card-side { width: 132px; flex: none; display: flex; flex-direction: column; align-items: center; gap: 10px; } .svc-card-thumb { width: 132px; height: 92px; border-radius: var(--radius-sm); display: grid; place-items: center; font-size: 34px; background: var(--bg-soft); border: 1px solid var(--line-soft); } /* add / qty stepper */ .add-btn { width: 100%; padding: 9px 0; border: 1.5px solid var(--brand); border-radius: var(--radius-sm); color: var(--brand); background: #fff; font-weight: 700; font-size: 14px; transition: background .15s; } .add-btn:hover { background: var(--bg-tint); } .stepper { width: 100%; display: flex; align-items: center; justify-content: space-between; border: 1.5px solid var(--brand); border-radius: var(--radius-sm); overflow: hidden; } .stepper button { width: 34px; height: 36px; color: var(--brand); font-size: 18px; font-weight: 700; line-height: 1; } .stepper button:hover { background: var(--bg-tint); } .stepper .qty { font-weight: 700; color: var(--brand); font-size: 14px; } /* --- how it works -------------------------------------------------------- */ /* ---------------------------------------------------------- service journey The four cards read as one process: a signal travels the rail behind them and lights each in turn. Layout, type, colour and card size are untouched — everything below moves opacity, transform or a pseudo-element only, so the text never shifts and stays readable at every moment. */ .steps { display: grid; grid-template-columns: repeat(4, 1fr); gap: 18px; position: relative; } /* The rail, threaded through the badge centres (20px card padding + half of the 28px badge = 34px from the top). */ .jr-line { position: absolute; left: 0; right: 0; top: 34px; height: 2px; background: var(--line); border-radius: 2px; overflow: hidden; pointer-events: none; } .jr-fill { position: absolute; left: 0; top: 0; height: 100%; width: 0; background: linear-gradient(90deg, var(--brand), var(--accent)); border-radius: 2px; transition: width 900ms cubic-bezier(.22, 1, .36, 1), height 900ms cubic-bezier(.22, 1, .36, 1); } /* A light particle drifting the finished rail — the only thing that keeps moving, and it is two pixels wide. */ @keyframes jr-drift { from { transform: translateX(-40px); } to { transform: translateX(100%); } } .steps.is-complete .jr-line::after { content: ""; position: absolute; top: 0; left: 0; width: 40px; height: 100%; background: linear-gradient(90deg, transparent, rgba(255,255,255,.85), transparent); animation: jr-drift 3.4s linear infinite; } .jr-dot { position: absolute; left: 0; top: 0; z-index: 2; width: 10px; height: 10px; border-radius: 50%; background: var(--brand); opacity: 0; pointer-events: none; box-shadow: 0 0 0 4px rgba(109, 40, 217, .16), 0 0 14px 2px rgba(109, 40, 217, .45); transition: transform 900ms cubic-bezier(.22, 1, .36, 1), opacity 300ms ease; } .step { padding: 20px; border: 1px solid var(--line); border-radius: var(--radius); background: #fff; position: relative; /* Softened until the signal arrives. */ opacity: .35; transition: opacity 700ms cubic-bezier(.22, 1, .36, 1), transform 700ms cubic-bezier(.22, 1, .36, 1), border-color 700ms cubic-bezier(.22, 1, .36, 1), box-shadow 700ms cubic-bezier(.22, 1, .36, 1); } /* Before the journey starts nothing is dimmed for someone without JS. */ .steps:not(.is-running) .step { opacity: 1; } .step.is-done { opacity: 1; } .step.is-lit { opacity: 1; transform: translateY(-6px); border-color: #C4B5FD; box-shadow: 0 12px 28px rgba(46, 16, 101, .12); } .step .n { width: 28px; height: 28px; border-radius: 8px; display: grid; place-items: center; background: var(--bg-tint); color: var(--brand-dark); font-weight: 800; font-size: 13px; margin-bottom: 12px; position: relative; transform: scale(.8); transition: transform 700ms cubic-bezier(.22, 1, .36, 1), background 700ms cubic-bezier(.22, 1, .36, 1), color 700ms cubic-bezier(.22, 1, .36, 1); } .steps:not(.is-running) .step .n, .step.is-done .n { transform: scale(1); } .step.is-lit .n { transform: scale(1); background: var(--brand); color: #fff; } .step .n-num, .step .n-check { grid-area: 1 / 1; } .step .n-check { width: 16px; height: 16px; opacity: 0; stroke-dasharray: 26; stroke-dashoffset: 26; } /* ---- step 1: a ripple leaves the badge as the request lands ---- */ @keyframes jr-ripple { from { transform: scale(.7); opacity: .55; } to { transform: scale(2.6); opacity: 0; } } .step .n::after { content: ""; position: absolute; inset: 0; border-radius: inherit; background: var(--brand); opacity: 0; pointer-events: none; } .step.is-lit .n::after { animation: jr-ripple 900ms cubic-bezier(.22, 1, .36, 1); } /* ---- step 2: a scanning sweep, like an inspection running ---- */ @keyframes jr-scan { to { transform: rotate(360deg); } } .step[data-step="2"] .n::before { content: ""; position: absolute; inset: -5px; border-radius: 10px; border: 2px solid transparent; border-top-color: var(--brand); opacity: 0; transition: opacity 300ms ease; } .step[data-step="2"].is-lit .n::before { opacity: 1; animation: jr-scan 1.1s linear infinite; } /* ---- steps 3 and 4: the tick draws itself ---- */ @keyframes jr-draw { to { stroke-dashoffset: 0; } } .step[data-step="3"].is-lit .n-num, .step[data-step="4"].is-lit .n-num, .step[data-step="3"].is-done .n-num, .step[data-step="4"].is-done .n-num { opacity: 0; transition: opacity 260ms ease; } .step[data-step="3"].is-lit .n-check, .step[data-step="4"].is-lit .n-check, .step[data-step="3"].is-done .n-check, .step[data-step="4"].is-done .n-check { opacity: 1; animation: jr-draw 620ms cubic-bezier(.22, 1, .36, 1) forwards; } .step[data-step="3"].is-done .n, .step[data-step="4"].is-done .n { background: var(--brand); color: #fff; } .step h4 { font-size: 15px; margin-bottom: 6px; } .step p { font-size: 13.5px; color: var(--muted); } /* ---- hover, once the journey has run ---- */ .step { cursor: default; } .steps.is-complete .step:hover { transform: translateY(-6px); border-color: #C4B5FD; box-shadow: 0 12px 28px rgba(46, 16, 101, .12); } .steps.is-complete .step:hover .n { transform: scale(1.08); } /* A small light beside the number on hover. Drawn on the CARD, not on the badge: .n::before is already the step-2 scan ring, and two rules fighting over one pseudo-element would have meant the ring vanished the moment you hovered step 2. Positioned off the card's own padding — 20px in, plus the 28px badge, puts its centre on the badge's midline. */ .step::after { content: ""; position: absolute; left: 54px; top: 34px; width: 5px; height: 5px; margin-top: -2.5px; border-radius: 50%; background: var(--accent); opacity: 0; transition: opacity 260ms ease; pointer-events: none; } .steps.is-complete .step:hover::after { opacity: 1; } /* ---- phones: the journey runs down the page ---- */ @media (max-width: 760px) { .steps { grid-template-columns: 1fr; gap: 14px; } .jr-line { left: 34px; right: auto; top: 0; bottom: 0; width: 2px; height: auto; } .jr-fill { width: 100% !important; height: 0; } .steps.is-complete .jr-line::after { display: none; } /* drift is horizontal only */ .step.is-lit { transform: translateY(-3px); } } @media (prefers-reduced-motion: reduce) { .step, .step .n, .jr-fill, .jr-dot { transition: none; } .step { opacity: 1; } .step .n { transform: scale(1); } .step.is-lit { transform: none; } .step.is-lit .n::after, .step[data-step="2"].is-lit .n::before, .steps.is-complete .jr-line::after { animation: none; } .step .n-check { animation: none !important; stroke-dashoffset: 0; } .steps.is-complete .step:hover { transform: none; } } /* Reviews on a service page: a plain grid, not the homepage carousel. There are only ever a handful per appliance, and a slider for three cards is machinery with nothing to do. */ .svc-reviews { display: grid; grid-template-columns: repeat(2, 1fr); gap: 14px; } .svc-reviews .rev-card { box-shadow: none; } @media (max-width: 720px) { .svc-reviews { grid-template-columns: 1fr; } } /* The hero takes a photograph rather than the flat drawing where one exists, so it needs to fill the frame instead of sitting inside it. */ /* A photograph gets a frame shaped like the photograph. The 16:9 frame below is right for the flat illustrations, but the technician shots are 4:3 — dropped into 16:9 with object-fit:cover the browser removed a quarter of the height, half of it off the top, and took the technician's head with it. Matching the frame to the source crops nothing at all. object-position is a fallback for any future shot that is not exactly 4:3: it favours the upper part of the frame, where a person's head is. */ .uc-hero-media.has-shot img { width: 100%; height: auto; display: block; aspect-ratio: 4 / 3; object-fit: cover; object-position: center 35%; } /* --- review carousel ----------------------------------------------------- A scroll-snap track, not a transform slider. The browser then gives us touch swipe, momentum, keyboard arrows and a scrollbar for free, and the JS only has to call scrollBy() — nothing to keep in sync and nothing that breaks if a script fails to run. */ /* Half stars without a half-star glyph: two rows, the gold one clipped to --fill of the width, so 3.5 renders as exactly three and a half. Both rows are pseudo-element content — see star_row() for why they are not text. The element itself is empty. */ .stars { position: relative; display: inline-block; vertical-align: -1px; line-height: 1; font-size: 14px; letter-spacing: 2px; white-space: nowrap; } .stars::before, .stars::after { content: "★★★★★"; display: block; } .stars::before { color: #DDD6FE; } .stars::after { position: absolute; left: 0; top: 0; overflow: hidden; width: var(--fill, 0%); color: var(--star); } .rev-sample-note { display: flex; align-items: flex-start; gap: 9px; background: #fdf8ec; border: 1px solid #f0debb; border-radius: var(--radius-sm); padding: 11px 14px; margin-bottom: 18px; font-size: 13px; line-height: 1.55; color: #7a5a10; } .rev-sample-note svg { flex: none; margin-top: 1px; } .rev-nav { display: flex; gap: 8px; } .rev-arrow { width: 40px; height: 40px; border-radius: 50%; flex: none; border: 1px solid var(--line); background: #fff; color: var(--brand); display: grid; place-items: center; cursor: pointer; transition: background 220ms var(--ease-out-soft), border-color 220ms var(--ease-out-soft), transform 220ms var(--ease-out-soft); } .rev-arrow svg { width: 19px; height: 19px; } .rev-arrow:hover { background: var(--bg-tint); border-color: var(--brand); transform: translateY(-2px); } .rev-arrow:active { transform: translateY(0); transition-duration: 90ms; } .rev-arrow[disabled] { opacity: .35; cursor: default; transform: none; background: #fff; border-color: var(--line); } .rev-carousel { position: relative; } .rev-track { display: flex; gap: 20px; overflow-x: auto; scroll-snap-type: x mandatory; scroll-behavior: smooth; /* Room for the cards' hover lift and shadow, which would otherwise be clipped by the scroll container. */ padding: 6px 2px 14px; scrollbar-width: none; -ms-overflow-style: none; } .rev-track::-webkit-scrollbar { display: none; } .rev-track:focus-visible { outline: 2px solid var(--brand); outline-offset: 4px; border-radius: var(--radius); } /* Three across on desktop, and the gap is taken out of each card so three really do fit rather than spilling a sliver of a fourth. */ .rev-card { flex: 0 0 calc((100% - 40px) / 3); scroll-snap-align: start; display: flex; flex-direction: column; gap: 14px; padding: 22px; border: 1px solid var(--line); border-radius: var(--radius); background: #fff; box-shadow: var(--shadow); transition: transform 280ms var(--ease-out-soft), box-shadow 280ms var(--ease-out-soft), border-color 280ms var(--ease-out-soft); } .rev-card:hover { transform: translateY(-4px); box-shadow: var(--shadow-lg); border-color: #C4B5FD; } /* Reviewer first, then the words — a name and a face give the quote a source before you read it. */ .rev-who { display: flex; align-items: center; gap: 11px; } .rev-av { width: 42px; height: 42px; flex: none; line-height: 0; } /* Works for both the photo and the drawn fallback — object-fit keeps a non-square photo from squashing inside the circle. */ .rev-face { width: 42px; height: 42px; border-radius: 50%; display: block; object-fit: cover; background: var(--bg-tint); } .rev-id { min-width: 0; } .rev-id strong { display: block; font-size: 14px; } .rev-rate { display: flex; align-items: center; gap: 7px; margin-top: 2px; } .rev-score { font-size: 12.5px; font-weight: 700; color: var(--ink); font-variant-numeric: tabular-nums; } .rev-when { margin-left: auto; font-size: 11.5px; color: var(--muted); white-space: nowrap; align-self: flex-start; } .rev-text { flex: 1; font-size: 14px; line-height: 1.65; color: var(--ink-2); /* Clamped, so every card in a row ends at the same place however long the review runs. */ display: -webkit-box; -webkit-line-clamp: 4; -webkit-box-orient: vertical; overflow: hidden; } .rev-tag { align-self: flex-start; background: var(--bg-tint); color: var(--brand-dark); border-radius: 999px; padding: 5px 12px; font-size: 12px; font-weight: 600; } /* --- leave a review ------------------------------------------------------ */ /* The form column is the narrower of the two — it holds four short fields, and giving it the extra width was what made it tower over the copy. */ .rev-share { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, .9fr); gap: 36px; align-items: center; } .rev-eyebrow { display: inline-flex; align-items: center; gap: 7px; background: var(--bg-tint); color: var(--brand-dark); border-radius: 999px; padding: 6px 13px; margin-bottom: 12px; font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: .07em; } .rev-share-copy h2 { font-size: 27px; margin-bottom: 10px; text-wrap: balance; } .rev-share-copy > p { font-size: 14.5px; line-height: 1.65; color: var(--ink-2); max-width: 44ch; } .rev-why { list-style: none; display: grid; gap: 14px; } .rev-why li { display: flex; align-items: center; gap: 11px; } .rev-why .ico { width: 36px; height: 36px; border-radius: 10px; flex: none; background: var(--bg-tint); color: var(--brand); display: grid; place-items: center; } .rev-why .ico svg { width: 16px; height: 16px; } .rev-why strong { display: block; font-size: 13.5px; } .rev-why li > span:last-child { font-size: 12.5px; color: var(--muted); line-height: 1.4; } /* Compact on purpose. This is four short fields; at full form sizing it ran taller than the panel beside it and the section lost its balance. */ .rev-form-card { background: #fff; border: 1px solid var(--line); border-radius: var(--radius); box-shadow: var(--shadow); padding: 20px; } .rev-form-card h3 { font-size: 16.5px; } .rev-form-sub { font-size: 12.5px; color: var(--muted); margin-top: 3px; } .rev-form { display: grid; gap: 12px; } .rev-form-row { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; } .rev-form label { display: block; font-size: 12px; font-weight: 700; margin-bottom: 5px; } .rev-form .req { color: var(--accent); } .rev-form input, .rev-form textarea, .rev-form select { width: 100%; border: 1.5px solid var(--line); border-radius: 9px; padding: 9px 12px; font: inherit; font-size: 13.5px; outline: none; background: #fff; color: var(--ink); transition: border-color 200ms var(--ease-out-soft); } .rev-form input:focus, .rev-form textarea:focus, .rev-form select:focus { border-color: var(--brand); } .rev-form textarea { resize: vertical; min-height: 74px; line-height: 1.55; } .rev-form .err { display: block; font-size: 12px; color: #c0392b; margin-top: 4px; font-weight: 600; } .rev-form .has-error input, .rev-form .has-error textarea { border-color: #c0392b; } .rev-form .field { position: relative; } .rev-form .btn { padding: 11px 18px; font-size: 14px; } .rv-count { position: absolute; right: 10px; bottom: 8px; font-size: 11px; color: var(--muted); } /* Radios in reverse DOM order, laid back out with row-reverse. The checked star and every one BEFORE it light up via ~, which only reaches forward — reversing the source is what makes that work with no JS at all. */ /* position: relative contains the absolute radios below. They are only 1px here and this row is not inside a scroller, so they cause no harm today — but without a positioned parent they belong to the document rather than to this row, which is exactly the defect that widened the checkout page. */ .rv-stars { position: relative; display: flex; flex-direction: row-reverse; justify-content: flex-end; align-items: center; gap: 4px; } /* 16px for the same reason as the day/slot radios — see the note there. The star is a