/* =========================================================================
STYLE ICON — LUXURY HEADER & HERO LAYER
A visual layer only. It changes no markup, no navigation, no routes: every
rule here restyles elements that already exist, which is why the nav items,
their order, their links and the mega menus are untouched by definition.
Loaded AFTER style.css so it wins on equal specificity. Self-contained and
reversible — pull the and the site returns to its previous look.
PALETTE: the approved tokens (#071B24 ink, #102F3F accent, #D4AF37 gold) are
unchanged. What is new is a richer four-stop gold *gradient* used for accents
and edges, which is what reads as expensive: a flat gold fill looks printed,
a gradient looks like metal catching light.
========================================================================= */
:root {
/* Four-stop gold. The mid-tones matter more than the ends — they are what
make it read as a struck surface rather than a yellow rectangle. */
--lux-gold: linear-gradient(135deg, #F4D77A 0%, #D4AF37 35%, #B8962E 70%, #8C6A16 100%);
--lux-gold-soft: linear-gradient(135deg, rgb(244 215 122 / 0.22) 0%, rgb(212 175 55 / 0.12) 55%, rgb(140 106 22 / 0.05) 100%);
--lux-hairline: rgb(212 175 55 / 0.25);
--lux-ease: cubic-bezier(0.22, 1, 0.36, 1);
}
/* =========================================================================
1. HEADER — floating glass
========================================================================= */
/* ---- Solid bar, above the film rather than over it ----
The header is no longer a transparent overlay. It is an opaque bar that
occupies its own space at the top of the page, so the hero video begins
directly beneath it and is never covered.
position: sticky (not fixed) is what does this: a fixed header is lifted out
of the document and the hero slides underneath, which is exactly the overlay
we are removing. Sticky keeps the header in normal flow — so it pushes the
hero down — while still pinning to the top on scroll. The hero markup and
the video are untouched. */
.site-header {
position: sticky;
top: 0;
background: linear-gradient(180deg, #0B2430 0%, #071B24 100%);
border-bottom: 1px solid var(--lux-hairline);
box-shadow: 0 12px 34px -20px rgb(0 0 0 / 0.9);
}
/* The scrim existed only to keep nav text legible over photography. With an
opaque bar there is nothing to compensate for. */
.site-header::before { display: none; }
/* ---- The floating bar itself ---- */
.navbar {
position: relative;
isolation: isolate;
transition: background 0.55s var(--lux-ease), border-color 0.55s var(--lux-ease),
box-shadow 0.55s var(--lux-ease), padding 0.45s var(--lux-ease),
transform 0.55s var(--lux-ease);
}
/* The bar itself is now the solid surface, so the inner pill is flattened —
a rounded panel floating inside an opaque bar reads as a mistake. */
.navbar,
.site-header.is-solid .navbar {
background: none;
backdrop-filter: none;
-webkit-backdrop-filter: none;
border-color: transparent;
border-radius: 0;
box-shadow: none;
}
/* Scrolled: the bar tightens rather than changing skin. */
.site-header.is-solid {
box-shadow: 0 18px 44px -22px rgb(0 0 0 / 0.95);
border-bottom-color: rgb(244 215 122 / 0.4);
}
/* =========================================================================
2. TOP BAR
========================================================================= */
.topbar {
background: linear-gradient(180deg, rgb(0 0 0 / 0.55) 0%, rgb(7 27 36 / 0.35) 100%);
backdrop-filter: blur(14px);
-webkit-backdrop-filter: blur(14px);
border-bottom: 1px solid rgb(244 215 122 / 0.12);
letter-spacing: 0.02em;
}
/* Contact links: the gold underline grows from the left on hover. */
.topbar-link { position: relative; }
.topbar-link span:last-child { position: relative; }
.topbar-link span:last-child::after {
content: "";
position: absolute;
left: 0;
bottom: -3px;
width: 100%;
height: 1px;
background: var(--lux-gold);
transform: scaleX(0);
transform-origin: left;
transition: transform 0.4s var(--lux-ease);
}
.topbar-link:hover span:last-child::after { transform: scaleX(1); }
/* 40px circles on a 48px pitch. At the previous 28px/5.6px the 44px hit areas
below would have overlapped each other and one icon would have swallowed its
neighbour's clicks. */
.topbar-socials { gap: 0.5rem; }
.topbar-social { width: 2.5rem; height: 2.5rem; }
.topbar-social:hover {
background: var(--lux-gold);
box-shadow: 0 6px 16px -6px rgb(212 175 55 / 0.65);
}
/* "Plan my trip" — outlined until hover, then it fills with the gradient. */
.topbar-cta {
position: relative;
overflow: hidden;
border-color: var(--lux-hairline);
transition: color 0.4s var(--lux-ease), border-color 0.4s var(--lux-ease),
box-shadow 0.4s var(--lux-ease);
}
.topbar-cta::before {
content: "";
position: absolute;
inset: 0;
background: var(--lux-gold);
transform: scaleX(0);
transform-origin: left;
transition: transform 0.45s var(--lux-ease);
z-index: -1;
}
.topbar-cta:hover {
background: transparent; /* the ::before supplies the fill now */
color: #071B24;
border-color: transparent;
box-shadow: 0 8px 22px -10px rgb(212 175 55 / 0.7);
}
.topbar-cta:hover::before { transform: scaleX(1); }
.topbar-cta > * { position: relative; z-index: 1; }
/* ---- Tap targets in the top bar ----
The strip is a dense utility row, so the visible chips stay small — but the
touch target must not. Each control gets an invisible 44px hit area centred
on it, which satisfies the 44px minimum without inflating the design. The
strip only appears above 780px, so this covers the tablet range where it is
both visible and touched. */
.topbar-link,
.topbar-social,
.topbar-cta { position: relative; }
.topbar-link::after,
.topbar-social::after,
.topbar-cta::after {
content: "";
position: absolute;
left: 50%;
top: 50%;
min-width: 44px;
min-height: 44px;
width: 100%;
height: 100%;
transform: translate(-50%, -50%);
}
/* The CTA already paints its own ::before fill; this hit area must not sit
above the label, so it is pushed behind the text but stays hittable. */
.topbar-cta::after { z-index: 0; }
.topbar-social::after { border-radius: 999px; }
/* =========================================================================
3. HEADER LAYOUT — spacing and alignment
The bar read as three islands with dead water between them: logo hard left,
links bunched in the middle, CTA hard right. Widening the shell and letting
the links breathe spreads the weight across the bar instead.
========================================================================= */
/* A wider shell with real side margins, so the logo and CTA sit inside the
composition rather than pinned to the glass edges. */
.site-header .navwrap > .mx-auto {
max-width: 108rem;
padding-inline: 2rem;
}
@media (min-width: 1280px) { .site-header .navwrap > .mx-auto { padding-inline: 2.75rem; } }
@media (min-width: 1600px) { .site-header .navwrap > .mx-auto { padding-inline: 3.5rem; } }
.topbar-in { max-width: 108rem; padding-inline: 2rem; }
@media (min-width: 1280px) { .topbar-in { padding-inline: 2.75rem; } }
@media (min-width: 1600px) { .topbar-in { padding-inline: 3.5rem; } }
/* The nav takes the middle and grows into it, so the links distribute rather
than clump. flex:1 is what closes the two empty gaps. */
/* space-between, not center: centring left the eight links huddled in the
middle of a wide box with dead space either side — the box was full, the
content was not. space-between spreads the links across the whole span.
The max-width stops the gaps from becoming absurd on ultra-wide monitors. */
@media (min-width: 1280px) {
.mainnav {
flex: 1 1 auto;
justify-content: space-between;
gap: 0.5rem;
max-width: 62rem;
margin-inline: auto;
padding-inline: 1.5rem;
}
}
@media (min-width: 1600px) { .mainnav { max-width: 68rem; padding-inline: 2rem; } }
/* Slightly larger, better-spaced link blocks. */
.navlink {
padding: 0.55rem 0.85rem 0.6rem;
font-size: 12.5px;
letter-spacing: 0.015em;
gap: 0.4rem;
}
/* The brand and the actions hold their own width so the nav centres honestly
between them instead of drifting. */
.brand, .navactions { flex: 0 0 auto; }
/* =========================================================================
3b. NAVIGATION LINKS
========================================================================= */
.navlink {
position: relative;
border-radius: 0.85rem;
transition: color 0.35s var(--lux-ease), background 0.35s var(--lux-ease),
transform 0.35s var(--lux-ease);
}
/* Soft plate behind the hovered/active item — reads as a lit key rather than
a button, which suits an icon-over-label nav. */
.navlink::before {
content: "";
position: absolute;
inset: -0.15rem -0.35rem;
border-radius: inherit;
background: var(--lux-gold-soft);
opacity: 0;
transform: scale(0.9);
transition: opacity 0.35s var(--lux-ease), transform 0.35s var(--lux-ease);
z-index: -1;
}
.navlink:hover::before,
.navlink.is-active::before { opacity: 1; transform: scale(1); }
/* Replace the flat underline with the gold gradient, centred. */
.navlink::after {
background: var(--lux-gold) !important;
height: 2px !important;
border-radius: 2px;
box-shadow: 0 0 12px rgb(212 175 55 / 0.5);
}
/* The icon is the part that should move. */
.navlink-ic { transition: transform 0.4s var(--lux-ease), color 0.35s var(--lux-ease); }
.navlink:hover .navlink-ic { transform: translateY(-3px) scale(1.1); }
.navlink.is-active .navlink-ic {
color: #F4D77A;
filter: drop-shadow(0 2px 8px rgb(212 175 55 / 0.55));
}
/* =========================================================================
4. PRIMARY CTA — "Book a journey"
========================================================================= */
.navcta {
position: relative;
overflow: hidden;
background: var(--lux-gold);
color: #071B24 !important;
font-weight: 600;
border: 1px solid rgb(244 215 122 / 0.5);
box-shadow:
0 10px 30px -12px rgb(212 175 55 / 0.55),
inset 0 1px 0 rgb(255 255 255 / 0.3);
transition: transform 0.4s var(--lux-ease), box-shadow 0.4s var(--lux-ease);
}
.navcta:hover {
transform: translateY(-2px);
box-shadow:
0 18px 42px -14px rgb(212 175 55 / 0.75),
inset 0 1px 0 rgb(255 255 255 / 0.4);
}
.navcta:active { transform: translateY(0); }
/* Shimmer sweep on hover. */
.navcta::after {
content: "";
position: absolute;
top: 0;
left: -60%;
width: 40%;
height: 100%;
background: linear-gradient(100deg, transparent, rgb(255 255 255 / 0.45), transparent);
transform: skewX(-18deg);
transition: left 0.65s var(--lux-ease);
}
.navcta:hover::after { left: 120%; }
/* =========================================================================
5. MOBILE MENU
========================================================================= */
.mobmenu {
background: linear-gradient(180deg, rgb(16 47 63 / 0.96) 0%, rgb(7 27 36 / 0.98) 100%);
backdrop-filter: blur(26px) saturate(170%);
-webkit-backdrop-filter: blur(26px) saturate(170%);
border: 1px solid var(--lux-hairline);
box-shadow: 0 30px 70px -30px rgb(0 0 0 / 0.9);
}
.mobitem {
position: relative;
border-radius: 0.9rem;
transition: background 0.3s var(--lux-ease), transform 0.3s var(--lux-ease),
padding-left 0.3s var(--lux-ease);
}
.mobitem::before {
content: "";
position: absolute;
left: 0;
top: 50%;
width: 2px;
height: 0;
border-radius: 2px;
background: var(--lux-gold);
transform: translateY(-50%);
transition: height 0.32s var(--lux-ease);
}
.mobitem:hover, .mobitem.is-active {
background: var(--lux-gold-soft);
padding-left: 1.15rem;
}
.mobitem:hover::before, .mobitem.is-active::before { height: 60%; }
.mobitem .mobitem-ic { transition: transform 0.35s var(--lux-ease); }
.mobitem:hover .mobitem-ic { transform: scale(1.12); }
.mobcta {
background: var(--lux-gold);
color: #071B24;
font-weight: 600;
box-shadow: 0 12px 30px -14px rgb(212 175 55 / 0.65);
}
/* =========================================================================
6. HERO
========================================================================= */
/* Gold light bloom from the upper right — the "sun" the gold accents imply.
Sits above the media, below the content. */
.sx-curve > #hero-media::after {
content: "";
position: absolute;
inset: 0;
pointer-events: none;
background:
radial-gradient(60% 55% at 78% 12%, rgb(244 215 122 / 0.16) 0%, transparent 60%),
radial-gradient(90% 70% at 50% 100%, rgb(7 27 36 / 0.75) 0%, transparent 65%);
}
/* Cinematic vignette: keeps the eye on the headline instead of the corners. */
.sx-curve::before {
content: "";
position: absolute;
inset: 0;
z-index: 1;
pointer-events: none;
box-shadow: inset 0 0 220px 60px rgb(7 27 36 / 0.55);
}
/* Headline: a whisper of gold in the descenders, and a shadow that buys
legibility over any photograph. */
.sx-curve h1 {
text-shadow: 0 2px 40px rgb(7 27 36 / 0.6), 0 1px 3px rgb(7 27 36 / 0.4);
letter-spacing: -0.015em;
}
/* Eyebrow: flanked by a short gold rule. */
.sx-curve .text-gold.uppercase {
display: inline-flex;
align-items: center;
gap: 0.9rem;
}
.sx-curve .text-gold.uppercase::before {
content: "";
width: 2.5rem;
height: 1px;
background: var(--lux-gold);
flex: none;
}
/* Scroll indicator removed at the client's request, together with the "Scroll"
label in index.php. The animated gold track that used to sit here is disabled
rather than deleted, so the treatment can be restored in one line if wanted. */
.sx-curve::after { content: none; }
@keyframes lux-scroll {
0% { background-position: 50% -40%; }
100% { background-position: 50% 140%; }
}
/* Hero CTAs inherit the same metal treatment as the header CTA. */
.hero-actions .btn-gold,
.hero-actions .ripple-host {
box-shadow: 0 14px 36px -16px rgb(212 175 55 / 0.6);
}
/* =========================================================================
7. CLEAN HERO — film only
The hero shows the video/still on its own. The copy is not deleted: it is
still admin-editable and still in the HTML, just not painted.
========================================================================= */
/* Ordinary copy: removed from view and from the accessibility tree, because a
screen reader announcing an invisible paragraph is noise. */
.hero-hide { display: none !important; }
/* The
is different. It is the page's only heading, so it stays available
to search engines and screen readers and is merely clipped out of sight.
display:none would hide it from both. */
.hero-h1-seo {
position: absolute !important;
width: 1px;
height: 1px;
margin: -1px;
padding: 0;
overflow: hidden;
clip: rect(0 0 0 0);
clip-path: inset(50%);
white-space: nowrap;
border: 0;
}
/* With the copy gone the hero is a full-bleed frame, so the film carries it:
the heavy darkening that existed to make text legible is dialled back, and
only enough gradient is kept to seat the header and the scroll cue. */
.sx-curve #hero-media > .bg-gradient-to-b { opacity: 0.45; }
.sx-curve #hero-media > .bg-gradient-to-r { opacity: 0.25; }
.sx-curve::before { box-shadow: inset 0 0 200px 40px rgb(7 27 36 / 0.4); }
/* With the copy hidden, the flex column collapsed and the action row rode up
over the header. The reference hero is pure film, and the header carries a
permanent "Book a journey" CTA, so the booking path is not lost by clearing
these too. Delete this rule to bring the two hero buttons back. */
.sx-curve .hero-actions { display: none; }
/* ---- Hero shows the WHOLE video ----
The film is 1920x1080 (16:9). The hero box was 2.296 wide-to-tall, so
object-fit: cover was cropping 203px off the top and bottom — only 77% of
each frame reached the screen, which is the "cut" that was visible.
Giving the section the video's own 16:9 ratio means the frame fits exactly:
nothing cropped, and no letterbox bars either, because the box now matches
the source. The video element and its object-fit are untouched — the box was
the wrong shape, not the film.
Consequence worth knowing: at 16:9 the hero is taller than the space left
under the header, so the last stretch is below the fold. That is unavoidable
— a 16:9 frame cannot be shown whole, full-width, AND fit in the leftover
height unless the window happens to be that exact ratio. Showing all of the
film was the instruction, so height gives way. */
@media (min-width: 768px) {
.sx-curve { height: auto; aspect-ratio: 16 / 9; }
}
/* Portrait phones: show the WHOLE film in a contained banner, matching the
≥768 treatment above and the client's reference. The previous rule forced a
near-full-screen 100svh box with object-cover, which cropped a 16:9 film to
a narrow vertical slice — the "video looks zoomed in / not the actual video"
report. A 3:2 box is tall enough to read as a hero (not a thin strip like a
full-width 16:9 would be at ~220px) while cropping only the far edges of the
frame, so the shot reads whole.
The hero copy is hidden here (.hero-hide) and the
is clipped for SEO,
so the tall content container that carried them — h-[calc(100svh-14rem)] —
is pure empty height on a phone and would blow the banner back open. It is
lifted out of flow so the banner's own ratio is the only thing setting the
height; the h1 stays in the DOM, just weightless. */
@media (max-width: 767px) {
.sx-curve { height: auto; aspect-ratio: 3 / 2; min-height: 14rem; }
.sx-curve .hero-copy {
position: absolute;
inset: 0;
height: auto;
padding: 0;
pointer-events: none; /* nothing here is interactive once hidden */
}
/* Let the film read closer to its true colour — the darkening gradients
existed to seat headline text that is no longer shown on the banner. */
.sx-curve #hero-media > .bg-gradient-to-b { opacity: 0.28; }
.sx-curve #hero-media > .bg-gradient-to-r { opacity: 0.12; }
.sx-curve::before { box-shadow: inset 0 0 120px 24px rgb(7 27 36 / 0.28); }
}
/* ---- Inner page heroes ----
Every non-home page opens with page-hero.php, whose pt-44 (176px) existed
solely to clear the old fixed header. The header now occupies its own space,
so that padding became 176px of dead air above the heading. Trimmed to
ordinary breathing room. The markup is untouched — this overrides the
utility class rather than editing the partial. */
#main > section.pt-44 { padding-top: 4.5rem; }
@media (min-width: 768px) { #main > section.pt-44 { padding-top: 5.5rem; } }
/* =========================================================================
8. LOGO — larger, seated in a bordered plate
The mark is the first thing a visitor reads, and it was carrying far less
weight than the nav beside it. A hairline plate gives it a frame to sit in
so it reads as a brand mark rather than a floating image.
========================================================================= */
/* No frame. The mark stands on its own — a border around a logo inside an
already-bordered bar is one box too many. */
.brand,
.site-header.is-solid .brand,
.brand.has-plate,
.site-header.is-solid .brand.has-plate {
padding: 0;
border: 0;
background: none;
box-shadow: none;
border-radius: 0;
}
/* Sizes lifted across the board. Heights are the *frame*; the artwork itself
sits inside its own transparent padding, so these read smaller than the
number suggests. */
.brand-logo { height: 3.5rem; max-width: 13rem; } /* 56px phone */
@media (min-width: 768px) { .brand-logo { height: 4.25rem; max-width: 16rem; } } /* 68px tablet */
@media (min-width: 1024px) { .brand-logo { height: 5rem; max-width: 19rem; } } /* 80px desktop */
/* Scrolled state shrinks, but from a taller starting point than before. */
.site-header.is-solid .brand-logo { height: 3rem; }
@media (min-width: 768px) { .site-header.is-solid .brand-logo { height: 3.5rem; } }
@media (min-width: 1024px) { .site-header.is-solid .brand-logo { height: 4rem; } }
.site-header.is-solid .brand { padding: 0.35rem 0.75rem; }
/* Wide wordmark files need less height for the same presence. */
.brand-logo.is-wide { height: 3rem; max-width: 15rem; }
@media (min-width: 768px) { .brand-logo.is-wide { height: 3.6rem; max-width: 18rem; } }
@media (min-width: 1024px) { .brand-logo.is-wide { height: 4.2rem; max-width: 21rem; } }
/* Below 400px the plate costs more width than it earns. */
@media (max-width: 400px) {
.brand { padding: 0.3rem 0.5rem; }
.brand-logo { height: 3rem; max-width: 10rem; }
}
/* =========================================================================
9. FOOTER CREDIT
========================================================================= */
.credit { color: rgb(245 239 230 / 0.45); }
.credit a {
color: rgb(244 215 122 / 0.85);
transition: color 0.3s var(--lux-ease);
}
.credit a:hover { color: #F4D77A; text-decoration: underline; text-underline-offset: 3px; }
/* =========================================================================
10. MOTION PREFERENCES
Everything decorative above is switched off — the layout and the colours
stay, only the movement stops.
========================================================================= */
@media (prefers-reduced-motion: reduce) {
.site-header.is-solid .navbar::after,
.sx-curve::after { animation: none; }
.navcta::after { transition: none; }
.navlink, .navlink-ic, .mobitem, .navcta, .topbar-cta,
.topbar-link span:last-child::after { transition: none; }
.navcta:hover { transform: none; }
.navlink:hover .navlink-ic { transform: none; }
}
/* =========================================================================
11. FOUNDER — portrait treatment
The card was a plain two-column split. These changes give the portrait a
frame worth looking at and let the copy breathe, without touching the
partial's markup: every hook below already exists in includes/founder.php.
========================================================================= */
.founder-card {
position: relative;
border-color: var(--lux-hairline);
background: linear-gradient(150deg, rgb(16 47 63 / 0.9) 0%, rgb(7 27 36 / 0.96) 100%);
box-shadow: 0 40px 90px -50px rgb(0 0 0 / 0.9);
}
/* A gold filament along the top edge, matching the header treatment. */
.founder-card::before {
content: "";
position: absolute;
inset: 0 0 auto 0;
height: 1px;
background: linear-gradient(90deg, transparent, rgb(244 215 122 / 0.6) 50%, transparent);
z-index: 2;
}
/* ---- Portrait ---- */
.founder-media {
position: relative;
min-height: 26rem;
overflow: hidden;
}
.founder-media img {
/* object-position keeps a face in frame when the crop is tall and narrow —
a centred crop tends to cut foreheads on portrait photography. */
object-position: 50% 22%;
transform: scale(1.02);
transition: transform 1.1s var(--lux-ease), filter 1.1s var(--lux-ease);
filter: saturate(1.02) contrast(1.03);
}
.founder-card:hover .founder-media img { transform: scale(1.06); }
/* Ink gradient off the bottom and the inner edge, so the portrait resolves
into the card instead of ending at a hard rectangle. */
.founder-media::after {
content: "";
position: absolute;
inset: 0;
pointer-events: none;
background:
linear-gradient(to top, rgb(7 27 36 / 0.55) 0%, transparent 45%),
linear-gradient(to right, transparent 70%, rgb(7 27 36 / 0.45) 100%);
}
/* ---- Copy ---- */
.founder-body { padding: 3.25rem; gap: 0.25rem; justify-content: center; }
@media (max-width: 640px) { .founder-body { padding: 2rem; } }
.founder-eyebrow { color: #F4D77A; letter-spacing: 0.3em; }
.founder-eyebrow svg { color: #D4AF37; }
.founder-quote {
position: relative;
padding-left: 1.5rem;
line-height: 1.45;
color: rgb(245 239 230 / 0.94);
}
/* Gold rule down the left of the quote rather than a giant quotation glyph. */
.founder-quote::before {
content: "";
position: absolute;
left: 0;
top: 0.35em;
bottom: 0.35em;
width: 2px;
border-radius: 2px;
background: var(--lux-gold);
}
.founder-name { color: #F5EFE6; }
.founder-since {
display: inline-flex;
align-items: center;
gap: 0.5rem;
margin-top: 1.5rem;
padding: 0.4rem 0.9rem;
border: 1px solid var(--lux-hairline);
border-radius: 999px;
align-self: flex-start;
}
/* ---- Entrance ----
The portrait wipes up from behind its own frame while the copy fades in
after it, so the eye lands on the face first. Driven by .reveal, which the
existing scroll observer already toggles — no new JS. */
.founder-card .founder-media img {
clip-path: inset(12% 0 0 0);
transition: transform 1.1s var(--lux-ease), clip-path 1.2s var(--lux-ease),
filter 1.1s var(--lux-ease);
}
.founder-card.is-visible .founder-media img,
.reveal.is-visible .founder-media img,
.founder-card:not(.reveal) .founder-media img { clip-path: inset(0 0 0 0); }
@media (prefers-reduced-motion: reduce) {
.founder-media img,
.founder-card:hover .founder-media img {
transition: none;
transform: none;
clip-path: none;
}
}
/* =========================================================================
12. GUEST VIDEO REVIEWS (footer wall)
THE SIZING PROBLEM: guest clips arrive in whatever shape the guest's phone
recorded — 9:16 vertical, 1:1, 16:9 landscape, sometimes 4:5. Two bad
answers exist: force one ratio and crop faces out, or let each tile be its
natural height and get a ragged, unaligned grid.
The answer used here: every tile shares one portrait-ish frame so the grid
stays aligned, and the video inside is object-fit: contain rather than
cover — so a landscape clip letterboxes gracefully inside the frame instead
of being cropped through the speaker's face. A blurred copy of the same
frame fills the leftover space, so the letterbox reads as depth rather than
as black bars. JS then narrows the frame for clips that are genuinely
landscape, so those do not sit in a tall box wasting room.
========================================================================= */
.vr-wrap {
position: relative;
padding: clamp(3.5rem, 6vw, 6rem) 0;
background: linear-gradient(180deg, #071B24 0%, #0B2430 50%, #071B24 100%);
border-top: 1px solid var(--lux-hairline);
}
.vr-head {
display: flex;
flex-wrap: wrap;
align-items: flex-end;
justify-content: space-between;
gap: 1.25rem;
margin-bottom: clamp(2rem, 4vw, 3.25rem);
}
.vr-eyebrow {
font-size: 0.7rem;
text-transform: uppercase;
letter-spacing: 0.35em;
color: #D4AF37;
}
.vr-title {
margin-top: 0.75rem;
font-family: "Playfair Display", serif;
font-size: clamp(2rem, 1.2rem + 2.6vw, 3.5rem);
line-height: 1.05;
color: #F5EFE6;
}
.vr-all {
display: inline-flex;
align-items: center;
gap: 0.5rem;
padding: 0.7rem 1.35rem;
min-height: 44px;
border: 1px solid var(--lux-hairline);
border-radius: 999px;
font-size: 0.8rem;
color: #F4D77A;
transition: background 0.35s var(--lux-ease), border-color 0.35s var(--lux-ease),
transform 0.35s var(--lux-ease);
}
.vr-all:hover {
background: rgb(244 215 122 / 0.1);
border-color: rgb(244 215 122 / 0.5);
transform: translateY(-2px);
}
/* auto-fit + minmax is what makes the wall responsive without a single
breakpoint: the browser fits as many columns as will hold 240px and
redistributes the remainder itself. */
.vr-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(min(240px, 100%), 1fr));
gap: clamp(1rem, 2vw, 1.75rem);
list-style: none;
margin: 0;
padding: 0;
}
.vr-card {
display: flex;
flex-direction: column;
height: 100%;
margin: 0;
overflow: hidden;
border: 1px solid var(--lux-hairline);
border-radius: 1.5rem;
background: linear-gradient(160deg, rgb(16 47 63 / 0.85), rgb(7 27 36 / 0.95));
transition: transform 0.45s var(--lux-ease), box-shadow 0.45s var(--lux-ease),
border-color 0.45s var(--lux-ease);
}
.vr-card:hover {
transform: translateY(-6px);
border-color: rgb(244 215 122 / 0.45);
box-shadow: 0 30px 60px -30px rgb(0 0 0 / 0.9);
}
/* ---- The frame ----
One shared aspect keeps the grid aligned. 4/5 suits phone-shot review clips,
which are the common case, without being as extreme as 9:16. */
.vr-media {
position: relative;
aspect-ratio: 4 / 5;
overflow: hidden;
background: #05141B;
}
/* JS adds this when a clip turns out to be wider than it is tall. */
.vr-card.is-landscape .vr-media { aspect-ratio: 16 / 10; }
.vr-card.is-square .vr-media { aspect-ratio: 1 / 1; }
.vr-video,
.vr-frame {
position: absolute;
inset: 0;
width: 100%;
height: 100%;
border: 0;
z-index: 1;
}
/* contain, not cover: never crop a face out of a testimonial. */
.vr-video { object-fit: contain; }
/* The blurred fill behind a letterboxed clip. Uses the poster, so it costs
nothing extra to load. */
.vr-media::before {
content: "";
position: absolute;
inset: -8%;
z-index: 0;
background: inherit;
background-size: cover;
background-position: center;
filter: blur(26px) saturate(120%) brightness(0.5);
transform: scale(1.1);
}
.vr-badge {
position: absolute;
left: 0.9rem;
bottom: 0.9rem;
z-index: 3;
max-width: calc(100% - 1.8rem);
padding: 0.35rem 0.75rem;
border-radius: 999px;
background: rgb(7 27 36 / 0.72);
backdrop-filter: blur(10px);
border: 1px solid rgb(244 215 122 / 0.28);
font-size: 0.7rem;
letter-spacing: 0.04em;
color: #F5EFE6;
/* Long titles truncate rather than wrapping into a three-line block that
covers the clip. */
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
/* ---- Play control ---- */
.vr-play {
position: absolute;
left: 50%;
top: 50%;
z-index: 4;
display: grid;
place-items: center;
width: 56px;
height: 56px; /* comfortably over the 44px minimum */
margin: -28px 0 0 -28px;
border: 0;
border-radius: 999px;
cursor: pointer;
color: #071B24;
background: var(--lux-gold);
box-shadow: 0 10px 26px -10px rgb(212 175 55 / 0.8);
transition: transform 0.35s var(--lux-ease), opacity 0.3s var(--lux-ease);
}
.vr-play:hover { transform: scale(1.08); }
.vr-card.is-playing .vr-play { opacity: 0; pointer-events: none; }
/* ---- Caption ---- */
.vr-cap { padding: 1.25rem 1.35rem 1.5rem; }
.vr-quote {
font-size: 0.92rem;
line-height: 1.6;
color: rgb(245 239 230 / 0.82);
/* Cap at four lines so one long caption cannot make its column tower over
the others — the grid stays visually even. */
display: -webkit-box;
-webkit-line-clamp: 4;
-webkit-box-orient: vertical;
overflow: hidden;
}
.vr-by {
margin-top: 0.85rem;
font-size: 0.75rem;
letter-spacing: 0.06em;
color: rgb(245 239 230 / 0.55);
}
.vr-name { color: #F4D77A; font-weight: 600; }
.vr-dot { margin: 0 0.4rem; color: rgb(244 215 122 / 0.5); }
@media (prefers-reduced-motion: reduce) {
.vr-card, .vr-all, .vr-play { transition: none; }
.vr-card:hover { transform: none; }
}
/* Cap the tile width.
auto-fit + 1fr stretches a lone card across the whole row, and with a 4/5
frame that made a single review ~1750px tall. Capping the card and centring
it in its track keeps one clip the same size as one of twelve. */
.vr-item {
width: 100%;
max-width: 380px;
justify-self: center;
}
.vr-grid { justify-content: center; }
/* =========================================================================
13. NATIVE SELECT DROPDOWNS
An open