/* universes-panels-and-menu-hover-colour-changing-frame.css (merged) Sources: categories-and-menu-hover-colour-changing-outer-frame.css, categories-and-menu-hover-colour-changing-wide-frame.css */ /* --- START categories-and-menu-hover-colour-changing-outer-frame.css --- */ /* categories-and-menu-hover-colour-changing-outer-frame.css Make the OUTER frame swap colours like the inner frames when menu hovers fire. Works by reacting to global classes (.hover-tcs / .hover-eisth) on /. Requires: wide-outer-frame.css (defines .wof-frame.wof-left/.wof-right colours). */ /* Smooth transition */ .wof-frame{ transition: color 220ms ease, box-shadow 220ms ease, outline-color 220ms ease; } /* When The Character Series is hovered: RIGHT half becomes lavender */ .hover-tcs .wof-frame.wof-right { color: var(--wof-color-left); } /* When The World of EISTH is hovered: LEFT half becomes pink */ .hover-eisth .wof-frame.wof-left { color: var(--wof-color-right); } /* --- END categories-and-menu-hover-colour-changing-outer-frame.css --- */ /* --- START categories-and-menu-hover-colour-changing-wide-frame.css --- */ /* Auto-generated swap (colors only, masks untouched) Source: wide-frame-lavender.css & wide-frame-pink.css Behavior: - Hover TCS: .home-neon-frame.pink keeps RIGHT mask but takes LAVENDER neon values. - Hover EISTH: .home-neon-frame.lavender keeps LEFT mask but takes PINK neon values. */ /* ===== Hover: The Character Series -> RIGHT half (.pink) gets LAVENDER look ===== */ .frame-container.hover-tcs .home-neon-frame.pink { box-shadow: 0 0 calc(12px * var(--glow-scale)) rgba(142,138,255,0.97), 0 0 calc(26px * var(--glow-scale)) rgba(142,138,255,0.87), 0 0 calc(51px * var(--glow-scale)) rgba(142,138,255,0.72); } .frame-container.hover-tcs .home-neon-frame.pink::before { box-shadow: 0 0 0 4.6px #9c8cff, inset 0 0 calc(7px * var(--glow-scale)) rgba(142,138,255,0.97), inset 0 0 calc(15px * var(--glow-scale)) rgba(142,138,255,0.72); filter: drop-shadow(0 0 calc(7px * var(--glow-scale)) rgba(142,138,255,0.87)); } /* ===== Hover: The World of EISTH -> LEFT half (.lavender) gets PINK look ===== */ .frame-container.hover-eisth .home-neon-frame.lavender { box-shadow: 0 0 calc(12px * var(--glow-scale)) rgba(255, 90, 170, calc(0.9 * var(--glow-alpha))), 0 0 calc(26px * var(--glow-scale)) rgba(255, 90, 170, calc(0.7 * var(--glow-alpha))), 0 0 calc(51px * var(--glow-scale)) rgba(255, 90, 170, calc(0.5 * var(--glow-alpha))); } .frame-container.hover-eisth .home-neon-frame.lavender::before { box-shadow: 0 0 0 4.6px #ff66e0, /* tube rose néon adouci */ inset 0 0 calc(7px * var(--glow-scale)) rgba(255, 90, 170, calc(0.9 * var(--glow-alpha))), inset 0 0 calc(15px * var(--glow-scale)) rgba(255, 90, 170, calc(0.6 * var(--glow-alpha))); filter: drop-shadow(0 0 calc(7px * var(--glow-scale)) rgba(255, 90, 170, calc(0.8 * var(--glow-alpha)))); } /* --- END categories-and-menu-hover-colour-changing-wide-frame.css --- */