/* fcc-color — site-specific Field Bulletin layer. * * Per-site accent: chromatic fuchsia — the most saturated pink-magenta * the eye registers, picked to lean into the topic. Distinct from * magnetism's lodestone (more red-magenta) and clocks's chronograph * red (more orange-red). */ /* !important required because /shared/fcc-theme-boot.js writes --accent as inline-style on , beating stylesheet specificity. */ :root, html[data-mode="dark"] { --accent: #ec4899 !important; --accent-2: #f472b6 !important; --accent-wash: color-mix(in srgb, #ec4899 12%, transparent) !important; --accent-ink: #ffffff !important; } html[data-mode="light"] { --accent: #a21caf !important; --accent-2: #be1ecd !important; --accent-wash: color-mix(in srgb, #a21caf 8%, transparent) !important; --accent-ink: #ffffff !important; } /* ── Color cards (gallery uses .color-card, not .artifact-card) ── */ .color-card { background: var(--panel-2); border: 0; border-top: 1px solid var(--border); border-radius: 0; padding: 0; cursor: pointer; display: flex; flex-direction: column; transition: border-top-color var(--dur-1) var(--ease-in-out), transform var(--dur-2) var(--ease-out); overflow: hidden; } .color-card:hover { border-top-color: var(--accent); transform: translateY(-2px); } .color-card:active { transform: translateY(0); } .color-swatch { width: 100%; height: 96px; } .color-card-body { padding: 0.75rem 0.95rem 1rem; display: flex; flex-direction: column; gap: 0.3rem; } .color-card-name, .color-name { font-family: var(--serif); font-size: 1rem; font-weight: 600; color: var(--text); margin: 0; } .color-card-hex, .color-hex { font: 500 0.78rem var(--mono); color: var(--accent); font-feature-settings: "tnum" 1; letter-spacing: 0.04em; } .color-card-meta, .color-era { font: 500 0.7rem/1 var(--sans); letter-spacing: 0.08em; text-transform: uppercase; color: var(--ink-3, var(--dim)); } .color-card-desc, .color-desc { font-size: 0.86rem; color: var(--ink-2, var(--dim)); line-height: 1.5; margin: 0; } /* ── Hero — Visible spectrum ────────────────────────────────── */ .hero-card, #spectrum.section-card { padding: 1.75rem 1.5rem 1.5rem; } .spectrum-wrap { display: flex; flex-direction: column; gap: 0.4rem; margin-top: 0.85rem; } .spectrum-canvas { width: 100%; height: 100px; display: block; background: var(--bg); border-top: 1px solid var(--border); cursor: pointer; } .spectrum-ticks { display: flex; justify-content: space-between; font: 500 0.7rem var(--mono); color: var(--ink-3, var(--dim)); font-feature-settings: "tnum" 1; padding: 0 4px; } .spectrum-detail { 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; margin-top: 0.6rem; } /* ── Color Converter ────────────────────────────────────────── */ .converter-layout { display: grid; gap: 0.85rem; grid-template-columns: 1fr 120px; align-items: end; margin-bottom: 0.85rem; } @media (max-width: 720px) { .converter-layout { grid-template-columns: 1fr; } } .converter-input { display: flex; flex-direction: column; gap: 0.4rem; } .converter-input input { width: 100%; } .converter-preview { width: 100%; height: 70px; background: #663399; border-top: 1px solid var(--border); transition: background var(--dur-1) var(--ease-in-out); } .converter-output { display: grid; gap: 0.5rem; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); } .converter-row { display: flex; align-items: baseline; gap: 0.5rem; padding: 0.65rem 0.9rem; background: var(--panel-2); border-top: 1px solid var(--border); cursor: pointer; transition: border-top-color var(--dur-1) var(--ease-in-out); } .converter-row:hover { border-top-color: var(--accent); } .converter-label { font: 500 0.66rem/1 var(--sans); letter-spacing: 0.18em; text-transform: uppercase; color: var(--ink-3, var(--dim)); flex: 0 0 56px; } .converter-value { font: 500 0.95rem var(--mono); color: var(--accent); font-feature-settings: "tnum" 1, "zero" 1; letter-spacing: -0.01em; flex: 1; word-break: break-all; } /* ── Contrast Checker ───────────────────────────────────────── */ .contrast-inputs { display: grid; gap: 0.75rem; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); margin-bottom: 0.85rem; } .contrast-color-group { display: flex; align-items: center; gap: 0.55rem; padding: 0.6rem 0.85rem; background: var(--panel-2); border-top: 1px solid var(--border); } .contrast-color-group label { font: 500 0.66rem/1 var(--sans); letter-spacing: 0.18em; text-transform: uppercase; color: var(--ink-3, var(--dim)); flex: 0 0 100px; } .contrast-color-group input[type="color"] { width: 32px; height: 32px; border: 1px solid var(--border); background: transparent; cursor: pointer; } .contrast-color-group .control-value { font: 500 0.78rem var(--mono); color: var(--text); } .contrast-preview { padding: 1.5rem; border-top: 1px solid var(--border); margin-bottom: 0.6rem; background: #0c0d0f; color: #f5f6f7; display: flex; flex-direction: column; gap: 0.6rem; } .preview-large { font: 700 1.15rem var(--serif); } .preview-normal { font: 400 0.92rem var(--sans); line-height: 1.55; } .contrast-results { display: grid; gap: 0.5rem; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); } .contrast-row { display: flex; flex-direction: column; padding: 0.7rem 0.9rem; background: var(--panel-2); border-top: 1px solid var(--border); } .contrast-row-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; } .contrast-row-value { font: 500 1rem var(--mono); color: var(--text); font-feature-settings: "tnum" 1, "zero" 1; } .contrast-row-status { margin-top: 0.3rem; font: 500 0.74rem var(--mono); letter-spacing: 0.04em; } .contrast-row-status.pass { color: #7dd3a4; } .contrast-row-status.fail { color: #fb7185; } /* ── Palette Generator ──────────────────────────────────────── */ .palette-input-row { display: grid; gap: 0.75rem; grid-template-columns: 1fr 100px; align-items: end; margin-bottom: 0.85rem; } @media (max-width: 720px) { .palette-input-row { grid-template-columns: 1fr; } } .palette-input-row input[type="color"] { width: 100%; height: 38px; border: 1px solid var(--border); background: transparent; cursor: pointer; } .palette-scheme { margin-bottom: 1rem; } .palette-scheme-label { font: 500 0.66rem/1 var(--sans); letter-spacing: 0.18em; text-transform: uppercase; color: var(--ink-3, var(--dim)); margin-bottom: 0.4rem; } .palette-strip { display: flex; gap: 2px; height: 64px; border-top: 1px solid var(--border); } .palette-swatch { flex: 1; display: flex; align-items: flex-end; justify-content: center; padding-bottom: 0.45rem; font: 500 0.7rem var(--mono); font-feature-settings: "tnum" 1, "zero" 1; cursor: pointer; transition: filter var(--dur-1) var(--ease-in-out); } .palette-swatch:hover { filter: brightness(1.1); } @media (max-width: 720px) { .spectrum-canvas { height: 80px; } .palette-strip { height: 48px; } }