/* ========================================================================= mgr Maria Owczarzak - psychoterapia CBT, Krakow Wersja edytorialska, runda druga. Paleta Pantone bez zmian, ale nagiel robi sie ciemny, hero opiera sie na zdjeciu, a kursywe przejmuje krój szeryfowy - Poppins pochylony byl zbyt mechaniczny. ========================================================================= */ :root { --krem: #F5EFC6; /* Pantone Transparent Yellow */ --krem-tlo: #FAF7E6; /* rozjasniony papier - tlo strony */ --karta: #FFFDF4; --wino: #4D0E12; /* Pantone Sceptre Red */ --blekit: #A5BCD6; /* Pantone Cerulean Blue */ --ziemia: #4A2E27; /* Pantone Potting Soil */ --java: #231815; /* Pantone Java Brown */ --linia: rgba(74, 46, 39, .18); --linia-mocna: rgba(74, 46, 39, .34); --kratka: rgba(74, 46, 39, .09); --font: 'Poppins', 'Segoe UI', system-ui, sans-serif; --kursywa: 'Playfair Display', Georgia, 'Times New Roman', serif; --r-mala: 8px; --r-karty: 14px; --r-duza: 22px; --cien: 0 1px 2px rgba(35, 24, 21, .05), 0 10px 30px rgba(35, 24, 21, .07); --cien-mocny: 0 2px 6px rgba(35, 24, 21, .08), 0 22px 52px rgba(35, 24, 21, .14); --tempo: .3s cubic-bezier(.4, 0, .2, 1); } *, *::before, *::after { box-sizing: border-box; } html, body { overflow-x: clip; } html { scroll-behavior: smooth; scroll-padding-top: 96px; } @media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } } /* Plynne przejscie PL <-> EN: przenikanie stron zamiast bialego mrugniecia (Chrome, Edge, Safari 18+; Firefox po prostu laduje strone jak dotad). Pasek nagowka ma wlasna nazwe, wiec stoi w miejscu, a zmienia sie tylko tresc. */ @view-transition { navigation: auto; } .gora { view-transition-name: naglowek; } ::view-transition-old(root), ::view-transition-new(root) { animation-duration: .38s; animation-timing-function: cubic-bezier(.4, 0, .2, 1); } @media (prefers-reduced-motion: reduce) { @view-transition { navigation: none; } } body { margin: 0; background: var(--krem-tlo); color: var(--java); font-family: var(--font); font-size: 16.5px; font-weight: 400; line-height: 1.74; -webkit-font-smoothing: antialiased; } img, svg, iframe, video { max-width: 100%; } img { height: auto; display: block; } h1, h2, h3, h4 { font-family: var(--font); font-weight: 600; color: var(--java); letter-spacing: -.025em; line-height: 1.08; margin: 0; } h1 { font-size: clamp(40px, 5.6vw, 74px); font-weight: 500; line-height: 1.18; } h2 { font-size: clamp(29px, 3.9vw, 50px); font-weight: 500; line-height: 1.22; } h3 { font-size: clamp(18px, 1.5vw, 21px); } /* Kursywa nie jest juz pochylonym Poppinsem, tylko osobnym krojem szeryfowym. Geometryczny grotesk po pochyleniu wyglada jak blad druku, a prawdziwa kursywa szeryfowa czyta sie jak zdanie wypowiedziane. Playfair ma mniejsza wysokosc x, wiec dostaje korekte rozmiaru. */ h1 em, h2 em { font-family: var(--kursywa); font-style: italic; font-weight: 400; font-size: 1.06em; color: var(--wino); letter-spacing: -.01em; } p { margin: 0 0 15px; } p:last-child { margin-bottom: 0; } a { color: var(--wino); text-decoration: none; } a:hover { color: var(--java); } :focus-visible { outline: 2px solid var(--wino); outline-offset: 3px; border-radius: 3px; } .strona { width: min(1160px, calc(100% - 48px)); margin-inline: auto; } @media (max-width: 620px) { .strona { width: calc(100% - 32px); } } /* --- Kratka --------------------------------------------------------------- Papier w kratke, taki jak w zeszycie do cwiczen. Wchodzi tylko na dwie sekcje, zeby zostal detalem, a nie tapeta calej strony. */ .kratka::before { content: ""; position: absolute; inset: 0; z-index: 0; pointer-events: none; background-image: linear-gradient(to right, var(--kratka) 1px, transparent 1px), linear-gradient(to bottom, var(--kratka) 1px, transparent 1px); background-size: 34px 34px; -webkit-mask-image: radial-gradient(120% 90% at 50% 40%, #000 42%, transparent 82%); mask-image: radial-gradient(120% 90% at 50% 40%, #000 42%, transparent 82%); } /* --- Etykieta -------------------------------------------------------------- */ .etykieta { font-size: 12px; font-weight: 600; letter-spacing: .2em; text-transform: uppercase; color: var(--wino); margin: 0 0 16px; } .etykieta--linia { display: inline-flex; align-items: center; gap: 13px; } .etykieta--linia::before, .etykieta--linia::after { content: ""; width: 28px; height: 1px; background: currentColor; opacity: .5; } /* ========================================================================= PASEK DEMO I CIEMNY NAGLOWEK ========================================================================= */ .pasek-demo { background: var(--java); color: rgba(245, 239, 198, .78); font-size: 12px; letter-spacing: .04em; text-align: center; padding: 9px 16px; } /* Menu w Cerulean Blue. Kolor jest jasny, wiec caly zestaw napisow schodzi na Java Brown - odwrotnie niz przy bordowym pasku. */ .gora { position: sticky; top: 0; z-index: 60; background: var(--java); border-bottom: 1px solid rgba(245, 239, 198, .16); } .gora .strona { display: flex; align-items: center; justify-content: space-between; gap: 24px; min-height: 78px; position: relative; } .znak { display: block; color: var(--krem); } .znak:hover { color: var(--krem); } .znak__imie { display: block; font-size: 20px; font-weight: 500; letter-spacing: -.02em; line-height: 1.15; } .znak__rola { display: block; font-size: 12px; font-weight: 500; letter-spacing: .19em; text-transform: uppercase; color: rgba(245, 239, 198, .78); margin-top: 3px; line-height: 1.3; } /* Runda 18: w pasku logo psycha.wstaje (slonce + napis), pod nim male nazwisko. Kolory jak wersja logo na ciemne tlo z szablonow IG: krem + blekitna kursywa. */ .znak--logo { display: flex; align-items: center; gap: 12px; } .znak__slonce { height: 30px; width: auto; flex: none; display: block; } .znak__tekst { display: block; } .znak__logo { display: block; font-size: 23px; line-height: 1.05; white-space: nowrap; } .znak__logo b { font-weight: 500; letter-spacing: -.02em; color: var(--krem); } .znak__logo em { font-family: var(--kursywa); font-style: italic; font-weight: 400; font-size: 1.1em; color: var(--blekit); } .znak--logo .znak__rola { font-size: 10px; letter-spacing: .16em; margin-top: 4px; } @media (max-width: 640px) { .znak--logo { gap: 9px; } .znak__slonce { height: 24px; } .znak__logo { font-size: 19px; } .znak--logo .znak__rola { font-size: 8.5px; letter-spacing: .12em; } } /* Na telefonie rola ma sie zmiescic w jednej linii - dwa wiersze pod imieniem robily z naglowka trzecia czesc ekranu. */ @media (max-width: 640px) { .znak__imie { font-size: 18px; } .znak__rola { font-size: 9.5px; letter-spacing: .1em; white-space: nowrap; margin-top: 2px; } .gora .strona { min-height: 64px; } } .menu { display: flex; align-items: center; gap: 32px; } /* Pozycje menu pisane tak samo jak etykieta "Krakow - sesje PL / EN": wersaliki, mocny odstep miedzy literami, srednia grubosc. Dzieki temu pasek na gorze i nadtytuly w sekcjach mowia jednym glosem. */ .menu a { font-size: 13px; font-weight: 500; letter-spacing: .19em; text-transform: uppercase; color: var(--krem); position: relative; padding: 4px 0; } .menu a:hover { color: #FFFFFF; } .menu a::after { content: ""; position: absolute; left: 0; right: 100%; bottom: 0; height: 1px; background: var(--blekit); transition: right var(--tempo); } .menu a:hover::after { right: 0; } .menu__cta { background: var(--krem); color: var(--java) !important; letter-spacing: .16em; padding: 12px 24px !important; border-radius: 999px; font-weight: 500; transition: background var(--tempo), transform var(--tempo); } .menu__cta::after { display: none; } .menu__cta:hover { background: var(--blekit); transform: translateY(-1px); } /* Runda 13: menu zawsze zwiniete (hamburger + panel z prawej, jak Shiva). W pasku zostaje tylko PL/EN, przycisk wizyty na desktopie i hamburger. */ .gora__prawo { display: flex; align-items: center; gap: 18px; } .menu > a:not(.menu__cta) { display: none; } .jezyki { display: flex; padding: 3px; border-radius: 999px; border: 1px solid rgba(245, 239, 198, .4); } .jezyki a { display: block; padding: 7px 11px; border-radius: 999px; line-height: 1; font-size: 12px; font-weight: 600; letter-spacing: .12em; color: rgba(245, 239, 198, .78); transition: background var(--tempo), color var(--tempo); } .jezyki a:hover { color: #FFFFFF; } .jezyki a[aria-current] { background: var(--krem); color: var(--java); } @media (max-width: 640px) { .gora .strona { gap: 10px; } .gora__prawo { gap: 8px; } .jezyki { padding: 2px; } .jezyki a { padding: 6px 7px; font-size: 11px; letter-spacing: .06em; } .menu-przycisk { width: 40px; height: 40px; } } /* Waski telefon: rola pod nazwiskiem ciasniej, inaczej hamburger wypadal za ekran. */ @media (max-width: 420px) { .znak__rola { letter-spacing: .05em; font-size: 9px; } } .menu-przycisk { display: block; width: 44px; height: 44px; padding: 0; background: none; border: 1px solid rgba(245, 239, 198, .4); border-radius: var(--r-mala); cursor: pointer; position: relative; } .menu-przycisk span { position: absolute; left: 50%; top: 50%; margin-top: -.75px; width: 18px; height: 1.5px; background: var(--krem); transform: translateX(-50%); } .menu-przycisk span::before, .menu-przycisk span::after { content: ""; position: absolute; left: 0; width: 18px; height: 1.5px; background: var(--krem); transition: transform var(--tempo); } .menu-przycisk span::before { top: -6px; } .menu-przycisk span::after { top: 6px; } .menu-przycisk[aria-expanded="true"] span { background: transparent; } .menu-przycisk[aria-expanded="true"] span::before { transform: rotate(45deg) translate(4px, 4px); } .menu-przycisk[aria-expanded="true"] span::after { transform: rotate(-45deg) translate(4px, -4px); } @media (max-width: 900px) { .menu { display: none; } } /* --- Wysuwane menu -------------------------------------------------------- Panel wjezdza z prawej nad przyciemnione tlo, tak jak w szablonie Shiva Dance. Zaslona i panel siedza poza naglowkiem, wiec nie przycina ich sticky header. */ .nav-zaslona { position: fixed; inset: 0; z-index: 90; background: rgba(35, 24, 21, .55); -webkit-backdrop-filter: blur(3px); backdrop-filter: blur(3px); opacity: 0; visibility: hidden; transition: opacity .4s var(--tempo), visibility 0s linear .4s; } .nav-zaslona.otwarte { opacity: 1; visibility: visible; transition: opacity .4s var(--tempo), visibility 0s; } .menu-panel { position: fixed; top: 0; right: 0; bottom: 0; z-index: 100; width: min(360px, 86vw); background: var(--java); color: var(--krem); padding: 84px 32px 32px; display: flex; flex-direction: column; /* Runda 20: cien i widocznosc tylko przy otwartym panelu - zamkniety wystawal cieniem przy prawej krawedzi ekranu, a jego linki lapaly Tab. */ box-shadow: none; visibility: hidden; transform: translateX(104%); transition: transform .5s cubic-bezier(.2, .8, .2, 1), box-shadow .5s, visibility 0s .5s; overflow-y: auto; } .menu-panel.otwarte { transform: none; visibility: visible; box-shadow: -24px 0 60px rgba(35, 24, 21, .35); transition: transform .5s cubic-bezier(.2, .8, .2, 1), box-shadow .5s, visibility 0s; } .menu-zamknij { position: absolute; top: 20px; right: 22px; width: 44px; height: 44px; border-radius: 999px; border: 1px solid rgba(245, 239, 198, .26); background: rgba(245, 239, 198, .06); color: var(--krem); cursor: pointer; display: grid; place-items: center; transition: background var(--tempo), border-color var(--tempo), transform var(--tempo); } .menu-zamknij:hover { background: var(--wino); border-color: var(--wino); transform: rotate(90deg); } .menu-panel__tytul { margin: 0 0 14px; font-size: 11px; font-weight: 600; letter-spacing: .26em; text-transform: uppercase; color: rgba(245, 239, 198, .5); } .menu-panel > a { display: block; padding: 15px 0; color: var(--krem); font-size: 22px; font-weight: 500; letter-spacing: -.01em; border-bottom: 1px solid rgba(245, 239, 198, .1); opacity: 0; transform: translateX(36px); transition: opacity .45s var(--tempo), transform .45s var(--tempo), color .18s, padding-left .18s; } .menu-panel > a:hover { color: var(--blekit); padding-left: 8px; } .menu-panel.otwarte > a { opacity: 1; transform: none; } .menu-panel.otwarte > a:nth-of-type(2) { transition-delay: .06s; } .menu-panel.otwarte > a:nth-of-type(3) { transition-delay: .12s; } .menu-panel.otwarte > a:nth-of-type(4) { transition-delay: .18s; } .menu-panel.otwarte > a:nth-of-type(5) { transition-delay: .24s; } .menu-panel__cta { margin-top: 22px; text-align: center; background: var(--krem); color: var(--java) !important; border-radius: 999px; border-bottom: 0 !important; padding: 15px 22px !important; font-size: 16px !important; } .menu-panel__cta:hover { background: var(--blekit); color: var(--java) !important; padding-left: 22px !important; } .menu-panel__profile { margin-top: auto; padding-top: 26px; display: flex; gap: 12px; justify-content: center; opacity: 0; transform: translateX(36px); transition: opacity .45s var(--tempo) .3s, transform .45s var(--tempo) .3s; } .menu-panel.otwarte .menu-panel__profile { opacity: 1; transform: none; } .menu-panel__profile a { display: grid; place-items: center; width: 46px; height: 46px; border-radius: 999px; border: 1px solid rgba(245, 239, 198, .22); color: var(--krem); transition: background var(--tempo), border-color var(--tempo); } .menu-panel__profile a:hover { background: var(--wino); border-color: var(--wino); color: var(--krem); } /* Tlo strony nie przewija sie, gdy panel jest otwarty. */ html.menu-otwarte, html.menu-otwarte body { overflow: hidden; } /* ========================================================================= PRZYCISKI ========================================================================= */ .btn { display: inline-flex; align-items: center; gap: 10px; font-size: 15.5px; font-weight: 500; letter-spacing: .01em; padding: 16px 32px; border-radius: 999px; transition: background var(--tempo), color var(--tempo), border-color var(--tempo), transform var(--tempo); } .btn:hover { transform: translateY(-2px); } .btn--pelny { background: var(--wino); color: var(--krem); } .btn--pelny:hover { background: var(--java); color: var(--krem); } .btn--pusty { border: 1px solid var(--linia-mocna); color: var(--java); background: transparent; } .btn--pusty:hover { border-color: var(--wino); color: var(--wino); } .btn span { transition: transform var(--tempo); } .btn:hover span { transform: translateX(3px); } /* ========================================================================= HERO NA ZDJECIU Zdjecie idzie na cala szerokosc, tekst siedzi na nim po lewej, gdzie kadr jest najciemniejszy. Przyciemnienie jest kierunkowe, a nie rownomierne, wiec prawa strona zdjecia zostaje widoczna. ========================================================================= */ /* Tekst schodzi na dol kadru. Gora zdjecia zostaje wolna, bo tam siedzi psycholozka - przy wysrodkowanym bloku naglowek ladowal dokladnie na niej i albo ja zasłaniał, albo tracil kontrast. */ .hero { position: relative; overflow: hidden; min-height: clamp(560px, 86vh, 840px); display: flex; align-items: flex-end; padding: clamp(72px, 9vw, 130px) 0 clamp(52px, 6vw, 86px); background: var(--krem-tlo); } /* Jasne hero: niebo w ruchu. Tlo dostaje klatke z filmu jako obrazek, a na nim lezy sam film - dopoki sie nie wczyta albo jesli w ogole nie ruszy, kadr wyglada tak samo, tylko stoi. */ .hero__tlo { position: absolute; inset: 0; z-index: 0; pointer-events: none; background-color: var(--java); background-image: url('../images/hero-wisla.jpg'); background-size: cover; background-position: 62% 50%; } /* Film wchodzi lagodnie dopiero, gdy naprawde gra - inaczej przy wolnym laczu widac przez chwile czarny prostokat zamiast chmur. */ .hero__film { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 50% 50%; opacity: 0; transition: opacity .9s ease; } .hero__film[data-gra] { opacity: 1; } @media (prefers-reduced-motion: reduce) { .hero__film { display: none; } } /* Panel pod tekstem zniknal, wiec kontrast liter musi dac samo tlo. Zamiast rozjasniac cale hero, welon idzie ukosnie od lewej: kolumna z naglowkiem ma stale, jasne podloze, a prawa polowa kadru - chmury w ruchu - zostaje nietknieta. */ .hero__tlo::after { content: ""; position: absolute; inset: 0; /* Welon musi przykryc lewa kolumne z tekstem, ale zostawic wolny gorny pasek kadru - tam jest najjasniejsze niebo i to ono robi caly oddech tej sekcji. To ksztalt litery L, ktorego jeden gradient nie narysuje. Dlatego gradient poziomy dostaje maske pionowa - alfa obu sie mnozy. Gdyby przegladarka maski nie znala, welon po prostu pokryje cale hero, czyli tekst zostanie czytelny. */ background: linear-gradient(97deg, rgba(250, 247, 230, .93) 0%, rgba(250, 247, 230, .89) 28%, rgba(250, 247, 230, .55) 48%, rgba(250, 247, 230, .14) 66%, rgba(250, 247, 230, 0) 80%); -webkit-mask-image: linear-gradient(180deg, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, .45) 13%, rgba(0, 0, 0, 1) 20%, rgba(0, 0, 0, 1) 100%); mask-image: linear-gradient(180deg, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, .45) 13%, rgba(0, 0, 0, 1) 20%, rgba(0, 0, 0, 1) 100%); } /* Przyciemnienie kierunkowe: lewa kolumna z tekstem ma staly kontrast, prawa zostaje odslonieta, zeby splot plotna byl widoczny. */ .hero__uklad { position: relative; z-index: 2; display: block; } /* Panel pod tekstem: kremowy, lekko przezroczysty, z delikatnym rozmyciem tla. Zdjecie prześwituje, ale kontrast liter jest staly niezaleznie od tego, co akurat jest pod spodem. */ .hero__tresc { position: relative; max-width: min(600px, 62%); } .hero .etykieta { color: var(--wino); } .hero h1 { color: var(--java); margin-bottom: 0; } .hero h1 em { color: var(--wino); } /* Wersja EN: dwie rowne linie zamiast trzech poszarpanych - druga linia „what matters to you" nie moze sie zlamac na szerokim ekranie. */ @media (min-width: 901px) { .hero__tresc:has(.hero__h1--en) { max-width: min(720px, 66%); } .hero__h1--en em { white-space: nowrap; } } .hero__cta { display: flex; flex-wrap: wrap; gap: 14px; margin-top: 38px; } .hero .btn--pelny { background: var(--wino); color: var(--krem); } .hero .btn--pelny:hover { background: var(--java); color: var(--krem); } .hero .btn--pusty { border-color: rgba(74, 46, 39, .4); color: var(--java); background: rgba(255, 253, 244, .5); } .hero .btn--pusty:hover { border-color: var(--wino); color: var(--wino); } @media (max-width: 939px) { .hero__tresc { max-width: none; } /* Na telefonie tekst siedzi u gory na welonie, a dolna jedna trzecia kadru zostaje czysta - tam jest Wawel i woda. Hero jest wyzsze, zeby zdjecie w ogole mialo gdzie sie pokazac spod naglowka i przyciskow. */ .hero { min-height: clamp(600px, 86vh, 760px); align-items: flex-start; padding-top: 36px; } /* Osobny kadr pionowy: gora to sama mgla pod tekst, zamek i odbicie siedza w dolnej trzeciej czesci, pod przyciskami. */ .hero__tlo { background-image: url('../images/hero-wisla-mob.jpg'); background-position: 50% 50%; } .hero__tlo::after { background: linear-gradient(180deg, rgba(250, 247, 230, .9) 0%, rgba(250, 247, 230, .82) 30%, rgba(250, 247, 230, .42) 48%, rgba(250, 247, 230, .06) 62%, rgba(250, 247, 230, 0) 76%); } } /* ========================================================================= SEKCJE ========================================================================= */ .sekcja { position: relative; padding: clamp(62px, 7.5vw, 116px) 0; } .sekcja--papier { background: var(--karta); } .sekcja > .strona { position: relative; z-index: 1; } .glowa { max-width: 720px; margin-bottom: clamp(38px, 4vw, 62px); } .glowa--srodek { margin-inline: auto; text-align: center; } .glowa__lid { color: var(--ziemia); font-size: 16.5px; margin-top: 20px; max-width: 56ch; } .glowa--srodek .glowa__lid { margin-inline: auto; } /* ========================================================================= OBSZARY WSPARCIA - biale kafelki ========================================================================= */ /* Ciemny highlight kladziony jak pasek markera. box-decoration-break sprawia, ze przy zawinieciu wiersza kazdy fragment dostaje wlasne zaokraglenie, zamiast jednego rozciagnietego prostokata. */ .obszary { list-style: none; margin: 0 0 18px; padding: 0; display: grid; gap: 14px; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); } /* Karty biale na papierze, bez unoszenia - to lista, nie odnosniki. */ .obszary li { background: var(--karta); border: 1px solid var(--linia); border-radius: var(--r-karty); padding: 22px 22px 20px; } .kolko { display: block; margin-bottom: 12px; font-size: 12px; font-weight: 500; letter-spacing: .12em; color: var(--wino); } .obszary h3 { margin-bottom: 5px; font-weight: 500; font-size: clamp(17px, 1.3vw, 19px); } .obszary p { color: var(--ziemia); font-size: 14px; margin: 0; line-height: 1.55; } .obszary__inne { color: var(--ziemia); font-size: 14.5px; margin: 0 0 clamp(30px, 3.5vw, 48px); padding-left: 4px; } .krok { display: grid; gap: 24px; align-items: center; background: var(--blekit); border-radius: var(--r-duza); padding: clamp(30px, 3.6vw, 48px); } @media (min-width: 860px) { .krok { grid-template-columns: minmax(0, 1fr) auto; gap: 44px; } } .krok h3 { font-size: clamp(22px, 2.1vw, 29px); font-weight: 500; margin-bottom: 12px; } .krok p { color: var(--ziemia); margin: 0; max-width: 58ch; } .krok__cta { display: flex; flex-wrap: wrap; gap: 12px; } /* Runda 21: drugi przycisk w ramce krok bialy i wypelniony - kontur na blekicie ginal. */ .krok .btn--pusty { background: #FFFFFF; border-color: #FFFFFF; color: var(--java); } .krok .btn--pusty:hover { background: var(--java); border-color: var(--java); color: var(--krem); } /* ========================================================================= PAS Z CYTATEM - film w petli ========================================================================= */ .cytat-pas { position: relative; overflow: hidden; padding: clamp(64px, 7.5vw, 108px) 0; background: var(--java); color: var(--krem); } .cytat-pas__tlo { position: absolute; inset: 0; z-index: 0; pointer-events: none; } /* Klatka z filmu lezy pod spodem jako obraz. Jesli film sie nie wczyta albo przegladarka odmowi autoodtwarzania, tlo i tak wyglada jak zaplanowane. */ .cytat-pas__tlo { background-image: url('../images/foto-cytat.jpg'); background-size: cover; background-position: center; } /* Klip ma cztery sekundy i twardy koniec, wiec zapetlony na wprost tnie obraz. Dwa nakladajace sie odtwarzacze przenikaja sie na sekunde przed koncem - petla przestaje byc zauwazalna. */ .cytat-pas__film { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; display: block; opacity: 0; transition: opacity 1.2s linear; } .cytat-pas__tlo::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(35, 24, 21, .76), rgba(35, 24, 21, .84)); } .cytat-pas .strona { position: relative; z-index: 1; text-align: center; } .cytat-pas__tresc { margin: 0 auto; max-width: 22ch; font-family: var(--kursywa); font-size: clamp(27px, 3.6vw, 50px); font-weight: 400; font-style: italic; line-height: 1.34; letter-spacing: -.01em; color: var(--krem); } @media (min-width: 700px) { .cytat-pas__tresc { max-width: 26ch; } } .cytat-pas__podpis { margin: 30px 0 0; font-size: 11.5px; letter-spacing: .22em; text-transform: uppercase; color: rgba(245, 239, 198, .68); } /* ========================================================================= O MNIE ========================================================================= */ .o-mnie { display: grid; gap: clamp(30px, 4vw, 58px); align-items: start; } @media (min-width: 900px) { .o-mnie { grid-template-columns: minmax(0, 360px) minmax(0, 1fr); } } .o-mnie__portret { margin: 0; position: relative; } .o-mnie__podpis { margin: 12px 0 0; text-align: center; font-size: 12px; font-weight: 600; letter-spacing: .2em; text-transform: uppercase; color: var(--ziemia); } .o-mnie__portret img { width: 100%; border-radius: var(--r-duza); box-shadow: var(--cien); transition: transform .5s cubic-bezier(.4, 0, .2, 1), box-shadow .5s; } .o-mnie__portret:hover img { transform: translateY(-6px); box-shadow: var(--cien-mocny); } .o-mnie__tekst p { color: var(--ziemia); } .wyroznione { font-family: var(--kursywa); font-size: clamp(23px, 2.2vw, 30px); font-weight: 400; font-style: italic; line-height: 1.42; color: var(--java) !important; margin-bottom: 22px; } .drobne { font-size: 13.5px; color: var(--ziemia); padding-top: 18px; margin-top: 22px; border-top: 1px solid var(--linia); } .przed-po { display: grid; gap: 18px; margin-top: clamp(38px, 4vw, 62px); } @media (min-width: 820px) { .przed-po { grid-template-columns: 1fr 1fr; } } .przed-po__kolumna { border: 1px solid var(--linia); border-radius: var(--r-duza); padding: clamp(28px, 3vw, 40px); transition: transform var(--tempo), box-shadow var(--tempo); } .przed-po__kolumna--akcent { background: var(--krem); border-color: transparent; } .przed-po h3 { font-weight: 500; margin-bottom: 20px; } .przed-po ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 13px; } .przed-po li { position: relative; padding-left: 30px; font-size: 15px; color: var(--ziemia); line-height: 1.62; } .przed-po li::before { content: ""; position: absolute; left: 0; top: 14px; width: 14px; height: 1px; background: var(--linia-mocna); } .przed-po__kolumna--akcent li::before { left: 1px; top: 8px; width: 14px; height: 7px; background: none; border-left: 1.4px solid var(--wino); border-bottom: 1.4px solid var(--wino); transform: rotate(-45deg); } /* ========================================================================= MATERIALY DO POBRANIA - kafelki ze zdjeciem, tla po kolei: biel, krem, papier, karta - zeby cztery sekcje z rzedu dalo sie od siebie odroznic bez plaskiej plamy koloru. ========================================================================= */ /* Materialy siedza na Transparent Yellow z kratka - ta sama siatka co w obszarach, wiec dwie sekcje z cwiczeniami sa rozpoznawalne jako para. */ #materialy { background: var(--krem-tlo); } #arkusze { background: var(--krem-tlo); } /* Dokumenty na bieli z papierem. Marker pod zszedl razem z kolorem tla: kremowy pasek na bieli i tak bylby niewidoczny, wiec slowo wraca do szeryfowej kursywy, ktora niesie akcent w reszcie strony. */ /* Runda 12: sekcje materialow ida naprzemiennie papier / biel. Wczesniej arkusze i psychoedukacja mialy ten sam papier pod rzad, a zolte kafle ksiazek lezaly na zoltawym tle - blady zolty bral wiecej niz biel. */ #psychoedukacja { background: var(--karta); } #psychoedukacja .kafel { border-color: rgba(35, 24, 21, .16); } #dokumenty { background: var(--krem-tlo); } #dokumenty h2 { color: var(--java); } #dokumenty .etykieta { color: var(--wino); } #dokumenty .glowa__lid { color: var(--ziemia); } #dokumenty .kafel { border-color: rgba(35, 24, 21, .16); } #ksiazki { background: var(--karta); } #ksiazki .kratka::before, #ksiazki::before { --kratka: rgba(35, 24, 21, .1); } /* Cztery w rzedzie przy pelnej szerokosci, trzy przy wezszym kadrze. */ .kafle { display: grid; gap: 16px; grid-template-columns: repeat(auto-fit, minmax(248px, 1fr)); } .kafel { position: relative; display: flex; flex-direction: column; background: var(--karta); color: var(--java); border: 1px solid var(--linia); border-radius: var(--r-karty); overflow: hidden; transition: transform var(--tempo), box-shadow var(--tempo), border-color var(--tempo); } .kafel:hover { transform: translateY(-5px); box-shadow: var(--cien-mocny); border-color: var(--linia-mocna); color: var(--java); } /* Pasek koloru zamiast zdjecia. Ma stala wysokosc, wiec tresc we wszystkich kafelkach zaczyna sie na tej samej linii, a stopka i tak jest wypychana na dol - rzedy zostaja rowne. */ /* Pasek nad tytulem to ten sam papier w kratke co w tle sekcji, tylko o ton jasniejszy. Arkusze rozroznia sie po ikonie, nie po kolorze - szesc plam koloru obok siebie przekrzykiwalo tytuly. */ .kafel__pasek { display: flex; align-items: center; justify-content: center; width: 46px; height: 46px; flex: none; margin: 22px 22px 0; border: 1px solid var(--linia-mocna); border-radius: 50%; color: var(--wino); background: transparent; transition: background var(--tempo), color var(--tempo), border-color var(--tempo); } .kafel__pasek svg { width: 22px; height: 22px; } .kafel:hover .kafel__pasek { background: var(--wino); border-color: var(--wino); color: var(--krem); } /* Trzy rodziny materialow, trzy kolory paska: cwiczenia Sceptre Red, dokumenty Potting Soil, ksiazki Cerulean. Kolor mowi, z ktora grupa ma sie do czynienia, zanim przeczyta sie tytul. */ #dokumenty .kafel__pasek { color: var(--wino); } #dokumenty .kafel:hover .kafel__pasek, .kafel:active .kafel__pasek, .kafel:focus-visible .kafel__pasek { background: var(--wino); border-color: var(--wino); color: var(--krem); } .kafel:active .kafel__stopka, .kafel:focus-visible .kafel__stopka { background: var(--wino); border-color: var(--wino); color: var(--krem); } .kafel__tresc { display: flex; flex-direction: column; flex: 1; padding: 16px 22px 20px; } .kafel h3 { font-weight: 500; font-size: clamp(17px, 1.3vw, 19px); margin-bottom: 9px; } .kafel p { color: var(--ziemia); font-size: 14px; line-height: 1.6; margin-bottom: 20px; } /* Ramka wokol "Pobierz PDF". Caly kafelek jest odnosnikiem, ale bez tego znaku nic na nim nie wyglada na klikalne. */ .kafel__stopka { margin-top: auto; display: flex; align-items: center; justify-content: center; gap: 9px; padding: 12px 14px; border: 1px solid var(--linia-mocna); border-radius: 999px; font-size: 12.5px; font-weight: 500; letter-spacing: .1em; text-transform: uppercase; color: var(--wino); transition: background var(--tempo), color var(--tempo), border-color var(--tempo); } .kafel:hover .kafel__stopka { background: var(--wino); border-color: var(--wino); color: var(--krem); } .kafel__stopka::after { content: "\2192"; transition: transform var(--tempo); } .kafel:hover .kafel__stopka::after { transform: translateX(4px); } /* ========================================================================= PYTANIA - pelna moc Transparent Yellow ========================================================================= */ /* Pytania na Potting Soil. Ciemny pas przed rezerwacja domyka strone i oddziela ja od zoltych materialow. */ /* Pytania i rezerwacja maja ten sam czerwony, wiec bez tej kreski dolna czesc strony czytalaby sie jako jeden ciag na dwa tysiace pikseli. */ /* Pytania na fotografii ciemnego, brazowego splotu. Tekstura zamiast plaskiego koloru daje sekcji wlasny charakter i oddziela ja od czerwonej rezerwacji ponizej - bez dokladania kreski na styku. */ /* Pytania biora plaski Sceptre Red, a brazowa tekstura przenosi sie do rezerwacji. Zamiana miejscami, wiec ciezsza powierzchnia lezy na dole strony, tam gdzie sa karty kontaktu. */ /* Pytania na Transparent Yellow, napisy w Sceptre Red. Zamiast plaskiej plamy koloru sekcja dostaje papier: kafelek tex-papier.png sklada sie sam ze soba (liczony w dziedzinie czestotliwosci, wiec jest okresowy) i tylko przyciemnia - dlatego dziala tak samo na kremie, jak na bieli w dokumentach. */ #faq { background: var(--karta); } #faq h2, #faq .etykieta { color: var(--wino); } #faq .glowa__lid { color: var(--ziemia); } .faq { max-width: 840px; margin-inline: auto; display: grid; gap: 12px; } .faq details { background: var(--krem-tlo); border: 1px solid var(--linia); border-radius: var(--r-karty); padding: 0 26px; transition: border-color var(--tempo), box-shadow var(--tempo); } .faq details:hover { border-color: var(--linia-mocna); } .faq details[open] { border-color: var(--wino); box-shadow: var(--cien); } .faq summary { list-style: none; cursor: pointer; display: flex; align-items: center; justify-content: space-between; gap: 22px; padding: 26px 4px; font-size: clamp(16.5px, 1.4vw, 19px); font-weight: 400; color: var(--wino); transition: color var(--tempo); } .faq summary:hover { color: var(--wino); } .faq summary::-webkit-details-marker { display: none; } .faq summary::after { content: ""; flex: none; width: 11px; height: 11px; border-right: 1.4px solid var(--wino); border-bottom: 1.4px solid var(--wino); transform: rotate(45deg) translate(-3px, -3px); transition: transform var(--tempo); } .faq details[open] summary { color: var(--wino); } .faq details[open] summary::after { transform: rotate(-135deg) translate(-3px, -3px); } .faq details p { color: var(--ziemia); font-size: 15.5px; padding: 0 0 26px; margin: 0; max-width: 66ch; } /* ========================================================================= REZERWACJA - panel w kolorze Sceptre Red, karty na papierze Odwrocenie wzgledem poprzedniej rundy: tlo bierze mocny czerwony z palety, a karty sa jasne. Tekst wraca na ciemny na jasnym, wiec caly blok czyta sie latwiej niz bialy tekst na fotografii. ========================================================================= */ .sekcja--ciemna { position: relative; overflow: hidden; background-color: var(--java); color: var(--krem); background-image: linear-gradient(180deg, rgba(35, 24, 21, .86), rgba(35, 24, 21, .94)), url('../images/tex-kontakt.jpg'); background-size: cover, cover; background-position: center, center; } /* Bez fotografii pod spodem: kontakt i stopka maja byc tym samym, plaskim Sceptre Red, zeby dolna czesc strony czytala sie jako jeden blok. */ .sekcja--ciemna h2 { color: var(--krem); } /* Naglowek rezerwacji idzie w calosci Poppinsem i w jednym kolorze - to sekcja transakcyjna, kursywa robila z niej motto. */ .sekcja--ciemna h2 em { color: var(--blekit); } .sekcja--ciemna .etykieta { color: var(--blekit); } /* Lewa kolumna to kontakt i mapa jeden pod drugim, prawa to kalendarz ciagnacy sie przez oba wiersze. Platnosc dostaje osobny pas pod spodem. */ .rezerwacja { display: grid; gap: 18px; align-items: start; } /* Na telefonie kalendarz idzie pierwszy - po to ktos przewinal do rezerwacji. */ @media (max-width: 959px) { .karta--kalendarz { order: -1; } } @media (min-width: 960px) { /* Wiersze auto + 1fr: kontakt zostaje zwarty, a karta z mapa bierze cala reszte wysokosci, ktora wyznacza kalendarz po prawej. Sama mapa wypelnia karte do dolu, wiec obie kolumny koncza sie w jednej linii. */ .rezerwacja { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); grid-template-rows: auto 1fr; align-items: stretch; } .rezerwacja > .karta:nth-child(1) { grid-column: 1; grid-row: 1; } .rezerwacja > .karta:nth-child(2) { grid-column: 1; grid-row: 2; display: flex; flex-direction: column; } .rezerwacja > .karta:nth-child(2) .kalendarz { flex: 1; min-height: 340px; position: relative; } .rezerwacja > .karta:nth-child(2) .kalendarz iframe { position: absolute; inset: 0; height: 100%; } /* Kalendarz ciagnie sie przez oba wiersze i konczy dokladnie tam, gdzie mapa po lewej. Widget jest nizszy niz ramka, wiec bialy podklad rozciaga sie na reszte - styku nie widac, bo obie plaszczyzny sa biale. */ .karta--kalendarz { grid-column: 2; grid-row: 1 / span 2; display: flex; flex-direction: column; } .karta--kalendarz .zl-widget { flex: 1; } } /* Runda 18: rezerwacja z 5 kart do 3, bez mapy (adres i tak otwiera Mapy Google). Desktop: kalendarz | formularz obok siebie, pod nimi pas kontakt + platnosc. Telefon: kalendarz, formularz, kontakt. */ .rezerwacja--r18 .karta--formularz { margin-top: 0; display: block; } .rezerwacja--r18 .formularz__opis { margin-bottom: 18px; } .kontakt__platnosc { margin-top: 24px; padding-top: 22px; border-top: 1px solid rgba(35, 24, 21, .1); } .kontakt__platnosc p { color: var(--ziemia); font-size: 14.5px; margin: 0 0 14px; } .kontakt__platnosc .konto { margin: 0 !important; } @media (min-width: 700px) { .karta--kontakt .dane { grid-template-columns: minmax(0, 1.35fr) minmax(0, 1fr); column-gap: 24px; } } @media (min-width: 960px) { .rezerwacja.rezerwacja--r18 { grid-template-columns: minmax(0, 1.08fr) minmax(0, 1fr); grid-template-rows: auto auto; } .rezerwacja.rezerwacja--r18 > .karta { grid-column: auto; grid-row: auto; } .rezerwacja.rezerwacja--r18 > .karta--kalendarz { display: flex; flex-direction: column; } .rezerwacja.rezerwacja--r18 > .karta--formularz { display: block; } .rezerwacja.rezerwacja--r18 > .karta.karta--kontakt { grid-column: 1 / -1; display: grid; align-items: start; grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr); column-gap: 48px; } .karta--kontakt > .karta__tytul { grid-column: 1; } .karta--kontakt > .dane { grid-column: 1; } .kontakt__platnosc { grid-column: 2; grid-row: 1 / span 2; margin-top: 0; padding: 0 0 0 40px; border-top: 0; border-left: 1px solid rgba(35, 24, 21, .1); } } .karta { background: #FFFFFF; border: 1px solid rgba(35, 24, 21, .1); border-radius: var(--r-duza); padding: clamp(26px, 3vw, 38px); color: var(--java); } .karta h3 { color: var(--java); } .karta__tytul { font-size: 11.5px; font-weight: 600; letter-spacing: .22em; text-transform: uppercase; color: var(--ziemia) !important; margin: 0 0 22px; } .dane { display: grid; gap: 4px; } .dana { display: flex; align-items: center; gap: 16px; padding: 13px 12px; margin-inline: -12px; border-radius: var(--r-mala); color: var(--java); transition: background var(--tempo); } .dana:hover { background: rgba(165, 188, 214, .24); color: var(--java); } .dana__ikona { flex: none; display: inline-flex; align-items: center; justify-content: center; width: 42px; height: 42px; border-radius: 50%; background: var(--blekit); color: var(--java); transition: background var(--tempo); } .dana__ikona svg { width: 18px; height: 18px; } .dana:hover .dana__ikona { background: var(--java); color: var(--krem); } .dana > span:last-child { display: grid; gap: 2px; min-width: 0; } .dana strong { font-weight: 500; font-size: 15px; color: var(--java); overflow-wrap: anywhere; } .dana strong + span { font-size: 12.5px; color: var(--ziemia); } .karta--platnosc p { color: var(--ziemia); font-size: 14.5px; } .konto { font-size: clamp(17px, 1.7vw, 21px); font-weight: 500; letter-spacing: .03em; color: var(--java) !important; margin: 18px 0 !important; } .kopiuj { font-family: var(--font); font-size: 13.5px; padding: 12px 26px; border-radius: 999px; cursor: pointer; flex: none; background: transparent; color: var(--wino); border: 1px solid rgba(77, 14, 18, .45); transition: background var(--tempo), color var(--tempo), border-color var(--tempo); } .kopiuj:hover { background: var(--wino); color: var(--krem); border-color: var(--wino); } /* Platnosc: numer konta i przycisk obok siebie, zeby pas nie rosl w gore. */ .karta--platnosc { margin-top: 18px; display: grid; gap: 18px 40px; align-items: center; padding: clamp(24px, 2.8vw, 34px); } @media (min-width: 860px) { .karta--platnosc { grid-template-columns: minmax(0, 1fr) auto; } } .platnosc__konto { display: flex; flex-wrap: wrap; align-items: center; gap: 14px 22px; } .karta--platnosc .konto { margin: 0 !important; } /* Formularz kontaktowy (10.10.2026): karta na cala szerokosc pod rezerwacja, na desktopie opis po lewej, pola po prawej. Wysylka przez hub (main.js). */ .karta--formularz { margin-top: 18px; display: grid; gap: 22px 48px; padding: clamp(24px, 3vw, 40px); } @media (min-width: 900px) { .karta--formularz { grid-template-columns: minmax(0, 1fr) minmax(0, 1.6fr); } } .formularz__opis p { color: var(--ziemia); font-size: 15px; line-height: 1.6; margin: 0 0 12px; } .formularz__opis .formularz__uwaga { font-size: 13.5px; color: rgba(74, 46, 39, .8); } .formularz { display: grid; gap: 16px 18px; } @media (min-width: 620px) { .formularz { grid-template-columns: 1fr 1fr; } } .pole { display: flex; flex-direction: column; gap: 7px; font-size: 13px; font-weight: 500; color: var(--java); } .pole--szer, .formularz__rodo, .formularz__dol, .formularz-status { grid-column: 1 / -1; } .pole .opcjonalnie { font-weight: 400; color: rgba(74, 46, 39, .7); } .pole input, .pole textarea { font: 400 15px/1.5 var(--font); color: var(--java); background: var(--krem-tlo); border: 1px solid rgba(35, 24, 21, .16); border-radius: var(--r-mala); padding: 12px 14px; width: 100%; transition: border-color var(--tempo), background var(--tempo), box-shadow var(--tempo); } .pole textarea { resize: vertical; min-height: 120px; } .pole input:focus, .pole textarea:focus { outline: none; background: #FFFFFF; border-color: var(--wino); box-shadow: 0 0 0 3px rgba(77, 14, 18, .12); } .pulapka { position: absolute !important; left: -9999px; width: 1px; height: 1px; opacity: 0; } .formularz__rodo { margin: 0; font-size: 12.5px; line-height: 1.55; color: rgba(74, 46, 39, .78); } .formularz__dol { display: flex; flex-wrap: wrap; align-items: center; gap: 14px; } .formularz-status { margin: 0; font-size: 14px; color: var(--wino); } .formularz__dzieki { padding: 28px 0 8px; } .formularz__slonce { width: 92px; height: auto; display: block; margin-bottom: 22px; } .formularz__dzieki h4 { font-size: 26px; font-weight: 500; letter-spacing: -.02em; margin: 0 0 10px; color: var(--java); } .formularz__dzieki p { margin: 0 0 26px; color: var(--ziemia); font-size: 15.5px; line-height: 1.6; max-width: 40ch; } /* Widget ZnanyLekarz sam wylicza sobie wysokosc i przysyla ja przez postMessage, wiec nie narzucamy mu height - tylko bialy podklad. */ .zl-widget { border-radius: var(--r-karty); overflow: hidden; background: #fff; min-height: 300px; } .zl-widget iframe { display: block; width: 100%; border: 0; } .zl-zapas { display: block; padding: 22px; color: var(--java); font-size: 14.5px; text-align: center; } .kalendarz { border-radius: var(--r-karty); overflow: hidden; background: #fff; border: 1px solid rgba(35, 24, 21, .12); } .kalendarz iframe { display: block; width: 100%; height: 420px; border: 0; } @media (max-width: 620px) { .kalendarz iframe { height: 280px; } } /* ========================================================================= STOPKA - ten sam czerwony co rezerwacja, tylko cisza i mniejsza skala ========================================================================= */ .dol { background: var(--java); color: rgba(245, 239, 198, .74); border-top: 1px solid rgba(245, 239, 198, .18); padding: 40px 0 0; } .dol > .strona:first-child { display: grid; gap: 24px; } @media (min-width: 780px) { .dol > .strona:first-child { grid-template-columns: 1.7fr 1fr 1fr; } } .dol__blok p { color: rgba(245, 239, 198, .72); font-size: 13px; line-height: 1.62; } .dol__blok a { color: var(--krem); display: inline-block; padding: 5px 0; } .dol__blok a:hover { color: var(--blekit); } .dol__imie { font-size: 15px; font-weight: 500; color: var(--krem) !important; margin-bottom: 5px; } .dol__blok .etykieta { font-size: 11px; color: var(--blekit); margin-bottom: 8px; } .dol__stopka { display: flex; flex-wrap: wrap; gap: 6px 24px; justify-content: space-between; margin-top: 30px; padding: 16px 0; border-top: 1px solid rgba(245, 239, 198, .16); font-size: 11.5px; color: rgba(245, 239, 198, .6); } .dol__stopka { align-items: center; } /* Podpis wykonawcy (Taro Media) - cichy, w kolorze stopki, piesek z logo agencji. */ .tworcy { display: inline-flex; align-items: center; gap: 9px; color: rgba(245, 239, 198, .6); transition: color var(--tempo); } .tworcy img { width: 24px; height: auto; display: block; opacity: .75; transition: opacity var(--tempo); } .tworcy b { font-weight: 600; color: rgba(245, 239, 198, .85); } .tworcy:hover { color: var(--krem); } .tworcy:hover img { opacity: 1; } /* ========================================================================= DROBIAZGI ========================================================================= */ ::selection { background: rgba(77, 14, 18, .16); } /* Wezwanie przyklejone do dolu ekranu na telefonie. Bez pasa pod spodem - sam ciemny przycisk plywa nad trescia, a cien odrywa go od tla. Chowa sie, gdy sekcja rezerwacji jest w kadrze - wtedy dubluje to, co widac. */ .pasek-cta { display: none; } @media (max-width: 760px) { /* Zapas pod plywajacy przycisk siedzi w stopce, nie w body - inaczej pod ciemna stopka zostawal jasny pas papieru (runda 14). */ .dol { padding-bottom: 86px; } .pasek-cta { position: fixed; left: 0; right: 0; bottom: 0; z-index: 70; display: flex; padding: 0 16px calc(14px + env(safe-area-inset-bottom)); background: none; border-top: 0; /* Pas jest tylko ramka ukladu, wiec nie lapie klikniec obok przycisku. */ pointer-events: none; transform: translateY(0); transition: transform var(--tempo); } .pasek-cta.schowany { transform: translateY(130%); } .pasek-cta .btn { pointer-events: auto; flex: 1; justify-content: center; padding: 16px 16px; font-size: 15.5px; } .pasek-cta .btn--pelny { background: var(--java); color: var(--krem); /* Kremowy obrys jest niewidoczny na papierze, ale odcina przycisk od ciemnych sekcji, nad ktorymi tez przeplywa. */ border: 1px solid rgba(245, 239, 198, .22); box-shadow: 0 6px 16px rgba(35, 24, 21, .22), 0 16px 40px rgba(35, 24, 21, .26); } .pasek-cta .btn--pelny:hover { background: var(--wino); color: var(--krem); } } @media (max-width: 480px) { body { font-size: 16px; } .hero__cta .btn, .krok__cta .btn { width: 100%; justify-content: center; } } /* ========================================================================= PODSTRONA MATERIALOW ========================================================================= */ /* Naglowek podstrony: ten sam blekit co sekcja materialow na stronie glownej, zeby przejscie miedzy nimi bylo oczywiste. */ .podhero { position: relative; overflow: hidden; background: var(--java); color: var(--krem); padding: clamp(56px, 7vw, 104px) 0 clamp(52px, 6vw, 92px); } /* Zdjecie biurka z notesem - jedyna fotografia na tej podstronie, wiec od razu mowi, o czym ona jest. Przyciemnienie kierunkowe, zeby tekst po lewej mial staly kontrast niezaleznie od kadru. */ .podhero__tlo { position: absolute; inset: 0; z-index: 0; pointer-events: none; background-image: url('../images/foto-notes.jpg'); background-size: cover; background-position: 60% center; } .podhero__tlo::after { content: ""; position: absolute; inset: 0; background: linear-gradient(90deg, rgba(35, 24, 21, .92) 0%, rgba(35, 24, 21, .74) 48%, rgba(35, 24, 21, .34) 100%), /* Bordowa poswiata zeszla z .34 na .12 - przy karmazynowym zdjeciu robila klimat, przy ocieplonym zawracala kolor, ktory wlasnie z niego zdjelismy. */ linear-gradient(180deg, rgba(77, 14, 18, .12), transparent 60%); } .podhero .strona { position: relative; z-index: 1; } .podhero .etykieta { color: var(--blekit); } .podhero h1 { color: #FAF7E6; font-size: clamp(34px, 4.6vw, 60px); margin-bottom: 20px; } .podhero h1 em { color: #FAF7E6; } .podhero__lid { color: rgba(250, 247, 230, .86); font-size: 16.5px; max-width: 56ch; } .podhero__wroc { margin-top: 26px; font-size: 14px; } .podhero__wroc a { color: var(--blekit); } .podhero__wroc a:hover { color: var(--krem); } .wiecej { margin-top: clamp(28px, 3vw, 40px); text-align: center; } /* Wypelniona ramka zamiast konturu - to jedyne przejscie na podstrone, wiec ma wygladac na przycisk, a nie na dopisek. */ .wiecej .btn--pusty { background: var(--blekit); border-color: var(--blekit); color: var(--java); } .wiecej .btn--pusty:hover { background: var(--java); border-color: var(--java); color: var(--krem); } /* --- Biblioteczka --------------------------------------------------------- Kazda pozycja dostaje pionowy grzbiet w kolorze z palety - to jedyne miejsce, gdzie kolory ida po kolei, wiec lista czyta sie jak polka. */ /* Ksiazki chodza w tych samych kafelkach co arkusze. Lista z cienkim grzbietem ginela na tle sekcji - kafelek ma ramke i wlasne tlo, wiec kazda pozycja jest osobnym obiektem, tak jak reszta strony. */ .kafle--ksiazki { grid-template-columns: repeat(auto-fit, minmax(290px, 1fr)); } /* Jeden dokument (zgoda rodzica) - auto-fit rozciagal go na cala szerokosc. */ #dokumenty .kafle--ksiazki { grid-template-columns: repeat(auto-fill, minmax(290px, 1fr)); } /* Kafelek ksiazki jest w calosci w Transparent Yellow. Bez paska u gory i bez ikony - tytul z autorem wystarcza, a plama koloru odroznia biblioteczke od arkuszy mocniej niz kolorowy pasek. */ .kafel--ksiazka { cursor: default; background: var(--karta); border-color: rgba(35, 24, 21, .14); } .kafel--ksiazka .kafel__tresc { padding: 22px 24px 24px; } .kafel--ksiazka:hover { transform: none; box-shadow: none; border-color: var(--linia); } .kafel--ksiazka:hover { background: var(--karta); } /* Runda 13: okladka stoi na zoltej "polce" u gory kafla - zolty zostaje akcentem, tresc na bieli. */ .ksiazka__polka { display: flex; align-items: center; justify-content: center; height: 236px; background: var(--krem); border-bottom: 1px solid rgba(35, 24, 21, .1); } .ksiazka__polka img { height: 188px; width: auto; display: block; border-radius: 2px 4px 4px 2px; box-shadow: 0 2px 4px rgba(35, 24, 21, .14), 0 14px 28px rgba(35, 24, 21, .2); } .kafel--ksiazka .kafel__tresc > p:not(.ksiazka__autor) { font-size: 14.5px; line-height: 1.6; color: var(--ziemia); margin: 0; } .ksiazka__autor { font-family: var(--kursywa); font-style: italic; font-size: 14.5px; color: var(--ziemia); margin: 0 0 10px !important; } /* ========================================================================= TELEFON Na waskim ekranie dziewiec obszarow i osiem materialow ustawionych w slup robilo z jednej sekcji ekran i pol przewijania. Obie listy zamieniaja sie w pasy przesuwane w bok: karta ma 78 % szerokosci, wiec nastepna zawsze wystaje zza krawedzi i widac, ze jest co przesuwac. ========================================================================= */ @media (max-width: 760px) { /* Runda 20: obszary w dwoch kolumnach - osiem krotkich hasel czyta sie jednym rzutem oka, a sekcja jest o polowe nizsza niz lista pod soba. */ .obszary { grid-template-columns: 1fr 1fr; gap: 8px; } .obszary > li { padding: 14px 13px 13px; } .obszary > li .kolko { margin: 0 0 6px; font-size: 11px; } .obszary > li h3 { font-size: 15px; line-height: 1.25; margin: 0 0 4px; hyphens: auto; } .obszary > li p { font-size: 12.5px; line-height: 1.45; } .kafle { grid-template-columns: 1fr; gap: 12px; } /* Mniej tekstu na ekran: krotsze interlinie, mniejsze stopnie pisma i ciasniejsze marginesy sekcji. Tresc zostaje ta sama, tylko przestaje zajmowac trzy ekrany. */ .sekcja { padding: 48px 0 52px; } .glowa { margin-bottom: 28px; } .glowa__lid { font-size: 15px; margin-top: 14px; } .obszary p, .kafel p { font-size: 13.5px; line-height: 1.55; } .o-mnie__tekst p { font-size: 15px; line-height: 1.65; } .o-mnie { gap: 22px; } .przed-po { gap: 12px; margin-top: 28px; } .przed-po__kolumna { padding: 24px 22px; } .przed-po li { font-size: 14.5px; } .drobne { font-size: 12.5px; } /* Portret zajmowal cala szerokosc ekranu i wypychal tekst pod zagiecie. */ .o-mnie__portret img { max-width: 240px; margin-inline: auto; } .cytat-pas { padding: 56px 0; } .cytat-pas__tresc { font-size: 24px; line-height: 1.3; } .faq details { padding: 0 20px; } .faq summary { padding: 20px 0; font-size: 16px; } .faq details p { font-size: 14.5px; padding-bottom: 22px; } .karta { padding: 24px 20px; } .dana strong { font-size: 14px; } .karta--platnosc { gap: 14px; } .platnosc__konto { gap: 12px; } .konto { font-size: 16px !important; } .dol { padding: 34px 0 0; } .dol__stopka { margin-top: 22px; } } /* ========================================================================= RUNDA 20 - TELEFON: KARUZELE, ZAKLADKI REZERWACJI Karty, ktore na telefonie staly w slupie (przed/po, arkusze, ksiazki), jada w bok. Pokazana karta stoi na srodku ekranu, sasiednie wystaja z bokow, a pod spodem sa strzalki z licznikiem. Strzalki i licznik dokleja main.js; bez JS zostaje zwykly pas przesuwany palcem. ========================================================================= */ .karuzela-nav, .rezerwacja-zakladki, .o-mnie__wiecej { display: none; } @media (max-width: 760px) { .karuzela { display: flex !important; gap: 12px; position: relative; width: 100vw; margin-inline: calc(50% - 50vw); padding: 4px 9vw 8px; overflow-x: auto; overscroll-behavior-x: contain; scroll-snap-type: x mandatory; scroll-padding-inline: 9vw; scrollbar-width: none; -webkit-overflow-scrolling: touch; } .karuzela::-webkit-scrollbar { display: none; } .karuzela > * { flex: 0 0 82vw; max-width: 82vw; scroll-snap-align: center; scroll-snap-stop: always; } .karuzela > .kafel:hover { transform: none; box-shadow: none; } .karuzela-nav { display: flex; align-items: center; justify-content: center; gap: 18px; margin-top: 16px; } .karuzela-nav button { width: 44px; height: 44px; border-radius: 50%; flex: none; display: inline-flex; align-items: center; justify-content: center; background: var(--karta); color: var(--java); cursor: pointer; border: 1px solid var(--linia-mocna); transition: background var(--tempo), color var(--tempo), opacity var(--tempo); } .karuzela-nav button:active { background: var(--java); color: var(--krem); } .karuzela-nav button:disabled { opacity: .32; cursor: default; } .karuzela-nav svg { width: 18px; height: 18px; } .karuzela-nav__licznik { min-width: 54px; text-align: center; font-size: 13px; font-weight: 500; letter-spacing: .08em; color: var(--ziemia); } /* Rezerwacja: trzy karty jako zakladki. Bez JS (brak klasy) karty stoja pod soba jak wczesniej. */ .ma-zakladki .rezerwacja-zakladki { display: grid; grid-template-columns: repeat(3, 1fr); gap: 4px; padding: 4px; margin: 0 auto 16px; max-width: 420px; background: rgba(245, 239, 198, .1); border: 1px solid rgba(245, 239, 198, .18); border-radius: 999px; } .rezerwacja-zakladki button { font: 500 14px/1 var(--font); color: rgba(245, 239, 198, .82); background: transparent; border: 0; border-radius: 999px; padding: 13px 6px; cursor: pointer; transition: background var(--tempo), color var(--tempo); } .rezerwacja-zakladki button[aria-selected="true"] { background: var(--krem); color: var(--java); } .ma-zakladki .rezerwacja > .karta:not(.pokazana) { display: none !important; } /* Wyslij wiadomosc i numer konta na srodku karty. */ .formularz__dol { justify-content: center; } .formularz__dol .btn { width: 100%; justify-content: center; } .kontakt__platnosc { text-align: center; } .kontakt__platnosc .karta__tytul { text-align: center; } .platnosc__konto { flex-direction: column; justify-content: center; gap: 12px; } .kontakt__platnosc .konto { font-size: 15.5px !important; letter-spacing: .02em; } .kopiuj { min-width: 180px; } .formularz__dzieki { text-align: center; } .formularz__slonce { margin-inline: auto; } .formularz__dzieki p { margin-inline: auto; } /* O mnie: dwa ostatnie akapity schowane pod "Czytaj dalej" (main.js). */ .o-mnie__tekst.zwiniete > p.zwijany { display: none; } .o-mnie__wiecej { display: inline-flex; align-items: center; gap: 8px; font: 500 14.5px/1 var(--font); color: var(--wino); background: none; border: 0; padding: 6px 0; cursor: pointer; border-bottom: 1px solid rgba(77, 14, 18, .35); } .o-mnie__portret img { max-width: 200px; } } /* ========================================================================= RUNDA 22 - RODO: BANER COOKIES, ZGODA NA KALENDARZ, POLITYKA PRYWATNOSCI ========================================================================= */ .baner-cookies { position: fixed; left: 16px; right: 16px; bottom: 16px; z-index: 90; max-width: 560px; margin-left: auto; background: var(--java); color: var(--krem); border: 1px solid rgba(245, 239, 198, .18); border-radius: var(--r-karty); padding: 18px 20px; box-shadow: var(--cien-mocny); } .baner-cookies p { margin: 0 0 14px; font-size: 13.5px; line-height: 1.55; color: rgba(245, 239, 198, .88); } .baner-cookies a { color: var(--blekit); text-decoration: underline; text-underline-offset: 2px; } .baner-cookies__przyciski { display: flex; flex-wrap: wrap; gap: 10px; justify-content: flex-end; } .baner-cookies .btn { padding: 11px 20px; font-size: 14px; } .baner-cookies .btn--pelny { background: var(--krem); color: var(--java); border-color: var(--krem); } .baner-cookies .btn--pelny:hover { background: var(--blekit); border-color: var(--blekit); color: var(--java); } .baner-cookies .btn--pusty { color: var(--krem); border-color: rgba(245, 239, 198, .4); } .baner-cookies .btn--pusty:hover { color: var(--krem); border-color: var(--krem); } /* plywajacy CTA na telefonie chowa sie, zeby nie zaslanial banera */ html.ma-baner .pasek-cta { display: none; } @media (max-width: 480px) { .baner-cookies__przyciski .btn { flex: 1; justify-content: center; } } .zl-zgoda { padding: 26px 22px 6px; text-align: center; } .zl-zgoda p { margin: 0 auto 16px; max-width: 34ch; font-size: 14px; line-height: 1.55; color: var(--ziemia); } .dol__prawne { display: inline-flex; flex-wrap: wrap; gap: 6px 18px; } .dol__prawne a, .cookies-ustawienia { color: rgba(245, 239, 198, .6); font: inherit; background: none; border: 0; padding: 0; cursor: pointer; } .dol__prawne a:hover, .dol__prawne .cookies-ustawienia:hover { color: var(--krem); } .cookies-ustawienia--tekst { color: var(--wino); text-decoration: underline; text-underline-offset: 2px; } .formularz__rodo a { color: var(--wino); text-decoration: underline; text-underline-offset: 2px; } .prawne { max-width: 760px; } .prawne h2 { font-size: clamp(19px, 1.6vw, 22px); font-weight: 500; letter-spacing: -.01em; margin: 38px 0 12px; } .prawne h2:first-of-type { margin-top: 10px; } .prawne p, .prawne li { color: var(--ziemia); font-size: 15px; line-height: 1.7; } .prawne p { margin: 0 0 12px; } .prawne ul { margin: 0 0 12px; padding-left: 20px; display: grid; gap: 8px; } .prawne b { color: var(--java); font-weight: 500; } .prawne a { color: var(--wino); text-decoration: underline; text-underline-offset: 2px; } .prawne__data { font-size: 13px !important; color: rgba(74, 46, 39, .7) !important; } /* Strona 404 */ .blad { min-height: 70vh; display: grid; place-items: center; text-align: center; padding: 60px 16px; } .blad svg { width: 120px; height: auto; margin: 0 auto 26px; display: block; } .blad h1 { font-size: clamp(30px, 4vw, 46px); font-weight: 500; letter-spacing: -.025em; margin: 0 0 12px; } .blad h1 em { font-family: var(--kursywa); font-weight: 400; color: var(--wino); } .blad p { color: var(--ziemia); margin: 0 auto 26px; max-width: 42ch; } .blad .btn + .btn { margin-left: 10px; } /*