/* UCC Medcover — shared theme: tokens, reset, nav, footer, buttons. Palette switches via [data-palette] on ; persisted by theme.js */ @import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700;800&display=swap'); :root, :root[data-palette="teal"] { --bg:#ffffff; --surface:#f4f7f9; --surface-2:#eef3f6; --ink:#0e1f2c; --muted:#5a6b7a; --rule:#e3e9ee; --brand:#1f8aad; --brand-deep:#0b3d62; --brand-ink:#ffffff; --brand-tint:#e3eef4; --brand-tint-strong:#bfd9e4; --brand-shadow:rgba(11,61,98,.35); --shadow:rgba(11,61,98,.20); } :root[data-palette="gold"] { --bg:#fbfaf7; --surface:#f3f0e9; --surface-2:#ede9df; --ink:#1c1c1c; --muted:#6b6b66; --rule:#e6e2d8; --brand:#c9a86b; --brand-deep:#1c1c1c; --brand-ink:#fbfaf7; --brand-tint:#efece4; --brand-tint-strong:#dcd3bf; --brand-shadow:rgba(28,28,28,.30); --shadow:rgba(28,28,28,.16); } :root[data-palette="cobalt"] { --bg:#ffffff; --surface:#f4f6fb; --surface-2:#eef1f9; --ink:#0a1f44; --muted:#5b6680; --rule:#e1e5ee; --brand:#3d7eff; --brand-deep:#0a1f44; --brand-ink:#ffffff; --brand-tint:#e6edff; --brand-tint-strong:#c1d2ff; --brand-shadow:rgba(10,31,68,.35); --shadow:rgba(10,31,68,.20); } *,*::before,*::after { box-sizing:border-box; } html { scroll-behavior:smooth; } body { margin:0; font-family:'Inter',system-ui,-apple-system,sans-serif; background:var(--bg); color:var(--ink); -webkit-font-smoothing:antialiased; text-rendering:optimizeLegibility; letter-spacing:-.005em; transition:background .3s ease,color .3s ease; } img { display:block; max-width:100%; } h1,h2,h3,h4,p,figure,blockquote { margin:0; } a { color:inherit; text-decoration:none; } button { font:inherit; cursor:pointer; border:none; background:none; color:inherit; } ul { margin:0; padding:0; list-style:none; } .container { max-width:1200px; margin:0 auto; padding:0 64px; } @media (max-width:980px){ .container { padding:0 40px; } } @media (max-width:720px){ .container { padding:0 24px; } } /* ---- BUTTONS ---- */ .btn { display:inline-flex; align-items:center; gap:9px; padding:14px 26px; border-radius:999px; font-size:15px; font-weight:600; letter-spacing:-.01em; white-space:nowrap; transition:transform .15s ease, box-shadow .2s ease, background .2s ease, border-color .2s ease; } .btn svg { width:16px; height:16px; } .btn-primary { background:var(--brand); color:var(--brand-ink); } .btn-primary:hover { transform:translateY(-2px); box-shadow:0 14px 30px -10px var(--brand-shadow); } .btn-deep { background:var(--brand-deep); color:var(--brand-ink); } .btn-deep:hover { transform:translateY(-2px); box-shadow:0 14px 30px -10px var(--brand-shadow); } .btn-ghost { color:var(--ink); border:1px solid var(--rule); background:var(--bg); } .btn-ghost:hover { border-color:var(--ink); transform:translateY(-2px); } .btn-lg { padding:17px 32px; font-size:16px; } .btn-on-deep { background:var(--brand-ink); color:var(--brand-deep); } .btn-on-deep:hover { transform:translateY(-2px); box-shadow:0 14px 34px -10px rgba(0,0,0,.4); } .btn-on-deep-ghost { color:var(--brand-ink); border:1px solid rgba(255,255,255,.32); } .btn-on-deep-ghost:hover { border-color:var(--brand-ink); transform:translateY(-2px); } /* ---- NAV ---- */ .nav-wrap { position:sticky; top:0; z-index:50; background:color-mix(in srgb, var(--bg) 88%, transparent); backdrop-filter:blur(14px); -webkit-backdrop-filter:blur(14px); border-bottom:1px solid var(--rule); } .nav { display:flex; align-items:center; justify-content:space-between; gap:28px; height:64px; } @media (max-width:720px){ .nav { height:48px; } } .brand { display:flex; align-items:center; gap:12px; } .brand-mark { width:40px; height:40px; border-radius:11px; background:var(--brand-deep); color:var(--brand-ink); display:grid; place-items:center; } .brand-mark svg { width:22px; height:22px; } .brand-name { display:flex; flex-direction:column; line-height:1.05; } .brand-name b { font-size:17px; font-weight:700; letter-spacing:-.02em; } .brand-name span { font-size:10.5px; color:var(--muted); letter-spacing:.1em; text-transform:uppercase; margin-top:3px; } /* brand variant: full wordmark image */ .brand--logo { gap:0; flex-shrink:0; } .brand-logo { height:42px; width:auto; display:block; } /* footer / on-dark surfaces — use the dark logo variant (off-white cross + periwinkle hand + off-white text); no invert */ .brand--on-dark .brand-logo { height:42px; opacity:.96; } @media (max-width:720px){ .brand-logo { height:32px; } } .nav-links { display:flex; align-items:center; gap:30px; flex-wrap:nowrap; } .nav-links a { font-size:14.5px; font-weight:500; color:var(--ink); opacity:.8; white-space:nowrap; transition:opacity .15s, color .15s; } .nav-links a:hover, .nav-links a.active { opacity:1; color:var(--brand-deep); } .nav-links a.active { font-weight:600; } .nav-cta { display:flex; align-items:center; gap:14px; flex-shrink:0; } .nav-pill { display:inline-flex; align-items:center; gap:7px; white-space:nowrap; font-size:13.5px; font-weight:600; color:var(--brand-deep); padding:8px 14px; border-radius:999px; background:var(--brand-tint); } .nav-pill svg { width:15px; height:15px; } /* hamburger — hidden on desktop, shown ≤980px */ .nav-toggle { display:none; width:44px; height:44px; border-radius:11px; background:transparent; border:1px solid var(--rule); padding:0; align-items:center; justify-content:center; cursor:pointer; margin-left:10px; transition:background .15s ease, border-color .15s ease; } .nav-toggle:hover { background:var(--brand-tint); border-color:var(--brand-tint-strong); } .nav-toggle svg { width:22px; height:22px; color:var(--brand-deep); transition:transform .25s ease; } .nav-toggle .ic-close { display:none; } .nav-wrap.is-open .nav-toggle .ic-open { display:none; } .nav-wrap.is-open .nav-toggle .ic-close { display:block; } @media (max-width:980px) { /* Default-collapsed link list. Becomes a vertical drawer when .is-open. */ .nav-links { position:absolute; top:100%; left:0; right:0; flex-direction:column; align-items:stretch; gap:0; background:var(--bg); box-shadow:0 18px 36px -22px var(--shadow); /* Closed state must be TRULY zero — no padding/border, or max-height:0 leaves a white sliver under the nav (box-sizing doesn't clip them here). */ padding:0; border-bottom:0 solid var(--rule); max-height:0; overflow:hidden; visibility:hidden; transition:max-height .28s ease, padding .28s ease, visibility .28s; } .nav-wrap.is-open .nav-links { max-height:420px; padding:6px 0 18px; border-bottom-width:1px; visibility:visible; } .nav-links a { padding:14px 24px; font-size:15.5px; opacity:1; color:var(--ink); border-bottom:1px solid var(--rule); } .nav-links a:last-of-type { border-bottom:0; } .nav-phone-pill { display:none; } .nav-toggle { display:inline-flex; } } /* Compact CTA label swap for phones (Book a home visit → Book). */ .cta-short { display:none; } .nav-cta-btn { white-space:nowrap; } @media (max-width:720px) { .nav-toggle { margin-left:8px; width:38px; height:38px; border-radius:9px; } .nav-toggle svg { width:20px; height:20px; } .nav-cta-btn { padding:9px 16px; font-size:14px; } .cta-long { display:none; } .cta-short { display:inline; } } /* NAV FIT — tighten before the hamburger breakpoint so nothing wraps */ @media (max-width:1180px){ .nav-links { gap:20px; } .nav-links a { font-size:14px; } .nav { gap:18px; } } @media (max-width:1060px){ .nav-links { gap:15px; } .nav-pill { padding:8px 11px; font-size:13px; } } /* ---- PALETTE TOGGLE ---- */ .palette-toggle { position:fixed; bottom:22px; right:22px; z-index:80; display:flex; align-items:center; gap:10px; background:var(--bg); border:1px solid var(--rule); padding:9px 14px 9px 16px; border-radius:999px; box-shadow:0 12px 34px -12px var(--shadow); } .palette-toggle b { font-size:11px; font-weight:600; color:var(--muted); text-transform:uppercase; letter-spacing:.08em; } .palette-swatches { display:flex; gap:7px; } .palette-swatch { width:24px; height:24px; border-radius:50%; cursor:pointer; border:2px solid transparent; transition:transform .15s, border-color .15s; } .palette-swatch:hover { transform:scale(1.12); } .palette-swatch[aria-pressed="true"] { border-color:var(--ink); } .sw-teal { background:linear-gradient(135deg,#0b3d62 55%,#1f8aad 55%); } .sw-gold { background:linear-gradient(135deg,#1c1c1c 55%,#c9a86b 55%); } .sw-cobalt { background:linear-gradient(135deg,#0a1f44 55%,#3d7eff 55%); } @media (max-width:720px){ .palette-toggle b { display:none; } } /* ---- SECTION HEAD ---- */ .eyebrow { display:inline-flex; align-items:center; gap:9px; font-size:12.5px; font-weight:600; color:var(--brand-deep); text-transform:uppercase; letter-spacing:.12em; white-space:nowrap; } .eyebrow::before { content:''; width:26px; height:2px; background:var(--brand); border-radius:1px; } .eyebrow.center { justify-content:center; } .eyebrow.center::before { display:none; } .sec-title { font-size:clamp(32px,4vw,48px); font-weight:700; line-height:1.06; letter-spacing:-.03em; text-wrap:balance; } .sec-title em { font-style:normal; color:var(--brand-deep); position:relative; display:inline-block; } .sec-title em::after { content:''; position:absolute; inset:-2px -4px; background:var(--brand-tint); z-index:-1; border-radius:4px; } .sec-sub { font-size:17.5px; line-height:1.6; color:var(--muted); } /* ---- REVEAL ---- */ .reveal { opacity:0; transform:translateY(22px); transition:opacity .7s cubic-bezier(.2,.7,.2,1), transform .7s cubic-bezier(.2,.7,.2,1); } .reveal.in { opacity:1; transform:none; } @media (prefers-reduced-motion:reduce){ .reveal { opacity:1; transform:none; transition:none; } } /* ---- FOOTER ---- */ .footer { background:var(--brand-deep); color:var(--brand-ink); padding:72px 0 38px; } .footer-top { display:grid; grid-template-columns:1.4fr repeat(5,1fr); gap:30px 28px; padding-bottom:46px; border-bottom:1px solid rgba(255,255,255,.14); } .footer .brand-name b, .footer .brand-name span { color:var(--brand-ink); } .footer .brand-mark { background:var(--brand-ink); color:var(--brand-deep); } .footer-blurb { font-size:14.5px; line-height:1.6; opacity:.78; max-width:300px; margin:20px 0; } .footer-col h4 { font-size:12.5px; text-transform:uppercase; letter-spacing:.1em; opacity:.6; margin-bottom:18px; font-weight:600; } .footer-col a { display:block; font-size:14.5px; opacity:.82; margin-bottom:12px; transition:opacity .15s; } .footer-col a:hover { opacity:1; } .footer-bottom { display:flex; justify-content:space-between; align-items:center; padding-top:26px; font-size:13px; opacity:.65; } .footer-bottom .tags { display:flex; gap:18px; } .footer-credit a { text-decoration:underline; text-underline-offset:2px; opacity:.85; transition:opacity .15s; } .footer-credit a:hover { opacity:1; } @media (max-width:600px){ .footer-bottom { flex-direction:column; gap:10px; text-align:center; } } @media (max-width:1040px){ .footer-top { grid-template-columns:repeat(3,1fr); gap:32px; } .footer-top > :first-child { grid-column:1 / -1; } } @media (max-width:600px){ .footer-top { grid-template-columns:1fr 1fr; gap:28px; } } /* ---- TOP UTILITY BAR (shared) ---- */ .topbar { background:var(--brand-deep); color:var(--brand-ink); font-size:13px; } .topbar .container { display:flex; justify-content:space-between; align-items:center; height:40px; } .topbar-left { display:flex; gap:22px; align-items:center; opacity:.9; } .topbar-left span { display:inline-flex; align-items:center; gap:7px; } .topbar-left svg { width:14px; height:14px; flex-shrink:0; } .topbar-right { display:flex; gap:14px; align-items:center; opacity:.82; } .topbar-right .sep { opacity:.4; } @media (max-width:720px){ .topbar-left span:nth-child(2), .topbar-right { display:none; } } /* ---- BIG CTA (shared) ---- */ .cta-banner { padding:0 0 100px; } .cta-inner { background:var(--brand-deep); color:var(--brand-ink); border-radius:30px; padding:72px 60px; text-align:center; position:relative; overflow:hidden; } .cta-inner::before { content:''; position:absolute; width:340px; height:340px; border-radius:50%; background:var(--brand); opacity:.18; top:-140px; right:-80px; } .cta-inner::after { content:''; position:absolute; width:240px; height:240px; border-radius:50%; background:var(--brand); opacity:.12; bottom:-120px; left:-60px; } .cta-inner .eyebrow { color:var(--brand-tint-strong); justify-content:center; position:relative; } .cta-inner .eyebrow::before, .cta-inner .eyebrow::after { background:var(--brand-tint-strong); } .cta-inner h2 { font-size:clamp(34px,4.5vw,52px); font-weight:700; letter-spacing:-.03em; line-height:1.05; margin:18px 0; position:relative; text-wrap:balance; color:var(--brand-ink); } .cta-inner p { font-size:18px; line-height:1.55; opacity:.85; max-width:520px; margin:0 auto 34px; position:relative; } .cta-actions { display:flex; gap:14px; justify-content:center; position:relative; flex-wrap:wrap; } @media (max-width:720px){ .cta-inner { padding:56px 28px; } }