/* Theme Name: What Do You Want? Theme URI: https://whatdoyouwantseminar.com Author: Built for Dreams & Inspiration LLC Description: Lean, fast, conversion-focused custom theme for the "What Do You Want?" seminar. Replaces Divi. No page-builder bloat. Mobile-first, SEO-ready, with the custom member-area paywall and security hardening in functions.php. Version: 1.0.5 Requires at least: 6.0 Requires PHP: 7.4 Text Domain: wdyw */ :root{ --navy-900:#070b22; --navy-800:#0d1330; --navy-700:#161d44; --blue:#475bb2; --blue-2:#8496ee; --red:#e02b20; --red-2:#ff5346; --paper:#f5f6fb; --paper-2:#e9ecf7; --ink:#111426; --ink-soft:#565c78; --line:#dfe3f0; --white:#fff; --sans:"Avenir Next","Avenir","Montserrat","Segoe UI",system-ui,-apple-system,"Helvetica Neue",sans-serif; --wrap:1180px; --h1:clamp(2.6rem,6.4vw,5.4rem); --h2:clamp(2rem,4.4vw,3.4rem); --lead:clamp(1.1rem,1.7vw,1.4rem); } *{margin:0;padding:0;box-sizing:border-box} html{scroll-behavior:smooth} body{font-family:var(--sans);color:var(--ink);background:var(--paper);line-height:1.55;-webkit-font-smoothing:antialiased} img{max-width:100%;height:auto;display:block} a{color:inherit;text-decoration:none} h1,h2,h3{font-weight:600;line-height:1.08;letter-spacing:-.012em;text-wrap:balance} em{font-style:italic} .wrap{max-width:var(--wrap);margin:0 auto;padding:0 30px;width:100%} .eyebrow{font-weight:700;font-size:.84rem;letter-spacing:.22em;text-transform:uppercase;color:var(--blue)} .red{color:var(--red)} .center{text-align:center} .maxw{max-width:56ch} /* Buttons */ .btn{display:inline-flex;align-items:center;gap:.5em;font-weight:600;font-size:1rem;padding:1rem 1.9rem;border-radius:6px;border:2px solid transparent;cursor:pointer;transition:transform .16s,box-shadow .16s,background .16s} .btn--primary{background:var(--red);color:#fff;box-shadow:0 14px 34px -14px rgba(224,43,32,.75)} .btn--primary:hover{transform:translateY(-3px);box-shadow:0 22px 46px -14px rgba(224,43,32,.85)} .btn--ghost{background:transparent;color:#fff;border-color:rgba(255,255,255,.55)} .btn--ghost:hover{background:rgba(255,255,255,.14);transform:translateY(-3px)} .btn--dark{background:var(--navy-800);color:#fff} .btn--dark:hover{transform:translateY(-3px)} .btn--sm{padding:.6rem 1.15rem;font-size:.88rem} .arw{display:inline-block;transition:transform .18s} .btn:hover .arw{transform:translateX(5px)} /* Header */ .site-header{position:sticky;top:0;z-index:9999;background:rgba(255,255,255,.94);backdrop-filter:blur(12px);border-bottom:1px solid var(--line)} .site-header .bar{display:flex;align-items:center;justify-content:space-between;height:74px} /* Logo sizing forced with !important: Smush injects --smush-placeholder-* inline vars that otherwise override width:auto and squish the logo. object-fit:contain keeps the 500x267 ratio no matter what. */ .site-header img.logo{height:44px !important;width:auto !important;max-width:none !important;object-fit:contain !important;display:block;opacity:1 !important} .nav-links{display:flex;gap:22px;align-items:center;font-weight:500;font-size:.95rem} @media(max-width:860px){.nav-links a:not(.btn){display:none}} /* Sections */ .section{padding:clamp(64px,9vw,120px) 0} .section--paper2{background:var(--paper-2)} .section--navy{background:var(--navy-900);color:#fff} .section--navy h2{color:#fff} h2{font-size:var(--h2)} .kicker{display:block;margin-bottom:1rem} .section--navy .kicker{color:var(--blue-2)} .lead{font-size:var(--lead);color:var(--ink-soft);font-weight:500} .section--navy .lead{color:#c3c9e6} /* Hero */ .hero{position:relative;min-height:92svh;display:flex;align-items:center;overflow:hidden;color:#fff} .hero__bg{position:absolute;inset:0;z-index:0;background-size:cover;background-position:center} .hero__scrim{position:absolute;inset:0;z-index:1;background:linear-gradient(90deg,rgba(7,11,34,.9),rgba(7,11,34,.6) 55%,rgba(7,11,34,.32))} .hero__in{position:relative;z-index:2;padding-top:120px;padding-bottom:90px} .hero .eyebrow{color:var(--blue-2);margin-bottom:1.3rem} .hero h1{font-size:var(--h1);max-width:16ch;margin-bottom:1.4rem} .hero p.sub{font-size:var(--lead);color:#dde1f4;max-width:42ch;margin-bottom:2rem;font-weight:500} .btns{display:flex;gap:1rem;flex-wrap:wrap} .hero .btns{margin-bottom:1.2rem} .hero .micro{font-size:.9rem;color:#aab2dd} /* Two-column intro + compare */ .introrow{display:grid;grid-template-columns:1.05fr .95fr;gap:48px;align-items:end} .compare{display:grid;grid-template-columns:1fr 1fr;margin-top:50px;border-top:1px solid rgba(255,255,255,.16)} .compare__col{padding:34px 0} .compare__col:first-child{padding-right:46px} .compare__col:last-child{padding-left:46px;border-left:1px solid rgba(255,255,255,.16)} .compare__col h3{font-size:.78rem;font-weight:700;letter-spacing:.22em;text-transform:uppercase;margin-bottom:20px} .compare .bad h3{color:var(--red-2)} .compare .good h3{color:var(--blue-2)} .compare ul{list-style:none;display:flex;flex-direction:column;gap:15px} .compare li{display:flex;gap:12px;align-items:flex-start;font-size:1.08rem;font-weight:500;color:#cdd2ea;line-height:1.4} .compare li .m{flex:none;font-weight:700} .compare .bad li .m{color:var(--red-2)} .compare .good li .m{color:var(--blue-2)} .compare .good li{color:#fff} /* Avatar cards */ .cards3{display:grid;grid-template-columns:repeat(3,1fr);gap:22px;margin-top:52px} .pcard{background:#fff;border:1px solid var(--line);border-radius:16px;padding:30px 26px;box-shadow:0 24px 50px -34px rgba(17,20,38,.4);transition:transform .2s,box-shadow .2s} .pcard:hover{transform:translateY(-6px);box-shadow:0 40px 70px -34px rgba(17,20,38,.5)} .pcard .ico{width:50px;height:50px;border-radius:14px;display:flex;align-items:center;justify-content:center;margin-bottom:18px;font-size:1.5rem} .pcard h3{font-size:1.2rem;font-weight:600;margin-bottom:.5rem} .pcard p{color:var(--ink-soft);font-size:1rem} /* Reframe feature */ .reframe{position:relative;overflow:hidden} .reframe .blob{position:absolute;right:-140px;top:-100px;width:520px;opacity:.2;pointer-events:none} .reframe h2{font-size:clamp(2.1rem,5vw,4rem);max-width:18ch;margin:0 auto 1.2rem;position:relative} .reframe .lead{max-width:64ch;margin:0 auto;position:relative} /* What you get */ .what{display:grid;grid-template-columns:1.05fr .95fr;gap:56px;align-items:center} .what h2{font-size:clamp(1.9rem,3.6vw,2.9rem);margin-bottom:1rem} .chips{display:flex;flex-wrap:wrap;gap:10px;margin:18px 0} .chip{background:var(--paper-2);color:var(--navy-700);font-weight:600;font-size:.83rem;padding:.5rem 1rem;border-radius:999px} .gains{list-style:none;display:flex;flex-direction:column;gap:2px;margin-top:10px} .gains li{display:flex;gap:16px;align-items:center;padding:15px 0;border-bottom:1px solid var(--line);font-size:1.1rem;font-weight:500} .gains li:last-child{border-bottom:none} .gains .n{flex:none;color:var(--red);font-weight:700} .whatframe{border-radius:22px;overflow:hidden;box-shadow:0 40px 80px -46px rgba(17,20,38,.55);border:1px solid var(--line)} /* Quote */ .quotewrap{max-width:60ch;margin:0 auto;text-align:center} .quotewrap .mk{color:var(--red);font-size:4rem;line-height:.6;font-weight:700} .quotewrap blockquote{font-size:clamp(1.5rem,3vw,2.3rem);font-weight:600;line-height:1.24;margin:.6rem 0 1.3rem} .quotewrap cite{font-style:normal;font-weight:700;font-size:.9rem;letter-spacing:.06em;text-transform:uppercase;color:var(--ink-soft)} /* Offer */ .offer{display:grid;grid-template-columns:1.05fr .95fr;gap:52px;align-items:center} .offer h2{font-size:clamp(2rem,4vw,3.2rem)} .pricecard{background:#fff;color:var(--ink);border-radius:20px;padding:44px 40px;box-shadow:0 50px 90px -44px rgba(0,0,0,.6)} .pricecard .eyebrow{color:var(--blue);margin-bottom:1rem} .price{display:flex;align-items:baseline;gap:14px;margin:.3rem 0} .price .old{font-size:1.6rem;color:#9aa1c2;text-decoration:line-through} .price .new{font-size:clamp(3.2rem,6vw,4.4rem);font-weight:600;letter-spacing:-.03em;line-height:1} .price-lbl{font-weight:700;font-size:.76rem;letter-spacing:.16em;color:var(--red);text-transform:uppercase} .pricecard .access{color:var(--ink-soft);margin:.7rem 0 1.6rem;font-weight:500} .pricecard .btn{width:100%;justify-content:center;font-size:1.1rem} .pricecard .alt{margin-top:1rem;text-align:center;font-size:.92rem;color:var(--blue)} .pricecard .alt a{text-decoration:underline;font-weight:700} /* Email capture */ .capture{background:var(--navy-800);color:#fff;text-align:center} .capture h2{color:#fff;font-size:clamp(1.7rem,3.4vw,2.6rem)} .capture p{color:#c3c9e6;margin:.8rem auto 1.7rem;max-width:46ch;font-weight:500} .capform{display:flex;gap:10px;max-width:480px;margin:0 auto;flex-wrap:wrap;justify-content:center} .capform input{flex:1;min-width:220px;height:54px;border-radius:6px;border:1px solid rgba(255,255,255,.25);background:rgba(255,255,255,.08);color:#fff;padding:0 18px;font-size:1rem;font-family:var(--sans)} .capform input::placeholder{color:#aab2dd} /* FAQ */ .faqrow{display:grid;grid-template-columns:.72fr 1.28fr;gap:56px;align-items:start} .faqhead{position:sticky;top:100px} .faq .qa{border-top:1px solid var(--line);padding:24px 0} .faq .qa:last-child{border-bottom:1px solid var(--line)} .faq .qa h3{font-size:1.15rem;font-weight:600;color:var(--navy-800);margin-bottom:.4rem} .faq .qa p{color:var(--ink-soft);font-weight:500} /* Final CTA */ .final{position:relative;overflow:hidden;color:#fff;text-align:center} .final__bg{position:absolute;inset:0;z-index:0;background-size:cover;background-position:center 40%} .final__scrim{position:absolute;inset:0;z-index:1;background:linear-gradient(180deg,rgba(7,11,34,.82),rgba(7,11,34,.72))} .final .inner{position:relative;z-index:2;padding:clamp(90px,13vw,170px) 0} .final h2{color:#fff;font-size:clamp(2.4rem,6vw,4.6rem);margin-bottom:1rem} .final p{color:#d3d8f2;font-size:var(--lead);max-width:40ch;margin:0 auto 2rem;font-weight:500} /* Footer */ .site-footer{background:var(--navy-900);color:#8f97c4;text-align:center;padding:52px 0} .site-footer a{color:#c3c9e6} .site-footer .social{display:flex;gap:16px;justify-content:center;margin:16px 0} .site-footer img.logo{height:48px !important;width:auto !important;max-width:none !important;object-fit:contain !important;margin:0 auto 14px;filter:brightness(0) invert(1);opacity:.9} /* Scroll reveal */ .reveal{opacity:0;transform:translateY(30px);transition:opacity .9s cubic-bezier(.16,1,.3,1),transform .9s cubic-bezier(.16,1,.3,1)} .reveal.in{opacity:1;transform:none} @media(max-width:860px){ .introrow{grid-template-columns:1fr;gap:18px} .compare{grid-template-columns:1fr} .compare__col:first-child{padding-right:0} .compare__col:last-child{padding-left:0;border-left:none;border-top:1px solid rgba(255,255,255,.16)} .cards3{grid-template-columns:1fr} .what,.offer{grid-template-columns:1fr;gap:32px} .faqrow{grid-template-columns:1fr;gap:24px}.faqhead{position:static} .hero p.sub{max-width:100%} } @media(prefers-reduced-motion:reduce){.reveal{opacity:1;transform:none;transition:none}} /* ---- WooCommerce / My Account / Cart / Checkout ---- */ /* NOTE: never target body.woocommerce-page with max-width — it boxes the whole page (header/footer). Constrain only the content wrapper. */ body.woocommerce-page{max-width:none;width:auto;margin:0} .woocommerce{max-width:1100px;margin:0 auto} .woocommerce-account .woocommerce{display:grid;grid-template-columns:230px 1fr;gap:40px} @media(max-width:760px){.woocommerce-account .woocommerce{grid-template-columns:1fr}} .woocommerce-MyAccount-navigation ul{list-style:none;margin:0;padding:0;border:1px solid var(--line);border-radius:12px;overflow:hidden;background:#fff} .woocommerce-MyAccount-navigation li{border-bottom:1px solid var(--line)} .woocommerce-MyAccount-navigation li:last-child{border-bottom:none} .woocommerce-MyAccount-navigation li a{display:block;padding:13px 18px;font-weight:500;color:var(--ink)} .woocommerce-MyAccount-navigation li.is-active a,.woocommerce-MyAccount-navigation li a:hover{background:var(--paper-2);color:var(--blue)} .woocommerce-MyAccount-content{background:#fff;border:1px solid var(--line);border-radius:12px;padding:28px 30px} .woocommerce form .form-row label{display:block;font-weight:500;margin-bottom:6px} .woocommerce form .form-row input.input-text,.woocommerce form .form-row input[type=email],.woocommerce form .form-row input[type=password],.woocommerce form .form-row input[type=text],.woocommerce .input-text,.woocommerce select,.woocommerce textarea{width:100%;height:46px;border:1px solid var(--line);border-radius:8px;padding:0 14px;font-family:var(--sans);font-size:1rem;background:#fff} .woocommerce textarea{height:auto;padding:12px 14px} .woocommerce a.button,.woocommerce button.button,.woocommerce input.button,.woocommerce #respond input#submit,.woocommerce button.button.alt,.woocommerce a.button.alt{background:var(--red);color:#fff;border:none;border-radius:6px;padding:.85rem 1.6rem;font-weight:600;font-family:var(--sans);font-size:1rem;cursor:pointer;transition:transform .15s} .woocommerce a.button:hover,.woocommerce button.button:hover,.woocommerce input.button:hover,.woocommerce button.button.alt:hover{transform:translateY(-2px);color:#fff} .woocommerce table.shop_table{border:1px solid var(--line);border-radius:12px;border-collapse:separate;overflow:hidden} .woocommerce table.shop_table th,.woocommerce table.shop_table td{padding:14px 16px} .woocommerce .woocommerce-message,.woocommerce .woocommerce-info,.woocommerce .woocommerce-error{border-top-color:var(--blue);border-radius:8px;background:var(--paper-2)} .woocommerce-account h2,.woocommerce h2{font-size:1.5rem;margin-bottom:1rem} .select2-container--default .select2-selection--single{height:46px;border:1px solid var(--line);border-radius:8px} /* ---- Members Watch page ---- */ .watch-hero{background:linear-gradient(135deg,#070b22,#161d44);color:#fff;padding:60px 0 50px;text-align:center} .watch-hero h1{font-size:clamp(2rem,4.5vw,3rem);color:#fff;margin-bottom:.6rem} .watch-hero p{color:#c3c9e6;max-width:52ch;margin:0 auto;font-weight:500} .watch-body{max-width:880px;margin:0 auto;padding:clamp(40px,7vw,72px) 30px} .watch-body h3{font-size:1.4rem;margin:2rem 0 1rem;color:var(--navy-800)} .watch-body ol,.watch-body ul{padding:0} .watch-body li{list-style:none} .watch-body iframe{border-radius:10px} .watch-body hr{border:none;border-top:1px solid var(--line);margin:2rem 0} /* ---- Photo-driven homepage (avatar cards, feature, split) ---- */ .pcard{padding:0;overflow:hidden} .pcard__img{aspect-ratio:4/3;overflow:hidden} .pcard__img img{width:100%;height:100%;object-fit:cover;transition:transform .5s} .pcard:hover .pcard__img img{transform:scale(1.06)} .pcard__b{padding:24px 26px 28px} .feature{position:relative;overflow:hidden;color:#fff;display:flex;align-items:center;min-height:66vh} .feature__bg{position:absolute;inset:0;z-index:0;background-size:cover;background-position:center} .feature__scrim{position:absolute;inset:0;z-index:1;background:linear-gradient(90deg,rgba(7,11,34,.90),rgba(7,11,34,.80) 60%,rgba(7,11,34,.64))} .feature .wrap{position:relative;z-index:2;padding:90px 30px} .feature h2{color:#fff;max-width:20ch;font-size:clamp(2rem,4.4vw,3.4rem)} .feature .lead{color:#e8ebf7;max-width:48ch;margin-top:1rem} .split{display:grid;grid-template-columns:1fr 1fr;align-items:stretch;border-radius:20px;overflow:hidden;border:1px solid var(--line);background:#fff;box-shadow:0 40px 80px -50px rgba(17,20,38,.55)} .split__media{position:relative;min-height:440px} .split__media img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover} .split__body{padding:clamp(36px,5vw,64px)} @media(max-width:820px){.split{grid-template-columns:1fr}.split__media{min-height:280px}} /* ---- Footer social icon ---- */ .site-footer .follow{font-size:.85rem;letter-spacing:.03em;color:#8f97c4;margin-top:4px} .site-footer .social{margin:10px 0 16px;display:flex;flex-wrap:wrap;gap:12px;justify-content:center} .site-footer .social a{display:inline-flex;width:44px;height:44px;align-items:center;justify-content:center;border:1px solid rgba(255,255,255,.22);border-radius:50%;color:#c3c9e6;transition:background .15s,color .15s,border-color .15s} .site-footer .social a:hover{background:var(--red);border-color:var(--red);color:#fff} /* ---- Watch: Companion Guide download card ---- */ .companion{display:flex;align-items:center;gap:16px;max-width:760px;margin:0 auto 2.2rem;padding:18px 22px;border-radius:16px;text-decoration:none; background:linear-gradient(135deg,rgba(71,91,178,.16),rgba(71,91,178,.06));border:1px solid rgba(71,91,178,.35);transition:transform .15s,border-color .15s,background .15s} .companion:hover{transform:translateY(-2px);border-color:var(--blue);background:linear-gradient(135deg,rgba(71,91,178,.26),rgba(71,91,178,.1))} .companion__ic{font-size:1.9rem;line-height:1} .companion__tx{flex:1;color:var(--ink);font-size:1rem;line-height:1.4} .companion__tx strong{color:var(--navy-900);font-size:1.08rem} .companion__arw{font-size:1.5rem;color:var(--red);font-weight:700} /* ---- FIX: WooCommerce My Account two-column dashboard ---- Override Woo's default float + 30%/68% widths that were breaking the grid. */ .woocommerce-account .woocommerce{display:grid !important;grid-template-columns:240px 1fr !important;gap:40px;align-items:start;max-width:920px;margin:2.5rem auto} /* Woo clearfix pseudo-elements were being treated as grid items and breaking placement */ .woocommerce-account .woocommerce::before,.woocommerce-account .woocommerce::after{display:none !important;content:none !important} .woocommerce-account .woocommerce-MyAccount-navigation, .woocommerce-account .woocommerce-MyAccount-content{width:auto !important;float:none !important;margin:0 !important;min-width:0} .woocommerce-account .woocommerce-MyAccount-content{background:#fff;border:1px solid var(--line);border-radius:14px;padding:30px 32px;box-shadow:0 6px 24px rgba(7,11,34,.05)} .woocommerce-MyAccount-navigation ul{position:sticky;top:100px} @media(max-width:760px){.woocommerce-account .woocommerce{grid-template-columns:1fr !important;gap:20px}.woocommerce-MyAccount-navigation ul{position:static}} /* ---- FIX: breathing room on WooCommerce product / shop / cart / checkout pages ---- */ .single-product .woocommerce,.woocommerce-page .woocommerce,.post-type-archive-product .woocommerce{padding-top:2.4rem;padding-bottom:3.5rem} .single-product .product .product_title{margin-top:0} .woocommerce div.product div.images img{border-radius:14px} /* ---- WooCommerce My Account: links + fieldset polish (match live snippet) ---- */ .woocommerce-MyAccount-content a:not(.button):not(.wp-block-button__link){color:var(--blue);text-decoration:underline} .woocommerce fieldset{border:1px solid var(--line) !important;border-radius:12px;padding:18px 22px;margin-top:22px} .woocommerce fieldset legend{padding:0 8px;font-weight:600;color:var(--navy-900)} /* ---- WooCommerce checkout: payment section as a clean white card (kill Woo default gray + fix margins) ---- */ .woocommerce-checkout #payment{background:#fff !important;border:1px solid var(--line) !important;border-radius:14px !important;padding:6px 26px !important} .woocommerce-checkout #payment ul.payment_methods{margin:0 !important;padding:16px 0 !important;border-bottom:1px solid #eef0f6 !important;border-radius:0 !important} .woocommerce-checkout #payment ul.payment_methods li{padding:6px 0 !important;margin:0 !important} .woocommerce-checkout #payment div.payment_box{background:#f6f7fb !important;border:1px solid var(--line) !important;border-radius:10px !important;margin:14px 0 6px !important;box-shadow:none !important;padding:16px 18px !important} .woocommerce-checkout #payment div.payment_box::before{display:none !important} .woocommerce-checkout #payment .place-order{padding:18px 0 6px !important;margin:0 !important} .woocommerce-checkout #payment .woocommerce-privacy-policy-text,.woocommerce-checkout #payment .woocommerce-terms-and-conditions-wrapper{padding:0 !important;margin-left:0 !important} /* ===================================================================== CONSOLIDATED WOOCOMMERCE + RESPONSIVE + WATCH FIXES (v0.3.0) Authoritative block — supersedes earlier partial rules above. ===================================================================== */ body.woocommerce-page{max-width:none !important;width:auto !important;margin:0 !important} .woocommerce{max-width:1100px;margin:0 auto} .woocommerce .content-area{max-width:1160px !important;margin:0 auto !important;padding:2.4rem 30px 3.5rem !important} article.section{padding:40px 0 56px !important} .woocommerce-account article.section,.woocommerce-checkout article.section,.woocommerce-cart article.section{padding-top:30px !important} .woocommerce form .form-row label{display:block;font-weight:500;margin-bottom:6px;color:var(--navy-900)} .woocommerce .form-row input.input-text,.woocommerce .form-row input[type=email],.woocommerce .form-row input[type=tel],.woocommerce .form-row input[type=text],.woocommerce .form-row input[type=password],.woocommerce .input-text,.woocommerce select,.woocommerce textarea,.woocommerce .select2-selection{border:1px solid var(--line) !important;border-radius:8px !important;min-height:48px;padding:10px 14px !important;font-family:var(--sans);font-size:1rem;background:#fff} .woocommerce .form-row input:focus,.woocommerce .input-text:focus,.woocommerce select:focus,.woocommerce textarea:focus{outline:none;border-color:var(--blue) !important;box-shadow:0 0 0 3px rgba(71,91,178,.15)} .woocommerce .select2-container--default .select2-selection--single{height:48px;display:flex;align-items:center;border:1px solid var(--line)} .woocommerce-checkout h3,#order_review_heading{font-size:1.3rem;color:var(--navy-900);margin:0 0 1rem} .woocommerce-checkout #customer_details .col2-set,.woocommerce-checkout #customer_details .col-1,.woocommerce-checkout #customer_details .col-2,.woocommerce-checkout .woocommerce-billing-fields,.woocommerce-checkout .woocommerce-billing-fields__field-wrapper,.woocommerce-checkout .woocommerce-account-fields,.woocommerce-checkout .woocommerce-additional-fields{width:100% !important;float:none !important;max-width:none !important} .woocommerce-checkout #customer_details .col2-set .col-2{display:none !important} .woocommerce-checkout #customer_details .form-row{width:100% !important;float:none !important;clear:both !important;margin:0 0 16px !important;padding:0 !important} .woocommerce-checkout #customer_details .form-row input.input-text,.woocommerce-checkout #customer_details .form-row textarea,.woocommerce-checkout #customer_details .form-row select,.woocommerce-checkout #customer_details .form-row .select2-container,.woocommerce-checkout #customer_details .form-row .woopay-billing-email-input,.woocommerce-checkout #customer_details .form-row .wc-block-components-text-input{width:100% !important;box-sizing:border-box} .wcpay-express-checkout-wrapper p{display:none !important} .wcpay-express-checkout-wrapper{margin-bottom:2.2rem !important} .woocommerce-checkout #customer_details,.woocommerce-checkout #order_review_heading{margin-top:.5rem !important} @media(min-width:861px){ .woocommerce-checkout #customer_details{width:48.5% !important;float:left !important} .woocommerce-checkout #order_review_heading{width:48.5% !important;float:right !important;clear:right} .woocommerce-checkout #order_review{width:48.5% !important;float:right !important;clear:right;position:sticky;top:100px} .woocommerce-checkout form.checkout::after{content:"";display:block;clear:both} } .woocommerce-checkout-review-order-table{background:#fff;border:1px solid var(--line) !important;border-radius:12px !important;overflow:hidden;margin-bottom:1rem} .woocommerce-checkout-review-order-table th,.woocommerce-checkout-review-order-table td{padding:14px 16px !important} .woocommerce-checkout .woocommerce-form-coupon-toggle .woocommerce-info,.woocommerce-checkout form.checkout_coupon{background:#f6f7fb !important;border:1px solid var(--line) !important;border-radius:12px !important;border-top-color:var(--blue) !important;color:var(--ink)} .wdyw-co-trust{display:flex;flex-wrap:wrap;gap:16px;justify-content:center;margin-top:16px;color:var(--ink-soft);font-size:.88rem;font-weight:600} .woocommerce-checkout #payment{background:#fff !important;border:1px solid var(--line) !important;border-radius:14px !important;padding:6px 24px !important} .woocommerce-checkout #payment ul.payment_methods{margin:0 !important;padding:16px 0 !important;border-bottom:1px solid #eef0f6 !important;border-radius:0 !important} .woocommerce-checkout #payment ul.payment_methods li{padding:6px 0 !important;margin:0 !important} .woocommerce-checkout #payment div.payment_box{background:#f6f7fb !important;border:1px solid var(--line) !important;border-radius:10px !important;margin:14px 0 6px !important;box-shadow:none !important;padding:16px 18px !important} .woocommerce-checkout #payment div.payment_box::before{display:none !important} .woocommerce-checkout #payment .place-order{padding:18px 0 6px !important;margin:0 !important} .woocommerce-checkout #payment .woocommerce-privacy-policy-text,.woocommerce-checkout #payment .woocommerce-terms-and-conditions-wrapper{padding:0 !important;margin-left:0 !important} .woocommerce-account .woocommerce{display:grid !important;grid-template-columns:240px 1fr !important;gap:40px;align-items:start;max-width:960px;margin:1.5rem auto} .woocommerce-account .woocommerce::before,.woocommerce-account .woocommerce::after{display:none !important;content:none !important} .woocommerce-account .woocommerce-MyAccount-navigation,.woocommerce-account .woocommerce-MyAccount-content{width:auto !important;float:none !important;margin:0 !important;min-width:0} .woocommerce-account .woocommerce-MyAccount-navigation ul{list-style:none;margin:0;padding:0;border:1px solid #e6e8f0;border-radius:14px;overflow:hidden;background:#fff} .woocommerce-account .woocommerce-MyAccount-navigation li{border-bottom:1px solid #eef0f6} .woocommerce-account .woocommerce-MyAccount-navigation li:last-child{border-bottom:none} .woocommerce-account .woocommerce-MyAccount-navigation li a{display:block;padding:14px 20px;font-weight:500;color:#22283f;text-decoration:none} .woocommerce-account .woocommerce-MyAccount-navigation li.is-active a,.woocommerce-account .woocommerce-MyAccount-navigation li a:hover{background:#f4f5fb;color:#475bb2} .woocommerce-account .woocommerce-MyAccount-content{background:#fff;border:1px solid #e6e8f0;border-radius:14px;padding:30px 34px;box-shadow:0 6px 24px rgba(7,11,34,.05)} .woocommerce-MyAccount-content a:not(.button):not(.wp-block-button__link){color:#475bb2 !important;text-decoration:underline !important} .woocommerce fieldset{border:1px solid #e6e8f0 !important;border-radius:12px;padding:18px 22px;margin-top:22px} .woocommerce fieldset legend{padding:0 8px;font-weight:600;color:#070b22} /* v0.8.3 — FIX: My Account dashboard was stuck two-column on mobile. The authoritative grid rule above (.woocommerce-account .woocommerce{grid-template-columns:240px 1fr !important}) carries no media query, so by source order it was overriding the earlier @max-width:760px single-column collapse. On a phone the fixed 240px nav column crushed the content to a sliver. This TRAILING query re-collapses the account grid on small screens. Scoped to .woocommerce-account AND <=760px, so it cannot affect desktop or any non-account page. Placed last on purpose so it wins the cascade (Jetpack Boost preserves within-file order). */ @media(max-width:760px){ .woocommerce-account .woocommerce{grid-template-columns:1fr !important;gap:22px;max-width:560px} .woocommerce-account .woocommerce-MyAccount-navigation ul{position:static !important} .woocommerce-account .woocommerce-MyAccount-navigation{margin-bottom:6px} } .woocommerce .woocommerce-breadcrumb{font-size:.85rem;color:var(--ink-soft);margin:0 0 1.4rem} .woocommerce .woocommerce-breadcrumb a{color:var(--blue)} .single-product div.product .product_title{font-size:clamp(1.9rem,3.4vw,2.7rem);margin:0 0 .5rem;color:var(--navy-900)} .single-product div.product p.price,.single-product div.product .price{color:var(--navy-900);font-size:1.5rem} .single-product div.product .price del{color:#9aa1c2;font-weight:400;margin-right:8px} .single-product div.product .price ins{color:var(--navy-900);text-decoration:none;font-weight:700} .single-product div.product form.cart{display:flex;gap:12px;align-items:center;margin:1.4rem 0} .woocommerce .quantity .qty{height:50px;width:84px;border:1px solid var(--line);border-radius:8px;text-align:center;font-size:1rem} .single-product .woocommerce-product-gallery img{border-radius:16px} .woocommerce div.product .woocommerce-tabs{margin-top:3rem;clear:both} .woocommerce div.product .woocommerce-tabs ul.tabs{border:none;padding:0;margin:0 0 1.5rem;display:flex;gap:8px;flex-wrap:wrap} .woocommerce div.product .woocommerce-tabs ul.tabs::before{display:none} .woocommerce div.product .woocommerce-tabs ul.tabs li{background:var(--paper-2);border:none !important;border-radius:999px;margin:0;padding:0} .woocommerce div.product .woocommerce-tabs ul.tabs li.active{background:var(--navy-900)} .woocommerce div.product .woocommerce-tabs ul.tabs li::before,.woocommerce div.product .woocommerce-tabs ul.tabs li::after{display:none !important} .woocommerce div.product .woocommerce-tabs ul.tabs li a{color:var(--navy-900);font-weight:600;padding:10px 22px;display:block} .woocommerce div.product .woocommerce-tabs ul.tabs li.active a{color:#fff} .woocommerce-Tabs-panel h2,.related.products h2,.upsells.products h2,.woocommerce #reviews h2{font-size:1.6rem;color:var(--navy-900)} .woocommerce span.onsale{min-width:0 !important;min-height:0 !important;width:auto !important;height:auto !important;line-height:1.2 !important;border-radius:999px !important;padding:5px 12px !important;font-size:.72rem !important;font-weight:700 !important;top:12px !important;left:12px !important;right:auto !important;background:var(--red) !important;color:#fff !important;box-shadow:0 4px 12px -4px rgba(224,43,32,.6)} .single-product span.onsale{top:16px !important;left:16px !important} .woocommerce-message,.woocommerce-info,.woocommerce-error{display:flex !important;flex-wrap:wrap;align-items:center;gap:12px;justify-content:space-between} .woocommerce-message .button,.woocommerce-info .button,.woocommerce-error .button{float:none !important;margin:0 !important} .wdyw-hamburger{display:none;flex-direction:column;justify-content:center;align-items:center;gap:5px;background:none;border:0;cursor:pointer;padding:8px;margin-left:auto;box-sizing:border-box;min-width:44px;min-height:44px} .wdyw-hamburger span{display:block;width:26px;height:2px;background:var(--navy-900);border-radius:2px;transition:.25s} .site-header.nav-open .wdyw-hamburger span:nth-child(1){transform:translateY(7px) rotate(45deg)} .site-header.nav-open .wdyw-hamburger span:nth-child(2){opacity:0} .site-header.nav-open .wdyw-hamburger span:nth-child(3){transform:translateY(-7px) rotate(-45deg)} @media(max-width:860px){ .wdyw-hamburger{display:flex} .site-header .nav-links{position:fixed;top:74px;left:0;right:0;background:#fff;flex-direction:column;align-items:stretch;gap:0;padding:8px 24px 22px;box-shadow:0 24px 40px -20px rgba(7,11,34,.35);transform:translateY(-140%);transition:transform .28s ease;border-bottom:1px solid var(--line);max-height:calc(100vh - 74px);overflow:auto} .site-header.nav-open .nav-links{transform:translateY(0)} .site-header .nav-links a:not(.btn){display:block !important;padding:15px 2px;border-bottom:1px solid var(--line);font-size:1.05rem} .site-header .nav-links a.btn{margin-top:14px;justify-content:center} .woocommerce-checkout #customer_details,.woocommerce-checkout #order_review_heading,.woocommerce-checkout #order_review{float:none !important;width:100% !important;position:static !important} .single-product div.product .woocommerce-product-gallery,.single-product div.product .summary,.single-product div.product .images{width:100% !important;float:none !important;margin:0 0 22px !important} } @media(max-width:600px){ .section{padding:40px 0 !important} article.section{padding:22px 0 38px !important} .woocommerce .content-area{padding:1.4rem 20px 2.5rem !important} .hero{min-height:auto} .hero__in{padding-top:88px !important;padding-bottom:52px !important} .wrap{padding:0 20px} } /* ---- Watch: single-player + playlist (autoplay-next) ---- */ .watch-app{display:grid;grid-template-columns:1fr 360px;gap:32px;align-items:start;max-width:1160px;margin:0 auto 4rem} .watch-main{position:sticky;top:96px} /* Render-perf: fixed 16/9 box (reserves space -> zero CLS), NO heavy blur shadow (large-radius shadows repaint every frame the video paints), and contain + own compositor layer so the video's painting is isolated from the rest of the page. This is the main-thread relief for mobile stutter. */ .watch-video{position:relative;aspect-ratio:16/9;background:#000;border-radius:16px;overflow:hidden;border:1px solid var(--line);contain:layout paint;transform:translateZ(0)} .watch-video iframe{position:absolute;inset:0;width:100%;height:100%;border:0} /* On /watch/ ONLY: drop the header's backdrop-filter blur. A blurred sticky header re-blurs the pixels behind it on every scroll frame AND whenever the video repaints near the top -> the biggest GPU/main-thread cost on mobile. Solid opaque header = same look, none of the per-frame blur work. */ body.wdyw-watch .site-header{background:#fff;-webkit-backdrop-filter:none;backdrop-filter:none} .watch-now{display:flex;align-items:center;gap:16px;margin-top:1.1rem} .watch-now__n{flex:none;width:48px;height:48px;border-radius:12px;background:var(--navy-900);color:#fff;display:flex;align-items:center;justify-content:center;font-weight:700;font-size:1.1rem} .watch-now__label{display:block;font-size:.72rem;letter-spacing:.16em;text-transform:uppercase;color:var(--blue);font-weight:700} .watch-now h2{font-size:1.4rem;margin:.1rem 0 0;color:var(--navy-900)} .watch-list{border:1px solid var(--line);border-radius:16px;background:#fff;overflow:hidden;box-shadow:0 10px 30px -22px rgba(7,11,34,.4)} .watch-list__head{display:flex;align-items:center;justify-content:space-between;padding:16px 20px;border-bottom:1px solid var(--line)} .watch-list__head h3{margin:0;font-size:1.05rem} .watch-list__count{font-size:.78rem;font-weight:700;color:var(--blue);background:var(--paper-2);padding:3px 10px;border-radius:999px} #wdyw-playlist{list-style:none;margin:0;padding:0;max-height:70vh;overflow-y:auto} .pl-item{display:flex;align-items:center;gap:12px;padding:12px 18px;border-bottom:1px solid #eef0f6;cursor:pointer;transition:background .15s} .pl-item:last-child{border-bottom:none} .pl-item:hover{background:var(--paper-2)} .pl-item:focus-visible{outline:2px solid var(--blue);outline-offset:-2px} .pl-n{flex:none;width:30px;font-weight:700;color:#9aa1c2;font-size:.9rem;text-align:center} .pl-t{flex:1;font-weight:500;color:var(--ink);line-height:1.3} .pl-ic{flex:none;width:18px;height:18px} .pl-item.is-active{background:rgba(71,91,178,.1)} .pl-item.is-active .pl-n{color:var(--blue)} .pl-item.is-active .pl-t{color:var(--blue);font-weight:600} .pl-item.is-done .pl-n{color:#2e9e5b} .pl-item.is-done .pl-ic{position:relative;background:#2e9e5b;border-radius:50%} .pl-item.is-done .pl-ic::after{content:"";position:absolute;left:6px;top:4px;width:4px;height:7px;border:solid #fff;border-width:0 2px 2px 0;transform:rotate(45deg)} @media(max-width:900px){ .watch-app{grid-template-columns:1fr;gap:20px} .watch-main{position:static} #wdyw-playlist{max-height:420px} } /* ===================================================================== ACCESSIBILITY (WCAG 2.1 AA) + login/cookie consolidation — v0.3.3 ===================================================================== */ /* Footer bg as explicit hex (same navy) so contrast scanners resolve it */ .site-footer{background:#070b22} /* Strikethrough "old price" was too light on white (2.5:1) -> darker (>=4.5:1) */ .price .old,.woocommerce del,.woocommerce del .amount,.woocommerce del .woocommerce-Price-amount,.woocommerce del bdi{color:#5f6773 !important} /* Visible keyboard focus everywhere (WCAG 2.4.7) */ a:focus-visible,button:focus-visible,input:focus-visible,select:focus-visible,textarea:focus-visible,[tabindex]:focus-visible,.pl-item:focus-visible{outline:3px solid var(--blue);outline-offset:2px;border-radius:4px} /* Skip-to-content link (WCAG 2.4.1) */ .skip-link{position:absolute;left:-9999px;top:0;z-index:2000;background:var(--navy-900);color:#fff;padding:12px 18px;border-radius:0 0 8px 0;font-weight:600} .skip-link:focus{left:0} /* Cookie banner scroll region: give it room so it isn't a focusable scroll trap */ .cmplz-cookiebanner .cmplz-body{outline:none} /* Brand the cookie banner (was Complianz purple) */ .cmplz-cookiebanner{--cmplz-button-background-color:#e02b20} .cmplz-cookiebanner .cmplz-btn.cmplz-accept,.cmplz-cookiebanner .cmplz-btn.cmplz-accept-marketing{background:#e02b20 !important;border-color:#e02b20 !important;color:#fff !important} .cmplz-cookiebanner .cmplz-btn{border-radius:6px !important} .cmplz-cookiebanner a,.cmplz-links a{color:#475bb2 !important} /* Logged-out login form centered (consolidated from live snippet) */ .woocommerce-account:not(.logged-in) .woocommerce{display:block !important;max-width:460px !important;margin:1rem auto 2rem !important} .woocommerce-account:not(.logged-in) .woocommerce::before,.woocommerce-account:not(.logged-in) .woocommerce::after{display:none !important} .woocommerce-account:not(.logged-in) .woocommerce > h2,.woocommerce-account:not(.logged-in) #customer_login h2{text-align:center;font-size:1.6rem;margin:0 0 1.1rem} .woocommerce-account:not(.logged-in) form.woocommerce-form-login{border:1px solid #dfe3f0;border-radius:14px;padding:28px 26px;box-shadow:0 6px 24px rgba(7,11,34,.05);margin:0;width:auto;float:none} .woocommerce-account:not(.logged-in) .woocommerce-form-login button[name=login],.woocommerce-account:not(.logged-in) .woocommerce-form-login button.woocommerce-form-login__submit{width:100%;margin-top:8px} .woocommerce-account:not(.logged-in) .woocommerce-LostPassword{text-align:center;margin-top:10px} .woocommerce-account:not(.logged-in) .woocommerce-LostPassword a{color:#475bb2} /* a11y: strikethrough old price used opacity:.5 (killed contrast) — full opacity + readable color */ .woocommerce del,.woocommerce del .amount,.woocommerce del bdi,.price .old{opacity:1 !important;color:#5f6773 !important} /* Legal/text pages (page.php .entry-content): document-sized headings, not marketing sizes */ .entry-content h2{font-size:1.5rem;line-height:1.25;letter-spacing:normal;margin:1.7rem 0 .5rem} .entry-content h3{font-size:1.2rem;line-height:1.3;margin:1.3rem 0 .4rem} .entry-content p,.entry-content li{font-size:1.02rem;line-height:1.65} .entry-content ul{margin:0 0 1.1rem 1.25rem} .entry-content a{color:var(--blue);text-decoration:underline} /* ================================================================== * * v0.4.0 — CONVERSION + MOTION ENGINE (direct-response overhaul) * All new class names (no collisions). Motion is gated behind * prefers-reduced-motion. Contrast held at >=4.5:1 on all text. * ================================================================== */ /* --- Founding-member announcement bar (honest scarcity, no fake timer) --- */ .anncbar{background:linear-gradient(90deg,var(--navy-900),var(--navy-700));color:#fff;text-align:center;padding:.7rem 1rem;font-size:.95rem;position:relative;z-index:90} .anncbar p{margin:0;max-width:var(--wrap);margin-inline:auto} .anncbar strong{color:#fff} .anncbar .price-now{color:#ff8a80} /* light red on navy = ~5.4:1 */ .anncbar a{color:#fff;font-weight:700;text-decoration:underline;text-underline-offset:3px} .anncbar a:hover{color:#ffd7d3} /* --- CTA amplifier: soft breathing glow on the primary hero button --- */ .btn--glow{position:relative} @media(prefers-reduced-motion:no-preference){ .btn--glow{animation:wdywPulse 2.6s ease-in-out infinite} } @keyframes wdywPulse{ 0%,100%{box-shadow:0 14px 34px -14px rgba(224,43,32,.75),0 0 0 0 rgba(224,43,32,.45)} 50%{box-shadow:0 18px 40px -12px rgba(224,43,32,.9),0 0 0 10px rgba(224,43,32,0)} } /* --- Staggered scroll reveal (builds on existing .reveal) --- */ .reveal-stagger>*{opacity:0;transform:translateY(22px);transition:opacity .6s ease,transform .6s ease} .reveal-stagger.in>*{opacity:1;transform:none} .reveal-stagger.in>*:nth-child(2){transition-delay:.08s} .reveal-stagger.in>*:nth-child(3){transition-delay:.16s} .reveal-stagger.in>*:nth-child(4){transition-delay:.24s} @media(prefers-reduced-motion:reduce){.reveal-stagger>*{opacity:1;transform:none;transition:none}} /* --- Value stack ("here's everything you get" — anchors the $299) --- */ .vstack{background:var(--white);color:var(--ink);border:1px solid var(--line);border-radius:16px;padding:clamp(1.4rem,3vw,2.2rem);box-shadow:0 30px 60px -30px rgba(7,11,34,.25)} .vstack h3,.vstack .vs-total{color:var(--ink)} .vstack h3{font-size:1.15rem;margin:0 0 1rem} .vstack ul{list-style:none;margin:0;padding:0} .vstack li{display:flex;justify-content:space-between;gap:1rem;align-items:baseline;padding:.75rem 0;border-bottom:1px dashed var(--line)} .vstack li .vs-name{font-weight:600;color:var(--ink)} .vstack li .vs-name small{display:block;font-weight:400;color:var(--ink-soft);font-size:.85rem;margin-top:2px} .vstack li .vs-val{color:var(--ink-soft);white-space:nowrap;font-variant-numeric:tabular-nums} .vstack .vs-total{display:flex;justify-content:space-between;align-items:baseline;padding-top:1rem;font-weight:800} .vstack .vs-total .vs-strike{color:var(--ink-soft);text-decoration:line-through;font-weight:600} .vstack .vs-today{margin-top:.6rem;text-align:center;font-size:1.05rem} .vstack .vs-today b{color:var(--red);font-size:1.5rem} /* --- 27-module bundle visualizer (custom SVG, no stock photo) --- */ .bundle{display:block;width:100%;max-width:420px;margin:0 auto;height:auto;filter:drop-shadow(0 30px 45px rgba(7,11,34,.35))} @media(prefers-reduced-motion:no-preference){ .bundle{animation:wdywFloat 6s ease-in-out infinite} } @keyframes wdywFloat{0%,100%{transform:translateY(0)}50%{transform:translateY(-10px)}} /* --- Social-proof cards --- */ .proofgrid{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:1.1rem;margin-top:1.6rem} .pcard-q{background:var(--white);border:1px solid var(--line);border-radius:14px;padding:1.5rem;display:flex;flex-direction:column;gap:1rem;transition:transform .18s,box-shadow .18s} .pcard-q:hover{transform:translateY(-4px);box-shadow:0 24px 50px -24px rgba(7,11,34,.3)} .pcard-q blockquote{margin:0;font-size:1.02rem;line-height:1.5;color:var(--ink)} .pcard-q .who{display:flex;align-items:center;gap:.7rem;margin-top:auto} .pcard-q .ava{width:42px;height:42px;border-radius:50%;background:linear-gradient(135deg,var(--blue),var(--blue-2));color:#fff;display:grid;place-items:center;font-weight:800;font-size:1rem;flex:none} .pcard-q .nm{font-weight:700;color:var(--ink);line-height:1.2} .pcard-q .nm small{display:block;font-weight:500;color:var(--ink-soft);font-size:.94rem} .stars{color:#e8a400;letter-spacing:2px;font-size:1rem} /* amber on white ~4.6:1 */ /* --- Accessible accordion FAQ (native
, keyboard-ready) --- */ .acc{border:1px solid var(--line);border-radius:12px;background:var(--white);margin-bottom:.7rem;overflow:hidden} .acc>summary{cursor:pointer;list-style:none;padding:1.1rem 1.3rem;font-weight:700;font-size:1.05rem;display:flex;justify-content:space-between;align-items:center;gap:1rem} .acc>summary::-webkit-details-marker{display:none} .acc>summary::after{content:"+";font-size:1.4rem;color:var(--red);transition:transform .2s;line-height:1} .acc[open]>summary::after{transform:rotate(45deg)} .acc>summary:focus-visible{outline:3px solid var(--blue);outline-offset:-3px} .acc .acc-body{padding:0 1.3rem 1.2rem;color:var(--ink-soft);line-height:1.6} @media(prefers-reduced-motion:no-preference){ .acc[open] .acc-body{animation:wdywAccIn .28s ease} } @keyframes wdywAccIn{from{opacity:0;transform:translateY(-6px)}to{opacity:1;transform:none}} /* --- Section entrance heading accent underline --- */ .kicker-accent{display:inline-block;position:relative;padding-bottom:.35rem} .kicker-accent::after{content:"";position:absolute;left:0;bottom:0;height:3px;width:48px;background:var(--red);border-radius:3px} /* --- Watch page: Prev/Next controls (v0.4.3) --- */ .watch-controls{display:flex;align-items:center;gap:14px;margin-top:1.1rem} .watch-controls .watch-now{flex:1;margin-top:0} .wc-btn{flex:none;background:var(--navy-900);color:#fff;border:2px solid var(--navy-900);font-weight:700;font-size:.9rem;padding:.7rem 1.1rem;border-radius:8px;cursor:pointer;transition:transform .16s,background .16s,opacity .16s} .wc-btn:hover:not(:disabled){transform:translateY(-2px);background:var(--blue)} .wc-btn:disabled{opacity:.4;cursor:not-allowed} .wc-btn:focus-visible{outline:3px solid var(--blue);outline-offset:2px} @media(prefers-reduced-motion:reduce){.wc-btn{transition:none}} @media(max-width:520px){.watch-controls{flex-wrap:wrap}.watch-controls .watch-now{order:-1;flex-basis:100%}} /* ================================================================== * * v0.4.5 — CONVERSION AMPLIFIERS: sticky mobile buy-bar, stats band, * visual 5-part journey. Accessible + prefers-reduced-motion safe. * ================================================================== */ /* --- Sticky mobile buy-bar (mobile only; huge for cold social traffic) --- */ .wdyw-sticky{position:fixed;inset:auto 0 0 0;z-index:120;display:flex;align-items:center;justify-content:space-between;gap:12px;padding:.7rem 1rem;background:rgba(7,11,34,.97);border-top:1px solid rgba(255,255,255,.14);box-shadow:0 -10px 34px -14px rgba(0,0,0,.6);transform:translateY(115%)} .wdyw-sticky.is-in{transform:none} .wdyw-sticky__txt{color:#fff;font-size:.92rem;font-weight:600;line-height:1.2} .wdyw-sticky__txt strong{color:#ff8a80;font-size:1.08rem} .wdyw-sticky__txt s{color:#aab2dd;font-weight:500;margin-left:2px} .wdyw-sticky .btn{flex:none} @media(min-width:861px){.wdyw-sticky{display:none}} @media(prefers-reduced-motion:no-preference){.wdyw-sticky{transition:transform .32s ease}} @media(prefers-reduced-motion:reduce){.wdyw-sticky{transition:none}} /* --- Credibility stats band (with count-up) --- */ .statsband{padding:clamp(44px,6vw,74px) 0} .stats{display:grid;grid-template-columns:repeat(4,1fr);gap:22px;text-align:center} .stat__n{display:inline-block;font-size:clamp(2.4rem,5vw,3.6rem);font-weight:800;color:var(--navy-900);line-height:1;letter-spacing:-.02em} .stat__l{display:block;margin-top:.55rem;font-size:.82rem;font-weight:700;color:var(--ink-soft);text-transform:uppercase;letter-spacing:.09em} @media(max-width:640px){.stats{grid-template-columns:repeat(2,1fr);gap:30px}} /* --- Visual 5-part journey (accessible: real ordered list + text) --- */ .journey{list-style:none;max-width:760px;margin-top:2.5rem;position:relative} .journey li{position:relative;display:flex;gap:20px;align-items:flex-start;padding:0 0 30px;border-bottom:none} .journey li:last-child{padding-bottom:0} .journey li:not(:last-child)::before{content:"";position:absolute;left:23px;top:48px;bottom:6px;width:2px;background:linear-gradient(var(--blue),var(--line))} .journey .n{flex:none;width:48px;height:48px;border-radius:50%;background:var(--navy-900);color:#fff;display:inline-flex;align-items:center;justify-content:center;font-weight:800;font-size:1.05rem;position:relative;z-index:1;box-shadow:0 8px 20px -8px rgba(7,11,34,.5);transition:transform .18s,background .18s} .journey li:hover .n{transform:scale(1.08);background:var(--red)} .journey .j-b{padding-top:9px} .journey .j-b strong{font-size:1.15rem;display:block;margin-bottom:.2rem} .journey .j-b span{color:var(--ink-soft)} @media(prefers-reduced-motion:reduce){.journey .n{transition:none}} /* --- Contact page (v0.4.6) --- */ .contact-hero{min-height:auto;padding-top:clamp(70px,9vw,110px);padding-bottom:clamp(50px,7vw,80px)} .contact-art{width:96px;height:auto;margin:0 auto 1.4rem;display:block} .contactform{display:flex;flex-direction:column;gap:1.1rem;position:relative} .contactform label{display:flex;flex-direction:column;gap:.4rem;font-weight:700;color:var(--ink);font-size:.95rem} .contactform input,.contactform textarea{font:inherit;font-weight:400;padding:.85rem 1rem;border:1px solid var(--line);border-radius:8px;background:#fff;color:var(--ink);width:100%} .contactform input:focus-visible,.contactform textarea:focus-visible{outline:3px solid var(--blue);outline-offset:1px;border-color:var(--blue)} .contactform textarea{resize:vertical;min-height:120px} .contactform button{align-self:flex-start;margin-top:.3rem} .c-alt{font-size:.92rem;color:var(--ink-soft);margin-top:.2rem} .c-alt a{color:var(--blue);text-decoration:underline} .c-done{background:#eaf6ef;border:1px solid #b7e0c6;color:#1c6b3a;padding:1.1rem 1.3rem;border-radius:12px;font-weight:600;line-height:1.5} /* ================================================================== * * v0.5.3 — Mobile checkout: fix horizontal overflow at the ROOT. * select2/selectWoo leaves the original country/state