/* ============================================================================ Dakkak Labs — shared accessibility panel (product + legal pages). Adds the homepage's settings — text size, high contrast, reduce motion, reduce transparency, underline links, larger tap targets — ABOVE each page's existing dark-mode toggle, skinned from that page's own tokens. Pairs with access.js. Touches nothing else: no forms, no backend, no legal copy. ========================================================================== */ :root{ --ax-accent: var(--primary, #4B4B77); } /* Text size: zoom the main content. Floating controls live in , so they are NOT zoomed and stay a constant size. */ main{ zoom: var(--text-scale, 1); } /* Accessibility modes — driven by data-ax-* on . */ html[data-ax-contrast="more"]{ --text-soft: var(--text); } html[data-ax-contrast="more"] .ax-panel, html[data-ax-contrast="more"] .ax-btn{ border-width:2px; } html[data-ax-motion="reduce"] *, html[data-ax-motion="reduce"] *::before, html[data-ax-motion="reduce"] *::after{ animation-duration:.001ms !important; animation-iteration-count:1 !important; transition-duration:.001ms !important; scroll-behavior:auto !important; } html[data-ax-underline="on"] main a{ text-decoration:underline; text-underline-offset:3px; } html[data-ax-targets="large"] main a, html[data-ax-targets="large"] main button, html[data-ax-targets="large"] main [role="button"]{ min-height:48px; } html[data-ax-transparency="reduce"] .ax-panel, html[data-ax-transparency="reduce"] .ax-btn{ -webkit-backdrop-filter:none !important; backdrop-filter:none !important; } /* Floating settings button (placed just above the page's dark-mode toggle by JS). */ .ax-btn{ position:fixed; z-index:2147483000; width:48px; height:48px; display:inline-flex; align-items:center; justify-content:center; border-radius:999px; border:1px solid var(--border,#d8d8d8); background:var(--surface,#fff); color:var(--text,#1b1b1f); cursor:pointer; box-shadow:0 6px 22px rgba(0,0,0,.20); transition:transform .15s ease, background-color .2s; } .ax-btn:hover{ transform:translateY(-1px); } .ax-btn:focus-visible{ outline:3px solid var(--ax-accent); outline-offset:3px; } .ax-btn svg{ width:22px; height:22px; } /* Panel */ .ax-panel{ position:fixed; z-index:2147483000; width:min(340px, calc(100vw - 32px)); max-height:min(78vh,620px); display:flex; flex-direction:column; overflow:hidden; background:var(--surface,#fff); color:var(--text,#1b1b1f); border:1px solid var(--border,#d8d8d8); border-radius:18px; box-shadow:0 24px 64px rgba(0,0,0,.34); opacity:0; visibility:hidden; transform:translateY(8px) scale(.98); transition:opacity .2s ease, transform .22s cubic-bezier(.16,1,.3,1), visibility .2s; } .ax-panel.open{ opacity:1; visibility:visible; transform:none; } .ax-head{ display:flex; align-items:flex-start; justify-content:space-between; gap:14px; padding:18px 18px 12px; } .ax-head h2{ font-size:18px; margin:0; font-weight:700; } .ax-head .sub{ font-size:11px; letter-spacing:.1em; text-transform:uppercase; color:var(--text-soft,#777); margin:2px 0 0; } .ax-close{ width:38px; height:38px; flex:none; border:1px solid var(--border,#d8d8d8); border-radius:999px; background:transparent; color:var(--text,#1b1b1f); cursor:pointer; display:inline-flex; align-items:center; justify-content:center; } .ax-close:hover{ background:var(--bg,#f2f2f0); } .ax-close svg{ width:18px; height:18px; } .ax-body{ overflow-y:auto; padding:0 18px 6px; } .ax-row{ display:flex; align-items:center; justify-content:space-between; gap:14px; padding:12px 0; border-top:1px solid var(--border,#ededed); } .ax-row .lbl{ font-size:14.5px; } .ax-row .lbl small{ display:block; color:var(--text-soft,#777); font-size:12px; margin-top:2px; } .ax-seg{ display:inline-flex; background:var(--bg,#f0f0f0); border:1px solid var(--border,#ddd); border-radius:999px; padding:3px; } .ax-seg button{ font-size:12px; color:var(--text-soft,#777); background:transparent; border:0; padding:7px 11px; border-radius:999px; cursor:pointer; min-height:36px; } .ax-seg button[aria-pressed="true"]{ color:#fff; background:var(--ax-accent); } .ax-step{ display:inline-flex; align-items:center; gap:2px; background:var(--bg,#f0f0f0); border:1px solid var(--border,#ddd); border-radius:999px; padding:3px; } .ax-step button{ width:36px; height:36px; border:0; background:transparent; color:var(--text,#111); cursor:pointer; border-radius:999px; font-size:17px; } .ax-step .lvl{ font-size:12px; color:var(--text-soft,#777); min-width:50px; text-align:center; } .ax-sw{ position:relative; width:48px; height:28px; flex:none; border-radius:999px; border:1px solid var(--border,#ccc); background:var(--bg,#eee); cursor:pointer; transition:background-color .2s; } .ax-sw[aria-checked="true"]{ background:var(--ax-accent); border-color:var(--ax-accent); } .ax-sw::after{ content:""; position:absolute; top:2px; left:2px; width:22px; height:22px; border-radius:50%; background:#fff; transition:transform .2s; } .ax-sw[aria-checked="true"]::after{ transform:translateX(20px); } .ax-reset{ margin:6px 14px 14px; padding:11px; border:1px solid var(--border,#ddd); background:transparent; color:var(--text-soft,#777); border-radius:10px; font-size:11px; letter-spacing:.08em; text-transform:uppercase; cursor:pointer; } .ax-reset:hover{ color:var(--text,#111); border-color:var(--text,#111); } .ax-btn:focus-visible,.ax-close:focus-visible,.ax-seg button:focus-visible,.ax-step button:focus-visible,.ax-sw:focus-visible,.ax-reset:focus-visible{ outline:3px solid var(--ax-accent); outline-offset:2px; } @media (prefers-reduced-motion:reduce){ .ax-panel,.ax-btn,.ax-sw::after,.ax-seg button{ transition:none; } }