/* ============================================================================= ui/themes.css — Colour themes + accessibility options + the Appearance panel. ----------------------------------------------------------------------------- Works by overriding the CSS variables already used in wsa.css / site.css, keyed off attributes on set by site/appearance.js: data-theme default | cream | warm | calm | dark | high-contrast data-text-size normal | large | xl data-font normal | readable (dyslexia-friendly reading mode) data-motion normal | reduced Reusable: drop this + appearance.js into any vanilla app that uses the same --wsa-* variable names. ============================================================================= */ /* ---------- COLOUR THEMES ---------- */ /* Default (light) — same as wsa.css :root, restated so switching back works. */ :root[data-theme="default"] { --wsa-bg:#f4f7fb; --wsa-surface:#fff; --wsa-ink:#1f2a37; --wsa-muted:#5b6b7b; --wsa-line:#d9e1ea; --wsa-accent:#2563eb; --wsa-accent-ink:#fff; --wsa-found:#2ec4b6; --wsa-found-ink:#fff; --wsa-sel:#ffd166; --wsa-sel-ink:#1f2a37; --wsa-hint:#ff7ad9; } /* Cream — warm off-white reduces glare/visual stress (helps dyslexia + low vision). */ :root[data-theme="cream"] { --wsa-bg:#fbf3e0; --wsa-surface:#fffaf0; --wsa-ink:#352d22; --wsa-muted:#6f6354; --wsa-line:#e8dcc4; --wsa-accent:#9a5413; --wsa-accent-ink:#fff; --wsa-found:#5f8f6a; --wsa-found-ink:#fff; --wsa-sel:#ffe08a; --wsa-sel-ink:#352d22; --wsa-hint:#c98fb4; } /* Warm comfort. */ :root[data-theme="warm"] { --wsa-bg:#fff4ec; --wsa-surface:#fff; --wsa-ink:#3b2f2a; --wsa-muted:#7a675c; --wsa-line:#f0ddd0; --wsa-accent:#b54c18; --wsa-accent-ink:#fff; --wsa-found:#2ba89b; --wsa-found-ink:#fff; --wsa-sel:#ffce73; --wsa-sel-ink:#3b2f2a; --wsa-hint:#e58fb0; } /* Calm / low-stimulation — muted, desaturated; less visual noise (helps focus/ADHD). */ :root[data-theme="calm"] { --wsa-bg:#eef1ec; --wsa-surface:#fbfcfa; --wsa-ink:#2f3a33; --wsa-muted:#5c655f; --wsa-line:#d7ddd5; --wsa-accent:#466850; --wsa-accent-ink:#fff; --wsa-found:#88a98e; --wsa-found-ink:#1e2a22; --wsa-sel:#e3d6a8; --wsa-sel-ink:#2f3a33; --wsa-hint:#c2b2d2; } /* Dark — easier in low light / for light sensitivity. */ :root[data-theme="dark"] { --wsa-bg:#11161c; --wsa-surface:#1b232c; --wsa-ink:#e7eef6; --wsa-muted:#9fb0c0; --wsa-line:#2c3742; --wsa-accent:#5b9dff; --wsa-accent-ink:#08111b; --wsa-found:#2ec4b6; --wsa-found-ink:#06231f; --wsa-sel:#ffd166; --wsa-sel-ink:#1a1400; --wsa-hint:#ff7ad9; --wsa-shadow:0 6px 22px rgba(0,0,0,.45); } /* High contrast — maximum legibility for low vision (black/white/yellow). */ :root[data-theme="high-contrast"] { --wsa-bg:#000; --wsa-surface:#000; --wsa-ink:#fff; --wsa-muted:#ffea00; --wsa-line:#ffffff; --wsa-accent:#ffea00; --wsa-accent-ink:#000; --wsa-found:#00e5ff; --wsa-found-ink:#000; --wsa-sel:#ffea00; --wsa-sel-ink:#000; --wsa-hint:#ff5ff0; --wsa-shadow:0 0 0 2px #fff; } :root[data-theme="high-contrast"] .wsa-cell { border:2px solid #444; } :root[data-theme="high-contrast"] .wsa-btn, :root[data-theme="high-contrast"] .wsa-select { border:2px solid #fff; } /* ---------- TEXT SIZE ---------- */ /* --wsa-font-scale enlarges the grid letters; body font-size enlarges the rest. */ :root[data-text-size="large"] { --wsa-font-scale:1.18; } :root[data-text-size="large"] body { font-size:1.10rem; } :root[data-text-size="xl"] { --wsa-font-scale:1.35; } :root[data-text-size="xl"] body { font-size:1.25rem; } /* ---------- DYSLEXIA-FRIENDLY READING MODE ---------- */ /* Uses legible system fonts (no web-font dependency) + generous spacing. */ :root[data-font="readable"] body, :root[data-font="readable"] .wsa, :root[data-font="readable"] .wsa-btn, :root[data-font="readable"] .wsa-select { font-family: Verdana, Tahoma, "Trebuchet MS", "Segoe UI", system-ui, sans-serif; letter-spacing:.03em; } :root[data-font="readable"] .wsa-intro, :root[data-font="readable"] .wsa-words, :root[data-font="readable"] .site-hero p, :root[data-font="readable"] .theme-card .desc { word-spacing:.14em; line-height:1.7; } :root[data-font="readable"] .wsa-word { padding:6px 0; } /* roomier list */ /* ---------- REDUCE MOTION ---------- */ :root[data-motion="reduced"] .wsa-cell.is-pop { animation:none; } :root[data-motion="reduced"] .theme-card:hover { transform:none; } :root[data-motion="reduced"] * { scroll-behavior:auto; } /* ============================================================================= Appearance panel UI (injected by site/appearance.js) ============================================================================= */ .ax-fab { position: fixed; right: 16px; bottom: 16px; z-index: 60; display: inline-flex; align-items: center; gap: 8px; border: 1px solid var(--wsa-line); border-radius: 999px; background: var(--wsa-surface); color: var(--wsa-ink); padding: 10px 14px; font: 600 14px system-ui, sans-serif; cursor: pointer; box-shadow: var(--wsa-shadow); } .ax-fab:hover { filter: brightness(1.04); } .ax-fab svg { width: 18px; height: 18px; } .ax-backdrop { /* 9600 keeps the Appearance panel ABOVE the full-screen game overlay (9000), so it can be opened and used from inside the play modal too. */ position: fixed; inset: 0; z-index: 9600; display: none; background: rgba(0,0,0,.5); padding: 16px; align-items: center; justify-content: center; } .ax-backdrop.is-open { display: flex; } .ax-panel { background: var(--wsa-surface); color: var(--wsa-ink); width: 100%; max-width: 420px; max-height: 90vh; overflow: auto; border-radius: 16px; box-shadow: var(--wsa-shadow); padding: 20px 22px; font-family: system-ui, sans-serif; } .ax-panel h2 { margin: 0 0 4px; font-size: 1.25rem; } .ax-panel .ax-sub { margin: 0 0 16px; color: var(--wsa-muted); font-size: .9rem; } .ax-group { margin: 0 0 18px; } .ax-group > .ax-label { display: block; font-weight: 700; margin-bottom: 8px; } .ax-swatches { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; } .ax-swatch { display: flex; flex-direction: column; align-items: center; gap: 6px; border: 2px solid var(--wsa-line); border-radius: 12px; padding: 8px 6px; background: var(--wsa-surface); color: var(--wsa-ink); cursor: pointer; font: inherit; font-size: .8rem; } .ax-swatch[aria-pressed="true"] { border-color: var(--wsa-accent); box-shadow: 0 0 0 2px var(--wsa-accent); } .ax-swatch .dot { width: 28px; height: 28px; border-radius: 50%; border: 1px solid rgba(0,0,0,.15); } .ax-row { display: flex; gap: 8px; flex-wrap: wrap; } .ax-chip { flex: 1 1 auto; min-width: 84px; text-align: center; border: 2px solid var(--wsa-line); border-radius: 10px; padding: 10px; background: var(--wsa-surface); color: var(--wsa-ink); cursor: pointer; font: 600 14px system-ui, sans-serif; } .ax-chip[aria-pressed="true"] { border-color: var(--wsa-accent); box-shadow: 0 0 0 2px var(--wsa-accent); } .ax-actions { display: flex; justify-content: flex-end; gap: 8px; margin-top: 4px; } .ax-btn { border: 0; border-radius: 10px; padding: 10px 16px; cursor: pointer; font: 600 14px system-ui, sans-serif; background: var(--wsa-accent); color: var(--wsa-accent-ink); } .ax-btn-ghost { background: transparent; color: var(--wsa-ink); border: 1px solid var(--wsa-line); } .ax-fab:focus-visible, .ax-swatch:focus-visible, .ax-chip:focus-visible, .ax-btn:focus-visible { outline: 3px solid var(--wsa-accent); outline-offset: 2px; }