/* Site-wide styles shared by index.html, legion-family.html, and contact.html
* Image URLs are CSS-relative (i.e. relative to this file in public/common/).
*/
body {
margin: 0;
padding: 0;
}
/* Full-viewport patriotic background image (set on ) */
.bg-main {
background-image: url('background.webp');
background-size: cover;
background-position: center;
background-repeat: no-repeat;
min-height: 100vh;
}
/* Desktop inline nav-bar: uses the original `navbar.webp` image with the
* original box-shadow. ONLY used by the lg+ inline `` element after
* the refactor — mobile uses `.mobile-nav-shell` instead. */
.nav-bg {
background-image: url('navbar.webp');
background-size: 100% 100%;
background-repeat: no-repeat;
background-position: center;
box-shadow: 0 12px 30px rgba(0, 0, 0, 0.55), 0 4px 10px rgba(0, 0, 0, 0.35);
}
/* Mobile unified nav shell: wraps BOTH the top bar AND the drop-down menu
* (id="mobile-nav-shell" in HTML). Hosts a single webnav.webp + slight
* dark-blue tint that spans the entire container, so opening the menu
* appears as a seamless expansion of the same image — no second image
* edge below the bar. The bottom-fade is OFF when the menu is open
* (`.is-open` toggled by nav.js) so the full image shows uniformly across
* the combined top-bar+menu height. */
.mobile-nav-shell {
background-color: #0f1e46;
isolation: isolate;
}
.mobile-nav-shell::before {
content: '';
position: absolute;
inset: 0;
background-image:
linear-gradient(rgba(15, 30, 70, 0.42), rgba(15, 30, 70, 0.42)),
url('webnav.webp');
background-size: cover, cover;
background-position: center;
background-repeat: no-repeat;
background-blend-mode: multiply, normal;
z-index: -1;
pointer-events: none;
/* Default (menu closed): fade off at the bottom so the bar dissolves
cleanly into the page below. */
mask-image: linear-gradient(to bottom, black 0%, black 70%, transparent 100%);
-webkit-mask-image: linear-gradient(to bottom, black 0%, black 70%, transparent 100%);
}
.mobile-nav-shell.is-open::before {
/* Menu open: full webnav image spans the container uniformly, no fade. */
mask-image: none;
-webkit-mask-image: none;
}
/* Nav buttons: static R/W/B patriotic glow (the gold stroke is gone) */
.nav-link > img {
filter:
/* patriotic red / white / blue glow, visible at rest */
drop-shadow(0 0 4px rgba(220, 20, 60, 0.55))
drop-shadow(0 0 8px rgba(255, 255, 255, 0.6))
drop-shadow(0 0 12px rgba(30, 90, 200, 0.55));
transition: transform 0.2s ease-in-out, filter 0.2s ease-in-out;
}
.nav-link:hover > img {
transform: scale(1.05);
filter:
/* brighter patriotic glow on hover — matches the donate button */
drop-shadow(0 0 7px rgba(220, 20, 60, 0.9))
drop-shadow(0 0 14px rgba(255, 255, 255, 0.9))
drop-shadow(0 0 22px rgba(30, 90, 200, 0.9));
}
/* Default slightly-larger nav-button size (Home / News / Contact) */
.nav-link-img {
height: 68px;
}
/* Tall nav-button variant for "The Legion Family" and "Membership" */
.nav-link-img-tall {
height: 78px;
}
/* Smooth transitions for the logo and donate glows */
.logo-link img,
.donate-link img {
transition: transform 0.2s ease-in-out, filter 0.2s ease-in-out;
}
/* Logo glow on hover (subtle patriotic gold aura, stacked atop baseline shadow) */
.logo-link:hover img {
transform: scale(1.05);
filter:
drop-shadow(0 20px 13px rgb(0 0 0 / 0.03))
drop-shadow(0 8px 5px rgb(0 0 0 / 0.08))
drop-shadow(0 0 8px rgba(255, 215, 0, 0.9))
drop-shadow(0 0 22px rgba(218, 165, 32, 0.55));
}
/* Donate button glow on hover (red, white, blue patriotic aura, stacked atop baseline shadow) */
.donate-link:hover img {
transform: scale(1.05);
filter:
drop-shadow(0 20px 13px rgb(0 0 0 / 0.03))
drop-shadow(0 8px 5px rgb(0 0 0 / 0.08))
drop-shadow(0 0 7px rgba(220, 20, 60, 0.85))
drop-shadow(0 0 14px rgba(255, 255, 255, 0.85))
drop-shadow(0 0 22px rgba(30, 90, 200, 0.85));
}
/* =====================================================================
Responsive header tweaks.
===================================================================== */
/* Shrink nav-button images on lg-only viewports so the inline nav still
fits between the (smaller) logo and the (smaller) donate button.
Below lg the desktop nav is hidden entirely (hamburger menu instead). */
@media (max-width: 1280px) {
.nav-link-img { height: 54px; }
.nav-link-img-tall { height: 62px; }
}
/* Touch devices don't get :hover, so make the brighter patriotic glow
surface on :active (tap) too — same filter stack as desktop :hover. */
@media (max-width: 1023px) {
.nav-link:active > img,
.donate-link:active img,
.logo-link:active img {
transform: scale(1.05);
}
.nav-link:active > img {
filter:
drop-shadow(0 0 7px rgba(220, 20, 60, 0.9))
drop-shadow(0 0 14px rgba(255, 255, 255, 0.9))
drop-shadow(0 0 22px rgba(30, 90, 200, 0.9));
}
.donate-link:active img {
filter:
drop-shadow(0 20px 13px rgb(0 0 0 / 0.03))
drop-shadow(0 8px 5px rgb(0 0 0 / 0.08))
drop-shadow(0 0 7px rgba(220, 20, 60, 0.85))
drop-shadow(0 0 14px rgba(255, 255, 255, 0.85))
drop-shadow(0 0 22px rgba(30, 90, 200, 0.85));
}
.logo-link:active img {
filter:
drop-shadow(0 20px 13px rgb(0 0 0 / 0.03))
drop-shadow(0 8px 5px rgb(0 0 0 / 0.08))
drop-shadow(0 0 8px rgba(255, 215, 0, 0.9))
drop-shadow(0 0 22px rgba(218, 165, 32, 0.55));
}
}
/* Make sure the desktop-only donate button never overflows the slide-
down panel — irrelevant on desktop but defensive on tablet portrait. */
.mobile-menu-link { color: #fde68a; }
/* ---------------------------------------------------------------------
Big floating mobile logo (visible on viewports below the lg
breakpoint / <1024px). Sits over the red/white/blue gradient bar with
its bottom half visibly protruding below the bar — so the
patriotic gold/amber glow + drop-shadow are needed to keep the logo
readable against the busy gradient background AND make it feel like
a real badge instead of a sticker.
--------------------------------------------------------------------- */
.mobile-logo-link img {
transition: transform 0.2s ease-in-out, filter 0.2s ease-in-out;
filter:
/* dark drop shadow so the logo pops off the gradient */
drop-shadow(0 4px 14px rgba(0, 0, 0, 0.55))
/* patriotic gold halo, brighter than the desktop .logo-link glow */
drop-shadow(0 0 4px rgba(255, 215, 0, 0.85))
drop-shadow(0 0 12px rgba(255, 230, 120, 0.55));
}
.mobile-logo-link:hover img,
.mobile-logo-link:active img {
transform: scale(1.04);
filter:
drop-shadow(0 6px 18px rgba(0, 0, 0, 0.65))
drop-shadow(0 0 6px rgba(255, 215, 0, 0.95))
drop-shadow(0 0 18px rgba(255, 230, 120, 0.75));
}