/* 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); }