/* ========================================================================== AJ Multispeciality Dental Clinic - Pediatric Dentistry Landing Page Theme: white + neutral shades. Green (sampled from the logo) is the single accent, reserved for icons, the primary CTA and small highlights. Type: Manrope (primary) / Google Sans (secondary, Poppins fallback) ========================================================================== */ :root{ /* accent - the only chromatic colour on the page, sampled from the logo. --accent is the logo green itself (icons, kickers, dots, rules). --accent-600/700 are deeper shades used where white text sits on top, so the button label keeps a readable contrast ratio. */ --accent: #50A51F; /* exact logo green */ --accent-600: #3A8017; /* solid fills - white text 4.9:1 */ --accent-700: #2F6A12; /* fill hover - white text 6.6:1 */ --accent-100: #D9EDC9; --accent-50: #F1F8EA; /* red, for the "what goes wrong" markers - not a brand colour, used only where a point is explicitly negative so it never reads as an accent. */ --danger: #D93025; /* glyph on the tint - 4.9:1 */ --danger-100: #F8D7D4; --danger-50: #FDF0EF; /* neutrals */ --ink: #111214; --ink-2: #3C4046; --muted: #63686F; /* 5.6:1 on white, 5.4:1 on --surface (was 4.26:1) */ --muted-2: #6E737B; /* 4.8:1 on white, 4.6:1 on --surface (was 2.64:1) */ --line: #EAEBED; --line-2: #F2F3F4; --bg: #FFFFFF; --surface: #FAFAFA; --surface-2: #F6F7F8; /* type */ --f1: "Manrope", "Segoe UI", system-ui, -apple-system, sans-serif; --f2: "Google Sans", "Google Sans Text", "Product Sans", "Poppins", var(--f1); /* layout */ --header-h: 82px; --logo-h: 50px; /* one source of truth: header + footer logos. The mark is near-square (743x645), so it needs more height than the old wide wordmark to read clearly. */ --shell: 1140px; --pad: 24px; /* Footer right-hand column. The two footer rows are separate containers, so an `auto` track in each would size to its own content and the columns would not line up - the contact block is 410px wide, the credit line 359px. This is the contact block's natural width (34px icon + 13px gap + the longest address line) plus headroom, and both rows use it, so "Get in touch" and the Profitcast credit share a left edge. The headroom matters: the address breaks on hard
s, and its longest line sits ~361px, so a track sized tight to it would re-wrap that line in the fallback font before Manrope loads. Recheck this if the address wording or .foot-addr's font-size changes. */ --foot-right: 436px; /* vertical rhythm - generous by design */ --sec-y: clamp(84px, 6vw + 44px, 156px); --head-gap: clamp(48px, 4.5vw, 84px); --grid-gap: clamp(20px, 2vw, 30px); /* boxes are near-square; pill buttons and circular icons keep their own shape */ --r-sm: 2px; --r: 3px; --r-lg: 3px; --r-xl: 3px; --sh-1: 0 1px 2px rgba(17,18,20,.03), 0 6px 20px rgba(17,18,20,.04); --sh-2: 0 2px 6px rgba(17,18,20,.04), 0 18px 44px rgba(17,18,20,.07); --sh-3: 0 24px 64px rgba(17,18,20,.13); --ease: cubic-bezier(.22,.61,.36,1); --ease-soft: cubic-bezier(.45,0,.55,1); } /* ---------- base ---------- */ *,*::before,*::after{ box-sizing:border-box; } html{ scroll-behavior:smooth; -webkit-text-size-adjust:100%; /* anchor targets stop below the sticky header instead of under it */ scroll-padding-top:calc(var(--header-h) + 12px); } body{ margin:0; font-family:var(--f1); font-size:16.5px; line-height:1.75; color:var(--ink-2); background:var(--bg); -webkit-font-smoothing:antialiased; overflow-x:hidden; } img{ max-width:100%; display:block; } svg{ width:1em; height:1em; fill:currentColor; flex:none; } a{ color:inherit; text-decoration:none; } ul,ol{ margin:0; padding:0; list-style:none; } p{ margin:0; } button,input,select{ font:inherit; color:inherit; } h1,h2,h3,h4{ margin:0; color:var(--ink); font-family:var(--f1); font-weight:700; line-height:1.16; letter-spacing:-.022em; } h1{ font-size:clamp(2.05rem, 1.5rem + 2.3vw, 3.15rem); line-height:1.1; letter-spacing:-.032em; } h2{ font-size:clamp(1.5rem, 1.2rem + 1.35vw, 2.15rem); letter-spacing:-.026em; } h3{ font-size:clamp(1.04rem, 1rem + .22vw, 1.14rem); } .shell{ width:100%; max-width:var(--shell); margin-inline:auto; padding-inline:var(--pad); } .section{ padding:var(--sec-y) 0; } /* clip-based hiding, so the link never contributes to document scroll width */ .skip-link{ position:absolute; left:0; top:0; z-index:200; width:1px; height:1px; overflow:hidden; clip-path:inset(50%); white-space:nowrap; background:var(--accent-600); color:#fff; padding:12px 18px; border-radius:0 0 var(--r-sm) 0; font-weight:700; } .skip-link:focus{ width:auto; height:auto; clip-path:none; } :focus-visible{ outline:2.5px solid var(--accent); outline-offset:3px; border-radius:4px; } /* ---------- shared bits ---------- */ .sec-head{ max-width:640px; margin:0 auto var(--head-gap); text-align:center; } .sec-sub{ margin-top:18px; font-family:var(--f2); font-size:clamp(.98rem,.95rem + .16vw,1.05rem); line-height:1.75; color:var(--muted); } .arw{ display:inline-block; transition:transform .3s var(--ease); } .btn:hover .arw{ transform:translateX(4px); } /* ---------- buttons ---------- */ .btn{ display:inline-flex; align-items:center; justify-content:center; gap:9px; font-family:var(--f2); font-weight:600; font-size:.94rem; line-height:1; padding:14px 24px; border-radius:var(--r); border:1.5px solid transparent; cursor:pointer; white-space:nowrap; transition:background .25s var(--ease), color .25s var(--ease), border-color .25s var(--ease), transform .25s var(--ease), box-shadow .25s var(--ease); } .btn svg{ font-size:1.05em; } .btn-lg{ padding:17px 30px; font-size:.99rem; } .btn-sm{ padding:10px 18px; font-size:.86rem; } .btn-block{ width:100%; } .btn-primary{ background:var(--accent-600); color:#fff; } .btn-primary:hover{ background:var(--accent-700); transform:translateY(-2px); box-shadow:0 10px 24px rgba(58,128,23,.26); } .btn-outline{ background:#fff; color:var(--ink); border-color:var(--line); } .btn-outline:hover{ border-color:var(--ink); transform:translateY(-2px); } .btn-white{ background:var(--accent-600); color:#fff; } .btn-white:hover{ background:var(--accent-700); transform:translateY(-2px); box-shadow:0 10px 24px rgba(58,128,23,.26); } .btn-clear{ background:#fff; color:var(--ink); border-color:var(--line); } .btn-clear:hover{ border-color:var(--ink); transform:translateY(-2px); } /* ========================================================================== HEADER ========================================================================== */ /* the frosted white bar is present from the first pixel, so it overlays the hero as well. .is-solid (toggled in script.js past the hero) only deepens it slightly once there is no photo behind it. */ .site-header{ position:sticky; top:0; z-index:100; background:rgba(255,255,255,.82); backdrop-filter:saturate(160%) blur(14px); -webkit-backdrop-filter:saturate(160%) blur(14px); border-bottom:1px solid var(--line); transition:background .3s var(--ease), border-color .3s var(--ease); } .site-header.is-solid{ background:rgba(255,255,255,.94); } .header-inner{ display:flex; align-items:center; justify-content:space-between; gap:20px; height:var(--header-h); } .brand img{ height:var(--logo-h); width:auto; object-fit:contain; } .header-actions{ display:flex; align-items:center; gap:10px; } /* icon-only call button in the header */ .btn-icon{ display:grid; place-items:center; width:44px; height:44px; border-radius:var(--r); background:#fff; border:1.5px solid var(--line); color:var(--ink); font-size:19px; flex:none; transition:color .25s var(--ease), border-color .25s var(--ease), transform .25s var(--ease); } .btn-icon:hover{ color:var(--accent-600); border-color:var(--accent-600); transform:translateY(-2px); } /* ========================================================================== HERO - full-bleed banner. The photo carries its subject on the right and an empty wall on the left, so the copy sits in that empty half and a left-to-right white scrim guarantees text contrast over it. NOTE: the +/- inside clamp() must be surrounded by whitespace, otherwise the whole declaration is invalid and the rule is silently dropped. ========================================================================== */ .hero{ position:relative; isolation:isolate; overflow:hidden; background:var(--bg); margin-top:calc(-1 * var(--header-h)); } .hero-img{ position:absolute; inset:0; z-index:0; width:100%; height:100%; object-fit:cover; object-position:68% center; } .hero-scrim{ position:absolute; inset:0; z-index:1; /* left-to-right scrim that keeps the hero copy legible over the photo */ background: linear-gradient(96deg, #fff 0%, rgba(255,255,255,.97) 26%, rgba(255,255,255,.86) 42%, rgba(255,255,255,.42) 56%, rgba(255,255,255,.06) 70%, rgba(255,255,255,0) 80%); } .hero-inner{ position:relative; z-index:2; min-height:calc(clamp(520px, 46vw, 660px) + var(--header-h)); display:flex; align-items:center; /* the header floats over the hero, so clear it at the top */ padding-block:calc(var(--header-h) + clamp(40px, 3vw + 16px, 64px)) clamp(56px, 4vw + 24px, 88px); } .hero-copy{ max-width:min(54%, 600px); } /* both are pass-through wrappers above 720px, so the desktop hero is unchanged. They only become real boxes on phones, where the copy splits either side of the portrait photo. */ .hero-pic{ display:contents; } .hero-text{ display:contents; } .hero-copy .lede{ margin-top:26px; font-family:var(--f2); font-size:clamp(1rem, .96rem + .3vw, 1.12rem); line-height:1.75; color:var(--muted); max-width:44ch; } .nb{ white-space:nowrap; } .hl{ color:var(--accent); } .hero-cta{ display:flex; flex-wrap:wrap; gap:12px; margin-top:36px; } /* ========================================================================== PROBLEM ========================================================================== */ .problem{ background:var(--surface); } .prob-grid{ display:grid; grid-template-columns:.9fr 1.1fr; gap:clamp(44px,5vw,92px); align-items:center; } .prob-media{ position:relative; } .prob-photo{ margin:0; border-radius:var(--r-lg); overflow:hidden; aspect-ratio:4/4.2; background:var(--surface); } .prob-photo img{ width:100%; height:100%; display:block; object-fit:cover; object-position:center; } .prob-badge{ position:absolute; right:-14px; bottom:-26px; max-width:252px; /* translucent so the photo reads through; the blur keeps the text crisp */ background:rgba(17,18,20,.82); backdrop-filter:blur(10px) saturate(140%); -webkit-backdrop-filter:blur(10px) saturate(140%); color:#fff; border-radius:var(--r); padding:20px 22px; box-shadow:var(--sh-3); } .prob-badge strong{ display:block; font-size:.92rem; margin-bottom:6px; color:#fff; } .prob-badge span{ font-family:var(--f2); font-size:.82rem; line-height:1.6; color:rgba(255,255,255,.78); } .prob-copy p{ margin-top:22px; font-family:var(--f2); font-size:1rem; line-height:1.8; color:var(--muted); max-width:50ch; } .prob-list{ display:grid; gap:0; margin-top:34px; border-top:1px solid var(--line); } .prob-list li{ display:flex; align-items:center; gap:14px; padding:15px 2px; border-bottom:1px solid var(--line); font-family:var(--f2); font-size:.94rem; color:var(--ink-2); } .prob-list .x{ display:grid; place-items:center; width:28px; height:28px; border-radius:50%; background:var(--danger-50); border:1px solid var(--danger-100); color:var(--danger); font-size:18px; font-weight:600; line-height:1; flex:none; } /* ========================================================================== WHY - stacked success-story rows. A sticky label rail on the left, then one full-width row per reason: image, counter, title, description, chip. Each row reveals on scroll, so they arrive one at a time as you move down. ========================================================================== */ .why{ background:var(--bg); } .why-grid{ display:grid; grid-template-columns:190px 1fr; gap:clamp(24px,3vw,56px); align-items:start; } /* the label tracks the list, as on the reference */ .why-rail{ position:sticky; top:calc(var(--header-h) + 28px); } .why-label{ display:flex; align-items:center; gap:10px; font-family:var(--f1); font-weight:700; font-size:clamp(1.35rem,1.1rem + .85vw,1.75rem); color:var(--ink); letter-spacing:-.026em; } .why-dot{ width:11px; height:11px; border-radius:50%; background:var(--accent); flex:none; } .why-list{ display:grid; } .why-item{ display:grid; grid-template-columns:1.32fr .68fr; gap:clamp(24px,3vw,52px); align-items:start; padding-bottom:clamp(34px,3.4vw,52px); border-bottom:1px dotted var(--line-2); } .why-item + .why-item{ padding-top:clamp(34px,3.4vw,52px); } .why-item:last-child{ border-bottom:0; padding-bottom:0; } /* image sits pre-zoomed in a clipped 3:2 frame */ .why-media{ position:relative; overflow:hidden; border-radius:3px; aspect-ratio:3/2; background:var(--surface); } .why-media img{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; transform:scale(1.08); } .why-body{ padding-top:2px; } .why-count{ display:flex; align-items:center; gap:9px; margin-bottom:16px; font-family:var(--f2); font-size:.72rem; color:var(--muted-2); letter-spacing:.06em; font-variant-numeric:tabular-nums; } .why-num{ border:1px solid var(--line); border-radius:2px; padding:2px 7px; color:var(--muted); } .why-title{ font-size:clamp(1.24rem,1.05rem + .7vw,1.6rem); line-height:1.2; letter-spacing:-.026em; color:var(--ink); margin-bottom:12px; } .why-desc{ font-family:var(--f2); font-size:.95rem; line-height:1.75; color:var(--muted); max-width:42ch; } .why-chip{ display:inline-block; margin-top:22px; font-family:var(--f2); font-size:.72rem; font-weight:600; letter-spacing:.14em; text-transform:uppercase; color:var(--accent-700); background:var(--accent-50); border:1px solid var(--accent-100); border-radius:2px; padding:6px 11px; } /* ---- 7th row: full-width accent panel ---- */ .tcard-wide{ display:flex; align-items:center; gap:clamp(24px,3vw,52px); margin-top:clamp(44px,4vw,68px); padding:clamp(28px,2.6vw,40px); background:var(--surface); border:1px solid var(--line); border-radius:3px; } .tw-text{ flex:1 1 auto; } .tcard-label{ display:inline-block; font-family:var(--f2); font-size:.72rem; font-weight:600; letter-spacing:.16em; text-transform:uppercase; color:var(--accent-700); } .tcard-title{ margin-top:12px; font-size:clamp(1.16rem,1rem + .45vw,1.4rem); color:var(--ink); letter-spacing:-.024em; } .tcard-copy{ margin-top:10px; max-width:62ch; font-family:var(--f2); font-size:.94rem; line-height:1.72; color:var(--muted); } .tcard-wide .btn{ flex:none; } /* ========================================================================== HOW IT WORKS - image left, statement + steps + full-width CTA right ========================================================================== */ .how{ background:var(--bg); } .how-grid{ display:grid; grid-template-columns:1fr 1fr; gap:clamp(44px,5vw,88px); align-items:center; } .how-photo{ margin:0; border-radius:var(--r-lg); overflow:hidden; aspect-ratio:1/1; background:var(--surface); display:grid; place-items:center; padding:clamp(22px,3vw,48px); } .how-photo img{ width:100%; height:100%; object-fit:contain; } /* A photograph fills its frame. The contain + padding treatment above is for cut-out product shots on a plain ground - the clear aligner on the pediatric page - which would look shrunken and letterboxed if it were cropped. */ .how-photo.is-photo{ padding:0; display:block; } .how-photo.is-photo img{ object-fit:cover; } .how-copy h2{ max-width:24ch; font-size:clamp(1.12rem, .95rem + .68vw, 1.5rem); } .how-steps{ position:relative; margin-top:clamp(30px,3vw,42px); } /* hairline rail linking the numbered badges */ .how-steps::before{ content:""; position:absolute; left:17px; top:18px; bottom:18px; width:1px; background:linear-gradient(180deg, var(--accent-100), var(--line)); } .how-step{ position:relative; display:flex; align-items:flex-start; gap:20px; padding:0 0 clamp(24px,2.4vw,32px); } .how-step:last-child{ padding-bottom:0; } .hs-n{ position:relative; z-index:1; flex:none; width:35px; height:35px; border-radius:50%; display:grid; place-items:center; background:#fff; border:1.5px solid var(--accent-100); color:var(--accent-700); font-family:var(--f1); font-weight:700; font-size:.78rem; letter-spacing:.02em; font-variant-numeric:tabular-nums; } .hs-body{ padding-top:5px; } .hs-body h3{ margin-bottom:7px; font-size:clamp(1.06rem,1rem + .3vw,1.2rem); } .hs-body p{ font-family:var(--f2); font-size:.95rem; line-height:1.72; color:var(--muted); } .how-cta{ margin-top:clamp(30px,3vw,40px); } /* ========================================================================== FAQ ========================================================================== */ .faq{ background:var(--bg); } .faq-grid{ display:grid; grid-template-columns:.82fr 1.18fr; gap:clamp(40px,5vw,96px); align-items:start; } .faq-aside{ position:sticky; top:calc(var(--header-h) + 32px); } .faq-aside .sec-sub{ max-width:44ch; } /* rows are open records on hairlines, not cards */ .faq-list{ display:block; border-top:1px solid var(--line); } .acc{ border-bottom:1px solid var(--line); } .acc-q{ display:grid; grid-template-columns:auto 1fr auto; align-items:center; gap:clamp(14px,1.6vw,28px); width:100%; text-align:left; cursor:pointer; background:none; border:0; padding:clamp(20px,1.9vw,28px) 0; transition:color .25s var(--ease); } .acc-n{ font-family:ui-monospace,"SFMono-Regular",Menlo,Consolas,monospace; font-size:.76rem; letter-spacing:.06em; color:var(--muted-2); /* fixed so the answer below can indent to the question column by an exact amount rather than an intrinsic width that drifts with the font */ width:34px; flex:none; } .acc-t{ font-family:var(--f1); font-weight:500; letter-spacing:-.01em; font-size:clamp(1.02rem, .96rem + .42vw, 1.32rem); line-height:1.32; color:var(--ink); } .acc-q:hover .acc-t{ color:var(--accent-700); } /* accent square toggle, squared off to match every other control */ .acc-i{ position:relative; flex:none; width:34px; height:34px; border-radius:var(--r); background:var(--accent-100); transition:background-color .3s var(--ease), transform .3s var(--ease); } .acc-q:hover .acc-i{ background:var(--accent-600); } .acc-q:hover .acc-i::before,.acc-q:hover .acc-i::after{ background:#fff; } .acc-i::before,.acc-i::after{ content:""; position:absolute; left:50%; top:50%; background:var(--accent-700); transform:translate(-50%,-50%); transition:opacity .3s var(--ease), background-color .3s var(--ease); } .acc-i::before{ width:12px; height:1.6px; } .acc-i::after{ width:1.6px; height:12px; } .acc.is-open .acc-i{ background:var(--accent-600); transform:rotate(90deg); } .acc.is-open .acc-i::before,.acc.is-open .acc-i::after{ background:#fff; } .acc.is-open .acc-i::after{ opacity:0; } .acc-a{ height:0; overflow:hidden; transition:height .38s var(--ease); } /* answer indents to the question column so the [0N] rail stays clean */ .acc-inner{ padding:0 62px clamp(22px,2vw,30px) calc(34px + clamp(14px,1.6vw,28px)); } .acc-inner p{ font-family:var(--f2); font-size:.95rem; line-height:1.8; color:var(--muted); max-width:58ch; } /* ========================================================================== BOOKING ========================================================================== */ .book{ background:var(--bg); } /* Heading sits full width above the two columns, with a hairline rule under it, so the copy and the form start on the same baseline. */ .book-head{ padding-bottom:clamp(20px,1.8vw,28px); border-bottom:1px solid var(--ink); margin-bottom:clamp(34px,3vw,52px); } .book-grid{ display:grid; grid-template-columns:.86fr 1.14fr; gap:clamp(36px,4vw,80px); align-items:start; } .book-lede{ font-family:var(--f2); font-size:clamp(1rem,.96rem + .2vw,1.12rem); line-height:1.6; color:var(--ink-2); max-width:26ch; } /* Map + address under the lede. The left column was carrying one short paragraph against a tall form, so the space was already there; the map uses it to answer the question the form does not - where is this place. */ .book-map:first-child{ margin-top:0; } /* no lede above it: start level with the form */ .book-map{ margin:clamp(26px,2.4vw,36px) 0 0; border:1px solid var(--line); border-radius:var(--r-lg); overflow:hidden; background:var(--surface-2); } .book-map iframe{ display:block; width:100%; height:100%; aspect-ratio:4/3; border:0; /* the stock map is louder than anything else on the page; easing the saturation lets it sit inside the white/green palette rather than fighting it, without touching legibility of the labels */ filter:saturate(.82); } /* Layout only - the button itself is the shared .btn .btn-outline, so it hovers and nudges its arrow exactly like every other button on the page. */ .book-dir{ align-self:flex-start; margin-top:clamp(16px,1.4vw,22px); } /* slab button: dark body + separate accent square carrying the arrow. One element so the whole pair is a single hit target. */ .slab-btn{ display:inline-flex; align-items:stretch; gap:6px; margin-top:clamp(24px,2.2vw,34px); background:none; border:0; padding:0; cursor:pointer; text-decoration:none; } .btn-slab{ display:grid; place-items:center; background:var(--ink); color:#fff; border-radius:var(--r); padding:0 clamp(22px,2vw,30px); min-height:56px; font-family:var(--f2); font-size:.8rem; font-weight:600; letter-spacing:.11em; text-transform:uppercase; transition:background-color .3s var(--ease); } .btn-sq{ display:grid; place-items:center; width:56px; min-height:56px; flex:none; background:var(--accent); color:var(--ink); border-radius:var(--r); transition:background-color .3s var(--ease), transform .3s var(--ease); } .btn-sq svg{ width:20px; height:20px; fill:none; stroke:currentColor; stroke-width:1.9; stroke-linecap:round; stroke-linejoin:round; } .slab-btn:hover .btn-slab{ background:#000; } .slab-btn:hover .btn-sq{ background:var(--accent-600); color:#fff; transform:translateX(3px); } .slab-btn:focus-visible{ outline:2px solid var(--accent-700); outline-offset:3px; border-radius:var(--r); } .slab-btn-block{ display:flex; width:100%; margin-top:clamp(26px,2.4vw,36px); } .slab-btn-block .btn-slab{ flex:1; } /* underline-only fields, no card - the form reads as part of the page */ .field{ margin-bottom:clamp(22px,2vw,30px); } .field label{ display:block; font-family:var(--f2); font-size:.95rem; color:var(--ink); margin-bottom:10px; } .req{ color:var(--muted-2); } .field input,.field select{ width:100%; padding:0 0 12px; border:0; border-bottom:1px solid var(--ink); border-radius:0; background:transparent; color:var(--ink); font-family:var(--f2); font-size:1rem; line-height:1.5; transition:border-color .25s var(--ease); } .field input:focus,.field select:focus{ outline:none; border-bottom-color:var(--accent-600); border-bottom-width:2px; padding-bottom:11px; } .field select{ appearance:none; cursor:pointer; background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%23767B83'%3E%3Cpath d='M7 10l5 5 5-5z'/%3E%3C/svg%3E"); background-repeat:no-repeat; background-position:right 0 top 2px; background-size:20px; padding-right:28px; } .field-row{ display:grid; grid-template-columns:1fr 1fr; gap:clamp(20px,2.2vw,40px); } .err{ font-family:var(--f2); font-size:.79rem; color:var(--accent-700); margin-top:7px; } .field.has-err input,.field.has-err select{ border-bottom-color:var(--accent-700); border-bottom-width:2px; } .form-note{ font-family:var(--f2); font-size:.79rem; line-height:1.65; color:var(--muted); text-align:center; margin-top:14px; } /* honeypot: off-screen rather than display:none, which some bots skip */ .hp{ position:absolute; left:-9999px; width:1px; height:1px; overflow:hidden; } .form-err{ font-family:var(--f2); font-size:.89rem; line-height:1.65; color:var(--danger); text-align:center; margin-top:18px; background:var(--danger-50); border:1px solid var(--danger-100); border-radius:var(--r); padding:14px 16px; } .form-err a{ color:inherit; font-weight:600; } .slab-btn[aria-busy="true"]{ opacity:.65; pointer-events:none; } .form-ok{ font-family:var(--f2); font-size:.89rem; line-height:1.65; color:var(--accent-700); text-align:center; margin-top:18px; background:var(--accent-50); border:1px solid var(--accent-100); border-radius:var(--r); padding:14px 16px; } /* ========================================================================== FINAL CTA - quiet, lots of air ========================================================================== */ .final-cta{ position:relative; isolation:isolate; overflow:hidden; background:var(--surface); border-top:1px solid var(--line); } /* two soft accent orbs drifting across the band, opposite directions. Purely decorative: they sit behind the content and stop entirely for anyone who asks for reduced motion. */ .orb{ position:absolute; z-index:-1; border-radius:50%; pointer-events:none; background:var(--accent-100); opacity:.55; filter:blur(42px); will-change:transform; } .orb-a{ width:clamp(180px,22vw,320px); aspect-ratio:1; top:8%; left:-12%; animation:orb-right 26s var(--ease-soft) infinite alternate; } .orb-b{ width:clamp(150px,18vw,260px); aspect-ratio:1; bottom:6%; right:-10%; background:var(--accent-50); opacity:.9; animation:orb-left 32s var(--ease-soft) infinite alternate; } @keyframes orb-right{ from{ transform:translateX(0); } to{ transform:translateX(96vw); } } @keyframes orb-left{ from{ transform:translateX(0); } to{ transform:translateX(-92vw); } } @media (prefers-reduced-motion: reduce){ .orb{ animation:none; } } .final-inner{ text-align:center; padding:clamp(84px,7vw,148px) 0; } .final-inner h2{ max-width:17ch; margin-inline:auto; } .final-inner p{ margin:22px auto 0; font-family:var(--f2); font-size:clamp(.98rem,.95rem + .18vw,1.06rem); line-height:1.75; color:var(--muted); max-width:48ch; } .final-actions{ display:flex; flex-wrap:wrap; justify-content:center; gap:12px; margin-top:40px; } /* ========================================================================== FOOTER - white theme, brand left / get in touch right, credit bar below ========================================================================== */ .site-footer{ background:var(--bg); border-top:1px solid var(--line); font-family:var(--f2); color:var(--muted); } .foot-grid{ /* the contact column shrinks to its own content (auto) so it sits hard against the right edge instead of floating mid-section */ display:grid; grid-template-columns:minmax(0,1fr) var(--foot-right); gap:clamp(40px,6vw,110px); padding:clamp(56px,4.6vw,84px) var(--pad) clamp(40px,3.4vw,56px); align-items:start; } /* logo matches the header logo exactly (36px, no plate behind it) */ /* same token as the header logo, so the two always match at every breakpoint */ .foot-brand img{ height:var(--logo-h); width:auto; object-fit:contain; margin-bottom:22px; } .foot-brand p{ font-size:.93rem; line-height:1.75; color:var(--muted); max-width:38ch; } /* Icon rows: icon at the start of each line, text left aligned beside it, so the icon and the first character of every line share one left edge. The credit line in .foot-base below stays flush right against the content edge. */ .foot-contact{ text-align:left; } .foot-contact h3{ font-family:var(--f2); font-size:.72rem; font-weight:600; letter-spacing:.17em; text-transform:uppercase; color:var(--accent-600); margin-bottom:22px; } .foot-rows{ display:grid; gap:18px; } .foot-row{ display:grid; grid-template-columns:auto minmax(0,1fr); gap:13px; align-items:start; } /* tinted square, same 3px radius as every other box on the page */ .foot-ico{ display:grid; place-items:center; width:34px; height:34px; flex:none; border-radius:var(--r); background:var(--accent-50); color:var(--accent-600); font-size:17px; margin-top:2px; } .foot-phone{ align-self:center; font-family:var(--f1); font-weight:700; font-size:1.12rem; letter-spacing:-.01em; color:var(--ink); padding-block:7px; /* 44px tap target */ transition:color .25s var(--ease); } .foot-phone:hover{ color:var(--accent); } .foot-addr{ font-style:normal; font-size:.93rem; line-height:1.7; color:var(--muted); /* the line breaks are set in the markup now, so no ch cap here - a cap narrower than the longest line would just re-wrap it anyway */ } /* the whole address is the link into Maps, so it stays muted body text and only picks up the accent on hover - a green block of address would read as a heading rather than as running contact detail */ .foot-addr a{ color:inherit; text-decoration:none; transition:color .25s var(--ease); } .foot-addr a:hover{ color:var(--accent-600); } .foot-contact p{ font-size:.93rem; line-height:1.7; color:var(--muted); align-self:center; } .foot-base{ /* same tracks as .foot-grid above, so the credit starts exactly where the "Get in touch" column starts instead of floating on its own text width */ display:grid; grid-template-columns:minmax(0,1fr) var(--foot-right); align-items:center; gap:10px 24px; padding:24px var(--pad) 30px; border-top:1px solid var(--line); font-size:.84rem; color:var(--muted-2); } /* Right column: left aligned, so the credit starts on the same vertical guide as "Get in touch" and the icon column above it. Both rows already share the same grid tracks (--foot-right), so this is the only thing that decided whether the credit sat on that guide or floated to the far edge. */ .foot-base > :last-child{ text-align:left; } .foot-base .pc{ color:var(--accent-600); font-weight:600; text-decoration:none; border-bottom:1px solid transparent; transition:color .25s var(--ease), border-color .25s var(--ease); } .foot-base .pc:hover{ color:var(--accent-700); border-bottom-color:var(--accent-700); } .foot-base .pc:focus-visible{ outline:2px solid var(--accent-700); outline-offset:3px; } /* ========================================================================== FLOATING CALL + WHATSAPP (sticky on every section) ========================================================================== */ /* one in each bottom corner: WhatsApp left, call right */ .fab{ position:fixed; z-index:98; bottom:clamp(18px,2vw,28px); display:grid; place-items:center; width:52px; height:52px; border-radius:50%; background:var(--accent-600); color:#fff; font-size:23px; box-shadow:0 8px 22px rgba(17,18,20,.20); transition:background .25s var(--ease), transform .25s var(--ease), box-shadow .25s var(--ease); /* the idle bob uses the standalone `translate` property so it composes with the hover `transform` instead of one cancelling the other */ animation:fab-bob 3.6s ease-in-out infinite; } .fab-wa{ left:clamp(16px,1.6vw,26px); } .fab-call{ right:clamp(16px,1.6vw,26px); animation-delay:.9s; } /* slow halo radiating out of each button */ .fab::after{ content:""; position:absolute; inset:0; border-radius:50%; border:2px solid var(--accent-600); pointer-events:none; animation:fab-ring 3s var(--ease-soft) infinite; } .fab-call::after{ animation-delay:1.5s; } .fab:hover{ background:var(--accent-700); transform:scale(1.07); box-shadow:0 12px 28px rgba(17,18,20,.26); } @keyframes fab-bob{ 0%,100%{ translate:0 0; } 50%{ translate:0 -6px; } } @keyframes fab-ring{ 0%{ transform:scale(1); opacity:.55; } 70%{ transform:scale(1.65); opacity:0; } 100%{ transform:scale(1.65); opacity:0; } } @media (prefers-reduced-motion: reduce){ .fab{ animation:none; translate:0 0; } .fab::after{ animation:none; opacity:0; } } /* ========================================================================== MOBILE STICKY BAR ========================================================================== */ .mobile-bar{ display:none; position:fixed; left:0; right:0; bottom:0; z-index:99; gap:10px; padding:12px 16px calc(12px + env(safe-area-inset-bottom)); background:rgba(255,255,255,.95); backdrop-filter:blur(12px); border-top:1px solid var(--line); } /* min-width:0 lets the two buttons shrink below their min-content width, otherwise the bar forces a horizontal scrollbar on 320px screens */ .mobile-bar .btn{ flex:1 1 0; min-width:0; } .why-item.reveal{ transform:translateY(30px); } /* ========================================================================== REVEAL ANIMATION ========================================================================== */ .reveal{ opacity:0; transform:translateY(20px); transition:opacity .7s var(--ease), transform .7s var(--ease); } .reveal.is-in{ opacity:1; transform:none; } .reveal-1{ transition-delay:.08s; } .reveal-2{ transition-delay:.16s; } .reveal-3{ transition-delay:.24s; } /* ========================================================================== RESPONSIVE ========================================================================== */ /* ---- >= 1101px : the two booking columns sit side by side ---- The left column was running 177px taller than the form, because a fixed 4:3 map has no idea how tall the thing beside it is. Stretching the row and letting the map take up the slack means the columns end level at any width, and stay level if the form ever gains or loses a field. */ @media (min-width:1101px){ .book-grid{ align-items:stretch; } .book-copy{ display:flex; flex-direction:column; } .book-map{ flex:1 1 auto; min-height:240px; } .book-map iframe{ aspect-ratio:auto; } /* Land the map button on the same line as the form's submit button. The form carries a tail below its own button - 14px of margin plus one 21px line of .form-note - so the left column reserves the same 35px under a button of matching height. Equal heights and equal tails means the two line up top and bottom. Recheck this if .form-note ever grows to two lines at this width. */ .book-copy{ padding-bottom:35px; } .book-dir{ min-height:56px; } } /* ---- <= 1100px ---- */ @media (max-width:1100px){ /* below this the two booking columns are too narrow for the form and would break the locality line onto two rows */ .book-grid{ grid-template-columns:1fr; gap:48px; } /* stacked, the map spans the whole column, where its 4:3 crop stands 776px tall and buries the form. A landscape strip with a hard ceiling keeps it to a glance at the location, which is all it is there to be. */ .book-map iframe{ aspect-ratio:16/9; max-height:340px; } } /* ---- <= 960px : tablet ---- */ @media (max-width:960px){ :root{ --pad:22px; } /* the label rail moves above the list, rows stay image-then-text */ .why-grid{ grid-template-columns:1fr; gap:26px; } .why-rail{ position:static; } .why-item{ grid-template-columns:1.1fr .9fr; gap:26px; } .prob-grid,.faq-grid,.how-grid{ grid-template-columns:1fr; } .prob-grid{ gap:60px; } .prob-media{ max-width:500px; margin-inline:auto; width:100%; } .prob-badge{ right:0; bottom:-22px; } .faq-aside{ position:static; } /* narrow rows read better with the answer running full width */ .acc-inner{ padding-left:0; padding-right:0; } .how-copy h2{ max-width:100%; } .how-media{ max-width:520px; margin-inline:auto; width:100%; } } /* ---- <= 940px : banner sits behind the copy ---- */ @media (max-width:940px){ /* The source is 16:9, so in a portrait box object-fit:cover can only crop horizontally: the full frame height always maps to the hero height and the faces land around 25-40% of it. So the photo is exposed at the TOP, where those faces are, and the copy sits underneath on a solid field. Anchoring the copy to the bottom lets the exposed band size itself. */ .hero-img{ object-position:66% center; } .hero-scrim{ /* stop positions are set by measurement: the veil reaches .95 just above the h1 so the green "Overdue" clears 3:1 against the darkest pixels of the photo at every width, and no earlier, to keep the face uncovered */ background:linear-gradient(180deg, rgba(255,255,255,.10) 0%, rgba(255,255,255,.20) 26%, rgba(255,255,255,.50) 36%, rgba(255,255,255,.95) 45%, rgba(255,255,255,.985) 51%, rgba(255,255,255,.99) 100%); } .hero-inner{ min-height:min(92vh, 700px); align-items:flex-end; padding-block:calc(var(--header-h) + 16px) clamp(36px,6vw,52px); } .hero-copy{ max-width:100%; } .hero-copy .lede{ max-width:56ch; } } /* ---- <= 720px ---- */ @media (max-width:720px){ /* every tappable control clears the 44px minimum on touch screens */ .btn{ min-height:44px; } .brand{ display:inline-flex; align-items:center; min-height:44px; } .foot-base .pc{ display:inline-block; padding-block:12px; } /* the rail label is the only heading this section has, and once the rail unsticks and sits above the list it has the full width to work with, so it steps up to section-heading scale instead of staying a small kicker */ .why-label{ font-size:clamp(1.75rem,1.5rem + 1.2vw,2rem); } .why-dot{ width:13px; height:13px; } /* rows stack: image on top, copy beneath */ .why-item{ grid-template-columns:1fr; gap:20px; } .why-media{ aspect-ratio:16/10; } .why-desc{ max-width:56ch; } .tcard-wide{ flex-direction:column; align-items:flex-start; } .tcard-wide .btn{ width:100%; } .final-inner h2{ max-width:100%; } .final-actions .btn{ flex:1 1 100%; } .foot-grid{ grid-template-columns:1fr; row-gap:44px; } /* the first line of the address is wider than a phone column, so the hard breaks would each pick up a ragged second line. Drop them and let it wrap on its own here. */ .foot-addr br{ display:none; } .foot-base{ grid-template-columns:1fr; justify-items:start; } } /* ---- <= 720px : phone hero ---- The copy is centred and set large here, which needs more room than the white top band of the portrait photo can give (measured: it would run to 49% of the frame, and the faces start at 47%). So the hero is a plain stack on phones - white space under the floating header, the copy on white, then the photo - and the photo is cropped square and anchored low, which drops the empty window above the subjects and keeps both faces centred at every width. The two hero buttons are dropped; the sticky bar already carries both. */ @media (max-width:720px){ .hero{ display:flex; flex-direction:column; background:var(--bg); margin-top:calc(-1 * var(--header-h)); } /* the wrappers collapse so .hero-text and .hero-img are siblings in the stack */ .hero-inner{ display:contents; } .hero-copy{ display:contents; } /* nothing sits over the photo any more */ .hero-scrim{ display:none; } .hero-cta{ display:none; } .hero-text{ display:block; order:1; text-align:center; padding:calc(var(--header-h) + 44px) var(--pad) 30px; } .hero-text h1{ font-size:clamp(2.05rem,1.6rem + 2.2vw,2.5rem); } .hero-copy .lede{ margin:16px auto 0; font-size:.98rem; line-height:1.65; max-width:34ch; } /* The top row of the crop is ~245 grey, not #fff, so butting it straight against the white copy above leaves a hard seam.