<nav class="supt-navigation " role="navigation" aria-label="Main navigation">
<div class="supt-navigation__inner">
<a href="/" class="supt-navigation__logo" aria-label="Verisure logo">
<svg width="112" height="48" viewbox="0 0 112 48" fill="#ED002F" xmlns="http://www.w3.org/2000/svg" aria-hidden="true">
<path d="M78.9137 41.0363C78.9137 43.7241 77.315 44.2895 75.9751 44.2895C74.6352 44.2895 73.0317 43.7241 73.0317 41.0363V33.3146H69.0193V41.5103C69.0193 45.483 71.6821 47.9711 75.98 48C80.2681 47.9711 82.931 45.483 82.931 41.5103V33.3146H78.9161V41.0363H78.9137Z" />
<path d="M95.1303 33.1077L94.7555 33.0259C94.2693 32.92 93.4204 32.9104 93.3188 32.908C88.0028 32.908 85.4197 35.2805 85.4197 40.158V47.5404H89.4007V42.7736C89.4007 42.5522 89.4007 42.3309 89.3983 42.1143C89.3741 38.695 89.5216 36.7556 92.8037 36.6569C93.1132 36.6473 94.0178 36.6593 94.4991 36.8253L95.1328 37.0419V33.1101L95.1303 33.1077Z" />
<path d="M42.7268 32.908C37.4107 32.908 34.8277 35.2805 34.8277 40.158V47.5404H38.8087V42.7736C38.8087 42.5522 38.8087 42.3309 38.8062 42.1143C38.7821 38.695 38.9296 36.7556 42.2116 36.6569C42.5212 36.6473 43.4257 36.6617 43.9046 36.8253L44.5383 37.0419V33.1101L44.1634 33.0283C43.6797 32.9224 42.8284 32.9128 42.7292 32.9104L42.7268 32.908Z" />
<path d="M51.0564 33.1245H47.0657V47.538H51.0564V33.1245Z" />
<path d="M15.9869 33.1245H11.8825L11.8342 33.5456C11.8293 33.5938 11.2706 38.1368 7.99102 42.4416C4.72109 38.1464 4.15514 33.5938 4.1503 33.5456L4.10193 33.1245H0L0.0386974 33.6347C0.0653019 33.9739 0.740088 41.9844 7.68628 47.6992L7.99102 47.9495L8.29576 47.6992C15.2468 41.9844 15.924 33.9715 15.9506 33.6347L15.9893 33.1245H15.9869Z" />
<path d="M62.0053 38.6782L59.6255 38.2956C58.5613 38.1368 58.0316 37.6531 58.0558 37.2585C58.0896 36.7556 58.9918 36.2719 60.2833 36.3513H60.3244C61.4346 36.4307 62.3294 36.6545 62.9849 37.0178L63.2678 37.1743L66.2451 34.7536L65.7396 34.3926C64.5279 33.5288 62.9051 33.0523 60.6243 32.8983L60.5494 32.8935C57.3713 32.6986 54.0361 34.1207 53.816 37.2128C53.6927 38.9356 54.4134 41.1277 58.5395 41.7822L60.9121 42.1624C61.9546 42.3285 62.6003 42.7688 62.5616 43.2861C62.5036 44.1163 60.8227 44.3256 59.7682 44.2679L59.7053 44.2607C58.3871 44.1716 57.352 43.8468 56.5393 43.2693L56.2418 43.0576L53.1606 45.5769L53.6056 45.9451C55.2309 47.2853 57.0956 47.6655 59.4029 47.8292L59.5069 47.834C59.7657 47.8508 60.0245 47.858 60.2785 47.858C61.7538 47.858 63.1276 47.5933 64.2038 47.0904C65.8219 46.3373 66.7385 45.0788 66.8546 43.4522C67.0263 40.9785 65.2124 39.1955 62.0029 38.6806L62.0053 38.6782Z" />
<path d="M108.123 42.3381L108.063 42.4849C107.642 43.4883 106.128 44.2174 104.459 44.2222C101.931 44.1163 101.191 42.4319 100.937 41.4333H112.002V41.0531C112.002 35.7257 109.209 32.6409 104.336 32.5879H104.328C99.046 32.5879 96.6807 36.3946 96.6807 40.1676C96.6807 44.7467 99.8418 47.8243 104.543 47.8243C108.57 47.8243 110.455 45.5408 111.139 44.4195L108.123 42.3405V42.3381ZM104.447 35.8051C106.21 35.8051 107.465 36.8326 107.736 38.5001H101.119C101.353 37.0227 102.865 35.8051 104.447 35.8051Z" />
<path d="M28.7812 42.3381L28.7207 42.4849C28.2999 43.4883 26.7859 44.2174 25.117 44.2222C22.5896 44.1163 21.8495 42.4319 21.5956 41.4333H32.6606V41.0531C32.6606 35.7257 29.8671 32.6409 24.9937 32.5879H24.9864C19.7042 32.5879 17.3389 36.3946 17.3389 40.1676C17.3389 44.7467 20.5 47.8243 25.2017 47.8243C29.2286 47.8243 31.1127 45.5408 31.7972 44.4195L28.7812 42.3405V42.3381ZM25.1049 35.8051C26.8681 35.8051 28.1233 36.8326 28.3942 38.5001H21.777C22.0116 37.0227 23.5232 35.8051 25.1049 35.8051Z" />
<path d="M69.3893 10.8209C69.3748 10.3758 69.2974 9.93303 69.1571 9.50953C69.0193 9.08602 68.8209 8.68177 68.5694 8.31362C68.3348 7.96711 68.0518 7.6543 67.735 7.37999C67.0239 6.7688 66.354 6.56186 65.4664 6.38861C65.0552 6.3092 64.644 6.23942 64.2377 6.13114C63.829 6.02286 63.4444 5.87608 63.0695 5.68358C62.789 5.5392 62.5181 5.37317 62.2617 5.18789C62.0054 5.00261 61.7635 4.79808 61.5386 4.5767C61.2362 4.28073 60.9775 3.9631 60.7477 3.60938C60.5203 3.25807 60.3269 2.88991 60.1237 2.52657C59.6835 1.73972 59.2796 1.16944 58.4742 0.685783C58.1138 0.46922 57.7269 0.300782 57.3254 0.185282C56.8949 0.0625627 56.4474 0 56 0C55.5526 0 55.1051 0.0625627 54.6746 0.185282C54.2707 0.300782 53.8837 0.46922 53.5258 0.685783C52.7228 1.16944 52.3165 1.73972 51.8787 2.52657C51.6756 2.88991 51.4821 3.26048 51.2547 3.60938C51.025 3.9607 50.7662 4.28073 50.4639 4.5767C50.2389 4.79808 49.9971 5.00261 49.7407 5.18789C49.4843 5.37317 49.2159 5.5392 48.9329 5.68358C48.558 5.87848 48.171 6.02286 47.7647 6.13114C47.3584 6.23942 46.9472 6.3068 46.5361 6.38861C45.6484 6.56186 44.9785 6.7688 44.2674 7.37999C43.9506 7.6543 43.6676 7.96711 43.433 8.31362C43.1815 8.68177 42.9832 9.08602 42.8453 9.50953C42.7074 9.93303 42.6276 10.3758 42.6131 10.8209C42.5986 11.2372 42.6397 11.6583 42.7365 12.065C42.9493 12.9745 43.3701 13.5328 43.9869 14.1921C44.2723 14.4977 44.5649 14.7937 44.8285 15.1185C45.0946 15.4458 45.3195 15.7874 45.5082 16.1652C45.6484 16.4468 45.7694 16.7379 45.8685 17.0387C45.9677 17.3395 46.0427 17.6451 46.0935 17.9555C46.1636 18.3694 46.183 18.7808 46.1612 19.1995C46.1394 19.6158 46.0765 20.0273 46.0257 20.4411C45.9169 21.3339 45.9072 22.0341 46.2724 22.8931C46.4345 23.2781 46.6497 23.6415 46.9061 23.9711C47.1818 24.3224 47.5059 24.6353 47.8687 24.8975C48.2315 25.1598 48.6306 25.3692 49.0514 25.5208C49.4456 25.6627 49.8592 25.7542 50.2776 25.7878C51.2136 25.8673 51.8787 25.6435 52.6986 25.2633C53.0783 25.0876 53.4532 24.9023 53.845 24.7532C54.2393 24.6016 54.6383 24.4957 55.0543 24.4331C55.3663 24.3874 55.6832 24.3633 56 24.3633C56.3168 24.3633 56.6337 24.3874 56.9457 24.4331C57.3641 24.4957 57.7632 24.6016 58.1574 24.7532C58.5492 24.9023 58.9241 25.0876 59.3038 25.2633C60.1237 25.6435 60.7888 25.8673 61.7248 25.7878C62.1432 25.7518 62.5568 25.6627 62.951 25.5208C63.3719 25.3692 63.7709 25.1574 64.1337 24.8951C64.4965 24.6328 64.8206 24.32 65.0963 23.9687C65.3551 23.6391 65.5679 23.2757 65.73 22.8907C66.0952 22.0293 66.0855 21.3315 65.9767 20.4387C65.9259 20.0249 65.8654 19.6134 65.8412 19.1971C65.8195 18.7784 65.8412 18.367 65.909 17.9531C65.9598 17.6427 66.0371 17.3347 66.1339 17.0363C66.2306 16.7379 66.3516 16.4444 66.4943 16.1628C66.6829 15.7874 66.9078 15.4434 67.1739 15.1161C67.4375 14.7913 67.7302 14.4953 68.0156 14.1897C68.6299 13.5304 69.0531 12.9697 69.266 12.0626C69.3627 11.6559 69.4038 11.2372 69.3893 10.8185V10.8209ZM56 21.062C51.9537 21.062 48.6717 17.7991 48.6717 13.771C48.6717 9.74293 51.9513 6.48005 56 6.48005C60.0487 6.48005 63.3283 9.74293 63.3283 13.771C63.3283 17.7991 60.0487 21.062 56 21.062Z" />
<path d="M56 20.2125C59.5745 20.2125 62.4721 17.3296 62.4721 13.7734C62.4721 10.2172 59.5745 7.33426 56 7.33426C52.4255 7.33426 49.5279 10.2172 49.5279 13.7734C49.5279 17.3296 52.4255 20.2125 56 20.2125Z" />
</svg>
</a>
<div class="supt-navigation__content">
<ul class="supt-navigation__menu" role="menubar">
<li class="supt-navigation__menu__item -is-active" role="none">
<button class="supt-navigation__menu__link -has-submenu" role="menuitem" aria-haspopup="true" aria-expanded="false">
About us
<svg class="supt-icon-chevron " xmlns="http://www.w3.org/2000/svg" viewbox="0 0 12 10" fill="none" stroke="currentColor" stroke-width="1.5">
<path d="M1.5 2.75L5.64645 6.89645C5.84171 7.09171 6.15829 7.09171 6.35355 6.89645L10.5 2.75" stroke-linecap="round" vector-effect="non-scaling-stroke" />
</svg>
</button>
<div class="supt-navigation__submenu" role="menu" aria-label="About us submenu">
<div class="supt-navigation__submenu__inner">
<a href="/about-us/at-a-glance" class="supt-navigation__submenu__link -is-active" role="menuitem">
At a glance
</a>
<a href="/about-us/our-values" class="supt-navigation__submenu__link" role="menuitem">
Our values
</a>
<a href="/about-us/history" class="supt-navigation__submenu__link" role="menuitem">
History
</a>
<a href="/about-us/leadership" class="supt-navigation__submenu__link" role="menuitem">
Leadership
</a>
</div>
</div>
</li>
<li class="supt-navigation__menu__item" role="none">
<button class="supt-navigation__menu__link -has-submenu" role="menuitem" aria-haspopup="true" aria-expanded="false">
Our services
<svg class="supt-icon-chevron " xmlns="http://www.w3.org/2000/svg" viewbox="0 0 12 10" fill="none" stroke="currentColor" stroke-width="1.5">
<path d="M1.5 2.75L5.64645 6.89645C5.84171 7.09171 6.15829 7.09171 6.35355 6.89645L10.5 2.75" stroke-linecap="round" vector-effect="non-scaling-stroke" />
</svg>
</button>
<div class="supt-navigation__submenu" role="menu" aria-label="Our services submenu">
<div class="supt-navigation__submenu__inner">
<a href="/services/overview" class="supt-navigation__submenu__link" role="menuitem">
Overview
</a>
</div>
</div>
</li>
<li class="supt-navigation__menu__item" role="none">
<button class="supt-navigation__menu__link -has-submenu" role="menuitem" aria-haspopup="true" aria-expanded="false">
Innovation
<svg class="supt-icon-chevron " xmlns="http://www.w3.org/2000/svg" viewbox="0 0 12 10" fill="none" stroke="currentColor" stroke-width="1.5">
<path d="M1.5 2.75L5.64645 6.89645C5.84171 7.09171 6.15829 7.09171 6.35355 6.89645L10.5 2.75" stroke-linecap="round" vector-effect="non-scaling-stroke" />
</svg>
</button>
<div class="supt-navigation__submenu" role="menu" aria-label="Innovation submenu">
<div class="supt-navigation__submenu__inner">
<a href="/innovation/overview" class="supt-navigation__submenu__link" role="menuitem">
Overview
</a>
</div>
</div>
</li>
<li class="supt-navigation__menu__item" role="none">
<a href="/esg" class="supt-navigation__menu__link" role="menuitem">
ESG
</a>
</li>
<li class="supt-navigation__menu__item" role="none">
<a href="/careers" class="supt-navigation__menu__link" role="menuitem">
Careers
</a>
</li>
<li class="supt-navigation__menu__item" role="none">
<button class="supt-navigation__menu__link -has-submenu" role="menuitem" aria-haspopup="true" aria-expanded="false">
Media
<svg class="supt-icon-chevron " xmlns="http://www.w3.org/2000/svg" viewbox="0 0 12 10" fill="none" stroke="currentColor" stroke-width="1.5">
<path d="M1.5 2.75L5.64645 6.89645C5.84171 7.09171 6.15829 7.09171 6.35355 6.89645L10.5 2.75" stroke-linecap="round" vector-effect="non-scaling-stroke" />
</svg>
</button>
<div class="supt-navigation__submenu" role="menu" aria-label="Media submenu">
<div class="supt-navigation__submenu__inner">
<a href="/media/newsroom" class="supt-navigation__submenu__link" role="menuitem">
Newsroom
</a>
<a href="/media/our-stories" class="supt-navigation__submenu__link" role="menuitem">
Our stories
</a>
<a href="/media/media-contacts" class="supt-navigation__submenu__link" role="menuitem">
Media contacts
</a>
</div>
</div>
</li>
<li class="supt-navigation__menu__item" role="none">
<button class="supt-navigation__menu__link -has-submenu" role="menuitem" aria-haspopup="true" aria-expanded="false">
Investors
<svg class="supt-icon-chevron " xmlns="http://www.w3.org/2000/svg" viewbox="0 0 12 10" fill="none" stroke="currentColor" stroke-width="1.5">
<path d="M1.5 2.75L5.64645 6.89645C5.84171 7.09171 6.15829 7.09171 6.35355 6.89645L10.5 2.75" stroke-linecap="round" vector-effect="non-scaling-stroke" />
</svg>
</button>
<div class="supt-navigation__submenu" role="menu" aria-label="Investors submenu">
<div class="supt-navigation__submenu__inner">
<a href="/investors/investment-case" class="supt-navigation__submenu__link" role="menuitem">
Investment case
</a>
<a href="/investors/financial-results-reports-presentations" class="supt-navigation__submenu__link" role="menuitem">
Financial results, reports and presentations
</a>
<a href="/investors/financial-news" class="supt-navigation__submenu__link" role="menuitem">
Financial news
</a>
<a href="/investors/calendar-of-events" class="supt-navigation__submenu__link" role="menuitem">
Calendar of events
</a>
<a href="/investors/annual-reports" class="supt-navigation__submenu__link" role="menuitem">
Annual reports
</a>
<a href="/investors/governance" class="supt-navigation__submenu__link" role="menuitem">
Governance
</a>
<a href="/investors/debt-investors" class="supt-navigation__submenu__link" role="menuitem">
Debt investors
</a>
<a href="/investors/shareholder-centre" class="supt-navigation__submenu__link" role="menuitem">
Shareholder Centre & Contact
</a>
</div>
</div>
</li>
</ul>
<button class="supt-navigation__country-btn" aria-label="Country picker" data-navigation-country-picker-toggle>
<svg viewbox="0 0 16 16" stroke="currentColor" stroke-width="1.2" fill="none" xmlns="http://www.w3.org/2000/svg">
<circle cx="8" cy="8" r="7.4" stroke-linecap="round" />
<path d="M8 0.787567C10.4022 2.28949 12 4.95815 12 8.00001C12 11.0419 10.4022 13.7105 8 15.2125" stroke-linecap="round" />
<path d="M8 0.787567C10.4022 2.28949 12 4.95815 12 8.00001C12 11.0419 10.4022 13.7105 8 15.2125" stroke-linecap="round" />
<path d="M8 0.787567C5.59785 2.28949 4 4.95815 4 8.00001C4 11.0419 5.59785 13.7105 8 15.2125" stroke-linecap="round" />
<path d="M1.5 5.5H14.5" stroke-linecap="round" />
<path d="M8 15L8 0.999999" stroke-linecap="round" />
<path d="M1.5 10.5H14.5" stroke-linecap="round" />
</svg>
</button>
<button class="supt-navigation__mobile-toggle" aria-label="Toggle mobile menu" aria-expanded="false" data-navigation-mobile-toggle>
<svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewbox="0 0 20 20" fill="none" stroke="currentColor">
<path d="M1.25 16.25L18.75 16.25" stroke-width="1.5" stroke-linecap="round" vector-effect="non-scaling-stroke" />
<path d="M1.25 10L18.75 10" stroke-width="1.5" stroke-linecap="round" vector-effect="non-scaling-stroke" />
<path d="M18.75 3.75L1.25 3.75" stroke-width="1.5" stroke-linecap="round" vector-effect="non-scaling-stroke" />
</svg>
</button>
</div>
</div>
<div class="supt-navigation__mobile-menu" data-navigation-mobile-menu>
<ul class="supt-navigation__mobile-menu__list">
<li class="supt-navigation__mobile-menu__item -is-active">
<button class="supt-navigation__mobile-menu__link -has-submenu" data-navigation-mobile-submenu-toggle>
About us
<svg class="supt-icon-chevron " xmlns="http://www.w3.org/2000/svg" viewbox="0 0 12 10" fill="none" stroke="currentColor" stroke-width="1.5">
<path d="M1.5 2.75L5.64645 6.89645C5.84171 7.09171 6.15829 7.09171 6.35355 6.89645L10.5 2.75" stroke-linecap="round" vector-effect="non-scaling-stroke" />
</svg>
</button>
<div class="supt-navigation__mobile-menu__submenu">
<ul class="supt-navigation__mobile-menu__submenu__list">
<li class="supt-navigation__mobile-menu__submenu__item">
<a href="/about-us/at-a-glance" class="supt-navigation__mobile-menu__submenu__link -is-active">
At a glance
</a>
</li>
<li class="supt-navigation__mobile-menu__submenu__item">
<a href="/about-us/our-values" class="supt-navigation__mobile-menu__submenu__link">
Our values
</a>
</li>
<li class="supt-navigation__mobile-menu__submenu__item">
<a href="/about-us/history" class="supt-navigation__mobile-menu__submenu__link">
History
</a>
</li>
<li class="supt-navigation__mobile-menu__submenu__item">
<a href="/about-us/leadership" class="supt-navigation__mobile-menu__submenu__link">
Leadership
</a>
</li>
</ul>
</div>
</li>
<li class="supt-navigation__mobile-menu__item">
<button class="supt-navigation__mobile-menu__link -has-submenu" data-navigation-mobile-submenu-toggle>
Our services
<svg class="supt-icon-chevron " xmlns="http://www.w3.org/2000/svg" viewbox="0 0 12 10" fill="none" stroke="currentColor" stroke-width="1.5">
<path d="M1.5 2.75L5.64645 6.89645C5.84171 7.09171 6.15829 7.09171 6.35355 6.89645L10.5 2.75" stroke-linecap="round" vector-effect="non-scaling-stroke" />
</svg>
</button>
<div class="supt-navigation__mobile-menu__submenu">
<ul class="supt-navigation__mobile-menu__submenu__list">
<li class="supt-navigation__mobile-menu__submenu__item">
<a href="/services/overview" class="supt-navigation__mobile-menu__submenu__link">
Overview
</a>
</li>
</ul>
</div>
</li>
<li class="supt-navigation__mobile-menu__item">
<button class="supt-navigation__mobile-menu__link -has-submenu" data-navigation-mobile-submenu-toggle>
Innovation
<svg class="supt-icon-chevron " xmlns="http://www.w3.org/2000/svg" viewbox="0 0 12 10" fill="none" stroke="currentColor" stroke-width="1.5">
<path d="M1.5 2.75L5.64645 6.89645C5.84171 7.09171 6.15829 7.09171 6.35355 6.89645L10.5 2.75" stroke-linecap="round" vector-effect="non-scaling-stroke" />
</svg>
</button>
<div class="supt-navigation__mobile-menu__submenu">
<ul class="supt-navigation__mobile-menu__submenu__list">
<li class="supt-navigation__mobile-menu__submenu__item">
<a href="/innovation/overview" class="supt-navigation__mobile-menu__submenu__link">
Overview
</a>
</li>
</ul>
</div>
</li>
<li class="supt-navigation__mobile-menu__item">
<a href="/esg" class="supt-navigation__mobile-menu__link">
ESG
</a>
</li>
<li class="supt-navigation__mobile-menu__item">
<a href="/careers" class="supt-navigation__mobile-menu__link">
Careers
</a>
</li>
<li class="supt-navigation__mobile-menu__item">
<button class="supt-navigation__mobile-menu__link -has-submenu" data-navigation-mobile-submenu-toggle>
Media
<svg class="supt-icon-chevron " xmlns="http://www.w3.org/2000/svg" viewbox="0 0 12 10" fill="none" stroke="currentColor" stroke-width="1.5">
<path d="M1.5 2.75L5.64645 6.89645C5.84171 7.09171 6.15829 7.09171 6.35355 6.89645L10.5 2.75" stroke-linecap="round" vector-effect="non-scaling-stroke" />
</svg>
</button>
<div class="supt-navigation__mobile-menu__submenu">
<ul class="supt-navigation__mobile-menu__submenu__list">
<li class="supt-navigation__mobile-menu__submenu__item">
<a href="/media/newsroom" class="supt-navigation__mobile-menu__submenu__link">
Newsroom
</a>
</li>
<li class="supt-navigation__mobile-menu__submenu__item">
<a href="/media/our-stories" class="supt-navigation__mobile-menu__submenu__link">
Our stories
</a>
</li>
<li class="supt-navigation__mobile-menu__submenu__item">
<a href="/media/media-contacts" class="supt-navigation__mobile-menu__submenu__link">
Media contacts
</a>
</li>
</ul>
</div>
</li>
<li class="supt-navigation__mobile-menu__item">
<button class="supt-navigation__mobile-menu__link -has-submenu" data-navigation-mobile-submenu-toggle>
Investors
<svg class="supt-icon-chevron " xmlns="http://www.w3.org/2000/svg" viewbox="0 0 12 10" fill="none" stroke="currentColor" stroke-width="1.5">
<path d="M1.5 2.75L5.64645 6.89645C5.84171 7.09171 6.15829 7.09171 6.35355 6.89645L10.5 2.75" stroke-linecap="round" vector-effect="non-scaling-stroke" />
</svg>
</button>
<div class="supt-navigation__mobile-menu__submenu">
<ul class="supt-navigation__mobile-menu__submenu__list">
<li class="supt-navigation__mobile-menu__submenu__item">
<a href="/investors/investment-case" class="supt-navigation__mobile-menu__submenu__link">
Investment case
</a>
</li>
<li class="supt-navigation__mobile-menu__submenu__item">
<a href="/investors/financial-results-reports-presentations" class="supt-navigation__mobile-menu__submenu__link">
Financial results, reports and presentations
</a>
</li>
<li class="supt-navigation__mobile-menu__submenu__item">
<a href="/investors/financial-news" class="supt-navigation__mobile-menu__submenu__link">
Financial news
</a>
</li>
<li class="supt-navigation__mobile-menu__submenu__item">
<a href="/investors/calendar-of-events" class="supt-navigation__mobile-menu__submenu__link">
Calendar of events
</a>
</li>
<li class="supt-navigation__mobile-menu__submenu__item">
<a href="/investors/annual-reports" class="supt-navigation__mobile-menu__submenu__link">
Annual reports
</a>
</li>
<li class="supt-navigation__mobile-menu__submenu__item">
<a href="/investors/governance" class="supt-navigation__mobile-menu__submenu__link">
Governance
</a>
</li>
<li class="supt-navigation__mobile-menu__submenu__item">
<a href="/investors/debt-investors" class="supt-navigation__mobile-menu__submenu__link">
Debt investors
</a>
</li>
<li class="supt-navigation__mobile-menu__submenu__item">
<a href="/investors/shareholder-centre" class="supt-navigation__mobile-menu__submenu__link">
Shareholder Centre & Contact
</a>
</li>
</ul>
</div>
</li>
</ul>
</div>
</nav>
No notes defined.
<nav class="supt-navigation {{ modifiers|modifiersAttr }}" role="navigation" aria-label="Main navigation">
<div class="supt-navigation__inner">
<a href="/" class="supt-navigation__logo" aria-label="Verisure logo">
<svg width="112" height="48" viewbox="0 0 112 48" fill="#ED002F" xmlns="http://www.w3.org/2000/svg" aria-hidden="true">
<path d="M78.9137 41.0363C78.9137 43.7241 77.315 44.2895 75.9751 44.2895C74.6352 44.2895 73.0317 43.7241 73.0317 41.0363V33.3146H69.0193V41.5103C69.0193 45.483 71.6821 47.9711 75.98 48C80.2681 47.9711 82.931 45.483 82.931 41.5103V33.3146H78.9161V41.0363H78.9137Z"/>
<path d="M95.1303 33.1077L94.7555 33.0259C94.2693 32.92 93.4204 32.9104 93.3188 32.908C88.0028 32.908 85.4197 35.2805 85.4197 40.158V47.5404H89.4007V42.7736C89.4007 42.5522 89.4007 42.3309 89.3983 42.1143C89.3741 38.695 89.5216 36.7556 92.8037 36.6569C93.1132 36.6473 94.0178 36.6593 94.4991 36.8253L95.1328 37.0419V33.1101L95.1303 33.1077Z"/>
<path d="M42.7268 32.908C37.4107 32.908 34.8277 35.2805 34.8277 40.158V47.5404H38.8087V42.7736C38.8087 42.5522 38.8087 42.3309 38.8062 42.1143C38.7821 38.695 38.9296 36.7556 42.2116 36.6569C42.5212 36.6473 43.4257 36.6617 43.9046 36.8253L44.5383 37.0419V33.1101L44.1634 33.0283C43.6797 32.9224 42.8284 32.9128 42.7292 32.9104L42.7268 32.908Z"/>
<path d="M51.0564 33.1245H47.0657V47.538H51.0564V33.1245Z"/>
<path d="M15.9869 33.1245H11.8825L11.8342 33.5456C11.8293 33.5938 11.2706 38.1368 7.99102 42.4416C4.72109 38.1464 4.15514 33.5938 4.1503 33.5456L4.10193 33.1245H0L0.0386974 33.6347C0.0653019 33.9739 0.740088 41.9844 7.68628 47.6992L7.99102 47.9495L8.29576 47.6992C15.2468 41.9844 15.924 33.9715 15.9506 33.6347L15.9893 33.1245H15.9869Z"/>
<path d="M62.0053 38.6782L59.6255 38.2956C58.5613 38.1368 58.0316 37.6531 58.0558 37.2585C58.0896 36.7556 58.9918 36.2719 60.2833 36.3513H60.3244C61.4346 36.4307 62.3294 36.6545 62.9849 37.0178L63.2678 37.1743L66.2451 34.7536L65.7396 34.3926C64.5279 33.5288 62.9051 33.0523 60.6243 32.8983L60.5494 32.8935C57.3713 32.6986 54.0361 34.1207 53.816 37.2128C53.6927 38.9356 54.4134 41.1277 58.5395 41.7822L60.9121 42.1624C61.9546 42.3285 62.6003 42.7688 62.5616 43.2861C62.5036 44.1163 60.8227 44.3256 59.7682 44.2679L59.7053 44.2607C58.3871 44.1716 57.352 43.8468 56.5393 43.2693L56.2418 43.0576L53.1606 45.5769L53.6056 45.9451C55.2309 47.2853 57.0956 47.6655 59.4029 47.8292L59.5069 47.834C59.7657 47.8508 60.0245 47.858 60.2785 47.858C61.7538 47.858 63.1276 47.5933 64.2038 47.0904C65.8219 46.3373 66.7385 45.0788 66.8546 43.4522C67.0263 40.9785 65.2124 39.1955 62.0029 38.6806L62.0053 38.6782Z"/>
<path d="M108.123 42.3381L108.063 42.4849C107.642 43.4883 106.128 44.2174 104.459 44.2222C101.931 44.1163 101.191 42.4319 100.937 41.4333H112.002V41.0531C112.002 35.7257 109.209 32.6409 104.336 32.5879H104.328C99.046 32.5879 96.6807 36.3946 96.6807 40.1676C96.6807 44.7467 99.8418 47.8243 104.543 47.8243C108.57 47.8243 110.455 45.5408 111.139 44.4195L108.123 42.3405V42.3381ZM104.447 35.8051C106.21 35.8051 107.465 36.8326 107.736 38.5001H101.119C101.353 37.0227 102.865 35.8051 104.447 35.8051Z"/>
<path d="M28.7812 42.3381L28.7207 42.4849C28.2999 43.4883 26.7859 44.2174 25.117 44.2222C22.5896 44.1163 21.8495 42.4319 21.5956 41.4333H32.6606V41.0531C32.6606 35.7257 29.8671 32.6409 24.9937 32.5879H24.9864C19.7042 32.5879 17.3389 36.3946 17.3389 40.1676C17.3389 44.7467 20.5 47.8243 25.2017 47.8243C29.2286 47.8243 31.1127 45.5408 31.7972 44.4195L28.7812 42.3405V42.3381ZM25.1049 35.8051C26.8681 35.8051 28.1233 36.8326 28.3942 38.5001H21.777C22.0116 37.0227 23.5232 35.8051 25.1049 35.8051Z"/>
<path d="M69.3893 10.8209C69.3748 10.3758 69.2974 9.93303 69.1571 9.50953C69.0193 9.08602 68.8209 8.68177 68.5694 8.31362C68.3348 7.96711 68.0518 7.6543 67.735 7.37999C67.0239 6.7688 66.354 6.56186 65.4664 6.38861C65.0552 6.3092 64.644 6.23942 64.2377 6.13114C63.829 6.02286 63.4444 5.87608 63.0695 5.68358C62.789 5.5392 62.5181 5.37317 62.2617 5.18789C62.0054 5.00261 61.7635 4.79808 61.5386 4.5767C61.2362 4.28073 60.9775 3.9631 60.7477 3.60938C60.5203 3.25807 60.3269 2.88991 60.1237 2.52657C59.6835 1.73972 59.2796 1.16944 58.4742 0.685783C58.1138 0.46922 57.7269 0.300782 57.3254 0.185282C56.8949 0.0625627 56.4474 0 56 0C55.5526 0 55.1051 0.0625627 54.6746 0.185282C54.2707 0.300782 53.8837 0.46922 53.5258 0.685783C52.7228 1.16944 52.3165 1.73972 51.8787 2.52657C51.6756 2.88991 51.4821 3.26048 51.2547 3.60938C51.025 3.9607 50.7662 4.28073 50.4639 4.5767C50.2389 4.79808 49.9971 5.00261 49.7407 5.18789C49.4843 5.37317 49.2159 5.5392 48.9329 5.68358C48.558 5.87848 48.171 6.02286 47.7647 6.13114C47.3584 6.23942 46.9472 6.3068 46.5361 6.38861C45.6484 6.56186 44.9785 6.7688 44.2674 7.37999C43.9506 7.6543 43.6676 7.96711 43.433 8.31362C43.1815 8.68177 42.9832 9.08602 42.8453 9.50953C42.7074 9.93303 42.6276 10.3758 42.6131 10.8209C42.5986 11.2372 42.6397 11.6583 42.7365 12.065C42.9493 12.9745 43.3701 13.5328 43.9869 14.1921C44.2723 14.4977 44.5649 14.7937 44.8285 15.1185C45.0946 15.4458 45.3195 15.7874 45.5082 16.1652C45.6484 16.4468 45.7694 16.7379 45.8685 17.0387C45.9677 17.3395 46.0427 17.6451 46.0935 17.9555C46.1636 18.3694 46.183 18.7808 46.1612 19.1995C46.1394 19.6158 46.0765 20.0273 46.0257 20.4411C45.9169 21.3339 45.9072 22.0341 46.2724 22.8931C46.4345 23.2781 46.6497 23.6415 46.9061 23.9711C47.1818 24.3224 47.5059 24.6353 47.8687 24.8975C48.2315 25.1598 48.6306 25.3692 49.0514 25.5208C49.4456 25.6627 49.8592 25.7542 50.2776 25.7878C51.2136 25.8673 51.8787 25.6435 52.6986 25.2633C53.0783 25.0876 53.4532 24.9023 53.845 24.7532C54.2393 24.6016 54.6383 24.4957 55.0543 24.4331C55.3663 24.3874 55.6832 24.3633 56 24.3633C56.3168 24.3633 56.6337 24.3874 56.9457 24.4331C57.3641 24.4957 57.7632 24.6016 58.1574 24.7532C58.5492 24.9023 58.9241 25.0876 59.3038 25.2633C60.1237 25.6435 60.7888 25.8673 61.7248 25.7878C62.1432 25.7518 62.5568 25.6627 62.951 25.5208C63.3719 25.3692 63.7709 25.1574 64.1337 24.8951C64.4965 24.6328 64.8206 24.32 65.0963 23.9687C65.3551 23.6391 65.5679 23.2757 65.73 22.8907C66.0952 22.0293 66.0855 21.3315 65.9767 20.4387C65.9259 20.0249 65.8654 19.6134 65.8412 19.1971C65.8195 18.7784 65.8412 18.367 65.909 17.9531C65.9598 17.6427 66.0371 17.3347 66.1339 17.0363C66.2306 16.7379 66.3516 16.4444 66.4943 16.1628C66.6829 15.7874 66.9078 15.4434 67.1739 15.1161C67.4375 14.7913 67.7302 14.4953 68.0156 14.1897C68.6299 13.5304 69.0531 12.9697 69.266 12.0626C69.3627 11.6559 69.4038 11.2372 69.3893 10.8185V10.8209ZM56 21.062C51.9537 21.062 48.6717 17.7991 48.6717 13.771C48.6717 9.74293 51.9513 6.48005 56 6.48005C60.0487 6.48005 63.3283 9.74293 63.3283 13.771C63.3283 17.7991 60.0487 21.062 56 21.062Z"/>
<path d="M56 20.2125C59.5745 20.2125 62.4721 17.3296 62.4721 13.7734C62.4721 10.2172 59.5745 7.33426 56 7.33426C52.4255 7.33426 49.5279 10.2172 49.5279 13.7734C49.5279 17.3296 52.4255 20.2125 56 20.2125Z"/>
</svg>
</a>
<div class="supt-navigation__content">
{% if items %}
<ul class="supt-navigation__menu" role="menubar">
{% for item in items %}
{# Check if the item is active or if one of the subitems is active #}
{% set isActive = item.isActive %}
{% if item.items %}
{% for subitem in item.items %}
{% if subitem.isActive %}
{% set isActive = true %}
{% endif %}
{% endfor %}
{% endif %}
<li class="supt-navigation__menu__item{{ isActive ? ' -is-active' : '' }}" role="none">
{% if item.items %}
<button class="supt-navigation__menu__link -has-submenu" role="menuitem" aria-haspopup="true" aria-expanded="false">
{{ item.text }}
{% include '02-icons/chevron-icon.twig' %}
</button>
<div class="supt-navigation__submenu" role="menu" aria-label="{{ item.text }} submenu">
<div class="supt-navigation__submenu__inner">
{% for subitem in item.items %}
<a href="{{ subitem.url }}" class="supt-navigation__submenu__link{{ subitem.isActive ? ' -is-active' : '' }}" role="menuitem">
{{ subitem.title }}
</a>
{% endfor %}
</div>
</div>
{% else %}
<a href="{{ item.url }}" class="supt-navigation__menu__link" role="menuitem">
{{ item.text }}
</a>
{% endif %}
</li>
{% endfor %}
</ul>
{% endif %}
<button class="supt-navigation__country-btn" aria-label="Country picker" data-navigation-country-picker-toggle>
{% include '02-icons/globe-icon.twig' %}
</button>
<button class="supt-navigation__mobile-toggle" aria-label="Toggle mobile menu" aria-expanded="false" data-navigation-mobile-toggle>
<svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewbox="0 0 20 20" fill="none" stroke="currentColor">
<path d="M1.25 16.25L18.75 16.25" stroke-width="1.5" stroke-linecap="round" vector-effect="non-scaling-stroke"/>
<path d="M1.25 10L18.75 10" stroke-width="1.5" stroke-linecap="round" vector-effect="non-scaling-stroke"/>
<path d="M18.75 3.75L1.25 3.75" stroke-width="1.5" stroke-linecap="round" vector-effect="non-scaling-stroke"/>
</svg>
</button>
</div>
</div>
{% if items %}
<div class="supt-navigation__mobile-menu" data-navigation-mobile-menu>
<ul class="supt-navigation__mobile-menu__list">
{% for item in items %}
{# Check if the item is active or if one of the subitems is active #}
{% set isActive = item.isActive %}
{% if item.items %}
{% for subitem in item.items %}
{% if subitem.isActive %}
{% set isActive = true %}
{% endif %}
{% endfor %}
{% endif %}
<li class="supt-navigation__mobile-menu__item{{ isActive ? ' -is-active' : '' }}">
{% if item.items %}
<button class="supt-navigation__mobile-menu__link -has-submenu" data-navigation-mobile-submenu-toggle>
{{ item.text }}
{% include '02-icons/chevron-icon.twig' %}
</button>
<div class="supt-navigation__mobile-menu__submenu">
<ul class="supt-navigation__mobile-menu__submenu__list">
{% for subitem in item.items %}
<li class="supt-navigation__mobile-menu__submenu__item">
<a href="{{ subitem.url }}" class="supt-navigation__mobile-menu__submenu__link{{ subitem.isActive ? ' -is-active' : '' }}">
{{ subitem.title }}
</a>
</li>
{% endfor %}
</ul>
</div>
{% else %}
<a href="{{ item.url }}" class="supt-navigation__mobile-menu__link">
{{ item.text }}
</a>
{% endif %}
</li>
{% endfor %}
</ul>
</div>
{% endif %}
</nav>
{
"items": [
{
"text": "About us",
"url": "/about-us",
"items": [
{
"title": "At a glance",
"url": "/about-us/at-a-glance",
"isActive": true
},
{
"title": "Our values",
"url": "/about-us/our-values",
"isActive": false
},
{
"title": "History",
"url": "/about-us/history",
"isActive": false
},
{
"title": "Leadership",
"url": "/about-us/leadership",
"isActive": false
}
],
"isActive": false
},
{
"text": "Our services",
"url": "/services",
"items": [
{
"title": "Overview",
"url": "/services/overview",
"isActive": false
}
],
"isActive": false
},
{
"text": "Innovation",
"url": "/innovation",
"items": [
{
"title": "Overview",
"url": "/innovation/overview",
"isActive": false
}
],
"isActive": false
},
{
"text": "ESG",
"url": "/esg",
"isActive": false
},
{
"text": "Careers",
"url": "/careers",
"isActive": false
},
{
"text": "Media",
"url": "/media",
"items": [
{
"title": "Newsroom",
"url": "/media/newsroom",
"isActive": false
},
{
"title": "Our stories",
"url": "/media/our-stories",
"isActive": false
},
{
"title": "Media contacts",
"url": "/media/media-contacts",
"isActive": false
}
],
"isActive": false
},
{
"text": "Investors",
"url": "/investors",
"items": [
{
"title": "Investment case",
"url": "/investors/investment-case",
"isActive": false
},
{
"title": "Financial results, reports and presentations",
"url": "/investors/financial-results-reports-presentations",
"isActive": false
},
{
"title": "Financial news",
"url": "/investors/financial-news",
"isActive": false
},
{
"title": "Calendar of events",
"url": "/investors/calendar-of-events",
"isActive": false
},
{
"title": "Annual reports",
"url": "/investors/annual-reports",
"isActive": false
},
{
"title": "Governance",
"url": "/investors/governance",
"isActive": false
},
{
"title": "Debt investors",
"url": "/investors/debt-investors",
"isActive": false
},
{
"title": "Shareholder Centre & Contact",
"url": "/investors/shareholder-centre",
"isActive": false
}
],
"isActive": false
}
]
}
import { COUNTRY_PICKER_EVENT } from '@/components/molecules/country-picker';
import { BREAKPOINTS } from '@/js/constants';
export class Navigation {
$element: Element;
$mobileMenu: HTMLElement;
$mobileToggle: HTMLElement;
$mobileSubmenuToggles: NodeListOf<HTMLElement>;
$countryPickerToggle: HTMLElement;
isOpen: boolean;
mobileSubmenus: NavigationMobileSubmenu[] = [];
constructor($element: Element) {
this.$element = $element;
this.$mobileMenu = $element.querySelector('[data-navigation-mobile-menu]') as HTMLElement;
this.$mobileToggle = $element.querySelector('[data-navigation-mobile-toggle]') as HTMLElement;
this.$mobileSubmenuToggles = this.$element.querySelectorAll(
'[data-navigation-mobile-submenu-toggle]'
) as NodeListOf<HTMLElement>;
this.$countryPickerToggle = $element.querySelector(
'[data-navigation-country-picker-toggle]'
) as HTMLElement;
this.isOpen = false;
// Init mobile submenus
this.$mobileSubmenuToggles.forEach($toggle => {
this.mobileSubmenus.push(new NavigationMobileSubmenu($toggle));
});
// Setup navigation theme depending on the current page template
this.setupNavigationTheme();
this.bindEvents();
}
bindEvents() {
// Mobile toggle
this.$mobileToggle.addEventListener('click', this.toggleMobileMenu.bind(this));
this.$countryPickerToggle.addEventListener('click', this.toggleCountryPicker.bind(this));
document.addEventListener('keydown', this.handleKeyDown.bind(this));
window.addEventListener('resize', this.handleResize.bind(this));
window.addEventListener('scroll', this.handleScroll.bind(this));
}
toggleMobileMenu() {
if (this.isOpen) {
this.closeMobileMenu();
} else {
this.openMobileMenu();
}
}
/**
* Setup navigation theme depending on the current page template
* (By default, the navigation is dark)
*/
setupNavigationTheme() {
const template = document.querySelector('.supt-single, .supt-single-team-member');
if (template) {
this.$element.classList.remove('-dark');
}
}
openMobileMenu() {
this.isOpen = true;
this.$element.classList.add('-is-open');
this.$mobileToggle.setAttribute('aria-expanded', 'true');
document.body.style.overflow = 'hidden';
}
closeMobileMenu() {
this.isOpen = false;
this.$element.classList.remove('-is-open');
this.$mobileToggle.setAttribute('aria-expanded', 'false');
document.body.style.overflow = '';
// Close all mobile submenus
this.mobileSubmenus.forEach(submenu => submenu.close());
}
toggleCountryPicker() {
document.dispatchEvent(COUNTRY_PICKER_EVENT);
}
/**
* Close mobile menu on escape key
*/
handleKeyDown(e: KeyboardEvent) {
if (e.key === 'Escape' && this.isOpen) {
this.closeMobileMenu();
}
}
/**
* Close mobile menu on larger screens
*/
handleResize() {
if (window.innerWidth >= BREAKPOINTS.lg && this.isOpen) {
this.closeMobileMenu();
}
}
/**
* Add/remove scrolled class based on scroll position
*/
handleScroll() {
if (window.scrollY > 10) {
this.$element.classList.add('-is-scrolled');
} else {
this.$element.classList.remove('-is-scrolled');
}
}
}
/**
* Navigation mobile submenu
*/
class NavigationMobileSubmenu {
$toggle: HTMLElement;
$menuItem: HTMLElement;
$submenu: HTMLElement;
$submenuInner: HTMLElement;
isOpened: boolean;
constructor($toggle: HTMLElement) {
this.$toggle = $toggle;
this.$menuItem = $toggle.parentElement as HTMLElement;
this.$submenu = this.$toggle.nextElementSibling as HTMLElement;
this.$submenuInner = this.$submenu.children[0] as HTMLElement;
this.$toggle.addEventListener('click', this.toggle.bind(this));
this.isOpened = false;
}
toggle() {
if (this.isOpened) {
this.close();
} else {
this.open();
}
}
open() {
this.isOpened = true;
this.$menuItem.classList.add('-is-open');
this.$toggle.setAttribute('aria-expanded', 'true');
this.$submenu.style.maxHeight = this.$submenuInner.scrollHeight + 'px';
}
close() {
this.isOpened = false;
this.$menuItem.classList.remove('-is-open');
this.$toggle.setAttribute('aria-expanded', 'false');
this.$submenu.style.maxHeight = '';
}
}
.supt-navigation {
position: fixed;
top: 0;
left: 0;
right: 0;
z-index: $z-index-nav;
&__inner {
display: flex;
justify-content: space-between;
padding: $spacing-3-5 $spacing-4;
border-bottom: 1px solid $color-grey-2;
background: $color-grey-background;
position: relative;
z-index: 3;
@media (min-width: $breakpoint-lg) {
padding: $spacing-4 $spacing-8;
}
}
&__content {
display: flex;
align-items: center;
gap: $spacing-5;
@media (min-width: $breakpoint-lg) {
gap: $spacing-6;
}
}
/* Logo */
&__logo {
outline: 0;
transition: opacity $transition-fast;
svg {
display: block;
width: auto;
height: 40px;
@media (min-width: $breakpoint-lg) {
height: 48px;
}
}
&:hover,
&:focus-visible {
opacity: 0.8;
}
}
/* Desktop Menu */
&__menu {
display: none;
list-style: none;
margin: 0;
padding: 0;
height: 100%;
gap: $spacing-6;
@media (min-width: $breakpoint-lg) {
display: flex;
}
&__item {
position: relative;
display: flex;
&::after {
content: '';
position: absolute;
bottom: 11px;
left: 0;
width: 100%;
height: 1px;
background: $color-main;
transform-origin: right;
transform: scaleX(0);
transition: transform $transition-fast ease-in-out;
}
&:last-child {
.supt-navigation__submenu {
left: auto;
right: calc(0 - ($spacing-6 + 16px + $spacing-8));
&__inner {
border-right: 0;
}
}
}
&.-is-active,
&:hover,
&:focus-within {
&::after {
transform-origin: left;
transform: scaleX(1);
}
}
&:hover,
&:focus-within {
.supt-navigation__submenu {
opacity: 1;
pointer-events: auto;
transform: translateY(0);
}
.supt-navigation__menu__link {
svg {
color: $color-black;
transform: rotate(-180deg);
}
}
}
}
&__link {
@extend %t-body-sm, %reset-button;
font-weight: 500;
text-decoration: none;
color: $color-black;
display: flex;
align-items: center;
gap: $spacing-1-5;
svg {
width: 10px;
margin-top: 2px;
height: auto;
color: $color-grey-5;
}
}
}
/* Submenu */
&__submenu {
position: absolute;
top: 100%;
left: -8px;
width: 215px;
padding-top: $spacing-4;
z-index: 1;
opacity: 0;
pointer-events: none;
transform: translateY(-8px);
&__inner {
background: $color-grey-background;
border: 1px solid $color-grey-2;
transition: border-color $transition-fast;
}
&__link {
@extend %t-body-s;
color: $color-grey-5;
outline: 0;
display: block;
padding: $spacing-3 $spacing-4;
transition: color $transition-fast;
&:not(:last-child) {
border-bottom: 1px solid $color-grey-2;
}
&.-is-active,
&:hover,
&:focus-visible {
color: $color-black-background;
}
}
}
&__country-btn {
@extend %reset-button;
color: $color-black;
svg {
display: block;
width: 20px;
height: 20px;
@media (min-width: $breakpoint-lg) {
width: 16px;
height: 16px;
}
}
&:hover,
&:focus-visible {
color: $color-main;
}
}
/* Mobile Toggle */
&__mobile-toggle {
@extend %reset-button;
color: $color-black;
@media (min-width: $breakpoint-lg) {
display: none;
}
svg {
display: block;
overflow: visible;
}
path {
transition:
transform $transition-fast ease-in-out,
opacity $transition-fast;
}
}
/* Mobile Menu */
&__mobile-menu {
position: fixed;
inset: 0;
padding-top: 69px;
background: $color-grey-background;
overflow-y: auto;
z-index: 2;
transform: translateY(-20px);
opacity: 0;
pointer-events: none;
@media (min-width: $breakpoint-lg) {
display: none;
}
&__list {
list-style: none;
margin: 0;
padding: 0;
border-bottom: 1px solid $color-grey-1;
}
&__item {
padding: $spacing-5 $spacing-4;
border-bottom: 1px solid $color-grey-2;
&.-is-open {
.supt-navigation__mobile-menu__link svg {
transform: rotate(-180deg);
color: $color-main;
}
}
&.-is-active {
.supt-navigation__mobile-menu__link {
text-decoration: underline;
text-decoration-thickness: 1px;
text-underline-offset: 4px;
text-decoration-color: $color-main;
text-decoration-skip-ink: none;
}
}
}
&__link {
@extend %t-h3, %reset-button;
color: $color-black;
display: flex;
align-items: center;
justify-content: space-between;
width: 100%;
svg {
pointer-events: none;
margin: 0 4px;
width: 12px;
color: $color-grey-5;
}
}
&__submenu {
max-height: 0;
overflow: hidden;
transition: max-height $transition-fast ease-in-out;
&__list {
list-style: none;
padding: $spacing-6 $spacing-4 $spacing-3;
display: flex;
flex-direction: column;
gap: $spacing-3-5;
}
&__link {
@extend %t-body-sm;
color: $color-grey-5;
&.-is-active {
color: $color-black-background;
}
}
}
}
/* Dark variant */
&.-dark:not(.-is-scrolled) {
.supt-navigation {
&__inner {
background: none;
border-bottom-color: rgba(255, 255, 255, 0.16);
}
&__logo {
svg {
fill: $color-white;
}
}
&__menu {
&__item {
svg {
color: $color-grey-2;
}
&::after {
background: $color-white;
}
&:hover,
&:focus-within {
svg {
color: $color-white;
}
}
}
&__link {
color: $color-white;
}
}
&__submenu__inner {
border: none;
}
&__country-btn,
&__mobile-toggle {
color: $color-white;
}
}
&.-is-open {
.supt-navigation__logo {
svg {
fill: $color-main;
}
}
.supt-navigation__country-btn,
.supt-navigation__mobile-toggle {
color: $color-black;
}
}
}
/* Mobile open state */
&.-is-open {
.supt-navigation__mobile-toggle {
path {
&:nth-child(1) {
transform: scale(1.38) translate(11px, -11px) rotate(45deg);
}
&:nth-child(2) {
opacity: 0;
}
&:nth-child(3) {
transform: scale(1.38) translate(-3px, 12px) rotate(-45deg);
}
}
}
.supt-navigation__mobile-menu {
transform: translateY(0);
opacity: 1;
pointer-events: auto;
}
}
/**
* Add transition only when DOM is fully loaded
* (to avoid hiding animation when the page is loading)
*/
body.-is-loaded & {
&__logo {
svg {
transition: fill $transition-fast;
}
}
&__inner {
transition:
background $transition-fast,
border-color $transition-fast;
}
&__menu {
&__link {
transition: color $transition-fast;
svg {
transition: transform $transition-fast;
}
}
}
&__submenu {
transition:
opacity $transition-fast ease-in-out,
transform $transition-fast ease-in-out;
}
&__country-btn {
transition: color $transition-fast;
}
&__mobile-toggle {
transition: color $transition-fast;
}
&__mobile-menu {
transition:
opacity $transition-fast,
transform $transition-fast ease-in-out;
&__link {
transition: color $transition-fast;
svg {
transition:
transform $transition-fast ease-in-out,
color $transition-fast;
}
}
}
}
}