/* HYDRO-Consulting. Uklad "Konsulting" (split hero, karty, siatki), paleta z logo klienta, ALE bez zaokraglen - klient wprost: "Wole strony proste. Na pewno nie z jakimis okraglymi elementami." (00_INPUT/materialy/Infgormacje, preferencje.txt). Cofniete 2026-09-25 po probnej rundzie zaokraglonej wersji. Wyjatek: logo firmy jest okraglym znakiem (badge z kropla wody) i to zostaje - zakaz dotyczy interfejsu strony, nie logotypu. */ :root { /* Paleta marki. Zrodlo: logo klienta. */ --hc-lodowy: #a6dff2; --hc-woda: #3eb5e1; --hc-niebieski: #1a79db; --hc-granat: #0e4e90; --hc-granat-dk: #082c52; --hc-biel: #ffffff; --hc-tlo-jasne: #f4fbfe; --hc-grafit: #12181f; --hc-grafit-md: #4f6472; --hc-grafit-lt: #8ca5b2; --hc-linia: #d9edf8; --hc-font-h: "Montserrat", system-ui, sans-serif; --hc-font-b: "Montserrat", system-ui, sans-serif; --hc-font-m: "JetBrains Mono", ui-monospace, monospace; --hc-radius: 0; --hc-radius-sm: 0; --hc-radius-lg: 0; --hc-radius-full: 0; --hc-cien: 0 8px 24px rgba(14, 78, 144, .08); --hc-cien-lg: 0 20px 48px rgba(14, 78, 144, .14); --hc-wrap: 1240px; --hc-sec-y: clamp(3.5rem, 7vw, 7rem); --hc-gap: clamp(1.5rem, 3vw, 3rem); --hc-header-h: 76px; /* Biezaca wysokosc paska: zmienia sie razem z nim, zeby elementy przyklejone pod naglowkiem (naglowki podstron, listy) nie zostawialy nad soba szpary. */ --hc-pasek-h: 76px; } html.hc-przewiniete { --hc-pasek-h: 58px; } *, *::before, *::after { box-sizing: border-box; } html { -webkit-text-size-adjust: 100%; } body { margin: 0; font-family: var(--hc-font-b); font-size: 1rem; line-height: 1.65; color: var(--hc-grafit); background: var(--hc-biel); } body.hc-blokada { overflow: hidden; } img, svg { max-width: 100%; height: auto; display: block; } a { color: var(--hc-niebieski); text-decoration-thickness: 1px; text-underline-offset: 3px; } a:hover { color: var(--hc-granat); } h1, h2, h3, h4 { font-family: var(--hc-font-h); font-weight: 700; line-height: 1.12; margin: 0 0 .6em; color: var(--hc-granat); } p { margin: 0 0 1em; } ul, ol { margin: 0; padding: 0; list-style: none; } .hc-skip { position: absolute; left: -9999px; top: 0; z-index: 999; background: var(--hc-granat); color: #fff; padding: .75rem 1.25rem; } .hc-skip:focus { left: 0; } .hc-wrap { width: min(100% - 2.5rem, var(--hc-wrap)); margin-inline: auto; } /* Typografia wspolna */ .hc-h2 { font-size: clamp(1.75rem, 3.4vw, 2.85rem); } .hc-h2--jasny { color: var(--hc-biel); } .hc-h3 { font-size: clamp(1.1rem, 1.6vw, 1.3rem); margin-top: 2rem; } .hc-lead { font-size: clamp(1rem, 1.35vw, 1.15rem); color: var(--hc-grafit-md); max-width: 62ch; } .hc-lead--jasny { color: var(--hc-lodowy); } .hc-proza p { max-width: 65ch; color: var(--hc-grafit-md); } .hc-eyebrow { font-family: var(--hc-font-m); font-size: .74rem; letter-spacing: .14em; text-transform: uppercase; color: var(--hc-grafit-lt); display: flex; align-items: center; gap: .85rem; margin: 0 0 1rem; } .hc-eyebrow--jasny { color: var(--hc-lodowy); } .hc-eyebrow__nr { color: var(--hc-woda); font-weight: 700; } .hc-tag { background: var(--hc-niebieski); color: #fff; padding: .2rem .6rem; font-weight: 700; letter-spacing: .08em; } .hc-link { font-weight: 500; } .hc-pusto { color: var(--hc-grafit-lt); font-style: italic; } /* Przyciski */ .hc-btn { display: inline-flex; align-items: center; justify-content: center; gap: .5rem; padding: .9rem 1.7rem; border: 1px solid transparent; border-radius: var(--hc-radius-sm); font-family: var(--hc-font-b); font-weight: 700; font-size: .95rem; text-decoration: none; cursor: pointer; transition: background .18s, color .18s, border-color .18s, transform .18s, box-shadow .18s; } /* Gradient w kolorach marki, od jasniejszego niebieskiego do granatu. Tlo jest dwa razy szersze od przycisku, wiec najechanie przesuwa je zamiast przelaczac kolor - przejscie wychodzi plynne, bez skoku. */ .hc-btn--primary { color: #fff; box-shadow: var(--hc-cien); background-image: linear-gradient(120deg, #3a92ea 0%, var(--hc-niebieski) 26%, var(--hc-granat) 50%, #0b4076 74%, #082e57 100%); background-size: 200% 100%; background-position: 0% 0; transition: background-position .35s ease, transform .18s, box-shadow .18s; } .hc-btn--primary:hover { background-position: 100% 0; color: #fff; transform: translateY(-1px); box-shadow: var(--hc-cien-lg); } .hc-btn--ghost { background: var(--hc-biel); color: var(--hc-granat); border-color: var(--hc-linia); box-shadow: var(--hc-cien); } .hc-btn--ghost:hover { border-color: var(--hc-niebieski); color: var(--hc-niebieski); transform: translateY(-1px); } .hc-btn--accent { color: #fff; box-shadow: var(--hc-cien); background-image: linear-gradient(120deg, #6ad0f0 0%, var(--hc-woda) 26%, #2a9fd4 50%, var(--hc-niebieski) 74%, var(--hc-granat) 100%); background-size: 200% 100%; background-position: 0% 0; transition: background-position .35s ease, transform .18s, box-shadow .18s; } .hc-btn--accent:hover { background-position: 100% 0; transform: translateY(-1px); } .hc-btn--block { display: flex; width: 100%; } /* Pasek poziomu wody - wskaznik postepu przewijania strony. */ .hc-pasek-poziomu { position: fixed; top: 0; left: 0; right: 0; height: 3px; background: var(--hc-linia); z-index: 200; } .hc-pasek-poziomu__wypelnienie { position: relative; height: 100%; width: 0%; background: linear-gradient(90deg, var(--hc-granat), var(--hc-niebieski), var(--hc-woda)); } .hc-pasek-poziomu__znacznik { position: absolute; right: -4px; top: 50%; width: 7px; height: 7px; background: var(--hc-woda); transform: translateY(-50%) rotate(45deg); box-shadow: 0 0 8px 2px rgba(62, 181, 225, .55); } /* Naglowek */ .hc-header { position: sticky; top: 0; z-index: 100; background: rgba(255, 255, 255, .92); backdrop-filter: blur(10px); border-bottom: 1px solid transparent; } .hc-header--przyklejony { box-shadow: 0 4px 24px rgba(14, 78, 144, .08); border-bottom-color: var(--hc-linia); } .hc-header__cta .hc-btn { border-radius: var(--hc-radius-full); } .hc-header__inner { width: min(100% - 2.5rem, var(--hc-wrap)); margin-inline: auto; min-height: var(--hc-header-h); transition: min-height .3s cubic-bezier(.4, 0, .2, 1); display: flex; align-items: center; gap: 1.5rem; } /* Uklad 3-kolumnowy: menu / logo na srodku / przycisk telefonu. */ .hc-header__inner--3col { display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 1rem; } .hc-header__inner--3col .hc-nav { justify-self: start; grid-column: 1; } .hc-header__inner--3col .hc-logo--srodek { grid-column: 2; } .hc-header__inner--3col .hc-header__cta { justify-self: end; grid-column: 3; } .hc-header__inner--3col .hc-burger { grid-column: 3; justify-self: end; } /* Znak firmy wystajacy pod dolna krawedz naglowka. Przy przewijaniu pasek robi sie nizszy, a znak mniejszy - obie zmiany maja ten sam czas i krzywa, zeby ruszaly sie razem. Znak zostaje wysuniety takze w stanie przewinietym, tylko plycej. Okragla forma to swiadomy wyjatek od zakazu zaokraglen: klient zastrzegl interfejs, a to jest jego logotyp. --hc-logo-r trzyma promien w jednym miejscu, bo licza sie od niego srednica kola i ujemny margines dolny, ktory pozwala znakowi wystawac bez rozpychania paska. --hc-header-h nadpisujemy na samym naglowku, wiec zmiana wysokosci nie rusza elementow spoza niego (przyklejone naglowki podstron). */ .hc-logo { --hc-logo-r: 69px; display: flex; align-items: flex-start; text-decoration: none; position: relative; z-index: 3; align-self: start; margin-top: 4px; margin-bottom: calc(-1 * (var(--hc-logo-r) * 2 - var(--hc-header-h) + 4px)); transition: margin-bottom .3s cubic-bezier(.4, 0, .2, 1); } .hc-logo--srodek { justify-self: center; } .hc-logo__img { width: calc(var(--hc-logo-r) * 2); height: calc(var(--hc-logo-r) * 2); padding: 0; border: 5px solid var(--hc-biel); border-radius: 50%; object-fit: contain; background: var(--hc-biel); box-shadow: none; transition: width .3s cubic-bezier(.4, 0, .2, 1), height .3s cubic-bezier(.4, 0, .2, 1), border-width .3s cubic-bezier(.4, 0, .2, 1); } .hc-header--przyklejony { --hc-header-h: 58px; } .hc-header--przyklejony .hc-logo { --hc-logo-r: 41px; } .hc-header--przyklejony .hc-logo__img { border-width: 3px; } @media (max-width: 900px) { .hc-logo { --hc-logo-r: 46px; } .hc-header--przyklejony .hc-logo { --hc-logo-r: 32px; } } @media (prefers-reduced-motion: reduce) { .hc-logo, .hc-logo__img, .hc-header__inner { transition: none; } } .hc-nav__list { display: flex; gap: 1.6rem; } .hc-nav__list a { color: var(--hc-grafit); text-decoration: none; font-size: .93rem; font-weight: 500; } .hc-nav__list a:hover { color: var(--hc-niebieski); } .hc-header__cta { display: flex; align-items: center; gap: 1rem; } .hc-btn--tel { display: inline-flex; align-items: center; gap: .55rem; } .hc-btn--tel svg { width: 17px; height: 17px; flex-shrink: 0; } .hc-burger { display: none; background: none; border: 0; padding: .5rem; cursor: pointer; } .hc-burger span { display: block; width: 24px; height: 2px; background: var(--hc-granat); margin: 5px 0; } /* Menu mobilne: panel wysuwany od prawej krawedzi, nad trescia strony. */ .hc-mobile { position: fixed; top: 0; right: 0; z-index: 120; width: min(84vw, 360px); height: 100dvh; padding: 5rem 1.5rem 2rem; display: none; flex-direction: column; overflow-y: auto; background: var(--hc-biel); box-shadow: -20px 0 60px rgba(8, 40, 74, .22); transform: translateX(100%); transition: transform .32s cubic-bezier(.4, 0, .2, 1); } /* Zamkniety panel jest wyjety z ukladu, bo stojac poza prawa krawedzia rozpychalby dokument i strona dawala sie przesuwac w bok. Klase widoczny dodaje main.js tuz przed animacja wejscia. */ .hc-mobile--widoczny { display: flex; } .hc-mobile--otwarte { transform: translateX(0); } .hc-mobile__zamknij { position: absolute; top: 1rem; right: 1rem; width: 48px; height: 48px; display: grid; place-items: center; padding: 0; border: 0; cursor: pointer; background: none; font-size: 1.9rem; line-height: 1; color: var(--hc-granat); } /* Przezroczyste tlo nadal lapaloby klikniecia, wiec dopoki menu jest zamkniete, przepuszcza je dalej. */ .hc-mobile__tlo { position: fixed; inset: 0; z-index: 110; display: none; background: rgba(8, 40, 74, .5); opacity: 0; pointer-events: none; transition: opacity .32s; } .hc-mobile__tlo--widoczne { opacity: 1; pointer-events: auto; } .hc-mobile__list { display: flex; flex-direction: column; gap: .25rem; margin-bottom: 1.25rem; } .hc-mobile__list a { display: block; padding: .95rem 0; font-size: 1.05rem; font-weight: 600; color: var(--hc-granat); text-decoration: none; border-bottom: 1px solid var(--hc-linia); } .hc-mobile__tel { display: block; text-align: center; margin-top: .9rem; font-family: var(--hc-font-m); font-size: 1.05rem; color: var(--hc-granat); text-decoration: none; } /* Numer w naglowku na telefonie: sam tekst, bez tla i bez ramki. */ .hc-header__tel-mobile { display: none; grid-column: 1; justify-self: start; font-family: var(--hc-font-m); font-weight: 700; font-size: .92rem; color: var(--hc-granat); text-decoration: none; white-space: nowrap; } /* Sekcje */ .hc-sec { position: relative; padding-block: var(--hc-sec-y); background-color: var(--hc-biel); } .hc-sec__head { max-width: 72ch; margin-bottom: 2.5rem; } .hc-sec__stopka { margin-top: 1.75rem; } .hc-realizacje__stopka { margin-top: 2.25rem; display: flex; justify-content: center; } /* Hero - granat pelny, zdjecie Konrada po prawej przechodzace w tlo, karta cytatu. Redesign 2026-09-29 na bazie mockupu z Claude Design (por. konkurencja DJ Miljo, 01_RESEARCH/konkurencja-design-europa.md). Zero bieli w hero - user wprost: "za duzo bialego", chcial przejscie zdjecia w granat, nie w biel. */ /* Zdjecie jako JEDNA pelna warstwa tla calej sekcji (nie osobny element obok panelu tekstu) - dwa sasiadujace flex-boxy dawaly widoczna pionowa kreske na styku (subpixelowe zaokraglanie szerokosci flex). Gradient tez jest jedna, ciagla warstwa na calej szerokosci sekcji, wiec nie ma juz styku dwoch elementow do "zszywania". */ .hc-hero--granat { background: var(--hc-granat); color: var(--hc-biel); position: relative; overflow: hidden; isolation: isolate; min-height: clamp(560px, 48vw, 760px); display: flex; align-items: center; /* Dolny odstep robi miejsce na karte liczb, ktora wchodzi na hero mniej wiecej do polowy swojej wysokosci. Bez niego przyciski chowalyby sie pod nia. */ padding-bottom: clamp(7.5rem, 11vw, 11rem); } /* Zdjecie idzie na PELNA szerokosc sekcji - nie ma wiec zadnej lewej krawedzi, ktora moglaby wyjrzec spod gradientu jako pionowa kreska (tak powstawal wczesniejszy szew). Kadr jest przyciety tak, zeby Konrad wypadal ok. 52-73% szerokosci zdjecia, czyli po prawej stronie kolumny z tekstem. */ .hc-hero__foto { position: absolute; inset: 0; z-index: 0; } .hc-hero__foto img { width: 100%; height: 100%; object-fit: cover; object-position: 54% 14%; display: block; filter: contrast(1.04) saturate(1.03); } /* Szeroka, powolna kaskada: pelny granat pod tekstem, potem ok. 300 px plynnego zaniku do czystego zdjecia. Zero twardych stopow. */ .hc-hero__fade { position: absolute; inset: 0; z-index: 1; pointer-events: none; background: linear-gradient(90deg, var(--hc-granat) 0%, var(--hc-granat) 36%, rgba(14,78,144,.92) 44%, rgba(14,78,144,.6) 52%, rgba(14,78,144,.25) 58%, rgba(14,78,144,0) 66%); } .hc-hero__bg-pattern { position: absolute; inset: 0; z-index: 1; pointer-events: none; background-image: repeating-linear-gradient(135deg, rgba(166,223,242,.07) 0 1px, transparent 1px 22px); -webkit-mask-image: linear-gradient(90deg, #000 0%, transparent 55%); mask-image: linear-gradient(90deg, #000 0%, transparent 55%); } .hc-hero__bg-ring { position: absolute; z-index: 1; pointer-events: none; border: 1px solid rgba(62,181,225,.16); border-radius: 50%; } .hc-hero__bg-ring--1 { left: -140px; top: -160px; width: 520px; height: 520px; } .hc-hero__bg-ring--2 { left: -60px; top: -80px; width: 420px; height: 420px; border-color: rgba(166,223,242,.1); } /* Kolumna tekstu trzyma sie tej samej siatki co reszta strony (hc-wrap), dzieki czemu ma stala, szeroka miare niezaleznie od szerokosci ekranu - wczesniejszy uklad na paddingach zwezal ja na duzych ekranach i lamal naglowek co dwa slowa. */ .hc-hero__grid { position: relative; z-index: 2; width: min(100% - 2.5rem, var(--hc-wrap)); margin-inline: auto; } .hc-hero__txt { max-width: 41rem; padding-block: clamp(2.5rem, 5vw, 3.75rem); } .hc-hero__tresc { position: relative; display: flex; flex-direction: column; gap: 1.25rem; } .hc-eyebrow__linia { width: 28px; height: 3px; background: var(--hc-woda); display: inline-block; } .hc-hero__h1 { margin: 0; line-height: 1.1; letter-spacing: -.015em; text-wrap: balance; font-size: clamp(2rem, 3.1vw, 2.95rem); color: var(--hc-biel); } .hc-hero__lead--jasny { color: #d3e6f2; max-width: 34rem; font-size: clamp(1rem, 1.2vw, 1.1rem); } .hc-hero__akcje { display: flex; flex-wrap: wrap; gap: .85rem; } .hc-hero__cta-glowne { background: var(--hc-woda); color: var(--hc-granat); font-weight: 700; padding: 1.05rem 1.5rem; box-shadow: none; } .hc-hero__cta-glowne:hover { background: var(--hc-lodowy); color: var(--hc-granat); transform: translateY(-1px); } .hc-hero__cta-obrys { background: transparent; color: var(--hc-biel); border: 2px solid var(--hc-biel); font-weight: 600; padding: .95rem 1.4rem; box-shadow: none; } .hc-hero__cta-obrys:hover { background: var(--hc-biel); color: var(--hc-granat); } .hc-chip { font-family: var(--hc-font-m); font-weight: 700; font-size: .78rem; color: var(--hc-granat); background: var(--hc-lodowy); padding: .15rem .55rem; } .hc-chip--granat { background: var(--hc-granat); color: var(--hc-biel); } .hc-chip--niebieski { background: var(--hc-niebieski); color: var(--hc-biel); } .hc-chip--woda { background: var(--hc-woda); color: var(--hc-granat); } .hc-chip--lodowy { background: var(--hc-lodowy); color: var(--hc-granat); } .hc-liczby__wiz--kat .hc-chip { width: 42px; height: 42px; display: flex; align-items: center; justify-content: center; font-size: .84rem; padding: 0; } @media (max-width: 860px) { /* Telefon trzyma ten sam uklad co desktop: tekst po lewej, zdjecie jako pas po prawej. Zdjecie jest wezsze i mocniej wycieniowane w lewo, zeby naglowek czytal sie na granacie, a nie na niebie. */ .hc-hero--granat { min-height: 0; display: block; position: relative; } /* Zdjecie samo zanika w lewo maska, inaczej na jego krawedzi widac ostra pionowa linie: po lewej czysty granat, po prawej pelny obraz. */ .hc-hero__foto { position: absolute; inset: 0 0 0 auto; width: 62%; height: 100%; -webkit-mask-image: linear-gradient(90deg, rgba(0,0,0,0) 0%, rgba(0,0,0,.25) 22%, rgba(0,0,0,.75) 48%, #000 72%); mask-image: linear-gradient(90deg, rgba(0,0,0,0) 0%, rgba(0,0,0,.25) 22%, rgba(0,0,0,.75) 48%, #000 72%); } .hc-hero__foto img { object-position: 70% 14%; } .hc-hero__fade { position: absolute; inset: 0; width: auto; height: 100%; margin: 0; background: linear-gradient(90deg, var(--hc-granat) 0%, rgba(14,78,144,.92) 42%, rgba(14,78,144,.62) 68%, rgba(14,78,144,.12) 100%); } .hc-hero__grid { width: 100%; margin: 0; padding-inline: 0; } .hc-hero__txt { max-width: none; width: 66%; padding: 2.75rem 0 3rem clamp(1.25rem, 5vw, 2rem); } .hc-hero__tresc { gap: 1rem; } .hc-hero__h1 { max-width: none; font-size: clamp(1.45rem, 6.4vw, 2rem); line-height: 1.15; } .hc-hero__lead--jasny { font-size: .88rem; line-height: 1.6; } .hc-hero .hc-eyebrow { font-size: .56rem; letter-spacing: .12em; } /* Przyciski schodza jeden pod drugi i trzymaja sie szerokosci kolumny. */ .hc-hero__akcje { flex-direction: column; align-items: stretch; gap: .6rem; } .hc-hero__akcje .hc-btn { justify-content: center; text-align: center; padding: .85rem 1rem; font-size: .88rem; } .hc-hero__bg-pattern, .hc-hero__bg-ring { display: none; } } @media (max-width: 420px) { .hc-hero__foto { width: 58%; } .hc-hero__txt { width: 70%; padding-block: 2.25rem 2.5rem; } } /* Liczby - biala karta zachodzaca na dolna krawedz hero. */ /* Pas wjezdza na hero calym blokiem. Przesuniecie siedzi tutaj, a nie na samej karcie: ujemny margines pierwszego dziecka sklejalby sie z marginesem rodzica i ciagnal w gore jego biale tlo, ktore zaslanialo granat hero. Tlo zdjete - pod karta i tak jest biel strony. */ .hc-liczby-pas { position: relative; z-index: 3; background: transparent; margin-top: -7.6rem; } .hc-liczby__karta { display: grid; grid-template-columns: repeat(4, minmax(0,1fr)); gap: 1px; background: var(--hc-linia); border: 1px solid var(--hc-linia); margin-top: 0; box-shadow: 0 30px 60px -30px rgba(14,78,144,.4); } .hc-liczby__item { background: var(--hc-biel); padding: 1.75rem 1.6rem 1.6rem; display: flex; flex-direction: column; gap: 1rem; min-width: 0; } .hc-liczby__wiz { height: 72px; display: flex; align-items: flex-end; } .hc-liczby__wiz--kropki { display: grid; grid-template-columns: repeat(20, 6px); gap: 2px; align-content: flex-end; } .hc-liczby__wiz--kropki span { width: 6px; height: 6px; background: var(--hc-niebieski); } .hc-liczby__wiz--mapa { display: grid; grid-template-columns: repeat(4, 15px); grid-template-rows: repeat(4, 15px); gap: 2px; } .hc-liczby__wiz--mapa span { background: var(--hc-biel); border: 1px solid var(--hc-linia); } .hc-liczby__wiz--mapa span.jest { background: var(--hc-niebieski); border-color: var(--hc-niebieski); } .hc-liczby__wiz--kat { gap: .3rem; } .hc-liczby__wiz--slupki { gap: 3px; } .hc-liczby__wiz--slupki span { width: 6px; background: var(--hc-lodowy); flex: none; } .hc-liczby__wartosc { font-family: var(--hc-font-m); font-size: clamp(2.1rem, 3.6vw, 2.9rem); font-weight: 700; line-height: 1; color: var(--hc-granat); } .hc-liczby__opis { font-size: .88rem; line-height: 1.4; color: var(--hc-grafit-md); } @media (max-width: 720px) { .hc-liczby__karta { grid-template-columns: repeat(2, minmax(0,1fr)); } .hc-liczby-pas { margin-top: -2.5rem; } } .hc-przekroj { margin: 0; } .hc-przekroj__svg { width: 100%; height: auto; border: 1px solid var(--hc-linia); background: var(--hc-biel); } .hc-przekroj__gl { font-family: var(--hc-font-m); font-size: 12px; fill: var(--hc-granat); font-weight: 700; } .hc-przekroj__nazwa { font-family: var(--hc-font-m); font-size: 11px; fill: var(--hc-grafit-lt); } .hc-przekroj__woda { font-family: var(--hc-font-m); font-size: 11px; fill: var(--hc-niebieski); font-weight: 700; } .hc-przekroj__cap { font-size: .78rem; color: var(--hc-grafit-lt); margin-top: .6rem; font-family: var(--hc-font-m); } /* Naglowek sekcji w dwoch kolumnach: kropka+etykieta+H2 po lewej, lead po prawej. */ .hc-sec__head--split { display: grid; grid-template-columns: 1.1fr 1fr; gap: var(--hc-gap); align-items: end; max-width: none; } .hc-sec__head-prawo { margin: 0; max-width: 48ch; } .hc-eyebrow--kropka { align-items: center; } .hc-eyebrow__kropka { width: 7px; height: 7px; border-radius: var(--hc-radius-full); background: var(--hc-niebieski); display: inline-block; } /* Uslugi - karty odwracane na hover (flip 3D), przod jasny / tyl granatowy z CTA. */ .hc-uslugi__siatka { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.5rem; } .hc-usluga-flip { height: 340px; perspective: 1600px; } .hc-usluga-flip__wnetrze { position: relative; width: 100%; height: 100%; transform-style: preserve-3d; transition: transform .6s cubic-bezier(.2,.7,.2,1); } .hc-usluga-flip:hover .hc-usluga-flip__wnetrze, .hc-usluga-flip:focus-within .hc-usluga-flip__wnetrze { transform: rotateY(180deg); } .hc-usluga-karta { position: absolute; inset: 0; backface-visibility: hidden; -webkit-backface-visibility: hidden; display: flex; flex-direction: column; text-decoration: none; padding: 1.75rem 1.6rem; border: 1px solid var(--hc-linia); overflow: hidden; } .hc-usluga-karta--przod { background: var(--hc-biel); } .hc-usluga-karta--tyl { background: var(--hc-granat); color: var(--hc-biel); border-color: var(--hc-granat); transform: rotateY(180deg); justify-content: flex-end; padding: 0; } /* Rewers: zdjecie usługi, na nim gradient granatu, a na samym dole tresc. */ .hc-usluga-karta__foto { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; display: block; } .hc-usluga-karta__zaslona { position: absolute; inset: 0; pointer-events: none; background: linear-gradient(0deg, var(--hc-granat) 0%, rgba(14,78,144,.96) 30%, rgba(14,78,144,.6) 52%, rgba(14,78,144,.18) 100%); } .hc-usluga-karta__tresc-tyl { position: relative; z-index: 1; display: flex; flex-direction: column; gap: .55rem; margin-top: auto; padding: 1.75rem 1.6rem; } .hc-usluga-karta__glowka { display: flex; align-items: flex-start; justify-content: space-between; gap: 1rem; } .hc-usluga-karta__ikona { flex-shrink: 0; width: 52px; height: 52px; display: flex; align-items: center; justify-content: center; background: var(--hc-granat); color: var(--hc-lodowy); } .hc-usluga-karta__ikona svg { width: 24px; height: 24px; } .hc-usluga-karta__nr { font-family: var(--hc-font-m); font-weight: 700; font-size: 2.4rem; line-height: 1; color: var(--hc-lodowy); } .hc-usluga-karta__tytul { font-size: 1.25rem; line-height: 1.18; margin: auto 0 0; color: var(--hc-granat); } /* Przod: opis zawsze maksymalnie 3 wiersze, zeby karty nie rozjezdzaly sie wysokoscia i zeby dol karty byl rowny. */ .hc-usluga-karta__opis { margin: .85rem 0 0; color: var(--hc-grafit-md); font-size: .92rem; line-height: 1.5; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 3; line-clamp: 3; overflow: hidden; } /* Rewers - elementy sa spanami w kolumnie flex, wiec wymagaja display:block. */ .hc-usluga-karta__nr--tyl { display: block; font-family: var(--hc-font-m); font-weight: 700; font-size: .78rem; letter-spacing: .12em; color: var(--hc-woda); margin: 0; } .hc-usluga-karta__tytul--tyl { display: block; font-family: var(--hc-font-h); font-weight: 700; font-size: 1.15rem; line-height: 1.2; color: var(--hc-biel); margin: 0; } .hc-usluga-karta__opis--tyl { display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 3; line-clamp: 3; overflow: hidden; color: var(--hc-lodowy); font-size: .88rem; line-height: 1.5; margin: 0; } .hc-usluga-karta__najedz { margin: 1.5rem -1.6rem -1.75rem; padding: 1.05rem 1.6rem; border-top: 1px solid var(--hc-linia); display: flex; justify-content: space-between; align-items: center; font-size: .82rem; font-weight: 700; color: var(--hc-niebieski); } .hc-usluga-karta__link { margin-top: 1.25rem; align-self: flex-start; color: var(--hc-woda); font-weight: 700; font-size: .9rem; } @media (hover: none) { /* Bez hovera (dotyk) karta zostaje na przodzie - tresc tylu i tak jest na podstronie uslugi. */ .hc-usluga-flip:hover .hc-usluga-flip__wnetrze { transform: none; } .hc-usluga-karta--przod { position: relative; } } @media (max-width: 1024px) { .hc-sec__head--split { grid-template-columns: 1fr; align-items: start; } } /* Termin ustawowy */ .hc-termin { background: var(--hc-granat-dk); color: var(--hc-biel); } .hc-termin__inner { display: grid; grid-template-columns: 1.1fr .9fr; gap: clamp(2rem, 5vw, 4.5rem); align-items: center; } /* Zdjecie ujecia po prawej, z cienka ramka przesunieta w prawo-dol. */ .hc-termin__foto { position: relative; padding: 0 2.5rem 2.5rem 0; } .hc-termin__ramka { position: absolute; right: 0; bottom: 0; width: 62%; height: 62%; border: 1px solid var(--hc-woda); opacity: .5; pointer-events: none; } .hc-termin__foto img { position: relative; width: 100%; height: auto; display: block; } .hc-termin__txt { display: flex; flex-direction: column; gap: 1.25rem; } .hc-termin__tresc { color: #d3e6f2; max-width: 56ch; margin: 0; font-size: clamp(1rem, 1.2vw, 1.08rem); line-height: 1.65; } .hc-termin__akcje { display: flex; flex-wrap: wrap; gap: .85rem; margin-top: .5rem; } @media (max-width: 860px) { .hc-termin__foto { padding: 0; } .hc-termin__ramka { display: none; } } /* O mnie */ .hc-omnie { background: var(--hc-biel); } .hc-omnie__inner { display: grid; grid-template-columns: .85fr 1.15fr; gap: clamp(2rem, 5vw, 4.5rem); align-items: center; } /* Portret z lodowym blokiem przesunietym w prawo-dol, jak w makiecie. */ .hc-omnie__foto { position: relative; padding: 0 2.25rem 2.25rem 0; } .hc-omnie__blok { position: absolute; right: 0; bottom: 0; width: 74%; height: 66%; background: var(--hc-lodowy); } /* Staly kadr 4:5 niezaleznie od proporcji wgranego pliku. Zdjecia z telefonu bywaja bardzo wysokie (np. 1330x2364) i bez tego u gory widac pol pokoju. Punkt kadrowania trzyma sylwetke, ucinajac gore. */ .hc-omnie__foto img { position: relative; width: 100%; aspect-ratio: 4 / 5; object-fit: cover; object-position: 50% 78%; display: block; } .hc-omnie__txt { display: flex; flex-direction: column; } .hc-omnie__txt .hc-proza p { color: var(--hc-grafit); font-size: clamp(1rem, 1.2vw, 1.08rem); line-height: 1.7; } /* Uprawnienia jako wiersze: duza cyfra rzymska plus opis, cienkie linie. */ .hc-uprawnienia { margin: 1.25rem 0 0; border-top: 2px solid var(--hc-granat); } .hc-uprawnienie { display: grid; grid-template-columns: 4.5rem minmax(0, 1fr); gap: 1.25rem; align-items: baseline; padding: 1.15rem 0; border-bottom: 1px solid var(--hc-linia); } .hc-uprawnienie__kat { font-family: var(--hc-font-h); font-weight: 700; font-size: 1.35rem; line-height: 1; color: var(--hc-niebieski); } .hc-uprawnienie__opis { font-size: .95rem; line-height: 1.5; color: var(--hc-grafit); } .hc-omnie__nota { margin: 1.25rem 0 0; font-size: .88rem; color: var(--hc-grafit-lt); } .hc-omnie__nota .hc-link { margin-left: .35rem; } @media (max-width: 860px) { .hc-omnie__foto { padding: 0; } .hc-omnie__blok { display: none; } } /* Proces - kolorowy pasek na gorze karty, duzy numer, bez strzalek miedzy kartami. */ .hc-proces { background: var(--hc-tlo-jasne); } /* Liczba kolumn idzie za liczba krokow: piec na stronie glownej, cztery na kontakcie. Sztywne repeat(5) zostawialo tam pusty kafel. */ .hc-kroki { display: grid; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); gap: 1px; background: var(--hc-linia); border: 1px solid var(--hc-linia); } .hc-krok { position: relative; background: var(--hc-biel); display: flex; flex-direction: column; } .hc-krok__pasek { display: block; height: 6px; background: var(--hc-krok-kolor, var(--hc-niebieski)); } .hc-krok__nr { font-family: var(--hc-font-m); font-weight: 700; font-size: 2.2rem; line-height: 1; color: var(--hc-granat); padding: 1.5rem 1.5rem 0; } .hc-krok__tytul { font-size: 1.08rem; margin: .75rem 1.5rem 0; } .hc-krok__opis { margin: .6rem 1.5rem 1.75rem; font-size: .88rem; color: var(--hc-grafit-md); } @media (max-width: 1024px) { .hc-kroki { grid-template-columns: repeat(2, 1fr); } } @media (max-width: 560px) { .hc-kroki { grid-template-columns: 1fr; } } /* Realizacje - filtry (linkujace do prawdziwego archiwum /realizacje/) plus lista wierszy. */ .hc-realizacje { background: var(--hc-biel); } .hc-realizacje__lista { list-style: none; margin: 0; padding: 0; border-top: 2px solid var(--hc-granat); } .hc-realizacje__wiersz { display: grid; grid-template-columns: clamp(6.5rem, 11vw, 10rem) minmax(0,1fr) minmax(0,250px) 2rem; gap: 1rem 2rem; align-items: center; padding: 2.1rem 0; border-bottom: 1px solid var(--hc-linia); cursor: default; } .hc-realizacje__rok { font-family: var(--hc-font-m); font-weight: 800; font-size: clamp(2.6rem, 4.4vw, 3.6rem); line-height: 1; letter-spacing: -.02em; color: var(--hc-niebieski); transition: color .25s; } .hc-realizacje__wiersz:hover .hc-realizacje__rok { color: var(--hc-granat); } .hc-realizacje__glowne { display: flex; flex-direction: column; gap: .55rem; min-width: 0; transition: transform .3s cubic-bezier(.2,.7,.2,1); } .hc-realizacje__wiersz:hover .hc-realizacje__glowne { transform: translateX(10px); } .hc-realizacje__typ { font-family: var(--hc-font-m); font-weight: 700; font-size: .8rem; text-transform: uppercase; letter-spacing: .08em; color: var(--hc-woda); } .hc-realizacje__tytul { font-family: var(--hc-font-h); font-weight: 700; color: var(--hc-granat); font-size: clamp(1.3rem, 2vw, 1.65rem); line-height: 1.22; } .hc-realizacje__prawo { display: flex; flex-direction: column; gap: .4rem; min-width: 0; } .hc-realizacje__miejsce { font-size: 1.05rem; font-weight: 700; color: var(--hc-grafit); } .hc-realizacje__strzalka { font-family: var(--hc-font-h); color: var(--hc-niebieski); font-size: 1.5rem; justify-self: end; opacity: 0; transform: translateX(-10px); transition: opacity .25s, transform .25s; } .hc-realizacje__wiersz:hover .hc-realizacje__strzalka { opacity: 1; transform: translateX(0); } @media (max-width: 720px) { .hc-realizacje__wiersz { grid-template-columns: 1fr; gap: .5rem; padding: 1.5rem 0; } .hc-realizacje__wiersz:hover .hc-realizacje__glowne { transform: none; } .hc-realizacje__strzalka { display: none; } .hc-realizacje__prawo { flex-direction: row; flex-wrap: wrap; gap: .5rem 1rem; } } .hc-karty { display: grid; gap: 0; margin-top: 1rem; border-top: 1px solid var(--hc-linia); } .hc-karta { border-bottom: 1px solid var(--hc-linia); padding: 1.15rem .25rem; background: var(--hc-biel); transition: padding-left .2s, border-color .2s; display: block; } .hc-karta:hover { padding-left: .85rem; border-color: var(--hc-niebieski); } .hc-karta__typ { font-family: var(--hc-font-m); font-size: .72rem; text-transform: uppercase; letter-spacing: .1em; color: var(--hc-woda); } .hc-karta__tytul { font-size: 1.08rem; margin: .4rem 0 .3rem; color: var(--hc-granat); } .hc-karta__meta { margin: 0; font-family: var(--hc-font-m); font-size: .8rem; color: var(--hc-grafit-lt); } /* Faktura dla jasnych sekcji. Ten sam jezyk rysunku co na granacie, ale na granicy widocznosci - ma czytac sie jak papier kreslarski pod trescia. Modyfikator --odbity obraca rysunek, zeby kolejne sekcje nie powtarzaly tego samego ukladu linii. */ /* overflow: clip, nie hidden - hidden robi z sekcji kontener przewijania i unieruchamia przyklejona kolumne (position: sticky) w srodku, np. w FAQ. */ .hc-tlo-arkusz { position: relative; overflow: clip; } .hc-tlo-arkusz > * { position: relative; z-index: 2; } .hc-tlo-arkusz::before { content: ""; position: absolute; inset: 0; z-index: 1; pointer-events: none; background: url("../img/tlo-arkusz-jasny.svg") center / cover no-repeat; opacity: .42; } .hc-tlo-arkusz--odbity::before { transform: scaleX(-1); } /* Faktura dla sekcji na granacie. Motyw to arkusz projektowy, ktory klient realnie sklada w urzedzie: siatka wspolrzednych, obrys terenu inwestycji linia przerywana, strefa ochrony, punkty osnowy, otwory z odnosnikami, linia przekroju, tabliczka rysunkowa i podzialka skali. Rysunek siedzi w wygenerowanym assets/img/tlo-przekroj.svg - 5 KB wektora, bez animacji. Trzymany nisko przez opacity, ma byc tlem, nie trescia. */ .hc-tlo-geo { position: relative; overflow: clip; background: linear-gradient(168deg, var(--hc-granat-dk) 0%, var(--hc-granat) 62%, #0b4478 100%); } .hc-tlo-geo > * { position: relative; z-index: 2; } .hc-tlo-geo::before, .hc-tlo-geo::after { content: ""; position: absolute; z-index: 1; pointer-events: none; } .hc-tlo-geo::before { inset: 0; background: url("../img/tlo-przekroj.svg") center / cover no-repeat; opacity: .85; } .hc-tlo-geo::after { top: 0; bottom: 0; width: 7px; left: max(14px, calc(50% - (var(--hc-wrap) / 2) - 26px)); background: repeating-linear-gradient(to bottom, rgba(166, 223, 242, .2) 0 1px, transparent 1px 32px); } /* Odbiorcy - na granacie, karty z gornym akcentem zamiast obwodki. */ /* Tlo daje .hc-tlo-geo. Bez wlasnego background, zeby nie nadpisac gradientu. */ .hc-odbiorcy__siatka { display: grid; grid-template-columns: repeat(4, 1fr); gap: 2rem; } .hc-odbiorca { border-top: 2px solid var(--hc-woda); padding-top: 1.5rem; display: flex; flex-direction: column; gap: .75rem; transition: border-color .25s; } .hc-odbiorca:hover { border-color: var(--hc-biel); } .hc-odbiorca__nr { font-family: var(--hc-font-m); font-weight: 700; font-size: .82rem; color: var(--hc-lodowy); } .hc-odbiorca__tytul { font-size: clamp(1.5rem, 2.1vw, 2.05rem); line-height: 1.15; color: var(--hc-biel); margin: 0; } .hc-odbiorca__opis { margin: 0; font-size: .98rem; line-height: 1.6; color: var(--hc-lodowy); } /* Organy - pasek zaufania na lodowym blekicie, skroty jako duza typografia. */ .hc-organy { background: var(--hc-lodowy); } .hc-organy .hc-eyebrow, .hc-organy .hc-lead { color: var(--hc-granat); } .hc-organy__head { display: grid; grid-template-columns: 1.15fr .85fr; gap: var(--hc-gap); align-items: end; margin-bottom: clamp(2rem, 4vw, 3rem); } .hc-organy__h2 { margin: 0; } .hc-organy__lead { margin: 0 0 .35rem; color: rgba(14, 78, 144, .85); line-height: 1.6; } /* Piec kolumn rozdzielonych pionowa linia. Kazda zaczyna sie logotypem urzedu, a dopoki pliku nie ma w assets/img/organy/ - skrotem nazwy. */ .hc-organy__siatka { display: grid; grid-template-columns: repeat(5, 1fr); border-top: 2px solid var(--hc-granat); } .hc-organ { display: flex; flex-direction: column; gap: .5rem; padding: 1.75rem 1.5rem 0 0; } .hc-organ + .hc-organ { border-left: 1px solid rgba(14, 78, 144, .25); padding-left: 1.5rem; } .hc-organ__skrot { font-family: var(--hc-font-h); font-weight: 700; font-size: clamp(2.1rem, 3.4vw, 3.2rem); line-height: 1.05; color: var(--hc-granat); } .hc-organ__logo { display: flex; align-items: center; min-height: clamp(52px, 5vw, 72px); } .hc-organ__logo img { max-width: 100%; max-height: clamp(52px, 5vw, 72px); width: auto; height: auto; object-fit: contain; } .hc-organ__nazwa { font-weight: 700; color: var(--hc-granat); font-size: .95rem; line-height: 1.3; } .hc-organ__opis { font-size: .85rem; color: rgba(14,78,144,.75); line-height: 1.45; } @media (max-width: 1100px) { .hc-organy__head { grid-template-columns: 1fr; align-items: start; } .hc-organy__siatka { grid-template-columns: repeat(3, 1fr); } .hc-organ:nth-child(3n+1) { border-left: 0; padding-left: 0; } } @media (max-width: 640px) { .hc-organy__siatka { grid-template-columns: repeat(2, 1fr); } .hc-organ:nth-child(n) { border-left: 0; padding-left: 0; } } /* FAQ - lewa kolumna przyklejona przy przewijaniu, prawa to numerowana lista. */ .hc-faq__inner { display: grid; grid-template-columns: .75fr 1.25fr; gap: var(--hc-gap); align-items: start; } .hc-faq__head { position: sticky; top: calc(var(--hc-pasek-h) + 2rem); transition: top .3s cubic-bezier(.4, 0, .2, 1); display: flex; flex-direction: column; gap: 1rem; } .hc-faq__pomoc { margin: .5rem 0 0; color: var(--hc-grafit-md); } .hc-faq__tel { font-family: var(--hc-font-h); font-weight: 700; font-size: 1.5rem; color: var(--hc-granat); display: flex; align-items: center; gap: .6rem; } .hc-faq__tel:hover { color: var(--hc-niebieski); } .hc-faq__tel span { color: var(--hc-woda); } .hc-faq__lista { border-top: 2px solid var(--hc-granat); } .hc-faq__item { border-bottom: 1px solid var(--hc-linia); } .hc-faq__pytanie { display: grid; grid-template-columns: 2.75rem 1fr 1.75rem; gap: 1rem; align-items: baseline; padding: 1.35rem 0; cursor: pointer; list-style: none; } .hc-faq__pytanie::-webkit-details-marker { display: none; } .hc-faq__nr { font-family: var(--hc-font-m); font-weight: 700; font-size: .85rem; color: var(--hc-niebieski); } .hc-faq__tekst { font-family: var(--hc-font-h); font-weight: 700; color: var(--hc-granat); font-size: clamp(1rem, 1.4vw, 1.2rem); line-height: 1.3; } .hc-faq__item[open] .hc-faq__tekst { color: var(--hc-niebieski); } .hc-faq__znak { color: var(--hc-niebieski); font-size: 1.6rem; line-height: 1; justify-self: end; transition: transform .2s; } .hc-faq__item[open] .hc-faq__znak { transform: rotate(45deg); } .hc-faq__odpowiedz { padding: 0 2.5rem 1.5rem 2.75rem; margin-left: 0; } .hc-faq__odpowiedz p { margin: 0; color: var(--hc-grafit-md); max-width: 62ch; } @media (max-width: 1024px) { .hc-faq__head { position: static; } } /* Opinie */ .hc-opinie { background: var(--hc-tlo-jasne); } .hc-opinie .hc-karta__typ { color: var(--hc-woda); font-size: 1rem; letter-spacing: .1em; } .hc-opinie .hc-karty { grid-template-columns: repeat(3, 1fr); } /* Kontakt - naglowek na cala szerokosc, potem dwie kolumny: dane / formularz. */ /* Sekcja stoi na bieli, zeby formularz byl pierwszym planem, a nie kafelkiem na granacie. Dane kontaktowe czytaja sie jak tabela, wiersz po wierszu. */ .hc-kontakt { background: var(--hc-biel); } .hc-kontakt__head { margin-bottom: clamp(2rem, 4vw, 3rem); } .hc-kontakt__h2 { font-size: clamp(2.25rem, 4.6vw, 4rem); max-width: 22ch; } .hc-kontakt__inner { display: grid; grid-template-columns: 1fr 1fr; gap: var(--hc-gap); align-items: start; } .hc-kontakt__tel-duzy { display: block; margin-top: 1.5rem; font-family: var(--hc-font-h); font-weight: 700; font-size: clamp(2rem, 3.6vw, 3rem); line-height: 1; letter-spacing: -.01em; color: var(--hc-niebieski); text-decoration: none; } .hc-kontakt__tel-duzy:hover { color: var(--hc-granat); } .hc-kontakt__dane { display: grid; gap: 0; margin-top: 2rem; border-top: 1px solid var(--hc-linia); } .hc-kontakt__dane li { display: grid; grid-template-columns: 6.5rem 1fr; gap: 1rem; padding: 1.1rem 0; border-bottom: 1px solid var(--hc-linia); align-items: baseline; } .hc-kontakt__etykieta { font-family: var(--hc-font-m); font-size: .72rem; text-transform: uppercase; letter-spacing: .1em; color: var(--hc-grafit-lt); } .hc-kontakt__dane a { color: var(--hc-niebieski); text-decoration: none; font-size: 1.02rem; } .hc-kontakt__dane a:hover { color: var(--hc-granat); } .hc-kontakt__dane address, .hc-kontakt__zasieg { font-style: normal; color: var(--hc-grafit); font-size: 1.02rem; } .hc-kontakt__form-h { margin: 0 0 1.5rem; font-family: var(--hc-font-h); font-weight: 700; font-size: 1.3rem; color: var(--hc-granat); } /* Pas mapy na cala szerokosc okna, doklejony do stopki - sekcja gubi tu dolny odstep, zeby miedzy mapa a stopka nie zostawal bialy pasek. */ .hc-kontakt { padding-bottom: 0; } .hc-mapa-pas { margin-top: clamp(2.5rem, 5vw, 4rem); font-size: 0; } .hc-mapa-pas iframe { width: 100%; height: var(--hc-mapa-h, 360px); display: block; border: 0; filter: grayscale(.25); } /* Formularz */ .hc-form { background: transparent; padding: 0; box-shadow: none; } .hc-form__rzad { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem 2rem; } .hc-form__pole { margin: 0 0 1.6rem; border: 0; padding: 0; } .hc-form__pole label, .hc-form__pole legend { display: block; font-family: var(--hc-font-m); font-size: .72rem; font-weight: 700; text-transform: uppercase; letter-spacing: .1em; color: var(--hc-grafit-lt); margin-bottom: .5rem; padding: 0; } .hc-form__pole input, .hc-form__pole select, .hc-form__pole textarea { width: 100%; padding: .55rem 0; border: 0; border-bottom: 1px solid var(--hc-linia); border-radius: 0; font-family: var(--hc-font-b); font-size: 1rem; color: var(--hc-grafit); background: transparent; } .hc-form__pole textarea { resize: vertical; } .hc-form__pole ::placeholder { color: var(--hc-grafit-lt); opacity: 1; } .hc-form__pole input:focus, .hc-form__pole select:focus, .hc-form__pole textarea:focus { outline: 0; border-bottom-color: var(--hc-niebieski); border-bottom-width: 2px; } /* Zakres sprawy: wybor jednej pozycji, podkreslenie zamiast listy rozwijanej. */ .hc-form__chipy { display: flex; flex-wrap: wrap; gap: .4rem 1.5rem; } .hc-form__chip-input { position: absolute; opacity: 0; pointer-events: none; } .hc-form__pole .hc-form__chip { display: inline-block; font-size: .95rem; color: var(--hc-grafit); cursor: pointer; border-bottom: 1px solid var(--hc-linia); padding: .35rem 0; text-transform: none; letter-spacing: 0; font-family: var(--hc-font-b); font-weight: 400; margin: 0; } .hc-form__pole .hc-form__chip:hover { color: var(--hc-niebieski); border-bottom-color: var(--hc-woda); } .hc-form__chip-input:checked + .hc-form__chip { color: var(--hc-niebieski); font-weight: 700; border-bottom: 2px solid var(--hc-niebieski); } .hc-form__chip-input:focus-visible + .hc-form__chip { outline: 2px solid var(--hc-niebieski); outline-offset: 3px; } .hc-form__zgoda { font-size: .8rem; color: var(--hc-grafit-md); margin-bottom: 1.25rem; } .hc-form__zgoda label { display: flex; gap: .6rem; align-items: flex-start; } .hc-form__hp { position: absolute; left: -9999px; } .hc-form__status { margin: .9rem 0 0; font-size: .88rem; } .hc-form__status--ok { color: var(--hc-granat); font-weight: 700; } .hc-form__status--blad { color: #b02020; font-weight: 700; } /* Podstrona "O mnie". Cztery sekcje zamiast jednej kolumny tekstu: przedstawienie ze zdjeciem, uprawnienia na granacie, zasady pracy z dwoma kadrami z terenu i domkniecie z wezwaniem do kontaktu. */ .hc-om-intro__inner { display: grid; grid-template-columns: .9fr 1.1fr; gap: clamp(2rem, 5vw, 4.5rem); align-items: center; } .hc-om-foto { position: relative; padding: 0 2.25rem 2.25rem 0; } .hc-om-foto__blok { position: absolute; right: 0; bottom: 0; width: 74%; height: 62%; background: var(--hc-lodowy); } .hc-om-foto img { position: relative; width: 100%; aspect-ratio: 4 / 5; object-fit: cover; object-position: 50% 78%; display: block; } .hc-om-intro__txt .hc-proza p { color: var(--hc-grafit-md); font-size: clamp(1rem, 1.2vw, 1.08rem); line-height: 1.7; } .hc-om-liczby { display: grid; grid-template-columns: repeat(4, 1fr); gap: 1.25rem; margin-top: 2.25rem; border-top: 2px solid var(--hc-granat); padding-top: 1.5rem; } .hc-om-liczby li { display: flex; flex-direction: column; gap: .25rem; } .hc-om-liczby__wartosc { font-family: var(--hc-font-h); font-weight: 700; font-size: clamp(1.6rem, 2.6vw, 2.3rem); line-height: 1; color: var(--hc-niebieski); } .hc-om-liczby__opis { font-size: .8rem; line-height: 1.4; color: var(--hc-grafit-md); } .hc-om-uprawnienia { background: var(--hc-granat-dk); color: var(--hc-lodowy); } .hc-om-head { display: grid; grid-template-columns: 1.05fr .95fr; gap: var(--hc-gap); align-items: end; margin-bottom: clamp(2rem, 4vw, 3rem); } .hc-om-head__lead { margin: 0 0 .35rem; color: var(--hc-lodowy); line-height: 1.65; } .hc-om-kat { display: grid; gap: 0; border-top: 1px solid rgba(166, 223, 242, .3); } .hc-om-kat__poz { display: grid; grid-template-columns: 7.5rem 1fr; gap: clamp(1rem, 3vw, 2.5rem); padding: 1.85rem 0; border-bottom: 1px solid rgba(166, 223, 242, .3); } .hc-om-kat__nr { font-family: var(--hc-font-h); font-weight: 700; font-size: clamp(1.15rem, 1.8vw, 1.5rem); color: var(--hc-woda); line-height: 1.2; } .hc-om-kat__tytul { margin: 0 0 .4rem; color: var(--hc-biel); font-size: clamp(1.05rem, 1.5vw, 1.25rem); } .hc-om-kat__opis { margin: 0 0 .85rem; color: var(--hc-lodowy); font-size: .95rem; line-height: 1.6; max-width: 72ch; } .hc-om-kat__punkty { display: grid; gap: .45rem; } .hc-om-kat__punkty li { position: relative; padding-left: 1.4rem; font-size: .9rem; line-height: 1.55; color: rgba(166, 223, 242, .9); } .hc-om-kat__punkty li::before { content: ""; position: absolute; left: 0; top: .55em; width: 8px; height: 1px; background: var(--hc-woda); } .hc-om-kat__nota { margin: 1.75rem 0 0; max-width: 90ch; font-size: .88rem; line-height: 1.6; color: rgba(166, 223, 242, .78); } .hc-om-praca__inner { display: grid; grid-template-columns: 1.15fr .85fr; gap: clamp(2rem, 5vw, 4.5rem); align-items: center; } .hc-om-zasady { display: grid; gap: 0; margin-top: 1.5rem; border-top: 2px solid var(--hc-granat); } .hc-om-zasada { display: grid; grid-template-columns: 3rem 1fr; gap: 1.25rem; padding: 1.4rem 0; border-bottom: 1px solid var(--hc-linia); } .hc-om-zasada__nr { font-family: var(--hc-font-m); font-weight: 700; font-size: .95rem; color: var(--hc-niebieski); } .hc-om-zasada__tytul { margin: 0 0 .3rem; font-size: 1.08rem; color: var(--hc-granat); } .hc-om-zasada__opis { margin: 0; font-size: .94rem; line-height: 1.6; color: var(--hc-grafit-md); } /* Galeria z pracy: zwarty blok o rownych krawedziach. Pierwszy kadr jest wysoki i trzyma lewa kolumne, dwa kwadraty wyznaczaja wysokosc wierszy, ostatni idzie przez cala szerokosc i domyka blok. Przesuniete kolumny probowane wczesniej zostawialy postrzepione brzegi. */ .hc-om-praca__galeria { display: grid; grid-template-columns: repeat(2, 1fr); gap: .75rem; align-content: center; } .hc-om-praca__galeria img { width: 100%; height: 100%; min-height: 0; display: block; object-fit: cover; aspect-ratio: 1 / 1; } .hc-om-praca__galeria img:first-child { grid-row: span 2; aspect-ratio: auto; } .hc-om-praca__galeria img:nth-child(4) { grid-column: 1 / -1; aspect-ratio: 16 / 9; } /* CTA na granacie z rysunkiem arkusza, jak sekcje nosne strony glownej. Tlo daje klasa .hc-tlo-geo w szablonie, tu tylko kolory tekstu. */ .hc-om-cta { color: var(--hc-lodowy); } .hc-om-cta .hc-h2 { color: var(--hc-biel); } .hc-om-cta .hc-lead { color: var(--hc-lodowy); } .hc-om-cta__inner { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(2rem, 5vw, 4rem); align-items: center; } .hc-om-cta__foto img { width: 100%; height: auto; display: block; } .hc-om-cta__akcje { display: flex; flex-wrap: wrap; gap: .85rem; margin: 1.5rem 0 0; } @media (max-width: 1000px) { .hc-om-intro__inner, .hc-om-head, .hc-om-praca__inner, .hc-om-cta__inner { grid-template-columns: 1fr; } .hc-om-praca__galeria { max-width: 640px; margin-inline: auto; } } @media (max-width: 680px) { .hc-om-liczby { grid-template-columns: repeat(2, 1fr); } .hc-om-kat__poz { grid-template-columns: 1fr; gap: .6rem; } .hc-om-praca__galeria { grid-template-columns: repeat(2, 1fr); } .hc-om-foto { padding: 0; } .hc-om-foto__blok { display: none; } } /* Podstrona "Kontakt". Formularz jako tresc glowna, obok niego dane firmy, ponizej wskazowki co podac i przebieg pierwszego kontaktu. */ .hc-kt-glowna__inner { display: grid; grid-template-columns: .85fr 1.15fr; gap: clamp(2rem, 5vw, 4.5rem); align-items: start; } .hc-kt-dane .hc-kontakt__tel-duzy { margin-top: .75rem; } .hc-kt-rejestr { font-family: var(--hc-font-m); font-size: .85rem; line-height: 1.6; color: var(--hc-grafit); } .hc-kt-nota { margin-top: 1.75rem; } .hc-kt-nota p { margin: 0; font-size: .92rem; line-height: 1.65; color: var(--hc-grafit-md); max-width: 46ch; } .hc-kt-form { background: var(--hc-biel); border: 1px solid var(--hc-linia); padding: clamp(1.5rem, 3vw, 2.5rem); } .hc-kt-form__h { font-size: clamp(1.5rem, 2.4vw, 2rem); margin: 0 0 .4rem; } .hc-kt-form__lead { margin: 0 0 1.75rem; font-size: .92rem; color: var(--hc-grafit-md); } .hc-kt-przydatne { background: var(--hc-granat-dk); color: var(--hc-lodowy); } .hc-kt-head { display: grid; grid-template-columns: 1.05fr .95fr; gap: var(--hc-gap); align-items: end; margin-bottom: clamp(2rem, 4vw, 3rem); } .hc-kt-head__lead { margin: 0 0 .35rem; color: var(--hc-lodowy); line-height: 1.65; } .hc-kt-siatka { display: grid; grid-template-columns: repeat(4, 1fr); gap: 2rem; } .hc-kt-karta { display: flex; flex-direction: column; gap: .6rem; border-top: 2px solid var(--hc-woda); padding-top: 1.25rem; } .hc-kt-karta__nr { font-family: var(--hc-font-m); font-weight: 700; font-size: .82rem; color: var(--hc-woda); } .hc-kt-karta__tytul { margin: 0; font-size: 1.1rem; color: var(--hc-biel); } .hc-kt-karta__opis { margin: 0; font-size: .9rem; line-height: 1.6; color: var(--hc-lodowy); } .hc-mapa-pas--kontakt { margin-top: 0; } @media (max-width: 1000px) { .hc-kt-glowna__inner, .hc-kt-head { grid-template-columns: 1fr; } .hc-kt-siatka { grid-template-columns: repeat(2, 1fr); } } @media (max-width: 620px) { .hc-kt-siatka { grid-template-columns: 1fr; } } /* Strona zbiorcza uslug: po lewej przyklejona lista wszystkich uslug, po prawej ich opisy jeden pod drugim. Przy przewijaniu podswietla sie pozycja odpowiadajaca widocznej uslugze (skrypt main.js, sekcja "Lista uslug"). Nizej dwie sekcje pod wyszukiwarke: tabela decyzyjna i blok o uprawnieniach. */ .hc-sec__head--bez-h2 { margin-bottom: 1.5rem; } /* Bez align-items: start - kolumna z menu ma siegac dolu calej listy, inaczej przyklejanie konczy sie razem z jej wlasna wysokoscia, czyli po pierwszej uslugze. */ .hc-ul-uklad { display: grid; grid-template-columns: 320px 1fr; gap: clamp(2rem, 5vw, 4.5rem); } .hc-ul-nawigacja__pudlo { position: sticky; top: calc(var(--hc-pasek-h) + 2rem); transition: top .3s cubic-bezier(.4, 0, .2, 1); } .hc-ul-nawigacja__glowa { display: flex; justify-content: space-between; gap: 1rem; margin: 0 0 1rem; font-family: var(--hc-font-m); font-size: .72rem; letter-spacing: .1em; text-transform: uppercase; color: var(--hc-grafit-lt); } .hc-ul-nawigacja__licznik { color: var(--hc-niebieski); font-weight: 700; } /* Podzialka po lewej stronie listy - ten sam jezyk co rysunek techniczny w tle. */ .hc-ul-nawigacja__ciag { position: relative; padding-left: 1rem; } .hc-ul-nawigacja__podzialka { position: absolute; left: 0; top: 0; bottom: 0; width: 9px; background: repeating-linear-gradient(to bottom, var(--hc-lodowy) 0 1px, transparent 1px 9px); } .hc-ul-nawigacja__lista { display: grid; gap: 2px; } .hc-ul-nawigacja__lista a { display: grid; grid-template-columns: 1.9rem 1fr; gap: .5rem; align-items: start; padding: .85rem 1rem; text-decoration: none; background: #e9f4fb; color: var(--hc-granat); font-size: .93rem; line-height: 1.35; transition: background .2s, color .2s; } .hc-ul-nawigacja__lista a:hover { background: #d7ebf8; } .hc-ul-nawigacja__nr { font-family: var(--hc-font-m); font-size: .8rem; font-weight: 700; color: var(--hc-niebieski); padding-top: .1em; } .hc-ul-nawigacja__lista a[aria-current="true"] { background: var(--hc-granat-dk); color: var(--hc-biel); font-weight: 700; } .hc-ul-nawigacja__lista a[aria-current="true"] .hc-ul-nawigacja__nr { color: var(--hc-woda); } .hc-ul-nawigacja__pomoc { display: inline-block; margin-top: 1.25rem; font-size: .9rem; font-weight: 700; } .hc-ul-tresci { display: grid; gap: 0; } .hc-ul-poz { padding: 0 0 clamp(2.5rem, 5vw, 4rem); } .hc-ul-poz + .hc-ul-poz { padding-top: clamp(2.5rem, 5vw, 4rem); border-top: 1px solid var(--hc-linia); } .hc-ul-poz__licznik { margin: 0 0 .75rem; font-family: var(--hc-font-m); font-size: .78rem; letter-spacing: .08em; color: var(--hc-niebieski); } .hc-ul-poz__gora { display: grid; grid-template-columns: 1fr 320px; gap: clamp(1.5rem, 3vw, 2.5rem); align-items: start; } .hc-ul-poz__tytul { margin: 0 0 .6rem; font-size: clamp(1.4rem, 2.4vw, 2rem); color: var(--hc-granat); } .hc-ul-poz__opis { margin: 0; font-size: 1rem; line-height: 1.65; color: var(--hc-grafit-md); max-width: 60ch; } .hc-ul-poz__termin { display: inline-flex; align-items: center; gap: .55rem; margin: 1rem 0 0; background: #e9f4fb; padding: .5rem .9rem; font-size: .86rem; font-weight: 700; color: var(--hc-granat); } .hc-ul-poz__termin span { width: 8px; height: 8px; background: #d64545; flex: none; } /* Pliki uslug sa pionowe (760x943), a uklad potrzebuje kadru poziomego - inaczej kolumna ze zdjeciem jest wyzsza od tekstu i pod opisem zostaje pusty pas do listy zakresu. Przycinamy do 4:3 w kadrze, bez ruszania plikow. */ .hc-ul-poz__foto img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; object-position: 50% 42%; display: block; } .hc-ul-poz__zakres { display: grid; gap: 0; margin: clamp(1.5rem, 3vw, 2.25rem) 0 1.5rem; border-top: 1px solid var(--hc-linia); } .hc-ul-poz__zakres li { display: grid; grid-template-columns: 3.5rem 1fr; gap: .75rem; align-items: start; padding: .85rem 0; border-bottom: 1px solid var(--hc-linia); font-size: .95rem; line-height: 1.5; color: var(--hc-grafit); } .hc-ul-poz__zakres-nr { font-family: var(--hc-font-m); font-size: .78rem; color: var(--hc-grafit-lt); padding-top: .18em; } .hc-ul-poz__link { font-weight: 700; font-size: .95rem; } @media (max-width: 1100px) { .hc-ul-uklad { grid-template-columns: 1fr; } .hc-ul-nawigacja__pudlo { position: static; } .hc-ul-nawigacja__lista { grid-template-columns: repeat(2, 1fr); gap: 2px; } } @media (max-width: 760px) { .hc-ul-poz__gora { grid-template-columns: 1fr; } .hc-ul-poz__foto { max-width: 320px; } .hc-ul-nawigacja__lista { grid-template-columns: 1fr; } .hc-ul-poz__zakres li { grid-template-columns: 1fr; gap: .2rem; } } .hc-ul-dokument { background: var(--hc-granat-dk); color: var(--hc-lodowy); } .hc-ul-head { display: grid; grid-template-columns: 1.05fr .95fr; gap: var(--hc-gap); align-items: end; margin-bottom: clamp(2rem, 4vw, 3rem); } .hc-ul-head__lead { margin: 0 0 .35rem; color: var(--hc-lodowy); line-height: 1.65; } .hc-ul-tabela { display: grid; border-top: 1px solid rgba(166, 223, 242, .3); } .hc-ul-tabela__glowa, .hc-ul-tabela__wiersz { display: grid; grid-template-columns: 1.1fr .9fr; gap: clamp(1rem, 3vw, 2.5rem); padding: 1.1rem 0; border-bottom: 1px solid rgba(166, 223, 242, .3); } .hc-ul-tabela__glowa { font-family: var(--hc-font-m); font-size: .72rem; text-transform: uppercase; letter-spacing: .1em; color: var(--hc-woda); } .hc-ul-tabela__wiersz span { font-size: .95rem; line-height: 1.55; } .hc-ul-tabela__dokument { color: var(--hc-biel); font-weight: 700; } .hc-ul-tabela__nota { margin: 1.5rem 0 0; max-width: 80ch; font-size: .9rem; color: rgba(166, 223, 242, .8); } .hc-ul-kto__inner { display: grid; grid-template-columns: 1.25fr .75fr; gap: clamp(2rem, 5vw, 4rem); align-items: start; } .hc-ul-kto__txt .hc-proza p { color: var(--hc-grafit-md); font-size: clamp(1rem, 1.2vw, 1.05rem); line-height: 1.7; } .hc-ul-kto__akcje { display: flex; flex-wrap: wrap; gap: .85rem; margin: 1.75rem 0 0; } .hc-ul-kto__organy { background: var(--hc-tlo-jasne); padding: clamp(1.25rem, 2.5vw, 2rem); } .hc-ul-kto__organy-h { margin: 0 0 1rem; font-family: var(--hc-font-m); font-size: .72rem; text-transform: uppercase; letter-spacing: .1em; color: var(--hc-grafit-lt); } .hc-ul-kto__organy ul { display: grid; gap: 1rem; } .hc-ul-kto__organy li { display: flex; flex-direction: column; gap: .2rem; padding-bottom: 1rem; border-bottom: 1px solid var(--hc-linia); } .hc-ul-kto__organy li:last-child { border-bottom: 0; padding-bottom: 0; } .hc-ul-kto__organy strong { color: var(--hc-granat); font-size: .98rem; } .hc-ul-kto__organy span { font-size: .86rem; line-height: 1.5; color: var(--hc-grafit-md); } @media (max-width: 1000px) { .hc-ul-wiersz { grid-template-columns: 3rem 1fr; } .hc-ul-wiersz__foto { grid-column: 2; max-width: 320px; } .hc-ul-wiersz__tresc { grid-column: 2; } .hc-ul-head, .hc-ul-kto__inner { grid-template-columns: 1fr; } } @media (max-width: 640px) { .hc-ul-tabela__glowa { display: none; } .hc-ul-tabela__wiersz { grid-template-columns: 1fr; gap: .35rem; } } /* Podstrona pojedynczej uslugi. Tresc po lewej, przyklejony spis tresci po prawej, pod nim opcjonalny kafel terminu. Spis powstaje z naglowkow H2 w tresci (patrz single-usluga.php) i podswietla sekcje aktualnie czytana. */ .hc-us-uklad-sec { padding-block: clamp(3rem, 6vw, 5.5rem); } .hc-us-uklad { display: grid; grid-template-columns: minmax(0, 1fr) 300px; gap: clamp(2rem, 5vw, 4rem); } .hc-us-tresc { max-width: 78ch; } .hc-us-foto { margin: 0 0 clamp(2rem, 4vw, 3.5rem); } .hc-us-foto img { width: 100%; aspect-ratio: 16 / 9; object-fit: cover; display: block; } .hc-us-foto figcaption { margin-top: .7rem; font-family: var(--hc-font-m); font-size: .78rem; color: var(--hc-grafit-lt); } .hc-us-h2 { font-size: clamp(1.35rem, 2.2vw, 1.65rem); line-height: 1.25; color: var(--hc-niebieski); margin: 0 0 1rem; } .hc-us-proza > * + * { margin-top: 1.1rem; } .hc-us-proza h2 { margin-top: clamp(2.25rem, 4vw, 3.5rem); } .hc-us-proza p { font-size: 1rem; line-height: 1.75; color: var(--hc-grafit-md); margin: 0 0 1rem; } .hc-us-proza ul { display: grid; gap: 0; border-top: 1px solid var(--hc-linia); margin: 1.25rem 0; } .hc-us-proza ul li { display: grid; grid-template-columns: 1.75rem 1fr; gap: .5rem; padding: .85rem 0; border-bottom: 1px solid var(--hc-linia); font-size: .96rem; line-height: 1.6; color: var(--hc-grafit); } .hc-us-proza ul li::before { content: "—"; color: var(--hc-woda); } .hc-us-proza ol { display: grid; gap: .5rem; margin: 1.25rem 0 1.25rem 1.25rem; list-style: decimal; } .hc-us-proza ol li { font-size: .96rem; line-height: 1.6; color: var(--hc-grafit); } /* Zakres prac na jasnym tle, z numeracja - najczesciej skanowany fragment. */ .hc-us-zakres { margin-top: clamp(2.5rem, 5vw, 4rem); background: #eaf4fb; padding: clamp(1.5rem, 3vw, 2.25rem); } .hc-us-zakres__lista { display: grid; } .hc-us-zakres__lista li { display: grid; grid-template-columns: 2.5rem 1fr; gap: .5rem; align-items: start; padding: .8rem 0; border-top: 1px solid #cfe2f2; font-size: .96rem; line-height: 1.6; color: var(--hc-granat); } .hc-us-zakres__nr { font-family: var(--hc-font-m); font-size: .78rem; color: var(--hc-niebieski); padding-top: .22em; } .hc-us-przebieg { margin-top: clamp(2.5rem, 5vw, 4rem); } .hc-us-kroki { display: grid; border-top: 2px solid var(--hc-granat); } .hc-us-kroki li { display: grid; grid-template-columns: 3rem 1fr; gap: 1rem; padding: 1.35rem 0; border-bottom: 1px solid var(--hc-linia); } .hc-us-kroki__nr { font-family: var(--hc-font-m); font-weight: 700; font-size: .9rem; color: var(--hc-niebieski); } .hc-us-kroki__tytul { margin: 0 0 .3rem; font-size: 1.05rem; color: var(--hc-granat); } .hc-us-kroki__opis { margin: 0; font-size: .94rem; line-height: 1.6; color: var(--hc-grafit-md); } /* Kolumna boczna. Bez align-items: start na siatce - kolumna ma siegac dolu tresci, inaczej przyklejanie konczy sie na jej wlasnej wysokosci. */ .hc-us-bok__pudlo { position: sticky; top: calc(var(--hc-pasek-h) + 2rem); display: grid; gap: 1.25rem; transition: top .3s cubic-bezier(.4, 0, .2, 1); } .hc-us-spis { border-top: 2px solid var(--hc-granat); } .hc-us-spis__glowa { margin: 0; padding: 1rem 0 .5rem; font-family: var(--hc-font-m); font-size: .68rem; letter-spacing: .14em; text-transform: uppercase; color: var(--hc-grafit-lt); } .hc-us-spis ol { display: grid; } .hc-us-spis a { display: grid; grid-template-columns: 2rem 1fr; gap: .4rem; align-items: start; padding: .65rem 0; border-bottom: 1px solid var(--hc-linia); font-size: .85rem; line-height: 1.45; color: var(--hc-grafit-md); text-decoration: none; transition: color .2s; } .hc-us-spis a:hover { color: var(--hc-niebieski); } .hc-us-spis__nr { font-family: var(--hc-font-m); font-size: .7rem; color: var(--hc-lodowy); padding-top: .18em; } .hc-us-spis a[aria-current="true"] { color: var(--hc-granat); font-weight: 700; } .hc-us-spis a[aria-current="true"] .hc-us-spis__nr { color: var(--hc-woda); } .hc-us-termin { background: var(--hc-granat-dk); color: var(--hc-biel); padding: 1.5rem; display: grid; gap: .6rem; } .hc-us-termin__etykieta { font-family: var(--hc-font-m); font-size: .68rem; letter-spacing: .14em; text-transform: uppercase; color: var(--hc-woda); } .hc-us-termin__data { font-size: 1.3rem; font-weight: 700; line-height: 1.2; } .hc-us-termin__opis { font-size: .84rem; line-height: 1.55; color: var(--hc-lodowy); } .hc-us-termin .hc-btn { margin-top: .4rem; justify-content: center; } .hc-us-pytania { padding-top: 0; } .hc-us-pytania__h2 { padding-bottom: 1rem; border-bottom: 2px solid var(--hc-granat); margin-bottom: 0; } .hc-us-powiazane__lista { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.5rem; } .hc-us-powiazane__lista a { display: grid; gap: .75rem; text-decoration: none; color: var(--hc-granat); font-weight: 700; font-size: 1rem; line-height: 1.35; } .hc-us-powiazane__lista img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; display: block; } .hc-us-powiazane__lista a:hover { color: var(--hc-niebieski); } @media (max-width: 1000px) { .hc-us-uklad { grid-template-columns: 1fr; } .hc-us-bok__pudlo { position: static; } .hc-us-spis ol { grid-template-columns: repeat(2, 1fr); gap: 0 1.5rem; } .hc-us-powiazane__lista { grid-template-columns: 1fr; } } @media (max-width: 620px) { .hc-us-spis ol { grid-template-columns: 1fr; } } /* Archiwum realizacji: pasek filtrow przyklejony pod naglowkiem, zakladki typow dokumentu z licznikami i siatka kart. Filtrowanie dzieje sie w przegladarce, wiec liczniki i stan pusty steruje main.js. */ .hc-rz-pasek { position: sticky; top: var(--hc-pasek-h); z-index: 20; background: rgba(255, 255, 255, .97); backdrop-filter: blur(8px); border-bottom: 1px solid var(--hc-linia); transition: top .3s cubic-bezier(.4, 0, .2, 1); } .hc-rz-pasek__inner { display: flex; flex-wrap: wrap; gap: .75rem; padding-block: 1rem; } /* Znak firmowy wystaje spod przyklejonego naglowka o okolo 34 px i wchodzil na pole "Województwo". Doluzowujemy gore paska tylko w stanie przewinietym, bo tylko wtedy te dwa elementy sie spotykaja. */ html.hc-przewiniete .hc-rz-pasek__inner { padding-top: 3rem; } @media (max-width: 900px) { html.hc-przewiniete .hc-rz-pasek__inner { padding-top: 2.5rem; } } .hc-rz-szukaj { flex: 1 1 320px; display: flex; align-items: center; gap: .75rem; border: 1px solid #c9dcee; padding: 0 1rem; height: 48px; background: var(--hc-biel); } .hc-rz-szukaj__ikona { font-size: 1rem; color: var(--hc-niebieski); } .hc-rz-szukaj input { flex: 1; min-width: 0; border: 0; outline: none; background: transparent; font-family: var(--hc-font-b); font-size: .9rem; color: var(--hc-granat); } .hc-rz-szukaj input::placeholder { color: var(--hc-grafit-lt); } .hc-rz-pole { flex: 0 1 200px; display: flex; flex-direction: column; justify-content: center; border: 1px solid #c9dcee; padding: 0 1rem; height: 48px; background: var(--hc-biel); position: relative; } .hc-rz-pole > span { font-family: var(--hc-font-m); font-size: .58rem; letter-spacing: .12em; text-transform: uppercase; color: var(--hc-grafit-lt); } .hc-rz-pole select { appearance: none; border: 0; outline: none; background: transparent; padding: 0; cursor: pointer; font-family: var(--hc-font-b); font-size: .88rem; font-weight: 500; color: var(--hc-granat); } .hc-rz-pole::after { content: ""; position: absolute; right: 14px; top: 50%; width: 0; height: 0; border: 5px solid transparent; border-top-color: var(--hc-niebieski); pointer-events: none; } /* Wlasna lista wyboru. Natywne