/* fcc-illusions — site-specific Field Bulletin layer. * * Per-site accent: perceptual peach-orange — the color of an Escher * lithograph's warm tones and the pumpkin-stripe Ponzo-illusion field. * Distinct from earthquakes seismic amber (#e87b4f more salmon) by * being more pumpkin/saturated. */ /* !important required because /shared/fcc-theme-boot.js writes --accent as inline-style on , beating stylesheet specificity. */ :root, html[data-mode="dark"] { --accent: #fb923c !important; --accent-2: #fdba74 !important; --accent-wash: color-mix(in srgb, #fb923c 12%, transparent) !important; --accent-ink: #0a0b0d !important; } html[data-mode="light"] { --accent: #c2410c !important; --accent-2: #ea580c !important; --accent-wash: color-mix(in srgb, #c2410c 8%, transparent) !important; --accent-ink: #ffffff !important; } /* ── Hero — Illusion Generator ──────────────────────────────── */ .hero-card { padding: 1.75rem 1.5rem 1.5rem; } .hero-lab { display: flex; flex-direction: column; gap: 0.85rem; } .hero-canvas { width: 100%; height: 420px; display: block; background: var(--bg); border-top: 1px solid var(--border); } .hero-controls { display: flex; flex-direction: column; gap: 0.75rem; } /* ── Component palette (shared shape across illusions tabs) ─── */ .component-palette { display: flex; gap: 0.4rem; flex-wrap: wrap; } .component-btn { font: 500 0.74rem/1 var(--mono); letter-spacing: 0.04em; padding: 0.45rem 0.85rem; 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); } .component-btn:hover { color: var(--ink-2, var(--text)); border-color: var(--rule-strong); } .component-btn.active { color: var(--accent); border-color: var(--accent); background: var(--accent-wash); } /* ── Tool layouts (afterimage / sizecompare / motion) ───────── */ .tool-hint { 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; } .tool-canvas { width: 100%; height: 320px; display: block; background: var(--bg); border-top: 1px solid var(--border); margin-bottom: 0.85rem; } .afterimage-layout, .sizecompare-layout, .motion-layout { display: flex; flex-direction: column; gap: 0.85rem; } .afterimage-controls, .sizecompare-controls, .motion-controls { display: flex; gap: 0.85rem; flex-wrap: wrap; align-items: end; } .afterimage-controls .control-group, .sizecompare-controls .control-group, .motion-controls .control-group { min-width: 160px; } .size-readout { padding: 0.7rem 0.95rem; background: var(--panel-2); 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; } @media (max-width: 720px) { .hero-canvas { height: 320px; } .tool-canvas { height: 240px; } } @media (max-width: 480px) { .hero-canvas { height: 240px; } }