/* ============================================================ H.T.Z STUDIOS · Accessibility widget + adjustment classes Loaded on every page, after the page's own stylesheets. The widget DOM is built by scripts/a11y.js; user choices apply as a11y-* classes on . ============================================================ */ /* ============================================================ 1 · WIDGET ============================================================ */ .a11y { position: fixed; bottom: 18px; inset-inline-start: 18px; /* RTL: bottom-right */ z-index: 380; font-family: var(--font-sans, sans-serif); } .a11y__sr { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; } .a11y__btn { display: grid; place-items: center; width: 48px; height: 48px; border: 1px solid rgba(251, 247, 238, .25); border-radius: 50%; background: var(--green-600, #1F4A36); color: var(--paper-50, #FBF7EE); cursor: pointer; box-shadow: 0 10px 30px -8px rgba(0, 0, 0, .4); transition: transform .25s ease, background .2s ease; } .a11y__btn svg { width: 26px; height: 26px; } .a11y__btn:hover { background: var(--green-500, #2D5F4B); transform: translateY(-2px); } .a11y__btn:focus-visible { outline: 2px solid var(--accent-butter, #E6B958); outline-offset: 3px; } .a11y__panel { position: absolute; bottom: 60px; inset-inline-start: 0; width: min(300px, calc(100vw - 36px)); padding: 16px; border-radius: 18px; background: var(--green-900, #081710); color: var(--paper-50, #FBF7EE); border: 1px solid rgba(251, 247, 238, .16); box-shadow: 0 24px 60px -18px rgba(0, 0, 0, .6); } .a11y__head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 12px; font-size: 15px; } .a11y__close { width: 30px; height: 30px; border: 1px solid rgba(251, 247, 238, .2); border-radius: 50%; background: transparent; color: inherit; cursor: pointer; font-size: 13px; } .a11y__close:hover { background: rgba(251, 247, 238, .1); } .a11y__grid { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin-bottom: 10px; } .a11y__opt { padding: 10px 8px; border: 1px solid rgba(251, 247, 238, .2); border-radius: 10px; background: rgba(251, 247, 238, .05); color: inherit; font-size: 13px; font-weight: 500; cursor: pointer; transition: background .15s ease, border-color .15s ease; } .a11y__opt:hover { background: rgba(251, 247, 238, .12); } .a11y__opt[aria-pressed="true"] { background: var(--accent-butter, #E6B958); border-color: var(--accent-butter, #E6B958); color: var(--green-900, #081710); font-weight: 700; } .a11y__reset { width: 100%; padding: 9px; margin-bottom: 10px; border: 1px solid rgba(251, 247, 238, .25); border-radius: 10px; background: transparent; color: inherit; font-size: 13px; cursor: pointer; } .a11y__reset:hover { background: rgba(251, 247, 238, .1); } .a11y__link { display: block; text-align: center; font-size: 12.5px; color: var(--accent-butter, #E6B958); text-decoration: underline; text-underline-offset: 3px; } .a11y__panel button:focus-visible, .a11y__link:focus-visible { outline: 2px solid var(--accent-butter, #E6B958); outline-offset: 2px; } @media print { .a11y { display: none; } } /* ============================================================ 2 · TEXT SIZE (zoom scales px-based type uniformly) ============================================================ */ html.a11y-font-1 body { zoom: 1.12; } html.a11y-font-2 body { zoom: 1.25; } /* ============================================================ 3 · HIGH CONTRAST ============================================================ */ html.a11y-contrast { --fg-2: var(--stone-900); --fg-3: var(--stone-700); --fg-4: var(--stone-600); --line-1: rgba(20, 20, 17, .25); --line-2: rgba(20, 20, 17, .38); --focus-ring: rgba(8, 23, 16, .95); } /* muted cream text on the dark sections becomes full cream */ html.a11y-contrast .hero__sub, html.a11y-contrast .hero__svc span, html.a11y-contrast .hero__scroll, html.a11y-contrast .nav__status, html.a11y-contrast .nav__links a, html.a11y-contrast .cta__sub, html.a11y-contrast .channel__lab, html.a11y-contrast .cta__consent, html.a11y-contrast .cta__more, html.a11y-contrast .cta__or, html.a11y-contrast .agent-card__stat, html.a11y-contrast .foot, html.a11y-contrast .foot__brand p, html.a11y-contrast .foot__col h2, html.a11y-contrast .foot__col a, html.a11y-contrast .foot__bot, html.a11y-contrast .terms-hero p, html.a11y-contrast .msg--in { color: #FFFFFF; } html.a11y-contrast .manifesto .sec-lab, html.a11y-contrast .manifesto__sign { color: var(--paper-ink); } html.a11y-contrast .panel .srv__lab, html.a11y-contrast .panel .srv__desc, html.a11y-contrast .panel .srv__list li { opacity: 1; color: #FFFFFF; } html.a11y-contrast .hud { color: rgba(251, 247, 238, .85); } /* ============================================================ 4 · STOP ANIMATIONS (mirrors prefers-reduced-motion) ============================================================ */ html.a11y-stop-motion *, html.a11y-stop-motion *::before, html.a11y-stop-motion *::after { animation-duration: .001s !important; animation-iteration-count: 1 !important; transition-duration: .001s !important; } html.a11y-stop-motion [data-reveal], html.a11y-stop-motion [data-stagger] > * { opacity: 1 !important; transform: none !important; } html.a11y-stop-motion .hero__title .line > span, html.a11y-stop-motion .t-lines .line > span { transform: none !important; } html.a11y-stop-motion .hero__brand, html.a11y-stop-motion .hero__offer, html.a11y-stop-motion .hero__sub, html.a11y-stop-motion .hero__cta, html.a11y-stop-motion .hero__foot { opacity: 1 !important; transform: none !important; } html.a11y-stop-motion .hero__content { transform: none !important; opacity: 1 !important; } html.a11y-stop-motion .manifesto__quote .w { opacity: 1 !important; } html.a11y-stop-motion .marquee__track { animation: none !important; transform: none !important; } html.a11y-stop-motion .sec-lab::after { transform: scaleX(1) !important; } html.a11y-stop-motion .cursor-dot, html.a11y-stop-motion .cursor-ring { display: none !important; } html.a11y-stop-motion body, html.a11y-stop-motion a, html.a11y-stop-motion button { cursor: auto !important; } /* ============================================================ 5 · READABLE FONT ============================================================ */ html.a11y-readable body, html.a11y-readable body * { font-family: Arial, "Heebo", "Segoe UI", sans-serif !important; letter-spacing: 0 !important; font-style: normal !important; } /* ============================================================ 6 · LINK HIGHLIGHTING ============================================================ */ html.a11y-links a { text-decoration: underline !important; text-underline-offset: 3px; text-decoration-thickness: 1.5px; } /* round-5 effects under "stop animations" */ html.a11y-stop-motion .hud-x { transform: none !important; } html.a11y-stop-motion .foot__wm { transform: none !important; } html.a11y-stop-motion .panel::before, html.a11y-stop-motion .btn-acc::before, html.a11y-stop-motion .btn-hero::before { opacity: 0 !important; }