/* ============================================================ Surface treatments — applied via [data-surface] on Options: • "flat" → default (no overrides; stylesheet wins) • "neumorphic" → soft extruded UI on a uniform sand surface • "glass" → frosted backdrop-filter w/ inner highlight These overrides intentionally avoid touching brand colors, typography, layout or spacing — only how surfaces feel. ============================================================ */ /* ─────────────── NEUMORPHIC ─────────────── */ :root[data-surface="neumorphic"] { --bg: #ECDFC4; --bg-elev: #ECDFC4; --line: rgba(160, 120, 60, .14); --line-strong: rgba(160, 120, 60, .22); --nm-light: rgba(255, 255, 255, .85); --nm-dark: rgba(120, 86, 36, .22); } :root[data-palette="dark"][data-surface="neumorphic"] { --bg: #0E2640; --bg-elev: #0E2640; --nm-light: rgba(78, 128, 175, .14); --nm-dark: rgba(0, 0, 0, .55); } [data-surface="neumorphic"] .card, [data-surface="neumorphic"] .sport-card, [data-surface="neumorphic"] .teacher, [data-surface="neumorphic"] .testi, [data-surface="neumorphic"] .plan:not(.featured), [data-surface="neumorphic"] .faq-item, [data-surface="neumorphic"] .schedule, [data-surface="neumorphic"] .trust-strip { background: var(--bg); border: 0 !important; border-radius: 22px; box-shadow: -10px -10px 24px var(--nm-light), 12px 12px 28px var(--nm-dark); } [data-surface="neumorphic"] .trust-strip { border-radius: 22px; overflow: hidden; } [data-surface="neumorphic"] .trust-item { border-right: 1px solid var(--line); } [data-surface="neumorphic"] .trust-item:last-child { border-right: 0; } [data-surface="neumorphic"] .card:hover, [data-surface="neumorphic"] .sport-card:hover, [data-surface="neumorphic"] .teacher:hover, [data-surface="neumorphic"] .plan:not(.featured):hover { box-shadow: inset -6px -6px 14px var(--nm-light), inset 8px 8px 18px var(--nm-dark); } [data-surface="neumorphic"] .btn-ghost { background: var(--bg); border: 0; color: var(--text); box-shadow: -6px -6px 14px var(--nm-light), 8px 8px 16px var(--nm-dark); } [data-surface="neumorphic"] .btn-ghost:hover { background: var(--bg); color: var(--text); box-shadow: inset -4px -4px 10px var(--nm-light), inset 6px 6px 14px var(--nm-dark); } [data-surface="neumorphic"] .btn-primary { /* keep the orange brand pop but switch to a soft puffed look */ box-shadow: -4px -4px 10px rgba(255,255,255,.45), 6px 6px 14px rgba(120, 60, 20, .35), inset 1px 1px 0 rgba(255,255,255,.35); } [data-surface="neumorphic"] .btn-primary:hover { transform: translateY(-2px); box-shadow: -6px -6px 14px rgba(255,255,255,.5), 8px 8px 18px rgba(120, 60, 20, .42), inset 1px 1px 0 rgba(255,255,255,.4); } [data-surface="neumorphic"] .btn-primary:active { box-shadow: inset -3px -3px 8px rgba(255,255,255,.25), inset 5px 5px 12px rgba(120, 60, 20, .35); } [data-surface="neumorphic"] .faq-item { background: var(--bg); } [data-surface="neumorphic"] .faq-q:hover { background: rgba(160, 120, 60, .04); } [data-surface="neumorphic"] .sch-cell { box-shadow: inset -2px -2px 4px var(--nm-light), inset 2px 2px 4px var(--nm-dark); } [data-surface="neumorphic"] .sch-cell.peak, [data-surface="neumorphic"] .sch-cell.popular, [data-surface="neumorphic"] .sch-cell.free { box-shadow: -3px -3px 6px var(--nm-light), 4px 4px 8px var(--nm-dark); } [data-surface="neumorphic"] .chat-fab { box-shadow: -6px -6px 14px rgba(255,255,255,.4), 8px 8px 20px rgba(120, 60, 20, .5), inset 1px 1px 0 rgba(255,255,255,.4); } [data-surface="neumorphic"] .agent-bullet { background: var(--bg); border: 0; box-shadow: inset -4px -4px 10px rgba(78,128,175,.08), inset 4px 4px 10px rgba(0,0,0,.45); } [data-surface="neumorphic"] .nav.scrolled { background: var(--bg); box-shadow: 0 6px 16px rgba(120, 60, 20, .12), inset 0 -1px 0 rgba(120, 60, 20, .06); backdrop-filter: none; } /* hero in neumorphic: tone down the sun (it competes with soft shadows) */ [data-surface="neumorphic"] .hero-sun { opacity: .45; } /* photo card in hero: extruded frame */ [data-surface="neumorphic"] .hero-split .hero-photo { border: 0; box-shadow: -14px -14px 30px var(--nm-light), 18px 18px 40px var(--nm-dark); } /* ─────────────── LIQUID GLASS ─────────────── */ :root[data-surface="glass"] { /* Don't override --bg here — let the active palette keep its own bg colour (otherwise dark-mode's light --text would land on a cream background). */ --bg-elev: rgba(255, 250, 241, 0.55); --line: rgba(255, 255, 255, .55); --line-strong: rgba(255, 255, 255, .8); --glass-bg: rgba(255, 250, 241, 0.45); --glass-bord: rgba(255, 255, 255, 0.55); --glass-hi: rgba(255, 255, 255, 0.85); --glass-shd: 0 10px 36px rgba(11, 34, 54, .14); } :root[data-palette="dark"][data-surface="glass"] { --glass-bg: rgba(20, 47, 74, 0.42); --glass-bord: rgba(255, 255, 255, 0.12); --glass-hi: rgba(255, 255, 255, 0.18); --glass-shd: 0 12px 40px rgba(0, 0, 0, .35); } /* Background orbs that the glass layers refract over */ [data-surface="glass"] body::before { content: ""; position: fixed; inset: -20vh -10vw; z-index: -2; pointer-events: none; background: radial-gradient(620px circle at 12% 22%, rgba(242,107,31,.32), transparent 55%), radial-gradient(560px circle at 82% 14%, rgba(244,196,25,.30), transparent 55%), radial-gradient(680px circle at 78% 78%, rgba(47,122,176,.28), transparent 55%), radial-gradient(500px circle at 18% 88%, rgba(242,107,31,.22), transparent 55%); filter: saturate(1.1); } [data-palette="dark"][data-surface="glass"] body::before { background: radial-gradient(620px circle at 12% 22%, rgba(242,107,31,.5), transparent 55%), radial-gradient(560px circle at 82% 14%, rgba(244,196,25,.35), transparent 55%), radial-gradient(680px circle at 78% 78%, rgba(47,122,176,.5), transparent 55%); } /* Shared glass mixin via selector group */ [data-surface="glass"] .card, [data-surface="glass"] .sport-card, [data-surface="glass"] .teacher, [data-surface="glass"] .testi, [data-surface="glass"] .plan:not(.featured), [data-surface="glass"] .faq-item, [data-surface="glass"] .schedule, [data-surface="glass"] .trust-strip, [data-surface="glass"] .agent-bullet, [data-surface="glass"] .agent-preview, [data-surface="glass"] .chat-panel, [data-surface="glass"] .chat-bubble, [data-surface="glass"] .map, [data-surface="glass"] .hero-split .hero-photo { background: var(--glass-bg) !important; -webkit-backdrop-filter: blur(28px) saturate(180%); backdrop-filter: blur(28px) saturate(180%); border: 1px solid var(--glass-bord) !important; box-shadow: inset 0 1px 0 var(--glass-hi), inset 0 0 0 1px rgba(255,255,255,.06), var(--glass-shd); } /* The featured plan stays opaque navy — but get a glass rim */ [data-surface="glass"] .plan.featured { background: rgba(11, 34, 54, .82) !important; -webkit-backdrop-filter: blur(20px); backdrop-filter: blur(20px); border: 1px solid rgba(255,255,255,.18); box-shadow: inset 0 1px 0 rgba(255,255,255,.18), 0 16px 48px rgba(0,0,0,.35); } /* Buttons: pill-shaped glass with chromatic edge */ [data-surface="glass"] .btn-ghost { background: var(--glass-bg); -webkit-backdrop-filter: blur(20px) saturate(160%); backdrop-filter: blur(20px) saturate(160%); border: 1px solid var(--glass-bord); color: var(--text); box-shadow: inset 0 1px 0 var(--glass-hi), 0 4px 14px rgba(11,34,54,.08); } [data-surface="glass"] .btn-ghost:hover { background: rgba(255, 250, 241, .7); color: var(--text); border-color: rgba(255,255,255,.85); } [data-surface="glass"] .btn-primary { background: linear-gradient(180deg, var(--orange-400), var(--orange-600)); box-shadow: inset 0 1px 0 rgba(255,255,255,.6), inset 0 -2px 0 rgba(120,40,0,.35), 0 8px 22px rgba(242, 107, 31, .45); } [data-surface="glass"] .btn-primary:hover { transform: translateY(-2px); } /* Schedule cells get glassy individually */ [data-surface="glass"] .sch-cell { -webkit-backdrop-filter: blur(8px) saturate(140%); backdrop-filter: blur(8px) saturate(140%); box-shadow: inset 0 1px 0 rgba(255,255,255,.3); } [data-surface="glass"] .schedule { padding: 22px; } /* Nav becomes a clean glass bar */ [data-surface="glass"] .nav.scrolled { background: var(--glass-bg); -webkit-backdrop-filter: blur(28px) saturate(180%); backdrop-filter: blur(28px) saturate(180%); border-bottom: 1px solid var(--glass-bord); box-shadow: inset 0 1px 0 var(--glass-hi); } /* Sport card head: keep the vivid color but add an inner glass rim */ [data-surface="glass"] .sport-head::after { content: ""; position: absolute; inset: 1px; border-radius: inherit; background: linear-gradient(180deg, rgba(255,255,255,.18), transparent 40%); pointer-events: none; } /* FAB stays solid orange (it must read as a button) but gains a glass ring */ [data-surface="glass"] .chat-fab { box-shadow: inset 0 1px 0 rgba(255,255,255,.5), 0 0 0 1px rgba(255,255,255,.4), 0 12px 36px rgba(242,107,31,.45); } /* Hero photo: glass frame instead of off-white */ [data-surface="glass"] .hero-split .hero-photo { border-color: rgba(255,255,255,.6) !important; } /* Map iframe wrapper: glass label cards on top */ [data-surface="glass"] .map { background: rgba(220, 235, 246, .4) !important; } /* Final CTA + Agent section: leave them solid (they're the brand-colored blocks). But apply glass to the chat preview floating inside the agent section. */ [data-surface="glass"] .agent-preview { color: var(--navy-900); } [data-surface="glass"] .agent-preview .agent-preview-top { background: linear-gradient(180deg, var(--orange-400), var(--orange-600)); box-shadow: inset 0 1px 0 rgba(255,255,255,.4); } /* Hero overlays in glass mode: dim the sun a touch so glass cards read */ [data-surface="glass"] .hero-sun { opacity: .7; } [data-surface="glass"] .hero-sand { opacity: .7; } /* FAQ caret stays visible against glass */ [data-surface="glass"] .faq-toggle { background: rgba(255,255,255,.4); } /* Section backgrounds with sand gradient compete with the orbs — flatten them */ [data-surface="glass"] section[style*="rgba(245,231,197"] { background: transparent !important; } [data-surface="glass"] section[style*="navy-900"] { background: rgba(11, 34, 54, .86) !important; -webkit-backdrop-filter: blur(20px); backdrop-filter: blur(20px); }