/* ================================================================ WCAG 2.1 AA – Poprawki dostępności | Hotel Lipowy Most Dołączyć do każdej strony jako ostatni plik CSS w ================================================================ */ /* ------------------------------------------------------------------ 0. FIX: Eliminuje błysk ostatniego zdjęcia podczas scrollowania strony głównej. Nieaktywne sekcje mają background-image-wrapper ukryty przez opacity+visibility. JS (wcag.js) synchronizuje to z klasą .in-view w czasie rzeczywistym przez MutationObserver. ------------------------------------------------------------------ */ .fullscreen-section .background-image-wrapper { transition: opacity 0.15s ease; } .fullscreen-section:not(.in-view) .background-image-wrapper { opacity: 0 !important; visibility: hidden !important; } .fullscreen-section.in-view .background-image-wrapper { opacity: 1 !important; visibility: visible !important; } /* ------------------------------------------------------------------ 0b. Przycisk "Zarezerwuj" + kompresja menu głównego. Problem: primary-nav ma 8 pozycji z domyślnym margin: 0 1.2rem (skin.css). Po dodaniu przycisku Zarezerwuj do secondary-nav łączna szerokość obu navów przekracza dostępne miejsce w nagłówku i menu się zwija. Rozwiązanie: zmniejszamy margin pozycji menu do 0.65rem (tylko na desktopie ≥960px) – oszczędzamy ~88px, co w zupełności wystarcza na przycisk (~110px). ------------------------------------------------------------------ */ /* Kompresja menu na desktopach do 1700px */ @media only screen and (min-width: 960px) and (max-width: 1699px) { .header .navigation > ul > li > a:not(.nav-book-btn) { margin: 0 0.45rem !important; letter-spacing: 0.05rem !important; } } /* Na bardzo szerokich ekranach (≥1700px) — umiarkowane odstępy */ @media only screen and (min-width: 1700px) { .header .navigation > ul > li > a:not(.nav-book-btn) { margin: 0 0.8rem !important; letter-spacing: 0.05rem !important; } } /* Wyśrodkuj secondary-nav i przycisk Zarezerwuj pionowo w pasku nagłówka */ .header .secondary-navigation { display: flex !important; align-items: center !important; height: 100% !important; } .header .secondary-navigation > ul { display: flex !important; align-items: center !important; height: 100% !important; } .secondary-navigation .nav-book-item { float: none !important; display: flex !important; align-items: center !important; } /* Styl samego przycisku */ .nav-book-btn { display: inline-block !important; padding: 8px 16px !important; font-size: 11px !important; font-weight: 700 !important; letter-spacing: 0.08em !important; text-transform: uppercase !important; line-height: 1.3 !important; border-radius: 3px !important; white-space: nowrap !important; } /* Wersja kompaktowa gdy header zmniejsza się po scrollu */ .header-compact .nav-book-btn { padding: 6px 13px !important; font-size: 11px !important; } /* ------------------------------------------------------------------ 1. SKIP LINK – "Przejdź do treści" Niewidoczny dopóki nie otrzyma fokusa klawiszem Tab WCAG 2.4.1 – Bypass Blocks ------------------------------------------------------------------ */ .skip-link { position: fixed; top: -100px; left: 8px; z-index: 9999999; padding: 12px 24px; background: #034f01; color: #fff !important; font-family: 'Open Sans', sans-serif; font-size: 14px; font-weight: 700; text-decoration: none !important; border-radius: 0 0 6px 6px; box-shadow: 0 4px 12px rgba(0,0,0,.4); transition: top .15s ease; white-space: nowrap; } .skip-link:focus { top: 0; outline: 3px solid #fff; outline-offset: 2px; } /* ------------------------------------------------------------------ 2. WIDOCZNY FOCUS dla wszystkich elementów interaktywnych WCAG 2.4.7 – Focus Visible ------------------------------------------------------------------ */ :focus-visible { outline: 3px solid #034f01 !important; outline-offset: 3px !important; border-radius: 2px; } /* Na ciemnym tle (header, slider) – biały outline */ .header :focus-visible, .side-navigation-wrapper :focus-visible, .footer-bottom :focus-visible { outline: 3px solid #fff !important; outline-offset: 3px !important; } /* Wyczyść domyślne outline przeglądarki tylko jeśli :focus-visible jest obsługiwane */ :focus:not(:focus-visible) { outline: none; } /* ------------------------------------------------------------------ 3. KONTRAST PRZYCISKÓW – przyciemnienie koloru marki Oryginalny #677d20 daje kontrast ~4.2:1 (wymagane 4.5:1 dla AA) Nowy #526314 daje kontrast ~5.0:1 ✅ WCAG 1.4.3 – Contrast (Minimum) ------------------------------------------------------------------ */ .bkg-theme { background-color: #526314 !important; border-color: #526314 !important; } .bkg-hover-theme:hover { background-color: #526314 !important; border-color: #526314 !important; } .border-theme { border-color: #526314 !important; } .color-theme { color: #526314 !important; } .color-hover-theme:hover { color: #526314 !important; } /* Upewnij się że tekst na zielonym tle jest biały */ .bkg-theme, .bkg-theme:hover { color: #fff !important; } /* ------------------------------------------------------------------ 4. PRZYCISK PAUZY SLIDERA WCAG 2.2.2 – Pause, Stop, Hide ------------------------------------------------------------------ */ .wcag-slider-pause { position: absolute; bottom: 20px; right: 20px; z-index: 10000; width: 44px; height: 44px; /* min. 44x44px zgodnie z WCAG 2.5.5 */ background: rgba(0, 0, 0, 0.65); color: #fff; border: 2px solid rgba(255, 255, 255, 0.8); border-radius: 50%; font-size: 18px; cursor: pointer; display: flex; align-items: center; justify-content: center; transition: background .2s; line-height: 1; } .wcag-slider-pause:hover { background: rgba(0, 0, 0, 0.9); } .wcag-slider-pause:focus-visible { outline: 3px solid #fff !important; outline-offset: 3px !important; } /* ------------------------------------------------------------------ 5. REDUKCJA ANIMACJI (prefers-reduced-motion) WCAG 2.3.3 (AAA) + dobra praktyka dla 2.3.1 ------------------------------------------------------------------ */ @media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; transition-duration: 0.01ms !important; scroll-behavior: auto !important; } /* Wyłącz efekt parallax */ .background-fixed, [class*="background-fixed"], .section-block.background-fixed { background-attachment: scroll !important; } /* Wyłącz animacje wejścia TMS Slider */ [data-animate-in] { opacity: 1 !important; transform: none !important; animation: none !important; transition: none !important; } /* Wyłącz animacje slidera */ .tm-slider-container .tms-slides, .tm-slider-container .tms-slide { transition: none !important; animation: none !important; } } /* ------------------------------------------------------------------ 6. ROZMIAR DOTYKALNYCH ELEMENTÓW WCAG 2.5.5 – Target Size (minimum 44x44px dla AA) Tylko w stopce i menu bocznym – nie w headerze (żeby nie psuć układu) ------------------------------------------------------------------ */ .footer .social-list a, .side-navigation-footer .social-list a, .sm-panel > ul > li > a { min-width: 44px; min-height: 44px; display: inline-flex !important; align-items: center; justify-content: center; } .navigation-show, .navigation-hide a { min-width: 44px; min-height: 44px; display: inline-flex !important; align-items: center; justify-content: center; } /* ------------------------------------------------------------------ 7b. UKRYCIE IKON SOCIAL MEDIA Z HEADERA Pozostają tylko w stopce i menu bocznym ------------------------------------------------------------------ */ .header .secondary-navigation .social-list, .header .v-align-middle .social-list { display: none !important; } /* ------------------------------------------------------------------ 7. ETYKIETY FORMULARZY – widoczne (nie tylko placeholder) WCAG 1.3.1 – Info and Relationships ------------------------------------------------------------------ */ .wcag-label { display: block; font-size: 12px; font-weight: 600; color: #555; margin-bottom: 4px; font-family: 'Open Sans', sans-serif; } /* Ukryj wizualnie ale zostaw dla czytników ekranu */ .sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0; } /* ------------------------------------------------------------------ 8. SM-PANEL – ikony social media na bocznym pasku Dodatkowe aria-label są wstrzykiwane przez wcag.js ------------------------------------------------------------------ */ .sm-panel > ul > li > a { min-width: 44px; min-height: 44px; }