/* ========================================================================== Accessibility toolbar — launcher, panel, and the preference classes it toggles on . Self-hosted; no third-party overlay code. ========================================================================== */ .jcu-a11y { position: fixed; left: 18px; bottom: 18px; z-index: 3500; font-family: "Google Sans Flex", -apple-system, sans-serif; } .jcu-a11y .jcu-a11y__launcher, .jcu-a11y .jcu-a11y__launcher:hover, .jcu-a11y .jcu-a11y__launcher:focus { display: inline-flex; align-items: center; justify-content: center; width: 48px; height: 48px; padding: 0; background: #68267e; color: #fff; border: 2px solid #fff; border-radius: 50%; box-shadow: 0 6px 20px rgba(20, 5, 25, 0.35); cursor: pointer; transition: transform 0.2s, box-shadow 0.2s; } .jcu-a11y .jcu-a11y__launcher:hover { transform: translateY(-2px); box-shadow: 0 10px 26px rgba(20, 5, 25, 0.4); } .jcu-a11y__launcher svg { width: 26px; height: 26px; } /* --- Panel ------------------------------------------------------------- */ .jcu-a11y__panel { position: absolute; left: 0; bottom: 60px; width: min(280px, calc(100vw - 36px)); background: #fff; border: 1px solid #e6dcec; border-radius: 16px; box-shadow: 0 18px 50px rgba(20, 5, 25, 0.3); padding: 1rem 1rem 0.9rem; } .jcu-a11y__head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 0.7rem; } .jcu-a11y__head strong { font-size: 1rem; font-weight: 800; color: #221024; } .jcu-a11y .jcu-a11y__close, .jcu-a11y .jcu-a11y__close:hover, .jcu-a11y .jcu-a11y__close:focus { width: 32px; height: 32px; display: inline-flex; align-items: center; justify-content: center; background: transparent; border: 0; border-radius: 50%; box-shadow: none; padding: 0; font-size: 1.4rem; line-height: 1; color: #7c6f83; cursor: pointer; } .jcu-a11y .jcu-a11y__close:hover { background: rgba(104, 38, 126, 0.08); color: #68267e; } .jcu-a11y__row { display: flex; align-items: center; justify-content: space-between; gap: 0.8rem; padding: 0.45rem 0; font-size: 0.9rem; font-weight: 600; color: #221024; } /* Segmented text-size control */ .jcu-a11y__seg { display: inline-flex; border: 1px solid #d9cfe0; border-radius: 10px; overflow: hidden; } .jcu-a11y .jcu-a11y__seg button, .jcu-a11y .jcu-a11y__seg button:hover, .jcu-a11y .jcu-a11y__seg button:focus { background: #fff; border: 0; border-radius: 0; box-shadow: none; padding: 0.4rem 0.65rem; font-family: inherit; font-size: 0.82rem; font-weight: 800; color: #4c2a56; cursor: pointer; } .jcu-a11y .jcu-a11y__seg button + button { border-left: 1px solid #d9cfe0; } .jcu-a11y .jcu-a11y__seg button[aria-pressed="true"] { background: #68267e; color: #fff; } /* Option rows with a toggle pill */ .jcu-a11y .jcu-a11y__opt, .jcu-a11y .jcu-a11y__opt:hover, .jcu-a11y .jcu-a11y__opt:focus { display: flex; align-items: center; justify-content: space-between; gap: 0.8rem; width: 100%; background: transparent; border: 0; border-radius: 10px; box-shadow: none; padding: 0.55rem 0.3rem; font-family: inherit; font-size: 0.9rem; font-weight: 600; text-align: left; color: #221024; cursor: pointer; } .jcu-a11y .jcu-a11y__opt:hover { background: rgba(104, 38, 126, 0.06); } .jcu-a11y__opt i { flex-shrink: 0; position: relative; width: 38px; height: 22px; background: #d9cfe0; border-radius: 999px; transition: background 0.2s; } .jcu-a11y__opt i::after { content: ""; position: absolute; top: 3px; left: 3px; width: 16px; height: 16px; background: #fff; border-radius: 50%; transition: left 0.2s; } .jcu-a11y__opt[aria-pressed="true"] i { background: #68267e; } .jcu-a11y__opt[aria-pressed="true"] i::after { left: 19px; } .jcu-a11y .jcu-a11y__reset, .jcu-a11y .jcu-a11y__reset:hover, .jcu-a11y .jcu-a11y__reset:focus { display: block; width: 100%; margin-top: 0.5rem; background: transparent; border: 1px solid #d9cfe0; border-radius: 999px; box-shadow: none; padding: 0.5rem 1rem; font-family: inherit; font-size: 0.84rem; font-weight: 800; color: #68267e; cursor: pointer; } .jcu-a11y .jcu-a11y__reset:hover { background: rgba(104, 38, 126, 0.08); } @media (max-width: 640px) { .jcu-a11y { left: 14px; bottom: 14px; } .jcu-a11y .jcu-a11y__launcher { width: 44px; height: 44px; } } @media print { .jcu-a11y { display: none; } } /* ========================================================================== Preference effects (classes on ) ========================================================================== */ /* Text size: rem-based type across the site scales with the root */ html.jcu-a11y-font-1 { font-size: 112.5%; } html.jcu-a11y-font-2 { font-size: 125%; } /* Underline links (content areas; nav/menus stay as designed) */ html.jcu-a11y-underline a { text-decoration: underline !important; } /* Wider text spacing — per WCAG 1.4.12 text-spacing values */ html.jcu-a11y-spacing body { line-height: 1.7 !important; letter-spacing: 0.04em !important; word-spacing: 0.12em !important; } html.jcu-a11y-spacing p { line-height: 1.8 !important; } /* Pause animations — freezes reveals, sliders, marquees, transitions */ html.jcu-a11y-motion *, html.jcu-a11y-motion *::before, html.jcu-a11y-motion *::after { animation: none !important; transition: none !important; scroll-behavior: auto !important; } html.jcu-a11y-motion .jcu-rv { opacity: 1 !important; transform: none !important; } /* High contrast: darken muted body text on light surfaces… */ html.jcu-a11y-contrast :where(p, li, dd, dt, td, th, small, figcaption, blockquote, label, span) { color: #111 !important; } html.jcu-a11y-contrast :where(h1, h2, h3, h4, h5, h6) { color: #000 !important; } html.jcu-a11y-contrast :where(a) { color: #4f1d60 !important; } /* …but keep light text on the site's dark/photo surfaces */ html.jcu-a11y-contrast :where(.jcu-hdr__top, .jcu-hdr__drawer-cta, .jcu-footer__main, .jcu-hb--help, .jcu-hb__help, .jcu-svc-tile, .jcu-tsp__tile, .jcu-hero, .jcu-hb__panel, .jcu-team__steer-band, .jcu-login__submit, .jcu-skip-link) :where(p, li, td, th, small, figcaption, label, span, h1, h2, h3, h4, h5, h6, a), html.jcu-a11y-contrast :where(.jcu-hdr__top, .jcu-footer__main, .jcu-hb--help, .jcu-svc-tile, .jcu-tsp__tile, .jcu-hero) :where(a) { color: #fff !important; }