/* Kontener, header, footer, menu mobilne. Wartosci wylacznie z tokens.css. */ .container { width: 100%; max-width: var(--container); margin-inline: auto; padding-inline: var(--space-4); } .skip-link { position: absolute; top: -100%; left: var(--space-3); z-index: calc(var(--z-nav) + 1); background: var(--c-accent); color: var(--c-accent-ink); padding: var(--space-2) var(--space-3); border-radius: var(--radius); font-weight: 600; } .skip-link:focus { top: var(--space-3); } /* --- Header --- */ .site-header { position: sticky; top: 0; z-index: var(--z-nav); background: color-mix(in srgb, var(--c-bg) 88%, transparent); backdrop-filter: blur(10px); border-bottom: 1px solid var(--c-border); } .site-header__inner { display: flex; align-items: center; gap: var(--space-4); min-height: 4rem; } .brand { display: flex; align-items: center; gap: var(--space-2); margin-right: auto; color: var(--c-text); text-decoration: none; font-family: var(--f-head); font-weight: 600; font-size: var(--step-1); } .brand:hover { color: var(--c-text); } .brand img { width: 2rem; height: 2rem; } .brand__name em { font-style: normal; color: var(--c-accent); } .nav-list { display: flex; align-items: center; gap: var(--space-4); list-style: none; } .nav-list a { color: var(--c-text-dim); text-decoration: none; font-size: var(--step--1); letter-spacing: 0.02em; } .nav-list a:hover, .nav-list a[aria-current='page'] { color: var(--c-text); } /* Przelacznik jezyka - glos 'IT' */ .lang-switch { font-family: var(--f-mono); font-size: var(--step--1); color: var(--c-accent); text-decoration: none; border: 1px solid var(--c-border); border-radius: var(--radius); padding: var(--space-1) var(--space-2); } .lang-switch:hover { border-color: var(--c-accent); } /* Przycisk 'hamburger' obsluguje wylacznie nav.js, wiec bez JS-a nie ma go po co pokazywac - klikanie w martwy przycisk jest gorsze niz jego brak. Stad caly rozwijany wariant menu siedzi pod klasa .js, ktora dokleja tylko wtedy, gdy skrypty faktycznie dzialaja. */ .nav-toggle { display: none; } @media (max-width: 46rem) { /* --- Bez JS: menu jest zwykla lista, ktora zawija sie pod logo. --- */ .site-header__inner { flex-wrap: wrap; padding-block: var(--space-2); } .nav-list { flex-wrap: wrap; gap: var(--space-3); } /* --- Z JS: menu zwija sie do przycisku. --- */ .js .site-header__inner { flex-wrap: nowrap; padding-block: 0; } .js .nav-toggle { display: grid; place-items: center; width: 2.5rem; height: 2.5rem; background: none; border: 1px solid var(--c-border); border-radius: var(--radius); color: var(--c-text); cursor: pointer; } .js .nav-list { position: absolute; inset: 100% 0 auto 0; flex-direction: column; align-items: flex-start; gap: var(--space-3); padding: var(--space-4); background: var(--c-surface); border-bottom: 1px solid var(--c-border); } /* 'hidden' ustawia wylacznie nav.js - w markupie go nie ma. */ .nav-list[hidden] { display: none; } } /* --- Footer --- */ .site-footer { margin-top: var(--space-6); border-top: 1px solid var(--c-border); padding-block: var(--space-5); color: var(--c-text-dim); font-size: var(--step--1); } .site-footer__inner { display: flex; flex-wrap: wrap; gap: var(--space-3) var(--space-4); justify-content: space-between; } /* --- Sekcje --- */ .section { padding-block: var(--space-6); } .section__head { margin-bottom: var(--space-5); } /* Rytm pionowy tresci pisanej. Reset w base.css zeruje wszystkie marginesy i nikt ich nie przywraca - bez tego kolejne akapity sklejaja sie w sciane tekstu. Scope na BEZPOSREDNICH dzieciach .section jest celowy: karty i galerie maja wlasny flex/grid z gap, a globalny margin na

dolozylby im drugi odstep na wierzchu. :where() trzyma specyficznosc na zerze, wiec komponent moze to nadpisac bez walki. */ .section > :where(h1, h2, h3, p, ul, ol) + :where(p, ul, ol) { margin-top: var(--space-3); } /*

tez jest bezposrednim dzieckiem .section (formularz pod przyciskiem). Bez tej reguly przycisk 'Napisz wiadomosc' stal 0 px pod linijka z mailem. */ .section > :where(h1, h2, h3, p, ul, ol) + .reveal { margin-top: var(--space-4); } .section > :where(p, ul, ol) + :where(h3) { margin-top: var(--space-5); } /* Grupy technologii sa
, wiec wypadaja poza rytm liczony na p/ul/ol. */ .section > :where(h1, h2, h3, p, ul, ol) + .stack-group { margin-top: var(--space-3); } .section > .stack-group + .stack-group { margin-top: var(--space-4); } .section__eyebrow { font-family: var(--f-mono); font-size: var(--step--1); color: var(--c-accent); letter-spacing: 0.08em; text-transform: uppercase; margin-bottom: var(--space-2); }