/* ==================================================================== STYLE STRONY LABSOLUTELY Plik czytasz od góry do dołu. Spis: 1. Kolory i czcionki (jasny i ciemny motyw) <- tu zmieniasz wygląd 2. Podstawy: rozmiar tekstu, tło, linki, fokus, nagłówki, odstępy 3. Nagłówek strony: logo, telefon, menu, przyciski motywu i rozmiaru 4. Elementy wielokrotnego użytku: przyciski, panele, wartości, kroki, box, cytat, FAQ, zdjęcia, pasek "do uzupełnienia" 5. Strona główna: hero, oko, efekt słów w nagłówku 6. Podstrony: nagłówek, okruszki, dwie kolumny, formularz, pliki, kafelki 7. Stopka 8. Kursor (celownik) i oko na stronie "dziękujemy" 9. Ograniczenie ruchu (dla osób, które wyłączyły animacje w systemie) 10. Telefon i wąskie ekrany Po KAŻDEJ zmianie tego pliku podbij ?v= (np. z 9 na 10) w plikach HTML, inaczej przeglądarka pokaże starą wersję z pamięci podręcznej. ==================================================================== */ /* ==================================================================== 1. TOKENY: kolory i czcionki. Każda zmienna działa w całej stronie. ==================================================================== */ /* CZCIONKA: Montserrat (licencja OFL), pliki w assets/fonts, bez Google */ @font-face{font-family:"Montserrat Variable";font-style:normal;font-weight:100 900;font-display:swap; src:url(fonts/montserrat-latin-ext-wght-normal.woff2) format("woff2-variations"); unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF} @font-face{font-family:"Montserrat Variable";font-style:normal;font-weight:100 900;font-display:swap; src:url(fonts/montserrat-latin-wght-normal.woff2) format("woff2-variations"); unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD} /* JASNY MOTYW (styl instytutowy: szare tło, granat, akcent bordo) */ :root{ --paper:#F5F7FA; /* tło strony: jasny szary */ --ink:#132840; /* tekst: głęboki granat (kontrast 13:1) */ --teal:#8C1F4A; /* linki: bordo (nazwa z historii, kontrast 7,6:1) */ --tint:#DDE2EB; /* panele i duże kształty: szaroniebieski */ --heat:#8C1F4A; /* akcent: przyciski, cytat, kreski */ --heat2:#6E1539; /* ciemniejszy akcent: przycisk po najechaniu */ --mint:#E2E7EA; /* trzeci kolor paneli */ --blush:#EADCE3; /* blady róż: panel i pasek "do uzupełnienia" */ --line:#C4CAD5; /* cienkie linie */ --on-heat:#F3DCE6; /* tekst na bordowym tle: blady róż, nie biały (kontrast 6,7:1) */ --iris:#4299B6; /* tęczówka oka: stalowy błękit (kontrast do tła oka 3,8:1) */ /* Zmieione chyba na dobre teraz? Nwm lol. */ --serif:"Montserrat Variable",Montserrat,system-ui,sans-serif; --sans:"Montserrat Variable",Montserrat,system-ui,-apple-system,"Segoe UI",Roboto,sans-serif; /* --serif:"Iowan Old Style","Palatino Linotype",Palatino,Georgia,serif; */ /* --sans:system-ui,-apple-system,"Segoe UI",Roboto,sans-serif; zero zewnętrznych fontów */ color-scheme:light; /* Testowe kolory */ --tile1:#D6DEEF; /* kafelek 1: granatowy błękit */ --tile2:#F0D6E3; /* kafelek 2: wiśniowy róż */ --tile3:#EFE5CC; /* kafelek 3: szampańskie złoto */ } /* CIEMNY MOTYW: nadpisuje tylko to, co się różni. Pilnuj kontrastu tekstu do tła, min. 4,5 do 1 (sprawdzisz na contrast-ratio.com). Tekst na akcencie (--heat) to zawsze --on-heat. */ :root[data-theme="dark"]{ --paper:#0C1424; /* tło: ciemny granat */ --ink:#E8EDF5; /* tekst: jasny (kontrast 15,7:1) */ --teal:#F2A7C3; /* linki: jasny róż (kontrast 9,7:1) */ --tint:#1A2A45; /* panele i kształty: granat */ --heat:#A3285A; /* akcent: jaśniejsze bordo */ --heat2:#8F2250; /* akcent po najechaniu (ciemniejszy; tekst na nim 6,4:1) */ --on-heat:#F3DCE6; /* tekst na bordo (kontrast 5,4:1) */ --iris:#4A82B4; /* tęczówka oka (kontrast do tła oka 4,5:1) */ --mint:#172A38; --blush:#2E1E2C; --line:#33435C; color-scheme:dark; /* TESTOWE KOLORY */ --tile1:#1B2C4D; --tile2:#38202F; --tile3:#3A3320; } /* ==================================================================== 2. PODSTAWY ==================================================================== */ /* ROZMIAR TEKSTU: przycisk "A A" ustawia data-size na . Wszystko liczone w rem rośnie razem z tym. */ html[data-size="2"]{font-size:120%} html[data-size="3"]{font-size:140%} /* Reset: szerokość liczona razem z ramką i odstępem wewnętrznym */ *{box-sizing:border-box} html{scroll-behavior:smooth} /* Tło, kolor i czcionka całej strony. Zmiana tutaj dotyka wszystkiego. */ body{margin:0;background:var(--paper);color:var(--ink);font:1.0625rem/1.65 var(--sans)} a{color:var(--teal)} /* FOKUS z klawiatury (styl gov.uk): bordowe tło i ramka w kolorze tekstu */ :focus-visible{outline:3px solid var(--ink);outline-offset:0;background:var(--heat);color:var(--on-heat)} /* SZEROKOŚĆ TREŚCI: max-width to szerokość kolumny na dużych ekranach, padding to boczny margines. Każda sekcja ma w środku jeden .wrap. */ .wrap{max-width:68rem;margin:0 auto;padding:0 1.5rem} /* Link "Przejdź do treści": ukryty, widoczny dopiero po wciśnięciu Tab */ .skip{position:absolute;left:-999px;top:0;background:var(--heat);color:var(--on-heat);padding:.5rem 1rem} .skip:focus{left:0;z-index:10} /* NAGŁÓWKI: czcionka szeryfowa. clamp(min, elastyczna, max) skaluje rozmiar do szerokości ekranu. overflow-wrap łamie bardzo długie słowa, żeby nie wychodziły poza ekran. */ h1,h2,h3{font-family:var(--serif);line-height:1.12;margin:0 0 .6em;font-weight:700;overflow-wrap:break-word} h2{font-size:clamp(1.8rem,4vw,2.5rem)} h3{font-size:1.35rem} /* AKAPITY: max-width 60ch skraca linie, bo wtedy tekst czyta się wygodniej. Nie zwiększaj powyżej ok. 75ch. */ p{margin:0 0 1em;max-width:60ch} /* Odstęp między sekcjami (góra i dół) */ section{padding:4.5rem 0} /* Obrazy nigdy nie szersze niż ich kontener */ img{max-width:100%;height:auto} /* Pomocnicze: mały tekst (podpisy, okruszki) */ .small{font-size:.9rem} /* Pomocnicze: odstępy i szerokość list (zamiast style="" w HTML) */ .mt-3{margin-top:3rem} main ul{max-width:60ch} .panel .more{margin-top:1rem} .quote p+p{margin-top:1rem} .value p+p{margin-top:.7rem} /* ==================================================================== 3. NAGŁÓWEK STRONY: logo, telefon, menu, przyciski ==================================================================== */ /* Układ nagłówka: logo po lewej, menu po prawej, zawija się na telefonie */ header .wrap{display:flex;justify-content:space-between;align-items:center;flex-wrap:wrap;gap:.75rem 1rem;padding-top:1.25rem;padding-bottom:1.25rem} nav{display:flex;flex-wrap:wrap;align-items:center;gap:.25rem} /* LOGO: wysokość obrazka to height. Szerokość dopasowuje się sama. */ .logo{font-family:var(--serif);font-weight:700;font-size:1.3rem;color:var(--ink);text-decoration:none} .logo img{display:block;height:4rem;width:auto} /* Dwa pliki SVG: jasne i ciemne tło. Widać zawsze jeden, zależnie od motywu. */ .logo .logo-ciemne{display:none} :root[data-theme="dark"] .logo .logo-jasne{display:none} :root[data-theme="dark"] .logo .logo-ciemne{display:block} @media (max-width:40rem){.logo img{height:3.1rem}} /* TELEFON: mała ikona obok logo (margin-right:auto dosuwa ją do logo, a menu zostaje po prawej) */ .tel{margin-right:auto;display:inline-flex;align-items:center;gap:7px;height:34px;padding:0 13px 0 10px;border:1px solid var(--line);border-radius:999px;color:var(--ink);font-size:.85rem;font-weight:600;text-decoration:none} .tel:hover{background:var(--tint)} /* MENU: odstęp wokół linków, podświetlenie po najechaniu i dla aktualnej strony (aria-current="page") */ nav a{padding:.45rem 1rem;border-radius:2rem;color:var(--ink);text-decoration:none;font-size:1.2rem} nav a:hover{background:var(--tint)} nav a[aria-current="page"]{background:var(--tint)} /* OKRĄGŁE PRZYCISKI w nagłówku (rozmiar tekstu i motyw). Rozmiar w px (40), żeby same przyciski nie rosły razem z tekstem. */ #theme-toggle,#size-toggle{ display:inline-flex;align-items:center;justify-content:center; width:40px;height:40px; border:1px solid var(--ink);border-radius:50%; background:transparent;color:var(--ink);cursor:pointer; } #theme-toggle:hover,#size-toggle:hover{background:var(--tint)} /* Przycisk motywu: w jasnym trybie księżyc, w ciemnym słońce */ #theme-toggle .icon-sun{display:none} :root[data-theme="dark"] #theme-toggle .icon-moon{display:none} :root[data-theme="dark"] #theme-toggle .icon-sun{display:inline} /* Przycisk rozmiaru tekstu: dwie litery A (mała i duża) */ #size-toggle{font-family:var(--serif);font-weight:700;line-height:1;gap:1px;padding:0} #size-toggle .sz-s{font-size:13px;align-self:flex-end;padding-bottom:10px} #size-toggle .sz-l{font-size:20px;align-self:flex-end;padding-bottom:9px} /* ==================================================================== 4. ELEMENTY WIELOKROTNEGO UŻYTKU ==================================================================== */ /* PRZYCISK: tło --heat, ramka --ink, pełne zaokrąglenie. Tekst zawsze --on-heat (biały). */ .btn{display:inline-block;background:var(--heat);color:var(--on-heat);padding:.9rem 1.8rem;border:2px solid var(--ink);border-radius:3rem;font-weight:700;text-decoration:none} .btn:hover{background:var(--heat2)} /* PANELE: siatka kart. auto-fit z minmax układa tyle kolumn, ile się zmieści. min(100%, ...) pilnuje, żeby kolumna nie była szersza niż ekran telefonu (także przy tekście 140%). */ .panels{display:grid;gap:1.5rem;grid-template-columns:repeat(auto-fit,minmax(min(100%,17rem),1fr))} .panel{padding:2rem;background:var(--tile1);border-radius:2.5rem 2.5rem 2.5rem .75rem} .panel:nth-child(2){background:var(--tile2);border-radius:.75rem 2.5rem 2.5rem 2.5rem} .panel:nth-child(3){background:var(--tile3);border-radius:2.5rem} .panel p{margin:0} .panel img{display:block;width:100%;height:auto;border-radius:1.25rem;margin-bottom:1.25rem} /* CYTAT (duży bordowy blok) */ .quote{background:var(--heat);color:var(--on-heat);border-radius:3rem 3rem 3rem 1rem;padding:clamp(2rem,6vw,4.5rem)} .quote blockquote{margin:0 0 1rem;font-family:var(--serif);font-size:clamp(1.6rem,4vw,2.6rem);line-height:1.25;max-width:26ch} .quote p{margin:0} /* KROKI (Jak pracujemy, FGI, IDI): numerację dodaje CSS (counter) */ ol.steps{list-style:none;padding:0;margin:0;display:grid;gap:1.75rem;grid-template-columns:repeat(auto-fit,minmax(min(100%,13rem),1fr));counter-reset:s} .steps li{counter-increment:s} .steps li::before{content:counter(s);display:grid;place-items:center;width:2.8rem;height:2.8rem;margin-bottom:.7rem;border-radius:50%;background:var(--tint);font-family:var(--serif);font-weight:700;font-size:1.2rem} .steps strong{display:block} ol.steps.steps-4{grid-template-columns:repeat(auto-fit,minmax(min(100%,11rem),1fr))} /* 4 kroki w jednym rzędzie na szerokim ekranie */ /* LISTA PYTAŃ (strona Wiedza): numerowana, jedna kolumna */ ol.checklist{list-style:none;padding:0;margin:2rem 0;max-width:46rem;counter-reset:c} .checklist li{counter-increment:c;position:relative;padding:1rem 0 1rem 3.6rem;border-top:1px solid var(--line)} .checklist li:last-child{border-bottom:1px solid var(--line)} .checklist li::before{content:counter(c);position:absolute;left:0;top:.9rem;display:grid;place-items:center;width:2.4rem;height:2.4rem;border-radius:50%;background:var(--tint);font-family:var(--serif);font-weight:700} .checklist strong{display:block} /* WARTOŚCI: bloki z grubą kreską nad tekstem */ .values{display:grid;gap:2rem;grid-template-columns:repeat(auto-fit,minmax(min(100%,16rem),1fr))} .values-stack{grid-template-columns:1fr} /* wariant: zawsze jedna kolumna (musi być po .values) */ .value{border-top:4px solid var(--heat);padding-top:1rem} .value p{margin:0} /* BOX (ramka z kontaktem): odstęp wewnętrzny rośnie z szerokością ekranu */ .box{background:var(--tint);border-radius:3rem;padding:clamp(1.25rem,6vw,4.5rem)} .box a{color:var(--ink);font-weight:700} .box .btn{color:var(--on-heat)} /* przycisk w boxie: blady róż na bordo (nie biały) */ /* DUŻY KONTAKT (mail i telefon). overflow-wrap:anywhere zawija adres, zamiast wypychać go poza ramkę. */ .big{font-family:var(--serif);font-size:clamp(1.15rem,5vw,2.4rem);margin:0;overflow-wrap:anywhere} /* WĄSKI BOX obok formularza: mniejszy odstęp i tekst */ .box-compact{padding:clamp(1.5rem,3vw,2.25rem);border-radius:2rem} .box-compact h2{font-size:clamp(1.4rem,2.5vw,1.8rem)} .box-compact .big{font-size:clamp(1.05rem,1.8vw,1.35rem);line-height:1.7} .box-compact .big a[href^="tel"]{white-space:nowrap} /* FAQ (rozwijane
, bez JS) */ details{border-top:1px solid var(--line);padding:.9rem 0;max-width:46rem} details:last-of-type{border-bottom:1px solid var(--line)} summary{cursor:pointer;font-weight:700;color:var(--teal)} details p{margin:.7rem 0 0} /* PASEK "Do uzupełnienia": blady róż z bordową kreską. Gdy treść jest gotowa, usuń taki

z HTML. Samego CSS nie ruszaj. */ .todo{padding:.8rem 1rem;border-left:4px solid var(--heat);background:var(--blush);color:var(--ink)} /* ZDJĘCIE Z PODPISEM. aspect-ratio 4/3 przycina zdjęcia do jednej proporcji (dla szerokich wpisz np. 16/9). */ .media{margin:0 0 1.5rem} .media img{display:block;width:100%;height:auto;border-radius:1.5rem} /* bez przycinania: heatmapa pokazuje cały obraz */ .media figcaption{font-size:.9rem;margin-top:.5rem} /* PLACEHOLDER na zdjęcia i wykresy (przerywana ramka) */ .ph{display:grid;place-items:center;text-align:center;min-height:14rem;margin-bottom:1.5rem;padding:1.5rem; border:2px dashed var(--line);border-radius:1.5rem;background:var(--tint);opacity:.8} /* Szkielet infografiki w placeholderze (inline SVG). Podmień na obrazek. */ .ph svg{display:block;width:100%;max-width:22rem;height:auto} .ph .sk-box{fill:var(--paper);stroke:var(--line);stroke-width:2} .ph .sk-bar{fill:var(--line)} .ph .sk-acc{fill:var(--heat);opacity:.55} .ph .sk-arrow{fill:none;stroke:var(--heat);stroke-width:3;stroke-linecap:round;stroke-linejoin:round} .ph .sk-txt{fill:var(--ink);font:600 13px var(--sans,sans-serif)} /* ==================================================================== 5. STRONA GŁÓWNA ==================================================================== */ /* HERO: sekcja z dużym nagłówkiem */ .hero{position:relative;overflow:hidden;padding:3.5rem 0 6.5rem} .hero .wrap{position:relative;z-index:1} .hero h1{font-size:clamp(2rem,5.2vw,3.4rem);max-width:18ch} .sub{font-family:var(--serif);font-style:italic;font-size:1.4rem} /* OBIEKTYW: duży miękki kształt w tle. Jego środek leży częściowo poza ekranem (right:-7rem), dlatego oko w środku ma padding-left. */ .lens{position:absolute;right:-7rem;top:1rem;width:min(36rem,90vw);aspect-ratio:1; background:var(--tint);border-radius:58% 42% 55% 45%/50% 55% 45% 50%; display:flex;align-items:center;padding-left:3rem} /* OKO w kształcie: źrenicą rusza assets/app.js. Na telefonie ukryte. */ .hero-eye{width:min(20rem,62%);height:auto;color:var(--ink)} .eye-iris{transition:transform .15s ease-out} /* kolor tęczówki to zmienna --iris (sekcja 1); oko na stronie dziękujemy używa tej samej */ /* EFEKT SŁÓW W NAGŁÓWKU: słowo zamienia się w ikonę po najechaniu myszą. Na telefonie nie działa (brak najechania), ale nic się nie psuje. */ .hint{position:relative;display:inline-block;border-bottom:2px dotted var(--teal);cursor:default} .hint-word{transition:opacity .25s ease} .hint-icon{position:absolute;left:50%;top:50%;width:1.1em;height:1.1em;color:var(--teal); opacity:0;transform:translate(-50%,-50%) scale(.7); transition:opacity .25s ease,transform .25s ease;pointer-events:none} .hint:hover .hint-word{opacity:0} .hint:hover .hint-icon{opacity:1;transform:translate(-50%,-50%) scale(1)} /* ==================================================================== 6. PODSTRONY ==================================================================== */ /* Nagłówek podstrony i zdanie wstępne pod tytułem */ .page-head{padding-bottom:1rem} .page-head h1{font-size:clamp(2.2rem,6vw,3.5rem)} .lead{font-size:inherit;font-weight:600} /* ten sam rozmiar co zwykły tekst, wyróżnia tylko grubość */ .lead-big{font-size:clamp(1.15rem,2.2vw,1.45rem);line-height:1.5} /* OKRUSZKI ("Usługi / Badania jakościowe / FGI"). Okruszki są elementem