/* ========================================================================== Baza: reset, typografia, układ ========================================================================== */ *, *::before, *::after { box-sizing: border-box; } html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; scroll-padding-top: calc(var(--header-h) + 16px); } body { margin: 0; font-family: var(--font); font-size: var(--fs-body); line-height: 1.6; font-weight: 400; color: var(--text); background: var(--white); -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; } img, svg { max-width: 100%; } img { display: block; height: auto; } h1, h2, h3, h4 { margin: 0; color: var(--navy); font-weight: 500; line-height: 1.18; letter-spacing: -0.005em; text-wrap: balance; } h1 { font-size: clamp(2.125rem, 4.6vw, 4rem); font-weight: 700; line-height: 1.06; letter-spacing: -0.015em; } h2 { font-size: clamp(1.75rem, 3vw, 2.5rem); } h3 { font-size: clamp(1.1875rem, 1.6vw, 1.375rem); line-height: 1.25; } p { margin: 0 0 1em; } p:last-child { margin-bottom: 0; } a { color: var(--blue); text-decoration-thickness: 1px; text-underline-offset: 3px; } a:hover { color: var(--blue-dark); } ul, ol { margin: 0; padding: 0; list-style: none; } button { font: inherit; color: inherit; } :focus-visible { outline: 3px solid var(--teal); outline-offset: 3px; border-radius: 4px; } .skip-link { position: absolute; left: 12px; top: -80px; z-index: 200; background: var(--navy); color: var(--white); padding: 12px 18px; border-radius: var(--radius); text-decoration: none; } .skip-link:focus { top: 12px; } .sr-only { position: absolute !important; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; } /* Układ */ .container { width: 100%; max-width: calc(var(--container) + var(--gutter) * 2); margin-inline: auto; padding-inline: var(--gutter); } .container--wide { max-width: calc(var(--container-wide) + var(--gutter) * 2); } .section { padding-block: clamp(56px, 8vw, 112px); } .section--tint { background: var(--tint); } .section--tint-2 { background: var(--tint-2); } .section--navy { background: var(--navy); color: var(--on-dark); } .section--navy h2, .section--navy h3 { color: var(--on-dark); } .section__head { max-width: 760px; margin-bottom: clamp(28px, 4vw, 48px); } .section__head p { color: var(--text-2); font-size: var(--fs-lead); margin-top: 16px; } .section--navy .section__head p { color: var(--on-dark-2); } .eyebrow { display: block; margin-bottom: 20px; font-size: var(--fs-small); font-weight: 500; letter-spacing: 0.14em; text-transform: uppercase; color: var(--teal); } .fine { font-size: var(--fs-fine); color: var(--text-2); line-height: 1.5; } /* Znaczniki do rozstrzygnięcia – widoczne tylko w wersji do przeglądu. Aby ukryć przed publikacją: dodaj class="hide-todo" do . */ .todo { color: var(--text-2); font-style: italic; font-size: var(--fs-fine); } .hide-todo .todo { display: none; } @media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } *, *::before, *::after { animation-duration: 0.01ms !important; transition-duration: 0.01ms !important; } }