/* ==================================================== 1. NAV: HIDE CTA + LINKS ON MOBILE, SHOW HAMBURGER ==================================================== */ @media (max-width: 860px) { .nav-cta { display: none !important; } .nav-links { display: none !important; } .nav-hamburger-btn { display: flex !important; } } /* Hamburger button */ .nav-hamburger-btn { display: none; flex-direction: column; gap: 5px; cursor: pointer; padding: 8px; background: transparent; border: none; margin-left: auto; z-index: 9999; position: relative; } .nav-hamburger-btn span { display: block; width: 22px; height: 2px; background: rgba(255, 255, 255, 0.85); border-radius: 2px; transition: all 0.3s ease; } .nav-hamburger-btn.hb-open span:nth-child(1) { transform: translateY(7px) rotate(45deg); } .nav-hamburger-btn.hb-open span:nth-child(2) { opacity: 0; } .nav-hamburger-btn.hb-open span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); } /* Mobile drawer */ .bga-mobile-menu { display: none; position: fixed; top: 68px; left: 0; right: 0; background: rgba(15, 26, 20, 0.99); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); border-bottom: 1px solid rgba(2, 197, 139, 0.2); z-index: 9998; padding: 16px 1.5rem 20px; flex-direction: column; } .bga-mobile-menu.mm-open { display: flex; } .bga-mobile-menu a { font-family: 'Poppins', sans-serif !important; font-size: 15px !important; font-weight: 500 !important; color: rgba(255, 255, 255, 0.78) !important; text-decoration: none !important; padding: 13px 0 !important; border-bottom: 1px solid rgba(255, 255, 255, 0.07) !important; letter-spacing: 0.03em !important; display: block !important; transition: color 0.2s !important; } .bga-mobile-menu a:last-child { border-bottom: none !important; margin-top: 10px !important; background: #02c58b !important; color: #0f1a14 !important; text-align: center !important; border-radius: 8px !important; padding: 13px 16px !important; font-weight: 700 !important; } .bga-mobile-menu a:hover { color: #3ffdc5 !important; } .bga-mobile-menu a:last-child:hover { background: #3ffdc5 !important; color: #0f1a14 !important; } /* ==================================================== 2. MOBILE: KIM SECTION ABOVE TRUST STRIP (handled via JS reorder below) ==================================================== */ /* ==================================================== 3. STAGES: TAP HINT ON MOBILE ==================================================== */ .bga-tap-hint { display: none; background: rgba(2, 197, 139, 0.1); border: 1px solid rgba(2, 197, 139, 0.28); border-radius: 8px; padding: 10px 16px; margin-bottom: 14px; text-align: center; font-family: 'Poppins', sans-serif; font-size: 12px; font-weight: 600; color: #017754; letter-spacing: 0.04em; } @media (max-width: 860px) { .bga-tap-hint { display: block; } /* Reduce stage tab text size so all 5 fit */ .stage-tab .tab-name { font-size: 10px !important; } .stage-tab .tab-price { font-size: 10px !important; } .stage-tab .tab-stage { font-size: 8px !important; } .stage-tab .tab-emoji { font-size: 16px !important; } } /* ==================================================== 4. SCALE PANEL: FIX WHITE TEXT ON WHITE BACKGROUND ==================================================== */ #panel-scale .panel-inner { background: #0f1a14 !important; } #panel-scale .panel-problem { color: #ffffff !important; background: rgba(255, 255, 255, 0.06) !important; border-left-color: #02c58b !important; } #panel-scale .panel-desc { color: rgba(255, 255, 255, 0.75) !important; } #panel-scale .offer-items li { color: rgba(255, 255, 255, 0.75) !important; border-bottom-color: rgba(255, 255, 255, 0.08) !important; } #panel-scale .offer-items li::before { color: #02c58b !important; } /* Target any white box inside the scale panel */ #panel-scale .price-card-body, #panel-scale .waitlist-mini, #panel-scale [style*="background:#fff"], #panel-scale [style*="background: #fff"], #panel-scale [style*="background:white"], #panel-scale [style*="background: white"] { background: rgba(255, 255, 255, 0.07) !important; color: #ffffff !important; } #panel-scale .price-card-body p, #panel-scale .price-card-body span, #panel-scale .waitlist-mini p, #panel-scale .waitlist-mini h4 { color: rgba(255, 255, 255, 0.82) !important; } /* Express interest / coming soon box */ #panel-scale .cta-block, #panel-scale .coming-soon-box, #panel-scale .interest-box { background: rgba(2, 197, 139, 0.08) !important; border: 1px solid rgba(2, 197, 139, 0.2) !important; border-radius: 16px; padding: 22px; text-align: center; } #panel-scale .cta-block h2, #panel-scale .cta-block h3, #panel-scale .cta-block h4, #panel-scale .interest-box h4, #panel-scale .coming-soon-box h4 { color: #3ffdc5 !important; } #panel-scale .cta-block p, #panel-scale .interest-box p, #panel-scale .coming-soon-box p { color: rgba(255, 255, 255, 0.70) !important; } /* Catch-all for any remaining dark-on-dark text in scale panel */ #panel-scale * { color: inherit; } /* ==================================================== 5. MOBILE TYPOGRAPHY: BETTER CONTRAST ON DARK BACKGROUNDS ==================================================== */ @media (max-width: 860px) { /* KIM section */ .kim-intro, .kim-section p { color: rgba(255, 255, 255, 0.85) !important; font-size: 16px !important; } .kcard p { color: rgba(255, 255, 255, 0.82) !important; font-size: 15px !important; } /* Hero */ .hero-body { color: rgba(255, 255, 255, 0.82) !important; font-size: 16px !important; } .hero-sub { font-size: 17px !important; } /* Transform / after list */ .after-li p { color: rgba(255, 255, 255, 0.88) !important; font-size: 16px !important; } /* Stakes */ .stakes-section p, .stakes-inner p { color: rgba(255, 255, 255, 0.85) !important; font-size: 17px !important; } /* Quiz section */ .quiz-inner p, .quiz-list li, .quiz-section p { color: rgba(255, 255, 255, 0.85) !important; font-size: 16px !important; } /* Diff quotes */ .dq p { color: rgba(255, 255, 255, 0.85) !important; } /* Truth box */ .truth-box p { color: rgba(255, 255, 255, 0.85) !important; } /* Approach strip */ .ap-card p { color: rgba(255, 255, 255, 0.85) !important; font-size: 13px !important; } /* General: any paragraph inside a dark section */ .founder-content p, .guarantee-content p { font-size: 16px !important; line-height: 1.7 !important; } /* Stage panel text */ .panel-desc { font-size: 15px !important; color: #4a4a4a !important; } .panel-problem { font-size: 14px !important; } /* Ensure headings readable */ h2 { font-size: clamp(24px, 6vw, 36px) !important; } h3 { font-size: 17px !important; } } /* ============================================================ BIZNISTRY GROWTH AGENCY - CSS FIXES Paste this into the RIGHT PANEL (CSS side) of the GroovePages source code editor on EVERY page. Select all existing content first, then replace with this. ============================================================ */ /* ==================================================== 1. NAV: HIDE DESKTOP LINKS + CTA ON MOBILE SHOW HAMBURGER BUTTON ==================================================== */ @media (max-width: 860px) { .nav-cta { display: none !important; } .nav-links { display: none !important; } .nav-hamburger-btn { display: flex !important; } } .nav-hamburger-btn { display: none; flex-direction: column; gap: 5px; cursor: pointer; padding: 8px; background: transparent; border: none; margin-left: auto; z-index: 9999; position: relative; } .nav-hamburger-btn span { display: block; width: 22px; height: 2px; background: rgba(255, 255, 255, 0.85); border-radius: 2px; transition: all 0.3s ease; } .nav-hamburger-btn.hb-open span:nth-child(1) { transform: translateY(7px) rotate(45deg); } .nav-hamburger-btn.hb-open span:nth-child(2) { opacity: 0; } .nav-hamburger-btn.hb-open span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); } /* Mobile drawer menu */ .bga-mobile-menu { display: none; position: fixed; top: 68px; left: 0; right: 0; background: rgba(15, 26, 20, 0.99); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); border-bottom: 1px solid rgba(2, 197, 139, 0.2); z-index: 9998; padding: 16px 1.5rem 20px; flex-direction: column; } .bga-mobile-menu.mm-open { display: flex; } .bga-mobile-menu a { font-family: 'Poppins', sans-serif !important; font-size: 15px !important; font-weight: 500 !important; color: rgba(255, 255, 255, 0.78) !important; text-decoration: none !important; padding: 13px 0 !important; border-bottom: 1px solid rgba(255, 255, 255, 0.07) !important; letter-spacing: 0.03em !important; display: block !important; transition: color 0.2s !important; } .bga-mobile-menu a:last-child { border-bottom: none !important; margin-top: 10px !important; background: #02c58b !important; color: #0f1a14 !important; text-align: center !important; border-radius: 8px !important; padding: 13px 16px !important; font-weight: 700 !important; } .bga-mobile-menu a:hover { color: #3ffdc5 !important; } .bga-mobile-menu a:last-child:hover { background: #3ffdc5 !important; color: #0f1a14 !important; } /* ==================================================== 2. STAGES: TAP HINT ON MOBILE ==================================================== */ .bga-tap-hint { display: none; background: rgba(2, 197, 139, 0.1); border: 1px solid rgba(2, 197, 139, 0.28); border-radius: 8px; padding: 10px 16px; margin-bottom: 14px; text-align: center; font-family: 'Poppins', sans-serif; font-size: 12px; font-weight: 600; color: #017754; letter-spacing: 0.04em; } @media (max-width: 860px) { .bga-tap-hint { display: block; } .stage-tab .tab-name { font-size: 10px !important; } .stage-tab .tab-price { font-size: 10px !important; } .stage-tab .tab-stage { font-size: 8px !important; } .stage-tab .tab-emoji { font-size: 16px !important; } } /* ==================================================== 3. SCALE PANEL: FIX WHITE TEXT ON WHITE BACKGROUND ==================================================== */ #panel-scale .panel-inner { background: #0f1a14 !important; } #panel-scale .panel-problem { color: #ffffff !important; background: rgba(255, 255, 255, 0.06) !important; border-left-color: #02c58b !important; } #panel-scale .panel-desc { color: rgba(255, 255, 255, 0.75) !important; } #panel-scale .offer-items li { color: rgba(255, 255, 255, 0.75) !important; border-bottom-color: rgba(255, 255, 255, 0.08) !important; } #panel-scale .offer-items li::before { color: #02c58b !important; } #panel-scale .price-card-body, #panel-scale .waitlist-mini { background: rgba(255, 255, 255, 0.07) !important; } #panel-scale .price-card-body p, #panel-scale .price-card-body span, #panel-scale .waitlist-mini p, #panel-scale .waitlist-mini h4 { color: rgba(255, 255, 255, 0.82) !important; } #panel-scale .panel-cta-note { color: rgba(255, 255, 255, 0.45) !important; } /* ==================================================== 4. MOBILE TYPOGRAPHY: BETTER CONTRAST ON DARK BG ==================================================== */ @media (max-width: 860px) { .kim-intro, .kim-section p { color: rgba(255, 255, 255, 0.85) !important; font-size: 16px !important; } .kcard p { color: rgba(255, 255, 255, 0.82) !important; font-size: 15px !important; } .hero-body { color: rgba(255, 255, 255, 0.85) !important; font-size: 16px !important; } .hero-sub { font-size: 17px !important; color: rgba(255, 255, 255, 0.65) !important; } .after-li p { color: rgba(255, 255, 255, 0.88) !important; font-size: 16px !important; } .stakes-section p, .stakes-inner p { color: rgba(255, 255, 255, 0.85) !important; font-size: 17px !important; } .quiz-inner p, .quiz-list li, .quiz-section p { color: rgba(255, 255, 255, 0.85) !important; font-size: 16px !important; } .dq p { color: rgba(255, 255, 255, 0.85) !important; } .truth-box p { color: rgba(255, 255, 255, 0.85) !important; } .ap-card p { color: rgba(255, 255, 255, 0.85) !important; font-size: 13px !important; } .panel-desc { font-size: 15px !important; } .panel-problem { font-size: 14px !important; } h2 { font-size: clamp(24px, 6vw, 36px) !important; } h3 { font-size: 17px !important; } .trust-strip p { font-size: 13px !important; color: rgba(255, 255, 255, 0.92) !important; } .footer-brand-col p, .footer-col a { font-size: 13px !important; color: rgba(255, 255, 255, 0.55) !important; } } /* ============================================================ BIZNISTRY GROWTH AGENCY - CSS FIXES (UPDATED) Paste this into the RIGHT PANEL (CSS side) of the GroovePages source code editor on EVERY page. Select all existing content first, then replace with this. ============================================================ */ /* ==================================================== 1. NAV: HIDE DESKTOP LINKS + CTA ON MOBILE SHOW HAMBURGER BUTTON ==================================================== */ @media (max-width: 860px) { .nav-cta { display: none !important; } .nav-links { display: none !important; } .nav-hamburger-btn { display: flex !important; } } .nav-hamburger-btn { display: none; flex-direction: column; gap: 5px; cursor: pointer; padding: 8px; background: transparent; border: none; margin-left: auto; z-index: 9999; position: relative; } .nav-hamburger-btn span { display: block; width: 22px; height: 2px; background: rgba(255, 255, 255, 0.85); border-radius: 2px; transition: all 0.3s ease; } .nav-hamburger-btn.hb-open span:nth-child(1) { transform: translateY(7px) rotate(45deg); } .nav-hamburger-btn.hb-open span:nth-child(2) { opacity: 0; } .nav-hamburger-btn.hb-open span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); } /* Mobile drawer menu */ .bga-mobile-menu { display: none; position: fixed; top: 68px; left: 0; right: 0; background: rgba(15, 26, 20, 0.99); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); border-bottom: 1px solid rgba(2, 197, 139, 0.2); z-index: 9998; padding: 16px 1.5rem 20px; flex-direction: column; } .bga-mobile-menu.mm-open { display: flex; } .bga-mobile-menu a { font-family: 'Poppins', sans-serif !important; font-size: 15px !important; font-weight: 500 !important; color: rgba(255, 255, 255, 0.78) !important; text-decoration: none !important; padding: 13px 0 !important; border-bottom: 1px solid rgba(255, 255, 255, 0.07) !important; letter-spacing: 0.03em !important; display: block !important; transition: color 0.2s !important; } .bga-mobile-menu a:last-child { border-bottom: none !important; margin-top: 10px !important; background: #02c58b !important; color: #0f1a14 !important; text-align: center !important; border-radius: 8px !important; padding: 13px 16px !important; font-weight: 700 !important; } .bga-mobile-menu a:hover { color: #3ffdc5 !important; } .bga-mobile-menu a:last-child:hover { background: #3ffdc5 !important; color: #0f1a14 !important; } /* ==================================================== 2. STAGE 5 SCALE TAB: REMOVE BORDER ==================================================== */ /* Remove any outline/border from the Scale stage tab and its coming soon badge */ .stage-tab.active-scale, .stage-tab[onclick*="scale"], #panel-scale, .stage-tab:last-child { border: none !important; outline: none !important; box-shadow: none !important; } /* Target the coming soon pill/badge specifically */ .stage-tab:last-child .tab-price, .coming-soon-badge, [class*="coming-soon"], [class*="comingSoon"] { border: none !important; outline: none !important; box-shadow: none !important; } /* Remove border from the Scale stage card on the home page */ #panel-scale .panel-inner { background: #0f1a14 !important; border: none !important; outline: none !important; } /* Remove the outlined Coming Soon button/tag on the stages page */ .stage-tab:last-child { border-right: none !important; border-top: none !important; border-left: none !important; border-bottom: none !important; } /* Catch the outlined Coming Soon tag that appears below Stage 5 card on the home page */ .coming-soon-box, [style*="border:1px solid"], [style*="border: 1px solid"] { border: none !important; } /* More targeted: remove border from Stage 5 scale section card specifically */ .stage-tab.active-scale { border-bottom: 3px solid #02c58b !important; border-top: none !important; border-left: none !important; border-right: none !important; } /* ==================================================== 3. TRADEMARK SYMBOL: SMALL + SUPERSCRIPT ON ALL PAGES ==================================================== */ /* Make every TM symbol small and raised */ sup { font-size: 0.55em !important; vertical-align: super !important; line-height: 0 !important; font-weight: 400 !important; } /* Target the unicode TM character directly where it appears as regular text rather than a tag */ h1, h2, h3, h4, h5, p, span, div, a, li, label { font-variant: normal; } /* This targets the ™ character rendered inline in text. We wrap it via JS below, but this ensures the sup styling is always correct */ .bga-tm { font-size: 0.52em !important; vertical-align: super !important; line-height: 0 !important; font-weight: 400 !important; display: inline !important; } /* ==================================================== 4. STAGES: TAP HINT ON MOBILE ==================================================== */ .bga-tap-hint { display: none; background: rgba(2, 197, 139, 0.1); border: 1px solid rgba(2, 197, 139, 0.28); border-radius: 8px; padding: 10px 16px; margin-bottom: 14px; text-align: center; font-family: 'Poppins', sans-serif; font-size: 12px; font-weight: 600; color: #017754; letter-spacing: 0.04em; } @media (max-width: 860px) { .bga-tap-hint { display: block; } .stage-tab .tab-name { font-size: 10px !important; } .stage-tab .tab-price { font-size: 10px !important; } .stage-tab .tab-stage { font-size: 8px !important; } .stage-tab .tab-emoji { font-size: 16px !important; } } /* ==================================================== 5. SCALE PANEL: FIX WHITE TEXT ON WHITE BACKGROUND ==================================================== */ #panel-scale .panel-problem { color: #ffffff !important; background: rgba(255, 255, 255, 0.06) !important; border-left-color: #02c58b !important; } #panel-scale .panel-desc { color: rgba(255, 255, 255, 0.75) !important; } #panel-scale .offer-items li { color: rgba(255, 255, 255, 0.75) !important; border-bottom-color: rgba(255, 255, 255, 0.08) !important; } #panel-scale .offer-items li::before { color: #02c58b !important; } #panel-scale .price-card-body, #panel-scale .waitlist-mini { background: rgba(255, 255, 255, 0.07) !important; } #panel-scale .price-card-body p, #panel-scale .price-card-body span, #panel-scale .waitlist-mini p, #panel-scale .waitlist-mini h4 { color: rgba(255, 255, 255, 0.82) !important; } #panel-scale .panel-cta-note { color: rgba(255, 255, 255, 0.45) !important; } /* ==================================================== 6. MOBILE TYPOGRAPHY: BETTER CONTRAST ON DARK BG ==================================================== */ @media (max-width: 860px) { .kim-intro, .kim-section p { color: rgba(255, 255, 255, 0.85) !important; font-size: 16px !important; } .kcard p { color: rgba(255, 255, 255, 0.82) !important; font-size: 15px !important; } .hero-body { color: rgba(255, 255, 255, 0.85) !important; font-size: 16px !important; } .hero-sub { font-size: 17px !important; color: rgba(255, 255, 255, 0.65) !important; } .after-li p { color: rgba(255, 255, 255, 0.88) !important; font-size: 16px !important; } .stakes-section p, .stakes-inner p { color: rgba(255, 255, 255, 0.85) !important; font-size: 17px !important; } .quiz-inner p, .quiz-list li, .quiz-section p { color: rgba(255, 255, 255, 0.85) !important; font-size: 16px !important; } .dq p { color: rgba(255, 255, 255, 0.85) !important; } .truth-box p { color: rgba(255, 255, 255, 0.85) !important; } .ap-card p { color: rgba(255, 255, 255, 0.85) !important; font-size: 13px !important; } .panel-desc { font-size: 15px !important; } .panel-problem { font-size: 14px !important; } h2 { font-size: clamp(24px, 6vw, 36px) !important; } h3 { font-size: 17px !important; } .trust-strip p { font-size: 13px !important; color: rgba(255, 255, 255, 0.92) !important; } .footer-brand-col p, .footer-col a { font-size: 13px !important; color: rgba(255, 255, 255, 0.55) !important; } } *{} /*endBaseStyles*/ #IE-warning { display: none; position: fixed; width: 100%; height: 100%; z-index: 9999; background: white; } .IE-warning-message { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); text-align: center; } :root { --green: #017754; --green-light: #02c58b; --green-lighter: #3ffdc5; --maroon: #770124; --maroon-light: #a0032f; --white: #ffffff; --off-white: #f9f7f4; --cream: #fdf8f2; --dark: #0d0d0d; --dark-mid: #1a1a1a; --gray: #5a5a5a; --light-gray: #e8e4df; --gold: #c9a84c; --gold-light: #f0d080; } * { margin: 0; padding: 0; box-sizing: border-box; } html { scroll-behavior: smooth; } body { font-family: 'Crimson Text', serif; background: var(--cream); color: var(--dark); overflow-x: hidden; font-size: 18px; line-height: 1.7; } /* STICKY NAV BAR */ .sticky-cta { position: fixed; top: 0; left: 0; right: 0; z-index: 1000; background: var(--maroon); padding: 10px 20px; text-align: center; display: flex; align-items: center; justify-content: center; gap: 20px; flex-wrap: wrap; box-shadow: 0 2px 20px rgba(0,0,0,0.3); } .sticky-cta p { font-family: 'Poppins', sans-serif; font-size: 13px; font-weight: 600; color: var(--white); letter-spacing: 0.03em; } .sticky-cta a { font-family: 'Poppins', sans-serif; font-size: 13px; font-weight: 700; color: var(--maroon); background: var(--gold-light); padding: 7px 18px; border-radius: 4px; text-decoration: none; white-space: nowrap; transition: all 0.2s; } .sticky-cta a:hover { background: var(--white); } /* LOGO BAR */ .logo-bar { margin-top: 50px; background: var(--dark); padding: 16px 40px; display: flex; align-items: center; justify-content: center; } .logo-bar img { height: 36px; object-fit: contain; } /* HERO */ .hero { position: relative; background: var(--dark); overflow: hidden; min-height: 92vh; display: flex; align-items: center; } .hero-bg-img { position: absolute; inset: 0; background-image: url('/mnt/user-data/uploads/Productive_happy_entrepreneur_6000_x_4000_px_for_Sales_Funnel.png'); background-size: cover; background-position: center top; opacity: 0.22; } .hero-overlay { position: absolute; inset: 0; background: linear-gradient(135deg, rgba(1,119,84,0.18) 0%, rgba(119,1,36,0.22) 100%); } .hero-content { position: relative; z-index: 2; max-width: 860px; margin: 0 auto; padding: 80px 40px 80px; text-align: center; } .hero-eyebrow { font-family: 'Poppins', sans-serif; font-size: 11px; font-weight: 700; letter-spacing: 0.2em; text-transform: uppercase; color: var(--green-light); margin-bottom: 24px; display: inline-block; border: 1px solid rgba(2,197,139,0.4); padding: 6px 16px; border-radius: 2px; } .hero h1 { font-family: 'Poppins', sans-serif; font-size: clamp(2.4rem, 6vw, 4.2rem); font-weight: 900; line-height: 1.08; color: var(--white); margin-bottom: 28px; letter-spacing: -0.02em; } .hero h1 .accent { color: var(--green-light); display: block; } .hero-sub { font-size: 1.25rem; color: rgba(255,255,255,0.82); max-width: 620px; margin: 0 auto 20px; font-style: italic; } .hero-truth { font-family: 'Poppins', sans-serif; font-size: 1rem; font-weight: 600; color: var(--gold-light); margin-bottom: 44px; letter-spacing: 0.02em; } .btn-primary { display: inline-block; background: var(--green); color: var(--white); font-family: 'Poppins', sans-serif; font-size: 1rem; font-weight: 700; padding: 18px 44px; border-radius: 5px; text-decoration: none; letter-spacing: 0.04em; text-transform: uppercase; transition: all 0.25s; box-shadow: 0 6px 30px rgba(1,119,84,0.4); border: 2px solid transparent; } .btn-primary:hover { background: var(--green-light); transform: translateY(-2px); box-shadow: 0 10px 40px rgba(2,197,139,0.45); } .btn-maroon { background: var(--maroon); box-shadow: 0 6px 30px rgba(119,1,36,0.4); } .btn-maroon:hover { background: var(--maroon-light); box-shadow: 0 10px 40px rgba(119,1,36,0.45); } .hero-price-note { margin-top: 18px; font-family: 'Poppins', sans-serif; font-size: 0.8rem; color: rgba(255,255,255,0.55); letter-spacing: 0.06em; } /* SCRIPTURE STRIPE */ .scripture-stripe { background: var(--green); padding: 20px 40px; text-align: center; } .scripture-stripe p { font-size: 1.15rem; font-style: italic; color: var(--white); max-width: 700px; margin: 0 auto; } .scripture-stripe span { font-family: 'Poppins', sans-serif; font-size: 0.72rem; font-weight: 700; letter-spacing: 0.14em; color: var(--green-lighter); display: block; margin-top: 6px; text-transform: uppercase; } /* SECTIONS */ section { padding: 80px 20px; } .container { max-width: 820px; margin: 0 auto; } .container-wide { max-width: 1060px; margin: 0 auto; } .section-label { font-family: 'Poppins', sans-serif; font-size: 10px; font-weight: 700; letter-spacing: 0.22em; text-transform: uppercase; color: var(--green); margin-bottom: 16px; display: block; } h2 { font-family: 'Poppins', sans-serif; font-weight: 800; font-size: clamp(1.9rem, 4vw, 2.8rem); line-height: 1.15; letter-spacing: -0.02em; margin-bottom: 24px; color: var(--dark); } h3 { font-family: 'Poppins', sans-serif; font-weight: 700; font-size: 1.3rem; margin-bottom: 12px; color: var(--dark); } p { margin-bottom: 18px; } p:last-child { margin-bottom: 0; } /* PAIN SECTION */ .pain-section { background: var(--off-white); border-top: 4px solid var(--light-gray); } .pain-section h2 { color: var(--maroon); } .pain-list { list-style: none; margin: 32px 0; } .pain-list li { display: flex; align-items: flex-start; gap: 16px; padding: 16px 0; border-bottom: 1px solid var(--light-gray); font-size: 1.15rem; } .pain-list li:last-child { border-bottom: none; } .pain-icon { width: 28px; height: 28px; min-width: 28px; background: var(--maroon); border-radius: 50%; display: flex; align-items: center; justify-content: center; margin-top: 2px; } .pain-icon svg { width: 14px; height: 14px; fill: white; } /* TWO-COL IMAGE SECTION */ .two-col { display: grid; grid-template-columns: 1fr 1fr; gap: 60px; align-items: center; } @media (max-width: 720px) { .two-col { grid-template-columns: 1fr; gap: 36px; } } .two-col img { width: 100%; border-radius: 6px; object-fit: cover; max-height: 460px; box-shadow: 0 20px 60px rgba(0,0,0,0.12); } /* TRUTH SHIFT */ .truth-section { background: var(--dark); color: var(--white); } .truth-section h2 { color: var(--white); } .truth-section h2 .accent { color: var(--green-light); } .truth-section p { color: rgba(255,255,255,0.8); } .truth-cards { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 20px; margin-top: 44px; } .truth-card { background: rgba(255,255,255,0.05); border: 1px solid rgba(2,197,139,0.2); border-radius: 6px; padding: 28px; } .truth-card .num { font-family: 'Poppins', sans-serif; font-size: 2.2rem; font-weight: 900; color: var(--green-light); line-height: 1; margin-bottom: 10px; } .truth-card p { font-size: 1rem; color: rgba(255,255,255,0.75); margin: 0; } .truth-card strong { color: var(--white); } /* WHY IT DIDN'T WORK */ .why-section { background: var(--cream); } .contrast-box { display: grid; grid-template-columns: 1fr 1fr; gap: 0; border-radius: 8px; overflow: hidden; margin: 40px 0; box-shadow: 0 8px 40px rgba(0,0,0,0.08); } @media (max-width: 620px) { .contrast-box { grid-template-columns: 1fr; } } .contrast-left { background: #f2eded; padding: 36px 32px; border-right: 1px solid #ddd; } .contrast-right { background: #eaf6f1; padding: 36px 32px; } .contrast-label { font-family: 'Poppins', sans-serif; font-size: 10px; font-weight: 700; letter-spacing: 0.18em; text-transform: uppercase; margin-bottom: 20px; display: block; } .contrast-left .contrast-label { color: var(--maroon); } .contrast-right .contrast-label { color: var(--green); } .contrast-list { list-style: none; font-size: 1rem; } .contrast-list li { padding: 8px 0; border-bottom: 1px solid rgba(0,0,0,0.06); display: flex; gap: 10px; align-items: flex-start; } .contrast-list li:last-child { border-bottom: none; } .x-mark { color: var(--maroon); font-weight: 700; font-size: 1.1rem; } .check-mark { color: var(--green); font-weight: 700; font-size: 1.1rem; } /* SOLUTION */ .solution-section { background: var(--green); color: var(--white); } .solution-section h2 { color: var(--white); } .solution-section p { color: rgba(255,255,255,0.88); font-size: 1.15rem; } /* OFFER */ .offer-section { background: var(--off-white); } .offer-box { background: var(--white); border-radius: 10px; overflow: hidden; box-shadow: 0 20px 80px rgba(0,0,0,0.1); margin-top: 44px; } .offer-header { background: var(--dark); padding: 36px 44px; text-align: center; } .offer-header .workshop-name { font-family: 'Poppins', sans-serif; font-size: clamp(1.4rem, 3.5vw, 2.2rem); font-weight: 900; color: var(--white); line-height: 1.2; } .offer-header .workshop-name .accent { color: var(--green-light); } .offer-price-tag { margin-top: 20px; display: inline-flex; flex-direction: column; align-items: center; gap: 4px; } .offer-price-tag .was { font-family: 'Poppins', sans-serif; font-size: 0.85rem; color: rgba(255,255,255,0.5); text-decoration: line-through; letter-spacing: 0.1em; } .offer-price-tag .now { font-family: 'Poppins', sans-serif; font-size: 3.2rem; font-weight: 900; color: var(--gold-light); line-height: 1; } .offer-price-tag .per { font-family: 'Poppins', sans-serif; font-size: 0.8rem; color: rgba(255,255,255,0.6); letter-spacing: 0.1em; } .offer-body { padding: 44px; } .offer-items { list-style: none; display: grid; grid-template-columns: 1fr 1fr; gap: 20px; margin-bottom: 40px; } @media (max-width: 620px) { .offer-items { grid-template-columns: 1fr; } .offer-body { padding: 28px 24px; } .offer-header { padding: 28px 24px; } } .offer-item { background: var(--cream); border-radius: 6px; padding: 22px 20px; border-left: 3px solid var(--green); } .offer-item .item-title { font-family: 'Poppins', sans-serif; font-size: 0.9rem; font-weight: 700; color: var(--green); margin-bottom: 6px; text-transform: uppercase; letter-spacing: 0.06em; } .offer-item .item-name { font-family: 'Poppins', sans-serif; font-size: 1rem; font-weight: 700; color: var(--dark); margin-bottom: 8px; } .offer-item .item-desc { font-size: 0.95rem; color: var(--gray); margin: 0; line-height: 1.55; } .offer-bonus { background: linear-gradient(135deg, #fff8ec, #ffefd0); border: 1px solid var(--gold); border-radius: 6px; padding: 28px; margin-bottom: 36px; } .offer-bonus .bonus-label { font-family: 'Poppins', sans-serif; font-size: 10px; font-weight: 700; letter-spacing: 0.2em; color: var(--gold); text-transform: uppercase; margin-bottom: 10px; display: block; } .offer-bonus h3 { color: var(--dark); margin-bottom: 8px; font-size: 1.15rem; } .offer-bonus p { font-size: 0.95rem; color: var(--gray); margin: 0; } .offer-cta-wrap { text-align: center; padding-top: 16px; border-top: 1px solid var(--light-gray); } .offer-cta-wrap .btn-primary { font-size: 1.05rem; padding: 20px 52px; } .offer-cta-wrap .guarantee-note { margin-top: 14px; font-family: 'Poppins', sans-serif; font-size: 0.8rem; color: var(--gray); letter-spacing: 0.04em; } /* PROOF */ .proof-section { background: var(--white); } .proof-section h2 { margin-bottom: 40px; } .testimonials { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 24px; } .testimonial { background: var(--cream); border-radius: 8px; padding: 32px 28px; border-top: 3px solid var(--green); position: relative; } .testimonial .quote-mark { font-family: 'Crimson Text', serif; font-size: 4rem; color: var(--green-light); line-height: 0.7; opacity: 0.5; margin-bottom: 12px; display: block; } .testimonial p { font-style: italic; font-size: 1.05rem; color: var(--dark); margin-bottom: 20px; } .testimonial .attrib { font-family: 'Poppins', sans-serif; font-size: 0.8rem; font-weight: 700; color: var(--green); text-transform: uppercase; letter-spacing: 0.1em; margin: 0; font-style: normal; } /* RISK REVERSAL */ .risk-section { background: linear-gradient(135deg, #0d2018 0%, #0a1a0f 100%); color: var(--white); } .risk-section h2 { color: var(--white); } .risk-section h2 .accent { color: var(--green-light); } .risk-box { background: rgba(255,255,255,0.05); border: 1px solid rgba(2,197,139,0.25); border-radius: 8px; padding: 44px 40px; margin-top: 36px; display: flex; gap: 36px; align-items: flex-start; } @media (max-width: 620px) { .risk-box { flex-direction: column; gap: 20px; padding: 28px 24px; } } .risk-badge { min-width: 110px; width: 110px; height: 110px; background: var(--green); border-radius: 50%; display: flex; align-items: center; justify-content: center; text-align: center; flex-direction: column; padding: 16px; } .risk-badge .badge-text { font-family: 'Poppins', sans-serif; font-size: 0.6rem; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; color: white; line-height: 1.3; } .risk-content p { color: rgba(255,255,255,0.8); font-size: 1.1rem; } .risk-content strong { color: var(--white); } /* ABOUT */ .about-section { background: var(--off-white); } .about-inner { display: grid; grid-template-columns: 280px 1fr; gap: 60px; align-items: start; } @media (max-width: 720px) { .about-inner { grid-template-columns: 1fr; gap: 32px; } } .about-photo { width: 100%; border-radius: 6px; box-shadow: 0 16px 60px rgba(0,0,0,0.15); object-fit: cover; } .about-name { font-family: 'Poppins', sans-serif; font-size: 1.5rem; font-weight: 800; color: var(--green); margin-bottom: 4px; } .about-title { font-family: 'Poppins', sans-serif; font-size: 0.78rem; font-weight: 600; letter-spacing: 0.14em; text-transform: uppercase; color: var(--maroon); margin-bottom: 20px; } /* FINAL CTA */ .final-cta { background: var(--maroon); text-align: center; padding: 100px 20px; position: relative; overflow: hidden; } .final-cta::before { content: ''; position: absolute; inset: 0; background: radial-gradient(circle at 50% 50%, rgba(2,197,139,0.12) 0%, transparent 70%); } .final-cta > * { position: relative; z-index: 1; } .final-cta h2 { color: var(--white); max-width: 700px; margin: 0 auto 20px; font-size: clamp(2rem, 5vw, 3.2rem); } .final-cta p { color: rgba(255,255,255,0.8); max-width: 560px; margin: 0 auto 40px; font-size: 1.2rem; } .final-cta .guarantee { margin-top: 20px; font-family: 'Poppins', sans-serif; font-size: 0.78rem; letter-spacing: 0.08em; color: rgba(255,255,255,0.5); } /* FOOTER */ footer { background: var(--dark); padding: 40px 20px; text-align: center; } footer img { height: 30px; object-fit: contain; margin-bottom: 16px; } footer p { font-family: 'Poppins', sans-serif; font-size: 0.75rem; color: rgba(255,255,255,0.4); margin: 0; line-height: 1.8; } /* DIVIDER */ .divider { width: 60px; height: 3px; background: var(--green); margin: 0 0 32px 0; } .divider-center { margin: 0 auto 32px; } /* HIGHLIGHT PULL QUOTE */ .pull-quote { border-left: 4px solid var(--green); padding: 16px 24px; background: rgba(2,197,139,0.06); border-radius: 0 6px 6px 0; margin: 28px 0; font-size: 1.2rem; font-style: italic; color: var(--dark); } /* OBJECTION CALLOUTS */ .objection-row { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 20px; margin: 36px 0; } .objection-card { border: 1px solid var(--light-gray); border-radius: 8px; padding: 28px 24px; background: var(--white); } .obj-fear { font-family: 'Poppins', sans-serif; font-size: 0.78rem; font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase; color: var(--maroon); margin-bottom: 10px; display: block; } .obj-q { font-family: 'Poppins', sans-serif; font-size: 0.95rem; font-weight: 700; color: var(--dark); margin-bottom: 10px; font-style: italic; } .obj-a { font-size: 0.95rem; color: var(--gray); margin: 0; line-height: 1.6; } @media (max-width: 600px) { section { padding: 60px 20px; } .hero-content { padding: 60px 24px 60px; } h2 { font-size: 1.9rem; } } /* ANIMATIONS */ @keyframes fadeUp { from { opacity: 0; transform: translateY(30px); } to { opacity: 1; transform: translateY(0); } } .hero-content > * { animation: fadeUp 0.7s ease both; } .hero-content > *:nth-child(1) { animation-delay: 0.1s; } .hero-content > *:nth-child(2) { animation-delay: 0.25s; } .hero-content > *:nth-child(3) { animation-delay: 0.4s; } .hero-content > *:nth-child(4) { animation-delay: 0.52s; } .hero-content > *:nth-child(5) { animation-delay: 0.65s; } .hero-content > *:nth-child(6) { animation-delay: 0.75s; }