/* ============================================================================ * 183 PWA — theme.css * Split from the original single-file PWA. See styles/README.md for the * full layout map. * ========================================================================== */ /* ============================================================================ 183 — Maritime tech Dark navy/black base, electric cyan/teal accents, mono numerals. Linear meets a ship's bridge. ========================================================================== */ :root { /* Base — deep blacks with a slight blue cast (like a calibrated marine display) */ --bg-deepest: #050a14; --bg-base: #0a1220; --bg-raised: #111b2c; --bg-elevated: #182338; --bg-overlay: rgba(13, 22, 38, 0.85); --line: rgba(140, 200, 230, 0.08); --line-strong: rgba(140, 200, 230, 0.18); --line-glow: rgba(0, 220, 255, 0.32); /* Type — high contrast on dark */ --text: #e8f1f7; --text-soft: #b6c5d4; --text-muted: #6f8499; --text-faint: #4a5d72; /* Accent — electric cyan, the headline colour */ --accent: #00e0ff; --accent-glow: #00b8d4; --accent-deep: #006e80; --accent-faint: rgba(0, 224, 255, 0.12); /* Secondary accent — warm amber for warnings/pinned periods (signal lights at sea) */ --signal: #ffb84d; --signal-glow: #ff9500; --signal-faint: rgba(255, 184, 77, 0.14); /* Status */ --pass: #00e676; --pass-glow: #00c853; --fail: #ff5470; --fail-glow: #ff1744; --warn: var(--signal); /* Calendar day tokens — strong, clear states. A bridge display is meant to be readable in tired eyes and bad light. */ --cal-past-abroad-bg: rgba(82, 183, 136, 0.36); --cal-past-abroad-fg: #b9ecd2; --cal-active-bg: rgba(0, 224, 255, 0.42); --cal-active-fg: #d4f8ff; --cal-active-glow: rgba(0, 224, 255, 0.7); --cal-planned-abroad-bg: rgba(0, 224, 255, 0.10); --cal-planned-abroad-stripe: rgba(0, 224, 255, 0.45); --cal-planned-abroad-fg: #c7eef7; --cal-uk-bg: rgba(140, 200, 230, 0.06); --cal-uk-fg: var(--text-soft); --cal-planned-uk-bg: transparent; --cal-planned-uk-fg: var(--text-muted); --cal-pinned-bg: rgba(255, 184, 77, 0.28); --cal-pinned-stripe: rgba(255, 184, 77, 0.55); --cal-pinned-fg: #ffe2a3; --cal-fail-fg: var(--fail); --cal-fail-ring: var(--fail); --cal-today-ring: var(--accent); /* Cell-corner Non-SED badge (ITP-043). Marks days where the recorded midnight position means the day doesn't qualify for SED — whether UK midnight inside an abroad voyage, or a confirmed 5-day-rule installation. Same visual for both; the underlying 'kind' lives in JS state for routing. Slate background, light text — reads as informational rather than warning, since the customer's already made the decision that put it there. */ --cal-badge-bg: rgba(140, 160, 185, 0.92); --cal-badge-fg: #0a1220; /* Type families */ --mono: 'JetBrains Mono', 'SF Mono', Menlo, ui-monospace, monospace; --display: 'Space Grotesk', 'JetBrains Mono', system-ui, sans-serif; --sans: -apple-system, BlinkMacSystemFont, 'SF Pro Text', 'Inter', system-ui, sans-serif; /* Layout */ --r-sm: 6px; --r-md: 10px; --r-lg: 14px; --r-xl: 20px; /* Safe areas */ --sa-top: env(safe-area-inset-top, 0px); --sa-bot: env(safe-area-inset-bottom, 0px); } /* Light theme — applied via [data-theme="light"] on . Same semantic tokens, lighter values. */ :root[data-theme="light"] { --bg-deepest: #f4f6fa; --bg-base: #ffffff; --bg-raised: #f1f4f9; --bg-elevated: #e7ecf3; --bg-overlay: rgba(255, 255, 255, 0.92); --line: rgba(20, 50, 80, 0.10); --line-strong: rgba(20, 50, 80, 0.20); --line-glow: rgba(0, 130, 170, 0.35); --text: #0e1a2c; --text-soft: #2d3e54; --text-muted: #5b6f86; --text-faint: #8a99ae; --accent: #0080a8; --accent-glow: #0098c4; --accent-deep: #004458; --accent-faint: rgba(0, 128, 168, 0.10); --signal: #d68a14; --signal-glow: #b87000; --signal-faint: rgba(214, 138, 20, 0.12); --pass: #00a050; --pass-glow: #00803a; --fail: #d63658; --fail-glow: #b51e3e; --cal-past-abroad-bg: rgba(34, 139, 90, 0.28); --cal-past-abroad-fg: #155f3d; --cal-active-bg: rgba(0, 128, 168, 0.32); --cal-active-fg: #003c52; --cal-active-glow: rgba(0, 128, 168, 0.6); --cal-planned-abroad-bg: rgba(0, 128, 168, 0.08); --cal-planned-abroad-stripe: rgba(0, 128, 168, 0.45); --cal-planned-abroad-fg: #0e3e54; --cal-uk-bg: rgba(20, 50, 80, 0.04); --cal-uk-fg: var(--text-soft); --cal-planned-uk-bg: transparent; --cal-planned-uk-fg: var(--text-muted); --cal-pinned-bg: rgba(214, 138, 20, 0.28); --cal-pinned-stripe: rgba(214, 138, 20, 0.55); --cal-pinned-fg: #5c3800; --cal-fail-fg: var(--fail); --cal-fail-ring: var(--fail); --cal-today-ring: var(--accent); } * { box-sizing: border-box; } html, body { margin: 0; padding: 0; background: var(--bg-deepest); color: var(--text); font-family: var(--sans); font-size: 16px; line-height: 1.5; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; overscroll-behavior-y: contain; } body { min-height: 100vh; min-height: 100dvh; display: flex; flex-direction: column; background: radial-gradient(circle at 20% 0%, rgba(0, 224, 255, 0.06), transparent 50%), radial-gradient(circle at 80% 100%, rgba(0, 184, 212, 0.04), transparent 50%), var(--bg-deepest); } button { font-family: inherit; font-size: inherit; cursor: pointer; border: none; background: none; color: inherit; padding: 0; } input, select, textarea { font-family: inherit; font-size: inherit; color: var(--text); background: transparent; } a { color: var(--accent); text-decoration: none; } h1, h2, h3, h4 { font-family: var(--display); font-weight: 500; letter-spacing: -0.01em; margin: 0; color: var(--text); } h1 { font-size: 1.75rem; line-height: 1.1; } h2 { font-size: 1.35rem; line-height: 1.2; } h3 { font-size: 1.1rem; line-height: 1.25; } h4 { font-size: 0.95rem; line-height: 1.3; } .mono { font-family: var(--mono); } .display { font-family: var(--display); } .muted { color: var(--text-muted); } .faint { color: var(--text-faint); } .tiny { font-size: 0.7rem; } .small { font-size: 0.85rem; } .center { text-align: center; } .uppercase { text-transform: uppercase; letter-spacing: 0.12em; } .label { font-family: var(--mono); font-size: 0.7rem; letter-spacing: 0.16em; text-transform: uppercase; color: var(--text-muted); font-weight: 500; }