/* ============================================================ Peptide Wellness Guide — low-fi shared styles No design system yet. Neutral, readable, structure-first. Per-product accent set via [data-accent] on . ============================================================ */ *,*::before,*::after{box-sizing:border-box;margin:0;padding:0} html{scroll-behavior:smooth} body{ font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Helvetica,Arial,sans-serif; color:#1c2430; background:#fff; line-height:1.65; font-size:16px; --accent:#2b338c; /* default; overridden per product below */ --serif:'Iowan Old Style','Palatino Linotype',Palatino,Georgia,'Times New Roman',serif; } img{max-width:100%;display:block} a{color:inherit} .container{max-width:1040px;margin:0 auto;padding:0 24px} /* per-product accents */ body[data-accent="nad"] {--accent:#2b338c} body[data-accent="klow"] {--accent:#1f7a6d} body[data-accent="cjc"] {--accent:#a8531f} body[data-accent="wolverine"] {--accent:#2e3a4f} body[data-accent="retatrutide"]{--accent:#8a1538} /* ---------- NAV ---------- */ header.site{position:sticky;top:0;z-index:100;background:#fff;border-bottom:1px solid #e6e8ec} .nav-inner{display:flex;align-items:center;justify-content:space-between;gap:16px;height:64px;max-width:1100px;margin:0 auto;padding:0 24px} .brand{display:flex;flex-direction:column;line-height:1.1;text-decoration:none} .brand strong{font-size:16px;font-weight:800;color:#16233f;letter-spacing:-.01em} .brand span{font-size:9px;letter-spacing:.16em;text-transform:uppercase;color:#7a828f;font-weight:600;margin-top:2px} .nav-links{display:flex;gap:32px;list-style:none;align-items:center} .nav-links > a{font-size:14px;font-weight:600;text-decoration:none;color:#3a424f} .nav-links > a:hover{color:var(--accent)} .nav-links > a.current{color:var(--accent);border-bottom:2px solid var(--accent);padding-bottom:2px} /* formulas dropdown */ .dropdown{position:relative} .nav-trigger{font-family:inherit;font-size:14px;font-weight:600;color:#3a424f;background:none;border:none;cursor:pointer; display:inline-flex;align-items:center;gap:6px;padding:0} .nav-trigger:hover,.dropdown.open .nav-trigger,.nav-trigger.current{color:var(--accent)} .nav-trigger.current{border-bottom:2px solid var(--accent);padding-bottom:2px} .caret{font-size:10px;transition:transform .2s} .dropdown.open .caret{transform:rotate(180deg)} .dropdown-menu{position:absolute;top:calc(100% + 14px);right:0;min-width:288px;background:#fff;border:1px solid #e6e8ec; border-radius:12px;box-shadow:0 14px 34px rgba(16,35,63,.13);padding:8px;display:none;z-index:200} .dropdown-menu::before{content:"";position:absolute;top:-14px;left:0;right:0;height:14px} .dropdown.open .dropdown-menu{display:block} .dropdown-menu a{display:flex;align-items:center;gap:12px;padding:10px 12px;border-radius:8px;text-decoration:none} .dropdown-menu a:hover{background:#f4f6f8} .dropdown-menu .d{width:9px;height:9px;border-radius:50%;flex-shrink:0} .dropdown-menu b{display:block;font-size:14px;color:#16233f;font-weight:700} .dropdown-menu em{display:block;font-size:12px;color:#7a828f;font-style:normal;margin-top:1px} /* single menu button (Home + Formulas separator + list) */ .menu-btn{display:inline-flex;align-items:stretch;background:none;border:1px solid #d9dce1;border-radius:8px;overflow:hidden; cursor:pointer;font-family:inherit;font-size:13px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;padding:0} .menu-btn .mb-formulas{display:flex;align-items:center;padding:10px 16px;background:#16233f;color:#fff} .menu-btn .mb-menu{display:inline-flex;align-items:center;gap:10px;padding:10px 16px;color:#16233f} .menu-btn:hover,.dropdown.open .menu-btn{border-color:var(--accent)} .menu-btn:hover .mb-menu,.dropdown.open .menu-btn .mb-menu{color:var(--accent)} .menu-btn .bars{display:flex;flex-direction:column;gap:3px} .menu-btn .bars span{width:18px;height:2px;background:currentColor;display:block;border-radius:1px} .dropdown-menu .dd-home{font-size:14px;font-weight:700;color:#16233f} .dd-sep{font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:#9aa0a9;font-weight:700; padding:12px 12px 4px;border-top:1px solid #eef0f3;margin-top:6px} .hamburger{display:none;flex-direction:column;gap:5px;background:none;border:none;padding:6px;cursor:pointer} .hamburger span{width:22px;height:2px;background:#16233f;display:block} .mobile-menu{display:none;background:#fff;border-top:1px solid #e6e8ec;padding:16px 24px} .mobile-menu.open{display:block} .mobile-menu ul{list-style:none;display:flex;flex-direction:column;gap:13px} .mobile-menu a{text-decoration:none;font-weight:600;color:#3a424f;font-size:15px} .mobile-menu .m-label{font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:#9aa0a9;font-weight:700;margin-top:6px} .mobile-menu .m-sub{padding-left:14px} /* ---------- PAGE HEADER BAND ---------- */ .page-band{background:var(--accent);color:#fff;padding:48px 0} .page-band h1{font-size:clamp(28px,5vw,42px);font-weight:800;letter-spacing:-.01em;line-height:1.1} .page-band .tagline{margin-top:8px;font-size:15px;color:rgba(255,255,255,.85);font-weight:500} /* homepage hero (background image) */ .home-hero{position:relative;min-height:520px;display:flex;align-items:center;overflow:hidden; background:#0a1220 url('img/home-hero.jpg') right center/cover no-repeat} .home-hero::before{content:"";position:absolute;inset:0; background:linear-gradient(90deg,rgba(8,14,26,.85) 0%,rgba(8,14,26,.6) 42%,rgba(8,14,26,.12) 100%)} .home-hero .container{position:relative;z-index:1;width:100%;text-align:left;padding-top:40px;padding-bottom:40px} .home-hero .kicker{font-size:12px;letter-spacing:.18em;text-transform:uppercase;color:#c8d6ee;font-weight:700;margin-bottom:14px} .home-hero h1{font-family:var(--serif);font-size:clamp(34px,5vw,52px);font-weight:700;letter-spacing:-.01em;line-height:1.05;color:#fff} .home-hero p.lead{margin-top:18px;font-size:18px;line-height:1.6;color:rgba(255,255,255,.86);max-width:560px} /* ---------- SECTIONS ---------- */ section.block{padding:40px 0} section.block + section.block{border-top:1px solid #eef0f3} h2.sec{font-family:var(--serif);font-size:clamp(22px,2.6vw,28px);font-weight:700;color:#16233f;margin-bottom:18px;letter-spacing:-.01em} h2.sec::after{content:"";display:block;width:44px;height:3px;background:var(--accent);border-radius:2px;margin-top:14px} h3.sub{font-size:15px;font-weight:700;color:var(--accent);letter-spacing:.02em;margin-bottom:12px} .prose p{margin-bottom:14px;color:#39424f} .prose p:last-child{margin-bottom:0} /* benefit / feature lists as simple two-column grid */ ul.grid-list{list-style:none;display:grid;grid-template-columns:1fr 1fr;gap:16px 44px} ul.grid-list li{position:relative;padding-left:32px;font-size:15px;color:#39424f;line-height:1.5} ul.grid-list li::before{content:"✓";position:absolute;left:0;top:1px;width:21px;height:21px;border-radius:50%; background:#eef1f5;color:var(--accent);font-size:12px;font-weight:800;display:flex;align-items:center;justify-content:center} /* "what's inside" definition list */ dl.actives{border:1px solid #e6e8ec;border-radius:8px;overflow:hidden} dl.actives .row{display:grid;grid-template-columns:150px 1fr;gap:16px;padding:16px 20px;border-bottom:1px solid #eef0f3} dl.actives .row:last-child{border-bottom:none} dl.actives dt{font-weight:800;color:var(--accent)} dl.actives dd{color:#39424f;font-size:15px} /* callout box (why thin strips) */ .callout{background:#f6f7f9;border:1px solid #e6e8ec;border-radius:8px;padding:22px 24px} .callout .chips{display:flex;flex-wrap:wrap;gap:8px} .callout .chips span{background:#fff;border:1px solid #dfe2e7;border-radius:999px;padding:7px 14px;font-size:13px;font-weight:600;color:#39424f} /* product directory cards */ .product-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:16px} .product-card{display:flex;gap:16px;align-items:flex-start;border:1px solid #e6e8ec;border-radius:10px;padding:18px;text-decoration:none;transition:.15s;background:#fff} .product-card:hover{border-color:var(--accent);transform:translateY(-1px)} .product-card .thumb{width:72px;height:72px;flex-shrink:0;border-radius:8px;background:#eef0f3;object-fit:cover; display:flex;align-items:center;justify-content:center;color:#aeb4bd;font-size:22px} .product-card h3{font-size:17px;font-weight:800;color:#16233f;margin-bottom:2px} .product-card .pc-tag{font-size:12.5px;color:#6b7280;margin-bottom:6px} .product-card .pc-more{font-size:13px;font-weight:700} .dot-nad{color:#2b338c}.dot-klow{color:#1f7a6d}.dot-cjc{color:#a8531f} .dot-wolverine{color:#2e3a4f}.dot-retatrutide{color:#8a1538} /* formula page header (text only) */ .formula-head{padding-top:48px;padding-bottom:8px} .formula-head .back-link{margin-bottom:16px} .eyebrow{font-size:12px;letter-spacing:.18em;text-transform:uppercase;color:var(--accent);font-weight:700;margin-bottom:14px} .formula-title{font-family:var(--serif);font-size:clamp(32px,4vw,46px);font-weight:700;letter-spacing:-.01em;line-height:1.06;color:#16233f} .formula-title::after{content:"";display:block;width:52px;height:3px;background:var(--accent);border-radius:2px;margin-top:20px} .hero-lede{margin-top:20px;font-size:18px;line-height:1.6;color:#4a5361;max-width:660px} /* formula page intro */ .product-top{padding:8px 0 4px} .product-top .prose{max-width:760px} .product-top .prose p:first-child{font-size:17px;color:#2a3340} /* illustration integrated into "Why choose thin strips" */ .why-grid{display:grid;grid-template-columns:minmax(0,300px) 1fr;gap:32px;align-items:center} .why-img{width:100%;height:100%;max-height:280px;object-fit:cover;border-radius:12px;border:1px solid #e6e8ec;background:#f6f7f9} .product-photo-ph{border:1px dashed #d3d7dd;border-radius:10px;background:#f6f7f9; min-height:220px;display:flex;flex-direction:column;align-items:center;justify-content:center; gap:8px;color:#aeb4bd;text-align:center;padding:16px} .product-photo-ph .icon{font-size:34px} .product-photo-ph .cap{font-size:11px;letter-spacing:.08em;text-transform:uppercase;font-weight:600} /* next/prev + back link */ .pagelinks{display:flex;justify-content:space-between;gap:16px;padding:32px 0} .pagelinks a{font-size:14px;font-weight:700;text-decoration:none;color:var(--accent)} .back-link{display:inline-block;font-size:14px;font-weight:600;color:var(--accent);text-decoration:none;margin-bottom:20px} /* disclaimer / footer */ .disclaimer{background:#f6f7f9;border:1px solid #e6e8ec;border-radius:8px;padding:18px 20px;margin-top:8px} .disclaimer strong{display:block;font-size:13px;color:#16233f;margin-bottom:6px} .disclaimer p{font-size:12.5px;color:#6b7280;line-height:1.6} footer.site{border-top:1px solid #e6e8ec;padding:28px 0;margin-top:24px} footer.site .footer-callout{border:1px solid #d7dbe0;border-left:4px solid var(--accent);border-radius:8px; background:#f6f7f9;padding:20px 24px;margin-bottom:22px} footer.site .footer-callout strong{display:block;font-size:12px;letter-spacing:.12em;text-transform:uppercase;color:#16233f;margin-bottom:8px} footer.site .footer-callout p{font-size:13.5px;line-height:1.65;color:#2a3340;margin:0} footer.site .footer-row{display:flex;justify-content:space-between;flex-wrap:wrap;gap:8px} footer.site .fnote{font-size:12px;color:#8a919c} /* ---------- RESPONSIVE ---------- */ @media(min-width:721px){ .dropdown:hover .dropdown-menu{display:block} .dropdown:hover .caret{transform:rotate(180deg)} } @media(max-width:720px){ .nav-links{display:none} .hamburger{display:flex} .why-grid{grid-template-columns:1fr;gap:20px} .home-hero{min-height:440px} .home-hero::before{background:linear-gradient(90deg,rgba(8,14,26,.9) 0%,rgba(8,14,26,.62) 100%)} ul.grid-list{grid-template-columns:1fr} .product-grid{grid-template-columns:1fr} dl.actives .row{grid-template-columns:1fr;gap:4px} }