/* Fonty laduje kazdej strony, nie ten plik. Przy @import przegladarka
musi najpierw pobrac i przeanalizowac arkusz, dopiero potem siega po kroje —
trzy zapytania jedno po drugim, zanim pojawi sie tekst. Z zapytanie
o fonty startuje rownolegle z arkuszem. Grubosc 300 Outfit byla zamawiana,
a nigdzie nieuzywana. */
:root {
--navy: #0b1220;
--navy-2: #141c2e;
--navy-3: #1e2a44;
--copper: #c45c26;
--copper-2: #e07a3d;
--brass: #d4a574;
--paper: #f3efe8;
--paper-2: #e7e0d4;
--ink: #12151a;
--ink-soft: #4a4450;
--muted: #6b645c;
--white: #fbf9f6;
--card: #ffffff;
--line: rgba(196, 92, 38, 0.28);
--shadow: 0 18px 40px rgba(11, 18, 32, 0.12);
--radius: 14px;
--max: 1180px;
--header: 76px;
--ease: cubic-bezier(0.22, 1, 0.36, 1);
}
*,
*::before,
*::after {
box-sizing: border-box;
margin: 0;
padding: 0;
}
html {
scroll-behavior: smooth;
}
@media (prefers-reduced-motion: reduce) {
html {
scroll-behavior: auto;
}
*,
*::before,
*::after {
animation: none !important;
transition: none !important;
}
}
body {
font-family: "Source Sans 3", sans-serif;
font-size: 17px;
line-height: 1.65;
color: var(--ink);
background: var(--paper);
min-height: 100dvh;
}
img {
max-width: 100%;
display: block;
}
a {
color: inherit;
text-decoration: none;
}
button,
input,
select,
textarea {
font: inherit;
}
button {
cursor: pointer;
border: 0;
background: none;
}
ul {
list-style: none;
}
h1,
h2,
h3,
h4 {
font-family: Outfit, sans-serif;
line-height: 1.12;
letter-spacing: -0.03em;
font-weight: 700;
}
.skip {
position: absolute;
left: -999px;
top: 8px;
background: var(--copper);
color: #fff;
padding: 10px 16px;
z-index: 1000;
}
.skip:focus {
left: 8px;
}
.wrap {
width: min(var(--max), calc(100% - 40px));
margin-inline: auto;
}
.kicker {
display: inline-flex;
align-items: center;
gap: 10px;
font-family: Outfit, sans-serif;
font-size: 12px;
font-weight: 600;
letter-spacing: 0.18em;
text-transform: uppercase;
color: var(--copper);
}
.kicker::before {
content: "";
width: 28px;
height: 1px;
background: var(--copper);
}
.btn {
display: inline-flex;
align-items: center;
justify-content: center;
gap: 10px;
min-height: 48px;
padding: 0 22px;
border-radius: 999px;
font-family: Outfit, sans-serif;
font-size: 14px;
font-weight: 600;
letter-spacing: 0.04em;
text-transform: uppercase;
transition: transform 0.2s var(--ease), background 0.2s, color 0.2s, border-color 0.2s;
}
.btn:hover {
transform: translateY(-1px);
}
.btn:focus-visible,
.lang button:focus-visible,
.nav a:focus-visible,
.icon-btn:focus-visible {
outline: 3px solid var(--copper);
outline-offset: 3px;
}
.btn-primary {
background: var(--copper);
color: #fff;
}
.btn-primary:hover {
background: #a94b1d;
}
.btn-ghost {
border: 1px solid rgba(255, 255, 255, 0.28);
color: #fff;
}
.btn-ghost:hover {
background: rgba(255, 255, 255, 0.08);
}
.btn-dark {
background: var(--navy);
color: #fff;
}
.btn-line {
border: 1px solid rgba(18, 21, 26, 0.18);
color: var(--ink);
background: transparent;
}
.btn-line:hover {
border-color: var(--copper);
color: var(--copper);
}
.topbar {
background: var(--navy);
color: rgba(251, 249, 246, 0.78);
font-size: 13px;
}
.topbar .wrap {
display: flex;
justify-content: space-between;
align-items: center;
min-height: 38px;
gap: 16px;
}
.topbar a:hover {
color: var(--brass);
}
.top-links {
display: flex;
gap: 18px;
flex-wrap: wrap;
}
.lang {
display: flex;
gap: 6px;
}
/* Przelacznik jezyka to odnosniki do tej samej podstrony w en/ i de/.
Regula obejmuje tez