/* ════════════════════════════════════════════════════════════════ ReadCalc — Shared theme + terminal chrome Single source of truth for every page. Linked from . ════════════════════════════════════════════════════════════════ */ /* ── Reset ─────────────────────────────────────────────────────── */ * { margin: 0; padding: 0; box-sizing: border-box; } /* ── Reduced motion (define early so initial paint respects it) ── */ @media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; transition-duration: 0.01ms !important; } } /* ── Theme variables ───────────────────────────────────────────── */ :root, [data-theme="dark"] { --rc-bg: #1e1e1e; --rc-surface: #2d2d2d; --rc-header: #3c3c3c; --rc-border: #3c3c3c; --rc-text: #b0b0b0; --rc-accent: #5f87af; --rc-hi: #87d7ff; --rc-orange: #ffaf5f; --rc-green: #27c93f; --rc-stat-bg: #1e1e1e; /* Universal semantic colours (theme-agnostic) */ --rc-red: #ff5f56; --rc-amber: #ffbd2e; --rc-mac-g: #27c93f; } [data-theme="light"] { --rc-bg: #efefef; --rc-surface: #ffffff; --rc-header: #e0e0e0; --rc-border: #cccccc; --rc-text: #555555; --rc-accent: #2d6a9f; --rc-hi: #1a4f80; --rc-orange: #b05500; --rc-green: #1a7a28; --rc-stat-bg: #f5f5f5; } [data-theme="amber"] { --rc-bg: #1a1010; --rc-surface: #241a1a; --rc-header: #2f2222; --rc-border: #3d2e2e; --rc-text: #b8a8a8; --rc-accent: #b86e6e; --rc-hi: #d49a9a; --rc-orange: #c98e6e; --rc-green: #8aab6e; --rc-stat-bg: #1a1010; } [data-theme="nord"] { --rc-bg: #2e3440; --rc-surface: #3b4252; --rc-header: #434c5e; --rc-border: #4c566a; --rc-text: #d8dee9; --rc-accent: #88c0d0; --rc-hi: #8fbcbb; --rc-orange: #ebcb8b; --rc-green: #a3be8c; --rc-stat-bg: #2e3440; } [data-theme="green"] { --rc-bg: #1a2f23; --rc-surface: #243d30; --rc-header: #2f4f3d; --rc-border: #3a5f4a; --rc-text: #a8c5b5; --rc-accent: #5dbe8a; --rc-hi: #7ddbb3; --rc-orange: #c9a96e; --rc-green: #6ecf44; --rc-stat-bg: #1a2f23; } /* ── Terminal chrome ───────────────────────────────────────────── */ .terminal { background: var(--rc-surface); border-radius: 8px; box-shadow: 0 20px 60px rgba(0, 0, 0, 0.5); overflow: hidden; } .terminal-header { background: var(--rc-header); padding: 12px 15px; display: flex; align-items: center; gap: 8px; border-bottom: 1px solid var(--rc-border); } .terminal-body { padding: 30px; } /* Window-control dots — two naming conventions used historically */ .terminal-button, .dot { width: 12px; height: 12px; border-radius: 50%; flex-shrink: 0; } .terminal-button.close, .dot-r { background: var(--rc-red); } .terminal-button.minimize, .dot-a, .dot-y { background: var(--rc-amber); } .terminal-button.maximize, .dot-g { background: var(--rc-mac-g); } .terminal-title { color: var(--rc-text); font-size: 13px; margin-left: 10px; } /* ── Breadcrumb (used on tool + blog post pages) ───────────────── */ .breadcrumb { font-size: 0.78rem; color: var(--rc-accent); margin-bottom: 20px; } .breadcrumb a { color: var(--rc-orange); text-decoration: none; } .breadcrumb a:hover { text-decoration: underline; } .breadcrumb span { margin: 0 6px; } /* ── Focus-visible (accessibility) ─────────────────────────────── */ *:focus-visible { outline: 2px solid var(--rc-accent); outline-offset: 2px; } input[type="range"]:focus-visible { outline: 2px solid var(--rc-accent); outline-offset: 4px; } textarea:focus-visible { outline: none; border-color: var(--rc-accent); box-shadow: 0 0 0 2px rgba(136, 192, 208, 0.25); }