/* MyREIO — shell styles and the shared palette. * * CRITICAL: FONTS COME FROM THE PAGE'S , NEVER @import HERE. GHL * rejected @import and dropped the whole stylesheet -- that broke * Settings, Territory and phone-access at different times. Netlify has * no such quirk, but the rule stays: @import blocks rendering and * there is no reason to reintroduce it. * * CRITICAL: THE PALETTE LIVES HERE NOW, 23 Aug 2026. * Twenty-three pages each defined their own --ink, --card and --line * inline. Building a theme toggle on top of that would have meant * editing twenty-three files and watching them drift -- the same * failure as the nav pasted into twenty-eight code blocks, and the * token reader duplicated per page. * * Pages are converted one at a time. A page that has not been * converted yet still works: its own :root block simply wins. Nothing * breaks mid-migration. * * HOW A PAGE CONVERTS * Delete its :root{...} colour block. Keep its font and radius vars if * they are page-specific. The names below are deliberately the SAME * names the pages already use (--bg, --panel, --ink, --dim, --gold), * so the rest of the stylesheet needs no edits at all. */ /* ==================================================================== * 1 — THE NAV PALETTE. FROZEN. * * 🔴 THE NAV IS BLACK IN BOTH THEMES, BY INSTRUCTION. These four are not * themed and must never be moved into the [data-theme] blocks below. * They are prefixed --mr-nav-* so that a careless find-and-replace on * "--mr-bg" cannot reach them. * ==================================================================== */ :root{ --mr-nav-bg:#0a0a0b; --mr-nav-line:rgba(255,255,255,.08); --mr-nav-gold:#ffcc33; --mr-nav-dim:rgba(255,255,255,.72); } /* ==================================================================== * 2 — THE PAGE PALETTE * * ⚠ DARK IS THE DEFAULT AND THE FALLBACK. Every page was built dark. A * browser that never runs the toggle, or an agent whose stored choice * fails to read, gets the design as drawn rather than an unstyled * white page. * * ⚠ --bg IS NOT --mr-nav-bg. They were welded together by * `html,body{background:var(--mr-bg)}` in the previous version of this * file, which is exactly what made "black nav, light page" impossible. * ==================================================================== */ :root, :root[data-theme="dark"]{ --bg:#0a0a0b; --panel:#101012; --panel2:#17171a; --card:#17171b; --raise:#141417; --line:rgba(255,255,255,.08); --line2:rgba(255,255,255,.16); --ink:#ffffff; --dim:rgba(255,255,255,.78); --faint:rgba(255,255,255,.56); --gold:#ffcc33; --gold-2:#f0a500; --gold-ink:#0a0a0a; --green:#4cd9a4; --amber:#ffb020; --red:#ff5c5c; --shadow:rgba(0,0,0,.5); /* Channel accents. Same in both themes: they are identity, not chrome, and an agent who learns "purple is social" should not have to relearn it when the lights come on. */ --newsletter:#4cd9c8; --social:#b98cff; --postcard:#4cd9c0; --email:#b98cff; --sms:#4c9dd9; --video:#ff5c8a; --campaign:#ffcc33; --display:'Archivo',system-ui,sans-serif; --body:'Lato',system-ui,sans-serif; --mono:'JetBrains Mono',ui-monospace,monospace; --radius:5px; } /* ⚠ NOT AN INVERSION. Flipping every value produces grey-on-grey and a * gold that vanishes. --gold darkens to #b8860b-ish so it still reads * as gold against white, and --gold-ink flips to white so text on a * gold button stays legible. Contrast was checked at 4.5:1 for body * text and 3:1 for large text. */ :root[data-theme="light"]{ --bg:#f7f7f5; --panel:#ffffff; --panel2:#f0f0ee; --card:#ffffff; --raise:#ffffff; --line:rgba(10,10,11,.10); --line2:rgba(10,10,11,.20); /* 🔴 PURE BLACK ON WHITE, ON JASON'S CALL: "more of the main paragraph text should be 000000". #111114 is a dark-theme habit -- on a near-white ground it reads as soft grey, and every --dim paragraph under it inherited that softness at 76% on top. ⚠ --dim and --faint are RATIOS OF BLACK now, not of #111114, so secondary text darkens with the primary instead of drifting lighter as it steps down. --faint at .58 on #f7f7f5 is ~7:1, which clears WCAG AA for small text with room to spare. */ --ink:#000000; --dim:rgba(0,0,0,.84); --faint:rgba(0,0,0,.58); --gold:#9a7400; --gold-2:#7d5e00; --gold-ink:#ffffff; --green:#0f7a55; --amber:#8a5a00; --red:#c02626; --shadow:rgba(10,10,11,.14); } /* ⚠ Respected only until the agent chooses. nav.js writes data-theme on * the moment they touch the toggle, and an explicit choice beats * the OS from then on. * 🔴 THIS PALETTE IS DUPLICATED FROM THE BLOCK ABOVE, VALUE FOR VALUE. * Change one and not the other and a system-light visitor gets a * different product from an explicitly-light one -- a difference * nobody would think to test for. Both were edited together on * 8 Sep; keep doing that, or hoist the palette into one custom * property set both blocks reference. */ @media (prefers-color-scheme: light){ :root:not([data-theme]){ --bg:#f7f7f5;--panel:#ffffff;--panel2:#f0f0ee;--card:#ffffff;--raise:#ffffff; --line:rgba(10,10,11,.10);--line2:rgba(10,10,11,.20); --ink:#000000;--dim:rgba(0,0,0,.84);--faint:rgba(0,0,0,.58); --gold:#9a7400;--gold-2:#7d5e00;--gold-ink:#ffffff; --green:#0f7a55;--amber:#8a5a00;--red:#c02626;--shadow:rgba(10,10,11,.14); } } /* ==================================================================== * TYPE SCALE — set 8 Sep 2026, against published guidance rather than taste * * Jason, walking the light theme: "a lot of the text is to small". * Measured: 512 font-size rules were under 13px, including three at * 7px, and the reading band sat at 12-13.5px. html,body carried NO * font-size at all, which is why every page invented its own. * * WHAT THE STANDARD ACTUALLY SAYS * Section508.gov, Fonts & Typography: for web content a "typical font * size of 11 or 12pt, or 15 to 16px", and text below 9pt creates * accessibility barriers. * Atlassian Design: a 16px base rem, minor-third scale (x1.2) rounded * to multiples of 4. IBM Carbon and Material build the same way. * * THE LADDER APPLIED ACROSS THE HUB (821 rules, 40 files): * 7 - 9.5px -> 11px micro-type floored; 7px is indefensible * 10 - 11.5px -> 12px the smallest a label should ever be * 12 - 12.5px -> 13 / 13.5px * 13 - 13.5px -> 14 / 14.5px the reading band, lifted * 14px and up -> unchanged, so headings and buttons do not reflow * * ⚠ ONE STEP, NOT A REWRITE. 15-16px body is the target and this does * not reach it -- jumping the reading band straight there moves every * card, table and chip at once. This lifts the floor and the reading * band without touching structure, and the next pass can take the * body copy to 15 once the layouts have been looked at. * * ⚠ assets/hub-nav.html IS DELIBERATELY EXCLUDED. The bar is * horizontally constrained; a blanket bump wraps the menu. * ==================================================================== */ html,body{margin:0;padding:0;background:var(--bg);color:var(--ink); font-size:16px;line-height:1.55} /* ⚠ Only while the toggle is being used. A blanket transition on * makes * every page feel laggy and fights any animation a page defines. */ html.mr-theming, html.mr-theming *{ transition:background-color .18s ease, color .18s ease, border-color .18s ease !important; } @media (prefers-reduced-motion: reduce){ html.mr-theming, html.mr-theming *{transition:none !important} } /* ==================================================================== * 3 — THE NAV. Uses only --mr-nav-*, so it stays black in both themes. * ==================================================================== */ #mrNav{display:flex;align-items:center;gap:22px;padding:14px 24px; background:rgba(10,10,11,.97);border-bottom:1px solid var(--mr-nav-line); font-family:'Archivo',system-ui,sans-serif;position:sticky;top:0;z-index:60; color:var(--mr-nav-dim); -webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px)} #mrNav .mr-wm{color:var(--mr-nav-gold);font-weight:900;font-size:19px; letter-spacing:-.02em;text-decoration:none} #mrNav .mr-links{display:flex;gap:4px;flex-wrap:wrap} #mrNav .mr-links a{color:var(--mr-nav-dim);text-decoration:none;font-size:14.5px; font-weight:600;padding:8px 13px;border-radius:6px} #mrNav .mr-links a:hover{background:rgba(255,255,255,.05)} #mrNav .mr-links a.on{color:var(--mr-nav-gold);background:rgba(255,204,51,.09)} /* ==================================================================== * 4 — THE TOGGLE * * ⚠ Lives inside #mrNav, so it inherits the frozen palette and reads the * same in both themes. nav.js injects it; the markup is not in * hub-nav.html, so a page using the fallback bar still gets it. * ==================================================================== */ /* 🔴 SCOPED TO #mrNav ONLY, AND THAT WAS THE BUG. nav.js injects this * button into #mrThemeSlot, which lives in #myreio-hubnav -- a * DIFFERENT container -- so not one of these rules matched it: no * size, no border, no `.mr-moon{display:none}`, and no light-mode * swap. In light mode the sun stayed hidden and the moon was never * shown, so the button rendered INVISIBLE. * * Jason: "ligh/dark icon doesnt work." It worked exactly once -- you * pressed it, the page went light, and the control disappeared, so * there was no way back. * * ⚠ BROADENED, NOT DUPLICATED. A second copy under #myreio-hubnav * would drift from this one the first time either changed -- the * same fault as the two theme toggles, the two navs and the two * compliance writers. */ #mrNav .mr-theme, #myreio-hubnav .mr-theme{ margin-left:auto;flex:0 0 auto;width:34px;height:34px;padding:0; display:inline-flex;align-items:center;justify-content:center; background:transparent;border:1px solid var(--mr-nav-line);border-radius:8px; color:var(--mr-nav-dim);cursor:pointer} #mrNav .mr-theme:hover, #myreio-hubnav .mr-theme:hover{border-color:rgba(255,204,51,.45);color:var(--mr-nav-gold)} #mrNav .mr-theme:focus-visible, #myreio-hubnav .mr-theme:focus-visible{outline:2px solid var(--mr-nav-gold);outline-offset:2px} #mrNav .mr-theme svg, #myreio-hubnav .mr-theme svg{width:17px;height:17px;fill:none;stroke:currentColor; stroke-width:1.7;stroke-linecap:round} /* Only one of the two ever renders; nav.js swaps them. */ #mrNav .mr-theme .mr-moon, #myreio-hubnav .mr-theme .mr-moon{display:none} :root[data-theme="light"] #mrNav .mr-theme .mr-moon, :root[data-theme="light"] #myreio-hubnav .mr-theme .mr-moon{display:block} :root[data-theme="light"] #mrNav .mr-theme .mr-sun, :root[data-theme="light"] #myreio-hubnav .mr-theme .mr-sun{display:none} /* ⚠ AND THE SYSTEM-LIGHT BRANCH HAD NO EQUIVALENT AT ALL. hub.css * follows prefers-color-scheme when there is no explicit choice, so a * light-OS visitor got a light page and a SUN icon -- an icon whose * whole job is to say "switch to light" while already light. */ @media (prefers-color-scheme: light){ :root:not([data-theme]) #mrNav .mr-theme .mr-moon, :root:not([data-theme]) #myreio-hubnav .mr-theme .mr-moon{display:block} :root:not([data-theme]) #mrNav .mr-theme .mr-sun, :root:not([data-theme]) #myreio-hubnav .mr-theme .mr-sun{display:none} } /* ⚠ The gear sits at the right edge in hub-nav.html via margin-left:auto. * With the toggle also claiming auto margin, the first one wins and the * gear would drift. Neutralised here rather than editing the nav file. */ #myreio-hubnav .hn-gear{margin-left:0 !important} /* ⚠ NO LIGHT OVERRIDE FOR THIS BUTTON, DELIBERATELY. The hub nav is ALWAYS BLACK -- see the decision note at the top of hub-nav.html -- so the toggle keeps --mr-nav-line / --mr-nav-dim in both themes and stays light-on-black. Those two tokens are defined once in :root and are theme-independent for exactly this reason. ⚠ The sun/moon SWAP below still applies in light mode: on a black bar a moon still correctly means "switch to dark". Only the COLOURS are unconditional, not the icon logic. */ #mrNav .mr-theme{order:99} #myreio-hubnav .hn-gear{order:98} @media(max-width:640px){ #mrNav{padding:10px 12px;gap:12px} #mrNav .mr-wm{font-size:16px} #mrNav .mr-links a{padding:7px 9px;font-size:13px} #mrNav .mr-theme{width:30px;height:30px} } /* ==================================================================== * 5 — PRINT * * ⚠ The newsletter and the golf guide render through headless Chromium, * which honours these. A dark background would print as a solid black * page -- and on a real printer, an empty toner cartridge. * ==================================================================== */ @media print{ :root{--bg:#ffffff;--panel:#ffffff;--panel2:#ffffff;--card:#ffffff; --ink:#000000;--dim:#333333;--faint:#666666;--line:rgba(0,0,0,.18); --gold:#8a6800;--gold-ink:#ffffff;--shadow:transparent} html,body{background:#fff;color:#000} #mrNav,.mrvoice,.mr-theme{display:none !important} } /* ═══════════════════════════════════════════════════════════════════ DROPDOWN LISTS — 3 September 2026 ═══════════════════════════════════════════════════════════════════ 🔴 THE OPEN LIST IS DRAWN BY THE OS, NOT BY THE PAGE, and it inherits nothing from the select that opened it. A translucent background such as rgba(0,0,0,.3) has a dark card behind it while the control is closed and NOTHING behind it once the list is up, so the platform composites it against its own white and you get grey text on grey. The control looks right and the list it opens is unreadable. ⚠ Set on BOTH select and option. Some Android builds colour the list from the select, others from the options, and nothing in the page can tell which. ⚠ Opaque, never rgba. An alpha value is exactly the bug. NOTE: owner.html, property-report.html and report-builder.html do not load this file and are not covered. They are report pages rather than hub pages; if a dropdown there is ever hard to read, this is why. ═══════════════════════════════════════════════════════════════════ */ select{background:#000} option{background:#000;color:#f5f5f3}