<![CDATA[/* FEJLÉC kódja, ha az oldalt használod ezt távolítsd el innen, és másold a kódot a fejlécbe */
<meta charset="utf-8">
<style>
@import url('https://fonts.googleapis.com/css2?family=Barlow:wght@500;600;700;800&family=Barlow+Condensed:wght@700;800;900&display=swap');
:root {
--kh-red: #ed1c24;
--kh-black: #000;
--kh-white: #f5f3ee;
--kh-muted: rgba(245, 243, 238, .56);
--kh-dim: rgba(245, 243, 238, .28);
--kh-line: rgba(245, 243, 238, .13);
--kh-side: clamp(22px, 4.2vw, 72px);
--kh-height: clamp(76px, 6vw, 92px);
}
body.kh-menu-open {
overflow: hidden;
}
.kh-header,
.kh-header *,
.kh-header *::before,
.kh-header *::after {
box-sizing: border-box;
}
.kh-header a {
color: inherit;
text-decoration: none;
}
.kh-header button {
font: inherit;
}
/* FEJLÉC */
.kh-header {
position: fixed;
top: 0;
left: 0;
right: 0;
z-index: 9990;
width: 100%;
height: var(--kh-height);
color: var(--kh-white);
background: rgba(0, 0, 0, .94);
border-bottom: 1px solid var(--kh-line);
font-family: "Barlow", Arial, sans-serif;
-webkit-font-smoothing: antialiased;
backdrop-filter: blur(16px);
-webkit-backdrop-filter: blur(16px);
transform: translateY(0);
transition:
height .38s cubic-bezier(.16, 1, .3, 1),
background-color .3s ease,
border-color .3s ease,
transform .42s cubic-bezier(.16, 1, .3, 1),
box-shadow .3s ease;
will-change: height, transform;
}
/* Fenntartja a fix fejléc helyét. */
.kh-header-spacer {
width: 100%;
height: var(--kh-height);
background: #000;
}
.kh-header.is-compact {
height: 66px;
background: rgba(0, 0, 0, .84);
border-bottom-color: rgba(245, 243, 238, .1);
box-shadow: 0 12px 34px rgba(0, 0, 0, .24);
}
.kh-header.is-hidden {
transform: translateY(calc(-100% - 2px));
}
.kh-header.is-menu-open {
transform: translateY(0);
}
.kh-header-inner {
width: 100%;
height: 100%;
display: grid;
grid-template-columns: auto 1fr auto;
align-items: center;
gap: clamp(18px, 2vw, 34px);
padding-inline: var(--kh-side);
}
/* LOGÓ */
.kh-logo {
position: relative;
display: inline-flex;
align-items: center;
height: 100%;
min-width: 0;
}
.kh-logo::after {
content: "";
position: absolute;
left: 50%;
bottom: -1px;
width: clamp(30px, 2.2vw, 42px);
height: 2px;
background: var(--kh-red);
box-shadow: 0 0 16px rgba(237, 28, 36, .65);
opacity: 0;
transform: translateX(-50%) scaleX(.35);
transform-origin: center;
transition:
transform .42s cubic-bezier(.16, 1, .3, 1),
opacity .25s ease,
width .42s cubic-bezier(.16, 1, .3, 1),
left .42s cubic-bezier(.16, 1, .3, 1);
}
.kh-logo:hover::after,
.kh-logo:focus-visible::after {
left: 0;
width: 100%;
opacity: 1;
transform: none;
transform-origin: left center;
}
.kh-logo.is-current::after {
left: 0;
width: 100%;
opacity: 1;
transform: none;
transform-origin: left center;
}
.kh-logo img {
display: block;
width: auto;
height: clamp(48px, 4.4vw, 68px);
max-width: min(270px, 48vw);
object-fit: contain;
object-position: left center;
transition:
height .38s cubic-bezier(.16, 1, .3, 1),
opacity .25s ease;
}
.kh-header.is-compact .kh-logo img {
height: 48px;
}
/* KÖZÉPSŐ FELIRAT */
.kh-context {
justify-self: start;
display: inline-flex;
align-items: center;
gap: 10px;
color: var(--kh-dim);
font-size: 9px;
font-weight: 700;
line-height: 1;
letter-spacing: .24em;
text-transform: uppercase;
transition: opacity .25s ease;
}
.kh-context::before {
content: "";
width: 5px;
height: 5px;
border-radius: 50%;
background: var(--kh-red);
box-shadow: 0 0 10px rgba(237, 28, 36, .8);
}
.kh-header.is-compact .kh-context {
opacity: .72;
}
/* JOBB OLDALI GOMBOK */
.kh-actions {
display: flex;
align-items: center;
justify-self: end;
gap: 10px;
margin-left: auto;
}
.kh-cart,
.kh-trigger,
.kh-close {
width: 48px;
height: 48px;
display: inline-grid;
place-items: center;
flex: 0 0 48px;
padding: 0;
border: 1px solid var(--kh-line);
border-radius: 0;
color: var(--kh-white);
background: transparent;
cursor: pointer;
transition:
color .25s ease,
border-color .25s ease,
background .25s ease,
transform .35s ease;
}
.kh-cart svg {
width: 17px;
height: 17px;
fill: none;
stroke: currentColor;
stroke-width: 1.5;
stroke-linecap: round;
stroke-linejoin: round;
}
/* KOSÁR DARABSZÁM */
.kh-cart {
position: relative;
overflow: visible;
}
.kh-cart-count {
position: absolute;
z-index: 2;
top: -7px;
right: -7px;
min-width: 21px;
height: 21px;
display: inline-flex;
align-items: center;
justify-content: center;
padding: 0 5px;
border: 2px solid #000;
border-radius: 999px;
color: #fff;
background: var(--kh-red);
box-shadow: 0 5px 16px rgba(237, 28, 36, .42);
font-family: "Barlow Condensed", "Arial Narrow", sans-serif;
font-size: 11px;
font-weight: 800;
line-height: 1;
letter-spacing: 0;
font-variant-numeric: tabular-nums;
opacity: 0;
pointer-events: none;
transform: scale(.72);
transform-origin: center;
transition:
opacity .2s ease,
transform .35s cubic-bezier(.16, 1, .3, 1),
color .2s ease,
background .2s ease,
border-color .2s ease;
}
.kh-cart-count.is-visible {
opacity: 1;
transform: scale(1);
}
.kh-cart:hover .kh-cart-count,
.kh-cart:focus-visible .kh-cart-count {
color: var(--kh-red);
border-color: var(--kh-red);
background: #fff;
}
.kh-cart:hover,
.kh-cart:focus-visible,
.kh-trigger:hover,
.kh-trigger:focus-visible,
.kh-close:hover,
.kh-close:focus-visible {
color: #fff;
border-color: var(--kh-red);
background: var(--kh-red);
outline: none;
}
/*
Az Elementor globális button:focus színének semlegesítése.
Egérkattintás után ne maradjon rózsaszín háttér a gombon;
billentyűzetes navigációnál a fenti :focus-visible stílus marad aktív.
*/
.kh-header .kh-trigger:focus:not(:focus-visible),
.kh-header .kh-close:focus:not(:focus-visible) {
color: var(--kh-white) !important;
border-color: var(--kh-line) !important;
background: #cc2024 !important;
outline: none !important;
box-shadow: none !important;
}
/* HAMBURGER */
.kh-trigger-lines {
width: 20px;
display: grid;
gap: 5px;
}
.kh-trigger-lines i {
display: block;
width: 100%;
height: 1px;
background: currentColor;
transform-origin: center;
transition: width .3s ease;
}
.kh-trigger-lines i:nth-child(2) {
width: 13px;
}
.kh-trigger:hover .kh-trigger-lines i:nth-child(2) {
width: 20px;
}
/* TELJES KÉPERNYŐS MENÜ */
.kh-overlay {
position: fixed;
inset: 0;
z-index: 10000;
display: grid;
grid-template-rows: auto 1fr auto;
min-height: 100vh;
min-height: 100dvh;
padding: 0 var(--kh-side) clamp(24px, 3vw, 44px);
overflow-x: hidden;
overflow-y: auto;
color: var(--kh-white);
background:
radial-gradient(
ellipse 46% 58% at 82% 42%,
rgba(237, 28, 36, .10),
transparent 68%
),
linear-gradient(115deg, #000 0%, #050505 64%, #000 100%);
opacity: 0;
visibility: hidden;
pointer-events: none;
clip-path: inset(0 0 100% 0);
transition:
opacity .45s ease,
visibility 0s linear .62s,
clip-path .62s cubic-bezier(.16, 1, .3, 1);
}
.kh-overlay::before {
content: "";
position: fixed;
inset: 0;
pointer-events: none;
background-image:
linear-gradient(
rgba(245, 243, 238, .032) 1px,
transparent 1px
),
linear-gradient(
90deg,
rgba(245, 243, 238, .032) 1px,
transparent 1px
);
background-size:
clamp(48px, 5.5vw, 84px)
clamp(48px, 5.5vw, 84px);
mask-image:
radial-gradient(ellipse at 52% 44%, #000, transparent 82%);
}
.kh-overlay::after {
content: "";
position: fixed;
left: var(--kh-side);
top: 18%;
bottom: 14%;
width: 1px;
pointer-events: none;
background:
linear-gradient(
transparent,
var(--kh-red) 22%,
var(--kh-red) 78%,
transparent
);
opacity: .3;
}
.kh-overlay.is-open {
opacity: 1;
visibility: visible;
pointer-events: auto;
clip-path: inset(0);
transition-delay: 0s;
}
.kh-overlay-top,
.kh-overlay-main,
.kh-overlay-footer {
position: relative;
z-index: 1;
}
/* OVERLAY FEJLÉC */
.kh-overlay-top {
height: var(--kh-height);
display: flex;
align-items: center;
justify-content: space-between;
border-bottom: 1px solid var(--kh-line);
}
.kh-overlay-logo img {
display: block;
width: auto;
height: clamp(48px, 4.4vw, 68px);
max-width: min(270px, 48vw);
object-fit: contain;
object-position: left center;
}
/* BEZÁRÓGOMB */
.kh-close {
position: relative;
}
.kh-close::before,
.kh-close::after {
content: "";
position: absolute;
width: 19px;
height: 1px;
background: currentColor;
}
.kh-close::before {
transform: rotate(45deg);
}
.kh-close::after {
transform: rotate(-45deg);
}
.kh-close:hover {
transform: rotate(90deg);
}
/* OVERLAY FŐ TARTALOM */
.kh-overlay-main {
display: grid;
grid-template-columns:
minmax(190px, .34fr)
minmax(520px, 1fr);
align-items: center;
gap: clamp(40px, 8vw, 150px);
padding-block: clamp(50px, 8vh, 110px);
}
.kh-overlay-intro {
align-self: start;
padding-top: 12px;
}
.kh-kicker {
display: inline-flex;
align-items: center;
gap: 11px;
margin: 0 0 24px;
color: var(--kh-muted);
font-size: 9px;
font-weight: 700;
letter-spacing: .25em;
text-transform: uppercase;
}
.kh-kicker::before {
content: "";
width: 6px;
height: 6px;
border: 1px solid var(--kh-red);
border-radius: 50%;
box-shadow: 0 0 10px rgba(237, 28, 36, .6);
}
.kh-overlay-copy {
max-width: 29ch;
margin: 0;
color: var(--kh-muted);
font-size: clamp(13px, 1vw, 15px);
line-height: 1.7;
}
/* MENÜPONTOK */
.kh-nav-list {
margin: 0;
padding: 0;
border-bottom: 1px solid var(--kh-line);
list-style: none;
}
.kh-nav-item {
border-top: 1px solid var(--kh-line);
opacity: 0;
transform: translateY(24px);
transition:
opacity .5s ease,
transform .58s cubic-bezier(.16, 1, .3, 1);
}
.kh-overlay.is-open .kh-nav-item {
opacity: 1;
transform: none;
}
.kh-overlay.is-open .kh-nav-item:nth-child(1) {
transition-delay: .12s;
}
.kh-overlay.is-open .kh-nav-item:nth-child(2) {
transition-delay: .19s;
}
.kh-overlay.is-open .kh-nav-item:nth-child(3) {
transition-delay: .26s;
}
.kh-overlay.is-open .kh-nav-item:nth-child(4) {
transition-delay: .33s;
}
.kh-overlay.is-open .kh-nav-item:nth-child(5) {
transition-delay: .4s;
}
.kh-nav-link {
display: grid;
grid-template-columns: 48px minmax(0, 1fr) 42px;
align-items: center;
gap: clamp(12px, 2vw, 28px);
min-height: clamp(82px, 10vh, 116px);
color: var(--kh-white) !important;
}
.kh-nav-num {
color: var(--kh-dim);
font-size: 9px;
font-weight: 700;
letter-spacing: .2em;
transition: color .25s ease;
}
.kh-nav-label {
font-family: "Barlow Condensed", "Arial Narrow", sans-serif;
font-size: clamp(50px, 5.8vw, 92px);
font-weight: 900;
line-height: .82;
letter-spacing: -.015em;
text-transform: uppercase;
transition:
color .25s ease,
transform .35s cubic-bezier(.16, 1, .3, 1);
}
.kh-nav-arrow {
color: var(--kh-dim);
transition:
color .25s ease,
transform .35s ease;
}
.kh-nav-arrow svg {
width: 24px;
height: 24px;
display: block;
fill: none;
stroke: currentColor;
stroke-width: 1.45;
stroke-linecap: round;
stroke-linejoin: round;
}
.kh-nav-link:hover .kh-nav-num,
.kh-nav-link:focus-visible .kh-nav-num,
.kh-nav-link.is-current .kh-nav-num,
.kh-nav-link:hover .kh-nav-label,
.kh-nav-link:focus-visible .kh-nav-label,
.kh-nav-link.is-current .kh-nav-label,
.kh-nav-link:hover .kh-nav-arrow,
.kh-nav-link:focus-visible .kh-nav-arrow,
.kh-nav-link.is-current .kh-nav-arrow {
color: var(--kh-red);
}
.kh-nav-link:hover .kh-nav-label {
transform: translateX(10px);
}
.kh-nav-link:hover .kh-nav-arrow {
transform: rotate(-45deg);
}
/* OVERLAY ALSÓ SÁV */
.kh-overlay-footer {
display: grid;
grid-template-columns: 1fr auto auto;
align-items: center;
gap: clamp(20px, 3vw, 48px);
padding-top: clamp(20px, 2vw, 30px);
border-top: 1px solid var(--kh-line);
opacity: 0;
transform: translateY(12px);
transition:
opacity .4s ease .38s,
transform .4s ease .38s;
}
.kh-overlay.is-open .kh-overlay-footer {
opacity: 1;
transform: none;
}
.kh-footer-meta {
color: var(--kh-dim);
font-size: 8px;
font-weight: 700;
letter-spacing: .22em;
text-transform: uppercase;
}
.kh-email {
color: var(--kh-muted) !important;
font-size: 12px;
font-weight: 600;
transition: color .25s ease;
}
.kh-email:hover {
color: var(--kh-white) !important;
}
.kh-cta {
min-height: 48px;
display: inline-flex;
align-items: center;
justify-content: center;
gap: 14px;
padding: 13px 22px;
border: 1px solid var(--kh-red);
color: #fff !important;
background: var(--kh-red);
font-size: 9px;
font-weight: 800;
letter-spacing: .18em;
text-transform: uppercase;
transition:
color .25s ease,
background .25s ease,
transform .25s ease;
}
.kh-cta svg {
width: 14px;
height: 14px;
fill: none;
stroke: currentColor;
stroke-width: 1.6;
stroke-linecap: round;
stroke-linejoin: round;
}
.kh-cta:hover {
color: var(--kh-red) !important;
background: transparent;
transform: translateY(-2px);
}
/* TABLET */
@media (max-width: 900px) {
:root {
--kh-side: clamp(20px, 5vw, 38px);
--kh-height: 78px;
}
.kh-context {
display: none;
}
.kh-overlay-main {
grid-template-columns: 1fr;
gap: 34px;
}
.kh-overlay-intro {
display: none;
}
.kh-nav-link {
min-height: clamp(70px, 10vh, 96px);
}
.kh-nav-label {
font-size: clamp(44px, 10vw, 72px);
}
.kh-overlay-footer {
grid-template-columns: 1fr auto;
}
.kh-footer-meta {
display: none;
}
}
/* MOBIL */
@media (max-width: 560px) {
:root {
--kh-side: 20px;
--kh-height: 74px;
}
.kh-logo img,
.kh-overlay-logo img {
height: 48px;
max-width: 52vw;
}
.kh-header.is-compact {
height: 62px;
}
.kh-header.is-compact .kh-logo img {
height: 40px;
}
.kh-actions {
gap: 7px;
}
.kh-cart,
.kh-trigger,
.kh-close {
width: 44px;
height: 44px;
flex-basis: 44px;
}
.kh-overlay {
padding-bottom: 24px;
}
.kh-overlay-main {
padding-block: 38px;
}
.kh-nav-link {
grid-template-columns: 30px minmax(0, 1fr) 24px;
gap: 10px;
min-height: 74px;
}
.kh-nav-label {
font-size: clamp(36px, 11.5vw, 54px);
}
.kh-nav-arrow {
display: grid;
justify-content: end;
}
.kh-nav-arrow svg {
width: 19px;
height: 19px;
}
.kh-overlay-footer {
grid-template-columns: 1fr;
gap: 15px;
}
.kh-email {
text-align: center;
}
.kh-cta {
width: 100%;
}
}
@media (prefers-reduced-motion: reduce) {
.kh-overlay,
.kh-nav-item,
.kh-nav-label,
.kh-nav-arrow,
.kh-overlay-footer,
.kh-close,
.kh-header {
transition-duration: .01ms !important;
}
}
</style>
<header class="kh-header">
<div class="kh-header-inner">
<a
class="kh-logo"
href="https://katakomba.info/"
aria-label="Katakomba pinceszínház – főoldal"
>
<img fetchpriority="high"
src="https://katakomba.info/wp-content/uploads/2025/09/kat_PINCESZNH-logo-FEHER.webp"
alt="Katakomba pinceszínház"
width="2400"
height="736"
decoding="async"
fetchpriority="high"
>
</a>
<span class="kh-context">
Budapest · I. kerület · 2019 óta
</span>
<div class="kh-actions">
<a
class="kh-cart"
href="https://katakomba.info/kosar/"
aria-label="Kosár"
>
<svg viewBox="0 0 24 24" aria-hidden="true">
<path d="M3 4h2l2.2 10.2a2 2 0 0 0 2 1.6h7.9a2 2 0 0 0 2-1.6L20.5 8H6"/>
<circle cx="9.5" cy="20" r="1"/>
<circle cx="17.5" cy="20" r="1"/>
</svg>
<span class="kh-cart-count" aria-hidden="true">0</span>
</a>
<button
class="kh-trigger"
type="button"
aria-label="Menü megnyitása"
aria-expanded="false"
>
<span class="kh-trigger-lines" aria-hidden="true">
<i></i>
<i></i>
<i></i>
</span>
</button>
</div>
</div>
<nav
class="kh-overlay"
aria-label="Főmenü"
aria-hidden="true"
>
<div class="kh-overlay-top">
<a
class="kh-overlay-logo"
href="https://katakomba.info/"
aria-label="Katakomba pinceszínház – főoldal"
>
<img loading="lazy"
src="https://katakomba.info/wp-content/uploads/2025/09/kat_PINCESZNH-logo-FEHER.webp"
alt="Katakomba pinceszínház"
width="2400"
height="736"
loading="lazy"
decoding="async"
fetchpriority="low"
>
</a>
<button
class="kh-close"
type="button"
aria-label="Menü bezárása"
></button>
</div>
<div class="kh-overlay-main">
<aside class="kh-overlay-intro">
<p class="kh-kicker">Navigáció</p>
<p class="kh-overlay-copy">
Személyes hangulatú színházi előadások és különleges
eseményhelyszín Budapest szívében.
</p>
</aside>
<ul class="kh-nav-list">
<li class="kh-nav-item">
<a
class="kh-nav-link"
href="https://katakomba.info/"
data-kh-route="home"
>
<span class="kh-nav-num">01</span>
<span class="kh-nav-label">Nyitólap</span>
<span class="kh-nav-arrow" aria-hidden="true"><svg viewBox="0 0 24 24"><path d="M5 12h14M13 6l6 6-6 6"/></svg></span>
</a>
</li>
<li class="kh-nav-item">
<a
class="kh-nav-link"
href="https://katakomba.info/eloadasok/"
data-kh-route="musor"
>
<span class="kh-nav-num">02</span>
<span class="kh-nav-label">Előadásaink</span>
<span class="kh-nav-arrow" aria-hidden="true"><svg viewBox="0 0 24 24"><path d="M5 12h14M13 6l6 6-6 6"/></svg></span>
</a>
</li>
<li class="kh-nav-item">
<a
class="kh-nav-link"
href="https://katakomba.info/berles/"
data-kh-route="berles"
>
<span class="kh-nav-num">03</span>
<span class="kh-nav-label">Bérlés</span>
<span class="kh-nav-arrow" aria-hidden="true"><svg viewBox="0 0 24 24"><path d="M5 12h14M13 6l6 6-6 6"/></svg></span>
</a>
</li>
<li class="kh-nav-item">
<a
class="kh-nav-link"
href="https://katakomba.info/tarsulat/"
data-kh-route="tarsulat"
>
<span class="kh-nav-num">04</span>
<span class="kh-nav-label">Társulatunk</span>
<span class="kh-nav-arrow" aria-hidden="true"><svg viewBox="0 0 24 24"><path d="M5 12h14M13 6l6 6-6 6"/></svg></span>
</a>
</li>
<li class="kh-nav-item">
<a
class="kh-nav-link"
href="https://katakomba.info/kapcsolat/"
data-kh-route="kapcsolat"
>
<span class="kh-nav-num">05</span>
<span class="kh-nav-label">Kapcsolat</span>
<span class="kh-nav-arrow" aria-hidden="true"><svg viewBox="0 0 24 24"><path d="M5 12h14M13 6l6 6-6 6"/></svg></span>
</a>
</li>
</ul>
</div>
<div class="kh-overlay-footer">
<span class="kh-footer-meta">
Katakomba · Krisztina tér 4.
</span>
<a
class="kh-email"
href="mailto:berles@katakomba.info"
>
berles@katakomba.info
</a>
<a
class="kh-cta"
href="https://katakomba.info/berles/#kapcsolat"
>
<span>Ajánlatot kérek</span>
<svg viewBox="0 0 24 24" aria-hidden="true"><path d="M7 17 17 7M8 7h9v9"/></svg>
</a>
</div>
</nav>
</header>
<div class="kh-header-spacer" aria-hidden="true"></div>
<script>
(() => {
document.querySelectorAll('.kh-header').forEach((header) => {
if (header.dataset.khReady === 'true') return;
header.dataset.khReady = 'true';
const trigger = header.querySelector('.kh-trigger');
const overlay = header.querySelector('.kh-overlay');
const close = header.querySelector('.kh-close');
const cartLink = header.querySelector('.kh-cart');
const cartBadge = header.querySelector('.kh-cart-count');
let cartRefreshTimer = 0;
const normalizeCount = (value) => {
const number = Number(value);
return Number.isFinite(number) && number > 0
? Math.floor(number)
: 0;
};
const setCartCount = (value) => {
if (!cartLink || !cartBadge) return;
const count = normalizeCount(value);
const visibleCount = String(count);
if (cartBadge.textContent !== visibleCount) {
cartBadge.textContent = visibleCount;
}
cartBadge.classList.toggle('is-visible', count > 0);
cartBadge.setAttribute('data-count', String(count));
cartLink.setAttribute(
'aria-label',
count > 0 ? `Kosár – ${count} tétel` : 'Kosár – üres'
);
};
const countCartInputs = () => {
const inputs = document.querySelectorAll(
'.woocommerce-cart-form .cart_item input.qty, ' +
'.wc-block-cart-items__row input.wc-block-components-quantity-selector__input'
);
if (inputs.length) {
return Array.from(inputs).reduce(
(sum, input) => sum + normalizeCount(input.value),
0
);
}
if (document.querySelector('.cart-empty, .wc-empty-cart-message')) {
return 0;
}
return null;
};
const countMiniCart = (root) => {
const items = root.querySelectorAll(
'.woocommerce-mini-cart-item, .mini_cart_item'
);
if (!items.length) {
return root.querySelector(
'.woocommerce-mini-cart__empty-message, .widget_shopping_cart_content .empty'
) ? 0 : null;
}
return Array.from(items).reduce((sum, item) => {
const quantity = item.querySelector('.quantity');
const text = quantity?.textContent || '';
const match = text.match(/(\d+)\s*[×xX]/);
return sum + normalizeCount(match?.[1] || 1);
}, 0);
};
const countFragments = (fragments) => {
if (!fragments || typeof fragments !== 'object') return null;
for (const html of Object.values(fragments)) {
if (
typeof html !== 'string' ||
!/(mini_cart|mini-cart|widget_shopping_cart)/.test(html)
) continue;
const parsed = new DOMParser().parseFromString(html, 'text/html');
const count = countMiniCart(parsed);
if (count !== null) return count;
}
return null;
};
const requestCartCount = async () => {
if (!cartLink || !cartBadge) return;
const pageCount = countCartInputs();
if (pageCount !== null) setCartCount(pageCount);
const siteOrigin = new URL(cartLink.href, window.location.href).origin;
const headers = { Accept: 'application/json' };
const storeNonce = window.wcSettings?.storeApiNonce;
if (storeNonce) headers.Nonce = storeNonce;
try {
const response = await fetch(
`${siteOrigin}/wp-json/wc/store/v1/cart`,
{ credentials: 'same-origin', headers }
);
if (response.ok) {
const cart = await response.json();
if (Array.isArray(cart.items)) {
setCartCount(
cart.items.reduce(
(sum, item) => sum + normalizeCount(item.quantity),
0
)
);
return;
}
}
} catch (error) {
/* A klasszikus WooCommerce-fragmentum a tartalék forrás. */
}
try {
const ajaxTemplate = window.wc_cart_fragments_params?.wc_ajax_url;
const ajaxUrl = ajaxTemplate
? ajaxTemplate.replace('%%endpoint%%', 'get_refreshed_fragments')
: `${siteOrigin}/?wc-ajax=get_refreshed_fragments`;
const response = await fetch(ajaxUrl, {
credentials: 'same-origin',
headers: { 'X-Requested-With': 'XMLHttpRequest' }
});
if (!response.ok) return;
const data = await response.json();
const fragmentCount = countFragments(data.fragments);
if (fragmentCount !== null) setCartCount(fragmentCount);
} catch (error) {
/* A jelvény rejtve marad, ha a WooCommerce még nem érhető el. */
}
};
const scheduleCartRefresh = (delay = 90) => {
window.clearTimeout(cartRefreshTimer);
cartRefreshTimer = window.setTimeout(requestCartCount, delay);
};
const updateFromFragments = (fragments) => {
const fragmentCount = countFragments(fragments);
if (fragmentCount !== null) {
setCartCount(fragmentCount);
} else {
scheduleCartRefresh();
}
};
const initialCartCount = countCartInputs();
if (initialCartCount !== null) setCartCount(initialCartCount);
scheduleCartRefresh(0);
if (window.jQuery) {
window.jQuery(document.body).on(
'added_to_cart.khCartCount removed_from_cart.khCartCount wc_fragments_refreshed.khCartCount wc_fragments_loaded.khCartCount',
(event, fragments) => updateFromFragments(fragments)
);
window.jQuery(document.body).on(
'updated_wc_div.khCartCount',
() => scheduleCartRefresh()
);
window.jQuery(document.body).on(
'wc_cart_emptied.khCartCount',
() => setCartCount(0)
);
}
document.body.addEventListener(
'wc-blocks_added_to_cart',
() => scheduleCartRefresh()
);
document.body.addEventListener(
'wc-blocks_removed_from_cart',
() => scheduleCartRefresh()
);
window.addEventListener('pageshow', () => scheduleCartRefresh(40));
const links = header.querySelectorAll(
'.kh-nav-link, .kh-overlay-logo, .kh-cta'
);
const updateCurrentRoute = () => {
const currentPath = window.location.pathname
.replace(/\/+$/, '') || '/';
const currentHash = window.location.hash.toLowerCase();
let currentRoute = '';
if (currentPath === '/') {
currentRoute = currentHash === '#kn-musor' ? 'musor' : 'home';
} else if (currentPath === '/eloadasok' || currentPath.startsWith('/eloadasok/')) {
currentRoute = 'musor';
} else if (currentPath === '/berles' || currentPath.startsWith('/berles/')) {
currentRoute = 'berles';
} else if (currentPath === '/tarsulat' || currentPath.startsWith('/tarsulat/')) {
currentRoute = 'tarsulat';
} else if (currentPath === '/kapcsolat' || currentPath.startsWith('/kapcsolat/')) {
currentRoute = 'kapcsolat';
}
header.querySelectorAll('[data-kh-route]').forEach((link) => {
const isCurrent = link.dataset.khRoute === currentRoute;
link.classList.toggle('is-current', isCurrent);
if (isCurrent) {
link.setAttribute('aria-current', 'page');
} else {
link.removeAttribute('aria-current');
}
});
const homeLogo = header.querySelector('.kh-logo');
const logoIsCurrent = currentRoute === 'home';
homeLogo?.classList.toggle('is-current', logoIsCurrent);
if (logoIsCurrent) {
homeLogo?.setAttribute('aria-current', 'page');
} else {
homeLogo?.removeAttribute('aria-current');
}
};
updateCurrentRoute();
window.addEventListener('hashchange', updateCurrentRoute);
if (!trigger || !overlay || !close) return;
let lastScrollY = Math.max(0, window.scrollY);
let scrollTicking = false;
let menuOpen = false;
const updateHeader = () => {
scrollTicking = false;
const currentY = Math.max(0, window.scrollY);
const delta = currentY - lastScrollY;
const compact = currentY > 36;
header.classList.toggle('is-compact', compact);
if (!menuOpen && currentY > 140 && delta > 7) {
header.classList.add('is-hidden');
} else if (
menuOpen ||
delta < -4 ||
currentY <= 140
) {
header.classList.remove('is-hidden');
}
lastScrollY = currentY;
};
const requestHeaderUpdate = () => {
if (scrollTicking) return;
scrollTicking = true;
window.requestAnimationFrame(updateHeader);
};
const closeOtherMenus = () => {
document
.querySelectorAll('.kh-overlay.is-open')
.forEach((panel) => {
if (panel === overlay) return;
panel.classList.remove('is-open');
panel.setAttribute('aria-hidden', 'true');
const otherHeader = panel.closest('.kh-header');
const otherTrigger = otherHeader?.querySelector('.kh-trigger');
otherHeader?.classList.remove('is-menu-open');
otherTrigger?.setAttribute('aria-expanded', 'false');
});
};
const setOpen = (open, returnFocus = false) => {
menuOpen = open;
if (open) {
closeOtherMenus();
}
overlay.classList.toggle('is-open', open);
overlay.setAttribute('aria-hidden', String(!open));
trigger.setAttribute('aria-expanded', String(open));
document.body.classList.toggle('kh-menu-open', open);
header.classList.toggle('is-menu-open', open);
header.classList.remove('is-hidden');
if (open) {
window.setTimeout(() => close.focus(), 80);
}
if (!open && returnFocus) {
trigger.focus();
}
};
trigger.addEventListener('click', () => {
setOpen(!overlay.classList.contains('is-open'));
});
close.addEventListener('click', () => {
setOpen(false, true);
});
links.forEach((link) => {
link.addEventListener('click', () => {
setOpen(false);
});
});
overlay.addEventListener('keydown', (event) => {
if (event.key === 'Escape') {
setOpen(false, true);
return;
}
if (event.key !== 'Tab') return;
const focusable = Array.from(
overlay.querySelectorAll(
'a[href], button:not([disabled])'
)
);
if (!focusable.length) return;
const first = focusable[0];
const last = focusable[focusable.length - 1];
if (
event.shiftKey &&
document.activeElement === first
) {
event.preventDefault();
last.focus();
} else if (
!event.shiftKey &&
document.activeElement === last
) {
event.preventDefault();
first.focus();
}
});
window.addEventListener(
'scroll',
requestHeaderUpdate,
{ passive: true }
);
window.addEventListener(
'resize',
requestHeaderUpdate,
{ passive: true }
);
updateHeader();
});
})();
</script>
]]>
