/* fcc-numbering — site-specific Field Bulletin layer. * * Per-site accent: chalk lime — the color of school chalkboard * marginalia and the green-on-black of a TI-83's algebraic mode. * Distinct from cipher's phosphor mint (cleaner blue-green) and * vision's retinal emerald (darker, more saturated). */ /* !important required because /shared/fcc-theme-boot.js writes --accent as inline-style on , beating stylesheet specificity. */ :root, html[data-mode="dark"] { --accent: #84cc16 !important; --accent-2: #a3e635 !important; --accent-wash: color-mix(in srgb, #84cc16 12%, transparent) !important; --accent-ink: #0a0b0d !important; } html[data-mode="light"] { --accent: #4d7c0f !important; --accent-2: #65a30d !important; --accent-wash: color-mix(in srgb, #4d7c0f 8%, transparent) !important; --accent-ink: #ffffff !important; } /* ── Hero — Universal Number Display ────────────────────────── */ .hero-card { padding: 1.75rem 1.5rem 1.5rem; } .hero-lab { display: flex; flex-direction: column; gap: 0.85rem; } .hero-canvas { width: 100%; height: 360px; display: block; background: var(--bg); border-top: 1px solid var(--border); } .hero-controls { display: grid; gap: 0.75rem; grid-template-columns: 1fr minmax(120px, 200px); align-items: end; } @media (max-width: 720px) { .hero-controls { grid-template-columns: 1fr; } } .number-input { font: 500 1.4rem var(--mono); font-feature-settings: "tnum" 1, "zero" 1; text-align: center; width: 100%; } /* ── Interactive Abacus ─────────────────────────────────────── */ .abacus-lab { display: flex; flex-direction: column; gap: 0.85rem; } .abacus-canvas { width: 100%; height: 280px; display: block; background: var(--bg); border-top: 1px solid var(--border); cursor: pointer; } .abacus-readout { padding: 0.85rem 1rem; background: var(--panel-2); border-top: 1px solid var(--border); font: 500 2rem 'JetBrains Mono', ui-monospace, monospace; color: var(--accent); font-feature-settings: "tnum" 1, "zero" 1; letter-spacing: -0.02em; text-align: center; } .abacus-controls { display: flex; gap: 0.75rem; flex-wrap: wrap; align-items: center; } .component-palette { display: flex; gap: 0.4rem; flex-wrap: wrap; } .component-btn { font: 500 0.74rem/1 var(--mono); letter-spacing: 0.04em; padding: 0.45rem 0.85rem; border-radius: var(--r-1); background: transparent; border: 1px solid var(--border); color: var(--ink-3, var(--dim)); cursor: pointer; transition: color var(--dur-1) var(--ease-in-out), border-color var(--dur-1) var(--ease-in-out), background var(--dur-1) var(--ease-in-out); } .component-btn:hover { color: var(--ink-2, var(--text)); border-color: var(--rule-strong); } .component-btn.active { color: var(--accent); border-color: var(--accent); background: var(--accent-wash); } /* ── Base Converter ─────────────────────────────────────────── */ .converter-layout { display: flex; flex-direction: column; gap: 0.85rem; } .converter-input-row { display: grid; gap: 0.75rem; grid-template-columns: 2fr 1fr; } @media (max-width: 720px) { .converter-input-row { grid-template-columns: 1fr; } } .converter-results { display: grid; gap: 0.5rem; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); } .converter-row { padding: 0.7rem 0.9rem; background: var(--panel-2); border-top: 1px solid var(--border); display: flex; flex-direction: column; gap: 0.3rem; cursor: pointer; transition: border-top-color var(--dur-1) var(--ease-in-out); } .converter-row:hover { border-top-color: var(--accent); } .converter-row-label { font: 500 0.66rem/1 var(--sans); letter-spacing: 0.18em; text-transform: uppercase; color: var(--ink-3, var(--dim)); } .converter-row-value { font: 500 1rem var(--mono); color: var(--accent); font-feature-settings: "tnum" 1, "zero" 1; word-break: break-all; } /* ── Place Value ────────────────────────────────────────────── */ .place-layout { display: flex; flex-direction: column; gap: 0.85rem; } .place-controls { display: grid; gap: 0.75rem; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); } .place-terms { display: flex; flex-direction: column; gap: 0.4rem; padding: 0.85rem 1rem; background: var(--bg); border-top: 1px solid var(--border); font-family: var(--mono); font-feature-settings: "tnum" 1, "zero" 1; overflow-x: auto; } .place-term { display: grid; gap: 0.75rem; grid-template-columns: 80px 1fr; align-items: baseline; padding: 0.35rem 0; border-bottom: 1px solid var(--rule-2, var(--border)); } .place-term:last-child { border-bottom: 0; } .place-term-digit { font: 500 1.4rem var(--mono); color: var(--accent); letter-spacing: -0.02em; } .place-term-expr { font: 500 0.9rem var(--mono); color: var(--ink-2, var(--text)); } /* ── ASCII / Unicode ────────────────────────────────────────── */ .ascii-layout { display: flex; flex-direction: column; gap: 0.85rem; } .ascii-input { width: 100%; font: 500 1.05rem var(--mono); font-feature-settings: "tnum" 1; } .ascii-quick-btns { display: flex; gap: 0.4rem; flex-wrap: wrap; } .ascii-quick-btn { font: 500 1rem var(--mono); padding: 0.35rem 0.7rem; background: var(--panel-2); border: 1px solid var(--border); border-radius: var(--r-1); color: var(--ink-2, var(--text)); cursor: pointer; transition: border-color var(--dur-1) var(--ease-in-out); min-width: 2.4rem; } .ascii-quick-btn:hover { border-color: var(--accent); color: var(--accent); } .ascii-row { display: grid; grid-template-columns: 80px 70px 80px 1fr 1fr; gap: 0.5rem; padding: 0.5rem 0.85rem; font-family: var(--mono); font-feature-settings: "tnum" 1, "zero" 1; font-size: 0.85rem; } .ascii-row-header { font: 500 0.66rem/1 var(--sans); letter-spacing: 0.18em; text-transform: uppercase; color: var(--ink-3, var(--dim)); border-bottom: 1px solid var(--border); padding-bottom: 0.5rem; } .ascii-table { background: var(--bg); border-top: 1px solid var(--border); max-height: 360px; overflow-y: auto; } .ascii-row:not(.ascii-row-header) { border-bottom: 1px solid var(--rule-2, var(--border)); } .ascii-row .ascii-char { color: var(--accent); font-size: 1.2rem; } /* ── Base Arithmetic ────────────────────────────────────────── */ .arith-layout { display: flex; flex-direction: column; gap: 0.85rem; } .arith-controls { display: grid; gap: 0.75rem; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); } .arith-display { padding: 1rem 1.1rem; background: var(--bg); border-top: 1px solid var(--border); font: 500 1.3rem 'JetBrains Mono', ui-monospace, monospace; font-feature-settings: "tnum" 1, "zero" 1; color: var(--text); letter-spacing: 0.04em; white-space: pre; overflow-x: auto; } .arith-display .arith-result { color: var(--accent); font-weight: 700; } .arith-verify { padding: 0.7rem 0.95rem; background: var(--panel-2); border-top: 1px solid var(--border); font-family: var(--serif); font-style: italic; font-size: 0.88rem; color: var(--ink-2, var(--dim)); line-height: 1.55; } @media (max-width: 720px) { .hero-canvas { height: 280px; } .abacus-canvas { height: 220px; } .ascii-row { grid-template-columns: 60px 60px 70px 1fr 1fr; font-size: 0.78rem; } } @media (max-width: 480px) { .ascii-row { grid-template-columns: 50px 50px 60px 1fr; } .ascii-row span:nth-child(5) { display: none; } }