/** * accessibility.css — White Eagle Project * * Standalone patch that can be included on any page in addition to style.css. * style.css already embeds these rules, so this file exists for pages that * load a different base stylesheet or need to include accessibility overrides * independently (e.g. coins.html, history.html when bundled separately). * * If style.css is present on the page, these declarations are harmless * duplicates — CSS specificity and cascade handle them correctly. */ /* ---------------------------------------------------------- High Contrast Mode Activated by adding .high-contrast to via app.js. ---------------------------------------------------------- */ body.high-contrast { --parchment: #ffffff; --parchment-dark: #f0f0f0; --text: #000000; --text-muted: #333333; --stone: #555555; --gold: #996600; --gold-light: #cc9900; } body.high-contrast .coin-card { border-left-width: 6px; } body.high-contrast a { text-decoration: underline; } /* Ensure interactive elements have clearly visible focus rings */ body.high-contrast :focus-visible { outline: 3px solid #000000; outline-offset: 2px; } /* History page era cards */ body.high-contrast .history-era { border-left-width: 6px; } /* Navigation active state */ body.high-contrast nav a.active { text-decoration: underline; font-weight: 700; } /* ---------------------------------------------------------- Large Font Mode Activated by adding .font-large to via app.js. ---------------------------------------------------------- */ body.font-large { font-size: 18px; } body.font-large .coin-card h3 { font-size: 1.1rem; } body.font-large .era-narrative p { font-size: 1.05rem; line-height: 1.8; } body.font-large nav a { font-size: 1rem; } body.font-large .era-nav a { font-size: 0.95rem; } /* ---------------------------------------------------------- Reduced Motion Respects the OS-level "reduce motion" preference. ---------------------------------------------------------- */ @media (prefers-reduced-motion: reduce) { *, *::before, *::after { transition: none !important; animation: none !important; scroll-behavior: auto !important; } } /* ---------------------------------------------------------- Era Read-More toggle button (history.js progressive disclosure) ---------------------------------------------------------- */ .era-read-more { display: inline-block; margin-top: 0.75rem; padding: 0.35rem 0.9rem; background: transparent; border: 1px solid var(--gold, #996600); border-radius: 4px; color: var(--gold, #996600); font-size: 0.875rem; cursor: pointer; transition: background 0.2s, color 0.2s; } .era-read-more:hover, .era-read-more:focus-visible { background: var(--gold, #996600); color: #ffffff; outline: none; } body.high-contrast .era-read-more { border-color: #000000; color: #000000; } body.high-contrast .era-read-more:hover, body.high-contrast .era-read-more:focus-visible { background: #000000; color: #ffffff; } /* ---------------------------------------------------------- Timeline tooltip (history.js) ---------------------------------------------------------- */ .timeline-tooltip { position: absolute; z-index: 9999; padding: 0.4rem 0.75rem; background: rgba(0, 0, 0, 0.85); color: #ffffff; font-size: 0.8rem; border-radius: 4px; pointer-events: none; white-space: nowrap; box-shadow: 0 2px 6px rgba(0, 0, 0, 0.3); } body.high-contrast .timeline-tooltip { background: #000000; border: 1px solid #ffffff; }