/* ============================================================ Accessibility widget — Israeli Standard 5568 / WCAG 2.0 AA Shared by index.html and accessibility.html. Deliberately does NOT use CSS filter() on : a filter on the root element creates a containing block for position:fixed children, which would break the floating nav, the mobile bar and this button itself. High contrast and dark mode re-map the design tokens instead, which also keeps the photographs looking right. ============================================================ */ .a11y-fab{position:fixed;inset-inline-end:18px;bottom:18px;z-index:200; width:52px;height:52px;border-radius:50%;border:1px solid var(--ivory); background:var(--ink);color:var(--ivory); display:flex;align-items:center;justify-content:center; cursor:pointer;-webkit-appearance:none;appearance:none; box-shadow:0 4px 18px rgba(46,46,46,.32);transition:transform .25s ease} .a11y-fab:hover{transform:scale(1.06)} body.is-scrolled .a11y-fab{bottom:calc(90px + env(safe-area-inset-bottom))} @media (min-width:901px){body.is-scrolled .a11y-fab{bottom:18px}} /* The panel is ~420px tall. On a phone in landscape, or at 150% text zoom, it is taller than the screen — and with no scrolling of its own the text-size buttons end up above the top edge with no way to reach them. Someone who has just zoomed in is exactly the person who needs to zoom back out. */ /* Percentages, NOT vw/dvh. The widget's own text-size control applies `zoom` to , and viewport units keep resolving against the UNZOOMED viewport — so at 150% the panel computed to 383px inside a 375px screen and hung off both edges. On a fixed element a percentage resolves against the initial containing block, which zoom does scale, so these track the real space. */ .a11y-panel{position:fixed;inset-inline-end:18px;bottom:82px;z-index:201; width:255px;max-width:calc(100% - 36px);display:none; max-height:calc(100% - 100px);overflow-y:auto;overscroll-behavior:contain; background:var(--ivory);color:var(--ink);border:1px solid var(--champagne); box-shadow:0 14px 44px rgba(46,46,46,.20);padding:20px 18px 16px} body.is-scrolled .a11y-panel{max-height:calc(100% - 172px)} @media (min-width:901px){body.is-scrolled .a11y-panel{max-height:calc(100% - 100px)}} .a11y-panel[data-open]{display:block} /* the menu is a modal; the widget must not float above it */ body.menu-open .a11y-fab,body.menu-open .a11y-panel{display:none} body.is-scrolled .a11y-panel{bottom:calc(154px + env(safe-area-inset-bottom))} @media (min-width:901px){body.is-scrolled .a11y-panel{bottom:82px}} .a11y-panel h2{font-family:'Cormorant Garamond',Georgia,serif;font-weight:300; font-size:22px;margin:0 0 2px} .a11y-panel .sub{font-size:9.5px;letter-spacing:.2em;text-transform:uppercase; color:var(--taupe-ink);margin:0 0 14px} .a11y-panel .row{display:flex;align-items:center;justify-content:space-between; gap:10px;margin:0 0 9px} .a11y-panel .row>span{font-size:10px;letter-spacing:.16em;text-transform:uppercase} .a11y-step{display:flex;gap:6px} .a11y-panel button{font-family:inherit;font-weight:300;cursor:pointer; -webkit-appearance:none;appearance:none;background:transparent;color:inherit; border:1px solid var(--champagne); transition:background .2s ease,color .2s ease,border-color .2s ease} .a11y-step button{width:30px;height:30px;font-size:14px;line-height:1} .a11y-panel .opt{display:block;width:100%;text-align:start; padding:10px 12px;margin:0 0 6px;font-size:10px;letter-spacing:.16em;text-transform:uppercase} .a11y-panel button:hover{background:var(--beige-2);border-color:var(--taupe-ink)} .a11y-panel .opt[aria-pressed="true"]{background:var(--ink);color:var(--ivory);border-color:var(--ink)} .a11y-panel .reset{width:100%;margin-top:8px;padding:11px;font-size:10px; letter-spacing:.2em;text-transform:uppercase;border-color:var(--taupe-ink)} .a11y-panel .note{font-size:11px;line-height:1.6;color:var(--taupe-ink);margin:14px 0 0} .a11y-panel .note a{color:inherit} /* --- high contrast: re-map the tokens, never filter the root --- */ html.a11y-contrast{--ivory:#fff;--beige:#e6ded1;--beige-2:#fff; --taupe:#5c4f3c;--taupe-ink:#33291a;--champagne:#6b5c47;--ink:#000;--ink-2:#101010} html.a11y-contrast .fine{color:#241d13} html.a11y-contrast .opening .scrim{background:linear-gradient(to top, rgba(0,0,0,.90) 0%,rgba(0,0,0,.78) 40%,rgba(0,0,0,.55) 70%,rgba(0,0,0,.72) 100%)} html.a11y-contrast .form{border-color:#6b5c47} /* --- dark mode: a real dark palette (invert() would ruin the photographs) --- */ html.a11y-dark{--ivory:#12100e;--beige:#1c1915;--beige-2:#17140f; --taupe:#a8977d;--taupe-ink:#c9bca4;--champagne:#7d6f58;--ink:#f4f1ea;--ink-2:#ded7c9} html.a11y-dark body{background:#12100e} html.a11y-dark .fine{color:#c3b9a7} /* The opening screen sits on a dark photograph, so its text is light in EVERY mode. Dark mode remaps --ivory to near-black, which would otherwise turn the whole hero — her name, the tagline, both buttons — into an invisible block. Contrast mode already overrides the scrim; dark mode needs the same. */ html.a11y-dark .opening .in, html.a11y-dark .hero-mark{color:#f4f1ea} html.a11y-dark .opening .scrim{background:linear-gradient(to top, rgba(0,0,0,.88) 0%,rgba(0,0,0,.74) 38%,rgba(0,0,0,.42) 66%,rgba(0,0,0,.66) 100%)} /* form validation text is hard-coded rust; on the dark panel it drops to 2.1:1 */ html.a11y-dark .err,html.a11y-dark .alert{color:#f0a58c} html.a11y-dark .alert{border-left-color:#f0a58c} html.a11y-dark footer,html.a11y-dark .form{border-color:#332c23} html.a11y-dark .rgrid blockquote,html.a11y-dark .details div{border-top-color:#332c23} html.a11y-dark .a11y-fab{border-color:#332c23} /* --- emphasise links --- */ /* the signatures are set in a script face; underlining them is illegible. .mark no longer exists on the home page — .hero-mark and .menu-mark do. */ html.a11y-links a:not(.btn):not(.mark):not(.hero-mark):not(.menu-mark){text-decoration:underline; text-underline-offset:3px;text-decoration-thickness:1px} html.a11y-links .btn{outline:1px solid currentColor;outline-offset:2px} /* --- readable font --- */ html.a11y-readable *:not(.a11y-panel h2){font-family:Inter,Arial,Helvetica,sans-serif !important; letter-spacing:normal !important} /* --- stop motion --- */ html.a11y-still,html.a11y-still *{animation:none !important;transition:none !important} html.a11y-still{scroll-behavior:auto !important} html.a11y-still [data-anim]{opacity:1 !important;visibility:visible !important;transform:none !important} html.a11y-still nav{transform:none !important;opacity:1 !important}