/* fcc-radar — site-specific Field Bulletin layer. * * Per-site accent: scope-phosphor aqua-mint — the green-cyan of a * CRT radar scope, brighter and more cyan than cipher's phosphor * green. Distinct from sound bronze-teal (#14b8a6 darker, more * verdigris) by being lighter and more luminous. */ /* !important required because /shared/fcc-theme-boot.js writes --accent as inline-style on , beating stylesheet specificity. */ :root, html[data-mode="dark"] { --accent: #5eead4 !important; --accent-2: #99f6e4 !important; --accent-wash: color-mix(in srgb, #5eead4 12%, transparent) !important; --accent-ink: #0a0b0d !important; } html[data-mode="light"] { --accent: #0f766e !important; --accent-2: #0d9488 !important; --accent-wash: color-mix(in srgb, #0f766e 8%, transparent) !important; --accent-ink: #ffffff !important; } /* ── Hero — PPI Scope ───────────────────────────────────────── */ .hero-card { padding: 1.75rem 1.5rem 1.5rem; } .scope-lab { display: flex; flex-direction: column; gap: 0.85rem; } .scope-canvas { width: 100%; height: 460px; display: block; background: var(--bg); border-top: 1px solid var(--border); } .scope-readouts { display: grid; gap: 0.5rem; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); } .readout { display: flex; padding: 0.6rem 0.85rem; background: var(--panel-2); border-top: 1px solid var(--border); font: 500 0.9rem var(--mono); color: var(--accent); font-feature-settings: "tnum" 1, "zero" 1; letter-spacing: -0.01em; } .scope-controls { display: flex; flex-direction: column; gap: 0.75rem; } .mode-palette { display: flex; gap: 0.4rem; flex-wrap: wrap; } .mode-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); } .mode-btn:hover { color: var(--ink-2, var(--text)); border-color: var(--rule-strong); } .mode-btn.active { color: var(--accent); border-color: var(--accent); background: var(--accent-wash); } .inline-control { display: grid; gap: 0.5rem; grid-template-columns: minmax(140px, 200px) 1fr 80px; align-items: center; } .inline-control label { font: 500 0.66rem/1 var(--sans); letter-spacing: 0.18em; text-transform: uppercase; color: var(--ink-3, var(--dim)); } .scope-toggles { display: flex; gap: 1rem; flex-wrap: wrap; } .toggle-label { display: inline-flex; align-items: center; gap: 0.5rem; font: 500 0.82rem var(--sans); color: var(--ink-2, var(--text)); cursor: pointer; } .toggle-label input[type="checkbox"] { accent-color: var(--accent); width: 16px; height: 16px; } /* ── Playground tabs (Range / Doppler / Equation) ───────────── */ .range-intro, .doppler-intro, .equation-intro { margin: 0 0 0.85rem; font-family: var(--serif); font-style: italic; font-size: 0.92rem; color: var(--ink-2, var(--dim)); line-height: 1.6; } .range-intro code, .doppler-intro code, .equation-intro code { font: 600 0.92rem var(--mono); background: var(--bg); padding: 0.05em 0.4em; color: var(--accent); font-style: normal; } .range-layout, .doppler-layout, .equation-layout { display: flex; flex-direction: column; gap: 0.85rem; } .range-inputs, .doppler-inputs, .equation-inputs { display: grid; gap: 0.75rem; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); } .range-results, .doppler-results, .equation-results { display: grid; gap: 0.5rem; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); } .range-result, .doppler-result, .equation-result { padding: 0.7rem 0.9rem; background: var(--panel-2); border-top: 1px solid var(--border); } .range-result-label, .doppler-result-label, .equation-result-label { display: block; font: 500 0.66rem/1 var(--sans); letter-spacing: 0.18em; text-transform: uppercase; color: var(--ink-3, var(--dim)); margin-bottom: 0.35rem; } .range-result-value, .doppler-result-value, .equation-result-value { display: block; font: 500 1rem var(--mono); color: var(--accent); font-feature-settings: "tnum" 1, "zero" 1; } .target-chips, .rcs-chips { display: flex; gap: 0.4rem; flex-wrap: wrap; grid-column: 1 / -1; } .target-chip, .rcs-chip { font: 500 0.72rem/1 var(--mono); padding: 0.4rem 0.75rem; 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); } .target-chip:hover, .rcs-chip:hover { color: var(--accent); border-color: var(--accent); } .target-chip.active, .rcs-chip.active { color: var(--accent); border-color: var(--accent); background: var(--accent-wash); } @media (max-width: 720px) { .scope-canvas { height: 360px; } .inline-control { grid-template-columns: 1fr; } } @media (max-width: 480px) { .scope-canvas { height: 280px; } }