. * Każda reguła = zamierzona różnica opisana w docs/agents/astro-dev.md. Test wizualny ładuje ten plik * także do eksportu (przez tests/intended-dom.mjs), więc reszta strony jest dalej porównywana 1:1. */ /* Karty realizacji bez podstrony: bez href — kursor jak przy elemencie nieklikalnym */ .filter-list__item a:not([href]) { cursor: default; } /* Zakładki oferty: bez href="#" — zachowany kursor wskazujący */ .tab-content__item { cursor: pointer; } /* ——— Dostępność (decyzja 4, 2026-10-06) ——— */ /* Widoczny fokus z klawiatury: 2 px w kolorze tekstu elementu, z odstępem; na ciemnych tłach biały */ a:focus-visible, button:focus-visible, [tabindex]:focus-visible { outline: 2px solid #131313; outline-offset: 3px; } .crisp-header a:focus-visible, .crisp-header [tabindex]:focus-visible, .nav:not(.is--on-light) a:focus-visible, .nav:not(.is--on-light) button:focus-visible, .u-mode-dark a:focus-visible, .u-mode-dark button:focus-visible { outline-color: #ffffff; } /* menu mobilne otwarte = białe tło panelu */ .nav[data-menu-status="open"] a:focus-visible, .nav[data-menu-status="open"] button:focus-visible { outline-color: #131313; } /* Kontrasty (WCAG AA 4.5:1), zmiany minimalne */ .form-inactive-text { opacity: 1; color: #6b6b6b; } /* „(opcjonalnie)”: 2,3 → 5,3:1 */ .form-input::placeholder { color: #666666; } /* placeholdery: ~2:1 → 4,8:1 na #efeeec */ [data-form-validate] select:has(option[value=""]:checked) { color: #666666; } /* „Wybierz z listy”: 1,95 → 4,8:1 */ .button-097[data-theme='secondary'] { --button-097-hover-color-background: #3f7a21; } /* hover: 4,45 → 5,4:1 */ .btn-animate-chars.form:hover { background-color: #3f7a21; } /* Cele dotykowe linków stopki ≥ 24 px na telefonie (bez przesunięcia układu: padding + ujemny margines) */ @media (max-width: 767px) { .osmo-footer__a, .osmo-footer-privacy__a { padding-block: 2px; margin-block: -2px; } } /* prefers-reduced-motion: przejścia i animacje CSS praktycznie natychmiastowe */ @media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; transition-duration: 0.01ms !important; transition-delay: 0s !important; scroll-behavior: auto !important; } } /* „Umów konsultację” w panelu menu mobilnego (≤ 991 px, gdzie przycisk w nagłówku jest ukryty). Ten sam przycisk co w nagłówku (btn-animate-chars secondary), na białym panelu: czarna ramka i tekst. */ .nav-mobile-cta { display: none; } @media (max-width: 991px) { .nav-mobile-cta { display: block; margin-top: 1.5em; padding-inline: 1.25em; } /* wcięcie jak tekst linków menu */ .nav .nav-mobile-cta .btn-animate-chars.secondary { display: flex; max-width: 14em; } .nav .nav-mobile-cta .btn-animate-chars.secondary .btn-animate-chars__bg { background-color: transparent; border: 1px solid #131313; } .nav .nav-mobile-cta .btn-animate-chars.secondary .btn-animate-chars__text { color: #131313; } } /* ——— Menu mobilne (hamburger + panel) do 991 px (decyzja 2026-10-06) ——— W eksporcie hamburger działa tylko ≤ 767 px; na 768–991 px był poziomy pasek z linkami. Tu powtórzone 1:1 reguły ≤ 767 px z wizualnie.webflow.css i z Custom Code („MOBILE STATE WITH BURGER MENU”), zawężone do 768–991 px, więc ≤ 767 px i ≥ 992 px zostają bez zmian. Reguły tabletowe eksportu (≤ 991 px: .nav-link padding 1em, .nav-link__label 1em) są tu nadpisane wartościami mobilnymi (ten plik ładuje się później). Dropdownów (.nav-dropdown*) nie ma w markupie (li.future usunięte) — ich reguł mobilnych nie powtarzamy. JS: próg trybu mobilnego w 10-init-navigation.js = < 992 (PATCH nav-mobile-991 w custom-code-config.mjs). */ @media screen and (min-width: 768px) and (max-width: 991px) { :root { --nav-bg-height: 100dvh; } /* wizualnie.webflow.css @media (max-width: 767px) */ .nav-end { z-index: 2; position: relative; } .nav-logo { z-index: 1; position: relative; } .menu-button { display: flex; } .nav-bg { border-bottom-right-radius: 0; border-bottom-left-radius: 0; height: 0; } .nav-center__list { flex-flow: column; justify-content: flex-start; align-items: stretch; height: 100%; padding-top: 8em; overflow: hidden scroll; } .nav-link__label { font-size: 2em; } .nav-link { justify-content: space-between; align-items: center; width: 100%; padding: 1em 1.25em; } .nav-center { z-index: 0; opacity: 0; visibility: hidden; height: 100dvh; position: absolute; top: 0; left: -1.25em; right: -1.25em; transform: translate(0, 1em); } /* Custom Code: MOBILE STATE WITH BURGER MENU */ .nav-center { transition: all var(--duration-normal) var(--cubic-default), opacity var(--duration-fast) var(--cubic-default); } .menu-button__line { transition: all var(--duration-normal) var(--cubic-default); } [data-menu-status="open"] { color: var(--color-dark); } [data-menu-status="open"] .menu-button__line:nth-of-type(1) { transform: translate(0px, 0.125em) rotate(135deg); background-color: #FFF; } [data-menu-status="open"] .menu-button__line:nth-of-type(2) { transform: translate(0px, -0.175em) rotate(-135deg); background-color: #FFF; } [data-menu-status="open"] .nav-bg { height: var(--nav-bg-height); } [data-menu-status="open"] .page-bg { opacity: 1; } [data-menu-status="open"] .nav-center { opacity: 1; visibility: visible; transform: translate(0px, 0em); transition-delay: 0.1s; } } /* ——— „O nas” (sticky steps) nie wystaje poza ekran na 480–767 px (2026-10-06) ——— Błąd także w eksporcie: nagłówek min(5em, 14vw) — „Magdalena” (~7,2 × font-size) szerszy niż kolumna, a .sticky-steps__list (flex: 1) bez min-width: 0 rozpychała kolumnę tekstu (h2 + akapity) poza ekran (do ~95 px). 11vw: największa okrągła wartość mieszcząca się w całym zakresie (Playwright co 20 px, 480–991); ≤ 479 eksport ma 12vw. */ @media screen and (max-width: 991px) { .sticky-steps__list { min-width: 0; } } @media screen and (min-width: 480px) and (max-width: 767px) { .sticky-steps__h2 { font-size: min(5em, 11vw); } } /* ——— width/height na (etap 3, wyd. R11 — CLS) ——— Atrybuty dają proporcje przed załadowaniem obrazka. Obrazki, którym CSS nie nadaje wysokości (np. .filter-photo: width 100%), dostają height: auto — bez tego wysokość z atrybutu rozciągnęłaby je. :where() = specyficzność 0, więc każda klasa z wysokością (cover: 100%) wygrywa jak dotąd. */ :where(img[width][height]) { height: auto; } /* ——— AVIF przez