<header class="Header">
<!-- Language selector -->
<div id="languageSelector"> </div>
<div class="Language__selector">
<div class="Language__selector--title">
<svg class="Language__selector--icon" alt="Globe">
<use xlink:href="/assets/img/icons.svg#globe"></use>
</svg> Language:
</div>
<script>
function OneLink(sHostname) {
document.location.href = document.location.protocol + "//" + sHostname + document.location.pathname + document.location.search;
}
</script>
<div class="OneLinkShow OneLinkKeepLinks">
<a href="javascript:OneLink('ascendmaterials.com')">English</a>
</div>
<div class="OneLinkHide OneLinkKeepLinks">
<a href="javascript:OneLink('www.ascendpm.com.cn')">中文</a>
</div>
</div>
<div class="container">
<div class="Header__contents">
<div class="Logo">
<a rel="home" href="/">
<img class="Image" src="https://ascendmaterials-files.sfo2.digitaloceanspaces.com/images/Globals/Logos/logo.svg" alt="Ascend Performance Materials Logo">
</a>
</div>
<!-- Primary nav -->
<nav class="Header__navigation Header__navigation--desktop">
<ul>
<li data-nav-item="899">
<span class="has-children">
Products & Brands
<svg class="Icon" alt="Chevron down">
<use xlink:href="/assets/img/icons.svg#chevron-down"></use>
</svg>
</span>
</li>
<li data-nav-item="617">
<a href="https://new-ascend-dev.5thring.co.uk/markets" class="has-children">
Markets
<svg class="Icon" alt="Chevron down">
<use xlink:href="/assets/img/icons.svg#chevron-down"></use>
</svg>
</a>
</li>
<li data-nav-item="618">
<a href="https://new-ascend-dev.5thring.co.uk/about/sustainability-at-ascend" class=" has-children ">
Sustainability
<svg class="Icon" alt="Chevron down">
<use xlink:href="/assets/img/icons.svg#chevron-down"></use>
</svg>
</a>
</li>
<li data-nav-item="625">
<a href="https://new-ascend-dev.5thring.co.uk/about" class=" has-children ">
About Us
<svg class="Icon" alt="Chevron down">
<use xlink:href="/assets/img/icons.svg#chevron-down"></use>
</svg>
</a>
</li>
<li data-nav-item="624">
<a href="https://new-ascend-dev.5thring.co.uk/careers" class=" has-children ">
Careers
<svg class="Icon" alt="Chevron down">
<use xlink:href="/assets/img/icons.svg#chevron-down"></use>
</svg>
</a>
</li>
</ul>
</nav>
<!-- Search toggle -->
<div class="Header__search">
<span class="js-header--search Header__search--link" href="javascript:void(0);">
<svg class="Header__search--icon" alt="Search">
<use xlink:href="/assets/img/icons.svg#search"></use>
</svg>
</span>
</div>
<!-- Responsive menu toggle -->
<button class="js-navigation-mobile-toggle Header__navigation__toggle" aria-label="button">
<div class="Header__navigation__toggle--icon"></div>
</button>
</div>
<!-- Dropdown -->
<nav class="Header__navigation--dropdown">
<div class="dropdown--contents" data-nav-item="899">
<ul class="level-2">
<li>
<span class="level-2--link ">
Engineered Materials
</span>
<ul>
<li>
<a href="https://applications.acteev.com/applications/engineering-materials" class="level-3--link " target="_blank" rel="noopener">
Acteev®
</a>
</li>
<li>
<a href="https://new-ascend-dev.5thring.co.uk/products-brands/our-brands/hidura-specialty-polyamides" class="level-3--link ">
HiDura® Specialty Polyamides
</a>
</li>
<li>
<a href="https://new-ascend-dev.5thring.co.uk/products-brands/our-brands/hidura-specialty-polyamides/hidura-lux" class="level-4--link ">
HiDura® LUX
</a>
</li>
<li>
<a href="https://new-ascend-dev.5thring.co.uk/products-brands/our-brands/hidura-specialty-polyamides/hidura-thermaplus" class="level-4--link ">
HiDura® ThermaPlus
</a>
</li>
<li>
<a href="https://new-ascend-dev.5thring.co.uk/markets/healthcare" class="level-4--link ">
HiDura® MED
</a>
</li>
<li>
<a href="https://new-ascend-dev.5thring.co.uk/products-brands/our-brands/redefyne" class="level-3--link ">
ReDefyne™
</a>
</li>
<li>
<a href="https://new-ascend-dev.5thring.co.uk/products-brands/our-brands/starflam" class="level-3--link ">
Starflam®
</a>
</li>
<li>
<a href="https://new-ascend-dev.5thring.co.uk/products-brands/our-brands/starflam/starflam-x-protect" class="level-4--link ">
Starflam® X-Protect
</a>
</li>
<li>
<a href="https://new-ascend-dev.5thring.co.uk/products-brands/our-brands/starflam/starflam-500-series" class="level-4--link ">
Starflam 500 Series
</a>
</li>
<li>
<a href="https://new-ascend-dev.5thring.co.uk/products-brands/our-brands/vydyne" class="level-3--link ">
Vydyne®
</a>
</li>
<li>
<a href="https://new-ascend-dev.5thring.co.uk/products-brands/our-brands/vydyne/vydyne-anti-vibration-technology" class="level-4--link ">
Vydyne® Anti-Vibration Technology
</a>
</li>
<li>
<a href="https://new-ascend-dev.5thring.co.uk/products-brands/our-brands/vydyne/vydyne-pa6" class="level-4--link ">
Vydyne® PA6
</a>
</li>
<li>
<a href="https://new-ascend-dev.5thring.co.uk/products-brands/bioserve" class="level-3--link ">
Bioserve
</a>
</li>
<li>
<a href="https://new-ascend-dev.5thring.co.uk/products-brands/esseti-plast-color-and-additive-masterbatches" class="level-3--link ">
Esseti Plast
</a>
</li>
<li>
<a href="https://products.ascendmaterials.com/" class="level-3--link " target="_blank" rel="noopener">
Product Finder
</a>
</li>
</ul>
</li>
<li>
<a href="https://new-ascend-dev.5thring.co.uk/products-brands/specialty-chemicals" class="level-2--link ">
Sustainable Specialties
</a>
<ul>
<li>
<a href="https://new-ascend-dev.5thring.co.uk/products-brands/specialty-chemicals/signature-brands/trinohex-ultra" class="level-3--link ">
Trinohex® Ultra Electrolyte Additive
</a>
</li>
<li>
<a href="https://new-ascend-dev.5thring.co.uk/products-brands/specialty-chemicals/flexatrac-acids-esters" class="level-3--link ">
FlexaTrac® – Acids & Esters
</a>
</li>
<li>
<a href="https://new-ascend-dev.5thring.co.uk/products-brands/specialty-chemicals/flexatram-amines" class="level-3--link ">
FlexaTram™ – Amines
</a>
</li>
<li>
<a href="https://new-ascend-dev.5thring.co.uk/products-brands/specialty-chemicals/flexatril-nitriles" class="level-3--link ">
FlexaTril™ – Nitriles
</a>
</li>
<li>
<a href="https://new-ascend-dev.5thring.co.uk/innovation-and-technology/product-finder/specialty-chemicals" class="level-3--link ">
Specialty Chemical Finder
</a>
</li>
</ul>
</li>
<li>
<span class="level-2--link ">
Performance Chemicals
</span>
<ul>
<li>
<a href="https://new-ascend-dev.5thring.co.uk/products-brands/intermediate-chemicals/acrylonitrile-an" class="level-3--link ">
Acrylonitrile (AN)
</a>
</li>
<li>
<a href="https://new-ascend-dev.5thring.co.uk/products-brands/intermediate-chemicals/adipic-acid-aa" class="level-3--link ">
Adipic Acid (AA)
</a>
</li>
<li>
<a href="https://new-ascend-dev.5thring.co.uk/products-brands/intermediate-chemicals/adiponitrile-adn" class="level-3--link ">
Adiponitrile (ADN)
</a>
</li>
<li>
<a href="https://new-ascend-dev.5thring.co.uk/products-brands/intermediate-chemicals/hexamethylene-diamine-hmd" class="level-3--link ">
Hexamethylene Diamine (HMD)
</a>
</li>
<li>
<a href="https://new-ascend-dev.5thring.co.uk/products-brands/intermediate-chemicals/hydrogen-cyanide-hcn" class="level-3--link ">
Hydrogen Cyanide (HCN)
</a>
</li>
<li>
<a href="https://new-ascend-dev.5thring.co.uk/products-brands/bioserve" class="level-3--link ">
Bioserve
</a>
</li>
</ul>
</li>
<li>
<span class="level-2--link ">
Fibers & Textiles
</span>
<ul>
<li>
<a href="https://www.acteev.com/" class="level-3--link " target="_blank" rel="noopener">
Acteev®
</a>
</li>
<li>
<a href="https://new-ascend-dev.5thring.co.uk/products-brands/our-brands/endur-by-ascend" class="level-3--link ">
ENDUR by Ascend®
</a>
</li>
<li>
<a href="https://new-ascend-dev.5thring.co.uk/products-brands/our-brands/no-shock" class="level-3--link ">
No-Shock®
</a>
</li>
<li>
<a href="https://new-ascend-dev.5thring.co.uk/products-brands/fibers/carpet-fiber" class="level-3--link ">
Carpet Fiber
</a>
</li>
<li>
<a href="https://new-ascend-dev.5thring.co.uk/products-brands/our-brands/ultron" class="level-3--link ">
Ultron™ Nylon 6,6
</a>
</li>
<li>
<a href="https://new-ascend-dev.5thring.co.uk/products-brands/fibers/industrial-fiber" class="level-3--link ">
Industrial Fiber
</a>
</li>
<li>
<a href="https://new-ascend-dev.5thring.co.uk/products-brands/fibers/industrial-fiber/airbag-fiber" class="level-3--link ">
Airbag Fiber
</a>
</li>
<li>
<a href="https://new-ascend-dev.5thring.co.uk/products-brands/fibers/technical-fiber" class="level-3--link ">
Technical Fiber
</a>
</li>
<li>
<a href="https://new-ascend-dev.5thring.co.uk/products-brands/bioserve" class="level-3--link ">
Bioserve
</a>
</li>
</ul>
</li>
</ul>
</div>
</nav>
<!-- Search -->
<div class="Header__search--carrot">
<span></span>
</div>
<nav class="Header__search--outer">
<div class="Header__search--close">
<svg class="Icon" alt="Close">
<use xlink:href="/assets/img/icons.svg#close-lg"></use>
</svg>
</div>
<form class="search--form" action="/search-results">
<div class="search--input">
<svg class="form--icon" alt="Search">
<use xlink:href="/assets/img/icons.svg#search-short"></use>
</svg>
<input type="text" name="q" aria-label="Search" placeholder="Search Ascend" class="js-search Input TextInput" required="">
</div>
<div class="form--buttons">
<div class="search--action">
<button data-post-default="https://products.ascendmaterials.com" data-post="https://products.ascendmaterials.com/profile/" class="search--products Button Button--white" type="button">Find a Product</button>
<div class="search--finder">
<a href="https://products.ascendmaterials.com/" target="_blank">
<span>Product finder</span>
<svg class="Icon" alt="Arrow Right">
<use xlink:href="/assets/img/icons.svg#arrow-right"></use>
</svg>
</a>
</div>
</div>
<div class="search--action">
<button class="search--all Button Button--white" type="submit">Search in Website</button>
</div>
</div>
</form>
</nav>
</div>
<!-- Mobile nav -->
</header>
<header class="Header">
<!-- Language selector -->
<div id="languageSelector"> </div>
<div class="Language__selector">
<div class="Language__selector--title">
<svg class="Language__selector--icon" alt="Globe">
<use xlink:href="/assets/img/icons.svg#globe"></use>
</svg> Language:
</div>
<script>
function OneLink(sHostname) {
document.location.href = document.location.protocol + "//" + sHostname + document.location.pathname + document.location.search;
}
</script>
<div class="OneLinkShow OneLinkKeepLinks">
<a href="javascript:OneLink('ascendmaterials.com')">English</a>
</div>
<div class="OneLinkHide OneLinkKeepLinks">
<a href="javascript:OneLink('www.ascendpm.com.cn')">中文</a>
</div>
</div>
<div class="container">
<div class="Header__contents">
<div class="Logo">
<a rel="home" href="/">
<img class="Image" src="https://ascendmaterials-files.sfo2.digitaloceanspaces.com/images/Globals/Logos/logo.svg" alt="Ascend Performance Materials Logo">
</a>
</div>
<!-- Primary nav -->
<nav class="Header__navigation Header__navigation--desktop">
<ul>
<li data-nav-item="899">
<span class="has-children">
Products & Brands
<svg class="Icon" alt="Chevron down">
<use xlink:href="/assets/img/icons.svg#chevron-down"></use>
</svg>
</span>
</li>
<li data-nav-item="617">
<a href="https://new-ascend-dev.5thring.co.uk/markets" class="has-children">
Markets
<svg class="Icon" alt="Chevron down">
<use xlink:href="/assets/img/icons.svg#chevron-down"></use>
</svg>
</a>
</li>
<li data-nav-item="618">
<a href="https://new-ascend-dev.5thring.co.uk/about/sustainability-at-ascend" class=" has-children ">
Sustainability
<svg class="Icon" alt="Chevron down">
<use xlink:href="/assets/img/icons.svg#chevron-down"></use>
</svg>
</a>
</li>
<li data-nav-item="625">
<a href="https://new-ascend-dev.5thring.co.uk/about" class=" has-children ">
About Us
<svg class="Icon" alt="Chevron down">
<use xlink:href="/assets/img/icons.svg#chevron-down"></use>
</svg>
</a>
</li>
<li data-nav-item="624">
<a href="https://new-ascend-dev.5thring.co.uk/careers" class=" has-children ">
Careers
<svg class="Icon" alt="Chevron down">
<use xlink:href="/assets/img/icons.svg#chevron-down"></use>
</svg>
</a>
</li>
</ul>
</nav>
<!-- Search toggle -->
<div class="Header__search">
<span class="js-header--search Header__search--link" href="javascript:void(0);">
<svg class="Header__search--icon" alt="Search">
<use xlink:href="/assets/img/icons.svg#search"></use>
</svg>
</span>
</div>
<!-- Responsive menu toggle -->
<button class="js-navigation-mobile-toggle Header__navigation__toggle" aria-label="button">
<div class="Header__navigation__toggle--icon"></div>
</button>
</div>
<!-- Dropdown -->
<nav class="Header__navigation--dropdown">
<div class="dropdown--contents" data-nav-item="899">
<ul class="level-2">
<li>
<span class="level-2--link ">
Engineered Materials
</span>
<ul>
<li>
<a href="https://applications.acteev.com/applications/engineering-materials" class="level-3--link " target="_blank" rel="noopener">
Acteev®
</a>
</li>
<li>
<a href="https://new-ascend-dev.5thring.co.uk/products-brands/our-brands/hidura-specialty-polyamides" class="level-3--link ">
HiDura® Specialty Polyamides
</a>
</li>
<li>
<a href="https://new-ascend-dev.5thring.co.uk/products-brands/our-brands/hidura-specialty-polyamides/hidura-lux" class="level-4--link ">
HiDura® LUX
</a>
</li>
<li>
<a href="https://new-ascend-dev.5thring.co.uk/products-brands/our-brands/hidura-specialty-polyamides/hidura-thermaplus" class="level-4--link ">
HiDura® ThermaPlus
</a>
</li>
<li>
<a href="https://new-ascend-dev.5thring.co.uk/markets/healthcare" class="level-4--link ">
HiDura® MED
</a>
</li>
<li>
<a href="https://new-ascend-dev.5thring.co.uk/products-brands/our-brands/redefyne" class="level-3--link ">
ReDefyne™
</a>
</li>
<li>
<a href="https://new-ascend-dev.5thring.co.uk/products-brands/our-brands/starflam" class="level-3--link ">
Starflam®
</a>
</li>
<li>
<a href="https://new-ascend-dev.5thring.co.uk/products-brands/our-brands/starflam/starflam-x-protect" class="level-4--link ">
Starflam® X-Protect
</a>
</li>
<li>
<a href="https://new-ascend-dev.5thring.co.uk/products-brands/our-brands/starflam/starflam-500-series" class="level-4--link ">
Starflam 500 Series
</a>
</li>
<li>
<a href="https://new-ascend-dev.5thring.co.uk/products-brands/our-brands/vydyne" class="level-3--link ">
Vydyne®
</a>
</li>
<li>
<a href="https://new-ascend-dev.5thring.co.uk/products-brands/our-brands/vydyne/vydyne-anti-vibration-technology" class="level-4--link ">
Vydyne® Anti-Vibration Technology
</a>
</li>
<li>
<a href="https://new-ascend-dev.5thring.co.uk/products-brands/our-brands/vydyne/vydyne-pa6" class="level-4--link ">
Vydyne® PA6
</a>
</li>
<li>
<a href="https://new-ascend-dev.5thring.co.uk/products-brands/bioserve" class="level-3--link ">
Bioserve
</a>
</li>
<li>
<a href="https://new-ascend-dev.5thring.co.uk/products-brands/esseti-plast-color-and-additive-masterbatches" class="level-3--link ">
Esseti Plast
</a>
</li>
<li>
<a href="https://products.ascendmaterials.com/" class="level-3--link " target="_blank" rel="noopener">
Product Finder
</a>
</li>
</ul>
</li>
<li>
<a href="https://new-ascend-dev.5thring.co.uk/products-brands/specialty-chemicals" class="level-2--link ">
Sustainable Specialties
</a>
<ul>
<li>
<a href="https://new-ascend-dev.5thring.co.uk/products-brands/specialty-chemicals/signature-brands/trinohex-ultra" class="level-3--link ">
Trinohex® Ultra Electrolyte Additive
</a>
</li>
<li>
<a href="https://new-ascend-dev.5thring.co.uk/products-brands/specialty-chemicals/flexatrac-acids-esters" class="level-3--link ">
FlexaTrac® – Acids & Esters
</a>
</li>
<li>
<a href="https://new-ascend-dev.5thring.co.uk/products-brands/specialty-chemicals/flexatram-amines" class="level-3--link ">
FlexaTram™ – Amines
</a>
</li>
<li>
<a href="https://new-ascend-dev.5thring.co.uk/products-brands/specialty-chemicals/flexatril-nitriles" class="level-3--link ">
FlexaTril™ – Nitriles
</a>
</li>
<li>
<a href="https://new-ascend-dev.5thring.co.uk/innovation-and-technology/product-finder/specialty-chemicals" class="level-3--link ">
Specialty Chemical Finder
</a>
</li>
</ul>
</li>
<li>
<span class="level-2--link ">
Performance Chemicals
</span>
<ul>
<li>
<a href="https://new-ascend-dev.5thring.co.uk/products-brands/intermediate-chemicals/acrylonitrile-an" class="level-3--link ">
Acrylonitrile (AN)
</a>
</li>
<li>
<a href="https://new-ascend-dev.5thring.co.uk/products-brands/intermediate-chemicals/adipic-acid-aa" class="level-3--link ">
Adipic Acid (AA)
</a>
</li>
<li>
<a href="https://new-ascend-dev.5thring.co.uk/products-brands/intermediate-chemicals/adiponitrile-adn" class="level-3--link ">
Adiponitrile (ADN)
</a>
</li>
<li>
<a href="https://new-ascend-dev.5thring.co.uk/products-brands/intermediate-chemicals/hexamethylene-diamine-hmd" class="level-3--link ">
Hexamethylene Diamine (HMD)
</a>
</li>
<li>
<a href="https://new-ascend-dev.5thring.co.uk/products-brands/intermediate-chemicals/hydrogen-cyanide-hcn" class="level-3--link ">
Hydrogen Cyanide (HCN)
</a>
</li>
<li>
<a href="https://new-ascend-dev.5thring.co.uk/products-brands/bioserve" class="level-3--link ">
Bioserve
</a>
</li>
</ul>
</li>
<li>
<span class="level-2--link ">
Fibers & Textiles
</span>
<ul>
<li>
<a href="https://www.acteev.com/" class="level-3--link " target="_blank" rel="noopener">
Acteev®
</a>
</li>
<li>
<a href="https://new-ascend-dev.5thring.co.uk/products-brands/our-brands/endur-by-ascend" class="level-3--link ">
ENDUR by Ascend®
</a>
</li>
<li>
<a href="https://new-ascend-dev.5thring.co.uk/products-brands/our-brands/no-shock" class="level-3--link ">
No-Shock®
</a>
</li>
<li>
<a href="https://new-ascend-dev.5thring.co.uk/products-brands/fibers/carpet-fiber" class="level-3--link ">
Carpet Fiber
</a>
</li>
<li>
<a href="https://new-ascend-dev.5thring.co.uk/products-brands/our-brands/ultron" class="level-3--link ">
Ultron™ Nylon 6,6
</a>
</li>
<li>
<a href="https://new-ascend-dev.5thring.co.uk/products-brands/fibers/industrial-fiber" class="level-3--link ">
Industrial Fiber
</a>
</li>
<li>
<a href="https://new-ascend-dev.5thring.co.uk/products-brands/fibers/industrial-fiber/airbag-fiber" class="level-3--link ">
Airbag Fiber
</a>
</li>
<li>
<a href="https://new-ascend-dev.5thring.co.uk/products-brands/fibers/technical-fiber" class="level-3--link ">
Technical Fiber
</a>
</li>
<li>
<a href="https://new-ascend-dev.5thring.co.uk/products-brands/bioserve" class="level-3--link ">
Bioserve
</a>
</li>
</ul>
</li>
</ul>
</div>
</nav>
<!-- Search -->
<div class="Header__search--carrot">
<span></span>
</div>
<nav class="Header__search--outer">
<div class="Header__search--close">
<svg class="Icon" alt="Close">
<use xlink:href="/assets/img/icons.svg#close-lg"></use>
</svg>
</div>
<form class="search--form" action="/search-results">
<div class="search--input">
<svg class="form--icon" alt="Search">
<use xlink:href="/assets/img/icons.svg#search-short"></use>
</svg>
<input type="text" name="q" aria-label="Search" placeholder="Search Ascend" class="js-search Input TextInput" required="">
</div>
<div class="form--buttons">
<div class="search--action">
<button data-post-default="https://products.ascendmaterials.com" data-post="https://products.ascendmaterials.com/profile/" class="search--products Button Button--white" type="button">Find a Product</button>
<div class="search--finder">
<a href="https://products.ascendmaterials.com/" target="_blank">
<span>Product finder</span>
<svg class="Icon" alt="Arrow Right">
<use xlink:href="/assets/img/icons.svg#arrow-right"></use>
</svg>
</a>
</div>
</div>
<div class="search--action">
<button class="search--all Button Button--white" type="submit">Search in Website</button>
</div>
</div>
</form>
</nav>
</div>
<!-- Mobile nav -->
</header>
{
"company": "Ascend Performance Materials",
"url": "https://www.ascendmaterials.com",
"placeholders": {
"copy": "Cozy lummox gives smart squid who asks for job pen"
}
}
.Header {
@apply z-50
block
relative;
.container {
@apply z-50
relative
py-0;
}
&__contents {
@apply flex
justify-between
gap-x-4
xl:gap-x-16
min-h-[96px];
}
.Logo {
@apply flex
items-center
flex-1
lg:flex-none;
img {
@apply w-[180px]
max-h-[64px];
}
}
&__navigation {
&--desktop {
@apply hidden
lg:block
w-full
xl:w-[70%];
ul {
@apply flex
justify-evenly
gap-x-0.5
xl:gap-x-4
2xl:gap-x-8
h-full;
li {
@apply inline-flex
items-center
h-full;
a, span {
@apply cursor-pointer
flex
items-center
h-full
px-2
2xl:px-7
pt-4
text-blue
font-bold
text-sm
xl:text-base
bg-transparent
transition-all
duration-300;
&:hover {
@apply text-white
bg-blue;
}
&.has-children {
@apply relative;
svg {
@apply relative
size-3
xl:size-4
ml-2
transition-transform
duration-300
rotate-180
fill-blue;
}
}
&.top-level--open {
@apply text-white
bg-blue;
svg {
@apply rotate-0;
}
}
}
}
}
}
&--mobile {
@apply z-0
hidden;
}
&__toggle {
@apply lg:hidden;
&--icon {
@apply size-8
bg-menu
bg-no-repeat
bg-contain;
}
}
}
&__underlay {
@apply z-40
opacity-0
fixed
w-full
h-full
top-0
left-0
bg-black/60
duration-500
pointer-events-none;
}
&__search {
@apply flex
items-center
mr-4
lg:mr-0;
&--icon {
@apply size-6
text-blue;
}
&--link {
@apply cursor-pointer
lg:pt-4;
}
&--close {
@apply absolute
top-4
right-6
text-gray-200;
svg {
@apply cursor-pointer
size-6
transition-all
duration-300
ease-in-out;
}
&:hover {
svg {
@apply scale-125;
}
}
}
&--carrot {
@apply absolute
right-14;
span {
@apply opacity-0
absolute
right-4
sm:right-8
lg:right-0.5
-top-3
size-0
border-b-blue
border-x-transparent
border-t-0
border-x-[20px]
border-b-[20px]
transition
duration-500
ease-in-out
translate-y-0;
&.carrot-open {
@apply opacity-100
-translate-y-2;
}
}
}
&--outer {
@apply hidden
absolute
top-full
right-1/2
w-full
sm:w-[calc(100%-4rem)]
lg:w-[calc(100%-6rem)]
h-auto
bg-blue
translate-x-1/2;
box-shadow: inset 0 -10px 0 #013562;
form {
@apply w-full
max-w-[90%]
lg:max-w-[70%]
mx-auto
px-4
py-16;
.search--input {
@apply relative
text-white;
.form--icon {
@apply opacity-50
absolute
top-1/2
left-0
size-10
-translate-y-1/2
fill-white;
}
input {
@apply relative
w-full
p-4
pl-16
text-white
text-[1.35rem]
bg-transparent
border-l-0
border-t-0
border-r-0
border-b
border-b-white/50;
&::placeholder {
@apply text-white;
}
&:focus {
@apply outline-none;
}
}
}
.form--buttons {
@apply flex
flex-col
xs:flex-row
justify-center
gap-x-5
mt-8;
.search--action {
@apply w-full
xs:w-1/2
sm:w-auto;
.Button {
@apply w-full
px-0
sm:px-10
text-sm;
}
}
.search--finder {
a {
@apply flex
items-end
justify-end
mb-4
text-white;
span {
@apply opacity-50
pt-2
text-right
transition-all
duration-300;
}
svg {
@apply opacity-15
ml-2
size-5
-rotate-45;
}
&:hover {
span {
@apply opacity-100;
}
}
}
}
}
}
}
}
.Header__navigation--dropdown {
@apply hidden
lg:block
absolute
top-full
right-1/2
w-full
xl:w-[calc(100%-6rem)]
h-0
text-white
bg-blue
transition-all
duration-500
translate-x-1/2;
& .dropdown--contents {
@apply opacity-0
hidden
lg:block
absolute
w-full
-top-2
left-0
h-full
transition-all
duration-500
pointer-events-none;
}
& .Navigation__open {
@apply opacity-100
top-0
h-full
pointer-events-auto;
}
.level-1--link {
@apply w-full
py-2.5
text-center
bg-blue-low;
a, span {
@apply inline-flex
items-center
text-white
text-lg
font-bold;
svg {
@apply opacity-15
size-5
ml-4;
}
}
}
.level-2 {
@apply grid
grid-flow-col
gap-x-5
px-8
2xl:px-24
py-16;
a, span {
@apply block
mb-2
text-white;
}
.level-2--link {
@apply inline-flex
mb-4
py-1
pr-4
xl:text-lg
font-bold;
}
.level-3--link {
@apply text-base;
}
.level-4--link {
@apply relative
ml-4
pl-4
text-sm;
&::before {
content: '-';
@apply absolute
left-0;
}
}
.link-bold, .bold {
@apply font-bold;
}
}
}
}
.underlay--open {
@apply opacity-100
pointer-events-auto;
}
.Language__selector {
@apply z-50
flex
relative
justify-end
items-center
gap-1
-mb-4
lg:-mb-8
p-1
text-sm;
&--title {
@apply flex
items-center
gap-1
text-gray-500;
}
a {
@apply text-blue
font-bold;
}
&--icon {
@apply size-4
fill-gray-500;
}
}
.mm-listitem {
border-color: rgb(0 0 0 / 0.15);
&::after {
content: "";
border-color: inherit;
border-bottom-width: 1px;
border-bottom-style: solid;
display: block;
position: absolute;
inset-inline-start: 20px;
inset-inline-end: 0;
bottom: 0;
}
}
.mm-menu--position-left-front {
width: 80%;
max-width: 440px;
min-width: 240px;
z-index: 10000;
}
.mm-btn--next:after, .mm-btn--prev:before {
@apply content-empty
block
absolute
top-0
bottom-0
size-2
m-auto
border-2
border-b-0
border-r-0
box-border;
}
.mm-btn--next:after {
@apply border-blue
rotate-[135deg];
}
.mm-btn--next:after {
inset-inline-end: 23px;
}
.mm-wrapper--opened {
.Header__navigation--mobile {
@apply block;
}
}
.mm-wrapper--opened .mm-wrapper__blocker {
@apply opacity-0;
}
No notes defined.