/* CM Klara navigation v6 — mobile header order, desktop overlay isolation, faster search motion. */ /* * The mobile panel/backdrop are portaled directly to by navigation-v3.js. * Therefore they no longer inherit .cmk-nav-mobile { display:none } on desktop. * Keep them explicitly hidden above the mobile breakpoint. */ @media (min-width: 1025px) { body > .cmk-nav-mobile__panel, body > .cmk-nav-mobile__backdrop { display: none !important; } } @media (max-width: 1024px) { /* * Preserve the familiar Klara mobile convention: * search on the left, centered logo, menu on the right. */ .cmk-nav-mobile__search-toggle { grid-column: 1 !important; grid-row: 1 !important; justify-self: start !important; } .cmk-nav-mobile__header-brand { grid-column: 2 !important; grid-row: 1 !important; justify-self: center !important; } .cmk-nav-mobile__toggle { grid-column: 3 !important; grid-row: 1 !important; justify-self: end !important; } /* Faster, still smooth search interaction — intentionally snappier than v5. */ body > .cmk-nav-mobile__panel .cmk-nav-mobile__search-form { transition: width .16s cubic-bezier(.22,.61,.36,1), background-color .12s ease, border-radius .14s ease, border-color .12s ease, box-shadow .12s ease !important; } body > .cmk-nav-mobile__panel .cmk-nav-mobile__search-label { transition: opacity .09s ease, transform .12s ease, width .12s ease !important; } body > .cmk-nav-mobile__panel .cmk-nav-mobile__search-form button[type="submit"] { transition: border-radius .15s ease, width .15s ease, height .15s ease, box-shadow .11s ease !important; } body > .cmk-nav-mobile__panel .cmk-nav-mobile__search-icon, body > .cmk-nav-mobile__panel .cmk-nav-mobile__search-form input[type="search"] { transition-duration: .11s !important; } } @media (prefers-reduced-motion: reduce) { body > .cmk-nav-mobile__panel .cmk-nav-mobile__search-form, body > .cmk-nav-mobile__panel .cmk-nav-mobile__search-label, body > .cmk-nav-mobile__panel .cmk-nav-mobile__search-form button[type="submit"], body > .cmk-nav-mobile__panel .cmk-nav-mobile__search-icon, body > .cmk-nav-mobile__panel .cmk-nav-mobile__search-form input[type="search"] { transition-duration: .01ms !important; } }