/* ============================================================= NIOHUB – accessibility.css Panel přístupnosti + režimy (kontrast, dyslexie, kurzor…). Režimy se aktivují třídami na (z assets/js/accessibility.js). ========================================================== */ /* ------------------------------------------------------------- Plovoucí tlačítko (FAB) + panel ------------------------------------------------------------- */ .a11y__fab { position: fixed; right: clamp(12px, 3vw, 24px); bottom: clamp(12px, 3vw, 24px); width: 56px; height: 56px; border-radius: 50%; display: grid; place-items: center; color: #04121f; background: var(--grad-accent); box-shadow: 0 8px 26px rgba(59,157,255,0.4); z-index: 95; transition: transform var(--t-fast), box-shadow var(--t-med); } .a11y__fab:hover { transform: scale(1.06); box-shadow: 0 12px 34px rgba(59,157,255,0.55); } .a11y__panel { position: fixed; right: clamp(12px, 3vw, 24px); bottom: calc(clamp(12px, 3vw, 24px) + 70px); width: min(360px, calc(100vw - 24px)); max-height: min(76vh, 640px); overflow-y: auto; z-index: 96; border-radius: var(--r-lg); background: var(--c-surface); border: 1px solid var(--c-line); box-shadow: var(--shadow-2); padding: var(--sp-5); animation: a11y-in 0.22s ease; } @keyframes a11y-in { from { opacity: 0; transform: translateY(12px) scale(0.98); } to { opacity: 1; transform: none; } } html.reduce-motion .a11y__panel { animation: none; } .a11y__header { display: flex; align-items: center; justify-content: space-between; margin-bottom: var(--sp-4); } .a11y__title { display: flex; align-items: center; gap: var(--sp-2); font-size: 1.15rem; } .a11y__title-icon { color: var(--c-cyan); display: grid; place-items: center; } .a11y__body { display: grid; gap: var(--sp-4); } .a11y__group { display: grid; gap: var(--sp-2); } .a11y__group-label { font-size: 0.82rem; color: var(--c-text-dim); font-weight: 600; } /* Stepper velikosti textu */ .a11y__stepper { display: flex; align-items: center; justify-content: space-between; gap: var(--sp-2); background: var(--c-bg-2); border: 1px solid var(--c-line); border-radius: var(--r-md); padding: var(--sp-2); } .a11y__step { min-width: 48px; height: 40px; border-radius: var(--r-sm); background: var(--c-surface-2); color: var(--c-text); font-weight: 700; border: 1px solid var(--c-line); transition: background var(--t-fast), border-color var(--t-fast); } .a11y__step:hover { border-color: var(--c-blue); background: var(--c-surface); } .a11y__step-value { font-family: var(--font-mono); font-size: 0.9rem; color: var(--c-cyan); } /* Přepínače */ .a11y__toggles { display: grid; grid-template-columns: 1fr 1fr; gap: var(--sp-2); } .a11y__toggle { display: flex; flex-direction: column; align-items: flex-start; gap: var(--sp-2); padding: var(--sp-3); border-radius: var(--r-md); background: var(--c-bg-2); border: 1px solid var(--c-line); text-align: left; transition: border-color var(--t-fast), background var(--t-fast); position: relative; min-height: 84px; } .a11y__toggle:hover { border-color: var(--c-blue); } .a11y__toggle-icon { color: var(--c-text-dim); } .a11y__toggle-label { font-size: 0.82rem; font-weight: 500; line-height: 1.25; } .a11y__toggle-state { position: absolute; top: var(--sp-3); right: var(--sp-3); width: 16px; height: 16px; border-radius: 50%; border: 2px solid var(--c-line); transition: background var(--t-fast), border-color var(--t-fast); } .a11y__toggle[aria-checked="true"] { border-color: var(--c-blue); background: color-mix(in srgb, var(--c-blue) 12%, transparent); } .a11y__toggle[aria-checked="true"] .a11y__toggle-icon, .a11y__toggle[aria-checked="true"] .a11y__toggle-label { color: var(--c-text); } .a11y__toggle[aria-checked="true"] .a11y__toggle-state { background: var(--c-cyan); border-color: var(--c-cyan); } .a11y__hint { font-size: 0.78rem; color: var(--c-text-faint); margin-top: var(--sp-2); } /* ============================================================= REŽIMY PŘÍSTUPNOSTI (třídy na ) ========================================================== */ /* Vysoký kontrast */ html.contrast { --c-text: #ffffff; --c-text-soft: #f0f4fa; --c-text-dim: #d6e0ee; --c-text-faint: #b7c6db; --c-bg: #000000; --c-black: #000000; --c-bg-2: #04070d; --c-surface: #0a1120; --c-surface-2: #0e1830; --c-line: #5b86c4; --c-line-soft: #3f5f93; --c-blue: #6bb6ff; --c-cyan: #5ff0ff; } html.contrast body { background-image: none; } html.contrast a { text-decoration: underline; } html.contrast .btn--primary { color: #000; } /* Černobílý režim */ html.grayscale { filter: grayscale(1); } /* Aby zůstal čitelný, zvýšíme kontrast okrajů */ html.grayscale.contrast { filter: grayscale(1) contrast(1.15); } /* Zvýraznění odkazů */ html.links a { text-decoration: underline; text-underline-offset: 3px; text-decoration-thickness: 2px; color: var(--c-cyan); } html.links a:hover { background: rgba(39, 216, 232, 0.14); } html.links .btn { text-decoration: none; } /* Zvýraznění kurzoru */ html.cursor, html.cursor * { cursor: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='40' height='40' viewBox='0 0 40 40'%3E%3Ccircle cx='20' cy='20' r='14' fill='rgba(39,216,232,0.25)' stroke='%2327d8e8' stroke-width='2'/%3E%3Ccircle cx='20' cy='20' r='3' fill='%2327d8e8'/%3E%3C/svg%3E") 20 20, auto; } /* Větší řádkování / mezery */ html.spacing body { line-height: 2; letter-spacing: 0.03em; word-spacing: 0.12em; } html.spacing p, html.spacing li { margin-bottom: 0.6em; } /* Režim pro dyslexii */ html.dyslexia body { font-family: "Atkinson Hyperlegible", "Comic Sans MS", "Verdana", var(--font-sans); letter-spacing: 0.06em; word-spacing: 0.16em; line-height: 2; } html.dyslexia h1, html.dyslexia h2, html.dyslexia h3 { letter-spacing: 0.02em; } /* Stav probíhajícího čtení */ .a11y__group--speech.is-reading .btn { border-color: var(--c-cyan); color: var(--c-cyan); }