/* ===================================================================== Eco Epoxy — Accessibility Widget (self-hosted, UserWay-style) Trigger (left tab desktop / floatbar button mobile) opens a panel of user-controlled adjustments. State persists in localStorage. ===================================================================== */ /* ---- launcher (left tab, desktop) ---- */ .a11y-launch{ position:fixed;left:0;top:42%;z-index:130; width:48px;height:48px;border-radius:0 10px 10px 0; background:var(--sage-dark,#717c54);color:#fff; display:flex;align-items:center;justify-content:center; box-shadow:2px 2px 12px rgba(0,0,0,.25);cursor:pointer; transition:width .15s,background .15s; } .a11y-launch:hover,.a11y-launch:focus-visible{width:56px;background:var(--sage-darker,#566041)} .a11y-launch svg{width:28px;height:28px} @media(max-width:879px){.a11y-launch{display:none}} /* mobile uses floatbar button */ /* ---- panel ---- */ .a11y-panel{ position:fixed;left:0;top:0;bottom:0;z-index:140;width:min(92vw,360px); background:#fff;color:#222;box-shadow:6px 0 30px rgba(0,0,0,.25); transform:translateX(-105%);transition:transform .28s cubic-bezier(.4,0,.2,1); display:flex;flex-direction:column;font-family:var(--sans,sans-serif); } .a11y-panel.is-open{transform:translateX(0)} .a11y-panel__head{background:var(--sage-dark,#717c54);color:#fff;padding:1rem 1.2rem;display:flex;align-items:center;justify-content:space-between;gap:.6rem} .a11y-panel__head h2{font-size:1.15rem;margin:0;color:#fff;font-family:var(--sans,sans-serif);font-weight:800} .a11y-panel__close{color:#fff;font-size:1.6rem;line-height:1;background:none;border:none;cursor:pointer;padding:.2rem .5rem;border-radius:6px} .a11y-panel__close:hover{background:rgba(255,255,255,.18)} .a11y-panel__body{padding:1rem;overflow-y:auto;flex:1} .a11y-grid{display:grid;grid-template-columns:1fr 1fr;gap:.6rem} .a11y-opt{ display:flex;flex-direction:column;align-items:center;justify-content:center;gap:.45rem; text-align:center;padding:.9rem .5rem;border:2px solid #e2e2e2;border-radius:12px; background:#fafafa;color:#333;font-size:.82rem;font-weight:700;cursor:pointer; transition:border-color .15s,background .15s;min-height:88px; } .a11y-opt:hover{border-color:var(--sage,#929e74)} .a11y-opt svg{width:26px;height:26px;color:var(--sage-dark,#717c54)} .a11y-opt[aria-pressed="true"]{border-color:var(--sage-dark,#717c54);background:var(--sage-tint,#eef1e6);color:var(--sage-darker,#566041)} .a11y-opt[aria-pressed="true"] svg{color:var(--sage-darker,#566041)} .a11y-opt .lvl{font-size:.7rem;font-weight:800;color:var(--sage-dark,#717c54)} .a11y-reset{width:100%;margin-top:.9rem;padding:.8rem;border-radius:10px;background:#3a3a3a;color:#fff;font-weight:700;border:none;cursor:pointer} .a11y-reset:hover{background:#222} .a11y-panel__foot{padding:.8rem 1rem;border-top:1px solid #eee;font-size:.76rem;color:#666;text-align:center} .a11y-panel__foot a{color:var(--sage-dark,#717c54);font-weight:700} .a11y-scrim{position:fixed;inset:0;background:rgba(0,0,0,.35);z-index:135;opacity:0;visibility:hidden;transition:.25s} .a11y-scrim.is-open{opacity:1;visibility:visible} /* ---- reading guide bar ---- */ .a11y-guide{position:fixed;left:0;right:0;height:14px;background:rgba(146,158,116,.35);border-top:2px solid #566041;border-bottom:2px solid #566041;z-index:125;pointer-events:none;display:none} html.a11y-guide-on .a11y-guide{display:block} /* ===================================================================== EFFECT CLASSES (applied to ) ===================================================================== */ /* font scaling */ html.a11y-fs-1{font-size:112.5%} html.a11y-fs-2{font-size:125%} html.a11y-fs-3{font-size:140%} /* readable font */ html.a11y-readable body,html.a11y-readable h1,html.a11y-readable h2,html.a11y-readable h3, html.a11y-readable h4,html.a11y-readable p,html.a11y-readable a,html.a11y-readable span, html.a11y-readable li,html.a11y-readable label,html.a11y-readable button,html.a11y-readable input{ font-family:Verdana,Tahoma,'Segoe UI',Arial,sans-serif !important;letter-spacing:.01em; } /* spacing */ html.a11y-spacing p,html.a11y-spacing li,html.a11y-spacing a,html.a11y-spacing span{letter-spacing:.12em !important;word-spacing:.16em !important} html.a11y-lineheight p,html.a11y-lineheight li{line-height:2 !important} /* highlight links */ html.a11y-links a{outline:2px solid #1a5fb4 !important;outline-offset:2px;background:#fff8c4 !important;color:#0b3d91 !important;text-decoration:underline !important} /* pause animations */ html.a11y-noanim *,html.a11y-noanim *::before,html.a11y-noanim *::after{animation:none !important;transition:none !important;scroll-behavior:auto !important} /* big cursor */ html.a11y-cursor,html.a11y-cursor *{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='M6 2l30 18-13 3 8 16-6 3-8-16-11 8z' fill='%23000' stroke='%23fff' stroke-width='2'/%3E%3C/svg%3E") 4 2, auto !important} /* high contrast (dark) */ html.a11y-contrast body{background:#000 !important;color:#fff !important} html.a11y-contrast .site-header,html.a11y-contrast .topbar,html.a11y-contrast .section, html.a11y-contrast .card,html.a11y-contrast .site-footer,html.a11y-contrast .mega, html.a11y-contrast .quote-card,html.a11y-contrast .faq__item,html.a11y-contrast .step, html.a11y-contrast .finish-card,html.a11y-contrast .review,html.a11y-contrast .sidebar-box, html.a11y-contrast .section--tint,html.a11y-contrast .section--cream,html.a11y-contrast .section--dark{ background:#000 !important;color:#fff !important;border-color:#fff !important } html.a11y-contrast h1,html.a11y-contrast h2,html.a11y-contrast h3,html.a11y-contrast h4, html.a11y-contrast p,html.a11y-contrast li,html.a11y-contrast span,html.a11y-contrast .lead, html.a11y-contrast .eyebrow,html.a11y-contrast label{color:#fff !important} html.a11y-contrast a{color:#ffe44d !important} html.a11y-contrast .btn{background:#ffe44d !important;color:#000 !important;border-color:#000 !important} /* invert / negative */ html.a11y-invert{filter:invert(1) hue-rotate(180deg)} html.a11y-invert img,html.a11y-invert video,html.a11y-invert iframe,html.a11y-invert .hero__video{filter:invert(1) hue-rotate(180deg)} /* left align text */ html.a11y-align p,html.a11y-align li,html.a11y-align h1,html.a11y-align h2,html.a11y-align h3{text-align:left !important} /* make sure the panel/launcher never get inverted into oblivion */ html.a11y-invert .a11y-panel,html.a11y-invert .a11y-launch{filter:invert(1) hue-rotate(180deg)}