/* Design system recovered from the approved preview build (jj-blessing-care.vercel.app). Chriss has already seen and signed off on this look — do not diverge from it without asking. */ :root{ /* Sampled from the operator's own "收费配套 / Care Packages" poster, which is the truest statement of their brand we have. Every tone on it sits at hue 340-346; the headline and price badges are #C80040 at FULL saturation. The previous palette used the same hue at a third of the chroma, which is why it read dusty and brown rather than pink. */ --pink-50:#FFF5F9; --pink-100:#FCE4F0; --pink-200:#FCCCD8; --pink-300:#FCA8C0; --red:#C80040; --red-dk:#A30034; --red-lt:#F06084; --ink:#2A1620; --body:#5C4450; --line:#F6DDE6; --cream:#FFFDFE; --white:#fff; /* the poster has no dark, so the dark bands take the brand hue at depth rather than the browned plum they used to be */ --dark:#5E0A2B; --dark-2:#75102F; --dark-3:#8E1739; --on-dark:#FCE4F0; --on-dark-muted:#F0BDD0; --shadow:0 1px 2px rgba(42,22,32,.05),0 10px 34px rgba(42,22,32,.07); --shadow-lg:0 2px 6px rgba(42,22,32,.06),0 26px 60px rgba(42,22,32,.12); --r:18px; --r-sm:12px; --font:'Plus Jakarta Sans',-apple-system,BlinkMacSystemFont,'Segoe UI',sans-serif; --cjk:'PingFang SC','Hiragino Sans GB','Microsoft YaHei','Noto Sans CJK SC','Noto Sans SC',sans-serif; } *{box-sizing:border-box} html{scroll-behavior:smooth;-webkit-text-size-adjust:100%} body{margin:0;font-family:var(--font);font-size:17px;line-height:1.7;color:var(--body);background:var(--cream);-webkit-font-smoothing:antialiased} h1,h2,h3,h4{font-family:var(--font);color:var(--ink);line-height:1.22;margin:0;letter-spacing:-.02em;font-weight:800} h1{font-size:clamp(30px,5.2vw,50px)} h2{font-size:clamp(25px,3.7vw,37px)} h3{font-size:clamp(19px,2.2vw,22px);font-weight:700} p{margin:0 0 1em} a{color:var(--red);text-decoration:none} img{max-width:100%;display:block} .wrap{max-width:1130px;margin:0 auto;padding:0 22px} .zh{font-family:var(--cjk)} :lang(zh) body,html[lang="zh"] body{font-family:var(--cjk)} /* ---------- top bar ---------- */ .topbar{background:var(--dark);color:var(--on-dark);font-size:13.5px} .topbar .wrap{display:flex;align-items:center;justify-content:space-between;gap:14px;min-height:42px;flex-wrap:wrap;padding-top:6px;padding-bottom:6px} .topbar a{color:#EFE6E9} .topbar .tb-left{display:flex;align-items:center;gap:16px;flex-wrap:wrap} .tb-item{display:inline-flex;align-items:center;gap:6px;white-space:nowrap} .tb-item svg{width:14px;height:14px;flex:none;opacity:.85} .langs{display:inline-flex;background:rgba(255,255,255,.11);border-radius:999px;padding:3px} .langs button{border:0;background:none;color:#DCD0D5;font:inherit;font-size:12.5px;font-weight:600;padding:4px 11px;border-radius:999px;cursor:pointer;letter-spacing:.01em} .langs button.on{background:var(--red);color:#fff} /* ---------- header ---------- */ header{position:sticky;top:0;z-index:60;background:rgba(255,252,250,.93);backdrop-filter:saturate(1.6) blur(12px);border-bottom:1px solid var(--line)} header .wrap{display:flex;align-items:center;gap:18px;min-height:84px} .brand{display:flex;align-items:center;gap:12px;flex:none} .brand .mark{width:62px;height:62px;flex:none;border-radius:12px;box-shadow:0 3px 12px rgba(158,74,99,.16)} .brand b{display:block;font-size:16.5px;font-weight:800;color:var(--ink);letter-spacing:-.02em;line-height:1.15} .brand small{display:block;font-size:12.5px;color:var(--red);font-weight:600;font-family:var(--cjk);letter-spacing:.04em} nav.main{margin-left:auto;display:flex;align-items:center;gap:5px} nav.main a{color:var(--body);font-size:14.5px;font-weight:600;padding:9px 13px;border-radius:9px} nav.main a:hover{color:var(--red);background:var(--pink-50)} .btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;border:0;cursor:pointer;font:inherit;font-weight:700;font-size:15px;padding:13px 24px;border-radius:999px;transition:transform .16s ease,box-shadow .16s ease,background .16s ease;text-align:center} .btn svg{width:17px;height:17px;flex:none} .btn-wa{background:#25D366;color:#0B3D22;box-shadow:0 6px 18px rgba(37,211,102,.32)} .btn-wa:hover{transform:translateY(-2px);box-shadow:0 10px 26px rgba(37,211,102,.4)} .btn-red{background:var(--red);color:#fff;box-shadow:0 6px 18px rgba(158,74,99,.28)} .btn-red:hover{transform:translateY(-2px);box-shadow:0 10px 26px rgba(158,74,99,.36)} .btn-ghost{background:#fff;color:var(--ink);border:1.5px solid var(--pink-200)} .btn-ghost:hover{border-color:var(--red);color:var(--red)} .btn-sm{padding:10px 18px;font-size:14px} .menu-btn{display:none;margin-left:auto;background:none;border:1.5px solid var(--pink-200);border-radius:10px;width:44px;height:44px;cursor:pointer;align-items:center;justify-content:center} .menu-btn svg{width:20px;height:20px;color:var(--ink)} /* ---------- hero ---------- */ .hero{position:relative;overflow:hidden;background:var(--pink-100)} .hero-inner{position:relative;padding:96px 0 104px;max-width:700px} .eyebrow{display:inline-flex;align-items:center;gap:9px;background:rgba(255,255,255,.14);border:1px solid rgba(255,255,255,.26);color:#FFE7EC;font-size:13px;font-weight:700;letter-spacing:.09em;text-transform:uppercase;padding:8px 16px;border-radius:999px;margin-bottom:22px} .eyebrow i{width:7px;height:7px;border-radius:50%;background:#7CE29B;display:block} .hero h1{color:#fff;margin-bottom:20px;text-shadow:0 2px 30px rgba(0,0,0,.3)} .hero .lede{color:#F5DFE4;font-size:clamp(16.5px,2vw,19.5px);max-width:590px;margin-bottom:30px} .hero-cta{display:flex;gap:13px;flex-wrap:wrap;margin-bottom:34px} .chips{display:flex;gap:9px;flex-wrap:wrap} .chip{display:inline-flex;align-items:center;gap:8px;background:rgba(255,255,255,.13);border:1px solid rgba(255,255,255,.24);color:#FFF0F3;font-size:13.5px;font-weight:600;padding:9px 15px;border-radius:11px;backdrop-filter:blur(4px)} .chip svg{width:15px;height:15px;flex:none;color:#FFC9D3} /* ---------- trust strip ---------- */ .trust{background:var(--white);border-bottom:1px solid var(--line)} .trust-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:0} .trust-item{padding:30px 24px;text-align:center;border-right:1px solid var(--line)} .trust-item:last-child{border-right:0} .trust-item .num{font-size:27px;font-weight:800;color:var(--red);line-height:1.1;letter-spacing:-.03em} .trust-item .num.word{font-size:18px;letter-spacing:-.01em;padding-top:5px} .trust-item .lbl{font-size:14px;font-weight:700;color:var(--ink);margin-top:7px} .trust-item .sub{font-size:12.8px;color:#7A6B72;margin-top:3px;line-height:1.5} /* ---------- sections ---------- */ section{padding:88px 0} .sec-head{max-width:660px;margin-bottom:46px} .sec-head.center{margin-left:auto;margin-right:auto;text-align:center} .kicker{display:inline-block;font-size:12.5px;font-weight:800;letter-spacing:.13em;text-transform:uppercase;color:var(--red);margin-bottom:14px} .sec-head p{margin-top:15px;font-size:17.5px} .alt{background:var(--pink-50)} /* about */ .about-grid{display:grid;grid-template-columns:1.05fr .95fr;gap:56px;align-items:start} .factcard{background:#fff;border:1px solid var(--line);border-radius:var(--r);padding:8px 26px;box-shadow:var(--shadow)} .factrow{display:flex;gap:16px;padding:19px 0;border-bottom:1px solid var(--line)} .factrow:last-child{border-bottom:0} .factrow .ic{width:38px;height:38px;flex:none;border-radius:11px;background:var(--pink-100);color:var(--red);display:grid;place-items:center} .factrow .ic svg{width:19px;height:19px} .factrow .k{font-size:13px;font-weight:700;letter-spacing:.05em;text-transform:uppercase;color:#7A6B72} .factrow .v{font-size:15.5px;color:var(--ink);font-weight:600;line-height:1.5;margin-top:2px} .pills{display:flex;flex-wrap:wrap;gap:9px;margin-top:22px} .pill{background:#fff;border:1px solid var(--pink-200);color:var(--ink);font-size:14px;font-weight:600;padding:8px 15px;border-radius:999px} /* services */ .svc-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:22px} .svc{--svc-pad:28px;background:#fff;border:1px solid var(--line);border-radius:var(--r);padding:30px var(--svc-pad);box-shadow:var(--shadow);transition:transform .2s ease,box-shadow .2s ease} .svc:hover{transform:translateY(-4px);box-shadow:var(--shadow-lg)} .svc .ic{width:52px;height:52px;border-radius:15px;display:grid;place-items:center;margin-bottom:19px;background:var(--pink-100);color:var(--red)} .svc .ic svg{width:25px;height:25px} .svc h3{margin-bottom:9px} .svc p{font-size:15.2px;margin:0} .svc-list{list-style:none;margin:0;padding:0} .svc-list li{position:relative;padding:5px 0 5px 20px;font-size:14.6px;line-height:1.55;color:var(--body)} .svc-list li::before{content:"";position:absolute;left:2px;top:13px;width:6px;height:6px;border-radius:50%;background:var(--red-lt)} .note{margin-top:26px;background:#fff;border:1px dashed var(--pink-300);border-radius:14px;padding:18px 22px;font-size:15px;color:var(--ink)} .note b{color:var(--red)} /* branches */ .fac-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:13px} .fac{display:flex;align-items:flex-start;gap:11px;background:#fff;border:1px solid var(--line);border-radius:13px;padding:16px 18px;font-size:14.8px;font-weight:600;color:var(--ink);line-height:1.5;box-shadow:var(--shadow)} .fac svg{width:16px;height:16px;flex:none;margin-top:3px;color:var(--red-lt)} .branches{background:linear-gradient(168deg,var(--dark) 0%,var(--dark-2) 58%,var(--dark-3) 100%);color:var(--on-dark)} .branches h2,.branches h3{color:#fff} .branches .sec-head p{color:#DACBD1} .branches .kicker{color:#E4AEBD} .br-grid{display:grid;grid-template-columns:1fr 1fr;gap:26px} .br{background:rgba(255,255,255,.055);border:1px solid rgba(255,255,255,.14);border-radius:22px;overflow:hidden;display:flex;flex-direction:column} .br-photo{position:relative;aspect-ratio:1200/700;overflow:hidden;background:#463C42} .br-photo img{width:100%;height:100%;object-fit:cover} .br-badge{position:absolute;top:14px;left:14px;background:rgba(255,255,255,.94);color:var(--ink);font-size:12.5px;font-weight:800;letter-spacing:.06em;text-transform:uppercase;padding:6px 13px;border-radius:8px} .br-rating{position:absolute;top:14px;right:14px;background:rgba(46,38,41,.82);border:1px solid rgba(255,255,255,.22);color:#FFD9A0;font-size:13px;font-weight:700;padding:6px 12px;border-radius:8px;display:inline-flex;align-items:center;gap:6px} .br-body{padding:26px 26px 28px;display:flex;flex-direction:column;flex:1} .br-body h3{margin-bottom:5px} .br-cn{font-family:var(--cjk);font-size:14px;color:#E4AEBD;font-weight:600;margin-bottom:16px} .br-meta{list-style:none;margin:0 0 20px;padding:0;font-size:14.8px;line-height:1.6} .br-meta li{display:flex;gap:11px;padding:8px 0;border-bottom:1px solid rgba(255,255,255,.09);color:#E2D6DA} .br-meta li:last-child{border-bottom:0} .br-meta svg{width:16px;height:16px;flex:none;margin-top:4px;color:#D5A3B1} .br-meta a{color:#F0DDE3;text-decoration:underline;text-underline-offset:3px} .br-actions{display:flex;gap:10px;flex-wrap:wrap;margin-top:auto} .br .btn-ghost{background:transparent;color:#fff;border-color:rgba(255,255,255,.35)} .br .btn-ghost:hover{border-color:#fff;color:#fff;background:rgba(255,255,255,.08)} .map-embed{border:0;width:100%;height:230px;display:block;filter:saturate(.92)} /* rates */ .rate-card{background:#fff;border:1px solid var(--line);border-radius:24px;box-shadow:var(--shadow-lg);padding:52px 44px;text-align:center;max-width:760px;margin:0 auto} .rate-card .big{font-size:clamp(26px,3.6vw,34px);font-weight:800;color:var(--ink);letter-spacing:-.02em;margin-bottom:14px} .rate-card p{font-size:16.5px;max-width:520px;margin:0 auto 26px} /* reviews */ .rev-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:24px} .rev{background:#fff;border:1px solid var(--line);border-radius:var(--r);padding:30px 30px 26px;box-shadow:var(--shadow)} .rev .stars{color:#F5A524;font-size:17px;letter-spacing:2px} .rev .score{display:flex;align-items:baseline;gap:10px;margin:12px 0 4px} .rev .score b{font-size:33px;font-weight:800;color:var(--ink);letter-spacing:-.03em} .rev .score span{font-size:14.5px;color:#9E9096;font-weight:600} .rev h3{font-size:17px;margin:16px 0 10px} .rev ul{list-style:none;margin:0;padding:0} .rev ul li{position:relative;padding:6px 0 6px 25px;font-size:15.2px;line-height:1.6} .rev ul li::before{content:"";position:absolute;left:2px;top:15px;width:8px;height:8px;border-radius:50%;background:var(--pink-300)} .src{font-size:12.8px;color:#9E9096;margin-top:18px;padding-top:15px;border-top:1px solid var(--line)} .src a{text-decoration:underline;text-underline-offset:3px} /* gallery */ .gal{display:grid;grid-template-columns:repeat(3,1fr);gap:16px} .gal figure{margin:0;border-radius:15px;overflow:hidden;position:relative;aspect-ratio:9/7;background:var(--pink-100);box-shadow:var(--shadow)} .gal img{width:100%;height:100%;object-fit:cover;transition:transform .5s cubic-bezier(.2,.7,.3,1)} .gal figure:hover img{transform:scale(1.05)} .gal figcaption{position:absolute;left:0;right:0;bottom:0;padding:26px 16px 13px;font-size:13.5px;font-weight:600;color:#fff;background:linear-gradient(transparent,rgba(34,27,30,.82))} .gal .ask{display:grid;place-items:center;text-align:center;padding:22px;background:var(--pink-100);border:1.5px dashed var(--pink-300);color:var(--red);font-size:14.5px;font-weight:700;line-height:1.55} /* contact */ .ct-grid{display:grid;grid-template-columns:1fr 1fr;gap:46px;align-items:start} form{background:#fff;border:1px solid var(--line);border-radius:22px;padding:34px;box-shadow:var(--shadow-lg)} label{display:block;font-size:13.5px;font-weight:700;color:var(--ink);margin:0 0 7px;letter-spacing:.01em} input,select,textarea{width:100%;font:inherit;font-size:15.5px;color:var(--ink);background:var(--pink-50);border:1.5px solid var(--line);border-radius:12px;padding:13px 15px;margin-bottom:17px;transition:border-color .16s ease,background .16s ease} input:focus,select:focus,textarea:focus{outline:0;border-color:var(--red-lt);background:#fff} textarea{min-height:112px;resize:vertical} form .btn{width:100%} .form-note{font-size:12.8px;color:#9E9096;text-align:center;margin:14px 0 0} .ct-list{list-style:none;margin:0;padding:0} .ct-list li{display:flex;gap:16px;padding:20px 0;border-bottom:1px solid var(--line)} .ct-list li:last-child{border-bottom:0} .ct-list .ic{width:44px;height:44px;flex:none;border-radius:13px;background:var(--pink-100);color:var(--red);display:grid;place-items:center} .ct-list .ic svg{width:20px;height:20px} .ct-list .k{font-size:12.6px;font-weight:800;letter-spacing:.08em;text-transform:uppercase;color:#7A6B72} .ct-list .v{font-size:16px;color:var(--ink);font-weight:600;line-height:1.55;margin-top:3px} .ct-list .v a{color:var(--ink)} .ct-list .v a:hover{color:var(--red)} /* footer */ footer{background:var(--dark);color:var(--on-dark-muted);padding:62px 0 0;font-size:14.8px} .ft-grid{display:grid;grid-template-columns:1.5fr 1fr 1fr;gap:44px;padding-bottom:44px} footer h4{color:#fff;font-size:14px;letter-spacing:.1em;text-transform:uppercase;margin-bottom:18px;font-weight:800} footer a{color:var(--on-dark-muted)} footer a:hover{color:#fff} .ft-brand{display:flex;align-items:center;gap:13px;margin-bottom:18px} .ft-brand .mark{width:64px;height:64px;border-radius:12px;flex:none;background:#fff} .ft-brand b{color:#fff;font-size:17px;display:block;font-weight:800} .ft-brand small{color:#DFB1BE;font-family:var(--cjk);font-size:13px;letter-spacing:.04em} .ft-links{list-style:none;margin:0;padding:0;line-height:2.15} .ft-bot{border-top:1px solid rgba(255,255,255,.11);padding:22px 0 26px;font-size:13px;color:#9A8D93;display:flex;justify-content:space-between;gap:16px;flex-wrap:wrap} .preview-note{background:rgba(255,255,255,.05);border:1px dashed rgba(255,255,255,.2);border-radius:12px;padding:14px 18px;font-size:12.8px;color:#B3A6AC;margin-bottom:22px;line-height:1.6} /* floating wa */ .fab{position:fixed;right:20px;bottom:20px;z-index:90;width:60px;height:60px;border-radius:50%;background:#25D366;display:grid;place-items:center;box-shadow:0 10px 30px rgba(37,211,102,.44);transition:transform .2s ease} .fab:hover{transform:scale(1.08)} .fab svg{width:31px;height:31px;color:#fff} /* reveal */ .js .rv{opacity:0;transform:translateY(22px);transition:opacity .7s cubic-bezier(.2,.7,.3,1),transform .7s cubic-bezier(.2,.7,.3,1)} .js .rv.in{opacity:1;transform:none} @media(max-width:960px){ .about-grid,.ct-grid{grid-template-columns:1fr;gap:38px} .svc-grid{grid-template-columns:repeat(2,1fr)} .fac-grid{grid-template-columns:repeat(2,1fr)} .br-grid,.rev-grid{grid-template-columns:1fr} .trust-grid{grid-template-columns:1fr 1fr} .trust-item:nth-child(2){border-right:0} .trust-item:nth-child(1),.trust-item:nth-child(2){border-bottom:1px solid var(--line)} .ft-grid{grid-template-columns:1fr 1fr} } @media(max-width:720px){ body{font-size:16.5px} nav.main{display:none} .menu-btn{display:flex} header .wrap{min-height:68px;gap:10px} /* the brand must be allowed to shrink, or the wordmark overflows past the burger */ .brand{min-width:0;flex:1 1 auto} .brand span{min-width:0} .brand b{font-size:15px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap} .brand small{font-size:11.5px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap} .brand .mark{width:50px;height:50px;border-radius:11px} .wrap{padding:0 18px} .topbar .wrap{gap:8px} .topbar{font-size:12.5px} .trust-item{padding:22px 12px} .trust-item .num{font-size:24px} .trust-item .num.word{font-size:16px} .trust-item .lbl{font-size:13px} .trust-item .sub{font-size:12px} .eyebrow{font-size:11.5px;letter-spacing:.06em;padding:7px 13px} .chip{font-size:12.5px;padding:8px 12px} .sec-head{margin-bottom:32px} .sec-head p{font-size:16px} .br-body{padding:22px 20px 24px} .map-embed{height:190px} .ct-list .v{font-size:15px} /* keep the floating WhatsApp button clear of the last section's content */ footer{padding-bottom:76px} nav.main.open{display:flex;position:absolute;top:100%;left:0;right:0;background:#fff;flex-direction:column;align-items:stretch;padding:12px;gap:2px;border-bottom:1px solid var(--line);box-shadow:0 18px 40px rgba(51,42,45,.11)} nav.main.open a{padding:13px 15px;font-size:16px} nav.main.open .btn{margin-top:8px} section{padding:62px 0} .hero-inner{padding:66px 0 70px} .hero-cta .btn{flex:1 1 100%} .svc-grid,.gal,.fac-grid{grid-template-columns:1fr} .gal figure{aspect-ratio:16/11} .rate-card{padding:36px 24px} form{padding:26px 22px} .ft-grid{grid-template-columns:1fr;gap:32px} .topbar .tb-left .tb-item.hide-s{display:none} .fab{width:56px;height:56px;right:15px;bottom:15px} } @media(max-width:380px){ .brand b{font-size:14px} .brand .mark{width:46px;height:46px} h1{font-size:27px} .trust-item .num{font-size:22px} .trust-item .num.word{font-size:15px} .btn{padding:13px 18px;font-size:14.5px} .langs button{padding:4px 9px;font-size:12px} } /* ══════════════════════════════════════════════════════════════════════════ MULTI-PAGE BUILD — everything above this line is the approved preview's own design system and is not modified. Below are only the blocks a silo needs that a one-page site did not, written once, using the tokens above. Rewritten 2026-09-29 after a layout audit: the previous version of this section was authored twice and the second copy silently overrode the first, losing main's bottom padding, flattening the CTA gradient and splitting .branchcard from .branchfull. ══════════════════════════════════════════════════════════════════════════ */ /* ── Layout shell ───────────────────────────────────────────────────────── */ main .wrap{max-width:1180px;margin:0 auto;padding:0 22px} main{padding-bottom:clamp(48px,6vw,72px)} /* One fluid rhythm unit, and two deliberate departures from it, so the page has a beat instead of one repeated gap. */ .sec{padding:clamp(48px,6.5vw,88px) 0} .sec.alt{background:var(--pink-50)} .sec--tight{padding:clamp(24px,3vw,40px) 0} main > section:not([class]){padding:clamp(48px,6.5vw,88px) 0} /* ── Nav: the burger has to appear when the nav stops fitting, not at 720px. Eight CJK/English items plus the WhatsApp pill need ~1193px; below that the nav was overflowing and dragging every page sideways. ─────────────────── */ nav.main a{white-space:nowrap} @media (max-width:1200px){ nav.main{display:none} .menu-btn{display:flex} nav.main.open{display:flex;position:absolute;top:100%;left:0;right:0;background:#fff; flex-direction:column;align-items:stretch;padding:12px;gap:4px; border-bottom:1px solid var(--line);box-shadow:0 18px 40px rgba(51,42,45,.11)} nav.main.open a{padding:12px 16px;font-size:16px} nav.main.open .btn{margin-top:8px} } /* ── Hero background. Every hero puts white type on this gradient: .hero--split shows its photograph BESIDE the text rather than behind it, so the type never sits on an image and needs no overlay. A page with no photograph gets the same gradient, so it can never fall back to white text on pale pink. ───── */ .hero{background:linear-gradient(168deg,var(--dark) 0%,var(--dark-2) 58%,var(--dark-3) 100%)} /* ── Measure. One container, two scripts: 72ch suits Latin, but the same box holds ~63 Han characters, which reads like a 140-character Latin line. ── */ main p,.faq details p,.branchfull li{max-width:72ch} html[lang^="zh"] main p,html[lang^="zh"] .faq details p{max-width:36em} .sec-head p{max-width:none} /* ── Quick links ────────────────────────────────────────────────────────── */ nav.quick{display:flex;gap:8px;flex-wrap:wrap;margin:0;padding:clamp(20px,2.4vw,28px) 0 0} nav.quick a{font-size:14px;padding:8px 14px;border:1px solid var(--line);border-radius:999px; text-decoration:none;color:var(--red);background:#fff;white-space:nowrap} nav.quick a:hover{background:var(--pink-50)} nav.quick a[aria-current="page"]{background:var(--red);color:#fff;border-color:var(--red)} /* ── Trust band. Always exactly four items, so auto-fit was fitting a fifth empty track and pushing the set off-centre. The inherited .trust-item divider was drawn for a gap:0 grid. ──────────────────────────────────── */ .trustband{display:grid;grid-template-columns:repeat(4,1fr);gap:16px; background:#fff;border:1px solid var(--line);border-radius:var(--r); padding:clamp(24px,3vw,32px);box-shadow:var(--shadow);text-align:center} .trustband .trust-item{border-right:0;padding:0} @media (max-width:860px){.trustband{grid-template-columns:repeat(2,1fr);gap:24px}} @media (max-width:460px){.trustband{grid-template-columns:1fr}} /* ── Branch grid (cards themselves are the inherited .br) ──────────────── */ .brgrid{display:grid;grid-template-columns:repeat(auto-fit,minmax(340px,1fr));gap:22px} /* ── Lists ──────────────────────────────────────────────────────────────── */ .ticklist{list-style:none;padding:0;margin:0;display:grid; grid-template-columns:repeat(auto-fit,minmax(320px,1fr));gap:12px} .ticklist li{background:#fff;border:1px solid var(--line);border-radius:var(--r-sm); padding:14px 18px 14px 44px;position:relative;font-size:15px;color:var(--ink)} .ticklist li::before{content:"✓";position:absolute;left:18px;color:var(--red);font-weight:800} /* ── CTA ────────────────────────────────────────────────────────────────── */ .cta{background:linear-gradient(180deg,#fff,var(--pink-50));border:1px solid var(--line); border-radius:var(--r);padding:clamp(28px,3.6vw,40px) clamp(22px,3vw,32px); text-align:center;box-shadow:var(--shadow)} .cta h2{margin-bottom:8px} .cta p{margin:0 auto;max-width:56ch;color:var(--body)} .cta .btnrow{justify-content:center} /* ── FAQ ────────────────────────────────────────────────────────────────── */ .faq details{background:#fff;border:1px solid var(--line);border-radius:var(--r-sm); padding:16px 20px;margin-bottom:10px} .faq summary{cursor:pointer;font-weight:700;font-size:15.5px;color:var(--ink)} .faq details p{margin:12px 0 0;color:var(--body);font-size:15px;line-height:1.75} /* ── Gallery ────────────────────────────────────────────────────────────── */ .gallery{display:grid;grid-template-columns:repeat(auto-fit,minmax(300px,1fr));gap:18px} .gallery figure{margin:0;background:#fff;border:1px solid var(--line);border-radius:var(--r); overflow:hidden;box-shadow:var(--shadow)} .gallery img{width:100%;height:240px;object-fit:cover;display:block} .gallery figcaption{padding:14px 18px;font-size:14px;color:var(--body);line-height:1.6} /* ── Branch detail blocks ───────────────────────────────────────────────── */ .branchfull{background:#fff;border:1px solid var(--line);border-radius:var(--r); padding:clamp(20px,2.6vw,26px);margin-bottom:16px;box-shadow:var(--shadow)} .branchfull ul{margin:0 0 16px;padding-left:18px;color:var(--body)} .branchfull li{margin-bottom:6px} .more{margin-top:24px} .muted{color:var(--body)} .meta{font-size:.92rem;color:var(--body)} /* ── Skip link ──────────────────────────────────────────────────────────── */ .skip{position:absolute;left:-9999px} .skip:focus{left:12px;top:12px;background:#fff;padding:8px 16px;border-radius:var(--r-sm); z-index:99} /* ── Footer sits on var(--dark). --body (#6E6167) and --line are light-background tokens; using them here rendered the links at 2:1 against the panel. ──── */ footer .fgrid{display:grid;grid-template-columns:repeat(auto-fit,minmax(210px,1fr));gap:26px} footer .fnav{display:flex;flex-direction:column;gap:8px} footer .fnav strong{margin-bottom:6px;color:#fff;font-size:14px;letter-spacing:.09em; text-transform:uppercase;font-weight:800} footer .fnav a{text-decoration:none;color:var(--on-dark);font-size:14.8px} footer .fnav a:hover{color:#fff;text-decoration:underline} footer .brand b{color:#fff} footer .brand small,footer .muted{color:var(--on-dark-muted)} footer .legal{margin-top:30px;padding-top:18px;border-top:1px solid rgba(255,255,255,.16); font-size:13.2px;color:var(--on-dark-muted)} footer .legal a{color:#fff;text-decoration:underline} /* ── Photography ────────────────────────────────────────────────────────── */ .branchcard{background:#fff;border:1px solid var(--line);border-radius:var(--r); padding:clamp(18px,2.4vw,22px);margin-bottom:14px;box-shadow:var(--shadow)} .branchcard img{width:100%;height:190px;object-fit:cover;border-radius:var(--r-sm); margin-bottom:14px} .branchcard h3{margin:0 0 6px;font-size:1.08rem} /* ── Reveal must never be able to hide content: the hide is scoped to .js, which an inline script sets, and is dropped under reduced motion. A one-page preview can risk this; 22 indexable pages cannot. ───────────── */ @media (prefers-reduced-motion: reduce){ .js .rv{opacity:1 !important;transform:none !important} } @media (max-width:720px){ main .wrap{padding:0 16px} .brgrid{grid-template-columns:1fr} } /* Care-types list: icon + text, no tick pseudo-element. See data.py — these items are deliberately not illustrated with photographs. */ .ticklist.icons li{display:flex;gap:14px;align-items:flex-start;padding:16px 18px} .ticklist.icons li::before{content:none} .ticklist.icons svg{width:22px;height:22px;flex:none;margin-top:2px;color:var(--red)} .ticklist.icons span{flex:1} /* ── Audit fixes ─────────────────────────────────────────────────────────── */ /* nav.main a (0,0,2) was beating .btn-wa (0,0,1), so the header's WhatsApp button rendered --body on WhatsApp green: 2.97:1, a WCAG AA failure on the single most prominent CTA on the page. */ nav.main a.btn-wa{color:#0B3D22} nav.main a.btn-red{color:#fff} /* Touch targets. The language switcher was 24x21 and the topbar numbers 21px tall — both are things a family taps on a phone. The visual size is kept; the hit area is expanded with a pseudo-element. */ .langs a,.tb-item{position:relative} .langs a::after,.tb-item::after{content:"";position:absolute;inset:-12px -6px} nav.main a{min-height:44px;display:inline-flex;align-items:center} /* Typography polish: even line lengths on headings, fewer orphans in prose. */ h1,h2,h3,.hero h1,.sec-head h2{text-wrap:balance} main p,.faq details p,.svc-list li,.ticklist li{text-wrap:pretty} /* Visible focus for keyboard users, on brand rather than the UA default. */ a:focus-visible,button:focus-visible,summary:focus-visible{ outline:2px solid var(--red);outline-offset:3px;border-radius:4px} .br a:focus-visible,.hero a:focus-visible{outline-color:#fff} /* Remaining sub-44px touch targets: the quicklink pills (42px) and the FAQ summary row (26px). Both are tapped on a phone. */ nav.quick a{min-height:44px;display:inline-flex;align-items:center} .faq summary{padding:9px 0;min-height:44px;display:flex;align-items:center} .langs a{min-width:44px;justify-content:center;display:inline-flex} /* A 999px radius only reads as a pill while the label fits one line. The CTA labels carried the branch name AND the phone number, wrapped to two lines, and the 77px-tall lozenges came close enough to touch that they read as one blob. Label shortened in build.py; this gives the row honest spacing and caps the radius so a wrap can never produce that shape again. */ /* .btnrow lost its display:flex when the appended CSS was rewritten, so `gap` was inert and the buttons flowed inline and touched. That, not the label length, was why they looked stuck together. */ .btnrow{display:flex;flex-wrap:wrap;gap:14px;margin-top:20px} .cta .btnrow{justify-content:center} .btn{border-radius:999px;max-width:100%} .btn:has(> svg + *){text-wrap:nowrap} @supports not selector(:has(*)){.btn{white-space:nowrap}} @media (max-width:560px){ .cta .btnrow{flex-direction:column;align-items:stretch} .cta .btn{width:100%} } /* ── Pricing ─────────────────────────────────────────────────────────────── */ .pkgrid{display:grid;grid-template-columns:repeat(auto-fit,minmax(280px,1fr));gap:18px} .pkg{background:#fff;border:1px solid var(--line);border-radius:var(--r); padding:26px 24px 24px;box-shadow:var(--shadow);text-align:center} .pkg h3{margin:0 0 14px;font-size:1.05rem;color:#fff;background:var(--red); border-radius:999px;padding:9px 16px;display:inline-block} .pkg-price{margin:6px 0 10px;font-size:2.35rem;font-weight:800;color:var(--red); line-height:1;letter-spacing:-.02em} .pkg-price span{font-size:1.05rem;font-weight:700;margin-right:3px;vertical-align:.45em} .pkg-price small{font-size:.92rem;font-weight:600;color:var(--body);margin-left:4px} .pkg-who{margin:0;font-size:14.5px;color:var(--body);line-height:1.65} .note-inline{margin:22px auto 0;max-width:62ch;text-align:center;color:var(--body);font-size:15px} .extras{list-style:none;padding:0;margin:0;display:grid;gap:10px;max-width:640px} .extras li{display:flex;justify-content:space-between;gap:18px;align-items:baseline; background:#fff;border:1px solid var(--line);border-radius:var(--r-sm);padding:15px 18px} .extras strong{color:var(--red);white-space:nowrap} @media (max-width:560px){.pkg-price{font-size:2rem}} /* ── Topbar ────────────────────────────────────────────────────────────── Four items plus the switcher did not fit, and the row was set to wrap, so the language pill dropped to a second line and the bar stood 78px tall. It no longer wraps; the email hides before the row can run out of space. */ .topbar .wrap{flex-wrap:nowrap;min-height:38px;gap:18px} .topbar .tb-left{flex-wrap:nowrap;gap:18px;min-width:0;overflow:hidden} .topbar .tb-item{flex:none} @media (max-width:1080px){.topbar .tb-item.hide-s{display:none}} @media (max-width:640px){ .topbar .wrap{gap:10px} .topbar .tb-left{gap:12px} .topbar{font-size:12px} } /* The switcher moved from