@font-face {
font-family: 'Brygada 1918';
font-style: normal;
font-weight: 400;
font-display: swap;
src: url(//www.denbrugwachter.be/wp-content/themes/coemans-starter/assets/fonts/brygada-1918-latin-ext.woff2) format('woff2');
unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
font-family: 'Brygada 1918';
font-style: normal;
font-weight: 400;
font-display: swap;
src: url(//www.denbrugwachter.be/wp-content/themes/coemans-starter/assets/fonts/brygada-1918-latin.woff2) format('woff2');
unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
font-family: 'Geist';
font-style: normal;
font-weight: 400;
font-display: swap;
src: url(//www.denbrugwachter.be/wp-content/themes/coemans-starter/assets/fonts/geist-latin-ext.woff2) format('woff2');
unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
font-family: 'Geist';
font-style: normal;
font-weight: 400;
font-display: swap;
src: url(//www.denbrugwachter.be/wp-content/themes/coemans-starter/assets/fonts/geist-latin.woff2) format('woff2');
unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}*,
*::before,
*::after {
box-sizing: border-box;
} html {
-moz-text-size-adjust: none;
-webkit-text-size-adjust: none;
text-size-adjust: none;
} body,
h1, h2, h3, h4, h5, h6,
p,
figure,
blockquote,
dl, dd {
margin: 0;
} ul[role='list'],
ol[role='list'] {
list-style: none;
padding: 0;
} body {
min-height: 100vh;
line-height: 1.5;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
} h1, h2, h3, h4,
button, input, label {
line-height: 1.2;
} h1, h2, h3, h4 {
text-wrap: balance;
}
p, li {
text-wrap: pretty;
} a:not([class]) {
text-decoration-skip-ink: auto;
color: currentColor;
} img,
picture,
video,
canvas,
svg {
display: block;
max-width: 100%;
} input,
button,
textarea,
select {
font: inherit;
color: inherit;
}
textarea:not([rows]) {
min-height: 10em;
} :target {
scroll-margin-block: 5ex;
} @media (prefers-reduced-motion: reduce) {
*,
*::before,
*::after {
animation-duration: 0.01ms !important;
animation-iteration-count: 1 !important;
transition-duration: 0.01ms !important;
scroll-behavior: auto !important;
}
}:root { --color-primary:        #191919;
--color-primary-hover:  #343434;
--color-accent-dark:    #A98E4E;
--color-accent-light:   #E1C480;
--color-bg:             #FFFFFF;
--color-bg-alt:         #F3F3F3;
--color-text-dark:      #666666;
--color-text-light:     #AEAEAE;
--color-text-white:     #FFFFFF;
--color-text-muted:     #858585;
--color-border:         #D3D3D3;
--color-decorative:     #EBEBEB; --font-heading: 'Brygada 1918', serif;
--font-body:    'Geist', sans-serif;
--fs-h1:    4rem; --fs-h2:    3rem; --fs-h2-sm: 2.5rem; --fs-h3:    2rem; --fs-h3-sm: 1.75rem; --fs-h4:    1.3125rem; --fs-body:  1.0625rem; --fs-small: 0.875rem; --lh-tight:  1.2;
--lh-normal: 1.5;
--fw-regular:  400;
--fw-semibold: 600; --space-0:  0;
--space-1:  0.25rem;
--space-2:  0.5rem;
--space-3:  0.75rem;
--space-4:  1rem;
--space-5:  1.5rem;
--space-6:  2rem;
--space-8:  3rem;
--space-10: 4rem;
--space-12: 6rem;
--space-14: 8rem; --container-max: 1496px;
--container-pad: clamp(1rem, 0.1rem + 3vw, 2.5rem);
--header-height: 128px; --radius-pill: 999px; --transition-fast: 120ms ease;
--transition-base: 200ms ease;
--transition-slow: 400ms ease;
} @media (max-width: 1023px) {
:root {
--header-height: 88px;
}
}  body {
font-family: var(--font-body);
font-size: var(--fs-body);
line-height: var(--lh-normal);
color: var(--color-text-dark);
background: var(--color-bg); overflow-x: clip;
}
div#wpadminbar {
display: none;
}
h1, h2, h3, h4, h5, h6 {
color: var(--color-primary);
margin-bottom: var(--space-4);
}
h1, h2, h3 {
font-family: var(--font-heading);
font-weight: var(--fw-regular);
line-height: var(--lh-tight);
}
h1 { font-size: var(--fs-h1); }
h2 { font-size: var(--fs-h2); }
h3 { font-size: var(--fs-h3); }
h4 {
font-family: var(--font-body);
font-size: var(--fs-h4);
font-weight: var(--fw-semibold);
line-height: 1.4;
}
p {
margin-bottom: var(--space-4);
}
a {
color: var(--color-accent-dark);
text-decoration: none;
transition: color var(--transition-fast);
}
a:hover {
color: var(--color-accent-light);
text-decoration: underline;
}
hr {
border: 0;
border-top: 1px solid var(--color-border);
margin: var(--space-6) 0;
}
.container {
max-width: var(--container-max);
margin: 0 auto;
padding-inline: var(--container-pad);
}
.container--narrow {
max-width: 760px;
}
.hidden_label {
display: none !important;
}  .screen-reader-text {
position: absolute;
width: 1px;
height: 1px;
padding: 0;
margin: -1px;
overflow: hidden;
clip: rect(0, 0, 0, 0);
white-space: nowrap;
border: 0;
} .skip-link:focus {
position: fixed;
top: var(--space-2);
left: var(--space-2);
z-index: 100;
width: auto;
height: auto;
margin: 0;
padding: var(--space-3) var(--space-5);
overflow: visible;
clip: auto;
background: var(--color-primary);
color: var(--color-text-white);
border-radius: var(--radius-pill);
font-family: var(--font-body);
font-size: var(--fs-body);
text-decoration: none;
} .btn {
display: inline-block;
padding: var(--space-3) var(--space-5);
border-radius: var(--radius-pill);
font-family: var(--font-heading);
font-size: var(--fs-h4);
font-weight: var(--fw-regular);
line-height: 1.2;
border: 1px solid transparent;
cursor: pointer;
text-decoration: none;
transition: background var(--transition-base),
color var(--transition-base),
border-color var(--transition-base),
transform var(--transition-base);
}
.btn:hover,
.btn:focus-visible {
text-decoration: none;
transform: translateY(-1px);
} .btn--primary {
background: var(--color-primary);
color: var(--color-text-white);
border-color: var(--color-primary);
}
.btn--primary:hover {
background: var(--color-primary-hover);
border-color: var(--color-primary-hover);
color: var(--color-text-white);
}
.btn--primary-outline {
background: transparent;
color: var(--color-primary);
border-color: var(--color-primary);
}
.btn--primary-outline:hover {
background: var(--color-primary-hover);
border-color: var(--color-primary-hover);
color: var(--color-text-white);
} .btn--accent {
background: var(--color-accent-dark);
color: var(--color-text-white);
border-color: var(--color-accent-dark);
}
.btn--accent:hover {
background: var(--color-accent-light);
border-color: var(--color-accent-light);
color: var(--color-text-white);
}
.btn--accent-outline {
background: transparent;
color: var(--color-accent-dark);
border-color: var(--color-accent-dark);
}
.btn--accent-outline:hover {
background: var(--color-accent-light);
border-color: var(--color-accent-light);
color: var(--color-text-white);
} .btn--light-outline {
background: transparent;
color: var(--color-text-white);
border-color: var(--color-text-white);
}
.btn--light-outline:hover {
background: var(--color-text-white);
border-color: var(--color-text-white);
color: var(--color-primary);
}
@media (prefers-reduced-motion: reduce) {
.btn,
.btn:hover,
.btn:focus-visible {
transform: none;
transition: none;
}
} .block {
padding: var(--space-10) 0;
}
.block + .block {
padding-top: 0;
}
.block__heading {
margin-bottom: var(--space-5);
}
.block__content p:last-child {
margin-bottom: 0;
} .block--dark {
background: var(--color-primary);
color: var(--color-text-light);
}
.block--dark .block__heading,
.block--dark h1, .block--dark h2, .block--dark h3, .block--dark h4 {
color: var(--color-accent-light);
}
.block--dark a {
color: var(--color-accent-light);
} .block--white {
background: var(--color-bg);
color: var(--color-text-dark);
}
.block--white .block__heading,
.block--white h1, .block--white h2, .block--white h3 {
color: var(--color-accent-dark);
} .block--grey {
background: var(--color-bg-alt);
color: var(--color-text-dark);
}
.block--grey .block__heading,
.block--grey h1, .block--grey h2, .block--grey h3 {
color: var(--color-primary);
} .faq-list {
border-top: 1px solid var(--color-border);
}
.faq-item {
border-bottom: 1px solid var(--color-border);
}
.faq-item__question {
display: flex;
align-items: center;
justify-content: space-between;
gap: var(--space-4);
padding: var(--space-5) 0;
cursor: pointer;
list-style: none;
color: var(--color-accent-dark);
font-weight: var(--fw-semibold);
font-size: var(--fs-h4);
}
.faq-item__question::-webkit-details-marker {
display: none;
}
.faq-item__icon {
position: relative;
width: 20px;
height: 20px;
flex: 0 0 20px;
}
.faq-item__icon::before,
.faq-item__icon::after {
content: "";
position: absolute;
background: var(--color-accent-dark);
top: 50%;
left: 50%;
transition: transform var(--transition-base);
}
.faq-item__icon::before {
width: 14px;
height: 2px;
transform: translate(-50%, -50%);
}
.faq-item__icon::after {
width: 2px;
height: 14px;
transform: translate(-50%, -50%);
}
.faq-item[open] .faq-item__icon::after {
transform: translate(-50%, -50%) scaleY(0);
}
.faq-item__answer {
padding: 0 0 var(--space-5);
color: var(--color-text-dark);
}
.faq-item__answer p:last-child {
margin-bottom: 0;
} .image-content {
display: grid;
grid-template-columns: 1fr;
gap: var(--space-6);
align-items: center;
}
@media (min-width: 768px) {
.image-content {
grid-template-columns: 1fr 1fr;
gap: var(--space-10);
}
}
.image-content__media img {
width: 100%;
height: auto;
}
.image-content__text .block__heading {
margin-bottom: var(--space-4);
}
.image-content__cta {
margin-top: var(--space-5);
} @media (min-width: 768px) {
.block--image-right .image-content__media  { grid-column: 2; grid-row: 1; }
.block--image-right .image-content__text   { grid-column: 1; grid-row: 1; }
} .card {
background: var(--color-bg-alt);
padding: var(--space-5);
} input[type="text"],
input[type="email"],
input[type="url"],
input[type="tel"],
input[type="number"],
input[type="search"],
input[type="password"],
input[type="date"],
input[type="time"],
textarea,
select {
width: 100%;
padding: var(--space-3) var(--space-4);
border: 1px solid var(--color-border);
background: var(--color-bg);
color: var(--color-text-dark);
font-family: var(--font-body);
font-size: var(--fs-body);
line-height: var(--lh-normal);
}
input:focus,
textarea:focus,
select:focus {
outline: 2px solid var(--color-accent-dark);
outline-offset: 2px;
border-color: var(--color-accent-dark);
}   .default-hero {
position: relative;
height: 540px;
display: grid;
place-items: center;
overflow: hidden;
color: var(--color-text-white);
background: var(--color-primary); padding-top: calc(var(--header-height) + var(--space-12));
padding-bottom: var(--space-6);
}
@media (max-width: 767px) {
.default-hero {
height: 420px;
}
}
.default-hero__image,
.default-hero__overlay {
position: absolute;
inset: 0;
}
.default-hero__image {
z-index: 0;
width: 100%;
height: 100%;
object-fit: cover;
transform-origin: center;
animation: hero-settle 2.8s cubic-bezier(0.16, 1, 0.3, 1) both;
}
.default-hero__overlay {
z-index: 1;
background: linear-gradient(to bottom,
rgba(0, 0, 0, 0.25) 0%,
rgba(0, 0, 0, 0.55) 100%);
pointer-events: none;
}
.default-hero__content {
position: relative;
z-index: 2;
text-align: center;
}
.default-hero__title {
margin: 0 auto var(--space-3);
max-width: 900px;
color: var(--color-text-white);
font-family: var(--font-heading);
font-weight: var(--fw-regular); font-size: clamp(2.5rem, 5vw + 1rem, var(--fs-h1));
line-height: 1.15;
}
.default-hero__subtitle {
margin: 0 auto;
max-width: 720px;
color: var(--color-accent-light);
font-size: var(--fs-body);
line-height: 1.5;
} @keyframes hero-settle {
from { transform: scale(1.08); }
to   { transform: scale(1); }
}
@media (prefers-reduced-motion: reduce) {
.default-hero__image {
animation: none;
}
} .bb-detail {
padding-block: var(--space-12);
}
.bb-detail__inner {
display: grid;
grid-template-columns: minmax(0, 1fr);
gap: var(--space-6);
align-items: start;
}
@media (min-width: 1024px) {
.bb-detail__inner {
grid-template-columns: minmax(280px, 1fr) minmax(0, 2fr);
gap: var(--space-8);
}
} .bb-card {
background: var(--color-bg-alt);
padding: var(--space-6);
display: flex;
flex-direction: column;
}
.bb-card__title {
margin: 0 0 var(--space-5);
color: var(--color-primary);
font-size: var(--fs-h3);
}
.bb-card__list {
list-style: none;
margin: 0 0 var(--space-6);
padding: 0;
display: flex;
flex-direction: column;
gap: var(--space-2);
}
.bb-card__item {
position: relative;
padding-left: var(--space-5);
color: var(--color-text-dark);
font-size: var(--fs-body);
line-height: 1.5;
}
.bb-card__item::before {
content: '\2713'; position: absolute;
left: 0;
top: 0.15em;
color: var(--color-accent-dark);
font-weight: var(--fw-semibold);
} .bb-card__price-row {
display: flex;
align-items: flex-end;
justify-content: space-between;
flex-wrap: wrap;
gap: var(--space-3);
margin-bottom: var(--space-5);
}
.bb-card__price {
display: flex;
align-items: baseline;
gap: var(--space-2);
color: var(--color-primary);
font-family: var(--font-heading);
line-height: 1.2;
}
.bb-card__price-amount {
font-size: var(--fs-h2);
}
.bb-card__price-unit { font-family: var(--font-body); text-transform: lowercase;
}
.bb-card__breakfast {
margin: 0;
display: inline-flex;
align-items: center;
gap: var(--space-2);
color: #1f9d55; font-size: var(--fs-small);
padding-bottom: 8px;
}
.bb-card__check {
display: inline-flex;
align-items: center;
justify-content: center;
width: 1.1em;
height: 1.1em;
color: inherit;
font-weight: var(--fw-semibold);
} .bb-card__price-prefix {
font-family: var(--font-body);
font-size: var(--fs-small);
color: var(--color-text-dark);
text-transform: lowercase;
} .bb-card__rates {
margin-bottom: var(--space-5);
padding-top: var(--space-4);
border-top: 1px solid var(--color-border);
}
.bb-card__rates-title {
margin: 0 0 var(--space-3);
font-family: var(--font-body);
font-size: var(--fs-small);
color: var(--color-text-dark);
}
.bb-card__rates-list {
list-style: none;
margin: 0;
padding: 0;
display: flex;
flex-direction: column;
gap: var(--space-2);
}
.bb-card__rate {
display: flex;
align-items: baseline;
justify-content: space-between;
gap: var(--space-4);
padding-bottom: var(--space-2);
border-bottom: 1px solid var(--color-border);
}
.bb-card__rate:last-child {
border-bottom: 0;
padding-bottom: 0;
}
.bb-card__rate-label {
color: var(--color-text-dark);
font-size: var(--fs-body);
}
.bb-card__rate-price {
font-family: var(--font-heading);
color: var(--color-primary);
font-size: var(--fs-h4);
white-space: nowrap;
}
.bb-card__button {
align-self: stretch;
display: inline-flex;
align-items: center;
justify-content: center;
gap: var(--space-3);
text-align: center;
}
.bb-card__button-icon {
display: inline-flex;
color: inherit;
}
.bb-card__button-icon svg {
display: block;
width: 22px;
height: 22px;
} .bb-gallery {
display: flex;
flex-direction: column;
gap: var(--space-2);
}
.bb-gallery__main {
margin: 0;
overflow: hidden;
aspect-ratio: 16 / 10;
}
.bb-gallery__link {
display: block;
width: 100%;
height: 100%;
cursor: zoom-in;
line-height: 0;
}
.bb-gallery__link:hover {
text-decoration: none;
}
.bb-gallery__main img {
width: 100%;
height: 100%;
object-fit: cover;
display: block;
}
.bb-gallery__thumbs {
display: grid;
grid-template-columns: repeat(4, minmax(0, 1fr));
gap: var(--space-2);
}
.bb-gallery__thumb {
margin: 0;
overflow: hidden;
aspect-ratio: 16 / 10;
position: relative;
}
.bb-gallery__thumb img {
width: 100%;
height: 100%;
object-fit: cover;
display: block;
transition: transform var(--transition-base);
}
.bb-gallery__thumb:hover img {
transform: scale(1.04);
} .bb-gallery__more {
position: absolute;
inset: 0;
display: flex;
align-items: center;
justify-content: center;
background: rgba(0, 0, 0, 0.55);
color: var(--color-text-white);
font-family: var(--font-heading);
font-size: var(--fs-h3);
line-height: 1;
pointer-events: none;
transition: background-color var(--transition-base);
}
.bb-gallery__thumb:hover .bb-gallery__more {
background: rgba(0, 0, 0, 0.4);
} .bb-booking {
position: relative;
background: var(--color-bg-alt);
padding-block: var(--space-12);
overflow: hidden;
} .bb-booking::before {
content: '';
position: absolute;
bottom: 0;
left: 0;
width: 1315px;
height: 430px;
background: url(//www.denbrugwachter.be/wp-content/themes/coemans-starter/assets/img/booking-twirl.svg) no-repeat center / contain;
pointer-events: none;
z-index: 0;
animation: booking-twirl-drift 16s ease-in-out infinite;
will-change: transform, opacity;
}
@keyframes booking-twirl-drift {
0%, 100% {
transform: translate(0, 0) scale(1);
opacity: 1;
}
50% {
transform: translate(28px, -12px) scale(1.025);
opacity: 0.85;
}
}
@media (prefers-reduced-motion: reduce) {
.bb-booking::before {
animation: none;
}
}
.bb-booking__inner {
position: relative;
z-index: 1;
text-align: center;
}
.bb-booking__title {
margin: 0 0 var(--space-8);
color: var(--color-primary);
font-size: var(--fs-h2);
}
.bb-booking__widget {
max-width: 1024px;
margin: 0 auto;
text-align: left;
}
@media (max-width: 767px) {
.bb-gallery__thumbs {
grid-template-columns: repeat(2, minmax(0, 1fr));
}
} .contact-section {
position: relative;
background: var(--color-bg-alt); overflow-x: clip; }
.contact-section__inner {
position: relative;
z-index: 1;
display: grid;
grid-template-columns: minmax(0, 1fr);
gap: var(--space-8); }
@media (min-width: 1024px) {
.contact-section__inner { grid-template-columns: minmax(0, 1fr) minmax(0, 1.5fr);
gap: var(--space-10);
} .contact-info {
padding-left: var(--space-10);
}
} .contact-info {
position: relative;
z-index: 1;
display: flex;
flex-direction: column;
gap: var(--space-5);
padding-block: var(--space-12);
} .contact-info::before {
content: '';
position: absolute;
top: 0;
right: 0;
width: 480px;
height: 273px;
background: url(//www.denbrugwachter.be/wp-content/themes/coemans-starter/assets/img/contact-twirl.svg) no-repeat top right / contain;
pointer-events: none;
z-index: -1;
}
.contact-info__title {
margin: 0;
color: var(--color-primary);
font-size: var(--fs-h3-sm);
}
.contact-info__list {
list-style: none;
margin: 0;
padding: 0;
display: flex;
flex-direction: column;
gap: var(--space-3);
}
.contact-info__item {
display: grid;
grid-template-columns: 24px 1fr;
gap: var(--space-3);
align-items: start;
color: var(--color-text-dark);
}
.contact-info__icon {
display: inline-flex;
align-items: center;
color: var(--color-accent-dark);
margin-top: 2px;
}
.contact-info__icon svg {
display: block;
}
.contact-info__text {
display: flex;
flex-direction: column;
color: var(--color-text-dark);
font-size: var(--fs-body);
line-height: 1.5;
}
a.contact-info__text:hover {
color: var(--color-accent-dark);
text-decoration: none;
} .contact-info__hours-title {
margin: var(--space-3) 0 0;
color: var(--color-primary);
font-size: var(--fs-h3-sm);
}
.contact-info__hours {
display: grid;
grid-template-columns: minmax(80px, max-content) 1fr;
gap: var(--space-2) var(--space-6);
margin: 0;
color: var(--color-text-dark);
}
.contact-info__hours dt {
margin: 0;
color: var(--color-text-dark);
}
.contact-info__hours dd {
margin: 0;
color: var(--color-text-dark);
}
.contact-info__hours-extra {
margin: 0;
color: var(--color-text-muted);
font-size: 17px;
} .contact-feest {
position: relative;
display: block;
margin-top: var(--space-4);
aspect-ratio: 4 / 2.5;
overflow: hidden;
color: var(--color-text-white);
background: var(--color-primary);
isolation: isolate;
}
.contact-feest:hover {
color: var(--color-text-white);
text-decoration: none;
}
.contact-feest__image {
position: absolute;
inset: 0;
width: 100%;
height: 100%;
object-fit: cover;
z-index: -1;
transition: transform var(--transition-base);
}
.contact-feest:hover .contact-feest__image {
transform: scale(1.03);
}
.contact-feest::after {
content: '';
position: absolute;
inset: 0;
background: linear-gradient(to top, rgba(0, 0, 0, 0.55) 0%, rgba(0, 0, 0, 0.15) 60%, rgba(0, 0, 0, 0) 100%);
z-index: 0;
pointer-events: none;
}
.contact-feest__label {
position: absolute;
left: var(--space-5);
right: var(--space-5);
bottom: var(--space-5);
z-index: 1; padding-right: var(--space-10);
font-family: var(--font-body);
font-weight: var(--fw-regular);
font-size: var(--fs-h3-sm);
line-height: 1.2;
} .contact-feest__label::after {
content: '';
position: absolute;
right: 0;
bottom: var(--space-1);
width: 48px;
height: 16px;
background-color: var(--color-accent-light);
-webkit-mask: url(//www.denbrugwachter.be/wp-content/themes/coemans-starter/assets/img/arrow-right.svg) no-repeat center / contain;
mask: url(//www.denbrugwachter.be/wp-content/themes/coemans-starter/assets/img/arrow-right.svg) no-repeat center / contain;
transition: transform var(--transition-base);
}
.contact-feest:hover .contact-feest__label::after {
transform: translateX(4px);
} .contact-form {
position: relative;
background: var(--color-bg); padding: var(--space-12) var(--space-14);
} .contact-form::before {
content: '';
position: absolute;
top: 0;
bottom: 0;
left: 100%;
width: 100vw;
background: inherit;
}
@media (max-width: 1023px) {
.contact-info {
padding-block: var(--space-8) var(--space-4);
}
.contact-form {
padding: var(--space-6);
}
.contact-form::before {
display: none; }
}
.contact-form__title {
margin: 0 0 var(--space-5);
color: var(--color-primary);
font-size: var(--fs-h2-sm);
} :is(.contact-form, .form-section) .gform_button,
:is(.contact-form, .form-section) button[type="submit"],
:is(.contact-form, .form-section) input[type="submit"] {
display: inline-block;
padding: var(--space-3) var(--space-6);
border-radius: var(--radius-pill);
font-family: var(--font-heading);
font-size: var(--fs-h4);
font-weight: var(--fw-regular);
line-height: 1.2;
background: var(--color-accent-dark);
border: 1px solid var(--color-accent-dark);
color: var(--color-text-white);
cursor: pointer;
text-decoration: none;
transition: background var(--transition-base),
color var(--transition-base),
border-color var(--transition-base),
transform var(--transition-base);
}
:is(.contact-form, .form-section) .gform_button:hover,
:is(.contact-form, .form-section) button[type="submit"]:hover,
:is(.contact-form, .form-section) input[type="submit"]:hover,
:is(.contact-form, .form-section) .gform_button:focus-visible,
:is(.contact-form, .form-section) button[type="submit"]:focus-visible,
:is(.contact-form, .form-section) input[type="submit"]:focus-visible {
background: var(--color-accent-light);
border-color: var(--color-accent-light);
color: var(--color-text-white);
transform: translateY(-1px);
text-decoration: none;
} :is(.contact-form, .form-section) .gfield_label {
font-family: var(--font-body);
font-size: var(--fs-body);
font-weight: var(--fw-semibold);
color: var(--color-primary);
margin-bottom: var(--space-2);
}
:is(.contact-form, .form-section) .gform_footer {
margin-top: var(--space-5);
} :is(.contact-form, .form-section) .gform_wrapper {
margin: 0;
} :is(.contact-form, .form-section) .gform_fields {
list-style: none;
margin: 0;
padding: 0;
}
:is(.contact-form, .form-section) .gfield + .gfield {
margin-top: var(--space-5);
}
:is(.contact-form, .form-section) .gform_wrapper textarea {
min-height: 160px;
resize: vertical;
} :is(.contact-form, .form-section) .gfield_required {
margin-left: 2px;
color: var(--color-accent-dark);
}
:is(.contact-form, .form-section) .gfield_description {
margin-top: var(--space-2);
color: var(--color-text-dark);
font-size: var(--fs-small);
} :is(.contact-form, .form-section) .gfield_checkbox,
:is(.contact-form, .form-section) .gfield_radio {
list-style: none;
margin: 0;
padding: 0;
}
:is(.contact-form, .form-section) .gchoice {
display: flex;
align-items: center;
gap: var(--space-2);
}
:is(.contact-form, .form-section) .gchoice input {
width: auto;
} :is(.contact-form, .form-section) .validation_message,
:is(.contact-form, .form-section) .gform_validation_errors {
margin-top: var(--space-2);
font-size: var(--fs-small);
} .has-motion [data-animate],
.has-motion [data-animate-on-scroll] {
opacity: 0;
}
.has-motion [data-animate="fade-up"],
.has-motion [data-animate-on-scroll="fade-up"] {
transform: translateY(24px);
}
.has-motion [data-animate="fade-down"],
.has-motion [data-animate-on-scroll="fade-down"] {
transform: translateY(-24px);
}
.has-motion [data-animate="fade-left"],
.has-motion [data-animate-on-scroll="fade-left"] {
transform: translateX(24px);
}
.has-motion [data-animate="fade-right"],
.has-motion [data-animate-on-scroll="fade-right"] {
transform: translateX(-24px);
}
.has-motion [data-animate="zoom-in"],
.has-motion [data-animate-on-scroll="zoom-in"] {
transform: scale(0.92);
}
@media (prefers-reduced-motion: reduce) {
.has-motion [data-animate],
.has-motion [data-animate-on-scroll] {
opacity: 1;
transform: none;
}
} .error-404__section {
display: flex;
align-items: center;
min-height: min(100vh, 780px); padding: calc(var(--header-height) * 2 + var(--space-10)) 0 var(--space-12);
background: var(--color-primary);
}
.error-404__content {
text-align: center;
}
.error-404__code {
margin: 0 0 var(--space-2);
color: var(--color-accent-light);
font-family: var(--font-heading);
font-weight: var(--fw-regular);
font-size: clamp(5rem, 14vw, 10rem);
line-height: 1;
}
.error-404__title {
margin: 0 auto var(--space-4);
max-width: 900px;
color: var(--color-text-white);
font-family: var(--font-heading);
font-weight: var(--fw-regular);
font-size: clamp(2rem, 4vw + 1rem, var(--fs-h2));
line-height: 1.2;
}
.error-404__text {
margin: 0 auto var(--space-6);
max-width: 560px;
color: var(--color-text-light);
}
.error-404__actions {
display: flex;
flex-wrap: wrap;
justify-content: center;
gap: var(--space-4);
}.site-main {
margin-top: calc(-1 * var(--header-height));
} .site-banner {
display: block;
position: relative;
z-index: 12;
background: var(--color-accent-dark);
color: var(--color-text-white);
text-align: center;
padding: var(--space-3) var(--container-pad);
font-family: var(--font-body);
font-size: var(--fs-small);
line-height: 1.5;
}
.site-banner__text {
display: inline-block;
}
a.site-banner--link {
text-decoration: none;
transition: background-color var(--transition-base);
}
a.site-banner--link:hover {
background: var(--color-accent-light);
color: var(--color-text-white);
text-decoration: none;
}
.site-header {
position: absolute; top: var(--banner-height, 0);
left: 0;
right: 0;
z-index: 10;
}
.site-header__inner {
display: flex;
align-items: center;
gap: var(--space-5);
padding-block: var(--space-5);
}
.site-header__logo {
display: inline-flex;
line-height: 0;
}
.site-header__logo img {
display: block;
width: auto;
}
.site-header__nav {
margin-left: auto;
}
.site-header__nav ul,
.site-header__menu {
list-style: none;
margin: 0;
padding: 0;
display: flex;
flex-wrap: wrap;
align-items: center;
gap: var(--space-3) var(--space-6);
}
.site-header__menu a {
color: var(--color-text-white);
font-family: var(--font-heading);
font-size: 1.125rem; transition: color var(--transition-base);
}
.site-header__menu a:hover,
.site-header__menu .current-menu-item > a,
.site-header__menu .current_page_item > a {
color: var(--color-accent-light);
text-decoration: none;
} .site-header__cta {
display: inline-flex;
align-items: center;
gap: var(--space-2);
flex-shrink: 0;
}
.site-header__cta-icon {
display: inline-flex;
color: inherit;
}
.site-header__cta-icon svg {
display: block;
width: 18px;
height: 18px;
transition: filter var(--transition-base);
} .site-header__cta:hover .site-header__cta-icon svg,
.site-header__cta:focus-visible .site-header__cta-icon svg {
filter: invert(1);
} .site-header__toggle,
.site-header__overlay,
.site-header__drawer {
display: none;
} body.is-menu-open {
overflow: hidden;
}
@media (max-width: 1023px) {
.site-header__inner {
gap: var(--space-3);
padding-block: var(--space-4);
}
.site-header__logo img {
height: 56px;
}
.site-header__nav {
display: none;
} .site-header__cta {
margin-left: auto;
} .site-header__toggle {
display: inline-flex;
background: transparent;
border: 0;
padding: 0;
cursor: pointer;
width: 32px;
height: 24px;
position: relative;
color: var(--color-text-white);
flex-shrink: 0;
}
.site-header__toggle-bar {
position: absolute;
left: 0;
width: 100%;
height: 2px;
background: currentColor;
transition: transform var(--transition-base),
opacity var(--transition-base),
top var(--transition-base);
}
.site-header__toggle-bar:nth-child(1) { top: 4px; }
.site-header__toggle-bar:nth-child(2) { top: 11px; }
.site-header__toggle-bar:nth-child(3) { top: 18px; } .site-header__overlay {
display: block;
position: fixed;
inset: 0;
background: rgba(0, 0, 0, 0.55);
opacity: 0;
visibility: hidden;
transition: opacity var(--transition-base),
visibility 0s linear var(--transition-base);
z-index: 50;
}
.site-header__overlay.is-open {
opacity: 1;
visibility: visible;
transition: opacity var(--transition-base),
visibility 0s linear 0s;
} .site-header__drawer {
display: block;
position: fixed;
top: 0;
right: 0;
bottom: 0;
width: 70%;
max-width: 420px;
background: var(--color-primary);
z-index: 60;
transform: translateX(100%);
transition: transform var(--transition-base);
padding: var(--space-10) var(--space-6) var(--space-6);
overflow-y: auto;
}
.site-header__drawer.is-open {
transform: translateX(0);
}
.site-header__drawer-close {
position: absolute;
top: var(--space-4);
right: var(--space-4);
width: 32px;
height: 32px;
background: transparent;
border: 0;
padding: 0;
cursor: pointer;
color: var(--color-text-white);
}
.site-header__drawer-close-bar {
position: absolute;
top: 50%;
left: 50%;
width: 24px;
height: 2px;
background: currentColor;
transform-origin: center;
}
.site-header__drawer-close-bar:nth-child(1) {
transform: translate(-50%, -50%) rotate(45deg);
}
.site-header__drawer-close-bar:nth-child(2) {
transform: translate(-50%, -50%) rotate(-45deg);
}
.site-header__drawer-menu {
list-style: none;
margin: 0;
padding: 0;
display: flex;
flex-direction: column;
gap: var(--space-5);
}
.site-header__drawer-menu a {
color: var(--color-text-white);
font-family: var(--font-heading);
font-size: var(--fs-h3);
transition: color var(--transition-base);
}
.site-header__drawer-menu a:hover,
.site-header__drawer-menu .current-menu-item > a,
.site-header__drawer-menu .current_page_item > a {
color: var(--color-accent-light);
text-decoration: none;
}
} @media (max-width: 767px) {
.site-header__cta {
padding: var(--space-2) var(--space-4);
font-size: 1rem; gap: var(--space-1);
}
.site-header__cta-icon svg {
width: 15px;
height: 15px;
}
}
@media (prefers-reduced-motion: reduce) {
.site-header__drawer,
.site-header__overlay,
.site-header__toggle-bar {
transition: none;
}
}.site-footer {
background: var(--color-primary);
color: var(--color-text-light);
padding-top: var(--space-10);
}
.site-footer__inner {
display: flex;
flex-direction: column;
align-items: center;
gap: var(--space-6);
text-align: center;
padding-bottom: var(--space-14);
}
.site-footer__logo {
display: inline-block;
line-height: 0;
}
.site-footer__logo img {
display: block;
height: auto;
max-width: 100%;
}
.site-footer__nav {
width: 100%;
}
.site-footer__nav ul,
.site-footer__menu {
list-style: none;
margin: 0;
padding: 0;
display: flex;
flex-wrap: wrap;
justify-content: center;
gap: var(--space-4) var(--space-8);
}
.site-footer__menu a {
color: var(--color-text-white);
font-family: var(--font-heading);
font-size: 1.125rem; }
.site-footer__menu a:hover,
.site-footer__menu .current-menu-item > a {
color: var(--color-accent-light);
text-decoration: none;
}
.site-footer__contact {
margin: 0;
color: var(--color-text-light);
}
.site-footer__contact a {
color: var(--color-text-light);
}
.site-footer__contact a:hover {
color: var(--color-accent-light);
text-decoration: none;
}
.site-footer__contact .sep,
.site-footer__legal .sep {
color: var(--color-text-muted);
margin: 0 var(--space-2);
}
.site-footer__social {
margin: 0;
}
.site-footer__social a {
color: var(--color-text-light);
transition: color var(--transition-base);
}
.site-footer__social-name {
color: var(--color-accent-light);
transition: color var(--transition-base);
}
.site-footer__social a:hover {
color: var(--color-text-white);
text-decoration: none;
}
.site-footer__social a:hover .site-footer__social-name {
color: var(--color-text-white);
}
.site-footer__bottom {
border-top: 1px solid var(--color-primary-hover);
}
.site-footer__bottom-inner {
display: flex;
flex-wrap: wrap;
align-items: center;
justify-content: center;
gap: var(--space-4);
padding-block: var(--space-6);
color: var(--color-text-muted);
font-size: var(--fs-small);
text-align: center;
}
.site-footer__legal {
margin: 0;
}
.site-footer__legal a {
color: var(--color-text-muted);
}
.site-footer__legal a:hover {
color: var(--color-accent-light);
text-decoration: none;
}
.site-footer__coemans {
display: inline-flex;
align-items: center;
gap: var(--space-1);
vertical-align: middle;
color: var(--color-text-muted);
}
.site-footer__coemans-icon {
display: inline-flex;
color: inherit;
transition: color var(--transition-base);
}
.site-footer__coemans-icon svg {
width: 14px;
height: auto;
display: block;
}
.site-footer__coemans:hover {
color: var(--color-accent-light);
text-decoration: none;
}:is(.twi--white, .fwt--white, .special-menu, .gallery-section, .form-section, .suggesties-carousel--white)
+ :is(.twi--white, .fwt--white, .special-menu, .gallery-section, .form-section, .suggesties-carousel--white),
:is(.twi--dark, .fwt--dark, .suggesties-carousel--dark)
+ :is(.twi--dark, .fwt--dark, .suggesties-carousel--dark) {
padding-top: 0;
} .twi {
padding-block: var(--space-12);
}
.twi--dark {
background: var(--color-primary);
color: var(--color-text-light);
}
.twi--white {
background: var(--color-bg);
color: var(--color-text-dark);
}
.twi__inner {
display: grid;
grid-template-columns: 1fr 1fr;
gap: var(--space-10);
align-items: center;
}
.twi--media-right .twi__media {
order: 2;
}
.twi__media {
position: relative;
}
.twi__image {
margin: 0;
}
.twi__image img {
display: block;
width: 100%;
height: auto;
} .twi--two-image .twi__media {
padding-right: 15%;
padding-bottom: 18%;
}
.twi--two-image .twi__image--secondary {
position: absolute;
right: 0;
bottom: 0;
width: 55%;
}
.twi__content {
max-width: 480px;
margin: auto;
}
.twi__title {
margin: 0 0 var(--space-5);
font-family: var(--font-heading);
font-size: var(--fs-h2);
font-weight: var(--fw-regular);
line-height: var(--lh-tight);
}
.twi--dark .twi__title {
color: var(--color-accent-light);
}
.twi--white .twi__title {
color: var(--color-accent-dark);
}
.twi__text {
margin-bottom: var(--space-6);
line-height: var(--lh-normal);
}
.twi__text > *:last-child {
margin-bottom: 0;
}
.twi__button {
margin-top: var(--space-2);
}
@media (max-width: 1023px) {
.twi {
padding-block: var(--space-10);
}
.twi__inner {
gap: var(--space-6);
}
}
@media (max-width: 767px) {
.twi {
padding-block: var(--space-8);
}
.twi__inner {
grid-template-columns: 1fr;
gap: var(--space-6);
} .twi--media-right .twi__media,
.twi--media-left .twi__media {
order: 0;
}
.twi--two-image .twi__media {
padding-right: 12%;
padding-bottom: 22%;
}
.twi__content {
max-width: none;
}
} .reviews-section {
position: relative;
background-color: var(--color-bg-alt);
padding-block: var(--space-12);
overflow: hidden;
} .reviews-section::before {
content: '';
position: absolute;
top: 0;
left: -50px;
width: 1168px;
height: 316px;
background: url(//www.denbrugwachter.be/wp-content/themes/coemans-starter/assets/img/reviews-twirl.svg) no-repeat 0 0;
pointer-events: none;
z-index: 0;
transform-origin: 30% 30%;
animation: reviews-twirl-drift 16s ease-in-out infinite;
will-change: transform, opacity;
}
@keyframes reviews-twirl-drift {
0%, 100% {
transform: translate(0, 0) scale(1);
opacity: 1;
}
50% {
transform: translate(24px, -10px) scale(1.025);
opacity: 0.82;
}
}
@media (prefers-reduced-motion: reduce) {
.reviews-section::before {
animation: none;
}
}
.reviews-section__inner {
position: relative;
z-index: 1;
text-align: center;
}
.reviews-section__title {
color: var(--color-primary);
margin: 0 0 var(--space-8);
font-size: var(--fs-h2);
}
.reviews-section__widget {
max-width: 1200px;
margin: 0 auto;
} .image-section {
position: relative;
width: 100%;
height: 630px;
max-height: 630px;
overflow: hidden;
}
.image-section__img {
position: absolute; top: -12%;
left: 0;
width: 100%;
height: 124%;
object-fit: cover;
will-change: transform;
}
@media (max-width: 767px) {
.image-section {
height: 360px;
}
} .special-menu {
background: var(--color-bg);
padding-block: var(--space-12);
}
.special-menu__inner {
text-align: center;
}
.special-menu__list {
list-style: none;
margin: 0 auto var(--space-8);
padding: 0;
max-width: 720px;
}
.special-menu__item {
position: relative;
padding-block: var(--space-5);
color: var(--color-text-dark);
font-size: 1.5rem; line-height: 1.4;
} .special-menu__item + .special-menu__item::before {
content: '';
position: absolute;
top: 0;
left: 50%;
transform: translateX(-50%);
width: 108px;
height: 1px;
background: var(--color-border);
}
.special-menu__price {
margin: 0 0 var(--space-3);
color: var(--color-text-dark);
font-size: var(--fs-body);
}
.special-menu__info, p.special-menu__price {
margin: 0 auto;
max-width: 640px;
color: var(--color-text-muted);
font-size: 17px;
line-height: 1.6;
} .gallery-section {
padding-block: var(--space-12);
}
.gallery-section__grid {
display: grid;
grid-template-columns: repeat(4, minmax(0, 1fr));
gap: var(--space-2);
}
.gallery-section__item {
margin: 0;
overflow: hidden;
aspect-ratio: 16 / 10;
}
.gallery-section__link {
display: block;
width: 100%;
height: 100%;
cursor: zoom-in;
line-height: 0;
}
.gallery-section__link:hover {
text-decoration: none;
}
.gallery-section__link:focus-visible {
outline: 2px solid var(--color-accent-dark);
outline-offset: 2px;
}
.gallery-section__link img {
width: 100%;
height: 100%;
object-fit: cover;
display: block;
transition: transform var(--transition-base);
}
.gallery-section__link:hover img,
.gallery-section__link:focus-visible img {
transform: scale(1.04);
}
@media (prefers-reduced-motion: reduce) {
.gallery-section__link img {
transition: none;
}
.gallery-section__link:hover img,
.gallery-section__link:focus-visible img {
transform: none;
}
}
@media (max-width: 767px) {
.gallery-section__grid {
grid-template-columns: repeat(2, minmax(0, 1fr));
}
} .fwt {
padding-block: var(--space-12);
}
.fwt--dark {
background: var(--color-primary);
color: var(--color-text-light);
}
.fwt--white {
background: var(--color-bg);
color: var(--color-text-dark);
}
.fwt__inner {
max-width: 800px;
margin-inline: auto;
padding-inline: var(--container-pad);
text-align: center;
}
.fwt__title {
margin: 0 0 var(--space-5);
font-family: var(--font-heading);
font-size: var(--fs-h2);
font-weight: var(--fw-regular);
line-height: var(--lh-tight);
}
.fwt--dark .fwt__title {
color: var(--color-accent-light);
}
.fwt--white .fwt__title {
color: var(--color-accent-dark);
}
.fwt__text {
margin-bottom: var(--space-6);
line-height: var(--lh-normal);
}
.fwt__text > *:last-child {
margin-bottom: 0;
}
.fwt__button {
margin-top: var(--space-2);
}
@media (max-width: 1023px) {
.fwt {
padding-block: var(--space-10);
}
}
@media (max-width: 767px) {
.fwt {
padding-block: var(--space-8);
}
} .form-section {
padding-block: var(--space-12);
}
.form-section__inner {
max-width: 720px;
}
.form-section__title {
margin: 0 0 var(--space-8);
color: var(--color-primary);
font-size: var(--fs-h2-sm);
text-align: center;
}
@media (max-width: 1023px) {
.form-section {
padding-block: var(--space-10);
}
}
@media (max-width: 767px) {
.form-section {
padding-block: var(--space-8);
}
} .menu-media__single {
margin: 0;
}
.menu-media__single img,
.menu-slider__slide img {
display: block;
width: 100%;
aspect-ratio: 4 / 5; max-height: 440px;
object-fit: cover;
} .menu-slider {
position: relative;
overflow: hidden;
}
.menu-slider__track {
display: flex;
margin: 0;
padding: 0;
list-style: none;
transition: transform var(--transition-slow);
}
.menu-slider__slide {
flex: 0 0 100%;
margin: 0;
} .menu-slider:not(.is-enhanced) .menu-slider__track {
overflow-x: auto;
scroll-snap-type: x mandatory;
transition: none;
}
.menu-slider:not(.is-enhanced) .menu-slider__slide {
scroll-snap-align: center;
}
.menu-slider:not(.is-enhanced) .menu-slider__nav {
display: none;
} .menu-slider__nav {
position: absolute;
right: 0;
bottom: 0;
z-index: 2;
display: flex;
background: var(--color-accent-light);
}
.menu-slider__arrow {
display: inline-flex;
align-items: center;
justify-content: center;
width: 60px;
height: 56px;
padding: 0;
border: none;
background: transparent;
color: var(--color-primary);
font-size: 1.5rem;
line-height: 1;
cursor: pointer;
transition: background var(--transition-base);
}
.menu-slider__arrow:hover,
.menu-slider__arrow:focus-visible {
background: var(--color-accent-dark);
outline: none;
}
@media (prefers-reduced-motion: reduce) {
.menu-slider__track {
transition: none;
}
} .menu-groups {
display: grid;
gap: var(--space-8);
}
.menu-group__title {
margin: 0 0 var(--space-4);
color: var(--color-primary);
font-family: var(--font-heading);
font-size: var(--fs-h3-sm);
font-weight: var(--fw-regular);
}
.menu-list {
margin: 0;
padding: 0;
list-style: none;
}
.menu-row {
display: grid;
grid-template-columns: 1fr auto;
align-items: baseline;
column-gap: var(--space-4);
padding-block: var(--space-3);
border-bottom: 1px solid var(--color-border);
}
.menu-row__item {
color: var(--color-text-dark);
}
.menu-row__price {
color: var(--color-primary);
white-space: nowrap;
} .suggesties-carousel {
padding-block: var(--space-12);
}
.suggesties-carousel--dark {
background: var(--color-primary);
color: var(--color-text-light);
}
.suggesties-carousel--white {
background: var(--color-bg);
color: var(--color-text-dark);
}
.suggesties-carousel__title {
margin: 0 0 var(--space-8);
font-family: var(--font-heading);
font-size: var(--fs-h2-sm); font-weight: var(--fw-regular);
line-height: var(--lh-tight);
}
.suggesties-carousel--dark .suggesties-carousel__title {
color: var(--color-bg-alt); }
.suggesties-carousel--white .suggesties-carousel__title {
color: var(--color-accent-dark);
} .suggesties-carousel--media .suggesties-carousel__body {
display: grid;
grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
gap: var(--space-14);
align-items: start;
}
.suggesties-carousel--media-right .suggesties-carousel__media {
order: 2;
} .suggesties-carousel__media {
position: sticky;
top: var(--space-8);
align-self: start;
}
.suggesties-carousel--no-media .suggesties-carousel__content {
max-width: 760px;
} .suggesties-carousel--dark .menu-group__title {
color: var(--color-text-white);
}
.suggesties-carousel--dark .menu-row {
border-bottom-color: var(--color-primary-hover);
}
.suggesties-carousel--dark .menu-row__item {
color: var(--color-text-light);
}
.suggesties-carousel--dark .menu-row__price {
color: var(--color-text-white);
} .suggesties-carousel__actions {
display: flex;
flex-wrap: wrap;
gap: var(--space-4);
margin-top: var(--space-8);
}
@media (max-width: 1023px) {
.suggesties-carousel {
padding-block: var(--space-10);
}
.suggesties-carousel--media .suggesties-carousel__body {
gap: var(--space-6);
}
}
@media (max-width: 767px) {
.suggesties-carousel {
padding-block: var(--space-8);
}
.suggesties-carousel__title {
margin-bottom: var(--space-6);
font-size: var(--fs-h3);
} .suggesties-carousel--media .suggesties-carousel__body {
grid-template-columns: 1fr;
}
.suggesties-carousel--media-right .suggesties-carousel__media {
order: 0;
position: static;
}
}.hero {
position: relative;
min-height: 100vh;
display: grid;
grid-template-rows: 1fr auto;
grid-template-areas:
"content"
"links";
align-items: center;
overflow: hidden;
color: var(--color-text-white);
padding-top: var(--header-height);
}
.hero__image,
.hero__overlay {
position: absolute;
inset: 0;
}
.hero__image {
z-index: 0;
width: 100%;
height: 100%;
object-fit: cover;
transform-origin: center;
animation: hero-settle 2.8s cubic-bezier(0.16, 1, 0.3, 1) both;
}
@keyframes hero-settle {
from { transform: scale(1.08); }
to   { transform: scale(1); }
}
@media (prefers-reduced-motion: reduce) {
.hero__image {
animation: none;
}
}
.hero__overlay {
z-index: 1;
background:
linear-gradient(180deg, rgba(25, 25, 25, 0) 64.58%, var(--color-primary) 100%),
linear-gradient(0deg, rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0.5));
pointer-events: none;
}
.hero__content {
grid-area: content;
position: relative;
z-index: 2;
text-align: center;
padding-block: var(--space-6);
}
.hero__eyebrow {
margin: 0 0 var(--space-3);
color: var(--color-accent-light);
font-family: var(--font-body);
font-size: var(--fs-small);
font-weight: var(--fw-semibold);
letter-spacing: 0.18em;
text-transform: uppercase;
}
.hero__title {
margin: 0 auto;
max-width: 900px;
color: var(--color-text-white);
font-family: var(--font-heading);
font-weight: var(--fw-regular);
font-size: clamp(2rem, 5vw + 0.5rem, var(--fs-h1));
line-height: 1.15;
} .hero__links {
grid-area: links;
position: relative;
z-index: 2;
display: grid;
grid-template-columns: repeat(3, minmax(0, 1fr));
gap: 4px;
padding-inline: var(--container-pad);
background: var(--color-primary);
padding: 35px;
margin-bottom: -35px;
width: 100%;
}
.hero__link {
position: relative;
display: flex;
align-items: center;
justify-content: center;
aspect-ratio: 498 / 150; overflow: hidden;
color: var(--color-text-white);
background: var(--color-primary);
text-align: center;
isolation: isolate;
}
.hero__link:hover,
.hero__link:focus-visible {
color: var(--color-text-white);
text-decoration: none;
}
.hero__link-media {
position: absolute;
inset: 0;
z-index: -1;
}
.hero__link-media img {
width: 100%;
height: 100%;
object-fit: cover;
display: block;
}
.hero__link-media::after {
content: '';
position: absolute;
inset: 0;
background: rgba(0, 0, 0, 0.45);
transition: background var(--transition-base);
}
.hero__link:hover .hero__link-media::after,
.hero__link:focus-visible .hero__link-media::after {
background: rgba(0, 0, 0, 0.25);
}
.hero__link-label {
display: inline-flex;
align-items: center;
gap: var(--space-3);
padding: var(--space-3) var(--space-5);
font-family: var(--font-heading);
font-size: 1.5rem; font-weight: var(--fw-regular);
line-height: 1.2;
}
.hero__link-label::after {
content: '→';
display: inline-block;
transition: transform var(--transition-base);
}
.hero__link:hover .hero__link-label::after,
.hero__link:focus-visible .hero__link-label::after {
transform: translateX(4px);
}
@media (max-width: 1023px) {
.hero__links {
grid-template-columns: repeat(2, minmax(0, 1fr));
}
.hero__link {
aspect-ratio: 4 / 1;
}
}
@media (max-width: 767px) {
.hero {
min-height: 90vh;
}
.hero__links {
grid-template-columns: 1fr;
}
.hero__link {
aspect-ratio: 5 / 1;
}
.hero__link-label {
font-size: var(--fs-h4);
}
}