/* fcc-museum.css * ------------------------------------------------------------------ * Shared design system for fcc.cc museum-exhibit sites at * fcc.cc// (earthquakes, cipher, morse, compass, and future). * * "Field Bulletin" direction: editorial, instrumented, restrained, * durable. Source Serif 4 for display, Inter for UI, JetBrains Mono * for data. Hard-plate section cards (no rounded corners, no shadows) * with a 1px top-rule and a 56px editorial-red whisker on every * heading. Per-site --accent is set in each site's local styles.css. * * Load order (mandatory): * 1. /shared/fcc-theme-boot.js (sync; sets --bg etc. on ) * 2. /shared/fonts/fonts.css * 3. /shared/fcc-museum.css (this file) * 4. /shared/fcc-editorial-tokens.css * 5. /shared/fcc-editorial.css * 6. /shared/fcc-see-also.css * 7. /shared/fcc-v2-controls.css * 8. ./styles.css (per-site; sets --accent, owns modules) * * Per-site override pattern (in /styles.css): * html[data-mode="dark"], :root { --accent: ; } * html[data-mode="light"] { --accent: ; } * * Mount points and DOM classes the shared gallery/timeline/clipboard * helpers depend on are preserved: #filterChips, #galleryGrid, * #timelineStrip, .filter-chip, .artifact-card, .cipher-card (cipher * alias), .timeline-card, .timeline-narrative, .tab-btn, .tab-panel, * .toast, .skip-link. Restyle aggressively; selectors stay. * ------------------------------------------------------------------ */ /* ── Design tokens ──────────────────────────────────────────────── */ :root { /* Fallback chrome tokens — these mirror the `black` preset values in fcc-theme-boot.js. theme-boot writes these as inline-style on when a preset is set; this :root block keeps the page readable on a fresh visit (empty localStorage) before any preset has been picked. */ --bg: #0c0d0f; --text: #f5f6f7; --panel: #111214; --border: #2a2a2a; --dim: #9aa3b2; --text-dim: #9aa3b2; /* Surface scale — fcc-editorial-tokens.css aliases --paper-3 to --panel-2, so this needs to exist before editorial-tokens loads. */ --panel-2: #1a1c20; --panel-3: #23262b; --rule-strong: #4a4e57; /* Typography */ --serif: 'Source Serif 4', Charter, 'Iowan Old Style', Georgia, serif; --sans: Inter, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif; --mono: 'JetBrains Mono', ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace; /* Publication signature — always editorial red, never themed */ --signal: #d4593f; /* Spacing scale */ --sp-1: 0.25rem; --sp-2: 0.5rem; --sp-3: 0.75rem; --sp-4: 1rem; --sp-5: 1.5rem; --sp-6: 2rem; --sp-7: 3rem; --sp-8: 4rem; /* Radii — hard plate look */ --r-1: 2px; /* chips, tags */ --r-2: 6px; /* inputs, buttons */ --r-pill: 999px; /* Motion */ --ease-in-out: cubic-bezier(0.4, 0, 0.2, 1); --ease-out: cubic-bezier(0.16, 1, 0.3, 1); --dur-1: 120ms; --dur-2: 240ms; --dur-3: 480ms; } /* ── Reset ─────────────────────────────────────────────────────── */ html, body { min-height: 100%; } html { scrollbar-gutter: stable both-edges; overflow-y: scroll; } body { margin: 0; min-height: 100dvh; background: var(--bg); color: var(--text); font-family: var(--sans); font-size: 0.94rem; line-height: 1.55; overflow-x: hidden; -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; } a { color: var(--accent); text-decoration: none; } a:hover { color: var(--accent-2, var(--accent)); } *:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; border-radius: var(--r-2); } /* ── Layout ────────────────────────────────────────────────────── */ .wrap { max-width: 1100px; margin: 0 auto; padding: 18px 18px 54px; } /* ── Skip link ─────────────────────────────────────────────────── */ .skip-link { position: absolute; left: 12px; top: 10px; padding: 0.5rem 0.75rem; border: 1px solid var(--border); background: var(--panel); color: var(--text); font: 500 0.82rem var(--sans); transform: translateY(-140%); transition: transform var(--dur-1) var(--ease-out); z-index: 20000; } .skip-link:focus { transform: translateY(0); } /* ── Site header / topbar ──────────────────────────────────────── */ .site-header { display: flex; flex-direction: column; gap: 0.65rem; padding-top: calc(3.2rem + env(safe-area-inset-top, 0px)); } .topbar { position: fixed; top: 0; left: 0; right: 0; z-index: 9000; padding-top: env(safe-area-inset-top, 0px); background: color-mix(in srgb, var(--bg) 86%, transparent); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); border-bottom: 1px solid var(--border); } .topbar-content { max-width: 1100px; margin: 0 auto; display: flex; align-items: center; justify-content: space-between; padding: 0.55rem 18px; gap: 1rem; } .brand { font-family: var(--mono); font-size: 0.95rem; font-weight: 600; color: var(--accent); letter-spacing: 0.02em; white-space: nowrap; } /* ── Intro ──────────────────────────────────────────────────────── */ .intro { margin: 1rem 0 1.75rem; } .intro-title { font-family: var(--serif); font-weight: 500; font-size: clamp(2rem, 4.2vw, 2.9rem); letter-spacing: -0.015em; line-height: 1.05; margin: 0 0 0.5rem; color: var(--text); } .intro-subtitle { font-size: 0.98rem; color: var(--ink-2, var(--dim)); margin: 0; max-width: 640px; line-height: 1.55; } /* ── Eyebrow utility (tracked caps) ────────────────────────────── */ .eyebrow { display: inline-block; font: 500 0.7rem/1 var(--sans); letter-spacing: 0.18em; text-transform: uppercase; color: var(--ink-3, var(--dim)); margin-bottom: 0.45rem; } /* ── Section cards — hard plate look ──────────────────────────── * Borderless, square corners, 1px top-rule, 56px editorial-red * whisker at leading edge. No drop shadows. Ever. * --------------------------------------------------------------- */ .section-card { background: var(--panel); border: 0; border-top: 1px solid var(--border); border-radius: 0; padding: 2rem 1.75rem 1.75rem; margin-bottom: 1.5rem; position: relative; } .section-card::before { content: ""; position: absolute; left: 0; top: -1px; height: 1px; width: 56px; background: var(--signal); } .section-heading { font-family: var(--serif); font-size: clamp(1.35rem, 2.6vw, 1.65rem); font-weight: 600; letter-spacing: -0.01em; line-height: 1.15; margin: 0 0 0.35rem; color: var(--text); } .section-desc { font-size: 0.92rem; color: var(--ink-2, var(--dim)); margin: 0 0 1.25rem; line-height: 1.55; max-width: 640px; } .section-desc strong { color: var(--text); font-weight: 600; } /* Section meta-tag — mono item count right-aligned on the eyebrow baseline */ .section-meta { position: absolute; top: 1rem; right: 1.75rem; font: 500 0.72rem/1 var(--mono); letter-spacing: 0.06em; text-transform: uppercase; color: var(--ink-3, var(--dim)); font-feature-settings: "tnum" 1, "zero" 1; } /* ── Filter chips — tight square taxonomy tags ─────────────────── */ .filter-chips { display: flex; flex-wrap: wrap; gap: 0.4rem; margin-bottom: 1rem; } .filter-chip { font: 500 0.72rem/1 var(--mono); letter-spacing: 0.08em; text-transform: uppercase; 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; font-feature-settings: "tnum" 1; transition: color var(--dur-1) var(--ease-in-out), border-color var(--dur-1) var(--ease-in-out), background var(--dur-2) var(--ease-in-out); } .filter-chip:hover { color: var(--ink-2, var(--text)); border-color: var(--rule-strong); } .filter-chip.active { color: var(--accent); border-color: var(--accent); background: color-mix(in srgb, var(--accent) 8%, transparent); } .filter-chip-count { margin-left: 0.4rem; font-weight: 600; opacity: 0.7; } /* ── Gallery grid ──────────────────────────────────────────────── */ .gallery-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 0.85rem; } .gallery-empty { text-align: center; padding: 2rem; color: var(--ink-4, var(--dim)); font-size: 0.9rem; } .gallery-empty[hidden] { display: none; } /* ── Artifact card (and .cipher-card dual-target) ──────────────── */ .artifact-card, .cipher-card { background: var(--panel-2); border: 0; border-top: 1px solid var(--border); border-radius: 0; padding: 1rem 1.1rem 1.1rem; cursor: pointer; display: flex; flex-direction: column; gap: 0.5rem; min-height: 120px; transition: border-top-color var(--dur-1) var(--ease-in-out), transform var(--dur-2) var(--ease-out); } .artifact-card:hover, .cipher-card:hover { border-top-color: var(--accent); transform: translateY(-2px); } .artifact-card:active, .cipher-card:active { transform: translateY(0); } .artifact-year, .cipher-era { font: 700 0.72rem/1 var(--mono); letter-spacing: 0.06em; color: var(--accent); font-feature-settings: "tnum" 1; } .artifact-title, .cipher-name { font-family: var(--serif); font-size: 1rem; font-weight: 600; letter-spacing: 0; line-height: 1.25; color: var(--text); margin: 0; } .artifact-desc { font-size: 0.88rem; color: var(--ink-2, var(--dim)); line-height: 1.55; margin: 0; flex: 1; } .artifact-funfact { font-family: var(--serif); font-size: 0.85rem; font-style: italic; color: var(--ink-3, var(--dim)); line-height: 1.5; margin: 0; padding-top: 0.4rem; border-top: 1px solid var(--rule-2, var(--border)); } .artifact-meta { display: flex; align-items: center; gap: 0.5rem; flex-wrap: wrap; } /* Cipher-specific bits left over from the legacy gallery render */ .cipher-card-header { display: flex; align-items: baseline; gap: 0.5rem; flex-wrap: wrap; } .cipher-cat-dot { display: inline-block; width: 6px; height: 6px; border-radius: 50%; background: var(--accent); flex: 0 0 6px; margin-right: 0.15rem; } .cipher-sample { font: 500 0.78rem var(--mono); color: var(--ink-3, var(--dim)); margin: 0.15rem 0 0; font-feature-settings: "tnum" 1; } .cipher-sample .plain { color: var(--ink-4, var(--dim)); } .cipher-sample .arrow { color: var(--ink-4, var(--dim)); margin: 0 0.35rem; } .cipher-sample .cipher { color: var(--accent); } /* ── Timeline strip ────────────────────────────────────────────── */ .timeline-strip { display: flex; gap: 0; overflow-x: auto; scroll-snap-type: x mandatory; padding: 0.5rem 0 1rem; -webkit-overflow-scrolling: touch; } .timeline-strip::-webkit-scrollbar { height: 4px; } .timeline-strip::-webkit-scrollbar-track { background: var(--border); } .timeline-strip::-webkit-scrollbar-thumb { background: var(--accent); } .timeline-card { flex: 0 0 240px; scroll-snap-align: start; background: var(--panel-2); border: 0; border-right: 1px solid var(--border); padding: 1rem 1.1rem 1.25rem; cursor: pointer; position: relative; transition: background var(--dur-1) var(--ease-in-out); } .timeline-card:hover { background: color-mix(in srgb, var(--panel-2) 92%, var(--text)); } .timeline-card.active::after { content: ""; position: absolute; left: 1.1rem; bottom: -1px; height: 2px; width: 32px; background: var(--accent); } .timeline-year { font-family: var(--mono); font-size: 2.1rem; font-weight: 500; letter-spacing: -0.02em; color: var(--accent); font-feature-settings: "tnum" 1, "zero" 1; margin: 0 0 0.15rem; display: block; line-height: 1; } .timeline-card::before { content: ""; display: block; width: 24px; height: 2px; background: var(--accent); margin-bottom: 0.6rem; } .timeline-title { font-family: var(--serif); font-size: 0.95rem; font-weight: 600; color: var(--text); margin: 0 0 0.4rem; line-height: 1.25; } .timeline-blurb { font-size: 0.82rem; color: var(--ink-2, var(--dim)); line-height: 1.55; margin: 0; } .timeline-narrative { flex: 0 0 320px; cursor: default; background: var(--bg); border-right: 1px solid var(--border); border-left: 1px solid var(--signal); } .timeline-narrative::before { display: none; } .narrative-title { font: 500 0.7rem/1 var(--sans); letter-spacing: 0.18em; text-transform: uppercase; color: var(--signal); margin: 0 0 0.5rem; } .narrative-text { font-family: var(--serif); font-size: 0.88rem; font-style: italic; color: var(--ink-2, var(--dim)); line-height: 1.6; margin: 0; } /* ── Playground tabs — underlined magazine TOC ─────────────────── */ .playground-tabs { display: flex; gap: 0; margin-bottom: 1.25rem; border-bottom: 1px solid var(--border); flex-wrap: wrap; } .tab-btn { font: 500 0.78rem/1 var(--sans); letter-spacing: 0.04em; padding: 0.65rem 1rem 0.6rem; border: 0; border-bottom: 2px solid transparent; margin-bottom: -1px; background: transparent; 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); } .tab-btn:hover { color: var(--ink-2, var(--text)); } .tab-btn.active { color: var(--accent); border-bottom-color: var(--accent); } .tab-panel[hidden] { display: none; } /* ── Buttons — quiet instrument-panel ──────────────────────────── */ .btn, .btn-sm { font-family: var(--sans); font-weight: 500; letter-spacing: 0.02em; border: 1px solid var(--border); background: transparent; color: var(--ink-2, var(--text)); border-radius: var(--r-2); 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); } .btn { padding: 0.5rem 0.95rem; font-size: 0.82rem; } .btn-sm { padding: 0.35rem 0.75rem; font-size: 0.76rem; } .btn:hover, .btn-sm:hover { color: var(--text); border-color: var(--rule-strong); } .btn--primary { background: var(--accent); color: var(--accent-ink, var(--bg)); border-color: var(--accent); } .btn--primary:hover { background: var(--accent-2, var(--accent)); border-color: var(--accent-2, var(--accent)); color: var(--accent-ink, var(--bg)); } /* ── Shared controls ───────────────────────────────────────────── */ .control-group { display: flex; flex-direction: column; gap: 0.3rem; min-width: 120px; flex: 1; } .control-group label { font: 500 0.72rem/1 var(--sans); letter-spacing: 0.08em; text-transform: uppercase; color: var(--ink-3, var(--dim)); } .control-value { font-family: var(--mono); font-size: 0.85rem; font-weight: 500; color: var(--accent); font-feature-settings: "tnum" 1, "zero" 1; } input[type="range"] { -webkit-appearance: none; appearance: none; width: 100%; height: 4px; border-radius: var(--r-pill); background: var(--border); outline: none; cursor: pointer; } input[type="range"]::-webkit-slider-thumb { -webkit-appearance: none; appearance: none; width: 16px; height: 16px; border-radius: 50%; background: var(--accent); border: 2px solid var(--panel); cursor: pointer; transition: transform var(--dur-1) var(--ease-out); } input[type="range"]::-webkit-slider-thumb:active { transform: scale(1.15); } input[type="range"]::-moz-range-thumb { width: 16px; height: 16px; border-radius: 50%; background: var(--accent); border: 2px solid var(--panel); cursor: pointer; } input[type="text"], input[type="number"], textarea { background: var(--panel-3); border: 1px solid var(--border); color: var(--text); padding: 0.5rem 0.7rem; border-radius: var(--r-2); font-family: var(--mono); font-size: 0.88rem; font-feature-settings: "tnum" 1, "zero" 1; } input[type="text"]:focus, input[type="number"]:focus, textarea:focus { border-color: var(--accent); outline: none; } textarea { resize: vertical; min-height: 4rem; } /* ── Toast — letterpress notice ────────────────────────────────── */ .toast { position: fixed; bottom: 1.5rem; left: 50%; transform: translateX(-50%) translateY(8px); padding: 0.55rem 1rem; border: 1px solid var(--accent); background: var(--panel); color: var(--text); font: 500 0.82rem/1 var(--sans); letter-spacing: 0.04em; border-radius: var(--r-2); opacity: 0; pointer-events: none; transition: opacity var(--dur-2) var(--ease-out), transform var(--dur-2) var(--ease-out); z-index: 10000; display: flex; align-items: center; gap: 0.55rem; } .toast::before { content: ""; display: inline-block; width: 8px; height: 8px; border-radius: 50%; background: var(--signal); flex: 0 0 8px; } .toast.visible { opacity: 1; transform: translateX(-50%) translateY(0); } .dim { color: var(--ink-3, var(--dim)); } /* ── Footer ────────────────────────────────────────────────────── */ .fineprint { margin-top: 3rem; padding-top: 1rem; border-top: 1px solid var(--border); font: 400 0.78rem/1.6 var(--sans); color: var(--ink-3, var(--dim)); text-align: center; } .fineprint a { color: var(--ink-2, var(--text)); } .fineprint a:hover { color: var(--accent); } /* ── Related exhibits chrome (already used in current sites) ──── * Light touch — existing class names from var/www/fcc-*/index.html * --------------------------------------------------------------- */ .fcc-related-exhibits { margin: 2.5rem 0 1.5rem; padding-top: 1.5rem; position: relative; } .fcc-related-exhibits::before { content: ""; position: absolute; left: 0; top: 0; height: 1px; width: 56px; background: var(--signal); } .fcc-related-exhibits__title { font: 500 0.7rem/1 var(--sans); letter-spacing: 0.18em; text-transform: uppercase; color: var(--ink-3, var(--dim)); margin: 0.25rem 0 1rem; } .fcc-related-exhibits__list { list-style: none; padding: 0; margin: 0; display: grid; gap: 0.75rem; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); } .fcc-related-exhibits__item { margin: 0; } .fcc-related-exhibits__link { display: block; padding: 0.85rem 1rem; background: var(--panel-2); color: var(--text); border-top: 1px solid var(--border); transition: border-top-color var(--dur-1) var(--ease-in-out); } .fcc-related-exhibits__link:hover { border-top-color: var(--accent); color: var(--text); } .fcc-related-exhibits__name { display: block; font-family: var(--serif); font-size: 1.02rem; font-weight: 600; margin-bottom: 0.25rem; } .fcc-related-exhibits__blurb { display: block; font-size: 0.82rem; color: var(--ink-2, var(--dim)); line-height: 1.5; } /* ── Responsive ────────────────────────────────────────────────── */ @media (max-width: 720px) { .wrap { padding: 14px 14px 40px; } .topbar-content { padding: 0.55rem 14px; } .intro { margin: 0.75rem 0 1.25rem; } .section-card { padding: 1.5rem 1.1rem 1.25rem; } .section-meta { top: 0.75rem; right: 1.1rem; } .timeline-card, .timeline-narrative { flex-basis: 220px; } .timeline-narrative { flex-basis: 280px; } .timeline-year { font-size: 1.75rem; } } @media (max-width: 480px) { .gallery-grid { grid-template-columns: 1fr; } } @media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: 0.01ms !important; transition-duration: 0.01ms !important; scroll-behavior: auto !important; } .artifact-card:hover, .cipher-card:hover { transform: none; } .artifact-card:hover, .cipher-card:hover { outline: 1px solid var(--accent); } }