/* ───────────────────────────────────────────────────────────────────────────── HomeSure — frosted-glass top bar Load this AFTER the page's own stylesheet so it wins. The public pages were each written with their own theme switch, and there are three different conventions among them: index.css / about.css dark :root, overridden by [data-theme="light"] browse.css light :root, overridden by [data-theme="dark"] policy.css body.dark / body.light classes So the tokens below key off every one of them rather than off ":root" alone. Whichever way a page flips its theme, the glass follows. ───────────────────────────────────────────────────────────────────────────── */ /* Before the theme script runs there is no attribute yet, so start light — that is what every page falls back to anyway, and a flash of the wrong glass is very visible. */ :root { --glass-bg: rgba(255, 255, 255, 0.55); --glass-tint: rgba(0, 201, 167, 0.035); --glass-edge: rgba(255, 255, 255, 0.85); /* the hairline along the top */ --glass-border: rgba(15, 23, 42, 0.07); --glass-shadow: 0 6px 28px rgba(15, 23, 42, 0.07); --glass-blur: blur(22px) saturate(175%); --glass-solid: rgba(255, 255, 255, 0.94); /* used where blur is unavailable */ } [data-theme="light"], body.light { --glass-bg: rgba(255, 255, 255, 0.55); --glass-tint: rgba(0, 201, 167, 0.035); --glass-edge: rgba(255, 255, 255, 0.85); --glass-border: rgba(15, 23, 42, 0.07); --glass-shadow: 0 6px 28px rgba(15, 23, 42, 0.07); --glass-solid: rgba(255, 255, 255, 0.94); } [data-theme="dark"], body.dark { --glass-bg: rgba(13, 27, 42, 0.52); --glass-tint: rgba(0, 201, 167, 0.05); --glass-edge: rgba(255, 255, 255, 0.11); --glass-border: rgba(255, 255, 255, 0.07); --glass-shadow: 0 6px 28px rgba(0, 0, 0, 0.3); --glass-solid: rgba(13, 27, 42, 0.93); } /* The four floating bars across the public pages. auth.css is left out on purpose: its header sits inside a split column with nothing scrolling behind it, so frosting it would blur nothing and just look muddy. */ nav, .browse-nav, .policy-header { position: sticky; top: 0; z-index: 100; /* Two layers: a faint teal tint over the blurred page, so the glass picks up the brand colour the way real tinted glass would, instead of reading as flat grey. */ background-color: var(--glass-bg); background-image: linear-gradient(var(--glass-tint), var(--glass-tint)); -webkit-backdrop-filter: var(--glass-blur); backdrop-filter: var(--glass-blur); border-bottom: 1px solid var(--glass-border); /* inset: the lit edge along the very top, which is what sells it as glass rather than as a translucent rectangle. Outset: a soft shadow so the bar floats above the page. */ box-shadow: inset 0 1px 0 var(--glass-edge), var(--glass-shadow); transition: background-color 0.3s ease, box-shadow 0.3s ease, border-color 0.3s ease; } /* ─── While the bar sits on top of the hero ──────────────────────────────────── The hero is dark on desktop in both themes, so in light mode a white bar on top of it looked like a separate strip rather than part of the page. Over the hero the bar borrows the dark tokens, and its contents have to follow — dark text on a dark panel would be unreadable. glass-nav.js adds and removes this class as you scroll. */ nav.over-hero, .browse-nav.over-hero, .policy-header.over-hero { /* No blur here, and this is a performance decision rather than a visual one. backdrop-filter re-blurs whatever is behind the bar on every frame that anything back there moves — and the hero never stops moving: a full-screen particle layer plus six markers each running two infinite animations. That is a full-width blur recomputed 60 times a second, for the whole time someone is looking at the top of the page. Over the hero the bar is a dark panel on a dark panel, so the blur was buying almost nothing. Below the hero, where the page is still and the content behind is light, it stays. */ -webkit-backdrop-filter: none; backdrop-filter: none; --glass-bg: rgba(10, 22, 40, 0.72); --glass-tint: rgba(0, 201, 167, 0.06); --glass-edge: rgba(255, 255, 255, 0.12); --glass-border: rgba(255, 255, 255, 0.08); --glass-shadow: none; --glass-solid: rgba(10, 22, 40, 0.92); } /* Somebody who has asked their system for less motion should not be paying for any of it. */ @media (prefers-reduced-motion: reduce) { nav, .browse-nav, .policy-header { -webkit-backdrop-filter: none; backdrop-filter: none; background-color: var(--glass-solid); } } /* The logo, the divider and the theme button are all themed off the page, so they need pulling back to light here. The Sign in / Sign up buttons already read on a dark panel. */ nav.over-hero .nav-logo, nav.over-hero .nav-logo-text { color: #f1f5f9; } nav.over-hero .nav-logo-divider { background: rgba(255, 255, 255, 0.18); } nav.over-hero .nav-tagline { color: rgba(255, 255, 255, 0.55); } nav.over-hero .nav-theme-btn { background: rgba(255, 255, 255, 0.07); border-color: rgba(255, 255, 255, 0.14); color: rgba(255, 255, 255, 0.7); } nav.over-hero .nav-theme-btn:hover { border-color: var(--teal); color: var(--teal); } /* Safari ≤ 8 and Firefox with backdrop-filter disabled show no blur at all. Without this the bar would be a half-transparent panel with the page legible straight through it, and the links would be unreadable. Fall back to near-solid instead. */ @supports not ((-webkit-backdrop-filter: blur(1px)) or (backdrop-filter: blur(1px))) { nav, .browse-nav, .policy-header { background-color: var(--glass-solid); } } /* Someone who has asked for less motion still gets the glass, just no cross-fade. */ @media (prefers-reduced-motion: reduce) { nav, .browse-nav, .policy-header { transition: none; } } /* ─── Floating pill ────────────────────────────────────────────────────────── The bar stops being a strip across the top and becomes a rounded panel sitting ON the page, with the hero running underneath it. Only index.html and about.html use a bare