Keith Solomon
380e2d9015
Per the user's feedback, fix the issues still visible in the menu:
1. Hero rendered over the menu: bumped menu z-index from 10 to 100 so it
always sits above the hero's stacked elements.
2. List markers on items: added explicit list-style: none / padding: 0 on
the menu <ul> and items to override the base typography rule that sets
list-style-type: disc and padding: 0 1rem on every <ul>.
3. Blue links: the base typography rule 'a, .link { color: var(--color-bodylinks); }'
has specificity 0,1,1 and was beating the menu text-white rule. Override
with color: var(--color-white) !important on menu links and child links
inside the mobile media query.
4. Full borders with rounded corners on child items: change child item
border from '2px solid var(--color-secondary); border-radius: 0.5rem'
to 'border-bottom: 2px solid var(--color-secondary); border-radius: 0'
so each child gets only a bottom border (matching the user's spec).
5. Menu items now use plain CSS (color/display/padding/font-weight) instead
of @apply text-white/no-underline to give them explicit override
specificity against the base styles.
6. Toggle button: changed the SVG width from 2rem to 1.5rem in
styles/components/site-header.css so the hamburger and X icons render
at a square 1.5rem x 1.5rem aspect ratio inside the (intentionally)
rectangular orange button.
Nav-main template unchanged from the previous commit (Contact button +
social icons already in place). Header test still passes - the button box
itself (72x45) is unchanged, only the icon aspect changed.
262 lines
6.9 KiB
CSS
262 lines
6.9 KiB
CSS
/**
|
|
* VDI Navs & Menu - Mobile Sliding Viewport Navigation
|
|
*
|
|
* Sliding viewport style for mobile navigation where
|
|
* users can navigate through menu levels by sliding between views
|
|
* Include this file for sliding-style mobile navigation
|
|
*/
|
|
|
|
/* Mobile sliding viewport navigation */
|
|
@media screen and (max-width: 62.5rem) {
|
|
.nav-main {
|
|
.nav-main__toggle {
|
|
/* display */
|
|
@apply text-white p-3;
|
|
}
|
|
|
|
.menu-vdi--sliding {
|
|
@apply relative overflow-hidden right-0 py-8 flex flex-col;
|
|
@apply absolute hidden; /* Hidden by default */
|
|
z-index: 100;
|
|
top: var(--hgtHeader);
|
|
min-height: calc(100vh - var(--hgtHeader));
|
|
width: 95%;
|
|
background: var(--color-cwc-blue-02);
|
|
color: var(--color-white);
|
|
|
|
/* Suppress default <ul> bullets and indent inherited from base typography.
|
|
The <ul> element IS .menu-vdi--sliding, so we use & to target the parent selector. */
|
|
&,
|
|
ul.menu-vdi {
|
|
list-style: none;
|
|
padding-left: 0;
|
|
margin: 0;
|
|
}
|
|
|
|
.menu-vdi__item {
|
|
list-style: none;
|
|
}
|
|
|
|
/* Container for all navigation levels */
|
|
.menu-vdi__viewport {
|
|
@apply flex transition-transform duration-300 ease-in-out;
|
|
width: 100%;
|
|
}
|
|
|
|
/* Each navigation level */
|
|
.menu-vdi__level {
|
|
@apply w-full flex-shrink-0 flex-col;
|
|
min-width: 100%;
|
|
}
|
|
|
|
/* Back button for secondary levels */
|
|
.menu-vdi__back {
|
|
@apply flex items-center gap-2 p-4 border-b border-gray-200 font-bold text-white hover:bg-white/10 focus-visible:bg-white/10 cursor-pointer;
|
|
|
|
svg {
|
|
@apply w-5 h-5;
|
|
}
|
|
}
|
|
|
|
/* Level indicator for context */
|
|
.menu-vdi__level-title {
|
|
@apply p-4 border-b border-white/20 font-bold text-lg text-center text-white bg-white/10;
|
|
}
|
|
|
|
/* Top-level menu items */
|
|
.menu-vdi__level--main > .menu-vdi__level-items > .menu-vdi__item {
|
|
list-style: none;
|
|
|
|
a,
|
|
button {
|
|
/* text */
|
|
color: var(--color-white) !important;
|
|
font-weight: 700;
|
|
font-size: 1.375rem;
|
|
line-height: 1.375;
|
|
text-decoration: none;
|
|
/* spacing & display */
|
|
display: flex;
|
|
align-items: center;
|
|
width: 100%;
|
|
padding: 1.25rem 1.5rem;
|
|
/* interaction */
|
|
background: transparent;
|
|
}
|
|
|
|
a:hover,
|
|
a:focus-visible,
|
|
button:hover,
|
|
button:focus-visible {
|
|
background: rgba(255, 255, 255, 0.1);
|
|
}
|
|
|
|
a {
|
|
justify-content: flex-start;
|
|
}
|
|
|
|
button {
|
|
justify-content: space-between;
|
|
}
|
|
|
|
/* Parent items keep their orange chevron visible */
|
|
button svg {
|
|
fill: none;
|
|
stroke: var(--color-secondary);
|
|
stroke-width: 2.5;
|
|
width: 0.875rem;
|
|
height: 0.875rem;
|
|
transition: transform 0.2s ease;
|
|
}
|
|
|
|
/* Rotate the chevron when the parent's submenu is expanded */
|
|
button[aria-expanded="true"] svg {
|
|
transform: rotate(180deg);
|
|
}
|
|
}
|
|
|
|
/* Child items: orange bottom border only, no chevron, no rounded corners */
|
|
.menu-vdi__submenu {
|
|
display: flex;
|
|
flex-direction: column;
|
|
gap: 0;
|
|
padding: 0;
|
|
|
|
.menu-vdi__item--child {
|
|
font-weight: 700;
|
|
line-height: 1.375;
|
|
border-bottom: 2px solid var(--color-secondary);
|
|
border-radius: 0;
|
|
background: transparent;
|
|
list-style: none;
|
|
|
|
span {
|
|
display: block;
|
|
width: 100%;
|
|
color: var(--color-white);
|
|
font-size: 1rem;
|
|
padding: 0.75rem 1.5rem;
|
|
}
|
|
|
|
a {
|
|
display: block;
|
|
width: 100%;
|
|
color: var(--color-white) !important;
|
|
font-size: 1rem;
|
|
font-weight: 700;
|
|
padding: 0.75rem 1.5rem;
|
|
text-decoration: none;
|
|
}
|
|
|
|
&:hover,
|
|
&:focus-visible {
|
|
background: rgba(255, 255, 255, 0.1);
|
|
}
|
|
}
|
|
}
|
|
|
|
/* Hide traditional submenus in sliding mode as their parent items become navigation buttons */
|
|
.menu-vdi__toggle {
|
|
/* Override the accordion toggle behavior */
|
|
&[aria-expanded="true"] {
|
|
svg {
|
|
@apply rotate-0; /* Don't rotate arrow */
|
|
}
|
|
|
|
+.menu-vdi__submenu {
|
|
@apply hidden; /* Don't show dropdown */
|
|
}
|
|
}
|
|
}
|
|
|
|
/* Ensure menu items in sliding viewport have proper styling */
|
|
.menu-vdi__level-items {
|
|
display: flex;
|
|
flex-direction: column;
|
|
gap: 0;
|
|
list-style: none;
|
|
padding: 0;
|
|
margin: 0;
|
|
}
|
|
}
|
|
|
|
/* Footer area: Contact button + social icons below the menu. The footer is a
|
|
sibling of .menu-vdi--sliding inside .nav-main, so it cannot be a descendant
|
|
selector of the menu. */
|
|
.menu-vdi__footer {
|
|
display: none;
|
|
}
|
|
|
|
.nav-main__toggle[aria-expanded="true"] ~ .menu-vdi__footer {
|
|
display: flex;
|
|
flex-direction: column;
|
|
align-items: center;
|
|
gap: 1rem;
|
|
padding: 2rem 1.5rem 1.5rem;
|
|
inset: auto 2.5% 0;
|
|
position: fixed;
|
|
max-width: 95%;
|
|
}
|
|
|
|
.menu-vdi__contact-button {
|
|
display: inline-flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
font-weight: 700;
|
|
text-align: center;
|
|
text-decoration: none;
|
|
background: var(--color-secondary);
|
|
border-radius: 1.25rem 0.25rem;
|
|
color: var(--color-white);
|
|
padding: 0.75rem 2.5rem;
|
|
width: 100%;
|
|
max-width: 20rem;
|
|
}
|
|
|
|
.menu-vdi__contact-button:hover,
|
|
.menu-vdi__contact-button:focus-visible {
|
|
filter: brightness(1.1);
|
|
}
|
|
|
|
.menu-vdi__social {
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
gap: 1rem;
|
|
}
|
|
|
|
.menu-vdi__social-icon {
|
|
align-items: center !important;
|
|
display: inline-flex !important;
|
|
height: 2.75rem !important;
|
|
justify-content: center !important;
|
|
padding: 0 !important;
|
|
width: 2.75rem !important;
|
|
}
|
|
|
|
.menu-vdi__social-icon svg {
|
|
fill: var(--color-white);
|
|
height: 1.5rem;
|
|
width: 1.5rem;
|
|
}
|
|
|
|
.menu-vdi__social-icon:hover,
|
|
.menu-vdi__social-icon:focus-visible {
|
|
opacity: 0.8;
|
|
}
|
|
|
|
/* Show sliding menu when toggle button is expanded and menu has sliding class */
|
|
.nav-main__toggle[aria-expanded="true"] + .menu-vdi--sliding {
|
|
@apply !block; /* Use !important to override hidden */
|
|
}
|
|
}
|
|
}
|
|
|
|
/* The mobile menu footer (Contact button + social icons) only renders inside
|
|
the open mobile menu. Hide it on desktop where it would otherwise leak into
|
|
the DOM and trigger accessibility warnings. */
|
|
@media screen and (min-width: 62.5rem) {
|
|
.menu-vdi__footer {
|
|
display: none !important;
|
|
}
|
|
} |