/* ============================================ VIGOR PEAK — main.css Color palette + section styles + responsive Critical above-the-fold CSS is inlined in ============================================ */ /* ---- TRUST STRIP ---- */ .trust-strip{background:#fff;border-bottom:1px solid var(--border);padding:22px 0} .trust-row{display:flex;justify-content:space-around;align-items:center;flex-wrap:wrap;gap:18px} .trust-item{display:flex;align-items:center;gap:9px;font-weight:600;font-size:.92rem;color:var(--navy)} .trust-ico{font-size:1.45rem;line-height:1} /* ---- SECTION DEFAULTS ---- */ .section{padding:80px 0} .section-alt{background:linear-gradient(180deg,#eef3f7 0%,#f4f7fa 100%)} .section-h2{font-size:clamp(1.7rem,3vw,2.4rem);margin-bottom:14px} .section-h2.center,.section-sub.center{text-align:center} .section-sub{font-size:1.08rem;color:var(--text-light);max-width:760px;margin:0 auto 40px;line-height:1.6} .eyebrow{display:inline-block;color:var(--gold-dark);text-transform:uppercase;letter-spacing:1.6px;font-size:.8rem;font-weight:700;margin-bottom:14px} .eyebrow.center{display:block;text-align:center} .unique-badge{display:inline-block;background:linear-gradient(135deg,var(--gold),var(--gold-dark));color:#fff;padding:7px 18px;border-radius:30px;font-weight:700;font-size:.82rem;letter-spacing:.5px;margin:0 auto 16px;text-align:center} .unique-badge:not(.danger-badge){display:block;width:fit-content} .danger-badge{background:linear-gradient(135deg,#c44a4a,#9d3030);display:block;margin:0 auto 16px;width:fit-content} /* ---- AI ANSWER BLOCK ---- */ .ai-answer{background:linear-gradient(135deg,#eef3f7,#dde8f1);border-left:5px solid var(--steel);padding:22px 26px;border-radius:8px;margin:24px auto 32px;max-width:900px;box-shadow:var(--shadow)} .ai-answer strong{display:block;color:var(--navy);font-size:1.08rem;margin-bottom:8px;font-weight:700} .ai-answer p{margin:0;color:var(--text);font-size:1rem;line-height:1.65} /* ---- BUTTON BLOCK / DEFAULTS ---- */ .btn-block{display:block;width:100%;margin-top:8px} /* ---- TWO-COL LAYOUT ---- */ .two-col{display:grid;grid-template-columns:1fr 1.1fr;gap:50px;align-items:center} .two-col.reverse{grid-template-columns:1.1fr 1fr} .two-col.reverse .two-col-img{order:2} .two-col-img img{border-radius:14px;box-shadow:var(--shadow-lg);max-width:100%;height:auto} .two-col-text p{margin-bottom:14px;color:var(--text);font-size:1.03rem} .check-list{list-style:none;margin:20px 0} .check-list li{padding:10px 0 10px 36px;position:relative;color:var(--text)} .check-list li::before{content:"";position:absolute;left:0;top:13px;width:22px;height:22px;background:url("data:image/svg+xml;utf8,") no-repeat center/contain} /* ---- PROBLEM SECTION ---- */ .problem-section{background:linear-gradient(135deg,#152a47,#1e3a5f);color:#fff;padding:80px 0} .problem-section .ai-answer{background:rgba(255,255,255,.08);border-left-color:var(--gold);color:#fff} .problem-section .ai-answer strong{color:var(--gold)} .problem-section .ai-answer p{color:#dce4ec} .problem-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:24px;margin-top:24px} .problem-card{background:rgba(255,255,255,.05);border:1px solid rgba(255,255,255,.1);padding:28px 24px;border-radius:12px;transition:transform .2s ease,border-color .2s ease} .problem-card:hover{transform:translateY(-4px);border-color:var(--gold)} .pain-num{font-family:'Playfair Display',serif;font-size:2.6rem;font-weight:800;color:var(--gold);line-height:1;margin-bottom:14px} .problem-card h3{color:#fff;font-size:1.18rem;margin-bottom:9px} .problem-card p{color:#c1cbd8;font-size:.95rem;margin:0} /* ---- HOW IT WORKS / MECHANISMS ---- */ .mech-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));gap:22px;margin-top:8px} .mech-card{background:#fff;padding:30px 24px;border-radius:12px;border:1px solid var(--border);box-shadow:var(--shadow);transition:transform .2s ease,box-shadow .2s ease;position:relative} .mech-card:hover{transform:translateY(-4px);box-shadow:var(--shadow-lg)} .mech-num{position:absolute;top:-14px;right:20px;width:42px;height:42px;background:linear-gradient(135deg,var(--gold),var(--gold-dark));color:#fff;font-weight:800;font-size:1.2rem;display:flex;align-items:center;justify-content:center;border-radius:50%;box-shadow:0 4px 12px rgba(201,160,77,.4)} .mech-card h3{font-size:1.15rem;margin-bottom:8px;color:var(--navy)} .mech-card p{color:var(--text-light);font-size:.95rem;margin:0;line-height:1.6} /* ---- SVG DIAGRAM ---- */ .svg-diagram-wrap{background:#fff;border-radius:14px;padding:30px;box-shadow:var(--shadow-lg);max-width:920px;margin:30px auto 0} /* ---- PRICING ---- */ .pricing-grid{display:grid;grid-template-columns:1fr 1.05fr 1fr;gap:28px;align-items:start;margin-top:30px} .price-card{background:#fff;border-radius:14px;border:2px solid var(--border);padding:32px 26px;text-align:center;position:relative;box-shadow:var(--shadow);transition:transform .2s ease,box-shadow .2s ease} .price-card:hover{transform:translateY(-6px);box-shadow:var(--shadow-lg)} .price-card.best-value{transform:scale(1.05);border-color:var(--gold);box-shadow:0 16px 50px rgba(201,160,77,.25);z-index:2} .price-card.best-value:hover{transform:scale(1.05) translateY(-4px)} .best-badge,.pop-badge{position:absolute;top:-15px;left:50%;transform:translateX(-50%);background:linear-gradient(135deg,var(--gold),var(--gold-dark));color:#fff;padding:7px 22px;border-radius:30px;font-weight:800;font-size:.78rem;letter-spacing:1px;white-space:nowrap;box-shadow:0 4px 12px rgba(201,160,77,.4)} .pop-badge{background:linear-gradient(135deg,var(--steel),var(--navy))} .price-head h3{font-size:1.35rem;margin-bottom:6px;color:var(--navy)} .price-tag{display:inline-block;background:var(--bg);color:var(--text-light);padding:4px 14px;border-radius:30px;font-size:.82rem;font-weight:600} .price-img-wrap{margin:20px 0;display:flex;justify-content:center;align-items:center;min-height:240px} .price-img-wrap img{filter:drop-shadow(0 12px 25px rgba(30,58,95,.18))} .price-cost{margin:14px 0 24px} .price-perbottle{display:block;font-family:'Playfair Display',serif;font-size:2.8rem;font-weight:800;color:var(--navy);line-height:1} .price-perbottle small{font-size:1rem;font-weight:500;color:var(--text-light)} .price-total{display:block;margin-top:6px;font-size:.95rem;color:var(--text-light)} .price-total strong{color:var(--text);font-size:1.05rem} .price-save{display:block;margin-top:8px;color:var(--success);font-weight:700;font-size:.88rem} .price-trust{margin-top:14px;font-size:.78rem;color:var(--text-light);font-weight:500} .price-disclaimer{text-align:center;max-width:780px;margin:40px auto 0;color:var(--text-light);font-size:.88rem;line-height:1.6} /* ---- INGREDIENTS ---- */ .ing-label-wrap{margin:30px auto 40px;max-width:900px} .ing-label-wrap img{border-radius:10px;box-shadow:var(--shadow-lg)} .ing-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(280px,1fr));gap:22px} .ing-card{background:#fff;border-radius:12px;padding:26px 24px;border:1px solid var(--border);box-shadow:var(--shadow);transition:transform .2s ease,box-shadow .2s ease} .ing-card:hover{transform:translateY(-4px);box-shadow:var(--shadow-lg)} .ing-tag{display:inline-block;background:linear-gradient(135deg,#eef3f7,#dde8f1);color:var(--navy);padding:5px 14px;border-radius:30px;font-size:.74rem;font-weight:700;letter-spacing:.5px;text-transform:uppercase;margin-bottom:12px} .ing-card h3{font-size:1.13rem;margin-bottom:10px;color:var(--navy);line-height:1.3} .ing-card p{color:var(--text-light);font-size:.94rem;margin:0;line-height:1.62} .ing-card.highlight-card{background:linear-gradient(135deg,#fff,#f8f9fb);border-color:var(--gold);border-width:2px} .ing-card.highlight-card .ing-tag{background:linear-gradient(135deg,var(--gold),var(--gold-dark));color:#fff} /* ---- BENEFITS ---- */ .benefit-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:22px;margin-top:20px} .benefit-card{background:#fff;text-align:center;padding:28px 22px;border-radius:12px;border:1px solid var(--border);box-shadow:var(--shadow);transition:transform .2s ease} .benefit-card:hover{transform:translateY(-5px)} .ben-ico{font-size:2.4rem;margin-bottom:14px;line-height:1} .benefit-card h3{font-size:1.08rem;margin-bottom:6px;color:var(--navy)} .benefit-card p{color:var(--text-light);font-size:.9rem;margin:0;line-height:1.55} /* ---- TIMELINE ---- */ .timeline{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:22px;margin:30px 0 20px} .tl-item{background:#fff;padding:30px 24px;border-radius:12px;border:1px solid var(--border);box-shadow:var(--shadow);border-top:5px solid var(--gold);transition:transform .2s ease} .tl-item:hover{transform:translateY(-4px)} .tl-badge{display:inline-block;background:var(--navy);color:#fff;padding:6px 16px;border-radius:30px;font-size:.78rem;font-weight:700;letter-spacing:.5px;margin-bottom:14px} .tl-item h3{font-size:1.18rem;color:var(--navy);margin-bottom:10px} .tl-item p{color:var(--text);font-size:.94rem;margin:0;line-height:1.6} .timeline-note{text-align:center;color:var(--text-light);font-size:.92rem;font-style:italic;margin-top:18px} /* ---- COMPARISON TABLE ---- */ .compare-wrap{margin-top:30px;overflow-x:auto;border-radius:12px;box-shadow:var(--shadow-lg);background:#fff} .compare-table{width:100%;border-collapse:collapse;font-size:.95rem} .compare-table th,.compare-table td{padding:16px 18px;text-align:center;border-bottom:1px solid var(--border)} .compare-table th{background:linear-gradient(135deg,var(--navy),var(--navy-dark));color:#fff;font-weight:700;font-size:.92rem} .compare-table th.best-col{background:linear-gradient(135deg,var(--gold),var(--gold-dark))} .compare-table td:first-child{text-align:left;font-weight:600;color:var(--navy);background:#f8fafc} .compare-table tbody tr:hover{background:#eef3f7} /* ---- REVIEWS ---- */ .rating-summary{text-align:center;margin:20px 0 36px} .big-stars{font-size:2rem;color:var(--gold);letter-spacing:3px;line-height:1.2} .rating-summary div:last-child{color:var(--text-light);font-size:.95rem;margin-top:6px} .review-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(280px,1fr));gap:22px} .review-card{background:#fff;padding:26px 24px;border-radius:12px;border:1px solid var(--border);box-shadow:var(--shadow);text-align:center} .review-card img{width:68px;height:68px;border-radius:50%;object-fit:cover;margin:0 auto 12px;border:3px solid #eef3f7} .review-card .stars{color:var(--gold);font-size:1.05rem;letter-spacing:2px;margin-bottom:6px} .review-card h4{font-size:1rem;margin-bottom:4px;color:var(--navy)} .verified{display:inline-block;background:rgba(45,128,85,.1);color:var(--success);padding:3px 12px;border-radius:30px;font-size:.74rem;font-weight:700;margin-bottom:10px} .review-card p{color:var(--text);font-size:.92rem;line-height:1.6;margin:0;font-style:italic} /* ---- GUARANTEE BLOCK ---- */ .guarantee-block{background:linear-gradient(135deg,#eef3f7,#dde8f1);padding:70px 0} .guarantee-grid{display:grid;grid-template-columns:1fr 1.4fr;gap:50px;align-items:center} .guarantee-seal img{max-width:300px;margin:0 auto;filter:drop-shadow(0 12px 30px rgba(168,132,47,.25))} .guarantee-text h2{font-size:clamp(1.5rem,2.5vw,2rem);margin-bottom:16px} .guarantee-text p{color:var(--text);margin-bottom:14px;font-size:1.02rem;line-height:1.65} /* ---- CONTRAINDICATIONS ---- */ .contra-list{list-style:none;max-width:900px;margin:30px auto 20px;background:#fff;border-left:5px solid var(--danger);padding:30px 36px;border-radius:8px;box-shadow:var(--shadow)} .contra-list li{padding:14px 0;border-bottom:1px solid var(--border);color:var(--text);line-height:1.6;font-size:1rem} .contra-list li:last-child{border-bottom:none} .contra-list .x-ico{margin-right:8px;font-size:1.1rem} .contra-list strong{color:var(--danger)} .contra-note{text-align:center;max-width:780px;margin:18px auto 0;color:var(--text-light);font-style:italic;font-size:.95rem} /* ---- FAQ ACCORDION ---- */ .faq-list{max-width:880px;margin:30px auto 0} .faq-item{background:#fff;border:1px solid var(--border);border-radius:10px;margin-bottom:12px;box-shadow:var(--shadow);overflow:hidden;transition:box-shadow .2s ease} .faq-item[open]{box-shadow:var(--shadow-lg)} .faq-item summary{padding:18px 24px;font-weight:700;color:var(--navy);cursor:pointer;list-style:none;position:relative;padding-right:50px;font-size:1.02rem;transition:background .15s ease} .faq-item summary::-webkit-details-marker{display:none} .faq-item summary:hover{background:#f8fafc} .faq-item summary::after{content:"+";position:absolute;right:24px;top:50%;transform:translateY(-50%);font-size:1.5rem;color:var(--gold);font-weight:300;transition:transform .2s ease} .faq-item[open] summary::after{content:"−"} .faq-a{padding:0 24px 22px;color:var(--text);line-height:1.7;font-size:.97rem} .faq-a p{margin:0} /* ---- MEDICAL REVIEWER ---- */ .reviewer-card{background:#fff;display:grid;grid-template-columns:auto 1fr;gap:30px;padding:36px 40px;border-radius:14px;box-shadow:var(--shadow-lg);border:1px solid var(--border);max-width:900px;margin:30px auto 0;align-items:center} .rev-avatar{width:130px;height:130px;border-radius:50%;background:linear-gradient(135deg,var(--navy),var(--steel));display:flex;align-items:center;justify-content:center;box-shadow:0 8px 20px rgba(30,58,95,.25)} .rev-initials{color:#fff;font-family:'Playfair Display',serif;font-size:2.6rem;font-weight:800} .rev-info h3{color:var(--navy);margin-bottom:4px;font-size:1.45rem} .rev-title{color:var(--gold-dark);font-weight:700;font-size:.95rem;display:block;margin-bottom:12px} .rev-info p{color:var(--text);margin-bottom:10px;font-size:.98rem;line-height:1.65} .rev-creds{font-size:.85rem;color:var(--text-light);font-style:italic} /* ---- REFERENCES ---- */ .ref-list{max-width:900px;margin:30px auto 20px;padding-left:24px;line-height:1.85;color:var(--text);font-size:.95rem} .ref-list li{margin-bottom:12px} .ref-list a{color:var(--steel);font-weight:600;word-break:break-all} .ref-list em{color:var(--navy);font-weight:500} .ref-disclaimer{text-align:center;max-width:820px;margin:20px auto 0;color:var(--text-light);font-style:italic;font-size:.9rem;line-height:1.6} /* ---- FINAL CTA ---- */ .final-cta{background:linear-gradient(135deg,var(--navy),var(--navy-dark));color:#fff;padding:70px 0;text-align:center} .final-cta h2{color:#fff;font-size:clamp(1.6rem,3vw,2.3rem);margin-bottom:14px} .final-cta p{color:#c1cbd8;max-width:680px;margin:0 auto 26px;font-size:1.08rem} .final-trust{display:flex;justify-content:center;gap:30px;flex-wrap:wrap;margin-top:26px;color:#dce4ec;font-size:.92rem;font-weight:500} /* ---- FOOTER ---- */ .site-footer{background:#0f1d33;color:#c1cbd8;padding:60px 0 28px} .footer-grid{display:grid;grid-template-columns:1.5fr 1fr 1fr 1fr;gap:36px;margin-bottom:36px} .foot-col h4{color:#fff;font-family:'Inter',sans-serif;font-size:1rem;margin-bottom:14px;font-weight:700;text-transform:uppercase;letter-spacing:.8px} .foot-col ul{list-style:none} .foot-col ul li{margin-bottom:9px;font-size:.92rem;color:#a0aebd} .foot-col ul li a{color:#a0aebd;transition:color .15s} .foot-col ul li a:hover{color:var(--gold)} .foot-about{color:#a0aebd;font-size:.92rem;line-height:1.65} .site-footer .logo{color:#fff} .foot-disclaimer{border-top:1px solid #1d2d49;padding-top:22px;font-size:.85rem;line-height:1.65;color:#8896a8} .foot-disclaimer p{margin-bottom:10px} .foot-disclaimer strong{color:#fff} /* ---- SOCIAL PROOF POPUP ---- */ .social-proof{position:fixed;bottom:20px;left:20px;background:#fff;border-radius:12px;padding:14px 16px;box-shadow:0 12px 38px rgba(30,58,95,.22);display:flex;align-items:center;gap:12px;max-width:320px;transform:translateX(-380px);opacity:0;transition:transform .4s ease,opacity .4s ease;z-index:80;border:1px solid var(--border)} .social-proof.show{transform:translateX(0);opacity:1} .social-proof img{width:42px;height:42px;border-radius:8px;flex-shrink:0} .sp-close{position:absolute;top:5px;right:9px;background:none;border:none;color:var(--text-light);font-size:1.4rem;cursor:pointer;line-height:1;padding:0} .sp-text{flex:1;min-width:0} .sp-name{font-weight:700;color:var(--navy);font-size:.85rem;line-height:1.3} .sp-action{color:var(--text);font-size:.8rem;margin:3px 0} .sp-time{color:var(--text-light);font-size:.72rem} /* ---- MOBILE STICKY CTA ---- */ .mobile-sticky-cta{display:none;position:fixed;bottom:0;left:0;right:0;background:linear-gradient(135deg,var(--gold),var(--gold-dark));color:#fff;text-align:center;padding:16px;font-weight:800;font-size:1rem;box-shadow:0 -6px 20px rgba(0,0,0,.18);z-index:85;text-decoration:none} /* ============================================ RESPONSIVE — 900px ============================================ */ @media (max-width:900px){ .container{padding:0 18px} .section{padding:60px 0} .trust-row{justify-content:center;gap:16px} .trust-item{font-size:.85rem} .two-col,.two-col.reverse{grid-template-columns:1fr;gap:30px} .two-col.reverse .two-col-img{order:0} .two-col-img{max-width:420px;margin:0 auto} .pricing-grid{grid-template-columns:1fr;gap:24px} .price-card.best-value{transform:none;order:-1} .price-card.best-value:hover{transform:translateY(-4px)} .guarantee-grid{grid-template-columns:1fr;gap:30px;text-align:center} .guarantee-seal img{max-width:240px} .reviewer-card{grid-template-columns:1fr;text-align:center;padding:28px 24px} .rev-avatar{margin:0 auto} .footer-grid{grid-template-columns:1fr 1fr;gap:28px} .mobile-sticky-cta{display:block} body{padding-bottom:60px} .social-proof{max-width:280px;left:10px;bottom:70px} .ai-answer{padding:18px 20px} .ing-grid,.mech-grid,.problem-grid,.benefit-grid,.review-grid,.timeline{grid-template-columns:1fr 1fr} .compare-table{font-size:.85rem} .compare-table th,.compare-table td{padding:10px 8px} .final-trust{flex-direction:column;gap:10px;align-items:center} .svg-diagram-wrap{padding:18px} } /* ============================================ RESPONSIVE — 560px ============================================ */ @media (max-width:560px){ .container{padding:0 14px} .section{padding:48px 0} .section-h2{font-size:1.55rem} .section-sub{font-size:.98rem} .trust-row{gap:12px} .trust-item{font-size:.78rem} .trust-ico{font-size:1.2rem} .hero{padding:30px 0 50px} .hero h1{font-size:1.7rem} .hero-sub{font-size:.98rem} .hero-bullets li{font-size:.94rem;padding-left:28px} .btn-lg{padding:16px 28px;font-size:1rem} .ing-grid,.mech-grid,.problem-grid,.benefit-grid,.review-grid,.timeline{grid-template-columns:1fr} .footer-grid{grid-template-columns:1fr;gap:24px} .price-card{padding:26px 22px} .price-perbottle{font-size:2.4rem} .price-img-wrap{min-height:200px} .price-img-wrap img{width:200px!important;height:200px!important} .price-card.best-value .price-img-wrap img{width:220px!important;height:220px!important} .contra-list{padding:22px 20px} .contra-list li{font-size:.92rem} .reviewer-card{padding:24px 18px;gap:20px} .rev-avatar{width:100px;height:100px} .rev-initials{font-size:2rem} .rev-info h3{font-size:1.25rem} .faq-item summary{padding:14px 18px;font-size:.96rem;padding-right:42px} .faq-a{padding:0 18px 18px;font-size:.94rem} .social-proof{max-width:calc(100% - 24px);left:12px;right:12px;bottom:72px} .mobile-sticky-cta{padding:14px;font-size:.95rem} .announce-bar{font-size:.82rem;padding:9px 12px} .announce-bar a{display:inline-block} .compare-wrap{font-size:.78rem} .ing-card,.mech-card,.tl-item,.benefit-card{padding:22px 20px} }