/* ps-a11y.css: WCAG 2.1 AA accessibility toolbox. Global page overrides driven by classes/vars the toolbox toggles on , plus the floating trigger and panel it injects. Palette stays inside the site's own greyscale tokens (no colour), matching every other component. */ /* ── Self-hosted OpenDyslexic (progressive enhancement for the Dyslexia Font toggle) ── */ @font-face{ font-family:'OpenDyslexic';font-style:normal;font-weight:400;font-display:swap; src:url(https://cdn.jsdelivr.net/npm/@fontsource/opendyslexic@5.3.0/files/opendyslexic-latin-400-normal.woff2) format('woff2'), url(https://cdn.jsdelivr.net/npm/@fontsource/opendyslexic@5.3.0/files/opendyslexic-latin-400-normal.woff) format('woff'); } @font-face{ font-family:'OpenDyslexic';font-style:normal;font-weight:700;font-display:swap; src:url(https://cdn.jsdelivr.net/npm/@fontsource/opendyslexic@5.3.0/files/opendyslexic-latin-700-normal.woff2) format('woff2'), url(https://cdn.jsdelivr.net/npm/@fontsource/opendyslexic@5.3.0/files/opendyslexic-latin-700-normal.woff) format('woff'); } /* ── WCAG 2.3.3: respect prefers-reduced-motion at the CSS level ── */ @media (prefers-reduced-motion: reduce){ html body *:not(.ps-a11y-immune):not(.ps-a11y-immune *){ animation-duration:.01ms !important;animation-iteration-count:1 !important; transition-duration:.01ms !important;scroll-behavior:auto !important; } } /* ── WCAG 2.4.1: skip-to-content link, injected by ps-a11y.js ── */ html body .ps-a11y-skip{ position:fixed;left:12px;top:-60px;z-index:9999;padding:12px 22px;border-radius:10px; background:#202020;color:#fff;font:600 .9375rem/1 "Portfolio","Avenir Next","Helvetica Neue",Arial,sans-serif; text-decoration:none;transition:top .15s ease; } html body .ps-a11y-skip:focus{top:12px;outline:2px solid #fff;outline-offset:2px} /* ── WCAG 2.4.7: baseline visible focus ring, always on ── */ html body *:focus-visible{outline:2px solid #202020;outline-offset:2px;border-radius:4px} html body footer *:focus-visible{outline-color:#fff} html body *:focus:not(:focus-visible){outline:none} /* ── Body scroll lock while the panel is open ── */ html body[data-a11y-panel-open]{overflow:hidden !important} /* ── Immunity: the toolbox never applies its own overrides to itself ── */ html body .ps-a11y-immune, html body .ps-a11y-immune *{filter:none !important} html body .ps-a11y-immune [data-a11y-heading]{outline:none !important;box-shadow:none !important} html body .ps-a11y-immune [data-a11y-heading]:focus, html body .ps-a11y-immune [data-a11y-heading]:focus-visible{outline:none !important;box-shadow:none !important} /* Shorthand used below: exclude the immune subtree from every override. */ /* ═══ 1. Text scaling ═══ */ html.a11y-scaled-text{font-size:calc(1rem * var(--a11y-text-scale,1));zoom:var(--a11y-text-scale,1)} html.a11y-scaled-text .ps-a11y-immune{zoom:calc(1 / var(--a11y-text-scale,1))} /* ═══ 2a. Contrast: High ═══ */ html.a11y-high-contrast body{background-color:#fff !important;color:#000 !important} html.a11y-high-contrast :is(p,span,h1,h2,h3,h4,h5,h6,label,li,td,th,dt,dd):not(.ps-a11y-immune):not(.ps-a11y-immune *){color:#000 !important} html.a11y-high-contrast a:not(.ps-a11y-immune):not(.ps-a11y-immune *){color:#000 !important;text-decoration:underline !important;text-underline-offset:3px !important} html.a11y-high-contrast button:not(.ps-a11y-immune):not(.ps-a11y-immune *){border-color:#000 !important;color:#000 !important} html.a11y-high-contrast :is(input,textarea,select):not(.ps-a11y-immune):not(.ps-a11y-immune *){border-color:#000 !important;color:#000 !important;background-color:#fff !important} html.a11y-high-contrast :is(button,a,[role="button"]):not(.ps-a11y-immune):not(.ps-a11y-immune *) svg{color:inherit !important} html.a11y-high-contrast footer{background-color:#000 !important} html.a11y-high-contrast footer :is(p,span,a,button,li,h1,h2,h3,h4,h5,h6,dt,dd){color:#fff !important} html.a11y-high-contrast footer a{text-decoration:underline !important} html.a11y-high-contrast footer svg{color:#fff !important} /* ═══ 2b. Contrast: Maximum (dark mode) ═══ */ html.a11y-max-contrast body{background-color:#0a0a0a !important;color:#f0f0f0 !important} html.a11y-max-contrast :is(p,span,h1,h2,h3,h4,h5,h6,label,li,td,th,dt,dd):not(.ps-a11y-immune):not(.ps-a11y-immune *){color:#f0f0f0 !important} html.a11y-max-contrast a:not(.ps-a11y-immune):not(.ps-a11y-immune *){color:#f0f0f0 !important;text-decoration:underline !important;text-underline-offset:3px !important} html.a11y-max-contrast :is(section,main):not(.ps-a11y-immune){background-color:#0a0a0a !important} html.a11y-max-contrast :is(input,textarea,select):not(.ps-a11y-immune):not(.ps-a11y-immune *){border-color:#555 !important;color:#f0f0f0 !important;background-color:#1a1a1a !important} html.a11y-max-contrast button:not(.ps-a11y-immune):not(.ps-a11y-immune *){border-color:#555 !important;color:#f0f0f0 !important} html.a11y-max-contrast :is(button,a,[role="button"]):not(.ps-a11y-immune):not(.ps-a11y-immune *) svg{color:inherit !important} html.a11y-max-contrast [class*="border"]:not(.ps-a11y-immune):not(.ps-a11y-immune *):not(fieldset){border-color:#555 !important} html.a11y-max-contrast img:not(.ps-a11y-immune):not(.ps-a11y-immune *){opacity:.85} html.a11y-max-contrast footer{background-color:#000 !important} html.a11y-max-contrast footer :is(p,span,a,button,li,h1,h2,h3,h4,h5,h6,dt,dd){color:#fff !important} html.a11y-max-contrast footer a{text-decoration:underline !important} html.a11y-max-contrast footer svg{color:#fff !important} html.a11y-max-contrast nav:not(.ps-a11y-immune){background-color:rgba(10,10,10,.95) !important;backdrop-filter:blur(20px) !important} html.a11y-max-contrast nav:not(.ps-a11y-immune) :is(p,span,h1,h2,h3,h4,h5,h6,label){color:#f0f0f0 !important} html.a11y-max-contrast nav:not(.ps-a11y-immune) a{color:#f0f0f0 !important;text-decoration:underline !important} html.a11y-max-contrast nav:not(.ps-a11y-immune) button{color:#f0f0f0 !important;border-color:#555 !important} html.a11y-max-contrast nav:not(.ps-a11y-immune) svg{color:#f0f0f0 !important} html.a11y-max-contrast svg:not(.ps-a11y-immune):not(.ps-a11y-immune *):not([role="img"]){color:#f0f0f0 !important} /* ═══ 3. Underline links ═══ */ html.a11y-underline-links a:not(.ps-a11y-immune):not(.ps-a11y-immune *){text-decoration:underline !important;text-underline-offset:3px !important;text-decoration-color:currentColor !important} html.a11y-underline-links a:not(.ps-a11y-immune):not(.ps-a11y-immune *):hover{text-decoration-thickness:2px !important} /* ═══ 4. Pause animations ═══ */ html.a11y-pause-animations *:not(.ps-a11y-immune):not(.ps-a11y-immune *){animation-play-state:paused !important;transition-duration:.01ms !important;scroll-behavior:auto !important} /* ═══ 5. Dyslexia-friendly font ═══ */ html.a11y-readable-font :is(body,p,span,li,td,th,input,textarea,select,button,label,a,h1,h2,h3,h4,h5,h6):not(.ps-a11y-immune):not(.ps-a11y-immune *){ font-family:'OpenDyslexic','Comic Sans MS',system-ui,-apple-system,Arial,sans-serif !important; letter-spacing:.05em !important;word-spacing:.12em !important; } /* ═══ 6. Larger click targets (also always applied to the toolbox's own controls) ═══ */ html.a11y-large-targets :is(a,button,select,[role="button"],[role="switch"]):not(.ps-a11y-immune):not(.ps-a11y-immune *), html.a11y-large-targets :is(input[type="checkbox"],input[type="radio"]):not(.ps-a11y-immune):not(.ps-a11y-immune *){min-height:44px !important;min-width:44px !important} /* ═══ 7. Highlight keyboard focus (stronger ring, set by the Blind profile) ═══ */ html.a11y-highlight-focus *:not(.ps-a11y-immune):not(.ps-a11y-immune *):focus-visible{outline:3px solid #202020 !important;outline-offset:3px !important;box-shadow:0 0 0 5px rgba(32,32,32,.18) !important} html.a11y-highlight-focus footer *:focus-visible{outline-color:#fff !important;box-shadow:0 0 0 5px rgba(255,255,255,.25) !important} /* ═══ 8. Text spacing ═══ */ html.a11y-text-spacing :is(p,span,li,td,th,input,textarea,label,a,button,h1,h2,h3,h4,h5,h6):not(.ps-a11y-immune):not(.ps-a11y-immune *){ letter-spacing:var(--a11y-letter-spacing,.04em) !important;word-spacing:var(--a11y-word-spacing,.06em) !important; } /* ═══ 8b. Line height ═══ */ html.a11y-line-height :is(p,span,li,td,th,label,a,h1,h2,h3,h4,h5,h6):not(.ps-a11y-immune):not(.ps-a11y-immune *){line-height:var(--a11y-line-height,1.6) !important} /* ═══ 9. Saturation — overlay stays below the panel's own stacking context ═══ */ html.a11y-low-saturation::after, html.a11y-grayscale::after{content:'';position:fixed;inset:0;z-index:59;pointer-events:none} html.a11y-low-saturation::after{backdrop-filter:saturate(.35);-webkit-backdrop-filter:saturate(.35)} html.a11y-grayscale::after{backdrop-filter:saturate(0);-webkit-backdrop-filter:saturate(0)} /* ═══ 10. Big / extra-large cursor ═══ */ html.a11y-big-cursor *:not(.ps-a11y-immune):not(.ps-a11y-immune *){ 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='M5 2 L5 26 L11 20 L18 28 L22 25 L15 17 L23 17 Z' fill='%23202020' stroke='white' stroke-width='1.5'/%3E%3C/svg%3E") 4 2,auto !important; } html.a11y-big-cursor :is(a,button,[role="button"],input,textarea,select,label[for]):not(.ps-a11y-immune):not(.ps-a11y-immune *){ cursor:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='32' height='32' viewBox='0 0 32 32'%3E%3Ccircle cx='16' cy='16' r='12' fill='none' stroke='%23202020' stroke-width='2.5'/%3E%3Ccircle cx='16' cy='16' r='3' fill='%23202020'/%3E%3C/svg%3E") 16 16,pointer !important; } html.a11y-xl-cursor *:not(.ps-a11y-immune):not(.ps-a11y-immune *){ cursor:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='48' height='48' viewBox='0 0 48 48'%3E%3Cpath d='M7 3 L7 39 L16 30 L27 42 L33 37 L22 25 L34 25 Z' fill='%23202020' stroke='white' stroke-width='2'/%3E%3C/svg%3E") 6 3,auto !important; } html.a11y-xl-cursor :is(a,button,[role="button"],input,textarea,select,label[for]):not(.ps-a11y-immune):not(.ps-a11y-immune *){ cursor:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='48' height='48' viewBox='0 0 48 48'%3E%3Ccircle cx='24' cy='24' r='18' fill='none' stroke='%23202020' stroke-width='3'/%3E%3Ccircle cx='24' cy='24' r='4' fill='%23202020'/%3E%3C/svg%3E") 24 24,pointer !important; } /* ═══ 11. Highlight headings ═══ */ html.a11y-highlight-headings :is(h1,h2,h3,h4,h5,h6,[role="heading"]):not(.ps-a11y-immune):not(.ps-a11y-immune *){outline:2px dashed rgba(32,32,32,.45) !important;outline-offset:4px !important;border-radius:4px} /* ═══ 12. Hide images ═══ */ html.a11y-hide-images :is(img,picture,video):not(.ps-a11y-immune):not(.ps-a11y-immune *){opacity:.05 !important} html.a11y-hide-images svg:not(.ps-a11y-immune):not(.ps-a11y-immune *):not([role="img"]){opacity:.05 !important} /* ══════════════════════════════════════════════════════════ Trigger + panel — component styling (structure only; colour/position specifics are set inline by ps-a11y.js so the adaptive light/dark trigger can react without a reflow) ══════════════════════════════════════════════════════════ */ html body .ps-a11y-fab{position:fixed;z-index:60;display:flex;align-items:center;justify-content:center;border-radius:999px;border:none;cursor:pointer;padding:0;transition:background-color .35s ease,box-shadow .35s ease,transform .15s ease} html body .ps-a11y-fab:hover{transform:scale(1.06)} html body .ps-a11y-fab:active{transform:scale(.96)} html body .ps-a11y-fab-badge{position:absolute;top:-2px;right:-3px;display:flex;align-items:center;justify-content:center;min-width:18px;height:18px;padding:0 4px;border-radius:999px;background:#202020;color:#fff;font:700 .5625rem/1 "Portfolio","Avenir Next","Helvetica Neue",Arial,sans-serif;border:2px solid #202020;transition:border-color .35s ease} html body .ps-a11y-backdrop{position:fixed;inset:0;z-index:70;background:rgba(0,0,0,.18);opacity:0;pointer-events:none;transition:opacity .2s ease} html body .ps-a11y-backdrop.open{opacity:1;pointer-events:auto} html body .ps-a11y-panel{position:fixed;z-index:80;display:flex;flex-direction:column;overflow:hidden;background:#f8f9fb;color:#202020;box-shadow:0 20px 60px rgba(0,0,0,.14),0 2px 12px rgba(0,0,0,.05);font:1rem/1.5 "Portfolio","Avenir Next","Helvetica Neue",Arial,sans-serif;letter-spacing:0;word-spacing:0;transition:transform .3s cubic-bezier(.32,.72,0,1),opacity .3s cubic-bezier(.32,.72,0,1);opacity:.5;filter:none} html body .ps-a11y-panel:not(.open){pointer-events:none} @media (min-width:641px){ html body .ps-a11y-panel{bottom:8px;right:8px;width:420px;max-width:calc(100vw - 16px);height:80vh;min-height:420px;max-height:calc(100vh - 16px);border-radius:20px;transform:translateX(105%)} html body .ps-a11y-panel.open{transform:translateX(0);opacity:1} } @media (max-width:640px){ html body .ps-a11y-panel{bottom:0;left:0;right:0;width:auto;height:60vh;border-radius:14px 14px 0 0;transform:translateY(105%)} html body .ps-a11y-panel.open{transform:translateY(0);opacity:1} } html body .ps-a11y-head{flex:0 0 auto;position:relative;overflow:hidden;background:#202020;padding:16px 20px 12px;display:flex;align-items:center;justify-content:space-between} html body .ps-a11y-head h2{margin:0;color:#fff;font-size:20px;letter-spacing:-.02em;outline:none;box-shadow:none;border:none} html body .ps-a11y-head-actions{display:flex;align-items:center;gap:2px;margin-inline-end:-8px} html body .ps-a11y-icon-btn{display:flex;align-items:center;justify-content:center;width:36px;height:36px;border-radius:8px;background:transparent;border:none;color:#fff;cursor:pointer} html body .ps-a11y-icon-btn:hover{background:rgba(255,255,255,.1)} html body .ps-a11y-body{flex:1 1 auto;overflow-y:auto;-webkit-overflow-scrolling:touch;padding:10px 12px 16px;scrollbar-width:thin} html body .ps-a11y-section-label{margin:0 0 8px 2px;font-size:.6875rem;font-weight:700;letter-spacing:.12em;text-transform:uppercase;color:#202020} html body .ps-a11y-count-badge{display:inline-flex;align-items:center;justify-content:center;margin-inline-start:6px;width:18px;height:18px;border-radius:9px;background:#202020;color:#fff;font-size:.625rem;font-weight:700;vertical-align:middle} html body .ps-a11y-profile-bar{display:flex;align-items:center;justify-content:space-between;padding:7px 10px;margin-bottom:6px;border-radius:10px;background:rgba(32,32,32,.05)} html body .ps-a11y-profile-bar span{display:flex;align-items:center;gap:8px;font-weight:600;font-size:.8125rem;color:#202020} html body .ps-a11y-toggle{position:relative;display:inline-flex;align-items:center;width:40px;height:22px;flex:none;border-radius:11px;padding:2px;background:rgba(32,32,32,.14);border:none;cursor:pointer;transition:background-color .2s} html body .ps-a11y-toggle.on{background:#202020} html body .ps-a11y-toggle-knob{display:block;width:18px;height:18px;border-radius:9px;background:#fff;box-shadow:0 1px 3px rgba(0,0,0,.15);transform:translateX(0);transition:transform .2s} html body .ps-a11y-toggle.on .ps-a11y-toggle-knob{transform:translateX(18px)} html body .ps-a11y-profiles{display:grid;grid-template-columns:1fr 1fr;gap:5px;margin-bottom:14px} html body .ps-a11y-profile-pill{display:flex;align-items:center;gap:9px;padding:14px;border-radius:12px;cursor:pointer;border:1.5px solid rgba(32,32,32,.1);background:#fff;color:#202020;text-align:start;transition:border-color .15s,background-color .15s,color .15s} html body .ps-a11y-profile-pill:hover{border-color:rgba(32,32,32,.25)} html body .ps-a11y-profile-pill.active{border-color:#202020;background:#202020;color:#fff} html body .ps-a11y-profile-pill .icon{opacity:.55;flex:none;display:flex} html body .ps-a11y-profile-pill.active .icon{opacity:.9} html body .ps-a11y-profile-pill .label{flex:1;font-weight:600;font-size:.875rem} html body .ps-a11y-profile-pill .check{opacity:.65;display:flex} html body .ps-a11y-divider{height:1px;background:rgba(32,32,32,.08);margin-bottom:10px} html body .ps-a11y-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(8rem,1fr));gap:5px} html body .ps-a11y-card{position:relative;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:4px;min-height:136px;border-radius:14px;border:2px solid transparent;background:#fff;padding:10px 6px;cursor:pointer;box-shadow:none;transition:border-color .2s,box-shadow .2s} html body .ps-a11y-card:hover{box-shadow:0 1px 6px rgba(0,0,0,.05)} html body .ps-a11y-card.active{border-color:#202020;box-shadow:0 1px 4px rgba(0,0,0,.08)} html body .ps-a11y-card-check{position:absolute;top:5px;right:5px;color:#202020;display:flex} html body .ps-a11y-card .icon{color:rgba(32,32,32,.45);transition:color .15s;display:flex} html body .ps-a11y-card:hover .icon{color:rgba(32,32,32,.65)} html body .ps-a11y-card.active .icon{color:#202020} html body .ps-a11y-card .label{font-weight:600;font-size:.71875rem;text-align:center;line-height:1.25;color:rgba(32,32,32,.65);transition:color .15s} html body .ps-a11y-card:hover .label{color:rgba(32,32,32,.8)} html body .ps-a11y-card.active .label{color:#202020} html body .ps-a11y-card .level-label{min-height:.75rem;font-weight:700;font-size:.625rem;letter-spacing:.06em;text-transform:uppercase;color:transparent} html body .ps-a11y-card.active .level-label{color:#202020} html body .ps-a11y-card .chip{margin-top:2px;padding:3px 8px;border-radius:99px;background:rgba(32,32,32,.06);color:rgba(32,32,32,.45);font-weight:700;font-size:.5625rem;letter-spacing:.08em;text-transform:uppercase} html body .ps-a11y-card.active .chip{background:#202020;color:#fff} html body .ps-a11y-levelbar{display:flex;align-items:center;gap:2px;width:100%} html body .ps-a11y-levelbar span{height:4px;flex:1;border-radius:2px;background:rgba(32,32,32,.14)} html body .ps-a11y-levelbar span.filled{background:#202020} html body .ps-a11y-stepper{display:flex;align-items:center;justify-content:center;gap:5px;min-height:24px} html body .ps-a11y-stepper button{display:flex;align-items:center;justify-content:center;width:20px;height:20px;border-radius:10px;border:none;background:rgba(32,32,32,.08);color:rgba(32,32,32,.6);cursor:pointer} html body .ps-a11y-stepper button:disabled{background:rgba(32,32,32,.04);color:rgba(32,32,32,.18);cursor:default} html body .ps-a11y-stepper strong{min-width:14px;text-align:center;font-size:.6875rem;font-weight:700;color:#202020} html body .ps-a11y-foot{flex:0 0 auto;border-top:1px solid rgba(32,32,32,.08);padding:8px 16px;display:flex;justify-content:center} html body .ps-a11y-reset{display:flex;align-items:center;gap:5px;font-weight:600;font-size:.6875rem;color:rgba(32,32,32,.5);background:transparent;border:none;cursor:pointer} html body .ps-a11y-reset:hover{color:#202020} html body .ps-a11y-toast{position:absolute;left:12px;right:12px;bottom:48px;padding:9px 14px;border-radius:10px;background:#202020;color:#fbfbfb;font-size:.6875rem;text-align:center;opacity:0;transform:translateY(8px);pointer-events:none;transition:opacity .18s,transform .18s} html body .ps-a11y-toast.show{opacity:1;transform:translateY(0)} html body .ps-a11y-sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}