/* ============================================================ 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; --red:#ff6b7d; --pink:#f77bbd; --pink-dim:#a8527e; /* ---- DARK THEME (default) — the instrument-blueprint look ---- */ --ink:#0a111e; --ink-2:#0e1830; --panel:#122140; --panel-2:#16264a; --line:#24365e; --line-soft:#1b2c4f; --text:#e9f0fb; --muted:#8499bd; --muted-2:#5e729a; --grid:rgba(120,150,200,.10); --grid-bold:rgba(120,150,200,.20); /* atmospheric / structural (previously hardcoded) */ --glyph-bg:#0d1730; --bg-rad-1:#16244a; /* top-right page glow */ --bg-rad-2:#141d36; /* lower-left page glow */ --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; } /* 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:#b9791a; --amber-dim:#9c6512; --cyan:#1f7fa3; --cyan-dim:#5aa6c0; --violet:#6d4bc4; --violet-dim:#9b85d8; --green:#2f9e6a; --red:#c8475a; --pink:#c63d8c; --pink-dim:#d98ab8; --ink:#eef1f6; --ink-2:#e6eaf2; --panel:#ffffff; --panel-2:#f6f8fc; --line:#cfd8e8; --line-soft:#dde4f0; --text:#16213a; --muted:#52607c; --muted-2:#7a87a3; --grid:rgba(70,90,130,.10); --grid-bold:rgba(70,90,130,.18); --glyph-bg:#f2f5fb; --bg-rad-1:#dfe7f5; --bg-rad-2:#e8edf6; --bg-rad-fin:#ece7f7; --banner-a:#efeafb; --banner-b:#eef1fa; --glow:0; --shadow-card:0 12px 26px -16px rgba(40,60,100,.35); } @media (prefers-color-scheme:light){ :root:not([data-theme="dark"]){ color-scheme:light; --amber:#b9791a; --amber-dim:#9c6512; --cyan:#1f7fa3; --cyan-dim:#5aa6c0; --violet:#6d4bc4; --violet-dim:#9b85d8; --green:#2f9e6a; --red:#c8475a; --pink:#c63d8c; --pink-dim:#d98ab8; --ink:#eef1f6; --ink-2:#e6eaf2; --panel:#ffffff; --panel-2:#f6f8fc; --line:#cfd8e8; --line-soft:#dde4f0; --text:#16213a; --muted:#52607c; --muted-2:#7a87a3; --grid:rgba(70,90,130,.10); --grid-bold:rgba(70,90,130,.18); --glyph-bg:#f2f5fb; --bg-rad-1:#dfe7f5; --bg-rad-2:#e8edf6; --bg-rad-fin:#ece7f7; --banner-a:#efeafb; --banner-b:#eef1fa; --glow:0; --shadow-card:0 12px 26px -16px rgba(40,60,100,.35); } } /* Prevent a flash of the wrong theme: rot.js sets data-theme before paint. */ html{ background:var(--ink); } /* ============================================================ 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; } .rot-btn .lbl{ display:none; } @media (max-width:560px){ .rot-controls{ top:10px; right:10px; } .rot-btn{ width:32px; height:32px; } } /* Command palette overlay */ .rot-cmd-back{ position:fixed; inset:0; z-index:200; display:none; background:rgba(5,9,18,.62); backdrop-filter:blur(3px); align-items:flex-start; justify-content:center; padding:14vh 16px 0; } .rot-cmd-back.open{ display:flex; } .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; font-family:'Inter',system-ui,sans-serif; } .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(--violet) 14%, transparent); } .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; } .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) */ .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; } } /* ============================================================ 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. ============================================================ */ .rot-content{ margin-top:24px; } .rot-content .rc-intro{ font-size:13.5px; color:var(--muted); line-height:1.65; max-width:74ch; margin:0 0 18px; } .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-radius:13px; padding:16px 18px; margin:0 0 18px; max-width:760px; } .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(--amber); box-shadow:0 0 8px var(--amber); } .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:13px; } @media (max-width:680px){ .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-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; }