/* ========================================================================== Skip link ========================================================================== */ .skip-link { position: absolute; top: -100%; left: var(--space-sm); z-index: 10000; padding: 0.75rem 1.25rem; font-size: 0.875rem; font-weight: 600; color: var(--color-white); background: var(--color-text); border-radius: var(--radius-sm); box-shadow: var(--shadow-md); transition: top var(--transition-fast); } .skip-link:focus { top: var(--space-sm); outline: 3px solid var(--color-gold); outline-offset: 2px; } /* ========================================================================== Floating accessibility widget ========================================================================== */ .a11y-widget { position: fixed; right: 0; top: 50%; transform: translateY(-50%); z-index: 99990; display: flex; flex-direction: column; align-items: flex-end; gap: 0; font-family: var(--font-body); pointer-events: none; } .a11y-widget__trigger { pointer-events: auto; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 0.25rem; width: 56px; min-height: 56px; padding: 0.5rem 0.35rem; background: var(--color-gold-dark, #967832); color: var(--color-white); border: none; border-radius: var(--radius-sm) 0 0 var(--radius-sm); box-shadow: -4px 4px 24px rgba(0, 0, 0, 0.22); cursor: pointer; transition: background var(--transition-fast), transform var(--transition-fast); } .a11y-widget__trigger:hover, .a11y-widget__trigger:focus-visible { background: var(--color-gold, #b8943f); transform: translateX(-2px); outline: none; box-shadow: -6px 6px 24px rgba(0, 0, 0, 0.28), 0 0 0 3px var(--color-gold-light); } .a11y-widget__trigger svg { flex-shrink: 0; width: 24px; height: 24px; } .a11y-widget__label { font-size: 0.5625rem; font-weight: 700; letter-spacing: 0.04em; text-transform: uppercase; line-height: 1.1; max-width: 44px; text-align: center; } .a11y-widget__panel { pointer-events: auto; position: absolute; right: calc(100% + 8px); top: 50%; transform: translateY(-50%); width: min(280px, calc(100vw - 80px)); max-height: min(80vh, 520px); overflow-y: auto; background: var(--color-white); border: 1px solid var(--color-border); border-radius: var(--radius-md); box-shadow: var(--shadow-lg); padding: var(--space-md); } .a11y-widget__panel[hidden] { display: none !important; } .a11y-widget__title { font-family: var(--font-body); font-size: 1rem; font-weight: 700; margin-bottom: 0.25rem; color: var(--color-text); } .a11y-widget__note { font-size: 0.75rem; color: var(--color-text-muted); line-height: 1.45; margin-bottom: var(--space-sm); padding-bottom: var(--space-sm); border-bottom: 1px solid var(--color-border-light); } .a11y-widget__options { display: flex; flex-direction: column; gap: 0.375rem; } .a11y-widget__option { display: flex; align-items: center; justify-content: space-between; gap: var(--space-xs); width: 100%; min-height: 44px; padding: 0.625rem 0.75rem; font-size: 0.875rem; font-weight: 500; color: var(--color-text); background: var(--color-cream); border: 1px solid var(--color-border-light); border-radius: var(--radius-sm); cursor: pointer; text-align: left; transition: border-color var(--transition-fast), background var(--transition-fast); } .a11y-widget__option:hover, .a11y-widget__option:focus-visible { border-color: var(--color-gold); background: var(--color-white); outline: none; } .a11y-widget__option[aria-pressed='true'] { background: var(--color-gold-light); border-color: var(--color-gold); font-weight: 600; } .a11y-widget__option--reset { margin-top: var(--space-xs); background: var(--color-white); color: var(--color-gold-dark); font-weight: 600; } /* Applied accessibility settings on */ html.a11y-text-sm { font-size: 93.75%; } html.a11y-text-xs { font-size: 87.5%; } html.a11y-text-lg { font-size: 112.5%; } html.a11y-text-xl { font-size: 125%; } html.a11y-grayscale { filter: grayscale(100%); } html.a11y-high-contrast { filter: contrast(1.35); } html.a11y-high-contrast body { background: #fff; color: #000; } html.a11y-underline-links a:not(.btn):not(.a11y-widget__option):not(.a11y-widget__trigger) { text-decoration: underline !important; text-underline-offset: 3px; } html.a11y-readable-font body, html.a11y-readable-font button, html.a11y-readable-font input, html.a11y-readable-font select, html.a11y-readable-font textarea { font-family: Arial, Helvetica, sans-serif !important; } html.a11y-readable-font h1, html.a11y-readable-font h2, html.a11y-readable-font h3, html.a11y-readable-font h4 { font-family: Arial, Helvetica, sans-serif !important; } html.a11y-reduce-motion *, html.a11y-reduce-motion *::before, html.a11y-reduce-motion *::after { animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; transition-duration: 0.01ms !important; scroll-behavior: auto !important; } @media (max-width: 767px) { .a11y-widget { top: auto; bottom: calc(5.5rem + env(safe-area-inset-bottom, 0px)); transform: none; } .a11y-widget__panel { top: auto; bottom: 0; transform: none; right: calc(100% + 8px); } } @media (min-width: 768px) { .fab-book { /* FAB hidden on desktop — no overlap concern */ } }