/* fcc-hearing — site-specific Field Bulletin layer. * * Per-site accent: auditory rose-crimson — the color of a vintage VU * meter peaking red and the warm flush of a hearing aid LED. Distinct * from clocks chronograph red (more orange-red) and color's fuchsia * (pinker, more chromatic). */ /* !important required because /shared/fcc-theme-boot.js writes --accent as inline-style on , beating stylesheet specificity. */ :root, html[data-mode="dark"] { --accent: #e11d48 !important; --accent-2: #f43f5e !important; --accent-wash: color-mix(in srgb, #e11d48 12%, transparent) !important; --accent-ink: #ffffff !important; } html[data-mode="light"] { --accent: #9f1239 !important; --accent-2: #be1846 !important; --accent-wash: color-mix(in srgb, #9f1239 8%, transparent) !important; --accent-ink: #ffffff !important; } /* ── Hero — Ear Anatomy ─────────────────────────────────────── */ .hero-card { padding: 1.75rem 1.5rem 1.5rem; } .ear-canvas-wrap { width: 100%; background: var(--bg); border-top: 1px solid var(--border); margin-top: 0.85rem; } .ear-canvas { width: 100%; height: 400px; display: block; } .ear-controls { display: flex; gap: 0.4rem; flex-wrap: wrap; margin-top: 0.85rem; } .ear-detail { margin-top: 0.85rem; padding: 0.85rem 1rem; background: var(--panel-2); border-top: 1px solid var(--border); font-family: var(--serif); font-size: 0.92rem; color: var(--ink-2, var(--text)); line-height: 1.55; min-height: 1.5em; } /* ── Equal Loudness Contours ────────────────────────────────── */ .loudness-canvas-wrap { width: 100%; background: var(--bg); border-top: 1px solid var(--border); } .loudness-canvas { width: 100%; height: 360px; display: block; cursor: crosshair; } .loudness-detail { margin-top: 0.85rem; padding: 0.85rem 1rem; background: var(--panel-2); border-top: 1px solid var(--border); font: 500 0.92rem var(--mono); color: var(--accent); font-feature-settings: "tnum" 1, "zero" 1; min-height: 1.5em; } /* ── Tab intro (shared playground pattern) ──────────────────── */ .tab-intro { margin: 0 0 0.85rem; font-family: var(--serif); font-style: italic; font-size: 0.9rem; color: var(--ink-2, var(--dim)); line-height: 1.6; max-width: 640px; } /* ── Hearing Range Test ─────────────────────────────────────── */ .hearing-warning { padding: 0.85rem 1rem; background: var(--accent-wash); border-top: 2px solid var(--accent); font-family: var(--serif); font-size: 0.92rem; color: var(--ink-2, var(--text)); line-height: 1.55; margin-bottom: 0.85rem; } .hearing-warning strong { color: var(--accent); } .freq-grid { display: grid; gap: 0.4rem; grid-template-columns: repeat(auto-fill, minmax(120px, 1fr)); margin-bottom: 0.85rem; } .freq-btn { padding: 0.6rem 0.8rem; background: var(--panel-2); border: 0; border-top: 1px solid var(--border); color: var(--ink-2, var(--text)); cursor: pointer; display: flex; flex-direction: column; gap: 0.3rem; text-align: left; font: 500 0.85rem var(--mono); transition: border-top-color var(--dur-1) var(--ease-in-out); } .freq-btn:hover, .freq-btn.active { border-top-color: var(--accent); color: var(--accent); } .freq-btn-hz { font: 500 0.95rem var(--mono); color: var(--accent); font-feature-settings: "tnum" 1; } .freq-btn-label { font: 500 0.7rem/1 var(--sans); letter-spacing: 0.06em; color: var(--ink-3, var(--dim)); } .volume-row { display: grid; gap: 0.75rem; grid-template-columns: 80px 1fr 60px; align-items: center; padding: 0.7rem 0.95rem; background: var(--panel-2); border-top: 1px solid var(--border); } .volume-row label { font: 500 0.66rem/1 var(--sans); letter-spacing: 0.18em; text-transform: uppercase; color: var(--ink-3, var(--dim)); } .range-input { width: 100%; } .range-info { margin-top: 0.85rem; padding: 0.7rem 0.95rem; background: var(--bg); border-top: 1px solid var(--border); font-family: var(--serif); font-size: 0.92rem; color: var(--ink-2, var(--text)); line-height: 1.55; min-height: 1.5em; } /* ── Frequency Discrimination ───────────────────────────────── */ .disc-controls { display: grid; gap: 0.75rem; grid-template-columns: 1fr; margin-bottom: 0.85rem; } .disc-actions { display: flex; gap: 0.5rem; flex-wrap: wrap; margin-bottom: 0.85rem; } .disc-answer-row { display: flex; gap: 0.5rem; flex-wrap: wrap; align-items: center; padding: 0.85rem 1rem; background: var(--panel-2); border-top: 1px solid var(--border); margin-bottom: 0.85rem; } .disc-question { font: 500 0.92rem var(--sans); color: var(--ink-2, var(--text)); margin-right: 0.5rem; } .disc-score { padding: 0.7rem 0.95rem; background: var(--bg); border-top: 1px solid var(--border); font: 500 0.95rem var(--mono); color: var(--accent); font-feature-settings: "tnum" 1, "zero" 1; min-height: 1.5em; } /* ── Noise Calculator ───────────────────────────────────────── */ .noise-inputs { display: grid; gap: 0.75rem; grid-template-columns: 1fr 1fr auto; align-items: end; margin-bottom: 0.85rem; } @media (max-width: 720px) { .noise-inputs { grid-template-columns: 1fr; } } .noise-results { padding: 1rem 1.1rem; background: var(--panel-2); border-top: 1px solid var(--border); font-size: 0.92rem; line-height: 1.55; color: var(--ink-2, var(--text)); } .noise-results-headline { font: 600 1.05rem var(--serif); color: var(--accent); margin-bottom: 0.4rem; } .noise-results-rows { display: grid; gap: 0.4rem; grid-template-columns: 140px 1fr; font-family: var(--mono); font-feature-settings: "tnum" 1, "zero" 1; font-size: 0.85rem; } .noise-results-label { font: 500 0.66rem/1 var(--sans); letter-spacing: 0.18em; text-transform: uppercase; color: var(--ink-3, var(--dim)); } .noise-results-value { color: var(--text); } @media (max-width: 720px) { .ear-canvas { height: 280px; } .loudness-canvas { height: 240px; } }