/* Accessibility widget for /lp — self-hosted (CSP: no external widget hosts). */ /* Always-on keyboard affordances */ .a11y-skip { position: fixed; top: 10px; right: 10px; z-index: 10001; padding: 12px 18px; border-radius: 12px; background: #ffe066; color: #1a1023; font: 800 16px/1.2 Arial, sans-serif; text-decoration: none; transform: translateY(-160%); transition: transform 160ms ease; } .a11y-skip:focus { transform: none; outline: 3px solid #1a1023; outline-offset: 2px; } html.a11y-ready :focus-visible { outline: 3px solid #ffe066 !important; outline-offset: 3px !important; } /* Floating trigger */ .a11y-trigger { position: fixed; left: 14px; top: 50%; z-index: 10000; width: 54px; height: 54px; padding: 0; border: 2px solid rgba(255, 255, 255, 0.85); border-radius: 50%; background: #6d3fd6; color: #fff; box-shadow: 0 10px 30px rgba(0, 0, 0, 0.45); cursor: pointer; transform: translateY(-50%); display: grid; place-items: center; } .a11y-trigger svg { width: 30px; height: 30px; fill: currentColor; } .a11y-trigger:hover { background: #7f52ea; } /* Panel */ .a11y-panel { position: fixed; left: 14px; top: 50%; z-index: 10001; width: min(320px, calc(100vw - 28px)); max-height: min(78vh, 640px); overflow: auto; padding: 16px; border: 1px solid rgba(216, 200, 255, 0.35); border-radius: 18px; background: #15102a; color: #f4efff; box-shadow: 0 22px 60px rgba(0, 0, 0, 0.6); transform: translateY(-50%); font: 400 16px/1.4 Arial, sans-serif; direction: rtl; text-align: right; } .a11y-panel[hidden] { display: none; } .a11y-panel h2 { margin: 0 0 12px; font-size: 19px; font-weight: 900; } .a11y-panel-head { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-bottom: 8px; } .a11y-close { border: 1px solid rgba(255, 255, 255, 0.35); border-radius: 10px; background: transparent; color: inherit; font: 700 15px/1 Arial, sans-serif; padding: 8px 10px; cursor: pointer; } .a11y-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; } .a11y-option { width: 100%; display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 11px 12px; border: 1px solid rgba(216, 200, 255, 0.28); border-radius: 12px; background: rgba(255, 255, 255, 0.05); color: inherit; font: 700 16px/1.2 Arial, sans-serif; text-align: right; cursor: pointer; } .a11y-option:hover { background: rgba(255, 255, 255, 0.11); } .a11y-option[aria-pressed="true"] { background: #ffe066; color: #1a1023; border-color: #ffe066; } .a11y-option .a11y-state { font-size: 13px; font-weight: 400; opacity: 0.85; } .a11y-option[aria-pressed="true"] .a11y-state { opacity: 1; } .a11y-actions { display: grid; gap: 8px; margin-top: 12px; } .a11y-link-btn { padding: 11px 12px; border: 1px solid rgba(216, 200, 255, 0.28); border-radius: 12px; background: transparent; color: #d8c8ff; font: 700 15px/1.2 Arial, sans-serif; cursor: pointer; text-align: right; } .a11y-link-btn:hover { background: rgba(255, 255, 255, 0.08); } /* Statement dialog */ .a11y-statement { position: fixed; inset: 0; z-index: 10002; display: grid; place-items: center; padding: 16px; background: rgba(5, 3, 10, 0.78); } .a11y-statement[hidden] { display: none; } .a11y-statement-box { width: min(680px, 100%); max-height: 86vh; overflow: auto; padding: 24px; border-radius: 20px; background: #15102a; color: #f4efff; border: 1px solid rgba(216, 200, 255, 0.35); font: 400 17px/1.55 Arial, sans-serif; direction: rtl; text-align: right; } .a11y-statement-box h2 { margin: 0 0 12px; font-size: 24px; font-weight: 900; } .a11y-statement-box h3 { margin: 18px 0 6px; font-size: 18px; font-weight: 800; } .a11y-statement-box p, .a11y-statement-box li { margin: 0 0 8px; } .a11y-statement-box a { color: #ffe066; } .a11y-statement-box ul { padding-inline-start: 22px; margin: 0 0 8px; } /* ---- Modes (classes on ) ---- */ /* Text size: the page sizes type in px/clamp, not rem, so scale the layout. */ html.a11y-text-1 body { zoom: 1.15; } html.a11y-text-2 body { zoom: 1.32; } /* Contrast / grayscale: filter only the content, never the fixed UI (a filter turns its element into the containing block for fixed children). */ html.a11y-contrast main, html.a11y-contrast .site-header { filter: contrast(1.35) brightness(1.08); } html.a11y-contrast body { color: #fff; } html.a11y-gray main, html.a11y-gray .site-header { filter: grayscale(1); } html.a11y-contrast.a11y-gray main, html.a11y-contrast.a11y-gray .site-header { filter: grayscale(1) contrast(1.35) brightness(1.08); } /* Readable font */ html.a11y-font, html.a11y-font body, html.a11y-font body * { font-family: Arial, Helvetica, sans-serif !important; letter-spacing: 0.01em; } /* Highlight links and buttons */ html.a11y-links a, html.a11y-links button { text-decoration: underline !important; outline: 2px dashed #ffe066 !important; outline-offset: 3px; } html.a11y-links .a11y-trigger, html.a11y-links .a11y-panel * { outline: none !important; text-decoration: none !important; } /* Stop motion: also reveals everything the scroll animations would have faded in */ html.a11y-motion, html.a11y-motion * , html.a11y-motion *::before, html.a11y-motion *::after { animation: none !important; transition: none !important; scroll-behavior: auto !important; } html.a11y-motion .reveal, html.a11y-motion [data-enter], html.a11y-motion [data-depth], html.a11y-motion [data-parallax] { opacity: 1 !important; transform: none !important; } /* Big cursor */ html.a11y-cursor, html.a11y-cursor body, html.a11y-cursor a, html.a11y-cursor button { cursor: url("data:image/svg+xml;utf8,") 6 4, auto !important; } @media (max-width: 759px) { .a11y-trigger { width: 46px; height: 46px; left: 8px; top: auto; bottom: 120px; transform: none; } .a11y-trigger svg { width: 26px; height: 26px; } .a11y-panel { left: 8px; right: 8px; width: auto; top: auto; bottom: 90px; transform: none; max-height: 70vh; } } @media print { .a11y-trigger, .a11y-panel, .a11y-statement, .a11y-skip { display: none !important; } }