/* Homepage header and hero, desktop redesign (Oct 2026). Hand-written, loaded last on index.html only. Everything is scoped to body.hp and the desktop rules sit inside min-width queries, so phones keep the hero they had: copy, then the original video phone. The three phones are the site's own .db-iphone component, sized only through --ph-scale (see css/phone.css). Nothing here sets a width on .db-iphone or touches .db-screen, .db-bezel or the buttons. No !important. */ /* ── new elements, all widths ─────────────────────────────────────────── */ body.hp .hero-eyebrow{display:inline-flex;align-items:center;gap:9px;margin-bottom:20px; padding:7px 14px 7px 12px;border-radius:999px;background:rgba(255,255,255,.07); border:1px solid rgba(255,255,255,.16);font-size:12px;font-weight:700;letter-spacing:.14em; text-transform:uppercase;color:#D8D2FF} body.hp .hero-eyebrow::before{content:"";width:7px;height:7px;border-radius:50%;flex:none; background:#A99BFF;box-shadow:0 0 0 3px rgba(169,155,255,.18)} body.hp .hero .btn-primary{box-shadow:0 10px 28px rgba(0,0,0,.28)} body.hp .hero-btn-secondary{display:inline-flex;align-items:center;justify-content:center; padding:15px 24px;border-radius:13px;border:1px solid rgba(255,255,255,.3);color:#fff; font-size:15.5px;font-weight:700;letter-spacing:-.01em; transition:background .18s ease,border-color .18s ease,transform .2s ease} body.hp .hero-btn-secondary:hover{color:#fff;background:rgba(255,255,255,.08); border-color:rgba(255,255,255,.5);transform:translateY(-2px)} body.hp .hero .btn-primary:focus-visible, body.hp .hero-btn-secondary:focus-visible{outline:3px solid #C4B5FD;outline-offset:3px} body.hp .hero-note{margin-top:14px;font-size:13.5px;font-weight:500;color:rgba(255,255,255,.6)} body.hp .hero-benefits{list-style:none;margin:26px 0 0;padding:22px 0 0; border-top:1px solid rgba(255,255,255,.12);display:flex;flex-wrap:wrap;gap:12px 20px} body.hp .hero-benefits li{display:flex;align-items:center;gap:9px;margin:0;font-size:13.5px; font-weight:600;color:rgba(255,255,255,.86);white-space:nowrap} body.hp .hb-icon{display:grid;place-items:center;width:30px;height:30px;flex:none;border-radius:9px; background:rgba(169,155,255,.12);border:1px solid rgba(169,155,255,.24);color:#C4B5FD} body.hp .hb-icon svg{display:block} /* The three-phone stack is desktop only; the video phone is mobile only. */ body.hp .hero-stack{display:none} /* ── header ────────────────────────────────────────────────────────────── The header itself is site-wide now: build/nav.html and css/nav.css. All the homepage adds is clearance for the 72px bar below 981px; from 981px the hero runs up underneath it (see the hero section below). */ @media (min-width:769px){ body.hp .hero{margin-top:72px} } /* In the mobile menu the trial button is the last, and loudest, item. */ @media (max-width:768px){ body.hp .nav-links .nav-cta{margin-top:14px;padding:14px 18px;border-radius:12px;text-align:center; background:linear-gradient(135deg,#667eea,#764ba2);color:#fff;font-weight:700} } /* ── hero, desktop ──────────────────────────────────────────────────────── Two columns that fit a 1440x900 screen whole: header, headline, copy, both buttons, the benefits row and all three phones, with nothing below the fold that the first impression needs. */ @media (min-width:981px){ /* Phase 2: tighter vertical rhythm so the benefits row clears a 1690x900 screen with browser chrome and the cookie banner (benefits bottom <= ~600px). */ body.hp .hero{padding:36px 0 52px} /* Same photo and glows, pushed darker so the phones carry the colour. The strongest glow now sits behind the phones rather than behind the copy. */ body.hp .hero::before{filter:grayscale(.5) contrast(1.05) brightness(.4)} body.hp .hero::after{background: radial-gradient(560px 460px at 77% 52%,rgba(118,75,162,.42) 0,transparent 68%), radial-gradient(620px 380px at 6% 0,rgba(102,126,234,.2) 0,transparent 70%), linear-gradient(170deg,rgba(20,16,40,.9) 0,rgba(13,11,24,.96) 70%,#0D0B18 100%)} /* Copy starts level with the phones rather than centred against them: the stack is taller than the copy, and centring pushed the benefits row down. */ body.hp .hero .wrap{grid-template-columns:minmax(0,1.02fr) minmax(0,.98fr);gap:32px;align-items:start} body.hp .hero-content{padding-top:10px} body.hp .hero-eyebrow{margin-bottom:16px} body.hp .hero .hero-title{font-size:50px;line-height:1.06;letter-spacing:-.035em;max-width:580px;text-wrap:balance} body.hp .hero .lead{font-size:17px;line-height:1.65;margin-top:16px;max-width:530px} body.hp .hero-buttons{gap:12px;margin-top:24px} body.hp .hero-note{margin-top:12px} body.hp .hero-benefits{margin-top:18px;padding-top:16px} body.hp .hero-demo{display:none} /* Centre phone in front; the other two tucked behind it and turned inwards. --c and --s are the --ph-scale of the centre and side phones, and every offset below is derived from them so the composition holds when they change. */ body.hp .hero-stack{--c:.6;--s:.5;display:block;position:relative; height:calc(869px * var(--c) + 24px);isolation:isolate} body.hp .hero-stack::before{content:"";position:absolute;z-index:-1;left:50%;top:46%; width:88%;height:62%;transform:translate(-50%,-50%);border-radius:50%; background:radial-gradient(closest-side,rgba(139,92,246,.34),transparent);filter:blur(10px)} body.hp .hero-stack .db-iphone{position:absolute} body.hp .hero-stack .hs-centre{--ph-scale:var(--c);z-index:3;left:50%;top:0;transform:translateX(-50%)} body.hp .hero-stack .hs-left, body.hp .hero-stack .hs-right{--ph-scale:var(--s);z-index:2;top:calc(869px * (var(--c) - var(--s)) / 2 + 18px)} body.hp .hero-stack .hs-left{left:calc(50% - 420px * var(--c) / 2 - 420px * var(--s) * .62); transform:perspective(1600px) rotateY(16deg) rotate(-4deg)} body.hp .hero-stack .hs-right{left:calc(50% + 420px * var(--c) / 2 - 420px * var(--s) * .38); transform:perspective(1600px) rotateY(-16deg) rotate(4deg)} /* The side screens recede: darker and a touch less saturated, so the calendar reads first. */ body.hp .hero-stack .hs-left .db-screen img, body.hp .hero-stack .hs-right .db-screen img{filter:brightness(.74) saturate(.88)} /* Current-iPhone proportions, for these three phones only (Jamie asked for a more realistic device here; the shared component elsewhere is unchanged). Thinner black border: screen inset 14 instead of 18 (of 420), titanium band 6 instead of 8, radii kept concentric with the 75 outer corner. Symmetric on every side, so measure-phone still reads delta 0. */ body.hp .hero-stack .db-bezel{inset:calc(6px * var(--ph-scale));border-radius:calc(69px * var(--ph-scale))} body.hp .hero-stack .db-screen{inset:calc(14px * var(--ph-scale));border-radius:calc(61px * var(--ph-scale))} /* Device realism, added as separate layers on top of the phone component. hs-island: a Dynamic Island at real proportions (iPhone 15/16: 126 x 37pt on a 393 x 852pt screen, 11pt from the top), with the front camera lens on its right. Screenshots never include the island; the booking-page capture had a screen-recording pill baked in, painted out in brand-booking-hero.webp so the island no longer has to be oversized to hide it. hs-sheen: a rim highlight on the titanium edge, a faint diagonal glare, and layered shadows that fall on whatever sits behind. */ body.hp .hero-stack .hs-island{position:absolute;left:50%;top:calc(25px * var(--ph-scale)); width:calc(125px * var(--ph-scale));height:calc(36px * var(--ph-scale));transform:translateX(-50%); border-radius:999px;background:#000;box-shadow:inset 0 0 0 1px rgba(255,255,255,.05)} body.hp .hero-stack .hs-island::after{content:"";position:absolute;top:50%;right:calc(12px * var(--ph-scale)); width:calc(13px * var(--ph-scale));height:calc(13px * var(--ph-scale));transform:translateY(-50%);border-radius:50%; background:radial-gradient(circle at 34% 32%,rgba(140,160,255,.55) 0,rgba(40,52,96,.9) 22%,#0d1222 50%,#04060c 72%); box-shadow:0 0 0 calc(1.5px * var(--ph-scale)) #14161d} body.hp .hero-stack .hs-sheen{position:absolute;inset:0;pointer-events:none; border-radius:calc(75px * var(--ph-scale)); background:linear-gradient(118deg,rgba(255,255,255,.12) 0,rgba(255,255,255,.035) 20%,rgba(255,255,255,0) 36%); box-shadow:inset 0 0 0 1px rgba(255,255,255,.13),inset 0 2px 1px rgba(255,255,255,.2), inset 0 -2px 3px rgba(0,0,0,.4),0 2px 4px rgba(0,0,0,.3),0 22px 40px -10px rgba(0,0,0,.5), 0 56px 90px -24px rgba(0,0,0,.6)} /* The front phone also throws shadow sideways onto the two behind it. */ body.hp .hero-stack .hs-centre .hs-sheen{box-shadow:inset 0 0 0 1px rgba(255,255,255,.16), inset 0 2px 1px rgba(255,255,255,.24),inset 0 -2px 3px rgba(0,0,0,.4),0 2px 4px rgba(0,0,0,.35), -26px 10px 40px -14px rgba(0,0,0,.65),26px 10px 40px -14px rgba(0,0,0,.65), 0 30px 50px -12px rgba(0,0,0,.55),0 70px 110px -30px rgba(0,0,0,.65)} /* The side phones fall into shadow towards their outer edges, away from the light on the front phone. */ body.hp .hero-stack .hs-left .hs-sheen{background:linear-gradient(90deg,rgba(8,6,18,.55) 0,rgba(8,6,18,.18) 45%,rgba(8,6,18,0) 75%)} body.hp .hero-stack .hs-right .hs-sheen{background:linear-gradient(270deg,rgba(8,6,18,.55) 0,rgba(8,6,18,.18) 45%,rgba(8,6,18,0) 75%)} /* The bottom of the stack dissolves into the hero instead of ending on a hard edge. A mask rather than a dark overlay, so there is no colour to match and no seam. The box is widened by 40px a side so the turned side phones and their shadows sit inside the mask; .hero clips the overhang. */ body.hp .hero-stack{margin:0 -40px; -webkit-mask-image:linear-gradient(to bottom,#000 82%,transparent 100%); mask-image:linear-gradient(to bottom,#000 82%,transparent 100%)} } /* Narrower desktops: the same composition, smaller. */ @media (min-width:981px) and (max-width:1199px){ body.hp .hero .hero-title{font-size:44px} body.hp .hero-stack{--c:.52;--s:.43} } @media (min-width:1600px){ body.hp .hero-stack{--c:.64;--s:.53} } /* The hero runs up under the translucent bar, so there is no seam at all. */ @media (min-width:981px){ body.hp .hero{margin-top:0;padding-top:108px} } /* ── phones and tablets: the new elements inside the existing mobile hero ─ */ @media (max-width:980px){ body.hp .hero-btn-secondary{display:block;text-align:center} } @media (max-width:860px){ /* The second action was a text link, so the stacked buttons sat 4px apart. */ body.hp .hero-buttons{gap:10px} body.hp .hero-eyebrow{margin-bottom:16px;font-size:11px} body.hp .hero-note{font-size:13px;text-align:center} body.hp .hero-benefits{gap:10px 18px;margin-top:20px;padding-top:18px} body.hp .hero-benefits li{font-size:13.5px} } /* ── Search heading ───────────────────────────────────────────────────────── The H1 is the "Booking software for UK car detailing businesses." line, so the keyword stays in the page's main heading. The big headline is a .hero-title div that keeps every rule it had as `.hero h1`. The two rules below copy what styles.css gave the old elements by tag (`.hero h1` and `.hero p`), at a specificity that still loses to every homepage rule, exactly as the originals did. */ .hero .hero-title{font-size:4rem;font-weight:800;line-height:1.15;letter-spacing:-1.5px;text-wrap:balance; text-shadow:0 2px 22px rgba(0,0,0,.45);animation:fadeInUp .8s ease .3s both} .hero .hero-title .highlight{background:linear-gradient(105deg,#A99BFF 0%,#C4B5FD 50%,#8B5CF6 100%); -webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text} .hero .lead{font-weight:400;opacity:.92;text-wrap:pretty;text-shadow:0 1px 12px rgba(0,0,0,.55); animation:fadeInUp .8s ease .4s both} /* The H1 reads as the bold opening of the lead, as the did. */ body.hp .hero .lead .hero-kw{display:inline;font:inherit;font-weight:600;color:#fff;margin:0;letter-spacing:inherit; text-shadow:inherit;animation:none;text-wrap:inherit}