/* ==========================================================================
Wedding site — shared theme
Framework-free. Rich cream canvas, pink + forest green accents. Mobile-first.
--------------------------------------------------------------------------
FONTS: Uses Google Fonts (one in each page's ). The font
stacks below fall back to system serif/sans if the network is blocked.
To go fully offline / zero external requests, remove the tags in
the HTML and the page will still look fine on the system fallback fonts.
========================================================================== */
:root {
/* Forest greens */
--green-900: #1e3a2b;
--green-700: #2f5d3f;
--green-500: #3b6b4c;
--green-100: #e6efe7;
/* Pinks */
--pink-500: #d16b86;
--pink-300: #e8a7b3;
--pink-100: #f7dde2;
--pink-050: #fdeef0;
/* Neutrals — a bright warm off-white is the dominant canvas */
--cream: #faf8f4; /* bright warm off-white — page background */
--cream-deep: #efeae2; /* soft greige — footer */
--surface: #ffffff; /* clean white — cards & panels lift off the canvas */
--white: #ffffff;
--ink: #23302a;
--ink-soft: #4a5a50;
--hairline: rgba(35, 48, 42, 0.14); /* thin editorial rules */
/* Accents */
--gold: #c9a14a;
/* Type */
--serif: "Cormorant Garamond", "Iowan Old Style", "Palatino Linotype",
Palatino, Georgia, "Times New Roman", serif;
--sans: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
Helvetica, Arial, sans-serif;
/* Layout */
--maxw: 1240px;
--radius: 16px;
--shadow: 0 10px 30px rgba(30, 58, 43, 0.10);
--shadow-sm: 0 4px 14px rgba(30, 58, 43, 0.08);
}
/* ----- Reset-ish ----- */
*,
*::before,
*::after {
box-sizing: border-box;
}
html {
scroll-behavior: smooth;
}
body {
margin: 0;
font-family: var(--sans);
color: var(--ink);
background-color: var(--cream);
line-height: 1.65;
-webkit-font-smoothing: antialiased;
text-rendering: optimizeLegibility;
}
img {
max-width: 100%;
display: block;
}
a {
color: var(--green-700);
text-decoration: none;
}
a:hover {
text-decoration: underline;
}
h1,
h2,
h3 {
font-family: var(--serif);
font-weight: 600;
line-height: 1.1;
color: var(--green-900);
margin: 0 0 0.4em;
}
h1 {
font-size: clamp(2.6rem, 7vw, 4.6rem);
letter-spacing: 0.5px;
}
h2 {
font-size: clamp(1.9rem, 4.5vw, 2.8rem);
}
h3 {
font-size: 1.35rem;
}
p {
margin: 0 0 1rem;
}
/* Visible keyboard focus for accessibility */
a:focus-visible,
button:focus-visible,
.btn:focus-visible {
outline: 3px solid var(--pink-500);
outline-offset: 2px;
border-radius: 4px;
}
/* ----- Layout helpers ----- */
.container {
width: 100%;
max-width: var(--maxw);
margin-inline: auto;
padding-inline: 20px;
}
.section {
padding: 64px 0;
}
.center {
text-align: center;
}
.muted {
color: var(--ink-soft);
}
/* Section heading with little leaf accents */
.section-title {
text-align: center;
margin-bottom: 8px;
}
.section-title::after {
content: "❧";
display: block;
color: var(--pink-500);
font-size: 1.7rem;
margin-top: 6px;
}
.section-intro {
text-align: center;
max-width: 62ch;
margin: 0 auto 40px;
color: var(--ink-soft);
}
/* ==========================================================================
Header / nav (identical markup on every page)
========================================================================== */
.site-header {
position: sticky;
top: 0;
z-index: 50;
background: rgba(250, 248, 244, 0.9);
backdrop-filter: blur(8px);
border-bottom: 1px solid var(--pink-100);
}
.nav {
display: flex;
flex-wrap: wrap;
align-items: center;
justify-content: space-between;
gap: 8px 18px;
padding: 12px 20px;
max-width: var(--maxw);
margin-inline: auto;
}
.nav__brand {
font-family: var(--serif);
font-size: 1.35rem;
font-weight: 600;
color: var(--green-900);
white-space: nowrap;
}
.nav__brand:hover {
text-decoration: none;
}
.nav__links {
display: flex;
flex-wrap: wrap;
align-items: center;
gap: 6px 4px;
list-style: none;
margin: 0;
padding: 0;
}
.nav__links a {
display: inline-block;
padding: 8px 14px;
border-radius: 999px;
color: var(--green-700);
font-weight: 500;
font-size: 0.97rem;
}
.nav__links a:hover {
background: var(--green-100);
text-decoration: none;
}
.nav__links a[aria-current="page"] {
background: var(--green-700);
color: var(--white);
}
.nav__links a.nav__cta {
position: relative;
overflow: hidden;
background: var(--pink-500);
color: var(--white);
font-weight: 700;
font-size: 1rem;
letter-spacing: 0.01em;
margin-left: 10px;
padding: 9px 20px;
box-shadow: 0 3px 12px rgba(209, 107, 134, 0.5);
transition: transform 0.12s ease, box-shadow 0.2s ease, background 0.2s ease;
}
.nav__links a.nav__cta:hover {
background: var(--pink-300);
color: var(--green-900);
transform: translateY(-1px);
box-shadow: 0 5px 16px rgba(209, 107, 134, 0.55);
}
/* Periodic light sweep across the RSVP button */
.nav__links a.nav__cta::before {
content: "";
position: absolute;
top: 0;
left: -150%;
width: 60%;
height: 100%;
background: linear-gradient(100deg, transparent 0%, rgba(255, 255, 255, 0.5) 50%, transparent 100%);
transform: skewX(-20deg);
pointer-events: none;
animation: cta-shimmer 4s ease-in-out infinite;
}
@keyframes cta-shimmer {
0%, 18% { left: -150%; }
58%, 100% { left: 160%; }
}
@media (prefers-reduced-motion: reduce) {
.nav__links a.nav__cta::before { animation: none; }
}
.nav__links a.nav__cta[aria-current="page"] {
background: var(--pink-500);
}
/* ==========================================================================
Buttons
========================================================================== */
.btn {
display: inline-block;
padding: 13px 28px;
border-radius: 999px;
font-weight: 600;
font-size: 1rem;
cursor: pointer;
border: 2px solid transparent;
transition: transform 0.08s ease, background 0.2s ease, color 0.2s ease;
}
.btn:hover {
text-decoration: none;
transform: translateY(-1px);
}
.btn--primary {
background: var(--green-700);
color: var(--white);
}
.btn--primary:hover {
background: var(--green-500);
color: var(--white);
}
.btn--pink {
background: var(--pink-500);
color: var(--white);
}
.btn--pink:hover {
background: var(--pink-300);
color: var(--green-900);
}
.btn--ghost {
background: transparent;
color: var(--green-900);
border-color: var(--green-700);
}
.btn--ghost:hover {
background: var(--green-700);
color: var(--white);
}
.btn-row {
display: flex;
flex-wrap: wrap;
gap: 14px;
justify-content: center;
}
/* ==========================================================================
Content blocks (travel / stay / explore)
========================================================================== */
.prose {
max-width: 880px;
margin-inline: auto;
}
.info-block {
background: var(--surface);
border: 1px solid var(--pink-100);
border-left: 5px solid var(--green-500);
border-radius: 12px;
padding: 22px 24px;
margin-bottom: 22px;
box-shadow: var(--shadow-sm);
}
.info-block > h3 {
margin-top: 0;
display: flex;
align-items: center;
gap: 10px;
}
.info-block ul {
margin: 0;
padding-left: 1.2em;
}
.info-block li {
margin-bottom: 8px;
}
.info-block li:last-child {
margin-bottom: 0;
}
/* Highlighted callout (hotel block, important notes) */
.callout {
background: var(--pink-050);
border: 1px dashed var(--pink-300);
border-radius: 12px;
padding: 20px 24px;
margin-bottom: 28px;
}
.callout--note {
background: var(--green-100);
border-color: var(--green-500);
}
.callout strong {
color: var(--green-900);
}
/* Quiet inline note — a thin rule instead of a filled box */
.note-lead {
max-width: 880px;
margin: 0 auto 28px;
padding: 2px 0 2px 16px;
border-left: 2px solid var(--green-500);
color: var(--ink-soft);
font-size: 0.95rem;
}
.note-lead strong { color: var(--green-900); }
/* Placeholder token styling so [BRACKETS] are easy to spot while editing */
.ph {
background: #fff3cd;
border-bottom: 1px dashed var(--gold);
padding: 0 3px;
border-radius: 3px;
font-style: normal;
}
/* Pill tags (e.g. ~3 hrs, $$, veg) */
.tag {
display: inline-block;
font-size: 0.75rem;
font-weight: 600;
letter-spacing: 0.3px;
background: var(--green-100);
color: var(--green-700);
padding: 2px 10px;
border-radius: 999px;
margin-left: 6px;
vertical-align: middle;
}
/* ==========================================================================
RSVP form embed
========================================================================== */
.form-wrap {
background: var(--surface);
border: 1px solid var(--pink-100);
border-radius: var(--radius);
padding: 14px;
box-shadow: var(--shadow-sm);
max-width: 720px;
margin: 0 auto 24px;
}
.form-wrap iframe {
width: 100%;
min-height: 900px;
border: 0;
border-radius: 8px;
}
/* ==========================================================================
Map embed (venue)
========================================================================== */
.map-embed {
max-width: 880px;
margin: 0 auto;
border-radius: var(--radius);
overflow: hidden;
box-shadow: var(--shadow);
border: 6px solid var(--surface);
line-height: 0;
}
.map-embed iframe {
display: block;
width: 100%;
height: 420px;
border: 0;
}
@media (max-width: 560px) {
.map-embed iframe {
height: 320px;
}
}
/* ==========================================================================
Footer
========================================================================== */
.site-footer {
background: var(--cream-deep);
color: var(--ink);
text-align: center;
padding: 48px 20px;
margin-top: 40px;
border-top: 1px solid var(--pink-100);
}
.site-footer a {
color: var(--green-700);
}
.site-footer .footer-names {
font-family: var(--serif);
font-size: 1.8rem;
color: var(--green-900);
margin-bottom: 6px;
}
.site-footer .footer-meta {
color: var(--ink-soft);
margin-bottom: 18px;
}
.footer-nav {
list-style: none;
display: flex;
flex-wrap: wrap;
justify-content: center;
gap: 6px 18px;
padding: 0;
margin: 0 0 18px;
}
.footer-nav a {
color: var(--green-700);
font-size: 0.95rem;
}
.footer-fineprint {
color: var(--ink-soft);
font-size: 0.82rem;
opacity: 0.8;
}
/* ==========================================================================
Responsive tweaks
========================================================================== */
@media (max-width: 560px) {
.section {
padding: 48px 0;
}
.nav {
justify-content: center;
}
.nav__brand {
width: 100%;
text-align: center;
}
.nav__links {
justify-content: center;
}
}
/* Respect reduced-motion preference */
@media (prefers-reduced-motion: reduce) {
html {
scroll-behavior: auto;
}
* {
transition: none !important;
}
}
/* ==========================================================================
Homepage — editorial / type-led layout
Scoped to .lede and .editorial, which only appear on index.html, so the
content pages (which use .section / .info-block) are unaffected.
========================================================================== */
/* Hero / lede — full-bleed photo banner behind the names.
A dark gradient is laid over the photo so the type stays legible. */
.lede {
position: relative;
text-align: center;
max-width: none;
margin: 0;
padding: clamp(120px, 22vh, 220px) 24px clamp(96px, 18vh, 180px);
background-image:
linear-gradient(180deg, rgba(16, 22, 18, 0.56) 0%, rgba(16, 22, 18, 0.46) 45%, rgba(16, 22, 18, 0.66) 100%),
url("photos/bangalore-backdrop.jpg");
background-size: cover;
background-position: center 38%;
}
.lede__kicker {
margin: 0 0 30px;
font-size: 0.72rem;
font-weight: 600;
text-transform: uppercase;
letter-spacing: 0.34em;
color: rgba(255, 255, 255, 0.92);
}
.lede__names {
margin: 0;
font-family: var(--serif);
font-weight: 500;
font-size: clamp(3rem, 9vw, 6.4rem);
line-height: 1.04;
color: #fff;
text-shadow: 0 2px 24px rgba(0, 0, 0, 0.38);
}
.lede__amp {
font-style: italic;
font-weight: 400;
color: #fff;
}
.lede__meta {
margin: 30px 0 0;
font-size: 0.82rem;
font-weight: 600;
text-transform: uppercase;
letter-spacing: 0.2em;
color: rgba(255, 255, 255, 0.9);
text-shadow: 0 1px 12px rgba(0, 0, 0, 0.4);
}
/* Editorial reading column */
.editorial {
max-width: 980px;
margin: 0 auto;
padding: 0 24px;
}
/* Centered serif intro line */
.ed-intro {
padding: 8px 0 48px;
text-align: center;
border-bottom: 1px solid var(--hairline);
}
.ed-intro .btn {
margin-top: 26px;
}
.ed-intro p {
max-width: none;
margin: 0 auto;
text-align: center;
font-family: var(--serif);
font-size: clamp(1.35rem, 2.6vw, 1.75rem);
line-height: 1.5;
color: var(--green-900);
}
/* Label | body block */
.block {
display: grid;
grid-template-columns: 140px 1fr;
gap: 16px 32px;
padding: 52px 0;
border-bottom: 1px solid var(--hairline);
}
.block:last-child {
border-bottom: 0;
}
.block__label {
margin: 6px 0 0;
font-size: 0.76rem;
font-weight: 700;
text-transform: uppercase;
letter-spacing: 0.22em;
color: var(--green-700);
}
.block__body {
max-width: 62ch;
}
.block__body > :first-child { margin-top: 0; }
.block__body > :last-child { margin-bottom: 0; }
.block__body p {
font-size: 1.06rem;
line-height: 1.75;
color: var(--ink);
}
.block__body .venue-name {
font-family: var(--serif);
font-size: 1.35rem;
line-height: 1.4;
color: var(--green-900);
}
/* Our Story — long-form narrative with photos woven through */
.story {
max-width: 720px;
margin-inline: auto;
}
.story p {
font-size: 1.1rem;
line-height: 1.85;
color: var(--ink);
}
.story__lead {
font-family: var(--serif);
font-size: clamp(1.4rem, 3vw, 1.9rem);
line-height: 1.5;
color: var(--green-900);
margin-bottom: 1.3rem;
}
.story figure {
margin: 40px 0;
}
.story figure img {
width: 100%;
border-radius: 12px;
box-shadow: var(--shadow-sm);
}
/* Portrait shots shouldn't tower over the column */
.story figure.story__portrait img {
max-width: 460px;
margin-inline: auto;
}
.story figcaption {
margin-top: 12px;
text-align: center;
font-family: var(--serif);
font-style: italic;
font-size: 1.05rem;
line-height: 1.5;
color: var(--ink-soft);
}
/* The Day — schedule list */
.schedule {
list-style: none;
margin: 0;
padding: 0;
}
.schedule li {
display: flex;
justify-content: space-between;
align-items: flex-start;
gap: 18px;
padding: 15px 0;
border-bottom: 1px solid var(--hairline);
}
.schedule li:last-child { border-bottom: 0; }
.schedule__name {
display: inline-flex;
align-items: center;
gap: 0.3em;
font-family: var(--serif);
font-size: 1.25rem;
color: var(--green-900);
}
.schedule__qual {
font-size: 1rem;
font-style: italic;
color: var(--ink-soft);
}
.schedule__when {
display: flex;
flex-direction: column;
align-items: flex-end;
gap: 2px;
text-align: right;
}
.schedule__day {
font-size: 0.92rem;
font-weight: 600;
letter-spacing: 0.02em;
color: var(--green-700);
}
/* Meal time sits under the venue and reads as a clear sub-detail,
so it can't be mistaken for the event's start time */
.schedule__sub-time {
margin-top: 4px;
font-size: 0.8rem;
font-style: italic;
letter-spacing: 0.02em;
color: var(--ink-soft);
}
.schedule__where {
font-size: 0.75rem;
letter-spacing: 0.06em;
text-transform: uppercase;
color: var(--ink-soft);
}
/* Venue map — sits in the body column; made tall so the info card
(top-left) drops clear of the centred pin */
.editorial .map-embed {
position: relative;
border: 1px solid var(--hairline);
border-radius: 2px;
box-shadow: none;
max-width: 100%;
margin-top: 8px;
}
.editorial .map-embed iframe { height: 540px; }
/* Recenter control floated over the map (our button on top of Google's iframe) */
.map-recenter {
position: absolute;
top: 14px;
right: 14px;
z-index: 2;
display: inline-flex;
align-items: center;
gap: 6px;
padding: 10px 18px;
border-radius: 999px;
background: var(--green-700);
color: var(--white);
font-size: 0.88rem;
font-weight: 700;
letter-spacing: 0.01em;
box-shadow: 0 3px 12px rgba(30, 58, 43, 0.45);
}
.map-recenter:hover {
background: var(--green-900);
color: var(--white);
text-decoration: none;
}
/* Plan your trip — link list */
.linklist {
list-style: none;
margin: 0;
padding: 0;
}
.linklist li { border-bottom: 1px solid var(--hairline); }
.linklist li:last-child { border-bottom: 0; }
.linklist a {
display: flex;
justify-content: space-between;
align-items: baseline;
gap: 18px;
padding: 16px 0;
color: var(--green-900);
}
.linklist a:hover { text-decoration: none; }
.linklist a:hover .linklist__t { text-decoration: underline; }
.linklist__t {
font-family: var(--serif);
font-size: 1.3rem;
}
.linklist__d {
font-size: 0.9rem;
color: var(--ink-soft);
text-align: right;
}
.block__body .btn { margin-top: 20px; }
@media (max-width: 680px) {
.lede { padding: 96px 20px 84px; }
.block {
grid-template-columns: 1fr;
gap: 12px;
padding: 44px 0;
}
.block__label { margin-bottom: 2px; }
}
@media (max-width: 440px) {
.schedule li,
.linklist a {
flex-direction: column;
gap: 3px;
}
.schedule__when { align-items: flex-start; text-align: left; }
.linklist__d { text-align: left; }
}
/* Simple bulleted list inside an editorial block (e.g. What to Wear) */
.block__body .bullets {
margin: 0;
padding-left: 1.2em;
}
.block__body .bullets li {
margin-bottom: 10px;
line-height: 1.7;
}
.block__body .bullets li:last-child {
margin-bottom: 0;
}
/* ==========================================================================
Info bubble (e.g. "what is a mehendi") — hover / tap tooltip, no JS
========================================================================== */
.hint {
position: relative;
display: inline-block;
margin-left: 8px;
vertical-align: middle;
cursor: help;
}
.hint__icon {
display: inline-flex;
align-items: center;
justify-content: center;
width: 24px;
height: 24px;
border-radius: 50%;
border: 1.5px solid var(--green-500);
background: var(--green-100);
color: var(--green-700);
font-family: var(--sans);
font-size: 0.92rem;
font-weight: 700;
font-style: normal;
}
.hint__bubble {
position: absolute;
left: 50%;
transform: translateX(-50%);
top: calc(100% + 8px);
width: min(290px, 78vw);
background: var(--green-900);
color: var(--cream);
padding: 11px 14px;
border-radius: 10px;
font-family: var(--sans);
font-size: 0.82rem;
font-weight: 400;
line-height: 1.5;
letter-spacing: normal;
text-align: left;
box-shadow: 0 8px 24px rgba(30, 58, 43, 0.35);
opacity: 0;
visibility: hidden;
transition: opacity 0.15s ease;
z-index: 6;
}
.hint:hover .hint__bubble,
.hint:focus .hint__bubble,
.hint:focus-within .hint__bubble {
opacity: 1;
visibility: visible;
}
/* ==========================================================================
Origin switch (travel page) — CSS-only radio pills, no JS.
Pick where you're travelling from; tailored content shows page-wide.
========================================================================== */
.tz-radio {
position: absolute;
opacity: 0;
pointer-events: none;
}
.tz-switch {
display: flex;
flex-wrap: wrap;
align-items: center;
justify-content: center;
text-align: center;
gap: 12px 14px;
max-width: 880px;
margin: 0 auto 28px;
padding: 16px 20px;
background: var(--green-100);
border-radius: 12px;
}
.tz-switch__label {
flex-basis: 100%;
font-weight: 600;
color: var(--green-900);
}
.tz-switch__pills {
display: flex;
flex-wrap: wrap;
justify-content: center;
gap: 8px;
}
.tz-switch label {
padding: 8px 18px;
border-radius: 999px;
border: 1px solid var(--green-500);
background: var(--white);
color: var(--green-700);
font-weight: 600;
font-size: 0.9rem;
cursor: pointer;
transition: background 0.15s ease, color 0.15s ease;
}
.tz-switch label:hover {
background: var(--green-100);
}
/* Active pill reflects the checked radio */
#tz-pt:checked ~ .tz-switch label[for="tz-pt"],
#tz-et:checked ~ .tz-switch label[for="tz-et"],
#tz-uk:checked ~ .tz-switch label[for="tz-uk"] {
background: var(--green-700);
color: var(--white);
border-color: var(--green-700);
}
#tz-pt:focus-visible ~ .tz-switch label[for="tz-pt"],
#tz-et:focus-visible ~ .tz-switch label[for="tz-et"],
#tz-uk:focus-visible ~ .tz-switch label[for="tz-uk"] {
outline: 2px solid var(--pink-500);
outline-offset: 2px;
}
/* Origin-specific content is hidden until its origin is the chosen one.
`revert` restores each element's natural display (list-item, block, …). */
.tz-only {
display: none;
}
#tz-pt:checked ~ .prose .tz-only[data-tz="pt"],
#tz-et:checked ~ .prose .tz-only[data-tz="et"],
#tz-uk:checked ~ .prose .tz-only[data-tz="uk"] {
display: revert;
}
/* ==========================================================================
Photo galleries (explore page)
========================================================================== */
.hero-photo {
margin: 0 0 32px;
}
.hero-photo img {
width: 100%;
aspect-ratio: 16 / 7;
object-fit: cover;
border-radius: 12px;
box-shadow: var(--shadow-sm);
}
.gallery {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
gap: 14px;
margin-top: 18px;
}
.gallery figure {
margin: 0;
}
.gallery img {
width: 100%;
aspect-ratio: 4 / 3;
object-fit: cover;
border-radius: 10px;
box-shadow: var(--shadow-sm);
}
.gallery figcaption {
margin-top: 6px;
font-size: 0.85rem;
color: var(--ink-soft);
}
/* Image carousel (e.g. "what to eat") — JS slider with prev/next + auto-rotate */
.carousel {
position: relative;
margin-top: 18px;
}
.carousel__viewport {
position: relative;
overflow: hidden;
border-radius: 12px;
box-shadow: var(--shadow-sm);
/* Promote to its own layer so the rounded clip reliably hides
the adjacent (transformed) slides — no edge bleed. */
transform: translateZ(0);
}
.carousel__track {
display: flex;
margin: 0;
padding: 0;
list-style: none;
transition: transform 0.5s ease;
}
.carousel__slide {
flex: 0 0 100%;
margin: 0;
}
.carousel__slide img {
width: 100%;
aspect-ratio: 3 / 2;
object-fit: cover;
object-position: center;
display: block;
}
/* Prev / next controls, floated over the image */
.carousel__btn {
position: absolute;
top: 50%;
transform: translateY(-50%);
z-index: 2;
display: flex;
align-items: center;
justify-content: center;
width: 42px;
height: 42px;
padding: 0;
border: none;
border-radius: 50%;
background: rgba(255, 255, 255, 0.9);
color: var(--green-900);
font-size: 1.6rem;
line-height: 1;
cursor: pointer;
box-shadow: 0 2px 10px rgba(30, 58, 43, 0.3);
}
.carousel__btn:hover {
background: #fff;
}
.carousel__btn--prev { left: 12px; }
.carousel__btn--next { right: 12px; }
.carousel__caption {
margin: 10px 0 0;
font-size: 0.88rem;
color: var(--ink-soft);
text-align: center;
}
.carousel__dots {
display: flex;
justify-content: center;
gap: 8px;
margin-top: 10px;
}
.carousel__dot {
width: 9px;
height: 9px;
padding: 0;
border: none;
border-radius: 50%;
background: var(--green-100);
cursor: pointer;
}
.carousel__dot[aria-current="true"] {
background: var(--green-700);
}
/* If JS is off, fall back to a simple stacked view of all slides */
.carousel:not([data-ready]) .carousel__track {
flex-direction: column;
gap: 12px;
}
.carousel:not([data-ready]) .carousel__btn,
.carousel:not([data-ready]) .carousel__dots {
display: none;
}
.carousel:not([data-ready]) .carousel__slide img {
border-radius: 12px;
}
/* One-per-line restaurant list */
.restaurant-list {
margin: 0;
padding-left: 1.2em;
}
.restaurant-list li {
margin-bottom: 10px;
}
.restaurant-list li:last-child {
margin-bottom: 0;
}
/* Make the map links obviously clickable with a trailing link glyph */
.restaurant-list a {
font-weight: 600;
}
.restaurant-list a::after {
content: "↗";
margin-left: 3px;
font-size: 0.85em;
color: var(--pink-500);
}
/* ==========================================================================
Cross-page flow — full-bleed "Up next" band so each page bleeds into the
next as you scroll (Home → Travel → Stay → Explore → RSVP).
========================================================================== */
.next-up {
width: 100vw;
margin-left: calc(50% - 50vw);
margin-top: 72px;
background-size: cover;
background-position: center;
}
/* Each band previews its destination with that page's banner photo. */
.next-up--story {
background-image:
linear-gradient(180deg, rgba(16, 22, 18, 0.62) 0%, rgba(16, 22, 18, 0.54) 45%, rgba(16, 22, 18, 0.74) 100%),
url("photos/golden-gate-bridge.webp");
background-position: center 60%;
}
.next-up--travel {
background-image:
linear-gradient(180deg, rgba(12, 18, 26, 0.62) 0%, rgba(12, 18, 26, 0.54) 45%, rgba(12, 18, 26, 0.74) 100%),
url("photos/blr-airport.jpg");
background-position: center 62%;
}
.next-up--stay {
background-image:
linear-gradient(180deg, rgba(16, 22, 18, 0.62) 0%, rgba(16, 22, 18, 0.54) 45%, rgba(16, 22, 18, 0.74) 100%),
url("photos/bangalore-city.jpg");
background-position: center 58%;
}
.next-up--explore {
background-image:
linear-gradient(180deg, rgba(16, 22, 18, 0.62) 0%, rgba(16, 22, 18, 0.54) 45%, rgba(16, 22, 18, 0.74) 100%),
url("photos/lalbagh-botanical.jpg");
background-position: center 55%;
}
.next-up--rsvp {
background-image:
linear-gradient(180deg, rgba(16, 22, 18, 0.62) 0%, rgba(16, 22, 18, 0.54) 45%, rgba(16, 22, 18, 0.74) 100%),
url("photos/bangalore-backdrop.jpg");
}
/* On the editorial homepage the band follows the reading column directly. */
.editorial + .next-up {
margin-top: 0;
}
.next-up__link {
display: block;
max-width: var(--maxw);
margin-inline: auto;
padding: clamp(48px, 8vw, 80px) 24px;
text-align: center;
color: var(--cream);
}
.next-up__link:hover {
text-decoration: none;
}
.next-up__label {
display: block;
margin-bottom: 12px;
font-size: 0.72rem;
font-weight: 700;
text-transform: uppercase;
letter-spacing: 0.26em;
color: var(--pink-300);
}
.next-up__title {
display: block;
font-family: var(--serif);
font-size: clamp(1.9rem, 4.5vw, 2.9rem);
line-height: 1.1;
color: #fff;
text-shadow: 0 2px 24px rgba(0, 0, 0, 0.4);
}
.next-up__link:hover .next-up__title {
text-decoration: underline;
}
.next-up__cue {
display: block;
margin-top: 10px;
font-size: 0.95rem;
color: rgba(255, 255, 255, 0.85);
}
/* ==========================================================================
Page hero — full-bleed title-background panel for content pages,
mirroring the homepage hero (a dark gradient keeps the type legible).
========================================================================== */
.page-hero {
position: relative;
width: 100vw;
margin-left: calc(50% - 50vw);
padding: clamp(96px, 17vh, 180px) 24px clamp(72px, 12vh, 130px);
text-align: center;
background-size: cover;
background-position: center;
}
.page-hero--travel {
background-image:
linear-gradient(180deg, rgba(12, 18, 26, 0.60) 0%, rgba(12, 18, 26, 0.52) 45%, rgba(12, 18, 26, 0.72) 100%),
url("photos/blr-airport.jpg");
background-position: center 62%;
}
.page-hero--stay {
background-image:
linear-gradient(180deg, rgba(16, 22, 18, 0.60) 0%, rgba(16, 22, 18, 0.52) 45%, rgba(16, 22, 18, 0.72) 100%),
url("photos/bangalore-city.jpg");
background-position: center 58%;
}
.page-hero--explore {
background-image:
linear-gradient(180deg, rgba(16, 22, 18, 0.58) 0%, rgba(16, 22, 18, 0.50) 45%, rgba(16, 22, 18, 0.70) 100%),
url("photos/lalbagh-botanical.jpg");
background-position: center 55%;
}
.page-hero--story {
background-image:
linear-gradient(180deg, rgba(16, 22, 18, 0.52) 0%, rgba(16, 22, 18, 0.46) 45%, rgba(16, 22, 18, 0.66) 100%),
url("photos/golden-gate-bridge.webp");
background-position: center 60%;
}
.page-hero__inner {
max-width: 760px;
margin-inline: auto;
}
.page-hero .section-title {
color: #fff;
text-shadow: 0 2px 24px rgba(0, 0, 0, 0.4);
}
.page-hero .section-title::after {
color: var(--pink-300);
}