@charset "utf-8";
/* =============================================================================
CHLOE SPEAKS — MAIN STYLESHEET ("light" scroll state)
File: assets/css/main-light.css
COLOR SCHEME: transparent bar with navy (#242e5a) text initially, then
on scroll becomes a solid WHITE bar with navy text/social/dropdown and a
navy call-to-action button — i.e. this file's scrolled state is
deliberately identical to main-dark.css's scrolled state (see section 0
below and that file's header comment). The two stylesheets only differ
in what the bar looks like BEFORE scrolling; once scrolled, both land on
the same light/white look.
This is the ACTIVE stylesheet linked from static-page.html. The
alternate, main-dark.css, is not linked — see the commented-out
and explanation in the of static-page.html for how to swap
between the two.
TABLE OF CONTENTS
0. Root variables (color/font state for both scroll states)
1. Base reset
2. Back to top button
3. Nav bar — shell, logo, scroll state
4. Nav links
5. Dropdown + mega menu ("submenu panel" system)
6. Social + call-to-action button
7. Hamburger (mobile menu toggle)
8. Desktop layout (logo / nav / social+CTA, 3-column grid)
9. Responsive — mobile accordion nav (<= 970px)
10. WordPress content link colors
11. Background images
12. Scrollbar
13. Page layout — footer, sticky sidebar, misc.
============================================================================= */
/* =============================================================================
0. ROOT VARIABLES
Every nav color is defined once here, then re-defined on .scrolling-active
for the scrolled state. Because CSS custom properties inherit down the DOM,
every rule below that reads var(--nav-ink), var(--cta-bg), etc. updates
automatically in both states — there is no second "scrolled" copy of any
rule elsewhere in this file.
============================================================================= */
:root {
/* --- Color state: INITIAL (unscrolled) --- */
--nav-bg: transparent; /* nav bar background */
--nav-ink: #242e5a; /* nav link text + social icon color */
--cta-bg: #242e5a; /* call-to-action button background */
--cta-ink: #fff; /* call-to-action button text */
--submenu-bg: #fff; /* dropdown / mega menu background */
/* (dropdown / mega text reuses --nav-ink) */
/* --- Logo (nav.js reads these — see its header comment). Both states
use logo.svg here — the scrolled state now matches main-dark.css's
scrolled state, which also uses logo.svg, so there's no swap left
to make. --logo-swap is kept at 1 for consistency with main-dark.css;
it's a no-op while both paths point at the same file.
NOTE: these hold FILENAMES only, not paths — see nav.js for why. */
--logo-initial: 'logo.svg'; /* shown before scrolling */
--logo-scrolled: 'logo.svg'; /* shown once scrolled */
--logo-swap: 1;
/* --- Structural (same in both scroll states) --- */
--nav-divider-color: rgba(128, 128, 128, 0.25); /* mega column / social dividers */
--nav-underline: rgba(106, 106, 106, 1.0); /* animated hover underline */
--nav-shadow: rgba(0, 0, 0, 0.22); /* drop shadow once scrolled */
--nav-breakpoint: 970px; /* single mobile/desktop split */
/* --- Typography --- */
--font-body: 'Poppins', sans-serif; /* rest of the site */
--font-nav: 'Inter', sans-serif; /* nav bar (see below) */
}
/* --- Color state: SCROLLED —
matches main-dark.css's .scrolling-active block exactly, on request. --- */
.scrolling-active {
--nav-bg: #fff;
--nav-ink: #242e5a;
--cta-bg: #242e5a;
--cta-ink: #fff;
--submenu-bg: #fff;
}
/* =============================================================================
1. BASE RESET
============================================================================= */
html {
scroll-behavior: smooth;
}
* {
margin: 0;
padding: 0;
box-sizing: border-box;
font-family: var(--font-body);
}
/* The nav bar (and everything inside it) uses Inter; the rest of the site
keeps Poppins. "nav *" beats the "*" reset above because it's more
specific, so this single rule is all that's needed to scope the font. */
nav,
nav * {
font-family: var(--font-nav);
}
ol, ul {
padding-bottom: 0px !important;
}
/* =============================================================================
2. BACK TO TOP BUTTON
============================================================================= */
#myBtn {
display: none;
position: fixed;
bottom: 20px;
right: 30px;
z-index: 99;
font-size: 1em;
border: none;
outline: none;
cursor: pointer;
padding: 5px;
border-radius: 4px;
}
/* Animated bottom-border hover effect, shared by the back-to-top button,
nav links, the dropdown/mega toggle buttons, and the social icons. */
#myBtn,
.submenu-toggle:after,
.nav-links li > a:after,
.nav-social__icons a:after,
::-webkit-scrollbar-thumb {
display: block;
content: '';
border-bottom: 2px solid var(--nav-underline);
transform: scaleX(0);
transition: transform 250ms ease-in-out;
}
#myBtn:hover,
.submenu-toggle:hover:after,
.nav-links li > a:hover:after,
.nav-social__icons a:hover:after {
transform: scaleX(1);
}
#myBtn:hover {
background-color: rgba(60, 36, 21, 1.00);
}
/* =============================================================================
3. NAV BAR — shell, logo, scroll state
Fluid by default: the same markup renders at every width; only
position/display/size changes at the breakpoint (see section 9).
============================================================================= */
nav {
background-color: var(--nav-bg);
position: fixed;
top: 0;
width: 100%;
z-index: 100;
line-height: 2.5em;
box-shadow: none;
transition: background-color 0.3s ease, box-shadow 0.3s ease;
}
/* Toggled by nav.js on scroll (mirrors the pbdowntown theme's onScroll
pattern): past the threshold, the bar switches from transparent/no-shadow
to a solid var(--nav-bg) bar with a drop shadow. */
.scrolling-active {
background-color: var(--nav-bg) !important;
-webkit-box-shadow: 0px 5px 4px 0px var(--nav-shadow) !important;
box-shadow: 0px 5px 4px 0px var(--nav-shadow) !important;
}
/* Page scrollbar track color — intentionally NOT tied to the nav's own
scrolled background; this is a global page style, not a nav state. */
::-webkit-scrollbar-track {
background-color: #fff !important;
}
::-webkit-scrollbar-thumb:hover {
-webkit-box-shadow: 0px 5px 4px 0px var(--nav-shadow) !important;
box-shadow: 0px 5px 4px 0px var(--nav-shadow);
}
nav .wrapper {
max-width: 100%;
padding: 0 30px;
margin: auto;
display: flex;
align-items: center;
justify-content: space-between;
gap: clamp(10px, 2vw, 30px);
}
nav .logo {
display: flex;
align-items: center;
text-decoration: none;
flex: 0 0 auto;
}
/* #logoImg's src is swapped between logo.svg / logo2.svg by nav.js on
scroll, gated by the --logo-swap variable above (see nav.js comments). */
nav .logo-img {
box-sizing: content-box;
padding: 10px;
height: clamp(56px, 8vw, 80px);
width: auto;
}
/* =============================================================================
4. NAV LINKS
Desktop: a single horizontal row, flush against the logo and the
social/CTA block. Mobile: becomes a panel that drops down directly below
the bar (see section 9) instead of a full-screen off-canvas drawer.
============================================================================= */
.nav-links {
display: flex;
align-items: center;
flex: 1 1 auto;
flex-wrap: wrap;
justify-content: flex-end;
list-style: none;
}
.nav-links li {
list-style: none;
cursor: url(../images/cursor-01.png), auto;
}
/* The dropdown anchors to its own
(narrow, sits under the trigger).
The mega menu deliberately has NO local positioning context, so its
.submenu-panel below falls through to