/* ============================================================ Rules of Thumb — shared design tokens & theme system Loaded by every page. Defines the palette ONCE, with a dark default and a re-treated light theme. Tools reference these variables; nothing here re-implements tool layout. Theme resolution order: 1. (explicit override, set by rot.js) 2. @media (prefers-color-scheme) (OS/browser preference) 3. dark (designed-for default) ============================================================ */ :root{ /* ---- accents: brand colors, shared across themes ---- */ --amber:#f6b53f; --amber-dim:#c98a25; --cyan:#57c7e8; --cyan-dim:#2c6f86; --violet:#a98bff; --violet-dim:#6e57a8; --green:#6fdba0; --green-dim:#4aa578; --red:#ff6b7d; --pink:#f77bbd; --pink-dim:#a8527e; --indigo:#7f9cf5; --indigo-dim:#4d5fa8; --coral:#ff8a5c; --coral-dim:#c85f37; --teal:#2dd4bf; --teal-dim:#1f9c8c; --azure:#4d94ff; --azure-dim:#2f6bc4; --lime:#a3e635; --lime-dim:#6b9a1f; /* ---- DARK THEME (default) — the instrument-blueprint look ---- */ --ink:#0a111e; --ink-2:#0e1830; --panel:#122140; --panel-2:#16264a; --line:#24365e; --line-soft:#1b2c4f; /* --muted-2 was #6b7fa6, tuned against --ink where it passed at 4.69:1. But the token is used on panels too, and there it fell to 3.96:1 on --panel and 3.70:1 on --panel-2 — below the 4.5:1 AA floor for the small labels and chart axes it is used for. It is now aimed at --panel-2, the worst case, so all four surfaces clear 4.5:1 at once (ink 5.86, panel 4.94, panel-2 4.62, glyph-bg 5.51). --muted moved with it. Raising muted-2 to meet AA closed the lightness gap between the two tokens from 9.8 to 3.3 L*, which is nearly imperceptible — the recessive/secondary hierarchy would have been lost across 1300+ uses. Lifting --muted restores the original step (9.7 L*) and improves its own contrast (6.32:1 worst case, was 5.16). Same hue and saturation on both; only lightness changed. */ --text:#e9f0fb; --muted:#98aac8; --muted-2:#7e90b1; --grid:rgba(120,150,200,.10); --grid-bold:rgba(120,150,200,.20); --grid-paper:rgba(150,180,230,.10); /* background graph paper, v1.72 — LIGHTER than the page, see the note by body::before */ /* atmospheric / structural (previously hardcoded) */ --glyph-bg:#0d1730; /* was #16244a / #d5dff0 - the top-right page glow. Switched OFF (v1.73): on a wide monitor a 1200-1300px radial anchored at 75-80% -10% reads as a distinct orb in the corner rather than as ambient light. It is referenced by 170 pages across three slightly different gradients, so it is killed HERE, at the token - every one of those gradients still exists and goes back to work the moment this is given a colour. */ --bg-rad-1:transparent; --bg-rad-2:transparent; /* off with --bg-rad-1 - despite the old name this one sits TOP-left (-5% 8%), and it is the orb that was left behind when only --bg-rad-1 was switched off. */ --bg-rad-fin:#1c1a3a; /* finance pages lean violet */ --banner-a:#1d1733; --banner-b:#141a30; /* probe/station banner gradient */ /* accent glow strength — strong on dark, softened on light */ --glow:1; --shadow-card:0 14px 30px -18px #000; /* ---- viz / simulator surfaces (SVG hosts, chart plates) ---- */ --viz-bg:var(--ink); --viz-border:var(--line-soft); --viz-axis:var(--muted-2); --viz-grid-line:var(--grid); --viz-label:var(--muted); } /* explicit dark override (when rot.js forces it) keeps defaults */ :root[data-theme="dark"]{ color-scheme:dark; } /* ---- LIGHT THEME ---- */ /* Re-treated rather than inverted: warm off-white instrument surfaces, deepened accents, glows traded for soft shadows. */ :root[data-theme="light"]{ color-scheme:light; --amber:#8d5c14; --amber-dim:#6f470f; --cyan:#1b6f8e; --cyan-dim:#5aa6c0; --violet:#6d4bc4; --violet-dim:#9b85d8; --green:#23744e; --green-dim:#1a5a3c; --red:#b8374a; --pink:#b2347d; --pink-dim:#d98ab8; --indigo:#4a5fc4; --indigo-dim:#8894d6; --coral:#a74c27; --coral-dim:#a3491f; --teal:#0e7466; --teal-dim:#0a5a4f; --azure:#1d5fb8; --azure-dim:#123f7a; --lime:#4b7115; --lime-dim:#456b12; --ink:#e3e8f1; --ink-2:#eef1f8; --panel:#ffffff; --panel-2:#f7f9fd; --line:#c4cfe1; --line-soft:#d4dcea; --text:#16213a; --muted:#52607c; --muted-2:#5a6884; --grid:rgba(70,90,130,.11); --grid-bold:rgba(70,90,130,.20); --grid-paper:rgba(45,70,115,.13); --glyph-bg:#eef2f9; --bg-rad-1:transparent; /* off - see the note in the dark block */ --bg-rad-2:transparent; --bg-rad-fin:#ece7f7; --banner-a:#efeafb; --banner-b:#eef1fa; --glow:0; --shadow-card:0 12px 26px -16px rgba(40,60,100,.35); --viz-bg:#f4f7fc; --viz-border:var(--line); --viz-axis:var(--muted-2); --viz-grid-line:var(--grid); --viz-label:var(--muted); } @media (prefers-color-scheme:light){ :root:not([data-theme="dark"]){ color-scheme:light; --amber:#8d5c14; --amber-dim:#6f470f; --cyan:#1b6f8e; --cyan-dim:#5aa6c0; --violet:#6d4bc4; --violet-dim:#9b85d8; --green:#23744e; --green-dim:#1a5a3c; --red:#b8374a; --pink:#b2347d; --pink-dim:#d98ab8; --indigo:#4a5fc4; --indigo-dim:#8894d6; --coral:#a74c27; --coral-dim:#a3491f; --teal:#0e7466; --teal-dim:#0a5a4f; --azure:#1d5fb8; --azure-dim:#123f7a; --lime:#4b7115; --lime-dim:#456b12; --ink:#e3e8f1; --ink-2:#eef1f8; --panel:#ffffff; --panel-2:#f7f9fd; --line:#c4cfe1; --line-soft:#d4dcea; --text:#16213a; --muted:#52607c; --muted-2:#5a6884; --grid:rgba(70,90,130,.11); --grid-bold:rgba(70,90,130,.20); --grid-paper:rgba(45,70,115,.13); --glyph-bg:#eef2f9; --bg-rad-1:transparent; /* off - see the note in the dark block */ --bg-rad-2:transparent; --bg-rad-fin:#ece7f7; --banner-a:#efeafb; --banner-b:#eef1fa; --glow:0; --shadow-card:0 12px 26px -16px rgba(40,60,100,.35); --viz-bg:#f4f7fc; --viz-border:var(--line); --viz-axis:var(--muted-2); --viz-grid-line:var(--grid); --viz-label:var(--muted); } } /* Prevent a flash of the wrong theme: rot.js sets data-theme before paint. */ html{ background:var(--ink); } /* Smooth dark/light theme switching for the page background and every shared-chrome component (controls, palette, toasts, related-tools strip). Deliberately scoped here rather than applied universally: many tools have real-time drag/redraw interactions (dials, sliders, live charts) where a blanket transition can't be visually verified safe without a real browser, so the toggle stays instant inside individual tools and smooth everywhere this stylesheet owns directly. */ html{ transition: background-color .35s ease; } .rot-controls, .rot-btn, .rot-cmd, .rot-cmd input, .rot-cmd-item, .rot-cmd-hint kbd, .rot-toast, .rot-skip, .rot-share, .rot-related .rr-item, .rot-content .rc-example, .rot-content .faq .q{ transition: background-color .3s ease, border-color .3s ease, color .3s ease, box-shadow .3s ease; } @media (prefers-reduced-motion:reduce){ html, .rot-controls, .rot-btn, .rot-cmd, .rot-cmd input, .rot-cmd-item, .rot-cmd-hint kbd, .rot-toast, .rot-skip, .rot-share, .rot-related .rr-item, .rot-content .rc-example, .rot-content .faq .q{ transition:none !important; } } /* ============================================================ Shared chrome — theme toggle + command palette (component CSS that every page gets for free) ============================================================ */ .rot-controls{ position:fixed; top:14px; right:16px; z-index:60; display:flex; gap:8px; align-items:center; } .rot-btn{ display:inline-flex; align-items:center; justify-content:center; gap:6px; width:36px; height:36px; border-radius:10px; cursor:pointer; background:color-mix(in srgb, var(--panel) 82%, transparent); border:1px solid var(--line); color:var(--muted); backdrop-filter:blur(8px); transition:color .15s, border-color .15s, background .15s, transform .12s; } .rot-btn:hover{ color:var(--text); border-color:var(--violet); transform:translateY(-1px); } .rot-btn svg{ width:17px; height:17px; } /* Currency control is a glyph, not an icon — the symbol itself is the affordance. Multi-character symbols (CA$, A$) get squeezed rather than overflowing the 36px button. Dimmed while on 'auto' so an explicit override reads as deliberately set. */ .rot-cur-btn{ font-family:'IBM Plex Mono',monospace; font-size:15px; font-weight:600; letter-spacing:-.02em; line-height:1; padding:0 2px; } .rot-cur-btn.is-auto{ color:var(--muted-2); } .rot-cur-btn:hover{ color:var(--text); } .rot-btn .lbl{ display:none; } /* Search bar in the top-right chrome (replaces square search icon) */ .rot-searchbar{ display:inline-flex; align-items:center; gap:8px; height:36px; min-width:168px; max-width:min(260px,42vw); padding:0 10px 0 11px; border-radius:10px; cursor:pointer; background:color-mix(in srgb, var(--panel) 88%, transparent); border:1px solid var(--line); color:var(--muted); backdrop-filter:blur(8px); font-family:'Inter',system-ui,sans-serif; font-size:12.5px; transition:color .15s, border-color .15s, background .15s, transform .12s; } .rot-searchbar:hover{ color:var(--text); border-color:var(--violet); transform:translateY(-1px); } .rot-searchbar svg{ width:15px; height:15px; flex:none; opacity:.85; } .rot-search-ph{ flex:1; min-width:0; text-align:left; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; color:var(--muted-2); } .rot-searchbar:hover .rot-search-ph{ color:var(--muted); } .rot-search-kbd{ font-family:'IBM Plex Mono',monospace; font-size:10.5px; color:var(--muted-2); background:var(--ink); border:1px solid var(--line); border-radius:5px; padding:1px 6px; flex:none; } @media (max-width:560px){ /* The floating controls are position:fixed at top:10px and 32px tall, so the top 42px of the viewport belongs to them. Below 560px the breadcrumb runs straight underneath the search bar and becomes unreadable and unclickable — measured: it collides at <=560px and clears from 600px up, which is exactly this breakpoint. Reserve the space instead. `body .wrap` rather than `.wrap` on purpose. The container is redefined by tool.css, by index.html and by every area hub, all at (0,0,1,0) and several loaded after this file; the descendant selector wins on specificity regardless of source order, so one rule fixes every page type and the next page added gets it for free. */ body .wrap{ padding-top:54px; } .rot-controls{ top:10px; right:10px; } .rot-btn{ width:32px; height:32px; } .rot-searchbar{ min-width:0; max-width:42vw; height:32px; padding:0 8px; font-size:11.5px; } .rot-search-kbd{ display:none; } } /* Snapshot button: same chrome as the other controls, plus a one-time gentle pulse so returning visitors notice the new feature without it becoming a permanent distraction. */ .rot-snap-btn{ position:relative; color:var(--amber); } .rot-snap-btn:hover{ color:var(--text); border-color:var(--amber); background:color-mix(in srgb,var(--amber) 12%,transparent); } .rot-snap-btn::after{ content:""; position:absolute; inset:-3px; border-radius:12px; border:1.5px solid var(--amber); opacity:0; pointer-events:none; animation: rot-snap-pulse 2.4s ease-out 1; } @keyframes rot-snap-pulse{ 0%{ opacity:.9; transform:scale(1); } 100%{ opacity:0; transform:scale(1.35); } } @media (prefers-reduced-motion:reduce){ .rot-snap-btn::after{ animation:none; } } /* Optional in-page CTA: */ .rot-snap-cta{ display:inline-flex; align-items:center; gap:7px; font-family:'IBM Plex Mono',monospace; font-size:12px; font-weight:600; color:var(--ink); background:linear-gradient(90deg,var(--amber),color-mix(in srgb,var(--coral) 50%,var(--amber))); border:none; border-radius:9px; padding:9px 14px; cursor:pointer; } .rot-snap-cta:hover{ filter:brightness(1.06); } .rot-pin-btn.pinned{ color:var(--amber); border-color:var(--amber); } /* Favorite = pin star + shared tally count (top chrome) */ .rot-fav-btn{ position:relative; width:auto !important; min-width:36px; padding:0 8px !important; gap:4px; } .rot-fav-btn .rot-fav-n{ font-family:'IBM Plex Mono',monospace; font-size:10px; font-weight:600; color:var(--muted-2); line-height:1; margin-left:1px; } .rot-fav-btn.pinned .rot-fav-n{ color:var(--amber); } .rot-fav-btn.api-down .rot-fav-n{ opacity:.45; } /* Command palette overlay */ .rot-cmd-back{ position:fixed; inset:0; z-index:200; display:none; background:color-mix(in srgb, var(--ink) 62%, transparent); backdrop-filter:blur(8px) saturate(1.15); -webkit-backdrop-filter:blur(8px) saturate(1.15); align-items:flex-start; justify-content:center; padding:14vh 16px 0; } .rot-cmd-back.open{ display:flex; animation:rot-back-in .16s ease; } @keyframes rot-back-in{ from{ opacity:0; } to{ opacity:1; } } .rot-cmd{ width:100%; max-width:560px; background:linear-gradient(180deg,var(--panel),var(--ink-2)); border:1px solid var(--line); border-radius:14px; overflow:hidden; box-shadow:0 30px 80px -30px #000, 0 0 0 1px color-mix(in srgb, var(--amber) 8%, transparent); font-family:'Inter',system-ui,sans-serif; } .rot-cmd-back.open .rot-cmd{ animation:rot-cmd-in .2s cubic-bezier(.3,1.1,.5,1); } @keyframes rot-cmd-in{ from{ opacity:0; transform:translateY(10px) scale(.975); } to{ opacity:1; transform:none; } } @media (prefers-reduced-motion:reduce){ .rot-cmd-back.open, .rot-cmd-back.open .rot-cmd{ animation:none; } } .rot-cmd input{ width:100%; box-sizing:border-box; border:none; outline:none; background:transparent; color:var(--text); font-family:'Space Grotesk','Inter',sans-serif; font-size:17px; padding:16px 18px; border-bottom:1px solid var(--line-soft); } .rot-cmd input::placeholder{ color:var(--muted-2); } .rot-cmd-list{ max-height:48vh; overflow-y:auto; padding:6px; } .rot-cmd-item{ display:flex; align-items:center; gap:11px; padding:10px 12px; border-radius:9px; cursor:pointer; color:var(--muted); text-decoration:none; } .rot-cmd-item .nm{ color:var(--text); font-weight:500; font-size:14px; } .rot-cmd-item .area{ font-family:'IBM Plex Mono',monospace; font-size:10px; text-transform:uppercase; letter-spacing:.1em; color:var(--muted-2); margin-left:auto; } .rot-cmd-item.sel, .rot-cmd-item:hover{ background:color-mix(in srgb, var(--acc, var(--violet)) 13%, transparent); box-shadow:inset 2.5px 0 0 var(--acc, var(--violet)); } .rot-cmd-item{ transition:background .1s ease; } .rot-cmd-item .dot{ width:7px; height:7px; border-radius:50%; flex:none; } .rot-cmd-empty{ padding:20px; text-align:center; color:var(--muted-2); font-size:13px; } /* ---- instant answers: the palette doubles as a calculator ---- */ .rot-cmd-answer{ flex-direction:column; align-items:flex-start !important; gap:3px !important; border:1px solid var(--line); border-radius:10px; margin:2px 2px 6px; background:linear-gradient(135deg, color-mix(in srgb, var(--amber) 9%, transparent), color-mix(in srgb, var(--cyan) 7%, transparent)); } .rot-cmd-answer .rot-ans-main{ font-family:'IBM Plex Mono',monospace; font-size:19px; font-weight:600; color:var(--text); letter-spacing:-.01em; font-variant-numeric:tabular-nums; overflow-wrap:anywhere; } .rot-cmd-answer .rot-ans-sub{ font-size:11px; color:var(--muted-2); } .rot-cmd-answer.sel, .rot-cmd-answer:hover{ border-color:var(--amber-dim); box-shadow:none; background:linear-gradient(135deg, color-mix(in srgb, var(--amber) 15%, transparent), color-mix(in srgb, var(--cyan) 11%, transparent)); } /* ---- rulebook hits in search ---- */ .rot-cmd-rule{ align-items:flex-start !important; } .rot-cmd-rule .dot{ margin-top:6px; } .rot-cmd-rule .rot-rule-body{ flex:1; min-width:0; display:flex; flex-direction:column; gap:2px; } .rot-cmd-rule .rot-rule-text{ font-size:11.5px; color:var(--muted); line-height:1.45; } .rot-cmd-hint .rot-hint-full{ color:var(--cyan); text-decoration:none; margin-left:auto; border:1px solid var(--cyan-dim); border-radius:6px; padding:2px 8px; } .rot-cmd-hint .rot-hint-full:hover{ border-color:var(--cyan); } .rot-cmd-hint .rot-hint-eq{ margin-left:14px; color:var(--amber); opacity:.85; } @media (max-width:560px){ .rot-cmd-hint .rot-hint-eq{ display:none; } .rot-cmd-hint .rot-hint-full{ margin-left:auto; } } .rot-cmd-hint{ padding:8px 14px; border-top:1px solid var(--line-soft); font-family:'IBM Plex Mono',monospace; font-size:10px; color:var(--muted-2); display:flex; gap:14px; flex-wrap:wrap; } .rot-cmd-hint kbd{ background:var(--ink); border:1px solid var(--line); border-radius:4px; padding:1px 5px; color:var(--muted); } /* Toast (copy confirmation) */ /* Export + recent-calculations panel, opened from the controls bar. Anchored to the same corner as the buttons, and capped in height so a full history still fits a phone. */ .rot-export{ position:fixed; top:58px; right:12px; z-index:1002; width:min(340px, calc(100vw - 24px)); max-height:min(70vh, 560px); overflow-y:auto; background:var(--panel); border:1px solid var(--line); border-radius:14px; box-shadow:0 18px 48px rgba(0,0,0,.42); font-family:'IBM Plex Mono',monospace; } .rot-export .rx-sec{ padding:12px; border-bottom:1px solid var(--line); } .rot-export .rx-sec:last-child{ border-bottom:0; } .rot-export .rx-h{ display:flex; align-items:center; justify-content:space-between; font-size:10px; letter-spacing:.13em; text-transform:uppercase; color:var(--muted-2); font-weight:600; margin:0 2px 9px; } .rot-export .rx-clear{ font-family:inherit; font-size:10px; letter-spacing:.08em; text-transform:uppercase; color:var(--muted-2); background:none; border:0; cursor:pointer; padding:2px 4px; } .rot-export .rx-clear:hover{ color:var(--red); } .rot-export .rx-item{ display:block; width:100%; text-align:left; font-family:inherit; cursor:pointer; background:var(--ink-2); border:1px solid var(--line); border-radius:9px; padding:9px 11px; margin-bottom:6px; color:var(--muted); } .rot-export .rx-item:last-child{ margin-bottom:0; } .rot-export .rx-item:hover{ border-color:var(--accent, var(--amber)); color:var(--text); } .rot-export .rx-item b{ display:block; font-size:12.5px; color:var(--text); font-weight:600; } .rot-export .rx-item span{ display:block; font-size:10.5px; margin-top:2px; color:var(--muted-2); } .rot-export .rx-empty{ font-size:11.5px; line-height:1.6; color:var(--muted-2); margin:0 2px; } .rot-export .rx-list{ display:flex; flex-direction:column; gap:5px; } .rot-export .rx-rec{ display:block; text-decoration:none; background:var(--ink-2); border:1px solid var(--line); border-radius:9px; padding:8px 11px; } .rot-export .rx-rec:hover{ border-color:var(--accent, var(--amber)); } .rot-export .rx-rn{ display:block; font-size:11px; color:var(--muted-2); } .rot-export .rx-rh{ display:block; font-size:12.5px; color:var(--text); font-weight:600; margin-top:1px; } .rot-export .rx-rt{ display:block; font-size:10px; color:var(--muted-2); margin-top:3px; } @media (max-width:560px){ .rot-export{ top:52px; right:10px; left:10px; width:auto; } } .rot-export .rx-seg{ display:flex; gap:5px; } .rot-export .rx-sb{ flex:1; font-family:inherit; font-size:11.5px; cursor:pointer; padding:7px 6px; background:var(--ink-2); border:1px solid var(--line); border-radius:8px; color:var(--muted); } .rot-export .rx-sb:hover{ color:var(--text); border-color:var(--line-soft); } .rot-export .rx-sb.on{ background:var(--amber); border-color:var(--amber); color:var(--ink-2); font-weight:600; } .rot-export .rx-wfname{ font-size:11.5px; color:var(--muted); margin:0 2px 7px; } .rot-export .rx-wfswitch{ display:flex; flex-wrap:wrap; gap:5px; margin-top:8px; } .rot-export .rx-tab{ font-family:inherit; font-size:10.5px; color:var(--muted-2); cursor:pointer; background:transparent; border:1px dashed var(--line); border-radius:20px; padding:4px 10px; } .rot-export .rx-tab.on{ color:var(--ink-2); background:var(--amber); border-color:var(--amber); border-style:solid; } /* "next in your workflow", above the related-tools strip on a tool page */ .rot-wfnext{ max-width:var(--wrap-max, 1180px); margin:26px auto 0; padding:14px 16px; background:var(--panel); border:1px solid var(--line); border-left:3px solid var(--amber); border-radius:12px; font-family:'IBM Plex Mono',monospace; } .rot-wfnext .wf-h{ font-size:10px; letter-spacing:.13em; text-transform:uppercase; color:var(--muted-2); font-weight:600; } .rot-wfnext .wf-p{ color:var(--amber); margin-left:6px; } .rot-wfnext .wf-go{ display:flex; align-items:baseline; gap:10px; flex-wrap:wrap; margin-top:9px; text-decoration:none; } .rot-wfnext .wf-lb{ font-size:10px; letter-spacing:.12em; text-transform:uppercase; color:var(--muted-2); } .rot-wfnext .wf-nm{ font-size:15px; font-weight:600; color:var(--text); } .rot-wfnext .wf-go:hover .wf-nm{ color:var(--amber); } .rot-wfnext .wf-hh{ font-size:12px; color:var(--muted); } .rot-wfnext .wf-end{ font-size:12px; color:var(--muted); margin:8px 0 0; } /* the import offer for a shared ?w= link */ .rot-wfimport{ position:fixed; left:50%; bottom:22px; transform:translateX(-50%); z-index:1003; display:flex; align-items:center; gap:10px; flex-wrap:wrap; max-width:min(560px, calc(100vw - 24px)); background:var(--panel); border:1px solid var(--amber); border-radius:12px; padding:11px 14px; box-shadow:0 14px 40px rgba(0,0,0,.42); font-family:'IBM Plex Mono',monospace; font-size:12px; color:var(--muted); } .rot-wfimport b{ color:var(--text); } .rot-wfimport button{ font-family:inherit; font-size:11px; cursor:pointer; border-radius:8px; padding:5px 11px; background:transparent; border:1px solid var(--line); color:var(--muted); } .rot-wfimport button[data-a="add"]{ background:var(--amber); border-color:var(--amber); color:var(--ink-2); font-weight:600; } /* First-visit tour. A corner card rather than a modal, so the highlighted element stays visible and the page stays usable while it is open. */ .rot-tour{ position:fixed; right:16px; bottom:16px; z-index:1004; width:min(360px, calc(100vw - 32px)); background:var(--panel); border:1px solid var(--amber); border-radius:14px; padding:15px 17px; box-shadow:0 20px 52px rgba(0,0,0,.5); } .rot-tour .tr-n{ font-family:'IBM Plex Mono',monospace; font-size:10px; letter-spacing:.14em; text-transform:uppercase; color:var(--amber); font-weight:600; } .rot-tour h2{ font-size:16.5px; margin:7px 0 0; color:var(--text); } .rot-tour p{ font-size:13px; line-height:1.6; color:var(--muted); margin:7px 0 0; } .rot-tour kbd{ font-family:'IBM Plex Mono',monospace; font-size:11px; background:var(--ink-2); border:1px solid var(--line); border-radius:5px; padding:1px 5px; color:var(--text); } .rot-tour .tr-btns{ display:flex; gap:7px; justify-content:flex-end; margin-top:13px; } .rot-tour button{ font-family:'IBM Plex Mono',monospace; font-size:11.5px; cursor:pointer; background:transparent; border:1px solid var(--line); border-radius:8px; padding:6px 13px; color:var(--muted); } .rot-tour button:hover{ color:var(--text); border-color:var(--line-soft); } .rot-tour button.tr-go{ background:var(--amber); border-color:var(--amber); color:var(--ink-2); font-weight:600; } .rot-tour-spot{ outline:2px solid var(--amber); outline-offset:5px; border-radius:12px; scroll-margin-top:80px; } .rot-tour-link{ white-space:nowrap; } @media (max-width:560px){ .rot-tour{ left:12px; right:12px; bottom:12px; width:auto; } } /* contextual correction prompt, under the caveat bar on tool and rule pages */ .rot-fb{ max-width:var(--wrap-max, 1180px); margin:14px auto 0; font-size:12.5px; line-height:1.6; color:var(--muted-2); text-align:center; } .rot-fb a{ color:var(--amber); } .rot-toast{ position:fixed; left:50%; bottom:28px; transform:translateX(-50%) translateY(20px); z-index:120; opacity:0; pointer-events:none; background:linear-gradient(180deg,var(--panel-2),var(--ink-2)); border:1px solid var(--green); color:var(--text); font-family:'IBM Plex Mono',monospace; font-size:12.5px; padding:10px 16px; border-radius:10px; box-shadow:0 14px 30px -16px #000; transition:opacity .2s, transform .2s; } .rot-toast.show{ opacity:1; transform:translateX(-50%) translateY(0); pointer-events:auto; } @media (prefers-reduced-motion:reduce){ .rot-btn, .rot-toast, .rot-cmd-item{ transition:none; } } /* Skip-to-content link (visible only on keyboard focus) */ .rot-skip{ position:fixed; top:-60px; left:14px; z-index:300; background:var(--panel-2); color:var(--text); border:1px solid var(--line); border-radius:9px; padding:10px 16px; font-family:'IBM Plex Mono',monospace; font-size:12.5px; text-decoration:none; transition:top .15s ease; } .rot-skip:focus{ top:14px; } /* Related tools strip — auto-injected before each tool page's footer. Uses tool.css's .rhead/.ey/h2 pattern (every tool page loads tool.css) so it reads as a real content section, not a footnote. */ .rot-related{ margin-top:26px; padding:22px 24px; border-radius:16px; background:linear-gradient(180deg, color-mix(in srgb, var(--accent,var(--amber)) 6%, var(--panel)), var(--ink-2)); border:1px solid var(--line); } .rot-related .rr-privacy-note{ font-size:10px; text-transform:none; letter-spacing:0; font-weight:400; color:var(--muted-2); opacity:.85; } .rot-related .rr-grid{ display:grid; grid-template-columns:repeat(auto-fill,minmax(180px,1fr)); gap:10px; } .rot-related .rr-item{ position:relative; display:flex; flex-direction:column; gap:3px; font-family:'Inter',sans-serif; text-decoration:none; color:var(--text); background:linear-gradient(180deg,var(--panel),var(--ink-2)); border:1px solid var(--line); border-radius:12px; padding:13px 14px 13px 16px; transition:border-color .14s ease, transform .14s ease; overflow:hidden; } .rot-related .rr-item:before{ content:""; position:absolute; left:0; top:0; bottom:0; width:3px; background:var(--rc,var(--muted-2)); } .rot-related .rr-item:hover{ border-color:var(--line-soft); transform:translateY(-1px); } .rot-related .rr-item .rr-name{ font-size:13px; font-weight:600; line-height:1.3; } .rot-related .rr-item .rr-sub{ font-family:'IBM Plex Mono',monospace; font-size:10px; color:var(--muted-2); } .rot-related .rr-item.rr-all{ justify-content:center; align-items:center; color:var(--muted-2); border-style:dashed; } .rot-related .rr-item.rr-all:before{ display:none; } /* ============================================================ Shared "copy results / share" button (used inside tool heroes) ============================================================ */ .rot-share{ display:inline-flex; align-items:center; gap:6px; cursor:pointer; font-family:'IBM Plex Mono',monospace; font-size:11px; font-weight:500; color:var(--muted); background:var(--ink); border:1px solid var(--line); border-radius:8px; padding:6px 11px; transition:color .14s, border-color .14s, background .14s; } .rot-share:hover{ color:var(--text); border-color:var(--violet); background:color-mix(in srgb, var(--violet) 10%, transparent); } .rot-share svg{ width:13px; height:13px; flex:none; } .rot-share.amber:hover{ border-color:var(--amber); background:color-mix(in srgb, var(--amber) 10%, transparent); } .rot-share.cyan:hover{ border-color:var(--cyan); background:color-mix(in srgb, var(--cyan) 10%, transparent); } /* ============================================================ Shared below-the-fold content section (intro / example / FAQ) Reuses each tool's section heading; these style the prose body. Field Notes and "Using this tool" are colour-coded consistently across every tool page (not tied to that page's own accent) so the two kinds of content stay visually distinct at a glance: amber for the quick-reference facts, cyan for the how-it-works walkthrough. Both also get more vertical breathing room between and within their blocks than the default .rhead/.gloss spacing, since a wall of prose reads as denser than the same words with natural page breaks. ============================================================ */ /* ============================================================ Shared below-the-fold content section (intro / example / FAQ) Reuses each tool's section heading; these style the prose body. Field Notes and "Using this tool" are colour-coded boldly and consistently across every tool page (not tied to that page's own accent), so the two kinds of content are unmistakable at a glance even scrolling fast: amber for the quick-reference facts, cyan for the how-it-works walkthrough. Each gets its own accent bar, a solid eyebrow badge, a faint full-section wash, and noticeably more vertical space than the default .rhead/.gloss spacing, since a wall of prose reads as denser than the same words broken up with real page breaks. ============================================================ */ /* These two sections previously stacked THREE devices to say one thing: a floating 72x4 glowing bar pinned top-left, a solid pill badge, and a gradient wash — and they were the only sections on the page that broke the shared .rhead/.ey convention every other section follows. The bar in particular read as a stray artifact rather than structure. Now they use the site's own eyebrow grammar (10px mono, letterspaced, uppercase) and differ only by colour, which is the part that carried real meaning: amber for the quick-reference facts, cyan for the walkthrough. A hairline under the heading carries the section break, matching how the rest of the page divides content. */ /* Target the CLASS, not the aria-label. These rules used to key off section[aria-label="Field notes"], which silently dropped the styling on any page that gave the section a more descriptive accessible name — psychrometer ("What each metric means") and unit-converter ("Notes") both looked different for exactly that reason, despite identical markup and eyebrow. Presentation should never depend on human-readable label text; aria-label is free to describe. */ .rot-fieldnotes, .rot-content{ position:relative; padding-top:26px; background:none; } .rot-fieldnotes:before, .rot-content:before{ content:none; } .rot-fieldnotes .rhead, .rot-content .rhead{ padding-bottom:13px; margin-bottom:22px; border-bottom:1px solid var(--line-soft); } /* colour-coded, but same weight and rhythm as every other eyebrow on the page */ .rot-fieldnotes .rhead .ey{ color:var(--amber); background:none; padding:0; border-radius:0; font-weight:600; } .rot-content .rhead .ey{ color:var(--cyan); background:none; padding:0; border-radius:0; font-weight:600; } .rot-fieldnotes .gloss{ gap:20px; } .rot-fieldnotes .gcard{ border-left:3px solid color-mix(in srgb, var(--amber) 55%, transparent); } .rot-content .rc-intro{ font-size:13.5px; color:var(--muted); line-height:1.65; max-width:74ch; margin:0 0 22px; } .rot-content .rc-intro b{ color:var(--text); font-weight:600; } .rot-content .rc-example{ background:linear-gradient(180deg,var(--panel),var(--ink-2)); border:1px solid var(--line); border-left:4px solid color-mix(in srgb, var(--cyan) 75%, transparent); border-radius:13px; padding:16px 18px; margin:0 0 22px; max-width:760px; box-shadow:-1px 0 16px -8px color-mix(in srgb, var(--cyan) 40%, transparent); } .rot-content .rc-example h4{ font-family:'Space Grotesk',sans-serif; font-weight:600; font-size:13.5px; margin:0 0 9px; color:var(--text); display:flex; align-items:center; gap:8px; } .rot-content .rc-example h4:before{ content:""; width:7px; height:7px; border-radius:50%; background:var(--cyan); box-shadow:0 0 8px var(--cyan); } .rot-content .rc-example p{ font-size:12.5px; color:var(--muted); line-height:1.6; margin:0 0 7px; } .rot-content .rc-example p:last-child{ margin-bottom:0; } .rot-content .rc-example b{ color:var(--text); font-weight:600; } .rot-content .rc-example .num{ font-family:'IBM Plex Mono',monospace; color:var(--cyan); } .rot-content .faq{ display:grid; grid-template-columns:repeat(2,1fr); gap:16px; } @media (max-width:760px){ .rot-content .faq{ grid-template-columns:1fr; } } .rot-content .faq .q{ background:linear-gradient(180deg,var(--panel),var(--ink-2)); border:1px solid var(--line); border-left:4px solid color-mix(in srgb, var(--cyan) 55%, transparent); border-radius:12px; padding:14px 16px; } .rot-content .faq .q h4{ font-family:'Space Grotesk',sans-serif; font-weight:600; font-size:13.5px; margin:0 0 6px; color:var(--text); } .rot-content .faq .q p{ font-size:12.5px; color:var(--muted); line-height:1.6; margin:0; } .rot-content .faq .q p b{ color:var(--text); font-weight:600; } /* ============================================================ Global polish layer (v2) — one file, every page benefits. Everything below is progressive enhancement: old browsers simply ignore what they don't understand. ============================================================ */ /* Command palette group headers (Recent / Everything) */ .rot-cmd-group{ padding:9px 12px 4px; font-family:'IBM Plex Mono',monospace; font-size:9.5px; font-weight:600; letter-spacing:.18em; text-transform:uppercase; color:var(--muted-2); user-select:none; } .rot-cmd-group + .rot-cmd-item{ margin-top:1px; } /* Text selection carries the brand */ ::selection{ background:color-mix(in srgb, var(--amber) 32%, transparent); color:var(--text); } /* Gradient-clipped headings (.h1-hl on the homepage) paint their glyphs with -webkit-text-fill-color:transparent, which OVERRIDES the `color` above — so selecting them drew a solid amber band with invisible letters inside it. Restore a real fill while selected; the gradient returns the moment the selection clears. */ .h1-hl::selection{ -webkit-text-fill-color:var(--text); color:var(--text); } .h1-hl::-moz-selection{ -webkit-text-fill-color:var(--text); color:var(--text); } /* Themed scrollbars — thin, quiet, matching the instrument chrome */ html{ scrollbar-width:thin; scrollbar-color:var(--line) transparent; } ::-webkit-scrollbar{ width:10px; height:10px; } ::-webkit-scrollbar-track{ background:transparent; } ::-webkit-scrollbar-thumb{ background:var(--line); border-radius:8px; border:2px solid var(--ink); } ::-webkit-scrollbar-thumb:hover{ background:var(--muted-2); } /* A default focus ring for anything a page hasn't styled itself. :where() keeps specificity at zero so per-page rules always win. */ :where(a, button, input, select, textarea, summary, [tabindex]):focus-visible{ outline:2px solid var(--amber); outline-offset:2px; border-radius:4px; } /* Cross-page view transitions — navigation feels like one continuous instrument panel instead of discrete page loads. Chromium-only for now; other engines fall back to instant navigation, unharmed. */ @view-transition{ navigation:auto; } @keyframes rot-vt-out{ to{ opacity:0; } } @keyframes rot-vt-in{ from{ opacity:0; transform:translateY(5px); } to{ opacity:1; transform:none; } } ::view-transition-old(root){ animation:rot-vt-out .14s ease both; } ::view-transition-new(root){ animation:rot-vt-in .22s ease both; } @media (prefers-reduced-motion:reduce){ ::view-transition-old(root), ::view-transition-new(root){ animation:none; } } /* Chart data-table fallback (ROT.setTable) */ .rot-datatable{ margin-top:10px; border:1px solid var(--line); border-radius:10px; overflow:hidden; } .rot-datatable summary{ font-family:'IBM Plex Mono',monospace; font-size:11px; color:var(--muted-2); padding:9px 13px; cursor:pointer; user-select:none; letter-spacing:.06em; } .rot-datatable summary:hover{ color:var(--text); } .rot-datatable[open] summary{ border-bottom:1px solid var(--line); color:var(--muted); } .rot-dt-scroll{ max-height:280px; overflow:auto; } .rot-datatable table{ width:100%; border-collapse:collapse; font-family:'IBM Plex Mono',monospace; font-size:11.5px; } .rot-datatable caption{ text-align:left; padding:8px 13px 2px; color:var(--muted-2); font-size:10.5px; } .rot-datatable th{ position:sticky; top:0; background:var(--panel); color:var(--muted); font-weight:600; text-align:right; padding:7px 13px; border-bottom:1px solid var(--line); } .rot-datatable th:first-child, .rot-datatable td:first-child{ text-align:left; } .rot-datatable td{ text-align:right; padding:5px 13px; color:var(--muted); border-bottom:1px solid var(--line-soft); } .rot-datatable tr:last-child td{ border-bottom:none; } /* Rule-of-thumb card — auto-mounted on tool pages whose tool has a Rulebook entry */ .rot-rulecard{ margin-top:26px; display:flex; gap:14px; align-items:flex-start; background:linear-gradient(180deg,var(--panel),var(--ink-2)); border:1px solid var(--line); border-left:3px solid var(--amber); border-radius:13px; padding:15px 17px; } .rot-rulecard .rc-ico{ flex:none; width:30px; height:30px; margin-top:2px; } .rot-rulecard .rc-stack{ flex:1; min-width:0; display:flex; flex-direction:column; gap:14px; } .rot-rulecard .rc-block + .rc-block{ padding-top:14px; border-top:1px solid var(--line-soft); } .rot-rulecard .rc-ey{ font-size:9.5px; letter-spacing:.18em; text-transform:uppercase; color:var(--amber); font-weight:600; font-family:'IBM Plex Mono',monospace; margin-bottom:4px; } .rot-rulecard h3{ font-family:'Space Grotesk',sans-serif; font-weight:600; font-size:14.5px; margin:0 0 5px; color:var(--text); } /* Rule title as a permalink to /rule/ — inherits the heading's look so the card reads unchanged, and only announces itself on hover/focus. */ .rot-rulecard h3 .rc-perma{ color:inherit; text-decoration:none; } .rot-rulecard h3 .rc-perma:hover, .rot-rulecard h3 .rc-perma:focus-visible{ color:var(--amber); text-decoration:underline; text-decoration-thickness:1px; text-underline-offset:2px; } .rot-rulecard .rc-rule{ font-size:13px; color:var(--text); line-height:1.55; margin:0 0 8px; font-weight:500; } .rot-rulecard .rc-why{ font-size:12px; color:var(--muted); line-height:1.55; margin:0; } .rot-rulecard .rc-why-lab{ font-family:'IBM Plex Mono',monospace; font-size:9.5px; font-weight:600; letter-spacing:.12em; text-transform:uppercase; color:var(--muted-2); margin-right:6px; } .rot-rulecard .rc-links{ display:flex; flex-wrap:wrap; align-items:center; gap:6px; padding-top:2px; } .rot-rulecard .rc-links a{ font-family:'IBM Plex Mono',monospace; font-size:11px; color:var(--amber); text-decoration:none; font-weight:600; } .rot-rulecard .rc-links a:hover{ text-decoration:underline; } /* ============================================================ Region note — generated from the registry into the page ABOVE the inputs. A currency symbol is not a jurisdiction: /finance/mortgage models US PMI and property tax and mentions stamp duty nowhere, so showing a UK reader '£' made the page imply rules it does not implement. This states the jurisdiction the METHOD assumes, before anyone types a number. Deliberately quieter than .refbar (the reference-only disclaimer at the foot of the page) — it is metadata a reader should register, not a warning that should shout on every visit. The amber rule ties the two together as the same family of caveat. ============================================================ */ .rot-region{ display:flex; align-items:flex-start; gap:10px; margin:-4px 0 20px; padding:10px 13px; background:var(--panel); border:1px solid var(--line-soft); border-left:3px solid var(--amber); border-radius:9px; font-size:12px; line-height:1.55; color:var(--muted); } .rot-region .rr-tag{ flex:none; font-family:'IBM Plex Mono',monospace; font-size:9.5px; font-weight:700; letter-spacing:.14em; text-transform:uppercase; color:var(--amber); padding-top:2px; } .rot-region .rr-body b{ color:var(--text); font-weight:600; } @media (max-width:560px){ .rot-region{ flex-direction:column; gap:5px; } } /* ============================================================ Per-tool version history (AUTO-GENERATED:HISTORY). Collapsed by default: it is a trust signal, not something anyone needs while using the tool. ============================================================ */ .rot-hist{ margin:26px 0 0; border-top:1px solid var(--line); padding-top:14px; } .rot-hist summary{ display:inline-flex; align-items:center; gap:7px; cursor:pointer; list-style:none; font-family:'IBM Plex Mono',monospace; font-size:11px; letter-spacing:.06em; text-transform:uppercase; color:var(--muted-2); border:1px solid var(--line); border-radius:8px; padding:6px 11px; } .rot-hist summary::-webkit-details-marker{ display:none; } .rot-hist summary:hover{ color:var(--text); border-color:var(--violet); } .rot-hist summary .caret{ transition:transform .15s; } .rot-hist[open] summary .caret{ transform:rotate(90deg); } .rot-hist ol{ list-style:none; margin:13px 0 0; padding:0; display:flex; flex-direction:column; gap:9px; } .rot-hist li{ display:grid; grid-template-columns:auto auto 1fr; gap:11px; align-items:baseline; font-size:12px; line-height:1.5; color:var(--muted); } .rot-hist .v{ font-family:'IBM Plex Mono',monospace; font-size:11.5px; color:var(--text); font-weight:600; } .rot-hist .d{ font-family:'IBM Plex Mono',monospace; font-size:10.5px; color:var(--muted-2); white-space:nowrap; } .rot-hist .note{ font-size:11px; color:var(--muted-2); margin:11px 0 0; line-height:1.5; } @media (max-width:560px){ .rot-hist li{ grid-template-columns:auto 1fr; } .rot-hist .d{ grid-column:2; } } /* ============================================================ Financial advice disclaimer — every tool in the Finance area. Generated from the registry (AUTO-GENERATED:ADVICE), never hand-written, because four of the first ten finance tools had no disclaimer at all and selective disclaiming is worse than none. Red rather than the amber used by .rot-region: a region note narrows scope, this one disclaims liability, and stacking two identical amber bars on /finance/mortgage read as one caveat. ============================================================ */ /* Was margin-top:-4px, which tucked this under the region banner when it sat above the inputs. Since v1.31 it sits below the results, where a negative top margin pulled it into the panel above it. */ .rot-advice{ display:flex; align-items:flex-start; gap:10px; margin:22px 0 20px; padding:10px 13px; background:var(--panel); border:1px solid var(--line-soft); border-left:3px solid var(--red); border-radius:9px; font-size:12px; line-height:1.55; color:var(--muted); } .rot-advice .ra-tag{ flex:none; font-family:'IBM Plex Mono',monospace; font-size:9.5px; font-weight:700; letter-spacing:.14em; text-transform:uppercase; color:var(--red); padding-top:2px; } .rot-advice .ra-body b{ color:var(--text); font-weight:600; } .rot-advice a{ color:var(--text); text-decoration:underline; text-underline-offset:2px; } @media (max-width:560px){ .rot-advice{ flex-direction:column; gap:5px; } } /* ============================================================ Reduced motion — site-wide backstop. rot.css and home-demos.js honoured the preference, but tool.css never did and 87 transition/animation declarations live in per-page