/* ============ GLOBAL: escape the theme's 700px constrained post-content, homepage only ============ */ html, body { overflow-x: clip !important; } /* clip, not hidden: hidden turns html/body into scroll containers and breaks the sticky header */ .wwa-embed-calc-link{ margin:0 0 1.5rem; } .wwa-embed-calc-link a{ color:#0052CC; font-weight:600; font-size:.95rem; text-decoration:none; } .wwa-embed-calc-link a:hover{ text-decoration:underline; } body.home { margin: 0 !important; padding: 0 !important; } body.home .wp-site-blocks, body.home main, body.home .entry-content { padding-left: 0 !important; padding-right: 0 !important; max-width: 100% !important; margin-left: 0 !important; margin-right: 0 !important; } body.home .is-layout-constrained > #wwaHome, body.home #wwaHome { width: 100% !important; max-width: 100vw !important; margin-left: 0 !important; margin-right: 0 !important; position: static !important; } #wwaHome, #wwaHome *{box-sizing:border-box;} #wwaHome{ --wwa-hero:#0F172A; --wwa-hero-dark:#1e293b; --wwa-bg:#f8fafc; --wwa-panel:#ffffff; --wwa-panel-2:#f1f5f9; --wwa-border:#e2e8f0; --wwa-text:#1e293b; --wwa-dim:#64748b; --wwa-accent:#0284c7; --wwa-cta:#0052CC; --wwa-cta-dark:#003D99; --wwa-slate:#475569; --wwa-warn:#d97706; --wwa-danger:#dc2626; --wwa-purple:#7c3aed; font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Arial,sans-serif; color:var(--wwa-text); background:var(--wwa-bg); line-height:1.6; overflow-x:hidden; } #wwaHome a{text-decoration:none; color:inherit;} #wwaHome .wwa-wrap{max-width:1200px; margin:0 auto; padding:0 1.5rem;} #wwaHome section{padding:80px 0;} #wwaHome h2.wwa-h2{font-size:28px; font-weight:700; letter-spacing:-.01em; color:#1A202C; margin:0 0 14px;} @media (max-width:768px){ #wwaHome h2.wwa-h2{ font-size:23px; } } #wwaHome p.wwa-lede{color:var(--wwa-dim); max-width:60ch; margin:0 0 2.5rem; font-size:1.05rem;} #wwaHome .wwa-center{text-align:center; margin-left:auto; margin-right:auto;} #wwaHome p.wwa-lede.wwa-center{text-align:center; margin:0 auto 2.5rem;} /* ---------- HERO (full-bleed) ---------- */ #wwaHome .wwa-hero{ background:linear-gradient(180deg,#F8FAFC 0%,#F0F9FF 100%); color:#0F172A; border-bottom:1px solid #E2E8F0; padding:5rem 0 6rem; text-align:center; } @media (max-width:768px){ #wwaHome .wwa-hero{ padding-top:100px !important; } #wwaHome .wwa-hero h1{ font-size:26px !important; line-height:1.25 !important; } #wwaHome .wwa-hero p.wwa-sub{ font-size:15px !important; color:#475569 !important; } } #wwaHome .wwa-hero__inner{max-width:1200px; margin:0 auto; display:grid; grid-template-columns:1.05fr .95fr; gap:3rem; align-items:center; text-align:left;} #wwaHome .wwa-hero__copy{max-width:560px;} #wwaHome .wwa-hero__diagram{display:flex; align-items:center; justify-content:center;} @media (max-width:767px){ #wwaHome .wwa-hero__diagram{ display:none !important; } } @media (max-width:900px){ #wwaHome .wwa-hero__inner{grid-template-columns:1fr; text-align:center; gap:2.5rem;} #wwaHome .wwa-hero__copy{max-width:620px; margin:0 auto;} #wwaHome .wwa-hero__diagram{max-width:230px; margin:1.5rem auto 0;} } #wwaHome .wwa-eyebrow{ display:inline-flex; align-items:center; gap:.4rem; font-size:.78rem; font-weight:700; text-transform:uppercase; letter-spacing:.06em; background:rgba(255,255,255,.14); border:1px solid rgba(255,255,255,.3); padding:.4rem .9rem; border-radius:999px; margin-bottom:1.5rem; } #wwaHome .wwa-hero h1{font-size:2.9rem; line-height:1.15; font-weight:800; letter-spacing:-.02em; margin:0 0 1.25rem;} #wwaHome .wwa-hero h1 em{font-style:normal; color:#0284C7;} #wwaHome .wwa-hero p.wwa-sub{font-size:1.15rem; color:#475569; max-width:56ch; margin:0 0 2.25rem;} @media (max-width:900px){ #wwaHome .wwa-hero p.wwa-sub{ margin:0 auto 2.25rem; } } #wwaHome .wwa-cta-row{display:flex; flex-wrap:wrap; gap:1rem; justify-content:flex-start;} @media (max-width:900px){ #wwaHome .wwa-cta-row{ justify-content:center; } } #wwaHome .wwa-btn{ display:inline-flex; align-items:center; gap:.5rem; font-weight:700; font-size:1rem; padding:.9rem 1.6rem; border-radius:10px; border:1px solid transparent; cursor:pointer; } #wwaHome .wwa-btn--cta{background:var(--wwa-cta); color:#fff; box-shadow:0 4px 14px rgba(234,88,12,.35);} #wwaHome .wwa-btn--cta:hover{background:var(--wwa-cta-dark);} #wwaHome .wwa-btn--ghost{background:transparent; color:#fff; border:1px solid rgba(255,255,255,.4);} #wwaHome .wwa-btn--ghost:hover{background:rgba(255,255,255,.1); border-color:rgba(255,255,255,.7);} /* ---------- TRUST BAR + QUICK SYMPTOM SELECTOR ---------- */ #wwaHome .wwa-trustbar{background:#ffffff; border-bottom:1px solid var(--wwa-border);} #wwaHome .wwa-trustbar .wwa-wrap{padding-top:1.5rem; padding-bottom:1.5rem;} #wwaHome .wwa-symptom-row{display:flex; flex-wrap:wrap; align-items:center; justify-content:center; gap:1rem; margin-bottom:1.25rem;} #wwaHome .wwa-symptom-label{color:var(--wwa-slate); font-weight:700; font-size:.82rem; text-transform:uppercase; letter-spacing:.04em;} #wwaHome .wwa-symptom-pills{display:flex; flex-wrap:wrap; gap:.65rem; justify-content:center;} #wwaHome .wwa-pill{ display:inline-flex; align-items:center; gap:.45rem; background:#fff; border:1px solid var(--wwa-border); color:#0f172a; font-size:.85rem; font-weight:700; padding:.55rem 1.05rem; border-radius:999px; box-shadow:0 1px 2px rgba(15,23,42,.04); transition:transform .15s ease, box-shadow .15s ease, border-color .15s ease; } #wwaHome .wwa-pill:hover{transform:translateY(-2px); box-shadow:0 6px 16px rgba(15,23,42,.1); border-color:#94a3b8;} #wwaHome .wwa-pill__icon{font-size:1.05rem;} #wwaHome .wwa-trust-row{display:flex; flex-wrap:wrap; justify-content:center; gap:2.5rem; padding-top:1.1rem; border-top:1px solid var(--wwa-border);} #wwaHome .wwa-trust-row span{ display:flex; align-items:center; gap:.5rem; font-size:.92rem; font-weight:600; color:var(--wwa-slate); } #wwaHome .wwa-trust-row svg{flex:0 0 auto;} @media (max-width:768px){ #wwaHome .wwa-trust-row span, #wwaHome .wwa-trust-row span a{ font-size:14px !important; color:#475569 !important; text-decoration:none !important; } #wwaHome .wwa-trust-row span{ align-items:center; gap:.45rem; } } /* ---------- CALCULATOR PROMO CARD ---------- */ #wwaHome .wwa-calc-section{padding-top:80px;} #wwaHome .wwa-calc-banner{ background:var(--wwa-panel); border:1px solid var(--wwa-border); border-radius:20px; box-shadow:0 16px 40px rgba(11,92,138,.12); display:flex; flex-wrap:wrap; align-items:center; gap:2rem; padding:2.5rem; } #wwaHome .wwa-calc-banner__icon{ flex:0 0 auto; width:76px; height:76px; border-radius:16px; background:#e0f2fe; display:flex; align-items:center; justify-content:center; } #wwaHome .wwa-calc-banner__body{flex:1 1 380px;} #wwaHome .wwa-calc-banner__body span.wwa-kicker{font-size:.78rem; font-weight:700; text-transform:uppercase; letter-spacing:.05em; color:var(--wwa-accent);} #wwaHome .wwa-calc-banner__body h3{margin:.35rem 0 .4rem; font-size:1.5rem; font-weight:800;} #wwaHome .wwa-calc-banner__body p{margin:0 !important; padding-bottom:0 !important; color:var(--wwa-dim); max-width:60ch;} #wwaHome .wwa-calc-banner__cta{flex:0 0 auto;} /* ---------- SILOS / CARD GRIDS ---------- */ #wwaHome .wwa-silo-head{display:flex; align-items:baseline; justify-content:space-between; flex-wrap:wrap; gap:.75rem; margin-bottom:1.75rem;} #wwaHome .wwa-grid{display:flex; flex-direction:column; gap:1rem;} #wwaHome .wwa-card{ background:var(--wwa-panel); border:1px solid var(--wwa-border); border-radius:14px; overflow:hidden; display:flex; flex-direction:row; transition:transform .18s ease, box-shadow .18s ease, border-color .18s ease; } @media (max-width:768px){ #wwaHome .wwa-grid{ display:flex; flex-direction:row; flex-wrap:nowrap; overflow-x:auto; gap:16px; scroll-snap-type:x mandatory; -webkit-overflow-scrolling:touch; scrollbar-width:thin; scrollbar-color:#cbd5e1 transparent; padding:4px 1.5rem 10px; margin:0 -1.5rem; } #wwaHome .wwa-grid::-webkit-scrollbar{ height:6px; } #wwaHome .wwa-grid::-webkit-scrollbar-thumb{ background:#cbd5e1; border-radius:999px; } #wwaHome .wwa-card{ flex:0 0 85%; flex-direction:column; scroll-snap-align:start; } } #wwaHome .wwa-card:hover{transform:translateY(-4px); box-shadow:0 14px 30px rgba(15,23,42,.1); border-color:#cbd5e1;} #wwaHome .wwa-card__media{width:240px; flex:0 0 240px; aspect-ratio:16/9; height:auto; background-size:cover; background-position:center; position:relative;} @media (max-width:768px){ #wwaHome .wwa-card__media{ width:100%; flex:0 0 auto; height:150px; } } #wwaHome .wwa-card__media.wwa-noimg{ display:flex; align-items:center; justify-content:center; position:relative; overflow:hidden; background: radial-gradient(circle at 28% 22%, rgba(255,255,255,.22), transparent 60%), linear-gradient(135deg, var(--tag-color,#0284c7) 0%, #0f172a 125%); } #wwaHome .wwa-card__media.wwa-noimg svg{ width:34px; height:34px; filter:drop-shadow(0 2px 6px rgba(0,0,0,.3)); } #wwaHome .wwa-card-badge{ position:absolute; top:.6rem; right:.6rem; font-size:.62rem; font-weight:700; text-transform:uppercase; letter-spacing:.02em; color:#0f172a; background:rgba(255,255,255,.92); padding:.28rem .55rem; border-radius:6px; font-family:ui-monospace,SFMono-Regular,Menlo,monospace; } #wwaHome .wwa-tag{ position:absolute; top:.6rem; left:.6rem; font-size:.68rem; font-weight:700; text-transform:uppercase; letter-spacing:.04em; color:#fff; background:var(--tag-color,#0284c7); padding:.3rem .6rem; border-radius:999px; } #wwaHome .wwa-card__body{padding:1.2rem 1.25rem 1.4rem; display:flex; flex-direction:column; justify-content:center; gap:.55rem; flex:1;} #wwaHome .wwa-card__body h3{margin:0; font-size:1.05rem; font-weight:700; line-height:1.35;} #wwaHome .wwa-card__body p{margin:0; font-size:.89rem; color:var(--wwa-dim); flex:1;} #wwaHome .wwa-card__link{font-size:.82rem; font-weight:700; color:var(--wwa-accent); margin-top:.25rem;} #wwaHome .wwa-card:hover .wwa-card__link{color:var(--wwa-cta);} /* ---------- DIRECTORY / pSEO ---------- */ #wwaHome .wwa-directory{background:#ffffff; color:#0f172a; border-top:1px solid var(--wwa-border); border-bottom:1px solid var(--wwa-border);} #wwaHome .wwa-dir-grid{display:grid; grid-template-columns:repeat(auto-fill,minmax(220px,1fr)); gap:20px;} #wwaHome .wwa-dir-card{ background:#ffffff; border:1.5px solid #cbd5e1; border-radius:14px; padding:28px 30px; box-shadow:0 2px 8px rgba(15,23,42,.05); display:flex; flex-direction:column; gap:.45rem; transition:transform .15s ease, box-shadow .15s ease, border-color .15s ease; } #wwaHome .wwa-dir-card:hover{transform:translateY(-3px); box-shadow:0 14px 28px rgba(15,23,42,.12); border-color:var(--wwa-accent);} #wwaHome .wwa-dir-card .wwa-dir-count{font-size:.72rem; font-weight:700; color:var(--wwa-accent); text-transform:uppercase; letter-spacing:.04em;} #wwaHome .wwa-dir-card h3{margin:0; font-size:1rem; font-weight:700;} #wwaHome .wwa-dir-card p{margin:0; font-size:.82rem; color:var(--wwa-dim);} #wwaHome .wwa-dir-card.wwa-dir-soon{border-style:dashed; opacity:.75;} #wwaHome .wwa-dir-note{font-size:.85rem; color:var(--wwa-dim); margin-top:1.75rem; max-width:70ch;} /* ---------- E-E-A-T (2 column) ---------- */ #wwaHome .wwa-eeat-band{ background:#ffffff; color:#0f172a; } #wwaHome .wwa-eeat-band .wwa-lede{ color:#475569; } #wwaHome .wwa-eeat-cards{display:grid; grid-template-columns:repeat(auto-fit,minmax(230px,1fr)); gap:1.5rem;} #wwaHome .wwa-eeat-card{background:#f8fafc; border:1px solid #e2e8f0; border-radius:14px; padding:24px;} #wwaHome .wwa-eeat-card__icon, #wwaHome .wwa-eeat-card__num{ width:44px; height:44px; border-radius:12px; background:#e0f2fe; color:#0284c7; display:flex; align-items:center; justify-content:center; font-weight:800; margin-bottom:1rem; } #wwaHome .wwa-eeat-card h3{margin:0 0 .5rem; font-size:1.02rem; font-weight:700; color:#0f172a;} #wwaHome .wwa-eeat-card p{margin:0; font-size:.9rem; color:#475569;} /* ---------- FAQ ACCORDION ---------- */ #wwaHome .wwa-faq{max-width:820px; margin:0 auto;} #wwaHome details.wwa-faq-item{ background:var(--wwa-panel); border:1px solid var(--wwa-border); border-radius:14px; padding:0; margin-bottom:1rem; } #wwaHome details.wwa-faq-item summary{ font-weight:700; font-size:1.02rem; cursor:pointer; list-style:none; display:flex; justify-content:space-between; align-items:center; gap:1.25rem; padding:20px; outline:none; } #wwaHome details.wwa-faq-item summary:focus{ outline:none; box-shadow:none; } #wwaHome details.wwa-faq-item summary::-webkit-details-marker{display:none;} #wwaHome details.wwa-faq-item summary::after{content:"+"; font-size:1.5rem; font-weight:400; color:var(--wwa-accent); flex:0 0 auto;} #wwaHome details.wwa-faq-item[open] summary::after{content:"–";} #wwaHome details.wwa-faq-item[open]{border-color:#bae0f7;} #wwaHome details.wwa-faq-item p{margin:0; padding:16px 20px 24px 20px; color:var(--wwa-dim); font-size:.96rem; line-height:1.65;} /* ---------- FOOTER CTA ---------- */ #wwaHome .wwa-final-cta{ background:linear-gradient(165deg,var(--wwa-hero) 0%,var(--wwa-hero-dark) 100%); color:#fff; border-radius:20px; text-align:center; padding:3.5rem 2rem; } #wwaHome .wwa-final-cta h2{color:#fff;} #wwaHome .wwa-final-cta p{color:#dceefb; max-width:56ch; margin:0 auto 1.9rem;} #wwaHome .wwa-disclosure{color:#bae6fd !important; max-width:52ch; font-size:.8rem; margin:1.5rem auto 0 !important; opacity:.9;} /* ---------- RESPONSIVE ---------- */ @media (max-width:900px){ #wwaHome .wwa-eeat-grid{grid-template-columns:1fr; gap:2.25rem;} } @media (max-width:640px){ #wwaHome section{padding:50px 0;} #wwaHome .wwa-calc-section{padding-top:50px;} #wwaHome .wwa-hero{padding:3.5rem 0 4rem;} #wwaHome .wwa-hero h1{font-size:2rem;} #wwaHome .wwa-trustbar .wwa-wrap{gap:1.1rem 1.5rem;} #wwaHome .wwa-trust-row{ flex-direction:column; gap:.85rem; width:fit-content; margin:0 auto; } #wwaHome .wwa-calc-banner{padding:1.6rem; flex-direction:column; text-align:center; gap:1rem;} #wwaHome .wwa-tag, #wwaHome .wwa-card-badge{ font-size:10px; padding:.22rem .5rem; } #wwaHome .wwa-calc-banner__cta{width:100%; margin-top:12px !important; padding-top:0 !important;} #wwaHome .wwa-calc-banner__cta .wwa-btn{width:100%; justify-content:center;} } /* Intentionally no automatic prefers-color-scheme override: the rest of the site (header, footer, articles) is fixed-light with no dark mode support, so this page staying fixed-light too keeps it visually consistent site-wide. */ /* ---------- QUICK DIAGNOSTIC SHORTCUTS ---------- */ /* ---------- DIAGNOSTIC CHEAT SHEET TABLE ---------- */ #wwaHome .wwa-zone-white{ background:#ffffff; padding:70px 0; } #wwaHome .wwa-cheatsheet-section{ padding-bottom:0; margin-top:0; } #wwaHome .wwa-aff-disclosure{ font-size:13px; color:#718096; text-align:center; max-width:70ch; margin:0 auto 16px; line-height:1.5; } #wwaHome .wwa-aff-disclosure a{ color:#0052CC; text-decoration:underline; } @media (max-width:640px){ #wwaHome .wwa-cheatsheet-section{ margin-top:40px; } } #wwaHome .wwa-table-wrap{ overflow-x:auto; -webkit-overflow-scrolling:touch; border:1px solid var(--wwa-border); border-radius:14px; scrollbar-width:thin; scrollbar-color:#cbd5e1 #f1f5f9; } #wwaHome .wwa-table-wrap::-webkit-scrollbar{ height:6px; } #wwaHome .wwa-table-wrap::-webkit-scrollbar-track{ background:#f1f5f9; } #wwaHome .wwa-table-wrap::-webkit-scrollbar-thumb{ background:#cbd5e1; border-radius:999px; } #wwaHome table.wwa-cheatsheet{ width:100%; border-collapse:collapse; min-width:640px; background:#fff; } #wwaHome table.wwa-cheatsheet th{ background:#0f172a; color:#fff; text-align:left; padding:.9rem 1.2rem; font-size:.78rem; text-transform:uppercase; letter-spacing:.03em; } #wwaHome table.wwa-cheatsheet td{ padding:1rem 1.2rem; font-size:.92rem; color:#1e293b; border-top:1px solid var(--wwa-border); } #wwaHome table.wwa-cheatsheet tbody tr:nth-child(even){ background:#f8fafc; } #wwaHome .wwa-aff-badge{ background:#F0F7FF; border:1px solid #BAE6FD; color:#0052CC; font-weight:600; font-size:14px; border-radius:6px; padding:8px 14px; display:inline-flex; align-items:center; justify-content:center; text-align:center; text-decoration:none; line-height:1.3; } #wwaHome .wwa-aff-badge:hover{ background:#E0F2FE; border-color:#0052CC; } @media (max-width:640px){ #wwaHome .wwa-table-wrap{ overflow-x:visible; border:none; border-radius:0; } #wwaHome table.wwa-cheatsheet{ display:block; width:100%; min-width:0; border-collapse:separate; background:transparent; } #wwaHome table.wwa-cheatsheet thead{ display:none; } #wwaHome table.wwa-cheatsheet tbody{ display:flex; flex-direction:column; gap:12px; } #wwaHome table.wwa-cheatsheet tr{ display:block; background:#fff; border:1px solid var(--wwa-border); border-radius:12px; padding:14px 16px; box-shadow:0 1px 3px rgba(15,23,42,.05); } #wwaHome table.wwa-cheatsheet tbody tr:nth-child(even){ background:#fff; } #wwaHome table.wwa-cheatsheet td{ display:block; padding:3px 0; border-top:none; font-size:.9rem; } #wwaHome table.wwa-cheatsheet td:nth-of-type(1){ font-weight:700; color:#0f172a; font-size:.95rem; padding-bottom:8px; border-bottom:1px solid var(--wwa-border); margin-bottom:8px; } #wwaHome table.wwa-cheatsheet td:nth-of-type(1)::before{ content:"Symptom"; display:block; font-size:.66rem; font-weight:700; text-transform:uppercase; letter-spacing:.04em; color:var(--wwa-dim); margin-bottom:2px; } #wwaHome table.wwa-cheatsheet td:nth-of-type(2)::before{ content:"Likely Cause"; display:block; font-size:.66rem; font-weight:700; text-transform:uppercase; letter-spacing:.04em; color:var(--wwa-dim); margin-bottom:2px; } #wwaHome table.wwa-cheatsheet td:nth-of-type(3){ padding-top:12px; } #wwaHome table.wwa-cheatsheet td:nth-of-type(3)::before{ content:"Recommended Fix"; display:block; font-size:.66rem; font-weight:700; text-transform:uppercase; letter-spacing:.04em; color:var(--wwa-dim); margin-bottom:6px; } #wwaHome .wwa-aff-badge{ display:flex; width:100%; } } /* ---------- EXPLORE ALL BUTTON ---------- */ #wwaHome .wwa-explore-all{ text-align:center; margin-top:1.75rem; } #wwaHome .wwa-btn--secondary{ display:inline-flex; align-items:center; gap:.5rem; font-weight:700; font-size:.92rem; padding:.75rem 1.4rem; border-radius:10px; border:1.5px solid var(--wwa-accent); color:var(--wwa-accent); background:transparent; transition:background .15s ease, color .15s ease; } #wwaHome .wwa-btn--secondary:hover{ background:var(--wwa-accent); color:#fff; } /* ---------- EMBEDDED CALCULATOR ---------- */ html{ scroll-behavior:smooth; } #wwaHome .wwa-embed-calc-wrap{ padding:4rem 0; scroll-margin-top:20px; } #wwaHome .wwa-embed-calc-card{ max-width:920px; margin:0 auto; background:#ffffff; border:1px solid var(--wwa-border); border-radius:16px; box-shadow:0 20px 25px -5px rgba(0,0,0,.1), 0 8px 10px -6px rgba(0,0,0,.1); padding:1.75rem 2rem 2.25rem; } #wwaHome .wwa-embed-calc-head{ margin-bottom:1.5rem; } #wwaHome .wwa-app-chrome{ display:flex; align-items:center; gap:1rem; padding-bottom:1.25rem; margin-bottom:1.5rem; border-bottom:1px solid var(--wwa-border); } #wwaHome .wwa-app-chrome__dots{ display:flex; gap:.4rem; flex:0 0 auto; } #wwaHome .wwa-app-chrome__dots span{ width:11px; height:11px; border-radius:50%; background:#e2e8f0; display:block; } #wwaHome .wwa-app-chrome__dots span:nth-child(1){ background:#f87171; } #wwaHome .wwa-app-chrome__dots span:nth-child(2){ background:#fbbf24; } #wwaHome .wwa-app-chrome__dots span:nth-child(3){ background:#4ade80; } #wwaHome .wwa-app-chrome__url{ flex:1; font-family:ui-monospace,SFMono-Regular,Menlo,monospace; font-size:.78rem; color:var(--wwa-dim); background:#f8fafc; border:1px solid var(--wwa-border); border-radius:6px; padding:.4rem .75rem; } #wwaHome .wwa-app-chrome__status{ flex:0 0 auto; display:flex; align-items:center; gap:.4rem; font-size:.78rem; font-weight:700; color:#16a34a; } #wwaHome .wwa-app-chrome__pulse{ width:8px; height:8px; border-radius:50%; background:#4ade80; animation:wwaChromePulse 1.8s infinite; } @keyframes wwaChromePulse{ 0%{ box-shadow:0 0 0 0 rgba(74,222,128,.5); } 70%{ box-shadow:0 0 0 8px rgba(74,222,128,0); } 100%{ box-shadow:0 0 0 0 rgba(74,222,128,0); } } @media (max-width:640px){ #wwaHome .wwa-embed-calc-card{ padding:1.25rem 1.25rem 1.75rem; } #wwaHome .wwa-app-chrome__url{ display:none; } #wwaHome .wwa-app-chrome{ justify-content:space-between; } } #wwaHome #wwaCalc{ width:100%; max-width:100%; margin:0; } #wwaHome #wwaCalc .wwa-btn{ min-height:48px; padding:14px 28px; } @media (max-width:640px){ #wwaHome .wwa-embed-calc-wrap{ padding:2.5rem 0 50px; } #wwaHome #wwaCalc .wwa-calc__nav{ flex-direction:column; gap:.75rem; } #wwaHome #wwaCalc .wwa-calc__nav .wwa-btn{ width:100%; text-align:center; justify-content:center; } } /* ---------- CALCULATOR WIZARD UI REFINEMENTS ---------- */ /* Step navigation: clean tab strip with a bottom accent bar on the active step */ #wwaHome #wwaCalc .wwa-calc__progress{ gap:0; border-bottom:1px solid #e2e8f0; margin-bottom:2rem; flex-wrap:nowrap; overflow-x:auto; } #wwaHome #wwaCalc .wwa-calc__progress-step{ background:transparent; border:none; border-radius:0; padding:0 1rem .85rem 0; margin-right:1rem; color:#718096; font-weight:600; position:relative; white-space:nowrap; } #wwaHome #wwaCalc .wwa-calc__progress-step::after{ content:""; position:absolute; left:0; right:1rem; bottom:-1px; height:3px; background:transparent; border-radius:3px 3px 0 0; } #wwaHome #wwaCalc .wwa-calc__progress-step span.wwa-num{ background:#e2e8f0; color:#718096; } #wwaHome #wwaCalc .wwa-calc__progress-step.active{ color:#0052CC; font-weight:800; } #wwaHome #wwaCalc .wwa-calc__progress-step.active::after{ background:#0052CC; } #wwaHome #wwaCalc .wwa-calc__progress-step.active span.wwa-num{ background:#0052CC; color:#fff; } #wwaHome #wwaCalc .wwa-calc__progress-step.done{ color:#0052CC; } #wwaHome #wwaCalc .wwa-calc__progress-step.done span.wwa-num{ background:#0052CC; color:#fff; } #wwaHome #wwaCalc .wwa-calc__progress-line{ display:none; } @media (max-width:640px){ #wwaHome #wwaCalc .wwa-calc__progress-step{ padding-right:.6rem; margin-right:.6rem; } } /* Step 1: touch-friendly checkbox cards */ #wwaHome #wwaCalc .wwa-check{ padding:12px 16px; border-radius:8px; border-width:1.5px; } #wwaHome #wwaCalc .wwa-check:has(input:checked){ border:2px solid #0052CC; background:#F0F7FF; } #wwaHome #wwaCalc .wwa-check input:checked + .wwa-check__box{ background:#0052CC; border-color:#0052CC; } #wwaHome #wwaCalc .wwa-check input:checked ~ .wwa-check__label strong{ color:#0052CC; } /* Step 3: focus states on numeric inputs */ #wwaHome #wwaCalc .wwa-field input:focus{ outline:none; border-color:#0052CC; box-shadow:0 0 0 3px rgba(0,82,204,.15); } /* Buttons: primary blue, subtle ghost Back button, generous nav spacing */ #wwaHome #wwaCalc .wwa-btn--primary{ background:#0052CC; } #wwaHome #wwaCalc .wwa-btn--primary:hover{ background:#003D99; filter:none; } #wwaHome #wwaCalc .wwa-btn--ghost{ background:transparent; color:#718096; border:none; padding-left:.5rem; padding-right:.5rem; } #wwaHome #wwaCalc .wwa-btn--ghost:hover{ color:#0052CC; background:transparent; text-decoration:underline; } #wwaHome #wwaCalc .wwa-calc__nav{ margin-top:32px; } /* ---------- CALCULATOR: STEP 4 DIAGNOSIS / RESULTS VIEW ---------- */ /* Spec cards: white, 8px radius, soft shadow, big blue headline numbers */ #wwaHome #wwaCalc .wwa-results__summary{ grid-template-columns:repeat(3,1fr); } @media (max-width:900px){ #wwaHome #wwaCalc .wwa-results__summary{ grid-template-columns:repeat(2,1fr); } } @media (max-width:640px){ #wwaHome #wwaCalc .wwa-results__summary{ grid-template-columns:1fr; } } #wwaHome #wwaCalc .wwa-stat{ background:#ffffff; border:1px solid #e2e8f0; border-radius:8px; padding:1.25rem; box-shadow:0 4px 6px rgba(0,0,0,.05); } #wwaHome #wwaCalc .wwa-stat__value{ font-size:24px; font-weight:700; color:#0052CC; } /* Recommended product cards: same white/8px/shadow system */ #wwaHome #wwaCalc .wwa-product{ background:#ffffff; border:1px solid #e2e8f0; border-left:4px solid #0052CC; border-radius:8px; box-shadow:0 4px 6px rgba(0,0,0,.05); } #wwaHome #wwaCalc .wwa-product__badge{ background:#0052CC; } /* Utility action bar: neat bordered ghost buttons (scoped so it doesn't affect the Step-nav "Back" button, which stays a borderless text button by design) */ #wwaHome #wwaCalc .wwa-calc__actions .wwa-btn--ghost{ border:1px solid #e2e8f0; color:#4A5568; padding:10px 18px; } #wwaHome #wwaCalc .wwa-calc__actions .wwa-btn--ghost:hover{ border-color:#0052CC; color:#0052CC; background:#F0F7FF; text-decoration:none; } #wwaHome #wwaCalc #wwaPrint{ background:#f1f5f9; border-color:#cbd5e1; } #wwaHome #wwaCalc #wwaPrint:hover{ background:#e2e8f0; border-color:#94a3b8; color:#1e293b; } @media (max-width:768px){ #wwaHome #wwaCalc #wwaDiagnoseBtn{ padding:12px 20px !important; font-size:16px !important; width:100%; } #wwaHome #wwaCalc .wwa-calc__actions{ display:grid !important; grid-template-columns:repeat(2, 1fr) !important; gap:10px !important; width:100% !important; box-sizing:border-box !important; margin-top:24px !important; } #wwaHome #wwaCalc .wwa-calc__actions .wwa-btn{ width:100% !important; padding:12px 6px !important; font-size:13px !important; line-height:1.2 !important; text-align:center !important; box-sizing:border-box !important; margin:0 !important; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; } #wwaHome #wwaCalc #wwaPrint .wwa-btn-icon{ margin-right:6px; } } /* ---------- TABLE SWIPE HINT ---------- */ #wwaHome .wwa-swipe-hint{ display:none; } @media (max-width:768px){ #wwaHome .wwa-swipe-hint{ display:block; text-align:right; font-size:12px; font-weight:600; color:#0052CC; margin-bottom:6px; animation:wwaSwipePulse 1.8s ease-in-out infinite; } } @keyframes wwaSwipePulse{ 0%,100%{ opacity:1; } 50%{ opacity:.4; } } @media (max-width:640px){ #wwaHome .wwa-swipe-hint{ display:none !important; } } /* Symptom and Treatment Matrix, mobile: below 768px the wide table is swapped for an accordion of the same rows (tap a symptom to see cause + fix). */ #wwaHome .wwa-cheatsheet-accordion{ display:none; } @media (max-width:767px){ #wwaHome .wwa-cheatsheet-section .wwa-table-wrap{ display:none; } #wwaHome .wwa-cheatsheet-accordion{ display:block; margin-top:1rem; text-align:left; } } #wwaHome .wwa-cheatsheet-item{ background:#fff; border:1px solid #e2e8f0; border-radius:10px; margin:0 0 10px; } #wwaHome .wwa-cheatsheet-item summary{ position:relative; display:flex; align-items:center; min-height:44px; box-sizing:border-box; padding:12px 44px 12px 16px; list-style:none; cursor:pointer; font-weight:600; font-size:.98rem; line-height:1.35; color:#0F172A; } #wwaHome .wwa-cheatsheet-item summary::-webkit-details-marker{ display:none; } #wwaHome .wwa-cheatsheet-item summary::after{ content:"+"; position:absolute; right:16px; top:50%; transform:translateY(-50%); font-size:1.3rem; color:#0052CC; } #wwaHome .wwa-cheatsheet-item[open] summary::after{ content:"\2212"; } #wwaHome .wwa-cheatsheet-item__body{ padding:0 16px 14px; } #wwaHome .wwa-cheatsheet-item__body p{ margin:0 0 .7rem; font-size:.92rem; line-height:1.5; color:#334155; } #wwaHome .wwa-cheatsheet-item__body p:last-child{ margin-bottom:0; } #wwaHome .wwa-cheatsheet-item__body p span{ display:block; margin-bottom:.15rem; font-size:11px; font-weight:700; letter-spacing:.04em; text-transform:uppercase; color:#64748b; } /* Embedded calculator, phones: thin wrapper so the calculator runs to an 8px screen gutter instead of sitting inside two padded card layers. */ @media (max-width:640px){ #wwaHome .wwa-embed-calc-card{ padding:1rem 8px 1.25rem !important; border:0 !important; box-shadow:none !important; } } /* Light-blue vertical connector with a soft travelling pulse. */ /* Output badge */ /* ---------- HERO: "Sample diagnosis" card (desktop only) ---------- Previews the calculator's result screen. Values match what the calculator returns for iron 1.2 mg/L + 14 gpg in a 4-person, 1-bath home. Hidden below 900px (single-column hero) so the calculator is reachable in one scroll. */ #wwaHome .wwa-hero .wwa-hero__diagram{ display:flex; justify-content:center; width:100%; } #wwaHome .wwa-sample{ width:100%; max-width:420px; box-sizing:border-box; padding:18px 22px 10px; background:#ffffff; color:#0F172A; border-radius:16px; box-shadow:0 24px 48px -20px rgba(2,6,23,.55), 0 2px 6px rgba(2,6,23,.12); text-align:left; } #wwaHome .wwa-sample__eyebrow{ font-size:11px; font-weight:700; letter-spacing:.08em; text-transform:uppercase; color:#94A3B8; } #wwaHome .wwa-sample__title{ margin-top:2px; font-size:15px; font-weight:700; line-height:1.35; color:#0F172A; } #wwaHome .wwa-sample__rows{ margin:10px 0 0; padding:0; } #wwaHome .wwa-sample__row{ display:grid; grid-template-columns:minmax(0,1fr) auto auto; column-gap:12px; align-items:center; padding:6px 0; } #wwaHome .wwa-sample__row + .wwa-sample__row{ border-top:1px solid #F1F5F9; } #wwaHome .wwa-sample__row dt{ margin:0; font-size:14px; font-weight:600; color:#0F172A; } #wwaHome .wwa-sample__row dd{ margin:0; } #wwaHome .wwa-sample__val{ font-size:14px; font-weight:600; color:#334155; font-variant-numeric:tabular-nums; text-align:right; } #wwaHome .wwa-sample__ref{ grid-column:1 / -1; margin-top:0 !important; font-size:12px; line-height:1.35; color:#94A3B8; } #wwaHome .wwa-pill{ display:inline-block; min-width:54px; padding:3px 9px; border-radius:999px; font-size:11.5px; font-weight:700; line-height:1.3; text-align:center; } #wwaHome .wwa-pill--high{ background:#FFF1EC; color:#C2410C; } #wwaHome .wwa-pill--test{ background:#FEF3C7; color:#92400E; } #wwaHome .wwa-sample__rec{ margin-top:10px; padding:10px 12px; background:#F8FAFC; border-radius:12px; } #wwaHome .wwa-sample__rec-label{ font-size:11px; font-weight:700; letter-spacing:.06em; text-transform:uppercase; color:#64748B; } #wwaHome .wwa-sample__rec-text{ margin-top:3px; font-size:13.5px; font-weight:600; line-height:1.45; color:#0F172A; } #wwaHome a.wwa-sample__link{ display:inline-flex; align-items:center; min-height:40px; margin-top:2px; font-size:14px; font-weight:700; color:#0052CC !important; text-decoration:none; } #wwaHome a.wwa-sample__link:hover{ text-decoration:underline; text-underline-offset:3px; } @media (max-width:900px){ #wwaHome .wwa-hero .wwa-hero__diagram{ display:none !important; } } /* Mobile hero: the homepage zeroes body padding, so the hero itself must clear the fixed header (micro-bar + nav row, see wwa-header.css), plus breathing room. Bottom padding trimmed so the calculator is reachable in one scroll. */ @media (max-width:768px){ #wwaHome .wwa-hero{ padding-top:calc(var(--wwa-topbar-h, 28px) + 84px + 1.5rem) !important; padding-bottom:2.5rem !important; } } /* ---------- Smooth scroll to the calculator, clear of the sticky header ---------- */ @media (prefers-reduced-motion:no-preference){ html{ scroll-behavior:smooth; } } #wwaHome #water-calculator{ scroll-margin-top:104px; } /* desktop: pinned nav row is ~88px */ @media (max-width:768px){ #wwaHome #water-calculator{ scroll-margin-top:128px; } } /* mobile: fixed header ~112px */ /* ---------- HERO: light theme ---------- Soft slate-to-sky gradient; the site header is the standard white frosted bar on every device (the old navy "blend into the hero" overrides are removed). */ #wwaHome .wwa-hero h1{ color:#0F172A; } #wwaHome .wwa-sample{ border:1px solid #E2E8F0; box-shadow:0 12px 32px -12px rgba(15,23,42,.18), 0 2px 6px rgba(15,23,42,.06); } /* Solid #0284C7 CTA. White on #0284C7 is 4.1:1, so the label is set at 18.7px bold, which counts as large text (WCAG AA 3:1). */ #wwaHome .wwa-hero a.wwa-btn--cta{ background:#0284C7; color:#ffffff !important; font-size:1.1667rem; font-weight:700; box-shadow:0 8px 20px -8px rgba(2,132,199,.55); } #wwaHome .wwa-hero a.wwa-btn--cta:hover{ background:#0369A1; box-shadow:0 10px 24px -8px rgba(3,105,161,.6); } #wwaHome .wwa-hero a.wwa-btn--cta:focus-visible{ outline:2px solid #0284C7; outline-offset:3px; }