/* ============================================================================ Pizzeria Nerone — a11y.css Widget accessibilità self-hosted (nessuna terza parte). Pulsante + pannello + classi applicate su per adattare la visualizzazione. ============================================================================ */ /* ── Pulsante flottante ─────────────────────────────────────────────────── */ .a11y-launch{position:fixed;left:1rem;bottom:5rem;z-index:180;width:52px;height:52px;border-radius:50%; border:0;background:var(--brand-2,#0a7d4b);color:#fff;display:grid;place-items:center;cursor:pointer; box-shadow:0 12px 28px -10px rgba(0,0,0,.55);transition:transform .2s,background .2s} .a11y-launch:hover{transform:scale(1.08)} .a11y-launch:focus-visible{outline:3px solid #fff;outline-offset:2px} /* ── Pannello ───────────────────────────────────────────────────────────── */ .a11y-panel{position:fixed;left:1rem;bottom:5rem;z-index:185;width:min(340px,92vw); background:#fff;color:#22262c;border-radius:16px;border:1px solid #e5e7eb; box-shadow:0 30px 70px -20px rgba(0,0,0,.55);overflow:hidden; font-family:system-ui,-apple-system,"Segoe UI",sans-serif} .a11y-head{display:flex;align-items:center;justify-content:space-between; background:var(--brand-2,#0a7d4b);color:#fff;padding:.85rem 1.1rem} .a11y-head h2{margin:0;font-size:1.05rem;color:#fff;font-family:inherit} .a11y-x{background:none;border:0;color:#fff;font-size:1.7rem;line-height:1;cursor:pointer;padding:0 .2rem} .a11y-x:focus-visible{outline:2px solid #fff;outline-offset:2px} .a11y-body{padding:1rem 1.1rem 1.2rem} .a11y-row{display:flex;align-items:center;justify-content:space-between;gap:1rem;margin-bottom:1rem} .a11y-row-label{font-weight:600;font-size:.95rem} .a11y-stepper{display:flex;align-items:center;gap:.5rem} .a11y-stepper button{width:40px;height:40px;border-radius:10px;border:1.5px solid #d7dbe0;background:#f6f8f9; font-weight:700;font-size:1rem;cursor:pointer;color:#22262c} .a11y-stepper button:hover{border-color:var(--brand-2,#0a7d4b)} .a11y-stepval{min-width:52px;text-align:center;font-weight:700;font-size:.9rem} .a11y-grid{display:grid;grid-template-columns:1fr 1fr;gap:.55rem} .a11y-tile{display:flex;align-items:center;gap:.5rem;text-align:left;padding:.7rem .7rem;border-radius:10px; border:1.5px solid #e0e3e7;background:#fff;cursor:pointer;font-size:.82rem;font-weight:600;color:#22262c; line-height:1.2;transition:border-color .15s,background .15s} .a11y-tile:hover{border-color:var(--brand-2,#0a7d4b)} .a11y-tile:focus-visible{outline:3px solid var(--brand-2,#0a7d4b);outline-offset:1px} .a11y-tile[aria-pressed="true"]{background:var(--brand-2,#0a7d4b);border-color:var(--brand-2,#0a7d4b);color:#fff} .a11y-ic{flex:none;width:20px;text-align:center;font-size:1rem} .a11y-reset{width:100%;margin-top:1rem;padding:.7rem;border-radius:10px;border:1.5px solid #d7dbe0; background:#f6f8f9;font-weight:700;cursor:pointer;color:#22262c} .a11y-reset:hover{border-color:#bc2f22;color:#bc2f22} .a11y-decl{display:block;text-align:center;margin-top:.7rem;font-size:.82rem;color:#5a6169;text-decoration:underline} @media(max-width:560px){ .a11y-panel{left:.5rem;right:.5rem;bottom:.5rem;width:auto;max-height:82vh;overflow:auto} .a11y-launch{bottom:4.6rem} } /* ============================================================================ CLASSI APPLICATE SU — adattamenti di visualizzazione ============================================================================ */ /* ── Dimensione testo (heading in rem via html%; body px sovrascritto) ───── */ html.a11y-text-1{font-size:106.25%} html.a11y-text-2{font-size:112.5%} html.a11y-text-3{font-size:125%} html.a11y-text-4{font-size:140%} html.a11y-text-1 body{font-size:18.1px} html.a11y-text-2 body{font-size:19.2px} html.a11y-text-3 body{font-size:21.3px} html.a11y-text-4 body{font-size:23.8px} /* ── Contrasto elevato ──────────────────────────────────────────────────── */ html.a11y-contrast body{background:#fff} html.a11y-contrast body, html.a11y-contrast p,html.a11y-contrast li,html.a11y-contrast span, html.a11y-contrast h1,html.a11y-contrast h2,html.a11y-contrast h3,html.a11y-contrast h4{color:#000 !important} html.a11y-contrast a{color:#0b3d91 !important;text-decoration:underline} html.a11y-contrast .btn,html.a11y-contrast .btn *{color:#fff !important} /* ── Contrasto negativo (dark invert) e scala di grigi ──────────────────── */ html.a11y-invert{background:#000} html.a11y-invert body{filter:invert(1) hue-rotate(180deg)} html.a11y-invert img,html.a11y-invert video,html.a11y-invert iframe, html.a11y-invert .a11y-panel,html.a11y-invert .a11y-launch{filter:invert(1) hue-rotate(180deg)} html.a11y-grayscale body{filter:grayscale(1)} html.a11y-grayscale.a11y-invert body{filter:invert(1) hue-rotate(180deg) grayscale(1)} /* ── Font leggibile (alta leggibilità / dislessia) ──────────────────────── */ 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 button,html.a11y-readable input,html.a11y-readable textarea{ font-family:Verdana,Tahoma,"Trebuchet MS",system-ui,sans-serif !important;letter-spacing:.02em} /* ── Evidenzia link ─────────────────────────────────────────────────────── */ html.a11y-links a{outline:2px solid #ffd400 !important;background:#101010 !important;color:#ffd400 !important; text-decoration:underline !important;padding:0 .1em;border-radius:2px} /* ── Spaziatura e interlinea ────────────────────────────────────────────── */ html.a11y-spacing body{letter-spacing:.12em;word-spacing:.16em} html.a11y-lineheight p,html.a11y-lineheight li{line-height:2.1 !important} /* ── Cursore grande ─────────────────────────────────────────────────────── */ html.a11y-bigcursor,html.a11y-bigcursor *{ 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='M8 4l30 18-13 3 7 14-5 2-7-14-9 9z' fill='%23000' stroke='%23fff' stroke-width='2'/%3E%3C/svg%3E") 6 4,auto !important} /* ── Stop animazioni ────────────────────────────────────────────────────── */ html.a11y-noanim *,html.a11y-noanim *::before,html.a11y-noanim *::after{ animation:none !important;transition:none !important;scroll-behavior:auto !important} /* ── Guida di lettura (barra che segue il mouse) ────────────────────────── */ .a11y-readline{position:fixed;left:0;right:0;height:2.4rem;z-index:900;pointer-events:none; background:rgba(255,212,0,.18);border-top:2px solid rgba(0,0,0,.55);border-bottom:2px solid rgba(0,0,0,.55); top:0;transform:translateY(-50%)}