/* ═══════════════════════════════════════════════════════════════ FREEWAVE.ONLINE — shared stylesheet (2026 refresh) Coastal-utility look: deep navy + fiber blue identity, warmer layered light background, Bricolage Grotesque display type, Atkinson Hyperlegible body for maximum readability. Pages load fonts via in (Google Fonts). ═══════════════════════════════════════════════════════════════ */ :root{ --navy:#0B1F3A; /* header/footer ground */ --navy-deep:#081729; --ocean:#1E4E8C; /* primary deep blue */ --blue:#2EA8FF; /* fiber glow — links, CTA */ --glow:#7FD0FF; --sky:#A7C7E7; --sunset:#F4A261; --gold:#FFD166; --ink:#16222F; /* headlines on light */ --body:#46586B; /* body text */ --paper:#F3F7FB; /* page background */ --card:#FFFFFF; --line:rgba(11,31,58,.10); --shadow-card:0 1px 2px rgba(11,31,58,.05),0 10px 28px rgba(11,31,58,.07); --shadow-card-hover:0 2px 4px rgba(11,31,58,.06),0 18px 44px rgba(30,78,140,.16); --font-display:'Bricolage Grotesque',system-ui,-apple-system,sans-serif; --font-body:'Atkinson Hyperlegible',system-ui,-apple-system,sans-serif; } .skip-link{position:absolute;top:-100%;left:50%;transform:translateX(-50%);background:var(--blue);color:#fff;padding:.75rem 1.5rem;border-radius:0 0 8px 8px;font-weight:700;z-index:100;text-decoration:none;transition:top .2s} .skip-link:focus{top:0} *{box-sizing:border-box} body{margin:0;font-family:var(--font-body);background:radial-gradient(950px 460px at 88% -120px,rgba(46,168,255,.08),transparent 60%),radial-gradient(720px 420px at -8% 28%,rgba(167,199,231,.22),transparent 55%),radial-gradient(800px 500px at 105% 78%,rgba(244,162,97,.05),transparent 55%),var(--paper);color:var(--body);min-height:100vh;display:flex;flex-direction:column} /* faint grain so light areas aren't sterile flats */ body::before{content:'';position:fixed;inset:0;z-index:-1;pointer-events:none;opacity:.028;background-image:url("data:image/svg+xml,%3Csvg viewBox='0 0 200 200' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.8' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E")} /* ── Hero (shared brand banner on every page) ── */ .hero{position:relative;height:192px;display:flex;align-items:center;justify-content:center;text-align:center;overflow:hidden;background:var(--navy);color:#fff} .hero-bg{position:absolute;inset:0;background:radial-gradient(circle at 50% 58%,rgba(46,168,255,.26),transparent 52%),radial-gradient(130% 85% at 50% 118%,rgba(244,162,97,.10),transparent 55%),linear-gradient(135deg,#0D2A4A 0%,#123E6B 52%,var(--navy) 100%);z-index:1} /* nautical contour lines, drifting slowly — replaces the old dot mesh */ .hero-mesh{position:absolute;inset:-60px;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='220' height='120'%3E%3Cpath d='M0 22 Q27.5 10 55 22 T110 22 T165 22 T220 22' fill='none' stroke='%237FD0FF' stroke-opacity='.32' stroke-width='1'/%3E%3Cpath d='M0 62 Q27.5 50 55 62 T110 62 T165 62 T220 62' fill='none' stroke='%237FD0FF' stroke-opacity='.18' stroke-width='1'/%3E%3Cpath d='M0 100 Q27.5 90 55 100 T110 100 T165 100 T220 100' fill='none' stroke='%237FD0FF' stroke-opacity='.25' stroke-width='1'/%3E%3C/svg%3E");background-size:220px 120px;opacity:.5;animation:drift 60s linear infinite;z-index:2} @keyframes drift{from{transform:translate(0,0)}to{transform:translate(-220px,0)}} .hero-content{position:relative;z-index:3} .brand{display:flex;align-items:center;justify-content:center;gap:20px} .logo-mark{display:flex;align-items:flex-end;gap:8px;height:50px} .logo-mark span{width:10px;background:linear-gradient(180deg,var(--glow),#2EA3F2);border-radius:3px;transform-origin:bottom;opacity:0;animation:cellBar 2s ease-out forwards} .logo-mark span:nth-child(1){height:15px;animation-delay:0s} .logo-mark span:nth-child(2){height:25px;animation-delay:.15s} .logo-mark span:nth-child(3){height:35px;animation-delay:.3s} .logo-mark span:nth-child(4){height:50px;animation-delay:.45s} @keyframes cellBar{0%{opacity:0;transform:scaleY(0)}50%{opacity:1;transform:scaleY(1.1);box-shadow:0 0 15px rgba(127,208,255,.8)}100%{opacity:.9;transform:scaleY(1)}} .hero h1{font-family:var(--font-display);font-size:44px;font-weight:800;margin:0;letter-spacing:-.02em;color:#fff} .dot{color:var(--glow)} .tagline{margin-top:12px;font-size:.78rem;font-weight:700;letter-spacing:.34em;text-transform:uppercase;color:var(--sky);opacity:.92} /* ── Navigation ── */ nav{padding:.9rem 1rem;background:var(--navy);border-bottom:2px solid transparent;border-image:linear-gradient(90deg,var(--blue),var(--glow) 55%,var(--sunset)) 1;box-shadow:0 2px 14px rgba(8,23,41,.25);position:relative} nav ul{list-style:none;padding:0;margin:0;display:flex;justify-content:center;align-items:center;gap:1.6rem} nav a,nav button{text-decoration:none;color:var(--sky);font-weight:700;padding:.55rem 1.15rem;border-radius:50px;transition:background .2s,color .2s;cursor:pointer;background:none;border:none;font-size:inherit;font-family:inherit} @media (hover: hover) and (pointer: fine) { nav a:hover,nav button:hover{background:rgba(46,168,255,.18);color:#fff} } nav a.a,nav button.a{background:linear-gradient(180deg,#42B4FF,#1E8FE6);color:#fff;box-shadow:0 3px 12px rgba(46,168,255,.35)} .dropdown{display:none;position:absolute;background:var(--navy-deep);box-shadow:0 14px 34px rgba(0,0,0,.4);border-radius:12px;padding:.8rem 0;list-style:none;margin:.6rem 0 0 0;min-width:220px;left:0;text-align:left;z-index:10;border:1px solid rgba(46,168,255,.25)} .dropdown.show{display:block} .dropdown li{position:relative;padding-left:1.2rem} .dropdown li::before{content:'';position:absolute;left:.5rem;top:50%;transform:translateY(-50%);width:6px;height:6px;background:var(--blue);border-radius:50%;opacity:.7} .dropdown li a{display:block;padding:.6rem 1.5rem .6rem .8rem;color:var(--sky);text-decoration:none;text-align:left;border-radius:8px} .dropdown li a:hover{background:rgba(46,168,255,.18);color:#fff} .dropdown li:hover::before{opacity:1;background:#fff} /* ── Layout ── */ main{max-width:1200px;margin:2.5rem auto;padding:0 1rem;flex:1;width:100%} .p{display:grid;grid-template-columns:repeat(auto-fit,minmax(300px,1fr));gap:2rem;justify-content:center} .p:has(.c:only-child){justify-items:center} .p .c:only-child{max-width:450px} /* ── Cards ── */ .c{background:var(--card);border:1px solid var(--line);border-radius:16px;padding:2rem;box-shadow:var(--shadow-card);text-align:center;transition:transform .3s,box-shadow .3s,border-color .3s;position:relative;overflow:hidden;display:flex;flex-direction:column;align-self:stretch} .c::before{content:'';position:absolute;top:0;left:0;right:0;height:3px;background:linear-gradient(90deg,var(--blue),var(--glow));opacity:.35;transition:opacity .3s} .c:hover{transform:translateY(-4px);box-shadow:var(--shadow-card-hover);border-color:rgba(46,168,255,.35)} .c:hover::before{opacity:1} .c h3{margin:0 0 1rem;color:var(--ink)} .c p{margin:1rem 0;line-height:1.65} .c .popular-tag{position:absolute;top:0;right:0;background:var(--sunset);color:var(--navy);font-size:.72rem;font-weight:700;letter-spacing:.06em;padding:.32rem .75rem;border-radius:0 14px 0 14px} .c .pr{margin:0 0 1.5rem 0} .c ul{flex-grow:1;margin:0 0 2rem 0} .c .b{margin-top:auto} .c .referral-note{background:#E9F6EC;color:#2E7D32;border:1px solid #A5D6A7;border-radius:8px;font-size:.82rem;font-weight:700;padding:.45rem .7rem;margin:0 0 .75rem 0;text-align:center} .c img{max-width:100%;height:auto;margin:1rem 0;border-radius:10px} /* ── Type ── */ h2{font-family:var(--font-display);font-size:clamp(1.95rem,3.5vw,2.45rem);font-weight:800;letter-spacing:-.015em;text-align:center;margin-bottom:2rem;color:var(--ink);position:relative;padding-bottom:1.15rem} h2::after{content:'';position:absolute;bottom:0;left:50%;transform:translateX(-50%);width:88px;height:14px;background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='88' height='14'%3E%3Cpath d='M2 9 Q12 3 22 9 T42 9 T62 9 T78 9' fill='none' stroke='%232EA8FF' stroke-width='2.5' stroke-linecap='round'/%3E%3Ccircle cx='84' cy='9' r='2.6' fill='%23F4A261'/%3E%3C/svg%3E") center/contain no-repeat} h3{font-family:var(--font-display);font-size:1.75rem;font-weight:700;letter-spacing:-.01em;margin:0 0 .5rem;color:var(--ink)} h3 small{font-family:var(--font-body);font-size:1.05rem;opacity:.75;display:block;font-weight:400;letter-spacing:0;margin-top:.3rem;color:var(--body)} .pr{font-family:var(--font-display);font-size:3rem;font-weight:800;letter-spacing:-.02em;color:var(--ocean)} .pm{font-size:1.2rem;opacity:.8;font-weight:400;letter-spacing:0} ul{list-style:none;padding:0;margin:1.5rem 0;text-align:left} li{font-size:1.02rem;margin:.7rem 0;padding-left:2rem;position:relative;line-height:1.55;color:var(--body)} main ul li::before{content:"✓";position:absolute;left:0;top:.14em;width:1.3em;height:1.3em;display:flex;align-items:center;justify-content:center;font-size:.82em;font-weight:700;color:#1E8FE6;background:rgba(46,168,255,.13);border-radius:50%} nav ul{margin:0} nav ul li{padding:0;margin:0} nav > ul > li.separator{color:var(--sky);opacity:.35;font-size:1.1rem;display:flex;align-items:center;pointer-events:none;padding:0} /* ── Buttons & badges ── */ .b{display:inline-block;background:linear-gradient(180deg,#42B4FF,#1E8FE6);color:#fff;padding:.9rem 2rem;border-radius:50px;text-decoration:none;font-weight:700;box-shadow:0 4px 14px rgba(46,168,255,.32),inset 0 1px 0 rgba(255,255,255,.25);transition:transform .25s,box-shadow .25s,background .25s;border:2px solid transparent} .b:hover{transform:translateY(-2px);box-shadow:0 8px 22px rgba(46,168,255,.45),inset 0 1px 0 rgba(255,255,255,.25);background:linear-gradient(180deg,#2EA8FF,#1A7FD0)} a:focus-visible{outline:2px solid var(--blue);outline-offset:3px} button:focus-visible{outline:2px solid var(--blue);outline-offset:3px} .b:focus{outline:2px solid var(--blue);outline-offset:3px} .b.secondary{background:linear-gradient(180deg,#E09A52,#C77F35);color:#fff;box-shadow:0 4px 14px rgba(244,162,97,.32),inset 0 1px 0 rgba(255,255,255,.25)} .b.secondary:hover{background:linear-gradient(180deg,#D4863A,#B87430);color:#fff;box-shadow:0 8px 22px rgba(244,162,97,.45),inset 0 1px 0 rgba(255,255,255,.25)} .bg{display:block;background:var(--sunset);color:var(--navy);font-size:.75rem;font-weight:700;letter-spacing:.05em;padding:.3rem .75rem;border-radius:12px;margin:.5rem auto 0;width:fit-content} .free{color:var(--blue)} /* ── Open content patterns ── Rule: a card (.c) means "an offer you can act on." Supporting content sits directly on the page with these. */ .stats-open{display:grid;grid-template-columns:repeat(auto-fit,minmax(170px,1fr));gap:2rem 1.5rem;text-align:center;margin:0 auto 3.2rem;max-width:1000px} .stats-open .num{font-family:var(--font-display);font-size:3.4rem;font-weight:800;letter-spacing:-.02em;color:var(--ocean);display:block;line-height:1;margin-bottom:.45rem} .stats-open .label{font-size:.78rem;font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:var(--body)} .features-open{display:grid;grid-template-columns:repeat(auto-fit,minmax(300px,1fr));gap:2.2rem 2.6rem;margin:0 0 3rem} .feature{display:grid;grid-template-columns:auto 1fr;gap:1.1rem;text-align:left;align-items:start} .feature .icon{font-size:1.35rem;width:3rem;height:3rem;display:flex;align-items:center;justify-content:center;background:rgba(46,168,255,.12);border:1px solid rgba(46,168,255,.22);border-radius:14px} .feature h3{font-size:1.18rem;margin:0 0 .4rem} .feature p{margin:0;font-size:.95rem;line-height:1.7} .section-open{max-width:980px;margin:0 auto 3rem} .cta-open{text-align:center;max-width:760px;margin:3.2rem auto 1rem;padding-top:2.6rem;border-top:1px solid var(--line)} .cta-open h3{margin-bottom:.5rem} .cta-open p{margin:0 0 1.4rem} .cta-buttons{display:flex;gap:1rem;justify-content:center;flex-wrap:wrap} /* Confirmation pages (form thank-yous, 404) */ .confirm{max-width:620px;margin:1.5rem auto 0;text-align:center} .confirm-mark{width:76px;height:76px;border-radius:50%;background:linear-gradient(180deg,#42B4FF,#1E8FE6);color:#fff;display:flex;align-items:center;justify-content:center;margin:0 auto 1.6rem;box-shadow:0 12px 30px rgba(46,168,255,.35);animation:popIn .55s cubic-bezier(.34,1.56,.64,1) both} .confirm-mark svg{width:36px;height:36px} @keyframes popIn{from{transform:scale(.4);opacity:0}to{transform:scale(1);opacity:1}} .confirm-code{font-family:var(--font-display);font-size:5.5rem;font-weight:800;letter-spacing:-.03em;color:var(--ocean);line-height:1;margin:0 0 1rem} .confirm .lead{font-size:1.12rem;line-height:1.7;margin:0 0 2.2rem} .confirm-next{text-align:left;margin:0 auto 2.2rem;padding:1.6rem 0;border-top:1px solid var(--line);border-bottom:1px solid var(--line)} .confirm-next .nt{font-size:.78rem;font-weight:700;letter-spacing:.16em;text-transform:uppercase;color:var(--ocean);margin:0 0 .9rem} .confirm-next ul{margin:0} .confirm-next a{color:var(--blue);font-weight:700;text-decoration:none} .confirm-next a:hover{text-decoration:underline} .confirm .fine{margin-top:2.2rem;font-size:.9rem;color:#8795A5} .confirm .fine a{color:var(--blue);text-decoration:none;font-weight:700} /* ── Footer ── */ footer{background:var(--navy);color:var(--sky);text-align:center;padding:1.8rem 1.5rem;font-size:.9rem;border-top:2px solid transparent;border-image:linear-gradient(90deg,var(--blue),var(--glow) 55%,var(--sunset)) 1} footer a{color:var(--gold);text-decoration:underline;font-weight:700;transition:color .2s} footer a:hover{color:var(--sunset);text-decoration:none} /* ── Inputs ── */ input[type="text"]:focus,input[type="email"]:focus,input[type="tel"]:focus,input[type="number"]:focus,select:focus,textarea:focus{outline:none;border-color:var(--blue);box-shadow:0 0 0 3px rgba(46,168,255,.15)} .btn-spinner{display:inline-block;width:14px;height:14px;border:2px solid rgba(255,255,255,.4);border-top-color:#fff;border-radius:50%;animation:spin .7s linear infinite;vertical-align:middle;margin-right:6px} @keyframes spin{to{transform:rotate(360deg)}} @media(max-width:768px){ .hero{height:152px;padding:8px 20px 0} .hero h1{font-size:33px} .tagline{font-size:.66rem;letter-spacing:.28em} .logo-mark{height:35px;gap:5px} .logo-mark span{width:7px} .logo-mark span:nth-child(1){height:10px} .logo-mark span:nth-child(2){height:18px} .logo-mark span:nth-child(3){height:26px} .logo-mark span:nth-child(4){height:35px} .brand{gap:14px} h3{font-size:1.45rem} .pr{font-size:2.5rem} nav ul{gap:.7rem} nav a,nav button{padding:.5rem .85rem;font-size:.9rem} nav > ul > li.separator{display:none} .p{gap:1.5rem;grid-template-columns:1fr} .c{padding:1.5rem} .stats-open{grid-template-columns:repeat(2,1fr);gap:1.6rem 1rem} .stats-open .num{font-size:2.5rem} .features-open{grid-template-columns:1fr;gap:1.8rem} .confirm-code{font-size:4rem} } /* ═══ Form layout system ═══ */ .form-container{max-width:960px;margin:0 auto;background:#fff;border:1px solid var(--line);border-radius:16px;box-shadow:var(--shadow-card);overflow:hidden;position:relative} .form-container::before{content:'';position:absolute;top:0;left:0;right:0;height:3px;background:linear-gradient(90deg,var(--blue),var(--glow));z-index:1} .form-panel{display:grid;grid-template-columns:1fr 1.6fr} .form-panel-info{padding:2.5rem 2rem;background:#F3F8FD;border-right:1px solid #E4ECF4;display:flex;flex-direction:column} .form-panel-info h3{font-size:1.35rem;margin:0 0 .6rem;color:var(--ink)} .form-panel-info>p{color:var(--body);font-size:.93rem;line-height:1.65;margin:0 0 1.5rem} .form-panel-info ul{list-style:none;padding:0;margin:0} .form-panel-info li{color:var(--body);font-size:.9rem;padding-left:1.6rem;margin:.4rem 0;position:relative;line-height:1.5} .form-panel-info li::before{content:"\2713";color:#1E8FE6;position:absolute;left:0;font-weight:700;font-size:.95rem} .form-panel-extra{margin-top:auto;padding-top:1.2rem;border-top:1px solid #DDE7F0;font-size:.85rem;color:var(--body)} .form-panel-extra a{color:var(--blue);text-decoration:none;font-weight:700} .form-panel-fields{padding:2.5rem} .form-group{margin-bottom:.9rem} .form-label{display:block;margin-bottom:.4rem;font-weight:700;font-size:.88rem;color:var(--ink)} .form-label .req{color:#E53E3E;margin-left:2px} .form-field{width:100%;padding:.7rem .9rem;border:1.5px solid #C5D5E5;border-radius:10px;font-size:.95rem;font-family:inherit;color:var(--ink);background:#fff;transition:border-color .2s,box-shadow .2s} textarea.form-field{resize:vertical} select.form-field{cursor:pointer} .form-row{display:grid;grid-template-columns:1fr 1fr;gap:1rem} .form-legal{margin-top:.5rem;font-size:.78rem;color:#6B7280;text-align:center} .form-legal a{color:var(--blue)} .form-msg{font-weight:700;text-align:center;margin-top:.7rem;min-height:1.3rem} /* Schedule dual-column form */ .form-schedule{display:grid;grid-template-columns:1fr 1.2fr;max-width:1020px;margin:0 auto;background:#fff;border:1px solid var(--line);border-radius:16px;box-shadow:var(--shadow-card);overflow:hidden;position:relative} .form-schedule::before{content:'';position:absolute;top:0;left:0;right:0;height:3px;background:linear-gradient(90deg,var(--blue),var(--glow));z-index:1} .form-col{padding:2rem} .form-col:first-child{border-right:1px solid #E4ECF4} .form-col h3{font-size:1.15rem;margin:0 0 1.2rem;color:var(--ink);padding-bottom:.5rem;border-bottom:2px solid var(--blue);display:inline-block} .form-full{grid-column:1/-1;padding:0 2rem 2rem;text-align:center} @media(max-width:900px){ .form-panel{grid-template-columns:1fr} .form-panel-info{border-right:none;border-bottom:1px solid #E4ECF4;padding:1.8rem 1.5rem} .form-panel-fields{padding:1.5rem} .form-schedule{grid-template-columns:1fr;max-width:600px} .form-col:first-child{border-right:none;border-bottom:1px solid #E4ECF4;padding-bottom:1.5rem} .form-col{padding:1.5rem} .form-full{padding:0 1.5rem 1.5rem} } @media(max-width:768px){ .form-row{grid-template-columns:1fr} .form-panel-info h3{font-size:1.2rem} } .sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0} a[target="_blank"]::after{content:" (opens in new tab)";position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0} @media(prefers-reduced-motion:reduce){ *{animation:none!important;transition:none!important} }