/* ═══════════════════════════════════════════════════════════ LUNARA — accessibility layer • skip link • preferences widget • the -class effects driven by js/a11y-boot.js + js/a11y-widget.js Loaded AFTER the page stylesheets so its overrides win. ═══════════════════════════════════════════════════════════ */ /* ── skip to content (RTL-safe via logical properties) ──────── */ .skip-link { position: fixed; top: 0; inset-inline-start: 1rem; z-index: 2000; transform: translateY(-140%); background: #1c1533; color: #f7e3b0; padding: 0.7rem 1.2rem; border: 2px solid #e8c288; border-radius: 0 0 10px 10px; font: 600 1rem/1 "Varela Round", system-ui, sans-serif; text-decoration: none; transition: transform 0.15s ease; } .skip-link:focus { transform: translateY(0); outline: 3px solid #f7e3b0; outline-offset: 2px; } /* stronger visible focus ring site-wide for keyboard users */ :focus-visible { outline: 3px solid #e8c288; outline-offset: 2px; } /* ── the accessibility widget ───────────────────────────────── */ .a11y-trigger { position: fixed; inset-block-end: 1.25rem; inset-inline-start: 1.25rem; z-index: 1900; width: 3rem; height: 3rem; display: grid; place-items: center; border-radius: 50%; border: 2px solid #e8c288; background: #1c1533; color: #f7e3b0; cursor: pointer; box-shadow: 0 6px 20px rgba(0, 0, 0, 0.45); } .a11y-trigger svg { width: 1.5rem; height: 1.5rem; } .a11y-trigger:hover { background: #2a2140; } .a11y-trigger.is-active { box-shadow: 0 0 0 3px rgba(232, 194, 136, 0.5), 0 6px 20px rgba(0, 0, 0, 0.45); } .a11y-panel { position: fixed; inset-block-end: 5.25rem; inset-inline-start: 1.25rem; z-index: 1900; width: min(22rem, calc(100vw - 2.5rem)); max-height: min(32rem, calc(100vh - 7rem)); overflow-y: auto; background: #14102a; color: #f4eede; border: 1px solid #3a2f57; border-radius: 16px; box-shadow: 0 18px 48px rgba(0, 0, 0, 0.6); padding: 1rem; } .a11y-panel-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 0.75rem; } .a11y-panel-title { font: 700 1.1rem/1.2 "Cinzel", "Varela Round", serif; color: #f7e3b0; margin: 0; } .a11y-close { background: none; border: none; color: #f4eede; font-size: 1.6rem; line-height: 1; cursor: pointer; padding: 0.1rem 0.4rem; border-radius: 8px; } .a11y-close:hover { background: rgba(255, 255, 255, 0.08); } .a11y-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 0.5rem; } .a11y-card { display: flex; flex-direction: column; gap: 0.25rem; align-items: center; justify-content: center; min-height: 4.5rem; padding: 0.5rem 0.35rem; text-align: center; background: #1c1738; border: 1px solid #3a2f57; border-radius: 12px; color: #f4eede; cursor: pointer; } .a11y-card:hover { border-color: #6b5a95; } .a11y-card.is-active { border-color: #e8c288; background: #241c44; } .a11y-card-label { font: 600 0.8rem/1.15 "Varela Round", system-ui, sans-serif; } .a11y-card-value { font: 500 0.72rem/1 "Varela Round", system-ui, sans-serif; color: #c9bfe0; } .a11y-card.is-active .a11y-card-value { color: #e8c288; } .a11y-panel-foot { margin-top: 0.85rem; } .a11y-reset { width: 100%; padding: 0.55rem; border-radius: 10px; cursor: pointer; background: #2a2140; color: #f7e3b0; border: 1px solid #6b5a95; font: 600 0.9rem/1 "Varela Round", system-ui, sans-serif; } .a11y-reset:hover { background: #33285080; border-color: #e8c288; } .a11y-note { margin: 0.6rem 0 0; font-size: 0.72rem; line-height: 1.4; color: #b6acce; } /* ═══ -class effects (set by the widget) ═══ */ /* highlight links */ html.a11y-links a { text-decoration: underline !important; text-underline-offset: 2px; outline: 1px solid currentColor; outline-offset: 1px; } /* highlight headings */ html.a11y-headings h1, html.a11y-headings h2, html.a11y-headings h3, html.a11y-headings h4, html.a11y-headings h5, html.a11y-headings h6 { outline: 2px dashed #e8c288; outline-offset: 3px; background: rgba(232, 194, 136, 0.08); } /* text size — scales rem-based type from the root */ html.a11y-text-115 { font-size: 115%; } html.a11y-text-130 { font-size: 130%; } html.a11y-text-150 { font-size: 150%; } /* line spacing */ html.a11y-lines-16 body, html.a11y-lines-16 p, html.a11y-lines-16 li, html.a11y-lines-16 a, html.a11y-lines-16 h1, html.a11y-lines-16 h2, html.a11y-lines-16 h3 { line-height: 1.6 !important; } html.a11y-lines-20 body, html.a11y-lines-20 p, html.a11y-lines-20 li, html.a11y-lines-20 a, html.a11y-lines-20 h1, html.a11y-lines-20 h2, html.a11y-lines-20 h3 { line-height: 2 !important; } /* readable font — OS stack only, no webfont reflow surprises */ html.a11y-readable-font body, html.a11y-readable-font body *:not(.a11y-trigger):not(.a11y-trigger *) { font-family: system-ui, -apple-system, "Segoe UI", Arial, "Noto Sans Hebrew", sans-serif !important; } /* contrast modes — applied per top-level block so the widget itself is never filtered */ html.a11y-contrast-invert body > *:not(#a11y-widget-trigger):not(#a11y-widget-panel):not(.a11y-live):not(#siteHeader) { filter: invert(1) hue-rotate(180deg); } html.a11y-contrast-mono body > *:not(#a11y-widget-trigger):not(#a11y-widget-panel):not(.a11y-live):not(#siteHeader) { filter: grayscale(1); } html.a11y-contrast-high body > *:not(#a11y-widget-trigger):not(#a11y-widget-panel):not(.a11y-live):not(#siteHeader) { filter: contrast(1.35) brightness(1.06); } /* cursors (SVG data-uri, black arrow; big variant is larger) */ html.a11y-cursor-black * { cursor: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24'%3E%3Cpath d='M4 2l14 8-6 1.5 3.5 6.5-2.5 1.5-3.5-6.5L4 18z' fill='%23000' stroke='%23fff' stroke-width='1.2'/%3E%3C/svg%3E") 3 2, auto !important; } html.a11y-cursor-big * { cursor: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='44' height='44' viewBox='0 0 24 24'%3E%3Cpath d='M4 2l14 8-6 1.5 3.5 6.5-2.5 1.5-3.5-6.5L4 18z' fill='%23000' stroke='%23fff' stroke-width='1.2'/%3E%3C/svg%3E") 5 3, auto !important; } /* stop animations */ html.a11y-reduce-motion *, html.a11y-reduce-motion *::before, html.a11y-reduce-motion *::after { animation-duration: 0.001ms !important; animation-iteration-count: 1 !important; transition-duration: 0.001ms !important; scroll-behavior: auto !important; } /* keep the widget legible when contrast filters are on */ html[class*="a11y-contrast-"] #a11y-widget-panel, html[class*="a11y-contrast-"] #a11y-widget-trigger { filter: none !important; } /* ── responsive ─────────────────────────────────────────────── */ @media (max-width: 480px) { .a11y-panel { inset-inline: 0.75rem auto; width: calc(100vw - 1.5rem); } } /* ── print: never carry comfort filters onto paper ──────────── */ @media print { .skip-link, .a11y-trigger, .a11y-panel, .a11y-live { display: none !important; } html[class*="a11y-"] body > * { filter: none !important; } html[class*="a11y-text-"] { font-size: 100% !important; } html[class*="a11y-lines-"] body, html[class*="a11y-lines-"] p, html[class*="a11y-lines-"] li { line-height: normal !important; } }