/* ========================================================================== Fundacja Koocham — style główne Spis treści: 01. Reset i podstawy 02. Elementy współdzielone (kontener, przyciski, nagłówki sekcji) 03. Nagłówek i nawigacja 04. Hero 05. Pasek statystyk 06. Gdzie nas znajdziesz 07. Tak wspieramy 08. Historia założycielki 09. Nasza historia (oś czasu) 10. Jak możesz pomóc 11. Fundacja w mediach 12. Stopka 13. (patrz numeracja w kodzie) 14. Podstrona: Fundacja (nagłówek, submenu, panele, galeria) 15. Animacje wejścia 16. Podstrona: Przedszkole (treść + oferta + opłaty) 17. Podstrona: Poradnia (rozwijana oferta + cennik) 18. Podstrona: Jak pomagam (formy wsparcia) 19. Podstrona: Kontakt (zapisy, dane, lokalizacja) ========================================================================== */ /* ========================================================================== 01. Reset i podstawy ========================================================================== */ *, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; } html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; /* Kotwice nie chowają się pod przyklejonym nagłówkiem */ scroll-padding-top: 6rem; /* `clip`, nie `hidden`. Ustawienie `overflow-x: hidden` na wymusza wyliczenie `overflow-y: auto` na tym samym elemencie, przez co staje się kontenerem przewijania — a to psuje `position: sticky` w nagłówku i potrafi przechwytywać zdarzenia kółka myszy. `clip` przycina bez tworzenia kontenera przewijania. */ overflow-x: clip; } /* Blokada przewijania tła pod menu mobilnym i lightboxem. Z tego samego powodu, co komentarz wyżej, siedzi na , a NIE na : overflow na elemencie głównym przenosi się na okno, więc nie powstaje nowy kontener przewijania i przyklejony nagłówek nadal trzyma się górnej krawędzi ekranu. Klasę dokłada skrypt (lockScroll) równolegle z klasą na , na której wisi wygląd nagłówka przy otwartym menu. */ html.menu-open { overflow: hidden; } body { font-family: var(--f-sans); font-size: var(--fs-body); font-weight: var(--fw-regular); line-height: var(--lh-body); color: var(--c-ink); background: var(--c-white); -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; } h1, h2, h3, h4 { color: var(--c-navy); font-weight: var(--fw-black); line-height: var(--lh-heading); letter-spacing: -0.02em; text-wrap: balance; } p { text-wrap: pretty; } img, svg { display: block; max-width: 100%; height: auto; } a { color: var(--c-magenta-text); } ul { list-style: none; } button { font: inherit; color: inherit; background: none; border: none; cursor: pointer; } /* Widoczny focus dla nawigacji klawiaturą — nigdy nie usuwamy outline bez podania zamiennika. :focus-visible nie pokazuje ringu przy kliknięciu myszą, więc nie psuje wyglądu. */ :focus-visible { outline: 3px solid var(--c-violet); outline-offset: 3px; border-radius: var(--r-sm); } /* Treść tylko dla czytników ekranu */ .sr-only { position: absolute; width: 1px; height: 1px; padding: 0; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; } /* Skip link — pierwszy element w tabulacji, pozwala ominąć menu */ .skip-link { position: absolute; top: var(--sp-3); left: var(--sp-3); z-index: var(--z-skip); padding: var(--sp-3) var(--sp-5); font-weight: var(--fw-bold); color: var(--c-white); text-decoration: none; background: var(--c-violet); border-radius: var(--r-pill); transform: translateY(-150%); transition: transform var(--t-base); } .skip-link:focus { transform: translateY(0); } /* ========================================================================== 02. Elementy współdzielone ========================================================================== */ .container { width: 100%; max-width: var(--container); margin-inline: auto; padding-inline: var(--gutter); } .section { padding-block: var(--section-y); } .section--cream { background: var(--c-cream); } .section--lavender { background: var(--c-lavender); } .section-head { max-width: 42rem; margin-inline: auto; margin-bottom: var(--sp-7); text-align: center; } .section-head h2 { font-size: var(--fs-h2); margin-bottom: var(--sp-4); } .section-head p { font-size: var(--fs-lead); color: var(--c-ink); } /* Globalny reset zeruje marginesy, więc dwa akapity wstępu skleiłyby się w jeden blok tekstu. */ .section-head p + p { margin-top: var(--sp-4); } /* Klasa .accent (zdania-akcenty) siedzi na końcu arkusza — patrz sekcja „Narzędzia" pod media queries. */ .eyebrow { display: block; margin-bottom: var(--sp-4); font-size: var(--fs-eyebrow); font-weight: var(--fw-bold); letter-spacing: 0.14em; text-transform: uppercase; color: var(--c-magenta-text); } /* --- Przyciski ----------------------------------------------------------- */ .btn { display: inline-flex; align-items: center; justify-content: center; gap: var(--sp-2); padding: 0.85rem 1.9rem; font-size: var(--fs-body); font-weight: var(--fw-bold); text-align: center; text-decoration: none; white-space: nowrap; border-radius: var(--r-pill); border: 2px solid transparent; transition: transform var(--t-fast), box-shadow var(--t-base), background-color var(--t-base), color var(--t-base); } .btn:hover { transform: translateY(-2px); } .btn:active { transform: translateY(0); } .btn--primary { color: var(--c-white); background: var(--c-magenta-btn); box-shadow: 0 4px 14px rgba(211, 18, 111, 0.32); } .btn--primary:hover { background: var(--c-magenta-dark); box-shadow: 0 8px 22px rgba(211, 18, 111, 0.40); } .btn--ghost { color: var(--c-magenta-text); background: var(--c-white); border-color: var(--c-magenta); } .btn--ghost:hover { color: var(--c-white); background: var(--c-magenta-btn); border-color: var(--c-magenta-btn); } /* Wariant do nagłówka — niższy, żeby nie rozpychał paska nawigacji. */ .btn--sm { padding: 0.6rem 1.5rem; font-size: var(--fs-small); } .btn--white { color: var(--c-magenta-text); background: var(--c-white); box-shadow: var(--sh-md); } .btn--white:hover { color: var(--c-magenta-dark); box-shadow: var(--sh-lg); } /* --- Link "Dowiedz się więcej" ------------------------------------------- */ .arrow-link { display: inline-flex; align-items: center; gap: var(--sp-2); font-weight: var(--fw-bold); text-decoration: none; } .arrow-link svg { transition: transform var(--t-base); } .arrow-link:hover svg { transform: translateX(5px); } /* ========================================================================== 03. Nagłówek i nawigacja ========================================================================== */ .header { position: sticky; top: 0; z-index: var(--z-header); background: rgba(255, 255, 255, 0.92); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); border-bottom: 1px solid transparent; transition: border-color var(--t-base), box-shadow var(--t-base); } /* Klasa dokładana skryptem po przewinięciu — nagłówek "odkleja się" od strony delikatnym cieniem */ .header.is-scrolled { border-bottom-color: var(--c-line); box-shadow: var(--sh-sm); } .header__inner { position: relative; /* punkt odniesienia dla wyśrodkowanej .nav__list */ display: flex; align-items: center; justify-content: space-between; gap: var(--sp-5); min-height: 4.75rem; } .logo { display: inline-block; flex-shrink: 0; text-decoration: none; } /* Znak marki dostarczony jest wyłącznie w wersji białej (na ciemne tła). W nagłówku, na białym, byłby niewidoczny — brightness(0) zamienia biel na czerń, zachowując kanał alfa. Do podmiany, gdy dojdzie wersja kolorowa lub ciemna. */ .logo__mark { height: 2.9rem; width: auto; filter: brightness(0); } .footer .logo__mark { filter: none; /* w stopce tło jest ciemne, biel działa jak trzeba */ } .nav { display: flex; align-items: center; } /* Lista linków stoi na środku CAŁEGO paska nagłówka (position: absolute względem .header__inner), a nie na środku miejsca, jakie akurat zostanie po logo i przycisku — inaczej środek zależałby od tego, że logo i przycisk mają różną szerokość. Sam przycisk "Wspieram" zostaje zwykłym elementem .nav w normalnym przepływie, wypychanym do prawej krawędzi przez justify-content: space-between na .header__inner — dzięki temu działa to jednym przyciskiem w kodzie, bez duplikowania go na potrzeby układu (patrz media query niżej — na mobile ta absolutna pozycja się cofa, bo lista wraca do normalnego przepływu wewnątrz rozwijanego menu). */ .nav__list { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); display: flex; align-items: center; /* Odstęp maleje na węższych desktopach — przy 7 pozycjach menu i tak musi zmieścić się między logo a przyciskiem tuż nad progiem mobilnym. */ gap: clamp(0.85rem, 0.3rem + 1vw, 1.5rem); } .nav__link { position: relative; padding-block: var(--sp-2); font-size: 0.95rem; font-weight: var(--fw-medium); color: var(--c-navy); text-decoration: none; white-space: nowrap; /* pozycje menu zostają w jednej linii */ transition: color var(--t-base); } /* Podkreślenie wyjeżdżające od środka */ .nav__link::after { content: ""; position: absolute; left: 50%; bottom: 0; width: 0; height: 2px; background: var(--c-magenta); border-radius: var(--r-pill); transform: translateX(-50%); transition: width var(--t-base); } .nav__link:hover { color: var(--c-magenta-text); } .nav__link:hover::after { width: 100%; } /* Strona bieżąca — oznaczona też aria-current w HTML */ .nav__link[aria-current="page"] { color: var(--c-magenta-text); font-weight: var(--fw-bold); } .nav__link[aria-current="page"]::after { width: 100%; } /* --- Przycisk hamburgera (tylko mobile) ---------------------------------- */ .nav-toggle { display: none; flex-direction: column; justify-content: center; gap: 5px; width: 2.75rem; height: 2.75rem; padding: 0.6rem; border-radius: var(--r-md); } /* :not(.sr-only) jest tu konieczne. Wewnątrz przycisku siedzi też ukryty Menu dla czytników ekranu, a sam selektor `.nav-toggle span` ma wyższą specyficzność niż `.sr-only` — nadpisywał jego `width: 1px` na `100%` i rozpychał układ. */ .nav-toggle span:not(.sr-only) { display: block; height: 2.5px; width: 100%; background: var(--c-navy); border-radius: var(--r-pill); transition: transform var(--t-base), opacity var(--t-fast); } /* Hamburger zamienia się w krzyżyk */ .nav-toggle[aria-expanded="true"] span:not(.sr-only):nth-child(1) { transform: translateY(7.5px) rotate(45deg); } .nav-toggle[aria-expanded="true"] span:not(.sr-only):nth-child(2) { opacity: 0; } .nav-toggle[aria-expanded="true"] span:not(.sr-only):nth-child(3) { transform: translateY(-7.5px) rotate(-45deg); } /* ========================================================================== 04. Hero ========================================================================== */ .hero { position: relative; isolation: isolate; /* zamyka z-index ilustracji w obrębie sekcji */ overflow: hidden; /* Scena potrzebuje wysokości, bo warstwy są pozycjonowane absolutnie i same jej nie tworzą. */ min-height: clamp(34rem, 21rem + 30vw, 50rem); } /* --- Ilustracja hero ------------------------------------------------------ Jeden plik z wyciętym tłem, nie składanka warstw — cała kompozycja (tęcza, chmury, wzgórze, dzieci, serca) jest już w grafice. Leży pod tekstem, przy dolnej krawędzi sekcji, i sięga obu krawędzi okna. min-width pilnuje, by na wąskich ekranach sylwetki nie zrobiły się mikroskopijne; nadmiar przycina `overflow: hidden` sekcji. Szerokość 78%, nie 100%, i dosunięcie do prawej. W tym pliku tęcza jest wyśrodkowana (zajmuje 11–90% szerokości grafiki), więc na pełnej szerokości jej lewa noga wchodzi pod nagłówek. Mniejsza szerokość przy zakotwiczeniu do prawej przesuwa całą kompozycję w prawo — lewa krawędź grafiki zaczyna się dopiero na ok. 22% okna. */ .hero__art { position: absolute; right: 0; bottom: 0; z-index: -1; width: 78%; min-width: 50rem; max-width: none; pointer-events: none; user-select: none; /* Trzy przystanki. Pierwszy jest `transparent` (alfa dokładnie 0), nie jakaś mała wartość — inaczej lewa krawędź obrazu ma nieciągłość: skok z "nic" (poza elementem) na "trochę widoczne" (0% na jego brzegu). Efekt: cienka, ale twarda kreska dokładnie na granicy elementu. `transparent` scala tę krawędź z białym tłem strony bez szwu. Sam blok tekstu (nagłówek, akapit, przyciski) kończy się na ok. 27% szerokości GRAFIKI (nie okna) — sprawdzone przez spróbkowanie rzeczywistych pikseli źródła pod tekstem, nie tylko wartości maski. Drugi przystanek (27%) trzyma tam alfę nisko, żeby nie odbierać kontrastu tekstowi. Od 27% do 50% rampa jest krótsza niż poprzednio (było 30→78%) — obraz dochodzi do pełnej barwy szybciej, więc większa jego część wygląda żywo, a nie wypłowiale. */ -webkit-mask-image: linear-gradient(90deg, transparent 0%, rgba(0,0,0,0.12) 27%, #000 50%); mask-image: linear-gradient(90deg, transparent 0%, rgba(0,0,0,0.12) 27%, #000 50%); } /* --- Hero na wąskich ekranach --------------------------------------------- Na telefonie ilustracja nie może leżeć ZA tekstem: przy 420 px min-width rozdyma ją tak, że tęcza wchodzi pod nagłówek, a wzgórze zasłania statystyki. Schodzi więc do układu normalnego, POD tekst. */ @media (max-width: 56rem) { .hero { display: flex; flex-direction: column; min-height: 0; } .hero > .container { order: 1; } .hero__art { order: 2; position: relative; left: auto; bottom: auto; z-index: 0; width: 118%; min-width: 0; margin-top: var(--sp-5); margin-left: -9%; transform: none; } .hero__copy { max-width: 34rem; margin-inline: auto; text-align: center; padding-bottom: 0; } .hero__actions { justify-content: center; } } /* Tekst siedzi przy górnej krawędzi; wysokość sekcji robi min-height sceny, a nie dolny odstęp tekstu — dzięki temu przyciski nie wchodzą na wzgórze niezależnie od tego, jak długi jest nagłówek. */ .hero__copy { position: relative; max-width: 30rem; padding-block: clamp(2.5rem, 1.5rem + 3vw, 4rem) 0; } .hero__title { font-size: var(--fs-hero); line-height: var(--lh-tight); margin-bottom: var(--sp-5); } .hero__lead { max-width: 27rem; font-size: var(--fs-lead); color: var(--c-ink); margin-bottom: var(--sp-6); } .hero__actions { display: flex; flex-wrap: wrap; gap: var(--sp-3); } /* ========================================================================== 05. Pasek statystyk ========================================================================== */ /* Biała karta z cieniem, nachodząca na dolną krawędź hero — jak w mockupie. Ujemny margines ciągnie kartę w górę; z-index pilnuje, żeby leżała NAD ilustracją hero (obie sekcje to zwykłe rodzeństwo w przepływie, więc bez tego kolejność malowania i tak by to zapewniła, ale ustawiamy jawnie, żeby nie zależeć od przypadku przy przyszłych zmianach). */ .stats { position: relative; z-index: 2; margin-top: -4.5rem; padding-bottom: var(--section-y); } .stats__card { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--sp-4); padding: var(--sp-6) var(--sp-5); background: var(--c-white); border-radius: var(--r-xl); box-shadow: var(--sh-xl); } .stat { display: flex; align-items: center; justify-content: center; gap: var(--sp-4); padding-inline: var(--sp-4); } /* Cienkie kreski między kolumnami — bez pustych elementów w HTML */ .stat + .stat { border-left: 1px solid var(--c-line); } .stat__icon { flex-shrink: 0; width: 2.75rem; height: 2.75rem; } .stat:nth-child(1) .stat__icon { color: var(--c-magenta); } .stat:nth-child(2) .stat__icon { color: var(--c-blue); } .stat:nth-child(3) .stat__icon { color: var(--c-green); } .stat__num { display: block; font-size: var(--fs-stat); font-weight: var(--fw-bold); line-height: 1; color: var(--c-navy); letter-spacing: -0.03em; } .stat__label { display: block; margin-top: var(--sp-1); font-size: var(--fs-small); font-weight: var(--fw-medium); color: var(--c-ink-light); line-height: 1.35; } .stat__sub { display: block; font-size: var(--fs-small); font-weight: var(--fw-medium); color: var(--c-ink-light); line-height: 1.35; } /* ========================================================================== 06. Gdzie nas znajdziesz ========================================================================== */ .location { padding-block: var(--section-y); background: var(--c-cream); } /* Karta i mapa są dwiema kolumnami siatki, nie kartą nachodzącą na pełnoekranowe tło za nią — patrz obszerny komentarz w HTML przy po tym, jak wersja z ręcznie liczoną "bezpieczną strefą" viewBox (żeby ominąć nieprzezroczystą kartę) za każdym razem, na innej szerokości ekranu, jednak na nią nachodziła. Kolumny siatki strukturalnie się nie nakładają, więc ten problem nie może wrócić. Wzorzec współdzielony z .split / .founder__grid / .help__grid — patrz też media query niżej. */ .location__grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr); gap: clamp(2rem, 1rem + 4vw, 4rem); align-items: center; } /* Poglądowa grafika w stylu ilustracji hero, nie dosłowna kartografia — wtopiona w tło sekcji, bez własnego tła/ramki. Jeden układ współrzędnych starcza na każdą szerokość ekranu, bo skaluje się zwykłym CSS (width: 100% + aspect-ratio dopasowany do viewBox) — bez przełączania wersji w media query. */ .location__map { width: 100%; height: auto; aspect-ratio: 9 / 7; pointer-events: none; user-select: none; } .location__forest ellipse { fill: var(--c-green-soft); } .location__trees polygon, .location__trees rect { fill: var(--c-green-text); opacity: 0.55; } .location__route { fill: none; stroke: var(--c-violet); stroke-width: 5; stroke-linecap: round; stroke-dasharray: 2 16; opacity: 0.6; } .location__dot { fill: var(--c-navy); stroke: var(--c-cream); stroke-width: 5; } .location__pin-shape { fill: var(--c-magenta); } .location__pin-dot { fill: var(--c-white); } /* Delikatny "ping" wokół pinezki Izabelina — sama animacja jest już globalnie wyłączana przez prefers-reduced-motion (patrz sekcja 14). */ .location__ping { fill: var(--c-magenta); opacity: 0.35; transform-box: fill-box; transform-origin: center; animation: location-ping 2.4s cubic-bezier(0.4, 0, 0.3, 1) infinite; } @keyframes location-ping { 0% { transform: scale(1); opacity: 0.35; } 75%, 100% { transform: scale(2.1); opacity: 0; } } .location__label { font-family: var(--f-sans); font-weight: var(--fw-bold); font-size: 30px; text-anchor: middle; fill: var(--c-navy); opacity: 0.85; } .location__badge rect { fill: var(--c-white); } .location__badge text { font-family: var(--f-sans); font-weight: var(--fw-bold); font-size: 27px; text-anchor: middle; dominant-baseline: middle; fill: var(--c-magenta-text); } .location__card { padding: var(--sp-6); background: var(--c-white); border-radius: var(--r-xl); box-shadow: var(--sh-xl); } .location__title { font-size: var(--fs-h2); margin-bottom: var(--sp-4); } .location__text { margin-bottom: var(--sp-5); color: var(--c-ink); } /* Kreska po lewej zamiast obwódki dookoła — mniej pudełkowato niż .footer__contact, a i tak wyraźnie odcina adres od reszty karty. */ .location__address { padding: var(--sp-4) var(--sp-5); margin-bottom: var(--sp-5); font-style: normal; line-height: 1.7; color: var(--c-navy); background: var(--c-cream); border-left: 4px solid var(--c-magenta); border-radius: var(--r-md); } .location__address strong { display: block; margin-bottom: var(--sp-1); font-size: var(--fs-small); font-weight: var(--fw-bold); text-transform: uppercase; letter-spacing: 0.04em; color: var(--c-magenta-text); } .location__distance { display: flex; align-items: center; gap: var(--sp-2); margin-bottom: var(--sp-6); font-size: var(--fs-small); font-weight: var(--fw-medium); color: var(--c-ink-light); } .location__distance svg { flex-shrink: 0; width: 1.2rem; height: 1.2rem; color: var(--c-magenta-text); } /* ========================================================================== 07. Układ dwukolumnowy sekcji (02 / 04 / 06) ========================================================================== */ /* Lewa kolumna to numer porządkowy, nagłówek i wprowadzenie; prawa — właściwa treść. Ten sam wzorzec powtarza się w trzech sekcjach. */ .split { display: grid; grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.7fr); gap: clamp(2rem, 1rem + 4vw, 4.5rem); align-items: start; } .split__title { font-size: var(--fs-h2); margin-bottom: var(--sp-4); } .split__text { font-size: var(--fs-body); color: var(--c-ink); } /* ========================================================================== 08. Filary działalności ========================================================================== */ /* Bez ramek i cieni — kolumny rozdzielają cienkie kreski, tak jak w projekcie. Kreska idzie z border-left, więc nie potrzeba pustych elementów w HTML. */ .pillars { display: grid; grid-template-columns: repeat(3, 1fr); } .pillar { display: flex; flex-direction: column; padding-inline: clamp(1rem, 0.4rem + 1.6vw, 2rem); } .pillar + .pillar { border-left: 1px solid var(--c-line); } .pillar--kindergarten { --akcent: var(--c-blue-text); --akcent-jasny: var(--c-number-blue); } .pillar--school { --akcent: var(--c-magenta-text); --akcent-jasny: var(--c-number-pink); } .pillar--clinic { --akcent: var(--c-green-text); --akcent-jasny: var(--c-number-green); } .pillar__num { display: block; margin-bottom: var(--sp-4); font-size: clamp(2rem, 1.4rem + 1.8vw, 2.8rem); font-weight: var(--fw-bold); line-height: 1; color: var(--akcent-jasny); } .pillar__icon { width: 2.6rem; height: 2.6rem; margin-bottom: var(--sp-4); color: var(--c-navy); } .pillar__title { font-size: 1.1rem; margin-bottom: var(--sp-3); } .pillar__text { flex-grow: 1; margin-bottom: var(--sp-5); font-size: var(--fs-small); color: var(--c-ink); } .pillar .arrow-link { align-self: flex-start; font-size: var(--fs-small); color: var(--akcent); } /* ========================================================================== 09. Historia Ooniwerka ========================================================================== */ .founder { padding-block: var(--section-y); background: var(--c-lavender); } .founder__grid { display: grid; grid-template-columns: minmax(0, 0.75fr) minmax(0, 1.25fr); gap: clamp(2rem, 1rem + 4vw, 4.5rem); align-items: center; } .founder__photo { width: 100%; aspect-ratio: 4 / 5; object-fit: cover; /* Zdjęcie jest pionowe (470×649) — kadr podciągnięty do góry trzyma twarze w polu widzenia niezależnie od proporcji kontenera. */ object-position: center 18%; border-radius: var(--r-lg); } .founder__title { font-size: var(--fs-h2); margin-bottom: var(--sp-4); } .founder__text { margin-bottom: var(--sp-5); color: var(--c-ink); } .founder__text strong { color: var(--c-navy); } .founder__quote { position: relative; padding-left: 3.25rem; margin-bottom: var(--sp-4); font-size: clamp(1.15rem, 1rem + 0.7vw, 1.45rem); font-style: italic; font-weight: var(--fw-medium); line-height: 1.45; color: var(--c-navy); } /* Wartość w rem, nie w em — em odnosiłoby się do font-size pseudoelementu (3.6rem), przez co znak wylatywałby daleko ponad cytat. */ .founder__quote::before { content: "\201C"; position: absolute; top: -0.9rem; left: 0; font-size: 3.6rem; font-style: normal; line-height: 1; color: var(--c-magenta); } .founder__cite { font-size: var(--fs-small); color: var(--c-ink); } .founder__cite strong { color: var(--c-magenta-text); } /* ========================================================================== 10. Oś czasu ========================================================================== */ /* Nagłówek wyśrodkowany nad rzędem zdjęć — patrz .section-head, sekcja 02. Zdjęcia mają RÓWNĄ wysokość; postęp sygnalizują kolor kropki i opis pod spodem, nie rozmiar fotografii. */ .history { --przerwa: clamp(1rem, 0.4rem + 1.6vw, 2rem); display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--przerwa); /* Globalny reset `ul { list-style: none }` nie obejmuje
    — bez tego przeglądarka dokładała własną numerację 1./2./3. PRZED kolorową kropką z numerem, dając podwójną numerację. */ list-style: none; } .history__photo { width: 100%; height: clamp(10rem, 6rem + 12vw, 15rem); object-fit: cover; border-radius: var(--r-md); margin-bottom: var(--sp-5); } /* Kropka na osi plus kreska biegnąca do następnego punktu. Ostatni punkt nie ma dokąd prowadzić, więc w HTML po prostu nie ma tam kreski. Kolor przychodzi przez zmienną --kropka ustawioną inline w HTML na każdym .history__dot, więc nie potrzeba osobnej klasy modyfikatora na item. */ .history__marker { display: flex; align-items: center; margin-bottom: var(--sp-4); } /* Wypełnione kółko z białym numerem w środku — nie pusta kropka. */ .history__dot { display: grid; place-items: center; flex-shrink: 0; width: 1.75rem; height: 1.75rem; font-size: 0.85rem; font-weight: var(--fw-bold); color: var(--c-white); background: var(--kropka); border-radius: 50%; } /* Ujemny margines przeciąga kreskę przez przerwę między kolumnami, dzięki czemu oś wygląda na ciągłą, a nie pociętą na odcinki. Kolor jest stały (--c-line), niezależny od koloru sąsiednich kropek. */ .history__line { flex-grow: 1; height: 2px; margin-left: var(--sp-2); margin-right: calc(-1 * var(--przerwa)); background-image: linear-gradient(90deg, var(--c-line) 60%, transparent 60%); background-size: 8px 2px; background-repeat: repeat-x; } .history__step { margin-bottom: var(--sp-2); font-size: 1.05rem; } .history__text { font-size: var(--fs-small); color: var(--c-ink); } /* ========================================================================== 11. Możesz być częścią tej historii ========================================================================== */ .help { position: relative; isolation: isolate; overflow: hidden; padding-block: var(--section-y); background: var(--g-help); color: var(--c-white); } /* Samo tło z chmur (assets/img/chmury.webp), bez łuków tęczy — inny plik niż w hero, nie przycięty kadr tego samego. Wsunięte w prawy dolny róg pasa i wygaszane od lewej, żeby biały tekst stał na jednolitym fiolecie. */ .help__art { position: absolute; right: -8%; bottom: -55%; z-index: -1; width: 62%; min-width: 34rem; max-width: none; opacity: 0.8; pointer-events: none; -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 38%); mask-image: linear-gradient(90deg, transparent 0, #000 38%); } .help__grid { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, 0.9fr); gap: clamp(2rem, 1rem + 4vw, 4rem); align-items: center; } .help__title { font-size: var(--fs-h2); color: var(--c-white); margin-bottom: var(--sp-4); } .help__text { max-width: 26rem; margin-bottom: var(--sp-6); color: rgba(255, 255, 255, 0.92); } /* Sposoby wsparcia leżą jeden pod drugim, ikona po lewej — jak w projekcie. */ .help__ways { display: flex; flex-direction: column; gap: var(--sp-2); } .help-way { display: flex; align-items: center; gap: var(--sp-4); padding: var(--sp-3) var(--sp-4); font-size: var(--fs-small); font-weight: var(--fw-bold); line-height: 1.35; color: var(--c-white); text-decoration: none; border-radius: var(--r-md); transition: background-color var(--t-base), transform var(--t-base); } .help-way:hover { background: rgba(255, 255, 255, 0.14); transform: translateX(4px); } .help-way__icon { flex-shrink: 0; width: 2.4rem; height: 2.4rem; } /* ========================================================================== 12. Fundacja w mediach ========================================================================== */ .media__hook { margin-bottom: var(--sp-2); font-weight: var(--fw-bold); color: var(--c-magenta-text); } /* , nie
    — miniatura musi być osiągalna z klawiatury. */ .media__thumb { position: relative; display: block; border-radius: var(--r-lg); overflow: hidden; box-shadow: var(--sh-lg); } .media__thumb img { width: 100%; aspect-ratio: 16 / 10; object-fit: cover; transition: transform var(--t-slow); } .media__thumb:hover img { transform: scale(1.04); } .media__play { position: absolute; top: 50%; left: 50%; display: grid; place-items: center; width: 4.5rem; height: 4.5rem; border: 2px solid rgba(255, 255, 255, 0.9); border-radius: 50%; background: rgba(255, 255, 255, 0.15); backdrop-filter: blur(2px); transform: translate(-50%, -50%); transition: background-color var(--t-base), transform var(--t-base); } .media__play svg { width: 1.4rem; height: 1.4rem; color: var(--c-white); } .media__thumb:hover .media__play { background: rgba(255, 255, 255, 0.3); transform: translate(-50%, -50%) scale(1.07); } /* ========================================================================== 13. Stopka ========================================================================== */ .footer { position: relative; isolation: isolate; overflow: hidden; padding-block: var(--sp-8) var(--sp-6); color: rgba(255, 255, 255, 0.82); background: var(--g-footer); } /* Analogicznie w stopce — pod linią z prawami autorskimi ma zostać czysty fiolet, nie chmury. */ .footer__art { position: absolute; right: -10%; bottom: -56%; z-index: -1; width: 50%; min-width: 28rem; max-width: none; opacity: 0.75; pointer-events: none; -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 42%); mask-image: linear-gradient(90deg, transparent 0, #000 42%); } .footer__grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr) minmax(0, 0.8fr); gap: var(--sp-6); } .footer__socials { display: flex; gap: var(--sp-3); margin-top: var(--sp-5); } .footer__social { display: grid; place-items: center; width: 2.4rem; height: 2.4rem; color: var(--c-white); background: var(--c-magenta); border-radius: 50%; transition: transform var(--t-base), background-color var(--t-base); } .footer__social svg { width: 1.1rem; height: 1.1rem; } .footer__social:hover { background: var(--c-white); color: var(--c-magenta-text); transform: translateY(-3px); } .footer__contact { font-size: var(--fs-small); line-height: 1.9; font-style: normal; /*
    domyślnie renderuje się kursywą */ } .footer__contact strong { display: block; margin-bottom: var(--sp-2); color: var(--c-white); font-size: var(--fs-body); } .footer__contact a { color: inherit; text-decoration: none; border-bottom: 1px solid rgba(255, 255, 255, 0.3); transition: border-color var(--t-base), color var(--t-base); } .footer__contact a:hover { color: var(--c-white); border-bottom-color: var(--c-white); } .footer__links { display: flex; flex-direction: column; gap: var(--sp-2); font-size: var(--fs-small); } .footer__links a { color: inherit; text-decoration: none; transition: color var(--t-base); } .footer__links a:hover { color: var(--c-white); } /* Logotypy unijne na białej płytce — wytyczne wymagają pełnej czytelności znaków. */ .footer__eu { margin-top: var(--sp-7); padding: var(--sp-4) var(--sp-5); background: var(--c-white); border-radius: var(--r-md); } .footer__eu img { width: 100%; max-width: 32rem; margin-inline: auto; } .footer__bottom { display: flex; flex-wrap: wrap; justify-content: space-between; gap: var(--sp-3); margin-top: var(--sp-5); padding-top: var(--sp-5); border-top: 1px solid rgba(255, 255, 255, 0.18); font-size: 0.8rem; } /* ========================================================================== 14. Podstrona: Fundacja (nagłówek, submenu, panele, galeria) ========================================================================== */ /* --- Nagłówek podstrony -------------------------------------------------- */ .page-hero { padding-block: clamp(2.5rem, 1.5rem + 4vw, 4.5rem) clamp(1.5rem, 1rem + 2vw, 2.5rem); background: var(--c-lavender); text-align: center; } .page-hero__title { font-size: var(--fs-h2); margin-bottom: var(--sp-4); } .page-hero__lead { max-width: 40rem; margin-inline: auto; font-size: var(--fs-lead); color: var(--c-ink); } /* --- Submenu (zakładki) -------------------------------------------------- */ /* Przykleja się tuż pod nagłówkiem głównym (jego min-height to 4.75rem). */ .subnav { position: sticky; top: 4.75rem; z-index: 50; background: rgba(255, 255, 255, 0.94); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); border-bottom: 1px solid var(--c-line); } .subnav__inner { display: flex; gap: var(--sp-2); justify-content: center; flex-wrap: wrap; padding-block: var(--sp-3); } .subnav__tab { display: inline-flex; align-items: center; gap: var(--sp-2); padding: 0.6rem 1.15rem; font-size: var(--fs-small); font-weight: var(--fw-bold); color: var(--c-ink); text-decoration: none; white-space: nowrap; border-radius: var(--r-pill); border: 2px solid transparent; transition: background-color var(--t-base), color var(--t-base), border-color var(--t-base); } .subnav__tab svg { width: 1.15rem; height: 1.15rem; flex-shrink: 0; } .subnav__tab:hover { color: var(--c-magenta-text); background: var(--c-magenta-soft); } /* Aktywna zakładka — klasę dokłada skrypt. Bez JS żadna nie jest aktywna, a wszystkie panele i tak są widoczne. */ .subnav__tab.is-active { color: var(--c-white); background: var(--c-magenta-btn); } /* --- Panele -------------------------------------------------------------- */ .subpanels { padding-block: var(--section-y); } .subpanel { padding-block: var(--sp-2); } /* Skrypt dokłada [hidden] nieaktywnym panelom; deklarujemy jawnie, żeby ewentualne display na .subpanel nie nadpisało atrybutu hidden. */ .subpanel[hidden] { display: none; } /* Bez JavaScriptu wszystkie panele stoją jeden pod drugim — wtedy delikatny separator porządkuje przejścia między sekcjami. Przy włączonym JS widać tylko jeden panel, więc separator jest zbędny (i celowo wyłączony). */ html:not(.js) .subpanel + .subpanel { margin-top: var(--sp-7); padding-top: var(--sp-8); border-top: 1px solid var(--c-line); } /* Wariant z pełnoszerokimi pasami kolorów (np. Przedszkole): panele niosą pełne sekcje `.section` z własnym tłem i paddingiem, więc kontenery paneli NIE dokładają własnego odstępu — inaczej nad kolorowym pasem powstałby biały prześwit. Kolorowe pasy same porządkują przejścia, więc separator no-JS też jest zbędny. */ .subpanels--bands { padding-block: 0; } .subpanels--bands .subpanel { padding-block: 0; } html:not(.js) .subpanels--bands .subpanel + .subpanel { margin-top: 0; padding-top: 0; border-top: 0; } /* Pierwsza sekcja w każdym panelu jest biała — daje oddech pod przyklejonym paskiem zakładek, zanim pojawią się kolorowe pasy. */ .subpanels--bands .subpanel > .section:first-child { background: var(--c-white); } /* --- Panel: O fundacji --------------------------------------------------- */ .about { display: grid; grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr); gap: clamp(2rem, 1rem + 4vw, 4.5rem); align-items: start; } /* Akapit otwierający — wyróżniony kolorem, nie rozmiarem. Cała narracja panelu „O fundacji" trzyma jeden stopień pisma (--fs-body); większe są tylko śródtytuły i dwa hasła (motto, slogan), wszystkie w --fs-h3. */ .about__lead { font-size: var(--fs-body); color: var(--c-navy); margin-bottom: var(--sp-5); } .about__body p { margin-bottom: var(--sp-5); color: var(--c-ink); } .about__body strong { color: var(--c-navy); } .about__lead strong { color: var(--c-magenta-text); } /* Motto nad leadem — krótkie hasło otwierające sekcję. Selektor z „p." celowo: samo .about__motto przegrywało specyficznością z .about__body p i hasło traciło firmową magentę. */ p.about__motto { font-size: var(--fs-h3); font-style: italic; font-weight: var(--fw-bold); color: var(--c-magenta-text); margin-bottom: var(--sp-4); } /* Śródtytuły dzielą długą narrację na skanowalne sekcje. */ .about__body h3 { font-size: var(--fs-h3); color: var(--c-navy); margin-top: var(--sp-7); margin-bottom: var(--sp-4); } /* Blok zamykający — wyróżniony delikatną linią i hasłem. */ .about__closing { margin-top: var(--sp-7); padding-top: var(--sp-6); border-top: 1px solid var(--c-line); } .about__closing p:last-child { margin-bottom: 0; } /* Jak wyżej — bez „p." kolor hasła przykrywał .about__body p. */ p.about__slogan { font-size: var(--fs-h3); font-weight: var(--fw-black); line-height: var(--lh-heading); color: var(--c-magenta-text); } .about__quote { position: relative; padding-left: 3.25rem; margin-block: var(--sp-6); font-size: clamp(1.15rem, 1rem + 0.7vw, 1.45rem); font-style: italic; font-weight: var(--fw-medium); line-height: 1.45; color: var(--c-navy); } .about__quote::before { content: "\201C"; position: absolute; top: -0.9rem; left: 0; font-size: 3.6rem; font-style: normal; line-height: 1; color: var(--c-magenta); } .about__cite { font-size: var(--fs-small); color: var(--c-ink); } .about__cite strong { color: var(--c-magenta-text); } .about__figure { margin: 0; position: sticky; top: 8rem; /* pod przyklejonym nagłówkiem + submenu */ } .about__figure img { width: 100%; aspect-ratio: 4 / 5; object-fit: cover; object-position: center 18%; border-radius: var(--r-lg); box-shadow: var(--sh-lg); } /* Drugie zdjęcie w kolumnie — ściana z logo pod portretem założycielki. Kadr 4:3 odróżnia je od portretu i skraca kolumnę, żeby przyklejanie (position: sticky) nadal miało sens. */ .about__figure img.about__logo { width: 100%; margin-top: var(--sp-5); aspect-ratio: 4 / 3; object-fit: cover; border-radius: var(--r-lg); box-shadow: var(--sh-lg); display: block; } .about__figure figcaption { margin-top: var(--sp-3); font-size: var(--fs-small); line-height: 1.4; color: var(--c-ink-light); text-align: center; } .about__support { margin-top: var(--sp-8); padding-top: var(--sp-7); border-top: 1px solid var(--c-line); } .about__support-title { font-size: var(--fs-h3); margin-bottom: var(--sp-5); } .support-ways { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--sp-4); } .support-way { display: flex; align-items: center; gap: var(--sp-3); padding: var(--sp-4) var(--sp-5); font-weight: var(--fw-bold); color: var(--c-navy); text-decoration: none; background: var(--c-cream); border-radius: var(--r-lg); transition: transform var(--t-base), box-shadow var(--t-base); } .support-way:hover { transform: translateY(-3px); box-shadow: var(--sh-md); } .support-way__icon { flex-shrink: 0; width: 2.2rem; height: 2.2rem; color: var(--c-magenta); } .support-way__label { flex-grow: 1; font-size: var(--fs-small); line-height: 1.3; } .support-way__go { flex-shrink: 0; color: var(--c-magenta-text); transition: transform var(--t-base); } .support-way:hover .support-way__go { transform: translateX(3px); } /* --- Panel: Sprawozdania ------------------------------------------------- */ .reports__grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--sp-4); } /* Pojedynczy dokument (np. statut) — karta nie rozjeżdża się na całą szerokość ani nie gubi w siatce czterokolumnowej. */ .reports__grid--single { grid-template-columns: minmax(0, 26rem); justify-content: center; } .report-card { display: flex; flex-direction: column; align-items: flex-start; gap: var(--sp-2); padding: var(--sp-5); background: var(--c-white); border: 1px solid var(--c-line); border-radius: var(--r-lg); text-decoration: none; transition: transform var(--t-base), box-shadow var(--t-base), border-color var(--t-base); } .report-card:hover { transform: translateY(-4px); box-shadow: var(--sh-lg); border-color: transparent; } .report-card__icon { width: 2.4rem; height: 2.4rem; color: var(--c-magenta); margin-bottom: var(--sp-2); } .report-card__year { font-size: 1.75rem; font-weight: var(--fw-black); color: var(--c-navy); line-height: 1; } .report-card__label { font-size: var(--fs-small); color: var(--c-ink-light); } .report-card__cta { display: inline-flex; align-items: center; gap: var(--sp-1); margin-top: var(--sp-3); font-size: var(--fs-small); font-weight: var(--fw-bold); color: var(--c-magenta-text); } .report-card__cta svg { width: 1.05rem; height: 1.05rem; } /* --- Panel: Galeria ------------------------------------------------------ */ .gallery__grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--sp-3); } .gallery__item { display: block; position: relative; overflow: hidden; border-radius: var(--r-md); aspect-ratio: 4 / 3; background: var(--c-lavender); cursor: zoom-in; } .gallery__item img { width: 100%; height: 100%; object-fit: cover; transition: transform var(--t-slow); } .gallery__item::after { content: ""; position: absolute; inset: 0; background: var(--c-navy); opacity: 0; transition: opacity var(--t-base); } .gallery__item:hover img { transform: scale(1.06); } .gallery__item:hover::after { opacity: 0.12; } .gallery__item:focus-visible { outline: 3px solid var(--c-violet); outline-offset: 3px; } /* --- Lightbox ------------------------------------------------------------ */ .lightbox { position: fixed; inset: 0; z-index: 500; display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: var(--sp-2); padding: clamp(1rem, 0.5rem + 2vw, 2.5rem); background: rgba(20, 14, 45, 0.92); backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px); } .lightbox[hidden] { display: none; } .lightbox__stage { margin: 0; display: grid; place-items: center; min-width: 0; } .lightbox__img { max-width: 100%; max-height: 86vh; border-radius: var(--r-md); box-shadow: 0 20px 60px rgba(0, 0, 0, 0.5); } .lightbox__close, .lightbox__nav { display: grid; place-items: center; width: 3rem; height: 3rem; color: var(--c-white); background: rgba(255, 255, 255, 0.12); border-radius: 50%; cursor: pointer; transition: background-color var(--t-base), transform var(--t-base); } .lightbox__close svg { width: 1.3rem; height: 1.3rem; } .lightbox__nav svg { width: 1.5rem; height: 1.5rem; } .lightbox__close:hover, .lightbox__nav:hover { background: rgba(255, 255, 255, 0.25); } .lightbox__nav:hover { transform: scale(1.08); } .lightbox__close { position: absolute; top: clamp(1rem, 0.5rem + 2vw, 2rem); right: clamp(1rem, 0.5rem + 2vw, 2rem); } .lightbox__counter { position: absolute; bottom: clamp(0.75rem, 0.5rem + 1vw, 1.5rem); left: 50%; transform: translateX(-50%); font-size: var(--fs-small); font-weight: var(--fw-bold); color: rgba(255, 255, 255, 0.85); } /* ========================================================================== 16. Podstrona: Przedszkole (treść + oferta + opłaty) ========================================================================== */ /* --- Układ tekst + zdjęcie (reużywalny) ---------------------------------- */ .prose-media { display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(0, 0.85fr); gap: clamp(2rem, 1rem + 4vw, 4.5rem); align-items: center; } /* Wariant z odwróconą kolejnością kolumn — zdjęcie po lewej. Na wąskich ekranach obie wersje i tak układają się w jedną kolumnę (patrz media). */ .prose-media--reverse .prose-media__figure { order: -1; } .prose-media__title { font-size: var(--fs-h2); margin-bottom: var(--sp-4); } .prose-media__body p { margin-bottom: var(--sp-4); color: var(--c-ink); } .prose-media__body strong { color: var(--c-navy); } .prose-media__subhead { margin-top: var(--sp-5); margin-bottom: var(--sp-3); font-weight: var(--fw-bold); color: var(--c-navy); } .prose-media__note { margin-top: var(--sp-4); font-size: var(--fs-small); color: var(--c-ink-light); } .prose-media__figure { margin: 0; } .prose-media__figure img { width: 100%; height: auto; border-radius: var(--r-lg); box-shadow: var(--sh-lg); } /* --- Nasze podejście — siatka kafelków ------------------------------------ Białe karty na barwnym tle sekcji. Auto-fit utrzymuje 1–3 kolumny zależnie od szerokości, bez sztywnych breakpointów. */ .approach { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 17rem), 1fr)); gap: var(--sp-5); } .approach__card { display: flex; flex-direction: column; padding: clamp(1.5rem, 1.1rem + 1.4vw, 2.1rem); background: var(--c-white); border: 1px solid var(--c-line); border-radius: var(--r-lg); box-shadow: var(--sh-sm); transition: transform var(--t-base), box-shadow var(--t-base); } .approach__card:hover { transform: translateY(-4px); box-shadow: var(--sh-md); } .approach__icon { display: inline-flex; align-items: center; justify-content: center; width: 3.25rem; height: 3.25rem; margin-bottom: var(--sp-4); border-radius: var(--r-md); background: var(--c-magenta-soft); color: var(--c-magenta-text); } .approach__icon svg { width: 1.8rem; height: 1.8rem; } /* Rotacja barw akcentu — spójna z żywą paletą marki. */ .approach__card:nth-child(4n+2) .approach__icon { background: var(--c-blue-soft); color: var(--c-blue-text); } .approach__card:nth-child(4n+3) .approach__icon { background: var(--c-green-soft); color: var(--c-green-text); } .approach__card:nth-child(4n+4) .approach__icon { background: var(--c-violet-soft); color: var(--c-violet); } .approach__card h3 { font-size: var(--fs-h3); color: var(--c-navy); margin-bottom: var(--sp-3); } .approach__card p { font-size: var(--fs-small); line-height: var(--lh-body); color: var(--c-ink); } /* Zdanie zamykające pod kafelkami — wyśrodkowane, z wyróżnionym hasłem. */ .approach__closing { max-width: 46rem; margin: var(--sp-8) auto 0; text-align: center; color: var(--c-ink); } .approach__slogan { margin-top: var(--sp-4); font-size: clamp(1.3rem, 1.1rem + 0.9vw, 1.7rem); font-weight: var(--fw-black); line-height: var(--lh-heading); color: var(--c-magenta-text); } /* --- Lista z „ptaszkami" -------------------------------------------------- */ .feature-list { display: flex; flex-direction: column; gap: var(--sp-3); } .feature-list li { display: flex; align-items: flex-start; gap: var(--sp-3); color: var(--c-ink); } .feature-list svg { flex-shrink: 0; width: 1.4rem; height: 1.4rem; margin-top: 0.15rem; color: var(--c-magenta); } .feature-list--compact { gap: var(--sp-2); } .feature-list--compact li { font-size: var(--fs-small); } .feature-list--compact svg { width: 1.2rem; height: 1.2rem; } /* Wariant „karty" — każdy punkt na białym kaflu z cieniem. Używany, gdy lista stoi samodzielnie w kolumnie (np. „Jak wygląda nauka" na szkole) i zwykłe wiersze wyglądałyby zbyt ubogo. */ .feature-list--cards { gap: var(--sp-3); } .feature-list--cards li { padding: var(--sp-4) var(--sp-5); background: var(--c-white); border-radius: var(--r-lg); box-shadow: var(--sh-sm); } .feature-list--cards strong { color: var(--c-navy); } /* --- Misja (lista + wyróżniony akapit) ----------------------------------- */ .mission { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: clamp(2rem, 1rem + 4vw, 4rem); align-items: start; } .mission__quote { position: relative; padding-left: 3.25rem; margin-bottom: var(--sp-4); font-size: clamp(1.15rem, 1rem + 0.7vw, 1.4rem); font-style: italic; font-weight: var(--fw-medium); line-height: 1.45; color: var(--c-navy); } .mission__quote::before { content: "\201C"; position: absolute; top: -0.9rem; left: 0; font-size: 3.6rem; font-style: normal; line-height: 1; color: var(--c-magenta); } .mission__aside p { color: var(--c-ink); } /* Kolumny tekstowe misji — pełne akapity w układzie dwukolumnowym. */ .mission__body p { margin-bottom: var(--sp-4); color: var(--c-ink); } .mission__body p:last-child { margin-bottom: 0; } /* Zdanie zamykające misję — wyśrodkowane, wyróżnione linią i pogrubieniem. */ .mission__banner { max-width: 52rem; margin: clamp(2rem, 1.4rem + 2vw, 3.5rem) auto 0; padding-top: var(--sp-6); border-top: 1px solid var(--c-line); text-align: center; } .mission__banner p { font-size: clamp(1.15rem, 1rem + 0.7vw, 1.4rem); font-weight: var(--fw-bold); line-height: 1.45; color: var(--c-navy); } /* --- Terapie (kafelki) --------------------------------------------------- */ .therapies { display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--sp-3); } .therapy { display: flex; align-items: center; gap: var(--sp-3); padding: var(--sp-4) var(--sp-4); font-weight: var(--fw-bold); color: var(--c-navy); background: var(--c-white); border-radius: var(--r-md); box-shadow: var(--sh-sm); } .therapy svg { flex-shrink: 0; width: 1.3rem; height: 1.3rem; color: var(--c-magenta); } /* Akapit tuż po siatce chipów potrzebuje oddechu — inaczej „przykleja się". */ .therapies + p { margin-top: var(--sp-5); } /* --- Zdjęcia sal: pozioma, przewijana galeria ---------------------------- */ .rooms { display: flex; gap: var(--sp-4); /* Poziome przewijanie z zatrzymywaniem na kolejnych kadrach. */ overflow-x: auto; scroll-snap-type: x mandatory; scroll-padding-inline: var(--sp-1); padding-bottom: var(--sp-3); /* Miejsce na cień kart, żeby nie był ucinany przez kontener przewijania. */ margin-inline: calc(var(--sp-1) * -1); padding-inline: var(--sp-1); scrollbar-color: var(--c-magenta) transparent; } .rooms li { flex: 0 0 clamp(16rem, 42vw, 26rem); scroll-snap-align: start; } .rooms img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; border-radius: var(--r-lg); box-shadow: var(--sh-md); display: block; } /* --- Pakiety / czesne ---------------------------------------------------- */ .plans { display: grid; grid-template-columns: repeat(2, 1fr); gap: var(--sp-5); max-width: 52rem; margin-inline: auto; } /* Jeden pakiet (szkoła) — kolumna zawężona i wyśrodkowana, żeby karta nie rozpychała się na całą szerokość. */ .plans--single { grid-template-columns: minmax(0, 26rem); justify-content: center; max-width: none; } .plan { position: relative; padding: var(--sp-6); background: var(--c-white); border: 1px solid var(--c-line); border-radius: var(--r-xl); box-shadow: var(--sh-md); } /* Wyróżniony pakiet — różowa obwódka, żeby odróżnić dłuższą opiekę. */ .plan--featured { border-color: var(--c-magenta); border-width: 2px; } .plan__badge { display: inline-block; margin-bottom: var(--sp-4); padding: 0.3rem 0.85rem; font-size: var(--fs-small); font-weight: var(--fw-bold); color: var(--c-magenta-text); background: var(--c-magenta-soft); border-radius: var(--r-pill); } .plan__hours { display: flex; align-items: center; gap: var(--sp-2); font-weight: var(--fw-medium); color: var(--c-ink-light); } .plan__hours svg { width: 1.15rem; height: 1.15rem; } .plan__price { margin-block: var(--sp-2) var(--sp-5); font-size: 2.4rem; font-weight: var(--fw-black); color: var(--c-navy); line-height: 1; } .plan__price span { font-size: var(--fs-small); font-weight: var(--fw-medium); color: var(--c-ink-light); margin-left: var(--sp-2); } .plan__list { display: flex; flex-direction: column; gap: var(--sp-3); } .plan__list li { display: flex; align-items: flex-start; gap: var(--sp-3); font-size: var(--fs-small); color: var(--c-ink); } .plan__list svg { flex-shrink: 0; width: 1.15rem; height: 1.15rem; margin-top: 0.1rem; color: var(--c-green-text); } .plans__note { max-width: 46rem; margin: var(--sp-6) auto 0; text-align: center; font-size: var(--fs-small); color: var(--c-ink-light); } .plans__note strong { color: var(--c-magenta-text); } /* --- Wyżywienie ---------------------------------------------------------- */ .meals { display: flex; gap: var(--sp-5); max-width: 52rem; margin: var(--sp-7) auto 0; padding: var(--sp-6); background: var(--c-white); border-radius: var(--r-xl); box-shadow: var(--sh-md); } .meals__icon { flex-shrink: 0; width: 2.75rem; height: 2.75rem; color: var(--c-magenta); } .meals__title { font-size: var(--fs-h3); margin-bottom: var(--sp-2); } .meals__body p { color: var(--c-ink); margin-bottom: var(--sp-3); } .meals__prices { display: flex; flex-direction: column; gap: var(--sp-2); font-size: var(--fs-small); color: var(--c-ink); } .meals__prices strong { display: inline-block; min-width: 3.2rem; color: var(--c-magenta-text); font-weight: var(--fw-black); } /* --- Nasza przestrzeń: długa narracja + przyklejone zdjęcie (2 kolumny) --- */ .space { display: grid; grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr); gap: clamp(2rem, 1rem + 4vw, 4.5rem); align-items: start; } /* Bez font-size tytuł spadał do domyślnych 24 px przeglądarki i był wyraźnie mniejszy niż nagłówki pozostałych sekcji na stronie. */ .space__title { font-size: var(--fs-h2); margin-bottom: var(--sp-4); } /* Akapit otwierający — wyróżniony kolorem, nie rozmiarem. Cała narracja „Naszej przestrzeni" trzyma jeden stopień pisma (--fs-body); większe są tylko śródtytuły i hasło zamykające, oba w --fs-h3. */ .space__lead { font-size: var(--fs-body); color: var(--c-navy); margin-bottom: var(--sp-5); } .space__body > p { margin-bottom: var(--sp-4); color: var(--c-ink); } .space__body strong { color: var(--c-navy); } /* Śródtytuły dzielą długą narrację na skanowalne części. */ .space__body h3 { font-size: var(--fs-h3); color: var(--c-navy); margin-top: var(--sp-7); margin-bottom: var(--sp-3); } .space__body .feature-list { margin-block: var(--sp-4); } /* Blok zamykający — delikatna linia i hasło. */ .space__closing { margin-top: var(--sp-7); padding-top: var(--sp-6); border-top: 1px solid var(--c-line); } .space__closing p { margin-bottom: var(--sp-4); } .space__closing p:last-child { margin-bottom: 0; } /* „p." jest tu konieczne: w .section-head (jak-pomagamy, oferta) hasło przegrywało z .section-head p i schodziło do szarości oraz mniejszego stopnia pisma, choć na innych stronach ta sama klasa dawała magentę. */ p.space__slogan { font-size: clamp(1.2rem, 1.05rem + 0.8vw, 1.55rem); font-weight: var(--fw-black); line-height: var(--lh-heading); color: var(--c-magenta-text); } /* Wewnątrz narracji hasło schodzi do stopnia śródtytułu — poza nią (jak-pomagamy, oferta) zostaje przy własnym, większym rozmiarze. */ .space__body .space__slogan { font-size: var(--fs-h3); } /* Zdjęcie wstawione w środek narracji, nie w przyklejoną kolumnę obok. */ .space__photo { margin: var(--sp-5) 0; } .space__photo img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; border-radius: var(--r-lg); box-shadow: var(--sh-lg); } .space__photo figcaption { margin-top: var(--sp-3); font-size: var(--fs-small); line-height: 1.4; color: var(--c-ink-light); } /* Zdjęcie przyklejone — zostaje w polu widzenia, gdy tekst się przewija. */ .space__figure { margin: 0; position: sticky; top: 6rem; } /* Druga fotografia w przyklejonej kolumnie potrzebuje odstępu. */ .space__figure img + img { margin-top: var(--sp-4); } .space__figure img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; border-radius: var(--r-lg); box-shadow: var(--sh-lg); } /* ========================================================================== 17. Podstrona: Poradnia (rozwijana oferta + cennik) ========================================================================== */ /* --- Rozwijana oferta (
    /) ------------------------------ Natywny akordeon — działa też bez JavaScriptu. Domyślny znacznik ujawniania chowamy i rysujemy własny chevron obracany przez [open]. */ .accordion { max-width: 60rem; margin-inline: auto; display: flex; flex-direction: column; gap: var(--sp-3); } .acc { background: var(--c-white); border-radius: var(--r-lg); box-shadow: var(--sh-sm); overflow: hidden; } .acc summary { display: flex; align-items: center; justify-content: space-between; gap: var(--sp-4); padding: var(--sp-5); font-size: 1.1rem; font-weight: var(--fw-bold); color: var(--c-navy); cursor: pointer; list-style: none; /* Firefox: ukrywa domyślny trójkąt */ } /* WebKit/Blink: ukrywa domyślny marker ujawniania */ .acc summary::-webkit-details-marker { display: none; } .acc summary:hover { color: var(--c-magenta-text); } .acc__chevron { flex-shrink: 0; width: 1.3rem; height: 1.3rem; color: var(--c-magenta); transition: transform var(--t-base); } .acc[open] .acc__chevron { transform: rotate(90deg); } .acc__body { padding: 0 var(--sp-5) var(--sp-5); color: var(--c-ink); } .acc__lead { margin-bottom: var(--sp-4); } /* Dwie kolumny treści w rozwiniętym panelu; zwijają się na wąskich ekranach. */ .acc__cols { display: grid; grid-template-columns: repeat(2, 1fr); gap: var(--sp-5); } /* Rytm treści w rozwiniętym panelu — akapity i listy potrzebują odstępu, inaczej kolejne bloki (zwłaszcza tekst po liście) sklejają się ze sobą. */ .acc__body p, .acc__body .acc__list, .acc__body .acc__cols, .acc__body .therapies, .acc__body .feature-list { margin-bottom: var(--sp-4); } /* Ostatni element nie dokłada odstępu do paddingu panelu. */ .acc__body > :last-child { margin-bottom: 0; } .acc__body h4 { font-size: var(--fs-small); font-weight: var(--fw-bold); text-transform: uppercase; letter-spacing: 0.04em; color: var(--c-magenta-text); /* Śródtytuł oddziela sekcje treści — potrzebuje wyraźnego odstępu górnego, większego niż dolny, żeby wizualnie należał do tekstu POD nim. */ margin-top: var(--sp-6); margin-bottom: var(--sp-3); } /* Gdy śródtytuł otwiera panel, górny odstęp jest zbędny. */ .acc__body > h4:first-child { margin-top: 0; } /* Listy niosą w rozwiniętych panelach tyle samo treści co akapity, więc trzymają ten sam stopień pisma — mniejszy wyglądał jak przypis. */ .acc__list { display: flex; flex-direction: column; gap: var(--sp-2); font-size: var(--fs-body); color: var(--c-ink); } .acc__list li { position: relative; padding-left: var(--sp-4); } /* Kropka zamiast standardowego punktora — spójna z resztą listy. */ .acc__list li::before { content: ""; position: absolute; left: 0; top: 0.55em; width: 0.4rem; height: 0.4rem; border-radius: 50%; background: var(--c-magenta); } .acc__list--2col { display: grid; grid-template-columns: repeat(2, 1fr); gap: var(--sp-2) var(--sp-5); } /* --- Cennik -------------------------------------------------------------- */ .pricelist { display: grid; grid-template-columns: repeat(2, 1fr); gap: var(--sp-5); align-items: start; } .pricelist__group { padding: var(--sp-5); background: var(--c-white); border: 1px solid var(--c-line); border-radius: var(--r-lg); } .pricelist__cat { font-size: var(--fs-small); font-weight: var(--fw-bold); text-transform: uppercase; letter-spacing: 0.04em; color: var(--c-magenta-text); padding-bottom: var(--sp-3); margin-bottom: var(--sp-3); border-bottom: 2px solid var(--c-magenta-soft); } .pricelist__group ul { display: flex; flex-direction: column; gap: var(--sp-2); } .pricelist__group li { display: flex; align-items: baseline; justify-content: space-between; gap: var(--sp-4); font-size: var(--fs-small); color: var(--c-ink); } /* Kropkowana linia między nazwą a ceną — czytelne powiązanie w wierszu. */ .pricelist__group li::before { content: ""; flex: 1; order: 1; align-self: end; margin-bottom: 0.28em; border-bottom: 1px dotted var(--c-line); } .pricelist__group li > span:first-child { order: 0; } .pricelist__price { order: 2; flex-shrink: 0; font-weight: var(--fw-black); color: var(--c-navy); white-space: nowrap; } /* --- Karty metod (podstrona Oferta) -------------------------------------- */ .method-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: var(--sp-4); } .method { padding: var(--sp-6); background: var(--c-white); border: 1px solid var(--c-line); border-radius: var(--r-lg); } .method__icon { width: 2.6rem; height: 2.6rem; margin-bottom: var(--sp-4); color: var(--c-magenta-text); } .method__title { font-size: var(--fs-h3); margin-bottom: var(--sp-3); } .method p { color: var(--c-ink); font-size: var(--fs-small); line-height: 1.6; } /* ========================================================================== 18. Podstrona: Jak pomagam (formy wsparcia) ========================================================================== */ /* --- Szybki wybór (przyklejony pasek chipów) ----------------------------- */ .ways-quick { position: sticky; top: 4.75rem; /* pod przyklejonym nagłówkiem */ z-index: 50; background: rgba(255, 255, 255, 0.94); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); border-bottom: 1px solid var(--c-line); } .ways-quick__inner { display: flex; gap: var(--sp-3); justify-content: center; flex-wrap: wrap; padding-block: var(--sp-3); } .way-chip { display: inline-flex; align-items: center; gap: var(--sp-2); padding: 0.6rem 1.15rem; font-size: var(--fs-small); font-weight: var(--fw-bold); color: var(--c-navy); text-decoration: none; white-space: nowrap; border-radius: var(--r-pill); border: 2px solid transparent; transition: background-color var(--t-base), color var(--t-base); } .way-chip svg { width: 1.2rem; height: 1.2rem; color: var(--c-magenta); } .way-chip:hover { color: var(--c-magenta-text); background: var(--c-magenta-soft); } /* --- Blok darowizny (tekst + panel) -------------------------------------- */ /* Kotwica przewijana spod przyklejonego nagłówka i paska chipów. */ .donate { scroll-margin-top: 8rem; } .donate__grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: clamp(2rem, 1rem + 4vw, 4.5rem); align-items: center; } .donate__title { font-size: var(--fs-h2); margin-bottom: var(--sp-4); } .donate__body p { margin-bottom: var(--sp-4); color: var(--c-ink); } /* Hasło pod tytułem sekcji — wyróżnione kolorem i grubością, nie rozmiarem. */ .donate__subtitle { font-weight: var(--fw-bold); color: var(--c-magenta-text); } .donate__body .btn { margin-top: var(--sp-2); } /* --- Dalszy ciąg treści pod siatką (lista korzyści + zamknięcie) --------- */ .donate__more { margin-top: var(--sp-7); } /* Lista idzie przez całą szerokość kontenera, ale akapity nie — przy 1200 px wiersz miałby ponad 100 znaków i czytałoby się gorzej niż w kolumnie. */ .donate__more p { max-width: 62ch; margin-top: var(--sp-5); color: var(--c-ink); } .donate__subhead { font-size: var(--fs-h3); color: var(--c-navy); margin-bottom: var(--sp-4); } /* Siedem punktów w jednej kolumnie ciągnęłoby się przez pół ekranu. */ .donate__benefits { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--sp-3); } .donate__thanks { font-weight: var(--fw-bold); color: var(--c-navy); } /* --- Panel „Wpłać dowolną kwotę" (Siepomaga) ----------------------------- */ .donate-highlight { padding: var(--sp-8) var(--sp-6); text-align: center; background: var(--g-help); color: var(--c-white); border-radius: var(--r-2xl); box-shadow: var(--sh-lg); } /* Globalny reset ustawia svg na display: block, więc `text-align: center` z rodzica go nie dotyczy — serce trzeba wyśrodkować marginesem. */ .donate-highlight__icon { width: 3.5rem; height: 3.5rem; margin-bottom: var(--sp-4); margin-inline: auto; color: var(--c-white); } .donate-highlight__lead { font-size: var(--fs-h3); font-weight: var(--fw-black); color: var(--c-white); margin-bottom: var(--sp-2); } .donate-highlight__note { font-size: var(--fs-small); color: rgba(255, 255, 255, 0.9); } /* --- Karta z danymi do przelewu ------------------------------------------ */ .account-card { padding: var(--sp-6); background: var(--c-white); border-radius: var(--r-xl); box-shadow: var(--sh-lg); } .account-card__field + .account-card__field { margin-top: var(--sp-4); padding-top: var(--sp-4); border-top: 1px solid var(--c-line); } .account-card__label { display: block; margin-bottom: var(--sp-1); font-size: var(--fs-small); font-weight: var(--fw-bold); text-transform: uppercase; letter-spacing: 0.04em; color: var(--c-magenta-text); } .account-card__value { color: var(--c-navy); font-weight: var(--fw-medium); line-height: 1.5; } .account-card__value--number { display: block; font-size: clamp(1.05rem, 0.9rem + 0.8vw, 1.4rem); font-weight: var(--fw-black); letter-spacing: 0.02em; } /* --- Przycisk „Kopiuj" (progresywne ulepszenie) ------------------------- Bez JavaScriptu pozostaje ukryty — numer i tak jest widoczny i można go zaznaczyć. Skrypt go pokazuje i dokłada obsługę schowka. */ .copy-btn { display: none; align-items: center; gap: var(--sp-2); margin-top: var(--sp-2); padding: 0.45rem 0.9rem; font-size: var(--fs-small); font-weight: var(--fw-bold); color: var(--c-magenta-text); background: var(--c-magenta-soft); border-radius: var(--r-pill); transition: background-color var(--t-base); } .js .copy-btn { display: inline-flex; } .copy-btn svg { width: 1.05rem; height: 1.05rem; } .copy-btn:hover { background: #f8d6e6; } .copy-btn.is-copied { color: var(--c-green-text); background: var(--c-green-soft); } /* --- Box z numerem KRS --------------------------------------------------- */ .krs-box { display: flex; flex-wrap: wrap; align-items: center; gap: var(--sp-2) var(--sp-4); margin-top: var(--sp-5); padding: var(--sp-4) var(--sp-5); background: var(--c-white); border: 2px dashed var(--c-magenta); border-radius: var(--r-lg); } .krs-box__label { font-size: var(--fs-small); font-weight: var(--fw-bold); text-transform: uppercase; letter-spacing: 0.04em; color: var(--c-magenta-text); } .krs-box__value { font-size: 1.5rem; font-weight: var(--fw-black); color: var(--c-navy); letter-spacing: 0.04em; } .krs-box .copy-btn { margin-top: 0; margin-left: auto; } /* --- Karta wideo (miniatura → YouTube) ----------------------------------- */ .video-card { position: relative; display: block; border-radius: var(--r-lg); overflow: hidden; box-shadow: var(--sh-lg); } .video-card img { width: 100%; aspect-ratio: 16 / 9; object-fit: cover; transition: transform var(--t-slow); } .video-card:hover img { transform: scale(1.04); } .video-card__play { position: absolute; top: 50%; left: 50%; display: grid; place-items: center; width: 4.5rem; height: 4.5rem; border: 2px solid rgba(255, 255, 255, 0.9); border-radius: 50%; background: rgba(211, 18, 111, 0.85); transform: translate(-50%, -50%); transition: background-color var(--t-base), transform var(--t-base); } .video-card__play svg { width: 1.4rem; height: 1.4rem; color: var(--c-white); } .video-card:hover .video-card__play { background: var(--c-magenta-btn); transform: translate(-50%, -50%) scale(1.08); } .video-card__caption { position: absolute; left: 0; right: 0; bottom: 0; padding: var(--sp-5) var(--sp-4) var(--sp-3); font-size: var(--fs-small); font-weight: var(--fw-bold); color: var(--c-white); background: linear-gradient(to top, rgba(20, 14, 45, 0.85), transparent); } .video-card:focus-visible { outline: 3px solid var(--c-violet); outline-offset: 3px; } /* --- Odtwarzacz w miejscu miniatury -------------------------------------- */ /* Skrypt podmienia klikniętą miniaturę (.video-card lub .media__thumb) na ten blok, więc musi wyglądać tak samo jak one — te same zaokrąglenia i cień. */ .video-embed { position: relative; overflow: hidden; border-radius: var(--r-lg); box-shadow: var(--sh-lg); background: #000; /* zanim odtwarzacz się wczyta, zamiast białej dziury */ } .video-embed iframe { display: block; width: 100%; aspect-ratio: 16 / 9; border: 0; } /* ========================================================================== 19. Podstrona: Kontakt (zapisy, dane, lokalizacja) ========================================================================== */ /* --- Pasek zapisów ------------------------------------------------------- */ .enroll { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--sp-5); padding: clamp(1.5rem, 1rem + 2vw, 2.5rem) clamp(1.5rem, 1rem + 2vw, 3rem); background: var(--c-lavender); border-radius: var(--r-xl); } .enroll__title { font-size: var(--fs-h3); margin-bottom: var(--sp-3); } .enroll__body { max-width: 42rem; } .enroll__body p { color: var(--c-ink); } .enroll__cta { flex-shrink: 0; gap: var(--sp-3); } .enroll__cta svg { width: 1.2rem; height: 1.2rem; } /* --- Karty kontaktowe ---------------------------------------------------- */ .contact-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: var(--sp-5); align-items: start; } .contact-card { padding: var(--sp-6); background: var(--c-white); border-radius: var(--r-xl); box-shadow: var(--sh-md); } .contact-card__title { font-size: var(--fs-h3); margin-bottom: var(--sp-5); padding-bottom: var(--sp-4); border-bottom: 2px solid var(--c-magenta-soft); } .contact-list { display: flex; flex-direction: column; gap: var(--sp-4); } .contact-list li { display: flex; align-items: flex-start; gap: var(--sp-3); line-height: 1.5; } .contact-list svg { flex-shrink: 0; width: 1.4rem; height: 1.4rem; margin-top: 0.1rem; color: var(--c-magenta); } .contact-list a { color: var(--c-navy); font-weight: var(--fw-bold); text-decoration: none; border-bottom: 1px solid transparent; transition: border-color var(--t-base), color var(--t-base); } .contact-list a:hover { color: var(--c-magenta-text); border-bottom-color: currentColor; } .contact-list span { color: var(--c-navy); font-weight: var(--fw-medium); } .contact-list__muted { font-weight: var(--fw-regular); font-size: var(--fs-small); color: var(--c-ink-light); } .contact-card__legal { display: flex; flex-wrap: wrap; gap: var(--sp-2) var(--sp-6); margin-top: var(--sp-5); padding-top: var(--sp-4); border-top: 1px solid var(--c-line); font-size: var(--fs-small); } .contact-card__legal div { display: flex; gap: var(--sp-2); } .contact-card__legal dt { font-weight: var(--fw-bold); color: var(--c-magenta-text); } .contact-card__legal dd { color: var(--c-ink); } /* --- Karta lokalizacji --------------------------------------------------- */ .location-card { display: flex; align-items: center; gap: var(--sp-4); margin-block: var(--sp-5) var(--sp-6); padding: var(--sp-5); font-style: normal; background: var(--c-cream); border-left: 4px solid var(--c-magenta); border-radius: var(--r-md); } .location-card__icon { flex-shrink: 0; width: 2.4rem; height: 2.4rem; color: var(--c-magenta); } .location-card__addr { line-height: 1.6; color: var(--c-navy); } .location-card__addr strong { display: block; font-size: 1.05rem; margin-bottom: var(--sp-1); } /* ========================================================================== 20. Podpowiedź poziomego przewijania ========================================================================== */ /* Paski zakładek, chipów i zdjęć sal przewijają się w bok na wąskim ekranie, ale ucięta w połowie treść wygląda po prostu jak koniec listy. Maska wygasza zawartość przy krawędzi (maski nie przewijają się razem z treścią, więc wygaszenie zostaje przy brzegu), a pulsująca strzałka pokazuje kierunek. Opakowanie i strzałkę dokłada skrypt — bez JS zostaje samo przewijanie, więc nic się nie psuje. */ .hscroll { position: relative; } .hscroll__hint { position: absolute; top: 50%; right: 0.25rem; z-index: 2; display: grid; place-items: center; width: 1.85rem; height: 1.85rem; margin-top: -0.925rem; color: var(--c-white); background: var(--c-magenta-btn); border-radius: 50%; box-shadow: 0 3px 10px rgba(211, 18, 111, 0.35); opacity: 0; pointer-events: none; /* podpowiedź, nie przycisk — nie łapie kliknięć */ transition: opacity var(--t-base); } /* Szewron rysowany krawędziami, nie ikoną z — dzięki temu działa też tam, gdzie strona nie ma w bibliotece odpowiedniego znaku. */ .hscroll__hint::before { content: ""; width: 0.4rem; height: 0.4rem; margin-left: -0.15rem; border-top: 2.5px solid currentColor; border-right: 2.5px solid currentColor; border-radius: 1px; transform: rotate(45deg); } @keyframes hscroll-nudge { 0%, 100% { transform: translateX(0); } 50% { transform: translateX(5px); } } /* Cała podpowiedź żyje tylko na tablecie i telefonie — na desktopie paski mieszczą się w całości albo są elementem układu, którego nie ruszamy. */ @media (max-width: 62rem) { .hscroll.has-more-end .hscroll__hint { opacity: 1; animation: hscroll-nudge 1.6s ease-in-out infinite; } .hscroll.has-more-end .hscroll__pane { -webkit-mask-image: linear-gradient(90deg, #000 0, #000 calc(100% - 4.5rem), transparent 100%); mask-image: linear-gradient(90deg, #000 0, #000 calc(100% - 4.5rem), transparent 100%); } .hscroll.has-more-start .hscroll__pane { -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 2rem, #000 100%); mask-image: linear-gradient(90deg, transparent 0, #000 2rem, #000 100%); } .hscroll.has-more-start.has-more-end .hscroll__pane { -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 2rem, #000 calc(100% - 4.5rem), transparent 100%); mask-image: linear-gradient(90deg, transparent 0, #000 2rem, #000 calc(100% - 4.5rem), transparent 100%); } } /* ========================================================================== 15. Animacje wejścia ========================================================================== */ /* Reguła celowo zaczyna się od .js — klasę dokłada skrypt w . Gdyby JavaScript był wyłączony, selektor nie zadziała i treść pozostanie po prostu widoczna, zamiast zniknąć na zawsze. */ .js .reveal { opacity: 0; transform: translateY(24px); transition: opacity var(--t-slow), transform var(--t-slow); } .js .reveal.is-visible { opacity: 1; transform: none; } .reveal--d1 { transition-delay: 90ms; } .reveal--d2 { transition-delay: 180ms; } .reveal--d3 { transition-delay: 270ms; } /* Szanujemy ustawienie systemowe „ogranicz ruch”. Dla części osób z zaburzeniami przedsionkowymi animacje wywołują mdłości — przy stronie fundacji wspierającej osoby z niepełnosprawnościami to wymóg. */ @media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } *, *::before, *::after { animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; transition-duration: 0.01ms !important; scroll-behavior: auto !important; } /* Ta reguła musi mieć taką samą specyficzność jak .js .reveal, inaczej nie nadpisze ukrycia elementów. */ .js .reveal { opacity: 1; transform: none; } } /* ========================================================================== Responsywność ========================================================================== */ /* --- Tablet -------------------------------------------------------------- */ @media (max-width: 62rem) { .split, .founder__grid, .help__grid, .location__grid { grid-template-columns: 1fr; } .founder__photo { max-width: 22rem; aspect-ratio: 1; } .pillars { grid-template-columns: 1fr; } /* W układzie pionowym kreska rozdzielająca musi przejść z bocznej na górną. */ .pillar + .pillar { border-left: none; border-top: 1px solid var(--c-line); } /* W jednej kolumnie treść filaru rozjeżdżałaby się po lewej stronie szerokiego bloku — wyśrodkowanie trzyma numer, ikonę, tytuł i link na wspólnej osi. */ .pillar { padding-block: var(--sp-5); padding-inline: 0; align-items: center; text-align: center; } .pillar__text { max-width: 26rem; } .pillar .arrow-link { align-self: center; } /* Wariant dla filarów niosących pełne akapity, nie hasła (Przedszkole). Wyśrodkowanie działa na krótkim tekście; przy siedmiu wierszach każdy wiersz zaczyna się w innym miejscu i oko gubi początek następnego. */ .pillars--prose .pillar { align-items: flex-start; text-align: left; } .pillars--prose .pillar__text { max-width: none; } .pillars--prose .pillar .arrow-link { align-self: flex-start; } /* --- Czytelność dłuższych akapitów ------------------------------------- Wyśrodkowany tekst nie ma stałej lewej krawędzi, więc po każdym wierszu trzeba szukać początku kolejnego. Przy jednym–dwóch wierszach to nic nie kosztuje, przy kilkunastu (a tyle robi się z akapitu na ekranie telefonu) męczy — zwłaszcza osoby czytające wolniej lub z trudnościami poznawczymi, czyli sporą część odbiorców tej strony. Dlatego na wąskich ekranach do lewej idzie sama TREŚĆ. Nagłówki, nadtytuły i krótkie hasła zostają wyśrodkowane — one porządkują stronę i nikt ich nie czyta wierszami. */ .section-head p, .plans__note, .approach__closing { text-align: left; } .history { grid-template-columns: 1fr; gap: var(--sp-6); } /* Kropka z numerem wchodzi w jeden wiersz z tytułem kroku — w układzie pionowym osobny wiersz na sam znacznik marnował miejsce i rozrywał numer od opisu, do którego się odnosi. */ .history__item { display: grid; grid-template-columns: auto minmax(0, 1fr); grid-template-areas: "foto foto" "znak krok" "opis opis"; align-items: center; column-gap: var(--sp-3); } .history__photo { grid-area: foto; height: clamp(11rem, 4rem + 30vw, 16rem); margin-bottom: var(--sp-4); } .history__marker { grid-area: znak; margin-bottom: 0; } .history__step { grid-area: krok; margin-bottom: 0; } .history__text { grid-area: opis; margin-top: var(--sp-3); } /* Przy jednej kolumnie kreska nie ma dokąd biec do następnego elementu. */ .history__line { display: none; } .footer__grid { grid-template-columns: 1fr 1fr; } .footer__brand { grid-column: 1 / -1; } /* --- Podstrona Fundacja --- */ .about { grid-template-columns: 1fr; } /* Zdjęcie założycielki nad tekstem, wyśrodkowane, bez przyklejania. */ .about__figure { position: static; max-width: 20rem; margin-inline: auto; order: -1; } .reports__grid { grid-template-columns: repeat(2, 1fr); } .gallery__grid { grid-template-columns: repeat(3, 1fr); } /* --- Podstrona Przedszkole --- */ .prose-media, .mission { grid-template-columns: 1fr; } /* Zdjęcie zawsze nad tekstem w układzie pionowym — również w wariancie --reverse (gdzie na desktopie było już po lewej). */ .prose-media__figure { order: -1; } .prose-media__figure img { max-width: 34rem; margin-inline: auto; } /* Nasza przestrzeń — jedna kolumna, zdjęcie nad tekstem, bez przyklejania. */ .space { grid-template-columns: 1fr; } .space__figure { position: static; order: -1; max-width: 32rem; margin-inline: auto; } .therapies { grid-template-columns: repeat(2, 1fr); } /* --- Podstrona Poradnia --- */ .pricelist { grid-template-columns: 1fr; } /* --- Podstrona Oferta --- */ .method-grid { grid-template-columns: 1fr; } /* --- Podstrona Jak pomagam --- */ .donate__grid { grid-template-columns: 1fr; } .donate__benefits { grid-template-columns: 1fr; } /* Panel z kartą/wideo nad tekstem czytałby się gorzej — zostaje pod tekstem (naturalna kolejność w DOM), tak samo jak na desktopie. */ /* --- Podstrona Kontakt --- */ .contact-grid { grid-template-columns: 1fr; } } /* --- Nawigacja mobilna --------------------------------------------------- */ /* Menu zajmuje cały ekran i niesie firmowy gradient z chmurami oraz paskiem trójkątów — te same motywy, co hero i stopka, żeby otwarcie menu nie wyglądało jak wyjście poza stronę. */ @media (max-width: 56rem) { .nav-toggle { display: flex; } .nav { position: fixed; inset: 0; z-index: var(--z-menu); isolation: isolate; /* trzyma dekoracje z z-index:-1 wewnątrz menu */ overflow: hidden auto; overscroll-behavior: contain; flex-direction: column; align-items: stretch; /* `safe` chroni przed przycięciem góry, gdy pozycji menu jest więcej niż mieści ekran; starsze przeglądarki po prostu zignorują tę linię. */ justify-content: center; justify-content: safe center; gap: 0; /* Górny odstęp robi miejsce na pasek nagłówka z logo i krzyżykiem, który zostaje widoczny NAD menu. */ padding: calc(4.75rem + var(--sp-5)) var(--gutter) var(--sp-8); background: radial-gradient(120% 70% at 12% 0%, rgba(255, 255, 255, 0.20) 0%, transparent 58%), radial-gradient(90% 55% at 100% 12%, rgba(229, 23, 126, 0.40) 0%, transparent 62%), var(--g-hero); box-shadow: none; /* Chowamy przezroczystością zamiast display:none — daje animację, a visibility trzyma menu poza tabulacją, gdy jest zamknięte. */ opacity: 0; visibility: hidden; /* Samo przygaszanie, bez skalowania. Skala w górę rozpycha element ponad szerokość okna (poziomy pasek przewijania), a skala w dół odsuwa go od wszystkich czterech krawędzi — przez cały czas zanikania widać wtedy cienką ramkę tła dookoła menu. Ruch niosą pozycje listy, nie tło. */ transition: opacity var(--t-base), visibility var(--t-base); } .nav.is-open { opacity: 1; visibility: visible; } /* Chmury przy dolnej krawędzi — ten sam plik, co w sekcji „Możesz być częścią tej historii". Maska wygasza je ku górze, żeby nie tworzyły wyraźnego prostokąta. Plik chmur ma u dołu ok. 12,5% przezroczystego marginesu (rysunek kończy się na 708. wierszu z 809) — przy zwykłym `bottom: 0` chmury wisiałyby nad krawędzią menu z widoczną przerwą. Dlatego proporcja pseudoelementu liczona jest od SAMYCH chmur (1942/708), a tło rysowane w naturalnej proporcji od górnej krawędzi: pusty pas wypada poza kadr, bez rozciągania grafiki. */ .nav::before { content: ""; position: absolute; left: -25%; right: -25%; bottom: 0; z-index: -1; aspect-ratio: 1942 / 708; /* Wariant 1200 px, nie oryginał. Tło zamkniętego menu i tak jest pobierane przy każdym wejściu na telefonie, a pseudoelement ma tu ok. 560 px szerokości — pełny plik kosztował 53 kB za nic. */ background-image: url("../assets/img/chmury-1200.webp"); background-repeat: no-repeat; background-position: center top; background-size: 100% auto; opacity: 0.45; -webkit-mask-image: linear-gradient(180deg, transparent 0, #000 60%); mask-image: linear-gradient(180deg, transparent 0, #000 60%); pointer-events: none; } /* Nagłówek zostaje nad rozwiniętym menu — inaczej logo i krzyżyk zniknęłyby pod pełnoekranową nakładką. Na gradiencie białe logo działa bez filtra. (Klasa .menu-open służy też lightboxowi, ale ten ma z-index 500, więc i tak przykrywa nagłówek.) */ body.menu-open .header { z-index: calc(var(--z-menu) + 1); background: transparent; backdrop-filter: none; -webkit-backdrop-filter: none; border-bottom-color: transparent; box-shadow: none; } /* .nav jest DZIECKIEM nagłówka, więc podniesienie z-index samego .header nic nie daje — nakładka i tak przykrywałaby rodzeństwo. Logo i przycisk muszą dostać własny z-index ponad menu. */ body.menu-open .header .logo, body.menu-open .nav-toggle { position: relative; z-index: calc(var(--z-menu) + 1); } body.menu-open .logo__mark { filter: none; } body.menu-open .nav-toggle span:not(.sr-only) { background: var(--c-white); } /* Cofa position: absolute z desktopu (patrz komentarz przy .nav__list wyżej) — w rozwijanym menu lista wraca do normalnego przepływu. */ .nav__list { position: static; transform: none; flex-direction: column; align-items: stretch; gap: 0; width: 100%; max-width: 24rem; margin-inline: auto; } /* Pozycje wchodzą kaskadą, jedna po drugiej — ruch prowadzi wzrok w dół listy zamiast wywalać wszystko naraz. */ .nav__list li { opacity: 0; transform: translateY(14px); transition: opacity var(--t-slow), transform var(--t-slow); } .nav.is-open .nav__list li { opacity: 1; transform: none; } .nav.is-open .nav__list li:nth-child(1) { transition-delay: 60ms; } .nav.is-open .nav__list li:nth-child(2) { transition-delay: 105ms; } .nav.is-open .nav__list li:nth-child(3) { transition-delay: 150ms; } .nav.is-open .nav__list li:nth-child(4) { transition-delay: 195ms; } .nav.is-open .nav__list li:nth-child(5) { transition-delay: 240ms; } .nav.is-open .nav__list li:nth-child(6) { transition-delay: 285ms; } .nav.is-open .nav__list li:nth-child(7) { transition-delay: 330ms; } .nav.is-open .nav__list li:nth-child(8) { transition-delay: 375ms; } .nav__link { display: flex; align-items: center; justify-content: space-between; gap: var(--sp-3); padding: var(--sp-4) var(--sp-3); font-size: 1.3rem; font-weight: var(--fw-bold); color: var(--c-white); border-radius: var(--r-md); border-bottom: 1px solid rgba(255, 255, 255, 0.16); } .nav__link:hover { color: var(--c-white); } /* Podkreślenie z desktopu zamienia się w szewron po prawej — sygnalizuje przejście na podstronę, a nie stan hover. */ .nav__link::after { display: block; position: static; width: 0.5rem; height: 0.5rem; margin-right: 0.35rem; background: none; border: 0; border-right: 2px solid rgba(255, 255, 255, 0.6); border-bottom: 2px solid rgba(255, 255, 255, 0.6); border-radius: 1px; transform: rotate(-45deg); transition: transform var(--t-base), border-color var(--t-base); } .nav__link:hover::after { width: 0.5rem; border-color: var(--c-white); transform: rotate(-45deg) translate(2px, 2px); } /* Strona bieżąca — podświetlona płytka zamiast magenty, która na fiolecie ginie. */ .nav__link[aria-current="page"] { color: var(--c-white); background: rgba(255, 255, 255, 0.16); } .nav__link[aria-current="page"]::after { width: 0.5rem; border-color: var(--c-white); } .nav .btn { width: 100%; max-width: 24rem; margin-top: var(--sp-6); margin-inline: auto; justify-content: center; /* Na gradiencie magenta na magencie nie ma kontrastu — przycisk przechodzi na biały wariant. */ color: var(--c-magenta-text); background: var(--c-white); box-shadow: var(--sh-md); padding: 0.85rem 1.9rem; font-size: var(--fs-body); opacity: 0; transform: translateY(14px); transition: opacity var(--t-slow), transform var(--t-slow), background-color var(--t-base), color var(--t-base); } .nav.is-open .btn { opacity: 1; transform: none; transition-delay: 375ms; } } /* Bez animacji wejścia pozycje menu muszą być od razu widoczne — sam `transition-duration: 0` z bloku prefers-reduced-motion nie wystarczy, bo stan spoczynkowy to opacity: 0. */ @media (max-width: 56rem) and (prefers-reduced-motion: reduce) { .nav__list li, .nav .btn { opacity: 1; transform: none; } } /* --- Telefon ------------------------------------------------------------- */ @media (max-width: 40rem) { .stats { margin-top: -2.5rem; } .stats__card { grid-template-columns: 1fr; gap: 0; padding: var(--sp-3); } .stat { justify-content: flex-start; padding: var(--sp-4) var(--sp-3); text-align: left; } .stat + .stat { border-left: none; border-top: 1px solid var(--c-line); } /* Jedna kolumna na całą szerokość — bloki wyrównane do lewej zostawiałyby dużą pustkę po prawej, więc cała stopka idzie na środek. */ .footer__grid { grid-template-columns: 1fr; gap: var(--sp-5); text-align: center; } .footer__brand { display: grid; justify-items: center; } .footer__socials { justify-content: center; } .footer__links { align-items: center; } .footer__bottom { flex-direction: column; align-items: center; text-align: center; } .btn { width: 100%; } .hero__actions { flex-direction: column; } .btn--sm { width: auto; } /* --- Podstrona Fundacja --- */ /* Zakładki nie mieszczą się w rzędzie — przewijamy je poziomo zamiast łamać na kilka wierszy (mniej „skacze" przy zmianie aktywnej). */ .subnav__inner { flex-wrap: nowrap; justify-content: flex-start; overflow-x: auto; scrollbar-width: none; -webkit-overflow-scrolling: touch; } .subnav__inner::-webkit-scrollbar { display: none; } /* W przewijanym pasku nic nie może się kurczyć — inaczej flexbox ściska zakładki i ich ikony (ikona chipa wypadała do zera szerokości). */ .subnav__tab, .way-chip, .way-chip svg { flex-shrink: 0; } .reports__grid { grid-template-columns: 1fr; } .gallery__grid { grid-template-columns: repeat(2, 1fr); gap: var(--sp-2); } .support-ways { grid-template-columns: 1fr; } .lightbox { grid-template-columns: 1fr; } /* Na wąskim ekranie strzałki nawigacji lądują na dole, po bokach licznika. */ .lightbox__nav { position: absolute; bottom: clamp(0.75rem, 0.5rem + 1vw, 1.5rem); } .lightbox__nav--prev { left: 1.25rem; } .lightbox__nav--next { right: 1.25rem; } /* --- Podstrona Przedszkole --- */ .therapies { grid-template-columns: 1fr; } .plans { grid-template-columns: 1fr; } .rooms li { flex-basis: 78vw; } /* Wyżywienie: ikona nad tekstem, w pionie. */ .meals { flex-direction: column; gap: var(--sp-4); } /* --- Podstrona Poradnia --- */ /* Rozwinięte panele oferty i długie listy schodzą do jednej kolumny. */ .acc__cols, .acc__list--2col { grid-template-columns: 1fr; } /* --- Podstrona Jak pomagam --- */ /* Chipy szybkiego wyboru przewijają się poziomo zamiast łamać na wiersze. */ .ways-quick__inner { flex-wrap: nowrap; justify-content: flex-start; overflow-x: auto; scrollbar-width: none; -webkit-overflow-scrolling: touch; } .ways-quick__inner::-webkit-scrollbar { display: none; } .krs-box .copy-btn { margin-left: 0; } } /* --- Druk ---------------------------------------------------------------- */ @media print { .header, .nav-toggle, .hero__art, .help__art, .footer__art, .location__map, .subnav, .lightbox, .media__play { display: none; } .js .reveal { opacity: 1; transform: none; } /* Do druku pokazujemy wszystkie panele naraz, nawet gdy JS zwinął je do zakładek — inaczej wydruk objąłby tylko aktywną sekcję. */ .subpanel[hidden] { display: block !important; } /* Analogicznie: rozwijana oferta poradni na wydruku zawsze rozłożona. */ .acc__body { display: block !important; } .acc__chevron { display: none; } body { color: #000; background: #fff; } } /* ========================================================================== Narzędzia Celowo na samym końcu arkusza: klasy pomocnicze mają wygrywać z regułami komponentów, a przy równej specyficzności decyduje kolejność w pliku. ========================================================================== */ /* --- Akcent — zdanie, które ma przyciągnąć wzrok -------------------------- Krótkie hasła: zdanie otwierające zakładkę i puenta zamykająca sekcję. Świadomie BEZ font-size — akcent bierze stopień pisma z otoczenia, więc nie rozjeżdża rytmu strony; wyróżnia go tylko grubość i magenta. Selektor z „p." wyrównuje specyficzność do reguł typu .about__body p czy .section-head p, które inaczej narzucałyby akapitowi kolor tekstu. Zasada: jeden akcent na sekcję — dwa obok siebie przestają wyróżniać. */ p.accent { font-weight: var(--fw-bold); color: var(--c-magenta-text); } /* ========================================================================== 21. Podstrona: Media o nas ========================================================================== */ /* --- Pas z liczbami ------------------------------------------------------- Skala robi tu całą robotę: zanim ktoś zacznie czytać, ma zobaczyć, że to nie jedna wzmianka, tylko trzynaście lat obecności. */ .media-liczby { padding-block: clamp(2.5rem, 1.5rem + 4vw, 4rem); background: var(--g-help); color: var(--c-white); } .media-liczby__siatka { display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--sp-5); text-align: center; } .media-liczba { display: grid; gap: var(--sp-2); } .media-liczba__val { font-size: clamp(2.4rem, 1.6rem + 3vw, 4rem); font-weight: var(--fw-black); line-height: 1; color: var(--c-white); } .media-liczba__opis { font-size: var(--fs-small); line-height: 1.4; color: rgba(255, 255, 255, 0.88); } /* --- Ściana nazw redakcji ------------------------------------------------- Celowo typografia, nie logotypy. Znaki mediów przychodzą w kilkunastu różnych proporcjach, kolorach i formatach — zestawione obok siebie wyglądają jak wycinanka. Jednolity krój czyta się jak spis treści i nie sugeruje, że którakolwiek redakcja nas firmuje. */ .media-sciana { display: flex; flex-wrap: wrap; justify-content: center; gap: var(--sp-3) var(--sp-5); max-width: 60rem; margin-inline: auto; list-style: none; } .media-sciana li { padding: var(--sp-2) var(--sp-4); font-size: clamp(0.95rem, 0.85rem + 0.5vw, 1.25rem); font-weight: var(--fw-black); letter-spacing: 0.01em; color: var(--c-navy); background: var(--c-white); border-radius: var(--r-pill); box-shadow: var(--sh-sm); } /* --- Cztery momenty ------------------------------------------------------- */ .media-momenty { display: grid; grid-template-columns: repeat(2, 1fr); gap: var(--sp-5); } .media-moment { display: flex; flex-direction: column; padding: clamp(1.5rem, 1rem + 2vw, 2.25rem); background: var(--c-white); border-radius: var(--r-xl); box-shadow: var(--sh-md); border-top: 4px solid var(--c-magenta); } .media-moment:nth-child(2) { border-top-color: var(--c-blue); } .media-moment:nth-child(3) { border-top-color: var(--c-violet); } .media-moment:nth-child(4) { border-top-color: var(--c-green); } .media-moment__rok { font-size: var(--fs-eyebrow); font-weight: var(--fw-black); letter-spacing: 0.08em; text-transform: uppercase; color: var(--c-magenta-text); } .media-moment__tyt { margin-block: var(--sp-3) var(--sp-3); font-size: 1.2rem; } .media-moment__txt { flex-grow: 1; font-size: var(--fs-small); color: var(--c-ink); } .media-moment__zrodla { margin-top: var(--sp-4); padding-top: var(--sp-3); border-top: 1px solid var(--c-line); font-size: 0.8rem; font-weight: var(--fw-bold); color: var(--c-ink-light); } /* --- Filtry --------------------------------------------------------------- */ .media-filtry { display: flex; flex-wrap: wrap; justify-content: center; gap: var(--sp-2); margin-bottom: var(--sp-7); } .media-filtr { display: inline-flex; align-items: center; gap: var(--sp-2); padding: 0.55rem 1.1rem; font-family: inherit; font-size: var(--fs-small); font-weight: var(--fw-bold); color: var(--c-ink); background: var(--c-white); border: 2px solid var(--c-line); border-radius: var(--r-pill); cursor: pointer; transition: color var(--t-base), background-color var(--t-base), border-color var(--t-base); } .media-filtr span { font-size: 0.75rem; padding: 0.1rem 0.45rem; color: var(--c-ink-light); background: var(--c-lavender); border-radius: var(--r-pill); transition: color var(--t-base), background-color var(--t-base); } .media-filtr:hover { color: var(--c-magenta-text); border-color: var(--c-magenta); } .media-filtr.is-active { color: var(--c-white); background: var(--c-magenta-btn); border-color: var(--c-magenta-btn); } .media-filtr.is-active span { color: var(--c-white); background: rgba(255, 255, 255, 0.22); } /* --- Kronika -------------------------------------------------------------- */ .media-rok + .media-rok { margin-top: var(--sp-7); } .media-rok__naglowek { display: flex; align-items: baseline; gap: var(--sp-3); margin-bottom: var(--sp-4); padding-bottom: var(--sp-2); border-bottom: 2px solid var(--c-line); font-size: 1.6rem; color: var(--c-navy); } .media-rok__naglowek small { font-size: var(--fs-small); font-weight: var(--fw-medium); color: var(--c-ink-light); } .media-lista { list-style: none; display: grid; } /* Wiersz: data | redakcja | tytuł | rodzaj. Kolumny trzymają pion, dzięki czemu 135 pozycji da się przeskanować wzrokiem zamiast czytać. */ .media-poz { display: grid; grid-template-columns: 7.5rem 12rem minmax(0, 1fr) 6.5rem; gap: var(--sp-4); align-items: baseline; padding-block: var(--sp-3); border-bottom: 1px solid var(--c-line); } .media-poz__data { font-size: 0.8rem; font-weight: var(--fw-bold); color: var(--c-ink-light); white-space: nowrap; } .media-poz__red { font-size: var(--fs-small); font-weight: var(--fw-black); color: var(--c-navy); } .media-poz__tyt { font-size: var(--fs-small); color: var(--c-ink); text-decoration: none; } /* Odnośnik dostaje strzałkę; pozycje bez linku wyglądają jak zwykły tekst, więc nikt nie klika w coś, czego już nie ma. */ a.media-poz__tyt { color: var(--c-magenta-text); font-weight: var(--fw-medium); } a.media-poz__tyt svg { margin-left: 0.35rem; vertical-align: -2px; opacity: 0.55; transition: transform var(--t-base), opacity var(--t-base); } a.media-poz__tyt:hover { text-decoration: underline; } a.media-poz__tyt:hover svg { transform: translateX(3px); opacity: 1; } .media-poz__typ { justify-self: start; padding: 0.15rem 0.6rem; font-size: 0.7rem; font-weight: var(--fw-bold); border-radius: var(--r-pill); white-space: nowrap; } .media-poz__typ--tv { color: var(--c-magenta-text); background: var(--c-magenta-soft); } .media-poz__typ--radio { color: var(--c-violet); background: var(--c-violet-soft); } .media-poz__typ--prasa { color: var(--c-blue-text); background: var(--c-blue-soft); } .media-poz__typ--net { color: var(--c-green-text); background: var(--c-green-soft); } /* Materiały kluczowe dostają delikatny akcent — oko samo je wyłapuje. */ .media-poz--kluczowa { background: linear-gradient(90deg, rgba(229, 23, 126, 0.05), transparent 60%); border-radius: var(--r-sm); padding-inline: var(--sp-3); margin-inline: calc(var(--sp-3) * -1); } .media-poz[hidden] { display: none; } .media-rok[hidden] { display: none; } /* --- Media: tablet i telefon ---------------------------------------------- */ @media (max-width: 62rem) { .media-liczby__siatka { grid-template-columns: repeat(2, 1fr); gap: var(--sp-6) var(--sp-4); } .media-momenty { grid-template-columns: 1fr; } /* Cztery kolumny nie mieszczą się na wąskim ekranie. Wiersz zamienia się w kartę: rodzaj i data w jednej linii u góry, potem redakcja i tytuł. */ .media-poz { grid-template-columns: auto minmax(0, 1fr); grid-template-areas: "rodzaj data" "redakcja redakcja" "tytul tytul"; gap: var(--sp-2) var(--sp-3); padding-block: var(--sp-4); } .media-poz__typ { grid-area: rodzaj; } .media-poz__data { grid-area: data; justify-self: end; } .media-poz__red { grid-area: redakcja; font-size: 1rem; } .media-poz__tyt { grid-area: tytul; } .media-poz--kluczowa { background: linear-gradient(180deg, rgba(229, 23, 126, 0.06), transparent 70%); } } @media (max-width: 40rem) { .media-liczby__siatka { grid-template-columns: 1fr 1fr; } .media-rok__naglowek { font-size: 1.35rem; } /* Pasek filtrów przewija się w bok — podpowiedź przewijania dokłada skrypt (patrz sekcja 20), tak samo jak przy zakładkach podstron. */ .media-filtry { flex-wrap: nowrap; justify-content: flex-start; overflow-x: auto; scrollbar-width: none; -webkit-overflow-scrolling: touch; } .media-filtry::-webkit-scrollbar { display: none; } .media-filtr { flex-shrink: 0; } } /* --- Media: firmy, które pomogły ------------------------------------------ Tu logotypy są prawdziwe (dostarczone przez fundację jako podziękowanie), więc pokazujemy je wprost. Każdy siedzi na białym kaflu o równej wysokości i skaluje się z zachowaniem proporcji — znaki przychodzą w bardzo różnych kształtach, od kwadratów po długie poziome paski. */ .sponsorzy { display: grid; grid-template-columns: repeat(auto-fill, minmax(9.5rem, 1fr)); gap: var(--sp-3); list-style: none; } .sponsor { display: grid; place-items: center; padding: var(--sp-4) var(--sp-3); min-height: 5.5rem; background: var(--c-white); border-radius: var(--r-md); box-shadow: var(--sh-sm); transition: transform var(--t-base), box-shadow var(--t-base); } .sponsor:hover { transform: translateY(-3px); box-shadow: var(--sh-md); } .sponsor img { width: auto; max-width: 100%; max-height: 3rem; height: auto; object-fit: contain; } .sponsorzy__dopisek { margin-top: var(--sp-5); text-align: center; font-size: var(--fs-small); color: var(--c-ink-light); } @media (max-width: 40rem) { .sponsorzy { grid-template-columns: repeat(auto-fill, minmax(7.5rem, 1fr)); gap: var(--sp-2); } .sponsor { min-height: 4.5rem; padding: var(--sp-3) var(--sp-2); } .sponsor img { max-height: 2.4rem; } }