*,*::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. */ :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} body{background:var(--white);color:var(--ink);font-family:var(--body);font-size:15px;line-height:1.6} 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)} /* ── 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{ min-height:100vh; 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; 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:88px 48px 80px 0;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:68px; 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,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} } @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%); margin-top:-15vh; 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%); margin-top: -15vh; 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); } /* 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: 540px; 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 24px; } .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: 18px 28px 22px; 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); } /* Result card */ .bmi-result-card { background: rgba(34,197,94,0.07); border: 1px solid rgba(34,197,94,0.2); border-top: 1px solid rgba(34,197,94,0.32); border-radius: 18px; padding: 20px 24px; text-align: center; transition: all 0.5s ease; position: relative; overflow: hidden; box-shadow: inset 0 1px 0 rgba(255,255,255,0.1), 0 4px 16px rgba(0,0,0,0.15); z-index: 1; } .bmi-result-card::before { content:''; position:absolute; top:0; left:0; right:0; height:1px; background: linear-gradient(90deg, transparent, rgba(74,222,128,0.5), transparent); } .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:inline-flex; align-items:center; gap:8px; padding:14px 36px; border:none; border-radius:12px; 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 80px; } .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 24px 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 ── */ .mobile-menu{display:none;position:fixed;inset:0;z-index:300;background:var(--white);flex-direction:column;align-items:center;justify-content:center;gap:32px} .mobile-menu.open{display:flex} .mobile-menu a{font-family:var(--display);font-size:36px;font-weight:300;color:var(--ink);transition:color 0.2s} .mobile-menu a:hover{color:var(--green-mid)} .mobile-close{position:absolute;top:24px;right:32px;font-size:28px;color:var(--ink2);cursor:pointer} /* ── Responsive ── */ @media(max-width:1024px){ .hero{grid-template-columns:1fr;min-height:auto;padding:120px 0 60px} .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-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-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:space-between;gap:5px;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:9.5px;padding:8px 9px;letter-spacing:0.05px;gap:5px;justify-content:center;flex:0 1 auto;white-space:nowrap;font-weight:500} .hero-trust-chip::before{width:4px;height:4px} .hero-trust-chip::before{width:5px;height:5px} /* ── Hero cards: featured / featured / 2x2 / 2x2 / 2x2 on mobile only ── */ .hero-cards-grid{grid-template-columns:repeat(2,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); min-height:calc(100dvh - 60px); overflow:visible; } .wl-pin-inner{ padding:128px 24px 110px 32px !important; min-height:calc(100svh - 60px); min-height:calc(100dvh - 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:84px;left:16px} .wl-chip-2{top:84px;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} /* Three steps section — three horizontal pills on mobile, no header */ #how.white-section{padding:16px 0 14px} #how .container > div:first-child{display:none} #how .steps-grid{grid-template-columns:repeat(3,1fr);gap:8px;margin-top:0} #how .step-card{padding:10px 6px;border-radius:100px;text-align:center} #how .step-num{display:none} #how .step-title{font-size:11px;line-height:1.2;margin-bottom:0;font-weight:500} #how .step-body{display:none} #how .step-time{display:none} .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} body{background:var(--white);color:var(--ink);font-family:var(--body);font-size:15px;line-height:1.6} 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%); } .sex-inner { max-width: 1200px; margin: 0 auto; padding: 120px 48px; width: 100%; display: grid; grid-template-columns: 1fr 1fr; gap: 80px; align-items: center; } /* ── 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: 8px; margin-bottom: 40px; } .sex-tag { font-size: 11px; letter-spacing: 1.5px; 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: 6px 14px; } .sex-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; margin-bottom: 40px; } .sex-stat-card { background: rgba(255,255,255,0.04); backdrop-filter: blur(16px) saturate(140%); border: 1px solid rgba(255,255,255,0.07); border-top-color: rgba(248,113,113,0.2); border-radius: 20px; padding: 24px 20px; display: flex; flex-direction: column; gap: 6px; } .sex-stat-n { font-family: var(--display); font-size: 36px; font-weight: 300; color: #f87171; line-height: 1; } .sex-stat-l { font-size: 11px; color: rgba(255,200,190,0.4); text-transform: uppercase; letter-spacing: 1px; line-height: 1.4; } .sex-cta { display: inline-flex; align-items: center; gap: 8px; padding: 16px 32px; background: rgba(220,38,38,0.15); border: 1px solid rgba(248,113,113,0.35); border-radius: 100px; color: #f87171; font-size: 14px; letter-spacing: 0.5px; width: fit-content; transition: background 0.3s ease, border-color 0.3s ease, color 0.3s ease; } .sex-cta:hover { background: rgba(220,38,38,0.3); border-color: rgba(248,113,113,0.6); color: #fca5a5; } /* ── Rating pill (above eyebrow) ── */ .sex-rating { display: inline-flex; align-items: center; gap: 10px; padding: 8px 16px; margin-bottom: 24px; background: rgba(220,38,38,0.08); border: 1px solid rgba(248,113,113,0.22); border-radius: 100px; width: fit-content; backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); } .sex-rating-stars { color: #f87171; font-size: 12px; letter-spacing: 1.5px; } .sex-rating-score { color: #fca5a5; font-family: var(--display); font-size: 15px; font-weight: 500; } .sex-rating-count { color: rgba(255,200,190,0.55); font-size: 11px; letter-spacing: 0.5px; } /* ── Trust chip row (below CTA) ── */ .sex-trust { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 24px; } .sex-trust-chip { display: inline-flex; align-items: center; gap: 8px; padding: 7px 14px; font-size: 11px; letter-spacing: 0.5px; 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; } /* ── Right: pill image ── */ .sex-right { display: flex; align-items: center; justify-content: center; } .sex-pill { width: 100%; max-width: 520px; height: auto; filter: drop-shadow(0 40px 80px rgba(220,38,38,0.55)) drop-shadow(0 0 120px rgba(180,20,20,0.3)); animation: sexFloat 5s ease-in-out infinite; } @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: cover; object-position: center 18%; 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; } .sex-v4-card { position: absolute; right: -56px; top: 380px; width: min(420px, calc(50vw - 48px)); background: rgba(20,4,4,0.78); backdrop-filter: blur(24px) saturate(140%); -webkit-backdrop-filter: blur(24px) saturate(140%); border: 1px solid rgba(248,113,113,0.22); border-radius: 24px; padding: 24px; box-shadow: 0 30px 60px rgba(0,0,0,0.6); transition: transform 0.6s cubic-bezier(.2,.8,.2,1), box-shadow 0.6s ease; z-index: 3; } .sex-v4-card .sex-grid { margin-bottom: 0; gap: 10px; } .sex-v4-card .sex-stat-card { padding: 16px 14px; } .sex-v4-card .sex-stat-n { font-size: 26px; } .sex-v4-stage:hover .sex-v4-card { transform: translate(12px, -6px); box-shadow: 0 40px 80px rgba(0,0,0,0.7), 0 0 60px rgba(220,38,38,0.25); } @media (max-width: 900px) { .sex-section { grid-template-columns: 1fr; min-height: 0; } .sex-section > .sex-left { padding: 60px 24px 72px; gap: 48px; } .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); } /* ══════════════════════════════════════════ Sexual Health Formulary — medication grid (folded into .sex-section, not a standalone section) ══════════════════════════════════════════ */ .sex-formulary-wrap { width: 100%; padding: 0; scroll-margin-top: 80px; position: relative; z-index: 3; } .sex-formulary-divider { display: flex; align-items: center; gap: 18px; margin: 0 0 32px; } .sex-formulary-divider-line { flex: 1; height: 1px; background: linear-gradient(to right, transparent, rgba(248,113,113,0.32), transparent); } .sex-formulary-divider-text { font-family: Inter, sans-serif; font-size: 11px; font-weight: 500; letter-spacing: 0.22em; text-transform: uppercase; color: rgba(248,113,113,0.78); white-space: nowrap; } /* ── Before You Choose preamble ── */ .sex-preamble { margin: 8px 0 16px; color: #f5e6e1; } .sex-preamble-eyebrow { font-family: Inter, sans-serif; font-size: 11px; font-weight: 500; letter-spacing: 0.22em; text-transform: uppercase; color: rgba(248,113,113,0.78); margin-bottom: 14px; } .sex-preamble-heading { font-family: 'Cormorant Garamond', serif; font-weight: 400; font-size: clamp(28px, 3.4vw, 40px); line-height: 1.1; letter-spacing: -0.01em; margin: 0 0 14px; color: #f5e6e1; } .sex-preamble-heading em { font-style: italic; color: #f87171; } .sex-preamble-intro { font-family: Inter, sans-serif; font-size: 15px; line-height: 1.6; color: rgba(245,230,225,0.72); margin: 0 0 32px; max-width: 640px; } .sex-preamble-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 28px; padding-top: 24px; border-top: 1px solid rgba(248,113,113,0.12); } .sex-preamble-col-h { font-family: 'Cormorant Garamond', serif; font-weight: 400; font-size: 22px; margin: 0 0 10px; color: #f5e6e1; } .sex-preamble-col p { font-family: Inter, sans-serif; font-size: 14px; line-height: 1.6; color: rgba(245,230,225,0.72); margin: 0; } /* ── "— AND —" divider separating PDE-5 grid from the other two options ── */ .sex-and-divider { display: flex; align-items: center; gap: 14px; max-width: 420px; margin: 28px auto 20px; } .sex-and-line { flex: 1; height: 1px; background: linear-gradient(to right, transparent, rgba(248,113,113,0.28), transparent); } .sex-and-text { font-family: Inter, sans-serif; font-size: 11px; font-weight: 600; letter-spacing: 0.28em; text-transform: uppercase; color: rgba(248,113,113,0.72); white-space: nowrap; } /* ── "Best for" inline line inside cards ── */ .sh-med-bestfor { font-family: Inter, sans-serif; font-size: 13px; line-height: 1.5; color: rgba(245,230,225,0.78); padding-top: 2px; } .sh-med-bestfor-k { display: inline; font-size: 10px; font-weight: 600; letter-spacing: 0.16em; text-transform: uppercase; color: rgba(245,230,225,0.45); margin-right: 6px; } /* ── PT-141 provider-review note ── */ .sh-med-note { font-family: Inter, sans-serif; font-size: 11.5px; line-height: 1.45; font-style: italic; color: rgba(245,230,225,0.52); padding: 8px 12px; background: rgba(255,255,255,0.02); border-left: 2px solid rgba(248,113,113,0.3); border-radius: 4px; } /* ── Solo full-width card (PT-141 + Compounded) ── */ .sh-med-card--solo { width: 100%; margin-top: 16px; } /* ── PT-141 card accent (distinguishes mechanism visually) ── */ .sh-med-card--pt141 { background: linear-gradient(180deg, rgba(50,12,12,0.72) 0%, rgba(80,18,18,0.58) 100%); border-color: rgba(248,113,113,0.32); } .sh-formulary-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 16px; } .sh-med-card { grid-column: span 1; position: relative; background: rgba(26,5,5,0.62); backdrop-filter: blur(20px) saturate(140%); -webkit-backdrop-filter: blur(20px) saturate(140%); border: 1px solid rgba(248,113,113,0.14); border-radius: 16px; padding: 28px 26px 26px; display: flex; flex-direction: column; gap: 14px; color: #f5e6e1; transition: transform 220ms ease, border-color 220ms ease, box-shadow 220ms ease; } .sh-med-card:nth-child(5) { grid-column: 1 / -1; } .sh-med-card:hover { transform: translateY(-4px); border-color: rgba(248,113,113,0.38); box-shadow: 0 20px 48px rgba(0,0,0,0.45), 0 0 32px rgba(220,38,38,0.14); } .sh-med-tag { align-self: flex-start; font-family: Inter, sans-serif; font-size: 10px; font-weight: 600; letter-spacing: 0.18em; text-transform: uppercase; color: #f87171; background: rgba(220,38,38,0.12); border: 1px solid rgba(248,113,113,0.22); border-radius: 100px; padding: 5px 12px; } .sh-med-name { font-family: 'Cormorant Garamond', serif; font-weight: 400; font-size: 26px; line-height: 1.1; margin: 0; color: #f5e6e1; } .sh-med-brand { font-style: italic; font-size: 18px; color: rgba(245,230,225,0.55); margin-left: 2px; } .sh-med-positioning { font-family: Inter, sans-serif; font-size: 15px; line-height: 1.5; color: rgba(245,230,225,0.82); margin: 0; } .sh-med-meta { display: flex; gap: 24px; padding: 14px 0; border-top: 1px solid rgba(248,113,113,0.10); border-bottom: 1px solid rgba(248,113,113,0.10); margin-top: auto; } .sh-med-meta-row { display: flex; flex-direction: column; gap: 2px; } .sh-med-meta-k { font-family: Inter, sans-serif; font-size: 10px; font-weight: 500; letter-spacing: 0.16em; text-transform: uppercase; color: rgba(245,230,225,0.45); } .sh-med-meta-v { font-family: 'SF Mono', ui-monospace, 'Menlo', monospace; font-size: 13px; color: #f5e6e1; font-feature-settings: 'tnum'; } .sh-med-cta { font-family: Inter, sans-serif; font-size: 14px; font-weight: 500; color: #f87171; text-decoration: none; align-self: flex-start; transition: color 180ms ease, transform 180ms ease; } .sh-med-cta:hover { color: #fca5a5; transform: translateX(3px); } .sh-med-card--custom { background: linear-gradient(180deg, rgba(26,5,5,0.72) 0%, rgba(60,10,10,0.55) 100%); border-color: rgba(248,113,113,0.24); } @media (max-width: 900px) { .sex-formulary-wrap { padding: 0; } .sex-formulary-divider { margin-bottom: 28px; gap: 12px; } .sh-formulary-grid { grid-template-columns: 1fr; gap: 14px; } .sh-med-card, .sh-med-card:nth-child(5) { grid-column: auto; } .sh-med-name { font-size: 26px; } .sh-med-brand { font-size: 16px; } .sex-preamble-grid { grid-template-columns: 1fr; gap: 24px; padding-top: 20px; } .sex-preamble { margin: 0 0 8px; } .sex-and-divider { margin: 20px auto 14px; } } /* ══════════════════════════════════════════ 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; } }