/* * Accessibility presentation tools for the Biblián institutional theme. * Component selectors are isolated with the biblian-a11y prefix. Effects are * opt-in classes on and never represent a conformance certification. */ .biblian-a11y-fab { position: fixed; z-index: 99998; bottom: 30%; left: 0; display: inline-flex; width: auto; max-width: 56px; min-height: 54px; padding: 11px 13px; overflow: hidden; align-items: center; gap: 10px; border: 2px solid var(--biblian-yellow, #ffd100); border-left: 0; border-radius: 0 14px 14px 0; color: #fff; background: linear-gradient(135deg, #0255b7, #052a56); box-shadow: 4px 8px 24px rgb(5 42 86 / 28%); font: 800 0.92rem/1 Inter, ui-sans-serif, system-ui, sans-serif; cursor: pointer; transition: max-width 220ms ease, background-color 160ms ease, box-shadow 160ms ease; } .biblian-a11y-fab:hover, .biblian-a11y-fab:focus-visible, .biblian-a11y-fab[aria-expanded="true"] { max-width: 230px; box-shadow: 5px 10px 30px rgb(5 42 86 / 40%); } .biblian-a11y-fab:focus-visible { outline: 3px solid #052a56; outline-offset: 3px; box-shadow: 0 0 0 6px #ffd100, 5px 10px 30px rgb(5 42 86 / 40%); } .biblian-a11y-fab[aria-expanded="true"] { color: #052a56; background: #ffd100; } .biblian-a11y-fab__icon { width: 28px; height: 28px; overflow: visible; flex: 0 0 28px; fill: currentColor; stroke: currentColor; stroke-width: 1.9; stroke-linecap: round; stroke-linejoin: round; } .biblian-a11y-fab__icon circle { stroke: none; } .biblian-a11y-fab__icon path { fill: none; } .biblian-a11y-fab__label { opacity: 0; white-space: nowrap; transition: opacity 150ms ease 70ms; } .biblian-a11y-fab:hover .biblian-a11y-fab__label, .biblian-a11y-fab:focus-visible .biblian-a11y-fab__label, .biblian-a11y-fab[aria-expanded="true"] .biblian-a11y-fab__label { opacity: 1; } .biblian-a11y-panel { position: fixed; z-index: 99999; bottom: calc(5rem + env(safe-area-inset-bottom, 0px)); left: 1rem; display: flex; width: min(430px, calc(100vw - 2rem)); max-height: calc(100vh - 6.5rem); overflow-x: hidden; overflow-y: auto; flex-direction: column; border: 1px solid #cbd9e8; border-radius: 20px; color: #173c62; background: #fff; box-shadow: 0 24px 70px rgb(5 42 86 / 32%); font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; animation: biblian-a11y-enter 180ms ease-out; } .biblian-a11y-panel[hidden] { display: none; } @keyframes biblian-a11y-enter { from { opacity: 0; transform: translateY(12px); } to { opacity: 1; transform: translateY(0); } } .biblian-a11y-panel__header { display: flex; padding: 18px 18px 16px; align-items: flex-start; justify-content: space-between; gap: 16px; color: #fff; background: linear-gradient(135deg, #0255b7, #052a56); } .biblian-a11y-panel__header div { min-width: 0; } .biblian-a11y-panel__eyebrow { display: block; margin-bottom: 4px; color: #ffd100; font-size: 0.68rem; font-weight: 850; letter-spacing: 0.12em; text-transform: uppercase; } .biblian-a11y-panel__header h2 { margin: 0; color: #fff; font-size: 1.08rem; font-weight: 820; letter-spacing: -0.01em; line-height: 1.25; } .biblian-a11y-panel__close { display: grid; width: 38px; height: 38px; padding: 0; flex: 0 0 38px; border: 1px solid rgb(255 255 255 / 58%); border-radius: 50%; color: #fff; background: rgb(255 255 255 / 12%); cursor: pointer; place-items: center; } .biblian-a11y-panel__close svg { fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; } .biblian-a11y-panel__close:hover { color: #052a56; background: #ffd100; } .biblian-a11y-panel__close:focus-visible, .biblian-a11y-control:focus-visible, .biblian-a11y-panel__footer a:focus-visible { outline: 3px solid #052a56; outline-offset: 2px; box-shadow: 0 0 0 5px #ffd100; } .biblian-a11y-panel__intro { margin: 0; padding: 12px 18px; border-bottom: 1px solid #dce6f1; color: #355979; background: #f3f7fc; font-size: 0.82rem; line-height: 1.5; } .biblian-a11y-grid { display: grid; padding: 14px; grid-template-columns: 1fr 1fr; gap: 9px; overscroll-behavior: contain; } .biblian-a11y-control { display: flex; min-width: 0; min-height: 86px; padding: 10px 8px; align-items: center; justify-content: center; flex-direction: column; gap: 5px; border: 2px solid #d8e4ef; border-radius: 13px; color: #173c62; background: #f7fafd; font: inherit; font-size: 0.78rem; line-height: 1.25; text-align: center; cursor: pointer; transition: transform 140ms ease, border-color 140ms ease, background-color 140ms ease; } .biblian-a11y-control:hover { border-color: #0255b7; background: #eaf3fd; transform: translateY(-1px); } .biblian-a11y-control.is-active { border-color: #052a56; color: #fff; background: linear-gradient(135deg, #0255b7, #052a56); box-shadow: 0 7px 18px rgb(5 42 86 / 20%); } .biblian-a11y-control:disabled { opacity: 0.48; cursor: not-allowed; transform: none; } .biblian-a11y-control--reset { min-height: 58px; grid-column: 1 / -1; flex-direction: row; border-color: #d4b000; color: #052a56; background: #fff7c7; } .biblian-a11y-control--reset:hover { border-color: #052a56; background: #ffd100; } .biblian-a11y-control__icon { display: grid; min-width: 34px; height: 28px; align-items: center; color: #0255b7; font-size: 1.28rem; font-weight: 900; line-height: 1; } .biblian-a11y-control[data-a11y-toggle="underline-links"] .biblian-a11y-control__icon { text-decoration: underline; text-decoration-thickness: 3px; } .biblian-a11y-control.is-active .biblian-a11y-control__icon { color: #ffd100; } .biblian-a11y-control__label { font-weight: 760; } .biblian-a11y-control__value { color: #5a6f86; font-size: 0.68rem; font-weight: 750; } .biblian-a11y-control.is-active .biblian-a11y-control__value { color: #fff; } .biblian-a11y-panel__footer { padding: 12px 18px 15px; border-top: 1px solid #dce6f1; color: #49657f; background: #f3f7fc; font-size: 0.72rem; line-height: 1.55; } .biblian-a11y-panel__footer p { margin: 0 0 7px; } .biblian-a11y-panel__footer kbd { padding: 1px 5px; border: 1px solid #afc1d3; border-radius: 4px; color: #052a56; background: #fff; box-shadow: 0 1px 0 #afc1d3; font: 750 0.68rem/1.4 ui-monospace, "SFMono-Regular", Consolas, monospace; } .biblian-a11y-panel__footer a { color: #0255b7; font-weight: 800; } /* User-selected presentation effects. */ html.biblian-a11y-text-scale { font-size: calc(100% * var(--biblian-a11y-text-scale, 1)) !important; } html.biblian-a11y-high-contrast { --biblian-blue: #00e5ff; --biblian-blue-dark: #00e5ff; --biblian-turquoise: #00e5ff; --biblian-turquoise-dark: #00e5ff; --biblian-yellow: #fff200; --biblian-ink: #fff; --biblian-navy: #fff; --biblian-text: #fff; --biblian-muted: #fff; --biblian-line: #fff; --biblian-soft: #000; --biblian-white: #000; } html.biblian-a11y-high-contrast body, html.biblian-a11y-high-contrast body > :not(.biblian-a11y-panel):not(.biblian-a11y-fab), html.biblian-a11y-high-contrast body > :not(.biblian-a11y-panel):not(.biblian-a11y-fab) :where(section, article, aside, nav, header, footer, div, ul, ol, table) { color: #fff !important; background-color: #000 !important; background-image: none !important; } html.biblian-a11y-high-contrast body > :not(.biblian-a11y-panel):not(.biblian-a11y-fab) :where(h1, h2, h3, h4, h5, h6, p, li, dt, dd, label, span, strong, th, td) { color: #fff !important; } html.biblian-a11y-high-contrast body > :not(.biblian-a11y-panel):not(.biblian-a11y-fab) a { color: #00e5ff !important; background-color: #000 !important; text-decoration: underline !important; text-decoration-thickness: 2px !important; } html.biblian-a11y-high-contrast body > :not(.biblian-a11y-panel):not(.biblian-a11y-fab) a * { color: inherit !important; background-color: transparent !important; } html.biblian-a11y-high-contrast body > :not(.biblian-a11y-panel):not(.biblian-a11y-fab) a:hover, html.biblian-a11y-high-contrast body > :not(.biblian-a11y-panel):not(.biblian-a11y-fab) a:focus-visible { color: #000 !important; background-color: #fff200 !important; } html.biblian-a11y-high-contrast body > :not(.biblian-a11y-panel):not(.biblian-a11y-fab) :where(button, input, select, textarea) { border-color: #fff200 !important; color: #fff200 !important; background: #000 !important; } html.biblian-a11y-high-contrast .hero-slide__image { opacity: 0.18 !important; filter: grayscale(100%) contrast(1.25) !important; } html.biblian-a11y-grayscale body > :not(.biblian-a11y-panel):not(.biblian-a11y-fab) { filter: grayscale(100%); } html.biblian-a11y-underline-links body > :not(.biblian-a11y-panel):not(.biblian-a11y-fab) a { text-decoration: underline !important; text-decoration-thickness: 2px !important; text-underline-offset: 0.22em !important; } html.biblian-a11y-readable-text body > :not(.biblian-a11y-panel):not(.biblian-a11y-fab), html.biblian-a11y-readable-text body > :not(.biblian-a11y-panel):not(.biblian-a11y-fab) :where(p, li, dt, dd, a, label, input, select, textarea, button) { font-family: Verdana, "DejaVu Sans", Geneva, Arial, sans-serif !important; letter-spacing: 0.025em !important; line-height: 1.85 !important; word-spacing: 0.045em !important; } html.biblian-a11y-focus-boost *:focus, html.biblian-a11y-focus-boost *:focus-visible { outline: 4px solid #052a56 !important; outline-offset: 4px !important; box-shadow: 0 0 0 7px #ffd100 !important; } html.biblian-a11y-stop-motion, html.biblian-a11y-stop-motion * { scroll-behavior: auto !important; } html.biblian-a11y-stop-motion *, html.biblian-a11y-stop-motion *::before, html.biblian-a11y-stop-motion *::after { animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; transition-duration: 0.01ms !important; transition-delay: 0ms !important; } @media (prefers-reduced-motion: reduce) { .biblian-a11y-fab, .biblian-a11y-fab__label, .biblian-a11y-panel, .biblian-a11y-control { animation: none !important; transition: none !important; } } @media (max-width: 640px) { .biblian-a11y-fab { bottom: 24%; max-width: 56px; } .biblian-a11y-fab__label { display: none; } .biblian-a11y-panel { right: 0.75rem; bottom: calc(4.5rem + env(safe-area-inset-bottom, 0px)); left: 0.75rem; width: auto; max-height: calc(100vh - 5.5rem); } .biblian-a11y-panel__header { padding: 15px; } .biblian-a11y-grid { padding: 11px; gap: 7px; } .biblian-a11y-control { min-height: 80px; } } @media print { .biblian-a11y-fab, .biblian-a11y-panel { display: none !important; } }