/* ============================================================================= * Cosmos Accessibility Widget v2.0.0 * Part 1: widget button + panel UI (search, quick actions, icon tiles, * read-aloud bar, magnifier lens, page-structure dialog) * Part 2: cc-a11y-* feature rule blocks (classes set on ) * * Design system: Quattrocento body, Sorts Mill Goudy headings, maroon #7b1113, * cream #FAF9F7, borders #d9d4cd. White text is required on any maroon * background, including hover states. * ========================================================================== */ /* OpenDyslexic (self-hosted, SIL-OFL). Downloaded only when the dyslexia * font mode matches an element, so it adds zero weight otherwise. */ @font-face { font-family: 'OpenDyslexic'; src: url('fonts/OpenDyslexic-Regular.woff2') format('woff2'); font-weight: 400; font-style: normal; font-display: swap; } @font-face { font-family: 'OpenDyslexic'; src: url('fonts/OpenDyslexic-Bold.woff2') format('woff2'); font-weight: 700; font-style: normal; font-display: swap; } #cc-a11y-root { --cc-a11y-accent: #7b1113; --cc-a11y-accent-dark: #5a0c0e; --cc-a11y-cream: #faf9f7; --cc-a11y-text: #2c2218; --cc-a11y-border: #d9d4cd; font-family: Quattrocento, 'Helvetica Neue', Helvetica, Arial, sans-serif; letter-spacing: normal !important; word-spacing: normal !important; } /* --------------------------------------------------------------------------- * Floating button (size variants set from admin) * ------------------------------------------------------------------------ */ #cc-a11y-btn { position: fixed; bottom: 28px; bottom: calc(28px + env(safe-area-inset-bottom, 0px)); left: 28px; width: 56px; height: 56px; border-radius: 50%; border: none; background: var(--cc-a11y-accent, #7b1113); color: #fff; cursor: pointer; display: flex; align-items: center; justify-content: center; box-shadow: 0 4px 16px rgba(123, 17, 19, 0.35); z-index: 99990; padding: 0; transition: transform 0.15s ease, background-color 0.15s ease; } #cc-a11y-root.cc-btn-sm #cc-a11y-btn { width: 46px; height: 46px; } #cc-a11y-root.cc-btn-lg #cc-a11y-btn { width: 66px; height: 66px; } #cc-a11y-root.cc-pos-right #cc-a11y-btn { left: auto; right: 28px; bottom: 96px; /* clear the AI Concierge bubble at bottom: 28px */ } #cc-a11y-btn:hover { background: var(--cc-a11y-accent-dark, #5a0c0e); color: #fff; transform: scale(1.06); } #cc-a11y-btn:focus-visible { outline: 2px solid #fff; outline-offset: 2px; box-shadow: 0 0 0 4px rgba(123, 17, 19, 0.35), 0 4px 16px rgba(123, 17, 19, 0.35); } #cc-a11y-btn svg { width: 58%; height: 58%; fill: #fff; pointer-events: none; } /* --------------------------------------------------------------------------- * Panel * ------------------------------------------------------------------------ */ #cc-a11y-panel { position: fixed; bottom: 96px; left: 28px; width: 390px; max-width: calc(100vw - 56px); max-height: calc(100vh - 130px); background: var(--cc-a11y-cream, #faf9f7); border: 1px solid var(--cc-a11y-border, #d9d4cd); border-radius: 16px; box-shadow: 0 12px 32px rgba(44, 34, 24, 0.18); z-index: 100000; display: flex; flex-direction: column; /* clip, not hidden: hidden boxes are still programmatically scrollable * (focus scrolling can drag the header off the top); clip cannot scroll */ overflow: hidden; overflow: clip; font-size: 15px; color: var(--cc-a11y-text, #2c2218); line-height: 1.45; } #cc-a11y-root.cc-pos-right #cc-a11y-panel { left: auto; right: 28px; bottom: 164px; /* bottom offset is 68px larger here, so the cap must shrink by the same * amount or tall content pushes the header above the viewport */ max-height: calc(100vh - 180px); } #cc-a11y-panel[hidden] { display: none; } /* Larger widget text mode (header A+ toggle) */ #cc-a11y-root.cc-big #cc-a11y-panel { width: 460px; font-size: 17px; } #cc-a11y-root.cc-big .cc-a11y-tile { font-size: 15px; } #cc-a11y-root.cc-big .cc-a11y-step-label, #cc-a11y-root.cc-big .cc-a11y-profile-name { font-size: 16px; } #cc-a11y-root.cc-big .cc-a11y-profile-desc, #cc-a11y-root.cc-big .cc-a11y-step-value { font-size: 14px; } /* Header */ .cc-a11y-head { display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 14px 16px; background: var(--cc-a11y-accent, #7b1113); color: #fff; flex-shrink: 0; } .cc-a11y-head h2 { font-family: 'Sorts Mill Goudy', Georgia, serif; font-weight: 400; font-size: 20px; margin: 0; color: #fff; line-height: 1.2; } .cc-a11y-head-actions { display: flex; align-items: center; gap: 6px; } .cc-a11y-reset-all { background: transparent; border: 1.5px solid rgba(255, 255, 255, 0.8); border-radius: 999px; color: #fff; font-family: inherit; font-size: 12.5px; font-weight: 700; padding: 6px 12px; cursor: pointer; min-height: 32px; } .cc-a11y-reset-all:hover { background: #fff; color: var(--cc-a11y-accent, #7b1113); } .cc-a11y-bigger { background: transparent; border: 1.5px solid rgba(255, 255, 255, 0.8); border-radius: 999px; color: #fff; cursor: pointer; width: 40px; min-height: 32px; display: flex; align-items: center; justify-content: center; padding: 0; } .cc-a11y-bigger svg { width: 22px; height: 22px; pointer-events: none; } .cc-a11y-bigger:hover, .cc-a11y-bigger[aria-pressed="true"] { background: #fff; color: var(--cc-a11y-accent, #7b1113); } .cc-a11y-close { background: transparent; border: none; color: #fff; cursor: pointer; width: 36px; height: 36px; border-radius: 50%; display: flex; align-items: center; justify-content: center; padding: 0; } .cc-a11y-close:hover { background: rgba(255, 255, 255, 0.18); color: #fff; } .cc-a11y-close svg { width: 18px; height: 18px; fill: #fff; pointer-events: none; } .cc-a11y-reset-all:focus-visible, .cc-a11y-bigger:focus-visible, .cc-a11y-close:focus-visible { outline: 2px solid #fff; outline-offset: 2px; } /* Scroll region: everything between the pinned header and the panel edge * (search + quick actions + sections + footer) lives in one scroll container * so nothing can be clipped by the panel's overflow:hidden. At normal * heights the search/quick strip is sticky-top and the footer sticky-bottom, * which reproduces the previous pinned look exactly; on very short viewports * (see max-height media query below) they demote to static and scroll with * the content, keeping every control reachable. */ .cc-a11y-scroll { display: flex; flex-direction: column; flex: 1 1 auto; min-height: 0; overflow-y: auto; overscroll-behavior: contain; /* Keyboard focus / scrollIntoView must clear the sticky search strip and * sticky footer, or focused controls land hidden beneath them */ scroll-padding-top: 122px; scroll-padding-bottom: 104px; } .cc-a11y-top { position: sticky; top: 0; z-index: 3; flex-shrink: 0; background: #fff; } /* Search row */ .cc-a11y-search { display: flex; align-items: center; gap: 8px; padding: 10px 16px; border-bottom: 1px solid var(--cc-a11y-border, #d9d4cd); background: #fff; flex-shrink: 0; } .cc-a11y-search .cc-a11y-ic { width: 18px; height: 18px; color: #6a5e57; flex-shrink: 0; } .cc-a11y-search input { flex: 1 1 auto; border: none; background: transparent; font-family: inherit; font-size: 14px; color: var(--cc-a11y-text, #2c2218); padding: 6px 0; min-height: 32px; outline: none; } .cc-a11y-search input::placeholder { color: #6a5e57; opacity: 1; } .cc-a11y-search:focus-within { box-shadow: inset 0 -2px 0 var(--cc-a11y-accent, #7b1113); } .cc-a11y-search-count { font-size: 11.5px; color: #6a5e57; white-space: nowrap; } /* Quick actions strip */ .cc-a11y-quick { display: flex; gap: 8px; padding: 10px 16px; border-bottom: 1px solid var(--cc-a11y-border, #d9d4cd); background: #f5f2ed; flex-shrink: 0; } .cc-a11y-quick-btn { flex: 1 1 0; display: flex; align-items: center; justify-content: center; gap: 7px; background: #fff; border: 1.5px solid var(--cc-a11y-accent, #7b1113); border-radius: 999px; color: var(--cc-a11y-accent, #7b1113); font-family: inherit; font-size: 13px; font-weight: 700; padding: 8px 10px; min-height: 40px; cursor: pointer; transition: background-color 0.12s ease, color 0.12s ease; } .cc-a11y-quick-btn .cc-a11y-ic { width: 17px; height: 17px; flex-shrink: 0; } .cc-a11y-quick-btn:hover { background: var(--cc-a11y-accent, #7b1113); color: #fff; } .cc-a11y-quick-btn:focus-visible { outline: 2px solid var(--cc-a11y-accent, #7b1113); outline-offset: 2px; } /* Sections container: natural height inside the scroll region (the region * itself scrolls; see .cc-a11y-scroll) */ .cc-a11y-body { padding: 14px 16px 8px; flex: 1 0 auto; } /* Section blocks */ .cc-a11y-section { margin-bottom: 14px; } .cc-a11y-section-head { width: 100%; display: flex; align-items: center; justify-content: space-between; gap: 8px; background: transparent; border: none; border-bottom: 1px solid var(--cc-a11y-border, #d9d4cd); padding: 8px 2px; cursor: pointer; font-family: 'Sorts Mill Goudy', Georgia, serif; font-size: 18px; color: #4a1118; text-align: left; min-height: 44px; } .cc-a11y-section-head:hover { color: var(--cc-a11y-accent-dark, #5a0c0e); background: #f0ece6; } .cc-a11y-section-head:focus-visible { outline: 2px solid var(--cc-a11y-accent, #7b1113); outline-offset: 2px; } .cc-a11y-caret { width: 14px; height: 14px; fill: #6a5e57; transition: transform 0.15s ease; pointer-events: none; flex-shrink: 0; } .cc-a11y-section-head[aria-expanded="true"] .cc-a11y-caret { transform: rotate(180deg); } .cc-a11y-section-body { padding-top: 10px; } .cc-a11y-section-reset { background: transparent; border: none; color: var(--cc-a11y-accent, #7b1113); font-family: inherit; font-size: 12px; font-weight: 700; cursor: pointer; padding: 6px 8px; text-decoration: underline; margin: 2px 0 0 auto; display: block; } .cc-a11y-section-reset:hover { color: var(--cc-a11y-accent-dark, #5a0c0e); } /* Search filtering */ .cc-search-hide { display: none !important; } /* Profile cards */ .cc-a11y-profile { display: flex; align-items: center; justify-content: space-between; gap: 12px; background: #fff; border: 1px solid var(--cc-a11y-border, #d9d4cd); border-radius: 10px; padding: 10px 12px; margin-bottom: 8px; } .cc-a11y-profile-info { flex: 1 1 auto; min-width: 0; } .cc-a11y-profile-name { font-weight: 700; font-size: 14.5px; display: block; } .cc-a11y-profile-desc { font-size: 12.5px; color: #6a5e57; display: block; margin-top: 1px; } /* Switch (role="switch") */ .cc-a11y-switch { position: relative; width: 46px; height: 26px; border-radius: 999px; border: 1.5px solid var(--cc-a11y-border, #d9d4cd); background: #e8e2dc; cursor: pointer; flex-shrink: 0; padding: 0; transition: background-color 0.15s ease; } .cc-a11y-switch::after { content: ""; position: absolute; top: 2px; left: 2px; width: 19px; height: 19px; border-radius: 50%; background: #fff; box-shadow: 0 1px 3px rgba(44, 34, 24, 0.3); transition: transform 0.15s ease; } .cc-a11y-switch[aria-checked="true"] { background: var(--cc-a11y-accent, #7b1113); border-color: var(--cc-a11y-accent, #7b1113); } .cc-a11y-switch[aria-checked="true"]::after { transform: translateX(20px); } .cc-a11y-switch:focus-visible { outline: 2px solid var(--cc-a11y-accent, #7b1113); outline-offset: 2px; } /* Toggle tiles (icon above label) */ .cc-a11y-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin-bottom: 8px; } .cc-a11y-tile { background: #fff; border: 1.5px solid var(--cc-a11y-border, #d9d4cd); border-radius: 10px; padding: 10px 8px 9px; font-family: inherit; font-size: 13px; font-weight: 700; color: var(--cc-a11y-text, #2c2218); cursor: pointer; min-height: 64px; text-align: center; position: relative; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 5px; transition: border-color 0.12s ease, background-color 0.12s ease; } .cc-a11y-tile .cc-a11y-ic { width: 22px; height: 22px; color: var(--cc-a11y-accent, #7b1113); pointer-events: none; flex-shrink: 0; } .cc-a11y-tile span { pointer-events: none; line-height: 1.25; } .cc-a11y-tile:hover { border-color: var(--cc-a11y-accent, #7b1113); background: #f5f0eb; color: var(--cc-a11y-text, #2c2218); } .cc-a11y-tile[aria-pressed="true"] { background: var(--cc-a11y-accent, #7b1113); border-color: var(--cc-a11y-accent, #7b1113); color: #fff; } .cc-a11y-tile[aria-pressed="true"] .cc-a11y-ic { color: #fff; } .cc-a11y-tile[aria-pressed="true"]:hover { background: var(--cc-a11y-accent-dark, #5a0c0e); color: #fff; } .cc-a11y-tile[aria-pressed="true"]::after { content: "\2713"; position: absolute; top: 3px; right: 8px; font-size: 11px; color: #fff; } .cc-a11y-tile:focus-visible { outline: 2px solid var(--cc-a11y-accent, #7b1113); outline-offset: 2px; } /* Stepper rows (font size, line height, spacing) */ .cc-a11y-step { display: flex; align-items: center; justify-content: space-between; gap: 8px; background: #fff; border: 1.5px solid var(--cc-a11y-border, #d9d4cd); border-radius: 10px; padding: 8px 10px; margin-bottom: 8px; } .cc-a11y-step.cc-active { border-color: var(--cc-a11y-accent, #7b1113); } .cc-a11y-step-label { font-weight: 700; font-size: 13.5px; flex: 1 1 auto; } .cc-a11y-step-value { font-size: 12.5px; color: #6a5e57; min-width: 44px; text-align: center; } .cc-a11y-step.cc-active .cc-a11y-step-value { color: var(--cc-a11y-accent, #7b1113); font-weight: 700; } .cc-a11y-step-btn { width: 36px; height: 36px; border-radius: 50%; border: 1.5px solid var(--cc-a11y-accent, #7b1113); background: #fff; color: var(--cc-a11y-accent, #7b1113); font-size: 18px; font-weight: 700; line-height: 1; cursor: pointer; flex-shrink: 0; display: flex; align-items: center; justify-content: center; padding: 0; } .cc-a11y-step-btn:hover:not(:disabled) { background: var(--cc-a11y-accent, #7b1113); color: #fff; } .cc-a11y-step-btn:disabled { border-color: #a89b93; color: #a89b93; cursor: not-allowed; } .cc-a11y-step-btn:focus-visible { outline: 2px solid var(--cc-a11y-accent, #7b1113); outline-offset: 2px; } /* Footer (sticky-bottom inside the scroll region: pinned look at normal * heights, scrolls with content on very short viewports) */ .cc-a11y-foot { position: sticky; bottom: 0; z-index: 2; flex-shrink: 0; border-top: 1px solid var(--cc-a11y-border, #d9d4cd); padding: 10px 16px; display: flex; flex-direction: column; gap: 6px; font-size: 12px; color: #6a5e57; background: #f5f2ed; } .cc-a11y-foot-links { display: flex; align-items: center; justify-content: space-between; gap: 8px; flex-wrap: wrap; } .cc-a11y-foot a { color: var(--cc-a11y-accent, #7b1113); text-decoration: underline; font-weight: 700; } .cc-a11y-foot a:hover { color: var(--cc-a11y-accent-dark, #5a0c0e); } .cc-a11y-foot a:focus-visible { outline: 2px solid var(--cc-a11y-accent, #7b1113); outline-offset: 2px; } .cc-a11y-hide-btn { display: inline-flex; align-items: center; gap: 5px; background: transparent; border: none; color: #6a5e57; font-family: inherit; font-size: 12px; font-weight: 700; cursor: pointer; padding: 4px 6px; text-decoration: underline; } .cc-a11y-hide-btn .cc-a11y-ic { width: 15px; height: 15px; } .cc-a11y-hide-btn:hover { color: var(--cc-a11y-accent-dark, #5a0c0e); } .cc-a11y-hide-btn:focus-visible { outline: 2px solid var(--cc-a11y-accent, #7b1113); outline-offset: 2px; } .cc-a11y-foot-brand { font-size: 11px; } /* --------------------------------------------------------------------------- * Read-aloud control bar (fixed, bottom center) * ------------------------------------------------------------------------ */ #cc-a11y-ttsbar { position: fixed; bottom: 18px; bottom: calc(18px + env(safe-area-inset-bottom, 0px)); left: 50%; transform: translateX(-50%); display: flex; align-items: center; flex-wrap: wrap; justify-content: center; max-width: calc(100vw - 16px); gap: 6px; background: var(--cc-a11y-cream, #faf9f7); border: 1px solid var(--cc-a11y-border, #d9d4cd); border-radius: 999px; box-shadow: 0 8px 24px rgba(44, 34, 24, 0.25); padding: 8px 12px; z-index: 100003; } #cc-a11y-ttsbar[hidden] { display: none; } #cc-a11y-ttsbar button { min-width: 40px; height: 40px; border-radius: 50%; border: 1.5px solid var(--cc-a11y-accent, #7b1113); background: #fff; color: var(--cc-a11y-accent, #7b1113); font-family: inherit; font-size: 14px; font-weight: 700; cursor: pointer; display: flex; align-items: center; justify-content: center; padding: 0 8px; } #cc-a11y-ttsbar button:hover { background: var(--cc-a11y-accent, #7b1113); color: #fff; } #cc-a11y-ttsbar button:focus-visible { outline: 2px solid var(--cc-a11y-accent, #7b1113); outline-offset: 2px; } /* Block currently being read */ html .cc-a11y-tts-current { outline: 3px solid #7b1113 !important; outline-offset: 3px !important; background: #fff3cd !important; color: #2c2218 !important; } /* Affordance: readable blocks hint while read-aloud mode is on */ html.cc-a11y-tts main :is(p, li, h1, h2, h3, h4, h5, h6):hover, html.cc-a11y-tts .entry-content :is(p, li, h1, h2, h3, h4, h5, h6):hover { outline: 2px dashed rgba(123, 17, 19, 0.55); outline-offset: 3px; cursor: pointer; } /* --------------------------------------------------------------------------- * Text magnifier lens * ------------------------------------------------------------------------ */ #cc-a11y-lens { position: fixed; background: #fffdf7; color: #2c2218; border: 2px solid #7b1113; border-radius: 10px; padding: 12px 16px; font-family: Verdana, Arial, sans-serif; font-size: 26px; line-height: 1.45; font-weight: 400; box-shadow: 0 10px 30px rgba(44, 34, 24, 0.35); pointer-events: none; z-index: 100002; } #cc-a11y-lens[hidden] { display: none; } /* --------------------------------------------------------------------------- * Page structure dialog * ------------------------------------------------------------------------ */ #cc-a11y-struct { position: fixed; inset: 0; background: rgba(44, 34, 24, 0.5); z-index: 100004; display: flex; align-items: center; justify-content: center; padding: 20px; } .cc-a11y-struct-card { width: 460px; max-width: 100%; max-height: min(640px, calc(100vh - 40px)); background: var(--cc-a11y-cream, #faf9f7); border: 1px solid var(--cc-a11y-border, #d9d4cd); border-radius: 16px; box-shadow: 0 16px 48px rgba(44, 34, 24, 0.35); display: flex; flex-direction: column; overflow: hidden; overflow: clip; font-size: 14px; color: var(--cc-a11y-text, #2c2218); } .cc-a11y-struct-card .cc-a11y-head h2 { font-family: 'Sorts Mill Goudy', Georgia, serif; font-weight: 400; font-size: 20px; margin: 0; color: #fff; } .cc-a11y-struct-tabs { display: flex; border-bottom: 1px solid var(--cc-a11y-border, #d9d4cd); background: #fff; flex-shrink: 0; } .cc-a11y-struct-tabs [role="tab"] { flex: 1 1 0; background: transparent; border: none; border-bottom: 3px solid transparent; font-family: inherit; font-size: 13px; font-weight: 700; color: var(--cc-a11y-text, #2c2218); padding: 11px 6px; cursor: pointer; min-height: 44px; } .cc-a11y-struct-tabs [role="tab"]:hover { background: #f0ece6; } .cc-a11y-struct-tabs [role="tab"][aria-selected="true"] { color: var(--cc-a11y-accent, #7b1113); border-bottom-color: var(--cc-a11y-accent, #7b1113); } .cc-a11y-struct-tabs [role="tab"]:focus-visible { outline: 2px solid var(--cc-a11y-accent, #7b1113); outline-offset: -2px; } .cc-a11y-struct-body { overflow-y: auto; padding: 10px 12px; flex: 1 1 auto; } .cc-a11y-struct-list { list-style: none; margin: 0; padding: 0; } .cc-a11y-struct-list li { margin: 0 0 4px; } .cc-a11y-struct-list button { width: 100%; text-align: left; background: #fff; border: 1px solid var(--cc-a11y-border, #d9d4cd); border-radius: 8px; font-family: inherit; font-size: 13.5px; color: var(--cc-a11y-text, #2c2218); padding: 9px 12px; cursor: pointer; display: flex; align-items: center; gap: 8px; min-height: 40px; } .cc-a11y-struct-list button:hover { border-color: var(--cc-a11y-accent, #7b1113); background: #f5f0eb; } .cc-a11y-struct-list button:focus-visible { outline: 2px solid var(--cc-a11y-accent, #7b1113); outline-offset: 2px; } .cc-a11y-struct-lvl { flex-shrink: 0; font-size: 10.5px; font-weight: 700; color: #fff; background: var(--cc-a11y-accent, #7b1113); border-radius: 4px; padding: 2px 5px; } .cc-a11y-struct-empty { color: #6a5e57; padding: 12px; margin: 0; } /* Flash highlight after jumping from the structure dialog */ html .cc-a11y-flash { outline: 4px solid #7b1113 !important; outline-offset: 4px !important; transition: outline-color 1.2s ease; } /* Mobile: full-height sheet */ @media (max-width: 767px) { #cc-a11y-panel, #cc-a11y-root.cc-pos-right #cc-a11y-panel, #cc-a11y-root.cc-big #cc-a11y-panel { left: 0; right: 0; bottom: 0; width: 100%; max-width: 100%; max-height: calc(100vh - 24px); border-radius: 16px 16px 0 0; border-left: none; border-right: none; border-bottom: none; } .cc-a11y-tile { min-height: 68px; } .cc-a11y-close, .cc-a11y-step-btn { width: 44px; height: 44px; } /* 16px floor stops iOS Safari's focus auto-zoom, which scales the visual * viewport and pushes the fixed panel header off screen */ .cc-a11y-search input { font-size: 16px; } /* Sheet touches the screen edge: keep footer links above the home * indicator / gesture bar */ .cc-a11y-foot { padding-bottom: calc(10px + env(safe-area-inset-bottom, 0px)); } #cc-a11y-root.cc-hide-mobile { display: none; } } /* Very short viewports (browser zoomed way in, landscape phones, tiny * resized windows): sticky search/footer would eat the whole scrollport, * so demote them to normal flow. The header stays pinned; everything else * is reachable by scrolling. */ @media (max-height: 500px) { .cc-a11y-top, .cc-a11y-foot { position: static; } /* Sticky bars are gone, so the large scroll-padding must go too: * padding bigger than the scrollport makes scrollIntoView/focus * scrolling clamp targets out of view */ .cc-a11y-scroll { scroll-padding-top: 8px; scroll-padding-bottom: 8px; } } /* Dynamic-viewport sizing: 100vh on mobile browsers includes the area behind * the collapsing URL bar, which clipped the panel header under the browser * chrome. dvh tracks the *visible* viewport. Same 34px/24px top margins as * the vh fallbacks above. */ @supports (height: 1dvh) { #cc-a11y-panel { max-height: calc(100dvh - 130px); } #cc-a11y-root.cc-pos-right #cc-a11y-panel { max-height: calc(100dvh - 180px); } @media (max-width: 767px) { #cc-a11y-panel, #cc-a11y-root.cc-pos-right #cc-a11y-panel, #cc-a11y-root.cc-big #cc-a11y-panel { max-height: calc(100dvh - 24px); } } .cc-a11y-struct-card { max-height: min(640px, calc(100dvh - 40px)); } } /* Touch targets on coarse pointers */ @media (pointer: coarse) { .cc-a11y-close, .cc-a11y-step-btn { width: 44px; height: 44px; } .cc-a11y-switch { width: 52px; height: 30px; } .cc-a11y-switch::after { width: 23px; height: 23px; } .cc-a11y-switch[aria-checked="true"]::after { transform: translateX(22px); } } /* Respect reduced motion for the widget itself */ @media (prefers-reduced-motion: reduce) { #cc-a11y-root *, #cc-a11y-btn { transition: none !important; animation: none !important; } } /* --------------------------------------------------------------------------- * JS-created overlay elements (guide, mask, tooltip) * ------------------------------------------------------------------------ */ #cc-a11y-guide { position: fixed; height: 7px; width: min(520px, 62vw); background: #7b1113; border: 1px solid #fff; border-radius: 999px; pointer-events: none; z-index: 100001; box-shadow: 0 1px 6px rgba(0, 0, 0, 0.4); left: 0; top: 0; } #cc-a11y-mask { position: fixed; left: 0; width: 100vw; height: 130px; pointer-events: none; z-index: 100001; box-shadow: 0 0 0 200vmax rgba(0, 0, 0, 0.55); top: 40vh; } #cc-a11y-tooltip { position: fixed; max-width: 320px; background: #faf9f7; color: #2c2218; border: 1px solid #d9d4cd; border-left: 4px solid #7b1113; border-radius: 6px; padding: 8px 12px; font-family: Quattrocento, 'Helvetica Neue', Helvetica, Arial, sans-serif; font-size: 14px; line-height: 1.4; box-shadow: 0 8px 24px rgba(44, 34, 24, 0.18); pointer-events: none; z-index: 100002; } /* ============================================================================= * Part 2: FEATURE RULE BLOCKS * Classes live on . Broad selectors use !important deliberately, this is * the only way to beat Kadence Blocks Pro per-block inline CSS (best effort, * same approach accessiBe takes). The widget root and the AI Concierge widget * are excluded so both stay usable in every mode. * ========================================================================== */ /* ----- Font size: zoom scales every px declaration uniformly. The widget gets * a counter-zoom so the button stays its configured size. Browsers without * zoom support (Firefox < 126) fall back to scaling the ada-typography * variables. ----- */ html.cc-a11y-fs-1 body { zoom: 1.1; } html.cc-a11y-fs-2 body { zoom: 1.2; } html.cc-a11y-fs-3 body { zoom: 1.3; } html.cc-a11y-fs-4 body { zoom: 1.4; } html.cc-a11y-fs-1 #cc-a11y-root { zoom: 0.9091; } html.cc-a11y-fs-2 #cc-a11y-root { zoom: 0.8333; } html.cc-a11y-fs-3 #cc-a11y-root { zoom: 0.7692; } html.cc-a11y-fs-4 #cc-a11y-root { zoom: 0.7143; } @supports not (zoom: 1.1) { html.cc-a11y-fs-1 { --cc-fs-body: 19.8px; --cc-fs-body-mobile: 18.7px; } html.cc-a11y-fs-2 { --cc-fs-body: 21.6px; --cc-fs-body-mobile: 20.4px; } html.cc-a11y-fs-3 { --cc-fs-body: 23.4px; --cc-fs-body-mobile: 22.1px; } html.cc-a11y-fs-4 { --cc-fs-body: 25.2px; --cc-fs-body-mobile: 23.8px; } } /* ----- Line height ----- */ html.cc-a11y-lh-1 body { line-height: 1.7 !important; } html.cc-a11y-lh-2 body { line-height: 1.9 !important; } html.cc-a11y-lh-3 body { line-height: 2.2 !important; } html.cc-a11y-lh-1 body :is(p, li, dd, dt, blockquote, label, figcaption):not(#cc-a11y-root *) { line-height: 1.7 !important; } html.cc-a11y-lh-2 body :is(p, li, dd, dt, blockquote, label, figcaption):not(#cc-a11y-root *) { line-height: 1.9 !important; } html.cc-a11y-lh-3 body :is(p, li, dd, dt, blockquote, label, figcaption):not(#cc-a11y-root *) { line-height: 2.2 !important; } /* ----- Letter spacing (inherits from body; widget resets itself) ----- */ html.cc-a11y-ls-1 body { letter-spacing: 0.06em !important; } html.cc-a11y-ls-2 body { letter-spacing: 0.12em !important; } html.cc-a11y-ls-3 body { letter-spacing: 0.18em !important; } /* ----- Word spacing ----- */ html.cc-a11y-ws-1 body { word-spacing: 0.16em !important; } html.cc-a11y-ws-2 body { word-spacing: 0.32em !important; } html.cc-a11y-ws-3 body { word-spacing: 0.48em !important; } /* ----- Readable font (system sans stack, zero download weight) ----- */ html.cc-a11y-readable body, html.cc-a11y-readable body *:not(#cc-a11y-root):not(#cc-a11y-root *):not(i):not([class*="dashicons"]):not([class*="fa-"]):not([class*="icon"]) { font-family: Verdana, Arial, Tahoma, sans-serif !important; } /* ----- Dyslexia-friendly font (self-hosted OpenDyslexic) ----- */ html.cc-a11y-dyslexic body, html.cc-a11y-dyslexic body *:not(#cc-a11y-root):not(#cc-a11y-root *):not(i):not([class*="dashicons"]):not([class*="fa-"]):not([class*="icon"]) { font-family: 'OpenDyslexic', 'Comic Sans MS', Verdana, sans-serif !important; } /* ----- Text alignment (content area only) ----- */ html.cc-a11y-align-left .entry-content :is(p, h1, h2, h3, h4, h5, h6, li, blockquote, figcaption) { text-align: left !important; } html.cc-a11y-align-center .entry-content :is(p, h1, h2, h3, h4, h5, h6, li, blockquote, figcaption) { text-align: center !important; } html.cc-a11y-align-right .entry-content :is(p, h1, h2, h3, h4, h5, h6, li, blockquote, figcaption) { text-align: right !important; } /* ----- Highlight links ----- */ html.cc-a11y-hl-links a:not(#cc-a11y-root *):not([class*="cosmos-ai"] *) { background: #fff3cd !important; color: #2c2218 !important; text-decoration: underline !important; outline: 2px solid #7b1113 !important; outline-offset: 1px; } /* ----- Highlight headings ----- */ html.cc-a11y-hl-headings :is(h1, h2, h3, h4, h5, h6):not(#cc-a11y-root *):not([class*="cosmos-ai"] *) { background: #fff3cd !important; color: #2c2218 !important; outline: 2px solid #7b1113 !important; outline-offset: 2px; } /* ----- Highlight focus / keyboard navigation mode ----- */ html.cc-a11y-hl-focus :focus, html.cc-a11y-keyboard :focus { outline: 4px solid #7b1113 !important; outline-offset: 3px !important; box-shadow: 0 0 0 7px rgba(255, 255, 255, 0.9) !important; } html.cc-a11y-keyboard .cosmos-skip-link { font-size: 16px !important; } /* ----- Highlight on hover (cognitive aid: shows exactly what the pointer * is over) ----- */ html.cc-a11y-hl-hover body :is(a, button, [role="button"], input, select, textarea, label, p, li, h1, h2, h3, h4, h5, h6):hover:not(#cc-a11y-root *):not([class*="cosmos-ai"] *) { outline: 3px solid #b8860b !important; outline-offset: 2px !important; } /* ----- Contrast modes (explicit overrides, never filters) ----- */ /* Dark */ html.cc-a11y-contrast-dark body { background: #1b1b1b !important; } html.cc-a11y-contrast-dark body *:not(#cc-a11y-root):not(#cc-a11y-root *):not([class*="cosmos-ai"]):not([class*="cosmos-ai"] *):not(img):not(svg):not(video):not(iframe):not(picture) { background-color: transparent !important; color: #f2ede3 !important; border-color: #5a5a5a !important; } html.cc-a11y-contrast-dark body a:not(#cc-a11y-root *):not([class*="cosmos-ai"] *) { color: #ffd28a !important; } html.cc-a11y-contrast-dark body :is(button, input, select, textarea, [role="button"]):not(#cc-a11y-root *):not([class*="cosmos-ai"] *) { background-color: #2a2a2a !important; color: #fff !important; border-color: #777 !important; } /* Light */ html.cc-a11y-contrast-light body { background: #ffffff !important; } html.cc-a11y-contrast-light body *:not(#cc-a11y-root):not(#cc-a11y-root *):not([class*="cosmos-ai"]):not([class*="cosmos-ai"] *):not(img):not(svg):not(video):not(iframe):not(picture) { background-color: transparent !important; color: #000000 !important; border-color: #767676 !important; } html.cc-a11y-contrast-light body a:not(#cc-a11y-root *):not([class*="cosmos-ai"] *) { color: #0000cc !important; text-decoration: underline !important; } html.cc-a11y-contrast-light body :is(button, input, select, textarea, [role="button"]):not(#cc-a11y-root *):not([class*="cosmos-ai"] *) { background-color: #f0f0f0 !important; color: #000 !important; border-color: #767676 !important; } /* High contrast */ html.cc-a11y-contrast-high body { background: #000000 !important; } html.cc-a11y-contrast-high body *:not(#cc-a11y-root):not(#cc-a11y-root *):not([class*="cosmos-ai"]):not([class*="cosmos-ai"] *):not(img):not(svg):not(video):not(iframe):not(picture) { background-color: transparent !important; color: #ffff00 !important; border-color: #ffff00 !important; } html.cc-a11y-contrast-high body a:not(#cc-a11y-root *):not([class*="cosmos-ai"] *) { color: #00ffff !important; text-decoration: underline !important; } html.cc-a11y-contrast-high body :is(button, input, select, textarea, [role="button"]):not(#cc-a11y-root *):not([class*="cosmos-ai"] *) { background-color: #1a1a1a !important; color: #ffff00 !important; border-color: #ffff00 !important; } /* ----- Saturation / monochrome filters. * Never put filter on html or body: it creates a containing block that breaks * every position:fixed descendant (Neve sticky header, both floating widgets). * Applied to direct children of body instead, excluding the widgets. ----- */ html.cc-a11y-sat-high body > *:not(#cc-a11y-root):not([class*="cosmos-ai"]):not(script):not(style):not(#cc-a11y-guide):not(#cc-a11y-mask):not(#cc-a11y-tooltip):not(#cc-a11y-lens) { filter: saturate(2.2); } html.cc-a11y-sat-low body > *:not(#cc-a11y-root):not([class*="cosmos-ai"]):not(script):not(style):not(#cc-a11y-guide):not(#cc-a11y-mask):not(#cc-a11y-tooltip):not(#cc-a11y-lens) { filter: saturate(0.45); } html.cc-a11y-monochrome body > *:not(#cc-a11y-root):not([class*="cosmos-ai"]):not(script):not(style):not(#cc-a11y-guide):not(#cc-a11y-mask):not(#cc-a11y-tooltip):not(#cc-a11y-lens) { filter: grayscale(1); } /* ----- Hide images (visibility keeps layout stable) ----- */ html.cc-a11y-hide-img body :is(img, picture, video, svg):not(#cc-a11y-root *):not([class*="cosmos-ai"] *) { visibility: hidden !important; } html.cc-a11y-hide-img body *:not(#cc-a11y-root):not(#cc-a11y-root *):not([class*="cosmos-ai"]):not([class*="cosmos-ai"] *) { background-image: none !important; } /* ----- Pause animations (mirrors the theme prefers-reduced-motion block) ----- */ html.cc-a11y-pause-anim *, html.cc-a11y-pause-anim *::before, html.cc-a11y-pause-anim *::after { animation: none !important; transition: none !important; scroll-behavior: auto !important; } /* ----- Big cursors (48px SVG data URIs, under the 128px browser cap) ----- */ html.cc-a11y-cursor-white, html.cc-a11y-cursor-white * { cursor: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='44' height='44' viewBox='0 0 44 44'%3E%3Cpath d='M9 3 L9 35 L17.5 27 L23 40 L28.5 37.5 L23 25 L35 25 Z' fill='%23ffffff' stroke='%23000000' stroke-width='2.5' stroke-linejoin='round'/%3E%3C/svg%3E") 9 3, auto !important; } html.cc-a11y-cursor-black, html.cc-a11y-cursor-black * { cursor: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='44' height='44' viewBox='0 0 44 44'%3E%3Cpath d='M9 3 L9 35 L17.5 27 L23 40 L28.5 37.5 L23 25 L35 25 Z' fill='%23000000' stroke='%23ffffff' stroke-width='2.5' stroke-linejoin='round'/%3E%3C/svg%3E") 9 3, auto !important; } /* ----- Color-blindness compensation (daltonization matrices injected as SVG * filters by widget.js). Same body > * pattern as saturation: filters must * never sit on html/body or position:fixed descendants break. ----- */ html.cc-a11y-cb-deuteranopia body > *:not(#cc-a11y-root):not([class*="cosmos-ai"]):not(script):not(style):not(#cc-a11y-guide):not(#cc-a11y-mask):not(#cc-a11y-tooltip):not(#cc-a11y-lens) { filter: url(#cc-a11y-f-deuteranopia); } html.cc-a11y-cb-protanopia body > *:not(#cc-a11y-root):not([class*="cosmos-ai"]):not(script):not(style):not(#cc-a11y-guide):not(#cc-a11y-mask):not(#cc-a11y-tooltip):not(#cc-a11y-lens) { filter: url(#cc-a11y-f-protanopia); } html.cc-a11y-cb-tritanopia body > *:not(#cc-a11y-root):not([class*="cosmos-ai"]):not(script):not(style):not(#cc-a11y-guide):not(#cc-a11y-mask):not(#cc-a11y-tooltip):not(#cc-a11y-lens) { filter: url(#cc-a11y-f-tritanopia); } /* ----- Bigger click targets (WCAG 2.5.8 Target Size aid): guarantees a * comfortable minimum hit area on links and controls without reflowing * whole layouts. ----- */ html.cc-a11y-big-targets body :is(a, button, [role="button"], input[type="submit"], input[type="button"], input[type="checkbox"], input[type="radio"], select):not(#cc-a11y-root *):not([class*="cosmos-ai"] *) { min-height: 32px !important; min-width: 32px !important; } html.cc-a11y-big-targets body :is(a, button, [role="button"]):not(#cc-a11y-root *):not([class*="cosmos-ai"] *) { padding-top: max(0.3em, 4px) !important; padding-bottom: max(0.3em, 4px) !important; display: inline-block; } html.cc-a11y-big-targets body nav a, html.cc-a11y-big-targets body li a { padding-left: max(0.3em, 4px) !important; padding-right: max(0.3em, 4px) !important; } /* ----- Read-aloud word highlight (CSS Custom Highlight API) ----- */ ::highlight(cc-a11y-word) { background-color: #7b1113; color: #fff; }