/* ==========================================================================
Zatwarnicki Studio - style
Classic, clean, readable. Serif headings (matches the wordmark), plain
system sans body copy, warm off-white background, single accent color
taken from the logo mark.
========================================================================== */
:root {
--bg: #f8f2e5;
--surface: #f8f2e5;
--ink: #1a1a1a;
--ink-soft: #3f3f3f;
--muted: #6b6b6b;
--border: #e4dfd3;
--accent: #7a2b22;
--accent-dark: #7a2b22;
--accent-soft: #f2e5e2;
--font-serif: Georgia, 'Times New Roman', serif;
--font-sans: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Arial, sans-serif;
--max-width: 1120px;
/* Eksperyment: minimalne zaokraglenie rogow, wszedzie (desktop + mobilka). */
--radius: 4px;
}
* {
box-sizing: border-box;
}
html {
scroll-behavior: smooth;
}
body {
margin: 0;
background: var(--bg);
color: var(--ink-soft);
font-family: var(--font-sans);
line-height: 1.65;
font-size: 16.5px;
overflow-wrap: break-word;
width: 100%;
}
img, svg {
max-width: 100%;
display: block;
}
a {
color: inherit;
}
/* text-wrap: pretty bylo tu wczesniej (nowszy algorytm lamania wierszy,
ktory ma m.in. unikac osamotnionych wyrazow) - ale okazalo sie niestabilne
w polaczeniu z JS-owym wydzielaniem ostatniego wiersza (patrz
fixJustifiedLastLines w main.js): po ingerencji w DOM przegladarka
przeliczala WCZESNIEJSZE wiersze na nowo i potrafila stworzyc osamotnione
pojedyncze slowo tam, gdzie go wczesniej nie bylo. Zwykle, zachlanne
lamanie wierszy nie ma tego trybu awarii - kazdy wiersz liczony jest
niezaleznie od tego, co bedzie po nim. */
p {
text-align: justify;
text-align-last: left;
hyphens: auto;
orphans: 3;
widows: 3;
}
/* Justify zostaje (text-align: justify + text-align-last: left z bazowej
reguly "p"). text-align-last nie jest tu jedyna linia obrony - patrz
fixJustifiedLastLines() w main.js, ktora fizycznie wydziela ostatni
wiersz kazdego justowanego akapitu do osobnego bloku z text-align:left,
niezaleznie od tego czy przegladarka respektuje text-align-last. */
@media (max-width: 640px) {
/* Tytul glowny na telefonie mniejszy - clamp() w bazowej regule na tej
szerokosci i tak juz stoi na dolnym progu (2,1rem), wiec bez osobnej
reguly nie da sie go zmniejszyc dalej. !important, bo bazowa regula
".hero h1" ma ta sama specyficznosc i siedzi NIZEJ w tym pliku (linia
~428) - przy rownej specyficznosci wygrywa kolejnosc w pliku, wiec bez
tego ta poprawka by przegrala mimo bycia w media query. */
.hero h1 {
font-size: 1.7rem !important;
}
/* Odstep nad "STRONY INTERNETOWE..." byl wiekszy (58px) niz miedzy
akapitem a przyciskiem ponizej (32px) - teraz oba rowne i o 3px
mniejsze (29px). !important z tego samego powodu co h1 wyzej: baza
".hero" siedzi nizej w pliku. */
.hero {
padding-top: 29px !important;
}
/* !important: baza ".hero p.lead" (linia ~442) siedzi nizej w pliku i ma
te sama specyficznosc - bez tego przegrywalaby kolejnoscia, tak jak
h1 i .hero wyzej. */
.hero p.lead {
margin-bottom: 29px !important;
/* Odstep miedzy wierszami akapitu hero dziedziczyl domyslne 1.65 z
- na telefonie, przy krotszych wierszach, wyglada to na duzo
wiecej luzu niz na desktopie przy tych samych proporcjach. */
line-height: 1.35 !important;
}
/* Dwa przyciski hero mialy kazdy wlasna szerokosc dopasowana do tresci
(jeden zawsze wychodzil szerszy) - obie dostaja ta sama, wspolna
szerokosc zamiast rozciagania na caly ekran. */
.hero-actions {
flex-direction: column;
align-items: center;
}
.hero-actions .btn {
width: min(300px, 100%);
text-align: center;
}
/* Tekst akapitu nie ma stykac sie z krawedziami ekranu - wezsza,
wysrodkowana kolumna, tresc w srodku nadal wyrownana do lewej.
Selektor z .hero-grid z przodu (nie samo .hero p.lead) - pozniejszy
blok @media (max-width: 860px) ustawia z powrotem max-width: none na
.hero p.lead z ta sama specyficznoscia, wiec bez tego dodatkowego
poziomu ta regula przegrywalaby kolejnoscia w pliku. */
/* Ta sama szerokosc tekstu co w boksie "Artykuly branzowe" ponizej:
tam obwodka to border 2px + padding 28px = 30px wciecia z kazdej
strony. Padding zamiast max-width, zeby skalowalo sie tak samo na
kazdej szerokosci telefonu, nie tylko przy jednej zmierzonej wartosci. */
.hero-grid .hero-content p.lead {
padding: 0 30px;
}
}
/* Short blurbs inside narrow cards/grids: justify stretches a 1-2 line
snippet into ugly gaps, so these stay left-aligned instead. */
.price-card li,
.faq-answer p,
.contact-info p {
text-align: left;
}
.container {
max-width: var(--max-width);
margin: 0 auto;
padding: 0 24px;
}
h1, h2, h3, h4 {
font-family: var(--font-serif);
color: var(--ink);
margin: 0 0 14px;
line-height: 1.25;
font-weight: 700;
}
h2.section-title {
font-size: 2rem;
text-align: center;
}
p.section-lede {
text-align: center;
text-align-last: center;
max-width: 640px;
margin: 0 auto 48px;
color: var(--muted);
}
/* Jeden rytm dla wszystkich sekcji. Wczesniej Cennik mial wlasne 48/56, a
reszta zostawala na 84/84 - miedzy czerwonym pasem a naglowkiem Portfolio
robila sie przez to wyrazna dziura. Sekcje z pelnoekranowym tlem (Oferta,
O mnie, Proces) maja padding 0 i wlasny odstep w srodku. */
section {
padding: 48px 0 56px;
}
#kontakt {
/* Ta sama wartosc co odstep Portfolio -> Proces (56px z bazowej reguly
"section", patrz komentarz wyzej) - Kontakt sam ustawia gore i dol,
zeby nie zalezec od viewportowych nadpisan reguly "section". */
padding: 56px 0;
}
.eyebrow {
font-family: var(--font-sans);
text-transform: uppercase;
letter-spacing: 0.12em;
font-size: 0.78rem;
font-weight: 700;
color: var(--accent);
margin-bottom: 12px;
display: block;
}
/* ---------- Buttons ---------- */
.btn {
display: inline-block;
padding: 13px 28px;
border-radius: 4px;
font-family: var(--font-sans);
font-weight: 600;
font-size: 0.96rem;
text-decoration: none;
border: 1px solid transparent;
cursor: pointer;
transition: background 0.2s ease, color 0.2s ease, border-color 0.2s ease, transform 0.15s ease;
}
.btn-primary {
background: var(--accent);
color: var(--bg);
}
.btn-primary:hover {
background: var(--accent-dark);
transform: translateY(-1px);
}
.btn-outline {
background: transparent;
border-color: var(--accent);
color: var(--accent);
}
.btn-outline:hover {
background: var(--accent);
color: var(--bg);
}
.btn-block {
display: block;
width: 100%;
text-align: center;
}
/* ---------- Navbar ---------- */
.navbar {
position: sticky;
top: 0;
z-index: 100;
background: rgba(248, 242, 229, 0.94);
backdrop-filter: blur(6px);
border-bottom: 1px solid var(--border);
}
.scroll-progress {
position: absolute;
left: 0;
bottom: 0;
height: 2px;
width: 0%;
background: var(--accent);
pointer-events: none;
transition: width 0.05s linear;
}
.navbar-inner {
max-width: var(--max-width);
margin: 0 auto;
padding: 8px 24px;
display: grid;
grid-template-columns: auto minmax(0, 1fr) auto;
align-items: center;
gap: 16px;
}
/* Powyzej 1320 px kontener (1120 px) ma z prawej wolne miejsce, wiec
przelacznik jezyka stoi obok niego, a Kontakt siega krawedzi kontenera.
Ponizej trzeba mu to miejsce wydzielic, inaczej nachodzi na Kontakt. */
@media (max-width: 1320px) {
.navbar-inner {
padding-right: 132px;
}
}
.navbar-brand {
display: flex;
align-items: center;
text-decoration: none;
}
.navbar-brand img {
height: 46px;
width: auto;
margin-top: 3px;
/* Plik SVG ma ~7 px pustego marginesu wewnatrz viewBox przy tej wysokosci.
Bez tego napis zaczyna sie wizualnie 7 px na prawo od krawedzi kontenera,
czyli nie w linii z trescia sekcji ponizej. */
margin-left: -7px;
}
/* Na podstronach (polityka prywatnosci) przelacznik jest bezposrednim dzieckiem
siatki navbara, wiec sam dosuwa sie do prawej krawedzi, a przycisk powrotu
nie rozciaga sie na cala srodkowa kolumne. */
.navbar-inner > .lang-toggle {
justify-self: end;
}
.navbar-inner > .btn-outline {
justify-self: start;
}
.nav-links {
display: flex;
align-items: center;
justify-content: center;
flex-wrap: wrap;
min-width: 0;
gap: 4px;
list-style: none;
margin: 0;
padding: 0;
}
.nav-links a {
display: inline-block;
position: relative;
padding: 8px 11px;
text-decoration: none;
font-size: 0.9rem;
font-weight: 600;
color: var(--accent);
border-radius: 5px;
white-space: nowrap;
transition: background 0.2s ease, color 0.2s ease;
}
.nav-links a:hover {
background: var(--accent-soft);
color: var(--accent-dark);
}
.nav-links a::after {
content: "";
position: absolute;
left: 14px;
right: 14px;
bottom: 2px;
height: 2px;
border-radius: 1px;
background: var(--accent);
transform: scaleX(0);
transition: transform 0.25s ease;
}
.nav-links a.active::after {
transform: scaleX(1);
}
.navbar-right {
display: flex;
align-items: center;
gap: 12px;
justify-self: end;
}
.navbar-cta {
padding: 9px 20px;
font-size: 0.9rem;
color: var(--bg);
}
/* Na desktopie ten ma byc jak gdyby go nie bylo: .lang-toggle w srodku
jest position:absolute wzgledem .navbar (dziala niezaleznie od tego, gdzie
w DOM siedzi), wiec sam nie powinien generowac wlasnego pudelka.
display:none by go schowal RAZEM z dzieckiem (position:absolute nie
ucieka z ukrytego rodzica) - stad display:contents, nie none. Na mobilce
media query zmienia go z powrotem na prawdziwy element listy. */
.mobile-lang-item {
display: contents;
}
.nav-toggle {
display: none;
flex-direction: column;
gap: 5px;
background: none;
border: none;
cursor: pointer;
padding: 6px;
}
.nav-toggle span {
width: 24px;
height: 2px;
background: var(--ink);
display: block;
}
/* ---------- Language toggle (lives in the navbar) ---------- */
/* Przelacznik jezyka stoi w zwyklym przeplywie, po lewej stronie przycisku
Kontakt. Wczesniej byl pozycjonowany absolutnie przy krawedzi okna, przez co
.navbar-inner musial rezerwowac 140 px prawego paddingu - a to odsuwalo
Kontakt od krawedzi kontenera i nachodzilo na hamburger ponizej 760 px. */
.lang-toggle {
/* Poza kontenerem: przyklejony do prawej krawedzi calej strony, nie do
krawedzi tresci. .navbar ma position:sticky, wiec jest blokiem
zawierajacym. Ponizej 1320 px kontener nie miesci sie juz obok, wiec
.navbar-inner rezerwuje tam miejsce (media query przy .navbar-inner). */
position: absolute;
top: 50%;
right: 20px;
transform: translateY(-50%);
display: flex;
background: var(--surface);
border: 1px solid var(--accent);
border-radius: 999px;
padding: 3px;
}
.lang-toggle button {
background: none;
border: none;
color: var(--accent);
font-family: var(--font-sans);
font-size: 0.78rem;
font-weight: 700;
padding: 6px 14px;
border-radius: 999px;
cursor: pointer;
letter-spacing: 0.04em;
transition: background 0.2s ease, color 0.2s ease;
}
.lang-toggle button.active {
background: var(--accent);
color: var(--bg);
}
/* i18n visibility: default = Polish */
[data-lang="pl"] .i18n-en { display: none; }
[data-lang="en"] .i18n-pl { display: none; }
/* ---------- Hero ---------- */
.hero {
padding: 58px 0 58px;
}
.hero-grid {
display: grid;
grid-template-columns: 1fr 300px;
align-items: center;
gap: 48px;
}
.hero-content {
text-align: left;
}
.hero-articles-promo {
align-self: center;
justify-self: end;
}
.hero h1 {
font-size: clamp(2.1rem, 3.6vw, 2.9rem);
margin-bottom: 18px;
}
.hero p.lead {
font-size: 1.1rem;
color: #565656;
margin-bottom: 32px;
max-width: 620px;
}
.hero-actions {
display: flex;
justify-content: flex-start;
gap: 14px;
flex-wrap: wrap;
}
.hero-trust {
margin-top: 40px;
display: flex;
justify-content: flex-start;
gap: 32px;
flex-wrap: wrap;
color: var(--muted);
font-size: 0.88rem;
}
.hero-trust strong {
color: var(--ink);
font-family: var(--font-serif);
font-size: 1.3rem;
display: block;
}
@media (max-width: 860px) {
.hero-grid {
grid-template-columns: 1fr;
gap: 32px;
text-align: center;
}
.hero-content {
text-align: center;
}
.hero-grid .hero-articles-promo {
width: 100%;
align-self: stretch;
}
.hero p.lead {
max-width: none;
}
.hero-actions,
.hero-trust {
justify-content: center;
}
}
/* ---------- Services (interactive category tabs) ---------- */
.offer-tabs {
display: flex;
align-items: stretch;
gap: 40px;
background: var(--accent-dark);
border-radius: 4px;
padding: 44px 40px;
}
.offer-tab-nav {
display: flex;
flex-direction: column;
justify-content: center;
gap: 10px;
width: 300px;
flex-shrink: 0;
}
.offer-tab-btn {
display: flex;
align-items: center;
gap: 12px;
background: transparent;
border: 1.5px solid transparent;
border-radius: 4px;
padding: 14px 18px;
font-family: var(--font-sans);
font-weight: 600;
font-size: 0.95rem;
color: rgba(248, 242, 229, 0.7);
text-align: left;
cursor: pointer;
transition: background 0.2s ease, border-color 0.2s ease, color 0.2s ease;
}
.offer-tab-btn .icon {
width: 20px;
height: 20px;
flex-shrink: 0;
}
.offer-tab-btn:hover {
color: var(--bg);
}
.offer-tab-btn.active {
background: rgba(255, 255, 255, 0.1);
border-color: rgba(248, 242, 229, 0.8);
color: var(--bg);
}
.offer-tab-panels {
flex: 1;
min-width: 0;
}
.offer-tab-panel {
display: none;
}
.offer-tab-panel.active {
display: block;
}
.offer-tab-eyebrow {
display: block;
font-family: var(--font-serif);
font-weight: 700;
font-size: 1.2rem;
color: var(--bg);
margin-bottom: 16px;
}
.offer-tab-panel p {
text-align: left;
color: rgba(248, 242, 229, 0.85);
margin: 0 0 22px;
}
.offer-tab-panel ul {
list-style: none;
margin: 0;
padding: 0;
display: flex;
flex-direction: column;
gap: 13px;
}
.offer-tab-panel li {
position: relative;
padding-left: 20px;
color: rgba(248, 242, 229, 0.85);
font-size: 0.95rem;
}
.offer-tab-panel li::before {
content: "";
position: absolute;
left: 0;
top: 0.55em;
width: 6px;
height: 6px;
border-radius: 50%;
background: #fff;
}
.steps-summary-list li {
padding-left: 0;
}
.steps-summary-list li::before {
content: none;
}
.offer-tab-panel li strong {
color: var(--bg);
}
.offer-articles-promo {
width: 280px;
flex-shrink: 0;
background: var(--bg);
border: 2px solid var(--accent);
border-radius: 4px;
padding: 32px 28px;
display: flex;
flex-direction: column;
gap: 14px;
box-shadow: 0 14px 32px rgba(26, 26, 26, 0.08);
}
.offer-articles-promo h3 {
font-family: var(--font-serif);
font-size: 1.35rem;
color: var(--ink);
margin: 0;
}
.offer-articles-promo p {
text-align: justify;
font-size: 0.98rem;
line-height: 1.6;
color: var(--ink-soft);
margin: 0;
}
.offer-articles-cta {
align-self: center;
margin-top: 6px;
display: inline-flex;
align-items: center;
gap: 8px;
padding: 9px 14px;
font-size: 0.88rem;
white-space: nowrap;
}
.offer-articles-logo {
width: 27px;
height: 27px;
flex-shrink: 0;
}
@media (max-width: 760px) {
.offer-tabs {
flex-direction: column;
padding: 32px 24px;
}
.offer-tab-nav {
width: 100%;
}
/* Ten box (.container + .offer-tabs.thin na tym samym elemencie) siega
prawdziwych krawedzi ekranu, bo .offer-tabs.thin ma wyzsza
specyficznosc niz .container i nadpisuje jego padding, a max-width
przestaje dzialac ponizej 1120px - zadne z nich nie daje juz wciecia.
Margines ma wiec odtwarzac to samo wciecie, ktore .container daje
zwyklym boksom (np. "Artykuly branzowe") swoim wlasnym paddingiem -
24px to jego domyslna wartosc (patrz regula bazowa .container), wiec
tyle samo tutaj. Ponizej 480px .container przechodzi na 20px - stad
osobne nadpisanie w tamtym media query. !important z tego samego
powodu co inne poprawki tutaj - .offer-tabs.thin siedzi nizej w pliku. */
.offer-tabs,
.offer-tabs.thin {
margin: 0 24px !important;
}
/* Odstepy miedzy przyciskami zakladek i miedzy punktami na liscie byly juz
ciasne (6px gap) - to, co wygladalo na "duze przerwy", to odziedziczony
ze strony line-height: 1.65 wewnatrz wielowierszowych punktow (np. "SEO
on-page - tytuly, naglowki..."). Przy takiej szerokosci kolumny i takim
rozmiarze czcionki 1.65 robi z kazdego zawinietego punktu wysoki blok.
!important z tego samego powodu co reszta - .offer-tabs.thin siedzi
nizej w pliku. */
.offer-tabs.thin .offer-tab-panel li,
.offer-tabs.thin .offer-tab-panel p {
line-height: 1.4 !important;
}
.offer-tabs.thin .offer-tab-nav,
.offer-tabs.thin .offer-tab-panel ul {
gap: 4px !important;
}
}
@media (max-width: 480px) {
.offer-tabs {
padding: 26px 18px;
}
}
#oferta,
#proces {
padding: 0;
border-top: none;
border-bottom: none;
}
.offer-tabs.thin {
gap: 28px;
padding: 22px 36px;
border-radius: 4px;
}
.offer-tabs.thin .offer-tab-nav {
width: 250px;
gap: 6px;
}
.offer-tabs.thin .offer-tab-btn {
padding: 9px 12px;
font-size: 0.86rem;
border-radius: 4px;
}
.offer-tabs.thin .offer-tab-btn .icon {
width: 17px;
height: 17px;
}
.offer-tabs.thin .offer-tab-eyebrow {
font-size: 1.02rem;
margin-bottom: 10px;
}
.offer-tabs.thin .offer-tab-panel p {
font-size: 0.92rem;
margin-bottom: 14px;
}
.offer-tabs.thin .offer-tab-panel ul {
gap: 6px;
}
.offer-tabs.thin .offer-tab-panel li {
font-size: 0.88rem;
}
/* ---------- Portfolio ---------- */
.portfolio-inner {
padding: 0 46px;
position: relative;
}
.portfolio-carousel {
position: relative;
}
.portfolio-nav {
position: absolute;
top: 50%;
transform: translateY(-50%);
z-index: 2;
width: 36px;
height: 36px;
border-radius: 50%;
border: 1.5px solid var(--accent);
background: var(--accent);
color: var(--bg);
display: flex;
align-items: center;
justify-content: center;
cursor: pointer;
box-shadow: 0 4px 14px rgba(26, 26, 26, 0.18);
transition: background 0.2s ease, color 0.2s ease;
}
.portfolio-nav-prev {
left: -46px;
}
.portfolio-nav-next {
right: -46px;
}
.portfolio-nav svg {
width: 16px;
height: 16px;
}
.portfolio-nav:hover {
background: #fff;
color: var(--accent);
}
@media (max-width: 900px) {
.portfolio-inner {
padding: 0 40px;
}
.portfolio-nav-prev {
left: -40px;
}
.portfolio-nav-next {
right: -40px;
}
}
@media (max-width: 640px) {
.portfolio-inner {
padding: 0;
}
.portfolio-nav {
display: none;
}
}
.portfolio-track {
display: flex;
gap: 24px;
overflow-x: auto;
scroll-snap-type: x mandatory;
scroll-behavior: smooth;
padding-bottom: 4px;
}
.portfolio-track::-webkit-scrollbar {
height: 6px;
}
.portfolio-track::-webkit-scrollbar-thumb {
background: var(--border);
border-radius: 999px;
}
.portfolio-card {
scroll-snap-align: start;
flex: 0 0 calc((100% - 48px) / 3);
height: 260px;
border-radius: var(--radius);
border: 2px solid var(--accent);
background-size: contain;
background-repeat: no-repeat;
background-position: top center;
position: relative;
display: flex;
flex-direction: column;
justify-content: flex-end;
overflow: hidden;
}
.portfolio-card-info {
position: relative;
z-index: 1;
padding: 44px 20px 20px;
background: linear-gradient(to bottom, transparent 0%, var(--brand-bg, var(--bg)) 55%, var(--brand-bg, var(--bg)) 100%);
display: flex;
flex-direction: column;
gap: 2px;
}
.portfolio-card-title {
font-family: var(--font-serif);
font-weight: 700;
font-size: 1.08rem;
color: var(--brand-text, var(--ink));
}
.portfolio-card-domain {
font-size: 0.76rem;
color: var(--brand-text, var(--muted));
opacity: 0.85;
}
.portfolio-card-link {
font-size: 0.85rem;
font-weight: 600;
color: var(--brand-text, var(--accent));
text-decoration: none;
margin-top: 8px;
}
.portfolio-card-link:hover {
text-decoration: underline;
}
.portfolio-overlay {
position: absolute;
left: 0;
right: 0;
top: 0;
height: 62%;
z-index: 2;
background: var(--brand-bg, rgba(251, 250, 247, 0.93));
display: flex;
align-items: flex-end;
opacity: 0;
transition: opacity 0.25s ease;
}
.portfolio-overlay p {
color: var(--brand-text, var(--ink));
font-size: 0.8rem;
line-height: 1.5;
padding: 16px 20px;
text-align: left;
margin: 0;
}
.portfolio-card:hover .portfolio-overlay,
.portfolio-card:focus-within .portfolio-overlay {
opacity: 1;
}
.portfolio-highlights {
display: flex;
gap: 24px;
margin-top: 24px;
}
.portfolio-highlight {
flex: 0 0 calc((100% - 48px) / 3);
height: 260px;
border-radius: var(--radius);
background: var(--bg);
border: 2px solid var(--accent);
display: flex;
flex-direction: column;
padding: 24px;
text-decoration: none;
position: relative;
overflow: hidden;
transition: flex-basis 0.25s ease;
}
.portfolio-highlight.is-expanded {
position: absolute;
inset: 0;
z-index: 5;
height: auto;
overflow: visible;
box-shadow: 0 20px 44px rgba(26, 26, 26, 0.18);
}
.portfolio-highlight-content {
overflow: hidden;
flex: 1;
min-height: 0;
/* Trzy rzedy pigulek. Dwa mieszcza tylko 3 pozycje, bo etykiety w grupie
"Strony" sa za szerokie, zeby uparowac sie po dwie w 259 px. */
max-height: 123px;
}
.portfolio-highlight.is-expanded .portfolio-highlight-content {
max-height: none;
overflow-y: scroll;
padding-right: 14px;
padding-bottom: 84px;
scrollbar-width: thin;
scrollbar-color: var(--accent) rgba(122, 43, 34, 0.1);
/* Scroll zatrzymuje sie na poczatku grupy, a nie w polowie rzedu pigulek. */
scroll-snap-type: y proximity;
scroll-behavior: smooth;
}
.portfolio-highlight.is-expanded .portfolio-highlight-group {
scroll-snap-align: start;
scroll-margin-top: 4px;
}
/* Wygaszenie gornej krawedzi, zakotwiczone pod tytulem kafelka. */
.portfolio-highlight.is-expanded .portfolio-highlight-title {
position: relative;
z-index: 2;
}
.portfolio-highlight.is-expanded .portfolio-highlight-title::after {
content: "";
position: absolute;
left: 0;
right: 10px;
top: 100%;
height: 34px;
pointer-events: none;
background: linear-gradient(to bottom, var(--bg) 45%, rgba(248, 242, 229, 0));
}
.portfolio-highlight.is-expanded .portfolio-highlight-content::-webkit-scrollbar {
width: 8px;
}
.portfolio-highlight.is-expanded .portfolio-highlight-content::-webkit-scrollbar-track {
background: rgba(122, 43, 34, 0.1);
border-radius: 999px;
}
.portfolio-highlight.is-expanded .portfolio-highlight-content::-webkit-scrollbar-thumb {
background: var(--accent);
border-radius: 999px;
border: 2px solid rgba(248, 242, 229, 0.9);
background-clip: padding-box;
}
.portfolio-highlight.is-expanded .portfolio-highlight-content::-webkit-scrollbar-thumb:hover {
background: var(--accent-dark);
background-clip: padding-box;
}
/* Wygaszenie dolnej krawedzi: rzedy nie sa ucinane w polowie, tylko plynnie znikaja
pod przyciskiem. Prawy margines w stanie rozwinietym zostawia miejsce na suwak. */
.portfolio-highlight::after {
content: "";
position: absolute;
left: 2px;
right: 2px;
bottom: 2px;
height: 56px;
z-index: 2;
pointer-events: none;
border-radius: 0 0 var(--radius) var(--radius);
background: linear-gradient(to top, var(--bg) 55%, rgba(248, 242, 229, 0));
}
.portfolio-highlight.is-expanded::after {
right: 34px;
height: 82px;
border-bottom-right-radius: 0;
}
.portfolio-highlight-cta::after {
display: none;
}
/* Wszystkie przyciski w kafelkach portfolio: jedna pozycja i jedna wysokosc.
Wczesniej "Pokaz wszystkie" bylo (line-height: normal -> 47 px), a
"Wyslij zgloszenie" i "Czytaj artykuly" byly .btn w przeplywie
(line-height 1.65 -> 53 px) i tresc wypychala je nizej. */
.portfolio-highlight-more,
.portfolio-highlight-btn {
position: absolute;
left: 50%;
bottom: 14px;
z-index: 3;
transform: translateX(-50%);
padding: 13px 28px;
background: var(--accent);
color: var(--bg);
border: none;
border-radius: 4px;
cursor: pointer;
white-space: nowrap;
text-decoration: none;
text-align: center;
font-family: var(--font-sans);
font-size: 0.96rem;
font-weight: 600;
line-height: 1.3;
}
.portfolio-highlight-more:hover,
.portfolio-highlight-btn:hover {
background: var(--accent-dark);
transform: translateX(-50%);
}
.portfolio-highlight-more .ph-less-label {
display: none;
}
.portfolio-highlight.is-expanded .ph-more-label {
display: none;
}
.portfolio-highlight.is-expanded .ph-less-label {
display: inline;
}
.portfolio-highlight-title {
font-family: var(--font-serif);
font-weight: 700;
font-size: 1.15rem;
color: var(--ink);
margin-bottom: 8px;
}
.portfolio-highlight-group + .portfolio-highlight-group {
margin-top: 12px;
}
.portfolio-highlight-group-label {
display: block;
font-size: 0.68rem;
text-transform: uppercase;
letter-spacing: 0.06em;
color: var(--muted);
font-weight: 700;
margin-bottom: 5px;
}
.portfolio-highlight-list {
list-style: none;
margin: 0;
padding: 0;
display: flex;
flex-wrap: wrap;
align-content: flex-start;
gap: 5px;
}
.portfolio-highlight-desc {
font-size: 0.88rem;
color: var(--muted);
text-align: left;
margin: 0 0 16px;
}
.portfolio-highlight-list li {
font-size: 0.78rem;
font-weight: 600;
background: var(--surface);
color: var(--ink);
border: 1.5px solid var(--accent);
padding: 3px 11px;
border-radius: 999px;
white-space: nowrap;
}
/* Kafelek CTA stoi teraz w gornym rzedzie, w karuzeli projektow. Ma juz
flex-basis i wysokosc z .portfolio-highlight, brakuje mu tylko zaczepu
przewijania, ktory maja karty obok. */
.portfolio-track .portfolio-highlight {
scroll-snap-align: start;
}
.portfolio-highlight-cta {
align-items: flex-start;
}
/* Kafelek Blog ma o jeden element wiecej niz kafelek CTA (rzad tagow), a te
same 260 px wysokosci - stad ciasniejsze odstepy, zeby przycisk sie zmiescil. */
.portfolio-highlight-blog .portfolio-highlight-title {
margin-bottom: 8px;
}
.portfolio-highlight-blog .portfolio-highlight-desc {
margin-bottom: 12px;
}
.portfolio-blog-tags {
margin-bottom: 14px;
}
.portfolio-blog-tags li {
font-size: 0.72rem;
padding: 3px 9px;
}
.portfolio-highlight-cta .portfolio-highlight-title {
margin-bottom: 8px;
}
/* Kafelki CTA i Blog maja przycisk pozycjonowany absolutnie, wiec tresc
musi miec zarezerwowane miejsce, zeby pod niego nie wjechala. */
.portfolio-highlight-cta {
padding-bottom: 74px;
}
@media (max-width: 900px) {
.portfolio-card {
flex-basis: calc((100% - 24px) / 2);
}
.portfolio-highlight {
flex-basis: calc((100% - 24px) / 2);
}
}
@media (max-width: 640px) {
.portfolio-card {
flex-basis: 82%;
}
.portfolio-highlights {
flex-direction: column;
}
.portfolio-highlight {
flex-basis: auto;
height: 220px;
}
/* .portfolio-highlight jest tez uzywany jako kafelek CTA "Miejsce na
Twoja strone" w karuzeli portfolio (.portfolio-track), obok zwyklych
.portfolio-card - powyzsza regula (napisana dla samodzielnej sekcji
"Zakres uslug") nadpisywala mu tez rozmiar tam, przez co byl innej
szerokosci/wysokosci niz sasiednie karty. */
.portfolio-track .portfolio-highlight {
flex-basis: 82%;
height: 260px;
}
}
/* ---------- Pricing ---------- */
.pricing-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
gap: 28px;
align-items: stretch;
}
.price-card {
background: var(--surface);
border: 1.5px solid var(--accent);
border-radius: var(--radius);
padding: 32px 28px;
display: flex;
flex-direction: column;
}
.price-card.featured {
border-color: var(--accent);
box-shadow: 0 0 0 1px var(--accent);
position: relative;
}
.featured-badge {
position: absolute;
top: -13px;
left: 50%;
transform: translateX(-50%);
background: var(--accent);
color: var(--bg);
font-size: 0.72rem;
font-weight: 700;
text-transform: uppercase;
letter-spacing: 0.05em;
padding: 5px 14px;
border-radius: 999px;
white-space: nowrap;
}
.price-card h3 {
font-size: 1.2rem;
margin-bottom: 4px;
}
.price-card .price {
font-family: var(--font-serif);
font-size: 2.1rem;
color: var(--accent);
font-weight: 700;
margin-bottom: 4px;
}
.price-card .price-note {
color: var(--muted);
font-size: 0.82rem;
margin-bottom: 20px;
}
.price-card ul {
list-style: none;
margin: 0 0 26px;
padding: 0;
flex: 1;
}
.price-card li {
padding: 8px 0 8px 26px;
position: relative;
font-size: 0.92rem;
border-top: 1px solid var(--border);
}
.price-card li:first-child {
border-top: none;
}
.price-card li::before {
content: "✓";
position: absolute;
left: 0;
color: var(--accent);
font-weight: 700;
}
.pricing-note {
text-align: center;
text-align-last: center;
color: var(--muted);
font-size: 0.88rem;
margin: 36px 0 0;
}
.pricing-note + .pricing-note {
margin-top: 2px;
}
/* ---------- FAQ ---------- */
.faq-list {
max-width: 760px;
margin: 0 auto;
}
.faq-item {
border-bottom: 1px solid var(--border);
}
.faq-question {
width: 100%;
text-align: left;
background: none;
border: none;
padding: 20px 4px;
font-family: var(--font-sans);
font-size: 1.02rem;
font-weight: 600;
color: var(--ink);
cursor: pointer;
display: flex;
justify-content: space-between;
align-items: center;
gap: 16px;
}
.faq-question .plus {
font-family: var(--font-serif);
font-size: 1.4rem;
color: var(--accent);
transition: transform 0.2s ease;
flex-shrink: 0;
}
.faq-item.open .faq-question .plus {
transform: rotate(45deg);
}
.faq-answer {
max-height: 0;
overflow: hidden;
cursor: pointer;
transition: max-height 0.25s ease;
}
.faq-answer p {
padding: 0 4px 20px;
color: var(--muted);
margin: 0;
}
/* ---------- O mnie - full-width red band (experiment 3) ---------- */
#o-mnie-full {
padding: 0;
border-top: none;
border-bottom: none;
}
.about-full-inner {
display: flex;
align-items: center;
gap: 44px;
background: var(--accent-dark);
border-radius: 4px;
padding: 48px 44px;
}
.about-full-media-col {
display: flex;
flex-direction: column;
gap: 14px;
flex-shrink: 0;
width: 220px;
}
.about-full-photo {
width: 220px;
height: 300px;
border-radius: 4px;
object-fit: cover;
border: 3px solid var(--bg);
flex-shrink: 0;
}
.about-full-text {
flex: 1;
min-width: 0;
}
.about-full-text p {
text-align: justify;
font-size: 0.92rem;
color: rgba(248, 242, 229, 0.92);
}
.about-full-actions-col {
display: flex;
flex-direction: column;
flex-shrink: 0;
width: 240px;
padding-left: 32px;
border-left: 1px solid rgba(255, 255, 255, 0.18);
}
.about-full-actions-lead {
text-align: justify;
font-size: 0.88rem;
line-height: 1.5;
color: rgba(248, 242, 229, 0.8);
margin: 0 0 16px;
}
.about-full-actions {
display: flex;
flex-direction: column;
align-items: stretch;
gap: 10px;
}
.about-full-btn {
margin: 0;
padding: 9px 12px;
width: 100%;
justify-content: center;
font-size: 0.86rem;
white-space: nowrap;
}
.about-full-btn.btn:not(.btn-outline) {
display: inline-flex;
align-items: center;
gap: 6px;
background: transparent;
border: 1.5px solid #fff;
color: var(--bg);
}
.about-full-btn.btn:not(.btn-outline):hover {
background: rgba(255, 255, 255, 0.14);
}
.about-full-mz-logo {
width: 20px;
height: 20px;
flex-shrink: 0;
}
.about-full-linkedin,
.about-full-articles {
display: inline-flex;
align-items: center;
gap: 6px;
background: transparent;
border-color: var(--bg);
color: var(--bg);
}
.about-full-linkedin svg {
width: 16px;
height: 16px;
}
.about-full-articles-logo {
width: 26px;
height: 26px;
flex-shrink: 0;
}
.about-full-linkedin:hover,
.about-full-articles:hover {
background: rgba(255, 255, 255, 0.14);
}
@media (max-width: 860px) {
.about-full-inner {
flex-direction: column;
text-align: center;
padding: 36px 28px;
gap: 20px;
}
.about-full-media-col {
align-items: center;
width: 100%;
max-width: 220px;
margin: 0 auto;
}
.about-full-actions-col {
width: 100%;
max-width: 320px;
margin: 0 auto 0;
padding-left: 0;
padding-top: 16px;
border-left: none;
border-top: 1px solid rgba(255, 255, 255, 0.18);
}
.about-full-actions-lead {
text-align: justify;
}
}
@media (max-width: 480px) {
.about-full-inner {
padding: 30px 20px;
}
.about-full-media-col {
max-width: 160px;
}
/* Zdjecie zrodlowe jest kwadratem 640x640. Ramka wyzsza niz szeroka
(160x210, jak bylo) matematycznie nie przycina w pionie wcale przy
kwadratowym zrodle - object-fit:cover skaluje wtedy do szerokosci i
pokazuje cala wysokosc oryginalu, wlacznie z pustym tlem nad glowa.
Ramka szersza niz wysoka (160x130) wymusza przyciecie w pionie, a
object-position przesuwa je tak, zeby zostawic twarz i ramiona, a nie
puste tlo. */
.about-full-photo {
width: 160px;
height: 130px;
object-position: 50% 15%;
}
/* #o-mnie-full zostaje przy padding:0 z reguly bazowej (linia ~1355) -
karta i tak dostaje odstep od sasiadow z ich wlasnego "section"
rytmu (56px pod Cennikiem, 48px nad Portfolio, patrz komentarz przy
regule "section"). Dodatkowy padding tutaj dublowal ten odstep i
robil dziure miedzy czerwonym pasem a "Zrealizowane projekty". */
/* padding-left/right, NIE skrot "padding" - ten sam element czasem ma
dodatkowo klase .about-full-inner (i podobne), ktora ustawia wlasny
gorny/dolny odstep (np. 30px). Skrot zerowal go do 0, przez co ostatni
przycisk LinkedIn dotykal samej krawedzi czerwonej karty. */
.container {
padding-left: 20px;
padding-right: 20px;
}
/* .container schodzi tu do 20px paddingu (z 24px bazowych) - margines
.offer-tabs/.offer-tabs.thin (Oferta, Proces) musi schodzic razem z
nim, zeby te czerwone karty nadal mialy takie samo wciecie jak zwykle
boksy w .container (np. "Artykuly branzowe", Pakiety, Kontakt). */
.offer-tabs,
.offer-tabs.thin {
margin: 0 20px !important;
}
}
/* ---------- Contact ---------- */
.contact-wrap {
display: grid;
grid-template-columns: 1fr 1.3fr;
align-items: stretch;
gap: 64px;
}
.contact-info {
display: flex;
flex-direction: column;
}
.contact-info h2 {
text-align: left;
font-size: 1.8rem;
}
.contact-info p {
color: var(--muted);
}
.contact-detail {
display: flex;
align-items: center;
gap: 12px;
margin-top: 12px;
font-size: 0.95rem;
}
.contact-detail svg {
width: 20px;
height: 20px;
color: var(--accent);
flex-shrink: 0;
}
/* The FAQ copy next to the form: sized (via flex) to always end exactly
where the contact form ends. .contact-wrap stretches both grid columns to
equal height by default, so .contact-info can hand that height down to
.contact-faq via flex:1, and the list does the same for whichever answer
is currently open. */
.contact-faq {
flex: 1;
display: flex;
flex-direction: column;
min-height: 0;
margin-top: 20px;
padding-top: 16px;
border-top: 1px solid var(--border);
}
.contact-faq .eyebrow {
margin-bottom: 4px;
}
.contact-faq .faq-list {
max-width: none;
margin: 0;
flex: 1;
display: flex;
flex-direction: column;
min-height: 0;
}
.contact-faq .faq-item {
flex-shrink: 0;
}
.contact-faq .faq-question {
padding: 11px 2px;
font-size: 0.92rem;
}
.contact-faq .faq-answer p {
padding: 0 2px 12px;
font-size: 0.9rem;
}
/* Focused mode: clicking a question hides the others and the answer grows
to fill the rest of the list's height instead of just its own content. */
.contact-faq .faq-list.expanded .faq-item {
display: none;
}
.contact-faq .faq-list.expanded .faq-item.open {
display: flex;
flex-direction: column;
flex: 1;
min-height: 0;
}
.contact-faq .faq-list.expanded .faq-item.open .faq-question {
flex-shrink: 0;
}
.contact-faq .faq-list.expanded .faq-item.open .faq-answer {
flex: 1;
min-height: 0;
max-height: none;
overflow-y: auto;
}
.contact-form {
background: var(--bg);
border: 2px solid var(--accent);
border-radius: var(--radius);
padding: 24px;
height: 100%;
box-sizing: border-box;
display: flex;
flex-direction: column;
justify-content: center;
}
.form-row {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 12px;
}
.form-group {
margin-bottom: 11px;
}
.form-group label {
display: block;
font-size: 0.85rem;
font-weight: 600;
color: var(--ink);
margin-bottom: 4px;
}
.form-group input,
.form-group select,
.form-group textarea {
width: 100%;
padding: 9px 12px;
border: 1px solid var(--accent);
border-radius: 6px;
font-family: var(--font-sans);
font-size: 0.95rem;
background: var(--bg);
color: var(--ink);
}
.form-group select {
appearance: none;
-webkit-appearance: none;
-moz-appearance: none;
padding-right: 38px;
cursor: pointer;
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%237a2b22' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
background-repeat: no-repeat;
background-position: right 12px center;
background-size: 15px;
}
.form-group input:focus,
.form-group select:focus,
.form-group textarea:focus {
outline: none;
border-color: var(--accent);
box-shadow: 0 0 0 3px rgba(122, 43, 34, 0.15);
}
.custom-select {
position: relative;
}
.custom-select-native {
position: absolute;
width: 1px;
height: 1px;
margin: -1px;
padding: 0;
border: 0;
overflow: hidden;
clip: rect(0, 0, 0, 0);
white-space: nowrap;
}
.custom-select-display {
width: 100%;
display: flex;
align-items: center;
justify-content: space-between;
gap: 10px;
padding: 9px 12px;
border: 1px solid var(--accent);
border-radius: 6px;
font-family: var(--font-sans);
font-size: 0.95rem;
background: var(--bg);
color: var(--ink);
cursor: pointer;
text-align: left;
}
.custom-select-display:focus {
outline: none;
border-color: var(--accent);
box-shadow: 0 0 0 3px rgba(122, 43, 34, 0.15);
}
.custom-select-display svg {
width: 15px;
height: 15px;
color: var(--accent);
flex-shrink: 0;
transition: transform 0.15s ease;
}
.custom-select.open .custom-select-display svg {
transform: rotate(180deg);
}
.custom-select-list {
position: absolute;
z-index: 20;
left: 0;
right: 0;
top: calc(100% + 6px);
margin: 0;
padding: 4px;
list-style: none;
background: var(--bg);
border: 1px solid var(--accent);
border-radius: 8px;
box-shadow: 0 12px 28px rgba(0, 0, 0, 0.12);
}
.custom-select-list li {
padding: 8px 10px;
border-radius: 5px;
font-size: 0.95rem;
color: var(--ink);
cursor: pointer;
}
.custom-select-list li:not(:last-child) {
border-bottom: 1px solid var(--border);
}
.custom-select-list li:hover,
.custom-select-list li.highlighted {
background: var(--accent);
color: var(--bg);
}
.custom-select-list li[aria-selected="true"] {
font-weight: 700;
}
.form-group textarea {
resize: vertical;
min-height: 82px;
}
.contact-method-group {
display: flex;
gap: 8px;
}
/* Specificity note: ".form-group label" (0,1,1) would otherwise beat a bare
".contact-method-option" (0,1,0) and force display:block on these pills -
scope to ".contact-method-group .contact-method-option" (0,2,0) to win. */
.contact-method-group .contact-method-option {
position: relative;
flex: 1;
display: flex;
align-items: center;
justify-content: center;
gap: 7px;
padding: 9px 10px;
border: 1px solid var(--accent);
border-radius: 999px;
font-size: 0.88rem;
font-weight: 600;
color: var(--accent);
cursor: pointer;
transition: background 0.2s ease, color 0.2s ease, border-color 0.2s ease;
}
.contact-method-option input {
position: absolute;
width: 0;
height: 0;
padding: 0;
border: none;
opacity: 0;
pointer-events: none;
}
.contact-method-option svg {
width: 16px;
height: 16px;
flex-shrink: 0;
}
.contact-method-group .contact-method-option.active {
background: var(--accent);
border-color: var(--accent);
color: var(--bg);
}
.form-consent {
font-size: 0.82rem;
color: var(--muted);
text-align: left;
margin: 0 0 12px;
}
.form-consent a {
color: var(--accent-dark);
}
.form-honey {
position: absolute !important;
left: -9999px !important;
width: 1px !important;
height: 1px !important;
opacity: 0 !important;
pointer-events: none !important;
}
.form-message {
font-size: 0.88rem;
margin-top: 14px;
display: none;
}
.form-message.error {
color: var(--accent-dark);
display: block;
}
.form-message.success {
color: #2f6b4f;
display: block;
}
.form-success {
display: none;
text-align: center;
padding: 30px 10px;
}
.form-success h3 {
margin-bottom: 8px;
}
.form-success p {
color: var(--muted);
text-align: center;
}
/* ---------- Footer (solid red, white text) ---------- */
footer.site-footer {
background: var(--accent-dark);
padding: 18px 0;
color: var(--bg);
}
footer.site-footer .container {
max-width: 1440px;
padding-left: 32px;
padding-right: 32px;
}
.footer-bar {
display: flex;
align-items: center;
flex-wrap: wrap;
gap: 26px;
}
.footer-brand {
display: flex;
align-items: center;
gap: 14px;
}
.footer-logo {
height: 42px;
width: auto;
color: var(--bg);
}
.footer-brand-tag {
display: block;
font-family: var(--font-sans);
text-transform: uppercase;
letter-spacing: 0.1em;
font-size: 0.66rem;
font-weight: 400;
line-height: 1.5;
color: var(--bg);
}
.footer-contact {
display: flex;
gap: 16px;
flex-wrap: wrap;
}
.footer-contact-item {
display: flex;
flex-direction: column;
font-size: 0.9rem;
}
.footer-contact-item a {
color: var(--bg);
text-decoration: none;
}
.footer-contact-item a:hover {
color: var(--bg);
}
.footer-label {
font-size: 0.66rem;
font-weight: 700;
letter-spacing: 0.1em;
text-transform: uppercase;
color: rgba(248, 242, 229, 0.8);
margin-bottom: 3px;
}
.footer-social {
display: flex;
gap: 10px;
}
.footer-social-btn {
width: 38px;
height: 38px;
border-radius: 8px;
border: 1.5px solid var(--bg);
display: flex;
align-items: center;
justify-content: center;
flex-shrink: 0;
transition: background 0.2s ease;
}
.footer-social-btn svg {
width: 18px;
height: 18px;
color: var(--bg);
}
.footer-social-btn:hover {
background: var(--bg);
}
.footer-social-btn:hover svg {
color: var(--accent);
}
.footer-sep {
width: 1px;
align-self: stretch;
background: rgba(248, 242, 229, 0.3);
}
.footer-meta-links {
font-size: 0.8rem;
line-height: 1.6;
text-align: left;
}
.footer-meta-links a {
color: var(--bg);
text-decoration: none;
}
.footer-meta-links a:hover {
color: var(--bg);
}
.footer-meta-copy {
margin-left: auto;
text-align: right;
font-size: 0.8rem;
color: var(--bg);
line-height: 1.6;
}
.footer-meta-copy a {
color: var(--bg);
text-decoration: underline;
}
.footer-meta-copy a:hover {
color: var(--bg);
}
/* ---------- Floating contact widget (sticky right edge) ---------- */
.float-contact {
position: fixed;
right: 22px;
bottom: 22px;
z-index: 900;
display: flex;
flex-direction: column;
gap: 12px;
transition: bottom 0.1s ease;
}
.float-contact a,
.float-toggle {
pointer-events: auto;
width: 46px;
height: 46px;
border-radius: 50%;
border: none;
background: var(--accent);
color: var(--bg);
display: flex;
align-items: center;
justify-content: center;
cursor: pointer;
box-shadow: 0 4px 14px rgba(0, 0, 0, 0.25);
transition: background 0.2s ease, transform 0.2s ease;
}
.float-contact a svg,
.float-toggle svg {
width: 22px;
height: 22px;
}
.float-contact a:hover,
.float-toggle:hover {
background: var(--accent-dark);
transform: scale(1.08);
}
/* Etykieta obok ikonki - widoczna tylko przy rozwinietym widgecie na
telefonie (patrz @media (max-width: 600px) ponizej). Na desktopie ikonki
sa zawsze widoczne bez podpisow, wiec tu domyslnie ukryta. */
.float-label {
display: none;
font-family: var(--font-sans);
font-size: 0.82rem;
font-weight: 600;
white-space: nowrap;
}
.float-toggle {
display: none;
}
@media (max-width: 600px) {
.float-contact {
right: 12px;
bottom: 12px;
gap: 10px;
/* Bez tego dziecko o wiekszej szerokosci (rozwiniete .float-item z
etykieta) rozciagaloby wszystkie elementy do swojej szerokosci -
glowna ikonka przestalaby byc kolem. Kazdy element trzyma wlasna
szerokosc, wszystkie doklejone do prawej krawedzi. */
align-items: flex-end;
}
.float-toggle {
width: 58px;
height: 58px;
display: flex;
}
.float-toggle svg {
width: 26px;
height: 26px;
}
/* Selektor .float-contact a (baza, poza media query) ma wyzsza
specyficznosc niz samo .float-item, wiec samo .float-item nigdy nie
wygrywalo tego pojedynku i ikonki nigdy sie nie chowaly - stad dopisany
.float-contact z przodu. */
.float-contact .float-item {
display: none;
}
/* Rozwiniete ikonki sa mniejsze od glownej i szersze niz wysokie - obok
ikonki mieści sie etykieta (span.float-label, ukryty poza mobilka i
poza stanem otwartym - patrz baza .float-label ponizej). */
.float-contact.open .float-item {
display: flex;
width: auto;
height: 38px;
border-radius: 999px;
padding: 0 16px 0 14px;
gap: 8px;
}
.float-contact.open .float-item svg {
width: 17px;
height: 17px;
flex-shrink: 0;
}
.float-contact.open .float-label {
display: inline-block;
color: var(--bg);
}
.float-contact.open .float-toggle {
background: var(--accent-dark);
}
}
/* ---------- Privacy policy page ---------- */
.legal main {
max-width: 780px;
margin: 0 auto;
padding: 56px 24px 90px;
}
.legal h1 {
font-size: clamp(1.8rem, 4vw, 2.4rem);
}
.legal .updated {
color: var(--muted);
font-size: 0.85rem;
margin-bottom: 32px;
}
.legal .lead {
background: var(--surface);
border: 1px solid var(--border);
border-left: 3px solid var(--accent);
border-radius: 0 8px 8px 0;
padding: 16px 20px;
margin-bottom: 36px;
font-size: 0.95rem;
}
.legal section {
border: none;
padding: 0 0 30px;
}
.legal section h2 {
display: flex;
align-items: baseline;
gap: 12px;
font-size: 1.35rem;
margin-bottom: 12px;
}
.legal section h2 .num {
font-weight: 700;
color: var(--accent);
}
.legal section p,
.legal section li {
font-size: 0.93rem;
}
.legal section p + p {
margin-top: 10px;
}
.legal section ul {
margin: 10px 0 0 20px;
}
.legal section li {
margin-bottom: 6px;
}
.legal .box {
background: var(--surface);
border: 1px solid var(--border);
border-radius: 8px;
padding: 16px 20px;
margin-top: 12px;
}
.legal .box dl {
display: grid;
grid-template-columns: auto 1fr;
gap: 6px 16px;
font-size: 0.85rem;
}
.legal .box dt {
color: var(--muted);
}
/* ---------- Privacy policy modal ---------- */
.modal-overlay {
position: fixed;
inset: 0;
z-index: 1000;
display: flex;
align-items: center;
justify-content: center;
padding: 24px;
background: rgba(26, 26, 26, 0.55);
}
.modal-overlay[hidden] {
display: none;
}
.modal-box {
position: relative;
width: 100%;
max-width: 780px;
max-height: 78vh;
background: var(--bg);
border-radius: var(--radius);
box-shadow: 0 24px 60px rgba(0, 0, 0, 0.3);
display: flex;
flex-direction: column;
overflow: hidden;
}
.modal-header {
display: flex;
align-items: center;
justify-content: space-between;
gap: 16px;
padding: 18px 24px;
background: var(--accent);
flex-shrink: 0;
}
.modal-header h2 {
margin: 0;
font-size: 1.3rem;
color: var(--bg);
}
.modal-close {
flex-shrink: 0;
width: 32px;
height: 32px;
display: flex;
align-items: center;
justify-content: center;
border: 1.5px solid rgba(248, 242, 229, 0.6);
border-radius: 50%;
background: transparent;
color: var(--bg);
cursor: pointer;
}
.modal-close:hover {
border-color: var(--bg);
background: rgba(248, 242, 229, 0.15);
}
.modal-close svg {
width: 16px;
height: 16px;
}
.modal-body {
overflow-y: auto;
padding: 24px;
scrollbar-width: thin;
scrollbar-color: var(--accent) var(--bg);
}
.modal-body::-webkit-scrollbar {
width: 10px;
}
.modal-body::-webkit-scrollbar-track {
background: var(--bg);
}
.modal-body::-webkit-scrollbar-thumb {
background-color: var(--accent);
border-radius: 999px;
border: 2px solid var(--bg);
}
.modal-body::-webkit-scrollbar-thumb:hover {
background-color: var(--accent-dark);
}
.modal-body .legal-inner {
max-width: 100%;
}
.modal-body .updated {
color: var(--muted);
font-size: 0.85rem;
margin-bottom: 18px;
}
.modal-body .lead {
background: var(--bg);
border: 2px solid var(--accent);
border-radius: 8px;
padding: 14px 20px;
margin-bottom: 20px;
font-size: 0.95rem;
}
.modal-body section {
border: none;
padding: 0 0 18px;
}
.modal-body section:last-child {
padding-bottom: 0;
}
.modal-body section h2 {
display: flex;
align-items: baseline;
gap: 12px;
font-size: 1.1rem;
margin-bottom: 10px;
}
.modal-body section h2 .num {
font-weight: 700;
color: var(--accent);
}
.modal-body section p,
.modal-body section li {
font-size: 0.9rem;
text-align: left;
}
.modal-body section p + p {
margin-top: 10px;
}
.modal-body section ul {
margin: 10px 0 0 20px;
}
.modal-body section li {
margin-bottom: 6px;
}
.modal-body .box {
background: var(--bg);
border: 2px solid var(--accent);
border-radius: 8px;
padding: 16px 20px;
margin-top: 12px;
}
.modal-body .box dl {
display: grid;
grid-template-columns: auto 1fr;
gap: 6px 16px;
font-size: 0.85rem;
}
.modal-body .box dt {
color: var(--muted);
}
@media (max-width: 600px) {
.modal-box {
max-height: 92vh;
}
.modal-header {
padding: 16px 18px;
}
.modal-body {
padding: 18px;
}
}
/* ---------- Responsive ---------- */
@media (max-width: 860px) {
.contact-wrap {
grid-template-columns: 1fr;
}
.form-row {
grid-template-columns: 1fr;
}
}
@media (max-width: 1000px) {
.nav-links {
position: fixed;
top: 64px;
left: 0;
right: 0;
background: var(--bg);
flex-direction: column;
align-items: stretch;
/* Gora zmniejszona wzgledem reszty - z pelnym 14px robila sie widocznie
wieksza dziura nad "Strona glowna" niz miedzy kolejnymi pozycjami
(te maja tylko 3+3px marginesu linku + 1px kreski = 7px). */
padding: 6px 14px 14px;
border-top: 2px solid var(--accent);
border-bottom: 2px solid var(--accent);
transform: translateY(-140%);
transition: transform 0.25s ease;
}
.nav-links.open {
transform: translateY(0);
}
.nav-links a {
margin: 3px 0;
text-align: center;
}
/* Waskie bordowe kreski miedzy pozycjami. */
.nav-links li:not(:last-child) {
border-bottom: 1px solid var(--accent);
}
.nav-toggle {
display: flex;
}
/* Bez PL/EN w gornym pasku (przenosi sie do menu) siatka mialaby tylko 2
realne elementy w 3-kolumnowym szablonie z bazowej reguly, a
auto-rozmieszczenie wpychalo drugi (navbar-right) w srodkowa kolumne
1fr zamiast w prawa - stad nachodzil na logo. Prosty dwukolumnowy
uklad z odstepem miedzy nimi dziala przewidywalnie.
padding-right zresetowany na 16px - regula @media (max-width: 1320px)
wyzej rezerwowala tam 132px pod PL/EN, ktorego juz tu nie ma; bez tego
resetu Kontakt+hamburger stalyby 132px od prawej krawedzi zamiast przy
niej. */
.navbar-inner {
grid-template-columns: auto auto;
justify-content: space-between;
padding: 10px 16px;
}
.navbar-brand img {
height: 46px;
margin-left: -8px;
}
/* Kwadratowa (nie okragla) obwodka jak przy zwyklych przyciskach, bordowe
kreski hamburgera zamiast czarnych, i wysokosc dopasowana do przycisku
Kontakt (44px: 9px padding Kontaktu + jego wlasny tekst) - zmierzone
bezposrednio (kontaktH=44, wczesniej toggleH=36), nie na oko. */
.nav-toggle {
border: 1px solid var(--accent);
border-radius: 6px;
padding: 13px;
}
.nav-toggle span {
background: var(--accent);
}
/* PL/EN przenosi sie do rozwijanego menu (patrz .mobile-lang-item
ponizej) - w miejscu, w ktorym wczesniej stal jako osobna pigulka w
gornym pasku, teraz jest pusto. Kontakt zostaje tam gdzie byl zawsze -
widoczny caly czas, nie znika po zamknieciu menu. */
.mobile-lang-item {
display: list-item;
text-align: center;
padding: 8px 0 4px;
}
/* Poza gornym paskiem .lang-toggle jest position:absolute wzgledem
.navbar - tutaj, w srodku rozwinietego menu, ma po prostu plynac jak
zwykly element listy. */
.lang-toggle {
position: static;
transform: none;
display: inline-flex;
}
/* Odstepy miedzy sekcjami +25% wzgledem desktopu (tylko na mobilce -
desktop trzyma bazowe wartosci z gory pliku: section 48/56, .hero 58,
#kontakt 56). section: 60 -> 75. .hero i #kontakt nie maja wlasnego
mobilnego nadpisania nigdzie indziej, wiec dochodzi ono tutaj. */
section {
padding: 75px 0;
}
.hero {
padding: 72.5px 0;
}
#kontakt {
padding: 70px 0;
}
.contact-form {
padding: 18px 16px;
}
.footer-bar {
flex-direction: column;
align-items: center;
text-align: center;
}
.footer-contact {
justify-content: center;
}
.footer-sep {
display: none;
}
.footer-meta-links,
.footer-meta-copy {
margin-left: 0;
text-align: center;
}
}
/* ==========================================================================
Blog (blog.html)
Ten sam jezyk wizualny co reszta serwisu: kremowe tlo, bordowy akcent,
szeryfowe naglowki, karty z 2 px obwodka i promieniem var(--radius).
========================================================================== */
.blog-hero {
padding: 56px 0 8px;
text-align: center;
}
.blog-hero h1 {
font-size: 2.3rem;
margin-bottom: 14px;
}
.blog-hero .blog-hero-lede {
max-width: 720px;
margin: 0 auto;
text-align: center;
text-align-last: center;
color: var(--muted);
}
.blog-filters {
display: flex;
flex-wrap: wrap;
justify-content: center;
gap: 8px;
margin: 28px 0 0;
padding: 0;
list-style: none;
}
.blog-filter {
font-family: var(--font-sans);
font-size: 0.85rem;
font-weight: 600;
color: var(--accent);
background: transparent;
border: 1.5px solid var(--accent);
border-radius: 999px;
padding: 6px 16px;
cursor: pointer;
transition: background 0.2s ease, color 0.2s ease;
}
.blog-filter:hover {
background: var(--accent-soft);
}
.blog-filter.active {
background: var(--accent);
color: var(--bg);
}
.blog-grid {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 24px;
margin-top: 36px;
}
.blog-card {
display: flex;
flex-direction: column;
background: var(--surface);
border: 2px solid var(--accent);
border-radius: var(--radius);
padding: 22px;
text-decoration: none;
transition: transform 0.18s ease, box-shadow 0.18s ease;
}
.blog-card:hover {
transform: translateY(-3px);
box-shadow: 0 14px 30px rgba(26, 26, 26, 0.12);
}
.blog-card[hidden] {
display: none;
}
.blog-card-meta {
display: flex;
align-items: center;
gap: 8px;
flex-wrap: wrap;
margin-bottom: 12px;
}
.blog-tag {
font-size: 0.68rem;
font-weight: 700;
text-transform: uppercase;
letter-spacing: 0.06em;
color: var(--bg);
background: var(--accent);
border-radius: 999px;
padding: 3px 10px;
}
.blog-date {
font-size: 0.74rem;
color: var(--muted);
}
.blog-card-title {
font-family: var(--font-serif);
font-weight: 700;
font-size: 1.14rem;
color: var(--ink);
line-height: 1.3;
margin-bottom: 10px;
text-wrap: balance;
}
.blog-card-lede {
font-size: 0.88rem;
color: var(--ink-soft);
margin: 0 0 18px;
text-align: left;
}
.blog-card-link {
margin-top: auto;
font-size: 0.88rem;
font-weight: 700;
color: var(--accent);
}
.blog-articles {
margin-top: 20px;
}
.blog-article {
max-width: 760px;
margin: 0 auto;
padding: 56px 0 0;
scroll-margin-top: 90px;
}
.blog-article + .blog-article {
border-top: 1px solid var(--border);
margin-top: 56px;
}
.blog-article h2 {
font-size: 1.72rem;
margin-bottom: 10px;
text-wrap: balance;
}
.blog-article h3 {
font-size: 1.12rem;
margin: 30px 0 10px;
}
.blog-article-meta {
display: flex;
align-items: center;
gap: 8px;
flex-wrap: wrap;
margin-bottom: 20px;
}
.blog-article ul {
padding-left: 20px;
margin: 0 0 16px;
}
.blog-article li {
margin-bottom: 7px;
}
.blog-article p {
margin: 0 0 16px;
}
.blog-callout {
background: var(--accent-soft);
border-left: 3px solid var(--accent);
border-radius: 0 var(--radius) var(--radius) 0;
padding: 16px 20px;
margin: 0 0 20px;
}
.blog-callout p {
margin: 0;
font-size: 0.92rem;
}
.blog-back {
display: inline-block;
margin-top: 6px;
font-size: 0.85rem;
font-weight: 600;
color: var(--accent);
text-decoration: none;
}
.blog-back:hover {
text-decoration: underline;
}
.blog-cta {
max-width: 760px;
margin: 64px auto 0;
border: 2px solid var(--accent);
border-radius: var(--radius);
padding: 32px;
text-align: center;
}
.blog-cta h2 {
font-size: 1.5rem;
}
.blog-cta p {
text-align: center;
text-align-last: center;
color: var(--muted);
margin: 0 0 20px;
}
@media (max-width: 900px) {
.blog-grid {
grid-template-columns: repeat(2, 1fr);
}
}
@media (max-width: 640px) {
.blog-grid {
grid-template-columns: 1fr;
}
.blog-hero h1 {
font-size: 1.8rem;
}
.blog-article h2 {
font-size: 1.4rem;
}
}