/* fcc-earthquakes — site-specific Field Bulletin layer. * * Sits on top of /shared/fcc-museum.css. Owns the site signature * accent (seismic-trace amber) and earthquake-specific module styles * (hero map canvas, Richter visualizer, plates panel, live feed). * * Per-site accent override: uses :root + html[data-mode="dark"] to * beat editorial-tokens.css's default --accent without losing the * theme-boot light/dark contract. */ /* ── Per-site accent: seismic-trace amber ───────────────────────── * * Dark-mode is the default (matches the no-preset preview case AND most * fcc.cc users who run a dark preset). Light-mode is the override. * ----------------------------------------------------------------- */ /* !important is required because /shared/fcc-theme-boot.js writes --accent as inline-style on — that beats stylesheet specificity alone. Per-site signature accents must win to give each museum a distinct identity regardless of which theme preset the user has saved. */ :root, html[data-mode="dark"] { --accent: #e87b4f !important; --accent-2: #f59f7c !important; --accent-wash: color-mix(in srgb, #e87b4f 12%, transparent) !important; --accent-ink: #0a0b0d !important; /* Earthquake-specific data colors — domain encoding, not theme. */ --quake-mild: #a3e635; --quake-moderate: #facc15; --quake-strong: #f97316; --quake-severe: #ef4444; --quake-map-bg: #0a1116; } html[data-mode="light"] { --accent: #b65a3a !important; --accent-2: #d56a44 !important; --accent-wash: color-mix(in srgb, #b65a3a 6%, transparent) !important; --accent-ink: #ffffff !important; } /* ── Hero — live earthquake map ─────────────────────────────────── */ .hero-card { padding: 1.75rem 1.5rem 1.5rem; } .quake-map-canvas { width: 100%; height: 360px; background: var(--quake-map-bg); border: 0; border-top: 1px solid var(--border); border-radius: 0; display: block; cursor: default; } /* Magnitude-floor chip group above the hero canvas */ .mag-floor-chips { display: flex; gap: 0.4rem; margin: 0 0 0.85rem; align-items: center; flex-wrap: wrap; } .mag-floor-chips .mag-floor-label { font: 500 0.7rem/1 var(--sans); letter-spacing: 0.18em; text-transform: uppercase; color: var(--ink-3, var(--dim)); margin-right: 0.4rem; } .mag-floor-chip { font: 500 0.74rem/1 var(--mono); letter-spacing: 0.04em; padding: 0.4rem 0.7rem; 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); } .mag-floor-chip:hover { color: var(--ink-2, var(--text)); border-color: var(--rule-strong); } .mag-floor-chip.active { color: var(--accent); border-color: var(--accent); background: var(--accent-wash); } /* Hero legend strip (DOM-rendered, sits below the canvas) */ .hero-legend { display: flex; gap: 1.25rem; flex-wrap: wrap; margin-top: 0.75rem; font: 500 0.7rem/1 var(--mono); letter-spacing: 0.06em; color: var(--ink-3, var(--dim)); align-items: center; } .hero-legend-item { display: inline-flex; align-items: center; gap: 0.4rem; } .hero-legend-swatch { width: 9px; height: 9px; border-radius: 50%; } /* Pin-card (click-to-pin from the hero map) */ .quake-info { margin-top: 0.85rem; padding: 0.75rem 1rem; background: var(--panel-2); border: 0; border-top: 1px solid var(--border); font-size: 0.88rem; } .quake-info[hidden] { display: none; } .quake-card-meta { display: flex; align-items: baseline; gap: 0.6rem; flex-wrap: wrap; } .quake-card-mag { font: 500 1.4rem var(--mono); letter-spacing: -0.02em; font-feature-settings: "tnum" 1; } .quake-card-place { font-family: var(--serif); font-size: 1rem; font-weight: 600; color: var(--text); flex: 1 0 auto; } .quake-card-close { background: transparent; border: 1px solid var(--border); color: var(--ink-3, var(--dim)); font-size: 1rem; line-height: 1; padding: 0.1rem 0.45rem; border-radius: var(--r-2); cursor: pointer; } .quake-card-close:hover { color: var(--text); border-color: var(--accent); } .quake-card-detail { margin-top: 0.45rem; display: flex; gap: 1.2rem; flex-wrap: wrap; font: 500 0.78rem var(--mono); color: var(--ink-3, var(--dim)); font-feature-settings: "tnum" 1; } .quake-card-tsunami { color: var(--quake-severe); font-weight: 700; } /* ── Richter Visualizer ─────────────────────────────────────────── */ .richter-layout { display: flex; flex-direction: column; gap: 1.25rem; } .richter-canvas { width: 100%; height: 140px; background: var(--bg); border: 0; border-top: 1px solid var(--border); border-radius: 0; display: block; } .richter-desc { line-height: 1.55; } .richter-category { font-size: 0.95rem; color: var(--ink-2, var(--text)); margin-bottom: 0.85rem; } .richter-equiv-grid { display: grid; gap: 0.75rem; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); } .richter-equiv { display: flex; flex-direction: column; padding: 0.65rem 0.85rem; background: var(--panel-2); border: 0; border-top: 1px solid var(--border); } .equiv-label { font: 500 0.66rem/1 var(--sans); letter-spacing: 0.18em; text-transform: uppercase; color: var(--ink-3, var(--dim)); margin-bottom: 0.35rem; } .equiv-value { font-family: var(--mono); font-size: 0.95rem; font-weight: 500; color: var(--text); font-feature-settings: "tnum" 1, "zero" 1; } .control-group input[type="range"] { margin-top: 0.35rem; } /* ── Tectonic Plates ────────────────────────────────────────────── */ .plates-layout { display: flex; flex-direction: column; gap: 0.85rem; } .plates-canvas { width: 100%; height: 320px; background: var(--quake-map-bg); border: 0; border-top: 1px solid var(--border); border-radius: 0; display: block; cursor: default; } .plate-info { padding: 0.75rem 1rem; background: var(--panel-2); border: 0; border-top: 1px solid var(--border); font-size: 0.88rem; color: var(--text); } .plate-info[hidden] { display: none; } .plate-info-header { display: flex; align-items: baseline; justify-content: space-between; gap: 0.5rem; flex-wrap: wrap; margin-bottom: 0.35rem; } .plate-info-name { font-family: var(--serif); font-size: 1rem; font-weight: 600; color: var(--text); } .plate-info-type { font: 500 0.7rem/1 var(--mono); letter-spacing: 0.12em; } .plate-info-desc { margin: 0; font-size: 0.85rem; color: var(--ink-2, var(--dim)); line-height: 1.55; } /* ── Live Feed ──────────────────────────────────────────────────── */ .feed-layout { display: flex; flex-direction: column; gap: 0.75rem; } .feed-header { display: flex; align-items: center; justify-content: space-between; gap: 0.75rem; flex-wrap: wrap; } .feed-status { font: 500 0.74rem/1 var(--mono); letter-spacing: 0.06em; color: var(--ink-3, var(--dim)); font-feature-settings: "tnum" 1; } .feed-table { width: 100%; border-collapse: collapse; font-size: 0.85rem; table-layout: fixed; } .feed-table th { text-align: left; padding: 0.55rem 0.6rem; 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); } .feed-table td { padding: 0.55rem 0.6rem; border-bottom: 1px solid var(--rule-2, var(--border)); color: var(--text); } .feed-table tr { cursor: pointer; transition: background var(--dur-1) var(--ease-in-out); } .feed-table tr:hover td { background: color-mix(in srgb, var(--panel-2) 60%, transparent); } .feed-table tr:focus-visible td { background: color-mix(in srgb, var(--accent) 6%, transparent); outline: none; } .feed-mag { font-family: var(--mono); font-weight: 700; font-feature-settings: "tnum" 1; width: 4.5rem; } .feed-depth { font-family: var(--mono); font-feature-settings: "tnum" 1; color: var(--ink-2, var(--dim)); width: 5.5rem; } .feed-time { font-family: var(--mono); font-feature-settings: "tnum" 1; color: var(--ink-3, var(--dim)); white-space: nowrap; width: 5rem; } .feed-spark-cell { width: 92px; padding: 0.25rem 0.5rem 0.25rem 0.6rem; } .feed-spark { width: 84px; height: 22px; display: block; } /* ── Responsive ─────────────────────────────────────────────────── */ @media (max-width: 720px) { .quake-map-canvas { height: 280px; } .plates-canvas { height: 240px; } .richter-canvas { height: 120px; } .feed-table th, .feed-table td { padding: 0.45rem 0.4rem; } .feed-spark-cell { width: 64px; } .feed-spark { width: 56px; height: 18px; } } @media (max-width: 480px) { .feed-table { font-size: 0.78rem; } .feed-depth { display: none; } .feed-table th:nth-child(4), .feed-table td:nth-child(4) { display: none; } }