/* ============================================================ Five Star Repairs: marketing site Simple & elegant: warm golden neutrals, gold buttons, hairline rules, Manrope (display) + Inter (text). ============================================================ */ /* Self-hosted fonts: avoids the render-blocking Google Fonts request chain. Preloaded in each page's for early fetch. */ @font-face { font-family: "Manrope"; font-style: normal; font-weight: 200 800; font-display: swap; src: url(assets/fonts/manrope-latin.woff2) format("woff2"); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; } @font-face { font-family: "Manrope"; font-style: normal; font-weight: 200 800; font-display: swap; src: url(assets/fonts/manrope-latin-ext.woff2) format("woff2"); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; } @font-face { font-family: "Inter"; font-style: normal; font-weight: 400 700; font-display: swap; src: url(assets/fonts/inter-latin.woff2) format("woff2"); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; } @font-face { font-family: "Inter"; font-style: normal; font-weight: 400 700; font-display: swap; src: url(assets/fonts/inter-latin-ext.woff2) format("woff2"); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; } /* Share Tech Mono (SIL OFL 1.1): the digital/LED face, used only by the deal ticker, so it's loaded lazily rather than preloaded like the two above. If the ticker goes, this can go with it. */ @font-face { font-family: "Share Tech Mono"; font-style: normal; font-weight: 400; font-display: swap; src: url(assets/fonts/sharetechmono-latin.woff2) format("woff2"); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; } /* ---------------- Tokens ---------------- */ :root { /* Brand: gold, reserved for stars and small warm accents */ --gold-50:#fff8e1; --gold-100:#ffecb3; --gold-200:#ffe082; --gold-300:#ffd54f; --gold-400:#ffca28; --gold-500:#f5b301; --gold-600:#d99e00; --gold-700:#a87c00; --gold-800:#8a6400; /* Neutral / ink (kept for the admin dashboard's dark override) */ --ink-950:#0c0d10; --ink-900:#111318; --ink-850:#15171c; --ink-800:#1c1f26; --ink-700:#2a2d34; --ink-600:#3a3e47; --ink-400:#6b7280; --ink-300:#9aa0aa; --ink-200:#c7ccd4; --ink-100:#e9ecf1; --ink-50:#f5f6f8; --white:#ffffff; /* Semantic feedback (tuned for light backgrounds) */ --green-500:#1e9e50; --green-600:#178043; --red-500:#d92d20; --red-600:#b42318; --blue-500:#2563eb; /* Semantic aliases: warm golden light theme */ --accent:var(--gold-500); --accent-strong:#8f6b00; --accent-pressed:var(--gold-600); --accent-ink:#231a00; --accent-soft:rgba(245,179,1,0.12); --accent-ring:rgba(26,28,32,0.18); --bg:var(--white); --surface:var(--white); --surface-raised:#f4efe2; --surface-sunken:#faf7ef; --text:#1a1c20; --text-muted:#52565e; --text-faint:#7a7e87; --text-on-accent:#231a00; --border:#ece7da; --border-strong:#dcd4bf; --border-accent:#c9b789; --success:var(--green-500); --danger:var(--red-500); --info:var(--blue-500); --star-empty:#e9e4d6; --glow-gold:none; /* Buttons + the dark CTA band */ --btn-bg:var(--gold-500); --btn-text:#231a00; --btn-bg-hover:var(--gold-400); --band-bg:#241d04; /* Type */ --font-display:"Manrope", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif; --font-sans:"Inter", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif; --font-mono:ui-monospace, "SF Mono", Menlo, Consolas, monospace; --weight-regular:400; --weight-medium:500; --weight-semibold:600; --weight-bold:700; --weight-extra:700; --text-xs:0.75rem; --text-sm:0.875rem; --text-base:1rem; --text-md:1.125rem; --text-lg:1.375rem; --text-xl:1.75rem; --text-2xl:2.25rem; --text-3xl:3rem; --text-4xl:4rem; --leading-tight:1.12; --leading-snug:1.3; --leading-normal:1.55; --leading-relaxed:1.7; --tracking-tight:-0.02em; --tracking-normal:0; --tracking-wide:0.01em; --tracking-eyebrow:0.22em; --tracking-caps:0.14em; --heading-weight:var(--weight-bold); /* Spacing */ --space-1:4px; --space-2:8px; --space-3:12px; --space-4:16px; --space-5:20px; --space-6:24px; --space-8:32px; --space-10:40px; --space-12:48px; --space-16:64px; --space-20:80px; --space-24:96px; /* Radii: buttons are pills; surfaces stay gently rounded */ --radius-xs:6px; --radius-sm:8px; --radius-md:10px; --radius-lg:14px; --radius-xl:20px; --radius-pill:999px; /* Shadows: barely there */ --shadow-sm:0 1px 2px rgba(26,28,32,0.05); --shadow-md:0 8px 24px rgba(26,28,32,0.07); --shadow-lg:0 24px 56px rgba(26,28,32,0.14); --shadow-inset:none; --shadow-glow:0 1px 2px rgba(26,28,32,0.05); --shadow-glow-strong:0 8px 24px rgba(26,28,32,0.08); --ring:0 0 0 3px var(--accent-ring); /* Layout */ --container:1120px; --container-narrow:760px; --gutter:clamp(20px,5vw,48px); /* Motion */ --ease-out:cubic-bezier(0.32,0.72,0.2,1); --ease-bounce:cubic-bezier(0.32,0.72,0.2,1.4); --dur-fast:0.15s; --dur-base:0.25s; --dur-slow:0.5s; /* Hero phone: sized off viewport height so it stays big but never overflows; body colour is themeable (see the design-preview panel) */ --phone-w:min(78vw, clamp(220px, 34vh, 330px)); --drop-dur:1.1s; --phone-c1:#f6e2b0; --phone-c2:#d3a95f; } /* ---------------- Base ---------------- */ *,*::before,*::after { box-sizing:border-box; } html { scroll-behavior:smooth; scroll-padding-top:76px; -webkit-text-size-adjust:100%; text-size-adjust:100%; } body { margin:0; min-height:100vh; min-height:100dvh; font-family:var(--font-sans); font-size:var(--text-base); line-height:var(--leading-normal); color:var(--text); background-color:var(--bg); background-image:var(--glow-gold); background-repeat:no-repeat; -webkit-font-smoothing:antialiased; text-rendering:optimizeLegibility; -webkit-tap-highlight-color:transparent; overflow-wrap:break-word; } /* Snappier taps: no double-tap-zoom wait on things people press */ a, button, label, summary, input, select, textarea { touch-action:manipulation; } h1,h2,h3,h4 { font-family:var(--font-display); font-weight:var(--heading-weight); line-height:var(--leading-tight); letter-spacing:var(--tracking-tight); margin:0 0 var(--space-4); } p { margin:0 0 var(--space-4); } a { color:var(--text); text-decoration:underline; text-decoration-color:rgba(26,28,32,0.3); text-underline-offset:3px; } a:hover { text-decoration-color:currentColor; } img { max-width:100%; } ::selection { background:var(--gold-200); color:var(--accent-ink); } :focus-visible { outline:none; box-shadow:var(--ring); border-radius:var(--radius-xs); } .eyebrow { font-size:var(--text-xs); font-weight:var(--weight-semibold); letter-spacing:var(--tracking-eyebrow); text-transform:uppercase; color:var(--accent-strong); } .container { max-width:var(--container); margin:0 auto; } .container--narrow { max-width:var(--container-narrow); margin:0 auto; } .section { padding:clamp(56px,8vw,104px) var(--gutter); } .section--alt { background:var(--surface-sunken); } .section__head { text-align:center; margin-bottom:52px; } .section__head h2 { font-size:clamp(1.9rem,4vw,2.6rem); margin:14px 0 0; } .section__head p { color:var(--text-muted); font-size:var(--text-md); margin:14px auto 0; max-width:56ch; } .section__head a { color:var(--text-muted); } /* ---------------- Button ---------------- */ .btn { display:inline-flex; align-items:center; justify-content:center; gap:8px; padding:13px 26px; font-size:var(--text-sm); font-family:var(--font-sans); font-weight:var(--weight-semibold); letter-spacing:var(--tracking-wide); border-radius:var(--btn-radius, var(--radius-pill)); border:1px solid transparent; cursor:pointer; transition:background var(--dur-fast) var(--ease-out), border-color var(--dur-fast) var(--ease-out), transform var(--dur-fast) var(--ease-out); text-decoration:none; } .btn:hover { text-decoration:none; } .btn--sm { padding:9px 18px; font-size:var(--text-sm); gap:6px; } .btn--lg { padding:16px 32px; font-size:var(--text-base); gap:10px; } .btn--block { display:flex; width:100%; } .btn--primary { background:var(--btn-bg); color:var(--btn-text); border-color:var(--btn-bg); } .btn--primary:hover:not(:disabled) { background:var(--btn-bg-hover); border-color:var(--btn-bg-hover); } .btn--secondary { background:var(--surface); color:var(--text); border-color:var(--border-strong); } .btn--secondary:hover:not(:disabled) { border-color:var(--text); } .btn--ghost { background:transparent; color:var(--text); } .btn--danger { background:var(--danger); color:#fff; border-color:var(--danger); } .btn:active:not(:disabled) { transform:scale(0.98); } .btn:disabled { opacity:0.45; cursor:not-allowed; } .icon { width:20px; height:20px; flex:none; } .btn .icon { width:1em; height:1em; } /* ---------------- Card ---------------- */ .card { background:var(--surface); border:1px solid var(--border); border-radius:var(--radius-lg); padding:var(--space-8); box-shadow:none; color:var(--text); } .card--highlight { border-color:var(--border-accent); } /* ---------------- Badge ---------------- */ .badge { display:inline-flex; align-items:center; gap:6px; padding:5px 12px; font-size:var(--text-xs); font-family:var(--font-sans); font-weight:var(--weight-semibold); letter-spacing:var(--tracking-caps); text-transform:uppercase; line-height:1.3; border-radius:var(--radius-pill); white-space:nowrap; background:var(--surface-raised); color:var(--text-muted); border:1px solid transparent; } .badge--solid { background:var(--text); color:var(--bg); border-color:var(--text); } .badge--neutral { background:var(--surface-raised); color:var(--text-muted); border-color:transparent; } /* the running offer: gold, so it reads as a deal rather than a category */ .badge--deal { background:var(--gold-500); color:var(--accent-ink); border-color:var(--gold-500); font-weight:var(--weight-bold); } a.badge--deal:hover { background:var(--gold-400); border-color:var(--gold-400); color:var(--accent-ink); text-decoration:none; } /* Large drop-off badge on the Find-us address cards */ .dropoff-badge { font-size:var(--text-xs); font-weight:var(--weight-semibold); padding:8px 16px; gap:8px; } .dropoff-badge .icon { width:15px; height:15px; } /* ---------------- Form fields ---------------- */ .field { display:flex; flex-direction:column; gap:6px; width:100%; } .field[hidden] { display:none; } .field__label { font-size:var(--text-sm); font-weight:var(--weight-medium); color:var(--text); } .field__wrap { position:relative; display:flex; align-items:center; } .field__wrap[hidden] { display:none; } /* [hidden] must beat the display:flex above */ .field__icon { position:absolute; left:14px; display:flex; color:var(--text-faint); pointer-events:none; } .field__icon .icon { width:16px; height:16px; } .input, .select { width:100%; padding:12px 14px; font-size:var(--text-base); font-family:var(--font-sans); color:var(--text); background:var(--surface); border:1px solid var(--border-strong); border-radius:var(--radius-md); outline:none; transition:border-color var(--dur-fast), box-shadow var(--dur-fast); } .field__wrap--icon .input { padding-left:42px; } /* Top-align the leading icon when the field is a multi-line textarea (address) */ .field__wrap--top { align-items:flex-start; } .field__wrap--top .field__icon { top:14px; } .input:focus, .select:focus { border-color:var(--text); box-shadow:var(--ring); } .input::placeholder { color:#a4a7ad; } .select { appearance:none; -webkit-appearance:none; padding-right:40px; cursor:pointer; } .field__chevron { position:absolute; right:14px; pointer-events:none; color:var(--text-faint); font-size:12px; } /* ---------------- Star rating ---------------- */ .stars { display:inline-flex; align-items:center; gap:8px; } .stars__row { display:inline-flex; gap:2px; } .stars__row svg { display:block; } .stars__value { font-size:var(--text-sm); font-weight:var(--weight-semibold); color:var(--text); } /* ============================================================ Deal bar: the 2-for-1 battery offer, sitting above the nav. It scrolls away with the page: the sticky nav keeps the booking CTA on screen, so the strip doesn't need to eat height as well. ============================================================ */ .dealbar { display:block; position:relative; overflow:hidden; padding:10px 0; background:#0d0f13; color:var(--gold-400); font-family:"Share Tech Mono", var(--font-mono); font-size:0.95rem; line-height:1.35; letter-spacing:0.06em; text-transform:uppercase; text-decoration:none; /* the strip is a light source, not a card; the glow below the rule sells it */ box-shadow:inset 0 -1px 0 rgba(255,202,40,0.3), 0 1px 14px rgba(255,176,0,0.16); } .dealbar:hover { color:var(--gold-300); text-decoration:none; } /* Scanlines: a hairline dark comb over the whole strip, so the glowing text reads as an LED matrix rather than yellow words on black. */ .dealbar::after { content:""; position:absolute; inset:0; pointer-events:none; background:repeating-linear-gradient(180deg, rgba(0,0,0,0.28) 0 1px, transparent 1px 3px); } /* The moving part. JS repeats the segment until it overflows and sets --seg-w / --dur from the measured width, so the loop lands exactly one segment along and the speed stays constant however long the copy is. */ .dealbar__track { display:flex; align-items:center; width:max-content; will-change:transform; animation:dealbarScroll var(--dur, 22s) linear infinite; } @keyframes dealbarScroll { from { transform:translateX(0); } to { transform:translateX(calc(var(--seg-w, 100%) * -1)); } } /* pausing on hover lets someone actually read the thing they're about to click */ .dealbar:hover .dealbar__track, .dealbar:focus-visible .dealbar__track { animation-play-state:paused; } .dealbar__seg { display:flex; align-items:center; gap:16px; padding-right:16px; flex:none; white-space:nowrap; } .dealbar__seg > span:not(.dealbar__tag) { text-shadow:0 0 10px rgba(255,176,0,0.55); } .dealbar__tag { flex:none; padding:3px 10px 2px; background:var(--gold-500); color:#0d0f13; font-weight:400; letter-spacing:0.12em; box-shadow:0 0 14px rgba(255,176,0,0.5); } .dealbar__sep { color:var(--gold-700); } .dealbar__ends { color:#fff; } @media (max-width:720px) { .dealbar { font-size:0.85rem; padding:8px 0; } .dealbar__seg { gap:12px; padding-right:12px; } } /* Reduced motion: park it. One segment, centred, no animation; the offer still reads, nothing moves. */ @media (prefers-reduced-motion: reduce) { .dealbar { padding:10px var(--gutter); } .dealbar__track { animation:none; justify-content:center; width:auto; } .dealbar__seg ~ .dealbar__seg { display:none; } /* nothing scrolls past the edges now, so the segment has to fit the screen: let it wrap, and drop the trailing separator that led into the next copy */ .dealbar__seg { flex:0 1 auto; min-width:0; padding-right:0; flex-wrap:wrap; justify-content:center; white-space:normal; } .dealbar__sep:last-child { display:none; } } /* …and on a narrow screen that wrap would run to three ragged lines, so the parked version keeps only the offer and the deadline. */ @media (prefers-reduced-motion: reduce) and (max-width:720px) { .dealbar__detail, .dealbar__sep { display:none; } } /* ============================================================ Nav ============================================================ */ .nav { position:sticky; top:0; z-index:50; display:flex; align-items:center; justify-content:space-between; padding:16px var(--gutter); background:rgba(255,255,255,0.88); backdrop-filter:blur(12px); -webkit-backdrop-filter:blur(12px); border-bottom:1px solid var(--border); } .nav__brand { display:flex; align-items:center; gap:10px; background:none; border:none; cursor:pointer; padding:0; color:var(--text); text-decoration:none; } .nav__brand:hover { text-decoration:none; } .nav__brand img { height:28px; } .nav__brand span { font-family:var(--font-display); font-weight:var(--weight-semibold); font-size:1.15rem; letter-spacing:var(--tracking-tight); } .nav__links { display:flex; align-items:center; gap:2px; margin-left:auto; } .nav__link { display:inline-flex; align-items:center; gap:9px; padding:8px 13px; background:none; border:none; cursor:pointer; font-family:var(--font-sans); font-size:var(--text-sm); font-weight:var(--weight-medium); color:var(--text-muted); text-decoration:none; } .nav__link:hover { color:var(--text); text-decoration:none; } .nav__link.is-active { color:var(--text); } .nav__ico { display:none; width:18px; height:18px; flex:none; } /* shown only in the mobile menu */ .nav__actions { display:flex; align-items:center; gap:8px; margin-left:14px; } .nav__book { position:relative; white-space:nowrap; } .nav__book-dot { display:none; } .nav__toggle { display:none; } /* The logo doubles as the menu button on mobile (see the media query below). */ .nav__lead { position:relative; display:flex; align-items:center; gap:8px; } .nav__lead-toggle { display:none; } .nav__caret { display:none; color:var(--text-muted); } .nav__caret-ico { width:16px; height:16px; } /* ============================================================ Hero: editorial copy on the left, the phone drop / crack / scroll-heal animation on the right ============================================================ */ .hero { position:relative; height:200vh; /* scroll room to drive the heal */ } .hero__stage { position:sticky; top:0; height:100vh; display:grid; grid-template-columns:1.05fr 0.95fr; align-items:center; gap:clamp(24px,5vw,64px); max-width:var(--container); margin:0 auto; padding:0 var(--gutter); } .hero__copy { display:flex; flex-direction:column; align-items:flex-start; text-align:left; } /* SEO-kicker H1: the keyword line reads like an eyebrow, the brand line keeps the big hero look. One

so the heading outline stays clean. */ .hero__copy h1 { display:flex; flex-direction:column; gap:18px; margin:0 0 22px; font-size:inherit; font-weight:inherit; letter-spacing:normal; line-height:1.1; font-family:var(--font-sans); } .seo-kicker { font-size:var(--text-xs); font-weight:var(--weight-semibold); letter-spacing:var(--tracking-eyebrow); text-transform:uppercase; color:var(--accent-strong); } .brand-hero { font-family:var(--font-display); font-size:clamp(2.6rem,6vw,4.25rem); font-weight:var(--heading-weight); letter-spacing:var(--tracking-tight); line-height:1.05; max-width:16ch; } .hero__copy h1 .accent { color:var(--accent-strong); } .hero__lede { font-size:clamp(1.05rem,1.6vw,1.25rem); color:var(--text-muted); max-width:52ch; margin:0 0 34px; line-height:var(--leading-relaxed); } .hero__cta { display:flex; gap:12px; flex-wrap:wrap; } .hero__trust { display:flex; flex-wrap:wrap; align-items:center; gap:12px 18px; margin-top:34px; padding:12px 0; } .hero__trust span { font-size:var(--text-sm); color:var(--text-muted); } .hero__trust strong { color:var(--text); } .hero__trust-link { font-size:var(--text-sm); color:var(--text-muted); } .hero__trust-link:hover { color:var(--text); } .hero__trust-link strong { color:var(--text); } /* Quiet reassurance line under the hero CTAs */ .hero__points { display:flex; flex-wrap:wrap; gap:10px 36px; margin:30px 0 0; padding:20px 0 0; list-style:none; border-top:1px solid var(--border); align-self:stretch; } .hero__points li { display:inline-flex; align-items:center; gap:8px; font-size:var(--text-sm); color:var(--text-muted); letter-spacing:0.01em; } .hero__points .icon { display:none; } .hero__points li::before { content:""; width:5px; height:5px; border-radius:50%; background:var(--accent); flex:none; } /* "Scroll to repair" cue: invites the heal interaction */ .scroll-cue { display:flex; flex-direction:column; align-items:center; gap:4px; margin-top:32px; transition:opacity 0.45s ease; -webkit-appearance:none; appearance:none; background:none; border:0; padding:0; font:inherit; cursor:pointer; align-self:flex-start; } .scroll-cue__text { font-weight:var(--weight-semibold); letter-spacing:0.2em; text-transform:uppercase; font-size:var(--text-xs); color:var(--accent-strong); } .scroll-cue__arrow { font-size:1.5rem; line-height:0.5; color:var(--accent-strong); animation:cueBob 1.5s ease-in-out infinite; } .scroll-cue.is-hidden { opacity:0; pointer-events:none; } @keyframes cueBob { 0%,100%{ transform:translateY(0);} 50%{ transform:translateY(7px);} } /* Phone column: drop in, land cracked, heal as you scroll */ .phone-col { display:flex; align-items:center; justify-content:center; } .phone { width:var(--phone-w); aspect-ratio:300/620; position:relative; will-change:transform; } .phone.is-dropping { animation:drop var(--drop-dur) var(--ease-bounce) both; } .phone.is-impact { animation:shake 0.5s ease-out both; } @keyframes drop { 0% { transform:translateY(-130vh) rotate(-8deg); } 70% { transform:translateY(0) rotate(2deg); } 85% { transform:translateY(-3%) rotate(-1deg); } 100% { transform:translateY(0) rotate(0deg); } } @keyframes shake { 0%,100% { transform:translateX(0); } 20% { transform:translateX(-6px) rotate(-1deg); } 40% { transform:translateX(6px) rotate(1deg); } 60% { transform:translateX(-4px); } 80% { transform:translateX(4px); } } .phone__body { position:absolute; inset:0; border-radius:14%/7%; background:linear-gradient(160deg, var(--phone-c1), var(--phone-c2)); padding:3.2%; box-shadow:0 2px 4px rgba(0,0,0,0.25) inset, 0 30px 60px rgba(26,28,32,0.28), 0 0 0 2px rgba(26,28,32,0.06); } .phone__notch { position:absolute; top:3.6%; left:50%; transform:translateX(-50%); width:34%; height:2.6%; background:#050608; border-radius:0 0 12px 12px; z-index:4; } .phone__screen { position:relative; width:100%; height:100%; border-radius:11%/6%; overflow:hidden; background:radial-gradient(120% 80% at 50% 40%, #1b2b4a 0%, #0a1120 70%, #05080f 100%); } /* Repaired brand screen fades in as the phone heals (--heal: 0..1) */ .screen__brand { position:absolute; inset:0; z-index:1; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:8px; background:radial-gradient(120% 90% at 50% 35%, #15171c 0%, #0c0d10 80%); opacity:calc(var(--heal,0)); transition:opacity 0.2s linear; } .screen__brand img { width:42%; filter:drop-shadow(0 6px 22px rgba(245,179,1,0.35)); } .screen__brand .screen__name { font-size:clamp(0.7rem,2.6vh,0.95rem); font-weight:var(--weight-bold); letter-spacing:var(--tracking-tight); color:#f5f6f8; } .screen__glow { position:absolute; inset:0; z-index:2; background:radial-gradient(80% 60% at 50% 45%, rgba(245,179,1,0.16), transparent 70%); opacity:calc(var(--heal,0) * 0.9); transition:opacity 0.2s linear; } .cracks { position:absolute; inset:0; width:100%; height:100%; z-index:3; opacity:calc(1 - var(--heal,0)); filter:drop-shadow(0 0 1px rgba(255,255,255,0.5)); } .cracks path { transition:stroke-dashoffset 0.1s linear; } /* ============================================================ Services ============================================================ */ .grid { display:grid; gap:20px; } .grid--services { grid-template-columns:repeat(auto-fit, minmax(270px,1fr)); } .grid--steps { grid-template-columns:repeat(auto-fit, minmax(220px,1fr)); gap:0 40px; } .grid--reviews { grid-template-columns:repeat(auto-fit, minmax(280px,1fr)); } .service { display:flex; flex-direction:column; gap:var(--space-4); position:relative; } /* Badge shares the tile's top line, flush with the card's content box */ .service__badge { position:absolute; top:var(--space-8); right:var(--space-8); } .tile { width:52px; height:52px; flex:none; display:inline-grid; place-items:center; border:1px solid var(--border-strong); border-radius:var(--radius-md); background:var(--surface); color:var(--text); } .tile .icon { width:26px; height:26px; } .service h3 { margin:0 0 8px; font-size:1.3rem; } .service p { margin:0; color:var(--text-muted); font-size:var(--text-sm); line-height:var(--leading-relaxed); } .service__price { display:flex; align-items:baseline; gap:8px; margin-top:auto; padding-top:6px; } .service__price .note { font-size:var(--text-xs); font-weight:var(--weight-semibold); color:var(--text-faint); text-transform:uppercase; letter-spacing:var(--tracking-caps); } .service__price .amount { font-family:var(--font-display); font-size:1.6rem; font-weight:var(--weight-semibold); color:var(--text); } /* Card footer: price pinned left, the Book-this bubble right, one shared row */ .service__foot { display:flex; align-items:center; justify-content:space-between; gap:12px; margin-top:auto; padding-top:6px; } .service__foot .service__price { margin-top:0; padding-top:0; } /* A card with no price (e.g. the OLED/LCD chooser) still parks the bubble right */ .service__foot > .service__cta:only-child { margin-left:auto; } .service__cta { flex:none; display:inline-flex; align-items:center; gap:6px; padding:9px 18px; min-height:40px; font-family:var(--font-sans); font-weight:var(--weight-semibold); font-size:var(--text-sm); line-height:1.2; color:var(--text); background:var(--surface); border:1px solid var(--border-strong); border-radius:var(--radius-pill); cursor:pointer; transition:border-color var(--dur-fast), background var(--dur-fast), transform var(--dur-fast); } .service__cta::after { content:"\2009\2192"; } .service__cta:hover { border-color:var(--text); } .service__cta:active { transform:scale(0.97); } .service--popular .service__cta { background:var(--accent); border-color:var(--accent); color:var(--accent-ink); } .service--popular .service__cta:hover { background:var(--gold-400); border-color:var(--gold-400); } /* Sell-to-us banner (homepage): copy left, CTA right on wide screens; stacks with a centred button on small ones. */ .sell-cta { display:flex; flex-wrap:wrap; align-items:center; gap:20px; justify-content:space-between; } .sell-cta__copy { flex:1 1 320px; min-width:0; } @media (max-width:720px) { .sell-cta { flex-direction:column; align-items:stretch; } .sell-cta__copy { flex:0 1 auto; } .sell-cta .btn { align-self:center; } } /* ============================================================ How it works: ruled columns, no boxes ============================================================ */ .step { display:flex; flex-direction:column; gap:12px; } .card.step, .grid--steps .step { background:transparent; border:none; border-top:1px solid var(--text); border-radius:0; padding:26px 0 34px; box-shadow:none; } .deposit-note { margin-top:8px; font-size:var(--text-sm); color:var(--text-faint); text-align:center; } .step__top { display:flex; align-items:center; justify-content:space-between; } .step__tile { width:auto; height:auto; display:inline-grid; place-items:center; border-radius:0; background:transparent; color:var(--text); } .step__tile .icon { width:24px; height:24px; } .step__num { font-family:var(--font-display); font-size:1.3rem; font-weight:var(--weight-semibold); color:var(--accent-strong); } .step h3 { margin:0; font-size:1.2rem; } .step p { margin:0; color:var(--text-muted); font-size:var(--text-sm); line-height:var(--leading-relaxed); } .step a { color:var(--text-muted); } /* Homepage "How it works": a compact 2x2 block of roughly square numbered tiles, capped in width so the whole grid reads as ~1:1. (.grid--steps/.step above still style the About and Find-us columns.) */ .grid--hiw { grid-template-columns:repeat(2,1fr); gap:14px; max-width:640px; margin-inline:auto; } .hiw-step { position:relative; display:flex; flex-direction:column; justify-content:center; gap:10px; background:var(--surface); border:1px solid var(--border); border-radius:var(--radius-lg); padding:22px 20px; aspect-ratio:1 / 1; } .hiw-step__top { display:flex; align-items:center; justify-content:space-between; margin-bottom:4px; } .hiw-step__num { width:42px; height:42px; display:grid; place-items:center; border-radius:50%; background:var(--accent-soft); border:1px solid var(--border-accent); color:var(--accent-strong); font-family:var(--font-display); font-size:1.15rem; font-weight:var(--weight-semibold); } .hiw-step__icon { color:var(--text); display:inline-grid; place-items:center; } .hiw-step__icon .icon { width:24px; height:24px; } .hiw-step h3 { margin:0; font-size:1.2rem; } .hiw-step p { margin:0; color:var(--text-muted); font-size:var(--text-sm); line-height:var(--leading-relaxed); } @media (max-width:560px) { .grid--hiw { gap:10px; } .hiw-step { padding:14px 14px 16px; gap:8px; } .hiw-step__num { width:32px; height:32px; font-size:0.95rem; } .hiw-step__icon .icon { width:20px; height:20px; } .hiw-step h3 { font-size:1.02rem; } .hiw-step p { font-size:var(--text-xs); } } /* ============================================================ Reviews ============================================================ */ /* Google reviews carousel: columns of two stacked cards the visitor swipes or arrows through; both edges blur into the section background. #reviewsGrid gets .rv-car (replacing .grid--reviews) once reviews render. */ .rv-car { position:relative; } .rv-car__track { display:flex; gap:16px; overflow-x:auto; scroll-snap-type:x mandatory; scrollbar-width:none; padding:4px 8px; } /* While app.js's marquee is driving the track, snap would fight the per-frame scrollLeft nudges; it comes back the moment the visitor takes over. */ .rv-car__track.is-marquee { scroll-snap-type:none; } .rv-car__track::-webkit-scrollbar { display:none; } .rv-car__col { display:flex; flex-direction:column; gap:16px; flex:none; width:min(290px,78vw); scroll-snap-align:start; } .rv-car__col .review { flex:1; } .rv-car .review p { display:-webkit-box; -webkit-line-clamp:5; -webkit-box-orient:vertical; overflow:hidden; } .rv-car::before, .rv-car::after { content:""; position:absolute; top:0; bottom:0; width:clamp(32px,5vw,70px); z-index:2; pointer-events:none; -webkit-backdrop-filter:blur(3px); backdrop-filter:blur(3px); } .rv-car::before { left:0; background:linear-gradient(to right, var(--surface-sunken) 10%, transparent); -webkit-mask-image:linear-gradient(to right, #000 25%, transparent); mask-image:linear-gradient(to right, #000 25%, transparent); } .rv-car::after { right:0; background:linear-gradient(to left, var(--surface-sunken) 10%, transparent); -webkit-mask-image:linear-gradient(to left, #000 25%, transparent); mask-image:linear-gradient(to left, #000 25%, transparent); } .rv-car__arrow { position:absolute; top:50%; transform:translateY(-50%); z-index:3; width:36px; height:36px; border-radius:50%; display:grid; place-items:center; background:var(--surface); border:1px solid var(--border-accent); color:var(--accent-strong); cursor:pointer; box-shadow:0 2px 10px rgba(26,28,32,0.10); transition:border-color var(--dur-fast) var(--ease-out), transform var(--dur-fast) var(--ease-out); } .rv-car__arrow:hover { border-color:var(--accent-strong); } .rv-car__arrow:active { transform:translateY(-50%) scale(0.94); } .rv-car__arrow--prev { left:2px; } .rv-car__arrow--next { right:2px; } /* app.js hides the arrows when the track has nothing to scroll; without this override the display:grid above would beat the UA's [hidden] rule and the dead arrows would float over the review cards. */ .rv-car__arrow[hidden] { display:none; } /* Mobile: the desktop's two-high columns flatten into one row of small, short, wide cards: each swipe shows a single compact card (3-line snippet) that spans most of the screen, instead of a tall stack of two. display:contents lifts the cards out of their columns so no markup change is needed (the same HTML comes from app.js and the functions/index.js SSR). */ @media (max-width:640px) { .rv-car__col { display:contents; } .rv-car__track { gap:12px; scroll-padding-left:16px; } .rv-car .review { flex:none; width:min(82vw, 360px); scroll-snap-align:center; padding:14px 16px 12px; gap:8px; } .rv-car .review p { font-size:var(--text-sm); line-height:var(--leading-normal); -webkit-line-clamp:3; } .rv-car .review__who { gap:9px; } .rv-car .review__avatar { width:28px; height:28px; font-size:var(--text-xs); } /* touch screens swipe; the overlaid arrows just cover card text at this size */ .rv-car__arrow { display:none; } } .review { display:flex; flex-direction:column; gap:16px; } .review p { margin:0; font-size:var(--text-base); line-height:var(--leading-relaxed); color:var(--text-muted); } .review__who { margin-top:auto; display:flex; align-items:center; gap:12px; } .review__avatar { width:38px; height:38px; border-radius:50%; background:var(--surface-raised); color:var(--text); display:grid; place-items:center; font-weight:var(--weight-semibold); font-size:var(--text-sm); } .review__name { font-weight:var(--weight-semibold); font-size:var(--text-sm); } .review__suburb { color:var(--text-faint); font-size:var(--text-xs); } /* ---------------- Reviews: aggregate + write-a-review ---------------- */ .reviews__aggregate { display:inline-flex; align-items:center; gap:10px; margin:16px auto 0; } .reviews__aggregate[hidden] { display:none; } .reviews__aggregate-text { color:var(--text-muted); font-size:var(--text-sm); } .reviews__aggregate-text strong { color:var(--text); } .reviews__cta { margin:20px auto 0; } .reviews__ctas { display:flex; flex-wrap:wrap; gap:10px; justify-content:center; margin:20px auto 0; } .reviews__google { display:inline-flex; align-items:center; justify-content:center; gap:8px; } .gicon { display:inline-flex; background:#fff; border-radius:50%; padding:3px; line-height:0; border:1px solid var(--border); } .gicon svg { display:block; } .hero__trust-link { display:inline-flex; align-items:center; gap:8px; } /* Interactive star picker in the review form */ .rating-input { display:inline-flex; gap:4px; } .rating-input button { background:none; border:none; padding:2px; cursor:pointer; line-height:0; color:var(--star-empty); transition:color var(--dur-fast), transform var(--dur-fast); } .rating-input button svg { width:30px; height:30px; display:block; } .rating-input button.is-on { color:var(--accent); } .rating-input button:hover { transform:scale(1.08); } .rating-input:focus-within button:focus-visible { outline:2px solid var(--text); outline-offset:2px; border-radius:6px; } textarea.input { resize:vertical; min-height:96px; line-height:var(--leading-normal); } /* Honeypot: kept in the layout but invisible/untabbable for humans */ .hp { position:absolute; left:-9999px; width:1px; height:1px; overflow:hidden; } /* ============================================================ FAQ: hairline list, no boxes ============================================================ */ .faq { display:flex; flex-direction:column; gap:0; width:100%; border-top:1px solid var(--border-strong); } .faq__item { background:transparent; border:none; border-bottom:1px solid var(--border-strong); border-radius:0; overflow:hidden; box-shadow:none; } .faq__q { list-style:none; cursor:pointer; display:flex; align-items:center; justify-content:space-between; gap:12px; padding:20px 2px; font-family:var(--font-display); font-size:var(--text-md); font-weight:var(--weight-semibold); color:var(--text); } .faq__q::-webkit-details-marker { display:none; } .faq__icon { color:var(--text-faint); font-size:20px; font-family:var(--font-sans); font-weight:300; line-height:1; transition:transform var(--dur-base) var(--ease-out); } .faq__item[open] .faq__icon { transform:rotate(45deg); } .faq__a { display:grid; grid-template-rows:1fr; } .faq__a > div { overflow:hidden; } .faq__a p { margin:0; padding:0 2px 22px; color:var(--text-muted); font-size:var(--text-sm); line-height:var(--leading-relaxed); max-width:64ch; } /* ============================================================ CTA band: deep ink, the one moment of contrast ============================================================ */ .cta-band { padding:clamp(24px,4vw,48px) var(--gutter) clamp(48px,7vw,88px); } .cta-band__inner { max-width:var(--container); margin:0 auto; text-align:center; background:var(--band-bg, #1a1c20); color:#fff; border:none; border-radius:var(--radius-xl); box-shadow:none; padding:clamp(44px,6vw,80px) clamp(24px,5vw,64px); } .cta-band__inner h2 { font-size:clamp(1.9rem,4vw,2.6rem); margin:0 0 14px; color:#fff; } .cta-band__inner p { color:rgba(255,255,255,0.65); font-size:var(--text-md); margin:0 0 32px; } .cta-band__cta { display:flex; gap:12px; justify-content:center; flex-wrap:wrap; } .cta-band__inner .btn--primary { background:var(--accent); color:var(--accent-ink); border-color:var(--accent); } .cta-band__inner .btn--primary:hover:not(:disabled) { background:var(--gold-400); border-color:var(--gold-400); } .cta-band__inner .btn--secondary { background:transparent; color:#fff; border-color:rgba(255,255,255,0.35); } .cta-band__inner .btn--secondary:hover:not(:disabled) { border-color:#fff; } /* ============================================================ Footer ============================================================ */ .footer { border-top:1px solid var(--border); padding:56px var(--gutter) 44px; background:var(--surface-sunken); } .footer__top { max-width:var(--container); margin:0 auto; display:flex; flex-wrap:wrap; gap:32px 64px; justify-content:space-between; } .footer__brand { max-width:320px; } .footer__brand-row { display:flex; align-items:center; gap:10px; margin-bottom:14px; } .footer__brand-row img { height:26px; } .footer__brand-row span { font-family:var(--font-display); font-weight:var(--weight-semibold); font-size:1.1rem; } .footer__brand p { color:var(--text-muted); font-size:var(--text-sm); margin:0; } /* Footer trust row + last-chance CTA: anyone who has scrolled this far is engaged, so the footer gets the proof and one clear next step. */ .footer__trust { list-style:none; display:flex; flex-wrap:wrap; gap:8px; margin:16px 0 0; padding:0; } .footer__trust li { display:inline-flex; align-items:center; gap:6px; padding:5px 11px; border:1px solid var(--border-strong); border-radius:var(--radius-pill); background:var(--surface); color:var(--text-muted); font-size:var(--text-xs); font-weight:var(--weight-semibold); } .footer__cta { margin-top:18px; } .footer__cols { display:flex; gap:56px; flex-wrap:wrap; } .footer__col-h { font-size:var(--text-xs); text-transform:uppercase; letter-spacing:var(--tracking-caps); color:var(--text-faint); margin-bottom:14px; font-weight:var(--weight-semibold); } .footer__list { display:flex; flex-direction:column; gap:9px; font-size:var(--text-sm); color:var(--text-muted); } .footer__list a { color:var(--text-muted); text-decoration:none; } .footer__list a:hover { color:var(--text); text-decoration:underline; } .footer__payments { max-width:var(--container); margin:36px auto 0; display:flex; flex-wrap:wrap; align-items:center; gap:10px; } .footer__payments-label { font-size:var(--text-xs); text-transform:uppercase; letter-spacing:var(--tracking-caps); color:var(--text-faint); font-weight:var(--weight-semibold); margin-right:4px; } .footer__payments img { height:28px; width:auto; display:block; } .footer__bottom { max-width:var(--container); margin:22px auto 0; padding-top:22px; border-top:1px solid var(--border); color:var(--text-faint); font-size:var(--text-xs); } .footer__bottom a { color:var(--text-faint); } @media (max-width:600px) { .footer { padding:40px var(--gutter) 32px; } .footer__top { gap:28px; } .footer__brand { max-width:none; } .footer__cols { display:grid; grid-template-columns:1fr 1fr; gap:24px 24px; width:100%; } } /* ============================================================ Booking modal ============================================================ */ .modal { position:fixed; inset:0; z-index:100; display:none; place-items:center; padding:20px; background:rgba(26,28,32,0.4); backdrop-filter:blur(6px); -webkit-backdrop-filter:blur(6px); } .modal.is-open { display:grid; } .modal__panel { width:min(520px,100%); max-height:90vh; max-height:90dvh; overflow:auto; overscroll-behavior:contain; background:var(--surface); border:1px solid var(--border); border-radius:var(--radius-xl); box-shadow:var(--shadow-lg); --panel-pad:clamp(24px,4vw,36px); padding:var(--panel-pad); } .modal__head { display:flex; align-items:center; justify-content:space-between; margin-bottom:22px; } .modal__title { display:flex; align-items:center; gap:10px; } .modal__title img { height:26px; } .modal__title strong { font-family:var(--font-display); font-weight:var(--weight-semibold); font-size:var(--text-md); } .modal__headbtns { display:flex; align-items:center; gap:6px; } .modal__close, .modal__back { background:none; border:none; cursor:pointer; color:var(--text-faint); display:flex; padding:6px; border-radius:var(--radius-sm); transition:color var(--dur-fast), background var(--dur-fast); } .modal__close:hover, .modal__back:hover { color:var(--text); background:var(--surface-sunken); } .modal__back[hidden] { display:none; } .modal__progress { display:flex; gap:8px; margin-bottom:26px; } .modal__progress span { flex:1; height:3px; border-radius:2px; background:var(--border); } .modal__progress span.is-on { background:var(--text); } .modal__step { display:flex; flex-direction:column; gap:18px; } .modal__step[hidden] { display:none; } .modal__desc { margin:-6px 0 0; color:var(--text-muted); font-size:var(--text-sm); line-height:var(--leading-normal); } /* Step header (label + which brand we're on) */ .bk-stephead { display:flex; align-items:baseline; justify-content:space-between; gap:10px; } .bk-stephead__brand { font-size:var(--text-sm); font-weight:var(--weight-semibold); color:var(--accent-strong); } /* Brand / issue tile grid: 2-up on the smallest phones, 3-up once there's room */ .bk-tilegrid { display:grid; grid-template-columns:repeat(2, 1fr); gap:10px; } @media (min-width:420px) { .bk-tilegrid { grid-template-columns:repeat(3, 1fr); } } .bk-tile { display:flex; flex-direction:column; align-items:center; gap:8px; padding:14px 8px; text-align:center; cursor:pointer; background:var(--surface); border:1px solid var(--border-strong); border-radius:var(--radius-md); color:var(--text); font-family:var(--font-sans); transition:border-color var(--dur-fast), background var(--dur-fast), transform var(--dur-fast); } .bk-tile:hover { border-color:var(--text); } .bk-tile:active { transform:scale(0.98); } .bk-tile.is-selected { border-color:var(--text); background:var(--surface-sunken); } .bk-tile__ico { width:42px; height:42px; display:grid; place-items:center; border-radius:var(--radius-sm); background:var(--surface-raised); color:var(--text); } .bk-tile__ico .icon { width:22px; height:22px; } .bk-tile.is-selected .bk-tile__ico { background:var(--text); color:var(--bg); } .bk-tile__name { font-weight:var(--weight-semibold); font-size:var(--text-sm); line-height:1.2; } .bk-tile__sub { font-size:var(--text-xs); color:var(--text-faint); line-height:1.2; } .bk-tile__from { font-size:var(--text-xs); font-weight:var(--weight-semibold); color:var(--accent-strong); } /* Multi-select tick on issue tiles: appears when the tile is selected */ .bk-tile { position:relative; } .bk-tile__tick { position:absolute; top:8px; right:8px; width:20px; height:20px; display:none; place-items:center; border-radius:var(--radius-pill); background:var(--text); color:var(--bg); } .bk-tile__tick .icon { width:13px; height:13px; stroke-width:3; } .bk-tile.is-selected .bk-tile__tick { display:grid; } /* Estimated price for the chosen model */ .bk-estimate { display:flex; align-items:center; justify-content:space-between; gap:12px; padding:14px 16px; border-radius:var(--radius-md); border:1px solid var(--border-strong); background:var(--surface-sunken); } .bk-estimate[hidden] { display:none; } .bk-estimate__label { font-size:var(--text-sm); font-weight:var(--weight-medium); color:var(--text-muted); } .bk-estimate__amount { font-family:var(--font-display); font-size:var(--text-xl); font-weight:var(--weight-semibold); color:var(--text); letter-spacing:var(--tracking-tight); } /* Parts-deposit notice (non-iPhone) */ .bk-deposit { margin:0; padding:10px 12px; border-radius:var(--radius-md); line-height:1.45; background:var(--accent-soft); border:1px solid rgba(217,158,0,0.3); color:var(--accent-strong); font-size:var(--text-sm); font-weight:var(--weight-medium); } .bk-deposit[hidden] { display:none; } /* Service option rows (drop off / come to me / mail-in) */ .bk-modes { display:flex; flex-direction:column; gap:10px; } .bk-mode { display:flex; align-items:center; gap:14px; padding:14px 16px; cursor:pointer; text-align:left; width:100%; background:var(--surface); border:1px solid var(--border-strong); border-radius:var(--radius-md); color:var(--text); font-family:var(--font-sans); transition:border-color var(--dur-fast), background var(--dur-fast), transform var(--dur-fast); } .bk-mode:hover { border-color:var(--text); } .bk-mode:active { transform:scale(0.99); } .bk-mode.is-selected { border-color:var(--text); background:var(--surface-sunken); } .bk-mode__ico { width:42px; height:42px; flex:none; display:grid; place-items:center; border-radius:var(--radius-sm); background:var(--surface-raised); color:var(--text); } .bk-mode__ico .icon { width:22px; height:22px; } .bk-mode.is-selected .bk-mode__ico { background:var(--text); color:var(--bg); } .bk-mode__body { flex:1; display:flex; flex-direction:column; gap:2px; min-width:0; } .bk-mode__title { font-weight:var(--weight-semibold); font-size:var(--text-base); } .bk-mode__sub { font-size:var(--text-xs); color:var(--text-faint); } .bk-mode__fee { flex:none; font-family:var(--font-display); font-weight:var(--weight-semibold); font-size:var(--text-md); color:var(--text); } .bk-mode__fee--free { font-family:var(--font-sans); color:var(--success); font-size:var(--text-sm); font-weight:var(--weight-semibold); } /* Screen tile split into stacked OLED (top) / LCD (bottom) halves once "Screen" is picked on a model offering both display types */ .bk-tile--split { padding:10px 8px; gap:6px; cursor:default; } .bk-tile--split:active { transform:none; } .bk-split__label { display:inline-flex; align-items:center; gap:5px; font-size:var(--text-xs); font-weight:var(--weight-semibold); color:var(--text-muted); line-height:1; } .bk-split__label .icon { width:14px; height:14px; } .bk-split__half { width:100%; flex:1; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:2px; padding:8px 4px; cursor:pointer; background:var(--surface); border:1.5px solid var(--border-strong); border-radius:var(--radius-sm); color:var(--text); font-family:var(--font-sans); transition:border-color var(--dur-fast), background var(--dur-fast), transform var(--dur-fast); } .bk-split__half:hover { border-color:var(--text); } .bk-split__half:active { transform:scale(0.97); } .bk-split__half.is-on { border-color:var(--text); background:var(--surface-sunken); } .bk-split__name { font-weight:var(--weight-semibold); font-size:var(--text-sm); line-height:1.1; } .bk-split__from { font-size:var(--text-xs); font-weight:var(--weight-semibold); color:var(--accent-strong); line-height:1.1; } /* "What's the difference?" link under the issue grid: pops the OLED vs LCD explainer out below it */ .bk-sdiff { display:flex; flex-direction:column; gap:10px; margin-top:-4px; } .bk-sdiff[hidden] { display:none; } .bk-sdiff__link { display:inline-flex; align-items:center; gap:6px; align-self:flex-start; background:none; border:none; padding:0; cursor:pointer; font-family:var(--font-sans); font-size:var(--text-sm); font-weight:var(--weight-semibold); color:var(--accent-strong); text-decoration:underline; text-underline-offset:3px; text-decoration-color:transparent; transition:text-decoration-color var(--dur-fast); } .bk-sdiff__link:hover { text-decoration-color:currentColor; } .bk-sdiff__link .icon { width:15px; height:15px; } .bk-sdiff__panel { padding:12px 14px; border:1px dashed var(--border-strong); border-radius:var(--radius-md); background:var(--surface-sunken); } .bk-sdiff__panel[hidden] { display:none; } .bk-sdiff__panel p { margin:0 0 8px; font-size:var(--text-xs); color:var(--text-muted); line-height:var(--leading-normal); } .bk-sdiff__panel a { font-size:var(--text-xs); font-weight:var(--weight-semibold); } /* Booking calendar (day & time step): a compact two-line week strip ("This week" / "Next week") with prev/next week arrows on either side, then the time-slot chips below */ .bk-cal { display:flex; flex-direction:column; gap:12px; } .bk-cal__strip { display:grid; grid-template-columns:auto minmax(0,1fr) auto; gap:6px; align-items:center; } .bk-cal__nav { width:28px; height:72px; display:grid; place-items:center; cursor:pointer; font-size:var(--text-lg); line-height:1; background:var(--surface); border:1px solid var(--border-strong); border-radius:var(--radius-sm); color:var(--text); transition:border-color var(--dur-fast), background var(--dur-fast); } .bk-cal__nav:hover:not(:disabled) { border-color:var(--text); } .bk-cal__nav:disabled { opacity:0.35; cursor:default; } .bk-cal__weeks { display:flex; flex-direction:column; gap:4px; min-width:0; } .bk-cal__dowrow, .bk-cal__weekrow { display:grid; grid-template-columns:repeat(7, 1fr); gap:4px; } .bk-cal__dow { text-align:center; font-size:var(--text-xs); font-weight:var(--weight-semibold); color:var(--text-faint); padding:2px 0; } .bk-cal__weeklabel { margin-top:4px; font-size:var(--text-xs); font-weight:var(--weight-semibold); color:var(--text-muted); line-height:1.2; } .bk-cal__range { font-weight:var(--weight-regular); color:var(--text-faint); } .bk-cal__day { min-height:38px; display:grid; place-items:center; cursor:pointer; background:var(--surface); border:1px solid var(--border); border-radius:var(--radius-sm); color:var(--text); font-family:var(--font-sans); font-size:var(--text-sm); font-weight:var(--weight-medium); transition:border-color var(--dur-fast), background var(--dur-fast), transform var(--dur-fast); } .bk-cal__day:hover:not(:disabled) { border-color:var(--text); } .bk-cal__day:active:not(:disabled) { transform:scale(0.95); } .bk-cal__day:disabled { color:var(--text-faint); opacity:0.35; cursor:default; background:transparent; border-color:transparent; } .bk-cal__day.is-closed:disabled { text-decoration:line-through; } .bk-cal__day.is-selected { border-color:var(--text); background:var(--text); color:var(--bg); } .bk-cal__slots-head { font-size:var(--text-sm); color:var(--text-muted); } .bk-cal__slots-head strong { color:var(--text); } .bk-cal__slots { display:grid; grid-template-columns:repeat(3, 1fr); gap:8px; } @media (min-width:420px) { .bk-cal__slots { grid-template-columns:repeat(4, 1fr); } } .bk-cal__slot { min-height:44px; display:grid; place-items:center; cursor:pointer; padding:0 6px; background:var(--surface); border:1px solid var(--border-strong); border-radius:var(--radius-pill); color:var(--text); font-family:var(--font-sans); font-size:var(--text-sm); font-weight:var(--weight-medium); transition:border-color var(--dur-fast), background var(--dur-fast), transform var(--dur-fast); } .bk-cal__slot:hover:not(:disabled) { border-color:var(--text); } .bk-cal__slot:active:not(:disabled) { transform:scale(0.96); } .bk-cal__slot.is-selected { border-color:var(--text); background:var(--text); color:var(--bg); } .bk-cal__slot.is-taken { opacity:0.35; cursor:default; text-decoration:line-through; } .bk-cal__note { margin:0; font-size:var(--text-sm); color:var(--text-muted); line-height:var(--leading-normal); } .bk-cal__skip { align-self:center; background:none; border:none; cursor:pointer; padding:6px 4px; font-family:var(--font-sans); font-size:var(--text-sm); font-weight:var(--weight-medium); color:var(--text-muted); text-decoration:underline; text-underline-offset:3px; } .bk-cal__skip:hover { color:var(--text); } /* First / last name row */ .bk-names { display:grid; grid-template-columns:1fr 1fr; gap:10px; } /* Mail-in instructions */ .bk-mailnote { margin:0; padding:12px 14px; border-radius:var(--radius-md); background:var(--surface-sunken); border:1px solid var(--border); color:var(--text-muted); font-size:var(--text-sm); line-height:var(--leading-normal); } .bk-mailnote[hidden] { display:none; } .note-muted { color:var(--text-faint); font-weight:var(--weight-regular); } .summary { background:var(--surface-sunken); border:1px solid var(--border); border-radius:var(--radius-md); padding:14px 16px; font-size:var(--text-sm); color:var(--text-muted); display:flex; flex-direction:column; gap:6px; } .summary__row { display:flex; justify-content:space-between; } .summary__row span:last-child { color:var(--text); } .row { display:flex; gap:10px; } /* Keep each step's Back / Continue row (and its error message, so validation feedback is never off-screen) in view: the block sticks to the bottom of the scrolling panel, fading the step's content out underneath it. The negative margins let its backdrop span the panel's padding; the negative top margin cancels the extra padding so the resting spacing stays 18px. */ .modal__stick { position:sticky; bottom:0; z-index:2; display:flex; flex-direction:column; gap:12px; /* Side margins bleed the backdrop across the panel's padding; the top pair tucks the fade into the step gap. No bottom offsets: a sticky box can't leave its parent's content box, so a negative bottom margin would just shove the whole block up over the content above it. */ margin:-14px calc(var(--panel-pad) * -1) 0; padding:14px var(--panel-pad) 8px; background:linear-gradient(to bottom, transparent, var(--surface) 14px); } .modal__error { color:var(--danger); font-size:var(--text-sm); margin:0; } .modal__error-call { display:inline-flex; align-items:center; gap:6px; margin-top:10px; padding:9px 16px; border-radius:var(--radius-pill); background:var(--surface-raised); color:var(--text); border:1px solid var(--border-strong); font-weight:var(--weight-semibold); text-decoration:none; } .modal__error-call .icon { width:1em; height:1em; } .modal__error-call:hover { border-color:var(--text); } .confirm { display:flex; flex-direction:column; align-items:center; text-align:center; gap:16px; padding:10px 0; } .confirm__check { width:64px; height:64px; border-radius:50%; background:rgba(30,158,80,0.1); color:var(--success); display:grid; place-items:center; } .confirm__check .icon { width:32px; height:32px; } .confirm h3 { margin:0; font-size:var(--text-xl); } .confirm p { margin:0; color:var(--text-muted); } .confirm__ticket { font-family:var(--font-mono); color:var(--accent-strong); font-size:var(--text-md); letter-spacing:0.04em; } .confirm__ship { width:100%; max-width:360px; background:var(--surface-sunken); border:1px solid var(--border); border-radius:var(--radius-md); padding:16px 18px; } .confirm__ship[hidden] { display:none; } .confirm__ship-row { display:flex; justify-content:space-between; gap:12px; font-size:var(--text-sm); color:var(--text-muted); padding:4px 0; } .confirm__ship-row strong { color:var(--text); text-align:right; } .confirm__ship-note { margin:8px 0 0; font-size:var(--text-xs); color:var(--text-faint); text-align:center; } /* ============================================================ Responsive ============================================================ */ @media (max-width:880px) { .hero { height:auto; } .hero__stage { position:static; height:auto; grid-template-columns:1fr; padding-top:36px; padding-bottom:16px; } .hero__copy { align-items:center; text-align:center; order:2; } .hero__cta { justify-content:center; } .hero__trust { justify-content:center; } .hero__points { justify-content:center; } .phone-col { order:1; margin-bottom:6px; } .scroll-cue { order:-1; align-self:center; margin:0 0 16px; } /* The whole header bar opens the menu, not just the logo text: statically positioning .nav__lead makes the sticky .nav the toggle's containing block, so inset:0 stretches it across the full bar. The Book button sits above it (.nav__actions z-index) and stays independently tappable. */ .nav__lead { position:static; } .nav__lead-toggle { display:block; position:absolute; inset:0; cursor:pointer; } .nav__actions { position:relative; z-index:1; } .nav__caret { display:inline-flex; } .nav__links { position:absolute; top:100%; left:0; right:0; z-index:50; margin:0; flex-direction:column; align-items:stretch; gap:2px; background:var(--surface); border-bottom:1px solid var(--border-strong); padding:8px 10px 12px; box-shadow:var(--shadow-md); display:none; } .nav__toggle:checked ~ .nav__links { display:flex; } .nav__links .nav__link { padding:12px; border-radius:var(--radius-sm); } .nav__ico { display:inline-flex; } .nav__book { padding:8px 16px; font-size:var(--text-xs); } .grid--steps { gap:0; } .card.step, .grid--steps .step { padding:22px 0 26px; } } @media (max-width:420px) { /* Stack the Back / primary button row (primary on top) so neither cramps */ .row { flex-direction:column-reverse; } } @media (max-width:380px) { .bk-tilegrid { grid-template-columns:repeat(2, 1fr); } .bk-names { grid-template-columns:1fr; } } /* ---------------- Device detection ---------------- */ /* "We know your phone": pill under the Services heading + booking hints. All are hidden until detection succeeds; the site looks normal without them. */ .device-note { display:inline-flex; align-items:center; gap:9px; margin:20px auto 0; padding:7px 16px 7px 14px; border-radius:var(--radius-pill); background:var(--surface-raised); border:1px solid transparent; color:var(--text-muted); font-size:var(--text-sm); font-weight:var(--weight-medium); } .device-note::before { content:""; width:6px; height:6px; border-radius:50%; flex:none; background:var(--accent); } .device-note[hidden] { display:none; } .field__hint { font-size:var(--text-sm); color:var(--accent-strong); font-weight:var(--weight-medium); } .field__hint[hidden] { display:none; } .summary__row[hidden] { display:none; } /* ---------------- Reduced motion ---------------- */ @media (prefers-reduced-motion: reduce) { html { scroll-behavior:auto; } .btn, .bk-tile, .bk-mode, .bk-cal__day, .bk-cal__slot { transition:none; } .phone.is-dropping, .phone.is-impact { animation:none; } .scroll-cue__arrow { animation:none; } } /* ============================================================ Shop: listing grid, product page, option selectors, cart ============================================================ */ .shop-page { padding:calc(var(--nav-h, 68px) + 32px) var(--gutter) 80px; } .shop-head { text-align:center; margin-bottom:40px; } .shop-head h1 { font-size:clamp(2rem,4vw,2.8rem); margin:12px 0 0; } .shop-head p { color:var(--text-muted); font-size:var(--text-md); margin:14px auto 0; max-width:54ch; } /* Listing grid */ .shop-filters { display:flex; flex-wrap:wrap; justify-content:center; gap:8px; margin:0 0 32px; } .shop-filters[hidden] { display:none; } .shop-filter { padding:8px 18px; border-radius:var(--radius-pill); cursor:pointer; background:var(--surface); color:var(--text-muted); border:1px solid var(--border-strong); font-family:var(--font-sans); font-size:var(--text-sm); font-weight:var(--weight-medium); transition:color var(--dur-fast), border-color var(--dur-fast), background var(--dur-fast); } .shop-filter:hover { color:var(--text); border-color:var(--text); } .shop-filter.is-active { background:var(--text); color:var(--bg); border-color:var(--text); } .shop-grid { display:grid; grid-template-columns:repeat(auto-fill, minmax(240px,1fr)); gap:20px; } .pcard { display:flex; flex-direction:column; text-decoration:none; color:inherit; background:var(--surface); border:1px solid var(--border); border-radius:var(--radius-lg); overflow:hidden; box-shadow:none; transition:transform var(--dur-base), border-color var(--dur-base); } .pcard:hover { transform:translateY(-3px); border-color:var(--border-strong); text-decoration:none; } /* Portrait tile to match how device photos are shot; contain (not cover) so the phone is never cropped out of its own photo. */ .pcard__media { aspect-ratio:4/5; background:var(--surface-sunken); display:grid; place-items:center; overflow:hidden; } .pcard__media img { width:100%; height:100%; object-fit:contain; } .pcard__media--empty { color:var(--text-faint); font-size:var(--text-sm); } .pcard__body { padding:18px 20px 20px; display:flex; flex-direction:column; gap:4px; } .pcard__brand { font-size:var(--text-xs); text-transform:uppercase; letter-spacing:var(--tracking-caps); color:var(--text-faint); } .pcard__name { font-family:var(--font-display); font-weight:var(--weight-semibold); font-size:var(--text-md); } .pcard__price { margin-top:6px; color:var(--text); font-weight:var(--weight-semibold); } .pcard__price small { color:var(--text-faint); font-weight:var(--weight-medium); font-size:var(--text-xs); } .pcard__soldout { color:var(--text-faint); font-weight:var(--weight-semibold); font-size:var(--text-sm); } .pcard__ship { margin-top:4px; align-self:flex-start; font-size:var(--text-xs); font-weight:var(--weight-medium); color:var(--accent-strong); background:var(--accent-soft); padding:2px 9px; border-radius:999px; } /* Product detail (PDP) */ .pdp { display:grid; grid-template-columns:minmax(0,1.1fr) minmax(0,1fr); gap:44px; align-items:start; } .pdp__breadcrumb { margin-bottom:20px; font-size:var(--text-sm); color:var(--text-faint); } .pdp__breadcrumb a { color:var(--text-muted); text-decoration:none; } .pdp__breadcrumb a:hover { text-decoration:underline; } /* Gallery: portrait frame, whole photo always visible (no crop), capped so the frame itself never grows past the screen */ .gallery__main { aspect-ratio:4/5; max-height:min(66vh, 620px); background:var(--surface-sunken); border:1px solid var(--border); border-radius:var(--radius-lg); overflow:hidden; display:grid; place-items:center; } .gallery__main img { width:100%; height:100%; object-fit:contain; } .gallery__thumbs { display:flex; gap:10px; margin-top:12px; flex-wrap:wrap; } .gallery__thumb { width:64px; height:64px; border-radius:var(--radius-sm); overflow:hidden; cursor:pointer; border:2px solid transparent; background:var(--surface-sunken); padding:0; } .gallery__thumb img { width:100%; height:100%; object-fit:cover; } .gallery__thumb.is-active { border-color:var(--text); } /* Info column */ .pdp__brand { font-size:var(--text-sm); text-transform:uppercase; letter-spacing:var(--tracking-caps); color:var(--text-faint); } .pdp__title { font-size:var(--text-2xl); margin:6px 0 10px; } .pdp__price { font-family:var(--font-display); font-size:var(--text-xl); font-weight:var(--weight-semibold); color:var(--text); } .pdp__desc { color:var(--text-muted); line-height:var(--leading-relaxed); margin:16px 0; } /* Option selectors */ .opt-group { margin:18px 0; } .opt-group__label { display:flex; justify-content:space-between; font-size:var(--text-sm); font-weight:var(--weight-semibold); margin-bottom:10px; } .opt-group__value { color:var(--text-muted); font-weight:var(--weight-medium); } .opt-btns { display:flex; flex-wrap:wrap; gap:10px; } .opt-btn { padding:10px 16px; border-radius:var(--radius-sm); cursor:pointer; background:var(--surface); color:var(--text); border:1.5px solid var(--border-strong); font-size:var(--text-sm); font-weight:var(--weight-medium); transition:border-color var(--dur-fast), background var(--dur-fast), opacity var(--dur-fast); } .opt-btn:hover { border-color:var(--text); } .opt-btn.is-selected { border-color:var(--text); background:var(--surface-raised); color:var(--text); } .opt-btn.is-disabled { opacity:0.35; cursor:not-allowed; text-decoration:line-through; } .opt-btn.is-disabled:hover { border-color:var(--border-strong); } /* Colour swatches */ .swatch { display:inline-flex; align-items:center; gap:9px; } .swatch__dot { width:20px; height:20px; border-radius:50%; border:1px solid rgba(26,28,32,0.18); flex:none; } .opt-btn--swatch { padding:8px 14px 8px 10px; } .pdp__stock { font-size:var(--text-sm); font-weight:var(--weight-semibold); margin:6px 0 18px; } .pdp__stock--in { color:var(--success); } .pdp__stock--low { color:var(--accent-strong); } .pdp__stock--out { color:var(--text-faint); } .pdp__actions { display:flex; gap:12px; align-items:center; } .qty { display:inline-flex; align-items:center; border:1.5px solid var(--border-strong); border-radius:var(--radius-pill); overflow:hidden; } .qty button { width:40px; height:44px; background:var(--surface); color:var(--text); border:none; cursor:pointer; font-size:var(--text-md); } .qty button:disabled { opacity:0.4; cursor:not-allowed; } .qty span { min-width:40px; text-align:center; font-weight:var(--weight-semibold); } .pdp__note { margin-top:18px; font-size:var(--text-sm); color:var(--text-faint); display:flex; gap:8px; align-items:flex-start; } /* Cart badge in nav */ .cart-link { position:relative; display:inline-flex; align-items:center; } .cart-badge { position:absolute; top:-6px; right:-8px; min-width:18px; height:18px; padding:0 5px; border-radius:var(--radius-pill); background:var(--text); color:var(--bg); font-size:11px; font-weight:var(--weight-semibold); display:grid; place-items:center; } .cart-badge[hidden] { display:none; } /* Cart drawer: overflow:hidden so the off-canvas panel (translated 100% right when closed) can never widen the page or leak a horizontal pan on iOS */ .cart-drawer { position:fixed; inset:0; z-index:60; visibility:hidden; overflow:hidden; overflow:clip; } .cart-drawer.is-open { visibility:visible; } .cart-drawer__backdrop { position:absolute; inset:0; background:rgba(26,28,32,0.4); opacity:0; transition:opacity var(--dur-base); } .cart-drawer.is-open .cart-drawer__backdrop { opacity:1; } .cart-drawer__panel { position:absolute; top:0; right:0; height:100%; width:min(420px,92vw); background:var(--surface); border-left:1px solid var(--border); transform:translateX(100%); transition:transform var(--dur-base); display:flex; flex-direction:column; } .cart-drawer.is-open .cart-drawer__panel { transform:translateX(0); } .cart-drawer__head { display:flex; align-items:center; justify-content:space-between; padding:20px; border-bottom:1px solid var(--border); } .cart-drawer__head h3 { margin:0; font-size:var(--text-lg); } .cart-drawer__items { flex:1; overflow-y:auto; overscroll-behavior:contain; padding:12px 20px; display:flex; flex-direction:column; gap:14px; } .cart-drawer__empty { color:var(--text-faint); text-align:center; padding:40px 0; } .cart-item { display:flex; gap:12px; } .cart-item__media { width:64px; height:64px; border-radius:var(--radius-sm); background:var(--surface-sunken); overflow:hidden; flex:none; } .cart-item__media img { width:100%; height:100%; object-fit:cover; } .cart-item__body { flex:1; min-width:0; } .cart-item__name { font-weight:var(--weight-semibold); font-size:var(--text-sm); } .cart-item__opts { color:var(--text-faint); font-size:var(--text-xs); margin-top:2px; } .cart-item__row { display:flex; justify-content:space-between; align-items:center; margin-top:6px; } .cart-item__price { color:var(--text); font-weight:var(--weight-semibold); font-size:var(--text-sm); } .cart-item__remove { background:none; border:none; color:var(--text-faint); cursor:pointer; font-size:var(--text-xs); } .cart-drawer__foot { padding:20px; border-top:1px solid var(--border); } .cart-drawer__total { display:flex; justify-content:space-between; font-weight:var(--weight-semibold); font-size:var(--text-md); margin-bottom:14px; } .cart-summary { display:flex; flex-direction:column; gap:7px; margin-bottom:14px; } .cart-summary__row { display:flex; justify-content:space-between; font-size:var(--text-sm); color:var(--text-muted); } .cart-summary__row--total { margin-top:5px; padding-top:9px; border-top:1px solid var(--border); font-weight:var(--weight-semibold); font-size:var(--text-md); color:var(--text); } .cart-summary__hint { margin-top:4px; text-align:center; font-size:var(--text-xs); font-weight:var(--weight-medium); color:var(--accent-strong); } @media (max-width:760px) { /* minmax(0,…) so the gallery's aspect-ratio can't transfer a min-width wider than the screen (tall phones) and push the page sideways */ .pdp { grid-template-columns:minmax(0,1fr); gap:24px; } .pdp__title { font-size:var(--text-xl); } .pdp__price { font-size:var(--text-lg); } .pdp__breadcrumb { margin-bottom:14px; } /* Photo stays about half the screen so the name & price peek above the fold */ .gallery__main { max-height:52vh; max-height:52svh; } /* Thumbnails become one swipeable strip instead of wrapping down the page */ .gallery__thumbs { flex-wrap:nowrap; overflow-x:auto; overscroll-behavior-x:contain; padding-bottom:4px; scrollbar-width:none; } .gallery__thumbs::-webkit-scrollbar { display:none; } .gallery__thumb { flex:0 0 64px; } /* Qty + add-to-cart share one comfortable full-width row */ .pdp__actions { flex-wrap:wrap; } .pdp__actions .btn { flex:1 1 auto; } } /* ============================================================ Shop: transparency strip, individually-listed devices (unit mode), condition badges, battery bubbles, compare pricing ============================================================ */ /* "100% transparent" strip on the shop landing page */ .shop-trust { display:flex; gap:14px; align-items:flex-start; max-width:760px; margin:0 auto 40px; padding:16px 20px; background:var(--surface-sunken); border:1px solid var(--border); border-radius:var(--radius-lg); } .shop-trust svg { flex:none; margin-top:2px; color:var(--accent-strong); } .shop-trust p { margin:0; font-size:var(--text-sm); color:var(--text-muted); line-height:var(--leading-relaxed); } .shop-trust strong { color:var(--text); } /* Compare-at ("was") pricing + savings chip */ .price-was { color:var(--text-faint); font-weight:var(--weight-medium); font-size:0.72em; margin-left:2px; } .price-save { display:inline-block; vertical-align:middle; margin-left:6px; padding:2px 10px; border-radius:var(--radius-pill); background:rgba(30,158,80,0.1); color:var(--green-600); font-size:var(--text-xs); font-weight:var(--weight-medium); } /* Listing card: unique-device count on unit-mode groups */ .pcard__units { margin-top:2px; font-size:var(--text-xs); color:var(--text-faint); } /* The bundled model renders are bare portrait SVGs; breathing room so the artwork doesn't touch the tile edges (thumbs also switch to contain). */ .pcard__media img[src$=".svg"], .gallery__main img[src$=".svg"], .gallery__thumb img[src$=".svg"] { object-fit:contain; padding:10px; } /* Device picker: one card per physical phone */ .unit-list { display:flex; flex-direction:column; gap:10px; } .unit-card { display:flex; flex-direction:column; gap:7px; width:100%; text-align:left; padding:12px 14px; cursor:pointer; color:var(--text); background:var(--surface); border:1.5px solid var(--border-strong); border-radius:var(--radius-sm); font-family:var(--font-sans); font-size:var(--text-sm); transition:border-color var(--dur-fast), background var(--dur-fast); } .unit-card:hover { border-color:var(--text); } .unit-card.is-selected { border-color:var(--text); background:var(--surface-sunken); } .unit-card__top { display:flex; justify-content:space-between; align-items:center; gap:10px; } .unit-card__price { font-weight:var(--weight-semibold); color:var(--text); } .unit-card__specs { font-weight:var(--weight-semibold); } /* Condition grade badge (Like New / Very Good / Good / Fair) */ .cond-badge { display:inline-flex; align-self:flex-start; padding:2px 10px; border-radius:var(--radius-pill); background:var(--surface-raised); border:1px solid transparent; color:var(--text-muted); font-size:var(--text-xs); font-weight:var(--weight-medium); white-space:nowrap; } /* Battery-health bubble: gold 95-100% (premium device), green 85-94% (good), below 85% discounted. */ .batt-bubble { display:inline-flex; align-self:flex-start; padding:2px 10px; border-radius:var(--radius-pill); font-size:var(--text-xs); font-weight:var(--weight-medium); white-space:nowrap; } .batt--gold { background:var(--accent-soft); color:var(--gold-800); border:1px solid rgba(217,158,0,0.35); } .batt--green { background:rgba(30,158,80,0.1); color:var(--green-600); border:1px solid rgba(30,158,80,0.3); } .batt--disc { background:rgba(37,99,235,0.08); color:#1d4ed8; border:1px solid rgba(37,99,235,0.3); } /* Condition report for the selected device */ .unit-report { margin:16px 0 4px; padding:14px 16px; background:var(--surface-sunken); border:1px solid var(--border); border-radius:var(--radius-md); } .unit-report__head { font-size:var(--text-xs); font-weight:var(--weight-semibold); text-transform:uppercase; letter-spacing:var(--tracking-caps); color:var(--text-faint); margin-bottom:8px; } .unit-report p { margin:0; font-size:var(--text-sm); color:var(--text-muted); line-height:var(--leading-relaxed); white-space:pre-line; } .batt { display:flex; align-items:center; gap:10px; margin-top:10px; font-size:var(--text-sm); color:var(--text-muted); } .batt__track { flex:none; width:120px; height:6px; border-radius:var(--radius-pill); background:var(--border); overflow:hidden; } .batt__fill { display:block; height:100%; border-radius:var(--radius-pill); background:var(--text-faint); } .batt__fill.batt--gold { background:var(--gold-500); border:none; } .batt__fill.batt--green { background:var(--green-500); border:none; } .batt__fill.batt--disc { background:var(--blue-500); border:none; } /* "How we grade condition" explainer */ .cond-guide { margin:18px 0 4px; padding:12px 16px; border:1px solid var(--border); border-radius:var(--radius-md); font-size:var(--text-sm); color:var(--text-muted); } .cond-guide summary { cursor:pointer; font-weight:var(--weight-semibold); color:var(--text); } .cond-guide ul { list-style:none; margin:12px 0 0; padding:0; display:flex; flex-direction:column; gap:10px; } .cond-guide li { display:flex; gap:10px; align-items:flex-start; } .cond-guide li .cond-badge { flex:none; min-width:86px; justify-content:center; } /* ============================================================ Shop: mobile listing: tighter header, swipeable filter chips, two tiles per row like a native store ============================================================ */ @media (max-width:640px) { .shop-page { padding-top:calc(var(--nav-h, 68px) + 16px); } .shop-head { margin-bottom:22px; } .shop-head p { font-size:var(--text-base); } .shop-trust { margin-bottom:22px; padding:12px 14px; gap:10px; } /* Filter chips: one swipeable row (kept inside the page gutters so it can never extend past the screen edge) */ .shop-filters { flex-wrap:nowrap; justify-content:flex-start; overflow-x:auto; overscroll-behavior-x:contain; margin:0 0 20px; padding:2px 0; scrollbar-width:none; } .shop-filters::-webkit-scrollbar { display:none; } .shop-filter { flex:none; } /* Two tiles per row halves the scrolling on a phone */ .shop-grid { grid-template-columns:1fr 1fr; gap:12px; } .pcard__body { padding:12px 12px 14px; } .pcard__name { font-size:var(--text-sm); } .pcard__price { margin-top:4px; font-size:var(--text-sm); } } /* ============================================================ Price tables: the from-price table injected server-side into the screen-cost blog post. Wide tables scroll inside their own wrapper; the page never scrolls sideways. ============================================================ */ .price-table-wrap { overflow-x:auto; -webkit-overflow-scrolling:touch; border:1px solid var(--border-strong); border-radius:var(--radius-md); background:var(--surface); } /* border-collapse:separate (not collapse) so cell borders travel with the sticky first column instead of being left behind on scroll. */ .price-table { width:100%; border-collapse:separate; border-spacing:0; font-size:var(--text-sm); } .price-table caption { position:absolute; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip:rect(0,0,0,0); white-space:nowrap; } .price-table th, .price-table td { padding:11px 16px; text-align:left; white-space:nowrap; border-bottom:1px solid var(--border); border-right:1px solid var(--border); } .price-table th:last-child, .price-table td:last-child { border-right:none; } .price-table tbody tr:last-child th, .price-table tbody tr:last-child td { border-bottom:none; } .price-table thead th { font-size:var(--text-xs); text-transform:uppercase; letter-spacing:var(--tracking-caps); color:var(--text-faint); background:var(--surface-sunken); font-weight:var(--weight-semibold); } .price-table tbody th { font-weight:var(--weight-semibold); background:var(--surface); } .price-table td { color:var(--text-muted); } /* Phones: the model column stays pinned while prices scroll under it. */ .price-table thead th:first-child, .price-table tbody th { position:sticky; left:0; z-index:1; } @media (max-width:640px) { .price-table { font-size:var(--text-xs); } .price-table th, .price-table td { padding:8px 10px; } }