, not
a heading, so the document outline is unchanged. `!important` on the margin
for the same reason as .dv5-sub below. */
main.destination-city.modernpage .dv5-eyebrow {
--font-body: var(--v5-font-label, 'Inter', 'Segoe UI', sans-serif);
font-family: var(--v5-font-label, 'Inter', 'Segoe UI', sans-serif);
font-size: 0.82rem;
font-weight: 600;
letter-spacing: 0.24em;
text-transform: uppercase;
color: var(--v5-olive-700, #4a5e2f);
line-height: 1.4;
text-align: center;
margin: 0 auto 12px !important;
}
main.destination-city.modernpage .dv5-eyebrow::after {
content: '';
display: block;
width: 46px;
height: 1px;
margin: 9px auto 0;
background: var(--v5-gold, #b9995b);
}
/* Section subtitle under the title: human line, stone, centered.
The gap was 18px under a 41px title (0px in the tabbed panels, where a
sibling margin collapsed), so the line read as stuck to the heading
rather than as its own thought. Measured and opened up (bos, 6 Agu);
`!important` because modern-base.css sets margins on main.modernpage p
with the same weapon. */
main.destination-city.modernpage .dv5-sub {
font-family: var(--v5-font-body, 'Lora', Georgia, serif);
font-size: 1.02rem;
line-height: 1.6;
font-style: italic;
color: var(--v5-stone, #5b574d);
text-align: center;
max-width: 62ch;
/* Scales with the title above it: the heading is clamp(1.85-2.7rem), so
a fixed margin read as 26px on desktop but only 14px on a phone, where
the title shrinks. */
margin: clamp(14px, 1.6vw, 22px) auto 0 !important;
}
/* The heading block holds the pair, so its own bottom margin is what
separates the subtitle from the content below it. */
main.destination-city.modernpage .heading:has(.dv5-sub) {
margin-bottom: 34px;
}
/* The search bar writes its title as a bare h3 with no .heading wrapper, and
its h3 is smaller than the h2s, so it needs the gap spelled out to land on
the same rhythm as the rest. */
main.destination-city.modernpage .dest-search-bar__title {
margin-bottom: 0;
line-height: 1.2;
}
main.destination-city.modernpage .dest-search-bar__title + .dv5-sub {
margin-top: clamp(12px, 1.2vw, 18px) !important;
}
main.destination-city.modernpage .dest-search-bar__title + .dv5-sub {
margin-bottom: 26px !important;
}
/* Section subtitles: stone, comfortable measure */
main.destination-city.modernpage .testimonial-luxury__subtitle,
main.destination-city.modernpage .resources-showcase__subtitle,
main.destination-city.modernpage .popular-routes__subtitle,
main.destination-city.modernpage .dest-enquiry-subtitle {
color: var(--v5-stone, #5b574d);
font-size: 1.02rem;
}
/* ═══════════════════════════════════════════════════════════════════════════
ATLAS HERO (Opsi A, approved 5 Aug 2026) — full-bleed photo, masthead
bottom-left, trust band on ink below. Hero is one of the three allowed
motion moments (rule-wajib/animasi-motion.md): slow Ken Burns + a one-time
staggered masthead rise on load; everything below reveals via ivs-reveal.
═══════════════════════════════════════════════════════════════════════════ */
.atlas-hero {
position: relative;
min-height: clamp(440px, 72vh, 800px);
overflow: hidden;
background: var(--v5-ink, #201f1d);
}
/* Fixed site header compensation: the legacy hero carried
.bannerSlider { margin-top:123px } for the fixed header; the Atlas
section needs the same offset or it slides under the header. */
.destination-hero--atlas {
margin-top: 123px;
}
/* On phones the topbar strip folds into the floating controls (ivs-fab),
so the fixed header is 48px shorter there. */
@media (max-width: 767px) {
.destination-hero--atlas { margin-top: 75px; }
}
/* First screen fits exactly: hero stretches so the trust band ends flush
with the fold (100vh minus the site header). Desktop only; on small
screens the stacked band is taller than a viewport slice, so the hero
keeps its natural clamp height there. */
@media (min-width: 992px) {
.destination-hero--atlas {
display: flex;
flex-direction: column;
min-height: calc(100vh - 123px);
min-height: calc(100svh - 123px);
}
.destination-hero--atlas .atlas-hero {
flex: 1 1 auto;
min-height: 320px;
}
.destination-hero--atlas .atlas-band {
flex: 0 0 auto;
}
}
.atlas-hero__media {
position: absolute;
inset: 0;
width: 100%;
height: 100%;
object-fit: cover;
animation: atlas-kenburns 16s var(--ivs-anim-ease, cubic-bezier(0.22, 0.61, 0.36, 1)) infinite alternate;
}
.atlas-hero__media--poster { z-index: -1; animation: none; }
@keyframes atlas-kenburns {
from { transform: scale(1); }
to { transform: scale(1.07); }
}
/* ── Hero slideshow ──
The homepage banner's cross-fade, verbatim: a photograph should arrive,
not switch. Ken Burns stays on the slide that is showing, so only one
image is ever animating. Single-banner countries render one slide, which
is .is-on from the start, so nothing changes for them. */
.atlas-hero__slides {
position: absolute;
inset: 0;
}
.atlas-hero__slide {
opacity: 0;
animation: none;
transition: opacity 1.4s var(--ivs-anim-ease, cubic-bezier(0.22, 0.61, 0.36, 1));
}
.atlas-hero__slide.is-on {
opacity: 1;
animation: atlas-kenburns 16s var(--ivs-anim-ease, cubic-bezier(0.22, 0.61, 0.36, 1)) infinite alternate;
}
.atlas-hero__scrim {
position: absolute;
inset: 0;
background: radial-gradient(120% 90% at 12% 96%,
rgba(20, 19, 15, 0.82) 0%,
rgba(20, 19, 15, 0.42) 42%,
rgba(20, 19, 15, 0) 72%);
}
.atlas-hero__crumb {
position: absolute;
top: 20px;
left: clamp(20px, 5vw, 72px);
z-index: 2;
font-family: var(--v5-font-label, 'Inter', sans-serif);
font-size: 0.7rem;
font-weight: 500;
letter-spacing: 0.14em;
text-transform: uppercase;
color: #f4f1e8;
opacity: 0.9;
/* Same trick as the official bare-chevron nav: a drop shadow keeps the
text readable over any photo, bright sky included. */
text-shadow: 0 1px 6px rgba(20, 19, 15, 0.65), 0 0 2px rgba(20, 19, 15, 0.5);
animation: atlas-fade 650ms var(--ivs-anim-ease, ease) 80ms backwards;
}
.atlas-hero__crumb ol { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 4px; }
.atlas-hero__crumb li + li::before { content: '/'; margin: 0 8px 0 4px; opacity: 0.6; }
.atlas-hero__crumb a { color: inherit; text-decoration: none; border-bottom: 1px solid rgba(244, 241, 232, 0.55); }
.atlas-hero__crumb a:hover { border-bottom-color: #f4f1e8; }
.atlas-hero__mast {
position: absolute;
left: clamp(20px, 5vw, 72px);
right: 20px;
bottom: clamp(26px, 4.5vw, 58px);
z-index: 2;
color: var(--v5-ivory, #faf9f6);
}
.atlas-hero__eyebrow {
font-family: var(--v5-font-label, 'Inter', sans-serif);
font-size: 0.7rem;
font-weight: 600;
letter-spacing: 0.26em;
text-transform: uppercase;
/* amber is allowed here: marker on dark ground only */
color: var(--v5-amber, #fcb913);
margin: 0 0 10px;
animation: atlas-rise 650ms var(--ivs-anim-ease, ease) 120ms backwards;
}
.atlas-hero__title {
font-family: var(--v5-font-display, 'Playfair Display', Georgia, serif);
font-weight: 500;
font-size: clamp(2.6rem, 6.4vw, 4.8rem);
line-height: 1.02;
margin: 0 0 10px;
color: var(--v5-ivory, #faf9f6);
text-wrap: balance;
animation: atlas-rise 650ms var(--ivs-anim-ease, ease) 240ms backwards;
}
.atlas-hero__deck {
font-family: var(--v5-font-body, 'Lora', Georgia, serif);
font-style: italic;
font-size: clamp(1rem, 2vw, 1.35rem);
line-height: 1.5;
max-width: 38ch;
margin: 0 0 16px;
color: #f4f1e8;
animation: atlas-rise 650ms var(--ivs-anim-ease, ease) 380ms backwards;
}
.atlas-hero__rule {
width: 84px;
height: 1px;
background: var(--v5-gold, #b9995b);
transform-origin: left;
animation: atlas-draw 900ms var(--ivs-anim-ease, ease) 520ms backwards;
}
@keyframes atlas-rise {
from { opacity: 0; transform: translateY(var(--ivs-anim-rise, 16px)); }
to { opacity: 1; transform: none; }
}
@keyframes atlas-fade {
from { opacity: 0; }
to { opacity: 0.9; }
}
@keyframes atlas-draw {
from { transform: scaleX(0); }
to { transform: scaleX(1); }
}
/* ── Trust band: tv5-facts language (ink, inset shadows top+bottom) ── */
.atlas-band {
background: var(--v5-ink, #201f1d);
border-top: 1px solid #14130f;
border-bottom: 1px solid #14130f;
box-shadow: inset 0 8px 16px -10px rgba(0, 0, 0, 0.5),
inset 0 -8px 16px -10px rgba(0, 0, 0, 0.5);
color: var(--v5-parchment, #f2efe8);
display: flex;
flex-wrap: wrap;
align-items: center;
gap: 18px 34px;
padding: 22px clamp(20px, 5vw, 72px);
}
.atlas-band__lead {
flex: 0 1 240px;
padding-right: 24px;
border-right: 1px solid rgba(242, 239, 232, 0.16);
}
.atlas-band__title {
font-family: var(--v5-font-display, 'Playfair Display', Georgia, serif);
font-weight: 500;
font-size: 1.3rem;
line-height: 1.2;
color: var(--v5-ivory, #faf9f6);
margin: 0 0 4px;
}
.atlas-band__sub {
font-family: var(--v5-font-body, 'Lora', Georgia, serif);
font-style: italic;
font-size: 0.85rem;
color: var(--v5-olive-300, #a9b58f);
margin: 0;
}
/* The band finishes the hero's opening sequence: same atlas-rise keyframe and
easing the eyebrow/title/deck already use (120/240/380ms), carried on past
the fold so the trust line arrives as the last beat rather than being there
all along. Reused, not reinvented (rule-wajib/animasi-motion.md: the hero is
one allowed motion moment, and this is still that moment). */
.atlas-band__lead {
animation: atlas-rise 650ms var(--ivs-anim-ease, ease) 500ms backwards;
}
/* nth-child, not nth-of-type: every child of the band is a
, so
:nth-of-type counted the lead block too. The first cell picked up the "2"
rule, the second picked up "3", and the third matched nothing at all, which
is why the star bullet sat there without ever animating in. */
.atlas-band__cell:nth-child(2) { animation: atlas-rise 650ms var(--ivs-anim-ease, ease) 600ms backwards; }
.atlas-band__cell:nth-child(3) { animation: atlas-rise 650ms var(--ivs-anim-ease, ease) 680ms backwards; }
.atlas-band__cell:nth-child(4) { animation: atlas-rise 650ms var(--ivs-anim-ease, ease) 760ms backwards; }
.atlas-band__act {
animation: atlas-rise 650ms var(--ivs-anim-ease, ease) 860ms backwards;
}
/* Equal columns, not content-sized: with `flex: 1 1 220px` each cell grew to
its own sentence, so the three icons landed on different x positions from
one country to the next (measured: Malta and Spain drifted 3-10px past
France above 1500px, and wrapped to different rows at 1920). A shared basis
of 0 makes the free space split evenly, so the icons line up whatever the
copy says. */
.atlas-band__cell {
flex: 1 1 0;
min-width: 200px;
display: flex;
gap: 12px;
/* Every cell is as tall as the tallest one (stretch), and the icon plus its
sentence ride in the middle of that shared box. Topping the content left
27px of air above the text and 57px below, which read as the whole row
floating high; centring splits the slack evenly. All three cells share a
box height, so their icons still land on one baseline. */
align-items: center;
align-self: stretch;
}
.atlas-band__icon { flex: none; width: 22px; height: 22px; margin-top: 1px; color: var(--v5-gold, #b9995b); }
.atlas-band__icon svg { width: 100%; height: 100%; }
.atlas-band__text {
font-family: var(--v5-font-body, 'Lora', Georgia, serif);
font-size: 0.88rem;
line-height: 1.5;
}
/* Fixed column, not content-sized: the CTA label carries the country name, so
"LET'S PLAN YOUR FRANCE TRIP" and "...SPAIN TRIP" are different widths, and
an auto basis handed the three cells beside it a different amount of room on
every country (measured at 1512px: act 288px on France vs 274px on Spain,
which walked the icons 3-10px out of line). Pinning the column makes the
cells identical whatever the country is called. */
.atlas-band__act {
/* 304px fits the longest label on one line across the five countries that
actually publish (croatia 295px, france 289, greece 288, malta 279,
spain 274). The old 288px column was 7px short, which is why only
Croatia broke onto a second line. A fixed column also keeps the three
cells beside it identical whatever the country is called. */
flex: 0 0 304px;
margin-left: auto;
display: flex;
flex-direction: column;
align-items: center;
gap: 8px;
}
.atlas-band__act > a {
white-space: nowrap;
}
/* Below ~1400px the row cannot hold lead + three cells + CTA at once (it needs
about 1690px), so the CTA drops to a second line. That wrap is long-standing,
not new: it happens with an auto-sized column too. The column just goes back
to sizing itself there, and the CTA is centred on its own line rather than
pinned right, so the wrapped band still reads as deliberate. */
@media (max-width: 1399px) {
.atlas-band__act {
flex: 0 1 auto;
margin-inline: auto;
}
.atlas-band__act > a { white-space: normal; }
}
.atlas-band__btn {
display: inline-block;
font-family: var(--v5-font-label, 'Inter', sans-serif);
font-size: 0.74rem;
font-weight: 600;
letter-spacing: 0.16em;
text-transform: uppercase;
text-decoration: none;
text-align: center;
color: var(--v5-ivory, #faf9f6);
background: var(--v5-olive-700, #4a5e2f);
border-radius: 3px;
padding: 14px 26px;
transition: background var(--ivs-anim-micro, 300ms) var(--ivs-anim-ease, ease);
}
.atlas-band__btn:hover,
.atlas-band__btn:focus {
background: var(--v5-olive-900, #33421f);
color: var(--v5-ivory, #faf9f6);
text-decoration: none;
}
.atlas-band__reviews {
display: flex;
align-items: center;
gap: 8px;
font-family: var(--v5-font-label, 'Inter', sans-serif);
font-size: 0.72rem;
letter-spacing: 0.04em;
}
.atlas-band__stars { color: var(--v5-gold, #b9995b); letter-spacing: 0.2em; font-size: 0.85rem; }
.atlas-band__popover-wrap { position: relative; display: inline-block; }
.atlas-band__reviews-text {
background: none;
border: 0;
padding: 0;
color: var(--v5-parchment, #f2efe8);
font: inherit;
cursor: pointer;
border-bottom: 1px dotted rgba(242, 239, 232, 0.6);
}
.atlas-band__popover {
display: none;
position: absolute;
bottom: calc(100% + 12px);
right: 0;
z-index: 30;
width: min(320px, 86vw);
background: var(--v5-ivory, #faf9f6);
color: var(--v5-ink, #201f1d);
border: 1px solid var(--v5-line, #e4e0d5);
box-shadow: 0 18px 38px -16px rgba(20, 19, 15, 0.5);
padding: 18px 20px;
font-family: var(--v5-font-body, 'Lora', Georgia, serif);
font-size: 0.82rem;
line-height: 1.55;
letter-spacing: 0;
text-transform: none;
}
.atlas-band__popover-wrap [aria-expanded="true"] + .atlas-band__popover { display: block; }
.atlas-band__popover-p { display: block; margin: 0 0 10px; }
.atlas-band__popover-p:last-child { margin-bottom: 0; }
.atlas-band__popover a { color: var(--v5-olive-700, #4a5e2f); }
.atlas-band__popover-close {
position: absolute;
top: 6px;
right: 8px;
background: none;
border: 0;
font-size: 1.1rem;
line-height: 1;
color: var(--v5-mist, #8b877c);
cursor: pointer;
padding: 4px;
}
@media (max-width: 720px) {
.atlas-band__lead { flex-basis: 100%; padding-right: 0; border-right: 0; }
.atlas-band__act { margin-left: 0; width: 100%; align-items: stretch; }
.atlas-band__reviews { justify-content: center; }
}
/* ── Atlas opening: eyebrow label + Discover title + drop cap ── */
main.destination-city.modernpage .atlas-open .heading.atlas-open__label {
margin: 0 0 10px;
padding: 0;
border: 0;
}
/* The eyebrow reads at 0.7rem/11px, which was too small to register as a
section marker next to a 2.2rem title (bos, 6 Agu). Stepped up and given
a rule beneath it so it anchors the section rather than floating.
modern-base.css forces `font-family: var(--font-heading) !important` on
every h2 in this page, so the label face is delivered by redefining that
variable locally instead of fighting the !important. */
main.destination-city.modernpage .atlas-open__label h2 {
--font-heading: var(--v5-font-label, 'Inter', 'Segoe UI', sans-serif);
font-family: var(--v5-font-label, 'Inter', 'Segoe UI', sans-serif);
font-size: 0.82rem;
font-weight: 600;
letter-spacing: 0.24em;
text-transform: uppercase;
color: var(--v5-olive-700, #4a5e2f);
margin: 0;
padding: 0;
/* inline-block keeps the rule below as wide as the word, not the column */
display: inline-block;
line-height: 1.4;
}
/* A short gold rule under the marker: the same gesture the hero uses to
close its deck, so the two openings rhyme. */
main.destination-city.modernpage .atlas-open__label h2::after {
content: '';
display: block;
width: 46px;
height: 1px;
margin: 9px auto 0;
background: var(--v5-gold, #b9995b);
}
main.destination-city.modernpage .atlas-open__title {
font-family: var(--v5-font-display, 'Playfair Display', Georgia, serif);
font-weight: 500;
font-size: clamp(1.5rem, 2.6vw, 2.2rem);
line-height: 1.25;
color: var(--v5-ink, #201f1d);
margin: 0 0 18px;
text-wrap: balance;
}
main.destination-city.modernpage .atlas-open .overview-collapse__content > p:first-of-type::first-letter {
font-family: var(--v5-font-display, 'Playfair Display', Georgia, serif);
font-weight: 500;
font-size: 3.2em;
float: left;
line-height: 0.85;
padding: 4px 10px 0 0;
color: var(--v5-olive-700, #4a5e2f);
}
/* ═══════════════════════════════════════════════════════════════════════════
V5 CARD LANGUAGE — tour cards + property cards + tabs + section buttons
(rule-wajib: kartu radius 0 + garis line, badge ink, tombol 3px olive,
label Inter). Markup untouched; visual overrides only.
Font trick: modern-base.css forces font-family via
`main.modernpage a/button/div { font-family: var(--font-body) !important }`.
That rule reads a variable, so redefining --font-body LOCALLY on the
element wins through the !important without fighting specificity.
═══════════════════════════════════════════════════════════════════════════ */
/* Cards: square, hairline border, quiet hover lift */
main.destination-city.modernpage .modern-card,
main.destination-city.modernpage .prop-card {
border-radius: 0;
border: 1px solid var(--v5-line, #e4e0d5);
background: #fff;
box-shadow: none;
transition: box-shadow var(--ivs-anim-micro, 300ms) var(--ivs-anim-ease, ease),
transform var(--ivs-anim-micro, 300ms) var(--ivs-anim-ease, ease);
}
main.destination-city.modernpage .modern-card:hover,
main.destination-city.modernpage .prop-card:hover {
box-shadow: 0 18px 36px -22px rgba(32, 31, 29, 0.35);
transform: translateY(-3px);
}
main.destination-city.modernpage .modern-card img,
main.destination-city.modernpage .prop-card img {
border-radius: 0;
}
/* Card titles: Playfair, ink, no underline */
main.destination-city.modernpage .modern-card-title a,
main.destination-city.modernpage .prop-card-title a {
color: var(--v5-ink, #201f1d);
text-decoration: none;
}
main.destination-city.modernpage .modern-card-title a:hover,
main.destination-city.modernpage .prop-card-title a:hover {
color: var(--v5-olive-700, #4a5e2f);
}
/* Type/location badges: ink ground, parchment text (THE POSTCARD pattern) */
main.destination-city.modernpage .prop-type-tag {
--font-body: var(--v5-font-label, 'Inter', sans-serif);
background: var(--v5-ink, #201f1d);
color: var(--v5-parchment, #f2efe8);
border-radius: 0;
font-size: 0.64rem;
font-weight: 600;
letter-spacing: 0.14em;
text-transform: uppercase;
padding: 4px 10px;
}
main.destination-city.modernpage .prop-location-badge {
--font-body: var(--v5-font-label, 'Inter', sans-serif);
background: rgba(32, 31, 29, 0.82);
color: var(--v5-parchment, #f2efe8);
border-radius: 0;
font-size: 0.68rem;
letter-spacing: 0.06em;
}
/* Feature icons + star rating share the accent scale */
main.destination-city.modernpage .tour-feature-icon,
main.destination-city.modernpage .tour-duration-icon,
main.destination-city.modernpage .prop-feature i {
color: var(--v5-olive-700, #4a5e2f);
}
main.destination-city.modernpage .prop-star {
color: var(--v5-gold, #b9995b);
}
/* Pricing block: Inter label, Playfair amount */
main.destination-city.modernpage .modern-pricing-label,
main.destination-city.modernpage .prop-pricing-label {
--font-body: var(--v5-font-label, 'Inter', sans-serif);
font-size: 0.66rem;
font-weight: 600;
letter-spacing: 0.18em;
text-transform: uppercase;
color: var(--v5-mist, #8b877c);
}
main.destination-city.modernpage .modern-pricing-amount,
main.destination-city.modernpage .prop-pricing-amount {
--font-body: var(--v5-font-display, 'Playfair Display', Georgia, serif);
color: var(--v5-ink, #201f1d);
}
main.destination-city.modernpage .modern-pricing-unit {
--font-body: var(--v5-font-label, 'Inter', sans-serif);
font-size: 0.7rem;
letter-spacing: 0.04em;
color: var(--v5-mist, #8b877c);
}
/* Buttons: one voice (Inter 600 .16em uppercase), 3px, olive-700 → 900 */
main.destination-city.modernpage .modern-btn,
main.destination-city.modernpage .prop-btn,
main.destination-city.modernpage .dest-search-bar__btn,
main.destination-city.modernpage .overview-entry-form__btn,
main.destination-city.modernpage .overview-entry-card__toggle,
main.destination-city.modernpage .popular-routes__btn,
main.destination-city.modernpage .overview-collapse__btn {
/* Both variables are redefined: modern-base.css forces --font-body on
p/a/button and --font-heading on headings, and these buttons were
still rendering in Playfair (measured 13.6px Playfair on "View More
Gallery") because only one of the two was covered. */
--font-body: var(--v5-font-label, 'Inter', sans-serif);
--font-heading: var(--v5-font-label, 'Inter', sans-serif);
font-family: var(--v5-font-label, 'Inter', sans-serif);
font-size: 0.74rem;
font-weight: 600;
letter-spacing: 0.16em;
text-transform: uppercase;
border-radius: 3px;
background: var(--v5-olive-700, #4a5e2f);
color: var(--v5-ivory, #faf9f6);
border: 0;
transition: background var(--ivs-anim-micro, 300ms) var(--ivs-anim-ease, ease);
}
main.destination-city.modernpage .modern-btn:hover,
main.destination-city.modernpage .prop-btn:hover,
main.destination-city.modernpage .dest-search-bar__btn:hover,
main.destination-city.modernpage .overview-entry-form__btn:hover,
main.destination-city.modernpage .overview-entry-card__toggle:hover,
main.destination-city.modernpage .popular-routes__btn:hover,
main.destination-city.modernpage .overview-collapse__btn:hover {
background: var(--v5-olive-900, #33421f);
color: var(--v5-ivory, #faf9f6);
}
/* destinations.css:1108 (shared with the city pages) empties this button on
hover: `background: transparent` plus `color: olive-700 !important`. On a
solid olive button that reads as the button disappearing, and the label
drops to olive-on-white. The house rule is olive-700 → olive-900 with the
label staying ivory (rule-wajib/tombol.md), so it is restored here. The
`!important` is matched rather than out-specified: the shared rule uses it,
and this file is scoped to country pages only. */
main.destination-city.modernpage .overview-collapse__btn:hover,
main.destination-city.modernpage .overview-collapse__btn:focus-visible {
background: var(--v5-olive-900, #33421f) !important;
color: var(--v5-ivory, #faf9f6) !important;
border-color: var(--v5-olive-900, #33421f) !important;
}
/* Tabs (Hotel / Villas / Apartment / Gallery): tv5-tab language */
main.destination-city.modernpage .modern-tab {
--font-body: var(--v5-font-label, 'Inter', sans-serif);
font-size: 0.72rem;
font-weight: 600;
letter-spacing: 0.14em;
text-transform: uppercase;
color: var(--v5-stone, #5b574d);
background: none;
border: 0;
border-bottom: 3px solid transparent;
border-radius: 0;
padding: 10px 4px;
}
main.destination-city.modernpage .modern-tab.is-active {
color: var(--v5-ink, #201f1d);
border-bottom-color: var(--v5-olive-500, #6b8051);
background: none;
}
/* ═══════════════════════════════════════════════════════════════════════════
V5 REMAINING SECTIONS — premium content, explore towns, transfer routes,
resources, testimonials, enquiry + search forms. Same language: square
surfaces + hairline borders, Inter labels, olive accents, gold marks.
═══════════════════════════════════════════════════════════════════════════ */
/* ── Premium sections (cultural content) ── */
main.destination-city.modernpage .premium-section__title {
font-size: clamp(1.5rem, 2.4vw, 2.1rem);
color: var(--v5-ink, #201f1d);
}
main.destination-city.modernpage .premium-section__subtitle {
color: var(--v5-stone, #5b574d);
}
main.destination-city.modernpage .premium-history__icon,
main.destination-city.modernpage .premium-local-culture__icon,
main.destination-city.modernpage .premium-budget-tips__icon,
main.destination-city.modernpage .premium-tip__icon,
main.destination-city.modernpage .premium-landmark__pin {
color: var(--v5-olive-700, #4a5e2f);
}
main.destination-city.modernpage .premium-card {
border-radius: 0;
border: 1px solid var(--v5-line, #e4e0d5);
box-shadow: none;
}
main.destination-city.modernpage .premium-card__image img { border-radius: 0; }
main.destination-city.modernpage .premium-card__title { color: var(--v5-ink, #201f1d); }
main.destination-city.modernpage .premium-card__cta {
--font-body: var(--v5-font-label, 'Inter', sans-serif);
font-size: 0.7rem;
font-weight: 600;
letter-spacing: 0.14em;
text-transform: uppercase;
}
/* FAQ: ledger rows (hairline top/bottom), olive chevron */
main.destination-city.modernpage .premium-faq__item {
background: none;
border: 0;
border-top: 1px solid var(--v5-line, #e4e0d5);
border-radius: 0;
box-shadow: none;
}
main.destination-city.modernpage .premium-faq__item:last-child {
border-bottom: 1px solid var(--v5-line, #e4e0d5);
}
main.destination-city.modernpage .premium-faq__question-text {
color: var(--v5-ink, #201f1d);
font-weight: 600;
}
main.destination-city.modernpage .premium-faq__chevron { color: var(--v5-olive-700, #4a5e2f); }
main.destination-city.modernpage .premium-faq__answer { color: var(--v5-stone, #5b574d); }
/* ── Explore towns ── */
main.destination-city.modernpage .explore-town-card,
main.destination-city.modernpage .explore-town-card__image,
main.destination-city.modernpage .explore-town-card__image img {
border-radius: 0;
}
main.destination-city.modernpage .explore-towns-pill {
border-radius: 3px;
border: 1px solid var(--v5-line, #e4e0d5);
}
/* ── Popular transfer routes ── */
main.destination-city.modernpage .popular-routes__card {
border-radius: 0;
border: 1px solid var(--v5-line, #e4e0d5);
background: #fff;
box-shadow: none;
}
main.destination-city.modernpage .popular-routes__icon { color: var(--v5-olive-700, #4a5e2f); }
main.destination-city.modernpage .popular-routes__type {
--font-body: var(--v5-font-label, 'Inter', sans-serif);
font-size: 0.64rem;
font-weight: 600;
letter-spacing: 0.14em;
text-transform: uppercase;
color: var(--v5-mist, #8b877c);
}
main.destination-city.modernpage .popular-routes__price-amount {
--font-body: var(--v5-font-display, 'Playfair Display', Georgia, serif);
color: var(--v5-ink, #201f1d);
}
main.destination-city.modernpage .popular-routes__price-label,
main.destination-city.modernpage .popular-routes__price-unit {
--font-body: var(--v5-font-label, 'Inter', sans-serif);
font-size: 0.66rem;
letter-spacing: 0.06em;
color: var(--v5-mist, #8b877c);
}
/* ── Resources showcase (photo overlay cards) ── */
main.destination-city.modernpage .resources-showcase-card,
main.destination-city.modernpage .resources-showcase-card__image img {
border-radius: 0;
}
/* The category chip used to be amber on a translucent WHITE panel
(rgba(255,255,255,.18) + blur) at 10.56px — amber on a light ground measures
1.65:1, which is exactly the combination token-warna.md rules out, and it was
unreadable on the pale cards. It becomes the house badge instead: ink ground,
parchment letters, square corners (the POSTCARD pattern), which reads on any
photo underneath because it brings its own dark ground. */
main.destination-city.modernpage .resources-showcase-card__category {
--font-body: var(--v5-font-label, 'Inter', sans-serif);
--font-heading: var(--v5-font-label, 'Inter', sans-serif);
font-family: var(--v5-font-label, 'Inter', sans-serif);
font-size: 0.62rem;
font-weight: 600;
letter-spacing: 0.16em;
text-transform: uppercase;
color: var(--v5-parchment, #f2efe8);
background: rgba(32, 31, 29, 0.88);
border: 0;
border-radius: 0;
padding: 5px 11px;
-webkit-backdrop-filter: none;
backdrop-filter: none;
}
main.destination-city.modernpage .resources-showcase-card__line {
background: var(--v5-gold, #b9995b);
}
/* Name: Playfair 500 rather than 700 — the display face carries emphasis by
shape, and the bold weight read as heavy against the quiet card language. */
main.destination-city.modernpage .resources-showcase-card__name {
--font-body: var(--v5-font-display, 'Playfair Display', Georgia, serif);
--font-heading: var(--v5-font-display, 'Playfair Display', Georgia, serif);
font-family: var(--v5-font-display, 'Playfair Display', Georgia, serif);
font-weight: 500;
letter-spacing: 0.01em;
}
/* A soft scrim under the lower half so the white name never has to sit on a
bright patch of photo. Measured: the Saturnia and family cards were pale
exactly where the name lands. */
main.destination-city.modernpage .resources-showcase-card__image::after {
content: "";
position: absolute;
inset: 0;
background: linear-gradient(to top,
rgba(32, 31, 29, 0.78) 0%,
rgba(32, 31, 29, 0.34) 34%,
rgba(32, 31, 29, 0.10) 58%,
rgba(32, 31, 29, 0.22) 100%);
pointer-events: none;
}
main.destination-city.modernpage .resources-showcase-card__image {
position: relative;
}
/* Subtitle picks up the same italic Lora voice as every other .dv5-sub on the
page (it was upright, so this section read slightly off-key). */
main.destination-city.modernpage .resources-showcase__subtitle {
--font-body: var(--v5-font-body, 'Lora', Georgia, serif);
font-family: var(--v5-font-body, 'Lora', Georgia, serif);
font-style: italic;
color: var(--v5-stone, #5b574d);
max-width: 62ch;
margin-inline: auto;
}
/* Quiet lift on hover, in the same voice as the tour cards */
main.destination-city.modernpage .resources-showcase-card {
transition: box-shadow var(--ivs-anim-micro, 300ms) var(--ivs-anim-ease, ease),
transform var(--ivs-anim-micro, 300ms) var(--ivs-anim-ease, ease);
}
main.destination-city.modernpage .resources-showcase-card:hover {
box-shadow: 0 18px 36px -22px rgba(32, 31, 29, 0.45);
transform: translateY(-3px);
}
/* The gold rule under the name draws out on hover: the house underline
gesture, same easing as the nav and megamenu links. */
main.destination-city.modernpage .resources-showcase-card__line {
transform-origin: left;
transition: width var(--ivs-anim-micro, 300ms) var(--ivs-anim-ease, cubic-bezier(.22,.61,.36,1));
}
main.destination-city.modernpage .resources-showcase-card:hover .resources-showcase-card__line {
width: 64px;
}
/* ── Testimonials ── */
main.destination-city.modernpage .testimonial-luxury__subtitle { color: var(--v5-stone, #5b574d); }
main.destination-city.modernpage .testimonial-luxury__readmore { color: var(--v5-olive-700, #4a5e2f); }
/* ── Forms: enquiry + search bars (square fields, olive focus, V5 button) ── */
main.destination-city.modernpage .dest-sidebar-input,
main.destination-city.modernpage .dest-search-bar__input,
main.destination-city.modernpage .dest-search-bar__select,
main.destination-city.modernpage .overview-entry-form__input,
main.destination-city.modernpage .overview-entry-form__select {
border-radius: 0;
border: 1px solid var(--v5-line, #e4e0d5);
box-shadow: none;
}
main.destination-city.modernpage .dest-sidebar-input:focus,
main.destination-city.modernpage .dest-search-bar__input:focus,
main.destination-city.modernpage .dest-search-bar__select:focus,
main.destination-city.modernpage .overview-entry-form__input:focus,
main.destination-city.modernpage .overview-entry-form__select:focus {
border-color: var(--v5-olive-500, #6b8051);
box-shadow: none;
outline: none;
}
main.destination-city.modernpage .dest-form-label {
--font-body: var(--v5-font-label, 'Inter', sans-serif);
font-size: 0.68rem;
font-weight: 600;
letter-spacing: 0.12em;
text-transform: uppercase;
color: var(--v5-stone, #5b574d);
}
main.destination-city.modernpage .dest-sidebar-btn,
main.destination-city.modernpage .dest-sidebar-btn.btn-success {
--font-body: var(--v5-font-label, 'Inter', sans-serif);
font-size: 0.74rem;
font-weight: 600;
letter-spacing: 0.16em;
text-transform: uppercase;
border-radius: 3px;
background: var(--v5-olive-700, #4a5e2f);
border-color: var(--v5-olive-700, #4a5e2f);
color: var(--v5-ivory, #faf9f6);
}
main.destination-city.modernpage .dest-sidebar-btn:hover,
main.destination-city.modernpage .dest-sidebar-btn.btn-success:hover {
background: var(--v5-olive-900, #33421f);
border-color: var(--v5-olive-900, #33421f);
color: var(--v5-ivory, #faf9f6);
}
/* ═══════════════════════════════════════════════════════════════════════════
V5 CONSISTENCY PASS — reuse of proven homepage/tour V5 patterns:
parchment band (IVS Magazine), tertiary CTA (.tv5-rec-card-cta voice),
hairline surfaces. Measured against legacy: weight 700 + navy #1a1a2e
titles, Lora CTAs/eyebrows, generic grey borders.
═══════════════════════════════════════════════════════════════════════════ */
/* The IVS Magazine band used to be restyled here, on top of the old
layouts.recent-blog-section markup. The page now includes the shared
ivs-journal component instead, which brings its own parchment band with
this exact inset shadow, so those overrides were removed rather than
left to rot. */
/* Search: parchment band (its neighbors, tabs and sister, are white) */
main.destination-city.modernpage .dest-search-bar {
background: var(--v5-parchment, #f2efe8);
border-top: 1px solid var(--v5-line, #e4e0d5);
border-bottom: 1px solid var(--v5-line, #e4e0d5);
box-shadow: inset 0 14px 26px -14px rgba(32, 31, 29, 0.22),
inset 0 -14px 26px -14px rgba(32, 31, 29, 0.22);
}
main.destination-city.modernpage .dest-search-bar__inner {
background: transparent;
box-shadow: none;
border: 0;
}
/* ── Testimonial slides: hairline instead of generic grey ── */
main.destination-city.modernpage .testimonial-luxury-slide {
border: 1px solid var(--v5-line, #e4e0d5);
border-radius: 0;
background: #fff;
box-shadow: none;
}
main.destination-city.modernpage .testimonial-luxury__text {
color: var(--v5-stone, #5b574d);
}
main.destination-city.modernpage .testimonial-luxury__author {
color: var(--v5-ink, #201f1d);
}
/* ── Overview entry card (mini search): hairline surface + Inter eyebrow ── */
main.destination-city.modernpage .overview-entry-card {
border-radius: 0;
border: 1px solid var(--v5-line, #e4e0d5);
box-shadow: none;
background: #fff;
}
main.destination-city.modernpage .overview-entry-card__eyebrow {
--font-body: var(--v5-font-label, 'Inter', sans-serif);
font-size: 0.66rem;
font-weight: 600;
letter-spacing: 0.26em;
text-transform: uppercase;
color: var(--v5-olive-700, #4a5e2f);
}
main.destination-city.modernpage .overview-entry-card__title {
color: var(--v5-ink, #201f1d);
}
main.destination-city.modernpage .overview-entry-card__microcopy {
color: var(--v5-stone, #5b574d);
font-style: italic;
}
/* ── Overview toile pattern (per-country, config/country_page.php) ──
The tile renders in its ORIGINAL artwork colors; what changes per country
is the BAND background behind it (--dv5-overview-bg, e.g. Greece = pale
Aegean wash). Repeat 620px (420px ≤1024), opacity .22, edges faded by a
mask so the pattern never reads as a box. */
main.destination-city.modernpage .atlas-open--pattern,
main.destination-city.modernpage .dest-enquiry-section--pattern {
position: relative;
}
main.destination-city.modernpage .atlas-open.atlas-open--pattern,
main.destination-city.modernpage .dest-enquiry-section.dest-enquiry-section--pattern {
background: var(--dv5-overview-bg, var(--v5-parchment, #f2efe8));
}
main.destination-city.modernpage .atlas-open--pattern::before,
main.destination-city.modernpage .dest-enquiry-section--pattern::before {
content: '';
position: absolute;
inset: 0;
background-image: var(--dv5-overview-pattern);
background-repeat: repeat;
background-size: 620px;
opacity: 0.22;
pointer-events: none;
-webkit-mask-image: linear-gradient(180deg, transparent 0%, #000 14%, #000 86%, transparent 100%);
mask-image: linear-gradient(180deg, transparent 0%, #000 14%, #000 86%, transparent 100%);
}
@media (max-width: 1024px) {
main.destination-city.modernpage .atlas-open--pattern::before,
main.destination-city.modernpage .dest-enquiry-section--pattern::before { background-size: 420px; }
}
main.destination-city.modernpage .dest-enquiry-section--pattern .dest-enquiry-section__inner {
position: relative;
z-index: 1;
}
/* Read More fade must melt into the per-country band color, not parchment */
main.destination-city.modernpage .atlas-open.atlas-open--pattern .overview-collapse__fade {
background: linear-gradient(180deg, transparent 0%, var(--dv5-overview-bg, var(--v5-parchment, #f2efe8)) 100%);
}
main.destination-city.modernpage .atlas-open--pattern .overview-layout {
position: relative;
z-index: 1;
}
/* ── A-B-A section rhythm: full-bleed parchment bands (same 100vw pull the
page already uses for dest-search-bar; main clips the scrollbar excess).
Symmetric padding pulls the content back to its original alignment. ── */
main.destination-city.modernpage {
overflow-x: clip;
}
main.destination-city.modernpage .atlas-open,
main.destination-city.modernpage .city-location,
main.destination-city.modernpage .dv5-band--parchment,
main.destination-city.modernpage .dest-enquiry-section {
width: 100vw;
margin-left: calc(-50vw + 50%);
padding-left: calc(50vw - 50%);
padding-right: calc(50vw - 50%);
background: var(--v5-parchment, #f2efe8);
border-top: 1px solid var(--v5-line, #e4e0d5);
border-bottom: 1px solid var(--v5-line, #e4e0d5);
box-shadow: inset 0 14px 26px -14px rgba(32, 31, 29, 0.22),
inset 0 -14px 26px -14px rgba(32, 31, 29, 0.22);
padding-top: 56px;
padding-bottom: 64px;
margin-top: 60px;
}
/* Children inside the parchment bands must stay transparent, or they mask
the toile (the old overview children carried white backgrounds). */
main.destination-city.modernpage .dv5-band--parchment .modern-tabpanel,
main.destination-city.modernpage .atlas-open .city-shortdes,
main.destination-city.modernpage .atlas-open .overview-collapse,
main.destination-city.modernpage .atlas-open .overview-collapse__content {
background: transparent;
box-shadow: none;
}
/* destinations.css:599 paints .tab-overview `#fff !important` (shared with
city pages, cannot be edited there) — this file only loads on country
pages, so countering with !important stays perfectly scoped. */
main.destination-city.modernpage .atlas-open .tab-overview {
background: transparent !important;
box-shadow: none;
}
/* Read More fade now melts into parchment, not white */
main.destination-city.modernpage .atlas-open .overview-collapse__fade {
background: linear-gradient(180deg, rgba(242, 239, 232, 0) 0%, var(--v5-parchment, #f2efe8) 100%);
}
/* ── Country map (Mapbox GL via ivs-map.js, same engine as tour V5) ── */
main.destination-city.modernpage .dv5-map {
height: clamp(320px, 38vw, 480px);
border: 1px solid var(--v5-line, #e4e0d5);
background: var(--v5-parchment, #f2efe8); /* placeholder before the library arrives */
}
.dv5-map-pin {
width: 18px;
height: 18px;
border-radius: 50%; /* map pins are a sanctioned round exception */
background: var(--v5-olive-700, #4a5e2f);
border: 2px solid #fff;
box-shadow: 0 1px 6px rgba(20, 19, 15, 0.4);
cursor: pointer;
}
main.destination-city.modernpage .dv5-map .mapboxgl-popup-content {
font-family: var(--v5-font-display, 'Playfair Display', Georgia, serif);
font-size: 1.05rem;
color: var(--v5-ink, #201f1d);
border-radius: 0;
border: 1px solid var(--v5-line, #e4e0d5);
box-shadow: 0 12px 24px -12px rgba(20, 19, 15, 0.4);
padding: 10px 16px;
}
/* ── Gallery accordion: square corners, hairline gaps stay ── */
main.destination-city.modernpage .city-gallery img,
main.destination-city.modernpage .dest-gallery-item img {
border-radius: 0;
}
/* ── Few-items horizontal prop card (1-3 slides, ≥992px) ──
destinations.css pins .modern-card-text to grid-row 2 — a rule written for
the tour card grid, but the hotel prop card reuses that class for its
description, so the text landed ABOVE the title and every grid child
(type badge included) stretched to the full 700px column. Flex column
restores DOM order and shrink-to-fit without touching the shared file. */
@media (min-width: 992px) {
main.destination-city.modernpage .dest-carousel--few .prop-card-body {
display: flex;
flex-direction: column;
align-items: flex-start;
justify-content: center;
padding: 18px 26px;
}
main.destination-city.modernpage .dest-carousel--few .prop-type-tag {
margin-bottom: 10px;
}
main.destination-city.modernpage .dest-carousel--few .prop-card-title {
margin-bottom: 4px;
}
main.destination-city.modernpage .dest-carousel--few .prop-star-rating {
margin-bottom: 6px;
}
main.destination-city.modernpage .dest-carousel--few .prop-card-body .modern-card-text {
margin-bottom: 10px;
}
}
/* ── Quick Enquiry: slimmed, tour V5 form-card voice (boss, 7 Aug) ──
Visual only — markup, honeypot-free qcform logic and reCAPTCHA untouched.
The card borrows .tv5-form-card: ivory ground, hairline border, card-scale
Playfair title, white boxed fields. Narrower card + tighter rhythm so the
section stops spanning the full 1760px container. */
main.destination-city.modernpage .dest-enquiry-section__inner {
background: var(--v5-ivory, #faf9f6);
border: 1px solid var(--v5-line, #e4e0d5);
max-width: 1240px;
margin-inline: auto;
}
main.destination-city.modernpage .dest-enquiry-grid {
min-height: 0;
grid-template-columns: 1.1fr 0.9fr;
}
main.destination-city.modernpage .dest-enquiry-form-col {
padding: 2rem 2.25rem;
}
main.destination-city.modernpage .dest-enquiry-form-col__header {
margin-bottom: 1.1rem;
}
/* Card-scale title (.tv5-form-title voice), not the section-title scale */
main.destination-city.modernpage .dest-enquiry-section .dest-sidebar-title {
font-size: clamp(1.45rem, 2vw, 1.85rem);
}
main.destination-city.modernpage .dest-enquiry-subtitle {
font-size: 0.9rem;
color: var(--v5-mist, #8b877c);
}
main.destination-city.modernpage .dest-enquiry-row {
margin-bottom: 0.85rem;
}
main.destination-city.modernpage .dest-enquiry-section .dest-sidebar-input {
background: #fff;
padding: 0.55rem 0.9rem;
font-size: 0.92rem;
}
main.destination-city.modernpage .dest-enquiry-section textarea.dest-sidebar-input {
min-height: 68px;
}
main.destination-city.modernpage .dest-enquiry-row--actions {
margin-top: 0.25rem;
margin-bottom: 0;
}
@media (max-width: 767.98px) {
main.destination-city.modernpage .dest-enquiry-form-col {
padding: 1.5rem 1.25rem;
}
}
/* ── Sister site: "Jendela Paspor" (option B, white ground — boss 7 Aug) ──
Split card on the page's white run: story left, the sister site's logo on
a parchment stage right, framed by gold passport ticks. A gold sheen
sweeps the stage periodically (the homepage "walking light" idea, calmed).
Old .ivs-sister styles in destinations.css are no longer referenced. */
main.destination-city.modernpage .dv5-sister {
max-width: 1080px;
margin: clamp(2.4rem, 5vw, 4rem) auto;
}
main.destination-city.modernpage .dv5-sister-grid {
display: grid;
grid-template-columns: 1.05fr 0.95fr;
align-items: stretch;
gap: clamp(1.8rem, 3.4vw, 3.4rem);
}
main.destination-city.modernpage .dv5-sister-body {
align-self: center;
}
main.destination-city.modernpage .dv5-sister-eyebrow {
--font-body: var(--v5-font-label, 'Inter', sans-serif);
display: block;
font-family: var(--v5-font-label, 'Inter', sans-serif);
font-weight: 600;
font-size: 0.64rem;
letter-spacing: 0.26em;
text-transform: uppercase;
color: var(--v5-olive-700, #4a5e2f);
margin-bottom: 12px;
}
main.destination-city.modernpage .dv5-sister-title {
font-family: var(--v5-font-display, 'Playfair Display', Georgia, serif);
font-weight: 500;
font-size: clamp(1.5rem, 2.4vw, 2rem);
line-height: 1.25;
color: var(--v5-ink, #201f1d);
margin: 0 0 12px;
}
main.destination-city.modernpage .dv5-sister-desc {
font-size: 0.95rem;
line-height: 1.75;
color: var(--v5-stone, #5b574d);
margin: 0 0 26px;
}
main.destination-city.modernpage .dv5-sister-cta {
--font-body: var(--v5-font-label, 'Inter', sans-serif);
display: inline-flex;
align-items: center;
gap: 9px;
padding: 13px 26px;
background: var(--v5-olive-700, #4a5e2f);
color: var(--v5-ivory, #faf9f6);
text-decoration: none;
border-radius: 3px;
font-weight: 600;
font-size: 0.72rem;
letter-spacing: 0.16em;
text-transform: uppercase;
transition: background var(--ivs-anim-micro, 300ms) var(--ivs-anim-ease, ease);
}
main.destination-city.modernpage .dv5-sister-cta:hover,
main.destination-city.modernpage .dv5-sister-cta:focus-visible {
background: var(--v5-olive-900, #33421f);
color: var(--v5-ivory, #faf9f6);
}
main.destination-city.modernpage .dv5-sister-cta i {
font-style: normal;
transition: transform var(--ivs-anim-micro, 300ms) var(--ivs-anim-ease, ease);
}
main.destination-city.modernpage .dv5-sister-cta:hover i {
transform: translateX(4px);
}
main.destination-city.modernpage .dv5-sister-stage {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
text-align: center;
padding: 2.6rem 2rem;
min-height: 240px;
}
/* Sheen clip: exactly the logo's box, not the whole column */
main.destination-city.modernpage .dv5-sister-logo-wrap {
position: relative;
overflow: hidden;
display: inline-block;
max-width: 100%;
}
main.destination-city.modernpage .dv5-sister-logo {
display: block;
width: min(var(--dv5-sister-logo-w, 250px), 78vw);
height: auto;
}
main.destination-city.modernpage .dv5-sister-mark {
display: flex;
align-items: center;
justify-content: center;
width: 78px;
height: 78px;
border: 1px solid var(--v5-line, #e4e0d5);
border-radius: 50%;
background: var(--v5-ivory, #faf9f6);
font-family: var(--v5-font-display, 'Playfair Display', Georgia, serif);
font-size: 1.5rem;
color: var(--v5-olive-700, #4a5e2f);
}
main.destination-city.modernpage .dv5-sister-domain {
--font-body: var(--v5-font-label, 'Inter', sans-serif);
font-family: var(--v5-font-label, 'Inter', sans-serif);
font-weight: 600;
font-size: 0.64rem;
letter-spacing: 0.18em;
text-transform: uppercase;
color: var(--v5-mist, #8b877c);
margin-top: 14px;
}
/* Periodic gold sheen across the stage (transform-only, cheap) */
main.destination-city.modernpage .dv5-sister-sheen {
position: absolute;
top: 0;
bottom: 0;
left: 0;
width: 42%;
transform: translateX(-110%);
pointer-events: none;
/* White, not gold: the sweep passes straight over the sister site's own
logo, and a tinted one shifted its brand colors as it went. Reads as a
soft lift across the mark rather than a visible band. */
background: linear-gradient(105deg,
transparent 0%,
rgba(255, 255, 255, 0.35) 45%,
rgba(255, 255, 255, 0.68) 50%,
rgba(255, 255, 255, 0.35) 55%,
transparent 100%);
animation: dv5SisterSweep 5.2s var(--ivs-anim-ease, ease) 1.2s infinite;
}
/* 42%-wide stripe: 250% of its own width ≈ just past the stage's far edge */
@keyframes dv5SisterSweep {
0% { transform: translateX(-110%); }
55% { transform: translateX(250%); }
100% { transform: translateX(250%); }
}
@media (max-width: 860px) {
main.destination-city.modernpage .dv5-sister-grid {
grid-template-columns: 1fr;
}
main.destination-city.modernpage .dv5-sister-stage {
min-height: 190px;
padding: 2rem 1.4rem;
}
}
/* Motion off: everything just shows (same contract as ivs-reveal) */
@media (prefers-reduced-motion: reduce) {
.atlas-hero__media,
.atlas-hero__crumb,
.atlas-hero__eyebrow,
.atlas-hero__title,
.atlas-hero__deck,
.atlas-hero__rule,
.atlas-band__lead,
.atlas-band__cell,
.atlas-band__cell:nth-child(2),
.atlas-band__cell:nth-child(3),
.atlas-band__cell:nth-child(4),
.atlas-band__act {
animation: none;
}
/* The slideshow keeps turning (content-carrying exception, 4 Aug 2026)
but arrives as an instant cut with no Ken Burns: zero movement, the
photographs still rotate. Same compromise as the homepage banner.
Needs .is-on here too, or the rule above loses on specificity. */
.atlas-hero__slide,
.atlas-hero__slide.is-on {
animation: none;
transition: none;
}
main.destination-city.modernpage .modern-card,
main.destination-city.modernpage .prop-card {
transition: none;
}
main.destination-city.modernpage .modern-card:hover,
main.destination-city.modernpage .prop-card:hover {
transform: none;
}
main.destination-city.modernpage .dv5-sister-sheen {
animation: none;
}
main.destination-city.modernpage .dv5-sister-cta i {
transition: none;
}
main.destination-city.modernpage .dv5-sister-cta:hover i {
transform: none;
}
}
/* ── Opening moment (between the hero band and the Overview) ──────────
The white gap between the ink hero band and the parchment Overview was
dead space. It now carries one tall line and a short lead, per country.
Kept white on purpose: the page rhythm is ink -> white -> parchment, and
giving this a ground of its own would break the A-B-A run. Motion comes
from the shared ivs-reveal component, already loaded by this page. */
main.destination-city.modernpage .dv5-open {
max-width: 900px;
margin: 0 auto;
padding: 54px 0 46px;
text-align: center;
}
main.destination-city.modernpage .dv5-open__tagline {
/* modern-base.css forces --font-body onto every
with !important, so
the display face is set by redefining the variable locally rather than
fighting specificity (rule-wajib/gotcha-teknis.md). */
--font-body: var(--v5-font-display, 'Playfair Display', Georgia, serif);
max-width: 30ch;
margin: 0 auto 1.1rem;
font-family: var(--v5-font-display, 'Playfair Display', Georgia, serif);
font-style: italic;
font-weight: 500;
font-size: clamp(1.4rem, 2.4vw, 2rem);
line-height: 1.35;
color: var(--v5-ink, #201f1d);
text-wrap: balance;
}
main.destination-city.modernpage .dv5-open__lead {
max-width: 62ch;
margin: 0 auto;
font-family: var(--v5-font-body, 'Lora', Georgia, serif);
font-size: clamp(1rem, 1.25vw, 1.15rem);
line-height: 1.8;
color: var(--v5-stone, #5b574d);
text-wrap: balance;
}
@media (max-width: 860px) {
main.destination-city.modernpage .dv5-open {
padding: 38px 0 34px;
}
}
/* ═══════════════════════════════════════════════════════════════════════════
GALLERY SHOWCASE — tidy-up, not a redesign (bos, 6 Agu)
─────────────────────────────────────────────────────────────────────────
This strip is a SHOWCASE, not the gallery: the real one lives in the
Gallery tab below. So the accordion mechanic stays exactly as it is and
only its proportions are corrected.
Measured problem: destinations.css gives the resting panels `flex: 1` and
the open one `flex: 4`, so at 1366px the four closed panels collapsed to
~12px each and at 768px to 81px. A photograph that thin shows nothing,
which defeats the point of a showcase. The ratio is eased and a floor is
put under the closed panels so every frame stays readable.
Scoped to the country page's own stylesheet: destinations.css is shared
with the city pages and is not touched.
═══════════════════════════════════════════════════════════════════════════ */
/* Desktop only: below 768px the strip turns into a vertical stack (the JS
opens every panel), and on a column axis `flex-basis: 0` would collapse
each panel to zero height. Measured: the whole gallery became 16px tall.
The ratio work therefore stays inside the horizontal breakpoint. */
@media (min-width: 768px) {
main.destination-city.modernpage .accordion-gallery__panel {
flex: 1 1 0;
min-width: 84px; /* a closed frame still reads as a photograph */
}
main.destination-city.modernpage .accordion-gallery__panel.is-active,
main.destination-city.modernpage .accordion-gallery__panel:hover {
flex: 2.6 1 0; /* was 4: the lead no longer starves its neighbours */
}
}
/* The caption is the only text here, so it carries the house body voice
rather than whatever the legacy sheet left it at. */
main.destination-city.modernpage .accordion-gallery__caption {
font-family: var(--v5-font-body, 'Lora', Georgia, serif);
}
/* In a closed panel the titles are long enough to wrap six or seven times:
measured 165px of caption over a 380px frame, so the words covered nearly
half the photograph. Closed frames get two lines and an ellipsis; the open
one still shows its caption in full. */
@media (min-width: 768px) {
main.destination-city.modernpage .accordion-gallery__panel .accordion-gallery__caption {
display: -webkit-box;
-webkit-line-clamp: 2;
-webkit-box-orient: vertical;
overflow: hidden;
font-size: 0.86rem;
line-height: 1.4;
}
main.destination-city.modernpage .accordion-gallery__panel.is-active .accordion-gallery__caption,
main.destination-city.modernpage .accordion-gallery__panel:hover .accordion-gallery__caption {
-webkit-line-clamp: 3;
font-size: 0.95rem;
}
}
@media (min-width: 1200px) {
main.destination-city.modernpage .accordion-gallery__panel {
min-width: 108px;
}
}
/* Phones show every panel open in a stack (the JS adds .is-active to all of
them below 768px), so the flex ratios above do not apply there. */
/* ═══════════════════════════════════════════════════════════════════════════
MAP: country outline, named destinations, and the written key (bos, 6 Agu)
─────────────────────────────────────────────────────────────────────────
The map used to be one pin dropped on the country's centre point, which for
Croatia lands in open sea and tells a reader nothing. It now carries the
country's own outline (Mapbox country-boundaries-v1, so no geometry ships
with the page), a wash in the country's colour, and the holiday
destinations we actually plan trips in.
The place names are ALSO written under the map as real text: a