/* Accessibility Tools - Cookie-consent-like UI (configurable) */ :root{ --a11y-font-scale: 1; --a11y-line-height: 1.35; --a11y-letter-spacing: 0; --a11y-panel-bg-rgba: rgba(245,246,248,.96); --a11y-panel-border-color: rgba(255,255,255,.55); --a11y-panel-border-width: 1px; --a11y-panel-max-width: 860px; --a11y-panel-radius: 28px; --a11y-fab-radius: 999px; --a11y-fab-bg-rgba: rgba(0,0,0,.5); --a11y-fab-border-color: rgba(0,0,0,0); --a11y-fab-border-width: 0px; --a11y-statement-bg: #B6B6B6; --a11y-statement-color: #FFFFFF; } html{ font-size: calc(16px * var(--a11y-font-scale, 1)); } body{ line-height: var(--a11y-line-height, 1.35); letter-spacing: var(--a11y-letter-spacing, 0); } /* Modes toggled on */ body.a11y-high-contrast{ background:#000 !important; color:#fff !important; } body.a11y-high-contrast a{ color:#ff0 !important; } body.a11y-high-contrast *{ border-color:#fff !important; } body.a11y-mono{ } body.a11y-mono > *:not(#a11y-root){ filter: grayscale(1); } body.a11y-underline-links a{ text-decoration: underline !important; text-underline-offset: 0.15em; } body.a11y-reduce-motion *{ animation:none !important; transition:none !important; scroll-behavior:auto !important; } /* Floating button */ .a11y-fab{ border-radius: var(--a11y-fab-radius); position: fixed; z-index: 2147483646; display: inline-flex; align-items: center; gap: .6rem; border-style: solid; padding: .75rem 1.1rem; box-shadow: 0 10px 26px rgba(0,0,0,.25); background: var(--a11y-fab-bg-rgba); border-color: var(--a11y-fab-border-color); border-width: var(--a11y-fab-border-width); color: #fff; cursor: pointer; font-weight: 600; backdrop-filter: blur(4px); font-family: inherit; } .a11y-fab:hover{ filter: brightness(1.05); } .a11y-fab:focus{ outline: 3px solid rgba(255,255,255,.85); outline-offset: 3px; } .a11y-pos-br { right: 20px; bottom: 20px; } .a11y-pos-bl { left: 20px; bottom: 20px; } .a11y-pos-tr { right: 20px; top: 20px; } .a11y-pos-tl { left: 20px; top: 20px; } .a11y-fab svg{ width: 20px; height: 20px; display:block; fill: currentColor; } /* Fullscreen modal overlay */ #a11yModal{ position: fixed !important; inset: 0 !important; display: none; align-items: center; justify-content: center; padding: 22px; background: rgba(0,0,0,.35); z-index: 2147483647; } #a11yModal.show{ display:flex; } .a11y-dialog{ width: min(var(--a11y-panel-max-width, 860px), 100%); margin: 0; } .a11y-modal{ border-radius: var(--a11y-panel-radius); overflow: hidden; border-style: solid; border-color: var(--a11y-panel-border-color); border-width: var(--a11y-panel-border-width); box-shadow: 0 18px 55px rgba(0,0,0,.35); background: var(--a11y-panel-bg-rgba); backdrop-filter: blur(6px); } .a11y-modal-header{ padding: 18px 18px 8px 18px; border-bottom: 1px solid rgba(0,0,0,.08); display:flex; align-items:center; justify-content: space-between; gap: 14px; } .a11y-title-wrap{ display:flex; align-items:center; gap: 14px; min-width: 0; } .a11y-title{ font-size: 44px; line-height: 1.05; letter-spacing: .5px; color: rgba(0,0,0,.22); font-weight: 800; text-transform: lowercase; margin: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .a11y-header-icon{ width: 34px; height: 34px; border-radius: 999px; background: rgba(255,255,255,.55); border: 1px solid rgba(0,0,0,.06); color: rgba(0,0,0,.55); display:inline-flex; align-items:center; justify-content:center; } .a11y-header-icon svg{ width: 20px; height: 20px; } .a11y-close{ border: 0; background: rgba(240,241,244,.95); box-shadow: inset 0 0 0 1px rgba(0,0,0,.10); color: rgba(0,0,0,.72); height: 38px; padding: 0 18px; border-radius: 999px; font-weight: 700; cursor: pointer; font-family: inherit; font-size: .95rem; letter-spacing: .2px; } .a11y-close:hover{ filter: brightness(.98); } .a11y-close:focus{ outline: 3px solid rgba(0,0,0,.35); outline-offset: 3px; } .a11y-modal-body{ padding: 10px 18px 18px 18px; } .a11y-grid{ display:grid; grid-template-columns: 1fr 1fr; gap: 14px; } @media (max-width: 720px){ .a11y-title{ font-size: 34px; } } @media (max-width: 520px){ .a11y-grid{ grid-template-columns: 1fr; } .a11y-title{ font-size: 28px; } } .a11y-card{ background: rgba(255,255,255,.55); border: 1px solid rgba(0,0,0,.06); border-radius: 18px; padding: 14px; } .a11y-card h3{ margin: 0 0 10px 0; font-size: 1rem; font-weight: 800; color: rgba(0,0,0,.80); } .a11y-actions{ display:flex; flex-wrap: wrap; gap: 10px; } /* Buttons inside cards: normal (not bold) */ .a11y-btn, .a11y-reset, .a11y-statement{ border: 0; border-radius: 999px; height: 38px; padding: 0 18px; cursor: pointer; display:inline-flex; align-items:center; justify-content:center; font-family: inherit; font-size: .95rem; letter-spacing: .2px; font-weight: 400; /* per request */ gap: 10px; } .a11y-btn{ background: rgba(240,241,244,.95); box-shadow: inset 0 0 0 1px rgba(0,0,0,.10); color: rgba(0,0,0,.72); } .a11y-btn:hover{ filter: brightness(.98); } .a11y-btn[aria-pressed="true"]{ background: rgba(0,0,0,.80); color: #fff; box-shadow: none; } .a11y-btn:focus{ outline: 3px solid rgba(0,0,0,.35); outline-offset: 3px; } /* Inline icon bubble */ .a11y-btn-icon{ width: 26px; height: 26px; border-radius: 999px; background: rgba(0,0,0,.20); box-shadow: inset 0 0 0 2px rgba(255,255,255,.35); display:inline-flex; align-items:center; justify-content:center; flex: 0 0 auto; } .a11y-btn[aria-pressed="true"] .a11y-btn-icon{ background: rgba(255,255,255,.15); box-shadow: inset 0 0 0 2px rgba(255,255,255,.25); } .a11y-btn-icon svg{ width: 16px; height: 16px; fill: currentColor; } .a11y-footer{ padding: 14px 18px 18px 18px; background: rgba(255,255,255,.55); border-top: 1px solid rgba(0,0,0,.06); display:flex; justify-content: space-between; align-items: center; gap: 10px; flex-wrap: wrap; } .a11y-reset{ background: rgba(240,241,244,.95); box-shadow: inset 0 0 0 1px rgba(0,0,0,.10); color: rgba(0,0,0,.72); } .a11y-reset:hover{ filter: brightness(.98); } .a11y-statement{ background: var(--a11y-statement-bg); color: var(--a11y-statement-color); text-decoration: none; padding: 0 18px; } .a11y-statement:hover{ filter: brightness(1.03); } .a11y-statement:focus{ outline: 3px solid rgba(255,255,255,.85); outline-offset: 3px; } .a11y-reset, .a11y-statement{ font-weight: 800; }