@charset "UTF-8"; /*** The new CSS reset - version 1.7.3 (last updated 7.8.2022) 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 */ *: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; } /* Reapply the pointer cursor for anchor tags */ a, button { cursor: revert; -webkit-tap-highlight-color: transparent; } /* Remove list styles (bullets/numbers) */ ol, ul, menu { list-style: none; } /* For images to not be able to exceed their container */ img { max-width: 100%; } /* 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; } /* revert the 'white-space' property for textarea elements on Safari */ textarea { white-space: revert; overflow-wrap: break-word; word-wrap: break-word; } /* minimum style to allow to style meter element */ meter { -webkit-appearance: revert; -moz-appearance: revert; appearance: revert; } /* 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; } /* hide arrow in details on safari and ios */ ::-webkit-details-marker { display: none; } @font-face { font-family: "ginger-rosemary-icons"; src: url("../fonts/icons/ginger-rosemary-icons.ttf?u3v5ri") format("truetype"), url("../fonts/icons/ginger-rosemary-icons.woff?u3v5ri") format("woff"), url("../fonts/icons/ginger-rosemary-icons.svg?u3v5ri#ginger-rosemary-icons") format("svg"); font-weight: normal; font-style: normal; font-display: block; } :root { --grid-columns: 12; --grid-margin: 1.2rem; --grid-gap: 1.6rem; --grid-space: 2.8rem; --layout-max-width: 168rem; --columns: 12; --container-columns: 12; --minus-gap: 1; --cta-height: 4rem; --header-height: 5.6rem; --block-padding-block: 5.6rem; --radius--md: 1.2rem; --radius--default: 0.6rem; --radius--sm: 0.4rem; --white: #FFFCF9; --white--pure: #FFFFFF; --black: #1E1A18; --copper--bright: #F9F0E9; --copper--lighter: #E2C7BB; --copper--light: #D3A9A4; --copper--medium: #AE8779; --copper: #CA7F68; --copper--dark: #804634; --mint: #98C2A2; --aqua: #5EACCB; --bronze: #D9A064; --red: #EC4949; --yellow: #FACC15; --title-font: kepler-std, sans-serif; --text-font: futura-pt, sans-serif; --text-color: var(--black); --text-color--bright: var(--white); --text-color--accent: var(--copper); --text-color--accent-dark: var(--copper--dark); --text-color--accent-light: var(--copper--light); --title-color: var(--copper--dark); --title-color--accent: var(--copper); --title-color--accent-medium: var(--copper--medium); --title-color--dark: var(--copper--dark); --title-color--bright: var(--white); --stroke-color: var(--copper); --stroke-color--light: var(--copper--light); --stroke-color--lighter: var(--copper--lighter); --stroke-color--medium: var(--copper); --stroke-color--dark: var(--copper--dark); --background-color: var(--white); --background-color--dark: var(--copper--dark); --background-color--medium: var(--copper); --background-color--light: var(--copper--light); --background-color--lighter: var(--copper--bright); --background-color--bright: var(--white); --error: var(--red); --success: var(--mint); --row-background: var(--background-color); --form-color: var(--text-color--accent-dark); --form-border-color: var(--stroke-color); --form-background: var(--background-color); --form-background-hover: var(--background-color--lighter); --form-radius: var(--radius--default); --form-shadow: transparent; --form-required: var(--text-color); --button-primary: var(--copper); --button-secondary: var(--copper--bright); --button-ternary: var(--copper--dark); --transition-easing: cubic-bezier(0.71, 0.19, 0.24, 1); --transition-easing--in-out: cubic-bezier(0.4, 0, 0.1, 1); --transition-duration: 0.32s; --transition: all 0.32s cubic-bezier(0.71, 0.19, 0.24, 1); --dy: calc( 100vh - var(--header-height) * 0.5 ); --dy: calc( 100dvh - var(--header-height) * 0.5 ); --z-index-header: 50; --z-index-header-button: 100; --z-index-header-logo: 150; --z-index-dialog: 200; } @media screen and ( min-width: 48em ) { :root { --header-height: 7.2rem; --grid-gap: 2.4rem; --grid-margin: 4.8rem; --grid-space: 7.2rem; --block-padding-block: 6.4rem; --dy: calc( var(--header-height) * 0.5 ); } } @media screen and ( min-width: 64em ) { :root { --grid-gap: 2.4rem; --grid-margin: 5.6rem; --grid-space: 8rem; --block-padding-block: 9.6rem; } } @media screen and ( min-width: 80em ) { :root { --grid-gap: 3.2rem; --grid-margin: 6.4rem; --grid-space: 9.6rem; } } @media screen and ( min-width: 90em ) { :root { --grid-gap: 4rem; --grid-margin: 8rem; --grid-space: 12rem; } } html, body { font-family: "futura-pt", sans-serif; font-size: 62.5%; font-weight: 400; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; } .main-wrapper { font-size: 1.8rem; line-height: 2.4rem; } * { color: var(--text-color); } em { font-style: italic; } strong { font-weight: 500; } html, body { background: var(--background-color); color: var(--text-color); } ::-moz-selection { color: var(--selection-color, var(--copper)); background: var(--selection-background, var(--copper--bright)); } ::selection { color: var(--selection-color, var(--copper)); background: var(--selection-background, var(--copper--bright)); } .title mark::-moz-selection, .accordion__rte h1 mark::-moz-selection, .block--rte h1 mark::-moz-selection, .block__rte h1 mark::-moz-selection, .dialog__rte h1 mark::-moz-selection, .accordion__rte h2 mark::-moz-selection, .block--rte h2 mark::-moz-selection, .block__rte h2 mark::-moz-selection, .dialog__rte h2 mark::-moz-selection, .accordion__rte h3 mark::-moz-selection, .block--rte h3 mark::-moz-selection, .block__rte h3 mark::-moz-selection, .dialog__rte h3 mark::-moz-selection, .accordion__rte h4 mark::-moz-selection, .block--rte h4 mark::-moz-selection, .block__rte h4 mark::-moz-selection, .dialog__rte h4 mark::-moz-selection, .accordion__rte h5 mark::-moz-selection, .block--rte h5 mark::-moz-selection, .block__rte h5 mark::-moz-selection, .dialog__rte h5 mark::-moz-selection, .accordion__rte h6 mark::-moz-selection, .block--rte h6 mark::-moz-selection, .block__rte h6 mark::-moz-selection, .dialog__rte h6 mark::-moz-selection { --selection-color: var(--copper--dark); } .title mark::selection, .accordion__rte h1 mark::selection, .block--rte h1 mark::selection, .block__rte h1 mark::selection, .dialog__rte h1 mark::selection, .accordion__rte h2 mark::selection, .block--rte h2 mark::selection, .block__rte h2 mark::selection, .dialog__rte h2 mark::selection, .accordion__rte h3 mark::selection, .block--rte h3 mark::selection, .block__rte h3 mark::selection, .dialog__rte h3 mark::selection, .accordion__rte h4 mark::selection, .block--rte h4 mark::selection, .block__rte h4 mark::selection, .dialog__rte h4 mark::selection, .accordion__rte h5 mark::selection, .block--rte h5 mark::selection, .block__rte h5 mark::selection, .dialog__rte h5 mark::selection, .accordion__rte h6 mark::selection, .block--rte h6 mark::selection, .block__rte h6 mark::selection, .dialog__rte h6 mark::selection { --selection-color: var(--copper--dark); } .footer, .row--copper, .hero { --title-color: var(--title-color--bright); --title-color--accent: var(--title-color--dark); --text-color: var(--text-color--bright); } .flex { display: flex; flex-wrap: wrap; align-content: flex-start; } .flex--row { gap: 1.6rem var(--grid-gap); } .flex--row > *:not([class*=col-]) { flex: 0 0 100%; } .flex > [class*=col-]:not(.col-auto, .col-grow) { flex: 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: 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 .col-auto { flex: 0 0 auto; max-width: 100%; } .flex .col-full { flex: 0 0 100%; } .flex--v-center { align-items: center; } .flex--h-center { justify-content: center; } .flex--h-end { justify-content: flex-end; } .flex--v-end { align-items: flex-end; } .flex--h-reverse { flex-direction: row-reverse; } .flex > .first { order: -1; } .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:not(.main-content) > *: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-left: 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-6 { --column-size: 6; } .col-6 > *, .col-6::before, .col-6::after { --container-columns: 6; } .col-6.grid { --grid-columns: 6; } .col-12 { --column-size: 12; } .col-12 > *, .col-12::before, .col-12::after { --container-columns: 12; } .col-12.grid { --grid-columns: 12; } @media screen and ( min-width: 40em ) { .col-6--xs-mid { --column-size: 6; } .col-6--xs-mid > *, .col-6--xs-mid::before, .col-6--xs-mid::after { --container-columns: 6; } .col-6--xs-mid.grid { --grid-columns: 6; } } @media screen and ( min-width: 48em ) { .col-4--sm { --column-size: 4; } .col-4--sm > *, .col-4--sm::before, .col-4--sm::after { --container-columns: 4; } .col-4--sm.grid { --grid-columns: 4; } .col-5--sm { --column-size: 5; } .col-5--sm > *, .col-5--sm::before, .col-5--sm::after { --container-columns: 5; } .col-5--sm.grid { --grid-columns: 5; } .col-6--sm { --column-size: 6; } .col-6--sm > *, .col-6--sm::before, .col-6--sm::after { --container-columns: 6; } .col-6--sm.grid { --grid-columns: 6; } .col-8--sm { --column-size: 8; } .col-8--sm > *, .col-8--sm::before, .col-8--sm::after { --container-columns: 8; } .col-8--sm.grid { --grid-columns: 8; } .col-10--sm { --column-size: 10; } .col-10--sm > *, .col-10--sm::before, .col-10--sm::after { --container-columns: 10; } .col-10--sm.grid { --grid-columns: 10; } .ml-1--sm { --offset-left-size: 1; } } @media screen and ( min-width: 64em ) { .col-2--md { --column-size: 2; } .col-2--md > *, .col-2--md::before, .col-2--md::after { --container-columns: 2; } .col-2--md.grid { --grid-columns: 2; } .col-3--md { --column-size: 3; } .col-3--md > *, .col-3--md::before, .col-3--md::after { --container-columns: 3; } .col-3--md.grid { --grid-columns: 3; } .col-4--md { --column-size: 4; } .col-4--md > *, .col-4--md::before, .col-4--md::after { --container-columns: 4; } .col-4--md.grid { --grid-columns: 4; } .col-5--md { --column-size: 5; } .col-5--md > *, .col-5--md::before, .col-5--md::after { --container-columns: 5; } .col-5--md.grid { --grid-columns: 5; } .col-6--md { --column-size: 6; } .col-6--md > *, .col-6--md::before, .col-6--md::after { --container-columns: 6; } .col-6--md.grid { --grid-columns: 6; } .col-7--md { --column-size: 7; } .col-7--md > *, .col-7--md::before, .col-7--md::after { --container-columns: 7; } .col-7--md.grid { --grid-columns: 7; } .col-8--md { --column-size: 8; } .col-8--md > *, .col-8--md::before, .col-8--md::after { --container-columns: 8; } .col-8--md.grid { --grid-columns: 8; } .col-10--md { --column-size: 10; } .col-10--md > *, .col-10--md::before, .col-10--md::after { --container-columns: 10; } .col-10--md.grid { --grid-columns: 10; } .ml-1--md { --offset-left-size: 1; } .ml-2--md { --offset-left-size: 2; } } @media screen and ( min-width: 80em ) { .col-3--md-mid { --column-size: 3; } .col-3--md-mid > *, .col-3--md-mid::before, .col-3--md-mid::after { --container-columns: 3; } .col-3--md-mid.grid { --grid-columns: 3; } .col-4--md-mid { --column-size: 4; } .col-4--md-mid > *, .col-4--md-mid::before, .col-4--md-mid::after { --container-columns: 4; } .col-4--md-mid.grid { --grid-columns: 4; } .col-6--md-mid { --column-size: 6; } .col-6--md-mid > *, .col-6--md-mid::before, .col-6--md-mid::after { --container-columns: 6; } .col-6--md-mid.grid { --grid-columns: 6; } .col-8--md-mid { --column-size: 8; } .col-8--md-mid > *, .col-8--md-mid::before, .col-8--md-mid::after { --container-columns: 8; } .col-8--md-mid.grid { --grid-columns: 8; } .col-9--md-mid { --column-size: 9; } .col-9--md-mid > *, .col-9--md-mid::before, .col-9--md-mid::after { --container-columns: 9; } .col-9--md-mid.grid { --grid-columns: 9; } .col-10--md-mid { --column-size: 10; } .col-10--md-mid > *, .col-10--md-mid::before, .col-10--md-mid::after { --container-columns: 10; } .col-10--md-mid.grid { --grid-columns: 10; } .ml-1--md-mid { --offset-left-size: 1; } .ml-2--md-mid { --offset-left-size: 2; } .ml-3--md-mid { --offset-left-size: 3; } } html { background: var(--background-color--medium); } html, body { overflow-x: hidden; } .main-wrapper { display: grid; grid-template-columns: 1fr; grid-template-rows: auto 1fr auto; grid-template-areas: "header" "content" "footer"; max-width: 100vw; max-width: 100dvw; min-height: 100vh; min-height: 100dvh; } .header { -ms-grid-row: 1; -ms-grid-column: 1; grid-area: header; max-width: 100vw; max-width: 100dvw; } .main-content { -ms-grid-row: 2; -ms-grid-column: 1; grid-area: content; } .main-content, .main-content__wrapper { display: grid; grid-template-columns: var(--grid-space) minmax(0, 1fr) var(--grid-space); align-content: start; max-width: var(--layout-max-width); width: 100%; gap: 0; margin: 0 auto; position: relative; } .main-content > *, .main-content__wrapper > * { grid-column: 2/span 1; } .main-content__wrapper { grid-column: 1/-1; } .footer { -ms-grid-row: 3; -ms-grid-column: 1; grid-area: footer; padding: 0 calc(var(--grid-gap) + var(--grid-margin)); width: 100%; max-width: var(--layout-max-width); margin: 0 auto; } img { display: block; -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; transform: translate(0, 0.1rem); } .title, .accordion__rte h1, .block--rte h1, .block__rte h1, .dialog__rte h1, .accordion__rte h2, .block--rte h2, .block__rte h2, .dialog__rte h2, .accordion__rte h3, .block--rte h3, .block__rte h3, .dialog__rte h3, .accordion__rte h4, .block--rte h4, .block__rte h4, .dialog__rte h4, .accordion__rte h5, .block--rte h5, .block__rte h5, .dialog__rte h5, .accordion__rte h6, .block--rte h6, .block__rte h6, .dialog__rte h6 { font-family: var(--text-font); font-weight: 500; line-height: 1em; color: var(--title-color); } @media screen and ( min-width: 48em ) { .title, .accordion__rte h1, .block--rte h1, .block__rte h1, .dialog__rte h1, .accordion__rte h2, .block--rte h2, .block__rte h2, .dialog__rte h2, .accordion__rte h3, .block--rte h3, .block__rte h3, .dialog__rte h3, .accordion__rte h4, .block--rte h4, .block__rte h4, .dialog__rte h4, .accordion__rte h5, .block--rte h5, .block__rte h5, .dialog__rte h5, .accordion__rte h6, .block--rte h6, .block__rte h6, .dialog__rte h6 { line-height: 1.25em; } } .title mark, .accordion__rte h1 mark, .block--rte h1 mark, .block__rte h1 mark, .dialog__rte h1 mark, .accordion__rte h2 mark, .block--rte h2 mark, .block__rte h2 mark, .dialog__rte h2 mark, .accordion__rte h3 mark, .block--rte h3 mark, .block__rte h3 mark, .dialog__rte h3 mark, .accordion__rte h4 mark, .block--rte h4 mark, .block__rte h4 mark, .dialog__rte h4 mark, .accordion__rte h5 mark, .block--rte h5 mark, .block__rte h5 mark, .dialog__rte h5 mark, .accordion__rte h6 mark, .block--rte h6 mark, .block__rte h6 mark, .dialog__rte h6 mark { display: inline-block; color: var(--title-color--accent); } .title span, .accordion__rte h1 span, .block--rte h1 span, .block__rte h1 span, .dialog__rte h1 span, .accordion__rte h2 span, .block--rte h2 span, .block__rte h2 span, .dialog__rte h2 span, .accordion__rte h3 span, .block--rte h3 span, .block__rte h3 span, .dialog__rte h3 span, .accordion__rte h4 span, .block--rte h4 span, .block__rte h4 span, .dialog__rte h4 span, .accordion__rte h5 span, .block--rte h5 span, .block__rte h5 span, .dialog__rte h5 span, .accordion__rte h6 span, .block--rte h6 span, .block__rte h6 span, .dialog__rte h6 span { color: var(--title-color); display: inline-block; } .title em, .accordion__rte h1 em, .block--rte h1 em, .block__rte h1 em, .dialog__rte h1 em, .accordion__rte h2 em, .block--rte h2 em, .block__rte h2 em, .dialog__rte h2 em, .accordion__rte h3 em, .block--rte h3 em, .block__rte h3 em, .dialog__rte h3 em, .accordion__rte h4 em, .block--rte h4 em, .block__rte h4 em, .dialog__rte h4 em, .accordion__rte h5 em, .block--rte h5 em, .block__rte h5 em, .dialog__rte h5 em, .accordion__rte h6 em, .block--rte h6 em, .block__rte h6 em, .dialog__rte h6 em { font-family: var(--title-font); color: currentColor; } .title--accent { --title-color: var(--title-color--accent); } .title--accent mark { color: var(--title-color--dark); } .title--center { text-align: center; } .title--thin { font-weight: 400; } .title + *:not(.form__field), .accordion__rte h1 + *:not(.form__field), .block--rte h1 + *:not(.form__field), .block__rte h1 + *:not(.form__field), .dialog__rte h1 + *:not(.form__field), .accordion__rte h2 + *:not(.form__field), .block--rte h2 + *:not(.form__field), .block__rte h2 + *:not(.form__field), .dialog__rte h2 + *:not(.form__field), .accordion__rte h3 + *:not(.form__field), .block--rte h3 + *:not(.form__field), .block__rte h3 + *:not(.form__field), .dialog__rte h3 + *:not(.form__field), .accordion__rte h4 + *:not(.form__field), .block--rte h4 + *:not(.form__field), .block__rte h4 + *:not(.form__field), .dialog__rte h4 + *:not(.form__field), .accordion__rte h5 + *:not(.form__field), .block--rte h5 + *:not(.form__field), .block__rte h5 + *:not(.form__field), .dialog__rte h5 + *:not(.form__field), .accordion__rte h6 + *:not(.form__field), .block--rte h6 + *:not(.form__field), .block__rte h6 + *:not(.form__field), .dialog__rte h6 + *:not(.form__field) { -webkit-margin-before: 1em; margin-block-start: 1em; } .title + :is(.block__list, .block__rte), .accordion__rte h1 + :is(.block__list, .block__rte), .block--rte h1 + :is(.block__list, .block__rte), .block__rte h1 + :is(.block__list, .block__rte), .dialog__rte h1 + :is(.block__list, .block__rte), .accordion__rte h2 + :is(.block__list, .block__rte), .block--rte h2 + :is(.block__list, .block__rte), .block__rte h2 + :is(.block__list, .block__rte), .dialog__rte h2 + :is(.block__list, .block__rte), .accordion__rte h3 + :is(.block__list, .block__rte), .block--rte h3 + :is(.block__list, .block__rte), .block__rte h3 + :is(.block__list, .block__rte), .dialog__rte h3 + :is(.block__list, .block__rte), .accordion__rte h4 + :is(.block__list, .block__rte), .block--rte h4 + :is(.block__list, .block__rte), .block__rte h4 + :is(.block__list, .block__rte), .dialog__rte h4 + :is(.block__list, .block__rte), .accordion__rte h5 + :is(.block__list, .block__rte), .block--rte h5 + :is(.block__list, .block__rte), .block__rte h5 + :is(.block__list, .block__rte), .dialog__rte h5 + :is(.block__list, .block__rte), .accordion__rte h6 + :is(.block__list, .block__rte), .block--rte h6 + :is(.block__list, .block__rte), .block__rte h6 + :is(.block__list, .block__rte), .dialog__rte h6 + :is(.block__list, .block__rte) { -webkit-margin-before: 0.5em; margin-block-start: 0.5em; } .title--xxl { font-size: 5.6rem; } .title--xl { font-size: 5.6rem; } .title--lg, .accordion__rte h1, .block--rte h1, .block__rte h1, .dialog__rte h1 { font-size: 5.6rem; } .title--md, .accordion__rte h2, .block--rte h2, .block__rte h2, .dialog__rte h2 { font-size: 2.1rem; } .title--sm, .accordion__rte h3, .block--rte h3, .block__rte h3, .dialog__rte h3 { font-size: 1.8rem; } .title--xs, .accordion__rte h4, .block--rte h4, .block__rte h4, .dialog__rte h4, .title--xxs, .accordion__rte h5, .block--rte h5, .block__rte h5, .dialog__rte h5 { font-size: 1.8rem; } .title--serif { font-family: var(--title-font); } @media screen and ( max-width: 24.3125em ) { .title--xxl { font-size: 4.8rem; } .title--xl { font-size: 4.8rem; } .title--lg, .accordion__rte h1, .block--rte h1, .block__rte h1, .dialog__rte h1 { font-size: 4.8rem; } } @media screen and ( min-width: 48em ) { .title--xxl { font-size: 6.4rem; } .title--md, .accordion__rte h2, .block--rte h2, .block__rte h2, .dialog__rte h2 { font-size: 2.4rem; } .title--sm, .accordion__rte h3, .block--rte h3, .block__rte h3, .dialog__rte h3 { font-size: 2.1rem; } .title--xs, .accordion__rte h4, .block--rte h4, .block__rte h4, .dialog__rte h4 { font-size: 1.8rem; } } @media screen and ( min-width: 64em ) { .title--xxl { font-size: 8rem; } } @media screen and ( min-width: 80em ) { .title--xxl { font-size: 8.8rem; } .title--xl { font-size: 7.2rem; } .title--lg, .accordion__rte h1, .block--rte h1, .block__rte h1, .dialog__rte h1 { font-size: 6.4rem; } .title--md, .accordion__rte h2, .block--rte h2, .block__rte h2, .dialog__rte h2 { font-size: 5.6rem; } .title--sm, .accordion__rte h3, .block--rte h3, .block__rte h3, .dialog__rte h3 { font-size: 4rem; } .title--xs, .accordion__rte h4, .block--rte h4, .block__rte h4, .dialog__rte h4 { font-size: 3.2rem; } .title--xxs, .accordion__rte h5, .block--rte h5, .block__rte h5, .dialog__rte h5 { font-size: 2.4rem; } } @media screen and ( min-width: 90em ) { .title--xxl { font-size: 9.6rem; } .title--xl { font-size: 8.8rem; } .title--lg, .accordion__rte h1, .block--rte h1, .block__rte h1, .dialog__rte h1 { font-size: 8rem; } .title--md, .accordion__rte h2, .block--rte h2, .block__rte h2, .dialog__rte h2 { font-size: 6.4rem; } .title--sm, .accordion__rte h3, .block--rte h3, .block__rte h3, .dialog__rte h3 { font-size: 5.6rem; } .title--xs, .accordion__rte h4, .block--rte h4, .block__rte h4, .dialog__rte h4 { font-size: 3.2rem; } } .button { --button-background: var(--button-primary); --button-hover: var(--button-ternary); --button-color: var(--button-secondary); --button-border-color: var(--button-primary); display: inline-flex; align-items: center; justify-content: space-between; min-height: 5.6rem; padding: 1.2rem 2.4rem; border: 0.2rem solid var(--button-border-color); cursor: pointer; overflow: hidden; -webkit-user-select: none; -moz-user-select: none; user-select: none; color: var(--button-color); font-size: 1.8rem; font-weight: 500; line-height: 1.5em; position: relative; z-index: 2; transition: var(--transition); transition-property: color, border; } @media screen and ( min-width: 96em ) { .button { font-size: 2rem; } } .button > span:not(.button__count) { color: var(--button-color); transition: all var(--transition-duration) var(--transition-easing); } @media screen and ( max-width: 47.9375em ) { .button > span:not(.button__count) { display: none; } } .button .icon::before, .button .icon::after { color: var(--button-color); transition: var(--transition); } .button::before, .button::after { content: ""; display: block; width: calc(100% + 0.4rem); height: calc(100% + 0.4rem); background: var(--button-background); pointer-events: none; position: absolute; top: 50%; left: 50%; z-index: -1; transform: translate(-50%, -50%); transition: var(--transition); } .button::after { background: transparent; border: 0.6rem solid var(--row-background, var(--background-color)); transform: translate(-50%, -50%) scale(1.02, 1.1); opacity: 0; } .button:hover::after { opacity: 1; transform: translate(-50%, -50%) scale(1); } .button--secondary { --button-background: var(--copper--dark); --button-color: var(--copper--bright); --button-border-color: var(--copper--dark); } .button--ternary { --button-background: var(--copper--bright); --button-color: var(--copper); --button-border-color: var(--copper--bright); } .button--ternary:hover { --button-border-color: var(--copper--lighter); } .button--neutral { --button-background: transparent; --button-color: var(--copper); --button-border-color: transparent; } .button--neutral:hover { --button-border-color: var(--button-color); } .button--outline { --button-background: transparent; --button-color: var(--button-primary); } .button--outline:hover { --button-background: var(--button-primary); --button-color: var(--button-secondary); } .button--disabled { --button-background: var(--copper--lighter); --button-color: var(--copper); --button-border-color: var(--copper--lighter); pointer-events: none; } .button--wide { padding-inline: 3.2rem; } .button--icon { gap: 2.4rem; } .button--icon .icon { --icon-color: var(--button-color); font-size: 1.8rem; } .button--reverse { flex-direction: row-reverse; } .button__count { min-width: 3.2rem; padding-inline: 0.5em; text-align: center; color: var(--button-background); position: relative; z-index: 2; } .button__count::before { content: ""; display: block; height: 3.2rem; width: 100%; background: var(--button-color); border-radius: 100rem; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); z-index: -1; } .button__count::after { content: attr(data-count); } .button-inline { font-size: 1.8rem; font-weight: 500; text-decoration: underline; text-underline-offset: 0.1em; text-decoration-thickness: 0.1rem; color: var(--text-color--accent-dark); cursor: pointer; transition: all var(--transition-duration) var(--transition-easing); } @media screen and ( min-width: 96em ) { .button-inline { font-size: 2rem; } } @media (hover: hover) { .button-inline:hover { text-underline-offset: 0.2em; } } .button__wrapper .button { width: 100%; } .icon { --icon-color: currentColor; display: inline-grid; align-content: center; justify-content: center; font-family: "ginger-rosemary-icons" !important; speak: never; font-style: normal; font-weight: normal; font-variant: normal; text-transform: none; line-height: 1; color: var(--icon-color); -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; position: relative; z-index: 2; } .icon::before, .icon::after { width: 1em; height: 1em; aspect-ratio: 1/1; grid-column: 1/-1; grid-row: 1/-1; align-self: center; justify-self: center; } .icon--home:before { content: "\e919"; } .icon--cheese-s:before { content: "\e914"; } .icon--cookie-s:before { content: "\e915"; } .icon--jar-s:before { content: "\e916"; } .icon--mug-hot-s:before { content: "\e917"; } .icon--stroopwafel-s:before { content: "\e918"; } .icon--hashtag:before { content: "\e913"; } .icon--angle-left-s:before { content: "\e907"; } .icon--angle-right-s:before { content: "\e908"; } .icon--calendar-l:before { content: "\e909"; } .icon--cash-register:before { content: "\e90a"; } .icon--receipt:before { content: "\e90b"; } .icon--shopping-cart:before { content: "\e90c"; } .icon--star:before { content: "\e90d"; } .icon--star-s:before { content: "\e90e"; } .icon--user:before { content: "\e90f"; } .icon--weight-hanging:before { content: "\e910"; } .icon--arrow-left-s:before { content: "\e911"; } .icon--arrow-right-s:before { content: "\e912"; } .icon--alert:before { content: "\e906"; } .icon--calendar:before { content: "\e900"; } .icon--facebook:before { content: "\e901"; } .icon--instagram:before { content: "\e902"; } .icon--mail:before { content: "\e903"; } .icon--warning:before { content: "\e904"; } .icon--circle-check:before { content: "\e905"; } .icon--circle-arrow-bottom::before, .icon--arrow-top::before, .icon--arrow-bottom::before { content: ""; display: block; width: 0.5em; height: 0.5em; border: 0.0833333333em solid currentColor; border-left: 0; border-top: 0; transform: translate(0, -25%) rotate(45deg); } .icon--arrow-top::before { transform: translate(0, 25%) rotate(-135deg); } .icon--circle-arrow-bottom::before { width: 0.45em; height: 0.45em; } .icon--circle-arrow-bottom::after { content: ""; display: block; width: 1.2em; height: 1.2em; border: 0.0833333333em solid currentColor; border-radius: 100rem; } .icon--check::before { content: ""; display: block; width: 1em; height: 0.5em; border: 0.2rem solid currentColor; border-top: 0; border-right: 0; transform: translate(0, -50%) rotate(-45deg); } .icon--accordion { aspect-ratio: 1/1; width: 1em; } .icon--accordion::before, .icon--accordion::after { content: ""; display: block; width: 0.75em; height: 0.0833333333em; background: var(--icon-color); } .icon--cross { width: 1em; } .icon--cross::before, .icon--cross::after { --rotate: 45deg; content: ""; display: block; width: 0.75em; height: 0.0833333333em; background: var(--icon-color); transform: rotate(var(--rotate)); } .icon--cross::after { --rotate: -45deg; } input, button, select, label { -webkit-appearance: none; -moz-appearance: none; appearance: none; } input[type=number]::-webkit-outer-spin-button, input[type=number]::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; } .form__field--default, .form__field--select, .form__field--datepicker { display: grid; grid-template-columns: 1fr auto; grid-template-rows: auto auto auto; grid-template-areas: "label label" "input icon" "message message"; position: relative; } .form__field--default .form__label, .form__field--select .form__label, .form__field--datepicker .form__label { -webkit-margin-after: 0.4rem; margin-block-end: 0.4rem; } .form__field--default .icon, .form__field--select .icon, .form__field--datepicker .icon { -ms-grid-row: 2; -ms-grid-column: 2; --icon-color: var(--text-color--accent); grid-area: icon; font-size: 2.4rem; min-width: 5.6rem; pointer-events: none; position: relative; z-index: 5; } .form__field--default:has(> .icon) .form__input, .form__field--default:has(> .icon) .form__select-button, .form__field--default:has(> .icon) .form__select-button, .form__field--select:has(> .icon) .form__input, .form__field--select:has(> .icon) .form__select-button, .form__field--select:has(> .icon) .form__select-button, .form__field--datepicker:has(> .icon) .form__input, .form__field--datepicker:has(> .icon) .form__select-button, .form__field--datepicker:has(> .icon) .form__select-button { -webkit-padding-end: 5.6rem; padding-inline-end: 5.6rem; } .form__field--datepicker { position: relative; z-index: 3; } .form__field--datepicker .form__input, .form__field--datepicker .form__select-button { cursor: pointer; } .form__field--select { position: relative; z-index: 2; } .form__field--checkbox { display: grid; grid-template-columns: auto 1fr; grid-template-rows: auto auto auto; grid-template-areas: "checkmark label" "space information" "alert alert"; align-items: center; gap: 0 2.4rem; } .form__field--checkbox .form__label { font-size: 2rem; line-height: 1.2em; } .form__field--checkbox .form__label--sm { font-size: 1.8rem; } .form__field--choice { display: grid; grid-template-columns: 1fr; grid-template-rows: 1fr; grid-template-areas: "input"; } .form__field--choice > * { -ms-grid-row: 1; -ms-grid-column: 1; grid-area: input !important; } .form__field + .form__field--submit { -webkit-margin-before: 2.4rem; margin-block-start: 2.4rem; } .form__flow { display: flex; flex-wrap: wrap; gap: 2.4rem 1.6rem; } .form__flow > * { flex: 1; min-width: 20rem; } .form__flow .col-narrow { min-width: 15rem; } .form__flow .form__text { flex: 0 0 100%; } .form__wrapper { align-items: start; } .form__wrapper--accordion { grid-template-rows: auto auto auto auto; align-items: center; position: relative; z-index: 2; } @media screen and ( min-width: 64em ) { .form__wrapper--accordion { grid-template-rows: auto auto auto; } } .form__wrapper--accordion::before { content: ""; display: block; width: calc(100% + var(--grid-space) * 2); height: calc(100% + var(--grid-space) * 2); background: var(--background-color--bright); position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); z-index: -1; } @media screen and ( min-width: 48em ) { .form__wrapper--accordion::before { display: none; width: calc(100% + var(--grid-gap) * 2); height: calc(100% + var(--grid-gap) * 2); } } .form__wrapper--accordion .form__title { grid-row: 1/span 1; } @media screen and ( max-width: 63.9375em ) { .form__wrapper--accordion .form__title { text-align: center; } } .form__wrapper--accordion .form__text { grid-row: 2/span 1; } @media screen and ( max-width: 63.9375em ) { .form__wrapper--accordion .form__text { text-align: center; } } .form__wrapper--accordion .form__accordion__switch { justify-self: center; grid-row: 3/span 1; } @media screen and ( max-width: 63.9375em ) { .form__wrapper--accordion .form__accordion__switch { -webkit-margin-before: 1em; margin-block-start: 1em; } } @media screen and ( min-width: 64em ) { .form__wrapper--accordion .form__accordion__switch { justify-self: end; grid-row: 1/span 2; } } .form__wrapper--accordion .form__accordion { grid-row: span 1/-1; } .form__wrapper--submit.flex--h-center { text-align: center; } .form__wrapper--submit * + .button { -webkit-margin-before: 1em; margin-block-start: 1em; } .form__input, .form__select-button { grid-column: input/icon; grid-row: input; min-height: 5.6rem; padding: 1.2rem 2rem; border: 0.1rem solid var(--form-border-color); background: var(--form-background); font-size: 2rem; line-height: 1.5em; color: var(--text-color--accent-dark); transition: var(--transition); } @media screen and ( min-width: 64em ) { .form__input, .form__select-button { font-size: 1.8rem; } } @media screen and ( min-width: 80em ) { .form__input, .form__select-button { font-size: 2rem; } } .form__input::-moz-placeholder, .form__select-button::-moz-placeholder { color: var(--text-color--accent-light); } .form__input::placeholder, .form__select-button::placeholder { color: var(--text-color--accent-light); } .form__input:focus, .form__select-button:focus { --form-background: var(--form-background-hover); } .form__select { -ms-grid-row: 2; -ms-grid-column: 1; grid-area: input; min-height: 5.6rem; opacity: 0; } .form__field--choice > .form__select { -ms-grid-row: 1; -ms-grid-column: 1; } .form__select-button small, .form__select-item small { font-weight: 400; font-size: 1.5rem; color: var(--text-color); pointer-events: none; transition: var(--transition); } .form__select-button { --text-color: var(--form-color); cursor: pointer; position: relative; z-index: 4; } .form__select-list { grid-column: input/icon; grid-row: input; width: 100%; max-height: 19.6rem; overflow-y: scroll; -webkit-overflow-scrolling: touch; -ms-overflow-style: none; scrollbar-width: none; background: var(--background-color--bright); position: absolute; z-index: 3; top: 100%; } .form__select-list::-webkit-scrollbar { display: none; } .form__select-item { --text-color: var(--form-color); display: flex; align-items: center; min-height: 5.6rem; padding: 1.2rem 2rem; white-space: pre; cursor: pointer; transition: var(--transition); } .form__select-item.active { --text-color: rgba(30, 26, 24, 0.25); cursor: default; } .form__select-item:not(.active):hover { --text-color: var(--text-color--bright); background: var(--background-color--light); } .form__label { -ms-grid-row: 1; -ms-grid-column: 1; -ms-grid-column-span: 2; grid-area: label; cursor: pointer; font-size: 1.6rem; font-weight: 500; color: var(--text-color--accent); position: relative; z-index: 2; } .form__field--checkbox > .form__label { -ms-grid-row: 1; -ms-grid-column: 3; -ms-grid-column-span: 1; } .form__checkbox { grid-column: 1/-1; grid-row: 1/span 2; width: 100%; height: 100%; cursor: pointer; } .form__checkbox:checked + .form__checkmark::before { transform: translate(-50%, -65%) rotate(45deg) scale(1); } .form__checkmark { -ms-grid-row: 1; -ms-grid-column: 1; grid-area: checkmark; align-self: baseline; display: block; width: 2.4rem; height: 2.4rem; border: 0.2rem solid var(--form-border-color); background: var(--form-background); pointer-events: none; position: relative; transform: translate(0, 0.1em); } .form__checkmark::before { content: ""; display: block; width: 0.7rem; height: 1.2rem; border: 0.2rem solid var(--form-border-color); border-top: 0; border-left: 0; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -65%) rotate(45deg) scale(0); transition: var(--transition); } .form__message { -ms-grid-row: 3; -ms-grid-column: 1; -ms-grid-column-span: 2; display: flex; grid-area: message; font-size: 1.6rem; line-height: 2.1rem; font-weight: 600; -webkit-margin-before: 0.8rem; margin-block-start: 0.8rem; } .form__message--error { color: var(--error); } .form__message .icon { --icon-color: var(--error); align-self: flex-start; -webkit-margin-end: 1em; margin-inline-end: 1em; font-size: 1em; line-height: inherit; } .form__information { -ms-grid-row: 3; -ms-grid-column: 3; grid-area: information; font-size: 1.6rem; font-weight: 300; color: var(--text-color--accent); position: relative; z-index: 2; } .block--heading > .form__information { -ms-grid-row: 5; -ms-grid-column: 1; } .form__title { font-size: 2.4rem; -webkit-margin-after: 0.25em; margin-block-end: 0.25em; } .form__text { font-size: 1.6rem; color: var(--text-color--accent); } .form__accordion .form__wrapper { -webkit-padding-before: 2.4rem; padding-block-start: 2.4rem; } * + .form__wrapper { -webkit-margin-before: 1.5em; margin-block-start: 1.5em; } @media screen and ( min-width: 48em ) { * + .form__wrapper { -webkit-margin-before: 2.5em; margin-block-start: 2.5em; } } .form__choices { display: flex; flex-wrap: wrap; gap: 1.2rem; } .form__alert { --selection-background: rgba(255, 255, 255, 0.25); --alert-background: var(--success); --text-color: var(--text-color--bright); order: -1; padding: var(--grid-gap); background: var(--alert-background); text-align: center; } .form__alert > ul, .form__alert > ol { padding: 1em; background: rgba(0, 0, 0, 0.1); text-align: left; } .form__alert > * + * { -webkit-margin-before: 1.6rem; margin-block-start: 1.6rem; } .form__alert--error { --alert-background: var(--error); } .form__alert .icon { font-size: 2.4rem; } .form__counter { display: grid; grid-template-columns: auto minmax(4.8rem, 1fr) auto; grid-template-rows: auto; grid-template-areas: "decrease count increase"; height: 3.2rem; background: var(--white--pure); } .form__count { -ms-grid-row: 1; -ms-grid-column: 2; grid-area: count; -webkit-appearance: none; -moz-appearance: none; appearance: none; text-align: center; color: var(--text-color--accent-dark); } .form__action { -ms-grid-row: 1; -ms-grid-column: 1; grid-area: decrease; width: 3.2rem; background: var(--background-color); cursor: pointer; text-align: center; transition: var(--transition); } .form__action > * { pointer-events: none; } .form__action:hover { --background-color: var(--background-color--light); } .form__action:hover .icon { --icon-color: var(--text-color--bright); } .form__action .icon { --icon-color: var(--text-color--accent); transition: var(--transition); } .form__action--increase { -ms-grid-row: 1; -ms-grid-column: 3; grid-area: increase; } .form .is-invalid { --form-border-color: var(--error); } .form .is-invalid .form__input, .form .is-invalid .form__select-button { border-width: 0.2rem; } .form .pika-single { width: 100%; box-shadow: none; border: 0; background: var(--background-color--bright); font-family: var(--text-font); position: absolute; top: 100%; } .form .pika-lendar { width: 100%; margin: 0; padding: 0.8rem; } .form .pika-label { font-size: 2rem; font-weight: 600; color: var(--text-color--accent); } .form .pika-label::first-letter { text-transform: uppercase; } .form .pika-table thead abbr { display: block; font-size: 1.6rem; font-weight: 400; color: var(--text-color--accent-light); } .form .pika-table thead abbr::first-letter { text-transform: uppercase; } .form .pika-day { min-height: 3.2rem; padding: 0; text-align: center; color: var(--text-color); font-size: 1.5rem; font-weight: 400; box-shadow: none; background: transparent !important; opacity: 1 !important; position: relative; z-index: 2; transition: var(--transition); } .form .pika-day::before { content: ""; display: block; width: 2.8rem; height: 2.8rem; background: var(--background-color--medium); border-radius: 100rem; cursor: pointer; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%) scale(0); z-index: -1; transition: var(--transition); } .form .is-disabled .pika-day { color: rgba(30, 26, 24, 0.25); } .form .is-today .pika-day { text-decoration: underline; text-underline-offset: 0.3rem; text-decoration-thickness: 0.1rem; } .form .is-selected .pika-day { color: var(--text-color--bright); } .form .is-selected .pika-day::before { transform: translate(-50%, -50%) scale(1); } .form .pika-prev, .form .pika-next { display: block; width: 3.2rem; height: 3.2rem; background: none; opacity: 1; cursor: pointer; text-indent: -999.9rem; transition: var(--transition); } .form .pika-prev::before, .form .pika-next::before { content: ""; display: block; width: 1.2rem; height: 1.2rem; border: 0.2rem solid var(--stroke-color); position: absolute; top: 50%; left: 50%; transition: var(--transition); } .form .pika-prev::before { border-top: 0; border-right: 0; transform: translate(-25%, -50%) rotate(45deg); } .form .pika-next::before { border-bottom: 0; border-left: 0; transform: translate(-75%, -50%) rotate(45deg); } .form .is-disabled.pika-prev, .form .is-disabled.pika-next { opacity: 0.5; cursor: default; } .ratio--1x1 { aspect-ratio: 1/1; } .ratio--3x4 { aspect-ratio: 3/4; } .tag__list { display: inline-flex; flex-wrap: wrap; gap: var(--grid-gap); } .tag__item { --text-color: var(--text-color--accent-dark); display: grid; grid-template-columns: 1fr auto; grid-template-rows: auto auto; grid-template-areas: "title icon" "text icon"; gap: 0 2em; flex: 1; padding: 0.8rem 2rem; border: 0.1rem solid var(--stroke-color); background: var(--background-color--lighter); font-size: 1.6rem; line-height: 2rem; } .tag__title { -ms-grid-row: 1; -ms-grid-column: 1; grid-area: title; font-weight: 500; } .dialog__content > .tag__title { -ms-grid-row: 1; -ms-grid-column: 1; } .hero--reduce > .tag__title { -ms-grid-row: 2; -ms-grid-column: 1; } .block--heading > .tag__title { -ms-grid-row: 2; -ms-grid-column: 1; } .card--default .card__header > .tag__title { -ms-grid-row: 2; -ms-grid-column: 1; -ms-grid-column-span: 2; } .order__header > .tag__title { -ms-grid-row: 1; -ms-grid-column: 1; -ms-grid-column-span: 5; } .table--order .table__cell--product > .tag__title { -ms-grid-row: 1; -ms-grid-column: 3; -ms-grid-column-span: 1; } .tag__text { -ms-grid-row: 3; -ms-grid-column: 1; grid-area: text; } .choice > .tag__text { -ms-grid-row: 2; -ms-grid-column: 1; } .tag__icon { -ms-grid-row: 2; -ms-grid-column: 2; --icon-color: var(--text-color--accent); grid-area: icon; font-size: 2.4rem; align-self: center; } .tag__item > .tag__icon { -ms-grid-row: 1; -ms-grid-row-span: 3; -ms-grid-column: 3; } .choice > .tag__icon { -ms-grid-row: 1; -ms-grid-row-span: 2; -ms-grid-column: 2; } .header::before { content: ""; width: 100vw; width: 100dvw; height: var(--header-height); background: var(--white); box-shadow: 0 0 2.4rem rgba(128, 70, 52, 0.15); position: fixed; top: 0; left: 50%; z-index: var(--z-index-header); transform-origin: center top; transform: translate(-50%, 0); } .header__logo { display: grid; width: 8rem; height: 8rem; padding: 0.6rem; background: var(--background-color); border-radius: 100rem; box-shadow: 0 0 2rem rgba(128, 70, 52, 0.25); cursor: pointer; position: fixed; top: var(--header-height); left: 50%; transform-origin: center; transform: translate(-50%, -50%); z-index: var(--z-index-header-logo); } @media screen and ( min-width: 48em ) { .header__logo { width: 10rem; height: 10rem; padding: 0.8rem; } } .header__logo img { grid-column: 1/-1; grid-row: 1/-1; -o-object-fit: contain; object-fit: contain; pointer-events: none; } .header__logo__01 { transition: transform 0.16s ease-out; transform: rotate(calc(-360deg * var(--scroll-y, 0) + 44deg)); } .header__actions { display: flex; width: 100%; position: fixed; right: 0; z-index: var(--z-index-header-button); } @media screen and ( max-width: 63.9375em ) { .header__actions { justify-content: center; width: 100%; box-shadow: 0 0 2.4rem rgba(128, 70, 52, 0.15); background: var(--background-color); bottom: 0; } .header__actions .button { justify-content: center; } .header__actions > * { flex: 1 1 auto; gap: 1.2rem !important; font-size: 1.4rem; white-space: nowrap; } } @media screen and ( max-width: 47.9375em ) { .header__actions .icon--arrow-left-s::before { content: "\e919"; font-size: 1.05em; } } .header__button { height: var(--header-height); } .header__button.button--neutral { --button-color: var(--text-color--accent-dark); height: var(--header-height); } .header__redirect { -webkit-margin-end: auto; margin-inline-end: auto; } .accordion__rte a:not(.button), .block--rte a:not(.button), .block__rte a:not(.button), .dialog__rte a:not(.button) { text-decoration: underline; text-underline-offset: 0.1em; text-decoration-thickness: 0.1rem; transition: var(--transition); } @media (hover: hover) { .accordion__rte a:hover:not(.button), .block--rte a:hover:not(.button), .block__rte a:hover:not(.button), .dialog__rte a:hover:not(.button) { color: var(--text-color--accent); } } .accordion__rte ul:not(.block__list), .block--rte ul:not(.block__list), .block__rte ul:not(.block__list), .dialog__rte ul:not(.block__list), .form__alert ul:not(.block__list), .accordion__rte ol:not(.block__list), .block--rte ol:not(.block__list), .block__rte ol:not(.block__list), .dialog__rte ol:not(.block__list), .form__alert ol:not(.block__list) { display: flex; flex-wrap: wrap; flex: 0 0 100%; gap: 0.4rem 2em; } .accordion__rte ul ul, .block--rte ul ul, .block__rte ul ul, .dialog__rte ul ul, .form__alert ul ul, .accordion__rte ul ol, .block--rte ul ol, .block__rte ul ol, .dialog__rte ul ol, .form__alert ul ol, .accordion__rte ol ul, .block--rte ol ul, .block__rte ol ul, .dialog__rte ol ul, .form__alert ol ul, .accordion__rte ol ol, .block--rte ol ol, .block__rte ol ol, .dialog__rte ol ol, .form__alert ol ol { padding-block: 0.4rem; } .accordion__rte ul ol li, .block--rte ul ol li, .block__rte ul ol li, .dialog__rte ul ol li, .form__alert ul ol li, .accordion__rte ol ol li, .block--rte ol ol li, .block__rte ol ol li, .dialog__rte ol ol li, .form__alert ol ol li { -webkit-padding-start: 2.5em; padding-inline-start: 2.5em; } .accordion__rte ul li, .block--rte ul li, .block__rte ul li, .dialog__rte ul li, .form__alert ul li, .accordion__rte ol li, .block--rte ol li, .block__rte ol li, .dialog__rte ol li, .form__alert ol li { padding: 0 1em; -webkit-padding-start: 2em; padding-inline-start: 2em; flex: 0 0 100%; position: relative; } .accordion__rte ul li > :is(p), .block--rte ul li > :is(p), .block__rte ul li > :is(p), .dialog__rte ul li > :is(p), .form__alert ul li > :is(p), .accordion__rte ol li > :is(p), .block--rte ol li > :is(p), .block__rte ol li > :is(p), .dialog__rte ol li > :is(p), .form__alert ol li > :is(p) { display: inline-block; } .accordion__rte ul li::before, .block--rte ul li::before, .block__rte ul li::before, .dialog__rte ul li::before, .form__alert ul li::before, .accordion__rte ol li::before, .block--rte ol li::before, .block__rte ol li::before, .dialog__rte ol li::before, .form__alert ol li::before { color: var(--rte-mark-color); font-weight: 600; position: absolute; left: 0; } .accordion__rte ul:not(.block__list) > li::before, .block--rte ul:not(.block__list) > li::before, .block__rte ul:not(.block__list) > li::before, .dialog__rte ul:not(.block__list) > li::before, .form__alert ul:not(.block__list) > li::before { content: "•"; -webkit-text-stroke: 0.1rem var(--rte-mark-color); } .accordion__rte ul:not(.block__list) > li li::before, .block--rte ul:not(.block__list) > li li::before, .block__rte ul:not(.block__list) > li li::before, .dialog__rte ul:not(.block__list) > li li::before, .form__alert ul:not(.block__list) > li li::before { color: transparent; } .accordion__rte ol:not(.block__list), .block--rte ol:not(.block__list), .block__rte ol:not(.block__list), .dialog__rte ol:not(.block__list), .form__alert ol:not(.block__list) { counter-reset: index; } .accordion__rte ol:not(.block__list) > li, .block--rte ol:not(.block__list) > li, .block__rte ol:not(.block__list) > li, .dialog__rte ol:not(.block__list) > li, .form__alert ol:not(.block__list) > li { counter-increment: index; } .accordion__rte ol:not(.block__list) > li:before, .block--rte ol:not(.block__list) > li:before, .block__rte ol:not(.block__list) > li:before, .dialog__rte ol:not(.block__list) > li:before, .form__alert ol:not(.block__list) > li:before { content: counters(index, ".", decimal) "."; } .accordion__rte, .block--rte, .block__rte, .dialog__rte { --rte-text-spacing: 1em; } .accordion__rte > * + *:not(li, h1, h2, h3, h4, h5, h6), .block--rte > * + *:not(li, h1, h2, h3, h4, h5, h6), .block__rte > * + *:not(li, h1, h2, h3, h4, h5, h6), .dialog__rte > * + *:not(li, h1, h2, h3, h4, h5, h6) { -webkit-margin-before: var(--rte-text-spacing); margin-block-start: var(--rte-text-spacing); } .accordion__rte > * + h1, .block--rte > * + h1, .block__rte > * + h1, .dialog__rte > * + h1, .accordion__rte > * + h2, .block--rte > * + h2, .block__rte > * + h2, .dialog__rte > * + h2, .accordion__rte > * + h3, .block--rte > * + h3, .block__rte > * + h3, .dialog__rte > * + h3, .accordion__rte > * + h4, .block--rte > * + h4, .block__rte > * + h4, .dialog__rte > * + h4, .accordion__rte > * + h5, .block--rte > * + h5, .block__rte > * + h5, .dialog__rte > * + h5, .accordion__rte > * + h6, .block--rte > * + h6, .block__rte > * + h6, .dialog__rte > * + h6 { -webkit-margin-before: 0.5em; margin-block-start: 0.5em; } .accordion__rte > * + table, .block--rte > * + table, .block__rte > * + table, .dialog__rte > * + table, .accordion__rte > table + *, .block--rte > table + *, .block__rte > table + *, .dialog__rte > table + * { -webkit-margin-before: 2em; margin-block-start: 2em; } .accordion__rte, .block--rte, .block__rte, .dialog__rte { --rte-mark-color: var(--text-color--accent); } .accordion__rte h3, .block--rte h3, .block__rte h3, .dialog__rte h3 { color: var(--title-color--accent); } .accordion__rte h4, .block--rte h4, .block__rte h4, .dialog__rte h4, .accordion__rte h5, .block--rte h5, .block__rte h5, .dialog__rte h5, .accordion__rte h6, .block--rte h6, .block__rte h6, .dialog__rte h6 { color: var(--title-color--accent-medium); } .accordion__rte small, .block--rte small, .block__rte small, .dialog__rte small { display: inline-block; } .accordion__rte em, .block--rte em, .block__rte em, .dialog__rte em { font-family: var(--title-font); font-weight: 500; } .accordion__rte table, .block--rte table, .block__rte table, .dialog__rte table { position: relative; left: 50%; transform: translate(-50%, 0); } .accordion__rte thead, .block--rte thead, .block__rte thead, .dialog__rte thead { background: var(--background-color--medium); } @media screen and ( max-width: 47.9375em ) { .accordion__rte thead, .block--rte thead, .block__rte thead, .dialog__rte thead { display: none; } } .accordion__rte tbody img, .block--rte tbody img, .block__rte tbody img, .dialog__rte tbody img { width: 100%; aspect-ratio: 3/2; } .accordion__rte tbody tr:nth-child(odd), .block--rte tbody tr:nth-child(odd), .block__rte tbody tr:nth-child(odd), .dialog__rte tbody tr:nth-child(odd) { background: var(--background-color--lighter); } .accordion__rte tr, .block--rte tr, .block__rte tr, .dialog__rte tr { display: flex; flex-wrap: wrap; } @media screen and ( max-width: 47.9375em ) { .accordion__rte tr, .block--rte tr, .block__rte tr, .dialog__rte tr { padding-block: 0.5em; background: var(--background-color--lighter); } } .accordion__rte tr > *, .block--rte tr > *, .block__rte tr > *, .dialog__rte tr > * { flex: 0 0 100%; } @media screen and ( min-width: 48em ) { .accordion__rte tr > *, .block--rte tr > *, .block__rte tr > *, .dialog__rte tr > * { flex: 1; } } @media screen and ( max-width: 47.9375em ) { .accordion__rte tr + tr, .block--rte tr + tr, .block__rte tr + tr, .dialog__rte tr + tr { -webkit-margin-before: 1em; margin-block-start: 1em; } } @media screen and ( min-width: 48em ) { .accordion__rte tr + tr, .block--rte tr + tr, .block__rte tr + tr, .dialog__rte tr + tr { -webkit-border-before: 0.1rem solid var(--stroke-color--lighter); border-block-start: 0.1rem solid var(--stroke-color--lighter); } } .accordion__rte th, .block--rte th, .block__rte th, .dialog__rte th { padding: 2rem 1em; color: var(--text-color--bright); font-weight: 500; } @media screen and ( min-width: 48em ) { .accordion__rte th:first-child, .block--rte th:first-child, .block__rte th:first-child, .dialog__rte th:first-child { min-width: 14.4rem; max-width: 20rem; } } @media screen and ( min-width: 48em ) { .accordion__rte th + th, .block--rte th + th, .block__rte th + th, .dialog__rte th + th { -webkit-border-start: 0.1rem solid var(--stroke-color--dark); border-inline-start: 0.1rem solid var(--stroke-color--dark); } } .accordion__rte td, .block--rte td, .block__rte td, .dialog__rte td { vertical-align: top; } @media screen and ( max-width: 47.9375em ) { .accordion__rte td::before, .block--rte td::before, .block__rte td::before, .dialog__rte td::before { content: attr(data-title); display: block; -webkit-margin-after: 0.25em; margin-block-end: 0.25em; font-size: 1.8rem; font-family: var(--text-font); font-weight: 500; line-height: 1em; color: var(--title-color); } } @media screen and ( min-width: 48em ) { .accordion__rte td:first-child, .block--rte td:first-child, .block__rte td:first-child, .dialog__rte td:first-child { min-width: 14.4rem; max-width: 20rem; } } @media screen and ( min-width: 48em ) { .accordion__rte td + td, .block--rte td + td, .block__rte td + td, .dialog__rte td + td { -webkit-border-start: 0.1rem solid var(--stroke-color--lighter); border-inline-start: 0.1rem solid var(--stroke-color--lighter); } } .accordion__rte th, .block--rte th, .block__rte th, .dialog__rte th, .accordion__rte td, .block--rte td, .block__rte td, .dialog__rte td { padding: 0.5em 1em; } @media screen and ( min-width: 48em ) { .accordion__rte th, .block--rte th, .block__rte th, .dialog__rte th, .accordion__rte td, .block--rte td, .block__rte td, .dialog__rte td { padding: 1.5em; } } .dialog { --dialog-padding: 1.5em; --grid-width: calc( 100vw - var(--grid-space) * 2 ); 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%) ); position: fixed; top: 50%; left: 50%; translate: -50% -50%; z-index: var(--z-index-dialog); transition: all var(--transition-duration) var(--transition-easing); } @media screen and ( min-width: 48em ) { .dialog { --dialog-padding: 2em; } } @media screen and ( min-width: 64em ) { .dialog { --dialog-padding: 3em; } } @media screen and (min-width: 105.0625rem) { .dialog { --grid-width: calc( var(--layout-max-width) - var(--grid-space) * 2 ); } } .dialog:before { content: ""; display: block; width: 100vw; width: 100dvw; height: 100vh; height: 100dvh; background: var(--background-color--dark); opacity: 0.5; position: absolute; top: 50%; left: 50%; translate: -50% -50%; z-index: -1; } .dialog::after { content: ""; display: block; width: 100%; height: var(--dialog-padding); background: linear-gradient(to top, white 0%, rgba(255, 255, 255, 0.944) 16.6%, rgba(255, 255, 255, 0.876) 30.8%, rgba(255, 255, 255, 0.8) 42.8%, rgba(255, 255, 255, 0.717) 53%, rgba(255, 255, 255, 0.63) 61.5%, rgba(255, 255, 255, 0.54) 68.5%, rgba(255, 255, 255, 0.45) 74.2%, rgba(255, 255, 255, 0.363) 78.8%, rgba(255, 255, 255, 0.28) 82.7%, rgba(255, 255, 255, 0.204) 85.9%, rgba(255, 255, 255, 0.136) 88.6%, rgba(255, 255, 255, 0.08) 91.2%, rgba(255, 255, 255, 0.037) 93.8%, rgba(255, 255, 255, 0.01) 96.7%, rgba(255, 255, 255, 0) 100%); position: absolute; bottom: 0; left: 0; z-index: 2; } .dialog:not(.visible) { opacity: 0; pointer-events: none; } .dialog__content { display: grid; grid-template-columns: 1fr; grid-template-rows: auto auto 1fr; grid-template-areas: "title" "rte" "actions"; align-items: start; max-height: calc(100vh - 4.8rem); max-height: calc(100dvh - 4.8rem); padding: var(--dialog-padding); row-gap: 1em; background: var(--background-color--bright); position: relative; z-index: 2; overflow-y: scroll; -webkit-overflow-scrolling: touch; -ms-overflow-style: none; scrollbar-width: none; } @media screen and ( min-width: 48em ) { .dialog__content { -webkit-padding-before: max(4.4rem, var(--dialog-padding)); padding-block-start: max(4.4rem, var(--dialog-padding)); } } @media screen and ( max-width: 63.9375em ) { .dialog__content:has(.dialog__image) { grid-template-rows: auto auto auto 1fr; grid-template-areas: "title" "image" "rte" "actions"; } .dialog__content:has(.dialog__image) > .tag__title { -ms-grid-row: 1; -ms-grid-column: 1; } } @media screen and ( min-width: 64em ) { .dialog__content { grid-template-columns: 1fr; grid-template-rows: auto auto 1fr; grid-template-areas: "title" "rte" "actions"; } .dialog__content:has(.dialog__image) { grid-template-columns: 2fr 3fr; grid-template-areas: "image title" "image rte" "image actions"; -moz-column-gap: var(--grid-gap); column-gap: var(--grid-gap); } .dialog__content > .tag__title { -ms-grid-row: 1; -ms-grid-column: 1; } .dialog__content:has(.dialog__image) > .tag__title { -ms-grid-row: 1; -ms-grid-column: 3; } } .dialog__title { -ms-grid-row: 1; -ms-grid-column: 1; grid-area: title; } .dialog__content > .dialog__title { -ms-grid-row: 1; -ms-grid-column: 1; } .hero--reduce > .dialog__title { -ms-grid-row: 2; -ms-grid-column: 1; } .block--heading > .dialog__title { -ms-grid-row: 2; -ms-grid-column: 1; } .card--default .card__header > .dialog__title { -ms-grid-row: 2; -ms-grid-column: 1; -ms-grid-column-span: 2; } .order__header > .dialog__title { -ms-grid-row: 1; -ms-grid-column: 1; -ms-grid-column-span: 5; } .table--order .table__cell--product > .dialog__title { -ms-grid-row: 1; -ms-grid-column: 3; -ms-grid-column-span: 1; } @media screen and ( max-width: 47.9375em ) { .dialog__title { -webkit-padding-end: 5.6rem; padding-inline-end: 5.6rem; } } @media screen and ( min-width: 48em ) { .dialog__title { -webkit-margin-before: -0.2em; margin-block-start: -0.2em; } } .dialog__rte { -ms-grid-row: 3; -ms-grid-column: 1; grid-area: rte; -webkit-margin-before: 0 !important; margin-block-start: 0 !important; } @media screen and ( max-width: 39.9375em ) { .dialog__rte { font-size: 1.4rem; } } .dialog__actions { -ms-grid-row: 5; -ms-grid-column: 1; grid-area: actions; display: flex; flex-wrap: wrap; gap: 1em; } .dialog__image { grid-area: image; aspect-ratio: 16/9; } .card--default a > .dialog__image { -ms-grid-row: 1; -ms-grid-row-span: 1; -ms-grid-column: 1; } .basket > .dialog__image { -ms-grid-row: 1; -ms-grid-row-span: 1; -ms-grid-column: 1; } .table--order .table__cell--product > .dialog__image { -ms-grid-row: 1; -ms-grid-row-span: 3; -ms-grid-column: 1; } @media screen and ( min-width: 64em ) { .dialog__image { aspect-ratio: 1/1; } } .dialog__close { display: inline-flex; align-content: center; justify-content: center; flex: 4.4rem; width: 4.4rem; height: 4.4rem; cursor: pointer; position: absolute; top: 0; right: 0; } .dialog__close .icon { --icon-color: var(--button-secondary); } .hero { --hero-background: var(--background-color--medium); display: grid; grid-template-columns: 1fr; grid-template-rows: 1fr; grid-template-areas: "center"; justify-items: center; align-items: center; gap: 3.2rem var(--grid-gap); position: relative; z-index: 2; } @media screen and ( min-width: 48em ) { .hero { gap: 8% var(--grid-gap); } } .hero:not(.hero--reduce) { height: var(--vh, 100vh); height: var(--vh, 100dvh); min-height: 60rem; } @media screen and ( min-width: /16em ) { .hero:not(.hero--reduce) { height: 100vh; height: 100dvh; max-height: 120rem; min-height: auto; } } .hero::before { content: ""; display: block; width: 100vw; width: 100dvw; height: 100%; background: var(--hero-background); position: absolute; top: 0; left: 50%; z-index: -1; transform: translate(-50%, 0); } .hero__title { -ms-grid-row: 1; -ms-grid-column: 1; grid-area: center; } @media screen and ( max-width: 47.9375em ) { .hero__title { line-height: 1.2em; align-self: start; -webkit-padding-before: var(--block-padding-block); padding-block-start: var(--block-padding-block); } } @media screen and ( min-width: 48em ) { .hero__title { -webkit-margin-before: 1em; margin-block-start: 1em; text-align: center; transform: translate(0, -100%); } } .hero__title em { display: block; } .hero__logo { -ms-grid-row: 1; -ms-grid-column: 1; display: grid; grid-area: center; width: 12rem; transform: translate(0, 150%); } @media screen and ( min-width: 48em ) { .hero__logo { transform: translate(0, 75%); width: 20rem; } } .hero__logo > * { width: 100%; height: 100%; -o-object-fit: contain; object-fit: contain; grid-row: 1/-1; grid-column: 1/-1; opacity: 0; } .hero__logo__01 { transition: transform 0.16s ease-out; transform: rotate(calc(-360deg * var(--scroll-y, 0) + 44deg)); } .hero__decoration { position: absolute; z-index: -1; pointer-events: none; -webkit-user-select: none; -moz-user-select: none; user-select: none; opacity: 0; } .hero__decoration--01 { aspect-ratio: 600/350; width: 37.5vw; width: 37.5dvw; max-width: 60rem; left: calc(var(--grid-space) * -1); bottom: 0; transform: translate(-5%, calc(var(--block-padding-block) * 0.5 + 250% * var(--scroll-y, 0))); } @media screen and ( max-width: 47.9375em ) { .hero__decoration--01 { display: none; } } .hero__decoration--02 { aspect-ratio: 1250/650; width: 78.125vw; width: 78.125dvw; max-width: 125rem; right: calc(var(--grid-space) * -1); bottom: 40%; transform: translate(30%, calc(-10% - 300% * var(--scroll-y, 0))) rotate(90deg) scale(2); } @media screen and ( min-width: 48em ) { .hero__decoration--02 { top: 0; transform: translate(16%, calc(-10% - 250% * var(--scroll-y, 0))); } } .hero--reduce { grid-template-rows: 1fr auto auto 1fr; grid-template-areas: "spaceT" "title" "logo" "spaceB"; align-self: start; min-height: 45rem; height: auto; } .hero--reduce .hero__title { -ms-grid-row: 2; -ms-grid-column: 1; grid-area: title; width: 100%; margin: 0; transform: none; } .hero--reduce .hero__title em { display: inline-block; } .hero--reduce .hero__logo { -ms-grid-row: 3; -ms-grid-column: 1; grid-area: logo; width: 13.2rem; transform: translate(0, 0); } .hero--reduce .hero__logo__01, .hero--reduce .hero__logo__02 { opacity: 1; } .hero--reduce .hero__decoration { opacity: 0.3; } .hero--reduce .hero__decoration--02 { top: 0; transform: translate(16%, calc(-40% - 250% * var(--scroll-y, 0))); } .row--contrast { position: relative; z-index: 2; } .row--contrast::before { content: ""; display: block; width: 100vw; width: 100dvw; height: 100%; background: var(--row-background); position: absolute; top: 0; left: 50%; z-index: -1; transform: translate(-50%, 0); } .row--copper { --row-background: var(--background-color--medium); } .row--copper-lighter { --selection-background: var(--copper); --selection-color: var(--white); --row-background: var(--background-color--lighter); --form-background: var(--row-background); --form-background-hover: var(--background-color--bright); } @media screen and ( max-width: 47.9375em ) { .row--copper-lighter tbody tr { background: var(--background-color); } } .row--copper-lighter tbody tr:nth-child(odd) { background: var(--background-color); } .row--copper-lighter .button--ternary { --button-background: var(--white); } .row--copper-lighter .form__input, .row--copper-lighter .form__select-button { --selection-background: var(--copper--light); } .row--bright { --row-background: var(--background-color); } .block { padding-block: var(--block-padding-block); } .block + .block { -webkit-padding-before: 0; padding-block-start: 0; } .block__content .block__title { color: var(--title-color--accent); line-height: 1.2em; } .block__content .block__title + * { -webkit-margin-before: 1.6rem; margin-block-start: 1.6rem; } .block__content * + * { -webkit-margin-before: 2.4rem; margin-block-start: 2.4rem; } @media screen and ( min-width: 48em ) { .block__content address { font-size: 2rem; line-height: 2.6rem; } } .block__content address a { display: block; } .block__subtitle { font-size: 1.4rem; font-weight: 400; color: var(--text-color--accent-dark); text-transform: uppercase; } .block__information { display: flex; gap: 1em; } .block__information > * + * { position: relative; -webkit-padding-start: 1em; padding-inline-start: 1em; } .block__information > * + *::before { content: ""; display: block; width: 0.1rem; height: 120%; background: var(--stroke-color--light); position: absolute; top: 50%; left: 0; transform: translate(0, -50%); } .block__price { font-size: 2rem; font-family: var(--title-font); color: var(--text-color--accent-dark); } .block__review { display: flex; gap: 0.2rem; } .block__review .icon { --icon-color: var(--yellow); font-size: 1.4rem; } .block__marquee { order: -1; -webkit-margin-after: 2.4rem; margin-block-end: 2.4rem; } @media screen and ( min-width: 48em ) { .block__marquee { -webkit-margin-after: var(--block-padding-block); margin-block-end: var(--block-padding-block); } } .block__map { aspect-ratio: 1/1; background: whitesmoke; } @media screen and ( max-width: 47.9375em ) { .block__map { aspect-ratio: 375/460; flex: 0 0 100vw !important; flex: 0 0 100dvw !important; max-width: none; -webkit-margin-before: 1.6rem; margin-block-start: 1.6rem; position: relative; left: calc(var(--grid-space) * -1); } } @media screen and ( min-width: 64em ) { .block__map { aspect-ratio: 3/2; } } .block__gallery { display: flex; flex-wrap: wrap; align-content: flex-start; gap: 1.2rem; } .block__gallery img { aspect-ratio: 1/1; } .block__gallery .block__list { display: grid; grid-template-columns: repeat(auto-fit, minmax(7.2rem, 1fr)); gap: 1.2rem; } .block__decoration { position: absolute; z-index: -1; pointer-events: none; -webkit-user-select: none; -moz-user-select: none; user-select: none; opacity: 0.15; } .block__decoration--01 { aspect-ratio: 600/350; width: 37vw; width: 37dvw; max-width: 60rem; } .block__decoration--02, .block__decoration--03 { aspect-ratio: 1250/650; width: 78vw; width: 78dvw; max-width: 125rem; } @media screen and ( min-width: 48em ) { .block--gallery-text .block__title { padding-inline: calc( (((var(--grid-width, 100%)) - var(--grid-gap) * (var(--container-columns) - 1) ) / var(--container-columns)) * 0.5 + var(--grid-gap) * ( 0.5 - 0 ) + var(--grid-offset, 0%) ); } } .block--gallery-text .block__title mark { display: block; text-align: right; } .block--gallery-text .block__cta { text-align: center; -webkit-margin-before: 1em; margin-block-start: 1em; } .block--gallery-text .block__cta > * + * { -webkit-margin-before: 1em; margin-block-start: 1em; } .block--form { grid-template-rows: auto auto auto auto; } @media screen and ( max-width: 47.9375em ) { .block--form .block__title { text-align: right; } } @media screen and ( min-width: 48em ) { .block--form .block__title { padding-inline: calc( (((var(--grid-width, 100%)) - var(--grid-gap) * (var(--container-columns) - 1) ) / var(--container-columns)) * 0.5 + var(--grid-gap) * ( 0.5 - 0 ) + var(--grid-offset, 0%) ); text-align: left; } } .block--form .block__title mark { display: block; } @media screen and ( max-width: 47.9375em ) { .block--form .block__title mark { text-align: left; } } @media screen and ( min-width: 48em ) { .block--form .block__title mark { text-align: right; } } .block--form .block__decoration { left: calc(var(--grid-space) * -1); top: calc(var(--block-padding-block) * -0.5); transform-origin: left top; transform: translate(-15%, calc(20% - 250% * var(--scroll-y, 0))) scale(2.4); } @media screen and ( min-width: 48em ) { .block--form .block__decoration { transform: translate(-10%, calc(40% - 150% * var(--scroll-y, 0))) scale(1.25); } } .block--form .block__form { -webkit-margin-before: 2.4rem; margin-block-start: 2.4rem; } @media screen and ( min-width: 48em ) { .block--form .block__form { -webkit-margin-before: 3.2rem; margin-block-start: 3.2rem; } } .block--address { align-items: center; position: relative; } .block--address .block__title { -webkit-margin-after: 1.6rem; margin-block-end: 1.6rem; } @media screen and ( max-width: 47.9375em ) { .block--address .block__button { white-space: nowrap; position: absolute; left: 50%; bottom: calc(var(--block-padding-block) + 2.4rem); z-index: 3; transform: translate(-50%, 0); } } .block--social { align-items: center; } .block--social .block__title mark { display: block; text-align: right; } @media screen and ( max-width: 47.9375em ) { .block--social .block__button { margin-inline: auto; } } .block--social .block__images { gap: var(--grid-gap); height: auto; -webkit-margin-before: calc(var(--block-padding-block) * 0.5); margin-block-start: calc(var(--block-padding-block) * 0.5); -webkit-margin-after: calc(var(--block-padding-block) * 0.5); margin-block-end: calc(var(--block-padding-block) * 0.5); order: unset; background: none; } .block--social .block__images img { aspect-ratio: 1/1; } .block--social .block__cta { margin-inline: auto; } @media screen and ( min-width: 48em ) { .block--contact .block__title { padding-inline: calc( (((var(--grid-width, 100%)) - var(--grid-gap) * (var(--container-columns) - 1) ) / var(--container-columns)) * 0.5 + var(--grid-gap) * ( 0.5 - 0 ) + var(--grid-offset, 0%) ); } } .block--contact .block__title mark { display: block; text-align: right; } .block--contact .block__rte { text-align: center; font-weight: 500; } .block--contact .block__list { -webkit-margin-before: 2.4rem; margin-block-start: 2.4rem; justify-content: center; gap: var(--grid-gap) 4rem; } .block--contact .block__list a { display: flex; align-content: center; justify-content: center; width: 4.8rem; height: 4.8rem; } .block--contact .block__list .icon { font-size: 4rem; } .block--contact .block__decoration { opacity: 0.3; left: calc(var(--grid-space) * -1); top: 50%; transform-origin: left center; transform: translate(-20%, calc(75% - 150% * var(--scroll-y, 0.7))) scale(1.15); } @media screen and ( min-width: 48em ) and ( max-width: 63.9375em ) { .block--newsletter .block__title, .block--newsletter .block__rte { text-align: center; } } .block--newsletter .block__form { -webkit-margin-before: 2.4rem; margin-block-start: 2.4rem; } .block--products .block__decoration--03 { bottom: 10%; right: calc(var(--grid-space) * -2); transform-origin: center center; transform: translate(20%, 0) rotate(40deg) scale(0.7, -0.7); opacity: 0.05; } @media screen and ( max-width: 39.9375em ) { .block--products .block__filters { order: -1; } } .block--heading { display: grid; grid-template-columns: 1fr; grid-template-rows: repeat(5, auto); grid-template-areas: "cta" "title" "subtitle" "content" "information"; } .block--heading .block__title { -ms-grid-row: 2; -ms-grid-column: 1; grid-area: title; -webkit-margin-after: 0; margin-block-end: 0; } .block--heading .block__title + * { -webkit-margin-before: 1.6rem; margin-block-start: 1.6rem; } .block--heading .block__subtitle { -ms-grid-row: 3; -ms-grid-column: 1; grid-area: subtitle; } .block--heading .block__subtitle + * { -webkit-margin-before: 0.8rem; margin-block-start: 0.8rem; } .block--heading .block__content, .block--heading .block__rte { -ms-grid-row: 2; -ms-grid-column: 1; grid-area: content; } .block--heading .block__information { -ms-grid-row: 5; -ms-grid-column: 1; grid-area: information; } .block--heading .block__cta { -ms-grid-row: 1; -ms-grid-column: 1; grid-area: cta; justify-self: start; -webkit-margin-after: 2.4rem; margin-block-end: 2.4rem; } .block--product .block__decoration--03 { bottom: 0; right: calc(var(--grid-space) * -2); transform-origin: center center; transform: translate(20%, calc(100% - 150% * var(--scroll-y, 0))) rotate(40deg) scale(0.7, -0.7); opacity: 0.05; } @media screen and ( min-width: 64em ) { .block--basket + .block--payment { padding-block: var(--block-padding-block); } } .block--payment .accordion__list { -webkit-border-after: 0.1rem solid var(--stroke-color--lighter); border-block-end: 0.1rem solid var(--stroke-color--lighter); } @media screen and ( max-width: 63.9375em ) { .block--payment .form__wrapper--submit { justify-content: center; } } .block--magic-link.flex--row { gap: 1.5em var(--grid-gap); } .block--magic-link .block__title { -webkit-margin-after: 0; margin-block-end: 0; } @media screen and ( max-width: 47.9375em ) { .block--magic-link .form__field--submit { flex: 0 0 100%; justify-content: center; } } .block--order .order__list { -webkit-margin-before: 2em; margin-block-start: 2em; } .card__list { gap: calc(var(--grid-gap) * 1.5) var(--grid-gap); } .card--default a { display: grid; grid-template-columns: 1fr auto; grid-template-rows: repeat(3, auto); grid-template-areas: "image" "header" "footer"; } .card--default .card__header { display: grid; grid-template-columns: 1fr auto; grid-template-rows: auto auto; grid-template-areas: "category quantity" "title title"; -webkit-margin-before: 0.8rem; margin-block-start: 0.8rem; } .card--default .card__title { font-size: 2.1rem; } @media screen and ( min-width: 96em ) { .card--default .card__title { font-size: 2.4rem; } } .card--default .card__category { -webkit-padding-end: 1.6rem; padding-inline-end: 1.6rem; -webkit-margin-before: 0; margin-block-start: 0; font-size: 1.2rem; font-weight: 400; text-transform: uppercase; color: var(--text-color--accent-dark); } @media screen and ( min-width: 96em ) { .card--default .card__category { font-size: 1.4rem; } } .card--default .card__quantity { font-size: 1.2rem; font-weight: 700; color: var(--text-color--accent-dark); text-transform: uppercase; } @media screen and ( min-width: 96em ) { .card--default .card__quantity { font-size: 1.4rem; } } .card--default .card__footer { display: flex; justify-content: space-between; -webkit-margin-before: 1.2rem; margin-block-start: 1.2rem; gap: 0.8rem; } .card--default .card__information { font-size: 1.8rem; color: var(--text-color--accent-dark); } @media screen and ( min-width: 96em ) { .card--default .card__information { font-size: 2rem; } } .card--default .card__price { font-size: 1.8rem; font-family: var(--title-font); color: var(--text-color--accent-dark); } @media screen and ( min-width: 96em ) { .card--default .card__price { font-size: 2rem; } } .card__header { -ms-grid-row: 1; -ms-grid-column: 1; grid-area: header; } .card__title { -ms-grid-row: 1; -ms-grid-column: 1; grid-area: title; } .dialog__content > .card__title { -ms-grid-row: 1; -ms-grid-column: 1; } .hero--reduce > .card__title { -ms-grid-row: 2; -ms-grid-column: 1; } .block--heading > .card__title { -ms-grid-row: 2; -ms-grid-column: 1; } .card--default .card__header > .card__title { -ms-grid-row: 2; -ms-grid-column: 1; -ms-grid-column-span: 2; } .order__header > .card__title { -ms-grid-row: 1; -ms-grid-column: 1; -ms-grid-column-span: 5; } .table--order .table__cell--product > .card__title { -ms-grid-row: 1; -ms-grid-column: 3; -ms-grid-column-span: 1; } .card__category { -ms-grid-row: 1; -ms-grid-column: 1; grid-area: category; } .card__quantity { -ms-grid-row: 1; -ms-grid-column: 2; grid-area: quantity; } .choice > .card__quantity { -ms-grid-row: 1; -ms-grid-column: 1; } .card__footer { -ms-grid-row: 3; -ms-grid-column: 1; grid-area: footer; } .card__image { grid-area: image; } .card--default a > .card__image { -ms-grid-row: 1; -ms-grid-row-span: 1; -ms-grid-column: 1; } .basket > .card__image { -ms-grid-row: 1; -ms-grid-row-span: 1; -ms-grid-column: 1; } .table--order .table__cell--product > .card__image { -ms-grid-row: 1; -ms-grid-row-span: 3; -ms-grid-column: 1; } .filter__list { transform: translate(0, -0.8rem); } .filter__item.active button { font-weight: 700; color: var(--title-color--accent); } .filter__item button { padding-block: 0.8rem; cursor: pointer; transition: var(--transtion); } .filter__item:hover button { color: var(--title-color--accent); } @keyframes marquee-right-to-left { from { transform: translate3d(0, 0, 0); } to { transform: translate3d(-50%, 0, 0); } } .marquee { display: flex; flex: 0 0 100vw !important; flex: 0 0 100dvw !important; width: 100vw; width: 100dvw; overflow: hidden; position: relative; left: 50%; transform: translate(-50%, 0); z-index: 2; } .marquee__scroller { display: flex; -webkit-margin-start: calc(var(--grid-gap) * -0.5); margin-inline-start: calc(var(--grid-gap) * -0.5); } @media screen and ( min-width: 48em ) { .marquee__scroller { animation-duration: 30s !important; } } .marquee__scroller.animate { animation: marquee-right-to-left 14s linear infinite; } @media screen and ( max-width: 47.9375em ) { .marquee__list { display: grid; grid-template-rows: auto auto; grid-auto-columns: auto; grid-auto-flow: column; gap: var(--grid-gap) 0; } } @media screen and ( min-width: 48.0625em ) { .marquee__list { display: flex; } } .marquee__item { width: calc((100vw - var(--grid-space) * 2 - var(--grid-gap) * (var(--grid-columns) - 1)) / var(--grid-columns) * var(--column-size) + var(--grid-gap) * (var(--column-size) - 1)) !important; margin-inline: calc(var(--grid-gap) * 0.5); } @media screen and ( min-width: /16em ) { .marquee__item { width: calc((160rem - var(--grid-space) * 2 - var(--grid-gap) * (var(--grid-columns) - 1)) / var(--grid-columns) * var(--column-size) + var(--grid-gap) * (var(--column-size) - 1)) !important; } } @media screen and ( max-width: 47.9375em ) { .marquee__item { grid-row: 1/span 1; } .marquee__item:nth-child(7n+1) { grid-row: 2/span 1; } .marquee__item:nth-child(7n+1) img { transform: translate(0, -50%); } .marquee__item:nth-child(7n+2) { grid-row: 1/span 1; align-self: end; } .marquee__item:nth-child(7n+3) { grid-row: span 1/-1; align-self: start; } .marquee__item:nth-child(7n+3) img { aspect-ratio: 1/1; } .marquee__item:nth-child(7n+4) { grid-row: 1/span 1; } .marquee__item:nth-child(7n+5) img { transform: translate(0, 50%); } .marquee__item:nth-child(7n+6) { align-self: end; } .marquee__item:nth-child(7n+7) { grid-row: 2/span 1; align-self: start; } } @media screen and ( min-width: 48em ) { .marquee__item:nth-child(5n+1) { -webkit-margin-before: 3em; margin-block-start: 3em; } .marquee__item:nth-child(3n+4) { align-self: flex-end; } .marquee__item:nth-child(2n+5) { align-self: center; } } .accordion.inactive { pointer-events: none; -webkit-user-select: none; -moz-user-select: none; user-select: none; } .accordion.inactive .accordion__title { --text-color--accent: var(--copper--light); } .accordion__item + .accordion__item { -webkit-border-before: 0.1rem solid var(--stroke-color--lighter); border-block-start: 0.1rem solid var(--stroke-color--lighter); } .accordion__title, .accordion__content { width: 100%; } .accordion__title { display: flex; justify-content: space-between; align-items: center; gap: 1em; min-height: 5.6rem; padding-block: 1.2rem; cursor: pointer; font-size: 2rem; color: var(--text-color--accent); transition: var(--transition); } .accordion__title .icon--accordion { -webkit-padding-end: 1em; padding-inline-end: 1em; } .accordion__title:hover { color: var(--text-color--accent-dark); } .accordion__content { overflow: hidden; } .accordion__content > * + *:not(li, h1, h2, h3, h4, h5, h6) { -webkit-margin-before: 1em; margin-block-start: 1em; } .accordion__content > *:last-child { -webkit-padding-after: 1em; padding-block-end: 1em; } .accordion__rte { --rte-text-spacing: .5em; --text-color: var(--text-color--accent-dark); } .choice { --choice-background: transparent; --choice-border-color: transparent; display: grid; grid-template-columns: 1fr auto; grid-template-rows: auto auto auto; grid-template-areas: "quantity icon" "text icon" "price price"; padding: 1.2rem 2rem; border: 0.1rem solid var(--stroke-color); position: relative; z-index: 2; transition: var(--transition); } .choice:hover { --choice-border-color: var(--stroke-color); } .choice__list { display: grid; grid-template-columns: repeat(auto-fill, minmax(18rem, 1fr)); gap: 1.2rem; } .choice__input:checked ~ .choice { --choice-border-color: var(--stroke-color); --choice-background: var(--background-color); } .choice__quantity { -ms-grid-row: 1; -ms-grid-column: 2; grid-area: quantity; color: var(--text-color--accent-dark); } .choice > .choice__quantity { -ms-grid-row: 1; -ms-grid-column: 1; } .choice__text { -ms-grid-row: 3; -ms-grid-column: 1; grid-area: text; font-weight: 400; color: var(--text-color--accent-dark); } .choice > .choice__text { -ms-grid-row: 2; -ms-grid-column: 1; } .choice__price { -ms-grid-row: 3; -ms-grid-column: 1; -ms-grid-column-span: 2; grid-area: price; -webkit-padding-before: 0.5em; padding-block-start: 0.5em; font-size: 2rem; font-family: var(--title-font); color: var(--text-color--accent-dark); } .choice__icon { -ms-grid-row: 2; -ms-grid-column: 2; grid-area: icon; align-self: start; font-size: 2.4rem; } .tag__item > .choice__icon { -ms-grid-row: 1; -ms-grid-row-span: 3; -ms-grid-column: 3; } .choice > .choice__icon { -ms-grid-row: 1; -ms-grid-row-span: 2; -ms-grid-column: 2; } .choice::before { content: ""; display: block; width: 100%; height: 100%; border: 0.1rem solid var(--choice-border-color); background: var(--choice-background); position: absolute; top: 0; left: 0; z-index: -1; transition: var(--transition); } .basket { display: grid; grid-template-columns: minmax(6.4rem, 9.6rem) 1fr auto; grid-template-rows: auto; grid-template-areas: "image header counter"; gap: var(--grid-gap); align-items: center; } .basket__list + * { -webkit-padding-before: 1.6rem; padding-block-start: 1.6rem; -webkit-border-before: 0.1rem solid var(--stroke-color--lighter); border-block-start: 0.1rem solid var(--stroke-color--lighter); } .basket__item { padding-block: 2.4rem; } .basket__item + .basket__item { -webkit-border-before: 0.1rem solid var(--stroke-color--lighter); border-block-start: 0.1rem solid var(--stroke-color--lighter); } .basket__header { -ms-grid-row: 1; -ms-grid-column: 1; grid-area: header; } .basket__subtitle { -webkit-margin-before: 0.2rem !important; margin-block-start: 0.2rem !important; font-size: 1.4rem; font-weight: 700; color: var(--text-color--accent-dark); text-transform: uppercase; } .basket__price { -webkit-margin-before: 1.2rem; margin-block-start: 1.2rem; font-size: 2rem; font-family: var(--title-font); color: var(--text-color--accent-dark); } .basket__image { grid-area: image; } .card--default a > .basket__image { -ms-grid-row: 1; -ms-grid-row-span: 1; -ms-grid-column: 1; } .basket > .basket__image { -ms-grid-row: 1; -ms-grid-row-span: 1; -ms-grid-column: 1; } .table--order .table__cell--product > .basket__image { -ms-grid-row: 1; -ms-grid-row-span: 3; -ms-grid-column: 1; } .basket__counter { -ms-grid-row: 1; -ms-grid-column: 5; grid-area: counter; } .basket__information { display: flex; justify-content: space-between; } .basket__information span { font-family: var(--title-font); } .basket__information + * { -webkit-margin-before: 0.4rem; margin-block-start: 0.4rem; } .basket__information--total + * { -webkit-margin-before: 1em; margin-block-start: 1em; } .order__item + .order__item { -webkit-margin-before: var(--block-padding-block); margin-block-start: var(--block-padding-block); } .order__header { display: grid; grid-template-columns: 1fr; grid-template-rows: auto auto auto; grid-template-areas: "title title title" "tag tag tag" "action action action"; align-items: stretch; gap: 1em 0; } @media screen and ( min-width: 64em ) { .order__header { grid-template-columns: auto var(--grid-gap) auto; grid-template-rows: auto auto; grid-template-areas: "title title title" "tag space action"; gap: 2em 0; } .order__header > .tag__title { -ms-grid-row: 1; -ms-grid-column: 1; -ms-grid-column-span: 5; } .order__header > .dialog__title { -ms-grid-row: 1; -ms-grid-column: 1; -ms-grid-column-span: 5; } .order__header > .hero__title { -ms-grid-row: 1; -ms-grid-column: 1; -ms-grid-column-span: 5; } .order__header > .block__title { -ms-grid-row: 1; -ms-grid-column: 1; -ms-grid-column-span: 5; } .order__header > .card__title { -ms-grid-row: 1; -ms-grid-column: 1; -ms-grid-column-span: 5; } } .order__title { -ms-grid-row: 1; -ms-grid-column: 1; grid-area: title; } .dialog__content > .order__title { -ms-grid-row: 1; -ms-grid-column: 1; } .hero--reduce > .order__title { -ms-grid-row: 2; -ms-grid-column: 1; } .block--heading > .order__title { -ms-grid-row: 2; -ms-grid-column: 1; } .card--default .card__header > .order__title { -ms-grid-row: 2; -ms-grid-column: 1; -ms-grid-column-span: 2; } .order__header > .order__title { -ms-grid-row: 1; -ms-grid-column: 1; -ms-grid-column-span: 5; } .table--order .table__cell--product > .order__title { -ms-grid-row: 1; -ms-grid-column: 3; -ms-grid-column-span: 1; } .order__tag { -ms-grid-row: 3; -ms-grid-column: 1; -ms-grid-column-span: 5; grid-area: tag; -webkit-margin-before: 0 !important; margin-block-start: 0 !important; } .order__action { -ms-grid-row: 5; -ms-grid-column: 1; -ms-grid-column-span: 5; grid-area: action; } @media screen and ( min-width: 64em ) { .order__action { justify-self: end; } } .order__information { --text-color: var(--text-color--accent-dark); -webkit-margin-before: 1em; margin-block-start: 1em; font-size: 2rem; } @media screen and ( min-width: 64em ) { .order__information { -webkit-margin-before: 3em; margin-block-start: 3em; } } .order__information span, .order__information time { --text-color: var(--text-color--accent); display: block; -webkit-margin-before: 0.4rem; margin-block-start: 0.4rem; } .order__information hr { -webkit-border-before: 0.1rem solid var(--stroke-color--lighter); border-block-start: 0.1rem solid var(--stroke-color--lighter); margin-block: 0.8rem; } .order__table { -webkit-margin-before: 1em; margin-block-start: 1em; } @media screen and ( min-width: 64em ) { .order__table { -webkit-margin-before: 2em; margin-block-start: 2em; } } .table--order .table__item + * { -webkit-border-before: 0.1rem solid var(--stroke-color--lighter); border-block-start: 0.1rem solid var(--stroke-color--lighter); } .table--order .table__cell { padding-block: 1em; } .table--order .table__cell:not(.table__cell--product) { padding-inline: 0.5em; } .table--order .table__cell--product { display: grid; grid-template-columns: 4.8rem auto; grid-template-rows: auto auto; grid-template-areas: "image title" "image subtitle"; gap: 0 var(--grid-gap); } @media screen and ( min-width: 48em ) { .table--order .table__cell--product { grid-template-columns: minmax(6.4rem, 9.6rem) auto; } } .table--order .table__title { align-self: end; font-size: 1.8rem; } @media screen and ( min-width: 48em ) { .table--order .table__title { font-size: 2.4rem; } } .table--order .table__subtitle { --text-color: var(--text-color--accent-dark); -webkit-margin-before: 0; margin-block-start: 0; align-self: start; font-size: 1.4rem; font-weight: 700; text-transform: uppercase; } .table--order .table__quantity { --text-color: var(--text-color--accent-dark); display: flex; gap: 0.8rem; } .table--order .table__quantity p { display: inline-block; width: 4rem; background: var(--background-color--bright); line-height: 3.6rem; text-align: center; } @media screen and ( min-width: 48em ) { .table--order .table__quantity p { width: 5.6rem; } } .table--order .table__quantity .icon { --icon-color: var(--text-color--accent); order: -1; } .table--order .table__price { font-size: 1.8rem; font-family: var(--title-font); color: var(--text-color--accent-dark); } @media screen and ( min-width: 48em ) { .table--order .table__price { font-size: 2rem; } } .table__cell { vertical-align: middle; } .table__cell--center { text-align: center; } .table__title { -ms-grid-row: 1; -ms-grid-column: 1; grid-area: title; } .dialog__content > .table__title { -ms-grid-row: 1; -ms-grid-column: 1; } .hero--reduce > .table__title { -ms-grid-row: 2; -ms-grid-column: 1; } .block--heading > .table__title { -ms-grid-row: 2; -ms-grid-column: 1; } .card--default .card__header > .table__title { -ms-grid-row: 2; -ms-grid-column: 1; -ms-grid-column-span: 2; } .order__header > .table__title { -ms-grid-row: 1; -ms-grid-column: 1; -ms-grid-column-span: 5; } .table--order .table__cell--product > .table__title { -ms-grid-row: 1; -ms-grid-column: 3; -ms-grid-column-span: 1; } .table__subtitle { -ms-grid-row: 3; -ms-grid-column: 1; grid-area: subtitle; } .table--order .table__cell--product > .table__subtitle { -ms-grid-row: 3; -ms-grid-column: 3; } .table__image { grid-area: image; } .card--default a > .table__image { -ms-grid-row: 1; -ms-grid-row-span: 1; -ms-grid-column: 1; } .basket > .table__image { -ms-grid-row: 1; -ms-grid-row-span: 1; -ms-grid-column: 1; } .table--order .table__cell--product > .table__image { -ms-grid-row: 1; -ms-grid-row-span: 3; -ms-grid-column: 1; } .footer { --footer-padding-block: 4.8rem; display: grid; grid-template-columns: 1fr; grid-template-rows: auto auto auto auto; grid-template-areas: "logo" "address" "legal" "copyrights"; padding-block: var(--footer-padding-block) 0; align-items: center; font-size: 1.6rem; position: relative; z-index: 2; } @media screen and ( max-width: 47.9375em ) { .footer { justify-items: center; justify-content: center; -webkit-margin-after: var(--header-height); margin-block-end: var(--header-height); gap: 4rem var(--grid-gap); } } @media screen and ( min-width: 48em ) { .footer { grid-template-columns: auto 1fr; grid-template-rows: auto auto auto; grid-template-areas: "logo address" "logo legal" "copyrights copyrights"; } .footer > .hero__logo { -ms-grid-row: 1; -ms-grid-row-span: 2; -ms-grid-column: 1; } } .footer::before { content: ""; display: block; width: 100vw; width: 100dvw; height: 100%; background: var(--background-color--dark); position: absolute; top: 0; left: 50%; transform: translate(-50%, 0); z-index: -1; } .footer__logo { -ms-grid-row: 3; -ms-grid-column: 1; grid-area: logo; } .footer > .footer__logo { -ms-grid-row: 1; -ms-grid-column: 1; } .footer__address, .footer__legal { justify-self: end; } .footer__address { -ms-grid-row: 2; -ms-grid-column: 1; grid-area: address; text-align: right; font-weight: 500; } @media screen and ( max-width: 47.9375em ) { .footer__address { max-width: 75%; text-align: center; justify-self: center; } .footer__address p + p { -webkit-margin-before: 1em; margin-block-start: 1em; } } .footer__legal { -ms-grid-row: 3; -ms-grid-column: 1; grid-area: legal; align-self: end; gap: 0 2.4rem; font-size: 1.4rem; } @media screen and ( max-width: 63.9375em ) { .footer__legal { flex-direction: column; text-align: right; } } @media screen and ( max-width: 47.9375em ) { .footer__legal { gap: 1.2rem 2.4rem; text-align: center; justify-self: center; } } .footer__legal a { display: block; color: var(--text-color--accent-light); } .footer__copyrights { -ms-grid-row: 4; -ms-grid-column: 1; grid-area: copyrights; display: block; padding-block: 2.4rem; -webkit-margin-before: var(--footer-padding-block); margin-block-start: var(--footer-padding-block); color: var(--text-color--accent); text-align: center; font-weight: 500; position: relative; } @media screen and ( max-width: 63.9375em ){ .dialog__content:has(.dialog__image) > .dialog__title { -ms-grid-row: 1; -ms-grid-column: 1; } .dialog__content:has(.dialog__image) > .dialog__rte { -ms-grid-row: 3; -ms-grid-column: 1; } .dialog__content:has(.dialog__image) > .dialog__actions { -ms-grid-row: 4; -ms-grid-column: 1; } .dialog__image { -ms-grid-row: 2; -ms-grid-column: 1; } .dialog__content:has(.dialog__image) > .hero__title { -ms-grid-row: 1; -ms-grid-column: 1; } .dialog__content:has(.dialog__image) > .block__title { -ms-grid-row: 1; -ms-grid-column: 1; } .dialog__content:has(.dialog__image) > .card__title { -ms-grid-row: 1; -ms-grid-column: 1; } .card__image { -ms-grid-row: 2; -ms-grid-column: 1; } .basket__image { -ms-grid-row: 2; -ms-grid-column: 1; } .dialog__content:has(.dialog__image) > .order__title { -ms-grid-row: 1; -ms-grid-column: 1; } .dialog__content:has(.dialog__image) > .table__title { -ms-grid-row: 1; -ms-grid-column: 1; } .table__image { -ms-grid-row: 2; -ms-grid-column: 1; } } @media screen and ( min-width: 64em ){ .dialog__content > .dialog__title { -ms-grid-row: 1; -ms-grid-column: 1; } .dialog__content:has(.dialog__image) > .dialog__title { -ms-grid-row: 1; -ms-grid-column: 3; } .dialog__rte { -ms-grid-row: 2; -ms-grid-column: 1; } .dialog__content:has(.dialog__image) > .dialog__rte { -ms-grid-row: 2; -ms-grid-column: 3; } .dialog__actions { -ms-grid-row: 3; -ms-grid-column: 1; } .dialog__content:has(.dialog__image) > .dialog__actions { -ms-grid-row: 3; -ms-grid-column: 3; } .dialog__content:has(.dialog__image) > .dialog__image { -ms-grid-row: 1; -ms-grid-row-span: 3; -ms-grid-column: 1; } .dialog__content > .hero__title { -ms-grid-row: 1; -ms-grid-column: 1; } .dialog__content:has(.dialog__image) > .hero__title { -ms-grid-row: 1; -ms-grid-column: 3; } .dialog__content > .block__title { -ms-grid-row: 1; -ms-grid-column: 1; } .dialog__content:has(.dialog__image) > .block__title { -ms-grid-row: 1; -ms-grid-column: 3; } .dialog__content > .card__title { -ms-grid-row: 1; -ms-grid-column: 1; } .dialog__content:has(.dialog__image) > .card__title { -ms-grid-row: 1; -ms-grid-column: 3; } .dialog__content:has(.dialog__image) > .card__image { -ms-grid-row: 1; -ms-grid-row-span: 3; -ms-grid-column: 1; } .dialog__content:has(.dialog__image) > .basket__image { -ms-grid-row: 1; -ms-grid-row-span: 3; -ms-grid-column: 1; } .dialog__content > .order__title { -ms-grid-row: 1; -ms-grid-column: 1; } .dialog__content:has(.dialog__image) > .order__title { -ms-grid-row: 1; -ms-grid-column: 3; } .order__header > .order__title { -ms-grid-row: 1; -ms-grid-column: 1; -ms-grid-column-span: 5; } .order__tag { -ms-grid-row: 3; -ms-grid-column: 1; -ms-grid-column-span: 1; } .order__action { -ms-grid-row: 3; -ms-grid-column: 5; -ms-grid-column-span: 1; } .dialog__content > .table__title { -ms-grid-row: 1; -ms-grid-column: 1; } .dialog__content:has(.dialog__image) > .table__title { -ms-grid-row: 1; -ms-grid-column: 3; } .order__header > .table__title { -ms-grid-row: 1; -ms-grid-column: 1; -ms-grid-column-span: 5; } .dialog__content:has(.dialog__image) > .table__image { -ms-grid-row: 1; -ms-grid-row-span: 3; -ms-grid-column: 1; } } @media screen and ( min-width: 48em ){ .footer > .footer__logo { -ms-grid-row: 1; -ms-grid-row-span: 2; -ms-grid-column: 1; } .footer__address { -ms-grid-row: 1; -ms-grid-column: 2; } .footer__legal { -ms-grid-row: 2; -ms-grid-column: 2; } .footer__copyrights { -ms-grid-row: 3; -ms-grid-column: 1; -ms-grid-column-span: 2; } } .footer__copyrights::before { content: ""; display: block; width: 100vw; width: 100dvw; height: 100%; background: var(--background-color); position: absolute; top: 0; left: 50%; transform: translate(-50%, 0); z-index: -1; } .header::before, .header__logo, .header__actions { transition: var(--transition); transition-duration: 0.4s; } body.scrolled .header::before { transform: translate(-50%, 0) scale(1); } body.scrolled .header__actions:not(.header__actions--visible) { transform: translate(0, 0); } body.scrolled .header__logo { transform: translate(-50%, -50%); } body.scrolled .header .button--neutral { --button-color: var(--text-color--accent); } body:not(.scrolled) .header::before { transform: translate(-50%, 0) scale(1, 0); } @media screen and ( max-width: 47.9375em ) { body:not(.scrolled) .header__actions:not(.header__actions--visible) { transform: translate(0, 100%); } } @media screen and ( min-width: 48em ) { body:not(.scrolled) .header__actions:not(.header__actions--visible) { transform: translate(0, -100%); } } body:not(.scrolled) .header__logo { transform: translate(-50%, calc((var(--header-height) + 100%) * -1)) scale(0.7); } .js-select .form__select-list, .js-select .icon::before { transition: var(--transition); } .js-select:not(.open) .form__select-list { opacity: 0; pointer-events: none; } .js-select.open .icon::before { transform: translate(0, 25%) rotate(45deg) scale(-1, -1); } .js-accordion { will-change: content; } .js-accordion::before { transition: var(--transition); } .js-accordion__button .icon { pointer-events: none; } .js-accordion__button .icon::before, .js-accordion__button .icon::after { transition: var(--transition); } .js-accordion__content { opacity: 0; transition: var(--transition); } .js-accordion.expand .accordion__title { --text-color--accent: var(--text-color--accent-dark); } .js-accordion.expand .js-accordion__content { height: var(--accordion-height--open); opacity: 1; } .js-accordion.expand .js-accordion__button .icon:not(.icon--accordion)::before { transform: translate(0, 15%) rotate(45deg) scale(-1); } .js-accordion.expand .js-accordion__button .icon--accordion::after { opacity: 0; } .js-accordion:not(.expand)::before { opacity: 0; } .js-accordion:not(.expand) .js-accordion__content { height: var(--accordion-height--close, auto); opacity: 0; pointer-events: none; } .js-accordion:not(.expand) .js-accordion__button .icon--accordion::before { transform: rotate(90deg); } .js-accordion:not(.expand) .js-accordion__button .icon--accordion::after { transform: rotate(180deg); } .js-split-text span { display: inline-block; white-space: pre; } @keyframes shoppingCartParticle { 0% { translate: 0 0; scale: 0.3; opacity: 0; } 20% { opacity: 1; } 40% { scale: 1; } 60% { opacity: 1; } 100% { opacity: 0; translate: calc(var(--dx) - var(--sx)) calc(var(--dy) - var(--sy)); scale: 0.5; } } @keyframes pop { 0% { scale: 1; } 50% { scale: 1.1; } 100% { scale: 1; } } .js-shopping-cart__add { position: relative; z-index: 10; } .js-shopping-cart__count.animate { animation: pop 0.25s var(--transition-easing); } .particle { display: block; width: 2.4rem; height: 2.4rem; pointer-events: none; color: var(--text-color--accent); font-size: 2.4rem; text-align: center; position: fixed; top: calc(var(--sy) - 1.2rem); left: calc(var(--sx) - 1.2rem); z-index: 10000; } .particle.animate { animation: shoppingCartParticle 0.75s var(--transition-easing) forwards; }