/* fcc-sound — site-specific Field Bulletin layer. * * Per-site accent: bronze-bell teal — the verdigris of a long-rung * bronze bell, the color of cymbal patina, the green-teal of acoustic * waveform paper. Distinct from vision's retinal emerald (brighter, * more chromatic) and cipher's phosphor mint (bluer). */ /* !important required because /shared/fcc-theme-boot.js writes --accent as inline-style on , beating stylesheet specificity. */ :root, html[data-mode="dark"] { --accent: #14b8a6 !important; --accent-2: #2dd4bf !important; --accent-wash: color-mix(in srgb, #14b8a6 12%, transparent) !important; --accent-ink: #0a0b0d !important; } html[data-mode="light"] { --accent: #115e59 !important; --accent-2: #134e4a !important; --accent-wash: color-mix(in srgb, #115e59 8%, transparent) !important; --accent-ink: #ffffff !important; } /* ── Hero — Waveform Lab ────────────────────────────────────── */ .hero-card { padding: 1.75rem 1.5rem 1.5rem; } .waveform-lab { display: flex; flex-direction: column; gap: 0.85rem; } .waveform-canvas { width: 100%; height: 320px; display: block; background: var(--bg); border-top: 1px solid var(--border); } .waveform-info { display: flex; gap: 1rem; flex-wrap: wrap; padding: 0.7rem 0.95rem; background: var(--panel-2); border-top: 1px solid var(--border); } .waveform-freq-label, .waveform-wavelength-label { font: 500 0.95rem var(--mono); color: var(--accent); font-feature-settings: "tnum" 1, "zero" 1; letter-spacing: -0.01em; } .waveform-controls { display: flex; flex-direction: column; gap: 0.75rem; } .waveform-types { display: flex; gap: 0.4rem; flex-wrap: wrap; } .waveform-type-btn { font: 500 0.74rem/1 var(--mono) !important; padding: 0.45rem 0.85rem !important; } .waveform-type-btn.active { color: var(--accent) !important; border-color: var(--accent) !important; background: var(--accent-wash) !important; } .waveform-sliders { display: grid; gap: 0.75rem; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); } .waveform-play-btn { align-self: flex-start; } /* ── Harmonics Visualizer ───────────────────────────────────── */ .harmonics-controls { display: flex; gap: 0.75rem; flex-wrap: wrap; margin-bottom: 0.85rem; } .harmonics-canvas { width: 100%; height: 280px; display: block; background: var(--bg); border-top: 1px solid var(--border); } .harmonics-labels { display: flex; gap: 0.85rem; flex-wrap: wrap; margin-top: 0.6rem; font: 500 0.78rem var(--mono); color: var(--ink-3, var(--dim)); font-feature-settings: "tnum" 1; } /* ── Frequency ↔ Note ──────────────────────────────────────── */ .freq-note-layout { display: grid; gap: 0.85rem; grid-template-columns: minmax(220px, 280px) 1fr; align-items: end; margin-bottom: 0.85rem; } @media (max-width: 720px) { .freq-note-layout { grid-template-columns: 1fr; } } .freq-note-result { padding: 0.85rem 1rem; background: var(--panel-2); border-top: 1px solid var(--border); font: 500 0.95rem var(--mono); color: var(--accent); font-feature-settings: "tnum" 1, "zero" 1; } .piano-keyboard { display: flex; gap: 1px; width: 100%; height: 120px; background: var(--bg); border-top: 1px solid var(--border); padding: 6px; overflow-x: auto; } .piano-key { flex: 1; min-width: 16px; background: var(--panel-2); border: 1px solid var(--border); cursor: pointer; position: relative; display: flex; align-items: flex-end; justify-content: center; padding-bottom: 6px; font: 500 0.66rem var(--mono); color: var(--ink-3, var(--dim)); transition: background var(--dur-1) var(--ease-in-out); } .piano-key:hover, .piano-key.active { background: var(--accent); color: var(--accent-ink); } .piano-key.sharp { background: var(--bg); color: var(--text); margin: 0 -10px; z-index: 1; flex-basis: 20px; flex-grow: 0; height: 70%; border-top: 0; } /* ── Decibel ───────────────────────────────────────────────── */ .db-layout { display: flex; flex-direction: column; gap: 0.85rem; } .db-scale { padding: 1rem 1.1rem; background: var(--bg); border-top: 1px solid var(--border); display: grid; gap: 0.4rem; grid-template-columns: 1fr; } .db-scale-row { display: grid; gap: 0.85rem; grid-template-columns: 80px 1fr; align-items: baseline; font-size: 0.88rem; } .db-scale-row.active { color: var(--accent); font-weight: 600; } .db-scale-row-db { font: 500 0.92rem var(--mono); color: var(--ink-3, var(--dim)); font-feature-settings: "tnum" 1; } .db-scale-row.active .db-scale-row-db { color: var(--accent); } .db-scale-row-label { font-family: var(--serif); color: var(--ink-2, var(--dim)); } .db-comparison { padding: 0.85rem 1rem; background: var(--panel-2); border-top: 1px solid var(--border); font-family: var(--serif); font-style: italic; font-size: 0.92rem; color: var(--ink-2, var(--text)); line-height: 1.55; } /* ── Speed of Sound ─────────────────────────────────────────── */ .speed-layout { display: flex; flex-direction: column; gap: 0.85rem; } .speed-controls { display: grid; gap: 0.75rem; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); } .speed-formula { padding: 0.85rem 1rem; background: var(--panel-2); border-top: 1px solid var(--border); font: 500 1rem var(--mono); color: var(--accent); font-feature-settings: "tnum" 1, "zero" 1; } .speed-table { display: grid; gap: 0.5rem; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); } .speed-table-row { padding: 0.7rem 0.9rem; background: var(--panel-2); border-top: 1px solid var(--border); display: flex; flex-direction: column; gap: 0.3rem; } .speed-table-medium { font: 600 0.9rem var(--serif); color: var(--text); } .speed-table-value { font: 500 0.85rem var(--mono); color: var(--accent); font-feature-settings: "tnum" 1; } @media (max-width: 720px) { .waveform-canvas { height: 240px; } .harmonics-canvas { height: 220px; } .piano-keyboard { height: 90px; } }