@layer components {
.szt-lebego {
--szt-nav: clamp(1rem, 3vw, 1.75rem);
--szt-emel: 0px;
--szt-logo: 132px;
--szt-logo-m: calc(var(--szt-logo) * 140.5 / 169.3);
--szt-lj: 16px;
--szt-la: calc(var(--szt-nav) + 50px + 10px);
--szt-r: 265px;
position: fixed;
inset-block-end: var(--szt-emel);
inset-inline-end: 0;
z-index: 45;
pointer-events: none;
transition: opacity var(--dur-slow) var(--ease),
visibility 0s linear 0s;
}
@supports (width: hypot(3px, 4px)) {
.szt-lebego {
--szt-r: calc(hypot(var(--szt-logo) + var(--szt-lj),
var(--szt-logo-m) + var(--szt-la)) + 18px);
}
}
@media (width < 64rem) {
.szt-lebego { --szt-emel: var(--cookie-banner-h, 0px); }
}
@media (width < 34rem) {
.szt-lebego {
--szt-nav: 1rem;
--szt-logo: 116px;
--szt-lj: 14px;
--szt-r: 234px;
}
}
:root:has(.kalauz.is-open) .szt-lebego {
opacity: 0;
visibility: hidden;
transition: opacity var(--dur-slow) var(--ease),
visibility 0s linear var(--dur-slow);
}
.szt-lebego__lap {
position: absolute;
inset-inline-end: 0;
inset-block-end: 0;
inline-size: var(--szt-r);
block-size: var(--szt-r);
transform-origin: 100% 100%;
opacity: 0;
visibility: hidden;
scale: 0.6;
transition: opacity var(--dur-slow) var(--ease),
scale var(--dur-slow) var(--ease),
visibility 0s linear var(--dur-slow);
}
.szt-lebego.is-lathato:not(.is-ful) .szt-lebego__lap {
opacity: 1;
visibility: inherit;
scale: none;
transition-delay: 0s;
}
.szt-sarok {
position: absolute;
inset: 0;
display: block;
border: 4px solid #003399;
border-inline-end: 0;
border-block-end: 0;
border-start-start-radius: 100%;
background: #FFFFFF;
box-shadow: -6px -6px 28px -10px rgba(0, 20, 22, 0.45);
pointer-events: auto;
transition: box-shadow var(--transition);
}
.szt-sarok:hover {
box-shadow: -8px -8px 36px -10px rgba(0, 20, 22, 0.55);
}
.szt-sarok img {
position: absolute;
inset-inline-end: var(--szt-lj);
inset-block-end: var(--szt-la);
inline-size: var(--szt-logo);
block-size: auto;
}
.szt-sarok:focus-visible {
outline: 3px solid var(--brand-teal, #002E32);
outline-offset: -12px;
}
.szt-lebego button:focus-visible {
outline: 2px solid var(--brand-teal, #002E32);
outline-offset: 2px;
box-shadow: 0 0 0 6px var(--neon);
}
.szt-lebego__csuk {
position: absolute;
inset-block-start: 14px;
inset-inline-end: 12px;
display: grid;
place-items: center;
inline-size: 2rem;
block-size: 2rem;
border-radius: 50%;
border: 2px solid #FFFFFF;
background: var(--brand-teal, #002E32);
color: #FFFFFF;
box-shadow: 0 4px 10px -4px rgba(0, 20, 22, 0.5);
pointer-events: auto;
transition: background var(--transition), scale var(--transition);
}
.szt-lebego__csuk::before {
content: "";
position: absolute;
inset: -6px;
}
.szt-lebego__csuk:hover {
background: color-mix(in srgb, var(--brand-teal, #002E32) 80%, var(--neon));
scale: 1.06;
}
.szt-lebego__csuk svg,
.szt-lebego__ful svg { inline-size: 16px; block-size: 16px; }
.szt-lebego__ful {
position: absolute;
right: 0;
bottom: calc(var(--szt-nav) + 50px + 0.75rem);
display: flex;
align-items: center;
justify-content: center;
gap: 0.6rem;
writing-mode: vertical-rl;
rotate: 180deg;
width: 2.75rem;
padding: 1.1rem 0;
border: 0;
border-radius: 0 12px 12px 0;
background: #003399;
color: #FFFFFF;
font-size: 0.8125rem;
font-weight: 600;
line-height: 1;
letter-spacing: 0.04em;
white-space: nowrap;
box-shadow: 8px 0 22px -10px rgba(0, 20, 22, 0.5);
pointer-events: auto;
opacity: 0;
visibility: hidden;
translate: 100% 0;
transition: opacity var(--dur-slow) var(--ease),
translate var(--dur-slow) var(--ease),
visibility 0s linear var(--dur-slow),
background var(--transition);
}
.szt-lebego__ful:hover { background: #0B44B0; }
.szt-lebego.is-lathato.is-ful .szt-lebego__ful {
opacity: 1;
visibility: inherit;
translate: none;
transition-delay: 0s;
}
@media (prefers-reduced-motion: reduce) {
.szt-lebego__lap,
.szt-lebego.is-lathato:not(.is-ful) .szt-lebego__lap { scale: none; }
.szt-lebego__ful,
.szt-lebego.is-lathato.is-ful .szt-lebego__ful { translate: none; }
}
.szt-lap {
display: grid;
justify-items: start;
gap: var(--space-m);
}
.szt-lap__blokk { line-height: 0; }
.szt-lap__blokk img {
display: block;
inline-size: clamp(351px, 32vw, 456px);
max-inline-size: 100%;
block-size: auto;
box-shadow: 0 1px 2px rgba(0, 20, 22, 0.12),
0 12px 28px -16px rgba(0, 20, 22, 0.45);
}
.szt-koszonet {
font-family: var(--font-heading);
font-size: var(--step-1);
font-weight: 600;
line-height: 1.35;
color: var(--text);
}
@media print {
.szt-lebego { display: none !important; }
}
}