/* ═══════════════════════════════════════════════════════════════ Logic Translator — style.css Theme via ═══════════════════════════════════════════════════════════════ */ /* ── Design tokens ───────────────────────────────────────────── */ :root { --font-sans: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; --font-display: "Source Serif 4", Georgia, "Times New Roman", serif; --font-mono: "SFMono-Regular", "Consolas", "Liberation Mono", monospace; --radius-sm: 8px; --radius-md: 12px; --radius-lg: 16px; --space-1: 4px; --space-2: 8px; --space-3: 12px; --space-4: 16px; --space-5: 24px; --space-6: 32px; --transition: 0.18s ease; } /* ── Light theme ─────────────────────────────────────────────── */ :root, html[data-theme="light"] { --bg: #f5f6f8; --bg-elev: #ffffff; --bg-sunken: #eef0f4; --bg-code: #f2f3f7; --border: #e2e5ec; --border-strong: #cfd4de; --text: #1a1d24; --text-muted: #6b7280; --text-faint: #9aa1ad; --accent: #3b6cf0; --accent-hover: #2f5ce0; --accent-soft: #e6edff; --true: #1e9e63; --false: #d9534f; --shadow-sm: 0 1px 2px rgba(20, 25, 40, 0.04); --shadow-md: 0 4px 16px rgba(20, 25, 40, 0.06); } /* ── Dark theme ──────────────────────────────────────────────── */ html[data-theme="dark"] { --bg: #0f1115; --bg-elev: #171a21; --bg-sunken: #1c2029; --bg-code: #13161d; --border: #262b36; --border-strong: #333a48; --text: #e7e9ee; --text-muted: #8b93a5; --text-faint: #616a7c; --accent: #6ea8fe; --accent-hover: #86b9ff; --accent-soft: #1c2740; --true: #5ddc9a; --false: #ff8b8b; --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.4); --shadow-md: 0 6px 22px rgba(0, 0, 0, 0.45); } /* ── Base ────────────────────────────────────────────────────── */ *, *::before, *::after { box-sizing: border-box; } html { -webkit-text-size-adjust: 100%; } body { margin: 0; min-height: 100vh; font-family: var(--font-sans); font-size: 15px; line-height: 1.55; color: var(--text); background: var(--bg); display: flex; flex-direction: column; transition: background var(--transition), color var(--transition); letter-spacing: -0.01em; } h1, h2, h3, p { margin: 0; } button { font: inherit; color: inherit; cursor: pointer; } code, pre { font-family: var(--font-mono); } .sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; } /* ── Theme toggle (fixed corner) ─────────────────────────────── */ .theme-toggle { position: fixed; top: 16px; right: 16px; z-index: 50; width: 40px; height: 40px; border-radius: 50%; border: 1px solid var(--border); background: var(--bg-elev); box-shadow: var(--shadow-sm); display: grid; place-items: center; transition: background var(--transition), border-color var(--transition), transform var(--transition); } .theme-toggle:hover { transform: scale(1.06); border-color: var(--border-strong); } .theme-icon { grid-area: 1 / 1; font-size: 16px; line-height: 1; transition: opacity var(--transition), transform var(--transition); } html[data-theme="light"] .theme-icon-moon { opacity: 0; transform: scale(0.6); } html[data-theme="dark"] .theme-icon-sun { opacity: 0; transform: scale(0.6); } /* ── App shell ───────────────────────────────────────────────── */ .app { flex: 1; width: 100%; max-width: 1080px; margin: 0 auto; padding: 48px 24px 32px; } /* ── Brand header ────────────────────────────────────────────── */ .brand-header { margin-bottom: var(--space-6); text-align: center; } .brand-kicker { font-size: 12px; font-weight: 600; letter-spacing: 1.6px; text-transform: uppercase; color: var(--text-muted); margin-bottom: var(--space-2); } .brand-kicker span { color: var(--accent); margin: 0 6px; } .brand-header h1 { font-family: var(--font-display); font-size: 34px; font-weight: 700; letter-spacing: -0.02em; line-height: 1.1; } .brand-subtitle { margin-top: var(--space-2); color: var(--text-muted); font-size: 14px; } /* ── Translator card ─────────────────────────────────────────── */ .translator-layout { display: block; } .translator { background: var(--bg-elev); border: 1px solid var(--border); border-radius: var(--radius-lg); box-shadow: var(--shadow-md); overflow: hidden; } /* ── Mode switch ─────────────────────────────────────────────── */ .mode-switch { display: flex; gap: var(--space-1); padding: var(--space-3) var(--space-4) 0; border-bottom: 1px solid var(--border); } .mode-btn { background: transparent; border: 0; border-bottom: 2px solid transparent; padding: var(--space-2) var(--space-3) var(--space-3); display: flex; flex-direction: column; align-items: flex-start; gap: 2px; color: var(--text-muted); transition: color var(--transition), border-color var(--transition); } .mode-btn .mode-name { font-weight: 600; font-size: 14px; color: var(--text); } .mode-btn .mode-example { font-size: 12px; color: var(--text-faint); } .mode-btn:hover { color: var(--text); } .mode-btn.active { border-bottom-color: var(--accent); } .mode-btn.active .mode-name { color: var(--accent); } /* ── Two-pane translator body ────────────────────────────────── */ .panes { display: grid; grid-template-columns: 1fr 1fr; gap: 1px; background: var(--border); border-top: 1px solid var(--border); } .pane { background: var(--bg-elev); padding: var(--space-4) var(--space-5); min-height: 220px; display: flex; flex-direction: column; } .pane-label { font-size: 11px; font-weight: 600; letter-spacing: 1.4px; text-transform: uppercase; color: var(--text-muted); margin-bottom: var(--space-3); } .input { flex: 1; width: 100%; background: transparent; border: 0; outline: 0; resize: none; color: var(--text); font: inherit; font-size: 16px; line-height: 1.5; min-height: 80px; } .input::placeholder { color: var(--text-faint); } .input-help { margin-top: var(--space-2); font-size: 12.5px; color: var(--text-faint); } .output { flex: 1; font-size: 16px; line-height: 1.5; color: var(--text); white-space: pre-wrap; } .output:empty::before { content: "Translation appears here…"; color: var(--text-faint); font-style: italic; } /* ── Example chips (inside English pane) ────────────────────── */ .examples { margin-top: var(--space-3); padding-top: var(--space-3); border-top: 1px dashed var(--border); display: flex; flex-direction: column; gap: var(--space-2); } .examples-label { font-size: 11px; font-weight: 600; letter-spacing: 1.2px; text-transform: uppercase; color: var(--text-faint); } .examples-list { display: flex; flex-wrap: wrap; gap: var(--space-2); } .example-btn { background: var(--bg-sunken); border: 1px solid var(--border); color: var(--text-muted); font-size: 12.5px; line-height: 1; padding: 6px 10px; border-radius: 999px; white-space: nowrap; transition: background var(--transition), color var(--transition), border-color var(--transition), transform var(--transition); } .example-btn:hover { background: var(--accent-soft); color: var(--accent); border-color: var(--accent); } .example-btn:active { transform: translateY(1px); } /* ── Actions ─────────────────────────────────────────────────── */ .actions { display: flex; justify-content: center; padding: var(--space-4); border-top: 1px solid var(--border); background: var(--bg-elev); } .btn-primary { background: var(--accent); color: #fff; border: 0; padding: 10px 26px; border-radius: var(--radius-sm); font-weight: 600; font-size: 14.5px; letter-spacing: 0.2px; transition: background var(--transition), transform var(--transition); } .btn-primary:hover { background: var(--accent-hover); } .btn-primary:active { transform: translateY(1px); } .btn-primary span { margin-left: 4px; } /* ── Results ─────────────────────────────────────────────────── */ .results { margin-top: var(--space-5); display: flex; flex-direction: column; gap: var(--space-4); } .results[hidden] { display: none; } /* ── Summary strip ───────────────────────────────────────────── */ .summary { background: var(--bg-elev); border: 1px solid var(--border); border-left: 3px solid var(--accent); border-radius: var(--radius-md); padding: var(--space-3) var(--space-4); box-shadow: var(--shadow-sm); } .summary[hidden] { display: none; } .summary-line { display: flex; flex-wrap: wrap; align-items: baseline; gap: var(--space-2); font-family: var(--font-mono); font-size: 14.5px; line-height: 1.6; } .summary-formula { font-weight: 700; color: var(--text); font-size: 15px; } .summary-sep { color: var(--text-faint); } .summary-connectives { color: var(--text-muted); } .summary-type { margin-top: var(--space-1); font-size: 12.5px; color: var(--text-muted); font-family: var(--font-mono); } .summary-type span { color: var(--accent); font-weight: 600; } /* ── Analysis grid ───────────────────────────────────────────── */ .analysis-grid { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-4); } .analysis.full { grid-column: 1 / -1; } /* ── Analysis card (details element) ─────────────────────────── */ .analysis { background: var(--bg-elev); border: 1px solid var(--border); border-radius: var(--radius-md); box-shadow: var(--shadow-sm); overflow: hidden; } .analysis > summary { list-style: none; cursor: pointer; padding: var(--space-3) var(--space-4); font-size: 13px; font-weight: 600; letter-spacing: 0.4px; text-transform: uppercase; color: var(--text-muted); display: flex; align-items: center; gap: var(--space-2); user-select: none; transition: color var(--transition), background var(--transition); } .analysis > summary::-webkit-details-marker { display: none; } .analysis > summary::before { content: "▸"; display: inline-block; font-size: 10px; color: var(--text-faint); transition: transform var(--transition); } .analysis[open] > summary::before { transform: rotate(90deg); } .analysis > summary:hover { color: var(--text); background: var(--bg-sunken); } .analysis > *:not(summary) { padding: 0 var(--space-4) var(--space-4); } /* ── Truth table ─────────────────────────────────────────────── */ .table-wrap { overflow-x: auto; } .table-wrap table { width: 100%; border-collapse: collapse; font-family: var(--font-mono); font-size: 13px; } .table-wrap th, .table-wrap td { text-align: center; padding: 6px 6px; border: 1px solid var(--border); } .table-wrap th { color: var(--text-muted); font-weight: 600; font-size: 12px; background: var(--bg-sunken); } .table-wrap tbody tr:last-child td { border-bottom: 1px solid var(--border); } .table-wrap td.is-true { color: var(--true); font-weight: 600; } .table-wrap td.is-false { color: var(--false); font-weight: 600; } .table-wrap tr.is-highlight { background: var(--accent-soft); } .classification { margin-top: var(--space-3); font-size: 13px; color: var(--text-muted); } .classification b { color: var(--accent); } /* ── Implication forms ──────────────────────────────────────── */ .forms { display: flex; flex-direction: column; gap: var(--space-2); } .forms .form-row { display: grid; grid-template-columns: 110px 1fr; gap: var(--space-3); align-items: baseline; padding: var(--space-2) 0; border-bottom: 1px solid var(--border); font-size: 13.5px; } .forms .form-row:last-child { border-bottom: 0; } .forms .form-name { color: var(--text-muted); font-size: 12.5px; } .forms .form-expr { font-family: var(--font-mono); color: var(--text); word-break: break-word; } .forms .form-row.is-original .form-expr { color: var(--accent); font-weight: 600; } /* ── Simplification steps ───────────────────────────────────── */ .steps { display: flex; flex-direction: column; gap: var(--space-2); font-family: var(--font-mono); font-size: 13.5px; counter-reset: step; } .steps .step { display: flex; gap: var(--space-3); align-items: baseline; padding: var(--space-2) 0; border-bottom: 1px solid var(--border); } .steps .step:last-child { border-bottom: 0; } .steps .step::before { counter-increment: step; content: counter(step); color: var(--text-faint); font-size: 12px; min-width: 18px; text-align: right; } .steps .step-expr { color: var(--text); } .steps .step-note { color: var(--text-muted); font-size: 12.5px; margin-left: 8px; } /* ── Secondary panels (source code) ─────────────────────────── */ .secondary-panel { margin-top: var(--space-5); background: var(--bg-elev); border: 1px solid var(--border); border-radius: var(--radius-md); box-shadow: var(--shadow-sm); overflow: hidden; } .secondary-panel > summary { list-style: none; cursor: pointer; padding: var(--space-3) var(--space-4); font-size: 14px; color: var(--text-muted); display: flex; align-items: center; gap: var(--space-2); user-select: none; transition: color var(--transition), background var(--transition); } .secondary-panel > summary::-webkit-details-marker { display: none; } .secondary-panel > summary::before { content: "▸"; font-size: 10px; color: var(--text-faint); transition: transform var(--transition); } .secondary-panel[open] > summary::before { transform: rotate(90deg); } .secondary-panel > summary:hover { color: var(--text); background: var(--bg-sunken); } .tabs { display: flex; gap: var(--space-1); padding: 0 var(--space-4); border-bottom: 1px solid var(--border); } .tab-btn { background: transparent; border: 0; padding: var(--space-2) var(--space-3); font-size: 13px; color: var(--text-muted); border-bottom: 2px solid transparent; transition: color var(--transition), border-color var(--transition); } .tab-btn:hover { color: var(--text); } .tab-btn.active { color: var(--accent); border-bottom-color: var(--accent); } .tab-panels { padding: var(--space-4); } .code-panel { display: none; margin: 0; padding: var(--space-4); background: var(--bg-code); border: 1px solid var(--border); border-radius: var(--radius-sm); font-size: 12.5px; line-height: 1.65; color: var(--text); overflow-x: auto; max-height: 460px; overflow-y: auto; } .code-panel.active { display: block; } .code-panel em { color: var(--text-faint); } /* ── JavaScript syntax highlighting ─────────────────────────── */ .code-panel .token.comment, .code-panel .token.prolog, .code-panel .token.doctype, .code-panel .token.cdata { color: var(--text-faint); font-style: italic; } .code-panel .token.punctuation, .code-panel .token.operator, .code-panel .token.entity, .code-panel .token.url { color: var(--text-muted); } .code-panel .token.keyword, .code-panel .token.control, .code-panel .token.directive, .code-panel .token.selector, .code-panel .token.tag { color: #c2410c; font-weight: 600; } .code-panel .token.string, .code-panel .token.attr-value, .code-panel .token.char { color: #15803d; } .code-panel .token.number, .code-panel .token.boolean, .code-panel .token.constant { color: #7c3aed; } .code-panel .token.function, .code-panel .token.method { color: #1d4ed8; } .code-panel .token.property, .code-panel .token.attr-name { color: #0369a1; } .code-panel .token.class-name, .code-panel .token.builtin, .code-panel .token.maybe-class-name { color: #b45309; } .code-panel .token.regex, .code-panel .token.important, .code-panel .token.variable { color: #be185d; } .code-panel .token.bold { font-weight: 600; } .code-panel .token.italic { font-style: italic; } html[data-theme="dark"] .code-panel .token.keyword, html[data-theme="dark"] .code-panel .token.control, html[data-theme="dark"] .code-panel .token.directive, html[data-theme="dark"] .code-panel .token.selector, html[data-theme="dark"] .code-panel .token.tag { color: #fb923c; } html[data-theme="dark"] .code-panel .token.string, html[data-theme="dark"] .code-panel .token.attr-value, html[data-theme="dark"] .code-panel .token.char { color: #86efac; } html[data-theme="dark"] .code-panel .token.number, html[data-theme="dark"] .code-panel .token.boolean, html[data-theme="dark"] .code-panel .token.constant { color: #c4b5fd; } html[data-theme="dark"] .code-panel .token.function, html[data-theme="dark"] .code-panel .token.method { color: #93c5fd; } html[data-theme="dark"] .code-panel .token.property, html[data-theme="dark"] .code-panel .token.attr-name { color: #7dd3fc; } html[data-theme="dark"] .code-panel .token.class-name, html[data-theme="dark"] .code-panel .token.builtin, html[data-theme="dark"] .code-panel .token.maybe-class-name { color: #fcd34d; } html[data-theme="dark"] .code-panel .token.regex, html[data-theme="dark"] .code-panel .token.important, html[data-theme="dark"] .code-panel .token.variable { color: #f9a8d4; } /* ── Footer ─────────────────────────────────────────────────── */ .footer { text-align: center; padding: var(--space-5) var(--space-4) var(--space-6); font-size: 12.5px; color: var(--text-faint); border-top: 1px solid var(--border); background: var(--bg-elev); } /* ── Responsive ─────────────────────────────────────────────── */ @media (max-width: 760px) { .app { padding: 32px 16px 24px; } .brand-header h1 { font-size: 24px; } .panes { grid-template-columns: 1fr; } .pane { min-height: 160px; padding: var(--space-4); } .analysis-grid { grid-template-columns: 1fr; } .analysis.full { grid-column: auto; } .forms .form-row { grid-template-columns: 1fr; gap: var(--space-1); } .examples-list { gap: 6px; } .example-btn { font-size: 12px; padding: 5px 9px; } .theme-toggle { top: 12px; right: 12px; } } @media (max-width: 420px) { .btn-primary { width: 100%; } }