/* ============================================================= glass.css — shared frosted dark-glass material for the Anchor hub CHROME. The composer footer's frosted look, propagated across the hub. This is a MATERIAL-ONLY layer: it adds a strong backdrop blur + a bright hairline top highlight + a soft frosted light-band + a light rim + a soft shadow to the hub's EXISTING translucent navy surfaces, so nothing moves or resizes — only the material reads as proper frosted glass. Linked LAST in each page's so it augments that page's own styles. WHY THE NUMBERS ARE HIGH: on a near-black background a gentle blur is invisible (there's little behind the panel to blur). Real frosted glass reads as frosted because it (a) blurs + saturates whatever light is behind it AND (b) carries its own milky film + a bright lit edge. So we lean on a heavy blur+saturate+brightness backdrop-filter (helps wherever the surface is translucent) PLUS additive inset highlights/veil (visible on ANY surface, even a near-opaque one). That combination is what sells "frost". NOTE: this styles the HUB's own UI only. AI-generated builds keep the editorial / squared look defined in the brand specs — they are not affected (the sandbox preview renders them inside an iframe, out of this scope). ============================================================= */ :root { /* Backdrop-filter — heavy blur + saturation + a brightness lift. The brightness() is what makes the blurred backdrop go MILKY (frosted), not just soft. Only affects what's BEHIND the panel — text stays crisp. */ --glass-blur: blur(26px) saturate(185%) brightness(1.08); --glass-blur-soft: blur(18px) saturate(160%) brightness(1.05); /* Edges + film (these render ON the element, so they show on EVERY surface, even near-opaque ones — this is what guarantees visible frost). */ --glass-border: rgba(220, 210, 188, 0.26); /* warm-neutral glass rim */ --glass-hi: rgba(255, 255, 255, 0.20); /* crisp lit top edge */ --glass-veil: rgba(255, 255, 255, 0.10); /* milky frosted light-band */ --glass-shadow: 0 12px 34px rgba(0, 0, 0, 0.36); --glass-bar-shadow: 0 8px 26px rgba(0, 0, 0, 0.30); /* The signature frosted sheen, reused everywhere: 1) a bright 1px top rim, 2) a soft milky light-band falling from the top edge, 3) a faint all-over inner sheen. Compose this BEFORE each element's own drop shadow. */ --glass-frost: inset 0 1px 0 var(--glass-hi), inset 0 52px 60px -50px var(--glass-veil), inset 0 0 28px rgba(255, 255, 255, 0.03); } /* ── Top / app bars (sticky chrome) ─────────────────────────── */ .appbar, header.bar { -webkit-backdrop-filter: var(--glass-blur); backdrop-filter: var(--glass-blur); box-shadow: var(--glass-frost), var(--glass-bar-shadow); border-color: var(--glass-border); } /* ── Cards, panels & tiles (already translucent → full glass) ── */ .card, .panel, .tile, .demo-card, .vis-card, .chooser, .progress, .research-card, .files li { -webkit-backdrop-filter: var(--glass-blur); backdrop-filter: var(--glass-blur); box-shadow: var(--glass-frost), var(--glass-shadow); border-color: var(--glass-border); } /* ── Floating chrome (FABs, toggles, segmented controls) ─────── */ .chat-fab, .launch-fab, .leaderboard-toggle, .seg, .search { -webkit-backdrop-filter: var(--glass-blur); backdrop-filter: var(--glass-blur); box-shadow: var(--glass-frost), var(--glass-bar-shadow); border-color: var(--glass-border); } /* ── Dense panels that sit OVER the busy constellation: frost the starfield behind them (looks great) while staying readable. Slightly softer blur, same lit edge + milky band, deeper drop shadow for lift. ───────── */ .leaderboard-panel, .person-panel, .detail-panel { -webkit-backdrop-filter: var(--glass-blur-soft); backdrop-filter: var(--glass-blur-soft); box-shadow: var(--glass-frost), 0 22px 56px rgba(0, 0, 0, 0.46); border-color: var(--glass-border); } /* ── Modals / overlays ──────────────────────────────────────── */ .modal-bg, .share-modal-overlay { -webkit-backdrop-filter: blur(10px) saturate(140%) brightness(1.04); backdrop-filter: blur(10px) saturate(140%) brightness(1.04); } .modal-card, .share-modal { -webkit-backdrop-filter: var(--glass-blur); backdrop-filter: var(--glass-blur); box-shadow: var(--glass-frost), 0 28px 70px rgba(0, 0, 0, 0.58); border-color: var(--glass-border); } /* ── Reusable utility for any NEW hub element ───────────────── */ .glass { position: relative; background: linear-gradient(180deg, var(--glass-hi) 0%, rgba(255, 255, 255, 0.02) 38%, rgba(255, 255, 255, 0) 64%), rgba(8, 20, 36, 0.58); -webkit-backdrop-filter: var(--glass-blur); backdrop-filter: var(--glass-blur); border: 1px solid var(--glass-border); box-shadow: var(--glass-frost), var(--glass-shadow); }