/* ============================================================ 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; } /* ── Hero eyebrow: brand pill + LegitScript trust pill ─────────────── A small, balanced supporting row above the headline. Both pills share ONE compact treatment so they read as a matched set — content-sized, consistent height/weight, subtle on the navy hero, and quieter than the headline. We reset the global `.hero-badge` here (it ships a standalone `margin-bottom:1.5rem` + wider padding/larger type meant for a single badge, which otherwise misaligns the two pills and over-spaces the row). */ .bw-treatments .bw-tx-eyebrow-row { display: flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: .4rem .5rem; margin: 0 0 .9rem; } .bw-treatments .bw-tx-eyebrow-row .hero-badge, .bw-treatments .bw-tx-trust-badge { display: inline-flex; align-items: center; gap: .4rem; margin: 0; /* override .hero-badge's 1.5rem */ padding: .28rem .7rem; border-radius: 999px; background: rgba(255, 255, 255, .08); border: 1px solid rgba(255, 255, 255, .18); color: rgba(255, 255, 255, .82); font-size: .72rem; font-weight: 600; letter-spacing: .02em; line-height: 1; white-space: nowrap; } /* Trust pill: keep it positive without shouting — a subtle teal-tinted border + the teal check carry the trust signal. */ .bw-treatments .bw-tx-trust-badge { border-color: rgba(20, 184, 166, .45); color: #fff; } .bw-treatments .bw-tx-trust-dot { display: inline-flex; align-items: center; justify-content: center; width: .95rem; height: .95rem; border-radius: 50%; background: var(--bw-teal, #14b8a6); color: #fff; font-size: .6rem; line-height: 1; } /* Phones: let the pills wrap cleanly and shrink a touch so they never crowd the hero or stretch full-width. */ @media (max-width: 420px) { .bw-treatments .bw-tx-eyebrow-row .hero-badge, .bw-treatments .bw-tx-trust-badge { font-size: .68rem; padding: .26rem .6rem; } } .bw-treatments .bw-tx-hero-support { color: rgba(255, 255, 255, .82); font-size: .95rem; line-height: 1.6; max-width: 56ch; margin: 1rem auto 0; } /* ── Brand-name GLP-1 cards: premium modifier on the shared card ──── */ .bw-treatments .bw-tx-brandgrid { align-items: stretch; } .bw-treatments .bw-tx-brandcard { display: flex; flex-direction: column; height: 100%; position: relative; border-color: var(--bw-blue); box-shadow: 0 0 0 1px var(--bw-blue), var(--bw-shadow-md); } .bw-treatments .bw-tx-brandcard .card-body { display: flex; flex-direction: column; flex: 1 1 auto; } /* Clinician-considered options (Ozempic/Mounjaro) read as quieter — they are not promoted as BridgeWell weight-loss products. */ .bw-treatments .bw-tx-brandcard--considered { border-color: var(--bw-border); box-shadow: var(--bw-shadow-sm, 0 1px 2px rgba(15, 23, 42, .06)); } .bw-treatments .bw-tx-ingredient { margin: 0 0 .15rem; color: var(--bw-blue-dark); font-size: .82rem; font-weight: 600; } .bw-treatments .bw-tx-amount--brand { font-size: 1.15rem; font-weight: 800; color: var(--bw-navy); line-height: 1.25; } /* ── "Which path is right for me?" comparison columns ────────────── */ .bw-treatments .bw-tx-compare { align-items: stretch; } .bw-treatments .bw-tx-comparecol { display: flex; } .bw-treatments .bw-tx-comparecol .card-body { width: 100%; } .bw-treatments .bw-tx-comparetitle { margin: 0 0 1rem; color: var(--bw-navy); font-size: 1.15rem; } .bw-treatments .bw-tx-comparelist { list-style: none; margin: 0; padding: 0; } .bw-treatments .bw-tx-comparelist li { position: relative; padding: .45rem 0 .45rem 1.6rem; color: var(--bw-slate); font-size: .92rem; line-height: 1.55; border-top: 1px solid var(--bw-border); } .bw-treatments .bw-tx-comparelist li:first-child { border-top: 0; } .bw-treatments .bw-tx-comparelist li::before { content: "✓"; position: absolute; left: 0; top: .5rem; color: var(--bw-teal, #14b8a6); font-weight: 700; font-size: .85rem; } /* ── Medication safety (fair-balance) accordion ──────────────────── */ .bw-treatments .bw-tx-safety { max-width: 880px; margin: 0 auto; } .bw-treatments .bw-tx-safety-details { background: #fff; border: 1px solid var(--bw-border); border-radius: var(--bw-radius, 12px); box-shadow: var(--bw-shadow-sm, 0 1px 2px rgba(15, 23, 42, .06)); } .bw-treatments .bw-tx-safety-summary { display: flex; align-items: center; justify-content: space-between; gap: 1rem; cursor: pointer; list-style: none; padding: 1.15rem 1.4rem; font-weight: 700; color: var(--bw-navy); font-size: 1rem; } .bw-treatments .bw-tx-safety-summary::-webkit-details-marker { display: none; } .bw-treatments .bw-tx-safety-icon { flex: 0 0 auto; font-size: 1.4rem; line-height: 1; color: var(--bw-blue-dark); transition: transform .2s ease; } .bw-treatments .bw-tx-safety-details[open] .bw-tx-safety-icon { transform: rotate(45deg); } .bw-treatments .bw-tx-safety-body { padding: 0 1.4rem 1.3rem; } .bw-treatments .bw-tx-safety-body p { margin: 0; color: var(--bw-slate); font-size: .9rem; line-height: 1.65; } /* ── Responsive (grids already collapse via global .grid-*) ─────── */ @media (max-width: 560px) { .bw-treatments .bw-tx-actions .btn { width: 100%; } .bw-treatments .bw-tx-amount--brand { font-size: 1.05rem; } } @media (prefers-reduced-motion: reduce) { .bw-treatments .card, .bw-treatments .btn, .bw-treatments .bw-tx-safety-icon { transition: none; } }