/* Who Knew! - Base stylesheet process/css/style.css Design goals: high contrast by default, large tap targets for mobile, scalable text via the low-vision font-size cookie (applied by main.js), no information conveyed by color alone. */ :root { --wk-bg: #14121a; --wk-panel: #1f1c28; --wk-text: #f5f3f9; --wk-muted: #b9b3c6; --wk-accent: #d8b400; /* gold, echoes ZSG's card-index gold */ --wk-correct: #2e8b57; --wk-wrong: #b03030; --wk-focus: #ffcf40; --wk-radius: 10px; } * { box-sizing: border-box; } body { background: var(--wk-bg); color: var(--wk-text); font-family: system-ui, -apple-system, "Segoe UI", Roboto, sans-serif; font-size: 1.05rem; line-height: 1.5; margin: 0; padding: 0; } .wk-container { max-width: 480px; margin: 0 auto; padding: 1.25rem 1rem 3rem; } .wk-skip-link { position: absolute; left: -999px; top: 0; background: var(--wk-accent); color: #14121a; padding: 0.5rem 1rem; z-index: 100; } .wk-skip-link:focus { left: 0.5rem; top: 0.5rem; } .wk-sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; } h1, h2, h3 { font-weight: 700; } .wk-panel { background: var(--wk-panel); border-radius: var(--wk-radius); padding: 1.25rem; margin-bottom: 1rem; } label { display: block; font-weight: 600; margin-bottom: 0.3rem; } input[type="text"], input[type="email"], input[type="number"] { width: 100%; padding: 0.75rem; font-size: 1.05rem; border-radius: 8px; border: 2px solid #4a4457; background: #0f0d14; color: var(--wk-text); margin-bottom: 1rem; } input:focus, button:focus, a:focus, [tabindex]:focus { outline: 3px solid var(--wk-focus); outline-offset: 2px; } button, .wk-btn { display: inline-block; width: 100%; padding: 0.9rem 1rem; font-size: 1.05rem; font-weight: 700; border: none; border-radius: 8px; background: var(--wk-accent); color: #14121a; cursor: pointer; min-height: 48px; /* accessible tap target */ margin-bottom: 0.6rem; } button:hover, .wk-btn:hover { filter: brightness(1.1); } button.wk-btn-secondary { background: transparent; color: var(--wk-text); border: 2px solid #4a4457; } .wk-checkbox-row { display: flex; align-items: flex-start; gap: 0.6rem; margin-bottom: 1rem; } .wk-checkbox-row input[type="checkbox"] { width: 22px; height: 22px; margin-top: 2px; flex-shrink: 0; } .wk-checkbox-row label { font-weight: 400; margin-bottom: 0; } .wk-error { background: #3a1414; border: 2px solid var(--wk-wrong); color: #ffd6d6; padding: 0.75rem 1rem; border-radius: 8px; margin-bottom: 1rem; } .wk-success { background: #143a24; border: 2px solid var(--wk-correct); color: #d6ffe4; padding: 0.75rem 1rem; border-radius: 8px; margin-bottom: 1rem; } .wk-muted { color: var(--wk-muted); font-size: 0.95rem; } .wk-answer-list { list-style: none; margin: 1rem 0 0 0; padding: 0; } .wk-answer-list li { margin-bottom: 0.6rem; } .wk-answer-list .wk-btn { display: block; text-align: left; } details summary { cursor: pointer; color: var(--wk-link, #1a5fb4); text-decoration: underline; font-weight: 600; } details[open] summary { margin-bottom: 0.75rem; } .wk-details summary { cursor: pointer; font-weight: 600; padding: 0.5rem 0; } nav.wk-mainmenu ul { list-style: none; margin: 0; padding: 0; } nav.wk-mainmenu li { margin-bottom: 0.6rem; } nav.wk-mainmenu a.wk-btn { text-decoration: none; text-align: center; } /* Low-vision scaling: main.js sets font-size on based on the wk_font_size cookie (default / large / extra_large), same pattern as ZSG. */ html.wk-font-large { font-size: 120%; } html.wk-font-xlarge { font-size: 145%; } html.wk-contrast-high body { background: #000; --wk-panel: #000; --wk-text: #fff; --wk-accent: #ffe600; }