/* Accessibility menu (assets/a11y.js) and the display preferences it switches on . Loaded on every page, after site.css or legal.css. Literal colors on purpose: the menu must look the same on both stylesheets and must not change with its own "contrast" mode. Preference rules use !important because a visitor's explicit choice has to win over the page's own styles. */ /* ---------- The button and the panel ---------- */ .a11y { position: fixed; left: 16px; bottom: 16px; z-index: 1000; direction: rtl; font-family: "Google Sans", "Rubik", system-ui, -apple-system, "Segoe UI", Arial, sans-serif; } .a11y-trigger { display: grid; place-items: center; width: 52px; height: 52px; padding: 0; border-radius: 50%; cursor: pointer; background: #2F66D0; color: #FFFFFF; border: 2px solid #FFFFFF; box-shadow: 0 2px 10px rgba(3, 3, 3, 0.28); } .a11y-trigger svg { width: 30px; height: 30px; fill: currentColor; } .a11y-trigger:hover { background: #2A5BC4; } .a11y-trigger:focus-visible, .a11y-panel button:focus-visible, .a11y-panel a:focus-visible { outline: 3px solid #111114; outline-offset: 2px; } .a11y-trigger:focus-visible { outline-color: #13E5D5; box-shadow: 0 0 0 5px #111114; } .a11y-panel { position: absolute; left: 0; bottom: 64px; width: min(340px, calc(100vw - 32px)); max-height: calc(100vh - 100px); overflow-y: auto; display: grid; gap: 12px; padding: 16px; border-radius: 16px; background: #FFFFFF; color: #111114; border: 1px solid #8E8F99; box-shadow: 0 12px 40px rgba(3, 3, 3, 0.22); text-align: right; font-size: 15px; line-height: 1.5; } .a11y-panel[hidden] { display: none; } .a11y-head { display: flex; align-items: center; justify-content: space-between; gap: 8px; } .a11y-title { margin: 0; font-size: 19px; font-weight: 700; color: #111114; } .a11y-close { display: grid; place-items: center; width: 44px; height: 44px; margin-inline-end: -8px; padding: 0; border: 0; border-radius: 10px; background: transparent; color: #111114; cursor: pointer; } .a11y-close svg { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 2.2; stroke-linecap: round; } .a11y-close:hover { background: #F4F4F6; } .a11y-label { margin: 0; font-size: 13px; font-weight: 700; color: #45454F; } .a11y-sizes { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 6px; } .a11y-size, .a11y-toggle, .a11y-reset { min-height: 44px; padding: 8px 10px; border-radius: 10px; border: 1px solid #8E8F99; background: #FFFFFF; color: #111114; font: inherit; font-weight: 500; cursor: pointer; text-align: center; } .a11y-size-1 { font-size: 17px; } .a11y-size-2 { font-size: 19px; } .a11y-size[aria-pressed="true"] { background: #111114; border-color: #111114; color: #FFFFFF; } .a11y-toggles { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 6px; } .a11y-toggle { display: flex; align-items: center; gap: 8px; text-align: right; line-height: 1.3; } .a11y-check { flex: none; width: 18px; height: 18px; border-radius: 5px; border: 2px solid #62626C; display: grid; place-items: center; } .a11y-toggle[aria-pressed="true"] { border-color: #2F66D0; background: #EEF3FC; box-shadow: inset 0 0 0 1px #2F66D0; } .a11y-toggle[aria-pressed="true"] .a11y-check { border-color: #2F66D0; background: #2F66D0; } .a11y-toggle[aria-pressed="true"] .a11y-check::after { content: ""; width: 9px; height: 5px; border: solid #FFFFFF; border-width: 0 0 2px 2px; transform: translateY(-1px) rotate(-45deg); } .a11y-size:hover, .a11y-toggle:hover, .a11y-reset:hover { border-color: #111114; } .a11y-foot { display: grid; gap: 6px; padding-top: 12px; border-top: 1px solid #D5D6DB; } .a11y-reset { width: 100%; } .a11y-links-row { margin: 0; font-size: 14px; color: #45454F; } .a11y-links-row a { color: #2A5BC4; text-decoration: underline; text-underline-offset: 3px; display: inline-block; padding-block: 10px; } .a11y-note { margin: 0; font-size: 13px; color: #45454F; } /* English page (LTR): the button sits bottom right and the panel reads left to right. */ .a11y[dir="ltr"] { direction: ltr; left: auto; right: 16px; } .a11y[dir="ltr"] .a11y-panel { left: auto; right: 0; text-align: left; } .a11y[dir="ltr"] .a11y-toggle { text-align: left; } @media (max-width: 480px) { .a11y { left: 12px; bottom: 12px; } .a11y[dir="ltr"] { left: auto; right: 12px; } .a11y-trigger { width: 48px; height: 48px; } .a11y-panel { bottom: 58px; width: calc(100vw - 24px); max-height: calc(100vh - 84px); } } /* Phones: room under the footer so the floating button never sits on the last links */ @media (max-width: 480px) { body { padding-bottom: 72px; } } @media print { .a11y { display: none; } } /* ---------- Preferences ---------- */ /* Text size: the page content zooms and reflows (like browser zoom); the menu itself stays the same size. */ html.a11y-text-1 body > :not(.a11y):not(.skip-link) { zoom: 1.15; } html.a11y-text-2 body > :not(.a11y):not(.skip-link) { zoom: 1.3; } /* The app mockups (hero phone, launch video frame, the three step previews) are illustrations with a text alternative and fixed widths: they keep their normal size so they never push the page sideways on a 320px phone. */ html.a11y-text-1 :is(.demo, .phone-frame, .mini) { zoom: calc(1 / 1.15); } /* (.demo is also the phone in the /en hero) */ html.a11y-text-2 :is(.demo, .phone-frame, .mini) { zoom: calc(1 / 1.3); } /* Narrow phones at the largest size: the header may wrap to two lines instead of pushing the page sideways. */ @media (max-width: 400px) { html.a11y-text-2 .site-header { flex-wrap: wrap; row-gap: 0; } } /* High contrast: body text in full black, light-on-dark text in full white, no decorative glows, firmer lines. */ html.a11y-contrast { --text: #111114; --muted: #111114; --line: #62626C; } html.a11y-contrast .glow, html.a11y-contrast .glow-clip { display: none !important; } html.a11y-contrast .screen { background: #0A0A0E !important; } html.a11y-contrast .top, html.a11y-contrast .band-dark, html.a11y-contrast .site-footer { background-image: none !important; } html.a11y-contrast .top p, html.a11y-contrast .top label, html.a11y-contrast .top .signup-note, html.a11y-contrast .band-dark p, html.a11y-contrast .band-dark .kicker, html.a11y-contrast .band-dark .intro, html.a11y-contrast .band-dark dt, html.a11y-contrast .band-dark .stamp, html.a11y-contrast .band-dark label, html.a11y-contrast .note p, html.a11y-contrast .note .row span, html.a11y-contrast .transcript, html.a11y-contrast .transcript summary .icon, html.a11y-contrast .band-dark .signup-note { color: #FFFFFF !important; } html.a11y-contrast main a:not(.btn), html.a11y-contrast .site-footer a { text-decoration: underline !important; } /* Highlight links: every link underlined and outlined, so it stands out from the text around it. */ html.a11y-links a:not(.a11y-panel a) { text-decoration: underline !important; text-decoration-thickness: 2px !important; text-underline-offset: 3px !important; outline: 2px dashed currentColor; outline-offset: 2px; } html.a11y-links a.btn { text-decoration: none !important; outline-style: solid; outline-offset: 3px; } /* Plain font: a common system face instead of Google Sans. */ html.a11y-font body, html.a11y-font body *:not(svg):not(path) { font-family: Arial, "Segoe UI", "Helvetica Neue", sans-serif !important; } /* Spacing (WCAG 1.4.12 values where Hebrew allows): taller lines, wider word gaps, more room after paragraphs. */ html.a11y-spacing body > :not(.a11y) :is(p, li, dd, dt, label, summary, td, th, blockquote) { line-height: 1.9 !important; word-spacing: 0.16em !important; } html.a11y-spacing body > :not(.a11y) p { margin-bottom: 1em; } html.a11y-spacing body > :not(.a11y) :is(h1, h2, h3) { line-height: 1.35 !important; } /* Stop motion: no animation, no smooth scroll (site.js also pauses the launch video). */ html.a11y-still, html.a11y-still *, html.a11y-still *::before, html.a11y-still *::after { animation: none !important; transition: none !important; scroll-behavior: auto !important; } /* Big cursor: a 40px arrow (and hand on links and buttons). */ html.a11y-cursor, html.a11y-cursor * { cursor: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='40' height='40' viewBox='0 0 40 40'%3E%3Cpath d='M4 3l26 13-11 3-5 11z' fill='%23111114' stroke='%23fff' stroke-width='2.5' stroke-linejoin='round'/%3E%3C/svg%3E") 4 3, auto !important; } html.a11y-cursor :is(a, button, summary, label, input[type="checkbox"]) { cursor: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='40' height='40' viewBox='0 0 40 40'%3E%3Ccircle cx='20' cy='20' r='15' fill='%232F66D0' stroke='%23fff' stroke-width='3'/%3E%3Ccircle cx='20' cy='20' r='4' fill='%23fff'/%3E%3C/svg%3E") 20 20, pointer !important; }