diff --git a/data/dataCatalogSchema.json b/data/dataCatalogSchema.json index 878be4f..10e5b5f 100644 --- a/data/dataCatalogSchema.json +++ b/data/dataCatalogSchema.json @@ -395,31 +395,8 @@ "items": { "type": "object", "additionalProperties": false, - "required": ["metadata", "attributes"], + "required": ["attributes"], "properties": { - "metadata": { - "type": "object", - "description": "Metadata about the distribution, including last change date, user, etc.", - "required": [ - "lastChangeDate", - "lastChangeUser" - ], - "properties": { - "lastChangeDate": { - "type": "string", - "format": "date-time", - "description": "Date/time when the dataset was last updated." - }, - "lastChangeUser": { - "type": "string", - "description": "Name or identifier of the user who performed the last update." - }, - "imageURL": { - "type": ["string", "null"], - "format": "uri" - } - } - }, "attributes": { "type": "object", "additionalProperties": false, diff --git a/docs/oblique-steal/index.html b/docs/oblique-steal/index.html new file mode 100644 index 0000000..00554e4 --- /dev/null +++ b/docs/oblique-steal/index.html @@ -0,0 +1,209 @@ + + + AGDC -- The Data Catalog of the Federal Office for Agriculture + + + + + + +
+ + +
+
+
+ +
+ +
+
+
+ +
+
+ +
+
+
+
+
+
+
+ +
+ +
+ + +
+ +
+
+
+ +
+ +
+ +
+
+ +
+
+
+ +
+
+
+
+ + +
+
+
+
+
+
+ +

Welcome to the Data Catalog of the Federal Office for Agriculture

+

In the FOAG Data Catalog, you will find a comprehensive collection of datasets collected by the Federal Office for Agriculture. These data are published and maintained on GitHub.

+ +

Available Datasets

+

The catalog offers a variety of datasets on various agricultural topics. You can sort the datasets by title, publication date, or data owner to find the information you need.

+ +

Sorting Options

+

Use the following sorting options to display the datasets according to your preferences:

+ + +

Language Options

+

The data catalog is available in multiple languages. Choose your preferred language:

+ + +
+
+
+
+ +
+
+ + + + + + + + \ No newline at end of file diff --git a/docs/oblique-steal/main.css b/docs/oblique-steal/main.css new file mode 100644 index 0000000..69f3d6a --- /dev/null +++ b/docs/oblique-steal/main.css @@ -0,0 +1,13158 @@ +/* +! tailwindcss v3.0.24 | MIT License | https://tailwindcss.com +*//* +1. Prevent padding and border from affecting element width. (https://github.com/mozdevs/cssremedy/issues/4) +2. Allow adding a border to an element by just adding a border-width. (https://github.com/tailwindcss/tailwindcss/pull/116) +*/ + +*, +::before, +::after { + box-sizing: border-box; /* 1 */ + border-width: 0; /* 2 */ + border-style: solid; /* 2 */ + border-color: #e5e7eb; /* 2 */ +} + +::before, +::after { + --tw-content: ''; +} + +/* +1. Use a consistent sensible line-height in all browsers. +2. Prevent adjustments of font size after orientation changes in iOS. +3. Use a more readable tab size. +4. Use the user's configured `sans` font-family by default. +*/ + +html { + line-height: 1.5; /* 1 */ + -webkit-text-size-adjust: 100%; /* 2 */ + -moz-tab-size: 4; /* 3 */ + -o-tab-size: 4; + tab-size: 4; /* 3 */ + font-family: ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji"; /* 4 */ +} + +/* +1. Remove the margin in all browsers. +2. Inherit line-height from `html` so users can set them as a class directly on the `html` element. +*/ + +body { + margin: 0; /* 1 */ + line-height: inherit; /* 2 */ +} + +/* +1. Add the correct height in Firefox. +2. Correct the inheritance of border color in Firefox. (https://bugzilla.mozilla.org/show_bug.cgi?id=190655) +3. Ensure horizontal rules are visible by default. +*/ + +hr { + height: 0; /* 1 */ + color: inherit; /* 2 */ + border-top-width: 1px; /* 3 */ +} + +/* +Add the correct text decoration in Chrome, Edge, and Safari. +*/ + +abbr:where([title]) { + -webkit-text-decoration: underline dotted; + text-decoration: underline dotted; +} + +/* +Remove the default font size and weight for headings. +*/ + +h1, +h2, +h3, +h4, +h5, +h6 { + font-size: inherit; + font-weight: inherit; +} + +/* +Reset links to optimize for opt-in styling instead of opt-out. +*/ + +a { + color: inherit; + text-decoration: inherit; +} + +/* +Add the correct font weight in Edge and Safari. +*/ + +b, +strong { + font-weight: bolder; +} + +/* +1. Use the user's configured `mono` font family by default. +2. Correct the odd `em` font sizing in all browsers. +*/ + +code, +kbd, +samp, +pre { + font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace; /* 1 */ + font-size: 1em; /* 2 */ +} + +/* +Add the correct font size in all browsers. +*/ + +small { + font-size: 80%; +} + +/* +Prevent `sub` and `sup` elements from affecting the line height in all browsers. +*/ + +sub, +sup { + font-size: 75%; + line-height: 0; + position: relative; + vertical-align: baseline; +} + +sub { + bottom: -0.25em; +} + +sup { + top: -0.5em; +} + +/* +1. Remove text indentation from table contents in Chrome and Safari. (https://bugs.chromium.org/p/chromium/issues/detail?id=999088, https://bugs.webkit.org/show_bug.cgi?id=201297) +2. Correct table border color inheritance in all Chrome and Safari. (https://bugs.chromium.org/p/chromium/issues/detail?id=935729, https://bugs.webkit.org/show_bug.cgi?id=195016) +3. Remove gaps between table borders by default. +*/ + +table { + text-indent: 0; /* 1 */ + border-color: inherit; /* 2 */ + border-collapse: collapse; /* 3 */ +} + +/* +1. Change the font styles in all browsers. +2. Remove the margin in Firefox and Safari. +3. Remove default padding in all browsers. +*/ + +button, +input, +optgroup, +select, +textarea { + font-family: inherit; /* 1 */ + font-size: 100%; /* 1 */ + line-height: inherit; /* 1 */ + color: inherit; /* 1 */ + margin: 0; /* 2 */ + padding: 0; /* 3 */ +} + +/* +Remove the inheritance of text transform in Edge and Firefox. +*/ + +button, +select { + text-transform: none; +} + +/* +1. Correct the inability to style clickable types in iOS and Safari. +2. Remove default button styles. +*/ + +button, +[type='button'], +[type='reset'], +[type='submit'] { + -webkit-appearance: button; /* 1 */ + background-color: transparent; /* 2 */ + background-image: none; /* 2 */ +} + +/* +Use the modern Firefox focus style for all focusable elements. +*/ + +:-moz-focusring { + outline: auto; +} + +/* +Remove the additional `:invalid` styles in Firefox. (https://github.com/mozilla/gecko-dev/blob/2f9eacd9d3d995c937b4251a5557d95d494c9be1/layout/style/res/forms.css#L728-L737) +*/ + +:-moz-ui-invalid { + box-shadow: none; +} + +/* +Add the correct vertical alignment in Chrome and Firefox. +*/ + +progress { + vertical-align: baseline; +} + +/* +Correct the cursor style of increment and decrement buttons in Safari. +*/ + +::-webkit-inner-spin-button, +::-webkit-outer-spin-button { + height: auto; +} + +/* +1. Correct the odd appearance in Chrome and Safari. +2. Correct the outline style in Safari. +*/ + +[type='search'] { + -webkit-appearance: textfield; /* 1 */ + outline-offset: -2px; /* 2 */ +} + +/* +Remove the inner padding in Chrome and Safari on macOS. +*/ + +::-webkit-search-decoration { + -webkit-appearance: none; +} + +/* +1. Correct the inability to style clickable types in iOS and Safari. +2. Change font properties to `inherit` in Safari. +*/ + +::-webkit-file-upload-button { + -webkit-appearance: button; /* 1 */ + font: inherit; /* 2 */ +} + +/* +Add the correct display in Chrome and Safari. +*/ + +summary { + display: list-item; +} + +/* +Removes the default spacing and border for appropriate elements. +*/ + +blockquote, +dl, +dd, +h1, +h2, +h3, +h4, +h5, +h6, +hr, +figure, +p, +pre { + margin: 0; +} + +fieldset { + margin: 0; + padding: 0; +} + +legend { + padding: 0; +} + +ol, +ul, +menu { + list-style: none; + margin: 0; + padding: 0; +} + +/* +Prevent resizing textareas horizontally by default. +*/ + +textarea { + resize: vertical; +} + +/* +1. Reset the default placeholder opacity in Firefox. (https://github.com/tailwindlabs/tailwindcss/issues/3300) +2. Set the default placeholder color to the user's configured gray 400 color. +*/ + +input::-moz-placeholder, textarea::-moz-placeholder { + opacity: 1; /* 1 */ + color: #9ca3af; /* 2 */ +} + +input:-ms-input-placeholder, textarea:-ms-input-placeholder { + opacity: 1; /* 1 */ + color: #9ca3af; /* 2 */ +} + +input::placeholder, +textarea::placeholder { + opacity: 1; /* 1 */ + color: #9ca3af; /* 2 */ +} + +/* +Set the default cursor for buttons. +*/ + +button, +[role="button"] { + cursor: pointer; +} + +/* +Make sure disabled buttons don't get the pointer cursor. +*/ +:disabled { + cursor: default; +} + +/* +1. Make replaced elements `display: block` by default. (https://github.com/mozdevs/cssremedy/issues/14) +2. Add `vertical-align: middle` to align replaced elements more sensibly by default. (https://github.com/jensimmons/cssremedy/issues/14#issuecomment-634934210) + This can trigger a poorly considered lint error in some tools but is included by design. +*/ + +img, +svg, +video, +canvas, +audio, +iframe, +embed, +object { + display: block; /* 1 */ + vertical-align: middle; /* 2 */ +} + +/* +Constrain images and videos to the parent width and preserve their intrinsic aspect ratio. (https://github.com/mozdevs/cssremedy/issues/14) +*/ + +img, +video { + max-width: 100%; + height: auto; +} + +/* +Ensure the default browser behavior of the `hidden` attribute. +*/ + +[hidden] { + display: none; +} + +*, ::before, ::after{ + --tw-translate-x: 0; + --tw-translate-y: 0; + --tw-rotate: 0; + --tw-skew-x: 0; + --tw-skew-y: 0; + --tw-scale-x: 1; + --tw-scale-y: 1; + --tw-pan-x: ; + --tw-pan-y: ; + --tw-pinch-zoom: ; + --tw-scroll-snap-strictness: proximity; + --tw-ordinal: ; + --tw-slashed-zero: ; + --tw-numeric-figure: ; + --tw-numeric-spacing: ; + --tw-numeric-fraction: ; + --tw-ring-inset: ; + --tw-ring-offset-width: 0px; + --tw-ring-offset-color: #fff; + --tw-ring-color: rgb(59 130 246 / 0.5); + --tw-ring-offset-shadow: 0 0 #0000; + --tw-ring-shadow: 0 0 #0000; + --tw-shadow: 0 0 #0000; + --tw-shadow-colored: 0 0 #0000; + --tw-blur: ; + --tw-brightness: ; + --tw-contrast: ; + --tw-grayscale: ; + --tw-hue-rotate: ; + --tw-invert: ; + --tw-saturate: ; + --tw-sepia: ; + --tw-drop-shadow: ; + --tw-backdrop-blur: ; + --tw-backdrop-brightness: ; + --tw-backdrop-contrast: ; + --tw-backdrop-grayscale: ; + --tw-backdrop-hue-rotate: ; + --tw-backdrop-invert: ; + --tw-backdrop-opacity: ; + --tw-backdrop-saturate: ; + --tw-backdrop-sepia: ; +} +.sr-only{ + position: absolute; + width: 1px; + height: 1px; + padding: 0; + margin: -1px; + overflow: hidden; + clip: rect(0, 0, 0, 0); + white-space: nowrap; + border-width: 0; +} +.fixed{ + position: fixed; +} +.relative{ + position: relative; +} +.sticky{ + position: -webkit-sticky; + position: sticky; +} +.my-16{ + margin-top: 4rem; + margin-bottom: 4rem; +} +.mt-3{ + margin-top: 0.75rem; +} +.mr-6{ + margin-right: 1.5rem; +} +.mb-2{ + margin-bottom: 0.5rem; +} +.-ml-1\.5{ + margin-left: -0.375rem; +} +.mr-1{ + margin-right: 0.25rem; +} +.-ml-1{ + margin-left: -0.25rem; +} +.mt-8{ + margin-top: 2rem; +} +.mr-2{ + margin-right: 0.5rem; +} +.block{ + display: block; +} +.inline{ + display: inline; +} +.flex{ + display: flex; +} +.table{ + display: table; +} +.grid{ + display: grid; +} +.hidden{ + display: none; +} +.flex-grow{ + flex-grow: 1; +} +.transform{ + transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y)); +} +.resize{ + resize: both; +} +.flex-wrap{ + flex-wrap: wrap; +} +.items-center{ + align-items: center; +} +.justify-end{ + justify-content: flex-end; +} +.gap-6{ + gap: 1.5rem; +} +.gap-3{ + gap: 0.75rem; +} +.space-y-6 > :not([hidden]) ~ :not([hidden]){ + --tw-space-y-reverse: 0; + margin-top: calc(1.5rem * calc(1 - var(--tw-space-y-reverse))); + margin-bottom: calc(1.5rem * var(--tw-space-y-reverse)); +} +.truncate{ + overflow: hidden; + text-overflow: ellipsis; + white-space: nowrap; +} +.pt-3{ + padding-top: 0.75rem; +} +.capitalize{ + text-transform: capitalize; +} +.italic{ + font-style: italic; +} +.text-secondary-300{ + --tw-text-opacity: 1; + color: rgb(130 142 154 / var(--tw-text-opacity)); +} +.underline{ + -webkit-text-decoration-line: underline; + text-decoration-line: underline; +} +.shadow-2xl{ + --tw-shadow: 0px 10px 20px 0px rgba(0,0,0,0.06), 1px 10px 70px -8px rgba(0,0,0,0.13); + --tw-shadow-colored: 0px 10px 20px 0px var(--tw-shadow-color), 1px 10px 70px -8px var(--tw-shadow-color); + box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow); +} +.outline{ + outline-style: solid; +} +.filter{ + filter: var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow); +} +/*----------------------------------------*\ + ICONS +\*----------------------------------------*/ +.icon{ + width: auto; + flex-shrink: 0; + fill: currentColor; + stroke-width: 0.3px; +} +.icon path, .icon circle{ + fill: currentColor; +} +.icon--full{ + width: 100%; +} +.icon--sm{ + height: 0.75rem; +} +.icon--base{ + height: 1rem; +} +.icon--md{ + height: 1.25rem; +} +@media (min-width: 768px){ + + .icon--md{ + height: 1.5rem; + } +} +.icon--lg{ + height: 1.5rem; +} +@media (min-width: 768px){ + + .icon--lg{ + height: 1.75rem; + } +} +.icon--xl{ + height: 1.75rem; +} +@media (min-width: 768px){ + + .icon--xl{ + height: 2rem; + } +} +@media (min-width: 1024px){ + + .icon--xl{ + height: 2.25rem; + } +} +.icon--2xl{ + height: 2.25rem; +} +@media (min-width: 768px){ + + .icon--2xl{ + height: 2.5rem; + } +} +@media (min-width: 1024px){ + + .icon--2xl{ + height: 3rem; + } +} +.icon--3xl{ + height: 3rem; +} +@media (min-width: 768px){ + + .icon--3xl{ + height: 4rem; + } +} +@media (min-width: 1024px){ + + .icon--3xl{ + height: 5rem; + } +} +.icon--4xl{ + height: 5rem; +} +@media (min-width: 768px){ + + .icon--4xl{ + height: 6rem; + } +} +@media (min-width: 1024px){ + + .icon--4xl{ + height: 7rem; + } +} +.icon--5xl{ + height: 7rem; +} +@media (min-width: 768px){ + + .icon--5xl{ + height: 8rem; + } +} +@media (min-width: 1024px){ + + .icon--5xl{ + height: 9rem; + } +} +@-webkit-keyframes spin{ + + to{ + transform: rotate(360deg); + } +} +@keyframes spin{ + + to{ + transform: rotate(360deg); + } +} +.icon--spin{ + -webkit-animation: spin 0.5s linear infinite; + animation: spin 0.5s linear infinite; +} +/*----------------------------------------*\ + TYPOGRAPHY +\*----------------------------------------*/ +html { + -ms-text-size-adjust: 100%; + -webkit-text-size-adjust: 100%; + -moz-osx-font-smoothing: grayscale; + -webkit-font-smoothing: antialiased; + word-spacing: 0.0625em; +} +body{ + font-size: 1rem; +} +@media (min-width: 1280px){ + + body{ + font-size: 1.125rem; + } +} +@media (min-width: 1800px){ + + body{ + font-size: 1.25rem; + } +} +body{ + font-family: FrutigerNeueLTPro-Regular, Hind, Fallback-font, Sans-Serif; + --tw-text-opacity: 1; + color: rgb(31 41 55 / var(--tw-text-opacity)); +} +.text--5xl{ + font-size: 2.5rem; +} +@media (min-width: 1024px){ + + .text--5xl{ + font-size: 3rem; + } +} +@media (min-width: 1280px){ + + .text--5xl{ + font-size: 3.5rem; + } +} +@media (min-width: 1800px){ + + .text--5xl{ + font-size: 4rem; + } +} +.text--5xl{ + line-height: 1.25; +} +.text--4xl{ + font-size: 2rem; +} +@media (min-width: 1024px){ + + .text--4xl{ + font-size: 2.5rem; + } +} +@media (min-width: 1280px){ + + .text--4xl{ + font-size: 3rem; + } +} +@media (min-width: 1800px){ + + .text--4xl{ + font-size: 3.5rem; + } +} +.text--4xl{ + line-height: 1.25; +} +.text--3xl{ + font-size: 1.625rem; +} +@media (min-width: 1024px){ + + .text--3xl{ + font-size: 2rem; + } +} +@media (min-width: 1280px){ + + .text--3xl{ + font-size: 2.5rem; + } +} +@media (min-width: 1800px){ + + .text--3xl{ + font-size: 3rem; + } +} +.text--3xl{ + line-height: 1.25; +} +.text--2xl{ + font-size: 1.375rem; +} +@media (min-width: 1024px){ + + .text--2xl{ + font-size: 1.625rem; + } +} +@media (min-width: 1280px){ + + .text--2xl{ + font-size: 2rem; + } +} +@media (min-width: 1800px){ + + .text--2xl{ + font-size: 2.5rem; + } +} +.text--2xl{ + line-height: 1.25; +} +.text--xl{ + font-size: 1.25rem; +} +@media (min-width: 1024px){ + + .text--xl{ + font-size: 1.375rem; + } +} +@media (min-width: 1280px){ + + .text--xl{ + font-size: 1.625rem; + } +} +@media (min-width: 1800px){ + + .text--xl{ + font-size: 2rem; + } +} +.text--xl{ + line-height: 1.25; +} +.text--lg{ + font-size: 1.125rem; +} +@media (min-width: 1280px){ + + .text--lg{ + font-size: 1.25rem; + } +} +@media (min-width: 1800px){ + + .text--lg{ + font-size: 1.375rem; + } +} +.text--base{ + font-size: 1rem; +} +@media (min-width: 1280px){ + + .text--base{ + font-size: 1.125rem; + } +} +@media (min-width: 1800px){ + + .text--base{ + font-size: 1.25rem; + } +} +.text--sm{ + font-size: 0.875rem; +} +@media (min-width: 1280px){ + + .text--sm{ + font-size: 1rem; + } +} +@media (min-width: 1800px){ + + .text--sm{ + font-size: 1.125rem; + } +} +.text--xs{ + font-size: 0.75rem; +} +@media (min-width: 1280px){ + + .text--xs{ + font-size: 0.875rem; + } +} +@media (min-width: 1800px){ + + .text--xs{ + font-size: 1rem; + } +} +.font--regular, .text--regular{ + font-family: FrutigerNeueLTPro-Regular, Hind, Fallback-font, Sans-Serif; +} +.font--italic, .text--italic{ + font-family: FrutigerNeueLTPro-Italic, Hind, Fallback-font; +} +.font--bold, .text--bold{ + font-family: FrutigerNeueLTPro-Bold, Hind, Fallback-font; + font-weight: 400; +} +.font--bold-italic, .text--bold-italic{ + font-family: FrutigerNeueLTPro-BoldIt, Hind, Fallback-font; +} +.text--negative{ + --tw-text-opacity: 1; + color: rgb(255 255 255 / var(--tw-text-opacity)); +} +.text--default{ + --tw-text-opacity: 1; + color: rgb(31 41 55 / var(--tw-text-opacity)); +} +.text--light{ + --tw-text-opacity: 1; + color: rgb(107 114 128 / var(--tw-text-opacity)); +} +.overtitle{ + display: flex; +} +.overtitle > :not([hidden]) ~ :not([hidden]){ + --tw-space-x-reverse: 0; + margin-right: calc(0.5rem * var(--tw-space-x-reverse)); + margin-left: calc(0.5rem * calc(1 - var(--tw-space-x-reverse))); +} +.overtitle{ + --tw-text-opacity: 1; + color: rgb(223 228 233 / var(--tw-text-opacity)); + font-size: 0.75rem; +} +h1{ + font-family: FrutigerNeueLTPro-Bold, Hind, Fallback-font; + font-weight: 400; + font-size: 1.625rem; +} +@media (min-width: 1024px){ + + h1{ + font-size: 2rem; + } +} +@media (min-width: 1280px){ + + h1{ + font-size: 2.5rem; + } +} +@media (min-width: 1800px){ + + h1{ + font-size: 3rem; + } +} +h1{ + line-height: 1.25; + margin-bottom: 1rem; +} +h2{ + font-family: FrutigerNeueLTPro-Bold, Hind, Fallback-font; + font-weight: 400; + font-size: 1.375rem; +} +@media (min-width: 1024px){ + + h2{ + font-size: 1.625rem; + } +} +@media (min-width: 1280px){ + + h2{ + font-size: 2rem; + } +} +@media (min-width: 1800px){ + + h2{ + font-size: 2.5rem; + } +} +h2{ + line-height: 1.25; + margin-bottom: 1rem; +} +h3{ + font-family: FrutigerNeueLTPro-Bold, Hind, Fallback-font; + font-weight: 400; + font-size: 1.25rem; +} +@media (min-width: 1024px){ + + h3{ + font-size: 1.375rem; + } +} +@media (min-width: 1280px){ + + h3{ + font-size: 1.625rem; + } +} +@media (min-width: 1800px){ + + h3{ + font-size: 2rem; + } +} +h3{ + line-height: 1.25; + margin-bottom: 1rem; +} +h4{ + font-family: FrutigerNeueLTPro-Bold, Hind, Fallback-font; + font-weight: 400; + font-size: 1.125rem; +} +@media (min-width: 1280px){ + + h4{ + font-size: 1.25rem; + } +} +@media (min-width: 1800px){ + + h4{ + font-size: 1.375rem; + } +} +h4{ + margin-bottom: 1rem; +} +h5{ + font-family: FrutigerNeueLTPro-Bold, Hind, Fallback-font; + font-weight: 400; + font-size: 1rem; +} +@media (min-width: 1280px){ + + h5{ + font-size: 1.125rem; + } +} +@media (min-width: 1800px){ + + h5{ + font-size: 1.25rem; + } +} +h5{ + margin-bottom: 1rem; +} +.legend{ + padding-top: 0.5rem; + --tw-text-opacity: 1; + color: rgb(89 105 120 / var(--tw-text-opacity)); + font-size: 0.75rem; +} +@media (min-width: 1280px){ + + .legend{ + font-size: 0.875rem; + } +} +@media (min-width: 1800px){ + + .legend{ + font-size: 1rem; + } +} +figcaption{ + padding-top: 0.5rem; + --tw-text-opacity: 1; + color: rgb(89 105 120 / var(--tw-text-opacity)); + font-size: 0.75rem; +} +@media (min-width: 1280px){ + + figcaption{ + font-size: 0.875rem; + } +} +@media (min-width: 1800px){ + + figcaption{ + font-size: 1rem; + } +} +address{ + font-style: normal; +} +strong, b{ + font-family: FrutigerNeueLTPro-Bold, Hind, Fallback-font; + font-weight: 400; +} +del, strike{ + -webkit-text-decoration-line: line-through; + text-decoration-line: line-through; +} +u{ + -webkit-text-decoration-line: underline; + text-decoration-line: underline; + text-underline-offset: 2px; +} +mark{ + --tw-bg-opacity: 1; + background-color: rgb(255 204 206 / var(--tw-bg-opacity)); + padding-top: 0.125rem; + padding-bottom: 0.125rem; + padding-left: 0.25rem; + padding-right: 0.25rem; +} +em, i{ + font-family: FrutigerNeueLTPro-Italic, Hind, Fallback-font; +} +/*----------------------------------------*\ + FONT-FACE +\*----------------------------------------*/ +@font-face { + font-family: 'FrutigerNeueLTPro-Regular'; + src: local('FrutigerNeueLTPro-Regular'), + url('https://liip-bund-ds.fra1.digitaloceanspaces.com/FrutigerNeueLTPro-Regular.ttf') + format('truetype'); +} +@font-face { + font-family: 'FrutigerNeueLTPro-Bold'; + src: local('FrutigerNeueLTPro-Bold'), + url('https://liip-bund-ds.fra1.digitaloceanspaces.com/FrutigerNeueLTPro-Bold.ttf') + format('truetype'); +} +@font-face { + font-family: 'FrutigerNeueLTPro-Italic'; + src: local('FrutigerNeueLTPro-Italic'), + url('https://liip-bund-ds.fra1.digitaloceanspaces.com/FrutigerNeueLTPro-Italic.ttf') + format('truetype'); +} +@font-face { + font-family: 'FrutigerNeueLTPro-BoldIt'; + src: local('FrutigerNeueLTPro-BoldIt'), + url('https://liip-bund-ds.fra1.digitaloceanspaces.com/FrutigerNeueLTPro-BoldIt.ttf') + format('truetype'); +} +@font-face { + font-family: 'Fallback-font'; + src: local(Verdana); + advance-override: 125%; + ascent-override: 95%; + descent-override: -25%; + line-gap-override: 25%; +} +/*----------------------------------------*\ + VERTICAL SPACING +\*----------------------------------------*/ +/* default margin-top for all elements */ +.vertical-spacing > *{ + margin-top: 3rem; +} +@media (min-width: 1536px){ + + .vertical-spacing > *{ + margin-top: 3.5rem; + } +} +.vertical-spacing > *:first-child{ + margin-top: 0px; +} +/* more specified margins */ +/* elements following titles */ +.vertical-spacing > :is(h1, h2, h3, h4, h5){ + margin-bottom: 0px; +} +.vertical-spacing > :is(h1, h2, h3, h4, h5) + *{ + margin-top: 1.5em; +} +.vertical-spacing > :is(h1, h2, h3, h4, h5) + p{ + margin-top: 1em; +} +/* consecutive lists or paragraphs */ +.vertical-spacing > p + p, .vertical-spacing > p + ul, .vertical-spacing > p + ol, .vertical-spacing > p + [identifier="list"], .vertical-spacing > ul + p, .vertical-spacing > ol + p, .vertical-spacing [identifier="list"] + p{ + margin-top: 1em; +} +/*----------------------------------------*\ + BACKGROUNDS +\*----------------------------------------*/ +.bg--white{ + --tw-bg-opacity: 1; + background-color: rgb(255 255 255 / var(--tw-bg-opacity)); +} +.bg--secondary-900{ + --tw-bg-opacity: 1; + background-color: rgb(19 27 34 / var(--tw-bg-opacity)); +} +.bg--secondary-800{ + --tw-bg-opacity: 1; + background-color: rgb(28 40 52 / var(--tw-bg-opacity)); +} +.bg--secondary-700{ + --tw-bg-opacity: 1; + background-color: rgb(38 54 69 / var(--tw-bg-opacity)); +} +.bg--secondary-600{ + --tw-bg-opacity: 1; + background-color: rgb(47 67 86 / var(--tw-bg-opacity)); +} +.bg--secondary-500{ + --tw-bg-opacity: 1; + background-color: rgb(70 89 107 / var(--tw-bg-opacity)); +} +.bg--secondary-400{ + --tw-bg-opacity: 1; + background-color: rgb(89 105 120 / var(--tw-bg-opacity)); +} +.bg--secondary-300{ + --tw-bg-opacity: 1; + background-color: rgb(130 142 154 / var(--tw-bg-opacity)); +} +.bg--secondary-200{ + --tw-bg-opacity: 1; + background-color: rgb(172 180 189 / var(--tw-bg-opacity)); +} +.bg--secondary-100{ + --tw-bg-opacity: 1; + background-color: rgb(223 228 233 / var(--tw-bg-opacity)); +} +.bg--secondary-50{ + --tw-bg-opacity: 1; + background-color: rgb(240 244 247 / var(--tw-bg-opacity)); +} +/*----------------------------------------*\ + TEXT COLORS +\*----------------------------------------*/ +.color--default{ + --tw-text-opacity: 1; + color: rgb(31 41 55 / var(--tw-text-opacity)); +} +.color--light{ + --tw-text-opacity: 1; + color: rgb(107 114 128 / var(--tw-text-opacity)); +} +.color--negative{ + --tw-text-opacity: 1; + color: rgb(255 255 255 / var(--tw-text-opacity)); +} +.color--link{ + --tw-text-opacity: 1; + color: rgb(216 35 42 / var(--tw-text-opacity)); +} +.color--white{ + --tw-text-opacity: 1; + color: rgb(255 255 255 / var(--tw-text-opacity)); +} +.color--black{ + --tw-text-opacity: 1; + color: rgb(0 0 0 / var(--tw-text-opacity)); +} +.color--text-900{ + --tw-text-opacity: 1; + color: rgb(17 24 39 / var(--tw-text-opacity)); +} +.color--text-800{ + --tw-text-opacity: 1; + color: rgb(31 41 55 / var(--tw-text-opacity)); +} +.color--text-700{ + --tw-text-opacity: 1; + color: rgb(55 65 81 / var(--tw-text-opacity)); +} +.color--text-600{ + --tw-text-opacity: 1; + color: rgb(75 85 99 / var(--tw-text-opacity)); +} +.color--text-500{ + --tw-text-opacity: 1; + color: rgb(107 114 128 / var(--tw-text-opacity)); +} +.color--text-400{ + --tw-text-opacity: 1; + color: rgb(156 163 175 / var(--tw-text-opacity)); +} +.color--text-300{ + --tw-text-opacity: 1; + color: rgb(209 213 219 / var(--tw-text-opacity)); +} +.color--text-200{ + --tw-text-opacity: 1; + color: rgb(229 231 235 / var(--tw-text-opacity)); +} +.color--text-100{ + --tw-text-opacity: 1; + color: rgb(243 244 246 / var(--tw-text-opacity)); +} +.color--text-50{ + --tw-text-opacity: 1; + color: rgb(249 250 251 / var(--tw-text-opacity)); +} +.color--red-900{ + --tw-text-opacity: 1; + color: rgb(128 21 25 / var(--tw-text-opacity)); +} +.color--red-800{ + --tw-text-opacity: 1; + color: rgb(153 25 30 / var(--tw-text-opacity)); +} +.color--red-700{ + --tw-text-opacity: 1; + color: rgb(191 31 37 / var(--tw-text-opacity)); +} +.color--red-600{ + --tw-text-opacity: 1; + color: rgb(216 35 42 / var(--tw-text-opacity)); +} +.color--red-500{ + --tw-text-opacity: 1; + color: rgb(229 57 64 / var(--tw-text-opacity)); +} +.color--red-400{ + --tw-text-opacity: 1; + color: rgb(252 101 107 / var(--tw-text-opacity)); +} +.color--red-300{ + --tw-text-opacity: 1; + color: rgb(250 157 161 / var(--tw-text-opacity)); +} +.color--red-200{ + --tw-text-opacity: 1; + color: rgb(255 204 206 / var(--tw-text-opacity)); +} +.color--red-100{ + --tw-text-opacity: 1; + color: rgb(250 225 226 / var(--tw-text-opacity)); +} +.color--red-50{ + --tw-text-opacity: 1; + color: rgb(255 237 238 / var(--tw-text-opacity)); +} +/* ----------------------------------------*\ + GLOBAL +\* ---------------------------------------- */ +html{ + height: 100%; + height: -webkit-fill-available; + overflow-y: scroll; + font-family: FrutigerNeueLTPro-Regular, Hind, Fallback-font, Sans-Serif; +} +body{ + height: 100%; + min-height: 100vh; + min-height: -webkit-fill-available; + transition-property: transform; + transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1); + transition-duration: 700ms; +} +.body--mobile-menu-is-open{ + overflow: hidden; + height: calc(100vh + 3rem); + transform: translateY(-3em); +} +#main-header{ + position: relative; + z-index: 30; +} +#main-content{ + min-height: 100vh; + position: relative; + z-index: 10; +} +#main-footer{ + position: relative; + z-index: 0; +} +.skip-to-content{ + display: inline-block; + padding-left: 1rem; + padding-right: 1rem; + padding-top: 0.5rem; + padding-bottom: 0.5rem; + position: absolute; + top: 0px; + left: 50%; + z-index: 50; + border-width: 2px; + --tw-border-opacity: 1; + border-color: rgb(255 255 255 / var(--tw-border-opacity)); + --tw-bg-opacity: 1; + background-color: rgb(19 27 34 / var(--tw-bg-opacity)); + --tw-text-opacity: 1; + color: rgb(255 255 255 / var(--tw-text-opacity)); + --tw-shadow: 0px 2px 4px -1px rgba(0,0,0,0.06), 0px 4px 10px -1px rgba(0,0,0,0.08); + --tw-shadow-colored: 0px 2px 4px -1px var(--tw-shadow-color), 0px 4px 10px -1px var(--tw-shadow-color); + box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow); + transition-property: transform; + transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1); + transition-duration: 150ms; + transform: translateX(-50%) translateY(-200%); +} +.skip-to-content:focus { + transform: translateX(-50%) translateY(0); + } +*:focus-visible{ + z-index: 10; + outline: 2px solid transparent; + outline-offset: 2px; + --tw-ring-offset-shadow: var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color); + --tw-ring-shadow: var(--tw-ring-inset) 0 0 0 calc(2px + var(--tw-ring-offset-width)) var(--tw-ring-color); + box-shadow: var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow, 0 0 #0000); + --tw-ring-opacity: 1; + --tw-ring-color: rgb(134 85 246 / var(--tw-ring-opacity)); +} +.top-bar *:focus-visible, .bg--secondary-900 *:focus-visible, .bg--secondary-800 *:focus-visible, .bg--secondary-700 *:focus-visible, .bg--secondary-600 *:focus-visible, .bg--secondary-500 *:focus-visible{ + --tw-ring-opacity: 1; + --tw-ring-color: rgb(196 181 253 / var(--tw-ring-opacity)); +} +[id]{ + scroll-margin-top: 2rem; +} +/*----------------------------------------*\ + GRIDS AND GAPS +\*----------------------------------------*/ +.gap { /* default Tailwind value */ } +.gap--responsive{ + gap: 1.25rem; +} +@media (min-width: 480px){ + + .gap--responsive{ + gap: 1.75rem; + } +} +@media (min-width: 640px){ + + .gap--responsive{ + gap: 2.25rem; + } +} +@media (min-width: 1024px){ + + .gap--responsive{ + gap: 2.5rem; + } +} +@media (min-width: 1280px){ + + .gap--responsive{ + gap: 3rem; + } +} +@media (min-width: 1800px){ + + .gap--responsive{ + gap: 4rem; + } +} +.gap--top{ + padding-top: 1.25rem; +} +@media (min-width: 480px){ + + .gap--top{ + padding-top: 1.75rem; + } +} +@media (min-width: 640px){ + + .gap--top{ + padding-top: 2.25rem; + } +} +@media (min-width: 1024px){ + + .gap--top{ + padding-top: 2.5rem; + } +} +@media (min-width: 1280px){ + + .gap--top{ + padding-top: 3rem; + } +} +@media (min-width: 1800px){ + + .gap--top{ + padding-top: 4rem; + } +} +.gap--bottom{ + padding-bottom: 1.25rem; +} +@media (min-width: 480px){ + + .gap--bottom{ + padding-bottom: 1.75rem; + } +} +@media (min-width: 640px){ + + .gap--bottom{ + padding-bottom: 2.25rem; + } +} +@media (min-width: 1024px){ + + .gap--bottom{ + padding-bottom: 2.5rem; + } +} +@media (min-width: 1280px){ + + .gap--bottom{ + padding-bottom: 3rem; + } +} +@media (min-width: 1800px){ + + .gap--bottom{ + padding-bottom: 4rem; + } +} +.grid { /* default Tailwind value */ } +@media (min-width: 768px){ + + .grid--responsive-cols-2{ + grid-template-columns: repeat(2, minmax(0, 1fr)); + } + .grid--reverse > *:nth-child(1) { order: 4; } + .grid--reverse > *:nth-child(2) { order: 3; } + .grid--reverse > *:nth-child(3) { order: 2; } + .grid--reverse > *:nth-child(4) { order: 1; } + .grid--responsive-cols-3{ + grid-template-columns: repeat(2, minmax(0, 1fr)); + } +} +@media (min-width: 1024px){ + + .grid--responsive-cols-3{ + grid-template-columns: repeat(3, minmax(0, 1fr)); + } +} +@media (min-width: 768px){ + + .grid--responsive-cols-4{ + grid-template-columns: repeat(2, minmax(0, 1fr)); + } +} +@media (min-width: 1024px){ + + .grid--responsive-cols-4{ + grid-template-columns: repeat(4, minmax(0, 1fr)); + } +} +/* 1/2 COLUMNS */ +@media (min-width: 768px) { +.grid--responsive-cols-1\/2-1\/2 { + grid-template-columns: 1fr 1fr +} + } +/* 1/4 AND 3/4 COLUMNS */ +@media (min-width: 768px) { +.grid--responsive-cols-1\/4-3\/4 { + grid-template-columns: repeat(12, minmax(0, 1fr)); + grid-template-areas: "A A A B B B B B B B B B" +} + + .grid--responsive-cols-1\/4-3\/4 > *:nth-child(1) { grid-area: A; } + .grid--responsive-cols-1\/4-3\/4 > *:nth-child(2) { grid-area: B; } + .grid--responsive-cols-1\/4-3\/4.grid--reverse > *:nth-child(1) { grid-area: B; } + .grid--responsive-cols-1\/4-3\/4.grid--reverse > *:nth-child(2) { grid-area: A; } + } +@media (min-width: 1280px) { +.grid--responsive-cols-1\/4-3\/4.container__center--md, + .container__center--md .grid--responsive-cols-1\/4-3\/4 { + grid-template-columns: repeat(10, minmax(0, 1fr)); + grid-template-areas: "A A B B B B B B B B" + } +.grid--responsive-cols-1\/4-3\/4.container__center--sm, + .container__center--sm .grid--responsive-cols-1\/4-3\/4 { + grid-template-columns: repeat(8, minmax(0, 1fr)); + grid-template-areas: "A A B B B B B B" + } +.grid--responsive-cols-1\/4-3\/4.container__center--xs, + .container__center--xs .grid--responsive-cols-1\/4-3\/4 { + grid-template-columns: repeat(6, minmax(0, 1fr)); + grid-template-areas: "A A B B B B" + } + } +/* 3/4 AND 1/4 COLUMNS */ +@media (min-width: 768px) { +.grid--responsive-cols-3\/4-1\/4 { + grid-template-columns: repeat(12, minmax(0, 1fr)); + grid-template-areas: "A A A A A A A A A B B B" +} + + .grid--responsive-cols-3\/4-1\/4 > *:nth-child(1) { grid-area: A; } + .grid--responsive-cols-3\/4-1\/4 > *:nth-child(2) { grid-area: B; } + .grid--responsive-cols-3\/4-1\/4.grid--reverse > *:nth-child(1) { grid-area: B; } + .grid--responsive-cols-3\/4-1\/4.grid--reverse > *:nth-child(2) { grid-area: A; } + } +@media (min-width: 1280px) { +.grid--responsive-cols-3\/4-1\/4.container__center--md, + .container__center--md .grid--responsive-cols-3\/4-1\/4 { + grid-template-columns: repeat(10, minmax(0, 1fr)); + grid-template-areas: "A A A A A A A A B B" + } + } +/* 1/3 AND 2/3 COLUMNS */ +@media (min-width: 768px) { +.grid--responsive-cols-1\/3-2\/3, +.grid--responsive-cols-2\/3-1\/3 { + grid-template-columns: repeat(12, minmax(0, 1fr)); + grid-template-areas: "A A A A A A B B B B B B" +} + + .grid--responsive-cols-1\/3-2\/3 > *:nth-child(1), .grid--responsive-cols-2\/3-1\/3 > *:nth-child(1) { grid-area: A; } + .grid--responsive-cols-1\/3-2\/3 > *:nth-child(2), .grid--responsive-cols-2\/3-1\/3 > *:nth-child(2) { grid-area: B; } + .grid--responsive-cols-1\/3-2\/3.grid--reverse > *:nth-child(1), .grid--responsive-cols-2\/3-1\/3.grid--reverse > *:nth-child(1) { grid-area: B; } + .grid--responsive-cols-1\/3-2\/3.grid--reverse > *:nth-child(2), .grid--responsive-cols-2\/3-1\/3.grid--reverse > *:nth-child(2) { grid-area: A; } + } +@media (min-width: 1024px) { +.grid--responsive-cols-1\/3-2\/3, +.grid--responsive-cols-2\/3-1\/3 { + grid-template-areas: "A A A A B B B B B B B B" +} + } +@media (min-width: 1280px) { +.grid--responsive-cols-1\/3-2\/3.container__center--md, + .container__center--md .grid--responsive-cols-1\/3-2\/3, + .grid--responsive-cols-2\/3-1\/3.container__center--md, + .container__center--md .grid--responsive-cols-2\/3-1\/3 { + grid-template-columns: repeat(10, minmax(0, 1fr)); + grid-template-areas: "A A A B B B B B B B" + } + } +@media (min-width: 768px) { +.grid--responsive-cols-2\/3-1\/3 { + grid-template-columns: repeat(12, minmax(0, 1fr)); + grid-template-areas: "A A A A A A B B B B B B" +} + + .grid--responsive-cols-2\/3-1\/3 > *:nth-child(1) { grid-area: A; } + .grid--responsive-cols-2\/3-1\/3 > *:nth-child(2) { grid-area: B; } + .grid--responsive-cols-2\/3-1\/3.grid--reverse > *:nth-child(1) { grid-area: B; } + .grid--responsive-cols-2\/3-1\/3.grid--reverse > *:nth-child(2) { grid-area: A; } + } +@media (min-width: 1024px) { +.grid--responsive-cols-2\/3-1\/3 { + grid-template-areas: "A A A A A A A A B B B B" +} + } +@media (min-width: 1280px) { +.grid--responsive-cols-2\/3-1\/3.container__center--md, + .container__center--md .grid--responsive-cols-2\/3-1\/3 { + grid-template-columns: repeat(10, minmax(0, 1fr)); + grid-template-areas: "A A A A A A A B B B" + } + } +/* add margin between consecutive grids */ +.grid + .grid{ + margin-top: 1.25rem; +} +@media (min-width: 480px){ + + .grid + .grid{ + margin-top: 1.75rem; + } +} +@media (min-width: 640px){ + + .grid + .grid{ + margin-top: 2.25rem; + } +} +@media (min-width: 1024px){ + + .grid + .grid{ + margin-top: 2.5rem; + } +} +@media (min-width: 1280px){ + + .grid + .grid{ + margin-top: 3rem; + } +} +@media (min-width: 1800px){ + + .grid + .grid{ + margin-top: 4rem; + } +} +/* Grid layout depending the number of items */ +@media (min-width: 768px){ + + .grid--items-1{ + grid-template-columns: repeat(1, minmax(0, 1fr)); + } + + .grid--items-2{ + grid-template-columns: repeat(2, minmax(0, 1fr)); + } + + .grid--items-3{ + grid-template-columns: repeat(2, minmax(0, 1fr)); + } +} +.grid--items-3 > *:nth-child(1){ + grid-column: span 2 / span 2; +} +.grid--items-3 > *{ + grid-column: span 2 / span 2; +} +@media (min-width: 768px){ + + .grid--items-3 > *{ + grid-column: span 1 / span 1; + } + + .grid--items-4{ + grid-template-columns: repeat(3, minmax(0, 1fr)); + } +} +.grid--items-4 > *:nth-child(1){ + grid-column: span 3 / span 3; +} +.grid--items-4 > *{ + grid-column: span 3 / span 3; +} +@media (min-width: 768px){ + + .grid--items-4 > *{ + grid-column: span 1 / span 1; + } + + .grid--items-5{ + grid-template-columns: repeat(12, minmax(0, 1fr)); + } +} +.grid--items-5 > *:nth-child(1), .grid--items-5 > *:nth-child(2){ + grid-column: span 6 / span 6; +} +.grid--items-5 > *{ + grid-column: span 6 / span 6; +} +@media (min-width: 1024px){ + + .grid--items-5 > *{ + grid-column: span 4 / span 4; + } +} +/* ----------------------------------------*\ + CONTAINER +\* ---------------------------------------- */ +.container{ + margin-left: auto; + margin-right: auto; + padding-left: 1rem; + padding-right: 1rem; +} +@media (min-width: 480px){ + + .container{ + padding-left: 1.75rem; + padding-right: 1.75rem; + } +} +@media (min-width: 640px){ + + .container{ + padding-left: 2.25rem; + padding-right: 2.25rem; + } +} +@media (min-width: 1024px){ + + .container{ + padding-left: 2.5rem; + padding-right: 2.5rem; + } +} +@media (min-width: 1280px){ + + .container{ + padding-left: 3rem; + padding-right: 3rem; + } +} +@media (min-width: 1800px){ + + .container{ + padding-left: 4rem; + padding-right: 4rem; + } +} +.container{ + width: 100%; +} +@media (min-width: 1536px){ + + .container{ + max-width: 1536px; + } +} +@media (min-width: 1800px){ + + .container{ + max-width: 1680px; + } +} +.container--flex{ + display: flex; + justify-content: space-between; +} +/* VERTICAL PADDINGS */ +.container--py{ + padding-top: 3.5rem; + padding-bottom: 3.5rem; +} +@media (min-width: 1024px){ + + .container--py{ + padding-top: 5rem; + padding-bottom: 5rem; + } +} +@media (min-width: 1800px){ + + .container--py{ + padding-top: 8rem; + padding-bottom: 8rem; + } +} +.container--pt{ + padding-top: 3.5rem; +} +@media (min-width: 1024px){ + + .container--pt{ + padding-top: 5rem; + } +} +@media (min-width: 1800px){ + + .container--pt{ + padding-top: 8rem; + } +} +.container--pt{ + padding-bottom: 0px; +} +@media (min-width: 1024px){ + + .container--pt{ + padding-bottom: 0px; + } +} +@media (min-width: 1800px){ + + .container--pt{ + padding-bottom: 0px; + } +} +.container--pb{ + padding-top: 0px; +} +@media (min-width: 1024px){ + + .container--pb{ + padding-top: 0px; + } +} +@media (min-width: 1800px){ + + .container--pb{ + padding-top: 0px; + } +} +.container--pb{ + padding-bottom: 3.5rem; +} +@media (min-width: 1024px){ + + .container--pb{ + padding-bottom: 5rem; + } +} +@media (min-width: 1800px){ + + .container--pb{ + padding-bottom: 8rem; + } +} +.container--pb-half{ + padding-bottom: 1.75rem; +} +@media (min-width: 1024px){ + + .container--pb-half{ + padding-bottom: 2.5rem; + } +} +@media (min-width: 1800px){ + + .container--pb-half{ + padding-bottom: 4rem; + } +} +/* CONTAINER + 12 COLS GRID */ +.container--grid{ + display: grid; + grid-template-columns: repeat(12, minmax(0, 1fr)); +} +@media print { + + .container--grid { + display: block; /* needed so that content in grid don't break the break-inside rule */ + } +} +.container--grid { /* default Tailwind value */ } +.container--grid + .grid{ + margin-top: 1.25rem; +} +@media (min-width: 480px){ + + .container--grid + .grid{ + margin-top: 1.75rem; + } +} +@media (min-width: 640px){ + + .container--grid + .grid{ + margin-top: 2.25rem; + } +} +@media (min-width: 1024px){ + + .container--grid + .grid{ + margin-top: 2.5rem; + } +} +@media (min-width: 1280px){ + + .container--grid + .grid{ + margin-top: 3rem; + } +} +@media (min-width: 1800px){ + + .container--grid + .grid{ + margin-top: 4rem; + } +} +.container--grid + .section__subtitle{ + padding-top: 3rem; +} +@media (min-width: 1024px){ + + .container--grid + .section__subtitle{ + padding-top: 4rem; + } +} +@media (min-width: 1800px){ + + .container--grid + .section__subtitle{ + padding-top: 5rem; + } +} +.storybook-demo-ratio .container--grid > div > div > *{ + padding: 1.5rem; + text-align: center; + font-size: 1.25rem; + --tw-text-opacity: 1; + color: rgb(76 29 149 / var(--tw-text-opacity)); + --tw-bg-opacity: 1; + background-color: rgb(245 243 255 / var(--tw-bg-opacity)); + border-width: 1px; + border-style: dashed; + --tw-border-opacity: 1; + border-color: rgb(124 58 237 / var(--tw-border-opacity)); +} +.container--grid + .container--grid{ + padding-top: 1.25rem; +} +@media (min-width: 480px){ + + .container--grid + .container--grid{ + padding-top: 1.75rem; + } +} +@media (min-width: 640px){ + + .container--grid + .container--grid{ + padding-top: 2.25rem; + } +} +@media (min-width: 1024px){ + + .container--grid + .container--grid{ + padding-top: 2.5rem; + } +} +@media (min-width: 1280px){ + + .container--grid + .container--grid{ + padding-top: 3rem; + } +} +@media (min-width: 1800px){ + + .container--grid + .container--grid{ + padding-top: 4rem; + } +} +.container__full{ + grid-column: span 12 / span 12; +} +.container__center--xs{ + grid-column: span 12 / span 12; +} +@media (min-width: 768px){ + + .container__center--xs{ + grid-column: span 10 / span 10; + } +} +@media (min-width: 1024px){ + + .container__center--xs{ + grid-column: span 8 / span 8; + } +} +@media (min-width: 1280px){ + + .container__center--xs{ + grid-column: span 6 / span 6; + } +} +@media (min-width: 768px){ + + .container__center--xs{ + grid-column-start: 2; + } +} +@media (min-width: 1024px){ + + .container__center--xs{ + grid-column-start: 3; + } +} +@media (min-width: 1280px){ + + .container__center--xs{ + grid-column-start: 4; + } +} +.container__center--xs figure img{ + width: 100%; +} +.container__center--sm{ + grid-column: span 12 / span 12; +} +@media (min-width: 768px){ + + .container__center--sm{ + grid-column: span 10 / span 10; + } +} +@media (min-width: 1280px){ + + .container__center--sm{ + grid-column: span 8 / span 8; + } +} +@media (min-width: 768px){ + + .container__center--sm{ + grid-column-start: 2; + } +} +@media (min-width: 1280px){ + + .container__center--sm{ + grid-column-start: 3; + } +} +.container__center--md{ + grid-column: span 12 / span 12; +} +@media (min-width: 1280px){ + + .container__center--md{ + grid-column-start: 2; + grid-column-end: 12; + } +} +.container__main{ + grid-column: span 12 / span 12; +} +@media (min-width: 768px){ + + .container__main{ + grid-column: span 7 / span 7; + } +} +@media (min-width: 1024px){ + + .container__main{ + grid-column: span 6 / span 6; + grid-column-start: 2; + } +} +@media (min-width: 768px){ + + .container__main{ + grid-row-start: 1; + } + + .container--reverse .container__main{ + order: 2; + grid-column-start: 6; + } +} +.container__aside{ + grid-column: span 12 / span 12; +} +@media (min-width: 768px){ + + .container__aside{ + grid-column: span 5 / span 5; + } +} +@media (min-width: 1024px){ + + .container__aside{ + grid-column: span 4 / span 4; + } +} +@media (min-width: 768px){ + + .container__aside{ + grid-column-start: 8; + } +} +.container__aside > *, .container__aside .sticky > *{ + margin-bottom: 1.75rem; +} +@media (min-width: 1024px){ + + .container__aside > *, .container__aside .sticky > *{ + margin-bottom: 2rem; + } +} +@media (min-width: 768px){ + + .container--reverse .container__aside{ + order: 1; + grid-column-start: 1; + } +} +@media (min-width: 1024px){ + + .container--reverse .container__aside{ + grid-column-start: 2; + } +} +/*----------------------------------------*\ + SECTION +\*----------------------------------------*/ +.section{ + width: 100%; +} +/* + If section has --default or has background color, + we add padding top: +*/ +.section--default, .section[class^="bg--"], .section[class*=' bg--']{ + overflow: hidden; + padding-top: 3.5rem; + padding-bottom: 3.5rem; +} +@media (min-width: 1024px){ + + .section--default, .section[class^="bg--"], .section[class*=' bg--']{ + padding-top: 5rem; + padding-bottom: 5rem; + } +} +@media (min-width: 1800px){ + + .section--default, .section[class^="bg--"], .section[class*=' bg--']{ + padding-top: 8rem; + padding-bottom: 8rem; + } +} +/* + If consecutive sections have same background, + we remove the padding top of the second section: +*/ +.hero + .section--default, .hero + .bg--white, .section--default + .section--default, .bg--white + .bg--white, .bg--secondary-900 + .bg--secondary-900, .bg--secondary-800 + .bg--secondary-800, .bg--secondary-700 + .bg--secondary-700, .bg--secondary-600 + .bg--secondary-600, .bg--secondary-500 + .bg--secondary-500, .bg--secondary-400 + .bg--secondary-400, .bg--secondary-300 + .bg--secondary-300, .bg--secondary-200 + .bg--secondary-200, .bg--secondary-100 + .bg--secondary-100, .bg--secondary-50 + .bg--secondary-50{ + padding-top: 0px; +} +@media (min-width: 1024px){ + + .hero + .section--default, .hero + .bg--white, .section--default + .section--default, .bg--white + .bg--white, .bg--secondary-900 + .bg--secondary-900, .bg--secondary-800 + .bg--secondary-800, .bg--secondary-700 + .bg--secondary-700, .bg--secondary-600 + .bg--secondary-600, .bg--secondary-500 + .bg--secondary-500, .bg--secondary-400 + .bg--secondary-400, .bg--secondary-300 + .bg--secondary-300, .bg--secondary-200 + .bg--secondary-200, .bg--secondary-100 + .bg--secondary-100, .bg--secondary-50 + .bg--secondary-50{ + padding-top: 0px; + } +} +@media (min-width: 1800px){ + + .hero + .section--default, .hero + .bg--white, .section--default + .section--default, .bg--white + .bg--white, .bg--secondary-900 + .bg--secondary-900, .bg--secondary-800 + .bg--secondary-800, .bg--secondary-700 + .bg--secondary-700, .bg--secondary-600 + .bg--secondary-600, .bg--secondary-500 + .bg--secondary-500, .bg--secondary-400 + .bg--secondary-400, .bg--secondary-300 + .bg--secondary-300, .bg--secondary-200 + .bg--secondary-200, .bg--secondary-100 + .bg--secondary-100, .bg--secondary-50 + .bg--secondary-50{ + padding-top: 0px; + } +} +.hero + .section--default, .hero + .bg--white, .section--default + .section--default, .bg--white + .bg--white, .bg--secondary-900 + .bg--secondary-900, .bg--secondary-800 + .bg--secondary-800, .bg--secondary-700 + .bg--secondary-700, .bg--secondary-600 + .bg--secondary-600, .bg--secondary-500 + .bg--secondary-500, .bg--secondary-400 + .bg--secondary-400, .bg--secondary-300 + .bg--secondary-300, .bg--secondary-200 + .bg--secondary-200, .bg--secondary-100 + .bg--secondary-100, .bg--secondary-50 + .bg--secondary-50{ + padding-bottom: 3.5rem; +} +@media (min-width: 1024px){ + + .hero + .section--default, .hero + .bg--white, .section--default + .section--default, .bg--white + .bg--white, .bg--secondary-900 + .bg--secondary-900, .bg--secondary-800 + .bg--secondary-800, .bg--secondary-700 + .bg--secondary-700, .bg--secondary-600 + .bg--secondary-600, .bg--secondary-500 + .bg--secondary-500, .bg--secondary-400 + .bg--secondary-400, .bg--secondary-300 + .bg--secondary-300, .bg--secondary-200 + .bg--secondary-200, .bg--secondary-100 + .bg--secondary-100, .bg--secondary-50 + .bg--secondary-50{ + padding-bottom: 5rem; + } +} +@media (min-width: 1800px){ + + .hero + .section--default, .hero + .bg--white, .section--default + .section--default, .bg--white + .bg--white, .bg--secondary-900 + .bg--secondary-900, .bg--secondary-800 + .bg--secondary-800, .bg--secondary-700 + .bg--secondary-700, .bg--secondary-600 + .bg--secondary-600, .bg--secondary-500 + .bg--secondary-500, .bg--secondary-400 + .bg--secondary-400, .bg--secondary-300 + .bg--secondary-300, .bg--secondary-200 + .bg--secondary-200, .bg--secondary-100 + .bg--secondary-100, .bg--secondary-50 + .bg--secondary-50{ + padding-bottom: 8rem; + } +} +.section__title{ + font-size: 1.375rem; +} +@media (min-width: 1024px){ + + .section__title{ + font-size: 1.625rem; + } +} +@media (min-width: 1280px){ + + .section__title{ + font-size: 2rem; + } +} +@media (min-width: 1800px){ + + .section__title{ + font-size: 2.5rem; + } +} +.section__title{ + line-height: 1.25; + font-family: FrutigerNeueLTPro-Bold, Hind, Fallback-font; + font-weight: 400; + padding-bottom: 2.5rem; +} +.section__title--negative, .bg--secondary-900 .section__title, .bg--secondary-800 .section__title, .bg--secondary-700 .section__title, .bg--secondary-600 .section__title, .bg--secondary-500 .section__title{ + --tw-text-opacity: 1; + color: rgb(255 255 255 / var(--tw-text-opacity)); +} +.section__subtitle{ + font-size: 1.125rem; +} +@media (min-width: 1280px){ + + .section__subtitle{ + font-size: 1.25rem; + } +} +@media (min-width: 1800px){ + + .section__subtitle{ + font-size: 1.375rem; + } +} +.section__subtitle{ + font-family: FrutigerNeueLTPro-Bold, Hind, Fallback-font; + font-weight: 400; + padding-bottom: 2.5rem; +} +.grid + .section__subtitle{ + padding-top: 3rem; +} +@media (min-width: 1024px){ + + .grid + .section__subtitle{ + padding-top: 4rem; + } +} +@media (min-width: 1800px){ + + .grid + .section__subtitle{ + padding-top: 5rem; + } +} +.section__action{ + display: flex; + justify-content: flex-end; + padding-top: 1rem; + position: relative; + top: 1.5rem; +} +@media (min-width: 1024px){ + + .section__action{ + top: 2rem; + } +} +@media (min-width: 1800px){ + + .section__action{ + top: 3rem; + } +} +.carousel + .section__action{ + padding-top: 0px; +} +/*----------------------------------------*\ + RATIO +\*----------------------------------------*/ +.ratio{ + position: relative; + z-index: 50; +} +/* for video iframes in clickable cards */ +.ratio > *{ + height: 100%; + width: 100%; + position: absolute; + top: 0px; + right: 0px; + bottom: 0px; + left: 0px; +} +.ratio--1\/1{ + padding-bottom: 98%; /* ratio 1:1, with visual correction */ +} +.ratio--2\/1{ + padding-bottom: 50%; /* ratio 2:1 */ +} +.ratio--4\/3{ + padding-bottom: 75%; /* ratio 4:3 */ +} +.ratio--16\/9{ + padding-bottom: 56.25%; /* ratio 16:9 */ +} +.ratio--mb{ + margin-bottom: 1.5rem; +} +video::cue{ + font-size: 1rem; +} +@media (min-width: 1280px){ + + video::cue{ + font-size: 1.125rem; + } +} +@media (min-width: 1800px){ + + video::cue{ + font-size: 1.25rem; + } +} +video::cue{ + background-color: transparent; + --tw-text-opacity: 1; + color: rgb(253 230 138 / var(--tw-text-opacity)); + text-shadow: + -0.5px -0.5px 0 #000, + 0 -0.5px 0 #000, + 0.5px -0.5px 0 #000, + 0.5px 0 0 #000, + 0.5px 0.5px 0 #000, + 0 0.5px 0 #000, + -0.5px 0.5px 0 #000, + -0.5px 0 0 #000, + 0 0 3px #000; +} +@media all and (display-mode: fullscreen) { +video::cue { + font-family: 'FrutigerNeueLTPro-Bold'; + font-size: calc(13px + 2vw) +} + } +/*----------------------------------------*\ + STICKY +\*----------------------------------------*/ +.sticky {} +.sticky--top{ + top: 1rem; +} +@media (min-width: 768px){ + + .sticky--top{ + top: 2.5rem; + } +} +@media (min-width: 1024px){ + + .sticky--top{ + top: 3rem; + } +} +/*----------------------------------------*\ + ACCORDION +\*----------------------------------------*/ +.accordion, main .accordion{ + padding-left: 0px; +} +.accordion--spaced{ + padding-top: 2rem; + padding-bottom: 2rem; +} +.accordion__item{ + border-top-width: 1px; + --tw-border-opacity: 1; + border-color: rgb(172 180 189 / var(--tw-border-opacity)); + list-style-type: none; + margin-top: 0px !important; +} +.accordion__item:last-of-type{ + border-bottom-width: 1px; + --tw-border-opacity: 1; + border-color: rgb(172 180 189 / var(--tw-border-opacity)); +} +.accordion__button{ + display: flex; + justify-content: space-between; + width: 100%; + padding-left: 0.5rem; + padding-right: 0.5rem; + padding-top: 0.75rem; + padding-bottom: 0.75rem; +} +@media (min-width: 1536px){ + + .accordion__button{ + padding-left: 0.75rem; + padding-right: 0.75rem; + padding-top: 1.25rem; + padding-bottom: 1.25rem; + } +} +.accordion__button{ + font-family: FrutigerNeueLTPro-Bold, Hind, Fallback-font; + font-weight: 400; +} +.accordion__button:hover{ + --tw-text-opacity: 1; + color: rgb(229 57 64 / var(--tw-text-opacity)); +} +.accordion__button{ + transition-property: color, background-color, border-color, fill, stroke, -webkit-text-decoration-color; + transition-property: color, background-color, border-color, text-decoration-color, fill, stroke; + transition-property: color, background-color, border-color, text-decoration-color, fill, stroke, -webkit-text-decoration-color; + transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1); + transition-duration: 200ms; +} +@media (hover: none) { + .accordion__button:hover { color: inherit; } + } +.accordion__arrow{ + transition-property: transform; + transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1); + transition-duration: 200ms; +} +.active .accordion__arrow{ + --tw-rotate: 180deg; + transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y)); +} +.accordion__drawer{ + max-height: 0px; + width: 100%; + overflow: hidden; + transition: max-height 0.3s ease-out; +} +.accordion__content{ + width: 100%; + padding-left: 0.5rem; + padding-right: 0.5rem; + padding-top: 1rem; + padding-bottom: 2.5rem; +} +@media (min-width: 1536px){ + + .accordion__content{ + padding-left: 0.75rem; + padding-right: 0.75rem; + } +} +.accordion__content > *{ + margin-top: 3rem; +} +@media (min-width: 1536px){ + + .accordion__content > *{ + margin-top: 3.5rem; + } +} +.accordion__content > *:first-child{ + margin-top: 0px; +} +.accordion__content > :is(h1, h2, h3, h4, h5){ + margin-bottom: 0px; +} +.accordion__content > :is(h1, h2, h3, h4, h5) + *{ + margin-top: 1.5em; +} +.accordion__content > :is(h1, h2, h3, h4, h5) + p{ + margin-top: 1em; +} +.accordion__content > p + p, .accordion__content > p + ul, .accordion__content > p + ol, .accordion__content > p + [identifier="list"], .accordion__content > ul + p, .accordion__content > ol + p, .accordion__content [identifier="list"] + p{ + margin-top: 1em; +} +.tab__container.accordion__content{ + padding-top: 2rem; +} +.accordion__title{ + padding-top: 0.25rem; + padding-bottom: 0.25rem; + padding-right: 1rem; + text-align: left; +} +@media (min-width: 1024px){ + + .accordion__title{ + padding-right: 1.5rem; + } +} +@media (min-width: 1536px){ + + .accordion__title{ + padding-right: 2rem; + } +} +/*----------------------------------------*\ + AUTHORS +\*----------------------------------------*/ +.authors{ + align-items: center; +} +@media (min-width: 768px){ + + .authors{ + display: flex; + } +} +.authors{ + padding-top: 1rem; + padding-bottom: 1rem; + font-size: 0.875rem; +} +@media (min-width: 1280px){ + + .authors{ + font-size: 1rem; + } +} +@media (min-width: 1800px){ + + .authors{ + font-size: 1.125rem; + } +} +.authors{ + border-top-width: 1px; + border-bottom-width: 1px; + --tw-border-opacity: 1; + border-color: rgb(223 228 233 / var(--tw-border-opacity)); +} +@media (min-width: 768px){ + + .authors__names{ + padding-top: 0.5rem; + padding-bottom: 0.5rem; + } +} +.authors__names .link{ + color: inherit; +} +.author__name:not(:last-child)::after { + content: ", "; + display: inline-block; + width: 1ch; + } +/*----------------------------------------*\ + DISC IMAGES +\*----------------------------------------*/ +.disc-images{ + display: flex; + flex-shrink: 0; + margin-right: 0.75rem; + margin-left: 0.25rem; +} +@media (min-width: 768px){ + + .disc-images{ + margin-right: 1.25rem; + } +} +.disc-images{ + margin-bottom: 0.75rem; +} +@media (min-width: 768px){ + + .disc-images{ + margin-bottom: 0px; + } +} +.disc-image{ + display: flex; + align-items: center; + justify-content: center; + position: relative; + width: 2.5rem; +} +@media (min-width: 1024px){ + + .disc-image{ + width: 3.5rem; + } +} +.disc-image{ + height: 2.5rem; +} +@media (min-width: 1024px){ + + .disc-image{ + height: 3.5rem; + } +} +.disc-image{ + margin-left: -0.5rem; + overflow: hidden; + border-radius: 9999px; + border-width: 2px; + --tw-border-opacity: 1; + border-color: rgb(255 255 255 / var(--tw-border-opacity)); + --tw-bg-opacity: 1; + background-color: rgb(223 228 233 / var(--tw-bg-opacity)); + font-family: FrutigerNeueLTPro-Bold, Hind, Fallback-font; + font-size: 1.125rem; + font-weight: 400; + --tw-text-opacity: 1; + color: rgb(172 180 189 / var(--tw-text-opacity)); +} +.disc-image img, .disc-image svg{ + height: 100%; + width: 100%; +} +/*----------------------------------------*\ + AVATAR +\*----------------------------------------*/ +/*----------------------------------------*\ + BACK TO TOP BTN +\*----------------------------------------*/ +@media screen and (prefers-reduced-motion: no-preference) { + html { + scroll-behavior: smooth; + } +} +.back-to-top-wrapper{ + position: absolute; + top: 80vh; + right: 0.75rem; + bottom: -3.5rem; + z-index: 500; + pointer-events: none; +} +@media (min-width: 1024px) { +.back-to-top-wrapper { + bottom: -4rem +} + } +@media (min-width: 1280px) { +.back-to-top-wrapper { + right: 1rem; + bottom: -5rem +} + } +.back-to-top-btn{ + height: 2.75rem; + width: 2.75rem; +} +@media (min-width: 1024px){ + + .back-to-top-btn{ + height: 3rem; + width: 3rem; + } +} +@media (min-width: 1280px){ + + .back-to-top-btn{ + height: 4rem; + width: 4rem; + } +} +.back-to-top-btn{ + display: inline-flex; + align-items: center; + justify-content: center; + border-radius: 0.125rem; + --tw-shadow: 0px 2px 6px -1px rgba(0,0,0,0.06), 0px 5px 20px -3px rgba(0,0,0,0.08); + --tw-shadow-colored: 0px 2px 6px -1px var(--tw-shadow-color), 0px 5px 20px -3px var(--tw-shadow-color); + box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow); +} +.back-to-top-btn:hover{ + --tw-shadow: 0px 6px 10px -5px rgba(0,0,0,0.06), 0px 15px 25px -3px rgba(0,0,0,0.09); + --tw-shadow-colored: 0px 6px 10px -5px var(--tw-shadow-color), 0px 15px 25px -3px var(--tw-shadow-color); + box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow); +} +.back-to-top-btn{ + -webkit-appearance: none; + -moz-appearance: none; + appearance: none; +} +.back-to-top-wrapper .back-to-top-btn { + position: fixed; /* fallback */ + position: -webkit-sticky; + position: sticky; + pointer-events: all; + top: calc(100vh - 3.5rem); + } +@media (min-width: 1024px) { +.back-to-top-wrapper .back-to-top-btn { + top: calc(100vh - 4.5rem) + } + } +@media (min-width: 1280px) { +.back-to-top-wrapper .back-to-top-btn { + top: calc(100vh - 5rem) + } + } +.back-to-top-btn__icon{ + height: 100%; + width: 50%; + stroke-width: 0.3px; + stroke: currentColor; +} +/* TYPES */ +.back-to-top-btn--default{ + --tw-bg-opacity: 1; + background-color: rgb(255 255 255 / var(--tw-bg-opacity)); +} +.back-to-top-btn--default .back-to-top-btn__icon{ + --tw-text-opacity: 1; + color: rgb(70 89 107 / var(--tw-text-opacity)); +} +.back-to-top-btn--default .back-to-top-btn__icon:hover{ + --tw-text-opacity: 1; + color: rgb(216 35 42 / var(--tw-text-opacity)); +} +.back-to-top-btn--negative{ + --tw-bg-opacity: 1; + background-color: rgb(70 89 107 / var(--tw-bg-opacity)); +} +.back-to-top-btn--negative:hover{ + --tw-bg-opacity: 1; + background-color: rgb(47 67 86 / var(--tw-bg-opacity)); +} +.back-to-top-btn--negative .back-to-top-btn__icon{ + --tw-text-opacity: 1; + color: rgb(255 255 255 / var(--tw-text-opacity)); +} +.back-to-top-btn--outline{ + --tw-bg-opacity: 1; + background-color: rgb(255 255 255 / var(--tw-bg-opacity)); + border-width: 1px; + --tw-border-opacity: 1; + border-color: rgb(216 35 42 / var(--tw-border-opacity)); +} +.back-to-top-btn--outline:hover{ + --tw-border-opacity: 1; + border-color: rgb(191 31 37 / var(--tw-border-opacity)); +} +.back-to-top-btn--outline .back-to-top-btn__icon{ + --tw-text-opacity: 1; + color: rgb(216 35 42 / var(--tw-text-opacity)); +} +.back-to-top-btn--outline .back-to-top-btn__icon:hover{ + --tw-text-opacity: 1; + color: rgb(191 31 37 / var(--tw-text-opacity)); +} +/*----------------------------------------*\ + BADGE +\*----------------------------------------*/ +.badge{ + display: inline-flex; + align-items: center; + padding-top: 0.2em; + padding-bottom: 0.2em; + padding-left: 1em; + padding-right: 1em; + border-radius: 9999px; +} +/* COLORS */ +.badge--gray{ + --tw-text-opacity: 1; + color: rgb(31 41 55 / var(--tw-text-opacity)); + --tw-bg-opacity: 1; + background-color: rgb(223 228 233 / var(--tw-bg-opacity)); +} +.badge--red, .badge--error{ + --tw-text-opacity: 1; + color: rgb(153 25 30 / var(--tw-text-opacity)); + --tw-bg-opacity: 1; + background-color: rgb(250 225 226 / var(--tw-bg-opacity)); +} +.badge--yellow{ + --tw-text-opacity: 1; + color: rgb(146 64 14 / var(--tw-text-opacity)); + --tw-bg-opacity: 1; + background-color: rgb(254 243 199 / var(--tw-bg-opacity)); +} +.badge--orange, .badge--warning{ + --tw-text-opacity: 1; + color: rgb(154 52 18 / var(--tw-text-opacity)); + --tw-bg-opacity: 1; + background-color: rgb(255 237 213 / var(--tw-bg-opacity)); +} +.badge--green, .badge--success{ + --tw-text-opacity: 1; + color: rgb(6 95 70 / var(--tw-text-opacity)); + --tw-bg-opacity: 1; + background-color: rgb(209 250 229 / var(--tw-bg-opacity)); +} +.badge--blue, .badge--info{ + --tw-text-opacity: 1; + color: rgb(30 64 175 / var(--tw-text-opacity)); + --tw-bg-opacity: 1; + background-color: rgb(219 234 254 / var(--tw-bg-opacity)); +} +.badge--indigo{ + --tw-text-opacity: 1; + color: rgb(55 48 163 / var(--tw-text-opacity)); + --tw-bg-opacity: 1; + background-color: rgb(224 231 255 / var(--tw-bg-opacity)); +} +.badge--purple{ + --tw-text-opacity: 1; + color: rgb(91 33 182 / var(--tw-text-opacity)); + --tw-bg-opacity: 1; + background-color: rgb(237 233 254 / var(--tw-bg-opacity)); +} +.badge--pink{ + --tw-text-opacity: 1; + color: rgb(157 23 77 / var(--tw-text-opacity)); + --tw-bg-opacity: 1; + background-color: rgb(252 231 243 / var(--tw-bg-opacity)); +} +/* SIZES */ +.badge, .badge--base{ + font-size: 0.75rem; +} +@media (min-width: 768px){ + + .badge, .badge--base{ + font-size: 0.875rem; + } +} +@media (min-width: 1024px){ + + .badge, .badge--base{ + font-size: 1rem; + } +} +.badge, .badge--base{ + line-height: 1.25rem; +} +@media (min-width: 1024px){ + + .badge, .badge--base{ + line-height: 1.5rem; + } +} +.badge--sm{ + font-size: 10px; +} +@media (min-width: 768px){ + + .badge--sm{ + font-size: 0.75rem; + } +} +@media (min-width: 1024px){ + + .badge--sm{ + font-size: 0.875rem; + } +} +.badge--sm{ + line-height: 1rem; +} +@media (min-width: 768px){ + + .badge--sm{ + line-height: 1.35rem; + } +} +/* ICON */ +.badge__icon{ + height: 100%; + width: 1.5em; + position: relative; + left: 0.4em; + stroke-width: 0.3px; +} +@media (min-width: 768px){ + + .badge__icon{ + stroke-width: 0.35px; + } +} +@media (min-width: 1024px){ + + .badge__icon{ + stroke-width: 0.4px; + } +} +.badge__icon{ + stroke: currentColor; +} +/*----------------------------------------*\ + BTN +\*----------------------------------------*/ +/* TYPES */ +.btn{ + display: inline-flex; + align-items: center; + padding-left: 1rem; + padding-right: 1rem; + line-height: 1.25; + -webkit-text-decoration-line: none; + text-decoration-line: none; /* override general styling for links in main */ border-radius: 0.125rem; +} +.btn:focus{ + outline: 2px solid transparent; + outline-offset: 2px; +} +.btn--outline{ + font-weight: 400; + --tw-text-opacity: 1; + color: rgb(216 35 42 / var(--tw-text-opacity)); + border-width: 1px; + --tw-border-opacity: 1; + border-color: rgb(216 35 42 / var(--tw-border-opacity)); +} +.btn--outline:hover{ + --tw-border-opacity: 1; + border-color: rgb(191 31 37 / var(--tw-border-opacity)); + --tw-text-opacity: 1; + color: rgb(191 31 37 / var(--tw-text-opacity)); +} +.btn--outline:focus{ + --tw-border-opacity: 1; + border-color: rgb(216 35 42 / var(--tw-border-opacity)); + --tw-text-opacity: 1; + color: rgb(216 35 42 / var(--tw-text-opacity)); +} +.btn--outline:disabled{ + --tw-text-opacity: 1; + color: rgb(130 142 154 / var(--tw-text-opacity)); + --tw-border-opacity: 1; + border-color: rgb(172 180 189 / var(--tw-border-opacity)); +} +.btn--bare{ + padding-left: 0.5rem; + padding-right: 0.5rem; + font-weight: 400; + --tw-text-opacity: 1; + color: rgb(28 40 52 / var(--tw-text-opacity)); +} +.btn--bare:hover{ + --tw-text-opacity: 1; + color: rgb(216 35 42 / var(--tw-text-opacity)); +} +.btn--bare:disabled{ + --tw-text-opacity: 1; + color: rgb(130 142 154 / var(--tw-text-opacity)); + background-color: transparent; +} +.btn--link{ + padding-right: 0.5rem; + padding-left: 0px; + font-weight: 400; + --tw-text-opacity: 1; + color: rgb(216 35 42 / var(--tw-text-opacity)); +} +.btn--link:hover{ + --tw-text-opacity: 1; + color: rgb(191 31 37 / var(--tw-text-opacity)); +} +.btn--link .btn__icon{ + width: 2rem; + stroke-width: 0; +} +@media (min-width: 768px){ + + .btn--link .btn__icon{ + stroke-width: 0.05px; + } +} +@media (min-width: 1024px){ + + .btn--link .btn__icon{ + stroke-width: 0.1px; + } +} +.btn--link .btn__icon{ + fill: currentColor; + stroke: currentColor; +} +.btn--link:disabled{ + --tw-text-opacity: 1; + color: rgb(130 142 154 / var(--tw-text-opacity)); + background-color: transparent; +} +.btn--link-negative{ + padding-right: 0.5rem; + padding-left: 0px; + font-weight: 400; + --tw-text-opacity: 1; + color: rgb(255 255 255 / var(--tw-text-opacity)); + -webkit-text-decoration-line: underline; + text-decoration-line: underline; + text-underline-offset: 2px; +} +.btn--link-negative:hover{ + --tw-text-opacity: 1; + color: rgb(223 228 233 / var(--tw-text-opacity)); +} +.btn--link-negative:focus{ + --tw-text-opacity: 1; + color: rgb(255 255 255 / var(--tw-text-opacity)); +} +.btn--link-negative .btn__icon{ + width: 2rem; + stroke-width: 0; +} +@media (min-width: 768px){ + + .btn--link-negative .btn__icon{ + stroke-width: 0.05px; + } +} +@media (min-width: 1024px){ + + .btn--link-negative .btn__icon{ + stroke-width: 0.1px; + } +} +.btn--link-negative .btn__icon{ + fill: currentColor; + stroke: currentColor; +} +.btn--link-negative:disabled{ + --tw-text-opacity: 1; + color: rgb(172 180 189 / var(--tw-text-opacity)); + background-color: transparent; +} +.btn--filled{ + font-family: FrutigerNeueLTPro-Bold, Hind, Fallback-font; + font-weight: 400; + --tw-text-opacity: 1; + color: rgb(255 255 255 / var(--tw-text-opacity)); + --tw-bg-opacity: 1; + background-color: rgb(89 105 120 / var(--tw-bg-opacity)); + border-width: 1px; + --tw-border-opacity: 1; + border-color: rgb(89 105 120 / var(--tw-border-opacity)); +} +.btn--filled:hover{ + --tw-text-opacity: 1; + color: rgb(223 228 233 / var(--tw-text-opacity)); +} +.btn--filled:focus{ + --tw-text-opacity: 1; + color: rgb(255 255 255 / var(--tw-text-opacity)); +} +.btn--filled:disabled{ + --tw-text-opacity: 1; + color: rgb(255 255 255 / var(--tw-text-opacity)); + --tw-bg-opacity: 1; + background-color: rgb(172 180 189 / var(--tw-bg-opacity)); + --tw-border-opacity: 1; + border-color: rgb(172 180 189 / var(--tw-border-opacity)); +} +.btn--outline-negative{ + font-family: FrutigerNeueLTPro-Bold, Hind, Fallback-font; + font-weight: 400; + --tw-text-opacity: 1; + color: rgb(255 255 255 / var(--tw-text-opacity)); + --tw-bg-opacity: 1; + background-color: rgb(70 89 107 / var(--tw-bg-opacity)); + border-width: 1px; + --tw-border-opacity: 1; + border-color: rgb(255 255 255 / var(--tw-border-opacity)); +} +.btn--outline-negative:hover{ + --tw-border-opacity: 1; + border-color: rgb(223 228 233 / var(--tw-border-opacity)); + --tw-text-opacity: 1; + color: rgb(223 228 233 / var(--tw-text-opacity)); +} +.btn--outline-negative:focus{ + --tw-border-opacity: 1; + border-color: rgb(255 255 255 / var(--tw-border-opacity)); + --tw-text-opacity: 1; + color: rgb(255 255 255 / var(--tw-text-opacity)); +} +.btn--outline-negative:disabled{ + --tw-text-opacity: 1; + color: rgb(172 180 189 / var(--tw-text-opacity)); + --tw-border-opacity: 1; + border-color: rgb(130 142 154 / var(--tw-border-opacity)); + background-color: transparent; +} +.btn--bare-negative{ + --tw-text-opacity: 1; + color: rgb(255 255 255 / var(--tw-text-opacity)); +} +.btn--bare-negative:hover{ + --tw-text-opacity: 1; + color: rgb(223 228 233 / var(--tw-text-opacity)); +} +.btn--bare-negative:focus{ + --tw-text-opacity: 1; + color: rgb(255 255 255 / var(--tw-text-opacity)); +} +.btn--bare-negative:disabled{ + --tw-text-opacity: 1; + color: rgb(172 180 189 / var(--tw-text-opacity)); +} +/* SIZES */ +.btn, .btn--base{ + min-height: 44px; +} +@media (min-width: 1280px){ + + .btn, .btn--base{ + min-height: 48px; + } +} +@media (min-width: 1800px){ + + .btn, .btn--base{ + min-height: 52px; + } +} +.btn, .btn--base{ + font-size: 1rem; +} +@media (min-width: 1280px){ + + .btn, .btn--base{ + font-size: 1.125rem; + } +} +@media (min-width: 1800px){ + + .btn, .btn--base{ + font-size: 1.25rem; + } +} +.btn, .btn--base{ + line-height: 1.25rem; +} +@media (min-width: 1024px){ + + .btn, .btn--base{ + line-height: 1.5rem; + } +} +.btn--sm{ + min-height: 34px; +} +@media (min-width: 1280px){ + + .btn--sm{ + min-height: 40px; + } +} +@media (min-width: 1800px){ + + .btn--sm{ + min-height: 44px; + } +} +.btn--sm{ + font-size: 0.875rem; +} +@media (min-width: 1280px){ + + .btn--sm{ + font-size: 1rem; + } +} +@media (min-width: 1800px){ + + .btn--sm{ + font-size: 1.125rem; + } +} +.btn--sm{ + line-height: 1rem; +} +@media (min-width: 1024px){ + + .btn--sm{ + line-height: 1.25rem; + } +} +.btn--lg{ + min-height: 48px; +} +@media (min-width: 1280px){ + + .btn--lg{ + min-height: 52px; + } +} +@media (min-width: 1800px){ + + .btn--lg{ + min-height: 56px; + } +} +.btn--lg{ + font-size: 1.125rem; +} +@media (min-width: 1280px){ + + .btn--lg{ + font-size: 1.25rem; + } +} +@media (min-width: 1800px){ + + .btn--lg{ + font-size: 1.375rem; + } +} +.btn--lg{ + line-height: 1.5rem; +} +/* TEXT */ +.btn__text{ + padding-top: 0.5rem; + padding-bottom: 0.5rem; + text-align: left; +} +/* ICONS */ +.btn__icon{ + height: 100%; + width: 1.4em; + stroke-width: 0.3px; +} +@media (min-width: 768px){ + + .btn__icon{ + stroke-width: 0.35px; + } +} +@media (min-width: 1024px){ + + .btn__icon{ + stroke-width: 0.4px; + } +} +.btn__icon{ + stroke: currentColor; + transition-property: transform; + transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1); + transition-duration: 200ms; +} +.btn--icon-none .btn__icon{ + display: none; +} +.desktop-menu__drawer.btn--icon-none .btn__icon { + display: block; + height: 0; + overflow: hidden; + padding: 0px; + opacity: 0; + transition: opacity 300ms, height 1ms 300ms, padding 1ms 300ms; + } +.desktop-menu__drawer.btn--icon-none .btn__icon > *{ + --tw-translate-y: -2rem; + transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y)); + transition-property: transform; + transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1); + transition-duration: 300ms; +} +.desktop-menu__overlay.btn--icon-none .btn__icon { + display: block; + height: 0; + overflow: hidden; + padding: 0px; + opacity: 0; + transition: opacity 300ms, height 1ms 300ms; + } +.btn--icon-only{ + padding-left: 0.625em; + padding-right: 0.625em; +} +.btn--icon-only .btn__text{ + position: absolute; + width: 1px; + height: 1px; + padding: 0; + margin: -1px; + overflow: hidden; + clip: rect(0, 0, 0, 0); + white-space: nowrap; + border-width: 0; +} +.btn--icon-left .btn__icon{ + position: relative; + right: 0.1em; + margin-right: 0.2em; +} +.btn--icon-right { + flex-direction: row-reverse; +} +.btn--icon-right .btn__icon{ + position: relative; + left: 0.1em; + margin-left: 0.2em; +} +.btn--icon-180 .btn__icon{ + --tw-rotate: 180deg; + transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y)); +} +.btn--back{ + float: left; + margin-top: 0.4em; +} +@media (min-width: 1024px){ + + .btn--back{ + margin-top: 0.25rem; + } +} +/*----------------------------------------*\ + TAG ITEM +\*----------------------------------------*/ +/* TYPES */ +.tag-item{ + display: inline-flex; + align-items: center; + margin-right: 0.75rem; +} +@media (min-width: 768px){ + + .tag-item{ + margin-bottom: 0.125rem; + } +} +@media (min-width: 1024px){ + + .tag-item{ + margin-bottom: 0.25rem; + } +} +.tag-item{ + -webkit-text-decoration-line: none; + text-decoration-line: none; + --tw-ring-offset-shadow: var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color); + --tw-ring-shadow: var(--tw-ring-inset) 0 0 0 calc(0px + var(--tw-ring-offset-width)) var(--tw-ring-color); + box-shadow: var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow, 0 0 #0000); +} +.tag-item:focus{ + outline: 2px solid transparent; + outline-offset: 2px; +} +.tag-item, .tag-item:hover{ + color: inherit; /* override general styling for links in main */ +} +.tag-item:focus .tag-item__inner{ + outline: 2px solid transparent; + outline-offset: 2px; + --tw-ring-offset-shadow: var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color); + --tw-ring-shadow: var(--tw-ring-inset) 0 0 0 calc(2px + var(--tw-ring-offset-width)) var(--tw-ring-color); + box-shadow: var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow, 0 0 #0000); + --tw-ring-opacity: 1; + --tw-ring-color: rgb(134 85 246 / var(--tw-ring-opacity)); +} +.tag-item__inner{ + display: inline-flex; + align-items: center; + padding-left: 1rem; + padding-right: 1rem; +} +@media (min-width: 1536px){ + + .tag-item__inner{ + padding-left: 1.25rem; + padding-right: 1.25rem; + } +} +.tag-item__inner{ + line-height: 1.25; + border-radius: 9999px; +} +.tag-item__text{ + display: inline-block; + padding-top: 0.375rem; + padding-bottom: 0.375rem; +} +@media (min-width: 1280px){ + + .tag-item__text{ + padding-top: 0.5rem; + padding-bottom: 0.5rem; + } +} +.tag-item__text{ + text-align: left; +} +/* SIZES */ +.tag-item, .tag-item--base{ + min-height: 44px; +} +@media (min-width: 1280px){ + + .tag-item, .tag-item--base{ + min-height: 48px; + } +} +@media (min-width: 1800px){ + + .tag-item, .tag-item--base{ + min-height: 52px; + } +} +.tag-item, .tag-item--base{ + font-size: 1rem; +} +@media (min-width: 1280px){ + + .tag-item, .tag-item--base{ + font-size: 1.125rem; + } +} +@media (min-width: 1800px){ + + .tag-item, .tag-item--base{ + font-size: 1.25rem; + } +} +.tag-item, .tag-item--base{ + line-height: 1.25rem; +} +@media (min-width: 1024px){ + + .tag-item, .tag-item--base{ + line-height: 1.5rem; + } +} +.tag-item--sm{ + font-size: 0.875rem; +} +@media (min-width: 1280px){ + + .tag-item--sm{ + font-size: 1rem; + } +} +@media (min-width: 1800px){ + + .tag-item--sm{ + font-size: 1.125rem; + } +} +/* TYPES */ +.tag-item .tag-item__inner, .tag-item--default .tag-item__inner{ + --tw-bg-opacity: 1; + background-color: rgb(229 231 235 / var(--tw-bg-opacity)); +} +.tag-item:hover .tag-item__inner, .tag-item--default:hover .tag-item__inner{ + --tw-bg-opacity: 1; + background-color: rgb(209 213 219 / var(--tw-bg-opacity)); +} +.tag-item--active{ + pointer-events: none; +} +.tag-item--active .tag-item__inner{ + --tw-bg-opacity: 1; + background-color: rgb(31 41 55 / var(--tw-bg-opacity)); + --tw-text-opacity: 1; + color: rgb(255 255 255 / var(--tw-text-opacity)); +} +.tag-item--primary .tag-item__inner{ + --tw-bg-opacity: 1; + background-color: rgb(31 41 55 / var(--tw-bg-opacity)); + --tw-text-opacity: 1; + color: rgb(255 255 255 / var(--tw-text-opacity)); +} +.tag-item--primary:hover .tag-item__inner{ + --tw-bg-opacity: 1; + background-color: rgb(0 0 0 / var(--tw-bg-opacity)); +} +/* ICON */ +.tag-item__icon{ + height: 100%; + width: 1.5em; + position: relative; + left: 0.4em; + stroke-width: 0.3px; +} +@media (min-width: 768px){ + + .tag-item__icon{ + stroke-width: 0.35px; + } +} +@media (min-width: 1024px){ + + .tag-item__icon{ + stroke-width: 0.4px; + } +} +.tag-item__icon{ + stroke: currentColor; +} +/*----------------------------------------*\ + BURGER +\*----------------------------------------*/ +.burger{ + display: flex; + height: 100%; + align-items: center; +} +@media (min-width: 1024px){ + + .burger{ + display: none; + } +} +.burger{ + margin-right: -1rem; + padding-left: 1rem; + padding-right: 1rem; +} +.burger__icon{ + position: relative; + display: block; + height: 1.25rem; + width: 1.75rem; + --tw-text-opacity: 1; + color: rgb(107 114 128 / var(--tw-text-opacity)); + transition-property: color, background-color, border-color, fill, stroke, -webkit-text-decoration-color; + transition-property: color, background-color, border-color, text-decoration-color, fill, stroke; + transition-property: color, background-color, border-color, text-decoration-color, fill, stroke, -webkit-text-decoration-color; + transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1); + transition-duration: 150ms; +} +.burger__icon:hover{ + --tw-text-opacity: 1; + color: rgb(216 35 42 / var(--tw-text-opacity)); +} +.burger__bar{ + display: block; + height: 100%; + width: 100%; + position: absolute; + transition-property: transform; + transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1); + transition-duration: 150ms; + color: inherit; +} +.burger__bar::after { + content: ''; + position: absolute; + display: block; + height: 2px; + width: 100%; + transition-property: transform; + transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1); + transition-duration: 150ms; + transition-delay: 150ms; + border-color: currentColor; + } +.burger__bar:nth-of-type(1)::after{ + top: -1px; + transform-origin: top; + border-top-width: 2px; +} +.body--mobile-menu-is-open .burger__bar:nth-of-type(1), + .burger--is-open .burger__bar:nth-of-type(1) { + transform: translateY(50%); + } +.body--mobile-menu-is-open .burger__bar:nth-of-type(1)::after, .burger--is-open .burger__bar:nth-of-type(1)::after { + transform: rotate(45deg) + } +.burger__bar:nth-of-type(2){ + top: 50%; + height: 2px; + background-color: currentColor; + transform: translateY(-50%); +} +.body--mobile-menu-is-open .burger__bar:nth-of-type(2), + .burger--is-open .burger__bar:nth-of-type(2) { + transform: scaleX(0) + } +.burger__bar:nth-of-type(3)::after{ + bottom: -1px; + transform-origin: bottom; + border-bottom-width: 2px; +} +.body--mobile-menu-is-open .burger__bar:nth-of-type(3), + .burger--is-open .burger__bar:nth-of-type(3) { + transform: translateY(-50%); + } +.body--mobile-menu-is-open .burger__bar:nth-of-type(3)::after, .burger--is-open .burger__bar:nth-of-type(3)::after { + transform: rotate(-45deg) + } +/*----------------------------------------*\ + CARD +\*----------------------------------------*/ +.card{ + display: flex; + height: 100%; + flex-direction: column; + --tw-bg-opacity: 1; + background-color: rgb(255 255 255 / var(--tw-bg-opacity)); +} +.card--default{ + --tw-shadow: 0px 2px 6px -1px rgba(0,0,0,0.06), 0px 5px 20px -3px rgba(0,0,0,0.08); + --tw-shadow-colored: 0px 2px 6px -1px var(--tw-shadow-color), 0px 5px 20px -3px var(--tw-shadow-color); + box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow); +} +.card--clickable{ + position: relative; + transition-property: box-shadow; + transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1); + transition-duration: 300ms; + cursor: pointer; +} +.card--clickable a::after, + .card--clickable button::after { + content: ''; + position: absolute; + top: 0px; + right: 0px; + left: 0px; + bottom: 0px; + } +.card--clickable:hover, .card--clickable:focus-within{ + --tw-shadow: 0px 10px 20px 0px rgba(0,0,0,0.06), 1px 10px 70px -8px rgba(0,0,0,0.13); + --tw-shadow-colored: 0px 10px 20px 0px var(--tw-shadow-color), 1px 10px 70px -8px var(--tw-shadow-color); + box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow); +} +.card--clickable:hover .card__title, .card--clickable:focus-within .card__title{ + --tw-text-opacity: 1; + color: rgb(191 31 37 / var(--tw-text-opacity)); +} +.card--highlight{ + position: relative; + background-color: transparent; + padding-left: 1.25rem; + padding-top: 1.25rem; +} +@media (min-width: 1024px){ + + .card--highlight{ + padding-left: 1.75rem; + padding-top: 1.75rem; + } +} +.card--highlight{ + transition-property: transform; + transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1); + transition-duration: 300ms; +} +.card--highlight::before { + content: ''; + position: absolute; + top: 0px; + right: 1.25rem; + left: 0px; + bottom: 1.25rem; + z-index: 0; + } +@media (min-width: 1024px){ + + .card--highlight::before{ + right: 1.75rem; + bottom: 1.75rem; + } +} +.card--highlight::before{ + --tw-bg-opacity: 1; + background-color: rgb(130 142 154 / var(--tw-bg-opacity)); + transition-property: transform; + transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1); + transition-duration: 300ms; +} +.card--highlight:hover, .card--highlight:focus-within{ + background-color: transparent; + --tw-shadow: 0px 0px 0px 0px rgba(0,0,0,0); + --tw-shadow-colored: 0px 0px 0px 0px var(--tw-shadow-color); + box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow); +} +.card--highlight:hover::before, .card--highlight:focus-within::before{ + --tw-scale-x: 1.02; + --tw-scale-y: 1.02; + transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y)); +} +.card--highlight .card__content{ + gap: 1.25rem; +} +.card--highlight .card__body{ + padding-top: 2rem; + padding-bottom: 0px; +} +.card--twitter{ + --tw-shadow: 0px 2px 6px -1px rgba(0,0,0,0.06), 0px 5px 20px -3px rgba(0,0,0,0.08); + --tw-shadow-colored: 0px 2px 6px -1px var(--tw-shadow-color), 0px 5px 20px -3px var(--tw-shadow-color); + box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow); +} +.card--twitter .card__body{ + padding: 0.75rem; + max-height: 700px; + overflow-y: scroll; +} +.card--twitter .card__footer{ + padding-top: 1.5rem; +} +.card--flat.card--clickable:hover, .card--flat.card--clickable:focus-within{ + background-color: transparent; + --tw-shadow: 0px 0px 0px 0px rgba(0,0,0,0); + --tw-shadow-colored: 0px 0px 0px 0px var(--tw-shadow-color); + box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow); +} +.card--flat{ + padding-top: 1rem; + padding-bottom: 1rem; +} +@media (min-width: 1024px){ + + .card--flat{ + padding-top: 1.5rem; + padding-bottom: 1.5rem; + } +} +@media (min-width: 1536px){ + + .card--flat{ + padding-top: 2rem; + padding-bottom: 2rem; + } +} +.card--flat{ + background-color: transparent; + border-bottom-width: 1px; + --tw-border-opacity: 1; + border-color: rgb(172 180 189 / var(--tw-border-opacity)); +} +/* card--flat is extended for .search-result items */ +.card--flat .card__content{ + background-color: transparent; +} +/* therefore, specific definitions for card--flat children are not nested: */ +.card--flat .card__body{ + padding-left: 0px; + padding-right: 0px; + max-height: none; +} +.card--flat .card__content:first-of-type .card__body{ + padding-top: 0px; + padding-bottom: 0px; +} +.card--flat .card__footer{ + padding: 0px; +} +.accordion .accordion__drawer .card--flat{ + margin-top: 0px; +} +.accordion .accordion__drawer .card--flat:last-of-type{ + margin-bottom: 1rem; + border-bottom-width: 0px; +} +.card__image{ + position: relative; + padding-bottom: 56.25%; /* 16/9 ratio */ overflow: hidden; +} +.grid--responsive-cols-2 .card__image{ + position: relative; + padding-bottom: 50%; /* 2/1 ratio */ +} +.card__image:before { + content: ""; + position: absolute; + z-index: 0; + top: 0px; + right: 0px; + bottom: 0px; + left: 0px; + border-width: 2px; + --tw-border-opacity: 1; + border-color: rgb(255 255 255 / var(--tw-border-opacity)); + --tw-bg-opacity: 1; + background-color: rgb(240 244 247 / var(--tw-bg-opacity)); + opacity: 0.7; + } +.card__image img{ + position: absolute; + height: 100%; + width: 100%; + -o-object-fit: cover; + object-fit: cover; +} +.card__image svg{ + position: absolute; + z-index: 10; + top: 50%; + left: 50%; + --tw-translate-x: -50%; + --tw-translate-y: -50%; + transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y)); + height: 50%; + width: 50%; +} +.card__header{ + display: flex; + align-items: center; + padding: 1.5rem; + --tw-bg-opacity: 1; + background-color: rgb(223 228 233 / var(--tw-bg-opacity)); +} +.card__content{ + display: flex; + flex-direction: column; + justify-content: space-between; + height: 100%; + z-index: 10; + --tw-bg-opacity: 1; + background-color: rgb(255 255 255 / var(--tw-bg-opacity)); +} +.card__body{ + padding-left: 1.5rem; + padding-right: 1.5rem; + padding-top: 2.5rem; + padding-bottom: 2.5rem; +} +.card__body > :not([hidden]) ~ :not([hidden]){ + --tw-space-y-reverse: 0; + margin-top: calc(1rem * calc(1 - var(--tw-space-y-reverse))); + margin-bottom: calc(1rem * var(--tw-space-y-reverse)); +} +.card__newline{ + white-space: break-spaces; +} +.card__title{ + font-size: 1.125rem; +} +@media (min-width: 1280px){ + + .card__title{ + font-size: 1.25rem; + } +} +@media (min-width: 1800px){ + + .card__title{ + font-size: 1.375rem; + } +} +.card__title{ + font-family: FrutigerNeueLTPro-Bold, Hind, Fallback-font; + font-weight: 400; + line-height: 1.375; + transition-property: color, background-color, border-color, fill, stroke, -webkit-text-decoration-color; + transition-property: color, background-color, border-color, text-decoration-color, fill, stroke; + transition-property: color, background-color, border-color, text-decoration-color, fill, stroke, -webkit-text-decoration-color; + transition-duration: 200ms; + transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1); +} +.card__content-icons{ + position: relative; + display: flex; + margin-left: -0.25rem; +} +.card__content-icons svg{ + margin-right: 0.5rem; +} +.card__footer{ + display: flex; + align-items: center; + justify-content: space-between; + padding-left: 1.5rem; + padding-right: 1.5rem; + padding-bottom: 1.5rem; +} +.card__footer--icon-only{ + justify-content: flex-end; +} +.card__footer__info{ + --tw-text-opacity: 1; + color: rgb(70 89 107 / var(--tw-text-opacity)); + font-size: 0.875rem; +} +@media (min-width: 1280px){ + + .card__footer__info{ + font-size: 1rem; + } +} +@media (min-width: 1800px){ + + .card__footer__info{ + font-size: 1.125rem; + } +} +.card__footer__info{ + padding-right: 1.5rem; +} +.card__footer__action {} +.card--twitter iframe{ + position: relative !important; /* override default twitter inline-style */ z-index: 50; +} +@media (min-width: 768px) { +.card--image-left{ + display: grid; + } +@media (min-width: 768px) { +.card--image-left { + grid-template-columns: repeat(12, minmax(0, 1fr)); + grid-template-areas: "A A A A A A B B B B B B" +} + } +@media (min-width: 1024px) { +.card--image-left { + grid-template-areas: "A A A A B B B B B B B B" +} + } +@media (min-width: 1280px) { +.card--image-left.container__center--md, .container__center--md .card--image-left { + grid-template-columns: repeat(10, minmax(0, 1fr)); + grid-template-areas: "A A A B B B B B B B" + } + } +@media (min-width: 768px) { +.card--image-left { + grid-template-columns: repeat(12, minmax(0, 1fr)); + grid-template-areas: "A A A A A A B B B B B B" +} + } +@media (min-width: 1024px) { +.card--image-left { + grid-template-areas: "A A A A A A A A B B B B" +} + } +@media (min-width: 1280px) { +.card--image-left.container__center--md, .container__center--md .card--image-left { + grid-template-columns: repeat(10, minmax(0, 1fr)); + grid-template-areas: "A A A A A A A B B B" + } + } +@media (min-width: 768px) { + + .card--image-left > *:nth-child(1) { grid-area: A; } + .card--image-left > *:nth-child(2) { grid-area: B; } + .card--image-left.grid--reverse > *:nth-child(1) { grid-area: B; } + .card--image-left.grid--reverse > *:nth-child(2) { grid-area: A; } + } +@media print { + + .card--image-left { + display: block; /* needed so that content in grid don't break the break-inside rule */ + } +} +.card--image-left{ + gap: 1.25rem; + } +@media (min-width: 480px){ + + .card--image-left{ + gap: 1.75rem; + } + } +@media (min-width: 640px){ + + .card--image-left{ + gap: 2.25rem; + } + } +@media (min-width: 1024px){ + + .card--image-left{ + gap: 2.5rem; + } + } +@media (min-width: 1280px){ + + .card--image-left{ + gap: 3rem; + } + } +@media (min-width: 1800px){ + + .card--image-left{ + gap: 4rem; + } + } +.card--image-left { /* default Tailwind value */ } +.card--image-left + .grid{ + margin-top: 1.25rem; + } +@media (min-width: 480px){ + + .card--image-left + .grid{ + margin-top: 1.75rem; + } + } +@media (min-width: 640px){ + + .card--image-left + .grid{ + margin-top: 2.25rem; + } + } +@media (min-width: 1024px){ + + .card--image-left + .grid{ + margin-top: 2.5rem; + } + } +@media (min-width: 1280px){ + + .card--image-left + .grid{ + margin-top: 3rem; + } + } +@media (min-width: 1800px){ + + .card--image-left + .grid{ + margin-top: 4rem; + } + } +.card--image-left + .section__subtitle{ + padding-top: 3rem; + } +@media (min-width: 1024px){ + + .card--image-left + .section__subtitle{ + padding-top: 4rem; + } + } +@media (min-width: 1800px){ + + .card--image-left + .section__subtitle{ + padding-top: 5rem; + } + } +.storybook-demo-ratio .card--image-left > div > div > *{ + padding: 1.5rem; + text-align: center; + font-size: 1.25rem; + --tw-text-opacity: 1; + color: rgb(76 29 149 / var(--tw-text-opacity)); + --tw-bg-opacity: 1; + background-color: rgb(245 243 255 / var(--tw-bg-opacity)); + border-width: 1px; + border-style: dashed; + --tw-border-opacity: 1; + border-color: rgb(124 58 237 / var(--tw-border-opacity)); + } + + .card--image-left .card__body, .card--image-left .card__footer{ + padding-left: 0px; + } + + .card--image-left .card__content{ + margin-left: -0.75rem; + } + } +@media (min-width: 1024px){ + + .card--image-left .card__content{ + margin-left: -1.25rem; + } +} +@media (min-width: 1280px){ + + .card--image-left .card__content{ + margin-left: -1.5rem; + } +} +@media (min-width: 1800px){ + + .card--image-left .card__content{ + margin-left: -2rem; + } +} +@media (min-width: 768px){ + + .card--image-left .card__title{ + font-size: 1.25rem; + } +} +@media (min-width: 1280px){ + + .card--image-left .card__title{ + font-size: 1.375rem; + } +} +@media (min-width: 1800px){ + + .card--image-left .card__title{ + font-size: 1.625rem; + } +} +@media (min-width: 768px) { +.card--image-right{ + display: grid; + } +@media (min-width: 768px) { +.card--image-right { + grid-template-columns: repeat(12, minmax(0, 1fr)); + grid-template-areas: "A A A A A A B B B B B B" +} + } +@media (min-width: 1024px) { +.card--image-right { + grid-template-areas: "A A A A B B B B B B B B" +} + } +@media (min-width: 1280px) { +.card--image-right.container__center--md, .container__center--md .card--image-right { + grid-template-columns: repeat(10, minmax(0, 1fr)); + grid-template-areas: "A A A B B B B B B B" + } + } +@media (min-width: 768px) { + .card--image-right > *:nth-child(1) { order: 4; grid-area: A; } + .card--image-right > *:nth-child(2) { order: 3; grid-area: B; } + .card--image-right > *:nth-child(3) { order: 2; } + .card--image-right.grid--reverse > *:nth-child(1) { grid-area: B; } + .card--image-right > *:nth-child(4) { order: 1; } + .grid--responsive-cols-1\/4-3\/4.card--image-right > *:nth-child(1) { grid-area: B; } + .grid--responsive-cols-3\/4-1\/4.card--image-right > *:nth-child(1) { grid-area: B; } + .grid--responsive-cols-1\/3-2\/3.card--image-right > *:nth-child(1), .grid--responsive-cols-2\/3-1\/3.card--image-right > *:nth-child(1) { grid-area: B; } + .grid--responsive-cols-2\/3-1\/3.card--image-right > *:nth-child(1) { grid-area: B; } + .card--image-right.grid--reverse > *:nth-child(2) { grid-area: A; } + .grid--responsive-cols-1\/4-3\/4.card--image-right > *:nth-child(2) { grid-area: A; } + .grid--responsive-cols-3\/4-1\/4.card--image-right > *:nth-child(2) { grid-area: A; } + .grid--responsive-cols-1\/3-2\/3.card--image-right > *:nth-child(2), .grid--responsive-cols-2\/3-1\/3.card--image-right > *:nth-child(2) { grid-area: A; } + .grid--responsive-cols-2\/3-1\/3.card--image-right > *:nth-child(2) { grid-area: A; } + } +@media print { + + .card--image-right { + display: block; /* needed so that content in grid don't break the break-inside rule */ + } +} +.card--image-right{ + gap: 1.25rem; + } +@media (min-width: 480px){ + + .card--image-right{ + gap: 1.75rem; + } + } +@media (min-width: 640px){ + + .card--image-right{ + gap: 2.25rem; + } + } +@media (min-width: 1024px){ + + .card--image-right{ + gap: 2.5rem; + } + } +@media (min-width: 1280px){ + + .card--image-right{ + gap: 3rem; + } + } +@media (min-width: 1800px){ + + .card--image-right{ + gap: 4rem; + } + } +.card--image-right { /* default Tailwind value */ } +.card--image-right + .grid{ + margin-top: 1.25rem; + } +@media (min-width: 480px){ + + .card--image-right + .grid{ + margin-top: 1.75rem; + } + } +@media (min-width: 640px){ + + .card--image-right + .grid{ + margin-top: 2.25rem; + } + } +@media (min-width: 1024px){ + + .card--image-right + .grid{ + margin-top: 2.5rem; + } + } +@media (min-width: 1280px){ + + .card--image-right + .grid{ + margin-top: 3rem; + } + } +@media (min-width: 1800px){ + + .card--image-right + .grid{ + margin-top: 4rem; + } + } +.card--image-right + .section__subtitle{ + padding-top: 3rem; + } +@media (min-width: 1024px){ + + .card--image-right + .section__subtitle{ + padding-top: 4rem; + } + } +@media (min-width: 1800px){ + + .card--image-right + .section__subtitle{ + padding-top: 5rem; + } + } +.storybook-demo-ratio .card--image-right > div > div > *{ + padding: 1.5rem; + text-align: center; + font-size: 1.25rem; + --tw-text-opacity: 1; + color: rgb(76 29 149 / var(--tw-text-opacity)); + --tw-bg-opacity: 1; + background-color: rgb(245 243 255 / var(--tw-bg-opacity)); + border-width: 1px; + border-style: dashed; + --tw-border-opacity: 1; + border-color: rgb(124 58 237 / var(--tw-border-opacity)); + } + + .card--image-right .card__content { + grid-area: A; + } + + .card--image-right .card__image { + grid-area: B; + } + + .card--image-right .card__body, .card--image-right .card__footer{ + padding-right: 0px; + } +.card--image-left.card--flat, .card--image-right.card--flat{ + border-style: none; + } + + .card--image-left.card--flat .card__body, .card--image-right.card--flat .card__body{ + padding-top: 0px; + } + } +.card--universal{ + --tw-shadow: 0px 2px 6px -1px rgba(0,0,0,0.06), 0px 5px 20px -3px rgba(0,0,0,0.08); + --tw-shadow-colored: 0px 2px 6px -1px var(--tw-shadow-color), 0px 5px 20px -3px var(--tw-shadow-color); + box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow); +} +.card--universal .card__image{ + border-top-width: 0.5em; + border-bottom-width: 0.5em; + border-color: transparent; +} +.card--universal .card__image:before{ + border-width: 0px; +} +.card--universal .card__image img{ + -o-object-fit: contain; + object-fit: contain; +} +@media (min-width: 768px) { +.card--image-left.card--list, .card--image-right.card--list{ + border-style: none; + } + + .card--image-left.card--list .card__body, .card--image-right.card--list .card__body{ + padding-top: 0px; + } + } +.card--list.card--clickable:hover, .card--list.card--clickable:focus-within{ + background-color: transparent; + --tw-shadow: 0px 0px 0px 0px rgba(0,0,0,0); + --tw-shadow-colored: 0px 0px 0px 0px var(--tw-shadow-color); + box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow); +} +.card--list{ + padding-top: 1rem; + padding-bottom: 1rem; +} +@media (min-width: 1024px){ + + .card--list{ + padding-top: 1.5rem; + padding-bottom: 1.5rem; + } +} +@media (min-width: 1536px){ + + .card--list{ + padding-top: 2rem; + padding-bottom: 2rem; + } +} +.card--list{ + background-color: transparent; + border-bottom-width: 1px; + --tw-border-opacity: 1; + border-color: rgb(172 180 189 / var(--tw-border-opacity)); +} +.card--list .card__content{ + background-color: transparent; +} +.card--list .card__body{ + padding-left: 0px; + padding-right: 0px; + max-height: none; +} +.card--list .card__content:first-of-type .card__body{ + padding-top: 0px; + padding-bottom: 0px; +} +.card--list .card__footer{ + padding: 0px; +} +.accordion .accordion__drawer .card--list{ + margin-top: 0px; +} +.accordion .accordion__drawer .card--list:last-of-type{ + margin-bottom: 1rem; + border-bottom-width: 0px; +} +.card--list, .card--list:hover{ + color: inherit; + -webkit-text-decoration-line: none; + text-decoration-line: none; /* override general styling for links in main */ +} +@media (min-width: 640px) { +.card--list{ + display: grid; + -moz-column-gap: 1.5rem; + column-gap: 1.5rem; + } +@media print { + + .card--list { + display: block; /* needed so that content in grid don't break the break-inside rule */ + } +} +.card--list { /* default Tailwind value */ } +.card--list + .grid{ + margin-top: 1.25rem; + } +@media (min-width: 480px){ + + .card--list + .grid{ + margin-top: 1.75rem; + } + } +@media (min-width: 640px){ + + .card--list + .grid{ + margin-top: 2.25rem; + } + } +@media (min-width: 1024px){ + + .card--list + .grid{ + margin-top: 2.5rem; + } + } +@media (min-width: 1280px){ + + .card--list + .grid{ + margin-top: 3rem; + } + } +@media (min-width: 1800px){ + + .card--list + .grid{ + margin-top: 4rem; + } + } +.card--list + .section__subtitle{ + padding-top: 3rem; + } +@media (min-width: 1024px){ + + .card--list + .section__subtitle{ + padding-top: 4rem; + } + } +@media (min-width: 1800px){ + + .card--list + .section__subtitle{ + padding-top: 5rem; + } + } +.storybook-demo-ratio .card--list > div > div > *{ + padding: 1.5rem; + text-align: center; + font-size: 1.25rem; + --tw-text-opacity: 1; + color: rgb(76 29 149 / var(--tw-text-opacity)); + --tw-bg-opacity: 1; + background-color: rgb(245 243 255 / var(--tw-bg-opacity)); + border-width: 1px; + border-style: dashed; + --tw-border-opacity: 1; + border-color: rgb(124 58 237 / var(--tw-border-opacity)); + } +.card--list { + grid-template-columns: 4fr 1fr +} + } +.card--list .card__image { + grid-column: 2 / 3; + grid-row: 1; + align-self: initial; + display: none; + height: 0px; + } +.desktop-menu__drawer.card--list .card__image { + display: block; + height: 0; + overflow: hidden; + padding: 0px; + opacity: 0; + transition: opacity 300ms, height 1ms 300ms, padding 1ms 300ms; + } +.desktop-menu__drawer.card--list .card__image > *{ + --tw-translate-y: -2rem; + transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y)); + transition-property: transform; + transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1); + transition-duration: 300ms; +} +.desktop-menu__overlay.card--list .card__image { + display: block; + height: 0; + overflow: hidden; + padding: 0px; + opacity: 0; + transition: opacity 300ms, height 1ms 300ms; + } +@media (min-width: 768px){ + + .card--list .card__image{ + display: block; + } +} +.card--list .card__image{ + padding-bottom: 80%; /* visually reduce height of potential vertical images */ border-top-width: 0.5em; border-bottom-width: 0.5em; border-color: transparent; +} +.card--list .card__image:before{ + border-width: 0px; + background-color: transparent; +} +.card--list .card__image img{ + -o-object-fit: contain; + object-fit: contain; + -o-object-position: right top; + object-position: right top; +} +.card--list .card__content { + grid-column: 1 / 2; + grid-row: 1; + align-self: start; + } +.card--list .card__body{ + padding-top: 0px; + padding-bottom: 1rem; + max-width: 800px; +} +.card--list .card__footer__action{ + margin-top: -2rem; +} +.card--list .btn{ + height: 0px; + min-height: 0px; + border-width: 0px; +} +.card--list .btn:focus-visible{ + --tw-ring-offset-shadow: var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color); + --tw-ring-shadow: var(--tw-ring-inset) 0 0 0 calc(0px + var(--tw-ring-offset-width)) var(--tw-ring-color); + box-shadow: var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow, 0 0 #0000); + --tw-ring-color: transparent; +} +.card--list .btn:focus-visible::after{ + --tw-ring-offset-shadow: var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color); + --tw-ring-shadow: var(--tw-ring-inset) 0 0 0 calc(2px + var(--tw-ring-offset-width)) var(--tw-ring-color); + box-shadow: var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow, 0 0 #0000); + --tw-ring-opacity: 1; + --tw-ring-color: rgb(134 85 246 / var(--tw-ring-opacity)); +} +/*----------------------------------------*\ + CAROUSEL +\*----------------------------------------*/ +.carousel{ + position: relative; +} +.carousel figure{ + padding-top: 0px; + padding-bottom: 0px; +} +.carousel__fonctions{ + display: flex; + align-items: center; + justify-content: center; + padding-top: 0.5rem; + padding-bottom: 0.5rem; +} +.carousel__prev:hover, .carousel__next:hover{ + --tw-text-opacity: 1; + color: rgb(216 35 42 / var(--tw-text-opacity)); +} +.carousel__prev, .carousel__next{ + transition-property: color, background-color, border-color, fill, stroke, -webkit-text-decoration-color; + transition-property: color, background-color, border-color, text-decoration-color, fill, stroke; + transition-property: color, background-color, border-color, text-decoration-color, fill, stroke, -webkit-text-decoration-color; + transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1); + transition-duration: 200ms; +} +.carousel__prev[disabled], .carousel__next[disabled]{ + --tw-bg-opacity: 1; + background-color: rgb(255 255 255 / var(--tw-bg-opacity)); + opacity: 0.5; +} +@media (min-width: 1536px){ + + .carousel__prev[disabled], .carousel__next[disabled]{ + background-image: linear-gradient(to right, var(--tw-gradient-stops)); + --tw-gradient-from: #ffffff; + --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to, rgb(255 255 255 / 0)); + --tw-gradient-stops: var(--tw-gradient-from), #ffffff, var(--tw-gradient-to, rgb(255 255 255 / 0)); + } +} +.carousel__prev svg, .carousel__next svg{ + height: 2.5rem; + width: 2.5rem; +} +.carousel__pagination{ + display: flex; + justify-content: center; + padding-left: 1.5rem; + padding-right: 1.5rem; +} +.carousel__bullet{ + margin-left: 0.5rem; + margin-right: 0.5rem; + display: block; + height: 1rem; + width: 1rem; + border-radius: 9999px; + border-width: 1px; + --tw-border-opacity: 1; + border-color: rgb(75 85 99 / var(--tw-border-opacity)); + background-color: transparent; +} +.carousel__bullet:hover{ + --tw-border-opacity: 1; + border-color: rgb(216 35 42 / var(--tw-border-opacity)); + --tw-bg-opacity: 1; + background-color: rgb(229 57 64 / var(--tw-bg-opacity)); +} +.carousel__bullet{ + cursor: pointer; + transition-property: color, background-color, border-color, fill, stroke, -webkit-text-decoration-color; + transition-property: color, background-color, border-color, text-decoration-color, fill, stroke; + transition-property: color, background-color, border-color, text-decoration-color, fill, stroke, -webkit-text-decoration-color; + transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1); + transition-duration: 200ms; +} +.carousel__bullet--active{ + --tw-bg-opacity: 1; + background-color: rgb(107 114 128 / var(--tw-bg-opacity)); +} +.carousel__bullet--active:hover{ + --tw-bg-opacity: 1; + background-color: rgb(107 114 128 / var(--tw-bg-opacity)); +} +.carousel__bullet--active{ + cursor: default; +} +.carousel--fraction .carousel__fonctions{ + justify-content: flex-end; +} +@media (min-width: 1024px){ + + .carousel--bullets .carousel__prev{ + position: absolute; + top: 0px; + bottom: 60px; + left: -3.5rem; + z-index: 10; + } +} +@media (min-width: 1536px){ + + .carousel--bullets .carousel__prev{ + left: -5rem; + } +} +.carousel--bullets .carousel__prev{ + order: 1; +} +.carousel--bullets .carousel__pagination{ + order: 2; +} +@media (min-width: 1024px){ + + .carousel--bullets .carousel__next{ + position: absolute; + top: 0px; + bottom: 60px; + right: -3.5rem; + z-index: 10; + } +} +@media (min-width: 1536px){ + + .carousel--bullets .carousel__next{ + right: -5rem; + } +} +.carousel--bullets .carousel__next{ + order: 3; +} +.carousel--bullets .carousel__prev svg, .carousel--bullets .carousel__next svg{ + height: 3rem; + width: 3rem; +} +@media (min-width: 1024px){ + + .carousel--bullets .carousel__prev svg, .carousel--bullets .carousel__next svg{ + height: 3.5rem; + width: 3.5rem; + } +} +@media (min-width: 1536px){ + + .carousel--bullets .carousel__prev svg, .carousel--bullets .carousel__next svg{ + height: 5rem; + width: 5rem; + } +} +.carousel--cards .swiper-container{ + padding: 3rem; + padding-top: 0px !important; + margin-right: -3rem; + margin-left: -3rem; + margin-bottom: -2rem; +} +@media (min-width: 1536px){ + + .carousel--cards .swiper-container{ + padding: 3.5rem; + margin-right: -3.5rem; + margin-left: -3.5rem; + margin-bottom: -3rem; + } +} +.carousel--cards .carousel__fonctions{ + padding-top: 1rem; + padding-bottom: 1rem; +} +@media (min-width: 1536px){ + + .carousel--cards .carousel__fonctions{ + padding-top: 2.5rem; + padding-bottom: 2.5rem; + } +} +.carousel--cards .carousel__fonctions{ + position: relative; + z-index: 20; +} +@media (min-width: 1536px){ + + .carousel--cards .carousel__fonctions{ + position: static; + } +} +.carousel--cards .carousel__prev{ + order: 1; +} +@media (min-width: 1536px){ + + .carousel--cards .carousel__prev{ + position: absolute; + z-index: 10; + top: 0px; + bottom: 0px; + left: 0px; + --tw-translate-x: -100%; + transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y)); + background-image: linear-gradient(to right, var(--tw-gradient-stops)); + --tw-gradient-from: #ffffff; + --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to, rgb(255 255 255 / 0)); + --tw-gradient-stops: var(--tw-gradient-from), #ffffff, var(--tw-gradient-to, rgb(255 255 255 / 0)); + } +} +.carousel--cards .carousel__next{ + order: 3; +} +@media (min-width: 1536px){ + + .carousel--cards .carousel__next{ + position: absolute; + top: 0px; + bottom: 0px; + right: 0px; + z-index: 10; + --tw-translate-x: 100%; + transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y)); + background-image: linear-gradient(to left, var(--tw-gradient-stops)); + --tw-gradient-from: #ffffff; + --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to, rgb(255 255 255 / 0)); + --tw-gradient-stops: var(--tw-gradient-from), #ffffff, var(--tw-gradient-to, rgb(255 255 255 / 0)); + } +} +.carousel--cards .carousel__pagination{ + order: 2; + padding-left: 1rem; + padding-right: 1rem; +} +.carousel--cards .carousel__prev svg, .carousel--cards .carousel__next svg{ + height: 3rem; + width: 3rem; +} +@media (min-width: 1024px){ + + .carousel--cards .carousel__prev svg, .carousel--cards .carousel__next svg{ + height: 3.5rem; + width: 3.5rem; + } +} +@media (min-width: 1536px){ + + .carousel--cards .carousel__prev svg, .carousel--cards .carousel__next svg{ + height: 5rem; + width: 5rem; + } +} +@media (min-width: 1800px){ + + .carousel--cards .carousel__prev svg, .carousel--cards .carousel__next svg{ + height: 6rem; + width: 6rem; + } +} +@media (min-width: 1536px){ + + .bg--secondary-50 .carousel__prev{ + --tw-gradient-from: #f0f4f7; + --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to, rgb(240 244 247 / 0)); + --tw-gradient-stops: var(--tw-gradient-from), #f0f4f7, var(--tw-gradient-to, rgb(240 244 247 / 0)); + } +} +.bg--secondary-50 .carousel__prev[disabled]{ + --tw-bg-opacity: 1; + background-color: rgb(240 244 247 / var(--tw-bg-opacity)); +} +@media (min-width: 1536px){ + + .bg--secondary-50 .carousel__next{ + --tw-gradient-from: #f0f4f7; + --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to, rgb(240 244 247 / 0)); + --tw-gradient-stops: var(--tw-gradient-from), #f0f4f7, var(--tw-gradient-to, rgb(240 244 247 / 0)); + } +} +.bg--secondary-50 .carousel__next[disabled]{ + --tw-bg-opacity: 1; + background-color: rgb(240 244 247 / var(--tw-bg-opacity)); +} +@media (min-width: 1536px){ + + .bg--secondary-100 .carousel__prev{ + --tw-gradient-from: #dfe4e9; + --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to, rgb(223 228 233 / 0)); + --tw-gradient-stops: var(--tw-gradient-from), #dfe4e9, var(--tw-gradient-to, rgb(223 228 233 / 0)); + } +} +.bg--secondary-100 .carousel__prev[disabled]{ + --tw-bg-opacity: 1; + background-color: rgb(223 228 233 / var(--tw-bg-opacity)); +} +@media (min-width: 1536px){ + + .bg--secondary-100 .carousel__next{ + --tw-gradient-from: #dfe4e9; + --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to, rgb(223 228 233 / 0)); + --tw-gradient-stops: var(--tw-gradient-from), #dfe4e9, var(--tw-gradient-to, rgb(223 228 233 / 0)); + } +} +.bg--secondary-100 .carousel__next[disabled]{ + --tw-bg-opacity: 1; + background-color: rgb(223 228 233 / var(--tw-bg-opacity)); +} +@media (min-width: 1536px){ + + .bg--secondary-500 .carousel__prev{ + --tw-gradient-from: #46596b; + --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to, rgb(70 89 107 / 0)); + --tw-gradient-stops: var(--tw-gradient-from), #46596b, var(--tw-gradient-to, rgb(70 89 107 / 0)); + } +} +.bg--secondary-500 .carousel__prev[disabled]{ + --tw-bg-opacity: 1; + background-color: rgb(70 89 107 / var(--tw-bg-opacity)); +} +@media (min-width: 1536px){ + + .bg--secondary-500 .carousel__next{ + --tw-gradient-from: #46596b; + --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to, rgb(70 89 107 / 0)); + --tw-gradient-stops: var(--tw-gradient-from), #46596b, var(--tw-gradient-to, rgb(70 89 107 / 0)); + } +} +.bg--secondary-500 .carousel__next[disabled]{ + --tw-bg-opacity: 1; + background-color: rgb(70 89 107 / var(--tw-bg-opacity)); +} +@media (min-width: 1536px){ + + .bg--secondary-600 .carousel__prev{ + --tw-gradient-from: #2f4356; + --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to, rgb(47 67 86 / 0)); + --tw-gradient-stops: var(--tw-gradient-from), #2f4356, var(--tw-gradient-to, rgb(47 67 86 / 0)); + } +} +.bg--secondary-600 .carousel__prev[disabled]{ + --tw-bg-opacity: 1; + background-color: rgb(47 67 86 / var(--tw-bg-opacity)); +} +@media (min-width: 1536px){ + + .bg--secondary-600 .carousel__next{ + --tw-gradient-from: #2f4356; + --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to, rgb(47 67 86 / 0)); + --tw-gradient-stops: var(--tw-gradient-from), #2f4356, var(--tw-gradient-to, rgb(47 67 86 / 0)); + } +} +.bg--secondary-600 .carousel__next[disabled]{ + --tw-bg-opacity: 1; + background-color: rgb(47 67 86 / var(--tw-bg-opacity)); +} +.bg--secondary-500 .carousel__bullet, .bg--secondary-600 .carousel__bullet{ + --tw-border-opacity: 1; + border-color: rgb(156 163 175 / var(--tw-border-opacity)); +} +.bg--secondary-500 .carousel__bullet--active, .bg--secondary-600 .carousel__bullet--active{ + --tw-bg-opacity: 1; + background-color: rgb(209 213 219 / var(--tw-bg-opacity)); +} +.bg--secondary-500 .carousel__prev, .bg--secondary-500 .carousel__next, .bg--secondary-600 .carousel__prev, .bg--secondary-600 .carousel__next{ + --tw-text-opacity: 1; + color: rgb(249 250 251 / var(--tw-text-opacity)); +} +.bg--secondary-500 .carousel__prev:hover, .bg--secondary-500 .carousel__next:hover, .bg--secondary-600 .carousel__prev:hover, .bg--secondary-600 .carousel__next:hover{ + --tw-text-opacity: 1; + color: rgb(252 101 107 / var(--tw-text-opacity)); +} +/* + @apply px-4 xs:px-7 sm:px-9 lg:px-10 xl:px-12 3xl:px-16; + @apply w-full 2xl:w-[1536px] 3xl:w-[1680px]; +*/ +/* swiper container */ +.swiper-container { + margin-left: auto; + margin-right: auto; + position: relative; + overflow: hidden; + list-style: none; + padding: 0; + /* Fix of Webkit flickering */ + z-index: 1; +} +.swiper-container-vertical > .swiper-wrapper { + flex-direction: column; +} +.swiper-wrapper { + position: relative; + width: 100%; + height: 100%; + z-index: 1; + display: flex; + align-items: stretch; + transition-property: transform; + box-sizing: content-box; +} +.swiper-container-android .swiper-slide, +.swiper-wrapper { + transform: translate3d(0px, 0, 0); +} +.swiper-container-multirow > .swiper-wrapper { + flex-wrap: wrap; +} +.swiper-container-multirow-column > .swiper-wrapper { + flex-wrap: wrap; + flex-direction: column; +} +.swiper-container-free-mode > .swiper-wrapper { + transition-timing-function: ease-out; + margin: 0 auto; +} +.swiper-container-pointer-events { + touch-action: pan-y; +} +.swiper-container-pointer-events.swiper-container-vertical { + touch-action: pan-x; +} +.swiper-slide { + flex-shrink: 0; + width: 100%; + height: auto; + position: relative; + transition-property: transform; +} +.swiper-slide-invisible-blank { + visibility: hidden; +} +/* Auto Height */ +.swiper-container-autoheight, +.swiper-container-autoheight .swiper-slide { + height: auto; +} +.swiper-container-autoheight .swiper-wrapper { + align-items: flex-start; + transition-property: transform, height; +} +/* Hide dot pagination when there's too much dots */ +.carousel__pagination:has(> :nth-child(6)){ + display: none; +} +.desktop-menu__drawer.carousel__pagination:has(> :nth-child(6)) { + display: block; + height: 0; + overflow: hidden; + padding: 0px; + opacity: 0; + transition: opacity 300ms, height 1ms 300ms, padding 1ms 300ms; + } +.desktop-menu__drawer.carousel__pagination:has(> :nth-child(6)) > *{ + --tw-translate-y: -2rem; + transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y)); + transition-property: transform; + transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1); + transition-duration: 300ms; +} +.desktop-menu__overlay.carousel__pagination:has(> :nth-child(6)) { + display: block; + height: 0; + overflow: hidden; + padding: 0px; + opacity: 0; + transition: opacity 300ms, height 1ms 300ms; + } +@media (min-width: 640px){ + + .carousel__pagination:has(> :nth-child(6)){ + display: flex; + } +} +.carousel__pagination:has(> :nth-child(13)){ + display: none; +} +.desktop-menu__drawer.carousel__pagination:has(> :nth-child(13)) { + display: block; + height: 0; + overflow: hidden; + padding: 0px; + opacity: 0; + transition: opacity 300ms, height 1ms 300ms, padding 1ms 300ms; + } +.desktop-menu__drawer.carousel__pagination:has(> :nth-child(13)) > *{ + --tw-translate-y: -2rem; + transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y)); + transition-property: transform; + transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1); + transition-duration: 300ms; +} +.desktop-menu__overlay.carousel__pagination:has(> :nth-child(13)) { + display: block; + height: 0; + overflow: hidden; + padding: 0px; + opacity: 0; + transition: opacity 300ms, height 1ms 300ms; + } +@media (min-width: 768px){ + + .carousel__pagination:has(> :nth-child(13)){ + display: flex; + } +} +/*----------------------------------------*\ + Download Item +\*----------------------------------------*/ +.download-item{ + display: flex; + width: 100%; + padding-left: 0px; + padding-bottom: 1rem; + padding-top: 1rem; + border-bottom-width: 1px; + --tw-border-opacity: 1; + border-color: rgb(172 180 189 / var(--tw-border-opacity)); + text-align: left; + color: inherit; + -webkit-text-decoration-line: none; + text-decoration-line: none; +} +/* override general styling for links in main */ +.bg--secondary-50 .download-item{ + --tw-border-opacity: 1; + border-color: rgb(130 142 154 / var(--tw-border-opacity)); +} +.accordion .download-item:last-of-type{ + margin-bottom: 1rem; + border-bottom-width: 0px; +} +.download-item__icon{ + margin-top: -0.25rem; + margin-bottom: -0.25rem; + margin-left: -0.25rem; + padding-right: 0.25rem; +} +@media (min-width: 768px){ + + .download-item__icon{ + padding-right: 0.5rem; + } +} +.download-item__icon{ + --tw-text-opacity: 1; + color: rgb(216 35 42 / var(--tw-text-opacity)); + height: 1.75rem; +} +@media (min-width: 768px){ + + .download-item__icon{ + height: 2rem; + } +} +@media (min-width: 1024px){ + + .download-item__icon{ + height: 2.25rem; + } +} +.download-item__title{ + font-family: FrutigerNeueLTPro-Bold, Hind, Fallback-font; + font-weight: 400; + transition-property: color, background-color, border-color, fill, stroke, -webkit-text-decoration-color; + transition-property: color, background-color, border-color, text-decoration-color, fill, stroke; + transition-property: color, background-color, border-color, text-decoration-color, fill, stroke, -webkit-text-decoration-color; + transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1); + transition-duration: 200ms; +} +.download-item:hover .download-item__title{ + --tw-text-opacity: 1; + color: rgb(216 35 42 / var(--tw-text-opacity)); +} +.download-item__description{ + --tw-text-opacity: 1; + color: rgb(31 41 55 / var(--tw-text-opacity)); /* override general styling for links in main */ +} +.download-item__meta-info{ + padding-top: 0.75rem; +} +.download-meta-info{ + --tw-text-opacity: 1; + color: rgb(156 163 175 / var(--tw-text-opacity)); +} +.download-item__meta-divider{ + padding-left: 0.75rem; + padding-right: 0.75rem; +} +.form > :not([hidden]) ~ :not([hidden]){ + --tw-space-y-reverse: 0; + margin-top: calc(1.5rem * calc(1 - var(--tw-space-y-reverse))); + margin-bottom: calc(1.5rem * var(--tw-space-y-reverse)); +} +.form__group {} +.form__group__input, .form__group__select{ + width: 100%; +} +.form__group__input > :not([hidden]) ~ :not([hidden]), .form__group__select > :not([hidden]) ~ :not([hidden]){ + --tw-space-y-reverse: 0; + margin-top: calc(0.5rem * calc(1 - var(--tw-space-y-reverse))); + margin-bottom: calc(0.5rem * var(--tw-space-y-reverse)); +} +.form__group__radio{ + margin-bottom: 0.5rem; +} +.form__group__checkbox{ + margin-bottom: 0.5rem; +} +.input, input, textarea, select{ + width: 100%; + padding-left: 1rem; + padding-right: 1rem; + padding-top: 0.625rem; + padding-bottom: 0.625rem; + --tw-shadow: 0px 1px 2px 0px rgba(0,0,0,0.06), 0px 1px 5px 0px rgba(0,0,0,0.08); + --tw-shadow-colored: 0px 1px 2px 0px var(--tw-shadow-color), 0px 1px 5px 0px var(--tw-shadow-color); + box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow); + border-width: 1px; + --tw-border-opacity: 1; + border-color: rgb(107 114 128 / var(--tw-border-opacity)); + --tw-bg-opacity: 1; + background-color: rgb(255 255 255 / var(--tw-bg-opacity)); + border-radius: 0.0625rem; + line-height: 1; + min-height: 44px; +} +@media (min-width: 1536px){ + + .input, input, textarea, select{ + min-height: 48px; + } +} +.input:focus, input:focus, textarea:focus, select:focus{ + outline: 2px solid transparent; + outline-offset: 2px; +} +.input::-moz-placeholder, input::-moz-placeholder, textarea::-moz-placeholder, select::-moz-placeholder{ + --tw-placeholder-opacity: 1; + color: rgb(89 105 120 / var(--tw-placeholder-opacity)); +} +.input:-ms-input-placeholder, input:-ms-input-placeholder, textarea:-ms-input-placeholder, select:-ms-input-placeholder{ + --tw-placeholder-opacity: 1; + color: rgb(89 105 120 / var(--tw-placeholder-opacity)); +} +.input::placeholder, input::placeholder, textarea::placeholder, select::placeholder{ + --tw-placeholder-opacity: 1; + color: rgb(89 105 120 / var(--tw-placeholder-opacity)); +} +.input--sm{ + line-height: 1.25rem; + font-size: 0.875rem; +} +@media (min-width: 1280px){ + + .input--sm{ + font-size: 1rem; + } +} +@media (min-width: 1800px){ + + .input--sm{ + font-size: 1.125rem; + } +} +.input--lg{ + line-height: 1.75rem; + font-size: 1.125rem; +} +@media (min-width: 1280px){ + + .input--lg{ + font-size: 1.25rem; + } +} +@media (min-width: 1800px){ + + .input--lg{ + font-size: 1.375rem; + } +} +.input--base{ + line-height: 1.5rem; + font-size: 1rem; +} +@media (min-width: 1280px){ + + .input--base{ + font-size: 1.125rem; + } +} +@media (min-width: 1800px){ + + .input--base{ + font-size: 1.25rem; + } +} +.input--outline{ + --tw-text-opacity: 1; + color: rgb(31 41 55 / var(--tw-text-opacity)); + --tw-border-opacity: 1; + border-color: rgb(107 114 128 / var(--tw-border-opacity)); +} +[disabled], .input--disabled{ + --tw-bg-opacity: 1; + background-color: rgb(249 250 251 / var(--tw-bg-opacity)); + --tw-text-opacity: 1; + color: rgb(156 163 175 / var(--tw-text-opacity)); + --tw-border-opacity: 1; + border-color: rgb(209 213 219 / var(--tw-border-opacity)); + pointer-events: none; + cursor: not-allowed; +} +.input--error{ + --tw-text-opacity: 1; + color: rgb(153 25 30 / var(--tw-text-opacity)); + --tw-border-opacity: 1; + border-color: rgb(229 57 64 / var(--tw-border-opacity)); +} +.input--error::-moz-placeholder{ + --tw-placeholder-opacity: 1; + color: rgb(252 101 107 / var(--tw-placeholder-opacity)); +} +.input--error:-ms-input-placeholder{ + --tw-placeholder-opacity: 1; + color: rgb(252 101 107 / var(--tw-placeholder-opacity)); +} +.input--error::placeholder{ + --tw-placeholder-opacity: 1; + color: rgb(252 101 107 / var(--tw-placeholder-opacity)); +} +.input--negative{ + --tw-text-opacity: 1; + color: rgb(255 255 255 / var(--tw-text-opacity)); + --tw-bg-opacity: 1; + background-color: rgb(70 89 107 / var(--tw-bg-opacity)); +} +.input--negative::-moz-placeholder{ + --tw-placeholder-opacity: 1; + color: rgb(240 244 247 / var(--tw-placeholder-opacity)); +} +.input--negative:-ms-input-placeholder{ + --tw-placeholder-opacity: 1; + color: rgb(240 244 247 / var(--tw-placeholder-opacity)); +} +.input--negative::placeholder{ + --tw-placeholder-opacity: 1; + color: rgb(240 244 247 / var(--tw-placeholder-opacity)); +} +.input--negative{ + --tw-border-opacity: 1; + border-color: rgb(130 142 154 / var(--tw-border-opacity)); +} +.input--negative:disabled, .input--negative.input--disabled{ + --tw-bg-opacity: 1; + background-color: rgb(130 142 154 / var(--tw-bg-opacity)); + --tw-text-opacity: 1; + color: rgb(172 180 189 / var(--tw-text-opacity)); +} +.input--error.input--negative{ + --tw-border-opacity: 1; + border-color: rgb(250 157 161 / var(--tw-border-opacity)); + --tw-text-opacity: 1; + color: rgb(255 204 206 / var(--tw-text-opacity)); +} +/* RADIO AND CHECKBOXES */ +input[type="checkbox"], input[type="radio"]{ + height: 0.9rem; + min-height: 0px; + width: 0.9rem; + padding: 0px; + -webkit-appearance: none; + -moz-appearance: none; + appearance: none; + -webkit-print-color-adjust: exact; +} +input[type="checkbox"]:disabled, input[type="checkbox"].input--disabled, input[type="radio"]:disabled, input[type="radio"].input--disabled{ + opacity: 0.4; +} +input[type="checkbox"].input--sm, input[type="radio"].input--sm{ + height: 0.75rem; + width: 0.75rem; +} +input[type="checkbox"].input--base, input[type="radio"].input--base{ + height: 0.9rem; + width: 0.9rem; +} +input[type="checkbox"].input--lg, input[type="radio"].input--lg{ + height: 1rem; + width: 1rem; +} +input[type="checkbox"].input--outline:disabled, input[type="checkbox"].input--outline.input--disabled, input[type="radio"].input--outline:disabled, input[type="radio"].input--outline.input--disabled{ + --tw-border-opacity: 1; + border-color: rgb(209 213 219 / var(--tw-border-opacity)); + --tw-bg-opacity: 1; + background-color: rgb(243 244 246 / var(--tw-bg-opacity)); +} +input[type="checkbox"].input--negative, input[type="radio"].input--negative{ + --tw-bg-opacity: 1; + background-color: rgb(89 105 120 / var(--tw-bg-opacity)); + border-width: 1px; + --tw-border-opacity: 1; + border-color: rgb(255 255 255 / var(--tw-border-opacity)); +} +input[type="checkbox"].input--negative:disabled, input[type="checkbox"].input--negative.input--disabled, input[type="radio"].input--negative:disabled, input[type="radio"].input--negative.input--disabled{ + --tw-border-opacity: 1; + border-color: rgb(156 163 175 / var(--tw-border-opacity)); + --tw-bg-opacity: 1; + background-color: rgb(209 213 219 / var(--tw-bg-opacity)); +} +input[type="checkbox"]:checked, input[type="radio"]:checked{ + --tw-bg-opacity: 1; + background-color: rgb(55 65 81 / var(--tw-bg-opacity)); + background-repeat: no-repeat; + background-position: center; +} +input[type="checkbox"]:checked:disabled, input[type="checkbox"]:checked.input--disabled, input[type="radio"]:checked:disabled, input[type="radio"]:checked.input--disabled{ + --tw-border-opacity: 1; + border-color: rgb(107 114 128 / var(--tw-border-opacity)); + --tw-bg-opacity: 1; + background-color: rgb(55 65 81 / var(--tw-bg-opacity)); +} +input[type="radio"]{ + border-radius: 9999px; +} +input[type="radio"]:checked { + background-position: 50% 50%; + background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 12 12' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Ccircle cx='6' cy='6' r='3' fill='white'/%3E%3C/svg%3E%0A"); +} +input[type="checkbox"]:checked { + background-image: url("data:image/svg+xml,%3Csvg width='10' height='7' viewBox='0 0 10 7' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M9.20692 0.293031C9.39439 0.480558 9.49971 0.734866 9.49971 1.00003C9.49971 1.26519 9.39439 1.5195 9.20692 1.70703L4.20692 6.70703C4.01939 6.8945 3.76508 6.99982 3.49992 6.99982C3.23475 6.99982 2.98045 6.8945 2.79292 6.70703L0.792919 4.70703C0.610761 4.51843 0.509966 4.26583 0.512245 4.00363C0.514523 3.74143 0.619692 3.49062 0.8051 3.30521C0.990508 3.1198 1.24132 3.01463 1.50352 3.01236C1.76571 3.01008 2.01832 3.11087 2.20692 3.29303L3.49992 4.58603L7.79292 0.293031C7.98045 0.10556 8.23475 0.000244141 8.49992 0.000244141C8.76508 0.000244141 9.01939 0.10556 9.20692 0.293031Z' fill='white'/%3E%3C/svg%3E%0A"); +} +/* OTHER INPUT TYPES */ +input[type="color"]{ + height: 3rem; +} +input[type="range"]{ + border-width: 0px; + box-shadow: none; +} +/*----------------------------------------*\ + LINKS +\*----------------------------------------*/ +.link, main a{ + --tw-text-opacity: 1; + color: rgb(216 35 42 / var(--tw-text-opacity)); +} +.link:hover, main a:hover{ + --tw-text-opacity: 1; + color: rgb(153 25 30 / var(--tw-text-opacity)); +} +.link:focus, main a:focus{ + --tw-text-opacity: 1; + color: rgb(153 25 30 / var(--tw-text-opacity)); +} +.link, main a{ + cursor: pointer; + -webkit-text-decoration-line: underline; + text-decoration-line: underline; + text-underline-offset: 2px; + word-break: break-all; +} +.link--negative{ + --tw-text-opacity: 1; + color: rgb(255 255 255 / var(--tw-text-opacity)); +} +.link--negative:hover{ + --tw-text-opacity: 1; + color: rgb(209 213 219 / var(--tw-text-opacity)); +} +.link--negative:focus{ + --tw-text-opacity: 1; + color: rgb(209 213 219 / var(--tw-text-opacity)); +} +.link--negative{ + cursor: pointer; + -webkit-text-decoration-line: underline; + text-decoration-line: underline; + text-underline-offset: 2px; +} +.link--block{ + display: block; +} +.authors__names .link--external, .authors__names main a[rel*="external"]{ + color: inherit; +} +.link--external, main a[rel*="external"]{ + --tw-text-opacity: 1; + color: rgb(216 35 42 / var(--tw-text-opacity)); +} +.link--external:hover, main a[rel*="external"]:hover{ + --tw-text-opacity: 1; + color: rgb(153 25 30 / var(--tw-text-opacity)); +} +.link--external:focus, main a[rel*="external"]:focus{ + --tw-text-opacity: 1; + color: rgb(153 25 30 / var(--tw-text-opacity)); +} +.link--external, main a[rel*="external"]{ + cursor: pointer; + -webkit-text-decoration-line: underline; + text-decoration-line: underline; + text-underline-offset: 2px; + word-break: break-all; +} +.link--external:not(.btn, .btn--link)::after, main a[rel*="external"]:not(.btn, .btn--link)::after { + content: ''; + position: relative; + display: inline-block; + height: 1em; + width: 1em; + top: 0.2em; + margin-left: 0.125em; + margin-right: 0.125em; + background-color: currentColor; + -webkit-mask-repeat: no-repeat; + mask-repeat: no-repeat; + -webkit-mask-image: var(--icon-external-link); + mask-image: var(--icon-external-link); + } +:root { + --icon-external-link: url('data:image/svg+xml,\ + \ + \ + \ + '); +} +/*----------------------------------------*\ + LOGO +\*----------------------------------------*/ +.logo{ + display: flex; + flex-wrap: nowrap; + align-items: center; +} +@media (min-width: 768px){ + + .logo{ + align-items: flex-start; + } +} +.logo{ + transition-property: opacity; + transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1); + transition-duration: 700ms; +} +.body--mobile-menu-is-open .logo{ + opacity: 0; +} +.logo--print-hidden{ + display: flex; +} +@media print{ + + .logo--print-hidden{ + display: none; + } +} +.logo--print-only{ + display: none; +} +.desktop-menu__drawer.logo--print-only { + display: block; + height: 0; + overflow: hidden; + padding: 0px; + opacity: 0; + transition: opacity 300ms, height 1ms 300ms, padding 1ms 300ms; + } +.desktop-menu__drawer.logo--print-only > *{ + --tw-translate-y: -2rem; + transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y)); + transition-property: transform; + transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1); + transition-duration: 300ms; +} +.desktop-menu__overlay.logo--print-only { + display: block; + height: 0; + overflow: hidden; + padding: 0px; + opacity: 0; + transition: opacity 300ms, height 1ms 300ms; + } +@media print{ + + .logo--print-only{ + display: flex; + } +} +.logo__flag{ + flex-shrink: 0; + height: 33px; + width: 30px; +} +@media (min-width: 1024px){ + + .logo__flag{ + height: 34px; + width: 32px; + } +} +@media (min-width: 1800px){ + + .logo__flag{ + height: 44px; + width: 40px; + } +} +.logo__name{ + display: none; + flex-shrink: 0; + overflow: visible; +} +.desktop-menu__drawer.logo__name { + display: block; + height: 0; + overflow: hidden; + padding: 0px; + opacity: 0; + transition: opacity 300ms, height 1ms 300ms, padding 1ms 300ms; + } +.desktop-menu__drawer.logo__name > *{ + --tw-translate-y: -2rem; + transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y)); + transition-property: transform; + transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1); + transition-duration: 300ms; +} +.desktop-menu__overlay.logo__name { + display: block; + height: 0; + overflow: hidden; + padding: 0px; + opacity: 0; + transition: opacity 300ms, height 1ms 300ms; + } +@media (min-width: 1280px){ + + .logo__name{ + display: block; + } +} +.logo__name{ + height: 50px; + width: 174px; +} +@media (min-width: 1800px){ + + .logo__name{ + height: 70px; + width: 244px; + } +} +.logo__separator{ + height: 2.5rem; + width: 1px; +} +@media (min-width: 768px){ + + .logo__separator{ + height: 3.5rem; + } +} +@media (min-width: 1800px){ + + .logo__separator{ + height: 70px; + } +} +.logo__separator{ + margin-right: 0.5rem; +} +@media (min-width: 640px){ + + .logo__separator{ + margin-right: 1rem; + } +} +@media (min-width: 1024px){ + + .logo__separator{ + margin-right: 1.5rem; + } +} +@media (min-width: 1800px){ + + .logo__separator{ + margin-right: 2rem; + } +} +.logo__separator{ + margin-left: 0.5rem; +} +@media (min-width: 640px){ + + .logo__separator{ + margin-left: 1rem; + } +} +@media (min-width: 1024px){ + + .logo__separator{ + margin-left: 1.5rem; + } +} +@media (min-width: 1800px){ + + .logo__separator{ + margin-left: 2rem; + } +} +.logo__separator{ + overflow: visible; + --tw-bg-opacity: 1; + background-color: rgb(209 213 219 / var(--tw-bg-opacity)); +} +.logo__title{ + position: absolute; + width: 1px; + height: 1px; + padding: 0; + margin: -1px; + overflow: hidden; + clip: rect(0, 0, 0, 0); + white-space: nowrap; + border-width: 0; +} +@media (min-width: 480px){ + + .logo__title{ + position: static; + width: auto; + height: auto; + padding: 0; + margin: 0; + overflow: visible; + clip: auto; + white-space: normal; + } +} +@media (min-width: 768px){ + + .logo__title{ + white-space: nowrap; + } +} +.logo__title{ + font-size: 0.875rem; +} +@media (min-width: 480px){ + + .logo__title{ + font-size: 0.75rem; + } +} +@media (min-width: 640px){ + + .logo__title{ + font-size: 0.875rem; + } +} +@media (min-width: 1280px){ + + .logo__title{ + font-size: 1rem; + } +} +@media (min-width: 1800px){ + + .logo__title{ + font-size: 1.125rem; + } +} +.logo__title{ + font-family: FrutigerNeueLTPro-Bold, Hind, Fallback-font; + font-weight: 400; + line-height: 1.375; + position: relative; + margin-top: -0.7%; +} +.logo__accronym{ + font-family: FrutigerNeueLTPro-Bold, Hind, Fallback-font; + font-weight: 400; + line-height: 1.375; +} +@media (min-width: 480px){ + + .logo__accronym{ + display: none; + } +} +/*----------------------------------------*\ + MASK +\*----------------------------------------*/ +.mask { + -webkit-mask-size: contain; + mask-size: contain; + -webkit-mask-repeat: no-repeat; + mask-repeat: no-repeat; + -webkit-mask-position: center; + mask-position: center; +} +/*----------------------------------------*\ + MENU +\*----------------------------------------*/ +.menu{ + list-style-type: none; +} +.menu a, .menu a:hover{ + color: inherit; + -webkit-text-decoration-line: none; + text-decoration-line: none; /* override general styling for links in main */ +} +.menu__item{ + display: flex; + align-items: center; + justify-content: space-between; + position: relative; + padding-left: 1rem; + padding-right: 1rem; + padding-top: 0.75rem; + padding-bottom: 0.75rem; + cursor: pointer; + transition-property: color, background-color, border-color, fill, stroke, -webkit-text-decoration-color; + transition-property: color, background-color, border-color, text-decoration-color, fill, stroke; + transition-property: color, background-color, border-color, text-decoration-color, fill, stroke, -webkit-text-decoration-color; + transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1); + transition-duration: 150ms; +} +.menu__item:hover{ + --tw-bg-opacity: 1; + background-color: rgb(240 244 247 / var(--tw-bg-opacity)); +} +.menu__item:focus{ + --tw-text-opacity: 1; + color: rgb(216 35 42 / var(--tw-text-opacity)); +} +.menu__item--small{ + font-size: 0.875rem; +} +@media (min-width: 1800px){ + + .menu__item--small{ + font-size: 1rem; + } +} +.menu__item--action-btn{ + padding-left: 1rem; + padding-right: 1rem; + padding-top: 0.75rem; + padding-bottom: 0.75rem; +} +@media (min-width: 1024px){ + + .menu__item--action-btn{ + font-size: 0.75rem; + } +} +@media (min-width: 1800px){ + + .menu__item--action-btn{ + font-size: 0.875rem; + } +} +.menu__item--action-btn{ + --tw-text-opacity: 1; + color: rgb(107 114 128 / var(--tw-text-opacity)); +} +.menu__item--action-btn:focus{ + --tw-text-opacity: 1; + color: rgb(107 114 128 / var(--tw-text-opacity)); +} +.menu__item--mini{ + padding-left: 1rem; + padding-right: 1rem; + padding-top: 0.5rem; + padding-bottom: 0.5rem; +} +.menu__item--border{ + border-bottom-width: 1px; + border-color: rgb(223 228 233 / var(--tw-border-opacity)); + --tw-border-opacity: 1; +} +.menu__item--grey{ + --tw-bg-opacity: 1; + background-color: rgb(240 244 247 / var(--tw-bg-opacity)); +} +.menu__item--negative{ + --tw-bg-opacity: 1; + background-color: rgb(47 67 86 / var(--tw-bg-opacity)); + --tw-text-opacity: 1; + color: rgb(255 255 255 / var(--tw-text-opacity)); + border-bottom-width: 1px; + --tw-border-opacity: 1; + border-color: rgb(89 105 120 / var(--tw-border-opacity)); +} +.menu__item.menu__item--negative:hover{ + --tw-bg-opacity: 1; + background-color: rgb(38 54 69 / var(--tw-bg-opacity)); +} +.menu__item--negative:focus{ + --tw-text-opacity: 1; + color: rgb(250 157 161 / var(--tw-text-opacity)); +} +.menu__item--brim{ + padding-left: 0.5rem; + padding-right: 0.5rem; +} +.icon.menu__item__icon{ + height: 1.5rem; +} +@media (min-width: 768px){ + + .icon.menu__item__icon{ + height: 1.75rem; + } +} +.menu__item--title:hover{ + --tw-bg-opacity: 1; + background-color: rgb(255 255 255 / var(--tw-bg-opacity)); +} +@media (min-width: 1024px){ + + .menu__item--title{ + padding-left: 0px; + padding-right: 0px; + } +} +.menu__item--title{ + cursor: default; +} +/* NON RESPONSIVE UTILITIES */ +.menu__item--active::after { + content:''; + display: block; + --tw-bg-opacity: 1; + background-color: rgb(229 57 64 / var(--tw-bg-opacity)); + width: 3px; + position: absolute; + top: 0px; + bottom: 0px; + left: 0px; +} +/* Sticky Nav: hide the active marker for mobile layout when navigation is in a aside sticky container */ +.container__aside .sticky .menu__item--active::after{ + display: none; +} +.desktop-menu__drawer.container__aside .sticky .menu__item--active::after { + display: block; + height: 0; + overflow: hidden; + padding: 0px; + opacity: 0; + transition: opacity 300ms, height 1ms 300ms, padding 1ms 300ms; + } +.desktop-menu__drawer.container__aside .sticky .menu__item--active::after > *{ + --tw-translate-y: -2rem; + transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y)); + transition-property: transform; + transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1); + transition-duration: 300ms; +} +.desktop-menu__overlay.container__aside .sticky .menu__item--active::after { + display: block; + height: 0; + overflow: hidden; + padding: 0px; + opacity: 0; + transition: opacity 300ms, height 1ms 300ms; + } +@media (min-width: 768px){ + + .container__aside .sticky .menu__item--active::after{ + display: block; + } +} +.menu__item--condensed{ + padding-left: 0.75rem; + padding-right: 0.75rem; + padding-top: 0.75rem; + padding-bottom: 0.75rem; +} +@media (min-width: 1024px){ + + .menu__item--condensed .icon{ + height: 1.5rem; + width: 1.5rem; + } +} +.menu__item--icon-on-hover .menu__item__icon{ + opacity: 0; + transition-property: opacity; + transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1); + transition-duration: 200ms; +} +.menu__item--icon-on-hover:hover .menu__item__icon{ + opacity: 1; +} +.menu__item__flex{ + display: flex; + width: 100%; + align-items: center; + justify-content: space-between; +} +.menu__item__flex > :not([hidden]) ~ :not([hidden]){ + --tw-space-x-reverse: 0; + margin-right: calc(0.5rem * var(--tw-space-x-reverse)); + margin-left: calc(0.5rem * calc(1 - var(--tw-space-x-reverse))); +} +.menu__action-btn{ + display: flex; + align-items: center; + justify-content: space-between; + position: relative; + padding-left: 1rem; + padding-right: 1rem; + padding-top: 0.75rem; + padding-bottom: 0.75rem; + font-size: 0.875rem; +} +@media (min-width: 1800px){ + + .menu__action-btn{ + font-size: 1rem; + } +} +.menu__action-btn{ + border-width: 0px; + --tw-border-opacity: 0; + cursor: pointer; + transition-property: color, background-color, border-color, fill, stroke, -webkit-text-decoration-color; + transition-property: color, background-color, border-color, text-decoration-color, fill, stroke; + transition-property: color, background-color, border-color, text-decoration-color, fill, stroke, -webkit-text-decoration-color; + transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1); + transition-duration: 150ms; + --tw-text-opacity: 1; + color: rgb(107 114 128 / var(--tw-text-opacity)); +} +.menu__action-btn:hover{ + --tw-bg-opacity: 1; + background-color: rgb(240 244 247 / var(--tw-bg-opacity)); + --tw-text-opacity: 1; + color: rgb(75 85 99 / var(--tw-text-opacity)); +} +/*----------------------------------------*\ + Meta Info +\*----------------------------------------*/ +.meta-info{ + --tw-text-opacity: 1; + color: rgb(107 114 128 / var(--tw-text-opacity)); + font-size: 0.875rem; +} +@media (min-width: 1280px){ + + .meta-info{ + font-size: 1rem; + } +} +@media (min-width: 1800px){ + + .meta-info{ + font-size: 1.125rem; + } +} +.bg--secondary-50 .meta-info__item{ + --tw-text-opacity: 1; + color: rgb(75 85 99 / var(--tw-text-opacity)); +} +.meta-info__item:not(:last-child):after { + content: "|"; + padding-left: 0.5rem; + padding-right: 0.5rem; +} +@media (min-width: 1024px){ + + .meta-info__item:not(:last-child):after{ + padding-left: 0.75rem; + padding-right: 0.75rem; + } +} +/*----------------------------------------*\ + MODAL +\*----------------------------------------*/ +.modal, .modal__backdrop{ + top: 0px; + left: 0px; + height: 100%; + width: 100%; +} +.modal{ + display: none; +} +.desktop-menu__drawer.modal { + display: block; + height: 0; + overflow: hidden; + padding: 0px; + opacity: 0; + transition: opacity 300ms, height 1ms 300ms, padding 1ms 300ms; + } +.desktop-menu__drawer.modal > *{ + --tw-translate-y: -2rem; + transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y)); + transition-property: transform; + transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1); + transition-duration: 300ms; +} +.desktop-menu__overlay.modal { + display: block; + height: 0; + overflow: hidden; + padding: 0px; + opacity: 0; + transition: opacity 300ms, height 1ms 300ms; + } +.modal{ + position: fixed; + z-index: 40; + top: 0px; + left: 0px; + height: 100%; + width: 100%; + padding-top: 10vh; + padding-bottom: 10vh; +} +.modal.modal--auto{ + text-align: center; +} +.modal[open]{ + display: block; +} +.modal__backdrop{ + position: absolute; + z-index: 30; + background-color: rgb(75 85 99 / 0.9); + cursor: pointer; +} +.modal__content{ + position: relative; + z-index: 40; + margin-left: auto; + margin-right: auto; + padding-left: 1rem; + padding-right: 1rem; +} +@media (min-width: 480px){ + + .modal__content{ + padding-left: 1.75rem; + padding-right: 1.75rem; + } +} +@media (min-width: 640px){ + + .modal__content{ + padding-left: 2.25rem; + padding-right: 2.25rem; + } +} +@media (min-width: 1024px){ + + .modal__content{ + padding-left: 2.5rem; + padding-right: 2.5rem; + } +} +@media (min-width: 1280px){ + + .modal__content{ + padding-left: 3rem; + padding-right: 3rem; + } +} +@media (min-width: 1800px){ + + .modal__content{ + padding-left: 4rem; + padding-right: 4rem; + } +} +.modal__content{ + width: 100%; +} +@media (min-width: 1536px){ + + .modal__content{ + max-width: 1536px; + } +} +@media (min-width: 1800px){ + + .modal__content{ + max-width: 1680px; + } +} +.top-bar__bar .modal__content{ + height: 100%; +} +.top-header__mobile-title .modal__content{ + padding-top: 0.5rem; + padding-bottom: 0.5rem; +} +@media (min-width: 480px){ + + .top-header__mobile-title .modal__content{ + padding-top: 0px; + padding-bottom: 0px; + } +} +.storybook-demo-grid .modal__content--grid > div, .storybook-demo-grid .modal__content > div{ + padding: 1.5rem; + text-align: center; + font-size: 1.25rem; + --tw-text-opacity: 1; + color: rgb(76 29 149 / var(--tw-text-opacity)); + --tw-bg-opacity: 1; + background-color: rgb(245 243 255 / var(--tw-bg-opacity)); + border-width: 1px; + border-style: dashed; + --tw-border-opacity: 1; + border-color: rgb(124 58 237 / var(--tw-border-opacity)); +} +.modal__content{ + max-height: 80vh; + display: flex; + flex-direction: column; + align-items: stretch; + margin-top: 0px; + margin-bottom: 0px; + margin-left: auto; + margin-right: auto; +} +/* + Sizing: + I didn't use `container container--grid` & `container__center--sm` + as the container then take the full-width and block the interaction + of the backdrop + */ +.modal--sm .modal__content{ + max-width: 640px; +} +.modal--md .modal__content{ + max-width: 768px; +} +.modal--lg .modal__content{ + max-width: 1024px; +} +.modal--xl .modal__content{ + max-width: 1280px; +} +.modal--auto .modal__content{ + display: inline-flex; + width: auto; + text-align: left; +} +.modal__header{ + display: flex; + align-items: flex-start; + justify-content: flex-end; + width: 100%; + --tw-text-opacity: 1; + color: rgb(255 255 255 / var(--tw-text-opacity)); + margin-bottom: 0.5rem; +} +@media (min-width: 1024px){ + + .modal__header{ + margin-bottom: 1rem; + } +} +.modal__header--with-title{ + justify-content: space-between; +} +.modal__close{ + position: relative; + margin-right: -0.75rem; + margin-top: -0.25rem; +} +@media (min-width: 1024px){ + + .modal__close{ + margin-top: -0.5rem; + } +} +.modal__close{ + padding-left: 2.5rem; + cursor: pointer; +} +.modal__close:hover{ + opacity: 0.5; +} +.modal__body{ + width: 100%; + overflow: auto; +} +.modal__footer{ + height: auto; + width: 100%; + padding: 1rem; + text-align: right; + border-top-width: 1px; + --tw-border-opacity: 1; + border-color: rgb(223 228 233 / var(--tw-border-opacity)); + --tw-bg-opacity: 1; + background-color: rgb(255 255 255 / var(--tw-bg-opacity)); +} +.navbar{ + display: flex; + align-items: center; +} +.navbar > *{ + display: flex; +} +/*----------------------------------------*\ + NEWSLETTER +\*----------------------------------------*/ +.newsletter{ + padding: 1.5rem; + --tw-bg-opacity: 1; + background-color: rgb(240 244 247 / var(--tw-bg-opacity)); +} +.container__center--xs .newsletter { + --side-margin: calc(1rem * -1); + } +@media (min-width: 480px) { + .container__center--xs .newsletter { + --side-margin: calc(1.75rem * -1); + } + } +@media (min-width: 640px) { + .container__center--xs .newsletter { + --side-margin: calc((100vw - 6em ) / -12 ); + } + } +@media (min-width: 1280px) { + .container__center--xs .newsletter { + --side-margin: calc((1280px - 6em ) / -12 ); + } + } +@media (min-width: 1536px) { + .container__center--xs .newsletter { + --side-margin: calc((1536px - 6em ) / -12 ); + } + } +.container__center--xs .newsletter{ + + margin-left: var(--side-margin); + margin-right: var(--side-margin); + + padding-left: calc(var(--side-margin) * -1); + padding-right: calc(var(--side-margin) * -1); + padding-top: 1.75rem; + padding-bottom: 2rem; +} +@media (min-width: 480px){ + + .container__center--xs .newsletter{ + padding-top: 2.25rem; + padding-bottom: 2.5rem; + } +} +@media (min-width: 640px){ + + .container__center--xs .newsletter{ + padding-top: 2.5rem; + padding-bottom: 3rem; + } +} +@media (min-width: 1024px){ + + .container__center--xs .newsletter{ + padding-top: 3rem; + padding-bottom: 3.5rem; + } +} +@media (min-width: 1280px){ + + .container__center--xs .newsletter{ + padding-top: 3.5rem; + padding-bottom: 4rem; + } +} +.newsletter__title{ + --tw-text-opacity: 1; + color: rgb(47 67 86 / var(--tw-text-opacity)); +} +.newsletter__text{ + margin-bottom: 1rem; +} +@media (min-width: 768px){ + + .newsletter__text{ + margin-bottom: 2rem; + } + + .newsletter--inline .newsletter__form{ + display: flex; + align-items: flex-end; + } +} +.newsletter__button{ + margin-top: 1rem; + width: 100%; +} +@media (min-width: 480px){ + + .newsletter__button{ + margin-top: 1.5rem; + } +} +.newsletter__button .btn__text{ + width: 100%; + text-align: center; +} +@media (min-width: 768px){ + + .newsletter--inline .newsletter__button{ + margin-left: 1rem; + width: auto; + flex-shrink: 0; + } +} +/*----------------------------------------*\ + NOTIFICATION +\*----------------------------------------*/ +.notification{ + position: relative; + display: flex; + border-radius: 0.1875rem; + padding: 0.5rem; +} +@media (min-width: 480px){ + + .notification{ + padding: 1rem; + } +} +@media (min-width: 1024px){ + + .notification{ + padding: 1.5rem; + } +} +@media (min-width: 1536px){ + + .notification{ + padding: 2rem; + } +} +.notification{ + --tw-shadow: 0px 2px 6px -1px rgba(0,0,0,0.06), 0px 5px 20px -3px rgba(0,0,0,0.08); + --tw-shadow-colored: 0px 2px 6px -1px var(--tw-shadow-color), 0px 5px 20px -3px var(--tw-shadow-color); + box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow); + --tw-bg-opacity: 1; + background-color: rgb(249 250 251 / var(--tw-bg-opacity)); +} +.notification .btn, .notification a, .notification a[target="_blank"]{ + border-color: currentColor; + color: currentColor; +} +.notification .btn:hover, .notification a:hover, .notification a[target="_blank"]:hover{ + color: currentColor; + --tw-brightness: brightness(.5); + filter: var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow); +} +.notification a, .notification a[target="_blank"]{ + -webkit-text-decoration-line: underline; + text-decoration-line: underline; + text-underline-offset: 2px; +} +.notification--error, .notification--alert{ + --tw-bg-opacity: 1; + background-color: rgb(255 237 238 / var(--tw-bg-opacity)); + --tw-text-opacity: 1; + color: rgb(153 25 30 / var(--tw-text-opacity)); +} +.notification--success{ + --tw-bg-opacity: 1; + background-color: rgb(236 253 245 / var(--tw-bg-opacity)); + --tw-text-opacity: 1; + color: rgb(6 95 70 / var(--tw-text-opacity)); +} +.notification--info{ + --tw-bg-opacity: 1; + background-color: rgb(239 246 255 / var(--tw-bg-opacity)); + --tw-text-opacity: 1; + color: rgb(29 78 216 / var(--tw-text-opacity)); +} +.notification--warning{ + --tw-bg-opacity: 1; + background-color: rgb(255 247 237 / var(--tw-bg-opacity)); + --tw-text-opacity: 1; + color: rgb(154 52 18 / var(--tw-text-opacity)); +} +.notification--alert{ + --tw-bg-opacity: 1; + background-color: rgb(128 21 25 / var(--tw-bg-opacity)); + --tw-text-opacity: 1; + color: rgb(255 255 255 / var(--tw-text-opacity)); +} +.notification__icon{ + margin-right: 0.75rem; + height: 2.5rem; + width: 2.5rem; + flex-shrink: 0; + fill: currentColor; +} +.notification__close{ + position: absolute; + top: 0px; + right: 0px; +} +.notification__close svg{ + height: 2rem; + width: 2rem; +} +.notification__content{ + margin-top: 0.625rem; +} +@media (min-width: 1280px){ + + .notification__content{ + margin-top: 0.5rem; + } +} +.notification__content > *:first-child{ + margin-bottom: 0.25rem; +} +.notification .btn{ + margin-top: 1rem; +} +@media (min-width: 640px){ + + .notification .btn{ + margin-top: 2rem; + } +} +@media (min-width: 1024px){ + + .notification .btn{ + margin-top: 0px; + margin-left: 1.5rem; + } +} +.cookie-banner .btn__text{ + white-space: nowrap; +} +/*----------------------------------------*\ + ALERT BANNER +\*----------------------------------------*/ +.alert-banner{ + --tw-text-opacity: 1; + color: rgb(255 255 255 / var(--tw-text-opacity)); +} +.alert-banner p{ + font-size: 0.875rem; +} +@media (min-width: 1280px){ + + .alert-banner p{ + font-size: 1rem; + } +} +@media (min-width: 1800px){ + + .alert-banner p{ + font-size: 1.125rem; + } +} +.alert-banner__wrapper{ + position: relative; + display: flex; + align-items: flex-start; + margin-left: auto; + margin-right: auto; + padding-left: 1rem; + padding-right: 1rem; +} +@media (min-width: 480px){ + + .alert-banner__wrapper{ + padding-left: 1.75rem; + padding-right: 1.75rem; + } +} +@media (min-width: 640px){ + + .alert-banner__wrapper{ + padding-left: 2.25rem; + padding-right: 2.25rem; + } +} +@media (min-width: 1024px){ + + .alert-banner__wrapper{ + padding-left: 2.5rem; + padding-right: 2.5rem; + } +} +@media (min-width: 1280px){ + + .alert-banner__wrapper{ + padding-left: 3rem; + padding-right: 3rem; + } +} +@media (min-width: 1800px){ + + .alert-banner__wrapper{ + padding-left: 4rem; + padding-right: 4rem; + } +} +.alert-banner__wrapper{ + width: 100%; +} +@media (min-width: 1536px){ + + .alert-banner__wrapper{ + max-width: 1536px; + } +} +@media (min-width: 1800px){ + + .alert-banner__wrapper{ + max-width: 1680px; + } +} +.top-bar__bar .alert-banner__wrapper{ + height: 100%; +} +.top-header__mobile-title .alert-banner__wrapper{ + padding-top: 0.5rem; + padding-bottom: 0.5rem; +} +@media (min-width: 480px){ + + .top-header__mobile-title .alert-banner__wrapper{ + padding-top: 0px; + padding-bottom: 0px; + } +} +.storybook-demo-grid .alert-banner__wrapper--grid > div, .storybook-demo-grid .alert-banner__wrapper > div{ + padding: 1.5rem; + text-align: center; + font-size: 1.25rem; + --tw-text-opacity: 1; + color: rgb(76 29 149 / var(--tw-text-opacity)); + --tw-bg-opacity: 1; + background-color: rgb(245 243 255 / var(--tw-bg-opacity)); + border-width: 1px; + border-style: dashed; + --tw-border-opacity: 1; + border-color: rgb(124 58 237 / var(--tw-border-opacity)); +} +.alert-banner__wrapper{ + padding-top: 1rem; + padding-bottom: 1rem; +} +@media (min-width: 768px){ + + .alert-banner__wrapper{ + padding-top: 1.5rem; + padding-bottom: 1.5rem; + } +} +@media (min-width: 1280px){ + + .alert-banner__wrapper{ + padding-top: 2rem; + padding-bottom: 2rem; + } +} +.alert-banner__grid{ + display: grid; + grid-template-columns: repeat(1, minmax(0, 1fr)); + gap: 0.75rem; +} +@media print { + + .alert-banner__grid { + display: block; /* needed so that content in grid don't break the break-inside rule */ + } +} +.alert-banner__grid { /* default Tailwind value */ } +.alert-banner__grid + .grid{ + margin-top: 1.25rem; +} +@media (min-width: 480px){ + + .alert-banner__grid + .grid{ + margin-top: 1.75rem; + } +} +@media (min-width: 640px){ + + .alert-banner__grid + .grid{ + margin-top: 2.25rem; + } +} +@media (min-width: 1024px){ + + .alert-banner__grid + .grid{ + margin-top: 2.5rem; + } +} +@media (min-width: 1280px){ + + .alert-banner__grid + .grid{ + margin-top: 3rem; + } +} +@media (min-width: 1800px){ + + .alert-banner__grid + .grid{ + margin-top: 4rem; + } +} +.alert-banner__grid + .section__subtitle{ + padding-top: 3rem; +} +@media (min-width: 1024px){ + + .alert-banner__grid + .section__subtitle{ + padding-top: 4rem; + } +} +@media (min-width: 1800px){ + + .alert-banner__grid + .section__subtitle{ + padding-top: 5rem; + } +} +.storybook-demo-ratio .alert-banner__grid > div > div > *{ + padding: 1.5rem; + text-align: center; + font-size: 1.25rem; + --tw-text-opacity: 1; + color: rgb(76 29 149 / var(--tw-text-opacity)); + --tw-bg-opacity: 1; + background-color: rgb(245 243 255 / var(--tw-bg-opacity)); + border-width: 1px; + border-style: dashed; + --tw-border-opacity: 1; + border-color: rgb(124 58 237 / var(--tw-border-opacity)); +} +@media (min-width: 768px){ + + .alert-banner__grid{ + display: grid; + grid-template-columns: repeat(3, minmax(0, 1fr)); + gap: 1.5rem; + } +} +@media (min-width: 1024px){ + + .alert-banner__grid{ + display: grid; + grid-template-columns: repeat(4, minmax(0, 1fr)); + gap: 2rem; + } +} +@media (min-width: 768px){ + + .alert-banner__header{ + grid-column: span 4 / span 4; + } +} +@media (min-width: 1024px){ + + .alert-banner__header{ + grid-column: span 1 / span 1; + grid-row-start: 1; + } +} +@media (min-width: 768px){ + + .alert-banner__content{ + grid-column: span 3 / span 3; + grid-row-start: 2; + } +} +@media (min-width: 1024px){ + + .alert-banner__content{ + grid-column: span 2 / span 2; + grid-row-start: 1; + } +} +@media (min-width: 768px){ + + .alert-banner__list{ + grid-column: span 1 / span 1; + grid-row-start: 2; + } +} +@media (min-width: 1024px){ + + .alert-banner__list{ + grid-column: span 1 / span 1; + grid-row-start: 1; + } +} +.alert-banner__link {} +.alert-banner__close{ + position: absolute; + top: 0px; + right: 0px; +} +.alert-banner__close svg{ + height: 2rem; + width: 2rem; +} +.alert-banner--alert, .alert-banner--error{ + --tw-bg-opacity: 1; + background-color: rgb(128 21 25 / var(--tw-bg-opacity)); +} +.alert-banner--info{ + --tw-bg-opacity: 1; + background-color: rgb(30 64 175 / var(--tw-bg-opacity)); +} +.alert-banner--warning{ + --tw-bg-opacity: 1; + background-color: rgb(194 65 12 / var(--tw-bg-opacity)); +} +.alert-banner--success{ + --tw-bg-opacity: 1; + background-color: rgb(4 120 87 / var(--tw-bg-opacity)); +} +/*----------------------------------------*\ + NOTIFICATION BANNER +\*----------------------------------------*/ +@media (min-width: 1024px){ + + .notification-banner{ + display: flex; + flex-wrap: nowrap; + align-items: flex-end; + justify-content: space-between; + } +} +.notification-banner{ + padding-left: 0px; + padding-right: 0px; + padding-top: 1rem; + padding-bottom: 1rem; +} +@media (min-width: 640px){ + + .notification-banner{ + padding-top: 2rem; + padding-bottom: 2rem; + } +} +@media (min-width: 1024px){ + + .notification-banner{ + padding-top: 2.5rem; + padding-bottom: 2.5rem; + } +} +.notification-banner{ + font-size: 0.875rem; +} +@media (min-width: 1280px){ + + .notification-banner{ + font-size: 1rem; + } +} +@media (min-width: 1800px){ + + .notification-banner{ + font-size: 1.125rem; + } +} +.notification-banner{ + --tw-shadow: 0px 0px 0px 0px rgba(0,0,0,0); + --tw-shadow-colored: 0px 0px 0px 0px var(--tw-shadow-color); + box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow); +} +.notification-banner--fixed{ + position: fixed; + right: 0px; + bottom: 0px; + left: 0px; + z-index: 50; + width: 100vw; + border-width: 1px; + border-top-width: 1px; + --tw-border-opacity: 1; + border-color: rgb(255 255 255 / var(--tw-border-opacity)); + --tw-shadow: 0px 10px 20px 0px rgba(0,0,0,0.06), 1px 10px 70px -8px rgba(0,0,0,0.13); + --tw-shadow-colored: 0px 10px 20px 0px var(--tw-shadow-color), 1px 10px 70px -8px var(--tw-shadow-color); + box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow); +} +.notification-banner__wrapper{ + margin-left: auto; + margin-right: auto; + padding-left: 1rem; + padding-right: 1rem; +} +@media (min-width: 480px){ + + .notification-banner__wrapper{ + padding-left: 1.75rem; + padding-right: 1.75rem; + } +} +@media (min-width: 640px){ + + .notification-banner__wrapper{ + padding-left: 2.25rem; + padding-right: 2.25rem; + } +} +@media (min-width: 1024px){ + + .notification-banner__wrapper{ + padding-left: 2.5rem; + padding-right: 2.5rem; + } +} +@media (min-width: 1280px){ + + .notification-banner__wrapper{ + padding-left: 3rem; + padding-right: 3rem; + } +} +@media (min-width: 1800px){ + + .notification-banner__wrapper{ + padding-left: 4rem; + padding-right: 4rem; + } +} +.notification-banner__wrapper{ + width: 100%; +} +@media (min-width: 1536px){ + + .notification-banner__wrapper{ + max-width: 1536px; + } +} +@media (min-width: 1800px){ + + .notification-banner__wrapper{ + max-width: 1680px; + } +} +.top-bar__bar .notification-banner__wrapper{ + height: 100%; +} +.top-header__mobile-title .notification-banner__wrapper{ + padding-top: 0.5rem; + padding-bottom: 0.5rem; +} +@media (min-width: 480px){ + + .top-header__mobile-title .notification-banner__wrapper{ + padding-top: 0px; + padding-bottom: 0px; + } +} +.storybook-demo-grid .notification-banner__wrapper--grid > div, .storybook-demo-grid .notification-banner__wrapper > div{ + padding: 1.5rem; + text-align: center; + font-size: 1.25rem; + --tw-text-opacity: 1; + color: rgb(76 29 149 / var(--tw-text-opacity)); + --tw-bg-opacity: 1; + background-color: rgb(245 243 255 / var(--tw-bg-opacity)); + border-width: 1px; + border-style: dashed; + --tw-border-opacity: 1; + border-color: rgb(124 58 237 / var(--tw-border-opacity)); +} +@media (min-width: 1024px){ + + .notification-banner__wrapper{ + display: flex; + flex-wrap: nowrap; + align-items: flex-start; + justify-content: space-between; + } +} +.notification-banner .btn{ + margin-top: 1rem; +} +@media (min-width: 640px){ + + .notification-banner .btn{ + margin-top: 2rem; + } +} +@media (min-width: 1024px){ + + .notification-banner .btn{ + margin-top: 0px; + margin-left: 1.5rem; + } +} +.notification-banner .btn__text{ + white-space: nowrap; +} +/*----------------------------------------*\ + PAGINATION +\*----------------------------------------*/ +.pagination{ + display: flex; + align-items: stretch; +} +.pagination > :not([hidden]) ~ :not([hidden]){ + --tw-space-x-reverse: 0; + margin-right: calc(0.75rem * var(--tw-space-x-reverse)); + margin-left: calc(0.75rem * calc(1 - var(--tw-space-x-reverse))); +} +.pagination input{ + height: 100%; + width: 3rem; + padding-left: 0.5rem; + padding-right: 0.5rem; + text-align: center; + min-height: 44px; +} +@media (min-width: 1280px){ + + .pagination input{ + min-height: 48px; + } +} +@media (min-width: 1800px){ + + .pagination input{ + min-height: 52px; + } +} +.pagination input{ + font-size: 1rem; +} +@media (min-width: 1280px){ + + .pagination input{ + font-size: 1.125rem; + } +} +@media (min-width: 1800px){ + + .pagination input{ + font-size: 1.25rem; + } +} +.pagination input{ + line-height: 1.25rem; +} +@media (min-width: 1024px){ + + .pagination input{ + line-height: 1.5rem; + } +} +.pagination .pagination__text{ + display: flex; + align-items: center; +} +.pagination ul{ + display: flex; + flex-wrap: wrap; + align-items: center; + white-space: nowrap; + height: 100%; +} +.pagination ul > :not([hidden]) ~ :not([hidden]){ + --tw-space-x-reverse: 0; + margin-right: calc(0.25rem * var(--tw-space-x-reverse)); + margin-left: calc(0.25rem * calc(1 - var(--tw-space-x-reverse))); +} +@media (min-width: 1024px){ + + .pagination ul > :not([hidden]) ~ :not([hidden]){ + --tw-space-x-reverse: 0; + margin-right: calc(0.5rem * var(--tw-space-x-reverse)); + margin-left: calc(0.5rem * calc(1 - var(--tw-space-x-reverse))); + } +} +@media (min-width: 1280px){ + + .pagination ul > :not([hidden]) ~ :not([hidden]){ + --tw-space-x-reverse: 0; + margin-right: calc(0.75rem * var(--tw-space-x-reverse)); + margin-left: calc(0.75rem * calc(1 - var(--tw-space-x-reverse))); + } +} +.pagination--extended li{ + margin-bottom: 0.75rem; +} +.pagination--right{ + display: flex; + justify-content: flex-end; + padding-top: 1.5rem; + padding-bottom: 1.5rem; +} +@media (min-width: 1024px){ + + .pagination--right{ + padding-top: 1.75rem; + padding-bottom: 1.75rem; + } +} +@media (min-width: 1536px){ + + .pagination--right{ + padding-top: 2rem; + padding-bottom: 2rem; + } +} +/*----------------------------------------*\ + PROGRESS +\*----------------------------------------*/ +.select{ + position: relative; +} +.select select{ + box-sizing: border-box; + -webkit-appearance: none; + -moz-appearance: none; + appearance: none; + padding-right: 5rem; +} +.select--bare{ + display: inline-block; + width: auto; + margin-top: 0px !important; +} +.select--bare select{ + display: inline-block; + padding-right: 1.5rem; + border-color: transparent; + background-color: transparent; + --tw-shadow-color: transparent; + --tw-shadow: var(--tw-shadow-colored); +} +.select--bare select:focus{ + outline: 2px solid transparent; + outline-offset: 2px; +} +.select--bare .select__icon{ + width: 1.5rem; + border-left-width: 0px; +} +.select--bare .input--negative + .select__icon{ + background-color: transparent; +} +select:disabled, .input--disabled select{ + opacity: 0.4; +} +select:disabled + .select__icon, .input--disabled select + .select__icon{ + opacity: 0.4; +} +.select__icon{ + height: 100%; + width: 3rem; + display: flex; + align-items: center; + justify-content: center; + position: absolute; + top: 0px; + right: 0px; + border-left-width: 1px; + --tw-border-opacity: 1; + border-color: rgb(107 114 128 / var(--tw-border-opacity)); + pointer-events: none; +} +.select__icon svg{ + height: 100%; + width: 2rem; +} +.input--negative + .select__icon{ + --tw-text-opacity: 1; + color: rgb(255 255 255 / var(--tw-text-opacity)); + --tw-border-opacity: 1; + border-color: rgb(130 142 154 / var(--tw-border-opacity)); + --tw-bg-opacity: 1; + background-color: rgb(70 89 107 / var(--tw-bg-opacity)); +} +.input--negative + .select__icon svg{ + fill: currentColor; +} +.input--error + .select__icon{ + --tw-border-opacity: 1; + border-color: rgb(252 101 107 / var(--tw-border-opacity)); + --tw-text-opacity: 1; + color: rgb(191 31 37 / var(--tw-text-opacity)); +} +.input--error + .select__icon svg{ + fill: currentColor; +} +.input--error.input--negative + .select__icon{ + --tw-border-opacity: 1; + border-color: rgb(250 157 161 / var(--tw-border-opacity)); + --tw-text-opacity: 1; + color: rgb(255 204 206 / var(--tw-text-opacity)); +} +.input--error.input--negative + .select__icon svg{ + fill: currentColor; +} +.input--negative option{ + --tw-bg-opacity: 1; + background-color: rgb(47 67 86 / var(--tw-bg-opacity)); +} +.input--negative option:hover{ + --tw-bg-opacity: 1; + background-color: rgb(70 89 107 / var(--tw-bg-opacity)); +} +.input--negative option{ + --tw-text-opacity: 1; + color: rgb(255 255 255 / var(--tw-text-opacity)); +} +/*----------------------------------------*\ + STEPS +\*----------------------------------------*/ +/*----------------------------------------*\ + TAB +\*----------------------------------------*/ +.container__center--xs .tabs{ + padding-top: 2rem; + padding-bottom: 2rem; +} +.container__center--xs .tabs, .container__center--xs .tabs-centered { + --side-margin: calc(1rem * -1); + } +@media (min-width: 480px) { + .container__center--xs .tabs, .container__center--xs .tabs-centered { + --side-margin: calc(1.75rem * -1); + } + } +@media (min-width: 640px) { + .container__center--xs .tabs, .container__center--xs .tabs-centered { + --side-margin: calc((100vw - 6em ) / -12 ); + } + } +@media (min-width: 1280px) { + .container__center--xs .tabs, .container__center--xs .tabs-centered { + --side-margin: calc((1280px - 6em ) / -12 ); + } + } +@media (min-width: 1536px) { + .container__center--xs .tabs, .container__center--xs .tabs-centered { + --side-margin: calc((1536px - 6em ) / -12 ); + } + } +.container__center--xs .tabs, .container__center--xs .tabs-centered{ + + margin-left: var(--side-margin); + margin-right: var(--side-margin); + + padding-left: calc(var(--side-margin) * -1); + padding-right: calc(var(--side-margin) * -1); +} +@media (min-width: 768px) { + + .container__center--xs .tabs { + padding-left: 0; + padding-right: 0 + } + } +.tab__controls-container{ + position: relative; +} +.tab__controls-container::after { + content: ''; + position: absolute; + right: 0px; + top: 0px; + bottom: 0.25rem; + width: 2.5rem; + pointer-events: none; + background-image: linear-gradient(to left, var(--tw-gradient-stops)); + --tw-gradient-from: #ffffff; + --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to, rgb(255 255 255 / 0)); + } +.bg--secondary-50 .tab__controls-container::after{ + background-image: linear-gradient(to left, var(--tw-gradient-stops)); + --tw-gradient-from: #f0f4f7; + --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to, rgb(240 244 247 / 0)); +} +@media (min-width: 640px) { +.tab__controls-container::after{ + width: 5rem; + } + } +.tab__controls{ + display: flex; + overflow-x: auto; + overflow-y: hidden; + white-space: nowrap; + border-bottom-width: 1px; +} +.bg--secondary-50 .tab__controls{ + --tw-border-opacity: 1; + border-color: rgb(209 213 219 / var(--tw-border-opacity)); +} +.tab__controls{ + -ms-overflow-style: none; + scrollbar-width: none; +} +/* hide scrollbar with ability to still scroll */ +.tab__controls::-webkit-scrollbar { + display: none; + } +.tab__control{ + position: relative; + padding-left: 1rem; + padding-right: 1rem; + padding-top: 1rem; + padding-bottom: 1rem; +} +.tab__control::after { + content:''; + display: block; + height: 3px; + position: absolute; + right: 1rem; + bottom: 0px; + left: 1rem; + transition-property: color, background-color, border-color, fill, stroke, opacity, box-shadow, transform, filter, -webkit-text-decoration-color, -webkit-backdrop-filter; + transition-property: color, background-color, border-color, text-decoration-color, fill, stroke, opacity, box-shadow, transform, filter, backdrop-filter; + transition-property: color, background-color, border-color, text-decoration-color, fill, stroke, opacity, box-shadow, transform, filter, backdrop-filter, -webkit-text-decoration-color, -webkit-backdrop-filter; + transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1); + transition-duration: 150ms; + } +.tab__control.tab__control--active::after, .tab__control:hover::after{ + --tw-bg-opacity: 1; + background-color: rgb(229 57 64 / var(--tw-bg-opacity)); +} +.tab__control:hover:not(.tab__control--active){ + --tw-text-opacity: 1; + color: rgb(216 35 42 / var(--tw-text-opacity)); +} +.tab__control:first-child{ + padding-left: 0px; +} +.tab__control:first-child::after{ + left: 0px; +} +.tab__container.vertical-spacing{ + padding-top: 2rem; +} +.tab__container.tab__container--is-hidden{ + display: none; +} +.desktop-menu__drawer.tab__container.tab__container--is-hidden { + display: block; + height: 0; + overflow: hidden; + padding: 0px; + opacity: 0; + transition: opacity 300ms, height 1ms 300ms, padding 1ms 300ms; + } +.desktop-menu__drawer.tab__container.tab__container--is-hidden > *{ + --tw-translate-y: -2rem; + transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y)); + transition-property: transform; + transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1); + transition-duration: 300ms; +} +.desktop-menu__overlay.tab__container.tab__container--is-hidden { + display: block; + height: 0; + overflow: hidden; + padding: 0px; + opacity: 0; + transition: opacity 300ms, height 1ms 300ms; + } +table, .table{ + width: 100%; + border-width: 1px; + --tw-border-opacity: 1; + border-color: rgb(229 231 235 / var(--tw-border-opacity)); + --tw-shadow: 0px 2px 4px -1px rgba(0,0,0,0.06), 0px 4px 10px -1px rgba(0,0,0,0.08); + --tw-shadow-colored: 0px 2px 4px -1px var(--tw-shadow-color), 0px 4px 10px -1px var(--tw-shadow-color); + box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow); +} +thead{ + --tw-bg-opacity: 1; + background-color: rgb(240 244 247 / var(--tw-bg-opacity)); +} +thead th{ + padding-left: 1.5rem; + padding-right: 1.5rem; + padding-top: 1rem; + padding-bottom: 1rem; + text-align: left; + font-size: 0.875rem; + text-transform: uppercase; + --tw-text-opacity: 1; + color: rgb(55 65 81 / var(--tw-text-opacity)); +} +tbody tr{ + border-top-width: 1px; + --tw-border-opacity: 1; + border-color: rgb(209 213 219 / var(--tw-border-opacity)); +} +tbody td, tbody th{ + padding-left: 1.5rem; + padding-right: 1.5rem; + padding-top: 1rem; + padding-bottom: 1rem; + font-size: 1rem; + --tw-text-opacity: 1; + color: rgb(75 85 99 / var(--tw-text-opacity)); +} +tbody th{ + text-align: left; + font-family: FrutigerNeueLTPro-Bold, Hind, Fallback-font; + font-weight: 400; + --tw-text-opacity: 1; + color: rgb(31 41 55 / var(--tw-text-opacity)); +} +.table--compact{ + border-width: 0px; + --tw-shadow: 0px 0px 0px 0px rgba(0,0,0,0); + --tw-shadow-colored: 0px 0px 0px 0px var(--tw-shadow-color); + box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow); +} +.table--compact thead th{ + padding-top: 0.75rem; + padding-bottom: 0.75rem; + padding-right: 1rem; + padding-left: 0px; +} +.table--compact tbody td, .table--compact tbody th{ + padding-top: 0.75rem; + padding-bottom: 0.75rem; + padding-right: 1rem; + padding-left: 0px; +} +/*----------------------------------------*\ + TOGGLE +\*----------------------------------------*/ +/*----------------------------------------*\ + CAROUSEL +\*----------------------------------------*/ +/*----------------------------------------*\ + LANGUAGE SWITCHER +\*----------------------------------------*/ +.language-switcher{ + display: flex; + height: 100%; + cursor: pointer; +} +.language-switcher .form__group__select, .language-switcher .select{ + height: 100%; +} +.language-switcher select{ + height: 100%; + width: 5em; +} +@media (min-width: 1536px){ + + .language-switcher select{ + width: 4.5em; + } +} +.language-switcher select{ + cursor: pointer; +} +.language-switcher select:hover{ + --tw-text-opacity: 1; + color: rgb(209 213 219 / var(--tw-text-opacity)); +} +.language-switcher select:focus{ + --tw-text-opacity: 1; + color: rgb(209 213 219 / var(--tw-text-opacity)); +} +.language-switcher select{ + transition-property: color, background-color, border-color, fill, stroke, -webkit-text-decoration-color; + transition-property: color, background-color, border-color, text-decoration-color, fill, stroke; + transition-property: color, background-color, border-color, text-decoration-color, fill, stroke, -webkit-text-decoration-color; + transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1); + transition-duration: 150ms; +} +.language-switcher option:disabled{ + --tw-text-opacity: 1; + color: rgb(156 163 175 / var(--tw-text-opacity)); +} +.language-switcher .select__icon{ + width: 1.75rem; + transition-property: color, background-color, border-color, fill, stroke, -webkit-text-decoration-color; + transition-property: color, background-color, border-color, text-decoration-color, fill, stroke; + transition-property: color, background-color, border-color, text-decoration-color, fill, stroke, -webkit-text-decoration-color; + transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1); + transition-duration: 150ms; +} +.language-switcher select:hover + .select__icon, .language-switcher select:focus + .select__icon{ + --tw-text-opacity: 1; + color: rgb(209 213 219 / var(--tw-text-opacity)); +} +/*----------------------------------------*\ + MAIN SEARCH +\*----------------------------------------*/ +.search--main{ + display: flex; + position: relative; + z-index: 50; +} +.search--main .form__group__input{ + height: 100%; + width: 100%; + position: absolute; + right: 0px; +} +.search--main input{ + --tw-bg-opacity: 0; + position: absolute; + right: 0px; + z-index: 30; + cursor: pointer; + opacity: 0; + --tw-shadow: 0px 0px 0px 0px rgba(0,0,0,0); + --tw-shadow-colored: 0px 0px 0px 0px var(--tw-shadow-color); + box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow); + transition-property: all; + transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1); + transition-duration: 300ms; +} +.search--main input:focus{ + width: 40vw; +} +@media (min-width: 480px){ + + .search--main input:focus{ + width: 35vw; + } +} +@media (min-width: 1024px){ + + .search--main input:focus{ + width: 18rem; + } +} +.search--main input:focus{ + padding-right: 2.5rem; + z-index: 0; + opacity: 1; + cursor: text; + --tw-shadow: 0px 10px 20px 0px rgba(0,0,0,0.06), 1px 10px 70px -8px rgba(0,0,0,0.13); + --tw-shadow-colored: 0px 10px 20px 0px var(--tw-shadow-color), 1px 10px 70px -8px var(--tw-shadow-color); + box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow); +} +.form__group__input:focus-within + .search__button > .search__button__title{ + display: none; +} +.desktop-menu__drawer.form__group__input:focus-within + .search__button > .search__button__title { + display: block; + height: 0; + overflow: hidden; + padding: 0px; + opacity: 0; + transition: opacity 300ms, height 1ms 300ms, padding 1ms 300ms; + } +.desktop-menu__drawer.form__group__input:focus-within + .search__button > .search__button__title > *{ + --tw-translate-y: -2rem; + transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y)); + transition-property: transform; + transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1); + transition-duration: 300ms; +} +.desktop-menu__overlay.form__group__input:focus-within + .search__button > .search__button__title { + display: block; + height: 0; + overflow: hidden; + padding: 0px; + opacity: 0; + transition: opacity 300ms, height 1ms 300ms; + } +.search__button{ + display: flex; + align-items: center; +} +@media (min-width: 1024px){ + + .search__button{ + padding: 0.25rem; + } +} +@media (min-width: 1280px){ + + .search__button{ + padding: 0.5rem; + } +} +@media (min-width: 1536px){ + + .search__button{ + padding-top: 0.75rem; + padding-bottom: 0.75rem; + } +} +.search__button{ + position: relative; + z-index: 10; +} +.search__button__title{ + position: absolute; + width: 1px; + height: 1px; + padding: 0; + margin: -1px; + overflow: hidden; + clip: rect(0, 0, 0, 0); + white-space: nowrap; + border-width: 0; +} +@media (min-width: 1024px){ + + .search__button__title{ + position: static; + width: auto; + height: auto; + padding: 0; + margin: 0; + overflow: visible; + clip: auto; + white-space: normal; + margin-top: -0.125rem; + padding-right: 0.75rem; + } +} +.search__button__icon{ + width: 2.5rem; +} +@media (min-width: 1024px){ + + .search__button__icon{ + width: 1.75rem; + } +} +.search__button__icon svg { + stroke-width: 0.5px; + } +.body--search-is-open .logo{ + opacity: 0; +} +@media (min-width: 480px){ + + .body--search-is-open .logo{ + opacity: 1; + } +} +/*----------------------------------------*\ + TOP BAR SEARCH +\*----------------------------------------*/ +.search {} +.search--negative{ + --tw-bg-opacity: 1; + background-color: rgb(70 89 107 / var(--tw-bg-opacity)); +} +.search__group{ + position: relative; + display: flex; + align-items: stretch; + justify-content: space-between; +} +.search__group label{ + position: absolute; + width: 1px; + height: 1px; + padding: 0; + margin: -1px; + overflow: hidden; + clip: rect(0, 0, 0, 0); + white-space: nowrap; + border-width: 0; +} +.search__group input{ + height: 100%; +} +@media (min-width: 1024px){ + + .search__group input{ + padding-top: 1rem; + padding-bottom: 1rem; + } +} +.search__group input{ + padding-right: 3rem; + margin-top: 0 !important; /* TODO improve this */ --tw-bg-opacity: 1; background-color: rgb(255 255 255 / var(--tw-bg-opacity)); +} +.search--negative .search__group input{ + --tw-bg-opacity: 1; + background-color: rgb(70 89 107 / var(--tw-bg-opacity)); + position: relative; + z-index: 10; +} +.search--negative .search__group input::-moz-placeholder{ + --tw-text-opacity: 1; + color: rgb(223 228 233 / var(--tw-text-opacity)); +} +.search--negative .search__group input:-ms-input-placeholder{ + --tw-text-opacity: 1; + color: rgb(223 228 233 / var(--tw-text-opacity)); +} +.search--negative .search__group input::placeholder{ + --tw-text-opacity: 1; + color: rgb(223 228 233 / var(--tw-text-opacity)); +} +.search--large .search__group{ + height: 4rem; +} +.search--large .search__group input{ + font-family: FrutigerNeueLTPro-Bold, Hind, Fallback-font; + font-size: 1.25rem; + font-weight: 400; + --tw-shadow: 0px 0px 0px 0px rgba(0,0,0,0); + --tw-shadow-colored: 0px 0px 0px 0px var(--tw-shadow-color); + box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow); +} +.search__group .btn{ + position: absolute; + top: 0px; + right: 0px; + bottom: 0px; + z-index: 20; +} +.search__field{ + font-family: FrutigerNeueLTPro-Bold, Hind, Fallback-font; + font-size: 1.375rem; + font-weight: 400; + padding: 0.75rem; + width: 100%; + outline: 2px solid transparent; + outline-offset: 2px; +} +.search__field::-moz-placeholder{ + --tw-text-opacity: 1; + color: rgb(172 180 189 / var(--tw-text-opacity)); +} +.search__field:-ms-input-placeholder{ + --tw-text-opacity: 1; + color: rgb(172 180 189 / var(--tw-text-opacity)); +} +.search__field::placeholder{ + --tw-text-opacity: 1; + color: rgb(172 180 189 / var(--tw-text-opacity)); +} +.search--negative .search__field{ + --tw-text-opacity: 1; + color: rgb(255 255 255 / var(--tw-text-opacity)); + --tw-bg-opacity: 1; + background-color: rgb(70 89 107 / var(--tw-bg-opacity)); +} +.search__icon{ + margin-left: 0.75rem; + margin-right: 0.75rem; + height: 2rem; + --tw-text-opacity: 1; + color: rgb(255 255 255 / var(--tw-text-opacity)); +} +.search__results{ + height: 24rem; + width: 100%; + overflow-y: scroll; + overflow-x: hidden; +} +.search__results--negative{ + border-width: 1px; + --tw-border-opacity: 1; + border-color: rgb(89 105 120 / var(--tw-border-opacity)); +} +/*----------------------------------------*\ + SEARCH RESULTS PAGE +\*----------------------------------------*/ +@media (min-width: 1024px){ + + .search--page-result{ + width: 80%; + } +} +@media (min-width: 1280px){ + + .search--page-result{ + width: 66.666667%; + } +} +.search--page-result{ + padding-top: 1rem; +} +@media (min-width: 768px){ + + .search--page-result{ + padding-top: 1.5rem; + } +} +@media (min-width: 1536px){ + + .search--page-result{ + padding-top: 2rem; + } +} +.search--page-result svg{ + height: 2.5rem; + width: 2.5rem; + stroke-width: 0; +} +.search-results--list {} +.search-results--grid .search-results-list{ + display: grid; + grid-template-columns: repeat(1, minmax(0, 1fr)); +} +@media print { + + .search-results--grid .search-results-list { + display: block; /* needed so that content in grid don't break the break-inside rule */ + } +} +.search-results--grid .search-results-list { /* default Tailwind value */ } +.search-results--grid .search-results-list + .grid{ + margin-top: 1.25rem; +} +@media (min-width: 480px){ + + .search-results--grid .search-results-list + .grid{ + margin-top: 1.75rem; + } +} +@media (min-width: 640px){ + + .search-results--grid .search-results-list + .grid{ + margin-top: 2.25rem; + } +} +@media (min-width: 1024px){ + + .search-results--grid .search-results-list + .grid{ + margin-top: 2.5rem; + } +} +@media (min-width: 1280px){ + + .search-results--grid .search-results-list + .grid{ + margin-top: 3rem; + } +} +@media (min-width: 1800px){ + + .search-results--grid .search-results-list + .grid{ + margin-top: 4rem; + } +} +.search-results--grid .search-results-list + .section__subtitle{ + padding-top: 3rem; +} +@media (min-width: 1024px){ + + .search-results--grid .search-results-list + .section__subtitle{ + padding-top: 4rem; + } +} +@media (min-width: 1800px){ + + .search-results--grid .search-results-list + .section__subtitle{ + padding-top: 5rem; + } +} +.storybook-demo-ratio .search-results--grid .search-results-list > div > div > *{ + padding: 1.5rem; + text-align: center; + font-size: 1.25rem; + --tw-text-opacity: 1; + color: rgb(76 29 149 / var(--tw-text-opacity)); + --tw-bg-opacity: 1; + background-color: rgb(245 243 255 / var(--tw-bg-opacity)); + border-width: 1px; + border-style: dashed; + --tw-border-opacity: 1; + border-color: rgb(124 58 237 / var(--tw-border-opacity)); +} +@media (min-width: 768px){ + + .search-results--grid .search-results-list{ + grid-template-columns: repeat(2, minmax(0, 1fr)); + } +} +@media (min-width: 1024px){ + + .search-results--grid .search-results-list{ + grid-template-columns: repeat(3, minmax(0, 1fr)); + } +} +.search-results--grid .search-results-list{ + gap: 1.25rem; +} +@media (min-width: 480px){ + + .search-results--grid .search-results-list{ + gap: 1.75rem; + } +} +@media (min-width: 640px){ + + .search-results--grid .search-results-list{ + gap: 2.25rem; + } +} +@media (min-width: 1024px){ + + .search-results--grid .search-results-list{ + gap: 2.5rem; + } +} +@media (min-width: 1280px){ + + .search-results--grid .search-results-list{ + gap: 3rem; + } +} +@media (min-width: 1800px){ + + .search-results--grid .search-results-list{ + gap: 4rem; + } +} +.search-results--grid .search-results-list{ + padding-top: 1.25rem; +} +@media (min-width: 480px){ + + .search-results--grid .search-results-list{ + padding-top: 1.75rem; + } +} +@media (min-width: 640px){ + + .search-results--grid .search-results-list{ + padding-top: 2.25rem; + } +} +@media (min-width: 1024px){ + + .search-results--grid .search-results-list{ + padding-top: 2.5rem; + } +} +@media (min-width: 1280px){ + + .search-results--grid .search-results-list{ + padding-top: 3rem; + } +} +@media (min-width: 1800px){ + + .search-results--grid .search-results-list{ + padding-top: 4rem; + } +} +.search-results__tabs{ + padding-top: 2rem; +} +@media (min-width: 640px){ + + .search-results__tabs{ + padding-top: 3rem; + } +} +@media (min-width: 1536px){ + + .search-results__tabs{ + padding-top: 4rem; + } +} +.search-results__header{ + display: flex; + flex-wrap: wrap; + align-items: center; + justify-content: space-between; + gap: 1rem; + font-size: 0.875rem; +} +@media (min-width: 1280px){ + + .search-results__header{ + font-size: 1rem; + } +} +@media (min-width: 1800px){ + + .search-results__header{ + font-size: 1.125rem; + } +} +.search-results__header{ + padding-top: 1rem; +} +@media (min-width: 640px){ + + .search-results__header{ + padding-top: 1.5rem; + } +} +@media (min-width: 1536px){ + + .search-results__header{ + padding-top: 2rem; + } +} +.search-results__header{ + padding-bottom: 0.5rem; +} +@media (min-width: 640px){ + + .search-results__header{ + padding-bottom: 0.75rem; + } +} +@media (min-width: 1536px){ + + .search-results__header{ + padding-bottom: 1rem; + } +} +.search-results__header{ + border-bottom-width: 1px; + --tw-border-opacity: 1; + border-color: rgb(130 142 154 / var(--tw-border-opacity)); +} +.search-results__header strong{ + margin-right: 1ex; + display: block; + font-family: FrutigerNeueLTPro-Regular, Hind, Fallback-font, Sans-Serif; +} +@media (min-width: 640px){ + + .search-results__header strong{ + display: inline; + } +} +.search-results__header__left{ + display: flex; + align-items: stretch; +} +.search-results__occurences{ + display: flex; + align-items: center; +} +.search-results__header__right{ + margin-left: auto; + display: flex; +} +.search-results__header__right select{ + text-align: right; +} +.search-results .notification{ + margin-top: 4rem; + margin-bottom: 4rem; +} +.search-results__no-results{ + padding-top: 3.5rem; + padding-bottom: 3.5rem; +} +@media (min-width: 1024px){ + + .search-results__no-results{ + padding-top: 5rem; + padding-bottom: 5rem; + } +} +@media (min-width: 1800px){ + + .search-results__no-results{ + padding-top: 8rem; + padding-bottom: 8rem; + } +} +.search-results__no-results h2, .search-results__no-results ul{ + margin-bottom: 1.5rem; +} +@media (min-width: 1024px){ + + .search-results__no-results h2, .search-results__no-results ul{ + margin-bottom: 2rem; + } +} +@media (min-width: 1536px){ + + .search-results__no-results h2, .search-results__no-results ul{ + margin-bottom: 2.5rem; + } +} +.search__filters{ + margin-top: 1rem; +} +.search__filters__actions{ + display: flex; + flex-wrap: wrap; + -moz-column-gap: 0.5rem; + column-gap: 0.5rem; +} +.search__filters__drawer{ + display: grid; +} +@media print { + + .search__filters__drawer { + display: block; /* needed so that content in grid don't break the break-inside rule */ + } +} +.search__filters__drawer { /* default Tailwind value */ } +.search__filters__drawer + .grid{ + margin-top: 1.25rem; +} +@media (min-width: 480px){ + + .search__filters__drawer + .grid{ + margin-top: 1.75rem; + } +} +@media (min-width: 640px){ + + .search__filters__drawer + .grid{ + margin-top: 2.25rem; + } +} +@media (min-width: 1024px){ + + .search__filters__drawer + .grid{ + margin-top: 2.5rem; + } +} +@media (min-width: 1280px){ + + .search__filters__drawer + .grid{ + margin-top: 3rem; + } +} +@media (min-width: 1800px){ + + .search__filters__drawer + .grid{ + margin-top: 4rem; + } +} +.search__filters__drawer + .section__subtitle{ + padding-top: 3rem; +} +@media (min-width: 1024px){ + + .search__filters__drawer + .section__subtitle{ + padding-top: 4rem; + } +} +@media (min-width: 1800px){ + + .search__filters__drawer + .section__subtitle{ + padding-top: 5rem; + } +} +.storybook-demo-ratio .search__filters__drawer > div > div > *{ + padding: 1.5rem; + text-align: center; + font-size: 1.25rem; + --tw-text-opacity: 1; + color: rgb(76 29 149 / var(--tw-text-opacity)); + --tw-bg-opacity: 1; + background-color: rgb(245 243 255 / var(--tw-bg-opacity)); + border-width: 1px; + border-style: dashed; + --tw-border-opacity: 1; + border-color: rgb(124 58 237 / var(--tw-border-opacity)); +} +@media (min-width: 768px){ + + .search__filters__drawer{ + grid-template-columns: repeat(2, minmax(0, 1fr)); + } +} +@media (min-width: 1024px){ + + .search__filters__drawer{ + grid-template-columns: repeat(3, minmax(0, 1fr)); + } +} +.search__filters__drawer{ + gap: 0.75rem; +} +@media (min-width: 1024px){ + + .search__filters__drawer{ + gap: 1rem; + } +} +.search__filters__drawer{ + padding-top: 1rem; +} +@media (min-width: 640px){ + + .search__filters__drawer{ + padding-top: 1.5rem; + } +} +@media (min-width: 1536px){ + + .search__filters__drawer{ + padding-top: 2rem; + } +} +.search__filters__drawer{ + padding-bottom: 0.5rem; +} +@media (min-width: 640px){ + + .search__filters__drawer{ + padding-bottom: 0.75rem; + } +} +@media (min-width: 1536px){ + + .search__filters__drawer{ + padding-bottom: 1rem; + } +} +.search__filters__drawer{ + margin-top: 1rem; +} +@media (min-width: 640px){ + + .search__filters__drawer{ + margin-top: 1.5rem; + } +} +@media (min-width: 1536px){ + + .search__filters__drawer{ + margin-top: 2rem; + } +} +.search__filters__drawer{ + border-top-width: 1px; + --tw-border-opacity: 1; + border-color: rgb(172 180 189 / var(--tw-border-opacity)); +} +.search__filters__tags{ + display: flex; + flex-wrap: wrap; + padding-top: 1rem; +} +@media (min-width: 640px){ + + .search__filters__tags{ + padding-top: 1.5rem; + } +} +@media (min-width: 1536px){ + + .search__filters__tags{ + padding-top: 2rem; + } +} +/*----------------------------------------*\ + DEPRECATED + TODO - remove when .search-result has been replaced + by .card.card--list component +\*----------------------------------------*/ +@media (min-width: 768px) { +.card--image-left.search-result, .card--image-right.search-result{ + border-style: none; + } + + .card--image-left.search-result .card__body, .card--image-right.search-result .card__body{ + padding-top: 0px; + } + } +.search-result.card--clickable:hover, .search-result.card--clickable:focus-within{ + background-color: transparent; + --tw-shadow: 0px 0px 0px 0px rgba(0,0,0,0); + --tw-shadow-colored: 0px 0px 0px 0px var(--tw-shadow-color); + box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow); +} +.search-result{ + padding-top: 1rem; + padding-bottom: 1rem; +} +@media (min-width: 1024px){ + + .search-result{ + padding-top: 1.5rem; + padding-bottom: 1.5rem; + } +} +@media (min-width: 1536px){ + + .search-result{ + padding-top: 2rem; + padding-bottom: 2rem; + } +} +.search-result{ + background-color: transparent; + border-bottom-width: 1px; + --tw-border-opacity: 1; + border-color: rgb(172 180 189 / var(--tw-border-opacity)); +} +.search-result .card__content{ + background-color: transparent; +} +.search-result .card__body{ + padding-left: 0px; + padding-right: 0px; + max-height: none; +} +.search-result .card__content:first-of-type .card__body{ + padding-top: 0px; + padding-bottom: 0px; +} +.search-result .card__footer{ + padding: 0px; +} +.accordion .accordion__drawer .search-result{ + margin-top: 0px; +} +.accordion .accordion__drawer .search-result:last-of-type{ + margin-bottom: 1rem; + border-bottom-width: 0px; +} +.search-result{ + display: block; +} +.search-result > :not([hidden]) ~ :not([hidden]){ + --tw-space-y-reverse: 0; + margin-top: calc(1rem * calc(1 - var(--tw-space-y-reverse))); + margin-bottom: calc(1rem * var(--tw-space-y-reverse)); +} +.search-result, .search-result:hover{ + color: inherit; + -webkit-text-decoration-line: none; + text-decoration-line: none; /* override general styling for links in main */ +} +@media (min-width: 640px) { +.search-result{ + display: grid; + -moz-column-gap: 1.5rem; + column-gap: 1.5rem; + } +@media print { + + .search-result { + display: block; /* needed so that content in grid don't break the break-inside rule */ + } +} +.search-result { /* default Tailwind value */ } +.search-result + .grid{ + margin-top: 1.25rem; + } +@media (min-width: 480px){ + + .search-result + .grid{ + margin-top: 1.75rem; + } + } +@media (min-width: 640px){ + + .search-result + .grid{ + margin-top: 2.25rem; + } + } +@media (min-width: 1024px){ + + .search-result + .grid{ + margin-top: 2.5rem; + } + } +@media (min-width: 1280px){ + + .search-result + .grid{ + margin-top: 3rem; + } + } +@media (min-width: 1800px){ + + .search-result + .grid{ + margin-top: 4rem; + } + } +.search-result + .section__subtitle{ + padding-top: 3rem; + } +@media (min-width: 1024px){ + + .search-result + .section__subtitle{ + padding-top: 4rem; + } + } +@media (min-width: 1800px){ + + .search-result + .section__subtitle{ + padding-top: 5rem; + } + } +.storybook-demo-ratio .search-result > div > div > *{ + padding: 1.5rem; + text-align: center; + font-size: 1.25rem; + --tw-text-opacity: 1; + color: rgb(76 29 149 / var(--tw-text-opacity)); + --tw-bg-opacity: 1; + background-color: rgb(245 243 255 / var(--tw-bg-opacity)); + border-width: 1px; + border-style: dashed; + --tw-border-opacity: 1; + border-color: rgb(124 58 237 / var(--tw-border-opacity)); + } +.search-result { + grid-template-columns: 4fr 1fr +} + } +.search-result .meta-info { + grid-column: 1 / 2; + } +.search-result__title { + grid-column: 1 / 2; + font-size: 1.25rem; +} +@media (min-width: 1024px){ + + .search-result__title{ + font-size: 1.375rem; + } +} +@media (min-width: 1280px){ + + .search-result__title{ + font-size: 1.625rem; + } +} +@media (min-width: 1800px){ + + .search-result__title{ + font-size: 2rem; + } +} +.search-result__title{ + line-height: 1.25; + font-family: FrutigerNeueLTPro-Bold, Hind, Fallback-font; + font-weight: 400; + transition-property: color, background-color, border-color, fill, stroke, -webkit-text-decoration-color; + transition-property: color, background-color, border-color, text-decoration-color, fill, stroke; + transition-property: color, background-color, border-color, text-decoration-color, fill, stroke, -webkit-text-decoration-color; + transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1); + transition-duration: 200ms; +} +.search-result:hover .search-result__title{ + --tw-text-opacity: 1; + color: rgb(216 35 42 / var(--tw-text-opacity)); +} +.search-result__description { + grid-column: 1 / 2; +} +.search-result__specs, .search-result__topics{ + font-size: 0.875rem; +} +@media (min-width: 1280px){ + + .search-result__specs, .search-result__topics{ + font-size: 1rem; + } +} +@media (min-width: 1800px){ + + .search-result__specs, .search-result__topics{ + font-size: 1.125rem; + } +} +.search-result__specs, .search-result__topics{ + --tw-text-opacity: 1; + color: rgb(107 114 128 / var(--tw-text-opacity)); + grid-column: 1 / 2; +} +.search-result__icons { + grid-column: 1 / 2; + display: flex; +} +.search-result__icons > :not([hidden]) ~ :not([hidden]){ + --tw-space-x-reverse: 0; + margin-right: calc(1rem * var(--tw-space-x-reverse)); + margin-left: calc(1rem * calc(1 - var(--tw-space-x-reverse))); +} +.search-result__image { + grid-column: 2 / 3; + grid-row: 1 / 10; + display: block; +} +@media (min-width: 640px){ + + .search-result__image{ + margin-top: 0px !important; + } +.search-result__image picture{ + display: block; + } +@media print { + + .search-result__image picture { + padding-bottom: 0; + } +} +.search-result__image picture{ + position: relative; + z-index: 50; + } +.search-result__image picture > *{ + height: 100%; + width: 100%; + position: absolute; + top: 0px; + right: 0px; + bottom: 0px; + left: 0px; + } +.search-result__image picture{ + padding-bottom: 98%; /* ratio 1:1, with visual correction */ + } +} +.search-result__image img{ + max-width: 50%; +} +@media (min-width: 640px){ + + .search-result__image img{ + max-width: none; + -o-object-fit: contain; + object-fit: contain; + -o-object-position: right top; + object-position: right top; + } +} +.search-result__image img{ + --tw-shadow: 0px 0px 0px 0px rgba(0,0,0,0); + --tw-shadow-colored: 0px 0px 0px 0px var(--tw-shadow-color); + box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow); +} +.search-results__sort{ + display: flex; + flex-wrap: wrap; + justify-content: flex-end; + -moz-column-gap: 1rem; + column-gap: 1rem; +} +.search-results__sort .form__group{ + display: flex; + -moz-column-gap: 1rem; + column-gap: 1rem; +} +/*----------------------------------------*\ + END - DEPRECATED +\*----------------------------------------*/ +/*----------------------------------------*\ + SEPARATOR +\*----------------------------------------*/ +.separator{ + display: block; + height: auto; + border-width: 0px; +} +.separator::before { + content: ''; + display: block; + width: 100%; + border-bottom-width: 1px; + --tw-border-opacity: 1; + border-color: rgb(172 180 189 / var(--tw-border-opacity)); +} +.bg--secondary-50 .separator::before{ + --tw-border-opacity: 1; + border-color: rgb(130 142 154 / var(--tw-border-opacity)); +} +.separator--xl::before{ + display: block; + width: 100%; + height: 1rem; +} +@media (min-width: 768px){ + + .separator--xl::before{ + height: 1.25rem; + } +} +@media (min-width: 1024px){ + + .separator--xl::before{ + height: 1.5rem; + } +} +.separator--xl::after { + content: ''; + display: block; + width: 100%; + height: 1rem; + } +@media (min-width: 768px){ + + .separator--xl::after{ + height: 1.25rem; + } +} +@media (min-width: 1024px){ + + .separator--xl::after{ + height: 1.5rem; + } +} +.separator--negative::before{ + --tw-border-opacity: 1; + border-color: rgb(89 105 120 / var(--tw-border-opacity)); +} +.separator--vertical{ + margin-left: 1rem; + margin-right: 1rem; + display: inline; + border-bottom-width: 0px; + border-right-width: 1px; + --tw-border-opacity: 1; + border-color: rgb(89 105 120 / var(--tw-border-opacity)); +} +.separator--vertical + .btn--bare{ + margin-left: -0.5rem; +} +/*----------------------------------------*\ + SHARE BAR +\*----------------------------------------*/ +.share-bar{ + display: flex; + flex-direction: row-reverse; + align-items: flex-end; + margin-top: 1.25rem; + margin-right: -0.75rem; +} +@media (min-width: 1024px){ + + .share-bar{ + margin-top: 1rem; + } +} +.share-url{ + display: flex; + flex-wrap: wrap; + align-items: center; + gap: 0.75rem; +} +@media (min-width: 480px){ + + .share-url{ + min-width: 22rem; + } +} +@media (min-width: 1280px){ + + .share-url{ + min-width: 24rem; + } +} +/*----------------------------------------*\ + LIST +\*----------------------------------------*/ +.list {} +.list--bare, main .list--bare{ + list-style-type: none; + padding-left: 0px; +} +.list--default, main ul:not([class]){ + list-style-type: disc; + list-style-position: outside; + padding-left: 1.25rem; +} +.list--default > :not([hidden]) ~ :not([hidden]), main ul:not([class]) > :not([hidden]) ~ :not([hidden]){ + --tw-space-y-reverse: 0; + margin-top: calc(0.5rem * calc(1 - var(--tw-space-y-reverse))); + margin-bottom: calc(0.5rem * var(--tw-space-y-reverse)); +} +.list--ordered, main ol:not([class]){ + list-style-type: decimal; + list-style-position: outside; + padding-left: 1.25rem; +} +.list--ordered > :not([hidden]) ~ :not([hidden]), main ol:not([class]) > :not([hidden]) ~ :not([hidden]){ + --tw-space-y-reverse: 0; + margin-top: calc(0.5rem * calc(1 - var(--tw-space-y-reverse))); + margin-bottom: calc(0.5rem * var(--tw-space-y-reverse)); +} +.list--roman{ + list-style-type: upper-roman; + list-style-position: inside; +} +.list--loose > :not([hidden]) ~ :not([hidden]){ + --tw-space-y-reverse: 0; + margin-top: calc(0.5rem * calc(1 - var(--tw-space-y-reverse))); + margin-bottom: calc(0.5rem * var(--tw-space-y-reverse)); +} +.list--negative{ + --tw-text-opacity: 1; + color: rgb(255 255 255 / var(--tw-text-opacity)); +} +.list--flex{ + display: flex; +} +.list--wrap{ + flex-wrap: wrap; +} +.list--icon{ + padding-left: 0px; +} +.list--icon li{ + display: flex; +} +.list--icon li > :not([hidden]) ~ :not([hidden]){ + --tw-space-x-reverse: 0; + margin-right: calc(0.5rem * var(--tw-space-x-reverse)); + margin-left: calc(0.5rem * calc(1 - var(--tw-space-x-reverse))); +} +.list--icon .icon--xl{ + position: relative; + top: -0.25rem; +} +.list--icon .icon--2xl{ + position: relative; + top: -0.5rem; +} +@media (min-width: 1024px){ + + .list--icon .icon--2xl{ + top: -0.75rem; + } +} +@media (min-width: 1800px){ + + .list--icon .icon--2xl{ + top: -0.875rem; + } +} +/*----------------------------------------*\ + PORTRAIT +\*----------------------------------------*/ +.portrait{ + display: flex; + flex-direction: column; + align-items: center; +} +@media (min-width: 1024px){ + + .portrait{ + padding-top: 1.5rem; + padding-bottom: 1.5rem; + display: grid; + align-items: flex-start; + } +@media print { + + .portrait { + display: block; /* needed so that content in grid don't break the break-inside rule */ + } +} +.portrait{ + gap: 1.25rem; + } +@media (min-width: 480px){ + + .portrait{ + gap: 1.75rem; + } + } +@media (min-width: 640px){ + + .portrait{ + gap: 2.25rem; + } + } +@media (min-width: 1024px){ + + .portrait{ + gap: 2.5rem; + } + } +@media (min-width: 1280px){ + + .portrait{ + gap: 3rem; + } + } +@media (min-width: 1800px){ + + .portrait{ + gap: 4rem; + } + } +.portrait { /* default Tailwind value */ } +@media (min-width: 768px){ + + .portrait{ + grid-template-columns: repeat(2, minmax(0, 1fr)); + } + } +.portrait + .grid{ + margin-top: 1.25rem; + } +@media (min-width: 480px){ + + .portrait + .grid{ + margin-top: 1.75rem; + } + } +@media (min-width: 640px){ + + .portrait + .grid{ + margin-top: 2.25rem; + } + } +@media (min-width: 1024px){ + + .portrait + .grid{ + margin-top: 2.5rem; + } + } +@media (min-width: 1280px){ + + .portrait + .grid{ + margin-top: 3rem; + } + } +@media (min-width: 1800px){ + + .portrait + .grid{ + margin-top: 4rem; + } + } +.portrait + .section__subtitle{ + padding-top: 3rem; + } +@media (min-width: 1024px){ + + .portrait + .section__subtitle{ + padding-top: 4rem; + } + } +@media (min-width: 1800px){ + + .portrait + .section__subtitle{ + padding-top: 5rem; + } + } +.portrait .card__image{ + position: relative; + padding-bottom: 50%; /* 2/1 ratio */ + } +.storybook-demo-ratio .portrait > div > div > *{ + padding: 1.5rem; + text-align: center; + font-size: 1.25rem; + --tw-text-opacity: 1; + color: rgb(76 29 149 / var(--tw-text-opacity)); + --tw-bg-opacity: 1; + background-color: rgb(245 243 255 / var(--tw-bg-opacity)); + border-width: 1px; + border-style: dashed; + --tw-border-opacity: 1; + border-color: rgb(124 58 237 / var(--tw-border-opacity)); + } +} +@media (min-width: 1280px) { +@media (min-width: 768px){ + + .portrait{ + grid-template-columns: repeat(2, minmax(0, 1fr)); + } + } +@media (min-width: 1024px){ + + .portrait{ + grid-template-columns: repeat(3, minmax(0, 1fr)); + } + } + } +.portrait__image{ + display: block; + width: 100%; +} +@media (min-width: 1280px){ + + .portrait__image{ + grid-column: span 2 / span 2; + } +} +.portrait__image{ + padding-right: 2rem; +} +@media (min-width: 768px){ + + .portrait__image{ + padding-right: 0px; + } +} +.portrait__image img{ + width: 100%; + max-width: none; +} +/* overlapping width of the picture: 100% + margin-top of the card + responsive gap */ +@media (min-width: 1024px) { +.portrait__image img { + width: calc(100% + 2.5rem + 2.5rem) + } + } +@media (min-width: 1280px) { +.portrait__image img { + width: calc(100% + 3rem + 3rem) + } + } +@media (min-width: 1800px) { +.portrait__image img { + width: calc(100% + 4rem + 4rem) + } + } +.portrait__card{ + display: block; +} +@media (min-width: 768px){ + + .portrait__card{ + max-width: 36rem; + } +} +.portrait__card{ + position: relative; + margin-left: 2rem; +} +@media (min-width: 768px){ + + .portrait__card{ + margin-left: 0px; + } +} +.portrait__card{ + top: -2rem; +} +@media (min-width: 1024px){ + + .portrait__card{ + top: 2.5rem; + } +} +@media (min-width: 1280px){ + + .portrait__card{ + top: 3rem; + } +} +@media (min-width: 1800px){ + + .portrait__card{ + top: 4rem; + } +} +.portrait__card__body{ + padding-left: 1.5rem; + padding-right: 1.5rem; + padding-top: 2.5rem; + padding-bottom: 3rem; +} +.portrait__card__body > :not([hidden]) ~ :not([hidden]){ + --tw-space-y-reverse: 0; + margin-top: calc(1rem * calc(1 - var(--tw-space-y-reverse))); + margin-bottom: calc(1rem * var(--tw-space-y-reverse)); +} +/*----------------------------------------*\ + TEXT-IMAGE +\*----------------------------------------*/ +.text-image__content > :not([hidden]) ~ :not([hidden]){ + --tw-space-y-reverse: 0; + margin-top: calc(1.5rem * calc(1 - var(--tw-space-y-reverse))); + margin-bottom: calc(1.5rem * var(--tw-space-y-reverse)); +} +@media (min-width: 1024px){ + + .text-image__content > :not([hidden]) ~ :not([hidden]){ + --tw-space-y-reverse: 0; + margin-top: calc(2rem * calc(1 - var(--tw-space-y-reverse))); + margin-bottom: calc(2rem * var(--tw-space-y-reverse)); + } +} +@media (min-width: 1800px){ + + .text-image__content > :not([hidden]) ~ :not([hidden]){ + --tw-space-y-reverse: 0; + margin-top: calc(2.5rem * calc(1 - var(--tw-space-y-reverse))); + margin-bottom: calc(2.5rem * var(--tw-space-y-reverse)); + } +} +.text-image__title{ + font-family: FrutigerNeueLTPro-Bold, Hind, Fallback-font; + font-weight: 400; + font-size: 1.625rem; +} +@media (min-width: 1024px){ + + .text-image__title{ + font-size: 2rem; + } +} +@media (min-width: 1280px){ + + .text-image__title{ + font-size: 2.5rem; + } +} +@media (min-width: 1800px){ + + .text-image__title{ + font-size: 3rem; + } +} +.text-image__title{ + line-height: 1.25; +} +.text-image__description{ + font-size: 1.125rem; +} +@media (min-width: 1280px){ + + .text-image__description{ + font-size: 1.25rem; + } +} +@media (min-width: 1800px){ + + .text-image__description{ + font-size: 1.375rem; + } +} +.text-image__description{ + line-height: 1.375; +} +.text-image__cta .btn{ + margin-right: 1rem; +} +@media (min-width: 768px){ + + .text-image__cta .btn{ + margin-right: 1.25rem; + } +} +@media (min-width: 1280px){ + + .text-image__cta .btn{ + margin-right: 1.5rem; + } +} +.text-image__cta .btn{ + margin-bottom: 1rem; +} +@media (min-width: 768px){ + + .text-image__cta .btn{ + margin-bottom: 1.25rem; + } +} +@media (min-width: 1280px){ + + .text-image__cta .btn{ + margin-bottom: 1.5rem; + } +} +.text-image__image{ + position: relative; + display: block; + overflow: hidden; + width: 100%; +} +.container__center--xs .text-image, .container__center--xs .text-image-centered { + --side-margin: calc(1rem * -1); + } +@media (min-width: 480px) { + .container__center--xs .text-image, .container__center--xs .text-image-centered { + --side-margin: calc(1.75rem * -1); + } + } +@media (min-width: 640px) { + .container__center--xs .text-image, .container__center--xs .text-image-centered { + --side-margin: calc((100vw - 6em ) / -12 ); + } + } +@media (min-width: 1280px) { + .container__center--xs .text-image, .container__center--xs .text-image-centered { + --side-margin: calc((1280px - 6em ) / -12 ); + } + } +@media (min-width: 1536px) { + .container__center--xs .text-image, .container__center--xs .text-image-centered { + --side-margin: calc((1536px - 6em ) / -12 ); + } + } +.container__center--xs .text-image, .container__center--xs .text-image-centered{ + + margin-left: var(--side-margin); + margin-right: var(--side-margin); + + padding-left: calc(var(--side-margin) * -1); + padding-right: calc(var(--side-margin) * -1); +} +@media (min-width: 768px) { + + .container__center--xs .text-image { + padding-left: 0; + padding-right: 0 + } + } +/*----------------------------------------*\ + AUDIO-PLAYER +\*----------------------------------------*/ +.audio-player__description{ + margin-top: 0.5rem; + padding-top: 0.5rem; + --tw-text-opacity: 1; + color: rgb(89 105 120 / var(--tw-text-opacity)); + font-size: 0.75rem; +} +@media (min-width: 1280px){ + + .audio-player__description{ + font-size: 0.875rem; + } +} +@media (min-width: 1800px){ + + .audio-player__description{ + font-size: 1rem; + } +} +/*----------------------------------------*\ + TRANSCRIPT +\*----------------------------------------*/ +.transcript{ + margin-left: auto; + margin-right: auto; + max-width: 42rem; +} +.transcript__row{ + border-top-width: 1px; + --tw-border-opacity: 1; + border-color: rgb(229 231 235 / var(--tw-border-opacity)); + padding-top: 1rem; + padding-bottom: 1rem; +} +.transcript__speaker{ + font-family: FrutigerNeueLTPro-Bold, Hind, Fallback-font; + font-weight: 400; +} +.transcript__timestamp{ + --tw-text-opacity: 1; + color: rgb(75 85 99 / var(--tw-text-opacity)); + font-size: 0.875rem; +} +@media (min-width: 1280px){ + + .transcript__timestamp{ + font-size: 1rem; + } +} +@media (min-width: 1800px){ + + .transcript__timestamp{ + font-size: 1.125rem; + } +} +/*----------------------------------------*\ + NAVY +\*----------------------------------------*/ +.navy { + position: relative; + perspective: 1200px; + height: 100%; +} +.navy li > a:not(.navy__back), .navy li > span:not(.navy__title), .navy li > button{ + display: flex; + align-items: center; + justify-content: space-between; + position: relative; + padding-left: 1rem; + padding-right: 1rem; + padding-top: 0.75rem; + padding-bottom: 0.75rem; + cursor: pointer; + transition-property: color, background-color, border-color, fill, stroke, -webkit-text-decoration-color; + transition-property: color, background-color, border-color, text-decoration-color, fill, stroke; + transition-property: color, background-color, border-color, text-decoration-color, fill, stroke, -webkit-text-decoration-color; + transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1); + transition-duration: 150ms; +} +.navy li > a:not(.navy__back):hover, .navy li > span:not(.navy__title):hover, .navy li > button:hover{ + --tw-bg-opacity: 1; + background-color: rgb(240 244 247 / var(--tw-bg-opacity)); +} +.navy li > a:not(.navy__back):focus, .navy li > span:not(.navy__title):focus, .navy li > button:focus{ + --tw-text-opacity: 1; + color: rgb(216 35 42 / var(--tw-text-opacity)); +} +.navy li > a:not(.navy__back), .navy li > span:not(.navy__title), .navy li > button{ + font-size: 0.875rem; +} +@media (min-width: 1800px){ + + .navy li > a:not(.navy__back), .navy li > span:not(.navy__title), .navy li > button{ + font-size: 1rem; + } +} +.navy li > a:not(.navy__back).menu__item--negative:hover, .navy li > span:not(.navy__title).menu__item--negative:hover, .navy li > button.menu__item--negative:hover{ + --tw-bg-opacity: 1; + background-color: rgb(38 54 69 / var(--tw-bg-opacity)); +} +.navy li > a:not(.navy__back), .navy li > span:not(.navy__title), .navy li > button{ + width: 100%; + border-bottom-width: 1px; + border-color: rgb(223 228 233 / var(--tw-border-opacity)); + --tw-border-opacity: 1; +} +@media (min-width: 1280px){ + + .navy li > a:not(.navy__back), .navy li > span:not(.navy__title), .navy li > button{ + padding-left: 0.75rem; + padding-right: 0.75rem; + padding-top: 0.75rem; + padding-bottom: 0.75rem; + } +} +.navy li > a:not(.navy__back), .navy li > span:not(.navy__title), .navy li > button{ + --tw-bg-opacity: 1; + background-color: rgb(255 255 255 / var(--tw-bg-opacity)); +} +.navy li > a:not(.navy__back).active::after, .navy li > span:not(.navy__title).active::after, .navy li > button.active::after { + content:''; + display: block; + --tw-bg-opacity: 1; + background-color: rgb(229 57 64 / var(--tw-bg-opacity)); + width: 3px; + position: absolute; + top: 0px; + bottom: 0px; + left: 0px; + } +.navy li > a:not(.navy__back).desktop-menu__more, .navy li > span:not(.navy__title).desktop-menu__more, .navy li > button.desktop-menu__more{ + display: none; +} +.desktop-menu__drawer.navy li > a:not(.navy__back).desktop-menu__more, .desktop-menu__drawer.navy li > span:not(.navy__title).desktop-menu__more, .desktop-menu__drawer.navy li > button.desktop-menu__more { + display: block; + height: 0; + overflow: hidden; + padding: 0px; + opacity: 0; + transition: opacity 300ms, height 1ms 300ms, padding 1ms 300ms; + } +.desktop-menu__drawer.navy li > a:not(.navy__back).desktop-menu__more > *, .desktop-menu__drawer.navy li > span:not(.navy__title).desktop-menu__more > *, .desktop-menu__drawer.navy li > button.desktop-menu__more > *{ + --tw-translate-y: -2rem; + transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y)); + transition-property: transform; + transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1); + transition-duration: 300ms; +} +.desktop-menu__overlay.navy li > a:not(.navy__back).desktop-menu__more, .desktop-menu__overlay.navy li > span:not(.navy__title).desktop-menu__more, .desktop-menu__overlay.navy li > button.desktop-menu__more { + display: block; + height: 0; + overflow: hidden; + padding: 0px; + opacity: 0; + transition: opacity 300ms, height 1ms 300ms; + } +@media (min-width: 1024px){ + + .navy li > a:not(.navy__back).desktop-menu__more, .navy li > span:not(.navy__title).desktop-menu__more, .navy li > button.desktop-menu__more{ + display: block; + } +} +.navy .main-navigation--mobile li > a{ + --tw-bg-opacity: 1; + background-color: rgb(255 255 255 / var(--tw-bg-opacity)); +} +.navy .main-navigation--mobile li > a:hover{ + --tw-bg-opacity: 1; + background-color: rgb(240 244 247 / var(--tw-bg-opacity)); +} +.navy .main-navigation--mobile li > a:focus{ + --tw-bg-opacity: 1; + background-color: rgb(240 244 247 / var(--tw-bg-opacity)); +} +.navy .meta-navigation--mobile li > a{ + --tw-bg-opacity: 1; + background-color: rgb(240 244 247 / var(--tw-bg-opacity)); +} +.navy .meta-navigation--mobile li > a:hover{ + --tw-bg-opacity: 1; + background-color: rgb(223 228 233 / var(--tw-bg-opacity)); +} +.navy .meta-navigation--mobile li > a:focus{ + --tw-bg-opacity: 1; + background-color: rgb(223 228 233 / var(--tw-bg-opacity)); +} +.navy .top-bar-navigation--mobile li > a{ + --tw-bg-opacity: 1; + background-color: rgb(70 89 107 / var(--tw-bg-opacity)); +} +.navy .top-bar-navigation--mobile li > a:hover{ + --tw-bg-opacity: 1; + background-color: rgb(38 54 69 / var(--tw-bg-opacity)); +} +.navy .top-bar-navigation--mobile li > a:focus{ + --tw-bg-opacity: 1; + background-color: rgb(38 54 69 / var(--tw-bg-opacity)); +} +.navy .top-bar-navigation--mobile li > a{ + --tw-text-opacity: 1; + color: rgb(255 255 255 / var(--tw-text-opacity)); +} +.navy .top-bar-navigation--mobile li > a:hover{ + --tw-text-opacity: 1; + color: rgb(255 255 255 / var(--tw-text-opacity)); +} +.navy .top-bar-navigation--mobile li > a:focus{ + --tw-text-opacity: 1; + color: rgb(255 255 255 / var(--tw-text-opacity)); +} +.navy .top-bar-navigation--mobile li > a{ + --tw-border-opacity: 1; + border-color: rgb(130 142 154 / var(--tw-border-opacity)); +} +.navy__has-children{ + display: flex; + flex-direction: row; + align-items: flex-start; + justify-content: space-between; +} +.navy__has-children .icon{ + height: 1.25rem; + width: 1.25rem; +} +.navy__back{ + display: flex; + align-items: center; + justify-content: space-between; + position: relative; + padding-left: 1rem; + padding-right: 1rem; + padding-top: 0.75rem; + padding-bottom: 0.75rem; + font-size: 0.875rem; +} +@media (min-width: 1800px){ + + .navy__back{ + font-size: 1rem; + } +} +.navy__back{ + border-width: 0px; + --tw-border-opacity: 0; + cursor: pointer; + transition-property: color, background-color, border-color, fill, stroke, -webkit-text-decoration-color; + transition-property: color, background-color, border-color, text-decoration-color, fill, stroke; + transition-property: color, background-color, border-color, text-decoration-color, fill, stroke, -webkit-text-decoration-color; + transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1); + transition-duration: 150ms; + --tw-text-opacity: 1; + color: rgb(107 114 128 / var(--tw-text-opacity)); +} +.navy__back:hover{ + --tw-bg-opacity: 1; + background-color: rgb(240 244 247 / var(--tw-bg-opacity)); + --tw-text-opacity: 1; + color: rgb(75 85 99 / var(--tw-text-opacity)); +} +@media (min-width: 1024px){ + + .navy__back{ + position: absolute; + top: -3rem; + left: -1.25rem; + } +} +@media (min-width: 1280px){ + + .navy__back{ + top: -3.5rem; + } +} +@media (min-width: 1800px){ + + .navy__back{ + top: -4rem; + } +} +.navy__back{ + justify-content: flex-start !important; +} +@media (min-width: 1024px){ + + .navy__back .icon{ + height: 1.25rem; + width: 1.25rem; + } +} +.navy__level-0 .navy__back{ + display: block; +} +@media (min-width: 1024px){ + + .navy__level-0 .navy__back{ + display: none; + } +} +.navy__title{ + display: flex; + align-items: center; + justify-content: space-between; + position: relative; + padding-left: 1rem; + padding-right: 1rem; + padding-top: 0.75rem; + padding-bottom: 0.75rem; + cursor: pointer; + transition-property: color, background-color, border-color, fill, stroke, -webkit-text-decoration-color; + transition-property: color, background-color, border-color, text-decoration-color, fill, stroke; + transition-property: color, background-color, border-color, text-decoration-color, fill, stroke, -webkit-text-decoration-color; + transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1); + transition-duration: 150ms; +} +.navy__title:hover{ + --tw-bg-opacity: 1; + background-color: rgb(240 244 247 / var(--tw-bg-opacity)); +} +.navy__title:focus{ + --tw-text-opacity: 1; + color: rgb(216 35 42 / var(--tw-text-opacity)); +} +.navy__title.menu__item--negative:hover{ + --tw-bg-opacity: 1; + background-color: rgb(38 54 69 / var(--tw-bg-opacity)); +} +.navy__title:hover{ + --tw-bg-opacity: 1; + background-color: rgb(255 255 255 / var(--tw-bg-opacity)); +} +@media (min-width: 1024px){ + + .navy__title{ + padding-left: 0px; + padding-right: 0px; + } +} +.navy__title{ + cursor: default; + font-family: FrutigerNeueLTPro-Bold, Hind, Fallback-font; + font-weight: 400; + --tw-border-opacity: 0; +} +.navy__level-0{ + --tw-bg-opacity: 1; + background-color: rgb(70 89 107 / var(--tw-bg-opacity)); +} +@media (min-width: 1024px){ + + .navy__level-0{ + --tw-bg-opacity: 1; + background-color: rgb(255 255 255 / var(--tw-bg-opacity)); + } +} +.navy__level-0, +.navy__level-1, +.navy__level-2, +.navy__level-3, +.navy__level-4, +.navy__level-5, +.navy__level-6, +.navy__level-7 { + position: absolute; + top: 0; + right: 0; + bottom: 0; + left: 0; + + /* + remark: adapt displayRelatedSubmenu function in + Navy.js if the 600ms duration is modified: + */ + transform: translateX(0%); + transition: transform 600ms ease-in-out, opacity 600ms ease-in-out; +} +/* Slide positions */ +.show-level-0 .navy__level-0 { + transform: translateX(0%); + opacity: 1; + } +.show-level-0 .navy__level-1, + .show-level-0 .navy__level-2, + .show-level-0 .navy__level-3, + .show-level-0 .navy__level-4, + .show-level-0 .navy__level-5, + .show-level-0 .navy__level-6, + .show-level-0 .navy__level-7 { + transform: translateX(100%); + opacity: 0; + } +.show-level-1 .navy__level-0 { + transform: translateX(-100%); + opacity: 0; + } +.show-level-1 .navy__level-1 { + transform: translateX(0%); + opacity: 1; + } +.show-level-1 .navy__level-2, + .show-level-1 .navy__level-3, + .show-level-1 .navy__level-4, + .show-level-1 .navy__level-5, + .show-level-1 .navy__level-6, + .show-level-1 .navy__level-7 { + transform: translateX(100%); + opacity: 0; + } +.show-level-2 .navy__level-0, + .show-level-2 .navy__level-1 { + transform: translateX(-100%); + opacity: 0; + } +.show-level-2 .navy__level-2 { + transform: translateX(0%); + opacity: 1; + } +.show-level-2 .navy__level-3, + .show-level-2 .navy__level-4, + .show-level-2 .navy__level-5, + .show-level-2 .navy__level-6, + .show-level-2 .navy__level-7 { + transform: translateX(100%); + opacity: 0; + } +.show-level-3 .navy__level-0, + .show-level-3 .navy__level-1, + .show-level-3 .navy__level-2 { + transform: translateX(-100%); + opacity: 0; + } +.show-level-3 .navy__level-3 { + transform: translateX(0%); + opacity: 1; + } +.show-level-3 .navy__level-4, + .show-level-3 .navy__level-5, + .show-level-3 .navy__level-6, + .show-level-3 .navy__level-7 { + transform: translateX(100%); + opacity: 0; + } +.show-level-4 .navy__level-0, + .show-level-4 .navy__level-1, + .show-level-4 .navy__level-2, + .show-level-4 .navy__level-3 { + transform: translateX(-100%); + opacity: 0; + } +.show-level-4 .navy__level-4 { + transform: translateX(0%); + opacity: 1; + } +.show-level-4 .navy__level-5, + .show-level-4 .navy__level-6, + .show-level-4 .navy__level-7 { + transform: translateX(100%); + opacity: 0; + } +.show-level-5 .navy__level-0, + .show-level-5 .navy__level-1, + .show-level-5 .navy__level-2, + .show-level-5 .navy__level-3, + .show-level-5 .navy__level-4 { + transform: translateX(-100%); + opacity: 0; + } +.show-level-5 .navy__level-5 { + transform: translateX(0%); + opacity: 1; + } +.show-level-5 .navy__level-6, + .show-level-5 .navy__level-7 { + transform: translateX(100%); + opacity: 0; + } +.show-level-6 .navy__level-0, + .show-level-6 .navy__level-1, + .show-level-6 .navy__level-2, + .show-level-6 .navy__level-3, + .show-level-6 .navy__level-4, + .show-level-6 .navy__level-5 { + transform: translateX(-100%); + opacity: 0; + } +.show-level-6 .navy__level-6 { + transform: translateX(0%); + opacity: 1; + } +.show-level-6 .navy__level-7 { + transform: translateX(100%); + opacity: 0; + } +.show-level-7 .navy__level-0, + .show-level-7 .navy__level-1, + .show-level-7 .navy__level-2, + .show-level-7 .navy__level-3, + .show-level-7 .navy__level-4, + .show-level-7 .navy__level-5, + .show-level-7 .navy__level-6 { + transform: translateX(-100%); + opacity: 0; + } +.show-level-7 .navy__level-7 { + transform: translateX(0%); + opacity: 1; + } +/* ul background colors on mobile */ +.mobile-menu .navy__level-0 ul:nth-of-type(2) a{ + --tw-bg-opacity: 1; + background-color: rgb(240 244 247 / var(--tw-bg-opacity)); +} +.mobile-menu .navy__level-0 ul:nth-of-type(3) a{ + --tw-bg-opacity: 1; + background-color: rgb(47 67 86 / var(--tw-bg-opacity)); + --tw-text-opacity: 1; + color: rgb(255 255 255 / var(--tw-text-opacity)); + border-bottom-width: 1px; + --tw-border-opacity: 1; + border-color: rgb(89 105 120 / var(--tw-border-opacity)); +} +.menu__item.mobile-menu .navy__level-0 ul:nth-of-type(3) a:hover{ + --tw-bg-opacity: 1; + background-color: rgb(38 54 69 / var(--tw-bg-opacity)); +} +.mobile-menu .navy__level-0 ul:nth-of-type(3) a:focus{ + --tw-text-opacity: 1; + color: rgb(250 157 161 / var(--tw-text-opacity)); +} +/*----------------------------------------*\ + TOPBAR NAVIGATION +\*----------------------------------------*/ +.top-bar-navigation{ + display: flex; +} +.top-bar-navigation a{ + display: flex; + align-items: center; +} +.top-bar-navigation a:hover{ + --tw-text-opacity: 1; + color: rgb(209 213 219 / var(--tw-text-opacity)); +} +.top-bar-navigation a:focus{ + --tw-text-opacity: 1; + color: rgb(209 213 219 / var(--tw-text-opacity)); +} +.top-bar-navigation a{ + height: 100%; + padding-left: 1rem; + padding-right: 1rem; + transition-property: color, background-color, border-color, fill, stroke, -webkit-text-decoration-color; + transition-property: color, background-color, border-color, text-decoration-color, fill, stroke; + transition-property: color, background-color, border-color, text-decoration-color, fill, stroke, -webkit-text-decoration-color; + transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1); + transition-duration: 150ms; +} +.top-bar-navigation--mobile{ + display: flex; + flex-direction: column; + padding-bottom: 3rem; + --tw-bg-opacity: 1; + background-color: rgb(70 89 107 / var(--tw-bg-opacity)); +} +.top-bar-navigation--desktop{ + display: none; + height: 100%; +} +.desktop-menu__drawer.top-bar-navigation--desktop { + display: block; + height: 0; + overflow: hidden; + padding: 0px; + opacity: 0; + transition: opacity 300ms, height 1ms 300ms, padding 1ms 300ms; + } +.desktop-menu__drawer.top-bar-navigation--desktop > *{ + --tw-translate-y: -2rem; + transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y)); + transition-property: transform; + transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1); + transition-duration: 300ms; +} +.desktop-menu__overlay.top-bar-navigation--desktop { + display: block; + height: 0; + overflow: hidden; + padding: 0px; + opacity: 0; + transition: opacity 300ms, height 1ms 300ms; + } +@media (min-width: 1024px){ + + .top-bar-navigation--desktop{ + display: flex; + } +} +.top-bar-navigation--desktop ul{ + display: flex; +} +/*----------------------------------------*\ + META-NAVIGATION +\*----------------------------------------*/ +.meta-navigation{ + display: flex; +} +.meta-navigation a{ + display: flex; + align-items: center; + padding-left: 0.75rem; + padding-right: 0.75rem; +} +.meta-navigation--mobile{ + display: flex; + flex-direction: column; +} +.meta-navigation--desktop{ + display: none; +} +.desktop-menu__drawer.meta-navigation--desktop { + display: block; + height: 0; + overflow: hidden; + padding: 0px; + opacity: 0; + transition: opacity 300ms, height 1ms 300ms, padding 1ms 300ms; + } +.desktop-menu__drawer.meta-navigation--desktop > *{ + --tw-translate-y: -2rem; + transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y)); + transition-property: transform; + transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1); + transition-duration: 300ms; +} +.desktop-menu__overlay.meta-navigation--desktop { + display: block; + height: 0; + overflow: hidden; + padding: 0px; + opacity: 0; + transition: opacity 300ms, height 1ms 300ms; + } +@media (min-width: 1024px){ + + .meta-navigation--desktop{ + margin-bottom: 0.75rem; + display: flex; + } +} +@media (min-width: 1280px){ + + .meta-navigation--desktop{ + margin-bottom: 1rem; + } +} +.meta-navigation--desktop ul{ + display: flex; + align-items: center; +} +@media (min-width: 1024px){ + + .meta-navigation__item span{ + position: absolute; + width: 1px; + height: 1px; + padding: 0; + margin: -1px; + overflow: hidden; + clip: rect(0, 0, 0, 0); + white-space: nowrap; + border-width: 0; + } +} +.meta-navigation__item svg{ + display: none; +} +.desktop-menu__drawer.meta-navigation__item svg { + display: block; + height: 0; + overflow: hidden; + padding: 0px; + opacity: 0; + transition: opacity 300ms, height 1ms 300ms, padding 1ms 300ms; + } +.desktop-menu__drawer.meta-navigation__item svg > *{ + --tw-translate-y: -2rem; + transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y)); + transition-property: transform; + transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1); + transition-duration: 300ms; +} +.desktop-menu__overlay.meta-navigation__item svg { + display: block; + height: 0; + overflow: hidden; + padding: 0px; + opacity: 0; + transition: opacity 300ms, height 1ms 300ms; + } +@media (min-width: 1024px){ + + .meta-navigation__item svg{ + display: block; + } +} +/*----------------------------------------*\ + MAIN NAVIGATION +\*----------------------------------------*/ +.main-navigation {} +.mobile-menu .main-navigation, .main-navigation--mobile{ + display: flex; + flex-direction: column; +} +.desktop-menu .main-navigation, .main-navigation--desktop{ + display: flex; + height: 100%; + width: 100%; + display: none; +} +.desktop-menu__drawer.desktop-menu .main-navigation, .desktop-menu__drawer.main-navigation--desktop { + display: block; + height: 0; + overflow: hidden; + padding: 0px; + opacity: 0; + transition: opacity 300ms, height 1ms 300ms, padding 1ms 300ms; + } +.desktop-menu__drawer.desktop-menu .main-navigation > *, .desktop-menu__drawer.main-navigation--desktop > *{ + --tw-translate-y: -2rem; + transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y)); + transition-property: transform; + transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1); + transition-duration: 300ms; +} +.desktop-menu__overlay.desktop-menu .main-navigation, .desktop-menu__overlay.main-navigation--desktop { + display: block; + height: 0; + overflow: hidden; + padding: 0px; + opacity: 0; + transition: opacity 300ms, height 1ms 300ms; + } +@media (min-width: 1024px){ + + .desktop-menu .main-navigation, .main-navigation--desktop{ + display: flex; + } +} +.desktop-menu .main-navigation, .main-navigation--desktop{ + height: 3.5rem; +} +@media (min-width: 1280px){ + + .desktop-menu .main-navigation, .main-navigation--desktop{ + height: 4rem; + } +} +@media (min-width: 1800px){ + + .desktop-menu .main-navigation, .main-navigation--desktop{ + height: 5rem; + } +} +.desktop-menu .main-navigation, .main-navigation--desktop{ + margin-left: -1rem; + position: relative; +} +.desktop-menu .main-navigation ul, .main-navigation--desktop ul{ + display: flex; + height: 100%; +} +.desktop-menu .main-navigation ul ul, .main-navigation--desktop ul ul{ + display: none; +} +.desktop-menu__drawer.desktop-menu .main-navigation ul ul, .desktop-menu__drawer.main-navigation--desktop ul ul { + display: block; + height: 0; + overflow: hidden; + padding: 0px; + opacity: 0; + transition: opacity 300ms, height 1ms 300ms, padding 1ms 300ms; + } +.desktop-menu__drawer.desktop-menu .main-navigation ul ul > *, .desktop-menu__drawer.main-navigation--desktop ul ul > *{ + --tw-translate-y: -2rem; + transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y)); + transition-property: transform; + transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1); + transition-duration: 300ms; +} +.desktop-menu__overlay.desktop-menu .main-navigation ul ul, .desktop-menu__overlay.main-navigation--desktop ul ul { + display: block; + height: 0; + overflow: hidden; + padding: 0px; + opacity: 0; + transition: opacity 300ms, height 1ms 300ms; + } +.desktop-menu .main-navigation > ul > li > a, .main-navigation--desktop > ul > li > a{ + position: relative; +} +@media (min-width: 1024px){ + + .desktop-menu .main-navigation > ul > li > a, .main-navigation--desktop > ul > li > a{ + display: flex; + align-items: center; + height: 100%; + padding-left: 1rem; + padding-right: 1rem; + } +} +.desktop-menu .main-navigation > ul > li > a, .main-navigation--desktop > ul > li > a{ + line-height: 1.25; +} +.desktop-menu .main-navigation > ul > li > a:hover, .main-navigation--desktop > ul > li > a:hover{ + --tw-text-opacity: 1; + color: rgb(216 35 42 / var(--tw-text-opacity)); +} +.desktop-menu .main-navigation > ul > li > a, .main-navigation--desktop > ul > li > a{ + white-space: nowrap; + transition-property: all; + transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1); + transition-duration: 150ms; +} +.desktop-menu .main-navigation > ul > li > a::after, .main-navigation--desktop > ul > li > a::after { + content:''; + display: block; + height: 3px; + position: absolute; + right: 1rem; + bottom: 0px; + left: 1rem; + transition-property: color, background-color, border-color, fill, stroke, opacity, box-shadow, transform, filter, -webkit-text-decoration-color, -webkit-backdrop-filter; + transition-property: color, background-color, border-color, text-decoration-color, fill, stroke, opacity, box-shadow, transform, filter, backdrop-filter; + transition-property: color, background-color, border-color, text-decoration-color, fill, stroke, opacity, box-shadow, transform, filter, backdrop-filter, -webkit-text-decoration-color, -webkit-backdrop-filter; + transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1); + transition-duration: 150ms; + } +.desktop-menu .main-navigation > ul > li > a:focus-visible, .main-navigation--desktop > ul > li > a:focus-visible{ + --tw-ring-inset: inset; +} +.desktop-menu .main-navigation > ul > li > a.active::after, .desktop-menu .main-navigation > ul > li > a:hover::after, .main-navigation--desktop > ul > li > a.active::after, .main-navigation--desktop > ul > li > a:hover::after{ + --tw-bg-opacity: 1; + background-color: rgb(229 57 64 / var(--tw-bg-opacity)); +} +.desktop-menu .main-navigation > ul > li > a.clicked, .main-navigation--desktop > ul > li > a.clicked{ + --tw-bg-opacity: 1; + background-color: rgb(255 255 255 / var(--tw-bg-opacity)); + --tw-shadow: 0px 10px 20px 0px rgba(0,0,0,0.06), 1px 10px 70px -8px rgba(0,0,0,0.13); + --tw-shadow-colored: 0px 10px 20px 0px var(--tw-shadow-color), 1px 10px 70px -8px var(--tw-shadow-color); + box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow); + position: relative; + z-index: 50; + -webkit-clip-path: inset(-50px -50px -1px -50px); + clip-path: inset(-50px -50px -1px -50px); /* crop shadow at the bottom */ +} +.desktop-menu .main-navigation > ul > li > a > .icon, .main-navigation--desktop > ul > li > a > .icon{ + display: none; +} +.desktop-menu__drawer.desktop-menu .main-navigation > ul > li > a > .icon, .desktop-menu__drawer.main-navigation--desktop > ul > li > a > .icon { + display: block; + height: 0; + overflow: hidden; + padding: 0px; + opacity: 0; + transition: opacity 300ms, height 1ms 300ms, padding 1ms 300ms; + } +.desktop-menu__drawer.desktop-menu .main-navigation > ul > li > a > .icon > *, .desktop-menu__drawer.main-navigation--desktop > ul > li > a > .icon > *{ + --tw-translate-y: -2rem; + transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y)); + transition-property: transform; + transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1); + transition-duration: 300ms; +} +.desktop-menu__overlay.desktop-menu .main-navigation > ul > li > a > .icon, .desktop-menu__overlay.main-navigation--desktop > ul > li > a > .icon { + display: block; + height: 0; + overflow: hidden; + padding: 0px; + opacity: 0; + transition: opacity 300ms, height 1ms 300ms; + } +.desktop-menu .main-navigation > ul > li > a > .icon--MoreFilled, .main-navigation--desktop > ul > li > a > .icon--MoreFilled{ + display: block; +} +/*----------------------------------------*\ + TOP BAR +\*----------------------------------------*/ +.top-bar{ + --tw-bg-opacity: 1; + background-color: rgb(47 67 86 / var(--tw-bg-opacity)); + font-size: 0.875rem; + --tw-text-opacity: 1; + color: rgb(255 255 255 / var(--tw-text-opacity)); +} +@media (min-width: 1536px){ + + .top-bar{ + font-size: 1rem; + } +} +.top-bar__bar{ + height: 2.75rem; +} +@media (min-width: 1280px){ + + .top-bar__bar{ + height: 3rem; + } +} +@media (min-width: 1536px){ + + .top-bar__bar{ + height: 60px; + } +} +.top-bar__bar{ + --tw-bg-opacity: 1; + background-color: rgb(47 67 86 / var(--tw-bg-opacity)); +} +.top-bar--is-open .top-bar__bar{ + --tw-bg-opacity: 1; + background-color: rgb(38 54 69 / var(--tw-bg-opacity)); +} +.top-bar__bar .container{ + height: 100%; +} +.top-bar__drawer{ + padding-top: 1.5rem; +} +@media (min-width: 768px){ + + .top-bar__drawer{ + padding-top: 2rem; + } +} +.top-bar__drawer{ + --tw-bg-opacity: 1; + background-color: rgb(47 67 86 / var(--tw-bg-opacity)); + --tw-text-opacity: 1; + color: rgb(255 255 255 / var(--tw-text-opacity)); +} +.top-bar__drawer__close{ + display: flex; + justify-content: flex-end; +} +.top-bar__drawer__close__btn{ + display: flex; + align-items: center; +} +.top-bar__main-title{ + padding-top: 0.75rem; + padding-bottom: 0.75rem; +} +@media (min-width: 768px){ + + .top-bar__main-title{ + padding-top: 1rem; + padding-bottom: 1rem; + } +} +.top-bar__main-title{ + font-size: 1.25rem; +} +@media (min-width: 1024px){ + + .top-bar__main-title{ + font-size: 1.375rem; + } +} +@media (min-width: 1280px){ + + .top-bar__main-title{ + font-size: 1.625rem; + } +} +@media (min-width: 1800px){ + + .top-bar__main-title{ + font-size: 2rem; + } +} +.top-bar__main-title{ + line-height: 1.25; +} +.top-bar__title{ + min-height: 1.5rem; + font-size: 1.125rem; +} +@media (min-width: 1280px){ + + .top-bar__title{ + font-size: 1.25rem; + } +} +@media (min-width: 1800px){ + + .top-bar__title{ + font-size: 1.375rem; + } +} +.top-bar__title{ + margin-bottom: 1.5rem; + line-height: 1.25rem; +} +.top-bar__title + p{ + margin-bottom: 1.5rem; +} +.localization{ + margin-top: 1.5rem; + margin-bottom: 1.5rem; +} +@media (min-width: 768px){ + + .localization{ + margin-top: 1.75rem; + margin-bottom: 1.75rem; + } +} +@media (min-width: 1024px){ + + .localization{ + margin-top: 2rem; + margin-bottom: 2rem; + } +} +.localization ul{ + display: flex; + flex-wrap: wrap; +} +.localization li{ + display: flex; + align-items: center; +} +.localization li:last-of-type{ + width: 100%; +} +@media (min-width: 768px){ + + .localization li:last-of-type{ + width: auto; + } +} +.localization a{ + margin-top: 0.5rem; + margin-bottom: 0.5rem; + --tw-text-opacity: 1; + color: rgb(223 228 233 / var(--tw-text-opacity)); +} +.localization a.active{ + font-family: FrutigerNeueLTPro-Bold, Hind, Fallback-font; + font-weight: 400; + --tw-text-opacity: 1; + color: rgb(255 255 255 / var(--tw-text-opacity)); + border-left-width: 2px; + --tw-border-opacity: 1; + border-color: rgb(216 35 42 / var(--tw-border-opacity)); + padding-left: 0.5rem; +} +.localization .localization__icon{ + margin-left: 1rem; + margin-right: 1rem; +} +.top-bar__grid{ + display: grid; + grid-template-columns: repeat(6, minmax(0, 1fr)); +} +@media print { + + .top-bar__grid { + display: block; /* needed so that content in grid don't break the break-inside rule */ + } +} +.top-bar__grid { /* default Tailwind value */ } +.top-bar__grid + .grid{ + margin-top: 1.25rem; +} +@media (min-width: 480px){ + + .top-bar__grid + .grid{ + margin-top: 1.75rem; + } +} +@media (min-width: 640px){ + + .top-bar__grid + .grid{ + margin-top: 2.25rem; + } +} +@media (min-width: 1024px){ + + .top-bar__grid + .grid{ + margin-top: 2.5rem; + } +} +@media (min-width: 1280px){ + + .top-bar__grid + .grid{ + margin-top: 3rem; + } +} +@media (min-width: 1800px){ + + .top-bar__grid + .grid{ + margin-top: 4rem; + } +} +.top-bar__grid + .section__subtitle{ + padding-top: 3rem; +} +@media (min-width: 1024px){ + + .top-bar__grid + .section__subtitle{ + padding-top: 4rem; + } +} +@media (min-width: 1800px){ + + .top-bar__grid + .section__subtitle{ + padding-top: 5rem; + } +} +.storybook-demo-ratio .top-bar__grid > div > div > *{ + padding: 1.5rem; + text-align: center; + font-size: 1.25rem; + --tw-text-opacity: 1; + color: rgb(76 29 149 / var(--tw-text-opacity)); + --tw-bg-opacity: 1; + background-color: rgb(245 243 255 / var(--tw-bg-opacity)); + border-width: 1px; + border-style: dashed; + --tw-border-opacity: 1; + border-color: rgb(124 58 237 / var(--tw-border-opacity)); +} +.top-bar__grid{ + -moz-column-gap: 2.25rem; + column-gap: 2.25rem; +} +@media (min-width: 1024px){ + + .top-bar__grid{ + -moz-column-gap: 2.5rem; + column-gap: 2.5rem; + } +} +@media (min-width: 1280px){ + + .top-bar__grid{ + -moz-column-gap: 3rem; + column-gap: 3rem; + } +} +@media (min-width: 1536px){ + + .top-bar__grid{ + -moz-column-gap: 4rem; + column-gap: 4rem; + } +} +.top-bar__grid{ + padding-top: 1.25rem; + + grid-template-rows: auto 1fr; +} +.top-bar__grid .search { + } +.top-bar__grid .search__results{ + position: relative; + max-height: 60vh; +} +@media (min-width: 768px) { +.top-bar__grid .search__results { + max-height: none; + height: calc(100% - 10.5rem); + position: absolute + } + } +.top-bar__grid__box-1{ + grid-column: span 6 / span 6; + padding-bottom: 3.5rem; +} +@media (min-width: 768px){ + + .top-bar__grid__box-1{ + grid-column: span 3 / span 3; + } +} +@media (min-width: 1024px){ + + .top-bar__grid__box-1{ + grid-column: span 2 / span 2; + grid-row: span 1 / span 1; + } +} +.top-bar__grid__box-2{ + grid-column: span 6 / span 6; +} +@media (min-width: 768px){ + + .top-bar__grid__box-2{ + grid-column: span 3 / span 3; + } +} +@media (min-width: 1024px){ + + .top-bar__grid__box-2{ + grid-column: span 2 / span 2; + grid-row-start: 2; + } +} +.top-bar__grid__box-3{ + grid-column: span 6 / span 6; + padding-bottom: 3.5rem; +} +@media (min-width: 768px){ + + .top-bar__grid__box-3{ + grid-column: span 3 / span 3; + } +} +@media (min-width: 1024px){ + + .top-bar__grid__box-3{ + grid-column: span 2 / span 2; + grid-column-start: 3; + grid-row-start: 1; + grid-row-end: 3; + } +} +.top-bar__grid__box-4{ + position: relative; + grid-column: span 6 / span 6; + padding-bottom: 3.5rem; +} +@media (min-width: 768px){ + + .top-bar__grid__box-4{ + grid-column: span 3 / span 3; + } +} +@media (min-width: 1024px){ + + .top-bar__grid__box-4{ + grid-column: span 2 / span 2; + grid-column-start: 5; + grid-row-start: 1; + grid-row-end: 3; + } +} +.top-bar__btn{ + display: flex; + align-items: center; + text-align: left; +} +.top-bar__btn:hover{ + --tw-text-opacity: 1; + color: rgb(209 213 219 / var(--tw-text-opacity)); +} +.top-bar__btn:focus{ + --tw-text-opacity: 1; + color: rgb(209 213 219 / var(--tw-text-opacity)); +} +.top-bar__btn{ + margin-left: -1rem; + height: 100%; + padding-left: 1rem; + padding-right: 1rem; + --tw-bg-opacity: 1; + background-color: rgb(47 67 86 / var(--tw-bg-opacity)); + transition-property: color, background-color, border-color, fill, stroke, -webkit-text-decoration-color; + transition-property: color, background-color, border-color, text-decoration-color, fill, stroke; + transition-property: color, background-color, border-color, text-decoration-color, fill, stroke, -webkit-text-decoration-color; + transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1); + transition-duration: 150ms; +} +.top-bar__btn__icon{ + margin-left: 0.5rem; + transition-property: transform; + transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1); + transition-duration: 200ms; +} +.top-bar--is-open .top-bar__btn__icon{ + --tw-rotate: 180deg; + transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y)); +} +.top-bar__navigation{ + height: 100%; +} +.top-bar__right{ + display: flex; + align-items: center; +} +/*----------------------------------------*\ + TOP HEADER +\*----------------------------------------*/ +.top-header{ + padding-top: 0.75rem; + padding-bottom: 0.75rem; +} +@media (min-width: 768px){ + + .top-header{ + padding-top: 1rem; + padding-bottom: 1rem; + } +} +@media (min-width: 1024px){ + + .top-header{ + padding-top: 1.5rem; + padding-bottom: 1.5rem; + } +} +@media (min-width: 1280px){ + + .top-header{ + padding-top: 2rem; + padding-bottom: 2rem; + } +} +@media (min-width: 1800px){ + + .top-header{ + padding-top: 2.5rem; + padding-bottom: 2.5rem; + } +} +.top-header{ + --tw-bg-opacity: 1; + background-color: rgb(255 255 255 / var(--tw-bg-opacity)); + font-size: 0.875rem; +} +@media (min-width: 1800px){ + + .top-header{ + font-size: 1rem; + } +} +.top-header{ + border-bottom-width: 1px; +} +.top-header__mobile-title{ + --tw-bg-opacity: 1; + background-color: rgb(223 228 233 / var(--tw-bg-opacity)); +} +@media (min-width: 480px){ + + .top-header__mobile-title{ + display: none; + } +} +.top-header__mobile-title{ + font-size: 0.75rem; + position: relative; + top: -0.75rem; + max-height: 3.5rem; + overflow: hidden; + + transition: max-height 300ms; +} +.top-header__mobile-title .container{ + padding-top: 0.5rem; + padding-bottom: 0.5rem; +} +@media (min-width: 480px){ + + .top-header__mobile-title .container{ + padding-top: 0px; + padding-bottom: 0px; + } +} +.top-header__mobile-title br { + display: none; + } +.body--mobile-menu-is-open .top-header__mobile-title{ + max-height: 0px; +} +.top-header__right{ + display: flex; +} +@media (min-width: 1024px){ + + .top-header__right{ + flex-direction: column; + align-items: flex-end; + margin-right: -0.75rem; + } +} +/*----------------------------------------*\ + DESKTOP-MENU +\*----------------------------------------*/ +.desktop-menu{ + position: relative; + z-index: 40; + border-bottom-width: 1px; +} +.desktop-menu__drawer { + display: none; +} +@media (min-width: 1024px){ + + .desktop-menu__drawer{ + display: block; + } +} +.desktop-menu__drawer{ + margin-top: 0px; + left: 0px; + width: 450px; + padding: 2rem; + padding-top: 4rem; +} +@media (min-width: 1280px){ + + .desktop-menu__drawer{ + width: 650px; + padding: 3rem; + padding-top: 5rem; + } +} +@media (min-width: 1800px){ + + .desktop-menu__drawer{ + width: 850px; + padding: 6rem; + } +} +.desktop-menu__drawer{ + overflow: hidden; + position: absolute; + top: 3.5rem; + z-index: 30; +} +@media (min-width: 1280px){ + + .desktop-menu__drawer{ + top: 4rem; + } +} +@media (min-width: 1800px){ + + .desktop-menu__drawer{ + top: 5rem; + } +} +.desktop-menu__drawer{ + --tw-bg-opacity: 1; + background-color: rgb(255 255 255 / var(--tw-bg-opacity)); + opacity: 1; + --tw-shadow: 0px 10px 20px 0px rgba(0,0,0,0.06), 1px 10px 70px -8px rgba(0,0,0,0.13); + --tw-shadow-colored: 0px 10px 20px 0px var(--tw-shadow-color), 1px 10px 70px -8px var(--tw-shadow-color); + box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow); + transition: opacity 300ms ease-in-out, height 200ms ease-in-out; +} +.desktop-menu__drawer > *{ + --tw-translate-y: 0px; + transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y)); + transition-property: transform; + transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1); + transition-duration: 300ms; +} +.desktop-menu__drawer.hidden { + display: block !important; + height: 0 !important; + overflow: hidden; + padding: 0px; + opacity: 0; + transition: opacity 300ms, height 1ms 300ms, padding 1ms 300ms; + } +.desktop-menu__drawer.hidden > *{ + --tw-translate-y: -2rem; + transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y)); + transition-property: transform; + transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1); + transition-duration: 300ms; +} +.desktop-menu__drawer.with-offset{ + left: -1rem; +} +@media (min-width: 1280px){ + + .desktop-menu__drawer.with-offset{ + left: -2rem; + } +} +@media (min-width: 1800px){ + + .desktop-menu__drawer.with-offset{ + left: -5rem; + } +} +.desktop-menu__overlay { + display: none; + height: 120vh; +} +@media (min-width: 1024px){ + + .desktop-menu__overlay{ + display: block; + } +} +.desktop-menu__overlay{ + position: absolute; + top: 3.5rem; + right: 0px; + bottom: 0px; + left: 0px; + z-index: 20; +} +@media (min-width: 1280px){ + + .desktop-menu__overlay{ + top: 4rem; + } +} +@media (min-width: 1800px){ + + .desktop-menu__overlay{ + top: 5rem; + } +} +.desktop-menu__overlay{ + background-color: rgb(19 27 34 / var(--tw-bg-opacity)); + --tw-bg-opacity: 0.2; + opacity: 1; + transition-property: opacity; + transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1); + transition-duration: 300ms; +} +.desktop-menu__overlay.hidden { + display: block !important; + height: 0 !important; + overflow: hidden; + padding: 0px; + opacity: 0; + transition: opacity 300ms, height 1ms 300ms; + } +.desktop-menu__close{ + display: none; +} +.desktop-menu__drawer.desktop-menu__close { + display: block; + height: 0; + overflow: hidden; + padding: 0px; + opacity: 0; + transition: opacity 300ms, height 1ms 300ms, padding 1ms 300ms; + } +.desktop-menu__drawer.desktop-menu__close > *{ + --tw-translate-y: -2rem; + transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y)); + transition-property: transform; + transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1); + transition-duration: 300ms; +} +.desktop-menu__overlay.desktop-menu__close { + display: block; + height: 0; + overflow: hidden; + padding: 0px; + opacity: 0; + transition: opacity 300ms, height 1ms 300ms; + } +@media (min-width: 1024px){ + + .desktop-menu__close{ + display: block; + } +} +.desktop-menu__close{ + display: flex; + align-items: center; + justify-content: space-between; + position: relative; + padding-left: 1rem; + padding-right: 1rem; + padding-top: 0.75rem; + padding-bottom: 0.75rem; + font-size: 0.875rem; +} +@media (min-width: 1800px){ + + .desktop-menu__close{ + font-size: 1rem; + } +} +.desktop-menu__close{ + border-width: 0px; + --tw-border-opacity: 0; + cursor: pointer; + transition-property: color, background-color, border-color, fill, stroke, -webkit-text-decoration-color; + transition-property: color, background-color, border-color, text-decoration-color, fill, stroke; + transition-property: color, background-color, border-color, text-decoration-color, fill, stroke, -webkit-text-decoration-color; + transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1); + transition-duration: 150ms; + --tw-text-opacity: 1; + color: rgb(107 114 128 / var(--tw-text-opacity)); +} +.desktop-menu__close:hover{ + --tw-bg-opacity: 1; + background-color: rgb(240 244 247 / var(--tw-bg-opacity)); + --tw-text-opacity: 1; + color: rgb(75 85 99 / var(--tw-text-opacity)); +} +@media (min-width: 1024px){ + + .desktop-menu__close{ + position: absolute; + top: 1rem; + right: 0px; + } +} +@media (min-width: 1280px){ + + .desktop-menu__close{ + top: 1.5rem; + right: 1rem; + } +} +@media (min-width: 1800px){ + + .desktop-menu__close{ + top: 2rem; + right: 5rem; + } +} +@media (min-width: 1024px){ + + .desktop-menu__close .icon{ + height: 1.25rem; + width: 1.25rem; + } +} +/*----------------------------------------*\ + BREADCRUMB +\*----------------------------------------*/ +.breadcrumb{ + display: flex; + height: 100%; + padding-top: 0.5rem; + padding-bottom: 0.5rem; +} +@media (min-width: 1280px){ + + .breadcrumb{ + padding-top: 0.75rem; + padding-bottom: 0.75rem; + } +} +.breadcrumb{ + position: relative; + z-index: 20; + font-size: 0.875rem; + --tw-text-opacity: 1; + color: rgb(107 114 128 / var(--tw-text-opacity)); + display: none; +} +.desktop-menu__drawer.breadcrumb { + display: block; + height: 0; + overflow: hidden; + padding: 0px; + opacity: 0; + transition: opacity 300ms, height 1ms 300ms, padding 1ms 300ms; + } +.desktop-menu__drawer.breadcrumb > *{ + --tw-translate-y: -2rem; + transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y)); + transition-property: transform; + transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1); + transition-duration: 300ms; +} +.desktop-menu__overlay.breadcrumb { + display: block; + height: 0; + overflow: hidden; + padding: 0px; + opacity: 0; + transition: opacity 300ms, height 1ms 300ms; + } +@media (min-width: 1024px){ + + .breadcrumb{ + display: block; + } +} +.breadcrumb nav{ + margin-left: -1rem; +} +.breadcrumb > nav > ul{ + display: flex; + flex-wrap: wrap; +} +.breadcrumb > nav > ul > li{ + position: relative; + display: flex; +} +.breadcrumb > nav > ul > li > a{ + display: flex; + align-items: center; + padding-left: 1rem; + padding-right: 1rem; + padding-top: 0.5rem; + padding-bottom: 0.5rem; +} +@media (min-width: 768px){ + + .breadcrumb > nav > ul > li > a{ + padding-top: 1rem; + padding-bottom: 1rem; + } +} +.breadcrumb > nav > ul > li > a{ + line-height: 1.25; + transition-property: color, background-color, border-color, fill, stroke, -webkit-text-decoration-color; + transition-property: color, background-color, border-color, text-decoration-color, fill, stroke; + transition-property: color, background-color, border-color, text-decoration-color, fill, stroke, -webkit-text-decoration-color; + transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1); + transition-duration: 150ms; +} +.breadcrumb > nav > ul > li > a:hover{ + --tw-text-opacity: 1; + color: rgb(216 35 42 / var(--tw-text-opacity)); +} +.breadcrumb > nav > ul > li > a.clicked{ + --tw-bg-opacity: 1; + background-color: rgb(255 255 255 / var(--tw-bg-opacity)); + --tw-shadow: 0px 10px 20px 0px rgba(0,0,0,0.06), 1px 10px 70px -8px rgba(0,0,0,0.13); + --tw-shadow-colored: 0px 10px 20px 0px var(--tw-shadow-color), 1px 10px 70px -8px var(--tw-shadow-color); + box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow); + position: relative; + z-index: 50; + -webkit-clip-path: inset(-50px -50px 0 -50px); + clip-path: inset(-50px -50px 0 -50px); /* crop shadow at the bottom */ +} +.breadcrumb > nav > ul > li > a + ul{ + display: none; + opacity: 0; +} +.desktop-menu__drawer.breadcrumb > nav > ul > li > a + ul { + display: block; + height: 0; + overflow: hidden; + padding: 0px; + opacity: 0; + transition: opacity 300ms, height 1ms 300ms, padding 1ms 300ms; + } +.desktop-menu__drawer.breadcrumb > nav > ul > li > a + ul > *{ + --tw-translate-y: -2rem; + transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y)); + transition-property: transform; + transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1); + transition-duration: 300ms; +} +.desktop-menu__overlay.breadcrumb > nav > ul > li > a + ul { + display: block; + height: 0; + overflow: hidden; + padding: 0px; + opacity: 0; + transition: opacity 300ms, height 1ms 300ms; + } +.breadcrumb > nav > ul > li > a + ul{ + transition-property: opacity; + transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1); + transition-duration: 300ms; +} +.breadcrumb > nav > ul > li > a.clicked + ul{ + display: block; + opacity: 1; +} +.breadcrumb__dropdown-icon{ + height: 1.25em; + width: 1.25em; + margin-left: 0.5rem; + --tw-text-opacity: 1; + color: rgb(216 35 42 / var(--tw-text-opacity)); + border-radius: 0.125rem; + border-width: 1px; + --tw-border-opacity: 1; + border-color: rgb(216 35 42 / var(--tw-border-opacity)); + stroke: currentColor; +} +.breadcrumb__dropdown-icon path{ + transform-origin: center; + --tw-rotate: 0deg; + transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y)); + transition-property: transform; + transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1); + transition-duration: 300ms; +} +.clicked .breadcrumb__dropdown-icon path{ + --tw-rotate: 180deg; + transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y)); +} +.breadcrumb__include-icon{ + margin-left: -1.25rem; + margin-right: 0.75rem; + transition-property: opacity; + transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1); + transition-duration: 200ms; +} +.clicked .breadcrumb__include-icon{ + opacity: 0; +} +.breadcrumb__dropdown-icon{ + height: 1.25em; + width: 1.25em; + margin-left: 0.5rem; + --tw-text-opacity: 1; + color: rgb(216 35 42 / var(--tw-text-opacity)); + border-radius: 0.125rem; + border-width: 1px; + --tw-border-opacity: 1; + border-color: rgb(216 35 42 / var(--tw-border-opacity)); + stroke: currentColor; +} +.breadcrumb__dropdown-icon path{ + transform-origin: center; + --tw-rotate: 0deg; + transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y)); + transition-property: transform; + transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1); + transition-duration: 300ms; +} +.clicked .breadcrumb__dropdown-icon path{ + --tw-rotate: 180deg; + transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y)); +} +/*----------------------------------------*\ + BREADCRUMB DRAWER +\*----------------------------------------*/ +.breadcrumb ul ul{ + margin-top: 1px; + width: 300px; + padding: 0.5rem; + position: absolute; + top: 3rem; + left: 0px; + z-index: 10; + --tw-bg-opacity: 1; + background-color: rgb(255 255 255 / var(--tw-bg-opacity)); + --tw-shadow: 0px 10px 20px 0px rgba(0,0,0,0.06), 1px 10px 70px -8px rgba(0,0,0,0.13); + --tw-shadow-colored: 0px 10px 20px 0px var(--tw-shadow-color), 1px 10px 70px -8px var(--tw-shadow-color); + box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow); +} +.breadcrumb ul ul li a{ + display: flex; + align-items: center; + justify-content: space-between; + position: relative; + padding-left: 1rem; + padding-right: 1rem; + padding-top: 0.75rem; + padding-bottom: 0.75rem; + cursor: pointer; + transition-property: color, background-color, border-color, fill, stroke, -webkit-text-decoration-color; + transition-property: color, background-color, border-color, text-decoration-color, fill, stroke; + transition-property: color, background-color, border-color, text-decoration-color, fill, stroke, -webkit-text-decoration-color; + transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1); + transition-duration: 150ms; +} +.breadcrumb ul ul li a:hover{ + --tw-bg-opacity: 1; + background-color: rgb(240 244 247 / var(--tw-bg-opacity)); +} +.breadcrumb ul ul li a:focus{ + --tw-text-opacity: 1; + color: rgb(216 35 42 / var(--tw-text-opacity)); +} +.breadcrumb ul ul li a{ + padding-left: 1rem; + padding-right: 1rem; + padding-top: 0.5rem; + padding-bottom: 0.5rem; +} +.breadcrumb ul ul li a.menu__item--negative:hover{ + --tw-bg-opacity: 1; + background-color: rgb(38 54 69 / var(--tw-bg-opacity)); +} +.breadcrumb ul ul li a{ + width: 100%; + border-bottom-width: 1px; + border-color: rgb(223 228 233 / var(--tw-border-opacity)); + --tw-border-opacity: 1; +} +.breadcrumb ul ul li a:hover{ + --tw-text-opacity: 1; + color: rgb(216 35 42 / var(--tw-text-opacity)); +} +.breadcrumb ul ul li a.active::after { + content:''; + display: block; + --tw-bg-opacity: 1; + background-color: rgb(216 35 42 / var(--tw-bg-opacity)); + width: 2px; + position: absolute; + top: 0px; + bottom: 0px; + left: 0px; + } +/*----------------------------------------*\ + FOOTER +\*----------------------------------------*/ +.footer-information{ + display: flex; + flex-direction: column; +} +@media (min-width: 1024px){ + + .footer-information{ + display: grid; + grid-template-columns: repeat(3, minmax(0, 1fr)); + gap: 4rem; + } +} +@media (min-width: 1280px){ + + .footer-information{ + grid-template-columns: repeat(4, minmax(0, 1fr)); + } +} +.footer-information{ + padding-top: 3.5rem; + padding-bottom: 3.5rem; +} +@media (min-width: 1024px){ + + .footer-information{ + padding-top: 5rem; + padding-bottom: 5rem; + } +} +@media (min-width: 1800px){ + + .footer-information{ + padding-top: 8rem; + padding-bottom: 8rem; + } +} +.footer-navigation{ + display: flex; + padding-top: 0.75rem; + padding-bottom: 0.75rem; +} +.footer-navigation > :not([hidden]) ~ :not([hidden]){ + --tw-space-x-reverse: 0; + margin-right: calc(0.5rem * var(--tw-space-x-reverse)); + margin-left: calc(0.5rem * calc(1 - var(--tw-space-x-reverse))); +} +@media (min-width: 640px){ + + .footer-navigation > :not([hidden]) ~ :not([hidden]){ + --tw-space-x-reverse: 0; + margin-right: calc(1rem * var(--tw-space-x-reverse)); + margin-left: calc(1rem * calc(1 - var(--tw-space-x-reverse))); + } +} +.footer-navigation{ + font-size: 0.75rem; +} +@media (min-width: 1280px){ + + .footer-navigation{ + font-size: 0.875rem; + } +} +@media (min-width: 1800px){ + + .footer-navigation{ + font-size: 1rem; + } +} +.footer__link{ + display: inline-flex; + align-items: center; + padding-top: 0.5rem; + padding-bottom: 0.5rem; + --tw-text-opacity: 1; + color: rgb(255 255 255 / var(--tw-text-opacity)); +} +.footer__link:hover{ + --tw-text-opacity: 1; + color: rgb(209 213 219 / var(--tw-text-opacity)); +} +.footer__link:focus{ + --tw-text-opacity: 1; + color: rgb(209 213 219 / var(--tw-text-opacity)); +} +.footer__link{ + cursor: pointer; +} +.footer__link .footer-information__icon{ + display: inline-block; + margin-right: 0.25rem; + height: 100%; + width: 1.4em; + stroke: currentColor; +} +.footer-information__link--icon-right{ + flex-direction: row-reverse; +} +.footer-information__link--icon-right .footer-information__icon{ + position: relative; + left: 0.1em; + margin-left: 0.2em; +} +.footer-information__entry{ + margin-bottom: 4rem; +} +@media (min-width: 1024px){ + + .footer-information__entry{ + margin-bottom: 0px; + } +} +.footer-information__entry{ + --tw-text-opacity: 1; + color: rgb(255 255 255 / var(--tw-text-opacity)); +} +.footer-information__entry:last-child{ + margin-bottom: 0px; +} +.footer-information__entry h3{ + font-size: 1.25rem; +} +@media (min-width: 1024px){ + + .footer-information__entry h3{ + font-size: 1.375rem; + } +} +@media (min-width: 1280px){ + + .footer-information__entry h3{ + font-size: 1.625rem; + } +} +@media (min-width: 1800px){ + + .footer-information__entry h3{ + font-size: 2rem; + } +} +.footer-information__entry h3{ + line-height: 1.25; + margin-bottom: 1.5rem; +} +@media (min-width: 1024px){ + + .footer-information__entry h3{ + margin-bottom: 2.5rem; + } +} +.footer-information__entry p{ + margin-bottom: 0.75rem; +} +@media (min-width: 1280px){ + + .footer-information__entry p{ + margin-bottom: 1rem; + } +} +.footer-information__entry p:last-child{ + margin-bottom: 0px; +} +@media (min-width: 1280px){ + + .footer-information__entry.footer-information__entry--big{ + grid-column: span 2 / span 2; + } +} +.footer-information__social{ + margin-bottom: 1.5rem; +} +@media (min-width: 1024px){ + + .footer-information__social{ + margin-bottom: 2rem; + } +} +.footer-information__social{ + margin-top: -0.5rem; +} +/* to compensate the paddings of the links and get the same vertical alignment as the text on the first-column */ +.footer-information__social .footer__link{ + margin-right: 1.25rem; +} +.footer-information__social svg { + stroke-width: 0.1px; + } +.footer-information__links{ + display: flex; + flex-direction: column; +} +@media (min-width: 640px){ + + .footer-information__links{ + flex-direction: row; + gap: 4rem; + } +} +@media (min-width: 1024px){ + + .footer-information__links{ + flex-direction: column; + gap: 0px; + } +} +@media (min-width: 1280px){ + + .footer-information__links{ + flex-direction: row; + gap: 4rem; + } +} +.footer-information__links{ + margin-top: -1rem; +} +/* to compensate the paddings of the links and get the same vertical alignment as the text on the first-column */ +.footer-information__links .footer-information__links-column{ + flex: 1 1 0%; +} +.footer-information__links .footer__link{ + width: 100%; + display: flex; + justify-content: space-between; + padding-top: 1rem; + padding-bottom: 1rem; + padding-left: 0.5rem; + padding-right: 0.5rem; + border-bottom-width: 1px; + --tw-border-opacity: 1; + border-color: rgb(130 142 154 / var(--tw-border-opacity)); +} +.footer-information__links .footer__link:hover{ + --tw-bg-opacity: 1; + background-color: rgb(38 54 69 / var(--tw-bg-opacity)); + --tw-text-opacity: 1; + color: rgb(255 255 255 / var(--tw-text-opacity)); +} +.footer-information__links .footer__link .footer-information__icon{ + height: 1.5rem; +} +/*----------------------------------------*\ + MOBILE-MENU +\*----------------------------------------*/ +.mobile-menu{ + visibility: hidden; + opacity: 0; +} +@media (min-width: 1024px){ + + .mobile-menu{ + display: none; + } +} +.mobile-menu{ + overflow: hidden; + height: 0px; + width: 100%; + position: absolute; + z-index: 10; + transition-property: opacity; + transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1); + transition-duration: 700ms; + --tw-bg-opacity: 1; + background-color: rgb(255 255 255 / var(--tw-bg-opacity)); + --tw-shadow: 0px 10px 20px 0px rgba(0,0,0,0.06), 1px 10px 70px -8px rgba(0,0,0,0.13); + --tw-shadow-colored: 0px 10px 20px 0px var(--tw-shadow-color), 1px 10px 70px -8px var(--tw-shadow-color); + box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow); +} +.mobile-menu--is-open, .body--mobile-menu-is-open .mobile-menu{ + display: block; +} +@media (min-width: 1024px){ + + .mobile-menu--is-open, .body--mobile-menu-is-open .mobile-menu{ + display: none; + } +} +.mobile-menu--is-open, +.body--mobile-menu-is-open .mobile-menu { + height: calc(100vh - 85px); + visibility: visible; + opacity: 1; + overflow-y: auto; +} +/*----------------------------------------*\ + HERO +\*----------------------------------------*/ +.hero{ + padding-top: 0px; +} +@media (min-width: 1024px){ + + .hero{ + padding-top: 0px; + } +} +@media (min-width: 1800px){ + + .hero{ + padding-top: 0px; + } +} +.hero{ + padding-bottom: 3.5rem; +} +@media (min-width: 1024px){ + + .hero{ + padding-bottom: 5rem; + } +} +@media (min-width: 1800px){ + + .hero{ + padding-bottom: 8rem; + } +} +.hero{ + padding-top: 3rem; +} +@media (min-width: 1024px){ + + .hero{ + padding-top: 3.5rem; + } +} +@media (min-width: 1800px){ + + .hero{ + padding-top: 5rem; + } +} +.hero figure{ + padding-top: 0px; + padding-bottom: 0px; +} +.hero__content > :not([hidden]) ~ :not([hidden]){ + --tw-space-y-reverse: 0; + margin-top: calc(1.5rem * calc(1 - var(--tw-space-y-reverse))); + margin-bottom: calc(1.5rem * var(--tw-space-y-reverse)); +} +@media (min-width: 1024px){ + + .hero__content > :not([hidden]) ~ :not([hidden]){ + --tw-space-y-reverse: 0; + margin-top: calc(2rem * calc(1 - var(--tw-space-y-reverse))); + margin-bottom: calc(2rem * var(--tw-space-y-reverse)); + } +} +@media (min-width: 1800px){ + + .hero__content > :not([hidden]) ~ :not([hidden]){ + --tw-space-y-reverse: 0; + margin-top: calc(2.5rem * calc(1 - var(--tw-space-y-reverse))); + margin-bottom: calc(2.5rem * var(--tw-space-y-reverse)); + } +} +.hero__title{ + font-family: FrutigerNeueLTPro-Bold, Hind, Fallback-font; + font-weight: 400; + font-size: 1.625rem; +} +@media (min-width: 1024px){ + + .hero__title{ + font-size: 2rem; + } +} +@media (min-width: 1280px){ + + .hero__title{ + font-size: 2.5rem; + } +} +@media (min-width: 1800px){ + + .hero__title{ + font-size: 3rem; + } +} +.hero__title{ + line-height: 1.25; +} +.hero__description{ + font-size: 1.125rem; +} +@media (min-width: 1280px){ + + .hero__description{ + font-size: 1.25rem; + } +} +@media (min-width: 1800px){ + + .hero__description{ + font-size: 1.375rem; + } +} +.hero__description{ + line-height: 1.375; +} +.hero__cta .btn{ + margin-right: 1rem; +} +@media (min-width: 768px){ + + .hero__cta .btn{ + margin-right: 1.25rem; + } +} +@media (min-width: 1280px){ + + .hero__cta .btn{ + margin-right: 1.5rem; + } +} +.hero__cta .btn{ + margin-bottom: 1rem; +} +@media (min-width: 768px){ + + .hero__cta .btn{ + margin-bottom: 1.25rem; + } +} +@media (min-width: 1280px){ + + .hero__cta .btn{ + margin-bottom: 1.5rem; + } +} +.hero__image{ + position: relative; + display: block; + overflow: hidden; + width: 100%; +} +.hero__image img{ + width: 100%; +} +@media (min-width: 1280px) { +.grid--responsive-cols-1\/4-3\/4.hero--default .hero__content, .hero--default .hero__content .grid--responsive-cols-1\/4-3\/4 { + grid-template-columns: repeat(8, minmax(0, 1fr)); + grid-template-areas: "A A B B B B B B" + } + } +.hero--default .hero__content{ + grid-column: span 12 / span 12; +} +@media (min-width: 768px){ + + .hero--default .hero__content{ + grid-column: span 10 / span 10; + } +} +@media (min-width: 1280px){ + + .hero--default .hero__content{ + grid-column: span 8 / span 8; + } +} +@media (min-width: 768px){ + + .hero--default .hero__content{ + grid-column-start: 2; + } +} +@media (min-width: 1280px){ + + .hero--default .hero__content{ + grid-column-start: 3; + } +.grid--responsive-cols-1\/4-3\/4.hero--default .hero__image, .hero--default .hero__image .grid--responsive-cols-1\/4-3\/4 { + grid-template-columns: repeat(10, minmax(0, 1fr)); + grid-template-areas: "A A B B B B B B B B" + } +.grid--responsive-cols-3\/4-1\/4.hero--default .hero__image, .hero--default .hero__image .grid--responsive-cols-3\/4-1\/4 { + grid-template-columns: repeat(10, minmax(0, 1fr)); + grid-template-areas: "A A A A A A A A B B" + } +.grid--responsive-cols-1\/3-2\/3.hero--default .hero__image, .hero--default .hero__image .grid--responsive-cols-1\/3-2\/3, .grid--responsive-cols-2\/3-1\/3.hero--default .hero__image, .hero--default .hero__image .grid--responsive-cols-2\/3-1\/3 { + grid-template-columns: repeat(10, minmax(0, 1fr)); + grid-template-areas: "A A A B B B B B B B" + } +.grid--responsive-cols-2\/3-1\/3.hero--default .hero__image, .hero--default .hero__image .grid--responsive-cols-2\/3-1\/3 { + grid-template-columns: repeat(10, minmax(0, 1fr)); + grid-template-areas: "A A A A A A A B B B" + } +} +.hero--default .hero__image{ + grid-column: span 12 / span 12; +} +@media (min-width: 1280px){ + + .hero--default .hero__image{ + grid-column-start: 2; + grid-column-end: 12; + } +} +.hero--default .hero__image img{ + margin: auto; +} +.hero--title-only{ + padding-bottom: 1.75rem; +} +@media (min-width: 1024px){ + + .hero--title-only{ + padding-bottom: 2.5rem; + } +} +@media (min-width: 1800px){ + + .hero--title-only{ + padding-bottom: 4rem; + } +} +@media (min-width: 1280px) { +.grid--responsive-cols-1\/4-3\/4.hero--title-only .hero__content, .hero--title-only .hero__content .grid--responsive-cols-1\/4-3\/4 { + grid-template-columns: repeat(6, minmax(0, 1fr)); + grid-template-areas: "A A B B B B" + } + } +.hero--title-only .hero__content{ + grid-column: span 12 / span 12; +} +@media (min-width: 768px){ + + .hero--title-only .hero__content{ + grid-column: span 10 / span 10; + } +} +@media (min-width: 1024px){ + + .hero--title-only .hero__content{ + grid-column: span 8 / span 8; + } +} +@media (min-width: 1280px){ + + .hero--title-only .hero__content{ + grid-column: span 6 / span 6; + } +} +@media (min-width: 768px){ + + .hero--title-only .hero__content{ + grid-column-start: 2; + } +} +@media (min-width: 1024px){ + + .hero--title-only .hero__content{ + grid-column-start: 3; + } +} +@media (min-width: 1280px){ + + .hero--title-only .hero__content{ + grid-column-start: 4; + } +} +.hero--title-only .hero__content figure img{ + width: 100%; +} +.hero--title-only .hero__content .newsletter { + --side-margin: calc(1rem * -1); + } +@media (min-width: 480px) { + .hero--title-only .hero__content .newsletter { + --side-margin: calc(1.75rem * -1); + } + } +@media (min-width: 640px) { + .hero--title-only .hero__content .newsletter { + --side-margin: calc((100vw - 6em ) / -12 ); + } + } +@media (min-width: 1280px) { + .hero--title-only .hero__content .newsletter { + --side-margin: calc((1280px - 6em ) / -12 ); + } + } +@media (min-width: 1536px) { + .hero--title-only .hero__content .newsletter { + --side-margin: calc((1536px - 6em ) / -12 ); + } + } +.hero--title-only .hero__content .newsletter{ + + margin-left: var(--side-margin); + margin-right: var(--side-margin); + + padding-left: calc(var(--side-margin) * -1); + padding-right: calc(var(--side-margin) * -1); + padding-top: 1.75rem; + padding-bottom: 2rem; +} +@media (min-width: 480px){ + + .hero--title-only .hero__content .newsletter{ + padding-top: 2.25rem; + padding-bottom: 2.5rem; + } +} +@media (min-width: 640px){ + + .hero--title-only .hero__content .newsletter{ + padding-top: 2.5rem; + padding-bottom: 3rem; + } +} +@media (min-width: 1024px){ + + .hero--title-only .hero__content .newsletter{ + padding-top: 3rem; + padding-bottom: 3.5rem; + } +} +@media (min-width: 1280px){ + + .hero--title-only .hero__content .newsletter{ + padding-top: 3.5rem; + padding-bottom: 4rem; + } +} +.hero--title-only .hero__content .tabs{ + padding-top: 2rem; + padding-bottom: 2rem; +} +.hero--title-only .hero__content .tabs, .hero--title-only .hero__content .tabs-centered { + --side-margin: calc(1rem * -1); + } +@media (min-width: 480px) { + .hero--title-only .hero__content .tabs, .hero--title-only .hero__content .tabs-centered { + --side-margin: calc(1.75rem * -1); + } + } +@media (min-width: 640px) { + .hero--title-only .hero__content .tabs, .hero--title-only .hero__content .tabs-centered { + --side-margin: calc((100vw - 6em ) / -12 ); + } + } +@media (min-width: 1280px) { + .hero--title-only .hero__content .tabs, .hero--title-only .hero__content .tabs-centered { + --side-margin: calc((1280px - 6em ) / -12 ); + } + } +@media (min-width: 1536px) { + .hero--title-only .hero__content .tabs, .hero--title-only .hero__content .tabs-centered { + --side-margin: calc((1536px - 6em ) / -12 ); + } + } +.hero--title-only .hero__content .tabs, .hero--title-only .hero__content .tabs-centered{ + + margin-left: var(--side-margin); + margin-right: var(--side-margin); + + padding-left: calc(var(--side-margin) * -1); + padding-right: calc(var(--side-margin) * -1); +} +@media (min-width: 768px) { + + .hero--title-only .hero__content .tabs { + padding-left: 0; + padding-right: 0 + } + } +.hero--title-only .hero__content .text-image, .hero--title-only .hero__content .text-image-centered { + --side-margin: calc(1rem * -1); + } +@media (min-width: 480px) { + .hero--title-only .hero__content .text-image, .hero--title-only .hero__content .text-image-centered { + --side-margin: calc(1.75rem * -1); + } + } +@media (min-width: 640px) { + .hero--title-only .hero__content .text-image, .hero--title-only .hero__content .text-image-centered { + --side-margin: calc((100vw - 6em ) / -12 ); + } + } +@media (min-width: 1280px) { + .hero--title-only .hero__content .text-image, .hero--title-only .hero__content .text-image-centered { + --side-margin: calc((1280px - 6em ) / -12 ); + } + } +@media (min-width: 1536px) { + .hero--title-only .hero__content .text-image, .hero--title-only .hero__content .text-image-centered { + --side-margin: calc((1536px - 6em ) / -12 ); + } + } +.hero--title-only .hero__content .text-image, .hero--title-only .hero__content .text-image-centered{ + + margin-left: var(--side-margin); + margin-right: var(--side-margin); + + padding-left: calc(var(--side-margin) * -1); + padding-right: calc(var(--side-margin) * -1); +} +@media (min-width: 768px) { + + .hero--title-only .hero__content .text-image { + padding-left: 0; + padding-right: 0 + } + } +.hero--title-only .hero__content blockquote { + --side-margin: calc(1rem * -1); + } +@media (min-width: 480px) { + .hero--title-only .hero__content blockquote { + --side-margin: calc(1.75rem * -1); + } + } +@media (min-width: 640px) { + .hero--title-only .hero__content blockquote { + --side-margin: calc((100vw - 6em ) / -12 ); + } + } +@media (min-width: 1280px) { + .hero--title-only .hero__content blockquote { + --side-margin: calc((1280px - 6em ) / -12 ); + } + } +@media (min-width: 1536px) { + .hero--title-only .hero__content blockquote { + --side-margin: calc((1536px - 6em ) / -12 ); + } + } +.hero--title-only .hero__content blockquote{ + + margin-left: var(--side-margin); + margin-right: var(--side-margin); + + padding-left: calc(var(--side-margin) * -1); + padding-right: calc(var(--side-margin) * -1); +} +.hero--main-image{ + padding-top: 3.5rem; + padding-bottom: 3.5rem; +} +@media (min-width: 1024px){ + + .hero--main-image{ + padding-top: 5rem; + padding-bottom: 5rem; + } +} +@media (min-width: 1800px){ + + .hero--main-image{ + padding-top: 8rem; + padding-bottom: 8rem; + } +} +.hero--main-image .hero__content{ + grid-column: span 12 / span 12; +} +@media (min-width: 768px){ + + .hero--main-image .hero__content{ + grid-column: span 6 / span 6; + } +} +.hero--main-image .hero__content{ + display: flex; + height: 100%; + flex-direction: column; + justify-content: center; +} +.hero--main-image .hero__title{ + font-size: 1.625rem; +} +@media (min-width: 1024px){ + + .hero--main-image .hero__title{ + font-size: 2rem; + } +} +@media (min-width: 1280px){ + + .hero--main-image .hero__title{ + font-size: 2.5rem; + } +} +@media (min-width: 1800px){ + + .hero--main-image .hero__title{ + font-size: 3rem; + } +} +.hero--main-image .hero__title{ + line-height: 1.25; +} +.hero--main-image .hero__image{ + grid-column: span 12 / span 12; +} +@media (min-width: 768px){ + + .hero--main-image .hero__image{ + grid-column: span 6 / span 6; + } +} +.hero--main{ + padding-top: 5rem; + padding-bottom: 5rem; +} +@media (min-width: 1024px){ + + .hero--main{ + padding-top: 8rem; + padding-bottom: 8rem; + } +} +@media (min-width: 1800px){ + + .hero--main{ + padding-top: 10rem; + padding-bottom: 10rem; + } +} +.hero--main .hero__content{ + grid-column: span 12 / span 12; +} +@media (min-width: 768px){ + + .hero--main .hero__content{ + grid-column: span 10 / span 10; + } +} +@media (min-width: 1024px){ + + .hero--main .hero__content{ + grid-column: span 8 / span 8; + } +} +.hero--main .hero__content{ + display: flex; + height: 100%; + flex-direction: column; + justify-content: center; +} +.hero--main .hero__title{ + font-size: 2rem; +} +@media (min-width: 1024px){ + + .hero--main .hero__title{ + font-size: 2.5rem; + } +} +@media (min-width: 1280px){ + + .hero--main .hero__title{ + font-size: 3rem; + } +} +@media (min-width: 1800px){ + + .hero--main .hero__title{ + font-size: 3.5rem; + } +} +.hero--main .hero__title{ + line-height: 1.25; +} +.hero--main .hero__image{ + grid-column: span 12 / span 12; +} +@media (min-width: 768px){ + + .hero--main .hero__image{ + grid-column: span 6 / span 6; + } +} +.hero--hub{ + padding-bottom: 4rem; +} +@media (min-width: 768px){ + + .hero--hub{ + padding-bottom: 4rem; + } +} +@media (min-width: 1800px){ + + .hero--hub{ + padding-bottom: 7rem; + } +} +.hero--hub .hero__content{ + grid-column: span 12 / span 12; +} +@media (min-width: 768px){ + + .hero--hub .hero__content{ + grid-column: span 10 / span 10; + } +} +@media (min-width: 1024px){ + + .hero--hub .hero__content{ + grid-column: span 8 / span 8; + } +} +.hero--hub .hero__title{ + order: 1; +} +.hero--hub .hero__description{ + order: 2; +} +.hero--hub .hero__image{ + grid-column: span 12 / span 12; +} +@media (min-width: 768px){ + + .hero--hub .hero__image{ + grid-column: span 5 / span 5; + } +} +@media (min-width: 1024px){ + + .hero--hub .hero__image{ + grid-column: span 4 / span 4; + } +} +@media (min-width: 768px){ + + .hero--hub .hero__image{ + grid-column-start: 8; + } +} +.hero--hub .hero__image > *, .hero--hub .hero__image .sticky > *{ + margin-bottom: 1.75rem; +} +@media (min-width: 1024px){ + + .hero--hub .hero__image > *, .hero--hub .hero__image .sticky > *{ + margin-bottom: 2rem; + } +} +@media (min-width: 768px){ + + .container--reverse .hero--hub .hero__image{ + order: 1; + grid-column-start: 1; + } +} +@media (min-width: 1024px){ + + .container--reverse .hero--hub .hero__image{ + grid-column-start: 2; + } +} +.hero--hub .hero__image .sticky .menu__item--active::after{ + display: none; +} +.desktop-menu__drawer.hero--hub .hero__image .sticky .menu__item--active::after { + display: block; + height: 0; + overflow: hidden; + padding: 0px; + opacity: 0; + transition: opacity 300ms, height 1ms 300ms, padding 1ms 300ms; + } +.desktop-menu__drawer.hero--hub .hero__image .sticky .menu__item--active::after > *{ + --tw-translate-y: -2rem; + transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y)); + transition-property: transform; + transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1); + transition-duration: 300ms; +} +.desktop-menu__overlay.hero--hub .hero__image .sticky .menu__item--active::after { + display: block; + height: 0; + overflow: hidden; + padding: 0px; + opacity: 0; + transition: opacity 300ms, height 1ms 300ms; + } +@media (min-width: 768px){ + + .hero--hub .hero__image .sticky .menu__item--active::after{ + display: block; + } +} +.hero--2-cols .hero__title{ + margin-bottom: 1.5rem; +} +@media (min-width: 768px){ + + .hero--2-cols .hero__title{ + margin-bottom: 3rem; + } +} +@media (min-width: 1024px){ + + .hero--2-cols .hero__title{ + margin-bottom: 6rem; + } +} +.hero--2-cols .hero--2-cols__container{ + display: flex; + flex-direction: column; +} +@media (min-width: 768px){ + + .hero--2-cols .hero--2-cols__container{ + flex-direction: row; + } +} +.hero--2-cols .hero--2-cols__container .hero__description{ + order: 1; +} +@media (min-width: 768px){ + + .hero--2-cols .hero--2-cols__container .hero__description{ + width: 33.333333%; + } +} +.hero--2-cols .hero--2-cols__container .hero__description{ + margin-right: 1.5rem; + font-size: 1rem; +} +@media (min-width: 1024px){ + + .hero--2-cols .hero--2-cols__container .hero__description{ + font-size: 1.125rem; + } +} +@media (min-width: 1800px){ + + .hero--2-cols .hero--2-cols__container .hero__description{ + font-size: 1.25rem; + } +} +.hero--2-cols .hero--2-cols__container .hero__description{ + font-family: FrutigerNeueLTPro-Bold, Hind, Fallback-font; + font-weight: 400; +} +.hero--2-cols .hero--2-cols__container .hero__image{ + order: 2; +} +@media (min-width: 768px){ + + .hero--2-cols .hero--2-cols__container .hero__image{ + width: 66.666667%; + } +} +.hero--2-cols .hero--2-cols__container .hero__image{ + padding-bottom: 40%; + margin-top: 1.5rem; +} +@media (min-width: 768px){ + + .hero--2-cols .hero--2-cols__container .hero__image{ + margin-top: 0px; + } +} +/*----------------------------------------*\ + QUOTE +\*----------------------------------------*/ +@media (min-width: 1280px) { +.grid--responsive-cols-1\/4-3\/4.quote, .quote .grid--responsive-cols-1\/4-3\/4 { + grid-template-columns: repeat(10, minmax(0, 1fr)); + grid-template-areas: "A A B B B B B B B B" + } +.grid--responsive-cols-3\/4-1\/4.quote, .quote .grid--responsive-cols-3\/4-1\/4 { + grid-template-columns: repeat(10, minmax(0, 1fr)); + grid-template-areas: "A A A A A A A A B B" + } +.grid--responsive-cols-1\/3-2\/3.quote, .quote .grid--responsive-cols-1\/3-2\/3, .grid--responsive-cols-2\/3-1\/3.quote, .quote .grid--responsive-cols-2\/3-1\/3 { + grid-template-columns: repeat(10, minmax(0, 1fr)); + grid-template-areas: "A A A B B B B B B B" + } +.grid--responsive-cols-2\/3-1\/3.quote, .quote .grid--responsive-cols-2\/3-1\/3 { + grid-template-columns: repeat(10, minmax(0, 1fr)); + grid-template-areas: "A A A A A A A B B B" + } + } +.quote{ + gap: 1.25rem; +} +@media (min-width: 480px){ + + .quote{ + gap: 1.75rem; + } +} +@media (min-width: 640px){ + + .quote{ + gap: 2.25rem; + } +} +@media (min-width: 1024px){ + + .quote{ + gap: 2.5rem; + } +} +@media (min-width: 1280px){ + + .quote{ + gap: 3rem; + } +} +@media (min-width: 1800px){ + + .quote{ + gap: 4rem; + } +} +.quote{ + grid-column: span 12 / span 12; +} +@media (min-width: 1280px){ + + .quote{ + grid-column-start: 2; + grid-column-end: 12; + } +} +.quote{ + display: grid; + justify-content: center; +} +@media print { + + .quote { + display: block; /* needed so that content in grid don't break the break-inside rule */ + } +} +.quote { /* default Tailwind value */ } +.quote + .grid{ + margin-top: 1.25rem; +} +@media (min-width: 480px){ + + .quote + .grid{ + margin-top: 1.75rem; + } +} +@media (min-width: 640px){ + + .quote + .grid{ + margin-top: 2.25rem; + } +} +@media (min-width: 1024px){ + + .quote + .grid{ + margin-top: 2.5rem; + } +} +@media (min-width: 1280px){ + + .quote + .grid{ + margin-top: 3rem; + } +} +@media (min-width: 1800px){ + + .quote + .grid{ + margin-top: 4rem; + } +} +.quote + .section__subtitle{ + padding-top: 3rem; +} +@media (min-width: 1024px){ + + .quote + .section__subtitle{ + padding-top: 4rem; + } +} +@media (min-width: 1800px){ + + .quote + .section__subtitle{ + padding-top: 5rem; + } +} +.storybook-demo-ratio .quote > div > div > *{ + padding: 1.5rem; + text-align: center; + font-size: 1.25rem; + --tw-text-opacity: 1; + color: rgb(76 29 149 / var(--tw-text-opacity)); + --tw-bg-opacity: 1; + background-color: rgb(245 243 255 / var(--tw-bg-opacity)); + border-width: 1px; + border-style: dashed; + --tw-border-opacity: 1; + border-color: rgb(124 58 237 / var(--tw-border-opacity)); +} +.quote { + + grid-template-columns: repeat(2, minmax(-webkit-min-content, -webkit-max-content)); + + grid-template-columns: repeat(2, minmax(min-content, max-content)); + grid-template-areas: "A B"; +} +@media (min-width: 480px){ + + .quote-font-size{ + font-size: 1.125rem; + } +} +@media (min-width: 768px){ + + .quote-font-size{ + font-size: 1.25rem; + } +} +@media (min-width: 1024px){ + + .quote-font-size{ + font-size: 1.375rem; + } +} +@media (min-width: 1280px){ + + .quote-font-size{ + font-size: 1.625rem; + } +} +@media (min-width: 1800px){ + + .quote-font-size{ + font-size: 2rem; + } +} +.quote__text{ + display: flex; + height: 100%; + flex-direction: column; + justify-content: center; +} +@media (min-width: 1024px){ + + .quote__text{ + padding-left: 2.25rem; + } +} +@media (min-width: 1280px){ + + .quote__text{ + padding-left: 0px; + } +} +.quote__title{ + position: relative; + padding-bottom: 0.5rem; +} +@media (min-width: 480px){ + + .quote__title{ + font-size: 1.125rem; + } +} +@media (min-width: 768px){ + + .quote__title{ + font-size: 1.25rem; + } +} +@media (min-width: 1024px){ + + .quote__title{ + font-size: 1.375rem; + } +} +@media (min-width: 1280px){ + + .quote__title{ + font-size: 1.625rem; + } +} +@media (min-width: 1800px){ + + .quote__title{ + font-size: 2rem; + } +} +.quote__title{ + --tw-text-opacity: 1; + color: rgb(47 67 86 / var(--tw-text-opacity)); + font-family: FrutigerNeueLTPro-Bold, Hind, Fallback-font; + font-weight: 400; +} +@media (min-width: 1024px){ + + .quote__title{ + text-indent: -2.25rem; + } +} +.quote__title::before { + content: '\00ab'; + line-height: 0; + position: absolute; + display: block; + font-size: 2rem; + top: -1rem; + } +@media (min-width: 1024px){ + + .quote__title::before{ + position: relative; + display: inline; + font-size: 3rem; + top: 0.05em; + } +} +.quote__title::before{ + --tw-text-opacity: 1; + color: rgb(47 67 86 / var(--tw-text-opacity)); +} +.quote__title::after { + content: ' \00bb'; + position: relative; + top: 0.05em; + font-size: 2rem; + } +@media (min-width: 1024px){ + + .quote__title::after{ + font-size: 3rem; + } +} +.quote__title::after{ + line-height: 0; +} +.quote__author{ + --tw-text-opacity: 1; + color: rgb(89 105 120 / var(--tw-text-opacity)); + font-size: 0.875rem; +} +@media (min-width: 1280px){ + + .quote__author{ + font-size: 1rem; + } +} +@media (min-width: 1800px){ + + .quote__author{ + font-size: 1.125rem; + } +} +.quote__image{ + height: 4rem; + width: 4rem; +} +@media (min-width: 768px){ + + .quote__image{ + height: 7rem; + width: 7rem; + } +} +@media (min-width: 1024px){ + + .quote__image{ + height: 9rem; + width: 9rem; + } +} +@media (min-width: 1280px){ + + .quote__image{ + height: 10rem; + width: 10rem; + } +} +@media (min-width: 1536px){ + + .quote__image{ + height: 11rem; + width: 11rem; + } +} +.quote__image picture, .quote__image img{ + height: 100%; + width: 100%; + -o-object-fit: cover; + object-fit: cover; +} +blockquote{ + position: relative; + padding-bottom: 0.5rem; +} +@media (min-width: 480px){ + + blockquote{ + font-size: 1.125rem; + } +} +@media (min-width: 768px){ + + blockquote{ + font-size: 1.25rem; + } +} +@media (min-width: 1024px){ + + blockquote{ + font-size: 1.375rem; + } +} +@media (min-width: 1280px){ + + blockquote{ + font-size: 1.625rem; + } +} +@media (min-width: 1800px){ + + blockquote{ + font-size: 2rem; + } +} +blockquote{ + --tw-text-opacity: 1; + color: rgb(47 67 86 / var(--tw-text-opacity)); + font-family: FrutigerNeueLTPro-Bold, Hind, Fallback-font; + font-weight: 400; +} +@media (min-width: 1024px){ + + blockquote{ + text-indent: -2.25rem; + } +} +blockquote::before { + content: '\00ab'; + line-height: 0; + position: absolute; + display: block; + font-size: 2rem; + top: -1rem; + } +@media (min-width: 1024px){ + + blockquote::before{ + position: relative; + display: inline; + font-size: 3rem; + top: 0.05em; + } +} +blockquote::before{ + --tw-text-opacity: 1; + color: rgb(47 67 86 / var(--tw-text-opacity)); +} +blockquote::after { + content: ' \00bb'; + position: relative; + top: 0.05em; + font-size: 2rem; + } +@media (min-width: 1024px){ + + blockquote::after{ + font-size: 3rem; + } +} +blockquote::after{ + line-height: 0; +} +@media (min-width: 480px){ + + blockquote{ + font-size: 1.125rem; + } +} +@media (min-width: 768px){ + + blockquote{ + font-size: 1.25rem; + } +} +@media (min-width: 1024px){ + + blockquote{ + font-size: 1.375rem; + } +} +@media (min-width: 1280px){ + + blockquote{ + font-size: 1.625rem; + } +} +@media (min-width: 1800px){ + + blockquote{ + font-size: 2rem; + } +} +blockquote{ + padding-top: 3rem; + padding-bottom: 2.5rem; +} +@media (min-width: 1024px){ + + blockquote{ + padding-top: 3.5rem; + padding-bottom: 3.5rem; + } +} +blockquote{ + --tw-bg-opacity: 1; + background-color: rgb(240 244 247 / var(--tw-bg-opacity)); +} +.container__center--xs blockquote { + --side-margin: calc(1rem * -1); + } +@media (min-width: 480px) { + .container__center--xs blockquote { + --side-margin: calc(1.75rem * -1); + } + } +@media (min-width: 640px) { + .container__center--xs blockquote { + --side-margin: calc((100vw - 6em ) / -12 ); + } + } +@media (min-width: 1280px) { + .container__center--xs blockquote { + --side-margin: calc((1280px - 6em ) / -12 ); + } + } +@media (min-width: 1536px) { + .container__center--xs blockquote { + --side-margin: calc((1536px - 6em ) / -12 ); + } + } +.container__center--xs blockquote{ + + margin-left: var(--side-margin); + margin-right: var(--side-margin); + + padding-left: calc(var(--side-margin) * -1); + padding-right: calc(var(--side-margin) * -1); +} +blockquote::before{ + top: 2rem; +} +@media (min-width: 1024px){ + + blockquote::before{ + top: 0px; + } +} +/*----------------------------------------*\ + SOCIALS +\*----------------------------------------*/ +.socials .section__title{ + padding-bottom: 1.5rem; +} +.socials blockquote::before, .socials blockquote::after{ + display: none; +} +.desktop-menu__drawer.socials blockquote::before, .desktop-menu__drawer.socials blockquote::after { + display: block; + height: 0; + overflow: hidden; + padding: 0px; + opacity: 0; + transition: opacity 300ms, height 1ms 300ms, padding 1ms 300ms; + } +.desktop-menu__drawer.socials blockquote::before > *, .desktop-menu__drawer.socials blockquote::after > *{ + --tw-translate-y: -2rem; + transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y)); + transition-property: transform; + transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1); + transition-duration: 300ms; +} +.desktop-menu__overlay.socials blockquote::before, .desktop-menu__overlay.socials blockquote::after { + display: block; + height: 0; + overflow: hidden; + padding: 0px; + opacity: 0; + transition: opacity 300ms, height 1ms 300ms; + } +@media (min-width: 640px){ + + .socials__grid{ + grid-template-columns: repeat(2, minmax(0, 1fr)); + } +} +@media (min-width: 768px){ + + .socials__grid{ + grid-template-columns: repeat(4, minmax(0, 1fr)); + } +} +@media (min-width: 1280px){ + + .socials__grid{ + grid-template-columns: repeat(12, minmax(0, 1fr)); + } +} +.socials__grid > *{ + grid-column: span 12 / span 12; +} +@media (min-width: 768px){ + + .socials__grid > *{ + grid-column: span 2 / span 2; + } +} +@media (min-width: 1280px){ + + .socials__grid > *{ + grid-column: span 4 / span 4; + } + + .socials--items-1 .socials__grid > *:nth-child(1){ + grid-column-start: 3; + } + + .socials--items-1 .socials__grid > *:nth-child(2){ + grid-column-start: 7; + } + + .socials--items-4 .socials__grid > *:nth-child(4){ + grid-column-start: 5; + } +} +.socials__info{ + padding-bottom: 1.5rem; +} +@media (min-width: 768px){ + + .socials--items-2 .socials__info, .socials--items-4 .socials__info{ + grid-column: 1 / -1; + } +} +@media (min-width: 1280px){ + + .socials--items-2 .socials__info, .socials--items-4 .socials__info{ + grid-column: span 4 / span 4; + } +} +@media (min-width: 768px){ + + .socials--items-3 .socials__info, .socials--items-6 .socials__info{ + grid-column: 1 / -1; + } +} +.socials__instagram iframe{ + min-width: 0px !important; +} +/*----------------------------------------*\ + Print +\*----------------------------------------*/ +@media print { + html { + font-size: 13px !important; + max-width: 80%!important; + margin: 2rem auto!important; + } + #main-header .top-bar, + #main-header .top-header__right, + #main-header .desktop-menu { + display: none !important; + } + + #main-header .top-header { + border: 0px !important; + } + + #main-header .logo { + align-items: flex-start !important; + } + + #main-header .logo__name { + display: block !important; + } + + #main-header .logo__title { + display: block; + height: 6.05em; + margin-top: 0.05em; + margin-left: 1em; + padding-left: 2em; + border-left: 0.025em solid #D1D5DB; + } + + #main-footer, + .notification-banner, + .back-to-top-wrapper, + .card__footer__action, + .section__action, + .socials, + .card--twitter, + .carousel__fonctions, + .newsletter, + .card__image, + .share-bar, + .btn--back, + .breadcrumb__dropdown-icon, + .logo__separator, + video, + audio, + object, + iframe { + display: none !important; + } + + .grid { + display: block; /* needed so that content in grid don't break the break-inside rule */ + } + + .swiper-wrapper { + page-break-after: always; + transform: none !important; + height: auto !important; + display: flex; + flex-wrap: wrap; + } + + .swiper-slide { + flex-basis: 50%; + width: auto !important; + margin-right: 0 !important; + } + + .ratio { + padding-bottom: 0 !important; + } + + p, + img, + ul, + .card { + position: relative; + display: block; + -moz-column-break-inside: avoid; + break-inside: avoid; + } + + .card { + margin-bottom: 2em; + } + + .breadcrumb nav { + margin-left: 0 !important; + } + + .breadcrumb-navigation a { + padding-left: 0.25rem !important; + } + + .breadcrumb__include-icon { + margin-left: -0.75rem !important; + margin-right: 0.5rem !important; + } +} +/* + classes for storybook only + TODO remove them from output +*/ +/*----------------------------------------*\ + STORYBOOK ICONS PRESENTATION +\*----------------------------------------*/ +.storybook-icon-list{ + display: grid; + grid-template-columns: repeat(3, minmax(0, 1fr)); + gap: 1.25rem; +} +@media print { + + .storybook-icon-list { + display: block; /* needed so that content in grid don't break the break-inside rule */ + } +} +.storybook-icon-list { /* default Tailwind value */ } +.storybook-icon-list + .grid{ + margin-top: 1.25rem; +} +@media (min-width: 480px){ + + .storybook-icon-list + .grid{ + margin-top: 1.75rem; + } +} +@media (min-width: 640px){ + + .storybook-icon-list + .grid{ + margin-top: 2.25rem; + } +} +@media (min-width: 1024px){ + + .storybook-icon-list + .grid{ + margin-top: 2.5rem; + } +} +@media (min-width: 1280px){ + + .storybook-icon-list + .grid{ + margin-top: 3rem; + } +} +@media (min-width: 1800px){ + + .storybook-icon-list + .grid{ + margin-top: 4rem; + } +} +.storybook-icon-list + .section__subtitle{ + padding-top: 3rem; +} +@media (min-width: 1024px){ + + .storybook-icon-list + .section__subtitle{ + padding-top: 4rem; + } +} +@media (min-width: 1800px){ + + .storybook-icon-list + .section__subtitle{ + padding-top: 5rem; + } +} +.storybook-demo-ratio .storybook-icon-list > div > div > *{ + padding: 1.5rem; + text-align: center; + font-size: 1.25rem; + --tw-text-opacity: 1; + color: rgb(76 29 149 / var(--tw-text-opacity)); + --tw-bg-opacity: 1; + background-color: rgb(245 243 255 / var(--tw-bg-opacity)); + border-width: 1px; + border-style: dashed; + --tw-border-opacity: 1; + border-color: rgb(124 58 237 / var(--tw-border-opacity)); +} +@media (min-width: 768px){ + + .storybook-icon-list{ + grid-template-columns: repeat(4, minmax(0, 1fr)); + } +} +@media (min-width: 1024px){ + + .storybook-icon-list{ + grid-template-columns: repeat(5, minmax(0, 1fr)); + } +} +.storybook-icon-cc-list{ + display: flex; + flex-wrap: wrap; + gap: 1.25rem; +} +.storybook-icon{ + display: flex; + flex-direction: column; + align-items: center; + border-width: 1px; + --tw-border-opacity: 1; + border-color: rgb(243 244 246 / var(--tw-border-opacity)); + --tw-shadow: 0px 1px 2px 0px rgba(0,0,0,0.06), 0px 1px 5px 0px rgba(0,0,0,0.08); + --tw-shadow-colored: 0px 1px 2px 0px var(--tw-shadow-color), 0px 1px 5px 0px var(--tw-shadow-color); + box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow); + transition-property: box-shadow; + transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1); + transition-duration: 150ms; +} +.storybook-icon:hover{ + --tw-shadow: 0px 2px 6px -1px rgba(0,0,0,0.06), 0px 5px 20px -3px rgba(0,0,0,0.08); + --tw-shadow-colored: 0px 2px 6px -1px var(--tw-shadow-color), 0px 5px 20px -3px var(--tw-shadow-color); + box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow); +} +.storybook-icon__text{ + width: 100%; + --tw-bg-opacity: 1; + background-color: rgb(249 250 251 / var(--tw-bg-opacity)); + padding: 0.5rem; + text-align: center; + font-size: 0.75rem; +} +/* Color Presentation */ +.storybook-color-list{ + margin: 0px; + min-width: 0px; + flex: 1 1 0%; + padding: 0px; + display: grid; + grid-template-columns: repeat(2, minmax(0, 1fr)); + gap: 0.75rem; +} +@media print { + + .storybook-color-list { + display: block; /* needed so that content in grid don't break the break-inside rule */ + } +} +.storybook-color-list { /* default Tailwind value */ } +.storybook-color-list + .grid{ + margin-top: 1.25rem; +} +@media (min-width: 480px){ + + .storybook-color-list + .grid{ + margin-top: 1.75rem; + } +} +@media (min-width: 640px){ + + .storybook-color-list + .grid{ + margin-top: 2.25rem; + } +} +@media (min-width: 1024px){ + + .storybook-color-list + .grid{ + margin-top: 2.5rem; + } +} +@media (min-width: 1280px){ + + .storybook-color-list + .grid{ + margin-top: 3rem; + } +} +@media (min-width: 1800px){ + + .storybook-color-list + .grid{ + margin-top: 4rem; + } +} +.storybook-color-list + .section__subtitle{ + padding-top: 3rem; +} +@media (min-width: 1024px){ + + .storybook-color-list + .section__subtitle{ + padding-top: 4rem; + } +} +@media (min-width: 1800px){ + + .storybook-color-list + .section__subtitle{ + padding-top: 5rem; + } +} +.storybook-demo-ratio .storybook-color-list > div > div > *{ + padding: 1.5rem; + text-align: center; + font-size: 1.25rem; + --tw-text-opacity: 1; + color: rgb(76 29 149 / var(--tw-text-opacity)); + --tw-bg-opacity: 1; + background-color: rgb(245 243 255 / var(--tw-bg-opacity)); + border-width: 1px; + border-style: dashed; + --tw-border-opacity: 1; + border-color: rgb(124 58 237 / var(--tw-border-opacity)); +} +@media (min-width: 640px){ + + .storybook-color-list{ + grid-template-columns: repeat(4, minmax(0, 1fr)); + } +} +@media (min-width: 768px){ + + .storybook-color-list{ + grid-template-columns: repeat(5, minmax(0, 1fr)); + } +} +@media (min-width: 1024px){ + + .storybook-color-list{ + grid-template-columns: repeat(10, minmax(0, 1fr)); + gap: 0.25rem; + } +} +.storybook-color-list__title{ + grid-column: 1 / -1; + margin-top: 3rem; + margin-bottom: 0.75rem; + font-family: FrutigerNeueLTPro-Bold, Hind, Fallback-font; + font-size: 1.375rem; + font-weight: 400; + text-transform: capitalize; +} +.storybook-color{ + overflow: hidden; + border-radius: 0.1875rem; + --tw-shadow: 0px 2px 6px -1px rgba(0,0,0,0.06), 0px 5px 20px -3px rgba(0,0,0,0.08); + --tw-shadow-colored: 0px 2px 6px -1px var(--tw-shadow-color), 0px 5px 20px -3px var(--tw-shadow-color); + box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow); +} +.storybook-color__palette{ + height: 4rem; + width: 100%; + --tw-ring-offset-shadow: var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color); + --tw-ring-shadow: var(--tw-ring-inset) 0 0 0 calc(1px + var(--tw-ring-offset-width)) var(--tw-ring-color); + box-shadow: var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow, 0 0 #0000); + --tw-ring-inset: inset; + --tw-ring-color: rgb(0 0 0 / var(--tw-ring-opacity)); + --tw-ring-opacity: 0; +} +.storybook-color__text{ + padding: 0.75rem; + font-size: 0.875rem; + --tw-text-opacity: 1; + color: rgb(107 114 128 / var(--tw-text-opacity)); +} +/* Background presentation */ +.storybook-backgrounds > div{ + margin-bottom: 0.25rem; + overflow: hidden; + border-radius: 0.1875rem; + padding: 1.5rem; + padding-left: 1.75rem; + --tw-shadow: 0px 2px 6px -1px rgba(0,0,0,0.06), 0px 5px 20px -3px rgba(0,0,0,0.08); + --tw-shadow-colored: 0px 2px 6px -1px var(--tw-shadow-color), 0px 5px 20px -3px var(--tw-shadow-color); + box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow); +} +.storybook-demo-grid [class^='grid'] > div, .storybook-demo-grid .container--grid > div, .storybook-demo-grid .container > div{ + padding: 1.5rem; + text-align: center; + font-size: 1.25rem; + --tw-text-opacity: 1; + color: rgb(76 29 149 / var(--tw-text-opacity)); + --tw-bg-opacity: 1; + background-color: rgb(245 243 255 / var(--tw-bg-opacity)); + border-width: 1px; + border-style: dashed; + --tw-border-opacity: 1; + border-color: rgb(124 58 237 / var(--tw-border-opacity)); +} +.storybook-demo-mobile-menu .mobile-menu{ + position: relative; +} +.storybook-demo-mobile-menu .mobile-menu ul{ + --tw-bg-opacity: 1; + background-color: rgb(255 255 255 / var(--tw-bg-opacity)); +} +.storybook-demo-spacings #main-content { + min-height: auto; + } +.storybook-demo-ratio .grid > div > div > *{ + padding: 1.5rem; + text-align: center; + font-size: 1.25rem; + --tw-text-opacity: 1; + color: rgb(76 29 149 / var(--tw-text-opacity)); + --tw-bg-opacity: 1; + background-color: rgb(245 243 255 / var(--tw-bg-opacity)); + border-width: 1px; + border-style: dashed; + --tw-border-opacity: 1; + border-color: rgb(124 58 237 / var(--tw-border-opacity)); +} +@media (min-width: 768px) { +.storybook-show-container, +.storybook-show-container section { + background: + linear-gradient(rgba(255,0,0,0.05),rgba(255,0,0,0.05)) calc(0*100%/12 + 0px) 0/2.25rem 100%, + linear-gradient(rgba(255,0,0,0.05),rgba(255,0,0,0.05)) calc(12*100%/12 + 0px) 0/2.25rem 100%; +} + } +.storybook-show-container, +.storybook-show-container section{ + background-repeat:no-repeat; +} +@media (min-width: 1024px) { +.storybook-show-container, +.storybook-show-container section { + background: + linear-gradient(rgba(255,0,0,0.05),rgba(255,0,0,0.05)) calc(0*100%/12 + 0px) 0/2.5rem 100%, + linear-gradient(rgba(255,0,0,0.05),rgba(255,0,0,0.05)) calc(12*100%/12 + 0px) 0/2.5rem 100%; +} + } +.storybook-show-container, +.storybook-show-container section{ + background-repeat:no-repeat; +} +@media (min-width: 1280px) { +.storybook-show-container, +.storybook-show-container section { + background: + linear-gradient(rgba(255,0,0,0.05),rgba(255,0,0,0.05)) calc(0*100%/12 + 0px) 0/3rem 100%, + linear-gradient(rgba(255,0,0,0.05),rgba(255,0,0,0.05)) calc(12*100%/12 + 0px) 0/3rem 100%; +} + } +.storybook-show-container, +.storybook-show-container section{ + background-repeat:no-repeat; +} +@media (min-width: 1800px) { +.storybook-show-container, +.storybook-show-container section { + background: + linear-gradient(rgba(255,0,0,0.05),rgba(255,0,0,0.05)) calc(0*100%/12 + 0px) 0/4rem 100%, + linear-gradient(rgba(255,0,0,0.05),rgba(255,0,0,0.05)) calc(12*100%/12 + 0px) 0/4rem 100%; +} + } +.storybook-show-container, +.storybook-show-container section{ + background-repeat:no-repeat; +} +@media (min-width: 768px) { +.storybook-show-grid, +.storybook-show-grid .container--grid { + background: + linear-gradient(rgba(255,0,0,0.05),rgba(255,0,0,0.05)) calc(0*100%/12 + 0px) 0/2.25rem 100%, + linear-gradient(rgba(255,0,0,0.05),rgba(255,0,0,0.05)) calc(12*100%/12 + 0px) 0/2.25rem 100%; +} + } +.storybook-show-grid, +.storybook-show-grid .container--grid{ + background-repeat:no-repeat; +} +@media (min-width: 1024px) { +.storybook-show-grid, +.storybook-show-grid .container--grid { + background: + linear-gradient(rgba(255,0,0,0.05),rgba(255,0,0,0.05)) calc(0*100%/12 + 0px) 0/2.5rem 100%, + linear-gradient(rgba(255,0,0,0.05),rgba(255,0,0,0.05)) calc(1*100%/12 + 0px) 0/2.5rem 100%, + linear-gradient(rgba(255,0,0,0.05),rgba(255,0,0,0.05)) calc(2*100%/12 + 0px) 0/2.5rem 100%, + linear-gradient(rgba(255,0,0,0.05),rgba(255,0,0,0.05)) calc(3*100%/12 + 0px) 0/2.5rem 100%, + linear-gradient(rgba(255,0,0,0.05),rgba(255,0,0,0.05)) calc(4*100%/12 + 0px) 0/2.5rem 100%, + linear-gradient(rgba(255,0,0,0.05),rgba(255,0,0,0.05)) calc(5*100%/12 + 0px) 0/2.5rem 100%, + linear-gradient(rgba(255,0,0,0.05),rgba(255,0,0,0.05)) calc(6*100%/12 + 0px) 0/2.5rem 100%, + linear-gradient(rgba(255,0,0,0.05),rgba(255,0,0,0.05)) calc(7*100%/12 + 0px) 0/2.5rem 100%, + linear-gradient(rgba(255,0,0,0.05),rgba(255,0,0,0.05)) calc(8*100%/12 + 0px) 0/2.5rem 100%, + linear-gradient(rgba(255,0,0,0.05),rgba(255,0,0,0.05)) calc(9*100%/12 + 0px) 0/2.5rem 100%, + linear-gradient(rgba(255,0,0,0.05),rgba(255,0,0,0.05)) calc(10*100%/12 + 0px) 0/2.5rem 100%, + linear-gradient(rgba(255,0,0,0.05),rgba(255,0,0,0.05)) calc(11*100%/12 + 0px) 0/2.5rem 100%, + linear-gradient(rgba(255,0,0,0.05),rgba(255,0,0,0.05)) calc(12*100%/12 + 0px) 0/2.5rem 100%; +} + } +.storybook-show-grid, +.storybook-show-grid .container--grid{ + background-repeat:no-repeat; +} +@media (min-width: 1280px) { +.storybook-show-grid, +.storybook-show-grid .container--grid { + background: + linear-gradient(rgba(255,0,0,0.05),rgba(255,0,0,0.05)) calc(0*100%/12 + 0px) 0/3rem 100%, + linear-gradient(rgba(255,0,0,0.05),rgba(255,0,0,0.05)) calc(1*100%/12 + 0px) 0/3rem 100%, + linear-gradient(rgba(255,0,0,0.05),rgba(255,0,0,0.05)) calc(2*100%/12 + 0px) 0/3rem 100%, + linear-gradient(rgba(255,0,0,0.05),rgba(255,0,0,0.05)) calc(3*100%/12 + 0px) 0/3rem 100%, + linear-gradient(rgba(255,0,0,0.05),rgba(255,0,0,0.05)) calc(4*100%/12 + 0px) 0/3rem 100%, + linear-gradient(rgba(255,0,0,0.05),rgba(255,0,0,0.05)) calc(5*100%/12 + 0px) 0/3rem 100%, + linear-gradient(rgba(255,0,0,0.05),rgba(255,0,0,0.05)) calc(6*100%/12 + 0px) 0/3rem 100%, + linear-gradient(rgba(255,0,0,0.05),rgba(255,0,0,0.05)) calc(7*100%/12 + 0px) 0/3rem 100%, + linear-gradient(rgba(255,0,0,0.05),rgba(255,0,0,0.05)) calc(8*100%/12 + 0px) 0/3rem 100%, + linear-gradient(rgba(255,0,0,0.05),rgba(255,0,0,0.05)) calc(9*100%/12 + 0px) 0/3rem 100%, + linear-gradient(rgba(255,0,0,0.05),rgba(255,0,0,0.05)) calc(10*100%/12 + 0px) 0/3rem 100%, + linear-gradient(rgba(255,0,0,0.05),rgba(255,0,0,0.05)) calc(11*100%/12 + 0px) 0/3rem 100%, + linear-gradient(rgba(255,0,0,0.05),rgba(255,0,0,0.05)) calc(12*100%/12 + 0px) 0/3rem 100%; +} + } +.storybook-show-grid, +.storybook-show-grid .container--grid{ + background-repeat:no-repeat; +} +@media (min-width: 1800px) { +.storybook-show-grid, +.storybook-show-grid .container--grid { + background: + linear-gradient(rgba(255,0,0,0.05),rgba(255,0,0,0.05)) calc(0*100%/12 + 0px) 0/4rem 100%, + linear-gradient(rgba(255,0,0,0.05),rgba(255,0,0,0.05)) calc(1*100%/12 + 0px) 0/4rem 100%, + linear-gradient(rgba(255,0,0,0.05),rgba(255,0,0,0.05)) calc(2*100%/12 + 0px) 0/4rem 100%, + linear-gradient(rgba(255,0,0,0.05),rgba(255,0,0,0.05)) calc(3*100%/12 + 0px) 0/4rem 100%, + linear-gradient(rgba(255,0,0,0.05),rgba(255,0,0,0.05)) calc(4*100%/12 + 0px) 0/4rem 100%, + linear-gradient(rgba(255,0,0,0.05),rgba(255,0,0,0.05)) calc(5*100%/12 + 0px) 0/4rem 100%, + linear-gradient(rgba(255,0,0,0.05),rgba(255,0,0,0.05)) calc(6*100%/12 + 0px) 0/4rem 100%, + linear-gradient(rgba(255,0,0,0.05),rgba(255,0,0,0.05)) calc(7*100%/12 + 0px) 0/4rem 100%, + linear-gradient(rgba(255,0,0,0.05),rgba(255,0,0,0.05)) calc(8*100%/12 + 0px) 0/4rem 100%, + linear-gradient(rgba(255,0,0,0.05),rgba(255,0,0,0.05)) calc(9*100%/12 + 0px) 0/4rem 100%, + linear-gradient(rgba(255,0,0,0.05),rgba(255,0,0,0.05)) calc(10*100%/12 + 0px) 0/4rem 100%, + linear-gradient(rgba(255,0,0,0.05),rgba(255,0,0,0.05)) calc(11*100%/12 + 0px) 0/4rem 100%, + linear-gradient(rgba(255,0,0,0.05),rgba(255,0,0,0.05)) calc(12*100%/12 + 0px) 0/4rem 100%; +} + } +.storybook-show-grid, +.storybook-show-grid .container--grid{ + background-repeat:no-repeat; +} +.storybook-bg-negative{ + --tw-bg-opacity: 1 !important; + background-color: rgb(47 67 86 / var(--tw-bg-opacity)) !important; +} +@media (min-width: 768px){ + + .md\:col-span-2{ + grid-column: span 2 / span 2; + } + + .md\:grid-cols-3{ + grid-template-columns: repeat(3, minmax(0, 1fr)); + } + + .md\:gap-5{ + gap: 1.25rem; + } +} +@media (min-width: 1024px){ + + .lg\:col-span-3{ + grid-column: span 3 / span 3; + } + + .lg\:col-span-1{ + grid-column: span 1 / span 1; + } + + .lg\:row-span-2{ + grid-row: span 2 / span 2; + } + + .lg\:grid-cols-5{ + grid-template-columns: repeat(5, minmax(0, 1fr)); + } + + .lg\:grid-rows-2{ + grid-template-rows: repeat(2, minmax(0, 1fr)); + } +} diff --git a/docs/oblique-steal/script.js b/docs/oblique-steal/script.js new file mode 100644 index 0000000..336b644 --- /dev/null +++ b/docs/oblique-steal/script.js @@ -0,0 +1,5 @@ +// handle clicks on the burger menu to open/close the mobile menu +const menuButtonElement = document.querySelector('#main-header button.burger') +menuButtonElement.addEventListener('click', () => { + document.body.classList.toggle('body--mobile-menu-is-open') +})