/*
Theme Name: Lago Bricks Child
Theme URI: https://lagobali.com
Description: Bricks child theme for Lago Bali — luxury resort & residences.
Author: Numada
Template: bricks
Version: 2.0.0
Text Domain: lago
*/
/* ============================================================
FONTS
============================================================ */
@font-face {
font-family: 'Didot';
src: url('assets/fonts/Didot.otf') format('opentype');
font-weight: 400;
font-style: normal;
font-display: swap;
}
@font-face {
font-family: 'Didot';
src: url('assets/fonts/Didot-Bold.otf') format('opentype');
font-weight: 700;
font-style: normal;
font-display: swap;
}
@font-face {
font-family: 'Didot';
src: url('assets/fonts/Didot-Italic.otf') format('opentype');
font-weight: 400;
font-style: italic;
font-display: swap;
}
@font-face {
font-family: 'Didot Title';
src: url('assets/fonts/Didot-Title.otf') format('opentype');
font-weight: 400;
font-style: normal;
font-display: swap;
}
/* ============================================================
BRAND TOKENS
============================================================ */
:root {
--lago-obsidian: #000000;
--lago-navy: #0E2557;
--lago-steel: #6C97D3;
--lago-ivory: #F7F0E7;
--lago-white: #ffffff;
--lago-grey: #666666;
--lago-grey-light: #E8E4DE;
--lago-font: Arial, Helvetica, sans-serif;
--lago-font-body: Arial, Helvetica, sans-serif;
--lago-fw-regular: 400;
--lago-fw-bold: 700;
--lago-p: 12px;
--lago-h2: 24px;
--lago-h3: 18px;
--lago-h4: 14px;
--lago-hero-size: clamp(4.5rem, 9vw, 9rem);
--lago-xl: clamp(2.5rem, 5vw, 5rem);
--lago-lg: clamp(1.75rem, 3.5vw, 3rem);
--lago-sm: 0.8125rem;
--lago-xs: 0.6875rem;
--lago-ease: cubic-bezier(0.25, 0.46, 0.45, 0.94);
--lago-max: 1280px;
--lago-z-header: 1000;
--lago-hdr-height: 62px; /* header bar height — sync with actual rendered height */
/* Spacing system — override per breakpoint */
--lago-section-pad: 120px; /* vertical rhythm for content sections */
--lago-gutter: 48px; /* horizontal container padding */
--lago-booking-bar-mobile-h: 300px; /* stacked booking bar height on mobile */
}
/* ============================================================
RESET & BASE
============================================================ */
*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
font-family: var(--lago-font-body);
font-size: var(--lago-p);
line-height: 1.7;
color: var(--lago-obsidian);
background: var(--lago-white);
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
margin: 0;
overflow-x: hidden;
}
h1, h2, h3, h4, h5, h6 {
font-family: var(--lago-font); /* Didot */
font-weight: var(--lago-fw-bold);
line-height: 1.1;
letter-spacing: 0.02em;
margin-top: 0;
}
h2 { font-size: var(--lago-h2); }
h3 { font-size: var(--lago-h3); }
h4 { font-size: var(--lago-h4); }
p {
color: var(--brxw-color-neutral-600);
font-size: 12px;
font-family: Arial, sans-serif;
font-weight: 400;
line-height: 1.8;
letter-spacing: 0.3px;
}
a { color: var(--lago-navy); text-decoration: none; }
img { max-width: 100%; height: auto; display: block; }
/* ============================================================
HEADER — transparent on homepage, solid on scroll
============================================================ */
#brx-header,
.brx-header {
transition: background 0.5s var(--lago-ease), box-shadow 0.5s var(--lago-ease), top 0.5s var(--lago-ease);
}
/* Home header slide-in via `top` (not `transform`) — keeps the
nested-nav's mobile dropdown anchored to the viewport. A transformed
ancestor would make `position: fixed` inside it scope to the header
box and collapse the full-screen menu. */
body.lago-home #brx-header,
body.lago-home .brx-header {
position: fixed;
top: -100%;
left: 0;
right: 0;
width: 100%;
z-index: 999;
}
body.lago-home.lago-header-scrolled #brx-header,
body.lago-home.lago-header-scrolled .brx-header {
top: 0;
}
/* ============================================================
SHARED UTILITIES
============================================================ */
.lago-container {
max-width: var(--lago-max);
margin: 0 auto;
padding: 0 var(--lago-gutter);
}
.lago-eyebrow {
display: block;
font-size: 0.625rem;
font-weight: var(--lago-fw-bold);
letter-spacing: 0.22em;
text-transform: uppercase;
color: var(--lago-steel);
margin-bottom: 16px;
}
.lago-rule {
display: block;
width: 40px;
height: 1px;
background: var(--lago-steel);
margin: 24px 0 40px;
}
/* ============================================================
BUTTONS
============================================================ */
.lago-btn {
display: inline-flex;
align-items: center;
font-family: var(--lago-font);
font-weight: var(--lago-fw-bold);
font-size: var(--lago-xs);
letter-spacing: 0.18em;
text-transform: uppercase;
padding: 16px 40px;
border: 1px solid transparent;
cursor: pointer;
text-decoration: none;
transition: all 0.25s var(--lago-ease);
}
.lago-btn--primary { background: var(--lago-navy); color: var(--lago-white); border-color: var(--lago-navy); }
.lago-btn--primary:hover { background: var(--lago-obsidian); border-color: var(--lago-obsidian); color: var(--lago-white); }
/* Full-width strip button — light by default, fills dark on hover.
Use on stacked CTA blocks (e.g. Book Table / Book Class / Book Stay). */
.lago-btn-strip,
.lago-btn-strip a,
.lago-btn-strip a.bricks-button,
.brxe-button.lago-btn-strip a {
display: flex !important;
align-items: center !important;
justify-content: center !important;
width: 100% !important;
padding: 24px 32px !important;
background: var(--lago-white) !important;
color: var(--lago-obsidian) !important;
border: none !important;
font-weight: var(--lago-fw-bold) !important;
font-size: var(--lago-xs) !important;
letter-spacing: 0.18em !important;
text-transform: uppercase !important;
text-decoration: none !important;
transition: background 0.35s var(--lago-ease), color 0.35s var(--lago-ease) !important;
cursor: pointer;
}
.lago-btn-strip:hover,
.lago-btn-strip a:hover,
.lago-btn-strip a.bricks-button:hover,
.brxe-button.lago-btn-strip a:hover {
background: var(--lago-obsidian) !important;
color: var(--lago-white) !important;
}
.lago-btn--outline { background: transparent; color: var(--lago-white); border-color: rgba(247,240,231,0.7); }
.lago-btn--outline:hover { background: var(--lago-white); color: var(--lago-obsidian); border-color: var(--lago-white); }
.lago-btn--dark { background: transparent; color: var(--lago-obsidian); border-color: var(--lago-obsidian); }
.lago-btn--dark:hover { background: var(--lago-obsidian); color: var(--lago-white); }
.lago-btn--white { background: var(--lago-white); color: var(--lago-obsidian); border-color: var(--lago-obsidian); }
.lago-btn--white:hover { background: var(--lago-obsidian); color: var(--lago-white); border-color: var(--lago-obsidian); }
.lago-text-link {
display: inline-flex;
align-items: center;
gap: 8px;
font-size: var(--lago-xs);
font-weight: var(--lago-fw-bold);
letter-spacing: 0.15em;
text-transform: uppercase;
color: var(--lago-navy);
transition: gap 0.25s var(--lago-ease);
}
.lago-text-link::after { content: '→'; }
.lago-text-link:hover { gap: 14px; color: var(--lago-navy); }
/* ── Bricks native button element → lago class compatibility ──────────────
Neutralises Bricks' default button chrome and applies our design tokens
to the inner rendered by the brxe-button element.
─────────────────────────────────────────────────────────────────────── */
.brxe-button.lago-btn,
.brxe-button.lago-split__link { display: inline-block; background: none; border: none; padding: 0; }
/* lago-btn: shared base — covers both plain and Bricks' .bricks-button */
.brxe-button.lago-btn a,
.brxe-button.lago-btn a.bricks-button {
all: unset;
display: inline-flex !important;
align-items: center;
font-family: var(--lago-font);
font-weight: var(--lago-fw-bold);
font-size: var(--lago-xs);
letter-spacing: 0.18em;
text-transform: uppercase;
padding: 16px 40px;
border: 1px solid transparent;
cursor: pointer;
transition: all 0.25s var(--lago-ease);
border-radius: 0 !important;
}
/* --primary */
.brxe-button.lago-btn--primary a,
.brxe-button.lago-btn--primary a.bricks-button { background: var(--lago-navy); color: var(--lago-white) !important; border-color: var(--lago-navy); }
.brxe-button.lago-btn--primary a:hover,
.brxe-button.lago-btn--primary a.bricks-button:hover { background: var(--lago-obsidian); color: var(--lago-white) !important; border-color: var(--lago-obsidian); }
/* --dark */
.brxe-button.lago-btn--dark a,
.brxe-button.lago-btn--dark a.bricks-button { background: transparent; color: var(--lago-obsidian) !important; border-color: var(--lago-obsidian); }
.brxe-button.lago-btn--dark a:hover,
.brxe-button.lago-btn--dark a.bricks-button:hover { background: var(--lago-obsidian); color: var(--lago-white) !important; }
/* --outline */
.brxe-button.lago-btn--outline a,
.brxe-button.lago-btn--outline a.bricks-button { background: transparent; color: var(--lago-white) !important; border-color: rgba(247,240,231,0.7); }
.brxe-button.lago-btn--outline a:hover,
.brxe-button.lago-btn--outline a.bricks-button:hover { background: var(--lago-white); color: var(--lago-obsidian) !important; border-color: var(--lago-white); }
/* --white */
.brxe-button.lago-btn--white a,
.brxe-button.lago-btn--white a.bricks-button { background: var(--lago-white); color: var(--lago-obsidian) !important; border-color: var(--lago-obsidian); }
.brxe-button.lago-btn--white a:hover,
.brxe-button.lago-btn--white a.bricks-button:hover { background: var(--lago-obsidian); color: var(--lago-white) !important; border-color: var(--lago-obsidian); }
/* lago-split__link: arrow text links */
.brxe-button.lago-split__link a,
.brxe-button.lago-split__link a.bricks-button {
all: unset;
display: inline-flex !important;
align-items: center;
gap: 10px;
font-size: var(--lago-xs);
font-weight: var(--lago-fw-bold);
letter-spacing: 0.15em;
text-transform: uppercase;
cursor: pointer;
transition: gap 0.25s var(--lago-ease);
}
:where(.brxe-button.lago-split__link a),
:where(.brxe-button.lago-split__link a.bricks-button) { color: var(--lago-navy); }
.brxe-button.lago-split__link a::after,
.brxe-button.lago-split__link a.bricks-button::after { content: '→'; }
.brxe-button.lago-split__link a:hover,
.brxe-button.lago-split__link a.bricks-button:hover { gap: 16px; }
/* ============================================================
A. HERO
============================================================ */
.lago-hero {
position: relative !important;
width: 100%;
height: 100vh !important;
min-height: 640px;
overflow: hidden;
background: var(--lago-obsidian);
display: block !important;
}
/* Hero background zoom — the whole section scales on scroll.
overflow:hidden clips the extra scale to section bounds.
transform-origin: center top keeps the top edge fixed. */
.lago-hero {
will-change: transform;
transform-origin: center top;
}
.lago-hero-90vh { height: 90vh !important; min-height: 0; }
.lago-hero-80vh { height: 80vh !important; min-height: 0; }
/* The Bricks section inner container — reset it */
.lago-hero > .brxe-container,
.lago-hero > [class*="brxe-"]:not(.lago-hero__overlay):not(.lago-hero__content):not(.lago-booking-bar-wrap) {
position: static;
height: auto;
}
.lago-hero__overlay {
position: absolute !important;
inset: 0;
background: linear-gradient(
168deg,
rgba(0,0,0,0.08) 0%,
rgba(0,0,0,0.42) 55%,
rgba(0,0,0,0.75) 100%
);
z-index: 1;
pointer-events: none;
}
.lago-hero-no-grad .lago-hero__overlay { background: none; }
.lago-hero-no-grad::before,
.lago-hero-no-grad::after { background: none !important; }
/* Content fills hero, text sits above booking bar */
.lago-hero__content {
position: absolute !important;
inset: 0;
bottom: 80px !important; /* clear the booking bar height */
display: flex !important;
flex-direction: column;
justify-content: flex-end;
align-items: flex-start;
padding: 0 64px 64px !important;
z-index: 2;
max-width: none !important;
width: 100% !important;
}
.lago-hero__eyebrow {
display: block;
font-size: 0.625rem;
font-weight: var(--lago-fw-bold);
letter-spacing: 0.28em;
text-transform: uppercase;
color: var(--lago-steel);
margin-bottom: 20px;
}
.lago-hero__title {
font-size: var(--lago-hero-size) !important;
font-weight: var(--lago-fw-bold) !important;
color: var(--lago-white) !important;
letter-spacing: 0.03em !important;
text-transform: uppercase !important;
line-height: 0.93 !important;
margin: 0 !important;
max-width: 800px;
}
/* Booking bar — pinned to bottom of hero */
.lago-booking-bar-wrap {
position: absolute !important;
bottom: 0;
left: 0;
right: 0;
z-index: 3;
width: 100%;
max-width: none !important;
}
.lago-booking-bar {
display: flex;
align-items: stretch;
width: 100%;
height: 80px;
background: rgba(0,0,0,0.65);
backdrop-filter: blur(16px);
-webkit-backdrop-filter: blur(16px);
border-top: 1px solid rgba(255,255,255,0.1);
}
.lago-booking-bar__field {
flex: 1;
display: flex;
flex-direction: column;
justify-content: center;
padding: 0 28px;
border-right: 1px solid rgba(255,255,255,0.1);
cursor: pointer;
transition: background 0.2s;
}
.lago-booking-bar__field:hover { background: rgba(255,255,255,0.06); }
.lago-booking-bar__label {
font-size: 0.5rem;
font-weight: var(--lago-fw-bold);
letter-spacing: 0.22em;
text-transform: uppercase;
color: rgba(255,255,255,0.45);
margin-bottom: 5px;
display: block;
}
.lago-booking-bar__input,
.lago-booking-bar__select {
font-family: var(--lago-font);
font-size: 0.875rem;
color: var(--lago-white);
background: transparent;
border: none;
outline: none;
padding: 0;
width: 100%;
cursor: pointer;
appearance: none;
-webkit-appearance: none;
}
.lago-booking-bar__select option { color: var(--lago-obsidian); }
.lago-booking-bar__input::placeholder { color: rgba(255,255,255,0.55); }
.lago-booking-bar__btn {
font-family: var(--lago-font);
font-weight: var(--lago-fw-bold);
font-size: var(--lago-xs);
letter-spacing: 0.18em;
text-transform: uppercase;
color: var(--lago-obsidian);
background: var(--lago-white);
border: none;
padding: 0 56px;
cursor: pointer;
white-space: nowrap;
height: 100%;
transition: background 0.25s;
min-width: 160px;
}
.lago-booking-bar__btn:hover { background: var(--lago-ivory); }
/* ============================================================
B. ACCOMMODATION CAROUSEL
============================================================ */
.lago-carousel-section {
padding: var(--lago-section-pad) 0;
overflow: hidden;
background: var(--lago-white);
}
.lago-carousel-header {
display: flex;
justify-content: space-between;
align-items: flex-end;
margin-bottom: 56px;
padding: 0 var(--lago-gutter);
max-width: var(--lago-max);
margin-left: auto;
margin-right: auto;
}
.lago-carousel-header h2 { font-size: var(--lago-lg); margin: 0; }
.lago-carousel {
display: flex;
gap: 3px;
overflow-x: auto;
padding: 4px var(--lago-gutter) 8px;
scroll-snap-type: x mandatory;
-ms-overflow-style: none;
scrollbar-width: none;
}
.lago-carousel::-webkit-scrollbar { display: none; }
.lago-carousel__card {
flex: 0 0 400px;
scroll-snap-align: start;
overflow: hidden;
cursor: pointer;
background: var(--lago-white);
}
.lago-carousel__image-wrap {
display: block;
overflow: hidden;
aspect-ratio: 3 / 2;
}
.lago-carousel__img {
width: 100%;
height: 100%;
object-fit: cover;
transition: transform 0.9s var(--lago-ease);
}
.lago-carousel__placeholder {
width: 100%;
height: 100%;
min-height: 267px;
background: linear-gradient(135deg, var(--lago-navy) 0%, #163a7a 100%);
}
.lago-carousel__card:hover .lago-carousel__img { transform: scale(1.06); }
.lago-carousel__body {
padding: 24px 8px 24px 0;
border-top: 1px solid var(--lago-grey-light);
margin-top: 20px;
}
.lago-carousel__location {
font-size: 0.5625rem;
font-weight: var(--lago-fw-bold);
letter-spacing: 0.22em;
text-transform: uppercase;
color: var(--lago-steel);
margin-bottom: 8px;
}
.lago-carousel__title {
font-size: 1.1875rem;
font-weight: var(--lago-fw-bold);
color: var(--lago-obsidian);
margin-bottom: 16px;
line-height: 1.2;
}
.lago-carousel__link {
font-size: 0.5625rem;
font-weight: var(--lago-fw-bold);
letter-spacing: 0.18em;
text-transform: uppercase;
color: var(--lago-navy);
display: inline-flex;
align-items: center;
gap: 8px;
transition: gap 0.25s var(--lago-ease);
}
.lago-carousel__link::after { content: '→'; }
.lago-carousel__link:hover { gap: 14px; color: var(--lago-navy); }
/* ============================================================
C. EXPERIENCE GRID
============================================================ */
.lago-exp-grid {
display: grid;
grid-template-columns: 1fr 1fr;
grid-template-rows: clamp(340px, 32vw, 560px) clamp(340px, 32vw, 560px);
gap: 3px;
}
.lago-exp-card--large { grid-row: 1 / 3; }
.lago-exp-card {
position: relative;
overflow: hidden;
display: block;
}
.lago-exp-card__bg {
position: absolute;
inset: 0;
background-size: cover;
background-position: center;
transition: transform 0.9s var(--lago-ease);
}
.lago-exp-card:hover .lago-exp-card__bg { transform: scale(1.05); }
.lago-exp-card__overlay {
position: absolute;
inset: 0;
background: linear-gradient(to top, rgba(0,0,0,0.8) 0%, rgba(0,0,0,0.2) 50%, transparent 100%);
transition: opacity 0.4s;
}
.lago-exp-card:hover .lago-exp-card__overlay { opacity: 1.1; }
.lago-exp-card__content {
position: absolute;
bottom: 48px;
left: 48px;
right: 48px;
z-index: 2;
transition: transform 0.4s var(--lago-ease);
}
.lago-exp-card:hover .lago-exp-card__content { transform: translateY(-8px); }
.lago-exp-card__eyebrow {
font-size: 0.5rem;
font-weight: 700;
letter-spacing: 0.28em;
text-transform: uppercase;
color: var(--lago-steel);
display: block;
margin-bottom: 10px;
}
.lago-exp-card__title {
font-size: clamp(1.5rem, 3vw, 2.5rem);
font-weight: 700;
color: var(--lago-white);
margin: 0 0 10px;
line-height: 1.1;
}
.lago-exp-card__desc {
font-size: 0.875rem;
color: rgba(255,255,255,0.72);
line-height: 1.65;
margin: 0 0 20px;
max-width: 320px;
}
.lago-exp-card__arrow {
display: inline-flex;
align-items: center;
gap: 8px;
font-size: 0.5625rem;
font-weight: 700;
letter-spacing: 0.18em;
text-transform: uppercase;
color: var(--lago-white);
opacity: 0;
transform: translateX(-6px);
transition: opacity 0.3s, transform 0.3s;
}
.lago-exp-card__arrow::after { content: '→'; }
.lago-exp-card:hover .lago-exp-card__arrow { opacity: 1; transform: translateX(0); }
/* ============================================================
D. DINING SPLIT
============================================================ */
.lago-split {
display: grid;
grid-template-columns: 55fr 45fr;
min-height: 680px;
}
.lago-split__media { overflow: hidden; }
/* Covers both PHP output (![]()
) and
the native Bricks image element inside .lago-split__media */
.lago-split__img,
.lago-split__media img {
width: 100%;
height: 100%;
object-fit: cover;
display: block;
transition: transform 1s var(--lago-ease);
}
.lago-split:hover .lago-split__img,
.lago-split:hover .lago-split__media img { transform: scale(1.03); }
/* Bricks image element wrapper must fill the media column */
.lago-split__media .brxe-image,
.lago-split__media figure { width: 100%; height: 100%; }
.lago-split__placeholder {
width: 100%;
height: 100%;
min-height: 680px;
background: linear-gradient(135deg, #0a1e45 0%, var(--lago-navy) 100%);
}
.lago-split__content {
display: flex;
flex-direction: column;
justify-content: center;
align-items: flex-start;
text-align: left;
padding: 96px 80px 96px 96px;
background: var(--lago-white);
}
.lago-split__heading {
font-size: var(--lago-lg);
font-weight: var(--lago-fw-bold);
color: var(--lago-obsidian);
margin-bottom: 0;
line-height: 1.05;
}
.lago-split__rule {
display: block !important;
width: 40px !important;
height: 1px !important;
min-height: 1px !important;
max-height: 1px !important;
background: var(--lago-steel) !important;
margin: 28px 0 32px !important;
padding: 0 !important;
}
.lago-split_rule_header {
display: block !important;
width: 40px !important;
height: 1px !important;
min-height: 1px !important;
max-height: 1px !important;
background: transparent !important;
margin: 0 !important;
padding: 0 !important;
}
.lago-split__text {
font-size: 0.9375rem;
color: var(--lago-grey);
line-height: 1.85;
margin-bottom: 32px;
}
.lago-split__links {
display: flex;
flex-direction: column;
gap: 12px;
margin-bottom: 40px;
}
.lago-split__link {
font-size: var(--lago-xs);
font-weight: var(--lago-fw-bold);
letter-spacing: 0.15em;
text-transform: uppercase;
display: inline-flex;
align-items: center;
gap: 10px;
transition: gap 0.25s var(--lago-ease);
}
/* No colour set on .lago-split__link — inherits from parent.
Set the colour on the parent container, or via Bricks Style → Typography → Color on the element itself. */
.lago-split__link::after { content: '→'; }
.lago-split__link:hover { gap: 16px; }
/* lago-split__link-white: standalone white version (apply on its own).
Colour is locked white. Font-size is overridable via Bricks Style → Typography → Font size. */
.lago-split__link-white,
.lago-split__link-white a,
.lago-split__link-white a:visited,
.brxe-button.lago-split__link-white a,
.brxe-button.lago-split__link-white a.bricks-button,
.lago-slide-content .lago-split__link-white,
.lago-slide-content .lago-split__link-white a,
.lago-slide-content a.lago-split__link-white {
font-weight: var(--lago-fw-bold);
letter-spacing: 0.15em;
text-transform: uppercase;
color: #FFFFFF !important;
display: inline-flex;
align-items: center;
gap: 10px;
transition: gap 0.25s var(--lago-ease);
text-decoration: none !important;
}
.lago-split__link-white { font-size: var(--lago-xs); }
/* Arrow — only one rendered per link.
Plain element (heading/span/text) gets it directly.
Bricks button case: arrow goes on the inner anchor only — the wrapper is excluded via :not(.brxe-button). */
.lago-split__link-white:not(.brxe-button)::after,
.brxe-button.lago-split__link-white a::after,
.brxe-button.lago-split__link-white a.bricks-button::after {
content: '→';
color: #FFFFFF !important;
margin-left: 2px;
}
.lago-split__link-white:hover,
.lago-split__link-white a:hover,
.brxe-button.lago-split__link-white a:hover,
.brxe-button.lago-split__link-white a.bricks-button:hover {
gap: 16px;
color: #FFFFFF !important;
}
/* Alternate split: image right, content left */
.lago-split--alt .lago-split__media { order: 2; }
.lago-split--alt .lago-split__content { order: 1; }
/* ============================================================
E. LEMBONGAN BANNER
============================================================ */
.lago-banner {
position: relative;
min-height: 640px;
display: flex;
align-items: center;
overflow: hidden;
}
/* Contained variant — max-width constrained, 70vh tall, centred on page */
.lago-banner--contained {
max-width: var(--lago-max); /* 1280px */
margin: 0 auto;
min-height: 70vh;
}
.lago-banner__bg {
position: absolute;
inset: 0;
background: linear-gradient(135deg, #060f26 0%, var(--lago-navy) 100%);
background-size: cover;
background-position: center;
transition: transform 1.2s var(--lago-ease);
}
.lago-banner:hover .lago-banner__bg { transform: scale(1.03); }
/* Bricks image element compat — fills .lago-banner__bg completely */
.lago-banner__bg .brxe-image,
.lago-banner__bg figure {
position: absolute !important;
inset: 0 !important;
width: 100% !important;
height: 100% !important;
margin: 0 !important;
padding: 0 !important;
display: block !important;
}
.lago-banner__bg img {
position: absolute !important;
inset: 0 !important;
width: 100% !important;
height: 100% !important;
object-fit: cover !important;
object-position: center center !important;
display: block !important;
}
.lago-banner__overlay {
position: absolute;
inset: 0;
background: linear-gradient(to right, rgba(0,0,0,0.6) 0%, rgba(0,0,0,0.2) 60%, transparent 100%);
}
/* Contained variant — heavier gradient that holds solid dark to ~40% then fades out */
.lago-banner--contained .lago-banner__overlay {
background: linear-gradient(
to right,
rgba(0,0,0,0.80) 0%,
rgba(0,0,0,0.78) 35%,
rgba(0,0,0,0.18) 55%,
transparent 70%
);
}
.lago-banner__content {
position: relative;
z-index: 2;
padding: 96px 80px;
max-width: 620px;
text-align: left;
align-self: center; /* vertically centred in the flex row */
margin-right: auto; /* push to left edge */
}
.lago-banner__title {
font-size: var(--lago-xl);
font-weight: var(--lago-fw-bold);
color: var(--lago-white);
letter-spacing: 0.04em;
text-transform: uppercase;
line-height: 0.95;
margin-bottom: 32px;
}
.lago-banner__text {
font-size: 1rem;
color: rgba(255,255,255,0.75);
line-height: 1.8;
margin-bottom: 48px;
}
/* ============================================================
F. NEWS GRID
============================================================ */
.lago-news-header {
display: flex;
justify-content: space-between;
align-items: flex-end;
}
.lago-news-section {
padding: var(--lago-section-pad) 0;
background: var(--lago-white);
}
.lago-news-grid {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 3px;
margin-top: 56px;
}
.lago-news-card {
overflow: hidden;
cursor: pointer;
transition: transform 0.4s var(--lago-ease);
}
.lago-news-card:hover { transform: translateY(-4px); }
.lago-news-card__image-wrap {
display: block;
overflow: hidden;
aspect-ratio: 4 / 3;
}
.lago-news-card__img {
width: 100%;
height: 100%;
object-fit: cover;
transition: transform 0.9s var(--lago-ease);
}
.lago-news-card:hover .lago-news-card__img { transform: scale(1.06); }
.lago-news-card__body {
padding: 28px 24px 36px;
border-top: 1px solid var(--lago-grey-light);
background: var(--lago-white);
}
.lago-news-card__date {
font-size: 0.5rem;
font-weight: 700;
letter-spacing: 0.22em;
text-transform: uppercase;
color: var(--lago-steel);
margin-bottom: 10px;
}
.lago-news-card__title {
font-size: 1.125rem;
font-weight: var(--lago-fw-bold);
color: var(--lago-obsidian);
line-height: 1.3;
margin-bottom: 12px;
}
.lago-news-card__excerpt {
font-size: 0.875rem;
color: var(--lago-grey);
line-height: 1.7;
margin-bottom: 20px;
}
/* ============================================================
G. VALUES
============================================================ */
.lago-values-section {
padding: var(--lago-section-pad) 0;
background: var(--lago-ivory);
}
.lago-values-grid {
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: 48px;
margin-top: 64px;
}
.lago-value { text-align: center; }
.lago-value__icon {
width: 60px;
height: 60px;
border-radius: 50%;
border: 1px solid rgba(14,37,87,0.15);
display: flex;
align-items: center;
justify-content: center;
margin: 0 auto 24px;
}
.lago-value__title {
font-size: 0.9375rem;
font-weight: var(--lago-fw-bold);
color: var(--lago-obsidian);
margin-bottom: 12px;
}
.lago-value__text {
font-size: 0.875rem;
color: var(--lago-grey);
line-height: 1.75;
margin: 0;
}
/* ============================================================
H. CTA STRIP
============================================================ */
.lago-cta-strip {
padding: var(--lago-section-pad) var(--lago-gutter);
background: var(--lago-navy);
text-align: center;
}
.lago-cta-strip__eyebrow { color: var(--lago-steel); }
.lago-cta-strip__title {
font-size: var(--lago-lg);
font-weight: var(--lago-fw-bold);
color: var(--lago-white);
letter-spacing: 0.03em;
margin-bottom: 16px;
}
.lago-cta-strip__text {
color: rgba(255,255,255,0.68);
font-size: 0.9375rem;
line-height: 1.8;
max-width: 480px;
margin: 0 auto 48px;
}
/* ============================================================
I. CONTENT SLIDER (Bricks Nestable Slider / Splide.js)
============================================================
Layout: perPage:1 + padding:25% → centre slide = 50% vw,
adjacent slides = 25% vw each. True 2:1 size ratio via
DOM layout, not CSS scale (scale artefacts caused gaps).
Scale used only for a subtle secondary depth effect (0.94).
Clicking any slide navigates it to centre (Splide native).
============================================================ */
/* Section wrapper — must stay overflow:visible so adjacent
slides render in the 25% padding zones on each side */
.lago-csldr-wrap {
padding-top: var(--lago-section-pad);
padding-bottom: var(--lago-section-pad);
background: var(--lago-white);
overflow: visible !important;
}
/* Header — centred above the slider */
.lago-csldr__header {
text-align: center;
padding: 0 var(--lago-gutter);
margin-bottom: 48px;
}
.lago-csldr__heading {
font-size: var(--lago-lg);
font-weight: var(--lago-fw-bold);
color: var(--lago-obsidian);
letter-spacing: 0.02em;
margin: 12px 0 0;
}
/* ── Splide overrides ── */
/* Track overflow:visible exposes slides in the 25% padding zones */
.lago-csldr .splide__track {
overflow: visible !important;
}
/* Splide root — allow overflow so adjacent slides show */
.lago-csldr.splide,
.lago-csldr .splide {
overflow: visible;
}
/* Inactive slide: subtle scale + dim.
transform-origin: center center → visual centre of all slides
stays on the same horizontal axis as the active slide centre.
The dominant size difference comes from layout (25% vs 50% vw),
not from scale, so there are no empty-space gap artefacts. */
.lago-csldr .splide__slide {
transform-origin: center center;
transform: scale(0.96);
opacity: 0.6;
cursor: pointer;
will-change: transform, opacity;
transition: transform 0.45s cubic-bezier(0.25, 0.46, 0.45, 0.94),
opacity 0.45s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}
.lago-csldr .splide__slide.is-active {
transform: scale(1);
opacity: 1;
cursor: default;
}
/* ── Inner slide block (Bricks block element) ──
Fixed-height flex column — identical dimensions every slide.
Border frames the whole card (image + content as one unit). */
.lago-csldr__slide {
display: flex;
flex-direction: column;
height: clamp(340px, 42vw, 540px);
overflow: hidden;
border: 1px solid #e8e8e8;
background: #ffffff;
transition: box-shadow 0.45s ease;
}
/* Drop shadow lifts the active card — on inner block so it's
always full-size (not scaled down with inactive slides) */
.lago-csldr .splide__slide.is-active .lago-csldr__slide {
box-shadow: 0 24px 64px rgba(0, 0, 0, 0.16),
0 6px 20px rgba(0, 0, 0, 0.07);
border-color: transparent;
}
/* Image fills top portion.
Use position:relative + absolute children to override Bricks'
intrinsic sizing on .brxe-image and figure — otherwise those
wrappers constrain the image to its natural crop dimensions. */
.lago-csldr__media {
flex: 1 1 auto;
min-height: 0;
width: 100%;
position: relative;
overflow: hidden;
background: var(--lago-navy);
}
/* All Bricks wrappers inside media: stretch to fill the container */
.lago-csldr__media .brxe-image,
.lago-csldr__media figure {
position: absolute !important;
inset: 0 !important;
width: 100% !important;
height: 100% !important;
margin: 0 !important;
padding: 0 !important;
}
/* Image: cover-fill the media box, cropped top-anchored */
.lago-csldr__media img {
position: absolute !important;
inset: 0 !important;
width: 100% !important;
height: 100% !important;
object-fit: cover !important;
object-position: center top !important;
display: block !important;
transition: transform 0.6s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}
.lago-csldr .splide__slide.is-active .lago-csldr__media img {
transform: scale(1.04);
}
/* Body panel — white, anchored to bottom of slide.
grid-template-rows 0fr→1fr: smooth height animation for
the expand area, zero max-height jank. */
.lago-csldr__body {
flex: 0 0 auto;
background: #ffffff;
padding: 20px 24px 28px;
display: grid;
grid-template-rows: auto 0fr;
transition: grid-template-rows 0.45s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}
.lago-csldr .splide__slide.is-active .lago-csldr__body {
grid-template-rows: auto 1fr;
}
/* Title — always visible, row 1 */
.lago-csldr__name {
font-size: 0.6875rem;
font-weight: var(--lago-fw-bold);
letter-spacing: 0.18em;
text-transform: uppercase;
color: var(--lago-obsidian);
margin: 0;
line-height: 1.4;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
.lago-csldr .splide__slide.is-active .lago-csldr__name {
white-space: normal;
overflow: visible;
}
/* Expand — height controlled by grid row; opacity fades in
after the slide has finished its scale transition */
.lago-csldr__expand {
overflow: hidden;
opacity: 0;
transition: opacity 0.2s ease;
}
.lago-csldr .splide__slide.is-active .lago-csldr__expand {
opacity: 1;
transition: opacity 0.4s ease 0.28s;
}
.lago-csldr__desc {
font-size: 0.875rem;
color: var(--lago-grey);
line-height: 1.8;
margin: 16px 0 24px;
}
.lago-csldr__actions {
display: flex;
gap: 12px;
flex-wrap: wrap;
align-items: center;
}
/* Splide pagination dots */
.lago-csldr .splide__pagination {
margin-top: 32px;
position: static;
transform: none;
}
.lago-csldr .splide__pagination__page {
width: 6px;
height: 6px;
border-radius: 50%;
background: var(--lago-grey-light);
border: none;
opacity: 1;
transition: background 0.3s ease, transform 0.3s ease;
margin: 0 4px;
}
.lago-csldr .splide__pagination__page.is-active {
background: var(--lago-navy);
transform: scale(1.5);
}
/* Splide pagination dots */
.lago-csldr .splide__pagination {
margin-top: 28px;
position: static;
transform: none;
}
.lago-csldr .splide__pagination__page {
width: 6px;
height: 6px;
border-radius: 50%;
background: var(--lago-grey-light);
border: none;
opacity: 1;
transition: background 0.3s ease, transform 0.3s ease;
margin: 0 4px;
}
.lago-csldr .splide__pagination__page.is-active {
background: var(--lago-navy);
transform: scale(1.5);
}
/* ============================================================
J. FEATURED OFFERS
============================================================
Header: max-width contained (lago-container).
Grid: full section width — 4 equal columns, 3px gaps.
Cards: full-bleed image, bottom→transparent gradient,
white bold title + "View Offer" link at bottom.
Hover: image blurs + darkens, overlay deepens.
============================================================ */
.lago-fofers-wrap {
padding-top: var(--lago-section-pad);
padding-bottom: 0; /* grid bleeds to bottom edge */
background: var(--lago-white);
}
/* Header — reuses lago-container for max-width + gutter,
flex row: heading left, "All Offers" link right */
.lago-fofers__header {
display: flex;
justify-content: space-between;
align-items: baseline;
padding-bottom: 40px;
}
.lago-fofers__heading {
font-size: var(--lago-lg);
font-weight: var(--lago-fw-bold);
color: var(--lago-obsidian);
letter-spacing: 0.02em;
margin: 0;
}
/* Grid — full section width, 4 equal columns */
.lago-fofers__grid {
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: 3px;
width: 100%;
}
/* Card — the position:relative here is the key stacking context
for the three absolutely-placed children (media, overlay, content).
Bricks renders this as .brxe-div.lago-fofers__card — display:block,
so aspect-ratio drives the height. */
.lago-fofers__card {
position: relative;
overflow: hidden;
aspect-ratio: 3 / 4;
background: var(--lago-navy);
cursor: pointer;
display: block; /* ensure block, not inline */
}
/* Media — stretches to fill card using absolute + inset.
!important overrides Bricks' own .brxe-image inline sizing. */
.lago-fofers__media {
position: absolute !important;
inset: 0 !important;
width: 100% !important;
height: 100% !important;
}
.lago-fofers__media .brxe-image,
.lago-fofers__media figure {
position: absolute !important;
inset: 0 !important;
width: 100% !important;
height: 100% !important;
margin: 0 !important;
padding: 0 !important;
display: block !important;
}
.lago-fofers__media img {
position: absolute !important;
inset: 0 !important;
width: 100% !important;
height: 100% !important;
object-fit: cover !important;
object-position: center center !important;
display: block !important;
transition: filter 0.45s ease,
transform 0.5s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}
.lago-fofers__card:hover .lago-fofers__media img {
filter: blur(5px) brightness(0.45);
transform: scale(1.06);
}
/* Gradient — bottom 40% black fading to transparent */
.lago-fofers__overlay {
position: absolute !important;
inset: 0 !important;
background: linear-gradient(
to top,
rgba(0,0,0,0.85) 0%,
rgba(0,0,0,0.30) 25%,
transparent 45%
);
z-index: 1;
pointer-events: none;
transition: background 0.45s ease;
}
.lago-fofers__card:hover .lago-fofers__overlay {
background: linear-gradient(
to top,
rgba(0,0,0,0.95) 0%,
rgba(0,0,0,0.65) 35%,
rgba(0,0,0,0.20) 65%,
transparent 85%
);
}
/* Content — anchored to bottom, above overlay */
.lago-fofers__content {
position: absolute !important;
bottom: 0 !important;
left: 0 !important;
right: 0 !important;
padding: 0 28px 32px !important;
z-index: 2;
}
/* Title — 14px bold uppercase white */
.lago-fofers__title,
.lago-fofers__title * {
font-family: var(--lago-font) !important;
font-size: 0.875rem !important;
font-weight: 700 !important;
letter-spacing: 0.1em !important;
text-transform: uppercase !important;
color: var(--lago-white) !important;
margin: 0 0 16px !important;
line-height: 1.4 !important;
}
/* "View Offer" link — strip Bricks button chrome, white arrow link */
.lago-fofers__link.brxe-button {
display: block !important;
background: none !important;
border: none !important;
padding: 0 !important;
margin: 0 !important;
box-shadow: none !important;
}
.lago-fofers__link.brxe-button .bricks-button,
.lago-fofers__link.brxe-button a {
font-family: Arial, Helvetica, sans-serif !important;
font-size: 0.6875rem !important;
font-weight: 700 !important;
letter-spacing: 0.18em !important;
text-transform: uppercase !important;
color: var(--lago-white) !important;
background: transparent !important;
border: none !important;
padding: 0 !important;
text-decoration: none !important;
display: inline-flex !important;
align-items: center !important;
gap: 10px !important;
transition: gap 0.25s ease !important;
}
.lago-fofers__link.brxe-button .bricks-button::after,
.lago-fofers__link.brxe-button a::after { content: '→'; }
.lago-fofers__card:hover .lago-fofers__link.brxe-button .bricks-button,
.lago-fofers__card:hover .lago-fofers__link.brxe-button a {
gap: 16px !important;
}
/* ── Responsive ── */
@media (max-width: 960px) {
.lago-fofers__grid { grid-template-columns: repeat(2, 1fr); }
.lago-fofers__heading { font-size: clamp(1.4rem, 4vw, 2rem); }
}
@media (max-width: 767px) {
.lago-fofers__grid { grid-template-columns: 1fr; }
.lago-fofers__card { aspect-ratio: 16 / 9; }
}
/* ============================================================
K. ROOM WING GRID
============================================================ */
.srmw-section {
padding: var(--lago-section-pad) 0;
background: var(--lago-white);
}
/* Wing intro — constrained width, bottom margin before the grid */
.srmw-intro {
max-width: 760px;
margin-bottom: 56px;
}
.srmw-wing-name {
font-size: var(--lago-lg);
font-weight: var(--lago-fw-bold);
color: var(--lago-obsidian);
letter-spacing: 0.04em;
text-transform: uppercase;
line-height: 1.05;
margin: 8px 0 0;
}
.srmw-wing-desc {
font-size: 0.9375rem;
color: var(--lago-grey);
line-height: 1.85;
margin: 20px 0 0;
}
/* 2-column card grid */
.srmw-grid {
display: grid;
grid-template-columns: repeat(2, 1fr);
gap: 24px;
}
/* Room card */
.srmw-card {
border: 1px solid var(--lago-grey-light);
background: var(--lago-white);
overflow: hidden;
}
/* Image area — 4:3 aspect ratio, cover fill */
.srmw-card__media {
position: relative;
overflow: hidden;
aspect-ratio: 4 / 3;
background: var(--lago-navy);
}
.srmw-card__media .brxe-image,
.srmw-card__media figure {
position: absolute !important;
inset: 0 !important;
width: 100% !important;
height: 100% !important;
margin: 0 !important;
padding: 0 !important;
}
.srmw-card__media img {
position: absolute !important;
inset: 0 !important;
width: 100% !important;
height: 100% !important;
object-fit: cover !important;
object-position: center center !important;
display: block !important;
transition: transform 0.6s var(--lago-ease);
}
.srmw-card:hover .srmw-card__media img { transform: scale(1.04); }
/* Card body */
.srmw-card__body {
padding: 28px 28px 36px;
border-top: 1px solid var(--lago-grey-light);
}
/* Room name button — spacing below, before specs */
.brxe-button.srmw-card__name {
display: block !important;
margin-bottom: 24px;
}
/* Spec rows */
.srmw-specs {
display: flex;
flex-direction: column;
gap: 14px;
}
.srmw-spec {
font-size: 0.8125rem;
color: var(--lago-grey);
line-height: 1.5;
padding-left: 28px;
position: relative;
margin: 0;
}
/* Icon via CSS ::before — one class per spec type */
.srmw-spec::before {
content: '';
display: block;
position: absolute;
left: 0;
top: 1px;
width: 16px;
height: 16px;
background-repeat: no-repeat;
background-size: contain;
background-position: center;
}
.srmw-spec--bed::before {
background-image: url("data:image/svg+xml,%3Csvg width='16' height='16' viewBox='0 0 16 16' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Crect x='1' y='7.5' width='14' height='5' rx='0.5' stroke='%236C97D3' stroke-width='1.2'/%3E%3Cpath d='M1 7.5V4a1 1 0 0 1 1-1h12a1 1 0 0 1 1 1v3.5' stroke='%236C97D3' stroke-width='1.2'/%3E%3Cpath d='M4 6.5V5a1 1 0 0 1 1-1h2a1 1 0 0 1 1 1v1.5' stroke='%236C97D3' stroke-width='1.2'/%3E%3C/svg%3E");
}
.srmw-spec--size::before {
background-image: url("data:image/svg+xml,%3Csvg width='16' height='16' viewBox='0 0 16 16' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Crect x='1.5' y='1.5' width='13' height='13' rx='0.5' stroke='%236C97D3' stroke-width='1.2'/%3E%3Cpath d='M4.5 1.5v13M1.5 4.5h13' stroke='%236C97D3' stroke-width='1.2' stroke-dasharray='2 2'/%3E%3C/svg%3E");
}
.srmw-spec--occ::before {
background-image: url("data:image/svg+xml,%3Csvg width='16' height='16' viewBox='0 0 16 16' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Ccircle cx='6' cy='4.5' r='2.2' stroke='%236C97D3' stroke-width='1.2'/%3E%3Cpath d='M1.5 13c0-2.485 2.015-4.5 4.5-4.5s4.5 2.015 4.5 4.5' stroke='%236C97D3' stroke-width='1.2' stroke-linecap='round'/%3E%3Ccircle cx='11.5' cy='5.5' r='1.6' stroke='%236C97D3' stroke-width='1.2'/%3E%3Cpath d='M14 13c0-1.657-1.343-3-3-3' stroke='%236C97D3' stroke-width='1.2' stroke-linecap='round'/%3E%3C/svg%3E");
}
/* ── Responsive ── */
@media (max-width: 960px) {
.srmw-grid { gap: 16px; }
}
@media (max-width: 767px) {
.srmw-grid { grid-template-columns: 1fr; }
.srmw-card__media { aspect-ratio: 16 / 9; }
.srmw-card__body { padding: 20px 20px 28px; }
.srmw-intro { margin-bottom: 40px; }
}
/* ============================================================
L. PROPERTY HEADER (sticky page-level nav bar)
============================================================ */
.lago-prop-hdr {
position: fixed !important;
top: 0;
left: 0;
right: 0;
z-index: calc(var(--lago-z-header) - 1); /* 999 — sits below main header */
background: var(--lago-white) !important;
border-bottom: 1px solid var(--lago-grey-light);
width: 100%;
opacity: 0;
transition: opacity 0.4s ease;
}
.lago-prop-hdr.is-visible {
opacity: 1;
}
/* Inner flex row: brand | nav | actions */
.lago-prop-hdr__inner {
display: flex;
align-items: center;
justify-content: space-between;
max-width: var(--lago-max);
margin: 0 auto;
padding: 0 var(--lago-gutter);
height: 64px;
gap: 24px;
}
/* ── Brand ── */
.lago-prop-hdr__brand {
display: flex;
align-items: center;
gap: 12px;
flex-shrink: 0;
text-decoration: none;
}
/* Logo mark image — fixed height, auto width */
.lago-prop-hdr__logo,
.lago-prop-hdr__logo .brxe-image,
.lago-prop-hdr__logo figure { height: 32px !important; width: auto !important; display: block; }
.lago-prop-hdr__logo img { height: 32px !important; width: auto !important; display: block; }
/* Resort name text */
.lago-prop-hdr__name,
.lago-prop-hdr__name * {
font-size: 0.5rem !important;
font-weight: var(--lago-fw-bold) !important;
letter-spacing: 0.18em !important;
text-transform: uppercase !important;
color: var(--lago-obsidian) !important;
line-height: 1.35 !important;
max-width: 180px;
margin: 0 !important;
}
/* Vertical divider between brand and nav */
.lago-prop-hdr__brand::after {
content: '';
display: block;
width: 1px;
height: 28px;
background: var(--lago-grey-light);
margin-left: 20px;
}
/* ── Nav ── */
.lago-prop-hdr__nav {
display: flex;
align-items: stretch;
flex: 1;
justify-content: center;
overflow: hidden;
height: 100%;
}
/* Strip Bricks button chrome from each nav link */
.brxe-button.lago-prop-hdr__link {
display: inline-block !important;
background: none !important;
border: none !important;
padding: 0 !important;
box-shadow: none !important;
height: 100%;
}
.brxe-button.lago-prop-hdr__link a,
.brxe-button.lago-prop-hdr__link a.bricks-button {
all: unset;
display: inline-flex !important;
align-items: center;
height: 64px;
padding: 0 14px !important;
font-size: 0.5625rem !important;
font-weight: var(--lago-fw-bold) !important;
letter-spacing: 0.14em !important;
text-transform: uppercase !important;
color: var(--lago-obsidian) !important;
white-space: nowrap;
cursor: pointer;
border-bottom: 2px solid transparent;
transition: color 0.2s ease, border-color 0.2s ease;
}
.brxe-button.lago-prop-hdr__link a:hover,
.brxe-button.lago-prop-hdr__link a.bricks-button:hover {
color: var(--lago-navy) !important;
border-bottom-color: var(--lago-navy);
}
/* Add .is-active to the current page's nav button in Bricks */
.brxe-button.lago-prop-hdr__link.is-active a,
.brxe-button.lago-prop-hdr__link.is-active a.bricks-button {
color: var(--lago-navy) !important;
border-bottom-color: var(--lago-navy);
}
/* ── Actions ── */
.lago-prop-hdr__actions {
flex-shrink: 0;
}
/* Compact the CTA button padding for the header height */
.lago-prop-hdr__actions .brxe-button.lago-btn a,
.lago-prop-hdr__actions .brxe-button.lago-btn a.bricks-button {
padding: 12px 28px !important;
}
/* ── Responsive ── */
@media (max-width: 960px) {
.lago-prop-hdr__nav { display: none; } /* hide nav on tablet */
.lago-prop-hdr__inner { justify-content: space-between; }
}
@media (max-width: 767px) {
.lago-prop-hdr__name { display: none; } /* show logo mark only */
.lago-prop-hdr__brand::after { display: none; }
}
/* ============================================================
SCROLL REVEAL
============================================================ */
[data-lago-fadeout] { will-change: opacity; }
[data-lago-fadein] { will-change: opacity; opacity: 0; }
[data-lago-reveal] {
opacity: 0;
transform: translateY(28px);
transition: opacity 0.85s var(--lago-ease), transform 0.85s var(--lago-ease);
}
[data-lago-reveal].is-visible {
opacity: 1;
transform: translateY(0);
}
[data-lago-reveal][data-delay="100"] { transition-delay: 0.1s; }
[data-lago-reveal][data-delay="200"] { transition-delay: 0.2s; }
[data-lago-reveal][data-delay="300"] { transition-delay: 0.3s; }
[data-lago-reveal][data-delay="400"] { transition-delay: 0.4s; }
/* Sticky bar — fixed at top, invisible until 70% of hero scrolled.
Add CSS class lago-stickybar to any element in Bricks. */
[data-lago-stickybar],
.lago-stickybar {
position: fixed !important;
top: 0 !important;
left: 0;
right: 0;
z-index: calc(var(--lago-z-header) - 1); /* sits below main nav */
opacity: 0;
pointer-events: none;
transition: opacity 0.4s var(--lago-ease);
}
[data-lago-stickybar].is-visible,
.lago-stickybar.is-visible {
opacity: 1;
pointer-events: auto;
}
/* ============================================================
RESPONSIVE — 960px (tablet portrait / small laptop)
============================================================ */
@media (max-width: 960px) {
:root {
--lago-section-pad: 80px;
--lago-gutter: 32px;
}
/* Split section → stacked */
.lago-split { grid-template-columns: 1fr; min-height: auto; }
.lago-split__media { aspect-ratio: 16 / 9; overflow: hidden; }
.lago-split__img { width: 100%; height: 100%; object-fit: cover; }
.lago-split__placeholder { min-height: 0; aspect-ratio: 16 / 9; }
.lago-split__content { padding: 64px var(--lago-gutter); }
/* Grids → 2 column */
.lago-values-grid { grid-template-columns: repeat(2, 1fr); }
.lago-news-grid { grid-template-columns: repeat(2, 1fr); }
/* News header — allow wrapping on smaller viewports */
.lago-news-header { flex-wrap: wrap; gap: 16px; align-items: flex-start; }
/* Experience grid → single column, fluid heights */
.lago-exp-grid { grid-template-columns: 1fr; grid-template-rows: clamp(240px, 55vw, 480px) clamp(200px, 44vw, 400px) clamp(200px, 44vw, 400px); }
.lago-exp-card--large { grid-row: auto; }
/* Carousel card width */
.lago-carousel__card { flex: 0 0 340px; }
/* Banner */
.lago-banner__content { padding: 80px var(--lago-gutter); }
/* Content slider — shrink slide height on tablet */
.lago-csldr__slide { height: clamp(280px, 48vw, 440px); }
}
/* ============================================================
RESPONSIVE — 767px (mobile)
============================================================ */
@media (max-width: 767px) {
:root {
--lago-section-pad: 56px;
--lago-gutter: 20px;
}
/* Carousel */
.lago-carousel__card { flex: 0 0 280px; }
/* Split */
.lago-split__media { aspect-ratio: 4 / 3; }
.lago-split__content { padding: 48px var(--lago-gutter); }
/* Banner */
.lago-banner__content { padding: 64px var(--lago-gutter); }
/* Values */
.lago-values-grid { grid-template-columns: 1fr; gap: 40px; }
/* News */
.lago-news-grid { grid-template-columns: 1fr; }
/* Experience grid — taller cards, tighter insets, always-visible arrow */
.lago-exp-grid { grid-template-rows: clamp(260px, 70vw, 420px) clamp(220px, 60vw, 360px) clamp(220px, 60vw, 360px); }
.lago-exp-card__content { bottom: 28px; left: 24px; right: 24px; }
.lago-exp-card__arrow { opacity: 1; transform: translateX(0); }
/* Hero icon nav bar — hide on mobile (kept on tablet+) */
.lago-nav-wrap { display: none !important; }
/* Key Venues Section (Dusk · Dawn · Pontoon · Beach House)
Override Bricks-set 100vh heights so image + content both render,
and force 1:1 image ratio on mobile per design spec. */
.brxe-jsmvkq,
.brxe-jsmvkq > section,
.brxe-jsmvkq .lago-split,
.brxe-jsmvkq .lago-split__media { height: auto !important; min-height: 0 !important; }
.brxe-jsmvkq .lago-split__media { aspect-ratio: 1 / 1 !important; }
/* Force content-first stacking on mobile (overrides .lago-split--alt) */
.brxe-jsmvkq .lago-split__content { order: 1; }
.brxe-jsmvkq .lago-split__media { order: 2; }
/* Content slider — smaller height on mobile */
.lago-csldr__slide { height: clamp(220px, 68vw, 340px); }
.lago-csldr__heading { font-size: clamp(1.4rem, 5vw, 2rem); }
/* Hero — title scale + clear stacked booking bar */
.lago-hero__title { font-size: clamp(3rem, 13vw, 5rem) !important; }
.lago-hero__content {
padding: 0 var(--lago-gutter) calc(var(--lago-booking-bar-mobile-h) + 24px) !important;
bottom: 0 !important;
}
/* Booking bar → stacked column */
.lago-booking-bar { flex-direction: column; height: auto; }
.lago-booking-bar__field { border-right: none; border-bottom: 1px solid rgba(255,255,255,0.1); padding: 16px var(--lago-gutter); }
.lago-booking-bar__btn { padding: 20px; height: 60px; width: 100%; }
}
/* ==========================================================================
About teaser — home page Section B
========================================================================== */
.lago-about-teaser__inner {
max-width: 740px;
margin: 0 auto;
padding: 100px var(--lago-gutter);
text-align: center;
}
.lago-about-teaser__body {
font-size: clamp(1.05rem, 1.6vw, 1.25rem);
line-height: 1.75;
color: var(--lago-obsidian);
margin: 0 0 36px;
font-weight: 400;
}
.lago-about-teaser__link {
display: inline-block;
font-size: 12px;
font-weight: 700;
letter-spacing: 0.1em;
text-transform: uppercase;
color: var(--lago-obsidian);
text-decoration: none;
border-bottom: 1px solid var(--lago-obsidian);
padding-bottom: 2px;
transition: opacity 0.2s ease;
}
.lago-about-teaser__link:hover {
opacity: 0.5;
}
@media (max-width: 767px) {
.lago-about-teaser__inner {
padding: 72px var(--lago-gutter);
}
}
/* ==========================================================================
Hero slider (lago-hero-slider — Bricks Nestable Slider, nav-controlled)
========================================================================== */
.lago-hero-slider .splide__pagination { visibility: hidden !important; pointer-events: none !important; }
.lago-hero-slider .splide__arrows { display: none !important; }
/* Nav items — bottom-align icon + label */
.lago-icon-nav__item {
justify-content: flex-end !important;
}
/* Dark gradient behind the nav bar */
.lago-nav-gradient {
position: absolute;
bottom: 0; left: 0; right: 0;
height: 320px;
background: linear-gradient(
to top,
rgba(0,0,0,0.88) 0%,
rgba(0,0,0,0.55) 35%,
rgba(0,0,0,0.15) 70%,
transparent 100%
);
pointer-events: none;
z-index: 3;
}
/* Slide content — aligns with the 48px left edge of the nav bar line */
.lago-slide-content {
position: absolute;
left: 48px;
top: 15vh;
max-width: 560px;
}
/* Aspect-ratio utility — apply to any element wrapper to lock its shape.
Add via Bricks Style → CSS Classes field on the Feature Card (or any element).
The !important + height auto overrides Bricks' default min-height / fixed-height settings. */
.lago-16-9 {
aspect-ratio: 16 / 9 !important;
height: auto !important;
min-height: 0 !important;
max-height: none !important;
overflow: hidden !important;
position: relative;
width: 100%;
}
.lago-16-9 img,
.lago-16-9 .brxe-image,
.lago-16-9 .brxe-image img {
width: 100% !important;
height: 100% !important;
object-fit: cover !important;
}
/* Lago Feature Grid — force 3 columns. Apply class .lago-grid-3 on the grid parent. */
.lago-grid-3 {
display: grid !important;
grid-template-columns: repeat(3, 1fr) !important;
gap: var(--brxw-content-gap, 16px);
}
@media (max-width: 960px) {
.lago-grid-3 { grid-template-columns: repeat(2, 1fr) !important; }
}
@media (max-width: 600px) {
.lago-grid-3 { grid-template-columns: 1fr !important; }
}
/* Headings and text within slide content */
.lago-slide-content h1,
.lago-slide-content h2,
.lago-slide-content h3,
.lago-slide-content h4 { color: #ffffff !important; }
.lago-slide-content p { color: #ffffff !important; }
/* Button within slide content */
.lago-slide-content .brxe-button a,
.lago-slide-content a.bricks-button {
background: #000000 !important;
border: 1px solid #F7F0E7 !important;
color: #F7F0E7 !important;
}
.lago-slide-content .brxe-button a:hover,
.lago-slide-content a.bricks-button:hover {
background: #F7F0E7 !important;
color: #000000 !important;
}
/* ==========================================================================
Global footer
========================================================================== */
.lago-footer {
background: var(--lago-obsidian);
color: var(--lago-ivory);
width: 100%;
}
.lago-footer__inner {
max-width: var(--lago-max);
margin: 0 auto;
padding: 80px var(--lago-gutter) 40px;
}
/* Top row */
.lago-footer__top {
display: flex;
align-items: flex-start;
justify-content: space-between;
margin-bottom: 64px;
}
.lago-footer__logo {
display: block;
margin-bottom: 20px;
text-decoration: none;
}
.lago-footer__logo-img {
width: 140px;
height: auto;
display: block;
}
.lago-footer__logo-text {
font-size: 22px;
font-weight: 700;
letter-spacing: 0.06em;
text-transform: uppercase;
color: var(--lago-ivory);
}
.lago-footer__tagline {
font-size: 12px;
letter-spacing: 0.08em;
text-transform: uppercase;
color: rgba(247, 240, 231, 0.45);
margin: 0;
}
.lago-footer__instagram {
display: inline-flex;
align-items: center;
gap: 8px;
color: rgba(247, 240, 231, 0.6);
text-decoration: none;
font-size: 12px;
font-weight: 700;
letter-spacing: 0.08em;
text-transform: uppercase;
transition: color 0.2s ease;
}
.lago-footer__instagram:hover {
color: var(--lago-ivory);
}
.lago-footer__instagram-icon {
width: 20px;
height: 20px;
flex-shrink: 0;
}
/* Nav columns */
.lago-footer__nav {
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: 48px;
margin-bottom: 64px;
}
.lago-footer__col-heading {
font-size: 11px;
font-weight: 700;
letter-spacing: 0.12em;
text-transform: uppercase;
color: rgba(247, 240, 231, 0.4);
margin: 0 0 20px;
}
.lago-footer__menu {
list-style: none;
margin: 0;
padding: 0;
}
.lago-footer__menu li {
margin-bottom: 12px;
}
.lago-footer__menu a {
color: rgba(247, 240, 231, 0.75);
text-decoration: none;
font-size: 14px;
font-weight: 400;
transition: color 0.2s ease;
}
.lago-footer__menu a:hover {
color: var(--lago-ivory);
}
/* Divider */
.lago-footer__divider {
border: none;
border-top: 1px solid rgba(247, 240, 231, 0.1);
margin: 0 0 32px;
}
/* Bottom row */
.lago-footer__bottom {
display: flex;
align-items: center;
justify-content: space-between;
padding-bottom: 40px;
flex-wrap: wrap;
gap: 16px;
}
.lago-footer__contact {
display: flex;
align-items: center;
gap: 12px;
flex-wrap: wrap;
}
.lago-footer__contact-link {
color: rgba(247, 240, 231, 0.6);
text-decoration: none;
font-size: 13px;
transition: color 0.2s ease;
}
.lago-footer__contact-link:hover {
color: var(--lago-ivory);
}
.lago-footer__contact-sep {
color: rgba(247, 240, 231, 0.25);
font-size: 13px;
}
.lago-footer__legal {
display: flex;
align-items: center;
gap: 20px;
font-size: 12px;
color: rgba(247, 240, 231, 0.35);
}
.lago-footer__legal a {
color: rgba(247, 240, 231, 0.35);
text-decoration: none;
transition: color 0.2s ease;
}
.lago-footer__legal a:hover {
color: rgba(247, 240, 231, 0.7);
}
/* Tablet */
@media (max-width: 960px) {
.lago-footer__nav {
grid-template-columns: repeat(2, 1fr);
gap: 40px;
}
}
/* Mobile */
@media (max-width: 767px) {
.lago-footer__inner {
padding: 60px var(--lago-gutter) 32px;
}
.lago-footer__top {
flex-direction: column;
gap: 32px;
margin-bottom: 48px;
}
.lago-footer__nav {
grid-template-columns: 1fr 1fr;
gap: 32px;
margin-bottom: 48px;
}
.lago-footer__bottom {
flex-direction: column;
align-items: flex-start;
gap: 20px;
}
}
/* ==========================================================================
Putu — floating WhatsApp button
========================================================================== */
.lago-putu {
position: fixed;
bottom: 28px;
right: 28px;
z-index: 9000;
display: inline-flex;
align-items: center;
gap: 10px;
padding: 13px 22px 13px 16px;
background: var(--lago-obsidian);
color: var(--lago-ivory);
border-radius: 100px;
text-decoration: none;
font-family: var(--lago-font);
font-size: 12px;
font-weight: 700;
letter-spacing: 0.08em;
text-transform: uppercase;
box-shadow: 0 4px 24px rgba(0, 0, 0, 0.28);
/* Hidden until scrolled past hero */
opacity: 0;
transform: translateX(80px);
pointer-events: none;
transition: opacity 0.4s ease, transform 0.4s cubic-bezier(0.34, 1.56, 0.64, 1), box-shadow 0.2s ease, background 0.2s ease;
}
.lago-putu--visible {
opacity: 1;
transform: translateX(0);
pointer-events: auto;
}
.lago-putu:hover {
background: #111;
transform: translateY(-3px);
box-shadow: 0 8px 32px rgba(0, 0, 0, 0.38);
color: var(--lago-ivory);
text-decoration: none;
}
.lago-putu__icon {
display: flex;
align-items: center;
justify-content: center;
width: 22px;
height: 22px;
flex-shrink: 0;
color: #25D366; /* WhatsApp green — keeps it recognisable */
}
.lago-putu__icon svg {
width: 100%;
height: 100%;
}
/* Mobile: icon-only circle */
@media (max-width: 767px) {
.lago-putu {
padding: 15px;
border-radius: 50%;
width: 54px;
height: 54px;
bottom: 20px;
right: 20px;
justify-content: center;
}
.lago-putu__label {
display: none;
}
.lago-putu__icon {
width: 24px;
height: 24px;
}
}
/* ============================================================
NEW LAGO HEADER (.lago-hdr)
Dark bar · logo left · nav right · hamburger dropdown (all devices)
============================================================ */
.lago-hdr {
position: relative;
width: 100%;
background: var(--lago-obsidian);
z-index: var(--lago-z-header);
}
/* Inner row — logo left, nav right */
.lago-hdr__inner {
display: flex;
align-items: center;
justify-content: space-between;
width: 100%;
}
/* Logo */
.lago-hdr__logo {
display: flex;
align-items: center;
flex-shrink: 0;
}
.lago-hdr__logo-img,
.lago-hdr__logo img {
height: 40px !important;
width: auto !important;
display: block;
max-width: none;
}
/* Nav — right side */
.lago-hdr__nav {
display: flex;
align-items: center;
gap: 32px;
flex-shrink: 0;
}
/* ── Nav links (Lago Story, Contact Us) — white text ── */
.lago-hdr__link,
.lago-hdr__link a,
.lago-hdr__link a.bricks-button,
.brxe-button.lago-hdr__link,
.brxe-button.lago-hdr__link a,
.brxe-button.lago-hdr__link a.bricks-button {
display: inline-flex !important;
align-items: center;
background: none !important;
border: none !important;
box-shadow: none !important;
padding: 0 !important;
font-family: var(--lago-font-body) !important;
font-size: 0.6875rem !important;
font-weight: var(--lago-fw-bold) !important;
letter-spacing: 0.14em !important;
text-transform: uppercase !important;
color: var(--lago-white) !important;
cursor: pointer;
white-space: nowrap;
text-decoration: none !important;
transition: opacity 0.2s ease;
}
.lago-hdr__link:hover,
.lago-hdr__link a:hover,
.lago-hdr__link a.bricks-button:hover,
.brxe-button.lago-hdr__link a:hover,
.brxe-button.lago-hdr__link a.bricks-button:hover { opacity: 0.65; }
/* ── Book Now — steel blue accent text link ── */
.lago-hdr__book,
.lago-hdr__book a,
.lago-hdr__book a.bricks-button,
.brxe-button.lago-hdr__book,
.brxe-button.lago-hdr__book a,
.brxe-button.lago-hdr__book a.bricks-button {
display: inline-flex !important;
align-items: center;
background: none !important;
border: none !important;
box-shadow: none !important;
padding: 0 !important;
font-family: var(--lago-font-body) !important;
font-size: 0.6875rem !important;
font-weight: var(--lago-fw-bold) !important;
letter-spacing: 0.14em !important;
text-transform: uppercase !important;
color: var(--lago-steel) !important;
cursor: pointer;
white-space: nowrap;
text-decoration: none !important;
transition: opacity 0.2s ease;
}
.lago-hdr__book:hover,
.lago-hdr__book a:hover,
.lago-hdr__book a.bricks-button:hover,
.brxe-button.lago-hdr__book a:hover,
.brxe-button.lago-hdr__book a.bricks-button:hover { opacity: 0.7; }
/* ── Hamburger — three-span button ── */
.lago-hdr__burger-btn {
background: none;
border: none;
cursor: pointer;
padding: 0;
width: 24px;
height: 18px;
display: flex;
flex-direction: column;
justify-content: space-between;
align-items: stretch;
flex-shrink: 0;
transition: opacity 0.2s ease;
}
.lago-hdr__burger-btn:hover { opacity: 0.65; }
.lago-hdr__burger-btn span {
display: block;
width: 24px;
height: 2px;
background: var(--lago-obsidian);
transition: transform 0.25s ease, opacity 0.2s ease;
}
/* Animate to ✕ when open */
.lago-hdr.is-open .lago-hdr__burger-btn span:nth-child(1) { transform: translateY(8px) rotate(45deg); }
.lago-hdr.is-open .lago-hdr__burger-btn span:nth-child(2) { opacity: 0; transform: scaleX(0); }
.lago-hdr.is-open .lago-hdr__burger-btn span:nth-child(3) { transform: translateY(-8px) rotate(-45deg); }
/* ── Dropdown panel ── */
.lago-hdr__dd {
position: absolute;
top: 100%;
left: -10px; /* cancel section's 10px padding to go full-width */
right: -10px;
background: var(--lago-navy);
overflow: hidden;
max-height: 0;
opacity: 0;
pointer-events: none;
transition: max-height 0.45s cubic-bezier(0.25, 0.46, 0.45, 0.94),
opacity 0.25s ease;
}
.lago-hdr.is-open .lago-hdr__dd {
max-height: 800px;
opacity: 1;
pointer-events: auto;
}
/* Dropdown nav container — true full-width two-column grid */
.lago-hdr__dd-nav {
display: grid;
grid-template-columns: 1fr 1fr;
padding: 0;
}
/* Left column: right border divider, inner padding */
.lago-hdr__dd-col {
padding: 0 var(--lago-gutter);
}
.lago-hdr__dd-col:first-child {
border-right: 1px solid rgba(247, 240, 231, 0.15);
}
/* Nav menu list */
.lago-hdr__dd-menu {
list-style: none;
margin: 0;
padding: 0;
}
/* Row dividers */
.lago-hdr__dd-menu li {
border-top: 1px solid rgba(247, 240, 231, 0.12);
}
.lago-hdr__dd-menu li:last-child {
border-bottom: 1px solid rgba(247, 240, 231, 0.12);
}
/* Large mixed-case nav items */
.lago-hdr__dd-menu li a {
font-family: var(--lago-font);
font-size: clamp(28px, 3.2vw, 48px);
font-weight: var(--lago-fw-bold);
letter-spacing: 0;
text-transform: none;
color: var(--lago-ivory);
text-decoration: none;
display: flex;
align-items: center;
padding: 20px 0;
line-height: 1.1;
transition: opacity 0.2s ease;
}
.lago-hdr__dd-menu li a:hover { opacity: 0.45; }
/* Header topbar container — kill the broken width:100% + margin:5% combo
that was set in Bricks for mobile portrait. That combo produces a
110%-wide box and forces horizontal overflow visible as a dark strip
on the left edge of every page using this header template. */
@media (max-width: 478px) {
#brxe-e49bd7 {
margin-left: 0 !important;
margin-right: 0 !important;
}
}
/* Nav (Nestable) mobile menu — block click-through when closed.
Bricks' base rule sets visibility:hidden, but a site-level override
is keeping the fullscreen wrapper hit-testable, which intercepts
clicks meant for the hamburger button (z-index 1001, position fixed).
Scoped to mobile widths only — at desktop the nav is a visible
horizontal bar (no .brx-open) and must remain clickable. */
@media (max-width: 991px) {
.brxe-nav-nested:not(.brx-open) .brx-nav-nested-items {
pointer-events: none !important;
}
.brxe-nav-nested.brx-open .brx-nav-nested-items {
pointer-events: auto;
}
}
/* ============================================================
Hamburger ↔ X — Bricks Nav (Nestable) Toggle, sitewide
Works on every header template. The Toggle's font-icon is hidden
and replaced by three CSS bars (top = ::before, middle = ,
bottom = ::after). On .brx-open, the middle fades and the outer
bars rotate into an X. The Toggle is also lifted above the menu
overlay (z:1001) so it stays clickable to close.
============================================================ */
.brxe-nav-nested .brxe-toggle {
position: relative !important;
width: 28px;
height: 20px;
padding: 0 !important;
margin: 0;
background: none !important;
border: 0 !important;
color: currentColor;
cursor: pointer;
display: inline-block;
flex-shrink: 0;
}
/* The becomes the middle bar */
.brxe-nav-nested .brxe-toggle i {
position: absolute !important;
top: 50%;
left: 0;
right: 0;
height: 2px;
margin-top: -1px;
background: currentColor;
font-size: 0 !important;
line-height: 0 !important;
transition: opacity 0.2s ease;
}
/* Kill the original font-icon glyph so we render purely with CSS */
.brxe-nav-nested .brxe-toggle i::before {
display: none !important;
}
/* Top & bottom bars */
.brxe-nav-nested .brxe-toggle::before,
.brxe-nav-nested .brxe-toggle::after {
content: '';
position: absolute;
left: 0;
right: 0;
height: 2px;
background: currentColor;
transition: transform 0.25s ease, top 0.25s ease, bottom 0.25s ease;
}
.brxe-nav-nested .brxe-toggle::before { top: 0; }
.brxe-nav-nested .brxe-toggle::after { bottom: 0; }
/* OPEN — morph into X, lift above overlay.
Position the X to roughly match where the hamburger sits in the
closed header (around y=32, same right edge as the menu items).
That way the tap target doesn't move when the menu opens/closes. */
.brxe-nav-nested.brx-open .brxe-toggle {
position: fixed;
top: 32px;
right: 24px;
z-index: 1002;
color: var(--lago-obsidian);
}
/* Push menu items down so the first row sits below the X with breathing room */
.brxe-nav-nested.brx-open .brx-nav-nested-items {
padding-top: 100px !important;
padding-right: 24px !important;
padding-bottom: 40px !important;
}
.brxe-nav-nested.brx-open .brxe-toggle i { opacity: 0; }
.brxe-nav-nested.brx-open .brxe-toggle::before {
top: 50%;
margin-top: -1px;
transform: rotate(45deg);
}
.brxe-nav-nested.brx-open .brxe-toggle::after {
bottom: auto;
top: 50%;
margin-top: -1px;
transform: rotate(-45deg);
}
/* Mobile — single column stack */
@media (max-width: 767px) {
.lago-hdr__nav { gap: 20px; }
.lago-hdr__dd-nav { grid-template-columns: 1fr; }
.lago-hdr__dd-col:first-child {
border-right: none;
border-bottom: 1px solid rgba(247, 240, 231, 0.15);
}
/* Inline header nav links hidden — burger drives the menu on mobile */
.lago-hdr__link,
.brxe-button.lago-hdr__link { display: none !important; }
}
/* Tablet+ — burger hidden; inline nav links drive the header */
@media (min-width: 768px) {
.lago-hdr__burger-btn { display: none; }
}
/* ============================================================
BRICKS NAV ELEMENT — full-width dropdown brand override
Converts the native left-panel to a full-width top dropdown.
position:fixed keeps it viewport-anchored regardless of DOM
ancestors. Adjust --lago-hdr-height in :root if needed.
============================================================ */
/* ── Panel: override from side-drawer to full-width dropdown ── */
.brxe-nav-menu .bricks-mobile-menu-wrapper {
position: fixed !important;
top: var(--lago-hdr-height) !important;
left: 0 !important;
right: 0 !important;
bottom: auto !important;
width: 100% !important;
height: auto !important;
max-height: 0 !important;
overflow: hidden !important;
transform: none !important;
opacity: 0 !important;
pointer-events: none !important;
background: rgba(14, 37, 87, 0.75) !important;
box-shadow: 0 8px 48px rgba(0, 0, 0, 0.45) !important;
transition: max-height 0.45s cubic-bezier(0.25, 0.46, 0.45, 0.94),
opacity 0.25s ease !important;
z-index: calc(var(--lago-z-header) - 1) !important;
}
/* Bricks renders panel background via ::before — disable it */
.brxe-nav-menu .bricks-mobile-menu-wrapper::before {
display: none !important;
}
/* Bricks overlay backdrop — not needed for top dropdown */
.brxe-nav-menu .bricks-mobile-menu-overlay {
display: none !important;
}
/* Close button inside panel — hide in favour of burger toggle */
.brxe-nav-menu .bricks-mobile-menu-close {
display: none !important;
}
/* ── Open state ──
Bricks adds .open to the wrapper on toggle click.
:has() catches it via aria-expanded as a fallback. */
.brxe-nav-menu .bricks-mobile-menu-wrapper.open,
.brxe-nav-menu:has(.bricks-mobile-menu-toggle[aria-expanded="true"]) .bricks-mobile-menu-wrapper {
max-height: 900px !important;
opacity: 1 !important;
pointer-events: auto !important;
transform: none !important;
}
/* ── Menu list — two-column grid ── */
.brxe-nav-menu .bricks-mobile-menu {
display: grid !important;
grid-template-columns: 1fr 1fr !important;
list-style: none !important;
margin: 0 !important;
padding: 32px var(--lago-gutter) 48px !important;
gap: 0 !important;
}
/* Row dividers — top border on every item; remove from row 1 */
.brxe-nav-menu .bricks-mobile-menu > li {
border-top: 1px solid rgba(247, 240, 231, 0.12) !important;
margin: 0 !important;
padding: 0 !important;
}
.brxe-nav-menu .bricks-mobile-menu > li:nth-child(-n+2) {
border-top: none !important;
}
/* Column divider — right border on left-column items (odd) */
.brxe-nav-menu .bricks-mobile-menu > li:nth-child(odd) {
border-right: 1px solid rgba(247, 240, 231, 0.15) !important;
padding-right: calc(var(--lago-gutter) * 0.75) !important;
}
.brxe-nav-menu .bricks-mobile-menu > li:nth-child(even) {
padding-left: calc(var(--lago-gutter) * 0.75) !important;
}
/* Bottom border on last row */
.brxe-nav-menu .bricks-mobile-menu > li:last-child,
.brxe-nav-menu .bricks-mobile-menu > li:nth-last-child(2):nth-child(odd) {
border-bottom: 1px solid rgba(247, 240, 231, 0.12) !important;
}
/* ── Top-level links — large mixed-case Didot typography ── */
.brxe-nav-menu .bricks-mobile-menu > li > a {
font-family: var(--lago-font) !important;
font-size: 32px !important;
font-weight: var(--lago-fw-bold) !important;
letter-spacing: 0 !important;
text-transform: none !important;
color: var(--lago-ivory) !important;
text-decoration: none !important;
display: flex !important;
align-items: center !important;
padding: 20px 0 !important;
line-height: 1.1 !important;
background: none !important;
border: none !important;
transition: opacity 0.2s ease !important;
}
.brxe-nav-menu .bricks-mobile-menu > li > a:hover {
opacity: 0.45 !important;
color: var(--lago-ivory) !important;
}
/* Sub-menus — hide in this large-text layout */
.brxe-nav-menu .bricks-mobile-menu .sub-menu {
display: none !important;
}
.brxe-nav-menu .bricks-mobile-menu > li > .brx-submenu-toggle {
display: none !important;
}
/* ── Hamburger toggle — colour ── */
.brxe-nav-menu .bricks-mobile-menu-toggle span {
background-color: var(--lago-obsidian) !important;
transition: transform 0.25s ease, opacity 0.2s ease !important;
}
/* Animate bars → ✕ when open */
.brxe-nav-menu .bricks-mobile-menu-toggle[aria-expanded="true"] span:nth-child(1) {
transform: translateY(8px) rotate(45deg) !important;
}
.brxe-nav-menu .bricks-mobile-menu-toggle[aria-expanded="true"] span:nth-child(2) {
opacity: 0 !important;
transform: scaleX(0) !important;
}
.brxe-nav-menu .bricks-mobile-menu-toggle[aria-expanded="true"] span:nth-child(3) {
transform: translateY(-8px) rotate(-45deg) !important;
}
/* ── Mobile: single column ── */
@media (max-width: 767px) {
.brxe-nav-menu .bricks-mobile-menu {
grid-template-columns: 1fr !important;
}
.brxe-nav-menu .bricks-mobile-menu > li:nth-child(odd) {
border-right: none !important;
padding-right: 0 !important;
}
.brxe-nav-menu .bricks-mobile-menu > li:nth-child(even) {
padding-left: 0 !important;
}
.brxe-nav-menu .bricks-mobile-menu > li:nth-child(-n+1) {
border-top: none !important;
}
}
/* ═══════════════════════════════════════════════════════════════════════════
DINE DESCRIPTION — photo mosaic + body text
Template: section-dine-description
═══════════════════════════════════════════════════════════════════════════ */
.lago-dine {
background: var(--lago-ivory);
}
.lago-dine__inner {
max-width: var(--lago-max);
margin: 0 auto;
padding: var(--lago-section-pad) var(--lago-gutter);
}
.lago-dine__heading {
font-family: var(--lago-font);
font-size: clamp(40px, 5vw, 64px);
font-weight: var(--lago-fw-bold);
letter-spacing: -0.02em;
line-height: 1;
color: var(--lago-obsidian);
margin: 0 0 28px;
}
/* ── Photo mosaic ── */
.lago-dine__grid {
display: grid;
grid-template-columns: 3fr 2fr;
grid-template-rows: 1fr;
gap: 4px;
margin: 0 auto 40px;
height: 75vh;
max-width: var(--lago-max);
padding-inline: var(--lago-gutter);
}
.lago-dine__main {
overflow: hidden;
min-height: 0;
}
.lago-dine__main > .brxe-image,
.lago-dine__main > a.brxe-image,
.lago-dine__main > figure.brxe-image {
display: block;
width: 100%;
height: 100%;
}
.lago-dine__main img {
width: 100%;
height: 100%;
object-fit: cover;
display: block;
}
.lago-dine__tiles {
display: grid;
grid-template-columns: 1fr 1fr;
grid-template-rows: 1fr 1fr;
gap: 4px;
}
.lago-dine__tile {
overflow: hidden;
position: relative;
}
.lago-dine__tile > .brxe-image,
.lago-dine__tile > a.brxe-image {
display: block;
width: 100%;
height: 100%;
}
.lago-dine__tile img {
width: 100%;
height: 100%;
object-fit: cover;
display: block;
min-height: 0;
}
/* CTA tile — dark image overlay with centred label */
.lago-dine__tile--cta {
display: flex;
align-items: center;
justify-content: center;
background: #000;
}
.lago-dine__tile-bg {
position: absolute !important;
inset: 0;
}
.lago-dine__tile-bg img {
opacity: 0.5;
}
.lago-dine__cta-btn {
position: relative;
z-index: 2;
color: var(--lago-ivory) !important;
font-family: var(--lago-font);
font-size: 13px;
font-weight: var(--lago-fw-bold);
letter-spacing: 0.1em;
text-transform: uppercase;
white-space: nowrap;
background: none !important;
border: none !important;
padding: 0 !important;
box-shadow: none !important;
}
/* ── Body text ── */
.lago-dine__body {
max-width: 680px;
}
.lago-dine__p {
font-size: 14px;
line-height: 1.75;
color: var(--lago-obsidian);
margin-bottom: 16px;
}
/* ── Responsive ── */
@media (max-width: 1024px) {
.lago-dine__grid {
grid-template-columns: 1fr 1fr;
}
}
@media (max-width: 767px) {
.lago-dine__grid {
grid-template-columns: 1fr;
grid-template-rows: auto auto;
height: auto;
}
.lago-dine__tiles {
grid-template-columns: 1fr 1fr;
grid-template-rows: 1fr 1fr;
}
}
/* ============================================================
SLIDER FOOD — template 1264 (long-hover image overlay)
============================================================ */
/* Slide block must be the stacking context for the overlay */
.sldr-food__slide {
position: relative;
overflow: hidden;
}
/* Overlay: full-cover, flex-centred, hidden by default */
.sldr-food__overlay {
position: absolute;
inset: 0;
background: rgba(0, 0, 0, 0.6);
opacity: 0;
transition: opacity 0.35s ease;
pointer-events: none;
display: flex;
align-items: center;
justify-content: center;
z-index: 2;
}
/* JS adds this class after 1 s of continuous hover */
.sldr-food__slide.is-long-hover .sldr-food__overlay {
opacity: 1;
pointer-events: auto;
}
/* Centred overlay label — edit text directly in Bricks */
.sldr-food__overlay-label,
.sldr-food__overlay-label * {
color: #ffffff !important;
text-align: center;
font-size: 0.875rem;
font-weight: 700;
letter-spacing: 0.15em;
text-transform: uppercase;
line-height: 1.4;
}