/* DigitalIN accessibility toolbar. Scoped to .dgla-* so it cannot leak into the site's own design, and the preference classes land on so they can reach everything. */ .dgla-skip { position: fixed; inset-inline-start: 12px; top: -80px; z-index: 2147483647; background: #000; color: #fff; padding: 12px 20px; border-radius: 8px; font: 700 15px/1 system-ui, sans-serif; text-decoration: none; transition: top .2s; } .dgla-skip:focus { top: 12px; outline: 3px solid var(--dgla-accent, #E70F57); outline-offset: 2px; } .dgla-launcher { position: fixed; z-index: 2147483000; cursor: pointer; font-family: inherit; background: var(--dgla-accent, #E70F57); color: #fff; border: 0; display: grid; place-items: center; gap: 6px; box-shadow: 0 6px 24px rgba(0,0,0,.3); transition: transform .2s, box-shadow .2s, filter .2s; } .dgla-launcher--bubble { width: var(--dgla-size, 52px); height: var(--dgla-size, 52px); border-radius: 50%; } .dgla-launcher--bubble:hover { transform: scale(1.06); } /* a slim tab welded to the edge of the screen */ .dgla-launcher--tab { width: auto; min-height: 44px; padding: 10px 10px 10px 12px; border-radius: 0 16px 16px 0; grid-auto-flow: column; align-content: center; box-shadow: 0 10px 30px rgba(231,15,87,.4); } .dgla-launcher--tab:hover { filter: brightness(1.08); } .dgla-launcher--tab .dgla-launcher__text { writing-mode: vertical-rl; text-orientation: mixed; transform: rotate(180deg); font: 700 12px/1 system-ui, "Segoe UI", Arial, sans-serif; letter-spacing: .04em; } .dgla-launcher:focus-visible { outline: 3px solid #fff; outline-offset: 3px; } .dgla-panel { position: fixed; bottom: calc(var(--dgla-y, 20px) + var(--dgla-size, 52px) + 12px); z-index: 2147483001; width: min(340px, calc(100vw - 32px)); max-height: min(78vh, 720px); overflow-y: auto; background: #fff; color: #14121f; border-radius: 16px; box-shadow: 0 20px 60px rgba(0,0,0,.35); font: 15px/1.5 system-ui, "Segoe UI", Arial, sans-serif; direction: rtl; text-align: right; } .dgla-panel[hidden] { display: none; } .dgla-panel__head { display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 16px 18px; border-bottom: 1px solid #e8e6ef; position: sticky; top: 0; background: #fff; } .dgla-panel__title { margin: 0; font-size: 17px; font-weight: 800; color: #14121f; } .dgla-close { border: 0; background: #f2f1f6; color: #14121f; width: 32px; height: 32px; border-radius: 8px; font-size: 22px; line-height: 1; cursor: pointer; } .dgla-close:hover { background: #e6e4ee; } .dgla-panel__body { padding: 14px 18px 4px; } .dgla-row { margin-bottom: 16px; } .dgla-row__label { display: block; font-weight: 700; margin-bottom: 8px; font-size: 14px; } .dgla-stepper { display: flex; align-items: center; gap: 10px; } .dgla-step { width: 40px; height: 40px; border-radius: 10px; border: 1px solid #d9d7e3; background: #f7f6fa; font-size: 20px; cursor: pointer; color: #14121f; } .dgla-step:hover { background: #eeecf5; } .dgla-value { min-width: 62px; text-align: center; font-weight: 700; } .dgla-chips { display: flex; flex-wrap: wrap; gap: 6px; } .dgla-chip { border: 1px solid #d9d7e3; background: #f7f6fa; color: #14121f; border-radius: 999px; padding: 7px 13px; font-size: 13px; cursor: pointer; } .dgla-chip:hover { background: #eeecf5; } .dgla-chip[aria-pressed="true"] { background: var(--dgla-accent, #E70F57); border-color: var(--dgla-accent, #E70F57); color: #fff; } .dgla-tools { display: grid; gap: 6px; } .dgla-tool { display: grid; grid-template-columns: 1fr auto; align-items: center; gap: 4px 10px; width: 100%; text-align: right; border: 1px solid #d9d7e3; background: #f7f6fa; color: #14121f; border-radius: 12px; padding: 11px 13px; cursor: pointer; font: inherit; } .dgla-tool:hover { background: #eeecf5; } .dgla-tool__label { font-weight: 600; font-size: 14px; } .dgla-tool__hint { grid-column: 1 / -1; font-size: 12px; color: #6b6880; } .dgla-tool__state { width: 34px; height: 20px; border-radius: 999px; background: #cfcddb; position: relative; transition: background .2s; } .dgla-tool__state::after { content: ""; position: absolute; inset-block: 2px; inset-inline-end: 2px; width: 16px; border-radius: 50%; background: #fff; transition: inset-inline-end .2s; } .dgla-tool[aria-pressed="true"] { border-color: var(--dgla-accent, #E70F57); } .dgla-tool[aria-pressed="true"] .dgla-tool__state { background: var(--dgla-accent, #E70F57); } .dgla-tool[aria-pressed="true"] .dgla-tool__state::after { inset-inline-end: 16px; } .dgla-panel__foot { display: flex; gap: 8px; padding: 12px 18px 4px; flex-wrap: wrap; } .dgla-reset { flex: 1; border: 1px solid #d9d7e3; background: #fff; color: #14121f; border-radius: 10px; padding: 10px; cursor: pointer; font: 600 14px/1 inherit; } .dgla-reset:hover { background: #f2f1f6; } .dgla-statement { align-self: center; font-size: 13px; color: #4a4763; } .dgla-note { margin: 8px 18px 16px; font-size: 12px; color: #6b6880; } .dgla-panel :focus-visible, .dgla-launcher:focus-visible { outline: 3px solid var(--dgla-accent, #E70F57); outline-offset: 2px; } /* ---------- user preferences, applied to the document ---------- */ html.dgla-font { font-size: calc(100% * var(--dgla-font, 1)); } html.dgla-links a { text-decoration: underline !important; text-underline-offset: 3px; } html.dgla-readable, html.dgla-readable * { font-family: Arial, "Segoe UI", system-ui, sans-serif !important; } html.dgla-spacing, html.dgla-spacing * { letter-spacing: .09em !important; word-spacing: .18em !important; } html.dgla-lineheight, html.dgla-lineheight * { line-height: 2 !important; } html.dgla-animations *, html.dgla-animations *::before, html.dgla-animations *::after { animation: none !important; transition: none !important; scroll-behavior: auto !important; } html.dgla-cursor, html.dgla-cursor * { 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 9-6 1.5L16 20l-3 1-3-7.5L5 18z' fill='%23000' stroke='%23fff' stroke-width='1.5'/%3E%3C/svg%3E") 4 2, auto !important; } html.dgla-keyboard :focus { outline: 3px solid var(--dgla-accent, #E70F57) !important; outline-offset: 2px !important; } html.dgla-images img { outline: 2px dashed rgba(0,0,0,.35); } html.dgla-images figure::after, html.dgla-images .dgla-alt { display: block; font: 12px/1.4 system-ui, sans-serif; padding: 4px 6px; background: #111; color: #fff; word-break: break-word; } html.dgla-c-high body { background: #000 !important; } html.dgla-c-high body, html.dgla-c-high body * { background-color: #000 !important; color: #fff !important; border-color: #fff !important; } html.dgla-c-high a, html.dgla-c-high a * { color: #ffe600 !important; } html.dgla-c-dark body, html.dgla-c-dark body * { background-color: #10101a !important; color: #f2f2f7 !important; } html.dgla-c-dark a, html.dgla-c-dark a * { color: #7fd4ff !important; } html.dgla-c-light body, html.dgla-c-light body * { background-color: #fff !important; color: #14121f !important; } html.dgla-c-light a, html.dgla-c-light a * { color: #0b57d0 !important; } html.dgla-c-invert { filter: invert(1) hue-rotate(180deg); } html.dgla-c-invert img, html.dgla-c-invert video { filter: invert(1) hue-rotate(180deg); } html.dgla-c-mono { filter: grayscale(1); } /* the panel itself must stay legible in every mode */ html.dgla-c-invert .dgla-panel, html.dgla-c-invert .dgla-launcher { filter: invert(1) hue-rotate(180deg); } html.dgla-c-high .dgla-panel, html.dgla-c-high .dgla-panel * { background-color: #fff !important; color: #14121f !important; } .dgla-guide { position: fixed; inset-inline: 0; height: 44px; z-index: 2147482000; pointer-events: none; border-block: 2px solid var(--dgla-accent, #E70F57); background: rgba(0,0,0,.06); display: block; } .dgla-guide[hidden] { display: none; } html:not([dir="rtl"]) .dgla-launcher--tab { border-radius: 0 14px 14px 0; } .dgla-launcher--tab[style*="right"] { border-radius: 16px 0 0 16px; padding: 10px 12px 10px 10px; } @media (max-width: 480px) { .dgla-panel { inset-inline: 12px; width: auto; } .dgla-launcher--tab { min-height: 40px; } } @media print { .dgla-launcher, .dgla-panel, .dgla-guide, .dgla-skip { display: none !important; } } /* ------------------------------------------------------------------ Theme armour. A host theme's global `button` rule (Elementor's kit uses `.elementor-kit-N button`, 0-1-1) outranks a plain class here, which repainted every control in the panel. These controls must look exactly as designed on any theme, so they are pinned. ------------------------------------------------------------------ */ .dgla-panel .dgla-step, .dgla-panel .dgla-chip, .dgla-panel .dgla-tool, .dgla-panel .dgla-close, .dgla-panel .dgla-reset { background: #f7f6fa !important; color: #14121f !important; border: 1px solid #d9d7e3 !important; box-shadow: none !important; text-shadow: none !important; text-transform: none !important; font-family: inherit !important; letter-spacing: normal !important; min-height: 0 !important; width: auto !important; } /* the kit rounds every button to a pill and centres it, which turned the rows into lozenges with the label sliding under the toggle */ .dgla-panel .dgla-tool { border-radius: 12px !important; text-align: right !important; padding: 11px 13px !important; width: 100% !important; font-size: 14px !important; line-height: 1.4 !important; display: grid !important; } .dgla-panel .dgla-chip { border-radius: 999px !important; padding: 7px 13px !important; font-size: 13px !important; } .dgla-panel .dgla-step { border-radius: 10px !important; padding: 0 !important; width: 40px !important; height: 40px !important; font-size: 20px !important; } .dgla-panel .dgla-close { border-radius: 8px !important; padding: 0 !important; width: 32px !important; height: 32px !important; font-size: 22px !important; } .dgla-panel .dgla-reset { border-radius: 10px !important; padding: 10px !important; font-size: 14px !important; } /* headings and labels inherit the site's white text otherwise */ .dgla-panel, .dgla-panel .dgla-panel__title, .dgla-panel .dgla-row__label, .dgla-panel .dgla-tool__label, .dgla-panel .dgla-value, .dgla-panel .dgla-statement { color: #14121f !important; } .dgla-panel .dgla-tool__hint, .dgla-panel .dgla-note { color: #6b6880 !important; } .dgla-panel .dgla-panel__title { font-size: 17px !important; margin: 0 !important; text-align: right !important; } .dgla-panel .dgla-reset { background: #fff !important; } .dgla-panel .dgla-close { background: #f2f1f6 !important; border-color: transparent !important; } .dgla-panel .dgla-chip[aria-pressed="true"] { background: var(--dgla-accent, #E70F57) !important; border-color: var(--dgla-accent, #E70F57) !important; color: #fff !important; } .dgla-panel .dgla-tool[aria-pressed="true"] { border-color: var(--dgla-accent, #E70F57) !important; } .dgla-panel .dgla-tool__state { background: #cfcddb !important; border: 0 !important; } .dgla-panel .dgla-tool[aria-pressed="true"] .dgla-tool__state { background: var(--dgla-accent, #E70F57) !important; } .dgla-launcher { background: var(--dgla-accent, #E70F57) !important; color: #fff !important; border: 0 !important; font-family: inherit !important; text-transform: none !important; } .dgla-launcher--bubble { padding: 0 !important; border-radius: 50% !important; width: var(--dgla-size, 52px) !important; height: var(--dgla-size, 52px) !important; box-shadow: 0 6px 24px rgba(0,0,0,.3) !important; } /* the kit rounds every button into a pill, which collapsed the edge tab */ .dgla-launcher--tab { padding: 10px 10px 10px 12px !important; border-radius: 0 16px 16px 0 !important; width: auto !important; min-width: 46px !important; height: auto !important; min-height: 44px !important; box-shadow: 0 10px 30px rgba(231,15,87,.4) !important; } .dgla-launcher--tab[style*="right"] { border-radius: 16px 0 0 16px !important; padding: 10px 12px 10px 10px !important; } .dgla-panel, .dgla-panel * { text-transform: none !important; } /* read by assistive technology, never rendered */ .dgla-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; }