/* ========================================================================= SBR Accessibility module — floating button + preferences panel. Feature classes live on and mostly re-skin via the kit's CSS tokens. ========================================================================= */ /* ---- Floating widget ---- */ /* Vertically centered on the side edge — clears bottom-corner buttons (WhatsApp etc). */ .sbr-a11y-root{position:fixed;top:calc(50% - 28px);bottom:auto;z-index:99990;font-family:var(--ff,system-ui,sans-serif)} .sbr-a11y-pos--left{left:12px;right:auto} .sbr-a11y-pos--right{right:12px;left:auto} /* Minimal presence: 48px (down to 44px on mobile = the WCAG touch-target floor), softer shadow + thinner ring, flush to the edge. */ .sbr-a11y-toggle{display:grid;place-items:center;width:48px;height:48px;border:0;border-radius:50%; background:var(--sbr-a11y-accent,#1466b3);color:#fff;cursor:pointer;opacity:.92; box-shadow:0 3px 10px -3px rgba(0,0,0,.38),0 0 0 1.5px rgba(255,255,255,.6); transition:transform .2s ease,box-shadow .2s ease,opacity .2s ease} .sbr-a11y-toggle svg{width:26px;height:26px} .sbr-a11y-toggle:hover,.sbr-a11y-toggle:focus-visible{opacity:1;transform:scale(1.06)} .sbr-a11y-toggle:focus-visible{outline:3px solid #111;outline-offset:3px} /* ---- Panel ---- */ .sbr-a11y-panel{position:absolute;top:50%;transform:translateY(-50%);width:300px;max-width:calc(100vw - 36px); background:#fff;color:#15130f;border:1px solid #d8d2c6;border-radius:16px; box-shadow:0 24px 60px -18px rgba(0,0,0,.5);overflow:hidden} /* open to the side of the button (into the viewport), not over it */ .sbr-a11y-pos--left .sbr-a11y-panel{left:70px;right:auto} .sbr-a11y-pos--right .sbr-a11y-panel{right:70px;left:auto} .sbr-a11y-panel[hidden]{display:none} .sbr-a11y-panel__head{display:flex;align-items:center;justify-content:space-between;gap:10px; padding:14px 16px;background:var(--sbr-a11y-accent,#1466b3);color:#fff} .sbr-a11y-panel__title{display:flex;align-items:center;gap:9px;margin:0;font-size:17px;font-weight:800;color:#fff} .sbr-a11y-panel__title svg{width:22px;height:22px} .sbr-a11y-panel__close{display:grid;place-items:center;width:34px;height:34px;border:0;border-radius:9px; background:rgba(255,255,255,.18);color:#fff;cursor:pointer} .sbr-a11y-panel__close svg{width:18px;height:18px} .sbr-a11y-panel__close:hover{background:rgba(255,255,255,.3)} .sbr-a11y-panel__close:focus-visible{outline:2px solid #fff;outline-offset:2px} .sbr-a11y-panel__body{padding:14px;display:flex;flex-direction:column;gap:9px;max-height:60vh;overflow-y:auto} /* text-size stepper */ .sbr-a11y-field{display:flex;align-items:center;justify-content:space-between;gap:10px; padding:10px 12px;border:1px solid #e2ddd2;border-radius:11px} .sbr-a11y-field__label{font-size:15px;font-weight:700} .sbr-a11y-stepper{display:flex;align-items:center;gap:6px} .sbr-a11y-step{width:34px;height:34px;border:1px solid #cfc8ba;border-radius:8px;background:#f6f3ec; font-size:20px;font-weight:800;line-height:1;cursor:pointer;color:#15130f} .sbr-a11y-step:hover{background:#ece7dc} .sbr-a11y-step:focus-visible{outline:2px solid var(--sbr-a11y-accent,#1466b3);outline-offset:2px} .sbr-a11y-step__val{min-width:20px;text-align:center;font-weight:800;font-size:15px} /* toggle options */ .sbr-a11y-opt{display:flex;align-items:center;gap:11px;width:100%;padding:11px 12px; border:1px solid #e2ddd2;border-radius:11px;background:#fff;cursor:pointer;text-align:start;color:#15130f} .sbr-a11y-opt__ic{display:grid;place-items:center;width:30px;height:30px;flex:none;border-radius:8px; background:#f1ede4;color:#5a5446} .sbr-a11y-opt__ic svg{width:18px;height:18px} .sbr-a11y-opt__tx{flex:1;font-size:15px;font-weight:600} .sbr-a11y-opt__state{flex:none;width:38px;height:22px;border-radius:999px;background:#d8d2c6;position:relative;transition:background .15s} .sbr-a11y-opt__state::after{content:"";position:absolute;top:2px;inset-inline-start:2px;width:18px;height:18px; border-radius:50%;background:#fff;transition:transform .15s} .sbr-a11y-opt:hover{border-color:#cfc8ba} .sbr-a11y-opt:focus-visible{outline:2px solid var(--sbr-a11y-accent,#1466b3);outline-offset:2px} .sbr-a11y-opt[aria-pressed="true"]{border-color:var(--sbr-a11y-accent,#1466b3);background:#eef4fb} .sbr-a11y-opt[aria-pressed="true"] .sbr-a11y-opt__ic{background:var(--sbr-a11y-accent,#1466b3);color:#fff} .sbr-a11y-opt[aria-pressed="true"] .sbr-a11y-opt__state{background:var(--sbr-a11y-accent,#1466b3)} .sbr-a11y-opt[aria-pressed="true"] .sbr-a11y-opt__state::after{transform:translateX(-16px)} .sbr-a11y-reset{display:flex;align-items:center;justify-content:center;gap:8px;margin-top:2px; padding:11px;border:1px dashed #cfc8ba;border-radius:11px;background:transparent;color:#5a5446; font-size:14.5px;font-weight:700;cursor:pointer} .sbr-a11y-reset svg{width:17px;height:17px} .sbr-a11y-reset:hover{background:#f6f3ec;color:#15130f} .sbr-a11y-reset:focus-visible{outline:2px solid var(--sbr-a11y-accent,#1466b3);outline-offset:2px} .sbr-a11y-panel__foot{padding:13px 16px;border-top:1px solid #ece7dc;background:#faf8f3;font-size:13.5px;line-height:1.5} .sbr-a11y-statement-link{display:inline-block;font-weight:700;color:var(--sbr-a11y-accent,#1466b3);text-decoration:underline;text-underline-offset:2px} .sbr-a11y-coord{margin:8px 0 0;color:#5a5446;display:flex;flex-wrap:wrap;gap:4px 10px} .sbr-a11y-coord a{color:var(--sbr-a11y-accent,#1466b3);font-weight:600} /* ========================================================================= FEATURE CLASSES (on ) — re-skin the site via the kit's tokens ========================================================================= */ /* High contrast — override the kit's design tokens to max contrast */ html.sbr-a11y--contrast{ --ink:#000;--brand-deep:#000;--paper:#fff;--surface:#fff; --fg-soft:#0a0a0a;--fg-mute:#1a1a1a;--line:#000; --accent:#a85600;--accent-strong:#7a3d00; --on-dark:#fff;--on-dark-soft:#f2f2f2;--on-dark-mute:#e6e6e6; } html.sbr-a11y--contrast a:not(.sbr-btn):not(.sbr-a11y-statement-link){text-decoration:underline} /* Highlight links — visible underline for every content link */ html.sbr-a11y--links :where(main,article,.site-footer,.sbr-prose) a{ text-decoration:underline!important;text-underline-offset:2px;text-decoration-thickness:2px} /* Readable font — swap to a high-legibility family via the kit's --ff token */ html.sbr-a11y--readable{--ff:Arial,'Helvetica Neue',system-ui,sans-serif} html.sbr-a11y--readable :where(main,article) p{letter-spacing:.01em} /* Text spacing — WCAG 1.4.12 */ html.sbr-a11y--spacing :where(main,article) :where(p,li){line-height:1.85!important;letter-spacing:.06em;word-spacing:.12em} html.sbr-a11y--spacing :where(main,article) p{margin-bottom:1.2em} /* Pause motion — kill animations/transitions site-wide */ html.sbr-a11y--motion *,html.sbr-a11y--motion *::before,html.sbr-a11y--motion *::after{ animation-duration:.001ms!important;animation-iteration-count:1!important;transition-duration:.001ms!important;scroll-behavior:auto!important} /* Text size — reliable enlargement that works despite the kit's px type. Zooms every top-level page region EXCEPT the accessibility widget. */ html.sbr-a11y--text-1 body>:not(.sbr-a11y-root){zoom:1.08} html.sbr-a11y--text-2 body>:not(.sbr-a11y-root){zoom:1.18} html.sbr-a11y--text-3 body>:not(.sbr-a11y-root){zoom:1.30} @media(max-width:600px){ /* 44px = the WCAG touch-target floor; flush to the edge for minimal presence. */ .sbr-a11y-toggle{width:44px;height:44px} .sbr-a11y-toggle svg{width:23px;height:23px} .sbr-a11y-pos--left{left:8px} .sbr-a11y-pos--right{right:8px} /* Too narrow to sit beside the button — anchor to the edge and fill the width. */ .sbr-a11y-panel{width:calc(100vw - 16px);max-width:360px} .sbr-a11y-pos--left .sbr-a11y-panel{left:8px} .sbr-a11y-pos--right .sbr-a11y-panel{right:8px} }