/* WAVO base — resets, typography, layout primitives SCOPING NOTE (2026-05-16): the bare-element reset/typography rules (body, h1–h6, p, a, img/svg/video, button, hr) are scoped to the `.wavo-body` body class so this file can be loaded in the Admin/Agency areas (whose has NO wavo-body class) WITHOUT restyling their Bootstrap admin theme. The public site's still matches every rule, so public rendering is unchanged. The universal `box-sizing` reset and the `.wavo-*` layout primitives stay global on purpose — migrated Admin views (which opt into wavo component classes but live under a non-wavo body) need both. */ *, *::before, *::after { box-sizing: border-box; } html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; /* Smooth in-page scrolling (anchor jumps, scrollIntoView, scroll-to-top). scroll-padding-top keeps the scroll target clear of the sticky navbar. Disabled for reduced-motion users below. */ scroll-behavior: smooth; scroll-padding-top: calc(var(--wavo-navbar-h, 76px) + var(--wavo-s-4)); } body.wavo-body { margin: 0; font-family: var(--wavo-font-text); font-size: var(--wavo-fs-body); line-height: var(--wavo-lh-normal); color: var(--wavo-ink); background: var(--wavo-bg); -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; text-rendering: optimizeLegibility; position: relative; min-height: 100vh; } /* Sequoia ambient wallpaper — a vivid multi-stop radial backdrop fixed behind page content. The wash is anchored to the viewport so it stays put as you scroll, echoing the Sonoma/Sequoia desktop-picture feel. The page should feel like it is sitting on a real Mac desktop — not a tinted white sheet, but visible lavender / peach / mint / blue blobs through every surface. Sits *behind* every page surface (z-index: -1 on a body::before; body itself is positioned). */ body.wavo-body { background: var(--wavo-bg); } body.wavo-body::before { content: ""; position: fixed; inset: 0; z-index: -1; background: var(--wavo-gradient-wallpaper), var(--wavo-bg); pointer-events: none; } /* Sequoia photographic grain — a faint SVG noise overlay over the wallpaper adds the "lit pixels" texture of a real macOS desktop picture without sacrificing legibility. ~6% alpha keeps it almost imperceptible but reads as photographic rather than gradient-flat. `overlay` so the grain reads as both highlight AND shadow on the pastel wallpaper. */ body.wavo-body::after { content: ""; position: fixed; inset: 0; z-index: -1; pointer-events: none; opacity: 0.06; mix-blend-mode: overlay; background-image: url("data:image/svg+xml;utf8,"); background-size: 240px 240px; } @media (prefers-reduced-transparency: reduce) { body.wavo-body::before { background: var(--wavo-bg); } body.wavo-body::after { display: none; } } @media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } body.wavo-body::after { display: none; } } .wavo-body :is(h1, h2, h3, h4, h5, h6) { font-family: var(--wavo-font-display); font-weight: var(--wavo-weight-semibold); color: var(--wavo-ink); margin: 0; letter-spacing: var(--wavo-tracking-snug); line-height: var(--wavo-lh-snug); } .wavo-body h1 { font-size: var(--wavo-fs-h1); letter-spacing: var(--wavo-tracking-tight); overflow-wrap: break-word; word-wrap: break-word; } .wavo-body h2 { font-size: var(--wavo-fs-h2); overflow-wrap: break-word; word-wrap: break-word; } .wavo-body h3 { font-size: var(--wavo-fs-h3); overflow-wrap: break-word; word-wrap: break-word; } .wavo-body h4 { font-size: var(--wavo-fs-h4); } /* Smaller min heading sizes on tiny phones to prevent awkward 10-line h1s */ @media (max-width: 400px) { .wavo-body h1 { font-size: clamp(28px, 7vw, 32px); } .wavo-body h2 { font-size: clamp(22px, 6vw, 26px); } } .wavo-body p { margin: 0 0 var(--wavo-s-4); color: var(--wavo-ink); } .wavo-body a { color: var(--wavo-link); text-decoration: none; transition: color var(--wavo-dur-fast) var(--wavo-ease); -webkit-tap-highlight-color: transparent; } /* Underline only on real hover-capable devices to avoid sticky underline after tap on mobile */ @media (hover: hover) { .wavo-body a:hover { color: var(--wavo-link-hover); text-decoration: underline; } } .wavo-body :is(img, svg, video) { max-width: 100%; height: auto; display: block; } .wavo-body button { font: inherit; cursor: pointer; } .wavo-body hr { border: 0; border-top: 1px solid var(--wavo-hairline); margin: var(--wavo-s-6) 0; } /* Layout containers */ .wavo-container { max-width: var(--wavo-container-max); margin: 0 auto; padding-left: var(--wavo-container-padding); padding-right: var(--wavo-container-padding); width: 100%; } .wavo-container--narrow { max-width: var(--wavo-container-narrow); } /* Section */ .wavo-section { padding-top: var(--wavo-section-y); padding-bottom: var(--wavo-section-y); } .wavo-section--tight { padding-top: clamp(40px, 6vw, 80px); padding-bottom: clamp(40px, 6vw, 80px); } /* Logo overhang clearance — the 128px navbar logo overhangs the 76px navbar by ~58px on desktop and ~22px on tablet. Ensure the first content section has enough top padding to avoid the logo visually overlapping headings. On mobile (≤560px) the logo fits inside the navbar so no extra padding needed. */ @media (min-width: 881px) { .wavo-section--tight { padding-top: max(88px, clamp(40px, 6vw, 100px)); } } @media (min-width: 561px) and (max-width: 880px) { .wavo-section--tight { padding-top: max(52px, clamp(40px, 6vw, 80px)); } } /* Tinted sections — Sequoia thin material so the body wallpaper bleeds through. Was solid `var(--wavo-bg-tint)`; now a 55% white pane with backdrop blur, which behaves like a Finder "sidebar" material on top of the desktop picture. Falls back to opaque tint where backdrop-filter is unsupported or transparency is reduced. */ .wavo-section--tint { background: var(--wavo-mat-thin); backdrop-filter: var(--wavo-mat-blur); -webkit-backdrop-filter: var(--wavo-mat-blur); } @supports not ((backdrop-filter: blur(4px)) or (-webkit-backdrop-filter: blur(4px))) { .wavo-section--tint { background: var(--wavo-bg-tint); } } @media (prefers-reduced-transparency: reduce) { .wavo-section--tint { background: var(--wavo-bg-tint); backdrop-filter: none; -webkit-backdrop-filter: none; } } .wavo-section--dark { background: var(--wavo-bg-inverse); color: var(--wavo-ink-inverse); } .wavo-section--dark h1, .wavo-section--dark h2, .wavo-section--dark h3, .wavo-section--dark h4 { color: var(--wavo-ink-inverse); } .wavo-eyebrow { font-size: var(--wavo-fs-caption); text-transform: uppercase; letter-spacing: 0.08em; font-weight: var(--wavo-weight-semibold); color: var(--wavo-accent); margin-bottom: var(--wavo-s-3); } .wavo-lede { font-size: var(--wavo-fs-body-lg); line-height: var(--wavo-lh-normal); color: var(--wavo-ink-muted); max-width: 60ch; } /* Text utilities */ .wavo-text-center { text-align: center; } .wavo-text-right { text-align: right; } .wavo-text-left { text-align: left; } .wavo-text-muted { color: var(--wavo-ink-muted); } .wavo-text-subtle { color: var(--wavo-ink-subtle); } .wavo-text-mono { font-family: var(--wavo-font-mono); } .wavo-display { font-family: var(--wavo-font-display); } /* Grid */ .wavo-grid { display: grid; gap: var(--wavo-s-5); } .wavo-grid--cards-3 { grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); } .wavo-grid--cards-4 { grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); } .wavo-grid--2 { grid-template-columns: repeat(2, 1fr); } .wavo-grid--3 { grid-template-columns: repeat(3, 1fr); } .wavo-grid--4 { grid-template-columns: repeat(4, 1fr); } .wavo-grid--tight { gap: var(--wavo-s-4); } @media (max-width: 768px) { .wavo-grid--2, .wavo-grid--3, .wavo-grid--4 { grid-template-columns: 1fr; } } /* Stack — vertical rhythm */ .wavo-stack > * + * { margin-top: var(--wavo-s-4); } .wavo-stack--lg > * + * { margin-top: var(--wavo-s-6); } .wavo-stack--xl > * + * { margin-top: var(--wavo-s-7); } /* Cluster — horizontal row, wraps */ .wavo-cluster { display: flex; flex-wrap: wrap; gap: var(--wavo-s-3); align-items: center; } /* Visually hidden — for screen readers only (do not use display:none, hides from AT) */ .wavo-sr { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; } /* Skip link — hidden offscreen until keyboard focus, then drops in as a Sequoia pill. Required for WCAG 2.4.1 (Bypass Blocks). On iPhone X+ landscape the notch shoves system UI into top-left; respect env(safe-area-inset-*) so the pill never lands under the camera/notch. The 12px floor is preserved via max() — browsers without env() fall back to the second arg (0px) which max()s with 12px. */ .wavo-skip-link { position: fixed; top: max(12px, env(safe-area-inset-top, 0px)); left: max(12px, env(safe-area-inset-left, 0px)); padding: 10px 18px; background: var(--wavo-gradient-accent, linear-gradient(135deg, #5471af 0%, #2d3f6a 100%)); color: #fff; font-family: var(--wavo-font-text); font-size: var(--wavo-fs-body-sm, 15px); font-weight: var(--wavo-weight-semibold, 600); letter-spacing: var(--wavo-tracking-snug, -0.015em); text-decoration: none; z-index: 10000; border-radius: var(--wavo-r-pill, 980px); box-shadow: var(--wavo-depth-3, 0 12px 28px rgba(23, 41, 76, 0.10), 0 2px 6px rgba(23, 41, 76, 0.05)), var(--wavo-inner-shine, inset 0 1px 0 rgba(255, 255, 255, 0.5)); transform: translateY(calc(-100% - 24px)); transition: transform var(--wavo-dur, 280ms) var(--wavo-ease-snap, cubic-bezier(0.16, 1, 0.3, 1)); } .wavo-skip-link:focus, .wavo-skip-link:focus-visible { transform: translateY(0); outline: 3px solid rgba(255, 255, 255, 0.85); outline-offset: 3px; } /* Main landmark — hide default focus ring when programmatically focused via skip link */ main[tabindex="-1"]:focus, main[tabindex="-1"]:focus-visible { outline: none; } /* Focus ring — Apple style color-mix needs Safari 16.2+ / Chrome 111+ / Firefox 113+. Pre-compute a solid hex fallback (rgba on --wavo-accent #5471af). Modern browsers get the themable color-mix value via @supports. */ :focus-visible { outline: 3px solid rgba(84, 113, 175, 0.5); outline-offset: 2px; border-radius: var(--wavo-r-sm); } @supports (outline-color: color-mix(in srgb, red, blue)) { :focus-visible { outline-color: color-mix(in srgb, var(--wavo-accent) 50%, transparent); } } /* Dark-section focus override — ensure visible ring on inverse backgrounds. Some components (btn / card / chip / carousel) replace outline with a box-shadow ring via --wavo-depth-glow. On a navy section that accent ring is too low-contrast, so override BOTH outline AND box-shadow inside dark sections. */ .wavo-section--dark :focus-visible { outline: 3px solid rgba(255, 255, 255, 0.85); } .wavo-section--dark .wavo-btn:focus-visible, .wavo-section--dark .wavo-card:focus-visible, .wavo-section--dark .wavo-chip:focus-visible, .wavo-section--dark .wavo-carousel__btn:focus-visible, .wavo-section--dark .wavo-carousel__dot:focus-visible { outline: 3px solid rgba(255, 255, 255, 0.9); outline-offset: 2px; box-shadow: none; } /* Selection */ ::selection { background: rgba(84, 113, 175, 0.25); } @supports (background: color-mix(in srgb, red, blue)) { ::selection { background: color-mix(in srgb, var(--wavo-accent) 25%, transparent); } }