:root {
--dark-grey: #252525;
--medium-grey: #666666;
--light-grey: #d2d2d2;
--ultra-light-grey: #f4f4f4;
--dark-blue: #003150;
--bright-blue: #3d9ce3;
--brown: #817656;
--white: #ffffff;
--black: #000000;
--error: #bd0000;
--success: #33ab1f;
}
html {
color: var(--dark-grey);
&.wcag-contrast {
--dark-grey: black;
--medium-grey: black;
--light-grey: #000000;
--dark-blue: black;
--bright-blue: black;
--ultra-light-grey: white;
}
}
* {
box-sizing: border-box;
}
a {
color: inherit;
text-decoration: none;
} <head> of your website <script type="module" crossorigin src="https://www.longines.com/external/assets/index.js"></script>
<link rel="stylesheet" href="https://www.longines.com/_next/static/external/index.css">
<body> to add Longine's header <longines-imported-header fixed-header="false" white-header="false"></longines-imported-header> <longines-imported-cookies></longines-imported-cookies> <body> to add Longine's footer <longines-imported-footer checkout="false" product-page="false"></longines-imported-footer> languageVisibilityChanged, searchVisibilityChanged and menuVisibilityChanged custom event on <longines-imported-header> element const header = document.querySelector('longines-imported-header');
type Visibility = boolean;
header?.addEventListener("languageVisibilityChanged", function (event) {
console.log('Language menu visibility changed', (event as CustomEvent<Visibility>).detail);
});
header?.addEventListener("searchVisibilityChanged", function (event) {
console.log('Search menu visibility changed', (event as CustomEvent<Visibility>).detail);
});
header?.addEventListener("menuVisibilityChanged", function (event) {
console.log('Main menu visibility changed', (event as CustomEvent<Visibility>).detail);
}); accessibilitySettingsChanged custom event on <longines-imported-footer> element const footer = document.querySelector('longines-imported-footer');
interface AccessibilitySettings {
highContrast: boolean;
lowAnimations: boolean;
}
footer?.addEventListener("accessibilitySettingsChanged", function (event) {
console.log('Accessibility Settings changed', (event as CustomEvent<AccessibilitySettings>).detail);
}); Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec tincidunt aliquet lobortis. Vestibulum in luctus dui, at suscipit urna. Aliquam interdum a leo eu rutrum. In non felis in odio tempor fringilla. Mauris et gravida nulla. Mauris sit amet quam sit amet neque porta finibus. Nullam tempus sapien sapien, at ultrices ipsum mattis vitae. Fusce aliquet interdum nunc, quis varius ligula vulputate quis. Ut neque dui, dapibus sit amet molestie eget, facilisis ac eros. Proin euismod nibh at ex vestibulum, a pharetra erat efficitur. Aenean cursus orci interdum viverra placerat. In porttitor lectus vitae placerat faucibus.
Fusce sit amet ipsum eget diam dignissim faucibus. Aliquam venenatis porta augue, non sagittis dui egestas sed. Curabitur eu maximus lacus. Mauris at auctor justo, ac gravida nisi. Nam euismod consectetur massa, vitae faucibus felis bibendum vel. Donec sed lacinia massa. Sed nulla ex, porta non sodales sit amet, volutpat sed turpis. Morbi sollicitudin, nulla non vulputate hendrerit, magna ante imperdiet ante, id ultrices felis ipsum lacinia massa. Quisque ligula mauris, varius vitae justo id, bibendum mattis nisi. Suspendisse ligula ligula, suscipit sit amet semper quis, dictum ac nulla.
Fusce eget nulla laoreet, egestas enim quis, ultrices justo. Nulla malesuada in turpis eget bibendum. Integer vehicula laoreet congue. Quisque ut cursus ligula, quis mattis purus. Sed sit amet pellentesque eros, id finibus sapien. Donec commodo efficitur libero eget pharetra. Etiam vel enim at elit tincidunt aliquet nec ut massa. Nulla libero arcu, congue luctus ornare sed, volutpat et diam. Donec non tellus ac sapien viverra consectetur.
Vivamus a turpis a sapien cursus molestie sed commodo lacus. Donec congue facilisis urna blandit posuere. Proin vehicula eros id semper elementum. Mauris pellentesque nunc velit, vitae ullamcorper justo cursus a. Suspendisse at nibh et dolor porta blandit. Nullam placerat non justo in pharetra. Etiam sit amet condimentum ipsum, eu sollicitudin lorem.
Fusce et augue mollis, elementum lacus et, pretium sapien. Etiam at libero diam. Proin sed venenatis metus. Sed et velit nisl. Etiam at dolor sit amet tortor iaculis pellentesque ut ac est. Integer bibendum porttitor imperdiet. Nulla placerat malesuada elit, ut auctor orci tristique eu. Ut aliquet tortor leo, ut fermentum magna ultrices tincidunt. Curabitur congue nibh pellentesque, volutpat eros at, tempor risus. Maecenas quis justo ex. Sed luctus nisi et urna cursus, vel finibus lectus ullamcorper. Nam sit amet consectetur libero, at porta leo. Nunc eu interdum ipsum. Pellentesque ultrices pharetra justo ut imperdiet.
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec tincidunt aliquet lobortis. Vestibulum in luctus dui, at suscipit urna. Aliquam interdum a leo eu rutrum. In non felis in odio tempor fringilla. Mauris et gravida nulla. Mauris sit amet quam sit amet neque porta finibus. Nullam tempus sapien sapien, at ultrices ipsum mattis vitae. Fusce aliquet interdum nunc, quis varius ligula vulputate quis. Ut neque dui, dapibus sit amet molestie eget, facilisis ac eros. Proin euismod nibh at ex vestibulum, a pharetra erat efficitur. Aenean cursus orci interdum viverra placerat. In porttitor lectus vitae placerat faucibus.
Fusce sit amet ipsum eget diam dignissim faucibus. Aliquam venenatis porta augue, non sagittis dui egestas sed. Curabitur eu maximus lacus. Mauris at auctor justo, ac gravida nisi. Nam euismod consectetur massa, vitae faucibus felis bibendum vel. Donec sed lacinia massa. Sed nulla ex, porta non sodales sit amet, volutpat sed turpis. Morbi sollicitudin, nulla non vulputate hendrerit, magna ante imperdiet ante, id ultrices felis ipsum lacinia massa. Quisque ligula mauris, varius vitae justo id, bibendum mattis nisi. Suspendisse ligula ligula, suscipit sit amet semper quis, dictum ac nulla.
Fusce eget nulla laoreet, egestas enim quis, ultrices justo. Nulla malesuada in turpis eget bibendum. Integer vehicula laoreet congue. Quisque ut cursus ligula, quis mattis purus. Sed sit amet pellentesque eros, id finibus sapien. Donec commodo efficitur libero eget pharetra. Etiam vel enim at elit tincidunt aliquet nec ut massa. Nulla libero arcu, congue luctus ornare sed, volutpat et diam. Donec non tellus ac sapien viverra consectetur.
Vivamus a turpis a sapien cursus molestie sed commodo lacus. Donec congue facilisis urna blandit posuere. Proin vehicula eros id semper elementum. Mauris pellentesque nunc velit, vitae ullamcorper justo cursus a. Suspendisse at nibh et dolor porta blandit. Nullam placerat non justo in pharetra. Etiam sit amet condimentum ipsum, eu sollicitudin lorem.
Fusce et augue mollis, elementum lacus et, pretium sapien. Etiam at libero diam. Proin sed venenatis metus. Sed et velit nisl. Etiam at dolor sit amet tortor iaculis pellentesque ut ac est. Integer bibendum porttitor imperdiet. Nulla placerat malesuada elit, ut auctor orci tristique eu. Ut aliquet tortor leo, ut fermentum magna ultrices tincidunt. Curabitur congue nibh pellentesque, volutpat eros at, tempor risus. Maecenas quis justo ex. Sed luctus nisi et urna cursus, vel finibus lectus ullamcorper. Nam sit amet consectetur libero, at porta leo. Nunc eu interdum ipsum. Pellentesque ultrices pharetra justo ut imperdiet.