/* VOGO eBS Accesibilitate — frontend styles. Public shortcode [vogo_ebs_accesibility]. BEM: vogo-ebs-accesibility__ (UI) + vogo-ebs-accesibility-- (modifier on ). Palette: ANSVSA standard navy #0C2F59 (primary) / #01255C (hover darker) — aligned with html_ansvsa_1/2.html templates and ebs-shortcodes.css. @file_version 1.0.1 */ /* === Wrapper === */ .vogo-ebs-accesibility { position: relative; z-index: 999999; font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Arial, sans-serif; } /* === Trigger button (44×44, stânga-jos, cerc navy ANSVSA) === */ .vogo-ebs-accesibility__trigger { position: fixed; left: 13px; bottom: 13px; width: 44px; height: 44px; border: 0; padding: 0; margin: 0; border-radius: 50%; background: #0C2F59; color: #fff; cursor: pointer; display: flex; align-items: center; justify-content: center; box-shadow: 0 2px 8px rgba(0, 0, 0, 0.25); transition: transform .15s ease, box-shadow .15s ease; z-index: 999999; } .vogo-ebs-accesibility__trigger:hover, .vogo-ebs-accesibility__trigger:focus { transform: scale(1.05); box-shadow: 0 4px 14px rgba(0, 0, 0, 0.32); outline: none; } .vogo-ebs-accesibility__trigger:focus-visible { outline: 3px solid #fff; outline-offset: 2px; } .vogo-ebs-accesibility__trigger svg { width: 26px; height: 26px; display: block; } /* === Panel (deasupra butonului, 320×80vh max) === */ .vogo-ebs-accesibility__panel { position: fixed; left: 13px; bottom: 67px; width: 320px; max-height: 80vh; background: #fff; color: #1a1a1a; border-radius: 12px; box-shadow: 0 8px 32px rgba(0, 0, 0, 0.18); z-index: 999999; display: flex; flex-direction: column; overflow: hidden; font-size: 14px; } .vogo-ebs-accesibility__panel[hidden] { display: none !important; } /* === Panel header (titlu + X close) — navy ANSVSA === */ .vogo-ebs-accesibility__header { display: flex; align-items: center; justify-content: space-between; padding: 12px 16px; background: #0C2F59; color: #fff; } .vogo-ebs-accesibility__title { margin: 0; font-size: 15px; font-weight: 600; line-height: 1.2; color: #fff; } .vogo-ebs-accesibility__close { background: transparent; border: 0; padding: 0; color: #fff; font-size: 26px; line-height: 1; cursor: pointer; width: 32px; height: 32px; border-radius: 4px; display: flex; align-items: center; justify-content: center; } .vogo-ebs-accesibility__close:hover, .vogo-ebs-accesibility__close:focus { background: rgba(255, 255, 255, .18); outline: none; } .vogo-ebs-accesibility__close:focus-visible { outline: 2px solid #fff; outline-offset: 1px; } /* === Panel body — grid 2×N opțiuni === */ .vogo-ebs-accesibility__body { padding: 10px; overflow-y: auto; display: grid; grid-template-columns: 1fr 1fr; gap: 6px; } /* === Option button === */ .vogo-ebs-accesibility__opt { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 6px; padding: 10px 6px; background: #f5f7fa; color: #1a1a1a; border: 2px solid transparent; border-radius: 8px; cursor: pointer; font-size: 12px; font-weight: 500; text-align: center; min-height: 78px; line-height: 1.25; transition: background .15s ease, border-color .15s ease; font-family: inherit; } .vogo-ebs-accesibility__opt:hover { background: #e7edf5; } .vogo-ebs-accesibility__opt:focus-visible { outline: none; border-color: #0C2F59; } .vogo-ebs-accesibility__opt svg { color: #0C2F59; flex-shrink: 0; } .vogo-ebs-accesibility__opt.is-active { background: #0C2F59; color: #fff; border-color: #01255C; } .vogo-ebs-accesibility__opt.is-active svg { color: #fff; } /* Reset — full width, navy ANSVSA solid (aceeași identitate vizuală cu trigger/header) */ .vogo-ebs-accesibility__opt--reset { grid-column: 1 / -1; background: #0C2F59; color: #fff; } .vogo-ebs-accesibility__opt--reset:hover { background: #01255C; } .vogo-ebs-accesibility__opt--reset svg { color: #fff; } /* === Mobile responsive (≤480px) === */ @media (max-width: 480px) { .vogo-ebs-accesibility__panel { left: 10px; right: 10px; width: auto; bottom: 67px; } } /* === Reading guide bar (dynamic — DOM element creat de JS) === */ #vogo-ebs-accesibility-guide { position: fixed; left: 0; right: 0; height: 36px; background: rgba(12, 47, 89, 0.18); border-top: 2px solid #0C2F59; border-bottom: 2px solid #0C2F59; pointer-events: none; z-index: 999998; display: none; } html.vogo-ebs-accesibility--reading-guide #vogo-ebs-accesibility-guide { display: block; } /* ───────────────────────────────────────────────────────────────────────── GLOBAL EFFECTS — clase aplicate pe de JS / early apply script ───────────────────────────────────────────────────────────────────────── */ /* Font scale — variabil CSS multiplică font-size pe body */ html.vogo-ebs-accesibility--font-scaled body { font-size: calc(1em * var(--vogo-ebs-accesibility-font-scale, 1)) !important; } /* High contrast — alb pe negru, linkuri galbene */ html.vogo-ebs-accesibility--high-contrast, html.vogo-ebs-accesibility--high-contrast body { background: #000 !important; color: #fff !important; } html.vogo-ebs-accesibility--high-contrast a, html.vogo-ebs-accesibility--high-contrast a * { color: #ffff00 !important; } html.vogo-ebs-accesibility--high-contrast input, html.vogo-ebs-accesibility--high-contrast select, html.vogo-ebs-accesibility--high-contrast textarea, html.vogo-ebs-accesibility--high-contrast button:not(.vogo-ebs-accesibility__trigger):not(.vogo-ebs-accesibility__close):not(.vogo-ebs-accesibility__opt) { background: #000 !important; color: #fff !important; border-color: #fff !important; } /* Dark mode */ html.vogo-ebs-accesibility--dark-mode, html.vogo-ebs-accesibility--dark-mode body { background: #121212 !important; color: #e0e0e0 !important; } html.vogo-ebs-accesibility--dark-mode a { color: #82b1ff !important; } /* Grayscale */ html.vogo-ebs-accesibility--grayscale body { filter: grayscale(100%) !important; } /* Underline links */ html.vogo-ebs-accesibility--underline-links a { text-decoration: underline !important; } /* Dyslexic-friendly font (Atkinson Hyperlegible dacă e instalat, altfel Verdana) */ html.vogo-ebs-accesibility--dyslexic-font, html.vogo-ebs-accesibility--dyslexic-font body, html.vogo-ebs-accesibility--dyslexic-font body * { font-family: "Atkinson Hyperlegible", Verdana, Arial, sans-serif !important; } /* Increased spacing — line-height, letter-spacing, word-spacing */ html.vogo-ebs-accesibility--spacing body, html.vogo-ebs-accesibility--spacing body * { line-height: 1.8 !important; letter-spacing: 0.12em !important; word-spacing: 0.16em !important; } /* Big cursor — săgeată custom alb + contur negru, 40×40 */ html.vogo-ebs-accesibility--big-cursor, html.vogo-ebs-accesibility--big-cursor * { cursor: url("data:image/svg+xml;utf8,") 4 4, auto !important; } /* Stop animations — kill transitions/animations/smooth scroll global */ html.vogo-ebs-accesibility--stop-animations *, html.vogo-ebs-accesibility--stop-animations *::before, html.vogo-ebs-accesibility--stop-animations *::after { transition: none !important; animation: none !important; scroll-behavior: auto !important; }