/* ============================================================ UpWords Speech Therapy — Shared chrome styles Used by every page. Page-specific styles stay inline in each page's for clarity and scoping. ============================================================ */ :root{ --paper:#F2F6F4; --paper-card:#FFFFFF; --surface:#FFFFFF; --sand:#F7EDE0; --sand-deep:#F0E0CB; --ink:#123A3E; --deep:#152561; --deep-2:#152561; --surface-aqua:#7ACCD2; --on-aqua:#152561; --teal:#3F8A8C; --sky:#BFE0DE; --sky-soft:#DCEEEC; --accent:#F26C4F; --accent-2:#FF8366; --accent-ink:#B84727; --muted:#4E6E6F; --line:#D6E4E1; --radius:18px; --radius-lg:28px; --maxw:1180px; --shadow-sm:0 1px 2px rgba(18,58,62,.05), 0 8px 24px rgba(18,58,62,.06); --shadow-md:0 2px 6px rgba(18,58,62,.07), 0 24px 48px rgba(18,58,62,.10); --ease:cubic-bezier(.2,.7,.2,1); } /* ── Dark mode tokens ── Toggled by setting data-theme="dark" on . The init script in each page's sets this from localStorage / prefers-color-scheme before paint, so there's no flash. */ [data-theme="dark"]{ --paper:#0F1A22; --paper-card:#1A2535; --surface:#1A2535; --sand:#2A2018; --sand-deep:#38291E; --ink:#E6EDEC; --deep:#8DB8FF; --deep-2:#8DB8FF; --surface-aqua:#2B5057; --on-aqua:#E6EDEC; --teal:#88C5C9; --sky:#2D4A52; --sky-soft:#1E3540; --accent:#FF8366; --accent-2:#FFB39E; --accent-ink:#FF8366; --muted:#93A8A8; --line:#2A3845; --shadow-sm:0 1px 2px rgba(0,0,0,.45), 0 8px 24px rgba(0,0,0,.45); --shadow-md:0 2px 6px rgba(0,0,0,.55), 0 24px 48px rgba(0,0,0,.6); } *{box-sizing:border-box} html{scroll-behavior:smooth} body{ margin:0; font-family:"Hanken Grotesk",system-ui,-apple-system,sans-serif; color:var(--ink); background:var(--paper); font-size:17px; line-height:1.6; -webkit-font-smoothing:antialiased; } h1,h2,h3{font-family:"Newsreader",Georgia,serif;font-weight:600;line-height:1.08;letter-spacing:-.01em;margin:0} p{margin:0} a{color:inherit} img{max-width:100%;display:block} .wrap{max-width:var(--maxw);margin:0 auto;padding:0 24px} .eyebrow{font-size:13px;font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:var(--teal);display:inline-flex;align-items:center;gap:9px} .eyebrow::before{content:"";width:22px;height:2px;background:var(--accent);border-radius:2px} /* ── Buttons ── */ .btn{display:inline-flex;align-items:center;gap:10px;font-family:inherit;font-weight:700;font-size:16px;padding:15px 26px;border-radius:999px;border:2px solid transparent;cursor:pointer;text-decoration:none;transition:transform .25s var(--ease),box-shadow .25s var(--ease),background .2s,color .2s,border-color .2s;min-height:52px} .btn-primary{background:var(--deep);color:#fff;box-shadow:var(--shadow-sm)} .btn-primary .dot{width:8px;height:8px;border-radius:50%;background:var(--accent);transition:transform .25s var(--ease)} .btn-primary:hover{background:var(--deep-2);transform:translateY(-2px);box-shadow:var(--shadow-md)} .btn-primary:hover .dot{transform:translateX(3px) scale(1.25)} .btn-secondary{background:transparent;color:var(--accent-ink);border-color:rgba(184,71,39,.35)} .btn-secondary:hover{border-color:var(--accent);background:rgba(242,108,79,.08);transform:translateY(-2px)} .btn-ghost{background:var(--surface);color:var(--deep);border-color:var(--line)} .btn-ghost:hover{border-color:var(--teal);transform:translateY(-2px)} .btn svg{width:18px;height:18px} /* ── Accessibility ── */ :focus-visible{outline:3px solid var(--accent);outline-offset:3px;border-radius:6px} .skip{position:absolute;left:-999px;top:0;background:var(--deep);color:#fff;padding:12px 18px;border-radius:0 0 10px 0;z-index:200} .skip:focus{left:0} /* ── Topbar (above nav) ── */ .topbar{background:var(--deep);color:rgba(255,255,255,.9);font-size:13px;padding:9px 0;letter-spacing:.01em} .topbar .wrap{display:flex;justify-content:flex-end;align-items:center;gap:18px} .topbar a{color:#fff;text-decoration:none;font-weight:600;display:inline-flex;align-items:center;gap:6px;transition:color .2s,opacity .2s;opacity:.95} .topbar a:hover{color:var(--accent-2);opacity:1} .topbar svg{width:13px;height:13px} /* ── Sticky header / nav ── */ header{position:sticky;top:0;z-index:100;background:rgba(242,246,244,.94);border-bottom:1px solid transparent;transition:border-color .3s,box-shadow .3s} header.scrolled{border-color:var(--line);box-shadow:0 6px 24px rgba(18,58,62,.06)} .nav{display:flex;align-items:center;justify-content:space-between;min-height:128px;padding:20px 0 14px} /* Brand: balloon + clouds + wordmark */ .brand{position:relative;display:flex;align-items:center;gap:6px;text-decoration:none;color:var(--ink);margin-left:56px;isolation:isolate} .brand .clouds{position:absolute;inset:-18px -40px -10px -90px;pointer-events:none;z-index:0;overflow:visible} .brand .cloud{position:absolute;color:#fff;filter:drop-shadow(0 6px 14px rgba(18,58,62,.06));opacity:0;will-change:transform,opacity;animation:cloudFadeIn .7s var(--ease) .55s forwards} .brand .cloud svg{width:100%;height:auto;display:block} .brand .cloud.c1{left:0;top:38px;width:118px;animation-delay:.45s} .brand .cloud.c1 .drift{animation:cloudDriftA 14s ease-in-out infinite 1.3s} .brand .cloud.c2{left:88px;top:6px;width:96px;animation-delay:.6s;opacity:0} .brand .cloud.c2 .drift{animation:cloudDriftB 17s ease-in-out infinite 1.4s} .brand .cloud.c3{right:0;top:54px;width:130px;animation-delay:.75s} .brand .cloud.c3 .drift{animation:cloudDriftA 19s ease-in-out infinite 1.6s reverse} .brand .cloud.c4{right:78px;top:0;width:78px;animation-delay:.9s} .brand .cloud.c4 .drift{animation:cloudDriftB 13s ease-in-out infinite 1.7s reverse} .brand .mark{position:relative;z-index:2;height:96px;width:auto;flex:none;object-fit:contain;display:block;transform-origin:50% 100%;will-change:transform;animation:balloonRise 1s cubic-bezier(.18,.72,.22,1) 0s both, balloonFloat 6s ease-in-out 1.1s infinite} .brand .name{position:relative;z-index:2;font-family:"Newsreader",Georgia,serif;font-weight:600;font-size:42px;line-height:.95;letter-spacing:-.01em;color:var(--deep);display:flex;flex-direction:column;gap:2px} .brand .name .word{display:block} .brand .name .word .u{color:var(--accent)} .brand .name .tag{font-family:"Hanken Grotesk",system-ui,sans-serif;font-size:12px;font-weight:700;letter-spacing:.32em;text-transform:uppercase;color:var(--deep);opacity:.85;margin-top:6px} @keyframes balloonRise{ 0%{transform:translateY(220px) scale(.78) rotate(-4deg);opacity:0} 35%{opacity:1} 70%{transform:translateY(-10px) scale(1.02) rotate(1.5deg)} 100%{transform:translateY(0) scale(1) rotate(0);opacity:1} } @keyframes balloonFloat{ 0%,100%{transform:translateY(0) rotate(0)} 50%{transform:translateY(-7px) rotate(-1.2deg)} } @keyframes cloudFadeIn{ from{opacity:0;transform:translateX(-12px)} to{opacity:.92;transform:translateX(0)} } @keyframes cloudDriftA{ 0%,100%{transform:translateX(0)} 50%{transform:translateX(10px)} } @keyframes cloudDriftB{ 0%,100%{transform:translateX(0)} 50%{transform:translateX(-8px)} } /* Nav links */ .nav-links{display:flex;align-items:center;gap:30px;list-style:none;margin:0;padding:0} .nav-links a{text-decoration:none;font-weight:600;font-size:15.5px;color:var(--ink);opacity:.82;transition:opacity .2s,color .2s} .nav-links a:hover{opacity:1;color:var(--accent-ink)} .nav-links a[aria-current="page"]{color:var(--accent-ink);opacity:1} .nav-cta{display:flex;align-items:center;gap:14px} .nav-cta .phone{font-weight:700;color:var(--deep);text-decoration:none;font-size:15px;white-space:nowrap} .nav-cta .phone:hover{color:var(--accent-ink)} /* Burger + mobile menu */ .burger{display:none;background:var(--surface);border:1px solid var(--line);width:48px;height:48px;border-radius:12px;cursor:pointer;align-items:center;justify-content:center} .burger span,.burger span::before,.burger span::after{content:"";display:block;width:20px;height:2px;background:var(--ink);border-radius:2px;transition:.25s var(--ease)} .burger span::before{transform:translateY(-6px)} .burger span::after{transform:translateY(4px)} body.menu-open .burger span{background:transparent} body.menu-open .burger span::before{transform:rotate(45deg)} body.menu-open .burger span::after{transform:rotate(-45deg) translateY(-2px)} .mobile-menu{display:none;position:fixed;inset:128px 0 auto 0;background:var(--paper);border-bottom:1px solid var(--line);box-shadow:var(--shadow-md);padding:14px 24px 26px;z-index:99;transform:translateY(-130%);transition:transform .35s var(--ease);max-height:calc(100vh - 128px);overflow-y:auto} body.menu-open .mobile-menu{transform:translateY(0)} .mobile-menu a{display:block;padding:14px 6px;font-weight:600;text-decoration:none;color:var(--ink);border-bottom:1px solid var(--line);font-size:17px} .mobile-menu a[aria-current="page"]{color:var(--accent-ink)} .mobile-menu .btn{width:100%;justify-content:center;margin-top:18px} .mobile-menu .phone{display:block;text-align:center;margin-top:14px;font-weight:700;color:var(--deep);text-decoration:none;border-bottom:none} /* ── Scroll-reveal pattern ── */ .reveal{opacity:0;transform:translateY(18px);transition:opacity .4s var(--ease),transform .4s var(--ease)} .reveal.in{opacity:1;transform:none} /* ── Generic section wrapper ── */ .section{padding:78px 0} .section-head{max-width:40em} .section-head h2{font-size:clamp(30px,3.6vw,44px);margin-top:14px} .section-head .sub{color:var(--muted);font-size:18px;margin-top:16px} .center{margin-inline:auto;text-align:center} .center .eyebrow{justify-content:center} /* ── Form base (used across pages with inquiry/contact forms) ── */ .form-card{background:var(--surface);border:1px solid var(--line);border-radius:var(--radius-lg);padding:38px 36px;box-shadow:var(--shadow-sm)} .form-card form{display:grid;gap:18px} .form-row{display:grid;gap:18px;grid-template-columns:1fr 1fr} .field{display:flex;flex-direction:column;gap:7px} .field label{font-size:13px;font-weight:700;color:var(--deep);letter-spacing:.02em} .field label .req{color:var(--accent);margin-left:3px} .field label .optional{font-weight:600;font-size:12px;color:var(--muted);text-transform:uppercase;letter-spacing:.08em;margin-left:6px} .field input,.field select,.field textarea{ font:inherit;color:var(--ink);background:var(--surface); border:1.5px solid var(--line);border-radius:12px; padding:13px 14px;line-height:1.4; transition:border-color .2s,box-shadow .2s,background .2s; width:100%; } .field textarea{min-height:140px;resize:vertical} .field input:hover,.field select:hover,.field textarea:hover{border-color:#B7D0CD} .field input:focus,.field select:focus,.field textarea:focus{outline:none;border-color:var(--teal);box-shadow:0 0 0 4px rgba(63,138,140,.15)} .field input::placeholder,.field textarea::placeholder{color:#94A8A8;opacity:1} .field-check{display:flex;align-items:flex-start;gap:10px;font-size:14px;color:var(--muted);line-height:1.5} .field-check input{width:auto;margin-top:3px} .form-submit-row{display:flex;align-items:center;justify-content:space-between;gap:18px;margin-top:6px;flex-wrap:wrap} .form-submit-row .note{font-size:12.5px;color:var(--muted);max-width:22em} .form-card .btn-primary{justify-content:center} .form-status{display:none;padding:14px 16px;border-radius:12px;font-size:14.5px;font-weight:600;margin-top:4px} .form-status.show{display:block} .form-status.success{background:rgba(63,138,140,.14);color:var(--deep);border:1px solid rgba(63,138,140,.3)} .form-status.error{background:rgba(242,108,79,.12);color:var(--accent-ink);border:1px solid rgba(242,108,79,.32)} /* ── Footer ── */ footer{background:var(--surface-aqua);color:rgba(21,37,97,.78);padding:64px 0 30px} .foot-grid{display:grid;grid-template-columns:1.4fr 1fr 1fr 1fr;gap:36px} .foot-brand .name{font-family:"Newsreader";font-size:24px;color:var(--on-aqua);font-weight:600;display:flex;align-items:center;gap:10px;margin-bottom:14px} .foot-brand p{font-size:14.5px;max-width:24em;line-height:1.6} footer h4{font-family:"Hanken Grotesk";font-size:13px;letter-spacing:.12em;text-transform:uppercase;color:var(--on-aqua);margin:0 0 16px} footer ul{list-style:none;margin:0;padding:0} footer li{margin-bottom:11px} footer a{text-decoration:none;color:rgba(21,37,97,.78);font-size:15px;transition:color .2s} footer a:hover{color:var(--accent-ink)} .socials{display:flex;gap:10px;margin-top:6px} .socials a{width:40px;height:40px;border-radius:11px;background:rgba(21,37,97,.12);display:flex;align-items:center;justify-content:center;color:var(--on-aqua)} .socials a:hover{background:var(--accent);color:#fff} .socials svg{width:19px;height:19px} .foot-bottom{border-top:1px solid rgba(21,37,97,.18);margin-top:48px;padding-top:24px;display:flex;justify-content:space-between;flex-wrap:wrap;gap:14px;font-size:13.5px;color:rgba(21,37,97,.6)} .foot-bottom a{font-size:13.5px} /* ── Generic page hero (used by most non-home pages) ── */ .page-hero{position:relative;overflow:hidden;padding:56px 0 40px} .page-hero::before{content:"";position:absolute;width:340px;height:340px;border-radius:50%;background:var(--sky);filter:blur(8px);opacity:.45;top:-120px;right:-90px;z-index:-1} .page-hero::after{content:"";position:absolute;width:260px;height:260px;border-radius:50%;background:#FBE0D4;filter:blur(8px);opacity:.5;bottom:-120px;left:-110px;z-index:-1} .page-hero h1{font-size:clamp(36px,4.8vw,56px);margin:16px 0 0;color:var(--deep);max-width:18em} .page-hero h1 .hl{color:var(--accent-ink)} .page-hero .lead{font-size:19px;color:var(--muted);max-width:34em;margin-top:18px} /* ── Long-form prose (Privacy, Terms) ── */ .prose{max-width:42em;margin:0 auto;color:var(--ink);font-size:16.5px;line-height:1.75} .prose h2{font-size:clamp(22px,2.4vw,28px);margin-top:46px;margin-bottom:14px;color:var(--deep)} .prose h2:first-child{margin-top:0} .prose h3{font-size:18px;margin-top:30px;margin-bottom:10px;color:var(--deep);font-family:"Hanken Grotesk",system-ui,sans-serif;font-weight:700;letter-spacing:0} .prose p{margin-bottom:14px} .prose ul,.prose ol{margin:0 0 18px 1.4em;padding:0} .prose li{margin-bottom:6px} .prose a{color:var(--deep);text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:3px} .prose a:hover{color:var(--accent-ink)} .prose .meta{font-size:13.5px;color:var(--muted);margin-bottom:36px;letter-spacing:.04em} .prose .legal-callout{margin:30px 0;padding:18px 22px;background:var(--sky-soft);border-radius:12px;font-size:15px;color:var(--ink)} /* ── Responsive ── */ @media (max-width:980px){ .foot-grid{grid-template-columns:1fr 1fr;gap:30px} .form-row{grid-template-columns:1fr 1fr} } @media (max-width:680px){ body{font-size:16px} .nav-links,.nav-cta .phone{display:none} .burger{display:flex} .nav-cta .btn{padding:11px 18px;font-size:14px;min-height:44px} .mobile-menu{display:block} .section{padding:58px 0} .foot-grid{grid-template-columns:1fr} .form-card{padding:28px 22px} .form-row{grid-template-columns:1fr} .topbar{font-size:12.5px;padding:8px 0;text-align:center} .topbar .wrap{justify-content:center} .page-hero{padding:36px 0 24px} } @media (prefers-reduced-motion:reduce){ *{animation:none!important} html{scroll-behavior:auto} .reveal{opacity:1;transform:none;transition:none} .btn:hover{transform:none} .brand .cloud{opacity:.9!important} .brand .mark{transform:none!important;opacity:1!important} } /* ── Theme toggle (sun / moon button in the topbar) ── */ .theme-toggle{ display:inline-flex;align-items:center;justify-content:center; width:28px;height:28px;border-radius:50%;border:0; background:rgba(255,255,255,.08);color:inherit;cursor:pointer; transition:background .2s,transform .2s;padding:0; -webkit-tap-highlight-color:transparent; } .theme-toggle:hover{background:rgba(255,255,255,.16);transform:scale(1.06)} .theme-toggle svg{width:14px;height:14px;display:none} :root .theme-toggle .icon-moon{display:block} [data-theme="dark"] .theme-toggle .icon-moon{display:none} [data-theme="dark"] .theme-toggle .icon-sun{display:block} /* ── Dark mode element overrides ── Most styling adapts automatically because everything uses CSS vars. These overrides exist where the original rule referenced a hardcoded color or where the semantic intent differs between modes. */ /* Topbar — already dark in light mode; in dark mode go even darker so it sits distinct from the page surface */ [data-theme="dark"] .topbar{background:#0A1219} /* Sticky header — match the dark paper bg */ [data-theme="dark"] header{background:rgba(15,26,34,.94)} [data-theme="dark"] header.scrolled{box-shadow:0 6px 24px rgba(0,0,0,.5)} /* Primary CTA — navy bg disappears against dark paper bg, so swap to the brand accent (coral) which pops on dark surfaces */ [data-theme="dark"] .btn-primary{background:var(--accent);color:#0F1A22} [data-theme="dark"] .btn-primary:hover{background:var(--accent-2)} [data-theme="dark"] .btn-primary .dot{background:var(--deep)} /* Skip link */ [data-theme="dark"] .skip{background:var(--accent);color:#0F1A22} /* Page hero decorative blobs — soften considerably in dark mode */ [data-theme="dark"] .page-hero::before{background:var(--sky);opacity:.18} [data-theme="dark"] .page-hero::after{background:#3A2A24;opacity:.22} /* Footer aqua surface — hardcoded rgba(21,37,97,...) text colors need overrides since they were "navy on teal" in light mode */ [data-theme="dark"] footer{color:rgba(230,237,236,.82)} [data-theme="dark"] footer a{color:rgba(230,237,236,.82)} [data-theme="dark"] footer a:hover{color:var(--accent)} [data-theme="dark"] footer h4{color:var(--ink)} [data-theme="dark"] .foot-brand .name{color:var(--ink)} [data-theme="dark"] .foot-bottom{border-top-color:rgba(230,237,236,.16);color:rgba(230,237,236,.55)} [data-theme="dark"] .socials a{background:rgba(230,237,236,.1);color:var(--ink)} [data-theme="dark"] .socials a:hover{background:var(--accent);color:#0F1A22} /* Form fields — hover/focus colors */ [data-theme="dark"] .field input:hover, [data-theme="dark"] .field select:hover, [data-theme="dark"] .field textarea:hover{border-color:var(--teal)} [data-theme="dark"] .field input::placeholder, [data-theme="dark"] .field textarea::placeholder{color:var(--muted)} [data-theme="dark"] .form-card{border-color:var(--line)} /* Prose callout (Privacy / Terms) */ [data-theme="dark"] .prose .legal-callout{background:var(--sky-soft);color:var(--ink)}