/*! * Dr. Access — accessibility widget styles * by Dr. Digital · https://dr-digital1.com * * Structural rules on the widget shell carry !important on purpose: the * widget has to survive arbitrary WordPress themes that reset buttons, * SVGs and backgrounds globally. */ /* ================================================================== * * Page-level effects. Applied to ; the widget lives under * so it is never affected by them. * ================================================================== */ html.dra-invert-colors body { filter: invert(1) hue-rotate(180deg); background: #fff; } html.dra-invert-colors body img, html.dra-invert-colors body video, html.dra-invert-colors body iframe { filter: invert(1) hue-rotate(180deg); } html.dra-monochrome body { filter: grayscale(1); } html.dra-saturation body { filter: saturate(0.5); } html.dra-sepia body { filter: sepia(0.85); } html.dra-high-contrast body { filter: contrast(1.45); } html.dra-low-contrast body { filter: contrast(0.75); } html.dra-black-yellow body, html.dra-black-yellow body * { background-color: #000 !important; color: #ff0 !important; border-color: #ff0 !important; } html.dra-black-yellow body a, html.dra-black-yellow body a * { color: #4df !important; } html.dra-black-yellow body img, html.dra-black-yellow body video { opacity: .85; } html.dra-highlight-links body a { text-decoration: underline !important; text-underline-offset: 3px !important; outline: 2px solid #ffbf00 !important; outline-offset: 2px !important; background: rgba(255, 191, 0, .18) !important; } html.dra-highlight-headings body :is(h1, h2, h3, h4, h5, h6) { outline: 2px dashed #00a3ff !important; outline-offset: 3px !important; background: rgba(0, 163, 255, .08) !important; } html.dra-readable-font body, html.dra-readable-font body * { font-family: Verdana, Tahoma, "Segoe UI", Arial, "Noto Sans Hebrew", "Noto Sans Arabic", sans-serif !important; letter-spacing: .3px; } html.dra-text-align body :is(p, li, td, dd, blockquote) { text-align: start !important; } html.dra-text-spacing-1 body * { letter-spacing: .06em !important; word-spacing: .1em !important; } html.dra-text-spacing-2 body * { letter-spacing: .12em !important; word-spacing: .18em !important; } html.dra-text-spacing-3 body * { letter-spacing: .2em !important; word-spacing: .3em !important; } html.dra-line-height-1 body :is(p, li, td, dd, div, span) { line-height: 1.7 !important; } html.dra-line-height-2 body :is(p, li, td, dd, div, span) { line-height: 2.1 !important; } html.dra-line-height-3 body :is(p, li, td, dd, div, span) { line-height: 2.6 !important; } html.dra-stop-animations body *, html.dra-stop-animations body *::before, html.dra-stop-animations body *::after { animation: none !important; transition: none !important; scroll-behavior: auto !important; } html.dra-hide-images body :is(img, picture, video) { visibility: hidden !important; } html.dra-hide-images body [style*="background-image"] { background-image: none !important; } html.dra-keyboard-nav body :is(a, button, input, select, textarea, [tabindex]):focus, html.dra-keyboard-nav body :is(a, button, input, select, textarea, [tabindex]):focus-visible { outline: 4px solid #ff9000 !important; outline-offset: 3px !important; box-shadow: 0 0 0 2px #000 !important; } html.dra-big-cursor body, html.dra-big-cursor body * { cursor: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='48' height='48' viewBox='0 0 24 24'%3E%3Cpath d='M5 2l14 8-6 1.6L10.6 18z' fill='%23fff' stroke='%23000' stroke-width='1.4'/%3E%3C/svg%3E") 4 2, auto !important; } html.dra-black-cursor body, html.dra-black-cursor body * { cursor: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='40' height='40' viewBox='0 0 24 24'%3E%3Cpath d='M5 2l14 8-6 1.6L10.6 18z' fill='%23000' stroke='%23fff' stroke-width='1.2'/%3E%3C/svg%3E") 4 2, auto !important; } .dra-img-desc { display: block; margin: .35em 0 .8em; padding: .45em .7em; background: #002f14; color: #fff; font-size: 14px; line-height: 1.5; border-inline-start: 4px solid #ff9000; border-radius: 4px; } .dra-footer-link { text-align: center; padding: 12px 16px; font-size: 14px; } /* ================================================================== * * Widget shell * ================================================================== */ .dra-root { --dra-accent: #005123; --dra-icon-bg: #005123; --dra-icon-size: 56px; --dra-icon-radius: 50%; --dra-offset-x: 20px; --dra-offset-y: 20px; --dra-offset-y-mobile: 70px; --dra-orange: #ff9000; --dra-text: #12211a; --dra-muted: #5b6b63; --dra-surface: #fff; --dra-card: #fff; --dra-bg: #f4f7f5; --dra-border: #dfe6e2; position: fixed !important; z-index: 2147483000 !important; margin: 0 !important; padding: 0 !important; font-family: system-ui, -apple-system, "Segoe UI", Roboto, "Noto Sans Hebrew", "Noto Sans Arabic", Arial, sans-serif !important; font-size: 16px !important; line-height: 1.5 !important; color: var(--dra-text); bottom: var(--dra-offset-y); pointer-events: none; box-sizing: border-box; } .dra-root *, .dra-root *::before, .dra-root *::after { box-sizing: border-box; } .dra-root > * { pointer-events: auto; } .dra-side-right { right: var(--dra-offset-x); left: auto; } .dra-side-left { left: var(--dra-offset-x); right: auto; } .dra-vert-top { top: var(--dra-offset-y); bottom: auto; } .dra-vert-middle { top: 50%; bottom: auto; transform: translateY(-50%); } @media (max-width: 782px) { .dra-root { bottom: var(--dra-offset-y-mobile); } .dra-vert-top { top: var(--dra-offset-y); bottom: auto; } } /* --- Toggle button. Hardened against theme resets. ----------------- */ .dra-root .dra-toggle { display: flex !important; align-items: center !important; justify-content: center !important; width: var(--dra-icon-size) !important; height: var(--dra-icon-size) !important; min-width: 0 !important; min-height: 0 !important; max-width: none !important; margin: 0 !important; padding: 0 !important; border: 3px solid #fff !important; border-radius: var(--dra-icon-radius) !important; background: var(--dra-icon-bg) !important; background-image: none !important; color: #fff !important; font-size: 0 !important; line-height: 0 !important; text-transform: none !important; cursor: pointer !important; box-shadow: 0 4px 16px rgba(0, 0, 0, .3) !important; transition: transform .18s ease, box-shadow .18s ease; appearance: none; -webkit-appearance: none; } .dra-root .dra-toggle:hover { transform: scale(1.06); box-shadow: 0 6px 22px rgba(0, 0, 0, .36) !important; } .dra-root .dra-toggle:focus-visible { outline: 4px solid var(--dra-orange) !important; outline-offset: 3px !important; } .dra-root .dra-toggle svg { display: block !important; width: 58% !important; height: 58% !important; max-width: none !important; max-height: none !important; color: #fff !important; vertical-align: middle; } .dra-root .dra-toggle svg[fill="currentColor"], .dra-root .dra-toggle svg * { fill: currentColor; } .dra-root .dra-toggle img { width: 62% !important; height: 62% !important; object-fit: contain; } @media (prefers-reduced-motion: reduce) { .dra-root .dra-toggle { transition: none; } .dra-root .dra-toggle:hover { transform: none; } } /* --- Panel ---------------------------------------------------------- */ .dra-root .dra-panel { /* Height is bounded by the space actually left between the button and the edge of the viewport — never a flat vh value, which overflows and clips the panel on short screens. */ --dra-gap: 14px; --dra-room: calc(100vh - var(--dra-offset-y) - var(--dra-icon-size) - var(--dra-gap) - 20px); position: absolute !important; bottom: calc(var(--dra-icon-size) + var(--dra-gap)); width: min(92vw, 372px) !important; max-height: min(700px, var(--dra-room)); margin: 0 !important; padding: 0 !important; overflow-y: auto; overscroll-behavior: contain; background: var(--dra-bg) !important; border: 1px solid var(--dra-border) !important; border-radius: 18px !important; box-shadow: 0 18px 52px rgba(0, 0, 0, .3) !important; -webkit-overflow-scrolling: touch; } /* Dynamic viewport units where supported — mobile browser chrome moves. */ @supports (height: 100dvh) { .dra-root .dra-panel { --dra-room: calc(100dvh - var(--dra-offset-y) - var(--dra-icon-size) - var(--dra-gap) - 20px); } } .dra-side-right .dra-panel { right: 0; left: auto; } .dra-side-left .dra-panel { left: 0; right: auto; } .dra-vert-top .dra-panel { top: calc(var(--dra-icon-size) + var(--dra-gap)); bottom: auto; } .dra-vert-middle .dra-panel { top: 50%; bottom: auto; transform: translateY(-50%); max-height: min(700px, calc(100vh - 40px)); } @supports (height: 100dvh) { .dra-vert-middle .dra-panel { max-height: min(700px, calc(100dvh - 40px)); } } /* Narrow screens: anchor to the viewport as a sheet instead of floating off the button, so it can never be pushed past the top edge. */ @media (max-width: 782px) { .dra-root .dra-panel { position: fixed !important; width: min(calc(100vw - 24px), 400px) !important; bottom: calc(var(--dra-offset-y-mobile) + var(--dra-icon-size) + 12px); top: auto; transform: none; max-height: calc(100vh - var(--dra-offset-y-mobile) - var(--dra-icon-size) - 34px); } .dra-side-right .dra-panel { right: 12px; left: auto; } .dra-side-left .dra-panel { left: 12px; right: auto; } @supports (height: 100dvh) { .dra-root .dra-panel { max-height: calc(100dvh - var(--dra-offset-y-mobile) - var(--dra-icon-size) - 34px); } } .dra-vert-top .dra-panel, .dra-vert-middle .dra-panel { top: calc(var(--dra-offset-y) + var(--dra-icon-size) + 12px); bottom: 12px; max-height: none; } } .dra-root .dra-panel[hidden] { display: none !important; } .dra-root .dra-panel__head { display: flex !important; align-items: center; gap: 10px; padding: 14px 16px !important; margin: 0 !important; background: var(--dra-accent) !important; color: #fff !important; position: sticky; top: 0; z-index: 3; } .dra-root .dra-panel__title { flex: 1; margin: 0 !important; padding: 0 !important; font-size: 17px !important; font-weight: 700 !important; line-height: 1.3 !important; color: #fff !important; text-align: start; } .dra-root .dra-close { display: flex !important; align-items: center; justify-content: center; width: 32px !important; height: 32px !important; min-width: 0 !important; flex: none; padding: 0 !important; margin: 0 !important; border: 0 !important; border-radius: 9px !important; background: rgba(255, 255, 255, .16) !important; color: #fff !important; cursor: pointer !important; appearance: none; } .dra-root .dra-close svg { width: 18px !important; height: 18px !important; display: block !important; } .dra-root .dra-close:hover { background: rgba(255, 255, 255, .3) !important; } .dra-root .dra-close:focus-visible { outline: 3px solid var(--dra-orange) !important; outline-offset: 2px !important; } .dra-root .dra-panel__body { padding: 14px !important; margin: 0 !important; } .dra-root .dra-section__title { margin: 4px 2px 8px !important; padding: 0 !important; font-size: 12.5px !important; font-weight: 700 !important; line-height: 1.4 !important; color: var(--dra-muted) !important; text-align: start; text-transform: none !important; } .dra-root .dra-grid + .dra-section__title { margin-top: 16px !important; } /* --- Font size stepper ---------------------------------------------- */ .dra-root .dra-stepper { padding: 12px 14px 14px !important; margin: 0 0 10px !important; background: var(--dra-card); border: 1px solid var(--dra-border); border-radius: 14px; } .dra-root .dra-stepper__head { display: flex !important; align-items: center; justify-content: center; gap: 8px; margin-bottom: 10px; color: var(--dra-accent); } .dra-root .dra-stepper__icon { display: flex; color: var(--dra-text); } .dra-root .dra-stepper__icon svg { width: 24px !important; height: 24px !important; display: block !important; } .dra-root .dra-stepper__label { font-size: 13.5px; font-weight: 700; color: var(--dra-accent); } .dra-root .dra-stepper__controls { display: flex !important; align-items: center; justify-content: center; gap: 14px; } .dra-root .dra-step { display: flex !important; align-items: center; justify-content: center; width: 42px !important; height: 42px !important; min-width: 0 !important; flex: none; padding: 0 !important; margin: 0 !important; border: 0 !important; border-radius: 50% !important; background: var(--dra-accent) !important; color: #fff !important; cursor: pointer !important; appearance: none; } .dra-root .dra-step svg { width: 20px !important; height: 20px !important; display: block !important; } .dra-root .dra-step:hover { background: #00401c !important; } .dra-root .dra-step:focus-visible { outline: 3px solid var(--dra-orange) !important; outline-offset: 2px !important; } .dra-root .dra-stepper__value { min-width: 66px; padding: 7px 6px; background: var(--dra-bg); border-radius: 9px; font-size: 14px; font-weight: 700; text-align: center; color: var(--dra-text); } /* --- Tool cards ------------------------------------------------------ */ .dra-root .dra-grid { display: grid !important; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 9px; margin: 0 !important; padding: 0 !important; list-style: none; } .dra-root .dra-tool { position: relative; display: flex !important; flex-direction: column; align-items: center; justify-content: center; gap: 7px; min-height: 84px !important; width: 100% !important; padding: 12px 8px !important; margin: 0 !important; border: 1px solid var(--dra-border) !important; border-radius: 14px !important; background: var(--dra-card) !important; background-image: none !important; color: var(--dra-accent) !important; font-family: inherit !important; font-size: 12.5px !important; font-weight: 600 !important; line-height: 1.3 !important; text-align: center !important; text-transform: none !important; cursor: pointer !important; transition: border-color .15s ease, background .15s ease, color .15s ease; appearance: none; } .dra-root .dra-tool__icon { display: flex !important; align-items: center; justify-content: center; color: var(--dra-text); } .dra-root .dra-tool__icon svg { width: 26px !important; height: 26px !important; display: block !important; } .dra-root .dra-tool__label { display: block; color: var(--dra-accent); } .dra-root .dra-tool:hover { border-color: var(--dra-accent) !important; background: #f0f6f2 !important; } .dra-root .dra-tool.is-on { background: var(--dra-accent) !important; border-color: var(--dra-accent) !important; color: #fff !important; } .dra-root .dra-tool.is-on .dra-tool__icon, .dra-root .dra-tool.is-on .dra-tool__label { color: #fff !important; } .dra-root .dra-tool:focus-visible { outline: 3px solid var(--dra-orange) !important; outline-offset: 2px !important; } .dra-root .dra-tool__level { position: absolute; top: -7px; inset-inline-end: -7px; min-width: 21px; height: 21px; display: flex !important; align-items: center; justify-content: center; padding: 0 5px; border-radius: 999px; background: var(--dra-orange); color: #1a1a1a; font-size: 11px; font-weight: 800; } @media (prefers-reduced-motion: reduce) { .dra-root .dra-tool { transition: none; } } /* --- Footer ---------------------------------------------------------- */ .dra-root .dra-footer { padding: 12px 14px 14px !important; margin: 0 !important; border-top: 1px solid var(--dra-border); background: var(--dra-card); border-radius: 0 0 17px 17px; text-align: center; } .dra-root .dra-reset { display: flex !important; align-items: center; justify-content: center; gap: 8px; width: 100% !important; min-height: 46px !important; padding: 0 14px !important; margin: 0 0 12px !important; border: 1px solid var(--dra-border) !important; border-radius: 12px !important; background: var(--dra-bg) !important; color: var(--dra-text) !important; font-family: inherit !important; font-size: 14px !important; font-weight: 700 !important; text-transform: none !important; cursor: pointer !important; appearance: none; } .dra-root .dra-reset svg { width: 18px !important; height: 18px !important; display: block !important; } .dra-root .dra-reset:hover { border-color: var(--dra-accent) !important; } .dra-root .dra-reset:focus-visible { outline: 3px solid var(--dra-orange) !important; outline-offset: 2px !important; } .dra-root .dra-footer__links { display: flex !important; flex-wrap: wrap; align-items: center; justify-content: center; gap: 6px 14px; margin-bottom: 12px; } .dra-root .dra-link { padding: 0 !important; margin: 0 !important; border: 0 !important; background: none !important; color: var(--dra-accent) !important; font-family: inherit !important; font-size: 13px !important; font-weight: 700 !important; text-decoration: underline !important; cursor: pointer !important; appearance: none; } .dra-root .dra-link:focus-visible { outline: 3px solid var(--dra-orange) !important; outline-offset: 2px !important; } /* Language pills — short codes, bottom of the panel. */ .dra-root .dra-langs { display: flex !important; justify-content: center; gap: 6px; margin: 0 0 12px !important; padding: 4px !important; background: var(--dra-bg); border-radius: 999px; width: fit-content; margin-inline: auto !important; } .dra-root .dra-lang { min-width: 46px; padding: 7px 12px !important; margin: 0 !important; border: 0 !important; border-radius: 999px !important; background: transparent !important; color: var(--dra-muted) !important; font-family: inherit !important; font-size: 13px !important; font-weight: 700 !important; line-height: 1.2 !important; text-transform: none !important; cursor: pointer !important; appearance: none; } .dra-root .dra-lang.is-on { background: var(--dra-accent) !important; color: #fff !important; } .dra-root .dra-lang:focus-visible { outline: 3px solid var(--dra-orange) !important; outline-offset: 2px !important; } .dra-root .dra-footer__compliance, .dra-root .dra-footer__credit { margin: 0 0 4px !important; padding: 0 !important; font-size: 11.5px !important; line-height: 1.55 !important; color: #55645c !important; } .dra-root .dra-footer__credit { margin-bottom: 0 !important; } .dra-root .dra-footer__credit a { color: var(--dra-accent) !important; font-weight: 700; text-decoration: none !important; } .dra-root .dra-footer__credit a:hover { text-decoration: underline !important; } /* --- Report form ----------------------------------------------------- */ .dra-root .dra-form h3 { margin: 2px 0 6px !important; font-size: 16px !important; color: var(--dra-accent) !important; } .dra-root .dra-form__intro { margin: 0 0 12px !important; font-size: 13px !important; color: var(--dra-muted) !important; } .dra-field { margin-bottom: 10px; } .dra-root .dra-field label { display: block !important; margin-bottom: 4px !important; font-size: 13px !important; font-weight: 600 !important; } .dra-root .dra-field input, .dra-root .dra-field textarea { width: 100% !important; padding: 9px 10px !important; border: 2px solid #6b7d74 !important; border-radius: 9px !important; background: #fff !important; color: var(--dra-text) !important; font-family: inherit !important; font-size: 14px !important; } .dra-root .dra-field input:focus, .dra-root .dra-field textarea:focus { outline: 3px solid var(--dra-orange) !important; outline-offset: 1px !important; } .dra-hp { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; } .dra-form__status { margin: 8px 0; font-size: 13px; font-weight: 600; min-height: 1.2em; } .dra-form__status.is-error { color: #a1231b; } .dra-form__status.is-success { color: #005123; } .dra-root .dra-form__actions { display: flex !important; gap: 8px; margin-top: 10px; } .dra-root .dra-btn { flex: 1; min-height: 44px !important; padding: 0 14px !important; border: 1px solid var(--dra-border) !important; border-radius: 11px !important; background: #fff !important; color: var(--dra-text) !important; font-family: inherit !important; font-size: 14px !important; font-weight: 700 !important; cursor: pointer !important; appearance: none; } .dra-root .dra-btn--primary { background: var(--dra-accent) !important; border-color: var(--dra-accent) !important; color: #fff !important; } .dra-root .dra-btn:focus-visible { outline: 3px solid var(--dra-orange) !important; outline-offset: 2px !important; } /* Report form embedded in the statement page (outside the widget root). */ .dra-statement-form { margin-top: 24px; max-width: 520px; } .dra-statement-form .dra-form { padding: 18px; border: 1px solid #dfe6e2; border-radius: 14px; background: #f4f7f5; } .dra-statement-form .dra-field input, .dra-statement-form .dra-field textarea { width: 100%; padding: 9px 10px; border: 2px solid #6b7d74; border-radius: 9px; font-size: 14px; } .dra-statement-form .dra-btn { min-height: 44px; padding: 0 18px; border: 1px solid #dfe6e2; border-radius: 11px; background: #fff; font-weight: 700; cursor: pointer; } .dra-statement-form .dra-btn--primary { background: #005123; border-color: #005123; color: #fff; } .dra-statement-form .dra-form__actions { display: flex; gap: 8px; margin-top: 10px; } /* --- Reading guide and mask ------------------------------------------ */ .dra-root .dra-guide { position: fixed; inset-inline: 0; top: 0; height: 4px; background: var(--dra-orange); box-shadow: 0 0 0 1px rgba(0, 0, 0, .35); pointer-events: none; z-index: 2147482999; } .dra-root .dra-mask { position: fixed; inset-inline: 0; background: rgba(0, 0, 0, .72); pointer-events: none; z-index: 2147482998; } .dra-root .dra-mask--top { top: 0; height: 0; } .dra-root .dra-mask--bottom { bottom: 0; top: 0; } @media (forced-colors: active) { .dra-root .dra-toggle, .dra-root .dra-tool, .dra-root .dra-btn { border: 2px solid ButtonText !important; } }