or break it out of the container entirely, and
a static child would paint under the positioned layers. */
.section-mark > * {
position: relative;
z-index: 1;
}
/* ::before carries the two side columns, ::after the halves of the split
pairs. Keeping them apart is what lets a section do both at once. */
.section-mark::before,
.section-mark::after {
content: "";
position: absolute;
inset: 0;
z-index: 0;
pointer-events: none;
opacity: var(--section-mark-opacity);
}
/* `space` on the vertical axis: whole tiles, evenly distributed, pinned to the
two ends, never clipped. The horizontal axis stays no-repeat so each column
is a single file of marks. */
.section-mark::before {
background-repeat: no-repeat space, no-repeat space;
}
.section-mark::after {
background-repeat: no-repeat;
}
/* Grounds ------------------------------------------------------ */
/* Red and cyan bands: cream is a tint of both. */
.section-mark.on-colour {
--section-mark-opacity: 0.20;
--mk-spiral: url("/assets/icons/spiral-cream.png");
--mk-wave: url("/assets/icons/wave-cream.png");
--mk-llama: url("/assets/icons/llama-cream.png");
--mk-bird: url("/assets/icons/bird-cream.png");
--mk-figure: url("/assets/icons/figure-cream.png");
--mk-sun: url("/assets/icons/sun-cream.png");
--tk-spiral: url("/assets/icons/tile-spiral-cream.png");
--tk-wave: url("/assets/icons/tile-wave-cream.png");
--tk-llama: url("/assets/icons/tile-llama-cream.png");
--tk-bird: url("/assets/icons/tile-bird-cream.png");
--tk-figure: url("/assets/icons/tile-figure-cream.png");
--tk-sun: url("/assets/icons/tile-sun-cream.png");
}
/* Near-black grounds: cyan, which also matches the link colour these sections
already use. Cream at this size reads as grey haze. */
.section-mark.on-dark {
--section-mark-opacity: 0.18;
--mk-spiral: url("/assets/icons/spiral-cyan.png");
--mk-wave: url("/assets/icons/wave-cyan.png");
--mk-llama: url("/assets/icons/llama-cyan.png");
--mk-bird: url("/assets/icons/bird-cyan.png");
--mk-figure: url("/assets/icons/figure-cyan.png");
--mk-sun: url("/assets/icons/sun-cyan.png");
--tk-spiral: url("/assets/icons/tile-spiral-cyan.png");
--tk-wave: url("/assets/icons/tile-wave-cyan.png");
--tk-llama: url("/assets/icons/tile-llama-cyan.png");
--tk-bird: url("/assets/icons/tile-bird-cyan.png");
--tk-figure: url("/assets/icons/tile-figure-cyan.png");
--tk-sun: url("/assets/icons/tile-sun-cyan.png");
}
/* Scatter -------------------------------------------------------
One column down each side, a different mark in each. Widths are generous --
these are meant to be seen -- and the negative offsets run each column half
off the edge so it reads as pattern rather than as decoration placed in a
margin. The figure is the one narrow mark (393x745), so it takes a smaller
width than the rest.
Four-value background-position syntax (edge, offset, edge, offset): the
three-value form is invalid and would drop the whole declaration. */
.scatter-a::before {
background-image: var(--tk-spiral), var(--tk-sun);
background-position: left -150px top 0, right -140px top 40px;
background-size: 420px auto, 400px auto;
}
.scatter-b::before {
background-image: var(--tk-wave), var(--tk-bird);
background-position: left -170px top 30px, right -180px top 0;
background-size: 440px auto, 460px auto;
}
.scatter-c::before {
background-image: var(--tk-llama), var(--tk-figure);
background-position: left -150px top 0, right -90px top 50px;
background-size: 400px auto, 280px auto;
}
.scatter-d::before {
background-image: var(--tk-spiral), var(--tk-sun);
background-position: left -160px top 60px, right -150px top 0;
background-size: 400px auto, 430px auto;
}
.scatter-e::before {
background-image: var(--tk-figure), var(--tk-bird);
background-position: left -80px top 0, right -190px top 40px;
background-size: 290px auto, 460px auto;
}
.scatter-f::before {
background-image: var(--tk-llama), var(--tk-wave);
background-position: left -140px top 40px, right -180px top 0;
background-size: 380px auto, 450px auto;
}
/* Continuity ----------------------------------------------------
Two layers, both off by default. Each pair's height is the rendered height
at that width -- width x (source height / source width) -- and the offset is
half of it, so the two halves meet exactly on the boundary. The x offsets
sit between 20% and 72%, clear of the columns at the edges. */
.section-mark::after {
/* --split-scale lets the whole pair system shrink in one place. It is 1 here
and reduced on phones, where the full-size marks are wider than the column
of text they sit behind. Every width and offset below goes through it, so a
pair's two halves stay aligned at any scale. */
--split-scale: 1;
background-image: var(--split-up-img, none), var(--split-down-img, none);
background-position:
left var(--split-up-x, 0) top calc(var(--split-up-h, 0px) * var(--split-scale) / -2),
left var(--split-down-x, 0) bottom calc(var(--split-down-h, 0px) * var(--split-scale) / -2);
background-size:
calc(var(--split-up-w, 0px) * var(--split-scale)) auto,
calc(var(--split-down-w, 0px) * var(--split-scale)) auto;
}
.split-down-sun { --split-down-img: var(--mk-sun); --split-down-w: 360px; --split-down-h: 322px; --split-down-x: 22%; }
.split-up-sun { --split-up-img: var(--mk-sun); --split-up-w: 360px; --split-up-h: 322px; --split-up-x: 22%; }
.split-down-llama { --split-down-img: var(--mk-llama); --split-down-w: 320px; --split-down-h: 319px; --split-down-x: 64%; }
.split-up-llama { --split-up-img: var(--mk-llama); --split-up-w: 320px; --split-up-h: 319px; --split-up-x: 64%; }
.split-down-wave { --split-down-img: var(--mk-wave); --split-down-w: 440px; --split-down-h: 196px; --split-down-x: 38%; }
.split-up-wave { --split-up-img: var(--mk-wave); --split-up-w: 440px; --split-up-h: 196px; --split-up-x: 38%; }
.split-down-bird { --split-down-img: var(--mk-bird); --split-down-w: 420px; --split-down-h: 246px; --split-down-x: 54%; }
.split-up-bird { --split-up-img: var(--mk-bird); --split-up-w: 420px; --split-up-h: 246px; --split-up-x: 54%; }
.split-down-spiral { --split-down-img: var(--mk-spiral); --split-down-w: 340px; --split-down-h: 367px; --split-down-x: 30%; }
.split-up-spiral { --split-up-img: var(--mk-spiral); --split-up-w: 340px; --split-up-h: 367px; --split-up-x: 30%; }
.split-down-figure { --split-down-img: var(--mk-figure); --split-down-w: 240px; --split-down-h: 455px; --split-down-x: 70%; }
.split-up-figure { --split-up-img: var(--mk-figure); --split-up-w: 240px; --split-up-h: 455px; --split-up-x: 70%; }
/* The footer is not a .section, so it takes .section-mark.on-dark for the
colours and the same two-column treatment. */
.footer.dark-background::before {
background-image: var(--tk-spiral), var(--tk-wave);
background-position: left -170px top 0, right -180px top 40px;
background-size: 400px auto, 440px auto;
}
/* Phones: one column rather than two -- at 375px two columns meet in the middle
of the text.
The split halves are kept. They were switched off here, which meant that on
the viewport most of this site's traffic arrives at, the rule docs/style.md
calls the one that holds the system together -- a mark halved by a seam and
continuing into the next band -- did not run at all, and the cultural motif
system came down to a single faint column per section. The objection it was
turned off for was real at full size: a 440px wave behind a 390px screen is
wider than the text column and the eye cannot see where it continues. Scaling
the pair down answers that without losing the seam, so --split-scale drops
rather than display going to none. The columns move to the right edge, and the
pairs sit between 22% and 70% from the left, so the two layers stay clear of
each other. */
@media (max-width: 767.98px) {
.section-mark::after {
--split-scale: 0.52;
}
.section-mark::before {
background-image: var(--tk-spiral);
background-position: right -120px top 0;
background-size: 280px auto;
background-repeat: no-repeat space;
}
.scatter-b::before { background-image: var(--tk-bird); background-size: 300px auto; }
.scatter-c::before { background-image: var(--tk-llama); background-size: 260px auto; }
.scatter-d::before { background-image: var(--tk-sun); background-size: 280px auto; }
.scatter-e::before { background-image: var(--tk-figure); background-size: 190px auto; }
.scatter-f::before { background-image: var(--tk-wave); background-size: 300px auto; }
.footer.dark-background::before {
background-image: var(--tk-spiral);
background-size: 260px auto;
}
}
/*--------------------------------------------------------------
# Why Visit: the brand marks in the feature circles
# These were Bootstrap glyphs, which the base sheet colours with `color`.
# They are now the designer's PNGs, so the circle's hover state -- which fills
# with cyan and expects the glyph to turn white -- would otherwise leave a cyan
# mark on a cyan ground. brightness(0) invert(1) repaints any image white, the
# same trick the footer wordmark uses.
--------------------------------------------------------------*/
.why-us .feature-icon img {
width: 42px;
height: 42px;
object-fit: contain;
transition: filter 0.3s ease;
}
.why-us .feature-card:hover .feature-icon img {
filter: brightness(0) invert(1);
}
@media (prefers-reduced-motion: reduce) {
.why-us .feature-icon img {
transition: none;
}
}
/*--------------------------------------------------------------
# Photo credits
# The attribution CC BY and CC BY-SA require, folded into one control instead
# of a grey line under every photograph.
#
# It opens SIDEWAYS. The names unroll to the right of the pill, so nothing
# below moves -- a credit should not push the grid it is crediting down the
# page. grid-template-columns 0fr -> 1fr is what makes that animate to a
# content-sized width without measuring anything in JavaScript.
--------------------------------------------------------------*/
.photo-credits {
display: flex;
align-items: center;
gap: 10px;
margin-top: 18px;
font-size: 13px;
color: color-mix(in srgb, var(--default-color) 55%, white);
}
.photo-credits-toggle {
display: inline-flex;
align-items: center;
gap: 8px;
flex-shrink: 0;
padding: 6px 14px 6px 12px;
border: 1px solid color-mix(in srgb, var(--default-color) 12%, white);
border-radius: 99px;
background: none;
color: inherit;
font: inherit;
font-weight: 600;
cursor: pointer;
transition: border-color 0.2s ease, color 0.2s ease, background-color 0.2s ease;
}
.photo-credits-toggle:hover,
.photo-credits.is-open .photo-credits-toggle {
border-color: var(--accent-color);
color: var(--accent-color);
}
.photo-credits-caret {
width: 0;
height: 0;
border-left: 5px solid currentColor;
border-top: 4px solid transparent;
border-bottom: 4px solid transparent;
transition: transform 0.35s cubic-bezier(0.22, 0.61, 0.36, 1);
}
.photo-credits.is-open .photo-credits-caret {
transform: rotate(90deg);
}
.photo-credits-count {
opacity: 0.7;
font-weight: 400;
}
/* The sliding panel. Closed is a zero-width track; open is the content's own
width. The inner element does the clipping, because a grid track cannot. */
.photo-credits-panel {
display: grid;
grid-template-columns: 1fr;
min-width: 0;
}
.photo-credits-panel > ul {
margin: 0;
padding: 0;
list-style: none;
display: flex;
flex-wrap: wrap;
align-items: center;
gap: 4px 24px;
min-width: 0;
}
/* Closed by default. index.html carries a is an inline element, and an inline box generates a line box even
when the image inside it is absolutely positioned and takes no space. On the
stacked phone layout that line box was adding 60px of empty strip above the
copy, and the wordmark's own line box another 61px below it. */
.promo-banner picture,
.promo-banner-logo {
display: block;
}
.promo-banner-photo {
position: absolute;
inset: 0;
width: 100%;
height: 100%;
object-fit: cover;
/* Anchored to the side the sweep is on, so the wordmark always lands on it:
a centred crop slides the sweep off screen at some widths. */
object-position: 100% 50%;
}
.promo-banner.is-right .promo-banner-photo {
object-position: 0% 50%;
}
.promo-banner-inner {
position: relative;
z-index: 1;
display: flex;
align-items: center;
padding-block: 40px;
}
.promo-banner.is-right .promo-banner-inner {
/* Static, so the copy inside can be placed against the PLATE rather than
against this box: the band's height comes from aspect-ratio, which is not
a definite size, so height:100% and align-self:stretch both collapse to
the content height here (428px inside a 548px band) and the copy sank
into the wordmark. */
position: static;
}
.promo-banner.is-right .promo-banner-copy {
position: absolute;
z-index: 1;
/* Measured off the artwork: the block starts 7% down and runs to the right
edge, and the sweep owns everything below it. */
top: 2.1%;
right: 5%;
width: 35%;
}
/* Both plates share the heading size (see the shared rule); this one only
pulls its two lines tighter, because in the artwork they nearly touch. */
.promo-banner.is-right .promo-banner-heading {
line-height: 0.79;
}
/* Centred across the plate and low, as in the artwork: it belongs to the
whole banner rather than to the column of text. */
.promo-banner.is-right .promo-banner-cta {
left: 41.6%;
transform: translateX(-50%);
bottom: 3.5%;
/* The artwork's pill is 23% of the plate wide and 22% tall; scale it with
the plate rather than leaving it at a fixed UI size, or it shrinks into
a tag on a large screen. */
}
.promo-banner.is-right .promo-banner-cta:hover {
transform: translateX(-50%) translateY(-2px);
}
.promo-banner-copy {
/* Narrower than the half it sits in, on purpose: at 54% the longest heading
ran up against the subject in the photograph. */
max-width: 41%;
/* The plates are bright and the copy sits over open background. A shadow
rather than a scrim: a wash over the whole photograph would flatten it. */
text-shadow: 0 2px 10px rgba(0, 0, 0, 0.55), 0 1px 3px rgba(0, 0, 0, 0.7);
}
.promo-banner.is-right .promo-banner-copy {
/* Left-aligned inside the block, not right: in the artwork "Live the" and
"CARNAVAL" share a left edge and only the second heading line is pushed
across. The block as a whole sits on the right of the plate. */
text-align: left;
}
/* Measured off resources/banner/carnaval-REFERENCIA-con-texto.jpg, as
percentages of the plate:
Live the h 10.1 centre x 70.3
CARNAVAL h 12.3 centre x 76.4
SPIRIT h 15.5 (13 of it glyph, the rest its drop shadow) centre 79.0
subtitle h 4.4 centre x 77.2
and the gaps between them are 1.8, 0.9 and 1.6 — the four lines are one
tight block, not four stacked paragraphs.
SPIRIT is a little larger than CARNAVAL and sits centred beneath it. */
.promo-banner.is-right .promo-banner-heading-accent {
font-size: 1.13em;
text-align: center;
/* The artwork's second line sits a touch right of dead centre. */
transform: translateX(1.5%);
}
/* Spanish runs a third longer than English on this plate: "ESPIRITU DEL
CARNAVAL" against "CARNAVAL SPIRIT". At the English size the lead wrapped
onto a second line, which pushed the whole block down until the subtitle sat
across the wordmark -- the overlap the client reported. The block gets more
of the plate and the type is set smaller, both only where the document is in
Spanish (LocaleContext sets html lang), so the English plate still matches
the artwork it was measured from. */
:lang(es) .promo-banner.is-right .promo-banner-copy {
width: 44%;
top: 1.2%;
}
:lang(es) .promo-banner.is-right .promo-banner-heading {
font-size: calc(var(--band) * 0.132);
}
:lang(es) .promo-banner.is-right .promo-banner-eyebrow {
font-size: calc(var(--band) * 0.108);
}
/* Held on one line each: a wrap here is what started the pile-up, and at this
size both lines clear the block's width with room to spare. */
:lang(es) .promo-banner.is-right .promo-banner-heading span {
white-space: nowrap;
}
/* The words tilt very slightly, as in the artwork. Small enough to read as
hand-set rather than as a mistake, and pivoting on the edge the block is
anchored to. Only the type tilts: the button stays level, because a rotated
pill reads as a rendering fault where rotated type reads as styling. */
.promo-banner-text {
transform: rotate(-2.2deg);
transform-origin: left center;
}
.promo-banner.is-right .promo-banner-text {
transform-origin: right center;
}
.promo-banner-eyebrow {
/* Pushed down toward CARNAVAL, with the same amount taken off the bottom
so the line below does not move with it. */
margin: calc(var(--band) * 0.011) 0 calc(var(--band) * 0.001);
line-height: 1;
font-family: var(--heading-font);
/* Armonia Forte ships a real italic (see the @font-face pair in main.css),
so this is a drawn italic, not a browser-skewed fake. */
font-style: italic;
font-size: calc(var(--band) * 0.135);
font-weight: 700;
color: #fff;
}
.promo-banner-heading {
margin: 0;
font-family: var(--heading-font);
font-style: italic;
font-size: calc(var(--band) * 0.168);
font-weight: 700;
line-height: 0.86;
letter-spacing: -0.015em;
color: #fff;
text-transform: uppercase;
}
/* font: inherit because main.css styles every as 17px Inter body text,
which silently shrinks any span inside a heading. */
.promo-banner-heading span {
display: block;
font: inherit;
letter-spacing: inherit;
}
.promo-banner-heading-accent {
color: var(--secondary-accent);
}
/* The accent belongs to the plate: gold reads on the valley's greens, and the
carnival plate takes the yellow of its own artwork. Red was tried and
dropped — the costume is already red and pink, and the word sank into it. */
.promo-banner.accent-red {
--promo-accent: #FFD400;
}
.promo-banner.accent-red .promo-banner-heading-accent {
color: var(--promo-accent);
}
/* Only the accent word is coloured; the eyebrow stays white with the lead. */
.promo-banner.accent-red .promo-banner-eyebrow {
color: #fff;
}
/* The first line stays white on both plates. Stated explicitly because the
rule above used to match every span in the heading and turned CARNAVAL red
along with SPIRIT. */
.promo-banner-heading-lead {
color: #fff;
}
.promo-banner-subtitle {
margin: calc(var(--band) * 0.016) 0 0;
line-height: 1;
font-family: var(--heading-font);
font-style: italic;
font-size: calc(var(--band) * 0.047);
font-weight: 700;
color: #fff;
}
.promo-banner-cta {
display: inline-flex;
align-items: center;
gap: 12px;
/* Placed against the plate, at the position measured off the artwork. */
position: absolute;
left: 5%;
bottom: 13%;
z-index: 2;
padding: 12px 14px 12px 26px;
border-radius: 99px;
background: var(--btn-color);
color: #fff;
font-size: 14px;
font-weight: 700;
letter-spacing: 0.1em;
text-transform: uppercase;
text-shadow: none;
/* The pill is positioned against the wordmark, so it must not reflow to two
lines when that gap tightens. */
white-space: nowrap;
box-shadow: 0 8px 22px rgba(0, 0, 0, 0.28);
transition: background-color 0.2s ease, transform 0.2s ease;
}
.promo-banner-cta i {
display: flex;
align-items: center;
justify-content: center;
width: 28px;
height: 28px;
border-radius: 50%;
background: var(--accent-color);
color: var(--cian-deepest);
font-size: 15px;
transition: transform 0.2s ease;
}
.promo-banner-cta:hover {
background: var(--btn-hover-color);
color: #fff;
transform: translateY(-2px);
}
.promo-banner-cta:hover i {
transform: translateX(3px);
}
/* Pinned to the corner the sweep occupies rather than laid out in the flex
row: the sweep is part of the photograph, and the corner is the one point
that stays coloured at every width. Percentages, so it tracks the sweep as
the plate scales.
Note this does NOT follow `align`: both plates carry their sweep bottom
right, and it is the sweep the wordmark has to sit on, not the copy. */
/* Only in play where the button is hidden; see the phone rules. */
.promo-banner-cover {
display: none;
}
.promo-banner-logo {
position: absolute;
right: 3.1%;
bottom: 2%;
z-index: 2;
/* Sized by height, like the type, and big: in the artwork the wordmark
fills the sweep rather than sitting politely inside it. */
/* The artwork's lockup is proportionally wider than this file (about 2.14:1
against 1.85:1), so matching its WIDTH would make ours 7 points taller and
push it into the subtitle. Height is matched instead: y 50.0-95.5. */
width: calc(var(--band) * 0.79);
height: auto;
}
@media (prefers-reduced-motion: reduce) {
.promo-banner-cta:hover,
.promo-banner-cta:hover i {
transform: none;
}
}
@media (max-width: 767.98px) {
/* Phones only. Above this the plate keeps its own ratio and the whole
composition simply scales, which is what makes it look like the artwork
at any window size; here the band would have to be squarer than the
photograph and cover would zoom straight past the subject, so the copy
stops sharing the width and the plate darkens to carry white type. */
.promo-banner {
display: block;
/* Stacked copy sets the height here, not the plate's ratio. The floor is
low so the band ends just under the wordmark instead of leaving a dead
strip of sweep below it. */
height: auto;
min-height: 300px;
}
/* --band is a function of width, and at phone width it collapses to about
160px, which made every size derived from it tiny. The stacked layout is
a different composition anyway, so it gets its own sizes in rem. */
.promo-banner-eyebrow {
font-size: 1.15rem;
margin: 0 0 2px;
}
.promo-banner-heading {
font-size: 2.5rem;
}
.promo-banner-subtitle {
font-size: 0.95rem;
margin-top: 10px;
}
.promo-banner::after {
content: "";
position: absolute;
inset: 0;
background: linear-gradient(to right, rgba(12, 22, 12, 0.72), rgba(12, 22, 12, 0.35));
}
.promo-banner.is-right::after {
background: linear-gradient(to left, rgba(12, 22, 12, 0.72), rgba(12, 22, 12, 0.35));
}
.promo-banner-inner {
z-index: 2;
flex-direction: column;
align-items: flex-start;
padding-block: 26px 0;
}
.promo-banner.is-right .promo-banner-inner {
align-items: flex-end;
}
.promo-banner-copy {
max-width: 100%;
}
/* The mirrored plate places its copy absolutely against the band on
desktop; at phone width it goes back into the flow with everything else,
or it keeps a 35% column and the heading runs off the screen. */
.promo-banner.is-right .promo-banner-copy {
position: static;
width: auto;
text-align: left;
}
.promo-banner.is-right .promo-banner-heading-accent {
text-align: left;
transform: none;
}
.promo-banner.is-right .promo-banner-inner {
position: relative;
align-items: flex-start;
padding-top: 26px;
}
/* Both plates now have a portrait crop, so neither is reframed: each is
shown whole at its own 5:4 ratio and the layout follows its artwork.
Measured off cajamarca-banner-region@2x-referencia-contexto-mobile.jpg:
It's Time To y 9-18 DISCOVER y 17-26 CAJAMARCA y 26-35
subtitle y 35-42 wordmark x 62-99, y 74-97
The copy sits top right here, the mirror of the carnival plate. */
.promo-banner {
aspect-ratio: 1500 / 1200;
height: auto;
min-height: 0;
}
.promo-banner .promo-banner-photo {
object-position: 50% 50%;
}
/* The portrait crops leave their own clear space for the copy, so the
photograph no longer has to be darkened to carry it. */
.promo-banner::after {
content: none;
}
.promo-banner.is-left .promo-banner-inner {
position: static;
padding: 0;
}
/* Measured off the reference: every line shares a left edge at about 34%
of the plate — DISCOVER starts at 34, CAJAMARCA at 33, the subtitle at
34 — and the block runs to the right edge from there. It is left-aligned,
not right-aligned; anchoring it right put the lines on the wrong axis.
Anchored to the plate, not to the container inside it. */
.promo-banner.is-left .promo-banner-copy {
position: absolute;
top: 7%;
left: 33%;
right: 3%;
width: auto;
max-width: none;
text-align: left;
}
/* "It's Time To" sits very slightly in from that edge in the artwork. */
.promo-banner.is-left .promo-banner-eyebrow {
padding-left: 2%;
}
.promo-banner.is-left .promo-banner-heading-accent {
text-align: left;
transform: none;
}
.promo-banner.is-left .promo-banner-eyebrow {
font-size: 4.4vw;
margin: 0 0 0.3vw;
}
.promo-banner.is-left .promo-banner-heading {
font-size: 8.2vw;
line-height: 0.82;
}
.promo-banner.is-left .promo-banner-subtitle {
/* 2.55vw is 9.9px on a 390px screen. The vw keeps the artwork's
proportion above that, the floor holds below it. */
font-size: max(13px, 2.55vw);
margin-top: 1.2vw;
}
.promo-banner.is-left .promo-banner-logo {
position: absolute;
right: 1%;
bottom: 3%;
width: 38%;
margin: 0;
}
/* Bottom left, over the open field beside the woman. */
.promo-banner.is-left a.promo-banner-cta {
position: absolute;
left: 3%;
bottom: 3.5%;
top: auto;
margin: 0;
/* 10.5px was the smallest interactive label on the site. 13px is the
floor; the padding comes in a little so the pill still clears the
figure in the artwork at phone width. */
padding: 7px 8px 7px 13px;
font-size: 13px;
gap: 6px;
}
.promo-banner.is-left a.promo-banner-cta i {
width: 19px;
height: 19px;
font-size: 11px;
}
/* The carnival plate DOES have a portrait crop (see mobileWebp in the page
content), so it is shown whole at its own 5:4 ratio rather than cropped,
and the layout follows the artwork: the girl fills the frame, the copy
sits bottom left and the wordmark on the sweep bottom right.
Measured off carnaval-REFERENCIA-con-texto-mobile.jpg:
Live the y 70-80 CARNAVAL y 78-87 SPIRIT y 86-95
subtitle y 95-98 wordmark x 55-98, y 73-100 */
.promo-banner.is-right {
aspect-ratio: 1500 / 1200;
height: auto;
min-height: 0;
}
.promo-banner.is-right .promo-banner-photo {
object-position: 50% 50%;
}
/* No scrim: the portrait plate leaves its own clear space for the copy. */
.promo-banner.is-right::after {
content: none;
}
.promo-banner.is-right .promo-banner-inner {
position: absolute;
/* Where the artwork puts it: the copy runs from about 70% of the height
to the bottom edge. Lifting it to make room for the button put the
heading across the girl's mouth, so the button moves instead. */
inset: auto 0 2% 0;
padding: 0 0 0 3%;
align-items: flex-start;
justify-content: flex-start;
}
.promo-banner.is-right .promo-banner-copy {
position: static;
width: 56%;
text-align: left;
}
.promo-banner.is-right .promo-banner-eyebrow {
font-size: 4.4vw;
margin: 0 0 0.3vw;
}
.promo-banner.is-right .promo-banner-heading {
font-size: 8.2vw;
line-height: 0.82;
}
.promo-banner.is-right .promo-banner-heading-accent {
text-align: left;
transform: translateX(3%);
}
.promo-banner.is-right .promo-banner-subtitle {
/* Floor, as on the mirrored plate: 2.55vw is 9.9px at phone width. */
font-size: max(13px, 2.55vw);
margin-top: 1.2vw;
}
/* The wordmark sits on the sweep, as in the portrait artwork. */
.promo-banner.is-right .promo-banner-logo {
position: absolute;
right: 1%;
bottom: 3%;
width: 38%;
margin: 0;
}
/* The artwork has no button on the phone crop; keeping one would cover the
girl. The whole band is the link instead -- see PromoBanner.jsx. */
/* Bottom left, under the copy, clear of the wordmark on the sweep.
a.promo-banner-cta for specificity: the shared phone rule above puts
every button back into the flow, and it comes later in the file. */
/* Top left: the only corner the artwork leaves free once the copy is in
its proper place at the foot of the plate. */
.promo-banner.is-right a.promo-banner-cta {
position: absolute;
left: 3%;
top: 4%;
bottom: auto;
margin: 0;
/* 10.5px was the smallest interactive label on the site. 13px is the
floor; the padding comes in a little so the pill still clears the
figure in the artwork at phone width. */
padding: 7px 8px 7px 13px;
font-size: 13px;
gap: 6px;
}
.promo-banner.is-right a.promo-banner-cta i {
width: 19px;
height: 19px;
font-size: 11px;
}
/* The copy sits over the photograph here rather than beside it, so the
scrim has to carry more of the contrast than it does on a wide screen. */
.promo-banner::after {
background: linear-gradient(to bottom, rgba(10, 16, 10, 0.78) 0%, rgba(10, 16, 10, 0.55) 55%, rgba(10, 16, 10, 0.32) 100%);
}
.promo-banner.is-right::after {
background: linear-gradient(to bottom, rgba(10, 16, 10, 0.78) 0%, rgba(10, 16, 10, 0.55) 55%, rgba(10, 16, 10, 0.32) 100%);
}
/* No tilt at phone width: the block is nearly the full column, so the
rotation pushes the long lines into the edges. */
.promo-banner-text {
transform: none;
}
.promo-banner-cta {
transform: none;
}
/* Back into the flow under the copy: at this width there is no sweep to
sit beside. */
.promo-banner.is-right .promo-banner-cta,
.promo-banner-cta {
position: relative;
inset: auto;
transform: none;
display: inline-flex;
margin: 0 0 0 12px;
}
.promo-banner.is-right .promo-banner-inner {
padding-top: 40px;
}
.promo-banner-cta:hover {
transform: translateY(-2px);
}
/* Below 992px the crop keeps only a corner of the sweep, too small to seat
the wordmark on, so it returns to the flow under the button. relative,
not static: the photograph is absolutely positioned, and an absolute
sibling paints above static in-flow content whatever its z-index says. */
.promo-banner-logo {
position: relative;
inset: auto;
width: 210px;
height: auto;
/* 12px matches the .container gutter, so it lines up with the copy. */
margin: 14px 0 22px 12px;
}
.promo-banner.is-right .promo-banner-logo {
left: auto;
margin-left: 0;
margin-right: 12px;
float: right;
}
}
/*--------------------------------------------------------------
# Particulars (homepage reference section)
--------------------------------------------------------------
A full-width section, not a card: title, then the map running edge to edge,
then the four plates, then the statement beside the data. Everything
collapses toward one column below 991px, where side-by-side blocks would be
too narrow to read. */
.particulars {
/* Off-white against the white intro above it and the white Why Visit band
below, so the section reads as its own block rather than running into
either. A hairline closes it off where the next band is the same white. */
border-top: 1px solid color-mix(in srgb, var(--default-color) 8%, white);
border-bottom: 1px solid color-mix(in srgb, var(--default-color) 8%, white);
}
/* The plates and the data sit on the off-white ground, so their own fill has
to lift off it rather than match it. */
.particulars-plate {
background: var(--surface-color);
}
.particulars .section-title {
padding-bottom: 36px;
}
/* No pill above this heading any more -- "City Facts" over a heading reading
"Particulars" was the same thing said twice -- so the 18px that opened the
gap under the pill goes with it and the heading sits at the top of the
block. .no-eyebrow says so in the markup, for any other section that drops
its pill later. */
.particulars .section-title h2,
.particulars .section-title h3 {
margin: 0;
font-size: clamp(28px, 2.6vw, 36px);
}
.particulars .section-title p {
margin: 12px auto 0;
max-width: 62ch;
color: color-mix(in srgb, var(--default-color) 70%, white);
}
.particulars-map-heading {
margin: 0 0 22px;
text-align: center;
font-size: clamp(24px, 2.4vw, 34px);
font-weight: 700;
color: var(--heading-color);
letter-spacing: -0.01em;
}
/* The map is the one element allowed out of the container. */
.particulars-map-stage {
position: relative;
width: 100%;
height: clamp(340px, 46vh, 520px);
background: var(--cian-light);
}
.particulars-map-stage iframe {
display: block;
width: 100%;
height: 100%;
border: 0;
}
.particulars-map-caption {
margin: 14px 0 0;
text-align: center;
font-size: 13px;
color: color-mix(in srgb, var(--default-color) 60%, white);
}
.particulars-map-caption a {
/* 13px link on white; the raw accent measures 2.3:1 here. */
color: var(--cian-ink);
font-weight: 600;
white-space: nowrap;
}
/* Plates: locator map, coat of arms, city flag, national flag ---- */
.particulars-plates {
display: grid;
grid-template-columns: repeat(4, minmax(0, 1fr));
gap: 18px;
margin-top: 40px;
}
.particulars-plate {
margin: 0;
border-radius: 18px;
border: 1px solid color-mix(in srgb, var(--default-color) 8%, white);
overflow: hidden;
}
.particulars-plate-stage {
position: relative;
display: flex;
align-items: center;
justify-content: center;
height: 190px;
padding: 22px;
}
.particulars-plate-stage img {
display: block;
max-height: 100%;
max-width: 100%;
width: auto;
object-fit: contain;
}
/* The CC BY-SA credit the locator map's licence requires. Quiet, but present
and linked: the licence holds only while the author is named where the work
is shown. */
/* Was 10px, the smallest type on the site. */
.particulars-plate-credit {
display: block;
margin-top: 6px;
font-size: 13px;
font-weight: 500;
letter-spacing: 0;
text-transform: none;
line-height: 1.5;
/* 50% ink measured 4.1:1; --muted-color is the grey the style guide
prescribes and clears the bar. */
color: var(--muted-color);
}
.particulars-plate-credit a {
color: inherit;
text-decoration: underline;
}
.particulars-plate-credit a:hover {
color: var(--accent-color);
}
/* The flags carry white in them and the plate is white, so without an edge a
flag loses its border into the card. A hairline is enough; a heavier frame
would look like a mount. */
.particulars-plate-stage img.is-flag {
border: 1px solid color-mix(in srgb, var(--default-color) 18%, white);
}
/* The locator is a map, not an emblem: it fills its plate edge to edge and
takes the pin. No padding here -- the pin is positioned as a percentage of
this box, so the image has to be the box for the coordinates to land. */
.particulars-plate-stage.is-map {
padding: 16px;
background: #fff;
transition: box-shadow 0.2s ease;
}
.particulars-plate-map {
position: relative;
display: block;
height: 100%;
}
.particulars-plate-map img {
display: block;
height: 100%;
width: auto;
}
.particulars-plate-stage.is-map:hover {
box-shadow: inset 0 0 0 2px var(--accent-color);
}
/* The hint under the locator plate's label. Lighter and in sentence case, so
it reads as an invitation rather than a second caption. */
.particulars-plate-hint {
display: block;
margin-top: 6px;
/* 12px was below the 13px floor and the raw accent measured 2.3:1 on the
white plate. Both fixed; this stays the smallest step in the caption. */
font-size: 13px;
font-weight: 600;
letter-spacing: 0;
text-transform: none;
color: var(--cian-ink);
}
.particulars-plate:hover .particulars-plate-hint {
color: var(--oro-ink);
}
.particulars-plate figcaption {
padding: 16px 18px;
border-top: 1px solid rgba(17, 17, 17, 0.08);
text-align: center;
font-size: 13px;
font-weight: 700;
letter-spacing: 0.06em;
text-transform: uppercase;
color: var(--heading-color);
}
/* The marker is placed from coordinates in Particulars.jsx, so it stays put
as the image scales. The ring pulses to draw the eye without animating
anything for a reader who has asked for less motion. */
.particulars-pin {
position: absolute;
width: 10px;
height: 10px;
margin: -5px 0 0 -5px;
border-radius: 50%;
background: var(--tertiary-accent);
box-shadow: 0 0 0 2px #fff, 0 1px 4px rgba(0, 0, 0, 0.4);
}
/* Named beside the dot. The white halo is what keeps it readable over the
country fill and the coastline both, without a box that would cover the
map. */
.particulars-pin-label {
position: absolute;
left: 14px;
top: 50%;
transform: translateY(-50%);
white-space: nowrap;
font-size: 13px;
font-weight: 800;
letter-spacing: 0.02em;
color: var(--heading-color);
text-shadow:
0 0 3px #fff, 0 0 3px #fff, 0 0 3px #fff,
1px 1px 0 #fff, -1px 1px 0 #fff, 1px -1px 0 #fff, -1px -1px 0 #fff;
pointer-events: none;
}
.particulars-pin::after {
content: "";
position: absolute;
inset: -5px;
border-radius: 50%;
border: 2px solid var(--tertiary-accent);
opacity: 0;
animation: particulars-pulse 2.4s ease-out infinite;
}
@keyframes particulars-pulse {
0% { transform: scale(0.6); opacity: 0.9; }
70% { transform: scale(1.6); opacity: 0; }
100% { opacity: 0; }
}
/* Statement beside the data ------------------------------------- */
.particulars-bottom {
display: grid;
grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.3fr);
gap: 24px;
margin-top: 40px;
align-items: stretch;
}
.particulars-statement {
position: relative;
display: flex;
flex-direction: column;
justify-content: flex-end;
padding: 28px;
min-height: 420px;
border-radius: 18px;
overflow: hidden;
/* The teal ground, flat. There was a white radial over the top right of it,
a simulated light source with no light in the scene to justify it. The
video that plays inside this card is the light. */
background: linear-gradient(160deg, var(--cian-deep) 0%, var(--cian-deepest) 100%);
color: #fff;
}
.particulars-statement-video {
position: absolute;
inset: 0;
width: 100%;
height: 100%;
object-fit: cover;
/* The card is roughly 500 CSS px wide and the file is 1920, so the browser
is downscaling hard. Telling it to interpolate smoothly rather than
nearest-neighbour is what stops the descent reading as blocky on a
non-retina screen. */
image-rendering: auto;
backface-visibility: hidden;
transform: translateZ(0);
/* The clip is cropped by the card, so any aspect ratio fits: the export does
not have to match this box. Colour and contrast are baked into the encode
(see the ffmpeg eq filter used to build it) rather than applied here, so
the browser is not filtering every frame. */
}
/* Keeps the type legible whatever frame is on screen, video or not. */
/* A scrim under the buttons only. Dimming the whole clip washed it out; this
darkens just the bottom of the card, where the buttons need the contrast. */
.particulars-statement::after {
content: "";
position: absolute;
inset: auto 0 0 0;
height: 45%;
background: linear-gradient(to top, rgba(4, 22, 26, 0.75), transparent);
pointer-events: none;
}
.particulars-statement-body {
position: relative;
z-index: 1;
display: flex;
flex-direction: column;
/* Bottom-right corner of the clip: the descent lands left of centre, so the
button stays clear of the city rather than covering it. */
justify-content: flex-end;
align-items: flex-end;
height: 100%;
}
.particulars-statement-links {
display: flex;
flex-wrap: wrap;
gap: 12px;
/* Held back until the descent lands; see the reveal effect in
Particulars.jsx. Hidden with opacity rather than display so the card's
height never changes and nothing below it jumps. */
opacity: 0;
transform: translateY(16px);
filter: blur(4px);
/* Slow, and eased so it settles rather than stops: the clip has just landed
and the button should feel like it arrives with it. */
transition:
opacity 900ms cubic-bezier(0.22, 0.61, 0.36, 1),
transform 900ms cubic-bezier(0.22, 0.61, 0.36, 1),
filter 900ms ease;
pointer-events: none;
}
.particulars-statement-links.is-revealed {
opacity: 1;
transform: none;
filter: none;
pointer-events: auto;
}
/* The button used to fire an expanding cyan ring on reveal -- the notification
pulse every dashboard puts on a badge. The fade that brings the links in is
enough to find them; a second animation on top of it was decoration asking
to be noticed. */
@media (prefers-reduced-motion: reduce) {
.particulars-statement-links {
transition: none;
filter: none;
transform: none;
}
}
/* Buttons rather than arrow links: over video the underline-less link read as
a caption. Solid cyan leads, the source sits behind glass beside it. */
.particulars-btn {
display: inline-flex;
align-items: center;
gap: 10px;
padding: 12px 22px;
border-radius: 99px;
font-size: 13px;
font-weight: 700;
letter-spacing: 0.06em;
text-transform: uppercase;
text-shadow: none;
transition: background-color 0.2s ease, border-color 0.2s ease, transform 0.2s ease, color 0.2s ease;
}
.particulars-btn i {
font-size: 14px;
transition: transform 0.2s ease;
}
.particulars-btn:hover {
transform: translateY(-2px);
}
.particulars-btn.is-primary {
background: var(--accent-color);
color: var(--cian-deepest);
}
.particulars-btn.is-primary:hover {
background: #fff;
color: var(--cian-deepest);
}
.particulars-btn.is-primary:hover i {
transform: translateX(4px);
}
.particulars-btn.is-ghost {
border: 1.5px solid rgba(255, 255, 255, 0.45);
background: rgba(255, 255, 255, 0.08);
color: #fff;
backdrop-filter: blur(4px);
}
.particulars-btn.is-ghost:hover {
border-color: #fff;
background: rgba(255, 255, 255, 0.18);
color: #fff;
}
@media (prefers-reduced-motion: reduce) {
/* Named beside the dot. The white halo is what keeps it readable over the
country fill and the coastline both, without a box that would cover the
map. */
.particulars-pin-label {
position: absolute;
left: 14px;
top: 50%;
transform: translateY(-50%);
white-space: nowrap;
font-size: 13px;
font-weight: 800;
letter-spacing: 0.02em;
color: var(--heading-color);
text-shadow:
0 0 3px #fff, 0 0 3px #fff, 0 0 3px #fff,
1px 1px 0 #fff, -1px 1px 0 #fff, 1px -1px 0 #fff, -1px -1px 0 #fff;
pointer-events: none;
}
.particulars-pin::after { animation: none; }
.particulars-btn:hover { transform: none; }
.particulars-btn:hover i { transform: none; }
}
.particulars-data h4 {
margin: 0 0 14px;
font-size: 13px;
font-weight: 700;
letter-spacing: 0.1em;
text-transform: uppercase;
color: color-mix(in srgb, var(--default-color) 55%, white);
}
.particulars-data dl {
margin: 0;
display: grid;
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: 2px;
}
.particulars-fact {
padding: 12px 16px;
border-top: 1px solid color-mix(in srgb, var(--default-color) 10%, white);
border-left: 3px solid transparent;
transition: background-color 0.18s ease, border-color 0.18s ease;
}
.particulars-fact:hover {
background: var(--cian-light);
border-left-color: var(--accent-color);
}
.particulars-fact dt {
/* The label of every fact in the table: 12px raw gold on white measured
3.1:1, under the floor on both counts. 13px and the ink keep it clearly
the smaller, quieter half of the pair without making it unreadable. */
font-size: 13px;
font-weight: 700;
letter-spacing: 0.04em;
text-transform: uppercase;
color: var(--oro-ink);
margin-bottom: 3px;
}
.particulars-fact dd {
margin: 0;
font-size: 15px;
line-height: 1.5;
color: var(--default-color);
}
@media (max-width: 991.98px) {
.particulars-plates {
grid-template-columns: repeat(2, minmax(0, 1fr));
}
.particulars-bottom {
grid-template-columns: minmax(0, 1fr);
}
.particulars-statement {
padding: 28px 24px;
}
}
@media (max-width: 575.98px) {
.particulars-plates,
.particulars-data dl {
grid-template-columns: minmax(0, 1fr);
}
.particulars-plate-stage {
height: 160px;
}
}
/*--------------------------------------------------------------
# Why Visit teasers
# Three questions under the reasons grid, each answered on the Trivia page.
# Set as a description list with the icon outside the term/definition pair, so
# the icon stays decoration and the text keeps its structure. Three across on
# desktop, stacked below 991px where three columns of prose go too narrow. */
.why-teasers {
margin: 44px 0 0;
display: grid;
grid-template-columns: repeat(3, minmax(0, 1fr));
gap: 24px;
}
.why-teaser {
display: flex;
gap: 14px;
padding: 22px 20px;
border-radius: 12px;
border: 1px solid color-mix(in srgb, var(--default-color) 8%, white);
background: var(--background-color);
}
.why-teaser > i {
flex: 0 0 auto;
font-size: 20px;
line-height: 1.2;
color: var(--secondary-accent);
}
.why-teaser dt {
margin-bottom: 6px;
font-size: 15px;
font-weight: 700;
color: var(--heading-color);
}
.why-teaser dd {
margin: 0;
font-size: 15px;
line-height: 1.6;
color: color-mix(in srgb, var(--default-color) 78%, white);
}
/* This line sits on the red section, so it takes the contrast colour rather
than the default ink, and the link is a pill button instead of inline text:
a cyan link on red is both hard to read and hard to hit. */
.why-teasers-cta {
margin: 28px 0 0;
display: flex;
flex-direction: column;
align-items: center;
gap: 16px;
text-align: center;
font-size: 15px;
color: var(--contrast-color);
}
.why-teasers-cta a {
display: inline-flex;
align-items: center;
gap: 10px;
padding: 12px 26px;
border-radius: 99px;
background: var(--contrast-color);
color: var(--tertiary-accent);
font-weight: 700;
white-space: nowrap;
transition: background-color 0.2s ease, color 0.2s ease, transform 0.2s ease;
}
.why-teasers-cta a:hover {
background: var(--secondary-accent);
color: var(--contrast-color);
transform: translateY(-2px);
}
.why-teasers-cta a i {
transition: transform 0.2s ease;
}
.why-teasers-cta a:hover i {
transform: translateX(4px);
}
@media (prefers-reduced-motion: reduce) {
.why-teasers-cta a:hover i,
.why-teasers-cta a:hover { transform: none; }
}
@media (max-width: 991.98px) {
.why-teasers {
grid-template-columns: minmax(0, 1fr);
}
}
/*--------------------------------------------------------------
# Where to Stay: category jump links
# Bubbles under the opening paragraph, one per section on the page. Same pill
# shape as the filter pills on the hub pages, but these are anchors, not state:
# they move the reader down the page rather than changing what is rendered. */
.stay-jump {
/* Sticks under the site header as the reader moves down the page. The offset
is --sticky-offset, the same variable the Things to Do filter bar uses:
Layout.jsx slides the header away on the way down and zeroes that
variable, so this bar rides up into the space instead of leaving a gap
where the navbar was. The transition is what keeps the two in step. */
position: sticky;
top: var(--sticky-offset);
transition: top 0.3s ease;
z-index: 20;
margin: 0 -12px 44px;
padding: 12px;
background: color-mix(in srgb, var(--background-color) 92%, transparent);
backdrop-filter: blur(6px);
border-radius: 12px;
}
.stay-jump-inner {
display: flex;
flex-wrap: wrap;
justify-content: center;
gap: 10px;
max-width: 900px;
margin: 0 auto;
}
.stay-jump-link {
display: inline-block;
padding: 10px 20px;
border-radius: 99px;
border: 1.5px solid color-mix(in srgb, var(--default-color) 12%, white);
background: var(--surface-color);
color: var(--heading-color);
font-size: 14px;
font-weight: 600;
line-height: 1.3;
transition: background-color 0.18s ease, border-color 0.18s ease, color 0.18s ease;
}
.stay-jump-link:hover {
background: var(--cian-dark);
border-color: var(--cian-dark);
color: var(--background-color);
}
/* .section sets overflow: clip, which in some engines stops a descendant from
sticking. The stays section has nothing to clip, so it opts out. */
#stays {
overflow: visible;
}
@media (max-width: 575.98px) {
/* Too many pills to stack at phone width, so the bar scrolls sideways
instead and keeps its place under the header. */
.stay-jump-inner {
flex-wrap: nowrap;
justify-content: flex-start;
overflow-x: auto;
scrollbar-width: none;
}
.stay-jump-inner::-webkit-scrollbar {
display: none;
}
.stay-jump-link {
white-space: nowrap;
}
}
/*--------------------------------------------------------------
# The photo viewer's caption panel
# GLightbox ships its own typography -- a system sans at the browser default
# size -- so the panel beside an opened photograph read as a stray browser
# dialog rather than as part of this site. It takes the page's own type here:
# the display face for the dish name, Inter for the note, and the site's ink
# rather than near-black. See docs/style.md.
#
# Not scoped to one page: the Gallery and the landmark pages open the same
# viewer, and a caption should look the same wherever it appears.
--------------------------------------------------------------*/
.glightbox-container .gslide-description {
position: relative;
/* Scrolls rather than clips: with the local note under it, the longest
entries run past the foot of the panel, and a caption that cannot be
finished is worse than no caption. */
overflow-y: auto;
overscroll-behavior: contain;
background: var(--surface-color);
padding: 26px 30px;
}
/* The same brand marks the sections carry, at the same weight: the panel is a
light ground, so it takes the light-ground colours. Two of them, bleeding
off the bottom and the top edge, which leaves the middle of the panel -- the
part the text occupies -- clear. */
.glightbox-container .gslide-description::before {
content: "";
position: absolute;
inset: 0;
z-index: 0;
pointer-events: none;
opacity: 0.1;
background-repeat: no-repeat;
background-image:
url("/assets/icons/sun-terracotta.png"),
url("/assets/icons/spiral-cyan.png");
background-position:
right -70px bottom -80px,
left -80px top -90px;
background-size: 240px auto, 200px auto;
}
/* Everything in the panel sits above the marks. */
.glightbox-container .gslide-description > * {
position: relative;
z-index: 1;
}
.glightbox-container .gslide-title {
margin-bottom: 12px;
font-family: var(--heading-font);
font-size: 1.35rem;
font-weight: 700;
line-height: 1.2;
letter-spacing: -0.01em;
color: var(--heading-color);
}
.glightbox-container .gslide-desc {
font-family: var(--default-font);
font-size: 0.95rem;
line-height: 1.65;
/* Left aligned, not justified. This panel is about 380px wide, and
justification at that measure stretches the word spaces until the lines
reach the right edge in uneven jumps -- the text ends up looking pushed
against the right side. The site justifies its long-form prose because
those columns are wide enough to absorb it; this one is not. */
text-align: left;
color: color-mix(in srgb, var(--default-color) 78%, white);
}
.glightbox-container .gslide-desc a {
color: var(--accent-color);
font-weight: 600;
}
/* The local note is an aside, not a second definition, and it was reading as
a second definition: same size, same colour, same shape as the paragraph
above it. It is a card now -- its own gold-tinted ground, a gold rule down
the left edge, a small label, and the note itself set smaller and in italic.
The eye can tell at a glance that it is a different kind of sentence. */
/* 4px, like every other accent stripe on the site: the callout marker is one
idiom in three colours, not three idioms. */
.glightbox-container .dish-trivia {
margin-top: 20px;
padding: 14px 16px;
border-radius: 12px;
border-left: 4px solid var(--secondary-accent);
background: var(--oro-light);
}
.glightbox-container .dish-trivia-label {
margin: 0 0 6px;
font-family: var(--default-font);
font-size: 10px;
font-weight: 700;
font-style: normal;
letter-spacing: 0.1em;
text-transform: uppercase;
color: var(--secondary-accent);
}
.glightbox-container .dish-trivia p:not(.dish-trivia-label) {
margin: 0;
font-size: 0.88rem;
font-style: italic;
line-height: 1.6;
color: color-mix(in srgb, var(--default-color) 82%, white);
}
/* The arrows and the close control sit on the photograph, so they take the
same pill treatment the rest of the site gives a control over an image. */
.glightbox-container .gnext,
.glightbox-container .gprev,
.glightbox-container .gclose {
background-color: rgba(10, 12, 14, 0.55);
border-radius: 99px;
transition: background-color 0.2s ease;
}
.glightbox-container .gnext:hover,
.glightbox-container .gprev:hover,
.glightbox-container .gclose:hover {
background-color: var(--btn-color);
}
/* Below 900px GLightbox drops the side panel under the photograph, where the
padding above is too generous for a phone. */
@media (max-width: 900px) {
.glightbox-container .gslide-description {
padding: 20px 22px;
}
.glightbox-container .gslide-title {
font-size: 1.2rem;
}
}
/*--------------------------------------------------------------
# Dish cards (/food-dining)
# The photograph opens in the Gallery's viewer with the dish's own note beside
# it, so it has to look like something you can open: the cursor says zoom, and
# the picture lifts slightly under the pointer. The card clips the overflow, so
# the scale reads as the photograph moving inside its frame rather than as the
# card growing.
--------------------------------------------------------------*/
.food-card .food-lightbox {
display: block;
overflow: hidden;
cursor: zoom-in;
}
.food-card .food-lightbox img {
transition: transform 0.35s cubic-bezier(0.22, 0.61, 0.36, 1);
}
.food-card .food-lightbox:hover img,
.food-card .food-lightbox:focus-visible img {
transform: scale(1.06);
}
.food-card .food-lightbox:focus-visible {
outline: 3px solid var(--accent-color);
outline-offset: -3px;
}
@media (prefers-reduced-motion: reduce) {
.food-card .food-lightbox img,
.food-card .food-lightbox:hover img {
transition: none;
transform: none;
}
}
/*--------------------------------------------------------------
# The timeline spine
# The timeline renders
down the middle of the
# milestones, and nothing ever styled it -- it ran with no line connecting its
# markers, which is what made it read as broken rather than as a timeline. The
# line is drawn here, behind the year markers, and stops short at each end so
# it does not run past the first and last of them.
#
# Not scoped to a page: the timeline moved from /about to /history-culture,
# where its four milestones of city history actually belong, and the class
# names are specific enough to stand on their own.
--------------------------------------------------------------*/
.journey-timeline .timeline-container {
position: relative;
}
.journey-timeline .timeline-track {
position: absolute;
top: 40px;
bottom: 40px;
left: 50%;
width: 2px;
margin-left: -1px;
border-radius: 2px;
background: linear-gradient(
to bottom,
transparent,
color-mix(in srgb, var(--accent-color) 45%, white) 8%,
color-mix(in srgb, var(--accent-color) 45%, white) 92%,
transparent
);
z-index: 0;
}
/* The spine fills from the top down to the marker being read. It is the
same gradient as the track, at full strength, so the filled part reads as
the line lit rather than as a second line drawn over it. */
.journey-timeline .timeline-track-fill {
position: absolute;
inset: 0 0 auto;
display: block;
width: 100%;
border-radius: 2px;
background: var(--accent-color);
transition: height 0.5s cubic-bezier(0.22, 0.61, 0.36, 1);
}
/* Header ------------------------------------------------------- */
.journey-timeline .timeline-header .timeline-lead {
margin-bottom: 14px;
}
.journey-timeline .timeline-header .timeline-intro {
max-width: 62ch;
margin: 0 auto;
font-size: 1.05rem;
line-height: 1.7;
}
.journey-timeline .timeline-header .timeline-jump-label {
margin: 26px 0 14px;
font-size: 0.95rem;
color: color-mix(in srgb, var(--default-color) 60%, white);
}
.journey-timeline .timeline-jump {
display: flex;
flex-wrap: wrap;
justify-content: center;
gap: 10px 12px;
}
.journey-timeline .timeline-jump-btn {
padding: 9px 20px;
border: 1.5px solid color-mix(in srgb, var(--accent-color) 45%, white);
border-radius: 99px;
background: #fff;
color: var(--heading-color);
font-size: 0.95rem;
font-weight: 700;
cursor: pointer;
transition: background-color 0.2s ease, border-color 0.2s ease, color 0.2s ease, transform 0.2s ease;
}
.journey-timeline .timeline-jump-btn:hover {
border-color: var(--accent-color);
transform: translateY(-2px);
}
.journey-timeline .timeline-jump-btn.is-active {
background: var(--accent-color);
border-color: var(--accent-color);
color: var(--cian-deepest);
}
/* The marker of the milestone being read. The ring is drawn with box-shadow
rather than a border so the circle itself never changes size and the row
below it cannot shift.
The scale has to carry the centring translate with it: on desktop the marker
is absolutely positioned at left/top 50% and pulled back by
translate(-50%, -50%), so a bare `transform: scale()` here replaces that and
throws the active circle half its own width down and to the right -- which
is what made the active milestone jump as you scrolled past it. Below 768px
the marker is in flow with no translate, so there the scale stands alone. */
.journey-timeline .timeline-milestone .milestone-marker {
transition: box-shadow 0.3s ease, transform 0.3s ease;
}
.journey-timeline .timeline-milestone.is-active .milestone-marker {
box-shadow: 0 0 0 8px color-mix(in srgb, var(--accent-color) 22%, transparent);
transform: translate(-50%, -50%) scale(1.06);
}
@media (max-width: 767.98px) {
.journey-timeline .timeline-milestone.is-active .milestone-marker {
transform: scale(1.06);
}
}
.journey-timeline .timeline-milestone .milestone-content {
transition: box-shadow 0.3s ease, transform 0.3s ease;
}
.journey-timeline .timeline-milestone.is-active .milestone-content {
box-shadow: 0 14px 34px rgba(17, 17, 17, 0.12);
transform: translateY(-2px);
}
@media (prefers-reduced-motion: reduce) {
.journey-timeline .timeline-track-fill,
.journey-timeline .timeline-jump-btn,
.journey-timeline .timeline-milestone .milestone-marker,
.journey-timeline .timeline-milestone .milestone-content {
transition: none;
}
.journey-timeline .timeline-jump-btn:hover,
.journey-timeline .timeline-milestone.is-active .milestone-marker,
.journey-timeline .timeline-milestone.is-active .milestone-content {
transform: none;
}
}
/* The markers sit on the line, not under it. */
.journey-timeline .timeline-container .timeline-milestone {
z-index: 1;
}
/* Stacked layout below 768px: the marker leaves its absolute centring and goes
back into the flow as `margin: 0 auto`, so it is still horizontally centred --
the spine stays at 50% with it. It was pinned to 40px here on the assumption
the markers moved left, which they do not: the line ran down the left margin
while the circles sat in the middle, connecting nothing. */
/*--------------------------------------------------------------
# Language switcher: the mobile drawer
--------------------------------------------------------------
The rules above paint the switcher in --nav-color, which is the white of
the header pill. The mobile drawer is a white panel — the template gives
its links --nav-dropdown-color instead — so EN / ES was rendering white
on white: present, focusable, and invisible. Below 1200px it gets the
drawer's own palette, plus a pill outline: it sits under a divider at the
foot of a list of plain text links, where a bare pair of words does not
read as something you can tap. */
@media (max-width: 1199.98px) {
.navmenu .nav-lang {
padding: 14px 20px 6px;
margin-top: 6px;
border-top: 1px solid color-mix(in srgb, var(--nav-dropdown-color) 12%, transparent);
}
.navmenu .nav-lang .nav-lang-group {
gap: 0;
}
.navmenu .nav-lang .nav-lang-current,
.navmenu .nav-lang .nav-lang-link {
font-size: 15px;
/* 44px of touch target, the iOS minimum, without a 44px-tall pill. */
padding: 11px 18px;
border: 1px solid color-mix(in srgb, var(--nav-dropdown-color) 20%, transparent);
}
.navmenu .nav-lang .nav-lang-current {
color: var(--contrast-color);
background-color: var(--nav-dropdown-hover-color);
border-color: var(--nav-dropdown-hover-color);
border-radius: 6px 0 0 6px;
}
.navmenu .nav-lang .nav-lang-link {
color: var(--nav-dropdown-color);
opacity: 1;
border-left: 0;
border-radius: 0 6px 6px 0;
}
/* The slash is the desktop separator; the pill halves meet edge to edge. */
.navmenu .nav-lang .nav-lang-sep {
display: none;
}
}
/*--------------------------------------------------------------
# Contact: the form on its own, and the band under it
--------------------------------------------------------------
# The contact page lost its three info cards and its regional map embed, and
# the form was built to sit in .form-container-overlap -- a box pulled 100px up
# over the map. With nothing above it the form is the page's only element, so it
# is centred and capped instead: a 40px-padded panel stretched across a wide
# container gives lines of input far wider than anything typed into them.
#
# The band below is two tiles, each a whole link: the reader has just sent a
# message and the page would otherwise end on a dead stop. They lead with a
# photograph rather than an icon plate -- two white cards on the near-white
# page ground barely read as cards at all, and every other band on this site
# sells a destination with a picture of it. Not the photographic promo banner:
# that is one plate composed around one message, and there are two
# destinations of equal weight here. */
.contact .contact-form-solo {
max-width: 820px;
margin: 0 auto;
}
.contact-next-tile {
display: flex;
flex-direction: column;
height: 100%;
overflow: hidden;
background: var(--surface-color);
border-radius: 18px;
box-shadow: 0 10px 30px rgba(17, 17, 17, 0.08);
text-decoration: none;
transition: transform 0.25s ease, box-shadow 0.25s ease;
}
.contact-next-tile:hover,
.contact-next-tile:focus-visible {
transform: translateY(-2px);
box-shadow: 0 15px 40px rgba(17, 17, 17, 0.15);
}
/* A fixed ratio rather than a fixed height: the two tiles sit side by side and
their photographs have to line up with each other at every width. */
.contact-next-photo {
position: relative;
aspect-ratio: 16 / 9;
max-width: 100%;
overflow: hidden;
}
.contact-next-photo img {
width: 100%;
height: 100%;
object-fit: cover;
transition: transform 0.4s ease;
}
.contact-next-tile:hover .contact-next-photo img,
.contact-next-tile:focus-visible .contact-next-photo img {
transform: scale(1.04);
}
.contact-next-body {
display: flex;
flex: 1;
flex-direction: column;
align-items: flex-start;
padding: 24px 28px 28px;
}
.contact-next-body h3 {
margin: 0 0 10px;
font-size: 24px;
color: var(--heading-color);
}
.contact-next-body p {
margin: 0 0 18px;
font-size: 16px;
color: color-mix(in srgb, var(--default-color) 75%, white);
/* Not justified: this is a CTA tile, not long-form prose. */
text-align: left;
}
/* The arrow link is decoration inside a link, so it is a styled like a
link rather than an anchor of its own -- the tile is the link, and a nested
anchor would be invalid and would steal the click. docs/style.md names a
shared .particulars-cta for this look; no such rule exists in either
stylesheet, so the tile carries its own. */
.contact-next-cta {
display: inline-flex;
align-items: center;
gap: 8px;
margin-top: auto;
font-size: 13px;
font-weight: 700;
text-transform: uppercase;
letter-spacing: 0.08em;
/* 13px tracked caps on white: the weakest text on the tile, so it takes the
ink rather than the raw accent's 2.3:1. */
color: var(--cian-ink);
}
/* The second tile takes the gold, so the pair reads as two choices rather than
as one element repeated. */
/* The second tile's CTA is gold where the first is cyan. Same ink treatment:
raw gold on the white tile measured 3.1:1. */
.contact-next .col-md-6:last-child .contact-next-cta {
color: var(--oro-ink);
}
.contact-next-cta i {
transition: transform 0.2s ease;
}
.contact-next-tile:hover .contact-next-cta i,
.contact-next-tile:focus-visible .contact-next-cta i {
transform: translateX(5px);
}
@media (max-width: 991.98px) {
.contact .contact-form-solo {
padding: 28px 22px;
}
.contact-next-body {
padding: 20px 22px 24px;
}
}
@media (prefers-reduced-motion: reduce) {
.contact-next-tile,
.contact-next-photo img,
.contact-next-cta i {
transition: none;
}
.contact-next-tile:hover,
.contact-next-tile:focus-visible,
.contact-next-tile:hover .contact-next-photo img,
.contact-next-tile:focus-visible .contact-next-photo img,
.contact-next-tile:hover .contact-next-cta i,
.contact-next-tile:focus-visible .contact-next-cta i {
transform: none;
}
}
/* ==============================================================
# About: collage opener, photo band, mosaic closer
--------------------------------------------------------------
Built to the structure the client sent as a reference (a green resort
template): overlapping photographs instead of one rectangle, a full-bleed
photographic break between the two text bands, and the four principles as
rows rather than a 2x2 grid of boxes. Only the SHAPE was taken -- the
colour is this site's own, every value below is a token, and the headings
reuse the .section-title block rather than inventing a variant.
Both photo groups are ONE grid each with deliberately overlapping areas,
not absolutely positioned images. An overlap expressed as two grid items
claiming the same cell survives a reflow; one expressed as `position:
absolute; top: -40px` does not, and breaks first at exactly the widths
nobody tests.
Collapse is at 991px, the site's multi-column breakpoint. Below it both
collages become a simple stack: a three-way overlap at 390px is a pile. */
/* ---- 1. Opener ---- */
/* Three columns at xl. At lg the promise column drops to a full-width row
under the text and the collage, which keeps the collage from being squeezed
to a third of a tablet. */
/* The three columns are NOT equal and the collage is NOT stretched.
Stretching it to the promise panel's height was tried and reverted: the
photographs are wide ones, and a column 430px tall crops them to narrow
portraits -- the Cumbemayo shot lost the walker's head entirely. A
photograph's own proportions win over a flush bottom edge.
So the collage keeps its natural height and is centred in the row, which
splits the leftover space above and below it and reads as deliberate rather
than as a column that ran out. Its column is widened a little in exchange,
which is what actually makes the pictures bigger. */
.about-opener-grid {
display: grid;
grid-template-columns: 0.95fr 1.12fr 0.93fr;
gap: 40px;
align-items: start;
}
.about-collage {
align-self: center;
}
/* The section-title block is centred by default -- correct for a band that
spans the page, wrong for a column of text beside a photograph. */
.about-section-title {
text-align: left;
padding-bottom: 0;
margin-bottom: 18px;
}
.about-section-title h2,
.about-section-title h3 {
margin: 12px 0 0;
font-size: clamp(28px, 2.6vw, 38px);
}
.about-section-title p {
margin: 14px 0 0;
max-width: 54ch;
color: color-mix(in srgb, var(--default-color) 70%, white);
}
/* The second half of each heading, in the brand red. Red opens headings and
marks points across this site; gold is held for labels and the CTA, which
this column already uses on its button.
font: inherit is doing real work. main.css L213 resets every on the
site to 17px Inter 400 to keep the display face out of running text, and a
span inside an h3 is caught by it -- so "Off the Circuit" set as body copy
beside a 37px heading. .promo-banner-heading span carries the same fix for
the same reason. */
.about-accent {
font: inherit;
color: var(--tertiary-accent);
}
.about-opener-text .about-lead {
font-size: 1.08rem;
font-weight: 500;
}
/* The collage: a 2x3 grid the three photographs overlap on. The tall shot
holds the left column across the first two rows, the wide one crosses both
columns at the foot, and the small one sits top right -- so the wide shot
runs under the other two and the group reads as one composition. */
.about-collage {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 14px;
}
.about-collage-img {
width: 100%;
height: 100%;
object-fit: cover;
border-radius: 18px;
box-shadow: 0 10px 30px rgba(17, 17, 17, 0.08);
}
/* The photographs are STAGGERED, not flush. In the reference each one is
pushed off its cell by a little, so the group reads as a handful of prints
laid down rather than a three-up grid -- that offset is most of what makes
it a collage. Done with a transform, not a margin: a transform does not
change the grid's own sizing, so the rows stay exactly as computed below
and only the paint moves. Dropped entirely under 992px, where the group
becomes a plain stack.
The tall shot holds the left column across both rows; the other two stack
beside it. The two stacked images carry an explicit aspect-ratio and the
tall one simply fills what they add up to.
The rows are NOT left to size themselves off the images. When they were,
two things broke at once: the right column had no second item, so row two
opened a dead cell beside the tall photograph, and the wide shot underneath
-- a long-exposure of the cathedral, nearly square -- resolved its row to
its own intrinsic height and ran to roughly a thousand pixels. An
aspect-ratio on each stacked item fixes the row heights, and height: 100%
on the tall one makes it match them. */
.about-collage-1 {
grid-column: 1;
grid-row: 1 / span 2;
}
/* The stacked shots carry the ratios, which fixes every row height; the two
tall ones then fill whatever their neighbours add up to. Without this the
rows size to the images' intrinsic height and the cathedral long-exposure --
nearly square -- resolved its row to about a thousand pixels. */
.about-collage-2 {
grid-column: 2;
grid-row: 1;
aspect-ratio: 16 / 9;
}
.about-collage-3 {
grid-column: 2;
grid-row: 2;
aspect-ratio: 3 / 2;
}
/* The second tall one, opposite the first and a row lower, so the group reads
as two interlocking columns rather than one stack with a sidebar. It is the
only portrait photograph in the set, which is why it takes this slot. */
.about-collage-4 {
grid-column: 2;
grid-row: 3 / span 2;
}
.about-collage-5 {
grid-column: 1;
grid-row: 3;
aspect-ratio: 4 / 3;
}
.about-collage-6 {
grid-column: 1;
grid-row: 4;
aspect-ratio: 4 / 3;
}
@media (min-width: 992px) {
.about-collage-1 { transform: translateY(18px); }
.about-collage-3 { transform: translateX(10px); }
/* The lower half leans the other way, so the stagger alternates down the
group instead of drifting one direction. */
.about-collage-4 { transform: translate(10px, 4px); }
.about-collage-6 { transform: translateX(-8px); }
.about-mosaic-1 { transform: translateY(-14px); }
.about-mosaic-3 { transform: translateX(12px); }
}
/* The offsets are decorative. A reader who has asked for less motion is not
asking for a flat layout, so these stay -- but nothing here animates, so
there is nothing for a reduced-motion escape to switch off. */
/* The promise column sits on the surface colour so it reads as a panel beside
two columns that sit on the page ground. */
.about-promise {
background: var(--surface-color);
border: 1px solid color-mix(in srgb, var(--default-color) 10%, white);
border-radius: 18px;
padding: 30px 28px;
}
.about-promise-heading {
margin: 0 0 14px;
font-size: clamp(22px, 2vw, 27px);
}
.about-ticks {
list-style: none;
margin: 20px 0 0;
padding: 0;
}
.about-ticks li {
display: flex;
gap: 10px;
align-items: flex-start;
padding: 9px 0;
border-bottom: 1px solid color-mix(in srgb, var(--default-color) 8%, white);
}
.about-ticks li:last-child {
border-bottom: 0;
}
.about-ticks i {
flex-shrink: 0;
margin-top: 2px;
font-size: 18px;
color: var(--accent-color);
}
.about-footnote {
margin: 18px 0 0;
font-size: 13px;
line-height: 1.6;
color: color-mix(in srgb, var(--default-color) 60%, white);
}
/* ---- 2. The full-bleed photo band ---- */
/* Was .about-band and About-only. It is the site's one editorial break -- a
photograph with the type laid over it and no card around it -- so it is now
.photo-band and any page can take one. About and Things to Do both render it
through src/components/PhotoBand.jsx. */
/* A break in the page, not a card: no container, no radius, no shadow. The
photograph is a real ![]()
rather than a background-image so it carries an
alt and the browser can lazy-load it; object-fit does the cropping that
background-size: cover would have. */
.photo-band {
position: relative;
display: flex;
align-items: center;
justify-content: center;
min-height: clamp(380px, 46vw, 560px);
padding: 60px 0;
overflow: hidden;
isolation: isolate;
}
/* The photograph stays with the viewport while the band travels over it, so
the words read as moving across a still landscape rather than as a block
sliding past. background-attachment does it with no script and no scroll
listener: the background resolves against the viewport, the section clips
it, and the type is the only thing that moves.
It is a background and not an ![]()
for exactly that reason -- position:
fixed inside the section resolves against the section, which scrolls, and
the effect disappears. The alt text lives on role="img" + aria-label in
About.jsx instead. The url() is set inline from the content file. */
/* A band rendered INSIDE a .container still has to run edge to edge. Same
breakout the card-ring stage uses in section 24. Only for that case: a band
that is already a top-level section needs nothing. */
.photo-band.is-breakout {
width: 100vw;
margin-left: calc(50% - 50vw);
}
.photo-band-img {
position: absolute;
inset: 0;
z-index: -2;
background-position: center;
background-repeat: no-repeat;
background-size: cover;
background-attachment: fixed;
}
/* Two places where the fixed attachment has to be given up.
Touch devices: iOS Safari and most mobile browsers either ignore
background-attachment: fixed or size the background to a viewport that
changes height as the address bar hides, which jumps the photograph mid
scroll. A phone shows a plain cover crop instead, which is what it showed
before.
Reduced motion: the whole point of the effect is movement the reader did not
ask for, so a reader who has asked for less of it gets none. */
@media (hover: none), (pointer: coarse), (prefers-reduced-motion: reduce) {
.photo-band-img {
background-attachment: scroll;
}
}
/* Darkened enough for white type to pass against it, and no further: the
client's standing note on this site is that the photographs are the point
and a heavy scrim throws them away. The gradient keeps the weight at the
centre, where the words are, and lets the corners stay open. */
.photo-band-scrim {
position: absolute;
inset: 0;
z-index: -1;
background:
radial-gradient(ellipse at center, rgba(17, 17, 17, 0.62) 0%, rgba(17, 17, 17, 0.34) 70%, rgba(17, 17, 17, 0.22) 100%);
}
.photo-band-content {
position: relative;
text-align: center;
max-width: 760px;
}
.photo-band-eyebrow {
margin: 0 0 12px;
font-size: 13px;
font-weight: 700;
letter-spacing: 0.12em;
text-transform: uppercase;
color: var(--secondary-accent);
/* 13px of gold over a photograph is the weakest type in the band, and the
radial scrim is thinnest where a bright sky usually sits. The heading
beside it is white and carries its own weight; this needs the shadow stack
the page masthead uses or it washes out completely against cloud. */
text-shadow:
0 1px 2px rgba(17, 17, 17, 0.95),
0 2px 8px rgba(17, 17, 17, 0.85),
0 0 20px rgba(17, 17, 17, 0.7);
}
.photo-band-content h2,
.photo-band-content h3 {
margin: 0;
color: var(--contrast-color);
font-size: clamp(32px, 4vw, 54px);
/* The type carries itself over any bright frame the scrim leaves showing,
the same way the homepage hero's does. */
text-shadow:
0 1px 2px rgba(0, 0, 0, 0.8),
0 3px 16px rgba(0, 0, 0, 0.7);
}
.photo-band-body {
margin: 18px auto 26px;
max-width: 58ch;
color: color-mix(in srgb, var(--contrast-color) 90%, transparent);
text-shadow: 0 1px 10px rgba(0, 0, 0, 0.6);
}
/* ---- 3. Closer ---- */
.about-why-grid {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 54px;
align-items: center;
}
/* The mosaic: one tall photograph beside two stacked, with the small cards
laid across the foot of the whole group. */
.about-mosaic {
position: relative;
display: grid;
grid-template-columns: 1.15fr 1fr;
gap: 14px;
padding-bottom: 86px;
}
.about-mosaic-img {
width: 100%;
height: 100%;
object-fit: cover;
border-radius: 18px;
box-shadow: 0 10px 30px rgba(17, 17, 17, 0.08);
}
/* Same construction, same reason: the two stacked shots set the row heights
with an aspect-ratio and the tall one fills them. */
.about-mosaic-1 {
grid-column: 1;
grid-row: 1 / span 2;
}
.about-mosaic-2 { grid-column: 2; grid-row: 1; aspect-ratio: 4 / 3; }
.about-mosaic-3 { grid-column: 2; grid-row: 2; aspect-ratio: 4 / 3; }
/* ONE panel overlapping the foot of the mosaic, with the two notes side by
side inside it -- not two separate cards. Two cards floated over a
photograph read as debris; one panel reads as a caption block, which is what
the reference does and what these two notes are.
The padding-bottom on .about-mosaic is what reserves the room for it, so
nothing below is overlapped in turn -- an absolutely positioned element that
hangs past its parent collides with the next thing on the page at the first
width nobody checked. */
.about-overlays {
position: absolute;
left: 8%;
right: 0;
bottom: 0;
display: grid;
grid-template-columns: 1fr 1fr;
gap: 22px;
background: var(--surface-color);
border: 1px solid color-mix(in srgb, var(--default-color) 10%, white);
border-radius: 18px;
padding: 20px 24px;
box-shadow: 0 10px 30px rgba(17, 17, 17, 0.08);
}
.about-overlays h4 {
margin: 0 0 6px;
font-size: 17px;
}
.about-overlays p {
margin: 0;
font-size: 13.5px;
line-height: 1.6;
color: color-mix(in srgb, var(--default-color) 70%, white);
}
/* The four principles, as rows. They were .info-box squares in a 2x2 grid,
which gave each one a headline-sized title over two lines of text and read
as four cards competing with the photographs beside them. A row puts the
icon, the title and the body on one reading line. */
.about-rows {
list-style: none;
margin: 26px 0 0;
padding: 0;
}
.about-rows li {
display: flex;
gap: 16px;
align-items: flex-start;
padding: 18px 0;
border-bottom: 1px solid color-mix(in srgb, var(--default-color) 8%, white);
}
.about-rows li:last-child {
border-bottom: 0;
}
.about-row-icon {
flex-shrink: 0;
display: grid;
place-items: center;
width: 46px;
height: 46px;
border-radius: 12px;
/* Solid, with the mark reversed out of it, as in the reference -- a tinted
plate with a tinted icon on it disappears beside the photographs.
Near-black rather than the brand cyan: the cyan is the icon's own colour
here, and a cyan mark on a cyan plate is nothing. */
background: var(--default-color);
}
/* The marks are the site's own PNGs (see the content file), not a glyph font,
so they are sized as images rather than by font-size. */
.about-row-icon img {
width: 24px;
height: 24px;
object-fit: contain;
}
.about-rows h4 {
margin: 0 0 5px;
font-size: 18px;
}
.about-rows p {
margin: 0;
font-size: 14.5px;
line-height: 1.65;
color: color-mix(in srgb, var(--default-color) 70%, white);
}
.about-credits {
margin-top: 36px;
}
/* The closing call to action. The inherited template put this on a
teal-to-black gradient that belonged to the Eliot's Adventures palette; it
is the brand's near-black with a cyan cast now. */
/* The flat ink panel the closing CTA band on every other page already uses
(What To Eat, Getting Here, Travel Tips, Sources). This one carried a
three-stop 135deg gradient through an off-palette teal and out to cyan at a
160% stop -- a different closing band on one page, for no reason the page
gives. */
.about-cta {
margin-top: 46px;
border-radius: 12px;
padding: 44px 42px;
text-align: center;
background: var(--default-color);
color: var(--contrast-color);
}
.about-cta h3 {
margin: 0 0 12px;
color: var(--contrast-color);
}
.about-cta p {
margin: 0 auto 24px;
max-width: 56ch;
color: color-mix(in srgb, var(--contrast-color) 82%, transparent);
}
.about-cta-buttons {
display: flex;
flex-wrap: wrap;
gap: 12px;
justify-content: center;
}
/* The outline button sits on a dark ground here, so it takes the contrast
colour rather than the cyan it uses on the page ground. .btn-outline gets no
global rule on this site either, so this is the full border shorthand and
not just a border-color, which would paint nothing. */
.about-cta .btn-outline {
border: 1px solid color-mix(in srgb, var(--contrast-color) 55%, transparent);
color: var(--contrast-color);
}
.about-cta .btn-outline:hover {
background: var(--contrast-color);
color: var(--heading-color);
}
/* ---- Collapse ---- */
@media (max-width: 1199.98px) {
/* The promise panel drops to a full-width row under the text and the
collage rather than being squeezed to a third of a tablet. */
.about-opener-grid {
grid-template-columns: 1fr 1fr;
gap: 36px;
}
.about-collage {
align-self: start;
}
.about-promise {
grid-column: 1 / -1;
}
}
@media (max-width: 991.98px) {
.about-opener-grid,
.about-why-grid {
grid-template-columns: 1fr;
gap: 32px;
}
/* A three-way overlap at tablet width and below is a pile, so both groups
become plain stacks: every photograph full width, in source order. */
.about-collage,
.about-mosaic {
grid-template-columns: 1fr;
grid-template-rows: auto;
padding-bottom: 0;
}
.about-collage-img,
.about-mosaic-img {
grid-column: 1;
grid-row: auto;
aspect-ratio: 16 / 10;
height: auto;
max-height: 320px;
}
/* The collage is the exception to the stack. Six photographs one under the
other is most of a screen's worth of scrolling before the reader reaches
the text they are illustrating, so this group keeps two columns and
shrinks instead -- still a group, still in source order. */
.about-collage {
grid-template-columns: 1fr 1fr;
gap: 10px;
}
.about-collage-img {
/* The stack rule above pins every photograph to column 1. These flow
across both columns instead, so the pair rule actually pairs them. */
grid-column: auto;
max-height: 200px;
}
/* Out of the overlap and into the flow, below the photographs. */
.about-overlays {
position: static;
left: auto;
right: auto;
margin-top: 4px;
}
.about-cta {
padding: 34px 24px;
}
}
@media (max-width: 575.98px) {
.about-overlays {
grid-template-columns: 1fr;
}
.photo-band {
min-height: 340px;
}
}
/* The buttons. .btn-primary carries NO brand styling globally on this site --
it is branded inside the hero (main.css L1147) and then re-declared by each
section that uses it (#featured-destinations, #news-advice,
#getting-around). Outside those it falls through to Bootstrap's default
blue, which is what the About page's three buttons rendered as. This is the
same scoped re-declaration those sections use; the global fix belongs in
main.css and is a bigger change than this page should make on its own. */
.about-opener .btn.btn-primary,
.photo-band .btn.btn-primary,
.about-cta .btn.btn-primary {
background-color: var(--btn-color);
border-color: var(--btn-color);
color: var(--contrast-color);
}
.about-opener .btn.btn-primary:hover,
.photo-band .btn.btn-primary:hover,
.about-cta .btn.btn-primary:hover {
background-color: var(--btn-hover-color);
border-color: var(--btn-hover-color);
color: var(--contrast-color);
}
/*--------------------------------------------------------------
# 22. Page masthead: the per-route accent rule
# src/components/PageTitle.jsx draws one short rule under the h1, in one of the
# three brand accents, chosen per route. The masthead was identical on twelve
# pages; this is the one thing allowed to differ, so a reader can tell which
# part of the guide they are in without the shape changing under them.
--------------------------------------------------------------*/
.page-title .page-title-rule {
display: block;
width: 88px;
height: 6px;
border-radius: 99px;
/* Sits above the h1 with clear air under it. Between the heading and the
lead it fell into the gap between two lines of type and read as nothing. */
margin: 0 auto 20px;
/* It is a bar of flat colour over a photograph, so it needs the same halo
the type beside it gets, or a bright frame swallows its edges. */
box-shadow: 0 2px 10px rgba(17, 17, 17, 0.7), 0 0 20px rgba(17, 17, 17, 0.45);
}
@media (max-width: 575.98px) {
.page-title .page-title-rule {
width: 64px;
height: 5px;
margin: 0 auto 16px;
}
}
/*--------------------------------------------------------------
# 23. The closing CTA panel
# src/components/CtaPanel.jsx. Three pages carried this inline, identically,
# writing #111111 and #fff as raw hex -- which is exactly the drift that breaks
# a .dark-background subtree. Tokens only here.
--------------------------------------------------------------*/
.cta-panel {
background: var(--default-color);
border-radius: 12px;
padding: 32px 36px;
text-align: center;
color: var(--contrast-color);
}
.cta-panel h3 {
color: var(--contrast-color);
font-weight: 700;
margin-bottom: 8px;
}
.cta-panel p {
color: color-mix(in srgb, var(--contrast-color) 75%, transparent);
margin-bottom: 20px;
}
.cta-panel-actions {
display: flex;
gap: 12px;
justify-content: center;
flex-wrap: wrap;
}
.cta-panel-btn {
padding: 10px 24px;
border-radius: 8px;
font-weight: 700;
text-decoration: none;
transition: background 0.18s ease;
}
.cta-panel-btn.is-primary {
background: var(--accent-color);
color: var(--default-color);
}
.cta-panel-btn.is-primary:hover,
.cta-panel-btn.is-primary:focus-visible {
background: color-mix(in srgb, var(--accent-color), white 18%);
color: var(--default-color);
}
.cta-panel-btn.is-ghost {
background: color-mix(in srgb, var(--contrast-color) 15%, transparent);
color: var(--contrast-color);
}
.cta-panel-btn.is-ghost:hover,
.cta-panel-btn.is-ghost:focus-visible {
background: color-mix(in srgb, var(--contrast-color) 26%, transparent);
color: var(--contrast-color);
}
@media (max-width: 575.98px) {
.cta-panel {
padding: 26px 20px;
}
}
@media (prefers-reduced-motion: reduce) {
.cta-panel-btn {
transition: none;
}
}
/*--------------------------------------------------------------
# 24. The card ring: stage, panel and CTA
# Used by History & Culture and by Trivia & Quick Facts, which render the same
# carousel over different data. Both pages carried this as an inline