.kjo-oznakowanie {
background-color: var(--wp--preset--color--white);
}
.kjo-oznakowanie__inner {
display: flex;
align-items: center;
justify-content: space-between;
gap: var(--kjo-znak-pole);
padding-block: var(--kjo-znak-pole);
}
.kjo-oznakowanie__znak {
display: block;
flex: none;
width: auto;
max-width: none;
height: var(--kjo-znak-h);
} @media (max-width: 599px) {
.kjo-oznakowanie__inner {
flex-direction: column;
justify-content: center;
gap: 0.625rem;
}
.kjo-oznakowanie__znak--pswpr {
height: 5rem;
}
.kjo-oznakowanie__znak--ue {
height: 3.5rem;
}
} .kjo-header {
position: sticky;
top: 0;
z-index: 50;
}
.kjo-nav {
border-block: 1px solid var(--wp--preset--color--line);
background-color: var(--wp--preset--color--base);
}
.kjo-nav__inner {
display: flex;
align-items: center;
justify-content: space-between;
gap: var(--wp--preset--spacing--40);
min-height: var(--kjo-nav-h);
}
.kjo-wordmark {
display: inline-flex;
flex-direction: column;
gap: 0.125rem;
padding-block: 0.5rem;
color: var(--wp--preset--color--contrast);
text-decoration: none;
}
.kjo-wordmark__name {
font-family: var(--wp--preset--font-family--heading);
font-size: 1.3125rem;
font-weight: 600;
line-height: 1.1;
letter-spacing: -0.01em;
white-space: nowrap;
}
.kjo-wordmark__sub {
color: var(--wp--preset--color--muted);
font-size: var(--wp--preset--font-size--xs);
line-height: 1.2;
}
.kjo-nav__przycisk,
.kjo-menu__zamknij {
display: none;
place-items: center;
width: 2.75rem;
height: 2.75rem;
padding: 0;
border: 0;
border-radius: var(--kjo-r-sm);
background: none;
color: inherit;
cursor: pointer;
}
.kjo-menu__lista {
display: flex;
flex-wrap: wrap;
gap: 0.25rem clamp(0.75rem, 1.6vw, 1.5rem);
margin: 0;
padding: 0;
list-style: none;
}
.kjo-menu__lista a {
display: inline-flex;
align-items: center;
min-height: 2.75rem;
color: var(--wp--preset--color--contrast);
font-size: var(--wp--preset--font-size--sm);
font-weight: 500;
text-decoration: none;
}
@media (hover: hover) {
.kjo-menu__lista a:hover {
color: var(--wp--preset--color--accent);
text-decoration: underline;
text-decoration-thickness: 2px;
text-underline-offset: 0.4em;
}
} @media (max-width: 1099px) {
.kjo-nav__inner {
flex-wrap: wrap;
}
.js .kjo-nav__inner {
flex-wrap: nowrap;
}
} @media (max-width: 1099px) {
.js .kjo-nav__przycisk,
.js .kjo-menu__zamknij {
display: grid;
} .js .kjo-menu {
position: fixed;
top: 0;
left: 0;
z-index: 100;
display: flex;
flex-direction: column;
width: 100%;
height: 100dvh;
padding: 0.75rem var(--kjo-margines) 0;
overflow-y: auto;
overscroll-behavior: contain;
background-color: var(--wp--preset--color--dark);
color: var(--wp--preset--color--base);
opacity: 0;
visibility: hidden;
pointer-events: auto;
user-select: none;
will-change: transform, opacity;
backface-visibility: hidden;
} .kjo-menu-otwarte .kjo-menu {
opacity: 1;
visibility: visible;
transition: opacity var(--kjo-czas) ease;
}
html.kjo-menu-otwarte {
overflow: hidden;
}
.kjo-menu__zamknij {
align-self: flex-end;
flex: none;
--kjo-focus: var(--wp--preset--color--accent-light);
} .js .kjo-menu__lista {
flex-direction: column;
flex-wrap: nowrap;
gap: 0;
margin-block-start: 1rem;
padding-block-end: calc(4rem + env(safe-area-inset-bottom));
}
.js .kjo-menu__lista li + li {
border-block-start: 1px solid color-mix(in srgb, var(--wp--preset--color--base) 18%, transparent);
}
.js .kjo-menu__lista a {
--kjo-focus: var(--wp--preset--color--accent-light);
display: flex;
min-height: 3.5rem;
color: var(--wp--preset--color--base);
font-family: var(--wp--preset--font-family--heading);
font-size: 1.5rem;
font-weight: 500;
}
}
@media (max-width: 1099px) and (hover: hover) {
.js .kjo-menu__lista a:hover {
color: var(--wp--preset--color--accent-light);
text-decoration: none;
}
}