/* ===================================================== Fraunces — self-hosted serif display face. Variable font, covers weight 500–700 for latin subset. Preload the file via in each page . ===================================================== */ @font-face { font-family: 'Fraunces'; font-style: normal; font-weight: 500 700; font-display: swap; src: url('/fonts/fraunces/fraunces-latin-wght-normal.woff2') format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; } :root { /* PRD §8.1 public/shared entry palette (matches public/css/login.css tokens). */ --tl-blue: #207FBF; --tl-green: #4CAF93; --tl-blue-dark: color-mix(in srgb, var(--tl-blue) 84%, var(--tl-text)); --tl-blue-deep: color-mix(in srgb, var(--tl-blue) 68%, var(--tl-text)); --tl-green-dark: color-mix(in srgb, var(--tl-green) 72%, var(--tl-text)); --tl-blue-tint: rgba(32, 127, 191, 0.07); --tl-green-tint: rgba(76, 175, 147, 0.07); --tl-blue-soft: color-mix(in srgb, var(--tl-blue) 18%, var(--tl-surface)); --tl-green-soft: color-mix(in srgb, var(--tl-green) 18%, var(--tl-surface)); --tl-navy: #1F2A37; --tl-ivory: color-mix(in srgb, var(--tl-surface) 82%, var(--tl-page-bg)); --tl-surface: #FFFFFF; --tl-pale-blue: color-mix(in srgb, var(--tl-blue) 10%, var(--tl-surface)); --tl-pale-green: color-mix(in srgb, var(--tl-green) 10%, var(--tl-surface)); --tl-section-tint-blue: color-mix(in srgb, var(--tl-blue) 8%, var(--tl-surface)); --tl-section-tint-green: color-mix(in srgb, var(--tl-green) 8%, var(--tl-surface)); --tl-footer-text: var(--tl-blue); --tl-footer-link: var(--tl-blue); --tl-footer-muted: color-mix(in srgb, var(--tl-blue) 68%, var(--hero-cream)); --tl-soft-gray: color-mix(in srgb, var(--tl-text-secondary) 24%, var(--tl-surface)); --tl-charcoal: color-mix(in srgb, var(--tl-text) 90%, var(--tl-surface)); --tl-wood: #B78961; --tl-walnut: #8B6548; --tl-floor: #D7CCBE; --tl-page-bg: #EBF5EE; --tl-text: #1F2A37; --tl-text-secondary: #6B7280; --tl-input-border: color-mix(in srgb, var(--tl-text-secondary) 26%, var(--tl-surface)); --tl-danger: #DC2626; --tl-border: rgba(31, 42, 55, 0.1); --tl-shadow: 0 28px 80px rgba(31, 42, 55, 0.14); --tl-shadow-soft: 0 18px 40px rgba(31, 42, 55, 0.1); --tl-nav-height: 56px; --tl-hero-safe-top: calc(var(--tl-nav-height) + env(safe-area-inset-top) + 26px); --tl-font: "Inter Variable", "Inter", "Segoe UI", sans-serif; --tl-display: "Fraunces", "Iowan Old Style", "Palatino Linotype", "URW Palladio L", serif; /* ─── Marketing design tokens ───────────────────────────────────────── Used by public-home.css and referenced on About / Policies / Contact so all four public pages share a single consistent token layer. */ --marketing-ink: #0F172A; --marketing-accent: #207FBF; --marketing-accent-soft: #4CAF93; --marketing-surface: #FAF9F6; --marketing-muted: #94A3B8; /* ─── Hero gradient ("The Handoff") ─────────────────────────────────── */ --hero-grad-1: #0A1F2E; --hero-grad-2: #0B4F8A; --hero-grad-3: #207FBF; --hero-grad-4: #4CAF93; --hero-accent-green: #5FD3AE; --hero-cream: #FAF9F6; --hero-cream-muted: rgba(250, 249, 246, 0.72); --hero-gradient: linear-gradient( 135deg, var(--hero-grad-1) 0%, var(--hero-grad-2) 45%, var(--hero-grad-3) 72%, var(--hero-grad-4) 100% ); /* Footer navy = hero gradient dark end — one navy token site-wide. */ --tl-footer-bg: var(--hero-grad-1); /* * Solid section fills — brand blue/green deepened just enough for cream * text (≥4.5:1 body). Not pale tints; not the hero gradient. */ /* Mix ratios chosen so cream / cream@88% meet ≥4.5:1 on the fill. */ --tl-section-solid-blue: color-mix(in srgb, var(--tl-blue) 80%, var(--hero-grad-1)); --tl-section-solid-green: color-mix(in srgb, var(--tl-green) 55%, var(--hero-grad-1)); --tl-on-solid: var(--hero-cream); --tl-on-solid-muted: rgba(250, 249, 246, 0.88); } * { box-sizing: border-box; } html { overflow-x: clip; } @media (prefers-reduced-motion: no-preference) { html { scroll-behavior: smooth; } } body { margin: 0; overflow-x: clip; font-family: var(--tl-font); color: var(--tl-navy); background: var(--tl-surface); -webkit-font-smoothing: antialiased; } /* * Sticky footer — all four public marketing pages. Footer pins to the viewport * bottom when content is short; grows naturally when content is long. */ body.tl-home-page, body.tl-about-page, body.tl-policies-page, body.tl-contact-page { position: relative; min-height: 100vh; min-height: 100svh; display: flex; flex-direction: column; } body.tl-home-page .tl-ph-main, body.tl-about-page .tl-about-main, body.tl-policies-page .tl-policies-main, body.tl-contact-page .tl-contact-main { flex: 1 0 auto; } body.tl-home-page .tl-footer, body.tl-about-page .tl-footer, body.tl-policies-page .tl-footer, body.tl-contact-page .tl-footer { flex: 0 0 auto; margin-top: auto; } /* Headline-level brand blue — body copy stays ink/gray for readability */ .tl-main h1, .tl-main h2, .tl-ph-main h1, .tl-ph-main h2, .tl-section__heading h2, .tl-copy-card h1, .tl-panel h2, .tl-about-page h2, .tl-legal-section h2, .tl-contact-panel h2, .tl-contact-aside h2, .tl-policy-overview__heading h2, .tl-draft-notice h2, .tl-cta h2, .tl-cta__copy h2 { color: var(--tl-blue); } /* Page-top dark bands (Home hero + About/Policies/Contact title bands) use cream type — do not inherit brand-blue headings. */ .tl-ph-hero__heading, .tl-about-hero h1, .tl-policies-hero h1, .tl-contact-hero h1 { color: var(--hero-cream); } /* Inline body-copy links — scoped to main content only (never the shared footer). */ .tl-main a:not(.tl-btn):not(.tl-policy-overview-card), .tl-ph-main a:not(.tl-btn), .tl-about-page .tl-about-main a:not(.tl-btn), .tl-policies-page .tl-policies-main a:not(.tl-btn):not(.tl-policy-overview-card), .tl-contact-page .tl-contact-main a:not(.tl-btn) { color: var(--tl-blue); } a, button { -webkit-tap-highlight-color: transparent; } /* Scope responsive images to content areas — never the nav wordmark (3509px intrinsic). */ .tl-main img, .tl-footer img { max-width: 100%; height: auto; } /* * Heroicon SVGs ship viewBox-only (no width/height attributes). Without explicit * dimensions, flex items (min-width: auto) and max-width: 100% can blow icons up * to the full viewport width on public pages. */ svg.tl-about-icon, svg.tl-policies-icon, svg.tl-contact-icon { display: block; flex: none; min-width: 0; overflow: hidden; } svg.tl-about-icon, svg.tl-policies-icon { width: 24px; height: 24px; max-width: 24px; max-height: 24px; } svg.tl-contact-icon { width: 22px; height: 22px; max-width: 22px; max-height: 22px; } svg.tl-policies-icon--hero { width: 70px; height: 70px; max-width: 70px; max-height: 70px; } svg.tl-policies-icon--hero-lock { width: 22px; height: 22px; max-width: 22px; max-height: 22px; } svg.tl-policies-icon--card { width: 25px; height: 25px; max-width: 25px; max-height: 25px; } .tl-connection-map__node svg.tl-about-icon, .tl-workflow-shift__arrow svg.tl-about-icon { width: 20px; height: 20px; max-width: 20px; max-height: 20px; } @media (max-width: 1023px) { svg.tl-policies-icon--hero { width: 58px; height: 58px; max-width: 58px; max-height: 58px; } } @media (max-width: 520px) { .tl-connection-map__node svg.tl-about-icon { width: 17px; height: 17px; max-width: 17px; max-height: 17px; } } .tl-hero__canvas { max-width: none; max-height: none; } :focus-visible { outline: 3px solid rgba(76, 175, 147, 0.48); outline-offset: 4px; } .tl-hidden { display: none !important; } .tl-skip-link { position: absolute; left: 18px; top: -80px; z-index: 120; padding: 12px 16px; border-radius: 999px; background: var(--tl-navy); color: var(--tl-surface); text-decoration: none; font-weight: 700; } .tl-skip-link:focus { top: 18px; } .tl-kicker { margin: 0 0 14px; color: var(--tl-text-secondary); font-size: 0.78rem; font-weight: 800; letter-spacing: 0.18em; text-transform: uppercase; } .tl-btn { display: inline-flex; align-items: center; justify-content: center; min-height: 50px; padding: 0 22px; border: 1px solid transparent; border-radius: 12px; font: 700 0.95rem/1 var(--tl-font); text-decoration: none; cursor: pointer; transition: transform 0.18s ease, box-shadow 0.18s ease, border-color 0.18s ease, background-color 0.18s ease, color 0.18s ease; } .tl-btn:hover { transform: translateY(-1px); } .tl-btn:active { transform: translateY(0); } .tl-btn--primary { color: var(--tl-surface); background: var(--tl-blue); box-shadow: 0 8px 20px rgba(32, 127, 191, 0.28); } .tl-btn--primary:hover { background: var(--tl-blue-dark); box-shadow: 0 10px 24px rgba(32, 127, 191, 0.34); } .tl-btn--primary:active { background: var(--tl-blue-deep); box-shadow: 0 4px 12px rgba(32, 127, 191, 0.22); } .tl-btn--secondary { color: var(--tl-surface); border-color: var(--tl-green); background: var(--tl-green); box-shadow: 0 8px 20px rgba(76, 175, 147, 0.24); } .tl-btn--secondary:hover { background: var(--tl-green-dark); border-color: var(--tl-green-dark); box-shadow: 0 10px 24px rgba(76, 175, 147, 0.3); } .tl-btn--secondary:active { background: color-mix(in srgb, var(--tl-green) 88%, var(--tl-text)); box-shadow: 0 4px 12px rgba(76, 175, 147, 0.18); } .tl-btn--ghost, .tl-btn--nav { color: var(--tl-surface); border-color: var(--tl-blue); background: var(--tl-blue); box-shadow: 0 8px 20px rgba(32, 127, 191, 0.24); } .tl-btn--ghost:hover, .tl-btn--nav:hover { border-color: var(--tl-blue-dark); background: var(--tl-blue-dark); box-shadow: 0 10px 24px rgba(32, 127, 191, 0.32); } .tl-btn--ghost:active, .tl-btn--nav:active { border-color: var(--tl-blue-deep); background: var(--tl-blue-deep); box-shadow: 0 4px 12px rgba(32, 127, 191, 0.18); } .tl-btn:is(:disabled, [aria-disabled="true"]) { transform: none; box-shadow: none; cursor: not-allowed; pointer-events: none; } .tl-btn--primary:is(:disabled, [aria-disabled="true"]) { color: var(--tl-surface); background: color-mix(in srgb, var(--tl-blue) 55%, var(--tl-surface)); } .tl-btn--secondary:is(:disabled, [aria-disabled="true"]), .tl-btn--ghost:is(:disabled, [aria-disabled="true"]), .tl-btn--nav:is(:disabled, [aria-disabled="true"]) { color: color-mix(in srgb, var(--tl-text-secondary) 88%, var(--tl-surface)); border-color: color-mix(in srgb, var(--tl-text-secondary) 20%, var(--tl-surface)); background: color-mix(in srgb, var(--tl-surface) 72%, var(--tl-page-bg)); } /* * Canonical informational notice — reuse this class anywhere a callout/banner * is needed. Green-tinted card with a primary-blue accent border. Never red; * red is reserved for genuine error/danger states. */ .tl-notice { max-width: 880px; margin: 0 auto; padding: 18px 24px; text-align: left; border: 1px solid var(--tl-border); border-left: 4px solid var(--tl-blue); border-radius: 18px; background: var(--tl-pale-green); color: var(--tl-text); font-weight: 500; line-height: 1.52; } .tl-notice strong { color: var(--tl-blue-dark); } .tl-nav { position: fixed; top: calc(12px + env(safe-area-inset-top)); left: 10%; z-index: 100; display: flex; align-items: center; justify-content: flex-start; gap: 16px; width: 80%; min-height: var(--tl-nav-height); padding: 6px 22px; overflow: hidden; isolation: isolate; background: #ffffff; border-radius: 9999px; box-shadow: 0 1px 2px rgba(15, 23, 42, 0.04), 0 10px 28px rgba(15, 23, 42, 0.1); } /* Soft teal curvy filaments on the white surface — 1 horizontal + 2 vertical. */ .tl-nav::before { content: ""; position: absolute; inset: -30% -8%; z-index: 0; pointer-events: none; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 900 120' preserveAspectRatio='none'%3E%3Cpath d='M-20 78C180 28 360 108 540 52S780 18 940 70' fill='none' stroke='rgba(76,175,147,0.2)' stroke-width='1.4' stroke-linecap='round'/%3E%3Cpath d='M220-20C160 30 300 55 190 90S280 130 240 160' fill='none' stroke='rgba(76,175,147,0.16)' stroke-width='1.25' stroke-linecap='round'/%3E%3Cpath d='M710-10C780 35 640 60 760 95S680 140 730 165' fill='none' stroke='rgba(32,127,191,0.12)' stroke-width='1.2' stroke-linecap='round'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: center; background-size: 100% 100%; } .tl-nav > * { position: relative; z-index: 1; } .tl-nav__logo { display: inline-flex; align-items: center; gap: 10px; flex-shrink: 0; max-width: min(150px, 48vw); overflow: visible; color: var(--tl-navy); text-decoration: none; font-size: 1rem; font-weight: 800; letter-spacing: -0.03em; } .tl-nav__logo span span { color: var(--tl-green); } .tl-nav__mark { width: 18px; height: 18px; border-radius: 50%; background: linear-gradient(135deg, var(--tl-blue), var(--tl-green)); box-shadow: 0 0 0 6px rgba(32, 127, 191, 0.1), 0 0 24px rgba(76, 175, 147, 0.18); } .tl-nav__logo-crop { display: flex; align-items: center; justify-content: flex-start; flex: 0 0 auto; width: 9rem; height: 2rem; overflow: hidden; } .tl-nav__logo-img { position: static; display: block; width: auto; height: 1.85rem; max-width: none; object-fit: contain; transform: scale(2.1); transform-origin: left center; } .tl-nav__links { display: flex; align-items: center; flex-wrap: nowrap; gap: 4px; margin-left: 0; } .tl-nav__links--desktop { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); z-index: 2; } .tl-nav__links a { white-space: nowrap; } .tl-nav__links a { color: var(--tl-text-secondary); text-decoration: none; font-size: 0.82rem; font-weight: 600; } .tl-nav__links a:not(.tl-btn) { padding: 6px 10px; border-radius: 999px; } .tl-nav__links a:not(.tl-btn):hover { color: var(--tl-blue); background: rgba(255, 255, 255, 0.8); } .tl-nav__links a:not(.tl-btn)[aria-current="page"] { color: var(--tl-surface); background: var(--tl-blue); } .tl-nav__signin { flex-shrink: 0; margin-left: auto; } .tl-nav__menu-button, .tl-nav__mobile-menu { display: none; } .tl-nav__menu-button { position: relative; flex: 0 0 auto; align-items: center; justify-content: center; width: 40px; height: 40px; padding: 0; border: 1px solid rgba(31, 42, 55, 0.14); border-radius: 12px; color: var(--tl-navy); background: rgba(255, 255, 255, 0.88); box-shadow: 0 8px 20px rgba(31, 42, 55, 0.08); cursor: pointer; } .tl-nav__menu-icon { position: relative; display: block; width: 18px; height: 14px; } .tl-nav__menu-icon span { position: absolute; left: 0; width: 18px; height: 2px; border-radius: 999px; background: currentColor; transform-origin: center; transition: transform 160ms ease, opacity 160ms ease; } .tl-nav__menu-icon span:nth-child(1) { top: 0; } .tl-nav__menu-icon span:nth-child(2) { top: 6px; } .tl-nav__menu-icon span:nth-child(3) { top: 12px; } .tl-nav.is-menu-open .tl-nav__menu-icon span:nth-child(1) { transform: translateY(6px) rotate(45deg); } .tl-nav.is-menu-open .tl-nav__menu-icon span:nth-child(2) { opacity: 0; } .tl-nav.is-menu-open .tl-nav__menu-icon span:nth-child(3) { transform: translateY(-6px) rotate(-45deg); } .tl-nav__mobile-menu[hidden] { display: none !important; } /* ===================================================== Floating white pill nav — Home / About / Policies / Contact. Light teal filament pattern on white; stays fixed. ===================================================== */ body.tl-home-page .tl-nav, body.tl-about-page .tl-nav, body.tl-policies-page .tl-nav, body.tl-contact-page .tl-nav { background: #ffffff; } body.tl-home-page .tl-nav__links a:not(.tl-btn), body.tl-about-page .tl-nav__links a:not(.tl-btn), body.tl-policies-page .tl-nav__links a:not(.tl-btn), body.tl-contact-page .tl-nav__links a:not(.tl-btn) { color: var(--tl-text-secondary); background: transparent; box-shadow: none; border-radius: 999px; } body.tl-home-page .tl-nav__links a:not(.tl-btn):hover, body.tl-about-page .tl-nav__links a:not(.tl-btn):hover, body.tl-policies-page .tl-nav__links a:not(.tl-btn):hover, body.tl-contact-page .tl-nav__links a:not(.tl-btn):hover { color: var(--tl-blue); background: rgba(32, 127, 191, 0.08); } body.tl-home-page .tl-nav__links a:not(.tl-btn)[aria-current="page"], body.tl-about-page .tl-nav__links a:not(.tl-btn)[aria-current="page"], body.tl-policies-page .tl-nav__links a:not(.tl-btn)[aria-current="page"], body.tl-contact-page .tl-nav__links a:not(.tl-btn)[aria-current="page"] { color: var(--tl-surface); background: var(--tl-blue); box-shadow: none; } /* Sign in — brand-green CTA on the white pill nav. */ body.tl-home-page .tl-btn--nav, body.tl-about-page .tl-btn--nav, body.tl-policies-page .tl-btn--nav, body.tl-contact-page .tl-btn--nav { min-height: 32px; padding-inline: 0.9rem; font-size: 0.82rem; border-radius: 999px; color: var(--hero-grad-1); background: var(--hero-accent-green); border-color: var(--hero-accent-green); box-shadow: 0 0 0 1px rgba(95, 211, 174, 0.22), 0 6px 16px rgba(10, 31, 46, 0.12); } body.tl-home-page .tl-btn--nav:hover, body.tl-about-page .tl-btn--nav:hover, body.tl-policies-page .tl-btn--nav:hover, body.tl-contact-page .tl-btn--nav:hover { color: var(--hero-grad-1); background: color-mix(in srgb, var(--hero-accent-green) 86%, var(--hero-cream)); border-color: color-mix(in srgb, var(--hero-accent-green) 86%, var(--hero-cream)); box-shadow: 0 0 0 1px rgba(95, 211, 174, 0.32), 0 10px 22px rgba(10, 31, 46, 0.14); } body.tl-home-page .tl-btn--nav:active, body.tl-about-page .tl-btn--nav:active, body.tl-policies-page .tl-btn--nav:active, body.tl-contact-page .tl-btn--nav:active { color: var(--hero-grad-1); background: color-mix(in srgb, var(--hero-accent-green) 78%, var(--hero-grad-1)); border-color: color-mix(in srgb, var(--hero-accent-green) 78%, var(--hero-grad-1)); box-shadow: 0 4px 12px rgba(10, 31, 46, 0.12); } body.tl-home-page .tl-nav__menu-button, body.tl-about-page .tl-nav__menu-button, body.tl-policies-page .tl-nav__menu-button, body.tl-contact-page .tl-nav__menu-button { color: var(--tl-navy); background: rgba(31, 42, 55, 0.05); border-color: rgba(31, 42, 55, 0.12); } /* * Thread divider — continuation of the hero connecting-thread motif. * One endpoint dot + a short blue→green filament (not a full-width bar). */ .tl-thread-divider { display: flex; align-items: center; justify-content: center; width: fit-content; max-width: 100%; margin: 0.25rem auto; padding-inline: clamp(20px, 5vw, 72px); gap: 0; } .tl-thread-divider__dot { display: block; width: 6px; height: 6px; border-radius: 50%; background: var(--tl-blue); box-shadow: 0 0 0 3px rgba(32, 127, 191, 0.14); flex-shrink: 0; } .tl-thread-divider__line { display: block; width: clamp(3.5rem, 12vw, 5.5rem); height: 1.5px; background: linear-gradient(90deg, var(--tl-blue) 0%, var(--tl-green) 100%); opacity: 0.72; flex-shrink: 0; } svg.tl-home-icon { display: block; flex: none; width: 20px; height: 20px; max-width: 20px; max-height: 20px; min-width: 0; overflow: hidden; stroke-width: 1.75; } .tl-hero { position: relative; min-height: 100vh; min-height: 100svh; overflow: clip; background: radial-gradient(circle at 14% 16%, rgba(255, 255, 255, 0.92), transparent 28%), radial-gradient(circle at 86% 10%, rgba(234, 245, 250, 0.96), transparent 26%), linear-gradient(180deg, #f8f8f4 0%, #eef2ee 100%); } .tl-hero__stage, .tl-hero__content { position: absolute; inset: 0; } .tl-hero__canvas, .tl-hero__ambient, .tl-hero__fallback { position: absolute; inset: 0; } .tl-hero__stage { z-index: 0; overflow: clip; } .tl-hero__canvas { z-index: 1; width: 100%; height: 100%; display: block; opacity: 0; transition: opacity 0.45s ease; pointer-events: none; } .tl-hero[data-scene="ready"] .tl-hero__canvas { opacity: 1; } .tl-hero[data-scene="ready"] .tl-hero__canvas--interactive { pointer-events: auto; } .tl-hero__ambient { z-index: 2; pointer-events: none; background: linear-gradient(180deg, rgba(246, 248, 247, 0.20) 0%, rgba(246, 248, 247, 0.03) 18%, rgba(246, 248, 247, 0.02) 74%, rgba(246, 248, 247, 0.24) 100%), linear-gradient(90deg, rgba(246, 248, 247, 0.58) 0%, rgba(246, 248, 247, 0.14) 24%, rgba(246, 248, 247, 0.03) 48%, rgba(246, 248, 247, 0.14) 100%); } .tl-hero__fallback { z-index: 0; display: flex; align-items: center; justify-content: center; padding: calc(var(--tl-nav-height) + 58px) 6vw 12vh; transition: opacity 0.45s ease, transform 0.45s ease; } .tl-hero[data-scene="ready"] .tl-hero__fallback { opacity: 0.08; transform: scale(1.02); } .tl-fallback-room { position: relative; width: min(84vw, 1080px); aspect-ratio: 1.72; border-radius: 40px; background: linear-gradient(160deg, rgba(255, 255, 255, 0.82), rgba(234, 245, 250, 0.2)), linear-gradient(180deg, rgba(255, 255, 255, 0.2), rgba(255, 255, 255, 0)); box-shadow: var(--tl-shadow); overflow: hidden; } .tl-fallback-room span { position: absolute; display: block; } .tl-fallback-room__door { left: 4%; top: 4%; bottom: 14%; width: 8%; border-radius: 24px; background: linear-gradient(180deg, rgba(38, 54, 59, 0.36), rgba(38, 54, 59, 0.08)); } .tl-fallback-room__wall { inset: 8% 6% 22%; border-radius: 34px 34px 24px 24px; background: linear-gradient(180deg, rgba(248, 247, 243, 0.98), rgba(241, 237, 229, 0.98)), linear-gradient(90deg, rgba(234, 245, 250, 0.34), rgba(234, 247, 242, 0.26)); } .tl-fallback-room__window { left: 11%; top: 14%; width: 22%; height: 44%; border-radius: 28px; background: linear-gradient(180deg, rgba(255, 255, 255, 0.96), rgba(234, 245, 250, 0.68)), radial-gradient(circle at top left, rgba(255, 255, 255, 0.96), transparent 60%); box-shadow: inset -10px 0 34px rgba(32, 127, 191, 0.08); } .tl-fallback-room__certificate { left: 36%; top: 16%; width: 10%; height: 16%; border-radius: 16px; border: 1px solid rgba(31, 42, 55, 0.12); background: linear-gradient(180deg, rgba(255, 255, 255, 0.9), rgba(246, 248, 247, 0.74)); box-shadow: 0 10px 18px rgba(31, 42, 55, 0.08); } .tl-fallback-room__shelf { left: 58%; top: 17%; width: 22%; height: 4%; border-radius: 999px; background: linear-gradient(180deg, rgba(183, 137, 97, 0.94), rgba(139, 101, 72, 0.98)); } .tl-fallback-room__panel { top: 20%; width: 11%; height: 28%; border-radius: 20px; border: 1px solid rgba(32, 127, 191, 0.18); background: linear-gradient(180deg, rgba(255, 255, 255, 0.8), rgba(234, 245, 250, 0.48)), linear-gradient(135deg, rgba(255, 255, 255, 0.34), rgba(76, 175, 147, 0.08)); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.42), 0 16px 24px rgba(31, 42, 55, 0.08); } .tl-fallback-room__panel::before, .tl-fallback-room__panel::after { content: ""; position: absolute; left: 18%; right: 18%; border-radius: 999px; background: rgba(31, 42, 55, 0.16); } .tl-fallback-room__panel::before { top: 24%; height: 8%; } .tl-fallback-room__panel::after { top: 44%; height: 6%; } .tl-fallback-room__panel--one { left: 50%; } .tl-fallback-room__panel--two { left: 63%; } .tl-fallback-room__panel--three { left: 76%; } .tl-fallback-room__floor { left: 2%; right: -4%; bottom: -10%; height: 34%; border-radius: 28% 28% 0 0; background: linear-gradient(180deg, rgba(217, 204, 190, 0.94), rgba(203, 191, 177, 0.98)); transform: perspective(700px) rotateX(68deg); transform-origin: bottom center; } .tl-fallback-room__desk { right: 16%; bottom: 24%; width: 38%; height: 11%; border-radius: 20px; background: linear-gradient(180deg, #c89a72, #8d6548); box-shadow: 0 18px 38px rgba(31, 42, 55, 0.16), inset 0 -12px 18px rgba(78, 56, 38, 0.22); } .tl-fallback-room__desk::before, .tl-fallback-room__desk::after { content: ""; position: absolute; bottom: -108%; width: 5%; height: 120%; border-radius: 14px; background: linear-gradient(180deg, rgba(141, 103, 75, 0.92), rgba(111, 84, 63, 0.98)); } .tl-fallback-room__desk::before { left: 12%; } .tl-fallback-room__desk::after { right: 12%; } .tl-fallback-room__monitor { right: 27%; bottom: 34%; width: 14%; height: 20%; border-radius: 14px; background: linear-gradient(180deg, rgba(255, 255, 255, 0.96), rgba(234, 245, 250, 0.88)), linear-gradient(180deg, rgba(32, 127, 191, 0.2), rgba(76, 175, 147, 0.16)); border: 7px solid rgba(38, 54, 59, 0.96); box-shadow: 0 0 0 10px rgba(255, 255, 255, 0.2), 0 24px 34px rgba(32, 127, 191, 0.18); } .tl-fallback-room__monitor::before { content: ""; position: absolute; left: 50%; bottom: -30%; width: 10%; height: 26%; border-radius: 999px; background: rgba(38, 54, 59, 0.9); transform: translateX(-50%); } .tl-fallback-room__keyboard { right: 27%; bottom: 26%; width: 12%; height: 3%; border-radius: 999px; background: rgba(246, 248, 247, 0.92); box-shadow: 0 10px 18px rgba(31, 42, 55, 0.1); } .tl-fallback-room__chair { border-radius: 30px; box-shadow: 0 20px 36px rgba(31, 42, 55, 0.14); } .tl-fallback-room__chair--patient { left: 39%; bottom: 18%; width: 14%; height: 18%; background: linear-gradient(180deg, rgba(245, 247, 246, 0.96), rgba(208, 215, 215, 0.98)); } .tl-fallback-room__chair--patient::before { content: ""; position: absolute; left: 10%; right: 10%; top: -36%; height: 60%; border-radius: 26px; background: linear-gradient(180deg, rgba(255, 255, 255, 0.98), rgba(221, 229, 229, 0.92)); } .tl-fallback-room__chair--therapist { right: 11%; bottom: 16%; width: 15%; height: 20%; background: linear-gradient(180deg, rgba(218, 224, 224, 0.98), rgba(164, 176, 178, 0.98)); box-shadow: 0 22px 38px rgba(31, 42, 55, 0.16), 0 0 0 1px rgba(76, 175, 147, 0.16); } .tl-fallback-room__chair--therapist::before { content: ""; position: absolute; left: 8%; right: 8%; top: -56%; height: 86%; border-radius: 30px; background: linear-gradient(180deg, rgba(216, 224, 224, 1), rgba(157, 170, 172, 0.96)); } .tl-fallback-room__chair--therapist::after { content: ""; position: absolute; left: -8%; right: -8%; bottom: -16%; height: 10%; border-radius: 999px; background: linear-gradient(90deg, rgba(32, 127, 191, 0.2), rgba(76, 175, 147, 0.32)); } .tl-fallback-room__lamp { right: 7%; bottom: 28%; width: 2%; height: 28%; border-radius: 999px; background: rgba(174, 184, 186, 0.94); } .tl-fallback-room__lamp::before { content: ""; position: absolute; left: 50%; top: -10%; width: 240%; height: 18%; border-radius: 999px 999px 42px 42px; background: linear-gradient(180deg, rgba(246, 248, 247, 0.98), rgba(220, 229, 229, 0.9)); transform: translateX(-50%); } .tl-fallback-room__plant { left: 21%; bottom: 21%; width: 8%; height: 24%; border-radius: 50% 50% 24px 24px; background: radial-gradient(circle at 50% 28%, rgba(76, 175, 147, 0.9), rgba(76, 175, 147, 0.08) 64%), linear-gradient(180deg, rgba(76, 175, 147, 0.76), rgba(76, 175, 147, 0.14)); } .tl-fallback-room__plant::before { content: ""; position: absolute; left: 26%; right: 26%; bottom: -16%; height: 20%; border-radius: 14px; background: rgba(244, 246, 245, 0.92); } .tl-fallback-room__path { left: 44%; right: 18%; bottom: 29%; height: 8px; border-radius: 999px; background: linear-gradient(90deg, var(--tl-blue), var(--tl-green), var(--tl-green)); box-shadow: 0 0 20px rgba(32, 127, 191, 0.18), 0 0 28px rgba(76, 175, 147, 0.16); } .tl-hero__content { z-index: 3; padding: var(--tl-hero-safe-top) clamp(18px, 3vw, 28px) 26px; pointer-events: none; } .tl-hero__copy { position: relative; width: 100%; height: 100%; } .tl-hero__hud { position: absolute; inset: 0; z-index: 4; pointer-events: none; } .tl-home-loader { position: fixed; inset: 0; z-index: 1000; /* above .tl-nav (100) and .tl-skip-link (120) */ display: grid; place-items: center; background: var(--tl-page-bg); /* opaque #EBF5EE during WebGL handoff only */ opacity: 0; visibility: hidden; pointer-events: none; transition: opacity 280ms ease, visibility 280ms ease; } .tl-home-loader.is-handoff { opacity: 1; visibility: visible; pointer-events: auto; } .tl-home-loader.is-dismissing { opacity: 0; visibility: hidden; pointer-events: none; } .tl-home-loader__logo-crop { position: relative; display: block; width: 168px; height: 38px; overflow: hidden; } .tl-home-loader__logo-img { position: absolute; top: -75px; left: -50px; display: block; width: 268px; max-width: none; height: auto; } .tl-home-loader__logo-img--silhouette { filter: brightness(0); } .tl-home-loader__logo-img--color { clip-path: inset(0 100% 0 0); animation: tl-home-loader-reveal 2.2s ease-in-out infinite; } @keyframes tl-home-loader-reveal { 0%, 10% { clip-path: inset(0 100% 0 0); } 50%, 66% { clip-path: inset(0 0 0 0); } 92%, 100% { clip-path: inset(0 0 0 100%); } } .tl-copy-card { position: absolute; left: clamp(18px, 4.8vw, 68px); top: clamp(8px, 2vh, 24px); width: min(86vw, 410px); height: auto; max-height: none; padding: 22px 24px 20px; border: 1px solid rgba(31, 42, 55, 0.16); border-radius: 22px; background: linear-gradient(180deg, rgba(255, 255, 255, 0.94), rgba(246, 248, 247, 0.84)), linear-gradient(135deg, rgba(234, 245, 250, 0.18), rgba(234, 247, 242, 0.1)); box-shadow: 0 32px 72px rgba(15, 23, 42, 0.2), 0 10px 26px rgba(31, 42, 55, 0.12), inset 0 1px 0 rgba(255, 255, 255, 0.82); backdrop-filter: blur(26px) saturate(112%); -webkit-backdrop-filter: blur(26px) saturate(112%); pointer-events: auto; overflow: visible; } .tl-copy-card::before { content: ""; position: absolute; inset: 0 auto 0 0; width: 6px; border-radius: 22px 0 0 22px; background: linear-gradient(180deg, var(--tl-blue), var(--tl-green)); } .tl-copy-card h1, .tl-section__heading h2, .tl-panel h2, .tl-privacy h2, .tl-about__copy h2, .tl-cta h2 { margin: 0 0 14px; font-family: var(--tl-display); font-weight: 700; letter-spacing: -0.05em; line-height: 0.94; } .tl-copy-card h1 { font-size: clamp(1.9rem, 3vw, 2.35rem); max-width: none; text-wrap: balance; } .tl-copy-card__headline-line { display: block; white-space: nowrap; } .tl-copy-card__support, .tl-copy-card__body, .tl-section__heading p, .tl-card p, .tl-panel p, .tl-stat p, .tl-about__copy p, .tl-cta p, .tl-step p { margin: 0; color: var(--tl-text-secondary); font-size: 1rem; line-height: 1.68; } .tl-copy-card__support { margin-bottom: 12px; font-size: clamp(1.06rem, 1.9vw, 1.22rem); line-height: 1.52; color: var(--tl-text); } .tl-copy-card__body { line-height: 1.58; } .tl-copy-card__actions { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 24px; } /* Semantic equivalents for the CanvasTexture copy. Keep them visible so keyboard users do not tab through hidden targets, while staying compact enough to avoid competing with the hero. */ .tl-cinematic-destinations { position: relative; z-index: 12; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; width: min(100% - 40px, 1120px); margin: clamp(-72px, -6vw, -42px) auto 0; padding: 0; } .tl-cinematic-destination { margin: 0; padding: 18px 20px; overflow: visible; white-space: normal; border: 1px solid rgba(31, 42, 55, 0.16); border-left: 4px solid var(--tl-blue); border-radius: 16px; background: linear-gradient(180deg, color-mix(in srgb, var(--tl-surface) 96%, var(--tl-page-bg)), var(--tl-surface)), linear-gradient(135deg, rgba(32, 127, 191, 0.06), rgba(76, 175, 147, 0.05)); box-shadow: var(--tl-shadow-soft); } .tl-cinematic-destination:focus-within { border-color: rgba(31, 42, 55, 0.22); box-shadow: var(--tl-shadow); } .tl-cinematic-destination:nth-child(2):focus-within { border-left-color: var(--tl-green); } .tl-cinematic-destination__kicker { margin: 0 0 6px; color: var(--tl-blue); font-size: 0.75rem; font-weight: 800; letter-spacing: 0.15em; text-transform: uppercase; } .tl-cinematic-destination h2 { margin: 0 0 7px; color: var(--tl-navy); font-family: var(--tl-display); font-size: 1.45rem; line-height: 1.05; } .tl-cinematic-destination > p:not(.tl-cinematic-destination__kicker) { margin: 0 0 11px; color: var(--tl-text-secondary); font-size: 0.88rem; line-height: 1.45; } .tl-cinematic-destination a { display: inline-flex; color: var(--tl-blue-dark); font-size: 0.9rem; font-weight: 800; text-decoration: underline; text-underline-offset: 4px; } .tl-copy-card[data-position="lead"] { left: clamp(18px, 4.8vw, 64px); top: clamp(8px, 2vh, 22px); } .tl-copy-card[data-position="wall"] { left: clamp(18px, 5.6vw, 74px); top: clamp(64px, 11vh, 118px); } .tl-copy-card[data-position="workspace"] { left: clamp(18px, 5.2vw, 72px); top: auto; bottom: 184px; } .tl-copy-card[data-position="contact"] { left: auto; right: clamp(18px, 4vw, 48px); top: clamp(42px, 10vh, 118px); width: min(86vw, 400px); } .tl-copy-card[data-position="connection"] { left: clamp(18px, 5vw, 72px); top: auto; bottom: 178px; } .tl-copy-card[data-position="final"] { left: clamp(18px, 4.8vw, 64px); top: clamp(44px, 12vh, 116px); width: min(86vw, 400px); background: linear-gradient(180deg, rgba(255, 255, 255, 0.985), rgba(246, 248, 247, 0.955)), linear-gradient(135deg, rgba(234, 245, 250, 0.14), rgba(234, 247, 242, 0.08)); } .tl-webgl-note { position: absolute; left: clamp(18px, 4.8vw, 64px); bottom: 28px; display: none; max-width: min(90vw, 460px); margin: 0; padding: 14px 16px; border-radius: 18px; background: rgba(255, 255, 255, 0.9); color: var(--tl-text); box-shadow: var(--tl-shadow-soft); } .tl-main { position: relative; z-index: 1; } .tl-section { padding: clamp(74px, 10vw, 116px) clamp(20px, 5vw, 72px); } .tl-section__heading { max-width: 780px; margin: 0 auto clamp(30px, 5vw, 40px); text-align: center; } .tl-section__heading h2, .tl-panel h2, .tl-about__copy h2, .tl-cta h2 { font-size: clamp(2.2rem, 4vw, 3.6rem); } .tl-feature-grid, .tl-pricing-grid, .tl-privacy__cards, .tl-steps { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 20px; } .tl-card, .tl-step, .tl-stat, .tl-panel, .tl-cta { border: 1px solid var(--tl-border); border-radius: 28px; background: linear-gradient(180deg, rgba(255, 255, 255, 0.9), rgba(246, 248, 247, 0.8)), linear-gradient(135deg, rgba(234, 245, 250, 0.08), rgba(234, 247, 242, 0.06)); box-shadow: var(--tl-shadow-soft); } .tl-card, .tl-step, .tl-stat { padding: 24px; } .tl-card h3, .tl-step h3 { margin: 0 0 10px; font-size: 1.22rem; line-height: 1.24; } .tl-step span { display: inline-flex; margin-bottom: 14px; color: var(--tl-blue); font-size: 0.82rem; font-weight: 800; letter-spacing: 0.12em; } .tl-split { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 24px; } .tl-panel { padding: clamp(26px, 4vw, 38px); } .tl-list { margin: 0; padding-left: 1.1rem; color: var(--tl-text); line-height: 1.72; } .tl-list li + li { margin-top: 10px; } .tl-privacy { display: grid; grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr); gap: 24px; align-items: start; } .tl-stat strong { display: block; margin-bottom: 10px; font-size: 1rem; } .tl-card--pricing { display: flex; flex-direction: column; align-items: flex-start; gap: 14px; } .tl-card--featured { background: linear-gradient(180deg, rgba(234, 245, 250, 0.9), rgba(234, 247, 242, 0.9)), linear-gradient(135deg, rgba(32, 127, 191, 0.06), rgba(76, 175, 147, 0.06)); border-color: rgba(32, 127, 191, 0.16); } .tl-plan-label { margin: 0; color: var(--tl-text-secondary); font-size: 0.82rem; font-weight: 800; letter-spacing: 0.14em; text-transform: uppercase; } .tl-price { margin: 0; font-family: var(--tl-display); font-size: clamp(2rem, 4vw, 3rem); font-weight: 700; letter-spacing: -0.05em; } .tl-about { display: grid; grid-template-columns: minmax(0, 1fr) minmax(240px, 360px); gap: 24px; align-items: center; padding: clamp(28px, 5vw, 42px); border: 1px solid var(--tl-border); border-radius: 34px; background: linear-gradient(145deg, rgba(255, 255, 255, 0.92), rgba(234, 245, 250, 0.44)), linear-gradient(180deg, rgba(246, 248, 247, 0.88), rgba(255, 255, 255, 0.84)); box-shadow: var(--tl-shadow); } .tl-about__accent { position: relative; min-height: 260px; } .tl-about__accent span { position: absolute; inset: 0; border-radius: 30px; background: linear-gradient(135deg, rgba(32, 127, 191, 0.18), rgba(76, 175, 147, 0.16)); } .tl-about__accent span:nth-child(1) { transform: rotate(-5deg); } .tl-about__accent span:nth-child(2) { transform: scale(0.82) translate(18px, 18px); background: linear-gradient(135deg, rgba(255, 255, 255, 0.82), rgba(234, 245, 250, 0.56)); } .tl-about__accent span:nth-child(3) { transform: scale(0.58) translate(44px, 44px); background: linear-gradient(135deg, var(--tl-blue), var(--tl-green)); box-shadow: 0 28px 44px rgba(32, 127, 191, 0.18); } .tl-cta { display: flex; align-items: center; justify-content: space-between; gap: 24px; padding: clamp(28px, 5vw, 42px); background: radial-gradient(circle at top left, rgba(234, 245, 250, 0.92), transparent 40%), linear-gradient(135deg, rgba(255, 255, 255, 0.92), rgba(234, 247, 242, 0.88)); } .tl-cta__actions { display: flex; flex-wrap: wrap; gap: 12px; } .tl-icon { display: block; width: 26px; height: 26px; max-width: 26px; max-height: 26px; flex-shrink: 0; } .tl-section--value { padding-top: clamp(48px, 7vw, 84px); } .tl-value-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 20px; max-width: 1180px; margin: 0 auto; } .tl-value-card { display: flex; flex-direction: column; gap: 10px; padding: 24px; border: 1px solid var(--tl-border); border-radius: 20px; background: var(--tl-surface); box-shadow: var(--tl-shadow-soft); } .tl-value-card__icon { display: inline-flex; align-items: center; justify-content: center; width: 46px; height: 46px; border-radius: 14px; color: var(--tl-blue); background: var(--tl-pale-blue); } .tl-value-card h3 { margin: 4px 0 0; font-size: 1.1rem; color: var(--tl-text); } .tl-value-card p { margin: 0; color: var(--tl-text-secondary); font-size: 0.95rem; line-height: 1.6; } .tl-trust-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 20px; } .tl-trust-card { display: flex; flex-direction: column; gap: 12px; padding: 26px; border: 1px solid var(--tl-border); border-radius: 24px; background: var(--tl-surface); box-shadow: var(--tl-shadow-soft); } .tl-trust-badge { display: inline-flex; align-items: center; justify-content: center; width: 48px; height: 48px; border-radius: 14px; color: var(--tl-green); background: var(--tl-pale-green); } .tl-trust-card h3 { margin: 0; font-size: 1.12rem; color: var(--tl-text); } .tl-trust-card p { margin: 0; color: var(--tl-text-secondary); line-height: 1.6; } .tl-trust-card--quote { justify-content: center; background: linear-gradient(145deg, rgba(32, 127, 191, 0.06), rgba(76, 175, 147, 0.06)), var(--tl-surface); } .tl-trust-quote { font-size: 1.05rem; font-style: italic; color: var(--tl-text) !important; } .tl-trust-attribution { font-weight: 700; color: var(--tl-text-secondary) !important; } .tl-faq { max-width: 820px; margin: 0 auto; display: flex; flex-direction: column; gap: 14px; } .tl-faq__item { border: 1px solid var(--tl-border); border-radius: 18px; background: var(--tl-surface); box-shadow: var(--tl-shadow-soft); overflow: hidden; } .tl-faq__question { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 20px 24px; font-weight: 700; font-size: 1.02rem; color: var(--tl-text); cursor: pointer; list-style: none; } .tl-faq__question::-webkit-details-marker { display: none; } .tl-faq__marker { position: relative; flex-shrink: 0; width: 18px; height: 18px; } .tl-faq__marker::before, .tl-faq__marker::after { content: ""; position: absolute; inset: 50% 0 auto 0; height: 2px; border-radius: 999px; background: var(--tl-blue); transform: translateY(-50%); transition: transform 0.2s ease; } .tl-faq__marker::after { transform: translateY(-50%) rotate(90deg); } .tl-faq__item[open] .tl-faq__marker::after { transform: translateY(-50%) rotate(0deg); } .tl-faq__answer { padding: 0 24px 20px; } .tl-faq__answer p { margin: 0; color: var(--tl-text-secondary); line-height: 1.7; } .tl-footer { position: relative; color: var(--tl-footer-text); background: var(--tl-footer-bg); padding: 2.75rem clamp(1.25rem, 5vw, 4rem) calc(1.75rem + env(safe-area-inset-bottom)); overflow: hidden; } /* Brand thread accent — blue→green hairline across the top edge */ .tl-footer::before { content: ""; position: absolute; inset: 0 0 auto; height: 2px; background: linear-gradient( 90deg, var(--tl-blue) 0%, var(--hero-accent-green, #5FD3AE) 100% ); } .tl-footer__inner { position: relative; z-index: 1; max-width: 72rem; margin-inline: auto; } .tl-footer__top { display: flex; flex-wrap: wrap; align-items: flex-start; gap: 2rem 3.5rem; padding-bottom: 1.75rem; border-bottom: 1px solid rgba(250, 249, 246, 0.12); } .tl-footer__brand { display: flex; flex-direction: column; gap: 0.5rem; flex: 1 1 16rem; max-width: 24rem; min-width: 0; margin-right: auto; } .tl-footer__brand-name { font-family: var(--tl-display); font-size: 1.375rem; font-weight: 600; letter-spacing: -0.02em; line-height: 1.2; color: var(--tl-footer-text); text-decoration: none; } .tl-footer__brand-name:hover { color: var(--hero-accent-green, #5FD3AE); } .tl-footer__tagline { margin: 0; max-width: 26ch; font-size: 0.875rem; line-height: 1.55; color: var(--tl-footer-muted); } .tl-footer__nav { display: flex; flex-direction: column; align-items: flex-start; gap: 0.35rem; flex: 0 0 auto; min-width: 8rem; } .tl-footer__nav a { color: var(--tl-footer-link); text-decoration: none; font-size: 0.875rem; font-weight: 600; line-height: 1.45; padding-block: 0.1rem; } .tl-footer__nav a:hover { color: var(--tl-blue-dark); } .tl-footer__contact { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 0.4rem; flex: 0 0 auto; min-width: 10rem; } .tl-footer__contact a { color: var(--tl-footer-link); text-decoration: none; font-size: 0.875rem; font-weight: 600; line-height: 1.45; word-break: break-word; } .tl-footer__contact a:hover { color: var(--tl-blue-dark); } .tl-footer__bottom { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 0.75rem 1.5rem; padding-top: 1.25rem; } .tl-footer__copy { margin: 0; font-size: 0.8125rem; color: color-mix(in srgb, var(--tl-footer-muted) 55%, var(--tl-footer-bg)); } @media (max-width: 900px) { .tl-footer__top { gap: 1.5rem 2.5rem; } .tl-footer__brand { flex: 1 1 100%; max-width: 36rem; margin-right: 0; padding-bottom: 0.25rem; } } @media (max-width: 600px) { .tl-footer { padding-block: 2.25rem calc(1.5rem + env(safe-area-inset-bottom)); text-align: center; } .tl-footer__top { flex-direction: column; align-items: center; gap: 1.5rem; padding-bottom: 1.5rem; } .tl-footer__brand { align-items: center; max-width: none; margin-right: 0; } .tl-footer__tagline { max-width: 28ch; } .tl-footer__nav { flex-direction: row; flex-wrap: wrap; justify-content: center; align-items: center; gap: 0.35rem 1rem; max-width: 22rem; min-width: 0; } .tl-footer__nav a { padding: 0.2rem 0.15rem; } .tl-footer__contact { align-items: center; min-width: 0; } .tl-footer__bottom { justify-content: center; padding-top: 1.125rem; } } body.tl-static .tl-webgl-note { display: block; } @media (min-width: 768px) and (max-height: 800px) { .tl-copy-card[data-position="final"] { top: 0; } } @media (max-width: 1023px) { .tl-copy-card { width: min(46vw, 410px); padding: 18px 20px; } .tl-copy-card h1 { font-size: clamp(1.8rem, 4.4vw, 2.5rem); } .tl-copy-card[data-position="contact"] { right: 18px; } .tl-feature-grid, .tl-pricing-grid, .tl-privacy__cards, .tl-steps, .tl-split, .tl-privacy, .tl-about, .tl-cta, .tl-trust-grid { grid-template-columns: 1fr; } .tl-value-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } .tl-cta { justify-content: flex-start; } } @media (max-width: 767px) { :root { --tl-hero-safe-top: 0px; } .tl-hero__fallback { padding: 18px 12px 54px; } .tl-fallback-room { width: min(96vw, 620px); aspect-ratio: 1.2; border-radius: 28px; } .tl-fallback-room__window { width: 26%; height: 32%; } .tl-fallback-room__certificate, .tl-fallback-room__shelf, .tl-fallback-room__panel--three { display: none; } .tl-fallback-room__panel { top: 18%; width: 16%; height: 18%; } .tl-fallback-room__panel--one { left: 48%; } .tl-fallback-room__panel--two { left: 66%; } .tl-fallback-room__desk { right: 14%; bottom: 28%; width: 44%; } .tl-fallback-room__monitor { right: 26%; bottom: 39%; width: 18%; height: 14%; } .tl-fallback-room__keyboard { right: 26%; width: 16%; } .tl-fallback-room__chair--patient { left: 32%; bottom: 24%; width: 16%; height: 12%; } .tl-fallback-room__chair--therapist { right: 10%; bottom: 22%; width: 18%; height: 14%; } .tl-fallback-room__path { left: 38%; right: 12%; bottom: 32%; } .tl-cinematic-destinations { grid-template-columns: 1fr; gap: 10px; width: min(100% - 28px, 460px); margin-top: 18px; padding: 18px 14px; background: linear-gradient(180deg, rgba(246, 248, 247, 0.98), rgba(234, 247, 242, 0.72)); border-radius: 18px; } .tl-cinematic-destination, .tl-cinematic-destination:focus-within { width: 100%; padding: 10px 13px; border: 1px solid rgba(31, 42, 55, 0.14); border-left: 4px solid var(--tl-blue); border-radius: 12px; background: rgba(255, 255, 255, 0.94); box-shadow: 0 8px 20px rgba(31, 42, 55, 0.09); } .tl-cinematic-destination:nth-child(2) { border-left-color: var(--tl-green); } .tl-cinematic-destination h2 { display: inline; margin-right: 6px; font-family: var(--tl-font); font-size: 0.96rem; } .tl-cinematic-destination__kicker { margin-bottom: 1px; font-size: 0.75rem; } .tl-cinematic-destination > p:not(.tl-cinematic-destination__kicker) { display: inline; margin: 0; font-size: 0.8125rem; line-height: 1.3; } .tl-cinematic-destination a { display: block; margin-top: 3px; font-size: 0.8125rem; } .tl-hero { min-height: var(--tl-cinematic-track-height, 560svh); padding-top: calc(var(--tl-nav-height) + env(safe-area-inset-top)); overflow: visible; } .tl-hero__stage { position: sticky; top: calc(var(--tl-nav-height) + env(safe-area-inset-top)); inset-inline: 0; bottom: auto; width: 100%; height: calc(100svh - var(--tl-nav-height) - env(safe-area-inset-top)); min-height: calc(100svh - var(--tl-nav-height) - env(safe-area-inset-top)); overflow: clip; } .tl-hero__content { position: absolute; inset: 0; padding: 0; margin: 0; pointer-events: none; } .tl-hero__copy { height: auto; } .tl-copy-card { position: absolute; top: 70px; right: auto; bottom: auto; left: 16px; width: calc(100% - 32px); max-width: 350px; max-height: none; padding: 18px 18px 17px; border-radius: 18px; margin: 0; pointer-events: auto; } .tl-copy-card::before { width: 100%; height: 5px; inset: 0 0 auto; border-radius: 18px 18px 0 0; } .tl-copy-card h1 { margin-bottom: 8px; font-size: clamp(2rem, 9vw, 2.55rem); line-height: 0.98; max-width: none; } .tl-copy-card .tl-kicker { margin-bottom: 7px; font-size: 0.75rem; letter-spacing: 0.14em; } .tl-copy-card__support { margin-bottom: 7px; font-size: 0.94rem; line-height: 1.4; } .tl-copy-card__body { font-size: 0.86rem; line-height: 1.4; } .tl-copy-card[data-position="lead"], .tl-copy-card[data-position="wall"], .tl-copy-card[data-position="workspace"], .tl-copy-card[data-position="contact"], .tl-copy-card[data-position="connection"], .tl-copy-card[data-position="final"] { top: 70px; right: auto; bottom: auto; left: 16px; width: calc(100% - 32px); } .tl-copy-card[data-position="final"] { top: 70px; right: auto; bottom: auto; left: 16px; width: min(310px, calc(100% - 32px)); padding: 15px 16px 14px; } .tl-copy-card[data-position="final"] h1 { margin-bottom: 0; font-size: clamp(1.78rem, 8vw, 2.1rem); line-height: 1; } .tl-copy-card[data-position="final"] .tl-copy-card__support, .tl-copy-card[data-position="final"] .tl-copy-card__body { display: block; } .tl-copy-card__actions { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; margin-top: 12px; } .tl-copy-card__actions .tl-btn { width: 100%; min-height: 44px; padding-inline: 14px; font-size: 0.86rem; } /* The final copy appears during the TheraLink transition, then clears for the settled hold so both seated people, both chairs, and the chest-anchored care path remain unobstructed. */ .tl-hero[data-final-hold="true"] .tl-copy-card[data-position="final"] { visibility: hidden !important; opacity: 0 !important; transform: translateY(-10px) !important; pointer-events: none; } .tl-webgl-note { left: 12px; bottom: 66px; max-width: calc(100% - 24px); padding: 11px 13px; font-size: 0.82rem; line-height: 1.35; } body.tl-static .tl-webgl-note { bottom: 16px; } body.tl-static .tl-hero { min-height: 0; padding-top: calc(var(--tl-nav-height) + env(safe-area-inset-top)); overflow: clip; } body.tl-static .tl-hero__stage { position: relative; top: auto; height: calc(100svh - var(--tl-nav-height) - env(safe-area-inset-top)); min-height: 620px; } .tl-section { padding-inline: 16px; } .tl-value-grid { grid-template-columns: 1fr; } } /* Switch to a single-row compact header before the desktop links can wrap. */ @media (max-width: 1080px) { :root { --tl-nav-height: 52px; --tl-hero-safe-top: calc(var(--tl-nav-height) + env(safe-area-inset-top) + 18px); } .tl-nav { flex-direction: row; align-items: center; justify-content: space-between; gap: 12px; min-height: var(--tl-nav-height); padding: 4px 14px 4px 16px; } .tl-nav__logo { max-width: calc(100vw - 72px); } .tl-nav__logo-crop { width: 8.25rem; height: 1.85rem; } .tl-nav__logo-img { height: 1.7rem; transform: scale(2); transform-origin: left center; } .tl-home-loader__logo-crop { width: 150px; height: 34px; } .tl-home-loader__logo-img { top: -67px; left: -45px; width: 239px; } html.tl-nav-enhanced .tl-nav__links--desktop, html.tl-nav-enhanced .tl-nav__signin { display: none; } html.tl-nav-enhanced .tl-nav__menu-button { display: inline-flex; margin-left: auto; } .tl-nav__mobile-menu { position: absolute; top: calc(100% + 8px); right: 0; left: 0; display: grid; gap: 6px; max-height: calc(100dvh - var(--tl-nav-height) - env(safe-area-inset-top) - 48px); padding: 12px; overflow-y: auto; overscroll-behavior: contain; border: 1px solid rgba(31, 42, 55, 0.1); border-radius: 1.25rem; background: #ffffff; box-shadow: 0 16px 40px rgba(31, 42, 55, 0.14); } .tl-nav__mobile-menu a { display: flex; align-items: center; min-height: 46px; padding: 10px 14px; border-radius: 10px; color: var(--tl-text); font-size: 0.96rem; font-weight: 700; text-decoration: none; } .tl-nav__mobile-menu a:not(.tl-btn):hover, .tl-nav__mobile-menu a:not(.tl-btn):focus-visible { color: var(--tl-blue-dark); background: var(--tl-pale-blue); } .tl-nav__mobile-menu a:not(.tl-btn)[aria-current="page"] { color: var(--tl-surface); background: var(--tl-blue); box-shadow: inset 3px 0 0 var(--tl-green); } .tl-nav__mobile-menu .tl-btn--nav { justify-content: center; min-height: 48px; color: var(--tl-surface); border-color: var(--tl-blue); background: var(--tl-blue); box-shadow: 0 8px 20px rgba(32, 127, 191, 0.24); } body.tl-home-page .tl-nav__mobile-menu, body.tl-about-page .tl-nav__mobile-menu, body.tl-policies-page .tl-nav__mobile-menu, body.tl-contact-page .tl-nav__mobile-menu { background: #ffffff; border-color: rgba(31, 42, 55, 0.1); } body.tl-home-page .tl-nav__mobile-menu a:not(.tl-btn), body.tl-about-page .tl-nav__mobile-menu a:not(.tl-btn), body.tl-policies-page .tl-nav__mobile-menu a:not(.tl-btn), body.tl-contact-page .tl-nav__mobile-menu a:not(.tl-btn) { color: var(--tl-text); } body.tl-home-page .tl-nav__mobile-menu a:not(.tl-btn):hover, body.tl-home-page .tl-nav__mobile-menu a:not(.tl-btn):focus-visible, body.tl-about-page .tl-nav__mobile-menu a:not(.tl-btn):hover, body.tl-about-page .tl-nav__mobile-menu a:not(.tl-btn):focus-visible, body.tl-policies-page .tl-nav__mobile-menu a:not(.tl-btn):hover, body.tl-policies-page .tl-nav__mobile-menu a:not(.tl-btn):focus-visible, body.tl-contact-page .tl-nav__mobile-menu a:not(.tl-btn):hover, body.tl-contact-page .tl-nav__mobile-menu a:not(.tl-btn):focus-visible { color: var(--tl-blue-dark); background: var(--tl-pale-blue); } body.tl-home-page .tl-nav__mobile-menu a:not(.tl-btn)[aria-current="page"], body.tl-about-page .tl-nav__mobile-menu a:not(.tl-btn)[aria-current="page"], body.tl-policies-page .tl-nav__mobile-menu a:not(.tl-btn)[aria-current="page"], body.tl-contact-page .tl-nav__mobile-menu a:not(.tl-btn)[aria-current="page"] { color: var(--tl-surface); background: var(--tl-blue); box-shadow: inset 3px 0 0 var(--tl-green); } body.tl-home-page .tl-nav__mobile-menu .tl-btn--nav, body.tl-about-page .tl-nav__mobile-menu .tl-btn--nav, body.tl-policies-page .tl-nav__mobile-menu .tl-btn--nav, body.tl-contact-page .tl-nav__mobile-menu .tl-btn--nav { color: var(--hero-grad-1); background: var(--hero-accent-green); border-color: var(--hero-accent-green); border-radius: 999px; box-shadow: 0 0 0 1px rgba(95, 211, 174, 0.22), 0 8px 22px rgba(10, 31, 46, 0.12); } body.tl-home-page .tl-nav__mobile-menu .tl-btn--nav:hover, body.tl-about-page .tl-nav__mobile-menu .tl-btn--nav:hover, body.tl-policies-page .tl-nav__mobile-menu .tl-btn--nav:hover, body.tl-contact-page .tl-nav__mobile-menu .tl-btn--nav:hover { color: var(--hero-grad-1); background: color-mix(in srgb, var(--hero-accent-green) 86%, var(--hero-cream)); border-color: color-mix(in srgb, var(--hero-accent-green) 86%, var(--hero-cream)); } } @media (min-width: 768px) and (max-width: 1119px) { body:not(.tl-static) .tl-hero { height: var(--tl-cinematic-track-height, 520svh); min-height: var(--tl-cinematic-track-height, 520svh); overflow: clip; } body:not(.tl-static) .tl-hero__stage { position: sticky; inset: auto; top: calc(var(--tl-nav-height) + env(safe-area-inset-top)); width: 100%; height: calc(100svh - var(--tl-nav-height) - env(safe-area-inset-top)); min-height: 0; overflow: clip; } body:not(.tl-static) .tl-hero__content { position: absolute; inset: 0; padding: 0; pointer-events: none; } body:not(.tl-static) .tl-hero__copy { width: 100%; height: 100%; } body:not(.tl-static) .tl-copy-card { max-height: calc(100% - 116px); } body:not(.tl-static) .tl-hero[data-final-hold="true"] .tl-copy-card[data-position="final"] { visibility: hidden !important; opacity: 0 !important; transform: translateY(-10px) !important; pointer-events: none; } } @media (max-width: 380px) { .tl-copy-card__actions { grid-template-columns: 1fr; } } @media (min-width: 768px) and (max-height: 650px) { .tl-copy-card { top: 0; padding: 16px 18px; } .tl-copy-card .tl-kicker { margin-bottom: 8px; } .tl-copy-card h1 { margin-bottom: 10px; } .tl-copy-card__support { margin-bottom: 8px; } .tl-copy-card__actions { margin-top: 14px; } } @media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } .tl-nav__menu-icon span, .tl-hero__canvas, .tl-hero__fallback, .tl-btn { transition-duration: 0.01ms !important; } /* Loader shimmer: hold the full-color logo statically (resting clip-path hides it). */ .tl-home-loader__logo-img--color { animation: none; clip-path: inset(0 0 0 0); } }