/* Overlay styles (WCAG-friendly) */ :root { --yjar-brand: #0ea5e9; } #yjar-acc-toggle { position: fixed; bottom: 1rem; right: 1rem; z-index: 999999; width: 48px; height: 48px; border-radius: 999px; background: var(--yjar-brand); color: #fff; border: none; box-shadow: 0 6px 12px rgba(0,0,0,.15); cursor: pointer; } #yjar-acc-toggle.yjar-acc-left { right: auto; left: 1rem; } #yjar-acc-panel[hidden] { display:none; } #yjar-acc-panel { position: fixed; bottom: 5rem; right: 1rem; z-index: 999999; max-width: 360px; width: 95vw; } .yjar-acc-panel-inner { background: #fff; color: #111; border-radius: 16px; box-shadow: 0 10px 24px rgba(0,0,0,.15); border: 1px solid #e5e7eb; overflow: hidden; } .yjar-acc-header { display: flex; align-items: center; justify-content: space-between; background: var(--yjar-brand); color: #fff; padding: .75rem 1rem; } .yjar-acc-controls { padding: .75rem; } .yjar-group { display: grid; grid-template-columns: repeat(4, 1fr); gap: .5rem; } .yjar-group button { padding: .5rem; border: 1px solid #e5e7eb; background: #fff; cursor: pointer; border-radius: .5rem; } .yjar-actions { margin-top: .5rem; text-align: right; } .yjar-reset { background: transparent; border: 1px solid var(--yjar-brand); color: var(--yjar-brand); border-radius: .5rem; padding: .5rem .75rem; } .yjar-brand { margin:.5rem 0 0; font-size: .8rem; color:#6b7280; } /* Accessibility classes applied to */ html.yjar-contrast { filter: contrast(1.25); } html.yjar-grayscale { filter: grayscale(1); } html.yjar-underline a { text-decoration: underline !important; } html.yjar-highlight a { outline: 2px solid var(--yjar-brand); outline-offset: 2px; } html.yjar-cursor * { cursor: default !important; } html.yjar-textspacing { letter-spacing: .02em; word-spacing: .06em; } html.yjar-lineheight { line-height: 1.8; } html.yjar-pause * { animation: none !important; transition: none !important; } html.yjar-dyslexia { font-family: Arial, Verdana, Tahoma, sans-serif !important; } html.yjar-hideimg img { visibility: hidden !important; } html.yjar-focus *:focus { outline: 3px solid var(--yjar-brand) !important; outline-offset: 2px !important; } /* Reading mask */ #yjar-reading-mask { position: fixed; left:0; right:0; height: 60px; top: 40%; pointer-events:none; z-index:999998; box-shadow: 0 -500px 0 0 rgba(0,0,0,.6), 0 500px 0 0 rgba(0,0,0,.6); display:none; } html.yjar-mask #yjar-reading-mask { display:block; } /* Reduce motion preference respected */ @media (prefers-reduced-motion: reduce) { * { animation: none !important; transition: none !important; } }