/* Copyright (c) 2026 Goldeneye Technologies LLC. All rights reserved. */ /**************************************************************************/ /******** Content classes: Side navigation **********************/ /**************************************************************************/ /* NOTE: Code in this section from w3schools:*/ /* https://www.w3schools.com/howto/tryit.asp?filename=tryhow_js_sidenav */ /* */ .sidenav { height: 97.5%; /* height: 100%; */ width: 2.5%; position: fixed; /* 1150, NOT the old 10, and it must stay above 1000. The desktop rail is a body-level fixed element that the map column underlaps whenever the rail hover-expands (#content_main stays at `left: 2.5%`, so the expanded 180px rail overlays it). Leaflet's own panes are z-index 400 and its controls run to 1000, and since P21 removed `#content_main.main_unpinned`'s `position: relative; z-index: 0` there is no longer a stacking context trapping those numbers below the chrome — they now compete directly in the page's root context, so a rail at 10 painted BEHIND the map. 1150 matches `.sidenav-hamburger`, which is the same control at the mobile breakpoint, and keeps the operator rule (chart overlay > info panel > nav / search bar). The mobile drawer overrides this to 1400 in the media block below. */ z-index: 1150; top: 0; left: 0; background-color: var(--color-sidenav-bg); overflow-x: hidden; /* Hover open/close timing (marinetraffic feel, 2026-06-26). Base = the LEAVE-hover transition: a 0.45s delay before the 0.2s collapse so the nav doesn't snap shut the instant the pointer drifts off. The :hover and _pinned rules below zero the delay so expanding (hover or pin-click) is immediate + quick. (Was a flat `transition: 0.5s` on all properties.) */ transition: width 0.2s ease 0.45s; /* NOTE: `padding` percentage is relative to width. */ /* padding-top: 60px; */ /* padding-top: 2.5%; */ } /* Pinned / hover-expanded width is a FIXED 180px (was 10%). Originally sized to hold a 160x600 side-nav ad creative at every desktop width (a percentage made that fit viewport-dependent); the ad inventory was removed on 2026-07-25 (S6), but 180px is kept because it's a stable, viewport-independent width for the link labels and on 1080p+ monitors it's narrower than the old 10%, so the map gains room. The collapsed rail stays 2.5%. Keep in lockstep with `.main_pinned { left: 180px }` in global.css. */ /* Expand immediately on pin-click / hover (no collapse-delay): override the base `transition-delay` to 0 so opening is snappy while leaving still waits. */ .sidenav_pinned { width: 180px; transition: width 0.2s ease 0s; } .sidenav:hover { /* width: 250px; */ width: 180px; transition: width 0.2s ease 0s; } /* Auto-hiding nav scrollbar. The pinned nav can still overflow vertically on very short viewports. Replace the chunky default OS scrollbar with a thin one whose thumb is transparent by default and reveals only on hover or while actively scrolling (the `is-scrolling` class is toggled by nav/toggle.js::init_nav_scroll_reveal with a short idle timeout). Light translucent thumb so it reads against the dark nav. */ .sidenav { scrollbar-width: thin; /* Firefox */ scrollbar-color: transparent transparent; /* thumb track — hidden by default */ } .sidenav::-webkit-scrollbar { /* Chromium / Edge / WebKit */ width: 8px; } .sidenav::-webkit-scrollbar-track { background: transparent; } .sidenav::-webkit-scrollbar-thumb { background-color: transparent; border-radius: var(--radius-lg); /* Transparent border + padding-box clip insets the thumb so it reads as a thin pill rather than a full-width bar. */ border: 2px solid transparent; background-clip: padding-box; transition: background-color var(--transition-base); } .sidenav:hover::-webkit-scrollbar-thumb, .sidenav.is-scrolling::-webkit-scrollbar-thumb { background-color: rgba(168, 168, 168, 0.55); } .sidenav:hover::-webkit-scrollbar-thumb:hover { background-color: rgba(168, 168, 168, 0.85); } .sidenav:hover, .sidenav.is-scrolling { scrollbar-color: rgba(168, 168, 168, 0.55) transparent; /* Firefox reveal */ } /* Header row: logo on the left, pin toggle right-justified. Flex so the pin icon shares the logo's row instead of occupying a full-width block at the nav's bottom — that reclaimed ~58px of vertical space toward fitting the taller 160x600 ad without a nav scrollbar. */ .sidenav .sidenav-header { display: flex; align-items: center; justify-content: space-between; gap: var(--space-2); /* No wrap so the right-justified pin can't drop below the logo and re-grow the header. The logo clips with the nav's overflow-x:hidden when collapsed, same as before. */ flex-wrap: nowrap; } .sidenav .sidenav-logo { /* Brand lockup row: the icon-logo mark + the "Tickerscape" wordmark. Flex so the mark stays put in the collapsed rail and the wordmark reveals to its right on expand (Prompt 8 visual-identity refresh). `min-width: 0` + `overflow: hidden` + `flex: 0 1 auto` are the clip-safety net: at the fixed 180px expanded width the wordmark CLIPS rather than pushing into / overlapping the right-justified pin button. */ display: flex; align-items: center; gap: var(--space-2); flex: 0 1 auto; min-width: 0; overflow: hidden; /* Trimmed from var(--space-3) to var(--space-2) vertical as part of the height-reclaim pass. */ padding: var(--space-2); color: var(--color-text-inverse); /* font-size-base (15px), not -lg: "Tickerscape" is wider than the old "marigus Logo" placeholder, and at 17px it overran the 180px header and collided with the pin. 15px fits the logo + wordmark + pin in 180px. */ font-size: var(--font-size-base); font-weight: var(--font-weight-semibold); letter-spacing: 0.3px; white-space: nowrap; } .sidenav .sidenav-logo-mark { /* Hard-pinned size (flex-basis + min-width) so the mark never shrinks while the nav width animates between the 2.5% rail and 180px. currentColor -> the inverse (white) logo color above; the brand teal is too dark to read against the dark-teal nav surface. */ flex: 0 0 24px; width: 24px; height: 24px; min-width: 24px; } .sidenav a { /* padding: 8px 8px 8px 32px; */ /* Vertical padding trimmed 8px -> 5px (horizontal kept at var(--space-2)) to reclaim ~3px/link toward the 160x600 ad's height budget; font size stays 15px (WCAG-AA verified) per the chosen tightening package. */ padding: 5px var(--space-2); text-decoration: none; font-size: var(--font-size-base); color: var(--color-sidenav-text); /* Flex row: per-link icon + label (Prompt 8 collapsed-icon nav). The icon stays in the collapsed rail; the label clip-reveals on expand. no-wrap so a partially-expanded width can't drop the label under the icon. */ display: flex; align-items: center; gap: var(--space-2); white-space: nowrap; /* line-height == the 20px icon so the link's row height is identical whether the label is in-flow (expanded) or clip-hidden out-of-flow (collapsed). The default 1.55 line-height (~23px) made each expanded link ~3px taller, which spread the icons apart vertically as the labels appeared/disappeared during the width animation. */ line-height: 20px; transition: color var(--transition-base), background-color var(--transition-base); } /* Per-link glyphs + the collapsed/expanded label swap (Prompt 8). The icon is always visible; the label fades out in the collapsed 2.5% rail and fades in when the nav is pinned, hovered, or open as the mobile drawer. The label stays IN FLOW and hidden via OPACITY (not display/visibility/clip): opacity:0 keeps it in the accessibility tree, so a collapsed link keeps its accessible name (the icons are aria-hidden), and opacity is animatable so the disappearance can be delayed to match the width collapse (see the label rules below). The nav's overflow-x:hidden clips the invisible text in the rail. */ .sidenav .nav-icon { /* Hard-pinned: explicit flex-basis + min-width so the icon holds 20px in BOTH states and never shrinks while the nav width animates 180px <-> 2.5% (a flex item with min-width:auto can be squeezed by its narrowing flex container mid-transition; min-width:20px stops that). */ flex: 0 0 20px; width: 20px; height: 20px; min-width: 20px; } .sidenav .nav-label, .sidenav .sidenav-logo-text { /* Collapsed: invisible (opacity 0) but in flow + in the a11y tree. The fade-OUT is delayed 0.45s + runs 0.2s — the SAME timing as the width collapse — so on hover-exit the labels linger, then fade as the nav narrows instead of vanishing instantly. */ opacity: 0; white-space: nowrap; transition: opacity 0.2s ease 0.45s; } .sidenav.sidenav_pinned .nav-label, .sidenav:hover .nav-label, .sidenav.sidenav_drawer_open .nav-label, .sidenav.sidenav_pinned .sidenav-logo-text, .sidenav:hover .sidenav-logo-text, .sidenav.sidenav_drawer_open .sidenav-logo-text { /* Expanded: fade in immediately (no delay), a touch quicker than the fade-out. */ opacity: 1; transition: opacity 0.15s ease 0s; } .sidenav a:hover { color: var(--color-sidenav-text-hover); background-color: var(--color-sidenav-bg-hover); } /* "Support Tickerscape" link (S6, 2026-07-25) — the only monetization surface left after the ad inventory was removed. It is a normal nav link (so it inherits the icon-in-the-rail / label-reveal-on-expand behavior and the 44px drawer touch target below); the heavier label is the only distinction, plus the
the template renders above it. Deliberately NOT a filled button: a CTA box would break the rail's icon rhythm when collapsed. Rendered only when config.SUPPORT_URL is set. */ .sidenav a.nav-support .nav-label { font-weight: var(--font-weight-semibold); } .sidenav .closebtn { position: absolute; top: 0; right: 25px; font-size: 36px; margin-left: 50px; } .sidenav span { overflow: hidden; } .sidenav hr { border: 0; border-top: 1px solid var(--color-sidenav-divider); /* Vertical margin trimmed 8px -> 4px (height-reclaim pass); horizontal kept. */ margin: var(--space-1) var(--space-2); } /* Pin toggle: compact icon button living in the header row (was a full-width "Pin" text button at the nav bottom). The icon is a currentColor thumbtack (icons.svg#icon-pin) so it tracks the nav's light text color. The JS (nav/toggle.js) keys off the #button_nav_pin id, so only the markup/style changed. */ .sidenav #button_nav_pin { flex: 0 0 auto; /* Hidden in the collapsed 2.5% rail — there it would overlap / cover the logo mark (the rail is too narrow for both) and pinning isn't reachable until the nav expands anyway. Revealed when the nav is pinned or hovered (the reveal rule below); the hover-expand surfaces it so you can still click to pin. */ display: none; align-items: center; justify-content: center; padding: var(--space-1); background-color: transparent; color: var(--color-sidenav-text); border: 1px solid var(--color-sidenav-divider); border-radius: var(--radius-sm); cursor: pointer; transition: background-color var(--transition-base), color var(--transition-base), border-color var(--transition-base); } .sidenav.sidenav_pinned #button_nav_pin, .sidenav:hover #button_nav_pin { display: inline-flex; } .sidenav #button_nav_pin:hover { background-color: var(--color-sidenav-bg-hover); color: var(--color-sidenav-text-hover); border-color: var(--color-sidenav-text); } /* Engaged (pinned) state reads as pressed — the icon replaced the text label, so give the button a tinted active look keyed off the existing pinned class (no JS change; aria-expanded already mirrors state). */ .sidenav.sidenav_pinned #button_nav_pin { background-color: var(--color-sidenav-bg-hover); border-color: var(--color-sidenav-text); color: var(--color-sidenav-text-hover); } .sidenav .nav-pin-icon { display: block; width: 20px; height: 20px; } /* The global --color-focus-ring (solid brand teal #0a6b78) is tuned for light surfaces; against the dark sidenav surface its teal reads dim. Paint a brighter inverse-color ring on sidenav-scoped focus so keyboard focus stays crisp without retuning the global token. */ .sidenav a:focus-visible, .sidenav #button_nav_pin:focus-visible, .sidenav .sidenav-logo:focus-visible { outline: 3px solid var(--color-text-inverse); outline-offset: 2px; } @media screen and (max-height: 450px) { .sidenav {padding-top: 15px;} .sidenav a {font-size: 18px;} } /* ----------------------------------------- */ /* Mobile side-nav drawer (Lane E / Prompt 3). The desktop sidenav strip (hover-expand idiom) is unusable at phone width and the pinned 180px rail overlaps the map, so on (max-width:768px) the strip is hidden and the nav becomes a hamburger-opens-drawer. The #sidenav_hamburger button and #sidenav_backdrop ship in the DOM at all viewports (base.html); these rules gate their visibility to mobile and turn the sidenav into a left-edge drawer. Wiring (open/close, backdrop + Escape dismiss, session-only) is in nav/toggle.js::init_sidenav_hamburger. */ /* ----------------------------------------- */ .sidenav-hamburger { /* Hidden until the mobile @media block reveals it (it has no desktop rendering at all, so these base declarations are mobile-only in practice). Three flex-stacked bars keep the icon SVG-free. `box-sizing: border-box` is load-bearing, not decoration: there is no site-wide border-box reset, so under the default content-box the `padding: 11px 9px` and the 1px border added OUTSIDE the declared 44x44 and this button rendered 64x68 — bigger than every other mobile control, with 44px-wide bars and 17.5px gaps instead of the 26x22 icon the padding is drawn for, and with its right 12px underlapping `.map-search` (`left: 60px`, same z-index 1300 but later in the DOM, so the input won and ate that much of the tap area). Sized 48x48 to match the more-tools cycler and the `.leaflet-bar` toolbar column (both 48px outer — see content_map.css `.map-more-tools`), so all three mobile corner controls read as one system; still well over the 44px WCAG 2.5.5 touch-target minimum. */ display: none; position: fixed; top: 8px; left: 8px; box-sizing: border-box; width: 48px; height: 48px; /* Below the info panel (1200): the panel is page content the user is reading, the hamburger is chrome, so where they overlap the panel wins. Above the map + its Leaflet controls (<=1100) so it stays tappable. This only became an honest number when #content_main stopped forming a stacking context (global.css) — before that it was 1300 against a page trapped at 0, so it covered EVERYTHING. It does not need to clear the drawer: `#content_sideNav` is later in the DOM, so an open drawer has always painted over this button. */ z-index: 1150; background: var(--color-bg-elevated); border: 1px solid var(--color-border-strong); border-radius: var(--radius-sm); box-shadow: var(--shadow-sm); cursor: pointer; padding: 11px 9px; flex-direction: column; justify-content: space-between; transition: background-color var(--transition-base); } .sidenav-hamburger:hover { background: var(--color-bg-hover); } .sidenav-hamburger-bar { display: block; width: 100%; height: 3px; background: var(--color-text); border-radius: 2px; } .sidenav-backdrop { display: none; position: fixed; inset: 0; background: rgba(0, 0, 0, 0.45); z-index: 1399; } @media (max-width: 768px), (orientation: landscape) and (max-height: 500px) and (pointer: coarse) { /* Hide the desktop strip; the drawer (opened class) takes its place. */ .sidenav { display: none; } /* Flex column (was `display: block`) so the re-parented site footer can be pushed to the bottom of the drawer with `margin-top: auto` — see the footer block at the end of this @media. Neither child shrinks, so a tall nav scrolls the drawer (`.sidenav` already resolves overflow-y to auto via its overflow-x:hidden) instead of squashing the footer. */ .sidenav.sidenav_drawer_open { display: flex; flex-direction: column; width: 75vw; max-width: 320px; height: 100vh; height: 100dvh; /* keep the drawer within iOS Safari chrome */ position: fixed; top: 0; left: 0; /* The open drawer is a modal surface: it covers the info panel (1200) and its backdrop (1399) dims it. Only the three overlay modals (2000) outrank it. */ z-index: 1400; } .sidenav.sidenav_drawer_open > #mySidenav { flex: 0 0 auto; } .sidenav-hamburger { display: flex; } .sidenav-backdrop:not([hidden]) { display: block; } /* The pin toggle is meaningless when the sidenav is a drawer — hide it on mobile, full stop. `!important` because the desktop reveal selectors (`.sidenav.sidenav_pinned #button_nav_pin`, `.sidenav:hover ...`) outrank a plain `.sidenav #button_nav_pin` and can spuriously match on touch (sticky :hover after a tap, or a desktop-restored pinned class), which would surface the pin in the drawer. */ .sidenav #button_nav_pin { display: none !important; } /* Drawer nav links: meet the 44px touch-target minimum (WCAG 2.5.5) without touching the desktop link metrics above. */ .sidenav.sidenav_drawer_open a { min-height: 44px; display: flex; align-items: center; font-size: 18px; } /* Mobile content takes the full viewport (the drawer floats over it on demand). Overrides the desktop pinned/unpinned offsets in global.css. */ .main_unpinned, .main_pinned { left: 0; width: 100%; } /* ---- Site footer, re-parented into the drawer (S7, 2026-07-25) ---- nav/toggle.js::init_footer_in_drawer MOVES the one #footer node in here on mobile (never duplicates it — one