/* ============================================================ PrimeReliefRx — shared design system Palettes: apothecary (default) | midnight | orchid Themes: light (default) | dark — set via data-theme on ============================================================ */ /* ---------- Fonts ---------- */ @font-face{font-family:'Fraunces';font-style:normal;font-weight:300 700;font-display:swap;src:url('../fonts/fraunces.woff2') format('woff2')} @font-face{font-family:'Fraunces';font-style:italic;font-weight:300 700;font-display:swap;src:url('../fonts/fraunces-italic.woff2') format('woff2')} @font-face{font-family:'Public Sans';font-style:normal;font-weight:400 700;font-display:swap;src:url('../fonts/public-sans.woff2') format('woff2')} /* ---------- Tokens: APOTHECARY light (default) ---------- */ :root{ --ground:#F3F5F1; --card:#FFFFFF; --card-2:#FAFBF9; --ink:#17251F; --muted:#54645B; --faint:#7A897F; --line:#DFE5DE; --line-soft:#E9EEE8; --bottle:#113B2C; --bottle-deep:#0B2A1F; --bottle-ink:#F2F6F1; --on-bottle-accent:#8FC9A8; --on-bottle-muted:#B9CDBF; --on-bottle-faint:#8FA796; --fresh:#187A4E; --fresh-strong:#0F5E3A; --fresh-tint:#E4F0E8; --amber:#A97722; --amber-tint:#F6EEDD; --danger:#B3402F; --shadow:0 1px 2px rgba(20,35,28,.05),0 12px 32px -12px rgba(20,35,28,.14); --shadow-lg:0 2px 4px rgba(20,35,28,.06),0 24px 56px -16px rgba(20,35,28,.22); --radius:14px; } /* ---------- APOTHECARY dark ---------- */ :root[data-theme="dark"]{ --ground:#0D1512; --card:#151F1A; --card-2:#18231D; --ink:#E8EDE8; --muted:#A3B1A7; --faint:#7C8B81; --line:#26332B; --line-soft:#1E2A24; --bottle:#0F3527; --bottle-deep:#0A241A; --bottle-ink:#EAF1EA; --fresh:#4DBA85; --fresh-strong:#6FCD9E; --fresh-tint:#15291F; --amber:#D9A150; --amber-tint:#2A2318; --danger:#E07B63; --shadow:0 1px 2px rgba(0,0,0,.3),0 12px 32px -12px rgba(0,0,0,.5); --shadow-lg:0 2px 4px rgba(0,0,0,.35),0 24px 56px -16px rgba(0,0,0,.6); } /* no-JS fallback: OS dark for default palette */ @media (prefers-color-scheme: dark){ :root:not([data-theme]){ --ground:#0D1512; --card:#151F1A; --card-2:#18231D; --ink:#E8EDE8; --muted:#A3B1A7; --faint:#7C8B81; --line:#26332B; --line-soft:#1E2A24; --bottle:#0F3527; --bottle-deep:#0A241A; --bottle-ink:#EAF1EA; --fresh:#4DBA85; --fresh-strong:#6FCD9E; --fresh-tint:#15291F; --amber:#D9A150; --amber-tint:#2A2318; --danger:#E07B63; --shadow:0 1px 2px rgba(0,0,0,.3),0 12px 32px -12px rgba(0,0,0,.5); --shadow-lg:0 2px 4px rgba(0,0,0,.35),0 24px 56px -16px rgba(0,0,0,.6); } } /* ---------- MIDNIGHT (navy & gold) light ---------- */ :root[data-palette="midnight"]{ --ground:#F4F3EF; --card:#FFFFFF; --card-2:#FAF9F6; --ink:#181F2E; --muted:#525B6E; --faint:#7B8496; --line:#E0E0DA; --line-soft:#EBEBE5; --bottle:#16294B; --bottle-deep:#0F1D38; --bottle-ink:#F1F4F9; --on-bottle-accent:#9DB8E8; --on-bottle-muted:#B9C6DE; --on-bottle-faint:#8493B3; --fresh:#2B5CB0; --fresh-strong:#1F4587; --fresh-tint:#E6EDF9; --amber:#A47E22; --amber-tint:#F5EFDC; --danger:#B3402F; } /* ---------- MIDNIGHT dark ---------- */ :root[data-palette="midnight"][data-theme="dark"]{ --ground:#0D1219; --card:#151B26; --card-2:#182030; --ink:#E7EAF1; --muted:#A3ACBE; --faint:#7A8397; --line:#262E3E; --line-soft:#1D2534; --bottle:#14233E; --bottle-deep:#0C1626; --bottle-ink:#EAEFF7; --fresh:#7FA7EE; --fresh-strong:#9DBCF5; --fresh-tint:#1A2436; --amber:#D9A150; --amber-tint:#2A2318; --danger:#E07B63; --shadow:0 1px 2px rgba(0,0,0,.3),0 12px 32px -12px rgba(0,0,0,.5); --shadow-lg:0 2px 4px rgba(0,0,0,.35),0 24px 56px -16px rgba(0,0,0,.6); } /* ---------- ORCHID (plum & rose) light ---------- */ :root[data-palette="orchid"]{ --ground:#F6F3F1; --card:#FFFFFF; --card-2:#FBF8F7; --ink:#271A22; --muted:#645763; --faint:#8D7E88; --line:#E4DCDF; --line-soft:#EEE7EA; --bottle:#46203C; --bottle-deep:#331629; --bottle-ink:#F8F1F5; --on-bottle-accent:#E3A9C6; --on-bottle-muted:#D9C2CF; --on-bottle-faint:#B394A5; --fresh:#9C3F6F; --fresh-strong:#7D2F58; --fresh-tint:#F5E5ED; --amber:#AD7A2E; --amber-tint:#F6EEDC; --danger:#B3402F; } /* ---------- ORCHID dark ---------- */ :root[data-palette="orchid"][data-theme="dark"]{ --ground:#171015; --card:#1F1620; --card-2:#241A25; --ink:#EFE7EC; --muted:#B2A3AD; --faint:#857680; --line:#332A33; --line-soft:#281F29; --bottle:#3B1B33; --bottle-deep:#2A1224; --bottle-ink:#F5EDF2; --fresh:#D583AC; --fresh-strong:#E39FC0; --fresh-tint:#2C1D28; --amber:#D9A150; --amber-tint:#2A2318; --danger:#E07B63; --shadow:0 1px 2px rgba(0,0,0,.3),0 12px 32px -12px rgba(0,0,0,.5); --shadow-lg:0 2px 4px rgba(0,0,0,.35),0 24px 56px -16px rgba(0,0,0,.6); } /* ============================================================ BASE ============================================================ */ *{box-sizing:border-box} html{scroll-behavior:smooth} body{ margin:0;background:var(--ground);color:var(--ink); font-family:'Public Sans',system-ui,-apple-system,'Segoe UI',sans-serif; font-size:16px;line-height:1.6;-webkit-font-smoothing:antialiased; } h1,h2,h3,h4{font-family:'Fraunces',Georgia,serif;font-weight:420;line-height:1.12;margin:0;text-wrap:balance;letter-spacing:-.01em} p{margin:0} a{color:inherit;text-decoration:none} button{font:inherit;cursor:pointer} img,svg{display:block;max-width:100%} :focus-visible{outline:2px solid var(--fresh);outline-offset:3px;border-radius:4px} .wrap{max-width:1180px;margin:0 auto;padding:0 32px} section{padding:96px 0} .eyebrow{ font-size:11.5px;font-weight:700;letter-spacing:.14em;text-transform:uppercase; color:var(--fresh);display:flex;align-items:center;gap:10px; } .eyebrow::before{content:"";width:22px;height:1.5px;background:var(--fresh);flex:none} .eyebrow.center{justify-content:center} .eyebrow.center::before{display:none} .sec-head{max-width:640px;margin-bottom:56px} .sec-head h2{font-size:clamp(28px,3.4vw,40px);margin-top:18px} .sec-head p{margin-top:16px;color:var(--muted);font-size:17px} .sec-head.center{margin-left:auto;margin-right:auto;text-align:center} .reveal{opacity:0;transform:translateY(18px);transition:opacity .55s ease-out,transform .55s ease-out} .reveal.in{opacity:1;transform:none} @media (prefers-reduced-motion: reduce){ html{scroll-behavior:auto} .reveal{opacity:1;transform:none;transition:none} *{animation:none!important;transition:none!important} } .card{background:var(--card);border:1px solid var(--line-soft);border-radius:var(--radius);box-shadow:var(--shadow)} /* ---------- Buttons ---------- */ .btn{ display:inline-flex;align-items:center;justify-content:center;gap:9px; border-radius:999px;font-weight:600;font-size:15px;border:1px solid transparent; padding:13px 26px;transition:background .18s,border-color .18s,transform .18s; white-space:nowrap; } .btn svg{width:16px;height:16px;flex:none} .btn:active{transform:scale(.98)} .btn-primary{background:var(--bottle);color:var(--bottle-ink)} .btn-primary:hover{background:var(--bottle-deep)} .btn-ghost{border-color:var(--line);color:var(--ink);background:transparent} .btn-ghost:hover{border-color:var(--faint);background:var(--card)} .btn-sm{padding:9px 18px;font-size:14px} .btn-lg{padding:16px 34px;font-size:16px} .btn-block{width:100%} .btn-on-dark{background:var(--card);color:var(--bottle);border:none} /* ============================================================ TOP BAR + HEADER ============================================================ */ .topbar{background:var(--bottle-deep);color:var(--bottle-ink);font-size:13px} .topbar .wrap{display:flex;justify-content:space-between;align-items:center;gap:16px;min-height:38px;padding-top:6px;padding-bottom:6px} .topbar .left{display:flex;align-items:center;gap:8px;opacity:.92;white-space:nowrap;overflow:hidden;text-overflow:ellipsis} .topbar .right{display:flex;gap:22px;opacity:.92;flex:none;white-space:nowrap} .topbar a:hover{text-decoration:underline} .topbar svg{width:14px;height:14px;flex:none} header.site{ position:sticky;top:0;z-index:100; background:color-mix(in srgb, var(--ground) 88%, transparent); backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px); border-bottom:1px solid var(--line-soft); transition:box-shadow .25s; } header.site.scrolled{box-shadow:0 4px 24px -12px rgba(0,0,0,.14)} .nav{display:flex;align-items:center;gap:22px;min-height:72px} .brand{display:flex;align-items:center;gap:11px;flex:none} .brand .mark{ width:36px;height:36px;border-radius:10px;background:var(--bottle);color:var(--bottle-ink); display:grid;place-items:center;flex:none; } .brand .mark svg{width:19px;height:19px} .brand .word{font-family:'Fraunces',Georgia,serif;font-size:20px;font-weight:520;letter-spacing:-.01em;line-height:1;white-space:nowrap;color:var(--ink)} .brand .word em{font-style:italic;color:var(--fresh);font-weight:560} .nav-links{display:flex;gap:4px;font-size:14px;font-weight:550;color:var(--muted);margin-left:8px} .nav-links a{padding:8px 12px;position:relative;white-space:nowrap;border-radius:999px;transition:background .15s,color .15s} .nav-links a:hover{color:var(--ink);background:var(--card)} .nav-links a.active{color:var(--bottle-ink);background:var(--bottle)} :root[data-theme="dark"] .nav-links a.active{color:var(--ground);background:var(--fresh)} .nav-search{ flex:0 1 240px;margin-left:auto;display:flex;align-items:center;gap:9px; background:var(--card);border:1px solid var(--line);border-radius:999px; padding:9px 15px;color:var(--faint);font-size:13.5px;min-width:0; } .nav-search span{overflow:hidden;white-space:nowrap;text-overflow:ellipsis} .nav-search svg{width:15px;height:15px;flex:none} .nav-search:hover{border-color:var(--faint)} .nav-actions{display:flex;align-items:center;gap:6px;flex:none} .nav-actions .signin{font-size:14px;font-weight:600;color:var(--muted);padding:8px 14px;border-radius:999px} .nav-actions .signin:hover{color:var(--ink);background:var(--card)} /* ============================================================ HOME — HERO ============================================================ */ .hero{padding:72px 0 88px;position:relative;overflow:hidden} .hero .wrap{display:grid;grid-template-columns:minmax(0,7fr) minmax(0,5fr);gap:64px;align-items:center} .hero h1{font-size:clamp(38px,4.8vw,58px);font-weight:400;margin-top:20px} .hero h1 em{font-style:italic;color:var(--fresh);font-weight:440} .hero .lede{margin-top:22px;font-size:18px;color:var(--muted);max-width:54ch} .hero .ctas{display:flex;gap:14px;margin-top:34px;flex-wrap:wrap} .hero .micro{display:flex;gap:22px;margin-top:30px;font-size:13.5px;color:var(--muted);flex-wrap:wrap;align-items:center} .hero .micro span{display:flex;align-items:center;gap:7px} .hero .micro svg{width:15px;height:15px;color:var(--fresh)} .hero .micro .stars{color:var(--amber)} .hero-viz{position:relative;min-height:540px} .hero-viz .glow{position:absolute;inset:-8% -12%;border-radius:50%;background:radial-gradient(closest-side,var(--fresh-tint),transparent 72%);z-index:0} .hero-viz .rx-ghost{ position:absolute;top:-40px;right:-10px;font-family:'Fraunces',Georgia,serif; font-style:italic;font-weight:340;font-size:280px;line-height:1;color:var(--ink); opacity:.05;z-index:0;user-select:none;pointer-events:none; } .rx-label{position:relative;z-index:1;width:min(350px,90%);transform:rotate(-2.5deg);overflow:hidden} .rx-label .strip{ background:var(--bottle);color:var(--bottle-ink);padding:12px 20px; display:flex;justify-content:space-between;align-items:center;font-size:11.5px; letter-spacing:.1em;text-transform:uppercase;font-weight:600; } .rx-label .strip span:last-child{opacity:.75;letter-spacing:.04em} .rx-label .body{padding:18px 22px 20px} .rx-label .patient{font-size:11px;letter-spacing:.12em;text-transform:uppercase;color:var(--faint);font-weight:600} .rx-label .name{font-weight:700;font-size:16px;margin-top:2px} .rx-label .drug{font-family:'Fraunces',Georgia,serif;font-size:20px;font-weight:480;margin-top:12px;line-height:1.25} .rx-label .sig{color:var(--muted);font-size:13.5px;margin-top:5px} .rx-label .verify{ margin-top:14px;padding-top:13px;border-top:1px dashed var(--line); display:flex;align-items:center;gap:9px;font-size:13px;color:var(--fresh-strong);font-weight:600; } .rx-label .verify svg{width:16px;height:16px;color:var(--fresh);flex:none} .price-card{position:absolute;z-index:2;right:0;top:268px;width:min(330px,88%);padding:20px 22px} .price-card .search{ display:flex;align-items:center;gap:9px;border:1px solid var(--line); border-radius:10px;padding:10px 14px;font-size:14px;color:var(--ink);background:var(--card-2); } .price-card .search svg{width:15px;height:15px;color:var(--faint)} .price-card .result{display:flex;justify-content:space-between;align-items:flex-start;margin-top:18px;gap:12px} .price-card .med b{display:block;font-size:15.5px} .price-card .med span{font-size:12.5px;color:var(--faint)} .price-card .tag{ display:inline-block;margin-top:8px;font-size:11px;font-weight:700;letter-spacing:.06em; text-transform:uppercase;color:var(--fresh-strong);background:var(--fresh-tint); padding:4px 9px;border-radius:6px; } .price-card .amount{text-align:right;font-variant-numeric:tabular-nums;flex:none} .price-card .amount .now{font-size:26px;font-weight:700;letter-spacing:-.02em} .price-card .amount .now small{font-size:13px;font-weight:500;color:var(--muted)} .price-card .amount .was{font-size:13px;color:var(--faint);text-decoration:line-through;margin-top:2px;white-space:nowrap} .price-card .add{width:100%;margin-top:18px} .chip{ position:absolute;z-index:3;display:flex;align-items:center;gap:8px; background:var(--card);border:1px solid var(--line-soft);border-radius:999px; box-shadow:var(--shadow-lg);padding:10px 16px;font-size:13px;font-weight:600;white-space:nowrap; } .chip svg{width:15px;height:15px;color:var(--fresh);flex:none} .chip.verified{top:-16px;right:14px} .chip.delivery{bottom:-4px;left:8px} .chip.delivery svg{color:var(--amber)} /* ============================================================ HOME — ACCREDITATION ============================================================ */ .accred{border-top:1px solid var(--line);border-bottom:1px solid var(--line);background:var(--card-2)} .accred .inner{display:flex;align-items:stretch;justify-content:space-between;flex-wrap:wrap} .accred .item{display:flex;align-items:center;gap:13px;padding:26px 28px;flex:1;min-width:240px} .accred .item + .item{border-left:1px solid var(--line)} .accred svg{width:26px;height:26px;color:var(--fresh);flex:none} .accred b{display:block;font-size:14px;letter-spacing:.02em} .accred span{display:block;font-size:12.5px;color:var(--muted);margin-top:1px} .accred-note{padding:10px 0 14px;text-align:center;font-size:12px;color:var(--faint)} /* ============================================================ HOME — CATEGORIES ============================================================ */ .cat-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:20px} .cat-card{ padding:26px 24px;display:flex;flex-direction:column;gap:14px;position:relative; transition:transform .2s,box-shadow .2s; } .cat-card:hover{transform:translateY(-3px);box-shadow:var(--shadow-lg)} .cat-card .icon{width:44px;height:44px;border-radius:12px;background:var(--fresh-tint);display:grid;place-items:center} .cat-card .icon svg{width:22px;height:22px;color:var(--fresh-strong)} .cat-card b{font-size:16px;font-weight:650} .cat-card span{font-size:13px;color:var(--muted)} .cat-card .from{font-size:13px;font-weight:700;color:var(--fresh-strong);margin-top:auto} .cat-card .arrow{ position:absolute;top:24px;right:22px;width:28px;height:28px;border-radius:50%; border:1px solid var(--line);display:grid;place-items:center;color:var(--faint); transition:background .2s,color .2s,border-color .2s; } .cat-card .arrow svg{width:14px;height:14px} .cat-card:hover .arrow{background:var(--bottle);border-color:var(--bottle);color:var(--bottle-ink)} /* ============================================================ HOME — STEPS ============================================================ */ .steps{display:grid;grid-template-columns:repeat(3,1fr);gap:24px} .step{padding:34px 30px;position:relative} .step .num{font-family:'Fraunces',Georgia,serif;font-style:italic;font-size:40px;font-weight:380;color:var(--fresh);line-height:1} .step h3{font-size:21px;margin-top:18px;font-weight:480} .step p{margin-top:12px;color:var(--muted);font-size:15px} .step .icon{position:absolute;top:32px;right:28px;width:42px;height:42px;border-radius:12px;background:var(--fresh-tint);display:grid;place-items:center} .step .icon svg{width:20px;height:20px;color:var(--fresh-strong)} /* ============================================================ HOME — PRICES (receipt) ============================================================ */ .prices .wrap{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,6fr);gap:80px;align-items:center} .receipt{overflow:hidden;box-shadow:var(--shadow-lg)} .receipt .head{padding:22px 28px;border-bottom:1px dashed var(--line);display:flex;justify-content:space-between;align-items:baseline} .receipt .head b{font-family:'Fraunces',Georgia,serif;font-size:17px;font-weight:520} .receipt .head span{font-size:11.5px;letter-spacing:.1em;text-transform:uppercase;color:var(--faint);font-weight:600} .receipt table{width:100%;border-collapse:collapse;font-size:14.5px} .receipt td{padding:13px 28px;border-bottom:1px solid var(--line-soft);vertical-align:baseline} .receipt tr:last-child td{border-bottom:none} .receipt .med b{font-weight:600} .receipt .med span{display:block;font-size:12px;color:var(--faint)} .receipt .now{text-align:right;font-weight:700;font-variant-numeric:tabular-nums;white-space:nowrap} .receipt .was{text-align:right;color:var(--faint);text-decoration:line-through;font-variant-numeric:tabular-nums;font-size:13px;white-space:nowrap} .receipt .total{background:var(--fresh-tint);padding:18px 28px;display:flex;justify-content:space-between;align-items:center;font-weight:600;font-size:14.5px;color:var(--fresh-strong)} .receipt .total b{font-size:17px} .prices .note{margin-top:14px;font-size:12.5px;color:var(--faint)} .prices .copy h2{font-size:clamp(28px,3.4vw,40px);margin-top:18px} .prices .copy .ctas{margin-top:30px;display:flex;gap:14px;flex-wrap:wrap} .tick-list{list-style:none;margin:26px 0 0;padding:0;display:grid;gap:14px} .tick-list li{display:flex;gap:12px;font-size:15.5px;color:var(--muted)} .tick-list svg{width:19px;height:19px;color:var(--fresh);flex:none;margin-top:2px} .tick-list b{color:var(--ink);font-weight:600} /* ============================================================ HOME — FILM / VIDEO BLOCK ============================================================ */ .film{padding-top:0} .film .frame{ position:relative;border-radius:20px;overflow:hidden;box-shadow:var(--shadow-lg); border:1px solid var(--line-soft); } .film .poster{display:block;width:100%;height:auto} .film .overlay{ position:absolute;inset:0;display:grid;place-items:center; background:linear-gradient(to top, rgba(0,0,0,.28), rgba(0,0,0,0) 45%); } .film .play{ width:84px;height:84px;border-radius:50%;border:none;background:var(--card);color:var(--bottle); display:grid;place-items:center;box-shadow:var(--shadow-lg); transition:transform .2s; } .film .play:hover{transform:scale(1.06)} .film .play svg{width:28px;height:28px;margin-left:4px} .film .caption{ position:absolute;left:24px;bottom:20px;color:#fff;font-size:14px;font-weight:600; display:flex;align-items:center;gap:10px;text-shadow:0 1px 8px rgba(0,0,0,.4); } .film .caption .dur{background:rgba(0,0,0,.45);padding:3px 10px;border-radius:6px;font-size:12px;font-weight:700} /* ============================================================ HOME — CARE ============================================================ */ .care{background:var(--bottle);color:var(--bottle-ink)} .care .wrap{display:grid;grid-template-columns:minmax(0,6fr) minmax(0,5fr);gap:72px;align-items:center} .care .eyebrow{color:var(--on-bottle-accent)} .care .eyebrow::before{background:var(--on-bottle-accent)} .care h2{font-size:clamp(28px,3.4vw,40px);margin-top:18px} .care .tick-list{color:var(--on-bottle-muted)} .care .tick-list b{color:var(--bottle-ink)} .care .tick-list svg{color:var(--on-bottle-accent)} .care .btn-care{background:var(--card);color:var(--bottle);border:none;margin-top:34px} .care-visual{position:relative} .care-visual .scene{border-radius:18px;overflow:hidden;display:block;width:100%;height:auto} .care blockquote{ margin:-46px 18px 0;position:relative;z-index:2; padding:26px 28px;background:var(--card);color:var(--ink); border:1px solid var(--line-soft);border-radius:var(--radius);box-shadow:var(--shadow-lg); } .care blockquote p{font-family:'Fraunces',Georgia,serif;font-style:italic;font-size:18.5px;font-weight:390;line-height:1.45} .care blockquote footer{margin-top:16px;display:flex;align-items:center;gap:12px} .care .avatar{width:42px;height:42px;border-radius:50%;background:var(--fresh-tint);color:var(--fresh-strong);display:grid;place-items:center;font-weight:700;font-size:14px;flex:none;font-family:'Public Sans',sans-serif} .care blockquote footer b{display:block;font-size:14px} .care blockquote footer span{display:block;font-size:12.5px;color:var(--muted)} /* ============================================================ HOME — COVERAGE / QUOTES / FAQ / CTA ============================================================ */ .coverage-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:24px} .cov{padding:30px;display:flex;gap:16px;align-items:flex-start} .cov .icon{width:42px;height:42px;border-radius:12px;background:var(--amber-tint);display:grid;place-items:center;flex:none} .cov .icon svg{width:20px;height:20px;color:var(--amber)} .cov b{display:block;font-size:16px} .cov p{margin-top:6px;font-size:14px;color:var(--muted)} .rating-line{display:flex;align-items:center;gap:12px;margin-top:16px;font-size:15px;color:var(--muted)} .rating-line .stars{color:var(--amber);letter-spacing:2px;font-size:17px} .quotes{display:grid;grid-template-columns:repeat(3,1fr);gap:24px;margin-top:48px} .quote{padding:32px 30px;display:flex;flex-direction:column;gap:20px} .quote p{font-family:'Fraunces',Georgia,serif;font-size:18.5px;font-weight:400;line-height:1.45;flex:1} .quote p::before{content:"\201C"} .quote p::after{content:"\201D"} .quote footer{display:flex;align-items:center;gap:12px;font-size:13.5px;color:var(--muted)} .quote .avatar{width:38px;height:38px;border-radius:50%;flex:none;display:grid;place-items:center;font-weight:700;font-size:13px;background:var(--fresh-tint);color:var(--fresh-strong)} .quote footer b{color:var(--ink);display:block} .faq{max-width:760px;margin:0 auto} .faq details{border-bottom:1px solid var(--line);padding:6px 0} .faq summary{display:flex;justify-content:space-between;align-items:center;gap:20px;padding:20px 4px;cursor:pointer;font-weight:600;font-size:16.5px;list-style:none} .faq summary::-webkit-details-marker{display:none} .faq summary .plus{width:26px;height:26px;border-radius:50%;border:1px solid var(--line);display:grid;place-items:center;flex:none;font-weight:400;font-size:16px;color:var(--muted);transition:transform .2s} .faq details[open] .plus{transform:rotate(45deg);color:var(--fresh);border-color:var(--fresh)} .faq .a{padding:0 4px 24px;color:var(--muted);font-size:15px;max-width:64ch} .cta-band{background:var(--bottle);color:var(--bottle-ink);text-align:center;position:relative;overflow:hidden} .cta-band .rx-ghost{position:absolute;bottom:-120px;left:-30px;font-family:'Fraunces',Georgia,serif;font-style:italic;font-size:340px;line-height:1;color:#fff;opacity:.04;pointer-events:none} .cta-band h2{font-size:clamp(28px,3.6vw,42px)} .cta-band h2 em{font-style:italic;color:var(--on-bottle-accent)} .cta-band p{margin-top:16px;color:var(--on-bottle-muted);font-size:16.5px} .cta-band .btn-on-dark{margin-top:32px} .cta-band .sub{margin-top:18px;font-size:13.5px;color:var(--on-bottle-faint)} /* ============================================================ FOOTER ============================================================ */ footer.site{background:var(--bottle-deep);color:var(--on-bottle-muted);font-size:14px;padding:72px 0 40px} footer.site .cols{display:grid;grid-template-columns:2fr 1fr 1fr 1fr;gap:48px} footer.site .brand .word{color:var(--bottle-ink)} footer.site .brand .mark{background:var(--on-bottle-accent);color:var(--bottle-deep)} footer.site .about{margin-top:18px;font-size:13.5px;line-height:1.7;max-width:36ch} footer.site h4{color:var(--bottle-ink);font-size:12px;letter-spacing:.12em;text-transform:uppercase;margin:0 0 18px;font-weight:700;font-family:'Public Sans',sans-serif} footer.site ul{list-style:none;margin:0;padding:0;display:grid;gap:11px} footer.site a:hover{color:var(--bottle-ink);text-decoration:underline} footer.site .legal{margin-top:56px;padding-top:28px;border-top:1px solid rgba(255,255,255,.1);font-size:12px;line-height:1.7;color:var(--on-bottle-faint)} footer.site .legal p + p{margin-top:10px} footer.site .bottom{margin-top:28px;display:flex;justify-content:space-between;gap:20px;flex-wrap:wrap;font-size:12.5px;color:var(--on-bottle-faint)} footer.site .bottom .links{display:flex;gap:22px;flex-wrap:wrap} /* ============================================================ INTERIOR PAGES — shared ============================================================ */ .page-hero{padding:56px 0 48px;border-bottom:1px solid var(--line)} .page-hero h1{font-size:clamp(32px,4vw,46px);margin-top:16px} .page-hero .lede{margin-top:16px;color:var(--muted);font-size:17px;max-width:60ch} .crumbs{display:flex;gap:8px;font-size:13px;color:var(--faint);flex-wrap:wrap} .crumbs a:hover{color:var(--ink);text-decoration:underline} .crumbs .sep{opacity:.6} .crumbs .here{color:var(--muted);font-weight:600} /* ---------- Forms ---------- */ .field{display:flex;flex-direction:column;gap:7px} .field label{font-size:13.5px;font-weight:600} .field label .req{color:var(--danger)} .field .help{font-size:12.5px;color:var(--faint)} .input, select.input, textarea.input{ width:100%;padding:12px 15px;border:1px solid var(--line);border-radius:10px; background:var(--card);color:var(--ink);font:inherit;font-size:15px; } .input:focus{outline:2px solid var(--fresh);outline-offset:0;border-color:var(--fresh)} .input::placeholder{color:var(--faint)} textarea.input{resize:vertical;min-height:110px} .form-grid{display:grid;grid-template-columns:1fr 1fr;gap:20px} .form-grid .full{grid-column:1/-1} /* ============================================================ CATEGORY PAGE ============================================================ */ .cat-layout{display:grid;grid-template-columns:250px minmax(0,1fr);gap:48px;padding:56px 0 96px} .filters{position:sticky;top:96px;align-self:start;display:grid;gap:28px} .filters h4{font-family:'Public Sans',sans-serif;font-size:12px;letter-spacing:.12em;text-transform:uppercase;font-weight:700;color:var(--faint);margin:0 0 14px} .filters .group{border-bottom:1px solid var(--line-soft);padding-bottom:24px} .filters .opt{display:flex;align-items:center;gap:10px;padding:6px 0;font-size:14.5px;color:var(--muted);cursor:pointer} .filters .opt:hover{color:var(--ink)} .filters .opt .box{width:17px;height:17px;border-radius:5px;border:1.5px solid var(--line);flex:none;display:grid;place-items:center;color:transparent} .filters .opt.on{color:var(--ink);font-weight:600} .filters .opt.on .box{background:var(--bottle);border-color:var(--bottle);color:var(--bottle-ink)} .filters .opt .box svg{width:11px;height:11px} .filters .opt .count{margin-left:auto;font-size:12px;color:var(--faint)} .toolbar{display:flex;justify-content:space-between;align-items:center;gap:16px;margin-bottom:26px;flex-wrap:wrap} .toolbar .meta{font-size:14px;color:var(--muted)} .toolbar .meta b{color:var(--ink)} .toolbar select{padding:9px 14px;border-radius:999px;border:1px solid var(--line);background:var(--card);color:var(--ink);font:inherit;font-size:13.5px} .prod-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:22px} .prod-card{padding:0;overflow:hidden;display:flex;flex-direction:column;transition:transform .2s,box-shadow .2s} .prod-card:hover{transform:translateY(-3px);box-shadow:var(--shadow-lg)} .prod-card .visual{background:var(--fresh-tint);padding:26px 0 18px;display:grid;place-items:center;position:relative} .prod-card .rx-req{ position:absolute;top:12px;left:12px;font-size:10px;font-weight:700;letter-spacing:.08em; text-transform:uppercase;background:var(--card);border:1px solid var(--line-soft); color:var(--muted);padding:4px 9px;border-radius:6px; } .prod-card .info{padding:20px 22px 22px;display:flex;flex-direction:column;gap:4px;flex:1} .prod-card .info b{font-size:16px} .prod-card .info .gen{font-size:12.5px;color:var(--faint)} .prod-card .price-row{display:flex;align-items:baseline;gap:9px;margin-top:12px} .prod-card .price-row .now{font-size:20px;font-weight:700;font-variant-numeric:tabular-nums} .prod-card .price-row .now small{font-size:12px;font-weight:500;color:var(--muted)} .prod-card .price-row .was{font-size:12.5px;color:var(--faint);text-decoration:line-through} .prod-card .btn{margin-top:14px} /* ---------- CSS bottle illustration ---------- */ .bottle{position:relative;width:74px;height:120px} .bottle .cap{position:absolute;top:0;left:50%;transform:translateX(-50%);width:46px;height:22px;border-radius:6px 6px 3px 3px;background:var(--bottle)} .bottle .neck{position:absolute;top:20px;left:50%;transform:translateX(-50%);width:38px;height:10px;background:color-mix(in srgb, var(--amber) 82%, #000 6%)} .bottle .glass{ position:absolute;top:28px;left:0;width:100%;height:92px;border-radius:12px; background:linear-gradient(160deg, color-mix(in srgb, var(--amber) 88%, #fff 12%), var(--amber) 55%, color-mix(in srgb, var(--amber) 78%, #000 22%)); } .bottle .label{ position:absolute;top:46px;left:50%;transform:translateX(-50%);width:58px;height:52px; background:var(--card);border-radius:6px;padding:7px 8px;display:grid;gap:5px;align-content:start; } .bottle .label i{display:block;height:4px;border-radius:2px;background:var(--line)} .bottle .label i:first-child{background:var(--fresh);width:60%} .bottle .label i:nth-child(2){width:85%} .bottle .label i:nth-child(3){width:70%} .bottle.lg{width:110px;height:180px} .bottle.lg .cap{width:66px;height:32px;border-radius:8px 8px 4px 4px} .bottle.lg .neck{top:29px;width:54px;height:14px} .bottle.lg .glass{top:40px;height:140px;border-radius:16px} .bottle.lg .label{top:68px;width:84px;height:80px;padding:10px 11px;gap:8px} .bottle.lg .label i{height:6px;border-radius:3px} /* ============================================================ PRODUCT PAGE ============================================================ */ .pdp{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,6fr);gap:64px;padding:48px 0 96px;align-items:start} .pdp-visual{padding:56px 32px;display:grid;place-items:center;gap:0;position:sticky;top:110px;background:var(--fresh-tint);border-radius:20px;border:1px solid var(--line-soft)} .pdp-visual .caption{margin-top:28px;font-size:12.5px;color:var(--muted);text-align:center;max-width:30ch} .pdp-info .gen-tag{display:inline-block;font-size:11px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:var(--fresh-strong);background:var(--fresh-tint);padding:5px 11px;border-radius:6px;margin-bottom:16px} .pdp-info h1{font-size:clamp(30px,3.6vw,42px)} .pdp-info .sub{margin-top:10px;color:var(--muted);font-size:15.5px} .opt-group{margin-top:28px} .opt-group .lbl{font-size:13px;font-weight:700;letter-spacing:.04em;margin-bottom:10px;display:flex;justify-content:space-between} .opt-group .lbl span:last-child{color:var(--faint);font-weight:500} .pills{display:flex;gap:10px;flex-wrap:wrap} .pill{ padding:10px 20px;border-radius:999px;border:1.5px solid var(--line);background:var(--card); font-size:14.5px;font-weight:600;color:var(--muted);transition:all .15s; } .pill:hover{border-color:var(--faint);color:var(--ink)} .pill.on{border-color:var(--bottle);background:var(--bottle);color:var(--bottle-ink)} .price-box{margin-top:32px;padding:24px 26px;border-radius:var(--radius);background:var(--card);border:1px solid var(--line-soft);box-shadow:var(--shadow)} .price-box .row{display:flex;justify-content:space-between;align-items:baseline} .price-box .now{font-size:32px;font-weight:700;font-variant-numeric:tabular-nums;letter-spacing:-.02em} .price-box .now small{font-size:14px;font-weight:500;color:var(--muted)} .price-box .was{font-size:14px;color:var(--faint);text-decoration:line-through} .price-box .save{margin-top:4px;font-size:13.5px;font-weight:600;color:var(--fresh-strong)} .price-box .btn{margin-top:18px} .price-box .fine{margin-top:12px;font-size:12px;color:var(--faint);text-align:center} .rx-note{ margin-top:22px;display:flex;gap:14px;padding:18px 20px;border-radius:12px; background:var(--amber-tint);border:1px solid color-mix(in srgb, var(--amber) 25%, transparent); font-size:13.5px;color:var(--ink); } .rx-note svg{width:20px;height:20px;color:var(--amber);flex:none;margin-top:1px} .rx-note b{display:block;margin-bottom:2px} .rx-note span{color:var(--muted)} .pdp-tabs{margin-top:36px} .pdp-tabs details{border:1px solid var(--line-soft);border-radius:12px;margin-bottom:10px;background:var(--card)} .pdp-tabs summary{padding:16px 20px;font-weight:600;font-size:15px;cursor:pointer;list-style:none;display:flex;justify-content:space-between;align-items:center} .pdp-tabs summary::-webkit-details-marker{display:none} .pdp-tabs summary .plus{color:var(--faint);font-size:18px;transition:transform .2s} .pdp-tabs details[open] summary .plus{transform:rotate(45deg);color:var(--fresh)} .pdp-tabs .a{padding:0 20px 18px;color:var(--muted);font-size:14.5px} .related{padding:0 0 96px} .related h2{font-size:26px;margin-bottom:32px} /* ============================================================ TRANSFER / PRESCRIPTIONS PAGE ============================================================ */ .transfer-layout{display:grid;grid-template-columns:minmax(0,6fr) minmax(0,5fr);gap:72px;padding:56px 0 96px;align-items:start} .transfer-form{padding:36px 38px} .transfer-form h2{font-size:24px;margin-bottom:8px} .transfer-form .sub{color:var(--muted);font-size:14.5px;margin-bottom:28px} .transfer-form .form-grid{margin-bottom:20px} .or-card{margin-top:22px;padding:22px 26px;display:flex;gap:16px;align-items:flex-start} .or-card svg{width:22px;height:22px;color:var(--fresh);flex:none;margin-top:2px} .or-card b{display:block;font-size:15px} .or-card p{font-size:13.5px;color:var(--muted);margin-top:4px} .timeline{display:grid;gap:0} .tl-item{display:flex;gap:20px;position:relative;padding-bottom:34px} .tl-item::before{content:"";position:absolute;left:17px;top:38px;bottom:0;width:1.5px;background:var(--line)} .tl-item:last-child::before{display:none} .tl-item .dot{ width:36px;height:36px;border-radius:50%;background:var(--fresh-tint);color:var(--fresh-strong); display:grid;place-items:center;flex:none;font-weight:700;font-size:14px; font-family:'Fraunces',Georgia,serif;font-style:italic; } .tl-item b{display:block;font-size:15.5px;padding-top:6px} .tl-item p{font-size:14px;color:var(--muted);margin-top:5px} /* ============================================================ CHECKOUT PAGE ============================================================ */ .stepper{display:flex;gap:0;margin:40px 0 48px;border:1px solid var(--line);border-radius:999px;overflow:hidden;background:var(--card)} .stepper .st{flex:1;display:flex;align-items:center;justify-content:center;gap:10px;padding:14px 10px;font-size:13.5px;font-weight:600;color:var(--faint);position:relative} .stepper .st + .st{border-left:1px solid var(--line-soft)} .stepper .st .n{width:22px;height:22px;border-radius:50%;border:1.5px solid var(--line);display:grid;place-items:center;font-size:11.5px;flex:none} .stepper .st.done{color:var(--fresh-strong)} .stepper .st.done .n{background:var(--fresh-tint);border-color:var(--fresh);color:var(--fresh-strong)} .stepper .st.now{color:var(--ink)} .stepper .st.now .n{background:var(--bottle);border-color:var(--bottle);color:var(--bottle-ink)} .checkout-layout{display:grid;grid-template-columns:minmax(0,7fr) minmax(0,5fr);gap:56px;padding-bottom:96px;align-items:start} .co-section{padding:30px 32px;margin-bottom:22px} .co-section h3{font-size:19px;margin-bottom:6px} .co-section .sub{font-size:13.5px;color:var(--muted);margin-bottom:24px} .pay-placeholder{ border:1.5px dashed var(--line);border-radius:12px;padding:26px;text-align:center; color:var(--faint);font-size:13.5px;background:var(--card-2); } .pay-placeholder b{display:block;color:var(--muted);font-size:14.5px;margin-bottom:4px} .summary{position:sticky;top:110px;padding:28px 30px} .summary h3{font-size:19px;margin-bottom:20px} .summary .item{display:flex;gap:14px;padding:14px 0;border-bottom:1px solid var(--line-soft);align-items:center} .summary .item .thumb{width:44px;height:44px;border-radius:10px;background:var(--fresh-tint);display:grid;place-items:center;flex:none} .summary .item .thumb svg{width:20px;height:20px;color:var(--fresh-strong)} .summary .item b{display:block;font-size:14px} .summary .item span{font-size:12px;color:var(--faint)} .summary .item .amt{margin-left:auto;font-weight:700;font-variant-numeric:tabular-nums;font-size:14.5px} .summary .line{display:flex;justify-content:space-between;font-size:14px;color:var(--muted);padding:7px 0;font-variant-numeric:tabular-nums} .summary .line.total{font-size:17px;font-weight:700;color:var(--ink);border-top:1px solid var(--line);margin-top:10px;padding-top:16px} .summary .line .free{color:var(--fresh-strong);font-weight:700} .summary .saved{ margin-top:14px;padding:12px 16px;border-radius:10px;background:var(--fresh-tint); color:var(--fresh-strong);font-size:13.5px;font-weight:600;display:flex;gap:9px;align-items:center; } .summary .saved svg{width:16px;height:16px;flex:none} .summary .badges{display:flex;gap:14px;margin-top:18px;justify-content:center;font-size:11.5px;color:var(--faint)} .summary .badges span{display:flex;align-items:center;gap:5px} .summary .badges svg{width:13px;height:13px} /* ============================================================ ABOUT PAGE ============================================================ */ .stats-band{display:grid;grid-template-columns:repeat(4,1fr);gap:24px;padding:0 0 96px} .stat{padding:30px;text-align:center} .stat .n{font-family:'Fraunces',Georgia,serif;font-size:40px;font-weight:460;color:var(--fresh-strong);font-variant-numeric:tabular-nums} .stat .l{font-size:13.5px;color:var(--muted);margin-top:6px} .split{display:grid;grid-template-columns:1fr 1fr;gap:72px;align-items:center} .split h2{font-size:clamp(26px,3vw,36px);margin-top:18px} .split .body{margin-top:18px;color:var(--muted);font-size:16px;display:grid;gap:14px} .lic-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:22px} .lic{padding:28px} .lic svg{width:26px;height:26px;color:var(--fresh);margin-bottom:16px} .lic b{display:block;font-size:16px} .lic p{font-size:14px;color:var(--muted);margin-top:8px} .lic .vlink{display:inline-block;margin-top:14px;font-size:13.5px;font-weight:600;color:var(--fresh-strong)} .lic .vlink:hover{text-decoration:underline} .team-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:22px} .member .ph-frame{aspect-ratio:4/4.6} .member b{display:block;margin-top:14px;font-size:15px} .member span{display:block;font-size:13px;color:var(--muted);margin-top:2px} /* ---------- art-directed photo placeholder ---------- */ .ph-frame{ border-radius:16px;overflow:hidden;position:relative;display:grid;place-items:center; background: linear-gradient(150deg, color-mix(in srgb, var(--bottle) 12%, var(--card)) 0%, color-mix(in srgb, var(--fresh) 18%, var(--card)) 55%, color-mix(in srgb, var(--amber) 16%, var(--card)) 100%); border:1px solid var(--line-soft); } .ph-frame .inner{text-align:center;padding:20px} .ph-frame svg{width:30px;height:30px;color:var(--faint);margin:0 auto 10px;opacity:.7} .ph-frame .note{font-size:11.5px;color:var(--muted);font-weight:600;letter-spacing:.02em;max-width:20ch;line-height:1.45} /* ============================================================ CONTACT / ASK A PHARMACIST ============================================================ */ .contact-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:22px;padding-bottom:64px} .cchan{padding:30px;text-align:left} .cchan .icon{width:44px;height:44px;border-radius:12px;background:var(--fresh-tint);display:grid;place-items:center;margin-bottom:18px} .cchan .icon svg{width:21px;height:21px;color:var(--fresh-strong)} .cchan b{font-size:17px;display:block} .cchan p{font-size:14px;color:var(--muted);margin-top:8px} .cchan .big{font-family:'Fraunces',Georgia,serif;font-size:22px;margin-top:14px;color:var(--ink)} .cchan .hint{font-size:12.5px;color:var(--faint);margin-top:6px} .contact-form-wrap{display:grid;grid-template-columns:minmax(0,7fr) minmax(0,5fr);gap:64px;padding-bottom:96px;align-items:start} .hours{padding:28px 30px} .hours h3{font-size:18px;margin-bottom:18px} .hours .row{display:flex;justify-content:space-between;font-size:14px;padding:9px 0;border-bottom:1px solid var(--line-soft);color:var(--muted)} .hours .row:last-child{border-bottom:none} .hours .row b{color:var(--ink);font-weight:600} .hours .em{margin-top:18px;padding:14px 16px;border-radius:10px;background:var(--amber-tint);font-size:13px;color:var(--ink)} /* ============================================================ PALETTE SWITCHER + TOAST (injected by JS) ============================================================ */ .prx-switch{ position:fixed;z-index:900;right:22px;bottom:22px;display:flex;flex-direction:column; align-items:flex-end;gap:12px;font-family:'Public Sans',sans-serif; } .prx-switch .panel{ background:var(--card);border:1px solid var(--line);border-radius:16px;box-shadow:var(--shadow-lg); padding:16px 18px;display:none;flex-direction:column;gap:14px;min-width:230px; } .prx-switch.open .panel{display:flex} .prx-switch .panel h5{margin:0;font-size:11px;letter-spacing:.12em;text-transform:uppercase;color:var(--faint);font-weight:700} .prx-switch .swatches{display:grid;gap:8px} .prx-switch .sw{ display:flex;align-items:center;gap:11px;padding:9px 11px;border-radius:10px;border:1.5px solid var(--line-soft); background:transparent;font-size:13.5px;font-weight:600;color:var(--muted);text-align:left; } .prx-switch .sw:hover{border-color:var(--faint);color:var(--ink)} .prx-switch .sw.on{border-color:var(--fresh);color:var(--ink);background:var(--fresh-tint)} .prx-switch .sw .dot2{width:22px;height:22px;border-radius:50%;flex:none;border:2px solid var(--card);box-shadow:0 0 0 1px var(--line)} .prx-switch .themes{display:flex;gap:6px} .prx-switch .themes button{ flex:1;padding:7px 0;border-radius:8px;border:1.5px solid var(--line-soft);background:transparent; font-size:12.5px;font-weight:600;color:var(--muted); } .prx-switch .themes button.on{border-color:var(--fresh);color:var(--ink);background:var(--fresh-tint)} .prx-switch .fab{ width:52px;height:52px;border-radius:50%;border:1px solid var(--line);background:var(--card); box-shadow:var(--shadow-lg);display:grid;place-items:center;color:var(--ink); } .prx-switch .fab:hover{border-color:var(--faint)} .prx-switch .fab svg{width:22px;height:22px} .prx-toast{ position:fixed;z-index:950;left:50%;bottom:34px;transform:translateX(-50%) translateY(20px); background:var(--bottle);color:var(--bottle-ink);padding:13px 22px;border-radius:999px; font-size:14px;font-weight:600;box-shadow:var(--shadow-lg);opacity:0;pointer-events:none; transition:opacity .25s,transform .25s;max-width:88vw;text-align:center; } .prx-toast.show{opacity:1;transform:translateX(-50%) translateY(0)} /* ============================================================ RESPONSIVE ============================================================ */ @media (max-width:1080px){ .nav-links{display:none} .hero .wrap{grid-template-columns:1fr;gap:64px} .hero-viz{min-height:520px;max-width:520px} .prices .wrap,.care .wrap,.transfer-layout,.checkout-layout,.contact-form-wrap,.split,.pdp{grid-template-columns:1fr;gap:48px} .steps,.coverage-grid,.quotes,.lic-grid,.contact-grid{grid-template-columns:1fr} .cat-grid{grid-template-columns:1fr 1fr} .prod-grid{grid-template-columns:1fr 1fr} .team-grid,.stats-band{grid-template-columns:1fr 1fr} .cat-layout{grid-template-columns:1fr} .filters{position:static} .accred .item + .item{border-left:none;border-top:1px solid var(--line)} .pdp-visual,.summary{position:static} footer.site .cols{grid-template-columns:1fr 1fr} } @media (max-width:640px){ .wrap{padding:0 20px} section{padding:64px 0} .nav-search{display:none} .topbar .right{display:none} .hero{padding:48px 0 64px} .cat-grid,.prod-grid,.team-grid,.stats-band,.form-grid{grid-template-columns:1fr} footer.site .cols{grid-template-columns:1fr} .price-card{position:relative;top:auto;right:auto;margin-top:20px} .hero-viz{min-height:0} .chip.verified{top:-14px;right:4px} .chip.delivery{display:none} .stepper{flex-direction:column;border-radius:16px} .stepper .st{justify-content:flex-start;padding:12px 18px} .stepper .st + .st{border-left:none;border-top:1px solid var(--line-soft)} }