/* * simple-mode.css — class-based jargon/plain swaps. * * Pairs with /js/simple-mode.js. When body.simple-mode is on, the * [data-jargon] elements hide and [data-plain] elements show; when * it's off, the opposite. This lets static HTML express both versions * inline without JS having to walk the DOM: * * Net W:LWin vs Loss * * Both elements are part of the document; CSS hides one or the other * based on the global flag. This avoids layout shift on toggle (the * adjacent element fills the same space) and survives partial JS * disablement gracefully — without JS, jargon shows by default. * * For dynamic content built by JS (Trade Recs cards, etc.), use the * window.PL.term() helper at render time instead — it returns the * right string based on PL.isSimple() and saves the cost of building * both into the DOM. * * Linked from every HTML page in AFTER mobile.css: * */ /* ── Default: jargon visible, plain hidden ────────────────────────── */ [data-plain] { display: none; } /* ── Simple mode active: swap visibility ─────────────────────────── */ .simple-mode [data-jargon] { display: none; } .simple-mode [data-plain] { display: revert; /* fall back to whatever the element's natural display is (inline for , block for
, etc.) — since we hid it above with `display: none`, revert restores it. */ } /* ── Optional helper: dim-jargon mode ────────────────────────────── * Some surfaces want to keep jargon visible but ALSO show a plain * gloss next to it (the educational pattern). Add data-gloss to the * plain element and it'll always show in simple mode, alongside the * jargon, with a softer treatment. * * RSI(overbought meter) * * When simple mode is OFF, the gloss hides; when ON, both show. */ [data-gloss] { display: none; } .simple-mode [data-gloss] { display: inline; color: var(--muted); font-size: 0.92em; margin-left: 4px; font-style: italic; } /* ── Simple-mode toggle pill (used in topnav + /account) ────────── * The pill itself is a button with [data-simple-toggle]. Visual * state mirrors aria-pressed which the JS keeps in sync. */ .simple-mode-pill { display: inline-flex; align-items: center; gap: 5px; padding: 3px 9px; border-radius: 11px; background: rgba(86, 95, 137, 0.18); color: #c0caf5; border: 1px solid var(--border, #292e42); font-size: 10.5px; font-weight: 600; letter-spacing: 0.5px; cursor: pointer; font-family: inherit; transition: background 0.12s, color 0.12s, border-color 0.12s; user-select: none; } .simple-mode-pill:hover { background: rgba(122, 162, 247, 0.18); color: #ffffff; } .simple-mode-pill[aria-pressed="true"] { background: rgba(158, 206, 106, 0.20); color: #9ece6a; border-color: rgba(158, 206, 106, 0.40); } .simple-mode-pill[aria-pressed="true"]:hover { background: rgba(158, 206, 106, 0.28); } .simple-mode-pill .smp-dot { width: 7px; height: 7px; border-radius: 50%; background: #565f89; transition: background 0.12s; } .simple-mode-pill[aria-pressed="true"] .smp-dot { background: #9ece6a; } /* ── Page-specific simple-mode behaviors ────────────────────────── * These rules express "what changes when simple mode is on" for * specific surfaces — usually hiding the most jargon-dense rows * (raw bps numbers, technical labels) and letting plainer-language * elements take their place. */ /* Trade ladder sizing-status fees note — hide the "10bps" detail in * simple mode, the strip is dense enough as-is. */ .simple-mode .trade-ladder-sizing-status .tlss-fees { display: none; } .simple-mode .trade-ladder-sizing-status .tlss-sep:nth-of-type(2) { display: none; } /* Mobile stacking — at narrow widths, the data-gloss inline form * can crowd. Drop to muted-italic block on phones. */ @media (max-width: 480px) { .simple-mode [data-gloss] { display: block; margin-left: 0; margin-top: 1px; } }