/* ============================================================ THEME TOKENS Default (no set) = LIGHT — "the printed manual". System preference for dark, when the person hasn't chosen manually, is honored by the prefers-color-scheme block below. An explicit choice (data-theme="light" | "dark") always wins, set by theme.js and remembered in localStorage. ============================================================ */ :root { --bg: #eef0f4; --bg-rgb: 238, 240, 244; --panel: #ffffff; --panel-raised: #f6f7fa; --line: #dbdfe6; --text: #14181f; --muted: #5b6472; --amber: #c97e00; --amber-dim: #8f5c00; --amber-solid: #ffb000; --teal: #1f8f88; --red: #c8432a; --radius: 10px; --mono: 'IBM Plex Mono', ui-monospace, monospace; --sans: 'Inter', system-ui, -apple-system, sans-serif; --overlay-opacity: 0; --shadow-strength: 0.08; } @media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) { --bg: #0b0e14; --bg-rgb: 11, 14, 20; --panel: #12161f; --panel-raised: #171c27; --line: #2a3140; --text: #edeae0; --muted: #8b93a5; --amber: #ffb000; --amber-dim: #a97400; --amber-solid: #ffb000; --teal: #3aafa9; --red: #e2543a; --overlay-opacity: 1; --shadow-strength: 0.5; } } :root[data-theme="dark"] { --bg: #0b0e14; --bg-rgb: 11, 14, 20; --panel: #12161f; --panel-raised: #171c27; --line: #2a3140; --text: #edeae0; --muted: #8b93a5; --amber: #ffb000; --amber-dim: #a97400; --amber-solid: #ffb000; --teal: #3aafa9; --red: #e2543a; --overlay-opacity: 1; --shadow-strength: 0.5; } * { box-sizing: border-box; } html { scroll-behavior: smooth; } body { margin: 0; background: var(--bg); color: var(--text); font-family: var(--sans); line-height: 1.55; -webkit-font-smoothing: antialiased; transition: background 0.2s ease, color 0.2s ease; } .wrap { max-width: 1040px; margin: 0 auto; padding: 0 24px; } .wrap-narrow { max-width: 720px; } a { color: var(--amber); } /* Signature element: in dark mode this reads as a live CRT screen (scanlines). In light mode the screen is "off" and the page reads as the printed instruction manual instead — texture swaps off rather than just inverting colors. */ .crt-overlay { position: fixed; inset: 0; pointer-events: none; z-index: 50; background: repeating-linear-gradient( to bottom, rgba(255, 255, 255, 0.018) 0px, rgba(255, 255, 255, 0.018) 1px, transparent 1px, transparent 3px ); mix-blend-mode: overlay; opacity: var(--overlay-opacity); transition: opacity 0.2s ease; } @media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } } /* ---------- HEADER ---------- */ .site-header { border-bottom: 1px solid var(--line); padding: 16px 0; position: sticky; top: 0; background: rgba(var(--bg-rgb), 0.85); backdrop-filter: blur(6px); z-index: 40; } .site-header .wrap { display: flex; align-items: center; justify-content: space-between; gap: 16px; } .brand { display: flex; align-items: center; gap: 12px; text-decoration: none; color: inherit; } .brand-mark svg { display: block; transition: transform 0.2s ease; } .brand:hover .brand-mark svg { transform: translateY(-1px); } .brand-text { display: flex; flex-direction: column; line-height: 1.2; } .brand-name { font-family: var(--mono); font-weight: 700; font-size: 15px; letter-spacing: 0.06em; color: var(--text); } .brand-sub { font-family: var(--mono); font-size: 10px; letter-spacing: 0.1em; color: var(--amber-dim); } .header-right { display: flex; align-items: center; gap: 20px; } .site-nav { display: flex; gap: 24px; } .site-nav a { font-family: var(--mono); font-size: 12px; letter-spacing: 0.05em; text-decoration: none; color: var(--muted); transition: color 0.15s; } .site-nav a:hover { color: var(--amber); } .theme-toggle { width: 34px; height: 34px; border-radius: 8px; border: 1px solid var(--line); background: var(--panel); font-size: 15px; line-height: 1; cursor: pointer; display: flex; align-items: center; justify-content: center; transition: border-color 0.15s, transform 0.1s; } .theme-toggle:hover { border-color: var(--muted); } .theme-toggle:active { transform: scale(0.94); } .nav-toggle { display: none; width: 34px; height: 34px; border-radius: 8px; border: 1px solid var(--line); background: var(--panel); color: var(--text); cursor: pointer; align-items: center; justify-content: center; transition: border-color 0.15s; } .nav-toggle:hover { border-color: var(--muted); } .mobile-nav { display: none; flex-direction: column; border-top: 1px solid var(--line); background: var(--panel); } .mobile-nav.hidden { display: none !important; } .mobile-nav a { font-family: var(--mono); font-size: 13.5px; letter-spacing: 0.03em; color: var(--muted); text-decoration: none; padding: 14px 24px; border-bottom: 1px solid var(--line); } .mobile-nav a:last-child { border-bottom: none; } .mobile-nav a:active { color: var(--amber); } /* ---------- HERO ---------- */ .hero { padding: 60px 0 48px; } .hero-grid { display: grid; grid-template-columns: 1.1fr 0.9fr; gap: 48px; align-items: center; } .eyebrow { font-family: var(--mono); font-size: 11px; letter-spacing: 0.14em; color: var(--teal); margin: 0 0 18px; } .hero h1 { font-family: var(--sans); font-weight: 700; font-size: clamp(28px, 3.4vw, 42px); line-height: 1.15; margin: 0 0 20px; letter-spacing: -0.01em; } .hero-sub { color: var(--muted); font-size: 17px; margin: 0 0 28px; } .hero-cta { text-decoration: none; display: inline-flex; } .hero-preview { background: var(--panel); border: 1px solid var(--line); border-radius: var(--radius); overflow: hidden; box-shadow: 0 24px 50px -28px rgba(0, 0, 0, calc(var(--shadow-strength) * 1.1)); } .hero-preview-topbar { display: flex; align-items: center; justify-content: space-between; padding: 10px 16px; background: var(--panel-raised); border-bottom: 1px solid var(--line); } .hero-preview-body { padding: 18px 18px 6px; display: flex; flex-direction: column; gap: 14px; } .hero-preview-row { display: flex; flex-direction: column; gap: 4px; padding-bottom: 14px; border-bottom: 1px dashed var(--line); } .hero-preview-row:last-child { border-bottom: none; padding-bottom: 4px; } .hero-preview-raw { font-family: var(--mono); font-size: 12.5px; color: var(--muted); } .hero-preview-arrow { font-family: var(--mono); font-size: 11px; color: var(--amber); } .hero-preview-clean { font-family: var(--sans); font-size: 14px; color: var(--text); font-weight: 500; } /* ---------- DECODER DEVICE ---------- */ .decoder-section { padding: 20px 0 72px; } .device { background: var(--panel); border: 1px solid var(--line); border-radius: var(--radius); overflow: hidden; box-shadow: 0 30px 60px -30px rgba(0, 0, 0, var(--shadow-strength)); } .device-topbar, .output-topbar { display: flex; align-items: center; justify-content: space-between; padding: 10px 16px; background: var(--panel-raised); border-bottom: 1px solid var(--line); } .dots { display: flex; gap: 6px; } .dots span { width: 8px; height: 8px; border-radius: 50%; background: var(--line); } .dots span:first-child { background: var(--red); opacity: 0.6; } .device-label { font-family: var(--mono); font-size: 10px; letter-spacing: 0.14em; color: var(--muted); } .device-body { padding: 20px; } .field-label { display: block; font-family: var(--mono); font-size: 11px; letter-spacing: 0.06em; color: var(--muted); margin-bottom: 10px; } textarea { width: 100%; background: var(--bg); border: 1px solid var(--line); border-radius: 6px; color: var(--text); font-family: var(--sans); font-size: 15.5px; padding: 14px; resize: vertical; min-height: 120px; } textarea:focus { outline: none; border-color: var(--amber); box-shadow: 0 0 0 3px rgba(255, 176, 0, 0.15); } .controls { display: flex; align-items: center; gap: 12px; margin-top: 14px; flex-wrap: wrap; } .btn-primary, .btn-ghost { font-family: var(--mono); font-size: 13px; letter-spacing: 0.04em; border-radius: 6px; padding: 11px 18px; cursor: pointer; border: 1px solid transparent; display: inline-flex; align-items: center; gap: 8px; transition: transform 0.1s, background 0.15s, border-color 0.15s; } .btn-primary { background: var(--amber-solid); color: #1a1400; font-weight: 600; } .btn-primary:hover { background: #ffc233; } .btn-primary:active { transform: scale(0.98); } .btn-ghost { background: transparent; border-color: var(--line); color: var(--muted); } .btn-ghost:hover { color: var(--text); border-color: var(--muted); } .status-line { font-family: var(--mono); font-size: 11px; color: var(--teal); letter-spacing: 0.04em; } .output-wrap { margin-top: 20px; border: 1px solid var(--line); border-radius: 6px; overflow: hidden; } .rec-dot { width: 7px; height: 7px; border-radius: 50%; background: var(--muted); } .rec-dot.active { background: var(--red); box-shadow: 0 0 6px var(--red); animation: blink 1.1s infinite; } @keyframes blink { 50% { opacity: 0.25; } } .output-text { padding: 16px; font-size: 15.5px; min-height: 60px; white-space: pre-wrap; } .output-text.placeholder { color: var(--muted); font-style: italic; } .output-text mark { background: rgba(58, 175, 169, 0.18); color: var(--teal); border-bottom: 1px dashed var(--teal); padding: 0 2px; border-radius: 2px; } /* ---------- STATUS / NEGATIVE BADGE ---------- */ .negative-status { font-family: var(--mono); font-size: 11px; letter-spacing: 0.04em; color: var(--red); font-weight: 700; background: rgba(226, 84, 58, 0.12); border: 1px solid rgba(226, 84, 58, 0.5); border-radius: 5px; padding: 4px 9px; } .negative-status.hidden { display: none; } /* ---------- FOUND TERMS (wide, short — matches the input box footprint) ---------- */ .found-terms { margin-top: 36px; } .found-terms.hidden { display: none; } .found-terms h2 { font-family: var(--mono); font-size: 15px; letter-spacing: 0.04em; margin: 0 0 4px; } .found-terms-sub { color: var(--muted); font-size: 13px; margin: 0 0 18px; } .found-terms-list { display: flex; flex-wrap: nowrap; gap: 12px; overflow-x: auto; overflow-y: hidden; padding-bottom: 6px; scroll-snap-type: x proximity; } .found-terms-list::-webkit-scrollbar { height: 6px; } .found-terms-list::-webkit-scrollbar-thumb { background: var(--line); border-radius: 3px; } .term-card { background: var(--panel); border: 1px solid var(--line); border-radius: 8px; padding: 14px 16px; flex: 0 0 260px; scroll-snap-align: start; } .term-card .term-word { font-family: var(--mono); color: var(--amber); font-weight: 600; font-size: 13.5px; display: block; margin-bottom: 6px; } .term-card .term-def { color: var(--text); font-size: 13.5px; margin: 0; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; } /* ---------- GLOSSARY TEASER (on the main decoder page) ---------- */ .glossary-teaser { padding: 36px 0; border-top: 1px solid var(--line); } .glossary-teaser-box { display: flex; align-items: center; justify-content: space-between; gap: 20px; flex-wrap: wrap; background: var(--panel); border: 1px solid var(--line); border-radius: 10px; padding: 22px 24px; } .glossary-teaser-box h2 { font-family: var(--sans); font-size: 18px; margin: 0 0 4px; } .glossary-teaser-box p { color: var(--muted); font-size: 14px; margin: 0; } .glossary-teaser-btn { flex-shrink: 0; text-decoration: none; } /* ---------- GLOSSARY PAGE HERO (glossary.html) ---------- */ .glossary-page-hero { padding: 56px 0 28px; } .glossary-page-hero h1 { font-family: var(--sans); font-weight: 700; font-size: clamp(26px, 4vw, 36px); margin: 0 0 12px; } .glossary-count { font-family: var(--mono); font-size: 12px; color: var(--muted); margin: 0; } /* ---------- GLOSSARY ---------- */ .glossary-section { padding: 20px 0 60px; } .glossary-section h2 { font-family: var(--sans); font-size: 26px; margin: 0 0 8px; } .glossary-sub { color: var(--muted); margin: 0 0 24px; } .glossary-search input { width: 100%; max-width: 320px; background: var(--bg); border: 1px solid var(--line); border-radius: 6px; color: var(--text); font-family: var(--sans); font-size: 14px; padding: 10px 14px; margin-bottom: 12px; } .glossary-search input:focus { outline: none; border-color: var(--amber); } .glossary-list { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 1px; background: var(--line); border: 1px solid var(--line); border-radius: 8px; overflow: hidden; } .glossary-item { background: var(--panel-raised); padding: 16px 18px; } .glossary-item .g-term { font-family: var(--mono); color: var(--teal); font-weight: 600; font-size: 13.5px; display: block; margin-bottom: 6px; text-transform: lowercase; } .glossary-item .g-def { font-size: 13.5px; color: var(--text); margin: 0; } .glossary-item.g-hidden { display: none; } /* ---------- ABOUT ---------- */ .about-section { padding: 68px 0; border-top: 1px solid var(--line); } .about-grid { display: grid; grid-template-columns: 1.3fr 0.7fr; gap: 48px; align-items: start; } .about-copy h2, .about-section h2 { font-size: 24px; margin: 0 0 16px; } .about-copy p, .about-section p { color: var(--muted); font-size: 15.5px; margin: 0 0 14px; } .about-section h3 { font-size: 15px; margin: 24px 0 8px; color: var(--text); } .about-suggest-link { display: inline-block; font-family: var(--mono); font-size: 13px; color: var(--amber); text-decoration: none; margin-top: 6px; } .about-suggest-link:hover { text-decoration: underline; } .about-facts { margin: 0; display: grid; grid-template-columns: 1fr 1fr; gap: 1px; background: var(--line); border: 1px solid var(--line); border-radius: 10px; overflow: hidden; } .about-fact { background: var(--panel); padding: 18px 16px; } .about-fact dt { font-family: var(--mono); font-weight: 700; font-size: 18px; color: var(--teal); margin: 0 0 4px; } .about-fact dd { margin: 0; font-size: 12.5px; color: var(--muted); line-height: 1.4; } /* ---------- FOOTER ---------- */ .site-footer { border-top: 1px solid var(--line); padding: 40px 0 30px; } .ad-slot { border: 1px dashed var(--line); border-radius: 8px; min-height: 90px; display: flex; align-items: center; justify-content: center; margin-bottom: 28px; } .ad-slot-label { font-family: var(--mono); font-size: 11px; letter-spacing: 0.1em; color: var(--muted); } .footer-bottom { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 16px; margin-bottom: 18px; } .footer-links { font-family: var(--mono); font-size: 12px; color: var(--muted); display: flex; gap: 8px; align-items: center; } .footer-links a { color: var(--muted); text-decoration: none; } .footer-links a:hover { color: var(--amber); } .coffee-form { margin: 0; } .coffee-btn { font-family: var(--mono); font-size: 12.5px; background: transparent; border: 1px solid var(--amber-dim); color: var(--amber); border-radius: 6px; padding: 9px 14px; cursor: pointer; display: inline-flex; align-items: center; gap: 8px; transition: background 0.15s, color 0.15s; } .coffee-btn:hover { background: var(--amber-solid); color: #1a1400; } .footer-note { font-size: 12px; color: var(--muted); margin: 0; } /* ---------- SAFETY MODAL ---------- */ .modal-overlay { position: fixed; inset: 0; background: rgba(5, 6, 9, 0.72); backdrop-filter: blur(2px); display: flex; align-items: center; justify-content: center; z-index: 100; padding: 20px; } .modal-overlay.hidden { display: none; } .modal-box { position: relative; background: var(--panel); border: 1px solid #6b3a2f; border-radius: 12px; max-width: 520px; width: 100%; max-height: 85vh; overflow-y: auto; padding: 28px 26px 24px; box-shadow: 0 40px 90px -20px rgba(0, 0, 0, calc(var(--shadow-strength) + 0.25)); } .modal-close { position: absolute; top: 14px; right: 14px; background: transparent; border: none; color: var(--muted); font-size: 15px; cursor: pointer; padding: 4px 8px; line-height: 1; } .modal-close:hover { color: var(--text); } .modal-box .safety-icon { color: var(--red); margin-bottom: 12px; } .safety-title { margin: 0 0 10px; font-family: var(--mono); font-size: 15px; letter-spacing: 0.02em; color: var(--text); font-weight: 600; } .safety-body { margin: 0 0 16px; font-size: 14.5px; color: var(--text); line-height: 1.55; } .safety-flagged-terms { display: flex; flex-direction: column; gap: 10px; margin-bottom: 16px; } .safety-flagged-terms.empty { display: none; } .flagged-term-card { background: rgba(226, 84, 58, 0.08); border: 1px solid rgba(226, 84, 58, 0.4); border-radius: 8px; padding: 12px 14px; } .flagged-term-word { display: block; font-family: var(--mono); font-size: 13px; font-weight: 700; color: var(--red); margin-bottom: 5px; } .flagged-term-meaning { margin: 0 0 6px; font-size: 13.5px; color: var(--text); font-weight: 600; } .flagged-term-concern { margin: 0; font-size: 13px; color: var(--muted); line-height: 1.5; } .safety-resources { display: flex; flex-direction: column; gap: 8px; margin-bottom: 14px; } .safety-resource { font-size: 13.5px; padding: 10px 12px; background: var(--panel-raised); border: 1px solid var(--line); border-radius: 6px; color: var(--text); } .safety-resource strong { color: var(--red); font-family: var(--mono); font-weight: 600; display: inline-block; margin-right: 6px; } .safety-resource a { color: var(--teal); } .safety-disclaimer { margin: 0; font-size: 12px; color: var(--muted); line-height: 1.5; } /* ---------- SUGGEST A WORD ---------- */ .suggest-section { padding: 12px 0 60px; } .suggest-form { background: var(--panel); border: 1px solid var(--line); border-radius: var(--radius); padding: 24px; display: flex; flex-direction: column; gap: 4px; } .suggest-form input[type="text"], .suggest-form input[type="email"], .suggest-form input[type="password"], .suggest-form textarea { width: 100%; background: var(--bg); border: 1px solid var(--line); border-radius: 6px; color: var(--text); font-family: var(--sans); font-size: 15px; padding: 11px 13px; margin-bottom: 16px; resize: vertical; } .suggest-form input:focus, .suggest-form textarea:focus { outline: none; border-color: var(--amber); box-shadow: 0 0 0 3px rgba(255, 176, 0, 0.15); } .required { color: var(--red); margin-left: 2px; } .suggest-controls { display: flex; align-items: center; gap: 14px; margin-top: 4px; } .suggest-note { font-size: 12.5px; color: var(--muted); margin: 18px 0 0; line-height: 1.5; } .suggest-fallback { font-size: 13px; color: var(--muted); margin-top: 16px; text-align: center; } /* ---------- ADMIN ---------- */ .admin-signin-section, .admin-panel-section { padding: 40px 0 60px; } .admin-signin-section.hidden, .admin-panel-section.hidden { display: none; } .admin-signin-section h1, .admin-panel-section h1 { font-size: 26px; margin: 0 0 10px; } .signin-error { color: var(--red); font-size: 13px; margin: 10px 0 0; min-height: 1em; } .submissions-list { display: flex; flex-direction: column; gap: 16px; margin-top: 24px; } .submission-row { background: var(--panel); border: 1px solid var(--line); border-radius: 10px; padding: 18px 20px; } .submission-meta { display: flex; align-items: center; gap: 12px; margin-bottom: 8px; flex-wrap: wrap; } .submission-term { font-family: var(--mono); font-weight: 700; font-size: 15px; color: var(--amber); } .submission-email { font-family: var(--mono); font-size: 12px; color: var(--muted); } .submission-original-note { font-size: 13.5px; color: var(--muted); background: var(--panel-raised); border-radius: 6px; padding: 8px 10px; margin: 0 0 14px; } .submission-row .field-label { margin-top: 4px; } .submission-row input[type="text"], .submission-row textarea { width: 100%; background: var(--bg); border: 1px solid var(--line); border-radius: 6px; color: var(--text); font-family: var(--sans); font-size: 14px; padding: 9px 11px; margin-bottom: 12px; resize: vertical; } .submission-actions { display: flex; gap: 12px; } /* ---------- RESPONSIVE ---------- */ @media (max-width: 860px) { .hero-grid { grid-template-columns: 1fr; } .about-grid { grid-template-columns: 1fr; } .about-facts { grid-template-columns: 1fr 1fr; } } /* Tablet / mobile: swap the inline nav for a hamburger + dropdown panel */ @media (max-width: 640px) { .wrap { padding: 0 18px; } .site-nav { display: none; } .nav-toggle { display: flex; } .mobile-nav:not(.hidden) { display: flex; } .site-header { padding: 12px 0; } .brand-sub { display: none; } .hero { padding: 32px 0 20px; } .hero-grid { gap: 28px; } .eyebrow { font-size: 10px; margin-bottom: 12px; } .hero h1 { font-size: 26px; } .hero-sub { font-size: 15.5px; margin-bottom: 22px; } .hero-cta { width: 100%; justify-content: center; } .hero-preview-body { padding: 14px 14px 4px; } .decoder-section { padding: 4px 0 48px; } .device-body { padding: 14px; } textarea { font-size: 16px; min-height: 100px; } /* 16px avoids iOS auto-zoom on focus */ .controls { gap: 10px; } .btn-primary, .btn-ghost { flex: 1 1 auto; justify-content: center; padding: 12px 16px; } .status-line, .negative-status { flex-basis: 100%; } .found-terms-list { gap: 10px; } .term-card { flex-basis: 220px; } .about-section { padding: 44px 0; } .about-facts { grid-template-columns: 1fr 1fr; } .about-fact { padding: 14px 12px; } .glossary-teaser { padding: 24px 0; } .glossary-teaser-box { flex-direction: column; align-items: flex-start; padding: 18px; } .glossary-teaser-btn { width: 100%; justify-content: center; } .glossary-page-hero { padding: 36px 0 20px; } .glossary-page-hero h1 { font-size: 26px; } .glossary-list { grid-template-columns: 1fr; } .suggest-form { padding: 18px; } .suggest-controls { flex-direction: column; align-items: stretch; gap: 10px; } .suggest-controls .btn-primary { justify-content: center; } .submission-row { padding: 16px; } .submission-actions { flex-direction: column; } .submission-actions button { width: 100%; justify-content: center; } .modal-box { padding: 22px 18px 20px; max-height: 90vh; } .safety-title { font-size: 14px; } .safety-body { font-size: 14px; } .footer-bottom { flex-direction: column; align-items: flex-start; gap: 16px; } .coffee-form { width: 100%; } .coffee-btn { width: 100%; justify-content: center; } .footer-links { flex-wrap: wrap; row-gap: 6px; } } @media (max-width: 400px) { .about-facts { grid-template-columns: 1fr; } .hero h1 { font-size: 23px; } }