@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: "Brockmann"; src: url("../fonts/brockmann/brockmann-bold-webfont.woff2") format("woff2"), url("../fonts/brockmann/brockmann-bold-webfont.woff") format("woff"), url("../fonts/brockmann/brockmann-bold-webfont.ttf") format("truetype"); font-weight: 700; font-style: normal; font-display: swap; } @font-face { font-family: "Brockmann"; src: url("../fonts/brockmann/brockmann-semibold-webfont.woff2") format("woff2"), url("../fonts/brockmann/brockmann-semibold-webfont.woff") format("woff"), url("../fonts/brockmann/brockmann-semibold-webfont.ttf") format("truetype"); font-weight: 600; font-style: normal; font-display: swap; } @font-face { font-family: "Brockmann"; src: url("../fonts/brockmann/brockmann-medium-webfont.woff2") format("woff2"), url("../fonts/brockmann/brockmann-medium-webfont.woff") format("woff"), url("../fonts/brockmann/brockmann-medium-webfont.ttf") format("truetype"); font-weight: 500; font-style: normal; font-display: swap; } @font-face { font-family: "Cormorant"; src: url("../fonts/cormorant/Cormorant-Bold.woff2") format("woff2"), url("../fonts/cormorant/Cormorant-Bold.woff") format("woff"), url("../fonts/cormorant/Cormorant-Bold.ttf") format("truetype"); font-weight: bold; font-style: normal; font-display: swap; } @font-face { font-family: "llep-icomoon"; src: url("../fonts/icomoon/llep/llep-icomoon.ttf?jb5cpz") format("truetype"), url("../fonts/icomoon/llep/llep-icomoon.woff?jb5cpz") format("woff"), url("../fonts/icomoon/llep/llep-icomoon.svg?jb5cpz#llep-icomoon") format("svg"); font-weight: normal; font-style: normal; font-display: block; } :root { --grid-columns: 12; --grid-gap: 2.4rem; --grid-gap-block: 1.6rem; --grid-space: 2.4rem; --layout-max-width: 168rem; --columns: 12; --container-columns: 12; --minus-gap: 1; --cta-height: 5.6rem; --header-height: 12rem; --block-padding-block: 5.6rem; --radius--xl: 8rem; --radius--lg: 4rem; --radius--md-lg: 3.2rem; --radius--md: 2rem; --radius--default: 1.2rem; --radius--sm: 0.8rem; --white: #FFFFFF; --black: #1E1A18; --green: #A0CE4E; --red: #D9534F; --blue: #2A9ED4; --violet: #6F5490; --grey--bright: #FFFCF9; --grey--lighter: #F0F0F0; --grey--light: #D5D5D5; --grey--medium: #878889; --grey--dark: #333333; --grey--space: #636475; --title-font: Brockmann, sans-serif; --title-font--alt: Cormorant, sans-serif; --text-font: Inter, sans-serif; --text-color: var(--grey--dark); --text-color--bright: var(--grey--bright); --text-color--medium: var(--grey--medium); --text-color--dark: var(--grey--dark); --text-color--accent: var(--green); --title-color: var(--grey--dark); --title-color--bright: var(--grey--bright); --title-color--medium: var(--grey--medium); --title-color--dark: var(--grey--dark); --title-color--accent: var(--green); --title-color--accent-alt: var(--violet); --stroke-color: var(--grey--medium); --stroke-color--light: var(--grey--light); --stroke-color--medium: var(--grey--medium); --stroke-color--accent: var(--green); --stroke-color--dark: var(--grey--dark); --stroke-color--bright: var(--white); --stroke-color--medium: var(--grey--medium); --background-color: var(--grey--bright); --background-color--white: var(--white); --background-color--bright: var(--grey--bright); --background-color--lighter: var(--grey--lighter); --background-color--light: var(--grey--light); --background-color--medium: var(--grey--medium); --background-color--dark: var(--grey--dark); --background-color--space: var(--grey--space); --background-color--accent: var(--green); --background-color--accent-alt: var(--violet); --background-color--circle: var(--green); --icon-color: currentColor; --icon-color-2: currentColor; --error: var(--red); --success: var(--green); --row-background: var(--background-color); --row-spacing: 3em; --block-spacing: 3em; --drop-shadow--xs: 0 0 0.8rem rgba(0, 0, 0, 0.15); --drop-shadow--sm: 0 0 1.2rem rgba(0, 0, 0, 0.15); --drop-shadow--md: 0 0 2.4rem rgba(0, 0, 0, 0.4); --transition-easing: cubic-bezier(0.45, 0, 0.3, 1); --transition-easing--in-out: cubic-bezier(0.4, 0, 0.1, 1); --transition-duration: 0.32s; --transition: all 0.32s cubic-bezier(0.45, 0, 0.3, 1); --z-index-header: 50; --z-index-header-nav: 100; --z-index-header-actions: 150; --z-index-header-logo: 200; --z-index-header-search: 250; --z-index-dialog: 300; } @media screen and ( max-width: 79.9375em ) { :root { --radius--xl: 6rem; } } @media screen and ( min-width: 48em ) { :root { --header-height: 15.6rem; --grid-gap: 3.2rem; --grid-space: 5.6rem; } } @media screen and ( min-width: 64em ) { :root { --row-spacing: 4em; --block-spacing: 3em; --grid-space: 6.4rem; } } @media screen and ( min-width: 80em ) { :root { --grid-gap: 4rem; --grid-space: 8rem; --row-spacing: 5em; --block-spacing: 4em; } } html, body { font-family: "Inter", sans-serif; font-size: 10px; font-weight: 400; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; } .main-wrapper { font-size: 1.6rem; line-height: 2.4rem; } * { color: var(--text-color); } em { font-style: italic; } strong { font-weight: 700; } html, body { background: var(--background-color); color: var(--text-color); } ::-moz-selection { color: var(--selection-color, var(--white)); background: var(--selection-background, var(--green)); } ::selection { color: var(--selection-color, var(--white)); background: var(--selection-background, var(--green)); } mark::-moz-selection { color: var(--selection-color--accent, var(--text-color--dark)); } mark::selection { color: var(--selection-color--accent, var(--text-color--dark)); } .footer__list, .project--purple, .block--purple, .block--green, .header__nav { --text-color: var(--text-color--bright); --title-color: var(--title-color--bright); --title-color--accent: var(--title-color--dark) --stroke-color: var(--stroke-color--bright); --selection-color: var(--text-color--dark); --selection-color--accent: var(--text-color--accent); --selection-background: var(--background-color--white); } .flex { display: flex; flex-wrap: wrap; align-content: flex-start; } .flex--row, .flex--grid { gap: var(--grid-gap-block) var(--grid-gap); } .flex--row > *:not([class*=col-]), .flex--grid > *:not([class*=col-]) { flex: 0 0 100%; } .flex--grid { gap: var(--grid-gap); } .flex--grid > * + * { -webkit-margin-before: 0 !important; margin-block-start: 0 !important; } .flex > [class*=col-] { flex: var(--width, 0 0 calc( (((var(--grid-width, 100%)) - var(--grid-gap) * (var(--container-columns) - 1) ) / var(--container-columns)) * var(--column-size) + var(--grid-gap) * ( var(--column-size) - var(--minus-gap) ) + var(--grid-offset, 0%) )); min-width: var(--min-width, calc( (((var(--grid-width, 100%)) - var(--grid-gap) * (var(--container-columns) - 1) ) / var(--container-columns)) * var(--column-size) + var(--grid-gap) * ( var(--column-size) - var(--minus-gap) ) + var(--grid-offset, 0%) )); } .flex--column { flex-direction: column; } .flex--column.flex--h-center { align-items: center; } .flex .col-auto { --width: 0 0 auto; --min-width: auto; } .flex .col-grow { --width: 1 0 auto; --min-width: auto; } .flex .col-flow { --width: 1 1 0%; --min-width: auto; } .flex--auto > *:not([class*=col-]) { flex: 0 0 auto; max-width: 100%; } .flex--column { flex-wrap: nowrap; flex-direction: column; } .flex--justify { justify-content: center; } .flex--v-top { align-items: flex-start; } .flex--v-stretch { align-items: stretch; } .flex--h-spaced { justify-content: space-between; } .flex--v-center { align-items: center; } .flex--h-center { justify-content: center; } .flex--h-end { justify-content: flex-end; } .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([class*=col-]) { grid-column: 1/-1; } .grid--row { grid-auto-flow: row; } .grid--v-start { align-items: start; } *: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%) ); } [class*=mr-] { margin-right: calc( (((var(--grid-width, 100%)) - var(--grid-gap) * (var(--container-columns) - 1) ) / var(--container-columns)) * var(--offset-right-size) + var(--grid-gap) * ( var(--offset-right-size) - 0 ) + var(--grid-offset, 0%) ); } .start-1 { grid-column-start: 1; } .col-2 { --column-size: 2; } .col-2 > *, .col-2::before, .col-2::after { --container-columns: 2; } .col-2.grid { --grid-columns: 2; } .col-3 { --column-size: 3; } .col-3 > *, .col-3::before, .col-3::after { --container-columns: 3; } .col-3.grid { --grid-columns: 3; } .start-3 { grid-column-start: 3; } .col-4 { --column-size: 4; } .col-4 > *, .col-4::before, .col-4::after { --container-columns: 4; } .col-4.grid { --grid-columns: 4; } .col-5 { --column-size: 5; } .col-5 > *, .col-5::before, .col-5::after { --container-columns: 5; } .col-5.grid { --grid-columns: 5; } .col-6 { --column-size: 6; } .col-6 > *, .col-6::before, .col-6::after { --container-columns: 6; } .col-6.grid { --grid-columns: 6; } .col-8 { --column-size: 8; } .col-8 > *, .col-8::before, .col-8::after { --container-columns: 8; } .col-8.grid { --grid-columns: 8; } .col-9 { --column-size: 9; } .col-9 > *, .col-9::before, .col-9::after { --container-columns: 9; } .col-9.grid { --grid-columns: 9; } .col-10 { --column-size: 10; } .col-10 > *, .col-10::before, .col-10::after { --container-columns: 10; } .col-10.grid { --grid-columns: 10; } .col-12 { --column-size: 12; } .col-12 > *, .col-12::before, .col-12::after { --container-columns: 12; } .col-12.grid { --grid-columns: 12; } .ml-1 { --offset-left-size: 1; } .ml-2 { --offset-left-size: 2; } .ml-3 { --offset-left-size: 3; } .mr-4 { --offset-right-size: 4; } @media screen and ( min-width: 26.75em ) { .col-7--xs { --column-size: 7; } .col-7--xs > *, .col-7--xs::before, .col-7--xs::after { --container-columns: 7; } .col-7--xs.grid { --grid-columns: 7; } .col-auto--xs { --width: 0 0 auto; --min-width: auto; } } @media screen and ( min-width: 40em ) { .col-3--xs-mid { --column-size: 3; } .col-3--xs-mid > *, .col-3--xs-mid::before, .col-3--xs-mid::after { --container-columns: 3; } .col-3--xs-mid.grid { --grid-columns: 3; } .col-5--xs-mid { --column-size: 5; } .col-5--xs-mid > *, .col-5--xs-mid::before, .col-5--xs-mid::after { --container-columns: 5; } .col-5--xs-mid.grid { --grid-columns: 5; } .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; } .col-auto--xs-mid { --width: 0 0 auto; --min-width: auto; } } @media screen and ( min-width: 48em ) { .start-2--sm { grid-column-start: 2; } .col-3--sm { --column-size: 3; } .col-3--sm > *, .col-3--sm::before, .col-3--sm::after { --container-columns: 3; } .col-3--sm.grid { --grid-columns: 3; } .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; } .start-4--sm { grid-column-start: 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-7--sm { --column-size: 7; } .col-7--sm > *, .col-7--sm::before, .col-7--sm::after { --container-columns: 7; } .col-7--sm.grid { --grid-columns: 7; } .start-7--sm { grid-column-start: 7; } .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-9--sm { --column-size: 9; } .col-9--sm > *, .col-9--sm::before, .col-9--sm::after { --container-columns: 9; } .col-9--sm.grid { --grid-columns: 9; } .start-9--sm { grid-column-start: 9; } .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; } .col-auto--sm { --width: 0 0 auto; --min-width: auto; } .col-grow--sm { --width: 1 0 auto; --min-width: auto; } .ml-0--sm { --offset-left-size: 0; } .ml-1--sm { --offset-left-size: 1; } .mr-5--sm { --offset-right-size: 5; } .ml-6--sm { --offset-left-size: 6; } .mr-6--sm { --offset-right-size: 6; } .ml-7--sm { --offset-left-size: 7; } } @media screen and ( min-width: 64em ) { .start-1--md { grid-column-start: 1; } .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; } .start-7--md { grid-column-start: 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-9--md { --column-size: 9; } .col-9--md > *, .col-9--md::before, .col-9--md::after { --container-columns: 9; } .col-9--md.grid { --grid-columns: 9; } .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; } .start-10--md { grid-column-start: 10; } .col-flow--md { --width: 1 1 0%; --min-width: auto; } .ml-1--md { --offset-left-size: 1; } .ml-5--md { --offset-left-size: 5; } .ml-6--md { --offset-left-size: 6; } } @media screen and ( min-width: 80em ) { .col-2--md-mid { --column-size: 2; } .col-2--md-mid > *, .col-2--md-mid::before, .col-2--md-mid::after { --container-columns: 2; } .col-2--md-mid.grid { --grid-columns: 2; } .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-5--md-mid { --column-size: 5; } .col-5--md-mid > *, .col-5--md-mid::before, .col-5--md-mid::after { --container-columns: 5; } .col-5--md-mid.grid { --grid-columns: 5; } .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; } .col-auto--md-mid { --width: 0 0 auto; --min-width: auto; } .ml-0--md-mid { --offset-left-size: 0; } .ml-1--md-mid { --offset-left-size: 1; } .mr-1--md-mid { --offset-right-size: 1; } .ml-2--md-mid { --offset-left-size: 2; } .mr-2--md-mid { --offset-right-size: 2; } .mr-4--md-mid { --offset-right-size: 4; } } @media screen and ( min-width: 90em ) { .col-5--lg-mid { --column-size: 5; } .col-5--lg-mid > *, .col-5--lg-mid::before, .col-5--lg-mid::after { --container-columns: 5; } .col-5--lg-mid.grid { --grid-columns: 5; } } @media screen and ( min-width: 96em ) { .col-5--xl { --column-size: 5; } .col-5--xl > *, .col-5--xl::before, .col-5--xl::after { --container-columns: 5; } .col-5--xl.grid { --grid-columns: 5; } .mr-3--xl { --offset-right-size: 3; } } .first { order: -1; } html { background: var(--background-color--medium); } html, body { overflow-x: hidden; } .main-wrapper { display: grid; grid-template-columns: 1fr; grid-template-rows: var(--header-height) auto 1fr auto; grid-template-areas: "header" "breadcrumb" "content" "footer"; max-width: 100vw; max-width: 100dvw; min-height: 100vh; min-height: 100dvh; position: relative; } .main-wrapper::before { -ms-grid-row: 1; -ms-grid-column: 1; grid-area: header; content: ""; display: block; width: 70vw; height: 70vw; max-width: 100rem; max-height: 100rem; background: var(--background-color--circle); border-radius: 1000rem; position: absolute; top: 0; right: 0; transform: translate(45%, -35%); } .project--create > .main-wrapper::before { -ms-grid-row: 1; -ms-grid-column: 1; } @media screen and ( min-width: 48em ) { .main-wrapper::before { width: 60vw; height: 60vw; transform: translate(20%, -50%); } } .header { -ms-grid-row: 1; -ms-grid-column: 1; grid-area: header; max-width: 100vw; max-width: 100dvw; } .project--create > .header { -ms-grid-row: 1; -ms-grid-column: 1; } .breadcrumb { -ms-grid-row: 2; -ms-grid-column: 1; grid-area: breadcrumb; } .main-content { -ms-grid-row: 3; -ms-grid-column: 1; grid-area: content; -webkit-padding-after: var(--block-spacing); padding-block-end: var(--block-spacing); } .main-content, .main-content__wrapper { display: grid; grid-template-columns: var(--grid-space) minmax(0, 1fr) var(--grid-space); align-items: start; width: 100%; max-width: var(--layout-max-width); 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: 4; -ms-grid-column: 1; grid-area: footer; padding-inline: var(--grid-space); width: 100%; max-width: var(--layout-max-width); margin: 0 auto; } .project--create > .footer { -ms-grid-row: 2; -ms-grid-column: 1; } 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); } @keyframes blink { 0% { opacity: 1; } 50% { opacity: 0.1; } 100% { opacity: 1; } } .project__rte a:not(.button, .header__button, .button-inline), .accordion__rte a:not(.button, .header__button, .button-inline), .card--block .card__content a:not(.button, .header__button, .button-inline), .hero--single .hero__resume a:not(.button, .header__button, .button-inline), .hero--article .hero__resume a:not(.button, .header__button, .button-inline), .hero--account .hero__resume a:not(.button, .header__button, .button-inline), .hero--author .hero__resume a:not(.button, .header__button, .button-inline), .hero__rte a:not(.button, .header__button, .button-inline), .block--rte a:not(.button, .header__button, .button-inline), .block__rte a:not(.button, .header__button, .button-inline), .row--rte a:not(.button, .header__button, .button-inline), .form__rte a:not(.button, .header__button, .button-inline) { color: var(--text-color--accent); text-decoration: underline; text-underline-offset: 0.1em; text-decoration-thickness: 0.1rem; font-weight: 700; transition: var(--transition); } @media (hover: hover) { .project__rte a:hover:not(.button, .header__button, .button-inline), .accordion__rte a:hover:not(.button, .header__button, .button-inline), .card--block .card__content a:hover:not(.button, .header__button, .button-inline), .hero--single .hero__resume a:hover:not(.button, .header__button, .button-inline), .hero--article .hero__resume a:hover:not(.button, .header__button, .button-inline), .hero--account .hero__resume a:hover:not(.button, .header__button, .button-inline), .hero--author .hero__resume a:hover:not(.button, .header__button, .button-inline), .hero__rte a:hover:not(.button, .header__button, .button-inline), .block--rte a:hover:not(.button, .header__button, .button-inline), .block__rte a:hover:not(.button, .header__button, .button-inline), .row--rte a:hover:not(.button, .header__button, .button-inline), .form__rte a:hover:not(.button, .header__button, .button-inline) { text-underline-offset: 0.2em; } } .project__rte, .accordion__rte, .card--block .card__content, .hero--single .hero__resume, .hero--article .hero__resume, .hero--account .hero__resume, .hero--author .hero__resume, .hero__rte, .block--rte, .block__rte, .row--rte, .form__rte { --rte-title-margin-start: 3.2rem; --rte-title-margin-end: 1.6rem; } .project__rte > * + *:not(li, h1, h2, h3, h4, h5, h6), .accordion__rte > * + *:not(li, h1, h2, h3, h4, h5, h6), .card--block .card__content > * + *:not(li, h1, h2, h3, h4, h5, h6), .hero--single .hero__resume > * + *:not(li, h1, h2, h3, h4, h5, h6), .hero--article .hero__resume > * + *:not(li, h1, h2, h3, h4, h5, h6), .hero--account .hero__resume > * + *:not(li, h1, h2, h3, h4, h5, h6), .hero--author .hero__resume > * + *:not(li, h1, h2, h3, h4, h5, h6), .hero__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), .row--rte > * + *:not(li, h1, h2, h3, h4, h5, h6), .form__rte > * + *:not(li, h1, h2, h3, h4, h5, h6) { -webkit-margin-before: 0.5em; margin-block-start: 0.5em; } .project__rte > * + :is(h1, h2, h3, h4, h5, h6), .accordion__rte > * + :is(h1, h2, h3, h4, h5, h6), .card--block .card__content > * + :is(h1, h2, h3, h4, h5, h6), .hero--single .hero__resume > * + :is(h1, h2, h3, h4, h5, h6), .hero--article .hero__resume > * + :is(h1, h2, h3, h4, h5, h6), .hero--account .hero__resume > * + :is(h1, h2, h3, h4, h5, h6), .hero--author .hero__resume > * + :is(h1, h2, h3, h4, h5, h6), .hero__rte > * + :is(h1, h2, h3, h4, h5, h6), .block--rte > * + :is(h1, h2, h3, h4, h5, h6), .block__rte > * + :is(h1, h2, h3, h4, h5, h6), .row--rte > * + :is(h1, h2, h3, h4, h5, h6), .form__rte > * + :is(h1, h2, h3, h4, h5, h6) { -webkit-margin-before: min(2em, var(--rte-title-margin-start)); margin-block-start: min(2em, var(--rte-title-margin-start)); } .project__rte > :is(h1, h2, h3, h4, h5, h6), .accordion__rte > :is(h1, h2, h3, h4, h5, h6), .card--block .card__content > :is(h1, h2, h3, h4, h5, h6), .hero--single .hero__resume > :is(h1, h2, h3, h4, h5, h6), .hero--article .hero__resume > :is(h1, h2, h3, h4, h5, h6), .hero--account .hero__resume > :is(h1, h2, h3, h4, h5, h6), .hero--author .hero__resume > :is(h1, h2, h3, h4, h5, h6), .hero__rte > :is(h1, h2, h3, h4, h5, h6), .block--rte > :is(h1, h2, h3, h4, h5, h6), .block__rte > :is(h1, h2, h3, h4, h5, h6), .row--rte > :is(h1, h2, h3, h4, h5, h6), .form__rte > :is(h1, h2, h3, h4, h5, h6) { -webkit-margin-after: min(1em, var(--rte-title-margin-end)); margin-block-end: min(1em, var(--rte-title-margin-end)); } .project__rte > * + :is(img, .block__media), .accordion__rte > * + :is(img, .block__media), .card--block .card__content > * + :is(img, .block__media), .hero--single .hero__resume > * + :is(img, .block__media), .hero--article .hero__resume > * + :is(img, .block__media), .hero--account .hero__resume > * + :is(img, .block__media), .hero--author .hero__resume > * + :is(img, .block__media), .hero__rte > * + :is(img, .block__media), .block--rte > * + :is(img, .block__media), .block__rte > * + :is(img, .block__media), .row--rte > * + :is(img, .block__media), .form__rte > * + :is(img, .block__media) { -webkit-margin-before: 3.2rem; margin-block-start: 3.2rem; } @media screen and ( min-width: 48em ) { .project__rte > * + :is(img, .block__media), .accordion__rte > * + :is(img, .block__media), .card--block .card__content > * + :is(img, .block__media), .hero--single .hero__resume > * + :is(img, .block__media), .hero--article .hero__resume > * + :is(img, .block__media), .hero--account .hero__resume > * + :is(img, .block__media), .hero--author .hero__resume > * + :is(img, .block__media), .hero__rte > * + :is(img, .block__media), .block--rte > * + :is(img, .block__media), .block__rte > * + :is(img, .block__media), .row--rte > * + :is(img, .block__media), .form__rte > * + :is(img, .block__media) { -webkit-margin-before: 5.6rem; margin-block-start: 5.6rem; } } .project__rte > :is(img, .block__media) + *, .accordion__rte > :is(img, .block__media) + *, .card--block .card__content > :is(img, .block__media) + *, .hero--single .hero__resume > :is(img, .block__media) + *, .hero--article .hero__resume > :is(img, .block__media) + *, .hero--account .hero__resume > :is(img, .block__media) + *, .hero--author .hero__resume > :is(img, .block__media) + *, .hero__rte > :is(img, .block__media) + *, .block--rte > :is(img, .block__media) + *, .block__rte > :is(img, .block__media) + *, .row--rte > :is(img, .block__media) + *, .form__rte > :is(img, .block__media) + * { -webkit-margin-before: 3.2rem; margin-block-start: 3.2rem; } @media screen and ( min-width: 48em ) { .project__rte > :is(img, .block__media) + *, .accordion__rte > :is(img, .block__media) + *, .card--block .card__content > :is(img, .block__media) + *, .hero--single .hero__resume > :is(img, .block__media) + *, .hero--article .hero__resume > :is(img, .block__media) + *, .hero--account .hero__resume > :is(img, .block__media) + *, .hero--author .hero__resume > :is(img, .block__media) + *, .hero__rte > :is(img, .block__media) + *, .block--rte > :is(img, .block__media) + *, .block__rte > :is(img, .block__media) + *, .row--rte > :is(img, .block__media) + *, .form__rte > :is(img, .block__media) + * { -webkit-margin-before: 5.6rem; margin-block-start: 5.6rem; } } .block--colorful .block__rte h3, .block--colorful .block__rte h4, .block--colorful .block__rte h5, .block--colorful .block__rte h6 { --title-color: var(--title-color--accent-alt); } .project__rte, .accordion__rte, .card--block .card__content, .hero--single .hero__resume, .hero--article .hero__resume, .hero--account .hero__resume, .hero--author .hero__resume, .hero__rte, .block--rte, .block__rte, .row--rte, .form__rte { --rte-mark-color: var(--text-color--accent); } .project__rte h3, .accordion__rte h3, .card--block .card__content h3, .hero--single .hero__resume h3, .hero--article .hero__resume h3, .hero--account .hero__resume h3, .hero--author .hero__resume h3, .hero__rte h3, .block--rte h3, .block__rte h3, .row--rte h3, .form__rte h3, .project__rte h4, .accordion__rte h4, .card--block .card__content h4, .hero--single .hero__resume h4, .hero--article .hero__resume h4, .hero--account .hero__resume h4, .hero--author .hero__resume h4, .hero__rte h4, .block--rte h4, .block__rte h4, .row--rte h4, .form__rte h4, .project__rte h5, .accordion__rte h5, .card--block .card__content h5, .hero--single .hero__resume h5, .hero--article .hero__resume h5, .hero--account .hero__resume h5, .hero--author .hero__resume h5, .hero__rte h5, .block--rte h5, .block__rte h5, .row--rte h5, .form__rte h5, .project__rte h6, .accordion__rte h6, .card--block .card__content h6, .hero--single .hero__resume h6, .hero--article .hero__resume h6, .hero--account .hero__resume h6, .hero--author .hero__resume h6, .hero__rte h6, .block--rte h6, .block__rte h6, .row--rte h6, .form__rte h6 { font-weight: 500; } .project__rte small, .accordion__rte small, .card--block .card__content small, .hero--single .hero__resume small, .hero--article .hero__resume small, .hero--account .hero__resume small, .hero--author .hero__resume small, .hero__rte small, .block--rte small, .block__rte small, .row--rte small, .form__rte small { display: inline-block; } .project__rte strong, .accordion__rte strong, .card--block .card__content strong, .hero--single .hero__resume strong, .hero--article .hero__resume strong, .hero--account .hero__resume strong, .hero--author .hero__resume strong, .hero__rte strong, .block--rte strong, .block__rte strong, .row--rte strong, .form__rte strong { color: var(--text-color--accent); } .project__rte ul:not(.block__list), .accordion__rte ul:not(.block__list), .card--block .card__content ul:not(.block__list), .hero--single .hero__resume ul:not(.block__list), .hero--article .hero__resume ul:not(.block__list), .hero--account .hero__resume ul:not(.block__list), .hero--author .hero__resume ul:not(.block__list), .hero__rte ul:not(.block__list), .block--rte ul:not(.block__list), .block__rte ul:not(.block__list), .row--rte ul:not(.block__list), .form__rte ul:not(.block__list), .project__rte ol:not(.block__list), .accordion__rte ol:not(.block__list), .card--block .card__content ol:not(.block__list), .hero--single .hero__resume ol:not(.block__list), .hero--article .hero__resume ol:not(.block__list), .hero--account .hero__resume ol:not(.block__list), .hero--author .hero__resume ol:not(.block__list), .hero__rte ol:not(.block__list), .block--rte ol:not(.block__list), .block__rte ol:not(.block__list), .row--rte ol:not(.block__list), .form__rte ol:not(.block__list) { display: flex; flex-wrap: wrap; flex: 0 0 100%; gap: 0.4rem 2em; } .project__rte ul ul, .accordion__rte ul ul, .card--block .card__content ul ul, .hero--single .hero__resume ul ul, .hero--article .hero__resume ul ul, .hero--account .hero__resume ul ul, .hero--author .hero__resume ul ul, .hero__rte ul ul, .block--rte ul ul, .block__rte ul ul, .row--rte ul ul, .form__rte ul ul, .project__rte ul ol, .accordion__rte ul ol, .card--block .card__content ul ol, .hero--single .hero__resume ul ol, .hero--article .hero__resume ul ol, .hero--account .hero__resume ul ol, .hero--author .hero__resume ul ol, .hero__rte ul ol, .block--rte ul ol, .block__rte ul ol, .row--rte ul ol, .form__rte ul ol, .project__rte ol ul, .accordion__rte ol ul, .card--block .card__content ol ul, .hero--single .hero__resume ol ul, .hero--article .hero__resume ol ul, .hero--account .hero__resume ol ul, .hero--author .hero__resume ol ul, .hero__rte ol ul, .block--rte ol ul, .block__rte ol ul, .row--rte ol ul, .form__rte ol ul, .project__rte ol ol, .accordion__rte ol ol, .card--block .card__content ol ol, .hero--single .hero__resume ol ol, .hero--article .hero__resume ol ol, .hero--account .hero__resume ol ol, .hero--author .hero__resume ol ol, .hero__rte ol ol, .block--rte ol ol, .block__rte ol ol, .row--rte ol ol, .form__rte ol ol { padding-block: 0.4rem; } .project__rte ul ol li, .accordion__rte ul ol li, .card--block .card__content ul ol li, .hero--single .hero__resume ul ol li, .hero--article .hero__resume ul ol li, .hero--account .hero__resume ul ol li, .hero--author .hero__resume ul ol li, .hero__rte ul ol li, .block--rte ul ol li, .block__rte ul ol li, .row--rte ul ol li, .form__rte ul ol li, .project__rte ol ol li, .accordion__rte ol ol li, .card--block .card__content ol ol li, .hero--single .hero__resume ol ol li, .hero--article .hero__resume ol ol li, .hero--account .hero__resume ol ol li, .hero--author .hero__resume ol ol li, .hero__rte ol ol li, .block--rte ol ol li, .block__rte ol ol li, .row--rte ol ol li, .form__rte ol ol li { -webkit-padding-start: 2.5em; padding-inline-start: 2.5em; } .project__rte ul li, .accordion__rte ul li, .card--block .card__content ul li, .hero--single .hero__resume ul li, .hero--article .hero__resume ul li, .hero--account .hero__resume ul li, .hero--author .hero__resume ul li, .hero__rte ul li, .block--rte ul li, .block__rte ul li, .row--rte ul li, .form__rte ul li, .project__rte ol li, .accordion__rte ol li, .card--block .card__content ol li, .hero--single .hero__resume ol li, .hero--article .hero__resume ol li, .hero--account .hero__resume ol li, .hero--author .hero__resume ol li, .hero__rte ol li, .block--rte ol li, .block__rte ol li, .row--rte ol li, .form__rte ol li { padding: 0 1em; -webkit-padding-start: 2em; padding-inline-start: 2em; flex: 0 0 100%; position: relative; } .project__rte ul li > :is(p), .accordion__rte ul li > :is(p), .card--block .card__content ul li > :is(p), .hero--single .hero__resume ul li > :is(p), .hero--article .hero__resume ul li > :is(p), .hero--account .hero__resume ul li > :is(p), .hero--author .hero__resume ul li > :is(p), .hero__rte ul li > :is(p), .block--rte ul li > :is(p), .block__rte ul li > :is(p), .row--rte ul li > :is(p), .form__rte ul li > :is(p), .project__rte ol li > :is(p), .accordion__rte ol li > :is(p), .card--block .card__content ol li > :is(p), .hero--single .hero__resume ol li > :is(p), .hero--article .hero__resume ol li > :is(p), .hero--account .hero__resume ol li > :is(p), .hero--author .hero__resume ol li > :is(p), .hero__rte ol li > :is(p), .block--rte ol li > :is(p), .block__rte ol li > :is(p), .row--rte ol li > :is(p), .form__rte ol li > :is(p) { display: inline-block; } .project__rte ul li::before, .accordion__rte ul li::before, .card--block .card__content ul li::before, .hero--single .hero__resume ul li::before, .hero--article .hero__resume ul li::before, .hero--account .hero__resume ul li::before, .hero--author .hero__resume ul li::before, .hero__rte ul li::before, .block--rte ul li::before, .block__rte ul li::before, .row--rte ul li::before, .form__rte ul li::before, .project__rte ol li::before, .accordion__rte ol li::before, .card--block .card__content ol li::before, .hero--single .hero__resume ol li::before, .hero--article .hero__resume ol li::before, .hero--account .hero__resume ol li::before, .hero--author .hero__resume ol li::before, .hero__rte ol li::before, .block--rte ol li::before, .block__rte ol li::before, .row--rte ol li::before, .form__rte ol li::before { grid-area: mark; color: var(--rte-mark-color); font-weight: 600; position: absolute; left: 0; } .project__rte ul:not(.block__list) > li::before, .accordion__rte ul:not(.block__list) > li::before, .card--block .card__content ul:not(.block__list) > li::before, .hero--single .hero__resume ul:not(.block__list) > li::before, .hero--article .hero__resume ul:not(.block__list) > li::before, .hero--account .hero__resume ul:not(.block__list) > li::before, .hero--author .hero__resume ul:not(.block__list) > li::before, .hero__rte ul:not(.block__list) > li::before, .block--rte ul:not(.block__list) > li::before, .block__rte ul:not(.block__list) > li::before, .row--rte ul:not(.block__list) > li::before, .form__rte ul:not(.block__list) > li::before { content: "•"; -webkit-text-stroke: 0.1rem var(--rte-mark-color); } .project__rte ul:not(.block__list) > li li::before, .accordion__rte ul:not(.block__list) > li li::before, .card--block .card__content ul:not(.block__list) > li li::before, .hero--single .hero__resume ul:not(.block__list) > li li::before, .hero--article .hero__resume ul:not(.block__list) > li li::before, .hero--account .hero__resume ul:not(.block__list) > li li::before, .hero--author .hero__resume ul:not(.block__list) > li li::before, .hero__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, .row--rte ul:not(.block__list) > li li::before, .form__rte ul:not(.block__list) > li li::before { color: transparent; } .project__rte ol:not(.block__list), .accordion__rte ol:not(.block__list), .card--block .card__content ol:not(.block__list), .hero--single .hero__resume ol:not(.block__list), .hero--article .hero__resume ol:not(.block__list), .hero--account .hero__resume ol:not(.block__list), .hero--author .hero__resume ol:not(.block__list), .hero__rte ol:not(.block__list), .block--rte ol:not(.block__list), .block__rte ol:not(.block__list), .row--rte ol:not(.block__list), .form__rte ol:not(.block__list) { counter-reset: index; } .project__rte ol:not(.block__list) > li, .accordion__rte ol:not(.block__list) > li, .card--block .card__content ol:not(.block__list) > li, .hero--single .hero__resume ol:not(.block__list) > li, .hero--article .hero__resume ol:not(.block__list) > li, .hero--account .hero__resume ol:not(.block__list) > li, .hero--author .hero__resume ol:not(.block__list) > li, .hero__rte ol:not(.block__list) > li, .block--rte ol:not(.block__list) > li, .block__rte ol:not(.block__list) > li, .row--rte ol:not(.block__list) > li, .form__rte ol:not(.block__list) > li { counter-increment: index; } .project__rte ol:not(.block__list) > li:before, .accordion__rte ol:not(.block__list) > li:before, .card--block .card__content ol:not(.block__list) > li:before, .hero--single .hero__resume ol:not(.block__list) > li:before, .hero--article .hero__resume ol:not(.block__list) > li:before, .hero--account .hero__resume ol:not(.block__list) > li:before, .hero--author .hero__resume ol:not(.block__list) > li:before, .hero__rte ol:not(.block__list) > li:before, .block--rte ol:not(.block__list) > li:before, .block__rte ol:not(.block__list) > li:before, .row--rte ol:not(.block__list) > li:before, .form__rte ol:not(.block__list) > li:before { content: counters(index, ".", decimal) "."; } .form__filemark::before, .form__filemark::after { content: ""; display: block; width: 100%; height: 100%; border-radius: var(--radius--md-lg); background: var(--background-color--white); position: absolute; top: 0; left: 0; z-index: -1; transition: var(--transition); transition-duration: 0.56s; } @media screen and ( min-width: 64em ) { .form__filemark::before, .form__filemark::after { border-radius: var(--radius--lg); } } .form__filemark::before { box-shadow: var(--drop-shadow--sm); } .form__filemark::after { box-shadow: var(--drop-shadow--sm) inset; opacity: 0; } .form__field--radio-vertical .form__label, .select--radio .select__image { --radiomark-radius: var(--radius--md-lg); border-radius: var(--radiomark-radius); background: var(--background-color--white); position: relative; z-index: 10; } @media screen and ( min-width: 64em ) { .form__field--radio-vertical .form__label, .select--radio .select__image { --radiomark-radius: var(--radius--lg); } } .form__field--radio-vertical .form__label::before, .select--radio .select__image::before, .form__field--radio-vertical .form__label::after, .select--radio .select__image::after { content: ""; display: block; width: 100%; height: 100%; border-radius: inherit; background: transparent !important; position: absolute; top: 0; left: 0; transform: translate(0, 0) !important; --transition-duration: .56s; transition: var(--transition-property, all) var(--transition-duration, 0.32s) var(--transition-easing, ease); } .form__field--radio-vertical .form__label::before, .select--radio .select__image::before { box-shadow: var(--drop-shadow--sm); } .form__field--radio-vertical .form__label::after, .select--radio .select__image::after { border: 0.1rem solid var(--stroke-color--accent); box-shadow: var(--drop-shadow--sm) inset; } .form__field--switch-button:hover .button, .form__field--switch-button:hover .header__button, .form__field--switch-button:hover .select--radio .select__button, .select--radio .form__field--switch-button:hover .select__button, .form__field--switch-button:hover .form__field--select-button .form__select-button, .form__field--select-button .form__field--switch-button:hover .form__select-button, .button:hover, .header__button:hover, .form__field--select-button .form__select-button:hover, .select--radio .select__button:hover { --button-background: var(--button-secondary); --button-icon: var(--button-primary); --button-color: var(--button-primary); } .form__field--switch-button:hover .button .icon, .form__field--switch-button:hover .header__button .icon, .form__field--switch-button:hover .select--radio .select__button .icon, .select--radio .form__field--switch-button:hover .select__button .icon, .form__field--switch-button:hover .form__field--select-button .form__select-button .icon, .form__field--select-button .form__field--switch-button:hover .form__select-button .icon, .button:hover .icon, .header__button:hover .icon, .form__field--select-button .form__select-button:hover .icon, .select--radio .select__button:hover .icon { --icon-color: var(--button-ternary) !important; } .title, .basket__th, .sidebar__item > a, .project__rte h1, .accordion__rte h1, .card--block .card__content h1, .hero--single .hero__resume h1, .hero--article .hero__resume h1, .hero--account .hero__resume h1, .hero--author .hero__resume h1, .hero__rte h1, .block--rte h1, .block__rte h1, .row--rte h1, .form__rte h1, .project__rte h2, .accordion__rte h2, .card--block .card__content h2, .hero--single .hero__resume h2, .hero--article .hero__resume h2, .hero--account .hero__resume h2, .hero--author .hero__resume h2, .hero__rte h2, .block--rte h2, .block__rte h2, .row--rte h2, .form__rte h2, .project__rte h3, .accordion__rte h3, .card--block .card__content h3, .hero--single .hero__resume h3, .hero--article .hero__resume h3, .hero--account .hero__resume h3, .hero--author .hero__resume h3, .hero__rte h3, .block--rte h3, .block__rte h3, .row--rte h3, .form__rte h3, .project__rte h4, .accordion__rte h4, .card--block .card__content h4, .hero--single .hero__resume h4, .hero--article .hero__resume h4, .hero--account .hero__resume h4, .hero--author .hero__resume h4, .hero__rte h4, .block--rte h4, .block__rte h4, .row--rte h4, .form__rte h4, .project__rte h5, .accordion__rte h5, .card--block .card__content h5, .hero--single .hero__resume h5, .hero--article .hero__resume h5, .hero--account .hero__resume h5, .hero--author .hero__resume h5, .hero__rte h5, .block--rte h5, .block__rte h5, .row--rte h5, .form__rte h5, .project__rte h6, .accordion__rte h6, .card--block .card__content h6, .hero--single .hero__resume h6, .hero--article .hero__resume h6, .hero--account .hero__resume h6, .hero--author .hero__resume h6, .hero__rte h6, .block--rte h6, .block__rte h6, .row--rte h6, .form__rte h6 { font-family: var(--title-font); font-weight: 700; line-height: 1.2em; color: var(--title-color); } .title mark, .basket__th mark, .sidebar__item > a mark, .project__rte h1 mark, .accordion__rte h1 mark, .card--block .card__content h1 mark, .hero--single .hero__resume h1 mark, .hero--article .hero__resume h1 mark, .hero--account .hero__resume h1 mark, .hero--author .hero__resume h1 mark, .hero__rte h1 mark, .block--rte h1 mark, .block__rte h1 mark, .row--rte h1 mark, .form__rte h1 mark, .project__rte h2 mark, .accordion__rte h2 mark, .card--block .card__content h2 mark, .hero--single .hero__resume h2 mark, .hero--article .hero__resume h2 mark, .hero--account .hero__resume h2 mark, .hero--author .hero__resume h2 mark, .hero__rte h2 mark, .block--rte h2 mark, .block__rte h2 mark, .row--rte h2 mark, .form__rte h2 mark, .project__rte h3 mark, .accordion__rte h3 mark, .card--block .card__content h3 mark, .hero--single .hero__resume h3 mark, .hero--article .hero__resume h3 mark, .hero--account .hero__resume h3 mark, .hero--author .hero__resume h3 mark, .hero__rte h3 mark, .block--rte h3 mark, .block__rte h3 mark, .row--rte h3 mark, .form__rte h3 mark, .project__rte h4 mark, .accordion__rte h4 mark, .card--block .card__content h4 mark, .hero--single .hero__resume h4 mark, .hero--article .hero__resume h4 mark, .hero--account .hero__resume h4 mark, .hero--author .hero__resume h4 mark, .hero__rte h4 mark, .block--rte h4 mark, .block__rte h4 mark, .row--rte h4 mark, .form__rte h4 mark, .project__rte h5 mark, .accordion__rte h5 mark, .card--block .card__content h5 mark, .hero--single .hero__resume h5 mark, .hero--article .hero__resume h5 mark, .hero--account .hero__resume h5 mark, .hero--author .hero__resume h5 mark, .hero__rte h5 mark, .block--rte h5 mark, .block__rte h5 mark, .row--rte h5 mark, .form__rte h5 mark, .project__rte h6 mark, .accordion__rte h6 mark, .card--block .card__content h6 mark, .hero--single .hero__resume h6 mark, .hero--article .hero__resume h6 mark, .hero--account .hero__resume h6 mark, .hero--author .hero__resume h6 mark, .hero__rte h6 mark, .block--rte h6 mark, .block__rte h6 mark, .row--rte h6 mark, .form__rte h6 mark { color: var(--title-color--accent); } .title--alt { font-family: var(--title-font--alt); } .title--accent { --title-color: var(--title-color--accent); } .title--thin, .basket__th, .sidebar__item > a, .block--colorful .block__rte h3, .block--colorful .block__rte h4, .block--colorful .block__rte h5, .block--colorful .block__rte h6 { font-weight: 500; } .title--demi { font-weight: 600; } .title--center { text-align: center; } .title--xxl { font-size: 4rem; } .title--xl, .project__rte h1, .accordion__rte h1, .card--block .card__content h1, .hero--single .hero__resume h1, .hero--article .hero__resume h1, .hero--account .hero__resume h1, .hero--author .hero__resume h1, .hero__rte h1, .block--rte h1, .block__rte h1, .row--rte h1, .form__rte h1 { font-size: 5.6rem; } .title--lg, .project__rte h2, .accordion__rte h2, .card--block .card__content h2, .hero--single .hero__resume h2, .hero--article .hero__resume h2, .hero--account .hero__resume h2, .hero--author .hero__resume h2, .hero__rte h2, .block--rte h2, .block__rte h2, .row--rte h2, .form__rte h2 { font-size: 3.2rem; } .title--md { font-size: 3.2rem; } .title--sm, .project--create .project__title, .project__rte h3, .accordion__rte h3, .card--block .card__content h3, .hero--single .hero__resume h3, .hero--article .hero__resume h3, .hero--account .hero__resume h3, .hero--author .hero__resume h3, .hero__rte h3, .block--rte h3, .block__rte h3, .row--rte h3, .form__rte h3 { font-size: 2.1rem; } .title--xs, .project__rte h4, .accordion__rte h4, .card--block .card__content h4, .hero--single .hero__resume h4, .hero--article .hero__resume h4, .hero--account .hero__resume h4, .hero--author .hero__resume h4, .hero__rte h4, .block--rte h4, .block__rte h4, .row--rte h4, .form__rte h4 { font-size: 2.4rem; } .title--xxs, .project__rte h5, .accordion__rte h5, .card--block .card__content h5, .hero--single .hero__resume h5, .hero--article .hero__resume h5, .hero--account .hero__resume h5, .hero--author .hero__resume h5, .hero__rte h5, .block--rte h5, .block__rte h5, .row--rte h5, .form__rte h5 { font-size: 1.8rem; } @media screen and ( min-width: 48em ) { .title--xxl { font-size: 4.8rem; } .title--sm, .project--create .project__title, .project__rte h3, .accordion__rte h3, .card--block .card__content h3, .hero--single .hero__resume h3, .hero--article .hero__resume h3, .hero--account .hero__resume h3, .hero--author .hero__resume h3, .hero__rte h3, .block--rte h3, .block__rte h3, .row--rte h3, .form__rte h3 { font-size: 2.4rem; } } @media screen and ( min-width: 64em ) { .title--xxl { font-size: 5.6rem; } } @media screen and ( min-width: 85.375em ) { .title--xxl { font-size: 7.2rem; } .title--lg, .project__rte h2, .accordion__rte h2, .card--block .card__content h2, .hero--single .hero__resume h2, .hero--article .hero__resume h2, .hero--account .hero__resume h2, .hero--author .hero__resume h2, .hero__rte h2, .block--rte h2, .block__rte h2, .row--rte h2, .form__rte h2 { font-size: 4.8rem; } .title--md { font-size: 4rem; } .title--sm, .project--create .project__title, .project__rte h3, .accordion__rte h3, .card--block .card__content h3, .hero--single .hero__resume h3, .hero--article .hero__resume h3, .hero--account .hero__resume h3, .hero--author .hero__resume h3, .hero__rte h3, .block--rte h3, .block__rte h3, .row--rte h3, .form__rte h3 { font-size: 3.2rem; } } @media screen and ( min-width: 120em ) { .title--xxl { font-size: 8rem; } } .button, .header__button, .form__field--select-button .form__select-button, .select--radio .select__button { --button-primary: var(--white); --button-secondary: var(--green); --button-ternary: var(--grey--dark); --button-background: var(--button-primary); --button-icon: var(--button-secondary); --button-color: var(--button-ternary); --button-height: var(--cta-height); display: inline-grid; grid-template-columns: 1fr auto; grid-template-rows: auto; align-items: center; align-content: center; min-height: var(--button-height); padding-inline: 2.4rem; padding-block: 0.8rem; border-radius: 100rem; background: var(--button-background); box-shadow: var(--drop-shadow--sm); cursor: pointer; font-family: var(--text-font); font-size: 1.6rem; font-weight: 400; color: var(--button-color); transition: var(--transition); } @media screen and ( min-width: 64em ) { .button, .header__button, .form__field--select-button .form__select-button, .select--radio .select__button { font-size: 1.8rem; } } .button:has(.icon, i), .header__button:has(.icon, i), .form__field--select-button .form__select-button:has(.icon, i), .select--radio .select__button:has(.icon, i) { padding-inline: 2.4rem 0.8rem; } .button .icon, .header__button .icon, .form__field--select-button .form__select-button .icon, .select--radio .select__button .icon { --icon-color: var(--button-primary); height: 4rem; aspect-ratio: 1/1; -webkit-margin-start: 1em; margin-inline-start: 1em; align-self: center; background: var(--button-icon); border-radius: inherit; pointer-events: none; font-size: 1.2em; transition: var(--transition); } .button--outline, .form__field--select-button .form__select-button { border: 0.1rem solid var(--stroke-color--medium); box-shadow: none; } .button--grey, .button--disabled { --button-secondary: var(--grey--light); } .button--purple { --button-secondary: var(--violet); } .button--disabled { --button-color: var(--grey--light); cursor: none; pointer-events: none; } .button--grey-medium { --button-secondary: var(--grey--medium); } .button-inline { --button-primary: var(--green); display: flex; align-items: center; padding-block: 0.4rem; cursor: pointer; font-size: 1.6rem; line-height: 2.4rem; font-weight: 600; white-space: pre; color: var(--button-primary); transition: var(--transition); } .button-inline span { color: var(--button-primary); pointer-events: none; transition: var(--transition-property, all) var(--transition-duration, 0.32s) var(--transition-easing, ease); } .button-inline .icon { --icon-color: var(--button-primary) !important; -webkit-margin-start: 3.2rem; margin-inline-start: 3.2rem; font-size: 1.2em; pointer-events: none; } .button-inline--secondary { --button-primary: var(--text-color--medium); } .button-inline--thin { font-weight: 500; } .button-inline:hover .icon { transform: translate(0.8rem, 0); } .button-icon { aspect-ratio: 1/1; color: var(--icon-color); } .button-texted { text-decoration: underline; text-underline-offset: 0.1em; text-decoration-thickness: 0.1rem; cursor: pointer; transition: var(--transition); } @media (hover: hover) { .button-texted:hover { text-underline-offset: 0.2em; } } [class^=icon--], [class*=" icon--"] { display: grid; align-items: center; justify-items: center; /* use !important to prevent issues with browser extensions that change fonts */ font-family: "llep-icomoon" !important; speak: never; font-size: 1em; font-style: normal; font-weight: normal; font-variant: normal; text-transform: none; line-height: 1em; aspect-ratio: 1/1; pointer-events: none; /* Better Font Rendering =========== */ -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; transition: var(--transition); } [class^=icon--]::before, [class^=icon--]::after, [class*=" icon--"]::before, [class*=" icon--"]::after { color: var(--icon-color); transition: var(--transition); } .icon--newspaper:before { content: "\e917"; } .icon--paper-square:before { content: "\e911"; } .icon--paper:before { content: "\e912"; } .icon--book:before { content: "\e913"; } .icon--lock:before { content: "\e914"; } .icon--print:before { content: "\e915"; } .icon--upload:before { content: "\e916"; } .icon--plus:before { content: "\e910"; } .icon--youtube:before { content: "\e90f"; } .icon--chevron-right-circle:before { content: "\e900"; } .icon--file-upload--r:before { content: "\e901"; } .icon--home--r:before { content: "\e902"; } .icon--info:before { content: "\e903"; } .icon--key--r:before { content: "\e904"; } .icon--pen--r:before { content: "\e905"; } .icon--search:before { content: "\e906"; } .icon--shopping-cart--l:before { content: "\e907"; } .icon--shopping-cart--r:before { content: "\e908"; } .icon--shopping-cart:before { content: "\e909"; } .icon--tint:before { content: "\e90a"; } .icon--trash--r:before { content: "\e90b"; } .icon--user--l:before { content: "\e90c"; } .icon--user--r:before { content: "\e90d"; } .icon--user:before { content: "\e90e"; } .icon--arrow-right { position: relative; } .icon--arrow-right::before { content: ""; display: block; width: 0.6em; height: 0.2rem; background: var(--icon-color); position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); } .icon--arrow-right::after { content: ""; display: block; width: 0.5em; height: 0.5em; border: 0.2rem solid var(--icon-color); -webkit-border-start: 0; border-inline-start: 0; -webkit-border-after: 0; border-block-end: 0; position: absolute; top: 50%; left: 50%; transform: translate(-35%, -50%) rotate(45deg); } .icon--chevron-right, .icon--chevron-bottom { position: relative; } .icon--chevron-right::before, .icon--chevron-bottom::before { content: ""; width: 0.5em; height: 0.5em; border: 0.1em solid var(--icon-color); -webkit-border-start: 0; border-inline-start: 0; -webkit-border-after: 0; border-block-end: 0; transform: rotate(45deg); } .icon--chevron-left::before { content: ""; width: 0.5em; height: 0.5em; border: 0.1em solid var(--icon-color); -webkit-border-start: 0; border-inline-start: 0; -webkit-border-after: 0; border-block-end: 0; transform: rotate(45deg); } .icon--chevron-left::before { transform: rotate(45deg) scale(-1); } .icon--chevron-bottom::before { transform: translate(0, -25%) rotate(135deg); } .icon--circle-check { width: 1em; height: 1em; border: 0.09375em solid var(--icon-color); border-radius: 100rem; position: relative; } .icon--circle-check::before { content: ""; width: 0.25em; height: 0.45em; -webkit-border-after: 0.09375em solid var(--icon-color); border-block-end: 0.09375em solid var(--icon-color); -webkit-border-end: 0.09375em solid var(--icon-color); border-inline-end: 0.09375em solid var(--icon-color); position: absolute; top: 50%; left: 50%; transform: translate(-50%, -60%) rotate(45deg) scale(1); } .icon--check { position: relative; } .icon--check::before { content: ""; width: 0.4em; height: 0.8em; -webkit-border-after: 0.125em solid var(--icon-color); border-block-end: 0.125em solid var(--icon-color); -webkit-border-end: 0.125em solid var(--icon-color); border-inline-end: 0.125em solid var(--icon-color); position: absolute; top: 50%; left: 50%; transform: translate(-50%, -60%) rotate(45deg) scale(1); } .icon--minus { position: relative; } .icon--minus::before { content: ""; display: block; width: 0.7em; height: 0.09375em; background: var(--icon-color); position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); } .icon--upload:before { transform: scale(0.75); } .icon--cross:before { content: "\e910"; transform: rotate(45deg); } .icon--paper-h::before { content: "\e912"; transform: rotate(-90deg) scale(1, -1); } .icon--paper-square:before { transform: scale(0.7142857143); } .icon--format { width: 1em; border: 0.1rem solid var(--icon-color); position: relative; } .icon--format::before { content: attr(data-text); font-family: var(--text-font); font-size: 0.17em; font-weight: 500; color: var(--icon-color-2); white-space: nowrap; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); } .icon--format-a4, .icon--format-a5 { aspect-ratio: 68/84; } .icon--format-a4 { width: 0.95em; } .icon--format-a5 { width: 0.8em; } .icon--format-poche { width: 0.75em; aspect-ratio: 48/56; } .icon--format-poche-sm { width: 0.78em; aspect-ratio: 48/68; } .icon--format-md { aspect-ratio: 72/84; } .icon--format-square { aspect-ratio: 1/1; } .icon--cyan { --icon-color: #00A2FF; } .icon--magenta { --icon-color: #FF008C; } .icon--yellow { --icon-color: #FFF200; } .icon--black { --icon-color: var(--grey--dark); } .tags__item { --text-color: var(--text-color--medium); font-size: 1.4rem; font-weight: 500; } @media screen and ( min-width: 48.0625em ) { .tags__item { font-size: 1.6rem; } } .tag--pill { --icon-color: var(--text-color--bright); display: inline-grid; grid-template-columns: 1fr auto; grid-template-rows: auto; align-items: center; gap: 1em; min-height: 4rem; padding-inline: 1.6rem; border-radius: 100rem; background: var(--background-color--accent); cursor: pointer; font-family: var(--text-font); font-weight: 400; color: var(--text-color--bright); white-space: pre; position: relative; z-index: 5; } .tag--pill .icon { min-width: 1em; font-size: 1.5em; } .tag--pill .icon--book { font-size: 1em; } .tag--pill .icon--newspaper { font-size: 0.85em; } @media screen and ( max-width: 47.9375em ) { .select--filter { border-block: 0.1rem solid var(--stroke-color); } } .select--filter .select__self { display: none; } @media screen and ( max-width: 47.9375em ) { .select--filter .select__list { -webkit-border-before: 0.1rem solid var(--stroke-color--light); border-block-start: 0.1rem solid var(--stroke-color--light); padding-block: 0.8rem; } } @media screen and ( min-width: 48em ) { .select--filter .select__list { display: flex; flex-wrap: wrap; gap: var(--grid-gap-block) var(--grid-gap); } } .select--filter .select__item { cursor: pointer; } @media screen and ( min-width: 48em ) { .select--filter .select__item { flex: 1; } } .select--filter .select__item > * { pointer-events: none; } .select--filter .select__item:hover .select__value::after, .select--filter .select__item:hover .select__button::after { transform-origin: left center; transform: scale(1, 1); } @media screen and ( min-width: 48em ) { .select--filter .select__wrapper.accordion__content { grid-template-rows: 1fr !important; opacity: 1 !important; pointer-events: auto !important; } .select--filter .select__wrapper.accordion__content .select__list { -webkit-padding-after: 0; padding-block-end: 0; } } .select--filter .select__value, .select--filter .select__button { --text-color: var(--text-color--dark); display: flex; padding-block: 0.4rem; align-items: flex-end; font-family: var(--title-font); font-size: 2.4rem; line-height: 1.25em; font-weight: 500; position: relative; transition: var(--transition); transition-duration: 0.48s; } @media screen and ( min-width: 48em ) { .select--filter .select__value, .select--filter .select__button { padding: 0; min-height: 3.2rem; font-size: 1.6rem; } .select--filter .select__value::before, .select--filter .select__button::before, .select--filter .select__value::after, .select--filter .select__button::after { content: ""; display: block; width: 100%; height: 0.1rem; background: var(--stroke-color); position: absolute; top: 0; left: 0; transition: var(--transition); transition-duration: 0.48s; transition-property: transform; } .select--filter .select__value::after, .select--filter .select__button::after { background: var(--stroke-color--accent); transform-origin: right center; transform: scale(0, 1); } } @media screen and ( min-width: 64em ) { .select--filter .select__value, .select--filter .select__button { min-height: 4.8rem; font-size: 2.1rem; } } @media screen and ( min-width: 80em ) { .select--filter .select__value, .select--filter .select__button { min-height: 5.6rem; font-size: 2.4rem; } } @media screen and ( min-width: 85.375em ) { .select--filter .select__value, .select--filter .select__button { font-size: 2.8rem; } } @media screen and ( min-width: 96em ) { .select--filter .select__value, .select--filter .select__button { min-height: 6.4rem; font-size: 3.2rem; } } .select--filter .select__button { --text-color: var(--text-color--accent); display: grid; grid-template-columns: 1fr auto; grid-template-rows: 1fr; grid-template-areas: "text icon"; align-items: center; width: 100%; padding-block: 0.8rem; font-weight: 700; } @media screen and ( min-width: 48em ) { .select--filter .select__button { display: none; } } .select--filter .select__button .icon { -webkit-margin-end: 0.1em; margin-inline-end: 0.1em; font-size: 1.25em; } .select--filter .select__button > * { pointer-events: none; } .select--radio .select__self { display: none; } .select--radio .select__button { -ms-grid-row: 1; -ms-grid-column: 1; grid-area: label; width: 100%; } .select--radio .select__button > * { pointer-events: none; } .select--radio .select__button span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } @media screen and ( min-width: 48em ) { .select--radio .select__button { display: none; } } .select--radio .select__list { -ms-grid-row: 2; -ms-grid-column: 1; -ms-grid-column-span: 2; --grid-gap: 2em; grid-area: message; display: grid; grid-template-columns: repeat(auto-fit, minmax(10rem, 1fr)); gap: 2.4rem var(--grid-gap); } @media screen and ( min-width: 64em ) { .select--radio .select__list { grid-template-columns: repeat(auto-fit, minmax(13rem, 1fr)); } } .select--radio .select__item { display: grid; grid-template-columns: 100%; grid-template-rows: auto 1fr; grid-template-areas: "image" "value"; gap: 1em; align-items: start; cursor: pointer; } .select--radio .select__item > * { pointer-events: none; } .select--radio .select__value, .select--radio .select--filter .select__button, .select--filter .select--radio .select__button { -ms-grid-row: 3; -ms-grid-column: 1; grid-area: value; text-align: center; font-weight: 500; } .select--radio .select__value span, .select--radio .select--filter .select__button span, .select--filter .select--radio .select__button span { display: block; font-weight: 400; color: var(--text-color--medium); } @media screen and ( min-width: 48em ) and ( max-width: 63.9375em ) { .select--radio .select__value, .select--radio .select--filter .select__button, .select--filter .select--radio .select__button { font-size: 1.4rem; } } .select--radio .select__image { -ms-grid-row: 1; -ms-grid-column: 1; grid-area: image; display: grid; grid-template-columns: 1fr; grid-template-rows: 1fr; grid-template-areas: "icon"; align-items: center; justify-items: center; } .select--radio .select__image img { width: 100%; border-radius: inherit; } .select--radio .select__image--icon { padding: 1.5em 2em; } .select--radio .select__image .icon { -ms-grid-row: 1; -ms-grid-column: 1; grid-area: icon; } .select--radio .select__image .icon:not(.icon--format) { font-size: 2.5em; } @media screen and ( min-width: 64em ) { .select--radio .select__image .icon:not(.icon--format) { font-size: 3.5em; } } .select--radio .select__image .icon--format { --icon-color: var(--text-color--dark); --icon-color-2: var(--text-color--medium); font-size: 3.5em; } .select--radio .select__image::after { opacity: 0; } .select--radio:not(.select--narrow) .select__image { aspect-ratio: 4/3; } .select--radio.select--narrow .select__list { --grid-gap: 1em; grid-template-columns: repeat(auto-fit, minmax(8rem, 1fr)); } .select--radio.select--narrow .select__image--icon { --radiomark-radius: var(--radius--md-lg); padding: 0.8rem; aspect-ratio: 5/7; } .select--radio.select--alt .select__button { display: none; } @media screen and ( max-width: 39.9375em ) { .select--radio.select--alt .select__list { grid-template-columns: 1fr; } .select--radio.select--alt .select__item { grid-template-columns: 1fr 1fr; grid-template-rows: auto; grid-template-areas: "image value"; align-items: center; } .select--radio.select--alt .select__item > .select__value, .select--radio.select--alt .select__item > .select__button, .select--radio.select--alt .select__item > .select__button { -ms-grid-row: 1; -ms-grid-column: 2; } .select--radio.select--alt .select__item > .select__image { -ms-grid-row: 1; -ms-grid-column: 1; } } @media screen and ( max-width: 47.9375em ) { .select--radio:not(.select--alt) { position: relative; } .select--radio:not(.select--alt) .select__button { position: relative; z-index: 3; } .select--radio:not(.select--alt) .select__wrapper { width: 100%; -webkit-padding-before: var(--cta-height); padding-block-start: var(--cta-height); box-sizing: content-box; position: absolute; top: 0; left: 0; } .select--radio:not(.select--alt) .select__wrapper::before, .select--radio:not(.select--alt) .select__wrapper::after { pointer-events: none; } .select--radio:not(.select--alt) .select__wrapper::before { content: ""; display: block; width: calc(100% + 1.6rem); height: calc(100% + 0.8rem); background: var(--background-color--white); box-shadow: var(--drop-shadow--sm); border-radius: calc(var(--cta-height) * 0.5 + 0.8rem); position: absolute; top: -0.8rem; left: 50%; transform: translate(-50%, 0); z-index: -1; } .select--radio:not(.select--alt) .select__wrapper::after { content: ""; display: block; width: calc(100% - 4.8rem); height: 2.4rem; 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: 2.4rem; } .select--radio:not(.select--alt) .select__list { max-height: 18rem; display: block; gap: 0; overflow-y: scroll; -webkit-overflow-scrolling: touch; -ms-overflow-style: none; scrollbar-width: none; } .select--radio:not(.select--alt) .select__item { flex: 0 0 100%; max-width: none !important; padding: 0.8rem 2.4rem; } .select--radio:not(.select--alt) .select__item:last-child { -webkit-margin-after: 0.8rem; margin-block-end: 0.8rem; } .select--radio:not(.select--alt) .select__value, .select--radio:not(.select--alt) .select--filter .select__button, .select--filter .select--radio:not(.select--alt) .select__button { grid-row: 1/-1; text-align: left; } .select--radio:not(.select--alt) .select__value span, .select--radio:not(.select--alt) .select--filter .select__button span, .select--filter .select--radio:not(.select--alt) .select__button span { display: inline; } .select--radio:not(.select--alt) .select__value span::before, .select--radio:not(.select--alt) .select--filter .select__button span::before, .select--filter .select--radio:not(.select--alt) .select__button span::before { content: "("; } .select--radio:not(.select--alt) .select__value span::after, .select--radio:not(.select--alt) .select--filter .select__button span::after, .select--filter .select--radio:not(.select--alt) .select__button span::after { content: ")"; } .select--radio:not(.select--alt) .select__value br, .select--radio:not(.select--alt) .select--filter .select__button br, .select--filter .select--radio:not(.select--alt) .select__button br { display: none; } .select--radio:not(.select--alt) .select__image { display: none; } } .form:where(.form + .form) { -webkit-margin-before: var(--row-spacing); margin-block-start: var(--row-spacing); } .form__title { -webkit-margin-after: 2.4rem; margin-block-end: 2.4rem; } @media screen and ( min-width: 48em ) { .form__title { -webkit-margin-after: 3.2rem; margin-block-end: 3.2rem; } } @media screen and ( min-width: 80em ) { .form__title { -webkit-margin-after: 4rem; margin-block-end: 4rem; } } .form__fieldset + :is(.form__fieldset) { -webkit-margin-before: 3em; margin-block-start: 3em; } @media screen and ( min-width: 64em ) { .form__fieldset + :is(.form__fieldset) { -webkit-margin-before: 4em; margin-block-start: 4em; } } .form__fieldset + :is(.form__wrapper) { -webkit-margin-before: 2em; margin-block-start: 2em; } .form__wrapper--hidden:not(.show) { display: none; } .form__wrapper + :is(.form__wrapper, .form__fieldset, .form__legend) { -webkit-margin-before: 2em; margin-block-start: 2em; } .form__wrapper.flex--row, .form__wrapper.flex--grid { --grid-gap-block: 2em; } .form__wrapper--reduce { --grid-gap-block: 1em !important; } .form__wrapper--narrow { gap: var(--grid-gap-block) 2em; } .form__wrapper--narrow > * { --grid-gap: 2em; } .form__field--select-button { --cta-height: 4.4rem; display: inline-block; width: 100%; min-width: 19.2rem; position: relative; } .form__field--select-button .form__select { display: none; } .form__field--select-button .form__select-button { width: 100%; justify-content: space-between; padding-inline: 1.6rem; color: var(--text-color--medium); font-weight: 500; font-size: 1.6rem; position: relative; z-index: 2; } .form__field--select-button .form__select-button::after { order: 2; content: ""; width: 0.5em; height: 0.5em; -webkit-margin-start: 1.6rem; margin-inline-start: 1.6rem; border: 0.125em solid currentColor; -webkit-border-start: 0; border-inline-start: 0; -webkit-border-before: 0; border-block-start: 0; transform: translate(0, -25%) rotate(45deg); } .form__field--select-button .form__select-list { width: 100%; -webkit-padding-before: calc(var(--cta-height) + 0.2rem); padding-block-start: calc(var(--cta-height) + 0.2rem); -webkit-padding-after: 0.4rem; padding-block-end: 0.4rem; border: 0.1rem solid var(--stroke-color--medium); border-radius: 2.2rem; background: var(--background-color); overflow: hidden; position: absolute; top: 0; } .form__field--select-button .form__select-item { padding: 0.4rem 1.6rem; font-size: 1.6rem; position: relative; z-index: 2; } .form__field--select-button .form__select-item::before { content: ""; display: block; width: calc(100% - 1.2rem); height: calc(100% - 0.4rem); outline: 0.1rem solid var(--stroke-color--light); outline-offset: -0.1rem; background: var(--background-color); border-radius: 2.2rem; opacity: 0; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); z-index: -1; transition: var(--transition); transition-duration: 0.32s; } .form__field--select-button .form__select-item:hover::before { opacity: 1; } .form__field--select-button .form__select-item:not(.active) { cursor: pointer; } .form__field--select-button .form__select-item.active::before { outline-color: var(--stroke-color--accent); opacity: 1; background: var(--background-color--accent); color: var(--text-color--bright); } .form__field--inline { display: grid; grid-template-columns: auto 1fr; grid-template-rows: auto 1fr; grid-template-areas: "label input" "message message"; align-items: center; } .form__field--inline .form__label { -webkit-padding-end: 1em; padding-inline-end: 1em; } .form__field--submit { --grid-gap-block: 1em; } @media screen and ( max-width: 47.9375em ) { .form__field--submit { flex-direction: row; justify-content: center; } } @media screen and ( min-width: 48em ) { .form__field--submit { --grid-gap-block: 2em; } } .form__field--submit .form__rte { text-align: center; } .form__field--checkbox, .form__field--radio { display: grid; grid-template-columns: auto 1fr; grid-template-rows: auto; grid-template-areas: "checkmark label"; align-items: center; gap: 1em; } .form__field--checkbox .form__label, .form__field--radio .form__label { font-size: 1.6rem; font-weight: 400; color: var(--text-color--medium); } .form__field--switch { display: grid; grid-template-columns: auto 1fr; grid-template-rows: auto; grid-template-areas: "switchmark label"; align-items: center; gap: 1em; } .form__field--switch .form__label { --text-color: var(--text-color--dark); font-size: 1.6rem; font-weight: 400; } .form__field--switch-button { display: grid; grid-template-columns: 1fr; grid-template-rows: 1fr; grid-template-areas: "input"; justify-items: end; } .form__field--switch-button > * { -ms-grid-row: 1; -ms-grid-column: 1; grid-area: input; } .form__field--switch-button .form__checkbox { width: 100%; } .form__field--switch-button .form__checkbox:checked ~ .form__add { opacity: 0; } .form__field--switch-button .form__checkbox:checked ~ .form__remove { opacity: 1; } .form__field--switch-button .form__add, .form__field--switch-button .form__remove { pointer-events: none; } .form__field--switch-button .form__remove { opacity: 0; } @media screen and ( max-width: 26.6875em ) { .form__field--switch-button .button, .form__field--switch-button .header__button, .form__field--switch-button .select--radio .select__button, .select--radio .form__field--switch-button .select__button, .form__field--switch-button .form__field--select-button .form__select-button, .form__field--select-button .form__field--switch-button .form__select-button { width: 100%; } } .form__field--radio { grid-template-areas: "radiomark label"; gap: 1em var(--grid-gap); background: var(--background-color--white); box-shadow: var(--drop-shadow--sm); border-radius: 4rem; } .form__field--radio .form__label { --text-color: var(--text-color--dark); display: grid; grid-template-columns: 1fr auto; grid-template-rows: auto auto; grid-template-areas: "title more" "subtitle more"; gap: 0.4rem 1em; padding-block: var(--grid-gap); -webkit-padding-end: var(--grid-gap); padding-inline-end: var(--grid-gap); align-items: center; font-family: var(--title-font); } .form__field--radio .form__radio { border-radius: inherit; } .form__field--radio .form__radiomark { -webkit-margin-start: var(--grid-gap); margin-inline-start: var(--grid-gap); } .form__field--radio-vertical { display: grid; grid-template-columns: 1fr; grid-template-rows: auto auto auto; grid-template-areas: "icons" "label" "radiomark"; padding: 1.5em; border-radius: var(--radius--md-lg); background: var(--background-color--white); justify-items: center; text-align: center; position: relative; z-index: 10; } @media screen and ( min-width: 64em ) { .form__field--radio-vertical { border-radius: var(--radius--lg); } } .form__field--radio-vertical .form__icons { -ms-grid-row: 1; -ms-grid-column: 1; grid-area: icons; font-size: 2.5em; } .form__field--radio-vertical .form__icons .icon--tint { width: 0.75em; height: 0.75em; justify-content: center; } .form__field--radio-vertical .form__label { position: static; -webkit-margin-before: 1.5em; margin-block-start: 1.5em; } .form__field--radio-vertical .form__label__title, .form__field--radio-vertical .form__label__subtitle { font-family: var(--text-font); font-size: 1.6rem; font-weight: 500; color: var(--text-color--dark); } .form__field--radio-vertical .form__label__subtitle { display: block; } .form__field--radio-vertical .form__label::after { opacity: 0; } .form__field--radio-vertical .form__radio:checked ~ .form__label::before { opacity: 0; } .form__field--radio-vertical .form__radio:checked ~ .form__label::after { opacity: 1; } .form__field--radio-vertical .form__radiomark { -webkit-margin-before: 0.5em; margin-block-start: 0.5em; } .form__field--counter { display: grid; grid-template-columns: 1fr auto; grid-template-rows: auto auto auto; grid-template-areas: "label label" "input icon" "message message"; position: relative; } @media screen and ( min-width: 48em ) { .form__field--counter { grid-template-columns: auto 1fr; } } .form__field--counter .form__label { -webkit-margin-after: 0.8rem; margin-block-end: 0.8rem; } .form__field--counter .form__counter { -ms-grid-row: 2; -ms-grid-column: 1; grid-area: input; justify-self: start; } .form__field--counter > .icon { -ms-grid-row: 1; -ms-grid-column: 2; grid-area: icon; justify-self: start; -webkit-margin-start: 1.6rem; margin-inline-start: 1.6rem; } .form__field--counter > .icon--info { font-size: 2.4rem; } .form__field--file { display: grid; grid-template-columns: 12rem 1fr; grid-template-rows: auto auto auto auto; grid-template-areas: "input information" "reset space" "message message" "more more"; align-items: start; gap: 0 var(--grid-gap); } @media screen and ( min-width: 64em ) { .form__field--file { grid-template-columns: minmax(16rem, 1fr) 1fr; } } .form__field--file .form__filemark { -ms-grid-row: 1; -ms-grid-column: 2; grid-area: input; } .form__field--file .form__information { -ms-grid-row: 1; -ms-grid-column: 3; --text-color: var(--text-color--medium); grid-area: information; align-self: center; font-size: 1.2rem; } .form__field--file .form__information li { white-space: nowrap; } .form__field--file .form__message { -ms-grid-row: 2; -ms-grid-column: 1; -ms-grid-column-span: 2; grid-area: message; -webkit-margin-before: 2em; margin-block-start: 2em; } .form__field--file .form__more { -ms-grid-row: 7; -ms-grid-row-span: 1; -ms-grid-column: 1; -ms-grid-column-span: 3; grid-area: more; -webkit-margin-before: 2em; margin-block-start: 2em; } .form__field--file .form__file-reset { -ms-grid-row: 3; -ms-grid-column: 1; grid-area: reset; grid-column: 1/-1; width: 100%; font-size: 1.4rem; padding-block: 0.8rem; -webkit-margin-before: 1em; margin-block-start: 1em; } .form__field--file .form__file-reset, .form__field--file .form__file-reset * { transition: var(--transition); } .form__field--file .form__file-reset:hover, .form__field--file .form__file-reset:hover * { color: var(--text-color--accent); } .form__field--file .form__file-reset > * { pointer-events: none; } .form__field--file > .icon { -ms-grid-row: 1; -ms-grid-column: 2; --icon-color: var(--text-color--accent); grid-area: input; align-self: center; justify-self: center; font-size: 3.2rem; } @media screen and ( min-width: 64em ) { .form__field--file > .icon { font-size: 4.8rem; } } .form__field--file > .icon--check { font-size: 3.2rem; } .form__field--default, .form__field--textarea { display: grid; grid-template-columns: 1fr auto; grid-template-rows: auto auto 1fr; grid-template-areas: "label label" "input icon" "message message"; position: relative; } .form__field--default .form__select, .form__field--textarea .form__select { display: none; } .form__field--default .form__select-button, .form__field--textarea .form__select-button { display: flex; align-items: center; cursor: pointer; position: relative; } .form__field--default .form__select-button::after, .form__field--textarea .form__select-button::after { content: ""; width: 0.5em; height: 0.5em; -webkit-margin-start: auto; margin-inline-start: auto; border: 0.1rem solid var(--text-color); -webkit-border-start: 0; border-inline-start: 0; -webkit-border-before: 0; border-block-start: 0; transform: translate(0, -25%) rotate(45deg); } .form__field--default .form__select-button.default, .form__field--textarea .form__select-button.default { color: var(--text-color--medium); } .form__field--default .form__select-list, .form__field--textarea .form__select-list { grid-row: 2/span 1; width: 100%; padding-block: 0.4rem; background: var(--background-color--white); box-shadow: var(--drop-shadow--sm); position: absolute; top: 100%; z-index: 2; } .form__field--default .form__select-item, .form__field--textarea .form__select-item { padding: 0.6rem 1em; position: relative; transition: var(--transition-property, all) var(--transition-duration, 0.32s) var(--transition-easing, ease); } .form__field--default .form__select-item + .form__select-item::before, .form__field--textarea .form__select-item + .form__select-item::before { content: ""; display: block; width: 100%; height: 0.1rem; padding-inline: inherit; background: var(--stroke-color--light); background-clip: content-box; position: absolute; top: 0; left: 0; } .form__field--default .form__select-item.active, .form__field--textarea .form__select-item.active { color: var(--text-color--accent); } .form__field--default .form__select-item:not(.active), .form__field--textarea .form__select-item:not(.active) { cursor: pointer; } .form__field--default .form__select-item:hover, .form__field--textarea .form__select-item:hover { --text-color: var(--text-color--accent); } .form__field--default .form__counter, .form__field--textarea .form__counter { justify-self: start; -webkit-margin-before: 0.5em; margin-block-start: 0.5em; } .form__field--default .form__input, .form__field--default .form__select-button, .form__field--textarea .form__input, .form__field--textarea .form__select-button { grid-row: input; grid-column: input/icon; } .form__field--default .icon, .form__field--textarea .icon { -ms-grid-row: 1; -ms-grid-column: 2; --icon-color: var(--text-color--medium); grid-area: icon; font-size: 2.4rem; } .form__field--textarea .form__label { -webkit-margin-after: 0.8rem; margin-block-end: 0.8rem; } .form__counter { display: inline-grid; grid-template-columns: auto auto auto; grid-template-rows: auto; grid-template-areas: "decrease count increase"; align-items: center; align-content: center; height: var(--cta-height); padding-inline: 0.8rem; position: relative; z-index: 2; } @media screen and ( max-width: 47.9375em ) { .form__counter { grid-template-columns: auto minmax(auto, 10rem) auto; justify-content: center; } } .form__counter::before { content: ""; display: block; width: calc(100% + 1.6rem); height: var(--cta-height); box-sizing: content-box; grid-column: 1/-1; grid-row: 1/-1; background: var(--background-color--white); box-shadow: var(--drop-shadow--sm); border-radius: 100rem; position: relative; left: -0.8rem; z-index: -1; } @media screen and ( max-width: 47.9375em ) { .form__counter--alt { width: 100%; padding: 0; gap: 2em; } .form__counter--alt::before { grid-column: 2/span 1; } .form__counter--alt .form__action { position: relative; font-size: 2.5em; } .form__counter--alt .form__action::before { content: ""; display: block; width: 1em; height: 1em; border: 0.2rem solid var(--stroke-color--accent); border-radius: 100rem; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); } .form__counter--alt .form__action .icon { font-size: 2.4rem; } .form__counter--alt .form__count { border-bottom: 0; } } @media screen and ( max-width: 47.9375em ) { .form__counter--sm { height: 4rem; gap: 1.2rem; } .form__counter--sm::before { height: 4rem; } .form__counter--sm .form__count { width: 4rem; margin: 0 auto; } .form__counter--sm .form__action { font-size: 2em; } .form__counter--sm .form__action .icon { font-size: 2.1rem; } } .form__count { -ms-grid-row: 1; -ms-grid-column: 2; -webkit-appearance: none; -moz-appearance: none; appearance: none; grid-area: count; width: 4rem; height: 3.6rem; min-width: 0; margin-inline: 0.8rem; -webkit-border-after: 0.1rem solid var(--stroke-color--light); border-block-end: 0.1rem solid var(--stroke-color--light); font-size: 2rem; font-weight: 700; text-align: center; } .summary__product > .form__count { -ms-grid-row: 1; -ms-grid-column: 3; } .form__count::-webkit-outer-spin-button, .form__count::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; } @media screen and ( max-width: 47.9375em ) { .form__count { width: 100%; margin: 0; } } .form__action { --icon-color: var(--text-color--accent); width: 4.4rem; cursor: pointer; font-size: 1.6rem; } .form__action--decrease { -ms-grid-row: 1; -ms-grid-column: 1; grid-area: decrease; } .form__action--increase { -ms-grid-row: 1; -ms-grid-column: 3; grid-area: increase; } .form__action .icon { margin: 0; } .form__input, .form__field--default .form__select-button, .form__field--textarea .form__select-button { -ms-grid-row: 1; -ms-grid-column: 2; grid-area: input; padding-block: 0.4rem; -webkit-border-after: 0.1rem solid var(--stroke-color); border-block-end: 0.1rem solid var(--stroke-color); color: var(--text-color); font-size: 1.6rem; line-height: 2.4rem; transition: var(--transition); } .form__input::-moz-placeholder, .form__field--default .form__select-button::-moz-placeholder, .form__field--textarea .form__select-button::-moz-placeholder { color: var(--text-color--medium); } .form__input::placeholder, .form__field--default .form__select-button::placeholder, .form__field--textarea .form__select-button::placeholder { color: var(--text-color--medium); } .form__input:focus, .form__field--default .form__select-button:focus, .form__field--textarea .form__select-button:focus { --stroke-color: var(--stroke-color--accent); } .form__textarea { -ms-grid-row: 1; -ms-grid-column: 2; grid-area: input; display: block; padding: 0.75em 1em; background: var(--background-color--white); border-radius: var(--radius--md); box-shadow: var(--drop-shadow--sm); } .form__field--switch-button > .form__textarea { -ms-grid-row: 1; -ms-grid-column: 1; } .form__field--counter > .form__textarea { -ms-grid-row: 2; -ms-grid-column: 1; } .form__textarea::-moz-placeholder { color: var(--text-color--medium); } .form__textarea::placeholder { color: var(--text-color--medium); } .form__label { -ms-grid-row: 1; -ms-grid-column: 1; --text-color: var(--text-color--accent); --icon-color: var(--text-color--accent); grid-area: label; cursor: pointer; font-size: 1.2rem; font-weight: 600; } .form__field--checkbox > .form__label, .form__field--radio > .form__label { -ms-grid-row: 1; -ms-grid-column: 3; } .form__field--switch > .form__label { -ms-grid-row: 1; -ms-grid-column: 3; } .form__field--radio > .form__label { -ms-grid-row: 1; -ms-grid-column: 3; } .form__field--radio-vertical > .form__label { -ms-grid-row: 2; -ms-grid-column: 1; } .form__field--counter > .form__label { -ms-grid-row: 1; -ms-grid-column: 1; -ms-grid-column-span: 2; } .form__label .icon { font-size: 2rem; } .form__label a { color: currentColor; text-decoration: underline; text-underline-offset: 0.15em; text-decoration-thickness: 0.1rem; transition: var(--transition); } @media (hover: hover) { .form__label a:hover { color: var(--text-color--accent); } } .form__label__required { color: var(--red); } .form__label__title { -ms-grid-row: 1; -ms-grid-column: 1; grid-area: title; font-weight: 700; font-size: 2rem; } .hero--project .hero__content > .form__label__title { -ms-grid-row: 1; -ms-grid-column: 1; } .card--inline > .form__label__title { -ms-grid-row: 5; -ms-grid-column: 1; -ms-grid-column-span: 3; } .card--block .card__header > .form__label__title { -ms-grid-row: 3; -ms-grid-column: 1; -ms-grid-column-span: 1; } .basket__product-wrapper > .form__label__title { -ms-grid-row: 1; -ms-grid-column: 3; -ms-grid-column-span: 1; } .form__label__subtitle { -ms-grid-row: 3; -ms-grid-column: 1; --text-color: var(--text-color--medium); grid-area: subtitle; font-family: var(--text-font); font-size: 1.6rem; } .basket__product-wrapper > .form__label__subtitle { -ms-grid-row: 3; -ms-grid-column: 3; } .form__label__more { -ms-grid-row: 1; -ms-grid-row-span: 3; -ms-grid-column: 3; --text-color: var(--text-color--accent); grid-area: more; font-size: 2rem; font-weight: 700; } .form__field--file > .form__label__more { -ms-grid-row: 7; -ms-grid-row-span: 1; -ms-grid-column: 1; -ms-grid-column-span: 3; } .form__message { -ms-grid-row: 2; -ms-grid-column: 1; -ms-grid-column-span: 2; grid-area: message; -webkit-margin-before: 0.5em; margin-block-start: 0.5em; font-size: 1.4rem; color: var(--red); } .form__field--counter > .form__message { -ms-grid-row: 3; -ms-grid-column: 1; -ms-grid-column-span: 2; } .form__checkbox, .form__radio { grid-column: 1/-1; grid-row: 1/-1; width: 100%; height: 100%; cursor: pointer; } .form__checkbox:checked ~ .form__checkmark::after, .form__radio:checked ~ .form__checkmark::after { opacity: 1; transform: translate(0%, -75%) rotate(45deg) scale(1); } .form__checkbox:checked ~ .form__switchmark, .form__radio:checked ~ .form__switchmark { background: var(--background-color--accent); border-color: var(--background-color--accent); } .form__checkbox:checked ~ .form__switchmark::after, .form__radio:checked ~ .form__switchmark::after { background: var(--background-color); transform: translate(150%, 0); } .form__checkbox:checked ~ .form__radiomark::after, .form__radio:checked ~ .form__radiomark::after { opacity: 1; transform: translate(-50%, -50%) scale(1); } .form__checkmark { -ms-grid-row: 1; -ms-grid-column: 1; grid-area: checkmark; display: block; width: 1.4rem; height: 1.4rem; border: 0.1rem solid var(--stroke-color--medium); border-radius: 0.2rem; pointer-events: none; position: relative; } .select-multiple__item > .form__checkmark { -ms-grid-row: 1; -ms-grid-column: 1; } .form__checkmark::after { content: ""; display: block; width: 50%; height: 100%; -webkit-border-after: 0.2rem solid var(--stroke-color--accent); border-block-end: 0.2rem solid var(--stroke-color--accent); -webkit-border-end: 0.2rem solid var(--stroke-color--accent); border-inline-end: 0.2rem solid var(--stroke-color--accent); filter: drop-shadow(0.2rem 0.2rem 0 var(--background-color)) drop-shadow(-0.2rem -0.2rem 0 var(--background-color)); opacity: 0; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%) rotate(45deg) scale(0); transition: var(--transition); } .form__switchmark { -ms-grid-row: 1; -ms-grid-column: 1; grid-area: switchmark; width: 8.5rem; border: 0.5rem solid var(--background-color--white); pointer-events: none; border-radius: 100rem; background: var(--background-color--white); box-shadow: var(--drop-shadow--sm); transition: var(--transition); } .form__switchmark::after { content: ""; display: block; width: 3rem; height: 3rem; border-radius: 100rem; background: var(--background-color--light); transition: var(--transition); } .form__radiomark { -ms-grid-row: 1; -ms-grid-column: 1; grid-area: radiomark; display: block; width: 3.2rem; height: 3.2rem; border: 0.1rem solid var(--stroke-color--medium); border-radius: 100rem; pointer-events: none; position: relative; } .form__field--radio-vertical > .form__radiomark { -ms-grid-row: 3; -ms-grid-column: 1; } .form__radiomark::after { content: ""; display: block; width: 1.8rem; height: 1.8rem; background: var(--background-color--accent); border-radius: 100rem; opacity: 0; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%) scale(0); transition: var(--transition); } .form__filemark { display: block; aspect-ratio: 3/2; width: 100%; pointer-events: none; position: relative; } .form__file { -ms-grid-row: 1; -ms-grid-column: 2; grid-area: input; width: 100%; height: 100%; border-radius: var(--radius--lg); opacity: 0; cursor: pointer; } .form__field--switch-button > .form__file { -ms-grid-row: 1; -ms-grid-column: 1; } .form__field--counter > .form__file { -ms-grid-row: 2; -ms-grid-column: 1; } .form__legend { font-size: 1.4rem; } .form__legend .title, .form__legend .basket__th, .form__legend .sidebar__item > a, .form__legend .project__rte h1, .form__legend .accordion__rte h1, .form__legend .card--block .card__content h1, .card--block .form__legend .card__content h1, .form__legend .hero--single .hero__resume h1, .hero--single .form__legend .hero__resume h1, .form__legend .hero--article .hero__resume h1, .hero--article .form__legend .hero__resume h1, .form__legend .hero--account .hero__resume h1, .hero--account .form__legend .hero__resume h1, .form__legend .hero--author .hero__resume h1, .hero--author .form__legend .hero__resume h1, .form__legend .hero__rte h1, .form__legend .block--rte h1, .form__legend .block__rte h1, .form__legend .row--rte h1, .form__legend .form__rte h1, .project__rte .form__legend h1, .accordion__rte .form__legend h1, .card--block .card__content .form__legend h1, .hero--single .hero__resume .form__legend h1, .hero--article .hero__resume .form__legend h1, .hero--account .hero__resume .form__legend h1, .hero--author .hero__resume .form__legend h1, .hero__rte .form__legend h1, .block--rte .form__legend h1, .block__rte .form__legend h1, .row--rte .form__legend h1, .form__rte .form__legend h1, .form__legend .project__rte h2, .form__legend .accordion__rte h2, .form__legend .card--block .card__content h2, .card--block .form__legend .card__content h2, .form__legend .hero--single .hero__resume h2, .hero--single .form__legend .hero__resume h2, .form__legend .hero--article .hero__resume h2, .hero--article .form__legend .hero__resume h2, .form__legend .hero--account .hero__resume h2, .hero--account .form__legend .hero__resume h2, .form__legend .hero--author .hero__resume h2, .hero--author .form__legend .hero__resume h2, .form__legend .hero__rte h2, .form__legend .block--rte h2, .form__legend .block__rte h2, .form__legend .row--rte h2, .form__legend .form__rte h2, .project__rte .form__legend h2, .accordion__rte .form__legend h2, .card--block .card__content .form__legend h2, .hero--single .hero__resume .form__legend h2, .hero--article .hero__resume .form__legend h2, .hero--account .hero__resume .form__legend h2, .hero--author .hero__resume .form__legend h2, .hero__rte .form__legend h2, .block--rte .form__legend h2, .block__rte .form__legend h2, .row--rte .form__legend h2, .form__rte .form__legend h2, .form__legend .project__rte h3, .form__legend .accordion__rte h3, .form__legend .card--block .card__content h3, .card--block .form__legend .card__content h3, .form__legend .hero--single .hero__resume h3, .hero--single .form__legend .hero__resume h3, .form__legend .hero--article .hero__resume h3, .hero--article .form__legend .hero__resume h3, .form__legend .hero--account .hero__resume h3, .hero--account .form__legend .hero__resume h3, .form__legend .hero--author .hero__resume h3, .hero--author .form__legend .hero__resume h3, .form__legend .hero__rte h3, .form__legend .block--rte h3, .form__legend .block__rte h3, .form__legend .row--rte h3, .form__legend .form__rte h3, .project__rte .form__legend h3, .accordion__rte .form__legend h3, .card--block .card__content .form__legend h3, .hero--single .hero__resume .form__legend h3, .hero--article .hero__resume .form__legend h3, .hero--account .hero__resume .form__legend h3, .hero--author .hero__resume .form__legend h3, .hero__rte .form__legend h3, .block--rte .form__legend h3, .block__rte .form__legend h3, .row--rte .form__legend h3, .form__rte .form__legend h3, .form__legend .project__rte h4, .form__legend .accordion__rte h4, .form__legend .card--block .card__content h4, .card--block .form__legend .card__content h4, .form__legend .hero--single .hero__resume h4, .hero--single .form__legend .hero__resume h4, .form__legend .hero--article .hero__resume h4, .hero--article .form__legend .hero__resume h4, .form__legend .hero--account .hero__resume h4, .hero--account .form__legend .hero__resume h4, .form__legend .hero--author .hero__resume h4, .hero--author .form__legend .hero__resume h4, .form__legend .hero__rte h4, .form__legend .block--rte h4, .form__legend .block__rte h4, .form__legend .row--rte h4, .form__legend .form__rte h4, .project__rte .form__legend h4, .accordion__rte .form__legend h4, .card--block .card__content .form__legend h4, .hero--single .hero__resume .form__legend h4, .hero--article .hero__resume .form__legend h4, .hero--account .hero__resume .form__legend h4, .hero--author .hero__resume .form__legend h4, .hero__rte .form__legend h4, .block--rte .form__legend h4, .block__rte .form__legend h4, .row--rte .form__legend h4, .form__rte .form__legend h4, .form__legend .project__rte h5, .form__legend .accordion__rte h5, .form__legend .card--block .card__content h5, .card--block .form__legend .card__content h5, .form__legend .hero--single .hero__resume h5, .hero--single .form__legend .hero__resume h5, .form__legend .hero--article .hero__resume h5, .hero--article .form__legend .hero__resume h5, .form__legend .hero--account .hero__resume h5, .hero--account .form__legend .hero__resume h5, .form__legend .hero--author .hero__resume h5, .hero--author .form__legend .hero__resume h5, .form__legend .hero__rte h5, .form__legend .block--rte h5, .form__legend .block__rte h5, .form__legend .row--rte h5, .form__legend .form__rte h5, .project__rte .form__legend h5, .accordion__rte .form__legend h5, .card--block .card__content .form__legend h5, .hero--single .hero__resume .form__legend h5, .hero--article .hero__resume .form__legend h5, .hero--account .hero__resume .form__legend h5, .hero--author .hero__resume .form__legend h5, .hero__rte .form__legend h5, .block--rte .form__legend h5, .block__rte .form__legend h5, .row--rte .form__legend h5, .form__rte .form__legend h5, .form__legend .project__rte h6, .form__legend .accordion__rte h6, .form__legend .card--block .card__content h6, .card--block .form__legend .card__content h6, .form__legend .hero--single .hero__resume h6, .hero--single .form__legend .hero__resume h6, .form__legend .hero--article .hero__resume h6, .hero--article .form__legend .hero__resume h6, .form__legend .hero--account .hero__resume h6, .hero--account .form__legend .hero__resume h6, .form__legend .hero--author .hero__resume h6, .hero--author .form__legend .hero__resume h6, .form__legend .hero__rte h6, .form__legend .block--rte h6, .form__legend .block__rte h6, .form__legend .row--rte h6, .form__legend .form__rte h6, .project__rte .form__legend h6, .accordion__rte .form__legend h6, .card--block .card__content .form__legend h6, .hero--single .hero__resume .form__legend h6, .hero--article .hero__resume .form__legend h6, .hero--account .hero__resume .form__legend h6, .hero--author .hero__resume .form__legend h6, .hero__rte .form__legend h6, .block--rte .form__legend h6, .block__rte .form__legend h6, .row--rte .form__legend h6, .form__rte .form__legend h6 { font-size: 2.4rem; } @media screen and ( min-width: 48em ) { .form__legend .title, .form__legend .basket__th, .form__legend .sidebar__item > a, .form__legend .project__rte h1, .form__legend .accordion__rte h1, .form__legend .card--block .card__content h1, .card--block .form__legend .card__content h1, .form__legend .hero--single .hero__resume h1, .hero--single .form__legend .hero__resume h1, .form__legend .hero--article .hero__resume h1, .hero--article .form__legend .hero__resume h1, .form__legend .hero--account .hero__resume h1, .hero--account .form__legend .hero__resume h1, .form__legend .hero--author .hero__resume h1, .hero--author .form__legend .hero__resume h1, .form__legend .hero__rte h1, .form__legend .block--rte h1, .form__legend .block__rte h1, .form__legend .row--rte h1, .form__legend .form__rte h1, .project__rte .form__legend h1, .accordion__rte .form__legend h1, .card--block .card__content .form__legend h1, .hero--single .hero__resume .form__legend h1, .hero--article .hero__resume .form__legend h1, .hero--account .hero__resume .form__legend h1, .hero--author .hero__resume .form__legend h1, .hero__rte .form__legend h1, .block--rte .form__legend h1, .block__rte .form__legend h1, .row--rte .form__legend h1, .form__rte .form__legend h1, .form__legend .project__rte h2, .form__legend .accordion__rte h2, .form__legend .card--block .card__content h2, .card--block .form__legend .card__content h2, .form__legend .hero--single .hero__resume h2, .hero--single .form__legend .hero__resume h2, .form__legend .hero--article .hero__resume h2, .hero--article .form__legend .hero__resume h2, .form__legend .hero--account .hero__resume h2, .hero--account .form__legend .hero__resume h2, .form__legend .hero--author .hero__resume h2, .hero--author .form__legend .hero__resume h2, .form__legend .hero__rte h2, .form__legend .block--rte h2, .form__legend .block__rte h2, .form__legend .row--rte h2, .form__legend .form__rte h2, .project__rte .form__legend h2, .accordion__rte .form__legend h2, .card--block .card__content .form__legend h2, .hero--single .hero__resume .form__legend h2, .hero--article .hero__resume .form__legend h2, .hero--account .hero__resume .form__legend h2, .hero--author .hero__resume .form__legend h2, .hero__rte .form__legend h2, .block--rte .form__legend h2, .block__rte .form__legend h2, .row--rte .form__legend h2, .form__rte .form__legend h2, .form__legend .project__rte h3, .form__legend .accordion__rte h3, .form__legend .card--block .card__content h3, .card--block .form__legend .card__content h3, .form__legend .hero--single .hero__resume h3, .hero--single .form__legend .hero__resume h3, .form__legend .hero--article .hero__resume h3, .hero--article .form__legend .hero__resume h3, .form__legend .hero--account .hero__resume h3, .hero--account .form__legend .hero__resume h3, .form__legend .hero--author .hero__resume h3, .hero--author .form__legend .hero__resume h3, .form__legend .hero__rte h3, .form__legend .block--rte h3, .form__legend .block__rte h3, .form__legend .row--rte h3, .form__legend .form__rte h3, .project__rte .form__legend h3, .accordion__rte .form__legend h3, .card--block .card__content .form__legend h3, .hero--single .hero__resume .form__legend h3, .hero--article .hero__resume .form__legend h3, .hero--account .hero__resume .form__legend h3, .hero--author .hero__resume .form__legend h3, .hero__rte .form__legend h3, .block--rte .form__legend h3, .block__rte .form__legend h3, .row--rte .form__legend h3, .form__rte .form__legend h3, .form__legend .project__rte h4, .form__legend .accordion__rte h4, .form__legend .card--block .card__content h4, .card--block .form__legend .card__content h4, .form__legend .hero--single .hero__resume h4, .hero--single .form__legend .hero__resume h4, .form__legend .hero--article .hero__resume h4, .hero--article .form__legend .hero__resume h4, .form__legend .hero--account .hero__resume h4, .hero--account .form__legend .hero__resume h4, .form__legend .hero--author .hero__resume h4, .hero--author .form__legend .hero__resume h4, .form__legend .hero__rte h4, .form__legend .block--rte h4, .form__legend .block__rte h4, .form__legend .row--rte h4, .form__legend .form__rte h4, .project__rte .form__legend h4, .accordion__rte .form__legend h4, .card--block .card__content .form__legend h4, .hero--single .hero__resume .form__legend h4, .hero--article .hero__resume .form__legend h4, .hero--account .hero__resume .form__legend h4, .hero--author .hero__resume .form__legend h4, .hero__rte .form__legend h4, .block--rte .form__legend h4, .block__rte .form__legend h4, .row--rte .form__legend h4, .form__rte .form__legend h4, .form__legend .project__rte h5, .form__legend .accordion__rte h5, .form__legend .card--block .card__content h5, .card--block .form__legend .card__content h5, .form__legend .hero--single .hero__resume h5, .hero--single .form__legend .hero__resume h5, .form__legend .hero--article .hero__resume h5, .hero--article .form__legend .hero__resume h5, .form__legend .hero--account .hero__resume h5, .hero--account .form__legend .hero__resume h5, .form__legend .hero--author .hero__resume h5, .hero--author .form__legend .hero__resume h5, .form__legend .hero__rte h5, .form__legend .block--rte h5, .form__legend .block__rte h5, .form__legend .row--rte h5, .form__legend .form__rte h5, .project__rte .form__legend h5, .accordion__rte .form__legend h5, .card--block .card__content .form__legend h5, .hero--single .hero__resume .form__legend h5, .hero--article .hero__resume .form__legend h5, .hero--account .hero__resume .form__legend h5, .hero--author .hero__resume .form__legend h5, .hero__rte .form__legend h5, .block--rte .form__legend h5, .block__rte .form__legend h5, .row--rte .form__legend h5, .form__rte .form__legend h5, .form__legend .project__rte h6, .form__legend .accordion__rte h6, .form__legend .card--block .card__content h6, .card--block .form__legend .card__content h6, .form__legend .hero--single .hero__resume h6, .hero--single .form__legend .hero__resume h6, .form__legend .hero--article .hero__resume h6, .hero--article .form__legend .hero__resume h6, .form__legend .hero--account .hero__resume h6, .hero--account .form__legend .hero__resume h6, .form__legend .hero--author .hero__resume h6, .hero--author .form__legend .hero__resume h6, .form__legend .hero__rte h6, .form__legend .block--rte h6, .form__legend .block__rte h6, .form__legend .row--rte h6, .form__legend .form__rte h6, .project__rte .form__legend h6, .accordion__rte .form__legend h6, .card--block .card__content .form__legend h6, .hero--single .hero__resume .form__legend h6, .hero--article .hero__resume .form__legend h6, .hero--account .hero__resume .form__legend h6, .hero--author .hero__resume .form__legend h6, .hero__rte .form__legend h6, .block--rte .form__legend h6, .block__rte .form__legend h6, .row--rte .form__legend h6, .form__rte .form__legend h6 { font-size: 1.8rem; } } .form__legend .title + *, .form__legend .basket__th + *, .form__legend .sidebar__item > a + *, .form__legend .project__rte h1 + *, .form__legend .accordion__rte h1 + *, .form__legend .card--block .card__content h1 + *, .card--block .form__legend .card__content h1 + *, .form__legend .hero--single .hero__resume h1 + *, .hero--single .form__legend .hero__resume h1 + *, .form__legend .hero--article .hero__resume h1 + *, .hero--article .form__legend .hero__resume h1 + *, .form__legend .hero--account .hero__resume h1 + *, .hero--account .form__legend .hero__resume h1 + *, .form__legend .hero--author .hero__resume h1 + *, .hero--author .form__legend .hero__resume h1 + *, .form__legend .hero__rte h1 + *, .form__legend .block--rte h1 + *, .form__legend .block__rte h1 + *, .form__legend .row--rte h1 + *, .form__legend .form__rte h1 + *, .project__rte .form__legend h1 + *, .accordion__rte .form__legend h1 + *, .card--block .card__content .form__legend h1 + *, .hero--single .hero__resume .form__legend h1 + *, .hero--article .hero__resume .form__legend h1 + *, .hero--account .hero__resume .form__legend h1 + *, .hero--author .hero__resume .form__legend h1 + *, .hero__rte .form__legend h1 + *, .block--rte .form__legend h1 + *, .block__rte .form__legend h1 + *, .row--rte .form__legend h1 + *, .form__rte .form__legend h1 + *, .form__legend .project__rte h2 + *, .form__legend .accordion__rte h2 + *, .form__legend .card--block .card__content h2 + *, .card--block .form__legend .card__content h2 + *, .form__legend .hero--single .hero__resume h2 + *, .hero--single .form__legend .hero__resume h2 + *, .form__legend .hero--article .hero__resume h2 + *, .hero--article .form__legend .hero__resume h2 + *, .form__legend .hero--account .hero__resume h2 + *, .hero--account .form__legend .hero__resume h2 + *, .form__legend .hero--author .hero__resume h2 + *, .hero--author .form__legend .hero__resume h2 + *, .form__legend .hero__rte h2 + *, .form__legend .block--rte h2 + *, .form__legend .block__rte h2 + *, .form__legend .row--rte h2 + *, .form__legend .form__rte h2 + *, .project__rte .form__legend h2 + *, .accordion__rte .form__legend h2 + *, .card--block .card__content .form__legend h2 + *, .hero--single .hero__resume .form__legend h2 + *, .hero--article .hero__resume .form__legend h2 + *, .hero--account .hero__resume .form__legend h2 + *, .hero--author .hero__resume .form__legend h2 + *, .hero__rte .form__legend h2 + *, .block--rte .form__legend h2 + *, .block__rte .form__legend h2 + *, .row--rte .form__legend h2 + *, .form__rte .form__legend h2 + *, .form__legend .project__rte h3 + *, .form__legend .accordion__rte h3 + *, .form__legend .card--block .card__content h3 + *, .card--block .form__legend .card__content h3 + *, .form__legend .hero--single .hero__resume h3 + *, .hero--single .form__legend .hero__resume h3 + *, .form__legend .hero--article .hero__resume h3 + *, .hero--article .form__legend .hero__resume h3 + *, .form__legend .hero--account .hero__resume h3 + *, .hero--account .form__legend .hero__resume h3 + *, .form__legend .hero--author .hero__resume h3 + *, .hero--author .form__legend .hero__resume h3 + *, .form__legend .hero__rte h3 + *, .form__legend .block--rte h3 + *, .form__legend .block__rte h3 + *, .form__legend .row--rte h3 + *, .form__legend .form__rte h3 + *, .project__rte .form__legend h3 + *, .accordion__rte .form__legend h3 + *, .card--block .card__content .form__legend h3 + *, .hero--single .hero__resume .form__legend h3 + *, .hero--article .hero__resume .form__legend h3 + *, .hero--account .hero__resume .form__legend h3 + *, .hero--author .hero__resume .form__legend h3 + *, .hero__rte .form__legend h3 + *, .block--rte .form__legend h3 + *, .block__rte .form__legend h3 + *, .row--rte .form__legend h3 + *, .form__rte .form__legend h3 + *, .form__legend .project__rte h4 + *, .form__legend .accordion__rte h4 + *, .form__legend .card--block .card__content h4 + *, .card--block .form__legend .card__content h4 + *, .form__legend .hero--single .hero__resume h4 + *, .hero--single .form__legend .hero__resume h4 + *, .form__legend .hero--article .hero__resume h4 + *, .hero--article .form__legend .hero__resume h4 + *, .form__legend .hero--account .hero__resume h4 + *, .hero--account .form__legend .hero__resume h4 + *, .form__legend .hero--author .hero__resume h4 + *, .hero--author .form__legend .hero__resume h4 + *, .form__legend .hero__rte h4 + *, .form__legend .block--rte h4 + *, .form__legend .block__rte h4 + *, .form__legend .row--rte h4 + *, .form__legend .form__rte h4 + *, .project__rte .form__legend h4 + *, .accordion__rte .form__legend h4 + *, .card--block .card__content .form__legend h4 + *, .hero--single .hero__resume .form__legend h4 + *, .hero--article .hero__resume .form__legend h4 + *, .hero--account .hero__resume .form__legend h4 + *, .hero--author .hero__resume .form__legend h4 + *, .hero__rte .form__legend h4 + *, .block--rte .form__legend h4 + *, .block__rte .form__legend h4 + *, .row--rte .form__legend h4 + *, .form__rte .form__legend h4 + *, .form__legend .project__rte h5 + *, .form__legend .accordion__rte h5 + *, .form__legend .card--block .card__content h5 + *, .card--block .form__legend .card__content h5 + *, .form__legend .hero--single .hero__resume h5 + *, .hero--single .form__legend .hero__resume h5 + *, .form__legend .hero--article .hero__resume h5 + *, .hero--article .form__legend .hero__resume h5 + *, .form__legend .hero--account .hero__resume h5 + *, .hero--account .form__legend .hero__resume h5 + *, .form__legend .hero--author .hero__resume h5 + *, .hero--author .form__legend .hero__resume h5 + *, .form__legend .hero__rte h5 + *, .form__legend .block--rte h5 + *, .form__legend .block__rte h5 + *, .form__legend .row--rte h5 + *, .form__legend .form__rte h5 + *, .project__rte .form__legend h5 + *, .accordion__rte .form__legend h5 + *, .card--block .card__content .form__legend h5 + *, .hero--single .hero__resume .form__legend h5 + *, .hero--article .hero__resume .form__legend h5 + *, .hero--account .hero__resume .form__legend h5 + *, .hero--author .hero__resume .form__legend h5 + *, .hero__rte .form__legend h5 + *, .block--rte .form__legend h5 + *, .block__rte .form__legend h5 + *, .row--rte .form__legend h5 + *, .form__rte .form__legend h5 + *, .form__legend .project__rte h6 + *, .form__legend .accordion__rte h6 + *, .form__legend .card--block .card__content h6 + *, .card--block .form__legend .card__content h6 + *, .form__legend .hero--single .hero__resume h6 + *, .hero--single .form__legend .hero__resume h6 + *, .form__legend .hero--article .hero__resume h6 + *, .hero--article .form__legend .hero__resume h6 + *, .form__legend .hero--account .hero__resume h6 + *, .hero--account .form__legend .hero__resume h6 + *, .form__legend .hero--author .hero__resume h6 + *, .hero--author .form__legend .hero__resume h6 + *, .form__legend .hero__rte h6 + *, .form__legend .block--rte h6 + *, .form__legend .block__rte h6 + *, .form__legend .row--rte h6 + *, .form__legend .form__rte h6 + *, .project__rte .form__legend h6 + *, .accordion__rte .form__legend h6 + *, .card--block .card__content .form__legend h6 + *, .hero--single .hero__resume .form__legend h6 + *, .hero--article .hero__resume .form__legend h6 + *, .hero--account .hero__resume .form__legend h6 + *, .hero--author .hero__resume .form__legend h6 + *, .hero__rte .form__legend h6 + *, .block--rte .form__legend h6 + *, .block__rte .form__legend h6 + *, .row--rte .form__legend h6 + *, .form__rte .form__legend h6 + * { -webkit-margin-before: 0.5em; margin-block-start: 0.5em; } .form__image { display: grid; grid-template-columns: 1fr; grid-template-rows: auto; grid-template-areas: "center"; align-items: center; justify-items: center; } .form__image > * { -ms-grid-row: 1; -ms-grid-column: 1; grid-area: center; } .form__image .icon { font-size: 2em; } .form__total { font-size: 4rem; } .form__more { font-size: 1.6rem; } .form__uploaded { --icon-color: var(--text-color--accent); display: flex; width: 100%; justify-content: space-between; } .form__field--default { position: relative; } .select-multiple { --select-background: var(--background-color--white); display: flex; flex-wrap: wrap; gap: 0.4rem; } .select-multiple__select { display: none; } .select-multiple__value { display: flex; order: -1; gap: 0.4rem; align-items: center; padding: 0.4rem 1.2rem; -webkit-padding-end: 0.4rem; padding-inline-end: 0.4rem; border-radius: 0.4rem; background: var(--select-background); box-shadow: var(--drop-shadow--xs); font-size: 1.4rem; } .select-multiple__remove { display: flex; align-items: center; justify-content: center; width: 2.4rem; height: 100%; border-radius: 0.4rem; cursor: pointer; position: relative; transition: var(--transition); } .select-multiple__remove > * { pointer-events: none; } .select-multiple__remove:hover { background: var(--background-color--lighter); } .select-multiple__remove .icon { font-size: 1em; } .select-multiple__input { flex: 1; flex-basis: 20rem; } .select-multiple__input::-moz-placeholder { color: var(--text-color--medium); } .select-multiple__input::placeholder { color: var(--text-color--medium); } .select-multiple__options { display: grid; grid-template-columns: 1fr; grid-template-rows: auto auto; grid-template-areas: "warning" "list"; width: 100%; background: var(--background-color--white); box-shadow: var(--drop-shadow--sm); position: absolute; top: 100%; left: 0; z-index: 10; } .select-multiple__warning { -ms-grid-row: 1; -ms-grid-column: 1; display: flex; align-items: center; padding: 1em; grid-area: warning; position: relative; } .select-multiple__list { -ms-grid-row: 2; -ms-grid-column: 1; grid-area: list; max-height: 18rem; padding: 0.8rem 0; overflow-y: scroll; } .select-multiple__item { display: grid; grid-template-columns: auto 1fr; grid-template-rows: auto; grid-template-areas: "checkmark text"; align-items: center; gap: 0.8rem; min-height: 4rem; padding: 0.8rem 1em; cursor: pointer; -webkit-user-select: none; -moz-user-select: none; user-select: none; position: relative; z-index: 2; } .select-multiple__item > * { pointer-events: none; } .select-multiple__item::before { content: ""; display: block; width: calc(100% - 1em); height: calc(100% - 0.8rem); background: var(--background-color--lighter); border-radius: 0.4rem; opacity: 0; position: absolute; left: 0.5em; top: 0.4rem; z-index: -1; transition: var(--transition); } .select-multiple__item.checked .select-multiple__checkmark::after { opacity: 1; transform: translate(0%, -75%) rotate(45deg) scale(1); } .select-multiple__item:hover::before { opacity: 1; } .select-multiple__item:hover .select-multiple__checkmark::after { filter: drop-shadow(0.2rem 0.2rem 0 var(--background-color--lighter)) drop-shadow(-0.2rem -0.2rem 0 var(--background-color--lighter)); } .select-multiple__item:first-child { -webkit-padding-before: 0.8rem; padding-block-start: 0.8rem; } .select-multiple__item:last-child { -webkit-padding-after: 0.8rem; padding-block-end: 0.8rem; } .select-multiple__item.hidden { display: none; } .select-multiple__checkmark { -ms-grid-row: 1; -ms-grid-column: 1; grid-area: checkmark; display: block; display: block; width: 1.4rem; height: 1.4rem; border: 0.1rem solid var(--stroke-color--medium); border-radius: 0.2rem; pointer-events: none; position: relative; } .select-multiple__item > .select-multiple__checkmark { -ms-grid-row: 1; -ms-grid-column: 1; } .select-multiple__checkmark::after { content: ""; display: block; width: 50%; height: 100%; -webkit-border-after: 0.2rem solid var(--stroke-color--accent); border-block-end: 0.2rem solid var(--stroke-color--accent); -webkit-border-end: 0.2rem solid var(--stroke-color--accent); border-inline-end: 0.2rem solid var(--stroke-color--accent); filter: drop-shadow(0.2rem 0.2rem 0 var(--background-color)) drop-shadow(-0.2rem -0.2rem 0 var(--background-color)); opacity: 0; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%) rotate(45deg) scale(0); transition: var(--transition); } .ratio--1x1 { aspect-ratio: 1/1; } .ratio--video, .block__media--video { aspect-ratio: 16/9; } .ratio--book { aspect-ratio: 330/462; } .image { --image-background: var(--grey--light); } .image--frame, .image--square { display: flex; align-content: center; justify-content: center; aspect-ratio: 1/1; } .image--frame { padding: 3.2rem; background: var(--image-background); } .image--frame img { aspect-ratio: 168/234; box-shadow: var(--drop-shadow--md); } .image--square img { width: 100%; height: 100%; } [data-tooltip] { position: relative; } [data-tooltip]::after { content: attr(data-tooltip); display: inline-block; min-width: 20rem; max-width: 30rem; padding: 1em; border-radius: 0.5em; background: var(--background-color--dark); opacity: 0; pointer-events: none; font-family: var(--text-font); font-size: 1.4rem; line-height: 2.4rem; font-weight: 400; color: var(--text-color--bright); text-align: center; position: absolute; top: 0; left: 50%; transform: translate(-50%, calc(-100% - 0.5em)) scale(0.8); z-index: 2; transition: var(--transition); transition-duration: 0.16s; } [data-tooltip]:hover::after { opacity: 1; transform: translate(-50%, calc(-100% - 1em)) scale(1); } .form__field--counter[data-tooltip]::after { -ms-grid-row: 1; -ms-grid-column: 2; grid-area: input; } .form__field--switch-button > .form__field--counter[data-tooltip]::after { -ms-grid-row: 1; -ms-grid-column: 1; } .form__field--counter > .form__field--counter[data-tooltip]::after { -ms-grid-row: 2; -ms-grid-column: 1; } .form__field--default[data-tooltip]::after { grid-row: input; grid-column: input/icon; left: auto; right: 0; transform: translate(0, calc(-100% - 0.5em)) scale(0.8); } .form__field--default[data-tooltip]:hover::after { transform: translate(0, calc(-100% - 1em)) scale(1); } .decoration { pointer-events: none; } .header { --header-offset: 3.2rem; } @media screen and ( min-width: 48em ) { .header { --header-offset: 5.6rem; } } .header__wrapper { display: flex; width: 100%; padding-inline: var(--grid-space); -webkit-margin-before: var(--header-offset); margin-block-start: var(--header-offset); position: fixed; z-index: var(--z-index-header); } .header__wrapper::before, .header__wrapper::after { content: ""; display: block; width: 100%; height: calc(100% + var(--header-offset)); height: 100dvh; height: 100vh; position: absolute; top: calc(var(--header-offset) * -1); left: 0; z-index: -1; } .header__wrapper::after { background: var(--background-color--white); } .header__wrapper::before { box-shadow: var(--drop-shadow--sm); } @media screen and ( min-width: 48em ) { .header__logo { transform: translate(0, -25%); } } .header__logo img { height: 4.8rem; } .header__actions { display: flex; gap: 0 var(--grid-gap); -webkit-margin-start: var(--grid-gap); margin-inline-start: var(--grid-gap); line-height: var(--cta-height); font-weight: 600; } .header__actions a { display: block; transition: var(--transition-property, all) var(--transition-duration, 0.32s) var(--transition-easing, ease); } .header__actions a.active, .header__actions a:hover { --text-color: var(--text-color--accent); } @media screen and ( max-width: 63.9375em ) { .header__actions { display: none; } } @media screen and ( min-width: 96em ) { .header__actions { font-size: 1.8rem; } } .header__quickactions { display: flex; margin-inline: auto 1em; position: relative; z-index: 3; } @media screen and ( max-width: 47.9375em ) { .header__quickactions { position: absolute; transform: translate(-0.5em, 0) !important; } } @media screen and ( max-width: 63.9375em ) { .header.header--open .header__quickactions { --icon-color: var(--text-color--bright); } } .header__quickactions a, .header__quickactions button { display: flex; align-items: center; justify-content: center; width: 4.4rem; height: var(--cta-height); font-size: 2.2rem; cursor: pointer; transition: var(--transition-property, all) var(--transition-duration, 0.32s) var(--transition-easing, ease); } .header__quickactions a.active, .header__quickactions a:hover, .header__quickactions button.active, .header__quickactions button:hover { --icon-color: var(--text-color--bright); } .header__quickactions span { display: none; } .header__nav { width: 100dvw; width: 100vw; max-width: var(--layout-max-width); height: 100dvh; height: 100vh; position: absolute; top: calc(var(--header-offset) * -1); left: 50%; transform: translate(-50%, 0); z-index: 2; } .header__nav::after { content: ""; display: block; width: 28rem; height: 28rem; background: var(--background-color--accent); border-radius: 1000rem; position: absolute; top: 0; right: 0; z-index: -1; transform: translate(50%, -55%); } @media screen and ( min-width: 64em ) { .header__nav::after { transform: translate(50%, -50%); } } @media screen and ( min-width: 64em ) { .header__nav::after { width: 50rem; height: 50rem; transform: translate(20%, -40%); } } @media screen and ( min-width: 80em ) { .header__nav::after { width: 62rem; height: 62rem; } } @media screen and ( min-width: 85.375em ) { .header__nav::after { width: 68.9rem; height: 68.9rem; } } .header__nav::before { content: ""; display: block; width: 100%; height: var(--header-offset); background: linear-gradient(to top, #333333 0%, rgba(51, 51, 51, 0.944) 16.6%, rgba(51, 51, 51, 0.876) 30.8%, rgba(51, 51, 51, 0.8) 42.8%, rgba(51, 51, 51, 0.717) 53%, rgba(51, 51, 51, 0.63) 61.5%, rgba(51, 51, 51, 0.54) 68.5%, rgba(51, 51, 51, 0.45) 74.2%, rgba(51, 51, 51, 0.363) 78.8%, rgba(51, 51, 51, 0.28) 82.7%, rgba(51, 51, 51, 0.204) 85.9%, rgba(51, 51, 51, 0.136) 88.6%, rgba(51, 51, 51, 0.08) 91.2%, rgba(51, 51, 51, 0.037) 93.8%, rgba(51, 51, 51, 0.01) 96.7%, rgba(51, 51, 51, 0) 100%); position: absolute; bottom: 0; left: 0; z-index: 2; } .header__scroller { grid-template-rows: 14.4rem 1fr auto 0; align-items: center; padding: 0 var(--grid-space); height: 100%; overflow-y: scroll; -webkit-overflow-scrolling: touch; -ms-overflow-style: none; scrollbar-width: none; } @media screen and ( min-width: 48em ) { .header__scroller { grid-template-rows: minmax(var(--header-offset), 1fr) 1fr minmax(calc(var(--header-offset) - 4.8rem), 1fr); } } .header__scroller::after { content: ""; display: block; width: 25vw; max-width: 25vw; aspect-ratio: 1/1; border-radius: 100rem; background: var(--background-color--accent); position: fixed; bottom: 0; left: calc( (((var(--grid-width, 100%)) - var(--grid-gap) * (var(--container-columns) - 1) ) / var(--container-columns)) * 2 + var(--grid-gap) * ( 2 - var(--minus-gap) ) + var(--grid-offset, 0%) ); transform: translate(0, calc(100% - var(--header-offset))); z-index: -1; } .header__menu { grid-row: 2/span 1; align-self: end; display: grid; grid-template-columns: 1fr; grid-template-rows: auto 1fr; position: relative; } @media screen and ( min-width: 48em ) { .header__menu { -webkit-margin-after: 4.8rem; margin-block-end: 4.8rem; } } .header__quickaccess { grid-row: 3/span 1; align-self: end; } @media screen and ( max-width: 47.9375em ) { .header__quickaccess { -webkit-margin-before: 5.6rem; margin-block-start: 5.6rem; -webkit-margin-after: 9.6rem; margin-block-end: 9.6rem; } } @media screen and ( min-width: 48em ) { .header__quickaccess { grid-row: 2/span 1; -webkit-margin-after: 4.8rem; margin-block-end: 4.8rem; } } .header__decoration { max-height: var(--header-offset); position: absolute; bottom: 0; right: calc( (((var(--grid-width, 100%)) - var(--grid-gap) * (var(--container-columns) - 1) ) / var(--container-columns)) * 1 + var(--grid-gap) * ( 1 - var(--minus-gap) ) + var(--grid-offset, 0%) ); z-index: 2; } .header__languages-switch { display: flex; grid-row: 2/span 1; align-self: start; } @media screen and ( max-width: 63.9375em ) { .header__languages-switch { justify-content: flex-end; transform: translate(0.6em, 0); } } .header__languages-switch a { display: flex; align-items: center; justify-content: center; width: 4.4rem; height: var(--cta-height); font-size: 1.4rem; line-height: 2.4rem; font-weight: 600; text-transform: uppercase; cursor: pointer; } @media screen and ( min-width: 64em ) { .header__languages-switch a { font-size: 1.8rem; } } .header__languages-switch .active a { color: var(--text-color--accent); } .header__title { display: flex; align-items: center; height: var(--cta-height); font-family: var(--title-font); font-size: 1.8rem; line-height: 2.4rem; color: var(--text-color--accent); } .header__title + * { -webkit-margin-before: 0.8rem; margin-block-start: 0.8rem; } .header__list { -webkit-border-before: 0.1rem solid var(--stroke-color); border-block-start: 0.1rem solid var(--stroke-color); } .header__item { font-size: 2.4rem; line-height: 3.2rem; } @media screen and ( min-width: 48em ) and ( max-width: 63.9375em ) { .header__item { font-size: 2.1rem; line-height: 3.2rem; } } @media screen and ( min-width: 80em ) { .header__item { font-size: 3.2rem; line-height: 4rem; } } .header__item:last-child { -webkit-border-after: 0.1rem solid var(--stroke-color); border-block-end: 0.1rem solid var(--stroke-color); } .header__item + li { -webkit-border-before: 0.1rem solid var(--stroke-color); border-block-start: 0.1rem solid var(--stroke-color); } .header__item > a, .header__item > button { display: flex; width: 100%; padding-block: 1.8rem; cursor: pointer; transition: var(--transition-property, all) var(--transition-duration, 0.32s) var(--transition-easing, ease); } @media screen and ( min-width: 80em ) { .header__item > a, .header__item > button { padding-block: 2.4rem; } } .header__item > a:hover, .header__item > button:hover { --text-color: var(--text-color--accent); } .header__item .icon { order: 2; -webkit-margin-start: auto; margin-inline-start: auto; align-self: center; font-size: 1.2em; color: var(--text-color--accent); } .header__item .icon--user--l { transform: translate(10%, 0); } .header__sublist { transition: var(--transition-property, all) var(--transition-duration, 0.32s) var(--transition-easing, ease); font-size: 1.8rem; transform: translate(0, -0.5em); } @media screen and ( min-width: 48em ) and ( max-width: 79.9375em ) { .header__sublist { font-size: 1.6rem; } } @media screen and ( min-width: 80em ) { .header__sublist { font-size: 2rem; } } .header__subitem:last-child { padding-block: 0 !important; } .header__subitem:last-child::after { content: ""; display: block; height: 0.5em; } @media screen and ( min-width: 48em ) { .header__subitem:last-child::after { height: 1em; } } .header__subitem a { display: block; cursor: pointer; position: relative; transform: translate(-1.8em, 0); transition: var(--transition-property, all) var(--transition-duration, 0.32s) var(--transition-easing, ease); } .header__subitem a::before { --icon-color: var(--stroke-color--accent); content: ""; display: inline-block; width: 0.5em; height: 0.5em; border: 0.1em solid var(--icon-color); -webkit-border-start: 0; border-inline-start: 0; -webkit-border-after: 0; border-block-end: 0; margin-right: 1em; opacity: 0; font-size: 1.2em; transform: translate(0, 0) rotate(45deg); transition: var(--transition-property, all) var(--transition-duration, 0.32s) var(--transition-easing, ease); } .header__subitem a.active, .header__subitem a:hover { transform: translate(0, 0); } .header__subitem a.active::before, .header__subitem a:hover::before { opacity: 1; } .header__button { background: none; box-shadow: none; position: relative; z-index: 3; } @media screen and ( max-width: 47.9375em ) { .header__button { -webkit-margin-start: auto; margin-inline-start: auto; } } .header__button::before, .header__button::after { grid-row: 1/-1; grid-column: 1/span 1; color: var(--button-color); } .header__button::before { content: attr(data-closed); } .header__button::after { content: attr(data-opened); } .header__button .icon { grid-row: 1/-1; position: relative; } .header__button .icon span { display: block; width: 1.6rem; height: 0.2rem; background: var(--button-background); position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); } .header__button .icon span::before, .header__button .icon span::after { content: ""; display: block; width: 100%; height: 100%; background: var(--button-background); position: absolute; top: 0; left: 50%; } .header__button .icon span::before { transform: translate(-50%, -250%); } .header__button .icon span::after { transform: translate(-50%, 250%); } .header__button .button__background { display: block; overflow: hidden; pointer-events: none; } .header__button .button__background--left { width: calc(100% - 0.8rem - 2rem + 1.2rem); height: calc(var(--cta-height) + 2.4rem); position: absolute; left: -1.2rem; z-index: -1; } .header__button .button__background--left::before { content: ""; display: block; width: calc(100% - 1.2rem); height: var(--cta-height); background: var(--button-background); box-shadow: var(--drop-shadow--sm); border-radius: 100rem 0 0 100rem; position: absolute; top: 50%; right: 0; transform: translate(0, -50%); } .header__button .button__background--right { width: 4rem; height: calc(var(--cta-height) + 2.4rem); position: absolute; right: -1.2rem; z-index: -1; } .header__button .button__background--right::before { content: ""; display: block; width: calc(100% - 1.2rem); height: var(--cta-height); background: var(--button-background); box-shadow: var(--drop-shadow--sm); border-radius: 0 100rem 100rem 0; position: absolute; top: 50%; left: 0; transform: translate(0, -50%); } .header__form { width: 100%; position: fixed; top: 0; left: 0; z-index: var(--z-index-header-search); } .header__form .form__wrapper { padding-inline: var(--grid-space); padding-block: var(--header-offset); background: var(--background-color--white); } .header__form::before { content: ""; width: 100vw; width: 100dvw; height: 100vh; height: 100dvh; background: rgba(0, 0, 0, 0.6); pointer-events: none; position: absolute; top: 0; left: 0; z-index: -1; } .breadcrumb { width: 100%; max-width: var(--layout-max-width); overflow: hidden; padding-inline: var(--grid-space); -webkit-padding-after: calc(var(--row-spacing) * 0.5); padding-block-end: calc(var(--row-spacing) * 0.5); -webkit-margin-end: auto; margin-inline-end: auto; } @media screen and ( max-width: 63.9375em ) { .breadcrumb { width: 65%; } } .breadcrumb__list { text-overflow: ellipsis; overflow: hidden; white-space: nowrap; } .breadcrumb__item { --text-color: var(--text-color--medium); font-weight: 500; } .breadcrumb__item:first-child { display: inline-block; vertical-align: top; } .breadcrumb__item + .breadcrumb__item::before { content: ""; display: inline-block; width: 0.8rem; height: 0.8rem; margin-inline: 0.25em 0.75em; border: 0.2rem solid currentColor; -webkit-border-start: 0; border-inline-start: 0; -webkit-border-after: 0; border-block-end: 0; transform: translate(0, -10%) rotate(45deg); } .breadcrumb__item .icon { max-width: 3.2rem; } .breadcrumb__item a:hover { --text-color: var(--text-color--accent); } .breadcrumb__item a:hover .icon { --icon-color: var(--text-color--accent); } .breadcrumb__item .icon { --icon-color: var(--text-color--medium); font-size: 1.5em; } .breadcrumb__item:last-child { font-weight: 700; } @media screen and ( max-width: 39.9375em ) { .breadcrumb__item:not(:first-child, :last-child) { display: none; } .breadcrumb__item + *::before { margin: 0 0.8rem 0 1rem; transform: scale(1.2); } .breadcrumb__item a { font-size: 1.4rem; } } .sidebar__list { -webkit-border-before: 0.1rem solid var(--stroke-color); border-block-start: 0.1rem solid var(--stroke-color); -webkit-border-after: 0.1rem solid var(--stroke-color); border-block-end: 0.1rem solid var(--stroke-color); } .sidebar__item { padding-block: 0 !important; } .sidebar__item > a { display: flex; justify-content: space-between; align-content: center; align-items: center; min-height: 6.4rem; font-size: 2.1rem; } .sidebar__item > a .icon { --icon-color: var(--text-color--accent); font-size: 1.1em; transform: translate(-0.1em, 0); } @media screen and ( min-width: 80em ) { .sidebar__item > a { min-height: 7.2rem; font-size: 2.8rem; } } @media screen and ( min-width: 96em ) { .sidebar__item > a { font-size: 3.2rem; min-height: 8.8rem; } .sidebar__item > a .icon { font-size: 1.2em; } } .sidebar__item.active > a { font-weight: 700; color: var(--text-color--accent); } .sidebar__item + li, .sidebar__subitem + li { -webkit-border-before: 0.1rem solid var(--stroke-color); border-block-start: 0.1rem solid var(--stroke-color); } .sidebar__subitem { font-size: 1.4rem; } @media screen and ( min-width: 80em ) { .sidebar__subitem { font-size: 1.6rem; } } .sidebar__sublist { -webkit-border-before: 0.1rem solid var(--stroke-color); border-block-start: 0.1rem solid var(--stroke-color); } .sidebar__title { --cta-height: 4.4rem; display: flex; align-items: flex-end; min-height: var(--cta-height); -webkit-margin-after: 0; margin-block-end: 0; } @media screen and ( max-width: 47.9375em ) { .sidebar__title { display: none; } } @media screen and ( min-width: 48em ) { .sidebar__accordion > .accordion__content { grid-template-rows: auto 1fr !important; opacity: 1 !important; pointer-events: auto !important; } } .sidebar__button { display: flex; width: 100%; justify-content: space-between; align-content: center; align-items: center; min-height: 4.4rem; font-family: var(--title-font); cursor: pointer; position: relative; } .sidebar__button::after { content: ""; display: block; width: 100%; height: 0.1rem; background: var(--stroke-color); pointer-events: none; position: absolute; bottom: 0; left: 0; transition: var(--transition); } .sidebar__button--lg { --text-color: var(--text-color--accent); font-size: 2.4rem; font-weight: 700; } .sidebar__button--lg .icon { font-size: 1.25em; } .sidebar__button--lg::after { display: none; } @media screen and ( min-width: 48em ) { .sidebar__button--lg { display: none; } } .sidebar__button .icon { --icon-color: var(--text-color--accent); } .sidebar__categories__item:first-child { -webkit-padding-before: 0.5em; padding-block-start: 0.5em; } .sidebar__categories__item:last-child { -webkit-padding-after: 0.5em; padding-block-end: 0.5em; } .sidebar__categories a { display: flex; justify-content: space-between; align-content: center; align-items: center; padding-block: 0.5em; -webkit-padding-start: 1.5em; padding-inline-start: 1.5em; font-family: var(--title-font); } .sidebar__categories a .icon { color: var(--text-color--accent); transform: translate(-75%, 0); } .sidebar__categories a.active { font-weight: 700; color: var(--text-color--accent); } @media (hover: hover) { .sidebar__categories a:hover .icon { transform: translate(-30%, 0); } } .row { position: relative; } .row:not([class*=flex--v]) { align-items: start; } .hero + .row { -webkit-margin-before: calc(var(--row-spacing)); margin-block-start: calc(var(--row-spacing)); } @media screen and ( min-width: 48em ) { .hero + .row { -webkit-margin-before: var(--row-spacing); margin-block-start: var(--row-spacing); } } .row + .row { -webkit-margin-before: var(--row-spacing); margin-block-start: var(--row-spacing); } @media screen and ( min-width: 64em ) { .hero--reduce + .row, .hero + .row--reduce, .row--reduce + .row, .row + .row--reduce { -webkit-margin-before: calc(var(--row-spacing) * 0.5); margin-block-start: calc(var(--row-spacing) * 0.5); } } * + .row--aside { -webkit-margin-before: calc(var(--row-spacing) * 0.5); margin-block-start: calc(var(--row-spacing) * 0.5); } .row > .decoration--girl-drawing { width: min(50%, 15rem); position: absolute; top: 0; right: calc( (((var(--grid-width, 100%)) - var(--grid-gap) * (var(--container-columns) - 1) ) / var(--container-columns)) * 2.5 + var(--grid-gap) * ( 2.5 - var(--minus-gap) ) + var(--grid-offset, 0%) ); transform: translate(0, -100%); } @media screen and ( min-width: 48em ) { .row > .decoration--girl-drawing { width: min(50%, 20rem); right: calc( (((var(--grid-width, 100%)) - var(--grid-gap) * (var(--container-columns) - 1) ) / var(--container-columns)) * 1.25 + var(--grid-gap) * ( 1.25 - var(--minus-gap) ) + var(--grid-offset, 0%) ); } } @media screen and ( min-width: 90em ) { .row > .decoration--girl-drawing { right: calc( (((var(--grid-width, 100%)) - var(--grid-gap) * (var(--container-columns) - 1) ) / var(--container-columns)) * 1 + var(--grid-gap) * ( 1 - var(--minus-gap) ) + var(--grid-offset, 0%) ); } } @media screen and ( max-width: 63.9375em ) { .row > .decoration--girl-drawing { display: none; } } .row--grid { gap: var(--block-spacing) var(--grid-gap); } .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--2-columns { grid-template-rows: auto auto auto; } .row--2-columns .block:nth-child(1) { grid-row: 2/span 1; } @media screen and ( max-width: 63.9375em ) { .row--2-columns .block:nth-child(1) { -webkit-margin-before: calc(var(--block-spacing) * 2.5); margin-block-start: calc(var(--block-spacing) * 2.5); } } .row--2-columns .block--green:nth-child(2) { -webkit-margin-before: 0 !important; margin-block-start: 0 !important; } @media screen and ( min-width: 64em ) { .row--2-columns { grid-template-rows: auto 1fr; } .row--2-columns .block:nth-child(1) { grid-row: 1/span 1; } } .row--rte { position: relative; } .row--rte-spacing { --rte-title-margin-start: 8rem; --rte-title-margin-end: 3.2rem; } .row--rte::after { content: ""; display: none; width: 25vw; max-width: 38rem; aspect-ratio: 1/1; border-radius: 100rem; background: var(--background-color--accent); position: absolute; top: 15%; left: 0; } @media screen and ( min-width: 64em ) { .row--rte::after { display: block; left: calc(( (((var(--grid-width, 100%)) - var(--grid-gap) * (var(--container-columns) - 1) ) / var(--container-columns)) * -1 + var(--grid-gap) * ( -1 - var(--minus-gap) ) + var(--grid-offset, 0%) ) - var(--grid-space)); transform: translate(-50%, calc(var(--row-spacing) * -1)); } } @media screen and ( min-width: 80em ) { .row--rte::after { left: calc(( (((var(--grid-width, 100%)) - var(--grid-gap) * (var(--container-columns) - 1) ) / var(--container-columns)) * -2 + var(--grid-gap) * ( -2 - var(--minus-gap) ) + var(--grid-offset, 0%) ) - var(--grid-space)); transform: translate(-50%, calc(var(--row-spacing) * -1)); } } .block { --block-background: transparent; --block-shadow: none; position: relative; z-index: 2; } .block::before { content: ""; display: block; width: 100%; height: 100%; border-radius: inherit; background: var(--block-background); box-shadow: var(--block-shadow); position: absolute; top: 0; left: 0; z-index: -1; } .row:not(.flex--row):not(.flex--grid) > .block + .block { -webkit-margin-before: var(--block-spacing); margin-block-start: var(--block-spacing); } .block + :is(.block--pagination) { -webkit-margin-before: var(--row-spacing); margin-block-start: var(--row-spacing); } @media screen and ( min-width: 64em ) { .block--v-space { -webkit-margin-before: 10em; margin-block-start: 10em; } .block--v-space ~ .block--colorful { -webkit-margin-before: -7em !important; margin-block-start: -7em !important; } } .block--v-space + .block { -webkit-margin-before: 0; margin-block-start: 0; } .block__title { -webkit-margin-after: 0.75em; margin-block-end: 0.75em; } .block__footer { display: flex; gap: 1em; -webkit-margin-before: 1.5em; margin-block-start: 1.5em; } @media screen and ( max-width: 47.9375em ) { .block__footer { justify-content: center; justify-items: center; } } .block__form { position: relative; z-index: 5; } .block__form-wrapper .form { -webkit-margin-before: 0; margin-block-start: 0; } .block__cta { display: flex; } .block__media--video { position: relative; z-index: 2; } .block__media--video img { width: 100%; height: 100%; position: relative; z-index: -1; } .block__media--video .button-icon { --icon-color: var(--text-color--bright); width: 100%; height: 100%; background: rgba(0, 0, 0, 0.2); cursor: pointer; position: absolute; top: 0; left: 0; z-index: 2; } .block__media--video .button-icon .icon { --icon-color: var(--text-color--bright); aspect-ratio: auto; font-size: 5em; } @media screen and ( min-width: 48em ) { .block__media--video .button-icon .icon { font-size: 8em; } } .block__media--video .button-icon:hover .icon { transform: scale(1.1); } .block__wrapper--white { padding-block: 3em; position: relative; z-index: 2; } .block__wrapper--white::before { content: ""; display: block; width: calc(100% + ( (((var(--grid-width, 100%)) - var(--grid-gap) * (var(--container-columns) - 1) ) / var(--container-columns)) * 2 + var(--grid-gap) * ( 2 - 0 ) + var(--grid-offset, 0%) )); height: 100%; background: var(--background-color--white); box-shadow: var(--drop-shadow--sm); border-radius: var(--radius--xl); position: absolute; top: 0; left: 50%; transform: translate(-50%, 0); z-index: -1; } .block__wrapper * + .block__form { -webkit-margin-before: 2em; margin-block-start: 2em; } .block__wrapper + .block__wrapper { -webkit-margin-before: max(var(--grid-gap), 3.2rem); margin-block-start: max(var(--grid-gap), 3.2rem); } .block__wrapper .block__rte + * { -webkit-margin-before: var(--grid-gap); margin-block-start: var(--grid-gap); } @media screen and ( max-width: 63.9375em ) { .block__wrapper--separation { -webkit-border-before: 0.1rem solid var(--stroke-color); border-block-start: 0.1rem solid var(--stroke-color); -webkit-padding-before: 3em !important; padding-block-start: 3em !important; -webkit-margin-before: 3em !important; margin-block-start: 3em !important; } } .block__banner { padding: 2em; border-radius: var(--radius--lg); background: var(--block-background); } .block__banner .block__title { font-size: 3.2rem; -webkit-margin-after: 0.5em; margin-block-end: 0.5em; } .block__scroller { position: relative; } .block__scroller > .icon { width: calc(var(--grid-space) + var(--grid-gap)); font-size: 1.25em; position: absolute; top: 50%; z-index: 3; transition: var(--transition-property, all) var(--transition-duration, 0.32s) var(--transition-easing, ease); } .block__scroller > .icon--chevron-left { left: calc(var(--grid-space) * -1); } .block__scroller > .icon--chevron-right, .block__scroller > .icon--chevron-bottom { right: calc(var(--grid-space) * -1); } @media screen and ( min-width: 48.0625em ) { .block__scroller > .icon { width: var(--grid-space); } } .block__scroller::before, .block__scroller::after { content: ""; display: block; width: calc(var(--grid-space) * 2.5); height: 100%; pointer-events: none; position: absolute; top: 0; z-index: 2; transition: var(--transition-property, all) var(--transition-duration, 0.32s) var(--transition-easing, ease); } @media screen and ( min-width: 48.0625em ) { .block__scroller::before, .block__scroller::after { width: calc(var(--grid-space) * 1.5); } } .block__scroller::before { background: linear-gradient(to right, #fffcf9 0%, rgba(255, 252, 249, 0.944) 16.6%, rgba(255, 252, 249, 0.876) 30.8%, rgba(255, 252, 249, 0.8) 42.8%, rgba(255, 252, 249, 0.717) 53%, rgba(255, 252, 249, 0.63) 61.5%, rgba(255, 252, 249, 0.54) 68.5%, rgba(255, 252, 249, 0.45) 74.2%, rgba(255, 252, 249, 0.363) 78.8%, rgba(255, 252, 249, 0.28) 82.7%, rgba(255, 252, 249, 0.204) 85.9%, rgba(255, 252, 249, 0.136) 88.6%, rgba(255, 252, 249, 0.08) 91.2%, rgba(255, 252, 249, 0.037) 93.8%, rgba(255, 252, 249, 0.01) 96.7%, rgba(255, 252, 249, 0) 100%); left: calc(var(--grid-space) * -1); } .block__scroller::after { background: linear-gradient(to left, #fffcf9 0%, rgba(255, 252, 249, 0.944) 16.6%, rgba(255, 252, 249, 0.876) 30.8%, rgba(255, 252, 249, 0.8) 42.8%, rgba(255, 252, 249, 0.717) 53%, rgba(255, 252, 249, 0.63) 61.5%, rgba(255, 252, 249, 0.54) 68.5%, rgba(255, 252, 249, 0.45) 74.2%, rgba(255, 252, 249, 0.363) 78.8%, rgba(255, 252, 249, 0.28) 82.7%, rgba(255, 252, 249, 0.204) 85.9%, rgba(255, 252, 249, 0.136) 88.6%, rgba(255, 252, 249, 0.08) 91.2%, rgba(255, 252, 249, 0.037) 93.8%, rgba(255, 252, 249, 0.01) 96.7%, rgba(255, 252, 249, 0) 100%); right: calc(var(--grid-space) * -1); } .block__scroller.start .icon--chevron-left { opacity: 0; } .block__scroller.start::before { opacity: 0; } .block__scroller.end .icon--chevron-right, .block__scroller.end .icon--chevron-bottom { opacity: 0; } .block__scroller.end::after { opacity: 0; } .block__scroller .block__list { overflow-x: scroll; -webkit-overflow-scrolling: touch; -ms-overflow-style: none; scrollbar-width: none; scroll-snap-type: x mandatory; } .block__scroller .block__item { scroll-snap-align: center; } @media screen and ( min-width: 80em ) { .block__scroller--md-mid::after, .block__scroller--md-mid::before, .block__scroller--md-mid > .icon { display: none; } } @media screen and ( min-width: 64em ) { .block__scroller--md::after, .block__scroller--md::before, .block__scroller--md > .icon { display: none; } } @media screen and ( min-width: 64em ) { .block__scroller:not(.block__scroller--md-mid) > .icon { display: none; } } .block--white { --block-background: var(--background-color--white); } .block--green { --block-background: var(--background-color--accent); --title-color--accent: var(--title-color--dark); } .block--green .block__rte { font-weight: 600; } .block--green .block__rte strong { font-weight: 700; } .block--purple { --block-background: var(--background-color--accent-alt); } .block--shadow { --block-shadow: var(--drop-shadow--sm); border-radius: var(--radius--xl); } .block--cta { padding: 3em 2em 2em 2em; } @media screen and ( min-width: 48em ) { .block--cta { padding: 3em; } } @media screen and ( min-width: 64em ) { .block--cta { padding: 3em calc( (((var(--grid-width, 100%)) - var(--grid-gap) * (var(--container-columns) - 1) ) / var(--container-columns)) * 1 + var(--grid-gap) * ( 1 - var(--minus-gap) ) + var(--grid-offset, 0%) ); } } .block--cta .decoration--book, .block--cta .decoration--girl-drawing { width: min(50%, 15rem); position: absolute; top: 0; right: calc( (((var(--grid-width, 100%)) - var(--grid-gap) * (var(--container-columns) - 1) ) / var(--container-columns)) * 2.5 + var(--grid-gap) * ( 2.5 - var(--minus-gap) ) + var(--grid-offset, 0%) ); transform: translate(0, -100%); } @media screen and ( min-width: 48em ) { .block--cta .decoration--book, .block--cta .decoration--girl-drawing { width: min(50%, 20rem); right: calc( (((var(--grid-width, 100%)) - var(--grid-gap) * (var(--container-columns) - 1) ) / var(--container-columns)) * 1.25 + var(--grid-gap) * ( 1.25 - var(--minus-gap) ) + var(--grid-offset, 0%) ); } } @media screen and ( min-width: 90em ) { .block--cta .decoration--book, .block--cta .decoration--girl-drawing { right: calc( (((var(--grid-width, 100%)) - var(--grid-gap) * (var(--container-columns) - 1) ) / var(--container-columns)) * 1 + var(--grid-gap) * ( 1 - var(--minus-gap) ) + var(--grid-offset, 0%) ); } } @media screen and ( max-width: 63.9375em ) { .block--cta .decoration--girl-drawing { display: none; } } .block--cta .decoration--book-opened { width: min(50%, 24rem); position: absolute; bottom: 0; right: 0; transform: translate(0, 80%); } @media screen and ( max-width: 63.9375em ) { .block--cta .decoration--book-opened { display: none; } } @media screen and ( min-width: 64em ) { .block--spacing { -webkit-margin-after: 5em; margin-block-end: 5em; } } .block--about::after { content: ""; display: block; width: 26vw; max-width: 42rem; border-radius: 100rem; aspect-ratio: 1/1; background: var(--background-color--accent-alt); position: absolute; top: 0; left: 0; z-index: -1; transform: translate(0, -50%); } @media screen and ( min-width: 80em ) { .block--about::after { left: calc( (((var(--grid-width, 100%)) - var(--grid-gap) * (var(--container-columns) - 1) ) / var(--container-columns)) * 1 + var(--grid-gap) * ( 1 - var(--minus-gap) ) + var(--grid-offset, 0%) ); } } @media screen and ( max-width: 63.9375em ) { .block--about::after { display: none; } } @media screen and ( min-width: 64em ) { .block--about { padding: 3em 0; } } @media screen and ( min-width: 80em ) { .block--about { padding: 3em calc( (((var(--grid-width, 100%)) - var(--grid-gap) * (var(--container-columns) - 1) ) / var(--container-columns)) * 1 + var(--grid-gap) * ( 1 - var(--minus-gap) ) + var(--grid-offset, 0%) ); } } .block--about .block__title { flex: 0 0 100%; } .block--about .block__decoration { width: calc( (((var(--grid-width, 100%)) - var(--grid-gap) * (var(--container-columns) - 1) ) / var(--container-columns)) * 2.5 + var(--grid-gap) * ( 2.5 - var(--minus-gap) ) + var(--grid-offset, 0%) ); order: -1; -webkit-margin-after: 3em; margin-block-end: 3em; position: relative; left: calc( (((var(--grid-width, 100%)) - var(--grid-gap) * (var(--container-columns) - 1) ) / var(--container-columns)) * 2.5 + var(--grid-gap) * ( 2.5 - var(--minus-gap) ) + var(--grid-offset, 0%) ); } @media screen and ( min-width: 80em ) { .block--about .block__decoration { left: calc( (((var(--grid-width, 100%)) - var(--grid-gap) * (var(--container-columns) - 1) ) / var(--container-columns)) * 3.5 + var(--grid-gap) * ( 3.5 - var(--minus-gap) ) + var(--grid-offset, 0%) ); } } @media screen and ( max-width: 63.9375em ) { .block--about .block__decoration { display: none; } } .block--about .block__footer { flex: 0 0 100%; } @media screen and ( max-width: 47.9375em ) { .block--about .block__footer { justify-content: center; } } @media screen and ( min-width: 64em ) { .block--articles { padding-block: calc( (((var(--grid-width, 100%)) - var(--grid-gap) * (var(--container-columns) - 1) ) / var(--container-columns)) * 1 + var(--grid-gap) * ( 1 - var(--minus-gap) ) + var(--grid-offset, 0%) ); } } @media screen and ( max-width: 63.9375em ) { .block--articles { border-radius: 0; } .block--articles::before { display: none; } } @media screen and ( min-width: 64em ) { .block--articles .block__title { padding-inline: calc( (((var(--grid-width, 100%)) - var(--grid-gap) * (var(--container-columns) - 1) ) / var(--container-columns)) * 1 + var(--grid-gap) * ( 1 - 0 ) + var(--grid-offset, 0%) ); } } .block--articles * + .block__cta { -webkit-margin-before: 3.5em; margin-block-start: 3.5em; } .block--articles:not(.block--articles-v)::after { content: ""; display: block; width: 20vw; max-width: 35rem; aspect-ratio: 1/1; border-radius: 100rem; background: var(--background-color--accent); position: absolute; top: 0; right: 0; z-index: -2; transform: translate(40%, -30%); } @media screen and ( max-width: 79.9375em ) { .block--articles:not(.block--articles-v)::after { display: none; } } @media screen and ( max-width: 63.9375em ) { .block--articles .card__list--inline { flex-wrap: nowrap; width: calc(100% + var(--grid-space) * 2); flex: 0 0 calc(100% + var(--grid-space) * 2) !important; padding-inline: var(--grid-space); position: relative; left: 50%; transform: translate(-50%, 0); } } @media screen and ( max-width: 63.9375em ) { .block--articles-v .card__list--inline { position: relative; left: 50%; transform: translate(-50%, 0); } } @media screen and ( min-width: 64em ) { .block--articles-v .card--inline { --container-columns: 6 !important; } .block--articles-v .card__item--inline { flex: 0 0 100% !important; max-width: none !important; } } .block--articles-v .block__title { -webkit-margin-after: 0.75em; margin-block-end: 0.75em; } @media screen and ( min-width: 64em ) { .block--articles-v .block__title, .block--articles-v .card--inline { padding-inline: calc( (((var(--grid-width, 100%)) - var(--grid-gap) * (var(--container-columns) - 1) ) / var(--container-columns)) * 1 + var(--grid-gap) * ( 1 - var(--minus-gap) ) + var(--grid-offset, 0%) ); } } .block--gallery { --block-background: var(--background-color--white); --block-shadow: var(--drop-shadow--sm); padding-block: calc( (((var(--grid-width, 100%)) - var(--grid-gap) * (var(--container-columns) - 1) ) / var(--container-columns)) * 1 + var(--grid-gap) * ( 1 - var(--minus-gap) ) + var(--grid-offset, 0%) ); border-radius: var(--radius--xl); -webkit-margin-before: 2em; margin-block-start: 2em; position: relative; z-index: 3; } @media screen and ( max-width: 47.9375em ) { .block--gallery::before, .block--gallery::after { display: none !important; } } .block--gallery .block__title { -webkit-margin-after: 1.2em; margin-block-end: 1.2em; } @media screen and ( min-width: 48em ) { .block--gallery * + .block__cta { -webkit-margin-before: 3.5em; margin-block-start: 3.5em; } } .block--gallery .image--frame { padding: 1.2rem; } @media screen and ( min-width: 64em ) { .block--gallery .image--frame { padding: 2.4rem; } } @media screen and ( min-width: 85.375em ) { .block--gallery .image--frame { padding: 3.2rem; } } .block--gallery::after { content: ""; display: block; width: 20vw; max-width: 35rem; aspect-ratio: 1/1; border-radius: 100rem; background: var(--background-color--accent); position: absolute; z-index: -2; } .block--gallery.block--decoration-left::after { top: 0; left: 0; transform: translate(-40%, -30%); } .block--gallery.block--decoration-right::after { top: 0; right: 0; transform: translate(40%, -30%); } .block--gallery .block__decoration { 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%) ) + var(--grid-space)); pointer-events: none; position: absolute; top: 0; left: calc(var(--grid-space) * -1); transform: translate(0, -100%); } @media screen and ( min-width: 80em ) { .block--gallery .block__decoration { left: calc(var(--grid-space) * -0.5); } } @media screen and ( max-width: 63.9375em ) { .block--gallery .block__decoration { display: none; } } .block--cards { gap: var(--grid-gap); } .block--cards .block__list { gap: 5.6rem var(--grid-gap); } @media screen and ( min-width: 64em ) { .block--cards .block__list { gap: 6.4rem var(--grid-gap); } } .block--cards .block__form { -webkit-margin-start: auto; margin-inline-start: auto; } .block--cards .block__cta { display: flex; justify-content: center; gap: var(--grid-gap); } @media screen and ( min-width: 48em ) and ( max-width: 63.9375em ) { .block--cards:not(.block--inline) .card__title { font-size: 1.8rem; } .block--cards:not(.block--inline) .card__content { font-size: 1.4rem; } } .block--cards.block--inline .block__list { flex-wrap: nowrap; width: calc(100% + var(--grid-space) * 2); padding-inline: var(--grid-space); transform: translate(calc(var(--grid-space) * -1), 0); } .block--cards * + .block__cta { -webkit-margin-before: 1.5em; margin-block-start: 1.5em; } .block--list { gap: 6.4rem var(--grid-gap); } @media screen and ( min-width: 48em ) and ( max-width: 63.9375em ) { .block--list .card__title { font-size: 1.8rem; } .block--list .card__content { font-size: 1.4rem; } } .block--sidebar { gap: var(--grid-gap); } .block--inline.block--cards { grid-template-rows: auto auto auto auto; } @media screen and ( min-width: 48em ) { .block--inline.block--cards { grid-template-rows: auto auto auto; } } .block--inline.block--cards .block__title { grid-row: 1/span 1; -webkit-margin-after: 0; margin-block-end: 0; } .block--inline.block--cards .block__form { grid-row: 2/span 1; align-self: center; -webkit-margin-start: 0; margin-inline-start: 0; } @media screen and ( min-width: 48em ) { .block--inline.block--cards .block__form { grid-row: 1/span 1; } } .block--inline.block--cards .block__scroller { grid-row: 3/span 1; } @media screen and ( min-width: 48em ) { .block--inline.block--cards .block__scroller { grid-row: 2/span 1; } } .block--basket .block__cta { -webkit-margin-before: 3em; margin-block-start: 3em; } @media screen and ( max-width: 47.9375em ) { .block--basket .block__cta { flex-direction: column-reverse; align-items: center; align-content: center; } } .block--basket .block__decoration { max-height: 14em; aspect-ratio: 1/1; pointer-events: none; position: absolute; top: 0; right: calc( (((var(--grid-width, 100%)) - var(--grid-gap) * (var(--container-columns) - 1) ) / var(--container-columns)) * 2 + var(--grid-gap) * ( 2 - var(--minus-gap) ) + var(--grid-offset, 0%) ); transform: translate(0, -100%); } @media screen and ( max-width: 63.9375em ) { .block--basket .block__decoration { display: none; } } @media screen and ( min-width: 80em ) { .block--basket .block__decoration { max-height: 16em; } } @media screen and ( min-width: 64em ) { .block--basket { padding-block: calc( (((var(--grid-width, 100%)) - var(--grid-gap) * (var(--container-columns) - 1) ) / var(--container-columns)) * 1 + var(--grid-gap) * ( 1 - var(--minus-gap) ) + var(--grid-offset, 0%) ); } } @media screen and ( max-width: 63.9375em ) { .block--basket { border-radius: 0; } .block--basket::before { display: none; } } @media screen and ( max-width: 79.9375em ) { .block--summary { display: none; } } .block--introduction { display: grid; grid-template-rows: auto 1fr; } @media screen and ( min-width: 64em ) { .block--introduction { height: 100%; } } .block--introduction .block__section { grid-row: 1/span 1; } .block--introduction .block__title { -webkit-margin-after: 0; margin-block-end: 0; } .block--introduction .block__section { --grid-gap-block: 1em; } @media screen and ( min-width: 48em ) { .block--introduction .block__section { --grid-gap-block: 2.5em; } } .block--introduction .block__decoration { grid-row: span 1/-1; width: calc( (((var(--grid-width, 100%)) - var(--grid-gap) * (var(--container-columns) - 1) ) / var(--container-columns)) * 2.5 + var(--grid-gap) * ( 2.5 - var(--minus-gap) ) + var(--grid-offset, 0%) ); order: -1; align-self: end; position: relative; left: calc( (((var(--grid-width, 100%)) - var(--grid-gap) * (var(--container-columns) - 1) ) / var(--container-columns)) * 2.5 + var(--grid-gap) * ( 2.5 - var(--minus-gap) ) + var(--grid-offset, 0%) ); transform: translate(0, -10%); } @media screen and ( min-width: 80em ) { .block--introduction .block__decoration { left: calc( (((var(--grid-width, 100%)) - var(--grid-gap) * (var(--container-columns) - 1) ) / var(--container-columns)) * 3.5 + var(--grid-gap) * ( 3.5 - var(--minus-gap) ) + var(--grid-offset, 0%) ); } } @media screen and ( max-width: 63.9375em ) { .block--introduction .block__decoration { display: none; } } .block--introduction::after { content: ""; display: block; width: 26vw; max-width: 42rem; border-radius: 100rem; aspect-ratio: 1/1; background: var(--background-color--accent-alt); position: absolute; bottom: 0; left: 0; z-index: -1; transform: translate(0, 50%); } @media screen and ( min-width: 80em ) { .block--introduction::after { left: calc( (((var(--grid-width, 100%)) - var(--grid-gap) * (var(--container-columns) - 1) ) / var(--container-columns)) * 1 + var(--grid-gap) * ( 1 - var(--minus-gap) ) + var(--grid-offset, 0%) ); } } @media screen and ( max-width: 63.9375em ) { .block--introduction::after { display: none; } } .block--sign-up .block__decoration { height: 12em; position: absolute; top: 0; right: calc( (((var(--grid-width, 100%)) - var(--grid-gap) * (var(--container-columns) - 1) ) / var(--container-columns)) * -1 + var(--grid-gap) * ( -1 - var(--minus-gap) ) + var(--grid-offset, 0%) ); transform: translate(0, -100%); } @media screen and ( min-width: 80em ) { .block--sign-up .block__decoration { height: 14em; right: calc( (((var(--grid-width, 100%)) - var(--grid-gap) * (var(--container-columns) - 1) ) / var(--container-columns)) * -1.5 + var(--grid-gap) * ( -1.5 - var(--minus-gap) ) + var(--grid-offset, 0%) ); } } @media screen and ( max-width: 63.9375em ) { .block--sign-up .block__decoration { display: none; } } .block--sort { -webkit-margin-before: 0 !important; margin-block-start: 0 !important; position: relative; z-index: 10; } .block--sort.col-grow .form__field { min-width: auto; width: 100%; } .block--results { position: relative; } .block--results::before, .block--results::after { content: ""; display: none; width: 25vw; max-width: 38rem; aspect-ratio: 1/1; border-radius: 100rem; background: var(--background-color--accent-alt); position: absolute; } @media screen and ( min-width: 48em ) { .block--results::before, .block--results::after { display: block; } } .block--results::after { top: 30%; left: 0; } @media screen and ( min-width: 48em ) { .block--results::after { left: calc(( (((var(--grid-width, 100%)) - var(--grid-gap) * (var(--container-columns) - 1) ) / var(--container-columns)) * -1 + var(--grid-gap) * ( -1 - var(--minus-gap) ) + var(--grid-offset, 0%) ) - var(--grid-space)); transform: translate(-50%, calc(var(--row-spacing) * -1)); } } @media screen and ( min-width: 80em ) { .block--results::after { transform: translate(-50%, calc(var(--row-spacing) * -1)); } } .block--results::before { background: var(--background-color--accent); height: auto; top: auto; bottom: 0; right: 0; left: auto; } @media screen and ( min-width: 48em ) { .block--results::before { right: calc(( (((var(--grid-width, 100%)) - var(--grid-gap) * (var(--container-columns) - 1) ) / var(--container-columns)) * -1 + var(--grid-gap) * ( -1 - var(--minus-gap) ) + var(--grid-offset, 0%) ) - var(--grid-space)); transform: translate(50%, calc(var(--row-spacing) * -1)) scale(0.75); } } @media screen and ( min-width: 80em ) { .block--results::before { transform: translate(50%, calc(var(--row-spacing) * -1)) scale(0.75); } } .block--projects { position: relative; } .block--projects .decoration--boy-book { height: 15em; position: absolute; top: 0; right: calc( (((var(--grid-width, 100%)) - var(--grid-gap) * (var(--container-columns) - 1) ) / var(--container-columns)) * 1 + var(--grid-gap) * ( 1 - var(--minus-gap) ) + var(--grid-offset, 0%) ); transform: translate(0, -100%); } @media screen and ( max-width: 63.9375em ) { .block--projects .decoration--boy-book { display: none; } } @media screen and ( min-width: 80em ) { .block--projects .decoration--boy-book { height: 18em; right: calc( (((var(--grid-width, 100%)) - var(--grid-gap) * (var(--container-columns) - 1) ) / var(--container-columns)) * 2 + var(--grid-gap) * ( 2 - var(--minus-gap) ) + var(--grid-offset, 0%) ); } } .block--project .block__header { display: flex; flex-wrap: wrap; gap: var(--grid-gap); align-items: center; } .block--project .block__header + * { -webkit-margin-before: 1em; margin-block-start: 1em; } .block--project .block__header .block__title { flex: 1; -webkit-margin-after: 0; margin-block-end: 0; } @media screen and ( max-width: 26.6875em ) { .block--project .block__header .block__button { flex: 0 0 100%; } } .block--project .block__title { -ms-grid-row: 1; -ms-grid-column: 1; grid-area: title; } .block--project .block__cta { grid-area: cta; } @media screen and ( max-width: 63.9375em ) { .block--project .block__wrapper--white { padding: 0; } .block--project .block__wrapper--white::before { display: none; } } @media screen and ( max-width: 47.9375em ) { .block--filters .form__title { -webkit-margin-after: 0.8rem; margin-block-end: 0.8rem; } } .block--form { z-index: unset; } @media screen and ( max-width: 63.9375em ) { .block--form .block__wrapper--white { padding-block: 0; } .block--form .block__wrapper--white::before { display: none; } } @media screen and ( min-width: 48em ) { .row.grid .block--cta { padding: 3em calc( (((var(--grid-width, 100%)) - var(--grid-gap) * (var(--column-size) - 1) ) / var(--column-size)) * 1 + var(--grid-gap) * ( 1 - 0 ) + var(--grid-offset, 0%) ); } } @media screen and ( min-width: 64em ) { .row.grid .block--cta { padding: calc( (((var(--grid-width, 100%)) - var(--grid-gap) * (var(--column-size) - 1) ) / var(--column-size)) * 1 + var(--grid-gap) * ( 1 - var(--minus-gap) ) + var(--grid-offset, 0%) ); } } .hero__rte { font-size: 1.8rem; } @media screen and ( min-width: 85.375em ) { .hero__rte { font-size: 2.1rem; } } @media screen and ( min-width: 96em ) { .hero__rte { font-size: 2.4rem; } } .hero__decoration { grid-row: 1/-1; grid-column: 1/-1; max-height: 14em; position: absolute; right: calc( (((var(--grid-width, 100%)) - var(--grid-gap) * (12 - 1) ) / 12) * 1 + var(--grid-gap) * ( 1 - 1 ) + var(--grid-offset, 0%) ); top: 50%; transform: translate(0, -50%); } @media screen and ( max-width: 63.9375em ) { .hero__decoration { display: none; } } .hero__decoration.decoration--girl-sav, .hero__decoration.decoration--girl-computer { max-width: calc( (((var(--grid-width, 100%)) - var(--grid-gap) * (var(--container-columns) - 1) ) / var(--container-columns)) * 2.5 + var(--grid-gap) * ( 2.5 - var(--minus-gap) ) + var(--grid-offset, 0%) ); height: auto; right: 0; top: auto; transform: translate(0, 0); } .hero__decoration.decoration--chat { height: calc(100% + 4em); } @media screen and ( min-width: 64em ) { .hero__decoration.decoration--chat { height: calc(100% + 6em); } } @media screen and ( min-width: 80em ) { .hero__decoration.decoration--chat { height: calc(100% + 8em); } } .hero__animation { order: -1; align-content: center; max-width: 100%; padding-block: 0.5em 1em; font-size: 6rem; position: relative; } @media screen and ( min-width: 64em ) { .hero__animation { padding-block: 1em 0.5em; } } @media screen and ( min-width: 80em ) { .hero__animation { font-size: 10rem; } } .hero__animation .hero__list { display: none; } .hero__animation .hero__decoration { display: block !important; height: 3em; margin: 0 !important; position: aboslute; top: 50%; right: 0; z-index: 4; transform: translate(10%, -50.5%); } @media screen and ( min-width: 48em ) { .hero__animation .hero__decoration { height: 4em; 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) - var(--minus-gap) ) + var(--grid-offset, 0%) ); transform: translate(0, -42.3%); } } .hero__sentence { display: flex; min-height: 1em; 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%) ) + var(--grid-gap) * 2) !important; max-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%) ) + var(--grid-gap) * 2); padding-block: 0.25em; padding-inline: var(--grid-gap); background: var(--background-color--white); box-shadow: var(--drop-shadow--sm); border-radius: 100rem 0 0 100rem; overflow: hidden; font-family: var(--title-font--alt); line-height: 1em; white-space: nowrap; position: relative; } @media screen and ( min-width: 48em ) { .hero__sentence { border-radius: 6rem; left: calc(var(--grid-gap) * -1); } } .hero__sentence span { display: inline-block; min-height: 1em; } .hero__sentence span::after { content: ""; display: inline-block; width: 0.02em; min-width: 0.1rem; height: 1em; -webkit-margin-start: max( 0.1em, .2rem); margin-inline-start: max( 0.1em, .2rem); background: currentColor; position: absolute; animation: blink 1.2s linear infinite; } .hero__sentence::before { content: ""; display: block; width: calc( (((var(--grid-width, 100%)) - var(--grid-gap) * (var(--container-columns) - 1) ) / var(--container-columns)) * 8 + var(--grid-gap) * ( 8 - var(--minus-gap) ) + var(--grid-offset, 0%) ); height: 100%; background: linear-gradient(to right, transparent, var(--background-color--white) 37%); position: absolute; top: 0; right: calc( (((var(--grid-width, 100%)) - var(--grid-gap) * (var(--container-columns) - 1) ) / var(--container-columns)) * 1 + var(--grid-gap) * ( 1 - var(--minus-gap) ) + var(--grid-offset, 0%) ); z-index: 3; } @media screen and ( min-width: 48em ) { .hero__sentence::before { width: calc( (((var(--grid-width, 100%)) - var(--grid-gap) * (var(--container-columns) - 1) ) / var(--container-columns)) * 2 + var(--grid-gap) * ( 2 - var(--minus-gap) ) + var(--grid-offset, 0%) ); background: linear-gradient(to right, transparent, var(--background-color--white) 50%); } } .hero--home { gap: 1em var(--grid-gap); } .hero--single, .hero--article, .hero--account, .hero--author { position: relative; } .hero--single:not(.hero--account) .hero__resume + *, .hero--single:not(.hero--account) .hero__header + *, .hero--article:not(.hero--account) .hero__resume + *, .hero--article:not(.hero--account) .hero__header + *, .hero--account:not(.hero--account) .hero__resume + *, .hero--account:not(.hero--account) .hero__header + *, .hero--author:not(.hero--account) .hero__resume + *, .hero--author:not(.hero--account) .hero__header + * { -webkit-margin-before: 0.8rem; margin-block-start: 0.8rem; -webkit-border-before: 0.1rem solid var(--stroke-color); border-block-start: 0.1rem solid var(--stroke-color); -webkit-padding-before: 2.4rem; padding-block-start: 2.4rem; } @media screen and ( min-width: 48em ) { .hero--single:not(.hero--account) .hero__resume + *, .hero--single:not(.hero--account) .hero__header + *, .hero--article:not(.hero--account) .hero__resume + *, .hero--article:not(.hero--account) .hero__header + *, .hero--account:not(.hero--account) .hero__resume + *, .hero--account:not(.hero--account) .hero__header + *, .hero--author:not(.hero--account) .hero__resume + *, .hero--author:not(.hero--account) .hero__header + * { -webkit-margin-before: 2.4rem; margin-block-start: 2.4rem; -webkit-padding-before: 4rem; padding-block-start: 4rem; } } .hero--single .hero__header, .hero--article .hero__header, .hero--account .hero__header, .hero--author .hero__header { --header-gap: 1.2rem; display: grid; grid-template-rows: repeat(4, auto) 1fr; gap: 0 var(--grid-gap); } @media screen and ( min-width: 48em ) { .hero--single .hero__header, .hero--article .hero__header, .hero--account .hero__header, .hero--author .hero__header { --header-gap: var(--grid-gap-block); } } .hero--single .hero__header:has(.hero__image) > *:not(.hero__image), .hero--article .hero__header:has(.hero__image) > *:not(.hero__image), .hero--account .hero__header:has(.hero__image) > *:not(.hero__image), .hero--author .hero__header:has(.hero__image) > *:not(.hero__image) { --column-size: 8; grid-column: 1/span var(--column-size); } @media screen and ( min-width: 64em ) { .hero--single .hero__header:has(.hero__image) > *:not(.hero__image), .hero--article .hero__header:has(.hero__image) > *:not(.hero__image), .hero--account .hero__header:has(.hero__image) > *:not(.hero__image), .hero--author .hero__header:has(.hero__image) > *:not(.hero__image) { --column-size: 12; } } .hero--single .hero__surtitle, .hero--article .hero__surtitle, .hero--account .hero__surtitle, .hero--author .hero__surtitle { grid-row: 1/span 1; -webkit-margin-after: var(--header-gap); margin-block-end: var(--header-gap); color: var(--text-color--accent); font-size: 1.4rem; } @media screen and ( min-width: 40em ) { .hero--single .hero__surtitle, .hero--article .hero__surtitle, .hero--account .hero__surtitle, .hero--author .hero__surtitle { font-size: 2.4rem; } } .hero--single .hero__title, .hero--article .hero__title, .hero--account .hero__title, .hero--author .hero__title { grid-row: 2/span 1; } @media screen and ( max-width: 39.9375em ) { .hero--single .hero__title, .hero--article .hero__title, .hero--account .hero__title, .hero--author .hero__title { font-size: 3.2rem; } } .hero--single .hero__subtitle, .hero--article .hero__subtitle, .hero--account .hero__subtitle, .hero--author .hero__subtitle { grid-row: 3/span 1; -webkit-margin-before: var(--header-gap); margin-block-start: var(--header-gap); } .hero--single .hero__tags, .hero--article .hero__tags, .hero--account .hero__tags, .hero--author .hero__tags { -webkit-margin-before: var(--header-gap); margin-block-start: var(--header-gap); grid-row: 4/span 1; } @media screen and ( max-width: 47.9375em ) { .hero--single .hero__tags, .hero--article .hero__tags, .hero--account .hero__tags, .hero--author .hero__tags { flex-direction: column; gap: 0.5em; } } .hero--single .hero__information__title, .hero--article .hero__information__title, .hero--account .hero__information__title, .hero--author .hero__information__title { display: flex; white-space: nowrap; -webkit-margin-after: 1.2rem; margin-block-end: 1.2rem; } .hero--single .hero__information__title .icon, .hero--article .hero__information__title .icon, .hero--account .hero__information__title .icon, .hero--author .hero__information__title .icon { -webkit-margin-start: 2.4rem; margin-inline-start: 2.4rem; font-size: 1.2em; } .hero--single .hero__information__content, .hero--article .hero__information__content, .hero--account .hero__information__content, .hero--author .hero__information__content { font-size: 2.4rem; font-weight: 700; } @media screen and ( max-width: 47.9375em ) { .hero--single .hero__information__list, .hero--article .hero__information__list, .hero--account .hero__information__list, .hero--author .hero__information__list { justify-content: space-between; } } .hero--single .hero__resume, .hero--article .hero__resume, .hero--account .hero__resume, .hero--author .hero__resume { position: relative; } .hero--single .hero__resume .button-inline, .hero--article .hero__resume .button-inline, .hero--account .hero__resume .button-inline, .hero--author .hero__resume .button-inline { display: grid; } .hero--single .hero__resume .button-inline span, .hero--article .hero__resume .button-inline span, .hero--account .hero__resume .button-inline span, .hero--author .hero__resume .button-inline span { grid-row: 1/-1; grid-column: 1/-1; } .hero--single .hero__actions, .hero--article .hero__actions, .hero--account .hero__actions, .hero--author .hero__actions { -webkit-margin-before: 2.4rem; margin-block-start: 2.4rem; } @media screen and ( max-width: 47.9375em ) { .hero--single .hero__actions, .hero--article .hero__actions, .hero--account .hero__actions, .hero--author .hero__actions { flex-direction: column; align-content: center; } .hero--single .hero__actions > *, .hero--article .hero__actions > *, .hero--account .hero__actions > *, .hero--author .hero__actions > * { align-self: center; } } .hero--single .hero__actions .form__field--submit, .hero--article .hero__actions .form__field--submit, .hero--account .hero__actions .form__field--submit, .hero--author .hero__actions .form__field--submit { -webkit-margin-before: 0; margin-block-start: 0; } .hero--single .hero__image, .hero--article .hero__image, .hero--account .hero__image, .hero--author .hero__image { box-shadow: var(--drop-shadow--md); } @media screen and ( max-width: 63.9375em ) { .hero--single .hero__image, .hero--article .hero__image, .hero--account .hero__image, .hero--author .hero__image { grid-row: 1/-1; } } @media screen and ( min-width: 64em ) { .hero--single .hero__image, .hero--article .hero__image, .hero--account .hero__image, .hero--author .hero__image { --container-columns: 12; 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: absolute; top: 0; right: 0; transform: translate(0, -5%); } } .hero--single .hero__image img, .hero--article .hero__image img, .hero--account .hero__image img, .hero--author .hero__image img { width: 100%; height: 100%; } .hero--single * + .hero__cta, .hero--article * + .hero__cta, .hero--account * + .hero__cta, .hero--author * + .hero__cta { -webkit-margin-before: 1em; margin-block-start: 1em; } @media screen and ( max-width: 39.9375em ) { .hero--article .hero__header:has(.hero__image) > * { --column-size: 12 !important; } } @media screen and ( max-width: 39.9375em ) { .hero--article .hero__header .hero__image { grid-row: span 1/-1; -webkit-margin-before: var(--header-gap); margin-block-start: var(--header-gap); } } @media screen and ( max-width: 39.9375em ) { .hero--article .hero__header .tags__list { flex-direction: row; justify-content: space-between; } } @media screen and ( max-width: 39.9375em ) { .hero--article .hero__header .tags__item { flex: 0; min-width: auto; } } .hero--author .hero__title { grid-row: 1/-1; align-self: center; } @media screen and ( max-width: 63.9375em ) { .hero--account { -webkit-margin-after: 0; margin-block-end: 0; -webkit-border-after: 0.1rem solid var(--stroke-color); border-block-end: 0.1rem solid var(--stroke-color); -webkit-padding-after: 5.6rem; padding-block-end: 5.6rem; } } @media screen and ( max-width: 47.9375em ) { .hero--account { -webkit-margin-after: 1.6rem; margin-block-end: 1.6rem; -webkit-padding-after: 4rem; padding-block-end: 4rem; } } .hero--account .decoration--girl-computer { top: 50%; transform: translate(0, -50%); } .hero--project .hero__content { display: grid; grid-template-columns: 1fr 6.4rem; grid-template-rows: auto; grid-template-areas: "title edit"; align-items: center; } .hero--project .hero__content + * { -webkit-margin-before: 1.6rem; margin-block-start: 1.6rem; -webkit-border-before: 0.1rem solid var(--stroke-color); border-block-start: 0.1rem solid var(--stroke-color); -webkit-padding-before: 3.2rem; padding-block-start: 3.2rem; } .hero--project .hero__title { -ms-grid-row: 1; -ms-grid-column: 1; grid-area: title; } .hero--project .hero__edit { -ms-grid-row: 1; -ms-grid-column: 2; --icon-color: var(--text-color--accent); grid-area: edit; cursor: pointer; font-size: 3.5em; } .hero--project .hero__edit > * { pointer-events: none; } .hero--project .hero__form { display: none; } .hero--project .hero__list { align-items: center; position: relative; } @media screen and ( min-width: 40em ) { .hero--project .hero__list { -webkit-padding-start: calc(var(--grid-gap) + 6.4rem); padding-inline-start: calc(var(--grid-gap) + 6.4rem); } } @media screen and ( min-width: 40em ) { .hero--project .hero__item:first-child { -webkit-padding-before: inherit; padding-block-start: inherit; position: absolute; top: 0; left: 0; } } .hero--project .hero__subtitle { -webkit-margin-after: 0.5em; margin-block-end: 0.5em; } .hero--project .hero__text { font-size: 1.8rem; font-weight: 700; } @media screen and ( min-width: 64em ) { .hero--project .hero__text { font-size: 2.1rem; } } @media screen and ( min-width: 80em ) { .hero--project .hero__text { font-size: 2.4rem; } } .card { position: relative; } .card:hover .card__title { --title-color: var(--title-color--accent); } .card__title { transition: var(--transition-property, all) var(--transition-duration, 0.32s) var(--transition-easing, ease); } .card__category, .card__date { --text-color: var(--text-color--medium); font-size: 1.4rem; font-weight: 500; } .card__button::after { content: ""; display: block; width: 100%; height: 100%; position: absolute; z-index: 4; top: 0; left: 0; } .card__list--inline { gap: var(--grid-gap); } .card__list--underline .block__item + .block__item { -webkit-padding-before: 3.2rem; padding-block-start: 3.2rem; -webkit-border-before: 0.1rem solid var(--stroke-color); border-block-start: 0.1rem solid var(--stroke-color); -webkit-margin-before: 3.2rem; margin-block-start: 3.2rem; } .card--inline { display: grid; grid-template-columns: 1fr auto; grid-template-rows: auto auto auto 1fr; grid-template-areas: "image image" "category date" "title title" "button button"; gap: 0.75em; align-content: center; position: relative; } @media screen and ( min-width: 64em ) { .card--inline { grid-template-columns: calc( (((var(--grid-width, 100%)) - var(--grid-gap) * (var(--container-columns) - 1) ) / var(--container-columns)) * 1 + var(--grid-gap) * ( 1 - 0 ) + var(--grid-offset, 0%) ) 1fr auto; grid-template-rows: 1fr auto auto auto 1fr; grid-template-areas: "image space-t space-t" "image title title" "image category date" "image button button" "image space-b space-b"; gap: 0; } .card--inline > .form__label__title { -ms-grid-row: 3; -ms-grid-column: 3; -ms-grid-column-span: 3; } .card--inline > .block__title { -ms-grid-row: 3; -ms-grid-column: 3; -ms-grid-column-span: 3; } .card--inline > .hero__title { -ms-grid-row: 3; -ms-grid-column: 3; -ms-grid-column-span: 3; } } .card--inline .card__title { -ms-grid-row: 5; -ms-grid-column: 1; -ms-grid-column-span: 3; grid-area: title; -webkit-margin-after: 0.6rem; margin-block-end: 0.6rem; } .card--inline .card__category { -ms-grid-row: 3; -ms-grid-column: 1; grid-area: category; } .card--inline .card__date { -ms-grid-row: 3; -ms-grid-column: 3; grid-area: date; } .card--inline .card__button { -ms-grid-row: 7; -ms-grid-column: 1; -ms-grid-column-span: 3; grid-area: button; } .card--inline .card__image { -ms-grid-row: 1; -ms-grid-column: 1; width: 100%; grid-area: image; } @media screen and ( max-width: 63.9375em ) { .card--inline .card__image { aspect-ratio: 3/2; } } @media screen and ( min-width: 64em ) { .card--inline > *:not(.card__image) { -webkit-margin-start: var(--grid-gap); margin-inline-start: var(--grid-gap); } } .card--block .card__header { display: grid; grid-template-columns: 1fr; grid-template-rows: repeat(3, auto); grid-template-areas: "image" "surtitle" "title" "information"; -webkit-margin-after: 1.6rem; margin-block-end: 1.6rem; } .card--block .card__title { -ms-grid-row: 1; -ms-grid-column: 1; grid-area: title; } .card--block .card__surtitle { -ms-grid-row: 2; -ms-grid-column: 1; grid-area: surtitle; color: var(--text-color--accent); -webkit-margin-after: 1.6rem; margin-block-end: 1.6rem; } .card--block .card__information { -ms-grid-row: 1; -ms-grid-column: 3; grid-area: information; display: flex; justify-content: space-between; -webkit-margin-before: 1em; margin-block-start: 1em; } .card--block .card__image { -ms-grid-row: 1; -ms-grid-column: 1; grid-area: image; -webkit-margin-after: 2.4rem; margin-block-end: 2.4rem; } @media screen and ( min-width: 64em ) { .card--block .card__image { -webkit-margin-after: 4rem; margin-block-end: 4rem; } } @media screen and ( max-width: 39.9375em ) { .card--block .card__image.image--frame { padding-block: 4.8rem; } } .card--block .card__button { -webkit-margin-before: 0.8rem; margin-block-start: 0.8rem; } .card--grey .card__image { --image-background: var(--background-color--space); } .card--no-image .card__image { outline: 0.1rem solid var(--stroke-color); background: var(--background-color--white); position: relative; z-index: 2; } .card--no-image .card__image::before { content: ""; aspect-ratio: 1/1; display: block; width: 70%; background: var(--image-background); border-radius: 100rem; box-shadow: var(--drop-shadow--md); position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); z-index: -1; } .card--no-image .card__image .icon { --text-color: var(--text-color--bright); font-size: 5.5em; } .card--result .card__tags.flex--grid { gap: 0.8rem; } .slider { position: relative; } @media screen and ( max-width: 47.9375em ) { .slider { flex: 0 0 calc(100% + var(--grid-space) * 2) !important; -webkit-margin-after: 3.5em; margin-block-end: 3.5em; } } @media screen and ( max-width: 47.9375em ) { .slider__list { flex-wrap: nowrap; gap: 0; } } @media screen and ( min-width: 48em ) { .slider__item { opacity: 1 !important; transform: translate(0, 0) !important; pointer-events: auto !important; } } @media screen and ( max-width: 47.9375em ) { .slider__item { aspect-ratio: 4/3 !important; flex: 0 0 100% !important; max-width: 100% !important; } .slider__item img { height: 70%; align-self: center; } } .slider__button { --icon-color: var(--text-color--bright); width: 8rem; height: 100%; text-align: center; font-size: 2em; position: absolute; top: 0; } .slider__button--next { right: 0; } .slider__button--previous { left: 0; } @media screen and ( min-width: 48em ) { .slider__button { display: none; } } .slider__bullets { display: flex; justify-content: center; align-items: center; gap: 0.8rem; height: 3.5em; width: 100%; position: absolute; top: 100%; } @media screen and ( min-width: 48em ) { .slider__bullets { display: none; } } .slider__bullet { flex: 0 0.8rem; height: 0.8rem; border: 0.1rem solid var(--stroke-color--dark); border-radius: 100rem; } .slider__bullet.current { background: var(--stroke-color--dark); } .accordion__list .accordion__title { --icon-color: var(--text-color--accent); } .accordion__list--bordered { border-block: 0.1rem solid var(--stroke-color); } .accordion__list--grey .accordion__title { --icon-color: var(--text-color); } .accordion__item + .accordion__item { -webkit-border-before: 0.1rem solid var(--stroke-color); border-block-start: 0.1rem solid var(--stroke-color); } .accordion__item.active .accordion__title { --title-color: var(--title-color--accent); } .accordion__item.inactive .accordion__title { --title-color: var(--title-color--medium); --icon-color: var(--title-color--medium); } .accordion__title { display: flex; gap: 1em; width: 100%; min-height: 8rem; padding-block: 1.6rem; align-items: center; justify-content: space-between; cursor: pointer; } @media screen and ( min-width: 80em ) { .accordion__title { min-height: 10rem; } } .accordion__title .icon { font-size: 1.2em; } .accordion__title .button .icon, .accordion__title .select--radio .select__button .icon, .select--radio .accordion__title .select__button .icon, .accordion__title .form__field--select-button .form__select-button .icon, .form__field--select-button .accordion__title .form__select-button .icon, .accordion__title .header__button .icon { --icon-color: var(--button-primary); } .accordion__content { display: grid; } .accordion__content > * { grid-row: 1/-1; } .accordion__overflow { width: calc(100% + 4.8rem); padding-inline: 2.4rem; -webkit-margin-start: -2.4rem; margin-inline-start: -2.4rem; overflow: hidden; } .accordion__overflow > :where(*:last-child) { -webkit-padding-after: 3.2rem; padding-block-end: 3.2rem; } .accordion__rte + * { -webkit-margin-before: 2em; margin-block-start: 2em; } .accordion__button { -webkit-margin-before: 1em; margin-block-start: 1em; position: relative; z-index: 3; } .accordion--more { --accordion-based-height: 6em; display: flex; flex-wrap: wrap; } .accordion--more > * { flex: 0 0 100%; } .accordion--more .accordion__content { opacity: 1 !important; order: -1; position: relative; } .accordion--more .accordion__content::after { content: ""; display: block; width: 100%; height: 2.5em; background: linear-gradient(to top, #fffcf9 0%, rgba(255, 252, 249, 0.944) 16.6%, rgba(255, 252, 249, 0.876) 30.8%, rgba(255, 252, 249, 0.8) 42.8%, rgba(255, 252, 249, 0.717) 53%, rgba(255, 252, 249, 0.63) 61.5%, rgba(255, 252, 249, 0.54) 68.5%, rgba(255, 252, 249, 0.45) 74.2%, rgba(255, 252, 249, 0.363) 78.8%, rgba(255, 252, 249, 0.28) 82.7%, rgba(255, 252, 249, 0.204) 85.9%, rgba(255, 252, 249, 0.136) 88.6%, rgba(255, 252, 249, 0.08) 91.2%, rgba(255, 252, 249, 0.037) 93.8%, rgba(255, 252, 249, 0.01) 96.7%, rgba(255, 252, 249, 0) 100%); pointer-events: none; position: absolute; bottom: 0; left: 0; } .accordion--more .accordion__overflow > :where(*:last-child) { padding-block: 0; } .pagination { display: flex; justify-content: center; } .pagination__button { flex: 0 0 4.4rem; height: 4.4rem; position: relative; } .pagination__button::after { content: ""; display: block; width: 1.2rem; height: 1.2rem; border: 0.2rem solid var(--stroke-color); -webkit-border-before: 0; border-block-start: 0; -webkit-border-end: 0; border-inline-end: 0; position: absolute; top: 50%; left: 50%; transform: translate(-25%, -50%) rotate(45deg); transition: var(--transition); } .pagination__button::before { content: ""; display: block; width: 100%; height: 100%; background: var(--background-color--accent); border-radius: 100rem; opacity: 0; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); transition: var(--transition); } .pagination__button--next::after { transform: translate(-75%, -50%) rotate(45deg) scale(-1, -1); } .pagination__button:not(.inactive):hover { --stroke-color: var(--stroke-color--bright); } .pagination__button:not(.inactive):hover::before { opacity: 1; } .pagination__button.inactive { --stroke-color: var(--stroke-color--light); cursor: default; } .pagination__list { display: inline-flex; align-items: center; } .pagination__item { font-size: 1.4rem; } @media screen and ( min-width: 22.5em ) { .pagination__item { font-size: 1.8rem; } } .pagination__item span, .pagination__item a { display: block; width: 3.2rem; height: 3.2rem; line-height: 3.2rem; text-align: center; } @media screen and ( min-width: 22.5em ) { .pagination__item span, .pagination__item a { width: 4.4rem; height: 4.4rem; line-height: 4.4rem; } } .pagination__item span { width: auto; } .pagination__item a { position: relative; z-index: 2; transition: var(--transition); } .pagination__item a::before { content: ""; display: block; width: 3.2rem; height: 3.2rem; border: 0.1rem solid var(--stroke-color--accent); background: var(--background-color); border-radius: 100rem; opacity: 0; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); z-index: -1; transition: var(--transition); } .pagination__item a:hover::before { opacity: 1; } .pagination__item a.active { color: var(--text-color--bright); } .pagination__item a.active::before { opacity: 1; background: var(--background-color--accent); } .basket { table-layout: fixed; } @media screen and ( max-width: 79.9375em ) { .basket__head { display: none; } } .basket__item { padding-block: 4rem; position: relative; } @media screen and ( max-width: 63.9375em ) { .basket__item:first-child { -webkit-padding-before: 0; padding-block-start: 0; } } .basket__item + .basket__item { -webkit-border-before: 0.1rem solid var(--stroke-color); border-block-start: 0.1rem solid var(--stroke-color); } @media screen and ( min-width: 64em ) and ( max-width: 79.9375em ) { .basket__item { -webkit-padding-after: 8.4rem; padding-block-end: 8.4rem; } } .basket__th { font-size: 1.6rem; color: var(--text-color--accent); } @media screen and ( min-width: 80em ) { .basket__th { display: none; } } .basket__product-wrapper { display: grid; grid-template-columns: calc( (((var(--grid-width, 100%)) - var(--grid-gap) * (var(--container-columns) - 1) ) / var(--container-columns)) * 3 + var(--grid-gap) * ( 3 - var(--minus-gap) ) + var(--grid-offset, 0%) ) 1fr auto; grid-template-rows: auto auto; grid-template-areas: "image title" "image subtitle"; width: 100%; gap: 0.4rem var(--grid-gap); } @media screen and ( min-width: 48em ) { .basket__product-wrapper { grid-template-columns: calc( (((var(--grid-width, 100%)) - var(--grid-gap) * (var(--container-columns) - 1) ) / var(--container-columns)) * 1.5 + var(--grid-gap) * ( 1.5 - var(--minus-gap) ) + var(--grid-offset, 0%) ) 1fr; } } @media screen and ( max-width: 63.9375em ) { .basket__product-wrapper { position: relative; } } @media screen and ( min-width: 64em ) { .basket__product-wrapper { grid-template-columns: calc( (((var(--grid-width, 100%)) - var(--grid-gap) * (var(--container-columns) - 1) ) / var(--container-columns)) * 1 + var(--grid-gap) * ( 1 - var(--minus-gap) ) + var(--grid-offset, 0%) ) 1fr; } } .basket__button { width: 4.4rem; height: 4.4rem; cursor: pointer; font-size: 2rem; position: absolute; top: 50%; right: 0; transform: translate(0.8em, -50%); } @media screen and ( max-width: 47.9375em ) { .basket__button .icon { font-size: 1.2em; } } @media screen and ( min-width: 64em ) { .basket__button { bottom: 0; transform: translate(0.8em, 150%); } } @media screen and ( min-width: 80em ) { .basket__button { top: 50%; transform: translate(0.8em, -50%); } } .basket__title { -ms-grid-row: 1; -ms-grid-column: 1; grid-area: title; align-self: end; font-size: 2rem; } .hero--project .hero__content > .basket__title { -ms-grid-row: 1; -ms-grid-column: 1; } .card--inline > .basket__title { -ms-grid-row: 5; -ms-grid-column: 1; -ms-grid-column-span: 3; } .card--block .card__header > .basket__title { -ms-grid-row: 3; -ms-grid-column: 1; -ms-grid-column-span: 1; } .basket__product-wrapper > .basket__title { -ms-grid-row: 1; -ms-grid-column: 3; -ms-grid-column-span: 1; } .basket__subtitle { -ms-grid-row: 3; -ms-grid-column: 1; --text-color: var(--text-color--medium); grid-area: subtitle; } .basket__product-wrapper > .basket__subtitle { -ms-grid-row: 3; -ms-grid-column: 3; } .basket__image { -ms-grid-row: 1; -ms-grid-column: 1; grid-area: image; } .basket__price, .basket__total { font-size: 1.6rem; font-family: var(--title-font); } @media screen and ( min-width: 48em ) { .basket__price, .basket__total { font-size: 1.8rem; } } @media screen and ( min-width: 120em ) { .basket__price, .basket__total { font-size: 2rem; } } @media screen and ( max-width: 79.9375em ) { .basket__product, .basket__counter, .basket__price, .basket__total { display: flex; align-items: center; justify-content: space-between; gap: var(--grid-gap); } } .basket__footer { -webkit-border-before: 0.1rem solid var(--stroke-color--accent); border-block-start: 0.1rem solid var(--stroke-color--accent); } .basket__footer tr { -webkit-padding-before: 3.2rem; padding-block-start: 3.2rem; } @media screen and ( min-width: 48em ) { .basket__footer tr { -webkit-padding-before: 4rem; padding-block-start: 4rem; } } .basket__total__list { display: flex; flex-direction: column; gap: 1.5em; } .basket__total__item { display: flex; justify-content: space-between; } .basket__total__amount { font-size: 2rem; } .summary { padding: 3em 2em; -webkit-margin-before: 0 !important; margin-block-start: 0 !important; } @media screen and ( min-width: 64em ) { .summary { padding: 3em 2.5em; } } .summary__title + * { -webkit-margin-before: 2em; margin-block-start: 2em; } .summary__list { --grid-gap-block: 2.5em; } .summary__product { display: grid; grid-template-columns: 1fr auto; grid-template-rows: auto auto; grid-template-areas: "title count" "subtitle total"; gap: 0.4rem var(--grid-gap); } .summary__product__title { -ms-grid-row: 1; -ms-grid-column: 1; grid-area: title; } .hero--project .hero__content > .summary__product__title { -ms-grid-row: 1; -ms-grid-column: 1; } .card--inline > .summary__product__title { -ms-grid-row: 5; -ms-grid-column: 1; -ms-grid-column-span: 3; } .card--block .card__header > .summary__product__title { -ms-grid-row: 3; -ms-grid-column: 1; -ms-grid-column-span: 1; } .basket__product-wrapper > .summary__product__title { -ms-grid-row: 1; -ms-grid-column: 3; -ms-grid-column-span: 1; } @media screen and ( min-width: 64em ) { .summary__product__title { font-size: 2rem; } } .summary__product__subtitle { -ms-grid-row: 3; -ms-grid-column: 1; grid-area: subtitle; color: var(--text-color--medium); } .basket__product-wrapper > .summary__product__subtitle { -ms-grid-row: 3; -ms-grid-column: 3; } @media screen and ( max-width: 63.9375em ) { .summary__product__subtitle { font-size: 1.4rem; } } .summary__product__count, .summary__product__total { --text-color: var(--text-color--accent); font-size: 1.6rem; font-family: var(--title-font); text-align: right; } @media screen and ( min-width: 64em ) { .summary__product__count, .summary__product__total { font-size: 2rem; } } .summary__product__count { -ms-grid-row: 1; -ms-grid-column: 2; grid-area: count; font-weight: 700; } .summary__product > .summary__product__count { -ms-grid-row: 1; -ms-grid-column: 3; } .summary__product__total { -ms-grid-row: 3; -ms-grid-column: 3; grid-area: total; } .summary__total { --grid-gap-block: 2em; -webkit-padding-before: 2em; padding-block-start: 2em; -webkit-margin-before: 2em; margin-block-start: 2em; -webkit-border-before: 0.1rem solid var(--stroke-color--accent); border-block-start: 0.1rem solid var(--stroke-color--accent); } .summary__total__title { display: flex; justify-content: space-between; font-size: 1.6rem; color: var(--text-color--accent); } @media screen and ( min-width: 64em ) { .summary__total__title span { font-size: 2rem; } } .summary__information { -webkit-margin-before: 2em; margin-block-start: 2em; } .summary__decoration { max-height: 14em; aspect-ratio: 1/1; pointer-events: none; position: absolute; top: 0; right: calc( (((var(--grid-width, 100%)) - var(--grid-gap) * (var(--container-columns) - 1) ) / var(--container-columns)) * 2 + var(--grid-gap) * ( 2 - var(--minus-gap) ) + var(--grid-offset, 0%) ); transform: translate(0, -100%); } @media screen and ( max-width: 63.9375em ) { .summary__decoration { display: none; } } @media screen and ( min-width: 80em ) { .summary__decoration { max-height: 16em; } } .progress { -ms-grid-row: 1; -ms-grid-column: 1; width: 6.4rem; height: 6.4rem; grid-area: progress; position: relative; z-index: 2; } .progress::after { content: attr(data-percent) "%"; font-weight: 700; color: var(--text-color--accent); position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); } .progress::before { content: ""; display: block; width: 5.6rem; height: 5.6rem; background: var(--background-color--white); border-radius: 100rem; box-shadow: var(--drop-shadow--xs); position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); z-index: -1; } .progress circle { stroke: var(--stroke-color--accent); stroke-dasharray: 100; stroke-dashoffset: calc(100 - (var(--percent, 0))); transform-origin: center; transform: rotate(-90deg); } .project__list { --grid-gap-block: var(--grid-gap); } .project { height: 100%; padding-block: 6.4rem 3em; padding-inline: 2em; background: var(--background-color--white); border-radius: var(--radius--xl); box-shadow: var(--drop-shadow--sm); position: relative; } @media screen and ( min-width: 48em ) { .project { padding-inline: 3em; } } @media screen and ( min-width: 64em ) { .project { padding-inline: calc( (((var(--grid-width, 100%)) - var(--grid-gap) * (var(--container-columns) - 1) ) / var(--container-columns)) * 1 + var(--grid-gap) * ( 1 - var(--minus-gap) ) + var(--grid-offset, 0%) ); } } .project__header { display: grid; grid-template-columns: calc(8rem + var(--grid-gap)) auto minmax(4rem, 1fr); grid-template-rows: auto auto auto auto; grid-template-areas: "image title edit" "image information information" "image space-right space-right" "status status status"; max-width: 100%; align-items: center; } @media screen and ( min-width: 48em ) { .project__header { grid-template-rows: auto auto auto; grid-template-areas: "image title edit" "image information information" "image status status"; } } .project__header + * { -webkit-margin-before: 1em; margin-block-start: 1em; } .project__title { -ms-grid-row: 1; -ms-grid-column: 1; grid-area: title; font-size: 2.4rem; } .hero--project .hero__content > .project__title { -ms-grid-row: 1; -ms-grid-column: 1; } .card--inline > .project__title { -ms-grid-row: 5; -ms-grid-column: 1; -ms-grid-column-span: 3; } .card--block .card__header > .project__title { -ms-grid-row: 3; -ms-grid-column: 1; -ms-grid-column-span: 1; } .basket__product-wrapper > .project__title { -ms-grid-row: 1; -ms-grid-column: 3; -ms-grid-column-span: 1; } .project__rte { -ms-grid-row: 3; -ms-grid-column: 1; grid-area: content; } .project__form { display: none; } .project__edit { -ms-grid-row: 1; -ms-grid-column: 2; --icon-color: var(--text-color--accent); grid-area: edit; width: 4rem; height: 4rem; -webkit-margin-start: 1em; margin-inline-start: 1em; cursor: pointer; font-size: 2em; } .project__edit > * { pointer-events: none; } .project__information { -ms-grid-row: 1; -ms-grid-column: 3; grid-area: information; } .card--block .card__header > .project__information { -ms-grid-row: 4; -ms-grid-column: 1; } @media screen and ( min-width: 64em ){ .card--inline > .card__title { -ms-grid-row: 3; -ms-grid-column: 3; -ms-grid-column-span: 3; } .card--inline .card__category { -ms-grid-row: 5; -ms-grid-column: 3; } .card--inline .card__date { -ms-grid-row: 5; -ms-grid-column: 5; } .card--inline .card__button { -ms-grid-row: 7; -ms-grid-column: 3; -ms-grid-column-span: 3; } .card--inline > .card__title { -ms-grid-row: 3; -ms-grid-column: 3; -ms-grid-column-span: 3; } .card--inline > .basket__title { -ms-grid-row: 3; -ms-grid-column: 3; -ms-grid-column-span: 3; } .card--inline > .summary__product__title { -ms-grid-row: 3; -ms-grid-column: 3; -ms-grid-column-span: 3; } .card--inline > .project__title { -ms-grid-row: 3; -ms-grid-column: 3; -ms-grid-column-span: 3; } } .project__image { -ms-grid-row: 1; -ms-grid-column: 1; grid-area: image; width: 8rem; -webkit-margin-end: var(--grid-gap); margin-inline-end: var(--grid-gap); align-self: start; box-shadow: var(--drop-shadow--md); } @media screen and ( max-width: 39.9375em ){ .select--radio.select--alt .select__item > .card__image { -ms-grid-row: 1; -ms-grid-column: 1; } .select--radio.select--alt .select__item > .card__image { -ms-grid-row: 1; -ms-grid-column: 1; } .select--radio.select--alt .select__item > .basket__image { -ms-grid-row: 1; -ms-grid-column: 1; } .select--radio.select--alt .select__item > .project__image { -ms-grid-row: 1; -ms-grid-column: 1; } } .project__state { --icon-color: var(--text-color--bright); display: flex; align-items: center; gap: 1em; padding-inline: 1em; height: 5.4rem; background: var(--background-color--medium); border-radius: 0 0 var(--radius--md) var(--radius--md); color: var(--text-color--bright); position: absolute; top: 0; right: var(--radius--xl); } .project__state .icon { font-size: 1.2em; } .project__state--private { background: var(--red); } .project__state--published { --selection-background: var(--background-color); --selection-color: var(--text-color--accent); background: var(--background-color--accent); } .project__status { -ms-grid-row: 4; -ms-grid-column: 1; -ms-grid-column-span: 3; grid-area: status; display: grid; grid-template-columns: auto 1fr; grid-template-areas: "progress remains"; align-items: center; gap: 1em; -webkit-margin-before: 1em; margin-block-start: 1em; } @media screen and ( min-width: 48em ){ .project__status { -ms-grid-row: 3; -ms-grid-column: 2; -ms-grid-column-span: 2; } } .project__remains { -ms-grid-row: 1; -ms-grid-column: 3; grid-area: remains; font-weight: 700; } .project__remains span { display: block; } .project__footer { gap: 1em 1.5em; } @media screen and ( max-width: 39.9375em ) { .project__footer > * { flex: 0 0 100%; } } .project--purple { background: var(--background-color--accent-alt); } .project--create { display: grid; grid-template-columns: 1fr; grid-template-rows: auto 1fr; grid-template-areas: "header" "footer"; padding-block: 3em; } .project--create .project__header { -ms-grid-row: 1; -ms-grid-column: 1; grid-area: header; grid-template-columns: 1fr; grid-template-rows: auto 1fr; grid-template-areas: "title" "content"; } .project--create .project__title { -webkit-margin-after: max(0.5em, 1.6rem); margin-block-end: max(0.5em, 1.6rem); } .project--create .project__footer { -ms-grid-row: 2; -ms-grid-column: 1; grid-area: footer; align-self: end; } .dialog { --grid-width: calc(100% - var(--grid-space) * 2 ); --container-columns: 12; position: fixed; top: 50%; left: 50%; transform: translate(-50%, -50%); z-index: var(--z-index-dialog); } .dialog::before { content: ""; width: 100vw; width: 100dvw; height: 100vh; height: 100dvh; background: rgba(0, 0, 0, 0.6); position: absolute; top: 50%; left: 50%; z-index: -1; transform: translate(-50%, -50%); } .dialog::after { --grid-width: 100%; content: ""; width: calc(100% + ( (((var(--grid-width, 100%)) - var(--grid-gap) * (var(--container-columns) - 1) ) / var(--container-columns)) * 2 + var(--grid-gap) * ( 2 - 0 ) + var(--grid-offset, 0%) )); height: 100%; background: var(--background-color--white); border-radius: var(--radius--xl); position: absolute; top: 50%; left: 50%; z-index: -1; transform: translate(-50%, -50%); } @media screen and (min-width: 105.0625rem) { .dialog { --grid-width: calc( var(--layout-max-width) - var(--grid-space) * 2 ); } } .dialog__content { max-height: calc(100vh - 6em); max-height: calc(100dvh - 6em); padding-block: 3em; overflow-y: scroll; -webkit-overflow-scrolling: touch; -ms-overflow-style: none; scrollbar-width: none; } .dialog__actions { -webkit-margin-before: 2em; margin-block-start: 2em; } .footer { grid-template-rows: 3em auto auto 3em auto; background: var(--background-color); font-size: 1.4rem; position: relative; z-index: 2; } @media screen and ( min-width: 48em ) { .footer { grid-template-rows: 3em auto 3em auto; } } @media screen and ( min-width: 85.375em ) { .footer { font-size: 1.6rem; } } .footer::before { grid-column: 1/-1; grid-row: 1/span 4; content: ""; display: block; width: 100vw; height: 100%; background: var(--background-color--dark); position: absolute; left: 50%; transform: translate(-50%, 0); z-index: -1; } @media screen and ( min-width: 48em ) { .footer::before { grid-row: 1/span 3; } } @media screen and ( min-width: 48em ) { .footer__logo, .footer__list { grid-row: 2/span 1; } } @media screen and ( max-width: 47.9375em ) { .footer__logo { grid-row: 2/span 1; } } @media screen and ( max-width: 47.9375em ) { .footer__logo img { margin-inline: auto; -webkit-margin-after: 3em; margin-block-end: 3em; } } @media screen and ( min-width: 48em ) { .footer__logo img { -webkit-margin-before: 2%; margin-block-start: 2%; } } .footer__list { -moz-columns: 2; columns: 2; gap: 0 var(--grid-gap); } @media screen and ( max-width: 47.9375em ) { .footer__list { grid-row: 3/span 1; } } @media screen and ( min-width: 64em ) { .footer__list { -moz-columns: 3; columns: 3; } } .footer__list a:not(.button):not(.header__button) { display: block; padding-block: 1rem; font-size: 1.8rem; line-height: 2.4rem; font-weight: 600; } .footer__list .button, .footer__list .select--radio .select__button, .select--radio .footer__list .select__button, .footer__list .form__field--select-button .form__select-button, .form__field--select-button .footer__list .form__select-button, .footer__list .header__button { align-self: start; } .footer__item a { transition: var(--transition-property, all) var(--transition-duration, 0.32s) var(--transition-easing, ease); } .footer__item a.active, .footer__item a:hover { --text-color: var(--text-color--accent); } .footer__item--button { -webkit-margin-before: 1em; margin-block-start: 1em; } @media screen and ( max-width: 47.9375em ) { .footer__item--button { -moz-column-span: all; column-span: all; display: flex; justify-content: center; -webkit-margin-before: 3em; margin-block-start: 3em; } } .footer__legal { grid-row: span 1/-1; padding-block: 1.5em; } .footer__legal a { transition: var(--transition-property, all) var(--transition-duration, 0.32s) var(--transition-easing, ease); } .footer__legal a.active, .footer__legal a:hover { --text-color: var(--text-color--accent); } @media screen and ( max-width: 47.9375em ) { .footer__legal { text-align: center; justify-content: center; } } @media screen and ( max-width: 47.9375em ) { .footer__legal__list { align-content: center; justify-content: center; gap: 1em; max-width: 100%; flex-direction: column; } } .footer__address, .footer__copyrights { font-weight: 700; max-width: 100%; } .footer__slogan { max-width: 100%; color: var(--text-color--accent); } @media screen and ( max-width: 63.9375em ) { .page--home .row + .row--2-columns .block--v-space { order: 2; } .page--home .row + .row--2-columns .block--cta + .block--cta { -webkit-margin-before: 1em; margin-block-start: 1em; } } @media screen and ( min-width: 64em ) { .page--home .row + .row--2-columns { -webkit-margin-before: 0; margin-block-start: 0; } } .page--home .row--2-columns .block--white { position: relative; z-index: 2; } .page--home .row--2-columns .block--white::after { content: ""; display: block; width: 100vw; max-width: 75rem; aspect-ratio: 1/1; border-radius: 100rem; background: var(--background-color--accent-alt); position: absolute; bottom: 0; left: 0; transform: translate(-40%, 30%); z-index: -2; } @media screen and ( min-width: 48em ) { .page--home .row--2-columns .block--white::after { width: 50vw; max-width: 75rem; } } .page--home .decoration--idea { order: 3; grid-row: span 1/-1; align-self: start; transform: scale(0.95); position: relative; z-index: 3; } @media screen and ( min-width: 64em ) { .page--home .decoration--idea { margin-block: var(--grid-gap); } } .page--circle-sm .main-wrapper::before { width: 50vw; height: 50vw; } @media screen and ( min-width: 48em ) { .page--circle-footer .main-content, .page--circle-footer-sm .main-content { -webkit-padding-after: calc(var(--block-spacing) + 3em); padding-block-end: calc(var(--block-spacing) + 3em); } } .page--circle-footer .main-content::after, .page--circle-footer-sm .main-content::after { content: ""; display: none; width: 40vw; max-width: 60rem; aspect-ratio: 2/1; border-radius: 100rem 100rem 0 0; background: var(--background-color--accent-alt); position: absolute; bottom: 0; left: 0; transform: translate(-30%, 0); } @media screen and ( min-width: 48em ) { .page--circle-footer .main-content::after, .page--circle-footer-sm .main-content::after { display: block; width: 40vw; max-width: 60rem; } } @media screen and ( min-width: 48em ) { .page--circle-footer-sm .main-content { -webkit-padding-after: calc(var(--block-spacing) + 5em); padding-block-end: calc(var(--block-spacing) + 5em); } } .page--circle-footer-sm .main-content::after { transform: translate(-30%, 60%); } .page--single .block--rte { position: relative; } .page--single .block--rte::after { content: ""; display: none; width: 25vw; max-width: 38rem; aspect-ratio: 1/1; border-radius: 100rem; background: var(--background-color--accent); position: absolute; top: 0; left: 0; } @media screen and ( min-width: 64em ) { .page--single .block--rte::after { display: block; left: calc(( (((var(--grid-width, 100%)) - var(--grid-gap) * (var(--container-columns) - 1) ) / var(--container-columns)) * -1 + var(--grid-gap) * ( -1 - var(--minus-gap) ) + var(--grid-offset, 0%) ) - var(--grid-space)); transform: translate(-50%, calc(var(--row-spacing) * -1)); } } @media screen and ( min-width: 80em ) { .page--single .block--rte::after { left: calc(( (((var(--grid-width, 100%)) - var(--grid-gap) * (var(--container-columns) - 1) ) / var(--container-columns)) * -2 + var(--grid-gap) * ( -2 - var(--minus-gap) ) + var(--grid-offset, 0%) ) - var(--grid-space)); transform: translate(-50%, calc(var(--row-spacing) * -1)); } } .page--author { --background-color--circle: var(--background-color--space); } .page--contrast:not(.scrolled) .header:not(.header--open) .header__quickactions { --icon-color: var(--text-color--bright); } .page--basket .main-wrapper::before { top: -33%; } .page--basket-payment .block--summary, .page--basket-confirmation .block--summary { display: block !important; } @media screen and ( max-width: 63.9375em ) { .page--basket-payment .block--summary, .page--basket-confirmation .block--summary { -webkit-margin-before: var(--block-spacing) !important; margin-block-start: var(--block-spacing) !important; } } @media screen and ( min-width: 64em ) { .page--basket-payment .block--summary, .page--basket-confirmation .block--summary { transform: translate(0, calc(var(--row-spacing) * -0.5)); } } .page--search .block--sort { transform: translate(0, 50%); } .page--archives .block--sidebar { -webkit-margin-before: 0; margin-block-start: 0; } .js-header .header__logo, .js-header .header__actions, .js-header .header__quickactions, .js-header .header__button, .js-header .header__button::before, .js-header .header__button::after, .js-header .header__button .icon span, .js-header .header__button .icon span::before, .js-header .header__button .icon span::after, .js-header .header__button .button__background::before, .js-header .header__button .button__background::after, .js-header .header__nav, .js-header .header__wrapper::before, .js-header .header__wrapper::after { transition: var(--transition-property, all) var(--transition-duration, 0.32s) var(--transition-easing, ease); } .js-header:not(.header--open) .header__nav { opacity: 0; pointer-events: none; } .js-header:not(.header--open) .header__button::after { opacity: 0; } @media screen and ( max-width: 47.9375em ) { .js-header:not(.header--open) .header__quickactions { opacity: 0; pointer-events: none; } .js-header:not(.header--open) .header__button::before { opacity: 0; } .js-header:not(.header--open) .header__button .button__background--left::before { transform: translate(calc(100% - 1.9rem - 1rem), -50%); } } .js-header.header--open .header__nav { opacity: 1; pointer-events: auto; } .js-header.header--open .header__logo, .js-header.header--open .header__actions { opacity: 0; pointer-events: none; transform: translate(0, -100%); } .js-header.header--open .header__wrapper::before, .js-header.header--open .header__wrapper::after { transform: translate(0, 0) !important; } .js-header.header--open .header__wrapper::after { background: var(--background-color--dark); } .js-header.header--open .header__button::before { opacity: 0; } .js-header.header--open .header__button .icon span { background: transparent; } .js-header.header--open .header__button .icon span::before { transform: translate(-50%, 0) rotate(-135deg); } .js-header.header--open .header__button .icon span::after { transform: translate(-50%, 0) rotate(-45deg); } body:not(.scrolled) .header:not(.header--open) .header__wrapper::before, body:not(.scrolled) .header:not(.header--open) .header__wrapper::after { transform: translate(0, -100%); } body:not(.scrolled) .header__wrapper::before { opacity: 0; } body.scrolled .header:not(.header--open) .header__wrapper::before, body.scrolled .header:not(.header--open) .header__wrapper::after { transform: translate(0, calc(-100% + 5.6rem + var(--header-offset))); } body.scrolled .header:not(.header--open) .header__quickactions, body.scrolled .header:not(.header--open) .header__button { transform: translate(0, calc(var(--header-offset) * -0.5)); } body.scrolled .header:not(.header--open) .header__quickactions a.active, body.scrolled .header:not(.header--open) .header__quickactions a:hover { --icon-color: var(--text-color--accent); } body.scrolled .header__logo, body.scrolled .header__actions { transform: translate(0, calc(var(--header-offset) * -0.5)); } body.scrolled .header__wrapper::before { opacity: 1; } .slider__item, .slider__button, .slider__content { transition: var(--transition); transition-duration: 0.56s; transition-timing-function: cubic-bezier(0.4, 0, 0.1, 1); } .js-slider { --slider-index: 0; --slider-position: -1; --slider-max: 1; --slider-gap-factor: 1; } .js-slider .slider__item { --slide-position: 0; transform: translate(calc(-100% * var(--slider-index)), 0); } .js-slider .slider__item:not(.active) { opacity: 0; } .js-slider.first .slider__button--previous { opacity: 0; pointer-events: none; } .js-slider.last .slider__button--next { opacity: 0; pointer-events: none; } .accordion__content::after, .accordion__button span, .accordion__content { transition: var(--transition-property, all) var(--transition-duration, 0.32s) var(--transition-easing, ease); } .js-accordion.expand > .js-accordion__button .icon { transform: rotate(45deg); } .js-accordion.expand > .js-accordion__button.sidebar__button--lg .icon { transform: scale(-1, -1); } .js-accordion.expand > .js-accordion__button::after { opacity: 1; } .js-accordion:not(.expand) > .accordion__content { grid-template-rows: var(--accordion-based-height, 0fr) 0fr; opacity: 0; pointer-events: none; } .js-accordion:not(.expand) > .js-accordion__button::after { opacity: 0; } .js-accordion:not(.expand) > .accordion__button .closed { transform: translate(0, 100%); opacity: 0; pointer-events: none; } .js-accordion.expand > .accordion__content { opacity: 1; grid-template-rows: var(--accordion-based-height, 0fr) 1fr; } .js-accordion.expand > .accordion__content::after { opacity: 0; } .js-accordion.expand > .accordion__button .opened { transform: translate(0, 100%); opacity: 0; pointer-events: none; } @media screen and ( min-width: 48em ) { .js-accordion.js-select-radio .js-accordion__button::after { opacity: 1; } } .js-accordion.js-select-radio.expand .js-accordion__button .icon { transform: scale(-1, -1); } .js-select .form__select-list, .js-select .form__select-button::after { transition: var(--transition); } .js-select:not(.open) .form__select-list { opacity: 0; pointer-events: none; } .js-select.open .form__select-button::after { transform: translate(0, 25%) rotate(45deg) scale(-1, -1); } .js-select-multiple .select-multiple__options { transition: var(--transition); } .js-select-multiple.all-visible .select-multiple__item:is(.hidden, .checked) { display: grid !important; } .js-select-multiple:not(.no-result) .select-multiple__warning { display: none; } .js-select-multiple.no-result .select-multiple__list { display: none; } .js-select-multiple:not(.open) .select-multiple__options { opacity: 0; pointer-events: none; } .js-select-radio.select--filter .select__wrapper, .js-select-radio.select--filter .select__value, .js-select-radio.select--filter .select__button { transition: var(--transition-property, all) var(--transition-duration, 0.32s) var(--transition-easing, ease); } .js-select-radio.select--filter .select__item.selected .select__value, .js-select-radio.select--filter .select__item.selected .select__button { color: var(--text-color--accent); } .js-select-radio.select--radio .select__wrapper, .js-select-radio.select--radio .select__value, .js-select-radio.select--radio .select--filter .select__button, .select--filter .js-select-radio.select--radio .select__button { transition: var(--transition-property, all) var(--transition-duration, 0.32s) var(--transition-easing, ease); } .js-select-radio.select--radio .select__item.selected .select__image::before { opacity: 0; } .js-select-radio.select--radio .select__item.selected .select__image::after { opacity: 1; } @media screen and ( max-width: 47.9375em ) { .js-select-radio.select--radio:not(.select--alt).open { z-index: 100; } .js-select-radio.select--radio:not(.select--alt).open .select__wrapper { opacity: 1; } .js-select-radio.select--radio:not(.select--alt).open .select__button .icon::before { transform: translate(0, 25%) rotate(135deg) scale(-1, -1); } .js-select-radio.select--radio:not(.select--alt).open .select__item.selected .select__value, .js-select-radio.select--radio:not(.select--alt).open .select__item.selected .select--filter .select__button, .select--filter .js-select-radio.select--radio:not(.select--alt).open .select__item.selected .select__button, .js-select-radio.select--radio:not(.select--alt).open .select__item.selected .select__value span, .js-select-radio.select--radio:not(.select--alt).open .select__item.selected .select--filter .select__button span, .select--filter .js-select-radio.select--radio:not(.select--alt).open .select__item.selected .select__button span { --text-color: var(--text-color--accent); } .js-select-radio.select--radio:not(.select--alt):not(.open) .select__wrapper { opacity: 0; pointer-events: none; } } .js-file:not(.is-filled) .icon--check { opacity: 0; transform: scale(0); } .js-file:not(.is-filled) .form__file-reset { display: none; } .js-file.is-filled .icon--file-upload--r { opacity: 0; transform: scale(0); } .js-file.is-filled .form__filemark::before { opacity: 0; } .js-file.is-filled .form__filemark::after { opacity: 1; } .js-dialog { transition: var(--transition-property, all) var(--transition-duration, 0.32s) var(--transition-easing, ease); } .js-dialog.open { opacity: 1; pointer-events: auto; } .js-dialog:not(.open) { opacity: 0; pointer-events: none; } .js-editable__title { max-width: 100%; overflow: hidden; text-overflow: ellipsis; }