/* ══════════════════════════════════════════════════════ Accessibility panel + body-class overrides Applied via js/a11y.js — classes on ══════════════════════════════════════════════════════ */ /* ── Panel button in header ──────────────────────────── */ #btn-a11y { background: #d8e0bf; color: #434a33; border: 1px solid #85956c; border-radius: 4px; padding: 4px 9px; font-size: .82rem; font-weight: bold; cursor: pointer; letter-spacing: .02em; transition: background .15s, color .15s; line-height: 1; } #btn-a11y:hover { background: #c0cfa0; color: #262b1c; } #btn-a11y.active { background: #3f4b2b; color: #f0f2e3; } /* ── Accessibility panel ─────────────────────────────── */ #a11y-panel { position: fixed; top: 62px; right: 16px; width: 240px; background: #f2f4e2; border: 1px solid #85956c; border-radius: 3px; z-index: 8500; padding: 14px 16px 16px; box-shadow: 0 2px 10px rgba(0,0,0,.16); display: none; } #a11y-panel.open { display: block; } #a11y-panel h3 { font-size: .65rem; letter-spacing: .1em; color: #5f6647; text-transform: uppercase; margin-bottom: 14px; } .a11y-section { margin-bottom: 14px; padding-bottom: 14px; border-bottom: 1px solid #c0cfa0; } .a11y-section:last-child { margin-bottom: 0; padding-bottom: 0; border-bottom: none; } .a11y-label { font-size: .72rem; color: #565c42; margin-bottom: 8px; display: block; } /* Font size buttons */ .fs-btns { display: flex; gap: 6px; align-items: flex-end; } .fs-btn { background: #d8e0bf; border: 1px solid #85956c; border-radius: 3px; color: #434a33; cursor: pointer; padding: 4px 0; flex: 1; transition: background .12s, color .12s; line-height: 1; font-family: var(--font-display); } .fs-btn:hover { background: #c0cfa0; color: #262b1c; } .fs-btn.active { background: #3f4b2b; border-color: #5c6840; color: #f0f2e3; } /* Each step gets a progressively larger A */ #fs-btn-small { font-size: .7rem; } #fs-btn-normal { font-size: .85rem; } #fs-btn-large { font-size: 1rem; } #fs-btn-xlarge { font-size: 1.15rem;} /* Toggle rows */ .a11y-toggle-row { display: flex; align-items: center; justify-content: space-between; cursor: pointer; padding: 3px 0; user-select: none; } .a11y-toggle-row:hover .a11y-toggle-lbl { color: #262b1c; } .a11y-toggle-lbl { font-size: .8rem; color: #343a26; line-height: 1.4; } /* Toggle switch */ .a11y-toggle { width: 32px; height: 18px; border-radius: 9px; background: #c0cfa0; border: 1px solid #85956c; position: relative; flex-shrink: 0; transition: background .18s; cursor: pointer; } .a11y-toggle::after { content: ''; position: absolute; top: 2px; left: 2px; width: 12px; height: 12px; border-radius: 50%; background: #6e7e4c; transition: left .18s, background .18s; } .a11y-toggle.on { background: #3f4b2b; border-color: #5c6840; } .a11y-toggle.on::after { left: 16px; background: #f0f2e3; } .a11y-hint { font-size: .68rem; color: #5f6647; margin-top: 10px; line-height: 1.5; } /* ── Focus indicators (always enhanced) ──────────────── */ *:focus-visible { outline: 2px solid #3f4b2b !important; outline-offset: 2px !important; border-radius: 2px; } /* ══════════════════════════════════════════════════════ HIGH CONTRAST MODE — html.hc On a light theme: pushes text to pure black, borders bolder, accents stronger. Improves readability for low-vision users without flipping to dark mode. ══════════════════════════════════════════════════════ */ html.hc body { background: #f0f4dc; color: #000; } html.hc #header { background: #b8c8a0; border-bottom: 2px solid #4a5a30; } html.hc #header h1 { color: #000; } html.hc .sub { color: #23291a; } html.hc .layer-btn { background: #e0e8c8; color: #000; border-color: #4a5a30; } html.hc .layer-btn:hover { background: #b8c8a0; } html.hc .layer-btn.active { background: #272d1c; color: #ffffff; border-color: #11150b; } html.hc .h-div { background: #4a5a30; } html.hc .leaflet-popup-content-wrapper { background: #ffffff; border: 2px solid #23291a; } html.hc .leaflet-popup-tip { background: #ffffff; } html.hc .popup-caption { color: #000; border-bottom-color: #4a5a30; } html.hc .popup-coords { color: #23291a; border-bottom-color: #4a5a30; } html.hc .popup-btn-full { background: #d0d8b0; color: #000; } html.hc .popup-btn-info { background: #272d1c; color: #ffffff; } html.hc #layer-panel, html.hc #about-panel, html.hc #info-drawer { background: #ffffff; border: 2px solid #23291a; } html.hc #layer-panel h3 { color: #23291a; } html.hc .lp-lbl { color: #000; } html.hc .chk { background: #ffffff; border: 2px solid #4a5a30; } html.hc .chk.on { background: #272d1c; border-color: #11150b; } html.hc .lp-sep { background: #4a5a30; } html.hc .lp-leg-txt { color: #161a10; } html.hc #about-panel h2 { color: #000; } html.hc #about-panel p { color: #161a10; } html.hc .stat-lbl { color: #23291a; } html.hc .stat-val { color: #000; } html.hc #info-drawer-meta { color: #23291a; } html.hc #info-drawer-caption { color: #000; border-left-color: #272d1c; border-left-width: 4px; } html.hc #info-drawer-context { color: #000; } html.hc #info-drawer-source { color: #23291a; border-top-color: #4a5a30; } /* Citation superscripts in high-contrast mode */ html.hc .cite a { color: #11150b; border-bottom-color: #272d1c; } html.hc .cite a:hover { color: #000; border-bottom-color: #11150b; } /* Active-photo halo: darker stroke for visibility */ html.hc .active-halo { stroke: #11150b !important; } /* Citation modal in high-contrast mode */ html.hc #cite-modal { background: rgba(0,0,0,.6); } html.hc #cite-card { background: #ffffff; border: 2px solid #23291a; } html.hc #cite-title { color: #000; } html.hc #cite-subtitle { color: #161a10; } html.hc .cite-row { background: #f0f4dc; border: 2px solid #4a5a30; } html.hc .cite-style { color: #23291a; } html.hc .cite-copy { background: #e0e8c8; color: #000; border-color: #4a5a30; } html.hc .cite-text { color: #000; } html.hc .cite-button { background: #f0f4dc; color: #11150b; border: 2px solid #23291a; } html.hc .cite-button:hover { background: #e0e8c8; color: #000; } /* Reduced-motion: skip the pulse animation */ html.rm .active-halo.halo-pulsing { animation: none !important; } html.hc #info-drawer-nav { background: #ffffff; border-top-color: #23291a; } html.hc .idn-btn { background: #e0e8c8; color: #000; border-color: #4a5a30; } html.hc .idn-btn:hover { background: #b8c8a0; } html.hc #idn-counter { color: #161a10; } html.hc #photo-count { background: #ffffff; border-color: #23291a; color: #000; } html.hc #intro-screen { background: #f0f4dc; } html.hc .intro-card { background: #ffffff; border: 2px solid #23291a; } html.hc .intro-title-ar, html.hc .intro-title-en { color: #000; } html.hc .intro-subtitle { color: #161a10; } html.hc .intro-para { color: #000; } html.hc .intro-stats { background: #f0f4dc; border: 2px solid #23291a; } html.hc .intro-stat .is-lbl { color: #161a10; } html.hc .intro-stat .is-val { color: #000; } html.hc .intro-tip { background: #f0f4dc; border-left: 4px solid #272d1c; color: #000; } html.hc .intro-tip kbd { background: #ffffff; border: 1px solid #23291a; color: #000; } html.hc .intro-btn-primary { background: #272d1c; color: #ffffff; } html.hc .intro-btn-primary:hover { background: #11150b; } html.hc .intro-btn-secondary { background: #e0e8c8; color: #000; border: 2px solid #23291a; } html.hc .intro-credit { color: #161a10; border-top-color: #4a5a30; } html.hc #search-panel { background: #ffffff; border: 2px solid #23291a; } html.hc #search-input { background: #ffffff; border: 2px solid #23291a; color: #000; } html.hc #search-status { color: #161a10; border-bottom-color: #4a5a30; } html.hc .sr-item { border-bottom-color: #4a5a30; } html.hc .sr-item:hover, html.hc .sr-item.active { background: #f0f4dc; } html.hc .sr-title { color: #23291a; } html.hc .sr-caption { color: #000; } html.hc .sr-snippet { color: #161a10; } html.hc .sr-caption mark, html.hc .sr-title mark, html.hc .sr-snippet mark { background: #ffeb3b; color: #000; } html.hc .marker-inner { border-color: #ffffff; box-shadow: 0 2px 8px rgba(0,0,0,.65); } /* Gallery — high contrast */ html.hc #gallery-intro h2 { color: #000; } html.hc #gallery-intro p { color: #161a10; } html.hc #gallery-intro { border-bottom-color: #4a5a30; } html.hc .g-entry { border-bottom-color: #4a5a30; } html.hc .g-caption { color: #000; background: #ffffff; border-left-color: #272d1c; border-left-width: 4px; } html.hc .g-coords { color: #23291a; } html.hc .g-context { color: #000; } html.hc .g-sources { border-top-color: #4a5a30; } html.hc .g-source-link { color: #272d1c; text-decoration: underline; } html.hc .g-source-link:hover{ color: #11150b; } /* Accessibility panel — high contrast */ html.hc #a11y-panel { background: #ffffff; border: 2px solid #23291a; } html.hc #a11y-panel h3 { color: #23291a; } html.hc .a11y-label { color: #161a10; } html.hc .a11y-toggle-lbl { color: #000; } html.hc .a11y-section { border-bottom-color: #4a5a30; } html.hc .fs-btn { background: #e0e8c8; color: #000; border-color: #4a5a30; } html.hc .fs-btn.active { background: #272d1c; color: #ffffff; } /* ══════════════════════════════════════════════════════ REDUCE MOTION MODE — html.rm ══════════════════════════════════════════════════════ */ html.rm *, html.rm *::before, html.rm *::after { transition: none !important; animation: none !important; } html.rm #info-drawer { transition: none !important; }