/* ═══════════════════════════════════════════════════════════════════════════ BiometrixLabs · CLEAN ROOM design system · 28 August 2026 A light, calm, type-led surface. Written from scratch to replace the deep-space theme. It styles the site's existing functional chrome (search / cart / account panels, mobile menu) so all behaviour is preserved. ═══════════════════════════════════════════════════════════════════════════ */ :root{ --ink:#1d1d1f; --navy:#0A1A38; --gray:#707070; --soft:#5B6B80; --canvas:#F5F5F7; --paper:#ffffff; --rule:#E3E6EC; --blue:#0071E3; --blue-deep:#005BB5; --link:#0066CC; --gold:#B8862A; --gold-soft:#F3E7CE; --aqua:#2dd4bf; --sky:#38bdf8; --violet:#a78bfa; --pink:#f0a3d8; --amber:#ffb35c; --shadow:0 18px 50px rgba(16,32,64,.09); /* Aliases for token names still referenced by inline styles inside the page markup. Without these those declarations resolve to nothing and the element falls back to unstyled defaults — which is what made several interior pages look like raw HTML. */ --brand-blue:#0071E3; --border:#E3E6EC; --white:#ffffff; --cream:#F5F5F7; --gold-light:#F3E7CE; --navy-light:#3d5170; --navy-deep:#06122A; --surface-deep:#0A1A38; --surface-raise:#F5F5F7; --on-accent:#ffffff; --gold-vibrant:#B8862A; --orange:#B8862A; --success:#1B7F4B; --danger:#C0392B; } *{margin:0;padding:0;box-sizing:border-box;} [hidden]{display:none !important;} html{background:var(--paper);scroll-behavior:smooth;-webkit-text-size-adjust:100%;} body{font-family:Inter,-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,sans-serif; color:var(--ink);background:transparent;line-height:1.6;overflow-x:clip;} img{max-width:100%;display:block;} a{color:inherit;text-decoration:none;} button{font-family:inherit;} .container{max-width:1200px;margin:0 auto;padding:0 24px;} header .container{max-width:1280px;} /* living background */ /* The canvas paints behind page content but in front of the ground colour, because is transparent. Using z-index:-1 here means we do NOT have to force position/z-index onto every body child — an earlier version did that and clobbered the age gate's position:fixed, which locked scrolling. */ #bxl-live{position:fixed;inset:0;z-index:-1;pointer-events:none;} #bmx-stage,#bmx-sculpt,#bmx-galaxy-cv{display:none !important;} /* the research-use gate must always sit above everything */ #bxl-gate{position:fixed !important;inset:0 !important;z-index:99999 !important;} /* ── announce ─────────────────────────────────────────────────────────────── */ .announce{background:var(--navy);color:#cfd8e6;font-size:12px;text-align:center; padding:9px 16px;letter-spacing:.02em;} .announce b,.announce strong{color:#fff;font-weight:600;} .announce .sep{opacity:.45;margin:0 8px;} /* ── header ───────────────────────────────────────────────────────────────── */ header{position:sticky;top:0;z-index:100;background:rgba(255,255,255,.82); backdrop-filter:blur(20px);-webkit-backdrop-filter:blur(20px);border-bottom:1px solid var(--rule);} nav.container{display:flex;align-items:center;gap:14px;height:66px;max-width:1280px;} .logo{display:flex;align-items:center;gap:10px;margin-right:auto;} .logo-img{height:32px;width:auto;} .logo-text{display:flex;flex-direction:column;line-height:1.02;} .logo-text .name{font-size:19px;font-weight:800;letter-spacing:-.02em;color:var(--navy);white-space:nowrap;} .logo-text .tag{font-size:8.5px;font-weight:700;letter-spacing:.18em;text-transform:uppercase;color:var(--gray);margin-top:2px;} .nav-links{display:flex;align-items:center;gap:1px;list-style:none;flex-wrap:nowrap;} .nav-links a{position:relative;display:block;padding:7px 8px;font-size:13px;font-weight:500;color:#474747;white-space:nowrap;transition:color .25s;} .nav-links a::after{content:"";position:absolute;left:8px;right:8px;bottom:0;height:2px;border-radius:2px; background:linear-gradient(92deg,var(--aqua),var(--sky),var(--violet),var(--pink),var(--amber),var(--aqua)); background-size:300% 100%;animation:bxl-ramp 6s linear infinite; box-shadow:0 0 10px rgba(56,189,248,.75);transform:scaleX(0);transform-origin:center; transition:transform .34s cubic-bezier(.2,.8,.2,1);} .nav-links a:hover,.nav-links a.active{color:var(--ink);} .nav-links a:hover::after,.nav-links a.active::after{transform:scaleX(1);} .nav-links a:hover{animation:bxl-textglow 4.5s linear infinite;} .nav-cta .btn{padding:9px 17px;font-size:13.5px;} /* icon buttons + their panels */ .search-wrap,.cart-wrap,.account-wrap{position:relative;} .search-btn,.cart-btn,.account-btn{width:38px;height:38px;display:grid;place-items:center; border:1px solid var(--rule);background:var(--paper);border-radius:50%;color:var(--navy); cursor:pointer;transition:transform .22s,box-shadow .3s,border-color .25s;} .search-btn:hover,.cart-btn:hover,.account-btn:hover{transform:translateY(-2px);animation:bxl-glow 4s linear infinite;} .cart-count{position:absolute;top:-3px;right:-3px;min-width:18px;height:18px;border-radius:9px; background:var(--blue);color:#fff;font-size:10.5px;font-weight:800;display:grid;place-items:center;padding:0 5px;} .account-badge{position:absolute;top:-2px;right:-2px;width:9px;height:9px;border-radius:50%;background:var(--gold);} .search-panel,.cart-panel,.account-panel{position:absolute;top:calc(100% + 12px);right:0; background:var(--paper);border:1px solid var(--rule);border-radius:20px;box-shadow:var(--shadow); padding:16px;opacity:0;visibility:hidden;transform:translateY(-8px); transition:opacity .24s,transform .24s,visibility .24s;} .search-panel.open,.cart-panel.open,.account-panel.open{opacity:1;visibility:visible;transform:translateY(0);} .search-panel{width:320px;} .search-form{display:flex;gap:8px;} #search-input{flex:1;border:1px solid var(--rule);border-radius:12px;padding:11px 14px;font-size:15px;font-family:inherit;} #search-input:focus{outline:none;border-color:var(--blue);box-shadow:0 0 0 4px rgba(0,113,227,.12);} .search-submit{border:0;background:var(--blue);color:#fff;border-radius:12px;width:42px;display:grid;place-items:center;cursor:pointer;} .cart-panel{width:340px;} .cart-panel-head{display:flex;justify-content:space-between;align-items:center;padding-bottom:12px;border-bottom:1px solid var(--rule);} .cart-panel-head strong{font-size:15px;color:var(--navy);} #cart-close{border:0;background:none;font-size:22px;line-height:1;color:var(--gray);cursor:pointer;} .cart-items{max-height:320px;overflow-y:auto;padding:14px 0;} .cart-empty{font-size:14px;color:var(--gray);text-align:center;padding:18px 0;} .cart-panel-foot{border-top:1px solid var(--rule);padding-top:14px;} .cart-subtotal-row{display:flex;justify-content:space-between;font-size:14.5px;margin-bottom:12px;} .cart-subtotal-row strong{color:var(--navy);font-size:16px;} .cart-checkout-btn{display:block;text-align:center;width:100%;} .account-panel{width:300px;} .account-panel-lede{font-size:13.5px;color:var(--gray);margin-bottom:12px;line-height:1.45;} .account-close{position:absolute;top:10px;right:12px;border:0;background:none;font-size:20px;color:var(--gray);cursor:pointer;} .btn-text-link{display:block;width:100%;margin-top:10px;border:0;background:none;color:var(--gray); font-size:13px;cursor:pointer;text-align:center;} .btn-text-link:hover{color:var(--ink);} /* mobile menu */ .menu-toggle{display:none;flex-direction:column;gap:4px;border:0;background:none;cursor:pointer;padding:8px;} .menu-toggle span{width:20px;height:2px;background:var(--navy);border-radius:2px;} /* ── buttons ──────────────────────────────────────────────────────────────── */ .btn{display:inline-block;padding:13px 26px;border-radius:980px;font-size:16px;font-weight:600; border:1px solid transparent;cursor:pointer;text-align:center; transition:transform .26s cubic-bezier(.2,.8,.2,1),box-shadow .3s,background .25s,color .25s;} .btn-gold{background:var(--blue);color:#fff;} /* the primary action */ .btn-primary{background:var(--blue);color:#fff;} .btn-outline{background:transparent;color:var(--ink);border-color:var(--ink);} .btn:hover{transform:translateY(-2px);animation:bxl-glow 4s linear infinite;} /* ── sections ─────────────────────────────────────────────────────────────── */ section{padding:72px 0;} section.band{background:rgba(245,245,247,.92);} .section-head{margin-bottom:42px;} .eyebrow{display:block;font-size:12.5px;letter-spacing:.14em;text-transform:uppercase;color:var(--gold);font-weight:700;margin-bottom:10px;} h1,h2,h3{color:var(--navy);letter-spacing:-.018em;line-height:1.08;} h2{font-size:clamp(30px,3.6vw,40px);font-weight:700;} .section-head p{font-size:18px;color:var(--gray);max-width:620px;margin-top:10px;line-height:1.45;} /* hero */ .hero{text-align:center;padding:18px 24px 0;} .hero .eyebrow{margin-bottom:4px;} .hero h1{font-size:clamp(40px,6.4vw,70px);font-weight:700;margin:6px 0 12px;} .hero h1 .muted{color:var(--gray);} .hero .sub{font-size:18px;color:var(--gray);max-width:600px;margin:0 auto 20px;line-height:1.45;} .hero-actions{display:flex;gap:14px;justify-content:center;flex-wrap:wrap;} .hero-shelf{display:flex;justify-content:center;align-items:flex-end;gap:26px;margin-top:24px;} .hero-shelf img{height:min(252px,27vw);filter:drop-shadow(0 22px 34px rgba(10,26,56,.18));} .hero-shelf img:nth-child(2){height:min(290px,31vw);} .shelf-line{height:1px;background:linear-gradient(90deg,transparent,var(--rule),transparent);max-width:760px;margin:0 auto;} .stats{display:flex;justify-content:center;gap:clamp(28px,6vw,84px);padding:22px 24px 8px;flex-wrap:wrap;} .stats div{text-align:center;} .stats b{display:block;font-size:30px;font-weight:700;color:var(--navy);letter-spacing:-.01em;} .stats span{font-size:12.5px;color:var(--gray);text-transform:uppercase;letter-spacing:.08em;} /* product grid */ .product-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:18px;} .product-card{display:block;background:var(--paper);border:1px solid transparent;border-radius:28px; padding:26px 22px 24px;text-align:center;transition:transform .25s cubic-bezier(.2,.8,.2,1),box-shadow .3s;} section.band .product-card{background:var(--paper);} .product-card:hover{transform:translateY(-6px);animation:bxl-glow 4.6s linear infinite;} .product-thumb{height:168px;display:grid;place-items:center;margin-bottom:18px;} .product-thumb img{max-height:168px;width:auto;} .product-tag{font-size:11px;letter-spacing:.09em;text-transform:uppercase;color:var(--gold);font-weight:700;} .product-card h3{font-size:20px;font-weight:700;margin:5px 0 2px;} .product-mg{font-size:13.5px;color:var(--gray);} .product-price{font-size:17px;font-weight:600;color:var(--navy);margin:12px 0 12px;} .product-link{font-size:14px;color:var(--link);position:relative;display:inline-block;} .product-link::after{content:"";position:absolute;left:0;right:0;bottom:-3px;height:1.5px;border-radius:2px; background:linear-gradient(92deg,var(--sky),var(--violet),var(--pink),var(--sky));background-size:280% 100%; animation:bxl-ramp 5s linear infinite;box-shadow:0 0 8px rgba(56,189,248,.7); transform:scaleX(0);transform-origin:center;transition:transform .32s cubic-bezier(.2,.8,.2,1);} .product-card:hover .product-link::after{transform:scaleX(1);} /* verify band */ .verify-band{text-align:center;} .verify-band .row{display:flex;gap:10px;justify-content:center;flex-wrap:wrap;margin:26px 0 10px;} .verify-band input{font-family:ui-monospace,Menlo,monospace;font-size:16px;padding:13px 18px; border:1px solid var(--rule);border-radius:12px;width:min(320px,72vw);background:var(--paper);} .verify-band input:focus{outline:none;border-color:var(--blue);box-shadow:0 0 0 4px rgba(0,113,227,.12);} .verify-band button{background:var(--navy);color:#fff;border:0;border-radius:980px;padding:13px 26px;font-size:16px;cursor:pointer; transition:transform .26s,box-shadow .3s;} .verify-band button:hover{transform:translateY(-2px);animation:bxl-glow 4s linear infinite;} .verify-band .hint{font-size:13px;color:var(--gray);} /* steps */ .steps{display:grid;grid-template-columns:repeat(3,1fr);gap:18px;} .step{background:var(--paper);border-radius:28px;padding:34px 28px;} section:not(.band) .step{background:var(--canvas);} .step .n{font-size:14px;font-weight:800;color:var(--gold);letter-spacing:.1em;} .step h3{font-size:22px;font-weight:700;margin:8px 0;} .step p{font-size:15.5px;color:var(--gray);line-height:1.5;} /* category pills */ .cats{display:flex;gap:12px;flex-wrap:wrap;} .cats a{border:1px solid var(--rule);border-radius:980px;padding:10px 20px;font-size:15px;background:var(--paper); transition:transform .26s,color .25s;} .cats a:hover{transform:translateY(-2px);color:var(--ink);animation:bxl-glow 4.4s linear infinite;} /* ── footer ───────────────────────────────────────────────────────────────── */ footer{background:rgba(245,245,247,.96);padding:56px 0 38px;margin-top:20px;} .footer-grid{display:grid;grid-template-columns:2fr 1fr 1fr 1fr;gap:28px;max-width:1200px;margin:0 auto;padding:0 24px;} footer h4{font-size:12px;letter-spacing:.1em;text-transform:uppercase;color:var(--gray);margin-bottom:12px;} footer a{position:relative;display:block;width:fit-content;color:#474747;font-size:14px;margin-bottom:8px;transition:color .22s;} footer a::after{content:"";position:absolute;left:0;right:0;bottom:0;height:1.5px;border-radius:2px; background:linear-gradient(92deg,var(--aqua),var(--sky),var(--violet),var(--pink),var(--aqua));background-size:280% 100%; animation:bxl-ramp 6s linear infinite;transform:scaleX(0);transform-origin:left;transition:transform .3s cubic-bezier(.2,.8,.2,1);} footer a:hover{color:var(--ink);} footer a:hover::after{transform:scaleX(1);} .footer-about{font-size:14px;color:var(--gray);line-height:1.5;max-width:280px;} .footer-logo{font-weight:800;font-size:17px;color:var(--navy);margin-bottom:10px;} .footer-legal{max-width:1200px;margin:34px auto 0;padding:22px 24px 0;border-top:1px solid var(--rule); font-size:12px;color:var(--gray);display:flex;justify-content:space-between;gap:16px;flex-wrap:wrap;} /* ── holographic wordmark + interaction ramps ─────────────────────────────── */ .logo-text .name span,.footer-logo span{ background:linear-gradient(92deg,#2dd4bf 0%,#38bdf8 22%,#a78bfa 44%,#f0a3d8 62%,#38bdf8 80%,#2dd4bf 100%); background-size:260% 100%;-webkit-background-clip:text;background-clip:text; -webkit-text-fill-color:transparent;color:transparent;animation:bmx-chameleon 9s linear infinite;} @keyframes bmx-chameleon{0%{background-position:0% 50%}100%{background-position:260% 50%}} @keyframes bxl-ramp{0%{background-position:0% 50%}100%{background-position:300% 50%}} @keyframes bxl-glow{ 0%{box-shadow:0 0 20px 3px rgba(45,212,191,.60);border-color:#2dd4bf;} 20%{box-shadow:0 0 22px 4px rgba(56,189,248,.62);border-color:#38bdf8;} 40%{box-shadow:0 0 24px 5px rgba(167,139,250,.58);border-color:#a78bfa;} 60%{box-shadow:0 0 22px 4px rgba(240,163,216,.58);border-color:#f0a3d8;} 80%{box-shadow:0 0 22px 4px rgba(255,179,92,.58);border-color:#ffb35c;} 100%{box-shadow:0 0 20px 3px rgba(45,212,191,.60);border-color:#2dd4bf;}} @keyframes bxl-textglow{ 0%{text-shadow:0 0 10px rgba(45,212,191,.95),0 0 20px rgba(45,212,191,.45);} 25%{text-shadow:0 0 10px rgba(56,189,248,.95),0 0 20px rgba(56,189,248,.45);} 50%{text-shadow:0 0 10px rgba(167,139,250,.95),0 0 20px rgba(167,139,250,.45);} 75%{text-shadow:0 0 10px rgba(240,163,216,.95),0 0 20px rgba(240,163,216,.45);} 100%{text-shadow:0 0 10px rgba(45,212,191,.95),0 0 20px rgba(45,212,191,.45);}} /* ── responsive ───────────────────────────────────────────────────────────── */ @media(max-width:1240px){ .nav-links{display:none;} .menu-toggle{display:flex;} .nav-links.open{display:flex;position:absolute;top:100%;left:0;right:0;flex-direction:column; align-items:stretch;gap:0;background:var(--paper);border-bottom:1px solid var(--rule);padding:8px 24px 16px;} .nav-links.open a{padding:13px 0;border-bottom:1px solid var(--rule);font-size:15px;} .nav-cta{display:none;} .product-grid{grid-template-columns:repeat(2,1fr);} } @media(max-width:760px){ section{padding:64px 0;} .steps{grid-template-columns:1fr;} .hero-shelf{gap:14px;} .search-panel,.cart-panel,.account-panel{width:min(88vw,340px);} .footer-grid{grid-template-columns:1fr 1fr;} } @media(prefers-reduced-motion:reduce){ .btn:hover,.cats a:hover,.search-btn:hover,.cart-btn:hover,.account-btn:hover, .verify-band button:hover,.nav-links a:hover{transform:none;animation:none;} .logo-text .name span,.footer-logo span{animation:none;background-position:20% 50%;} } /* ═══ interior pages ══════════════════════════════════════════════════════ */ .page-header{padding:24px 0 6px;text-align:center;} .page-header h1{font-size:clamp(34px,5vw,52px);font-weight:700;margin-bottom:12px;} .page-header p{font-size:18px;color:var(--gray);max-width:640px;margin:0 auto;line-height:1.5;} .page-header .eyebrow{margin-bottom:8px;} /* long-form legal / prose */ section > .container > h2{font-size:clamp(22px,2.4vw,26px);margin:30px 0 10px;} section > .container > p{color:var(--soft);line-height:1.72;margin-bottom:13px;font-size:15.5px;} section > .container > p a{color:var(--link);} /* about */ .about-grid{display:grid;grid-template-columns:1.05fr .95fr;gap:44px;align-items:center;} .about-visual{background:var(--canvas);border-radius:28px;min-height:320px;display:grid;place-items:center;padding:28px;} .about-visual img{max-height:280px;width:auto;} .bmx-emblem{opacity:.9;} .section-head h2{margin-bottom:8px;} .features{display:grid;grid-template-columns:repeat(3,1fr);gap:18px;} .feature-card{background:var(--paper);border-radius:28px;padding:30px 26px;box-shadow:var(--shadow);} section.band .feature-card{background:var(--paper);} .feature-card .icon{font-size:24px;margin-bottom:12px;display:block;} .feature-card h3{font-size:19px;margin-bottom:8px;} .feature-card p{color:var(--gray);font-size:15px;line-height:1.55;} .stat-row{display:grid;grid-template-columns:repeat(3,auto);gap:clamp(20px,4vw,52px);justify-content:start;margin:26px 0;} .stat-row div{text-align:left;} .stat-row b,.stat-row strong{display:block;font-size:28px;color:var(--navy);font-weight:700;} .cta-banner{background:var(--navy);color:#fff;border-radius:28px;padding:46px 40px;text-align:center;} .cta-banner h2{color:#fff;} .cta-banner p{color:#c3cee0;margin:10px auto 22px;max-width:560px;} /* contact */ .contact-grid{display:grid;grid-template-columns:.9fr 1.1fr;gap:36px;align-items:start;} .contact-info-card{background:var(--paper);border-radius:28px;padding:32px 30px;box-shadow:var(--shadow);} .contact-form,form.contact-form,#contact-form{background:var(--paper);border-radius:28px;padding:32px 30px;box-shadow:var(--shadow);} .contact-info-card h3{font-size:19px;margin-bottom:18px;} .contact-item{display:flex;gap:12px;align-items:flex-start;padding:12px 0;border-bottom:1px solid var(--rule);} .contact-item:last-child{border-bottom:0;} .contact-item .icon{font-size:18px;} .contact-item strong{display:block;font-size:14px;color:var(--navy);} .contact-item span{font-size:14.5px;color:var(--gray);} .form-group{margin-bottom:16px;} .form-row{display:grid;grid-template-columns:1fr 1fr;gap:16px;} .form-group label{display:block;font-size:11.5px;letter-spacing:.09em;text-transform:uppercase; color:var(--gray);font-weight:700;margin-bottom:7px;} .form-group input,.form-group textarea,.form-group select{width:100%;font-family:inherit;font-size:15.5px; padding:13px 15px;border:1px solid var(--rule);border-radius:14px;background:var(--paper);color:var(--ink);} .form-group input:focus,.form-group textarea:focus{outline:none;border-color:var(--blue);box-shadow:0 0 0 4px rgba(0,113,227,.12);} .form-status{font-size:14px;margin-top:12px;} .disclaimer-box{background:var(--canvas);border:1px solid var(--rule);border-radius:20px; padding:20px 22px;font-size:13.5px;color:var(--gray);line-height:1.6;margin-top:26px;} .disclaimer-box strong{color:var(--navy);} @media(max-width:900px){ .about-grid,.contact-grid{grid-template-columns:1fr;} .features{grid-template-columns:1fr;} .form-row{grid-template-columns:1fr;} } /* ═══ tables (COA registry, transparency report) ══════════════════════════ */ .coa-table{width:100%;border-collapse:collapse;background:var(--paper);border-radius:24px;overflow:hidden;box-shadow:var(--shadow);} .coa-table th{background:var(--navy);color:#fff;text-align:left;font-size:11px;letter-spacing:.1em; text-transform:uppercase;font-weight:700;padding:14px 16px;} .coa-table td{padding:14px 16px;border-bottom:1px solid var(--rule);font-size:14.5px;color:var(--soft);} .coa-table tr:last-child td{border-bottom:0;} .coa-table tbody tr:nth-child(even){background:var(--canvas);} .coa-table a{color:var(--link);} .coa-table-head,.transp-head{display:flex;justify-content:space-between;align-items:end;gap:16px;flex-wrap:wrap;margin-bottom:18px;} .transp-summary{display:grid;grid-template-columns:repeat(auto-fit,minmax(180px,1fr));gap:16px;margin-bottom:30px;} .transp-summary > div{background:var(--paper);border-radius:24px;padding:24px;box-shadow:var(--shadow);} /* ═══ merch / supplies / pens cards ═══════════════════════════════════════ */ .merch-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));gap:20px;} .merch-card,.pen-card{background:var(--paper);border-radius:28px;overflow:hidden;box-shadow:var(--shadow); transition:transform .25s,box-shadow .3s;} .merch-card:hover,.pen-card:hover{transform:translateY(-4px);} .merch-thumb,.pen-card-media,.merch-main-img{background:var(--canvas);display:grid;place-items:center;padding:26px;} .merch-thumb img,.pen-card-media img,.merch-main-img img{max-height:230px;width:auto;} .merch-body,.pen-card-body{padding:22px 24px;} .merch-body h3,.pen-card-body h3{font-size:19px;margin-bottom:6px;} .merch-body p,.pen-card-body p{color:var(--gray);font-size:14.5px;line-height:1.55;} .merch-price,.pen-price{font-size:18px;font-weight:700;color:var(--navy);margin:12px 0;} .pen-card-foot{padding:0 24px 24px;} .merch-qty-input{width:56px;text-align:center;border:1px solid var(--rule);border-radius:10px;padding:8px;font-family:inherit;} .merch-qty-plus,.merch-qty-minus{width:34px;height:34px;border:1px solid var(--rule);background:var(--paper); border-radius:50%;cursor:pointer;font-size:16px;color:var(--navy);} .merch-color-row{display:flex;gap:8px;align-items:center;margin:12px 0;} .color-swatch{width:26px;height:26px;border-radius:50%;border:2px solid var(--rule);cursor:pointer;} .color-swatch.active{border-color:var(--navy);} .merch-color-name{font-size:13.5px;color:var(--gray);} .dose-label{font-size:12.5px;color:var(--gray);} /* ═══ bundle builder ══════════════════════════════════════════════════════ */ .builder{background:var(--paper);border-radius:28px;padding:30px;box-shadow:var(--shadow);} .builder-head{margin-bottom:18px;} .builder-grid{display:grid;grid-template-columns:1.3fr .7fr;gap:26px;align-items:start;} .builder-list{display:grid;gap:8px;max-height:460px;overflow-y:auto;padding-right:6px;} .builder-summary{background:var(--canvas);border-radius:22px;padding:22px;} .builder-total-row{display:flex;justify-content:space-between;font-size:14.5px;padding:7px 0;} .builder-grand{border-top:1px solid var(--rule);margin-top:8px;padding-top:12px;font-size:18px;font-weight:700;color:var(--navy);} .builder-empty,.builder-note{font-size:13.5px;color:var(--gray);} .cat-benefits{display:grid;grid-template-columns:repeat(auto-fit,minmax(230px,1fr));gap:18px;} .cat-benefits > *{background:var(--paper);border-radius:24px;padding:26px;box-shadow:var(--shadow);} @media(max-width:900px){.builder-grid{grid-template-columns:1fr;}} /* ═══ shop ════════════════════════════════════════════════════════════════ */ .goal-finder{background:var(--paper);border-radius:28px;padding:30px 32px;box-shadow:var(--shadow);margin-bottom:26px;} .goal-finder-head .eyebrow{background:var(--gold-soft);color:var(--gold);display:inline-block; padding:5px 12px;border-radius:999px;font-size:11px;} .goal-finder-head h2{font-size:23px;margin-top:10px;color:var(--navy);} .goal-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(180px,1fr));gap:10px;margin-top:16px;} .goal-btn{display:flex;align-items:center;gap:10px;background:var(--paper);border:1px solid var(--rule); border-radius:16px;padding:14px 16px;font-size:14.5px;font-weight:600;color:var(--navy);cursor:pointer; text-align:left;transition:transform .22s,border-color .25s,box-shadow .3s;} .goal-btn:hover{transform:translateY(-2px);animation:bxl-glow 4s linear infinite;} .goal-btn.active{background:var(--navy);color:#fff;border-color:var(--navy);} .goal-ic{font-size:1.15rem;line-height:1;} .goal-finder-note{margin-top:14px;font-size:14px;color:var(--gray);} .filter-bar{display:flex;gap:10px;flex-wrap:wrap;margin:8px 0 30px;} .filter-chip{border:1px solid var(--rule);background:var(--paper);border-radius:999px;padding:9px 18px; font-size:14px;font-weight:500;color:var(--soft);cursor:pointer;transition:transform .22s,color .25s;} .filter-chip:hover{transform:translateY(-2px);color:var(--ink);animation:bxl-glow 4.4s linear infinite;} .filter-chip.active{background:var(--navy);color:#fff;border-color:var(--navy);} .product-body{padding:0;} .product-footer{margin-top:10px;} .faq-item{background:var(--paper);border-radius:22px;padding:22px 24px;margin-bottom:12px;box-shadow:var(--shadow);} .faq-item h3,.faq-item strong{font-size:16.5px;color:var(--navy);} .faq-item p{color:var(--gray);font-size:15px;line-height:1.6;margin-top:8px;} .soldout-badge{position:absolute;top:14px;left:14px;background:var(--navy);color:#fff;font-size:10.5px; letter-spacing:.1em;text-transform:uppercase;font-weight:800;padding:6px 11px;border-radius:999px;} /* sold-out items stay full strength — the badge does the talking */ .is-soldout{opacity:1;} .btn-soldout{background:var(--rule) !important;color:var(--gray) !important;pointer-events:none;} /* ═══ product detail ══════════════════════════════════════════════════════ */ .product-detail-grid{display:grid;grid-template-columns:1fr 1fr;gap:48px;align-items:start;padding-top:8px;} .product-detail-frame{background:none;border:0;box-shadow:none;border-radius:0; display:grid;place-items:center;padding:0;min-height:440px;} .product-detail-frame img{max-height:430px;width:auto; filter:drop-shadow(0 26px 44px rgba(10,26,56,.22)) drop-shadow(0 4px 10px rgba(10,26,56,.10));} .pd-spin-hint{font-size:12px;color:var(--gray);text-align:center;margin-top:10px;} .pd-meta{display:grid;gap:2px;margin:20px 0;border-top:1px solid var(--rule);} .pd-meta > div{display:flex;justify-content:space-between;gap:16px;padding:11px 0;border-bottom:1px solid var(--rule);font-size:14.5px;} .pd-meta strong{color:var(--navy);font-weight:600;} .pd-meta span,.pd-meta a{color:var(--gray);} .pd-meta a{color:var(--link);} .dose-selector{margin:22px 0;} .dose-label{font-size:11.5px;letter-spacing:.09em;text-transform:uppercase;color:var(--gray);font-weight:700;margin-bottom:9px;display:block;} .dose-options,.freq-options{display:flex;gap:9px;flex-wrap:wrap;} .dose-options > *,.freq-options > *{border:1px solid var(--rule);background:var(--paper);border-radius:14px; padding:11px 16px;font-size:14.5px;cursor:pointer;transition:border-color .2s,transform .2s;} .dose-options > *.active,.freq-options > *.active{border-color:var(--navy);background:var(--navy);color:#fff;} .pd-total-row{display:flex;justify-content:space-between;align-items:baseline;margin:18px 0;} .pd-total-row strong{font-size:26px;color:var(--navy);} .pd-more-toggle{background:none;border:0;color:var(--link);font-size:14.5px;cursor:pointer;padding:0;margin-top:6px;} .pd-collapse{max-height:0;overflow:hidden;transition:max-height .4s ease;} .pd-collapse.pd-open{max-height:1400px;} .pd-longdesc{color:var(--soft);font-size:15px;line-height:1.7;margin-top:12px;} .pd-video-link{display:flex;gap:9px;align-items:center;color:var(--link);font-size:14.5px;margin-top:10px;} .addon-card,.addon-card-small{background:var(--paper);border:1px solid var(--rule);border-radius:22px; padding:18px 20px;margin-top:14px;display:flex;gap:14px;align-items:center;} .addon-icon{font-size:22px;} .addon-copy{flex:1;font-size:14px;color:var(--gray);} .addon-copy strong{display:block;color:var(--navy);font-size:15px;} .payment-badges{display:flex;gap:10px;flex-wrap:wrap;margin-top:18px;opacity:.75;} .pd-addcart-status{font-size:14px;color:var(--success);margin-top:10px;} .pd-wrapband,.pd-wrap-shade{display:none;} /* ═══ catalogue ═══════════════════════════════════════════════════════════ */ .catalogue-search-bar{background:var(--paper);border-radius:22px;padding:16px 18px;box-shadow:var(--shadow);margin-bottom:26px;} .catalogue-search-bar input{width:100%;border:1px solid var(--rule);border-radius:14px;padding:13px 16px;font-size:16px;font-family:inherit;} .catalogue-toc{background:var(--paper);border-radius:24px;padding:26px;box-shadow:var(--shadow);margin-bottom:34px;} .cat-toc-group{margin-bottom:18px;} .cat-toc-links{display:flex;flex-wrap:wrap;gap:8px;margin-top:8px;} .cat-toc-link{border:1px solid var(--rule);border-radius:999px;padding:7px 14px;font-size:13.5px;color:var(--soft);} .cat-toc-link:hover{border-color:var(--navy);color:var(--ink);} .cat-section-header{margin:44px 0 18px;} .cat-product{background:var(--paper);border-radius:28px;box-shadow:var(--shadow);margin-bottom:20px;} .cat-product-grid{display:grid;grid-template-columns:250px 1fr;gap:30px;align-items:start;padding:30px;max-width:1200px;} .cat-product-visual{background:var(--canvas);border-radius:22px;display:grid;place-items:center;padding:22px;} .cat-product-visual img{max-height:230px;width:auto;filter:none;} .cat-product-info h3{font-size:22px;margin-bottom:6px;} .cat-tagline{color:var(--gray);font-size:15px;margin-bottom:14px;} .cat-instructions,.cat-dosage,.cat-steps{font-size:14.5px;color:var(--soft);line-height:1.65;margin-top:12px;} .cat-side-effects{display:flex;gap:8px;flex-wrap:wrap;margin-top:14px;} .cat-side-pill{background:var(--canvas);border-radius:999px;padding:6px 13px;font-size:12.5px;color:var(--gray);} .cat-no-results{text-align:center;color:var(--gray);padding:40px 0;} .bmx-galaxy-sec,.bmx-galaxy-head,.bmx-galaxy-hint{display:none !important;} .bmx-grad{background:linear-gradient(92deg,var(--aqua),var(--sky) 45%,var(--violet)); -webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;color:transparent;} .bmx-kick{font-size:12.5px;letter-spacing:.14em;text-transform:uppercase;color:var(--gold);font-weight:700;} @media(max-width:900px){ .product-detail-grid{grid-template-columns:1fr;gap:28px;} .cat-product-grid{grid-template-columns:1fr;} } /* ═══════════════════════════════════════════════════════════════════════════ PASS 2 · 29 August 2026 Everything below was written after walking every page in a real browser. It covers the components the first pass left unstyled — the bundle stacks, the pen page, the COA register, the batch-verify form, the cart line items and the whole right-hand column of the product detail page. ═══════════════════════════════════════════════════════════════════════════ */ /* ── shared: a soft RGB ring used on anything hoverable ───────────────────── */ .bxl-ring:hover{animation:bxl-glow 4.6s linear infinite;} /* ═══ cart line items ═════════════════════════════════════════════════════ */ .cart-item{display:grid;grid-template-columns:44px 1fr auto;gap:12px;align-items:center; padding:12px 0;border-bottom:1px solid var(--rule);} .cart-item:last-child{border-bottom:0;} .cart-item img{width:44px;height:60px;object-fit:contain;border-radius:10px;background:var(--canvas);padding:4px;} .cart-item-info{min-width:0;} .cart-item-info strong{display:block;font-size:14px;font-weight:600;color:var(--navy); white-space:nowrap;overflow:hidden;text-overflow:ellipsis;} .cart-item-info span{display:block;font-size:12px;color:var(--gray);margin-top:2px;} .cart-item-right{text-align:right;display:flex;flex-direction:column;align-items:flex-end;gap:5px;} .cart-item-price{font-size:14px;font-weight:700;color:var(--navy);} .cart-item-remove{border:0;background:none;padding:0;cursor:pointer; font-size:11px;letter-spacing:.05em;text-transform:uppercase;font-weight:600;color:var(--gray); transition:color .2s;} .cart-item-remove:hover{color:#c0392b;} /* ═══ bundles · stack cards ═══════════════════════════════════════════════ */ .stack-grid{display:grid;gap:22px;} .stack-card{display:grid;grid-template-columns:240px 1fr;gap:0;background:var(--paper); border:1px solid transparent;border-radius:28px;overflow:hidden;box-shadow:var(--shadow); transition:transform .25s cubic-bezier(.2,.8,.2,1),box-shadow .3s;} .stack-card:hover{transform:translateY(-4px);animation:bxl-glow 5s linear infinite;} .stack-side{background:var(--canvas);padding:30px 26px;display:flex;flex-direction:column;gap:8px;} .stack-icon{font-size:30px;line-height:1;} .stack-persona-label{font-size:11.5px;letter-spacing:.1em;text-transform:uppercase; font-weight:800;color:var(--gold);} .stack-persona-desc{font-size:14px;color:var(--gray);line-height:1.55;margin:0;} .stack-body{padding:28px 30px;display:flex;flex-direction:column;} .stack-title-row{display:flex;align-items:center;gap:12px;flex-wrap:wrap;margin-bottom:4px;} .stack-title{font-size:22px;font-weight:700;color:var(--navy);letter-spacing:-.018em;} .stack-save-badge{background:var(--gold-soft);color:var(--gold);border-radius:999px; padding:5px 12px;font-size:11.5px;font-weight:700;letter-spacing:.02em;white-space:nowrap;} .stack-goal{font-size:13px;color:var(--gray);margin:2px 0 14px;} .stack-includes{display:flex;flex-wrap:wrap;gap:10px;margin-bottom:20px;} .stack-chip{display:flex;align-items:center;gap:9px;background:var(--canvas); border-radius:16px;padding:8px 14px 8px 8px;font-size:13.5px;font-weight:600;color:var(--navy);} /* the vials inside a chip are thumbnails, not hero shots */ .stack-chip img{width:26px;height:38px;object-fit:contain;flex:none;} .stack-chip span{color:var(--gray);font-weight:500;margin-left:2px;} .stack-footer{margin-top:auto;display:flex;align-items:center;gap:16px;flex-wrap:wrap; padding-top:18px;border-top:1px solid var(--rule);} .stack-price-block{display:flex;align-items:baseline;gap:10px;margin-right:auto;} .stack-price-old{font-size:15px;color:var(--gray);text-decoration:line-through;} .stack-price-new{font-size:27px;font-weight:700;color:var(--navy);letter-spacing:-.02em;} .stack-add-btn{padding:12px 24px;font-size:15px;} .stack-status{flex-basis:100%;font-size:13.5px;color:var(--gold);margin:0;} .stack-status:empty{display:none;} @media(max-width:820px){.stack-card{grid-template-columns:1fr;} .stack-side{flex-direction:row;align-items:center;gap:14px;padding:20px 24px;} .stack-persona-desc{display:none;}} /* ═══ pens ════════════════════════════════════════════════════════════════ */ /* the pen photo is a product shot, not a billboard — it shares the row */ .pen-hero{display:grid;grid-template-columns:1.05fr .95fr;gap:42px;align-items:center; background:var(--paper);border-radius:32px;padding:34px;box-shadow:var(--shadow);} .pen-hero-media{background:var(--canvas);border-radius:24px;display:grid;place-items:center;padding:24px;} .pen-hero-media img{max-height:330px;width:auto;border-radius:12px;} .pen-hero-body h2{font-size:clamp(26px,3vw,34px);margin-bottom:12px;} .pen-hero-body p{color:var(--gray);font-size:16px;line-height:1.6;margin-bottom:10px;} .pen-steps{list-style:none;counter-reset:penstep;display:grid;gap:12px;margin:20px 0 0;padding:0;} .pen-steps li{counter-increment:penstep;position:relative;padding-left:42px; font-size:15px;color:var(--soft);line-height:1.55;} .pen-steps li::before{content:counter(penstep);position:absolute;left:0;top:-1px; width:28px;height:28px;border-radius:50%;background:var(--navy);color:#fff; display:grid;place-items:center;font-size:13px;font-weight:700;} .pen-steps li strong{color:var(--navy);} .pen-pricing-note{font-size:14px;color:var(--gray);margin-top:18px; background:var(--canvas);border-radius:16px;padding:14px 18px;} .pen-hardware-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(280px,1fr));gap:20px;} .pen-card{display:flex;flex-direction:column;border:1px solid transparent;} .pen-card:hover{animation:bxl-glow 5s linear infinite;} .pen-card-media{min-height:230px;} .pen-card-media img{max-height:190px;} .pen-card-body{flex:1;} .pen-card-foot{display:flex;align-items:center;gap:14px;flex-wrap:wrap;} .pen-price{margin:0;margin-right:auto;} .pen-add{padding:11px 22px;font-size:14.5px;} .pen-status{flex-basis:100%;font-size:13px;color:var(--gold);margin:0;} .pen-status:empty{display:none;} @media(max-width:900px){.pen-hero{grid-template-columns:1fr;gap:26px;padding:24px;}} /* ═══ COA register ════════════════════════════════════════════════════════ */ /* .coa-table here is a div-grid, not a — five aligned columns. */ .coa-table{background:var(--paper);border-radius:26px;box-shadow:var(--shadow); overflow:hidden;border-collapse:separate;} .coa-table-head,.coa-row{display:grid; grid-template-columns:minmax(200px,2.1fr) 130px minmax(150px,1.4fr) 110px 150px; gap:18px;align-items:center;padding:14px 24px;} .coa-table-head{background:var(--navy);margin-bottom:0;} .coa-table-head span{color:#fff;font-size:11px;letter-spacing:.1em;text-transform:uppercase;font-weight:700;} .coa-row{border-top:1px solid var(--rule);color:var(--soft);font-size:14.5px; transition:background .18s;} .coa-row:hover{background:var(--canvas);} .coa-row-name{display:flex;align-items:center;gap:14px;font-weight:600;color:var(--navy);font-size:15px;} /* fixed box so the row height never moves while a thumbnail decodes */ .coa-row-name img{width:34px;height:52px;object-fit:contain;flex:none; background:var(--canvas);border-radius:8px;padding:3px;} .coa-row-purity{font-family:ui-monospace,Menlo,monospace;font-size:14px;color:var(--navy);font-weight:600;} .coa-row-lab{font-size:13.5px;color:var(--gray);} .coa-badge{display:inline-block;background:#E7F6EE;color:#1B7F4B;border-radius:999px; padding:5px 12px;font-size:11px;letter-spacing:.06em;text-transform:uppercase;font-weight:800;} .coa-badge-pending{background:var(--gold-soft);color:var(--gold);} .coa-badge-pass{background:#E7F6EE;color:#1B7F4B;} .coa-row-link{color:var(--link);font-size:14px;font-weight:600;text-align:right;white-space:nowrap;} .coa-row-pending .coa-row-purity,.coa-row-pending .coa-row-lab{color:var(--gray);} @media(max-width:980px){ .coa-table-head{display:none;} .coa-row{grid-template-columns:1fr auto;gap:6px 14px;padding:16px 20px;} .coa-row-name{grid-column:1;grid-row:1;} .coa-row-status{grid-column:2;grid-row:1;text-align:right;} .coa-row-purity{grid-column:1;grid-row:2;} .coa-row-lab{display:none;} .coa-row-link{grid-column:2;grid-row:2;} } /* ═══ verify a batch ══════════════════════════════════════════════════════ */ .verify-box{background:var(--paper);border-radius:30px;box-shadow:var(--shadow); padding:44px 40px;max-width:660px;margin:0 auto;text-align:center;} .verify-input-row{display:flex;gap:12px;justify-content:center;margin:6px 0 14px;} .verify-input-row input{flex:1;min-width:0;font-family:ui-monospace,Menlo,monospace; font-size:17px;letter-spacing:.06em;text-align:center;padding:17px 20px; border:1.5px solid var(--rule);border-radius:18px;background:var(--canvas);color:var(--ink); transition:border-color .2s,box-shadow .25s,background .2s;} .verify-input-row input::placeholder{letter-spacing:.02em;color:#9aa3ae;font-family:inherit;} .verify-input-row input:focus{outline:none;background:var(--paper); border-color:var(--blue);box-shadow:0 0 0 5px rgba(0,113,227,.13);} .verify-input-row .btn,.verify-input-row button{padding:17px 34px;font-size:16px;font-weight:600; border:1px solid transparent;border-radius:18px;background:var(--blue);color:#fff;cursor:pointer; transition:transform .26s cubic-bezier(.2,.8,.2,1),box-shadow .3s;} .verify-input-row button:hover{transform:translateY(-2px);animation:bxl-glow 4s linear infinite;} .verify-hint{font-size:13.5px;color:var(--gray);margin:0;} .vb-card{margin-top:26px;text-align:left;background:var(--canvas);border-radius:22px;padding:26px;} .vb-note{font-size:13.5px;color:var(--gray);margin-top:12px;line-height:1.55;} .vb-ok{color:#1B7F4B;font-weight:600;} .vb-pending{color:var(--gold);font-weight:600;} .vb-table{width:100%;border-collapse:collapse;margin-top:10px;} .vb-table td,.vb-table th{padding:10px 0;border-bottom:1px solid var(--rule);font-size:14.5px;text-align:left;} .vb-table th{color:var(--navy);font-weight:600;width:40%;} .vb-table td{color:var(--soft);} .coa-doc{background:var(--paper);border-radius:26px;box-shadow:var(--shadow);padding:32px;margin-top:26px;} .coa-doc-head{display:flex;justify-content:space-between;align-items:center;gap:18px; flex-wrap:wrap;padding-bottom:18px;border-bottom:1px solid var(--rule);} .coa-doc-logo{font-size:18px;font-weight:800;color:var(--navy);} .coa-doc-purity{font-size:30px;font-weight:700;color:var(--navy);letter-spacing:-.02em;} .coa-doc-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(190px,1fr));gap:18px;padding:22px 0;} .coa-doc-grid > div{background:var(--canvas);border-radius:18px;padding:16px 18px;} .coa-doc-footer{border-top:1px solid var(--rule);padding-top:16px;font-size:13px;color:var(--gray);line-height:1.6;} .coa-comp-table{width:100%;border-collapse:collapse;} .coa-comp-head th{background:var(--canvas);text-align:left;font-size:11px;letter-spacing:.08em; text-transform:uppercase;color:var(--gray);font-weight:700;padding:11px 14px;} .coa-comp-row td{padding:12px 14px;border-bottom:1px solid var(--rule);font-size:14.5px;color:var(--soft);} .coa-template-notice{background:var(--gold-soft);color:#7a5a12;border-radius:18px; padding:14px 18px;font-size:13.5px;line-height:1.55;margin-top:20px;} @media(max-width:620px){ .verify-box{padding:30px 22px;} .verify-input-row{flex-direction:column;} } /* ═══ product detail · right-hand column ══════════════════════════════════ */ .product-detail-info > .product-tag{display:inline-block;background:var(--gold-soft);color:var(--gold); border-radius:999px;padding:5px 13px;font-size:11px;letter-spacing:.1em; text-transform:uppercase;font-weight:800;} .product-detail-price{font-size:15px;color:var(--gray);margin:4px 0 14px;} .product-detail-price strong,.product-detail-price b{font-size:30px;font-weight:700; color:var(--navy);letter-spacing:-.02em;margin-right:8px;} /* volume tiers — four equal tiles, not a run-on sentence */ .volume-discounts{display:grid;grid-template-columns:repeat(4,1fr);gap:9px;margin:16px 0 20px;} .vol-tile{display:flex;flex-direction:column;align-items:center;gap:3px;cursor:pointer; background:var(--paper);border:1.5px solid var(--rule);border-radius:18px;padding:13px 8px; transition:border-color .2s,transform .22s cubic-bezier(.2,.8,.2,1),box-shadow .25s;} .vol-tile:hover{transform:translateY(-2px);border-color:var(--navy);} .vol-tile.active{border-color:var(--blue);background:rgba(0,113,227,.05); box-shadow:0 0 0 3px rgba(0,113,227,.10);} .vol-units{font-size:12px;font-weight:700;color:var(--navy);letter-spacing:.01em;} .vol-price{font-size:15px;font-weight:700;color:var(--ink);display:flex;align-items:baseline;gap:3px;} .vol-price small{font-size:10.5px;font-weight:500;color:var(--gray);} .vol-save{font-size:10px;font-weight:800;letter-spacing:.06em;text-transform:uppercase;color:#1B7F4B;} .vol-save-none{color:transparent;} @media(max-width:520px){.volume-discounts{grid-template-columns:repeat(2,1fr);}} /* dosage pills */ .dose-options > *,.freq-options > *{font-weight:600;color:var(--navy);} .dose-options > *:hover,.freq-options > *:hover{transform:translateY(-2px);border-color:var(--navy);} /* add-ons */ .addon-card{border-radius:20px;padding:15px 18px;gap:12px;} .addon-copy span{display:block;font-size:13px;color:var(--gray);line-height:1.45;} .addon-separate-link{display:inline-block;font-size:12.5px;color:var(--link);margin-top:3px;} .addon-toggle{display:flex;align-items:center;gap:8px;cursor:pointer;flex:none; background:var(--canvas);border-radius:999px;padding:8px 14px;font-size:13px; font-weight:700;color:var(--navy);transition:background .2s;} .addon-toggle:hover{background:#e9ebf1;} .addon-toggle input{accent-color:var(--blue);width:15px;height:15px;cursor:pointer;} /* one-time vs subscribe */ .purchase-options{display:grid;gap:10px;margin:20px 0;} .purchase-option{display:flex;align-items:center;gap:13px;cursor:pointer; background:var(--paper);border:1.5px solid var(--rule);border-radius:20px;padding:15px 18px; transition:border-color .2s,box-shadow .25s,background .2s;} .purchase-option:hover{border-color:var(--navy);} .purchase-option.active{border-color:var(--blue);background:rgba(0,113,227,.045); box-shadow:0 0 0 3px rgba(0,113,227,.10);} .purchase-option input[type=radio]{accent-color:var(--blue);width:17px;height:17px;flex:none;cursor:pointer;} .po-body{flex:1;min-width:0;} .po-body strong{display:block;font-size:15px;font-weight:600;color:var(--navy);} .po-body span{display:block;font-size:13px;color:var(--gray);line-height:1.45;margin-top:2px;} .po-price{font-size:17px;font-weight:700;color:var(--navy);white-space:nowrap;} .po-price s{font-size:13px;font-weight:500;color:var(--gray);margin-left:5px;} /* subscription frequency */ .delivery-frequency{margin:0 0 20px;background:var(--canvas);border-radius:20px;padding:18px 20px;} .freq-benefits{list-style:none;display:grid;gap:6px;margin:14px 0 0;padding:0;} .freq-benefits li{position:relative;padding-left:22px;font-size:13.5px;color:var(--soft);} .freq-benefits li::before{content:"✓";position:absolute;left:0;color:#1B7F4B;font-weight:800;font-size:12px;} .freq-popular{background:var(--gold-soft);color:var(--gold);border-radius:999px; padding:2px 8px;font-size:10px;font-weight:800;letter-spacing:.06em;text-transform:uppercase;margin-left:6px;} /* quantity */ .qty-row{display:flex;align-items:center;justify-content:space-between;gap:16px; padding:14px 0;border-top:1px solid var(--rule);border-bottom:1px solid var(--rule);margin-bottom:4px;} .qty-row .dose-label{margin:0;} .qty-stepper{display:flex;align-items:center;gap:0;border:1.5px solid var(--rule); border-radius:999px;overflow:hidden;background:var(--paper);} .qty-stepper button{width:40px;height:40px;border:0;background:none;cursor:pointer; font-size:19px;line-height:1;color:var(--navy);transition:background .18s;} .qty-stepper button:hover{background:var(--canvas);} .qty-stepper input{width:54px;height:40px;border:0;text-align:center;font-family:inherit; font-size:15.5px;font-weight:600;color:var(--navy);background:none; -moz-appearance:textfield;appearance:textfield;} .qty-stepper input::-webkit-outer-spin-button, .qty-stepper input::-webkit-inner-spin-button{-webkit-appearance:none;margin:0;} .pd-total-row{padding:16px 0 4px;margin:0;border-bottom:1px solid var(--rule);} .pd-total-row span{font-size:15px;color:var(--gray);} .pd-total-row strong{font-size:30px;} /* payment badges read as chips, not a paragraph */ .payment-badges{opacity:1;gap:7px;margin-top:20px;} .payment-badges span{background:var(--canvas);border-radius:8px;padding:6px 11px; font-size:11.5px;font-weight:600;color:var(--gray);letter-spacing:.01em;} .pd-spin-hint{color:#9aa3ae;font-size:11.5px;letter-spacing:.04em;} .pd-more-toggle{font-weight:600;} .pd-meta{margin-top:26px;} /* ═══ catalogue · hover treatment on the peptide entries ══════════════════ */ .cat-product{border:1px solid transparent;transition:transform .25s cubic-bezier(.2,.8,.2,1),box-shadow .3s;} .cat-product:hover{transform:translateY(-4px);animation:bxl-glow 5s linear infinite;} .cat-product-info h3{transition:color .25s;} .cat-product:hover .cat-product-info h3{animation:bxl-textglow 4.5s linear infinite;} .cat-toc-link{transition:transform .22s,color .25s;} .cat-toc-link:hover{transform:translateY(-2px);animation:bxl-glow 4.4s linear infinite;} .cat-section-header h2:hover{animation:bxl-textglow 4.5s linear infinite;} /* ═══ about · values + team ═══════════════════════════════════════════════ */ .values-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));gap:20px;} .values-grid > *{background:var(--paper);border-radius:26px;padding:28px 26px;box-shadow:var(--shadow);} .values-grid h3{font-size:18px;margin-bottom:8px;} .values-grid p{color:var(--gray);font-size:15px;line-height:1.6;} .team-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:20px;} .team-card{background:var(--paper);border-radius:26px;padding:30px 26px;text-align:center;box-shadow:var(--shadow);} .team-avatar{width:66px;height:66px;border-radius:50%;background:var(--canvas);margin:0 auto 14px; display:grid;place-items:center;font-size:26px;} .team-card h3{font-size:17px;margin-bottom:4px;} .team-card p{color:var(--gray);font-size:14px;line-height:1.55;} /* ═══ merch / supplies ════════════════════════════════════════════════════ */ .merch-card,.simple-merch-card{border:1px solid transparent;} .merch-card:hover,.simple-merch-card:hover{animation:bxl-glow 5s linear infinite;} .simple-merch-card{background:var(--paper);border-radius:28px;overflow:hidden;box-shadow:var(--shadow); transition:transform .25s cubic-bezier(.2,.8,.2,1),box-shadow .3s;display:flex;flex-direction:column;} .simple-merch-card:hover{transform:translateY(-4px);} .merch-footer{display:flex;align-items:center;gap:14px;flex-wrap:wrap;padding:0 24px 24px;} .merch-price{margin:0;margin-right:auto;} .merch-add-btn,.merch-view-btn{padding:11px 22px;font-size:14.5px;} .merch-status,.pd-addcart-status{flex-basis:100%;font-size:13px;color:var(--gold);margin:0;} .merch-status:empty,.pd-addcart-status:empty{display:none;} .merch-qty{display:flex;align-items:center;gap:6px;} .size-btn{border:1px solid var(--rule);background:var(--paper);border-radius:12px; padding:8px 14px;font-size:13.5px;font-weight:600;color:var(--navy);cursor:pointer;transition:all .2s;} .size-btn.active{background:var(--navy);color:#fff;border-color:var(--navy);} .merch-size-row{display:flex;gap:8px;flex-wrap:wrap;margin:12px 0;} /* ═══ bundle builder rows ═════════════════════════════════════════════════ */ .builder-list{max-height:520px;} .builder-item{display:grid;grid-template-columns:20px 24px 1fr auto;gap:12px;align-items:center; padding:9px 12px;border-radius:14px;cursor:pointer;transition:background .16s;} .builder-item:hover{background:var(--canvas);} .builder-item input[type=checkbox]{accent-color:var(--blue);width:17px;height:17px;cursor:pointer;} .builder-item img{width:24px;height:36px;object-fit:contain;} .builder-item-name{font-size:14.5px;font-weight:600;color:var(--navy); display:flex;align-items:center;gap:8px;min-width:0;} .builder-soldout{font-style:normal;font-size:10px;letter-spacing:.08em;text-transform:uppercase; font-weight:800;background:var(--rule);color:var(--gray);border-radius:999px;padding:3px 8px;flex:none;} .builder-dose{font-family:inherit;font-size:13px;color:var(--soft);background:var(--paper); border:1px solid var(--rule);border-radius:10px;padding:7px 9px;cursor:pointer;max-width:170px;} .builder-dose:focus{outline:none;border-color:var(--blue);} .builder-item input:disabled ~ *,.builder-item.is-soldout .builder-dose{cursor:not-allowed;} .builder-sel-row{display:flex;justify-content:space-between;gap:14px;font-size:14px; color:var(--soft);padding:7px 0;border-bottom:1px solid var(--rule);} .builder-sel-row:last-child{border-bottom:0;} .builder-sel-row small{color:var(--gray);font-size:12.5px;} .builder-sel-row span:last-child{font-weight:600;color:var(--navy);white-space:nowrap;} .builder-save{color:#1B7F4B;} #builder-add{width:100%;margin-top:14px;} #builder-add:disabled{background:var(--rule);color:var(--gray);cursor:not-allowed;transform:none;animation:none;} .builder-list::-webkit-scrollbar{width:8px;} .builder-list::-webkit-scrollbar-thumb{background:var(--rule);border-radius:8px;} .verify-kicker{display:block;font-size:11.5px;letter-spacing:.14em;text-transform:uppercase; color:var(--gold);font-weight:700;margin-bottom:8px;} .verify-title{font-size:26px;font-weight:700;margin-bottom:20px;} .verify-foot{margin-top:22px;padding-top:18px;border-top:1px solid var(--rule); display:flex;gap:8px;justify-content:center;flex-wrap:wrap;font-size:14px;color:var(--gray);} .verify-foot a{color:var(--link);font-weight:600;} .team-avatar{font-size:20px;font-weight:800;color:var(--navy);letter-spacing:.02em;} .team-card span{display:block;font-size:14px;color:var(--gray);} .team-card a{color:var(--link);font-size:14px;} /* ═══ shop card internals ═════════════════════════════════════════════════ */ /* position:relative is what keeps the SOLD OUT badge inside its own card — without it the badge anchors to the viewport and lands in the top corner. */ .product-card{position:relative;display:flex;flex-direction:column;} .product-body{display:flex;flex-direction:column;flex:1;} .product-card p{font-size:14px;color:var(--gray);line-height:1.5;margin-top:6px;} .product-footer{margin-top:auto;padding-top:16px;display:flex;flex-direction:column; align-items:center;gap:6px;} .product-price{margin:0;} .product-link{font-size:13.5px;} .product-thumb{flex:none;} .product-detail-price{display:flex;align-items:baseline;gap:10px;} .product-detail-price span{font-size:14.5px;color:var(--gray);} .cart-clear-btn{display:block;width:100%;margin-top:10px;border:0;background:none;cursor:pointer; font-size:12px;letter-spacing:.06em;text-transform:uppercase;font-weight:600;color:var(--gray); padding:6px 0;transition:color .2s;} .cart-clear-btn:hover{color:#C0392B;} .cart-checkout-btn{padding:14px 26px;} /* on the supplies/merch pages a .product-card sits in the same row as the .simple-merch-card tiles — give it the same resting card treatment so the row does not read as one floating item beside three raised ones */ .merch-grid .product-card{box-shadow:var(--shadow);} /* ═══════════════════════════════════════════════════════════════════════════ PASS 3 · hover-spin vials, merch repair, COA header, bundle panel ═══════════════════════════════════════════════════════════════════════════ */ /* ── the spin canvas sits exactly over its photograph ────────────────────── */ .hero-vial,.cat-product-visual{position:relative;} .vial-spin-cv{position:absolute;inset:0;width:100%;height:100%; display:none;pointer-events:none;z-index:2;} .vial-spin-cv.live{display:block;} /* while the canvas is painting it owns the vial — hiding the underneath stops the still photograph showing through the turning label */ .is-spinning > img{visibility:hidden;} .hero-vial{display:block;cursor:pointer;transition:transform .3s cubic-bezier(.2,.8,.2,1);} .hero-vial img{height:min(238px,25vw);width:auto; filter:drop-shadow(0 22px 34px rgba(10,26,56,.18));} .hero-vial.is-center img{height:min(272px,29vw);} .hero-vial:hover{transform:translateY(-4px);} /* the canvas draws its own drop shadow, so the CSS one would double up */ .hero-vial.is-spinning{filter:drop-shadow(0 22px 34px rgba(10,26,56,.18));} /* ── COA register header ─────────────────────────────────────────────────── */ /* The head row and the data rows must share one column template, or the labels float free of the values they name. */ .coa-table-head{padding:15px 24px;} .coa-table-head span{display:block;color:#fff;font-size:11px;letter-spacing:.11em; text-transform:uppercase;font-weight:800;line-height:1.2;} .coa-table-head span:nth-child(5){text-align:right;} .coa-row-status{display:block;} /* ── bundles: the persona panel reads as it always did ───────────────────── */ .stack-side{background:var(--navy);color:#fff;justify-content:center;} .stack-side .stack-persona-label{color:var(--gold-soft);} .stack-side .stack-persona-desc{color:#c3cee0;} /* ═══ merch ═══════════════════════════════════════════════════════════════ */ /* The On Model / Flat Lay toggle is absolutely positioned. Without a positioned thumb to anchor to it fell back to the card and landed on top of the product name — which is what put controls over the wording. */ .merch-thumb,.product-thumb{position:relative;} /* apparel renders are cutouts on white; a grey plate behind them reads as a box drawn around the garment */ .merch-card .merch-thumb,.merch-card .product-thumb{background:none;padding:18px 18px 14px;} .merch-card .merch-thumb img,.merch-main-img{max-height:230px;width:auto;margin:0 auto; object-fit:contain;} .merch-view-toggle{position:absolute;bottom:8px;left:50%;transform:translateX(-50%); display:flex;gap:2px;background:rgba(10,26,56,.62);backdrop-filter:blur(6px); -webkit-backdrop-filter:blur(6px);border-radius:999px;padding:3px;z-index:3;} .merch-view-btn{border:0;background:none;cursor:pointer;font-family:inherit; color:rgba(255,255,255,.78);font-weight:700;font-size:11px;letter-spacing:.02em; padding:6px 13px;border-radius:999px;transition:background .16s,color .16s;} .merch-view-btn.active{background:#fff;color:var(--navy);} .merch-view-btn:hover{color:#fff;animation:none;} /* one consistent card: image block on top, body stretching, footer pinned */ .merch-grid{align-items:stretch;} .merch-card{display:flex;flex-direction:column;background:var(--paper); border-radius:28px;box-shadow:var(--shadow);overflow:hidden; transition:transform .25s cubic-bezier(.2,.8,.2,1),box-shadow .3s;} .merch-card:hover{transform:translateY(-4px);} .merch-card .product-body{flex:1;display:flex;flex-direction:column;padding:0 24px 4px;} .merch-card h3{font-size:17.5px;line-height:1.25;margin:5px 0 4px;} .merch-card .product-body > p{font-size:13.5px;line-height:1.5;margin-bottom:14px;} .merch-card .merch-footer{margin-top:auto;} .merch-color-row{display:flex;flex-direction:column;align-items:flex-start;gap:7px;margin:4px 0 12px;} .merch-colors{display:flex;gap:7px;flex-wrap:wrap;} .color-swatch{width:24px;height:24px;border-radius:50%;border:1.5px solid var(--rule); background-size:cover;background-position:center;cursor:pointer;padding:0; transition:border-color .18s,transform .18s;} .color-swatch:hover{transform:scale(1.08);} .color-swatch.active{border-color:var(--navy);box-shadow:0 0 0 2px rgba(10,26,56,.14);} .merch-size-row{display:flex;flex-direction:column;align-items:flex-start;gap:7px;margin:0 0 14px;} .merch-sizes{display:flex;gap:6px;flex-wrap:wrap;} .size-btn{padding:7px 12px;font-size:13px;border-radius:11px;} .merch-qty{margin-right:auto;} .merch-footer{display:flex;align-items:center;gap:12px;flex-wrap:wrap;padding:0 24px 22px;} .merch-card .merch-price{font-size:17px;flex-basis:100%;margin:0 0 6px;} .merch-add-btn{flex:1;min-width:120px;} .merch-qty-input{width:44px;padding:7px;font-size:14px;} .merch-qty-plus,.merch-qty-minus{width:30px;height:30px;font-size:15px;} @media(max-width:900px){.merch-grid{grid-template-columns:repeat(auto-fit,minmax(240px,1fr));}} /* ═══ about · the lab footage in place of the logo plate ══════════════════ */ .about-video{padding:0;overflow:hidden;background:var(--navy);position:relative; min-height:340px;border-radius:28px;box-shadow:var(--shadow);} .about-video video{width:100%;height:100%;min-height:340px;object-fit:cover;display:block;} /* a whisper of a scrim so the footage sits in the page rather than shouting */ .about-video::after{content:"";position:absolute;inset:0;pointer-events:none; background:linear-gradient(180deg,rgba(10,26,56,.10),rgba(10,26,56,0) 38%);} @media(max-width:900px){.about-video,.about-video video{min-height:250px;}} /* .product-thumb is height-locked for the shop grid; apparel renders are taller than that, so on a merch card the image overflowed its box and came down on top of the product name. Let the block size to its content here. */ .merch-card .product-thumb,.merch-card .merch-thumb{height:auto;min-height:240px; display:grid;place-items:center;margin-bottom:0;} .merch-card .product-thumb img,.merch-card .merch-thumb img{max-height:212px;} .merch-card{text-align:left;} .merch-card .product-tag{display:block;margin-bottom:2px;} .merch-card .merch-price{flex-basis:auto;margin:0 auto 0 0;} .merch-card .soldout-badge{top:12px;left:12px;} .merch-card .merch-view-toggle{bottom:6px;} .merch-card .merch-status{text-align:left;} /* ── catalogue detail entries ────────────────────────────────────────────── */ .cat-section-header .container{padding:0 24px;} .cat-product-info h2{font-size:26px;margin-bottom:4px;} .cat-product-info h2 small{font-size:17px;font-weight:600;color:var(--gray);margin-left:6px;} .cat-product-info h4{font-size:12px;letter-spacing:.1em;text-transform:uppercase; color:var(--gold);font-weight:800;margin:20px 0 7px;} /* the benefit list is a card grid, so the list markers have nothing to mark */ .cat-benefits{list-style:none;padding:0;margin:0;} .cat-benefits li{background:var(--canvas);border-radius:18px;padding:18px 20px;box-shadow:none;} .cat-benefits strong{display:block;font-size:14.5px;color:var(--navy);margin-bottom:5px;} .cat-benefits span{font-size:13.5px;color:var(--gray);line-height:1.55;} .cat-instructions,.cat-dosage,.cat-steps{background:var(--canvas);border-radius:18px;padding:16px 20px;} .cat-product-visual{align-self:start;position:sticky;top:96px;} /* ── COA register search ─────────────────────────────────────────────────── */ .coa-search{display:flex;align-items:center;gap:11px;background:var(--paper); border:1px solid var(--rule);border-radius:18px;padding:4px 18px 4px 16px; box-shadow:var(--shadow);margin-bottom:18px;transition:border-color .2s,box-shadow .25s;} .coa-search:focus-within{border-color:var(--blue);box-shadow:0 0 0 4px rgba(0,113,227,.12);} .coa-search svg{color:var(--gray);flex:none;} .coa-search input{flex:1;min-width:0;border:0;background:none;outline:none; font-family:inherit;font-size:15.5px;color:var(--ink);padding:14px 0;} .coa-search input::placeholder{color:#9aa3ae;} .coa-search input::-webkit-search-cancel-button{cursor:pointer;} .coa-count{flex:none;font-size:12px;letter-spacing:.05em;text-transform:uppercase; font-weight:700;color:var(--gray);white-space:nowrap;} .coa-empty{text-align:center;color:var(--gray);font-size:15px;padding:34px 20px;} @media(max-width:620px){.coa-count{display:none;}} /* ── product detail: start the page right under the header rule ──────────── */ .pd-back{padding-top:14px;} .pd-back a{color:var(--gray);font-size:14px;transition:color .2s;} .pd-back a:hover{color:var(--ink);} .pd-section{padding:10px 0 60px;} /* ── COA search suggestions ──────────────────────────────────────────────── */ .coa-search-wrap{position:relative;z-index:30;margin-bottom:18px;} .coa-search-wrap .coa-search{margin-bottom:0;} .coa-suggest{position:absolute;top:calc(100% + 8px);left:0;right:0;z-index:40; list-style:none;margin:0;padding:6px;background:var(--paper); border:1px solid var(--rule);border-radius:20px;box-shadow:0 22px 60px rgba(16,32,64,.16); max-height:392px;overflow-y:auto;} .coa-suggest li{display:grid;grid-template-columns:22px 1fr auto;gap:12px;align-items:center; padding:9px 12px;border-radius:14px;cursor:pointer;transition:background .14s;} .coa-suggest li:hover,.coa-suggest li.is-active{background:var(--canvas);} .coa-suggest img{width:22px;height:34px;object-fit:contain;} .cs-name{font-size:14.5px;font-weight:600;color:var(--navy); white-space:nowrap;overflow:hidden;text-overflow:ellipsis;} .cs-name mark{background:rgba(0,113,227,.14);color:var(--blue-deep); font-weight:800;border-radius:3px;padding:0 1px;} .cs-purity{font-family:ui-monospace,Menlo,monospace;font-size:12.5px;color:var(--gray);white-space:nowrap;} .cs-more{display:block;text-align:center;font-size:12px;letter-spacing:.05em; text-transform:uppercase;font-weight:700;color:var(--gray);padding:9px 0 5px;cursor:default;} .coa-suggest::-webkit-scrollbar{width:8px;} .coa-suggest::-webkit-scrollbar-thumb{background:var(--rule);border-radius:8px;} /* ═══ product detail on a phone ═══════════════════════════════════════════ The frame is sticky so the vial holds position beside the buying column on a wide screen. Once the grid collapses to one column that sticky box sat on top of the tag and the product name instead of above them, and its 460px min-height opened a dead band before the vial even started. Both are desktop-only behaviours, so they are switched off here. */ @media(max-width:900px){ .product-detail-grid{grid-template-columns:1fr;gap:16px;padding-top:0;} .product-detail-visual{margin:0;} .product-detail-frame{position:static;top:auto;min-height:0;padding:0;} /* sized against the viewport so the whole vial is in frame on any phone */ .product-detail-frame img{max-height:min(44vh,330px);} .pd-spin-hint{margin-top:8px;position:relative;} .pd-back{padding-top:10px;} .pd-back a{font-size:13.5px;} .pd-section{padding:4px 0 48px;} .product-detail-info{padding-top:4px;} .product-detail-info h1{font-size:1.75rem !important;margin:8px 0 6px !important;} .volume-discounts{grid-template-columns:repeat(2,1fr);} .payment-badges{gap:6px;} .payment-badges span{font-size:11px;padding:5px 9px;} } @media(max-width:420px){ .product-detail-frame img{max-height:min(40vh,290px);} .dose-options > *,.freq-options > *{padding:10px 13px;font-size:14px;} } /* ═══ phone header ════════════════════════════════════════════════════════ The wordmark is nowrap and the icon row is fixed width, so on a narrow phone the two collided and the search button was painted over the final "s" of Labs. Everything in the row gets a little smaller instead. */ @media(max-width:430px){ nav.container{gap:8px;padding:0 16px;} .logo{gap:8px;} .logo-img{height:28px;} .logo-text .name{font-size:16.5px;} .logo-text .tag{font-size:7.5px;letter-spacing:.14em;} .search-btn,.cart-btn,.account-btn{width:34px;height:34px;} .search-btn svg,.cart-btn svg,.account-btn svg{width:16px;height:16px;} .menu-toggle{padding:6px;} } @media(max-width:360px){ .logo-text .name{font-size:15px;} .logo-text .tag{display:none;} nav.container{gap:6px;} } /* breathing room under the vial before the spin hint */ @media(max-width:900px){ .pd-spin-hint{margin-top:16px;} } /* The page's own stylesheet carries #pd-spin{position:relative}, which outranks a class selector — so the sticky never took and its top:96px simply shoved the vial 96px down the column. Matching that specificity fixes both: the vial sits at the top of its column and genuinely sticks while the buying options scroll past it. */ @media(min-width:901px){ #pd-spin.product-detail-frame{position:sticky;top:88px;} } /* stops the browser's own double-tap-to-zoom stealing the second tap */ .hero-vial{touch-action:manipulation;-webkit-tap-highlight-color:transparent;}