/* * brand.css — E & J W Glendinning Ltd * Light mode (default) + Dark mode via [data-theme="dark"] on */ @import url('https://fonts.googleapis.com/css2?family=Lato:wght@400;700;900&family=Merriweather:wght@700&display=swap'); /* ══════════════════════════════════════════ LIGHT MODE (default) ══════════════════════════════════════════ */ :root { --cream: #f8e9d9; --cream-dark: #f0ddc8; --stone: #e8d5c0; --navy: #1c2b39; --navy-light: #2c3e50; --rust: #c8622a; --rust-hover: #b05520; --rust-light: rgba(200, 98, 42, 0.1); --rust-border: rgba(200, 98, 42, 0.3); /* --rust-text: brand orange tuned for use as TEXT (foreground) so it clears WCAG AA on light surfaces (#a85018 = 5.5:1 on white). The plain --rust (#c8622a, 4.0:1 on white) is reserved for fills, borders and large/decorative accents. Dark mode lightens this. */ --rust-text: #a85018; /* --rust-strong: darker orange for solid fills that carry WHITE text (primary buttons). White on #b8571f = 4.75:1; white on plain --rust was only 4.0:1. Same value works in both themes. */ --rust-strong: #b8571f; --white: #ffffff; --bg: #f2e8da; --bg-page: #ede0ce; --border: #d8c8b4; --border-focus: #c8622a; --surface: #ffffff; --surface-2: #f8e9d9; --text-primary: #1c2b39; --text-secondary: #4a5f70; --text-muted: #5f7080; /* was #8a9baa (2.9:1) → 5.1:1 on white */ --success: #2d7a4f; --success-bg: #e8f5ee; --danger: #c0392b; --danger-bg: #fdf0ef; --info: #2471a3; --warn: #8f5300; /* was #c07000 (3.8:1) → 6.2:1 on white as text */ --warn-bg: #fff4e6; --font-body: 'Lato', sans-serif; --font-serif: 'Merriweather', serif; --radius-sm: 4px; --radius: 6px; --radius-lg: 10px; --shadow-sm: 0 1px 3px rgba(28,43,57,0.08); --shadow: 0 2px 8px rgba(28,43,57,0.12); --shadow-lg: 0 4px 20px rgba(28,43,57,0.15); --transition: 0.15s ease; /* legacy aliases */ --orange: #c8622a; --orange-dim: #b05520; --panel: var(--cream); --text: var(--text-primary); --muted: var(--text-muted); --low: var(--danger); --ok: var(--success); } /* ══════════════════════════════════════════ DARK MODE Applied by: Selector is html[data-theme="dark"] — NOT a bare [data-theme="dark"]. Several module stylesheets (workorders/styles.css, etc.) ship their OWN :root palette and load AFTER brand.css. A bare [data-theme] attribute selector ties :root on specificity (both 0,1,0), so those later :root blocks would win by source order and revert tokens to their LIGHT values in dark mode — producing a broken mixed palette (dark --surface but light --text-primary). Qualifying with `html` raises this to 0,1,1 so the dark palette authoritatively wins. ══════════════════════════════════════════ */ html[data-theme="dark"] { --cream: #1e2d3d; --cream-dark: #172435; --stone: #243447; --navy: #e8d5c0; --navy-light: #d4bfa8; --white: #1a2738; --bg: #152030; --bg-page: #111c28; --border: #44607b; /* was #2a3d52 (1.4:1, near-invisible) → 2.2:1 */ --border-focus: #c8622a; --surface: #1a2738; --surface-2: #1e2d3d; --text-primary: #e8d5c0; --text-secondary: #a0b4c4; --text-muted: #90a0b2; /* was #607080 (3.0:1) → 5.7:1 on surface */ /* rust tuned lighter for TEXT on dark surfaces: #e08a4a = 5.7:1 (plain --rust #c8622a was only 3.8:1). Fills still use --rust. */ --rust-text: #e08a4a; --success: #4caf7d; --success-bg: #0d2a1a; --danger: #ec6e6e; /* was #e05555 (4.0:1) → 5.1:1 on surface */ --danger-bg: #2a0d0d; --info: #5ba8d4; --warn: #d4980a; --warn-bg: #1e1800; --shadow-sm: 0 1px 3px rgba(0,0,0,0.4); --shadow: 0 2px 8px rgba(0,0,0,0.5); --shadow-lg: 0 4px 20px rgba(0,0,0,0.6); --panel: var(--cream); --text: var(--text-primary); --muted: var(--text-muted); --low: var(--danger); --ok: var(--success); color-scheme: dark; } /* ══════════════════════════════════════════ RESET ══════════════════════════════════════════ */ *, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; } html { /* Hint native UI (form controls, scrollbars, spell-check) to match the active theme. Driven by data-theme so it tracks our toggle, not just the OS setting. */ color-scheme: light; height: 100%; /* overflow-x: hidden swallows any accidental wide child (e.g. the header at narrow widths before the hamburger kicks in) so the page never gains a horizontal scrollbar on mobile. */ overflow-x: hidden; } body { font-family: var(--font-body); font-size: 14px; color: var(--text-primary); background: var(--bg-page); /* 100dvh tracks the visible viewport on iOS Safari (excluding the dynamic URL bar). 100vh fallback for older engines. Without dvh you get a small dead-scroll strip below the footer on mobile. */ min-height: 100vh; min-height: 100dvh; transition: background-color .2s ease, color .2s ease; /* container-type: inline-size makes the named "page" container so layout rules can react to body width via @container queries. This is how html.force-mobile (which clamps body to 390px) makes mobile layouts fire on a desktop browser without touching the real viewport. All mobile-specific rules in this file live in @container page (max-width: 768px) {} blocks. */ container-type: inline-size; container-name: page; } /* ══════════════════════════════════════════ WATERMARK The Optix logo, faint and fixed-centred, behind the page content. It's a full-viewport fixed overlay at z-index:100 — ABOVE in-flow content but below the header (200) and all modals/overlays (900+) — rather than behind content (z-index:-1), because most pages fill the viewport with opaque `--bg-page` panels that would otherwise hide it entirely. At 5% it reads as a gentle brand mark over normal content without hurting legibility. pointer-events:none so it never intercepts clicks. The asset is a white-knockout transparent PNG (optix-watermark.png) from Optix_Logo.png. Exception — document previews: a PDF shown in an