/* ============ Left Nav ========================================================================= ====================================================================================================*/ #lefNav { position: fixed; left: 0; top: 0; z-index: 100; height: 100%; width: 230px; background: #006242; display: flex; flex-direction: column; box-shadow: 0px -40px 15px 0px #000; } @media (max-width: 767px) { #lefNav { top: auto; bottom: 0; /* Pin to a definite height so the map container's calc() can subtract the exact same value — see .mainWrap mobile rule in style.css. Auto-height was leaving a gap because the rendered nav was shorter than the calc()'s assumed value. */ height: 56px; width: 100%; flex-direction: row; box-shadow: none; } /* Mobile "header" backing strip: a green bar pinned to the very top of the viewport, sitting behind the fixed-positioned logo (top-left) and social icons (top-right) so they read as a single header bar. */ #lefNav::before { content: ""; position: fixed; top: 0; left: 0; right: 0; height: 76px; background: #006242; z-index: 100; } } /* Inner wrap â€” full-height flex column */ #lefNav .leftInnerWrap { display: flex; flex-direction: column; height: 100%; width: 100%; } @media (max-width: 767px) { #lefNav .leftInnerWrap { flex-direction: row; align-items: center; justify-content: space-between; } } /* ---- Language switcher (EN / FR) ---- */ /* Pill at the very top of the left nav. Inactive button = white-on-green, active = green-on-white. Click handler in custom.js drives the swap. */ #lefNav .langSwitch { display: flex; gap: 4px; padding: 14px 20px 0; flex-shrink: 0; background-color: #006242; } /* Desktop: the language switcher lives in the footer (sliding pill) instead of the left nav. Hide the left-nav copy — it only shows on mobile. */ @media (min-width: 768px) { #lefNav .langSwitch { display: none; } } #lefNav .langSwitch__btn { flex: 1 1 0; background: transparent; border: 1px solid rgba(255, 255, 255, 0.55); color: #ffffff; font-family: 'effra', 'Effra', sans-serif; font-size: 12px; font-weight: 600; letter-spacing: 0.08em; padding: 6px 0; border-radius: 4px; cursor: pointer; transition: background-color 0.2s ease, color 0.2s ease, border-color 0.2s ease; } #lefNav .langSwitch__btn:hover { background: rgba(255, 255, 255, 0.12); } #lefNav .langSwitch__btn.is-active { background: #ffffff; color: #006242; border-color: #ffffff; cursor: default; } @media (max-width: 767px) { /* Mobile: float the switcher in the same row as the filter icons (#actionButtons), which sit at bottom:80px inside .mainWrap — i.e. just above the collapsed bottom-sheet popups. .mainWrap ends 56px above the viewport bottom, so bottom:136px (56 + 80) puts this on the same line as the icons, mirrored to the right side. The 41px height + centred content matches the round filter icons so the two read as one row. z-index 200 matches #actionButtons. */ #lefNav .langSwitch { position: fixed; top: auto; bottom: 136px; right: 16px; left: auto; padding: 0; width: 88px; height: 41px; align-items: center; background: transparent; z-index: 200; /* Reveal in step with the filter icons (#actionButtons): hidden on first paint, faded in once gets .layers-revealed. Same 0.25s/0.4s delay so it lands alongside the icons rather than during the intro. */ opacity: 0; pointer-events: none; transition: opacity 0.25s ease 0.4s; } body.layers-revealed #lefNav .langSwitch { opacity: 1; pointer-events: auto; } /* Inactive button gets the dark green brand fill (active stays the white-on-green pill from the base rule). */ #lefNav .langSwitch__btn:not(.is-active) { background-color: #006242; } /* Mirror the filter icons' behaviour: while a popup is expanded it covers this row, so fade the switcher out (it sits underneath the expanded panel anyway). It returns when the panel collapses. */ body:has(#poiPanel.is-expanded, #trailsPanel.is-expanded, #roadsPanel.is-expanded, #legendPanel.is-expanded) #lefNav .langSwitch { opacity: 0; pointer-events: none; transition: opacity 0.2s ease; } } /* ---- Logo box ---- */ #lefNav .logoBox { background-color: #006242; padding: 28px 20px 14px; text-align: center; flex-shrink: 0; } @media (max-width: 767px) { /* Mobile "header": pin the logo to the top-left of the viewport. The nav itself lives at the bottom (see #lefNav mobile rule above), so these top-pinned children visually form a separate top bar. */ #lefNav .logoBox { position: fixed; top: 0; left: 0; height: 76px; display: flex; align-items: center; padding: 0 16px; background: transparent; z-index: 101; } } #lefNav .logoBox a { display: inline-block; } #lefNav .logoBox figure { margin: 0; text-align: center; } #lefNav .logoBox figure img { height: 83px; width: auto; display: block; margin: 0 auto; } @media (max-width: 767px) { #lefNav .logoBox figure img { height: 58px; } } /* ---- Mobile burger ---- */ .menuBurger { display: none; } /* ---- Nav menu ---- */ .leftNav__menu { flex: 1 1 auto; overflow-y: auto; } /* Subtle divider between logo box and the first nav item. Indented to match the Overview label's left/right padding (20px), with breathing room above and below. */ .leftNav__menu::before { content: ""; display: block; height: 1px; margin: 18px 20px; background: rgba(255, 255, 255, 0.22); } @media (max-width: 767px) { .leftNav__menu::before { display: none; } } @media (max-width: 767px) { #lefNav .leftNav__menu { flex: 1 1 auto; overflow: visible; } /* Mobile bottom nav: lay out the three buttons left-to-right instead of stacked. Uses #lefNav prefix to beat the base .navList rule (which declares flex-direction: column) further down in this file. */ #lefNav .navList { flex-direction: row; justify-content: space-around; align-items: center; gap: 0; /* Reserve room on the right for the floating Contact Us button so it doesn't overlap the rightmost nav item. */ padding-right: 110px; } #lefNav .navItem { flex: 1 1 0; text-align: center; } #lefNav .navBtn { height: 56px; padding: 0 8px; justify-content: center; text-align: center; font-size: 12px; letter-spacing: 0.4px; white-space: nowrap; } /* ---- Mobile Phases dropdown ---- The "Phases" toggle replaces the inline Phase 1 / Phase 2 buttons. The actual phase list lives in an upward-opening dropdown that's hidden until #navPhases gets the .is-open class (toggled in custom.js). */ #lefNav .navItem--phases { position: relative; } #lefNav .phasesToggle { display: flex; align-items: center; gap: 6px; } /* Dropdown caret. Rotates 180° when the dropdown is open. */ #lefNav .phasesToggle .navBtn__label::after { content: ""; display: inline-block; width: 0; height: 0; margin-left: 6px; border-left: 4px solid transparent; border-right: 4px solid transparent; border-top: 5px solid currentColor; vertical-align: middle; transform: translateY(-1px); transition: transform 0.22s ease; } #lefNav .navItem--phases.is-open .phasesToggle .navBtn__label::after { transform: translateY(-1px) rotate(180deg); } #lefNav .phasesDropdown { position: absolute; bottom: 100%; left: 0; right: 0; margin: 0 0 8px; padding: 6px 0; background: #006242; border-radius: 10px; box-shadow: 0 -6px 18px rgba(0, 0, 0, 0.3); gap: 0; transform: translateY(8px); opacity: 0; pointer-events: none; transition: transform 0.22s ease, opacity 0.22s ease; z-index: 10; } #lefNav .navItem--phases.is-open .phasesDropdown { transform: translateY(0); opacity: 1; pointer-events: auto; } #lefNav .phasesDropdown .navItem--phase { flex: 1 1 auto; text-align: center; } #lefNav .phasesDropdown .phaseBtn { height: 44px; padding: 0 16px; } } .navList { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 10px; } /* No borders between nav items — clean, monochrome list on green */ .navItem { border-bottom: 0; } /* ---- Nav buttons (Overview / Le Parc / La Place) ---- */ .navBtn { display: flex; align-items: center; width: 100%; padding: 8px 20px; background: transparent; border: 0; color: rgba(255, 255, 255, 0.7); /* off-white default */ font-family: "effra", "Effra", sans-serif; font-size: 14px; font-weight: 600; letter-spacing: 0.6px; text-decoration: none; text-transform: uppercase; transition: color 0.3s; cursor: pointer; } .navBtn:hover, .navBtn:focus { color: #ffffff; /* full white on hover */ text-decoration: none; outline: none; } /* Text-only variant (Overview) — no icon, label sits where the icon used to */ .navBtn--text .navBtn__label { line-height: 1; } .navBtn__icon { flex-shrink: 0; width: 32px; height: 32px; border-radius: 8px; background: #013e2a; display: flex; align-items: center; justify-content: center; margin: 0 16px 0 0; transition: background 0.3s; } .navBtn__icon img { width: 17px; height: 17px; display: block; } .navBtn:hover .navBtn__icon, .navBtn:focus .navBtn__icon { background: rgba(255, 255, 255, 0.18); } /* Active state by page — label goes full white; icon block lightens slightly */ /* Overview / front page — Global Masterplan reads as the "default-active" nav item when no phase filter is on. The label goes full white + bold. Once Phase 1 or Phase 2 is clicked, body[data-active-phase] is set and the rule below fades Global Masterplan back to the off-white default while the active phase button lights up via .phaseBtn.is-active. */ body.home #lefNav .navBtn.menuOverview { color: #ffffff; } body.home #lefNav .navBtn.menuOverview .navBtn__label { font-weight: 700; } /* When a phase is active, dim the Global Masterplan label so the active button is the only one reading as "on". */ body.home[data-active-phase] #lefNav .navBtn.menuOverview { color: rgba(255, 255, 255, 0.7); } body.home[data-active-phase] #lefNav .navBtn.menuOverview .navBtn__label { font-weight: 600; } /* Le Parc page (template: page-le-parc.php) */ body.page-template-page-le-parc #lefNav .navBtn.menuFairview .navBtn__icon { background: rgba(255, 255, 255, 0.18); } body.page-template-page-le-parc #lefNav .navBtn.menuFairview { color: #ffffff; } .navBtn__label { line-height: 1; } /* ---- Phase filter buttons (Phase 1 / Phase 2) — single toggle each ---- */ .navItem--phase { border-bottom: 0; } /* Divider above every phase button. Matches the upper divider's indent; 5px breathing room top and bottom. Renders between Global Masterplan and Phase 1, and between Phase 1 and Phase 2. */ .navItem--phase::before { content: ""; display: block; height: 1px; margin: 5px 20px; background: rgba(255, 255, 255, 0.22); } @media (max-width: 767px) { .navItem--phase::before { display: none; } } /* The phase button itself — visually identical to the Global Masterplan text link, but it's a