/* * IMPACT Accessibility: the button, the panel and the page adjustments. * Widget rules are scoped under #impa-root. Adjustment rules hang off classes on (set by * impa.js and, before first paint, by the head script) and always exclude #impa-root, so the * button and the panel never change. Sizes inside #impa-root are px only: the text-size * adjustment scales the root font size. */ #impa-root { --impa-primary: #1f5eff; --impa-primary-ink: #fff; --impa-icon: #fff; --impa-size: 44px; --impa-off-x: 16px; --impa-off-y: 16px; --impa-off-x-m: 12px; --impa-off-y-m: 60px; --impa-x: var(--impa-off-x); --impa-y: var(--impa-off-y); --impa-stack: 0px; --impa-text: #111827; --impa-bg: #fff; --impa-radius: 14px; --impa-btn-radius: max(6px, calc(var(--impa-radius) - 5px)); --impa-card-radius: max(8px, calc(var(--impa-radius) - 4px)); --impa-line: rgba(17, 24, 39, 0.1); --impa-line: color-mix(in srgb, var(--impa-text) 11%, transparent); --impa-muted: rgba(17, 24, 39, 0.72); --impa-muted: color-mix(in srgb, var(--impa-text) 72%, var(--impa-bg)); --impa-soft: rgba(17, 24, 39, 0.04); --impa-soft: color-mix(in srgb, var(--impa-text) 4%, var(--impa-bg)); --impa-tint: rgba(31, 94, 255, 0.1); --impa-tint: color-mix(in srgb, var(--impa-primary) 11%, var(--impa-bg)); --impa-primary-hover: color-mix(in srgb, var(--impa-primary) 86%, #000); --impa-shadow: 0 1px 2px rgba(16, 24, 40, 0.06), 0 10px 28px -6px rgba(16, 24, 40, 0.16), 0 28px 60px -22px rgba(16, 24, 40, 0.24); --impa-ease: cubic-bezier(0.16, 1, 0.3, 1); --impa-z: 2147482000; } /* ---------- containment ---------- */ #impa-root[hidden], #impa-root [hidden] { display: none !important; } #impa-root :where(div, section, p, span, h2, h3, button, a, select, option, label, i, ul, li, kbd) { all: revert; box-sizing: border-box; } #impa-root { all: revert; position: static; cursor: auto; font-family: inherit; font-size: 15px; line-height: 1.5; font-weight: 400; letter-spacing: normal; word-spacing: normal; text-transform: none; text-align: start; color: var(--impa-text); -webkit-font-smoothing: antialiased; } #impa-root .impa-icon { display: block; width: 20px; height: 20px; flex: none; overflow: visible; } #impa-root .impa-sr { position: absolute; width: 1px; height: 1px; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; } #impa-root :where(button, a, select):focus-visible { outline: 2px solid var(--impa-primary); outline-offset: 2px; box-shadow: 0 0 0 5px color-mix(in srgb, var(--impa-primary) 18%, transparent); } /* ---------- the button ---------- */ /* Position: the root carries one impa-pos--{top|middle|bottom}-{start|end} class. */ /* The launcher: filled with the primary color, and otherwise a sibling of the cookie plugin's * revisit button (44px by default, the same shadow, hover and pop-in, the same heights). */ #impa-root .impa-button { position: fixed; z-index: var(--impa-z); display: inline-flex; align-items: center; justify-content: center; width: var(--impa-size); height: var(--impa-size); margin: 0; padding: 0; border: 0; border-radius: 50%; background: var(--impa-primary); color: var(--impa-icon); box-shadow: 0 1px 2px rgba(16, 24, 40, 0.08), 0 8px 20px -6px rgba(16, 24, 40, 0.28); cursor: pointer; -webkit-tap-highlight-color: transparent; transition: background-color 0.15s, box-shadow 0.2s; animation: impa-pop 0.35s var(--impa-ease); } @keyframes impa-pop { from { opacity: 0; scale: 0.6; } } /* 22px in the default 44px button, like the cookie plugin's revisit button. */ #impa-root .impa-button .impa-icon { width: 50%; height: 50%; transition: transform 0.35s var(--impa-ease); } #impa-root .impa-button:hover { box-shadow: 0 1px 2px rgba(16, 24, 40, 0.08), 0 12px 26px -6px rgba(16, 24, 40, 0.34); } html.impa-hidden #impa-root .impa-button { display: none !important; } #impa-root[class*="-start"] :is(.impa-button, .impa-panel) { inset-inline-start: var(--impa-x); } #impa-root[class*="-end"] :is(.impa-button, .impa-panel) { inset-inline-end: var(--impa-x); } #impa-root[class*="pos--top"] .impa-button { top: var(--impa-y); } #impa-root[class*="pos--middle"] .impa-button { top: 50%; transform: translateY(-50%); } #impa-root[class*="pos--bottom"] .impa-button { bottom: calc(var(--impa-y) + var(--impa-stack)); } /* Above the cookie plugin's revisit button on the same side: its 44px plus an 8px gap (it sits * 16px from the bottom, 60px on phones, the same heights as this button's defaults). */ #impa-root.impa-stack { --impa-stack: 52px; } /* ---------- the panel ---------- */ /* The dim layer behind the bottom sheet on phones (like the cookie preferences); a tap closes. */ #impa-root .impa-overlay { position: fixed; z-index: calc(var(--impa-z) + 1); inset: 0; display: none; margin: 0; padding: 0; background: rgba(12, 15, 24, 0.46); -webkit-backdrop-filter: blur(3px); backdrop-filter: blur(3px); opacity: 0; transition: opacity 0.28s var(--impa-ease); } #impa-root .impa-overlay.impa-is-in { opacity: 1; } #impa-root .impa-panel { position: fixed; z-index: calc(var(--impa-z) + 2); display: flex; flex-direction: column; width: 400px; max-width: calc(100vw - 32px); background: var(--impa-bg); color: var(--impa-text); border: 1px solid var(--impa-line); border-radius: var(--impa-radius); box-shadow: var(--impa-shadow); overflow: hidden; opacity: 0; transform: translateY(10px) scale(0.985); transition: opacity 0.25s var(--impa-ease), transform 0.35s var(--impa-ease); } #impa-root .impa-panel.impa-is-in { opacity: 1; transform: none; } /* Closing: a short fade (the panel hides when it ends). */ #impa-root :is(.impa-panel, .impa-overlay).impa-is-leaving { opacity: 0; transition-duration: 0.18s; } #impa-root[class*="pos--bottom"] .impa-panel { bottom: calc(var(--impa-y) + var(--impa-stack) + var(--impa-size) + 12px); max-height: calc(100vh - var(--impa-y) - var(--impa-stack) - var(--impa-size) - 28px); } #impa-root[class*="pos--top"] .impa-panel { top: calc(var(--impa-y) + var(--impa-size) + 12px); max-height: calc(100vh - var(--impa-y) - var(--impa-size) - 28px); } #impa-root[class*="pos--middle"] .impa-panel { top: 16px; bottom: 16px; height: max-content; max-height: calc(100vh - 32px); margin-block: auto; --impa-x: calc(var(--impa-off-x) + var(--impa-size) + 12px); } /* Shared control reset: every button-like control of the panel. */ #impa-root :is(.impa-close, .impa-chip, .impa-stepper__btn, .impa-tile, .impa-btn, .impa-link, .impa-linkbtn, .impa-option, .impa-select) { margin: 0; padding: 0; border: 1px solid var(--impa-line); background: var(--impa-bg); color: var(--impa-text); font: inherit; font-size: 14px; line-height: 1.25; font-weight: 600; text-align: start; cursor: pointer; } #impa-root :is(.impa-mark, .impa-close, .impa-stepper__btn, .impa-btn, .impa-link, .impa-linkbtn) { display: inline-flex; align-items: center; justify-content: center; flex: none; } #impa-root :is(.impa-chip, .impa-btn, .impa-link, .impa-linkbtn, .impa-option, .impa-select) { min-height: 44px; } #impa-root :is(.impa-chip, .impa-skip__label, .impa-btn) .impa-icon { width: 18px; height: 18px; } /* Head, body and foot: the cookie preference center's measures. */ #impa-root .impa-panel__head { display: flex; align-items: center; gap: 12px; padding: 18px 20px 16px; border-bottom: 1px solid var(--impa-line); } #impa-root .impa-mark { width: 32px; height: 32px; border-radius: max(8px, calc(var(--impa-radius) - 3px)); background: var(--impa-tint); color: var(--impa-primary); } #impa-root .impa-mark .impa-icon { width: 19px; height: 19px; } #impa-root .impa-title { flex: 1 1 auto; margin: 0; font-size: 18px; line-height: 1.3; font-weight: 650; letter-spacing: -0.01em; } #impa-root .impa-close { width: 40px; height: 40px; margin: -6px; border: 0; border-radius: 50%; background: none; color: var(--impa-muted); transition: background-color 0.15s, color 0.15s; } #impa-root :is(.impa-close, .impa-option):hover { background: var(--impa-soft); color: var(--impa-text); } #impa-root .impa-panel__body { flex: 1 1 auto; min-height: 0; padding: 18px 20px 20px; overflow-y: auto; overscroll-behavior: contain; } #impa-root :is(.impa-panel__body, .impa-section, .impa-skip, .impa-keys) { display: flex; flex-direction: column; gap: 8px; } #impa-root .impa-panel__body { gap: 18px; } /* The skip select sits in the orientation section: a section's worth of room above it. */ #impa-root .impa-skip { margin-top: 10px; } #impa-root .impa-section__title { margin: 0; font-size: 13px; line-height: 1.3; font-weight: 650; color: var(--impa-muted); } #impa-root :is(.impa-chips, .impa-grid) { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; } #impa-root .impa-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } #impa-root .impa-chip { display: flex; align-items: center; gap: 8px; padding: 8px 12px; border-radius: 999px; font-size: 13.5px; } #impa-root :is(.impa-chip, .impa-tile__icon, .impa-skip__label) .impa-icon { color: var(--impa-primary); } #impa-root :is(.impa-chip, .impa-btn--solid)[aria-pressed="true"], #impa-root .impa-btn--solid { background: var(--impa-primary); border-color: var(--impa-primary); color: var(--impa-primary-ink); } #impa-root .impa-chip[aria-pressed="true"] .impa-icon { color: inherit; } #impa-root .impa-stepper { display: grid; grid-template-columns: 44px 1fr 44px; align-items: center; gap: 8px; padding: 6px; border: 1px solid var(--impa-line); border-radius: var(--impa-card-radius); background: var(--impa-bg); } #impa-root .impa-stepper__btn { width: 44px; height: 44px; border-radius: max(6px, calc(var(--impa-radius) - 8px)); background: var(--impa-soft); } #impa-root .impa-stepper__btn[aria-disabled="true"] { opacity: 0.45; cursor: default; } #impa-root .impa-stepper__value { display: grid; justify-items: center; } #impa-root .impa-stepper__num { direction: ltr; font-size: 18px; line-height: 1.2; font-weight: 700; font-variant-numeric: tabular-nums; } #impa-root :is(.impa-stepper__caption, .impa-hide__note, .impa-keys__note) { font-size: 12.5px; color: var(--impa-muted); } #impa-root .impa-tile { position: relative; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 6px; min-height: 84px; padding: 10px 6px; border-radius: var(--impa-card-radius); background: var(--impa-bg); font-size: 12.5px; text-align: center; transition: background-color 0.2s, border-color 0.2s, box-shadow 0.3s; } #impa-root .impa-tile:hover { border-color: color-mix(in srgb, var(--impa-primary) 45%, var(--impa-bg)); } #impa-root .impa-tile__icon .impa-icon { width: 24px; height: 24px; } #impa-root .impa-tile[aria-pressed="true"] { background: var(--impa-tint); border-color: var(--impa-primary); box-shadow: inset 0 0 0 1px var(--impa-primary); } /* Level dots sit at the bottom edge, so every tile's label stays on the same line. */ #impa-root .impa-dots { position: absolute; bottom: 8px; display: flex; gap: 4px; } #impa-root .impa-dots i { display: block; width: 6px; height: 6px; border-radius: 50%; background: var(--impa-line); } #impa-root .impa-dots i.is-on { background: var(--impa-primary); } /* Keyboard navigation help, shown under the Orientation grid while the adjustment is on. */ #impa-root .impa-keys { padding: 10px 12px; border: 1px solid var(--impa-line); border-radius: var(--impa-card-radius); background: var(--impa-soft); } #impa-root .impa-keys :is(ul, p) { margin: 0; padding: 0; } #impa-root .impa-keys ul { display: grid; grid-template-columns: 1fr 1fr; gap: 6px 12px; list-style: none; font-size: 13px; } #impa-root .impa-keys li { display: flex; align-items: center; gap: 8px; } #impa-root kbd { min-width: 26px; padding: 1px 6px; border: 1px solid var(--impa-line); border-bottom-width: 2px; border-radius: 5px; background: var(--impa-bg); font: 700 12px/1.5 ui-monospace, Menlo, Consolas, monospace; text-align: center; } #impa-root .impa-skip__label { display: flex; align-items: center; gap: 6px; font-size: 13px; font-weight: 600; } #impa-root .impa-skip__row { display: flex; gap: 8px; } #impa-root .impa-select { flex: 1; min-width: 0; padding-inline: 12px 36px; border-radius: 8px; font-weight: 400; appearance: none; -webkit-appearance: none; background: var(--impa-bg) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%236b7280' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E") no-repeat right 12px center / 16px; } #impa-root[dir="rtl"] .impa-select { background-position: left 12px center; } /* Buttons and links: .impc-btn, .impc-btn--solid, .impc-btn--outline and .impc-link. */ #impa-root .impa-btn { gap: 8px; padding: 10px 18px; border-radius: var(--impa-btn-radius); font-size: 14.5px; line-height: 1.2; text-decoration: none; transition: background-color 0.15s, border-color 0.15s, color 0.15s, transform 0.1s, box-shadow 0.15s; } #impa-root .impa-btn:active { transform: translateY(1px); } #impa-root .impa-btn--solid { box-shadow: 0 1px 2px rgba(16, 24, 40, 0.12), inset 0 1px 0 rgba(255, 255, 255, 0.12); } #impa-root :is(.impa-btn--solid, .impa-button):hover { border-color: var(--impa-primary-hover, var(--impa-primary)); background: var(--impa-primary-hover, var(--impa-primary)); } #impa-root .impa-btn--outline { border-color: color-mix(in srgb, var(--impa-primary) 55%, var(--impa-bg)); color: var(--impa-primary); } #impa-root .impa-btn--outline:hover { border-color: var(--impa-primary); background: var(--impa-tint); } #impa-root .impa-panel__foot { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 14px; padding: 14px 20px; border-top: 1px solid var(--impa-line); background: var(--impa-bg); } #impa-root :is(.impa-link, .impa-linkbtn) { gap: 5px; border: 0; border-radius: 3px; background: none; font-weight: 550; color: var(--impa-primary); text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 3px; text-decoration-color: color-mix(in srgb, var(--impa-primary) 40%, transparent); transition: text-decoration-color 0.15s; } #impa-root :is(.impa-link, .impa-linkbtn):hover { text-decoration-color: currentColor; } /* "Powered by IMPACT": its own centered line under the footer row. Muted is 7:1 on white. */ #impa-root .impa-powered { flex-basis: 100%; margin-top: 2px; color: var(--impa-muted); font-size: 11.5px; text-align: center; text-decoration: none; white-space: nowrap; } #impa-root .impa-powered:hover, #impa-root .impa-powered:focus-visible { color: var(--impa-text); text-decoration: underline; } #impa-root :is(.impa-link, .impa-linkbtn) .impa-icon { width: 16px; height: 16px; } #impa-root .impa-hide { position: relative; margin-inline-start: auto; } #impa-root .impa-hide__options { position: absolute; bottom: calc(100% + 6px); inset-inline-end: 0; z-index: 1; display: flex; flex-direction: column; min-width: 210px; padding: 6px; background: var(--impa-bg); border: 1px solid var(--impa-line); border-radius: var(--impa-btn-radius); box-shadow: var(--impa-shadow); } #impa-root .impa-option { padding: 8px 10px; border: 0; border-radius: 6px; background: none; font-weight: 400; } #impa-root .impa-hide__note { margin: 4px 10px 2px; } /* ---------- reading guides (inside #impa-root, so the color filter never reaches them) ---------- */ #impa-root .impa-guide-line { position: fixed; inset: 0 0 auto; z-index: calc(var(--impa-z) - 2); height: 6px; background: var(--impa-primary); box-shadow: 0 0 0 2px #fff, 0 0 0 4px #111; pointer-events: none; } #impa-root .impa-mask { position: fixed; inset-inline: 0; z-index: calc(var(--impa-z) - 2); background: rgba(0, 0, 0, 0.6); pointer-events: none; } #impa-root .impa-mask--top { top: 0; height: 0; } #impa-root .impa-mask--bottom { top: 100%; bottom: 0; } /* Text magnifier: the hovered or focused text, enlarged (impa.js sets the size and position). */ #impa-root .impa-magnifier { position: fixed; top: 0; left: 0; z-index: calc(var(--impa-z) - 1); display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 4; width: max-content; max-width: min(420px, calc(100vw - 16px)); overflow: hidden; padding: 10px 14px; background: var(--impa-bg); color: var(--impa-text); border: 1px solid var(--impa-line); border-radius: var(--impa-radius); box-shadow: var(--impa-shadow); font-weight: 600; line-height: 1.3; overflow-wrap: anywhere; pointer-events: none; } /* ---------- page adjustments ---------- */ html.impa-text-size { font-size: calc(var(--impa-root-fs, 16px) * var(--impa-fs-scale, 1)) !important; } html.impa-text-size [data-impa-fs] { font-size: calc(var(--impa-fs0) * var(--impa-fs-scale, 1)) !important; } html.impa-line-height-1 { --impa-lh: 1.5; } html.impa-line-height-2 { --impa-lh: 1.8; } html.impa-line-height-3 { --impa-lh: 2.1; } html[class*="impa-line-height-"] body :not(#impa-root, #impa-root *) { line-height: var(--impa-lh) !important; } /* WCAG 1.4.12 text spacing. */ html.impa-text-spacing body :not(#impa-root, #impa-root *) { letter-spacing: 0.12em !important; word-spacing: 0.16em !important; } html.impa-text-spacing body p:not(#impa-root *) { margin-block-end: 2em !important; } /* System faces only (nothing is downloaded); icon fonts are left alone. */ html.impa-readable-font body :not(#impa-root, #impa-root *, i, [class*="icon"], [class*="fa-"], .dashicons, [aria-hidden="true"]) { font-family: Arial, Helvetica, "Segoe UI", "Arial Hebrew", "Noto Sans Hebrew", sans-serif !important; } html.impa-highlight-links body a:not(#impa-root *) { text-decoration: underline !important; text-decoration-thickness: 2px !important; text-underline-offset: 3px !important; outline: 2px solid #111 !important; outline-offset: 2px !important; background-color: #fff3a3 !important; color: #111 !important; } html.impa-highlight-headings body :is(h1, h2, h3, h4, h5, h6):not(#impa-root *) { outline: 2px dashed #1f5eff !important; outline-offset: 4px !important; } html.impa-highlight-headings body :is(h1, h2, h3, h4, h5, h6):not(#impa-root *)::before { content: var(--impa-hn); display: inline-block; margin-inline-end: 8px; padding: 2px 6px; border-radius: 4px; background: #1f5eff; color: #fff; font: 700 12px/1.2 Arial, sans-serif; letter-spacing: 0; vertical-align: middle; } .impa-highlight-headings h1 { --impa-hn: "H1"; } .impa-highlight-headings h2 { --impa-hn: "H2"; } .impa-highlight-headings h3 { --impa-hn: "H3"; } .impa-highlight-headings h4 { --impa-hn: "H4"; } .impa-highlight-headings h5 { --impa-hn: "H5"; } .impa-highlight-headings h6 { --impa-hn: "H6"; } html.impa-text-align-start { --impa-al: start; } html.impa-text-align-center { --impa-al: center; } html.impa-text-align-end { --impa-al: end; } html[class*="impa-text-align-"] body :not(#impa-root, #impa-root *) { text-align: var(--impa-al) !important; } /* High contrast, grayscale and low saturation: one composed filter on the page wrapper(s). Never on * the cookie plugin's root: a filter makes a containing block, so its fixed banner and button would move. */ html.impa-filter body > :not(#impa-root, #impc-root) { filter: var(--impa-filter) !important; } /* Dark and light contrast share one rule; the class picks the colors. */ html.impa-contrast-dark { --impa-cbg: #000; --impa-cfg: #fff; --impa-clink: #ffe44d; } html.impa-contrast-light { --impa-cbg: #fff; --impa-cfg: #000; --impa-clink: #0000c8; } html:is(.impa-contrast-dark, .impa-contrast-light), html:is(.impa-contrast-dark, .impa-contrast-light) body, html:is(.impa-contrast-dark, .impa-contrast-light) body :not(#impa-root, #impa-root *, img, picture, video, svg, svg *, canvas, iframe) { background-color: var(--impa-cbg) !important; color: var(--impa-cfg) !important; border-color: var(--impa-cfg) !important; text-shadow: none !important; box-shadow: none !important; } html:is(.impa-contrast-dark, .impa-contrast-light) body a:not(#impa-root *), html:is(.impa-contrast-dark, .impa-contrast-light) body a:not(#impa-root *) * { color: var(--impa-clink) !important; } /* Highlighted links keep the contrast colors, so the link text never sits on the yellow marker. */ html:is(.impa-contrast-dark, .impa-contrast-light).impa-highlight-links body a:not(#impa-root *) { background-color: var(--impa-cbg) !important; outline-color: var(--impa-clink) !important; } html.impa-hide-images body :is(img, picture, video, [data-impa-svg]):not(#impa-root *) { display: none !important; } html.impa-hide-images body :not(#impa-root, #impa-root *) { background-image: none !important; } .impa-alt { display: none; } html.impa-hide-images .impa-alt { display: inline-block !important; margin: 2px 0; padding: 4px 8px; border: 1px dashed currentColor; border-radius: 4px; font-size: 0.9em; line-height: 1.4; } html.impa-stop-animations { scroll-behavior: auto !important; } html.impa-stop-animations :not(#impa-root *), html.impa-stop-animations :not(#impa-root *)::before, html.impa-stop-animations :not(#impa-root *)::after { animation-duration: 0.001ms !important; animation-delay: 0s !important; animation-iteration-count: 1 !important; transition-duration: 0.001ms !important; transition-delay: 0s !important; scroll-behavior: auto !important; } html.impa-big-cursor { --impa-cur: 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 2.5l14 8.4-6.2 1.6 3.6 6.5-2.7 1.5-3.6-6.5L5 18.8z' fill='%23000' stroke='%23fff' stroke-width='1.2' stroke-linejoin='round'/%3E%3C/svg%3E"); } html.impa-big-cursor, html.impa-big-cursor body :not(#impa-root, #impa-root *) { cursor: var(--impa-cur) 10 5, auto !important; } html.impa-big-cursor body :is(a, button, [role="button"], label, select, summary, input[type="checkbox"], input[type="radio"]):not(#impa-root *) { cursor: var(--impa-cur) 10 5, pointer !important; } /* Keyboard navigation: the element a shortcut moved to (impa.js sets --impa-ring to the button color). */ html.impa-keyboard-nav .impa-kb-focus:not(#impa-root *) { outline: 4px solid var(--impa-ring, #1f5eff) !important; outline-offset: 3px !important; box-shadow: 0 0 0 10px #fff !important; } /* On phones the open panel is a bottom sheet, and the cookie plugin's revisit button would sit on top of it. On larger screens the panel opens above the buttons, so the cookie button stays. */ @media (max-width: 480px) { html.impa-open #impc-root .impc-revisit { visibility: hidden !important; } } /* ---------- phones: a bottom sheet over a dim layer, like the cookie preferences ---------- */ @media (max-width: 480px) { #impa-root { --impa-x: var(--impa-off-x-m); --impa-y: var(--impa-off-y-m); } #impa-root.impa-hide-mobile .impa-button { display: none !important; } /* Clear of sticky bottom bars and the home indicator, level with the cookie plugin's button. */ #impa-root[class*="pos--bottom"] .impa-button { bottom: calc(var(--impa-y) + var(--impa-stack) + env(safe-area-inset-bottom, 0px)); } #impa-root .impa-overlay { display: block; } #impa-root[class] .impa-panel { inset: auto 0 0 0; width: 100%; max-width: none; height: auto; max-height: 92vh; margin: 0; border-width: 1px 0 0; border-radius: var(--impa-radius) var(--impa-radius) 0 0; transform: translateY(40px); transition: opacity 0.28s var(--impa-ease), transform 0.4s var(--impa-ease); } #impa-root[class] .impa-panel.impa-is-in { transform: none; } #impa-root[class] .impa-panel.impa-is-leaving { transition-duration: 0.18s; } #impa-root :is(.impa-panel__head, .impa-panel__body) { padding-inline: 16px; } #impa-root .impa-panel__foot { padding: 12px 16px calc(12px + env(safe-area-inset-bottom, 0px)); } /* The page behind the open sheet does not scroll; the sheet's body does. */ html.impa-open, html.impa-open body { overflow: hidden !important; } } /* ---------- motion, forced colors, print ---------- */ @media (prefers-reduced-motion: reduce) { #impa-root * { transition: none !important; animation: none !important; } #impa-root .impa-panel { transform: none !important; } } @media (forced-colors: active) { #impa-root :is(.impa-button, .impa-panel, .impa-tile, .impa-chip, .impa-btn) { border: 1px solid CanvasText; } #impa-root :is(.impa-tile, .impa-chip)[aria-pressed="true"] { outline: 3px solid Highlight; } } @media print { #impa-root, .impa-alt { display: none !important; } }