/* ============================================================ Вместе за родное — доступность, согласия, анимации (стили) Дополняет app.css. Подключать ПОСЛЕ app.css. ============================================================ */ /* ---------- Режимы доступности через data-атрибуты ---------- */ /* Размер шрифта: масштабируем корневой кегль, всё на rem/clamp подхватится */ :root[data-a11y-font="1"] { font-size: 18px; } :root[data-a11y-font="2"] { font-size: 20px; } :root[data-a11y-font="3"] { font-size: 23px; } /* Межстрочный интервал */ :root[data-a11y-spacing="1"] body { line-height: 1.9; letter-spacing: .01em; } :root[data-a11y-spacing="2"] body { line-height: 2.2; letter-spacing: .03em; word-spacing: .12em; } /* Высокий контраст */ :root[data-a11y-contrast="high"] { --c-ink: #000; --c-bg: #fff; --c-surface: #fff; --c-muted: #1a1a1a; --c-line: #000; --c-navy: #0a2a6b; --c-accent: #b3360f; } :root[data-a11y-contrast="high"] body { background: #fff; } :root[data-a11y-contrast="high"] .card, :root[data-a11y-contrast="high"] .stat, :root[data-a11y-contrast="high"] .site-header { border: 2px solid #000 !important; box-shadow: none !important; } :root[data-a11y-contrast="high"] a { text-decoration: underline; } /* Чёрно-белая (инверсно-нейтральная) схема для слабовидящих */ :root[data-a11y-contrast="invert"] { --c-ink: #f4f4f4; --c-bg: #0b0b0b; --c-surface: #161616; --c-muted: #cfcfcf; --c-line: #444; --c-navy: #e8e8e8; --c-accent: #ffd24a; } :root[data-a11y-contrast="invert"] body { background: #0b0b0b; color: #f4f4f4; } :root[data-a11y-contrast="invert"] .hero { background: #161616; } :root[data-a11y-contrast="invert"] .hero::after { display: none; } :root[data-a11y-contrast="invert"] .site-header { background: #111; } :root[data-a11y-contrast="invert"] .site-footer { background: #000; } :root[data-a11y-contrast="invert"] a { color: #ffd24a; } /* Чёрно-белый режим — фильтр на body, НЕ на :root */ :root[data-a11y-contrast="gray"] body > *:not(.a11y-fab):not(.a11y-panel) { filter: grayscale(100%); } /* Скрыть изображения */ [data-a11y-images="off"] img, [data-a11y-images="off"] picture, [data-a11y-images="off"] video, [data-a11y-images="off"] iframe, [data-a11y-images="off"] svg:not(.a11y-fab svg):not(.a11y-panel svg) { display: none !important; } /* фоновые изображения (hero, карточки-медиа) */ [data-a11y-images="off"] .hero, [data-a11y-images="off"] .hero::after, [data-a11y-images="off"] .card__media, [data-a11y-images="off"] [style*="background-image"] { background-image: none !important; } /* фото команды раньше оставляли — теперь решите сами; чтобы оставить: */ [data-a11y-images="off"] .team-card__photo img { display: block !important; } /* ---------- Плавающая кнопка доступности ---------- */ .a11y-fab { position: fixed; left: 20px; bottom: 20px; z-index: 95; width: 52px; height: 52px; border-radius: 50%; border: 2px solid #fff; cursor: pointer; background: var(--c-navy); color: #fff; font-size: 24px; box-shadow: var(--shadow-lg); transition: transform .2s, background .2s; display: grid; place-items: center; } .a11y-fab > span { display: block; line-height: 1; } .a11y-fab:hover { transform: scale(1.08); background: var(--c-accent); } .a11y-fab:focus-visible { outline: 3px solid var(--c-accent); outline-offset: 3px; } /* ---------- Панель доступности ---------- */ .a11y-panel { position: fixed; left: 20px; bottom: 84px; z-index: 96; width: min(340px, calc(100vw - 40px)); background: var(--c-surface); color: var(--c-ink); border: 1px solid var(--c-line); border-radius: var(--r); box-shadow: var(--shadow-lg); padding: 20px; animation: a11yIn .22s ease; } @keyframes a11yIn { from { opacity: 0; transform: translateY(12px) scale(.98); } to { opacity: 1; transform: none; } } .a11y-panel__head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 14px; } .a11y-panel__title { font-size: 18px; margin: 0; } .a11y-panel__close { border: none; background: transparent; font-size: 26px; line-height: 1; cursor: pointer; color: var(--c-muted); width: 32px; height: 32px; border-radius: 8px; } .a11y-panel__close:hover { background: var(--c-line); color: var(--c-ink); } .a11y-group { margin-bottom: 16px; } .a11y-group__label { display: block; font-size: 13px; font-weight: 600; color: var(--c-muted); margin-bottom: 8px; } .a11y-seg { display: flex; gap: 6px; flex-wrap: wrap; } .a11y-seg button { flex: 1 1 auto; min-width: 56px; padding: 9px 10px; border: 1.5px solid var(--c-line); background: var(--c-bg); color: var(--c-ink); border-radius: 10px; cursor: pointer; font-weight: 600; font-family: inherit; transition: .15s; } .a11y-seg button:hover { border-color: var(--c-navy); } .a11y-seg button.is-active { background: var(--c-navy); color: #fff; border-color: var(--c-navy); } .a11y-font-sample--md { font-size: 16px; } .a11y-font-sample--lg { font-size: 19px; } .a11y-font-sample--xl { font-size: 22px; } .a11y-reset { width: 100%; margin-top: 4px; padding: 10px; border: none; cursor: pointer; background: var(--c-line); color: var(--c-ink); border-radius: 10px; font-weight: 600; font-family: inherit; } .a11y-reset:hover { background: var(--c-muted); color: #fff; } /* ---------- Баннер согласия (cookie / ПДн) ---------- */ .consent { position: fixed; left: 50%; right: auto; bottom: max(16px, env(safe-area-inset-bottom)); z-index: 90; width: min(760px, calc(100vw - 32px)); max-width: calc(100vw - 32px); background: rgba(22, 36, 58, .97); color: #eef1f6; backdrop-filter: blur(8px); transform: translate(-50%, 110%); transition: transform .4s cubic-bezier(.22,1,.36,1); box-shadow: 0 -10px 40px rgba(0,0,0,.25); border: 1px solid rgba(255,255,255,.12); border-radius: var(--r-lg); } .consent.is-visible { transform: translate(-50%, 0); } .consent__inner { display: flex; align-items: center; gap: 18px; padding: 18px; } .consent__icon { font-size: 28px; flex: 0 0 auto; } .consent__text { margin: 0; font-size: 14.5px; line-height: 1.55; flex: 1 1 auto; } .consent__text a { color: #ffd24a; text-decoration: underline; } .consent__ok { flex: 0 0 auto; white-space: nowrap; } @media (max-width: 640px) { .consent { left: 50%; right: auto; bottom: 12px; width: calc(100vw - 24px); max-width: calc(100vw - 24px); } .consent__inner { flex-direction: column; align-items: flex-start; gap: 12px; text-align: left; padding: 16px; } .consent__ok { width: 100%; justify-content: center; } .a11y-fab { width: 46px; height: 46px; font-size: 21px; } .a11y-fab > span { transform: translateY(-3px); } } /* ---------- Scroll-анимации ---------- */ .reveal { opacity: 0; transform: translateY(22px); transition: opacity .6s ease, transform .6s cubic-bezier(.22,1,.36,1); } .reveal.is-revealed { opacity: 1; transform: none; } /* Лёгкий каскад для сеток */ .grid .reveal:nth-child(2) { transition-delay: .06s; } .grid .reveal:nth-child(3) { transition-delay: .12s; } .grid .reveal:nth-child(4) { transition-delay: .18s; } /* ---------- Уважение к настройкам ОС ---------- */ @media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: .001ms !important; animation-iteration-count: 1 !important; transition-duration: .001ms !important; scroll-behavior: auto !important; } .reveal { opacity: 1 !important; transform: none !important; } } /* ---------- Подвал: строка разработчика ---------- */ .footer-bottom-flex { display: flex; justify-content: space-between; flex-wrap: wrap; gap: 10px; align-items: center; } .footer-bottom-flex p { margin: 0; } .developer-credits { color: #8b96a8; font-size: 13.5px; } .developer-credits a { color: inherit; text-decoration: underline; } .developer-credits a:hover { color: #fff; }