/* ============================================================================ Accessibility toolbar (IS 5568 / WCAG 2.0 AA) + the visitor-facing effects. ============================================================================ */ /* The widget is mounted on (so page filters never touch it), which means it does NOT inherit the font — declare the Google font explicitly here, otherwise it falls back to a system serif/sans. */ .a11y, .a11y button, .a11y a, .a11y h2, .a11y span { font-family: 'Heebo', 'Rubik', system-ui, sans-serif; } /* ── Floating button ── */ .a11y { position: fixed; z-index: 9000; bottom: 20px; inset-inline-start: 20px; } /* Position variants (admin-controlled) */ .a11y--bottom-start { bottom: 20px; top: auto; inset-inline-start: 20px; inset-inline-end: auto; } .a11y--bottom-end { bottom: 20px; top: auto; inset-inline-end: 20px; inset-inline-start: auto; } .a11y--top-start { top: 20px; bottom: auto; inset-inline-start: 20px; inset-inline-end: auto; } .a11y--top-end { top: 20px; bottom: auto; inset-inline-end: 20px; inset-inline-start: auto; } .a11y__fab { display: flex; align-items: center; justify-content: center; width: 54px; height: 54px; border-radius: 50%; cursor: pointer; color: #fff; border: 2px solid rgba(255, 255, 255, 0.85); background: linear-gradient(135deg, #1a6dff, #0b4fd6); box-shadow: 0 8px 26px rgba(0, 0, 0, 0.45); transition: transform 0.15s, box-shadow 0.15s; } /* Size variants */ .a11y--sm .a11y__fab { width: 44px; height: 44px; } .a11y--sm .a11y__fab svg { width: 22px; height: 22px; } .a11y--lg .a11y__fab { width: 68px; height: 68px; } .a11y--lg .a11y__fab svg { width: 34px; height: 34px; } .a11y__fab:hover { transform: scale(1.06); } .a11y__fab:focus-visible { outline: 3px solid #ffd400; outline-offset: 3px; } /* ── Panel ── */ .a11y__panel { position: absolute; bottom: calc(100% + 12px); inset-inline-start: 0; width: 300px; max-width: calc(100vw - 40px); padding: 16px; border-radius: 16px; color: #10131c; background: #ffffff; border: 1px solid #d6dae6; box-shadow: 0 20px 60px rgba(0, 0, 0, 0.4); animation: a11y-in 0.2s ease; } @keyframes a11y-in { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } } /* Open the panel away from the button's own corner */ .a11y--top-start .a11y__panel, .a11y--top-end .a11y__panel { top: calc(100% + 12px); bottom: auto; } .a11y--bottom-end .a11y__panel, .a11y--top-end .a11y__panel { inset-inline-end: 0; inset-inline-start: auto; } .a11y__head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 12px; padding-bottom: 10px; border-bottom: 1px solid #e6e8f0; } .a11y__title { font-size: 17px; font-weight: 800; color: #10131c; margin: 0; font-family: 'Rubik', 'Heebo', sans-serif; } .a11y__close { width: 32px; height: 32px; border-radius: 8px; cursor: pointer; font-size: 15px; background: #f0f2f7; border: 1px solid #dfe2ec; color: #444; } .a11y__close:hover { background: #e6e9f2; } .a11y__grid { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; } .a11y__opt { display: flex; align-items: center; gap: 8px; padding: 11px 10px; border-radius: 11px; cursor: pointer; background: #f5f6fa; border: 1.5px solid #e2e5ef; color: #1a1d29; font-family: 'Heebo', sans-serif; font-size: 13px; font-weight: 600; text-align: start; min-height: 46px; transition: background 0.12s, border-color 0.12s; } .a11y__opt:hover { background: #eceffa; border-color: #b9c2e6; } .a11y__opt:focus-visible { outline: 3px solid #1a6dff; outline-offset: 1px; } .a11y__opt.is-on { background: #dcefff; border-color: #1a6dff; color: #0b4fd6; } .a11y__ico { display: inline-flex; align-items: center; justify-content: center; width: 24px; height: 24px; border-radius: 7px; background: #fff; border: 1px solid #dfe2ec; font-size: 13px; font-weight: 800; flex-shrink: 0; } .a11y__opt.is-on .a11y__ico { background: #1a6dff; color: #fff; border-color: #1a6dff; } .a11y__reset { width: 100%; margin-top: 12px; padding: 11px; border-radius: 11px; cursor: pointer; background: #fff0f0; border: 1.5px solid #f3c6c6; color: #c0392b; font-family: 'Heebo', sans-serif; font-size: 13.5px; font-weight: 700; } .a11y__reset:hover { background: #ffe4e4; } .a11y__statement { display: block; text-align: center; margin-top: 10px; padding: 9px; border-radius: 10px; color: #0b4fd6; font-size: 13px; font-weight: 700; background: #eef4ff; } .a11y__statement:hover { background: #e0ebff; } /* ============================================================================ Visitor-facing effect classes (applied to ) ============================================================================ */ /* Highlight links */ html.a11y-links a { outline: 2px solid #ffd400 !important; outline-offset: 2px; background: rgba(255, 212, 0, 0.18) !important; text-decoration: underline !important; } /* Readable font — swap the display fonts for a plain, legible sans */ html.a11y-readable, html.a11y-readable * { font-family: Arial, 'Segoe UI', 'Heebo', sans-serif !important; letter-spacing: normal !important; } /* Stop animations & transitions */ html.a11y-noanim *, html.a11y-noanim *::before, html.a11y-noanim *::after { animation: none !important; transition: none !important; scroll-behavior: auto !important; } /* Big cursor (data-URI SVG arrow, no external request) */ html.a11y-bigcursor, html.a11y-bigcursor * { cursor: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='48' height='48' viewBox='0 0 48 48'%3E%3Cpath d='M6 4l30 16-13 3 8 15-5 3-8-15-9 9z' fill='%23000' stroke='%23fff' stroke-width='2'/%3E%3C/svg%3E") 4 4, auto !important; } /* The toolbar must never be dimmed by any effect */ .a11y, .a11y * { filter: none !important; } @media (max-width: 480px) { .a11y__panel { width: calc(100vw - 40px); } }