/* ════════════════════════════════════════════════════════════════ ReadCalc — Shared theme + terminal chrome + common patterns 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: #6b9dc7; --rc-hi: #87d7ff; --rc-orange: #ffaf5f; --rc-green: #27c93f; --rc-mid: #999999; --rc-stat-bg: #1e1e1e; --rc-red: #ff7b72; --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: #1d5a8f; --rc-hi: #1a4f80; --rc-orange: #a04800; --rc-green: #1a7a28; --rc-mid: #707070; --rc-stat-bg: #f5f5f5; --rc-red: #c42b20; --rc-amber: #8a5a00; --rc-mac-g: #1a7a28; } [data-theme="amber"] { --rc-bg: #180e0e; --rc-surface: #2a1f1f; --rc-header: #382828; --rc-border: #4a3535; --rc-text: #d4c4c4; --rc-accent: #d4867e; --rc-hi: #f0b8b0; --rc-orange: #e8a870; --rc-green: #9dc87a; --rc-mid: #a09090; --rc-stat-bg: #180e0e; --rc-red: #ff8a80; --rc-amber: #ffcc4d; --rc-mac-g: #9dc87a; } [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-mid: #a5b5c2; --rc-stat-bg: #2e3440; --rc-red: #e89e9e; --rc-amber: #ebcb8b; --rc-mac-g: #a3be8c; } [data-theme="green"] { --rc-bg: #1a2f23; --rc-surface: #243d30; --rc-header: #2f4f3d; --rc-border: #3a5f4a; --rc-text: #a8c5b5; --rc-accent: #6dce9a; --rc-hi: #7ddbb3; --rc-orange: #c9a96e; --rc-green: #6ecf44; --rc-mid: #8aaa9a; --rc-stat-bg: #1a2f23; --rc-red: #ff8a80; --rc-amber: #ffcc4d; --rc-mac-g: #6ecf44; } [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-mid: #888888; --rc-stat-bg: #f5f5f5; } [data-theme="amber"] { --rc-bg: #180e0e; --rc-surface: #2a1f1f; --rc-header: #382828; --rc-border: #4a3535; --rc-text: #d4c4c4; --rc-accent: #d4867e; --rc-hi: #f0b8b0; --rc-orange: #e8a870; --rc-green: #9dc87a; --rc-mid: #a09090; --rc-stat-bg: #180e0e; } [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-mid: #7a8fa0; --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-mid: #6a8a7a; --rc-stat-bg: #1a2f23; } /* ════════════════════════════════════════════════════════════════ BASE BODY STYLES All pages: monospace font, theme bg/text, transition ════════════════════════════════════════════════════════════════ */ body { font-family: 'SF Mono', 'Monaco', 'Menlo', 'Courier New', monospace; background: var(--rc-bg); color: var(--rc-accent); min-height: 100vh; transition: background 0.3s, color 0.3s; } /* ── Page layout wrapper (used on most tool/blog pages) ────────── */ .page { max-width: 860px; margin: 0 auto; } /* ════════════════════════════════════════════════════════════════ TERMINAL CHROME ════════════════════════════════════════════════════════════════ */ .terminal { background: var(--rc-surface); border-radius: 8px; box-shadow: 0 12px 40px rgba(0, 0, 0, 0.4); overflow: hidden; } .terminal-header { background: var(--rc-header); padding: 10px 14px; display: flex; align-items: center; gap: 8px; border-bottom: 1px solid var(--rc-border); } /* Window-control dots — two naming conventions supported */ .terminal-button, .dot { width: 12px; height: 12px; border-radius: 50%; flex-shrink: 0; } /* Red close button */ .terminal-button.close, .dot-r { background: var(--rc-red); } /* Amber/yellow minimize button */ .terminal-button.minimize, .dot-a, .dot-y { background: var(--rc-amber); } /* Green maximize button */ .terminal-button.maximize, .dot-g { background: var(--rc-mac-g); } .terminal-title { color: var(--rc-text); font-size: 13px; margin-left: 10px; } /* Terminal label (used inside header on tool pages) */ .terminal-label, .t-label { color: var(--rc-accent); font-size: 0.75rem; margin-left: 6px; flex: 1; } .terminal-body { padding: 20px; } /* ════════════════════════════════════════════════════════════════ BREADCRUMB ════════════════════════════════════════════════════════════════ */ .breadcrumb { font-size: 0.78rem; color: var(--rc-accent); margin-bottom: 12px; } .breadcrumb a { color: var(--rc-orange); text-decoration: none; } .breadcrumb a:hover { text-decoration: underline; } .breadcrumb span { margin: 0 6px; } /* ════════════════════════════════════════════════════════════════ PAGE HEADER (title + description) ════════════════════════════════════════════════════════════════ */ .page-header { margin-bottom: 28px; } .page-title { color: var(--rc-hi); font-size: 1.3rem; font-weight: normal; margin-bottom: 6px; } .page-desc, .tagline { color: var(--rc-accent); font-size: 0.85rem; } /* ════════════════════════════════════════════════════════════════ HEADINGS ════════════════════════════════════════════════════════════════ */ h1 { color: var(--rc-hi); font-size: 1.4rem; font-weight: normal; } /* ════════════════════════════════════════════════════════════════ COMMON FORM ELEMENTS ════════════════════════════════════════════════════════════════ */ /* Labels */ .input-label, .field-label { color: var(--rc-text); font-size: 0.72rem; margin-bottom: 8px; display: block; } /* Textarea base */ textarea { width: 100%; background: var(--rc-bg); border: 1px solid var(--rc-border); border-radius: 4px; color: var(--rc-hi); font-family: 'SF Mono', 'Monaco', 'Menlo', 'Courier New', monospace; font-size: 0.85rem; line-height: 1.7; padding: 14px; resize: vertical; outline: none; transition: border-color 0.2s; } textarea:focus { border-color: var(--rc-accent); } textarea::placeholder { color: var(--rc-accent); opacity: 0.5; } /* Range slider base */ input[type="range"] { width: 100%; height: 4px; background: var(--rc-border); border-radius: 2px; outline: none; -webkit-appearance: none; cursor: pointer; } input[type="range"]::-webkit-slider-thumb { -webkit-appearance: none; width: 14px; height: 14px; border-radius: 50%; background: var(--rc-accent); cursor: pointer; transition: background 0.2s; } input[type="range"]::-webkit-slider-thumb:hover { background: var(--rc-hi); } input[type="range"]::-moz-range-thumb { width: 14px; height: 14px; border-radius: 50%; background: var(--rc-accent); border: none; cursor: pointer; } /* ── Select ── */ select { width: 100%; background: var(--rc-bg); border: 1px solid var(--rc-border); border-radius: 3px; color: var(--rc-hi); font-family: 'SF Mono', 'Monaco', 'Menlo', 'Courier New', monospace; font-size: 0.82rem; padding: 6px 8px; outline: none; cursor: pointer; -webkit-appearance: none; transition: border-color 0.2s; } select:focus { border-color: var(--rc-accent); } select option { background: var(--rc-surface); } .select-wrap { position: relative; } /* ════════════════════════════════════════════════════════════════ COMMON BUTTON PATTERNS ════════════════════════════════════════════════════════════════ */ /* Generic button row */ .btn-row { display: flex; gap: 10px; align-items: center; } /* Toggle button (used in teleprompter, reading-test, etc.) */ .toggle-btn { background: transparent; border: 1px solid var(--rc-header); color: var(--rc-text); padding: 7px 16px; font-family: 'SF Mono', 'Monaco', 'Menlo', 'Courier New', monospace; font-size: 0.78rem; cursor: pointer; border-radius: 3px; transition: all 0.2s; } .toggle-btn:hover { border-color: var(--rc-accent); color: var(--rc-hi); } .toggle-btn.active { border-color: var(--rc-green); color: var(--rc-green); background: rgba(39, 201, 63, 0.08); } /* Action / Launch / CTA button (green border) */ .action-btn { background: transparent; border: 1px solid var(--rc-green); color: var(--rc-green); font-family: 'SF Mono', 'Monaco', 'Menlo', 'Courier New', monospace; font-size: 0.9rem; padding: 12px 32px; border-radius: 4px; cursor: pointer; transition: all 0.2s; } .action-btn:hover { background: rgba(95, 175, 95, 0.1); } .action-btn:disabled { opacity: 0.5; cursor: not-allowed; border-color: var(--rc-border); color: var(--rc-text); } /* Clear / cancel button */ .btn-clear { background: transparent; border: none; color: var(--rc-text); font-family: 'SF Mono', 'Monaco', 'Menlo', 'Courier New', monospace; font-size: 0.75rem; cursor: pointer; } .btn-clear:hover { color: var(--rc-red); } /* ════════════════════════════════════════════════════════════════ COMMON STAT DISPLAYS ════════════════════════════════════════════════════════════════ */ /* Stats bar (horizontal pill row) */ .stats-bar { display: flex; gap: 10px; flex-wrap: wrap; } .stat-pill { background: var(--rc-bg); border: 1px solid var(--rc-border); border-radius: 3px; padding: 5px 12px; font-size: 0.75rem; } .s-label { color: var(--rc-text); margin-right: 6px; } .s-val { color: var(--rc-hi); } .s-val.bad { color: var(--rc-red); } .s-val.warn { color: var(--rc-amber); } .s-val.good { color: var(--rc-green); } /* Stats grid (card grid) */ .stats { display: grid; gap: 8px; } .stat { background: var(--rc-bg); border: 1px solid var(--rc-border); border-radius: 4px; padding: 10px 12px; transition: border-color 0.2s; } .stat-label { color: var(--rc-text); font-size: 0.65rem; letter-spacing: 0.06em; margin-bottom: 4px; } .stat-value { color: var(--rc-hi); font-size: 1.1rem; } .stat-value.empty { color: var(--rc-border); } /* ── Control block (labelled slider/select group) ── */ .control-block { background: var(--rc-bg); border: 1px solid var(--rc-border); border-radius: 4px; padding: 12px 14px; } .control-label { color: var(--rc-text); font-size: 0.68rem; letter-spacing: 0.06em; margin-bottom: 8px; display: block; } .control-value { color: var(--rc-hi); font-size: 1.05rem; margin-bottom: 6px; } .control-value span { font-size: 0.7rem; color: var(--rc-text); margin-left: 4px; } /* ── Summary strip (output panel header) ── */ .summary-strip { background: var(--rc-bg); border-bottom: 1px solid var(--rc-border); padding: 14px 20px; display: flex; gap: 24px; flex-wrap: wrap; } .sum-label { color: var(--rc-text); font-size: 0.63rem; letter-spacing: 0.05em; } .sum-val { color: var(--rc-hi); font-size: 0.95rem; margin-top: 2px; } .sum-val.bad { color: var(--rc-red); } .sum-val.warn { color: var(--rc-amber); } .sum-val.good { color: var(--rc-green); } /* ── Output panel (hidden by default, shown after analysis) ── */ .output-panel { display: none; } .output-panel.visible { display: block; } .output-label { color: var(--rc-text); font-size: 0.72rem; margin-bottom: 12px; display: block; } .output-body { padding: 20px; } /* ════════════════════════════════════════════════════════════════ FOOTER ════════════════════════════════════════════════════════════════ */ .footer { margin-top: 30px; padding-top: 15px; border-top: 1px solid var(--rc-header); color: var(--rc-accent); font-size: 0.82rem; display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: 10px; } .footer a { color: var(--rc-orange); text-decoration: none; } .footer a:hover { text-decoration: underline; } /* ── Shortcuts hint ── */ .shortcuts-hint { margin-top: 16px; color: var(--rc-accent); font-size: 0.72rem; opacity: 0.7; text-align: center; } .shortcuts-hint kbd { background: var(--rc-header); color: var(--rc-text); padding: 1px 5px; border-radius: 2px; font-size: 0.7rem; } /* ════════════════════════════════════════════════════════════════ ACCESSIBILITY & UTILITY ════════════════════════════════════════════════════════════════ */ /* ── Screen-reader only utility ── */ .sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; } /* ── Skip link ── */ .skip-link { position: fixed; top: -100px; left: 8px; z-index: 9999; background: var(--rc-surface); color: var(--rc-hi); border: 2px solid var(--rc-accent); border-radius: 4px; padding: 10px 18px; font-family: 'SF Mono', 'Monaco', 'Menlo', 'Courier New', monospace; font-size: 0.9rem; text-decoration: none; transition: top 0.2s; } .skip-link:focus { top: 8px; } /* Focus-visible */ *: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); } /* Back to top */ .back-top:hover { text-decoration: underline; cursor: pointer; } /* ── Semantic utility classes (from inline style refactoring) ──── */ .rc-hidden { display: none; } .rc-file-green { color: #5faf5f; } .rc-text-green { color: var(--rc-green); } .rc-text-orange { color: var(--rc-orange); } .rc-text-accent { color: var(--rc-accent); } .rc-text-amber { color: #ffbd2e; } .rc-text-red { color: #ff5f56; } .rc-text-hi { color: var(--rc-hi); } .rc-text-purple { color: #c084fc; } .rc-mt-8 { margin-top: 8px; } .rc-lh-relaxed { line-height: 1.7; } .rc-img-mt { margin-top: 8px; } .rc-p-small { font-size: 0.8rem; color: var(--rc-text); margin-top: 8px; } /* Content inline links (inside blog / tool body text) */ .content-link { color: inherit; text-decoration: underline; text-underline-offset: 2px; } /* Blog post text links */ .text-link { color: var(--rc-text); text-decoration: none; border-bottom: 1px solid var(--rc-orange); } .text-link-orange { color: var(--rc-orange); text-decoration: none; border-bottom: 1px solid var(--rc-orange); } /* Legend dots for charts */ .legend-dot-green { background: var(--rc-green); } .legend-dot-green-dim { background: var(--rc-green); opacity: 0.7; } .legend-dot-accent { background: var(--rc-accent); } .legend-dot-hi { background: var(--rc-hi); opacity: 0.75; } .legend-dot-amber { background: var(--rc-amber); opacity: 0.8; } .legend-dot-red { background: var(--rc-red); opacity: 0.85; } /* Progress / limit bars */ .limit-bar-accent { width: 100%; background: var(--rc-accent); } .limit-bar-orange { width: 100%; background: var(--rc-orange); } .limit-bar-green { width: 8%; background: var(--rc-green); } .limit-bar-hi { width: 40%; background: var(--rc-hi); } /* Meter bars */ .meter-green { width: 100%; background: var(--rc-green); } .meter-green-90 { width: 90%; background: #5faf5f; } .meter-orange-75 { width: 75%; background: var(--rc-orange); } .meter-orange-50 { width: 50%; background: #ff8f3f; } .meter-red-10 { width: 10%; background: #ff5f5f; } /* Styled list */ .styled-list { margin-left: 20px; margin-bottom: 18px; } .styled-list li { margin-bottom: 8px; color: var(--rc-text); } /* 404 animation delays */ .delay-02 { animation-delay: 0.2s; } .delay-12 { animation-delay: 1.2s; } .delay-14 { animation-delay: 1.4s; } .delay-18 { animation-delay: 1.8s; } /* Embed / form labels */ .embed-label-tab { display: block; padding: 6px 14px 0; } .hint-estimated { margin-left: auto; color: var(--rc-orange); } /* Filler / highlight section headers */ .filler-header-red { color: var(--rc-red); font-size: 0.75rem; margin-bottom: 8px; } .filler-header-amber { color: #ffbd2e; font-size: 0.75rem; margin-bottom: 8px; } .filler-header-purple { color: #c084fc; font-size: 0.75rem; margin-bottom: 8px; } /* Terminal message / easter egg internal styles */ .terminal-msg-line { margin: 4px 0; white-space: pre; } .cow-msg { color: #ffaf5f; margin: 0; } .diff-separator { border-top: 1px solid var(--rc-border); margin: 8px 0; } .nyan-cat-text { color: #fff; } /* ════════════════════════════════════════════════════════════════ RESPONSIVE BREAKPOINTS (shared) ════════════════════════════════════════════════════════════════ */ @media (max-width: 768px) { body { padding: 20px 20px 60px 20px; } } @media (max-width: 600px) { h1 { font-size: 1.2rem; } }