@layer reset, external, master, addon, theme, overrides; @layer reset { *, *::before, *::after { box-sizing: border-box; } * { margin: 0; } html { scroll-behavior: smooth; @media (prefers-reduced-motion) { scroll-behavior: auto; } } body { font-family: var(--font-basic); font-size: var(--fontsize); color: var(--font-color); line-height: var(--lineheight); accent-color: var(--form-accent-color); -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; } .bodyContainer { display: flex; flex-direction: column; min-height: 100vh; } a { text-decoration: underline; color: inherit; } article { width: 100%; position: relative; } button { background: none; border: none; cursor: pointer; } img, video, canvas { max-width: 100%; height: auto; display: block; } svg { display: block; } input, button, textarea, select { font: inherit; } p, h1, h2, h3, h4, h5, h6 { overflow-wrap: break-word; } main { flex-grow: 1; } .sr-only { border: 0 !important; clip-path: inset(50%) !important; height: 1px !important; margin: -1px !important; overflow: hidden !important; padding: 0 !important; width: 1px !important; white-space: nowrap !important; } } @layer master { :root { color-scheme: light only; /*COLORS*/ --color1: #f0f8ff; --color2: #c4def4; --color3: #1E6998; --color-dark: #0E1218; --color-light: #fff; --transition: all 0.4s ease-in-out; /*DEFAULT FONT*/ --font-basic: Fira Sans,sans-serif; --font-sub: Fira Sans,sans-serif; --font-color: #0c0e15; /*VIEWPORT*/ --min-viewport: 48; --max-viewport: 100; /* XS FONTSIZE */ --min-xs-fontsize: 0.875; --max-xs-fontsize: 1; --pref-xs-fontsize: calc(calc(var(--min-xs-fontsize) * 1rem) + (var(--max-xs-fontsize) - var(--min-xs-fontsize)) * ((calc(var(--max-viewport) * 1vw) - calc(var(--min-viewport) * 1rem)) / (var(--max-viewport) - var(--min-viewport)))); --xs-fontsize: clamp(calc(var(--min-xs-fontsize) * 1rem), var(--pref-xs-fontsize), calc(var(--max-xs-fontsize) * 1rem)); --xs-lineheight: 1; /* S FONTSIZE */ --min-s-fontsize: 1.125; --max-s-fontsize: 1.375; --pref-s-fontsize: calc(calc(var(--min-s-fontsize) * 1rem) + (var(--max-s-fontsize) - var(--min-s-fontsize)) * ((calc(var(--max-viewport) * 1vw) - calc(var(--min-viewport) * 1rem)) / (var(--max-viewport) - var(--min-viewport)))); --s-fontsize: clamp(calc(var(--min-s-fontsize) * 1rem), var(--pref-s-fontsize), calc(var(--max-s-fontsize) * 1rem)); --s-lineheight: 1; /* FONTSIZES */ --min-fontsize: 1.0; --max-fontsize: 1.125; --pref-fontsize: calc(calc(var(--min-fontsize) * 1rem) + (var(--max-fontsize) - var(--min-fontsize)) * ((calc(var(--max-viewport) * 1vw) - calc(var(--min-viewport) * 1rem)) / (var(--max-viewport) - var(--min-viewport)))); --fontsize: clamp(calc(var(--min-fontsize) * 1rem), var(--pref-fontsize), calc(var(--max-fontsize) * 1rem)); --lineheight: 1.25; /* M FONTSIZE */ --min-m-fontsize: 1.5; --max-m-fontsize: 1.75; --pref-m-fontsize: calc(calc(var(--min-m-fontsize) * 1rem) + (var(--max-m-fontsize) - var(--min-m-fontsize)) * ((calc(var(--max-viewport) * 1vw) - calc(var(--min-viewport) * 1rem)) / (var(--max-viewport) - var(--min-viewport)))); --m-fontsize: clamp(calc(var(--min-m-fontsize) * 1rem), var(--pref-m-fontsize), calc(var(--max-m-fontsize) * 1rem)); --m-lineheight: 1; /* L FONTSIZE */ --min-l-fontsize: 2.813; --max-l-fontsize: 3.75; --pref-l-fontsize: calc(calc(var(--min-l-fontsize) * 1rem) + (var(--max-l-fontsize) - var(--min-l-fontsize)) * ((calc(var(--max-viewport) * 1vw) - calc(var(--min-viewport) * 1rem)) / (var(--max-viewport) - var(--min-viewport)))); --l-fontsize: clamp(calc(var(--min-l-fontsize) * 1rem), var(--pref-l-fontsize), calc(var(--max-l-fontsize) * 1rem)); --l-lineheight: 1.2; /* XL FONTSIZE */ --min-xl-fontsize: 4.688; --max-xl-fontsize: 5.625; --pref-xl-fontsize: calc(calc(var(--min-xl-fontsize) * 1rem) + (var(--max-xl-fontsize) - var(--min-xl-fontsize)) * ((calc(var(--max-viewport) * 1vw) - calc(var(--min-viewport) * 1rem)) / (var(--max-viewport) - var(--min-viewport)))); --xl-fontsize: clamp(calc(var(--min-xl-fontsize) * 1rem), var(--pref-xl-fontsize), calc(var(--max-xl-fontsize) * 1rem)); --xl-lineheight: 1.2; /* FORMS */ --form-color: #bfbfbf; --form-accent-color: #d7d7d7; --form-focused: #efefef; --form-error: #ffe8ec; --form-description: #efefef; --form-placeholder: #d7d7d7; --form-odd: #f9f9f9; --form-input-size: 16px; --form-border-radius: 5px; /* OTHER */ --border-radius: 10px; --header-height: 50px; /* BUTTON */ --button-hover: var(--color3); --button-padding: 16px 24px; --button-radius: 30px; } @media (max-width: 56em) { :root { --spacer: 5vw; --section: 96px; --gutter: 24px; --min-gutter: -24px; --padding: 24px; --min-padding: -24px; } } @media (--max-fablet) { :root { --spacer: 5vw; --section: 96px; --gutter: 24px; --min-gutter: -24px; --padding: 24px; --min-padding: -24px; } } @media (min-width: 56em) { :root { --spacer: 5vw; --section: 120px; --gutter: 24px; --min-gutter: -24px; --padding: 32px; --min-padding: -32px; } } @media (--min-fablet) { :root { --spacer: 5vw; --section: 120px; --gutter: 24px; --min-gutter: -24px; --padding: 32px; --min-padding: -32px; } } @media (min-width: 90em) { :root { --spacer: 5vw; --section: 144px; --gutter: 24px; --min-gutter: -24px; --padding: 48px; --min-padding: -48px; } } @media (--min-desktop) { :root { --spacer: 5vw; --section: 144px; --gutter: 24px; --min-gutter: -24px; --padding: 48px; --min-padding: -48px; } } @media (min-width: 100em) { :root { --spacer: 15vw; } } @media (--min-largescreen) { :root { --spacer: 15vw; } } /* playButton + scrollUp animation */ @keyframes spin { from { transform: rotate(0deg); } to { transform: rotate(360deg); } } /* scrollDown animation */ @keyframes scroll-down { 0% { transform: translate(0, 0); } 50% { transform: translate(0, 10px); } } /* submit loader */ @keyframes button-loader-spinner { from {transform: rotate(0turn);} to {transform: rotate(1turn);} } } @layer master { body:not(.hasCover) { main { margin-top: calc(var(--padding) + var(--padding) + var(--header-height)); section.templateCover:first-of-type { padding-top: 0; } } } .tags { display: flex; gap: calc(var(--gutter) / 2); flex-wrap: wrap; .tag { display: flex; gap: calc(var(--gutter) / 2); align-items: center; width: auto; background: var(--color2); line-height: 1; padding: 8px 12px; border-radius: var(--border-radius); svg { width: 16px; height: 16px; } } .delete {width: auto;} } .scrollDown { position: absolute; color: white; bottom: var(--padding); left: 50%; transform: translateX(-50%); z-index: 9; cursor: pointer; display: flex; flex-direction: column; align-items: center; gap: calc(var(--gutter) / 3); font-size: 12px; .icon { width: 15px; height: auto; } @media (max-width: 56em) { display: none; } @media (--max-fablet) { display: none; } &:hover { @media (hover: hover) { .icon { animation: scroll-down 1s ease-in-out infinite; } } } } .backToTop { display: flex; position: fixed; bottom: 30px; z-index: 999; right: 30px; border: 1px solid rgba(255, 255, 255, 0.75); background: rgba(255, 255, 255, 0.5); -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); width: 55px; height: 55px; border-radius: 100%; text-align: center; text-decoration: none; align-items: center; justify-content: center; transition: var(--transition); svg { color: inherit; width: 16px; height: 16px; } @media (max-width: 56em) { display: none !important; } @media (--max-fablet) { display: none !important; } &:after { position: absolute; top: 0; width: 100%; height: 100%; display: block; content: ""; background-image: url('data:image/svg+xml,%3Csvg xmlns=\'http://www.w3.org/2000/svg\' viewBox=\'0 0 50 50\'%3E%3Cpath d=\'M26.4 5.5c.5.6 1 .9 1.7 1 1.2.2 1.5-.3 1.6-.6 0-.2 0-.6-1.3-1.2-1.4-.7-2.3-1.6-2-2.9C26.7.7 27.9.1 29.3.3c.9.1 1.8.6 2.3 1.4l-1.2.8c-.2-.4-.7-.8-1.3-.9-1-.2-1.2.3-1.3.5 0 .3-.1.7 1.2 1.2 1.3.6 2.4 1.4 2.2 2.7-.3 1.6-1.9 1.9-3.2 1.7-1.1-.2-1.9-.7-2.6-1.5l1.1-.9-.1.2zm11.7 1.3c0-.8-.3-1.6-1-2.1-1.2-.7-2.5-.2-3.1 1-.7 1.2-.5 2.5.8 3.2.9.5 1.8.4 2.5-.3l1 1c-1.2 1.2-2.9 1.3-4.2.5C32.2 9 31.7 6.8 32.8 5c1-1.7 3-2.7 5.1-1.5 1.2.7 1.9 2 1.8 3.4l-1.6-.1zm.1 6.5-.9-1.2L43 7.7l2.2 2.8c.8 1.1.8 2.5-.2 3.3-.7.6-1.6.6-2.3.3 0 1.1-.7 2-1.6 2.8l-1-1.2c1.2-.9 1.7-1.9.9-2.9l-.8-1-1.9 1.5h-.1zm4.6-3.6-1.6 1.2 1.3 1.6c.4.5 1 .5 1.4.2s.5-1 .2-1.4l-1.3-1.6zm3.8 13.9c-2 .5-4.1-.7-4.6-2.7s.7-4.1 2.7-4.6 4.1.7 4.6 2.7-.7 4.1-2.7 4.6zm-.3-1.5c1.3-.3 2.1-1.6 1.8-2.9-.3-1.2-1.6-2-2.9-1.6-1.3.3-2.1 1.6-1.8 2.8.3 1.2 1.6 2 2.9 1.6v.1zm3.5 5.2-5.8-.6-.3 3.1h-1.4c0-.1.5-4.7.5-4.7l7.2.7-.2 1.5zm-1.6 7-5.3-2.2-1.2 2.9-1.3-.5 1.8-4.2 6.6 2.8-.6 1.2zm-8.7 11.4-3.1-3.4c-1.1-1.2-.9-3 .3-4.1s3-1.2 4.1 0l3.1 3.4-1.1 1-3.1-3.4c-.5-.5-1.4-.6-2.1 0-.7.6-.7 1.5-.2 2.1l3.1 3.4-1 1zm-6.8-4.5 1.4-.5 2.7 6.7-3.3 1.3c-1.3.5-2.6 0-3.1-1.3-.5-1.4.1-2.6 1.4-3.1l1.9-.8-.9-2.3h-.1zm2.1 5.4-.7-1.7-1.9.8c-.6.2-.7.7-.5 1.2.2.4.7.7 1.2.5l1.9-.8zm-11.2-1.7c-.5-.6-1-.9-1.7-1-1.2-.2-1.5.3-1.6.6 0 .2 0 .6 1.3 1.2 1.4.7 2.3 1.6 2 2.9-.3 1.1-1.5 1.7-2.9 1.5-.9-.1-1.8-.6-2.3-1.4l1.2-.8c.2.4.7.8 1.3.9 1 .2 1.2-.3 1.3-.5 0-.3.1-.7-1.2-1.2-1.3-.6-2.4-1.4-2.2-2.7.3-1.6 1.9-1.9 3.2-1.7 1.1.2 1.9.7 2.6 1.5l-1.1.9.1-.2zm-11.7-1.4c0 .8.3 1.6 1 2.1 1.2.7 2.5.2 3.1-1 .7-1.2.5-2.5-.7-3.2-.8-.5-1.8-.4-2.5.3l-1-1c1.2-1.2 2.9-1.3 4.2-.5 1.9 1.1 2.4 3.3 1.3 5.1-1 1.7-3 2.7-5.1 1.5-1.2-.7-1.9-2-1.8-3.4h1.5v.1zm-.1-6.4.9 1.2L7 42.7l-2.2-2.8c-.8-1.1-.8-2.5.2-3.3.7-.6 1.6-.6 2.3-.3 0-1.1.7-2 1.6-2.8l1 1.2c-1.2.9-1.7 1.9-.9 2.9l.8 1 2-1.5zm-4.6 3.5 1.6-1.2-1.3-1.6c-.4-.5-1-.5-1.4-.2s-.5 1-.2 1.4l1.3 1.6zM3.4 26.8c2-.5 4.1.7 4.6 2.7s-.7 4.1-2.7 4.6-4.1-.7-4.6-2.7.7-4.1 2.7-4.6zm.3 1.4c-1.3.3-2.1 1.6-1.8 2.9.3 1.2 1.6 2 2.9 1.6 1.3-.3 2.1-1.6 1.8-2.8-.3-1.2-1.6-2-2.9-1.6v-.1zM.2 23l5.8.6.3-3.1h1.4c0 .1-.5 4.7-.5 4.7L0 24.4.2 23zm1.6-7 5.3 2.2 1.2-2.9 1.3.5L7.8 20l-6.6-2.8.6-1.2zm8.7-11.4L13.6 8c1.1 1.2.9 3-.3 4.1s-3 1.2-4.1 0L6.1 8.7l1.1-1 3.1 3.4c.5.5 1.4.6 2.1 0 .7-.6.7-1.5.2-2.1L9.5 5.6l1.1-1h-.1zm6.9 4.5-1.4.5-2.7-6.7 3.3-1.3c1.3-.5 2.6 0 3.1 1.3.5 1.4-.1 2.6-1.4 3.1l-1.9.8 1 2.3zm-2.2-5.3.7 1.7 1.9-.8c.6-.2.7-.7.5-1.2-.2-.4-.7-.7-1.2-.5l-1.9.8z\' fill=\'%23434343\'/%3E%3C/svg%3E'); /*change fill color per project*/ background-size: 80% auto; background-repeat: no-repeat; background-position: center; animation-name: spin; animation-duration: 20s; animation-iteration-count: infinite; animation-timing-function: linear; } @media(hover: hover){ &:hover { background: rgba(255, 255, 255, 0.65); &:after { animation-play-state: paused; } } } } .skiplinks { a { position: absolute; overflow: hidden; height: 1px; width: 1px; clip-path: inset(50%); white-space: nowrap; &:focus { position: static; width: auto; height: auto; clip-path: unset; } } } [aria-busy=true] { &:after { content: ''; position: absolute; display: flex; border-radius: 50%; background: radial-gradient(farthest-side,var(--font-color) 100%,transparent) top/4px 4px no-repeat, conic-gradient(transparent 30%,var(--font-color)); -webkit-mask: radial-gradient(farthest-side,transparent calc(100% - 4px),var(--font-color) 0); mask: radial-gradient(farthest-side,transparent calc(100% - 4px),var(--font-color) 0); width: 20px; height: 20px; right: var(--form-input-size); animation: button-loader-spinner 1s ease infinite; } } .block { .footer { &:has(a) { .button { position: initial; &:after { content: ''; position: absolute; left: 0; top: 0; right: 0; bottom: 0; } } } } } svg.icon { width: 24px; } } @layer master { /* set the default background color with section styling */ section, .themeColor3 { background-color: #fff; } .themeColor1 { background-color: var(--color1); .block { background-color: var(--color2); .footer { .button:not(.textLink) { &:hover { @media (hover: hover) { background-color: var(--color3); } } } } } } .themeColor2 { background-color: var(--color2); .block { background-color: var(--color1); } .buttons { .button:not(.textLink) { &.primary, &.submit { background-color: var(--color1); &:hover { @media (hover: hover) { background-color: var(--color3); color: #fff; } } } &.secondary { &:hover { @media (hover: hover) { background-color: var(--color1); } } } } } } .themeColor3 { background-color: var(--color3); color: #fff; .block { background-color: var(--color2); .footer { .button:not(.textLink) { &:hover { @media (hover: hover) { background-color: var(--color3); } } } } } .buttons { .button { &.primary, &.submit { &:hover { @media (hover: hover) { background-color: var(--color1); color: var(--font-color); } } } &.secondary { background-color: var(--color1); color: var(--font-color); &:hover { @media (hover: hover) { background-color: var(--color2); } } } } } } section { .block { background-color: var(--color1); color: var(--font-color); } } .themeColor1:not(.templateHomepageCover, .templateCover, .templateBackground) + .themeColor1:not(.templateBackground), .themeColor2:not(.templateHomepageCover, .templateCover, .templateBackground) + .themeColor2:not(.templateBackground), .themeColor3:not(.templateHomepageCover, .templateCover, .templateBackground) + .themeColor3:not(.templateBackground) { padding-top: 0; } } @layer master { :root { --symbol: "theme"; --symbol-size: 18px; } @font-face { font-family: 'theme'; font-display: swap; src: url("fonts/theme.woff2") format('woff2'), url("fonts/theme.woff") format('woff'); font-weight: normal; font-style: normal; } .symbol { display: block; font-family: var(--symbol); font-size: var(--symbol-size); &.functieniveau {&:before {content: "\e901";}} &.salaris {&:before {content: "\e902";}} &.vakgebied {&:before {content: "\e903";}} &.werkervaring {&:before {content: "\e905";}} &.werklocatie {&:before {content: "\e90a";}} &.werkweek {&:before {content: "\e90b";}} &.print {&:before {content: "\e954";}} &.share {&:before {content: "\e80d";}} &.share2 {&:before {content: "\e916";}} &.facebook {&:before {content: "\e900";}} &.instagram {&:before {content: "\e904";}} &.linkedin {&:before {content: "\e906";}} &.pinterest {&:before {content: "\e908";}} &.tiktok {&:before {content: "\e90d";}} &.x {&:before {content: "\e909";}} &.vimeo {&:before {content: "\e90c";}} &.youtube {&:before {content: "\e918";}} &.whatsapp {&:before {content: "\e917";}} &.messenger {&:before {content: "\e907";}} &.rss {&:before {content: "\e0e5";}} &.car {&:before {content: "\e531";}} &.bus {&:before {content: "\e530";}} &.bike {&:before {content: "\e52f";}} &.walk {&:before {content: "\e536";}} &.distance {&:before {content: "\e0b2";}} &.duration {&:before {content: "\e8b5";}} &.plus {&:before {content: "\e145";}} &.minus {&:before {content: "\e15b";}} &.delete {&:before {content: "\e91c";}} &.arrow-left {&:before {content: "\e5c4";}} &.arrow-right {&:before {content: "\e5c8";}} &.arrow-top {&:before {content: "\e5d8";}} &.arrow-bottom {&:before {content: "\e5db";}} &.arrow-small-left {&:before {content: "\e314";}} &.arrow-small-right {&:before {content: "\e315";}} &.arrow-small-top {&:before {content: "\e316";}} &.arrow-small-bottom {&:before {content: "\e313";}} &.menu-close:before {content: "\E313"; transform:scaleY(-1);} &.menu-open::before {content: "\E313"; } &.open::before {content: "\E313"; } &.close {&:before {content: "\E91C";}} &.filter {&:before {content: "\E91D";}} &.list-view {&:before {content: "\E5D3";}} &.grid-view {&:before {content: "\E5D3";}} &.map-view {&:before {content: "\e8b4";}} &.star {&:before {content: "\e91a";}} &.star.active {&:before {content: "\e91b";}} &.heart {&:before {content: "\e87e";}} &.heart.active {&:before {content: "\e87d";}} &.play {&:before {content: "\e037";}} &.show {&:before {content: "\e56b";}} &.warning {&:before {content: "\26A0";}} &.info {&:before {content: "\e88f";}} &.ics {&:before {content: "\e916";}} /* formicons */ &.user {&:before {content: "\e7fd";}} &.email {&:before {content: "\e0e1";}} &.phone {&:before {content: "\e0cd";}} &.pin {&:before {content: "\e8b4";}} &.upload {&:before {content: "\e226";}} &.search {&:before {content: "\e8b6";}} &.calendar {&:before {content: "\E919";}} &.check {&:before {content: "\e5ca";}} &.dropdown {&:before {content: "\e5c5";}} &.dropup {&:before {content: "\e5c7";}} } } @layer master { .title, .subTitle, h1, h2, h3, h4 { margin: 0; padding: 0; font-family: var(--font-sub); } .title { color: var(--font-color); font-family: var(--font-sub); font-weight: bold; font-size: var(--l-fontsize); line-height: var(--l-lineheight); text-wrap: balance; @media (max-width: 56em) { -webkit-hyphens: auto; hyphens: auto; } @media (--max-fablet) { -webkit-hyphens: auto; hyphens: auto; } } .subTitle { color: var(--font-color); font-family: var(--font-sub); font-weight: normal; display: block; font-size: var(--m-fontsize); line-height: var(--m-lineheight); } } @layer master { .button { position: relative; display: inline-flex; justify-content: center; align-items: center; column-gap: calc(var(--gutter) / 2); padding: var(--button-padding); border-radius: var(--button-radius); border: 0; font-family: var(--font-basic); font-size: var(--fontsize); line-height: 1; text-decoration: none; cursor: pointer; transition: var(--transition); &:hover { @media (hover: hover) { background-color: var(--button-hover); color: #fff; } } @media (max-width: 56em) { &:not(.textLink) { width: 100%; } } @media (--max-fablet) { &:not(.textLink) { width: 100%; } } &.primary, &.submit { background-color: var(--color2); color: var(--font-color); &:hover { @media (hover: hover) { background-color: var(--button-hover); color: #fff; } } } &.secondary { background-color: var(--color3); color: #fff; &:hover { @media (hover: hover) { background-color: var(--color2); color: var(--font-color); } } } &.outline, &.cancel { background: none; box-shadow: inset 0 0 0 1px var(--color3); color: var(--font-color); &:hover { @media (hover: hover) { background-color: var(--button-hover); box-shadow: inset 0 0 0 1px var(--button-hover); color: #fff; } } } &.textLink { padding: 0; background: none; color: var(--font-color); border-radius: 0; &:hover { @media (hover: hover) { background: none; color: var(--button-hover); } } } &.delete { padding: 0; text-decoration: underline; text-underline-offset: 6px; background: none; color: var(--font-color); &:hover { @media (hover: hover) { color: var(--button-hover); } } } } } @layer master { fieldset { display: flex; flex-direction: column; gap: calc(var(--gutter) / 3); border: none; padding: 0; } legend { float: left; font-size: var(--m-fontsize); line-height: var(--m-lineheight); } } @layer master { input, select, textarea { box-shadow: none; border-radius: var(--form-border-radius); border: 1px solid var(--form-color); background-color: #fff; width: 100%; padding: var(--form-input-size); line-height: 30px; font-family: var(--font-basic); font-size: var(--fontsize); color: var(--font-color); transition: var(--transition); min-height: 30px; &::placeholder { opacity: 1; color: var(--form-placeholder); } @media (hover: hover) { &:hover { border: 1px solid var(--form-focused); } } &:invalid { border: 1px solid var(--form-error); ~ .error {display: block;} } &[type=file] { min-height: calc(var(--form-input-size) * 2 + 30px); position: relative; &::file-selector-button { position: absolute; right: var(--form-input-size); top: 50%; transform: translateY(-50%); padding: 10px var(--form-input-size); margin: 0; border-radius: var(--form-border-radius); background: var(--form-color); color: var(--font-color); border: 0; font-size: var(--xs-fontsize); transition: var(--transition); } &:hover { @media (hover: hover) { &::file-selector-button { color: #fff; background: var(--form-accent-color); } } } } &[type=checkbox], &[type=radio] { margin-right: 10px; position: relative; appearance: none; border: 1px solid var(--form-color); padding: 0; width: 30px; line-height: normal; &:hover { @media (hover: hover) { border-color: var(--form-focused); } } } &[type=checkbox] { &:after { content: ""; inset: 4px; position: absolute; -webkit-mask: url('data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAyNCAyNCIgc3Ryb2tlLXdpZHRoPSI0IiBzdHJva2U9IiMwMDAiIGZpbGw9Im5vbmUiIHN0cm9rZS1saW5lY2FwPSJyb3VuZCIgc3Ryb2tlLWxpbmVqb2luPSJyb3VuZCI+IDxwYXRoIGQ9Ik01IDEybDUgNWwxMCAtMTAiLz48L3N2Zz4=') no-repeat center / contain; mask: url('data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAyNCAyNCIgc3Ryb2tlLXdpZHRoPSI0IiBzdHJva2U9IiMwMDAiIGZpbGw9Im5vbmUiIHN0cm9rZS1saW5lY2FwPSJyb3VuZCIgc3Ryb2tlLWxpbmVqb2luPSJyb3VuZCI+IDxwYXRoIGQ9Ik01IDEybDUgNWwxMCAtMTAiLz48L3N2Zz4=') no-repeat center / contain; } &:checked { border-color: var(--form-focused); &:after { background: var(--form-focused); } } &[role=switch] { display: grid; place-content: center start; width: 50px; border-radius: 30px; -webkit-mask: none; mask: none; border-width: 2px; background: var(--form-color); &:after { background: #fff; -webkit-mask: none; mask: none; border-radius: 100%; height: 24px; inset: unset; position: static; width: 24px; transform: translateX(0); transition: transform 0.3s ease; } &:hover { @media (hover: hover) { border-color: var(--form-color); } } &:checked { border-color: var(--form-focused); background: var(--form-focused); &::after { transform: translateX(21px); } } } } &[type=radio] { border-radius: 100%; &:after { content: ""; inset: 6px; position: absolute; border-radius: 100%; } &:checked { border-color: var(--form-focused); &:after { background: var(--form-focused); } } } } .select { position: relative; width: 100%; display: flex; flex-direction: column; gap: calc(var(--gutter) / 3); select { appearance: none; } &:after { position: absolute; display: block; content: ''; width: 10px; height: 10px; top: 50%; right: calc(var(--form-input-size) + 5px); margin-top: -3px; border-bottom: 2px solid var(--form-color); border-right: 2px solid var(--form-color); transform-origin: 50% 0; transform: rotate(45deg) translateY(-50%); transition: transform .4s ease-in-out, margin-top .4s ease-in-out; pointer-events: none; } } input { border-color: var(--form-color); } @supports (appearance: base-select) { .select { ::picker(select) { appearance: base-select; border: 1px solid var(--form-color); border-radius: 8px; } &:after { display: none; } select { width: 100%; appearance: base-select; align-items: center; &::picker-icon { position: absolute; display: block; content: ''; width: 10px; height: 10px; top: 50%; right: calc(var(--form-input-size) + 5px); margin-top: -3px; border-bottom: 2px solid var(--form-color); border-right: 2px solid var(--form-color); transform: rotate(45deg) translateY(-50%); transition: transform .4s ease-in-out, margin-top .4s ease-in-out; transform-origin: 50% 0; } &:open::picker-icon { margin-top: 3px; transform: rotate(-135deg) translateY(-50%); } option { display: flex; gap: 0; padding: 10px 20px; transition: 0.4s; background: #fff; border: 0; justify-content: space-between; flex-direction: row-reverse; position: relative; &::checkmark { content: ""; } &:checked { font-weight: bold; &:before { content: ""; color: var(--form-focused); position: absolute; top: 50%; right: 20px; width: 14px; height: 8px; border-bottom: solid 2px currentColor; border-left: solid 2px currentColor; margin-top: -2px; transform: rotate(-45deg) translateY(-50%); } } &[hidden] { display: none; } &:nth-of-type(odd) { background: var(--form-odd); } &:hover { @media (hover: hover) { background: var(--form-description); } } &:focus { background-color: var(--form-accent-color); } } &:hover { @media (hover: hover) { &::picker-icon { color: var(--form-accent-color); } } } } } } } @layer master { label { display: flex; flex-direction: row; align-items: center; position: relative; button { position: absolute; top: 50%; right: var(--form-input-size); transform: translateY(-50%); } } } @layer master { a { text-decoration: underline; text-underline-offset: 6px; &:not(:hover):not(:focus) { text-decoration-color: color-mix(in srgb, currentColor, transparent 75%); } } } @layer master { ul { list-style: disc; padding-left: 30px; margin-bottom: 1em; li { &::marker { color: currentColor; } } &.check { li { padding-left: 10px; &::marker { content: "\2713"; } } } } ol { list-style: decimal-leading-zero; margin-bottom: 1em; li { &::marker { color: currentColor; } } } } @layer master { p { margin:0; &:not(:last-child) { margin-bottom: 1em; } } } @layer master { blockquote { } q { } } @layer master { details { background-color: var(--color1); width: 100%; transition: var(--transition); @media (prefers-reduced-motion: no-preference) { interpolate-size: allow-keywords; } &::details-content { transition: height 0.5s ease, content-visibility 0.5s ease allow-discrete; height: 0; overflow: clip; } &[open] { background: var(--color2); &::details-content { height: auto; } summary { .icon { transform: rotate(180deg); } } } summary { font-size: var(--m-fontsize); line-height: var(--m-lineheight); font-weight: bold; display: flex; justify-content: space-between; cursor: pointer; padding: calc(var(--padding) / 2); .icon { color: var(--font-color); transition: all 500ms ease; } &::-webkit-details-marker, &::marker { content: ''; } } article { .block { background-color: unset; .inner { padding: 0 calc(var(--padding) / 2) calc(var(--padding) / 2) calc(var(--padding) / 2); } } } } } @layer master { html:has(dialog[open]) { overflow: hidden; } dialog { max-width: 50%; margin: auto; padding: var(--padding); border: 0; background-color: #fff; overflow: auto; overscroll-behavior: contain; @media (max-width: 56em) { max-width: 90%; } @media (--max-fablet) { max-width: 90%; } &[open] { display: flex; flex-direction: column; gap: var(--gutter); } .header { display: flex; align-items: center; justify-content: flex-end; gap: var(--gutter); h2 { flex-grow: 1; } } .footer { display: flex; align-items: center; gap: var(--gutter); margin-top: 1em; @media (max-width: 56em) { flex-direction: column; align-items: center; } @media (--max-fablet) { flex-direction: column; align-items: center; } button {width: 100%;} } &::backdrop { background-color: rgba(0, 0, 0, 0.5); } } } @layer master { .media { button { &.playButton { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); } &.pauseButton { position: absolute; right: var(--padding); bottom: var(--padding); width: 48px; height: 48px; background-color: var(--color-light); border-radius: var(--button-radius); z-index: 99; transition: var(--transition); .icon { transition: var(--transition); position: absolute; left: 50%; transform: translateX(-50%) translateY(-50%); top: 50%; &.play {opacity: 0;} } &:hover { @media (hover: hover) { background-color: var(--color-light); } } } } .templateMedia.video & { &:before { content: ""; position: absolute; z-index: 1; left: 0; top: 0; display: block; background-color: var(--color-dark); opacity: 0.2; transition: var(--transition); width: 100%; height: 100%; } } } .playButton { display: flex; align-items: center; justify-content: center; position: relative; z-index: 2; width: 120px; height: 120px; background: none; border: none; text-align: center; text-decoration: none; padding: 0; cursor: pointer; transition: var(--transition); .icon { transition: var(--transition); position: absolute; width: 48px; height: 48px; padding: 8px; background-color: var(--color-light); border-radius: var(--button-radius); &.pause {opacity: 0;} } &:after { position: absolute; top: 50%; margin-top: -60px; width: 100%; height: 100%; display: block; content: ""; background-image: url('data:image/svg+xml,%3Csvg viewBox=\'0 0 80 80\' fill=\'%23ffffff\' xmlns=\'http://www.w3.org/2000/svg\'%3E%3Cpath d=\'M46.3,1.2c-0.4-0.6-1-0.9-2-1L41.5,0l-1,9.7l1.9,0.2l0.4-3.5l0.8,0.1c1,0.1,1.7-0.1,2.2-0.6 c0.5-0.5,0.8-1.2,0.9-2.2C46.8,2.6,46.6,1.8,46.3,1.2L46.3,1.2z M44.7,3.5c0,0.2,0,0.3-0.1,0.5v0c0,0.1-0.1,0.2-0.1,0.4 c-0.1,0.1-0.2,0.2-0.3,0.3s-0.3,0.1-0.5,0.1L43,4.7L43.3,2L44,2c0.2,0,0.3,0.1,0.5,0.2c0.1,0.1,0.2,0.2,0.2,0.4c0,0.2,0,0.3,0,0.4 S44.8,3.3,44.7,3.5z M51.3,11.9L47,10.5l2.9-9.3l1.8,0.6l-2.4,7.6l2.4,0.8L51.3,11.9L51.3,11.9z M54.6,11.8l2,1.1l-0.5,1.5l1.8,1 l2.6-9.7l-1.7-1l-7,7.2l1.8,1L54.6,11.8z M58.2,7.7l-1.1,3.5v0l-1.3-0.7L58.2,7.7z M57.8,15.4L57.8,15.4L57.8,15.4L57.8,15.4z M59,16.5l2.4-2.8l2.5-5.9l1.6,1.4l-1.7,3.2l2.9-2.1l1.6,1.4h0L62.8,15l-2.4,2.8L59,16.5z M64.7,22.7l7-7.1l1.2,1.8L67.7,22l6.3-2.9 l1.2,1.8l0,0l-9.3,3.5L64.7,22.7z M67.2,27l8.9-3.9l0.8,1.8L68,28.8L67.2,27z M69.3,32.8c0.2,0.8,0.7,1.5,1.4,1.8 c0.4,0.2,0.9,0.3,1.5,0.2c0.6-0.1,1.4-0.2,2.5-0.5c1-0.3,1.8-0.5,2.4-0.7l0,0c0.5-0.2,1-0.5,1.2-0.9c0.5-0.7,0.6-1.5,0.4-2.3 l-0.7-2.7l-9.4,2.3L69.3,32.8z M76.8,30.1l0.2,0.7c0.1,0.3,0,0.6-0.2,0.8c-0.3,0.2-1.1,0.5-2.5,0.9h0c-1.5,0.4-2.4,0.5-2.7,0.4 c-0.3-0.1-0.5-0.3-0.6-0.6l-0.2-0.7L76.8,30.1z M70.2,41.2L70.2,41.2L70.2,41.2L70.2,41.2z M70,36.7l9.7-0.4l0.2,4.5l-1.8,0.1 l-0.1-2.5l-2.2,0.1l0.1,2.2l-1.8,0.1l-0.1-2.2l-2.3,0.1l0.1,2.5l-1.7,0.1L70,36.7z M77.5,43.2c-0.6-0.2-1.4-0.3-2.5-0.5 c-1.1-0.2-1.9-0.3-2.5-0.3c-0.6,0-1.1,0.1-1.5,0.4c-0.7,0.4-1.2,1.1-1.3,2c-0.1,0.9,0.1,1.6,0.6,2.3c0.3,0.4,0.8,0.6,1.3,0.8 c0.6,0.2,1.4,0.3,2.5,0.5s1.9,0.3,2.5,0.3c0.6,0,1.1-0.1,1.5-0.4c0.7-0.4,1.2-1.1,1.3-2s-0.1-1.6-0.6-2.3 C78.5,43.7,78.1,43.4,77.5,43.2z M77.3,46.6c-0.4,0.1-1.3,0.1-2.8-0.2S72,46,71.7,45.7c-0.2-0.2-0.3-0.4-0.3-0.7 c0-0.3,0.2-0.5,0.5-0.6c0.4-0.1,1.3-0.1,2.8,0.2c1.5,0.2,2.5,0.5,2.8,0.7c0.2,0.2,0.3,0.4,0.3,0.7C77.7,46.3,77.6,46.5,77.3,46.6z M64.9,57l2.9,2.1l-0.5,0.7c-0.6,0.8-0.8,1.5-0.6,2.2s0.7,1.2,1.5,1.9c0.8,0.6,1.6,0.9,2.2,0.8l0,0c0.7,0,1.3-0.5,1.9-1.3l1.6-2.2 L66,55.5L64.9,57z M68.7,60.7l0.4-0.6l2.2,1.6l-0.4,0.6c-0.1,0.2-0.2,0.3-0.4,0.3c-0.1,0-0.3,0-0.4,0s-0.3-0.1-0.4-0.2 c-0.1-0.1-0.2-0.2-0.4-0.3C69.2,62.1,69,62,69,61.9v0c-0.1-0.1-0.2-0.2-0.3-0.3c-0.1-0.1-0.1-0.3-0.1-0.4S68.6,60.9,68.7,60.7z M62,60.7l6.6,7.1l-1.4,1.3l-5.4-5.8L59.9,65l-1.2-1.3h0L62,60.7z M56.6,65.2l0.5,1.5l-1.9,1.1l-1-1.1l-1.7,1l7.1,7.1l1.6-1 l-2.8-9.6L56.6,65.2z M56.4,69.1l1.3-0.8l1.2,3.5L56.4,69.1z M52.4,67.7L52.4,67.7L52.4,67.7L52.4,67.7z M52.2,71.5l3.9,5.1l-2,0.7 l-2-3l0.4,3.6l-2,0.7l-0.2-6.4l-1.2-3.5l1.8-0.7L52.2,71.5z M50.5,78.6L50.5,78.6L50.5,78.6L50.5,78.6z M42.7,70l2.7,9.6l-2.1,0.1 L41.9,73l-0.7,6.9L39.1,80h0l1.6-9.8L42.7,70z M35.8,69.9l1.9,0.2l-1,9.7l-1.9-0.2L35.8,69.9z M29.4,69.3c-0.4,0.3-0.7,0.7-1,1.2 c-0.2,0.6-0.5,1.3-0.8,2.4c-0.3,1-0.5,1.9-0.6,2.4v0c-0.1,0.6,0,1.1,0.2,1.5c0.4,0.8,1,1.2,1.8,1.5l2.6,0.8l2.7-9.4L31.7,69 C30.8,68.8,30.1,68.9,29.4,69.3z M30.3,76.9l-0.7-0.2c-0.3-0.1-0.5-0.3-0.6-0.6c-0.1-0.3,0.1-1.2,0.5-2.6l0,0c0.4-1.4,0.7-2.3,1-2.5 c0.2-0.2,0.5-0.3,0.8-0.2l0.7,0.2L30.3,76.9z M24,65.7L24,65.7L24,65.7L24,65.7z M27.9,67.7l-4.5,8.6l-4-2.1l0.8-1.6l2.3,1.2l1-2 l-1.9-1l0.8-1.5l1.9,1l1-2l-2.3-1.2l0.8-1.5L27.9,67.7z M21.7,67c0.3-0.5,0.5-1,0.5-1.5c0-0.8-0.3-1.5-1-2.1 c-0.7-0.6-1.5-0.8-2.3-0.6c-0.5,0.1-0.9,0.4-1.4,0.8s-1,1-1.7,1.9c-0.7,0.8-1.2,1.5-1.5,2s-0.5,1-0.5,1.5c0,0.8,0.3,1.5,1,2.1 c0.7,0.6,1.4,0.8,2.3,0.6c0.5-0.1,0.9-0.4,1.4-0.8s1-1,1.7-1.9C20.9,68.2,21.4,67.5,21.7,67z M18.7,67.8c-1,1.2-1.6,1.9-2,2 c-0.3,0.1-0.5,0.1-0.8-0.1c-0.2-0.2-0.3-0.4-0.3-0.7c0.1-0.4,0.6-1.2,1.6-2.4c1-1.2,1.6-1.9,2-2c0.3-0.1,0.5-0.1,0.8,0.1 c0.2,0.2,0.3,0.4,0.3,0.7C20.2,65.8,19.7,66.6,18.7,67.8z M9.6,54.6l-0.3-0.7c-0.4-0.9-1-1.5-1.6-1.6c-0.6-0.2-1.4,0-2.4,0.4 c-0.9,0.4-1.5,0.9-1.8,1.5v0c-0.3,0.6-0.2,1.3,0.2,2.2L4.8,59l8.9-4.1l-0.8-1.8L9.6,54.6z M5.5,56.5l-0.3-0.7 c-0.1-0.2-0.1-0.3-0.1-0.5c0-0.1,0.1-0.3,0.2-0.4c0.1-0.1,0.2-0.2,0.3-0.3s0.2-0.1,0.4-0.2c0.2-0.1,0.3-0.1,0.5-0.2l0,0 c0.1,0,0.2-0.1,0.4-0.1c0.2,0,0.3,0,0.4,0.1s0.2,0.2,0.3,0.4L8,55.3L5.5,56.5z M11.1,48.8l-9.5,2.2l-0.4-1.9l7.8-1.8l-0.6-2.5 l1.7-0.4L11.1,48.8z M10,44.5L10,44.5L10,44.5L10,44.5z M9.8,41.9l-1.5-0.3l0-2.2l1.5-0.3l0-2L0,39.7l0,1.9L9.9,44L9.8,41.9z M2.9,40.6l3.6-0.8l0,1.5L2.9,40.6z M6.5,34.9l-6.3,0.9l0.4-2.1l3.6-0.2l-3.3-1.4L1.2,30h0l5.6,3l3.6,0.7l-0.3,1.9L6.5,34.9z M12.5,27.4L2.8,25l1-1.9l6.6,2.1l-5.7-4l0.9-1.9v0l7.7,6.3L12.5,27.4z M15,23.1l-7.9-5.7l1.1-1.6l7.9,5.7L15,23.1z M18.9,18.4 c0.6-0.6,0.9-1.3,0.9-2.2c0-0.5-0.2-1-0.6-1.4c-0.3-0.5-0.9-1.1-1.7-1.9s-1.4-1.3-1.8-1.7l0,0c-0.5-0.3-0.9-0.5-1.4-0.6 c-0.8-0.1-1.6,0.2-2.2,0.8l-2,1.9l6.8,7L18.9,18.4z M13.3,12.7c0.2-0.2,0.5-0.3,0.8-0.2c0.3,0.1,1,0.7,2,1.8v0 c1.1,1.1,1.6,1.8,1.7,2.1c0.1,0.3,0,0.6-0.2,0.8l-0.5,0.5l-4.4-4.5L13.3,12.7z M25.6,13.3L25.6,13.3L25.6,13.3L25.6,13.3z M21.9,15.7l-5.3-8.2l3.8-2.4l0.9,1.5L19.2,8l1.2,1.9l1.8-1.2l1,1.5l-1.8,1.2l1.2,1.9l2.1-1.4l0.9,1.5L21.9,15.7z M24.5,8.4 c0.4,1,0.8,1.8,1,2.3c0.3,0.5,0.7,0.9,1.1,1.1c0.7,0.4,1.5,0.5,2.3,0.1c0.8-0.3,1.4-0.9,1.6-1.7c0.2-0.5,0.2-1,0-1.6 c-0.1-0.6-0.4-1.4-0.8-2.4c-0.4-1-0.8-1.8-1-2.3c-0.3-0.5-0.7-0.9-1.1-1.1c-0.7-0.4-1.5-0.5-2.3-0.1C24.6,3,24,3.6,23.8,4.4 c-0.2,0.5-0.2,1,0,1.6C23.9,6.5,24.2,7.3,24.5,8.4z M26,4.3c0.3-0.1,0.5-0.1,0.8,0.1c0.3,0.2,0.7,1.1,1.3,2.5 c0.6,1.5,0.8,2.4,0.8,2.7c0,0.3-0.2,0.5-0.5,0.6c-0.3,0.1-0.5,0.1-0.8-0.1c-0.3-0.2-0.7-1.1-1.3-2.5c-0.6-1.5-0.8-2.4-0.8-2.7 C25.6,4.6,25.8,4.4,26,4.3z\'/%3E%3C/svg%3E%0A'); background-size: 80% auto; background-repeat: no-repeat; background-position: center; animation-name: spin; animation-duration: 10s; animation-iteration-count: infinite; animation-timing-function: linear; transition: var(--transition); } &:hover { @media (hover: hover) { .icon { background: var(--color3); } &:after { animation-direction: reverse; } } } } .playing { .playButton { opacity: 0; .icon { &.play {opacity: 0;} &.pause {opacity: 1;} } &:hover { @media (hover: hover) { opacity: 1; } } &:after { opacity: 0; } } } } @layer master { .breadcrumb { display: block; width: 100%; ol { padding: 0; list-style: none; li { display: inline; &+li:before { padding: 0 5px; content: "\00a0"; } a { text-decoration: none; &:hover { @media (hover: hover) { text-decoration: underline; } } } } } } } @layer master { .formField { label { margin-bottom: 5px; } input { &:user-invalid { ~ .error { display: block; } } } .required { color: var(--font-color); font-weight: normal; } .hint { display: block; font-size: var(--xs-fontsize); padding: 10px var(--form-input-size) 10px calc(var(--form-input-size) - 5px); width: 100%; margin-top: 5px; position: relative; color: var(--font-color); &:before { content: ""; position: absolute; top: -5px; left: 5px; width: 0; height: 0; border-left: 5px solid transparent; border-right: 5px solid transparent; } &.description { background: var(--form-description); border-left: 5px solid var(--form-placeholder); &:before { border-bottom: 5px solid var(--form-description); } } &.error { background: var(--form-error); border-left: 5px solid #ff889c; &:before { border-bottom: 5px solid var(--form-error); } } } } .labelsLeft { .formField { display: grid; grid-template-columns: repeat(12, 1fr); label { grid-column: span 4; } input { grid-column: span 8; } .hint { grid-column: 5 / span 8; } } } } @layer master { .pagination { display: flex; justify-content: center; align-items: center; gap: var(--padding); .button { background-color: var(--color2); padding: 8px 12px; &:hover { background-color: var(--button-hover); } &:disabled { opacity: 0.5; pointer-events: none; } } } } @layer master { article { display: flex; height: 100%; a { &.block { &:hover { @media (hover: hover) { .footer { .button { color: var(--button-hover); } } } } } } .block { text-decoration: none; display: flex; flex-direction: column; flex-grow: 1; border-radius: var(--border-radius); overflow: hidden; .media { overflow: hidden; border-radius: 0; img, .video { width: 100%; height: auto; display: block; transition: var(--transition); } } .inner { display: flex; flex-direction: column; flex-grow: 1; gap: var(--gutter); padding: var(--padding); .header { display: flex; flex-direction: column; gap: var(--gutter); .title { color: var(--font-color); font-family: var(--font-sub); font-weight: normal; display: block; font-size: var(--s-fontsize); line-height: var(--s-lineheight); text-wrap: balance; } } .content { flex-grow: 1; } .footer { display: flex; gap: calc(var(--gutter) / 2); flex-wrap: wrap; } } } } } @layer master { footer { display: grid; grid-template-columns: [full-start] minmax(var(--spacer), 1fr) [content-start] min(calc(100% - (var(--spacer) * 2))) [content-end] minmax(var(--spacer), 1fr) [full-end]; padding: var(--padding) 0; position: relative; background-color: var(--color3); color: #fff; .footerContainer { grid-column: content-start / content-end; display: flex; flex-wrap: wrap; align-items: center; gap: var(--gutter); justify-content: center; a { color: var(--color1); text-decoration: none; &:hover { @media (hover: hover) { color: var(--color2); } } } .footerLeft { display: flex; flex-wrap: wrap; gap: var(--gutter); @media (min-width: 56em) { flex: 1; justify-content: flex-start } @media (--min-fablet) { flex: 1; justify-content: flex-start } } .footerRight { display: flex; gap: var(--gutter); @media (max-width: 56em) { flex-wrap: wrap; } @media (--max-fablet) { flex-wrap: wrap; } .social { display: flex; gap: var(--gutter); svg { color: var(--color1); &:hover { @media (hover: hover) { color: var(--color2); } } } } } } } } @layer master { header { display: grid; grid-template-columns: [full-start] minmax(var(--spacer), 1fr) [content-start] min(calc(100% - (var(--spacer) * 2))) [content-end] minmax(var(--spacer), 1fr) [full-end]; padding: var(--padding) 0; position: absolute; width: 100%; z-index: 9; .headerContainer { grid-column: content-start / content-end; display: flex; flex-wrap: wrap; align-items: center; gap: var(--gutter); justify-content: space-between; } } .logo { z-index: 9; svg { width: 250px; } } .hamburger { cursor: pointer; border: 0; background-color: var(--color-dark); width: 48px; height: 48px; display: flex; justify-content: center; align-items: center; padding: 0; margin: 0; z-index: 9; span { position: relative; display: block; width: 18px; height: 2px; background-color: var(--color-light); transition: background .2s ease-out; &:before, &:after { background-color: var(--color-light); content: ''; display: block; height: 100%; position: absolute; transition: var(--transition); width: 100%; } &:before {top: -5px;} &:after {top: 5px;} } .menuOpen & { span { background: transparent; &:before, &:after { top:0; } &:before {transform: rotate(45deg);} &:after {transform: rotate(-45deg);} } } @media (min-width: 56em) { display: none; } @media (--min-fablet) { display: none; } } .nav { ul { display: flex; gap: var(--gutter); list-style: none; padding: 0; margin-bottom: 0; @media (max-width: 56em) { position: relative; flex-direction: column; } @media (--max-fablet) { position: relative; flex-direction: column; } li { position: relative; @media (max-width: 56em) { position: initial; width: 100%; } @media (--max-fablet) { position: initial; width: 100%; } > a, > button { position: relative; display: flex; justify-content: space-between; color: var(--color-dark); background-color: transparent; border: 0; cursor: pointer; width: 100%; padding: 5px 10px; transition: var(--transition); text-decoration: none; @media (max-width: 56em) { font-size: var(--s-fontsize); padding: 5px 0; } @media (--max-fablet) { font-size: var(--s-fontsize); padding: 5px 0; } @media (min-width: 56em) { .hasCover & { color: var(--color-light); } &[aria-current="page"] { color: var(--color-light); @media (min-width: 56em) { text-decoration: underline; text-underline-offset: 6px; } @media (--min-fablet) { text-decoration: underline; text-underline-offset: 6px; } } } @media (--min-fablet) { .hasCover & { color: var(--color-light); } &[aria-current="page"] { color: var(--color-light); @media (min-width: 56em) { text-decoration: underline; text-underline-offset: 6px; } @media (--min-fablet) { text-decoration: underline; text-underline-offset: 6px; } } } &:hover:not(button) { @media (hover: hover) and (min-width: 56em) { text-decoration: underline; text-underline-offset: 6px; } @media (hover: hover) and (--min-fablet) { text-decoration: underline; text-underline-offset: 6px; } } } [aria-haspopup] { &:after { content:''; display: block; border-bottom: 2px solid var(--form-color); border-right: 2px solid var(--form-color); transform: rotate(45deg); height: 16px; width: 16px; @media (min-width: 56em) { transition: var(--transition); transform: rotate(90deg); } @media (--min-fablet) { transition: var(--transition); transform: rotate(90deg); } } } [aria-expanded=true] { &:after { @media (min-width: 56em) { transform: rotate(-90deg); } @media (--min-fablet) { transform: rotate(-90deg); } } } &.open { @media (min-width: 56em) { a, button { border-bottom: 1px solid var(--color-light); } } @media (--min-fablet) { a, button { border-bottom: 1px solid var(--color-light); } } } &.open { .subMenu { visibility: visible; opacity: 1; transform: translateX(-50%) translateY(0); @media (max-width: 56em) { transform: translateX(0) translateY(0); } @media (--max-fablet) { transform: translateX(0) translateY(0); } } } } .subMenu { padding: calc(var(--padding)/2) 0; position: absolute; top: calc(100% + 10px); left: 50%; background-color: #fff; visibility: hidden; opacity: 0; transition: var(--transition); transform: translateX(-50%) translateY(-16px); min-width: 220px; @media (max-width: 56em) { top: 0; left: 0; width: calc(100vw - var(--spacer) * 2); height: 100vh; background-color: var(--color-dark); transition: var(--transition); z-index: 99; transform: translateX(-100%) translateY(0); } @media (--max-fablet) { top: 0; left: 0; width: calc(100vw - var(--spacer) * 2); height: 100vh; background-color: var(--color-dark); transition: var(--transition); z-index: 99; transform: translateX(-100%) translateY(0); } li { width: 100%; } &:before { position: absolute; top: -5px; left: 50%; transform: translateX(-50%); content: ""; width: 0; height: 0; border-left: 5px solid transparent; border-right: 5px solid transparent; border-bottom: 5px solid var(--color-light); @media (max-width: 56em) { display: none; } @media (--max-fablet) { display: none; } } .goBack { display: none; color: #fff; margin-bottom: var(--padding); align-items: center; gap: 5px; @media (max-width: 56em) { display: flex; } @media (--max-fablet) { display: flex; } } .title { display: none; color: #fff; font-size: var(--m-fontsize); margin-bottom: calc(var(--padding) / 2); @media (max-width: 56em) { display: block; } @media (--max-fablet) { display: block; } } ul { gap: 0; flex-direction: column; li { a, button { display: block; color: var(--font-color); padding: 5px calc(var(--padding) / 2); @media (max-width: 56em) { color: #fff; padding: 5px 0; } @media (--max-fablet) { color: #fff; padding: 5px 0; } &:hover { @media (hover: hover) and (min-width: 56em) { background: var(--grey1); } @media (hover: hover) and (--min-fablet) { background: var(--grey1); } } } } } } } @media (max-width: 56em) { background: var(--color1); position: fixed; right: -100vw; top: 0; width: 100%; height: 100vh; padding: var(--spacer); padding-top: calc(var(--padding) + var(--padding) + 44px); transition: var(--transition); } @media (--max-fablet) { background: var(--color1); position: fixed; right: -100vw; top: 0; width: 100%; height: 100vh; padding: var(--spacer); padding-top: calc(var(--padding) + var(--padding) + 44px); transition: var(--transition); } .menuOpen & { display: block; right: 0; } } .menuOpen { overflow: hidden; height: 100%; } } @layer master { form { .formRow { padding: var(--form-row, 15px) 0; } } } @layer master { section { display: grid; grid-template-columns: [full-start] minmax(var(--spacer), 1fr) [content-start] min(calc(100% - (var(--spacer) * 2))) [content-end] minmax(var(--spacer), 1fr) [full-end]; padding: var(--section) 0; position: relative; } .container { grid-column: content-start / content-end; display: grid; gap: var(--gutter); @media (min-width: 56em) { grid-template-columns: repeat(12, 1fr); .breakOutLeft & { grid-column-start: full-start; } .breakOutRight & { grid-column-end: full-end; } } @media (--min-fablet) { grid-template-columns: repeat(12, 1fr); .breakOutLeft & { grid-column-start: full-start; } .breakOutRight & { grid-column-end: full-end; } } .media { grid-column: span 12; position: relative; overflow: hidden; border-radius: var(--border-radius); img, video, .video-youtube, .video-vimeo { width: 100%; height: 100%; object-fit: cover; object-position: center center; } } .inner { grid-column: span 12; display: flex; flex-direction: column; gap: var(--gutter); .intro { .title + .subTitle { margin-top: calc(var(--gutter) / 2); } .title + .content { margin-top: var(--gutter); } } .grid { display: grid; gap: var(--gutter); @media (min-width: 56em) { grid-template-columns: repeat(12, 1fr); width: 100%; } @media (--min-fablet) { grid-template-columns: repeat(12, 1fr); width: 100%; } .item { display: flex; @media (min-width: 56em) { grid-column: span 4; } @media (--min-fablet) { grid-column: span 4; } } } .buttons { display: flex; gap: var(--gutter); flex-wrap: wrap; align-items: center; @media (max-width: 56em) { flex-direction: column; } @media (--max-fablet) { flex-direction: column; } } } } }