/* ═══════════════════════════════════════════════════════════════════════ os-cyberpunk-glass.css — v1.0 (2026-07-19) Premium glass upgrade for the DEFAULT cyberpunk theme only. SCOPE: html:not([data-theme]) and html[data-theme="default"] UNAFFECTED: Gold, Grey, Tron, Beach, Purple, Miami, and every other [data-theme="xxx"] — they all have explicit selectors that beat :not(). What this file does: ─ Upgrades glass surfaces to true-black ultra-glossy 3D panels ─ Replaces accent glows with cycling portal-rainbow box-shadows ─ Adds tron-style pulsing outlines on structural edges ─ Upgrades the HYPATIA OS wordmark to white-on-rainbow-glow ─ Provides the inverse (white 3D glass + rainbow) for light mode ═══════════════════════════════════════════════════════════════════════ */ /* ──────────────────────────────────────────────────────────────────────── KEYFRAMES Portal color stops (10 s linear — synced with hyos-portal-ring on the start button so the whole OS breathes at the same rhythm): 0 / 100 % #ff2d78 hot pink 14 % #ff6b00 orange 28 % #ffd700 gold 43 % #00e676 green 57 % #00e5ff cyan 71 % #2979ff blue 85 % #9c27b0 violet ──────────────────────────────────────────────────────────────────────── */ /* ── Dark: true-black glossy glass with cycling portal underlight ── Static layers (GPU-composited, never repainted): 1. inset 0 1.5px 0 rgba(255,255,255,.40) ← top specular shine 2. inset 0 -0.5px 0 rgba(0,0,0,.55) ← bottom depth edge 3. inset 1px 0 0 rgba(255,255,255,.06) ← left rim light 4. 0 0 0 0.5px rgba(0,0,0,.42) ← outer edge sharpener 5. 0 6px 28px rgba(0,0,0,.55) ← deep drop shadow Animated layer 6-7: portal rainbow glow (cycling, low opacity = ambient) */ @keyframes cp-portal-shadow { 0%,100% { box-shadow: inset 0 1.5px 0 rgba(255,255,255,.40), inset 0 -0.5px 0 rgba(0,0,0,.55), inset 1px 0 0 rgba(255,255,255,.06), 0 0 0 0.5px rgba(0,0,0,.42), 0 6px 28px rgba(0,0,0,.55), 0 0 36px rgba(255,45,120,.16), 0 18px 72px rgba(255,45,120,.09); } 14% { box-shadow: inset 0 1.5px 0 rgba(255,255,255,.40), inset 0 -0.5px 0 rgba(0,0,0,.55), inset 1px 0 0 rgba(255,255,255,.06), 0 0 0 0.5px rgba(0,0,0,.42), 0 6px 28px rgba(0,0,0,.55), 0 0 36px rgba(255,107,0,.16), 0 18px 72px rgba(255,107,0,.09); } 28% { box-shadow: inset 0 1.5px 0 rgba(255,255,255,.40), inset 0 -0.5px 0 rgba(0,0,0,.55), inset 1px 0 0 rgba(255,255,255,.06), 0 0 0 0.5px rgba(0,0,0,.42), 0 6px 28px rgba(0,0,0,.55), 0 0 36px rgba(255,215,0,.16), 0 18px 72px rgba(255,215,0,.09); } 43% { box-shadow: inset 0 1.5px 0 rgba(255,255,255,.40), inset 0 -0.5px 0 rgba(0,0,0,.55), inset 1px 0 0 rgba(255,255,255,.06), 0 0 0 0.5px rgba(0,0,0,.42), 0 6px 28px rgba(0,0,0,.55), 0 0 36px rgba(0,230,118,.16), 0 18px 72px rgba(0,230,118,.09); } 57% { box-shadow: inset 0 1.5px 0 rgba(255,255,255,.40), inset 0 -0.5px 0 rgba(0,0,0,.55), inset 1px 0 0 rgba(255,255,255,.06), 0 0 0 0.5px rgba(0,0,0,.42), 0 6px 28px rgba(0,0,0,.55), 0 0 36px rgba(0,229,255,.16), 0 18px 72px rgba(0,229,255,.09); } 71% { box-shadow: inset 0 1.5px 0 rgba(255,255,255,.40), inset 0 -0.5px 0 rgba(0,0,0,.55), inset 1px 0 0 rgba(255,255,255,.06), 0 0 0 0.5px rgba(0,0,0,.42), 0 6px 28px rgba(0,0,0,.55), 0 0 36px rgba(41,121,255,.16), 0 18px 72px rgba(41,121,255,.09); } 85% { box-shadow: inset 0 1.5px 0 rgba(255,255,255,.40), inset 0 -0.5px 0 rgba(0,0,0,.55), inset 1px 0 0 rgba(255,255,255,.06), 0 0 0 0.5px rgba(0,0,0,.42), 0 6px 28px rgba(0,0,0,.55), 0 0 36px rgba(156,39,176,.16), 0 18px 72px rgba(156,39,176,.09); } } /* ── Light: brilliant-white 3D glass — dark base shadow keeps rainbow legible ── The dark 0 2px 10px rgba(0,0,0,.18) base shadow appears before the rainbow so colors pop against the white background instead of washing out. */ @keyframes cp-portal-shadow-light { 0%,100% { box-shadow: inset 0 2px 0 rgba(255,255,255,1.0), inset 0 -0.5px 0 rgba(0,0,0,.08), 0 0 0 0.5px rgba(0,0,0,.07), 0 2px 10px rgba(0,0,0,.18), 0 8px 36px rgba(0,0,0,.12), 0 0 32px rgba(255,45,120,.20), 0 14px 60px rgba(255,45,120,.11); } 14% { box-shadow: inset 0 2px 0 rgba(255,255,255,1.0), inset 0 -0.5px 0 rgba(0,0,0,.08), 0 0 0 0.5px rgba(0,0,0,.07), 0 2px 10px rgba(0,0,0,.18), 0 8px 36px rgba(0,0,0,.12), 0 0 32px rgba(255,107,0,.20), 0 14px 60px rgba(255,107,0,.11); } 28% { box-shadow: inset 0 2px 0 rgba(255,255,255,1.0), inset 0 -0.5px 0 rgba(0,0,0,.08), 0 0 0 0.5px rgba(0,0,0,.07), 0 2px 10px rgba(0,0,0,.18), 0 8px 36px rgba(0,0,0,.12), 0 0 32px rgba(255,215,0,.20), 0 14px 60px rgba(255,215,0,.11); } 43% { box-shadow: inset 0 2px 0 rgba(255,255,255,1.0), inset 0 -0.5px 0 rgba(0,0,0,.08), 0 0 0 0.5px rgba(0,0,0,.07), 0 2px 10px rgba(0,0,0,.18), 0 8px 36px rgba(0,0,0,.12), 0 0 32px rgba(0,230,118,.20), 0 14px 60px rgba(0,230,118,.11); } 57% { box-shadow: inset 0 2px 0 rgba(255,255,255,1.0), inset 0 -0.5px 0 rgba(0,0,0,.08), 0 0 0 0.5px rgba(0,0,0,.07), 0 2px 10px rgba(0,0,0,.18), 0 8px 36px rgba(0,0,0,.12), 0 0 32px rgba(0,229,255,.20), 0 14px 60px rgba(0,229,255,.11); } 71% { box-shadow: inset 0 2px 0 rgba(255,255,255,1.0), inset 0 -0.5px 0 rgba(0,0,0,.08), 0 0 0 0.5px rgba(0,0,0,.07), 0 2px 10px rgba(0,0,0,.18), 0 8px 36px rgba(0,0,0,.12), 0 0 32px rgba(41,121,255,.20), 0 14px 60px rgba(41,121,255,.11); } 85% { box-shadow: inset 0 2px 0 rgba(255,255,255,1.0), inset 0 -0.5px 0 rgba(0,0,0,.08), 0 0 0 0.5px rgba(0,0,0,.07), 0 2px 10px rgba(0,0,0,.18), 0 8px 36px rgba(0,0,0,.12), 0 0 32px rgba(156,39,176,.20), 0 14px 60px rgba(156,39,176,.11); } } /* ── Title glow — dark mode: text IS the portal color + tight neon outline ── color: cycles through rainbow (animation overrides base color since no !important below). text-shadow: white inner core (LED tube feel) + tight 4px neon collar + 12px bloom. DO NOT add 'color: ... !important' to the base rule — it blocks animation from setting color. */ @keyframes cp-title-dark { 0%,100% { color: #ff2d78; text-shadow: 0 0 1px rgba(255,255,255,.80), 0 0 4px #ff2d78, 0 0 12px rgba(255,45,120,.85); } 14% { color: #ff6b00; text-shadow: 0 0 1px rgba(255,255,255,.80), 0 0 4px #ff6b00, 0 0 12px rgba(255,107,0,.85); } 28% { color: #ffd700; text-shadow: 0 0 1px rgba(255,255,255,.80), 0 0 4px #ffd700, 0 0 12px rgba(255,215,0,.85); } 43% { color: #00e676; text-shadow: 0 0 1px rgba(255,255,255,.80), 0 0 4px #00e676, 0 0 12px rgba(0,230,118,.85); } 57% { color: #00e5ff; text-shadow: 0 0 1px rgba(255,255,255,.80), 0 0 4px #00e5ff, 0 0 12px rgba(0,229,255,.85); } 71% { color: #2979ff; text-shadow: 0 0 1px rgba(255,255,255,.80), 0 0 4px #2979ff, 0 0 12px rgba(41,121,255,.85); } 85% { color: #9c27b0; text-shadow: 0 0 1px rgba(255,255,255,.80), 0 0 4px #9c27b0, 0 0 12px rgba(156,39,176,.85); } } /* ── Title glow — light mode: colored text + dark anchor drop-shadow ── */ @keyframes cp-title-light { 0%,100% { color: #c0004a; text-shadow: 0 1px 2px rgba(0,0,0,.55), 0 0 4px rgba(255,45,120,.90), 0 0 12px rgba(255,45,120,.65); } 14% { color: #b84200; text-shadow: 0 1px 2px rgba(0,0,0,.55), 0 0 4px rgba(255,107,0,.90), 0 0 12px rgba(255,107,0,.65); } 28% { color: #7a6500; text-shadow: 0 1px 2px rgba(0,0,0,.55), 0 0 4px rgba(255,215,0,.90), 0 0 12px rgba(255,215,0,.65); } 43% { color: #006e38; text-shadow: 0 1px 2px rgba(0,0,0,.55), 0 0 4px rgba(0,230,118,.90), 0 0 12px rgba(0,230,118,.65); } 57% { color: #006080; text-shadow: 0 1px 2px rgba(0,0,0,.55), 0 0 4px rgba(0,229,255,.90), 0 0 12px rgba(0,229,255,.65); } 71% { color: #1040b0; text-shadow: 0 1px 2px rgba(0,0,0,.55), 0 0 4px rgba(41,121,255,.90), 0 0 12px rgba(41,121,255,.65); } 85% { color: #5a0070; text-shadow: 0 1px 2px rgba(0,0,0,.55), 0 0 4px rgba(156,39,176,.90), 0 0 12px rgba(156,39,176,.65); } } /* ── Avatar portal ring — tight 3px ring applied directly to the img element ── Bigger glow than hyos-portal-ring (which is only 2px) for better visibility. */ @keyframes cp-avatar-ring { 0%,100% { box-shadow: 0 0 0 3px #ff2d78, 0 0 16px rgba(255,45,120,.90), 0 0 36px rgba(255,45,120,.55); } 14% { box-shadow: 0 0 0 3px #ff6b00, 0 0 16px rgba(255,107,0,.90), 0 0 36px rgba(255,107,0,.55); } 28% { box-shadow: 0 0 0 3px #ffd700, 0 0 16px rgba(255,215,0,.90), 0 0 36px rgba(255,215,0,.55); } 43% { box-shadow: 0 0 0 3px #00e676, 0 0 16px rgba(0,230,118,.90), 0 0 36px rgba(0,230,118,.55); } 57% { box-shadow: 0 0 0 3px #00e5ff, 0 0 16px rgba(0,229,255,.90), 0 0 36px rgba(0,229,255,.55); } 71% { box-shadow: 0 0 0 3px #2979ff, 0 0 16px rgba(41,121,255,.90), 0 0 36px rgba(41,121,255,.55); } 85% { box-shadow: 0 0 0 3px #9c27b0, 0 0 16px rgba(156,39,176,.90), 0 0 36px rgba(156,39,176,.55); } } /* ── Tron outline pulse — border-color + box-shadow cycling (tripled for visibility) ── */ @keyframes cp-tron-pulse { 0%,100% { border-color: rgba(255,45,120,.95); box-shadow: 0 0 16px rgba(255,45,120,.65), 0 0 40px rgba(255,45,120,.30); } 14% { border-color: rgba(255,107,0,.95); box-shadow: 0 0 16px rgba(255,107,0,.65), 0 0 40px rgba(255,107,0,.30); } 28% { border-color: rgba(255,215,0,.95); box-shadow: 0 0 16px rgba(255,215,0,.65), 0 0 40px rgba(255,215,0,.30); } 43% { border-color: rgba(0,230,118,.95); box-shadow: 0 0 16px rgba(0,230,118,.65), 0 0 40px rgba(0,230,118,.30); } 57% { border-color: rgba(0,229,255,.95); box-shadow: 0 0 16px rgba(0,229,255,.65), 0 0 40px rgba(0,229,255,.30); } 71% { border-color: rgba(41,121,255,.95); box-shadow: 0 0 16px rgba(41,121,255,.65), 0 0 40px rgba(41,121,255,.30); } 85% { border-color: rgba(156,39,176,.95); box-shadow: 0 0 16px rgba(156,39,176,.65), 0 0 40px rgba(156,39,176,.30); } } /* ── Tron background pulse — cycles background color (for underlines, pills, etc.) ── */ @keyframes cp-tron-bg { 0%,100% { background: rgba(255,45,120,.95); box-shadow: 0 0 14px rgba(255,45,120,.75), 0 0 30px rgba(255,45,120,.40); } 14% { background: rgba(255,107,0,.95); box-shadow: 0 0 14px rgba(255,107,0,.75), 0 0 30px rgba(255,107,0,.40); } 28% { background: rgba(255,215,0,.95); box-shadow: 0 0 14px rgba(255,215,0,.75), 0 0 30px rgba(255,215,0,.40); } 43% { background: rgba(0,230,118,.95); box-shadow: 0 0 14px rgba(0,230,118,.75), 0 0 30px rgba(0,230,118,.40); } 57% { background: rgba(0,229,255,.95); box-shadow: 0 0 14px rgba(0,229,255,.75), 0 0 30px rgba(0,229,255,.40); } 71% { background: rgba(41,121,255,.95); box-shadow: 0 0 14px rgba(41,121,255,.75), 0 0 30px rgba(41,121,255,.40); } 85% { background: rgba(156,39,176,.95); box-shadow: 0 0 14px rgba(156,39,176,.75), 0 0 30px rgba(156,39,176,.40); } } /* ════════════════════════════════════════════════════════════════════════ DARK CYBERPUNK — Default (no [data-theme] or data-theme="default") ════════════════════════════════════════════════════════════════════════ */ /* ── Glass var overrides ── */ html:not([data-theme]) .clean, html[data-theme="default"] .clean { --v11-glass-bg: rgba(0,0,0,0.82); --v11-glass-bg-dark: rgba(0,0,0,0.94); --v11-backdrop: saturate(320%) blur(40px) brightness(1.06); } /* ── Taskbar: solid near-black glass, zero saturation so wallpaper can't bleed ── */ html:not([data-theme]) .clean #os-taskbar, html[data-theme="default"] .clean #os-taskbar { background: rgba(0,0,0,0.96) !important; backdrop-filter: saturate(0%) blur(20px) brightness(0.75) !important; /* desaturated = always black */ -webkit-backdrop-filter: saturate(0%) blur(20px) brightness(0.75) !important; border-bottom: none !important; animation: cp-portal-shadow 10s linear infinite !important; } /* ── Taskbar neon underline: cycling background color (3px, clearly visible) ── */ html:not([data-theme]) .clean #os-taskbar::after, html[data-theme="default"] .clean #os-taskbar::after { left: 0 !important; right: 0 !important; opacity: 1 !important; height: 3px !important; /* triple the thickness */ border: none !important; animation: cp-tron-bg 10s linear infinite !important; /* cycles background, not border-color */ } /* ── App Drawer panel: solid glossy black — saturate(0%) strips wallpaper color ── */ html:not([data-theme]) .clean #os-drawer, html[data-theme="default"] .clean #os-drawer { background: rgba(0,0,0,0.97) !important; backdrop-filter: saturate(0%) blur(20px) brightness(0.65) !important; /* desaturated dark backdrop */ -webkit-backdrop-filter: saturate(0%) blur(20px) brightness(0.65) !important; border-radius: 28px 28px 0 0 !important; border: none !important; animation: cp-portal-shadow 10s linear infinite !important; } /* ── Drawer top accent: 3px cycling rainbow background strip ── */ html:not([data-theme]) .clean #os-drawer::before, html[data-theme="default"] .clean #os-drawer::before { animation: cp-tron-bg 10s linear infinite !important; opacity: 1 !important; height: 3px !important; } /* ── Floating drawer tab: solid black glass, portal ring on border-top ── Uses border-top only so the new wide-bar layout is preserved. The base CSS already sets border-top/left/right accent; this upgrades to portal cycling. height is NOT overridden — must inherit calc(44px+safe-area) from inline. */ html:not([data-theme]) .clean #os-drawer-tab, html[data-theme="default"] .clean #os-drawer-tab { background: rgba(0,0,0,0.92) !important; /* Only animate border-top (the visible accent) — do NOT override border shorthand or it collapses border-top/left/right to one value and breaks the bar shape. */ border-top-color: transparent !important; /* animation sets color each frame */ animation: cp-tron-pulse 10s linear infinite !important; } /* ── Drawer tab chevron: color-cycles with portal ── */ html:not([data-theme]) .clean #os-drawer-hint, html[data-theme="default"] .clean #os-drawer-hint { animation: hyos-color-cycle 10s linear infinite, drawer-hint-float 2.4s ease-in-out infinite !important; } /* ════════════════════════════════════════════════════════════════════════ APP DRAWER — Full-color icons, rainbow hover, smooth fade-out ════════════════════════════════════════════════════════════════════════ */ /* ── Rainbow card hover overlay keyframe ── Animates background + border-color + glow cycling through all 7 portal stops. Applied to ::after so the card itself stays static — opacity-transition on ::after means the rainbow FADES OUT smoothly when cursor leaves instead of snapping off. The animation runs continuously; only opacity is toggled. */ @keyframes cp-card-hover { 0%,100% { background: rgba(255,45,120,.28); border-color: rgba(255,45,120,.80); box-shadow: 0 0 28px rgba(255,45,120,.28); } 14% { background: rgba(255,107,0,.28); border-color: rgba(255,107,0,.80); box-shadow: 0 0 28px rgba(255,107,0,.28); } 28% { background: rgba(255,215,0,.28); border-color: rgba(255,215,0,.80); box-shadow: 0 0 28px rgba(255,215,0,.28); } 43% { background: rgba(0,230,118,.28); border-color: rgba(0,230,118,.80); box-shadow: 0 0 28px rgba(0,230,118,.28); } 57% { background: rgba(0,229,255,.28); border-color: rgba(0,229,255,.80); box-shadow: 0 0 28px rgba(0,229,255,.28); } 71% { background: rgba(41,121,255,.28); border-color: rgba(41,121,255,.80); box-shadow: 0 0 28px rgba(41,121,255,.28); } 85% { background: rgba(156,39,176,.28); border-color: rgba(156,39,176,.80); box-shadow: 0 0 28px rgba(156,39,176,.28); } } /* ── Rainbow icon glow ring keyframe ── Outer portal ring + bloom around the icon on hover. The existing .os-app-icon transition on box-shadow (.3s) provides the smooth fade-out when cursor leaves — no extra work needed. */ @keyframes cp-icon-glow { 0%,100% { box-shadow: inset 0 1.5px 0 rgba(255,255,255,.48), inset 0 -0.5px 0 rgba(0,0,0,.12), 0 0 0 7px rgba(255,45,120,.90), 0 0 22px rgba(255,45,120,.75), 0 0 52px rgba(255,45,120,.40), 0 8px 20px rgba(0,0,0,.44); } 14% { box-shadow: inset 0 1.5px 0 rgba(255,255,255,.48), inset 0 -0.5px 0 rgba(0,0,0,.12), 0 0 0 7px rgba(255,107,0,.90), 0 0 22px rgba(255,107,0,.75), 0 0 52px rgba(255,107,0,.40), 0 8px 20px rgba(0,0,0,.44); } 28% { box-shadow: inset 0 1.5px 0 rgba(255,255,255,.48), inset 0 -0.5px 0 rgba(0,0,0,.12), 0 0 0 7px rgba(255,215,0,.90), 0 0 22px rgba(255,215,0,.75), 0 0 52px rgba(255,215,0,.40), 0 8px 20px rgba(0,0,0,.44); } 43% { box-shadow: inset 0 1.5px 0 rgba(255,255,255,.48), inset 0 -0.5px 0 rgba(0,0,0,.12), 0 0 0 7px rgba(0,230,118,.90), 0 0 22px rgba(0,230,118,.75), 0 0 52px rgba(0,230,118,.40), 0 8px 20px rgba(0,0,0,.44); } 57% { box-shadow: inset 0 1.5px 0 rgba(255,255,255,.48), inset 0 -0.5px 0 rgba(0,0,0,.12), 0 0 0 7px rgba(0,229,255,.90), 0 0 22px rgba(0,229,255,.75), 0 0 52px rgba(0,229,255,.40), 0 8px 20px rgba(0,0,0,.44); } 71% { box-shadow: inset 0 1.5px 0 rgba(255,255,255,.48), inset 0 -0.5px 0 rgba(0,0,0,.12), 0 0 0 7px rgba(41,121,255,.90), 0 0 22px rgba(41,121,255,.75), 0 0 52px rgba(41,121,255,.40), 0 8px 20px rgba(0,0,0,.44); } 85% { box-shadow: inset 0 1.5px 0 rgba(255,255,255,.48), inset 0 -0.5px 0 rgba(0,0,0,.12), 0 0 0 7px rgba(156,39,176,.90), 0 0 22px rgba(156,39,176,.75), 0 0 52px rgba(156,39,176,.40), 0 8px 20px rgba(0,0,0,.44); } } /* ════════════════════════════════════════════════════════════════════════ ICON DESIGN — Black glass shell, colored+glowing symbol, tron→portal Rest: true-black box, symbol = app color (var(--ic)), pulsing colored glow Hover: box gets rainbow portal ring, symbol cycles full rainbow ════════════════════════════════════════════════════════════════════════ */ /* ── Box ambient glow pulses in the icon’s own color (var(--ic)) ── */ @keyframes cp-icon-rest-pulse { 0% { box-shadow: inset 0 1.5px 0 rgba(255,255,255,.22), inset 0 -0.5px 0 rgba(0,0,0,.85), 0 0 0 0.5px rgba(0,0,0,.55), 0 4px 18px rgba(0,0,0,.72), 0 0 10px color-mix(in srgb, var(--ic,#00ffa3) 28%, transparent), 0 0 24px color-mix(in srgb, var(--ic,#00ffa3) 14%, transparent); } 100% { box-shadow: inset 0 1.5px 0 rgba(255,255,255,.22), inset 0 -0.5px 0 rgba(0,0,0,.85), 0 0 0 0.5px rgba(0,0,0,.55), 0 4px 18px rgba(0,0,0,.72), 0 0 22px color-mix(in srgb, var(--ic,#00ffa3) 62%, transparent), 0 0 50px color-mix(in srgb, var(--ic,#00ffa3) 32%, transparent); } } /* ── Symbol drop-shadow pulses in app color (rest) ── */ @keyframes cp-icon-symbol-pulse { 0% { filter: drop-shadow(0 0 2px var(--ic, #00ffa3)); } 100% { filter: drop-shadow(0 0 5px var(--ic, #00ffa3)) drop-shadow(0 0 14px color-mix(in srgb, var(--ic,#00ffa3) 55%, transparent)); } } /* ── Symbol cycles rainbow (hover/active) ── */ @keyframes cp-icon-symbol-rainbow { 0%,100% { color:#ff2d78; filter:drop-shadow(0 0 4px #ff2d78) drop-shadow(0 0 14px rgba(255,45,120,.70)); } 14% { color:#ff6b00; filter:drop-shadow(0 0 4px #ff6b00) drop-shadow(0 0 14px rgba(255,107,0,.70)); } 28% { color:#ffd700; filter:drop-shadow(0 0 4px #ffd700) drop-shadow(0 0 14px rgba(255,215,0,.70)); } 43% { color:#00e676; filter:drop-shadow(0 0 4px #00e676) drop-shadow(0 0 14px rgba(0,230,118,.70)); } 57% { color:#00e5ff; filter:drop-shadow(0 0 4px #00e5ff) drop-shadow(0 0 14px rgba(0,229,255,.70)); } 71% { color:#2979ff; filter:drop-shadow(0 0 4px #2979ff) drop-shadow(0 0 14px rgba(41,121,255,.70)); } 85% { color:#9c27b0; filter:drop-shadow(0 0 4px #9c27b0) drop-shadow(0 0 14px rgba(156,39,176,.70)); } } /* ── Icon box: true-black 3D glossy glass, symbol color = var(--ic) ── background-clip:text retired — 'color' cascades to iconify-icon which inherits it. DO NOT set color:#fff or color:rgba(255,255,255,...) anywhere on .os-app-icon — that would override the app color the symbol inherits. */ html:not([data-theme]) .clean .os-app-icon, html[data-theme="default"] .clean .os-app-icon { background: linear-gradient( 160deg, rgba(20,20,26,0.98) 0%, rgba(0,0,0,0.99) 100% ) !important; border: 0.5px solid rgba(255,255,255,0.06) !important; color: var(--ic, var(--accent, #00ffa3)) !important; /* icon symbol = app color */ animation: cp-icon-rest-pulse 2.5s ease-in-out infinite alternate !important; } /* ── Symbol inside icon: app-colored, 28px bold, pulsing drop-shadow ── */ html:not([data-theme]) .clean .os-app-icon iconify-icon, html[data-theme="default"] .clean .os-app-icon iconify-icon { width: 28px !important; height: 28px !important; animation: cp-icon-symbol-pulse 2.5s ease-in-out infinite alternate !important; } /* ── App card base: border-radius + smooth transition (no spring overshoot on return) ── The base card has transition:all .25s cubic-bezier(.34,1.56,.64,1) which overshoots on mouse-leave, making the card appear to 'sink'. Override with ease-out. */ html:not([data-theme]) .clean .os-app-card, html[data-theme="default"] .clean .os-app-card { border-radius: 18px; transition: transform .40s cubic-bezier(.22,1,.36,1), background .30s ease, border-color .30s ease !important; /* smooth return, no spring snap */ } /* ── Card ::after: always-running rainbow overlay, revealed via opacity transition ── Overrides the existing shimmer (specificity 0,1,1, no !important on ::after). Our selector = (0,3,1) — wins. Animation runs all the time; only opacity changes. Result: rainbow FADES OUT smoothly when cursor leaves instead of snapping. */ html:not([data-theme]) .clean .os-app-card::after, html[data-theme="default"] .clean .os-app-card::after { content: '' !important; position: absolute !important; inset: 0 !important; border-radius: 18px !important; border: 1px solid transparent !important; background: transparent !important; box-shadow: none !important; opacity: 0 !important; transition: opacity .85s ease !important; /* extended fade so it's clearly visible leaving */ animation: cp-card-hover 10s linear infinite !important; pointer-events: none !important; z-index: 0 !important; } /* Reveal rainbow overlay on hover */ html:not([data-theme]) .clean .os-app-card:hover::after, html[data-theme="default"] .clean .os-app-card:hover::after { opacity: 1 !important; } /* ── Card hover: cancel the border-only cp-tron-pulse, use ::after rainbow instead ── */ html:not([data-theme]) .clean .os-app-card:hover, html[data-theme="default"] .clean .os-app-card:hover { background: transparent !important; animation: none !important; /* rainbow comes from ::after, not border animation */ transform: translateY(-4px) scale(1.02) !important; } /* ── Icon hover box: stays black, gets rainbow portal ring (cp-icon-glow) ── */ html:not([data-theme]) .clean .os-app-card:hover .os-app-icon, html[data-theme="default"] .clean .os-app-card:hover .os-app-icon { background: linear-gradient(160deg, rgba(20,20,26,0.98), rgba(0,0,0,0.99)) !important; color: var(--ic, var(--accent, #00ffa3)) !important; /* keep app color (beats os-beta color:#fff) */ filter: none !important; /* drop-shadow comes from symbol animation below */ transform: scale(1.12) rotate(-3deg) !important; animation: cp-icon-glow 10s linear infinite !important; } /* ── Icon hover symbol: full rainbow color + glow cycling ── Overrides cp-icon-symbol-pulse (specificity 0,3,1) with higher (0,3,2) on hover. Animation sets both 'color' and 'filter', overriding the inherited app color. */ html:not([data-theme]) .clean .os-app-card:hover .os-app-icon iconify-icon, html[data-theme="default"] .clean .os-app-card:hover .os-app-icon iconify-icon { width: 28px !important; height: 28px !important; animation: cp-icon-symbol-rainbow 10s linear infinite !important; } /* ── App name: portal color cycling on hover ── */ html:not([data-theme]) .clean .os-app-card:hover .os-app-name, html[data-theme="default"] .clean .os-app-card:hover .os-app-name { animation: hyos-color-cycle 10s linear infinite !important; } /* ── Category pill hover: rainbow portal border ── */ html:not([data-theme]) .clean .os-cat-pill:hover:not(.active), html[data-theme="default"] .clean .os-cat-pill:hover:not(.active) { border-width: 2px !important; animation: cp-tron-pulse 10s linear infinite !important; } /* ── Active category pill: thick rainbow border + colored label text ── */ html:not([data-theme]) .clean .os-cat-pill.active, html[data-theme="default"] .clean .os-cat-pill.active { border-width: 2px !important; animation: cp-tron-pulse 10s linear infinite, hyos-color-cycle 10s linear infinite !important; /* hyos-color-cycle sets 'color' which the icon + label inherit — rainbow category text */ } /* ── Dynamic Island pill: 2px thick rainbow border ── */ html:not([data-theme]) .clean #clean-island, html[data-theme="default"] .clean #clean-island { border: 2px solid transparent !important; animation: cp-tron-pulse 10s linear infinite !important; } /* ── Focused app window: thick portal border ── */ html:not([data-theme]) .clean .os-win.focused, html:not([data-theme]) .clean .os-win:focus-within, html[data-theme="default"] .clean .os-win.focused, html[data-theme="default"] .clean .os-win:focus-within { border-width: 2px !important; animation: cp-tron-pulse 10s linear infinite !important; } /* ── Sub-group fly-out popover: solid black + thick rainbow border ── */ html:not([data-theme]) .clean .dock-sub, html[data-theme="default"] .clean .dock-sub { background: rgba(0,0,0,0.97) !important; border-width: 2px !important; animation: cp-tron-pulse 10s linear infinite !important; } /* ── Search bar: thick rainbow border on focus ── */ html:not([data-theme]) .clean #os-search:focus, html[data-theme="default"] .clean #os-search:focus { border-width: 2px !important; animation: cp-tron-pulse 10s linear infinite !important; } /* Drawer handle grip pill: rainbow cycling background via cp-tron-bg ── */ html:not([data-theme]) .clean #os-drawer-handle::before, html[data-theme="default"] .clean #os-drawer-handle::before { animation: cp-tron-bg 10s linear infinite !important; border-radius: 2px !important; } /* ── HYPATIA OS wordmark: white letters + thick portal glow halo ── Overrides the color-cycle animation from the inline