:root { --toda-header-h: 5.25rem; }
.toda-header {
position: fixed;
inset-inline: 0;
top: 0;
z-index: 100;
background: transparent;
transition: background-color 0.35s ease, box-shadow 0.35s ease, backdrop-filter 0.35s ease;
} .toda-header.is-scrolled {
background: color-mix(in srgb, var(--wp--preset--color--base) 88%, transparent);
backdrop-filter: blur(12px);
box-shadow: 0 1px 0 var(--wp--preset--color--line);
}
.toda-header.is-scrolled .toda-header__inner { min-height: 3.9rem; } .toda-header__inner {
position: relative;
z-index: 100;
display: flex;
align-items: center;
gap: clamp(1rem, 3vw, 2.5rem);
min-height: 5.25rem;
transition: min-height 0.35s cubic-bezier(0.16, 1, 0.3, 1);
} .toda-header__logo {
--logo-h: clamp(1.5rem, 2.2vw, 2rem);
display: inline-flex;
align-items: center;
text-decoration: none;
}
.toda-header__logo img {
height: var(--logo-h);
width: auto;
transition: transform 0.4s cubic-bezier(0.16, 1, 0.3, 1);
transform-origin: left center;
}
@media (hover: hover) {
.toda-header__logo:hover img { transform: scale(1.06); }
}
.toda-nav { margin-inline-start: auto; }
.toda-nav__list {
display: flex;
align-items: center;
gap: clamp(1.25rem, 2.5vw, 2.25rem);
margin: 0;
padding: 0;
list-style: none;
}
.toda-nav__link {
position: relative;
display: inline-block;
padding-block: 0.35rem;
color: var(--wp--preset--color--contrast);
font-family: var(--wp--preset--font-family--heading);
font-size: var(--wp--preset--font-size--sm);
font-weight: 600;
letter-spacing: 0.08em;
text-transform: uppercase;
text-decoration: none;
} .toda-nav__link::after {
content: "";
position: absolute;
left: 0;
bottom: 0;
width: 100%;
height: 1px;
background: var(--wp--preset--color--accent);
transform: scaleX(0);
transform-origin: right center;
transition: transform 0.35s cubic-bezier(0.22, 1, 0.36, 1);
}
@media (hover: hover) {
.toda-nav__link:hover::after { transform: scaleX(1); transform-origin: left center; }
}
.toda-nav__link[aria-current="page"]::after { transform: scaleX(1); } .toda-nav__link--fronty { color: var(--wp--preset--color--accent); }
.toda-nav__link--fronty::after { background: var(--wp--preset--color--accent); }
.toda-nav__zewnetrzny {
font-size: 0.75em;
vertical-align: 0.1em;
margin-left: 0.1em;
}
@media (hover: hover) {
.toda-nav__link--fronty:hover { color: var(--wp--preset--color--accent-strong); }
} .toda-burger {
display: none;
position: relative;
width: 48px;
height: 48px;
margin-inline-start: auto;
padding: 0;
border: 0;
background: none;
cursor: pointer;
}
.toda-burger__bar {
position: absolute;
left: 50%;
width: 24px;
height: 1.5px;
background: var(--wp--preset--color--contrast);
transform: translateX(-50%);
transition: transform 0.3s ease, opacity 0.3s ease;
}
.toda-burger__bar:nth-child(1) { top: 20px; }
.toda-burger__bar:nth-child(2) { top: 27px; }
.toda-burger[aria-expanded="true"] .toda-burger__bar:nth-child(1) { transform: translateX(-50%) translateY(3.5px) rotate(45deg); }
.toda-burger[aria-expanded="true"] .toda-burger__bar:nth-child(2) { transform: translateX(-50%) translateY(-3.5px) rotate(-45deg); } .toda-menu {
--menu-ease: cubic-bezier(0.22, 1, 0.36, 1);
position: fixed;
inset-inline: 0;
top: 0;
height: 100dvh; z-index: 99;
display: flex;
flex-direction: column;
gap: clamp(1.25rem, 4vh, 2.5rem);
padding: calc(var(--toda-header-h) + 1.25rem) clamp(1.25rem, 6vw, 3rem) 0;
background: var(--wp--preset--color--base);
pointer-events: auto; user-select: none;
overflow-y: auto;
overscroll-behavior: contain;
clip-path: inset(0 0 0 100%);
transition: clip-path 0.55s var(--menu-ease);
}
.toda-menu[hidden] { display: none; }
.toda-menu.is-open { clip-path: inset(0 0 0 0); } .toda-menu__siatka {
position: absolute;
inset: 0;
z-index: -1;
background-image:
linear-gradient(to right, color-mix(in srgb, var(--wp--preset--color--contrast) 7%, transparent) 1px, transparent 1px),
linear-gradient(to bottom, color-mix(in srgb, var(--wp--preset--color--contrast) 7%, transparent) 1px, transparent 1px);
background-size: 56px 56px;
mask-image: radial-gradient(120% 80% at 80% 10%, #000 20%, transparent 80%);
}
.toda-menu__etykieta {
margin: 0;
padding-left: 0.9rem;
border-left: 2px solid var(--wp--preset--color--accent);
font-size: 0.6875rem;
font-weight: 500;
letter-spacing: 0.32em;
text-transform: uppercase;
color: var(--wp--preset--color--muted);
opacity: 0;
transform: translateY(12px);
transition: opacity 0.35s ease, transform 0.45s var(--menu-ease);
} .toda-menu__nav { margin-block: auto; }
.toda-menu__list {
margin: 0;
padding: 0;
list-style: none;
display: grid;
}
.toda-menu__el { will-change: transform, opacity;
backface-visibility: hidden;
opacity: 0;
transform: translateY(26px);
transition: opacity 0.35s ease, transform 0.45s var(--menu-ease);
}
.toda-menu__el + .toda-menu__el { border-top: 1px solid var(--wp--preset--color--line); }
.toda-menu__link {
position: relative;
display: flex;
align-items: center;
gap: clamp(0.75rem, 3vw, 1.25rem);
min-height: 56px;
padding: clamp(0.7rem, 2.2vh, 1.15rem) 0.25rem;
color: var(--wp--preset--color--contrast);
text-decoration: none;
transition: color 0.3s ease, transform 0.4s var(--menu-ease);
}
.toda-menu__nr {
font-size: 0.625rem;
font-weight: 500;
letter-spacing: 0.18em;
color: var(--wp--preset--color--muted);
align-self: flex-start;
padding-top: 0.55rem;
transition: color 0.3s ease;
}
.toda-menu__tekst {
font-family: var(--wp--preset--font-family--heading);
font-size: clamp(2rem, 11vw, 3.25rem);
font-weight: 700;
line-height: 1;
letter-spacing: -0.03em;
text-transform: uppercase;
}
.toda-menu__strzalka {
margin-left: auto;
font-size: 1.25rem;
opacity: 0;
transform: translateX(-10px);
transition: opacity 0.3s ease, transform 0.4s var(--menu-ease);
} .toda-menu__link--fronty,
.toda-menu__link--fronty .toda-menu__nr { color: var(--wp--preset--color--accent); }
.toda-menu__link:active .toda-menu__strzalka,
.toda-menu__link:focus-visible .toda-menu__strzalka { opacity: 1; transform: none; }
.toda-menu__link:active,
.toda-menu__link:focus-visible { color: var(--wp--preset--color--accent); transform: translateX(6px); }
@media (hover: hover) {
.toda-menu__link:hover { color: var(--wp--preset--color--accent); transform: translateX(6px); }
.toda-menu__link:hover .toda-menu__strzalka { opacity: 1; transform: none; }
.toda-menu__link:hover .toda-menu__nr { color: var(--wp--preset--color--accent); }
} .toda-menu__foot {
display: grid;
gap: 1rem;
padding-bottom: calc(4rem + env(safe-area-inset-bottom, 0px));
opacity: 0;
transform: translateY(18px);
transition: opacity 0.35s ease, transform 0.45s var(--menu-ease);
}
.toda-menu__mail {
font-size: var(--wp--preset--font-size--sm);
letter-spacing: 0.02em;
color: var(--wp--preset--color--muted);
text-decoration: none;
}
.toda-menu__tel {
font-family: var(--wp--preset--font-family--heading);
font-size: var(--wp--preset--font-size--xl);
font-weight: 700;
letter-spacing: -0.01em;
color: var(--wp--preset--color--contrast);
text-decoration: none;
} .toda-menu.is-open .toda-menu__etykieta,
.toda-menu.is-open .toda-menu__el,
.toda-menu.is-open .toda-menu__foot {
opacity: 1;
transform: none;
transition-duration: 0.6s, 0.75s;
}
.toda-menu.is-open .toda-menu__etykieta { transition-delay: 0.18s; }
.toda-menu.is-open .toda-menu__el { transition-delay: calc(0.24s + var(--i) * 0.07s); }
.toda-menu.is-open .toda-menu__foot { transition-delay: 0.52s; }
@media (max-width: 900px) {
.toda-nav { display: none; }
.toda-burger { display: block; } .toda-header.is-scrolled {
backdrop-filter: none;
background: color-mix(in srgb, var(--wp--preset--color--base) 96%, transparent);
} .toda-header {
transform: translateZ(0);
will-change: transform;
}
.toda-header__inner,
.toda-header.is-scrolled .toda-header__inner {
min-height: 4.25rem;
transition: none;
}
} body.toda-menu-open { overflow: hidden; }