/* ========================================================================= KeepSeal Neo — Header Pro. Full-width, always-sticky, mega menu. Styles: solid | glass | gradient | bordered | float | dark. Light & dark. The header element is transparent; the .ksnh__bar paints the background, so it can be re-parented to and pinned without losing its look. ========================================================================= */ .ksnh-root { font-family: var(--ksn-font); } .ksnh { --ksnh-h: 76px; --ksnh-max: 1280px; --ksnh-logo-h: 42px; --ksnh-bg: var(--ksn-surface); --ksnh-text: var(--ksn-ink); --ksnh-hover: var(--ksn-primary); --ksnh-icon: var(--ksn-ink); --ksnh-top-bg: var(--ksn-ink); --ksnh-top-text: #fff; --ksnh-line: var(--ksn-line); --ksnh-shadow: 0 10px 34px -18px rgba(13, 27, 52, .4); font-family: var(--ksn-font); color: var(--ksnh-text); width: 100%; position: relative; /* own stacking context so submenus overlay the page */ z-index: 1000; } /* (Sticky is handled by Elementor's container Motion-Effects — no pinning here.) */ /* a hidden (off-screen) drawer must never create a horizontal scrollbar */ body { overflow-x: hidden; } /* ---- top bar ---- */ .ksnh__top { background: var(--ksnh-top-bg); color: var(--ksnh-top-text); font-size: 0.82rem; overflow: hidden; max-height: 60px; transition: max-height .3s ease, opacity .3s ease, padding .3s ease; } .ksnh__top .ksnh__in { display: flex; align-items: center; justify-content: space-between; padding-block: 8px; min-height: 0; } .ksnh__top-phone { display: inline-flex; align-items: center; gap: 7px; color: inherit; text-decoration: none; font-weight: 700; } .ksnh__top-phone svg { width: 15px; height: 15px; } /* ---- container ---- */ .ksnh__in { width: 100%; margin: 0 auto; padding-inline: 24px; box-sizing: border-box; } .ksnh--w-boxed .ksnh__in { max-width: var(--ksnh-max); } /* ---- main bar ---- */ .ksnh__bar { background: var(--ksnh-bg); transition: height .25s ease, background .25s ease, box-shadow .25s ease; } .ksnh__bar .ksnh__in { position: relative; display: flex; align-items: center; justify-content: space-between; gap: 18px; height: var(--ksnh-h); } .ksnh__left { display: flex; align-items: center; gap: 12px; } /* ---- logo (force size so theme/Elementor img rules can't blow it up) ---- */ .ksnh__logo { display: inline-flex; align-items: center; text-decoration: none; color: var(--ksnh-text); } .ksnh__logo img { height: var(--ksnh-logo-h) !important; width: auto !important; max-width: 220px; display: block; } .ksnh__logo--text { font-weight: 900; font-size: 1.3rem; letter-spacing: -.5px; } /* ---- desktop nav ---- */ .ksnh__nav { flex: 1; display: flex; justify-content: center; } .ksnh__nav .ksn-nav__list { display: flex; align-items: center; gap: 4px; margin: 0; padding: 0; list-style: none; } .ksnh__nav .ksn-nav__item { position: static; } .ksnh__nav .ksn-nav__link { display: inline-flex; align-items: center; gap: 5px; padding: 10px 14px; border-radius: 10px; color: var(--ksnh-text); text-decoration: none; font-weight: 700; font-size: 0.96rem; transition: color .18s ease, background .18s ease; } .ksnh__nav .ksn-nav__link:hover { color: var(--ksnh-hover); } .ksnh__nav .ksn-nav__chev { transition: transform .2s ease; opacity: .8; } .ksnh__nav .ksn-nav__item.has-mega:hover .ksn-nav__chev { transform: rotate(180deg); } /* ---- mega panel (full width of the header content) ---- */ .ksnh__nav .ksn-mega { position: absolute; top: calc(100% + 12px); inset-inline: 0; z-index: 9999; background: var(--ksn-surface); border: 1px solid var(--ksn-line); border-radius: 18px; box-shadow: 0 26px 60px -28px rgba(13,27,52,.55), var(--ksnh-shadow); opacity: 0; visibility: hidden; pointer-events: none; transition: opacity .25s ease, transform .32s cubic-bezier(.16,1,.3,1), clip-path .38s cubic-bezier(.16,1,.3,1), visibility .32s; } /* a small bridge keeps the panel open while the cursor travels from link to panel */ .ksnh__nav .ksn-nav__item.has-mega::after { content: ""; position: absolute; inset-inline: 0; top: 100%; height: 14px; } /* gradient accent line that draws in on open */ .ksnh__nav .ksn-mega::before { content: ""; position: absolute; top: 0; inset-inline: 26px; height: 3px; border-radius: 0 0 3px 3px; background: linear-gradient(90deg, var(--ksn-heat), var(--ksn-accent)); transform: scaleX(0); transform-origin: center; transition: transform .4s ease .05s; } .ksnh__nav .ksn-nav__item.has-mega:hover .ksn-mega { opacity: 1; visibility: visible; pointer-events: auto; } .ksnh__nav .ksn-nav__item.has-mega:hover .ksn-mega::before { transform: scaleX(1); } /* --- submenu open styles --- */ /* slide (default): drops down from above */ .ksnh--mega-slide .ksn-mega { transform: translateY(-14px); } .ksnh--mega-slide .has-mega:hover .ksn-mega { transform: translateY(0); } /* fade: pure cross-fade */ .ksnh--mega-fade .ksn-mega { transform: none; } /* scale: grows from the top */ .ksnh--mega-scale .ksn-mega { transform: scale(.95); transform-origin: top center; } .ksnh--mega-scale .has-mega:hover .ksn-mega { transform: scale(1); } /* curtain: clip-reveal from the top edge downward */ .ksnh--mega-curtain .ksn-mega { opacity: 1; clip-path: inset(0 0 100% 0 round 18px); } .ksnh--mega-curtain .has-mega:hover .ksn-mega { clip-path: inset(0 0 0 0 round 18px); } /* flip: 3D tilt down from the top */ .ksnh--mega-flip .ksn-mega { transform: perspective(1400px) rotateX(-14deg); transform-origin: top center; } .ksnh--mega-flip .has-mega:hover .ksn-mega { transform: perspective(1400px) rotateX(0); } .ksnh__nav .ksn-mega__inner { display: grid; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); gap: 22px; padding: 26px 28px; } .ksnh__nav .ksn-mega__col { min-width: 0; } .ksnh__nav .ksn-mega__title { display: block; font-weight: 800; color: var(--ksn-ink); margin-bottom: 12px; text-decoration: none; font-size: 0.95rem; } .ksnh__nav .ksn-mega__links { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; } .ksnh__nav .ksn-mega__links a { color: var(--ksn-muted); text-decoration: none; font-size: 0.9rem; transition: color .15s ease, padding .15s ease; } .ksnh__nav .ksn-mega__links a:hover { color: var(--ksnh-hover); padding-inline-start: 5px; } /* ---- tools ---- (never outlined, icon colour never changes; styles differ by optional fill shape + hover motion only) */ .ksnh__tools { display: flex; align-items: center; gap: 6px; } .ksnh__tool { position: relative; display: inline-flex; align-items: center; justify-content: center; width: 44px; height: 44px; border: none !important; background: transparent; cursor: pointer; border-radius: 12px; color: var(--ksnh-icon); text-decoration: none; outline: none; transition: transform .2s cubic-bezier(.16,1,.3,1), background .2s ease, box-shadow .2s ease; } .ksnh__tool svg { width: 22px; height: 22px; } .ksnh__tool:focus { outline: none; box-shadow: none; } .ksnh__tool:focus-visible { outline: 2px solid var(--ksnh-hover); outline-offset: 3px; } .ksnh__cart .ksn-cart__count { position: absolute; top: 4px; inset-inline-start: 4px; min-width: 18px; height: 18px; padding: 0 4px; display: inline-flex; align-items: center; justify-content: center; background: var(--ksn-heat); color: #fff; font-size: 0.68rem; font-weight: 800; border-radius: 999px; } /* tool style 1 — minimal: plain icon, springs up on hover */ .ksnh--tools-minimal .ksnh__tool { background: transparent !important; } .ksnh--tools-minimal .ksnh__tool:hover { transform: translateY(-3px) scale(1.1); } /* tool style 2 — soft: rounded tinted pad */ .ksnh--tools-soft .ksnh__tool { background: color-mix(in srgb, var(--ksnh-icon) 8%, transparent) !important; } .ksnh--tools-soft .ksnh__tool:hover { background: color-mix(in srgb, var(--ksnh-icon) 16%, transparent) !important; transform: translateY(-2px); } /* tool style 3 — circle: filled circle, pops on hover */ .ksnh--tools-circle .ksnh__tool { background: color-mix(in srgb, var(--ksnh-icon) 9%, transparent) !important; border-radius: 50%; } .ksnh--tools-circle .ksnh__tool:hover { transform: scale(1.12); box-shadow: 0 8px 18px -8px color-mix(in srgb, var(--ksnh-icon) 40%, transparent); } /* tool style 4 — group: one shared pill behind all tools */ .ksnh--tools-group .ksnh__tool { background: transparent !important; } .ksnh--tools-group .ksnh__tools { background: color-mix(in srgb, var(--ksnh-icon) 8%, transparent); border-radius: 999px; padding: 4px; gap: 2px; } .ksnh--tools-group .ksnh__tool { width: 40px; height: 40px; } .ksnh--tools-group .ksnh__tool:hover { transform: scale(1.12); } /* tool style 5 — stack: bigger, airy spacing, lifts on hover */ .ksnh--tools-stack .ksnh__tool { background: transparent !important; } .ksnh--tools-stack .ksnh__tools { gap: 16px; } .ksnh--tools-stack .ksnh__tool { width: 30px; height: 30px; } .ksnh--tools-stack .ksnh__tool svg { width: 25px; height: 25px; } .ksnh--tools-stack .ksnh__tool:hover { transform: translateY(-4px); } /* ---- burger (mobile only) ---- */ .ksnh__burger { display: none; width: 44px; height: 44px; align-items: center; justify-content: center; border: none; background: transparent; color: var(--ksnh-icon); cursor: pointer; border-radius: 12px; } .ksnh__burger svg { width: 24px; height: 24px; } /* ---- theme (dark/light) toggle ---- */ .ksnh__theme .ksnh__moon, .ksnh__theme .ksnh__sun { display: inline-flex; align-items: center; } .ksnh__theme .ksnh__sun { display: none; } html.ksn-dark .ksnh__theme .ksnh__moon { display: none; } html.ksn-dark .ksnh__theme .ksnh__sun { display: inline-flex; } /* =========================== STYLES =================================== */ /* solid */ .ksnh--solid .ksnh__bar { box-shadow: 0 1px 0 var(--ksnh-line); } /* glass (required) */ .ksnh--glass .ksnh__bar { background: color-mix(in srgb, var(--ksnh-bg) 70%, transparent); -webkit-backdrop-filter: blur(16px) saturate(1.3); backdrop-filter: blur(16px) saturate(1.3); border-bottom: 1px solid color-mix(in srgb, var(--ksnh-text) 10%, transparent); } /* gradient */ .ksnh--gradient { --ksnh-text: #fff; --ksnh-icon: #fff; --ksnh-hover: #fff; } .ksnh--gradient .ksnh__bar { background: linear-gradient(120deg, var(--ksn-primary), var(--ksn-accent)); } .ksnh--gradient .ksnh__nav .ksn-nav__link:hover { background: rgba(255,255,255,.16); } /* bordered / minimal */ .ksnh--bordered .ksnh__bar { background: transparent; border-bottom: 1px solid var(--ksnh-line); } /* float (detached card) */ .ksnh--float { padding-block: 12px; } .ksnh--float .ksnh__bar { background: transparent; } .ksnh--float .ksnh__bar .ksnh__in { background: var(--ksnh-bg); border: 1px solid var(--ksnh-line); border-radius: 18px; padding-inline: 22px; box-shadow: var(--ksnh-shadow); max-width: var(--ksnh-max); } .ksnh--float.ksnh--w-full .ksnh__bar .ksnh__in { max-width: calc(100% - 32px); } /* dark (always-dark bar) */ .ksnh--dark { --ksnh-bg: #0e1626; --ksnh-text: #eaf1fb; --ksnh-icon: #eaf1fb; --ksnh-hover: var(--ksn-accent); --ksnh-line: rgba(255,255,255,.1); } .ksnh--dark .ksnh__nav .ksn-nav__link:hover { background: rgba(255,255,255,.07); } /* =========================== DRAWER ================================== */ .ksnh-scrim { position: fixed; inset: 0; z-index: 99994; background: rgba(8,12,20,.55); opacity: 0; transition: opacity .26s ease; } .ksnh-scrim.is-open { opacity: 1; } .ksnh-drawer { position: fixed; top: 0; right: 0; left: auto; z-index: 99996; width: min(86vw, 340px); height: 100%; background: var(--ksn-surface); color: var(--ksn-ink); display: flex; flex-direction: column; transform: translateX(100%); visibility: hidden; transition: transform .3s cubic-bezier(.16,1,.3,1), visibility .3s; box-shadow: -20px 0 50px -20px rgba(0,0,0,.4); } .ksnh-drawer.is-open { transform: translateX(0); visibility: visible; } .ksnh-drawer__head { display: flex; align-items: center; justify-content: space-between; padding: 16px 18px; border-bottom: 1px solid var(--ksn-line); } .ksnh-drawer__head .ksnh__logo img { height: 36px; } .ksnh-drawer__close { width: 40px; height: 40px; display: inline-flex; align-items: center; justify-content: center; border: none; background: var(--ksn-surface-2); color: var(--ksn-ink); border-radius: 10px; cursor: pointer; } .ksnh-drawer__close svg { width: 20px; height: 20px; } .ksnh-drawer__body { flex: 1; overflow-y: auto; padding: 12px 14px; } .ksnh-drawer .ksn-mnav { list-style: none; margin: 0; padding: 0; } .ksnh-drawer .ksn-mnav__row { display: flex; align-items: center; justify-content: space-between; } .ksnh-drawer .ksn-mnav__link { flex: 1; display: block; padding: 13px 8px; color: var(--ksn-ink); text-decoration: none; font-weight: 700; font-size: 0.96rem; border-bottom: 1px solid var(--ksn-line); } .ksnh-drawer .ksn-mnav__toggle { width: 40px; height: 40px; border: none; background: transparent; color: var(--ksn-muted); cursor: pointer; } .ksnh-drawer .ksn-mnav__toggle svg { transition: transform .2s ease; } .ksnh-drawer .ksn-mnav__toggle[aria-expanded="true"] svg { transform: rotate(180deg); } .ksnh-drawer .ksn-mnav__sub { list-style: none; margin: 0; padding: 0; max-height: 0; overflow: hidden; transition: max-height .3s ease; } .ksnh-drawer .ksn-mnav__sub.is-open { max-height: 700px; } .ksnh-drawer .ksn-mnav__sub a { display: block; padding: 10px 18px; color: var(--ksn-muted); text-decoration: none; font-size: 0.9rem; } .ksnh-drawer .ksn-mnav__sub a:hover { color: var(--ksn-primary); } .ksnh-drawer .ksn-mnav__sub .is-deep a { padding-inline-start: 32px; opacity: .85; } /* =========================== SEARCH ================================== */ .ksnh-search { position: fixed; top: 0; inset-inline: 0; z-index: 99995; background: var(--ksn-surface); border-bottom: 1px solid var(--ksn-line); box-shadow: var(--ksnh-shadow); transform: translateY(-100%); transition: transform .28s cubic-bezier(.16,1,.3,1); } .ksnh-search.is-open { transform: translateY(0); } .ksnh-search__form { display: flex; align-items: center; gap: 12px; max-width: 760px; margin: 0 auto; padding: 18px 24px; } .ksnh-search__form > svg { width: 22px; height: 22px; color: var(--ksn-muted); flex: none; } .ksnh-search__form input[type="search"] { flex: 1; height: 50px; border: none; background: transparent; color: var(--ksn-ink); font-family: var(--ksn-font); font-size: 1.1rem; outline: none; } .ksnh-search__close { width: 42px; height: 42px; border: none; background: var(--ksn-surface-2); color: var(--ksn-ink); border-radius: 11px; cursor: pointer; flex: none; display: inline-flex; align-items: center; justify-content: center; } .ksnh-search__close svg { width: 20px; height: 20px; } /* =========================== RESPONSIVE ============================== */ @media (max-width: 1024px) { .ksnh__nav { display: none; } .ksnh__burger { display: inline-flex; } .ksnh__in { padding-inline: 16px; } } @media (min-width: 1025px) { .ksnh__burger { display: none !important; } } /* =========================== DARK MODE =============================== */ /* token-driven styles auto-adapt; nudge glass/border lines for dark islands */ .ksn-dark .ksnh--glass .ksnh__bar, html.ksn-dark .ksnh--glass .ksnh__bar { border-bottom-color: rgba(255,255,255,.08); } /* in dark mode the top bar background flips to a light token, so its text must be black for contrast */ html.ksn-dark .ksnh__top, body.ksn-dark .ksnh__top, .ksnh.ksn-dark .ksnh__top { color: #000000 !important; }