/* =========================================================== ZW Accessibility Widget v1.1 - .zwa-* classes namespace the widget UI - page-effect states use the zwa- prefix on - theming via CSS variables on #zwa-root =========================================================== */ #zwa-root{ --zwa-accent:#b08d57; --zwa-font:'Mulish', system-ui, -apple-system, 'Segoe UI', sans-serif; --zwa-panel-bg:#15171a; --zwa-panel-bg2:#0e0f11; --zwa-card:#1c1f23; --zwa-card-active:#23262b; --zwa-border:#2a2d32; --zwa-text:#ece9e3; --zwa-muted:#9a948a; --zwa-switch-off:#3a3d42; --zwa-knob:#ffffff; } #zwa-root.zwa-theme-light{ --zwa-panel-bg:#ffffff; --zwa-panel-bg2:#f3f1ed; --zwa-card:#f6f4f1; --zwa-card-active:#fbf4e9; --zwa-border:#e3ded6; --zwa-text:#2b2b2b; --zwa-muted:#7a756d; --zwa-switch-off:#cfc9c0; --zwa-knob:#ffffff; } /* ---------- Floating trigger button ---------- */ .zwa-fab{ position:fixed;z-index:2147483000; width:54px;height:54px;border:0;cursor:pointer;padding:0; color:#fff;background:#1e1e1e; display:flex;align-items:center;justify-content:center; box-shadow:0 6px 22px rgba(0,0,0,.35); transition:transform .15s ease; } .zwa-fab:hover{transform:scale(1.06);} .zwa-fab:focus-visible{outline:3px solid var(--zwa-accent);outline-offset:2px;} .zwa-fab svg{width:58%;height:58%;fill:currentColor;} .zwa-fab.zwa-round{border-radius:50%;} .zwa-fab.zwa-square{border-radius:26%;} .zwa-pos-bottom-left{left:18px;bottom:18px;} .zwa-pos-bottom-right{right:18px;bottom:18px;} .zwa-pos-top-left{left:18px;top:18px;} .zwa-pos-top-right{right:18px;top:18px;} /* inline shortcode / menu trigger */ .zwa-open-trigger{ display:inline-flex;align-items:center;gap:8px;cursor:pointer; padding:10px 18px;border:0;border-radius:999px; background:#1e1e1e;color:#fff;font-family:var(--zwa-font);font-size:14px;line-height:1; } .zwa-open-trigger:hover{background:var(--zwa-accent);} .zwa-open-trigger .zwa-trigger-ico{ width:18px;height:18px;background:currentColor;display:inline-block; -webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Ccircle cx='12' cy='4' r='2.2'/%3E%3Cpath d='M12 7c-3 0-5 1.5-5 4h2.2v7h5.6v-7H17c0-2.5-2-4-5-4z'/%3E%3C/svg%3E") center/contain no-repeat; mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Ccircle cx='12' cy='4' r='2.2'/%3E%3Cpath d='M12 7c-3 0-5 1.5-5 4h2.2v7h5.6v-7H17c0-2.5-2-4-5-4z'/%3E%3C/svg%3E") center/contain no-repeat; } /* ---------- Overlay + panel ---------- */ .zwa-overlay{position:fixed;inset:0;z-index:2147483001;background:rgba(0,0,0,.5);display:none;} .zwa-overlay.is-open{display:block;} .zwa-panel{ position:fixed;z-index:2147483002;top:0;left:0;height:100%; width:430px;max-width:92vw; background:var(--zwa-panel-bg);color:var(--zwa-text); font-family:var(--zwa-font);font-size:15px;line-height:1.45; display:flex;flex-direction:column; transform:translateX(-105%);transition:transform .25s ease; box-shadow:0 0 40px rgba(0,0,0,.5); -webkit-font-smoothing:antialiased; } .zwa-panel.zwa-from-right{left:auto;right:0;transform:translateX(105%);} .zwa-overlay.is-open .zwa-panel{transform:translateX(0);} .zwa-head{ background:var(--zwa-panel-bg2); padding:16px 18px;display:flex;align-items:center;justify-content:space-between;gap:12px; flex:0 0 auto; } .zwa-head h2{margin:0;font-size:18px;font-weight:800;color:var(--zwa-text);font-family:inherit;line-height:1.25;} .zwa-close{ flex:0 0 auto;width:34px;height:34px;border:0;border-radius:50%; background:transparent;color:var(--zwa-text);font-size:22px;cursor:pointer;line-height:1; display:flex;align-items:center;justify-content:center; } .zwa-close:hover{background:var(--zwa-card);} .zwa-close:focus-visible{outline:2px solid var(--zwa-accent);} .zwa-body{overflow-y:auto;padding:18px;flex:1 1 auto;} .zwa-section-title{font-size:15px;font-weight:700;color:var(--zwa-text);text-align:center;margin:4px 0 16px;} .zwa-sub-title{font-size:12px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:var(--zwa-muted);margin:24px 0 12px;} /* ----- profile / toggle rows ----- */ .zwa-item{ display:grid;grid-template-columns:42px minmax(0,1fr) auto; gap:12px;align-items:center; padding:12px;border-radius:14px;margin-bottom:10px; border:1px solid var(--zwa-border);background:var(--zwa-card); } .zwa-item.is-active{border-color:var(--zwa-accent);background:var(--zwa-card-active);} .zwa-ico{ width:42px;height:42px;border-radius:50%;background:var(--zwa-panel-bg2); display:flex;align-items:center;justify-content:center;flex:0 0 auto; } .zwa-ico svg{width:22px;height:22px;fill:var(--zwa-text);} .zwa-item-txt{min-width:0;} .zwa-item-txt strong{display:block;color:var(--zwa-text);font-size:14px;font-weight:700;line-height:1.25;} .zwa-item-txt span{display:block;color:var(--zwa-muted);font-size:12px;margin-top:3px;line-height:1.3;} /* switch */ .zwa-switch{display:flex;align-items:center;gap:7px;font-size:11px;color:var(--zwa-muted);white-space:nowrap;flex:0 0 auto;} .zwa-toggle{ width:46px;height:24px;border-radius:999px;background:var(--zwa-switch-off);border:0; position:relative;cursor:pointer;flex:0 0 auto;transition:background .18s ease; } .zwa-toggle::after{content:"";position:absolute;top:3px;left:3px;width:18px;height:18px;border-radius:50%;background:var(--zwa-knob);transition:left .18s ease;box-shadow:0 1px 2px rgba(0,0,0,.3);} .zwa-toggle[aria-pressed="true"]{background:var(--zwa-accent);} .zwa-toggle[aria-pressed="true"]::after{left:25px;} .zwa-toggle:focus-visible{outline:2px solid var(--zwa-accent);outline-offset:2px;} /* ----- steppers ----- */ .zwa-steppers{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px;} .zwa-stepper{background:var(--zwa-card);border:1px solid var(--zwa-border);border-radius:14px;padding:14px 12px;text-align:center;} .zwa-stepper .lbl{font-size:13px;font-weight:600;color:var(--zwa-text);display:block;margin-bottom:12px;} .zwa-stepper-ctrls{display:flex;align-items:center;justify-content:center;gap:10px;} .zwa-round-btn{ width:36px;height:36px;border-radius:50%;border:0;background:var(--zwa-panel-bg2); color:var(--zwa-text);font-size:20px;cursor:pointer;line-height:1;flex:0 0 auto; display:flex;align-items:center;justify-content:center; } .zwa-round-btn:hover{background:var(--zwa-accent);color:#fff;} .zwa-round-btn:focus-visible{outline:2px solid var(--zwa-accent);outline-offset:2px;} .zwa-track{flex:1 1 auto;height:6px;border-radius:6px;background:var(--zwa-panel-bg2);position:relative;min-width:24px;} .zwa-track i{position:absolute;top:50%;width:14px;height:14px;border-radius:50%;background:var(--zwa-accent);transform:translate(-50%,-50%);left:0;transition:left .15s ease;} .zwa-stepper .reset{display:block;width:100%;margin-top:12px;background:none;border:0;color:var(--zwa-muted);font-size:11px;cursor:pointer;text-decoration:underline;font-family:inherit;} .zwa-stepper .reset:hover{color:var(--zwa-text);} /* ----- feature tiles ----- */ .zwa-tiles{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px;} .zwa-tile{ background:var(--zwa-card);border:1px solid var(--zwa-border);border-radius:14px; padding:16px 8px;text-align:center;cursor:pointer;color:var(--zwa-text); font-family:inherit;display:flex;flex-direction:column;align-items:center;gap:8px; } .zwa-tile:hover{border-color:var(--zwa-accent);} .zwa-tile.is-active{border-color:var(--zwa-accent);background:var(--zwa-card-active);} .zwa-tile svg{width:24px;height:24px;fill:var(--zwa-text);} .zwa-tile span{display:block;font-size:12.5px;line-height:1.25;} .zwa-reset-all{ width:100%;margin-top:26px;padding:14px;border:0;border-radius:999px; background:var(--zwa-panel-bg2);color:var(--zwa-text);font-size:15px;font-weight:600;cursor:pointer;font-family:inherit; } .zwa-reset-all:hover{background:var(--zwa-accent);color:#fff;} /* responsive: stack the switch under the text on narrow panels */ @media (max-width:400px){ .zwa-item{grid-template-columns:42px minmax(0,1fr);} .zwa-switch{grid-column:1 / -1;justify-content:flex-end;margin-top:2px;} .zwa-steppers,.zwa-tiles{grid-template-columns:1fr;} } /* =========================================================== PAGE-LEVEL EFFECTS (classes on ) =========================================================== */ html.zwa-spacing body :where(p,li,a,span,h1,h2,h3,h4,h5,h6,div,td,th,dd,dt,label,button,blockquote,figcaption){ line-height:var(--zwa-line, inherit) !important; letter-spacing:var(--zwa-letter, inherit) !important; word-spacing:var(--zwa-word, inherit) !important; } html.zwa-bw{filter:grayscale(1) contrast(1.15);} /* full high-contrast – exclude the widget UI itself */ html.zwa-contrast body *:not(#zwa-root):not(#zwa-root *){ background-color:#000 !important;color:#fff !important;border-color:#fff !important; } html.zwa-contrast a:not(#zwa-root *){color:#ffe14d !important;} html.zwa-hide-img img, html.zwa-hide-img picture, html.zwa-hide-img svg:not(#zwa-root svg), html.zwa-hide-img video{visibility:hidden !important;} html.zwa-hide-img *:not(#zwa-root):not(#zwa-root *){background-image:none !important;} html.zwa-readable body :where(p,li,a,span,h1,h2,h3,h4,h5,h6,div,td,th,label,button,input,textarea):not(#zwa-root *){ font-family:Verdana,Tahoma,Arial,sans-serif !important; } html.zwa-noanim *,html.zwa-noanim *::before,html.zwa-noanim *::after{ animation:none !important;transition:none !important;scroll-behavior:auto !important; } html.zwa-cursor,html.zwa-cursor *{ cursor:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='48' height='48' viewBox='0 0 24 24'%3E%3Cpath fill='%23000' stroke='%23fff' stroke-width='1' d='M5 2l14 11-6 1 3 7-3 1-3-7-5 4z'/%3E%3C/svg%3E") 4 2, auto !important; } html.zwa-hl-links a:not(#zwa-root *){outline:2px solid var(--zwa-accent) !important;text-decoration:underline !important;} html.zwa-hl-titles :is(h1,h2,h3,h4):not(#zwa-root *){outline:2px dashed var(--zwa-accent) !important;outline-offset:2px;} html.zwa-kb *:focus{outline:3px solid #b08d57 !important;outline-offset:2px !important;} .zwa-skip{position:fixed;top:8px;left:50%;transform:translateX(-50%);z-index:2147483005;background:#000;color:#fff;padding:10px 16px;border-radius:8px;text-decoration:none;} .zwa-skip:not(:focus){position:absolute;left:-9999px;} /* reading mask */ .zwa-mask{position:fixed;inset:0;z-index:2147482000;pointer-events:none;display:none;} .zwa-mask.is-on{display:block;} .zwa-mask .bar{position:absolute;left:0;right:0;background:rgba(0,0,0,.72);} .zwa-mask .top{top:0;} .zwa-mask .bottom{bottom:0;} /* text magnifier bar */ .zwa-mag{ position:fixed;left:0;right:0;top:0;z-index:2147482500;display:none; background:#111;color:#fff;font-size:26px;line-height:1.3;padding:16px 22px; box-shadow:0 6px 20px rgba(0,0,0,.4);pointer-events:none;font-family:var(--zwa-font); } .zwa-mag.is-on{display:block;}