/* ============================================================================ GUTH GLASS MAKEOVER KIT · one law for every page in this folder. Drop-in override: it RIPS OUT each old page's background + top banner and leaves only (1) the deep-space nebula + parallax starfield, and (2) the page's real content re-skinned as crystal-clear glass cards. Loaded LAST in so it wins the cascade. Pair with glass-bg.js. Tune the look here once — every page updates. ============================================================================ */ :root{ --gk-ink:#eef3f6; --gk-blue:#7cc0f5; --gk-cyan:#4eb3e8; --gk-mint:#55e0b0; } /* ── 0 · SMOOTH NAVIGATION ─ kill the hard white-snap between pages ── Cross-document View Transitions: same-origin page navigations crossfade instead of flashing. Supported where available (Chrome); a no-op elsewhere, so it degrades to today's instant load — never worse. Pair with scroll-behavior. */ @view-transition{ navigation: auto; } ::view-transition-old(root){ animation: gk-fade-out .18s ease both; } ::view-transition-new(root){ animation: gk-fade-in .26s ease both; } @keyframes gk-fade-out{ to{ opacity:0 } } @keyframes gk-fade-in{ from{ opacity:0 } } html{ scroll-behavior:smooth; } /* RESERVE the scrollbar gutter so the layout never shifts sideways when content height changes between views/clicks. This is the fix for "the screen resizes every time I press a button" — without it the vertical scrollbar appears/disappears and shoves everything ~15px. */ html{ scrollbar-gutter: stable; } @media (prefers-reduced-motion:reduce){ html{ scroll-behavior:auto } ::view-transition-old(root),::view-transition-new(root){ animation:none } } /* ── 1 · BACKGROUND ─ kill the old one, install the locked deep-space nebula ── */ /* dark color on (the floor); transparent so the fixed nebula at a negative z-index isn't buried behind an opaque body background. */ html{ background:#040510 !important; } body{ background:transparent !important; } body::before{ content:""; position:fixed; inset:0; z-index:-2; pointer-events:none; /* a richer nebula spread across every quadrant + center, so an almost-clear card anywhere on the canvas has galaxy colour behind it (not just the corners). */ background: radial-gradient(52vw 46vw at 18% 14%, rgba(150,80,212,.30), transparent 60%), radial-gradient(50vw 46vw at 86% 20%, rgba(66,122,222,.27), transparent 60%), radial-gradient(54vw 52vw at 74% 84%, rgba(56,180,202,.18), transparent 62%), radial-gradient(48vw 46vw at 20% 88%, rgba(202,88,170,.20), transparent 62%), radial-gradient(46vw 44vw at 50% 50%, rgba(98,82,216,.16), transparent 70%), #040510; } /* our starfield canvas (mounted by glass-bg.js) sits over the nebula, behind content. !important so a host page can't drag it into normal flow (some pages set `body > :not(.guth-stars){position:relative}`, which would push content down). */ canvas.gk-stars{ position:fixed !important; inset:0 !important; z-index:-1 !important; pointer-events:none; opacity:.72; } /* hush every old page's own background / star layers so only ours shows through */ .cosmos,.stars,.guth-stars,.bg,.backdrop,.nebula,.starfield,.bg-stars{ display:none !important; } /* make any old opaque "artboard / shell" wrapper transparent so the nebula shows THROUGH the crystal cards (otherwise the cards frost an opaque box, not space) */ .dashboard-main,.dashboard,.artboard,.shell,.stage,.canvas-wrap,#cockpit{ background:transparent !important; border:none !important; box-shadow:none !important; } /* ── 2 · CRYSTAL CARD ─ the brand: ALMOST-CLEAR glass, the galaxy showing through. Fill is barely there (~7%); the card is defined by its bright rim + edge highlight and a heavy backdrop-blur that keeps text readable over the brightest nebula. ── */ .panel,.w,.card,.widget,.tile,.box,.pcard,.kpi{ background:linear-gradient(157deg, rgba(180,205,255,.075), rgba(40,54,92,.055)) !important; border:1px solid rgba(255,255,255,.20) !important; border-radius:5px !important; box-shadow:inset 0 1px 0 rgba(255,255,255,.28), inset 0 -20px 40px -28px rgba(0,0,0,.5), 0 30px 70px -30px rgba(0,0,0,.78) !important; /* PERF: a 26px backdrop-blur over the animated starfield canvas was re-sampling the whole card backdrop every frame = the lag. 16px reads just as glassy and is far cheaper. */ -webkit-backdrop-filter:blur(16px) saturate(1.4) brightness(1.03); backdrop-filter:blur(16px) saturate(1.4) brightness(1.03); } /* "Guth is live here" = the only glow. green, gently breathing. */ .panel.rec,.panel.glow,.w.glow,.card.rec{ border-color:rgba(85,224,176,.55) !important; animation:gkAlive 3s ease-in-out infinite; } @keyframes gkAlive{ 0%,100%{ box-shadow:inset 0 1px 0 rgba(255,255,255,.22), 0 26px 64px -26px rgba(0,0,0,.80), 0 0 22px -2px rgba(85,224,176,.35) !important; } 50% { box-shadow:inset 0 1px 0 rgba(255,255,255,.22), 0 26px 64px -26px rgba(0,0,0,.80), 0 0 46px 2px rgba(85,224,176,.55) !important; } } @media (prefers-reduced-motion:reduce){ .panel.rec,.panel.glow{ animation:none; } } /* ── 2b · LIQUID GLASS — DISABLED for performance ───────────────────────────── The #gk-liquid feDisplacementMap refraction looked great in a still screenshot, but applying an SVG displacement filter to every card's BACKDROP while a full-screen starfield canvas animates behind it forced the browser to recompute a turbulence map over every card backdrop on every frame — the single biggest source of the jank / "least smooth experience." The plain blur above gives the glass read at a fraction of the cost. To re-enable later (e.g. only on a static page), restore the @supports block. */ /* ── 3 · TOP BANNER ─ dissolve header bands so they float on the galaxy ───────── */ /* dashboards: .topbar collapses to just the centered tab pill */ .topbar,.topnav,.nav-bar{ background:transparent !important; border:none !important; box-shadow:none !important; height:auto !important; -webkit-backdrop-filter:none; backdrop-filter:none !important; } /* every other common header band just dissolves — keep the nav + title, no layout change (NOTE: never .bar — that's progress/chart bars, not a header). */ .top,.header,.header-bar,.headerbar,.head,.masthead,.titlebar,.toolbar,.appbar,.ribbon,.nav,header{ background:transparent !important; background-color:transparent !important; border-bottom-color:transparent !important; box-shadow:none !important; -webkit-backdrop-filter:none !important; backdrop-filter:none !important; } .brand,.gmark,.tb-acct,.topbar .live,.topbar .mark{ display:none !important; } /* the tab switcher becomes the lone crystal pill */ .tabbar,.tabs,.segmented{ background:rgba(255,255,255,.07) !important; border:1px solid rgba(255,255,255,.16) !important; -webkit-backdrop-filter:blur(16px) saturate(1.3); backdrop-filter:blur(16px) saturate(1.3); box-shadow:0 18px 40px -22px rgba(0,0,0,.8) !important; } .tabbar button.on,.tabs button.on,.tabbar .on{ background:var(--gk-blue) !important; color:#06202e !important; box-shadow:0 0 18px rgba(124,192,245,.45) !important; }