/* fcc-electricity — site-specific Field Bulletin layer. * * Per-site accent: electric cyan — the color of an arc-flash and the * neon-cyan of a Tesla coil discharge. Distinct from compass survey-blue * (which is more navy) by being brighter and more cyan. */ /* !important required because /shared/fcc-theme-boot.js writes --accent as inline-style on , beating stylesheet specificity. */ :root, html[data-mode="dark"] { --accent: #22d3ee !important; --accent-2: #67e8f9 !important; --accent-wash: color-mix(in srgb, #22d3ee 12%, transparent) !important; --accent-ink: #0a0b0d !important; } html[data-mode="light"] { --accent: #0e7490 !important; --accent-2: #155e75 !important; --accent-wash: color-mix(in srgb, #0e7490 8%, transparent) !important; --accent-ink: #ffffff !important; } /* ── Hero — Circuit Playground ──────────────────────────────── */ .hero-card { padding: 1.75rem 1.5rem 1.5rem; } .circuit-lab { display: flex; flex-direction: column; gap: 0.85rem; } .circuit-canvas { width: 100%; height: 360px; display: block; background: var(--bg); border-top: 1px solid var(--border); cursor: crosshair; } .circuit-readouts { display: grid; gap: 0.5rem; grid-template-columns: repeat(auto-fit, minmax(140px, 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; } .circuit-controls { display: flex; flex-direction: column; gap: 0.75rem; } .circuit-sliders { display: grid; gap: 0.75rem; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); } .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); } .circuit-actions { display: flex; gap: 0.4rem; flex-wrap: wrap; } /* ── Electric Field Visualizer ──────────────────────────────── */ .field-lab { display: flex; flex-direction: column; gap: 0.85rem; } .field-canvas { width: 100%; height: 360px; display: block; background: var(--bg); border-top: 1px solid var(--border); cursor: crosshair; } .field-controls { display: flex; gap: 0.75rem; flex-wrap: wrap; align-items: center; } .charge-palette { display: flex; gap: 0.4rem; flex-wrap: wrap; } .charge-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); } .charge-btn:hover { color: var(--ink-2, var(--text)); border-color: var(--rule-strong); } .charge-btn.active { color: var(--accent); border-color: var(--accent); background: var(--accent-wash); } .field-info { margin: 0; font-family: var(--serif); font-style: italic; font-size: 0.86rem; color: var(--ink-3, var(--dim)); line-height: 1.55; } /* ── AC vs DC ───────────────────────────────────────────────── */ .acdc-layout { display: flex; flex-direction: column; gap: 0.85rem; } .acdc-canvas { width: 100%; height: 240px; display: block; background: var(--bg); border-top: 1px solid var(--border); } .acdc-legend { display: flex; gap: 1rem; font: 500 0.78rem var(--mono); color: var(--ink-3, var(--dim)); } .acdc-legend span { display: inline-flex; align-items: center; gap: 0.4rem; } .legend-swatch { display: inline-block; width: 10px; height: 10px; } .acdc-controls { display: grid; gap: 0.75rem; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); } /* ── Power Calculator ───────────────────────────────────────── */ .power-layout { display: flex; flex-direction: column; gap: 0.85rem; } .power-inputs { display: grid; gap: 0.75rem; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); } .power-results { display: grid; gap: 0.5rem; grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); } .power-result { padding: 0.7rem 0.9rem; background: var(--panel-2); border-top: 1px solid var(--border); } .power-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; } .power-result-value { display: block; font: 500 1rem var(--mono); color: var(--accent); font-feature-settings: "tnum" 1, "zero" 1; } /* ── Resistor Color Code ────────────────────────────────────── */ .resistor-layout { display: flex; flex-direction: column; gap: 0.85rem; align-items: center; } .resistor-visual { width: 100%; display: flex; justify-content: center; padding: 1.5rem 1rem; background: var(--bg); border-top: 1px solid var(--border); } .resistor-body { display: flex; align-items: center; width: 240px; height: 60px; background: linear-gradient(180deg, #d4a574 0%, #c19660 100%); border-radius: 30px; padding: 0 16px; gap: 12px; position: relative; } .resistor-body::before, .resistor-body::after { content: ""; position: absolute; top: 50%; width: 40px; height: 2px; background: #9aa3b2; transform: translateY(-50%); } .resistor-body::before { left: -40px; } .resistor-body::after { right: -40px; } .resistor-band { flex: 1; height: 100%; background: #2a2a2a; } .resistor-selects { display: grid; gap: 0.5rem; grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); width: 100%; } .resistor-result { font: 500 1.4rem 'JetBrains Mono', ui-monospace, monospace; color: var(--accent); font-feature-settings: "tnum" 1, "zero" 1; letter-spacing: -0.02em; } .resistor-tolerance { font: 500 0.85rem var(--mono); color: var(--ink-3, var(--dim)); } @media (max-width: 720px) { .circuit-canvas { height: 280px; } .field-canvas { height: 280px; } .acdc-canvas { height: 180px; } } @media (max-width: 480px) { .circuit-canvas, .field-canvas { height: 220px; } }