/* ═══════════════════════════════════════════ Flavor Accessibility – Frontend v1.5 Built after the Pojo/Ally source pattern: · Body classes for features · All widget rules under #flavor-a11y-wrap · No complex :not() with descendant combinators ═══════════════════════════════════════════ */ /* ─── Reading guide bar (needs no ID scope) ── */ .fa11y-guide-bar { display: none; position: fixed; left: 0; top: 0; width: 100%; height: 40px; pointer-events: none; z-index: 9999998; background: rgba(108,92,231,.12); border-top: 2px solid rgba(108,92,231,.6); border-bottom: 2px solid rgba(108,92,231,.6); } /* ══════════════════════════════════════════ FEATURE CSS — Pojo-style body classes. Simple selectors only — no complex :not(). Widget re-isolation handled further below. ══════════════════════════════════════════ */ /* Font size — on so rem units scale + direct element overrides for px-based builders */ html.fa11y-bigger-text { font-size: 120% !important; } html.fa11y-biggest-text { font-size: 140% !important; } /* Override px-locked text (Elementor, Gutenberg, page builders). Using 1rem means: html is already scaled to 120%/140%, so 1rem = that new base size. No cascade amplification — every element gets exactly the new root size, regardless of nesting depth. */ html.fa11y-bigger-text body p, html.fa11y-bigger-text body li, html.fa11y-bigger-text body td, html.fa11y-bigger-text body th, html.fa11y-bigger-text body label, html.fa11y-bigger-text body h1, html.fa11y-bigger-text body h2, html.fa11y-bigger-text body h3, html.fa11y-bigger-text body h4, html.fa11y-bigger-text body h5, html.fa11y-bigger-text body h6, html.fa11y-bigger-text body .elementor-widget-container, html.fa11y-bigger-text body .elementor-text-editor, html.fa11y-bigger-text body .wp-block-paragraph, html.fa11y-bigger-text body .wp-block-heading, html.fa11y-bigger-text body .entry-content { font-size: 1rem !important; } html.fa11y-biggest-text body p, html.fa11y-biggest-text body li, html.fa11y-biggest-text body td, html.fa11y-biggest-text body th, html.fa11y-biggest-text body label, html.fa11y-biggest-text body h1, html.fa11y-biggest-text body h2, html.fa11y-biggest-text body h3, html.fa11y-biggest-text body h4, html.fa11y-biggest-text body h5, html.fa11y-biggest-text body h6, html.fa11y-biggest-text body .elementor-widget-container, html.fa11y-biggest-text body .elementor-text-editor, html.fa11y-biggest-text body .wp-block-paragraph, html.fa11y-biggest-text body .wp-block-heading, html.fa11y-biggest-text body .entry-content { font-size: 1rem !important; } /* Widget uses explicit px values — unaffected by rem changes. No revert needed. */ /* Page zoom */ body.fa11y-zoom-medium { zoom: 1.25; } body.fa11y-zoom-large { zoom: 1.5; } /* High contrast */ body.fa11y-high-contrast * { color: #000000 !important; background-color: #ffffff !important; border-color: #000000 !important; box-shadow: none !important; text-shadow: none !important; } body.fa11y-high-contrast a { color: #0000EE !important; text-decoration: underline !important; } body.fa11y-high-contrast img { filter: contrast(1.2) !important; } /* ── Filter-based modes ──────────────────────────────────────────────────── NEVER apply filter to body itself — that breaks position:fixed by making body the containing block instead of the viewport (button scrolls away). Instead target body's DIRECT CHILDREN and exclude our widget + guide bar. body stays filter-free → position:fixed always relative to viewport. ── */ body.fa11y-dark-contrast > *:not(#flavor-a11y-wrap):not(.fa11y-guide-bar) { filter: invert(1) hue-rotate(180deg) !important; } body.fa11y-dark-contrast > *:not(#flavor-a11y-wrap):not(.fa11y-guide-bar) img, body.fa11y-dark-contrast > *:not(#flavor-a11y-wrap):not(.fa11y-guide-bar) video, body.fa11y-dark-contrast > *:not(#flavor-a11y-wrap):not(.fa11y-guide-bar) canvas { filter: invert(1) hue-rotate(180deg) !important; } body.fa11y-low-saturation > *:not(#flavor-a11y-wrap):not(.fa11y-guide-bar) { filter: saturate(0.3) !important; } body.fa11y-monochrome > *:not(#flavor-a11y-wrap):not(.fa11y-guide-bar) { filter: grayscale(1) !important; } /* Readable font */ body.fa11y-readable-font, body.fa11y-readable-font * { font-family: Verdana, Arial, Helvetica, sans-serif !important; letter-spacing: .02em !important; word-spacing: .1em !important; } /* Highlight links */ body.fa11y-highlight-links a { outline: 3px solid #FFD700 !important; outline-offset: 2px !important; background-color: rgba(255,215,0,.15) !important; } /* Big cursor */ body.fa11y-big-cursor * { cursor: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='48' height='48' viewBox='0 0 24 24' fill='black' stroke='white' stroke-width='1'%3E%3Cpath d='M5 3l14 8-6 1-4 6z'/%3E%3C/svg%3E") 4 4, auto !important; } /* Line height */ body.fa11y-line-height * { line-height: 2 !important; } /* Letter spacing */ body.fa11y-letter-spacing * { letter-spacing: .12em !important; } /* Highlight titles */ body.fa11y-highlight-titles h1, body.fa11y-highlight-titles h2, body.fa11y-highlight-titles h3, body.fa11y-highlight-titles h4, body.fa11y-highlight-titles h5, body.fa11y-highlight-titles h6 { outline: 2px dashed var(--fa11y-color,#6C5CE7) !important; outline-offset: 4px !important; } /* Stop animations */ body.fa11y-stop-animations *, body.fa11y-stop-animations *::before, body.fa11y-stop-animations *::after { animation: none !important; transition: none !important; } /* Text alignment */ body.fa11y-text-align-left * { text-align: left !important; } body.fa11y-text-align-center * { text-align: center !important; } /* Reading guide active */ body.fa11y-reading-guide .fa11y-guide-bar { display: block !important; } /* ══════════════════════════════════════════ WIDGET — all rules under #flavor-a11y-wrap ID specificity (1,0,0) beats body-class rules (0,1,0). Plus !important on every visual property so nothing can bleed in. ══════════════════════════════════════════ */ /* Wrap */ #flavor-a11y-wrap { position: static; z-index: auto; /* Undo body-level filters so the wrap itself is the counter-filter anchor point */ } /* No counter-filters or zoom-reset needed — the widget lives in , completely outside body, so body-level filters/zoom never reach it. */ /* Widget-wide text reset */ #flavor-a11y-wrap, #flavor-a11y-wrap * { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif !important; line-height: 1.45 !important; letter-spacing: 0 !important; word-spacing: 0 !important; text-align: left !important; font-style: normal !important; text-transform: none !important; text-decoration: none !important; box-sizing: border-box !important; } /* No feature-undo rules needed — widget is in , body feature classes (readable-font, line-height, stop-animations, etc.) only target body descendants, so they can never bleed into the widget. */ /* ─── Trigger button ─────────────────────── */ #flavor-a11y-wrap .flavor-a11y-trigger { position: fixed !important; display: flex !important; align-items: center !important; justify-content: center !important; border: none !important; border-radius: 50% !important; cursor: pointer !important; color: #ffffff !important; background-color: var(--fa11y-color, #6C5CE7) !important; box-shadow: 0 4px 20px rgba(0,0,0,.28) !important; transition: transform .3s cubic-bezier(.34,1.56,.64,1), box-shadow .3s !important; outline: none !important; -webkit-tap-highlight-color: transparent !important; padding: 0 !important; opacity: 1 !important; visibility: visible !important; pointer-events: auto !important; filter: none !important; text-decoration: none !important; /* width/height and z-index set via PHP inline style */ } #flavor-a11y-wrap .flavor-a11y-trigger:hover { transform: scale(1.1) !important; box-shadow: 0 6px 28px rgba(0,0,0,.3), 0 0 0 6px rgba(var(--fa11y-rgb,108,92,231),.2) !important; } #flavor-a11y-wrap .flavor-a11y-trigger:active { transform: scale(.95) !important; } #flavor-a11y-wrap .flavor-a11y-trigger:focus-visible { outline: 3px solid rgba(var(--fa11y-rgb,108,92,231),.7) !important; outline-offset: 4px !important; } /* Trigger color is self-contained — widget is in , not body, so body.fa11y-high-contrast rules never affect it. */ /* Trigger icons */ #flavor-a11y-wrap .flavor-a11y-trigger-open { display: flex !important; align-items: center !important; justify-content: center !important; width: 55% !important; height: 55% !important; color: #ffffff !important; background: transparent !important; filter: none !important; opacity: 1 !important; } #flavor-a11y-wrap .flavor-a11y-trigger-open svg { width: 100% !important; height: 100% !important; display: block !important; stroke: currentColor !important; fill: none !important; color: #ffffff !important; background: transparent !important; } #flavor-a11y-wrap .flavor-a11y-close-icon { display: none !important; width: 55% !important; height: 55% !important; color: #ffffff !important; fill: none !important; background: transparent !important; } #flavor-a11y-wrap .flavor-a11y-trigger.is-open .flavor-a11y-trigger-open { display: none !important; } #flavor-a11y-wrap .flavor-a11y-trigger.is-open .flavor-a11y-close-icon { display: block !important; } /* Pulse animation */ @keyframes fa11y-pulse { 0% { box-shadow: 0 4px 20px rgba(0,0,0,.25), 0 0 0 0 rgba(var(--fa11y-rgb,108,92,231),.45); } 70% { box-shadow: 0 4px 20px rgba(0,0,0,.25), 0 0 0 14px rgba(var(--fa11y-rgb,108,92,231),0); } 100% { box-shadow: 0 4px 20px rgba(0,0,0,.25), 0 0 0 0 rgba(var(--fa11y-rgb,108,92,231),0); } } #flavor-a11y-wrap .flavor-a11y-trigger.has-pulse { animation: fa11y-pulse 2.5s infinite !important; } #flavor-a11y-wrap .flavor-a11y-trigger.is-open.has-pulse { animation: none !important; } /* ─── Position system ────────────────────── */ #flavor-a11y-wrap .flavor-a11y-trigger.fa11y-pos-bottom-right { bottom: 20px !important; right: 20px !important; top: auto !important; left: auto !important; } #flavor-a11y-wrap .flavor-a11y-trigger.fa11y-pos-bottom-left { bottom: 20px !important; left: 20px !important; top: auto !important; right: auto !important; } #flavor-a11y-wrap .flavor-a11y-trigger.fa11y-pos-top-right { top: 20px !important; right: 20px !important; bottom: auto !important; left: auto !important; } #flavor-a11y-wrap .flavor-a11y-trigger.fa11y-pos-top-left { top: 20px !important; left: 20px !important; bottom: auto !important; right: auto !important; } #flavor-a11y-wrap .flavor-a11y-trigger.fa11y-pos-middle-right { top: 50% !important; right: 20px !important; transform: translateY(-50%) !important; bottom: auto !important; left: auto !important; } #flavor-a11y-wrap .flavor-a11y-trigger.fa11y-pos-middle-left { top: 50% !important; left: 20px !important; transform: translateY(-50%) !important; bottom: auto !important; right: auto !important; } #flavor-a11y-wrap .flavor-a11y-trigger.fa11y-pos-middle-right:hover { transform: translateY(-50%) scale(1.1) !important; } #flavor-a11y-wrap .flavor-a11y-trigger.fa11y-pos-middle-left:hover { transform: translateY(-50%) scale(1.1) !important; } /* Panel positions */ #flavor-a11y-wrap .flavor-a11y-panel.fa11y-panel-pos-bottom-right { bottom: 90px !important; right: 20px !important; top: auto !important; left: auto !important; } #flavor-a11y-wrap .flavor-a11y-panel.fa11y-panel-pos-bottom-left { bottom: 90px !important; left: 20px !important; top: auto !important; right: auto !important; } #flavor-a11y-wrap .flavor-a11y-panel.fa11y-panel-pos-top-right { top: 90px !important; right: 20px !important; bottom: auto !important; left: auto !important; } #flavor-a11y-wrap .flavor-a11y-panel.fa11y-panel-pos-top-left { top: 90px !important; left: 20px !important; bottom: auto !important; right: auto !important; } /* Middle panels: separate hidden/open transforms to prevent jump */ #flavor-a11y-wrap .flavor-a11y-panel.fa11y-panel-pos-middle-right { top: 50% !important; right: 20px !important; bottom: auto !important; left: auto !important; transform: translateY(calc(-50% + 14px)) scale(.96) !important; } #flavor-a11y-wrap .flavor-a11y-panel.fa11y-panel-pos-middle-left { top: 50% !important; left: 20px !important; bottom: auto !important; right: auto !important; transform: translateY(calc(-50% + 14px)) scale(.96) !important; } #flavor-a11y-wrap .flavor-a11y-panel.fa11y-panel-pos-middle-right.is-open { transform: translateY(-50%) scale(1) !important; opacity: 1 !important; visibility: visible !important; } #flavor-a11y-wrap .flavor-a11y-panel.fa11y-panel-pos-middle-left.is-open { transform: translateY(-50%) scale(1) !important; opacity: 1 !important; visibility: visible !important; } /* Mobile overrides */ @media (max-width: 768px) { #flavor-a11y-wrap .flavor-a11y-trigger.fa11y-mob-bottom-right { bottom:16px!important; right:16px!important; top:auto!important; left:auto!important; transform:none!important; } #flavor-a11y-wrap .flavor-a11y-trigger.fa11y-mob-bottom-left { bottom:16px!important; left:16px!important; top:auto!important; right:auto!important; transform:none!important; } #flavor-a11y-wrap .flavor-a11y-trigger.fa11y-mob-top-right { top:16px!important; right:16px!important; bottom:auto!important; left:auto!important; transform:none!important; } #flavor-a11y-wrap .flavor-a11y-trigger.fa11y-mob-top-left { top:16px!important; left:16px!important; bottom:auto!important; right:auto!important; transform:none!important; } #flavor-a11y-wrap .flavor-a11y-trigger.fa11y-mob-middle-right { top:50%!important; right:16px!important; transform:translateY(-50%)!important; } #flavor-a11y-wrap .flavor-a11y-trigger.fa11y-mob-middle-left { top:50%!important; left:16px!important; transform:translateY(-50%)!important; } #flavor-a11y-wrap .flavor-a11y-panel { left: 8px !important; right: 8px !important; bottom: 80px !important; top: auto !important; width: calc(100% - 16px) !important; max-height: 72vh !important; transform: translateY(10px) scale(.98) !important; } #flavor-a11y-wrap .flavor-a11y-panel.is-open { transform: translateY(0) scale(1) !important; } /* reset middle-pos overrides on mobile */ #flavor-a11y-wrap .flavor-a11y-panel.fa11y-panel-pos-middle-right, #flavor-a11y-wrap .flavor-a11y-panel.fa11y-panel-pos-middle-left { transform: translateY(10px) scale(.98) !important; top: auto !important; } #flavor-a11y-wrap .flavor-a11y-panel.fa11y-panel-pos-middle-right.is-open, #flavor-a11y-wrap .flavor-a11y-panel.fa11y-panel-pos-middle-left.is-open { transform: translateY(0) scale(1) !important; } } /* Mobile hide */ #flavor-a11y-wrap.flavor-a11y-hide-mobile { display: none !important; } /* ─── Panel ──────────────────────────────── */ #flavor-a11y-wrap .flavor-a11y-panel { position: fixed !important; max-height: 85vh !important; overflow-y: auto !important; overflow-x: hidden !important; border-radius: 20px !important; opacity: 0 !important; visibility: hidden !important; transform: translateY(14px) scale(.96) !important; transition: opacity .32s cubic-bezier(.4,0,.2,1), transform .32s cubic-bezier(.4,0,.2,1), visibility .32s !important; scrollbar-width: thin; scrollbar-color: rgba(0,0,0,.12) transparent; } #flavor-a11y-wrap .flavor-a11y-panel::-webkit-scrollbar { width: 4px; } #flavor-a11y-wrap .flavor-a11y-panel::-webkit-scrollbar-thumb { background: rgba(0,0,0,.14); border-radius: 4px; } #flavor-a11y-wrap .flavor-a11y-panel.is-open { opacity: 1 !important; visibility: visible !important; transform: translateY(0) scale(1) !important; } /* Panel visual styles */ #flavor-a11y-wrap .flavor-a11y-panel--glass { background: rgba(255,255,255,.9) !important; backdrop-filter: blur(28px) saturate(180%) !important; -webkit-backdrop-filter: blur(28px) saturate(180%) !important; border: 1px solid rgba(255,255,255,.55) !important; box-shadow: 0 16px 56px rgba(0,0,0,.13), 0 2px 8px rgba(0,0,0,.06) !important; color: #1e1e2f !important; } #flavor-a11y-wrap .flavor-a11y-panel--solid { background: #ffffff !important; border: 1px solid #ebebeb !important; box-shadow: 0 16px 56px rgba(0,0,0,.1) !important; color: #1e1e2f !important; } #flavor-a11y-wrap .flavor-a11y-panel--dark { background: #16162a !important; border: 1px solid rgba(255,255,255,.07) !important; box-shadow: 0 16px 56px rgba(0,0,0,.5) !important; color: #e8e8f0 !important; } /* Panel style restoration not needed — widget in , isolated from body rules */ /* Panel header */ #flavor-a11y-wrap .flavor-a11y-panel-header { display: flex !important; align-items: center !important; justify-content: space-between !important; padding: 20px 22px 16px !important; border-bottom: 1px solid rgba(128,128,128,.1) !important; position: sticky !important; top: 0 !important; z-index: 1 !important; } #flavor-a11y-wrap .flavor-a11y-panel--glass .flavor-a11y-panel-header { background: rgba(255,255,255,.8) !important; backdrop-filter: blur(8px) !important; -webkit-backdrop-filter: blur(8px) !important; } #flavor-a11y-wrap .flavor-a11y-panel--solid .flavor-a11y-panel-header { background: #ffffff !important; } #flavor-a11y-wrap .flavor-a11y-panel--dark .flavor-a11y-panel-header { background: #16162a !important; } #flavor-a11y-wrap .flavor-a11y-panel-title { font-size: 16px !important; font-weight: 700 !important; letter-spacing: -.3px !important; color: inherit !important; background: transparent !important; text-decoration: none !important; } #flavor-a11y-wrap .flavor-a11y-reset-btn { font-size: 11px !important; font-weight: 600 !important; padding: 5px 13px !important; border-radius: 20px !important; border: 1.5px solid rgba(128,128,128,.2) !important; background: transparent !important; cursor: pointer !important; color: inherit !important; opacity: .65; box-shadow: none !important; text-decoration: none !important; transition: opacity .2s, border-color .2s !important; } #flavor-a11y-wrap .flavor-a11y-reset-btn:hover { opacity: 1; border-color: rgba(128,128,128,.4) !important; } /* Panel body */ #flavor-a11y-wrap .flavor-a11y-panel-body { padding: 16px 20px 22px !important; } /* Section */ #flavor-a11y-wrap .flavor-a11y-section { margin-bottom: 18px !important; } #flavor-a11y-wrap .flavor-a11y-section:last-child { margin-bottom: 0 !important; } #flavor-a11y-wrap .flavor-a11y-section-title { font-size: 10px !important; font-weight: 700 !important; text-transform: uppercase !important; letter-spacing: 1.4px !important; opacity: .4; margin-bottom: 9px !important; padding-left: 2px !important; color: inherit !important; background: transparent !important; } /* ─── 3-step buttons ─────────────────────── */ #flavor-a11y-wrap .flavor-a11y-steps { display: grid !important; grid-template-columns: 1fr 1fr 1fr !important; gap: 7px !important; } #flavor-a11y-wrap .flavor-a11y-step { display: flex !important; flex-direction: column !important; align-items: center !important; justify-content: center !important; gap: 5px !important; padding: 12px 6px !important; border-radius: 13px !important; border: 1.5px solid rgba(128,128,128,.11) !important; background: rgba(128,128,128,.04) !important; cursor: pointer !important; transition: all .18s !important; min-height: 66px !important; color: inherit !important; box-shadow: none !important; -webkit-tap-highlight-color: transparent; } #flavor-a11y-wrap .flavor-a11y-step:hover { border-color: rgba(var(--fa11y-rgb,108,92,231),.28) !important; background: rgba(var(--fa11y-rgb,108,92,231),.07) !important; transform: translateY(-1px) !important; } #flavor-a11y-wrap .flavor-a11y-step:active { transform: translateY(0) !important; } #flavor-a11y-wrap .flavor-a11y-step.is-active { border-color: var(--fa11y-color,#6C5CE7) !important; background: rgba(var(--fa11y-rgb,108,92,231),.1) !important; box-shadow: 0 2px 10px rgba(var(--fa11y-rgb,108,92,231),.18) !important; } #flavor-a11y-wrap .flavor-a11y-step-icon { width: 18px !important; height: 18px !important; opacity: .55; transition: all .18s; } #flavor-a11y-wrap .flavor-a11y-step-icon--md { width: 22px !important; height: 22px !important; } #flavor-a11y-wrap .flavor-a11y-step-icon--lg { width: 26px !important; height: 26px !important; } #flavor-a11y-wrap .flavor-a11y-step.is-active .flavor-a11y-step-icon { opacity: 1; color: var(--fa11y-color,#6C5CE7) !important; } #flavor-a11y-wrap .flavor-a11y-step-icon svg { width: 100% !important; height: 100% !important; stroke: currentColor !important; fill: none !important; stroke-width: 2 !important; stroke-linecap: round !important; stroke-linejoin: round !important; } #flavor-a11y-wrap .flavor-a11y-step-label { font-size: 10px !important; font-weight: 600 !important; opacity: .55; line-height: 1 !important; color: inherit !important; background: transparent !important; } #flavor-a11y-wrap .flavor-a11y-step.is-active .flavor-a11y-step-label { opacity: 1; color: var(--fa11y-color,#6C5CE7) !important; } /* Step-card restoration not needed — widget isolated in */ /* ─── Feature grid ───────────────────────── */ #flavor-a11y-wrap .flavor-a11y-features { display: grid !important; grid-template-columns: 1fr 1fr !important; gap: 7px !important; } #flavor-a11y-wrap .flavor-a11y-feat { display: flex !important; flex-direction: column !important; align-items: center !important; justify-content: center !important; gap: 6px !important; padding: 14px 8px !important; border-radius: 13px !important; border: 1.5px solid rgba(128,128,128,.11) !important; background: rgba(128,128,128,.04) !important; cursor: pointer !important; transition: all .18s !important; text-align: center !important; min-height: 74px !important; outline: none !important; box-shadow: none !important; color: inherit !important; -webkit-tap-highlight-color: transparent; } #flavor-a11y-wrap .flavor-a11y-feat:hover { border-color: rgba(var(--fa11y-rgb,108,92,231),.28) !important; background: rgba(var(--fa11y-rgb,108,92,231),.07) !important; transform: translateY(-1px) !important; } #flavor-a11y-wrap .flavor-a11y-feat:active { transform: translateY(0) !important; } #flavor-a11y-wrap .flavor-a11y-feat.is-active { border-color: var(--fa11y-color,#6C5CE7) !important; background: rgba(var(--fa11y-rgb,108,92,231),.1) !important; box-shadow: 0 2px 10px rgba(var(--fa11y-rgb,108,92,231),.18) !important; } #flavor-a11y-wrap .flavor-a11y-feat:focus-visible { outline: 2px solid var(--fa11y-color,#6C5CE7) !important; outline-offset: 2px !important; } #flavor-a11y-wrap .flavor-a11y-feat-icon { width: 22px !important; height: 22px !important; opacity: .55; flex-shrink: 0; color: inherit !important; background: transparent !important; } #flavor-a11y-wrap .flavor-a11y-feat.is-active .flavor-a11y-feat-icon { opacity: 1; color: var(--fa11y-color,#6C5CE7) !important; } #flavor-a11y-wrap .flavor-a11y-feat-icon svg { width: 100% !important; height: 100% !important; stroke: currentColor !important; fill: none !important; stroke-width: 2 !important; stroke-linecap: round !important; stroke-linejoin: round !important; } #flavor-a11y-wrap .flavor-a11y-feat-label { font-size: 11px !important; font-weight: 600 !important; line-height: 1.2 !important; opacity: .6; color: inherit !important; background: transparent !important; } #flavor-a11y-wrap .flavor-a11y-feat.is-active .flavor-a11y-feat-label { opacity: 1; color: var(--fa11y-color,#6C5CE7) !important; } /* Feat-card restoration not needed — widget isolated in */ /* Dark panel adjustments */ #flavor-a11y-wrap .flavor-a11y-panel--dark .flavor-a11y-feat, #flavor-a11y-wrap .flavor-a11y-panel--dark .flavor-a11y-step { border-color: rgba(255,255,255,.07) !important; background: rgba(255,255,255,.03) !important; } #flavor-a11y-wrap .flavor-a11y-panel--dark .flavor-a11y-feat:hover, #flavor-a11y-wrap .flavor-a11y-panel--dark .flavor-a11y-step:hover { background: rgba(var(--fa11y-rgb,108,92,231),.1) !important; }