/**********************************************************
|
NAVIGATION - HOVER STYLES (OPTIMIZED)
|
Only loaded for (hover: hover) and (pointer: fine)
|
**********************************************************/
|
|
/**
|
* Primary hover state - All elements that use action-0 on hover
|
* Using :is() to group selectors reduces repetition
|
*/
|
:is(
|
nav a,
|
nav a:visited,
|
.has-submenu button,
|
nav.always > button,
|
nav.always .has-submenu > a,
|
nav.always .submenu > li > a,
|
.index a,
|
.index .active a
|
):hover {
|
background-color: var(--action-0);
|
color: var(--action-contrast);
|
}
|
|
/**
|
* Submenu hover opening
|
*/
|
.has-submenu:hover > ul.submenu {
|
transform: scaleY(1);
|
max-height: 1000%;
|
box-shadow: rgba(var(--base-rgb),var(--op-45)) var(--shdw);
|
}
|
|
/**
|
* Icon rotation on hover
|
*/
|
.has-submenu:hover > button:not(.notifications, .quick-help) .icon {
|
transform: rotate(var(--nav-icon-rotation));
|
}
|
|
/**
|
* Special hover states - Different from primary action-0
|
*/
|
|
/* Submenu items - overlay effect */
|
.submenu li:hover {
|
--c: var(--action-rgb);
|
background-color: rgba(var(--base-rgb),var(--op-6));
|
}
|
|
/* Keep submenu link backgrounds transparent */
|
.submenu a:hover {
|
background-color: transparent;
|
}
|
|
/* Fixed navigation - uses action-contrast directly */
|
:is(
|
nav.fixed.bottom a,
|
nav.fixed.bottom a:visited
|
):hover {
|
color: var(--action-contrast);
|
}
|
|
/* Condensed nav - border instead of background */
|
:is(
|
.condensed a,
|
.condensed a:visited
|
):hover {
|
border-color: var(--action-0);
|
}
|
|
/* Breadcrumbs - transparent background, action-0 text */
|
:is(
|
nav#breadcrumbs a,
|
nav#breadcrumbs a:visited
|
):hover {
|
background-color: transparent;
|
color: var(--action-0);
|
}
|
|
/*!* Current hours - lighter shade *!*/
|
/*.current-hours a:hover {*/
|
/* color: var(--action-200);*/
|
/*}*/
|
|
/*!* Find us - inverted colors *!*/
|
/*.find-us a:hover {*/
|
/* background-color: var(--base);*/
|
/* color: var(--contrast);*/
|
/* border-color: var(--contrast);*/
|
/*}*/
|
|
/* Share button - vertical shift effect */
|
nav.share .button:hover {
|
top: -4px;
|
box-shadow: rgba(var(--base-rgb),var(--op-45)) var(--shdw-down);
|
}
|
