carries no UA margin — so the last
card of one block and the first card of the next met with zero gap and
their two 1px outlines read as one doubled, overlapping border.
Margin rather than a gap on `.page-content`, so it collapses with
`.gallery-section`'s own margin-bottom instead of stacking on top of it. */
.page-content > * + * {
margin-top: clamp(2rem, 5vw, 3rem);
}
.page-grid {
display: grid;
gap: 1.25rem;
}
/* NOTE: `.page-card-grid` itself is defined once, in the CONTENT CARD PAGES
block near the end of this file. It used to be declared here as a two-column
grid as well, and that earlier copy was silently defeated by the later one —
which is what let the vault grids fall through into column flow. One
definition only; keep it that way. */
.page-card {
padding: 1.2rem;
border: 1px solid rgba(255, 255, 255, 0.14);
border-radius: 0.7rem;
background: linear-gradient(145deg, rgba(255, 255, 255, 0.09), rgba(255, 255, 255, 0.028));
}
.page-card img {
width: 100%;
border-radius: 0.5rem;
margin-bottom: 0.8rem;
}
/* Media cards crop their photo into one shared frame. The source photos are a
mix of landscape and portrait, so without this the image keeps its natural
ratio while the card stretches to the grid row height — leaving a dead gap
under the shorter images. */
.media-card picture {
display: block;
margin-bottom: 0.8rem;
}
.media-card img {
/* Square rather than the old 4/5 portrait. 4/5 made each photo card roughly
a screen tall on its own, which is what drove the page height. A square
also crops sensibly for both the portrait sources and the landscape live
shot, where a landscape ratio would cut the portraits' heads off. */
aspect-ratio: 1 / 1;
object-fit: cover;
object-position: center;
margin-bottom: 0;
}
.media-card h3 {
margin-bottom: 0;
}
.muted-line {
color: var(--silver);
font-size: 0.92rem;
}
.vault-actions {
display: flex;
flex-wrap: wrap;
gap: 0.75rem;
align-items: center;
margin-top: 1rem;
}
.vault-actions strong {
color: var(--gold-bright);
font-size: 1rem;
}
.vault-actions small {
width: 100%;
color: var(--silver);
font-size: 0.8rem;
text-transform: uppercase;
}
/* The narrow-width `.page-card-grid` override lives with the rest of its rules
in the CONTENT CARD PAGES block at the end of this file. */
@media (prefers-reduced-motion: reduce) {
*,
*::before,
*::after {
animation-duration: 0.01ms !important;
}
body,
a,
button,
input,
select,
textarea {
cursor: auto;
}
.spotlight,
.stage-particles {
display: none;
}
}
/* Touch devices have no hovering pointer, so the mouse-following glow has
nothing to follow. */
@media (pointer: coarse) {
.spotlight {
display: none;
}
}
@keyframes heroFade {
from {
opacity: 0;
transform: translateY(40px);
}
to {
opacity: 1;
transform: none;
}
}
@keyframes laserSweep {
0% {
transform: translateX(-130%);
}
100% {
transform: translateX(130%);
}
}
/* ===============================
HERO LOCATION
==================================*/
.hero {
position: relative;
}
.hero-location {
position: absolute;
top: 130px;
right: 60px;
display: inline-flex;
align-items: center;
gap: 9px;
padding: 10px 18px;
border: 1px solid rgba(255, 42, 75, .4);
border-radius: 40px;
background: rgba(0, 0, 0, .55);
backdrop-filter: blur(20px);
color: #fff;
font-size: 13px;
font-weight: 700;
letter-spacing: 1px;
text-transform: uppercase;
box-shadow: 0 8px 24px rgba(0, 0, 0, .4), 0 0 18px rgba(255, 42, 75, .18);
z-index: 20;
transition: .35s;
}
/* Live red "on tour" pin dot with a gentle pulse */
.hero-location::before {
content: "";
width: 9px;
height: 9px;
border-radius: 50%;
background: #ff2a4b;
box-shadow: 0 0 0 0 rgba(255, 42, 75, .55);
animation: locationPulse 2.2s ease-out infinite;
}
@keyframes locationPulse {
0% { box-shadow: 0 0 0 0 rgba(255, 42, 75, .55); }
70% { box-shadow: 0 0 0 8px rgba(255, 42, 75, 0); }
100% { box-shadow: 0 0 0 0 rgba(255, 42, 75, 0); }
}
.hero-location:hover {
border-color: #ff2a4b;
box-shadow: 0 0 25px rgba(255, 42, 75, .35);
}
/* The badge is pinned to a fixed top/right offset that was measured against the
desktop hero photo. On a phone that spot is exactly where the brand crest
sits, so the pill landed on top of the logo. Below the stacking breakpoint
the hero is already a flex column, so dropping the badge into normal flow
makes it the first item in that column — above the crest, no overlap, and it
still reads as a label for the hero. */
@media (max-width: 900px) {
.hero-location {
position: static;
top: auto;
right: auto;
align-self: flex-start;
margin-bottom: 1.1rem;
max-width: 100%;
}
}
.hero-stats {
position: absolute;
right: 3%;
top: 55%;
transform: translateY(-50%);
display: flex;
flex-direction: column;
gap: 18px;
z-index: 10;
}
.hero-stat {
width: 96px;
height: 96px;
border-radius: 50%;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
background: rgba(255, 255, 255, .08);
backdrop-filter: blur(20px);
border: 1px solid rgba(255, 255, 255, .15);
box-shadow:
0 12px 35px rgba(0, 0, 0, .35),
0 0 20px rgba(255, 35, 70, .18);
animation: bubbleFloat 7s ease-in-out infinite;
transition: .35s;
}
.hero-stat strong {
display: block;
font-size: 24px;
color: #fff;
font-weight: 800;
margin-bottom: 6px;
}
.hero-stat span {
margin-top: 6px;
color: rgba(255, 255, 255, .75);
font-size: 12px;
text-transform: uppercase;
letter-spacing: 1px;
}
.hero-stat:hover {
transform: translateY(-6px);
border-color: rgba(255, 59, 87, .7);
box-shadow: 0 18px 40px rgba(255, 59, 87, .25);
}
.hero {
position: relative;
}
.hero-stats {
position: absolute;
right: 4%;
top: 52%;
transform: translateY(-50%);
display: flex;
flex-direction: column;
gap: 14px;
z-index: 8;
}
.hero-stats strong {
display: block;
padding: 0;
border: none;
background: transparent;
backdrop-filter: none;
box-shadow: none;
color: #ffffff;
font-size: 16px;
font-weight: 800;
text-align: center;
}
.hero-stats strong span {
display: block;
margin-top: 6px;
font-size: 12px;
color: #cfcfcf;
letter-spacing: 1px;
text-transform: uppercase;
}
@keyframes heroFloat {
0% {
transform: translate(0, 0);
}
25% {
transform: translate(8px, -8px);
}
50% {
transform: translate(-6px, 6px);
}
75% {
transform: translate(6px, -4px);
}
100% {
transform: translate(0, 0);
}
}
.hero-stat:nth-child(2) {
margin-left: 0;
}
.hero-stat:nth-child(3) {
margin-left: 0;
}
@keyframes bubbleFloat {
0%,
100% {
transform: translateY(0);
}
25% {
transform: translateY(-6px) translateX(6px);
}
50% {
transform: translateY(4px) translateX(-4px);
}
75% {
transform: translateY(-5px) translateX(5px);
}
}
/* Vault purchase flow */
.order-summary {
list-style: none;
margin: 0.5rem 0 1rem;
padding: 0;
display: grid;
gap: 0.5rem;
}
.order-summary li {
display: flex;
justify-content: space-between;
gap: 1rem;
padding-bottom: 0.5rem;
border-bottom: 1px solid var(--line);
color: var(--white-muted);
}
.order-summary li strong { color: var(--white); }
.order-total {
font-size: 1.15rem;
margin: 0.5rem 0 1.25rem;
}
.order-total strong { color: var(--gold); font-size: 1.4rem; }
.order-total small { color: var(--white-muted); font-weight: 500; }
.upi-id {
font-size: 1.1rem;
letter-spacing: 0.02em;
word-break: break-all;
}
.purchase-downloads {
margin-top: 1.25rem;
display: grid;
gap: 0.75rem;
}
/* The panel ships `hidden` and is only revealed after payment. `hidden` is a
UA `display: none`, which any author `display` outranks — so the `grid`
above was un-hiding it and giving the empty div a row (plus its margin) in
the middle of the checkout form. */
.purchase-downloads[hidden] {
display: none;
}
.purchase-downloads .button { width: 100%; text-align: center; }
/* Homepage stats band (3 boxes between hero and showcase, no photo overlap) */
.stats-band {
padding-top: 2.5rem;
padding-bottom: 0.5rem;
}
.stats-band .stats {
grid-template-columns: repeat(3, 1fr);
max-width: 900px;
margin: 0 auto;
gap: 1rem;
}
.stats-band .stats strong {
font-size: 2rem;
text-align: center;
padding: 1.4rem 1rem;
}
.stats-band .stats span {
display: block;
margin-top: 0.4rem;
}
/* Homepage teaser rows (short sections linking to full pages) */
.teaser-row {
display: flex;
align-items: center;
justify-content: space-between;
gap: 2rem;
flex-wrap: wrap;
border-top: 1px solid var(--line);
}
.teaser-row .section-heading {
margin-bottom: 0;
max-width: 720px;
}
.teaser-row .section-heading p:last-child {
color: var(--white-muted);
margin-top: 0.5rem;
}
.teaser-actions {
display: flex;
gap: 0.75rem;
flex-wrap: wrap;
}
.media > .button {
margin-top: 1.5rem;
}
/* Hero eyebrow hashtag */
.hero-inner .eyebrow {
color: var(--red-glow);
letter-spacing: 0.18em;
}
@media (max-width: 720px) {
.stats-band .stats {
grid-template-columns: 1fr;
}
.teaser-row {
flex-direction: column;
align-items: flex-start;
}
}
/* Hero stat bubbles — uniform size, aligned column, staggered float only */
.hero-stat:nth-child(1) {
animation-delay: 0s;
width: 108px;
height: 108px;
}
.hero-stat:nth-child(2) {
animation-delay: 1.6s;
width: 108px;
height: 108px;
margin-right: 0;
}
.hero-stat:nth-child(3) {
animation-delay: 3.2s;
width: 108px;
height: 108px;
margin-right: 0;
}
.hero-stat::after {
content: "";
position: absolute;
inset: -4px;
border-radius: 50%;
border: 1px solid rgba(255, 42, 75, 0.35);
animation: bubblePulse 3.2s ease-in-out infinite;
pointer-events: none;
}
.hero-stat {
position: relative;
}
.hero-stat:nth-child(2)::after { animation-delay: 1s; }
.hero-stat:nth-child(3)::after { animation-delay: 2s; }
@keyframes bubblePulse {
0%, 100% { transform: scale(1); opacity: 0.55; }
50% { transform: scale(1.05); opacity: 0; }
}
@media (max-width: 900px) {
/* .hero is a flex ROW, and .hero-stats is a sibling of .hero-inner. Dropping
the stats out of absolute positioning without also turning the hero into a
column just made them a second flex item beside the copy — the bubble row
(3 x 108px plus gaps) then pushed ~200px past the viewport and got clipped
by body{overflow-x:hidden}. Stacking the hero is what actually puts them
underneath the headline. */
.hero {
flex-direction: column;
align-items: flex-start;
justify-content: center;
}
.hero-inner {
width: 100%;
}
.hero-stats {
position: static;
transform: none;
flex-direction: row;
justify-content: center;
flex-wrap: wrap;
gap: 14px;
width: 100%;
margin-top: 1.5rem;
}
.hero-stat:nth-child(2),
.hero-stat:nth-child(3) {
margin-right: 0;
}
}
@media (max-width: 460px) {
/* Three 108px bubbles plus gaps need 352px, and the hero's own side padding
eats 80px, so they start wrapping to a second row below ~435px. Shrinking
to 92px (296px total) keeps them on one line down to the 320px floor. */
.hero-stat:nth-child(1),
.hero-stat:nth-child(2),
.hero-stat:nth-child(3) {
width: 92px;
height: 92px;
}
.hero-stats {
gap: 10px;
}
}
/* ============================================================
Brand logo — header sizing fix + glossy/metallic showcase.
The logo artwork itself is never altered (no recolor, no
reshaping); these are pure CSS overlays: depth shadows for a
metallic feel, and a light-sweep masked to the logo's own
silhouette so the shine only ever passes across the actual
artwork, never a rectangle around it.
============================================================ */
/* Header logo: size by height (not width) so the new wide logo
fits the header without overflow at any screen size. */
.brand {
position: relative;
height: 100%;
width: auto;
}
.brand img {
height: clamp(34px, 5.2vw, 50px);
width: auto;
max-width: none;
filter:
drop-shadow(0 1px 0 rgba(255, 255, 255, 0.28))
drop-shadow(0 8px 18px rgba(0, 0, 0, 0.55))
drop-shadow(0 0 16px rgba(216, 162, 74, 0.22));
}
/* Shared shine-sweep overlay: a diagonal highlight band, masked to
the logo's own alpha shape, that periodically flashes across it. */
.brand::after,
.brand-crest::after,
.footer-brand::after {
content: "";
position: absolute;
inset: 0;
background: linear-gradient(
115deg,
transparent 32%,
rgba(255, 255, 255, 0.9) 47%,
rgba(255, 240, 210, 0.35) 53%,
transparent 68%
);
background-size: 300% 300%;
-webkit-mask-image: url("assets/skyyrex-brand-logo.png");
mask-image: url("assets/skyyrex-brand-logo.png");
-webkit-mask-size: contain;
mask-size: contain;
-webkit-mask-repeat: no-repeat;
mask-repeat: no-repeat;
-webkit-mask-position: center;
mask-position: center;
mix-blend-mode: screen;
pointer-events: none;
}
.brand::after {
animation: crestShine 6s ease-in-out infinite;
}
/* Hero brand crest: a larger showcase of the logo above the eyebrow,
with more pronounced metallic depth and a slower, bolder sweep. */
.brand-crest {
position: relative;
width: clamp(150px, 20vw, 232px);
margin-bottom: clamp(1rem, 2.4vw, 1.6rem);
}
.brand-crest img {
width: 100%;
height: auto;
filter:
drop-shadow(0 1px 0 rgba(255, 255, 255, 0.3))
drop-shadow(0 14px 30px rgba(0, 0, 0, 0.6))
drop-shadow(0 0 26px rgba(216, 162, 74, 0.26));
}
.brand-crest::after {
animation: crestShine 5s ease-in-out infinite;
}
.footer-brand::after {
animation: crestShine 6s ease-in-out infinite;
animation-delay: 1.5s;
}
@keyframes crestShine {
0%, 55% {
background-position: 140% 0%;
}
75% {
background-position: -40% 0%;
}
100% {
background-position: -40% 0%;
}
}
@media (prefers-reduced-motion: reduce) {
.brand::after,
.brand-crest::after,
.footer-brand::after {
animation: none;
opacity: 0;
}
}
@media (max-width: 640px) {
.brand-crest {
width: clamp(120px, 34vw, 170px);
}
}
/* ---------------------------------------------------------------------------
GALLERY — vertical reel rail + mixed landscape wall (videos and photos)
Driven by data/gallery.json; markup in server/views.js renderGalleryPage().
--------------------------------------------------------------------------- */
.gallery-section {
margin-bottom: 4.5rem;
}
.gallery-head {
margin-bottom: 1.5rem;
}
.gallery-head h2 {
margin: 0.35rem 0 0.5rem;
}
/* --- Reel rail: horizontal scroll-snap of 9:16 clips --- */
/* Positioning context for the prev/next arrows, which overlay the rail edges. */
.reel-carousel {
position: relative;
}
.reel-rail {
display: grid;
grid-auto-flow: column;
grid-auto-columns: clamp(210px, 22vw, 280px);
gap: 1rem;
margin: 0;
padding: 0 0 1rem;
list-style: none;
overflow-x: auto;
overscroll-behavior-x: contain;
/* `proximity`, not `mandatory`: mandatory snapping fights the programmatic
smooth scroll the auto-advance uses, and can cancel it mid-flight. */
scroll-snap-type: x proximity;
scrollbar-width: none;
}
/* The rail advances on its own, so the scrollbar is visual noise. Dragging and
wheel-scrolling still work. */
.reel-rail::-webkit-scrollbar {
display: none;
}
.reel-nav {
position: absolute;
top: calc(50% - 1.4rem);
z-index: 4;
width: 2.8rem;
height: 2.8rem;
display: grid;
place-items: center;
border: 1px solid rgba(255, 255, 255, 0.28);
border-radius: 999px;
background: rgba(0, 0, 0, 0.62);
color: var(--white);
font-size: 1.5rem;
line-height: 1;
cursor: pointer;
backdrop-filter: blur(10px);
transition: border-color 180ms ease, transform 180ms ease;
}
.reel-nav:hover,
.reel-nav:focus-visible {
border-color: rgba(255, 42, 75, 0.85);
transform: scale(1.06);
}
.reel-prev {
left: -0.6rem;
}
.reel-next {
right: -0.6rem;
}
@media (max-width: 640px) {
/* Arrows would sit on top of the cards at this width; the rail is swipeable
and still auto-advances, so drop them. */
.reel-nav {
display: none;
}
}
.reel {
position: relative;
aspect-ratio: 9 / 16;
border: 1px solid rgba(255, 255, 255, 0.14);
border-radius: 0.7rem;
overflow: hidden;
background: #0a0d14;
scroll-snap-align: center;
}
/* The clip fills its frame; sources are already 9:16 so cover crops nothing. */
.reel-video {
width: 100%;
height: 100%;
object-fit: cover;
display: block;
}
/* Legibility scrim behind the caption — the footage underneath varies wildly
in brightness, so the label needs its own contrast floor. */
.reel::after {
content: "";
position: absolute;
inset: auto 0 0 0;
height: 45%;
background: linear-gradient(to top, rgba(0, 0, 0, 0.82), transparent);
pointer-events: none;
}
.reel-meta {
position: absolute;
inset: auto 0 0 0;
z-index: 2;
padding: 0.85rem;
display: grid;
gap: 0.15rem;
}
.reel-meta strong {
font-size: 0.92rem;
font-weight: 900;
text-transform: uppercase;
letter-spacing: 0.02em;
}
.reel-loc {
color: var(--silver);
font-size: 0.74rem;
text-transform: uppercase;
letter-spacing: 0.08em;
}
.reel-sound {
position: absolute;
top: 0.6rem;
right: 0.6rem;
z-index: 3;
padding: 0.35rem 0.6rem;
border: 1px solid rgba(255, 255, 255, 0.3);
border-radius: 999px;
background: rgba(0, 0, 0, 0.6);
color: var(--white);
font-size: 0.66rem;
font-weight: 900;
text-transform: uppercase;
letter-spacing: 0.06em;
cursor: pointer;
backdrop-filter: blur(8px);
}
.reel-sound:hover,
.reel-sound:focus-visible {
border-color: rgba(216, 162, 74, 0.75);
}
/* No `is-playing` highlight: every on-screen reel plays, so a "playing" border
would just outline all of them and mean nothing. The class is still set —
it's what the sound toggle and the observer read. */
/* --- Landscape wall: mixed video + photo tiles --- */
.tile-wall {
display: grid;
grid-template-columns: repeat(3, minmax(0, 1fr));
gap: 1rem;
/* Tiles hug their own content. Without this they stretch to the row height,
and since a `wide` tile spans two columns its 16:9 media is taller than a
single-column neighbour's — leaving a dead black gap under the short one. */
align-items: start;
}
.tile {
position: relative;
margin: 0;
border: 1px solid rgba(255, 255, 255, 0.14);
border-radius: 0.7rem;
overflow: hidden;
background: #0a0d14;
}
/* Wide tiles span two columns — breaks up the grid so it reads as a designed
wall rather than a uniform contact sheet. */
.tile.wide {
grid-column: span 2;
}
/* One shared 16:9 frame for every tile, photo or video, so rows line up
regardless of the source aspect ratio. */
.tile img,
.tile video {
width: 100%;
aspect-ratio: 16 / 9;
object-fit: cover;
display: block;
}
.tile figcaption {
padding: 0.85rem;
display: grid;
gap: 0.2rem;
}
.tile figcaption strong {
font-size: 0.9rem;
font-weight: 900;
text-transform: uppercase;
}
.tile figcaption p {
margin: 0;
color: var(--silver);
font-size: 0.82rem;
}
.tile-play {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
z-index: 2;
width: 3.4rem;
height: 3.4rem;
display: grid;
place-items: center;
border: 1px solid rgba(255, 255, 255, 0.34);
border-radius: 999px;
background: rgba(0, 0, 0, 0.55);
color: var(--white);
font-size: 1.1rem;
cursor: pointer;
backdrop-filter: blur(8px);
transition: opacity 180ms ease, transform 180ms ease, border-color 180ms ease;
}
/* Caption sits below the frame, so centre the button on the video area only. */
.tile-video .tile-play {
top: calc((100% - 3.2rem) / 2);
}
.tile-play:hover,
.tile-play:focus-visible {
border-color: rgba(216, 162, 74, 0.8);
transform: translate(-50%, -50%) scale(1.06);
}
/* While a tile plays the control gets out of the way — nothing sits over the
picture until you go looking for it — and fades back in on hover or keyboard
focus. It keeps `pointer-events`, unlike the original rule here, which paired
`opacity: 0` with `pointer-events: none` and left a playing clip with no stop
control at all. */
.tile.is-playing .tile-play {
opacity: 0;
}
.tile.is-playing:hover .tile-play,
.tile.is-playing:focus-within .tile-play,
.tile.is-playing .tile-play:focus-visible {
opacity: 1;
}
/* Touch has no hover to reveal anything, so on those devices the button stays
faintly visible rather than disappearing for good. Tapping the picture
toggles playback as well, but a control you cannot see is not a control, and
this is the only affordance that says the clip can be stopped. */
@media (hover: none) {
.tile.is-playing .tile-play {
opacity: 0.32;
}
}
/* The picture itself toggles playback, so say so. */
.tile-video .tile-video-el {
cursor: pointer;
}
@media (max-width: 920px) {
.tile-wall {
grid-template-columns: repeat(2, minmax(0, 1fr));
}
}
@media (max-width: 640px) {
.tile-wall {
grid-template-columns: 1fr;
}
/* With one column, a spanning tile would overflow the track. */
.tile.wide {
grid-column: auto;
}
}
/* ---------------------------------------------------------------------------
HOMEPAGE DENSITY PASS
The homepage used to stack five near-identical "teaser row" sections, each
holding one heading and one sentence, separated by up to 17rem of combined
.section padding. That is where the empty space came from. These rules
replace that with a tighter vertical rhythm plus two horizontal rails, so
every fact stays on the page while the page itself gets materially shorter.
Markup: public/index.html; data filled in by renderHomePage() in views.js.
--------------------------------------------------------------------------- */
/* Roughly half the stock .section padding. Applied to every homepage block so
the rhythm stays even — mixing tight and untight sections reads as a mistake. */
.section-tight {
padding: clamp(2.5rem, 5vw, 4rem) 0;
}
/* Heading on the left, the section's escape hatch on the right, sharing one
line instead of costing a whole row of its own. */
.section-heading-row {
display: flex;
align-items: flex-end;
justify-content: space-between;
gap: 1.5rem;
flex-wrap: wrap;
max-width: none;
}
.section-heading-row > div {
/* Without min-width:0 a long h2 refuses to shrink below its text width and
wraps the button onto its own line, which is what it was doing. */
flex: 1 1 auto;
min-width: 0;
max-width: 820px;
}
.section-heading-row h2 {
margin: 0.35rem 0 0;
}
.section-heading-row .button {
flex: none;
}
/* --- Credentials strip -----------------------------------------------------
Six presskit proof points in one band. auto-fit means it reflows from 3x2 to
2x3 to 1 column without a single media query. */
.credentials-strip {
display: grid;
/* Exactly three across: there are six credentials, so this fills two rows
with no empty cells. auto-fit gave four and left two gaps. */
grid-template-columns: repeat(3, minmax(0, 1fr));
gap: 1px;
margin: 0;
padding: 0;
list-style: none;
border: 1px solid var(--line);
border-radius: 0.7rem;
overflow: hidden;
/* The 1px grid gap shows through as hairline dividers between cells, so the
strip reads as one object rather than six floating boxes. */
background: var(--line);
}
.credential {
display: flex;
flex-direction: column;
gap: 0.3rem;
padding: 1.1rem 1.2rem;
background: linear-gradient(145deg, rgba(255, 255, 255, 0.055), rgba(255, 255, 255, 0.02));
}
.credential strong {
font-size: 1rem;
font-weight: 800;
letter-spacing: 0.01em;
color: var(--white);
}
.credential span {
font-size: 0.86rem;
line-height: 1.45;
color: var(--white-muted);
}
/* --- Explore grid ----------------------------------------------------------
One grid replacing five teaser rows. Every destination visible at once. */
.explore-grid {
display: grid;
grid-template-columns: repeat(3, minmax(0, 1fr));
gap: 1rem;
margin: 0;
padding: 0;
list-style: none;
}
.explore-card {
display: flex;
}
.explore-card a {
position: relative;
display: flex;
flex-direction: column;
gap: 0.4rem;
width: 100%;
padding: 1.35rem 1.3rem 1.5rem;
border: 1px solid rgba(255, 255, 255, 0.14);
border-radius: 0.7rem;
background: linear-gradient(145deg, rgba(255, 255, 255, 0.08), rgba(255, 255, 255, 0.025));
color: var(--white);
text-decoration: none;
transition: border-color 180ms ease, transform 180ms ease, background 180ms ease;
}
.explore-card a:hover,
.explore-card a:focus-visible {
border-color: rgba(255, 42, 75, 0.75);
background: linear-gradient(145deg, rgba(255, 42, 75, 0.14), rgba(255, 255, 255, 0.03));
transform: translateY(-3px);
}
.explore-index {
font-size: 0.72rem;
font-weight: 800;
letter-spacing: 0.18em;
color: var(--red-glow);
}
.explore-card strong {
font-size: 1.25rem;
font-weight: 900;
letter-spacing: -0.01em;
}
.explore-card a > span:last-child {
font-size: 0.88rem;
line-height: 1.5;
color: var(--white-muted);
}
/* The Vault is the one card that sells something, so it gets the accent. */
.explore-card-gold a {
border-color: rgba(255, 42, 75, 0.42);
background: linear-gradient(145deg, rgba(255, 42, 75, 0.16), rgba(255, 255, 255, 0.03));
}
/* --- Venue rails -----------------------------------------------------------
45 venues. Stacked vertically that is a wall of text; as rails each group
costs one row of height and stays scannable. */
.venue-group + .venue-group {
margin-top: 1.6rem;
}
.venue-group-title {
margin: 0 0 0.7rem;
font-size: 0.78rem;
font-weight: 800;
letter-spacing: 0.16em;
text-transform: uppercase;
color: var(--red-glow);
}
.venue-rail {
display: grid;
grid-auto-flow: column;
grid-auto-columns: minmax(210px, 240px);
gap: 0.75rem;
margin: 0;
padding: 0 0 0.6rem;
list-style: none;
overflow-x: auto;
overscroll-behavior-x: contain;
scroll-snap-type: x proximity;
scrollbar-width: thin;
scrollbar-color: rgba(255, 255, 255, 0.22) transparent;
/* Fades the right edge so it reads as "there is more here" rather than as a
row that happens to end at the viewport. */
mask-image: linear-gradient(to right, #000 0, #000 92%, transparent 100%);
}
.venue-rail::-webkit-scrollbar {
height: 6px;
}
.venue-rail::-webkit-scrollbar-thumb {
border-radius: 999px;
background: rgba(255, 255, 255, 0.22);
}
.venue-card {
display: flex;
flex-direction: column;
gap: 0.22rem;
padding: 0.85rem 0.95rem;
border: 1px solid rgba(255, 255, 255, 0.12);
border-radius: 0.55rem;
background: linear-gradient(145deg, rgba(255, 255, 255, 0.06), rgba(255, 255, 255, 0.02));
scroll-snap-align: start;
}
.venue-card strong {
font-size: 0.94rem;
font-weight: 700;
line-height: 1.3;
}
.venue-city {
font-size: 0.8rem;
color: var(--white-muted);
}
.venue-note {
font-size: 0.76rem;
font-weight: 700;
color: var(--red-laser);
}
/* --- Homepage reel band ---------------------------------------------------- */
/* Slightly smaller than the /gallery rail: on the homepage this is a taste of
the gallery, not the destination itself. */
.reel-band .reel-rail {
grid-auto-columns: clamp(180px, 19vw, 240px);
}
.showcase-actions {
display: flex;
gap: 0.6rem;
flex-wrap: wrap;
margin-top: 1rem;
}
/* The booking CTA closes the page, so it keeps a divider above it — the other
tightened sections no longer need one now that they carry real content. */
.booking-cta {
border-top: 1px solid var(--line);
}
@media (max-width: 920px) {
.explore-grid,
.credentials-strip {
grid-template-columns: repeat(2, minmax(0, 1fr));
}
}
@media (max-width: 620px) {
/* Two across, not one: six full-width cards is most of a phone screen of
scrolling on its own, and these cards are short enough to pair up. */
.explore-grid,
.credentials-strip {
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: 0.6rem;
}
.explore-card a {
padding: 0.9rem 0.85rem 1rem;
gap: 0.25rem;
}
.explore-card strong {
font-size: 1.05rem;
}
.explore-card a > span:last-child {
font-size: 0.8rem;
}
.credential {
padding: 0.85rem 0.9rem;
}
/* Phones have the least room to spare, so the rhythm tightens again here. */
.section-tight {
padding: 1.9rem 0;
}
.section-heading-row {
align-items: flex-start;
}
.venue-rail {
grid-auto-columns: minmax(180px, 72vw);
}
}
/* Below this the two-column cards get too narrow to read. */
@media (max-width: 380px) {
.explore-grid,
.credentials-strip {
grid-template-columns: minmax(0, 1fr);
}
}
/* Footer links were 20px tall — under the 24x24 minimum WCAG 2.2 AA asks for on
touch targets, and genuinely fiddly to hit on a phone. Padding lifts them
past the threshold without changing the type size or the layout. */
.footer div a {
display: inline-block;
padding: 0.35rem 0.15rem;
}
/* ---------------------------------------------------------------------------
BOOK DJ — primary header CTA
The button carries both .header-cta and .btn-cta. .btn-cta comes later in
this file and sets `background: rgba(255,255,255,.05)`, so it was winning and
the button rendered as a near-black pill — the opposite of a primary action.
The doubled selector below outranks it.
Note --gold in :root is aliased to the brand red, so it cannot be used here;
these are the actual gold stops from the logo artwork.
--------------------------------------------------------------------------- */
.header-cta.btn-cta {
position: relative;
overflow: hidden;
isolation: isolate;
background: linear-gradient(135deg, #ffeaa9 0%, #e2ab52 36%, #b8762a 62%, #ffe08d 100%);
/* Dark ink on gold — white text on this gradient fails contrast badly. */
color: #2b1c05;
border: 1px solid rgba(255, 226, 154, 0.8);
text-shadow: 0 1px 0 rgba(255, 255, 255, 0.4);
box-shadow:
0 10px 28px rgba(224, 169, 79, 0.38),
inset 0 1px 0 rgba(255, 255, 255, 0.6);
/* Replaces the red ctaGlow pulse, which clashed with a gold face. */
animation: ctaGoldGlow 3s ease-in-out infinite;
}
/* Light sweep across the face, in the same spirit as the logo shine. */
.header-cta.btn-cta::after {
content: "";
position: absolute;
inset: 0;
z-index: -1;
background: linear-gradient(
115deg,
transparent 34%,
rgba(255, 255, 255, 0.85) 48%,
rgba(255, 246, 214, 0.5) 54%,
transparent 66%
);
background-size: 250% 100%;
background-repeat: no-repeat;
animation: ctaShine 4.5s ease-in-out infinite;
pointer-events: none;
}
.header-cta.btn-cta:hover,
.header-cta.btn-cta:focus-visible {
background: linear-gradient(135deg, #fff4c6 0%, #f0bd63 36%, #cc8730 62%, #ffeaa5 100%);
border-color: rgba(255, 244, 198, 0.95);
box-shadow:
0 14px 34px rgba(240, 189, 99, 0.5),
inset 0 1px 0 rgba(255, 255, 255, 0.7);
}
@keyframes ctaGoldGlow {
0%, 100% {
box-shadow:
0 10px 28px rgba(224, 169, 79, 0.34),
inset 0 1px 0 rgba(255, 255, 255, 0.6);
}
50% {
box-shadow:
0 12px 32px rgba(255, 205, 110, 0.55),
0 0 20px 2px rgba(255, 198, 92, 0.4),
inset 0 1px 0 rgba(255, 255, 255, 0.7);
}
}
@keyframes ctaShine {
0%, 62% { background-position: 135% 0; }
88%, 100% { background-position: -45% 0; }
}
@media (prefers-reduced-motion: reduce) {
.header-cta.btn-cta {
animation: none;
}
.header-cta.btn-cta::after {
animation: none;
opacity: 0;
}
}
/* ---------------------------------------------------------------------------
CONTENT CARD PAGES (/about, /spotlight, /privacy, /terms)
Two problems this fixes:
1. Card headings inherited the global h2 size — clamp(2rem, 6vw, 5rem), i.e.
up to 80px. That is a hero size. Inside a half-width card it wrapped
"Certified by A.R. Rahman's KM Music Conservatory." onto five lines and
made each card enormous.
2. The cards were a two-column grid. Their content lengths vary a lot (some
carry a photo, some are three lines), so one column ran far longer than
the other and left large empty panels beside the short cards.
Column flow packs them by height instead, so the two sides stay level and
no gaps open up.
--------------------------------------------------------------------------- */
.page-card-grid {
display: block;
column-count: 2;
column-gap: 1rem;
}
/* Every direct child of a column-flow container needs this, not just
`.page-card`. A multicol container has no `gap` in the block direction and
no row model, so each child has to carry its own bottom margin, be a
full-column-wide block, and refuse to be split across the column break.
The guard used to be written as `.page-card-grid .page-card`, which meant
any child that was not a `.page-card` — the vault cards, see below — got
none of it and stacked border-to-border.
`:not(.vault-grid)` because that variant is put back on a real grid below,
where these declarations would fight the grid rather than help it. */
.page-card-grid:not(.vault-grid) > * {
/* Stop a card being split across the column break. */
break-inside: avoid;
-webkit-column-break-inside: avoid;
display: inline-block;
width: 100%;
margin-bottom: 1rem;
}
/* --- The vault collection grids are the exception --------------------------
server/views.js renders them as ``,
so the column-flow rules above were catching them too, and broke them twice:
1. `display: block` defeated `.vault-grid`'s grid, so the three-up layout
collapsed into two content-packed columns.
2. The children are `.vault-card`, not `.page-card`, so before the guard
above was broadened they had neither `break-inside: avoid` nor a bottom
margin. Adjacent cards' 1px borders met with zero gap and read as one
doubled outline, and because `.vault-card` sets `overflow: hidden` it is
a monolithic box — the browser cannot split it, so a tall card spills out
of its column and lands on top of the next column's card instead.
Vault cards are uniform in shape, so they want a real grid with a real gap,
not the height-packed column flow the content cards on /about and
/spotlight are asking for. Two classes here so this outranks both the
single-class column rules above and `.vault-grid`'s own narrow-width rule.
Follow-up worth doing in markup: drop `page-card-grid` from that div in
server/views.js and these three overrides stop being necessary. */
.page-card-grid.vault-grid {
display: grid;
grid-template-columns: repeat(3, minmax(0, 1fr));
column-count: auto;
gap: 1rem;
/* Same intent the old grid rule carried: cards size to their own content
rather than stretching to the tallest in the row, so a short card does not
open a dead panel underneath itself. */
align-items: start;
}
.page-card h2 {
font-size: clamp(1.15rem, 1.7vw, 1.55rem);
line-height: 1.2;
margin-bottom: 0.55rem;
letter-spacing: -0.01em;
}
.page-card p {
font-size: 0.94rem;
line-height: 1.6;
}
.page-card .eyebrow {
margin-bottom: 0.35rem;
}
@media (max-width: 920px) {
.page-card-grid {
column-count: 1;
}
/* Same ladder the other three-up grids in this file use: three, then two,
then one. `.vault-grid`'s own rule drops straight from three to one at
this width, which leaves a single narrow card per row on a tablet. */
.page-card-grid.vault-grid {
grid-template-columns: repeat(2, minmax(0, 1fr));
}
}
@media (max-width: 620px) {
.page-card-grid.vault-grid {
grid-template-columns: 1fr;
}
}
/* The press-kit panel's heading was still picking up the global h2 clamp
(up to 80px), so "Everything a promoter needs before confirming the show."
ran to seven lines beside a four-item grid. Sized to sit with the panel. */
.epk-panel .section-heading h2 {
font-size: clamp(1.4rem, 2.4vw, 2.1rem);
line-height: 1.15;
}
.epk-panel .section-heading {
max-width: 46ch;
}
/* Same story on the vault pages. `.page-stack` is the intro block that sits
above the collection grid (`renderVaultPage` / the category page in
server/views.js) and its
was still on the global hero clamp — up to
80px of uppercase sitting directly above 1.16rem card headings, which read
as two unrelated pages stacked rather than one. Sized to lead the grid it
introduces, and capped so the line does not run the full 1180px shell. */
.page-stack h2 {
font-size: clamp(1.5rem, 3vw, 2.3rem);
line-height: 1.1;
margin-bottom: 0.6rem;
}
.page-stack p {
max-width: 62ch;
}
/* Optional outbound link on a content card (data/pages.json `link`). Sits
under the copy as a quiet inline action rather than a button, so it does not
compete with the page's real CTAs. */
.page-card .card-link {
display: inline-flex;
align-items: center;
gap: 0.35rem;
margin-top: 0.7rem;
padding: 0.3rem 0;
color: var(--red-laser);
font-size: 0.86rem;
font-weight: 800;
letter-spacing: 0.01em;
text-decoration: none;
border-bottom: 1px solid rgba(255, 92, 117, 0.4);
transition: color 160ms ease, border-color 160ms ease;
}
.page-card .card-link::after {
content: "\2197";
font-size: 0.95em;
}
.page-card .card-link:hover,
.page-card .card-link:focus-visible {
color: var(--white);
border-color: rgba(255, 255, 255, 0.6);
}
/* Site credit line under the footer links. Overrides the big uppercase
.footer p / .footer a styles so it reads as a quiet sign-off. */
.footer .footer-credit {
margin-top: 1.6rem;
color: var(--muted);
font-size: 0.8rem;
font-weight: 500;
text-transform: none;
letter-spacing: 0.02em;
}
.footer .footer-credit a {
color: var(--white);
font-weight: 700;
text-transform: none;
}
/* Direct-UPI checkout steps (shown inside .purchase-downloads after the
order is created). Each step is a bordered block so "pay" and "confirm"
read as two separate actions. */
.purchase-downloads .pay-step {
display: grid;
gap: 0.6rem;
padding: 1rem;
border: 1px solid var(--line);
border-radius: 12px;
background: rgba(255, 255, 255, 0.03);
}
.purchase-downloads .pay-step-title {
color: var(--white);
font-weight: 800;
text-transform: uppercase;
letter-spacing: 0.04em;
}
.purchase-downloads .upi-id {
display: flex;
flex-wrap: wrap;
align-items: center;
gap: 0.75rem;
word-break: break-all;
}
.purchase-downloads .upi-id .button {
width: auto;
}
.purchase-downloads .upi-qr {
width: min(220px, 100%);
height: auto;
border-radius: 8px;
background: #fff;
padding: 0.5rem;
}
/* ---------------------------------------------------------------------------
PAID COLLECTION LAUNCH (2026-10)
Exclusive set block, pack track counts, and the two-step UPI checkout
(QR -> UTR + screenshot).
------------------------------------------------------------------------- */
.vault-featured {
display: flex;
flex-wrap: wrap;
align-items: center;
justify-content: space-between;
gap: 1.5rem;
border: 1px solid var(--red-glow);
background:
radial-gradient(circle at 15% 0%, rgba(255, 42, 75, 0.22), transparent 60%),
var(--black-panel);
box-shadow: 0 0 0 1px rgba(255, 42, 75, 0.25), 0 24px 70px rgba(214, 0, 28, 0.18);
}
.vault-featured > div:first-child {
flex: 1 1 320px;
}
.vault-featured .vault-actions {
display: grid;
gap: 0.75rem;
justify-items: start;
}
.vault-featured .vault-actions strong {
font-size: 2rem;
color: var(--white);
}
.vault-tracks {
color: var(--red-laser);
font-weight: 700;
letter-spacing: 0.02em;
}
.pay-howto {
margin: 1rem 0;
padding-left: 1.25rem;
display: grid;
gap: 0.4rem;
color: var(--white);
}
.purchase-downloads .upi-qr {
width: min(240px, 100%);
justify-self: center;
}
.purchase-downloads .pay-summary {
margin: 0;
padding-left: 1.1rem;
color: var(--muted);
display: grid;
gap: 0.2rem;
}
.purchase-downloads .pay-step label {
display: grid;
gap: 0.4rem;
}
.purchase-downloads .pay-step input[type="file"] {
padding: 0.6rem;
}
.purchase-downloads .pay-status:empty {
display: none;
}
.purchase-downloads .pay-done {
border-color: var(--red-glow);
}
/* `.vault-card div` lays every inner block out as a row, which squeezed the
pack count / description beside the title. Stack the title block only; the
actions row below keeps its row layout. */
.vault-card > div:first-child {
flex-direction: column;
gap: 0.35rem;
margin-bottom: 1rem;
}
/* Page titles with a long single word ("Performance-Ready", "Moombahton") ran
off the right edge at the full-size h1, widening the page and leaving a dark
strip. views.js adds .title-long for those; overflow-wrap is the last resort
for anything longer still. */
h1.title-long {
font-size: clamp(2.2rem, 8vw, 6.5rem);
line-height: 0.9;
overflow-wrap: anywhere;
}
/* ---------------------------------------------------------------------------
WHATSAPP ORDERING (2026-10)
Home hero call to action, the "Buy opens WhatsApp" hint, the How buying
works card, and the hand-off panel shown after a Buy / Contact tap.
------------------------------------------------------------------------- */
.hero-cta {
display: flex;
flex-wrap: wrap;
gap: 0.75rem;
margin-top: 1.5rem;
}
.buy-hint {
color: var(--muted);
font-size: 0.95rem;
}
.buy-hint a,
.how-it-works a {
color: var(--red-laser);
font-weight: 700;
}
.how-it-works {
scroll-margin-top: 90px;
}
.how-it-works .pay-howto li {
line-height: 1.5;
}
.wa-handoff {
position: fixed;
z-index: 1000;
right: 1.25rem;
bottom: 1.25rem;
width: min(420px, calc(100vw - 2rem));
max-height: calc(100vh - 2.5rem);
overflow-y: auto;
padding: 1.25rem 1.25rem 1rem;
border: 1px solid var(--red-glow);
border-radius: 16px;
background: var(--black-panel);
box-shadow: 0 24px 70px rgba(0, 0, 0, 0.7), 0 0 0 1px rgba(255, 42, 75, 0.2);
}
.wa-handoff h2 {
font-size: 1.35rem;
margin: 0.25rem 2rem 0.5rem 0;
}
.wa-handoff h2:focus {
outline: none;
}
.wa-handoff p {
margin: 0 0 0.75rem;
}
.wa-handoff-actions {
display: flex;
flex-wrap: wrap;
gap: 0.5rem;
margin-bottom: 0.75rem;
}
/* z-index: the panel's "Check WhatsApp" label (.eyebrow) runs a fade-in
animation, which puts it in its own layer painted above this button, so its
full-width line swallowed clicks on the X. */
.wa-handoff-close {
position: absolute;
z-index: 2;
top: 0.6rem;
right: 0.6rem;
width: 36px;
height: 36px;
border: 1px solid var(--line);
border-radius: 50%;
background: transparent;
color: var(--white);
font-size: 1.3rem;
line-height: 1;
cursor: pointer;
}
@media (max-width: 600px) {
.wa-handoff {
right: 1rem;
left: 1rem;
bottom: 1rem;
width: auto;
}
.wa-handoff-actions .button {
flex: 1 1 100%;
text-align: center;
}
}
.footer .footer-follow {
margin: 0.5rem 0 1rem;
}
.footer .footer-follow a {
color: var(--white);
text-transform: none;
}
/* ---------------------------------------------------------------------------
GOLD CALL-OUT (2026-10)
The selling panel under the Vault / category headings: a gold-edged glass
panel, a headline in the same gold as the Buy Packs button with a slow light
sweep across the letters, one supporting sentence, and gold badges.
The headline gradient is painted through the text (background-clip), so
color is the fallback; the sweep stops for visitors who ask for reduced
motion.
------------------------------------------------------------------------- */
.gold-callout {
position: relative;
max-width: 52rem;
margin: 0.5rem 0 1.6rem;
padding: 1.15rem 1.35rem 1.2rem 1.6rem;
border: 1px solid rgba(226, 171, 82, 0.55);
border-radius: 18px;
background:
radial-gradient(120% 140% at 0% 0%, rgba(255, 234, 169, 0.16), transparent 60%),
linear-gradient(135deg, rgba(226, 171, 82, 0.14), rgba(184, 118, 42, 0.05) 55%, rgba(0, 0, 0, 0.25));
box-shadow: 0 0 0 1px rgba(255, 234, 169, 0.08) inset, 0 18px 50px rgba(224, 169, 79, 0.16);
overflow: hidden;
}
/* Gold edge down the left side. */
.gold-callout::before {
content: "";
position: absolute;
inset: 0 auto 0 0;
width: 5px;
background: linear-gradient(180deg, #ffeaa9, #e2ab52 45%, #b8762a);
}
.gold-callout-title {
margin: 0 0 0.5rem;
font-size: clamp(1.35rem, 4.2vw, 2.35rem);
font-weight: 900;
line-height: 1.08;
letter-spacing: 0.035em;
text-transform: uppercase;
color: #e2ab52;
background-image: linear-gradient(
100deg,
#b8762a 0%,
#e2ab52 20%,
#ffeaa9 36%,
#fffbe8 46%,
#ffeaa9 56%,
#e2ab52 72%,
#b8762a 100%
);
background-size: 250% 100%;
background-position: 100% 0;
-webkit-background-clip: text;
background-clip: text;
-webkit-text-fill-color: transparent;
filter: drop-shadow(0 2px 14px rgba(224, 169, 79, 0.4));
animation: gold-sweep 5.5s ease-in-out infinite;
}
.gold-callout-text {
margin: 0 0 0.9rem;
color: #f6ead0;
font-size: clamp(0.98rem, 2.3vw, 1.15rem);
font-weight: 600;
line-height: 1.5;
}
.gold-chips {
display: flex;
flex-wrap: wrap;
gap: 0.5rem;
margin: 0;
padding: 0;
list-style: none;
}
.gold-chips li {
padding: 0.32rem 0.8rem;
border: 1px solid rgba(226, 171, 82, 0.6);
border-radius: 999px;
background: rgba(226, 171, 82, 0.1);
color: #ffeaa9;
font-size: 0.78rem;
font-weight: 800;
letter-spacing: 0.07em;
text-transform: uppercase;
}
.gold-chips li::before {
content: "◆";
margin-right: 0.45em;
font-size: 0.7em;
vertical-align: 0.1em;
color: #e2ab52;
}
@keyframes gold-sweep {
0%,
100% { background-position: 100% 0; }
50% { background-position: 0 0; }
}
@media (prefers-reduced-motion: reduce) {
.gold-callout-title {
animation: none;
background-position: 40% 0;
}
}
/* ---------------------------------------------------------------------------
HERO BUTTONS + SMALL-PHONE HEADINGS (2026-10 layout audit)
The two buttons under the home hero and under every page heading came in
three different shapes — a dark pill (.btn-cta), a square glass box
(.button-glass) and a square red outline (.button-line) — and the home pair
sat flush against the credits paragraph. One shape for all of them now: the
main action in the same gold as the header's Buy Packs, the other a quiet
outline. Buttons inside cards and panels are untouched.
------------------------------------------------------------------------- */
.hero-cta {
margin: 1.4rem 0 1.9rem;
}
.hero-cta .button,
.page-hero .hero-actions .button {
display: inline-flex;
align-items: center;
justify-content: center;
min-height: 50px;
padding: 0 1.6rem;
border-radius: 999px;
font-size: 0.85rem;
font-weight: 800;
letter-spacing: 0.08em;
text-transform: uppercase;
}
.hero-cta .btn-cta,
.page-hero .hero-actions .btn-cta {
background: linear-gradient(135deg, #ffeaa9 0%, #e2ab52 36%, #b8762a 62%, #ffe08d 100%);
color: #2b1c05;
border: 1px solid rgba(255, 226, 154, 0.8);
text-shadow: 0 1px 0 rgba(255, 255, 255, 0.4);
box-shadow: 0 10px 28px rgba(224, 169, 79, 0.32), inset 0 1px 0 rgba(255, 255, 255, 0.6);
}
.hero-cta .btn-cta:hover,
.page-hero .hero-actions .btn-cta:hover {
background: linear-gradient(135deg, #fff1c2 0%, #ebb862 36%, #c4832f 62%, #ffe8a6 100%);
color: #2b1c05;
border-color: rgba(255, 234, 169, 0.95);
box-shadow: 0 14px 34px rgba(224, 169, 79, 0.45), inset 0 1px 0 rgba(255, 255, 255, 0.7);
}
.hero-cta .button:not(.btn-cta),
.page-hero .hero-actions .button:not(.btn-cta) {
background: rgba(255, 255, 255, 0.05);
color: var(--white);
border: 1px solid rgba(255, 255, 255, 0.3);
}
.hero-cta .button:not(.btn-cta):hover,
.page-hero .hero-actions .button:not(.btn-cta):hover {
border-color: rgba(255, 234, 169, 0.7);
color: #ffeaa9;
}
@media (max-width: 600px) {
.hero-cta .button,
.page-hero .hero-actions .button {
flex: 1 1 100%;
}
}
/* Small phones: the page heading's 56px minimum made a nine-letter word
("BOLLYWOOD") wider than a 360px screen, so the whole page scrolled
sideways. Let it shrink with the screen. Long-word titles keep their own,
smaller .title-long size. */
@media (max-width: 420px) {
.page-hero h1:not(.title-long) {
font-size: clamp(2.3rem, 12.5vw, 3.5rem);
}
}
/* "Everything, one tap away" grid: as many columns as there are cards. The
launch hides four of the six, and the fixed 3-column grid left the last
column empty. The numbers come from a counter, so they read 01, 02... for
whichever cards are visible instead of the old fixed "04", "05". */
.explore-grid {
grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
counter-reset: explore;
}
.explore-card {
counter-increment: explore;
}
.explore-index {
font-size: 0;
}
.explore-index::before {
content: counter(explore, decimal-leading-zero);
font-size: 0.72rem;
}
/* Bookings teaser buttons: same pill as the hero buttons. When "Book Now" is
hidden (booking switched off), the remaining button becomes the gold one so
the section still has a clear action. */
.teaser-actions .button {
display: inline-flex;
align-items: center;
justify-content: center;
min-height: 50px;
padding: 0 1.6rem;
border-radius: 999px;
font-size: 0.85rem;
font-weight: 800;
letter-spacing: 0.08em;
text-transform: uppercase;
}
.teaser-actions .btn-cta,
.teaser-actions .button:only-child {
background: linear-gradient(135deg, #ffeaa9 0%, #e2ab52 36%, #b8762a 62%, #ffe08d 100%);
color: #2b1c05;
border: 1px solid rgba(255, 226, 154, 0.8);
text-shadow: 0 1px 0 rgba(255, 255, 255, 0.4);
box-shadow: 0 10px 28px rgba(224, 169, 79, 0.32), inset 0 1px 0 rgba(255, 255, 255, 0.6);
}
/* Inside the WhatsApp hand-off panel the label needs no entrance animation,
and it must stop short of the close button. */
.wa-handoff .eyebrow {
animation: none;
opacity: 1;
margin-right: 2.75rem;
}