/* * app.css — Custom styles layered on top of the Tailwind v3 static build. * * PURPOSE * Handles anything that Tailwind utility classes cannot express cleanly: * sidebar slide animation, mobile top-bar layout, overflow guards, the * lightbox z-index stack, and brand-specific overrides. * * DEPENDENCIES * - tailwind.css (loaded before this file in index.php) * - Sidebar background colour #141f18 is also referenced in tailwind.config.js * as `brand.sidebar`; keep them in sync. * * PATTERNS * - Sidebar uses transform: translateX(-15rem) / translateX(0) toggled by JS * adding/removing the `open` class — do not change the transition property * without updating the JS side as well. * - Mobile overflow is suppressed globally on body and #main-content; adding * overflow-x:auto to a child element will break this guard. * * TRIP HAZARDS * - Do NOT add Tailwind @apply rules here unless you run `npm run build:css` * afterwards — the static build will not pick them up automatically. * - #main-nav z-index must stay above #main-content but below #modal-backdrop * and #lightbox; check the full z-index stack before adding new layers. * * TODOS * - Audit for any styles that can be replaced with Tailwind utilities. */ body { background-color: #f0eeea; } /* Prevent any page from causing horizontal scroll on mobile */ body, #main-content { overflow-x: hidden; } #main-nav { background-color: #141f18; transform: translateX(-15rem); transition: transform 0.3s ease; } #main-nav.is-open { transform: translateX(0); } #top-bar { background-color: #f0eeea; } /* Search bar: collapsed to icon-only by default, expands on focus */ #search-input { width: 0; min-width: 0; transition: width 0.2s ease; } #top-bar-search:focus-within #search-input { width: 9rem; } @media (min-width: 1280px) { #top-bar-search:focus-within #search-input { width: 12rem; } } /* Sidebar slides in at xl (1280px) — wide enough to comfortably fit sidebar + content */ @media (min-width: 1280px) { #main-nav { transform: translateX(0); } } /* Desktop sidebar margin — only at xl+ */ #main-content.has-sidebar { margin-left: 0; } @media (min-width: 1280px) { #main-content.has-sidebar { margin-left: 15rem; } } /* Make tall modals scrollable on mobile */ @media (max-height: 700px), (max-width: 640px) { #modal .modal-inner { max-height: 90vh; overflow-y: auto; } } /* ── Dark mode (CSS filter invert) ─────────────────────────────────────── */ /* sits outside the body filter, so set its background directly. This fixes the browser quirk where filter on body stops it propagating its background-color to the viewport canvas. */ html.dark-mode { background-color: #0a0a0a; } body.dark-mode { filter: invert(1) hue-rotate(180deg); } /* Sidebar: re-invert so it stays in its natural dark-green state */ body.dark-mode #main-nav { filter: invert(1) hue-rotate(180deg); } /* Nav logo is inside the already-re-inverted sidebar — cancel the img rule below */ body.dark-mode #main-nav img { filter: none; } /* Re-invert actual photos and media so colours look natural */ body.dark-mode img, body.dark-mode video, body.dark-mode canvas { filter: invert(1) hue-rotate(180deg); } /* .no-invert: re-invert any element that should display as-is (e.g. cover photo hero) */ body.dark-mode .no-invert { filter: invert(1) hue-rotate(180deg); } /* Imgs inside .no-invert are already in the re-inverted context — cancel the img rule */ body.dark-mode .no-invert img { filter: none; } /* Login page: re-invert so the dark-green screen stays dark (already dark-themed) */ body.dark-mode #login-page { filter: invert(1) hue-rotate(180deg); } /* SVG logo inside login is in the re-inverted context — cancel the img rule */ body.dark-mode #login-page img { filter: none; } /* Modal backdrop: re-invert so it stays as a dark overlay, not a bright one */ body.dark-mode #modal-backdrop { filter: invert(1) hue-rotate(180deg); } /* Lightbox caption: clickable when photo links to a source record */ #lightbox-caption.is-nav { cursor: pointer; text-decoration: underline; text-underline-offset: 3px; transition: color 0.15s; } #lightbox-caption.is-nav:hover { color: rgba(255, 255, 255, 0.95); } /* Lightbox: re-invert so the dark backdrop stays dark */ body.dark-mode #lightbox { filter: invert(1) hue-rotate(180deg); } /* Photos inside lightbox sit in the re-inverted context — cancel the img rule */ body.dark-mode #lightbox img { filter: none; }