/* ============================================== YMDigital Accessibility Widget - Frontend CSS v2.0.0 Every colour comes from a CSS variable set in , so the panel can be light or dark and always matches the site's brand colour. !important is used on the widget's own visuals only, to survive themes. ============================================== */ .ymda-sr { position: absolute !important; width: 1px !important; height: 1px !important; padding: 0 !important; margin: -1px !important; overflow: hidden !important; clip: rect(0, 0, 0, 0) !important; white-space: nowrap !important; border: 0 !important; } html.ymda-no-scroll, html.ymda-no-scroll body { overflow: hidden !important; } /* ============================================== 1) Floating toggle button ============================================== */ #ymda-toggle { position: fixed !important; z-index: 999998 !important; background: var(--ymda-header-bg, #1e40af) !important; color: var(--ymda-icon, #ffffff) !important; border: 0 !important; cursor: pointer !important; box-shadow: 0 10px 26px -8px rgba(var(--ymda-primary-rgb, 30, 64, 175), 0.75), 0 2px 6px rgba(0, 0, 0, 0.2) !important; display: flex !important; align-items: center !important; justify-content: center !important; transition: transform .25s ease, box-shadow .25s ease !important; padding: 0 !important; margin: 0 !important; box-sizing: border-box !important; line-height: 1 !important; isolation: isolate !important; } #ymda-toggle:hover { transform: scale(1.07); box-shadow: 0 16px 34px -8px rgba(var(--ymda-primary-rgb, 30, 64, 175), 0.85), 0 4px 10px rgba(0, 0, 0, 0.24) !important; } #ymda-toggle:focus-visible { outline: 3px solid #ffffff !important; outline-offset: 3px !important; box-shadow: 0 0 0 6px rgba(0, 0, 0, 0.45) !important; } #ymda-toggle svg { width: 58% !important; height: 58% !important; fill: var(--ymda-icon, #ffffff) !important; display: block !important; position: relative !important; z-index: 1 !important; } /* A soft ring that breathes once on load, so the button is noticed without being distracting. Removed entirely under reduced-motion. */ #ymda-toggle .ymda-toggle-ring { position: absolute !important; inset: 0 !important; border-radius: inherit !important; border: 2px solid rgba(var(--ymda-primary-rgb, 30, 64, 175), 0.55) !important; animation: ymda-ring 2.6s ease-out 3 !important; pointer-events: none !important; z-index: 0 !important; } @keyframes ymda-ring { 0% { transform: scale(1); opacity: .75; } 70% { transform: scale(1.5); opacity: 0; } 100% { transform: scale(1.5); opacity: 0; } } #ymda-toggle.ymda-pos-bottom-right { bottom: var(--ymda-offset-y, 20px) !important; right: var(--ymda-offset-x, 20px) !important; } #ymda-toggle.ymda-pos-bottom-left { bottom: var(--ymda-offset-y, 20px) !important; left: var(--ymda-offset-x, 20px) !important; } #ymda-toggle.ymda-pos-top-right { top: var(--ymda-offset-y, 20px) !important; right: var(--ymda-offset-x, 20px) !important; } #ymda-toggle.ymda-pos-top-left { top: var(--ymda-offset-y, 20px) !important; left: var(--ymda-offset-x, 20px) !important; } #ymda-toggle.ymda-pos-middle-right { top: calc(50% + var(--ymda-offset-y, 0px)) !important; right: var(--ymda-offset-x, 20px) !important; transform: translateY(-50%); } #ymda-toggle.ymda-pos-middle-left { top: calc(50% + var(--ymda-offset-y, 0px)) !important; left: var(--ymda-offset-x, 20px) !important; transform: translateY(-50%); } #ymda-toggle.ymda-pos-middle-right:hover, #ymda-toggle.ymda-pos-middle-left:hover { transform: translateY(-50%) scale(1.07) !important; } #ymda-toggle.ymda-size-small { width: 44px !important; height: 44px !important; } #ymda-toggle.ymda-size-medium { width: 54px !important; height: 54px !important; } #ymda-toggle.ymda-size-large { width: 66px !important; height: 66px !important; } #ymda-toggle.ymda-shape-circle { border-radius: 50% !important; } #ymda-toggle.ymda-shape-rounded { border-radius: var(--ymda-radius, 14px) !important; } #ymda-toggle.ymda-shape-square { border-radius: 6px !important; } /* ============================================== 2) Backdrop (small screens only) ============================================== */ #ymda-backdrop { position: fixed !important; inset: 0 !important; background: rgba(8, 4, 10, 0.6) !important; backdrop-filter: blur(3px) !important; -webkit-backdrop-filter: blur(3px) !important; z-index: 999998 !important; opacity: 0 !important; visibility: hidden !important; transition: opacity .3s ease, visibility .3s ease !important; border: 0 !important; display: none !important; } @media (max-width: 600px) { #ymda-backdrop { display: block !important; } #ymda-backdrop.ymda-visible { opacity: 1 !important; visibility: visible !important; } } /* ============================================== 3) Panel ============================================== */ #ymda-panel { position: fixed !important; top: 0 !important; width: 22.5rem !important; max-width: 100vw !important; height: 100% !important; height: 100dvh !important; background: var(--ymda-surface, #ffffff) !important; color: var(--ymda-text, #111827) !important; box-shadow: -1rem 0 3rem -1rem rgba(0, 0, 0, 0.35) !important; z-index: 999999 !important; transition: transform .38s cubic-bezier(.22, .8, .3, 1) !important; display: flex !important; flex-direction: column !important; direction: rtl !important; box-sizing: border-box !important; overflow: hidden !important; border: 0 !important; margin: 0 !important; font-size: 14px !important; line-height: 1.5 !important; } #ymda-panel { font-family: inherit; } #ymda-panel.ymda-side-right { right: 0 !important; left: auto !important; transform: translateX(100%); } #ymda-panel.ymda-side-left { left: 0 !important; right: auto !important; box-shadow: 1rem 0 3rem -1rem rgba(0, 0, 0, 0.35) !important; transform: translateX(-100%); } #ymda-panel.ymda-open { transform: translateX(0) !important; } #ymda-panel * { box-sizing: border-box; font-family: inherit; } #ymda-panel[inert] { pointer-events: none; } /* The dark theme gets a soft brand glow in the top corner, matching the way modern site drawers are lit. */ #ymda-panel.ymda-theme-dark { background: radial-gradient(120% 55% at 100% 0%, rgba(var(--ymda-primary-rgb, 30, 64, 175), 0.38) 0%, rgba(0, 0, 0, 0) 60%), var(--ymda-surface, #150716) !important; } /* --- Header --- */ #ymda-panel .ymda-header { background: var(--ymda-header-bg, #1e40af) !important; color: var(--ymda-primary-text, #ffffff) !important; padding: 1rem 1.125rem !important; display: flex !important; align-items: center !important; justify-content: space-between !important; gap: .75rem !important; flex-shrink: 0 !important; border: 0 !important; margin: 0 !important; min-height: 4rem !important; } #ymda-panel .ymda-header-title { display: flex !important; align-items: center !important; gap: .625rem !important; min-width: 0 !important; } #ymda-panel .ymda-header-icon { width: 2.125rem !important; height: 2.125rem !important; flex: 0 0 auto !important; display: grid !important; place-items: center !important; border-radius: 50% !important; background: rgba(255, 255, 255, 0.2) !important; } #ymda-panel .ymda-header-icon svg { width: 1.25rem !important; height: 1.25rem !important; fill: currentColor !important; display: block !important; } #ymda-panel .ymda-header h2 { margin: 0 !important; padding: 0 !important; font-size: 1.0625rem !important; font-weight: 800 !important; color: inherit !important; line-height: 1.3 !important; background: transparent !important; border: 0 !important; text-shadow: none !important; letter-spacing: 0 !important; } #ymda-panel .ymda-close { background: rgba(255, 255, 255, 0.18) !important; border: 0 !important; color: inherit !important; width: 2.125rem !important; height: 2.125rem !important; border-radius: 50% !important; cursor: pointer !important; display: flex !important; align-items: center !important; justify-content: center !important; transition: background .2s, transform .2s !important; padding: 0 !important; margin: 0 !important; flex-shrink: 0 !important; } #ymda-panel .ymda-close svg { width: 1.125rem !important; height: 1.125rem !important; fill: currentColor !important; display: block !important; } #ymda-panel .ymda-close:hover { background: rgba(255, 255, 255, 0.32) !important; transform: rotate(90deg) !important; } #ymda-panel .ymda-close:focus-visible { outline: 2px solid currentColor !important; outline-offset: 2px !important; } /* --- Body --- */ #ymda-panel .ymda-body { flex: 1 1 auto !important; overflow-y: auto !important; overflow-x: hidden !important; padding: 1rem !important; background: transparent !important; overscroll-behavior: contain !important; } #ymda-panel .ymda-body::-webkit-scrollbar { width: 8px; } #ymda-panel .ymda-body::-webkit-scrollbar-thumb { background: var(--ymda-surface-3, #eef0f4); border-radius: 8px; } /* --- Sections --- */ #ymda-panel .ymda-section { margin: 0 0 1.125rem 0 !important; padding: 0 !important; } #ymda-panel .ymda-section h3 { font-size: .75rem !important; font-weight: 800 !important; color: var(--ymda-text-soft, #4b5563) !important; margin: 0 0 .5rem 0 !important; padding: 0 !important; letter-spacing: .08em !important; line-height: 1.3 !important; text-transform: none !important; background: transparent !important; border: 0 !important; } /* --- Quick row --- */ #ymda-panel .ymda-quick-row { display: grid !important; grid-template-columns: repeat(3, minmax(0, 1fr)) !important; gap: .5rem !important; margin: 0 !important; padding: 0 !important; } /* --- Shared button look --- */ #ymda-panel .ymda-quick, #ymda-panel .ymda-btn { background: var(--ymda-surface-2, #f7f8fa) !important; border: 1px solid var(--ymda-line, #e5e7eb) !important; border-radius: var(--ymda-radius, 14px) !important; cursor: pointer !important; color: var(--ymda-text, #111827) !important; transition: border-color .15s ease, background .15s ease, transform .15s ease, box-shadow .15s ease !important; text-align: center !important; display: flex !important; flex-direction: column !important; align-items: center !important; justify-content: center !important; gap: .375rem !important; font-weight: 700 !important; line-height: 1.25 !important; margin: 0 !important; width: 100% !important; min-height: 4.25rem !important; padding: .75rem .375rem !important; font-family: inherit !important; } #ymda-panel .ymda-quick { font-size: .75rem !important; } #ymda-panel .ymda-btn { font-size: .75rem !important; } #ymda-panel .ymda-quick:hover, #ymda-panel .ymda-btn:hover { border-color: rgba(var(--ymda-primary-rgb, 30, 64, 175), 0.65) !important; background: var(--ymda-surface-3, #eef0f4) !important; transform: translateY(-1px) !important; } #ymda-panel .ymda-quick:focus-visible, #ymda-panel .ymda-btn:focus-visible { outline: 3px solid var(--ymda-primary, #1e40af) !important; outline-offset: 2px !important; } #ymda-panel .ymda-quick.ymda-active, #ymda-panel .ymda-btn.ymda-active { background: var(--ymda-header-bg, #1e40af) !important; color: var(--ymda-primary-text, #ffffff) !important; border-color: transparent !important; box-shadow: 0 .5rem 1.125rem -.5rem rgba(var(--ymda-primary-rgb, 30, 64, 175), 0.9) !important; } #ymda-panel .ymda-quick-icon, #ymda-panel .ymda-btn-icon { display: grid !important; place-items: center !important; width: 1.875rem !important; height: 1.875rem !important; border-radius: 50% !important; background: rgba(var(--ymda-primary-rgb, 30, 64, 175), 0.12) !important; color: var(--ymda-primary, #1e40af) !important; flex: 0 0 auto !important; transition: background .15s ease, color .15s ease !important; } #ymda-panel.ymda-theme-dark .ymda-quick-icon, #ymda-panel.ymda-theme-dark .ymda-btn-icon { background: rgba(255, 255, 255, 0.1) !important; color: var(--ymda-link, #ffffff) !important; } #ymda-panel .ymda-quick.ymda-active .ymda-quick-icon, #ymda-panel .ymda-btn.ymda-active .ymda-btn-icon { background: rgba(255, 255, 255, 0.24) !important; color: inherit !important; } #ymda-panel .ymda-quick-icon svg, #ymda-panel .ymda-btn-icon svg { width: 1.0625rem !important; height: 1.0625rem !important; fill: currentColor !important; display: block !important; } #ymda-panel .ymda-quick-text, #ymda-panel .ymda-btn-text { color: inherit !important; display: block !important; } /* --- 2-col grid --- */ #ymda-panel .ymda-grid-2 { display: grid !important; grid-template-columns: repeat(2, minmax(0, 1fr)) !important; gap: .5rem !important; margin: 0 !important; padding: 0 !important; } /* --- Counters --- */ #ymda-panel .ymda-counter { display: flex !important; align-items: center !important; background: var(--ymda-surface-2, #f7f8fa) !important; border: 1px solid var(--ymda-line, #e5e7eb) !important; border-radius: var(--ymda-radius, 14px) !important; padding: .25rem !important; gap: .25rem !important; margin: 0 !important; } #ymda-panel .ymda-counter-btn { flex: 0 0 auto !important; width: 2.25rem !important; height: 2.25rem !important; border: 0 !important; background: var(--ymda-surface, #ffffff) !important; border-radius: calc(var(--ymda-radius, 14px) - 6px) !important; cursor: pointer !important; font-size: 1.125rem !important; font-weight: 800 !important; color: var(--ymda-primary, #1e40af) !important; display: flex !important; align-items: center !important; justify-content: center !important; padding: 0 !important; margin: 0 !important; transition: background .15s, color .15s !important; font-family: inherit !important; line-height: 1 !important; } #ymda-panel.ymda-theme-dark .ymda-counter-btn { background: rgba(255, 255, 255, 0.12) !important; color: var(--ymda-text, #fdf6fa) !important; } #ymda-panel .ymda-counter-btn:hover { background: var(--ymda-header-bg, #1e40af) !important; color: var(--ymda-primary-text, #ffffff) !important; } #ymda-panel .ymda-counter-btn:focus-visible { outline: 2px solid var(--ymda-primary, #1e40af) !important; outline-offset: 2px !important; } #ymda-panel .ymda-counter-label { flex: 1 1 auto !important; text-align: center !important; font-size: .8125rem !important; font-weight: 700 !important; color: var(--ymda-text, #111827) !important; margin: 0 !important; padding: 0 !important; background: transparent !important; border: 0 !important; } /* --- Quick navigation --- */ #ymda-panel .ymda-nav-list { display: flex !important; flex-direction: column !important; gap: .375rem !important; } #ymda-panel .ymda-nav-link { display: flex !important; align-items: center !important; justify-content: space-between !important; gap: .5rem !important; width: 100% !important; padding: .6875rem .875rem !important; border-radius: var(--ymda-radius, 14px) !important; border: 1px solid var(--ymda-line, #e5e7eb) !important; background: var(--ymda-surface-2, #f7f8fa) !important; color: var(--ymda-text, #111827) !important; font-size: .8125rem !important; font-weight: 700 !important; cursor: pointer !important; text-align: start !important; font-family: inherit !important; transition: border-color .15s ease, background .15s ease !important; } #ymda-panel .ymda-nav-link:hover { border-color: rgba(var(--ymda-primary-rgb, 30, 64, 175), 0.65) !important; background: var(--ymda-surface-3, #eef0f4) !important; } #ymda-panel .ymda-nav-link:focus-visible { outline: 3px solid var(--ymda-primary, #1e40af) !important; outline-offset: 2px !important; } #ymda-panel .ymda-nav-arrow { width: .5rem !important; height: .5rem !important; flex: 0 0 auto !important; border-left: 2px solid currentColor !important; border-bottom: 2px solid currentColor !important; transform: rotate(45deg) !important; opacity: .5 !important; } /* --- Reset --- */ #ymda-panel .ymda-reset-row { margin: 1rem 0 .5rem 0 !important; padding: 0 !important; } #ymda-panel .ymda-reset { width: 100% !important; background: var(--ymda-danger-bg, #ffffff) !important; border: 1px solid var(--ymda-danger, #991b1b) !important; color: var(--ymda-danger, #991b1b) !important; padding: .6875rem !important; border-radius: var(--ymda-radius, 14px) !important; cursor: pointer !important; font-weight: 800 !important; font-size: .875rem !important; transition: background .15s, color .15s !important; margin: 0 !important; font-family: inherit !important; line-height: 1.3 !important; } #ymda-panel .ymda-reset:hover { background: var(--ymda-danger, #991b1b) !important; color: #ffffff !important; } #ymda-panel .ymda-reset:focus-visible { outline: 3px solid var(--ymda-danger, #991b1b) !important; outline-offset: 2px !important; } /* --- Footer --- */ #ymda-panel .ymda-footer { flex: 0 0 auto !important; padding: .875rem 1rem calc(.875rem + env(safe-area-inset-bottom, 0px)) !important; background: var(--ymda-foot-bg, #f9fafb) !important; border-top: 1px solid var(--ymda-line, #e5e7eb) !important; text-align: center !important; font-size: .75rem !important; color: var(--ymda-text-soft, #374151) !important; margin: 0 !important; line-height: 1.6 !important; } #ymda-panel .ymda-footer a { color: var(--ymda-link, #1d4ed8) !important; text-decoration: underline !important; text-underline-offset: 2px !important; font-weight: 700 !important; background: transparent !important; } #ymda-panel .ymda-footer a:hover { text-decoration-thickness: 2px !important; } #ymda-panel .ymda-footer a:focus-visible { outline: 2px solid var(--ymda-link, #1d4ed8) !important; outline-offset: 2px !important; } #ymda-panel .ymda-statement-link { display: block !important; margin: 0 0 .5rem 0 !important; font-size: .8125rem !important; } #ymda-panel .ymda-contact { display: flex !important; flex-direction: column !important; gap: .125rem !important; padding: .5rem 0 !important; margin: 0 0 .5rem !important; border-top: 1px solid var(--ymda-line, #e5e7eb) !important; border-bottom: 1px solid var(--ymda-line, #e5e7eb) !important; } #ymda-panel .ymda-contact-name { color: var(--ymda-text-soft, #374151) !important; } #ymda-panel .ymda-credit-line { display: block !important; color: var(--ymda-text-soft, #374151) !important; } /* ============================================== 4) Reading helpers ============================================== */ #ymda-reading-guide { position: fixed; left: 0; top: 0; width: 100vw; height: 36px; background: rgba(0, 0, 0, 0.55); border-top: 2px solid #ffd700; border-bottom: 2px solid #ffd700; pointer-events: none; z-index: 999997; display: none; will-change: transform; } html.ymda-reading-guide-on #ymda-reading-guide { display: block; } #ymda-reading-mask-top, #ymda-reading-mask-bottom { position: fixed; left: 0; width: 100vw; background: rgba(0, 0, 0, 0.72); pointer-events: none; z-index: 999997; display: none; } #ymda-reading-mask-top { top: 0; } #ymda-reading-mask-bottom { bottom: 0; } html.ymda-reading-mask-on #ymda-reading-mask-top, html.ymda-reading-mask-on #ymda-reading-mask-bottom { display: block; } /* ============================================== 5) Accessibility modes ============================================== Filters are applied to body's direct CHILDREN, never to itself: a filtered becomes the containing block for position:fixed elements, which would drag the panel out of the viewport. ============================================== */ html.ymda-grayscale body > *:not(#ymda-panel):not(#ymda-toggle):not(#ymda-backdrop):not(#ymda-reading-guide):not(#ymda-reading-mask-top):not(#ymda-reading-mask-bottom) { filter: grayscale(100%) !important; -webkit-filter: grayscale(100%) !important; } html.ymda-low-saturation body > *:not(#ymda-panel):not(#ymda-toggle):not(#ymda-backdrop):not(#ymda-reading-guide):not(#ymda-reading-mask-top):not(#ymda-reading-mask-bottom) { filter: saturate(45%) !important; -webkit-filter: saturate(45%) !important; } html.ymda-high-contrast body :not(#ymda-panel, #ymda-panel *, #ymda-toggle, #ymda-toggle *, #ymda-backdrop, #ymda-reading-guide, #ymda-reading-mask-top, #ymda-reading-mask-bottom) { background-color: #000 !important; color: #ffff00 !important; border-color: #ffff00 !important; text-shadow: none !important; box-shadow: none !important; } html.ymda-high-contrast body { background: #000 !important; color: #ffff00 !important; } html.ymda-high-contrast body a:not(#ymda-panel a):not(#ymda-toggle) { color: #00ffff !important; } html.ymda-high-contrast body img:not(#ymda-panel img), html.ymda-high-contrast body video:not(#ymda-panel video) { filter: brightness(.85) contrast(1.15); } html.ymda-negative-contrast body > *:not(#ymda-panel):not(#ymda-toggle):not(#ymda-backdrop):not(#ymda-reading-guide):not(#ymda-reading-mask-top):not(#ymda-reading-mask-bottom) { filter: invert(100%) hue-rotate(180deg) !important; -webkit-filter: invert(100%) hue-rotate(180deg) !important; } html.ymda-negative-contrast body { background-color: #000 !important; } html.ymda-negative-contrast body img:not(#ymda-panel img):not(#ymda-toggle img), html.ymda-negative-contrast body video:not(#ymda-panel video):not(#ymda-toggle video), html.ymda-negative-contrast body iframe:not(#ymda-panel iframe):not(#ymda-toggle iframe) { filter: invert(100%) hue-rotate(180deg); } html.ymda-light-bg body :not(#ymda-panel, #ymda-panel *, #ymda-toggle, #ymda-toggle *, #ymda-backdrop, #ymda-reading-guide, #ymda-reading-mask-top, #ymda-reading-mask-bottom) { background-color: #fff !important; background-image: none !important; color: #000 !important; border-color: #666 !important; text-shadow: none !important; } html.ymda-light-bg body { background: #fff !important; color: #000 !important; } html.ymda-light-bg body a:not(#ymda-panel a):not(#ymda-toggle) { color: #0033a0 !important; } html.ymda-dark-bg body :not(#ymda-panel, #ymda-panel *, #ymda-toggle, #ymda-toggle *, #ymda-backdrop, #ymda-reading-guide, #ymda-reading-mask-top, #ymda-reading-mask-bottom) { background-color: #1a1a1a !important; background-image: none !important; color: #f5f5f5 !important; border-color: #666 !important; text-shadow: none !important; } html.ymda-dark-bg body { background: #1a1a1a !important; color: #f5f5f5 !important; } html.ymda-dark-bg body a:not(#ymda-panel a):not(#ymda-toggle) { color: #80b3ff !important; } html.ymda-underline-links body a:not(#ymda-panel a):not(#ymda-toggle) { text-decoration: underline !important; } html.ymda-highlight-links body a:not(#ymda-panel a):not(#ymda-toggle) { background-color: #ffff00 !important; color: #000 !important; outline: 2px solid #000 !important; padding: 0 3px !important; } html.ymda-readable-font body :not(#ymda-panel, #ymda-panel *, #ymda-toggle, #ymda-toggle *) { font-family: Arial, "Segoe UI", Tahoma, Verdana, sans-serif !important; letter-spacing: .5px !important; line-height: 1.7 !important; font-weight: normal !important; } /* Verdana and Tahoma have wide, distinctly shaped letterforms, which is the property that actually helps most readers with dyslexia. */ html.ymda-dyslexia-font body :not(#ymda-panel, #ymda-panel *, #ymda-toggle, #ymda-toggle *) { font-family: "Comic Sans MS", Verdana, Tahoma, Arial, sans-serif !important; letter-spacing: 1px !important; word-spacing: 3px !important; line-height: 1.9 !important; font-weight: normal !important; } html.ymda-hide-images body img:not(#ymda-panel img):not(#ymda-toggle img), html.ymda-hide-images body picture:not(#ymda-panel picture), html.ymda-hide-images body svg:not(#ymda-panel svg):not(#ymda-toggle svg), html.ymda-hide-images body video:not(#ymda-panel video) { visibility: hidden !important; } html.ymda-hide-images body *:not(#ymda-panel):not(#ymda-panel *):not(#ymda-toggle):not(#ymda-toggle *) { background-image: none !important; } html.ymda-big-cursor, html.ymda-big-cursor body, html.ymda-big-cursor body * { cursor: url("data:image/svg+xml;utf8,"), auto !important; } html.ymda-big-cursor body a, html.ymda-big-cursor body button, html.ymda-big-cursor body [role="button"] { cursor: url("data:image/svg+xml;utf8,"), pointer !important; } html.ymda-stop-animations, html.ymda-stop-animations *, html.ymda-stop-animations *::before, html.ymda-stop-animations *::after { animation-duration: .001ms !important; animation-delay: 0s !important; animation-iteration-count: 1 !important; transition-duration: .001ms !important; transition-delay: 0s !important; scroll-behavior: auto !important; } html.ymda-stop-animations body img[src*=".gif"]:not(#ymda-panel img) { visibility: hidden !important; } html.ymda-focus-highlight body *:focus { outline: 4px solid #ffd700 !important; outline-offset: 2px !important; background-color: rgba(255, 215, 0, .15) !important; } /* ============================================== 6) Text scaling ============================================== */ html.ymda-text-scaled { font-size: calc(100% * var(--ymda-text-scale, 1)) !important; } html.ymda-line-scaled body p:not(#ymda-panel p), html.ymda-line-scaled body li:not(#ymda-panel li), html.ymda-line-scaled body span:not(#ymda-panel span), html.ymda-line-scaled body a:not(#ymda-panel a), html.ymda-line-scaled body td:not(#ymda-panel td), html.ymda-line-scaled body label:not(#ymda-panel label), html.ymda-line-scaled body blockquote:not(#ymda-panel blockquote) { line-height: var(--ymda-line-height, 1.5) !important; } html.ymda-letter-scaled body :not(#ymda-panel, #ymda-panel *, #ymda-toggle, #ymda-toggle *) { letter-spacing: var(--ymda-letter-spacing, normal) !important; } /* ============================================== 7) Small screens ============================================== */ @media (max-width: 600px) { #ymda-panel { width: min(21rem, 92vw) !important; border-start-start-radius: 0 !important; } #ymda-panel .ymda-quick, #ymda-panel .ymda-btn { min-height: 4rem !important; } } @media (max-width: 360px) { #ymda-panel .ymda-quick-row { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; } } /* ============================================== 8) Reduced motion ============================================== */ @media (prefers-reduced-motion: reduce) { #ymda-panel, #ymda-toggle, #ymda-backdrop, #ymda-panel .ymda-close { transition: none !important; } #ymda-toggle .ymda-toggle-ring { animation: none !important; display: none !important; } }