/* fcc-museum — local styles for the catalog index. * * The Penny Press chrome (mast, meta strip, sub-nav, chip strip, exhibit-card * shell, colophon, footer) lives in museum.css. This file holds two things: * * 1) Field Bulletin editorial-red accent overrides — the catalog's signature * accent (each individual exhibit card overrides via inline --c). * 2) Per-card visual CONTENT (the SVGs and CSS-art elements that live inside * .exhibit-card .visual). Bespoke rules here size and tint each glyph; * SVGs that use stroke="currentColor" inherit color from .visual which * museum.css sets to var(--c) — so most icons tint to the per-card accent * automatically. CSS-art with intentionally fixed colors (spectrum strip, * pixel grid, prism rainbow, magnet N/S poles) keeps its native palette. */ /* !important required because /shared/fcc-theme-boot.js writes --accent as inline-style on , beating stylesheet specificity. */ :root, html[data-mode="dark"] { --accent: #d4593f !important; --accent-2: #e87b4f !important; --accent-wash: color-mix(in srgb, #d4593f 12%, transparent) !important; --accent-ink: #ffffff !important; } html[data-mode="light"] { --accent: #a3422d !important; --accent-2: #b65a3a !important; --accent-wash: color-mix(in srgb, #a3422d 8%, transparent) !important; --accent-ink: #ffffff !important; } /* ============================================================ Per-card visual content (inside .exhibit-card .visual) ============================================================ */ /* 01 Color — full spectrum strip */ .spectrum-strip { width: 70%; height: 10px; background: linear-gradient( to right, #8b00ff, #4b0082, #0000ff, #00bfff, #00ff00, #ffff00, #ff7f00, #ff0000 ); box-shadow: 0 0 14px rgba(255,255,255,0.05); } /* 02 Cipher — encrypted / decrypted stack */ .cipher-stack { display: flex; flex-direction: column; align-items: center; gap: 0.3rem; font-family: var(--mono); text-align: center; } .cipher-encrypted { font-size: 1.05rem; color: var(--c, var(--accent)); letter-spacing: 0.18em; font-feature-settings: "tnum" 1; } .cipher-decrypted { font-size: 0.78rem; color: var(--ink-3); letter-spacing: 0.18em; } /* 03 Pixel — CSS box-shadow pixel art (keeps its own palette) */ .pixel-grid { width: 4px; height: 4px; background: transparent; box-shadow: 0px 0px 0 1px #1a1a2e, 4px 0px 0 1px #1a1a2e, 8px 0px 0 1px #1a1a2e, 12px 0px 0 1px #fbbf24, 16px 0px 0 1px #fbbf24, 20px 0px 0 1px #1a1a2e, 24px 0px 0 1px #1a1a2e, 28px 0px 0 1px #1a1a2e, 0px 4px 0 1px #1a1a2e, 4px 4px 0 1px #1a1a2e, 8px 4px 0 1px #fbbf24, 12px 4px 0 1px #fcd34d, 16px 4px 0 1px #fcd34d, 20px 4px 0 1px #fbbf24, 24px 4px 0 1px #1a1a2e, 28px 4px 0 1px #1a1a2e, 0px 8px 0 1px #1a1a2e, 4px 8px 0 1px #374151, 8px 8px 0 1px #4b5563, 12px 8px 0 1px #374151, 16px 8px 0 1px #1a1a2e, 20px 8px 0 1px #374151, 24px 8px 0 1px #4b5563, 28px 8px 0 1px #374151, 0px 12px 0 1px #065f46, 4px 12px 0 1px #047857, 8px 12px 0 1px #065f46, 12px 12px 0 1px #047857, 16px 12px 0 1px #065f46, 20px 12px 0 1px #047857, 24px 12px 0 1px #065f46, 28px 12px 0 1px #047857; transform: scale(2.6); transform-origin: center center; } /* 04 Recording — vinyl record (label tints to --c) */ .vinyl-record { width: 72px; height: 72px; border-radius: 50%; background: radial-gradient( circle, transparent 9px, #1a1a2e 9px, #1a1a2e 11px, #252530 11px, #252530 13px, #1a1a2e 13px, #1a1a2e 16px, #252530 16px, #252530 18px, #1a1a2e 18px, #1a1a2e 21px, #252530 21px, #252530 23px, #1a1a2e 23px, #1a1a2e 26px, #252530 26px, #252530 29px, #1a1a2e 29px, #1a1a2e 32px, #252530 32px ); border: 2px solid #333; position: relative; } .vinyl-label { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); width: 22px; height: 22px; border-radius: 50%; background: var(--c, #b45309); } .vinyl-label::after { content: ""; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); width: 4px; height: 4px; border-radius: 50%; background: var(--paper); } /* 05 Radio — sine wave (currentColor → --c) */ .sine-wave { width: 70%; height: 44px; } /* 06 Symbols — kaomoji */ .kaomoji { font-family: var(--mono); font-size: 1.7rem; color: var(--c, var(--accent)); user-select: none; white-space: nowrap; } /* 07 Maps — globe */ .globe-icon { width: 60px; height: 60px; } /* 08 Type — specimen Aa */ .type-specimen { font-family: var(--serif); font-size: 2.8rem; font-weight: 700; font-style: italic; color: var(--c, var(--accent)); letter-spacing: 0.02em; line-height: 1; } /* 09 Sound — waveform */ .waveform-icon { width: 70%; height: 44px; } /* 10 Time — clock */ .clock-icon { width: 60px; height: 60px; } /* 11 Telescopes */ .telescope-icon { width: 60px; height: 60px; } /* 12 Video — filmstrip */ .film-icon { width: 60px; height: 60px; } /* 13 Oscilloscope — keeps native phosphor green for CRT throwback */ .scope-icon { width: 70%; height: 44px; color: #00ff41; } /* 14 Morse — dots and dashes */ .morse-code { font-family: var(--mono); font-size: 1.5rem; color: var(--c, var(--accent)); letter-spacing: 0.22em; } /* 15 Hearing — ear */ .ear-icon { width: 60px; height: 60px; } /* 16 Compass */ .compass-icon { width: 60px; height: 60px; } /* 17 Electricity — bolt */ .bolt-icon { width: 60px; height: 60px; } /* 18 Clocks — gear */ .gear-icon { width: 60px; height: 60px; } /* 19 Numbering — binary dots */ .binary-icon { width: 60px; height: 60px; } /* 20 Magnetism — magnet (keeps hardcoded N/S pole colors) */ .magnet-icon { width: 60px; height: 60px; } /* 21 Light — prism (keeps rainbow dispersion lines) */ .prism-icon { width: 60px; height: 60px; } /* 22 Fiber Optics */ .fiber-icon { width: 60px; height: 60px; } /* 23 Microphone */ .mic-icon { width: 60px; height: 60px; } /* 24 Illusions */ .illusion-icon { width: 60px; height: 60px; } /* 25 Pressure — barometer */ .barometer-icon { width: 60px; height: 60px; } /* 26 Antennas */ .antenna-icon { width: 64px; height: 64px; } /* 27 Modulation */ .modulation-icon { width: 80%; height: 48px; } /* 28 Radar */ .radar-icon { width: 64px; height: 64px; } /* 29 Measures */ .measures-icon { width: 80%; height: 44px; } /* 30 Printing */ .printing-icon { width: 64px; height: 64px; } /* 31 Vision — eye */ .vision-icon { width: 86px; height: 54px; } /* 32 Touch */ .touch-icon { width: 76px; height: 52px; } /* 33 DNA — double helix */ .dna-icon { width: 80%; height: 52px; } /* 34 Tectonics — plate boundary diagram */ .tectonics-icon { width: 80%; height: 52px; } /* 35 Flags — signal flag stack */ .flags-icon { width: 68px; height: 54px; } /* 36 Earthquakes — seismograph trace */ .seismo-icon { width: 80%; height: 44px; }