/* CM Klara navigation v18 — mobile visibility fallback for hidden VC/header wrappers. * The approved mobile component is not redesigned. This layer only makes the * existing mobile header visible when its original Visual Composer ancestor is * hidden on <=1024px layouts. */ @media (max-width: 1024px) { /* * The mobile header is moved directly under when the original * Visual Composer wrapper hides it. Keep the exact approved component, but * explicitly constrain it to the viewport so there is no transient * horizontal overflow while the portal is being initialised. */ .cmk-nav-mobile, body > .cmk-nav-mobile.cmk-nav-mobile--body-portal { width: 100% !important; max-width: 100vw !important; min-width: 0 !important; box-sizing: border-box !important; overflow-x: clip !important; } .cmk-nav-mobile__header-brand, .cmk-nav-mobile__brand { min-width: 0 !important; max-width: 100% !important; } .cmk-nav-mobile__brand-image { max-width: 100% !important; } body > .cmk-nav-mobile.cmk-nav-mobile--body-portal { position: fixed !important; top: 0 !important; left: 0 !important; right: 0 !important; width: 100% !important; max-width: none !important; z-index: 2147483000 !important; display: grid !important; visibility: visible !important; opacity: 1 !important; transform: none !important; margin: 0 !important; } /* * v2/v6 center the brand in the middle grid track. The generic width:100% * inherited by links plus the v18 max-width reset allowed the brand anchor to * fill that whole track, while its flex content remained left-aligned. Keep * the approved 180/170px cap so the visible Klara logo is actually centered * between the equally sized search and menu controls. */ body > .cmk-nav-mobile.cmk-nav-mobile--body-portal > .cmk-nav-mobile__header-brand { width: auto !important; min-width: 0 !important; max-width: min(180px, calc(100vw - 130px)) !important; grid-column: 2 !important; grid-row: 1 !important; justify-self: center !important; } body > .cmk-nav-mobile.cmk-nav-mobile--body-portal > .cmk-nav-mobile__header-brand .cmk-nav-mobile__brand-image { width: auto !important; max-width: 170px !important; } body.admin-bar > .cmk-nav-mobile.cmk-nav-mobile--body-portal { top: 46px !important; } /* * After the mobile header is portalled to it is no longer a child of * .cmk-nav. The base `.cmk-nav svg` rule therefore no longer reaches its * icons. Re-apply the exact same SVG drawing rules to the portalled mobile * component. Without this, the search circle falls back to a solid black * browser SVG fill. */ body > .cmk-nav-mobile.cmk-nav-mobile--body-portal svg, .cmk-nav-mobile__search-toggle svg, .cmk-nav-mobile__search-form svg, .cmk-nav-mobile__row-icon svg, .cmk-nav-mobile__registration-icon svg, .cmk-nav-mobile__contacts svg { width: 100% !important; height: 100% !important; fill: none !important; stroke: currentColor !important; stroke-width: 1.75 !important; stroke-linecap: round !important; stroke-linejoin: round !important; } /* The portal is fixed and therefore removed from normal flow. Reserve only * the exact approved mobile-header height so page content is not covered. */ body.cmk-nav-mobile-portal-active { padding-top: 68px !important; } body.admin-bar.cmk-nav-mobile-portal-active { padding-top: 68px !important; } } @media (min-width: 1025px) { body > .cmk-nav-mobile.cmk-nav-mobile--body-portal { display: none !important; } } /* * CM Klara Północ — wyłącznie warstwa kolorystyczna. * Wariant korzysta z tego samego renderera i dokładnie tego samego runtime JS. * Klasy są przypisywane także do elementów mobile portalowanych do , * dlatego motyw nie wymaga globalnego stanu ani dodatkowego skryptu. */ .cmk-nav--north, .cmk-nav-mobile--north, .cmk-nav-mobile__panel--north { --cmk-nav-red: #0758b8; --cmk-nav-red-strong: #063e84; --cmk-nav-soft-red: #f4f8fd; } @media (min-width: 1025px) { .cmk-nav--north .cmk-nav__facility-fallback-mark { border-color: #0758b8 !important; color: #0758b8 !important; } body > .cmk-nav.cmk-nav--north.cmk-nav--desktop-portal .cmk-nav__root-item.is-search.is-search-open .cmk-nav__search-form:focus-within { border-color: #0758b8 !important; box-shadow: 0 0 0 3px rgba(7, 88, 184, .09), 0 7px 18px rgba(24, 28, 35, .09) !important; } body > .cmk-nav.cmk-nav--north.cmk-nav--desktop-portal .cmk-nav__search-form .cmk-nav__search-icon { color: #0758b8 !important; } body > .cmk-nav.cmk-nav--north.cmk-nav--desktop-portal .cmk-nav__search-form .cmk-nav__search-submit { background: #0758b8 !important; box-shadow: 0 3px 8px rgba(7, 88, 184, .20) !important; } body > .cmk-nav.cmk-nav--north.cmk-nav--desktop-portal .cmk-nav__search-form .cmk-nav__search-submit:hover, body > .cmk-nav.cmk-nav--north.cmk-nav--desktop-portal .cmk-nav__search-form .cmk-nav__search-submit:focus-visible { background: #063e84 !important; box-shadow: 0 5px 12px rgba(6, 62, 132, .25) !important; } } @media (max-width: 1024px) { .cmk-nav-mobile--north .cmk-nav-mobile__brand-mark { border-color: #0758b8 !important; color: #0758b8 !important; } .cmk-nav-mobile--north .cmk-nav-mobile__toggle:hover, .cmk-nav-mobile--north .cmk-nav-mobile__search-toggle:hover, .cmk-nav-mobile--north .cmk-nav-mobile__toggle:active, .cmk-nav-mobile--north .cmk-nav-mobile__search-toggle:active, .cmk-nav-mobile--north .cmk-nav-mobile__toggle:focus-visible, .cmk-nav-mobile--north .cmk-nav-mobile__search-toggle:focus-visible { color: #0758b8 !important; } body > .cmk-nav-mobile__panel.cmk-nav-mobile__panel--north .cmk-nav-mobile__search-form.is-expanded, body > .cmk-nav-mobile__panel.cmk-nav-mobile__panel--north .cmk-nav-mobile__search-form:focus-within { border-color: rgba(7, 88, 184, .30) !important; box-shadow: 0 0 0 3px rgba(7, 88, 184, .07) !important; } body > .cmk-nav-mobile__panel.cmk-nav-mobile__panel--north .cmk-nav-mobile__search-form button[type="submit"], body > .cmk-nav-mobile__panel.cmk-nav-mobile__panel--north .cmk-nav-mobile__search-form button[type="button"] { background: #0758b8 !important; } body > .cmk-nav-mobile__panel.cmk-nav-mobile__panel--north li.is-current > a, body > .cmk-nav-mobile__panel.cmk-nav-mobile__panel--north li.is-current > .cmk-nav-mobile__forward, body > .cmk-nav-mobile__panel.cmk-nav-mobile__panel--north a[aria-current="page"] { color: #0758b8 !important; background: #fff !important; } body > .cmk-nav-mobile__panel.cmk-nav-mobile__panel--north li.is-current > a .cmk-nav-mobile__row-icon, body > .cmk-nav-mobile__panel.cmk-nav-mobile__panel--north li.is-current > .cmk-nav-mobile__forward .cmk-nav-mobile__row-icon, body > .cmk-nav-mobile__panel.cmk-nav-mobile__panel--north a[aria-current="page"] .cmk-nav-mobile__row-icon { color: #0758b8 !important; } body > .cmk-nav-mobile__panel.cmk-nav-mobile__panel--north .cmk-nav-mobile__forward.is-expanded, body > .cmk-nav-mobile__panel.cmk-nav-mobile__panel--north a:hover, body > .cmk-nav-mobile__panel.cmk-nav-mobile__panel--north a:focus-visible, body > .cmk-nav-mobile__panel.cmk-nav-mobile__panel--north .cmk-nav-mobile__forward:hover, body > .cmk-nav-mobile__panel.cmk-nav-mobile__panel--north .cmk-nav-mobile__forward:focus-visible { color: #0758b8 !important; background: #f4f8fd !important; } body > .cmk-nav-mobile__panel.cmk-nav-mobile__panel--north .cmk-nav-mobile__forward.is-expanded { border-left-color: #0758b8 !important; } body > .cmk-nav-mobile__panel.cmk-nav-mobile__panel--north .cmk-nav-mobile__forward.is-expanded .cmk-nav-mobile__row-icon { color: #0758b8 !important; } body > .cmk-nav-mobile__panel.cmk-nav-mobile__panel--north .cmk-nav-mobile__back-proxy { color: #0758b8 !important; } body > .cmk-nav-mobile__panel.cmk-nav-mobile__panel--north .cmk-nav-mobile__back-proxy:hover, body > .cmk-nav-mobile__panel.cmk-nav-mobile__panel--north .cmk-nav-mobile__back-proxy:focus-visible { color: #063e84 !important; outline-color: rgba(7, 88, 184, .14) !important; } body > .cmk-nav-mobile__panel.cmk-nav-mobile__panel--north .cmk-nav-mobile__registration { background: #0758b8 !important; color: #fff !important; } body > .cmk-nav-mobile__panel.cmk-nav-mobile__panel--north .cmk-nav-mobile__registration:hover, body > .cmk-nav-mobile__panel.cmk-nav-mobile__panel--north .cmk-nav-mobile__registration:focus-visible { background: #063e84 !important; color: #fff !important; } }