/** * Visitor accessibility preferences — matches BCBCP tokens (purple #872D78, gold #D5A539, paper). * Driven by attributes set by a11y-panel.js / inline boot script. */ /* ─── Panel UI ─── */ .caicp-a11y-trigger { position: fixed; right: 1rem; bottom: 1rem; z-index: 99998; width: 3.25rem; height: 3.25rem; padding: 0; display: inline-flex; align-items: center; justify-content: center; font-family: system-ui, -apple-system, "Segoe UI", Roboto, sans-serif; color: #872d78; background: linear-gradient(145deg, #faf7f9 0%, #ffffff 45%, #f5e6f0 100%); border: 2px solid #872d78; border-radius: 50%; box-shadow: 0 4px 16px rgba(45, 14, 42, 0.18), inset 0 1px 0 rgba(255, 255, 255, 0.85); cursor: pointer; line-height: 0; } .caicp-a11y-trigger-icon { width: 1.65rem; height: 1.65rem; flex-shrink: 0; } .caicp-a11y-trigger:hover { border-color: #6b1f62; box-shadow: 0 6px 20px rgba(135, 45, 120, 0.22); } .caicp-a11y-trigger:focus { outline: none; box-shadow: 0 0 0 3px rgba(213, 165, 57, 0.85), 0 4px 16px rgba(45, 14, 42, 0.18); } .caicp-a11y-trigger:focus-visible { outline: none; box-shadow: 0 0 0 3px rgba(213, 165, 57, 0.85), 0 4px 16px rgba(45, 14, 42, 0.18); } .caicp-a11y-backdrop { position: fixed; inset: 0; z-index: 99999; background: rgba(26, 10, 24, 0.45); opacity: 0; visibility: hidden; transition: opacity 0.18s ease, visibility 0.18s ease; } .caicp-a11y-backdrop.is-open { opacity: 1; visibility: visible; } .caicp-a11y-dialog { position: fixed; right: 1rem; bottom: 4.25rem; z-index: 100000; width: min(22rem, calc(100vw - 2rem)); max-height: min(85vh, 28rem); overflow: auto; padding: 1.15rem 1.25rem; font-family: system-ui, -apple-system, "Segoe UI", Roboto, sans-serif; font-size: 0.9375rem; line-height: 1.45; color: #1a0a18; background: #faf7f9; border: 2px solid #6b1f62; border-radius: 14px; box-shadow: 0 16px 48px rgba(45, 14, 42, 0.22); opacity: 0; visibility: hidden; transform: translateY(6px); transition: opacity 0.18s ease, visibility 0.18s ease, transform 0.18s ease; } .caicp-a11y-dialog.is-open { opacity: 1; visibility: visible; transform: translateY(0); } .caicp-a11y-dialog h2 { margin: 0 0 0.35rem; font-size: 1.05rem; font-weight: 700; color: #2d0e2a; } .caicp-a11y-dialog .caicp-a11y-lede { margin: 0 0 1rem; font-size: 0.8125rem; color: #475569; } .caicp-a11y-field { margin-bottom: 1rem; } .caicp-a11y-field legend { font-weight: 600; font-size: 0.8125rem; color: #334155; margin-bottom: 0.35rem; } .caicp-a11y-seg { display: flex; flex-wrap: wrap; gap: 0.35rem; } .caicp-a11y-seg label { display: inline-flex; align-items: center; gap: 0.35rem; padding: 0.35rem 0.55rem; font-size: 0.8125rem; font-weight: 500; background: #ffffff; border: 1px solid #cbd5e1; border-radius: 8px; cursor: pointer; } .caicp-a11y-seg label:has(input:checked) { border-color: #872d78; background: #f5e6f0; color: #2d0e2a; } .caicp-a11y-seg input { accent-color: #872d78; } .caicp-a11y-toggle-row { display: flex; align-items: flex-start; justify-content: space-between; gap: 0.75rem; padding: 0.5rem 0; border-top: 1px solid #e2e8f0; } .caicp-a11y-toggle-row:first-of-type { border-top: none; padding-top: 0; } .caicp-a11y-toggle-row span { font-size: 0.875rem; font-weight: 500; color: #1e293b; } .caicp-a11y-toggle-row small { display: block; font-size: 0.75rem; font-weight: 400; color: #64748b; margin-top: 0.15rem; } .caicp-a11y-switch { flex-shrink: 0; width: 2.75rem; height: 1.5rem; border-radius: 999px; border: 2px solid #872d78; background: #ffffff; position: relative; cursor: pointer; padding: 0; } .caicp-a11y-switch[aria-checked="true"] { background: #872d78; } .caicp-a11y-switch::after { content: ""; position: absolute; top: 2px; left: 2px; width: 1rem; height: 1rem; border-radius: 50%; background: #d5a539; transition: transform 0.15s ease; } .caicp-a11y-switch[aria-checked="true"]::after { transform: translateX(1.2rem); background: #f0e196; } .caicp-a11y-switch:focus { outline: none; box-shadow: 0 0 0 3px rgba(213, 165, 57, 0.65); } .caicp-a11y-actions { display: flex; flex-wrap: wrap; gap: 0.5rem; margin-top: 1rem; } .caicp-a11y-actions button { font-family: inherit; font-size: 0.8125rem; font-weight: 600; padding: 0.45rem 0.85rem; border-radius: 8px; cursor: pointer; border: 2px solid transparent; } .caicp-a11y-btn-close { background: #ffffff; border-color: #cbd5e1; color: #334155; } .caicp-a11y-btn-close:hover { border-color: #872d78; color: #2d0e2a; } .caicp-a11y-btn-reset { background: linear-gradient(90deg, #d5a539, #e8b834); color: #2d0e2a; border-color: #b8862e; } .caicp-a11y-btn-reset:hover { filter: brightness(1.03); } .caicp-a11y-sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; } /* ─── Page effects ─── */ html[data-a11y-text="1"] { font-size: 110%; } html[data-a11y-text="2"] { font-size: 125%; } html[data-a11y-contrast="high"] { --caicp-a11y-body: #0a0a0a; --caicp-a11y-link: #5c1568; --caicp-a11y-muted: #3f3f46; } html[data-a11y-contrast="high"] body { color: var(--caicp-a11y-body, #0a0a0a); } html[data-a11y-contrast="high"] a:not(.caicp-a11y-trigger):not(.caicp-a11y-switch):not(.caicp-a11y-actions button) { color: var(--caicp-a11y-link, #5c1568); text-decoration-thickness: 2px; } html[data-a11y-motion="reduced"] { scroll-behavior: auto !important; } html[data-a11y-motion="reduced"] *, html[data-a11y-motion="reduced"] *::before, html[data-a11y-motion="reduced"] *::after { animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; transition-duration: 0.01ms !important; scroll-behavior: auto !important; } html[data-a11y-motion="reduced"] .caicp-a11y-backdrop, html[data-a11y-motion="reduced"] .caicp-a11y-dialog, html[data-a11y-motion="reduced"] .caicp-a11y-switch::after { transition: none !important; } html[data-a11y-links="underline"] a:not(.btn):not(.caicp-a11y-trigger):not(.caicp-a11y-switch) { text-decoration: underline; text-underline-offset: 0.15em; } html[data-a11y-spacing="readable"] body { line-height: 1.75 !important; } html[data-a11y-spacing="readable"] p, html[data-a11y-spacing="readable"] li { margin-bottom: 0.85em; } @media (prefers-reduced-motion: reduce) { .caicp-a11y-backdrop, .caicp-a11y-dialog, .caicp-a11y-switch::after { transition: none; } }