@charset "UTF-8"; /*** The new CSS reset - version 1.11.3 (last updated 25.08.2024) GitHub page: https://github.com/elad2412/the-new-css-reset ***/ /* Remove all the styles of the "User-Agent-Stylesheet", except for the 'display' property - The "symbol *" part is to solve Firefox SVG sprite bug - The "html" element is excluded, otherwise a bug in Chrome breaks the CSS hyphens property (https://github.com/elad2412/the-new-css-reset/issues/36) */ *:where(:not(html, iframe, canvas, img, svg, video, audio):not(svg *, symbol *, path, clipPath)) { all: unset; display: revert; } /* Preferred box-sizing value */ *, *::before, *::after { box-sizing: border-box; } /* Fix mobile Safari increase font-size on landscape mode */ html { -moz-text-size-adjust: none; -webkit-text-size-adjust: none; text-size-adjust: none; } /* Reapply the pointer cursor for anchor tags */ a, button { cursor: revert; } /* Remove list styles (bullets/numbers) */ ol, ul, menu, summary { list-style: none; } /* Firefox: solve issue where nested ordered lists continue numbering from parent (https://bugzilla.mozilla.org/show_bug.cgi?id=1881517) */ ol { counter-reset: revert; } /* For images to not be able to exceed their container */ /* removes spacing between cells in tables */ table { border-collapse: collapse; } /* Safari - solving issue when using user-select:none on the text input doesn't working */ input, textarea { -webkit-user-select: auto; } input::-webkit-search-cancel-button { display: none; } /* revert the 'white-space' property for textarea elements on Safari */ textarea { white-space: revert; } /* minimum style to allow to style meter element */ meter { -webkit-appearance: revert; -moz-appearance: revert; appearance: revert; } /* preformatted text - use only for this feature */ :where(pre) { all: revert; box-sizing: border-box; } /* reset default text opacity of input placeholder */ ::-moz-placeholder { color: unset; } ::placeholder { color: unset; } /* fix the feature of 'hidden' attribute. display:revert; revert to element instead of attribute */ :where([hidden]) { display: none; } /* revert for bug in Chromium browsers - fix for the content editable attribute will work properly. - webkit-user-select: auto; added for Safari in case of using user-select:none on wrapper element*/ :where([contenteditable]:not([contenteditable=false])) { -moz-user-modify: read-write; -webkit-user-modify: read-write; overflow-wrap: break-word; -webkit-line-break: after-white-space; -webkit-user-select: auto; } /* apply back the draggable feature - exist only in Chromium and Safari */ :where([draggable=true]) { -webkit-user-drag: element; } /* Revert Modal native behavior */ :where(dialog:modal) { all: revert; box-sizing: border-box; } /* Remove details summary webkit styles */ ::-webkit-details-marker { display: none; } @font-face { font-family: "Brockmann"; src: url("../fonts/brockmann/brockmann-bold-webfont.woff2") format("woff2"), url("../fonts/brockmann/brockmann-bold-webfont.woff") format("woff"), url("../fonts/brockmann/brockmann-bold-webfont.ttf") format("truetype"); font-weight: 700; font-style: normal; font-display: swap; } @font-face { font-family: "Brockmann"; src: url("../fonts/brockmann/brockmann-semibold-webfont.woff2") format("woff2"), url("../fonts/brockmann/brockmann-semibold-webfont.woff") format("woff"), url("../fonts/brockmann/brockmann-semibold-webfont.ttf") format("truetype"); font-weight: 600; font-style: normal; font-display: swap; } @font-face { font-family: "Brockmann"; src: url("../fonts/brockmann/brockmann-medium-webfont.woff2") format("woff2"), url("../fonts/brockmann/brockmann-medium-webfont.woff") format("woff"), url("../fonts/brockmann/brockmann-medium-webfont.ttf") format("truetype"); font-weight: 500; font-style: normal; font-display: swap; } @font-face { font-family: "Brockmann"; src: url("../fonts/brockmann/brockmann-regular-webfont.woff2") format("woff2"), url("../fonts/brockmann/brockmann-regular-webfont.woff") format("woff"), url("../fonts/brockmann/brockmann-regular-webfont.ttf") format("truetype"); font-weight: 400; font-style: normal; font-display: swap; } @font-face { font-family: "Inter"; font-style: normal; src: url("../fonts/inter/Inter-VariableFont_opsz,wght.ttf") format("truetype"); font-display: swap; } @font-face { font-family: "Inter"; font-style: italic; src: url("../fonts/inter/Inter-Italic-VariableFont_opsz,wght.ttf") format("truetype"); font-display: swap; } @font-face { font-family: "remixicon"; src: url("../fonts/remixicon/remixicon.eot?t=1772209943885"); /* IE9*/ src: url("../fonts/remixicon/remixicon.eot?t=1772209943885#iefix") format("embedded-opentype"), url("../fonts/remixicon/remixicon.woff2?t=1772209943885") format("woff2"), url("../fonts/remixicon/remixicon.woff?t=1772209943885") format("woff"), url("../fonts/remixicon/remixicon.ttf?t=1772209943885") format("truetype"), url("../fonts/remixicon/remixicon.svg?t=1772209943885#remixicon") format("svg"); /* iOS 4.1- */ font-display: swap; } :root { --grid-columns: 12; --grid-gap: 2rem; --grid-gap-block: 1.6rem; --grid-edge: 2rem; --scroll-y: 0; --clip-factor: 1; --header-height: 8rem; --header-offset: 1.6rem; --breadcrumb-height: 3.2rem; --layout-max-width: 172rem; --container-columns: 12; --column-size: 12; --minus-gap: 1; --cta-height: 4.8rem; --radius--default: 3rem; --radius--md: 3.6rem; --radius--xs: 1.8rem; --ratio--square: 1/1; --ratio--2x1: 2/1; --ratio--3x2: 3/2; --ratio--5x3: 5/3; --ratio--7x3: 7/3; --ratio--16x9: 16/9; --ratio--21x9: 21/9; --shadow--lg: 0 0 1.6rem 0 hsl(from var(--black, black) h s l/10%); --shadow--default: 0 0.4rem 0.4rem 0 hsl(from var(--black, black) h s l/10%); --white: white; --black: black; --grey--lighter: oklch(from #F6F6F6 l c h); --grey--light: oklch(from #CCCCCC l c h); --grey: oklch(from #999 l c h); --grey--deep: oklch(from #444 l c h); --blue--lighter: oklch(from #B3C5F0 l c h); --blue--light: oklch(from #99B1EF l c h); --blue--alt: oklch(from #527BDD l c h); --blue: oklch(from #3B62C0 l c h); --blue--deep: oklch(from #00406F l c h); --blue--dark: oklch(from #002744 l c h); --red: oklch(from #E14B4B l c h); --orange: oklch(from #e89e4a l c h); --green: oklch(from #79AD6A l c h); --root-font-size: 16; --scale-font-size: 10; --font-size: 1.6rem; --line-height: 1.5; --title-font: Brockmann, sans-serif; --text-font: Inter, sans-serif; --text-color--bright: var(--white); --text-color--light: var(--grey--light); --text-color--medium: var(--grey); --text-color--deep: var(--blue--deep); --text-color--dark: var(--blue--dark); --text-color--accent: var(--blue); --text-color: var(--text-color--dark, black); --title-color--bright: var(--white); --title-color--light: var(--blue--light); --title-color--medium: var(--blue); --title-color--deep: var(--blue--deep); --title-color--dark: var(--blue--dark); --title-color: var(--title-color--medium); --stroke-color--bright: var(--white); --stroke-color--lighter: var(--grey--lighter); --stroke-color--light: var(--grey--light); --stroke-color--medium: var(--grey); --stroke-color--accent-light: var(--blue--light); --stroke-color--accent: var(--blue); --stroke-color--deep: var(--blue--deep); --stroke-color: var(--stroke-color--medium, black); --background-color--glass: oklch( from var(--grey--lighter) l c h / 40%); --background-color--gradient: linear-gradient(to right, var(--blue), var(--blue--dark) 180%); --background-color--bright: var(--white); --background-color--lighter: var(--grey--lighter); --background-color--medium: var(--blue); --background-color--dark: var(--blue--dark); --background-color: var(--background-color--bright, white); --icon-color: var(--text-color); --alert: var(--red-600, red); --warning: var(--orange-600, orange); --success: var(--green-600, green); --row-background: var(--background-color); --row-margin-block: 4.5em; --block-margin-block: 4.5em; --transition-property: all; --transition-easing: linear(0, 0.002, 0.01 3.6%, 0.034, 0.074 9.1%, 0.128 11.4%, 0.194 13.4%, 0.271 15%, 0.344 16.1%, 0.544, 0.66 20.6%, 0.717 22.4%, 0.765 24.6%, 0.808 27.3%, 0.845 30.4%, 0.883 35.1%, 0.916 40.6%, 0.942 47.2%, 0.963 55%, 0.979 64%, 0.991 74.4%, 0.998 86.4%, 1); --transition-duration: 0.64s; --transition: var(--transition-property) var(--transition-easing) var(--transition-duration) var(--transition-delay, 0s); } @media screen and ( min-width: 48em ) { :root { --grid-gap: 2.4rem; --grid-edge: 4rem; --header-offset: 2.4rem; } } @media screen and ( min-width: 64em ) { :root { --grid-gap: 3.2rem; --grid-edge: 6.4rem; --header-height: 8.8rem; --row-margin-block: 7em; --block-margin-block: 8em; } } @media screen and ( min-width: 80em ) { :root { --grid-gap: 4rem; --grid-edge: 8rem; } } :root { --z-index-breadcrumb: 50; --z-index-header-curtain: 100; --z-index-header: 150; --z-index-header-nav: 200; --z-index-header-actions: 250; --z-index-header-logo: 300; --z-index-header-search: 350; --z-index-dialog: 400; } html, body { font-family: var(--text-font); font-size: calc(var(--scale-font-size, var(--root-font-size, 16)) / var(--root-font-size, 16) * 100%); font-optical-sizing: auto; font-weight: 400; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; } .page__wrapper, .dialog { font-size: var(--font-size); line-height: var(--line-height); } :where(*:not(.icon)) { color: var(--text-color); } em { font-style: italic; } strong { font-weight: 700; } abbr { text-decoration: underline; text-underline-offset: 0.2em; text-decoration-thickness: 0.1rem; text-decoration-style: dotted; } html, body { background: var(--background-color); color: var(--text-color); } ::-moz-selection { color: var(--selection-color, currentColor); background: var(--selection-background, oklch(from var(--blue--dark) 0.95 0.015 h)); } ::selection { color: var(--selection-color, currentColor); background: var(--selection-background, oklch(from var(--blue--dark) 0.95 0.015 h)); } .flex { display: flex; flex-wrap: wrap; align-content: flex-start; } .flex--row, .flex--grid { gap: var(--grid-gap-block) var(--grid-gap); } .flex--row > :where(*:not([class*=col-])), .flex--grid > :where(*:not([class*=col-])) { flex: 0 0 100%; } .flex--grid { gap: var(--grid-gap); } .flex--grid > :where(* + *) { margin-block-start: 0; } .flex--container { container-name: flex-container; container-type: inline-size; } .flex > [class*=col-] { flex: var(--width, 0 0 calc(((var(--grid-width, 100%)) - var(--grid-gap) * (var(--container-columns) - 1)) / var(--container-columns) * var(--column-size) + var(--grid-gap) * (var(--column-size) - var(--minus-gap)) + var(--grid-offset, 0%))); min-width: var(--min-width, calc(((var(--grid-width, 100%)) - var(--grid-gap) * (var(--container-columns) - 1)) / var(--container-columns) * var(--column-size) + var(--grid-gap) * (var(--column-size) - var(--minus-gap)) + var(--grid-offset, 0%))); } .flex :where(.col-auto) { --width: 0 0 auto; --min-width: auto; } .flex :where(.col-flow) { --width: 1 1 0%; --min-width: auto; } .flex--v-start { align-items: flex-start; } .flex--v-center { align-items: center; align-content: center; } .flex--h-center { justify-content: center; } .flex--h-end { justify-content: flex-end; } .flex--nowrap { flex-wrap: nowrap; } .grid { display: grid; gap: 0 var(--grid-gap); grid-template-columns: repeat(var(--container-columns, var(--grid-columns)), 1fr); grid-auto-flow: column; } .grid > [class*=col-] { grid-column-end: span clamp(1, var(--column-size), var(--container-columns)); } .grid > :where(*:not([class*=col-])) { grid-column: 1/-1; } *:not(.flex, .grid) > [class*=col-] { width: calc(((var(--grid-width, 100%)) - var(--grid-gap) * (var(--container-columns) - 1)) / var(--container-columns) * var(--column-size) + var(--grid-gap) * (var(--column-size) - var(--minus-gap)) + var(--grid-offset, 0%)); } [class*=ml-] { margin-inline-start: calc(((var(--grid-width, 100%)) - var(--grid-gap) * (var(--container-columns) - 1)) / var(--container-columns) * var(--offset-left-size) + var(--grid-gap) * (var(--offset-left-size) - 0) + var(--grid-offset, 0%)); } .col-33 { --column-size: calc(var(--container-columns) / 3); } .col-100 { --column-size: var(--container-columns); } .start-1 { grid-column-start: 1; } .col-5 { --column-size: 5; } .col-5 > *, .col-5::before, .col-5::after { --container-columns: 5; } .col-5.grid { --grid-columns: 5; } .col-6 { --column-size: 6; } .col-6 > *, .col-6::before, .col-6::after { --container-columns: 6; } .col-6.grid { --grid-columns: 6; } .start-6 { grid-column-start: 6; } .col-7 { --column-size: 7; } .col-7 > *, .col-7::before, .col-7::after { --container-columns: 7; } .col-7.grid { --grid-columns: 7; } .col-8 { --column-size: 8; } .col-8 > *, .col-8::before, .col-8::after { --container-columns: 8; } .col-8.grid { --grid-columns: 8; } .col-10 { --column-size: 10; } .col-10 > *, .col-10::before, .col-10::after { --container-columns: 10; } .col-10.grid { --grid-columns: 10; } .col-12, .row > *:not(.block, [class*=col-]) { --column-size: 12; } .col-12 > *, .row > *:not(.block, [class*=col-]) > *, .col-12::before, .row > :not(.block, [class*=col-])::before, .col-12::after, .row > :not(.block, [class*=col-])::after { --container-columns: 12; } .col-12.grid, .row > .grid:not(.block, [class*=col-]) { --grid-columns: 12; } .ml-2 { --offset-left-size: 2; } .ml-2 * { --offset-left-size: 0; } .ml-3 { --offset-left-size: 3; } .ml-3 * { --offset-left-size: 0; } @container (inline-size > 20em ) { .col-grow--xxxs { --width: 1; --min-width: auto; } } @container (inline-size > 24.375em ) { .col-grow--xxs { --width: 1; --min-width: auto; } } @container (inline-size > 32.5em ) { .col-grow--xs { --width: 1; --min-width: auto; } .col-50--xs { --column-size: calc(var(--container-columns) * 0.5); } } @container (inline-size > 40em ) { .col-grow--xs-mid { --width: 1; --min-width: auto; } .col-50--xs-mid { --column-size: calc(var(--container-columns) * 0.5); } } @container (inline-size > 48em ) { .col-grow--sm { --width: 1; --min-width: auto; } .col-33--sm { --column-size: calc(var(--container-columns) / 3); } .col-50--sm { --column-size: calc(var(--container-columns) * 0.5); } .col-66--sm { --column-size: calc( (var(--container-columns) / 3) * 2 ); } } @container (inline-size > 64em ) { .col-flow--md { --width: 1 1 0%; --min-width: auto; } .col-grow--md { --width: 1; --min-width: auto; } .col-33--md { --column-size: calc(var(--container-columns) / 3); } .col-75--md { --column-size: calc(var(--container-columns) * 0.75); } } @container (inline-size > 80em ) { .col-grow--md-mid { --width: 1; --min-width: auto; } } @container (inline-size > 96em ) { .col-grow--lg { --width: 1; --min-width: auto; } } @media screen and ( min-width: 22.5em ) { :not(.flex--container) > .col-grow--xxxs { --width: 1 0 auto; --min-width: auto; } } @media screen and ( min-width: 24.375em ) { :not(.flex--container) > .col-grow--xxs { --width: 1 0 auto; --min-width: auto; } } @media screen and ( min-width: 26.75em ) { :not(.flex--container) > .col-50--xs { --column-size: calc(var(--container-columns) * 0.5); } :not(.flex--container) > .col-grow--xs { --width: 1 0 auto; --min-width: auto; } } @media screen and ( min-width: 40em ) { :not(.flex--container) > .col-50--xs-mid { --column-size: calc(var(--container-columns) * 0.5); } :not(.flex--container) > .col-grow--xs-mid { --width: 1 0 auto; --min-width: auto; } :not(.flex--container) > .start-2--xs-mid { grid-column-start: 2; } :not(.flex--container) > .col-5--xs-mid { --column-size: 5; } :not(.flex--container) > .col-5--xs-mid > *, :not(.flex--container) > .col-5--xs-mid::before, :not(.flex--container) > .col-5--xs-mid::after { --container-columns: 5; } :not(.flex--container) > .col-5--xs-mid.grid { --grid-columns: 5; } :not(.flex--container) > .col-6--xs-mid { --column-size: 6; } :not(.flex--container) > .col-6--xs-mid > *, :not(.flex--container) > .col-6--xs-mid::before, :not(.flex--container) > .col-6--xs-mid::after { --container-columns: 6; } :not(.flex--container) > .col-6--xs-mid.grid { --grid-columns: 6; } :not(.flex--container) > .start-6--xs-mid { grid-column-start: 6; } :not(.flex--container) > .col-7--xs-mid { --column-size: 7; } :not(.flex--container) > .col-7--xs-mid > *, :not(.flex--container) > .col-7--xs-mid::before, :not(.flex--container) > .col-7--xs-mid::after { --container-columns: 7; } :not(.flex--container) > .col-7--xs-mid.grid { --grid-columns: 7; } :not(.flex--container) > .start-7--xs-mid { grid-column-start: 7; } :not(.flex--container) > .col-8--xs-mid { --column-size: 8; } :not(.flex--container) > .col-8--xs-mid > *, :not(.flex--container) > .col-8--xs-mid::before, :not(.flex--container) > .col-8--xs-mid::after { --container-columns: 8; } :not(.flex--container) > .col-8--xs-mid.grid { --grid-columns: 8; } :not(.flex--container) > .col-10--xs-mid { --column-size: 10; } :not(.flex--container) > .col-10--xs-mid > *, :not(.flex--container) > .col-10--xs-mid::before, :not(.flex--container) > .col-10--xs-mid::after { --container-columns: 10; } :not(.flex--container) > .col-10--xs-mid.grid { --grid-columns: 10; } :not(.flex--container) > .ml-1--xs-mid { --offset-left-size: 1; } :not(.flex--container) > .ml-1--xs-mid * { --offset-left-size: 0; } } @media screen and ( min-width: 48em ) { :not(.flex--container) > .col-33--sm { --column-size: calc(var(--container-columns) / 3); } :not(.flex--container) > .col-50--sm { --column-size: calc(var(--container-columns) * 0.5); } :not(.flex--container) > .col-66--sm { --column-size: calc((var(--container-columns) / 3) * 2); } :not(.flex--container) > .col-grow--sm { --width: 1 0 auto; --min-width: auto; } :not(.flex--container) > .col-4--sm { --column-size: 4; } :not(.flex--container) > .col-4--sm > *, :not(.flex--container) > .col-4--sm::before, :not(.flex--container) > .col-4--sm::after { --container-columns: 4; } :not(.flex--container) > .col-4--sm.grid { --grid-columns: 4; } :not(.flex--container) > .start-4--sm { grid-column-start: 4; } :not(.flex--container) > .col-6--sm { --column-size: 6; } :not(.flex--container) > .col-6--sm > *, :not(.flex--container) > .col-6--sm::before, :not(.flex--container) > .col-6--sm::after { --container-columns: 6; } :not(.flex--container) > .col-6--sm.grid { --grid-columns: 6; } :not(.flex--container) > .col-8--sm { --column-size: 8; } :not(.flex--container) > .col-8--sm > *, :not(.flex--container) > .col-8--sm::before, :not(.flex--container) > .col-8--sm::after { --container-columns: 8; } :not(.flex--container) > .col-8--sm.grid { --grid-columns: 8; } :not(.flex--container) > .col-10--sm { --column-size: 10; } :not(.flex--container) > .col-10--sm > *, :not(.flex--container) > .col-10--sm::before, :not(.flex--container) > .col-10--sm::after { --container-columns: 10; } :not(.flex--container) > .col-10--sm.grid { --grid-columns: 10; } :not(.flex--container) > .ml-1--sm { --offset-left-size: 1; } :not(.flex--container) > .ml-1--sm * { --offset-left-size: 0; } } @media screen and ( min-width: 50.625em ) { :not(.flex--container) > .col-grow--sm-mid { --width: 1 0 auto; --min-width: auto; } } @media screen and ( min-width: 64em ) { :not(.flex--container) > .col-33--md { --column-size: calc(var(--container-columns) / 3); } :not(.flex--container) > .col-75--md { --column-size: calc(var(--container-columns) * 0.75); } :not(.flex--container) > .col-flow--md { --width: 1 1 0%; --min-width: auto; } :not(.flex--container) > .col-grow--md { --width: 1 0 auto; --min-width: auto; } :not(.flex--container) > .col-1--md { --column-size: 1; } :not(.flex--container) > .col-1--md > *, :not(.flex--container) > .col-1--md::before, :not(.flex--container) > .col-1--md::after { --container-columns: 1; } :not(.flex--container) > .col-1--md.grid { --grid-columns: 1; } :not(.flex--container) > .col-3--md { --column-size: 3; } :not(.flex--container) > .col-3--md > *, :not(.flex--container) > .col-3--md::before, :not(.flex--container) > .col-3--md::after { --container-columns: 3; } :not(.flex--container) > .col-3--md.grid { --grid-columns: 3; } :not(.flex--container) > .col-4--md { --column-size: 4; } :not(.flex--container) > .col-4--md > *, :not(.flex--container) > .col-4--md::before, :not(.flex--container) > .col-4--md::after { --container-columns: 4; } :not(.flex--container) > .col-4--md.grid { --grid-columns: 4; } :not(.flex--container) > .col-5--md { --column-size: 5; } :not(.flex--container) > .col-5--md > *, :not(.flex--container) > .col-5--md::before, :not(.flex--container) > .col-5--md::after { --container-columns: 5; } :not(.flex--container) > .col-5--md.grid { --grid-columns: 5; } :not(.flex--container) > .col-6--md { --column-size: 6; } :not(.flex--container) > .col-6--md > *, :not(.flex--container) > .col-6--md::before, :not(.flex--container) > .col-6--md::after { --container-columns: 6; } :not(.flex--container) > .col-6--md.grid { --grid-columns: 6; } :not(.flex--container) > .start-6--md { grid-column-start: 6; } :not(.flex--container) > .start-7--md { grid-column-start: 7; } :not(.flex--container) > .col-8--md, .row:not(.flex--container) > *:not(.block, [class*=col-]) { --column-size: 8; } :not(.flex--container) > .col-8--md > *, .row:not(.flex--container) > *:not(.block, [class*=col-]) > *, :not(.flex--container) > .col-8--md::before, .row:not(.flex--container) > :not(.block, [class*=col-])::before, :not(.flex--container) > .col-8--md::after, .row:not(.flex--container) > :not(.block, [class*=col-])::after { --container-columns: 8; } :not(.flex--container) > .col-8--md.grid, .row:not(.flex--container) > .grid:not(.block, [class*=col-]) { --grid-columns: 8; } :not(.flex--container) > .col-10--md { --column-size: 10; } :not(.flex--container) > .col-10--md > *, :not(.flex--container) > .col-10--md::before, :not(.flex--container) > .col-10--md::after { --container-columns: 10; } :not(.flex--container) > .col-10--md.grid { --grid-columns: 10; } :not(.flex--container) > .ml-1--md { --offset-left-size: 1; } :not(.flex--container) > .ml-1--md * { --offset-left-size: 0; } :not(.flex--container) > .ml-2--md, .row:not(.flex--container) > *:not(.block, [class*=col-]) { --offset-left-size: 2; } :not(.flex--container) > .ml-2--md *, .row:not(.flex--container) > *:not(.block, [class*=col-]) * { --offset-left-size: 0; } } @media screen and ( min-width: 80em ) { :not(.flex--container) > .col-grow--md-mid { --width: 1 0 auto; --min-width: auto; } :not(.flex--container) > .start-2--md-mid { grid-column-start: 2; } :not(.flex--container) > .col-4--md-mid { --column-size: 4; } :not(.flex--container) > .col-4--md-mid > *, :not(.flex--container) > .col-4--md-mid::before, :not(.flex--container) > .col-4--md-mid::after { --container-columns: 4; } :not(.flex--container) > .col-4--md-mid.grid { --grid-columns: 4; } :not(.flex--container) > .start-4--md-mid { grid-column-start: 4; } :not(.flex--container) > .col-5--md-mid { --column-size: 5; } :not(.flex--container) > .col-5--md-mid > *, :not(.flex--container) > .col-5--md-mid::before, :not(.flex--container) > .col-5--md-mid::after { --container-columns: 5; } :not(.flex--container) > .col-5--md-mid.grid { --grid-columns: 5; } :not(.flex--container) > .col-6--md-mid { --column-size: 6; } :not(.flex--container) > .col-6--md-mid > *, :not(.flex--container) > .col-6--md-mid::before, :not(.flex--container) > .col-6--md-mid::after { --container-columns: 6; } :not(.flex--container) > .col-6--md-mid.grid { --grid-columns: 6; } :not(.flex--container) > .col-8--md-mid { --column-size: 8; } :not(.flex--container) > .col-8--md-mid > *, :not(.flex--container) > .col-8--md-mid::before, :not(.flex--container) > .col-8--md-mid::after { --container-columns: 8; } :not(.flex--container) > .col-8--md-mid.grid { --grid-columns: 8; } :not(.flex--container) > .start-8--md-mid { grid-column-start: 8; } :not(.flex--container) > .ml-2--md-mid { --offset-left-size: 2; } :not(.flex--container) > .ml-2--md-mid * { --offset-left-size: 0; } } @media screen and ( min-width: 85.375em ) { :not(.flex--container) > .col-grow--lg { --width: 1 0 auto; --min-width: auto; } :not(.flex--container) > .col-6--lg, .row:not(.flex--container) > *:not(.block, [class*=col-]) { --column-size: 6; } :not(.flex--container) > .col-6--lg > *, .row:not(.flex--container) > *:not(.block, [class*=col-]) > *, :not(.flex--container) > .col-6--lg::before, .row:not(.flex--container) > :not(.block, [class*=col-])::before, :not(.flex--container) > .col-6--lg::after, .row:not(.flex--container) > :not(.block, [class*=col-])::after { --container-columns: 6; } :not(.flex--container) > .col-6--lg.grid, .row:not(.flex--container) > .grid:not(.block, [class*=col-]) { --grid-columns: 6; } :not(.flex--container) > .ml-3--lg, .row:not(.flex--container) > *:not(.block, [class*=col-]) { --offset-left-size: 3; } :not(.flex--container) > .ml-3--lg *, .row:not(.flex--container) > *:not(.block, [class*=col-]) * { --offset-left-size: 0; } } @media screen and ( min-width: 90em ) { :not(.flex--container) > .col-grow--lg-mid { --width: 1 0 auto; --min-width: auto; } } @media screen and ( min-width: 96em ) { :not(.flex--container) > .col-grow--xl { --width: 1 0 auto; --min-width: auto; } } @media screen and ( min-width: 120em ) { :not(.flex--container) > .col-grow--xxl { --width: 1 0 auto; --min-width: auto; } } @media screen and ( min-width: 107.5em ) { :not(.flex--container) > .col-grow--max { --width: 1 0 auto; --min-width: auto; } :not(.flex--container) > .col-5--max { --column-size: 5; } :not(.flex--container) > .col-5--max > *, :not(.flex--container) > .col-5--max::before, :not(.flex--container) > .col-5--max::after { --container-columns: 5; } :not(.flex--container) > .col-5--max.grid { --grid-columns: 5; } :not(.flex--container) > .col-7--max { --column-size: 7; } :not(.flex--container) > .col-7--max > *, :not(.flex--container) > .col-7--max::before, :not(.flex--container) > .col-7--max::after { --container-columns: 7; } :not(.flex--container) > .col-7--max.grid { --grid-columns: 7; } } .first { order: -1; } html, body { overflow-x: hidden; background: var(--background-color); } .page__wrapper { display: grid; grid-template-columns: 1fr; grid-template-rows: calc(var(--header-height) + var(--header-offset) * 2) auto 1fr auto; grid-template-areas: "header" "breadcrumb" "content" "footer"; max-width: 100vw; max-width: 100dvw; min-height: 100vh; min-height: 100dvh; position: relative; } .page__wrapper:has(.page__breadcrumb) { --content-padding-block: 0; } .page__header { -ms-grid-row: 1; -ms-grid-column: 1; grid-area: header; max-width: 100vw; max-width: 100dvw; } .page__breadcrumb { -ms-grid-row: 2; -ms-grid-column: 1; grid-area: breadcrumb; } .page__content { -ms-grid-row: 3; -ms-grid-column: 1; grid-area: content; padding-block-start: var(--content-padding-block); align-content: start; } .page__content { display: grid; grid-template-columns: var(--grid-edge) minmax(0, 1fr) var(--grid-edge); width: 100%; max-width: var(--layout-max-width); margin: 0 auto; position: relative; } .page__content > * { grid-column: 2/span 1; } .page__footer { -ms-grid-row: 4; -ms-grid-column: 1; grid-area: footer; width: calc(100% - var(--grid-edge) * 2); max-width: var(--layout-max-width); margin: 0 auto; } .page__grid { display: grid; grid-template-columns: var(--grid-edge) minmax(0, 1fr) var(--grid-edge); width: 100vw; width: 100dvw; height: 100dvh; height: 100vh; max-width: var(--layout-max-width); pointer-events: none; position: fixed; top: 0; left: 50%; translate: -50% 0; z-index: 10000; } .page__grid .grid { grid-column: 2/span 1; width: 100%; height: 100%; } .page__grid span { grid-column: var(--grid-start)/span 1; background: oklch(from cyan l c h/20%); } .page__grid:not(.show) { opacity: 0; } img { display: block; width: 100%; -webkit-user-select: none; -moz-user-select: none; user-select: none; -o-object-fit: cover; object-fit: cover; -o-object-position: center; object-position: center; } [data-flag=scroller] { display: block; height: 0.1rem; position: absolute; top: 100vh; top: 100dvh; translate: 0 0.1rem; } .accordion__overflow > :where(h1:not([class]), h2:not([class]), h3:not([class]), h4:not([class]), h5:not([class]), h6:not([class])), .block__rte > :where(h1:not([class]), h2:not([class]), h3:not([class]), h4:not([class]), h5:not([class]), h6:not([class])), .block--rte > :where(h1:not([class]), h2:not([class]), h3:not([class]), h4:not([class]), h5:not([class]), h6:not([class])), .row > :where(h1:not([class]), h2:not([class]), h3:not([class]), h4:not([class]), h5:not([class]), h6:not([class])), .row > .highlight > :where(h1:not([class]), h2:not([class]), h3:not([class]), h4:not([class]), h5:not([class]), h6:not([class])), :where(h1, h2, h3, h4, h5, h6), .title, .hero--default:not(:has(.hero__image))::before { --title-size: 1.6rem; --selection-color: var(--title-color--dark); font-family: var(--title-font); font-size: var(--title-size); font-weight: var(--title-weight, 600); line-height: 1; color: var(--title-color); text-wrap: pretty; } .title--thin { --title-weight: 400; } .title--thick { --title-weight: 700; } .title--light { --title-color: var(--title-color--light); } .title--deep { --title-color: var(--title-color--deep); } .title--dark { --title-color: var(--title-color--dark); } .title--gradient, .title--gradient span, .title--gradient::before, .title--gradient::after { display: inline-block; margin-block: -0.1em; padding-block: 0.1em; background: linear-gradient(to right, var(--blue), var(--blue--dark) 180%); -webkit-background-clip: text; background-clip: text; color: transparent; } .title--stroke, .accordion__overflow > :where(h1:not([class])), .block__rte > :where(h1:not([class])), .block--rte > :where(h1:not([class])), .row > :where(h1:not([class])), .row > .highlight > :where(h1:not([class])), .accordion__overflow > :where(h2:not([class])), .block__rte > :where(h2:not([class])), .block--rte > :where(h2:not([class])), .row > :where(h2:not([class])), .row > .highlight > :where(h2:not([class])), .accordion__overflow > :where(h3:not([class])), .block__rte > :where(h3:not([class])), .block--rte > :where(h3:not([class])), .row > :where(h3:not([class])), .row > .highlight > :where(h3:not([class])), .title--stroke span, .accordion__overflow > :where(h1:not([class])) span, .block__rte > :where(h1:not([class])) span, .block--rte > :where(h1:not([class])) span, .row > :where(h1:not([class])) span, .row > .highlight > :where(h1:not([class])) span, .accordion__overflow > :where(h2:not([class])) span, .block__rte > :where(h2:not([class])) span, .block--rte > :where(h2:not([class])) span, .row > :where(h2:not([class])) span, .row > .highlight > :where(h2:not([class])) span, .accordion__overflow > :where(h3:not([class])) span, .block__rte > :where(h3:not([class])) span, .block--rte > :where(h3:not([class])) span, .row > :where(h3:not([class])) span, .row > .highlight > :where(h3:not([class])) span { color: transparent; -webkit-text-stroke: 0.1rem var(--title-color); } .title--stroke::-moz-selection, .accordion__overflow > :where(h1:not([class]))::-moz-selection, .block__rte > :where(h1:not([class]))::-moz-selection, .block--rte > :where(h1:not([class]))::-moz-selection, .row > :where(h1:not([class]))::-moz-selection, .row > .highlight > :where(h1:not([class]))::-moz-selection, .accordion__overflow > :where(h2:not([class]))::-moz-selection, .block__rte > :where(h2:not([class]))::-moz-selection, .block--rte > :where(h2:not([class]))::-moz-selection, .row > :where(h2:not([class]))::-moz-selection, .row > .highlight > :where(h2:not([class]))::-moz-selection, .accordion__overflow > :where(h3:not([class]))::-moz-selection, .block__rte > :where(h3:not([class]))::-moz-selection, .block--rte > :where(h3:not([class]))::-moz-selection, .row > :where(h3:not([class]))::-moz-selection, .row > .highlight > :where(h3:not([class]))::-moz-selection { -webkit-text-stroke: none; } .title--stroke::selection, .accordion__overflow > :where(h1:not([class]))::selection, .block__rte > :where(h1:not([class]))::selection, .block--rte > :where(h1:not([class]))::selection, .row > :where(h1:not([class]))::selection, .row > .highlight > :where(h1:not([class]))::selection, .accordion__overflow > :where(h2:not([class]))::selection, .block__rte > :where(h2:not([class]))::selection, .block--rte > :where(h2:not([class]))::selection, .row > :where(h2:not([class]))::selection, .row > .highlight > :where(h2:not([class]))::selection, .accordion__overflow > :where(h3:not([class]))::selection, .block__rte > :where(h3:not([class]))::selection, .block--rte > :where(h3:not([class]))::selection, .row > :where(h3:not([class]))::selection, .row > .highlight > :where(h3:not([class]))::selection { -webkit-text-stroke: none; } .title--marquee { display: flex; flex-wrap: nowrap; font-size: 8.75vw; white-space: nowrap; } .title--marquee::before, .title--marquee::after { content: attr(data-text); } .title--giant { --title-size: 16rem; } .title--xxxl { --title-size: 14rem; } .title--xxl, .hero--default:not(:has(.hero__image))::before { --title-size: 5rem; } .title--xl, .accordion__overflow > :where(h1:not([class])), .block__rte > :where(h1:not([class])), .block--rte > :where(h1:not([class])), .row > :where(h1:not([class])), .row > .highlight > :where(h1:not([class])) { --title-size: 5rem; } .title--lg, .accordion__overflow > :where(h2:not([class])), .block__rte > :where(h2:not([class])), .block--rte > :where(h2:not([class])), .row > :where(h2:not([class])), .row > .highlight > :where(h2:not([class])) { --title-size: 6rem; } .title--md, .accordion__overflow > :where(h3:not([class])), .block__rte > :where(h3:not([class])), .block--rte > :where(h3:not([class])), .row > :where(h3:not([class])), .row > .highlight > :where(h3:not([class])) { --title-size: 4rem; } .title--sm, .accordion__overflow > :where(h4:not([class])), .block__rte > :where(h4:not([class])), .block--rte > :where(h4:not([class])), .row > :where(h4:not([class])), .row > .highlight > :where(h4:not([class])) { --title-size: 3.2rem; } .title--xs, .accordion__overflow > :where(h5:not([class])), .block__rte > :where(h5:not([class])), .block--rte > :where(h5:not([class])), .row > :where(h5:not([class])), .row > .highlight > :where(h5:not([class])) { --title-size: 2.4rem; } .title--xxs, .accordion__overflow > :where(h6:not([class])), .block__rte > :where(h6:not([class])), .block--rte > :where(h6:not([class])), .row > :where(h6:not([class])), .row > .highlight > :where(h6:not([class])) { --title-size: 2.1rem; } @media screen and ( min-width: 48em ) { .title--xxl, .hero--default:not(:has(.hero__image))::before { --title-size: 6.4rem; } .title--xl, .accordion__overflow > :where(h1:not([class])), .block__rte > :where(h1:not([class])), .block--rte > :where(h1:not([class])), .row > :where(h1:not([class])), .row > .highlight > :where(h1:not([class])) { --title-size: 6.4rem; } } @media screen and ( min-width: 80em ) { .title--xxl, .hero--default:not(:has(.hero__image))::before { --title-size: 8rem; } .title--xl, .accordion__overflow > :where(h1:not([class])), .block__rte > :where(h1:not([class])), .block--rte > :where(h1:not([class])), .row > :where(h1:not([class])), .row > .highlight > :where(h1:not([class])) { --title-size: 8rem; } } @media screen and ( min-width: 85.375em ) { .title--giant { --title-size: 16rem; } .title--xxxl { --title-size: 14rem; } .title--xxl, .hero--default:not(:has(.hero__image))::before { --title-size: 10rem; } .title--lg, .accordion__overflow > :where(h2:not([class])), .block__rte > :where(h2:not([class])), .block--rte > :where(h2:not([class])), .row > :where(h2:not([class])), .row > .highlight > :where(h2:not([class])) { --title-size: 6rem; } .title--md, .accordion__overflow > :where(h3:not([class])), .block__rte > :where(h3:not([class])), .block--rte > :where(h3:not([class])), .row > :where(h3:not([class])), .row > .highlight > :where(h3:not([class])) { --title-size: 4rem; } .title--sm, .accordion__overflow > :where(h4:not([class])), .block__rte > :where(h4:not([class])), .block--rte > :where(h4:not([class])), .row > :where(h4:not([class])), .row > .highlight > :where(h4:not([class])) { --title-size: 3.2rem; } .title--xs, .accordion__overflow > :where(h5:not([class])), .block__rte > :where(h5:not([class])), .block--rte > :where(h5:not([class])), .row > :where(h5:not([class])), .row > .highlight > :where(h5:not([class])) { --title-size: 2.4rem; } .title--xxs, .accordion__overflow > :where(h6:not([class])), .block__rte > :where(h6:not([class])), .block--rte > :where(h6:not([class])), .row > :where(h6:not([class])), .row > .highlight > :where(h6:not([class])) { --title-size: 2.1rem; } } .accordion__overflow :where(a:not([class], :has(i)))[href*=http]::after, .block__rte :where(a:not([class], :has(i)))[href*=http]::after, .block--rte :where(a:not([class], :has(i)))[href*=http]::after, .row :where(a:not([class], :has(i)))[href*=http]::after, .accordion__overflow :where(a:not([class], :has(i)))[target]::after, .block__rte :where(a:not([class], :has(i)))[target]::after, .block--rte :where(a:not([class], :has(i)))[target]::after, .row :where(a:not([class], :has(i)))[target]::after, [class^=ri-], [class*=ri-] { font-family: "remixicon" !important; font-style: normal; font-size: 1em; color: var(--icon-color); -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; transition: var(--transition-property, all) var(--transition-easing, ease) var(--transition-duration, 0.32s) var(--transition-delay, 0s); } [class^=ri-]::before, [class*=ri-]::before { display: inline-block; } .ri--xxl::before { scale: 1.75; } .ri--xl::before { scale: 1.5; } .ri--lg::before { scale: 1.375; } .ri--md::before { scale: 1.25; } .ri--default::before { scale: 1; } .ri--xs::before { scale: 0.825; } .ri--xxs::before { scale: 0.75; } .ri--xxxs::before { scale: 0.625; } .ri-arrow-up-line:before { content: "\ea76"; } .ri-arrow-right-line:before { content: "\ea6c"; } .ri-arrow-down-line:before { content: "\ea4c"; } .ri-arrow-left-line:before { content: "\ea60"; } .ri-arrow-up-s-line:before { content: "\ea78"; } .ri-arrow-right-s-line:before { content: "\ea6e"; } .ri-arrow-down-s-line:before { content: "\ea4e"; } .ri-arrow-left-s-line:before { content: "\ea64"; } .ri-mail-line:before { content: "\eef6"; } .ri-search-2-line:before { content: "\f0cd"; } .ri-home-8-line:before { content: "\ee25"; } .ri-file-download-line:before { content: "\ecd9"; } .ri-download-2-line:before { content: "\ec54"; } .ri-map-pin-line:before { content: "\ef14"; } .ri-check-line:before { content: "\eb7b"; } .ri-error-warning-line:before { content: "\eca1"; } .ri-error-warning-fill:before { content: "\eca0"; } .ri-alert-line:before { content: "\ea21"; } .ri-alert-fill:before { content: "\ea20"; } .ri-information-2-line:before { content: "\f448"; } .ri-information-2-fill:before { content: "\f447"; } .ri-question-line:before { content: "\f045"; } .ri-question-fill:before { content: "\f044"; } .ri-checkbox-circle-line:before { content: "\eb81"; } .ri-download-line:before { content: "\ec5a"; } .ri-external-link-line:before { content: "\ecaf"; } .ri-fullscreen-line:before { content: "\ed9c"; } .ri-fullscreen-exit-line:before { content: "\ed9a"; } .ri-file-upload-line:before { content: "\ed15"; } .ri-upload-2-line:before { content: "\f24a"; } .ri-upload-line:before { content: "\f250"; } .ri-phone-line:before { content: "\efec"; } .ri-add-circle-line:before { content: "\ea11"; } .ri-indeterminate-circle-line:before { content: "\ee57"; } .ri-zoom-in-line:before { content: "\f2db"; } .ri-hand:before { content: "\f444"; } .ri-menu-line:before { content: "\ef3e"; } .ri-customer-service-line:before { content: "\ec0e"; } .ri-wrench-line:before { content: "\f63e"; } .ri-draft-line:before { content: "\ec5c"; } .ri-certificate-2-line:before { content: "\f678"; } .ri-drop-line:before { content: "\ec6a"; } .ri-menu { position: relative; } .ri-menu, .ri-menu::before, .ri-menu::after { content: ""; display: block; height: 0.1rem; width: 1em; background: var(--icon-color); } .ri-menu::before, .ri-menu::after { position: absolute; top: 0; left: 0; transition: var(--transition-property, all) var(--transition-easing, ease) var(--transition-duration, 0.32s) var(--transition-delay, 0s); } .ri-menu::before { translate: 0 -500%; } .ri-menu::after { translate: 0 500%; } .ri-close { position: relative; } .ri-close, .ri-close::before, .ri-close::after { content: ""; display: block; height: 0.1rem; width: 1em; } .ri-close::before, .ri-close::after { background: var(--icon-color); position: absolute; top: 0; left: 0; transition: var(--transition-property, all) var(--transition-easing, ease) var(--transition-duration, 0.32s) var(--transition-delay, 0s); } .ri-close::before { rotate: 45deg; } .ri-close::after { rotate: 135deg; } .ri-svg { display: flex; align-items: center; width: 1em; height: 1em; } .ri-svg svg { width: 100%; height: 100%; } .button { --button-primary: var(--blue--dark); --button-secondary: var(--white); --button-ternary: var(--blue); --button-color: var(--button-secondary); --button-border: transparent; --button-background: var(--button-primary); --button-size: 4rem; display: inline-flex; gap: 0.75em; align-items: center; min-height: var(--button-size); padding-inline: 2.8571428571em; padding-block: 0.45em 0.55em; border-radius: 10rem; outline: 0.1rem solid var(--button-border); outline-offset: -0.1rem; background: var(--button-background); -webkit-user-select: none; -moz-user-select: none; user-select: none; cursor: pointer; color: var(--button-color); font-size: 1.4rem; line-height: 1.2; font-weight: 600; transition: var(--transition-property, all) var(--transition-easing, ease) var(--transition-duration, 0.32s) var(--transition-delay, 0s); } .button > * { pointer-events: none; } .button [class*=ri-] { --icon-color: var(--button-color); font-size: 1.25em; font-weight: normal; } .button svg[class*=ri-] { width: 1.25em; } :where(.fill--blue) .button--primary { --button-primary: var(--blue--light); } .button--gradient { --button-background: linear-gradient(to right, var(--button-ternary), var(--button-primary) 180%); } :where(.fill--blue) .button--gradient { --button-background: linear-gradient(to right, oklch(from var(--button-ternary) calc(1.1 - l) c h), oklch( from var(--button-primary) calc(1.1 - l) c h ) 150%); } @media (hover: hover) { .button--gradient:hover, .button--gradient:focus { filter: brightness(150%); } :where(.fill--blue) .button--gradient:hover, :where(.fill--blue) .button--gradient:focus { filter: hue-rotate(-5deg) saturate(125%); } } .button--accepted { --button-primary: var(--green); } @media (hover: hover) { .button--accepted:hover, .button--accepted:focus { --button-background: oklch(from var(--button-primary) calc(l - .1) c h) !important; } } .button--refused { --button-primary: var(--red); } @media (hover: hover) { .button--refused:hover, .button--refused:focus { --button-background: oklch(from var(--button-primary) calc(l - .1) c h) !important; } } .button--active { --button-color: var(--button-secondary); --button-background: var(--button-primary); --button-border: var(--button-primary); } .button--flip [class*=ri-] { order: -1; } .button--thick { --button-size: 5.2rem; padding-inline: 1.5em; font-size: 1.6rem; font-weight: 500; } .button--narrow { --button-size: 3.2rem; padding-inline: 2.2857142857em; } .button--icon { align-items: center; justify-content: center; padding: 0; width: var(--button-size); height: var(--button-size); } .button--outline:not(.button--active) { --button-color: var(--button-primary); --button-border: var(--button-primary); --button-background: transparent; } :where(.fill--blue) .button--outline:not(.button--active) { --button-color: var(--button-secondary); --button-border: var(--button-secondary); } @media (hover: hover) { .button--outline:not(.button--active):hover, .button--outline:not(.button--active):focus { --button-border: var(--button-background); --button-color: var(--white); } } .button__wrapper { display: flex; flex-wrap: wrap; gap: 0.75em; } .button-texted { display: inline-flex; min-height: 4rem; align-items: center; gap: 0.5em; font-size: 1.6rem; line-height: 1.2; font-weight: 500; text-decoration: underline; text-underline-offset: 0.3em; text-decoration-thickness: 0.1rem; text-decoration-color: currentColor; } .button-texted [class*=ri-] { align-self: center; order: -1; width: 1.5em; } .button-texted [class*=ri-] svg { width: 100%; } @media (hover: hover) { .button:hover:not(.button--gradient), .button:focus:not(.button--gradient) { --button-background: var(--button-ternary); } :where(.fill--blue) .button:hover:not(.button--gradient), :where(.fill--blue) .button:focus:not(.button--gradient) { --button-background: var(--blue--dark); } } .dropdown { position: relative; z-index: 100; } .dropdown__button { padding-inline: 1em; gap: 0.35em; position: relative; } .dropdown__content { --text-color: var(--text-color--accent); --dropdown-offset: 0.8rem; width: 100%; outline: 0.1rem solid var(--stroke-color--accent); background: var(--background-color--glass); backdrop-filter: blur(0.6rem); border-radius: 1.6rem; font-size: 1.4rem; position: absolute; top: calc(100% + 0.8rem); left: calc(var(--select-offset) * -1); overflow-y: scroll; -webkit-overflow-scrolling: touch; -ms-overflow-style: none; scrollbar-width: none; } .dropdown__content a { display: flex; align-items: center; min-height: 2em; padding-inline: 1em; line-height: 1.2; font-weight: 600; } .dropdown__overflow { display: flex; flex-direction: column; padding-block: 0.5em; } .dropdown__overflow :where(a:not([class])) { text-decoration: underline; text-underline-offset: 0.35em; text-decoration-thickness: 0.1rem; text-decoration-color: transparent; transition: var(--transition-property, all) var(--transition-easing, ease) var(--transition-duration, 0.32s) var(--transition-delay, 0s); } @media (hover: hover) { .dropdown__overflow :where(a:not([class])):hover, .dropdown__overflow :where(a:not([class])):focus { text-decoration-color: var(--text-color); } } .notification { --notification-primary: var(--grey--light); --notification-secondary: var(--white); --notification-background: var(--notification-primary); --notification-color: var(--notification-secondary); --selection-background: oklch( from var(--notification-background) calc(l + .1) c h / 100%); --text-color: var(--notification-color); --icon-color: var(--notification-color); display: flex; justify-content: center; align-items: center; gap: 2em; padding-inline: 1.5em; padding-block: 1.5em; border-radius: var(--radius--xs); background: var(--notification-background); } @media screen and ( min-width: 40em ) { .notification { padding-inline: 3em; } } @media screen and ( min-width: 64em ) { .notification { padding-inline: 5em; } } .notification__icon { order: -1; font-size: 4rem; line-height: 1; } .notification__content { display: flex; flex-direction: column; align-items: flex-start; gap: 0.5em; } @media screen and ( max-width: 39.9375em ) { .notification__content { flex: 1; } } .notification__content * + .button { margin-block-start: 0.25em; } .notification__content .button { --button-secondary: var(--notification-primary); --button-primary: var(--notification-secondary); } @media (hover: hover) { .notification__content .button:hover, .notification__content .button:focus { --button-background: oklch(from var(--notification-primary) calc(l - .2) c h ); --button-color: var(--white); } } .notification--error, .notification--red { --notification-primary: var(--red); } .notification--warning, .notification--orange { --notification-primary: var(--orange); } .notification--success, .notification--green { --notification-primary: var(--green); } .notification--information { --notification-background: linear-gradient(to right, var(--blue), var(--blue--dark) 200%); --notification-color: var(--white); --selection-background: oklch( from var(--blue) .9 0.1 h / 20%); } .notification--information .button { --button-secondary: var(--blue--dark); } @media (hover: hover) { .notification--information .button:hover, .notification--information .button:focus { --button-background: var(--blue--dark); --button-color: var(--white); } } .notification--default { --notification-color: var(--grey--deep); --selection-background: oklch( from var(--notification-background) .9 c h / 100%); } .notification--default .button { --button-secondary: var(--notification-color); } .notification--light { --notification-background: oklch( from var(--notification-primary) calc(l + .21) calc(c - 0.075) h); --notification-color: oklch( from var(--notification-primary) calc(l - .175) c h); --selection-background: oklch( from var(--notification-background) calc(l - 0.1) c h / 100%); } .notification--light.notification--information { --notification-background: linear-gradient(to right, oklch(from var(--blue--dark) calc(1.1 - l) c h), oklch( from var(--blue) calc(1.1 - l) c h ) 150%); --notification-color: var(--notification-secondary); --selection-background: oklch( from var(--blue--dark) .9 0.1 h / 40%); } .notification--light.notification--information .button { --button-primary: var(--blue); } .notification--light.notification--default { --notification-background: oklch( from var(--notification-primary) calc(l + .1) calc(c - 0.05) h); } .notification--light.notification--default .button { --button-background: var(--notification-color); } @media (hover: hover) { .notification--light.notification--default .button:hover, .notification--light.notification--default .button:focus { --button-background: oklch(from var(--notification-color) calc(l - .2) c h ); } } .notification--light .button { --button-primary: var(--notification-primary); --button-secondary: var(--white); } .notification__wrapper { display: flex; flex-direction: column; gap: 1em; } .form { container-type: inline-size; } .form--filters { padding-inline: 1.5em; outline: 0.1rem solid var(--stroke-color--light); background: var(--background-color--glass); backdrop-filter: blur(0.6rem); border-radius: var(--radius--md); box-shadow: var(--shadow--default); } .form--filters .js-accordion__overflow { padding-block: 2em; } .form--filters .button + .field__list { margin-block-start: 1em; } @container (inline-size > 40em ) { .form--filters { padding-inline: 3em; } } .form.flex--row { row-gap: 0; } .form__section { row-gap: 1em; } .form__section + .form__section { margin-block-start: 3em; } @container (inline-size > 32.5em ) { .form__section + .form__section { margin-block-start: 4em; } } .form__header--inline { display: grid; grid-template-columns: 1fr auto auto 1fr; grid-template-rows: auto auto; grid-template-areas: "left icon title right" "button button button button"; align-items: center; -moz-column-gap: var(--grid-gap); column-gap: var(--grid-gap); } @container (inline-size < 40em ) { .form__header--inline { row-gap: 1em; } } @container (inline-size > 40em ) { .form__header--inline { grid-template-columns: auto 1fr auto; grid-template-rows: auto; grid-template-areas: "icon title button"; } } .form__header--inline .form__title { -ms-grid-row: 1; -ms-grid-column: 2; -ms-grid-row: 1; -ms-grid-column: 5; --title-size: 1.6rem; grid-area: title; line-height: 1.2; } @container (inline-size > 40em ) { .form__header--inline .form__title { --title-size: 2rem; } } .form__header--inline .button { -ms-grid-row: 1; -ms-grid-column: 3; -ms-grid-row: 2; -ms-grid-column: 1; -ms-grid-column-span: 7; grid-area: button; } @container (inline-size < 40em ) { .form__header--inline .button { justify-self: center; } } .form__header--inline [class*=ri-] { -ms-grid-row: 1; -ms-grid-column: 1; -ms-grid-row: 1; -ms-grid-column: 3; grid-area: icon; background: linear-gradient(to right, var(--blue), var(--blue--dark) 180%); -webkit-background-clip: text; background-clip: text; font-size: 4rem; color: transparent; } .form__notifications { order: -1; margin-block-end: 3em; } .field { container-type: inline-size; position: relative; z-index: 2; } .field--default, .field--select { display: grid; grid-template-columns: 1fr; grid-template-rows: auto auto auto; grid-template-areas: "field" "notification" "description"; padding-block-start: 1em; } .field--default.field--inline, .field--select.field--inline { grid-template-columns: auto 1fr; grid-template-rows: auto auto auto; grid-template-areas: "label field" "space notification" "space description"; -moz-column-gap: 1em; column-gap: 1em; } .field--default.field--inline .field__label, .field--select.field--inline .field__label { -ms-grid-row: 1; -ms-grid-column: 1; --text-color: var(--text-color--accent) !important; grid-area: label; width: 30cqw; font-weight: 700; translate: 0 0 !important; scale: 1 !important; } .field--default.field--inline::after, .field--select.field--inline::after { height: 100%; } .field--default::after, .field--select::after { -ms-grid-row: 1; -ms-grid-column: 1; grid-area: field; content: ""; display: block; width: calc(100% + 1em); height: calc(100% + 1.25em); background: var(--stroke-color--light); clip-path: rect(calc(100% - 0.1rem) calc(100% - 0.5em) 100% 0.5em); position: absolute; bottom: 0; left: 50%; translate: -50% 0; z-index: -1; transition: var(--transition-property, all) var(--transition-easing, ease) var(--transition-duration, 0.32s) var(--transition-delay, 0s); } .field--default.field--inline > .field--default::after, .field--select.field--inline > .field--default::after, .field--default.field--inline > .field--select::after, .field--select.field--inline > .field--select::after { -ms-grid-row: 1; -ms-grid-column: 3; } .field--switch > .field--default::after, .field--switch > .field--select::after { -ms-grid-row: 2; -ms-grid-column: 1; } .field--switch.field--inline > .field--default::after, .field--switch.field--inline > .field--select::after { -ms-grid-row: 1; -ms-grid-column: 3; } .field--switch.field--inline > .field--default::after, .field--switch.field--inline > .field--select::after { -ms-grid-row: 1; -ms-grid-column: 2; } .field--range > .field--default::after, .field--range > .field--select::after { -ms-grid-row: 2; -ms-grid-column: 1; } .field--range:has(.field__value) > .field--default::after, .field--range:has(.field__value) > .field--select::after { -ms-grid-row: 2; -ms-grid-column: 1; } .field--range.field--inline > .field--default::after, .field--range.field--inline > .field--select::after { -ms-grid-row: 2; -ms-grid-column: 1; } .field--range.field--inline > .field--default::after, .field--range.field--inline > .field--select::after { -ms-grid-row: 1; -ms-grid-column: 2; } .field--range.field--inline:has(.field__value) > .field--default::after, .field--range.field--inline:has(.field__value) > .field--select::after { -ms-grid-row: 2; -ms-grid-column: 1; } .field--range.field--inline:has(.field__value) > .field--default::after, .field--range.field--inline:has(.field__value) > .field--select::after { -ms-grid-row: 1; -ms-grid-column: 2; } .field--checkbox, .field--radio { display: grid; grid-template-columns: 1fr; grid-template-rows: auto auto auto auto; grid-template-areas: "label" "description" "fields" "notification"; } .field--checkbox .checkbox__list, .field--checkbox .radio__list, .field--radio .checkbox__list, .field--radio .radio__list { -ms-grid-row: 3; -ms-grid-column: 1; grid-area: fields; } .field--checkbox .field__label, .field--radio .field__label { -ms-grid-row: 1; -ms-grid-column: 1; grid-area: label; } .field--switch { display: grid; grid-template-columns: auto 1fr; grid-template-rows: auto auto auto auto; grid-template-areas: "label label" "field space" "notification notification" "description description"; } .field--switch .field__input, .field--switch .select__button { cursor: pointer; } .field--switch .field__input:checked ~ .switch--default::after, .field--switch .select__button:checked ~ .switch--default::after { translate: calc(100cqw - 100% - 0.3rem) -50%; filter: none; } .field--switch .field__input:checked ~ .switch--value::after, .field--switch .select__button:checked ~ .switch--value::after { translate: 100% -50%; } .field--switch .field__input:checked ~ .switch--value .switch__to, .field--switch .select__button:checked ~ .switch--value .switch__to { --text-color: var(--text-color--bright); } .field--switch .field__input:not(:checked) ~ .switch--value .switch__from, .field--switch .select__button:not(:checked) ~ .switch--value .switch__from { --text-color: var(--text-color--bright); } .field--switch .field__label { -ms-grid-row: 1; -ms-grid-column: 1; -ms-grid-column-span: 2; grid-area: label; } .field--switch.field--inline { grid-template-columns: 1fr auto; grid-template-rows: auto auto auto; grid-template-areas: "label field" "notification notification" "description description"; -moz-column-gap: 1em; column-gap: 1em; } @container (inline-size < 40em ) { .field--switch.field--inline { align-items: center; } } @container (inline-size > 40em ) { .field--switch.field--inline { grid-template-columns: auto auto 1fr; grid-template-rows: auto auto auto; grid-template-areas: "label field space" "notification notification notification" "description description description"; } } .field--switch.field--inline .field__switch, .field--switch.field--inline .field__input, .field--switch.field--inline .select__button { -ms-grid-row: 1; -ms-grid-column: 2; grid-area: field; } .field--switch.field--inline .field__label { -ms-grid-row: 1; -ms-grid-column: 1; -ms-grid-column-span: 1; --text-color: var(--text-color--accent) !important; grid-area: label; font-weight: 700; translate: 0 0 !important; scale: 1 !important; } @container (inline-size > 40em ) { .field--switch.field--inline .field__label { width: 35cqw; } } .field--range { display: grid; grid-template-columns: 1fr; grid-template-rows: auto auto auto auto; grid-template-areas: "label" "field" "notification" "description"; align-items: center; -moz-column-gap: 2em; column-gap: 2em; } .field--range:has(.field__value) { grid-template-columns: auto 1fr; grid-template-rows: auto auto auto auto; grid-template-areas: "label label" "field value" "notification notification" "description description"; } .field--range .field__input, .field--range .select__button, .field--range .field__track { width: 70cqw; } .field--range .field__label { -ms-grid-row: 1; -ms-grid-column: 1; -ms-grid-column-span: 1; --text-color: var(--text-color--accent) !important; grid-area: label; width: 35cqw; font-weight: 700; translate: 0 0 !important; scale: 1 !important; } .field--range.field--inline { grid-template-columns: 1fr; grid-template-rows: auto auto auto auto; grid-template-areas: "label" "field" "notification" "description"; -moz-column-gap: 1em; column-gap: 1em; } @container (inline-size > 40em ) { .field--range.field--inline { grid-template-columns: auto 1fr; grid-template-rows: auto auto auto; grid-template-areas: "label field" "notification notification" "description description"; } .field--range.field--inline .field__input, .field--range.field--inline .select__button, .field--range.field--inline .field__track { width: 35cqw; } } .field--range.field--inline .field__label { -ms-grid-row: 1; -ms-grid-column: 1; -ms-grid-column-span: 1; grid-area: label; } .field--range.field--inline .field__value { justify-self: start; } .field--range.field--inline:has(.field__value) { grid-template-columns: 1fr; grid-template-rows: auto auto auto auto auto; grid-template-areas: "label" "field" "value" "notification" "description"; } @container (inline-size < 40em ) { .field--range.field--inline:has(.field__value) .field__label, .field--range.field--inline:has(.field__value) .field__input, .field--range.field--inline:has(.field__value) .select__button, .field--range.field--inline:has(.field__value) .field__track { width: 100cqw; } .field--range.field--inline:has(.field__value) .field__value { width: 100cqw; } .field--range.field--inline:has(.field__value) .field__value:has(.switch--value) { justify-content: space-between; } .field--range.field--inline:has(.field__value) .field__value .switch--value { flex: 0; } } @container (inline-size > 40em ) { .field--range.field--inline:has(.field__value) { grid-template-columns: auto auto 1fr; grid-template-rows: auto auto auto; grid-template-areas: "label field value" "notification notification notification" "description description description"; } } .field--select:not(:has(.active)) .field__label { --text-color: var(--text-color--dark); translate: 0 0; scale: 1; } .field--checkbox .field__label, .field--radio .field__label, .field--switch .field__label { --text-color: var(--text-color--dark); translate: 0 0; scale: 1; } .field--range .field__input, .field--range .select__button { display: block; height: 100%; opacity: 0; cursor: pointer; } .field--range .field__label { --text-color: var(--text-color--dark); translate: 0 0; scale: 1; } .field:has([required]) .field__label span::after { content: " *"; color: var(--red); } .field:has(.field__input:-moz-placeholder, .select__button:-moz-placeholder) .field__label { translate: 0 0; scale: 1; } .field:has(.field__input:placeholder-shown, .select__button:placeholder-shown) .field__label { translate: 0 0; scale: 1; } .field--default:has(.field__input:focus, .select__button:focus) { --selection-background: var(--blue); --selection-color: var(--text-color--bright); } .field--default:has(.field__input:focus, .select__button:focus)::after { background: var(--stroke-color--lighter); clip-path: rect(0% 100% 100% 0% round 0.4rem); } .field--default:has(.field__input:focus, .select__button:focus) .field__label { --text-color: var(--text-color--medium); translate: 0 -85%; scale: 0.75; } .field.invalid::after { background: var(--red); } .field.invalid .field__input, .field.invalid .select__button { color: var(--red); } .field__list { container-type: inline-size; } .field__list.flex--grid { row-gap: 1.5em; } .field__input, .select__button { -ms-grid-row: 1; -ms-grid-column: 1; grid-area: field; min-height: 3.2rem; line-height: 1.5; transition: var(--transition-property, all) var(--transition-easing, ease) var(--transition-duration, 0.32s) var(--transition-delay, 0s); } .field--default.field--inline > .field__input, .field--select.field--inline > .field__input, .field--default.field--inline > .select__button, .field--select.field--inline > .select__button { -ms-grid-row: 1; -ms-grid-column: 3; } .field--switch > .field__input, .field--switch > .select__button { -ms-grid-row: 2; -ms-grid-column: 1; } .field--switch.field--inline > .field__input, .field--switch.field--inline > .select__button { -ms-grid-row: 1; -ms-grid-column: 3; } .field--switch.field--inline > .field__input, .field--switch.field--inline > .select__button { -ms-grid-row: 1; -ms-grid-column: 2; } .field--range > .field__input, .field--range > .select__button { -ms-grid-row: 2; -ms-grid-column: 1; } .field--range:has(.field__value) > .field__input, .field--range:has(.field__value) > .select__button { -ms-grid-row: 2; -ms-grid-column: 1; } .field--range.field--inline > .field__input, .field--range.field--inline > .select__button { -ms-grid-row: 2; -ms-grid-column: 1; } .field--range.field--inline > .field__input, .field--range.field--inline > .select__button { -ms-grid-row: 1; -ms-grid-column: 2; } .field--range.field--inline:has(.field__value) > .field__input, .field--range.field--inline:has(.field__value) > .select__button { -ms-grid-row: 2; -ms-grid-column: 1; } .field--range.field--inline:has(.field__value) > .field__input, .field--range.field--inline:has(.field__value) > .select__button { -ms-grid-row: 1; -ms-grid-column: 2; } .field__input--textarea { padding-block-end: 0.375em; min-height: 5lh; } .field__label { -ms-grid-row: 1; -ms-grid-column: 1; --text-color: var(--text-color--light); grid-area: field; align-self: start; display: flex; align-items: center; min-height: 3.2rem; cursor: pointer; font-weight: 500; position: relative; z-index: 2; transform-origin: left bottom; translate: 0 -85%; scale: 0.75; transition: var(--transition-property, all) var(--transition-easing, ease) var(--transition-duration, 0.32s) var(--transition-delay, 0s); } .field--default.field--inline > .field__label, .field--select.field--inline > .field__label { -ms-grid-row: 1; -ms-grid-column: 3; } .field--switch > .field__label { -ms-grid-row: 2; -ms-grid-column: 1; } .field--switch.field--inline > .field__label { -ms-grid-row: 1; -ms-grid-column: 3; } .field--switch.field--inline > .field__label { -ms-grid-row: 1; -ms-grid-column: 2; } .field--range > .field__label { -ms-grid-row: 2; -ms-grid-column: 1; } .field--range:has(.field__value) > .field__label { -ms-grid-row: 2; -ms-grid-column: 1; } .field--range.field--inline > .field__label { -ms-grid-row: 2; -ms-grid-column: 1; } .field--range.field--inline > .field__label { -ms-grid-row: 1; -ms-grid-column: 2; } .field--range.field--inline:has(.field__value) > .field__label { -ms-grid-row: 2; -ms-grid-column: 1; } .field--range.field--inline:has(.field__value) > .field__label { -ms-grid-row: 1; -ms-grid-column: 2; } .field__switch { -ms-grid-row: 1; -ms-grid-column: 1; grid-area: field; } .field--default.field--inline > .field__switch, .field--select.field--inline > .field__switch { -ms-grid-row: 1; -ms-grid-column: 3; } .field--switch > .field__switch { -ms-grid-row: 2; -ms-grid-column: 1; } .field--switch.field--inline > .field__switch { -ms-grid-row: 1; -ms-grid-column: 3; } .field--switch.field--inline > .field__switch { -ms-grid-row: 1; -ms-grid-column: 2; } .field--range > .field__switch { -ms-grid-row: 2; -ms-grid-column: 1; } .field--range:has(.field__value) > .field__switch { -ms-grid-row: 2; -ms-grid-column: 1; } .field--range.field--inline > .field__switch { -ms-grid-row: 2; -ms-grid-column: 1; } .field--range.field--inline > .field__switch { -ms-grid-row: 1; -ms-grid-column: 2; } .field--range.field--inline:has(.field__value) > .field__switch { -ms-grid-row: 2; -ms-grid-column: 1; } .field--range.field--inline:has(.field__value) > .field__switch { -ms-grid-row: 1; -ms-grid-column: 2; } .field__track { -ms-grid-row: 1; -ms-grid-column: 1; container-type: inline-size; grid-area: field; align-self: center; display: block; width: 100%; height: 0.1rem; background: var(--stroke-color--accent-light); pointer-events: none; position: relative; } .field--default.field--inline > .field__track, .field--select.field--inline > .field__track { -ms-grid-row: 1; -ms-grid-column: 3; } .field--switch > .field__track { -ms-grid-row: 2; -ms-grid-column: 1; } .field--switch.field--inline > .field__track { -ms-grid-row: 1; -ms-grid-column: 3; } .field--switch.field--inline > .field__track { -ms-grid-row: 1; -ms-grid-column: 2; } .field--range > .field__track { -ms-grid-row: 2; -ms-grid-column: 1; } .field--range:has(.field__value) > .field__track { -ms-grid-row: 2; -ms-grid-column: 1; } .field--range.field--inline > .field__track { -ms-grid-row: 2; -ms-grid-column: 1; } .field--range.field--inline > .field__track { -ms-grid-row: 1; -ms-grid-column: 2; } .field--range.field--inline:has(.field__value) > .field__track { -ms-grid-row: 2; -ms-grid-column: 1; } .field--range.field--inline:has(.field__value) > .field__track { -ms-grid-row: 1; -ms-grid-column: 2; } .field__track::before { content: ""; display: block; width: 100cqw; height: 0.5rem; background: linear-gradient(to right, var(--blue--lighter) 0%, var(--blue--alt) calc(var(--range-x, 0) * 100%)); clip-path: rect(0 max(var(--range-x, 0) * 100%, 2rem) 100% 0 round 100rem); position: absolute; top: 50%; left: 0; translate: 0 -50%; transform-origin: left center; } .field__track::after { content: ""; display: block; width: 2rem; height: 2rem; background: var(--background-color--gradient); border-radius: 100rem; position: absolute; top: 50%; left: 0; translate: calc(var(--range-x, 0) * 100cqw - 100% * var(--range-x, 0)) -50%; } .field__value { -ms-grid-row: 2; -ms-grid-column: 2; --text-color: var(--text-color--accent); grid-area: value; display: flex; align-items: center; } .field--range.field--inline:has(.field__value) > .field__value { -ms-grid-row: 3; -ms-grid-column: 1; } .field--range.field--inline:has(.field__value) > .field__value { -ms-grid-row: 1; -ms-grid-column: 3; } .field__value[data-unit]::after { content: attr(data-unit); } .field__value:not([data-unit]) { gap: 1em; } .field__value .switch--value { flex: 1; pointer-events: auto; cursor: pointer; } .field__value .switch--value * { pointer-events: none; } .field__value .switch--value.active::after { translate: 100% -50%; } .field__value .switch--value.active .switch__to { --text-color: var(--text-color--bright); } .field__value .switch--value:not(.active) .switch__from { --text-color: var(--text-color--bright); } .field__description { -ms-grid-row: 3; -ms-grid-column: 1; --text-color: var(--text-color--medium); grid-area: description; margin-block-start: 0.1em; font-size: 1.4rem; font-weight: 500; } .field--default.field--inline > .field__description, .field--select.field--inline > .field__description { -ms-grid-row: 3; -ms-grid-column: 3; } .field--checkbox > .field__description, .field--radio > .field__description { -ms-grid-row: 2; -ms-grid-column: 1; } .field--switch > .field__description { -ms-grid-row: 4; -ms-grid-column: 1; -ms-grid-column-span: 2; } .field--switch.field--inline > .field__description { -ms-grid-row: 3; -ms-grid-column: 1; -ms-grid-column-span: 3; } .field--switch.field--inline > .field__description { -ms-grid-row: 3; -ms-grid-column: 1; -ms-grid-column-span: 3; } .field--range > .field__description { -ms-grid-row: 4; -ms-grid-column: 1; -ms-grid-column-span: 1; } .field--range:has(.field__value) > .field__description { -ms-grid-row: 4; -ms-grid-column: 1; -ms-grid-column-span: 2; } .field--range.field--inline > .field__description { -ms-grid-row: 4; -ms-grid-column: 1; -ms-grid-column-span: 1; } .field--range.field--inline > .field__description { -ms-grid-row: 3; -ms-grid-column: 1; -ms-grid-column-span: 2; } .field--range.field--inline:has(.field__value) > .field__description { -ms-grid-row: 5; -ms-grid-column: 1; -ms-grid-column-span: 1; } .field--range.field--inline:has(.field__value) > .field__description { -ms-grid-row: 3; -ms-grid-column: 1; -ms-grid-column-span: 3; } .field__notification { -ms-grid-row: 2; -ms-grid-column: 1; --text-color: var(--text-color--medium); grid-area: notification; margin-block-start: 0.1em; font-size: 1.2rem; font-weight: 500; transition: var(--transition-property, all) var(--transition-easing, ease) var(--transition-duration, 0.32s) var(--transition-delay, 0s); } .field--default.field--inline > .field__notification, .field--select.field--inline > .field__notification { -ms-grid-row: 2; -ms-grid-column: 3; } .field--checkbox > .field__notification, .field--radio > .field__notification { -ms-grid-row: 4; -ms-grid-column: 1; } .field--switch > .field__notification { -ms-grid-row: 3; -ms-grid-column: 1; -ms-grid-column-span: 2; } .field--switch.field--inline > .field__notification { -ms-grid-row: 2; -ms-grid-column: 1; -ms-grid-column-span: 3; } .field--switch.field--inline > .field__notification { -ms-grid-row: 2; -ms-grid-column: 1; -ms-grid-column-span: 3; } .field--range > .field__notification { -ms-grid-row: 3; -ms-grid-column: 1; -ms-grid-column-span: 1; } .field--range:has(.field__value) > .field__notification { -ms-grid-row: 3; -ms-grid-column: 1; -ms-grid-column-span: 2; } .field--range.field--inline > .field__notification { -ms-grid-row: 3; -ms-grid-column: 1; -ms-grid-column-span: 1; } .field--range.field--inline > .field__notification { -ms-grid-row: 2; -ms-grid-column: 1; -ms-grid-column-span: 2; } .field--range.field--inline:has(.field__value) > .field__notification { -ms-grid-row: 4; -ms-grid-column: 1; -ms-grid-column-span: 1; } .field--range.field--inline:has(.field__value) > .field__notification { -ms-grid-row: 2; -ms-grid-column: 1; -ms-grid-column-span: 3; } .field__notification--error { --text-color: var(--red); } .select { display: none; } @media (pointer: coarse) { .select { -ms-grid-row: 1; -ms-grid-column: 1; display: block; grid-area: field; position: relative; z-index: 10; opacity: 0; } .field--default.field--inline > .select, .field--select.field--inline > .select { -ms-grid-row: 1; -ms-grid-column: 3; } } .field--switch > .select { -ms-grid-row: 2; -ms-grid-column: 1; } .field--switch.field--inline > .select { -ms-grid-row: 1; -ms-grid-column: 3; } .field--switch.field--inline > .select { -ms-grid-row: 1; -ms-grid-column: 2; } .field--range > .select { -ms-grid-row: 2; -ms-grid-column: 1; } .field--range:has(.field__value) > .select { -ms-grid-row: 2; -ms-grid-column: 1; } .field--range.field--inline > .select { -ms-grid-row: 2; -ms-grid-column: 1; } .field--range.field--inline > .select { -ms-grid-row: 1; -ms-grid-column: 2; } .field--range.field--inline:has(.field__value) > .select { -ms-grid-row: 2; -ms-grid-column: 1; } .field--range.field--inline:has(.field__value) > .select { -ms-grid-row: 1; -ms-grid-column: 2; } .select__button { display: flex; align-items: center; justify-content: space-between; cursor: pointer; position: relative; z-index: 4; } .select__wrapper { -ms-grid-row: 1; -ms-grid-column: 1; --select-offset: 0.8rem; --select-option-height: 4rem; grid-area: input; width: calc(100% + var(--select-offset) * 2); max-height: calc(var(--select-offset) + var(--select-option-height) * 3.5); padding-block-start: calc(var(--field-base-height) + var(--select-offset)); outline: 0.1rem solid var(--stroke-color--accent); background: var(--background-color--glass); backdrop-filter: blur(0.6rem); border-radius: var(--radius--xs); position: absolute; top: 6.4rem; left: calc(var(--select-offset) * -1); overflow-y: scroll; -webkit-overflow-scrolling: touch; -ms-overflow-style: none; scrollbar-width: none; } .select__list { padding-block: 0.5em; } .select__item { padding-inline: calc(var(--field-padding, 1em) + var(--select-offset)); padding-block: 0.5em; min-height: var(--select-option-height); cursor: pointer; color: var(--text-color--accent-light); position: relative; z-index: 2; transition: var(--transition-property, all) var(--transition-easing, ease) var(--transition-duration, 0.32s) var(--transition-delay, 0s); } .select__item.active { color: var(--text-color--accent); } @media (hover: hover) { .select__item:hover::before, .select__item:focus::before { opacity: 1; } } .checkbox, .radio { --field-stroke: var(--stroke-color--medium); display: grid; grid-template-columns: auto 1fr; grid-template-rows: auto; grid-template-areas: "input label"; align-items: baseline; gap: 1em; cursor: pointer; } .checkbox:has(*:checked), .radio:has(*:checked) { --field-stroke: var(--stroke-color--accent); } .checkbox:has([required]) .checkbox__label::after, .checkbox:has([required]) .radio__label::after, .radio:has([required]) .checkbox__label::after, .radio:has([required]) .radio__label::after { content: " *"; color: var(--red); } @media screen and ( max-width: 39.9375em ) { .checkbox__list.flex--row, .radio__list.flex--row { flex-direction: column; --grid-gap-block: 0; } } @media screen and ( min-width: 40em ) { .checkbox__list.flex--row, .radio__list.flex--row { --grid-gap: 3.5em; --grid-gap-block: 0.5em; } } .checkbox__input, .radio__input { grid-column: 1/-1; grid-row: 1/-1; display: block; width: 100%; height: 100%; } .checkbox__input:checked ~ :is(.checkbox__mark, .radio__mark)::before, .radio__input:checked ~ :is(.checkbox__mark, .radio__mark)::before { opacity: 1; } .checkbox__input:is(:focus, :hover) ~ :is(.checkbox__mark, .radio__mark), .radio__input:is(:focus, :hover) ~ :is(.checkbox__mark, .radio__mark) { --field-stroke: var(--blue); background: oklch(from var(--blue--light) l c h/20%); } .checkbox__label, .radio__label { -ms-grid-row: 1; -ms-grid-column: 1; grid-area: label; padding-block: 0.25em; position: relative; z-index: 2; } .field--checkbox > .checkbox__label, .field--radio > .checkbox__label, .field--checkbox > .radio__label, .field--radio > .radio__label { -ms-grid-row: 1; -ms-grid-column: 1; } .field--switch > .checkbox__label, .field--switch > .radio__label { -ms-grid-row: 1; -ms-grid-column: 1; -ms-grid-column-span: 2; } .field--switch.field--inline > .checkbox__label, .field--switch.field--inline > .radio__label { -ms-grid-row: 1; -ms-grid-column: 1; -ms-grid-column-span: 1; } .field--switch.field--inline > .checkbox__label, .field--switch.field--inline > .radio__label { -ms-grid-row: 1; -ms-grid-column: 1; -ms-grid-column-span: 1; } .field--range > .checkbox__label, .field--range > .radio__label { -ms-grid-row: 1; -ms-grid-column: 1; -ms-grid-column-span: 1; } .field--range:has(.field__value) > .checkbox__label, .field--range:has(.field__value) > .radio__label { -ms-grid-row: 1; -ms-grid-column: 1; -ms-grid-column-span: 2; } .field--range.field--inline > .checkbox__label, .field--range.field--inline > .radio__label { -ms-grid-row: 1; -ms-grid-column: 1; -ms-grid-column-span: 1; } .field--range.field--inline > .checkbox__label, .field--range.field--inline > .radio__label { -ms-grid-row: 1; -ms-grid-column: 1; -ms-grid-column-span: 1; } .field--range.field--inline:has(.field__value) > .checkbox__label, .field--range.field--inline:has(.field__value) > .radio__label { -ms-grid-row: 1; -ms-grid-column: 1; -ms-grid-column-span: 1; } .field--range.field--inline:has(.field__value) > .checkbox__label, .field--range.field--inline:has(.field__value) > .radio__label { -ms-grid-row: 1; -ms-grid-column: 1; -ms-grid-column-span: 1; } .checkbox > .checkbox__label, .radio > .checkbox__label, .checkbox > .radio__label, .radio > .radio__label { -ms-grid-row: 1; -ms-grid-column: 3; -ms-grid-column-span: 1; } .checkbox__label::after, .radio__label::after { color: var(--alert); } .checkbox__mark, .radio__mark { -ms-grid-row: 1; -ms-grid-column: 1; grid-area: input; display: block; width: 1.6rem; height: 1.6rem; border-radius: 0.3rem; outline: 0.1rem solid var(--field-stroke); outline-offset: -0.1rem; pointer-events: none; position: relative; translate: 0 0.15lh; transition: var(--transition-property, all) var(--transition-easing, ease) var(--transition-duration, 0.32s) var(--transition-delay, 0s); } .checkbox__mark::before, .radio__mark::before { content: ""; display: block; width: 100%; height: 100%; background: var(--background-color--gradient); border-radius: inherit; opacity: 0; position: absolute; top: 0; left: 0; transition: var(--transition-property, all) var(--transition-easing, ease) var(--transition-duration, 0.32s) var(--transition-delay, 0s); } .checkbox__input:checked ~ :is(.checkbox__mark, .radio__mark)::after { rotate: 45deg; scale: 1; } .checkbox__mark::after { content: ""; display: block; width: 30%; height: 55%; border: 0.1rem solid var(--stroke-color--bright); border-block-start: 0; border-inline-start: 0; position: absolute; top: 50%; left: 50%; translate: -50% -65%; rotate: 0; scale: 0; z-index: 2; transition: var(--transition-property, all) var(--transition-easing, ease) var(--transition-duration, 0.32s) var(--transition-delay, 0s); } .radio__input:checked ~ :is(.checkbox__mark, .radio__mark)::after { scale: 0.35; } .radio__mark { border-radius: 100rem; } .radio__mark::after { content: ""; display: block; width: 100%; height: 100%; border-radius: 100rem; background: var(--background-color--bright); position: absolute; top: 0; left: 0; transform-origin: center; scale: 0; transition: var(--transition-property, all) var(--transition-easing, ease) var(--transition-duration, 0.32s) var(--transition-delay, 0s); } .switch { height: 3.2rem; pointer-events: none; position: relative; z-index: 2; } .switch::before { content: ""; display: block; width: 100%; height: 2.8rem; background: linear-gradient(108deg, oklch(from var(--blue) 0.985 0.015 h), oklch(from var(--blue) 0.93 0.015 h)); border-radius: 100rem; position: absolute; top: 50%; left: 0; z-index: -1; translate: 0 -50%; } .switch--default { container-type: inline-size; display: block; min-width: 6rem; } .switch--default::after { content: ""; display: block; aspect-ratio: 1/1; height: 2.2rem; background: var(--background-color--gradient); border-radius: 100rem; filter: grayscale(100%) invert(50%) brightness(140%); position: absolute; top: 50%; left: 0; translate: 0.3rem -50%; transition: var(--transition-property, all) var(--transition-easing, ease) var(--transition-duration, 0.32s) var(--transition-delay, 0s); } .switch--value { --text-color: var(--text-color--accent); --switch-padding: 1.5em; display: inline-grid; align-items: center; grid-template-columns: 1fr 1fr; grid-template-rows: auto; grid-template-areas: "from to"; font-size: 1.2rem; font-weight: 500; } .switch--value::after { -ms-grid-row: 1; -ms-grid-column: 1; grid-area: from; content: ""; display: block; width: 100%; height: 2.8rem; background: var(--background-color--gradient); border-radius: 100rem; position: absolute; top: 50%; left: 0; translate: 0 -50%; z-index: -1; transition: var(--transition-property, all) var(--transition-easing, ease) var(--transition-duration, 0.32s) var(--transition-delay, 0s); } .switch--value .switch__from, .switch--value .switch__to { padding-inline: 1em; white-space: nowrap; text-align: center; transition: var(--transition-property, all) var(--transition-easing, ease) var(--transition-duration, 0.32s) var(--transition-delay, 0s); } .switch--value .switch__from { -ms-grid-row: 1; -ms-grid-column: 1; grid-area: from; } .switch--value .switch__to { -ms-grid-row: 1; -ms-grid-column: 2; grid-area: to; } .highlight { padding: 2.5em; } @media screen and ( min-width: 64em ) { .highlight { padding: 3.75em; } } .highlight--narrow { padding: 1.5em; } @media screen and ( min-width: 64em ) { .highlight--narrow { padding: 2em; } } .fill, .highlight { position: relative; z-index: 2; } .fill::before, .highlight::before { content: ""; display: none; width: 100%; height: 100%; background: var(--fill-color, transparent); border-radius: var(--radius--md); pointer-events: none; position: absolute; top: 0; left: 50%; translate: -50% 0; z-index: -1; } .fill[class*=fill--]::before, .fill[class*=highlight--]::before, .highlight[class*=fill--]::before, .highlight[class*=highlight--]::before { display: block; } .fill--grey, .highlight--grey { --fill-color: var(--background-color--lighter); --selection-background: oklch( from var(--blue--light) l c h / 50%); } .fill--white, .highlight--white { --fill-color: var(--background-color); } .fill--white::before, .highlight--white::before { box-shadow: var(--shadow--lg); } .fill--blue, .highlight--blue { --fill-color: var(--background-color--gradient); --text-color: var(--text-color--bright); --title-color: var(--title-color--bright); --selection-background: oklch( from var(--blue--light) l c h / 50%); } .fill--blue:not(.highlight), .highlight--blue:not(.highlight) { padding: 2.5em; } @media screen and ( min-width: 64em ) { .fill--blue:not(.highlight), .highlight--blue:not(.highlight) { padding: 3.75em; } } .fill--blue-light, .highlight--blue-light { --fill-color: oklch(from var(--blue--lighter) l c h / 40%); --selection-background: var(--blue--lighter); } .fill--blured, .highlight--blured { --fill-color: var(--background-color--glass); padding: 2em var(--grid-gap); } .fill--blured::before, .highlight--blured::before { outline: 0.1rem solid var(--stroke-color--deep); backdrop-filter: blur(0.6rem); box-shadow: var(--shadow--default); } .fill--stretch, .highlight--stretch { padding: 2em 0; } .fill--stretch::before, .highlight--stretch::before { width: calc(100% + var(--grid-gap) * 2); } .ratio--square { aspect-ratio: var(--ratio--square); } .ratio--2x1 { aspect-ratio: var(--ratio--2x1); } .ratio--3x2 { aspect-ratio: var(--ratio--3x2); } .ratio--5x3 { aspect-ratio: var(--ratio--5x3); } .ratio--7x3 { aspect-ratio: var(--ratio--7x3); } .ratio--16x9 { aspect-ratio: var(--ratio--16x9); } .ratio--21x9 { aspect-ratio: var(--ratio--21x9); } .header { display: flex; align-items: flex-end; width: calc(100vw - var(--grid-edge) * 2); width: calc(100dvw - var(--grid-edge) * 2); padding-block: var(--header-offset); position: fixed; left: 50%; translate: -50% 0; z-index: var(--z-index-header); } .header::before { content: ""; display: block; width: 100vw; width: 100dvw; height: 100%; border-block-end: 0.1rem solid var(--stroke-color--lighter); background: var(--background-color--glass); backdrop-filter: blur(0.5em); pointer-events: none; position: absolute; top: 0; left: 50%; z-index: -1; } .header__logo { margin-inline-end: 8rem; transform-origin: left bottom; } @media screen and ( min-width: 80.0625em ) { .header__logo { margin-inline-end: 12rem; } } @media screen and ( min-width: 85.375em ) { .header__logo { margin-inline-end: 14rem; } } .header__logo img { height: var(--header-height); } .header__nav { flex: 1; position: relative; z-index: 2; } @media screen and ( max-width: 63.9375em ) { .header__nav { --text-color: var(--text-color--bright); display: grid; grid-template-columns: var(--grid-edge) 1fr var(--grid-edge); grid-template-rows: 1fr; grid-template-areas: "edge-start center edge-end"; width: 100vw; height: 100vh; position: absolute; top: 0; left: 50%; translate: -50% 0; } .header__nav::before { content: ""; display: block; width: 100%; height: 100%; background: var(--background-color--gradient); position: absolute; top: 0; left: 0; z-index: -1; } } .header__menu-wrapper { display: flex; } @media screen and ( max-width: 63.9375em ) { .header__menu-wrapper { grid-area: center; flex-direction: column; gap: 4rem; padding-block: calc(var(--header-height) + var(--header-offset) * 2) calc(var(--grid-edge) * 3); -webkit-mask-image: linear-gradient(transparent, transparent var(--header-offset), black calc(var(--header-height) + var(--header-offset) * 2), black calc(100% - var(--grid-edge) * 3), transparent); mask-image: linear-gradient(transparent, transparent var(--header-offset), black calc(var(--header-height) + var(--header-offset) * 2), black calc(100% - var(--grid-edge) * 3), transparent); overflow-y: scroll; -webkit-overflow-scrolling: touch; -ms-overflow-style: none; scrollbar-width: none; } .header__menu-wrapper::before { content: ""; display: block; flex: 0 0 8rem; width: 8rem; height: 8rem; order: 10; margin-block-start: auto; background: url("../img/logo/neptune-logo_white.svg"); background-size: contain; background-repeat: no-repeat; background-position: center; } } @media screen and ( max-width: 63.9375em ){ .header__menu-wrapper { -ms-grid-row: 1; -ms-grid-column: 2; } } @media screen and ( min-width: 64em ) { .header__menu-wrapper { align-items: flex-end; justify-content: space-between; } } .header__menu { display: flex; gap: var(--grid-gap); font-family: var(--title-font); font-weight: 500; font-size: 1.8rem; line-height: 1; } @media screen and ( max-width: 63.9375em ) { .header__menu { flex-direction: column; font-size: 5rem; } } @media screen and ( min-width: 85.375em ) { .header__menu { font-size: 2rem; } } .header__menu a { display: block; position: relative; transition: var(--transition-property, all) var(--transition-easing, ease) var(--transition-duration, 0.32s) var(--transition-delay, 0s); } @media screen and ( max-width: 63.9375em ) { .header__menu a { padding-block: 0.25em; } } .header__menu a::before { content: ""; display: block; position: absolute; inset: -1.6rem 0; } @media screen and ( max-width: 63.9375em ) { .header__menu a.active { --text-color: var(--blue--light); } } @media screen and ( min-width: 64em ) { .header__menu a.active { --text-color: var(--text-color--accent); } .header__menu a.active span::after { scale: 1 1; } } @media screen and ( min-width: 64em ) and (hover: hover) { .header__menu a:hover:not(.active) span::after, .header__menu a:focus:not(.active) span::after { scale: 0.25 1; } } .header__menu span { display: inline-block; position: relative; transition: var(--transition-property, all) var(--transition-easing, ease) var(--transition-duration, 0.32s) var(--transition-delay, 0s); } .header__menu span::after { content: ""; display: block; width: calc(100% - 0.75em); height: 0.1rem; background: var(--text-color); position: absolute; bottom: 0; left: 50%; translate: -50% 0.5em; scale: 0 1; transition: var(--transition-property, all) var(--transition-easing, ease) var(--transition-duration, 0.32s) var(--transition-delay, 0s); } .header__actions { display: flex; gap: 0.75em; position: relative; } .header__actions .dropdown__button [class*=ri-] { font-size: 1.25em; } .header__actions .dropdown__button svg[class*=ri-] { width: 1.25em; } @media screen and ( max-width: 63.9375em ) { .header__actions .dropdown__content { --text-color: var(--text-color--bright); --background-color--glass: oklch( from var(--black) l c h / 20%); } } .header__actions .button { --button-size: 5.2rem; padding-inline: 1.5em; font-size: 1.6rem; font-weight: 500; } .header__actions .button [class*=ri-] { font-size: 0.9em; } @media screen and ( max-width: 24.375em ) { .header__actions .button { --button-size: 4rem; font-size: 1.4rem; } } @media screen and ( min-width: 64em ) and ( max-width: 79.9375em ) { .header__actions .button { --button-size: 4rem; padding-inline: 1.5em; font-size: 1.4rem; font-weight: 600; } } @media screen and ( max-width: 63.9375em ) { .header__actions .button { --button-background: var(--blue--light); } } @media screen and ( max-width: 63.9375em ) and (hover: hover) { .header__actions .button:hover, .header__actions .button:focus { --button-background: var(--blue--dark); } } .header__actions .dropdown__button { padding-inline: 1em; } .header__button { display: inline-grid; grid-template-columns: auto 1fr; grid-template-rows: auto; grid-template-areas: "icon text"; margin-inline-start: auto; background: none; position: relative; z-index: 2; } .header__button::before, .header__button::after { content: ""; display: block; width: 100%; height: 100%; border-radius: inherit; position: absolute; top: 0; left: 0; z-index: -1; } .header__button::before { background: var(--background-color--gradient); } .header__button::after { background: var(--blue--light); } .header__button span { -ms-grid-row: 1; -ms-grid-column: 2; grid-area: text; color: var(--button-color); } .header__button i { scale: 1; } @media screen and ( min-width: 64em ) { .header__button { display: none; } } .accordion__overflow, .block__rte, .block--rte, .row, .row > .highlight { --rte-text-color--accent: var(--text-color--accent); --rte-margin-block: 1em; --rte-mark-color: var(--blue); --rte-mark-color--1: var(--blue--light); --rte-mark-color--2: var(--blue); --rte-strong-color: var(--text-color--dark); --rte-title-color: var(--title-color--deep); inline-size: 100%; container-type: inline-size; container-name: rte; } [class*=col-].accordion__overflow, [class*=col-].block__rte, [class*=col-].block--rte, [class*=col-].row, .row > [class*=col-].highlight { inline-size: calc(((var(--grid-width, 100%)) - var(--grid-gap) * (var(--container-columns) - 1)) / var(--container-columns) * var(--column-size) + var(--grid-gap) * (var(--column-size) - var(--minus-gap)) + var(--grid-offset, 0%)); } .highlight--blue.accordion__overflow, .highlight--blue.block__rte, .highlight--blue.block--rte, .highlight--blue.row, .row > .highlight--blue.highlight { --rte-text-color--accent: var(--blue--light); --rte-strong-color: var(--text-color); --rte-mark-color: var(--text-color); --rte-mark-color--1: var(--blue--light); --rte-mark-color--2: var(--text); --rte-title-color: var(--title-color--bright); } .highlight--blue.accordion__overflow > :where(h4:not([class]), h5:not([class]), h6:not([class])), .highlight--blue.block__rte > :where(h4:not([class]), h5:not([class]), h6:not([class])), .highlight--blue.block--rte > :where(h4:not([class]), h5:not([class]), h6:not([class])), .highlight--blue.row > :where(h4:not([class]), h5:not([class]), h6:not([class])), .row > .highlight--blue.highlight > :where(h4:not([class]), h5:not([class]), h6:not([class])) { --rte-title-color: var(--title-color--bright); } .accordion__overflow > :where(p, a, li, strong, em, mark):empty, .block__rte > :where(p, a, li, strong, em, mark):empty, .block--rte > :where(p, a, li, strong, em, mark):empty, .row > :where(p, a, li, strong, em, mark):empty, .row > .highlight > :where(p, a, li, strong, em, mark):empty { display: none; } .accordion__overflow > :where(* + *), .block__rte > :where(* + *), .block--rte > :where(* + *), .row > :where(* + *), .row > .highlight > :where(* + *) { margin-block-start: var(--rte-margin-block); } .accordion__overflow > :where(p + p), .block__rte > :where(p + p), .block--rte > :where(p + p), .row > :where(p + p), .row > .highlight > :where(p + p) { --rte-margin-block: 0.75em; } .accordion__overflow > :where(* + .button__wrapper), .block__rte > :where(* + .button__wrapper), .block--rte > :where(* + .button__wrapper), .row > :where(* + .button__wrapper), .row > .highlight > :where(* + .button__wrapper) { --rte-margin-block: 2em; } .accordion__overflow > :where(* + blockquote), .block__rte > :where(* + blockquote), .block--rte > :where(* + blockquote), .row > :where(* + blockquote), .row > .highlight > :where(* + blockquote), .accordion__overflow > :where(* + blockquote) + *, .block__rte > :where(* + blockquote) + *, .block--rte > :where(* + blockquote) + *, .row > :where(* + blockquote) + *, .row > .highlight > :where(* + blockquote) + * { --rte-margin-block: 5.6rem; } .accordion__overflow > :where(* + img:not([class]), * + figure:not([class])), .block__rte > :where(* + img:not([class]), * + figure:not([class])), .block--rte > :where(* + img:not([class]), * + figure:not([class])), .row > :where(* + img:not([class]), * + figure:not([class])), .row > .highlight > :where(* + img:not([class]), * + figure:not([class])), .accordion__overflow > :where(* + img:not([class]), * + figure:not([class])) + *, .block__rte > :where(* + img:not([class]), * + figure:not([class])) + *, .block--rte > :where(* + img:not([class]), * + figure:not([class])) + *, .row > :where(* + img:not([class]), * + figure:not([class])) + *, .row > .highlight > :where(* + img:not([class]), * + figure:not([class])) + * { --rte-margin-block: 3.2rem; } .accordion__overflow > :where(* + .block), .block__rte > :where(* + .block), .block--rte > :where(* + .block), .row > :where(* + .block), .row > .highlight > :where(* + .block), .accordion__overflow > :where(* + .block) + *, .block__rte > :where(* + .block) + *, .block--rte > :where(* + .block) + *, .row > :where(* + .block) + *, .row > .highlight > :where(* + .block) + * { --rte-margin-block: 4em; } @container (inline-size > 40em ) { .accordion__overflow > :where(* + .block), .block__rte > :where(* + .block), .block--rte > :where(* + .block), .row > :where(* + .block), .row > .highlight > :where(* + .block), .accordion__overflow > :where(* + .block) + *, .block__rte > :where(* + .block) + *, .block--rte > :where(* + .block) + *, .row > :where(* + .block) + *, .row > .highlight > :where(* + .block) + * { --rte-margin-block: 6em; } } .accordion__overflow > :where(h1:not([class]), h2:not([class]), h3:not([class]), h4:not([class]), h5:not([class]), h6:not([class])), .block__rte > :where(h1:not([class]), h2:not([class]), h3:not([class]), h4:not([class]), h5:not([class]), h6:not([class])), .block--rte > :where(h1:not([class]), h2:not([class]), h3:not([class]), h4:not([class]), h5:not([class]), h6:not([class])), .row > :where(h1:not([class]), h2:not([class]), h3:not([class]), h4:not([class]), h5:not([class]), h6:not([class])), .row > .highlight > :where(h1:not([class]), h2:not([class]), h3:not([class]), h4:not([class]), h5:not([class]), h6:not([class])) { --rte-margin-block: max(1.5em, 4rem); } .accordion__overflow > :where(h1:not([class]), h2:not([class]), h3:not([class]), h4:not([class]), h5:not([class]), h6:not([class])) + :where(h1:not([class]), h2:not([class]), h3:not([class]), h4:not([class]), h5:not([class]), h6:not([class])), .block__rte > :where(h1:not([class]), h2:not([class]), h3:not([class]), h4:not([class]), h5:not([class]), h6:not([class])) + :where(h1:not([class]), h2:not([class]), h3:not([class]), h4:not([class]), h5:not([class]), h6:not([class])), .block--rte > :where(h1:not([class]), h2:not([class]), h3:not([class]), h4:not([class]), h5:not([class]), h6:not([class])) + :where(h1:not([class]), h2:not([class]), h3:not([class]), h4:not([class]), h5:not([class]), h6:not([class])), .row > :where(h1:not([class]), h2:not([class]), h3:not([class]), h4:not([class]), h5:not([class]), h6:not([class])) + :where(h1:not([class]), h2:not([class]), h3:not([class]), h4:not([class]), h5:not([class]), h6:not([class])), .row > .highlight > :where(h1:not([class]), h2:not([class]), h3:not([class]), h4:not([class]), h5:not([class]), h6:not([class])) + :where(h1:not([class]), h2:not([class]), h3:not([class]), h4:not([class]), h5:not([class]), h6:not([class])) { --rte-margin-block: 0.5em; } .accordion__overflow > :where(h1:not([class]), h2:not([class]), h3:not([class]), h4:not([class]), h5:not([class]), h6:not([class])), .block__rte > :where(h1:not([class]), h2:not([class]), h3:not([class]), h4:not([class]), h5:not([class]), h6:not([class])), .block--rte > :where(h1:not([class]), h2:not([class]), h3:not([class]), h4:not([class]), h5:not([class]), h6:not([class])), .row > :where(h1:not([class]), h2:not([class]), h3:not([class]), h4:not([class]), h5:not([class]), h6:not([class])), .row > .highlight > :where(h1:not([class]), h2:not([class]), h3:not([class]), h4:not([class]), h5:not([class]), h6:not([class])) { --title-color: var(--rte-title-color); } .accordion__overflow > :where(h4:not([class])), .block__rte > :where(h4:not([class])), .block--rte > :where(h4:not([class])), .row > :where(h4:not([class])), .row > .highlight > :where(h4:not([class])) { --rte-title-color: var(--title-color--dark); } .accordion__overflow > :where(h5:not([class])), .block__rte > :where(h5:not([class])), .block--rte > :where(h5:not([class])), .row > :where(h5:not([class])), .row > .highlight > :where(h5:not([class])) { --rte-title-color: var(--title-color--dark); } .accordion__overflow > :where(h6:not([class])), .block__rte > :where(h6:not([class])), .block--rte > :where(h6:not([class])), .row > :where(h6:not([class])), .row > .highlight > :where(h6:not([class])) { --rte-title-color: var(--title-color--dark); } .accordion__overflow :where(b:not([class]), .underline), .block__rte :where(b:not([class]), .underline), .block--rte :where(b:not([class]), .underline), .row :where(b:not([class]), .underline), .row > .highlight :where(b:not([class]), .underline) { text-decoration: underline; text-underline-offset: 0.35em; text-decoration-thickness: 0.1rem; text-decoration-color: var(--text-color); } .accordion__overflow :where(a:not([class], :has(i))), .block__rte :where(a:not([class], :has(i))), .block--rte :where(a:not([class], :has(i))), .row :where(a:not([class], :has(i))), .row > .highlight :where(a:not([class], :has(i))) { --text-color: var(--rte-text-color--accent); --icon-color: var(--text-color); text-decoration: underline; text-underline-offset: 0.35em; text-decoration-thickness: 0.1rem; text-decoration-color: transparent; font-weight: 700; transition: var(--transition-property, all) var(--transition-easing, ease) var(--transition-duration, 0.32s) var(--transition-delay, 0s); } @media (hover: hover) { .accordion__overflow :where(a:not([class], :has(i))):hover, .block__rte :where(a:not([class], :has(i))):hover, .block--rte :where(a:not([class], :has(i))):hover, .row :where(a:not([class], :has(i))):hover, .row > .highlight :where(a:not([class], :has(i))):hover, .accordion__overflow :where(a:not([class], :has(i))):focus, .block__rte :where(a:not([class], :has(i))):focus, .block--rte :where(a:not([class], :has(i))):focus, .row :where(a:not([class], :has(i))):focus, .row > .highlight :where(a:not([class], :has(i))):focus { text-decoration-color: var(--text-color); } } .accordion__overflow :where(a:not([class], :has(i)))[href*=http], .block__rte :where(a:not([class], :has(i)))[href*=http], .block--rte :where(a:not([class], :has(i)))[href*=http], .row :where(a:not([class], :has(i)))[href*=http], .row > .highlight :where(a:not([class], :has(i)))[href*=http], .accordion__overflow :where(a:not([class], :has(i)))[target], .block__rte :where(a:not([class], :has(i)))[target], .block--rte :where(a:not([class], :has(i)))[target], .row :where(a:not([class], :has(i)))[target], .row > .highlight :where(a:not([class], :has(i)))[target] { padding-inline-end: 1.5em; } .accordion__overflow :where(a:not([class], :has(i)))[href*=http]::after, .block__rte :where(a:not([class], :has(i)))[href*=http]::after, .block--rte :where(a:not([class], :has(i)))[href*=http]::after, .row :where(a:not([class], :has(i)))[href*=http]::after, .accordion__overflow :where(a:not([class], :has(i)))[target]::after, .block__rte :where(a:not([class], :has(i)))[target]::after, .block--rte :where(a:not([class], :has(i)))[target]::after, .row :where(a:not([class], :has(i)))[target]::after { content: "\ecaf"; position: absolute; translate: 30% -10%; } .accordion__overflow > :where(*:not([class], h1:not([class]), h2:not([class]), h3:not([class]), h4:not([class]), h5:not([class]), h6:not([class]))) strong, .block__rte > :where(*:not([class], h1:not([class]), h2:not([class]), h3:not([class]), h4:not([class]), h5:not([class]), h6:not([class]))) strong, .block--rte > :where(*:not([class], h1:not([class]), h2:not([class]), h3:not([class]), h4:not([class]), h5:not([class]), h6:not([class]))) strong, .row > :where(*:not([class], h1:not([class]), h2:not([class]), h3:not([class]), h4:not([class]), h5:not([class]), h6:not([class]))) strong, .row > .highlight > :where(*:not([class], h1:not([class]), h2:not([class]), h3:not([class]), h4:not([class]), h5:not([class]), h6:not([class]))) strong { --text-color: var(--rte-strong-color); } :is(.fill--blue) .accordion__overflow > :where(*:not([class], h1:not([class]), h2:not([class]), h3:not([class]), h4:not([class]), h5:not([class]), h6:not([class]))) strong, :is(.fill--blue) .block__rte > :where(*:not([class], h1:not([class]), h2:not([class]), h3:not([class]), h4:not([class]), h5:not([class]), h6:not([class]))) strong, :is(.fill--blue) .block--rte > :where(*:not([class], h1:not([class]), h2:not([class]), h3:not([class]), h4:not([class]), h5:not([class]), h6:not([class]))) strong, :is(.fill--blue) .row > :where(*:not([class], h1:not([class]), h2:not([class]), h3:not([class]), h4:not([class]), h5:not([class]), h6:not([class]))) strong, :is(.fill--blue) .row > .highlight > :where(*:not([class], h1:not([class]), h2:not([class]), h3:not([class]), h4:not([class]), h5:not([class]), h6:not([class]))) strong { --text-color: var(--text-color--bright); } .accordion__overflow > :where([class*=block--columns], *:not([class], h1:not([class]), h2:not([class]), h3:not([class]), h4:not([class]), h5:not([class]), h6:not([class]))) mark, .block__rte > :where([class*=block--columns], *:not([class], h1:not([class]), h2:not([class]), h3:not([class]), h4:not([class]), h5:not([class]), h6:not([class]))) mark, .block--rte > :where([class*=block--columns], *:not([class], h1:not([class]), h2:not([class]), h3:not([class]), h4:not([class]), h5:not([class]), h6:not([class]))) mark, .row > :where([class*=block--columns], *:not([class], h1:not([class]), h2:not([class]), h3:not([class]), h4:not([class]), h5:not([class]), h6:not([class]))) mark, .row > .highlight > :where([class*=block--columns], *:not([class], h1:not([class]), h2:not([class]), h3:not([class]), h4:not([class]), h5:not([class]), h6:not([class]))) mark { --selection-color: var(--text-color); padding-inline: 0.5ch; background-color: hsl(from var(--rte-text-color--accent) h 100% 75%); color: var(--text-color--bright); } .accordion__overflow :where(blockquote:not([class])), .block__rte :where(blockquote:not([class])), .block--rte :where(blockquote:not([class])), .row :where(blockquote:not([class])), .row > .highlight :where(blockquote:not([class])) { padding-block: 2em; margin-inline: auto; border-block: 0.1rem solid var(--stroke-color--light); text-align: center; font-style: italic; font-size: 1.25em; line-height: 1.5em; font-weight: 300; } @media screen and ( min-width: 64em ) { .accordion__overflow :where(blockquote:not([class])), .block__rte :where(blockquote:not([class])), .block--rte :where(blockquote:not([class])), .row :where(blockquote:not([class])), .row > .highlight :where(blockquote:not([class])) { font-size: 1.5em; padding-inline: 2em; } } .accordion__overflow :where(blockquote:not([class])) cite, .block__rte :where(blockquote:not([class])) cite, .block--rte :where(blockquote:not([class])) cite, .row :where(blockquote:not([class])) cite, .row > .highlight :where(blockquote:not([class])) cite { --text-color: var(--text-color--accent-medium); display: block; padding-block-start: 1em; font-family: var(--title-font); font-weight: 600; color: var(--text-color--accent); } @media screen and ( min-width: 64em ) { .accordion__overflow :where(blockquote:not([class])) cite, .block__rte :where(blockquote:not([class])) cite, .block--rte :where(blockquote:not([class])) cite, .row :where(blockquote:not([class])) cite, .row > .highlight :where(blockquote:not([class])) cite { font-size: 1.25em; } } .accordion__overflow :where(blockquote:not([class])) cite::before, .block__rte :where(blockquote:not([class])) cite::before, .block--rte :where(blockquote:not([class])) cite::before, .row :where(blockquote:not([class])) cite::before, .row > .highlight :where(blockquote:not([class])) cite::before { content: "―"; margin-inline-end: 1em; } .accordion__overflow > :where(ul:not([class]), ol:not([class])), .block__rte > :where(ul:not([class]), ol:not([class])), .block--rte > :where(ul:not([class]), ol:not([class])), .row > :where(ul:not([class]), ol:not([class])), .row > .highlight > :where(ul:not([class]), ol:not([class])), .accordion__overflow > :where(ul:not([class]), ol:not([class])) ul, .block__rte > :where(ul:not([class]), ol:not([class])) ul, .block--rte > :where(ul:not([class]), ol:not([class])) ul, .row > :where(ul:not([class]), ol:not([class])) ul, .row > .highlight > :where(ul:not([class]), ol:not([class])) ul, .accordion__overflow > :where(ul:not([class]), ol:not([class])) ol, .block__rte > :where(ul:not([class]), ol:not([class])) ol, .block--rte > :where(ul:not([class]), ol:not([class])) ol, .row > :where(ul:not([class]), ol:not([class])) ol, .row > .highlight > :where(ul:not([class]), ol:not([class])) ol { display: flex; flex-direction: column; gap: 0.5em var(--grid-gap); } .accordion__overflow > :where(ul:not([class]), ol:not([class])) ul, .block__rte > :where(ul:not([class]), ol:not([class])) ul, .block--rte > :where(ul:not([class]), ol:not([class])) ul, .row > :where(ul:not([class]), ol:not([class])) ul, .row > .highlight > :where(ul:not([class]), ol:not([class])) ul, .accordion__overflow > :where(ul:not([class]), ol:not([class])) ol, .block__rte > :where(ul:not([class]), ol:not([class])) ol, .block--rte > :where(ul:not([class]), ol:not([class])) ol, .row > :where(ul:not([class]), ol:not([class])) ol, .row > .highlight > :where(ul:not([class]), ol:not([class])) ol { padding-block: 1em; } .accordion__overflow > :where(ul:not([class]), ol:not([class])) ul, .block__rte > :where(ul:not([class]), ol:not([class])) ul, .block--rte > :where(ul:not([class]), ol:not([class])) ul, .row > :where(ul:not([class]), ol:not([class])) ul, .row > .highlight > :where(ul:not([class]), ol:not([class])) ul { --rte-mark-color: var(--rte-mark-color--1); } .accordion__overflow > :where(ul:not([class]), ol:not([class])) ul ul, .block__rte > :where(ul:not([class]), ol:not([class])) ul ul, .block--rte > :where(ul:not([class]), ol:not([class])) ul ul, .row > :where(ul:not([class]), ol:not([class])) ul ul, .row > .highlight > :where(ul:not([class]), ol:not([class])) ul ul { --rte-mark-color: var(--rte-mark-color--2); } .accordion__overflow > :where(ul:not([class]), ol:not([class])) li, .block__rte > :where(ul:not([class]), ol:not([class])) li, .block--rte > :where(ul:not([class]), ol:not([class])) li, .row > :where(ul:not([class]), ol:not([class])) li, .row > .highlight > :where(ul:not([class]), ol:not([class])) li { padding-inline-start: 3em; position: relative; } .accordion__overflow > :where(ul:not([class]), ol:not([class])) li::before, .block__rte > :where(ul:not([class]), ol:not([class])) li::before, .block--rte > :where(ul:not([class]), ol:not([class])) li::before, .row > :where(ul:not([class]), ol:not([class])) li::before, .row > .highlight > :where(ul:not([class]), ol:not([class])) li::before { color: var(--rte-mark-color); font-weight: 500; position: absolute; } .accordion__overflow > :where(ul:not([class]), ol:not([class])):is(ul) > li::before, .block__rte > :where(ul:not([class]), ol:not([class])):is(ul) > li::before, .block--rte > :where(ul:not([class]), ol:not([class])):is(ul) > li::before, .row > :where(ul:not([class]), ol:not([class])):is(ul) > li::before, .row > .highlight > :where(ul:not([class]), ol:not([class])):is(ul) > li::before, .accordion__overflow > :where(ul:not([class]), ol:not([class])) ul > li::before, .block__rte > :where(ul:not([class]), ol:not([class])) ul > li::before, .block--rte > :where(ul:not([class]), ol:not([class])) ul > li::before, .row > :where(ul:not([class]), ol:not([class])) ul > li::before, .row > .highlight > :where(ul:not([class]), ol:not([class])) ul > li::before { content: ""; width: 1.25em; height: 0.1rem; background: currentColor; translate: -3em -50%; top: 0.5lh; } .accordion__overflow > :where(ul:not([class]), ol:not([class])):is(ol) > li, .block__rte > :where(ul:not([class]), ol:not([class])):is(ol) > li, .block--rte > :where(ul:not([class]), ol:not([class])):is(ol) > li, .row > :where(ul:not([class]), ol:not([class])):is(ol) > li, .row > .highlight > :where(ul:not([class]), ol:not([class])):is(ol) > li, .accordion__overflow > :where(ul:not([class]), ol:not([class])) ol > li, .block__rte > :where(ul:not([class]), ol:not([class])) ol > li, .block--rte > :where(ul:not([class]), ol:not([class])) ol > li, .row > :where(ul:not([class]), ol:not([class])) ol > li, .row > .highlight > :where(ul:not([class]), ol:not([class])) ol > li { counter-increment: index; } .accordion__overflow > :where(ul:not([class]), ol:not([class])):is(ol) > li::before, .block__rte > :where(ul:not([class]), ol:not([class])):is(ol) > li::before, .block--rte > :where(ul:not([class]), ol:not([class])):is(ol) > li::before, .row > :where(ul:not([class]), ol:not([class])):is(ol) > li::before, .row > .highlight > :where(ul:not([class]), ol:not([class])):is(ol) > li::before, .accordion__overflow > :where(ul:not([class]), ol:not([class])) ol > li::before, .block__rte > :where(ul:not([class]), ol:not([class])) ol > li::before, .block--rte > :where(ul:not([class]), ol:not([class])) ol > li::before, .row > :where(ul:not([class]), ol:not([class])) ol > li::before, .row > .highlight > :where(ul:not([class]), ol:not([class])) ol > li::before { content: counter(index); translate: -3em 0; font-weight: 600; } .accordion__overflow > :where(ul:not([class]), ol:not([class])) ol li::before, .block__rte > :where(ul:not([class]), ol:not([class])) ol li::before, .block--rte > :where(ul:not([class]), ol:not([class])) ol li::before, .row > :where(ul:not([class]), ol:not([class])) ol li::before, .row > .highlight > :where(ul:not([class]), ol:not([class])) ol li::before { content: counters(index, ".", decimal); } .accordion__overflow > :where(ol:not([class])), .block__rte > :where(ol:not([class])), .block--rte > :where(ol:not([class])), .row > :where(ol:not([class])), .row > .highlight > :where(ol:not([class])), .accordion__overflow > :where(ol:not([class])) ol, .block__rte > :where(ol:not([class])) ol, .block--rte > :where(ol:not([class])) ol, .row > :where(ol:not([class])) ol, .row > .highlight > :where(ol:not([class])) ol { counter-reset: index; } .accordion__overflow > :where(img:not(.block)), .block__rte > :where(img:not(.block)), .block--rte > :where(img:not(.block)), .row > :where(img:not(.block)), .row > .highlight > :where(img:not(.block)), .accordion__overflow > :where(figure:not(.block)) img, .block__rte > :where(figure:not(.block)) img, .block--rte > :where(figure:not(.block)) img, .row > :where(figure:not(.block)) img, .row > .highlight > :where(figure:not(.block)) img { border-radius: var(--radius--md); } .accordion__overflow figcaption:not([class]), .block__rte figcaption:not([class]), .block--rte figcaption:not([class]), .row figcaption:not([class]) { font-size: 1.4rem; padding-block-start: 0.5em; padding-inline: calc(var(--radius--md) * 0.5); } .accordion__overflow > :where(img[class*=col-], figure[class*=col-]), .block__rte > :where(img[class*=col-], figure[class*=col-]), .block--rte > :where(img[class*=col-], figure[class*=col-]), .row > :where(img[class*=col-], figure[class*=col-]), .row > .highlight > :where(img[class*=col-], figure[class*=col-]) { position: relative; left: 50%; translate: -50% 0; } @media screen and ( max-width: 47.9375em ) { .accordion__overflow > .block--default .block__list.flex--grid, .block__rte > .block--default .block__list.flex--grid, .block--rte > .block--default .block__list.flex--grid, .row > .block--default .block__list.flex--grid, .row > .highlight > .block--default .block__list.flex--grid { row-gap: 1.5em; } } .row > *:not(.block, [class*=col-]) { width: calc(((var(--grid-width, 100%)) - var(--grid-gap) * (var(--container-columns) - 1)) / var(--container-columns) * var(--column-size) + var(--grid-gap) * (var(--column-size) - var(--minus-gap)) + var(--grid-offset, 0%)); margin-inline-start: calc(((var(--grid-width, 100%)) - var(--grid-gap) * (var(--container-columns) - 1)) / var(--container-columns) * var(--offset-left-size) + var(--grid-gap) * (var(--offset-left-size) - 0) + var(--grid-offset, 0%)); } .row + .row { margin-block-start: var(--row-margin-block); } .hero + .row { margin-block-start: var(--row-margin-block); } .page__breadcrumb { margin-block-end: 1em; } @media screen and ( min-width: 40em ) { .page__breadcrumb { margin-block-end: 3em; } } .breadcrumb { --grid-width: calc(100vw - var(--grid-edge) * 2); --grid-width: calc(100dvw - var(--grid-edge) * 2); --breadcrumb-gap: 3em; display: flex; max-width: calc(100vw - var(--grid-edge) * 2); gap: var(--breadcrumb-gap); position: relative; z-index: var(--z-index-breadcrumb); translate: calc(var(--grid-edge) - 0.5em) 0; } @media screen and ( min-width: 107.5em ) { .breadcrumb { --grid-width: calc(var(--layout-max-width) - var(--grid-edge) * 2); max-width: var(--grid-width); position: relative; left: 50%; translate: calc(var(--layout-max-width) * -0.5 + var(--grid-edge)) 0; } } .breadcrumb.no-transition, .breadcrumb.no-transition *, .breadcrumb.no-transition *::before, .breadcrumb.no-transition *::after, .breadcrumb.no-transition li { transition-duration: 0s !important; } .breadcrumb__home { flex: 0 0 3.2rem; justify-content: center; } .breadcrumb a, .breadcrumb button { --text-color: var(--text-color--medium); --icon-color: var(--text-color--medium); display: flex; height: var(--breadcrumb-height); align-items: center; font-size: 1.4rem; font-weight: 500; } .breadcrumb a span, .breadcrumb button span { display: inline-block; max-width: 20em; pointer-events: none; color: var(--text-color); text-overflow: ellipsis; overflow: hidden; white-space: nowrap; transition: var(--transition-property, all) var(--transition-easing, ease) var(--transition-duration, 0.32s) var(--transition-delay, 0s); } @media (hover: hover) { .breadcrumb a:hover, .breadcrumb a:focus, .breadcrumb button:hover, .breadcrumb button:focus { --text-color: var(--text-color--accent); } } .breadcrumb button { --text-color: var(--text-color--accent); } .breadcrumb__dropdown, .breadcrumb__list { display: inline-flex; gap: var(--breadcrumb-gap); } .breadcrumb__item { position: relative; transition: var(--transition-property, all) var(--transition-easing, ease) var(--transition-duration, 0.32s) var(--transition-delay, 0s); } .breadcrumb__item:last-child { font-weight: 500; } .breadcrumb__item::before { content: "/"; display: inline-block; font-weight: 400; line-height: 1em; color: var(--text-color--medium); position: absolute; top: 0.5lh; left: calc(var(--breadcrumb-gap) * 0.5 * -1); translate: -50% 0; } .breadcrumb--dropdown a, .breadcrumb--dropdown button { max-width: 100%; } .breadcrumb--dropdown .breadcrumb__list { width: 100%; flex-direction: column; gap: 0; } .breadcrumb--dropdown .breadcrumb__item::before { display: none; } .breadcrumb--dropdown .breadcrumb__item::after { content: ""; display: block; width: 0.3em; height: 0.5em; border: 0.1rem solid var(--stroke-color--light); border-block-start: 0; border-inline-end: 0; opacity: 0; pointer-events: none; position: absolute; left: -1em; top: 0.5lh; translate: 0 -20%; transition: var(--transition-property, all) var(--transition-easing, ease) var(--transition-duration, 0.32s) var(--transition-delay, 0s); } .breadcrumb--dropdown .breadcrumb__item span { max-width: 100%; } .breadcrumb--dropdown .breadcrumb__dropdown { max-width: calc(100% - var(--breadcrumb-height) - var(--breadcrumb-gap) - var(--grid-edge)); position: absolute; bottom: 0; left: calc(var(--breadcrumb-height) + var(--breadcrumb-gap)); z-index: 2; transition: var(--transition-property, all) var(--transition-easing, ease) var(--transition-duration, 0.32s) var(--transition-delay, 0s); } .breadcrumb--dropdown .breadcrumb__dropdown::before { content: ""; display: block; width: calc(100% + 4em); height: calc(100% + 2em); background: var(--background-color); box-shadow: var(--shadow--default); border-radius: var(--radius--default); opacity: 0; pointer-events: none; position: absolute; top: 50%; left: 50%; translate: -50% -50%; z-index: -1; transition: var(--transition-property, all) var(--transition-easing, ease) var(--transition-duration, 0.32s) var(--transition-delay, 0s); } .breadcrumb--dropdown .breadcrumb__dropdown.active { translate: 0 calc(100% - var(--breadcrumb-height)); } .breadcrumb--dropdown .breadcrumb__dropdown.active .breadcrumb__item { opacity: 1; pointer-events: auto; } .breadcrumb--dropdown .breadcrumb__dropdown.active .breadcrumb__item::after { opacity: 1; } .breadcrumb--dropdown .breadcrumb__dropdown.active::before { opacity: 1; } .breadcrumb--dropdown .breadcrumb__item:not(:last-child) { opacity: 0; pointer-events: none; } .breadcrumb--dropdown .breadcrumb__home { position: relative; } .breadcrumb--dropdown .breadcrumb__home::after { font-family: "remixicon" !important; font-style: normal; color: var(--icon-color); -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; content: "\ea6e"; pointer-events: none; position: absolute; right: calc(var(--breadcrumb-gap) * -0.5); translate: 50% 0em; } .breadcrumb--dropdown.open .breadcrumb__dropdown { translate: 0 calc(100% - var(--breadcrumb-height)); } .breadcrumb--dropdown.open .breadcrumb__dropdown .breadcrumb__item { opacity: 1; pointer-events: auto; } .breadcrumb--dropdown.open .breadcrumb__dropdown .breadcrumb__item::after { opacity: 1; } .breadcrumb--dropdown.open .breadcrumb__dropdown::before { opacity: 1; } .hero--home { --scroll-factor: 1; --clip-factor: calc( 1 - min(var(--scroll-y) * var(--scroll-factor), 1) ); container-type: inline-size; grid-template-rows: 6vw auto 7.5vw; position: relative; z-index: 2; } @media screen and ( max-width: 39.9375em ) { .hero--home { --scroll-factor: 3; grid-template-rows: 3.2rem auto 6.4rem; } } @media screen and ( min-width: 40em ) { .hero--home { margin-block-start: 2em; } } @media screen and ( min-width: 107.5em ) { .hero--home { grid-template-rows: 9.6rem auto 12rem; } } .hero--home::after { content: ""; display: block; width: 0.1rem; height: 6.4rem; background: var(--stroke-color--deep); position: absolute; bottom: 0; left: 50%; translate: 0 50%; scale: 1 calc(1 - 0.5 * var(--clip-factor)); transition: var(--transition-property, all) var(--transition-easing, ease) var(--transition-duration, 0.32s) var(--transition-delay, 0s); transition-property: scale; --transition-duration: .5s; --transition-easing: linear( 0, 0.005, 0.02 2.1%, 0.081 4.7%, 0.467 15.7%, 0.563, 0.645, 0.717, 0.778 28.5%, 0.829 32%, 0.872 35.8%, 0.909 40.1%, 0.938 44.9%, 0.961 50.3%, 0.977 56.5%, 0.987 63.6%, 0.994 72.3%, 1 ); } @media screen and ( min-width: 40em ) { .hero--home::after { height: 12rem; } } .hero--home .hero__image { --grid-width: 100cqw; grid-row: 1/-1; grid-column: 1/-1; justify-self: center; content: ""; display: block; width: calc(100% + var(--grid-edge) * 2); height: 100%; clip-path: rect(calc((((var(--grid-width, 100%)) - var(--grid-gap) * (var(--container-columns) - 1)) / var(--container-columns) * 2.75 + var(--grid-gap) * (2.75 - 0) + var(--grid-offset, 0%)) * var(--clip-factor)) calc(100% - var(--grid-edge) * var(--clip-factor)) 100% calc((((var(--grid-width, 100%)) - var(--grid-gap) * (var(--container-columns) - 1)) / var(--container-columns) * 4 + var(--grid-gap) * (4 - 0) + var(--grid-offset, 0%) + var(--grid-edge)) * var(--clip-factor)) round calc(3.6rem * var(--clip-factor))); position: absolute; mix-blend-mode: multiply; z-index: 2; transition: var(--transition-property, all) var(--transition-easing, ease) var(--transition-duration, 0.32s) var(--transition-delay, 0s); transition-property: clip-path; --transition-duration: .5s; --transition-easing: linear( 0, 0.005, 0.02 2.1%, 0.081 4.7%, 0.467 15.7%, 0.563, 0.645, 0.717, 0.778 28.5%, 0.829 32%, 0.872 35.8%, 0.909 40.1%, 0.938 44.9%, 0.961 50.3%, 0.977 56.5%, 0.987 63.6%, 0.994 72.3%, 1 ); } @media screen and ( min-width: 40em ) { .hero--home .hero__image { clip-path: rect(calc((((var(--grid-width, 100%)) - var(--grid-gap) * (var(--container-columns) - 1)) / var(--container-columns) * 2 + var(--grid-gap) * (2 - 0) + var(--grid-offset, 0%)) * var(--clip-factor)) calc(100% - var(--grid-edge) * var(--clip-factor)) 100% calc((((var(--grid-width, 100%)) - var(--grid-gap) * (var(--container-columns) - 1)) / var(--container-columns) * 4 + var(--grid-gap) * (4 - 0) + var(--grid-offset, 0%) + var(--grid-edge)) * var(--clip-factor)) round calc(3.6rem * var(--clip-factor))); } } @media screen and ( min-width: 107.5em ) { .hero--home .hero__image { clip-path: rect(calc((((var(--grid-width, 100%)) - var(--grid-gap) * (var(--container-columns) - 1)) / var(--container-columns) * 2 + var(--grid-gap) * (2 - 0) + var(--grid-offset, 0%)) * var(--clip-factor)) calc(100% - var(--grid-edge) * var(--clip-factor)) 100% calc((((var(--grid-width, 100%)) - var(--grid-gap) * (var(--container-columns) - 1)) / var(--container-columns) * 4 + var(--grid-gap) * (4 - 0) + var(--grid-offset, 0%) + var(--grid-edge)) * var(--clip-factor)) round 3.6rem); } } .hero--home .hero__image img { height: 100%; transform-origin: right bottom; scale: calc(1 - 0.3 * var(--clip-factor)); } @media screen and ( max-width: 39.9375em ) { .hero--home .hero__image img { translate: calc(5% * var(--clip-factor)) 0; scale: calc(1 - 0.26 * var(--clip-factor)); } } .hero--home .hero__image img { transition: var(--transition-property, all) var(--transition-easing, ease) var(--transition-duration, 0.32s) var(--transition-delay, 0s); transition-property: clip-path, translate, scale; --transition-duration: .5s; --transition-easing: linear( 0, 0.005, 0.02 2.1%, 0.081 4.7%, 0.467 15.7%, 0.563, 0.645, 0.717, 0.778 28.5%, 0.829 32%, 0.872 35.8%, 0.909 40.1%, 0.938 44.9%, 0.961 50.3%, 0.977 56.5%, 0.987 63.6%, 0.994 72.3%, 1 ); } .hero--home .hero__title { --title-size: clamp( 5rem, 10vw, 16rem ); grid-row: 2/span 1; } .hero--default { grid-template-rows: auto auto; } .hero--default:not(:has(.hero__content)) .hero__image { grid-column-start: 6; } .hero--default .hero__title { grid-row: 1/span 1; mix-blend-mode: multiply; position: relative; z-index: 2; } @media screen and ( min-width: 64em ) { .hero--default .hero__title { grid-row: span 1/-1; } } .hero--default .hero__content { container-type: inline-size; grid-row: span 1/-1; font-family: var(--title-font); font-size: 1.8rem; line-height: 1.3333333333; } .hero--default .hero__content * + .hero__information { margin-block-start: 1em; } .hero--default .hero__content * + .hero__actions { margin-block-start: 1em; } @container (inline-size > 20em ) { .hero--default .hero__content > * { font-size: 2rem; } } @container (inline-size > 24.375em ) { .hero--default .hero__content > * { font-size: 2.4rem; } } .hero--default .hero__image { aspect-ratio: var(--ratio--2x1); width: 100%; grid-row: span 1/-1; } .hero--default .hero__image img { height: 100%; border-radius: var(--radius--md); } .hero--default .hero__information { --text-color: var(--text-color--deep); --icon-color: var(--text-color--deep); display: flex; flex-direction: column; gap: 0.5em; font-family: var(--text-font); font-size: 1.6rem; font-weight: 500; } .hero--default .hero__information [class*=ri-] { font-size: 1.3em; translate: 0 0.05em; } .hero--default .hero__information a:not(.button), .hero--default .hero__information p { display: flex; align-items: baseline; gap: 1em; line-height: 1.5; } .hero--default .hero__information a:not(.button) [class*=ri-], .hero--default .hero__information p [class*=ri-] { order: -1; } .hero--default .hero__information a:not([class]) { text-decoration: underline; text-underline-offset: 0.35em; text-decoration-thickness: 0.1rem; text-decoration-color: transparent; transition: var(--transition-property, all) var(--transition-easing, ease) var(--transition-duration, 0.32s) var(--transition-delay, 0s); } @media (hover: hover) { .hero--default .hero__information a:not([class]):hover, .hero--default .hero__information a:not([class]):focus { text-decoration-color: var(--text-color); } } .hero--default .hero__information .button { margin-block-start: 0.5em; margin-inline-start: 2.3em; } @media screen and ( max-width: 39.9375em ) { .hero--default .hero__information { margin-block-start: 4em; } } .hero--default:not(:has(.hero__image)) { --hero-offset: 1lh; } .hero--default:not(:has(.hero__image))::before { content: " "; height: var(--hero-offset); color: transparent; } @media screen and ( max-width: 63.9375em ) { .hero--default:not(:has(.hero__image)) { row-gap: 2em; } .hero--default:not(:has(.hero__image))::before { display: none; } } @media screen and ( min-width: 64em ) { .hero--default:not(:has(.hero__image)) .hero__title { margin-block-start: calc(var(--hero-offset) * -1); } } @media screen and ( max-width: 39.9375em ) { .hero--default:has(.hero__image) { grid-template-rows: auto auto auto; row-gap: 2.5em; } } .hero--default:has(.hero__image) .hero__title { grid-row: 1/span 1; } @media screen and ( min-width: 40em ) { .hero--default:has(.hero__image) .hero__title { margin-block-end: -0.325lh; } .hero--default:has(.hero__image) .hero__title.title--gradient { margin-block-end: calc(-0.325lh - 0.1em); } } @media screen and ( max-width: 39.9375em ) { .hero--default:has(.hero__image) .hero__content { grid-row: 2/span 1; } } @media screen and ( min-width: 40em ) { .hero--default:has(.hero__image) .hero__content { margin-block-start: 4em; } } @media screen and ( max-width: 39.9375em ) { .hero--default:has(.hero__image) .hero__image { grid-row: span 1/-1; } } .hero--product { container-type: inline-size; } @media screen and ( max-width: 79.9375em ) { .hero--product { grid-template-rows: auto 1fr; row-gap: 1em; } } @media screen and ( max-width: 39.9375em ) { .hero--product { grid-template-rows: auto auto auto; } } @media screen and ( min-width: 80em ) { .hero--product > * { grid-row: 1/-1; } } .hero--product .hero__title { position: relative; z-index: 2; } @media screen and ( max-width: 79.9375em ) { .hero--product .hero__title { grid-row: 1/span 1; } } @media screen and ( min-width: 80em ) { .hero--product .hero__title { text-align: right; } } .hero--product .hero__category { padding-block-end: 0.75em; font-size: 2.4rem; position: relative; z-index: 2; } @media screen and ( max-width: 79.9375em ) { .hero--product .hero__category { grid-row: 2/span 1; } } @media screen and ( min-width: 80em ) { .hero--product .hero__category { align-self: end; text-align: right; } } @container (inline-size > 48em ) { .hero--product .hero__category { font-size: 3.2rem; } } @container (inline-size > 80em ) { .hero--product .hero__category { font-size: 4rem; } } .hero--product .hero__image { aspect-ratio: var(--ratio--3x2); padding: 0.75em; background: var(--background-color--lighter); border-radius: var(--radius--md); } .hero--product .hero__image img { height: 100%; -o-object-fit: contain; object-fit: contain; } @media screen and ( max-width: 79.9375em ) { .hero--product .hero__image { grid-row: 1/-1; } } @media screen and ( max-width: 39.9375em ) { .hero--product .hero__image { grid-row: span 1/-1; } } .hero--product .hero__image--3d { padding: 0; border-radius: 0; background: none; position: relative; } .hero--product .hero__image--3d img { opacity: 0; pointer-events: none; } .hero--product .hero__canvas { aspect-ratio: var(--ratio--3x2); width: calc(100% + var(--grid-gap) * 2) !important; height: auto !important; position: absolute; top: 50%; left: 50%; translate: -50% -50%; } .block { position: relative; z-index: 2; } .block + * { margin-block-start: min(var(--block-margin-block), 6.4rem); } @media screen and ( min-width: 40em ) { .block + * { margin-block-start: min(var(--block-margin-block), 12.8rem); } } .block__title--below { --title-size: 5rem; --title-weight: 400; transition: var(--transition-property, all) var(--transition-easing, ease) var(--transition-duration, 0.32s) var(--transition-delay, 0s); } @media screen and ( max-width: 63.9375em ) { .block__title--below { margin-block-end: 0.5em; } } @media screen and ( min-width: 64em ) { .block__title--below { --title-size: min(22.5vmax,36rem); position: absolute; top: 0; left: 50%; translate: -50% 0; z-index: -2; } } .block--accordion { padding-block: 0; } @media screen and ( max-width: 63.9375em ) { .block--accordion.fill--blured::before { display: none; } } .block--accordion .block__rte { padding-block-end: 2em; font-weight: 600; } @media screen and ( min-width: 64em ) { .block--accordion .block__rte { padding-block-start: 2em; padding-block-end: 0; } } .block--slideshow { display: flex; flex-direction: column; gap: 4em; } .block--slideshow .block__header { display: flex; flex-direction: column; gap: 1em; } .block--slideshow .block__actions { margin-block-start: 1em; } .block--banner { grid-template-rows: auto; align-items: center; } @media screen and ( min-width: 64em ) { .block--banner { grid-template-rows: calc(var(--radius--md) * 1.5) auto calc(var(--radius--md) * 1.5); } } .block--banner .block__header { grid-row: 2/span 1; align-self: stretch; display: flex; flex-direction: column; justify-content: center; gap: 0.75em; position: relative; z-index: 3; } .block--banner .block__title { --title-size: 2rem; line-height: 1.2; } @media screen and ( min-width: 40em ) { .block--banner .block__title { --title-size: 2.4rem; } } .block--banner .block__rte { font-size: 2rem; } @media screen and ( min-width: 40em ) { .block--banner .block__rte { font-size: 2.4rem; } } .block--banner .block__image { grid-row: 1/-1; aspect-ratio: var(--ratio--3x2); width: 100%; height: 100%; padding: 0.5em; } .block--banner .block__image img { height: 100%; -o-object-fit: contain; object-fit: contain; } @media screen and ( max-width: 63.9375em ) { .block--banner .block__image { display: none; } } .block--information .block__item + .block__item { margin-block-start: 6em; } .block--cta { row-gap: 2em; } .block--cta .block__list.flex--grid { row-gap: 2.5em; } .block--cards { row-gap: 2.5em; } .block--cards .block__list.flex--grid { row-gap: calc(var(--grid-gap) * 2.5); } .block--cards .block__footer { padding-block-start: 2.5em; } .block--images img { border-radius: var(--radius--md); } .block--form { container-type: inline-size; } .block--form:has(.form--filters) .block__title--below { opacity: 0; pointer-events: none; } .block--form:has(.form--filters):has(.js-accordion + .js-accordion.expand) .block__title--below { opacity: 1; pointer-events: auto; } @media screen and ( max-width: 39.9375em ) { .block--form:has(.form--filters) .block__title--below { display: none; } } @media screen and ( max-width: 47.9375em ) { .block--columns { row-gap: 3em; } } .block--columns .block__image img { border-radius: var(--radius--md); } .card { --card-gap: .75em; position: relative; } .card__title { line-height: 1.2; text-decoration: underline; text-underline-offset: 0.15em; text-decoration-thickness: 0.1rem; text-decoration-color: transparent; transition: var(--transition-property, all) var(--transition-easing, ease) var(--transition-duration, 0.32s) var(--transition-delay, 0s); } @media (hover: hover) { .card:hover .card__title, .card:focus .card__title { text-decoration-color: var(--title-color); } } .card__footer:not(:has(.button:nth-child(2))) .button::after { content: ""; display: block; width: 100%; height: 100%; position: absolute; top: 0; left: 0; z-index: 2; } .card--default, .card--simple { container-type: inline-size; display: flex; flex-direction: column; gap: var(--card-gap); } .card--default .card__header, .card--simple .card__header { --card-gap: 1.25em; display: flex; flex-direction: column; gap: var(--card-gap); } .card--default .card__image, .card--simple .card__image { aspect-ratio: var(--ratio--3x2); width: 100%; padding: 0.5em; background: var(--background-color--lighter); border-radius: var(--radius--md); order: -1; } .card--default .card__image img, .card--simple .card__image img { height: 100%; -o-object-fit: contain; object-fit: contain; } .card--default .card__title, .card--simple .card__title { --title-size: 2rem; } @container (inline-size > 24.375em ) { .card--default .card__title, .card--simple .card__title { --title-size: 2.4rem; } } .card--default .card__title, .card--default .card__content, .card--default .card__footer, .card--simple .card__title, .card--simple .card__content, .card--simple .card__footer { padding-inline: 0.5em; } .card--simple .card__title { --title-size: 2rem; line-height: 1.2; } .card--cta { display: flex; flex-direction: column; gap: var(--card-gap); } .card--cta .card__header { --card-gap: 1.25em; display: flex; flex-direction: column; gap: var(--card-gap); } .card--cta .card__header:has(.card__icon)::before { content: ""; display: block; width: 100%; height: 0.1rem; background: var(--stroke-color--light); } .card--cta .card__title { --title-size: 2rem; } .card--cta .card__icon { order: -1; align-self: flex-start; display: inline-block; font-size: 7.6rem; line-height: 1; } .card--cta .card__icon::before { background: linear-gradient(to right, var(--blue), var(--blue--dark) 180%); -webkit-background-clip: text; background-clip: text; color: transparent; } .information__item { padding-block: 2em; } .information__item:first-child { padding-block-start: 0; } .information__item + .information__item { border-block-start: 0.1rem solid var(--stroke-color--light); } .information__item:last-child { border-block-end: 0.1rem solid var(--stroke-color--light); } .information__item > * + .information__chart { margin-block-start: 3em; } .information__header { container-type: inline-size; } .information__title { --title-size: 4rem; } @container (inline-size > 20em ) { .information__title { --title-size: 5rem; } } @container (inline-size > 24.375em ) { .information__title { --title-size: 6rem; } } .information__subtitle { font-family: var(--text-font); color: var(--text-color--dark); line-height: var(--line-height); } .information__file { display: flex; align-items: baseline; gap: 1.5em; font-weight: 700; text-decoration: underline; text-underline-offset: 0.35em; text-decoration-thickness: 0.1rem; text-decoration-color: transparent; position: relative; transition: var(--transition-property, all) var(--transition-easing, ease) var(--transition-duration, 0.32s) var(--transition-delay, 0s); } @media (hover: hover) { .information__file:hover, .information__file:focus { text-decoration-color: var(--text-color); } } .information__file [class*=ri-] { --icon-color: var(--text-color--accent); order: -1; } .information__file::before { content: ""; display: block; position: absolute; inset: -2em 0; } .information__actions { margin-block-start: 0.5em; } @media screen and ( max-width: 63.9375em ) { .accordion__list { display: flex; flex-direction: column; row-gap: 2em; } } .accordion__item { --accordion-target: -1.5em; container-type: inline-size; display: flex; flex-direction: column; } @media screen and ( min-width: 64em ) { .accordion__item + .accordion__item--bordered { border-block-start: 0.1rem solid var(--stroke-color--deep); } } @media screen and ( max-width: 63.9375em ) { .accordion__item { background: var(--background-color--lighter); border-radius: var(--radius--md); padding-inline: 1.5em; } } .accordion__button { display: grid; grid-template-columns: 1fr auto; grid-template-rows: auto; align-items: center; -moz-column-gap: 1.5em; column-gap: 1.5em; padding-block: 2em; } @media screen and ( min-width: 64em ) { .accordion__button { padding-block: 2.5em; } } .accordion__button .ri-svg { --icon-color: var(--text-color--deep); font-size: 2.4rem; } .accordion__button .ri-svg path { fill: none; stroke: var(--icon-color); stroke-width: 0.1rem; } .accordion__title { --title-size: 1.8rem; line-height: 1.2; } @container (inline-size > 32.5em ) { .accordion__title { --title-size: 2rem; } } @container (inline-size > 48em ) { .accordion__title { --title-size: 2.4rem; } } .accordion__overflow > *:last-child { margin-block-end: 1.5em; } @keyframes marquee { 0% { translate: 0% 0%; } 100% { translate: -66.6666666667% 0%; } } .marquee { --marquee-speed: 15s; display: flex; flex-wrap: nowrap; padding-block-end: 1em; margin-block-end: -1em; width: 100vw; overflow: hidden; -webkit-user-select: none; -moz-user-select: none; user-select: none; position: relative; left: 50%; translate: -50% 0; } .marquee__scroller { display: flex; flex-wrap: nowrap; white-space: nowrap; font-size: max(8.75vw, 5rem); animation: marquee var(--marquee-speed, 15s) linear infinite; } .marquee__scroller::before, .marquee__scroller::after { content: attr(data-text); } .marquee__scroller span, .marquee__scroller::before, .marquee__scroller::after { padding-inline: 1em; } .marquee__scroller:not(.title--stroke, .title--gradient) span, .marquee__scroller:not(.title--stroke, .title--gradient)::before, .marquee__scroller:not(.title--stroke, .title--gradient)::after { color: var(--title-color); } .marquee--revert .marquee__scroller { animation-direction: reverse; } .marquee--slow { --marquee-speed: 17s; } .marquee--fast { --marquee-speed: 7s; } .pagination { display: flex; gap: 1em; align-items: center; justify-content: center; } @media screen and ( max-width: 39.9375em ) { .pagination { justify-content: space-between; } } @media screen and ( min-width: 40em ) { .pagination { gap: 3em; } } .pagination__list { display: flex; gap: 0.2rem; align-items: baseline; font-size: 1.8rem; } @media screen and ( max-width: 24.3125em ) { .pagination__list { font-size: 1.4rem; } } .pagination__item a { display: flex; width: 3.2rem; height: 3.2rem; align-items: center; justify-content: center; border-radius: 0.8rem; font-weight: 500; text-align: center; text-decoration: underline; text-underline-offset: 0.25em; text-decoration-thickness: 0.1rem; text-decoration-color: transparent; transition: var(--transition-property, all) var(--transition-easing, ease) var(--transition-duration, 0.32s) var(--transition-delay, 0s); } @media screen and ( max-width: 24.3125em ) { .pagination__item a { width: 2.4rem; height: 2.4rem; } } @media (hover: hover) { .pagination__item a:hover:not(.active), .pagination__item a:focus:not(.active) { text-decoration-color: currentColor; } } .pagination__item a.active { background: var(--background-color--medium); color: var(--text-color--bright); } .pagination__item span { margin-inline: 0.25em; } .pagination__button { --button-border: transparent; } .pagination__button.inactive { --button-color: oklch( from var(--button-secondary) .7 0 h ); cursor: default; } @media (hover: hover) { .pagination__button:hover:not(.inactive), .pagination__button:focus:not(.inactive) { --button-border: var(--button-primary); } } .slideshow { position: relative; } @media screen and ( max-width: 63.9375em ) { .slideshow { display: grid; grid-template-columns: 1fr; grid-template-rows: auto var(--radius--md) 1fr; align-items: start; } .slideshow > *, .slideshow::before { grid-column: 1/-1; } .slideshow::before { grid-row: 1/span 2; content: ""; display: block; width: 100%; aspect-ratio: var(--ratio--3x2); pointer-events: none; } } .slideshow__list { display: grid; align-items: center; } @media screen and ( max-width: 63.9375em ) { .slideshow__list { grid-row: 1/-1; align-items: start; } } .slideshow__item { grid-column: 1/-1; grid-row: 1/-1; } @media screen and ( min-width: 64em ) { .slideshow__item:nth-child(even) .slide__image { grid-column-start: 2; } .slideshow__item:nth-child(even) .slide__header { grid-column-start: 7; } } @media screen and ( max-width: 63.9375em ) { .slideshow__controls { grid-row: 1/span 2; align-self: center; height: 100%; position: relative; } } .slideshow__button { --grid-offset: var(--grid-edge); display: flex; align-items: center; justify-content: center; height: 100%; cursor: pointer; position: absolute; top: 50%; z-index: 4; translate: 0 -50%; } @media screen and ( min-width: 64em ) { .slideshow__button { background: var(--background-color--lighter); } } @media screen and ( min-width: 107.5em ) { .slideshow__button { border-radius: var(--radius--md) !important; } } .slideshow__button > * { pointer-events: none; } @media (hover: hover) { .slideshow__button:hover .ri-svg path, .slideshow__button:focus .ri-svg path { fill: var(--stroke-color--deep); } .slideshow__button:hover.slideshow__button--start .ri-svg, .slideshow__button:focus.slideshow__button--start .ri-svg { translate: -0.8rem 0; } .slideshow__button:hover.slideshow__button--end .ri-svg, .slideshow__button:focus.slideshow__button--end .ri-svg { translate: 0.8rem 0; } } .slideshow__button .ri-svg { font-size: 8rem; } @media screen and ( max-width: 63.9375em ) { .slideshow__button .ri-svg { font-size: 5rem; } } .slideshow__button .ri-svg path { fill: transparent; stroke: var(--stroke-color--deep); stroke-width: 0.1rem; vector-effect: non-scaling-stroke; transition: var(--transition-property, all) var(--transition-easing, ease) var(--transition-duration, 0.32s) var(--transition-delay, 0s); } .slideshow__button--start { left: calc(var(--grid-edge) * -1); border-radius: 0 var(--radius--md) var(--radius--md) 0; } .slideshow__button--start .ri-svg { rotate: 90deg; } @media screen and ( max-width: 63.9375em ) { .slideshow__button--start { padding-inline-start: 0.5em; justify-content: flex-start; left: 0; } } .slideshow__button--end { border-radius: var(--radius--md) 0 0 var(--radius--md); right: calc(var(--grid-edge) * -1); } .slideshow__button--end .ri-svg { rotate: -90deg; } @media screen and ( max-width: 63.9375em ) { .slideshow__button--end { padding-inline-end: 0.5em; justify-content: flex-end; right: 0; } } .slide { container-type: inline-size; grid-template-rows: auto calc(var(--radius--md) * 2) auto; align-items: center; } @media screen and ( min-width: 64em ) { .slide { grid-template-rows: calc(var(--radius--md) * 1.5) auto calc(var(--radius--md) * 1.5); } } .slide__header { grid-row: span 2/-1; align-self: stretch; justify-content: center; display: flex; flex-direction: column; gap: 0.75em; position: relative; } @media screen and ( max-width: 63.9375em ) { .slide__header { padding: 2.5em; padding-block-start: calc(var(--radius--md) * 2 + 1.25em); } } @media screen and ( min-width: 64em ) { .slide__header { grid-row: 2/span 1; z-index: 3; } } .slide__title { --title-size: 4rem; } .slide__overtitle { order: -1; margin-block-end: 0.25em; } .slide__actions { margin-block-start: 1.5em; } .slide__actions .button { transition-delay: 0s; } .slide__image { grid-row: 1/span 2; aspect-ratio: var(--ratio--3x2); width: 100%; padding: 0.5em; } @media screen and ( max-width: 63.9375em ) { .slide__image { position: relative; z-index: 3; } } @media screen and ( min-width: 64em ) { .slide__image { grid-row: 1/-1; height: 100%; } } .slide__image img { height: 100%; -o-object-fit: contain; object-fit: contain; } .footer { --text-color: var(--text-color--bright); --icon-color: var(--text-color--bright); --selection-color: var(--text-color--bright); --selection-background: oklch( from var(--blue--light) l c h / 50%); padding-block: 3em var(--grid-gap); padding-inline: 2em; } @media screen and ( min-width: 40em ) { .footer { padding-block: 2em var(--grid-gap); padding-inline: 5em; } } .footer { margin-block-start: var(--row-margin-block); font-size: 1.4rem; position: relative; z-index: 2; } .footer::before { content: ""; display: block; width: 100%; height: 100%; background: var(--background-color--gradient); border-start-start-radius: var(--radius--md); border-start-end-radius: var(--radius--md); position: absolute; top: 0; left: 50%; translate: -50% 0; z-index: -1; } .footer__logo { display: block; width: 9.8rem; } .footer__actions { margin-block-start: 3em; } @media screen and ( min-width: 40em ) { .footer__actions { display: none; } } .footer__actions .button { --button-background: var(--blue--light); --button-size: 4rem; padding-inline: 1em; } @media (hover: hover) { .footer__actions .button:hover, .footer__actions .button:focus { --button-background: var(--blue--dark); } } @media screen and ( max-width: 26.6875em ) { .footer__actions .button { font-size: 1.2rem; } } .footer__actions .dropdown__button { gap: 0.35em; } .footer__actions .dropdown__button [class*=ri-] { font-size: 1.25em; } .footer__actions .dropdown__button svg[class*=ri-] { width: 1.25em; } @media screen and ( max-width: 63.9375em ) { .footer__actions .dropdown__content { --text-color: var(--text-color--bright); --background-color--glass: oklch( from var(--black) l c h / 20%); } } @media screen and ( max-width: 26.6875em ) { .footer__actions .dropdown__content { font-size: 1.2rem; } } .footer__actions [class*=ri-] { font-size: 0.9em; } .footer__column { position: relative; } .footer__content { line-height: 1.75; } .footer__title { --title-size: 1.4rem; --selection-color: var(--text-color--bright); display: inline-block; padding-block-end: 1em; margin-block-end: 1em; position: relative; } .footer__title::after { content: ""; display: block; width: calc(100% + 1.5em); height: 0.1rem; background: currentColor; position: absolute; bottom: 0; left: 0; } .footer__legal { border-block-start: 0.1rem solid oklch(from white l c h/20%); padding-block-start: var(--grid-gap); justify-content: space-between; } .footer__legal .footer__list { display: flex; flex-wrap: wrap; gap: 1em; } @media screen and ( max-width: 47.9375em ) { .footer__legal .footer__list { flex-direction: column; } } @media screen and ( min-width: 64em ) { .footer__legal .footer__list { gap: 1.5em; justify-content: flex-end; } } .footer__legal a, .footer__legal button { --text-color: var(--title-color--light); cursor: pointer; transition: var(--transition-property, all) var(--transition-easing, ease) var(--transition-duration, 0.32s) var(--transition-delay, 0s); } @media (hover: hover) { .footer__legal a:hover, .footer__legal a:focus, .footer__legal button:hover, .footer__legal button:focus { --text-color: var(--text-color--bright); } } @media screen and ( max-width: 79.9375em ) { .footer__legal { font-size: 1.2rem; } } .dialog { transition: var(--transition-property, all) var(--transition-easing, ease) var(--transition-duration, 0.32s) var(--transition-delay, 0s); } @media screen and ( max-width: 39.9375em ) { .dialog { font-size: 1.4rem; } } .dialog p { max-width: 45em; } .dialog:not(.visible) { opacity: 0; pointer-events: none; } .dialog__title { --title-size: 2rem; } .dialog__buttons { display: flex; align-items: center; justify-content: space-between; gap: 1em; } @media screen and ( max-width: 39.9375em ) { .dialog__buttons { flex-direction: column; align-items: stretch; } .dialog__buttons .button { width: 100%; justify-content: center; } } @media screen and ( max-width: 39.9375em ) { .dialog__actions { width: 100%; flex-direction: column; align-items: stretch; } .dialog__actions .button { width: 100%; justify-content: center; } } .dialog__close { position: absolute; top: 1em; right: 1em; } .dialog__header { display: flex; flex-direction: column; gap: 0.75em; } .dialog__header > *:not(.dialog__buttons) { padding-inline-end: calc(4rem + 1em); } .dialog__list { display: flex; flex-direction: column; gap: 2.5em; padding-block-start: 2.5em; margin-block-start: 2.5em; border-block-start: 0.1rem solid var(--stroke-color); } .dialog__item { gap: var(--grid-gap); } .dialog__scroller { max-height: calc(100vh - var(--header-height) - var(--grid-gap)); padding: 1.5em; -webkit-mask-image: linear-gradient(to bottom, transparent, black 1.5em, black calc(100% - 2em), transparent); mask-image: linear-gradient(to bottom, transparent, black 1.5em, black calc(100% - 2em), transparent); overflow-y: scroll; -webkit-overflow-scrolling: touch; -ms-overflow-style: none; scrollbar-width: none; } @media screen and ( min-width: 40em ) { .dialog__scroller { padding: 2.5em; -webkit-mask-image: linear-gradient(to bottom, transparent, black 2.5em, black calc(100% - 3em), transparent); mask-image: linear-gradient(to bottom, transparent, black 2.5em, black calc(100% - 3em), transparent); } } .dialog--cookies { --grid-width: calc(100% - var(--grid-edge) * 2); position: fixed; bottom: var(--grid-gap); left: var(--grid-edge); z-index: var(--z-index-dialog); } @media screen and ( min-width: 107.5em ) { .dialog--cookies { --grid-width: 160rem; } } .apexcharts-text, .apexcharts-title-text, .apexcharts-legend-text { color: var(--text-color) !important; font-family: var(--text-font) !important; font-weight: 500; line-height: 1.5; } .apexcharts-tooltip { border: 0 !important; padding: 0.5em 1em; border-radius: var(--radius--xs); backdrop-filter: blur(0.3rem); box-shadow: 0 0 1.6rem 0 oklch(from black l c h/15%) !important; } .apexcharts-tooltip-title { padding: 0 !important; padding-block-end: 0.5em !important; border: 0 !important; border-block-end: 0.1rem solid var(--stroke-color--light) !important; background: none !important; font-size: 1.6rem !important; color: var(--title-color--deep) !important; font-family: var(--title-font) !important; font-weight: 600; line-height: 1.2; } .apexcharts-tooltip-series-group { padding: 0 !important; font-size: 1.6rem !important; } .apexcharts-toolbar { display: flex; gap: 0.25em; max-width: none !important; } .apexcharts-zoomin-icon, .apexcharts-zoomout-icon, .apexcharts-zoom-icon, .apexcharts-pan-icon, .apexcharts-reset-icon, .apexcharts-menu-icon { display: inline-flex; align-items: center; justify-content: center; flex: 0 0 32px !important; width: 32px !important; height: 32px !important; margin: 0 !important; transform: scale(1) !important; } @media (hover: hover) { .apexcharts-zoomin-icon:hover::before, .apexcharts-zoomin-icon:focus::before, .apexcharts-zoomout-icon:hover::before, .apexcharts-zoomout-icon:focus::before, .apexcharts-zoom-icon:hover::before, .apexcharts-zoom-icon:focus::before, .apexcharts-pan-icon:hover::before, .apexcharts-pan-icon:focus::before, .apexcharts-reset-icon:hover::before, .apexcharts-reset-icon:focus::before, .apexcharts-menu-icon:hover::before, .apexcharts-menu-icon:focus::before { --icon-color: var(--blue); } } .apexcharts-zoomin-icon::before, .apexcharts-zoomout-icon::before, .apexcharts-zoom-icon::before, .apexcharts-pan-icon::before, .apexcharts-reset-icon::before, .apexcharts-menu-icon::before { font-family: "remixicon" !important; font-style: normal; font-size: 1.25em; color: var(--icon-color); transition: var(--transition-property, all) var(--transition-easing, ease) var(--transition-duration, 0.32s) var(--transition-delay, 0s); } .apexcharts-zoomin-icon svg, .apexcharts-zoomout-icon svg, .apexcharts-zoom-icon svg, .apexcharts-pan-icon svg, .apexcharts-reset-icon svg, .apexcharts-menu-icon svg { display: none; } .apexcharts-zoomin-icon::before { content: "\ea11"; } .apexcharts-zoomout-icon::before { content: "\ee57"; } .apexcharts-zoom-icon::before { content: "\ed9c"; } .apexcharts-pan-icon::before { content: "\f444"; } .apexcharts-reset-icon::before { content: "\ee25"; } .apexcharts-menu-icon::before { content: "\ef3e"; } .apexcharts-selected { --icon-color: var(--blue); } .page--guidelines .block { max-width: 100%; } .page--guidelines .block--guidelines .block { margin-block-start: 1em; } .page--guidelines .block--guidelines .block + .block { margin-block-start: 5em; } .page--guidelines .block--guidelines > .block__header { margin-block-end: 1em; } .page--guidelines .js-accordion--guidelines { margin-block-start: 1em; } .page--guidelines .js-accordion--guidelines .js-accordion__button { --text-color: var(--grey); } .page--guidelines .js-accordion--guidelines .js-accordion__button i { display: flex; } .page--guidelines .js-accordion--guidelines.expand .js-accordion__button::after { content: attr(data-closed); } .page--guidelines .js-accordion--guidelines:not(.expand) .js-accordion__button::after { content: attr(data-opened); } .page--guidelines pre:has(.hljs) { border-radius: var(--radius--default); overflow: hidden; } .page--guidelines code.hljs { --selection-background: rgba(255, 255, 255, 0.15); padding: 1.5em 2em; border-radius: var(--radius--default); font-size: 1.4rem; } .page--guidelines code:not(.hljs) { display: inline-block; padding: 0.25em 0.5em; font-family: monospace; font-weight: bold; background: #ccc; border-radius: 0.8rem; font-size: 1.4rem; color: #555; } .page--guidelines * + code:not(.hljs) { margin-block-start: 0.5em; } .page--guidelines .row { --block-margin-block: 4em; } .page--guidelines .row > .block + .block { margin-block-start: var(--block-margin-block); } .page--guidelines .row > .block + .block:not(.block--contrasted) { border-block-start: 0.1rem dashed var(--stroke-color--light); padding-block-start: var(--block-margin-block); } .page--guidelines .row > .block__code { display: inline-block; padding-inline: 2em; margin-block-end: 1em; color: #333; font-size: 1.6rem; line-height: 1.5em; background: #ccc; border-radius: 0.5em; } .page--guidelines .row > .block__code pre { color: currentColor; } .page--guidelines .row > .block--icons { display: flex; flex-wrap: wrap; gap: 0.5em; } .page--guidelines .row > .block--icons li { display: inline-flex; align-items: center; justify-items: center; padding: 1em; aspect-ratio: 1/1; background: var(--background-color--light, #eee); border-radius: 0.8rem; position: relative; } .page--guidelines .row > .block--icons li * { pointer-events: none; } .page--guidelines .row > .block--icons li::after { content: attr(data-tooltip); padding: 0.25em 0.5em; border-radius: 0.4rem; background: var(--background-color--dark); opacity: 0; white-space: nowrap; color: var(--text-color--bright); pointer-events: none; position: absolute; top: 0; left: 50%; translate: -50% -100%; transition: var(--transition-property, all) var(--transition-easing, ease) var(--transition-duration, 0.32s) var(--transition-delay, 0s); } .page--guidelines .row > .block--icons li:hover::after { opacity: 1; } .page--guidelines .row > .block--icons i { font-size: 2em; } .header, .header::before, .header__nav, .header__actions, .header__logo, .header__button span, .header__button::before, .header__button::after { transition: var(--transition-property, all) var(--transition-easing, ease) var(--transition-duration, 0.32s) var(--transition-delay, 0s); } .header::before { translate: -50% 0; transform-origin: center top; } .header__actions { transform-origin: right bottom; } @media screen and ( max-width: 63.9375em ) { .js-header:not(.open) .header__nav { opacity: 0; pointer-events: none; } .js-header:not(.open) .header__button::after { opacity: 0; } .js-header:not(.open) .header__button span:nth-child(2) { opacity: 0; translate: 0 100%; } } .js-header.open { translate: -50% 0; } .js-header.open .js-header__button::after { opacity: 1; } .js-header.open .js-header__button span:nth-child(1) { opacity: 0; translate: 0 -100%; } .js-header.open .js-header__button span:nth-child(2) { opacity: 1; translate: 0 0; } .js-header.open .js-header__button .ri-menu { background: transparent; } .js-header.open .js-header__button .ri-menu::before { translate: 0 0; rotate: 45deg; } .js-header.open .js-header__button .ri-menu::after { translate: 0 0; rotate: 135deg; } body:where(.scrolled) .header { translate: -50% calc(var(--header-offset) * -1); } body:where(.scrolled) .header::before { translate: -50% 0; scale: 1 1.05; } body:where(.scrolled) .header__logo { scale: 0.75; } @media screen and ( min-width: 80em ) { body:where(.scrolled) .header__actions { scale: 0.7692307692; } } body:not(.scrolled) .header::before { translate: -50% -100%; } .js-accordion__content, .js-accordion__overflow, .js-accordion__button::before, .js-accordion__button::after { transition: var(--transition-property, all) var(--transition-easing, ease) var(--transition-duration, 0.32s) var(--transition-delay, 0s); } .js-accordion__button * { pointer-events: none; } .js-accordion__content { display: grid; } .js-accordion__content > * { grid-column: 1/-1; grid-row: 1/-1; } .js-accordion__content--split .js-accordion__overflow:nth-child(1) { grid-row: 2/span 1; } .js-accordion__content--split .js-accordion__overflow:nth-child(2) { grid-row: 3/span 1; } .js-accordion__overflow { width: 100%; overflow: hidden; } .js-accordion__button { cursor: pointer; } .js-accordion__button .icon, .js-accordion__button [class*=ri-] { pointer-events: none; } .js-accordion:not(.expand) > .js-accordion__content { grid-template-rows: var(--accordion-based-height, 0fr) 0fr; opacity: 0; pointer-events: none; } .js-accordion:not(.expand) > .js-accordion__content > .js-accordion__overflow { translate: 0 var(--accordion-offset, 2.4rem); opacity: 0; } .js-accordion:not(.expand) > .accordion__button .closed { transform: translate(0, 100%); opacity: 0; pointer-events: none; } .js-accordion.expand > .js-accordion__content { opacity: 1; grid-template-rows: var(--accordion-based-height, 0fr) 1fr; } .js-accordion.expand > .js-accordion__content > .js-accordion__overflow { translate: 0 var(--accordion-target, 0); } .js-accordion.expand > .accordion__button .opened { transform: translate(0, 100%); opacity: 0; pointer-events: none; } .js-accordion.expand > .dropdown__button [class*=ri-] { scale: -1; } .js-accordion.expand > .js-accordion__button .ri-svg { transform: scale(1, -1); } .js-select .select__button [class*=ri-], .js-select .select__wrapper { transition: var(--transition-property, all) var(--transition-easing, ease) var(--transition-duration, 0.32s) var(--transition-delay, 0s); } @media (pointer: coarse) { .js-select .select__wrapper { opacity: 0; pointer-events: none; translate: 0 1em; } .js-select .select__button [class*=ri-] { scale: 1 !important; } } .js-select:not(.open) .select__wrapper { opacity: 0; pointer-events: none; translate: 0 1em; } .js-select.open { z-index: 10; } .js-select.open .select__button [class*=ri-] { scale: -1; } .js-slideshow .slide__header, .js-slideshow .slide__image { transition: var(--transition-property, all) var(--transition-easing, ease) var(--transition-duration, 0.32s) var(--transition-delay, 0s); --transition-duration: .8s; } .js-slideshow .js-slideshow__item.active .slide__header { --transition-delay: calc( var(--transition-duration) * 0.75 ); clip-path: rect(0% 100% 100% 0% round var(--radius--md)); } .js-slideshow .js-slideshow__item.active .slide__image { --transition-delay: calc( var(--transition-duration) * 0.75 ); clip-path: rect(0% 100% 100% 0% round var(--radius--md)); } @media screen and ( min-width: 64em ) { .js-slideshow .js-slideshow__item.active:nth-child(even) .slide__header { --transition-delay: calc( var(--transition-duration) * 0.75 ); clip-path: rect(0% 100% 100% 0% round var(--radius--md)); } .js-slideshow .js-slideshow__item.active:nth-child(even) .slide__image { --transition-delay: calc( var(--transition-duration) * 0.75 ); clip-path: rect(0% 100% 100% 0% round var(--radius--md)); } } .js-slideshow .js-slideshow__item:not(.active) .slide__header { clip-path: rect(100% 100% 100% 0% round var(--radius--md)); opacity: 0; pointer-events: none; } .js-slideshow .js-slideshow__item:not(.active) .slide__image { clip-path: rect(0% 100% 0% 0% round var(--radius--md)); opacity: 0; pointer-events: none; } @media screen and ( min-width: 64em ) { .js-slideshow .js-slideshow__item:not(.active):nth-child(even) .slide__header { clip-path: rect(0% 100% 0% 0% round var(--radius--md)); opacity: 0; pointer-events: none; } .js-slideshow .js-slideshow__item:not(.active):nth-child(even) .slide__image { clip-path: rect(100% 100% 100% 0% round var(--radius--md)); opacity: 0; pointer-events: none; } }