*,*::before,*::after{box-sizing:border-box;margin:0;padding:0} /* NOTE: do NOT put overflow-x:clip/hidden on or — it disables iOS WebKit momentum/inertia scrolling (page "hard stops" after a swipe). There is no real horizontal overflow at the document level (verified scrollWidth == viewport); wide elements like the marquee rows are clipped by their own overflow:hidden containers. */ /* ══════════════════════════════════════════════════════════════════════ WEBSITE-WIDE NO-CLIP RULE (added 2026-07-09) Content must never be clipped, cut off, or covered on ANY screen size. A smaller laptop must reflow — never hide the bottom of a card/section. Enforce, everywhere: 1. Content sections are CONTENT-DRIVEN height. Use `min-height`, never a fixed `height:` or `max-height:` that can trap content. `100vh` is only ever a `min-height` (the section still grows past it when content needs). 2. `overflow:hidden` belongs ONLY to decorative wrappers (rounded image/card crops, background/blob layers). NEVER on a section that holds the actual text/buttons, because clipped content just disappears. 3. Section blend-overlaps (a dark section sliding up over a light one) use a FIXED px margin, NEVER a `vh` value — a vh overlap scales with screen height and covers content on short screens. 4. Do NOT put overflow-x on / (breaks iOS momentum scroll — see note above). There is no real horizontal overflow; wide rows self-clip. The one intentional exception is a `position:sticky` scrollytelling stage (e.g. .sex-v4-stage), which is a pinned viewport frame by design. ══════════════════════════════════════════════════════════════════════ */ :root{ /* Dark (hero / CTA / footer) */ --dark:#060e08; --dark2:#0b1a0e; --green:#1B4332; --green-mid:#2D6A4F; --green-bright:#52B788; --green-pale:#e8f5ee; --green-glow:rgba(82,183,136,0.18); --border-green:rgba(82,183,136,0.25); /* Light (most sections) */ --white:#ffffff; --off-white:#f7f9f7; --light-gray:#f0f4f1; --border-light:#e5ede8; /* Text */ --ink:#111a14; --ink2:#4a6355; --ink3:#8aaa96; /* Dark text */ --text:#dff0e8; --text2:#6a9a7a; --text3:#2d5a3d; --display:'Cormorant Garamond',serif; --body:'Inter',sans-serif; --radius:100px; } /* smooth + ScrollTrigger pin/scrub causes bounce/jank — keep document scroll instant */ html{scroll-behavior:auto;overscroll-behavior:none} body{background:var(--white);color:var(--ink);font-family:var(--body);font-size:15px;line-height:1.6;overscroll-behavior:none} a{color:inherit;text-decoration:none} button{font-family:var(--body);cursor:pointer;border:none;background:none} .container{max-width:1200px;margin:0 auto;padding:0 48px} .container-sm{max-width:820px;margin:0 auto;padding:0 48px} /* ── Animations ── */ @keyframes fadeUp{from{opacity:0;transform:translateY(24px)}to{opacity:1;transform:translateY(0)}} @keyframes float{0%,100%{transform:translateY(0)}50%{transform:translateY(-10px)}} @keyframes float2{0%,100%{transform:translateY(0)}50%{transform:translateY(-9px)}} @keyframes float3{0%,100%{transform:translateY(0)}50%{transform:translateY(-10px)}} @keyframes float4{0%,100%{transform:translateY(0)}50%{transform:translateY(-8px)}} @keyframes float5{0%,100%{transform:translateY(0)}50%{transform:translateY(-10px)}} @keyframes float6{0%,100%{transform:translateY(0)}50%{transform:translateY(-9px)}} @keyframes float7{0%,100%{transform:translateY(0)}50%{transform:translateY(-10px)}} @keyframes scan{0%{top:-100%}100%{top:200%}} @keyframes glow-pulse{0%,100%{opacity:0.6}50%{opacity:1}} .anim-up{opacity:0;transform:translateY(20px);transition:opacity 0.75s ease,transform 0.75s ease} .anim-up.visible{opacity:1;transform:translateY(0)} .d1{transition-delay:.1s}.d2{transition-delay:.2s}.d3{transition-delay:.3s} .d4{transition-delay:.4s}.d5{transition-delay:.5s}.d6{transition-delay:.6s} /* ── Nav ── */ nav{ position:fixed;top:0;left:0;right:0;z-index:200; height:68px;padding:0 48px; display:flex;align-items:center;justify-content:space-between; background:rgba(255,255,255,0.92); backdrop-filter:blur(20px);-webkit-backdrop-filter:blur(20px); border-bottom:1px solid var(--border-light); box-shadow:0 10px 48px rgba(26,61,43,0.38), 0 3px 10px rgba(26,61,43,0.2); transition:all 0.3s; } nav.dark{background:rgba(6,14,8,0.92);border-bottom-color:rgba(255,255,255,0.08)} .nav-logo img{height:38px;width:auto;filter:brightness(0) saturate(100%) invert(43%) sepia(16%) saturate(700%) hue-rotate(100deg) brightness(90%)} .nav-logo img.light-logo{display:none} nav.dark .nav-logo img.dark-logo{display:none} nav.dark .nav-logo img.light-logo{display:block} .nav-links{display:flex;gap:20px;align-items:center;} .nav-divider{width:1px;height:14px;background:rgba(26,61,43,0.2);flex-shrink:0;} nav.dark .nav-divider{background:rgba(255,255,255,0.15);} .nav-links a{font-size:10px;letter-spacing:0.8px;text-transform:uppercase;color:var(--ink2);transition:color 0.2s;font-weight:400} .nav-links a:hover{color:var(--ink)} nav.dark .nav-links a{color:#4a7c5e} nav.dark .nav-links a:hover{color:#1a3d2b} .nav-dropdown{position:relative;display:flex;align-items:center;} .nav-dropdown-trigger{display:flex;align-items:center;gap:4px;} .nav-dropdown-trigger::after{content:'';width:6px;height:6px;border-right:1px solid currentColor;border-bottom:1px solid currentColor;transform:rotate(45deg);margin-top:-3px;opacity:0.6;} .nav-dropdown-menu{ display:none;position:absolute;top:calc(100% + 18px);left:50%;transform:translateX(-50%); background:rgba(255,255,255,0.96);backdrop-filter:blur(20px);-webkit-backdrop-filter:blur(20px); border:1px solid rgba(0,0,0,0.07);border-radius:14px; padding:8px 0;min-width:180px; box-shadow:0 8px 32px rgba(0,0,0,0.12); z-index:300; } .nav-dropdown-menu::before{content:'';position:absolute;top:-6px;left:50%;transform:translateX(-50%) rotate(45deg);width:10px;height:10px;background:rgba(255,255,255,0.96);border-left:1px solid rgba(0,0,0,0.07);border-top:1px solid rgba(0,0,0,0.07);} .nav-dropdown-menu a{display:block;padding:9px 20px;font-size:12px;letter-spacing:0.8px;text-transform:uppercase;color:var(--ink2);transition:background 0.15s,color 0.15s;font-weight:400;} .nav-dropdown-menu a:hover{background:rgba(26,83,53,0.06);color:var(--ink);} .nav-dropdown:hover .nav-dropdown-menu{display:block;} .nav-right{display:flex;align-items:center;gap:14px} .nav-login{font-size:12px;letter-spacing:1px;text-transform:uppercase;color:var(--ink2);transition:color 0.2s;font-weight:400} nav.dark .nav-login{color:#4a7c5e} .nav-cta{ padding:11px 24px; background:var(--green);color:#fff; font-size:12px;font-weight:500;letter-spacing:0.5px; border-radius:var(--radius);transition:all 0.2s; } .nav-cta:hover{background:var(--green-mid);transform:translateY(-1px)} .nav-mobile-btn{display:none;flex-direction:column;gap:5px;cursor:pointer} .nav-mobile-btn span{width:24px;height:1.5px;background:var(--ink);display:block;transition:background 0.3s} nav.dark .nav-mobile-btn span{background:#1a3d2b} /* Nav blue theme (peptides) */ nav.blue{background:rgba(10,22,40,0.95);border-bottom-color:rgba(59,130,246,0.1);box-shadow:0 10px 48px rgba(10,22,40,0.4)} nav.blue .nav-logo img.dark-logo{display:none} nav.blue .nav-logo img.light-logo{display:block;filter:brightness(0) saturate(100%) invert(55%) sepia(30%) saturate(600%) hue-rotate(185deg) brightness(95%)} nav.blue .nav-links a{color:rgba(59,130,246,0.6)} nav.blue .nav-links a:hover{color:rgba(59,130,246,1)} nav.blue .nav-divider{background:rgba(59,130,246,0.15)} nav.blue .nav-login{color:rgba(59,130,246,0.6)} nav.blue .nav-cta{background:rgba(59,130,246,0.15);border:1px solid rgba(59,130,246,0.3);color:#3b82f6} nav.blue .nav-cta:hover{background:rgba(59,130,246,0.25)} nav.blue .nav-mobile-btn span{background:rgba(59,130,246,0.5)} /* Nav red theme (sexual health) */ nav.red{background:rgba(20,8,8,0.95);border-bottom-color:rgba(224,64,64,0.1);box-shadow:0 10px 48px rgba(20,8,8,0.4)} nav.red .nav-logo img.dark-logo{display:none} nav.red .nav-logo img.light-logo{display:block;filter:brightness(0) saturate(100%) invert(40%) sepia(80%) saturate(500%) hue-rotate(330deg) brightness(90%)} nav.red .nav-links a{color:rgba(224,64,64,0.5)} nav.red .nav-links a:hover{color:rgba(224,64,64,0.9)} nav.red .nav-divider{background:rgba(224,64,64,0.15)} nav.red .nav-login{color:rgba(224,64,64,0.5)} nav.red .nav-cta{background:rgba(224,64,64,0.15);border:1px solid rgba(224,64,64,0.3);color:#e04040} nav.red .nav-cta:hover{background:rgba(224,64,64,0.25)} nav.red .nav-mobile-btn span{background:rgba(224,64,64,0.5)} /* Dark tinted nav variants for the gold/lavender/beige sections — same treatment as nav.dark/.blue/.red (dark bg + accent-colored logo/links). */ nav.gold{background:rgba(26,18,2,0.95);border-bottom-color:rgba(212,168,50,0.12);box-shadow:0 10px 48px rgba(26,18,2,0.4)} nav.gold .nav-logo img.dark-logo{display:none} nav.gold .nav-logo img.light-logo{display:block;filter:brightness(0) saturate(100%) invert(74%) sepia(46%) saturate(560%) hue-rotate(2deg) brightness(92%)} nav.gold .nav-links a{color:rgba(212,168,50,0.62)} nav.gold .nav-links a:hover{color:#e8c84a} nav.gold .nav-divider{background:rgba(212,168,50,0.18)} nav.gold .nav-login{color:rgba(212,168,50,0.62)} nav.gold .nav-cta{background:rgba(212,168,50,0.15);border:1px solid rgba(212,168,50,0.32);color:#d4a832} nav.gold .nav-cta:hover{background:rgba(212,168,50,0.25)} nav.gold .nav-mobile-btn span{background:rgba(212,168,50,0.5)} nav.lavender{background:rgba(20,14,34,0.95);border-bottom-color:rgba(155,126,216,0.12);box-shadow:0 10px 48px rgba(20,14,34,0.4)} nav.lavender .nav-logo img.dark-logo{display:none} nav.lavender .nav-logo img.light-logo{display:block;filter:brightness(0) saturate(100%) invert(60%) sepia(38%) saturate(700%) hue-rotate(222deg) brightness(95%)} nav.lavender .nav-links a{color:rgba(155,126,216,0.65)} nav.lavender .nav-links a:hover{color:#bda6ec} nav.lavender .nav-divider{background:rgba(155,126,216,0.18)} nav.lavender .nav-login{color:rgba(155,126,216,0.65)} nav.lavender .nav-cta{background:rgba(155,126,216,0.15);border:1px solid rgba(155,126,216,0.32);color:#9b7ed8} nav.lavender .nav-cta:hover{background:rgba(155,126,216,0.25)} nav.lavender .nav-mobile-btn span{background:rgba(155,126,216,0.5)} nav.beige{background:rgba(26,20,12,0.95);border-bottom-color:rgba(201,173,130,0.14);box-shadow:0 10px 48px rgba(26,20,12,0.4)} nav.beige .nav-logo img.dark-logo{display:none} nav.beige .nav-logo img.light-logo{display:block;filter:brightness(0) saturate(100%) invert(78%) sepia(24%) saturate(420%) hue-rotate(2deg) brightness(92%)} nav.beige .nav-links a{color:rgba(201,173,130,0.68)} nav.beige .nav-links a:hover{color:#dcc59a} nav.beige .nav-divider{background:rgba(201,173,130,0.2)} nav.beige .nav-login{color:rgba(201,173,130,0.68)} nav.beige .nav-cta{background:rgba(201,173,130,0.15);border:1px solid rgba(201,173,130,0.32);color:#c9ad82} nav.beige .nav-cta:hover{background:rgba(201,173,130,0.25)} nav.beige .nav-mobile-btn span{background:rgba(201,173,130,0.5)} /* ── Desktop nav hover dropdowns (>=769px; mobile menu <=768 is separate/untouched) ── Each category label is a normal themed nav link (clickable → its category page). Hovering the item reveals a dark dropdown panel: an "All …" row on top, then the built treatment pages. Placed after the nav theme rules so panel-link colors win. */ @media (min-width: 769px) { .nav-item{ position:relative; display:flex; align-items:center; } /* the category label keeps the themed .nav-links a styling (clickable header) */ .nav-dd{ position:absolute; top:100%; left:50%; margin-left:-118px; min-width:236px; padding-top:18px; /* transparent hover bridge to the panel */ opacity:0; visibility:hidden; pointer-events:none; transform:translateY(8px); transition:opacity .2s ease, transform .2s ease; z-index:1400; } .nav-dd-end{ left:auto; right:0; margin-left:0; } /* rightmost menus align to the right edge */ .nav-item:hover > .nav-dd, .nav-item:focus-within > .nav-dd{ opacity:1; visibility:visible; pointer-events:auto; transform:translateY(0); } .nav-dd-inner{ display:flex; flex-direction:column; background:linear-gradient(165deg,#0f2418 0%,#0c1e12 60%,#091910 100%); border:1px solid rgba(255,255,255,0.09); border-radius:16px; padding:8px; box-shadow:0 24px 64px rgba(0,0,0,0.45), inset 0 1px 0 rgba(255,255,255,0.05); -webkit-backdrop-filter:blur(20px); backdrop-filter:blur(20px); } /* `nav ` prefix + `a.` beat the base/duplicate `.nav-links a` (uppercase) rules */ nav .nav-dd a{ display:block; padding:9px 16px; border-radius:9px; font-size:12.5px; letter-spacing:0.2px; text-transform:none; font-weight:400; color:rgba(255,255,255,0.72) !important; /* beat the nav. .nav-links a colors */ white-space:nowrap; transition:background .16s ease, color .16s ease; } nav .nav-dd a:hover{ background:rgba(82,183,136,0.16); color:#fff !important; } nav a.nav-dd-all{ font-weight:600; color:#fff !important; margin-bottom:2px; } nav a.nav-dd-all:hover{ background:rgba(82,183,136,0.2); } } /* NAV-DROPDOWN THEME RULE: the hover dropdown panel must match the nav's current theme colour as it changes through the page sections (green default, then blue / red / gold / lavender / beige). Base panel above = green (used for the light nav and nav.dark green sections); each nav. below retints the panel + accents. Link text stays light (readable on every dark tint). */ nav.blue .nav-dd-inner{ background:linear-gradient(165deg,#0f1f38 0%,#0b1628 60%,#081120 100%); border-color:rgba(59,130,246,0.14); } nav.blue .nav-dd a:hover{ background:rgba(59,130,246,0.18); } nav.blue a.nav-dd-all:hover{ background:rgba(59,130,246,0.24); } nav.red .nav-dd-inner{ background:linear-gradient(165deg,#241110 0%,#1a0b0b 60%,#130808 100%); border-color:rgba(224,64,64,0.14); } nav.red .nav-dd a:hover{ background:rgba(224,64,64,0.16); } nav.red a.nav-dd-all:hover{ background:rgba(224,64,64,0.22); } nav.gold .nav-dd-inner{ background:linear-gradient(165deg,#24190a 0%,#1a1204 60%,#130e02 100%); border-color:rgba(212,168,50,0.16); } nav.gold .nav-dd a:hover{ background:rgba(212,168,50,0.16); } nav.gold a.nav-dd-all:hover{ background:rgba(212,168,50,0.22); } nav.lavender .nav-dd-inner{ background:linear-gradient(165deg,#241a3a 0%,#1a1230 60%,#130d22 100%); border-color:rgba(155,126,216,0.16); } nav.lavender .nav-dd a:hover{ background:rgba(155,126,216,0.18); } nav.lavender a.nav-dd-all:hover{ background:rgba(155,126,216,0.24); } nav.beige .nav-dd-inner{ background:linear-gradient(165deg,#241c11 0%,#1a140c 60%,#130f08 100%); border-color:rgba(201,173,130,0.16); } nav.beige .nav-dd a:hover{ background:rgba(201,173,130,0.16); } nav.beige a.nav-dd-all:hover{ background:rgba(201,173,130,0.22); } /* ── Buttons ── */ .btn-green{ display:inline-flex;align-items:center;gap:10px; padding:15px 32px;background:var(--green);color:#fff; font-size:13px;font-weight:500;letter-spacing:0.3px; border-radius:var(--radius);transition:all 0.25s; } .btn-green:hover{background:var(--green-mid);transform:translateY(-2px);box-shadow:0 8px 32px rgba(27,67,50,0.25)} .btn-green-bright{ display:inline-flex;align-items:center;gap:10px; padding:18px 40px;background:#1a3d2b;color:#fff; font-size:14px;font-weight:500;letter-spacing:0.3px;border-radius:var(--radius);transition:all 0.28s; box-shadow:0 4px 20px rgba(26,61,43,0.25); } .btn-green-bright:hover{background:#142e20;transform:translateY(-2px);box-shadow:0 8px 32px rgba(26,61,43,0.3)} .btn-white{ display:inline-flex;align-items:center;gap:10px; padding:15px 32px;background:#fff;color:var(--ink); font-size:13px;font-weight:500;border-radius:var(--radius);transition:all 0.25s; } .btn-white:hover{transform:translateY(-2px);box-shadow:0 8px 24px rgba(0,0,0,0.15)} .btn-outline-dark{ display:inline-flex;align-items:center;gap:10px; padding:15px 32px;border:1.5px solid var(--ink);color:var(--ink); font-size:13px;font-weight:400;border-radius:var(--radius);transition:all 0.25s; } .btn-outline-dark:hover{background:var(--ink);color:#fff} /* ── Hero (dark) ── */ .hero{ /* NO-CLIP RULE: 100vh only as a min (still grows for content). Reduced to 84vh so the hero is shorter than a full screen and the next section peeks in below the fold — the section still grows past this when content needs it. */ min-height:84vh; background: radial-gradient(ellipse 620px 480px at 38% 78%, rgba(26,61,43,0.20), transparent 62%), radial-gradient(ellipse 540px 420px at 88% 72%, rgba(26,61,43,0.18), transparent 60%), radial-gradient(ellipse 720px 540px at 62% 22%, rgba(45,106,79,0.14), transparent 68%), #eef4ef; display:grid;grid-template-columns:33fr 67fr; align-items:flex-start;position:relative;overflow:hidden; padding-top:68px; /* NO-CLIP RULE: reserve space below the hero content so the next section's fixed -80px blend-overlap never covers the trust chips, even when 100vh is shorter than the content on smaller laptops. min-height stays content-driven (grows past 100vh when needed) — it never forces content into a fixed frame. */ padding-bottom:120px; isolation:isolate; transform:translateZ(0); -webkit-transform:translateZ(0); backface-visibility:hidden; } .hero-bg{ position:absolute;inset:0;pointer-events:none;overflow:hidden;z-index:0; } #hero-constellation{ position:absolute;inset:0;width:100%;height:100%;display:block; pointer-events:none; z-index:1; transform:translateZ(0); -webkit-transform:translateZ(0); will-change:transform,opacity; } /* Soft hunter-green watercolor blobs — adds brand-color depth to the otherwise flat mint hero. */ .hero::before{ content:''; position:absolute; inset:-8%; pointer-events:none; background: radial-gradient(ellipse 620px 480px at 38% 78%, rgba(26,61,43,0.42), transparent 62%), radial-gradient(ellipse 540px 420px at 88% 72%, rgba(26,61,43,0.38), transparent 60%), radial-gradient(ellipse 720px 540px at 62% 22%, rgba(45,106,79,0.30), transparent 68%), radial-gradient(ellipse 480px 380px at 28% 88%, rgba(26,61,43,0.34), transparent 65%), radial-gradient(ellipse 380px 320px at 96% 10%, rgba(45,106,79,0.26), transparent 60%); filter: blur(2px); animation: heroBlobsDrift 32s ease-in-out infinite alternate; will-change: transform, opacity; transform:translateZ(0); -webkit-transform:translateZ(0); z-index:0; } .hero.hero-safari-static::before{ animation:none; transform:none; } .hero.hero-safari-static::after{ content:''; position:absolute; inset:0; pointer-events:none; z-index:0; background: radial-gradient(circle at 18% 24%, rgba(26,83,53,0.22) 0 1.2px, transparent 1.4px), radial-gradient(circle at 72% 30%, rgba(26,83,53,0.18) 0 1.1px, transparent 1.3px), radial-gradient(circle at 40% 68%, rgba(26,83,53,0.16) 0 1.0px, transparent 1.2px), radial-gradient(circle at 84% 62%, rgba(26,83,53,0.14) 0 1.0px, transparent 1.2px); background-size: 220px 220px, 260px 260px, 240px 240px, 300px 300px; opacity:0.55; } .hero > *{ position:relative; z-index:1; } @keyframes heroBlobsDrift{ 0% { transform: translate(0, 0) scale(1); } 50% { transform: translate(-1.5%, 1%) scale(1.03); } 100% { transform: translate(2%, -1%) scale(1.05); } } .hero-left{padding:36px 48px 48px 0;align-self:center;position:relative;z-index:2;animation:fadeUp 0.9s ease 0.2s both;} .hero-badge{ display:inline-flex;align-items:center;gap:8px; padding:8px 18px;background:rgba(82,183,136,0.12); border:1px solid var(--border-green);border-radius:var(--radius); font-size:11px;letter-spacing:1.5px;text-transform:uppercase; color:var(--green-bright);margin-bottom:28px; transition:background 0.4s ease, border-color 0.4s ease, color 0.4s ease; } .hero-badge.offline{ background:rgba(245,158,11,0.12); border-color:rgba(245,158,11,0.4); color:#f59e0b; } .hero-badge-dot{width:8px;height:8px;border-radius:50%;background:#22c55e;--pulse:rgba(34,197,94,0.55);animation:live-pulse 2.4s ease-out infinite} .hero-badge.offline .hero-badge-dot{--pulse:rgba(245,158,11,0.55);} @keyframes live-pulse{0%{box-shadow:0 0 0 0 var(--pulse)}60%{box-shadow:0 0 0 7px transparent}100%{box-shadow:0 0 0 0 transparent}} .hero-h1{ font-family:var(--display); font-size:clamp(44px,5vw,72px); font-weight:300;line-height:1.05; letter-spacing:-1px;color:#1a3d2b; margin-bottom:0; } .hero-h1 em{font-style:italic;color:#2d6a4f} .hero-big-num{ font-family:var(--display); font-size:clamp(119px,17vw,187px); font-weight:300;line-height:0.8; color:#1a3d2b;letter-spacing:-8px; display:block; margin-top:-16px; margin-bottom:48px; overflow:visible; } .hero-big-num sup{font-size:32%;letter-spacing:0;vertical-align:0.4em;color:#2d6a4f;letter-spacing:2px;font-family:var(--body);font-weight:400;position:relative;left:18px;} .hero-avg{font-size:12px;color:rgba(74,124,94,0.65);font-weight:300;letter-spacing:0.2px;margin-top:-4px;margin-bottom:16px;} .hero-sub{font-size:14px;color:#4a7c5e;line-height:1.6;font-weight:300;max-width:440px;margin-bottom:24px;letter-spacing:0.1px;} .hero-sub strong{color:#1a3d2b;font-weight:400} .hero-ctas{display:flex;align-items:center;gap:20px;margin-bottom:28px;flex-wrap:wrap} .hero-text-link{font-size:13px;color:#4a7c5e;text-decoration:none;letter-spacing:0.3px;transition:color 0.2s;border-bottom:1px solid rgba(74,124,94,0.3);padding-bottom:1px} .hero-text-link:hover{color:#1a3d2b;border-bottom-color:rgba(26,61,43,0.5)} .hero-trust{display:flex;align-items:center;gap:8px;flex-wrap:nowrap;} .hero-trust-break{display:none;} .hero-trust-chip{ display:inline-flex;align-items:center;gap:7px; padding:9px 18px;background:rgba(255,255,255,0.55); border:1px solid rgba(26,61,43,0.18);border-radius:var(--radius); font-size:13px;color:#2d6a4f;letter-spacing:0.4px;white-space:nowrap; font-weight:500; } .hero-trust-chip::before{content:'';width:6px;height:6px;border-radius:50%;background:#22c55e;flex-shrink:0} .hero-trust-chip.hero-trust-hide-mobile{display:none} /* ── Hero product cards ── */ /* ── Hero product cards ── */ .hero-right{ display:flex;align-items:center;justify-content:flex-end; position:relative;z-index:2; padding:88px 32px 48px 16px; overflow:visible; } .hero-cards-grid{ display:grid; grid-template-columns:repeat(12,1fr); gap:10px; width:100%; } .hero-pcard{ background:rgba(255,255,255,0.25); border:1px solid rgba(255,255,255,0.7); backdrop-filter:none; -webkit-backdrop-filter:none; border-radius:22px; overflow:hidden; cursor:pointer; display:flex; flex-direction:column; align-items:center; padding:16px 10px 14px; gap:8px; min-height:0; position:relative; z-index:1; transition:transform 0.4s cubic-bezier(0.34,1.56,0.64,1),box-shadow 0.35s ease,border-color 0.3s ease,background 0.3s ease; box-shadow:0 4px 24px rgba(0,0,0,0.08),0 1px 3px rgba(0,0,0,0.04),inset 0 1px 0 rgba(255,255,255,0.9); } .hero-pcard::before{ content:'';position:absolute;top:0;left:0;right:0;height:1px; background:linear-gradient(90deg,transparent,rgba(255,255,255,0.9),transparent); z-index:2; } .hero-pcard:hover{ transform:translateY(-6px) scale(1.02); background:rgba(255,255,255,0.18); border-color:rgba(255,255,255,0.7); box-shadow:0 12px 40px rgba(0,0,0,0.1),inset 0 1px 0 rgba(255,255,255,0.9); } /* Row 1: Lose Weight + Peptides — 2 large cards */ .hero-pcard:nth-child(-n+2){ grid-column:span 6; height:280px; } /* Row 2: Sex, Hormones, Hair, Skin — 4 medium cards */ .hero-pcard:nth-child(n+3):nth-child(-n+6){ grid-column:span 3; height:210px; } /* Row 3: Urgent Care — full-width skinny banner, content right-aligned */ .hero-pcard:nth-child(n+7){ grid-column:1 / -1; height:80px; flex-direction:row; align-items:center; justify-content:space-between; gap:14px; padding:0 28px; } .hero-pcard:nth-child(n+7) .hero-pcard-img{ display:flex; width:52px; height:52px; flex-shrink:0; } .hero-pcard:nth-child(n+7) .hero-pcard-info{ margin-top:0; text-align:right; width:auto; } .hero-pcard-sub{display:none;} .hero-pcard-placeholder{ opacity:0.4; cursor:default; } .hero-pcard-placeholder:hover{ transform:none; background:rgba(255,255,255,0.10); border-color:rgba(255,255,255,0.18); box-shadow:0 8px 32px rgba(0,0,0,0.3); } .hero-pcard:nth-child(1){animation:float 7.0s ease-in-out 0.0s infinite} .hero-pcard:nth-child(2){animation:float2 6.5s ease-in-out 1.8s infinite} .hero-pcard:nth-child(3){animation:float3 7.5s ease-in-out 0.6s infinite} .hero-pcard:nth-child(4){animation:float4 6.8s ease-in-out 2.4s infinite} .hero-pcard:nth-child(5){animation:float5 7.2s ease-in-out 1.1s infinite} .hero-pcard:nth-child(6){animation:float6 6.6s ease-in-out 3.0s infinite} .hero-pcard:nth-child(7){animation:float7 7.4s ease-in-out 0.3s infinite} /* Per-card hover tints */ .hero-pcard:nth-child(1):hover{background:rgba(26,83,53,0.22);border-color:rgba(82,183,136,0.25);box-shadow:0 12px 48px rgba(0,0,0,0.4),0 0 30px rgba(26,83,53,0.2)} .hero-pcard:nth-child(2):hover{background:rgba(37,99,235,0.18);border-color:rgba(37,99,235,0.3);box-shadow:0 12px 48px rgba(0,0,0,0.4),0 0 30px rgba(37,99,235,0.15)} .hero-pcard:nth-child(3):hover{background:rgba(220,38,38,0.18);border-color:rgba(220,38,38,0.3);box-shadow:0 12px 48px rgba(0,0,0,0.4),0 0 30px rgba(220,38,38,0.15)} .hero-pcard:nth-child(4):hover{background:rgba(45,106,79,0.20);border-color:rgba(82,183,136,0.25);box-shadow:0 12px 48px rgba(0,0,0,0.4),0 0 30px rgba(45,106,79,0.2)} .hero-pcard:nth-child(5):hover{background:rgba(124,58,237,0.18);border-color:rgba(124,58,237,0.3);box-shadow:0 12px 48px rgba(0,0,0,0.4),0 0 30px rgba(124,58,237,0.15)} .hero-pcard:nth-child(6):hover{background:rgba(180,140,120,0.18);border-color:rgba(180,140,120,0.3);box-shadow:0 12px 48px rgba(0,0,0,0.4),0 0 30px rgba(180,140,120,0.12)} .hero-pcard:nth-child(7):hover{background:rgba(220,38,38,0.18);border-color:rgba(220,38,38,0.3);box-shadow:0 12px 48px rgba(0,0,0,0.4),0 0 30px rgba(220,38,38,0.15)} .hero-pcard-img{ width:100%;height:90px; display:flex;align-items:center;justify-content:center; position:relative; } .hero-pcard:nth-child(-n+2) .hero-pcard-img{ height:190px; } .hero-pcard:nth-child(n+3):nth-child(-n+6) .hero-pcard-img{ height:140px; } .hero-pcard-img .img-default{ max-width:100%;max-height:100%; width:auto;height:auto; object-fit:contain; transition:opacity 0.3s ease,transform 0.4s ease; } .hero-pcard-img .img-hover{ max-width:100%;max-height:100%; width:auto;height:auto; object-fit:contain; transition:opacity 0.3s ease,transform 0.4s ease; position:absolute;opacity:0;transform:scale(0.9); } .hero-pcard:hover .img-default{opacity:0;transform:scale(1.08)} .hero-pcard:hover .img-hover{opacity:1;transform:scale(1.0)} .hero-pcard-info{margin-top:auto;width:100%;text-align:center} .hero-pcard-cat{display:none} .hero-pcard-name{font-family:var(--display);font-size:21px;font-weight:300;font-style:italic;color:var(--ink);line-height:1.1;letter-spacing:-0.3px;margin-bottom:3px} .hero-pcard-urgent{font-size:9px;font-weight:500;color:#2d6a4f;letter-spacing:2.5px;text-transform:uppercase;margin-bottom:4px} .hero-pcard-link{font-size:9px;letter-spacing:2.5px;text-transform:uppercase;color:rgba(26,61,43,0.35);transition:color 0.2s} .hero-pcard:hover .hero-pcard-link{color:#2d6a4f} @media(max-width:1024px){ .hero-cards-grid{grid-template-columns:repeat(2,minmax(0,1fr));max-width:100%;gap:10px} .hero-pcard:nth-child(-n+2){grid-column:span 2} .hero-pcard:nth-child(n+3):nth-child(-n+6){grid-column:auto;height:170px;padding:14px 10px 12px} .hero-pcard:nth-child(n+3):nth-child(-n+6) .hero-pcard-img{height:90px} .hero-pcard:nth-child(n+3):nth-child(-n+6) .hero-pcard-name{font-size:16px} /* Urgent Care: full-width skinny banner across the screen, shorter than cards above */ .hero-pcard:nth-child(n+7){grid-column:1 / -1;height:72px;flex-direction:row;gap:14px;padding:0 18px;justify-content:space-between;align-items:center} .hero-pcard:nth-child(n+7) .hero-pcard-img{width:48px;height:48px;flex-shrink:0} .hero-pcard:nth-child(n+7) .hero-pcard-info{text-align:right;margin-top:0;width:auto} .hero-pcard:nth-child(n+7) .hero-pcard-name{font-size:18px} } /* ── DESKTOP HERO REFINEMENT (>=1025px ONLY — tablet/mobile untouched) ── Enlarged cards; the left column and the cards column share the same top and bottom edge: badge top = cards top (matched top padding), chips bottom = cards bottom (chips pinned to the column bottom via margin-top:auto, columns stretched to equal height). Extra hero bottom padding; tighter gap under the big number. */ @media (min-width: 1025px) { /* align-content:start keeps the single grid row at content height so min-height:84vh doesn't stretch the columns taller than the cards (which would drop the chips below the cards bottom on tall screens). Extra height falls below as green space. */ /* Give the cards more room: the left column shrinks to exactly its content (min-content — the widest is the no-wrap chips row), and ALL remaining width goes to the cards (1fr). Removes the dead gap between the text and the cards and extends the cards leftward, without wrapping the chips. */ .hero { grid-template-columns: min-content 1fr; align-items: stretch; align-content: start; padding-bottom: 165px; } .hero-left { align-self: auto; display: flex; flex-direction: column; align-items: flex-start; /* children hug their content (badge pill no longer stretches full-width) */ padding: 46px 24px 0 0; /* tighter right padding → cards extend further left */ } /* Shrink the left text to fit the narrower column */ .hero-h1 { font-size: clamp(36px, 3.4vw, 56px); } /* Bigger gap under the counting number so it has room to breathe (moves the lower tagline/CTA group down slightly). */ .hero-big-num { font-size: clamp(96px, 12vw, 150px); margin-bottom: 54px; } /* Enlarge the lower group: taglines, CTA button, and the "see how it works" link */ .hero-avg { font-size: 15px; margin-bottom: 18px; } .hero-sub { font-size: 16.5px; max-width: 480px; margin-bottom: 30px; } .hero-text-link { font-size: 15px; } .hero-ctas .btn-green-bright { font-size: 16px; padding: 21px 46px; gap: 12px; } /* Slightly smaller trust chips so the column is narrower and the cards extend left, while the chips still fit on one line. */ .hero-trust { margin-top: auto; gap: 6px; } /* pin chips to the column bottom */ .hero-trust-chip { font-size: 11px; padding: 8px 13px; gap: 6px; } .hero-right { align-items: flex-start; /* top-align cards: cards top = badge top */ padding: 46px 32px 0 16px; } /* Enlarge cards proportionally */ .hero-pcard:nth-child(-n+2) { height: 315px; } .hero-pcard:nth-child(-n+2) .hero-pcard-img { height: 218px; } .hero-pcard:nth-child(n+3):nth-child(-n+6) { height: 234px; } .hero-pcard:nth-child(n+3):nth-child(-n+6) .hero-pcard-img { height: 162px; } } @keyframes scan{0%{top:-100%}100%{top:200%}} /* ── White section base ── */ .white-section{background:var(--white);padding:110px 0} .gray-section{background:var(--off-white);padding:110px 0} .eyebrow{font-size:10px;letter-spacing:4px;text-transform:uppercase;color:var(--green-mid);margin-bottom:16px;display:block;font-weight:500} .section-h2{font-family:var(--display);font-size:clamp(40px,5vw,64px);font-weight:300;line-height:1.05;color:var(--ink)} .section-h2 em{font-style:italic;color:var(--green-mid)} .section-body{font-size:15px;color:var(--ink2);line-height:1.9;font-weight:300;max-width:520px} /* ── Lifestyle image splits ── */ .split{display:grid;grid-template-columns:1fr 1fr;min-height:580px} .split.reverse{direction:rtl} .split.reverse > *{direction:ltr} .split-img{position:relative;overflow:hidden;background:var(--light-gray)} .split-img-placeholder{ width:100%;height:100%;min-height:580px; display:flex;flex-direction:column;align-items:center;justify-content:center; gap:14px;font-size:11px;letter-spacing:2px;text-transform:uppercase;color:var(--ink3); background:linear-gradient(135deg,var(--light-gray),var(--off-white)); } .split-img-placeholder .img-icon{font-size:48px;opacity:0.4} .split-img img{width:100%;height:100%;object-fit:cover} .split-content{padding:80px 72px;display:flex;flex-direction:column;justify-content:center;background:var(--white)} .split-content.dark{background:var(--green);padding:80px 72px} .split-content.dark .section-h2{color:#fff} .split-content.dark .section-h2 em{color:var(--green-bright)} .split-content.dark .section-body{color:rgba(255,255,255,0.6)} .split-content.dark .eyebrow{color:var(--green-bright)} /* ── How It Works ── */ .steps-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:32px;margin-top:64px} .step-card{padding:44px 36px;background:var(--white);border:1px solid var(--border-light);border-radius:24px;transition:all 0.3s;position:relative;overflow:hidden} .step-card::before{content:'';position:absolute;bottom:0;left:0;right:0;height:3px;background:linear-gradient(to right,var(--green),var(--green-bright));transform:scaleX(0);transform-origin:left;transition:transform 0.4s ease} .step-card:hover{box-shadow:0 20px 60px rgba(27,67,50,0.1);transform:translateY(-4px)} .step-card:hover::before{transform:scaleX(1)} .step-num{font-family:var(--display);font-size:64px;font-weight:300;color:var(--border-light);line-height:1;margin-bottom:24px;letter-spacing:-2px} .step-title{font-family:var(--display);font-size:26px;font-weight:400;margin-bottom:12px;color:var(--ink)} .step-body{font-size:13px;color:var(--ink2);line-height:1.9;font-weight:300} .step-time{display:inline-flex;align-items:center;gap:6px;margin-top:20px;font-size:11px;font-weight:500;color:var(--green-mid);letter-spacing:0.5px} .step-time::before{content:'';width:14px;height:1.5px;background:var(--green-bright)} /* ── How It Works — desktop staggered entrance animation ── */ @media (min-width: 769px) { @keyframes howStepCardReveal { from { opacity: 0; transform: translateY(72px); } } @keyframes howStepNumReveal { from { opacity: 0; transform: translateY(24px) scale(0.88); letter-spacing: 4px; } } @keyframes howStepBodyReveal { from { opacity: 0; transform: translateY(14px); } } @keyframes howStepRuleReveal { from { transform: scaleX(0); } to { transform: scaleX(1); } } /* Cards: hidden initially, animate on .visible */ #how .step-card.anim-up { opacity: 0; transform: none; transition: none; } #how .step-card.anim-up.visible { opacity: 1; transform: none; transition: transform 0.35s cubic-bezier(0.22, 1, 0.36, 1), box-shadow 0.35s ease; animation: howStepCardReveal 0.55s cubic-bezier(0.22, 1, 0.36, 1) backwards; } /* Wider stagger so 1, 2, 3 arrive clearly in sequence */ #how .step-card.anim-up.d1.visible { animation-delay: 0s; } #how .step-card.anim-up.d2.visible { animation-delay: 0.225s; } #how .step-card.anim-up.d3.visible { animation-delay: 0.45s; } /* Giant 01/02/03 numerals: reveal after card lands */ #how .step-card .step-num { opacity: 0; } #how .step-card.visible .step-num { opacity: 1; animation: howStepNumReveal 0.3s cubic-bezier(0.22, 1, 0.36, 1) backwards; } #how .step-card.d1.visible .step-num { animation-delay: 0.08s; } #how .step-card.d2.visible .step-num { animation-delay: 0.305s; } #how .step-card.d3.visible .step-num { animation-delay: 0.53s; } /* Title + body + time: gentle cascade within each card */ #how .step-card .step-title, #how .step-card .step-body, #how .step-card .step-time { opacity: 0; } #how .step-card.visible .step-title { opacity: 1; animation: howStepBodyReveal 0.25s cubic-bezier(0.22, 1, 0.36, 1) backwards; } #how .step-card.visible .step-body { opacity: 1; animation: howStepBodyReveal 0.25s cubic-bezier(0.22, 1, 0.36, 1) backwards; } #how .step-card.visible .step-time { opacity: 1; animation: howStepBodyReveal 0.25s cubic-bezier(0.22, 1, 0.36, 1) backwards; } #how .step-card.d1.visible .step-title { animation-delay: 0.12s; } #how .step-card.d1.visible .step-body { animation-delay: 0.16s; } #how .step-card.d1.visible .step-time { animation-delay: 0.20s; } #how .step-card.d2.visible .step-title { animation-delay: 0.345s; } #how .step-card.d2.visible .step-body { animation-delay: 0.385s; } #how .step-card.d2.visible .step-time { animation-delay: 0.425s; } #how .step-card.d3.visible .step-title { animation-delay: 0.57s; } #how .step-card.d3.visible .step-body { animation-delay: 0.61s; } #how .step-card.d3.visible .step-time { animation-delay: 0.65s; } /* Auto-draw the green underline as the card completes its entrance */ #how .step-card.visible::before { animation: howStepRuleReveal 0.45s cubic-bezier(0.22, 1, 0.36, 1) forwards; } #how .step-card.d1.visible::before { animation-delay: 0.5s; } #how .step-card.d2.visible::before { animation-delay: 0.725s; } #how .step-card.d3.visible::before { animation-delay: 0.95s; } /* Softer, longer reveal for the header text above the cards */ #how .section-eyebrow.anim-up, #how .section-h2.anim-up { transform: translateY(32px); transition: opacity 1s cubic-bezier(0.22, 1, 0.36, 1), transform 1s cubic-bezier(0.22, 1, 0.36, 1); } @media (prefers-reduced-motion: reduce) { #how .step-card.anim-up, #how .step-card .step-num, #how .step-card .step-title, #how .step-card .step-body, #how .step-card .step-time { opacity: 1 !important; transform: none !important; animation: none !important; } #how .step-card.visible::before { animation: none; transform: scaleX(0); } } } /* ── Services (white cards) ── */ .svc-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:16px;margin-top:56px} .svc-card{ background:var(--white);border:1.5px solid var(--border-light); border-radius:20px;padding:32px 26px;cursor:pointer; transition:all 0.3s;position:relative;overflow:hidden; } .svc-card:hover{border-color:var(--green-bright);box-shadow:0 16px 48px rgba(27,67,50,0.1);transform:translateY(-4px)} .svc-icon{font-size:32px;margin-bottom:18px;display:block} .svc-name{font-family:var(--display);font-size:22px;font-weight:400;margin-bottom:10px;color:var(--ink)} .svc-desc{font-size:12px;color:var(--ink2);line-height:1.8;font-weight:300;margin-bottom:18px} .svc-tags{display:flex;flex-wrap:wrap;gap:6px} .svc-tag{font-size:10px;padding:3px 10px;background:var(--green-pale);color:var(--green-mid);border-radius:var(--radius);font-weight:500} .svc-arrow{ position:absolute;top:22px;right:22px; width:30px;height:30px;border:1.5px solid var(--border-light); border-radius:50%;display:flex;align-items:center;justify-content:center; font-size:13px;color:var(--ink3);transition:all 0.3s; } .svc-card:hover .svc-arrow{border-color:var(--green-bright);color:var(--green-bright);transform:rotate(45deg)} /* ── Stats bar (dark green) ── */ .stats-dark{background:var(--green);padding:72px 0} .stats-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:1px;background:rgba(255,255,255,0.1)} .stat-item{background:var(--green);padding:44px 40px;text-align:center} .stat-val{font-family:var(--display);font-size:clamp(48px,5vw,72px);font-weight:300;color:#fff;line-height:1;margin-bottom:8px} .stat-val em{color:var(--green-bright);font-style:italic} .stat-label{font-size:10px;letter-spacing:2px;text-transform:uppercase;color:rgba(255,255,255,0.4)} /* ── Products (light cards) ── */ .products-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:24px;margin-top:56px} .product-card{background:var(--white);border:1.5px solid var(--border-light);border-radius:24px;overflow:hidden;transition:all 0.3s;cursor:pointer} .product-card:hover{box-shadow:0 20px 60px rgba(27,67,50,0.12);transform:translateY(-4px);border-color:var(--green-bright)} .product-img{ height:260px;background:var(--off-white); display:flex;align-items:center;justify-content:center; position:relative;overflow:hidden; } .product-img img{height:220px;width:auto;object-fit:contain;transition:transform 0.4s ease;display:block} .product-card:hover .product-img img{transform:scale(1.05) translateY(-4px)} .product-body{padding:28px} .product-badge{display:inline-flex;padding:4px 12px;background:var(--green-pale);color:var(--green-mid);border-radius:var(--radius);font-size:10px;font-weight:500;letter-spacing:0.5px;margin-bottom:14px} .product-name{font-family:var(--display);font-size:24px;font-weight:400;color:var(--ink);margin-bottom:8px} .product-desc{font-size:12px;color:var(--ink2);line-height:1.8;font-weight:300;margin-bottom:18px} .product-price{font-family:var(--display);font-size:30px;font-weight:300;color:var(--ink)} .product-price sub{font-size:13px;color:var(--ink3);font-weight:400} .product-footer{display:flex;align-items:center;justify-content:space-between;margin-top:16px;padding-top:16px;border-top:1px solid var(--border-light)} .product-link{font-size:12px;font-weight:500;color:var(--green-mid);display:flex;align-items:center;gap:4px;transition:gap 0.2s} .product-card:hover .product-link{gap:8px} /* ── Qualiphy (dark) ── */ .qualiphy-section{background:var(--dark2);padding:110px 0} .qualiphy-inner{display:grid;grid-template-columns:1fr auto;gap:80px;align-items:center} .q-title{font-family:var(--display);font-size:clamp(36px,5vw,62px);font-weight:300;color:#fff;line-height:1.05;margin-bottom:20px} .q-title em{font-style:italic;color:var(--green-bright)} .q-body{font-size:15px;color:var(--text2);line-height:1.9;font-weight:300;max-width:520px;margin-bottom:40px} .q-stats{display:flex;flex-direction:column;gap:16px;min-width:180px} .q-stat{padding:24px;background:rgba(82,183,136,0.07);border:1px solid var(--border-green);border-radius:20px;text-align:center} .q-stat-val{font-family:var(--display);font-size:38px;font-weight:300;color:var(--green-bright);line-height:1;margin-bottom:6px} .q-stat-label{font-size:9px;letter-spacing:2px;text-transform:uppercase;color:var(--text3)} /* ── Big lifestyle image feature ── */ .feature-img{ height:520px;width:100%; background:linear-gradient(135deg,var(--green),var(--dark)); display:flex;align-items:center;justify-content:center; position:relative;overflow:hidden; } .feature-img-placeholder{display:flex;flex-direction:column;align-items:center;gap:12px;color:rgba(255,255,255,0.2);font-size:11px;letter-spacing:2px;text-transform:uppercase} .feature-overlay{position:absolute;inset:0;background:linear-gradient(to right,rgba(6,14,8,0.7) 0%,transparent 60%)} .feature-content{position:absolute;left:0;top:0;bottom:0;display:flex;flex-direction:column;justify-content:center;padding:0 80px;max-width:580px} /* ── BMI Calculator ── */ /* ══════════════════════════════════════════════ ── Weight Loss / BMI Section ── ISOLATED BLOCK — only .bmi-* selectors below ══════════════════════════════════════════════ */ /* Section shell */ .bmi-section{ padding:110px 0 120px; background-color:#0c1e12; background-image: repeating-linear-gradient(0deg, transparent, transparent 3px, rgba(255,255,255,0.013) 3px, rgba(255,255,255,0.013) 4px), repeating-linear-gradient(90deg, transparent, transparent 3px, rgba(255,255,255,0.009) 3px, rgba(255,255,255,0.009) 4px), repeating-linear-gradient(135deg, transparent, transparent 6px, rgba(255,255,255,0.004) 6px, rgba(255,255,255,0.004) 7px), linear-gradient(160deg, #0f2418 0%, #0c1e12 55%, #091910 100%); /* NO-CLIP RULE: fixed-px blend-overlap, never vh (currently unused class, kept consistent so no vh section-overlap exists anywhere in the codebase). */ margin-top:-80px; position:relative;z-index:10; border-radius:0; box-shadow:none; overflow:hidden; } /* Very faint vignette for depth — no glow, no colour cast */ .bmi-section::before{ content:'';position:absolute;inset:0;pointer-events:none; background:radial-gradient(ellipse 100% 80% at 50% 0%, rgba(255,255,255,0.025) 0%, transparent 60%); } .bmi-section::after{content:none;} /* Floating weight particles (injected via JS) */ .bmi-particle{ position:absolute;border-radius:50%;pointer-events:none; background:rgba(34,197,94,0.18); animation:bmiFloat linear infinite; } @keyframes bmiFloat{ 0%{transform:translateY(0) scale(1);opacity:0;} 10%{opacity:1;} 90%{opacity:0.6;} 100%{transform:translateY(-320px) scale(0.4);opacity:0;} } /* Animated downward arrow accent */ .bmi-arrow-accent{ position:absolute;right:8%;top:12%; display:flex;flex-direction:column;align-items:center;gap:4px;opacity:0.12; animation:arrowPulse 2.4s ease-in-out infinite; } .bmi-arrow-accent span{display:block;width:2px;height:18px;background:#4ade80;border-radius:1px;} .bmi-arrow-accent::after{content:'▼';color:#4ade80;font-size:10px;} @keyframes arrowPulse{ 0%,100%{transform:translateY(0);opacity:0.12;} 50%{transform:translateY(10px);opacity:0.22;} } /* Organic background blob */ .bmi-blob{ position:absolute; left:-10%;top:10%; width:65%;height:80%; background:radial-gradient(ellipse at 40% 50%, rgba(45,106,79,0.35) 0%, transparent 65%); pointer-events:none; border-radius:60% 40% 50% 50%; filter:blur(40px); } /* Section header */ .bmi-header{margin-bottom:48px;} .bmi-eyebrow{display:inline-flex;align-items:center;gap:8px;font-size:11px;letter-spacing:2px;text-transform:uppercase;color:rgba(255,255,255,0.4);margin-bottom:16px;} .bmi-eyebrow-icon{width:24px;height:24px;border-radius:50%;border:1px solid rgba(255,255,255,0.2);display:flex;align-items:center;justify-content:center;font-size:9px;color:rgba(255,255,255,0.4);} .bmi-h1{font-family:var(--display);font-size:clamp(36px,4vw,60px);font-weight:400;color:#fff;line-height:1.05;letter-spacing:-0.5px;margin-bottom:12px;} .bmi-subtitle{font-size:14px;color:rgba(255,255,255,0.45);font-weight:300;max-width:420px;line-height:1.7;} /* Bento grid */ .bmi-bento{ display:grid; grid-template-columns:1fr 1fr; gap:16px; margin-bottom:16px; position:relative;z-index:2; } .bmi-col-right{display:flex;flex-direction:column;gap:16px;} /* Base card */ .bmi-card{ border-radius:24px; overflow:hidden; position:relative; background:rgba(255,255,255,0.05); backdrop-filter:blur(24px) saturate(150%); -webkit-backdrop-filter:blur(24px) saturate(150%); border:1px solid rgba(255,255,255,0.10); box-shadow:0 40px 100px rgba(0,0,0,0.55),0 12px 32px rgba(0,0,0,0.4),inset 0 1px 0 rgba(255,255,255,0.16),inset 0 -1px 0 rgba(0,0,0,0.2); z-index:2; } /* Card 1 — product (dark glass) */ .bmi-card-product{ background:rgba(255,255,255,0.06); backdrop-filter:blur(20px) saturate(140%); -webkit-backdrop-filter:blur(20px) saturate(140%); border:1px solid rgba(255,255,255,0.10); box-shadow:0 32px 80px rgba(0,0,0,0.4),inset 0 1px 0 rgba(255,255,255,0.14); display:flex;flex-direction:column; min-height:420px; } .bmi-card-img-area{ flex:1;display:flex;align-items:center;justify-content:center; padding:40px 40px 20px; } .bmi-card-foot{padding:0 36px 36px;} .bmi-card-pill-badge{ display:inline-block; background:rgba(255,255,255,0.12); border:1px solid rgba(255,255,255,0.16); border-radius:50px; padding:5px 14px; font-size:10px;letter-spacing:0.8px;color:rgba(255,255,255,0.7); margin-bottom:14px; } .bmi-card-heading{ font-family:var(--display);font-size:28px;font-weight:400; color:#fff;line-height:1.15;letter-spacing:-0.3px;margin-bottom:14px; } .bmi-card-link{ font-size:13px;color:rgba(255,255,255,0.55);text-decoration:none; letter-spacing:0.3px;transition:color 0.2s; } .bmi-card-link:hover{color:#fff;} /* Card 2 — stat (light/cream) */ .bmi-card-stat{ background:#f0ede6; border:1px solid rgba(255,255,255,0.6); box-shadow:0 16px 48px rgba(0,0,0,0.25); display:flex;align-items:stretch; padding:32px;gap:20px; } .bmi-stat-left{flex:1;} .bmi-stat-num{ font-family:var(--display);font-size:48px;font-weight:400; color:#1a3d2b;line-height:1;letter-spacing:-1px;margin-bottom:10px; } .bmi-stat-body{font-size:12px;color:rgba(26,61,43,0.6);line-height:1.6;margin-bottom:16px;font-weight:300;} .bmi-stat-badges{display:flex;flex-wrap:wrap;gap:6px;} .bmi-stat-badges span{ background:rgba(26,61,43,0.08);border:1px solid rgba(26,61,43,0.12); border-radius:50px;padding:4px 12px; font-size:10px;color:#2d6a4f;letter-spacing:0.3px; } .bmi-stat-img{ width:120px;display:flex;align-items:center;justify-content:center; background:rgba(26,61,43,0.06);border-radius:16px; } .bmi-img-placeholder{font-size:48px;opacity:0.4;} /* Card 3 — system/BMI (dark glass) */ .bmi-card-system{ background:rgba(255,255,255,0.06); backdrop-filter:blur(20px) saturate(140%); -webkit-backdrop-filter:blur(20px) saturate(140%); border:1px solid rgba(255,255,255,0.10); box-shadow:0 16px 48px rgba(0,0,0,0.35),inset 0 1px 0 rgba(255,255,255,0.12); display:flex;align-items:center;gap:20px; padding:32px; } .bmi-card-dots{display:flex;gap:5px;} .bmi-card-dots span{width:7px;height:7px;border-radius:50%;background:rgba(255,255,255,0.2);} .bmi-system-left{flex:1;} .bmi-system-body{font-size:12px;color:rgba(255,255,255,0.45);line-height:1.7;font-weight:300;margin-top:8px;} .bmi-system-right{flex-shrink:0;} /* BMI mini display (inside system card) */ .bmi-mini-card{ background:rgba(0,0,0,0.35); border:1px solid rgba(255,255,255,0.10); border-radius:18px; padding:20px 24px; text-align:center; box-shadow:inset 0 1px 0 rgba(255,255,255,0.08),0 8px 24px rgba(0,0,0,0.3); min-width:110px; } .bmi-mini-label{font-size:9px;letter-spacing:2px;text-transform:uppercase;color:rgba(255,255,255,0.3);margin-bottom:4px;} .bmi-mini-num{font-family:var(--display);font-size:36px;font-weight:300;color:#fff;line-height:1;} .bmi-mini-cat{font-size:9px;letter-spacing:1.5px;text-transform:uppercase;color:rgba(255,255,255,0.35);margin-top:4px;} /* Bottom feature row */ .bmi-features{ display:grid;grid-template-columns:repeat(3,1fr);gap:12px; position:relative;z-index:2; } .bmi-feat{ background:rgba(255,255,255,0.05); backdrop-filter:blur(16px);-webkit-backdrop-filter:blur(16px); border:1px solid rgba(255,255,255,0.09); border-radius:18px;padding:20px 24px; display:flex;align-items:center;gap:16px; box-shadow:0 8px 24px rgba(0,0,0,0.25),inset 0 1px 0 rgba(255,255,255,0.10); } .bmi-feat-icon{font-size:18px;opacity:0.5;flex-shrink:0;} .bmi-feat-title{font-size:13px;font-weight:500;color:#fff;margin-bottom:3px;} .bmi-feat-sub{font-size:11px;color:rgba(255,255,255,0.35);font-weight:300;} /* Hidden JS scaffolding */ .bmi-zone,.bmi-marker{display:none;} /* Floating particles */ .bmi-particle{ position:absolute;border-radius:50%;pointer-events:none; background:rgba(74,222,128,0.15); animation:bmiFloat linear infinite; } @keyframes bmiFloat{ 0%{transform:translateY(0) scale(1);opacity:0;} 10%{opacity:1;}90%{opacity:0.5;} 100%{transform:translateY(-280px) scale(0.3);opacity:0;} } .bmi-float-label{ position:absolute;font-size:10px;font-weight:500;letter-spacing:1px; color:rgba(74,222,128,0.4);pointer-events:none; animation:lbsFloat 5s ease-in-out infinite; } @keyframes lbsFloat{ 0%{transform:translateY(0);opacity:0;}20%{opacity:1;} 80%{opacity:0.3;}100%{transform:translateY(-100px);opacity:0;} } /* ══════════════════════════════════════════════ ── Weight Loss Section (.wl-*) ── Fully isolated from all other site styles ══════════════════════════════════════════════ */ /* ── Section shell ── */ .wl-section { background-color: #0c1e12; background-image: repeating-linear-gradient(0deg, transparent, transparent 3px, rgba(255,255,255,0.013) 3px, rgba(255,255,255,0.013) 4px), repeating-linear-gradient(90deg, transparent, transparent 3px, rgba(255,255,255,0.009) 3px, rgba(255,255,255,0.009) 4px), repeating-linear-gradient(135deg, transparent, transparent 6px, rgba(255,255,255,0.004) 6px, rgba(255,255,255,0.004) 7px), linear-gradient(160deg, #0f2418 0%, #0c1e12 55%, #091910 100%); /* NO-CLIP RULE: section blend-overlaps must use a FIXED px, never vh. A vh overlap scales with screen height, so on shorter laptops it slides up far enough to COVER the hero's trust chips (the "cut off on her MacBook" bug). A fixed 80px overlaps the hero's bottom fade the same amount on every screen. The hero reserves a >=120px bottom buffer so this overlap only ever bites empty space, never content. */ margin-top: -80px; position: relative; z-index: 10; overflow: hidden; } /* Vignette overlay */ .wl-section::before { content: ''; position: absolute; inset: 0; pointer-events: none; background: radial-gradient(ellipse 80% 50% at 50% 0%, rgba(34,197,94,0.07) 0%, transparent 60%), radial-gradient(ellipse 100% 20% at 50% 100%, rgba(0,0,0,0.4) 0%, transparent 100%), radial-gradient(ellipse 30% 100% at 0% 50%, rgba(0,0,0,0.25) 0%, transparent 100%), radial-gradient(ellipse 30% 100% at 100% 50%, rgba(0,0,0,0.25) 0%, transparent 100%); z-index: 0; } /* ── Shared utilities ── */ .wl-section-eyebrow { font-size: 11px; letter-spacing: 3px; text-transform: uppercase; color: rgba(74,222,128,0.6); margin-bottom: 14px; font-family: var(--body); font-weight: 500; } /* ════════════════════════ PART 1 — Scroll pin ════════════════════════ */ .wl-pin-wrap { min-height: 100vh; position: relative; display: flex; align-items: center; overflow: hidden; } /* Ambient background number */ .wl-bg-num { position: absolute; right: 4%; top: 50%; transform: translateY(-50%); font-family: var(--display); font-size: clamp(280px, 30vw, 420px); font-weight: 300; color: rgba(255,255,255,0.025); line-height: 1; pointer-events: none; user-select: none; letter-spacing: -10px; } /* Scroll progress line */ .wl-progress-track { position: absolute; left: 40px; top: 15%; bottom: 15%; width: 1px; background: rgba(255,255,255,0.08); } .wl-progress-fill { width: 100%; height: 0%; background: linear-gradient(to bottom, #4ade80, rgba(74,222,128,0.2)); border-radius: 1px; /* no transition — height is driven every frame by ScrollTrigger; CSS transition causes lag/overshoot */ box-shadow: 0 0 8px rgba(74,222,128,0.4); } /* Floating data chips */ .wl-chip { position: absolute; display: flex; flex-direction: column; align-items: center; gap: 2px; background: rgba(255,255,255,0.07); backdrop-filter: blur(16px); -webkit-backdrop-filter: blur(16px); border: 1px solid rgba(255,255,255,0.12); border-radius: 16px; padding: 14px 20px; box-shadow: 0 12px 40px rgba(0,0,0,0.3), inset 0 1px 0 rgba(255,255,255,0.15); opacity: 0; pointer-events: none; } .wl-chip-val { font-family: var(--display); font-size: 28px; font-weight: 300; color: #fff; line-height: 1; } .wl-chip-label { font-size: 9px; letter-spacing: 1.2px; text-transform: uppercase; color: rgba(255,255,255,0.4); white-space: nowrap; } /* Chip positions — keep out of the main content zone (left 46%, center rows) */ .wl-chip-1 { top: 6%; left: 6%; } /* top-left corner */ .wl-chip-2 { top: 8%; left: 50%; } /* top-center, between columns */ .wl-chip-3 { bottom: 8%; left: 6%; } /* bottom-left corner */ .wl-chip-4 { bottom: 8%; right: 6%; } /* bottom-right corner */ .wl-chip-5 { top: 26%; right: 6%; padding: 10px 14px; } /* upper-right, smaller */ .wl-chip-5 .wl-chip-val { font-size: 21px; } .wl-chip-5 .wl-chip-label { font-size: 7px; letter-spacing: 1px; } .wl-pin-inner { max-width: 1200px; margin: 0 auto; padding: 0 48px; display: grid; grid-template-columns: 1fr 1fr; gap: 80px; align-items: center; width: 100%; min-height: 100vh; } /* Left */ .wl-reveal-left { position: relative; z-index: 2; } .wl-step-num { font-family: var(--display); font-size: 120px; font-weight: 300; line-height: 1; color: rgba(255,255,255,0.04); letter-spacing: -4px; margin-bottom: -32px; position: relative; z-index: 0; /* transform moves the visual without triggering grid re-centering on .wl-pin-inner */ transform: translateY(-30px); user-select: none; } .wl-reveal-headline { font-family: var(--display); font-size: clamp(38px, 4.5vw, 66px); font-weight: 300; line-height: 1.08; letter-spacing: -1px; color: #fff; margin-bottom: 40px; position: relative; z-index: 1; } .wl-reveal-headline em { font-style: italic; color: #4ade80; } .wl-line { display: block; overflow: hidden; padding-bottom: 0.12em; } /* GSAP will handle visibility; default state visible for no-JS */ .wl-stats-row { display: flex; gap: 40px; margin-bottom: 44px; justify-content: center; opacity: 0; transform: translateY(20px); /* no transition — GSAP scrub owns opacity/transform */ } .wl-stat-val { font-family: var(--display); font-size: 40px; font-weight: 300; color: #4ade80; line-height: 1; margin-bottom: 6px; letter-spacing: -1px; } .wl-stat-label { font-size: 11px; color: rgba(255,255,255,0.35); letter-spacing: 0.5px; font-weight: 300; line-height: 1.4; max-width: 90px; } .wl-cta-btn { display: inline-flex; align-items: center; justify-content: center; gap: 10px; padding: 13px 88px; background: rgba(34,197,94,0.16); backdrop-filter: blur(24px) saturate(160%); -webkit-backdrop-filter: blur(24px) saturate(160%); border: 1px solid rgba(74,222,128,0.32); color: rgba(255,255,255,0.95); font-size: 18px; font-weight: 500; letter-spacing: 0.3px; border-radius: 100px; transition: background 0.28s ease, box-shadow 0.28s ease, border-color 0.28s ease; box-shadow: inset 0 1px 0 rgba(255,255,255,0.10), 0 4px 20px rgba(34,197,94,0.12); text-decoration: none; opacity: 0; transform: translateY(16px); /* opacity/transform: GSAP scrub only — avoid fighting native transitions */ } .wl-cta-btn:hover { transform: translateY(-2px) !important; background: rgba(34,197,94,0.24); border-color: rgba(74,222,128,0.48); box-shadow: inset 0 1px 0 rgba(255,255,255,0.15), 0 8px 28px rgba(34,197,94,0.20); } /* DESKTOP ONLY (>=769px): left-align the stats row directly under the headline and make the CTA full-width (margin-to-margin with the headline/stats) + larger. Mobile is handled in the max-width:768 block and is intentionally untouched. */ @media (min-width: 769px) { .wl-stats-row { justify-content: flex-start; gap: 52px; } .wl-cta-btn { display: flex; width: 100%; padding: 20px 40px; font-size: 19px; } } /* Right — glow stage */ .wl-reveal-right { display: flex; align-items: center; justify-content: center; position: relative; z-index: 2; transform: translateX(-60px); } .wl-glow-stage { position: relative; width: 420px; height: 420px; display: flex; align-items: center; justify-content: center; } .wl-glow-stage::before { content: ''; position: absolute; inset: -40px; background: radial-gradient(ellipse at center, rgba(34,197,94,0.18) 0%, rgba(74,222,128,0.06) 45%, transparent 70%); border-radius: 50%; animation: wlGlowPulse 3.5s ease-in-out infinite; } @keyframes wlGlowPulse { 0%, 100% { opacity: 0.7; transform: scale(1); } 50% { opacity: 1; transform: scale(1.06); } } /* Orbit ring */ .wl-orbit-ring { position: absolute; inset: 0; border-radius: 50%; border: 1px solid rgba(74,222,128,0.12); animation: wlOrbit 18s linear infinite; } @keyframes wlOrbit { from { transform: rotate(0deg); } to { transform: rotate(360deg); } } .wl-orbit-badge { position: absolute; background: rgba(12,30,18,0.85); backdrop-filter: blur(16px); -webkit-backdrop-filter: blur(16px); border: 1px solid rgba(74,222,128,0.25); border-radius: 50px; padding: 7px 16px; font-size: 11px; font-weight: 500; color: rgba(255,255,255,0.85); letter-spacing: 0.5px; white-space: nowrap; /* counter-rotate so text stays upright */ animation: wlCounterOrbit 18s linear infinite; } @keyframes wlCounterOrbit { from { transform: rotate(0deg); } to { transform: rotate(-360deg); } } .wl-orbit-badge-1 { top: 0; left: 50%; transform: translate(-50%, -50%) rotate(0deg); animation: wlCounterOrbitBadge1 18s linear infinite; } .wl-orbit-badge-2 { top: 75%; left: 93.3%; transform: translate(-50%, -50%) rotate(0deg); animation: wlCounterOrbitBadge2 18s linear infinite; } .wl-orbit-badge-3 { top: 75%; left: 6.7%; transform: translate(-50%, -50%) rotate(0deg); animation: wlCounterOrbitBadge3 18s linear infinite; } /* Counter-rotate while preserving center-anchor translation */ @keyframes wlCounterOrbitBadge1 { from { transform: translate(-50%, -50%) rotate(0deg); } to { transform: translate(-50%, -50%) rotate(-360deg); } } @keyframes wlCounterOrbitBadge2 { from { transform: translate(-50%, -50%) rotate(0deg); } to { transform: translate(-50%, -50%) rotate(-360deg); } } @keyframes wlCounterOrbitBadge3 { from { transform: translate(-50%, -50%) rotate(0deg); } to { transform: translate(-50%, -50%) rotate(-360deg); } } /* Product image — slow 3D Y rotation */ .wl-product-img-wrap { position: relative; z-index: 2; width: 280px; height: 280px; display: flex; align-items: center; justify-content: center; perspective: 800px; } .wl-product-img { width: 100%; height: 100%; object-fit: contain; filter: drop-shadow(0 30px 60px rgba(0,0,0,0.6)) drop-shadow(0 0 40px rgba(34,197,94,0.15)); animation: wlProductRotate 14s ease-in-out infinite; transform-style: preserve-3d; } @keyframes wlProductRotate { 0% { transform: rotateY(0deg) translateY(0px); } 25% { transform: rotateY(8deg) translateY(-8px); } 50% { transform: rotateY(0deg) translateY(-14px); } 75% { transform: rotateY(-8deg) translateY(-8px); } 100% { transform: rotateY(0deg) translateY(0px); } } /* ════════════════════════ PART 2 — Marquee ════════════════════════ */ .wl-marquee-section { background: #091910; border-top: 1px solid rgba(255,255,255,0.05); border-bottom: 1px solid rgba(255,255,255,0.05); padding: 0; overflow: hidden; } .wl-marquee-row { overflow: hidden; padding: 14px 0; } .wl-marquee-row:first-child { border-bottom: 1px solid rgba(255,255,255,0.04); } .wl-marquee-track { display: flex; align-items: center; gap: 0; width: max-content; will-change: transform; backface-visibility: hidden; -webkit-backface-visibility: hidden; transform: translate3d(0,0,0); } .wl-marquee-section { /* Keep the marquee on its own compositor layer so iOS Safari doesn't pause the animation while it's offscreen. */ contain: layout paint; } .wl-marquee-left .wl-marquee-track { animation: wlMarqueeLeft 28s linear infinite; } .wl-marquee-right .wl-marquee-track { animation: wlMarqueeRight 32s linear infinite; } @keyframes wlMarqueeLeft { from { transform: translate3d(0,0,0); } to { transform: translate3d(-50%,0,0); } } @keyframes wlMarqueeRight { from { transform: translate3d(-50%,0,0); } to { transform: translate3d(0,0,0); } } .wl-marquee-item { font-size: 12px; letter-spacing: 2px; text-transform: uppercase; color: rgba(255,255,255,0.28); font-weight: 400; padding: 0 20px; white-space: nowrap; font-family: var(--body); } .wl-dot { color: rgba(74,222,128,0.3); font-size: 16px; flex-shrink: 0; } /* ════════════════════════════════════════ BMI Section — Animated Background ════════════════════════════════════════ */ /* Grain canvas overlay */ .bmi-grain-canvas { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; z-index: 0; opacity: 0.18; mix-blend-mode: overlay; } /* Floating light orbs */ .bmi-orb { position: absolute; border-radius: 50%; pointer-events: none; z-index: 0; } /* Orb 1 — large emerald bloom, top-left */ .bmi-orb-1 { width: 800px; height: 800px; background: radial-gradient(circle at 40% 40%, rgba(34,197,94,0.55) 0%, rgba(22,163,74,0.22) 40%, transparent 70%); filter: blur(70px); top: -200px; left: -250px; animation: orbDrift1 28s ease-in-out infinite; } /* Orb 2 — teal bloom, bottom-right */ .bmi-orb-2 { width: 650px; height: 650px; background: radial-gradient(circle at 50% 50%, rgba(16,185,129,0.45) 0%, rgba(6,78,59,0.18) 50%, transparent 70%); filter: blur(90px); bottom: -100px; right: -150px; animation: orbDrift2 34s ease-in-out infinite; } /* Orb 3 — lime spotlight, left-center (behind card) */ .bmi-orb-3 { width: 500px; height: 500px; background: radial-gradient(circle at 50% 50%, rgba(74,222,128,0.38) 0%, rgba(20,120,60,0.12) 55%, transparent 75%); filter: blur(55px); top: 25%; left: 5%; animation: orbDrift3 22s ease-in-out infinite; } /* Orb 4 — subtle cyan accent, upper-right */ .bmi-orb-4 { width: 380px; height: 380px; background: radial-gradient(circle at 50% 50%, rgba(52,211,153,0.32) 0%, rgba(5,150,105,0.1) 50%, transparent 70%); filter: blur(50px); top: 5%; right: 8%; animation: orbDrift4 18s ease-in-out infinite; } /* Orb 5 — deep warm green, center */ .bmi-orb-5 { width: 300px; height: 300px; background: radial-gradient(circle at 50% 50%, rgba(132,204,22,0.22) 0%, transparent 65%); filter: blur(40px); top: 55%; left: 40%; animation: orbDrift1 38s ease-in-out infinite reverse; } @keyframes orbDrift1 { 0%,100% { transform: translate(0px, 0px) scale(1.00); } 25% { transform: translate(70px, 45px) scale(1.06); } 50% { transform: translate(35px, 100px) scale(0.94); } 75% { transform: translate(90px, 30px) scale(1.09); } } @keyframes orbDrift2 { 0%,100% { transform: translate( 0px, 0px) scale(1.00); } 30% { transform: translate(-80px,-55px) scale(1.12); } 60% { transform: translate(-35px,-95px) scale(0.91); } } @keyframes orbDrift3 { 0%,100% { transform: translate( 0px, 0px) scale(1.00); } 40% { transform: translate(55px,-65px) scale(1.16); } 70% { transform: translate(-45px, 45px) scale(0.87); } } @keyframes orbDrift4 { 0%,100% { transform: translate( 0px, 0px) scale(1.00); } 50% { transform: translate(-65px, 75px) scale(1.22); } } /* ── Weight-loss trend line ── */ .bmi-graph-wrap { position: absolute; inset: 0; pointer-events: none; z-index: 0; } .bmi-graph-svg { width: 100%; height: 100%; } .bmi-graph-glow { fill: none; stroke: rgba(180,255,220,0.35); stroke-width: 8; stroke-linecap: square; filter: blur(5px); } .bmi-graph-path { fill: none; stroke: rgba(200,255,230,0.6); stroke-width: 1; stroke-linecap: square; } /* ════════════════════════════ PART 2.5 — BMI Calculator ════════════════════════════ */ .wl-bmi-section { padding: 32px 0 40px; position: relative; overflow: hidden; font-family: 'Inter', system-ui, sans-serif; background-color: #0c1f10; background-image: repeating-linear-gradient( -55deg, transparent 0px, transparent 3px, rgba(255,255,255,0.013) 3px, rgba(255,255,255,0.013) 4px ), repeating-linear-gradient( -55deg, transparent 0px, transparent 12px, rgba(255,255,255,0.006) 12px, rgba(255,255,255,0.006) 13px ), linear-gradient(170deg, #0f2414 0%, #0b1d10 50%, #07150b 100%); } /* Ensure layout + header sit above orbs */ .wl-bmi-header, .wl-bmi-layout { position: relative; z-index: 1; } .wl-bmi-header { text-align: center; margin: 0 auto 20px; max-width: 1200px; padding: 0 48px; } .wl-bmi-heading { font-family: var(--display); font-size: clamp(28px, 2.8vw, 40px); font-weight: 300; color: #fff; line-height: 1.05; letter-spacing: -0.5px; margin: 6px 0 8px; } .wl-bmi-heading em { font-style: italic; } .wl-bmi-sub { color: rgba(255,255,255,0.4); font-size: 14px; letter-spacing: 0.5px; } /* Full-bleed layout: left content; right 50vw is owned by the absolute photo stage */ .wl-bmi-layout { display: grid; grid-template-columns: 1fr 50vw; gap: 0; max-width: none; margin: 0; align-items: stretch; position: relative; z-index: 1; } .wl-bmi-glass-wrap { position: relative; padding-left: max(48px, calc((100vw - 1200px) / 2)); padding-right: 48px; max-width: none; } .wl-bmi-glass-wrap .bmi-card { max-width: 600px; margin-left: auto; } .wl-bmi-photo-stage { position: absolute; top: 0; right: 0; bottom: 0; width: 50vw; z-index: 0; } .wl-bmi-photo { position: absolute; inset: 0; overflow: hidden; background: transparent; border: none; box-shadow: none; cursor: default; } .wl-bmi-photo-inner { position: absolute; inset: 0; z-index: 1; } .wl-bmi-photo-img { position: absolute; bottom: 0; left: 50%; transform: translateX(-50%); width: auto; height: 92%; max-width: none; max-height: none; display: block; -webkit-mask-image: linear-gradient(to top, transparent 0%, #000 18%); mask-image: linear-gradient(to top, transparent 0%, #000 18%); } /* ── Desktop-only entrance: patient photo slides in from the right ── */ @media (min-width: 901px) { @keyframes wlBmiPhotoSlideIn { from { opacity: 0; transform: translateX(120px); filter: blur(4px); } } .wl-bmi-photo.anim-up { opacity: 0; transform: none; transition: none; } .wl-bmi-photo.anim-up.visible { opacity: 1; transform: none; animation: wlBmiPhotoSlideIn 1.3s cubic-bezier(0.22, 1, 0.36, 1) backwards; animation-delay: 0.15s; } @media (prefers-reduced-motion: reduce) { .wl-bmi-photo.anim-up { opacity: 1 !important; animation: none !important; } } } @media (max-width: 900px) { .wl-bmi-layout { grid-template-columns: 1fr; } .wl-bmi-glass-wrap { padding: 0 6px; } .wl-bmi-glass-wrap .bmi-card { margin: 0 auto; } .wl-bmi-photo-stage { position: relative; top: auto; right: auto; bottom: auto; width: 100%; aspect-ratio: 4 / 4.4; min-height: 0; margin: 0; z-index: 2; background: linear-gradient(to top, #0c1f10 0%, #0c1f10 15%, transparent 22%); } .wl-bmi-photo-img { height: 100%; -webkit-mask-image: linear-gradient(to top, rgba(0,0,0,0.25) 0%, #000 18%); mask-image: linear-gradient(to top, rgba(0,0,0,0.25) 0%, #000 18%); } .wl-bmi-glass-wrap .bmi-card { margin-top: 0; } } .wl-bmi-right-col { position: relative; display: flex; flex-direction: column; gap: 20px; } /* ── GLP right-column glass cards ── */ .glp-card { border-radius: 24px; padding: 32px 36px; position: relative; overflow: hidden; color: #fff; backdrop-filter: blur(20px) saturate(160%); -webkit-backdrop-filter: blur(20px) saturate(160%); transition: transform 0.2s ease, box-shadow 0.2s ease; } .glp-card:hover { transform: translateY(-3px); box-shadow: 0 20px 60px rgba(0,0,0,0.4); } /* Card 1 — stat */ .glp-card-1 { background: rgba(22,163,74,0.10); border: 1px solid rgba(34,197,94,0.25); border-top-color: rgba(134,239,172,0.4); } .glp-card-eyebrow { font-size: 10px; letter-spacing: 2.5px; text-transform: uppercase; color: rgba(134,239,172,0.6); margin-bottom: 16px; } .glp-stat-row { display: flex; align-items: flex-end; gap: 20px; margin-bottom: 10px; } .glp-stat-big { font-family: var(--display); font-size: 72px; font-weight: 300; line-height: 1; color: #fff; letter-spacing: -2px; } .glp-stat-unit { font-size: 28px; font-weight: 300; color: rgba(134,239,172,0.7); margin-left: 4px; } .glp-stat-period { font-size: 13px; color: rgba(255,255,255,0.45); line-height: 1.4; padding-bottom: 8px; text-transform: uppercase; letter-spacing: 1px; } .glp-stat-sub { font-size: 11px; color: rgba(255,255,255,0.3); margin-bottom: 20px; } .glp-stat-bar-wrap { display: flex; align-items: center; gap: 12px; } .glp-stat-bar { flex: 1; height: 4px; background: rgba(255,255,255,0.08); border-radius: 2px; overflow: hidden; } .glp-stat-bar-fill { height: 100%; width: 74%; background: linear-gradient(90deg, #22c55e, #86efac); border-radius: 2px; } .glp-stat-bar-lbl { font-size: 10px; color: rgba(134,239,172,0.5); letter-spacing: 1px; text-transform: uppercase; white-space: nowrap; } /* Card 2 — testimonial */ .glp-card-2 { background: rgba(255,255,255,0.04); border: 1px solid rgba(255,255,255,0.09); border-top-color: rgba(255,255,255,0.18); } .glp-stars { color: #22c55e; font-size: 14px; letter-spacing: 2px; margin-bottom: 14px; } .glp-quote { font-family: var(--display); font-size: 18px; font-weight: 300; font-style: italic; line-height: 1.55; color: rgba(255,255,255,0.85); margin: 0 0 20px; } .glp-cite-row { display: flex; align-items: center; gap: 12px; } .glp-cite-avatar { width: 36px; height: 36px; border-radius: 50%; background: rgba(34,197,94,0.2); border: 1px solid rgba(34,197,94,0.3); display: flex; align-items: center; justify-content: center; font-size: 11px; font-weight: 600; color: #86efac; flex-shrink: 0; } .glp-cite-name { font-size: 13px; font-weight: 500; color: #fff; } .glp-cite-detail { font-size: 11px; color: rgba(255,255,255,0.35); margin-top: 2px; } /* Card 3 — quick facts */ .glp-card-3 { background: rgba(6,78,59,0.18); border: 1px solid rgba(34,197,94,0.18); border-top-color: rgba(34,197,94,0.35); } .glp-facts-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 16px 24px; } .glp-fact { display: flex; align-items: center; gap: 10px; } .glp-fact-icon { font-size: 18px; line-height: 1; } .glp-fact-lbl { font-size: 13px; color: rgba(255,255,255,0.7); font-weight: 400; } /* ── iOS Liquid Glass Card ── */ .wl-bmi-glass-wrap { position: relative; overflow: visible; } /* True transparent liquid glass */ .bmi-card { background: rgba(255,255,255,0.05); backdrop-filter: blur(4px) saturate(160%); -webkit-backdrop-filter: blur(4px) saturate(160%); border-radius: 32px; border: 1px solid rgba(255,255,255,0.28); border-top: 1px solid rgba(255,255,255,0.55); border-bottom: 1px solid rgba(255,255,255,0.10); padding: 14px 30px 16px; position: relative; z-index: 1; overflow: hidden; box-shadow: 0 8px 32px rgba(0,0,0,0.25), 0 32px 64px rgba(0,0,0,0.18), inset 0 1px 0 rgba(255,255,255,0.6), inset 0 -1px 0 rgba(255,255,255,0.08); } /* Top specular caustic */ .bmi-card::before { content: ''; position: absolute; top: 0; left: 0; right: 0; height: 48%; background: linear-gradient( 180deg, rgba(255,255,255,0.14) 0%, rgba(255,255,255,0.04) 50%, transparent 100% ); pointer-events: none; border-radius: 32px 32px 0 0; z-index: 2; } /* Left + bottom edge refractions */ .bmi-card::after { content: ''; position: absolute; inset: 0; border-radius: 32px; background: linear-gradient(90deg, rgba(255,255,255,0.06) 0%, transparent 15%), linear-gradient(0deg, rgba(255,255,255,0.04) 0%, transparent 12%); pointer-events: none; z-index: 2; } /* Inner scatter */ .bmi-card-reflection { position: absolute; inset: 0; border-radius: 32px; background: radial-gradient(ellipse 65% 40% at 30% 15%, rgba(255,255,255,0.09) 0%, transparent 100%); pointer-events: none; z-index: 2; } /* BMI Display — top section */ .bmi-display { text-align:center; margin-bottom:8px; position:relative; z-index:1; display:flex; flex-direction:column; align-items:center; } .bmi-cat-pill { display:flex; align-items:center; justify-content:center; gap:6px; width:200px; padding:6px 18px; border-radius:50px; font-size:11px; font-weight:700; letter-spacing:1.5px; text-transform:uppercase; margin-bottom:10px; transition: background 0.5s ease, color 0.5s ease; box-shadow: inset 0 1px 1px rgba(255,255,255,0.06), 0 2px 8px rgba(0,0,0,0.2); border:1px solid rgba(255,255,255,0.04); } .bmi-dot { width:7px; height:7px; border-radius:50%; flex-shrink:0; transition: background 0.5s ease, box-shadow 0.5s ease; } /* Satin chrome number */ .bmi-number { font-size:68px; font-weight:900; letter-spacing:-3px; line-height:1; padding:2px 10px 4px; background: linear-gradient(180deg, #b8b8bc 0%,#cdcdd1 6%,#e2e2e6 12%,#f0f0f2 18%,#f8f8fa 24%, #f2f2f4 30%,#e4e4e8 38%,#d6d6da 46%,#ccccd0 54%,#c4c4c8 62%, #bcbcc0 70%,#b2b2b8 78%,#a8a8ae 86%,#a0a0a6 93%,#96969c 100%); -webkit-background-clip:text; -webkit-text-fill-color:transparent; background-clip:text; filter: drop-shadow(0 2px 1px rgba(0,0,0,0.2)) drop-shadow(0 4px 3px rgba(0,0,0,0.15)) drop-shadow(0 8px 8px rgba(0,0,0,0.12)) drop-shadow(0 16px 20px rgba(0,0,0,0.08)); transition:opacity 0.3s; user-select:none; } .bmi-label-text { font-size:13px; font-weight:500; color:rgba(255,255,255,0.4); letter-spacing:0.5px; } /* Scale bar */ .bmi-scale { margin:12px 0 12px; position:relative; z-index:1; } .bmi-scale-bar { height:14px; border-radius:7px; position:relative; background: linear-gradient(90deg, #3b82f6 0%,#3b82f6 12%, #22c55e 12%,#22c55e 40%, #eab308 40%,#eab308 60%, #f97316 60%,#f97316 78%, #ef4444 78%,#ef4444 100%); box-shadow: 0 2px 4px rgba(0,0,0,0.4), 0 4px 12px rgba(0,0,0,0.25), 0 8px 24px rgba(0,0,0,0.15), inset 0 -3px 4px rgba(0,0,0,0.35), inset 0 -1px 1px rgba(0,0,0,0.2); } .bmi-scale-bar::before { content:''; position:absolute; top:1px; left:4px; right:4px; height:5px; border-radius:4px 4px 8px 8px; background: linear-gradient(180deg, rgba(255,255,255,0.55) 0%, rgba(255,255,255,0.25) 40%, transparent 100%); pointer-events:none; z-index:2; } .bmi-scale-bar::after { content:''; position:absolute; bottom:1px; left:8px; right:8px; height:3px; border-radius:2px; background: linear-gradient(180deg, transparent 0%, rgba(255,255,255,0.08) 60%, rgba(255,255,255,0.12) 100%); pointer-events:none; z-index:2; } .bmi-scale-ind { position:absolute; top:-5px; width:24px; height:24px; border-radius:50%; background: radial-gradient(circle at 35% 35%,#ffffff 0%,#e0e0e0 20%,#a0a0a0 50%,#666 80%,#444 100%); border:2px solid rgba(255,255,255,0.9); box-shadow: 0 0 0 3px rgba(0,0,0,0.2), 0 4px 12px rgba(0,0,0,0.5), 0 8px 20px rgba(0,0,0,0.2), inset 0 1px 3px rgba(255,255,255,0.9), inset 0 -2px 4px rgba(0,0,0,0.3); transform:translateX(-50%); transition:left 0.6s cubic-bezier(0.34,1.56,0.64,1); z-index:5; } .bmi-scale-labels { display:flex; justify-content:space-between; margin-top:10px; font-size:10px; font-weight:600; color:rgba(255,255,255,0.4); letter-spacing:0.3px; } /* Healthy range row */ .bmi-healthy-range { background: rgba(255,255,255,0.06); border: 1px solid rgba(255,255,255,0.15); border-top: 1px solid rgba(255,255,255,0.25); border-radius: 14px; padding: 10px 18px; margin-bottom: 14px; display: flex; justify-content: space-between; align-items: center; box-shadow: inset 0 1px 0 rgba(255,255,255,0.2), 0 2px 8px rgba(0,0,0,0.12); position: relative; z-index: 1; } .bmi-hr-label { font-size:12px; color:rgba(255,255,255,0.4); } .bmi-hr-value { font-size:15px; font-weight:700; color:rgba(232,237,233,1); } /* Unit toggle */ .bmi-toggle-row { display:flex; justify-content:center; margin-bottom:16px; position:relative; z-index:1; } .bmi-toggle { display:flex; background: linear-gradient(145deg,rgba(255,255,255,0.04),rgba(0,0,0,0.08)); border-radius:12px; padding:3px; border:1px solid rgba(255,255,255,0.06); box-shadow: inset 0 2px 4px rgba(0,0,0,0.25), 0 1px 0 rgba(255,255,255,0.03); } .bmi-toggle-btn { padding:8px 22px; border:none; border-radius:10px; font-size:12px; font-weight:600; cursor:pointer; font-family:'Inter',system-ui,sans-serif; background:transparent; color:rgba(255,255,255,0.4); transition:all 0.3s ease; } .bmi-toggle-btn.on { background: linear-gradient(145deg,rgba(34,197,94,0.15),rgba(34,197,94,0.08)); color:#4ade80; box-shadow: 0 2px 8px rgba(34,197,94,0.12), inset 0 1px 1px rgba(255,255,255,0.05); border:1px solid rgba(34,197,94,0.1); } /* Slider controls */ .bmi-control { margin-bottom:10px; position:relative; z-index:1; } .bmi-control:last-of-type { margin-bottom:0; } .bmi-control-header { display:flex; justify-content:space-between; align-items:baseline; margin-bottom:6px; } .bmi-control-name { font-size:12px; font-weight:600; color:rgba(255,255,255,0.4); letter-spacing:0.5px; } .bmi-control-value { font-size:22px; font-weight:800; letter-spacing:-0.5px; background: linear-gradient(180deg,#ffffff 0%,#c8c8c8 50%,#a0a0a0 100%); -webkit-background-clip:text; -webkit-text-fill-color:transparent; background-clip:text; filter:drop-shadow(0 1px 1px rgba(0,0,0,0.3)); } .bmi-unit-lbl { font-size:13px; font-weight:500; color:rgba(255,255,255,0.4); margin-left:2px; -webkit-text-fill-color:rgba(255,255,255,0.4); } .bmi-range-wrap { position:relative; height:12px; } .bmi-range-wrap input[type=range] { -webkit-appearance:none; appearance:none; position:absolute; top:0; left:0; width:100%; height:12px; background:transparent; outline:none; cursor:pointer; z-index:5; margin:0; } .bmi-range-track { position:absolute; top:0; left:0; right:0; height:12px; border-radius:6px; background:rgba(255,255,255,0.03); overflow:hidden; box-shadow: inset 0 2px 4px rgba(0,0,0,0.5), inset 0 -1px 1px rgba(0,0,0,0.2), 0 2px 4px rgba(0,0,0,0.2), 0 1px 0 rgba(255,255,255,0.04); } .bmi-range-fill { height:100%; border-radius:6px; background: linear-gradient(180deg,#4ade80 0%,#22c55e 45%,#16a34a 100%); box-shadow:0 0 14px rgba(34,197,94,0.25); transition:width 0.1s ease; position:relative; } .bmi-range-fill::after { content:''; position:absolute; top:1px; left:4px; right:4px; height:4px; border-radius:3px 3px 6px 6px; background: linear-gradient(180deg,rgba(255,255,255,0.5) 0%,rgba(255,255,255,0.15) 50%,transparent 100%); } .bmi-range-wrap input[type=range]::-webkit-slider-thumb { -webkit-appearance:none; appearance:none; width:24px; height:24px; border-radius:50%; background: radial-gradient(circle at 35% 35%,#7af0a8 0%,#4ade80 25%,#22c55e 55%,#15803d 100%); border:2.5px solid rgba(255,255,255,0.9); box-shadow: 0 0 12px rgba(34,197,94,0.25), 0 2px 6px rgba(0,0,0,0.4), 0 6px 16px rgba(0,0,0,0.2), inset 0 1px 2px rgba(255,255,255,0.6), inset 0 -1px 3px rgba(0,0,0,0.3); cursor:grab; transition:transform 0.15s, box-shadow 0.15s; } .bmi-range-wrap input[type=range]::-webkit-slider-thumb:hover { transform:scale(1.12); box-shadow:0 0 24px rgba(34,197,94,0.5),0 4px 14px rgba(0,0,0,0.4),inset 0 1px 2px rgba(255,255,255,0.6); } .bmi-range-wrap input[type=range]::-webkit-slider-thumb:active { cursor:grabbing; transform:scale(1.05); } .bmi-range-wrap input[type=range]::-moz-range-thumb { width:24px; height:24px; border-radius:50%; border:2.5px solid rgba(255,255,255,0.9); background: radial-gradient(circle at 35% 35%,#7af0a8 0%,#4ade80 25%,#22c55e 55%,#15803d 100%); box-shadow:0 0 12px rgba(34,197,94,0.25),0 2px 6px rgba(0,0,0,0.4),inset 0 1px 2px rgba(255,255,255,0.6); cursor:grab; } .bmi-range-limits { display:flex; justify-content:space-between; margin-top:12px; font-size:10px; color:rgba(255,255,255,0.15); } /* Goal projection — "reach your goal in ~X weeks" */ .sbm-goal{background:rgba(255,255,255,.05);border:1px solid rgba(255,255,255,.14);border-radius:16px;padding:13px 16px;margin:2px 0 11px;text-align:center;position:relative;z-index:1} .sbm-goal-big{font-size:15px;color:#e8ede9;font-weight:600;margin:0;line-height:1.35;min-height:41px;display:flex;align-items:center;justify-content:center;text-align:center} .sbm-goal-big strong{color:#4ade80} .sbm-goal-sub{font-size:12px;color:rgba(255,255,255,.5);margin:5px 0 11px;min-height:16px} .sbm-goal-sub strong{color:#e8ede9} .sbm-journey{position:relative;height:11px;border-radius:100px;background:rgba(0,0,0,.3);margin:0 4px} .sbm-journey i{display:block;height:100%;border-radius:100px;background:linear-gradient(90deg,#4ade80,#16a34a);box-shadow:0 0 12px rgba(34,197,94,.35);transition:width .5s ease} .sbm-journey-ends{display:flex;justify-content:space-between;font-size:11px;color:rgba(255,255,255,.4);margin-top:8px} .sbm-fine{font-size:10px;color:rgba(255,255,255,.3);margin:11px 0 0;line-height:1.5;text-align:center} /* Result card */ .bmi-result-card { background: transparent; border: none; border-radius: 0; padding: 0; text-align: center; transition: all 0.5s ease; position: relative; box-shadow: none; z-index: 1; } .bmi-result-card::before { content: none; } .bmi-result-card.alt { background: rgba(255,255,255,0.05); border-color: rgba(255,255,255,0.12); border-top-color: rgba(255,255,255,0.22); } .bmi-result-card.alt::before { background: linear-gradient(90deg, transparent, rgba(255,255,255,0.15), transparent); } .bmi-result-text { font-size:14px; line-height:1.6; color:rgba(255,255,255,0.6); margin-bottom:16px; } .bmi-result-text strong { color:#4ade80; font-weight:600; } .bmi-result-cta { display:flex; width:100%; align-items:center; justify-content:center; gap:8px; padding:16px 36px; border:none; border-radius:14px; background: linear-gradient(145deg,#2dd668,#22c55e 40%,#16a34a); color:#fff; font-size:14px; font-weight:700; cursor:pointer; text-decoration:none; box-shadow: 0 4px 20px rgba(34,197,94,0.3), inset 0 1px 1px rgba(255,255,255,0.2), inset 0 -2px 4px rgba(0,0,0,0.15); transition:all 0.25s ease; position:relative; overflow:hidden; border:1px solid rgba(255,255,255,0.1); } .bmi-result-cta::after { content:''; position:absolute; top:0; left:-100%; width:100%; height:100%; background: linear-gradient(90deg,transparent,rgba(255,255,255,0.12),transparent); transition:left 0.5s; } .bmi-result-cta:hover::after { left:100%; } .bmi-result-cta:hover { transform:translateY(-1px); box-shadow:0 6px 28px rgba(34,197,94,0.4); color:#fff; } /* ════════════════════════ PART 3 — Card Carousel ════════════════════════ */ .wl-carousel-section { padding: 100px 0 80px; position: relative; overflow: hidden; } .wl-carousel-header { max-width: 1200px; margin: 0 auto 52px; padding: 0 48px; } .wl-carousel-heading { font-family: var(--display); font-size: clamp(36px, 4vw, 58px); font-weight: 300; color: #fff; line-height: 1.05; letter-spacing: -0.5px; } .wl-carousel-heading em { font-style: italic; color: #4ade80; } .wl-carousel-track-wrap { overflow: hidden; padding: 20px 0 40px; } .wl-carousel-track { display: flex; gap: 20px; padding: 0 48px; /* GSAP will drive horizontal movement; natural scroll fallback */ will-change: transform; } /* Glass cards */ .wl-card { flex-shrink: 0; width: 300px; min-height: 380px; background: rgba(255,255,255,0.06); backdrop-filter: blur(20px); -webkit-backdrop-filter: blur(20px); border: 1px solid rgba(255,255,255,0.10); border-radius: 28px; padding: 32px 28px; display: flex; flex-direction: column; box-shadow: 0 24px 64px rgba(0,0,0,0.4), 0 4px 16px rgba(0,0,0,0.3), inset 0 1px 0 rgba(255,255,255,0.12), inset 0 -1px 0 rgba(0,0,0,0.15); transition: transform 0.35s cubic-bezier(0.34,1.56,0.64,1), border-color 0.3s, box-shadow 0.3s; cursor: pointer; } .wl-card:hover { transform: translateY(-8px); border-color: rgba(74,222,128,0.25); box-shadow: 0 40px 80px rgba(0,0,0,0.5), 0 0 40px rgba(74,222,128,0.08), inset 0 1px 0 rgba(255,255,255,0.14); } .wl-card-top { display: flex; align-items: center; justify-content: space-between; margin-bottom: 24px; } .wl-card-icon { font-size: 28px; width: 52px; height: 52px; background: rgba(74,222,128,0.08); border: 1px solid rgba(74,222,128,0.15); border-radius: 16px; display: flex; align-items: center; justify-content: center; } .wl-card-price-badge { background: rgba(74,222,128,0.12); border: 1px solid rgba(74,222,128,0.2); border-radius: 50px; padding: 5px 14px; font-size: 11px; font-weight: 500; color: #4ade80; letter-spacing: 0.3px; white-space: nowrap; } .wl-card-body { flex: 1; } .wl-card-name { font-family: var(--display); font-size: 24px; font-weight: 400; color: #fff; line-height: 1.15; margin-bottom: 12px; letter-spacing: -0.3px; } .wl-card-desc { font-size: 13px; color: rgba(255,255,255,0.45); line-height: 1.8; font-weight: 300; } .wl-card-link { display: inline-flex; align-items: center; gap: 6px; margin-top: 28px; font-size: 12px; color: rgba(74,222,128,0.7); letter-spacing: 0.5px; text-decoration: none; font-weight: 500; transition: color 0.2s, gap 0.2s; } .wl-card:hover .wl-card-link { color: #4ade80; gap: 10px; } /* Progress bar */ .wl-carousel-progress { max-width: 1200px; margin: 0 auto; padding: 0 48px; height: 2px; background: rgba(255,255,255,0.07); border-radius: 2px; overflow: hidden; } .wl-carousel-bar { height: 100%; width: 20%; background: linear-gradient(90deg, #22c55e, #4ade80); border-radius: 2px; transition: width 0.1s linear; } /* ════════════════════════ PART 4 — Tabs ════════════════════════ */ .wl-tabs-section { padding: 100px 0 120px; border-top: 1px solid rgba(255,255,255,0.06); } .wl-tabs-container { max-width: 1200px; margin: 0 auto; padding: 0 48px; } /* Tab nav */ .wl-tabs-nav { display: flex; gap: 0; border-bottom: 1px solid rgba(255,255,255,0.1); margin-bottom: 56px; } .wl-tab { padding: 16px 32px; font-size: 14px; font-weight: 400; color: rgba(255,255,255,0.35); background: none; border: none; border-bottom: 2px solid transparent; margin-bottom: -1px; cursor: pointer; letter-spacing: 0.2px; font-family: var(--body); transition: color 0.25s, border-color 0.25s; position: relative; } .wl-tab:hover { color: rgba(255,255,255,0.65); } .wl-tab.active { color: #fff; border-bottom-color: #4ade80; } /* Tab panels */ .wl-tab-panel { display: none; opacity: 0; transform: translateY(14px); transition: opacity 0.35s ease, transform 0.35s ease; } .wl-tab-panel.active { display: block; opacity: 1; transform: translateY(0); } /* Animation helper when switching */ .wl-tab-panel.entering { display: block; animation: wlPanelIn 0.35s ease forwards; } @keyframes wlPanelIn { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: translateY(0); } } /* Panel: How it works */ .wl-steps-row { display: grid; grid-template-columns: 1fr 32px 1fr 32px 1fr; gap: 0; align-items: start; } .wl-step-divider { display: flex; align-items: flex-start; justify-content: center; padding-top: 28px; } .wl-step-divider::after { content: ''; width: 1px; height: 40px; background: linear-gradient(to bottom, rgba(74,222,128,0.25), transparent); } .wl-step-icon { font-family: var(--display); font-size: 52px; font-weight: 300; color: rgba(74,222,128,0.2); line-height: 1; margin-bottom: 20px; letter-spacing: -2px; } .wl-step-title { font-family: var(--display); font-size: 28px; font-weight: 400; color: #fff; margin-bottom: 12px; } .wl-step-body { font-size: 13px; color: rgba(255,255,255,0.45); line-height: 1.9; font-weight: 300; max-width: 300px; } /* Panel: Qualify */ .wl-qualify-content { display: grid; grid-template-columns: 1fr auto; gap: 80px; align-items: start; } .wl-qualify-heading { font-family: var(--display); font-size: 40px; font-weight: 400; color: #fff; margin-bottom: 16px; } .wl-qualify-body { font-size: 14px; color: rgba(255,255,255,0.45); line-height: 1.9; font-weight: 300; margin-bottom: 32px; max-width: 460px; } .wl-qualify-criteria { display: flex; flex-direction: column; gap: 12px; } .wl-qualify-item { display: flex; align-items: center; gap: 12px; font-size: 14px; color: rgba(255,255,255,0.6); font-weight: 300; } .wl-qualify-check { color: #4ade80; font-size: 14px; font-weight: 600; flex-shrink: 0; } .wl-qualify-cta-card { background: rgba(255,255,255,0.06); backdrop-filter: blur(20px); -webkit-backdrop-filter: blur(20px); border: 1px solid rgba(255,255,255,0.1); border-radius: 28px; padding: 40px 36px; text-align: center; box-shadow: 0 24px 64px rgba(0,0,0,0.35), inset 0 1px 0 rgba(255,255,255,0.1); min-width: 240px; } .wl-qualify-timer { font-family: var(--display); font-size: 72px; font-weight: 300; color: #4ade80; line-height: 1; margin-bottom: 16px; letter-spacing: -3px; } .wl-qualify-timer span { font-size: 22px; color: rgba(255,255,255,0.4); letter-spacing: 0; font-family: var(--body); font-weight: 300; } .wl-qualify-cta-text { font-size: 13px; color: rgba(255,255,255,0.4); line-height: 1.7; margin-bottom: 28px; font-weight: 300; } .wl-cta-sm { font-size: 13px; padding: 14px 28px; } /* Panel: Results */ .wl-results-content { display: grid; grid-template-columns: auto 1fr; gap: 80px; align-items: start; } .wl-results-big-num { font-family: var(--display); font-size: clamp(64px,8vw,110px); font-weight: 300; color: #4ade80; line-height: 1; letter-spacing: -3px; white-space: nowrap; } .wl-results-stat-label { font-size: 13px; color: rgba(255,255,255,0.4); letter-spacing: 0.3px; line-height: 1.6; max-width: 220px; margin-top: 12px; font-weight: 300; } .wl-results-quote-wrap { display: flex; flex-direction: column; gap: 24px; } .wl-quote { background: rgba(255,255,255,0.05); border: 1px solid rgba(255,255,255,0.08); border-left: 3px solid rgba(74,222,128,0.4); border-radius: 0 16px 16px 0; padding: 24px 28px; } .wl-quote p { font-family: var(--display); font-size: 18px; font-weight: 300; font-style: italic; color: rgba(255,255,255,0.75); line-height: 1.6; margin-bottom: 12px; } .wl-quote cite { font-size: 11px; color: rgba(255,255,255,0.3); letter-spacing: 0.5px; font-style: normal; } /* ════════════════════════════════════════════════ PEPTIDE SECTION — blue scroll-pinned parallax ════════════════════════════════════════════════ */ .pep-section { background: #0f2450; background-image: radial-gradient(ellipse 70% 55% at 82% 18%, rgba(59,130,246,0.32) 0%, rgba(37,99,235,0.10) 35%, transparent 65%), radial-gradient(ellipse 60% 60% at 12% 78%, rgba(29,78,216,0.28) 0%, transparent 60%), radial-gradient(ellipse 45% 50% at 50% 100%, rgba(8,14,35,0.70) 0%, transparent 70%), radial-gradient(ellipse 40% 45% at 0% 0%, rgba(8,14,35,0.60) 0%, transparent 70%), linear-gradient(165deg, #12275a 0%, #12296b 40%, #102252 70%, #080f26 100%); position: relative; z-index: 5; overflow: hidden; } /* ── Blue animated orbs ── */ .pep-orb { position: absolute; border-radius: 50%; pointer-events: none; z-index: 0; } .pep-orb-1 { width: 750px; height: 750px; background: radial-gradient(circle at 40% 40%, rgba(96,165,250,0.22) 0%, rgba(59,130,246,0.08) 40%, transparent 70%); filter: blur(90px); top: -180px; right: -120px; animation: pepOrb1 30s ease-in-out infinite; } .pep-orb-2 { width: 550px; height: 550px; background: radial-gradient(circle at 50% 50%, rgba(15,23,54,0.65) 0%, rgba(8,14,35,0.25) 55%, transparent 70%); filter: blur(100px); bottom: -100px; left: -120px; animation: pepOrb2 38s ease-in-out infinite; } .pep-orb-3 { width: 420px; height: 420px; background: radial-gradient(circle at 50% 50%, rgba(147,197,253,0.14) 0%, transparent 65%); filter: blur(75px); top: 28%; left: 22%; animation: pepOrb3 26s ease-in-out infinite; } .pep-orb-4 { width: 360px; height: 360px; background: radial-gradient(circle at 50% 50%, rgba(15,23,42,0.45) 0%, transparent 70%); filter: blur(80px); top: 55%; right: 8%; animation: pepOrb1 42s ease-in-out infinite reverse; } @keyframes pepOrb1 { 0%,100% { transform: translate(0,0) scale(1); } 33% { transform: translate(-65px, 55px) scale(1.09); } 66% { transform: translate(45px, -45px) scale(0.93); } } @keyframes pepOrb2 { 0%,100% { transform: translate(0,0) scale(1); } 40% { transform: translate(75px, -65px) scale(1.12); } 70% { transform: translate(-35px, 35px) scale(0.91); } } @keyframes pepOrb3 { 0%,100% { transform: translate(0,0) scale(1); } 50% { transform: translate(-55px, 75px) scale(1.16); } } /* ── Showcase wrap ── */ .pep-showcase-wrap { padding: 56px 40px 0; position: relative; z-index: 1; } /* ── Light-blue intro panel (header + product row) — full-bleed ── */ .pep-catalog-intro { margin: -56px -40px 0; padding: 56px 40px 56px; background: #e2ecfa; background-image: radial-gradient(ellipse 90% 70% at 78% 28%, rgba(59,130,246,0.12) 0%, transparent 58%), radial-gradient(ellipse 55% 75% at 12% 82%, rgba(29,78,216,0.08) 0%, transparent 55%), linear-gradient(165deg, #edf3fc 0%, #dbe6f7 55%, #c6d4ec 100%); position: relative; z-index: 2; } /* ── Section header ── */ .pep-showcase-header { display: flex; flex-direction: row; align-items: flex-end; justify-content: space-between; gap: 32px; margin-bottom: 48px; } .pep-showcase-header-left { text-align: left; flex: 1 1 auto; } .pep-view-all { display: inline-flex; align-items: center; border-radius: 100px; text-decoration: none; white-space: nowrap; flex: 0 0 auto; background: #2563eb; box-shadow: 0 4px 20px rgba(0,0,0,0.08); transition: all 200ms ease; } .pep-view-all:hover { background: #1d4ed8; box-shadow: 0 8px 28px rgba(0,0,0,0.12); transform: translateY(-1px); } .pep-view-all-cta { display: inline-flex; align-items: center; gap: 10px; padding: 18px 36px; font-family: var(--body); font-size: 14px; font-weight: 500; color: #fff; letter-spacing: 0.3px; } .pep-view-all-arrow { font-size: 12px; font-weight: 400; opacity: 0.85; transition: transform 200ms ease; } .pep-view-all:hover .pep-view-all-arrow { transform: translateX(2px); } .pep-eyebrow { font-size: 11px; letter-spacing: 3px; text-transform: uppercase; color: rgba(29,78,216,0.75); margin-bottom: 16px; font-family: var(--body); font-weight: 600; display: flex; flex-direction: column; gap: 6px; } .pep-eyebrow-line { display: block; } /* Big "The Peptide Catalogue." display heading */ .pep-section-word { font-family: var(--display); font-size: clamp(48px, 6vw, 92px); font-weight: 300; letter-spacing: -2px; color: #0a1424; line-height: 0.98; margin: 0 0 14px; display: block; } .pep-section-word em { font-style: italic; color: #2563eb; } .pep-showcase-sub { font-family: var(--body); font-size: 15px; color: rgba(30,41,59,0.72); margin: 0; font-weight: 400; max-width: 640px; line-height: 1.55; } .pep-showcase-sub strong { color: #0a1424; font-weight: 700; } /* ── Product showcase row — glass version of shop cards ── */ .pep-product-row { display: grid; grid-template-columns: repeat(4, 1fr); gap: 22px; margin-bottom: 24px; } .pep-prod-card { background: #ffffff; border: 1px solid rgba(10,22,40,0.06); border-radius: 24px; overflow: hidden; display: flex; flex-direction: column; transition: transform 0.3s ease, box-shadow 0.3s ease, border-color 0.3s ease; cursor: pointer; box-shadow: 0 10px 32px rgba(15,30,55,0.10), 0 2px 6px rgba(15,30,55,0.06); } .pep-prod-card:hover { box-shadow: 0 18px 48px rgba(15,30,55,0.15), 0 2px 6px rgba(15,30,55,0.08); border-color: rgba(37,99,235,0.25); transform: translateY(-3px); } /* Image area — light blue top panel */ .pep-prod-img-area { position: relative; height: 400px; background: linear-gradient(180deg, #eef3fb 0%, #e3ebf7 100%); display: flex; align-items: flex-end; justify-content: center; padding-bottom: 36px; overflow: hidden; } /* Trust pill overlay — iOS frosted glass credentialing badge */ .pep-prod-trust-overlay { position: absolute; top: 20px; left: 14px; z-index: 10; display: inline-flex; align-items: center; gap: 6px; padding: 5px 10px 5px 8px; background: rgba(255,255,255,0.55); backdrop-filter: blur(20px) saturate(180%); -webkit-backdrop-filter: blur(20px) saturate(180%); border: 0.5px solid rgba(255,255,255,0.8); border-radius: 999px; box-shadow: 0 1px 2px rgba(0,0,0,0.04), inset 0 0 0 0.5px rgba(255,255,255,0.5); font-family: var(--body), 'Inter', sans-serif; font-size: 10.5px; font-weight: 500; color: #1e40af; letter-spacing: -0.01em; white-space: nowrap; } .pep-prod-trust-dot { position: relative; width: 5px; height: 5px; display: inline-flex; flex-shrink: 0; border-radius: 50%; background: #10b981; } .pep-prod-trust-dot::after { content: ''; position: absolute; inset: 0; border-radius: 50%; background: #10b981; animation: pep-trust-pulse 2.5s cubic-bezier(0,0,0.2,1) infinite; } @keyframes pep-trust-pulse { 0% { transform: scale(1); opacity: 0.7; } 70%, 100% { transform: scale(2.4); opacity: 0; } } /* Best Seller overlay — mirrors trust pill (top-right), amber accent */ .pep-prod-bestseller-overlay { position: absolute; top: 20px; right: 14px; z-index: 10; display: inline-flex; align-items: center; gap: 5px; padding: 5px 10px 5px 8px; background: rgba(255,255,255,0.55); backdrop-filter: blur(20px) saturate(180%); -webkit-backdrop-filter: blur(20px) saturate(180%); border: 0.5px solid rgba(255,255,255,0.8); border-radius: 999px; box-shadow: 0 1px 2px rgba(0,0,0,0.04), inset 0 0 0 0.5px rgba(255,255,255,0.5); font-family: var(--body), 'Inter', sans-serif; font-size: 10.5px; font-weight: 600; color: #b45309; letter-spacing: -0.005em; white-space: nowrap; } .pep-prod-bestseller-star { color: #f59e0b; font-size: 11px; line-height: 1; } .pep-prod-img-area img { height: 273px; width: auto; object-fit: contain; transition: transform 0.4s ease; display: block; filter: drop-shadow(0 8px 24px rgba(29,78,216,0.4)); } .pep-prod-card:hover .pep-prod-img-area img { transform: scale(1.05) translateY(-4px); } /* Body — mirrors .product-body */ .pep-prod-body { padding: 16px 28px 28px; display: flex; flex-direction: column; align-items: center; text-align: center; flex: 1; } .pep-prod-name { font-family: 'General Sans', var(--body), sans-serif; font-size: 24px; font-weight: 500; letter-spacing: -0.01em; line-height: 1.1; color: #0a0a0a; margin: 0 0 12px; text-align: center; text-wrap: balance; } .pep-prod-cat { font-size: 10px; font-weight: 600; letter-spacing: 0.18em; text-transform: uppercase; color: rgba(30,41,59,0.45); margin: 0 0 20px; text-align: center; } .pep-prod-badge { display: inline-flex; align-self: center; padding: 3px 10px; background: rgba(37,99,235,0.1); color: #2563eb; border-radius: 100px; font-size: 10px; font-weight: 600; letter-spacing: 0.5px; margin: 0 0 24px; } .pep-prod-desc { font-size: 15px; color: #64748b; line-height: 1.65; font-weight: 400; margin: 0 0 24px; } .pep-prod-price { font-family: var(--display); font-size: 28px; font-weight: 300; color: #0a1424; } .pep-prod-price sub { font-size: 13px; color: rgba(30,41,59,0.55); font-weight: 400; vertical-align: baseline; font-family: var(--body); } .pep-prod-gated { display: flex; align-items: center; gap: 8px; font-size: 11px; line-height: 1.4; color: rgba(30,41,59,0.68); font-weight: 500; padding: 8px 12px; margin-bottom: 16px; background: linear-gradient(135deg, rgba(59,130,246,0.06) 0%, rgba(37,99,235,0.03) 100%); border: 1px solid rgba(37,99,235,0.14); border-radius: 10px; } .pep-prod-gated-lock { flex: 0 0 auto; font-size: 12px; filter: saturate(0.6) opacity(0.75); } .pep-prod-footer { display: flex; align-items: center; justify-content: space-between; width: 100%; margin-top: auto; padding-top: 20px; border-top: 1px solid rgba(10,22,40,0.08); gap: 12px; } .pep-prod-gated, .pep-prod-supply, .pep-prod-desc { width: 100%; } .pep-prod-cta { flex: 1; text-align: center; padding: 9px 14px; font-size: 13px; font-weight: 600; color: #fff; text-decoration: none; background: #2563eb; border-radius: 100px; transition: background 0.2s, transform 0.2s, box-shadow 0.2s; box-shadow: 0 4px 12px rgba(37,99,235,0.25); } .pep-prod-cta:hover { background: #1d4ed8; transform: translateY(-1px); box-shadow: 0 6px 16px rgba(37,99,235,0.35); } .pep-prod-tag { font-size: 10px; letter-spacing: 1px; color: rgba(30,41,59,0.45); font-weight: 500; } /* ── Bento grid — 2 cards on top (50% each) + 3 cards on bottom (33% each) ── */ .pep-bento { display: grid; grid-template-columns: repeat(6, 1fr); gap: 16px; width: 100%; align-items: stretch; } .pep-bento > .pep-card { width: 100%; height: 100%; } /* Top row — 2 most important cards, half-width each */ .pep-bento > .pep-card-a, .pep-bento > .pep-card-b { grid-column: span 3; min-height: 180px; } /* Bottom row — 3 cards, one third each */ .pep-bento > .pep-card-d, .pep-bento > .pep-card-e, .pep-bento > .pep-card-f { grid-column: span 2; min-height: 160px; } .pep-card-a { min-height: 200px; } .pep-card-b { min-height: 200px; } .pep-card-c { min-height: 200px; } .pep-card-d { min-height: 200px; } .pep-card-e { min-height: 200px; } .pep-card-f { min-height: 200px; } /* Translucent glass cards — let the blue section bg bleed through */ .pep-bento > .pep-card { background: rgba(10, 22, 40, 0.55) !important; backdrop-filter: blur(22px) saturate(160%) !important; -webkit-backdrop-filter: blur(22px) saturate(160%) !important; border: 1px solid rgba(147,197,253,0.18) !important; box-shadow: 0 16px 40px rgba(10,22,40,0.28), inset 0 1px 0 rgba(191,219,254,0.08); color: #fff; } .pep-bento > .pep-card-b { background: rgba(18, 42, 85, 0.5) !important; border-color: rgba(147,197,253,0.25) !important; } .pep-bento > .pep-card-f { background: rgba(8, 18, 34, 0.6) !important; } /* ── Full-bleed QR verification banner ── */ .pep-vv-banner { margin: 0 -40px 24px; padding: 24px 48px; background: radial-gradient(ellipse 55% 130% at 28% 40%, rgba(96,165,250,0.18) 0%, transparent 60%), radial-gradient(ellipse 50% 120% at 92% 60%, rgba(6,15,30,0.45) 0%, transparent 65%), linear-gradient(100deg, rgba(10,22,40,0.78) 0%, rgba(8,18,34,0.5) 40%, rgba(10,22,40,0.55) 60%, rgba(6,15,30,0.8) 100%); border-top: 1px solid rgba(147, 197, 253, 0.18); border-bottom: 1px solid rgba(147, 197, 250, 0.18); backdrop-filter: blur(22px) saturate(160%); -webkit-backdrop-filter: blur(22px) saturate(160%); box-shadow: 0 12px 32px rgba(10,22,40,0.35), inset 0 1px 0 rgba(191,219,254,0.1); position: relative; } .pep-vv-banner::before { content: ""; position: absolute; inset: 0; background: radial-gradient(ellipse 35% 90% at 62% 35%, rgba(147,197,253,0.12) 0%, transparent 70%), radial-gradient(ellipse 25% 80% at 18% 80%, rgba(15,23,42,0.4) 0%, transparent 70%); pointer-events: none; mix-blend-mode: soft-light; } .pep-vv-banner-inner { max-width: none; margin: 0; display: grid; grid-template-columns: auto auto 1fr; gap: 36px; align-items: center; position: relative; z-index: 1; } .pep-vv-banner .pep-vv-qr-wrap { align-items: center; gap: 0; } .pep-vv-banner .pep-vv-qr { width: 155px; height: 155px; border-radius: 14px; padding: 9px; } .pep-vv-banner > .pep-vv-banner-inner > .pep-vv-qr-note { font-family: var(--display); font-size: clamp(22px, 2.2vw, 32px); font-weight: 400; font-style: italic; letter-spacing: 0; text-transform: none; color: rgba(134, 239, 172, 0.95); text-align: left; max-width: none; line-height: 1.1; } .pep-vv-banner .pep-vv-title { font-size: clamp(24px, 2.6vw, 36px); font-weight: 400; margin: 0; } .pep-vv-banner .pep-vv-title em { font-style: italic; font-family: var(--display), 'Cormorant Garamond', serif; color: #bfdbfe; } .pep-vv-banner .pep-vv-sub { font-size: 13px; margin: 2px 0 14px; } .pep-vv-banner .pep-vv-list { display: grid; grid-template-columns: repeat(4, 1fr); gap: 0 32px; flex-direction: unset; } .pep-vv-banner .pep-vv-list li { font-size: 13px; gap: 12px; line-height: 1.5; color: rgba(191, 219, 254, 0.65); } .pep-vv-banner .pep-vv-list li strong { color: #fff; font-weight: 600; } .pep-vv-banner .pep-vv-check { width: 2px; height: 18px; border-radius: 1px; background: rgba(96, 165, 250, 0.55); border: none; font-size: 0; color: transparent; margin-top: 2px; } @media (max-width: 900px) { .pep-vv-banner { margin: 28px -40px 36px; padding: 36px 32px; } .pep-vv-banner-inner { grid-template-columns: 1fr; gap: 28px; justify-items: center; text-align: center; } .pep-vv-banner .pep-vv-list { grid-template-columns: 1fr; text-align: left; } .pep-vv-banner .pep-vv-qr { width: 140px; height: 140px; } } @media (max-width: 720px) { .pep-vv-banner { margin: 0 -24px 28px; padding: 24px 24px; background: linear-gradient(180deg, #07152b 0%, #0a1828 100%); border-top: none; } .pep-vv-banner::before { display: none; } } @media (max-width: 768px) { .pep-showcase-header { flex-direction: column; align-items: flex-start; gap: 28px; } .pep-showcase-header-left { text-align: left; } .pep-showcase-header .pep-view-all { align-self: flex-start; margin-bottom: 0; width: auto; max-width: none; } .pep-showcase-header .pep-view-all-cta { width: auto; padding: 16px 40px; font-size: 15px; gap: 12px; } .pep-showcase-header .pep-view-all-arrow { font-size: 13px; margin-left: 2px; } .pep-showcase-sub strong { font-weight: 400; color: inherit; } /* Swipeable horizontal carousel */ .pep-product-row { display: flex; grid-template-columns: none; overflow-x: auto; overflow-y: visible; scroll-snap-type: x mandatory; -webkit-overflow-scrolling: touch; scroll-padding-left: 20px; padding: 0 20px 8px; margin: 0 -20px; gap: 14px; scrollbar-width: none; } .pep-product-row::-webkit-scrollbar { display: none; } .pep-product-row .pep-prod-card { flex: 0 0 82vw; scroll-snap-align: start; } /* Compact catalogue for mobile — fit header + carousel in 1 viewport */ .pep-catalog-intro { min-height: calc(95vh + 5px); padding: 16px 20px 20px; margin: -36px -20px 0; display: flex; flex-direction: column; } .pep-catalog-intro .pep-product-row { flex: 1 1 auto; align-items: stretch; } .pep-product-row .pep-prod-card { display: flex; flex-direction: column; height: auto; } .pep-prod-card .pep-prod-img-area { flex: 1 1 auto; min-height: 240px; } .pep-prod-card .pep-prod-img-area img { height: auto; max-height: 80%; width: auto; max-width: 78%; object-fit: contain; } .pep-prod-card .pep-prod-body { flex: 0 0 auto; } .pep-showcase-wrap { padding: 0 20px 20px; } .pep-section-word { font-size: clamp(44px, 11vw, 54px); margin: 0 0 12px; } .pep-showcase-sub { font-size: 13px; line-height: 1.45; } .pep-showcase-header { margin-bottom: 40px; gap: 32px; } .pep-eyebrow { margin-bottom: 8px; font-size: 10px; letter-spacing: 2px; flex-direction: row; gap: 0; } .pep-eyebrow .pep-eyebrow-line + .pep-eyebrow-line::before { content: ' · '; padding: 0 6px; } .pep-prod-img-area { height: 230px; } .pep-prod-img-area img { height: 180px; } .pep-prod-body { padding: 24px 22px 26px; } .pep-prod-name { font-size: 22px; margin: 0 0 6px; line-height: 1.15; } .pep-prod-cat { margin: 0 0 16px; } .pep-prod-badge { margin: 0 0 18px; } .pep-prod-desc { font-size: 14px; line-height: 1.6; margin: 0 0 20px; } .pep-prod-footer { margin-top: 12px; padding-top: 12px; } .pep-prod-cta { padding: 12px 14px; font-size: 13px; } } /* ── Card VV: Every Vial Verifiable (single grid cell) ── */ .pep-card-vv { padding: 28px 28px; gap: 14px; } .pep-vv-head { display: flex; flex-direction: column; gap: 4px; } .pep-vv-title { font-family: var(--display), 'Cormorant Garamond', serif; font-size: clamp(22px, 1.8vw, 26px); font-weight: 400; color: #fff; line-height: 1.15; margin: 0; letter-spacing: -0.3px; } .pep-vv-title em { font-style: italic; } .pep-vv-sub { font-family: 'Inter', sans-serif; font-size: 12px; color: rgba(191, 219, 254, 0.55); margin: 0; letter-spacing: 0.3px; } .pep-vv-body { display: flex; flex-direction: column; gap: 14px; align-items: flex-start; margin-top: 4px; } .pep-vv-qr-wrap { display: flex; flex-direction: row; align-items: center; gap: 12px; text-decoration: none; transition: transform 0.3s ease; } .pep-vv-qr-wrap:hover { transform: translateY(-2px); } .pep-vv-qr { width: 88px; height: 88px; border-radius: 10px; padding: 6px; background: #fff; box-shadow: 0 8px 22px rgba(0,0,0,0.35), 0 0 0 1px rgba(255,255,255,0.04); transition: box-shadow 0.3s ease; flex-shrink: 0; } .pep-vv-qr-wrap:hover .pep-vv-qr { box-shadow: 0 14px 36px rgba(134,239,172,0.22), 0 0 0 1px rgba(134,239,172,0.35); } .pep-vv-qr-note { font-family: 'Inter', sans-serif; font-size: 9px; letter-spacing: 1.2px; text-transform: uppercase; color: rgba(134, 239, 172, 0.75); text-align: left; max-width: 140px; line-height: 1.4; } .pep-vv-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 8px; width: 100%; } .pep-vv-list li { display: flex; align-items: flex-start; gap: 10px; font-family: 'Inter', sans-serif; font-size: 12px; line-height: 1.4; color: rgba(219, 234, 254, 0.82); } .pep-vv-list li strong { font-weight: 600; color: #fff; } .pep-vv-check { flex-shrink: 0; display: inline-flex; align-items: center; justify-content: center; width: 18px; height: 18px; border-radius: 50%; background: rgba(34, 197, 94, 0.12); border: 1px solid rgba(134, 239, 172, 0.35); color: #86efac; font-size: 10px; font-weight: 700; margin-top: 1px; } @media (max-width: 900px) { .pep-bento { grid-template-columns: repeat(2, 1fr); } .pep-bento > .pep-card-a, .pep-bento > .pep-card-b, .pep-bento > .pep-card-d, .pep-bento > .pep-card-e, .pep-bento > .pep-card-f { grid-column: span 1; min-height: 220px; } } @media (max-width: 600px) { .pep-bento { grid-template-columns: 1fr; } } /* ── Card D: Recovery & Repair — focus areas list ── */ .pep-card-d-focus { display: flex; flex-direction: column; gap: 14px; margin-top: 4px; } .pep-card-d-focus-eyebrow { font-family: 'Inter', sans-serif; font-size: 10px; font-weight: 600; letter-spacing: 2.5px; text-transform: uppercase; color: rgba(147, 197, 253, 0.55); } .pep-card-d-focus-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 10px; } .pep-card-d-focus-list li { position: relative; padding-left: 18px; font-family: 'Inter', sans-serif; font-size: 14px; line-height: 1.5; color: rgba(219, 234, 254, 0.85); font-weight: 400; } .pep-card-d-focus-list li::before { content: ""; position: absolute; left: 0; top: 9px; width: 6px; height: 6px; border-radius: 50%; background: rgba(96, 165, 250, 0.6); box-shadow: 0 0 8px rgba(96, 165, 250, 0.35); } /* ── Base card ── */ .pep-card { border-radius: 24px; padding: 22px 26px; position: relative; color: white; display: flex; flex-direction: column; transition: transform 0.18s ease, box-shadow 0.25s ease; transform-style: preserve-3d; will-change: transform; overflow: hidden; /* CSS vars for mouse spotlight */ --mx: 50%; --my: 50%; } /* Scan line sweep on hover */ .pep-card::before { content: ''; position: absolute; left: 0; right: 0; height: 40%; top: -40%; background: linear-gradient( to bottom, transparent 0%, rgba(96,165,250,0.05) 40%, rgba(96,165,250,0.10) 50%, rgba(96,165,250,0.05) 60%, transparent 100% ); pointer-events: none; z-index: 4; transition: none; } .pep-card:hover::before { animation: cardScan 0.9s ease forwards; } @keyframes cardScan { from { top: -40%; } to { top: 140%; } } /* Mouse spotlight */ .pep-card::after { content: ''; position: absolute; inset: 0; border-radius: inherit; background: radial-gradient(circle 180px at var(--mx) var(--my), rgba(96,165,250,0.11) 0%, transparent 70%); opacity: 0; transition: opacity 0.3s; pointer-events: none; z-index: 3; } .pep-card:hover::after { opacity: 1; } /* ───────────────────────────────────────── Card A — Pure iOS Glass — BPC-157 ───────────────────────────────────────── */ .pep-card-a { background: rgba(255,255,255,0.06); backdrop-filter: blur(20px) saturate(180%); -webkit-backdrop-filter: blur(20px) saturate(180%); border: 1px solid rgba(255,255,255,0.12); border-top-color: rgba(255,255,255,0.5); align-items: center; text-align: center; } .pep-card-a-name { font-family: var(--display); font-size: 42px; font-weight: 300; letter-spacing: -1px; color: #fff; margin-bottom: 28px; } .pep-card-a-ring-wrap { width: 200px; height: 200px; margin: 0 auto 28px; } .pep-ring-svg { width: 100%; height: 100%; } .pep-card-a-label { font-family: var(--body); font-size: 11px; letter-spacing: 2px; text-transform: uppercase; color: rgba(147,197,253,0.6); margin-bottom: 16px; } .pep-card-a-stats { font-family: var(--body); font-size: 13px; color: rgba(255,255,255,0.45); display: flex; align-items: center; gap: 8px; } .pep-card-a-divider { color: rgba(255,255,255,0.2); } /* ───────────────────────────────────────── Card B — Blue Tinted Glass — TB-500 ───────────────────────────────────────── */ .pep-card-b { background: rgba(59,130,246,0.1); backdrop-filter: blur(24px) saturate(200%); -webkit-backdrop-filter: blur(24px) saturate(200%); border: 1px solid rgba(96,165,250,0.3); border-top-color: rgba(147,197,253,0.55); } .pep-card-b-header { display: flex; align-items: center; gap: 12px; margin-bottom: 28px; } .pep-card-b-name { font-family: var(--display); font-size: 44px; font-weight: 300; letter-spacing: -0.5px; color: #fff; } .pep-card-b-pill { font-family: var(--body); font-size: 11px; font-weight: 600; letter-spacing: 1.5px; text-transform: uppercase; color: #93c5fd; background: rgba(96,165,250,0.15); border: 1px solid rgba(96,165,250,0.3); border-radius: 100px; padding: 4px 12px; } .pep-card-b-rows { display: flex; flex-direction: column; gap: 6px; flex: 1; } .pep-card-b-row { display: flex; justify-content: space-between; align-items: center; padding: 14px 0; border-bottom: 1px solid rgba(96,165,250,0.12); font-family: var(--body); font-size: 15px; transition: background 0.2s; } .pep-card-b-row:hover { background: rgba(96,165,250,0.06); border-radius: 8px; padding-left: 8px; padding-right: 8px; } .pep-card-b-lbl { color: rgba(147,197,253,0.55); font-weight: 400; } .pep-card-b-val { color: #fff; font-weight: 500; } .pep-card-b-cta { display: inline-block; margin-top: 24px; font-family: var(--body); font-size: 13px; font-weight: 500; color: #60a5fa; text-decoration: none; letter-spacing: 0.3px; transition: color 0.2s; } .pep-card-b-cta:hover { color: #93c5fd; } /* ───────────────────────────────────────── Card C — Neon Edge — GHK-Cu ───────────────────────────────────────── */ .pep-card-c { background: rgba(6,15,40,0.55); backdrop-filter: blur(16px); -webkit-backdrop-filter: blur(16px); border: 1px solid rgba(96,165,250,0.65); box-shadow: 0 0 30px rgba(59,130,246,0.12), inset 0 0 30px rgba(59,130,246,0.04); } .pep-card-c-top { display: flex; align-items: center; gap: 12px; margin-bottom: 28px; } .pep-card-c-name { font-family: var(--display); font-size: 44px; font-weight: 300; letter-spacing: -0.5px; color: #fff; } .pep-card-c-tag { font-family: var(--body); font-size: 11px; font-weight: 500; color: #60a5fa; border: 1px solid rgba(96,165,250,0.4); border-radius: 6px; padding: 3px 10px; letter-spacing: 0.5px; } .pep-card-c-specs { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; flex: 1; } .pep-card-c-spec { background: rgba(59,130,246,0.07); border: 1px solid rgba(96,165,250,0.18); border-radius: 14px; padding: 20px 22px; transition: background 0.2s, border-color 0.2s; } .pep-card-c:hover .pep-card-c-spec { background: rgba(59,130,246,0.12); border-color: rgba(96,165,250,0.32); } /* undo spurious dummy rule */ .pep-card-c-spec-dummy-UNUSED { display: flex; flex-direction: column; gap: 6px; } .pep-card-c-spec-lbl { font-family: var(--body); font-size: 10px; letter-spacing: 1.5px; text-transform: uppercase; color: rgba(96,165,250,0.6); } .pep-card-c-spec-val { font-family: var(--body); font-size: 18px; font-weight: 600; color: #fff; } .pep-card-c-footer { margin-top: 20px; } .pep-card-c-order { display: block; text-align: center; padding: 13px 24px; background: rgba(59,130,246,0.2); border: 1px solid rgba(96,165,250,0.5); border-radius: 12px; color: #93c5fd; font-family: var(--body); font-size: 13px; font-weight: 600; text-decoration: none; letter-spacing: 0.5px; box-shadow: 0 0 16px rgba(59,130,246,0.18); transition: background 0.2s, box-shadow 0.2s; } .pep-card-c-order:hover { background: rgba(59,130,246,0.32); box-shadow: 0 0 28px rgba(59,130,246,0.32); } /* ───────────────────────────────────────── Card D — Gradient Glass — CJC-1295 ───────────────────────────────────────── */ .pep-card-d { background: linear-gradient(145deg, rgba(59,130,246,0.14) 0%, rgba(99,102,241,0.07) 100%); backdrop-filter: blur(20px) saturate(160%); -webkit-backdrop-filter: blur(20px) saturate(160%); border: 1px solid rgba(255,255,255,0.1); border-top-color: rgba(255,255,255,0.32); } .pep-card-d-name { font-family: var(--display); font-size: 44px; font-weight: 300; letter-spacing: -0.5px; color: #fff; margin-bottom: 28px; } .pep-card-d-split { display: flex; gap: 0; flex: 1; align-items: flex-start; } .pep-card-d-col { flex: 1; display: flex; flex-direction: column; gap: 10px; } .pep-card-d-col:last-child { padding-left: 20px; } .pep-card-d-divider { width: 1px; background: rgba(255,255,255,0.12); align-self: stretch; margin: 0 4px; } .pep-card-d-period { font-family: var(--body); font-size: 10px; letter-spacing: 2px; text-transform: uppercase; color: rgba(147,197,253,0.5); margin-bottom: 4px; } .pep-card-d-period--after { color: #60a5fa; } .pep-card-d-item { font-family: var(--body); font-size: 16px; color: rgba(255,255,255,0.5); font-weight: 400; transition: color 0.2s; } .pep-card-d:hover .pep-card-d-item--after { color: #bfdbfe; } .pep-card-d-item--after { color: #93c5fd; font-weight: 500; } .pep-card-d-footnote { margin-top: 28px; font-family: var(--body); font-size: 11px; color: rgba(255,255,255,0.25); letter-spacing: 0.5px; } /* ───────────────────────────────────────── Card E — Whisper Glass — Sermorelin ───────────────────────────────────────── */ .pep-card-e { background: rgba(255,255,255,0.025); backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); border: 1px solid rgba(255,255,255,0.07); box-shadow: inset 0 1px 0 rgba(255,255,255,0.12); } .pep-card-e-name { font-family: var(--display); font-size: 44px; font-weight: 300; letter-spacing: -0.5px; color: #fff; margin-bottom: 32px; } .pep-card-e-timeline { display: flex; flex-direction: column; gap: 0; flex: 1; position: relative; } .pep-card-e-step { display: flex; align-items: flex-start; gap: 20px; position: relative; padding-bottom: 32px; transition: transform 0.2s; } .pep-card-e:hover .pep-card-e-step { transform: translateX(6px); } .pep-card-e:hover .pep-card-e-step:nth-child(1) { transition-delay: 0s; } .pep-card-e:hover .pep-card-e-step:nth-child(2) { transition-delay: 0.05s; } .pep-card-e:hover .pep-card-e-step:nth-child(3) { transition-delay: 0.10s; } .pep-card-e:hover .pep-card-e-step:nth-child(4) { transition-delay: 0.15s; } .pep-card-e-step--last { padding-bottom: 0; } .pep-card-e-step::before { content: ''; position: absolute; left: 6px; top: 14px; width: 1px; height: calc(100% - 6px); background: rgba(96,165,250,0.2); } .pep-card-e-step--last::before { display: none; } .pep-card-e-dot { width: 13px; height: 13px; border-radius: 50%; background: rgba(96,165,250,0.25); border: 1px solid rgba(96,165,250,0.4); flex-shrink: 0; margin-top: 2px; position: relative; z-index: 1; } .pep-card-e-dot--active { background: #60a5fa; border-color: #93c5fd; box-shadow: 0 0 10px rgba(96,165,250,0.5); } .pep-card-e-step-text { display: flex; flex-direction: column; gap: 3px; } .pep-card-e-week { font-family: var(--body); font-size: 11px; letter-spacing: 1.5px; text-transform: uppercase; color: rgba(96,165,250,0.65); font-weight: 500; } .pep-card-e-desc { font-family: var(--body); font-size: 15px; color: rgba(255,255,255,0.65); font-weight: 400; } /* ───────────────────────────────────────── Card F — Deep Mirror — Testimonial ───────────────────────────────────────── */ .pep-card-f { background: rgba(8,20,50,0.88); backdrop-filter: blur(30px) saturate(180%) brightness(1.08); -webkit-backdrop-filter: blur(30px) saturate(180%) brightness(1.08); border: 1px solid rgba(255,255,255,0.08); border-top-color: rgba(255,255,255,0.28); box-shadow: 0 24px 60px rgba(0,0,0,0.5); justify-content: space-between; } .pep-card-f-stars { font-size: 18px; color: #60a5fa; letter-spacing: 2px; margin-bottom: 20px; } .pep-card-f-quote { font-family: var(--display); font-size: 28px; font-weight: 300; font-style: italic; line-height: 1.45; color: rgba(255,255,255,0.88); margin: 0 0 20px; flex: 1; } .pep-card-f-cite { display: block; font-family: var(--body); font-size: 12px; color: rgba(147,197,253,0.55); font-style: normal; letter-spacing: 0.3px; margin-bottom: 28px; } .pep-card-f-stats { display: flex; align-items: center; gap: 24px; padding-top: 20px; border-top: 1px solid rgba(255,255,255,0.08); } .pep-card-f-stat { display: flex; flex-direction: column; gap: 4px; } .pep-card-f-stat-val { font-family: var(--display); font-size: 34px; font-weight: 300; color: #fff; letter-spacing: -0.5px; } .pep-card-f-stat-lbl { font-family: var(--body); font-size: 10px; letter-spacing: 1.5px; text-transform: uppercase; color: rgba(147,197,253,0.45); } .pep-card-f-stat-divider { width: 1px; height: 36px; background: rgba(255,255,255,0.1); } /* ── Card C neon edge hover glow intensify ── */ .pep-card-c:hover { box-shadow: 0 0 50px rgba(59,130,246,0.28), inset 0 0 40px rgba(59,130,246,0.07); border-color: rgba(96,165,250,0.9); } /* ── Responsive: product row + bento ── */ @media (max-width: 1100px) { .pep-product-row { grid-template-columns: 1fr 1fr; gap: 20px; } .pep-bento { grid-template-columns: 1fr 1fr; gap: 16px; } .pep-showcase-wrap { padding: 80px 24px 0; } .pep-catalog-intro { margin: -80px -24px 0; padding: 80px 24px 48px; } } @media (max-width: 640px) { .pep-product-row { grid-template-columns: 1fr; } .pep-bento { grid-template-columns: 1fr; gap: 14px; } .pep-card { padding: 28px 24px; } .pep-showcase-wrap { padding: 16px 20px 0; } .pep-catalog-intro { margin: -16px -20px 0; padding: 16px 20px 32px; box-shadow: none; } .pep-prod-card { box-shadow: none; } .pep-prod-card:hover { box-shadow: none; transform: none; } } /* ── Responsive overrides for wl-section ── */ @media (max-width: 1024px) { .wl-pin-inner { grid-template-columns: 1fr; gap: 60px; min-height: auto; padding: 80px 32px; } .wl-reveal-right { display: flex; } .wl-steps-row { grid-template-columns: 1fr; gap: 32px; } .wl-step-divider { display: none; } .wl-qualify-content { grid-template-columns: 1fr; gap: 40px; } .wl-results-content { grid-template-columns: 1fr; gap: 32px; } .wl-carousel-header, .wl-carousel-track, .wl-carousel-progress, .wl-tabs-container { padding-left: 32px; padding-right: 32px; } } @media (max-width: 768px) { .wl-bmi-section { padding: 50px 12px 80px; } .wl-bmi-header { margin-bottom: 36px; } .wl-bmi-layout { grid-template-columns: 1fr; gap: 40px; } .bmi-card { padding: 28px 20px; border-radius: 22px; } .bmi-card::before { border-radius: 22px 22px 0 0; } .bmi-card::after { border-radius: 22px; } .bmi-card-reflection { border-radius: 22px; } .bmi-number { font-size: 80px; letter-spacing: -4px; padding: 6px 0 10px; } .bmi-cat-pill { width: 180px; } .wl-pin-inner { padding: 60px 24px; } .wl-glow-stage { width: 300px; height: 300px; } .wl-product-img-wrap { width: 200px; height: 200px; } .wl-tabs-nav { overflow-x: auto; -webkit-overflow-scrolling: touch; } .wl-tab { padding: 12px 20px; font-size: 13px; white-space: nowrap; } .wl-carousel-header, .wl-carousel-track, .wl-carousel-progress, .wl-tabs-container { padding-left: 24px; padding-right: 24px; } .wl-qualify-cta-card { min-width: auto; width: 100%; } .wl-stats-row { gap: 24px; } .wl-stat-val { font-size: 32px; } } /* ── States ── */ .states-section{padding:80px 0;background:var(--green-pale);text-align:center} .states-h2{font-family:var(--display);font-size:clamp(32px,4vw,52px);font-weight:300;color:var(--ink);margin-bottom:10px} .states-h2 em{font-style:italic;color:var(--green-mid)} .states-sub{font-size:14px;color:var(--ink2);margin-bottom:40px;font-weight:300} .states-map{height:220px;background:var(--white);border:1.5px solid var(--border-light);border-radius:20px;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:10px;color:var(--ink3);font-size:12px;letter-spacing:1px;text-transform:uppercase;margin-bottom:28px} .states-badges{display:flex;flex-wrap:wrap;justify-content:center;gap:8px} .state-badge{padding:6px 16px;background:var(--white);border:1.5px solid var(--border-light);border-radius:var(--radius);font-size:11px;color:var(--ink2);font-weight:500} /* ── CTA (dark green) ── */ .cta-section{background:var(--green);padding:140px 0;text-align:center;position:relative;overflow:hidden} .cta-section::before{content:'';position:absolute;inset:0;background:radial-gradient(ellipse at center,rgba(82,183,136,0.15) 0%,transparent 60%);pointer-events:none} .cta-h2{font-family:var(--display);font-size:clamp(52px,8vw,100px);font-weight:300;color:#fff;line-height:0.95;margin-bottom:24px;position:relative} .cta-h2 em{font-style:italic;color:var(--green-bright)} .cta-sub{font-size:14px;color:rgba(255,255,255,0.5);margin-bottom:48px;letter-spacing:0.5px;position:relative} .cta-legal{font-size:11px;color:rgba(255,255,255,0.25);margin-top:24px;position:relative} /* ── Footer ── */ footer{background:var(--dark);padding:64px 0 36px;border-top:1px solid rgba(255,255,255,0.05)} .footer-grid{display:grid;grid-template-columns:2fr 1fr 1fr 1fr;gap:48px;margin-bottom:56px} .footer-logo-img{height:40px;width:auto;margin-bottom:16px;display:block;filter:invert(1) brightness(0.7)} .footer-tagline{font-size:13px;color:var(--text3);font-weight:300;line-height:1.8;max-width:240px;margin-bottom:20px} .footer-disclaimer{font-size:10px;color:var(--text3);line-height:1.7;max-width:280px;opacity:0.6} .footer-col-title{font-size:9px;letter-spacing:2.5px;text-transform:uppercase;color:var(--text3);margin-bottom:18px;opacity:0.6} .footer-links{list-style:none;display:flex;flex-direction:column;gap:10px} .footer-links a{font-size:13px;color:var(--text2);font-weight:300;transition:color 0.2s} .footer-links a:hover{color:var(--green-bright)} .footer-bottom{display:flex;align-items:center;justify-content:space-between;padding-top:28px;border-top:1px solid rgba(255,255,255,0.05);font-size:11px;color:var(--text3);flex-wrap:wrap;gap:10px} /* ── Mobile menu (refined dark drawer — matches forbiddenwell.com feel) ── */ .mobile-menu{display:none;position:fixed;top:0;left:0;right:0;z-index:1200;max-height:100dvh;background:linear-gradient(165deg,rgba(18,41,27,.75) 0%,rgba(7,15,9,.75) 52%,rgba(10,26,44,.75) 100%);-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);flex-direction:column;align-items:stretch;justify-content:flex-start;gap:0;padding:0;overflow-y:auto;-webkit-overflow-scrolling:touch} .mobile-menu.open{display:flex} .mm-header{display:flex;align-items:center;justify-content:space-between;padding:20px 24px 14px} .mm-logo{height:24px;width:auto;opacity:.95} .mm-links{display:block} .mobile-menu a{display:block;font-family:var(--display);font-size:16px;font-weight:400;letter-spacing:2px;text-transform:uppercase;text-align:left;color:#ededed;padding:16px 26px;border-bottom:1px solid rgba(255,255,255,.06);transition:color .2s,background .2s} .mm-links a:first-child{border-top:1px solid rgba(255,255,255,.06)} .mobile-menu a:hover,.mobile-menu a:active{color:#52B788;background:rgba(82,183,136,.06)} .mobile-close{font-size:22px;line-height:1;color:#ededed;cursor:pointer} /* ── Responsive ── */ @media(max-width:1024px){ .hero{grid-template-columns:minmax(0,1fr);min-height:auto;padding:120px 0 60px} /* NO-CLIP RULE: once the hero stacks to one column it is tall + content-driven, so drop the dark section's blend-overlap here (not only at 768px) — otherwise the -80px overlap covers the bottom of the stacked hero on tablet widths. */ .wl-section{margin-top:0} .hero-left{padding:0;text-align:center;align-items:center;display:flex;flex-direction:column} .hero-right{padding:40px 0 0} .split{grid-template-columns:1fr} .split.reverse{direction:ltr} .svc-grid{grid-template-columns:repeat(2,1fr)} .products-grid{grid-template-columns:repeat(2,1fr)} .stats-grid{grid-template-columns:repeat(2,1fr)} .qualiphy-inner{grid-template-columns:1fr} .footer-grid{grid-template-columns:1fr 1fr;gap:32px} .steps-grid{grid-template-columns:1fr} .feature-content{padding:0 40px} } @media(max-width:768px){ .container{padding:0 24px} /* iOS Safari: position:fixed + backdrop-filter vanishes during momentum scroll. Drop the blur, use an opaque bg, and force the nav onto its own GPU layer so it keeps painting and stays pinned to the top while scrolling. */ nav{ padding:0 16px;height:70px; position:fixed;top:0;left:0;right:0; -webkit-backdrop-filter:none;backdrop-filter:none; -webkit-transform:translateZ(0);transform:translateZ(0); will-change:transform; } nav.dark{background:#0a140c} nav.blue{background:#0a1628} nav.red{background:#140808} nav.gold{background:#1a1202} nav.lavender{background:#140e22} nav.beige{background:#1a140c} .nav-links,.nav-login{display:none} .nav-mobile-btn{display:flex;order:-1;gap:7px;align-items:flex-start} .nav-mobile-btn span{width:22px;height:1.5px;flex:0 0 auto;border-radius:1px} .nav-mobile-btn span:nth-child(2){width:30px} .nav-mobile-btn span:nth-child(3){display:none} nav.dark .nav-mobile-btn span{background:#44705b} .nav-logo{order:1;margin-left:12px} .nav-logo img{height:32px} .svc-grid{grid-template-columns:1fr} .products-grid{grid-template-columns:1fr} .stats-grid{grid-template-columns:1fr 1fr} .footer-grid{grid-template-columns:1fr;gap:28px} .hero{padding:84px 0 32px;overflow:hidden} /* Mobile: keep the Login pill in the top bar, just to the left of the logo */ .nav-cta{display:inline-flex;align-items:center;padding:8px 17px;font-size:12.5px;border-radius:100px} .nav-right{order:0;margin-left:auto;gap:0} .hero-left{padding:24px 20px 0 !important;align-items:flex-start;text-align:left;width:100%;max-width:100%;box-sizing:border-box;position:relative;z-index:2} .hero-right{padding:20px 20px 0 !important;position:relative;z-index:1;box-sizing:border-box} .hero-left,.hero-right{min-width:0} .hero-badge{display:inline-flex;width:auto;max-width:100%;box-sizing:border-box;justify-content:center;align-self:center;white-space:normal;text-align:center;line-height:1.4;padding:8px 16px;font-size:11px;font-weight:600;letter-spacing:0.6px;margin-bottom:20px;overflow:visible} .hero-h1{font-size:40px;line-height:1.05;letter-spacing:-0.5px;text-align:left;margin:0} .hero-big-num{font-size:130px;line-height:0.9;letter-spacing:-4px;margin:10px 0 40px;display:block} .hero-big-num sup{font-size:36%;vertical-align:top;position:relative;top:0.18em;left:8px;letter-spacing:0.5px;line-height:1} .hero-avg{font-size:14px;text-align:left;margin:0;align-self:stretch} .hero-sub{display:block;font-size:14px;line-height:1.55;text-align:left;max-width:none;margin:14px 0 0} .hero-text-link{display:inline-block;font-size:13px} .hero-ctas{flex-direction:row;width:100%;align-items:center;justify-content:flex-start;margin-top:28px;margin-bottom:0;gap:18px;flex-wrap:wrap} .hero-ctas .btn-green-bright{flex:0 0 auto;width:auto;max-width:none;justify-content:center;padding:16px 28px;font-size:15px;font-weight:500;letter-spacing:0.3px;border-radius:100px} .btn-green,.btn-white,.btn-outline-dark{width:100%;justify-content:center} .hero-trust{display:flex;flex-wrap:nowrap;align-items:center;justify-content:center;gap:6px;width:100%;max-width:100%;padding:0;margin-top:50px;margin-bottom:0;box-sizing:border-box;overflow:visible} .hero-trust-break{display:none} .hero-trust-hide-mobile{display:none} .hero-trust-chip{font-size:8px;padding:9px 9px;letter-spacing:0px;gap:5px;justify-content:center;flex:0 0 auto;white-space:nowrap;font-weight:600} .hero-trust-chip::before{width:4px;height:4px} .hero-trust-chip::before{width:4px;height:4px} /* ── Hero cards: featured / featured / 2x2 / 2x2 / 2x2 on mobile only ── */ .hero-cards-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:8px} .hero-pcard:nth-child(-n+2){grid-column:span 2;height:auto;min-height:0;flex-direction:column;gap:10px;padding:18px 18px 16px;text-align:center} .hero-pcard:nth-child(-n+2) .hero-pcard-img{width:100%;height:140px} .hero-pcard:nth-child(-n+2) .hero-pcard-info{text-align:center;margin-top:auto} .hero-pcard:nth-child(-n+2) .hero-pcard-name{font-size:26px;margin-bottom:6px} .hero-pcard:nth-child(-n+2) .hero-pcard-sub{display:block;font-size:11px;color:rgba(26,61,43,0.55);letter-spacing:0.3px;margin-bottom:8px;font-weight:400} .hero-pcard:nth-child(n+3){grid-column:auto;height:148px;padding:12px 10px 10px} .hero-pcard:nth-child(n+3) .hero-pcard-img{height:78px} .hero-pcard:nth-child(n+3) .hero-pcard-name{font-size:15px} /* Urgent Care: full-width skinny banner across the screen, shorter than cards above */ .hero-pcard:nth-child(n+7){grid-column:1 / -1;height:72px;flex-direction:row;gap:14px;padding:0 18px;justify-content:space-between;align-items:center} .hero-pcard:nth-child(n+7) .hero-pcard-img{width:48px;height:48px;flex-shrink:0} .hero-pcard:nth-child(n+7) .hero-pcard-info{text-align:right;margin-top:0;width:auto} .hero-pcard:nth-child(n+7) .hero-pcard-name{font-size:18px} .hero-pcard-placeholder{opacity:0.6} .wl-section{margin-top:0;overflow:visible} .wl-progress-track{left:20px !important;top:150px !important;bottom:96px !important;height:auto !important} /* clear FDA chip on top + licensed-provider chip on bottom with matching gaps */ .wl-pin-wrap{ align-items:flex-start; min-height:calc(100svh - 60px); overflow:visible; } .wl-pin-inner{ padding:128px 24px 110px 32px !important; min-height:calc(100svh - 60px); display:grid; grid-template-columns:1fr; grid-template-rows:auto auto auto auto; align-content:space-between; row-gap:18px; } .wl-reveal-left{display:contents} .wl-step-num{display:none} .wl-reveal-headline{ grid-row:1; margin-top:10px; margin-bottom:0; font-size:clamp(32px,8.2vw,44px); align-self:start; } .wl-stats-row{ grid-row:3; margin-top:0; margin-bottom:0; gap:18px; align-self:end; padding-top:8px; justify-content:center; } .wl-stat{text-align:center} .wl-stat-val{font-size:30px} .wl-stat-label{font-size:10px;max-width:80px;margin-left:auto;margin-right:auto} /* hide the large "01" background watermark on mobile only */ .wl-bg-num{display:none} .wl-cta-btn{ grid-row:4; width:100%; justify-content:center; padding:14px 20px; font-size:16px; font-weight:600; letter-spacing:0.3px; align-self:end; } /* Mobile chip sizing only — let GSAP scrub control opacity/transform during the pinned reveal */ .wl-chip{ padding:8px 12px; border-radius:14px; -webkit-backdrop-filter:none; backdrop-filter:none; background:rgba(255,255,255,0.14); } .wl-chip-val{font-size:17px} .wl-chip-label{font-size:7.5px;letter-spacing:1px} .wl-chip-1{top:74px;left:16px} .wl-chip-2{top:74px;right:16px;left:auto} .wl-chip-5{top:200px;right:16px;left:auto;padding:8px 12px} .wl-chip-5 .wl-chip-val{font-size:17px} .wl-chip-5 .wl-chip-label{font-size:7.5px} .wl-chip-3{bottom:28px;left:16px;display:flex;opacity:1} /* 17s TO A LICENSED PROVIDER — visible on load, not scroll-revealed */ .wl-chip-4{bottom:28px;right:16px;left:auto;display:flex;opacity:1} /* 50 STATES COVERED — visible on load, not scroll-revealed */ .wl-reveal-right{ grid-row:2; position:relative; top:auto; left:auto; transform:none; width:auto; pointer-events:none; z-index:1; justify-self:center; align-self:center; margin-top:24px; } .wl-reveal-right .wl-glow-stage{width:220px;height:220px} .wl-reveal-right .wl-product-img-wrap{width:158px;height:158px} .wl-reveal-right .wl-orbit-badge{font-size:10px;padding:6px 12px} .split-content,.split-content.dark{padding:48px 24px} .white-section,.gray-section{padding:72px 0} .qualiphy-inner{gap:40px} .feature-content{padding:0 24px} /* Mobile: scale hero blobs down so they don't crowd the type. First blob sits low/center behind the CTA area, not behind the headline. */ .hero::before{ inset:-12%; background: radial-gradient(ellipse 420px 360px at 35% 58%, rgba(26,61,43,0.48), transparent 62%), radial-gradient(ellipse 360px 320px at 92% 78%, rgba(26,61,43,0.40), transparent 60%), radial-gradient(ellipse 320px 300px at 50% 96%, rgba(45,106,79,0.32), transparent 65%); filter:blur(3px); } #hero-constellation{ opacity:0.99; } } /* ── peptides.html styles ── */ *,*::before,*::after{box-sizing:border-box;margin:0;padding:0} :root{ --dark:#060e08;--dark2:#0b1a0e; --green:#1B4332;--green-mid:#2D6A4F;--green-bright:#52B788;--green-pale:#e8f5ee; --white:#ffffff;--off-white:#f7f9f7;--light-gray:#f0f4f1;--border-light:#e5ede8; --ink:#111a14;--ink2:#4a6355;--ink3:#8aaa96; --display:'Cormorant Garamond',serif;--body:'Inter',sans-serif;--radius:100px; } html{scroll-behavior:auto;overscroll-behavior:none} body{background:var(--white);color:var(--ink);font-family:var(--body);font-size:15px;line-height:1.6;overscroll-behavior:none} a{color:inherit;text-decoration:none} .container{max-width:1280px;margin:0 auto;padding:0 48px} /* ── Nav ── */ nav{position:fixed;top:0;left:0;right:0;z-index:100;height:68px;padding:0 48px;display:flex;align-items:center;justify-content:space-between;background:rgba(255,255,255,0.95);backdrop-filter:blur(20px);border-bottom:1px solid var(--border-light)} .nav-logo img{height:36px;width:auto;filter:brightness(0) saturate(100%) invert(43%) sepia(16%) saturate(700%) hue-rotate(100deg) brightness(90%)} .nav-links{display:flex;gap:28px} .nav-links a{font-size:12px;letter-spacing:1px;text-transform:uppercase;color:var(--ink2);transition:color 0.2s} .nav-links a:hover{color:var(--ink)} .nav-cta{padding:10px 22px;background:var(--green);color:#fff;font-size:12px;font-weight:500;border-radius:var(--radius);transition:all 0.2s} .nav-cta:hover{background:var(--green-mid)} .nav-back{display:flex;align-items:center;gap:6px;font-size:12px;color:var(--ink2);letter-spacing:0.5px;transition:color 0.2s} .nav-back:hover{color:var(--ink)} /* ── Hero ── */ .page-hero{background:var(--dark);padding:140px 0 80px;position:relative;overflow:hidden} .page-hero::before{content:'';position:absolute;inset:0;background:radial-gradient(ellipse at 70% 50%,rgba(27,67,50,0.5) 0%,transparent 60%);pointer-events:none} .hero-inner{position:relative;z-index:2;display:grid;grid-template-columns:1fr 1fr;gap:80px;align-items:center} .hero-eyebrow{font-size:10px;letter-spacing:4px;text-transform:uppercase;color:var(--green-bright);margin-bottom:16px;display:block} .hero-title{font-family:var(--display);font-size:clamp(52px,7vw,90px);font-weight:300;color:#fff;line-height:0.95;letter-spacing:-2px;margin-bottom:20px} .hero-title em{font-style:italic;color:var(--green-bright)} .hero-body{font-size:15px;color:rgba(255,255,255,0.45);line-height:1.9;font-weight:300;margin-bottom:36px;max-width:460px} .hero-chips{display:flex;flex-wrap:wrap;gap:8px} .hero-chip{padding:7px 16px;border:1px solid rgba(255,255,255,0.1);border-radius:var(--radius);font-size:11px;color:rgba(255,255,255,0.4);letter-spacing:0.5px} .hero-vials{display:flex;align-items:center;justify-content:center;gap:-20px;position:relative} .hero-vial-img{width:140px;height:auto;filter:drop-shadow(0 20px 40px rgba(0,0,0,0.5));transition:transform 0.3s} .hero-vial-img:nth-child(1){transform:rotate(-8deg) translateX(20px);z-index:1} .hero-vial-img:nth-child(2){transform:scale(1.1);z-index:3} .hero-vial-img:nth-child(3){transform:rotate(8deg) translateX(-20px);z-index:2} .hero-vial-img:hover{transform:scale(1.15) translateY(-8px)!important;z-index:10} /* ── Filters ── */ .filters-bar{background:var(--white);border-bottom:1px solid var(--border-light);padding:20px 0;position:sticky;top:68px;z-index:50} .filters-inner{display:flex;align-items:center;gap:10px;flex-wrap:wrap} .filter-btn{padding:8px 20px;border:1.5px solid var(--border-light);border-radius:var(--radius);font-size:12px;font-weight:500;color:var(--ink2);background:var(--white);cursor:pointer;transition:all 0.2s;letter-spacing:0.3px} .filter-btn:hover{border-color:var(--green-bright);color:var(--green-mid)} .filter-btn.active{background:var(--green);border-color:var(--green);color:#fff} .filter-count{font-size:11px;color:var(--ink3);margin-left:auto} /* ── Grid ── */ .catalog-section{padding:64px 0 120px} .catalog-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:20px} .vial-card{background:var(--white);border:1.5px solid var(--border-light);border-radius:20px;overflow:hidden;cursor:pointer;transition:all 0.3s;display:flex;flex-direction:column} .vial-card:hover{border-color:var(--green-bright);box-shadow:0 16px 48px rgba(27,67,50,0.1);transform:translateY(-4px)} .vial-img-wrap{background:var(--off-white);padding:32px 24px;display:flex;align-items:center;justify-content:center;height:240px;position:relative;overflow:hidden} .vial-img-wrap img{height:180px;width:auto;object-fit:contain;transition:transform 0.4s ease;display:block} .vial-card:hover .vial-img-wrap img{transform:scale(1.08) translateY(-6px)} .vial-body{padding:22px;flex:1;display:flex;flex-direction:column} .vial-cat{font-size:10px;letter-spacing:2px;text-transform:uppercase;color:var(--green-mid);margin-bottom:8px;font-weight:500} .vial-name{font-family:var(--display);font-size:20px;font-weight:400;color:var(--ink);margin-bottom:6px;line-height:1.2} .vial-desc{font-size:12px;color:var(--ink2);line-height:1.7;font-weight:300;flex:1;margin-bottom:16px} .vial-footer{display:flex;align-items:center;justify-content:space-between;padding-top:14px;border-top:1px solid var(--border-light)} .vial-price{font-family:var(--display);font-size:22px;font-weight:300;color:var(--ink)} .vial-cta{padding:8px 18px;background:var(--green);color:#fff;font-size:11px;font-weight:500;border-radius:var(--radius);transition:all 0.2s;white-space:nowrap} .vial-card:hover .vial-cta{background:var(--green-mid)} .vial-badge{position:absolute;top:12px;left:12px;padding:3px 10px;background:var(--green-pale);color:var(--green-mid);border-radius:var(--radius);font-size:9px;font-weight:600;letter-spacing:1px;text-transform:uppercase} /* ── Featured vial (dark hero strip) ── */ .featured-strip{background:var(--green);padding:80px 0;margin:0 0 0} .featured-inner{display:grid;grid-template-columns:1fr 1fr;gap:80px;align-items:center} .featured-vial-img{width:280px;height:auto;filter:drop-shadow(0 30px 60px rgba(0,0,0,0.4));margin:0 auto;display:block} .featured-eyebrow{font-size:10px;letter-spacing:4px;text-transform:uppercase;color:var(--green-bright);margin-bottom:16px;display:block} .featured-title{font-family:var(--display);font-size:clamp(40px,5vw,64px);font-weight:300;color:#fff;line-height:1.05;margin-bottom:16px} .featured-title em{font-style:italic;color:var(--green-bright)} .featured-body{font-size:14px;color:rgba(255,255,255,0.5);line-height:1.9;font-weight:300;margin-bottom:32px;max-width:420px} .featured-stats{display:flex;gap:32px;margin-bottom:36px;padding:24px 0;border-top:1px solid rgba(255,255,255,0.1);border-bottom:1px solid rgba(255,255,255,0.1)} .f-stat-val{font-family:var(--display);font-size:36px;font-weight:300;color:#fff;line-height:1;margin-bottom:4px} .f-stat-label{font-size:10px;letter-spacing:1.5px;text-transform:uppercase;color:rgba(255,255,255,0.3)} .btn-white-solid{display:inline-flex;align-items:center;gap:8px;padding:14px 30px;background:#fff;color:var(--ink);font-size:13px;font-weight:500;border-radius:var(--radius);transition:all 0.25s} .btn-white-solid:hover{transform:translateY(-2px);box-shadow:0 8px 24px rgba(0,0,0,0.2)} /* ── Info bar ── */ .info-bar{background:var(--dark2);padding:56px 0} .info-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:1px;background:rgba(255,255,255,0.05)} .info-item{background:var(--dark2);padding:36px 32px;text-align:center} .info-icon{font-size:28px;margin-bottom:12px} .info-title{font-family:var(--display);font-size:18px;font-weight:400;color:#fff;margin-bottom:6px} .info-body{font-size:12px;color:rgba(255,255,255,0.35);line-height:1.7;font-weight:300} /* ── Animations ── */ @keyframes fadeUp{from{opacity:0;transform:translateY(20px)}to{opacity:1;transform:translateY(0)}} .anim-up{opacity:0;transform:translateY(20px);transition:opacity 0.7s ease,transform 0.7s ease} .anim-up.visible{opacity:1;transform:translateY(0)} .d1{transition-delay:.1s}.d2{transition-delay:.2s}.d3{transition-delay:.3s}.d4{transition-delay:.4s} /* ── Responsive ── */ @media(max-width:1024px){.catalog-grid{grid-template-columns:repeat(3,1fr)}.hero-inner{grid-template-columns:1fr}.featured-inner{grid-template-columns:1fr;text-align:center}.featured-vial-img{margin-bottom:40px}.info-grid{grid-template-columns:repeat(2,1fr)}} @media(max-width:768px){.container{padding:0 24px}.catalog-grid{grid-template-columns:repeat(2,1fr)}.nav-links{display:none}.hero-vials{gap:8px}.hero-vial-img{width:100px}} @media(max-width:500px){.catalog-grid{grid-template-columns:1fr}} /* ══════════════════════════════════════════ Sexual Health Section ══════════════════════════════════════════ */ .sex-section { position: relative; min-height: 780px; display: grid; grid-template-columns: 50vw 1fr; align-items: stretch; background-color: #1a0505; background-image: repeating-linear-gradient(-55deg, transparent 0px, transparent 3px, rgba(255,255,255,0.012) 3px, rgba(255,255,255,0.012) 4px), repeating-linear-gradient(-55deg, transparent 0px, transparent 12px, rgba(220,38,38,0.022) 12px, rgba(220,38,38,0.022) 13px), linear-gradient(155deg, #240808 0%, #1a0505 50%, #110303 100%); } /* ── Right column: hero copy stacked with formulary cards ── */ .sex-left { display: flex; flex-direction: column; gap: 64px; padding: 100px max(48px, calc((100vw - 1200px) / 2)) 120px 64px; min-width: 0; } .sex-hero-block { display: flex; flex-direction: column; gap: 0; } .sex-eyebrow { font-size: 11px; letter-spacing: 3px; text-transform: uppercase; color: rgba(248,113,113,0.65); margin-bottom: 20px; } .sex-heading { font-family: var(--display); font-size: clamp(52px, 6vw, 80px); font-weight: 300; line-height: 1.05; color: #fff; margin-bottom: 24px; } .sex-heading em { font-style: italic; color: #f87171; } .sex-sub { font-size: 14px; color: rgba(255,200,190,0.5); line-height: 1.8; margin-bottom: 32px; } .sex-tags { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 40px; } .sex-tag { font-size: 9.5px; letter-spacing: 1px; text-transform: uppercase; color: rgba(248,113,113,0.7); background: rgba(220,38,38,0.1); border: 1px solid rgba(220,38,38,0.2); border-radius: 100px; padding: 5px 11px; } /* ── Trust chip row (below CTA) ── */ .sex-trust { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 24px; } .sex-trust-chip { display: inline-flex; align-items: center; gap: 7px; padding: 6px 12px; font-size: 9.5px; letter-spacing: 0.3px; color: rgba(255,200,190,0.7); background: rgba(255,255,255,0.02); border: 1px solid rgba(248,113,113,0.15); border-radius: 100px; } .sex-trust-chip::before { content: ''; width: 6px; height: 6px; border-radius: 50%; background: #f87171; box-shadow: 0 0 8px rgba(248,113,113,0.6); flex-shrink: 0; } @keyframes sexFloat { 0%, 100% { transform: translateY(0) rotate(-2deg); } 50% { transform: translateY(-18px) rotate(2deg); } } /* ══════════════════════════════════════════ Sexual Health — photo = full-height left 50vw, content + formulary stacked in right column ══════════════════════════════════════════ */ .sex-v4-stage { position: sticky; top: 0; align-self: start; width: 100%; height: 100vh; min-height: 780px; max-height: 100vh; overflow: hidden; } .sex-photo { position: absolute; inset: 0; overflow: hidden; background: transparent; border: none; box-shadow: none; cursor: default; } .sex-photo-inner { position: absolute; inset: 0; z-index: 1; } .sex-photo-img { display: block; width: 100%; height: 100%; object-fit: contain; object-position: center top; max-width: none; max-height: none; } .sex-photo::after { content: ''; position: absolute; inset: 0; background: linear-gradient(to right, transparent 60%, rgba(26,5,5,0.55) 90%, rgba(26,5,5,0.85) 100%); pointer-events: none; z-index: 2; } @media (max-width: 900px) { .sex-section { grid-template-columns: 1fr; min-height: 0; } .sex-section > .sex-left { padding: 60px 24px 72px; gap: 36px; } .sex-tags { margin-bottom: 16px; } .sex-trust { margin-top: 4px; } .sex-aud { margin-top: 0; } .sex-v4-stage { position: relative; top: auto; width: 100%; height: auto; min-height: 0; max-height: none; aspect-ratio: 4 / 5; } .sex-photo-inner { position: absolute; inset: 0; height: 100%; max-height: none; } } /* ══════════════════════════════════════════ Hormone Therapy Section ══════════════════════════════════════════ */ .ht-section { position: relative; min-height: 900px; display: flex; align-items: center; overflow: hidden; } /* Full-bleed background photo */ .ht-bg { position: absolute; inset: 0; z-index: 0; } .ht-bg-img { width: 100%; height: 100%; object-fit: cover; object-position: center 30%; } /* Gradient overlay: dark on left for text legibility, fades to transparent right */ .ht-overlay { position: absolute; inset: 0; background: linear-gradient(to right, rgba(4,12,6,0.92) 0%, rgba(4,12,6,0.75) 45%, rgba(4,12,6,0.2) 75%, rgba(4,12,6,0.05) 100%), linear-gradient(to top, rgba(4,12,6,0.6) 0%, transparent 40%); } .ht-inner { position: relative; z-index: 1; max-width: 1200px; margin: 0 auto; padding: 120px 48px; width: 100%; } .ht-content { max-width: 560px; display: flex; flex-direction: column; gap: 0; } .ht-eyebrow { font-size: 11px; letter-spacing: 3px; text-transform: uppercase; color: var(--green-bright); opacity: 0.8; margin-bottom: 20px; } .ht-heading { font-family: var(--display); font-size: clamp(52px, 6vw, 80px); font-weight: 300; line-height: 1.05; color: #fff; margin-bottom: 24px; } .ht-heading em { font-style: italic; color: var(--green-bright); } .ht-sub { font-size: 14px; color: rgba(220,240,228,0.6); line-height: 1.8; margin-bottom: 32px; max-width: 440px; } .ht-tags { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 48px; } .ht-tag { font-size: 11px; letter-spacing: 1.5px; text-transform: uppercase; color: var(--green-bright); background: rgba(82,183,136,0.1); border: 1px solid rgba(82,183,136,0.25); border-radius: 100px; padding: 6px 14px; } .ht-stats { display: flex; gap: 48px; margin-bottom: 48px; } .ht-stat { display: flex; flex-direction: column; gap: 6px; } .ht-stat-n { font-family: var(--display); font-size: 40px; font-weight: 300; color: #fff; line-height: 1; } .ht-stat-l { font-size: 11px; color: rgba(220,240,228,0.45); text-transform: uppercase; letter-spacing: 1px; } .ht-cta { display: inline-flex; align-items: center; gap: 8px; padding: 16px 32px; background: var(--green-bright); border-radius: 100px; color: #060e08; font-size: 14px; font-weight: 600; letter-spacing: 0.3px; width: fit-content; transition: background 0.3s ease, transform 0.2s ease; } .ht-cta:hover { background: #6fcfa0; transform: translateY(-2px); } /* ══════════════════════════════════════════ Peptide Catalogue — 503A trust additions ══════════════════════════════════════════ */ /* Trust badge row under hero subhead */ .pep-trust-badges { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 18px; } .pep-trust-badge { display: inline-flex; align-items: center; gap: 7px; font-family: var(--body, Inter), sans-serif; font-size: 11px; font-weight: 500; letter-spacing: 0.02em; color: #1e3a8a; background: rgba(255,255,255,0.45); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); border: 1px solid rgba(42,75,212,0.25); border-radius: 100px; padding: 6px 12px 6px 10px; white-space: nowrap; } .pep-trust-dot { width: 6px; height: 6px; border-radius: 50%; background: #2a4bd4; box-shadow: 0 0 6px rgba(42,75,212,0.55); flex-shrink: 0; } /* Product card badge dot */ .pep-prod-badge { display: inline-flex; align-items: center; gap: 6px; } .pep-prod-badge-dot { width: 6px; height: 6px; border-radius: 50%; background: #2a4bd4; box-shadow: 0 0 5px rgba(42,75,212,0.5); flex-shrink: 0; } /* 503A pharmacy footer strip (inside pep-catalog-intro) */ .pep-503a-strip { max-width: 1080px; margin: 32px auto 16px; padding: 16px 28px; background: rgba(42,75,212,0.05); border: 1px solid rgba(42,75,212,0.14); border-radius: 12px; text-align: center; font-family: var(--body, Inter), sans-serif; font-size: 14px; line-height: 1.55; color: rgba(30,41,59,0.82); box-shadow: inset 0 3px 5px rgba(20,40,110,0.13), inset 0 -1px 0 rgba(255,255,255,0.55), 0 1px 0 rgba(255,255,255,0.55); } .pep-503a-strip-dot { display: inline-block; vertical-align: middle; width: 8px; height: 8px; border-radius: 50%; background: #2a4bd4; --pulse: rgba(42,75,212,0.55); animation: live-pulse 2.4s ease-out infinite; margin-right: 10px; position: relative; top: -1px; } /* Full-bleed "The 503A Difference" dark navy section */ .pep-503a-section { margin: 0 -40px; padding: 96px 40px 120px; background: linear-gradient(160deg, #0a1633 0%, #0f1f4a 50%, #0a1633 100%); color: #e8ecff; position: relative; overflow: hidden; } .pep-503a-section::before { content: ''; position: absolute; inset: 0; background: radial-gradient(ellipse 60% 50% at 20% 20%, rgba(107,138,255,0.10) 0%, transparent 60%), radial-gradient(ellipse 55% 50% at 85% 90%, rgba(107,138,255,0.08) 0%, transparent 60%); pointer-events: none; } .pep-503a-inner { max-width: 1200px; margin: 0 auto; position: relative; z-index: 2; } .pep-503a-eyebrow { font-family: var(--body, Inter), sans-serif; font-size: 11px; font-weight: 600; letter-spacing: 0.3em; text-transform: uppercase; color: #6b8aff; margin-bottom: 20px; } .pep-503a-heading { font-family: 'Cormorant Garamond', serif; font-weight: 400; font-size: clamp(36px, 4.8vw, 56px); line-height: 1.1; letter-spacing: -0.01em; margin: 0 0 24px; color: #f0f3ff; } .pep-503a-heading em { font-style: italic; color: #6b8aff; } .pep-503a-intro { font-family: var(--body, Inter), sans-serif; font-size: 17px; line-height: 1.65; color: rgba(232,236,255,0.78); max-width: 820px; margin: 0 0 56px; } .pep-503a-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 24px; margin-bottom: 48px; } .pep-503a-card { position: relative; padding: 32px 30px; border-radius: 16px; display: flex; flex-direction: column; gap: 18px; overflow: hidden; --mx: 50%; --my: 50%; transition: transform 0.35s cubic-bezier(.2,.8,.2,1), box-shadow 0.35s ease, border-color 0.35s ease; transform-style: preserve-3d; will-change: transform; } .pep-503a-card > * { position: relative; z-index: 2; } .pep-503a-card::after { content: ''; position: absolute; inset: 0; border-radius: inherit; background: radial-gradient(circle 260px at var(--mx) var(--my), rgba(255,255,255,0.14) 0%, rgba(255,255,255,0.05) 28%, transparent 70%); opacity: 0; transition: opacity 0.3s ease; pointer-events: none; z-index: 1; } .pep-503a-card:hover::after { opacity: 1; } .pep-503a-card--gray:hover { border-color: rgba(248,113,113,0.42); box-shadow: 0 26px 56px rgba(0,0,0,0.55), 0 0 40px rgba(248,113,113,0.12); } .pep-503a-card--blue:hover { border-color: rgba(107,138,255,0.55); box-shadow: 0 26px 56px rgba(0,0,0,0.55), 0 0 40px rgba(107,138,255,0.22); } .pep-503a-card--gray { background: linear-gradient(180deg, rgba(40,22,22,0.5) 0%, rgba(22,10,10,0.3) 100%); border: 1px solid rgba(248,113,113,0.22); } .pep-503a-card--blue { background: linear-gradient(180deg, rgba(30,50,120,0.38) 0%, rgba(20,35,90,0.24) 100%); border: 1px solid rgba(107,138,255,0.30); } .pep-503a-tag { display: inline-flex; align-items: center; gap: 8px; align-self: flex-start; font-family: var(--body, Inter), sans-serif; font-size: 10px; font-weight: 600; letter-spacing: 0.18em; text-transform: uppercase; color: rgba(232,236,255,0.92); background: rgba(255,255,255,0.05); border: 1px solid rgba(255,255,255,0.09); border-radius: 100px; padding: 5px 12px; } .pep-503a-tag-dot { width: 7px; height: 7px; border-radius: 50%; flex-shrink: 0; } .pep-503a-tag-dot--red { background: #f87171; box-shadow: 0 0 6px rgba(248,113,113,0.6); } .pep-503a-tag-dot--blue { background: #6b8aff; box-shadow: 0 0 6px rgba(107,138,255,0.6); } .pep-503a-card-h { font-family: 'Cormorant Garamond', serif; font-weight: 400; font-size: 26px; line-height: 1.15; color: #f0f3ff; margin: 0; } .pep-503a-list { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 11px; } .pep-503a-list li { font-family: var(--body, Inter), sans-serif; font-size: 14px; line-height: 1.55; color: rgba(232,236,255,0.80); padding-left: 20px; position: relative; } .pep-503a-list li::before { content: ''; position: absolute; left: 0; top: 9px; width: 10px; height: 1px; } .pep-503a-card--gray .pep-503a-list li::before { background: rgba(248,113,113,0.45); } .pep-503a-card--blue .pep-503a-list li::before { background: rgba(107,138,255,0.55); } /* Highlight callout block */ .pep-503a-highlight { background: rgba(255,255,255,0.04); backdrop-filter: blur(20px); -webkit-backdrop-filter: blur(20px); border: 1px solid rgba(107,138,255,0.28); border-radius: 20px; padding: 40px 44px; display: flex; gap: 32px; align-items: flex-start; } .pep-503a-highlight-icon { flex-shrink: 0; width: 56px; height: 56px; color: #6b8aff; filter: drop-shadow(0 0 18px rgba(107,138,255,0.35)); } .pep-503a-highlight-body { flex: 1; min-width: 0; } .pep-503a-highlight-h { font-family: 'Cormorant Garamond', serif; font-weight: 400; font-size: clamp(26px, 3.2vw, 36px); line-height: 1.15; margin: 0 0 24px; color: #f0f3ff; } .pep-503a-highlight-h em { font-style: italic; color: #6b8aff; } .pep-503a-highlight p { font-family: var(--body, Inter), sans-serif; font-size: 15px; line-height: 1.65; color: rgba(232,236,255,0.74); margin: 0 0 16px; } .pep-503a-highlight p:last-child { margin-bottom: 0; } .pep-503a-highlight-final { color: rgba(240,243,255,0.95) !important; font-weight: 500; } @media (max-width: 900px) { .pep-trust-badges { gap: 6px; } .pep-trust-badge { font-size: 10.5px; padding: 5px 10px 5px 9px; } .pep-503a-strip { margin: 24px 0 12px; padding: 14px 20px; font-size: 13px; } .pep-503a-section { margin: 0 -40px; padding: 72px 24px 88px; } .pep-503a-grid { grid-template-columns: 1fr; gap: 16px; margin-bottom: 32px; } .pep-503a-card { padding: 24px 22px; } .pep-503a-highlight { flex-direction: column; padding: 28px 24px; gap: 20px; } .pep-503a-highlight-icon { width: 44px; height: 44px; } .pep-503a-heading { font-size: 36px; } } /* ── Mobile nav final overrides ── Must live at the end of the file so it wins the cascade over the base `nav{padding:0 48px}` at line ~3779. */ @media (max-width: 768px) { nav { padding: 0 20px; height: 70px; } .nav-mobile-btn { display: flex; order: -1; gap: 7px; align-items: flex-start; } .nav-mobile-btn span { width: 22px; height: 1.5px; flex: 0 0 auto; border-radius: 1px; } .nav-mobile-btn span:nth-child(2) { width: 30px; } .nav-mobile-btn span:nth-child(3) { display: none; } nav.dark .nav-mobile-btn span { background: #c0d8ca; } .nav-logo { order: 1; } .nav-logo img { height: 40px; } nav.dark .nav-logo img.light-logo { filter: brightness(0) saturate(100%) invert(88%) sepia(12%) saturate(420%) hue-rotate(85deg) brightness(108%); } /* Hide vertical scrollbar visually on mobile viewports. Real mobile browsers already auto-hide; this stops the white sliver that Chrome DevTools mobile mode renders against dark sections. */ html, body { scrollbar-width: none; -ms-overflow-style: none; } html::-webkit-scrollbar, body::-webkit-scrollbar { width: 0; height: 0; display: none; } } /* ===== Mobile scroll performance ===== On iOS WebKit, always-on compositing (a fixed blurred nav re-blurring every scroll frame + a perpetual hero-blob drift animation) starves the scroll thread and kills momentum. Neutralize the persistent ones on small screens. */ @media (max-width: 768px) { /* Drop only the nav's backdrop blur on mobile (perf); do NOT override its background — the adaptive nav.dark theming must show the dark-green header over the hero, matching desktop. */ nav, .nav, header nav { backdrop-filter: none !important; -webkit-backdrop-filter: none !important; } .hero::before, .hero::after { animation: none !important; } /* ── Momentum-safe staggered reveal of the weight-loss section ── ScrollTrigger is disabled on mobile (it kills iOS momentum), so we recreate the elegant in-order reveal here: elements start hidden and fade up in the original GSAP sequence when #wl-pin-wrap scrolls into view (main.js adds .mobile-revealed via IntersectionObserver). */ #wl-pin-wrap .wl-line, #wl-pin-wrap .wl-product-img-wrap, #wl-pin-wrap .wl-stats-row, #wl-pin-wrap .wl-cta-btn, #wl-pin-wrap .wl-chip { opacity: 0; transform: translateY(16px); transition: opacity 0.6s ease, transform 0.6s ease; } #wl-pin-wrap.mobile-revealed .wl-line, #wl-pin-wrap.mobile-revealed .wl-product-img-wrap, #wl-pin-wrap.mobile-revealed .wl-stats-row, #wl-pin-wrap.mobile-revealed .wl-cta-btn, #wl-pin-wrap.mobile-revealed .wl-chip { opacity: 1; transform: none; } /* stagger order — matches the original sticky-scroll reveal sequence */ #wl-pin-wrap .wl-line-1 { transition-delay: 0.00s; } #wl-pin-wrap #wl-chip-1 { transition-delay: 0.07s; } #wl-pin-wrap .wl-product-img-wrap{ transition-delay: 0.12s; } #wl-pin-wrap .wl-line-2 { transition-delay: 0.18s; } #wl-pin-wrap #wl-chip-2 { transition-delay: 0.22s; } #wl-pin-wrap .wl-line-3 { transition-delay: 0.30s; } #wl-pin-wrap #wl-chip-5 { transition-delay: 0.36s; } #wl-pin-wrap #wl-chip-3 { transition-delay: 0.44s; } #wl-pin-wrap #wl-chip-4 { transition-delay: 0.50s; } #wl-pin-wrap .wl-stats-row { transition-delay: 0.58s; } #wl-pin-wrap .wl-cta-btn { transition-delay: 0.70s; } } /* ══════════════════════════════════════════════ ── Weight Loss Quiz Modal (.wlq-) ── Dark-green ForbiddenRx funnel; rendered by main.js ══════════════════════════════════════════════ */ .wlq-overlay{position:fixed;inset:0;z-index:1000;display:flex;align-items:center;justify-content:center;padding:24px;opacity:0;visibility:hidden;transition:opacity .35s ease,visibility .35s ease} .wlq-overlay.open{opacity:1;visibility:visible} .wlq-backdrop{position:absolute;inset:0;background:rgba(4,12,7,0.74);backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px)} .wlq-panel{position:relative;z-index:1;width:100%;max-width:560px;max-height:calc(100vh - 48px);overflow-y:auto;background:linear-gradient(165deg,#0e2316 0%,#0a1a10 60%,#081610 100%);border:1px solid rgba(82,183,136,0.18);border-radius:28px;box-shadow:0 40px 120px rgba(0,0,0,0.6),inset 0 1px 0 rgba(255,255,255,0.04);padding:48px 44px 44px;transform:translateY(24px) scale(0.98);transition:transform .4s cubic-bezier(.16,1,.3,1)} .wlq-overlay.open .wlq-panel{transform:translateY(0) scale(1)} .wlq-close{position:absolute;top:20px;right:20px;width:38px;height:38px;border-radius:50%;border:1px solid rgba(255,255,255,0.12);background:rgba(255,255,255,0.04);color:rgba(255,255,255,0.6);font-size:13px;cursor:pointer;display:flex;align-items:center;justify-content:center;transition:all .2s ease;z-index:2} .wlq-close:hover{background:rgba(255,255,255,0.09);color:#fff;border-color:rgba(255,255,255,0.22)} .wlq-progress{position:absolute;top:0;left:0;right:0;height:3px;background:rgba(255,255,255,0.06);border-radius:28px 28px 0 0;overflow:hidden} .wlq-progress-fill{display:block;height:100%;width:0;background:linear-gradient(90deg,var(--green-mid),var(--green-bright));transition:width .5s cubic-bezier(.16,1,.3,1);box-shadow:0 0 12px rgba(82,183,136,0.5)} .wlq-step{animation:wlqStepIn .45s cubic-bezier(.16,1,.3,1) both} @keyframes wlqStepIn{from{opacity:0;transform:translateY(14px)}to{opacity:1;transform:translateY(0)}} .wlq-eyebrow{font-size:11px;letter-spacing:2.5px;text-transform:uppercase;color:var(--green-bright);font-weight:600;margin-bottom:14px} .wlq-heading{font-family:'Cormorant Garamond',serif;font-weight:500;font-size:34px;line-height:1.12;color:#f4f9f6;margin-bottom:8px;letter-spacing:-0.01em} .wlq-sub{font-size:14px;color:rgba(232,245,238,0.55);margin-bottom:28px;line-height:1.5} .wlq-options{display:flex;flex-direction:column;gap:12px;margin-bottom:28px} .wlq-option{display:flex;align-items:center;justify-content:space-between;gap:16px;padding:18px 22px;cursor:pointer;background:rgba(255,255,255,0.025);border:1px solid rgba(255,255,255,0.09);border-radius:16px;color:#e8f5ee;font-size:15px;font-weight:500;transition:all .2s ease;text-align:left;font-family:var(--body)} .wlq-option:hover{background:rgba(82,183,136,0.07);border-color:rgba(82,183,136,0.35);transform:translateY(-1px)} .wlq-option.selected{background:rgba(82,183,136,0.1);border-color:var(--green-bright);box-shadow:0 0 0 1px var(--green-bright),0 8px 24px rgba(82,183,136,0.12)} .wlq-check{flex-shrink:0;width:22px;height:22px;border-radius:7px;border:1.5px solid rgba(255,255,255,0.22);display:flex;align-items:center;justify-content:center;transition:all .2s ease} .wlq-option.selected .wlq-check{background:var(--green-bright);border-color:var(--green-bright)} .wlq-check svg{opacity:0;transform:scale(0.6);transition:all .2s ease} .wlq-option.selected .wlq-check svg{opacity:1;transform:scale(1)} .wlq-next{width:100%;padding:17px;border:none;border-radius:100px;cursor:pointer;background:linear-gradient(135deg,var(--green-mid),var(--green-bright));color:#062012;font-size:15px;font-weight:700;letter-spacing:0.02em;transition:all .25s ease;box-shadow:0 10px 30px rgba(82,183,136,0.22);font-family:var(--body)} .wlq-next:hover{transform:translateY(-2px);box-shadow:0 14px 38px rgba(82,183,136,0.32)} .wlq-next:disabled{opacity:0.4;cursor:not-allowed;transform:none;box-shadow:none} .wlq-back{background:none;border:none;color:rgba(232,245,238,0.45);cursor:pointer;font-size:13px;font-weight:500;margin-top:16px;width:100%;text-align:center;transition:color .2s ease;font-family:var(--body)} .wlq-back:hover{color:rgba(232,245,238,0.8)} .wlq-review{text-align:center;padding:52px 0 60px} .wlq-spark{font-size:42px;color:var(--green-bright);display:inline-block;animation:wlqSpark 1.4s ease-in-out infinite;filter:drop-shadow(0 0 18px rgba(82,183,136,0.6))} @keyframes wlqSpark{0%,100%{transform:scale(0.8) rotate(0deg);opacity:0.7}50%{transform:scale(1.15) rotate(180deg);opacity:1}} .wlq-review-text{font-family:'Cormorant Garamond',serif;font-size:26px;color:rgba(244,249,246,0.85);margin-top:24px;font-weight:500} .wlq-results-head{text-align:center;margin-bottom:26px} .wlq-result-card{display:flex;align-items:center;gap:16px;width:100%;text-align:left;padding:18px 20px;margin-bottom:12px;background:rgba(255,255,255,0.03);border:1px solid rgba(255,255,255,0.09);border-radius:16px;transition:all .2s ease;cursor:pointer;font-family:var(--body);color:inherit} .wlq-result-card:hover{border-color:rgba(82,183,136,0.35);background:rgba(82,183,136,0.05)} .wlq-result-card.selected{border-color:var(--green-bright);background:rgba(82,183,136,0.1);box-shadow:0 0 0 1px var(--green-bright)} .wlq-result-radio{width:20px;height:20px;border-radius:50%;border:1.5px solid rgba(255,255,255,0.25);flex-shrink:0;display:flex;align-items:center;justify-content:center;transition:all .2s ease} .wlq-result-card.selected .wlq-result-radio{border-color:var(--green-bright)} .wlq-result-card.selected .wlq-result-radio::after{content:'';width:10px;height:10px;border-radius:50%;background:var(--green-bright)} .wlq-result-card:focus-visible{outline:2px solid var(--green-bright);outline-offset:2px} .wlq-result-emoji{font-size:26px;flex-shrink:0} .wlq-result-info{flex:1;min-width:0} .wlq-result-name{font-size:15px;font-weight:600;color:#f4f9f6} .wlq-result-form{font-size:12.5px;color:rgba(232,245,238,0.5);margin-top:2px} .wlq-result-price{font-size:14px;font-weight:600;color:var(--green-bright);white-space:nowrap} .wlq-match-tag{display:inline-block;font-size:10px;letter-spacing:1.5px;text-transform:uppercase;color:#062012;background:var(--green-bright);font-weight:700;padding:3px 9px;border-radius:100px;margin-left:8px;vertical-align:middle} .wlq-disclaimer{font-size:11px;color:rgba(232,245,238,0.4);line-height:1.5;margin-top:18px;text-align:center} body.wlq-locked{overflow:hidden} @media (max-width:560px){ .wlq-overlay{padding:0;align-items:flex-end} .wlq-panel{max-width:100%;max-height:92vh;border-radius:28px 28px 0 0;padding:40px 24px 32px;transform:translateY(100%)} .wlq-overlay.open .wlq-panel{transform:translateY(0)} .wlq-heading{font-size:28px} } /* keyboard-only focus ring — programmatic/touch focus shouldn't read as a selection */ .wlq-option:focus{outline:none} .wlq-option:focus-visible{outline:2px solid var(--green-bright);outline-offset:2px} .wlq-next:focus-visible,.wlq-close:focus-visible,.wlq-back:focus-visible{outline:2px solid var(--green-bright);outline-offset:2px} /* ───────────────────────────────────────────────────────────── Sexual Health — For Men / For Women audience blocks inside the existing right column (.sex-left). Image column (.sex-v4-stage) is unchanged. Display-only cards; one CTA per audience. Men = crimson accent, Women = warm rose accent. ───────────────────────────────────────────────────────────── */ .sex-aud{margin-top:36px;border-radius:24px;padding:30px 28px 28px;border:1px solid var(--sa-br);background:var(--sa-bg);display:flex;flex-direction:column} .sex-aud--men{--sa-accent:#e0566a;--sa-soft:#f3909c;--sa-weak:rgba(224,86,106,0.15);--sa-br:rgba(224,86,106,0.26);--sa-bg:linear-gradient(168deg,rgba(122,22,36,0.34) 0%,rgba(58,12,20,0.16) 100%)} .sex-aud--women{--sa-accent:#e892ab;--sa-soft:#f6c3d3;--sa-weak:rgba(232,146,171,0.16);--sa-br:rgba(232,146,171,0.28);--sa-bg:linear-gradient(168deg,rgba(150,72,98,0.3) 0%,rgba(78,34,52,0.16) 100%)} .sex-aud-label{align-self:flex-start;font-size:10px;letter-spacing:2.5px;text-transform:uppercase;font-weight:700;color:var(--sa-accent);padding:6px 14px;border-radius:100px;background:var(--sa-weak);border:1px solid var(--sa-br);margin-bottom:14px} .sex-aud-title{font-family:'Cormorant Garamond',serif;font-size:clamp(24px,3vw,32px);font-weight:400;color:#fff;line-height:1.1;margin-bottom:10px} .sex-aud-intro{font-size:13.5px;color:rgba(255,255,255,0.6);line-height:1.75;font-weight:300;margin-bottom:22px} .sex-aud-grid{display:grid;grid-template-columns:1fr 1fr;gap:12px;margin-bottom:22px} .sex-aud-card{background:rgba(255,255,255,0.05);border:1px solid rgba(255,255,255,0.1);border-radius:14px;padding:15px 15px 13px;display:flex;flex-direction:column;gap:7px;min-height:104px} .sex-aud-card--wide{grid-column:1 / -1;min-height:0} .sex-aud-tag{font-size:9px;letter-spacing:1px;text-transform:uppercase;color:var(--sa-soft);font-weight:600} .sex-aud-name{font-size:14.5px;color:#fff;font-weight:600;line-height:1.2} .sex-aud-name span{color:rgba(255,255,255,0.42);font-weight:400;font-size:12px} .sex-aud-meta{display:flex;flex-wrap:wrap;gap:3px 0;font-size:11px;color:rgba(255,255,255,0.55);line-height:1.4} .sex-aud-meta span:not(:last-child)::after{content:" · ";white-space:pre;color:rgba(255,255,255,0.45)} .sex-aud-rx{margin-top:auto;font-size:9px;letter-spacing:.6px;text-transform:uppercase;color:var(--sa-accent);font-weight:700;padding-top:5px} .sex-aud-note{font-size:11.5px;color:rgba(255,255,255,0.5);line-height:1.6;font-weight:300;margin-bottom:20px} .sex-aud-cta{align-self:flex-start;display:inline-flex;align-items:center;gap:8px;padding:14px 26px;border-radius:100px;font-size:14px;font-weight:600;text-decoration:none;background:var(--sa-accent);color:#1a0608;transition:transform .2s ease,box-shadow .2s ease} .sex-aud-cta:hover{transform:translateY(-2px);box-shadow:0 10px 26px rgba(0,0,0,0.4)} .sex-aud-cta:focus-visible{outline:2px solid #fff;outline-offset:3px} @media(max-width:600px){ .sex-aud{padding:24px 18px 22px;border-radius:20px;margin-top:0} .sex-aud-grid{gap:10px} .sex-aud-card{min-height:auto} .sex-aud-cta{align-self:stretch;justify-content:center} } /* ───────────────────────────────────────────────────────────── Hormone section — editorial Men/Women split (replaces .hrm-* card). All selectors namespaced .hrm5-* / #hormones to avoid landing collisions. ───────────────────────────────────────────────────────────── */ #hormones{width:100%;background:radial-gradient(ellipse at 60% 28%, #e0b842 0%, #cf9f1e 34%, #b8860b 62%, #c9981a 82%, #f0dca0 100%);position:relative;overflow:hidden;padding:72px 24px 80px;box-sizing:border-box;font-family:Inter,sans-serif} #hormones::before{content:'';position:absolute;inset:0;pointer-events:none;background:radial-gradient(circle at 60% 22%, rgba(255,235,150,0.22) 0%, transparent 50%)} .hrm5-wrap{max-width:1300px;margin:0 auto;position:relative;z-index:1} .hrm5-eyebrow{display:inline-block;font-size:10px;letter-spacing:3px;text-transform:uppercase;font-weight:700;color:#7a5800} .hrm5-h{font-family:'Cormorant Garamond',serif;font-weight:400;line-height:1.04;color:#fff;font-size:clamp(34px,4.6vw,58px);margin:14px 0 0} .hrm5-h em{font-style:italic;color:#fff8df} .hrm5-again{font-style:normal;color:#5e4400} .hrm5-hero{display:flex;flex-direction:column;align-items:center;text-align:center;margin-bottom:46px} .hrm5-top{display:flex;flex-direction:column;align-items:center;padding-top:6px} .hrm5-imgslot{position:relative;width:100vw;display:flex;justify-content:space-between;align-items:flex-end;padding:clamp(20px,4vh,46px) clamp(20px,5vw,90px) 0} .hrm5-fig{height:clamp(360px,58vh,660px);width:auto;display:block} .hrm5-trailcv{position:absolute;top:0;left:0;pointer-events:none;z-index:5} .hrm5-ball{position:absolute;top:0;left:0;width:clamp(22px,2.6vh,34px);height:clamp(22px,2.6vh,34px);pointer-events:none;z-index:6;transform-origin:center;will-change:transform,opacity;filter:drop-shadow(0 3px 7px rgba(55,38,5,0.32))} .hrm5-ball svg,.hrm5-ball img{width:100%;height:100%;display:block;border-radius:50%} .hrm5-bottom{display:flex;flex-direction:column;align-items:center;padding-top:clamp(18px,3vh,34px);padding-bottom:4px} .hrm5-bottom .hrm5-benefits{justify-content:center} .hrm5-img{border-radius:26px;overflow:hidden;min-height:400px;box-shadow:0 28px 66px rgba(80,55,0,0.3)} .hrm5-img img{width:100%;height:100%;object-fit:cover;object-position:center 15%;display:block} .hrm5-lead{font-size:16px;line-height:1.8;color:rgba(43,30,4,0.82);font-weight:300;max-width:660px;margin:18px 0 0} .hrm5-benefits{display:flex;flex-wrap:nowrap;gap:6px;margin:26px 0 20px} .hrm5-benefits span{font-size:10px;letter-spacing:.2px;color:#ffe7a0;font-weight:600;padding:5px 10px;background:rgba(24,18,4,0.82);border:1px solid rgba(255,215,0,0.22);border-radius:100px;box-shadow:0 4px 14px rgba(40,28,0,0.25);transition:transform .18s;white-space:nowrap} @media(max-width:560px){.hrm5-benefits{flex-wrap:wrap}} .hrm5-benefits span:hover{transform:translateY(-2px)} .hrm5-trust{font-size:12px;color:rgba(28,22,6,0.62);letter-spacing:.3px;line-height:1.7;font-weight:500} @media(max-width:600px){.hrm5-trust{font-size:clamp(9px,2.5vw,11px);letter-spacing:0}} .hrm5-split{display:grid;grid-template-columns:1fr 1px 1fr;gap:46px;align-items:stretch} .hrm5-men,.hrm5-women{display:flex;flex-direction:column} .hrm5-div{background:linear-gradient(180deg,transparent,rgba(28,22,6,0.35),transparent)} .hrm5-lab{font-size:11px;letter-spacing:3px;text-transform:uppercase;font-weight:700;color:#5e4400;margin-bottom:6px} .hrm5-t{font-family:'Cormorant Garamond',serif;font-size:clamp(26px,3vw,36px);color:#1c1606;margin-bottom:8px} .hrm5-blurb{font-size:13px;line-height:1.7;color:rgba(28,22,6,0.62);font-weight:300;margin-bottom:18px;max-width:380px} .hrm5-r{margin:0 -14px;padding:16px 14px;border-bottom:1px solid rgba(28,22,6,0.16);border-radius:10px;transition:background .2s ease} .hrm5-r:first-of-type{border-top:1px solid rgba(28,22,6,0.16)} .hrm5-r:hover{background:rgba(255,251,230,0.62)} .hrm5-nm{font-size:16px;font-weight:600;color:#1c1606} .hrm5-fm{font-size:11px;letter-spacing:.4px;color:rgba(28,22,6,0.6);margin-top:3px} .hrm5-cta-wrap{margin-top:auto;padding-top:28px} .hrm5-cta{align-self:flex-start;display:inline-flex;align-items:center;gap:8px;padding:14px 28px;border-radius:100px;font-size:14px;font-weight:600;text-decoration:none;transition:transform .2s,box-shadow .2s} .hrm5-cta:hover{transform:translateY(-2px);box-shadow:0 10px 26px rgba(0,0,0,0.35)} .hrm5-men .hrm5-cta{background:#1c1606;color:#ffe7a0} .hrm5-women .hrm5-cta{background:#7a4634;color:#ffe7df} @media(max-width:900px){ .hrm5-hero{min-height:auto} .hrm5-imgslot{padding:18px 14px 0} .hrm5-fig{height:clamp(150px,24vh,245px)} .hrm5-ball{width:clamp(11px,1.4vh,15px);height:clamp(11px,1.4vh,15px)} .hrm5-h{font-size:clamp(34px,11.5vw,50px)} .hrm5-again{display:block} .hrm5-img{min-height:300px} .hrm5-split{grid-template-columns:1fr;gap:0} .hrm5-div{display:none} .hrm5-women{margin-top:8px;padding-top:24px} } /* Beige scrolling marquee — reuses .wl-marquee-* structure + keyframes, re-themed. Section dividers above Hormone Therapy / Hair / Skin. */ .beige-marquee{background:#efe7d8;overflow:hidden;contain:layout paint;border-top:1px solid rgba(160,132,92,0.16);border-bottom:1px solid rgba(160,132,92,0.16)} .beige-marquee .wl-marquee-row:first-child{border-bottom:1px solid rgba(160,132,92,0.10)} .beige-marquee .wl-marquee-item{color:rgba(92,72,38,0.42)} .beige-marquee .wl-dot{color:rgba(160,132,92,0.5)} /* Mobile: keep the four "50 states" stats on a single line */ @media(max-width:640px){ .states-inner{width:100% !important;} .states-stats{gap:10px !important;flex-wrap:nowrap !important;align-items:flex-start !important;} .states-stats > div{flex:1 1 0;min-width:0;} .states-stats > div > div:first-child{font-size:18px !important;} .states-stats > div > div:last-child{font-size:7px !important;letter-spacing:0.4px !important;line-height:1.25;} } /* Mobile: trim excess vertical padding (hormone bottom + skin treatment top) */ @media(max-width:900px){ #hormones{padding-bottom:60px} #skin-section{padding-bottom:36px !important} #skin-treatment{padding-top:36px !important} }