/* ===================================================== WCAG 2.2 AA Compliance Styles ===================================================== */ /* === High Contrast Mode === */ body.high-contrast { --primary: #000000; --primary-light: #333333; --primary-dark: #000000; --bg: #FFFFFF; --bg-white: #FFFFFF; --text: #000000; --text-light: #000000; --border: #000000; } body.high-contrast .site-header { background: #000; } body.high-contrast .site-footer { background: #000; } body.high-contrast a { color: #0000EE; text-decoration: underline; } body.high-contrast .btn-primary { background: #000; color: #FFFF00; border: 2px solid #FFFF00; } body.high-contrast .btn-outline { border-color: #FFFF00; color: #FFFF00; } body.high-contrast .btn-accent { background: #FFFF00; color: #000; } body.high-contrast .nav-menu > li > a { color: #FFFF00; } body.high-contrast .dropdown li a { color: #000 !important; background: #fff !important; } body.high-contrast .news-category, body.high-contrast .article-category, body.high-contrast .doc-type { background: #000; color: #FFFF00; } body.high-contrast .cat-pill { border-color: #000; color: #000; } body.high-contrast .cat-pill.active { background: #000; color: #FFFF00; } body.high-contrast img { filter: none; } /* Don't distort images */ /* === Color Schemes (palette toolbar) === Trei teme alternative pentru utilizatori cu nevoi vizuale specifice. Activate prin clase pe ; persistente în localStorage. */ /* Negru pe Alb — minimalist, contrast maxim */ body.theme-bw { --primary: #000; --primary-light: #333; --primary-dark: #000; --bg: #FFF; --bg-white: #FFF; --text: #000; --text-light: #222; --text-muted: #444; --border: #000; --accent: #000; --accent-dark: #000; background: #FFF !important; color: #000; } body.theme-bw h1, body.theme-bw h2, body.theme-bw h3, body.theme-bw h4, body.theme-bw h5, body.theme-bw h6 { color: #000; } body.theme-bw .site-header, body.theme-bw .site-footer { background: #FFF !important; color: #000; border-top: 2px solid #000; border-bottom: 2px solid #000; } body.theme-bw .site-header *, body.theme-bw .site-footer * { color: #000 !important; } body.theme-bw a { color: #0000EE; text-decoration: underline; } body.theme-bw a:visited { color: #551A8B; } body.theme-bw .btn-primary, body.theme-bw .btn-accent { background: #000; color: #FFF; border: 2px solid #000; } body.theme-bw .btn-outline { background: #FFF; color: #000; border: 2px solid #000; } body.theme-bw .nav-menu > li > a, body.theme-bw .footer-menu a { color: #000 !important; } body.theme-bw .news-card, body.theme-bw .staff-card, body.theme-bw .doc-card, body.theme-bw .structure-card, body.theme-bw .footer-stat { background: #FFF; border: 1px solid #000; box-shadow: none; } body.theme-bw .rs-hero, body.theme-bw .rs-hero--page { background: #FFF !important; color: #000; } body.theme-bw .rs-hero *, body.theme-bw .rs-hero--page * { color: #000 !important; } body.theme-bw img { filter: grayscale(100%); } /* Alb pe Negru — întuneric, util în lumină scăzută */ body.theme-wb { --primary: #FFF; --primary-light: #DDD; --primary-dark: #FFF; --bg: #000; --bg-white: #000; --text: #FFF; --text-light: #DDD; --text-muted: #BBB; --border: #FFF; --accent: #FFF; --accent-dark: #FFF; background: #000 !important; color: #FFF; } body.theme-wb h1, body.theme-wb h2, body.theme-wb h3, body.theme-wb h4, body.theme-wb h5, body.theme-wb h6 { color: #FFF; } body.theme-wb .site-header, body.theme-wb .site-footer { background: #000 !important; color: #FFF; border-top: 2px solid #FFF; border-bottom: 2px solid #FFF; } body.theme-wb .site-header *, body.theme-wb .site-footer * { color: #FFF !important; } body.theme-wb a { color: #FFFF00; text-decoration: underline; } body.theme-wb a:visited { color: #FFCC00; } body.theme-wb .btn-primary, body.theme-wb .btn-accent { background: #FFF; color: #000; border: 2px solid #FFF; } body.theme-wb .btn-outline { background: #000; color: #FFF; border: 2px solid #FFF; } body.theme-wb .nav-menu > li > a, body.theme-wb .footer-menu a { color: #FFF !important; } body.theme-wb .news-card, body.theme-wb .staff-card, body.theme-wb .doc-card, body.theme-wb .structure-card, body.theme-wb .footer-stat { background: #000; border: 1px solid #FFF; box-shadow: none; } body.theme-wb .rs-hero, body.theme-wb .rs-hero--page { background: #000 !important; color: #FFF; } body.theme-wb .rs-hero *, body.theme-wb .rs-hero--page * { color: #FFF !important; } body.theme-wb img { filter: brightness(0.85) contrast(1.1); } /* Galben pe Albastru — recomandat pentru dislexie / Irlen syndrome */ body.theme-yb { --primary: #FFFF00; --primary-light: #FFE680; --primary-dark: #FFFF00; --bg: #003366; --bg-white: #003366; --text: #FFFF00; --text-light: #FFE680; --text-muted: #FFCC66; --border: #FFFF00; --accent: #FFFFFF; --accent-dark: #FFFFFF; background: #003366 !important; color: #FFFF00; } body.theme-yb h1, body.theme-yb h2, body.theme-yb h3, body.theme-yb h4, body.theme-yb h5, body.theme-yb h6 { color: #FFFF00; } body.theme-yb .site-header, body.theme-yb .site-footer { background: #003366 !important; color: #FFFF00; border-top: 2px solid #FFFF00; border-bottom: 2px solid #FFFF00; } body.theme-yb .site-header *, body.theme-yb .site-footer * { color: #FFFF00 !important; } body.theme-yb a { color: #FFFFFF; text-decoration: underline; } body.theme-yb a:visited { color: #CCCCFF; } body.theme-yb .btn-primary, body.theme-yb .btn-accent { background: #FFFF00; color: #003366; border: 2px solid #FFFF00; } body.theme-yb .btn-outline { background: #003366; color: #FFFF00; border: 2px solid #FFFF00; } body.theme-yb .nav-menu > li > a, body.theme-yb .footer-menu a { color: #FFFF00 !important; } body.theme-yb .news-card, body.theme-yb .staff-card, body.theme-yb .doc-card, body.theme-yb .structure-card, body.theme-yb .footer-stat { background: #002244; border: 1px solid #FFFF00; box-shadow: none; } body.theme-yb .rs-hero, body.theme-yb .rs-hero--page { background: #003366 !important; color: #FFFF00; } body.theme-yb .rs-hero *, body.theme-yb .rs-hero--page * { color: #FFFF00 !important; } body.theme-yb img { filter: brightness(0.9); } /* === Font Size Adjustments (up to 200% per WCAG 1.4.4) === Applied on so rem units scale correctly. Classes are toggled on but CSS targets html via :has() or JS applies to both. */ html.font-size-1 { font-size: 112.5% !important; } /* 18px */ html.font-size-2 { font-size: 125% !important; } /* 20px */ html.font-size-3 { font-size: 150% !important; } /* 24px */ html.font-size-4 { font-size: 175% !important; } /* 28px */ html.font-size-5 { font-size: 200% !important; } /* 32px — WCAG 1.4.4 max */ /* === 2.4.11 Focus Not Obscured — Minimum (NEW in WCAG 2.2 AA) === Focused element must not be fully hidden by sticky header/cookie banner. scroll-padding ensures focused element scrolls into visible area. */ html { scroll-padding-top: 80px; /* height of sticky header */ scroll-padding-bottom: 80px; /* space for cookie banner */ } /* When cookie banner is visible, add extra scroll padding */ body.has-cookie-banner { scroll-padding-bottom: 120px; } /* Ensure sticky header doesn't cover focused elements */ .site-header { z-index: 1000; } *:focus-visible { z-index: 1001; /* Above sticky header */ position: relative; } /* === 2.4.7 + Focus Indicators (Enhanced for WCAG 2.2) === Minimum 2px outline, 3:1 contrast ratio between focused/unfocused states */ *:focus-visible { outline: 3px solid #F4D03F; outline-offset: 3px; box-shadow: 0 0 0 5px rgba(244, 208, 63, 0.3); } /* Specific focus styles for interactive elements */ a:focus-visible { outline: 3px solid #F4D03F; outline-offset: 2px; border-radius: 2px; } button:focus-visible, input:focus-visible, select:focus-visible, textarea:focus-visible { outline: 3px solid #F4D03F; outline-offset: 2px; box-shadow: 0 0 0 4px rgba(244, 208, 63, 0.35); } /* Focus within dropdown menus */ .nav-menu li:focus-within > .dropdown { display: block; } /* === 2.5.8 Target Size — Minimum 24×24px (NEW in WCAG 2.2 AA) === All interactive elements must be at least 24×24 CSS pixels */ /* Navigation links */ .nav-menu > li > a { min-height: 44px; display: flex; align-items: center; } .dropdown li a { min-height: 44px; display: flex; align-items: center; } /* Buttons */ .btn { min-height: 44px; min-width: 44px; display: inline-flex; align-items: center; justify-content: center; } .btn-small { min-height: 32px; min-width: 32px; } /* Footer links */ .footer-menu li a { min-height: 32px; display: inline-flex; align-items: center; } /* Pagination */ .pagination-nav .nav-links a, .pagination-nav .nav-links span, .navigation.pagination .nav-links a, .navigation.pagination .nav-links span { min-height: 44px; min-width: 44px; } /* Category pills */ .cat-pill { min-height: 36px; display: inline-flex; align-items: center; } /* A11y FAB and panel buttons */ .a11y-fab, .a11y-panel button { min-width: 44px; min-height: 44px; } /* Slider controls */ .slider-prev, .slider-next { min-width: 44px; min-height: 44px; } .dot { min-width: 24px; min-height: 24px; } /* Social links */ .social-links a { min-width: 44px; min-height: 44px; } /* Menu toggle */ .menu-toggle { min-width: 44px; min-height: 44px; } /* Search button */ .header-search button { min-width: 44px; min-height: 44px; } /* Read more links - ensure adequate tap area */ .read-more { min-height: 24px; padding: 4px 0; } /* Document download links */ .doc-list li a { min-height: 32px; display: inline-flex; align-items: center; padding: 4px 0; } /* === 2.5.7 Dragging Movements (WCAG 2.2 AA) === No drag-only functionality in theme. All sortable UI (menu builder in admin) is admin-only, not public. OK. */ /* === 3.2.6 Consistent Help (WCAG 2.2 AA) === Help/contact info is consistently in footer on all pages. Phone and email always visible in same position. OK. */ /* === 3.3.7 Redundant Entry (WCAG 2.2 AA) === No multi-step forms in theme. Contact form is single page. OK. */ /* === 3.3.8 Accessible Authentication (WCAG 2.2 AA) === No public login. Admin login uses standard username/password with browser autofill support (autocomplete attributes). OK. */ /* === 1.4.4 Resize Text — Content remains functional at 200% === All sizing uses rem/em/clamp, no fixed px breakage */ @media (min-resolution: 192dpi) { html { font-size: 100%; } } /* === 1.4.12 Text Spacing (WCAG 2.1 AA, maintained in 2.2) === Content must not be lost when user overrides text spacing */ body { word-wrap: break-word; overflow-wrap: break-word; } /* === 1.4.13 Content on Hover or Focus === Dropdown menus dismissible, hoverable, persistent */ .nav-menu .dropdown { pointer-events: auto; } .nav-menu li:hover > .dropdown, .nav-menu li:focus-within > .dropdown { display: block; } /* Dropdown stays open when hovering its content */ .nav-menu .dropdown:hover { display: block; } /* === Print === */ @media print { .a11y-fab, .a11y-panel { display: none !important; } }