/* CrewThat — theme tokens for dark & light modes. The `const C = {...}` in each React page resolves its hex strings through these vars, so flipping `data-theme` on re-themes every inline-styled element with no rerender required. */ :root, html[data-theme="dark"] { --ct-bg: #111111; --ct-bg-card: #1a1a1a; --ct-bg-deep: #0d0d0d; --ct-bg-input: #141414; --ct-border: #2a2a2a; --ct-border-hi: #3a3a3a; --ct-red: #cc1f1f; --ct-red-hover: #e02222; --ct-red-dim: #7a1212; --ct-white: #ffffff; --ct-off-white: #e8e8e8; --ct-gray: #888888; --ct-gray-dim: #444444; --ct-green: #2ecc71; --ct-amber: #f39c12; --ct-blue: #3a9ee8; /* shared scrollbar / overlay tones */ --ct-scroll-track: #111111; --ct-scroll-thumb: #333333; --ct-modal-bg: rgba(0, 0, 0, 0.65); color-scheme: dark; } html[data-theme="light"] { --ct-bg: #f5f5f5; --ct-bg-card: #ffffff; --ct-bg-deep: #ececec; --ct-bg-input: #ffffff; --ct-border: #d8d8d8; --ct-border-hi: #bdbdbd; --ct-red: #cc1f1f; --ct-red-hover: #b81818; --ct-red-dim: #f4d4d4; --ct-white: #ffffff; --ct-off-white: #1a1a1a; --ct-gray: #5a5a5a; --ct-gray-dim: #9a9a9a; --ct-green: #1e9a52; --ct-amber: #c47600; --ct-blue: #1c6ec0; --ct-scroll-track: #ececec; --ct-scroll-thumb: #bdbdbd; --ct-modal-bg: rgba(20, 20, 20, 0.55); color-scheme: light; } /* ─────────────────────────────────────────────────────────────────────── "Keep dark" scope — wraps an element whose surface must stay dark even in light mode (e.g. search bars, filter tab rows on the punchlist). Re-binds the CSS vars to dark values for the scope and its descendants. ─────────────────────────────────────────────────────────────────────── */ .ct-keep-dark, .ct-keep-dark * { --ct-bg: #111111; --ct-bg-card: #1a1a1a; --ct-bg-deep: #0d0d0d; --ct-bg-input: #141414; --ct-border: #2a2a2a; --ct-border-hi: #3a3a3a; --ct-white: #ffffff; --ct-off-white: #e8e8e8; --ct-gray: #888888; --ct-gray-dim: #aaaaaa; } /* ─────────────────────────────────────────────────────────────────────── Typography boost — bolder + larger text across the site. Body provides the baseline; attribute selectors bump common inline `fontSize: N` brackets used by the React pages (which set sizes in px on the style attribute). The "px" suffix in the matcher avoids matching numbers without units. ─────────────────────────────────────────────────────────────────────── */ body { font-weight: 600; } [style*="font-size: 9px"], [style*="font-size:9px"] { font-size: 11px !important; } [style*="font-size: 10px"], [style*="font-size:10px"] { font-size: 12px !important; } [style*="font-size: 11px"], [style*="font-size:11px"] { font-size: 13px !important; } [style*="font-size: 12px"], [style*="font-size:12px"] { font-size: 14px !important; } [style*="font-size: 13px"], [style*="font-size:13px"] { font-size: 15px !important; } [style*="font-size: 14px"], [style*="font-size:14px"] { font-size: 16px !important; } [style*="font-size: 15px"], [style*="font-size:15px"] { font-size: 17px !important; } [style*="font-size: 16px"], [style*="font-size:16px"] { font-size: 18px !important; } /* Same idea for inline fontSize values WITHOUT units (React serializes `fontSize: 13` as `font-size: 13px`, but some libraries omit). */ [style*="font-weight: 400"], [style*="font-weight:400"], [style*="font-weight: 500"], [style*="font-weight:500"] { font-weight: 600 !important; } /* Inputs / textareas / selects often inherit size from the page font-family but reset their own weight — push them to match the global bolder body. */ input, textarea, select { font-weight: 600; } /* Print stays at native sizes to preserve PDF layout. */ @media print { body { font-weight: normal; } [style*="font-size"] { font-size: revert !important; } } /* ─────────────────────────────────────────────────────────────────────── Default-zoom horizontal scroll lock. At normal zoom the page should never scroll left/right — only when the user actively zooms in does the browser surface a horizontal scrollbar (browser-level zoom bypasses `overflow-x: hidden` once the rendered viewport gets narrower than the layout, so this stays user-friendly). ─────────────────────────────────────────────────────────────────────── */ html, body { overflow-x: hidden; max-width: 100vw; } /* Don't let any descendant push the body wider than the viewport. */ body * { max-width: 100%; } /* …but allow common elements that legitimately need to scroll their own content (code blocks, wide tables, horizontal carousels) to keep doing so. */ body pre, body code, body table, body .scroll-x, body [data-scroll-x="true"] { max-width: none; overflow-x: auto; } /* Page chrome — overrides the body styles set inline on each page so the non-React surface (body bg, html bg, scrollbars) also flips. */ html[data-theme="light"] body { background: var(--ct-bg); color: var(--ct-off-white); } html[data-theme="light"] ::-webkit-scrollbar-track { background: var(--ct-scroll-track); } html[data-theme="light"] ::-webkit-scrollbar-thumb { background: var(--ct-scroll-thumb); } html[data-theme="light"] .modal-bg { background: var(--ct-modal-bg) !important; } /* Floating theme toggle. Lifts above the mobile bottom-tabs when they exist (app-shell pages) — otherwise sits at the screen corner. */ .ct-theme-toggle { position: fixed; bottom: 16px; right: 16px; z-index: 9999; width: 40px; height: 40px; border-radius: 50%; border: 1px solid var(--ct-border); background: var(--ct-bg-card); color: var(--ct-off-white); cursor: pointer; display: flex; align-items: center; justify-content: center; font-size: 18px; line-height: 1; box-shadow: 0 2px 8px rgba(0, 0, 0, 0.35); transition: background 120ms, border-color 120ms, transform 80ms; } .ct-theme-toggle:hover { border-color: var(--ct-border-hi); } .ct-theme-toggle:active { transform: scale(0.94); } .ct-theme-toggle .ct-theme-icon-light, .ct-theme-toggle .ct-theme-icon-dark { display: none; } html[data-theme="dark"] .ct-theme-toggle .ct-theme-icon-light { display: inline; } html[data-theme="light"] .ct-theme-toggle .ct-theme-icon-dark { display: inline; } /* Default (no data-theme attr) = dark — show the sun icon */ html:not([data-theme]) .ct-theme-toggle .ct-theme-icon-light { display: inline; } /* When bottom-tabs exist (app-shell pages on mobile), lift the toggle. */ @media (max-width: 880px) { .ct-theme-toggle { bottom: calc(var(--bottom-tabs-h, 64px) + 12px); } }