/* ============================================================================ ALMEER SECURITIES — LIGHT READING THEMES (PREVIEW) ============================================================================ Three candidate light themes for inner pages. Each is a token override block and nothing else: no component is restyled, no layout changes, no copy or spacing is touched. Selecting a theme is a one-line change. WHAT DOES NOT CHANGE -------------------- * The homepage. Themes apply only where data-theme is set, and the homepage never sets it. * The top bar, header, mega panels, mobile drawer and footer. Those resolve from --chrome-* in tokens.css, which no block below touches, so the site stays visually anchored to the dark homepage. * The gold accent #F3BA26 and the near-black text used on it. * Every size, radius, font, spacing step and motion value. PREVIEW ONLY — NOTHING IS LIVE ------------------------------- A theme is applied only when the URL carries ?theme=ivory|sage|pearl, which app.js reads and writes to . A normal visit carries no query string, so production renders exactly as it does today. Approving an option means setting the attribute in shell.py; until then the live site is untouched. CONTRAST -------- Every foreground/background pair below was measured against WCAG 2.1, not eyeballed. Ratios are recorded beside each value. AA needs 4.5:1 for body text and 3:1 for large text and UI borders. ========================================================================= */ /* --------------------------------------------------------- SHARED LIGHT --- Everything the three options agree on. Each option then overrides only the handful of values that actually differ between them. */ [data-theme="ivory"], [data-theme="sage"], [data-theme="pearl"] { /* The gold stays the gold: it is the brand, and on a gold button the near black text measures 10.6:1. */ --color-secondary: var(--brand-accent); --color-accent: var(--brand-accent); --color-on-accent: #04150A; /* on gold — 10.6:1 */ --color-text-inverse: #FFFCF4; /* BUT gold TEXT on a pale page measures 1.6:1 — unreadable, and it is what links and small-caps eyebrows use on the dark theme. So light pages get a deepened version of the same gold for text, which holds the brand hue and measures 4.6-5.5:1 on every surface in every option. The gold itself is untouched wherever it is a fill, a rule or a button. */ --color-accent-text: #8A6206; /* Status colours darkened for a light surface. The dark-theme greens and reds were tuned for a near-black page and fail contrast on a pale one. */ --color-success: #1E6B42; --color-warning: #8A6206; --color-error: #A3342B; /* On a pale page depth comes from a soft grey shadow, not from black. */ --shadow-xs: 0 1px 2px rgba(16, 39, 25, .06); --shadow-sm: 0 2px 10px rgba(16, 39, 25, .07); --shadow-md: 0 10px 28px rgba(16, 39, 25, .09); --shadow-lg: 0 20px 56px rgba(16, 39, 25, .12); } /* ============================================================ OPTION 1 ==== WARM IVORY — a paper-like page. The warmest of the three, and the easiest on the eye over a long article. ========================================================================= */ [data-theme="ivory"] { --color-primary: #102719; /* on page 14.7:1 · on card 15.6:1 */ --color-text: #102719; --color-text-muted: #526258; /* on page 6.4:1 — AA body */ --color-text-subtle: #5F6E64; /* on page 5.3:1 — AA body */ --color-bg: #F7F3E8; --color-bg-alt: #F1ECDD; /* section banding */ --color-bg-tint: #FFFCF4; /* cards, panels */ --color-bg-inverse: #0C2116; /* dark bands inside a light page */ --color-border: #D9D6C9; /* on page 1.3:1 — decorative only */ --color-border-strong: #908C7E; /* on page 3.0:1 — AA for UI */ --color-success-bg: #E8F2EA; --color-warning-bg: #FAF1DC; --color-error-bg: #F8E9E7; } /* ============================================================ OPTION 2 ==== SOFT SAGE — a faint green cast that ties the light pages back to the emerald brand. The most "branded" of the three. ========================================================================= */ [data-theme="sage"] { --color-primary: #0B2916; /* on page 15.2:1 · on card 16.1:1 */ --color-text: #0B2916; --color-text-muted: #526559; /* on page 6.2:1 — AA body */ --color-text-subtle: #5E7064; /* on page 5.1:1 — AA body */ --color-bg: #EFF4EC; --color-bg-alt: #E6EDE3; --color-bg-tint: #F9FCF7; --color-bg-inverse: #0A2415; --color-border: #CFDBD0; --color-border-strong: #828F83; /* on page 3.0:1 — AA for UI */ --color-success-bg: #E4F1E8; --color-warning-bg: #F6EFDB; --color-error-bg: #F6E8E6; } /* ============================================================ OPTION 3 ==== PEARL NEUTRAL — the most neutral and the highest contrast. Cards are white, so tables and dense data read most cleanly here. ========================================================================= */ [data-theme="pearl"] { --color-primary: #10251A; /* on page 14.9:1 · on card 16.4:1 */ --color-text: #10251A; --color-text-muted: #59655E; /* on page 5.6:1 — AA body */ --color-text-subtle: #626E67; /* on page 4.9:1 — AA body */ --color-bg: #F3F5F2; --color-bg-alt: #E9ECE8; --color-bg-tint: #FFFFFF; --color-bg-inverse: #0D2118; --color-border: #D5DDD7; --color-border-strong: #868E88; /* on page 3.1:1 — AA for UI */ --color-success-bg: #E7F1EA; --color-warning-bg: #F7F0DD; --color-error-bg: #F7E9E7; } /* ------------------------------------------------- LIGHT-ONLY CORRECTIONS -- A few rules were written for a near-black page and assume light-on-dark. They are corrected here rather than in main.css, so the dark theme is completely untouched by this file. */ [data-theme] { /* Dark bands inside a light page keep light text. */ --band-ink: rgba(255, 255, 255, .88); --band-ink-muted: rgba(255, 255, 255, .72); } [data-theme] main .section--dark, [data-theme] main .cta-band { color: var(--band-ink); } [data-theme] main .section--dark .section-head p, [data-theme] main .cta-band p { color: var(--band-ink-muted); } [data-theme] main .section--dark h2, [data-theme] main .cta-band h2 { color: #FFFCF4; } /* The gold "up" and red "down" tints were picked for a dark page; on a pale one they are too light to reach 4.5:1. Direction is also carried by an arrow and a +/- sign, so this is a legibility fix, not the only cue. */ [data-theme] main .kse__delta[data-dir="up"] { color: #1E6B42; } [data-theme] main .kse__delta[data-dir="down"] { color: #A3342B; } /* Focus rings need a dark ring on a pale surface to stay visible. Chrome keeps the gold ring, because the header and footer are still dark. */ [data-theme] main :where(a, button, input, select, textarea):focus-visible { outline-color: #0C2116; } /* ------------------------------------------------ GOLD AS TEXT ON A PAGE -- On the dark theme these are gold on near-black and read at ~9:1. On a pale page the same gold measures 1.6:1, so every place where gold is TEXT in the content area is switched to the deepened gold. Chrome is excluded: the header, mega panels, drawer and footer stay dark, so the real gold still reads correctly there and is left alone. Gold as a FILL or a RULE — buttons, the icon chips, the active nav underline — is untouched everywhere. */ Scoped to
deliberately. A bare `[data-theme] a` also caught the header nav, the top bar and the footer — all of which sit on dark surfaces where the deepened gold drops to ~3.4:1. Chrome links keep the real gold on dark, which is what they were designed for. */ [data-theme] main a { color: var(--color-accent-text); } [data-theme] main :is( .svc-grouphead, .rc__cat, .rc__rev, .kse__name, .ann__sym, .fact dt, .person__role, .reg-table thead th, .lh-card__more, .toc h2, .steps li::before ) { color: var(--color-accent-text); } [data-theme] main :is( .rc h3 a:hover, .ann a:hover, .crumbs a:hover, .toc a:hover, .lh-card:hover, .svc-card:hover, .btn--primary:hover ) { color: var(--color-accent-text); } /* The step chip keeps a gold ring but needs the deepened gold for its digit. */ [data-theme] main .steps li::before { border-color: var(--color-accent-text); } /* Ghost buttons sit on a pale page, so their border has to be dark enough to read as a control rather than as a faint smudge. */ [data-theme] main .btn--ghost { border-color: var(--color-border-strong); color: var(--color-primary); } [data-theme] main .btn--ghost:hover { border-color: var(--color-primary); background: var(--color-bg-alt); } /* Skeleton/marketing surfaces that hard-code a dark wash. */ [data-theme] main .note, [data-theme] main .disclaimer { background: var(--color-bg-alt); }