:root {
--color-black: #000000;
--color-black-rgb: 0, 0, 0;
--color-filter-black: brightness(0);
--color-body-black: #282828;
--color-body-black-rgb: 40, 40, 40;
--color-filter-black: brightness(0) saturate(100%) invert(12%) sepia(2%)
saturate(10%) hue-rotate(14deg) brightness(98%) contrast(89%);
--color-white: #ffffff;
--color-white-rgb: 255, 255, 255;
--color-filter-white: brightness(0) invert(1);
--color-off-white: #f6f6f6;
--color-off-white-rgb: 246, 246, 246;
--color-cream: #eeebe8;
--color-cream-rgb: 238, 235, 232;
--color-gray: #333132;
--color-gray-rgb: 51, 49, 50;
--color-filter-gray: brightness(0) saturate(100%) invert(18%) sepia(0%)
saturate(1209%) hue-rotate(354deg) brightness(87%) contrast(89%);
--color-gray-light: #efefef;
--color-red-rgb: 255, 0, 0;
--color-filter-gray-light: brightness(0) saturate(100%) invert(99%)
sepia(91%) saturate(35%) hue-rotate(194deg) brightness(112%)
contrast(87%);
--color-dark-brown: #3f291d;
--color-dark-brown-rgb: 63, 41, 29;
--color-brown: #5f402f;
--color-brown-rgb: 95, 64, 47;
--color-light-brown: #bca390;
--color-light-brown-rgb: 188, 163, 144;
--color-body-black: #323232;
--color-body-black-rgb: 50, 50, 50;
--color-red: #ff0000;
--color-red-rgb: 255, 0, 0;
--color-body: var(--color-body-black);
--color-body-rgb: var(--color-body-black-rgb);
--color-body-couple: var(--color-off-white);
--color-body-couple-rgb: var(--color-off-white-rgb);
--color-theme: var(--color-brown);
--color-theme-rgb: var(--color-brown-rgb);
--color-theme-couple: var(--color-off-white);
--color-theme-couple-rgb: var(--color-off-white-rgb);
--color-active: var(--color-dark-brown);
--color-active-rgb: var(--color-dark-brown-rgb);
--rgb: var(--color-body-rgb);
--rgb-couple: var(--color-body-couple-rgb);
/* --font-body: "URWClassico", "sans-serif"; */
--font-body: "classico-urw", "sans-serif";
--font-heading: var(--font-body);
--font-weight-regular: normal;
--font-weight-light: 300;
--font-weight-regular: 400;
--font-weight-medium: 500;
--font-weight-semibold: 600;
--font-weight-bold: 700;
--font-weight-black: 900;
--font-weight-body: var(--font-weight-regular);
/* --font-size-h1: 2.3rem;
--font-size-h2: calc((1.33035714rem * 1.625) + -0.29761905vw);
--font-size-h3: calc((1.27678571rem * 1.625) + -0.44642857vw);
--font-size-h4: calc((1.08035714rem * 1.625) + -0.29761905vw);
--font-size-tagline: calc((1.08928571rem * 1.625) + -0.44642857vw);
--font-size-body-big: var(--font-size-h4);
--font-size-body: var(--font-size-h4);
--font-size-sub: var(--font-size-tagline);
--font-size-sub-2: var(--font-size-tagline);
--font-size-button: calc((1.28571429rem * 1.625) + -0.5952381vw); */
--font-size-h1: 2.3rem;
--font-size-h2: 1.7rem;
--font-size-h3: 1.4rem;
--font-size-h4: 1.3rem;
--font-size-tagline: 1.1rem;
--font-size-body-big: var(--font-size-h4);
--font-size-body: var(--font-size-h4);
--font-size-sub: var(--font-size-tagline);
--font-size-sub-2: var(--font-size-tagline);
--font-size-button: 1.2rem;
--line-height-h1: 1.1304347826;
--line-height-h2: 1.1764705882;
--line-height-h3: 1.2857142857;
--line-height-h4: 1.2307692308;
--line-height-tagline: 1.2727272727;
--line-hight-body-big: 1.6923076923;
--line-height-body: 1.5384615385;
--line-height-sub: 1.1818181818;
--line-height-sub-2: 1.4545454545;
--line-height-button: 1.1666666667;
--letter-spacing-xs: 0.02em;
--letter-spacing-sm: 0.04em;
--letter-spacing-md: 0.08em;
--icon-size-2xs: 1.2rem;
--icon-size-xs: 1.6rem;
--icon-size-sm: 2rem;
--icon-size-md: 2.6rem;
--icon-size-lg: 3rem;
--icon-size-xl: 3.2rem;
--icon-size-2xl: 3.6rem;
--icon-size-3xl: 4rem;
--spacing-8xl: 16rem;
--spacing-7xl: 14rem;
--spacing-6xl: 12rem;
--spacing-5xl: 10rem;
--spacing-4xl: 8rem;
--spacing-3xl: 7.2rem;
--spacing-2xl: 6.4rem;
--spacing-xl: 6rem;
--spacing-4lg: 5.6rem;
--spacing-3lg: 5rem;
--spacing-2lg: 4.8rem;
--spacing-lg: 4rem;
--spacing-2md: 3.6rem;
--spacing-md: 3rem;
--spacing-2sm: 2.4rem;
--spacing-sm: 2rem;
--spacing-xs: 1.6rem;
--spacing-2xs: 1.2rem;
--spacing-3xs: 1rem;
--spacing-4xs: 0.8rem;
--spacing-5xs: 0.6rem;
--spacing-6xs: 0.4rem;
--spacing-7xs: 0.2rem;
--container-max-width-xl: 188rem;
--spacing-container: var(--spacing-xl);
--gap-section: var(--spacing-4xl);
--page-grid-gutter: var(--spacing-lg);
--hamburger-size: 3.6rem;
--hamburger-line: 0.2rem;
--hamburger-gap: 0.8rem;
--hamburger-background: var(--color-white);
--logo-height: 2.4rem;
--logo-height-small: 2rem;
--header-height: 10.4rem;
--footer-height: 0rem;
--navi-height: 0;
--border-width: 1px;
--border-style: solid;
--border-color: var(--color-theme);
--border: var(--border-width) var(--border-style) var(--border-color);
--border-light: var(--border-width) var(--border-style)
rgba(var(--color-white-rgb), 0.2);
--input-height: 4rem;
--input-spacing-x: 0;
--input-spacing-y: 0.3em;
--input-border: var(--border-width) var(--border-style)
rgba(var(--color-dark-brown-rgb), 0.12);
--button-height: 4.1rem;
--button-spacing-x: 0;
--button-spacing-y: 0;
--radius: 1rem;
--radius-x2: 2rem;
--opacity-overlay: 0.7;
--opacity: 0.5;
--opacity-light: 0.15;
--duration: 0.3s;
--duration-x2: 0.5s;
--duration-x3: 1s;
--duration-x4: 1.5s;
--timing-function: ease-in-out;
}
/* SITE ==================== */
/* BLURRED IMAGE */
.blurred-media {
background-repeat: no-repeat;
background-size: cover;
position: relative;
filter: blur(1rem);
}
.blurred-media.white-pulse::before {
background-color: var(--color-white);
}
.blurred-media::before {
content: "";
position: absolute;
inset: 0;
opacity: 0;
animation: pulse 1.5s infinite;
background-color: var(--color-gray-dark);
}
@keyframes pulse {
0% {
opacity: 0;
}
50% {
opacity: 0.1;
}
100% {
opacity: 0;
}
}
.blurred-media.loaded {
position: unset;
filter: none;
}
.blurred-media.loaded::before {
animation: none;
content: none;
}
.blurred-media *:is(img, video) {
opacity: 0;
transition: opacity 250ms ease-in-out;
}
.blurred-media.loaded *:is(img, video) {
opacity: 1;
}
/* GENERAL */
.no-scroll {
height: 100% !important;
overflow: hidden !important;
}
.c-black {
color: var(--color-black) !important;
--rgb: var(--color-black-rgb);
--rgb-couple: var(--color-white-rgb);
--filter: var(--filter-black);
}
.c-white {
color: var(--color-white) !important;
--rgb: var(--color-white-rgb);
--rgb-couple: var(--color-black-rgb);
--filter: var(--filter-white);
}
.c-gray {
color: var(--color-gray) !important;
--rgb: var(--color-gray-rgb);
--rgb-couple: var(--color-white-rgb);
}
.c-theme {
color: var(--color-theme) !important;
--rgb: var(--color-theme-rgb);
--rgb-couple: var(--color-theme-couple-rgb);
}
.c-light-brown {
color: var(--color-light-brown) !important;
--rgb: var(--color-light-brown-rgb);
--rgb-couple: var(--color-white-rgb);
}
.c-dark-brown {
color: var(--color-dark-brown) !important;
--rgb: var(--color-dark-brown-rgb);
--rgb-couple: var(--color-white-rgb);
}
.c-brown {
color: var(--color-brown) !important;
--rgb: var(--color-brown-rgb);
--rgb-couple: var(--color-white-rgb);
}
.bg-black {
background-color: var(--color-black) !important;
}
.bg-white {
background-color: var(--color-white) !important;
}
.bg-gray {
background-color: var(--color-gray) !important;
}
.bg-theme {
background-color: var(--color-theme) !important;
}
.filter-black {
-webkit-filter: var(--filter-black) !important;
filter: var(--filter-black) !important;
}
.filter-white {
-webkit-filter: var(--filter-white) !important;
filter: var(--filter-white) !important;
}
.filter-theme {
-webkit-filter: var(--filter-theme) !important;
filter: var(--filter-theme) !important;
}
.a-left {
text-align: left !important;
}
.a-right {
text-align: right !important;
}
.a-center {
text-align: center !important;
}
.inline-block {
display: inline-block !important;
}
.capitalize {
text-transform: capitalize !important;
}
.uppercase {
text-transform: uppercase !important;
}
.nowrap {
white-space: nowrap !important;
}
.hidden {
display: none !important;
}
.visually-hidden {
position: absolute;
width: 1px;
height: 1px;
padding: 0;
margin: -1px;
overflow: hidden;
clip: rect(0 0 0 0);
white-space: nowrap;
border: 0;
}
.overflow-hidden {
overflow: hidden !important;
}
.media-wrapper {
display: block;
width: 100%;
position: relative;
overflow: hidden;
}
.cover {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
overflow: hidden;
}
*:is(
.object,
.object-fit,
.object-auto,
.object-contain,
.object-fill-height,
.object-fill-width
) {
text-decoration: none !important;
box-shadow: none !important;
background-image: none !important;
display: block;
overflow: hidden;
position: relative;
height: 100%;
}
.object-auto {
height: auto;
}
.object > *:is(img, video, iframe) {
display: block;
margin: 0 auto;
width: 100%;
height: auto;
}
.object-fit > *:is(img, video, iframe) {
display: block;
margin: 0 auto;
width: 100%;
height: 100%;
-o-object-fit: cover;
object-fit: cover;
-o-object-position: center;
object-position: center;
position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 0;
}
.object-auto > *:is(img, video, iframe) {
display: block;
margin: 0 auto;
width: auto;
height: auto;
}
.object-contain > *:is(img, video, iframe) {
display: block;
margin: 0 auto;
width: 100%;
height: 100%;
-o-object-fit: contain;
object-fit: contain;
-o-object-position: center;
object-position: center;
}
.object-fill-height > *:is(img, video, iframe) {
display: block;
margin: 0 auto;
width: auto;
height: 100%;
}
.object-fill-width > *:is(img, video, iframe) {
display: block;
margin: 0 auto;
width: 100%;
height: auto;
}
.aspect-ratio-1 {
aspect-ratio: 1 / 1;
}
.aspect-ratio-4-3 {
aspect-ratio: 4 / 3;
}
.aspect-ratio-3-2 {
aspect-ratio: 3 / 2;
}
.aspect-ratio-16-9 {
aspect-ratio: 16 / 9;
}
.aspect-ratio-1-2 {
aspect-ratio: 1 / 2;
}
.aspect-ratio-2-3 {
aspect-ratio: 2 / 3;
}
.aspect-ratio-3-4 {
aspect-ratio: 3 / 4;
}
.social {
display: inline-flex;
flex-wrap: wrap;
align-items: center;
justify-content: flex-start;
grid-gap: var(--spacing-3xs) var(--spacing-xs);
line-height: 1;
}
.social a {
display: block;
text-decoration: none;
background: none;
box-shadow: none;
}
.social .ic {
display: block;
padding: 1px;
margin: -1px;
font-size: var(--icon-size-sm);
}
.padding-top-0 {
padding-top: 0 !important;
}
.padding-bottom-0 {
padding-bottom: 0 !important;
}
.padding-x-0 {
padding-left: 0 !important;
padding-right: 0 !important;
}
.padding-y-0 {
padding-top: 0 !important;
padding-bottom: 0 !important;
}
.padding-0 {
padding: 0 !important;
}
.margin-top-0 {
margin-top: 0 !important;
}
.margin-bottom-0 {
margin-bottom: 0 !important;
}
.margin-x-0 {
margin-left: 0 !important;
margin-right: 0 !important;
}
.margin-y-0 {
margin-top: 0 !important;
margin-bottom: 0 !important;
}
.margin-0 {
margin: 0 !important;
}
/* RESET ==================== */
*,
*:before,
*:after {
box-sizing: border-box;
}
::-webkit-scrollbar {
width: 0;
overflow: hidden;
}
::-moz-selection {
background: var(--color-theme);
color: var(--color-white);
}
::selection {
background: var(--color-theme);
color: var(--color-white);
}
.bg-theme ::-moz-selection {
background: var(--color-white);
color: var(--color-theme);
}
.bg-theme ::selection {
background: var(--color-white);
color: var(--color-theme);
}
article,
aside,
figcaption,
figure,
picture,
footer,
header,
hgroup,
main,
nav,
section,
dl,
dd {
display: block;
margin: 0;
}
html {
font-family: sans-serif;
font-size: 62.5%;
-webkit-text-size-adjust: 100%;
-webkit-tap-highlight-color: rgba(0, 0, 0, 0);
}
body {
margin: 0;
position: relative;
min-height: 100svh;
overflow-x: hidden;
background: var(--color-off-white);
color: var(--color-body);
-webkit-animation-name: pageAnimation;
animation-name: pageAnimation;
-webkit-animation-duration: var(--duration-x3);
animation-duration: var(--duration-x3);
-webkit-animation-timing-function: var(--timing-function);
animation-timing-function: var(--timing-function);
-webkit-animation-iteration-count: 1;
animation-iteration-count: 1;
-webkit-animation-fill-mode: forwards;
animation-fill-mode: forwards;
will-change: opacity;
}
@-webkit-keyframes pageAnimation {
from {
opacity: 0;
}
to {
opacity: 1;
}
}
@keyframes pageAnimation {
from {
opacity: 0;
}
to {
opacity: 1;
}
}
h1,
h2,
h3,
h4,
h5,
h6 {
margin: 0;
font-family: inherit;
font-size: inherit;
font-weight: inherit;
line-height: inherit;
}
h1,
h2 {
color: var(--color-dark-brown);
}
h3,
h4,
h5,
h6 {
color: var(--color-brown);
}
p {
margin: 0;
}
small {
font-size: 88.8888888889%;
}
address {
font-style: normal;
}
ul,
ol {
list-style: none;
}
ul,
ol,
li {
margin: 0;
padding: 0;
}
a {
color: inherit;
}
a,
a:hover,
a:focus {
outline: 0;
text-decoration: none;
box-shadow: none;
}
a[href^="tel"] {
white-space: nowrap;
}
a[href^="mailto"] {
word-break: break-word;
}
a,
button,
[role="button"] {
cursor: pointer;
}
button,
input,
textarea,
select {
outline: 0;
-webkit-appearance: none;
-moz-appearance: none;
appearance: none;
box-shadow: none;
border-radius: 0;
border: 0;
background: none;
padding: 0;
margin: 0;
min-width: 0;
font: inherit;
line-height: normal;
text-transform: inherit;
text-align: inherit;
letter-spacing: inherit;
text-indent: inherit;
color: inherit;
}
fieldset {
border: 0 !important;
background: none !important;
margin: 0 !important;
padding: 0 !important;
}
img {
border: 0;
outline: 0;
height: auto;
width: auto;
max-width: 100%;
vertical-align: middle;
}
table {
width: 100%;
border-collapse: collapse;
border-spacing: 0;
}
th,
td {
padding: 0;
font-weight: inherit;
}
hr {
margin: 0;
border: 0;
display: block;
width: 100%;
height: 1px;
background: var(--border-color);
}
iframe {
border: 0;
}
[tabindex="-1"]:focus {
outline: 0 !important;
}
script {
margin: 0 !important;
}
html.resizing * {
transition: none !important;
}
body * {
cursor: none !important;
}
.cursor {
--border-color: var(--color-brown);
--hover-bg-color: var(--color-light-brown);
pointer-events: none;
width: 1.2rem;
aspect-ratio: 1;
border-radius: 50%;
background-color: transparent;
position: fixed;
top: 0;
left: 0;
border: 1px solid var(--border-color);
z-index: 1000;
transition:
border-color var(--duration) var(--timing-function),
background-color var(--duration) var(--timing-function),
width var(--duration) var(--timing-function);
}
.cursor.dark-bg {
--border-color: var(--color-cream);
--hover-bg-color: var(--color-cream);
}
.cursor.hover-cursor {
border-color: transparent;
background-color: var(--hover-bg-color);
width: 2rem;
}
/* TEXT ==================== */
body {
font-family: var(--font-body);
font-weight: var(--font-weight-regular);
font-size: var(--font-size-body);
line-height: var(--line-height-body);
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
}
strong {
font-weight: var(--font-weight-bold);
}
.font-body {
font-size: var(--font-body) !important;
}
.font-heading {
font-family: var(--font-heading) !important;
}
.style-italic {
font-style: italic !important;
}
.font-heading.style-italic {
padding: 0.16em;
margin: -0.16em;
}
.weight-light {
font-weight: var(--font-weight-light) !important;
}
.weight-regular {
font-weight: var(--font-weight-regular) !important;
}
.weight-medium {
font-weight: var(--font-weight-medium) !important;
}
.weight-semibold {
font-weight: var(--font-weight-semibold) !important;
}
.weight-bold {
font-weight: var(--font-weight-bold) !important;
}
.weight-black {
font-weight: var(--font-weight-black) !important;
}
.size-icon-xs {
font-size: var(--icon-size-xs) !important;
}
.size-icon-sm {
font-size: var(--icon-size-sm) !important;
}
.size-icon-md {
font-size: var(--icon-size-md) !important;
}
.size-icon-lg {
font-size: var(--icon-size-lg) !important;
}
.size-icon-xl {
font-size: var(--icon-size-xl) !important;
}
.size-icon-2xl {
font-size: var(--icon-size-2xl) !important;
}
.size-icon-3xl {
font-size: var(--icon-size-3xl) !important;
}
.size-h1 {
font-size: var(--font-size-h1) !important;
line-height: var(--line-height-h1);
font-weight: var(--font-weight-medium);
letter-spacing: var(--letter-spacing-sm);
color: var(--color-dark-brown);
}
.size-h2 {
color: var(--color-dark-brown);
}
.size-h2,
.size-pc-h2-mb-h1 {
font-size: var(--font-size-h2) !important;
line-height: var(--line-height-h2);
font-weight: var(--font-weight-medium);
letter-spacing: var(--letter-spacing-sm);
}
.size-h3 {
font-size: var(--font-size-h3) !important;
line-height: var(--line-height-h3);
font-weight: var(--font-weight-medium);
letter-spacing: var(--letter-spacing-sm);
color: var(--color-brown);
}
.size-h4 {
font-size: var(--font-size-h4) !important;
line-height: var(--line-height-h4);
font-weight: var(--font-weight-medium);
letter-spacing: var(--letter-spacing-sm);
color: var(--color-brown);
}
.size-h5 {
font-size: var(--font-size-h5) !important;
line-height: var(--line-height-h5);
font-weight: var(--font-weight-medium);
letter-spacing: var(--letter-spacing-sm);
}
.size-h6 {
font-size: var(--font-size-h6) !important;
line-height: var(--line-height-h6);
font-weight: var(--font-weight-medium);
letter-spacing: var(--letter-spacing-sm);
}
.size-tagline {
font-size: var(--font-size-tagline) !important;
line-height: var(--line-height-tagline);
font-weight: var(--font-weight-regular);
letter-spacing: var(--letter-spacing-md);
color: var(--color-brown);
}
.size-body-big {
font-size: var(--font-size-body-big) !important;
line-height: var(--line-height-body-big);
font-weight: var(--font-weight-medium);
letter-spacing: var(--letter-spacing-xs);
}
.size-body {
font-size: var(--font-size-body) !important;
line-height: var(--line-height-body) !important;
font-weight: var(--font-weight-regular);
letter-spacing: var(--letter-spacing-xs);
}
.size-sub {
font-size: var(--font-size-sub) !important;
line-height: var(--line-height-sub) !important;
font-weight: var(--font-weight-medium);
letter-spacing: var(--letter-spacing-sm);
}
.size-sub-2 {
font-size: var(--font-size-sub-2) !important;
line-height: var(--line-height-sub-2) !important;
font-weight: var(--font-weight-regular);
letter-spacing: var(--letter-spacing-xs);
}
.size-button {
font-size: var(--font-size-button) !important;
line-height: var(--line-height-button) !important;
font-weight: var(--font-weight-medium);
letter-spacing: var(--letter-spacing-sm);
}
/* TRANSITION ====================*/
img,
a,
button,
[role="button"],
input,
textarea,
select,
.select2-selection__placeholder,
.select2-results__option,
.label.anim,
.button,
.ctrl,
.explore,
.container,
.object,
.object-fit,
.bg-img,
.tab-content,
.tabdata-content,
.ic:before,
*[class*="swiper-button-"] {
transition: var(--duration) var(--timing-function);
}
/* CTAs ====================*/
html.no-touchevents a:hover {
color: var(--color-light-brown);
}
.link-overlay {
font-size: 0;
opacity: 0;
display: block;
width: 100%;
height: 100%;
position: absolute;
z-index: 2;
top: 0;
left: 0;
pointer-events: auto;
}
.link-block {
display: block;
position: relative;
z-index: 1;
}
*:is(.button, .wp-element-button, .wp-block-button__link) {
--gap-y: 0;
--gap-x: 0;
--underline-color: var(--color-light-brown);
--button-bg: transparent;
--button-hover-bg: transparent;
--button-color: var(--color-light-brown);
--button-hover-color: var(--color-brown);
text-decoration: none !important;
box-shadow: none !important;
margin: 0;
position: relative;
z-index: 1;
display: block;
align-items: center;
justify-content: space-between;
grid-gap: var(--gap-y) var(--gap-x);
white-space: normal;
width: -webkit-fit-content;
width: -moz-fit-content;
width: fit-content;
max-width: 100%;
height: auto;
min-height: 0;
max-height: none;
padding: var(--button-spacing-y) var(--button-spacing-x) !important;
opacity: 1 !important;
color: var(--button-color) !important;
background: var(--button-bg) !important;
border: unset !important;
border-radius: 0 !important;
font-family: var(--font-heading);
font-weight: var(--font-weight-medium);
font-size: var(--font-size-button);
line-height: var(--line-height-button);
letter-spacing: var(--letter-spacing-sm);
text-align: center;
transition: var(--duration) var(--timing-function);
text-transform: uppercase;
}
*:is(.button, .wp-element-button, .wp-block-button__link)::before {
position: absolute;
content: "";
width: 100%;
height: 1px;
background: var(--underline-color);
bottom: calc(-1 * var(--spacing-6xs));
left: 0;
pointer-events: none;
transform-origin: 100% 50%;
transform: scale3d(0, 1, 1);
transition: transform var(--duration) var(--timing-function);
}
html.no-touchevents
*:is(.button, .wp-element-button, .wp-block-button__link):hover {
color: var(--button-hover-color) !important;
}
html.no-touchevents
*:is(.button, .wp-element-button, .wp-block-button__link):hover::before {
transform-origin: 0% 50%;
transform: scale3d(1, 1, 1);
}
.submit .button,
.button.active {
color: var(--button-hover-color) !important;
}
.submit .button::before,
.button.active::before {
transform-origin: 0% 50%;
transform: scale3d(1, 1, 1);
}
.underline-hover {
--rgb: var(--color-light-brown-rgb);
position: relative;
}
.underline-hover::before {
position: absolute;
content: "";
width: 100%;
height: 1px;
background: rgba(var(--rgb), 1);
bottom: calc(-1 * var(--spacing-6xs));
left: 0;
pointer-events: none;
transform-origin: 100% 50%;
transform: scale3d(0, 1, 1);
transition: transform var(--duration) var(--timing-function);
}
html.no-touchevents .underline-hover:not(.active-trigger):hover::before {
transform-origin: 0% 50%;
transform: scale3d(1, 1, 1);
}
.underline-hover.active-trigger.active::before {
transform-origin: 0% 50%;
transform: scale3d(1, 1, 1);
}
/* GENERAL ====================*/
.ic,
.ic-name {
display: inline-block;
}
.ic > img {
display: inline-block;
vertical-align: top;
width: auto;
height: 1em;
}
*[class*="ic-"] + *[class*="ic-"] {
margin-left: var(--spacing-2xs);
}
.ic-youtube:before,
.ic-envelope:before {
transform: scale(1.25);
display: block;
margin: 0 0.2em;
}
.brand {
text-decoration: none !important;
box-shadow: none !important;
opacity: 1 !important;
display: inline-block;
vertical-align: top;
line-height: 1;
}
.brand .logo {
display: inline-block;
vertical-align: top;
height: var(--logo-height);
-o-object-fit: contain;
object-fit: contain;
-o-object-position: center;
object-position: center;
transition: var(--duration) var(--timing-function);
}
html.page-scrolling .brand .logo {
height: var(--logo-height-small);
}
.lang ul {
display: inline-flex;
vertical-align: top;
align-items: baseline;
}
.lang ul > li:not(:last-child, :empty):after {
content: "|";
margin: 0 0.5em;
}
.lang ul > li > a.active {
color: var(--color-active);
}
html.no-touchevents .lang ul > li > a:not(.active):hover {
opacity: var(--opacity);
}
/*CONTENT====================*/
.entry-content {
--gap-row: var(--spacing-xl);
--gap-column: var(--spacing-lg);
--gap-content: var(--spacing-2sm);
--wp--preset--font-size--normal: var(--font-size-body);
--wp--preset--font-size--small: var(--font-size-tagline);
--wp--preset--font-size--medium: var(--font-size-h4);
--wp--preset--font-size--large: var(--font-size-h4);
--wp--preset--font-size--x-large: var(--font-size-h3);
--wp--preset--font-size--xx-large: var(--font-size-h2);
--wp--preset--font-size--huge: var(--font-size-h1);
width: 100%;
}
.entry-content :is(h1, h2, h3, h4, h5, h6) {
margin: 0;
font-family: var(--font-heading);
font-weight: var(--font-weight-semibold);
font-size: inherit;
line-height: inherit;
letter-spacing: normal;
}
.entry-content .has-small-font-size {
font-size: var(--wp--preset--font-size--small) !important;
line-height: var(--line-height-tagline);
letter-spacing: var(--letter-spacing-xs);
}
.entry-content :is(h6, .has-normal-font-size, .has-regular-font-size) {
font-size: var(--wp--preset--font-size--normal) !important;
line-height: var(--line-height-body);
letter-spacing: var(--letter-spacing-xs);
color: var(--color-brown);
}
.entry-content :is(h5, .has-medium-font-size) {
font-size: var(--wp--preset--font-size--medium) !important;
line-height: var(--line-height-h4);
letter-spacing: var(--letter-spacing-sm);
color: var(--color-brown);
}
.entry-content :is(h4, .has-large-font-size, .has-larger-font-size) {
font-size: var(--wp--preset--font-size--large) !important;
line-height: var(--line-height-h4);
letter-spacing: var(--letter-spacing-sm);
color: var(--color-brown);
}
.entry-content :is(h3, .has-x-large-font-size) {
font-size: var(--wp--preset--font-size--x-large) !important;
line-height: var(--line-height-h3);
letter-spacing: var(--letter-spacing-sm);
color: var(--color-brown);
}
.entry-content :is(h2, .has-xx-large-font-size) {
font-size: var(--wp--preset--font-size--xx-large) !important;
line-height: var(--line-height-h2);
letter-spacing: var(--letter-spacing-sm);
text-transform: uppercase;
color: var(--color-dark-brown);
}
.entry-content :is(h1, .has-huge-font-size) {
font-size: var(--wp--preset--font-size--huge) !important;
line-height: var(--line-height-h1);
letter-spacing: var(--letter-spacing-sm);
text-transform: uppercase;
color: var(--color-dark-brown);
}
.entry-content h3:not(:first-child) + p {
margin-top: 0;
}
.entry-content p {
margin: 0;
font-family: inherit;
font-weight: inherit;
font-size: var(--font-size-body);
line-height: var(--line-height-body);
letter-spacing: var(--letter-spacing-xs);
color: inherit;
}
.entry-content strong {
color: var(--color-brown);
font-weight: var(--font-weight-medium);
}
.entry-content a {
color: var(--color-theme);
text-decoration: underline;
display: inline-block;
}
.entry-content ul {
margin: 0;
padding: 0;
list-style-type: disc;
padding-left: 1.5em;
}
.entry-content li::marker {
font-size: 0.65em;
}
.entry-content ol {
margin: 0;
padding: 0;
list-style-type: decimal;
list-style-position: inside;
}
.entry-content :is(h1, h2, h3, h4, h5, h6) + .wp-block-list {
margin-top: var(--spacing-4xs);
}
.entry-content p + .wp-block-list {
margin-top: var(--spacing-6xs);
}
.entry-content .is-layout-flex {
display: flex;
flex-wrap: wrap;
align-items: center;
gap: unset;
grid-gap: var(--gap-row);
}
.entry-content :is(.wp-block-image, .wp-block-video) :is(img, video) {
margin: 0;
height: auto;
max-height: none;
max-width: 100%;
vertical-align: top;
overflow: hidden;
}
.entry-content
:is(.wp-block-image, .wp-block-video).size-medium
:is(img, video) {
max-width: min(40rem, calc(100% - 2 * var(--spacing-container)));
max-height: min(47.3rem, calc(100vh - var(--header-height)));
}
.entry-content .wp-block-embed .wp-block-embed__wrapper {
position: relative;
}
.entry-content .wp-block-embed .wp-block-embed__wrapper:before {
content: "";
display: block;
width: 100%;
padding-bottom: 56.25%;
}
.entry-content .wp-block-embed .wp-block-embed__wrapper > * {
display: block;
width: 100%;
height: 100%;
-o-object-fit: contain;
object-fit: contain;
-o-object-position: center;
object-position: center;
position: absolute;
top: 0;
left: 0;
}
.entry-content [class*="wp-block"] figcaption {
font-style: normal;
font-size: var(--font-size-body-sm);
line-height: var(--line-height-body);
color: var(--color-gray);
}
.entry-content > *,
.entry-content :is([class*="wp-block-"], figcaption) {
margin: 0;
}
.entry-content > *:not(:first-child),
*:is(.wp-block-group, .wp-block-column, .wp-block-quote) > *:not(:first-child) {
margin-top: var(--gap-content);
}
[class*="wp-block-"]:not(.wp-block-heading, .wp-block-list, .wp-block-column)
+ *:not(:first-child),
*
+ [class*="wp-block-"]:not(
.wp-block-heading,
.wp-block-list,
.wp-block-column
):not(:first-child) {
margin-top: var(--gap-row);
}
.entry-content li:not(:first-child),
.entry-content br + *:not(:first-child),
.entry-content [class*="wp-block-"] br + *:not(:first-child),
.entry-content [class*="wp-block-"] figcaption:not(:first-child) {
margin-top: var(--gap-content-xs);
}
.entry-content .wp-block-columns {
grid-gap: var(--gap-row) var(--gap-column);
}
.entry-content .wp-block-columns > * {
margin: 0;
}
.entry-content [class*="wp-block"].aligncenter {
margin-left: auto;
margin-right: auto;
}
.entry-content .wp-block-column[style*="flex-basis:66.66%"] {
flex-basis: calc(66.66% + 40px) !important;
}
.entry-content .wp-block-image .size-medium {
width: 65.6320968963%;
}
/* HAMBURGER ====================*/
.hamburger {
position: relative;
display: block;
width: auto;
height: auto;
line-height: 1;
}
.hamburger .bars {
display: block;
width: var(--hamburger-size);
height: var(--hamburger-size);
position: relative;
transform: rotate(0deg);
transition: var(--duration) var(--timing-function);
cursor: pointer;
}
.hamburger .bars > .bar {
display: block;
position: absolute;
width: 100%;
height: var(--hamburger-line);
background: rgba(var(--rgb), 1);
opacity: 1;
left: 0;
transform: rotate(0deg);
transition: var(--duration) var(--timing-function);
}
.hamburger .bars > .bar:nth-child(1) {
top: calc((var(--hamburger-size) / 4) - (var(--hamburger-line) / 2));
}
.hamburger .bars > .bar:is(:nth-child(2), :nth-child(3)) {
top: calc((var(--hamburger-size) / 2) - (var(--hamburger-line) / 2));
}
.hamburger .bars > .bar:nth-child(4) {
top: calc((var(--hamburger-size) / 4) * 3 - (var(--hamburger-line) / 2));
}
.active > .hamburger .bars > .bar:is(:nth-child(1), :nth-child(4)) {
top: calc((var(--hamburger-size) / 2) - (var(--hamburger-line) / 2));
left: 50%;
width: 0%;
}
.active > .hamburger .bars > .bar:nth-child(2) {
transform: rotate(45deg);
}
.active > .hamburger .bars > .bar:nth-child(3) {
transform: rotate(-45deg);
}
/* FORM ====================*/
*:is(input, textarea, select) {
background: none;
border-radius: 0;
border: 0;
border-bottom: var(--input-border);
font-family: var(--font-body);
font-weight: var(--font-weight-regular);
font-size: var(--font-size-body);
line-height: normal;
text-transform: inherit;
text-align: left;
letter-spacing: inherit;
text-indent: inherit;
color: var(--color-body-black);
display: block;
width: 100%;
height: var(--input-height);
padding: var(--input-spacing-y) var(--input-spacing-x);
}
/* input :-ms-input-placeholder,
input ::-webkit-input-placeholder,
input ::-moz-placeholder,
input::placeholder {
font-size: var(--font-size-body) !important;
font-weight: var(--font-weight-regular) !important;
font-style: normal !important;
color: rgba(var(--color-body-black-rgb), 0.1) !important;
opacity: 0.5 !important;
} */
input::placeholder,
textarea::placeholder {
color: rgba(var(--color-body-black-rgb), 0.5) !important;
}
textarea {
--height: calc(var(--input-height) * 2);
resize: none;
display: block;
overflow: auto;
width: 100% !important;
min-width: 100%;
max-width: 100%;
min-height: var(--height);
}
.checkbox {
display: flex;
align-items: center;
justify-content: center;
grid-gap: var(--spacing-5xs);
}
.checkbox input[type="checkbox"] {
--input-height: 20px;
box-shadow: unset;
border: none;
background: none;
padding: inherit;
margin: unset;
min-width: unset;
font: inherit;
line-height: normal;
text-align: center;
width: unset;
font: inherit;
color: currentColor;
width: 1em;
height: 1em;
border: 0.05em solid currentColor;
border-radius: 0.15em;
display: grid;
place-content: center;
}
input[type="checkbox"]::before {
content: "";
width: 0.65em;
height: 0.65em;
transform: scale(0);
transition: 120ms transform ease-in-out;
transform-origin: center;
box-shadow: inset 1em 1em var(--color-black);
clip-path: polygon(16% 48%, 10% 60%, 48% 90%, 92% 20%, 80% 10%, 45% 70%);
}
input[type="checkbox"]:checked::before {
transform: scale(1);
}
.input-file {
display: flex;
flex-direction: column;
grid-gap: var(--spacing-3xs);
z-index: 0;
}
.input-file .file-label .subttl {
font-size: var(--font-size-description);
line-height: var(--line-height-description);
font-weight: var(--font-weight-regular);
}
.input-file .file-upload-wrapper {
display: flex;
grid-gap: var(--spacing-4xs);
align-items: center;
}
.input-file .file-upload-button {
background-color: var(--color-gray-light);
padding: var(--spacing-xs) var(--spacing-xs);
font-size: var(--font-size-body);
line-height: var(--line-height-body);
font-weight: var(--font-weight-regular);
}
.input-file .file-upload-placeholder {
display: flex;
flex-direction: column;
justify-content: center;
flex-grow: 1;
}
.input-file .file-upload-placeholder .header {
display: flex;
grid-gap: var(--spacing-5xs);
font-size: var(--font-size-description);
line-height: var(--line-height-description);
align-items: center;
}
.input-file .file-upload-placeholder .header .cancel-upload {
margin-left: auto;
width: var(--spacing-sm);
aspect-ratio: 1;
font-size: var(--font-size-description);
line-height: 1;
background-color: var(--color-gray);
border-radius: 50%;
overflow: hidden;
display: flex;
align-items: center;
justify-content: center;
color: var(--color-white);
}
.input-file .file-upload-placeholder .file-progress {
width: 100%;
border-radius: 0;
height: 0.2rem;
margin-top: var(--spacing-5xs);
background-color: var(--color-white);
}
.input-file .file-upload-placeholder .file-progress {
-webkit-appearance: none;
appearance: none;
border: none;
mask-image: radial-gradient(white, white);
-webkit-mask-image: radial-gradient(white, white);
}
.input-file .file-upload-placeholder .file-progress::-webkit-progress-bar {
background-color: var(--color-white) !important;
}
.input-file .file-upload-placeholder .file-progress::-webkit-progress-value {
background-color: var(--color-theme);
}
.input-file
.custom-file-upload.filled
.file-upload-placeholder
.file-description {
display: none;
}
/* SELECT */
.select {
position: relative;
}
.select select {
line-height: normal;
padding-right: var(--input-height);
text-overflow: "";
cursor: pointer;
}
.select:after {
font-family: "iconfont";
content: "\e90c";
font-size: var(--icon-size-xs);
font-weight: normal;
line-height: 1;
color: inherit;
vertical-align: top;
display: inline-flex !important;
align-items: center;
justify-content: center;
text-align: center;
padding-right: var(--input-spacing-x);
width: var(--input-height);
height: 100%;
position: absolute;
top: 0;
bottom: 0;
right: 0;
z-index: 1;
pointer-events: none;
overflow: hidden;
transition: var(--duration) var(--timing-function);
}
.select2-parent:after {
display: none !important;
}
.select2-rendered__match {
text-decoration: underline;
}
.select2-close-mask {
border: 0;
margin: 0;
padding: 0;
display: block;
position: fixed;
left: 0;
top: 0;
min-height: 100%;
min-width: 100%;
height: auto;
width: auto;
opacity: 0;
z-index: 98;
background-color: #fff;
filter: alpha(opacity=0);
}
.select2-hidden-accessible {
border: 0 !important;
clip: rect(0 0 0 0) !important;
-webkit-clip-path: inset(50%) !important;
clip-path: inset(50%) !important;
height: 1px !important;
overflow: hidden !important;
padding: 0 !important;
position: absolute !important;
width: 1px !important;
white-space: nowrap !important;
}
.select2-container {
position: relative;
display: block;
width: 100%;
margin: 0;
top: calc(100% + var(--spacing-3xs)) !important;
}
.select2-dropdown {
--color-active: var(--color-black);
box-sizing: border-box;
display: block;
width: 100%;
position: absolute;
z-index: 1051;
left: -100000px;
font-weight: var(--font-weight-body);
font-size: var(--font-size-body);
line-height: var(--line-height-body) !important;
color: var(--color-middark) !important;
background: var(--color-white) !important;
box-shadow: none !important;
border-radius: 0 !important;
overflow: hidden !important;
transition: none;
}
.select2-container--open .select2-dropdown {
left: 0;
}
.select2-container--open .select2-dropdown--below {
margin: -1px 0 0;
}
.select2-container--open .select2-dropdown--above {
/*top*/
margin: 0;
}
.select2-results {
display: block;
}
.select2-results__options {
list-style: none;
margin: 0;
background-color: var(--color-off-white);
font-size: var(--font-size-body);
line-height: var(--line-height-body);
text-align: left;
}
.select2-results__option {
padding: 0;
}
.select2-results__option:not(:last-child) {
margin-bottom: var(--spacing-6xs);
}
.select2-results__option[aria-selected] {
cursor: pointer;
}
.select2-results__option:not([id]) {
margin: 0;
}
.select2-search--dropdown {
display: block;
padding: var(--spacing-sm);
}
.select2-search--dropdown .select2-search__field {
padding: 7px 15px 8px;
width: 100%;
box-sizing: border-box;
}
.select2-search--dropdown .select2-search__field::-webkit-search-cancel-button {
-webkit-appearance: none;
}
.select2-search--dropdown.select2-search--hide {
display: none;
}
.select2-container--default .select2-selection--single {
outline: 0;
padding: 0;
display: block;
width: 100%;
height: var(--input-height);
color: inherit;
background: none;
border: 0;
border-bottom: var(--input-border);
border-radius: 0;
transition: none;
overflow: hidden;
cursor: pointer;
font-weight: var(--font-weight-regular);
}
.select2-container--default
.select2-selection--single
.select2-selection__rendered {
display: block;
padding: var(--input-spacing-y) var(--input-spacing-x);
padding-right: var(--input-height);
height: 100%;
line-height: calc(var(--input-height) - var(--input-spacing-y) * 2);
width: 100%;
max-width: 100%;
overflow: hidden;
white-space: nowrap;
text-overflow: ellipsis;
color: inherit;
}
.select2-container--default
.select2-selection--single
.select2-selection__rendered[title] {
background-color: transparent;
}
.select2-container--default
.select2-selection--single
.select2-selection__clear {
position: relative;
cursor: pointer;
float: right;
}
.select2-container--default
.select2-selection--single
.select2-selection__placeholder {
color: rgba(var(--color-body-black-rgb), 0.5);
}
.select2-container--default
.select2-selection--single
.select2-selection__arrow,
.select2-container--default
.select2-selection--single
.select2-selection__clear {
position: absolute;
top: 0px;
right: 0px;
z-index: 1;
display: block;
width: calc(var(--input-height) / 2);
height: 100%;
font-size: 0;
text-align: center;
color: inherit;
cursor: pointer;
transition: var(--duration) var(--timing-function);
}
.select2-container--default
.select2-selection--single
.select2-selection__arrow
b {
border: 0;
margin: 0;
position: static;
top: auto;
left: auto;
display: block;
width: 100%;
height: 100%;
}
.select2-container--default
.select2-selection--single
.select2-selection__arrow
b:before,
.select2-container--default
.select2-selection--single
.select2-selection__clear:before {
font-family: "iconfont";
font-size: var(--icon-size-xs);
color: var(--color-light-brown);
font-weight: normal;
line-height: 1;
vertical-align: top;
display: inline-flex;
align-items: center;
justify-content: center;
padding-right: var(--input-spacing-x);
text-align: center;
width: 100%;
height: 100%;
}
.select2-container--default
.select2-selection--single
.select2-selection__arrow
b:before {
content: "\e908";
}
.select2-container--default
.select2-selection--single
.select2-selection__clear:before {
content: "\e900";
}
.select2-container--open .select2-selection__arrow {
transform: rotate(180deg);
}
.select2-container--default.select2-container--disabled
.select2-selection--single {
background-color: #eee;
cursor: default;
}
.select2-container--default.select2-container--disabled
.select2-selection--single
.select2-selection__clear {
display: none;
}
.select2-container--default.select2-container--disabled
.select2-selection__choice__remove {
display: none;
}
.select2-container--default.select2-container--open
.select2-selection--single
.select2-selection__arrow
b {
border: 0;
}
/* .select2-container--default.select2-container--open.select2-container--above .select2-selection--single {
border-top-left-radius: 0;
border-top-right-radius: 0;
}
.select2-container--default.select2-container--open.select2-container--below .select2-selection--single {
border-bottom-left-radius: 0;
border-bottom-right-radius: 0;
} */
.select2-container--default .select2-search--dropdown .select2-search__field {
border: 1px solid var(--border-color);
}
.select2-container--default .select2-search--inline {
float: left;
}
.select2-container--default .select2-search--inline .select2-search__field {
-webkit-appearance: textfield;
box-sizing: border-box;
box-shadow: none;
background: none;
border: none;
padding: 0;
outline: 0;
font-size: 100%;
margin-top: 5px;
}
.select2-container--default
.select2-search--inline
.select2-search__field::-webkit-search-cancel-button {
-webkit-appearance: none;
}
.select2-container--default .select2-results > .select2-results__options {
max-height: 30vh;
overflow-y: auto;
}
.select2-container--default .select2-results__option span {
display: inline;
font-weight: inherit;
transition: var(--duration) var(--timing-function);
}
.select2-container--default .select2-results__option[role="group"] {
padding: 0;
}
.select2-container--default
.select2-results__option--highlighted[aria-selected] {
background: none;
color: inherit;
}
.select2-container--default
.select2-results__option--highlighted[aria-selected]
span {
color: var(--color-active);
}
.select2-container--default .select2-results__option[aria-selected="true"],
.select2-container--default .select2-results__option[data-selected="true"] {
font-weight: inherit;
text-decoration: none;
background: none;
color: inherit;
}
.select2-container--default
.select2-results__option[aria-selected="true"]
span {
box-shadow: var(--cta-shadow);
}
.select2-container--default .select2-results__option[aria-disabled="true"] {
background: none !important;
color: inherit !important;
opacity: var(--opacity-light) !important;
pointer-events: none !important;
text-decoration: none !important;
box-shadow: none !important;
}
.select2-container--default .select2-results__group {
display: block;
padding: 0;
cursor: default;
}
/* CHECKBOX & RADIO */
.choice {
position: relative;
display: flex;
max-width: 100%;
width: -webkit-fit-content;
width: -moz-fit-content;
width: fit-content;
font-family: inherit;
font-weight: inherit;
font-size: inherit;
color: inherit;
line-height: inherit;
letter-spacing: normal;
text-transform: none;
}
.choice > span {
position: relative;
display: inline-block;
-webkit-touch-callout: none;
}
.choice > input {
position: absolute;
z-index: -1000;
overflow: hidden;
clip: rect(0 0 0 0);
height: 1px;
width: 1px;
margin: -1px;
padding: 0;
border: 0;
background: none;
}
.choice input + span {
display: inline-block;
vertical-align: baseline;
text-align: left;
padding-left: calc(1em + var(--spacing-5xs));
line-height: inherit;
min-width: 1em;
min-height: 1em;
height: auto;
cursor: pointer;
}
.choice input + span:before,
.choice input + span:after {
content: "";
display: flex;
align-items: center;
justify-content: center;
width: 1em;
height: 1em;
border-radius: 2px;
color: rgba(var(--rgb), 1);
line-height: 1;
margin: 0;
position: absolute;
left: 0;
top: 0.25em;
}
.choice input + span:before {
background: none;
border: 1px solid;
}
.choice input + span:after {
background: currentColor;
opacity: 0;
transform: scale(0.5);
transition: opacity var(--duration) var(--timing-function);
}
.choice input:checked + span:after {
opacity: 1;
}
.choice input[type="checkbox"] + span:after {
font-family: "iconfont";
content: "\e923";
background: none;
width: 1em;
height: 1em;
transform: scale(0.65);
}
.choice input[type="radio"] + span:before,
.choice input[type="radio"] + span:after {
border-radius: 50%;
}
.choice-container {
display: grid;
grid-template-columns: 100%;
grid-gap: var(--spacing-xs);
}
.label:not(.anim) + *[class*="choice"] {
margin-top: var(--spacing-sm);
}
.fields {
display: flex;
flex-wrap: wrap;
justify-content: space-between;
grid-gap: var(--spacing-xs) 0;
}
.field {
position: relative;
width: 100%;
}
.field.focusin {
z-index: 2;
}
.label {
padding: 0;
border: 0;
border-radius: 0;
position: relative;
display: block;
font-family: var(--font-body);
font-weight: var(--font-weight-regular);
font-size: inherit;
text-transform: none;
color: var(--color-theme);
opacity: 1;
}
.c-white .label {
color: inherit;
}
.label a {
box-shadow: var(--cta-shadow);
}
.label.anim {
height: auto;
width: 100%;
max-width: 100%;
white-space: nowrap;
text-overflow: ellipsis;
overflow: hidden;
position: absolute;
z-index: 1;
left: 0;
top: calc(var(--input-height) / 2);
transform: translateY(-50%);
padding: 0 var(--input-spacing-x);
pointer-events: none;
}
.label.anim:not(.fixed) {
transition-property: opacity, visibility;
}
.input.filled .label.anim:not(.fixed) {
opacity: 0;
visibility: hidden;
}
.input:has(*:-internal-autofill-selected) .label.anim:not(.fixed) {
opacity: 0;
visibility: hidden;
}
.input.filled .label.anim.fixed {
top: 0;
padding: 0;
transform: translateY(-50%);
font-size: var(--font-size-body-sub);
opacity: var(--opacity);
}
.input:has(*:-internal-autofill-selected) .label.anim.fixed {
top: 0;
padding: 0;
transform: translateY(-50%);
font-size: var(--font-size-body-sub);
opacity: var(--opacity);
}
.input {
position: relative;
text-align: left;
}
.input .entry-title {
font-weight: var(--font-weight-body);
font-size: var(--font-size-h3);
line-height: var(--line-height-h3);
}
.input .entry-title:not(:last-child) {
margin-bottom: var(--spacing-2sm);
}
.input.with-cta .cta {
margin: 0;
position: absolute;
z-index: 3;
right: 0;
top: calc(var(--input-height) / 2);
transform: translateY(-50%);
}
.input input:-internal-autofill-selected,
.input textarea:-internal-autofill-selected,
.input select:-internal-autofill-selected {
color: inherit;
}
.input input:disabled,
.input textarea:disabled,
.input select:disabled,
.select2-container--default.select2-container--disabled
.select2-selection--single {
cursor: default;
opacity: 0.1;
}
.input input[type="checkbox"]:disabled,
.input input[type="radio"]:disabled {
background-color: transparent;
}
.input ::-ms-clear {
display: none;
width: 0;
height: 0;
}
.input ::-ms-reveal {
display: none;
width: 0;
height: 0;
}
button::-moz-focus-inner,
[type="button"]::-moz-focus-inner,
[type="reset"]::-moz-focus-inner,
[type="submit"]::-moz-focus-inner {
border-style: none;
padding: 0;
}
button:-moz-focusring,
[type="button"]:-moz-focusring,
[type="reset"]:-moz-focusring,
[type="submit"]:-moz-focusring {
outline: 0;
}
input::-webkit-contacts-auto-fill-button {
display: none !important;
visibility: hidden;
pointer-events: none;
}
input:-webkit-autofill,
textarea:-webkit-autofill,
select:-webkit-autofill {
box-shadow: 0 0 0px 1000px #fff inset;
-webkit-transition: 5000s ease 0s;
transition: 5000s ease 0s;
}
input[type="number"] {
-moz-appearance: textfield;
}
input[type="number"]::-webkit-inner-spin-button,
input[type="number"]::-webkit-outer-spin-button {
-webkit-appearance: none;
margin: 0;
}
/* FORM:UPLOAD FILE ====================*/
/* PLUGIN:POPUP ====================*/
/* PLUGIN:SLIDER ====================*/
.swiper {
width: 100%;
}
.swiper-wrapper {
will-change: transform;
}
.swiper-slide {
width: 100% !important;
}
.swiper-nav {
position: absolute;
left: 50%;
transform: translateX(-50%);
bottom: calc(var(--bottom-offset) / 2);
display: flex;
align-items: center;
justify-content: center;
grid-gap: var(--spacing-xs);
z-index: 5;
}
*[class*="swiper-button-"] {
position: relative;
top: unset;
bottom: unset;
left: unset;
right: unset;
transform: none;
z-index: 10;
outline: none;
margin: 0;
display: flex;
align-items: center;
justify-content: center;
width: auto;
height: auto;
color: inherit;
background: none;
border-radius: 0;
overflow: visible;
line-height: 1;
}
*[class*="swiper-button-"]:after {
position: relative;
font-family: "iconfont";
font-weight: normal;
font-size: var(--icon-size-2xs);
color: var(--color-white);
opacity: 1;
transition: var(--duration) var(--timing-function);
}
html.no-touchevents *[class*="swiper-button-"]:hover:after {
opacity: 0.5;
}
.swiper-button-prev:after {
content: "\e909";
}
.swiper-button-next:after {
content: "\e90a";
}
.swiper-nav.bracket [class*="swiper-button-"]:before {
position: absolute;
inset: 0;
display: flex;
align-items: center;
justify-content: center;
font-size: var(--font-size-sub);
line-height: var(--line-height-sub);
font-weight: var(--font-weight-medium);
transition: var(--duration) var(--timing-function);
}
.swiper-nav.bracket .swiper-button-prev:before {
content: "[";
}
.swiper-nav.bracket .swiper-button-next:before {
content: "]";
}
.swiper-nav.bracket [class*="swiper-button-"]:after {
opacity: 0;
}
html.no-touchevents .swiper-nav.bracket:hover [class*="swiper-button-"]:before {
opacity: 0;
}
html.no-touchevents .swiper-nav.bracket:hover [class*="swiper-button-"]:after {
opacity: 1;
}
.swiper-nav.bracket .swiper-button-disabled {
opacity: 1;
}
.swiper-button-disabled::after {
opacity: var(--opacity-light) !important;
}
.swiper-button-lock {
display: none !important;
}
.swiper-pagination {
position: static;
--rgb: var(--color-white-rgb);
line-height: 0;
display: flex;
align-items: flex-end;
justify-content: center;
gap: var(--spacing-5xs);
pointer-events: none;
font-size: var(--font-size-sub);
line-height: var(--line-height-sub);
font-weight: var(--font-weight-medium);
letter-spacing: var(--letter-spacing-sm);
text-transform: uppercase;
}
.swiper-horizontal > .swiper-pagination-bullets {
bottom: var(--gap-section);
left: unset;
right: var(--header-nav-right);
width: fit-content;
}
.swiper-pagination.a-center {
justify-content: center;
}
.swiper-pagination-bullet {
outline: none !important;
margin: 0 !important;
opacity: 1 !important;
font-size: 0;
display: block;
width: 1rem;
height: 1rem;
background: transparent;
border: 1px solid var(--color-white);
border-radius: 50%;
overflow: hidden;
position: relative;
transition: var(--duration) var(--timing-function);
pointer-events: auto;
}
.swiper-pagination-bullet-active {
background: rgba(var(--rgb), 1);
}
.static-pagination .swiper-pagination {
position: static;
margin: var(--spacing-2sm) 0;
}
.static-pagination .swiper-pagination-bullet {
border: var(--border);
}
.static-pagination .swiper-pagination-bullet-active {
background: rgba(var(--color-theme-rgb), 1);
}
.swiper-pagination[data-style="bar"] {
grid-gap: 0;
}
.swiper-pagination[data-style="bar"] .swiper-pagination-bullet {
border-radius: 0;
height: 2px;
width: 70px;
max-width: 12.3076923077vw;
margin: 0 !important;
}
.swiper-pagination[data-style="bar"] .swiper-pagination-bullet:first-child {
margin-left: 0 !important;
}
.swiper-pagination[data-style="bar"] .swiper-pagination-bullet:last-child {
margin-right: 0 !important;
}
.swiper-horizontal > .swiper-pagination[data-style="bar"] {
bottom: var(--spacing-2md);
}
.swiper-fade .swiper-slide {
opacity: 0 !important;
z-index: 0 !important;
pointer-events: none !important;
}
.swiper-fade .swiper-slide-active {
opacity: 1 !important;
z-index: 1 !important;
pointer-events: auto !important;
}
.swiper.default.fade .swiper-slide,
.swiper.auto.fade .swiper-slide {
width: 100% !important;
height: auto !important;
}
.swiper.default.fade .swiper-slide > *,
.swiper.auto.fade .swiper-slide > * {
height: 100%;
}
.swiper.fix *[class*="swiper-button-"] {
top: 0;
transform: none;
}
.swiper-button-prev.spacing-x {
left: var(--spacing-container);
}
.swiper-button-next.spacing-x {
right: var(--spacing-container);
}
/*PLUGIN:MARQUEE====================*/
*[data-js="liMarquee"] .mWrap .mMove,
*[data-js="liMarquee"] .mWrap .mItem {
width: auto !important;
}
*[data-js="liMarquee"] .mWrap .mItem {
float: left !important;
}
*[data-js="liMarquee"] .cloneContent {
padding: 0 !important;
}
/* FUNCTION:TAB ====================*/
.tab,
.tabdata {
position: relative;
}
.tab-content,
.tabdata-content {
margin: 0 !important;
position: relative;
height: 0;
opacity: 0;
overflow: hidden;
pointer-events: none;
transition-property: opacity;
transition-duration: 1s;
}
.tab-content.active,
.tabdata-content.active {
height: auto;
opacity: 1;
overflow: visible;
pointer-events: auto;
}
/* FUNCTION:ACCORDION ====================*/
.accordion {
--border-color: rgba(var(--color-dark-brown-rgb), 0.14);
}
.accordion:not(:last-child) {
border-bottom: var(--border-width) var(--border-style) var(--border-color);
}
.accordion:first-child {
margin-top: calc(var(--spacing-2sm) * -1);
}
.accordion:last-child {
margin-bottom: calc(var(--spacing-2sm) * -1);
}
.accordion .entry-panel {
display: none;
padding-top: var(--spacing-2sm);
max-width: 75%;
}
.accordion .entry-panel *[block-width] {
margin-left: 0 !important;
margin-right: 0 !important;
}
.accordion .entry-media {
display: none;
aspect-ratio: 1.5347721823;
}
.accordion {
display: flex;
padding: var(--spacing-lg) 0;
grid-gap: var(--page-grid-gutter);
}
.accordion > * {
width: calc((100% - var(--page-grid-gutter)) / 2);
}
.accordion > .entry-title {
position: relative;
display: flex;
flex-direction: column;
justify-content: center;
align-items: flex-start;
gap: 0;
transition: var(--duration) var(--timing-function);
cursor: pointer;
}
.accordion .accordion-ttl {
position: relative;
text-transform: uppercase;
display: flex;
align-items: center;
grid-gap: var(--spacing-2xs);
}
.accordion .accordion-ttl:before {
content: "";
display: block;
width: 0.8rem;
aspect-ratio: 1;
border-radius: 50%;
border: 0.1rem solid var(--color-dark-brown);
}
.accordion.active .accordion-ttl:before {
background-color: var(--color-dark-brown);
}
.accordion .accordion-ttl .title {
font-weight: var(--font-weight-medium);
font-size: var(--font-size-h2);
line-height: var(--line-height-h2);
letter-spacing: var(--letter-spacing-sm);
min-height: calc(var(--line-height-h1) * var(--font-size-h1));
color: inherit;
transition: var(--duration) var(--timing-function);
}
.accordion.active .accordion-ttl .title {
font-size: var(--font-size-h1);
line-height: var(--line-height-h1);
}
.accordion.active > .entry-title {
color: inherit;
}
/* FUNCTION:VIDEO ==================== */
/* FUNCTION:CLIPBOARD ==================== */
#clipboard {
display: flex;
align-items: center;
justify-content: center;
height: 100px;
width: 100px;
max-width: 100%;
margin: 0 auto;
padding: var(--spacing-xs);
font-family: var(--font-body);
font-weight: var(--font-weight-body);
font-size: var(--font-size-body-sub);
line-height: normal;
letter-spacing: normal;
text-transform: uppercase;
background-color: var(--color-theme);
color: var(--color-white);
border-radius: 50%;
overflow: hidden;
position: fixed;
z-index: 999999;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}
/* FUNCTION:COPY TO CLIPBOARD ==================== */
@-webkit-keyframes copy-slide-up {
0% {
-webkit-transform: translate(-50%, 0) scale(0.8);
transform: translate(-50%, 0) scale(0.8);
opacity: 0;
}
100% {
-webkit-transform: translate(-50%, -120%) scale(1);
transform: translate(-50%, -120%) scale(1);
opacity: 1;
}
}
@keyframes copy-slide-up {
0% {
-webkit-transform: translate(-50%, 0) scale(0.8);
transform: translate(-50%, 0) scale(0.8);
opacity: 0;
}
100% {
-webkit-transform: translate(-50%, -120%) scale(1);
transform: translate(-50%, -120%) scale(1);
opacity: 1;
}
}
#copy_tooltip {
display: block;
position: absolute;
background: var(--color-theme);
color: #fff;
padding: 0.5rem 1rem;
border-radius: 4px;
top: 0;
width: 12rem;
left: 50%;
margin: auto;
opacity: 0;
pointer-events: none;
line-height: var(--line-height-tagline);
font-size: var(--font-size-tagline);
font-family: var(--font-heading);
}
#copy_tooltip::after {
content: "";
position: absolute;
top: 100%;
left: 50%;
margin-left: -8px;
width: 0;
height: 0;
border-top: 8px solid var(--color-theme);
border-right: 8px solid transparent;
border-left: 8px solid transparent;
}
#copy_tooltip.active {
-webkit-animation: copy-slide-up 0.15s cubic-bezier(0.51, 0.92, 0.265, 1.55)
both;
animation: copy-slide-up 0.15s cubic-bezier(0.51, 0.92, 0.265, 1.55) both;
}
#copy_tooltip.inactive {
-webkit-animation: copy-slide-up 0.1s cubic-bezier(0.25, 0.46, 0.45, 0.94)
reverse both;
animation: copy-slide-up 0.1s cubic-bezier(0.25, 0.46, 0.45, 0.94) reverse
both;
}
/* PAGE ==================== */
#page {
display: grid;
grid-template-rows: 1fr auto;
min-height: 100svh;
}
/* FILTER ==================== */
/*MODULES==================== */
/* ANIMATE ==================== */
.animate {
-webkit-animation-duration: var(--duration);
animation-duration: var(--duration);
-webkit-animation-timing-function: var(--timing-function);
animation-timing-function: var(--timing-function);
/* will-change: opacity, transform; */
}
.animated {
-webkit-animation-delay: 0.1s;
animation-delay: 0.1s;
}
@-webkit-keyframes matrixZoomOut {
from {
opacity: 0;
transform: scale(1.05);
}
to {
opacity: 1;
transform: scale(1);
}
}
@keyframes matrixZoomOut {
from {
opacity: 0;
transform: scale(1.05);
}
to {
opacity: 1;
transform: scale(1);
}
}
.matrixZoomOut {
transform-origin: center center;
-webkit-animation-name: matrixZoomOut;
animation-name: matrixZoomOut;
animation-duration: 1s;
}
@keyframes fadeInUp {
from {
opacity: 0;
transform: translateY(2rem);
}
to {
opacity: 1;
transform: translateY(0);
}
}
.animate.fadeInUp {
animation-name: fadeInUp;
animation-delay: var(--duration-x2);
animation-duration: 1.5s;
animation-timing-function: cubic-bezier(0.25, 1, 0.5, 1);
}
.lenis {
height: auto;
}
.lenis.lenis-smooth {
scroll-behavior: auto !important;
}
.lenis.lenis-smooth [data-lenis-prevent] {
overscroll-behavior: contain;
}
.lenis.lenis-stopped {
overflow: hidden;
}
.lenis.lenis-scrolling iframe {
pointer-events: none;
}
/* BUNDLE ==================== */
img,
iframe,
.button,
#header,
.mfp-close,
.select2-selection--single,
.select2-results__option,
.choice > span,
.accordion > .entry-title,
.sc-billboard {
-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
}
html.touchevents a {
-webkit-user-select: auto;
-moz-user-select: auto;
-ms-user-select: auto;
user-select: auto;
}
.hamburger,
.plaimanas,
.button,
.social a,
.object,
.object-fit,
.qty-btn,
.sc-link,
.mfp-close .modal-dismiss {
text-decoration: none !important;
box-shadow: none !important;
}
/* CHECK ==================== */
#page-message {
display: flex;
align-items: center;
justify-content: center;
text-align: center;
padding: var(--spacing-md);
width: 100%;
height: 100%;
position: fixed;
z-index: 999999;
top: 0;
left: 0;
background: var(--color-white);
color: var(--color-black);
will-change: opacity;
opacity: 0;
pointer-events: none;
}
@media (max-width: 991px) and (orientation: landscape) {
html.is-device #page-message {
opacity: 1;
pointer-events: auto;
transition: opacity var(--duration) var(--timing-function);
}
}
/* HEADER ==================== */
#header {
position: fixed;
top: 0;
left: 0;
width: 100%;
z-index: 100;
}
.header-nav {
display: flex;
align-items: center;
justify-content: space-between;
padding: var(--spacing-lg) var(--spacing-container);
position: relative;
}
.header-nav a {
font-size: clamp(1rem, 0.6944444444vw, 1.5rem);
line-height: normal;
font-weight: var(--font-weight-medium);
text-transform: uppercase;
}
#header.on-dark-bg .header-nav a.button::before {
--underline-color: var(--color-white);
}
.header-brand {
position: relative;
z-index: 100;
}
.header-nav .menu {
display: flex;
align-items: center;
gap: var(--spacing-2sm);
transition: var(--duration-x2) var(--timing-function);
transition-delay: var(--duration-x2);
}
.header-nav .menu .button,
.header-menu-ctrl a {
color: var(--color-dark-brown);
--button-color: var(--color-dark-brown);
--button-hover-color: var(--color-dark-brown);
}
html:not(.header-menu-enabled) #header.on-dark-bg .header-nav .menu .button,
html:not(.header-menu-enabled) #header.on-dark-bg .header-menu-ctrl a {
color: var(--color-white);
--button-color: var(--color-white);
--button-hover-color: var(--color-white);
}
html:not(.header-menu-enabled) #header.on-dark-bg .brand .logo {
filter: var(--color-filter-white);
}
.header-menu-ctrl {
position: absolute;
z-index: 100;
top: 50%;
right: var(--spacing-container);
transform: translateY(-50%);
opacity: 0;
pointer-events: none;
transition: var(--duration-x2) var(--timing-function);
}
/* FOOTER ==================== */
#footer {
padding: var(--spacing-lg) var(--spacing-container) var(--spacing-md);
background-color: var(--color-cream);
}
.footer-nav {
display: grid;
grid-template-columns: repeat(6, 1fr);
column-gap: var(--page-grid-gutter);
row-gap: var(--spacing-4xl);
}
/* Footer Address */
.footer-address {
grid-column: span 2;
}
.footer-address .footer-logo .brand .logo {
--logo-height: 1.65rem;
height: var(--logo-height);
}
.footer-address address {
margin-top: var(--spacing-sm);
}
/* Footer Links */
.footer-links {
grid-column: span 4;
display: flex;
justify-content: flex-end;
grid-gap: var(--spacing-2xl);
}
.footer-links-list {
display: flex;
flex-direction: column;
grid-gap: var(--spacing-7xs);
}
.footer-links-list li:first-child > h3 {
color: var(--color-brown);
text-transform: uppercase;
margin-bottom: var(--spacing-3xs);
}
.footer-links-list li > * {
display: block;
font-size: clamp(1rem, 0.6944444444vw, 1.5rem);
line-height: normal;
font-weight: var(--font-weight-medium);
color: rgba(var(--color-body-black-rgb), 0.6);
}
.footer-email,
.footer-copy,
.footer-social {
grid-column: span 2;
align-self: center;
}
.footer-email > a {
font-size: clamp(1.2rem, 0.8333333333vw, 1.8rem);
line-height: normal;
font-weight: var(--font-weight-medium);
letter-spacing: var(--letter-spacing-sm);
color: var(--color-dark-brown);
}
.footer-copy {
justify-self: center;
}
.footer-copy > * {
font-size: clamp(1.1rem, 0.7638888889vw, 1.65rem);
line-height: normal;
color: var(--color-brown);
}
.footer-social {
justify-self: end;
}
.footer-social a {
color: var(--color-dark-brown);
}
/* MAIN ====================*/
#main {
--sticky-top: calc(var(--header-height) + var(--spacing-container));
position: relative;
width: 100%;
}
section {
overflow: clip;
position: relative;
width: 100vw;
}
section:first-child,
main > h1.visually-hidden + section {
padding-top: var(--header-height);
}
.sc-inner {
position: relative;
width: 100%;
padding-top: var(--gap-section);
padding-bottom: var(--gap-section);
}
.sc-inner--follows {
padding-top: calc(var(--gap-section) / 2);
}
.sc-inner--precedes {
padding-bottom: calc(var(--gap-section) / 2);
}
.sc-inner--top-extra {
padding-top: calc(var(--gap-section) * 1.5);
}
.sc-inner--bottom-extra {
padding-bottom: calc(var(--gap-section) * 1.5);
}
.sc-inner--top-0 {
padding-top: 0;
}
.sc-inner--bottom-0 {
padding-bottom: 0;
}
.container {
position: relative;
width: 100%;
max-width: 100%;
margin-left: auto;
margin-right: auto;
padding-left: var(--spacing-container);
padding-right: var(--spacing-container);
}
.wrapper {
width: 100%;
height: 100%;
position: relative;
}
[class*="block-content-"] {
display: flex;
flex-direction: column;
gap: var(--spacing-sm);
}
[class*="block-content-"].gap-sm {
gap: var(--spacing-sm);
}
.block-content-start {
align-items: flex-start;
text-align: start;
}
.block-content-center {
align-items: center;
text-align: center;
text-wrap: balance;
}
.block-content-end {
align-items: flex-end;
text-align: end;
}
.block-header {
display: flex;
flex-direction: column;
grid-gap: var(--spacing-2xs);
}
.block-ttl > * {
transition: var(--duration) var(--timing-function);
}
.block-subttl {
display: flex;
align-items: center;
grid-gap: var(--spacing-6xs) var(--spacing-xs);
flex-wrap: wrap;
}
.block-subttl .divider {
width: 0.1rem;
height: calc(var(--font-size-tagline) * var(--line-height-tagline));
display: block;
background-color: rgba(var(--color-brown-rgb), 0.5);
}
[data-bg-color="dark"] .block-subttl .divider {
background-color: rgba(var(--color-white-rgb), 0.5);
}
.block-desc > * {
transition: var(--duration) var(--timing-function);
}
[data-bg-color="dark"] .block-subttl .divider {
background-color: rgba(var(--color-off-white-rgb), 0.5);
}
[data-bg-color="dark"] *:is(.block-ttl, .block-subttl, .block-desc) > * {
color: var(--color-white);
}
.h-svh {
height: 100svh;
}
.h-lvh {
height: 100lvh;
}
.h-vh {
height: 100vh;
}
.sc-billboard {
position: relative;
width: 100%;
/* -webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none; */
}
.sc-billboard.full-screen {
height: 100svh;
}
[class*="gradient-overlay-"]::before {
content: "";
position: absolute;
width: 100%;
height: var(--gradient-height, 30%);
left: 0;
background: linear-gradient(
var(--gradient-direction, 0deg),
rgba(0, 0, 0, var(--gradient-opacity, 0.6)) 0%,
rgba(0, 0, 0, 0) 100%
);
z-index: 10;
}
.gradient-overlay-top::before {
top: 0;
--gradient-direction: 180deg;
}
.gradient-overlay-bottom::before {
bottom: 0;
--gradient-direction: 0deg;
}
.overlay::before {
content: "";
position: absolute;
width: 100%;
height: 100%;
left: 0;
top: 0;
background-color: rgba(var(--color-black-rgb), var(--overlay-opacity, 0.3));
z-index: 1;
}
.sc-billboard .object-fit,
.sc-billboard .sc-inner,
.sc-billboard *:is(.swiper, .swiper-wrapper, .swiper-slide) {
height: 100%;
width: 100%;
}
.card {
--text-align: left;
width: 100%;
display: block;
position: relative;
color: rgba(var(--rgb), 1);
text-align: var(--text-align);
white-space: normal;
cursor: default;
}
.card-container {
--gap-x: 0rem;
--gap-y: 0rem;
--column: 1;
--minmax: 0rem;
position: relative;
}
.card-container[data-card-layout="grid"] {
display: grid;
grid-gap: var(--gap-y) var(--gap-x);
grid-template-columns: repeat(
var(--column),
calc((100% - (var(--gap-x) * (var(--column) - 1))) / var(--column))
);
grid-auto-flow: dense;
}
.card-container[data-card-layout="grid-minmax"] {
display: grid;
grid-gap: var(--gap-y) var(--gap-x);
grid-template-columns: repeat(auto-fill, minmax(var(--minmax), 1fr));
grid-auto-flow: dense;
}
.card-container[data-card-layout="flex"] {
display: flex;
flex-wrap: wrap;
grid-gap: var(--gap-y) var(--gap-x);
}
.card-container[data-card-layout="flex"] > .card {
width: calc((100% - (var(--gap-x) * (var(--column) - 1))) / var(--column));
}
.card-container[data-card-layout="slider"] {
margin-left: calc((var(--gap-x) * -1) / 2);
margin-right: calc((var(--gap-x) * -1) / 2);
}
.card-container[data-card-layout="slider"] .swiper-slide {
width: calc(100% / var(--column)) !important;
padding-left: calc(var(--gap-x) / 2);
padding-right: calc(var(--gap-x) / 2);
}
.card-container[data-card-layout="slider"] .swiper-button-prev {
transform: translateX(calc((var(--gap-y)) / 2));
}
.card-container[data-card-layout="slider"] .swiper-button-next {
transform: translateX(calc((var(--gap-x) * -1) / 2));
}
.card .card-image {
position: relative;
}
.card .card-content {
position: relative;
display: flex;
flex-direction: column;
grid-gap: var(--spacing-sm);
}
.sc-header {
width: 100%;
display: flex;
align-items: center;
margin-bottom: var(--spacing-md);
}
.sc-header.justify-center {
justify-content: center;
text-align: center;
}
.sc-header.justify-between {
justify-content: space-between;
}
.sc-ttl {
font-size: var(--font-size-h1);
line-height: var(--line-height-h1);
font-weight: var(--font-weight-semibold);
text-transform: uppercase;
}
.marquee {
display: inline-flex !important;
}
/* Popup */
.popup {
width: fit-content;
position: relative;
z-index: 90;
--top-offset: var(--spacing-2xs);
}
.popup-content {
opacity: 0;
visibility: hidden;
position: absolute;
top: calc(100% + var(--top-offset));
width: fit-content;
box-shadow: 0px 0px 10px 0px rgba(var(--color-black-rgb), 0.25);
transition: var(--duration) var(--timing-function);
}
.popup-content.active {
opacity: 1;
visibility: visible;
}
.popup-content-inner {
padding: var(--spacing-2sm) var(--spacing-xs);
background-color: var(--color-white);
}
.popup[data-popup-pc-location="start"] .popup-content {
left: 0;
}
.popup[data-popup-pc-location="center"] .popup-content {
left: 50%;
transform: translateX(-50%);
}
.popup[data-popup-pc-location="end"] .popup-content {
right: 0;
}
/* Map */
.map-wrapper {
position: relative;
width: 100vw;
max-width: 100vw;
margin-left: calc(50% - 50vw);
margin-right: calc(50% - 50vw);
}
.map-wrapper .map {
width: 100%;
aspect-ratio: 5;
}
.map-wrapper .pin {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
width: 3.6rem;
aspect-ratio: 1;
}
/* COMPONENT */
/* DEFAULT ====================*/
/* SECTION ====================*/
/* Full Screen Slide */
[data-section="full-screen-slide"] {
color: var(--color-white);
padding-top: 0 !important;
--top-offset: var(--spacing-lg);
--bottom-offset: var(--spacing-2xl);
}
[data-section="full-screen-slide"] .sc-ttl {
position: absolute;
top: var(--top-offset);
left: 50%;
transform: translateX(-50%);
z-index: 3;
}
[data-section="full-screen-slide"] .slide-image {
position: relative;
width: 100%;
height: 100%;
}
[data-section="full-screen-slide"] .slide-image::before {
content: "";
position: absolute;
inset: 0;
background: linear-gradient(
180deg,
rgba(var(--color-black-rgb), 0) 54%,
rgba(var(--color-black-rgb), 0.8) 100%
);
z-index: 1;
}
[data-section="full-screen-slide"] [class*="block-content-"] {
position: absolute;
z-index: 5;
bottom: var(--bottom-offset);
left: 50%;
transform: translateX(-50%);
z-index: 2;
height: auto !important;
text-align: center;
opacity: 0;
transform: translate(-50%, 2rem);
transition: var(--duration-x4) cubic-bezier(0.25, 1, 0.5, 1);
transition-delay: 0.75s;
}
[data-section="full-screen-slide"]
.swiper-slide-active
[class*="block-content-"] {
opacity: 1;
transform: translate(-50%, 0);
}
[data-section="full-screen-slide"] [class*="block-content-"] .block-desc > * {
max-width: 33.33vw;
line-clamp: 3;
-webkit-line-clamp: 3;
display: -webkit-box;
-webkit-box-orient: vertical;
overflow: hidden;
}
/* List Item Template */
[data-section="list-item-template"].grid-view .sc-inner {
padding-bottom: calc(var(--gap-section) * 1.5);
}
[data-section="list-item-template"].project-view {
--offset-left: 25rem;
}
[data-section="list-item-template"] .tab-links {
display: flex;
align-items: flex-end;
justify-content: space-between;
margin-top: var(--spacing-sm);
position: relative;
z-index: 10;
}
[data-section="list-item-template"].project-view .tab-links {
max-width: var(--offset-left);
}
[data-section="list-item-template"] .tab-links-list {
display: flex;
align-items: center;
grid-gap: var(--spacing-5xs);
flex-wrap: wrap;
}
[data-section="list-item-template"] .tab-links-list .divider {
color: var(--color-light-brown);
}
[data-section="list-item-template"] .tab-links-list .divider:last-child {
display: none;
}
[data-section="list-item-template"] .tab-links a {
color: var(--color-brown);
}
html.no-touchevents [data-section="list-item-template"] .tab-links a:hover,
[data-section="list-item-template"] .tab-links a.active {
color: var(--color-light-brown);
}
[data-section="list-item-template"] .tab-links .view-all {
flex-shrink: 0;
}
[data-section="list-item-template"] .tab-links.type {
margin-bottom: var(--spacing-xl);
}
[data-section="list-item-template"]
.tab-links.type:has(+ .tab-contents:has(.view-toggle)) {
margin-bottom: var(--spacing-md);
}
[data-section="list-item-template"] .tab-links.view-toggle {
justify-content: flex-start;
grid-gap: var(--spacing-3xs);
align-items: center;
margin-bottom: var(--spacing-xl);
}
[data-section="list-item-template"] .tab-links.view-toggle a {
opacity: 0.5;
display: block;
}
[data-section="list-item-template"] .tab-links.view-toggle a.active {
opacity: 1;
}
.grid-view-icon {
display: block;
width: 1.6rem;
aspect-ratio: 1;
background-image: url('data:image/svg+xml,');
background-size: contain;
background-position: center;
background-repeat: no-repeat;
}
.project-view-icon {
display: block;
width: 2rem;
height: 1.6rem;
background-color: var(--color-light-brown);
}
[data-section="list-item-template"] .grid-container {
display: grid;
grid-template-columns: repeat(3, 1fr);
column-gap: var(--page-grid-gutter);
row-gap: var(--spacing-xl);
}
.product-main [data-section="list-item-template"] .grid-container {
display: flex;
flex-direction: column;
}
[data-section="list-item-template"] .load-more {
display: flex;
justify-content: center;
margin-top: var(--spacing-6xl);
}
[data-card="project-grid-card"]:first-child {
grid-column: span 2;
}
[data-card="project-grid-card"]:first-child .card-image {
aspect-ratio: 1.5;
}
[data-card="project-grid-card"] .card-image {
aspect-ratio: 1;
}
html.no-touchevents
[data-card="project-grid-card"]:hover
.card-image
*:is(img, video) {
transform: scale(1.05);
transition-duration: var(--duration-x3);
}
[data-card="project-grid-card"] .card-content {
margin-top: var(--spacing-md);
}
[data-card="project-grid-card"] [class*="block-content-"] .block-desc > * {
line-clamp: 3;
-webkit-line-clamp: 3;
display: -webkit-box;
-webkit-box-orient: vertical;
overflow: hidden;
}
*:is(.project-main, .product-main)
[data-section="list-item-template"]
.sc-inner {
padding-top: calc(var(--gap-section) / 2);
}
[data-section="list-item-template"].project-view {
height: 100svh;
--block-offset: calc(var(--gap-section) / 2 + var(--header-height));
--block-text-size: 25rem;
}
[data-section="list-item-template"] .project-scroll-wrapper {
transform: translateY(calc(var(--content-offset) * -1));
position: relative;
overscroll-behavior: auto !important;
}
[data-section="list-item-template"] .project-scroll {
height: 100svh;
width: 100%;
overflow-y: auto;
scroll-snap-type: y mandatory;
scrollbar-width: none;
scroll-behavior: smooth;
overscroll-behavior: auto !important;
}
[data-section="list-item-template"] .project-scroll-item {
padding: var(--block-offset) 0;
position: relative;
text-align: center;
scroll-snap-align: start;
display: grid;
column-gap: var(--spacing-xl);
grid-template-columns: var(--block-text-size) 1fr var(--block-text-size);
height: 100svh;
width: 100%;
}
[data-section="list-item-template"] .project-scroll-item .item-media,
[data-section="list-item-template"] .project-scroll-item .item-media-slider {
grid-column: 2;
aspect-ratio: 1.3333333333;
align-self: flex-end;
justify-self: center;
width: 100%;
max-height: calc(100svh - var(--block-offset) * 2);
}
[data-section="list-item-template"] .project-scroll-item .item-media-slider {
--bottom-offset: var(--spacing-xl);
}
[data-section="list-item-template"]
.project-scroll-item
.item-media-slider
*[class*="swiper-button-"]:after {
color: var(--color-light-brown);
}
.project-scroll-item
.item-media-slider:has(.swiper-slide-active .dark)
*[class*="swiper-button-"]:after,
.project-scroll-item
.item-media-slider:has(.swiper-slide-active .dark)
.swiper-pagination,
.project-slider-item
.item-media-slider:has(.swiper-slide-active .dark)
*[class*="swiper-button-"]:after,
.project-slider-item
.item-media-slider:has(.swiper-slide-active .dark)
.media-swiper-pagination {
color: var(--color-white);
}
[data-section="list-item-template"] .item-media-slider .media {
height: 100%;
}
[data-section="list-item-template"] .item-media-slider .media *:is(img, video) {
position: static;
width: auto;
height: 100%;
}
[data-section="list-item-template"] .project-scroll-item .block-desc > * {
line-clamp: 5;
-webkit-line-clamp: 5;
display: -webkit-box;
-webkit-box-orient: vertical;
overflow: hidden;
}
[data-section="list-item-template"]
.project-scroll-item
[class*="block-content-"] {
grid-column: 3;
align-self: flex-end;
}
[data-section="list-item-template"] .counter-text {
position: absolute;
bottom: calc(var(--block-offset) - var(--spacing-2sm));
left: 50%;
transform: translate(-50%, 100%);
z-index: 10;
opacity: 0;
transition: var(--duration) ease-in-out;
}
[data-section="list-item-template"] .counter-text.show {
opacity: 1;
}
[data-section="list-item-template"] .scroll-arrow {
position: absolute;
right: 0;
bottom: var(--spacing-md);
z-index: 10;
}
[data-section="list-item-template"] .scroll-arrow .ic {
color: var(--color-light-brown);
font-size: var(--icon-size-md);
}
[data-card="product-grid-card"] .card-container {
--gap-x: var(--page-grid-gutter);
margin-bottom: var(--spacing-md);
}
[data-card="product-grid-card"] .card-container .media {
height: min(55rem, 38.1944444444vw);
}
/* 2 Items */
[data-card="product-grid-card"] .swiper-slide:first-child {
width: 66.6666666667% !important;
}
[data-card="product-grid-card"]
.swiper-slide:first-child
+ .swiper-slide:last-child {
width: 33.3333333333% !important;
}
/* 3 Items */
[data-card="product-grid-card"]
.swiper-slide:first-child:has(+ * + .swiper-slide:nth-child(3)) {
width: 33.3333333333% !important;
}
[data-card="product-grid-card"] .swiper-slide:nth-child(2) {
width: 33.3333333333% !important;
}
[data-card="product-grid-card"] .swiper-slide:nth-child(3) {
width: 33.3333333333% !important;
}
[data-card="product-grid-card"] .block-desc {
max-width: 40%;
}
/* Timeline */
[data-section="timeline"].bg-cream {
background-color: var(--color-cream);
}
[data-section="timeline"] .container {
height: 100%;
}
[data-section="timeline"] .pc-content {
display: flex;
height: 100%;
overscroll-behavior: auto !important;
}
[data-section="timeline"] .pc-content > * {
width: 50%;
}
[data-section="timeline"] .markers .sc-inner {
display: flex;
flex-direction: column;
grid-gap: var(--spacing-2sm);
justify-content: space-between;
}
[data-section="timeline"] .markers .sc-header {
flex-direction: column;
align-items: flex-start;
grid-gap: var(--spacing-md);
}
.timeline-marker .text-wrapper {
display: block;
position: relative;
height: calc(var(--font-size-h2) * var(--line-height-h2));
}
.timeline-marker span {
display: inline-block;
color: var(--color-light-brown);
}
.timeline-marker span.title {
font-size: clamp(1.2rem, 0.8333333333vw, 1.8rem);
line-height: normal;
font-weight: var(--font-weight-medium);
letter-spacing: var(--letter-spacing-xs);
}
.timeline-marker span.subtitle {
font-size: var(--font-size-h4);
line-height: var(--line-height-h4);
font-weight: var(--font-weight-medium);
letter-spacing: var(--letter-spacing-sm);
}
.timeline-marker.active span {
color: var(--color-brown);
transition: var(--duration) var(--timing-function);
}
.timeline-marker.active span.title {
font-size: var(--font-size-h2);
line-height: var(--line-height-h2);
}
.timeline-marker.active span.subtitle {
font-size: var(--font-size-h3);
line-height: var(--line-height-h3);
}
[data-section="timeline"] .timeline {
overflow-y: auto;
scroll-snap-type: y mandatory;
scrollbar-width: none;
scroll-behavior: smooth;
overscroll-behavior: auto !important;
}
.timeline-item {
--marker-size: 1.4rem;
--left-offset: calc(var(--marker-size) / 2);
padding-top: var(--gap-section);
padding-bottom: var(--spacing-sm);
padding-left: calc(var(--spacing-lg) + var(--left-offset));
scroll-snap-align: center;
position: relative;
}
.timeline-item .marker-circle {
display: block;
width: var(--marker-size);
aspect-ratio: 1;
background-color: var(--color-off-white);
border: 0.1rem solid rgba(var(--color-light-brown-rgb), 0.14);
border-radius: 50%;
position: absolute;
left: 0;
top: var(--gap-section);
z-index: 3;
transition: var(--duration) var(--timing-function);
}
[data-section="timeline"].bg-cream .timeline-item .marker-circle {
background-color: var(--color-cream);
}
.timeline-item:before {
content: "";
position: absolute;
inset: 0;
background-color: var(--color-off-white);
z-index: 1;
opacity: 0.76;
transition: var(--duration) var(--timing-function);
}
[data-section="timeline"].bg-cream .timeline-item:before {
background-color: var(--color-cream);
}
.timeline-item.active::before {
opacity: 0;
}
.timeline-item:after {
content: "";
display: block;
height: 100%;
width: 1px;
background-color: rgba(var(--color-light-brown-rgb), 0.14);
position: absolute;
left: var(--left-offset);
top: var(--gap-section);
z-index: 2;
}
.timeline-item:last-child {
min-height: 100vh;
padding-bottom: var(--gap-section);
}
.timeline-item:last-child:after {
content: none;
}
.timeline-item.active .marker-circle {
background-color: var(--color-brown) !important;
border-color: var(--color-brown);
}
.timeline-item .timeline-ttl {
margin-top: calc(
(var(--font-size-h2) * var(--line-height-h2) - var(--marker-size)) * -1
);
}
.timeline-item .timeline-subttl {
margin-top: var(--spacing-4xs);
}
.timeline-item .entry-content {
margin-top: var(--spacing-sm);
max-width: max(64.7058823529%, 48rem);
}
.timeline-item .timeline-image-wrapper {
margin-top: var(--spacing-lg);
}
.timeline-item .media .media-ttl {
margin-top: var(--spacing-2xs);
}
.timeline-item .media .media-subttl {
margin-top: var(--spacing-6xs);
}
/* Template 1 */
.timeline-item .timeline-image-wrapper.template-1 {
display: flex;
grid-gap: var(--spacing-lg);
}
.timeline-item .timeline-image-wrapper.template-1 .media:nth-child(1) {
width: 30%;
flex-shrink: 0;
}
.timeline-item
.timeline-image-wrapper.template-1
.media:nth-child(1)
.media-src {
aspect-ratio: 3 / 4;
}
.timeline-item .timeline-image-wrapper.template-1 .media:nth-child(2) {
flex-grow: 1;
}
.timeline-item
.timeline-image-wrapper.template-1
.media:nth-child(2)
.media-src {
aspect-ratio: 1.2646153846;
}
/* Template 2 */
.timeline-item .timeline-image-wrapper.template-2 {
display: flex;
grid-gap: var(--spacing-lg);
}
.timeline-item .timeline-image-wrapper.template-2 .media:nth-child(1) {
flex-grow: 1;
}
.timeline-item
.timeline-image-wrapper.template-2
.media:nth-child(1)
.media-src {
aspect-ratio: 1.2646153846;
}
.timeline-item .timeline-image-wrapper.template-2 .media:nth-child(2) {
width: 30%;
flex-shrink: 0;
}
.timeline-item
.timeline-image-wrapper.template-2
.media:nth-child(2)
.media-src {
aspect-ratio: 3 / 4;
}
/* Template 3 */
.timeline-item
.timeline-image-wrapper.template-3
.media:nth-child(1)
.media-src {
aspect-ratio: 1.782729805;
}
/* Template 4 */
.timeline-item .timeline-image-wrapper.template-4 {
display: grid;
grid-template-columns: repeat(3, 1fr);
column-gap: var(--spacing-lg);
row-gap: var(--spacing-lg);
}
.timeline-item .timeline-image-wrapper.template-4 .media-src {
aspect-ratio: 1;
}
/* Media Slider */
[data-section="media-slider"] {
--bottom-offset: var(--spacing-xl);
height: 100dvh;
color: var(--color-white);
}
[data-section="media-slider"] .sc-ttl {
position: absolute;
left: 50%;
top: var(--spacing-lg);
transform: translateX(-50%);
z-index: 2;
}
[data-section="media-slider"] .swiper-slide::before {
content: "";
position: absolute;
inset: 0;
background: linear-gradient(
180deg,
rgba(0, 0, 0, 0) 66.25%,
rgba(0, 0, 0, 0.5) 100%
);
z-index: 10;
}
[data-section="media-slider"] .swiper {
height: 100%;
}
/* Related Items */
[data-section="related-items"] .sc-header {
margin-bottom: var(--spacing-lg);
}
[data-section="related-items"] .card-container {
--column: 3;
--gap-x: var(--page-grid-gutter);
}
[data-section="related-items"] .swiper {
overflow: visible;
}
.product-single-main
[data-section="related-items"]
[data-card="project-grid-card"]
.card-image {
aspect-ratio: 3 / 4;
}
[data-section="related-items"] [data-card="project-grid-card"] .card-image {
aspect-ratio: 1;
}
/* ELEMENT ====================*/
/* Icon List */
.icon-list {
margin-top: var(--spacing-xl);
display: flex;
grid-gap: var(--spacing-sm);
}
.icon-list .icon-item {
width: 19rem;
display: flex;
flex-direction: column;
grid-gap: var(--spacing-2xs);
}
.icon-list .icon-item [class*="icon-illus-"] {
height: 2.2rem;
margin-bottom: var(--spacing-5xs);
background-position: center left;
background-size: contain;
background-repeat: no-repeat;
}
.icon-list .icon-item .icon-illus-array {
background-image: url('data:image/svg+xml,');
}
.icon-list .icon-item .icon-illus-ray {
background-image: url('data:image/svg+xml,');
}
.icon-list .icon-item .icon-illus-craftsmanship {
background-image: url('data:image/svg+xml,');
}
.icon-list .icon-item .icon-illus-quality {
background-image: url('data:image/svg+xml,');
}
.icon-list .icon-item .icon-illus-sustainability {
background-image: url('data:image/svg+xml,');
}
/* Hero Banner */
[data-section="hero-banner"]:first-child {
padding-top: 0;
}
[data-section="hero-banner"] .banner-media {
position: relative;
height: 100%;
}
[data-section="hero-banner"] .banner-media::before {
content: "";
position: absolute;
inset: 0;
background: linear-gradient(
180deg,
rgba(0, 0, 0, 0) 0%,
rgba(0, 0, 0, 0.6) 100%
);
z-index: 1;
}
[data-section="hero-banner"] [class*="block-content-"] {
position: absolute;
left: 50%;
bottom: var(--spacing-xl);
transform: translateX(-50%);
z-index: 2;
width: calc(100% - var(--spacing-container) * 2);
}
[data-section="hero-banner"] [class*="block-content-"] .block-desc > * {
max-width: 33.33vw;
}
[data-section="hero-banner"] .scroll-arrow {
position: absolute;
bottom: var(--spacing-md);
right: var(--spacing-container);
z-index: 2;
}
[data-section="hero-banner"] .scroll-arrow .ic::before {
color: #ccb0a8;
font-size: var(--icon-size-md);
}
/* PAGE */
/* PAGE: INDEX */
/* Content Template 1 */
[data-section="content-template-1"] {
background-color: var(--color-cream);
}
[data-section="content-template-1"] .content {
display: grid;
grid-template-columns: repeat(6, 1fr);
grid-template-rows: auto auto;
column-gap: var(--page-grid-gutter);
row-gap: var(--page-grid-gutter);
}
[data-section="content-template-1"] .block-media-wrapper {
position: relative;
width: 100%;
height: 100%;
}
/* Block 1 */
[data-section="content-template-1"] .block[data-block="1"] {
grid-column: span 3;
display: flex;
flex-direction: column;
justify-content: center;
}
[data-section="content-template-1"]
.block[data-block="1"]
[class*="block-content-"] {
max-width: 37.8rem;
}
/* Block 2 */
[data-section="content-template-1"] .block[data-block="2"] {
grid-column: span 3;
aspect-ratio: 1;
}
/* Block 3 */
[data-section="content-template-1"] .block[data-block="3"] {
grid-column: span 6;
display: flex;
grid-gap: var(--page-grid-gutter);
}
[data-section="content-template-1"]
.block[data-block="3"]
.block-media-wrapper:first-child {
width: calc((100% - var(--page-grid-gutter)) / 2);
height: auto;
aspect-ratio: 1.6;
flex-shrink: 0;
}
[data-section="content-template-1"]
.block[data-block="3"]
.block-media-wrapper:nth-child(2) {
width: 22.7272727273%;
height: auto;
aspect-ratio: 3 / 4;
flex-shrink: 0;
}
[data-section="content-template-1"]
.block[data-block="3"]
[class*="block-content-"]:last-child {
align-self: flex-end;
}
/* Block 4 */
[data-section="content-template-1"] .block[data-block="4"] {
grid-column: span 2;
grid-row: 3;
}
/* PAGE: ABOUT */
/* Content Template 2 */
[data-section="content-template-2"] {
background-color: var(--color-cream);
}
[data-section="content-template-2"] .content {
display: flex;
grid-gap: var(--page-grid-gutter);
}
[data-section="content-template-2"] .content > * {
width: calc((100% - var(--page-grid-gutter)) / 2);
}
[data-section="content-template-2"] .block[data-block="1"] {
position: sticky;
top: 0;
padding-top: var(--spacing-6xl);
height: fit-content;
}
[data-section="content-template-2"]
.block[data-block="1"]
[class*="block-content-"] {
max-width: max(30.2777777778vw, 43.6rem);
}
[data-section="content-template-2"] .block[data-block="1"] .block-ttl > * {
font-size: var(--font-size-h2);
line-height: var(--line-height-h2);
letter-spacing: var(--letter-spacing-sm);
font-weight: var(--font-weight-medium);
}
[data-section="content-template-2"] .block-media-wrapper {
aspect-ratio: 1.3333333333;
}
[data-section="content-template-2"]
.icon-list
.icon-item
[class*="icon-illus-"] {
height: 3.2rem;
}
/* Content Template 3 */
[data-section="content-template-3"] {
background-color: var(--color-cream);
}
[data-section="content-template-3"] [class*="block-content-"] {
margin-bottom: var(--spacing-xl);
}
[data-section="content-template-3"] .card-container {
--column: 3;
--gap-y: var(--spacing-2sm);
--gap-x: var(--page-grid-gutter);
}
[data-section="content-template-3"] .card-container:not(:last-child) {
margin-bottom: var(--spacing-5xl);
}
[data-card="team"] .card-media {
aspect-ratio: 3/ 4;
margin-bottom: var(--spacing-2sm);
}
[data-card="team"] .card-content {
grid-gap: var(--spacing-6xs);
}
/* PAGE: PROJECT SINGLE */
/* Content Template 4 */
[data-section="content-template-4"] .content {
--block-gap: var(--spacing-5xl);
display: flex;
flex-direction: column;
grid-gap: var(--block-gap);
}
.product-single-main [data-section="content-template-4"] .content {
--block-gap: var(--spacing-xl);
}
/* Block-1 */
[data-section="content-template-4"] .block[data-block="1"] {
display: grid;
grid-template-columns: repeat(6, 1fr);
column-gap: var(--page-grid-gutter);
row-gap: var(--spacing-4xl);
}
[data-section="content-template-4"] .block[data-block="1"] .block-table {
grid-column: span 2;
}
[data-section="content-template-4"]
.block[data-block="1"]
.block-table
.block-table-item {
display: flex;
grid-gap: var(--spacing-xs);
font-weight: var(--font-weight-medium);
max-width: 35rem;
}
[data-section="content-template-4"] .block-table-item .block-table-item-title {
width: 9rem;
flex-shrink: 0;
}
[data-section="content-template-4"] .block[data-block="1"] .block-text {
grid-column: span 4;
}
/* Block-2 */
[data-section="content-template-4"] .block[data-block="2"] {
display: flex;
grid-gap: var(--page-grid-gutter);
}
[data-section="content-template-4"] .block[data-block="2"] .media-wrapper {
flex-grow: 1;
}
[data-section="content-template-4"]
.block[data-block="2"]
.media-wrapper
.media {
aspect-ratio: 1.3333333333;
}
[data-section="content-template-4"] .media-wrapper .media-caption {
margin-top: var(--spacing-2xs);
}
/* Block-3 */
[data-section="content-template-4"] .block[data-block="3"] {
display: grid;
grid-template-columns: repeat(6, 1fr);
column-gap: var(--page-grid-gutter);
}
[data-section="content-template-4"] .block[data-block="3"] .entry-content {
grid-column: 2 / span 4;
}
/* Block-4 */
[data-section="content-template-4"] .block[data-block="4"] {
display: grid;
grid-template-columns: repeat(6, 1fr);
column-gap: var(--page-grid-gutter);
}
[data-section="content-template-4"] .block[data-block="4"] .media-wrapper {
grid-column: span 4;
}
[data-section="content-template-4"]
.block[data-block="4"]
.media-wrapper
.media {
aspect-ratio: 1.7766393443;
}
[data-section="content-template-4"]
.block[data-block="4"]
.media-wrapper
.media
*:is(img, video) {
position: static;
object-position: center left;
width: auto;
height: 100%;
margin-left: unset;
}
[data-section="content-template-4"] .block[data-block="4"] .entry-content {
grid-column: span 2;
align-self: flex-end;
}
/* Block-5 */
[data-section="content-template-4"] .block[data-block="5"] {
display: grid;
grid-template-columns: repeat(6, 1fr);
grid-template-rows: auto auto;
column-gap: var(--page-grid-gutter);
row-gap: var(--block-gap);
}
[data-section="content-template-4"] .block[data-block="5"] .entry-content {
grid-column: span 2;
}
[data-section="content-template-4"] .block[data-block="5"] .media-container {
grid-row: 2;
grid-column: 1 / span 2;
display: flex;
grid-gap: var(--page-grid-gutter);
align-self: flex-end;
}
[data-section="content-template-4"]
.block[data-block="5"]
.media-container
.media-wrapper
.media {
aspect-ratio: 3 / 4;
}
[data-section="content-template-4"] .block[data-block="5"] > .media-wrapper {
grid-column: span 2;
}
[data-section="content-template-4"] .block[data-block="5"] > .media-wrapper {
grid-column: 4 / span 3;
grid-row: 1 / span 2;
}
[data-section="content-template-4"]
.block[data-block="5"]
> .media-wrapper
.media {
aspect-ratio: 1;
}
[data-section="content-template-4"]
.block[data-block="5"]
.media-wrapper
.media
*:is(img, video) {
position: static;
object-position: center left;
width: auto;
height: 100%;
margin-right: unset;
}
/* PAGE: WORKSHOP */
/* Content Template 5 */
[data-section="content-template-5"] .content {
display: flex;
grid-gap: var(--page-grid-gutter);
}
[data-section="content-template-5"] .content > * {
width: calc((100% - var(--page-grid-gutter)) / 2);
}
[data-section="content-template-5"] .sticky-block {
position: sticky;
top: 0;
padding-top: var(--spacing-8xl);
height: fit-content;
}
[data-section="content-template-5"] [class*="block-content-"] {
max-width: max(30.2777777778vw, 43.6rem);
}
[data-section="content-template-5"] .static-block {
--block-gap: var(--spacing-xl);
display: flex;
flex-direction: column;
grid-gap: var(--block-gap);
}
[data-section="content-template-5"] .block-subttl {
margin-bottom: var(--spacing-5xs);
}
[data-section="content-template-5"] .block[data-block="1"] .media {
aspect-ratio: 1;
margin-bottom: var(--spacing-2sm);
}
[data-section="content-template-5"] .block[data-block="1"] .block-desc > * {
max-width: 45rem;
}
[data-section="content-template-5"] .block-divider {
background-color: rgba(var(--color-dark-brown-rgb), 0.14);
}
[data-section="content-template-5"] .block > .block-ttl {
margin-bottom: var(--spacing-lg);
}
[data-section="content-template-5"] .material-list {
display: grid;
grid-template-columns: repeat(5, 1fr);
column-gap: var(--spacing-lg);
row-gap: var(--spacing-lg);
}
[data-section="content-template-5"] .material-item {
display: flex;
flex-direction: column;
grid-gap: var(--spacing-5xs);
}
[data-section="content-template-5"] .material-item-media {
aspect-ratio: 1;
}
[data-section="content-template-5"] .technique-list {
display: flex;
grid-gap: var(--page-grid-gutter);
}
.technique-list .technique-item{
flex: 1 1 calc((100% - var(--page-grid-gutter)) / 2);
}
[data-section="content-template-5"] .technique-item-media {
aspect-ratio: 3 / 4;
margin-bottom: var(--spacing-2sm);
}
/* PAGE: CONTACT */
/* Contact */
[data-section="contact"] .content {
margin-top: var(--spacing-xl);
display: grid;
grid-template-columns: repeat(6, 1fr);
column-gap: var(--page-grid-gutter);
}
[data-section="contact"] .map-block {
grid-column: span 2;
}
[data-section="contact"] .form-block {
grid-column: 4 / span 3;
}
/* [data-section="contact"] .map-media {
aspect-ratio: 1.6653225806;
} */
[data-section="contact"] .contact-info {
display: flex;
flex-direction: column;
grid-gap: var(--spacing-lg);
margin-top: var(--spacing-xl);
}
[data-section="contact"] .contact-info .location .button {
margin-top: var(--spacing-sm);
transition: var(--duration-x2) var(--timing-function);
}
[data-section="contact"] .contact-info .location address {
margin-top: var(--spacing-5xs);
text-wrap: balance;
}
[data-section="contact"] .contact-list {
display: flex;
flex-direction: column;
grid-gap: var(--spacing-3xs);
color: var(--color-brown);
}
[data-section="contact"] .contact-list a {
display: flex;
align-items: center;
grid-gap: var(--spacing-2xs);
}
[data-section="contact"] .contact-list .ic::before {
font-size: var(--icon-size-2xs);
}
[data-section="contact"] .social a {
color: var(--color-brown);
}
[data-section="contact"] .contact-info .social .ic {
font-size: var(--icon-size-xs);
}
[data-section="contact"] .form-block form,
[data-section="contact"] .form-block {
--column-gap: var(--spacing-lg);
--row-gap: var(--spacing-lg);
display: flex;
flex-direction: column;
grid-gap: var(--spacing-xl);
}
[data-section="contact"] .form-block form .fields {
column-gap: var(--column-gap);
row-gap: var(--row-gap);
}
[data-section="contact"] .form-block [class*="block-content-"] {
max-width: 64.53125%;
}
[data-section="contact"] .form-block textarea::-webkit-input-placeholder {
/* position: absolute;
bottom: var(--spacing-3xs);
left: 0; */
text-align: left;
transform: translateY(
calc(
(var(--input-height) * 2) -
(var(--font-size-body) * var(--line-height-body)) -
var(--spacing-2xs)
)
);
}
/* PAGE: TERMS */
/* Terms */
[data-section="terms"] .container {
display: grid;
grid-template-columns: repeat(6, 1fr);
grid-template-rows: auto auto;
column-gap: var(--page-grid-gutter);
row-gap: var(--spacing-xl);
}
[data-section="terms"] .sc-ttl {
grid-column: 3 / span 4;
}
[data-section="terms"] .tab-links {
grid-column: span 2;
grid-row: 2;
}
[data-section="terms"] .tab-links .tab a {
display: flex;
align-items: center;
height: calc(var(--font-size-h2) * var(--line-height-h2));
font-size: var(--font-size-h3);
line-height: var(--line-height-h3);
font-weight: var(--font-weight-medium);
letter-spacing: var(--letter-spacing-sm);
text-transform: uppercase;
color: var(--color-light-brown);
}
[data-section="terms"] .tab-links .tab a.active {
font-size: var(--font-size-h2);
line-height: var(--line-height-h2);
color: var(--color-dark-brown);
}
[data-section="terms"] .content {
grid-column: 3 / span 4;
grid-row: 2;
}
[data-section="terms"] .content-ttl {
margin-bottom: var(--spacing-md);
}
[data-section="terms"] .content-ttl > * {
font-size: var(--font-size-h2);
line-height: var(--line-height-h2);
letter-spacing: var(--letter-spacing-sm);
font-weight: var(--font-weight-medium);
text-transform: uppercase;
}
/* PAGE: NOT FOUND */
/* Not Found */
[data-section="not-found"] {
height: 100svh;
width: 100vw;
padding-top: 0 !important;
}
[data-section="not-found"] .cover::before {
content: "";
position: absolute;
inset: 0;
background: linear-gradient(
0deg,
rgba(0, 0, 0, 0.16) 0%,
rgba(0, 0, 0, 0.16) 100%
);
z-index: 1;
}
[data-section="not-found"] .container {
position: absolute;
top: 35%;
z-index: 2;
}
[data-section="not-found"] .container,
[data-section="not-found"] .container .block-ttl > *,
[data-section="not-found"] .button {
--underline-color: var(--color-white);
--button-hover-color: var(--color-white);
color: var(--color-white) !important;
}
[data-section="not-found"] [class*="block-content-"] {
grid-gap: var(--spacing-md);
}
[data-section="not-found"] .block-desc > * {
max-width: 36rem;
text-wrap: balance;
}
[data-section="not-found"] [class*="block-content-"] .button {
margin-top: var(--spacing-3xs);
}
html.no-touchevents [data-section="not-found"] .social a:hover {
color: var(--color-white);
opacity: 0.5;
}