/* fcc-symbols — site-specific Field Bulletin layer. * * Per-site accent: parchment gold — the color of aged manuscript, vellum, * and the rubricated initials of medieval texts. Distinct from clocks * chronograph red, morse signal-amber, and earthquakes seismic-amber by * being more golden and less orange. */ /* !important required because /shared/fcc-theme-boot.js writes --accent as inline-style on , beating stylesheet specificity. */ :root, html[data-mode="dark"] { --accent: #d4a574 !important; --accent-2: #e3bb91 !important; --accent-wash: color-mix(in srgb, #d4a574 12%, transparent) !important; --accent-ink: #0a0b0d !important; } html[data-mode="light"] { --accent: #9a7842 !important; --accent-2: #b58f56 !important; --accent-wash: color-mix(in srgb, #9a7842 8%, transparent) !important; --accent-ink: #ffffff !important; } /* ── Hero — Featured Artifact ───────────────────────────────── */ .hero-card { padding: 1.75rem 1.5rem 1.5rem; text-align: center; } .hero-text { font-family: var(--mono); font-size: clamp(1.8rem, 5vw, 3.4rem); font-weight: 500; color: var(--text); line-height: 1.15; letter-spacing: -0.01em; padding: 2rem 1rem; background: var(--bg); border-top: 1px solid var(--border); white-space: pre-wrap; word-break: break-word; min-height: 6rem; display: flex; align-items: center; justify-content: center; } .hero-placard { display: flex; align-items: baseline; justify-content: center; gap: 0.75rem; flex-wrap: wrap; margin-top: 0.85rem; } .hero-name { font: 600 1.1rem var(--serif); color: var(--text); } .hero-era { font: 500 0.74rem var(--mono); letter-spacing: 0.04em; color: var(--accent); font-feature-settings: "tnum" 1; } .hero-origin { margin: 0.5rem auto 0; max-width: 540px; font-family: var(--serif); font-style: italic; font-size: 0.92rem; color: var(--ink-2, var(--dim)); line-height: 1.6; } /* ── Zalgo Generator ────────────────────────────────────────── */ .zalgo-controls { display: grid; gap: 0.75rem; grid-template-columns: 1fr minmax(160px, 220px); align-items: end; margin-bottom: 0.85rem; } @media (max-width: 720px) { .zalgo-controls { grid-template-columns: 1fr; } } .zalgo-output { padding: 1.25rem 1rem; background: var(--bg); border-top: 1px solid var(--border); font-family: var(--mono); font-size: 1.4rem; color: var(--text); word-break: break-word; min-height: 4rem; text-align: center; margin-bottom: 0.75rem; } /* ── Unicode Explorer ───────────────────────────────────────── */ .unicode-result { padding: 0.85rem 1rem; background: var(--panel-2); border-top: 1px solid var(--border); margin-top: 0.5rem; } .unicode-result-empty { font-family: var(--serif); font-style: italic; color: var(--ink-3, var(--dim)); font-size: 0.9rem; } .unicode-glyph { font: 500 3rem 'JetBrains Mono', ui-monospace, monospace; color: var(--accent); margin: 0 0 0.5rem; line-height: 1; } .unicode-meta { display: grid; gap: 0.4rem; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); margin-top: 0.5rem; } .unicode-meta-row { display: flex; flex-direction: column; } .unicode-meta-label { font: 500 0.66rem/1 var(--sans); letter-spacing: 0.18em; text-transform: uppercase; color: var(--ink-3, var(--dim)); margin-bottom: 0.25rem; } .unicode-meta-value { font: 500 0.92rem var(--mono); color: var(--text); font-feature-settings: "tnum" 1, "zero" 1; } /* ── Random Kaomoji ─────────────────────────────────────────── */ .random-display { padding: 2rem 1rem; background: var(--bg); border-top: 1px solid var(--border); text-align: center; font-family: var(--mono); font-size: 2rem; color: var(--accent); line-height: 1.2; min-height: 5rem; display: flex; align-items: center; justify-content: center; } .random-controls { display: flex; gap: 0.5rem; margin-top: 0.5rem; flex-wrap: wrap; } /* ── Cipher-card hover restore (symbols uses .cipher-card too via shared) ── */ .cipher-card .cipher-cat-dot { background: var(--accent); } .cipher-card .cipher-sample .cipher { color: var(--accent); } @media (max-width: 480px) { .hero-text { padding: 1.5rem 0.5rem; font-size: clamp(1.5rem, 8vw, 2.4rem); } .random-display { font-size: 1.5rem; padding: 1.5rem 0.5rem; } }