/* site palette */
html:root {
--bg: #FCF8F3;
--surface: #FFFFFF;
--surface-alt: #F4E9F0;
--text: #2A2319;
--text-muted: #6D6455;
--border: #E4DFD8;
--primary: #702453;
--primary-hover: #551B3F;
--on-primary: #FFFFFF;
--primary-text: #702453;
--accent: #B82CE4;
--on-accent: #FFFFFF;
--accent-text: #B523E3;
--dark-band: #321025;
--on-dark: #FFFFFF;
--on-dark-muted: #C3BEB6;
--brand-btn-bg: #FFFFFF;
--brand-btn-text: #321025;
--section-alt-bg: #F4E9F0;
--dark-band-bg: #321025;
--brand-band-bg: #702453;
--hero-bg: #321025;
}
html:root {
--bs-primary: #702453;
--bs-primary-rgb: 112, 36, 83;
--bs-link-color: #702453;
--bs-link-color-rgb: 112, 36, 83;
--bs-link-hover-color: #551B3F;
--mdb-primary: #702453;
--mdb-primary-rgb: 112, 36, 83;
}
.btn-primary {
--bs-btn-bg: var(--primary);
--bs-btn-border-color: var(--primary);
--bs-btn-color: var(--on-primary);
--bs-btn-hover-bg: var(--primary-hover);
--bs-btn-hover-border-color: var(--primary-hover);
--bs-btn-hover-color: var(--on-primary);
--bs-btn-active-bg: var(--primary-hover);
--bs-btn-active-border-color: var(--primary-hover);
--bs-btn-active-color: var(--on-primary);
background-color: var(--primary);
border-color: var(--primary);
color: var(--on-primary);
}
.btn-primary:hover,
.btn-primary:focus,
.btn-primary:active {
background-color: var(--primary-hover);
border-color: var(--primary-hover);
color: var(--on-primary);
}
.btn-outline-primary {
--bs-btn-color: var(--primary-text);
--bs-btn-border-color: var(--primary);
--bs-btn-hover-bg: var(--primary);
--bs-btn-hover-border-color: var(--primary);
--bs-btn-hover-color: var(--on-primary);
color: var(--primary-text);
border-color: var(--primary);
}
.btn-outline-primary:hover {
background-color: var(--primary);
color: var(--on-primary);
}
.text-primary,
.link-primary {
color: var(--primary-text) !important;
}
.bg-primary,
.text-bg-primary,
.badge.bg-primary {
color: var(--on-primary) !important;
}
/* /site palette */
*,
*::before,
*::after {
box-sizing: border-box;
}
html {
scroll-behavior: smooth;
}
body {
font-family: 'Libre Franklin', sans-serif;
background-color: var(--bg);
color: var(--text);
line-height: 1.6;
margin: 0;
padding: 0;
-webkit-font-smoothing: antialiased;
}
.text-muted {
color: var(--text-muted) !important;
}
a,
button {
transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}
.vcc-btn {
display: inline-flex;
align-items: center;
justify-content: center;
background-color: var(--primary);
color: var(--on-primary);
border: none;
border-radius: 9999px;
padding: 0.875rem 2rem;
font-weight: 600;
font-size: 1rem;
text-decoration: none;
box-shadow: 4px 4px 10px rgba(112, 36, 83, 0.35), -4px -4px 10px rgba(255, 255, 255, 0.8);
cursor: pointer;
}
.vcc-btn:hover {
background-color: var(--primary-hover);
color: var(--on-primary);
box-shadow: inset 3px 3px 6px rgba(0, 0, 0, 0.25), inset -3px -3px 6px rgba(255, 255, 255, 0.1);
transform: translateY(1px);
}
.vcc-btn-alt {
display: inline-flex;
align-items: center;
justify-content: center;
background-color: var(--bg);
color: var(--primary-text);
border: 1px solid var(--border);
border-radius: 9999px;
padding: 0.875rem 2rem;
font-weight: 600;
font-size: 1rem;
text-decoration: none;
box-shadow: 4px 4px 10px rgba(42, 35, 25, 0.1), -4px -4px 10px #FFFFFF;
cursor: pointer;
}
.vcc-btn-alt:hover {
color: var(--primary-hover);
box-shadow: inset 2px 2px 5px rgba(42, 35, 25, 0.12), inset -2px -2px 5px #FFFFFF;
transform: translateY(1px);
}
.vcc-card {
position: relative;
background-color: var(--surface);
color: var(--text);
border-radius: 24px;
padding: 2rem;
box-shadow: 6px 6px 14px rgba(42, 35, 25, 0.07), -6px -6px 14px rgba(255, 255, 255, 0.85);
transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1), box-shadow 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}
.vcc-card:hover {
transform: translateY(-4px);
box-shadow: 10px 10px 22px rgba(42, 35, 25, 0.1), -10px -10px 22px #FFFFFF;
}
.vcc-card::before,
.vcc-card::after {
content: '';
position: absolute;
width: 6px;
height: 6px;
border-radius: 50%;
background-color: var(--border);
box-shadow: 1px 1px 2px rgba(42, 35, 25, 0.2), -1px -1px 2px #FFFFFF;
}
.vcc-card::before {
top: 12px;
left: 12px;
}
.vcc-card::after {
bottom: 12px;
right: 12px;
}
.vcc-media {
aspect-ratio: 16 / 10;
border-radius: 18px;
overflow: hidden;
position: relative;
flex-shrink: 0;
border: 1px solid var(--border);
box-shadow: inset 2px 2px 5px rgba(42, 35, 25, 0.08), inset -2px -2px 5px #FFFFFF;
}
.vcc-media img {
display: block;
width: 100%;
height: 100%;
object-fit: cover;
}
.vcc-eyebrow {
display: inline-block;
font-size: 0.875rem;
font-weight: 700;
text-transform: uppercase;
letter-spacing: 0.08em;
color: var(--primary-text);
margin-bottom: 0.5rem;
}
.vcc-title {
font-size: 2.25rem;
font-weight: 700;
line-height: 1.2;
color: var(--text);
text-shadow: 1px 1px 0px #FFFFFF, -1px -1px 0px rgba(42, 35, 25, 0.15);
text-align: center;
margin-bottom: 1rem;
}
.vcc-title-divider {
width: 64px;
height: 4px;
margin: 0 auto 2.5rem auto;
border-radius: 9999px;
background-color: var(--bg);
box-shadow: inset 1px 1px 3px rgba(42, 35, 25, 0.2), inset -1px -1px 3px #FFFFFF;
}
.vcc-badge {
display: inline-flex;
align-items: center;
gap: 0.25rem;
font-size: 0.75rem;
font-weight: 700;
text-transform: uppercase;
letter-spacing: 0.05em;
padding: 0.35rem 0.85rem;
border-radius: 9999px;
background-color: var(--bg);
color: var(--primary-text);
box-shadow: inset 2px 2px 4px rgba(42, 35, 25, 0.08), inset -2px -2px 4px #FFFFFF;
}
.vcc-icon {
display: inline-flex;
align-items: center;
justify-content: center;
width: 48px;
height: 48px;
border-radius: 16px;
background-color: var(--bg);
color: var(--primary-text);
box-shadow: 3px 3px 8px rgba(42, 35, 25, 0.08), -3px -3px 8px #FFFFFF;
flex-shrink: 0;
}
.vcc-icon-well {
display: inline-flex;
align-items: center;
justify-content: center;
width: 64px;
height: 64px;
border-radius: 50%;
background-color: var(--bg);
color: var(--primary-text);
box-shadow: inset 3px 3px 6px rgba(42, 35, 25, 0.12), inset -3px -3px 6px #FFFFFF;
margin-bottom: 1.25rem;
}
.vcc-section {
background-color: var(--bg);
padding-top: 3.5rem;
padding-bottom: 3.5rem;
}
.vcc-section-alt {
background-color: var(--section-alt-bg, var(--surface-alt));
padding-top: 3.5rem;
padding-bottom: 3.5rem;
}
.vcc-section-dark {
background-color: var(--dark-band-bg, var(--dark-band));
color: var(--on-dark);
padding-top: 3.5rem;
padding-bottom: 3.5rem;
}
.vcc-section-brand {
background-color: var(--brand-band-bg, var(--primary));
color: var(--on-primary);
padding-top: 3.5rem;
padding-bottom: 3.5rem;
}
@media (min-width: 768px) {
.vcc-section,
.vcc-section-alt,
.vcc-section-dark,
.vcc-section-brand {
padding-top: 5rem;
padding-bottom: 5rem;
}
}
.vcc-section-brand .vcc-btn {
background-color: var(--brand-btn-bg);
color: var(--brand-btn-text);
box-shadow: 4px 4px 12px rgba(0, 0, 0, 0.25), -4px -4px 12px rgba(255, 255, 255, 0.2);
}
.vcc-section-brand .vcc-btn:hover {
background-color: var(--bg);
color: var(--brand-btn-text);
}
.vcc-section-brand .vcc-btn-alt {
background-color: transparent;
color: var(--on-primary);
border-color: var(--on-primary);
box-shadow: none;
}
.vcc-section-brand .vcc-btn-alt:hover {
background-color: var(--on-primary);
color: var(--primary);
}
.vcc-section-dark,
.vcc-on-dark {
color: var(--on-dark);
}
.vcc-section-dark h1,
.vcc-section-dark h2,
.vcc-section-dark h3,
.vcc-section-dark h4,
.vcc-section-dark h5,
.vcc-section-dark h6,
.vcc-on-dark h1,
.vcc-on-dark h2,
.vcc-on-dark h3,
.vcc-on-dark h4,
.vcc-on-dark h5,
.vcc-on-dark h6 {
color: var(--on-dark);
}
.vcc-section-dark a,
.vcc-on-dark a {
color: var(--on-dark);
}
.vcc-section-dark .vcc-title,
.vcc-on-dark .vcc-title {
color: var(--on-dark);
text-shadow: none;
}
.vcc-section-dark .vcc-eyebrow,
.vcc-on-dark .vcc-eyebrow {
color: var(--accent);
}
.vcc-section-dark .text-muted,
.vcc-on-dark .text-muted,
.vcc-section-dark p.text-muted,
.vcc-on-dark p.text-muted {
color: var(--on-dark-muted) !important;
}
.vcc-section-dark .vcc-btn-alt,
.vcc-on-dark .vcc-btn-alt {
background-color: transparent;
color: var(--on-dark);
border-color: var(--on-dark-muted);
box-shadow: none;
}
.vcc-section-dark .vcc-btn-alt:hover,
.vcc-on-dark .vcc-btn-alt:hover {
background-color: var(--on-dark);
color: var(--dark-band);
}
.vcc-section-dark .vcc-card,
.vcc-on-dark .vcc-card {
background-color: var(--surface);
color: var(--text);
box-shadow: 6px 6px 14px rgba(0, 0, 0, 0.35), -6px -6px 14px rgba(255, 255, 255, 0.05);
}
.vcc-section-dark .vcc-card h1,
.vcc-section-dark .vcc-card h2,
.vcc-section-dark .vcc-card h3,
.vcc-section-dark .vcc-card h4,
.vcc-section-dark .vcc-card h5,
.vcc-section-dark .vcc-card h6,
.vcc-on-dark .vcc-card h1,
.vcc-on-dark .vcc-card h2,
.vcc-on-dark .vcc-card h3,
.vcc-on-dark .vcc-card h4,
.vcc-on-dark .vcc-card h5,
.vcc-on-dark .vcc-card h6 {
color: var(--text);
}
.vcc-section-dark .vcc-card a,
.vcc-on-dark .vcc-card a {
color: var(--primary-text);
}
.vcc-section-dark .vcc-card .text-muted,
.vcc-on-dark .vcc-card .text-muted {
color: var(--text-muted) !important;
}
/* ===== header ===== */
.breykers-header-wrap {
position: sticky;
top: 0;
z-index: 1020;
padding: 1rem 0;
background-color: var(--bg);
box-shadow: 0 4px 12px rgba(42, 35, 25, 0.04);
}
.breykers-header-wrap .breykers-navbar {
position: relative;
background-color: #FCF8F3;
border-radius: 24px;
padding: 0.75rem 1.25rem;
border: 1px solid #E4DFD8;
box-shadow: 6px 6px 14px rgba(42, 35, 25, 0.07), -6px -6px 14px #FFFFFF;
}
.breykers-header-wrap .breykers-brand {
display: inline-flex;
align-items: center;
gap: 0.75rem;
text-decoration: none;
padding: 0;
margin: 0;
z-index: 1030;
}
.breykers-header-wrap .breykers-logo-well {
width: 46px;
height: 46px;
border-radius: 50%;
display: inline-flex;
align-items: center;
justify-content: center;
background-color: #FCF8F3;
box-shadow: inset 3px 3px 6px rgba(42, 35, 25, 0.12), inset -3px -3px 6px #FFFFFF;
padding: 4px;
flex-shrink: 0;
}
.breykers-header-wrap .breykers-logo-img {
width: 100%;
height: 100%;
max-width: 42px;
max-height: 42px;
object-fit: cover;
border-radius: 50%;
display: block;
}
.breykers-header-wrap .breykers-brand-name {
font-family: 'Libre Franklin', sans-serif;
font-weight: 700;
font-size: 1.125rem;
color: #702453;
letter-spacing: 0.02em;
text-shadow: 1px 1px 0 #FFFFFF;
}
.breykers-header-wrap .breykers-toggler {
border: none;
background-color: #FCF8F3;
width: 44px;
height: 44px;
border-radius: 12px;
padding: 0;
display: inline-flex;
align-items: center;
justify-content: center;
color: #702453;
box-shadow: 3px 3px 7px rgba(42, 35, 25, 0.1), -3px -3px 7px #FFFFFF;
transition: box-shadow 0.2s ease, transform 0.2s ease;
}
.breykers-header-wrap .breykers-toggler:focus {
outline: none;
box-shadow: inset 2px 2px 5px rgba(42, 35, 25, 0.15), inset -2px -2px 5px #FFFFFF;
}
.breykers-header-wrap .breykers-toggler-icon {
width: 24px;
height: 24px;
stroke-width: 2.2;
}
.breykers-header-wrap .breykers-collapse {
background-color: #FCF8F3;
}
.breykers-header-wrap .breykers-nav-link {
font-family: 'Libre Franklin', sans-serif;
font-weight: 600;
font-size: 0.9375rem;
color: #2A2319;
padding: 0.625rem 1rem;
border-radius: 9999px;
transition: all 0.25s ease;
text-decoration: none;
display: inline-block;
}
.breykers-header-wrap .breykers-nav-link:hover,
.breykers-header-wrap .breykers-nav-link:focus {
color: #702453;
background-color: #F4E9F0;
box-shadow: inset 2px 2px 4px rgba(42, 35, 25, 0.08), inset -2px -2px 4px #FFFFFF;
}
.breykers-header-wrap .breykers-cta-wrap {
display: flex;
align-items: center;
}
.breykers-header-wrap .breykers-book-btn {
display: inline-flex;
align-items: center;
justify-content: center;
white-space: nowrap;
font-weight: 600;
font-size: 0.9375rem;
text-decoration: none;
}
@media (max-width:991.98px) {
.breykers-header-wrap .breykers-collapse {
margin-top: 1rem;
padding-top: 1rem;
border-top: 1px solid #E4DFD8;
}
.breykers-header-wrap .breykers-nav-left,
.breykers-header-wrap .breykers-nav-right {
display: flex;
flex-direction: column;
gap: 0.375rem;
padding: 0;
margin: 0;
}
.breykers-header-wrap .breykers-nav-right {
margin-top: 0.375rem;
}
.breykers-header-wrap .breykers-nav-link {
width: 100%;
padding: 0.75rem 1rem;
font-size: 0.875rem;
}
.breykers-header-wrap .breykers-cta-wrap {
margin-top: 1rem;
padding-top: 0.75rem;
border-top: 1px solid #E4DFD8;
}
.breykers-header-wrap .breykers-book-btn {
width: 100%;
text-align: center;
padding: 0.75rem 1.5rem;
}
}
@media (min-width:992px) {
.breykers-header-wrap .breykers-navbar {
border-radius: 9999px;
padding: 0.5rem 1.5rem;
}
.breykers-header-wrap .breykers-brand {
position: absolute;
left: 50%;
top: 50%;
transform: translate(-50%, -50%);
margin: 0;
}
.breykers-header-wrap .breykers-collapse {
display: flex;
align-items: center;
justify-content: space-between;
width: 100%;
background-color: transparent;
}
.breykers-header-wrap .breykers-nav-left {
display: flex;
align-items: center;
gap: 0.5rem;
margin-right: auto;
padding-right: 120px;
}
.breykers-header-wrap .breykers-nav-right {
display: flex;
align-items: center;
gap: 0.5rem;
margin-left: auto;
padding-left: 120px;
}
.breykers-header-wrap .breykers-cta-wrap {
margin-left: 1rem;
}
}
/* ===== hero_section ===== */
.hero-breykers {
padding-top: 3.5rem;
padding-bottom: 3.5rem;
}
.hero-breykers__content {
z-index: 2;
}
.hero-breykers__eyebrow {
display: inline-block;
padding: 0.35rem 1rem;
font-size: 0.8125rem;
font-weight: 700;
letter-spacing: 0.05em;
text-transform: uppercase;
color: var(--primary-text);
background-color: var(--surface-alt);
border-radius: 9999px;
box-shadow: inset 2px 2px 4px rgba(42, 35, 25, 0.08), inset -2px -2px 4px #FFFFFF;
}
.hero-breykers__title {
font-size: clamp(1.75rem, 3.8vw, 3.25rem);
font-weight: 800;
line-height: 1.2;
color: var(--text);
text-shadow: 1px 1px 0px #FFFFFF, -1px -1px 0px rgba(42, 35, 25, 0.12);
overflow-wrap: anywhere;
}
.hero-breykers__description {
font-size: clamp(0.95rem, 1.2vw, 1.125rem);
line-height: 1.6;
color: var(--text-muted);
max-width: 540px;
overflow-wrap: anywhere;
}
.hero-breykers__cta-btn {
background-color: var(--primary);
color: var(--on-primary);
border-radius: 9999px;
padding: 0.875rem 1.85rem;
font-weight: 600;
font-size: 0.95rem;
text-decoration: none;
box-shadow: 4px 4px 10px rgba(112, 36, 83, 0.35), -4px -4px 10px rgba(255, 255, 255, 0.8);
transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
border: none;
}
.hero-breykers__cta-btn:hover {
background-color: var(--primary-hover);
color: var(--on-primary);
transform: translateY(-2px);
box-shadow: 6px 6px 14px rgba(112, 36, 83, 0.45), -6px -6px 14px rgba(255, 255, 255, 0.95);
}
.hero-breykers__cta-btn:active {
transform: translateY(1px);
box-shadow: inset 3px 3px 6px rgba(0, 0, 0, 0.25), inset -3px -3px 6px rgba(255, 255, 255, 0.1);
}
.hero-breykers__secondary-btn {
background-color: var(--surface);
color: var(--primary-text);
border-radius: 9999px;
padding: 0.875rem 1.85rem;
font-weight: 600;
font-size: 0.95rem;
text-decoration: none;
box-shadow: 4px 4px 10px rgba(42, 35, 25, 0.08), -4px -4px 10px #FFFFFF;
transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
border: 1px solid var(--border);
}
.hero-breykers__secondary-btn:hover {
background-color: var(--surface-alt);
color: var(--primary-text);
transform: translateY(-2px);
box-shadow: 6px 6px 14px rgba(42, 35, 25, 0.12), -6px -6px 14px #FFFFFF;
}
.hero-breykers__secondary-btn:active {
transform: translateY(1px);
box-shadow: inset 2px 2px 5px rgba(42, 35, 25, 0.12), inset -2px -2px 5px #FFFFFF;
}
.hero-breykers__btn-icon {
width: 1.15rem;
height: 1.15rem;
}
.hero-breykers__feature-pill {
background-color: var(--surface);
padding: 0.5rem 0.875rem;
border-radius: 9999px;
box-shadow: 3px 3px 8px rgba(42, 35, 25, 0.06), -3px -3px 8px #FFFFFF;
border: 1px solid rgba(228, 223, 216, 0.6);
}
.hero-breykers__feature-icon-box {
width: 24px;
height: 24px;
border-radius: 50%;
background-color: var(--surface-alt);
display: flex;
align-items: center;
justify-content: center;
box-shadow: inset 1px 1px 3px rgba(42, 35, 25, 0.1), inset -1px -1px 3px #FFFFFF;
}
.hero-breykers__feature-icon {
width: 14px;
height: 14px;
color: var(--primary);
}
.hero-breykers__feature-text {
font-size: 0.8125rem;
font-weight: 600;
color: var(--text);
}
.hero-breykers__image-panel {
background: var(--surface);
border-radius: 32px;
padding: 1rem;
box-shadow: 8px 8px 20px rgba(42, 35, 25, 0.09), -8px -8px 20px #FFFFFF;
transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}
.hero-breykers__image-panel:hover {
transform: translateY(-4px);
}
.hero-breykers__media-wrapper {
position: relative;
border-radius: 24px;
overflow: hidden;
aspect-ratio: 4 / 3;
box-shadow: inset 2px 2px 6px rgba(0, 0, 0, 0.15);
}
.hero-breykers__img {
width: 100%;
height: 100%;
object-fit: cover;
display: block;
}
.hero-breykers__rivet {
position: absolute;
width: 6px;
height: 6px;
background: var(--border);
border-radius: 50%;
box-shadow: 1px 1px 2px rgba(42, 35, 25, 0.2), -1px -1px 2px #FFFFFF;
z-index: 3;
}
.hero-breykers__rivet--tl {
top: 12px;
left: 12px;
}
.hero-breykers__rivet--tr {
top: 12px;
right: 12px;
}
.hero-breykers__rivet--bl {
bottom: 12px;
left: 12px;
}
.hero-breykers__rivet--br {
bottom: 12px;
right: 12px;
}
.hero-breykers__floating-badge {
bottom: -15px;
left: 24px;
background: var(--surface);
padding: 0.6rem 1.1rem;
border-radius: 9999px;
box-shadow: 6px 6px 14px rgba(42, 35, 25, 0.12), -6px -6px 14px #FFFFFF;
border: 1px solid var(--border);
z-index: 4;
}
.hero-breykers__floating-icon-well {
width: 32px;
height: 32px;
border-radius: 50%;
background: var(--surface-alt);
display: flex;
align-items: center;
justify-content: center;
box-shadow: inset 2px 2px 4px rgba(42, 35, 25, 0.12), inset -2px -2px 4px #FFFFFF;
}
.hero-breykers__floating-icon {
width: 16px;
height: 16px;
color: var(--primary);
}
.hero-breykers__floating-text-group {
display: flex;
flex-direction: column;
line-height: 1.15;
}
.hero-breykers__floating-label {
font-size: 0.6875rem;
color: var(--text-muted);
text-transform: uppercase;
letter-spacing: 0.04em;
}
.hero-breykers__floating-value {
font-size: 0.875rem;
color: var(--text);
font-weight: 700;
}
@media (max-width: 767px) {
.hero-breykers {
padding-top: 2rem;
padding-bottom: 2.5rem;
}
.hero-breykers__title {
font-size: 1.125rem;
}
.hero-breykers__actions {
flex-direction: column;
align-items: stretch;
}
.hero-breykers__cta-btn,
.hero-breykers__secondary-btn {
width: 100%;
text-align: center;
}
.hero-breykers__floating-badge {
position: static;
margin-top: 1rem;
display: inline-flex;
}
.hero-breykers__image-panel {
padding: 0.75rem;
border-radius: 20px;
}
.hero-breykers__media-wrapper {
border-radius: 16px;
}
}
/* ===== how_we_work ===== */
.breykers-work-section {
padding: 4.5rem 0;
background-color: var(--bg, #FCF8F3);
overflow: hidden;
}
.breykers-work-section .breykers-work-header {
margin-bottom: 3rem;
}
.breykers-work-section .vcc-eyebrow {
font-size: 0.8125rem;
font-weight: 700;
text-transform: uppercase;
letter-spacing: 0.08em;
color: var(--primary-text, #702453);
}
.breykers-work-section .breykers-work-title {
color: var(--text, #2A2319);
font-weight: 800;
font-size: 2.25rem;
line-height: 1.25;
text-shadow: 1px 1px 0px #FFFFFF, -1px -1px 0px rgba(42, 35, 25, 0.15);
overflow-wrap: anywhere;
}
.breykers-work-section .breykers-work-divider {
width: 72px;
height: 4px;
border-radius: 9999px;
margin: 0.875rem auto 1.25rem;
background-color: var(--border, #E4DFD8);
box-shadow: inset 1px 1px 3px rgba(42, 35, 25, 0.2), inset -1px -1px 3px #FFFFFF;
}
.breykers-work-section .breykers-work-intro {
max-width: 640px;
color: var(--text-muted, #6D6455);
font-size: 1rem;
line-height: 1.6;
margin-bottom: 0;
overflow-wrap: anywhere;
}
.breykers-work-section .breykers-work-card {
position: relative;
background: var(--surface, #FFFFFF);
border-radius: 24px;
padding: 2rem 1.5rem;
box-shadow: 6px 6px 14px rgba(42, 35, 25, 0.07), -6px -6px 14px rgba(255, 255, 255, 0.9);
border: 1px solid rgba(228, 223, 216, 0.5);
transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1), box-shadow 0.3s cubic-bezier(0.4, 0, 0.2, 1);
display: flex;
flex-direction: column;
}
.breykers-work-section .breykers-work-card:hover {
transform: translateY(-4px);
box-shadow: 10px 10px 22px rgba(42, 35, 25, 0.1), -10px -10px 22px #FFFFFF;
}
.breykers-work-section .breykers-rivet {
position: absolute;
width: 6px;
height: 6px;
border-radius: 50%;
background-color: var(--border, #E4DFD8);
box-shadow: 1px 1px 2px rgba(42, 35, 25, 0.2), -1px -1px 2px #FFFFFF;
pointer-events: none;
}
.breykers-work-section .breykers-rivet-tl {
top: 12px;
left: 12px;
}
.breykers-work-section .breykers-rivet-tr {
top: 12px;
right: 12px;
}
.breykers-work-section .breykers-rivet-bl {
bottom: 12px;
left: 12px;
}
.breykers-work-section .breykers-rivet-br {
bottom: 12px;
right: 12px;
}
.breykers-work-section .breykers-step-badge {
background-color: var(--surface-alt, #F4E9F0);
color: var(--primary-text, #702453);
font-size: 0.75rem;
font-weight: 700;
letter-spacing: 0.04em;
padding: 0.3rem 0.75rem;
border-radius: 9999px;
box-shadow: inset 1px 1px 2px rgba(42, 35, 25, 0.08), inset -1px -1px 2px #FFFFFF;
}
.breykers-work-section .breykers-step-index {
font-size: 1.125rem;
font-weight: 800;
color: var(--border, #E4DFD8);
line-height: 1;
user-select: none;
}
.breykers-work-section .breykers-icon-well {
width: 64px;
height: 64px;
border-radius: 50%;
background-color: var(--bg, #FCF8F3);
box-shadow: inset 3px 3px 6px rgba(42, 35, 25, 0.12), inset -3px -3px 6px #FFFFFF;
display: flex;
align-items: center;
justify-content: center;
margin-left: auto;
margin-right: auto;
}
.breykers-work-section .breykers-step-icon {
width: 28px;
height: 28px;
stroke: var(--primary, #702453);
display: block;
}
.breykers-work-section .breykers-work-card-title {
color: var(--text, #2A2319);
font-size: 1.25rem;
font-weight: 700;
line-height: 1.3;
text-align: center;
text-shadow: 1px 1px 0px #FFFFFF;
overflow-wrap: anywhere;
}
.breykers-work-section .breykers-work-card-text {
color: var(--text-muted, #6D6455);
font-size: 0.9375rem;
line-height: 1.55;
text-align: center;
overflow-wrap: anywhere;
}
.breykers-work-section .breykers-primary-btn {
display: inline-flex;
align-items: center;
justify-content: center;
background-color: var(--primary, #702453);
color: var(--on-primary, #FFFFFF);
border-radius: 9999px;
padding: 0.875rem 2rem;
font-weight: 600;
font-size: 0.9375rem;
box-shadow: 4px 4px 10px rgba(112, 36, 83, 0.35), -4px -4px 10px rgba(255, 255, 255, 0.8);
border: none;
min-height: 48px;
transition: background-color 0.3s ease, box-shadow 0.3s ease, transform 0.2s ease;
}
.breykers-work-section .breykers-primary-btn:hover {
background-color: var(--primary-hover, #551B3F);
color: var(--on-primary, #FFFFFF);
box-shadow: inset 3px 3px 6px rgba(0, 0, 0, 0.25), inset -3px -3px 6px rgba(255, 255, 255, 0.1);
transform: translateY(1px);
}
.breykers-work-section .breykers-secondary-btn {
display: inline-flex;
align-items: center;
justify-content: center;
background-color: var(--bg, #FCF8F3);
color: var(--primary, #702453);
border-radius: 9999px;
padding: 0.875rem 2rem;
font-weight: 600;
font-size: 0.9375rem;
box-shadow: 4px 4px 10px rgba(42, 35, 25, 0.1), -4px -4px 10px #FFFFFF;
border: 1px solid var(--border, #E4DFD8);
min-height: 48px;
transition: background-color 0.3s ease, box-shadow 0.3s ease, transform 0.2s ease;
}
.breykers-work-section .breykers-secondary-btn:hover {
background-color: var(--surface-alt, #F4E9F0);
color: var(--primary-hover, #551B3F);
box-shadow: inset 2px 2px 5px rgba(42, 35, 25, 0.12), inset -2px -2px 5px #FFFFFF;
transform: translateY(1px);
}
@media (max-width: 767.98px) {
.breykers-work-section {
padding: 3rem 0;
}
.breykers-work-section .breykers-work-title {
font-size: 16px !important;
hyphens: auto;
}
.breykers-work-section .breykers-work-card-title {
font-size: 14px !important;
hyphens: auto;
}
.breykers-work-section .breykers-work-intro {
font-size: 0.875rem;
}
.breykers-work-section .breykers-work-card {
padding: 1.5rem 1.25rem;
}
.breykers-work-section .breykers-work-actions {
flex-direction: column;
width: 100%;
}
.breykers-work-section .breykers-primary-btn,
.breykers-work-section .breykers-secondary-btn {
width: 100%;
max-width: 320px;
}
}
/* ===== problem_and_solution ===== */
.problem-solution-section {
overflow: hidden;
}
.problem-solution-section .problem-solution-groove {
width: 90px;
height: 4px;
border-radius: 9999px;
background-color: rgba(0, 0, 0, 0.4);
box-shadow: inset 1px 1px 3px rgba(0, 0, 0, 0.6), inset -1px -1px 2px rgba(255, 255, 255, 0.1);
}
.problem-solution-section .problem-solution-intro {
color: var(--on-dark-muted);
font-size: 1.05rem;
line-height: 1.6;
max-width: 720px;
margin-left: auto;
margin-right: auto;
}
.problem-solution-section .vcc-card {
background: var(--surface);
border-radius: 24px;
box-shadow: 6px 6px 18px rgba(0, 0, 0, 0.35), -6px -6px 18px rgba(255, 255, 255, 0.04);
transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1), box-shadow 0.3s cubic-bezier(0.4, 0, 0.2, 1);
border: 1px solid rgba(255, 255, 255, 0.08);
}
.problem-solution-section .vcc-card:hover {
transform: translateY(-4px);
box-shadow: 10px 10px 24px rgba(0, 0, 0, 0.45), -6px -6px 18px rgba(255, 255, 255, 0.06);
}
.problem-solution-section .rivet {
position: absolute;
width: 6px;
height: 6px;
border-radius: 50%;
background: #D6CEC5;
box-shadow: 1px 1px 2px rgba(42, 35, 25, 0.25), -1px -1px 2px #FFFFFF;
pointer-events: none;
}
.problem-solution-section .rivet-tl {
top: 14px;
left: 14px;
}
.problem-solution-section .rivet-tr {
top: 14px;
right: 14px;
}
.problem-solution-section .rivet-bl {
bottom: 14px;
left: 14px;
}
.problem-solution-section .rivet-br {
bottom: 14px;
right: 14px;
}
.problem-solution-section .problem-icon-well {
width: 56px;
height: 56px;
border-radius: 50%;
background: #FCF8F3;
color: #9A2C2C;
box-shadow: inset 3px 3px 6px rgba(42, 35, 25, 0.14), inset -3px -3px 6px #FFFFFF;
}
.problem-solution-section .solution-icon-well {
width: 56px;
height: 56px;
border-radius: 50%;
background: #FCF8F3;
color: var(--primary);
box-shadow: inset 3px 3px 6px rgba(42, 35, 25, 0.14), inset -3px -3px 6px #FFFFFF;
}
.problem-solution-section .problem-badge {
background-color: #FBEAEB;
color: #9A2C2C;
font-size: 0.725rem;
letter-spacing: 0.05em;
padding: 0.25rem 0.75rem;
border-radius: 9999px;
display: inline-block;
}
.problem-solution-section .solution-badge {
background-color: var(--surface-alt);
color: var(--primary);
font-size: 0.725rem;
letter-spacing: 0.05em;
padding: 0.25rem 0.75rem;
border-radius: 9999px;
display: inline-block;
}
.problem-solution-section .status-dot {
width: 26px;
height: 26px;
border-radius: 50%;
box-shadow: inset 2px 2px 4px rgba(42, 35, 25, 0.12), inset -2px -2px 4px #FFFFFF;
}
.problem-solution-section .status-problem {
background: #FDE8E8;
color: #C53030;
}
.problem-solution-section .status-solution {
background: #EBF8EE;
color: #22863A;
}
.problem-solution-section .solution-action-btn {
background: var(--primary);
color: var(--on-primary);
font-weight: 600;
padding: 0.875rem 1.75rem;
border-radius: 9999px;
border: none;
box-shadow: 4px 4px 10px rgba(112, 36, 83, 0.35), -4px -4px 10px rgba(255, 255, 255, 0.8);
transition: background-color 0.25s ease, box-shadow 0.25s ease, transform 0.2s ease;
}
.problem-solution-section .solution-action-btn:hover {
background: var(--primary-hover);
color: var(--on-primary);
box-shadow: inset 3px 3px 6px rgba(0, 0, 0, 0.25), inset -3px -3px 6px rgba(255, 255, 255, 0.1);
transform: translateY(1px);
}
@media (max-width: 767px) {
.problem-solution-section .vcc-title {
font-size: 1.35rem;
}
.problem-solution-section h3 {
font-size: 1.15rem;
}
.problem-solution-section h4 {
font-size: 0.95rem;
}
.problem-solution-section .vcc-card {
padding: 1.5rem 1.25rem !important;
}
}
/* ===== dictionary_for_beginners ===== */
.breykers-dictionary {
padding: 5rem 1.5rem;
overflow-x: hidden;
}
.breykers-dictionary__header {
max-width: 780px;
margin: 0 auto;
}
.breykers-dictionary__title {
font-family: var(--font-family-headings, 'Libre Franklin', sans-serif);
color: var(--text);
font-weight: 700;
text-shadow: 1px 1px 0 #FFFFFF, -1px -1px 0 rgba(42, 35, 25, 0.12);
}
.breykers-dictionary__divider {
width: 80px;
height: 4px;
border-radius: 9999px;
background-color: var(--surface-alt);
box-shadow: inset 1px 1px 3px rgba(42, 35, 25, 0.2), inset -1px -1px 3px #FFFFFF;
}
.breykers-dictionary__lead {
color: var(--text-muted);
font-size: 1.05rem;
line-height: 1.6;
max-width: 640px;
}
.breykers-dictionary__filter-group {
background: var(--bg);
border-radius: 9999px;
box-shadow: inset 3px 3px 6px rgba(42, 35, 25, 0.1), inset -3px -3px 6px #FFFFFF;
gap: 0.5rem;
}
.breykers-dictionary__filter-btn {
border: none;
outline: none;
background: transparent;
color: var(--text-muted);
font-size: 0.875rem;
font-weight: 600;
padding: 0.55rem 1.25rem;
border-radius: 9999px;
cursor: pointer;
transition: all 0.25s ease;
}
.breykers-dictionary__filter-btn:hover {
color: var(--primary-text);
}
.breykers-dictionary__filter-btn.active {
background: var(--primary);
color: var(--on-primary);
box-shadow: 3px 3px 8px rgba(112, 36, 83, 0.35), -2px -2px 6px rgba(255, 255, 255, 0.8);
}
.breykers-dictionary__card {
position: relative;
background: var(--surface);
border-radius: 24px;
box-shadow: 6px 6px 14px rgba(42, 35, 25, 0.07), -6px -6px 14px #FFFFFF;
padding: 2rem 1.5rem;
border: 1px solid var(--border);
transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1), box-shadow 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}
.breykers-dictionary__card:hover {
transform: translateY(-4px);
box-shadow: 10px 10px 22px rgba(42, 35, 25, 0.1), -10px -10px 22px #FFFFFF;
}
.breykers-dictionary__rivet {
position: absolute;
width: 6px;
height: 6px;
border-radius: 50%;
background: #D9D2C7;
box-shadow: 1px 1px 2px rgba(42, 35, 25, 0.25), -1px -1px 2px #FFFFFF;
pointer-events: none;
}
.breykers-dictionary__rivet--tl {
top: 12px;
left: 12px;
}
.breykers-dictionary__rivet--tr {
top: 12px;
right: 12px;
}
.breykers-dictionary__rivet--bl {
bottom: 12px;
left: 12px;
}
.breykers-dictionary__rivet--br {
bottom: 12px;
right: 12px;
}
.breykers-dictionary__well {
width: 64px;
height: 64px;
border-radius: 50%;
background: var(--bg);
box-shadow: inset 3px 3px 6px rgba(42, 35, 25, 0.12), inset -3px -3px 6px #FFFFFF;
color: var(--primary-text);
}
.breykers-dictionary__icon {
width: 28px;
height: 28px;
}
.breykers-dictionary__term-title {
font-family: var(--font-family-headings, 'Libre Franklin', sans-serif);
font-size: 1.25rem;
font-weight: 700;
color: var(--text);
margin-bottom: 0.5rem;
line-height: 1.3;
}
.breykers-dictionary__term-desc {
font-size: 0.9375rem;
color: var(--text-muted);
line-height: 1.55;
}
.breykers-dictionary__note {
background: var(--surface-alt);
border-radius: 16px;
box-shadow: inset 2px 2px 4px rgba(42, 35, 25, 0.06), inset -2px -2px 4px #FFFFFF;
}
.breykers-dictionary__note-label {
font-size: 0.75rem;
font-weight: 700;
text-transform: uppercase;
letter-spacing: 0.5px;
color: var(--primary-text);
}
.breykers-dictionary__note-text {
font-size: 0.8125rem;
color: var(--text);
line-height: 1.45;
}
.breykers-dictionary__cta-box {
background: var(--surface);
border-radius: 32px;
box-shadow: 8px 8px 18px rgba(42, 35, 25, 0.08), -8px -8px 18px rgba(255, 255, 255, 0.9);
border: 1px solid var(--border);
}
.breykers-dictionary__cta-title {
font-family: var(--font-family-headings, 'Libre Franklin', sans-serif);
font-weight: 700;
font-size: 1.5rem;
color: var(--text);
}
.breykers-dictionary__cta-text {
color: var(--text-muted);
font-size: 1rem;
max-width: 580px;
}
@media (max-width: 767px) {
.breykers-dictionary {
padding: 3rem 1rem;
}
.breykers-dictionary__title {
font-size: 1.5rem;
}
.breykers-dictionary__filter-group {
border-radius: 20px;
width: 100%;
}
.breykers-dictionary__filter-btn {
width: 100%;
text-align: center;
}
.breykers-dictionary__card {
padding: 1.5rem 1rem;
}
.breykers-dictionary__cta-box {
padding: 2rem 1.25rem;
}
}
/* ===== top_rated_hotels ===== */
.hotel-grid-block {
background-color: var(--surface-alt);
color: var(--text);
}
.hotel-grid-block__title {
color: var(--text);
text-shadow: 1px 1px 0px #FFFFFF, -1px -1px 0px rgba(42, 35, 25, 0.15);
font-weight: 700;
line-height: 1.2;
}
.hotel-grid-block__eyebrow {
color: var(--primary-text);
font-weight: 700;
letter-spacing: 0.08em;
text-transform: uppercase;
font-size: 0.8125rem;
}
.hotel-grid-block__divider {
width: 72px;
height: 4px;
border-radius: 9999px;
background-color: #E4DFD8;
box-shadow: inset 1px 1px 3px rgba(42, 35, 25, 0.2), inset -1px -1px 3px #FFFFFF;
}
.hotel-grid-block__lead {
max-width: 640px;
color: var(--text-muted);
font-size: 1rem;
line-height: 1.6;
}
.hotel-grid-block__card {
background-color: var(--surface);
border-radius: 24px;
box-shadow: 6px 6px 14px rgba(42, 35, 25, 0.07), -6px -6px 14px #FFFFFF;
padding: 1.25rem;
border: 1px solid var(--border);
transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1), box-shadow 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}
.hotel-grid-block__card:hover {
transform: translateY(-4px);
box-shadow: 10px 10px 22px rgba(42, 35, 25, 0.1), -10px -10px 22px #FFFFFF;
}
.hotel-grid-block__rivet {
position: absolute;
width: 6px;
height: 6px;
border-radius: 50%;
background-color: #E4DFD8;
box-shadow: 1px 1px 2px rgba(42, 35, 25, 0.2), -1px -1px 2px #FFFFFF;
pointer-events: none;
}
.hotel-grid-block__rivet--tl {
top: 10px;
left: 10px;
}
.hotel-grid-block__rivet--tr {
top: 10px;
right: 10px;
}
.hotel-grid-block__rivet--bl {
bottom: 10px;
left: 10px;
}
.hotel-grid-block__rivet--br {
bottom: 10px;
right: 10px;
}
.hotel-grid-block__media-wrapper {
border-radius: 18px;
height: 220px;
box-shadow: inset 2px 2px 5px rgba(42, 35, 25, 0.12);
}
.hotel-grid-block__img {
width: 100%;
height: 100%;
object-fit: cover;
display: block;
transition: transform 0.4s ease;
}
.hotel-grid-block__card:hover .hotel-grid-block__img {
transform: scale(1.04);
}
.hotel-grid-block__badge-score {
background: rgba(50, 16, 37, 0.85);
color: #FFFFFF;
padding: 0.35rem 0.75rem;
border-radius: 9999px;
font-size: 0.875rem;
backdrop-filter: blur(4px);
box-shadow: 2px 2px 8px rgba(0, 0, 0, 0.25);
}
.hotel-grid-block__star-icon {
width: 16px;
height: 16px;
color: #FFC107;
}
.hotel-grid-block__star-gold {
width: 15px;
height: 15px;
color: #F59E0B;
}
.hotel-grid-block__star-half {
width: 15px;
height: 15px;
color: #F59E0B;
}
.hotel-grid-block__location-pill {
background-color: var(--bg);
color: var(--primary-text);
font-size: 0.75rem;
font-weight: 600;
padding: 0.25rem 0.65rem;
border-radius: 9999px;
box-shadow: inset 1px 1px 3px rgba(42, 35, 25, 0.08), inset -1px -1px 3px #FFFFFF;
}
.hotel-grid-block__card-title {
font-size: 1.25rem;
font-weight: 700;
line-height: 1.3;
overflow-wrap: anywhere;
}
.hotel-grid-block__title-link {
color: var(--text);
transition: color 0.2s ease;
}
.hotel-grid-block__title-link:hover {
color: var(--primary);
}
.hotel-grid-block__desc {
color: var(--text-muted);
font-size: 0.9375rem;
line-height: 1.55;
overflow-wrap: anywhere;
}
.hotel-grid-block__card-footer {
border-color: var(--border) !important;
}
.hotel-grid-block__price-val {
font-size: 1.375rem;
color: var(--primary-text);
}
.hotel-grid-block__price-period {
font-size: 0.8125rem;
color: var(--text-muted);
}
.hotel-grid-block__book-btn {
background-color: var(--primary);
color: var(--on-primary);
border: none;
border-radius: 9999px;
padding: 0.625rem 1.5rem;
font-weight: 600;
font-size: 0.9375rem;
box-shadow: 4px 4px 10px rgba(112, 36, 83, 0.35), -4px -4px 10px rgba(255, 255, 255, 0.8);
transition: background-color 0.2s, box-shadow 0.2s, transform 0.2s;
cursor: pointer;
}
.hotel-grid-block__book-btn:hover {
background-color: var(--primary-hover);
box-shadow: inset 2px 2px 4px rgba(0, 0, 0, 0.25);
}
.hotel-grid-block__modal {
visibility: hidden;
display: none;
z-index: 1050;
}
.hotel-grid-block__modal.is-active {
display: flex !important;
visibility: visible !important;
}
.hotel-grid-block__backdrop {
background-color: rgba(50, 16, 37, 0.65);
backdrop-filter: blur(4px);
}
.hotel-grid-block__modal-content {
max-width: 680px;
max-height: 90vh;
background: var(--bg);
border-radius: 28px;
box-shadow: 12px 12px 30px rgba(0, 0, 0, 0.25), -6px -6px 20px rgba(255, 255, 255, 0.2);
border: 1px solid var(--border);
z-index: 2;
}
.hotel-grid-block__modal-close {
background: #FCF8F3;
border: none;
width: 36px;
height: 36px;
border-radius: 50%;
box-shadow: 2px 2px 6px rgba(42, 35, 25, 0.12), -2px -2px 6px #FFFFFF;
color: var(--text);
cursor: pointer;
display: flex;
align-items: center;
justify-content: center;
}
.hotel-grid-block__close-icon {
width: 20px;
height: 20px;
}
.hotel-grid-block__modal-title {
color: var(--text);
font-weight: 700;
font-size: 1.5rem;
}
.hotel-grid-block__modal-sub {
color: var(--text-muted);
font-size: 0.9375rem;
}
.hotel-grid-block__label {
font-size: 0.875rem;
font-weight: 600;
color: var(--text);
}
.hotel-grid-block__input {
background-color: #FFFFFF;
border: 1px solid var(--border);
border-radius: 12px;
padding: 0.625rem 1rem;
font-size: 0.9375rem;
color: var(--text);
box-shadow: inset 2px 2px 4px rgba(42, 35, 25, 0.06);
outline: none;
transition: border-color 0.2s;
}
.hotel-grid-block__input::placeholder {
color: #9D968B;
opacity: 1;
}
.hotel-grid-block__input:focus {
border-color: var(--primary);
}
.hotel-grid-block__options-group {
background-color: #F7EFE9;
border: 1px solid var(--border);
box-shadow: inset 1px 1px 3px rgba(42, 35, 25, 0.08);
}
.hotel-grid-block__checkbox {
accent-color: var(--primary);
width: 18px;
height: 18px;
cursor: pointer;
}
.hotel-grid-block__checkbox-label {
font-size: 0.875rem;
color: var(--text);
}
.hotel-grid-block__consent-label {
font-size: 0.8125rem;
color: var(--text-muted);
line-height: 1.4;
}
.hotel-grid-block__policy-link {
color: var(--primary-text);
}
.hotel-grid-block__submit-btn {
background-color: var(--primary);
color: var(--on-primary);
border: none;
border-radius: 9999px;
font-weight: 700;
font-size: 1.0625rem;
box-shadow: 4px 4px 10px rgba(112, 36, 83, 0.35), -4px -4px 10px rgba(255, 255, 255, 0.8);
cursor: pointer;
}
.hotel-grid-block__submit-btn:hover {
background-color: var(--primary-hover);
}
@media (max-width: 767px) {
.hotel-grid-block__title {
font-size: 16px;
}
.hotel-grid-block__card-title {
font-size: 14px;
}
.hotel-grid-block__modal-title {
font-size: 16px;
}
.hotel-grid-block__media-wrapper {
height: 190px;
}
}
/* ===== footer ===== */
.bk-footer {
padding: 4rem 0 2.5rem;
background-color: var(--dark-band);
color: var(--on-dark);
overflow: hidden;
}
.bk-footer .bk-footer__panel {
position: relative;
background: #260c1c;
border-radius: 32px;
padding: 3rem 2.5rem 2rem;
box-shadow: 6px 6px 14px rgba(0, 0, 0, 0.35), -6px -6px 14px rgba(255, 255, 255, 0.05);
}
.bk-footer .bk-footer__rivet {
position: absolute;
width: 6px;
height: 6px;
border-radius: 50%;
background: #4a1d3a;
box-shadow: 1px 1px 2px rgba(0, 0, 0, 0.4), -1px -1px 2px rgba(255, 255, 255, 0.1);
}
.bk-footer .bk-footer__rivet--tl {
top: 12px;
left: 12px;
}
.bk-footer .bk-footer__rivet--tr {
top: 12px;
right: 12px;
}
.bk-footer .bk-footer__rivet--bl {
bottom: 12px;
left: 12px;
}
.bk-footer .bk-footer__rivet--br {
bottom: 12px;
right: 12px;
}
.bk-footer .bk-footer__brand {
display: flex;
align-items: center;
gap: 0.75rem;
margin-bottom: 1.25rem;
}
.bk-footer .bk-footer__logo-wrap {
width: 44px;
height: 44px;
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
background: #321025;
box-shadow: inset 2px 2px 4px rgba(0, 0, 0, 0.4), inset -2px -2px 4px rgba(255, 255, 255, 0.05);
}
.bk-footer .bk-footer__logo {
max-width: 32px;
max-height: 32px;
object-fit: contain;
}
.bk-footer .bk-footer__name {
font-size: 1.25rem;
font-weight: 700;
color: var(--on-dark);
letter-spacing: -0.01em;
}
.bk-footer .bk-footer__desc {
font-size: 0.875rem;
line-height: 1.6;
color: var(--on-dark-muted);
margin-bottom: 1.5rem;
}
.bk-footer .bk-footer__contact-list {
display: flex;
flex-direction: column;
gap: 0.875rem;
}
.bk-footer .bk-footer__contact-item {
display: flex;
align-items: center;
gap: 0.75rem;
font-size: 0.875rem;
min-width: 0;
}
.bk-footer .bk-footer__icon-box {
flex-shrink: 0;
width: 32px;
height: 32px;
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
background: #321025;
box-shadow: inset 2px 2px 4px rgba(0, 0, 0, 0.4), inset -2px -2px 4px rgba(255, 255, 255, 0.05);
}
.bk-footer .bk-footer__icon {
width: 16px;
height: 16px;
stroke: #d4a5c4;
}
.bk-footer .bk-footer__contact-val {
color: var(--on-dark-muted);
overflow-wrap: anywhere;
}
.bk-footer .bk-footer__contact-link {
color: var(--on-dark-muted);
text-decoration: none;
overflow-wrap: anywhere;
transition: color 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}
.bk-footer .bk-footer__contact-link:hover {
color: #ffffff;
text-decoration: underline;
}
.bk-footer .bk-footer__heading {
font-size: 1.125rem;
font-weight: 600;
color: var(--on-dark);
margin-bottom: 1.25rem;
}
.bk-footer .bk-footer__nav-list {
list-style: none;
padding: 0;
margin: 0;
display: flex;
flex-direction: column;
gap: 0.75rem;
}
.bk-footer .bk-footer__nav-link {
color: var(--on-dark-muted);
text-decoration: none;
font-size: 0.875rem;
display: inline-block;
transition: color 0.3s cubic-bezier(0.4, 0, 0.2, 1), transform 0.2s cubic-bezier(0.4, 0, 0.2, 1);
}
.bk-footer .bk-footer__nav-link:hover {
color: #ffffff;
transform: translateX(3px);
}
.bk-footer .bk-footer__share-desc {
font-size: 0.875rem;
color: var(--on-dark-muted);
line-height: 1.6;
margin-bottom: 1rem;
}
.bk-footer .bk-footer__share-capsules {
display: flex;
flex-wrap: wrap;
gap: 0.75rem;
}
.bk-footer .bk-footer__pill {
display: inline-flex;
align-items: center;
gap: 0.5rem;
padding: 0.625rem 1.25rem;
border-radius: 9999px;
background: #321025;
color: var(--on-dark);
text-decoration: none;
font-size: 0.875rem;
font-weight: 500;
box-shadow: 3px 3px 8px rgba(0, 0, 0, 0.3), -3px -3px 8px rgba(255, 255, 255, 0.05);
transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}
.bk-footer .bk-footer__pill-icon {
width: 16px;
height: 16px;
stroke: #d4a5c4;
}
.bk-footer .bk-footer__pill:hover {
background: #3d142d;
color: #ffffff;
box-shadow: inset 2px 2px 5px rgba(0, 0, 0, 0.4), inset -2px -2px 5px rgba(255, 255, 255, 0.05);
transform: translateY(1px);
}
.bk-footer .bk-footer__groove {
height: 3px;
width: 100%;
border-radius: 9999px;
margin: 2.5rem 0 1.5rem;
background: #1c0814;
box-shadow: inset 1px 1px 2px rgba(0, 0, 0, 0.6), inset -1px -1px 2px rgba(255, 255, 255, 0.04);
}
.bk-footer .bk-footer__bottom {
display: flex;
flex-direction: column;
align-items: center;
justify-content: space-between;
gap: 1rem;
}
@media (min-width: 768px) {
.bk-footer .bk-footer__bottom {
flex-direction: row;
}
}
.bk-footer .bk-footer__copy {
font-size: 0.8125rem;
color: var(--on-dark-muted);
}
.bk-footer .bk-footer__badge {
display: inline-flex;
align-items: center;
padding: 0.35rem 0.85rem;
border-radius: 9999px;
font-size: 0.75rem;
font-weight: 500;
color: #d4a5c4;
background: #321025;
box-shadow: inset 1px 1px 3px rgba(0, 0, 0, 0.4), inset -1px -1px 3px rgba(255, 255, 255, 0.05);
}
@media (max-width: 767px) {
.bk-footer {
padding: 3rem 0 2rem;
}
.bk-footer .bk-footer__panel {
padding: 2rem 1.25rem 1.5rem;
border-radius: 24px;
}
.bk-footer .bk-footer__heading {
font-size: 14px;
margin-bottom: 0.875rem;
}
.bk-footer .bk-footer__bottom {
text-align: center;
}
}
.breykers-header-wrap {
position: sticky;
top: 0;
z-index: 1020;
padding: 1rem 0;
background-color: var(--bg);
box-shadow: 0 4px 12px rgba(42, 35, 25, 0.04);
}
.breykers-header-wrap .breykers-navbar {
position: relative;
background-color: #FCF8F3;
border-radius: 24px;
padding: 0.75rem 1.25rem;
border: 1px solid #E4DFD8;
box-shadow: 6px 6px 14px rgba(42, 35, 25, 0.07), -6px -6px 14px #FFFFFF;
}
.breykers-header-wrap .breykers-brand {
display: inline-flex;
align-items: center;
gap: 0.75rem;
text-decoration: none;
padding: 0;
margin: 0;
z-index: 1030;
}
.breykers-header-wrap .breykers-logo-well {
width: 46px;
height: 46px;
border-radius: 50%;
display: inline-flex;
align-items: center;
justify-content: center;
background-color: #FCF8F3;
box-shadow: inset 3px 3px 6px rgba(42, 35, 25, 0.12), inset -3px -3px 6px #FFFFFF;
padding: 4px;
flex-shrink: 0;
}
.breykers-header-wrap .breykers-logo-img {
width: 100%;
height: 100%;
max-width: 42px;
max-height: 42px;
object-fit: cover;
border-radius: 50%;
display: block;
}
.breykers-header-wrap .breykers-brand-name {
font-family: 'Libre Franklin', sans-serif;
font-weight: 700;
font-size: 1.125rem;
color: #702453;
letter-spacing: 0.02em;
text-shadow: 1px 1px 0 #FFFFFF;
}
.breykers-header-wrap .breykers-toggler {
border: none;
background-color: #FCF8F3;
width: 44px;
height: 44px;
border-radius: 12px;
padding: 0;
display: inline-flex;
align-items: center;
justify-content: center;
color: #702453;
box-shadow: 3px 3px 7px rgba(42, 35, 25, 0.1), -3px -3px 7px #FFFFFF;
transition: box-shadow 0.2s ease, transform 0.2s ease;
}
.breykers-header-wrap .breykers-toggler:focus {
outline: none;
box-shadow: inset 2px 2px 5px rgba(42, 35, 25, 0.15), inset -2px -2px 5px #FFFFFF;
}
.breykers-header-wrap .breykers-toggler-icon {
width: 24px;
height: 24px;
stroke-width: 2.2;
}
.breykers-header-wrap .breykers-collapse {
background-color: #FCF8F3;
}
.breykers-header-wrap .breykers-nav-link {
font-family: 'Libre Franklin', sans-serif;
font-weight: 600;
font-size: 0.9375rem;
color: #2A2319;
padding: 0.625rem 1rem;
border-radius: 9999px;
transition: all 0.25s ease;
text-decoration: none;
display: inline-block;
}
.breykers-header-wrap .breykers-nav-link:hover,
.breykers-header-wrap .breykers-nav-link:focus {
color: #702453;
background-color: #F4E9F0;
box-shadow: inset 2px 2px 4px rgba(42, 35, 25, 0.08), inset -2px -2px 4px #FFFFFF;
}
.breykers-header-wrap .breykers-cta-wrap {
display: flex;
align-items: center;
}
.breykers-header-wrap .breykers-book-btn {
display: inline-flex;
align-items: center;
justify-content: center;
white-space: nowrap;
font-weight: 600;
font-size: 0.9375rem;
text-decoration: none;
}
@media (max-width:991.98px) {
.breykers-header-wrap .breykers-collapse {
margin-top: 1rem;
padding-top: 1rem;
border-top: 1px solid #E4DFD8;
}
.breykers-header-wrap .breykers-nav-left,
.breykers-header-wrap .breykers-nav-right {
display: flex;
flex-direction: column;
gap: 0.375rem;
padding: 0;
margin: 0;
}
.breykers-header-wrap .breykers-nav-right {
margin-top: 0.375rem;
}
.breykers-header-wrap .breykers-nav-link {
width: 100%;
padding: 0.75rem 1rem;
font-size: 0.875rem;
}
.breykers-header-wrap .breykers-cta-wrap {
margin-top: 1rem;
padding-top: 0.75rem;
border-top: 1px solid #E4DFD8;
}
.breykers-header-wrap .breykers-book-btn {
width: 100%;
text-align: center;
padding: 0.75rem 1.5rem;
}
}
@media (min-width:992px) {
.breykers-header-wrap .breykers-navbar {
border-radius: 9999px;
padding: 0.5rem 1.5rem;
}
.breykers-header-wrap .breykers-brand {
position: absolute;
left: 50%;
top: 50%;
transform: translate(-50%, -50%);
margin: 0;
}
.breykers-header-wrap .breykers-collapse {
display: flex;
align-items: center;
justify-content: space-between;
width: 100%;
background-color: transparent;
}
.breykers-header-wrap .breykers-nav-left {
display: flex;
align-items: center;
gap: 0.5rem;
margin-right: auto;
padding-right: 120px;
}
.breykers-header-wrap .breykers-nav-right {
display: flex;
align-items: center;
gap: 0.5rem;
margin-left: auto;
padding-left: 120px;
}
.breykers-header-wrap .breykers-cta-wrap {
margin-left: 1rem;
}
}
.hero-reviews-wrap {
padding: 3rem 0 2rem;
}
.hero-reviews-panel {
background: var(--surface);
border-radius: 32px;
padding: 2.5rem 1.5rem;
box-shadow: 8px 8px 20px rgba(42, 35, 25, 0.08), -8px -8px 20px #FFFFFF;
border: 1px solid var(--border);
}
.hero-reviews-content {
max-width: 760px;
}
.hero-reviews-rivet {
position: absolute;
width: 6px;
height: 6px;
background: var(--border);
border-radius: 50%;
box-shadow: 1px 1px 2px rgba(42, 35, 25, 0.2), -1px -1px 2px #FFFFFF;
z-index: 3;
}
.hero-reviews-rivet--tl {
top: 12px;
left: 12px;
}
.hero-reviews-rivet--tr {
top: 12px;
right: 12px;
}
.hero-reviews-rivet--bl {
bottom: 12px;
left: 12px;
}
.hero-reviews-rivet--br {
bottom: 12px;
right: 12px;
}
.hero-reviews-title {
font-size: clamp(1.75rem, 3.5vw, 2.75rem);
font-weight: 800;
line-height: 1.25;
color: var(--text);
text-shadow: 1px 1px 0px #FFFFFF, -1px -1px 0px rgba(42, 35, 25, 0.12);
overflow-wrap: anywhere;
}
.hero-reviews-groove {
height: 4px;
width: 72px;
border-radius: 9999px;
background: var(--surface-alt);
box-shadow: inset 1px 1px 3px rgba(42, 35, 25, 0.2), inset -1px -1px 3px #FFFFFF;
}
.hero-reviews-desc {
font-size: 1.05rem;
line-height: 1.6;
color: var(--text-muted);
overflow-wrap: anywhere;
}
.reviews-section-wrap {
padding: 3.5rem 0 4.5rem;
}
.reviews-section-header {
max-width: 680px;
}
.reviews-section-title {
font-size: clamp(1.5rem, 2.8vw, 2.25rem);
font-weight: 700;
color: var(--text);
text-shadow: 1px 1px 0px #FFFFFF, -1px -1px 0px rgba(42, 35, 25, 0.1);
overflow-wrap: anywhere;
}
.reviews-section-groove {
height: 4px;
width: 60px;
border-radius: 9999px;
background: var(--surface);
box-shadow: inset 1px 1px 3px rgba(42, 35, 25, 0.2), inset -1px -1px 3px #FFFFFF;
}
.reviews-section-desc {
font-size: 0.95rem;
line-height: 1.6;
color: var(--text-muted);
overflow-wrap: anywhere;
}
.review-tile-card {
background: var(--surface);
border-radius: 24px;
padding: 1.25rem;
box-shadow: 6px 6px 14px rgba(42, 35, 25, 0.07), -6px -6px 14px #FFFFFF;
border: 1px solid var(--border);
transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1), box-shadow 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}
.review-tile-card:hover {
transform: translateY(-4px);
box-shadow: 10px 10px 22px rgba(42, 35, 25, 0.1), -10px -10px 22px #FFFFFF;
}
.review-tile-rivet {
position: absolute;
width: 6px;
height: 6px;
background: var(--border);
border-radius: 50%;
box-shadow: 1px 1px 2px rgba(42, 35, 25, 0.2), -1px -1px 2px #FFFFFF;
z-index: 3;
}
.review-tile-rivet--tl {
top: 10px;
left: 10px;
}
.review-tile-rivet--tr {
top: 10px;
right: 10px;
}
.review-tile-rivet--bl {
bottom: 10px;
left: 10px;
}
.review-tile-rivet--br {
bottom: 10px;
right: 10px;
}
.review-tile-media-link {
text-decoration: none;
border-radius: 16px;
overflow: hidden;
margin-bottom: 1.25rem;
}
.review-tile-media {
width: 100%;
aspect-ratio: 16 / 9;
overflow: hidden;
border-radius: 16px;
background: var(--surface-alt);
box-shadow: inset 1px 1px 3px rgba(0, 0, 0, 0.15);
}
.review-tile-img {
width: 100%;
height: 100%;
object-fit: cover;
display: block;
transition: transform 0.4s cubic-bezier(0.4, 0, 0.2, 1);
}
.review-tile-card:hover .review-tile-img {
transform: scale(1.04);
}
.review-tile-body {
padding: 0 0.5rem 0.25rem;
}
.review-tile-meta {
font-size: 0.8125rem;
color: var(--text-muted);
}
.review-meta-item {
font-weight: 500;
}
.review-meta-divider {
color: var(--border);
}
.review-tile-title {
font-size: 1.15rem;
font-weight: 700;
line-height: 1.35;
color: var(--text);
overflow-wrap: anywhere;
}
.review-tile-title-link {
color: var(--text);
text-decoration: none;
transition: color 0.2s ease;
}
.review-tile-title-link:hover {
color: var(--primary);
}
.review-tile-text {
font-size: 0.875rem;
line-height: 1.55;
color: var(--text-muted);
overflow-wrap: anywhere;
}
.review-tile-btn {
text-decoration: none;
font-size: 0.9rem;
font-weight: 600;
padding: 0.75rem 1.25rem;
border-radius: 9999px;
background-color: var(--primary);
color: var(--on-primary);
border: none;
box-shadow: 4px 4px 10px rgba(112, 36, 83, 0.35), -4px -4px 10px rgba(255, 255, 255, 0.8);
transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}
.review-tile-btn:hover {
background-color: var(--primary-hover);
color: var(--on-primary);
transform: translateY(-2px);
box-shadow: 6px 6px 14px rgba(112, 36, 83, 0.45), -6px -6px 14px rgba(255, 255, 255, 0.95);
}
.review-tile-btn:active {
transform: translateY(1px);
box-shadow: inset 3px 3px 6px rgba(0, 0, 0, 0.25), inset -3px -3px 6px rgba(255, 255, 255, 0.1);
}
.bk-footer {
padding: 4rem 0 2.5rem;
background-color: var(--dark-band);
color: var(--on-dark);
overflow: hidden;
}
.bk-footer .bk-footer__panel {
position: relative;
background: #260c1c;
border-radius: 32px;
padding: 3rem 2.5rem 2rem;
box-shadow: 6px 6px 14px rgba(0, 0, 0, 0.35), -6px -6px 14px rgba(255, 255, 255, 0.05);
}
.bk-footer .bk-footer__rivet {
position: absolute;
width: 6px;
height: 6px;
border-radius: 50%;
background: #4a1d3a;
box-shadow: 1px 1px 2px rgba(0, 0, 0, 0.4), -1px -1px 2px rgba(255, 255, 255, 0.1);
}
.bk-footer .bk-footer__rivet--tl {
top: 12px;
left: 12px;
}
.bk-footer .bk-footer__rivet--tr {
top: 12px;
right: 12px;
}
.bk-footer .bk-footer__rivet--bl {
bottom: 12px;
left: 12px;
}
.bk-footer .bk-footer__rivet--br {
bottom: 12px;
right: 12px;
}
.bk-footer .bk-footer__brand {
display: flex;
align-items: center;
gap: 0.75rem;
margin-bottom: 1.25rem;
}
.bk-footer .bk-footer__logo-wrap {
width: 44px;
height: 44px;
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
background: #321025;
box-shadow: inset 2px 2px 4px rgba(0, 0, 0, 0.4), inset -2px -2px 4px rgba(255, 255, 255, 0.05);
}
.bk-footer .bk-footer__logo {
max-width: 32px;
max-height: 32px;
object-fit: contain;
}
.bk-footer .bk-footer__name {
font-size: 1.25rem;
font-weight: 700;
color: var(--on-dark);
letter-spacing: -0.01em;
}
.bk-footer .bk-footer__desc {
font-size: 0.875rem;
line-height: 1.6;
color: var(--on-dark-muted);
margin-bottom: 1.5rem;
}
.bk-footer .bk-footer__contact-list {
display: flex;
flex-direction: column;
gap: 0.875rem;
}
.bk-footer .bk-footer__contact-item {
display: flex;
align-items: center;
gap: 0.75rem;
font-size: 0.875rem;
min-width: 0;
}
.bk-footer .bk-footer__icon-box {
flex-shrink: 0;
width: 32px;
height: 32px;
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
background: #321025;
box-shadow: inset 2px 2px 4px rgba(0, 0, 0, 0.4), inset -2px -2px 4px rgba(255, 255, 255, 0.05);
}
.bk-footer .bk-footer__icon {
width: 16px;
height: 16px;
stroke: #d4a5c4;
}
.bk-footer .bk-footer__contact-val {
color: var(--on-dark-muted);
overflow-wrap: anywhere;
}
.bk-footer .bk-footer__contact-link {
color: var(--on-dark-muted);
text-decoration: none;
overflow-wrap: anywhere;
transition: color 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}
.bk-footer .bk-footer__contact-link:hover {
color: #ffffff;
text-decoration: underline;
}
.bk-footer .bk-footer__heading {
font-size: 1.125rem;
font-weight: 600;
color: var(--on-dark);
margin-bottom: 1.25rem;
}
.bk-footer .bk-footer__nav-list {
list-style: none;
padding: 0;
margin: 0;
display: flex;
flex-direction: column;
gap: 0.75rem;
}
.bk-footer .bk-footer__nav-link {
color: var(--on-dark-muted);
text-decoration: none;
font-size: 0.875rem;
display: inline-block;
transition: color 0.3s cubic-bezier(0.4, 0, 0.2, 1), transform 0.2s cubic-bezier(0.4, 0, 0.2, 1);
}
.bk-footer .bk-footer__nav-link:hover {
color: #ffffff;
transform: translateX(3px);
}
.bk-footer .bk-footer__share-desc {
font-size: 0.875rem;
color: var(--on-dark-muted);
line-height: 1.6;
margin-bottom: 1rem;
}
.bk-footer .bk-footer__share-capsules {
display: flex;
flex-wrap: wrap;
gap: 0.75rem;
}
.bk-footer .bk-footer__pill {
display: inline-flex;
align-items: center;
gap: 0.5rem;
padding: 0.625rem 1.25rem;
border-radius: 9999px;
background: #321025;
color: var(--on-dark);
text-decoration: none;
font-size: 0.875rem;
font-weight: 500;
box-shadow: 3px 3px 8px rgba(0, 0, 0, 0.3), -3px -3px 8px rgba(255, 255, 255, 0.05);
transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}
.bk-footer .bk-footer__pill-icon {
width: 16px;
height: 16px;
stroke: #d4a5c4;
}
.bk-footer .bk-footer__pill:hover {
background: #3d142d;
color: #ffffff;
box-shadow: inset 2px 2px 5px rgba(0, 0, 0, 0.4), inset -2px -2px 5px rgba(255, 255, 255, 0.05);
transform: translateY(1px);
}
.bk-footer .bk-footer__groove {
height: 3px;
width: 100%;
border-radius: 9999px;
margin: 2.5rem 0 1.5rem;
background: #1c0814;
box-shadow: inset 1px 1px 2px rgba(0, 0, 0, 0.6), inset -1px -1px 2px rgba(255, 255, 255, 0.04);
}
.bk-footer .bk-footer__bottom {
display: flex;
flex-direction: column;
align-items: center;
justify-content: space-between;
gap: 1rem;
}
@media (min-width: 768px) {
.bk-footer .bk-footer__bottom {
flex-direction: row;
}
}
.bk-footer .bk-footer__copy {
font-size: 0.8125rem;
color: var(--on-dark-muted);
}
.bk-footer .bk-footer__badge {
display: inline-flex;
align-items: center;
padding: 0.35rem 0.85rem;
border-radius: 9999px;
font-size: 0.75rem;
font-weight: 500;
color: #d4a5c4;
background: #321025;
box-shadow: inset 1px 1px 3px rgba(0, 0, 0, 0.4), inset -1px -1px 3px rgba(255, 255, 255, 0.05);
}
@media (max-width: 767px) {
.hero-reviews-wrap {
padding: 2rem 0 1.5rem;
}
.hero-reviews-panel {
padding: 1.5rem 1rem;
border-radius: 20px;
}
.hero-reviews-title {
font-size: 1.125rem;
}
.reviews-section-wrap {
padding: 2.5rem 0 3.5rem;
}
.reviews-section-title {
font-size: 1rem;
}
.review-tile-card {
padding: 1rem;
border-radius: 20px;
}
.bk-footer {
padding: 3rem 0 2rem;
}
.bk-footer .bk-footer__panel {
padding: 2rem 1.25rem 1.5rem;
border-radius: 24px;
}
.bk-footer .bk-footer__heading {
font-size: 14px;
margin-bottom: 0.875rem;
}
.bk-footer .bk-footer__bottom {
text-align: center;
}
}
/* ===== PAGE: about ===== */
.about-page-block{padding:4.5rem 0;position:relative}.about-section-header{max-width:760px;margin-bottom:3.5rem}.about-title-groove{height:4px;width:120px;margin:1rem auto 1.5rem;border-radius:9999px;background-color:var(--border);box-shadow:inset 1px 1px 3px rgba(42,35,25,0.2),inset -1px -1px 3px #ffffff}.about-lead-text{font-size:1.125rem;line-height:1.7;color:var(--text-muted);margin:0}.about-story-card,.about-metrics-panel,.about-interactive-panel{position:relative;background:var(--surface);border-radius:24px;padding:2rem;box-shadow:6px 6px 14px rgba(42,35,25,0.07),-6px -6px 14px #ffffff;border:1px solid rgba(228,223,216,0.6)}.about-rivet{position:absolute;width:6px;height:6px;background:var(--border);border-radius:50%;box-shadow:1px 1px 2px rgba(42,35,25,0.2),-1px -1px 2px #ffffff}.about-rivet.rivet-tl{top:12px;left:12px}.about-rivet.rivet-tr{top:12px;right:12px}.about-rivet.rivet-bl{bottom:12px;left:12px}.about-rivet.rivet-br{bottom:12px;right:12px}.about-story-media{width:100%;height:260px;border-radius:18px;overflow:hidden;background:var(--surface-alt);box-shadow:inset 2px 2px 5px rgba(42,35,25,0.1),inset -2px -2px 5px #ffffff}.about-img{width:100%;height:100%;object-fit:cover;display:block}.about-card-heading{font-size:1.45rem;font-weight:700;color:var(--text);margin-bottom:0.75rem}.about-body-text{font-size:0.95rem;line-height:1.6;color:var(--text-muted)}.about-metrics-list{display:flex;flex-direction:column;gap:1.5rem}.about-tactile-well{width:48px;height:48px;min-width:48px;border-radius:50%;background:var(--bg);box-shadow:inset 3px 3px 6px rgba(42,35,25,0.12),inset -3px -3px 6px #ffffff;display:flex;align-items:center;justify-content:center;color:var(--primary)}.about-svg-icon{width:22px;height:22px}.about-item-title{font-size:1.05rem;font-weight:600;color:var(--text);margin-bottom:0.25rem}.about-item-desc{font-size:0.875rem;line-height:1.5;color:var(--text-muted);margin:0}.about-counter-label{font-size:0.9rem;font-weight:600;color:var(--text-muted)}.about-tabs-switch{background:var(--bg);padding:6px;border-radius:9999px;box-shadow:inset 2px 2px 5px rgba(42,35,25,0.1),inset -2px -2px 5px #ffffff;display:inline-flex}.about-tab-btn{border:none;background:transparent;color:var(--text-muted);font-size:0.9rem;font-weight:600;padding:0.6rem 1.4rem;border-radius:9999px;cursor:pointer;transition:all 0.25s cubic-bezier(0.4,0,0.2,1)}.about-tab-btn:hover{color:var(--primary)}.about-tab-btn.active{background:var(--primary);color:var(--on-primary);box-shadow:3px 3px 8px rgba(112,36,83,0.35),-2px -2px 6px rgba(255,255,255,0.6)}.about-tab-contents{background:var(--bg);border-radius:20px;padding:1.75rem;box-shadow:inset 2px 2px 5px rgba(42,35,25,0.08),inset -2px -2px 5px #ffffff}.about-pane-title{font-size:1.2rem;font-weight:700;color:var(--text);margin-bottom:0.75rem}.about-stat-box{background:var(--surface);border-radius:18px;min-width:140px;box-shadow:4px 4px 10px rgba(42,35,25,0.08),-4px -4px 10px #ffffff;border:1px solid rgba(228,223,216,0.6)}.about-stat-number{font-size:1.85rem;font-weight:800;color:var(--primary);line-height:1.1}.about-stat-subtext{font-size:0.8rem;color:var(--text-muted);font-weight:600}@media (max-width:767px){.about-page-block{padding:3rem 0}.about-section-header{margin-bottom:2.5rem}.about-lead-text{font-size:1rem}.about-card-heading{font-size:1.25rem}.about-story-media{height:200px}.about-tabs-switch{border-radius:18px;width:100%}.about-tab-btn{width:100%;text-align:center}.about-tab-contents{padding:1.25rem}.about-stat-box{width:100%;text-align:center}}
/* ===== PAGE: contact ===== */
.contact-page-section { background-color: var(--bg, #FCF8F3); }
.contact-page-section .contact-subtitle { max-width: 680px; font-size: 1.0625rem; line-height: 1.6; }
.contact-page-section .contact-groove-divider { width: 80px; height: 4px; border-radius: 9999px; background-color: #E4DFD8; box-shadow: inset 1px 1px 3px rgba(42,35,25,0.2), inset -1px -1px 3px #FFFFFF; }
.contact-page-section .contact-info-card, .contact-page-section .contact-form-card { background: var(--surface, #FFFFFF); border-radius: 24px; padding: 2.5rem 2rem; box-shadow: 6px 6px 14px rgba(42, 35, 25, 0.07), -6px -6px 14px #FFFFFF; border: 1px solid rgba(228, 223, 216, 0.6); }
.contact-page-section .contact-rivet { position: absolute; width: 6px; height: 6px; border-radius: 50%; background: #E4DFD8; box-shadow: 1px 1px 2px rgba(42,35,25,0.2), -1px -1px 2px #FFFFFF; z-index: 2; }
.contact-page-section .contact-rivet-tl { top: 12px; left: 12px; }
.contact-page-section .contact-rivet-tr { top: 12px; right: 12px; }
.contact-page-section .contact-rivet-bl { bottom: 12px; left: 12px; }
.contact-page-section .contact-rivet-br { bottom: 12px; right: 12px; }
.contact-page-section .contact-card-title { color: var(--text, #2A2319); font-size: 1.5rem; font-weight: 700; }
.contact-page-section .contact-icon-well { width: 48px; height: 48px; border-radius: 50%; background: var(--bg, #FCF8F3); display: flex; align-items: center; justify-content: center; color: var(--primary, #702453); box-shadow: inset 3px 3px 6px rgba(42, 35, 25, 0.12), inset -3px -3px 6px #FFFFFF; }
.contact-page-section .contact-label { letter-spacing: 0.05em; margin-bottom: 0.25rem; }
.contact-page-section .contact-link { color: var(--primary, #702453); text-decoration: none; word-break: break-word; transition: color 0.2s ease; }
.contact-page-section .contact-link:hover { color: var(--primary-hover, #551B3F); text-decoration: underline; }
.contact-page-section .contact-value { color: var(--text, #2A2319); word-break: break-word; }
.contact-page-section .contact-input, .contact-page-section .contact-textarea { background-color: var(--bg, #FCF8F3); border: 1px solid var(--border, #E4DFD8); color: var(--text, #2A2319); border-radius: 12px; padding: 0.85rem 1.15rem; font-size: 0.95rem; box-shadow: inset 2px 2px 4px rgba(42, 35, 25, 0.06), inset -2px -2px 4px #FFFFFF; transition: all 0.2s ease; }
.contact-page-section .contact-input::placeholder, .contact-page-section .contact-textarea::placeholder { color: #8C8476; opacity: 1; }
.contact-page-section .contact-input:focus, .contact-page-section .contact-textarea:focus { background-color: #FFFFFF; border-color: var(--primary, #702453); box-shadow: 0 0 0 3px rgba(112, 36, 83, 0.15); outline: none; color: var(--text, #2A2319); }
.contact-page-section .form-check-input { background-color: var(--bg, #FCF8F3); border: 1px solid var(--border, #E4DFD8); border-radius: 6px; width: 1.15rem; height: 1.15rem; margin-top: 0.15rem; box-shadow: inset 1px 1px 3px rgba(42,35,25,0.12); cursor: pointer; }
.contact-page-section .form-check-input:checked { background-color: var(--primary, #702453); border-color: var(--primary, #702453); }
.contact-page-section .contact-consent-link { color: var(--primary, #702453); }
.contact-page-section .contact-consent-link:hover { color: var(--primary-hover, #551B3F); }
.contact-page-section .vcc-btn { background-color: var(--primary, #702453); color: #FFFFFF; border: none; border-radius: 9999px; font-weight: 600; box-shadow: 4px 4px 10px rgba(112, 36, 83, 0.35), -4px -4px 10px rgba(255, 255, 255, 0.8); transition: all 0.2s ease; }
.contact-page-section .vcc-btn:hover { background-color: var(--primary-hover, #551B3F); color: #FFFFFF; box-shadow: inset 3px 3px 6px rgba(0, 0, 0, 0.25), inset -3px -3px 6px rgba(255, 255, 255, 0.1); transform: translateY(1px); }
@media (max-width: 767.98px) {
.contact-page-section .contact-info-card, .contact-page-section .contact-form-card { padding: 1.75rem 1.25rem; border-radius: 20px; }
.contact-page-section .contact-card-title { font-size: 1.25rem; }
}
/* ===== PAGE: privacy ===== */
.bk-privacy-section{background-color:var(--bg);color:var(--text);position:relative}.bk-privacy-card,.bk-privacy-nav-card{position:relative;background-color:var(--surface);border-radius:24px;box-shadow:6px 6px 14px rgba(42,35,25,0.07),-6px -6px 14px rgba(255,255,255,0.85);border:1px solid var(--border);overflow:hidden}.bk-rivet{position:absolute;width:6px;height:6px;border-radius:50%;background-color:var(--border);box-shadow:1px 1px 2px rgba(42,35,25,0.2),-1px -1px 2px #ffffff;pointer-events:none}.bk-rivet-tl{top:12px;left:12px}.bk-rivet-tr{top:12px;right:12px}.bk-rivet-bl{bottom:12px;left:12px}.bk-rivet-br{bottom:12px;right:12px}.bk-icon-well{width:48px;height:48px;min-width:48px;border-radius:50%;background-color:var(--bg);display:flex;align-items:center;justify-content:center;box-shadow:inset 3px 3px 6px rgba(42,35,25,0.12),inset -3px -3px 6px #ffffff;color:var(--primary)}.bk-mini-well{width:40px;height:40px;border-radius:50%;background-color:var(--bg);display:flex;align-items:center;justify-content:center;box-shadow:inset 2px 2px 4px rgba(42,35,25,0.1),inset -2px -2px 4px #ffffff;color:var(--primary)}.bk-nav-icon,.bk-section-icon{width:22px;height:22px}.bk-mini-icon{width:18px;height:18px}.bk-sidebar-title{font-size:1.125rem;font-weight:700;color:var(--text)}.bk-groove-divider{height:4px;width:100%;border-radius:9999px;background-color:var(--bg);box-shadow:inset 1px 1px 3px rgba(42,35,25,0.2),inset -1px -1px 3px #ffffff}.bk-privacy-nav-link{display:flex;align-items:center;gap:0.625rem;padding:0.625rem 0.875rem;border-radius:9999px;color:var(--text-muted);text-decoration:none;font-weight:500;font-size:0.9rem;transition:all 0.25s cubic-bezier(0.4,0,0.2,1);background-color:transparent}.bk-privacy-nav-link:hover{color:var(--primary);background-color:var(--surface_alt)}.bk-privacy-nav-link.active{color:var(--primary);font-weight:700;background-color:var(--surface_alt);box-shadow:inset 2px 2px 5px rgba(42,35,25,0.08),inset -2px -2px 5px #ffffff}.bk-nav-dot{width:6px;height:6px;border-radius:50%;background-color:var(--border);transition:all 0.25s ease}.bk-privacy-nav-link.active .bk-nav-dot,.bk-privacy-nav-link:hover .bk-nav-dot{background-color:var(--primary)}.bk-update-box{background-color:var(--surface_alt);border-radius:16px;box-shadow:inset 2px 2px 4px rgba(42,35,25,0.06),inset -2px -2px 4px #ffffff}.bk-update-label{font-size:0.75rem;text-transform:uppercase;letter-spacing:0.05em;color:var(--text-muted)}.bk-update-date{font-size:0.875rem;color:var(--primary)}.bk-text-content{font-size:0.975rem;line-height:1.65;color:var(--text-muted)}.bk-sub-panel{background-color:var(--bg);border-radius:16px;box-shadow:inset 2px 2px 5px rgba(42,35,25,0.06),inset -2px -2px 5px #ffffff;border:1px solid rgba(228,223,216,0.6)}.bk-sub-title{font-size:0.95rem;font-weight:700;color:var(--text)}.bk-sub-desc{font-size:0.875rem;line-height:1.55;color:var(--text-muted)}.bk-feature-list{list-style:none}.bk-bullet-disc{width:8px;height:8px;border-radius:50%;background-color:var(--primary);box-shadow:1px 1px 3px rgba(112,36,83,0.3)}.bk-list-headline{font-size:0.95rem;color:var(--text);margin-bottom:0.15rem}.bk-contact-banner{background-color:var(--surface_alt);border-radius:20px;box-shadow:inset 2px 2px 6px rgba(42,35,25,0.08),inset -2px -2px 6px #ffffff;border:1px solid var(--border)}.bk-contact-subtitle{font-size:0.85rem}@media(max-width:991px){.bk-privacy-nav-card{position:static!important;margin-bottom:1.5rem}}@media(max-width:767px){.bk-privacy-card{padding:1.5rem!important}.bk-contact-banner{flex-direction:column;align-items:flex-start}}
/* ===== PAGE: terms ===== */
.breykers-terms-block {
position: relative;
padding-top: 3.5rem;
padding-bottom: 5rem;
}
.breykers-terms-sidebar {
top: 6rem;
z-index: 10;
}
.breykers-toc-card {
position: relative;
background: var(--surface);
border-radius: 24px;
padding: 1.75rem;
box-shadow: 6px 6px 14px rgba(42, 35, 25, 0.07), -6px -6px 14px rgba(255, 255, 255, 0.85);
border: 1px solid var(--border);
}
.breykers-rivet {
position: absolute;
width: 6px;
height: 6px;
border-radius: 50%;
background: var(--border);
box-shadow: 1px 1px 2px rgba(42, 35, 25, 0.2), -1px -1px 2px #FFFFFF;
}
.breykers-rivet-tl { top: 12px; left: 12px; }
.breykers-rivet-tr { top: 12px; right: 12px; }
.breykers-rivet-bl { bottom: 12px; left: 12px; }
.breykers-rivet-br { bottom: 12px; right: 12px; }
.breykers-toc-icon {
width: 44px;
height: 44px;
border-radius: 14px;
background: var(--bg);
display: flex;
align-items: center;
justify-content: center;
color: var(--primary);
box-shadow: inset 2px 2px 4px rgba(42, 35, 25, 0.1), inset -2px -2px 4px #FFFFFF;
}
.breykers-toc-heading {
font-size: 1.15rem;
font-weight: 700;
color: var(--text);
line-height: 1.2;
}
.breykers-search-box .form-control {
background: var(--bg);
border: 1px solid var(--border);
border-radius: 9999px;
font-size: 0.9rem;
padding: 0.65rem 1.25rem;
color: var(--text);
box-shadow: inset 2px 2px 5px rgba(42, 35, 25, 0.08), inset -2px -2px 5px rgba(255, 255, 255, 0.8);
transition: border-color 0.2s ease, box-shadow 0.2s ease;
}
.breykers-search-box .form-control::placeholder {
color: var(--text-muted);
opacity: 0.85;
}
.breykers-search-box .form-control:focus {
outline: none;
border-color: var(--primary);
box-shadow: inset 3px 3px 6px rgba(42, 35, 25, 0.12), inset -3px -3px 6px #FFFFFF, 0 0 0 3px rgba(112, 36, 83, 0.15);
}
.breykers-toc-link {
display: flex;
align-items: center;
gap: 0.75rem;
padding: 0.65rem 1rem;
border-radius: 12px;
text-decoration: none;
color: var(--text-muted);
font-size: 0.9rem;
font-weight: 500;
transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1);
background: transparent;
}
.breykers-toc-num {
font-size: 0.75rem;
font-weight: 700;
padding: 0.2rem 0.45rem;
border-radius: 6px;
background: var(--surface-alt);
color: var(--primary);
}
.breykers-toc-link:hover {
color: var(--primary);
background: var(--surface-alt);
transform: translateX(4px);
}
.breykers-toc-link.active {
background: var(--surface-alt);
color: var(--primary);
font-weight: 700;
box-shadow: inset 2px 2px 4px rgba(42, 35, 25, 0.08), inset -2px -2px 4px #FFFFFF;
}
.breykers-status-pill {
display: inline-flex;
align-items: center;
gap: 0.4rem;
font-size: 0.75rem;
font-weight: 600;
color: var(--text-muted);
}
.breykers-status-dot {
width: 8px;
height: 8px;
border-radius: 50%;
background: #22C55E;
box-shadow: 0 0 0 2px rgba(34, 197, 94, 0.2);
}
.breykers-term-article {
position: relative;
background: var(--surface);
border-radius: 24px;
padding: 2.25rem;
box-shadow: 6px 6px 14px rgba(42, 35, 25, 0.07), -6px -6px 14px rgba(255, 255, 255, 0.85);
border: 1px solid var(--border);
scroll-margin-top: 6rem;
transition: transform 0.3s ease, box-shadow 0.3s ease;
}
.breykers-term-article:hover {
transform: translateY(-2px);
box-shadow: 8px 8px 18px rgba(42, 35, 25, 0.09), -8px -8px 18px #FFFFFF;
}
.breykers-article-meta {
font-size: 0.8rem;
font-weight: 600;
color: var(--text-muted);
text-transform: uppercase;
letter-spacing: 0.05em;
}
.breykers-article-title {
font-size: 1.5rem;
font-weight: 700;
color: var(--text);
line-height: 1.3;
overflow-wrap: anywhere;
}
.breykers-sub-title {
font-size: 1.15rem;
font-weight: 700;
color: var(--text);
line-height: 1.3;
overflow-wrap: anywhere;
}
.breykers-groove-divider {
height: 4px;
border-radius: 9999px;
background: var(--surface-alt);
box-shadow: inset 1px 1px 3px rgba(42, 35, 25, 0.15), inset -1px -1px 3px #FFFFFF;
width: 100%;
}
.breykers-article-p {
color: var(--text);
line-height: 1.65;
font-size: 0.975rem;
margin-bottom: 1rem;
overflow-wrap: anywhere;
}
.breykers-text-link {
color: var(--primary);
font-weight: 600;
text-decoration: underline;
text-underline-offset: 3px;
transition: color 0.2s ease;
}
.breykers-text-link:hover {
color: var(--primary-hover);
}
.breykers-callout-pill {
background: var(--surface-alt);
border-radius: 16px;
border: 1px solid var(--border);
box-shadow: inset 2px 2px 4px rgba(42, 35, 25, 0.06), inset -2px -2px 4px #FFFFFF;
}
.breykers-callout-icon {
width: 36px;
height: 36px;
border-radius: 10px;
background: #FFFFFF;
display: flex;
align-items: center;
justify-content: center;
color: var(--primary);
box-shadow: 2px 2px 6px rgba(42, 35, 25, 0.08), -2px -2px 6px #FFFFFF;
}
.breykers-callout-text {
font-size: 0.875rem;
font-weight: 500;
color: var(--text);
line-height: 1.5;
}
.breykers-feature-list {
list-style: none;
padding: 0;
margin: 0;
}
.breykers-feature-list li span:last-child {
font-size: 0.95rem;
color: var(--text);
line-height: 1.5;
overflow-wrap: anywhere;
}
.breykers-check-bullet {
width: 8px;
height: 8px;
border-radius: 50%;
background: var(--primary);
margin-top: 0.5rem;
flex-shrink: 0;
box-shadow: 1px 1px 2px rgba(42, 35, 25, 0.2);
}
.breykers-inner-panel {
background: var(--bg);
border-radius: 16px;
border: 1px solid var(--border);
box-shadow: inset 2px 2px 4px rgba(42, 35, 25, 0.06), inset -2px -2px 4px #FFFFFF;
}
.breykers-inner-title {
font-size: 1rem;
font-weight: 700;
color: var(--text);
line-height: 1.3;
}
.breykers-inner-text {
font-size: 0.875rem;
color: var(--text-muted);
line-height: 1.5;
overflow-wrap: anywhere;
}
.breykers-contact-callout {
background: var(--surface-alt);
border: 1px solid var(--border);
box-shadow: inset 2px 2px 5px rgba(42, 35, 25, 0.08), inset -2px -2px 5px #FFFFFF;
}
.breykers-contact-callout-title {
font-size: 1.15rem;
font-weight: 700;
color: var(--text);
line-height: 1.3;
}
.breykers-contact-callout-text {
font-size: 0.9rem;
color: var(--text-muted);
line-height: 1.5;
overflow-wrap: anywhere;
}
@media (max-width: 991px) {
.breykers-terms-sidebar {
position: static !important;
}
}
@media (max-width: 767px) {
.breykers-terms-block {
padding-top: 2rem;
padding-bottom: 3.5rem;
}
.breykers-term-article {
padding: 1.5rem 1.25rem;
border-radius: 18px;
}
.breykers-toc-card {
padding: 1.25rem;
border-radius: 18px;
}
.breykers-article-title {
font-size: 1.25rem;
hyphens: auto;
}
.breykers-sub-title {
font-size: 1.05rem;
hyphens: auto;
}
}
/* ===== PAGE: disclaimer ===== */
.disclaimer-page{position:relative;overflow:hidden;background-color:var(--bg);color:var(--text);}.disclaimer-page__header{max-width:840px;margin-left:auto;margin-right:auto;}.disclaimer-page__groove{width:80px;height:4px;border-radius:9999px;background-color:var(--border);box-shadow:inset 1px 1px 3px rgba(42,35,25,0.2),inset -1px -1px 3px #FFFFFF;}.disclaimer-page__lead{max-width:680px;font-size:1.0625rem;line-height:1.6;color:var(--text-muted);}.disclaimer-page__sidebar{top:2rem;z-index:2;}.disclaimer-page__sidebar .vcc-card{position:relative;background:#FFFFFF;border-radius:24px;border:1px solid var(--border);box-shadow:6px 6px 14px rgba(42,35,25,0.07),-6px -6px 14px #FFFFFF;}.disclaimer-page__rivet{position:absolute;width:6px;height:6px;border-radius:50%;background:#E4DFD8;box-shadow:1px 1px 2px rgba(42,35,25,0.2),-1px -1px 2px #FFFFFF;pointer-events:none;}.disclaimer-page__rivet--tl{top:12px;left:12px;}.disclaimer-page__rivet--tr{top:12px;right:12px;}.disclaimer-page__rivet--bl{bottom:12px;left:12px;}.disclaimer-page__rivet--br{bottom:12px;right:12px;}.disclaimer-page__icon-well{width:44px;height:44px;border-radius:50%;display:inline-flex;align-items:center;justify-content:center;background:var(--bg);color:var(--primary);box-shadow:inset 3px 3px 6px rgba(42,35,25,0.12),inset -3px -3px 6px #FFFFFF;flex-shrink:0;}.disclaimer-page__nav-link{display:block;padding:0.625rem 0.875rem;border-radius:9999px;font-size:0.875rem;font-weight:500;color:var(--text);text-decoration:none;transition:all 0.3s cubic-bezier(0.4,0,0.2,1);box-shadow:none;border:1px solid transparent;}.disclaimer-page__nav-link:hover{color:var(--primary);background:var(--surface-alt);transform:translateX(4px);}.disclaimer-page__nav-link.active{background:var(--primary);color:var(--on-primary);box-shadow:4px 4px 10px rgba(112,36,83,0.3),-4px -4px 10px rgba(255,255,255,0.7);}.disclaimer-page__article{position:relative;background:#FFFFFF;border-radius:24px;border:1px solid var(--border);box-shadow:6px 6px 14px rgba(42,35,25,0.07),-6px -6px 14px #FFFFFF;transition:box-shadow 0.3s ease,transform 0.3s ease;overflow-wrap:anywhere;}.disclaimer-page__article:hover{box-shadow:10px 10px 22px rgba(42,35,25,0.1),-10px -10px 22px #FFFFFF;}.disclaimer-page__article h3{color:var(--text);letter-spacing:-0.01em;}.disclaimer-page__article p{line-height:1.65;font-size:0.975rem;color:var(--text);}@media(max-width:767px){.disclaimer-page .vcc-title{font-size:16px!important;hyphens:auto;}.disclaimer-page h3{font-size:14px!important;hyphens:auto;}.disclaimer-page__sidebar{position:static!important;margin-bottom:1.5rem;}.disclaimer-page__article{padding:1.5rem 1rem!important;}}
.hotel-comment-card {
background: #FFFFFF;
border-radius: 24px;
box-shadow: 6px 6px 14px rgba(42, 35, 25, 0.07), -6px -6px 14px rgba(255, 255, 255, 0.85);
border: 1px solid #E4DFD8;
transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1), box-shadow 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}
.hotel-comment-card:hover {
transform: translateY(-2px);
box-shadow: 8px 8px 18px rgba(42, 35, 25, 0.1), -8px -8px 18px rgba(255, 255, 255, 0.95);
}
.neo-avatar-well {
width: 64px;
height: 64px;
padding: 4px;
border-radius: 50%;
background: #FCF8F3;
box-shadow: inset 3px 3px 6px rgba(42, 35, 25, 0.12), inset -3px -3px 6px #FFFFFF;
display: flex;
align-items: center;
justify-content: center;
flex-shrink: 0;
}
.hotel-comment-avatar {
width: 56px;
height: 56px;
object-fit: cover;
display: block;
border: 2px solid #FFFFFF;
}
.comment-author {
font-size: 1.125rem;
font-weight: 700;
color: #2A2319;
}
.comment-text {
font-size: 1rem;
line-height: 1.6;
color: #2A2319;
}
.comment-date {
color: #6D6455;
}
.neo-badge-stay {
background: #F4E9F0;
color: #702453;
font-weight: 600;
font-size: 0.6875rem;
padding: 0.35rem 0.65rem;
border-radius: 9999px;
letter-spacing: 0.04em;
}
.neo-rating-pill {
background: #FCF8F3;
border-radius: 9999px;
padding: 0.4rem 0.85rem;
box-shadow: inset 2px 2px 4px rgba(42, 35, 25, 0.08), inset -2px -2px 4px #FFFFFF;
}
.neo-rating-pill .star-icon {
color: #B82CE4;
}
.neo-action-btn {
background: #FCF8F3;
color: #2A2319;
border: none;
border-radius: 9999px;
padding: 0.5rem 1rem;
font-size: 0.875rem;
font-weight: 500;
box-shadow: 3px 3px 8px rgba(42, 35, 25, 0.08), -3px -3px 8px #FFFFFF;
transition: all 0.2s ease;
}
.neo-action-btn:hover {
background: #FFFFFF;
color: #702453;
box-shadow: inset 2px 2px 4px rgba(42, 35, 25, 0.1), inset -2px -2px 4px #FFFFFF;
}
.neo-count-badge {
background: #F4E9F0;
color: #702453;
font-weight: 700;
font-size: 0.75rem;
padding: 0.15rem 0.5rem;
border-radius: 9999px;
}
.neo-reply-btn {
background: #702453;
color: #FFFFFF;
border: none;
border-radius: 9999px;
padding: 0.5rem 1.25rem;
font-size: 0.875rem;
font-weight: 600;
box-shadow: 3px 3px 8px rgba(112, 36, 83, 0.3), -3px -3px 8px rgba(255, 255, 255, 0.8);
transition: all 0.2s ease;
}
.neo-reply-btn:hover {
background: #551B3F;
color: #FFFFFF;
box-shadow: inset 2px 2px 5px rgba(0, 0, 0, 0.25), inset -2px -2px 5px rgba(255, 255, 255, 0.1);
}
.neo-rivet {
position: absolute;
width: 6px;
height: 6px;
border-radius: 50%;
background: #E4DFD8;
box-shadow: 1px 1px 2px rgba(42, 35, 25, 0.2), -1px -1px 2px #FFFFFF;
}
.neo-rivet.top-left {
top: 12px;
left: 12px;
}
.neo-rivet.top-right {
top: 12px;
right: 12px;
}
.neo-rivet.bottom-left {
bottom: 12px;
left: 12px;
}
.neo-rivet.bottom-right {
bottom: 12px;
right: 12px;
}
.hotel-reply-card {
background: #FCF8F3;
border-radius: 20px;
box-shadow: inset 2px 2px 5px rgba(42, 35, 25, 0.06), inset -2px -2px 5px #FFFFFF;
border: 1px solid #E4DFD8;
}
.reply-connector-indicator {
position: absolute;
left: -1.25rem;
top: 1.5rem;
width: 1rem;
height: 2px;
background: #E4DFD8;
border-radius: 9999px;
}
.neo-avatar-well-nested {
width: 52px;
height: 52px;
padding: 3px;
border-radius: 50%;
background: #FFFFFF;
box-shadow: inset 2px 2px 4px rgba(42, 35, 25, 0.12), inset -2px -2px 4px #FFFFFF;
display: flex;
align-items: center;
justify-content: center;
flex-shrink: 0;
}
.hotel-reply-avatar {
width: 46px;
height: 46px;
object-fit: cover;
display: block;
border: 1.5px solid #F4E9F0;
}
.neo-badge-staff {
background: #702453;
color: #FFFFFF;
font-weight: 600;
font-size: 0.625rem;
padding: 0.25rem 0.5rem;
border-radius: 9999px;
letter-spacing: 0.04em;
}
.neo-action-btn-sm {
padding: 0.35rem 0.75rem;
font-size: 0.8125rem;
}
.official-seal {
font-weight: 500;
color: #6D6455;
}
/* ===== PAGE TEMPLATE: hotels ===== */
.breykers-header-wrap {
position: sticky;
top: 0;
z-index: 1020;
padding: 1rem 0;
background-color: var(--bg);
box-shadow: 0 4px 12px rgba(42, 35, 25, 0.04);
}
.breykers-header-wrap .breykers-navbar {
position: relative;
background-color: #FCF8F3;
border-radius: 24px;
padding: 0.75rem 1.25rem;
border: 1px solid #E4DFD8;
box-shadow: 6px 6px 14px rgba(42, 35, 25, 0.07), -6px -6px 14px #FFFFFF;
}
.breykers-header-wrap .breykers-brand {
display: inline-flex;
align-items: center;
gap: 0.75rem;
text-decoration: none;
padding: 0;
margin: 0;
z-index: 1030;
}
.breykers-header-wrap .breykers-logo-well {
width: 46px;
height: 46px;
border-radius: 50%;
display: inline-flex;
align-items: center;
justify-content: center;
background-color: #FCF8F3;
box-shadow: inset 3px 3px 6px rgba(42, 35, 25, 0.12), inset -3px -3px 6px #FFFFFF;
padding: 4px;
flex-shrink: 0;
}
.breykers-header-wrap .breykers-logo-img {
width: 100%;
height: 100%;
max-width: 42px;
max-height: 42px;
object-fit: cover;
border-radius: 50%;
display: block;
}
.breykers-header-wrap .breykers-brand-name {
font-family: 'Libre Franklin', sans-serif;
font-weight: 700;
font-size: 1.125rem;
color: #702453;
letter-spacing: 0.02em;
text-shadow: 1px 1px 0 #FFFFFF;
}
.breykers-header-wrap .breykers-toggler {
border: none;
background-color: #FCF8F3;
width: 44px;
height: 44px;
border-radius: 12px;
padding: 0;
display: inline-flex;
align-items: center;
justify-content: center;
color: #702453;
box-shadow: 3px 3px 7px rgba(42, 35, 25, 0.1), -3px -3px 7px #FFFFFF;
transition: box-shadow 0.2s ease, transform 0.2s ease;
}
.breykers-header-wrap .breykers-toggler:focus {
outline: none;
box-shadow: inset 2px 2px 5px rgba(42, 35, 25, 0.15), inset -2px -2px 5px #FFFFFF;
}
.breykers-header-wrap .breykers-toggler-icon {
width: 24px;
height: 24px;
stroke-width: 2.2;
}
.breykers-header-wrap .breykers-collapse {
background-color: #FCF8F3;
}
.breykers-header-wrap .breykers-nav-link {
font-family: 'Libre Franklin', sans-serif;
font-weight: 600;
font-size: 0.9375rem;
color: #2A2319;
padding: 0.625rem 1rem;
border-radius: 9999px;
transition: all 0.25s ease;
text-decoration: none;
display: inline-block;
}
.breykers-header-wrap .breykers-nav-link:hover,
.breykers-header-wrap .breykers-nav-link:focus {
color: #702453;
background-color: #F4E9F0;
box-shadow: inset 2px 2px 4px rgba(42, 35, 25, 0.08), inset -2px -2px 4px #FFFFFF;
}
.breykers-header-wrap .breykers-cta-wrap {
display: flex;
align-items: center;
}
.breykers-header-wrap .breykers-book-btn {
display: inline-flex;
align-items: center;
justify-content: center;
white-space: nowrap;
font-weight: 600;
font-size: 0.9375rem;
text-decoration: none;
}
@media (max-width:991.98px) {
.breykers-header-wrap .breykers-collapse {
margin-top: 1rem;
padding-top: 1rem;
border-top: 1px solid #E4DFD8;
}
.breykers-header-wrap .breykers-nav-left,
.breykers-header-wrap .breykers-nav-right {
display: flex;
flex-direction: column;
gap: 0.375rem;
padding: 0;
margin: 0;
}
.breykers-header-wrap .breykers-nav-right {
margin-top: 0.375rem;
}
.breykers-header-wrap .breykers-nav-link {
width: 100%;
padding: 0.75rem 1rem;
font-size: 0.875rem;
}
.breykers-header-wrap .breykers-cta-wrap {
margin-top: 1rem;
padding-top: 0.75rem;
border-top: 1px solid #E4DFD8;
}
.breykers-header-wrap .breykers-book-btn {
width: 100%;
text-align: center;
padding: 0.75rem 1.5rem;
}
}
@media (min-width:992px) {
.breykers-header-wrap .breykers-navbar {
border-radius: 9999px;
padding: 0.5rem 1.5rem;
}
.breykers-header-wrap .breykers-brand {
position: absolute;
left: 50%;
top: 50%;
transform: translate(-50%, -50%);
margin: 0;
}
.breykers-header-wrap .breykers-collapse {
display: flex;
align-items: center;
justify-content: space-between;
width: 100%;
background-color: transparent;
}
.breykers-header-wrap .breykers-nav-left {
display: flex;
align-items: center;
gap: 0.5rem;
margin-right: auto;
padding-right: 120px;
}
.breykers-header-wrap .breykers-nav-right {
display: flex;
align-items: center;
gap: 0.5rem;
margin-left: auto;
padding-left: 120px;
}
.breykers-header-wrap .breykers-cta-wrap {
margin-left: 1rem;
}
}
.hero-breykers {
padding-top: 3.5rem;
padding-bottom: 3.5rem;
}
.hero-breykers__content {
z-index: 2;
}
.hero-breykers__eyebrow {
display: inline-block;
padding: 0.35rem 1rem;
font-size: 0.8125rem;
font-weight: 700;
letter-spacing: 0.05em;
text-transform: uppercase;
color: var(--primary-text);
background-color: var(--surface-alt);
border-radius: 9999px;
box-shadow: inset 2px 2px 4px rgba(42, 35, 25, 0.08), inset -2px -2px 4px #FFFFFF;
}
.hero-breykers__title {
font-size: clamp(1.75rem, 3.8vw, 3.25rem);
font-weight: 800;
line-height: 1.2;
color: var(--text);
text-shadow: 1px 1px 0px #FFFFFF, -1px -1px 0px rgba(42, 35, 25, 0.12);
overflow-wrap: anywhere;
}
.hero-breykers__description {
font-size: clamp(0.95rem, 1.2vw, 1.125rem);
line-height: 1.6;
color: var(--text-muted);
max-width: 580px;
overflow-wrap: anywhere;
}
.hero-breykers__cta-btn {
background-color: var(--primary);
color: var(--on-primary);
border-radius: 9999px;
padding: 0.875rem 1.85rem;
font-weight: 600;
font-size: 0.95rem;
text-decoration: none;
box-shadow: 4px 4px 10px rgba(112, 36, 83, 0.35), -4px -4px 10px rgba(255, 255, 255, 0.8);
transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
border: none;
}
.hero-breykers__cta-btn:hover {
background-color: var(--primary-hover);
color: var(--on-primary);
transform: translateY(-2px);
box-shadow: 6px 6px 14px rgba(112, 36, 83, 0.45), -6px -6px 14px rgba(255, 255, 255, 0.95);
}
.hero-breykers__cta-btn:active {
transform: translateY(1px);
box-shadow: inset 3px 3px 6px rgba(0, 0, 0, 0.25), inset -3px -3px 6px rgba(255, 255, 255, 0.1);
}
.hero-breykers__secondary-btn {
background-color: var(--surface);
color: var(--primary-text);
border-radius: 9999px;
padding: 0.875rem 1.85rem;
font-weight: 600;
font-size: 0.95rem;
text-decoration: none;
box-shadow: 4px 4px 10px rgba(42, 35, 25, 0.08), -4px -4px 10px #FFFFFF;
transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
border: 1px solid var(--border);
}
.hero-breykers__secondary-btn:hover {
background-color: var(--surface-alt);
color: var(--primary-text);
transform: translateY(-2px);
box-shadow: 6px 6px 14px rgba(42, 35, 25, 0.12), -6px -6px 14px #FFFFFF;
}
.hero-breykers__secondary-btn:active {
transform: translateY(1px);
box-shadow: inset 2px 2px 5px rgba(42, 35, 25, 0.12), inset -2px -2px 5px #FFFFFF;
}
.hero-breykers__btn-icon {
width: 1.15rem;
height: 1.15rem;
}
.hotel-hero-rating {
background-color: var(--surface);
padding: 0.35rem 0.85rem;
border-radius: 9999px;
box-shadow: 2px 2px 6px rgba(42, 35, 25, 0.06), -2px -2px 6px #FFFFFF;
border: 1px solid rgba(228, 223, 216, 0.6);
font-size: 0.8125rem;
font-weight: 700;
}
.hotel-hero-stars {
color: #b82ce4;
}
.hotel-hero-score {
color: var(--primary-text);
}
.hotel-hero-location {
margin-top: 0.5rem;
}
.hotel-hero-loc-icon {
width: 32px;
height: 32px;
border-radius: 50%;
background-color: var(--surface-alt);
display: flex;
align-items: center;
justify-content: center;
color: var(--primary);
box-shadow: inset 2px 2px 4px rgba(42, 35, 25, 0.1), inset -2px -2px 4px #FFFFFF;
}
.hotel-hero-loc-icon svg {
width: 16px;
height: 16px;
}
.hotel-hero-loc-text {
font-size: 0.9375rem;
font-weight: 600;
color: var(--text-muted);
}
.hero-breykers__image-panel {
background: var(--surface);
border-radius: 32px;
padding: 1rem;
box-shadow: 8px 8px 20px rgba(42, 35, 25, 0.09), -8px -8px 20px #FFFFFF;
transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}
.hero-breykers__image-panel:hover {
transform: translateY(-4px);
}
.hero-breykers__media-wrapper {
position: relative;
border-radius: 24px;
overflow: hidden;
aspect-ratio: 4 / 3;
box-shadow: inset 2px 2px 6px rgba(0, 0, 0, 0.15);
}
.hero-breykers__img {
width: 100%;
height: 100%;
object-fit: cover;
display: block;
}
.hero-breykers__rivet {
position: absolute;
width: 6px;
height: 6px;
background: var(--border);
border-radius: 50%;
box-shadow: 1px 1px 2px rgba(42, 35, 25, 0.2), -1px -1px 2px #FFFFFF;
z-index: 3;
}
.hero-breykers__rivet--tl {
top: 12px;
left: 12px;
}
.hero-breykers__rivet--tr {
top: 12px;
right: 12px;
}
.hero-breykers__rivet--bl {
bottom: 12px;
left: 12px;
}
.hero-breykers__rivet--br {
bottom: 12px;
right: 12px;
}
.hero-breykers__floating-badge {
bottom: -15px;
left: 24px;
background: var(--surface);
padding: 0.6rem 1.1rem;
border-radius: 9999px;
box-shadow: 6px 6px 14px rgba(42, 35, 25, 0.12), -6px -6px 14px #FFFFFF;
border: 1px solid var(--border);
z-index: 4;
}
.hero-breykers__floating-icon-well {
width: 32px;
height: 32px;
border-radius: 50%;
background: var(--surface-alt);
display: flex;
align-items: center;
justify-content: center;
box-shadow: inset 2px 2px 4px rgba(42, 35, 25, 0.12), inset -2px -2px 4px #FFFFFF;
}
.hero-breykers__floating-icon {
width: 16px;
height: 16px;
color: var(--primary);
}
.hero-breykers__floating-text-group {
display: flex;
flex-direction: column;
line-height: 1.15;
}
.hero-breykers__floating-label {
font-size: 0.6875rem;
color: var(--text-muted);
text-transform: uppercase;
letter-spacing: 0.04em;
}
.hero-breykers__floating-value {
font-size: 0.875rem;
color: var(--text);
font-weight: 700;
}
.hotel-detail-main .hotel-panel {
background: var(--surface);
border-radius: 32px;
padding: 2.5rem 2rem;
box-shadow: 8px 8px 20px rgba(42, 35, 25, 0.08), -8px -8px 20px #FFFFFF;
border: 1px solid rgba(228, 223, 216, 0.6);
}
.hotel-detail-main .hotel-panel__rivet {
position: absolute;
width: 6px;
height: 6px;
border-radius: 50%;
background: var(--border);
box-shadow: 1px 1px 2px rgba(42, 35, 25, 0.2), -1px -1px 2px #FFFFFF;
z-index: 2;
}
.hotel-detail-main .hotel-panel__rivet--tl {
top: 14px;
left: 14px;
}
.hotel-detail-main .hotel-panel__rivet--tr {
top: 14px;
right: 14px;
}
.hotel-detail-main .hotel-panel__rivet--bl {
bottom: 14px;
left: 14px;
}
.hotel-detail-main .hotel-panel__rivet--br {
bottom: 14px;
right: 14px;
}
.hotel-detail-main .hotel-sec-title {
font-size: 1.875rem;
font-weight: 800;
color: var(--text);
border-left: 4px solid var(--primary);
padding-left: 0.875rem;
line-height: 1.25;
text-shadow: 1px 1px 0 #FFFFFF;
overflow-wrap: anywhere;
}
.hotel-detail-main .hotel-groove-divider {
height: 4px;
width: 100%;
border-radius: 9999px;
background: #E4DFD8;
box-shadow: inset 1px 1px 3px rgba(42, 35, 25, 0.2), inset -1px -1px 3px #FFFFFF;
}
.hotel-detail-main .hotel-intro-text {
font-size: 1.05rem;
line-height: 1.65;
color: var(--text-muted);
overflow-wrap: anywhere;
}
.hotel-detail-main .hotel-param-table-wrap {
border-radius: 20px;
overflow: hidden;
border: 1px solid var(--border);
background: #FCF8F3;
box-shadow: inset 2px 2px 6px rgba(42, 35, 25, 0.05);
padding: 1.25rem;
}
.hotel-detail-main .hotel-table-caption {
font-size: 1.15rem;
font-weight: 700;
color: var(--primary-text);
}
.hotel-detail-main .hotel-param-table {
border-collapse: separate;
border-spacing: 0;
}
.hotel-detail-main .hotel-param-row:nth-child(even) {
background-color: var(--surface-alt);
}
.hotel-detail-main .hotel-param-row:nth-child(odd) {
background-color: #FFFFFF;
}
.hotel-detail-main .hotel-param-name {
padding: 0.875rem 1.25rem;
font-weight: 700;
color: var(--text);
font-size: 0.9375rem;
width: 38%;
border-bottom: 1px solid #E4DFD8;
overflow-wrap: anywhere;
}
.hotel-detail-main .hotel-param-value {
padding: 0.875rem 1.25rem;
color: var(--text-muted);
font-size: 0.9375rem;
border-bottom: 1px solid #E4DFD8;
overflow-wrap: anywhere;
}
.hotel-detail-main .hotel-param-row:last-child .hotel-param-name,
.hotel-detail-main .hotel-param-row:last-child .hotel-param-value {
border-bottom: none;
}
.hotel-detail-main .hotel-body-content h3 {
font-size: 1.35rem;
font-weight: 700;
color: var(--text);
margin-top: 1.5rem;
margin-bottom: 0.75rem;
overflow-wrap: anywhere;
}
.hotel-detail-main .hotel-body-content p {
font-size: 0.975rem;
line-height: 1.65;
color: var(--text-muted);
margin-bottom: 1rem;
overflow-wrap: anywhere;
}
.hotel-detail-main .hotel-room-card {
background: #FCF8F3;
border: 1px solid var(--border);
border-radius: 24px;
padding: 1.75rem;
box-shadow: 4px 4px 10px rgba(42, 35, 25, 0.05), -4px -4px 10px #FFFFFF;
transition: transform 0.3s ease, box-shadow 0.3s ease;
}
.hotel-detail-main .hotel-room-card:hover {
transform: translateY(-3px);
box-shadow: 8px 8px 16px rgba(42, 35, 25, 0.09), -8px -8px 16px #FFFFFF;
}
.hotel-detail-main .hotel-icon-well {
width: 48px;
height: 48px;
border-radius: 50%;
background-color: var(--surface);
display: flex;
align-items: center;
justify-content: center;
color: var(--primary);
box-shadow: inset 2px 2px 4px rgba(42, 35, 25, 0.12), inset -2px -2px 4px #FFFFFF;
}
.hotel-detail-main .hotel-icon-well svg {
width: 24px;
height: 24px;
}
.hotel-detail-main .hotel-room-title {
font-size: 1.15rem;
font-weight: 700;
color: var(--text);
overflow-wrap: anywhere;
}
.hotel-detail-main .hotel-room-desc {
font-size: 0.9rem;
line-height: 1.55;
color: var(--text-muted);
margin-bottom: 1.25rem;
overflow-wrap: anywhere;
}
.hotel-detail-main .hotel-room-specs {
font-size: 0.85rem;
color: var(--text-muted);
display: flex;
flex-direction: column;
gap: 0.4rem;
border-top: 1px dashed var(--border);
padding-top: 0.85rem;
}
.hotel-detail-main .hotel-room-specs strong {
color: var(--text);
}
.hotel-detail-main .hotel-accordion {
display: flex;
flex-direction: column;
gap: 1rem;
}
.hotel-detail-main .hotel-accordion-item {
background: #FCF8F3;
border: 1px solid var(--border);
border-radius: 20px;
overflow: hidden;
box-shadow: 3px 3px 8px rgba(42, 35, 25, 0.05), -3px -3px 8px #FFFFFF;
}
.hotel-detail-main .hotel-accordion-btn {
background: none;
border: none;
padding: 1.25rem 1.5rem;
text-align: left;
cursor: pointer;
gap: 1rem;
transition: background-color 0.2s ease;
}
.hotel-detail-main .hotel-accordion-btn:hover {
background-color: var(--surface-alt);
}
.hotel-detail-main .hotel-accordion-q {
font-size: 1rem;
font-weight: 700;
color: var(--text);
overflow-wrap: anywhere;
}
.hotel-detail-main .hotel-accordion-icon-box {
width: 32px;
height: 32px;
border-radius: 50%;
background: var(--surface);
display: flex;
align-items: center;
justify-content: center;
flex-shrink: 0;
box-shadow: inset 1px 1px 3px rgba(42, 35, 25, 0.1), inset -1px -1px 3px #FFFFFF;
color: var(--primary);
transition: transform 0.3s ease;
}
.hotel-detail-main .hotel-accordion-chevron {
width: 16px;
height: 16px;
}
.hotel-detail-main .hotel-accordion-item.is-open .hotel-accordion-icon-box {
transform: rotate(180deg);
background: var(--primary);
color: var(--on-primary);
}
.hotel-detail-main .hotel-accordion-body {
padding: 0 1.5rem 1.25rem;
font-size: 0.925rem;
line-height: 1.6;
color: var(--text-muted);
overflow-wrap: anywhere;
}
.hotel-detail-main .hotel-rule-pill {
background: #FCF8F3;
border: 1px solid var(--border);
border-radius: 18px;
padding: 1rem 1.25rem;
box-shadow: 3px 3px 8px rgba(42, 35, 25, 0.05), -3px -3px 8px #FFFFFF;
}
.hotel-detail-main .hotel-rule-icon-box {
width: 40px;
height: 40px;
border-radius: 50%;
background: var(--surface);
display: flex;
align-items: center;
justify-content: center;
color: var(--primary);
flex-shrink: 0;
box-shadow: inset 2px 2px 4px rgba(42, 35, 25, 0.1), inset -2px -2px 4px #FFFFFF;
}
.hotel-detail-main .hotel-rule-icon-box svg {
width: 20px;
height: 20px;
}
.hotel-detail-main .hotel-form-label {
font-size: 0.85rem;
font-weight: 700;
color: var(--text);
margin-bottom: 0.35rem;
}
.hotel-detail-main .hotel-input {
background-color: #FCF8F3;
border: 1px solid var(--border);
border-radius: 12px;
padding: 0.75rem 1rem;
font-size: 0.925rem;
color: var(--text);
box-shadow: inset 2px 2px 5px rgba(42, 35, 25, 0.08), inset -2px -2px 5px #FFFFFF;
transition: border-color 0.2s ease, box-shadow 0.2s ease;
}
.hotel-detail-main .hotel-input:focus {
background-color: #FFFFFF;
border-color: var(--primary);
outline: none;
box-shadow: 0 0 0 3px rgba(112, 36, 83, 0.15), inset 1px 1px 3px rgba(0, 0, 0, 0.05);
color: var(--text);
}
.hotel-detail-main .hotel-input::placeholder {
color: #9c9384;
opacity: 1;
}
.hotel-detail-main .hotel-textarea {
resize: vertical;
min-height: 80px;
}
.hotel-detail-main .hotel-addons-box {
background: var(--surface-alt);
border-radius: 16px;
border: 1px solid var(--border);
}
.hotel-detail-main .hotel-addons-title {
font-size: 0.875rem;
font-weight: 700;
color: var(--primary-text);
}
.hotel-detail-main .hotel-check-label,
.hotel-detail-main .hotel-consent-label {
font-size: 0.875rem;
color: var(--text);
cursor: pointer;
user-select: none;
}
.hotel-detail-main .hotel-checkbox {
background-color: #FCF8F3;
border: 1px solid var(--border);
box-shadow: inset 1px 1px 3px rgba(42, 35, 25, 0.15);
cursor: pointer;
}
.hotel-detail-main .hotel-checkbox:checked {
background-color: var(--primary);
border-color: var(--primary);
}
.hotel-detail-main .hotel-consent-link {
color: var(--primary-text);
font-weight: 600;
text-decoration: underline;
}
.hotel-detail-main .hotel-consent-link:hover {
color: var(--primary-hover);
}
.hotel-detail-main .hotel-submit-btn {
padding: 0.85rem 2.25rem;
font-weight: 700;
font-size: 1rem;
}
.hotel-detail-main .hotel-security-note {
font-size: 0.8125rem;
color: var(--text-muted);
}
.hotel-detail-main .hotel-sec-icon {
width: 18px;
height: 18px;
color: var(--primary);
flex-shrink: 0;
}
.hotel-detail-main .hotel-cta-box {
background: #FCF8F3;
border-radius: 28px;
border: 1px solid var(--border);
box-shadow: 6px 6px 16px rgba(42, 35, 25, 0.07), -6px -6px 16px #FFFFFF;
}
.hotel-detail-main .hotel-cta-icon-well {
width: 56px;
height: 56px;
border-radius: 50%;
background: var(--surface);
display: flex;
align-items: center;
justify-content: center;
color: var(--primary);
box-shadow: inset 2px 2px 5px rgba(42, 35, 25, 0.12), inset -2px -2px 5px #FFFFFF;
}
.hotel-detail-main .hotel-cta-icon-well svg {
width: 28px;
height: 28px;
}
.hotel-detail-main .hotel-cta-title {
font-size: 1.25rem;
font-weight: 700;
color: var(--text);
}
.hotel-detail-main .hotel-cta-desc {
font-size: 0.925rem;
color: var(--text-muted);
}
.bk-footer {
padding: 4rem 0 2.5rem;
background-color: var(--dark-band);
color: var(--on-dark);
overflow: hidden;
}
.bk-footer .bk-footer__panel {
position: relative;
background: #260c1c;
border-radius: 32px;
padding: 3rem 2.5rem 2rem;
box-shadow: 6px 6px 14px rgba(0, 0, 0, 0.35), -6px -6px 14px rgba(255, 255, 255, 0.05);
}
.bk-footer .bk-footer__rivet {
position: absolute;
width: 6px;
height: 6px;
border-radius: 50%;
background: #4a1d3a;
box-shadow: 1px 1px 2px rgba(0, 0, 0, 0.4), -1px -1px 2px rgba(255, 255, 255, 0.1);
}
.bk-footer .bk-footer__rivet--tl {
top: 12px;
left: 12px;
}
.bk-footer .bk-footer__rivet--tr {
top: 12px;
right: 12px;
}
.bk-footer .bk-footer__rivet--bl {
bottom: 12px;
left: 12px;
}
.bk-footer .bk-footer__rivet--br {
bottom: 12px;
right: 12px;
}
.bk-footer .bk-footer__brand {
display: flex;
align-items: center;
gap: 0.75rem;
margin-bottom: 1.25rem;
}
.bk-footer .bk-footer__logo-wrap {
width: 44px;
height: 44px;
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
background: #321025;
box-shadow: inset 2px 2px 4px rgba(0, 0, 0, 0.4), inset -2px -2px 4px rgba(255, 255, 255, 0.05);
}
.bk-footer .bk-footer__logo {
max-width: 32px;
max-height: 32px;
object-fit: contain;
}
.bk-footer .bk-footer__name {
font-size: 1.25rem;
font-weight: 700;
color: var(--on-dark);
letter-spacing: -0.01em;
}
.bk-footer .bk-footer__desc {
font-size: 0.875rem;
line-height: 1.6;
color: var(--on-dark-muted);
margin-bottom: 1.5rem;
}
.bk-footer .bk-footer__contact-list {
display: flex;
flex-direction: column;
gap: 0.875rem;
}
.bk-footer .bk-footer__contact-item {
display: flex;
align-items: center;
gap: 0.75rem;
font-size: 0.875rem;
min-width: 0;
}
.bk-footer .bk-footer__icon-box {
flex-shrink: 0;
width: 32px;
height: 32px;
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
background: #321025;
box-shadow: inset 2px 2px 4px rgba(0, 0, 0, 0.4), inset -2px -2px 4px rgba(255, 255, 255, 0.05);
}
.bk-footer .bk-footer__icon {
width: 16px;
height: 16px;
stroke: #d4a5c4;
}
.bk-footer .bk-footer__contact-val {
color: var(--on-dark-muted);
overflow-wrap: anywhere;
}
.bk-footer .bk-footer__contact-link {
color: var(--on-dark-muted);
text-decoration: none;
overflow-wrap: anywhere;
transition: color 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}
.bk-footer .bk-footer__contact-link:hover {
color: #ffffff;
text-decoration: underline;
}
.bk-footer .bk-footer__heading {
font-size: 1.125rem;
font-weight: 600;
color: var(--on-dark);
margin-bottom: 1.25rem;
}
.bk-footer .bk-footer__nav-list {
list-style: none;
padding: 0;
margin: 0;
display: flex;
flex-direction: column;
gap: 0.75rem;
}
.bk-footer .bk-footer__nav-link {
color: var(--on-dark-muted);
text-decoration: none;
font-size: 0.875rem;
display: inline-block;
transition: color 0.3s cubic-bezier(0.4, 0, 0.2, 1), transform 0.2s cubic-bezier(0.4, 0, 0.2, 1);
}
.bk-footer .bk-footer__nav-link:hover {
color: #ffffff;
transform: translateX(3px);
}
.bk-footer .bk-footer__share-desc {
font-size: 0.875rem;
color: var(--on-dark-muted);
line-height: 1.6;
margin-bottom: 1rem;
}
.bk-footer .bk-footer__share-capsules {
display: flex;
flex-wrap: wrap;
gap: 0.75rem;
}
.bk-footer .bk-footer__pill {
display: inline-flex;
align-items: center;
gap: 0.5rem;
padding: 0.625rem 1.25rem;
border-radius: 9999px;
background: #321025;
color: var(--on-dark);
text-decoration: none;
font-size: 0.875rem;
font-weight: 500;
box-shadow: 3px 3px 8px rgba(0, 0, 0, 0.3), -3px -3px 8px rgba(255, 255, 255, 0.05);
transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}
.bk-footer .bk-footer__pill-icon {
width: 16px;
height: 16px;
stroke: #d4a5c4;
}
.bk-footer .bk-footer__pill:hover {
background: #3d142d;
color: #ffffff;
box-shadow: inset 2px 2px 5px rgba(0, 0, 0, 0.4), inset -2px -2px 5px rgba(255, 255, 255, 0.05);
transform: translateY(1px);
}
.bk-footer .bk-footer__groove {
height: 3px;
width: 100%;
border-radius: 9999px;
margin: 2.5rem 0 1.5rem;
background: #1c0814;
box-shadow: inset 1px 1px 2px rgba(0, 0, 0, 0.6), inset -1px -1px 2px rgba(255, 255, 255, 0.04);
}
.bk-footer .bk-footer__bottom {
display: flex;
flex-direction: column;
align-items: center;
justify-content: space-between;
gap: 1rem;
}
@media (min-width: 768px) {
.bk-footer .bk-footer__bottom {
flex-direction: row;
}
}
.bk-footer .bk-footer__copy {
font-size: 0.8125rem;
color: var(--on-dark-muted);
}
.bk-footer .bk-footer__badge {
display: inline-flex;
align-items: center;
padding: 0.35rem 0.85rem;
border-radius: 9999px;
font-size: 0.75rem;
font-weight: 500;
color: #d4a5c4;
background: #321025;
box-shadow: inset 1px 1px 3px rgba(0, 0, 0, 0.4), inset -1px -1px 3px rgba(255, 255, 255, 0.05);
}
@media (max-width: 767px) {
.hero-breykers {
padding-top: 2rem;
padding-bottom: 2.5rem;
}
.hero-breykers__title {
font-size: 1.125rem;
}
.hero-breykers__actions {
flex-direction: column;
align-items: stretch;
}
.hero-breykers__cta-btn,
.hero-breykers__secondary-btn {
width: 100%;
text-align: center;
}
.hero-breykers__floating-badge {
position: static;
margin-top: 1rem;
display: inline-flex;
}
.hero-breykers__image-panel {
padding: 0.75rem;
border-radius: 20px;
}
.hero-breykers__media-wrapper {
border-radius: 16px;
}
.hotel-detail-main .hotel-panel {
padding: 1.5rem 1rem;
border-radius: 20px;
}
.hotel-detail-main .hotel-sec-title {
font-size: 1rem;
}
.hotel-detail-main .hotel-param-table,
.hotel-detail-main .hotel-param-table tbody,
.hotel-detail-main .hotel-param-row,
.hotel-detail-main .hotel-param-name,
.hotel-detail-main .hotel-param-value {
display: block;
width: 100%;
}
.hotel-detail-main .hotel-param-name {
border-bottom: none;
padding-bottom: 0.25rem;
}
.hotel-detail-main .hotel-param-value {
padding-top: 0.25rem;
padding-bottom: 0.75rem;
}
.bk-footer {
padding: 3rem 0 2rem;
}
.bk-footer .bk-footer__panel {
padding: 2rem 1.25rem 1.5rem;
border-radius: 24px;
}
.bk-footer .bk-footer__heading {
font-size: 14px;
margin-bottom: 0.875rem;
}
.bk-footer .bk-footer__bottom {
text-align: center;
}
}
/* ===== PAGE TEMPLATE: destinations ===== */
.breykers-header-wrap {
position: sticky;
top: 0;
z-index: 1020;
padding: 1rem 0;
background-color: var(--bg);
box-shadow: 0 4px 12px rgba(42, 35, 25, 0.04);
}
.breykers-header-wrap .breykers-navbar {
position: relative;
background-color: #FCF8F3;
border-radius: 24px;
padding: 0.75rem 1.25rem;
border: 1px solid #E4DFD8;
box-shadow: 6px 6px 14px rgba(42, 35, 25, 0.07), -6px -6px 14px #FFFFFF;
}
.breykers-header-wrap .breykers-brand {
display: inline-flex;
align-items: center;
gap: 0.75rem;
text-decoration: none;
padding: 0;
margin: 0;
z-index: 1030;
}
.breykers-header-wrap .breykers-logo-well {
width: 46px;
height: 46px;
border-radius: 50%;
display: inline-flex;
align-items: center;
justify-content: center;
background-color: #FCF8F3;
box-shadow: inset 3px 3px 6px rgba(42, 35, 25, 0.12), inset -3px -3px 6px #FFFFFF;
padding: 4px;
flex-shrink: 0;
}
.breykers-header-wrap .breykers-logo-img {
width: 100%;
height: 100%;
max-width: 42px;
max-height: 42px;
object-fit: cover;
border-radius: 50%;
display: block;
}
.breykers-header-wrap .breykers-brand-name {
font-family: 'Libre Franklin', sans-serif;
font-weight: 700;
font-size: 1.125rem;
color: #702453;
letter-spacing: 0.02em;
text-shadow: 1px 1px 0 #FFFFFF;
}
.breykers-header-wrap .breykers-toggler {
border: none;
background-color: #FCF8F3;
width: 44px;
height: 44px;
border-radius: 12px;
padding: 0;
display: inline-flex;
align-items: center;
justify-content: center;
color: #702453;
box-shadow: 3px 3px 7px rgba(42, 35, 25, 0.1), -3px -3px 7px #FFFFFF;
transition: box-shadow 0.2s ease, transform 0.2s ease;
}
.breykers-header-wrap .breykers-toggler:focus {
outline: none;
box-shadow: inset 2px 2px 5px rgba(42, 35, 25, 0.15), inset -2px -2px 5px #FFFFFF;
}
.breykers-header-wrap .breykers-toggler-icon {
width: 24px;
height: 24px;
stroke-width: 2.2;
}
.breykers-header-wrap .breykers-collapse {
background-color: #FCF8F3;
}
.breykers-header-wrap .breykers-nav-link {
font-family: 'Libre Franklin', sans-serif;
font-weight: 600;
font-size: 0.9375rem;
color: #2A2319;
padding: 0.625rem 1rem;
border-radius: 9999px;
transition: all 0.25s ease;
text-decoration: none;
display: inline-block;
}
.breykers-header-wrap .breykers-nav-link:hover,
.breykers-header-wrap .breykers-nav-link:focus {
color: #702453;
background-color: #F4E9F0;
box-shadow: inset 2px 2px 4px rgba(42, 35, 25, 0.08), inset -2px -2px 4px #FFFFFF;
}
.breykers-header-wrap .breykers-cta-wrap {
display: flex;
align-items: center;
}
.breykers-header-wrap .breykers-book-btn {
display: inline-flex;
align-items: center;
justify-content: center;
white-space: nowrap;
font-weight: 600;
font-size: 0.9375rem;
text-decoration: none;
}
@media (max-width:991.98px) {
.breykers-header-wrap .breykers-collapse {
margin-top: 1rem;
padding-top: 1rem;
border-top: 1px solid #E4DFD8;
}
.breykers-header-wrap .breykers-nav-left,
.breykers-header-wrap .breykers-nav-right {
display: flex;
flex-direction: column;
gap: 0.375rem;
padding: 0;
margin: 0;
}
.breykers-header-wrap .breykers-nav-right {
margin-top: 0.375rem;
}
.breykers-header-wrap .breykers-nav-link {
width: 100%;
padding: 0.75rem 1rem;
font-size: 0.875rem;
}
.breykers-header-wrap .breykers-cta-wrap {
margin-top: 1rem;
padding-top: 0.75rem;
border-top: 1px solid #E4DFD8;
}
.breykers-header-wrap .breykers-book-btn {
width: 100%;
text-align: center;
padding: 0.75rem 1.5rem;
}
}
@media (min-width:992px) {
.breykers-header-wrap .breykers-navbar {
border-radius: 9999px;
padding: 0.5rem 1.5rem;
}
.breykers-header-wrap .breykers-brand {
position: absolute;
left: 50%;
top: 50%;
transform: translate(-50%, -50%);
margin: 0;
}
.breykers-header-wrap .breykers-collapse {
display: flex;
align-items: center;
justify-content: space-between;
width: 100%;
background-color: transparent;
}
.breykers-header-wrap .breykers-nav-left {
display: flex;
align-items: center;
gap: 0.5rem;
margin-right: auto;
padding-right: 120px;
}
.breykers-header-wrap .breykers-nav-right {
display: flex;
align-items: center;
gap: 0.5rem;
margin-left: auto;
padding-left: 120px;
}
.breykers-header-wrap .breykers-cta-wrap {
margin-left: 1rem;
}
}
.hero-breykers {
padding-top: 3.5rem;
padding-bottom: 3.5rem;
}
.hero-breykers__content {
z-index: 2;
}
.hero-breykers__eyebrow {
display: inline-block;
padding: 0.35rem 1rem;
font-size: 0.8125rem;
font-weight: 700;
letter-spacing: 0.05em;
text-transform: uppercase;
color: var(--primary-text);
background-color: var(--surface-alt);
border-radius: 9999px;
box-shadow: inset 2px 2px 4px rgba(42, 35, 25, 0.08), inset -2px -2px 4px #FFFFFF;
}
.hero-breykers__title {
font-size: clamp(1.75rem, 3.8vw, 3.25rem);
font-weight: 800;
line-height: 1.2;
color: var(--text);
text-shadow: 1px 1px 0px #FFFFFF, -1px -1px 0px rgba(42, 35, 25, 0.12);
overflow-wrap: anywhere;
}
.hero-breykers__description {
font-size: clamp(0.95rem, 1.2vw, 1.125rem);
line-height: 1.6;
color: var(--text-muted);
max-width: 540px;
overflow-wrap: anywhere;
}
.hero-breykers__cta-btn {
background-color: var(--primary);
color: var(--on-primary);
border-radius: 9999px;
padding: 0.875rem 1.85rem;
font-weight: 600;
font-size: 0.95rem;
text-decoration: none;
box-shadow: 4px 4px 10px rgba(112, 36, 83, 0.35), -4px -4px 10px rgba(255, 255, 255, 0.8);
transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
border: none;
}
.hero-breykers__cta-btn:hover {
background-color: var(--primary-hover);
color: var(--on-primary);
transform: translateY(-2px);
box-shadow: 6px 6px 14px rgba(112, 36, 83, 0.45), -6px -6px 14px rgba(255, 255, 255, 0.95);
}
.hero-breykers__cta-btn:active {
transform: translateY(1px);
box-shadow: inset 3px 3px 6px rgba(0, 0, 0, 0.25), inset -3px -3px 6px rgba(255, 255, 255, 0.1);
}
.hero-breykers__secondary-btn {
background-color: var(--surface);
color: var(--primary-text);
border-radius: 9999px;
padding: 0.875rem 1.85rem;
font-weight: 600;
font-size: 0.95rem;
text-decoration: none;
box-shadow: 4px 4px 10px rgba(42, 35, 25, 0.08), -4px -4px 10px #FFFFFF;
transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
border: 1px solid var(--border);
}
.hero-breykers__secondary-btn:hover {
background-color: var(--surface-alt);
color: var(--primary-text);
transform: translateY(-2px);
box-shadow: 6px 6px 14px rgba(42, 35, 25, 0.12), -6px -6px 14px #FFFFFF;
}
.hero-breykers__secondary-btn:active {
transform: translateY(1px);
box-shadow: inset 2px 2px 5px rgba(42, 35, 25, 0.12), inset -2px -2px 5px #FFFFFF;
}
.hero-breykers__btn-icon {
width: 1.15rem;
height: 1.15rem;
}
.hero-breykers__feature-pill {
background-color: var(--surface);
padding: 0.5rem 0.875rem;
border-radius: 9999px;
box-shadow: 3px 3px 8px rgba(42, 35, 25, 0.06), -3px -3px 8px #FFFFFF;
border: 1px solid rgba(228, 223, 216, 0.6);
}
.hero-breykers__feature-icon-box {
width: 24px;
height: 24px;
border-radius: 50%;
background-color: var(--surface-alt);
display: flex;
align-items: center;
justify-content: center;
box-shadow: inset 1px 1px 3px rgba(42, 35, 25, 0.1), inset -1px -1px 3px #FFFFFF;
}
.hero-breykers__feature-icon {
width: 14px;
height: 14px;
color: var(--primary);
}
.hero-breykers__feature-text {
font-size: 0.8125rem;
font-weight: 600;
color: var(--text);
}
.hero-breykers__image-panel {
background: var(--surface);
border-radius: 32px;
padding: 1rem;
box-shadow: 8px 8px 20px rgba(42, 35, 25, 0.09), -8px -8px 20px #FFFFFF;
transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}
.hero-breykers__image-panel:hover {
transform: translateY(-4px);
}
.hero-breykers__media-wrapper {
position: relative;
border-radius: 24px;
overflow: hidden;
aspect-ratio: 4 / 3;
box-shadow: inset 2px 2px 6px rgba(0, 0, 0, 0.15);
}
.hero-breykers__img {
width: 100%;
height: 100%;
object-fit: cover;
display: block;
}
.hero-breykers__rivet {
position: absolute;
width: 6px;
height: 6px;
background: var(--border);
border-radius: 50%;
box-shadow: 1px 1px 2px rgba(42, 35, 25, 0.2), -1px -1px 2px #FFFFFF;
z-index: 3;
}
.hero-breykers__rivet--tl {
top: 12px;
left: 12px;
}
.hero-breykers__rivet--tr {
top: 12px;
right: 12px;
}
.hero-breykers__rivet--bl {
bottom: 12px;
left: 12px;
}
.hero-breykers__rivet--br {
bottom: 12px;
right: 12px;
}
.hero-breykers__floating-badge {
bottom: -15px;
left: 24px;
background: var(--surface);
padding: 0.6rem 1.1rem;
border-radius: 9999px;
box-shadow: 6px 6px 14px rgba(42, 35, 25, 0.12), -6px -6px 14px #FFFFFF;
border: 1px solid var(--border);
z-index: 4;
}
.hero-breykers__floating-icon-well {
width: 32px;
height: 32px;
border-radius: 50%;
background: var(--surface-alt);
display: flex;
align-items: center;
justify-content: center;
box-shadow: inset 2px 2px 4px rgba(42, 35, 25, 0.12), inset -2px -2px 4px #FFFFFF;
}
.hero-breykers__floating-icon {
width: 16px;
height: 16px;
color: var(--primary);
}
.hero-breykers__floating-text-group {
display: flex;
flex-direction: column;
line-height: 1.15;
}
.hero-breykers__floating-label {
font-size: 0.6875rem;
color: var(--text-muted);
text-transform: uppercase;
letter-spacing: 0.04em;
}
.hero-breykers__floating-value {
font-size: 0.875rem;
color: var(--text);
font-weight: 700;
}
@media (max-width: 767px) {
.hero-breykers {
padding-top: 2rem;
padding-bottom: 2.5rem;
}
.hero-breykers__title {
font-size: 1.125rem;
}
.hero-breykers__actions {
flex-direction: column;
align-items: stretch;
}
.hero-breykers__cta-btn,
.hero-breykers__secondary-btn {
width: 100%;
text-align: center;
}
.hero-breykers__floating-badge {
position: static;
margin-top: 1rem;
display: inline-flex;
}
.hero-breykers__image-panel {
padding: 0.75rem;
border-radius: 20px;
}
.hero-breykers__media-wrapper {
border-radius: 16px;
}
}
.dest-detail-page__frame {
position: relative;
background: var(--surface);
border-radius: 32px;
padding: 3.5rem 3rem;
border: 2px solid var(--border);
box-shadow: 8px 8px 20px rgba(42, 35, 25, 0.08), -8px -8px 20px #FFFFFF;
}
.dest-detail-page__rivet {
position: absolute;
width: 8px;
height: 8px;
border-radius: 50%;
background: var(--border);
box-shadow: 1px 1px 2px rgba(42, 35, 25, 0.25), -1px -1px 2px #FFFFFF;
}
.dest-detail-page__rivet--tl {
top: 14px;
left: 14px;
}
.dest-detail-page__rivet--tr {
top: 14px;
right: 14px;
}
.dest-detail-page__rivet--bl {
bottom: 14px;
left: 14px;
}
.dest-detail-page__rivet--br {
bottom: 14px;
right: 14px;
}
.dest-detail-page__number {
display: inline-flex;
align-items: center;
justify-content: center;
width: 36px;
height: 36px;
border-radius: 50%;
background-color: var(--surface-alt);
color: var(--primary-text);
font-weight: 800;
font-size: 0.875rem;
box-shadow: inset 2px 2px 4px rgba(42, 35, 25, 0.12), inset -2px -2px 4px #FFFFFF;
}
.dest-detail-page__heading {
font-size: 1.65rem;
font-weight: 700;
color: var(--text);
text-shadow: 1px 1px 0 #FFFFFF, -1px -1px 0 rgba(42, 35, 25, 0.1);
overflow-wrap: anywhere;
}
.dest-detail-page__subheading {
font-size: 1.25rem;
font-weight: 700;
color: var(--text);
overflow-wrap: anywhere;
}
.dest-detail-page__groove {
height: 3px;
width: 100%;
border-radius: 9999px;
background: #E4DFD8;
box-shadow: inset 1px 1px 2px rgba(42, 35, 25, 0.2), inset -1px -1px 2px #FFFFFF;
}
.dest-detail-page__lead {
font-size: 1.125rem;
line-height: 1.6;
color: var(--text);
font-weight: 500;
}
.dest-detail-page__text-content p {
color: var(--text-muted);
line-height: 1.65;
overflow-wrap: anywhere;
}
.dest-detail-page__highlights-list {
list-style: none;
padding: 0;
margin: 1.5rem 0 0;
display: flex;
flex-direction: column;
gap: 0.75rem;
}
.dest-detail-page__highlights-list li {
position: relative;
padding-left: 1.75rem;
color: var(--text);
font-weight: 500;
overflow-wrap: anywhere;
}
.dest-detail-page__highlights-list li::before {
content: "✓";
position: absolute;
left: 0;
top: 0;
color: var(--primary);
font-weight: 800;
}
.dest-detail-page__table-wrapper {
border-radius: 20px;
overflow: hidden;
border: 1px solid var(--border);
box-shadow: 4px 4px 10px rgba(42, 35, 25, 0.05), -4px -4px 10px #FFFFFF;
}
.dest-detail-page__table {
width: 100%;
border-collapse: collapse;
background: var(--surface);
}
.dest-detail-page__table th,
.dest-detail-page__table td {
padding: 1rem 1.5rem;
font-size: 0.9375rem;
border-bottom: 1px solid var(--border);
overflow-wrap: anywhere;
}
.dest-detail-page__table th {
width: 35%;
color: var(--primary-text);
font-weight: 700;
background-color: var(--surface-alt);
}
.dest-detail-page__table td {
color: var(--text);
font-weight: 500;
}
.dest-detail-page__table tbody tr:nth-child(even) td {
background-color: #FAF5F0;
}
.dest-detail-page__table tbody tr:last-child th,
.dest-detail-page__table tbody tr:last-child td {
border-bottom: none;
}
.dest-detail-page__district-card {
background: var(--surface);
border-radius: 20px;
padding: 1.75rem;
border: 1px solid var(--border);
box-shadow: 4px 4px 10px rgba(42, 35, 25, 0.06), -4px -4px 10px #FFFFFF;
height: 100%;
transition: transform 0.25s ease;
}
.dest-detail-page__district-card:hover {
transform: translateY(-3px);
}
.dest-detail-page__icon-well {
width: 48px;
height: 48px;
border-radius: 50%;
background: var(--surface-alt);
display: flex;
align-items: center;
justify-content: center;
box-shadow: inset 2px 2px 5px rgba(42, 35, 25, 0.12), inset -2px -2px 5px #FFFFFF;
}
.dest-detail-page__card-svg {
width: 22px;
height: 22px;
color: var(--primary);
}
.dest-detail-page__card-desc {
font-size: 0.875rem;
line-height: 1.6;
color: var(--text-muted);
overflow-wrap: anywhere;
}
.dest-detail-page__cta-box {
background: var(--surface-alt);
border-radius: 24px;
padding: 2rem;
border: 1px solid var(--border);
box-shadow: inset 2px 2px 6px rgba(42, 35, 25, 0.08), inset -2px -2px 6px #FFFFFF;
}
.dest-detail-page__cta-icon-well {
width: 60px;
height: 60px;
border-radius: 50%;
background: var(--surface);
display: flex;
align-items: center;
justify-content: center;
box-shadow: 3px 3px 8px rgba(42, 35, 25, 0.1), -3px -3px 8px #FFFFFF;
}
.dest-detail-page__cta-svg {
width: 28px;
height: 28px;
color: var(--primary);
}
.dest-detail-page__cta-title {
font-size: 1.25rem;
font-weight: 700;
color: var(--text);
}
.dest-detail-page__cta-desc {
font-size: 0.875rem;
color: var(--text-muted);
line-height: 1.5;
}
.dest-detail-page__cta-button {
background-color: var(--primary);
color: var(--on-primary);
border-radius: 9999px;
padding: 0.75rem 1.75rem;
font-weight: 600;
text-decoration: none;
display: inline-block;
white-space: nowrap;
box-shadow: 4px 4px 10px rgba(112, 36, 83, 0.35), -4px -4px 10px rgba(255, 255, 255, 0.8);
transition: all 0.3s ease;
}
.dest-detail-page__cta-button:hover {
background-color: var(--primary-hover);
color: var(--on-primary);
transform: translateY(-2px);
}
.dest-detail-page__form-panel {
background: #FCF8F3;
border-radius: 24px;
padding: 2.25rem 2rem;
border: 1px solid var(--border);
box-shadow: inset 3px 3px 8px rgba(42, 35, 25, 0.08), inset -3px -3px 8px #FFFFFF;
}
.dest-detail-page__form-label {
font-size: 0.8125rem;
font-weight: 700;
color: var(--text);
margin-bottom: 0.375rem;
display: block;
}
.dest-detail-page__input,
.dest-detail-page__textarea {
width: 100%;
background: var(--surface);
border: 1px solid var(--border);
border-radius: 12px;
padding: 0.75rem 1rem;
font-size: 0.875rem;
color: var(--text);
box-shadow: inset 2px 2px 4px rgba(42, 35, 25, 0.08), inset -2px -2px 4px #FFFFFF;
outline: none;
transition: border-color 0.2s ease;
}
.dest-detail-page__input:focus,
.dest-detail-page__textarea:focus {
border-color: var(--primary);
}
.dest-detail-page__input::placeholder,
.dest-detail-page__textarea::placeholder {
color: var(--text-muted);
opacity: 0.8;
}
.dest-detail-page__checkbox {
accent-color: var(--primary);
width: 16px;
height: 16px;
flex-shrink: 0;
cursor: pointer;
}
.dest-detail-page__consent-label {
font-size: 0.78125rem;
color: var(--text-muted);
line-height: 1.4;
}
.dest-detail-page__link {
color: var(--primary-text);
text-decoration: underline;
}
.dest-detail-page__submit-btn {
background-color: var(--primary);
color: var(--on-primary);
border-radius: 9999px;
padding: 0.875rem 2.25rem;
font-weight: 700;
border: none;
box-shadow: 4px 4px 10px rgba(112, 36, 83, 0.35), -4px -4px 10px rgba(255, 255, 255, 0.8);
transition: all 0.3s ease;
}
.dest-detail-page__submit-btn:hover {
background-color: var(--primary-hover);
color: var(--on-primary);
transform: translateY(-2px);
}
.dest-detail-page__related-card {
background: var(--surface);
border-radius: 24px;
padding: 1.75rem;
border: 1px solid var(--border);
box-shadow: 6px 6px 14px rgba(42, 35, 25, 0.07), -6px -6px 14px #FFFFFF;
transition: transform 0.3s ease, box-shadow 0.3s ease;
}
.dest-detail-page__related-card:hover {
transform: translateY(-4px);
box-shadow: 10px 10px 22px rgba(42, 35, 25, 0.1), -10px -10px 22px #FFFFFF;
}
.dest-detail-page__related-media-wrap {
border-radius: 16px;
overflow: hidden;
aspect-ratio: 16 / 9;
box-shadow: inset 1px 1px 4px rgba(0, 0, 0, 0.15);
}
.dest-detail-page__related-img {
width: 100%;
height: 100%;
object-fit: cover;
display: block;
}
.dest-detail-page__rating-pill {
background: #FAF5F0;
color: var(--primary-text);
font-size: 0.75rem;
font-weight: 700;
padding: 0.25rem 0.625rem;
border-radius: 9999px;
box-shadow: inset 1px 1px 3px rgba(42, 35, 25, 0.1), inset -1px -1px 3px #FFFFFF;
}
.dest-detail-page__related-title {
font-size: 1.15rem;
font-weight: 700;
}
.dest-detail-page__related-link {
color: var(--text);
text-decoration: none;
transition: color 0.2s ease;
}
.dest-detail-page__related-link:hover {
color: var(--primary);
}
.dest-detail-page__card-btn {
display: block;
background-color: var(--surface);
color: var(--primary-text);
border-radius: 9999px;
padding: 0.625rem 1.25rem;
font-size: 0.875rem;
font-weight: 600;
text-decoration: none;
border: 1px solid var(--border);
box-shadow: 3px 3px 8px rgba(42, 35, 25, 0.08), -3px -3px 8px #FFFFFF;
transition: all 0.25s ease;
}
.dest-detail-page__card-btn:hover {
background-color: var(--surface-alt);
color: var(--primary-text);
transform: translateY(-2px);
}
@media (max-width: 767px) {
.dest-detail-page__frame {
padding: 2rem 1.25rem;
border-radius: 24px;
}
.dest-detail-page__heading {
font-size: 1rem;
}
.dest-detail-page__subheading {
font-size: 0.875rem;
}
.dest-detail-page__table th,
.dest-detail-page__table td {
display: block;
width: 100%;
padding: 0.75rem 1rem;
}
.dest-detail-page__table th {
border-bottom: none;
padding-bottom: 0.25rem;
}
.dest-detail-page__cta-button {
width: 100%;
text-align: center;
}
.dest-detail-page__submit-btn {
width: 100%;
}
}
.bk-footer {
padding: 4rem 0 2.5rem;
background-color: var(--dark-band);
color: var(--on-dark);
overflow: hidden;
}
.bk-footer .bk-footer__panel {
position: relative;
background: #260c1c;
border-radius: 32px;
padding: 3rem 2.5rem 2rem;
box-shadow: 6px 6px 14px rgba(0, 0, 0, 0.35), -6px -6px 14px rgba(255, 255, 255, 0.05);
}
.bk-footer .bk-footer__rivet {
position: absolute;
width: 6px;
height: 6px;
border-radius: 50%;
background: #4a1d3a;
box-shadow: 1px 1px 2px rgba(0, 0, 0, 0.4), -1px -1px 2px rgba(255, 255, 255, 0.1);
}
.bk-footer .bk-footer__rivet--tl {
top: 12px;
left: 12px;
}
.bk-footer .bk-footer__rivet--tr {
top: 12px;
right: 12px;
}
.bk-footer .bk-footer__rivet--bl {
bottom: 12px;
left: 12px;
}
.bk-footer .bk-footer__rivet--br {
bottom: 12px;
right: 12px;
}
.bk-footer .bk-footer__brand {
display: flex;
align-items: center;
gap: 0.75rem;
margin-bottom: 1.25rem;
}
.bk-footer .bk-footer__logo-wrap {
width: 44px;
height: 44px;
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
background: #321025;
box-shadow: inset 2px 2px 4px rgba(0, 0, 0, 0.4), inset -2px -2px 4px rgba(255, 255, 255, 0.05);
}
.bk-footer .bk-footer__logo {
max-width: 32px;
max-height: 32px;
object-fit: contain;
}
.bk-footer .bk-footer__name {
font-size: 1.25rem;
font-weight: 700;
color: var(--on-dark);
letter-spacing: -0.01em;
}
.bk-footer .bk-footer__desc {
font-size: 0.875rem;
line-height: 1.6;
color: var(--on-dark-muted);
margin-bottom: 1.5rem;
}
.bk-footer .bk-footer__contact-list {
display: flex;
flex-direction: column;
gap: 0.875rem;
}
.bk-footer .bk-footer__contact-item {
display: flex;
align-items: center;
gap: 0.75rem;
font-size: 0.875rem;
min-width: 0;
}
.bk-footer .bk-footer__icon-box {
flex-shrink: 0;
width: 32px;
height: 32px;
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
background: #321025;
box-shadow: inset 2px 2px 4px rgba(0, 0, 0, 0.4), inset -2px -2px 4px rgba(255, 255, 255, 0.05);
}
.bk-footer .bk-footer__icon {
width: 16px;
height: 16px;
stroke: #d4a5c4;
}
.bk-footer .bk-footer__contact-val {
color: var(--on-dark-muted);
overflow-wrap: anywhere;
}
.bk-footer .bk-footer__contact-link {
color: var(--on-dark-muted);
text-decoration: none;
overflow-wrap: anywhere;
transition: color 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}
.bk-footer .bk-footer__contact-link:hover {
color: #ffffff;
text-decoration: underline;
}
.bk-footer .bk-footer__heading {
font-size: 1.125rem;
font-weight: 600;
color: var(--on-dark);
margin-bottom: 1.25rem;
}
.bk-footer .bk-footer__nav-list {
list-style: none;
padding: 0;
margin: 0;
display: flex;
flex-direction: column;
gap: 0.75rem;
}
.bk-footer .bk-footer__nav-link {
color: var(--on-dark-muted);
text-decoration: none;
font-size: 0.875rem;
display: inline-block;
transition: color 0.3s cubic-bezier(0.4, 0, 0.2, 1), transform 0.2s cubic-bezier(0.4, 0, 0.2, 1);
}
.bk-footer .bk-footer__nav-link:hover {
color: #ffffff;
transform: translateX(3px);
}
.bk-footer .bk-footer__share-desc {
font-size: 0.875rem;
color: var(--on-dark-muted);
line-height: 1.6;
margin-bottom: 1rem;
}
.bk-footer .bk-footer__share-capsules {
display: flex;
flex-wrap: wrap;
gap: 0.75rem;
}
.bk-footer .bk-footer__pill {
display: inline-flex;
align-items: center;
gap: 0.5rem;
padding: 0.625rem 1.25rem;
border-radius: 9999px;
background: #321025;
color: var(--on-dark);
text-decoration: none;
font-size: 0.875rem;
font-weight: 500;
box-shadow: 3px 3px 8px rgba(0, 0, 0, 0.3), -3px -3px 8px rgba(255, 255, 255, 0.05);
transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}
.bk-footer .bk-footer__pill-icon {
width: 16px;
height: 16px;
stroke: #d4a5c4;
}
.bk-footer .bk-footer__pill:hover {
background: #3d142d;
color: #ffffff;
box-shadow: inset 2px 2px 5px rgba(0, 0, 0, 0.4), inset -2px -2px 5px rgba(255, 255, 255, 0.05);
transform: translateY(1px);
}
.bk-footer .bk-footer__groove {
height: 3px;
width: 100%;
border-radius: 9999px;
margin: 2.5rem 0 1.5rem;
background: #1c0814;
box-shadow: inset 1px 1px 2px rgba(0, 0, 0, 0.6), inset -1px -1px 2px rgba(255, 255, 255, 0.04);
}
.bk-footer .bk-footer__bottom {
display: flex;
flex-direction: column;
align-items: center;
justify-content: space-between;
gap: 1rem;
}
@media (min-width: 768px) {
.bk-footer .bk-footer__bottom {
flex-direction: row;
}
}
.bk-footer .bk-footer__copy {
font-size: 0.8125rem;
color: var(--on-dark-muted);
}
.bk-footer .bk-footer__badge {
display: inline-flex;
align-items: center;
padding: 0.35rem 0.85rem;
border-radius: 9999px;
font-size: 0.75rem;
font-weight: 500;
color: #d4a5c4;
background: #321025;
box-shadow: inset 1px 1px 3px rgba(0, 0, 0, 0.4), inset -1px -1px 3px rgba(255, 255, 255, 0.05);
}
@media (max-width: 767px) {
.bk-footer {
padding: 3rem 0 2rem;
}
.bk-footer .bk-footer__panel {
padding: 2rem 1.25rem 1.5rem;
border-radius: 24px;
}
.bk-footer .bk-footer__heading {
font-size: 14px;
margin-bottom: 0.875rem;
}
.bk-footer .bk-footer__bottom {
text-align: center;
}
}
/* ===== PAGE TEMPLATE: ratings-and-reviews ===== */
.breykers-header-wrap {
position: sticky;
top: 0;
z-index: 1020;
padding: 1rem 0;
background-color: var(--bg);
box-shadow: 0 4px 12px rgba(42, 35, 25, 0.04);
}
.breykers-header-wrap .breykers-navbar {
position: relative;
background-color: #FCF8F3;
border-radius: 24px;
padding: 0.75rem 1.25rem;
border: 1px solid #E4DFD8;
box-shadow: 6px 6px 14px rgba(42, 35, 25, 0.07), -6px -6px 14px #FFFFFF;
}
.breykers-header-wrap .breykers-brand {
display: inline-flex;
align-items: center;
gap: 0.75rem;
text-decoration: none;
padding: 0;
margin: 0;
z-index: 1030;
}
.breykers-header-wrap .breykers-logo-well {
width: 46px;
height: 46px;
border-radius: 50%;
display: inline-flex;
align-items: center;
justify-content: center;
background-color: #FCF8F3;
box-shadow: inset 3px 3px 6px rgba(42, 35, 25, 0.12), inset -3px -3px 6px #FFFFFF;
padding: 4px;
flex-shrink: 0;
}
.breykers-header-wrap .breykers-logo-img {
width: 100%;
height: 100%;
max-width: 42px;
max-height: 42px;
object-fit: cover;
border-radius: 50%;
display: block;
}
.breykers-header-wrap .breykers-brand-name {
font-family: 'Libre Franklin', sans-serif;
font-weight: 700;
font-size: 1.125rem;
color: #702453;
letter-spacing: 0.02em;
text-shadow: 1px 1px 0 #FFFFFF;
}
.breykers-header-wrap .breykers-toggler {
border: none;
background-color: #FCF8F3;
width: 44px;
height: 44px;
border-radius: 12px;
padding: 0;
display: inline-flex;
align-items: center;
justify-content: center;
color: #702453;
box-shadow: 3px 3px 7px rgba(42, 35, 25, 0.1), -3px -3px 7px #FFFFFF;
transition: box-shadow 0.2s ease, transform 0.2s ease;
}
.breykers-header-wrap .breykers-toggler:focus {
outline: none;
box-shadow: inset 2px 2px 5px rgba(42, 35, 25, 0.15), inset -2px -2px 5px #FFFFFF;
}
.breykers-header-wrap .breykers-toggler-icon {
width: 24px;
height: 24px;
stroke-width: 2.2;
}
.breykers-header-wrap .breykers-collapse {
background-color: #FCF8F3;
}
.breykers-header-wrap .breykers-nav-link {
font-family: 'Libre Franklin', sans-serif;
font-weight: 600;
font-size: 0.9375rem;
color: #2A2319;
padding: 0.625rem 1rem;
border-radius: 9999px;
transition: all 0.25s ease;
text-decoration: none;
display: inline-block;
}
.breykers-header-wrap .breykers-nav-link:hover,
.breykers-header-wrap .breykers-nav-link:focus,
.breykers-header-wrap .breykers-nav-link.active {
color: #702453;
background-color: #F4E9F0;
box-shadow: inset 2px 2px 4px rgba(42, 35, 25, 0.08), inset -2px -2px 4px #FFFFFF;
}
.breykers-header-wrap .breykers-cta-wrap {
display: flex;
align-items: center;
}
.breykers-header-wrap .breykers-book-btn {
display: inline-flex;
align-items: center;
justify-content: center;
white-space: nowrap;
font-weight: 600;
font-size: 0.9375rem;
text-decoration: none;
}
@media (max-width:991.98px) {
.breykers-header-wrap .breykers-collapse {
margin-top: 1rem;
padding-top: 1rem;
border-top: 1px solid #E4DFD8;
}
.breykers-header-wrap .breykers-nav-left,
.breykers-header-wrap .breykers-nav-right {
display: flex;
flex-direction: column;
gap: 0.375rem;
padding: 0;
margin: 0;
}
.breykers-header-wrap .breykers-nav-right {
margin-top: 0.375rem;
}
.breykers-header-wrap .breykers-nav-link {
width: 100%;
padding: 0.75rem 1rem;
font-size: 0.875rem;
}
.breykers-header-wrap .breykers-cta-wrap {
margin-top: 1rem;
padding-top: 0.75rem;
border-top: 1px solid #E4DFD8;
}
.breykers-header-wrap .breykers-book-btn {
width: 100%;
text-align: center;
padding: 0.75rem 1.5rem;
}
}
@media (min-width:992px) {
.breykers-header-wrap .breykers-navbar {
border-radius: 9999px;
padding: 0.5rem 1.5rem;
}
.breykers-header-wrap .breykers-brand {
position: absolute;
left: 50%;
top: 50%;
transform: translate(-50%, -50%);
margin: 0;
}
.breykers-header-wrap .breykers-collapse {
display: flex;
align-items: center;
justify-content: space-between;
width: 100%;
background-color: transparent;
}
.breykers-header-wrap .breykers-nav-left {
display: flex;
align-items: center;
gap: 0.5rem;
margin-right: auto;
padding-right: 120px;
}
.breykers-header-wrap .breykers-nav-right {
display: flex;
align-items: center;
gap: 0.5rem;
margin-left: auto;
padding-left: 120px;
}
.breykers-header-wrap .breykers-cta-wrap {
margin-left: 1rem;
}
}
.bk-article-hero {
padding-top: 2.5rem;
padding-bottom: 2rem;
}
.bk-article-hero .bk-article-hero__card {
background: var(--surface);
border-radius: 32px;
padding: 3rem 2rem 2.5rem;
border: 1px solid var(--border);
box-shadow: 8px 8px 20px rgba(42, 35, 25, 0.08), -8px -8px 20px #FFFFFF;
max-width: 960px;
margin: 0 auto;
}
.bk-article-hero .bk-article-hero__rivet {
position: absolute;
width: 6px;
height: 6px;
border-radius: 50%;
background: var(--border);
box-shadow: 1px 1px 2px rgba(42, 35, 25, 0.2), -1px -1px 2px #FFFFFF;
}
.bk-article-hero .bk-article-hero__rivet--tl {
top: 14px;
left: 14px;
}
.bk-article-hero .bk-article-hero__rivet--tr {
top: 14px;
right: 14px;
}
.bk-article-hero .bk-article-hero__rivet--bl {
bottom: 14px;
left: 14px;
}
.bk-article-hero .bk-article-hero__rivet--br {
bottom: 14px;
right: 14px;
}
.bk-article-hero .bk-article-hero__category {
background: var(--primary);
color: var(--on-primary);
font-size: 0.75rem;
font-weight: 700;
letter-spacing: 0.04em;
padding: 0.35rem 0.9rem;
border-radius: 9999px;
text-transform: uppercase;
}
.bk-article-hero .bk-article-hero__readtime {
font-size: 0.8125rem;
color: var(--text-muted);
font-weight: 500;
}
.bk-article-hero .bk-article-hero__meta-icon {
width: 14px;
height: 14px;
color: var(--primary);
}
.bk-article-hero .bk-article-hero__title {
font-size: clamp(1.75rem, 3.5vw, 2.75rem);
font-weight: 800;
line-height: 1.25;
color: var(--text);
text-shadow: 1px 1px 0px #FFFFFF, -1px -1px 0px rgba(42, 35, 25, 0.12);
overflow-wrap: anywhere;
}
.bk-article-hero .bk-article-hero__subtitle {
font-size: clamp(1rem, 1.3vw, 1.15rem);
color: var(--text-muted);
line-height: 1.6;
max-width: 720px;
margin-left: auto;
margin-right: auto;
overflow-wrap: anywhere;
}
.bk-article-hero .bk-article-hero__meta-row {
font-size: 0.875rem;
color: var(--text-muted);
}
.bk-article-hero .bk-article-hero__author-avatar-well {
width: 28px;
height: 28px;
border-radius: 50%;
background: var(--surface-alt);
display: inline-flex;
align-items: center;
justify-content: center;
box-shadow: inset 1px 1px 3px rgba(42, 35, 25, 0.12), inset -1px -1px 3px #FFFFFF;
}
.bk-article-hero .bk-article-hero__author-icon {
width: 16px;
height: 16px;
color: var(--primary);
}
.bk-article-hero .bk-article-hero__author-name {
font-weight: 600;
color: var(--text);
}
.bk-article-hero .bk-article-hero__dot-sep {
color: var(--border);
}
.bk-article-hero .bk-article-hero__date-label {
color: var(--text-muted);
}
.bk-article-hero .bk-article-hero__date {
font-weight: 600;
color: var(--text);
}
.bk-article-layout-section .bk-frame-panel {
background: #FCF8F3;
border: 2px solid #E4DFD8;
border-radius: 32px;
padding: 2.5rem;
box-shadow: inset 3px 3px 8px rgba(42, 35, 25, 0.05), inset -3px -3px 8px #FFFFFF, 6px 6px 16px rgba(42, 35, 25, 0.05);
}
.bk-article-layout-section .bk-frame-panel__rivet {
position: absolute;
width: 6px;
height: 6px;
border-radius: 50%;
background: var(--border);
box-shadow: 1px 1px 2px rgba(42, 35, 25, 0.2), -1px -1px 2px #FFFFFF;
}
.bk-article-layout-section .bk-frame-panel__rivet--tl {
top: 12px;
left: 12px;
}
.bk-article-layout-section .bk-frame-panel__rivet--tr {
top: 12px;
right: 12px;
}
.bk-article-layout-section .bk-frame-panel__rivet--bl {
bottom: 12px;
left: 12px;
}
.bk-article-layout-section .bk-frame-panel__rivet--br {
bottom: 12px;
right: 12px;
}
.bk-article-layout-section .bk-fact-chip {
background: var(--surface);
border: 1px solid var(--border);
padding: 0.5rem 1rem;
border-radius: 9999px;
font-size: 0.8125rem;
box-shadow: 2px 2px 6px rgba(42, 35, 25, 0.06), -2px -2px 6px #FFFFFF;
}
.bk-article-layout-section .bk-fact-chip__dot {
width: 8px;
height: 8px;
border-radius: 50%;
background: var(--primary);
}
.bk-article-layout-section .bk-fact-chip__label {
color: var(--text-muted);
}
.bk-article-layout-section .bk-fact-chip__val {
color: var(--text);
font-weight: 700;
}
.bk-article-layout-section .bk-frame-panel__img-frame {
border-radius: 24px;
overflow: hidden;
aspect-ratio: 16 / 9;
background: var(--surface);
box-shadow: 4px 4px 12px rgba(42, 35, 25, 0.08), -4px -4px 12px #FFFFFF;
border: 1px solid var(--border);
}
.bk-article-layout-section .bk-frame-panel__img {
width: 100%;
height: 100%;
object-fit: cover;
display: block;
}
.bk-article-layout-section .bk-frame-panel__caption {
font-size: 0.8125rem;
color: var(--text-muted);
font-style: italic;
}
.bk-article-layout-section .bk-section-num {
display: inline-flex;
align-items: center;
justify-content: center;
width: 38px;
height: 38px;
border-radius: 50%;
background: var(--surface);
color: var(--primary);
font-weight: 800;
font-size: 0.875rem;
box-shadow: 3px 3px 7px rgba(42, 35, 25, 0.08), -3px -3px 7px #FFFFFF;
border: 1px solid var(--border);
flex-shrink: 0;
}
.bk-article-layout-section .bk-section-title {
font-size: clamp(1.25rem, 2.2vw, 1.75rem);
font-weight: 700;
color: var(--text);
line-height: 1.3;
overflow-wrap: anywhere;
}
.bk-article-layout-section .bk-article-content p {
font-size: 1rem;
line-height: 1.7;
color: var(--text);
margin-bottom: 1rem;
overflow-wrap: anywhere;
}
.bk-article-layout-section .bk-article-points-list {
list-style: none;
padding-left: 0;
margin: 1.25rem 0;
display: flex;
flex-direction: column;
gap: 0.75rem;
}
.bk-article-layout-section .bk-article-points-list li {
position: relative;
padding-left: 1.75rem;
font-size: 0.95rem;
line-height: 1.6;
color: var(--text);
}
.bk-article-layout-section .bk-article-points-list li::before {
content: '';
position: absolute;
left: 0;
top: 0.5rem;
width: 8px;
height: 8px;
border-radius: 50%;
background: var(--primary);
box-shadow: 1px 1px 3px rgba(112, 36, 83, 0.4);
}
.bk-article-layout-section .bk-inline-cta {
background: var(--surface-alt);
border-radius: 24px;
border: 1px solid var(--border);
box-shadow: 4px 4px 12px rgba(42, 35, 25, 0.06), -4px -4px 12px #FFFFFF;
}
.bk-article-layout-section .bk-inline-cta__title {
font-size: 1.25rem;
font-weight: 700;
color: var(--text);
overflow-wrap: anywhere;
}
.bk-article-layout-section .bk-inline-cta__desc {
font-size: 0.875rem;
color: var(--text-muted);
line-height: 1.5;
overflow-wrap: anywhere;
}
.bk-article-layout-section .bk-inline-cta__btn {
background-color: var(--primary);
color: var(--on-primary);
text-decoration: none;
padding: 0.75rem 1.5rem;
border-radius: 9999px;
font-weight: 600;
font-size: 0.875rem;
box-shadow: 3px 3px 8px rgba(112, 36, 83, 0.35), -3px -3px 8px #FFFFFF;
border: none;
transition: all 0.3s ease;
}
.bk-article-layout-section .bk-inline-cta__btn:hover {
background-color: var(--primary-hover);
color: var(--on-primary);
transform: translateY(-2px);
}
.bk-article-layout-section .bk-btn-arrow-icon {
width: 14px;
height: 14px;
}
.bk-article-layout-section .bk-inner-groove {
height: 3px;
width: 100%;
border-radius: 9999px;
background: #E4DFD8;
box-shadow: inset 1px 1px 2px rgba(42, 35, 25, 0.2), inset -1px -1px 2px #FFFFFF;
}
.bk-article-layout-section .bk-pull-quote {
background: var(--surface);
border-left: 4px solid var(--primary);
border-radius: 20px;
box-shadow: 4px 4px 12px rgba(42, 35, 25, 0.05), -4px -4px 12px #FFFFFF;
border-top: 1px solid var(--border);
border-right: 1px solid var(--border);
border-bottom: 1px solid var(--border);
}
.bk-article-layout-section .bk-pull-quote__mark-well {
width: 32px;
height: 32px;
border-radius: 50%;
background: var(--surface-alt);
display: inline-flex;
align-items: center;
justify-content: center;
margin-bottom: 0.75rem;
box-shadow: inset 1px 1px 3px rgba(42, 35, 25, 0.12), inset -1px -1px 3px #FFFFFF;
}
.bk-article-layout-section .bk-pull-quote__svg {
width: 16px;
height: 16px;
color: var(--primary);
}
.bk-article-layout-section .bk-pull-quote__text {
font-size: 1.125rem;
font-style: italic;
line-height: 1.6;
color: var(--text);
overflow-wrap: anywhere;
}
.bk-article-layout-section .bk-pull-quote__author {
font-size: 0.875rem;
font-weight: 700;
color: var(--primary-text);
display: block;
}
.bk-article-layout-section .bk-tags-title {
font-size: 0.875rem;
font-weight: 700;
color: var(--text);
}
.bk-article-layout-section .bk-tag-item {
background: var(--surface);
border: 1px solid var(--border);
color: var(--text);
padding: 0.35rem 0.85rem;
border-radius: 9999px;
font-size: 0.75rem;
font-weight: 600;
box-shadow: 2px 2px 5px rgba(42, 35, 25, 0.06), -2px -2px 5px #FFFFFF;
}
.bk-article-layout-section .bk-author-box {
background: var(--surface);
border: 1px solid var(--border);
box-shadow: 4px 4px 12px rgba(42, 35, 25, 0.06), -4px -4px 12px #FFFFFF;
}
.bk-article-layout-section .bk-author-box__avatar-well {
width: 64px;
height: 64px;
border-radius: 50%;
background: var(--surface-alt);
display: flex;
align-items: center;
justify-content: center;
box-shadow: inset 2px 2px 5px rgba(42, 35, 25, 0.12), inset -2px -2px 5px #FFFFFF;
border: 1px solid var(--border);
}
.bk-article-layout-section .bk-author-box__avatar-icon {
width: 32px;
height: 32px;
color: var(--primary);
}
.bk-article-layout-section .bk-author-box__name {
font-size: 1.125rem;
font-weight: 700;
color: var(--text);
overflow-wrap: anywhere;
}
.bk-article-layout-section .bk-author-box__badge {
font-size: 0.6875rem;
background: var(--surface-alt);
color: var(--primary-text);
padding: 0.2rem 0.6rem;
border-radius: 9999px;
font-weight: 700;
text-transform: uppercase;
letter-spacing: 0.03em;
}
.bk-article-layout-section .bk-author-box__bio {
font-size: 0.875rem;
color: var(--text-muted);
line-height: 1.5;
overflow-wrap: anywhere;
}
.bk-article-layout-section .bk-share-section {
background: var(--surface);
border: 1px solid var(--border);
box-shadow: 3px 3px 8px rgba(42, 35, 25, 0.05), -3px -3px 8px #FFFFFF;
}
.bk-article-layout-section .bk-share-icon-title {
width: 18px;
height: 18px;
color: var(--primary);
}
.bk-article-layout-section .bk-share-title {
font-size: 0.875rem;
font-weight: 700;
color: var(--text);
}
.bk-article-layout-section .bk-share-pill-btn {
background: var(--surface-alt);
color: var(--text);
border: 1px solid var(--border);
padding: 0.4rem 0.9rem;
border-radius: 9999px;
font-size: 0.8125rem;
font-weight: 600;
text-decoration: none;
box-shadow: 2px 2px 5px rgba(42, 35, 25, 0.08), -2px -2px 5px #FFFFFF;
transition: all 0.25s ease;
}
.bk-article-layout-section .bk-share-pill-btn:hover {
background: var(--primary);
color: var(--on-primary);
transform: translateY(-1px);
}
.bk-article-layout-section .bk-share-pill-btn:hover .bk-share-btn-icon {
stroke: #FFFFFF;
}
.bk-article-layout-section .bk-share-btn-icon {
width: 14px;
height: 14px;
stroke: var(--primary);
transition: stroke 0.25s ease;
}
.bk-article-layout-section .bk-title-groove {
height: 3px;
width: 70px;
border-radius: 9999px;
background: #E4DFD8;
box-shadow: inset 1px 1px 2px rgba(42, 35, 25, 0.2), inset -1px -1px 2px #FFFFFF;
}
.bk-article-layout-section .bk-related-card {
background: var(--surface);
border-radius: 24px;
padding: 1.5rem;
border: 1px solid var(--border);
box-shadow: 6px 6px 14px rgba(42, 35, 25, 0.07), -6px -6px 14px #FFFFFF;
transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1), box-shadow 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}
.bk-article-layout-section .bk-related-card:hover {
transform: translateY(-4px);
box-shadow: 10px 10px 22px rgba(42, 35, 25, 0.1), -10px -10px 22px #FFFFFF;
}
.bk-article-layout-section .bk-related-card__media {
border-radius: 18px;
overflow: hidden;
aspect-ratio: 16 / 10;
background: var(--surface-alt);
}
.bk-article-layout-section .bk-related-card__img {
width: 100%;
height: 100%;
object-fit: cover;
display: block;
}
.bk-article-layout-section .bk-related-card__date {
font-size: 0.75rem;
color: var(--text-muted);
}
.bk-article-layout-section .bk-related-card__title {
font-size: 1.125rem;
font-weight: 700;
line-height: 1.35;
overflow-wrap: anywhere;
}
.bk-article-layout-section .bk-related-card__link {
color: var(--text);
text-decoration: none;
transition: color 0.2s ease;
}
.bk-article-layout-section .bk-related-card__link:hover {
color: var(--primary);
}
.bk-article-layout-section .bk-related-card__desc {
font-size: 0.875rem;
color: var(--text-muted);
line-height: 1.55;
overflow-wrap: anywhere;
}
.bk-article-layout-section .bk-related-card__btn {
background: var(--surface-alt);
color: var(--primary-text);
border: 1px solid var(--border);
border-radius: 9999px;
padding: 0.6rem 1.25rem;
font-weight: 600;
font-size: 0.875rem;
text-decoration: none;
display: block;
box-shadow: 2px 2px 6px rgba(42, 35, 25, 0.08), -2px -2px 6px #FFFFFF;
transition: all 0.25s ease;
}
.bk-article-layout-section .bk-related-card__btn:hover {
background: var(--primary);
color: var(--on-primary);
transform: translateY(-1px);
}
.bk-footer {
padding: 4rem 0 2.5rem;
background-color: var(--dark-band);
color: var(--on-dark);
overflow: hidden;
}
.bk-footer .bk-footer__panel {
position: relative;
background: #260c1c;
border-radius: 32px;
padding: 3rem 2.5rem 2rem;
box-shadow: 6px 6px 14px rgba(0, 0, 0, 0.35), -6px -6px 14px rgba(255, 255, 255, 0.05);
}
.bk-footer .bk-footer__rivet {
position: absolute;
width: 6px;
height: 6px;
border-radius: 50%;
background: #4a1d3a;
box-shadow: 1px 1px 2px rgba(0, 0, 0, 0.4), -1px -1px 2px rgba(255, 255, 255, 0.1);
}
.bk-footer .bk-footer__rivet--tl {
top: 12px;
left: 12px;
}
.bk-footer .bk-footer__rivet--tr {
top: 12px;
right: 12px;
}
.bk-footer .bk-footer__rivet--bl {
bottom: 12px;
left: 12px;
}
.bk-footer .bk-footer__rivet--br {
bottom: 12px;
right: 12px;
}
.bk-footer .bk-footer__brand {
display: flex;
align-items: center;
gap: 0.75rem;
margin-bottom: 1.25rem;
}
.bk-footer .bk-footer__logo-wrap {
width: 44px;
height: 44px;
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
background: #321025;
box-shadow: inset 2px 2px 4px rgba(0, 0, 0, 0.4), inset -2px -2px 4px rgba(255, 255, 255, 0.05);
}
.bk-footer .bk-footer__logo {
max-width: 32px;
max-height: 32px;
object-fit: contain;
}
.bk-footer .bk-footer__name {
font-size: 1.25rem;
font-weight: 700;
color: var(--on-dark);
letter-spacing: -0.01em;
}
.bk-footer .bk-footer__desc {
font-size: 0.875rem;
line-height: 1.6;
color: var(--on-dark-muted);
margin-bottom: 1.5rem;
}
.bk-footer .bk-footer__contact-list {
display: flex;
flex-direction: column;
gap: 0.875rem;
}
.bk-footer .bk-footer__contact-item {
display: flex;
align-items: center;
gap: 0.75rem;
font-size: 0.875rem;
min-width: 0;
}
.bk-footer .bk-footer__icon-box {
flex-shrink: 0;
width: 32px;
height: 32px;
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
background: #321025;
box-shadow: inset 2px 2px 4px rgba(0, 0, 0, 0.4), inset -2px -2px 4px rgba(255, 255, 255, 0.05);
}
.bk-footer .bk-footer__icon {
width: 16px;
height: 16px;
stroke: #d4a5c4;
}
.bk-footer .bk-footer__contact-val {
color: var(--on-dark-muted);
overflow-wrap: anywhere;
}
.bk-footer .bk-footer__contact-link {
color: var(--on-dark-muted);
text-decoration: none;
overflow-wrap: anywhere;
transition: color 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}
.bk-footer .bk-footer__contact-link:hover {
color: #ffffff;
text-decoration: underline;
}
.bk-footer .bk-footer__heading {
font-size: 1.125rem;
font-weight: 600;
color: var(--on-dark);
margin-bottom: 1.25rem;
}
.bk-footer .bk-footer__nav-list {
list-style: none;
padding: 0;
margin: 0;
display: flex;
flex-direction: column;
gap: 0.75rem;
}
.bk-footer .bk-footer__nav-link {
color: var(--on-dark-muted);
text-decoration: none;
font-size: 0.875rem;
display: inline-block;
transition: color 0.3s cubic-bezier(0.4, 0, 0.2, 1), transform 0.2s cubic-bezier(0.4, 0, 0.2, 1);
}
.bk-footer .bk-footer__nav-link:hover {
color: #ffffff;
transform: translateX(3px);
}
.bk-footer .bk-footer__share-desc {
font-size: 0.875rem;
color: var(--on-dark-muted);
line-height: 1.6;
margin-bottom: 1rem;
}
.bk-footer .bk-footer__share-capsules {
display: flex;
flex-wrap: wrap;
gap: 0.75rem;
}
.bk-footer .bk-footer__pill {
display: inline-flex;
align-items: center;
gap: 0.5rem;
padding: 0.625rem 1.25rem;
border-radius: 9999px;
background: #321025;
color: var(--on-dark);
text-decoration: none;
font-size: 0.875rem;
font-weight: 500;
box-shadow: 3px 3px 8px rgba(0, 0, 0, 0.3), -3px -3px 8px rgba(255, 255, 255, 0.05);
transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}
.bk-footer .bk-footer__pill-icon {
width: 16px;
height: 16px;
stroke: #d4a5c4;
}
.bk-footer .bk-footer__pill:hover {
background: #3d142d;
color: #ffffff;
box-shadow: inset 2px 2px 5px rgba(0, 0, 0, 0.4), inset -2px -2px 5px rgba(255, 255, 255, 0.05);
transform: translateY(1px);
}
.bk-footer .bk-footer__groove {
height: 3px;
width: 100%;
border-radius: 9999px;
margin: 2.5rem 0 1.5rem;
background: #1c0814;
box-shadow: inset 1px 1px 2px rgba(0, 0, 0, 0.6), inset -1px -1px 2px rgba(255, 255, 255, 0.04);
}
.bk-footer .bk-footer__bottom {
display: flex;
flex-direction: column;
align-items: center;
justify-content: space-between;
gap: 1rem;
}
@media (min-width: 768px) {
.bk-footer .bk-footer__bottom {
flex-direction: row;
}
}
.bk-footer .bk-footer__copy {
font-size: 0.8125rem;
color: var(--on-dark-muted);
}
.bk-footer .bk-footer__badge {
display: inline-flex;
align-items: center;
padding: 0.35rem 0.85rem;
border-radius: 9999px;
font-size: 0.75rem;
font-weight: 500;
color: #d4a5c4;
background: #321025;
box-shadow: inset 1px 1px 3px rgba(0, 0, 0, 0.4), inset -1px -1px 3px rgba(255, 255, 255, 0.05);
}
@media (max-width: 767px) {
.bk-article-hero {
padding-top: 1.5rem;
padding-bottom: 1.5rem;
}
.bk-article-hero .bk-article-hero__card {
padding: 2rem 1.25rem 1.75rem;
border-radius: 24px;
}
.bk-article-hero .bk-article-hero__title {
font-size: 1.125rem;
}
.bk-article-layout-section .bk-frame-panel {
padding: 1.5rem 1rem;
border-radius: 20px;
}
.bk-article-layout-section .bk-section-title {
font-size: 1rem;
}
.bk-article-layout-section .bk-pull-quote__text {
font-size: 0.95rem;
}
.bk-footer {
padding: 3rem 0 2rem;
}
.bk-footer .bk-footer__panel {
padding: 2rem 1.25rem 1.5rem;
border-radius: 24px;
}
.bk-footer .bk-footer__heading {
font-size: 14px;
margin-bottom: 0.875rem;
}
.bk-footer .bk-footer__bottom {
text-align: center;
}
}
/* mobile-text-guard */
@media (max-width: 767px) {
h1, h2, h3, h4, h5, h6, p, li, dt, dd, blockquote, figcaption, td, th, label {
overflow-wrap: anywhere;
}
a, button, .btn {
overflow-wrap: anywhere;
white-space: normal;
}
img, video, iframe {
max-width: 100%;
}
}
/* ===== requested fixes ===== */
/* 1. Hide burger toggler on desktop (>=992px), keep it on mobile */
@media (min-width: 992px) {
.breykers-header-wrap .breykers-toggler {
display: none !important;
}
}
/* 3. "Explore Verified Hotels" button: white text & arrow on dark bg in all states */
.vcc-section-dark .vcc-card a.vcc-btn,
.vcc-on-dark .vcc-card a.vcc-btn,
.vcc-section-dark .vcc-card a.vcc-btn:link,
.vcc-section-dark .vcc-card a.vcc-btn:visited,
.vcc-on-dark .vcc-card a.vcc-btn:link,
.vcc-on-dark .vcc-card a.vcc-btn:visited {
color: var(--on-primary);
background-color: var(--primary);
}
.vcc-section-dark .vcc-card a.vcc-btn:hover,
.vcc-section-dark .vcc-card a.vcc-btn:focus,
.vcc-section-dark .vcc-card a.vcc-btn:active,
.vcc-on-dark .vcc-card a.vcc-btn:hover,
.vcc-on-dark .vcc-card a.vcc-btn:focus,
.vcc-on-dark .vcc-card a.vcc-btn:active {
color: var(--on-primary);
background-color: var(--primary-hover);
}
.vcc-section-dark .vcc-card a.vcc-btn svg,
.vcc-on-dark .vcc-card a.vcc-btn svg {
color: var(--on-primary);
stroke: currentColor;
}
/* 4. Dictionary filters: active button = maroon bg + white text */
.breykers-dictionary__filter-btn.active,
.breykers-dictionary__filter-btn.active:hover,
.breykers-dictionary__filter-btn.active:focus {
background: var(--primary);
background-color: var(--primary);
color: var(--on-primary);
}
/* 5. Privacy page action buttons: single-line text, rounded (not pill), 44-48px tall */
.bk-contact-banner .bk-contact-actions {
flex-shrink: 0;
}
.bk-contact-banner .bk-contact-actions .vcc-btn,
.bk-contact-banner .bk-contact-actions .vcc-btn-alt {
border-radius: 14px;
min-height: 46px;
padding: 0.5rem 1.4rem;
white-space: nowrap;
overflow-wrap: normal;
font-size: 0.9375rem;
line-height: 1.2;
display: inline-flex;
align-items: center;
justify-content: center;
}
@media (max-width: 575.98px) {
.bk-contact-banner .bk-contact-actions {
flex-direction: column;
align-items: stretch;
width: 100%;
gap: 12px;
}
.bk-contact-banner .bk-contact-actions .vcc-btn,
.bk-contact-banner .bk-contact-actions .vcc-btn-alt {
width: 100%;
min-height: 46px;
}
}
/* 6. Footer: keep columns top-aligned with even spacing */
.bk-footer .row {
align-items: flex-start;
}
.bk-footer .bk-footer__desc {
margin-bottom: 0;
}