/* ============================================================ BridgeWell — Treatments storefront (layout-only) Loaded only on /treatments/ (). COLOR/BRAND POLICY: this file introduces NO palette of its own. Every color, radius, shadow, and font comes from the global BridgeWell tokens in bridgewell.css (:root --bw-*) and the shared public component classes (.hero, .card, .btn, .section, .section-header, .section-label, .badge, .grid). These rules only add layout the shared classes don't cover (centered hero, the product-image media frame, price typography, responsive tweaks). The page uses the standard BridgeWell navbar + footer unchanged. ============================================================ */ /* ── Hero: center the standard navy .hero for the storefront ─────── */ .bw-treatments .bw-tx-hero .hero-content { max-width: 720px; margin: 0 auto; text-align: center; } .bw-treatments .bw-tx-actions { display: flex; gap: .75rem; justify-content: center; flex-wrap: wrap; margin-top: 1.25rem; } .bw-treatments .bw-tx-note { color: rgba(255, 255, 255, .72); font-size: .85rem; line-height: 1.6; max-width: 54ch; margin: 1.5rem auto 0; } /* ── Treatment card: real product image in a consistent 4:3 frame ── */ .bw-treatments .bw-tx-card { display: flex; flex-direction: column; height: 100%; } .bw-treatments .bw-tx-media { aspect-ratio: 1 / 1; background: var(--bw-surface); border-bottom: 1px solid var(--bw-border); overflow: hidden; } .bw-treatments .bw-tx-media img { width: 100%; height: 100%; object-fit: cover; display: block; } .bw-treatments .bw-tx-card .card-body { display: flex; flex-direction: column; flex: 1 1 auto; } .bw-treatments .bw-tx-badges { display: flex; flex-wrap: wrap; gap: .4rem; min-height: 1.5rem; margin-bottom: .6rem; } .bw-treatments .bw-tx-name { margin: .15rem 0 .1rem; color: var(--bw-navy); } .bw-treatments .bw-tx-dose { margin: 0 0 .5rem; color: var(--bw-muted); font-size: .85rem; } .bw-treatments .bw-tx-price { margin: .25rem 0 .7rem; } .bw-treatments .bw-tx-amount { font-size: 1.6rem; font-weight: 800; color: var(--bw-navy); line-height: 1; } .bw-treatments .bw-tx-amount--soft { font-size: 1rem; font-weight: 700; color: var(--bw-blue-dark); } .bw-treatments .bw-tx-unit { display: block; color: var(--bw-muted); font-size: .78rem; margin-top: .15rem; } .bw-treatments .bw-tx-note-sm { display: block; color: var(--bw-muted); font-size: .78rem; margin-top: .1rem; } .bw-treatments .bw-tx-copy { color: var(--bw-slate); font-size: .92rem; line-height: 1.55; margin: 0 0 1.1rem; flex: 1 1 auto; } .bw-treatments .bw-tx-card .btn { margin-top: auto; } .bw-treatments .bw-tx-footnote { max-width: 880px; margin: 2rem auto 0; text-align: center; color: var(--bw-muted); font-size: .82rem; line-height: 1.6; } .bw-treatments .bw-tx-empty { max-width: 560px; margin: 0 auto; text-align: center; } .bw-treatments .bw-tx-empty p { color: var(--bw-slate); margin: 0 0 1.25rem; line-height: 1.6; } /* ── What you pay: reuse .grid + .card, add amount + feature accent ── */ .bw-treatments .bw-tx-pay-step { text-align: center; } .bw-treatments .bw-tx-pay-step--feature { border-color: var(--bw-blue); box-shadow: 0 0 0 1px var(--bw-blue), var(--bw-shadow-md); } .bw-treatments .bw-tx-pay-amount { display: block; font-size: 1.6rem; font-weight: 800; color: var(--bw-blue-dark); margin-bottom: .4rem; } /* ── Feature + find-path: reuse .card; small layout helpers ──────── */ .bw-treatments .bw-tx-find { max-width: 680px; margin: 0 auto; text-align: center; } .bw-treatments .bw-tx-find p { color: var(--bw-slate); line-height: 1.65; } .bw-treatments .bw-tx-disclaimer { color: var(--bw-muted); font-size: .82rem; } /* ── Final CTA: reuse the navy .hero gradient, centered ─────────── */ .bw-treatments .bw-tx-final { text-align: center; padding: 4.5rem 0; } .bw-treatments .bw-tx-final .container { max-width: 640px; } .bw-treatments .bw-tx-final p { color: rgba(255, 255, 255, .82); margin: 0 0 1.75rem; } /* ── Responsive (grids already collapse via global .grid-*) ─────── */ @media (max-width: 560px) { .bw-treatments .bw-tx-actions .btn { width: 100%; } } @media (prefers-reduced-motion: reduce) { .bw-treatments .card, .bw-treatments .btn { transition: none; } }