/* ========================================================================== DESKTOP ENHANCEMENTS — That AI Guy ========================================================================== Master file for all desktop-specific styling. All rules are scoped to (width >= 76.8rem) — mobile is completely untouched. Imports (desktop-only — safe to load behind media="(min-width: 768px)"): marquee.css — scrolling text ticker strip orbit.css — star orbiting home nav item Mobile-applicable files (ai-thinking, flip-text, stats, radar) are linked directly from without a media query — they apply at all screen sizes. Contents: 1. Glass panel system tokens 2. Blue animated scrollbar Original idea & technique: villepreux — https://codepen.io/villepreux/pen/yyYyPLd ========================================================================== */ @import url("marquee.css"); @import url("orbit.css"); /* ========================================================================== 1. Glass panel system tokens Used for inset-glass grouping containers on desktop. Modifier class: .glass-panel — add to any structural container. ========================================================================== */ :root { --glass-panel-bg: rgba(255, 255, 255, 0.07); --glass-panel-border: rgba(255, 255, 255, 0.18); --glass-panel-shine: rgba(255, 255, 255, 0.25); --glass-panel-shadow: rgba(0, 0, 0, 0.08); --glass-panel-radius: 2rem; } @media (prefers-color-scheme: dark) { :root { --glass-panel-bg: rgba(255, 255, 255, 0.03); --glass-panel-border: rgba(255, 255, 255, 0.09); --glass-panel-shine: rgba(255, 255, 255, 0.07); --glass-panel-shadow: rgba(0, 0, 0, 0.45); } } @media (width >= 76.8rem) { .glass-panel { backdrop-filter: blur(24px) saturate(180%); background: var(--glass-panel-bg); border: 1px solid var(--glass-panel-border); border-radius: var(--glass-panel-radius); box-shadow: inset 0 1px 0 var(--glass-panel-shine), 0 8px 32px var(--glass-panel-shadow); padding: 2.5rem; } } /* ========================================================================== 2. Blue animated scrollbar Original idea & technique: villepreux — https://codepen.io/villepreux/pen/yyYyPLd Colour scheme adapted to site blue: --color-tg (#045ada / #3a7abf). ========================================================================== */ @media (width >= 76.8rem) { /* Standard (Firefox) */ html { scrollbar-color: var(--color-tg) color-mix(in srgb, var(--color-tg) 8%, transparent); scrollbar-width: thin; } /* Webkit (Chrome, Safari, Edge) */ ::-webkit-scrollbar { width: 5px; } ::-webkit-scrollbar-track { background: color-mix(in srgb, var(--color-tg) 7%, transparent); } ::-webkit-scrollbar-thumb { background: linear-gradient( 180deg, color-mix(in srgb, var(--color-tg) 65%, white) 0%, var(--color-tg) 45%, color-mix(in srgb, var(--color-tg) 75%, black) 100% ); border-radius: 3px; } ::-webkit-scrollbar-thumb:hover { background: color-mix(in srgb, var(--color-tg) 80%, white); } }