that directly wraps
both the logo
and the nav -- confirmed by walking up from the live logo
inside "What We Do", forcing it into this same 40px flex row and squashing its
background box down to one item's height with the rest bleeding the map through. */
.site-nav-menu > ul {
list-style: none;
display: flex;
justify-content: center;
align-items: center;
gap: 40px;
margin: 0;
padding: 0;
height: 40px;
}
.site-nav-menu a,
.site-nav-menu span {
/* White default / gold hover-active, matching fireadaptedwashington.org's own
".elementor-nav-menu--dropdown a" computed styles (Montserrat, 14px, uppercase, no
letter-spacing -- unlike WRCD's EB Garamond serif with 1px tracking). */
font-family: Montserrat, sans-serif;
font-size: 14px;
font-weight: 500;
letter-spacing: normal;
text-transform: uppercase;
color: #ffffff;
text-decoration: none;
white-space: nowrap;
cursor: pointer;
}
.site-nav-menu a:hover,
.site-nav-menu a:focus-visible,
.site-nav-menu span:hover,
.site-nav-menu span:focus-visible {
/* Gold -- rgb(252, 209, 74), sampled from the live site's current-page/hover accent
color chain (".elementor-item-active" / ":hover"); replaces WRCD's plain underline. */
color: #fcd14a;
text-decoration: underline;
}
.site-nav-menu li.has-dropdown {
position: relative;
}
.site-nav-menu .dropdown {
/* Not currently rendered -- WAFAC's live nav is a flat 5-link list with no submenus
(per 4.2's findings), so no ".has-dropdown" markup exists in this file's index.html
yet. Kept ready (recolored to match) in case that changes later. */
display: none;
position: absolute;
top: 100%;
left: 50%;
transform: translateX(-50%);
list-style: none;
margin: 0;
padding: 8px 0;
min-width: 240px;
background: #ffffff;
box-shadow: 0 4px 10px rgba(0, 0, 0, 0.2);
z-index: 11;
}
.site-nav-menu li.has-dropdown:hover .dropdown,
.site-nav-menu li.has-dropdown:focus-within .dropdown {
display: block;
}
.site-nav-menu .dropdown a {
display: block;
padding: 8px 20px;
font-size: 14px;
letter-spacing: 0.5px;
text-transform: none;
color: #003d45;
}
.site-nav-menu .dropdown a:hover,
.site-nav-menu .dropdown a:focus-visible {
text-decoration: none;
background: rgba(0, 61, 69, 0.08);
}
#map {
position: absolute;
top: 102px;
bottom: 0;
left: 0;
right: 0;
z-index: 1;
}
/* The zoom/compass NavigationControl lives top-left and the attribution control
bottom-left (see map.js), not their usual top-right/bottom-right -- the panel docks
top-right and spans the full height, so keeping both controls on the left means nothing
needs to be cleared at either edge: top just matches #map's own top (102px, the
.site-nav height, so the panel starts flush with the top of the visible map) and bottom
is flush at 0 instead of reserving space for an attribution strip that's no longer
there. No padding here (unlike earlier) -- #panel-header carries its own, so the header
can sit flush at the panel's real top edge with nothing able to scroll into view above
it. .panel is positioned relative to the viewport, not to #map, hence repeating #map's
102px offset here rather than inheriting it. */
.panel {
position: absolute;
top: 102px;
right: 0;
bottom: 0;
width: 340px;
max-width: 90vw;
overflow-y: auto;
background: #ffffff;
box-shadow: -2px 0 8px rgba(0, 0, 0, 0.2);
box-sizing: border-box;
z-index: 2;
}
/* Sticky as a whole unit (county name + close button together) so the close button stays
pinned too, instead of scrolling away as a separately absolutely-positioned element. */
.panel-header {
position: sticky;
top: 0;
z-index: 1;
display: flex;
align-items: center;
justify-content: space-between;
gap: 8px;
padding: 16px;
background: #ffffff;
box-shadow: 0 1px 0 rgba(0, 0, 0, 0.1);
}
/* Looks like the plain heading it replaces (same size/weight/position) but is a real
-- appearance: none strips each browser's own chrome so the custom arrow
(a small inline SVG, matching the close button's #444) is the only affordance shown. */
.panel-county-select {
flex: 1 1 auto;
min-width: 0;
margin: 0;
padding: 0 20px 0 0;
border: none;
background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath fill='%23444' d='M4 6l4 4 4-4z'/%3E%3C/svg%3E") no-repeat right center / 14px;
font: inherit;
font-size: 20px;
font-weight: bold;
color: inherit;
cursor: pointer;
appearance: none;
-webkit-appearance: none;
}
.panel-close {
flex-shrink: 0;
border: none;
background: none;
font-size: 24px;
line-height: 1;
cursor: pointer;
color: #444;
}
#panel-content {
padding: 0 16px 16px 16px;
}
.project-list {
list-style: none;
margin: 0;
padding: 0;
}
.project-list li {
margin-bottom: 16px;
padding-bottom: 16px;
border-bottom: 1px solid #ddd;
}
.project-list h3 {
display: flex;
align-items: center;
gap: 4px;
margin: 0 0 6px 0;
font-size: 15px;
}
.project-icon {
flex-shrink: 0;
width: 2em;
height: 2em;
font-size: 2em;
line-height: 1;
object-fit: contain;
}
.project-title-text {
/* Icon stays a fixed left column -- title text wraps within its own column instead of
flowing back under/around the icon on a second line. */
flex: 1 1 auto;
min-width: 0;
}
.project-thumb {
display: block;
width: 100%;
max-height: 160px;
object-fit: cover;
border-radius: 4px;
margin: 0 0 8px 0;
}
.statewide-heading {
margin: 20px 0 12px 0;
padding-top: 12px;
border-top: 2px solid #ccc;
font-size: 13px;
text-transform: uppercase;
letter-spacing: 0.05em;
color: #666;
}
.project-list p {
margin: 0 0 8px 0;
font-size: 13px;
color: #333;
}
.project-list a {
display: inline-block;
font-size: 12px;
word-break: break-all;
/* WAFAC's dark teal (#003d45), replacing WRCD's green -- the panel has no direct
live-site analog to sample, so it reuses the same brand teal as the header/nav for a
consistent accent against the panel's white background. */
color: #003d45;
}
.empty {
color: #666;
font-style: italic;
}
/* County-name label that follows the cursor on hover -- overrides MapLibre's default
popup chrome (padding/tip/shadow) down to a small unobtrusive tag. */
.county-hover-label .maplibregl-popup-content {
padding: 3px 8px;
border-radius: 3px;
font-size: 12px;
font-weight: 600;
/* WAFAC's dark teal, matching .project-list a above -- same reasoning: no live-site
analog to sample, reuse the brand teal instead of WRCD's green. */
color: #003d45;
box-shadow: 0 1px 3px rgba(0, 0, 0, 0.25);
}
.county-hover-label .maplibregl-popup-tip {
display: none;
}
/* Mobile header: wafac-logo.png (the SAME single asset used at every breakpoint -- 4.2
found WAFAC serves no separate compressed mobile logo the way WRCD does) far left --
still linking back to the main site -- hamburger far right, dropdown menu collapsed
behind it. Unlike WRCD's mobile menu (a visually distinct khaki/navy widget), the
dropdown here keeps the SAME dark-teal band background as the desktop nav strip
(#003d45) with the same white/gold link colors, matching fireadaptedwashington.org's
own single-unified-band header at every width (4.2's real breakpoint bisection found
the live site's own nav/hamburger swap at 767/768px, kept here for reference; this
file keeps this repo's existing <=640px convention per the uniform DoD). Placed at the
end of the file (rather than next to .site-nav) so these overrides win the cascade
against the unconditional #map/.panel/.site-nav-* rules defined earlier -- same
specificity, so source order decides, media query or not. */
@media (max-width: 640px) {
.site-nav-top {
justify-content: space-between;
padding: 7px 16px;
box-sizing: border-box;
}
.site-nav-toggle {
display: flex;
}
.site-nav-menu {
display: none;
/* Same dark teal as the desktop band (#003d45) -- keeps the single-unified-band look
when the mobile menu drops open, instead of WRCD's separate khaki mobile widget. */
background: #003d45;
}
.site-nav-menu.is-open {
display: block;
}
.site-nav-menu > ul {
flex-direction: column;
align-items: flex-start;
height: auto;
gap: 0;
padding: 8px 16px 16px;
}
.site-nav-menu > ul > li {
width: 100%;
}
.site-nav-menu a,
.site-nav-menu span {
display: block;
padding: 10px 0;
/* White, matching the desktop nav's default link color -- the mobile band is now the
same dark teal as desktop, so it needs the same light text (WRCD's mobile menu used
dark navy text because its khaki background was light). */
color: #ffffff;
}
/* No hover on touch -- the dropdown is always expanded inline under "What We Do"
instead of needing a second tap. */
.site-nav-menu .dropdown {
display: block;
position: static;
transform: none;
box-shadow: none;
background: none;
min-width: 0;
padding: 0 0 0 16px;
}
.site-nav-menu .dropdown a {
color: #ffffff;
padding: 8px 0;
}
/* The dropdown menu is collapsed (0px) when closed instead of always reserving its
40px, so #map/.panel offset by just the 62px cream band -- otherwise a blank gap opens
up between the header and the map. When .site-nav-menu is .is-open it overlays the map
as a dropdown (position: absolute, z-index: 10 from .site-nav), the same overlay
approach carried over from www-wrcd/'s own mobile menu behavior. */
#map {
top: 62px;
}
.panel {
top: 62px;
}
}