/* themes.css * * Vessel-wide visual themes. The dark palette is defined by each view's * :root block (it's the default). These selectors override the CSS * variables when is set, so every component that * already reads var(--accent), var(--ink) etc. restyles automatically. * * Variables intentionally kept in lockstep across themes — adding a new * theme means picking 4 colours and listing them under a new selector. */ /* ───────── LIGHT — saloon at noon ───────── */ :root[data-theme="light"] { --bg-deep: #efe8d6; --bg-mid: #f5efe1; --bg-glow: #ffffff; --ink: #1a2a3f; --ink-muted: #5a6a82; --ink-dim: #97a1b4; --accent: #a37935; --accent-soft: rgba(163, 121, 53, 0.22); --accent-ink: #ffffff; --panel: rgba(255, 255, 255, 0.82); --panel-edge: rgba(26, 42, 63, 0.14); --hairline: rgba(26, 42, 63, 0.10); --good: #2a8e5e; } /* ───────── MEDITERRANEAN — sun, sea, terracotta ───────── */ :root[data-theme="mediterranean"] { --bg-deep: #d3e3eb; --bg-mid: #e8eff1; --bg-glow: #fef7e6; --ink: #0c3a5c; --ink-muted: #486a86; --ink-dim: #8aa2b7; --accent: #d4623d; --accent-soft: rgba(212, 98, 61, 0.22); --accent-ink: #ffffff; --panel: rgba(255, 252, 244, 0.82); --panel-edge: rgba(12, 58, 92, 0.14); --hairline: rgba(12, 58, 92, 0.10); --good: #2e8a5a; } /* ───────── PACIFIC — deep ocean, sunset coral ───────── */ :root[data-theme="pacific"] { --bg-deep: #04181f; --bg-mid: #0a2a3d; --bg-glow: #1a4a5c; --ink: #f0f7f5; --ink-muted: #88adb5; --ink-dim: #5a7a82; --accent: #ff8a6e; --accent-soft: rgba(255, 138, 110, 0.22); --accent-ink: #04181f; --panel: rgba(10, 42, 61, 0.72); --panel-edge: rgba(240, 247, 245, 0.10); --hairline: rgba(240, 247, 245, 0.08); --good: #6bd8b8; } /* The decorative star overlay assumes a dark backdrop. Hide it on the * light-bg themes — otherwise it's white noise on white. */ :root[data-theme="light"] body::before, :root[data-theme="mediterranean"] body::before { display: none; } /* Buttons fill with --accent; on coloured-accent themes the inked text * needs explicit contrast. */ :root[data-theme="light"] button, :root[data-theme="mediterranean"] button, :root[data-theme="pacific"] button { color: var(--accent-ink); } /* Native select dropdown — readable on light backgrounds */ :root[data-theme="light"] select, :root[data-theme="mediterranean"] select { background-color: rgba(255, 255, 255, 0.85); color: var(--ink); } :root[data-theme="light"] select option, :root[data-theme="mediterranean"] select option, :root[data-theme="light"] select optgroup, :root[data-theme="mediterranean"] select optgroup { background: #ffffff; color: var(--ink); } /* Leaflet (navigation dashboard) — base canvas + attribution chip * recolour to fit the light themes. The map tile URL itself is swapped * in navigation.php's JS based on the theme. */ :root[data-theme="light"] .leaflet-container, :root[data-theme="mediterranean"] .leaflet-container { background: var(--bg-deep); } :root[data-theme="light"] .leaflet-control-attribution, :root[data-theme="mediterranean"] .leaflet-control-attribution { background: rgba(255, 255, 255, 0.85) !important; color: var(--ink-muted) !important; } :root[data-theme="light"] .leaflet-control-attribution a, :root[data-theme="mediterranean"] .leaflet-control-attribution a { color: var(--ink) !important; } :root[data-theme="light"] .leaflet-control-zoom a, :root[data-theme="mediterranean"] .leaflet-control-zoom a { color: var(--ink) !important; } /* Vessel marker drop-shadow looks burnt on warm light backdrops — * tone it down */ :root[data-theme="light"] .vessel-marker .icon, :root[data-theme="mediterranean"] .vessel-marker .icon { filter: drop-shadow(0 0 6px rgba(0, 0, 0, 0.2)); }