/* Corewise accessibility preferences, presentation layer. Shared verbatim by the hall and by every department site; copy, do not fork. Every rule here is driven by a class that a11y.js puts on , and by nothing else. Read a11y.js first for why that separation is strict. */ /* ---------- skip link ---------- Written in HTML on every page rather than injected, so it still works with JavaScript off, which is exactly the case where a visitor most needs it. inset-inline-start, not left: in Hebrew the page is RTL and a physical left throws the link to the wrong edge when it takes focus. */ .cw-skip { position: absolute; inset-block-start: -100vh; inset-inline-start: 1rem; z-index: 10000; padding: .7rem 1.2rem; border-radius: 0 0 10px 10px; background: #0e1216; color: #fff; font: 600 1rem/1.2 Rubik, system-ui, sans-serif; text-decoration: none; } .cw-skip:focus { inset-block-start: 0; outline: 3px solid #C6F24E; outline-offset: 2px; } /* ---------- text alternative to the 3D campus (hall only) ---------- Clipped rather than display:none, because display:none would take it out of the accessibility tree and defeat the entire point: a screen reader has to find this, a sighted mouse user never needs to. It unfolds into a real panel the moment anything inside it takes focus. */ .cw-alt { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap; } .cw-alt:focus-within, .cw-alt:focus { position: fixed; inset-block-start: 0; inset-inline-start: 0; width: min(30rem, 100vw); height: auto; max-height: 100vh; overflow-y: auto; margin: 0; padding: 1.5rem 1.75rem; clip: auto; clip-path: none; white-space: normal; z-index: 10001; background: #0e1216; color: #eef2f4; font: 400 1rem/1.7 Rubik, system-ui, sans-serif; box-shadow: 0 20px 60px rgba(0,0,0,.6); } .cw-alt h1 { margin: 0 0 .5rem; font-size: 1.5rem; } .cw-alt p { margin: 0 0 1rem; opacity: .8; font-size: .95rem; } .cw-alt ul { margin: 0; padding-inline-start: 1.2rem; } .cw-alt li { margin-block-end: .45rem; } .cw-alt a { color: #C6F24E; } /* A focus ring that is actually visible, everywhere, at AA contrast against both the light and the dark sites. Browsers hide the default ring on click; :focus-visible puts it back only for keyboard users, which is who needs it. */ :focus-visible { outline: 3px solid #C6F24E; outline-offset: 2px; } html.a11y-contrast-high :focus-visible { outline-color: #ff0; } /* ---------- trigger ---------- */ .cw-a11y-trigger { position: fixed; inset-block-end: max(1rem, env(safe-area-inset-bottom)); /* physical right, not inset-inline-start: the hall pins its own assistant launcher to physical left in both languages, and a logical property would swing this button straight onto it the moment the visitor picks English */ right: max(1rem, env(safe-area-inset-right)); z-index: 9997; width: 48px; height: 48px; display: grid; place-items: center; padding: 0; border: 1px solid rgba(255,255,255,.22); border-radius: 50%; background: #14181c; color: #C6F24E; cursor: pointer; box-shadow: 0 6px 22px rgba(0,0,0,.34); transition: transform .18s ease, background .18s ease; } .cw-a11y-trigger:hover { transform: scale(1.07); background: #1b2126; } .cw-a11y-trigger svg { width: 26px; height: 26px; fill: none; stroke: currentColor; stroke-width: 1.9; stroke-linecap: round; stroke-linejoin: round; } .cw-a11y-trigger svg circle { fill: currentColor; stroke: none; } /* ---------- panel ---------- */ .cw-a11y-panel { position: fixed; inset-block-end: calc(max(1rem, env(safe-area-inset-bottom)) + 60px); right: max(1rem, env(safe-area-inset-right)); z-index: 9998; width: min(23rem, calc(100vw - 2rem)); max-height: min(34rem, calc(100vh - 6rem)); overflow-y: auto; padding: 1.1rem; border: 1px solid rgba(255,255,255,.16); border-radius: 16px; background: #11161a; color: #eef2f4; font-family: Rubik, system-ui, sans-serif; box-shadow: 0 18px 54px rgba(0,0,0,.5); } /* [hidden] is only display:none at user-agent strength, so any display declaration of our own would quietly outrank it. */ .cw-a11y-panel[hidden] { display: none; } .cw-a11y-head { display: flex; align-items: center; justify-content: space-between; gap: .5rem; margin-block-end: .9rem; } .cw-a11y-head h2 { margin: 0; font-size: 1.05rem; font-weight: 700; color: #fff; } .cw-a11y-x { width: 32px; height: 32px; flex: none; border: 1px solid rgba(255,255,255,.2); border-radius: 8px; background: transparent; color: #eef2f4; font-size: .9rem; cursor: pointer; } .cw-a11y-x:hover { background: rgba(255,255,255,.09); } .cw-a11y-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: .5rem; } .cw-a11y-card { display: grid; gap: .18rem; place-items: center; min-height: 84px; padding: .55rem .3rem; border: 1px solid rgba(255,255,255,.15); border-radius: 12px; background: rgba(255,255,255,.045); color: #eef2f4; font: inherit; text-align: center; cursor: pointer; transition: background .15s ease, border-color .15s ease; } .cw-a11y-card:hover { background: rgba(255,255,255,.1); } .cw-a11y-card.is-on { border-color: #C6F24E; background: rgba(198,242,78,.15); } .cw-a11y-ico { font-size: 1.15rem; line-height: 1; color: #C6F24E; } .cw-a11y-lbl { font-size: .72rem; font-weight: 500; line-height: 1.25; } .cw-a11y-val { font-size: .66rem; opacity: .68; } .cw-a11y-reset { width: 100%; margin-block-start: .7rem; padding: .6rem; border: 1px solid rgba(255,255,255,.2); border-radius: 10px; background: transparent; color: #eef2f4; font: 600 .82rem Rubik, system-ui, sans-serif; cursor: pointer; } .cw-a11y-reset:hover { background: rgba(255,255,255,.09); } .cw-a11y-note, .cw-a11y-hint { margin: .6rem 0 0; font-size: .68rem; line-height: 1.5; opacity: .62; } .cw-a11y-link { display: inline-block; margin-block-start: .5rem; color: #C6F24E; font-size: .78rem; } /* visually hidden, still announced */ .cw-a11y-live { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap; } @media (max-width: 480px) { .cw-a11y-panel { width: calc(100vw - 1.5rem); right: .75rem; } .cw-a11y-card { min-height: 78px; } } /* =================================================================== The preference classes themselves. =================================================================== */ /* --- highlight links --- */ html.a11y-links a:not(.cw-a11y-trigger):not(.cw-skip) { text-decoration: underline !important; text-underline-offset: 3px !important; outline: 1px dashed currentColor; outline-offset: 2px; } /* --- contrast --- A filter on the ROOT element is the one place it is safe: per the Filter Effects spec the root is exempt from the rule that a filter creates a containing block for fixed-position descendants. Put this same filter on body instead and every position:fixed element on the site, including the hall's own overlays, silently reanchors. */ html.a11y-contrast-invert { filter: invert(1) hue-rotate(180deg); background: #fff; } html.a11y-contrast-mono { filter: grayscale(1) contrast(1.12); } /* Media should not be inverted twice; flip it back so photographs and video stay recognisable while the interface around them inverts. */ html.a11y-contrast-invert img, html.a11y-contrast-invert video, html.a11y-contrast-invert canvas, html.a11y-contrast-invert svg image, html.a11y-contrast-invert [style*="background-image"] { filter: invert(1) hue-rotate(180deg); } html.a11y-contrast-high body, html.a11y-contrast-high body * { background-color: #000 !important; background-image: none !important; color: #fff !important; border-color: #fff !important; text-shadow: none !important; } html.a11y-contrast-high a, html.a11y-contrast-high a * { color: #ff0 !important; text-decoration: underline !important; } html.a11y-contrast-high button, html.a11y-contrast-high [role="button"] { border: 2px solid #fff !important; } html.a11y-contrast-high img, html.a11y-contrast-high video { filter: contrast(1.15); } /* The widget has to survive whatever the visitor just did to the page, or they cannot reach the control that turns it off again. */ html.a11y-contrast-invert #cw-a11y-panel, html.a11y-contrast-invert #cw-a11y-trigger, html.a11y-contrast-mono #cw-a11y-panel, html.a11y-contrast-mono #cw-a11y-trigger { filter: invert(1) hue-rotate(180deg); } html.a11y-contrast-high #cw-a11y-panel, html.a11y-contrast-high #cw-a11y-panel * { background-color: #000 !important; color: #fff !important; border-color: #fff !important; } html.a11y-contrast-high .cw-a11y-card.is-on { outline: 2px solid #ff0 !important; } /* --- text size --- The sites size their type in rem, so moving the root moves everything that matters. Anything locked to px or vw stays put, which is the honest trade-off of scaling rather than zooming. */ html.a11y-text-115 { font-size: 115%; } html.a11y-text-130 { font-size: 130%; } html.a11y-text-150 { font-size: 150%; } /* the widget is a fixed instrument, not page content: keep it usable */ html[class*="a11y-text-"] #cw-a11y-panel, html[class*="a11y-text-"] #cw-a11y-trigger { font-size: 16px; } /* --- line spacing --- */ html.a11y-lines-16 body :is(p, li, dd, dt, blockquote, figcaption, td, th) { line-height: 1.6 !important; } html.a11y-lines-20 body :is(p, li, dd, dt, blockquote, figcaption, td, th) { line-height: 2 !important; } /* --- readable font --- An OS stack only. Shipping a webfont here would re-flow the page under a visitor who asked for nothing but legibility. */ html.a11y-font-readable body, html.a11y-font-readable body :not(code):not(pre):not(kbd) { font-family: Arial, "Segoe UI", Tahoma, "Noto Sans Hebrew", sans-serif !important; letter-spacing: .01em; } /* --- highlight headings --- */ html.a11y-headings body :is(h1, h2, h3, h4, h5, h6) { outline: 2px solid #C6F24E; outline-offset: 3px; background: rgba(198,242,78,.14); } /* --- cursor --- */ html.a11y-cursor-black, html.a11y-cursor-black * { cursor: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='32' height='32' viewBox='0 0 32 32'%3E%3Cpath d='M6 2l18 13-8 1.4 4.6 9.2-3.6 1.8L12.4 18 6 24z' fill='%23000' stroke='%23fff' stroke-width='1.4'/%3E%3C/svg%3E") 4 2, auto !important; } html.a11y-cursor-big, html.a11y-cursor-big * { cursor: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='56' height='56' viewBox='0 0 32 32'%3E%3Cpath d='M6 2l18 13-8 1.4 4.6 9.2-3.6 1.8L12.4 18 6 24z' fill='%23fff' stroke='%23000' stroke-width='1.4'/%3E%3C/svg%3E") 7 3, auto !important; } html.a11y-cursor-big.a11y-cursor-black, html.a11y-cursor-big.a11y-cursor-black * { cursor: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='56' height='56' viewBox='0 0 32 32'%3E%3Cpath d='M6 2l18 13-8 1.4 4.6 9.2-3.6 1.8L12.4 18 6 24z' fill='%23000' stroke='%23fff' stroke-width='1.4'/%3E%3C/svg%3E") 7 3, auto !important; } /* --- stop animations --- */ html.a11y-reduce-motion *, html.a11y-reduce-motion *::before, html.a11y-reduce-motion *::after { animation-duration: .001ms !important; animation-iteration-count: 1 !important; transition-duration: .001ms !important; scroll-behavior: auto !important; } /* The visitor asked the operating system for less motion. Honour it without waiting to be asked twice, and without overriding a deliberate opt-in. */ @media (prefers-reduced-motion: reduce) { html:not(.a11y-motion-ok) *, html:not(.a11y-motion-ok) *::before, html:not(.a11y-motion-ok) *::after { animation-duration: .001ms !important; animation-iteration-count: 1 !important; transition-duration: .001ms !important; } } /* --- print --- None of this follows the visitor onto paper. --- */ @media print { .cw-a11y-trigger, .cw-a11y-panel, .cw-skip { display: none !important; } html[class*="a11y-"] { filter: none !important; font-size: 100% !important; } html[class*="a11y-"] body, html[class*="a11y-"] body * { background: #fff !important; color: #000 !important; } }