/* ========================================================================== ELEKTROTEC Kolbuszowa — arkusz stylów Mobile-first od 320 px. Zero style="" w HTML (CSP: style-src 'self'). ========================================================================== */ /* --- Fonty (self-hosted, RODO: brak połączeń do Google) ------------------ */ @font-face { font-family: 'Bricolage Grotesque'; src: url('../fonts/bricolage-grotesque-latin-ext.woff2') format('woff2'); font-weight: 400 800; font-display: swap; unicode-range: U+0100-024F, U+0259, U+1E00-1EFF, U+2020, U+20A0-20AB, U+20AD-20CF, U+2113, U+2C60-2C7F, U+A720-A7FF; } @font-face { font-family: 'Bricolage Grotesque'; src: url('../fonts/bricolage-grotesque-latin.woff2') format('woff2'); font-weight: 400 800; font-display: swap; unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; } @font-face { font-family: 'Plus Jakarta Sans'; src: url('../fonts/plus-jakarta-sans-latin-ext.woff2') format('woff2'); font-weight: 300 800; font-display: swap; unicode-range: U+0100-024F, U+0259, U+1E00-1EFF, U+2020, U+20A0-20AB, U+20AD-20CF, U+2113, U+2C60-2C7F, U+A720-A7FF; } @font-face { font-family: 'Plus Jakarta Sans'; src: url('../fonts/plus-jakarta-sans-latin.woff2') format('woff2'); font-weight: 300 800; font-display: swap; unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; } /* --- Zmienne ------------------------------------------------------------- */ :root { /* #c74809 zamiast jaśniejszego #e2560c — ten drugi dawał tylko 3,77:1 kontrastu z bielą, poniżej wymaganych przez WCAG AA 4,5:1 dla tekstu. To dotyczyło przycisków CTA „Zadzwoń" i linków. #c74809 = 6,05:1. */ --pomarancz: #c74809; --pomarancz-jasny: #ff7a29; --pomarancz-tlo: #fff4ed; --grafit: #15181d; --grafit-2: #2a2f38; --szary: #5c6470; --szary-jasny: #e6e9ee; --tlo: #ffffff; --tlo-2: #f6f7f9; --zielony: #12803c; --maks: 1180px; --r: 14px; --r-mala: 9px; --cien: 0 1px 2px rgba(21,24,29,.06), 0 6px 20px rgba(21,24,29,.07); --cien-mocny: 0 10px 34px rgba(21,24,29,.14); --przejscie: .22s cubic-bezier(.4,0,.2,1); } /* --- Reset --------------------------------------------------------------- */ *, *::before, *::after { box-sizing: border-box; } * { min-width: 0; } /* ratuje flex/grid przed rozpychaniem na 320px */ html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; } @media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } } body { margin: 0; font-family: 'Plus Jakarta Sans', system-ui, -apple-system, 'Segoe UI', Arial, sans-serif; font-size: clamp(1rem, .96rem + .22vw, 1.0625rem); line-height: 1.65; color: var(--grafit); background: var(--tlo); overflow-x: clip; /* siatka bezpieczeństwa, nie zamiast naprawy */ -webkit-font-smoothing: antialiased; } img, svg, video { max-width: 100%; height: auto; display: block; } h1, h2, h3, h4 { font-family: 'Bricolage Grotesque', 'Plus Jakarta Sans', system-ui, sans-serif; line-height: 1.14; margin: 0 0 .5em; font-weight: 700; letter-spacing: -.02em; text-wrap: balance; } h1 { font-size: clamp(1.75rem, 1.32rem + 2.1vw, 3.25rem); } h2 { font-size: clamp(1.45rem, 1.2rem + 1.25vw, 2.3rem); } h3 { font-size: clamp(1.1rem, 1.02rem + .4vw, 1.3rem); } p { margin: 0 0 1rem; } /* Tekst justowany (wyrównanie do lewej i prawej krawędzi). `hyphens: auto` jest OBOWIĄZKOWE razem z justowaniem — bez dzielenia wyrazów justowanie robi na wąskich ekranach szerokie dziury między słowami. Działa dzięki lang="pl" na . Nagłówków NIE justujemy. */ p, .wiodacy, .faq__odp, .faq__odp p, .opinia__tresc, .lista-ptaszki li, .dokument li, .stopka p { text-align: justify; text-justify: inter-word; hyphens: auto; -webkit-hyphens: auto; overflow-wrap: break-word; } /* Elementy, które justowane być NIE mogą — krótkie etykiety, liczby, przyciski. */ .zaufanie__opis, .marka__rola, .opinia__autor, .opinia__data, .dane__etykieta, .dane__wartosc, .dane__dopisek, .miasta li, .hero__odznaka, .stopka__dol span, .btn, .nadtytul, .logo__dopisek { text-align: inherit; hyphens: manual; } .zaufanie__el, .marka, .stopka__dol { text-align: center; } .stopka__dol { text-align: left; } a { color: var(--pomarancz); text-decoration-thickness: .08em; text-underline-offset: .18em; } ul { margin: 0 0 1rem; padding-left: 1.15rem; } /* długie słowa: numery katalogowe, e-maile, nazwy modeli */ .lamliwe { overflow-wrap: anywhere; hyphens: auto; } :focus-visible { /* Jasny odcień, nie --pomarancz: ciemny #c74809 na sekcjach grafitowych dawał ~2,9:1, poniżej progu 3:1 dla elementów nietekstowych (WCAG 1.4.11). */ outline: 3px solid var(--pomarancz-jasny); outline-offset: 2px; border-radius: 4px; } /* --- Elementy współdzielone ---------------------------------------------- */ .kontener { width: 100%; max-width: var(--maks); margin-inline: auto; padding-inline: max(1rem, env(safe-area-inset-left)); } .sekcja { padding-block: clamp(2.75rem, 2rem + 3.4vw, 5rem); } .sekcja--tlo { background: var(--tlo-2); } .pomin-do-tresci { position: absolute; left: -9999px; top: 0; background: var(--grafit); color: #fff; padding: .7rem 1.1rem; z-index: 200; border-radius: 0 0 var(--r-mala) 0; } .pomin-do-tresci:focus { left: 0; } /* Nagłówki sekcji wyśrodkowane — przy wyrównaniu do lewej zostawiały pustą przestrzeń po prawej stronie. Tekst wiodący nie może tu być justowany, bo justowanie i wyśrodkowanie wykluczają się nawzajem. */ .naglowek-sekcji { max-width: 46rem; margin-inline: auto; margin-bottom: clamp(1.5rem, 1rem + 1.5vw, 2.5rem); text-align: center; } .naglowek-sekcji .wiodacy { text-align: center; hyphens: manual; } .nadtytul { display: inline-block; font-size: .8125rem; font-weight: 700; letter-spacing: .09em; text-transform: uppercase; color: var(--pomarancz); margin-bottom: .6rem; } .wiodacy { font-size: 1.0625rem; color: var(--szary); margin-bottom: 0; } /* Przyciski — cel dotykowy min. 44x44 px (WCAG 2.5.5) */ .btn { display: inline-flex; align-items: center; justify-content: center; gap: .5rem; min-height: 48px; padding: .75rem 1.35rem; font: inherit; font-weight: 700; font-size: 1rem; border-radius: var(--r-mala); border: 2px solid transparent; text-decoration: none; cursor: pointer; transition: background var(--przejscie), border-color var(--przejscie), transform var(--przejscie); } .btn--glowny { background: var(--pomarancz); color: #fff; } .btn--glowny:hover { background: #a33b06; } .btn--drugi { background: #fff; color: var(--grafit); border-color: var(--szary-jasny); } .btn--drugi:hover { border-color: var(--grafit); } .btn--jasny { background: rgba(255,255,255,.12); color: #fff; border-color: rgba(255,255,255,.45); } .btn--jasny:hover { background: rgba(255,255,255,.22); } .btn:active { transform: translateY(1px); } /* --- Nagłówek ------------------------------------------------------------ */ .naglowek { position: sticky; top: 0; z-index: 100; background: rgba(255,255,255,.94); backdrop-filter: blur(10px); border-bottom: 1px solid var(--szary-jasny); } .naglowek__wnetrze { display: flex; align-items: center; justify-content: space-between; gap: .75rem; min-height: 62px; } .logo { display: inline-flex; align-items: center; gap: .5rem; font-family: 'Bricolage Grotesque', sans-serif; font-weight: 800; font-size: 1.2rem; letter-spacing: -.03em; color: var(--grafit); text-decoration: none; flex-shrink: 0; } .logo__znak { width: 30px; height: 30px; border-radius: 7px; flex-shrink: 0; background: var(--pomarancz); color: #fff; display: grid; place-items: center; font-size: .95rem; } .logo__tekst { white-space: nowrap; } .logo__dopisek { display: block; font-family: 'Plus Jakarta Sans', sans-serif; font-size: .62rem; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; color: var(--szary); line-height: 1; } .nawigacja { display: none; } .naglowek__tel { display: inline-flex; align-items: center; justify-content: center; gap: .4rem; min-height: 44px; min-width: 44px; padding: .4rem 1rem; background: var(--pomarancz); color: #fff; border-radius: var(--r-mala); font-weight: 700; font-size: .95rem; text-decoration: none; white-space: nowrap; } .naglowek__tel:hover { background: #a33b06; } .naglowek__tel span { display: none; } @media (min-width: 900px) { .nawigacja { display: flex; gap: 1.5rem; align-items: center; } .nawigacja a { color: var(--grafit-2); text-decoration: none; font-weight: 600; font-size: .95rem; padding: .5rem 0; } .nawigacja a:hover { color: var(--pomarancz); } .naglowek__tel span { display: inline; } } /* --- Hero ---------------------------------------------------------------- */ .hero { position: relative; background: var(--grafit); color: #fff; overflow: hidden; } .hero__tlo { position: absolute; inset: 0; overflow: hidden; } /* Zdjęcie witryny zawiera własne napisy (banery STIHL, Briggs & Stratton). Rozmycie + skala odbierają im czytelność, żeby nie konkurowały z treścią; zdjęcie nadal buduje kontekst miejsca. Skala kompensuje przezroczyste krawędzie, które daje blur. */ .hero__tlo img { width: 100%; height: 100%; object-fit: cover; opacity: .42; filter: blur(3px) saturate(.85) contrast(.95); transform: scale(1.06); } /* Warstwa czytelności: pełne przyciemnienie pod kolumną tekstu, rozjaśnienie ku prawej krawędzi. */ .hero__tlo::after { content: ''; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(21,24,29,.92) 0%, rgba(21,24,29,.72) 45%, rgba(21,24,29,.88) 100%); } .hero__wnetrze { position: relative; z-index: 1; padding-block: clamp(2.5rem, 1.8rem + 3.5vw, 5rem); display: grid; gap: 2rem; align-items: center; } /* Ostre zdjęcie sklepu — kontra dla rozmytego tła pod treścią. */ .hero__foto { border-radius: var(--r); overflow: hidden; box-shadow: 0 18px 50px rgba(0,0,0,.45); border: 1px solid rgba(255,255,255,.14); } .hero__foto img { width: 100%; aspect-ratio: 4/3; object-fit: cover; opacity: 1; filter: none; transform: none; } @media (min-width: 860px) { /* Zdjęcie zostaje w kolumnie kontenera (nie dochodzi do krawędzi ekranu — przyklejone do brzegu wyglądało źle). Pustka po bokach nie jest czarną plamą, bo tło hero jest rozjaśnione i widać na nim fakturę zdjęcia. */ .hero__wnetrze { grid-template-columns: 1.06fr .94fr; gap: 3rem; align-items: center; } /* Lewa krawędź celowo nieco jaśniejsza — widać fakturę zdjęcia zamiast czarnej plamy. Najciemniej dokładnie pod kolumną z tekstem (18–52%). */ .hero__tlo::after { background: linear-gradient(95deg, rgba(21,24,29,.80) 0%, rgba(21,24,29,.93) 16%, rgba(21,24,29,.95) 50%, rgba(21,24,29,.82) 62%, rgba(21,24,29,.70) 100%), linear-gradient(180deg, rgba(21,24,29,.3) 0%, rgba(21,24,29,0) 30%, rgba(21,24,29,.4) 100%); } .hero__tlo img { opacity: .5; filter: blur(2px) saturate(.9) contrast(.97); } .hero__foto img { aspect-ratio: 5/4; } } .hero__tresc { max-width: 44rem; } .hero h1 { color: #fff; margin-bottom: .7rem; text-shadow: 0 2px 18px rgba(0,0,0,.55); } .hero h1 .akcent { color: var(--pomarancz-jasny); } .hero__opis { font-size: clamp(1rem, .95rem + .35vw, 1.2rem); color: rgba(255,255,255,.93); max-width: 38rem; margin-bottom: 1.5rem; text-shadow: 0 1px 12px rgba(0,0,0,.5); } .hero__odznaka { display: inline-flex; align-items: center; gap: .45rem; background: rgba(255,255,255,.13); border: 1px solid rgba(255,255,255,.25); padding: .4rem .8rem; border-radius: 100px; font-size: .82rem; font-weight: 700; letter-spacing: .02em; margin-bottom: 1.1rem; } .hero__gwiazdki { color: #ffc233; letter-spacing: -.05em; } .hero__akcje { display: flex; flex-wrap: wrap; gap: .7rem; } /* --- Pasek zaufania ------------------------------------------------------ */ .zaufanie { background: var(--grafit-2); color: #fff; } .zaufanie__lista { list-style: none; margin: 0; padding: 1.1rem 0; display: grid; grid-template-columns: repeat(2, 1fr); gap: 1rem .75rem; } .zaufanie__el { text-align: center; } .zaufanie__liczba { display: block; font-family: 'Bricolage Grotesque', sans-serif; font-size: clamp(1.25rem, 1.05rem + .85vw, 1.75rem); font-weight: 800; color: var(--pomarancz-jasny); line-height: 1.1; } .zaufanie__opis { font-size: .8rem; color: rgba(255,255,255,.78); } @media (min-width: 700px) { .zaufanie__lista { grid-template-columns: repeat(4, 1fr); } } /* --- Siatki -------------------------------------------------------------- */ .siatka { display: grid; gap: 1rem; grid-template-columns: 1fr; } @media (min-width: 620px) { .siatka--2 { grid-template-columns: repeat(2, 1fr); } } @media (min-width: 900px) { .siatka--4 { grid-template-columns: repeat(4, 1fr); } } .karta { background: #fff; border: 1px solid var(--szary-jasny); border-radius: var(--r); padding: 1.4rem; transition: border-color var(--przejscie), box-shadow var(--przejscie); } .karta:hover { border-color: var(--pomarancz); box-shadow: var(--cien); } .karta h3 { margin-bottom: .45rem; } /* Karty stoją w 4 wąskich kolumnach (~250 px). Justowanie robi w takiej szerokości rażące dziury między słowami, więc tu wyrównujemy do lewej. */ .karta p { margin-bottom: 0; color: var(--szary); font-size: .95rem; text-align: left; hyphens: auto; } .karta__ikona { width: 46px; height: 46px; border-radius: 11px; margin-bottom: .85rem; background: var(--pomarancz-tlo); color: var(--pomarancz); display: grid; place-items: center; } .karta__ikona svg { width: 24px; height: 24px; } /* --- Marki --------------------------------------------------------------- */ .marki { list-style: none; margin: 0; padding: 0; display: grid; gap: .75rem; grid-template-columns: repeat(2, 1fr); } @media (min-width: 620px) { .marki { grid-template-columns: repeat(3, 1fr); } } @media (min-width: 900px) { .marki { grid-template-columns: repeat(5, 1fr); } } .marka { background: #fff; border: 1px solid var(--szary-jasny); border-radius: var(--r); padding: 1.15rem .75rem; text-align: center; } .marka__nazwa { font-family: 'Bricolage Grotesque', sans-serif; font-weight: 800; font-size: 1.05rem; letter-spacing: -.01em; display: block; overflow-wrap: anywhere; hyphens: auto; } .marka__rola { font-size: .74rem; color: var(--szary); text-transform: uppercase; letter-spacing: .05em; } /* --- Blok z obrazem ------------------------------------------------------ */ .duet { display: grid; gap: 1.5rem; align-items: center; } @media (min-width: 860px) { .duet { grid-template-columns: 1fr 1fr; gap: 2.5rem; } } .duet__obraz { border-radius: var(--r); overflow: hidden; box-shadow: var(--cien); } .duet__obraz img { width: 100%; aspect-ratio: 4/3; object-fit: cover; } .lista-ptaszki { list-style: none; padding: 0; margin: 0 0 1.25rem; } .lista-ptaszki li { position: relative; padding-left: 1.75rem; margin-bottom: .6rem; color: var(--grafit-2); } .lista-ptaszki li::before { content: ''; position: absolute; left: 0; top: .45em; width: 1.05rem; height: 1.05rem; border-radius: 50%; background: var(--pomarancz-tlo) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='%23e2560c' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3.5 8.5l3 3 6-6'/%3E%3C/svg%3E") center/.8rem no-repeat; } /* --- Opinie -------------------------------------------------------------- */ .opinie { display: grid; gap: 1rem; grid-template-columns: 1fr; } @media (min-width: 720px) { .opinie { grid-template-columns: repeat(2, 1fr); } } @media (min-width: 1000px) { .opinie { grid-template-columns: repeat(3, 1fr); } } .opinia { background: #fff; border: 1px solid var(--szary-jasny); border-radius: var(--r); padding: 1.35rem; display: flex; flex-direction: column; } .opinia__gwiazdki { color: #ffb800; font-size: .95rem; letter-spacing: .04em; margin-bottom: .6rem; } .opinia__tresc { font-size: .95rem; color: var(--grafit-2); flex-grow: 1; margin-bottom: .9rem; } .opinia__autor { font-size: .85rem; font-weight: 700; } .opinia__data { font-size: .78rem; color: var(--szary); font-weight: 400; } /* --- Obszar obsługi ------------------------------------------------------ */ .miasta { list-style: none; padding: 0; margin: 0; display: flex; flex-wrap: wrap; gap: .5rem; } .miasta li { background: #fff; border: 1px solid var(--szary-jasny); border-radius: 100px; padding: .45rem .95rem; font-size: .9rem; font-weight: 600; } /* --- FAQ ----------------------------------------------------------------- */ .faq { max-width: 48rem; } .faq__el { border-bottom: 1px solid var(--szary-jasny); } .faq__el summary { cursor: pointer; list-style: none; padding: 1.05rem 2.5rem 1.05rem 0; position: relative; font-weight: 700; font-size: 1.02rem; font-family: 'Bricolage Grotesque', sans-serif; letter-spacing: -.01em; min-height: 44px; display: flex; align-items: center; } .faq__el summary::-webkit-details-marker { display: none; } .faq__el summary::after { content: ''; position: absolute; right: .35rem; top: 50%; width: 12px; height: 12px; margin-top: -6px; border-right: 2.5px solid var(--pomarancz); border-bottom: 2.5px solid var(--pomarancz); transform: rotate(45deg); transition: transform var(--przejscie); } .faq__el[open] summary::after { transform: rotate(-135deg); } .faq__el summary:hover { color: var(--pomarancz); } .faq__odp { padding: 0 0 1.15rem; color: var(--szary); font-size: .97rem; } .faq__odp p:last-child { margin-bottom: 0; } /* --- Kontakt ------------------------------------------------------------- */ .kontakt-siatka { display: grid; gap: 1.5rem; } @media (min-width: 860px) { .kontakt-siatka { grid-template-columns: 1fr 1fr; gap: 2.25rem; } } .dane { list-style: none; padding: 0; margin: 0 0 1.5rem; } .dane li { display: flex; gap: .85rem; margin-bottom: 1.05rem; align-items: flex-start; } .dane__ikona { flex-shrink: 0; width: 40px; height: 40px; border-radius: 10px; background: var(--pomarancz-tlo); color: var(--pomarancz); display: grid; place-items: center; } .dane__ikona svg { width: 20px; height: 20px; } .dane__etykieta { font-size: .78rem; text-transform: uppercase; letter-spacing: .06em; color: var(--szary); font-weight: 700; } .dane__wartosc { font-weight: 700; font-size: 1.05rem; } .dane__wartosc a { color: var(--grafit); text-decoration: none; } .dane__wartosc a:hover { color: var(--pomarancz); text-decoration: underline; } .dane__dopisek { font-size: .88rem; color: var(--szary); font-weight: 400; } .godziny { width: 100%; border-collapse: collapse; font-size: .95rem; } .godziny th, .godziny td { padding: .5rem 0; text-align: left; border-bottom: 1px solid var(--szary-jasny); } .godziny th { font-weight: 600; color: var(--grafit-2); hyphens: auto; overflow-wrap: break-word; } .godziny td { text-align: right; font-variant-numeric: tabular-nums; font-weight: 600; } .godziny tr:last-child th, .godziny tr:last-child td { border-bottom: 0; } .godziny .zamkniete { color: var(--szary); font-weight: 400; } .mapa { border: 0; width: 100%; aspect-ratio: 4/3; min-height: 300px; border-radius: var(--r); background: var(--tlo-2); } /* --- Stopka -------------------------------------------------------------- */ .stopka { background: var(--grafit); color: rgba(255,255,255,.72); padding-block: 2.5rem 6rem; font-size: .9rem; } .stopka__siatka { display: grid; gap: 1.75rem; } @media (min-width: 760px) { .stopka__siatka { grid-template-columns: 1.4fr 1fr 1fr; } } .stopka h2, .stopka h3 { color: #fff; font-size: .82rem; text-transform: uppercase; letter-spacing: .09em; margin-bottom: .85rem; } .stopka a { color: rgba(255,255,255,.82); text-decoration: none; } .stopka a:hover { color: #fff; text-decoration: underline; } .stopka ul { list-style: none; padding: 0; margin: 0; } .stopka li { margin-bottom: .5rem; } .stopka__logo { color: #fff; } .stopka__dol { margin-top: 2rem; padding-top: 1.25rem; border-top: 1px solid rgba(255,255,255,.14); display: flex; flex-wrap: wrap; gap: .6rem 1.25rem; justify-content: space-between; font-size: .82rem; } @media (min-width: 760px) { .stopka { padding-bottom: 2.5rem; } } /* Podpis wykonawcy strony */ /* Selektor z `.stopka`, bo sama klasa `.realizacja` (0,1,0) przegrywała specyficznością z globalną regułą `.stopka p { text-align: justify }` (0,1,1) i linia była justowana zamiast wyśrodkowana. */ .stopka .realizacja { text-align: center; margin: 1rem 0 0; padding-top: 1rem; border-top: 1px solid rgba(255,255,255,.1); font-size: .82rem; color: rgba(255,255,255,.55); hyphens: manual; } .realizacja a { color: rgba(255,255,255,.8); font-weight: 600; } .realizacja a:hover { color: #fff; } /* --- Sticky CTA (tylko mobile) ------------------------------------------- */ .cta-mobile { position: fixed; left: 0; right: 0; bottom: 0; z-index: 120; display: flex; gap: .5rem; padding: .6rem max(.75rem, env(safe-area-inset-left)) calc(.6rem + env(safe-area-inset-bottom)); background: rgba(255,255,255,.96); backdrop-filter: blur(10px); border-top: 1px solid var(--szary-jasny); } .cta-mobile .btn { flex: 1; font-size: .95rem; padding-inline: .5rem; } @media (min-width: 760px) { .cta-mobile { display: none; } } /* --- Animacje ------------------------------------------------------------ */ .js .reveal { opacity: 0; transform: translateY(18px); transition: opacity .55s ease, transform .55s ease; /* Gdyby main.js się nie wczytał (błąd sieci, blokada CSP), treść i tak pojawi się po 3 s zamiast zostać trwale niewidoczna. */ animation: reveal-fallback 0s 3s forwards; } @keyframes reveal-fallback { to { opacity: 1; transform: none; } } .js .reveal.widoczny { opacity: 1; transform: none; } @media (prefers-reduced-motion: reduce) { .js .reveal { opacity: 1; transform: none; transition: none; } * { animation-duration: .01ms !important; transition-duration: .01ms !important; } } /* --- Dokumenty prawne ---------------------------------------------------- */ .dokument { max-width: 46rem; } .dokument h2 { margin-top: 2.25rem; font-size: clamp(1.2rem, 1.05rem + .7vw, 1.55rem); } .dokument h3 { margin-top: 1.5rem; } .dokument ul { padding-left: 1.3rem; } .dokument li { margin-bottom: .45rem; } .powrot { display: inline-flex; align-items: center; gap: .4rem; min-height: 44px; font-weight: 700; text-decoration: none; } /* --- Ekrany poniżej 360 px (Galaxy Fold złożony, starsze telefony) -------- */ @media (max-width: 360px) { .logo { font-size: 1.05rem; gap: .4rem; } .logo__znak { width: 26px; height: 26px; } .naglowek__tel { padding: .4rem .7rem; } .marki { grid-template-columns: 1fr; } .hero__akcje .btn { width: 100%; } .godziny th, .godziny td { font-size: .9rem; } }