/* ============================================================================ Track2Map — a11y.css The accessibility control and the modes it switches on. Kept in its own file so the site stylesheet stays readable and this can be audited on its own. ========================================================================== */ /* ---------- trigger ---------- */ .a11y-trigger{ position:fixed; left:18px; bottom:18px; z-index:9000; width:50px; height:50px; border-radius:50%; cursor:pointer; background:var(--ink, #0d0e10); color:#fff; border:2px solid #fff; display:flex; align-items:center; justify-content:center; box-shadow:0 6px 22px -6px rgba(13,14,16,.55); transition:transform .18s ease, background .18s ease; } .a11y-trigger:hover{ transform:scale(1.06); background:#26272b; } .a11y-trigger:focus-visible{ outline:3px solid #cf2e2e; outline-offset:3px; } /* ---------- panel ---------- */ .a11y-panel{ position:fixed; left:18px; bottom:78px; z-index:9001; width:min(330px, calc(100vw - 36px)); background:#fff; color:#0d0e10; border:1px solid #d8d8dc; border-radius:10px; box-shadow:0 24px 60px -20px rgba(13,14,16,.4); opacity:0; transform:translateY(10px); transition:opacity .18s ease, transform .18s ease; max-height:min(74vh, 620px); overflow-y:auto; } .a11y-panel.is-open{ opacity:1; transform:none; } .a11y-head{ display:flex; align-items:center; justify-content:space-between; padding:.85rem 1rem; border-bottom:1px solid #e8e8ea; font-weight:650; font-size:.95rem; } .a11y-x{ background:none; border:0; cursor:pointer; font-size:1.5rem; line-height:1; color:#74787f; padding:0 .2rem; } .a11y-x:hover{ color:#0d0e10; } .a11y-body{ padding:1rem; display:grid; gap:1.1rem; } .a11y-sec{ display:grid; gap:.5rem; } .a11y-lbl{ font-size:.72rem; font-weight:650; letter-spacing:.1em; text-transform:uppercase; color:#74787f; } .a11y-row{ display:flex; gap:.45rem; align-items:center; } .a11y-grid{ display:grid; grid-template-columns:1fr 1fr; gap:.45rem; } .a11y-b{ font:inherit; font-size:.83rem; font-weight:550; cursor:pointer; background:#f6f6f7; color:#0d0e10; border:1px solid #dededf; border-radius:6px; padding:.55rem .7rem; text-align:center; transition:background .15s ease, border-color .15s ease; } .a11y-b:hover{ background:#ececee; } .a11y-b--flex{ flex:1; } .a11y-b--block{ width:100%; } .a11y-b.is-on{ background:#cf2e2e; border-color:#cf2e2e; color:#fff; } .a11y-size{ min-width:56px; text-align:center; font-size:.85rem; font-weight:640; } .a11y-reset{ font:inherit; font-size:.85rem; font-weight:600; cursor:pointer; background:#0d0e10; color:#fff; border:0; border-radius:6px; padding:.62rem; } .a11y-reset:hover{ background:#26272b; } .a11y-link{ font-size:.8rem; color:#74787f; text-align:center; text-decoration:underline; } .a11y-link:hover{ color:#0d0e10; } /* ========================================================================== The modes ========================================================================== */ /* grayscale on , so the widget itself is not desaturated with the page */ html.a11y-grayscale body{ filter:grayscale(100%); } html.a11y-underline-links a{ text-decoration:underline !important; } html.a11y-pause-anim .backdrop{ display:none; } html.a11y-pause-anim .hero__grid{ animation:none !important; } html.a11y-pause-anim *, html.a11y-pause-anim *::before, html.a11y-pause-anim *::after{ animation-play-state:paused !important; transition:none !important; } html.a11y-readable-font body, html.a11y-readable-font body *:not(.a11y-panel):not(.a11y-panel *){ font-family:Verdana, Tahoma, "DejaVu Sans", sans-serif !important; letter-spacing:.01em; } html.a11y-text-spacing body{ line-height:1.9 !important; } html.a11y-text-spacing p, html.a11y-text-spacing li{ letter-spacing:.06em !important; word-spacing:.14em !important; } html.a11y-highlight-focus .a11y-focused, html.a11y-highlight-focus a:hover, html.a11y-highlight-focus button:hover{ outline:3px solid #ffd400 !important; outline-offset:2px; background:rgba(255,212,0,.22) !important; } /* ---------- high contrast ---------- */ html[data-a11y-contrast="high"]{ --ink:#000; --slate:#000; --muted:#1a1a1a; --line:#000; --line-soft:#000; --wash:#fff; --white:#fff; } html[data-a11y-contrast="high"] body{ background:#fff; color:#000; } html[data-a11y-contrast="high"] .panel-dark, html[data-a11y-contrast="high"] .site-foot, html[data-a11y-contrast="high"] .dom{ background:#000 !important; color:#fff !important; } html[data-a11y-contrast="high"] .panel-dark h2, html[data-a11y-contrast="high"] .panel-dark p, html[data-a11y-contrast="high"] .dom h3, html[data-a11y-contrast="high"] .dom p, html[data-a11y-contrast="high"] .dom li, html[data-a11y-contrast="high"] .site-foot, html[data-a11y-contrast="high"] .site-foot a{ color:#fff !important; } html[data-a11y-contrast="high"] .card, html[data-a11y-contrast="high"] .qrow li{ border:2px solid #000 !important; } html[data-a11y-contrast="high"] .btn{ background:#000 !important; border-color:#000 !important; color:#fff !important; } html[data-a11y-contrast="high"] .btn--onDark{ background:#fff !important; color:#000 !important; } html[data-a11y-contrast="high"] .hero__grid, html[data-a11y-contrast="high"] .backdrop{ display:none; } html[data-a11y-contrast="high"] body{ background-image:none; } html[data-a11y-contrast="high"] section{ background:#fff; } /* ---------- dark mode ---------- */ html[data-a11y-contrast="dark"]{ --ink:#f2f2f3; --slate:#c2c4c8; --muted:#9a9da3; --line:#2e3035; --line-soft:#26282c; --wash:#141518; --white:#0d0e10; } html[data-a11y-contrast="dark"] body{ background:#0d0e10; color:#f2f2f3; } html[data-a11y-contrast="dark"] .site-head{ background:rgba(13,14,16,.9); border-bottom-color:#26282c; } html[data-a11y-contrast="dark"] .hero, html[data-a11y-contrast="dark"] .card{ background:#0d0e10; } html[data-a11y-contrast="dark"] .band-wash{ background:#141518; border-block-color:#26282c; } html[data-a11y-contrast="dark"] .qrow li{ background:#0d0e10; } html[data-a11y-contrast="dark"] .qrow{ background:#2e3035; border-color:#2e3035; } html[data-a11y-contrast="dark"] .panel-dark{ background:#000; } html[data-a11y-contrast="dark"] .privacy{ background:#10241a; border-color:#1d4635; } html[data-a11y-contrast="dark"] .privacy h3{ color:#7fd6a3; } html[data-a11y-contrast="dark"] .privacy__claims{ background:#1d4635; border-color:#1d4635; } html[data-a11y-contrast="dark"] .privacy__claims li{ background:#10241a; color:#cfeadb; } html[data-a11y-contrast="dark"] body{ background-image:radial-gradient(circle, rgba(255,255,255,.075) 1px, transparent 1.4px); } html[data-a11y-contrast="dark"] section{ background:rgba(13,14,16,.82); } html[data-a11y-contrast="dark"] .band-wash{ background:rgba(20,21,24,.86); } html[data-a11y-contrast="dark"] .hero{ background:rgba(13,14,16,.72); } html[data-a11y-contrast="dark"] .hero__grid{ background-image: linear-gradient(to right, rgba(255,255,255,.06) 1px, transparent 1px), linear-gradient(to bottom, rgba(255,255,255,.06) 1px, transparent 1px); } html[data-a11y-contrast="dark"] .avatar{ background:#26282c; } @media (max-width:760px){ .a11y-trigger{ left:12px; bottom:12px; width:46px; height:46px; } .a11y-panel{ left:12px; right:12px; bottom:68px; width:auto; } } @media print{ .a11y-trigger, .a11y-panel{ display:none !important; } }