/* effects.css Unified hover/focus effects for muscutt.org (Bootstrap-friendly) Load AFTER bootstrap.css. Usage: - Global: apply fade to all links by adding class="fx-links" to (recommended) - Or: add class="fadeOnHover" / "glowOnHover" / etc. per element */ /* ------------------------------ Design tokens (tweak here) -------------------------------- */ :root{ --fx-dur-fast: 140ms; --fx-dur: 220ms; --fx-ease: ease; --fx-opacity-hover: .70; --fx-opacity-active: .55; --fx-raise: -1px; --fx-underline-thickness: 2px; --fx-underline-offset: .20em; --fx-focus-ring: 0 0 0 .2rem rgba(13,110,253,.25); /* Bootstrap-ish focus ring */ } /* Respect reduced-motion */ @media (prefers-reduced-motion: reduce){ * { transition-duration: 1ms !important; animation-duration: 1ms !important; } } /* ------------------------------ Base helpers -------------------------------- */ .fx-transition{ transition: opacity var(--fx-dur) var(--fx-ease), transform var(--fx-dur) var(--fx-ease), filter var(--fx-dur) var(--fx-ease), box-shadow var(--fx-dur) var(--fx-ease), color var(--fx-dur) var(--fx-ease), background-color var(--fx-dur) var(--fx-ease), border-color var(--fx-dur) var(--fx-ease); } .fx-focus:focus-visible{ outline: 0; box-shadow: var(--fx-focus-ring); } /* ------------------------------ 1) Global link fade (opt-in) Add class="fx-links" to -------------------------------- */ .fx-links a{ transition: opacity var(--fx-dur) var(--fx-ease); } .fx-links a:hover, .fx-links a:focus{ opacity: var(--fx-opacity-hover); } /* Avoid messing with Bootstrap buttons/nav toggles etc */ .fx-links a.btn, .fx-links .btn a, .fx-links a.dropdown-item, .fx-links a.nav-link, .fx-links a.navbar-brand{ opacity: 1 !important; } /* ------------------------------ 2) Legacy classes you already use -------------------------------- */ /* Fade on hover (keeps your existing class name) */ .fadeOnHover{ transition: opacity var(--fx-dur) var(--fx-ease); } .fadeOnHover:hover, .fadeOnHover:focus{ opacity: var(--fx-opacity-hover); } /* Bold on hover (keeps your existing class name) */ .boldOnHover{ transition: font-weight var(--fx-dur-fast) var(--fx-ease); } .boldOnHover:hover, .boldOnHover:focus{ font-weight: 700; } /* ------------------------------ 3) Tech-style link underline -------------------------------- */ .techUnderline{ text-decoration: none; background-image: linear-gradient(currentColor, currentColor); background-repeat: no-repeat; background-size: 0% var(--fx-underline-thickness); background-position: 0 calc(100% - var(--fx-underline-offset)); transition: background-size var(--fx-dur) var(--fx-ease), opacity var(--fx-dur) var(--fx-ease); } .techUnderline:hover, .techUnderline:focus{ background-size: 100% var(--fx-underline-thickness); } /* ------------------------------ 4) Lift + shadow (cards/images/tiles) -------------------------------- */ .liftOnHover{ transition: transform var(--fx-dur) var(--fx-ease), box-shadow var(--fx-dur) var(--fx-ease), filter var(--fx-dur) var(--fx-ease); } .liftOnHover:hover, .liftOnHover:focus{ transform: translateY(var(--fx-raise)); box-shadow: 0 10px 30px rgba(0,0,0,.12); } /* Nice for images */ .imgOnHover{ transition: transform var(--fx-dur) var(--fx-ease), filter var(--fx-dur) var(--fx-ease), opacity var(--fx-dur) var(--fx-ease); } .imgOnHover:hover, .imgOnHover:focus{ transform: translateY(var(--fx-raise)); filter: contrast(1.03) saturate(1.03); opacity: .92; } /* ------------------------------ 5) Subtle “tech glow” (not sci-fi) -------------------------------- */ .glowOnHover{ transition: box-shadow var(--fx-dur) var(--fx-ease), transform var(--fx-dur) var(--fx-ease); } .glowOnHover:hover, .glowOnHover:focus{ transform: translateY(var(--fx-raise)); box-shadow: 0 0 0 1px rgba(13,110,253,.20), 0 12px 32px rgba(0,0,0,.10); } /* ------------------------------ 6) Accessible focus ring helper -------------------------------- */ .fxRing{ outline: 0; } .fxRing:focus-visible{ box-shadow: var(--fx-focus-ring); } /* ------------------------------ 7) Icon/link rows (footer socials) -------------------------------- */ .socialLink{ display: inline-flex; align-items: center; justify-content: center; transition: transform var(--fx-dur) var(--fx-ease), opacity var(--fx-dur) var(--fx-ease); } .socialLink:hover, .socialLink:focus{ transform: translateY(var(--fx-raise)); opacity: .85; }