, never a heading: it labels the section visually but must
* not appear in the document outline. The gold rule is a pseudo-element on the
* heading rather than an extra
, so the markup stays flat.
*/
.section-eyebrow {
font-size: var(--text-badge);
font-weight: 600;
text-transform: uppercase;
letter-spacing: .18em;
color: var(--clr-gold-ink);
}
.section-title { margin-block: var(--space-xs) 0 !important; }
.section-title::after {
content: "";
display: block;
inline-size: 3rem;
block-size: .25rem;
margin-block-start: var(--space-m);
border-radius: var(--radius-full);
background: var(--clr-gold);
}
/* Not scoped to .tour-body: the related block sits outside it, and every future
page reuses this header. Anywhere an eyebrow introduces a title, the gold rule
clears the content below it by the same amount. */
.section-eyebrow + .section-title { margin-block-end: var(--space-3xl) !important; }
/* Five solid stars, decorative: the numeric rating beside them carries the
meaning, so they are hidden from assistive tech in the markup. */
.tour-stars {
display: inline-flex;
gap: .0625rem;
flex: 0 0 auto;
}
.tour-stars i {
inline-size: 1rem;
block-size: 1rem;
background: var(--clr-gold);
-webkit-mask: var(--icon-star-solid) center / contain no-repeat;
mask: var(--icon-star-solid) center / contain no-repeat;
}
/* Owl selector only - a `.prose p { margin: 0 }` rule here would win on
specificity and silently cancel the spacing. */
.prose > * + * { margin-block-start: var(--space-l); }
/* Height is animated by script; overflow keeps the content clipped mid-slide. */
.details-body { overflow: hidden; transition: height .3s ease; }
.tour-itinerary .details-body .prose { padding-block-start: var(--space-l); }
.tier {
display: flex; flex-direction: column; gap: var(--space-m); padding: var(--space-2xl); background: var(--clr-card); border: 1px solid var(--clr-border); border-radius: var(--radius-2xl);
}
.tier.is-featured {
background: var(--clr-primary); border-color: var(--clr-primary); color: var(--clr-primary-fg);
}
.tier.is-featured h3 { color: var(--clr-primary-fg); }
.tier .btn { margin-block-start: var(--space-m); }
.tier.is-featured .btn { background: var(--clr-gold); color: var(--clr-gold-fg); }
/*
* The answer carries the bottom padding, not the disclosure around it.
*
* It sits inside the element whose height is animated, so that space grows in
* with the text instead of appearing the instant the slide starts - which is
* what lets the box drop to nothing when closed.
*
* No top padding: the summary already ends in 16px, and that becomes the gap
* above the answer once it opens. Adding 8px here as well made it 24 above and
* 8 below. Every gap in the box is now the same 16.
*/
.tour-faq .details-body p,
.tour-category-faq .details-body p {
margin: 0;
padding: 0 var(--space-s) var(--space-3xs) var(--space-xl);
line-height: var(--lh-lg);
color: var(--clr-muted-fg);
}
/* --- Buttons --- */
.btn {
display: inline-flex;
align-items: center;
justify-content: center;
gap: var(--space-xs);
padding: var(--space-m) var(--space-xl);
border-radius: var(--radius-full);
font-weight: 600;
font-size: var(--text-sm);
text-decoration: none;
background: var(--clr-primary);
color: var(--clr-primary-fg);
transition: filter .2s ease, border-color .2s ease;
}
.btn::after {
content: "";
inline-size: 1rem;
block-size: 1rem;
flex: 0 0 auto;
background: currentColor;
-webkit-mask: var(--icon-arrow-right) center / contain no-repeat;
mask: var(--icon-arrow-right) center / contain no-repeat;
}
.btn--gold { background: var(--clr-gold); color: var(--clr-gold-fg); }
.btn--ghost {
background: none; border: 1px solid var(--clr-border); color: var(--clr-primary);
}
.btn--ghost::after { display: none; }
@media (hover: hover) {
/* Anchors and buttons only: a .btn rendered as a span is inert - it keeps a
row of buttons the same shape when its target section is switched off -
and should not invite a click it cannot answer. */
a.btn:hover, button.btn:hover { filter: brightness(.95); }
}
/*
* The outline button: white, bordered, and it stays white.
*
* Not .btn--ghost. That one is for dark grounds - transparent over a photograph
* or a navy panel - and on a light ground it left the button with no fill of
* its own, so on tinted sections it took the section's colour instead of white.
*
* On hover only the border moves to primary. The shared a.btn:hover darkens
* every button by 5%, which on a white button reads as the background changing
* colour, so it is switched off here - this rule sits after that one for the
* reason above, since the two score identically.
*/
.btn--outline {
background: var(--clr-card);
border: 1px solid var(--clr-border);
color: var(--clr-primary);
}
.btn--outline::after { display: none; }
@media (hover: hover) {
a.btn--outline:hover { filter: none; border-color: var(--clr-primary); }
}
.tour-card {
block-size: 100%; display: flex; flex-direction: column; background: var(--clr-card); border: 1px solid var(--clr-border); border-radius: var(--radius-2xl); overflow: hidden; transition: transform .2s ease, box-shadow .2s ease;
}
@media (hover: hover) {
.tour-card:hover {
transform: translateY(-2px); box-shadow: 0 10px 24px -14px rgba(5, 18, 35, .35);
}
}
.tour-card__media img { inline-size: 100%; aspect-ratio: 3 / 2; object-fit: cover; }
.tour-card__body {
display: flex; flex-direction: column; gap: var(--space-s); padding: var(--space-xl); flex: 1 1 auto;
}
.tour-card__title { margin: 0; font-size: 1.0625rem; }
.tour-card__title a { text-decoration: none; }
.tour-card__rating {
margin: 0; font-size: var(--text-sm); color: var(--clr-muted-fg);
}
.tour-card__meta {
margin: auto 0 0; display: flex; flex-wrap: wrap; gap: var(--space-l); font-size: var(--text-sm);
}
.tour-card__meta dt {
font-size: var(--text-badge); text-transform: uppercase; letter-spacing: .1em; color: var(--clr-muted-fg);
}
.tour-card__meta dd { margin: 0; font-weight: 700; color: var(--clr-primary); }
/* --- Route strip ---------------------------------------------------------
*
* The towns a trip passes through, as a slim band under the card photo. A
* component rather than page CSS because it renders inside the shared card:
* any listing can opt in by passing stops, and they all then look the same.
*
* It SCROLLS rather than shrinking. A fifteen-stop route has no honest fixed
* width, and the alternative - staggering labels, then dropping them - was
* losing that fight as the tours got longer. Overflow here, not on the card,
* so the card itself never gains a scrollbar.
* ---------------------------------------------------------------------- */
.route-strip {
position: relative;
/* See .finder__results: a scroller still offers its content as a minimum. */
min-inline-size: 0;
border-block: 1px solid var(--clr-border);
background: var(--clr-secondary);
}
.route-strip__scroll {
min-inline-size: 0;
overflow-x: auto;
scroll-snap-type: x proximity;
/* Firefox and the rest; the WebKit rule below hides the bar in Safari. */
scrollbar-width: none;
/*
* The fades say "there is more this way". The script swaps these classes as
* the strip is scrolled, and removes them entirely when everything fits, so
* a short route is never drawn with a fade over a hard edge.
*/
-webkit-mask-image: linear-gradient(to right, transparent 0, #000 14px, #000 calc(100% - 14px), transparent 100%);
mask-image: linear-gradient(to right, transparent 0, #000 14px, #000 calc(100% - 14px), transparent 100%);
}
.route-strip__scroll::-webkit-scrollbar { display: none; }
.route-strip.is-start .route-strip__scroll {
-webkit-mask-image: linear-gradient(to right, #000 calc(100% - 14px), transparent 100%);
mask-image: linear-gradient(to right, #000 calc(100% - 14px), transparent 100%);
}
.route-strip.is-end .route-strip__scroll {
-webkit-mask-image: linear-gradient(to right, transparent 0, #000 14px);
mask-image: linear-gradient(to right, transparent 0, #000 14px);
}
.route-strip.is-still .route-strip__scroll { -webkit-mask-image: none; mask-image: none; }
.route-strip__stops {
margin: 0;
padding: var(--space-s) var(--space-m);
list-style: none;
display: flex;
align-items: center;
gap: var(--space-s);
}
.route-strip__stop {
flex: none;
scroll-snap-align: center;
display: inline-flex;
align-items: center;
gap: var(--space-3xs);
white-space: nowrap;
font-size: var(--text-xs);
color: var(--clr-muted-fg);
}
/* The connector, drawn between stops rather than as an element of its own. */
.route-strip__stop + .route-strip__stop::before {
content: "";
inline-size: 1rem;
block-size: 1px;
background: var(--clr-border);
margin-inline-end: var(--space-s);
}
.route-strip__dot {
flex: none;
inline-size: .375rem;
block-size: .375rem;
border-radius: var(--radius-full);
background: var(--clr-rule, var(--clr-border));
}
/*
* A night is bigger as well as gold. Colour alone is not a distinction
* everyone can see, and this is the one thing the strip is really saying.
*/
.route-strip__stop.is-night { color: var(--clr-fg); font-weight: 500; }
.route-strip__stop.is-night .route-strip__dot {
inline-size: .5625rem;
block-size: .5625rem;
background: var(--clr-gold);
box-shadow: 0 0 0 2px var(--clr-secondary);
}
.route-strip__nights {
padding-inline: var(--space-3xs);
border-radius: var(--radius-sm);
background: var(--clr-accent);
font-size: var(--text-badge);
font-weight: 700;
color: var(--clr-gold-ink);
}
/* Added by the script, and only when the strip actually overflows. */
.route-strip__nav {
position: absolute;
inset-block-start: 50%;
translate: 0 -50%;
z-index: 2;
/* 44px of target around a 24px dial: tappable without looking heavy. */
inline-size: 2.75rem;
block-size: 2.75rem;
padding: 0;
border: 0;
background: none;
display: grid;
place-items: center;
cursor: pointer;
color: var(--clr-fg);
}
.route-strip__nav--prev { inset-inline-start: 0; }
.route-strip__nav--next { inset-inline-end: 0; }
.route-strip__nav span {
inline-size: 1.5rem;
block-size: 1.5rem;
border: 1px solid var(--clr-border);
border-radius: var(--radius-full);
background: var(--clr-card);
display: grid;
place-items: center;
box-shadow: var(--shadow-card);
}
.route-strip__nav[disabled] { color: var(--clr-muted-fg); opacity: .45; cursor: default; }
.route-strip.is-still .route-strip__nav { display: none; }
.related { padding-block-end: var(--section-py); }
.visually-hidden {
position: absolute;
inline-size: 1px;
block-size: 1px;
margin: -1px;
padding: 0;
overflow: hidden;
clip-path: inset(50%);
white-space: nowrap;
border: 0;
}
/* Eyebrow is text-xs at gold-foreground/80 - which is a near-black navy in the
palette, so it reads grey, not gold. */
.section-eyebrow {
font-size: var(--text-xs);
letter-spacing: .18em;
color: color-mix(in srgb, var(--clr-gold-fg) 80%, transparent);
}
/* The name block is the tallest thing in the row, so the stars centre against
it; align-items on the header keeps that true as the block grows. */
.tour-reviews .tour-stars { flex: 0 0 auto; }
.book-form {
padding: var(--space-2xl);
background: var(--clr-card);
border: 1px solid var(--clr-border);
border-radius: var(--radius-2xl);
}
.book-note--how h3::before {
-webkit-mask: var(--icon-shield-check) center / contain no-repeat;
mask: var(--icon-shield-check) center / contain no-repeat;
}
.book-note--cancel h3::before {
-webkit-mask: var(--icon-calendar-days) center / contain no-repeat;
mask: var(--icon-calendar-days) center / contain no-repeat;
}
/* --- Booking form ---
*
* The form's only child is a fieldset wrapping every field, so the grid has to
* sit on the fieldset. Putting it on the form made that one element the sole
* grid item: it took column one and every field was squeezed into half the
* width, leaving the other half blank.
*
* The half-width classes are set on the fields themselves in the form builder,
* so editing the form in its own UI keeps working; only the widths live here.
* One column below 40rem, two above, matching the reference.
*/
.book-form form > fieldset {
display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--space-l);
}
.book-form form > fieldset > legend, .book-form form > fieldset > div { grid-column: 1 / -1; }
.book-form .ff-el-group { margin: 0; }
/* First and last name are locked inside one element by the form builder, so the
pair is given the same two-column rhythm as the grid around it and reads as
the first row of a single form rather than a block of its own. */
.book-form .ff-name-field-wrapper .ff-t-container {
display: grid;
grid-template-columns: minmax(0, 1fr);
gap: var(--space-l);
}
.book-form .ff-name-field-wrapper .ff-t-cell { display: block; padding: 0; }
@media (min-width: 40rem) {
.book-form form > fieldset, .book-form .ff-name-field-wrapper .ff-t-container { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.book-form form > fieldset > .mta-half { grid-column: span 1; }
}
.book-form .ff-default .ff-el-input--label { display: block; margin-block-end: var(--space-2xs); }
.book-form .ff-default .ff-el-input--label label {
font-size: var(--text-sm);
line-height: var(--lh-sm);
font-weight: 500;
color: var(--clr-fg);
}
:is(.book-form .ff-default .ff-el-form-control, .find-form select, .finder__sort select) {
inline-size: 100%;
padding: var(--space-xs) var(--space-m);
border: 1px solid var(--clr-border);
border-radius: var(--radius-lg);
background: var(--clr-bg);
color: var(--clr-fg);
font: inherit;
font-size: var(--text-sm);
line-height: var(--lh-sm);
}
.book-form .ff-default .ff-el-form-control::placeholder { color: var(--clr-muted-fg); }
:is(.book-form .ff-default .ff-el-form-control, .find-form select, .finder__sort select):focus-visible { outline: 2px solid var(--clr-ring); outline-offset: 0; }
.book-form .ff-default textarea.ff-el-form-control { resize: vertical; min-block-size: 6rem; }
/*
* Field icons.
*
* The reference wraps the icon and the input in one bordered box; the form
* plugin gives us no such wrapper, so the icon is drawn on the field's own
* container instead and the input is padded past it. Same result, no markup to
* fight the plugin over.
*
* A mask rather than a background-image, because `currentColor` inside a
* background SVG has no context to resolve against and comes out black - this
* way the glyph takes a palette colour like every other icon in the theme. The
* shape arrives through --mi, so the field only needs its mi-* class.
*/
.book-form .mta-icon .ff-el-input--content { position: relative; }
.book-form .mta-icon .ff-el-input--content::before {
content: "";
position: absolute;
inset-inline-start: var(--space-m);
inset-block-start: 50%;
translate: 0 -50%;
inline-size: 1rem;
block-size: 1rem;
pointer-events: none;
background: var(--clr-muted-fg);
-webkit-mask: var(--mi) center / contain no-repeat;
mask: var(--mi) center / contain no-repeat;
}
.book-form .ff-default .mta-icon .ff-el-form-control { padding-inline-start: 2.5rem; }
/*
* The date field's icon goes on the left with the others. It used to sit on the
* right, where Chrome already draws its own picker indicator - two calendars in
* one field.
*/
.book-form .ff-default .mta-date .ff-el-form-control::-webkit-calendar-picker-indicator {
opacity: .55;
}
/* Consent is the one line a visitor is agreeing to, so it is not set as fine
print: same size as the field text, with the leading opened up because it
wraps to two or three lines. */
.book-form .mta-consent .ff-el-form-check-label {
display: flex;
align-items: flex-start;
gap: var(--space-xs);
font-size: var(--text-sm);
line-height: var(--lh-base);
color: var(--clr-muted-fg);
}
/* accent-color tints the box and its tick from one declaration, and leaves the
control native - so it keeps the platform's own focus ring, hit area and
high-contrast behaviour, which a custom-drawn checkbox would have to rebuild. */
.book-form .ff-default .ff-el-form-check-input { accent-color: var(--clr-primary); }
.book-form .mta-consent .ff-el-form-check-input { flex: 0 0 auto; margin-block-start: .3125rem; }
.book-form .mta-consent a { color: var(--clr-primary); }
.book-form .ff-default .ff-btn-submit {
inline-size: 100%;
display: inline-flex;
align-items: center;
justify-content: center;
gap: var(--space-xs);
padding: var(--space-m) var(--space-2xl);
border: 0;
border-radius: var(--radius-full);
background: var(--clr-primary);
color: var(--clr-primary-fg);
font-size: var(--text-sm);
line-height: var(--lh-sm);
font-weight: 600;
cursor: pointer;
transition: opacity .15s ease;
}
/* Send, not an arrow: this submits rather than navigating, and the reference
pairs it with a paper plane for exactly that reason. */
.book-form .ff-default .ff-btn-submit::after {
content: "";
inline-size: 1rem;
block-size: 1rem;
flex: 0 0 auto;
background: currentColor;
-webkit-mask: var(--icon-send) center / contain no-repeat;
mask: var(--icon-send) center / contain no-repeat;
}
/*
* Dropdown. The native arrow is replaced with the theme's chevron so the select
* reads as one of our fields rather than an OS control - the same treatment the
* date field gets, with the same offsets.
*/
:is(.book-form .ff-default select.ff-el-form-control, .find-form select, .finder__sort select) {
/* No blue flash on tap: the field's own open state is the feedback. */
-webkit-tap-highlight-color: transparent;
appearance: none;
background-image: var(--icon-chevron-down);
background-repeat: no-repeat;
background-position: right .75rem center;
background-size: 1.125rem;
padding-inline-end: 2.5rem;
}
/* --- Custom select picker -------------------------------------------------
*
* The list a native
drops down is drawn by the operating system, so
* none of it - the panel, its corners, the highlight colour, the row spacing -
* can normally be reached from CSS. `appearance: base-select` hands the whole
* control back to the page, which is what makes the block below possible.
*
* It is written as an enhancement on purpose. Everything above still applies,
* so a browser without support keeps the styled closed control and its own
* native list: correct and usable, just not ours. Both the select and its
* ::picker have to opt in, or the picker stays native.
* ---------------------------------------------------------------------- */
@supports (appearance: base-select) {
:is(.book-form .ff-default select.ff-el-form-control, .find-form select, .finder__sort select),
:is(.book-form .ff-default select.ff-el-form-control, .find-form select, .finder__sort select)::picker(select) {
appearance: base-select;
}
:is(.book-form .ff-default select.ff-el-form-control, .find-form select, .finder__sort select) {
/* The chevron is now a real element, so drop the painted-on one. */
background-image: none;
padding-inline-end: var(--space-m);
display: flex;
align-items: center;
gap: var(--space-xs);
text-align: start;
}
/*
* Pushes the arrow to the trailing edge whatever the label's length.
*
* content:"" is load-bearing. The pseudo-element ships with a UA glyph -
* `counter(fake-counter-name, disclosure-open)`, a disclosure triangle drawn
* in the inherited text colour - and painting our masked chevron over it
* leaves the browser's dark triangle showing through ours. Same trap as an
* icon utility on an element that already draws something: clear what is
* there before adding to it.
*/
:is(.book-form .ff-default select.ff-el-form-control, .find-form select, .finder__sort select)::picker-icon {
content: "";
margin-inline-start: auto;
inline-size: 1.125rem;
block-size: 1.125rem;
background: var(--clr-muted-fg);
-webkit-mask: var(--icon-chevron-down) center / contain no-repeat;
mask: var(--icon-chevron-down) center / contain no-repeat;
transition: rotate .2s ease;
}
:is(.book-form .ff-default select.ff-el-form-control, .find-form select, .finder__sort select):open::picker-icon { rotate: 180deg; }
:is(.book-form .ff-default select.ff-el-form-control, .find-form select, .finder__sort select)::picker(select) {
border: 1px solid var(--clr-border);
border-radius: var(--radius-lg);
background: var(--clr-card);
box-shadow: 0 10px 15px -3px color-mix(in srgb, var(--clr-fg) 12%, transparent);
padding: var(--space-3xs);
max-block-size: 18rem;
overflow-y: auto;
/* Sit under the control rather than over it, and match its width. */
margin-block-start: var(--space-3xs);
opacity: 0;
translate: 0 -.25rem;
transition: opacity .15s ease, translate .15s ease, overlay .15s allow-discrete, display .15s allow-discrete;
}
:is(.book-form .ff-default select.ff-el-form-control, .find-form select, .finder__sort select):open::picker(select) {
opacity: 1;
translate: 0 0;
}
@starting-style {
:is(.book-form .ff-default select.ff-el-form-control, .find-form select, .finder__sort select):open::picker(select) {
opacity: 0;
translate: 0 -.25rem;
}
}
:is(.book-form .ff-default select.ff-el-form-control, .find-form select, .finder__sort select) option {
display: flex;
align-items: center;
gap: var(--space-xs);
padding: var(--space-xs) var(--space-s);
border-radius: var(--radius-sm);
font-size: var(--text-sm);
line-height: var(--lh-sm);
color: var(--clr-fg);
cursor: pointer;
}
/* :checked is the chosen one; the other two are keyboard and pointer focus. */
:is(.book-form .ff-default select.ff-el-form-control, .find-form select, .finder__sort select) option:hover,
:is(.book-form .ff-default select.ff-el-form-control, .find-form select, .finder__sort select) option:focus,
:is(.book-form .ff-default select.ff-el-form-control, .find-form select, .finder__sort select) option:active {
background: var(--clr-secondary);
color: var(--clr-primary);
}
:is(.book-form .ff-default select.ff-el-form-control, .find-form select, .finder__sort select) option:checked {
font-weight: 600;
color: var(--clr-primary);
}
/*
* The tick is reserved for every row, not only the selected one, so the
* labels keep one left edge instead of shifting as the choice moves.
*/
:is(.book-form .ff-default select.ff-el-form-control, .find-form select, .finder__sort select) option::checkmark {
content: "";
order: -1;
inline-size: 1rem;
block-size: 1rem;
flex: 0 0 auto;
background: var(--clr-primary);
-webkit-mask: var(--icon-check) center / contain no-repeat;
mask: var(--icon-check) center / contain no-repeat;
opacity: 0;
}
:is(.book-form .ff-default select.ff-el-form-control, .find-form select, .finder__sort select) option:checked::checkmark { opacity: 1; }
@media (prefers-reduced-motion: reduce) {
:is(.book-form .ff-default select.ff-el-form-control, .find-form select, .finder__sort select)::picker(select),
:is(.book-form .ff-default select.ff-el-form-control, .find-form select, .finder__sort select)::picker-icon {
transition: none;
}
}
}
/*
* Footer row: the reassurance sits left of the submit, both on one line, which
* is why the button stops being full width here. Below 40rem they stack, and
* the button spans the column again - matching the reference's
* `flex-col sm:flex-row sm:justify-between`.
*/
.book-form .mta-form-note {
margin: 0;
display: flex;
/* Not center: once the note wraps, centring drags the icon down beside the
middle of the block. It belongs next to the first line at any width. */
align-items: flex-start;
gap: var(--space-xs);
font-size: var(--text-sm);
line-height: var(--lh-sm);
color: var(--clr-muted-fg);
}
.book-form .mta-form-note .mi {
background: var(--clr-success);
/* Half the difference between the 20px line box and the 16px glyph, so it
lands on the first line's optical centre rather than its top edge. */
margin-block-start: .125rem;
}
@media (min-width: 40rem) {
.book-form form > fieldset > .mta-note { grid-column: 1 / 2; align-self: center; }
.book-form form > fieldset > .ff_submit_btn_wrapper {
grid-column: 2 / 3;
justify-self: end;
align-self: center;
}
.book-form .ff-default .ff-btn-submit { inline-size: auto; }
}
@media (hover: hover) {
.book-form .ff-default .ff-btn-submit:hover { opacity: .9; }
}
/* --- Booking form: states ---
*
* The form plugin's two stylesheets are not loaded (see the dequeue in
* functions.php), so everything they did for this form is reproduced here on
* our own tokens. Only the parts this form can actually reach are kept: the
* originals also covered file uploads, repeaters, multi-step, payments and
* half a dozen field types we do not use, which is most of the 47KB saved.
*
* The selectors stay qualified with .ff-default even though nothing competes
* with them any more. It costs nothing and it is the insurance: if a future
* release renames the enqueue handle and the dequeue quietly stops matching,
* the plugin's own sheet returns and these rules still win.
*/
/* Structural, and load-bearing. The honeypot is a real anti-spam field: if it
ever loses its hiding it becomes a visible input that humans will fill in,
and every genuine submission is then scored as a bot. */
.book-form .ff-hidden { display: none !important; }
.book-form .ff_force_hide { display: none !important; visibility: hidden !important; }
.book-form .ff-el-group.ff-hpsf-container {
display: none !important;
position: absolute !important;
transform: translateX(1000%) !important;
}
/* Present in the markup from the start and revealed by script only when a
submission fails, so it has to default to hidden. */
.book-form .ff-errors-in-stack { display: none; margin-block-start: var(--space-l); }
/* Invalid fields.
* The plugin's danger colour is #F56C6C, which sits at about 3:1 on white and
* fails AA for text - not something to carry over when the whole point of the
* message is that it must be read. Ours is the palette's destructive red. */
.book-form .ff-default .text-danger, .book-form .ff-errors-in-stack .error { color: var(--clr-destructive); }
.book-form .ff-default .ff-el-is-error .ff-el-form-control { border-color: var(--clr-destructive); }
.book-form .ff-default .ff-el-is-error .text-danger {
margin-block-start: var(--space-3xs);
font-size: var(--text-sm);
line-height: var(--lh-xs);
}
.book-form .ff-default .ff-el-is-error .ff-el-form-check-label, .book-form .ff-default .ff-el-is-error .ff-el-form-check-label a { color: var(--clr-destructive); }
.book-form .ff-errors-in-stack .error { font-size: var(--text-sm); line-height: var(--lh-relaxed); }
.book-form .ff-errors-in-stack .error-clear {
margin-inline-start: var(--space-3xs); padding-inline: var(--space-3xs); cursor: pointer;
}
/* Sent. A bordered card like every other panel on the page rather than the
plugin's generic grey box, with the success green carrying the meaning. */
.book-form .ff-message-success {
position: relative;
margin-block-start: var(--space-l);
padding: var(--space-l);
border: 1px solid color-mix(in srgb, var(--clr-success) 35%, transparent);
border-radius: var(--radius-lg);
background: color-mix(in srgb, var(--clr-success) 8%, var(--clr-card));
color: var(--clr-fg);
}
/* Submitting. The button keeps its shape and a bar sweeps across it, so the
wait is legible without the layout moving. */
.book-form .ff_submitting { pointer-events: none; }
.book-form .ff-default .ff-btn.disabled { opacity: .65; }
.book-form .ff-default .ff-btn.ff-working { position: relative; overflow: hidden; }
.book-form .ff-default .ff-btn.ff-working::before {
content: "";
position: absolute;
inset-block-end: 0;
inset-inline-start: 0;
block-size: .3125rem;
background: color-mix(in srgb, var(--clr-primary-fg) 40%, transparent);
animation: form-progress 4s linear infinite;
}
@media (prefers-reduced-motion: reduce) {
.book-form .ff-default .ff-btn.ff-working::before { animation: none; inline-size: 100%; }
}
/* Field descriptions, if any field is ever given one. */
.book-form .ff-default .ff-el-help-message {
margin-block-start: var(--space-3xs);
font-size: var(--text-sm);
line-height: var(--lh-xs);
color: var(--clr-muted-fg);
}
/* The required marker the plugin appends to the label text. */
.book-form .ff-default .ff-el-is-required.asterisk-right label::after {
content: " *";
margin-inline-start: 3px;
color: var(--clr-destructive);
}
.book-form .ff-default .ff-el-is-required.asterisk-left label::before {
content: "* ";
margin-inline-end: 3px;
color: var(--clr-destructive);
}
.book-form .ff-default .ff-el-form-check-label { cursor: pointer; }
.book-form .ff-default .ff-read-only {
background: var(--clr-muted) !important;
opacity: 1;
pointer-events: none;
user-select: none;
}
/* --- Related tours ---
* Two bordered boxes of links, not image cards: rounded-2xl border p-6, each
* row a flex link with a trailing arrow and a hairline divider.
*/
/*
* align-items: start, so a card is only as tall as what is in it.
*
* Grid items stretch to their row by default, which made the one-link Zagora
* card as tall as the six-link Grand one and left a panel of empty white under
* its single entry. Nothing is gained by the two matching - they are separate
* lists, not columns of a table.
*/
.related-groups {
display: grid;
gap: var(--space-l);
grid-template-columns: 1fr;
align-items: start;
}
@media (min-width: 48rem) {
.related-groups { grid-template-columns: repeat(2, 1fr); }
}
.related-group {
padding: var(--space-2xl);
background: var(--clr-card);
border: 1px solid var(--clr-border);
border-radius: var(--radius-2xl);
}
.related-group h3 { margin: 0; }
.related-group ul { margin-block-start: var(--space-l); list-style: none; }
/* No rule between rows: the gap alone separates them, and it is the same 8px
the reference leaves either side of its hairline, so the row pitch is
unchanged. */
.related-group li + li { margin-block-start: var(--space-xs); }
.related-group a {
display: flex;
align-items: center;
justify-content: space-between;
gap: var(--space-m);
padding-block: var(--space-2xs);
font-size: var(--text-sm);
text-decoration: none;
color: color-mix(in srgb, var(--clr-fg) 80%, transparent);
transition: color .15s ease;
}
.related-group a::after {
content: "";
inline-size: 1rem;
block-size: 1rem;
flex: 0 0 auto;
background: var(--clr-muted-fg);
-webkit-mask: var(--icon-arrow-right) center / contain no-repeat;
mask: var(--icon-arrow-right) center / contain no-repeat;
}
@media (hover: hover) {
.related-group a:hover { color: var(--clr-primary); }
}
/* sm:gap-2 */
/* --- Overview --- */
.prose { color: var(--clr-fg-soft); }
.related-group a { color: var(--clr-fg-soft); }
.fact-icon--duration {
-webkit-mask: var(--icon-clock) center / contain no-repeat; mask: var(--icon-clock) center / contain no-repeat;
}
.fact-icon--group {
-webkit-mask: var(--icon-users) center / contain no-repeat; mask: var(--icon-users) center / contain no-repeat;
}
.fact-icon--start {
-webkit-mask: var(--icon-map-pin) center / contain no-repeat; mask: var(--icon-map-pin) center / contain no-repeat;
}
.fact-icon--highlights {
-webkit-mask: var(--icon-camera) center / contain no-repeat; mask: var(--icon-camera) center / contain no-repeat;
}
/* --- Buttons --- */
.aside-card--book .btn { inline-size: 100%; padding: var(--space-m) var(--space-l); }
.aside-card--book .btn--gold { margin-block-start: var(--space-xl); }
/* mt-5 */
.aside-card--book .btn--ghost { margin-block-start: var(--space-xs); }
@media (hover: hover) {
.btn--ghost:hover { background: var(--clr-secondary); filter: none; }
}
.tour-card__title { text-wrap: wrap; }
.related {
margin-block-start: calc(var(--section-py) - var(--tour-frame-py));
padding-block: 0 var(--tour-frame-py);
}
/* --- Partial star rating ---
* One element: a row of star-shaped holes over a gradient that switches colour
* at the rating. 4.8/5 stops the gold at 96%, so the last star is part-filled.
*/
.tour-stars {
display: block;
inline-size: 5rem;
block-size: 1rem;
flex: 0 0 auto;
background: linear-gradient(
to right,
var(--clr-gold) 0 var(--fill, 100%),
var(--clr-border) var(--fill, 100%) 100%
);
-webkit-mask: var(--icon-star-solid) repeat-x left center / 1rem 1rem;
mask: var(--icon-star-solid) repeat-x left center / 1rem 1rem;
}
.tour-stars i { display: none; }
/*
* Split variant: one element per star, each carrying its own fill.
*
* The default .tour-stars is a single strip - one gradient behind a repeating
* star mask - which cannot hold a gap between stars without stretching the
* glyph, because the tile and the star are the same box. Splitting solves that
* and makes the fill exact at the same time: star four is either full or empty,
* never "80% of a strip that includes the gaps".
*
* Each gets --star-fill from the template: 100% for a whole star, 0% for an
* empty one, and the remainder for the one the rating lands inside.
*/
.tour-stars--split {
display: inline-flex;
gap: var(--space-3xs);
inline-size: auto;
block-size: auto;
background: none;
-webkit-mask: none;
mask: none;
}
.tour-stars--split i {
display: block;
inline-size: 1.25rem;
block-size: 1.25rem;
background: linear-gradient(
to right,
var(--clr-gold) 0 var(--star-fill, 100%),
var(--clr-border) var(--star-fill, 100%) 100%
);
-webkit-mask: var(--icon-star-solid) center / contain no-repeat;
mask: var(--icon-star-solid) center / contain no-repeat;
}
.award-grid {
margin-block-start: var(--space-m); /* mt-3 */
display: grid;
grid-template-columns: repeat(5, minmax(0, 1fr));
gap: var(--space-m); /* gap-3 */
list-style: none;
}
.award-grid img {
inline-size: 100%;
block-size: auto;
object-fit: contain;
}
/* The year-list rules above still match these s; scope past them. */
.aside-card--awards .award-grid {
margin-block-start: var(--space-m);
grid-template-columns: repeat(5, minmax(0, 1fr));
gap: var(--space-m);
}
.aside-card--awards .award-grid li { display: block; color: inherit; }
.aside-card--awards .award-grid li::before { content: none; }
.tour-card__title { line-height: var(--lh-base); }
/* Small labels and metadata */
.section-eyebrow, .tour-card__meta dt { line-height: var(--lh-xs); }
.tour-card__rating, .tour-card__meta, .related-group a, .btn { line-height: var(--lh-sm); }
/* Body copy the reference marks leading-relaxed. The FAQ answer is not in this
list: at 14px it takes its own 28px leading, set where its size is set. */
.prose { line-height: var(--lh-relaxed); }
.tour-card__media { position: relative; }
.tour-card__media img { aspect-ratio: 16 / 10; display: block; }
/* The reference spaces the card parts with individual margins, so the flex gap
is dropped rather than fought. */
.tour-card__body { gap: 0; }
/* Size is fixed here on purpose. The heading LEVEL changes with context - h3
under Popular Tours, h4 inside a route group - but a card should not visibly
shrink because of where it happens to sit. */
.tour-card__title { font-size: 1.125rem; line-height: 1.35; }
.tour-card__meta {
margin-block: var(--space-xl) var(--space-l);
display: grid;
gap: var(--space-s);
font-size: var(--text-sm);
line-height: var(--lh-sm);
}
.tour-card__meta > div { display: flex; align-items: center; gap: var(--space-xs); }
/* The row carries an mi-* class; this draws its glyph in front of the value. */
.tour-card__meta > div::before {
content: "";
inline-size: 1rem;
block-size: 1rem;
flex: 0 0 auto;
background: var(--clr-primary);
-webkit-mask: var(--mi) center / contain no-repeat;
mask: var(--mi) center / contain no-repeat;
}
.tour-card__meta dd { margin: 0; font-weight: 400; color: var(--clr-fg-soft); }
.tour-card__foot .btn { padding: var(--space-xs) var(--space-l); }
.help-cta .btn--ghost {
border-color: color-mix(in srgb, var(--clr-primary-fg) 35%, transparent); color: var(--clr-primary-fg); background: color-mix(in srgb, var(--clr-primary-fg) 14%, transparent);
}
@media (hover: hover) {
.help-cta .btn--ghost:hover {
background: color-mix(in srgb, var(--clr-primary-fg) 24%, transparent);
}
}
.review-summary .award-grid { margin-block-start: var(--space-l); }
.notice {
padding: var(--space-xl); border: 1px dashed var(--clr-border); border-radius: var(--radius-2xl); color: var(--clr-muted-fg);
}
/*
* Callout: a gold-edged aside that qualifies something beside it - the price
* disclaimer on a category page, the pricing note on a tour. One component,
* because the reference draws both with identical markup; they were two classes
* here only because they were written weeks apart.
*
* The icon is a flex sibling of the text, never a float. Floated, the paragraph
* flows *around* the glyph and every wrapped line slides back underneath it; as
* a flex item the text keeps a single left edge, so line two starts under the
* first word of line one.
*
* 15px: the reference says text-sm, but this is the one line on the page
* warning that a price can move, and 14px reads as fine print.
*/
.callout {
display: flex;
align-items: flex-start;
gap: var(--space-m);
margin-block-start: var(--space-xl);
padding: var(--space-l);
border-inline-start: 4px solid var(--clr-gold);
border-radius: var(--radius-xl);
background: color-mix(in srgb, var(--clr-gold) 10%, transparent);
font-size: 0.9375rem; /* 15px */
line-height: var(--lh-relaxed);
color: var(--clr-fg);
}
.callout .mi {
inline-size: 1.375rem;
block-size: 1.375rem;
/* Half the gap between the 26px line box and the glyph, so it lands on the
first line's optical centre instead of its top edge. */
margin-block-start: .125rem;
/* gold-foreground is the near-black navy, not a gold. */
background: var(--clr-gold-fg);
}
.callout p { margin: 0; }
.callout strong { color: var(--clr-primary); }
/* ==========================================================================
6. REGIONS - header, drawer, footer
========================================================================== */
.nav-list, .footer-links, .footer-social ul { list-style: none; }
.skip-link {
position: absolute;
inset-inline-start: -9999px;
top: 0;
z-index: 100;
}
.skip-link:focus-visible {
inset-inline-start: var(--space-l);
top: var(--space-xs);
padding: var(--space-xs) var(--space-l);
background: var(--clr-primary);
color: var(--clr-primary-fg);
border-radius: var(--radius-full);
font-size: var(--text-sm);
text-decoration: none;
}
.site-header {
position: sticky;
top: 0;
z-index: 50;
background: var(--clr-card);
border-bottom: 1px solid var(--clr-border);
}
.site-header__inner {
display: flex;
align-items: center;
gap: var(--space-2xl);
min-height: var(--header-h);
}
.site-logo { flex: 0 0 auto; display: flex; align-items: center; }
.site-logo img { height: 2rem; width: auto; }
@media (min-width: 640px) {
.site-logo img { height: 2.25rem; }
}
/* --- Desktop nav --- */
.nav-main { flex: 1 1 auto; }
/*
* The drawer takes over at 1100, not 992.
*
* Measured: seven items summing 638px, six 24px gaps and a 219px wordmark come
* to about 1025px of content, and the container adds 64px of gutter - so the
* full menu needs roughly 1090px of viewport. At 992 it was being shown from
* 100px too early, and between there and about 1090 the CTA hung 34px past the
* right edge and the WHOLE SITE scrolled sideways. Every page, not only the
* homepage.
*/
@media (max-width: 1099px) {
.nav-main { display: none; }
}
@media (min-width: 640px) and (max-width: 1099px) {
.nav-main { display: block; }
.nav-main .nav-list { justify-content: flex-end; gap: var(--space-xs); }
.nav-main .nav-list > li { display: none; }
.nav-main .nav-list > li.menu-item-lang, .nav-main .nav-list > li.menu-item-cta { display: flex; }
/* The auto margins that space the full row would strand these two apart. */
.nav-main .nav-list > li:first-child, .nav-main .nav-list > li.menu-item-cta { margin-inline-start: 0; }
}
@media (min-width: 640px) {
.nav-drawer .menu-item-lang, .nav-drawer .menu-item-cta { display: none; }
}
.nav-list {
display: flex;
align-items: center;
gap: var(--space-2xl);
margin: 0;
}
/*
* Flex so the text and the chevron button are centred on each other. As plain
* inline boxes they met on the baseline, and a button holding only an icon has
* its baseline at its bottom edge - which lifted the chevron 2px above the
* middle of the text. The drawer's own li rule already does the same.
*/
.nav-list > li { position: relative; display: flex; align-items: center; }
.nav-list > li > a {
display: inline-flex;
align-items: center;
gap: var(--space-3xs);
font-size: var(--text-sm);
font-weight: 500;
text-decoration: none;
white-space: nowrap;
transition: color .15s ease;
}
.nav-list > li > a:hover, .nav-list > li.current-menu-item > a, .nav-list > li.current-menu-ancestor > a { color: var(--clr-primary); }
/* Disclosure button. The chevron is a mask so it recolours with the text. */
.nav-toggle {
display: inline-flex;
align-items: center;
padding: 0 0 0 var(--space-3xs);
}
.nav-toggle__icon {
inline-size: .875rem;
block-size: .875rem;
background: currentColor;
-webkit-mask: var(--icon-chevron-down) center / contain no-repeat;
mask: var(--icon-chevron-down) center / contain no-repeat;
transition: transform .15s ease;
}
/*
* The chevron flips whenever its submenu is showing. On desktop that is hover
* or keyboard focus as well as a click, mirroring the rules that reveal the
* panel below - it used to flip only on click, so hovering opened the menu with
* the arrow still pointing down.
*/
.menu-item-has-children.is-open > .nav-toggle .nav-toggle__icon,
.nav-main .menu-item-has-children:focus-within > .nav-toggle .nav-toggle__icon { transform: rotate(180deg); }
@media (hover: hover) {
.nav-main .menu-item-has-children:hover > .nav-toggle .nav-toggle__icon { transform: rotate(180deg); }
}
/* --- Submenu --- */
/*
* A small gap between the item and its panel, as the reference (whose panel sits
* about 11px under the text). The item is now only as tall as its text, so the
* gap is set here instead of coming from the old 28px line box. The ::after
* bridges it: without it, moving the pointer down across the gap would leave
* the item and close the menu before reaching it.
*/
.nav-main .menu-item-has-children::after {
content: "";
position: absolute;
inset-inline: 0;
top: 100%;
block-size: var(--space-2xs);
}
.nav-main .sub-menu {
position: absolute;
inset-inline-start: 50%;
top: calc(100% + var(--space-2xs));
min-inline-size: 14rem;
margin: 0;
padding: 0;
list-style: none;
background: var(--clr-card);
border: 1px solid var(--clr-border);
border-radius: var(--radius-xl);
/* Clips the first and last row's hover fill to the rounded corners, which is
what lets the panel sit flush with no padding above or below the items. */
overflow: hidden;
box-shadow: 0 12px 32px -8px rgba(5, 18, 35, .18);
opacity: 0;
visibility: hidden;
transform: translate(-50%, .5rem);
transition: opacity .18s ease, transform .18s ease, visibility .18s;
}
.nav-main .menu-item-has-children:hover > .sub-menu, .nav-main .menu-item-has-children:focus-within > .sub-menu, .nav-main .menu-item-has-children.is-open > .sub-menu {
opacity: 1;
visibility: visible;
transform: translate(-50%, 0);
}
.nav-main .sub-menu a {
display: flex;
align-items: center;
gap: var(--space-s);
padding: var(--space-s) var(--space-l);
font-size: var(--text-sm);
text-decoration: none;
white-space: nowrap;
transition: background-color .15s ease, color .15s ease;
}
@media (hover: hover) {
.nav-main .sub-menu a:hover {
background: var(--clr-secondary);
color: var(--clr-primary);
}
}
/* --- CTA --- */
/* --- Language switcher ---
* A menu item that renders a pill button plus a .sub-menu, so positioning,
* reveal animation and the disclosure script are all inherited. Only the
* pill, the flags and the right-edge alignment are new.
*/
.lang-switch {
gap: var(--space-2xs);
padding: var(--space-2xs) var(--space-m);
border: 1px solid var(--clr-border);
border-radius: var(--radius-full);
font-size: var(--text-sm);
font-weight: 500;
}
@media (hover: hover) {
.lang-switch:hover {
color: var(--clr-primary); border-color: var(--clr-primary);
}
}
.lang-flag {
inline-size: 1.25rem;
block-size: .9375rem;
flex: 0 0 auto;
border-radius: 2px;
object-fit: cover;
}
/* Anchored to the right edge: it sits near the end of the row, where a
centred panel would overflow the container. */
.nav-main .lang-list {
inset-inline-start: auto;
inset-inline-end: 0;
transform: translate(0, .5rem);
}
.nav-main .menu-item-lang:hover > .lang-list, .nav-main .menu-item-lang:focus-within > .lang-list, .nav-main .menu-item-lang.is-open > .lang-list { transform: translate(0, 0); }
.lang-list .is-current > a { color: var(--clr-primary); font-weight: 600; }
/* Tick on the active language, pushed to the end of the row. */
.lang-list .is-current > a::after {
content: "";
margin-inline-start: auto;
inline-size: 1rem;
block-size: 1rem;
flex: 0 0 auto;
background: var(--clr-primary);
-webkit-mask: var(--icon-check) center / contain no-repeat;
mask: var(--icon-check) center / contain no-repeat;
}
/*
* The button carries both labels and the context decides which shows: the
* header is tight, so it uses the code; the drawer has a full row, so it uses
* the language's own name. Scoping by container rather than a media query keeps
* this correct at every width without a breakpoint to maintain.
*/
.nav-main .lang-name { display: none; }
.nav-list--stacked .lang-code { display: none; }
/* In the drawer the pill spans the row like every other item. */
.nav-list--stacked > li.menu-item-lang > .lang-switch {
flex: 1 1 auto;
justify-content: flex-start;
margin: var(--space-m) var(--space-m) 0;
}
/*
* Drawer alignment. The chevron is pushed to the far end of the pill, and the
* list is given the same end margin as the pill so the tick lands on exactly
* the same right edge. Both sit one --space-m inside their own box, so they
* line up vertically without either being positioned by hand.
*/
.nav-list--stacked > li.menu-item-lang > .lang-switch .nav-toggle__icon { margin-inline-start: auto; }
/* .sub-menu in the selector so this beats the margin shorthand set on
.nav-list--stacked .sub-menu later in the file. */
.nav-list--stacked .sub-menu.lang-list { margin-inline-end: var(--space-m); }
/*
* The CTA is a real menu item, so it is translatable and flows into the
* drawer. margin-inline-start:auto absorbs the row's free space and pushes it
* to the end; the logical property means it flips correctly in RTL.
*
* A second auto margin on the first link makes the row behave like the
* reference header's three-group space-between: free space splits evenly
* between logo-to-links and links-to-CTA, instead of bunching the links up
* against the logo. Desktop only โ the drawer stacks vertically, where an
* inline auto margin would shove the first item sideways.
*/
.nav-list > li.menu-item-cta { margin-inline-start: auto; }
.nav-main .nav-list > li:first-child { margin-inline-start: auto; }
.nav-list > li.menu-item-cta > a {
gap: var(--space-xs);
padding: var(--space-xs) var(--space-l);
background: var(--clr-gold);
color: var(--clr-gold-fg);
border-radius: var(--radius-full);
font-weight: 600;
}
.nav-list > li.menu-item-cta > a:hover { filter: brightness(.95); color: var(--clr-gold-fg); }
.nav-list > li.menu-item-cta > a::after {
content: "";
inline-size: 1rem;
block-size: 1rem;
flex: 0 0 auto;
background: currentColor;
-webkit-mask: var(--icon-arrow-right) center / contain no-repeat;
mask: var(--icon-arrow-right) center / contain no-repeat;
}
/* --- Burger --- */
.nav-burger {
display: none;
margin-inline-start: auto;
inline-size: 2.5rem;
block-size: 2.5rem;
border: 1px solid var(--clr-border);
border-radius: var(--radius-md);
align-items: center;
justify-content: center;
color: var(--clr-primary);
}
@media (max-width: 1099px) {
.nav-burger { display: inline-flex; }
}
.nav-burger__bars {
inline-size: 1.25rem;
block-size: 1.25rem;
background: currentColor;
-webkit-mask: var(--icon-menu) center / contain no-repeat;
mask: var(--icon-menu) center / contain no-repeat;
}
.nav-drawer {
position: fixed;
inset: 0;
z-index: 100;
background: rgba(5, 18, 35, .45);
opacity: 0;
transition: opacity .3s ease;
}
.nav-drawer.is-open { opacity: 1; }
.nav-drawer[hidden] { display: none; }
.nav-drawer__panel {
position: absolute;
inset-block: 0;
inset-inline-end: 0;
inline-size: min(82%, 22rem);
display: flex;
flex-direction: column;
background: var(--clr-card);
border-inline-start: 1px solid var(--clr-border);
box-shadow: -8px 0 32px -8px rgba(5, 18, 35, .25);
transform: translateX(100%);
transition: transform .3s ease;
}
.nav-drawer.is-open .nav-drawer__panel { transform: translateX(0); }
.nav-drawer__head {
display: flex;
align-items: center;
justify-content: space-between;
min-block-size: var(--header-h);
padding-inline: var(--space-xl);
border-bottom: 1px solid var(--clr-border);
flex: 0 0 auto;
}
.nav-drawer__title { font-weight: 600; color: var(--clr-primary); }
.nav-drawer__close {
inline-size: 2.5rem;
block-size: 2.5rem;
display: inline-flex;
align-items: center;
justify-content: center;
border-radius: var(--radius-md);
color: var(--clr-primary);
}
.nav-drawer__close span {
inline-size: 1.25rem;
block-size: 1.25rem;
background: currentColor;
-webkit-mask: var(--icon-x) center / contain no-repeat;
mask: var(--icon-x) center / contain no-repeat;
}
.nav-drawer__nav {
flex: 1 1 auto;
overflow-y: auto;
overscroll-behavior-y: contain;
-webkit-overflow-scrolling: touch;
padding: var(--space-l) var(--space-m);
}
.nav-list--stacked { flex-direction: column; align-items: stretch; gap: 0; }
.nav-list--stacked > li { position: static; }
.nav-list--stacked > li > a {
display: flex;
align-items: center;
justify-content: space-between;
padding: var(--space-m) var(--space-m);
border-radius: var(--radius-lg);
font-size: 1rem;
white-space: normal;
}
@media (hover: hover) {
.nav-list--stacked > li > a:hover { background: var(--clr-secondary); }
}
.nav-list--stacked > li { display: flex; flex-wrap: wrap; align-items: center; }
.nav-list--stacked > li > a { flex: 1 1 auto; }
.nav-list--stacked > li > .nav-toggle {
padding: var(--space-m);
border-radius: var(--radius-lg);
}
/* Collapsed by default; the disclosure button reveals it.
*
* The height is animated by script, so the panel cannot be display:none, and it
* cannot carry vertical margins or padding of its own either: padding is never
* compressed, so height:0 would still measure 12px and leave a gap with a stub
* of the left rule under every closed item. The vertical rhythm therefore sits
* on the first and last row as padding - counted by scrollHeight, unlike a
* trailing margin, and clipped to nothing when the panel is shut.
*
* visibility keeps the links out of the tab order while closed. It is switched
* with a zero-length transition delayed to the end of the slide, so the panel
* stays visible on the way out and disappears only once it has finished.
*/
.nav-list--stacked .sub-menu {
/* Shrinkable: a 100% basis plus inline margins would otherwise overflow the
row by exactly the margin width, pushing every submenu past its parent. */
flex: 1 1 100%;
margin: 0 0 0 var(--space-m);
padding: 0 0 0 var(--space-m);
border-inline-start: 1px solid var(--clr-border);
list-style: none;
block-size: 0;
overflow: hidden;
visibility: hidden;
transition: height .25s ease, visibility 0s linear .25s;
}
.nav-list--stacked .sub-menu > li:first-child { padding-block-start: var(--space-3xs); }
.nav-list--stacked .sub-menu > li:last-child { padding-block-end: var(--space-xs); }
.nav-list--stacked .menu-item-has-children.is-open > .sub-menu {
visibility: visible;
transition: height .25s ease, visibility 0s;
}
@media (prefers-reduced-motion: reduce) {
.nav-list--stacked .sub-menu { transition: none; }
}
.nav-list--stacked .sub-menu a {
display: flex;
align-items: center;
gap: var(--space-s);
inline-size: 100%;
padding: var(--space-xs) var(--space-m);
border-radius: var(--radius-md);
font-size: var(--text-sm);
text-decoration: none;
white-space: normal;
}
@media (hover: hover) {
.nav-list--stacked .sub-menu a:hover {
background: var(--clr-secondary); color: var(--clr-primary);
}
}
/* CTA sits full-width at the end of the drawer. */
.nav-list--stacked > li.menu-item-cta { margin: var(--space-l) var(--space-m) 0; }
.nav-list--stacked > li.menu-item-cta > a { justify-content: center; }
.site-footer {
margin-block-start: var(--space-4xl);
background: var(--clr-secondary);
border-top: 1px solid var(--clr-border);
}
.footer-grid {
display: grid;
gap: var(--space-4xl);
padding-block: var(--section-py);
grid-template-columns: repeat(auto-fit, minmax(min(16rem, 100%), 1fr));
}
.footer-blurb {
margin-block-start: var(--space-l); color: var(--clr-muted-fg);
}
.footer-contact {
margin-block-start: var(--space-2xl); display: grid; gap: var(--space-l); font-size: var(--text-sm);
}
.footer-contact dt {
font-size: var(--text-badge);
font-weight: 600;
text-transform: uppercase;
letter-spacing: 0.1em;
color: var(--clr-muted-fg);
}
.footer-contact dd { margin: var(--space-3xs) 0 0; }
.footer-contact a { text-decoration: none; }
.footer-contact a:hover { color: var(--clr-primary); }
.footer-social ul {
margin-block-start: var(--space-2xl); display: flex; flex-wrap: wrap; gap: var(--space-m);
}
.social-link {
inline-size: 2.25rem;
block-size: 2.25rem;
display: inline-flex;
align-items: center;
justify-content: center;
border: 1px solid var(--clr-border);
border-radius: var(--radius-full);
transition: background-color .2s ease, color .2s ease, transform .2s ease;
}
@media (hover: hover) {
.social-link:hover {
background: var(--clr-primary);
color: var(--clr-primary-fg);
border-color: var(--clr-primary);
transform: translateY(-2px);
}
}
.social-link span {
inline-size: 1rem;
block-size: 1rem;
background: currentColor;
-webkit-mask: var(--social) center / contain no-repeat;
mask: var(--social) center / contain no-repeat;
}
.footer-col__title {
display: block;
font-weight: 600;
color: var(--clr-primary);
}
.footer-links {
margin-block-start: var(--space-xl); display: grid; gap: var(--space-m); font-size: var(--text-sm);
}
.footer-links a { color: var(--clr-muted-fg); text-decoration: none; }
.footer-links a:hover { color: var(--clr-primary); }
/* Award badges. Three per row, matching the reference; the images carry their
own aspect ratio so no fixed heights are needed. */
.footer-awards { margin-block-start: var(--space-4xl); }
.footer-awards__title {
font-size: var(--text-badge);
font-weight: 600;
text-transform: uppercase;
letter-spacing: .18em;
color: var(--clr-muted-fg);
}
.footer-awards__grid {
margin-block-start: var(--space-m);
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: var(--space-m);
}
.footer-awards img { inline-size: 100%; block-size: auto; }
/* The heart sits mid-sentence, so it is a real inline element rather than a
pseudo-element pinned to one end. aria-hidden in the markup keeps it out of
the accessible name; the sentence still reads correctly without it. */
.footer-heart {
display: inline-block;
inline-size: .875rem;
block-size: .875rem;
vertical-align: -.125em;
background: var(--clr-primary);
-webkit-mask: var(--icon-heart-solid) center / contain no-repeat;
mask: var(--icon-heart-solid) center / contain no-repeat;
}
.footer-bar { border-top: 1px solid var(--clr-border); }
.footer-bar__inner {
display: flex;
flex-wrap: wrap;
align-items: center;
justify-content: space-between;
gap: var(--space-m);
padding-block: var(--space-xl);
font-size: var(--text-sm);
color: var(--clr-muted-fg);
}
.footer-contact dt, .footer-awards__title { line-height: var(--lh-xs); }
.footer-links { line-height: var(--lh-sm); }
.footer-blurb { line-height: var(--lh-relaxed); }
/* ==========================================================================
7. PAGE: SINGLE TOUR - only what is unique to this template
========================================================================== */
/* --- Hero --- */
.tour-hero {
background: var(--clr-surface-tint);
padding-block: var(--space-5xl);
text-align: center;
}
.tour-badge {
display: inline-flex;
align-items: center;
gap: var(--space-xs);
margin: 0 0 var(--space-2xl);
padding: var(--space-xs) var(--space-l);
background: var(--clr-secondary);
border: 1px solid var(--clr-border);
border-radius: var(--radius-full);
font-size: var(--text-sm);
font-weight: 500;
}
.tour-badge::before {
content: "";
inline-size: 1rem;
block-size: 1rem;
flex: 0 0 auto;
background: var(--clr-gold);
-webkit-mask: var(--icon-award) center / contain no-repeat;
mask: var(--icon-award) center / contain no-repeat;
}
.tour-hero h1 { margin: 0; color: var(--clr-primary); }
.tour-tagline {
margin: var(--space-l) auto 0; max-width: 48rem; color: var(--clr-muted-fg);
}
.tour-rating {
margin: var(--space-2xl) 0 0;
display: flex;
flex-wrap: wrap;
gap: var(--space-m) var(--space-2xl);
justify-content: center;
align-items: center;
font-size: var(--text-sm);
}
.tour-rating a,
.tour-rating__pill {
display: inline-flex;
align-items: center;
gap: var(--space-xs);
padding: var(--space-xs) var(--space-l);
background: var(--clr-secondary);
border-radius: var(--radius-full);
text-decoration: none;
}
.tour-rating__score { font-weight: 700; color: var(--clr-primary); }
.tour-rating__count { color: var(--clr-muted-fg); }
.tour-recommended {
display: inline-flex;
align-items: center;
gap: var(--space-xs);
color: var(--clr-success);
}
.tour-recommended::before {
content: "";
inline-size: 1rem;
block-size: 1rem;
flex: 0 0 auto;
background: currentColor;
-webkit-mask: var(--icon-check) center / contain no-repeat;
mask: var(--icon-check) center / contain no-repeat;
}
/* --- Sticky section nav ---
* A 95% opaque tint rather than backdrop-filter: blur repaints a blurred layer
* on every scroll frame, which is measurably expensive on low-end mobile for
* an effect almost nobody can distinguish from this.
*/
.tour-nav {
position: sticky;
top: var(--header-h);
z-index: 40;
background: color-mix(in srgb, var(--clr-secondary) 95%, transparent);
border-block: 1px solid var(--clr-border);
}
.tour-nav ul {
display: flex;
justify-content: flex-start;
gap: var(--space-3xs);
list-style: none;
padding-block: var(--space-xs);
overflow-x: auto;
scroll-behavior: smooth;
scrollbar-width: none;
-ms-overflow-style: none;
}
@media (min-width: 992px) {
.tour-nav ul { justify-content: center; }
}
.tour-nav ul::-webkit-scrollbar { display: none; }
.tour-nav a {
display: block;
padding: var(--space-3xs) var(--space-l);
border-radius: var(--radius-full);
font-size: var(--text-sm);
font-weight: 500;
text-decoration: none;
white-space: nowrap;
transition: background-color .2s ease, color .2s ease;
}
@media (hover: hover) {
.tour-nav a:hover { background: var(--clr-card); color: var(--clr-primary); }
}
.tour-nav a[aria-current="true"] {
background: var(--clr-primary);
color: var(--clr-primary-fg);
}
/* --- Layout --- */
.tour-layout {
padding-block: var(--section-py); display: grid; gap: var(--space-5xl);
}
@media (min-width: 992px) {
.tour-layout { grid-template-columns: minmax(0, 2fr) minmax(0, 1fr); }
}
.tour-body { display: grid; gap: var(--section-py); min-width: 0; }
.tour-body > section { scroll-margin-block-start: 9rem; }
.tour-body h2 { color: var(--clr-primary); }
.tour-body h3 { color: var(--clr-primary); }
/* Shared lift used by every card surface. */
.tour-stats > div, .tour-tips > div, .tour-highlights li {
transition: transform .2s ease, box-shadow .2s ease, border-color .2s ease;
}
@media (hover: hover) {
.tour-stats > div:hover, .tour-tips > div:hover {
transform: translateY(-2px);
box-shadow: 0 8px 20px -12px rgba(5, 18, 35, .35);
}
.tour-highlights li:hover {
border-color: var(--clr-gold);
box-shadow: 0 8px 20px -12px rgba(5, 18, 35, .25);
}
}
/* --- Overview stats --- */
.tour-stats {
display: grid;
gap: var(--space-m);
grid-template-columns: 1fr;
margin: var(--space-3xl) 0 0;
}
@media (min-width: 30rem) {
.tour-stats { grid-template-columns: repeat(2, 1fr); }
}
@media (min-width: 62rem) {
.tour-stats { grid-template-columns: repeat(4, 1fr); }
}
.tour-stats > div, .tour-tips > div {
padding: var(--space-xl);
background: var(--clr-card);
border: 1px solid var(--clr-border);
border-radius: var(--radius-2xl);
}
.tour-stats > div.is-highlight {
background: var(--clr-accent); border-color: color-mix(in srgb, var(--clr-gold) 40%, transparent);
}
.tour-stats dt, .tour-tips dt {
font-size: var(--text-badge);
font-weight: 500;
text-transform: uppercase;
letter-spacing: .14em;
color: var(--clr-muted-fg);
}
.tour-stats dt { margin-block-start: var(--space-m); }
.tour-stats dd {
margin: var(--space-3xs) 0 0; font-size: 1.0625rem; font-weight: 700; color: var(--clr-primary);
}
.tour-stats .stat-icon {
display: block;
inline-size: 1.25rem;
block-size: 1.25rem;
background: var(--clr-primary);
}
.tour-stats .is-highlight .stat-icon { background: var(--clr-gold-ink); }
.stat-icon--duration {
-webkit-mask: var(--icon-clock) center / contain no-repeat; mask: var(--icon-clock) center / contain no-repeat;
}
.stat-icon--departure {
-webkit-mask: var(--icon-map-pin) center / contain no-repeat; mask: var(--icon-map-pin) center / contain no-repeat;
}
.stat-icon--return {
-webkit-mask: var(--icon-sunrise) center / contain no-repeat; mask: var(--icon-sunrise) center / contain no-repeat;
}
.stat-icon--price {
-webkit-mask: var(--icon-wallet) center / contain no-repeat; mask: var(--icon-wallet) center / contain no-repeat;
}
/* --- Lists --- */
.tour-highlights, .tour-inclusions ul, .tier-perks, .tour-gallery, .tour-pricing, .tour-reviews { list-style: none; }
.tour-highlights {
display: grid; gap: var(--space-m); grid-template-columns: repeat(auto-fit, minmax(min(18rem, 100%), 1fr));
}
.tour-highlights li {
display: flex;
gap: var(--space-m);
padding: var(--space-l);
background: var(--clr-card);
border: 1px solid var(--clr-border);
border-radius: var(--radius-xl);
font-size: var(--text-sm);
}
/*
* Tick in a soft green disc, drawn with one pseudo-element: the disc is the
* background colour and the glyph is a background-image layered on top. A mask
* cannot do both at once, and an inline SVG would mean six extra elements per
* list. The stroke colour is baked into the data URI because an external file
* has no `currentColor` context - keep it in step with --clr-success.
*
* The pale disc is a background, not text, so it carries no contrast
* requirement; the glyph itself stays the accessible dark green.
*/
.tour-highlights li::before, .tour-inclusions .is-included li::before, .tier-perks li::before {
content: "";
inline-size: 1.5rem;
block-size: 1.5rem;
flex: 0 0 auto;
border-radius: 50%;
background:
url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23036E3E' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6 9 17l-5-5'/%3E%3C/svg%3E")
center / .875rem .875rem no-repeat,
color-mix(in srgb, var(--clr-success) 12%, transparent);
}
.tour-highlights li::before { margin-block-start: -.125rem; }
/* Gold on the featured tier, where the ground is navy. */
.tier.is-featured .tier-perks li::before {
background:
url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23F3BA25' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6 9 17l-5-5'/%3E%3C/svg%3E")
center / .875rem .875rem no-repeat,
color-mix(in srgb, var(--clr-gold) 20%, transparent);
}
.tour-inclusions li, .tier-perks li { display: flex; gap: var(--space-m); }
.tour-inclusions {
display: grid; gap: var(--space-l); grid-template-columns: repeat(auto-fit, minmax(min(18rem, 100%), 1fr));
}
.tour-inclusions > section {
padding: var(--space-2xl); border: 1px solid var(--clr-border); border-radius: var(--radius-2xl); background: var(--clr-card);
}
.tour-inclusions > .is-included {
background: color-mix(in srgb, var(--clr-success) 6%, var(--clr-card));
border-color: color-mix(in srgb, var(--clr-success) 30%, transparent);
}
.tour-inclusions h3 { margin: 0 0 var(--space-l); }
.tour-inclusions ul {
display: grid; gap: var(--space-m); font-size: var(--text-sm);
}
.tour-inclusions .is-excluded li::before {
content: "";
inline-size: .375rem;
block-size: .375rem;
margin: .55rem .5625rem 0;
flex: 0 0 auto;
border-radius: 50%;
background: var(--clr-destructive);
}
/* --- Gallery --- */
/* The button is a sibling of the list, since a may only contain . */
.gallery-wrap { position: relative; }
.tour-gallery {
display: grid;
gap: var(--space-m);
grid-template-columns: repeat(auto-fit, minmax(min(14rem, 100%), 1fr));
}
.tour-gallery button {
display: block;
inline-size: 100%;
padding: 0;
border-radius: var(--radius-2xl);
overflow: hidden;
cursor: pointer;
}
.tour-gallery img {
aspect-ratio: 4 / 3;
object-fit: cover;
inline-size: 100%;
transition: transform .5s ease;
}
@media (hover: hover) {
.tour-gallery button:hover img { transform: scale(1.05); }
}
/* Three on phones, four on tablets, six on desktop - however many are uploaded. */
.tour-gallery li:nth-child(n+4) { display: none; }
@media (min-width: 40rem) {
.tour-gallery li:nth-child(-n+4) { display: block; }
.tour-gallery li:nth-child(n+5) { display: none; }
}
@media (min-width: 62rem) {
.tour-gallery li:nth-child(-n+6) { display: block; }
.tour-gallery li:nth-child(n+7) { display: none; }
}
.gallery-open {
position: absolute;
inset-block-end: var(--space-l);
inset-inline-end: var(--space-l);
display: inline-flex;
align-items: center;
gap: var(--space-xs);
padding: var(--space-s) var(--space-xl);
background: var(--clr-card);
border-radius: var(--radius-lg);
box-shadow: 0 10px 24px -8px rgba(5, 18, 35, .35);
font-size: var(--text-sm);
font-weight: 600;
color: var(--clr-primary);
cursor: pointer;
transition: opacity .2s ease;
}
@media (hover: hover) {
.gallery-open:hover { opacity: .9; }
}
.gallery-open::before {
content: "";
inline-size: 1rem;
block-size: 1rem;
background: currentColor;
-webkit-mask: var(--icon-camera) center / contain no-repeat;
mask: var(--icon-camera) center / contain no-repeat;
}
/* --- Lightbox --- */
.lightbox {
inline-size: 100vw;
max-inline-size: 100vw;
block-size: 100dvh;
max-block-size: 100dvh;
margin: 0;
padding: 0;
border: 0;
background: rgba(5, 18, 35, .92);
}
.lightbox::backdrop { background: rgba(5, 18, 35, .92); }
.lightbox__figure {
margin: 0;
block-size: 100%;
display: grid;
place-items: center;
padding: var(--space-4xl) var(--space-xl);
}
.lightbox img {
max-block-size: 82dvh;
max-inline-size: 92vw;
inline-size: auto;
border-radius: var(--radius-lg);
}
.lightbox button {
position: absolute;
display: inline-flex;
align-items: center;
justify-content: center;
inline-size: 2.75rem;
block-size: 2.75rem;
border-radius: 50%;
background: color-mix(in srgb, var(--clr-primary-fg) 12%, transparent);
cursor: pointer;
transition: background-color .2s ease;
}
@media (hover: hover) {
.lightbox button:hover {
background: color-mix(in srgb, var(--clr-primary-fg) 24%, transparent);
}
}
.lightbox button span {
inline-size: 1.5rem;
block-size: 1.5rem;
background: var(--clr-primary-fg);
}
.lightbox__close {
inset-block-start: var(--space-l); inset-inline-end: var(--space-l);
}
.lightbox__close span {
-webkit-mask: var(--icon-x) center / contain no-repeat; mask: var(--icon-x) center / contain no-repeat;
}
.lightbox__prev {
inset-block-start: 50%; inset-inline-start: var(--space-l); transform: translateY(-50%);
}
.lightbox__prev span {
-webkit-mask: var(--icon-chevron-left) center / contain no-repeat; mask: var(--icon-chevron-left) center / contain no-repeat;
}
.lightbox__next {
inset-block-start: 50%; inset-inline-end: var(--space-l); transform: translateY(-50%);
}
.lightbox__next span {
-webkit-mask: var(--icon-chevron-right) center / contain no-repeat; mask: var(--icon-chevron-right) center / contain no-repeat;
}
.lightbox__count {
position: absolute;
inset-block-end: var(--space-xl);
inset-inline: 0;
text-align: center;
color: color-mix(in srgb, var(--clr-primary-fg) 80%, transparent);
font-size: var(--text-sm);
}
/* --- Itinerary --- */
.tour-itinerary { list-style: none; display: grid; gap: var(--space-l); }
.tour-itinerary details {
padding: var(--space-2xl); background: var(--clr-card); border: 1px solid var(--clr-border); border-radius: var(--radius-2xl);
}
.tour-itinerary summary, .tour-faq summary, .tour-category-faq summary {
cursor: pointer; list-style: none; display: flex; align-items: center; gap: var(--space-m);
}
.tour-itinerary summary::-webkit-details-marker, .tour-faq summary::-webkit-details-marker, .tour-category-faq summary::-webkit-details-marker { display: none; }
.tour-itinerary summary h3 {
margin: 0; display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-m); flex: 1 1 auto;
}
.tour-itinerary summary::after, .tour-faq summary::after, .tour-category-faq summary::after {
content: "";
inline-size: 1.25rem;
block-size: 1.25rem;
flex: 0 0 auto;
background: var(--clr-muted-fg);
-webkit-mask: var(--icon-chevron-down) center / contain no-repeat;
mask: var(--icon-chevron-down) center / contain no-repeat;
transition: transform .3s ease;
}
.tour-itinerary details[open] summary::after, .tour-faq details[open] summary::after, .tour-category-faq details[open] summary::after { transform: rotate(180deg); }
.day-badge {
padding: var(--space-3xs) var(--space-m);
background: var(--clr-accent);
border-radius: var(--radius-full);
font-size: var(--text-badge);
font-weight: 700;
text-transform: uppercase;
letter-spacing: .1em;
color: var(--clr-accent-fg);
}
/* --- Map --- */
.tour-map {
margin: 0; border: 1px solid var(--clr-border); border-radius: var(--radius-2xl); overflow: hidden;
}
.tour-map__links {
display: flex; flex-wrap: wrap; gap: var(--space-m); justify-content: center; margin-block-start: var(--space-l);
}
.tour-map__links a {
display: inline-flex;
align-items: center;
gap: var(--space-xs);
padding: var(--space-xs) var(--space-l);
background: var(--clr-card);
border: 1px solid var(--clr-border);
border-radius: var(--radius-full);
font-size: var(--text-sm);
font-weight: 500;
text-decoration: none;
transition: border-color .2s ease, color .2s ease;
}
.tour-map__links a::before {
content: "";
inline-size: 1rem;
block-size: 1rem;
background: var(--clr-primary);
-webkit-mask: var(--icon-map-pin) center / contain no-repeat;
mask: var(--icon-map-pin) center / contain no-repeat;
}
@media (hover: hover) {
.tour-map__links a:hover {
border-color: var(--clr-primary); color: var(--clr-primary);
}
}
/* --- Pricing --- */
.tour-pricing {
display: grid; gap: var(--space-l); grid-template-columns: 1fr;
}
@media (min-width: 40rem) {
.tour-pricing { grid-template-columns: repeat(2, 1fr); }
}
@media (min-width: 62rem) {
.tour-pricing { grid-template-columns: repeat(3, 1fr); }
}
.tier.is-featured .tier-price { color: var(--clr-primary-fg); }
.tier-head {
display: flex; align-items: center; justify-content: space-between; gap: var(--space-m); flex-wrap: wrap;
}
.tier-head h3 { margin: 0; }
.tier-badge {
margin: 0;
padding: var(--space-3xs) var(--space-s);
background: var(--clr-secondary);
border-radius: var(--radius-full);
font-size: .625rem;
font-weight: 500;
text-transform: uppercase;
letter-spacing: .12em;
color: var(--clr-secondary-fg);
}
.tier.is-featured .tier-badge { background: var(--clr-gold); color: var(--clr-gold-fg); }
.tier-desc { margin: 0; font-size: var(--text-sm); }
.tier.is-featured .tier-desc {
color: color-mix(in srgb, var(--clr-primary-fg) 80%, transparent);
}
.tier-price {
margin: 0; font-size: 2rem; font-weight: 700; color: var(--clr-primary);
}
.tier-price__from, .aside-price__from {
display: block;
font-size: var(--text-badge);
font-weight: 400;
text-transform: uppercase;
letter-spacing: .14em;
color: var(--clr-muted-fg);
}
.tier.is-featured .tier-price__from {
color: color-mix(in srgb, var(--clr-primary-fg) 70%, transparent);
}
.tier-price span, .aside-price span { font-size: var(--text-sm); font-weight: 400; }
.tier-perks {
display: grid; gap: var(--space-s); font-size: var(--text-sm); flex: 1 1 auto;
}
.pricing-intro {
margin: 0 0 var(--space-2xl); color: var(--clr-muted-fg); max-width: 44rem;
}
/* --- Good to know --- */
.tour-tips {
display: grid; gap: var(--space-m); grid-template-columns: repeat(auto-fit, minmax(min(18rem, 100%), 1fr));
}
.tour-tips dt {
display: flex; align-items: center; gap: var(--space-s); font-size: 1rem; font-weight: 600; text-transform: none; letter-spacing: normal; color: var(--clr-primary);
}
.tip-icon { inline-size: 1.25rem; block-size: 1.25rem; }
.tour-tips dd {
margin: var(--space-xs) 0 0; font-size: var(--text-sm); color: var(--clr-muted-fg);
}
/* --- FAQ --- */
.tour-faq {
border: 1px solid var(--clr-border); border-radius: var(--radius-2xl); overflow: hidden; background: var(--clr-card);
}
.tour-faq details + details { border-block-start: 1px solid var(--clr-border); }
/*
* A flat 16/20 box, matching the reference button.
*
* The disclosure used to carry 8px of its own bottom padding so that a 12px
* summary and that 8px read as one 20px box while closed. The answer now holds
* its own padding instead, which does the same job from inside the animated
* element - so the padding here can be even, and a closed question is 56px
* rather than 64.
*/
.tour-faq details, .tour-category-faq details { padding-block-end: var(--space-xs); }
.tour-faq summary, .tour-category-faq summary { padding: var(--space-l) var(--space-xl) var(--space-xs); }
/*
* 16px at 600, not the 17px/700 a heading would give it.
*
* The question is an h3 so it keeps its place in the outline and in find-in-page;
* the reference reaches the same look with a plain span inside a button, which
* never inherits heading weight in the first place.
*/
.tour-faq summary h3, .tour-category-faq summary h3 {
margin: 0;
flex: 1 1 auto;
font-size: 1.0625rem;
font-weight: 600;
}
/* --- Reviews --- */
.reviews-summary {
margin: 0 0 var(--space-2xl); display: flex; align-items: center; gap: var(--space-m); font-size: var(--text-sm);
}
.reviews-summary strong { font-size: 1.5rem; color: var(--clr-primary); }
.tour-reviews {
display: grid; gap: var(--space-l); grid-template-columns: repeat(auto-fit, minmax(min(18rem, 100%), 1fr));
}
.tour-reviews article {
block-size: 100%; padding: var(--space-2xl); background: var(--clr-card); border: 1px solid var(--clr-border); border-radius: var(--radius-2xl);
}
/* The clamp itself cannot be animated - a line count has no in-between - so the
quote's box is what moves, and the script drives it between the clamped and
the full height. */
.tour-reviews blockquote { margin: 0; overflow: hidden; transition: height .3s ease; }
@media (prefers-reduced-motion: reduce) {
.tour-reviews blockquote { transition: none; }
}
.tour-reviews cite {
font-style: normal; font-weight: 600; color: var(--clr-primary);
}
.reviews-more {
margin-block-start: var(--space-l); font-size: var(--text-sm);
}
/* --- Sidebar --- */
.tour-aside {
align-self: start; display: grid; gap: var(--space-m); padding: var(--space-2xl); background: var(--clr-card); border: 1px solid var(--clr-border); border-radius: var(--radius-2xl);
}
@media (min-width: 992px) {
.tour-aside { position: sticky; top: 9rem; }
}
.aside-price {
margin: 0; font-size: 2.25rem; font-weight: 700; color: var(--clr-primary);
}
.aside-facts {
margin: 0; display: grid; gap: var(--space-m); padding-block-start: var(--space-l); border-block-start: 1px solid var(--clr-border); font-size: var(--text-sm);
}
.aside-facts > div {
display: flex; justify-content: space-between; gap: var(--space-m);
}
.aside-facts dt { color: var(--clr-muted-fg); }
.aside-facts dd { margin: 0; font-weight: 600; text-align: end; }
/* --- Know Before You Go ---
* dt is display:contents so the icon and the title become grid children of the
* card: the icon occupies column 1 across both rows, the title and body share
* column 2. That is what puts the title and the body on the same left edge.
*/
.tour-tips > div {
display: grid;
grid-template-columns: auto minmax(0, 1fr);
/* Column gap only. A row gap would also open up between the title and its
body, which the reference keeps at a flat 4px. */
gap: 0 var(--space-l);
align-items: start;
padding: var(--space-xl);
}
.tour-tips dt { display: contents; }
.tour-tips dd { grid-column: 2; margin: var(--space-3xs) 0 0; }
.tour-tips dt > span {
grid-column: 2;
font-size: 1rem;
font-weight: 600;
color: var(--clr-primary);
}
/*
* A span rather than an sits outside the container and wraps its own. The reference
* does the same - a full-width section with bg-[#EEF2FA], which is this token.
*/
.tour-category-hero {
background: var(--clr-surface-tint);
padding-block: clamp(2.5rem, 1.6rem + 4vw, 6rem) clamp(2rem, 1.5rem + 2.2vw, 4rem);
text-align: center;
}
.tour-category-hero__badge {
display: inline-flex;
align-items: center;
gap: var(--space-xs);
margin: 0;
padding: var(--space-2xs) var(--space-l);
border: 1px solid var(--clr-border);
border-radius: var(--radius-full);
background: var(--clr-secondary);
font-size: var(--text-xs);
line-height: var(--lh-xs);
font-weight: 500;
color: var(--clr-secondary-fg);
}
/* --clr-gold, matching .tour-badge on the tour page and the reference's
text-gold. The glyph is decorative and the text beside it carries the
meaning, so the AA-safe --clr-gold-ink this used to carry was solving a
problem the icon does not have - and it made the two heroes disagree. */
.tour-category-hero__badge .mi {
inline-size: .875rem; block-size: .875rem; background: var(--clr-gold);
}
.tour-category-hero__title { margin-block: var(--space-2xl) 0; }
.tour-category-hero__lede {
margin-block: var(--space-xl) 0;
margin-inline: auto;
max-inline-size: 42rem;
color: var(--clr-muted-fg);
}
.tour-category-hero__actions {
margin-block: var(--space-3xl) 0;
display: flex;
flex-wrap: wrap;
justify-content: center;
gap: var(--space-m);
}
.tour-category-hero__trust {
margin-block: var(--space-3xl) 0;
margin-inline: auto;
max-inline-size: 42rem;
list-style: none;
display: flex;
flex-wrap: wrap;
justify-content: center;
gap: var(--space-xs) var(--space-2xl);
color: var(--clr-fg-soft);
}
.tour-category-hero__trust li {
display: inline-flex; align-items: center; gap: var(--space-xs);
}
/* The reference uses CheckCircle2 here - the only circled check in the whole
design; every other tick is a bare Check, which is why the plain icon stays
the default everywhere else. */
.tour-category-hero__trust li::before {
content: "";
inline-size: 1rem;
block-size: 1rem;
flex: 0 0 auto;
background: var(--clr-success);
-webkit-mask: var(--icon-circle-check) center / contain no-repeat;
mask: var(--icon-circle-check) center / contain no-repeat;
}
/* --- Tour grid and card -------------------------------------------------- */
/* Explicit columns rather than auto-fit: the reference steps 1 to 2 to 3, and
auto-fit would stretch the lone Zagora card across the full row. */
.tour-grid { grid-template-columns: 1fr; gap: var(--space-2xl); }
@media (min-width: 48rem) {
.tour-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (min-width: 64rem) {
.tour-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
.tour-card__badge {
position: absolute;
inset-block-start: .875rem;
inset-inline-end: .875rem;
margin: 0;
padding: var(--space-2xs) var(--space-s);
border-radius: var(--radius-md);
background: rgba(3, 28, 61, .86);
font-size: var(--text-badge);
letter-spacing: .05em;
text-transform: uppercase;
/*
* --lh-xs, the leading every other pill in the theme uses, not 1. At
* line-height 1 the line box is exactly the glyph, so the same 6px of padding
* hugs the text and the badge reads tighter than the hero badge or a chip
* beside it. The reference reaches the same place from the other direction:
* it applies leading-none explicitly where it wants it and deliberately does
* not here, so this span inherits leading-relaxed and stands 28.6px tall.
*/
line-height: var(--lh-xs);
font-weight: 800;
color: var(--clr-primary-fg);
}
/*
* The highlight sits on the opposite corner from the badge, so however long
* either label gets the two cannot meet. Gold rather than navy, because this
* one is a claim about the tour ("Most popular") while the badge states what
* the tour is - two different kinds of fact should not look alike.
*
* Everything else matches .tour-card__badge exactly: same padding, radius,
* size and leading, so the pair read as one component seen twice.
*/
.tour-card__highlight {
position: absolute;
inset-block-start: .875rem;
inset-inline-start: .875rem;
margin: 0;
padding: var(--space-2xs) var(--space-s);
border-radius: var(--radius-md);
background: var(--clr-gold);
font-size: var(--text-badge);
line-height: var(--lh-xs);
letter-spacing: .05em;
text-transform: uppercase;
font-weight: 800;
color: var(--clr-gold-fg);
}
.tour-card__blurb { margin-block: var(--space-m) 0; color: var(--clr-muted-fg); }
.tour-card__foot {
margin-block-start: auto;
padding-block-start: var(--space-l);
border-block-start: 1px solid var(--clr-border);
display: flex;
align-items: center;
justify-content: space-between;
gap: var(--space-m);
}
.tour-card__price { margin: 0; }
.tour-card__price span {
display: block;
font-size: var(--text-xs);
line-height: 1;
color: var(--clr-muted-fg);
}
.tour-card__price data {
font-size: 1.3rem; font-weight: 700; color: var(--clr-primary);
}
/* --- Filter bar ---------------------------------------------------------- */
.filter-bar {
padding: var(--space-xl);
border: 1px solid var(--clr-border);
border-radius: var(--radius-2xl);
background: var(--clr-card);
}
.filter-bar[hidden] { display: none; }
.filter-bar__head { display: flex; flex-direction: column; gap: var(--space-m); }
@media (min-width: 40rem) {
.filter-bar__head {
flex-direction: row; align-items: center; justify-content: space-between;
}
}
.filter-bar__title {
margin: 0;
font-size: .9rem;
line-height: var(--lh-sm);
font-weight: 600;
text-transform: uppercase;
letter-spacing: .05em;
}
.filter-bar__count { margin: 0; font-size: .9rem; color: var(--clr-muted-fg); }
.filter-bar__count strong { color: var(--clr-fg); }
.filter-bar__chips {
margin-block-start: var(--space-l); display: flex; flex-wrap: wrap; gap: var(--space-xs);
}
.chip {
padding: var(--space-xs) var(--space-l);
border: 1px solid var(--clr-border);
border-radius: var(--radius-full);
background: var(--clr-bg);
font-size: var(--text-sm);
line-height: var(--lh-sm);
font-weight: 500;
color: var(--clr-fg-soft);
cursor: pointer;
transition: color .15s ease, border-color .15s ease, background-color .15s ease;
}
/*
* A chip is a button on the city pages and a link on the finder, where each
* quick filter is a whole page state and has to work with scripting off. Both
* mark the current one, with the attribute their element actually takes:
* aria-pressed for a toggle, aria-current for "you are here".
*/
a.chip { display: inline-block; text-decoration: none; }
.chip[aria-pressed="true"],
.chip[aria-current="true"] {
background: var(--clr-primary);
border-color: var(--clr-primary);
color: var(--clr-primary-fg);
}
@media (hover: hover) {
.chip:not([aria-pressed="true"], [aria-current="true"]):hover {
border-color: var(--clr-primary); color: var(--clr-primary);
}
}
/* --- Route groups -------------------------------------------------------- */
.tour-groups {
margin-block-start: var(--space-4xl); display: grid; gap: 3.5rem;
}
.tour-group__title {
margin: 0; display: flex; align-items: center; gap: var(--space-m);
}
.tour-group__title::before {
content: "";
inline-size: 2rem;
block-size: .25rem;
flex: 0 0 auto;
border-radius: var(--radius-full);
background: var(--clr-gold);
}
.tour-group__intro {
margin-block: var(--space-m) var(--space-2xl);
max-inline-size: 48rem;
color: var(--clr-muted-fg);
}
.tour-group .tour-grid { margin-block-start: var(--space-xl); }
/*
* Filtering, animated.
*
* Only the cards on their way out are handled here: they fade before the
* filter runs, so the survivors do not start moving while the leavers are
* still on screen. The movement itself is measured and animated in site.js,
* because CSS cannot know where a card is about to land.
*/
.tour-groups li[data-duration] {
transition: opacity .15s ease, transform .15s ease;
}
.tour-groups li.is-leaving {
opacity: 0;
transform: scale(.98);
}
@media (prefers-reduced-motion: reduce) {
.tour-groups li[data-duration] { transition: none; }
}
/* --- Highlights ---------------------------------------------------------- */
.highlight-grid, .daytrip-grid, .usp-grid, .more-links { list-style: none; display: grid; gap: var(--space-xl); }
@media (min-width: 40rem) {
.highlight-grid, .usp-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (min-width: 64rem) {
.highlight-grid, .usp-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
.highlight-card {
position: relative;
margin: 0;
border: 1px solid var(--clr-border);
border-radius: var(--radius-2xl);
overflow: hidden;
background: var(--clr-card);
block-size: 100%;
}
.highlight-card img {
inline-size: 100%; aspect-ratio: 4 / 3; object-fit: cover; display: block;
/* 500ms, per the reference's duration-500 - slower than the card lifts
elsewhere, because a photograph creeping is the effect. */
transition: transform .5s ease;
}
/*
* Hover-capable pointers only. On a touch screen :hover sticks after a tap, so
* the image would stay zoomed until something else was tapped.
*/
@media (hover: hover) {
.highlight-card:hover img { transform: scale(1.05); }
}
@media (prefers-reduced-motion: reduce) {
.highlight-card img { transition: none; }
.highlight-card:hover img { transform: none; }
}
/*
* The scrim covers the whole image, not just the caption box. Confining it to
* the caption compresses the fade into the text itself, so the first line ends
* up on the transparent end of the gradient - white on whatever the photograph
* happens to be. Spread over the full frame, every line sits in the dark end.
* This is load-bearing for contrast, not decoration.
*/
.highlight-card::after {
content: "";
position: absolute;
inset: 0;
/*
* The caption occupies the lower 45% of the frame, so the scrim has to still
* be dark where its first line starts, not only at the very bottom. Measured
* against a pure white photograph - the worst case - these stops hold every
* line above 7.4:1 - AAA - against a pure white photograph, the worst case;
* the earlier midpoint fade left the top line at 2.2:1.
*/
background: linear-gradient(to top, color-mix(in srgb, var(--clr-fg) 88%, transparent) 0%, color-mix(in srgb, var(--clr-fg) 72%, transparent) 45%, color-mix(in srgb, var(--clr-fg) 25%, transparent) 72%, transparent 100%);
pointer-events: none;
}
.highlight-card figcaption {
position: absolute;
inset-inline: 0;
inset-block-end: 0;
z-index: 1;
padding: var(--space-xl);
color: var(--clr-primary-fg);
}
.highlight-card__title { margin: 0; }
.highlight-card figcaption p {
margin-block: var(--space-2xs) 0; color: color-mix(in srgb, var(--clr-primary-fg) 90%, transparent);
}
@media (min-width: 40rem) {
.daytrip-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (min-width: 64rem) {
.daytrip-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}
.daytrip-card {
block-size: 100%;
display: flex;
flex-direction: column;
border: 1px solid var(--clr-border);
border-radius: var(--radius-2xl);
background: var(--clr-card);
overflow: hidden;
}
.daytrip-card img {
inline-size: 100%; aspect-ratio: 4 / 3; object-fit: cover; display: block;
}
.daytrip-card__body {
padding: var(--space-xl); display: flex; flex-direction: column; flex: 1 1 auto;
}
.daytrip-card__title { margin: 0; }
.daytrip-card__body p {
margin-block: var(--space-2xs) 0; flex: 1 1 auto; color: var(--clr-muted-fg);
}
.link-arrow {
align-self: start;
margin-block-start: var(--space-l);
display: inline-flex;
align-items: center;
gap: var(--space-2xs);
font-size: var(--text-sm);
line-height: var(--lh-sm);
font-weight: 600;
color: var(--clr-primary);
text-decoration: none;
}
.link-arrow::after {
content: "";
inline-size: 1rem;
block-size: 1rem;
flex: 0 0 auto;
background: currentColor;
-webkit-mask: var(--icon-arrow-right) center / contain no-repeat;
mask: var(--icon-arrow-right) center / contain no-repeat;
}
@media (hover: hover) {
.link-arrow:hover { text-decoration: underline; }
}
/* --- Help CTA ------------------------------------------------------------ */
.help-cta {
padding: clamp(var(--space-3xl), 2rem + 3vw, 3rem);
border-radius: var(--radius-3xl);
/*
* The far stop is the primary at 85% *alpha*, not the primary darkened. The
* reference is `from-primary to-primary/85`, and the whole effect depends on
* the page showing through: mixed toward a dark instead, the two stops land
* within a couple of points of each other and the panel reads flat navy.
*/
background: linear-gradient(to bottom right, var(--clr-primary), color-mix(in srgb, var(--clr-primary) 85%, transparent));
color: var(--clr-primary-fg);
display: flex;
flex-direction: column;
gap: var(--space-2xl);
justify-content: space-between;
}
@media (min-width: 48rem) {
.help-cta { flex-direction: row; align-items: center; }
}
.help-cta__title { margin: 0; color: var(--clr-primary-fg); }
/*
* The hover lift, and only here.
*
* A 1px rise, which every button in the reference carries. It used to be on
* every button on the home page; it now belongs to this panel, which is the
* closing call to action on both templates - so the tour category CTA gains it
* and the rest of both pages lose it.
*
* transform joins the existing filter transition rather than replacing it: the
* gold button still brightens, and the outline button still eases its border.
*/
/* a./button. so this outscores .home .btn, which sets the same property later
in the file and would otherwise drop transform from the transition. */
.help-cta a.btn, .help-cta button.btn { transition: filter .2s ease, transform .15s ease, border-color .2s ease; }
@media (hover: hover) {
.help-cta .btn:hover { transform: translateY(-1px); }
}
.help-cta__text p {
margin-block: var(--space-xs) 0; max-inline-size: 36rem; color: color-mix(in srgb, var(--clr-primary-fg) 85%, transparent);
}
.help-cta__actions {
margin: 0; display: flex; flex-wrap: wrap; gap: var(--space-m);
}
/* --- Reviews ------------------------------------------------------------- */
/*
* The reference stretches all three cards to the tallest (items-stretch +
* h-full). Deliberately not doing that: a short card then trails a large blank
* area, so each one is only as tall as its contents.
*/
.review-layout { display: grid; gap: var(--space-2xl); align-items: start; }
@media (min-width: 48rem) {
.review-layout { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.review-layout > :nth-child(2) { grid-column: span 2; }
}
.review-summary, .review-quotes, .review-video {
padding: var(--space-2xl);
border: 1px solid var(--clr-border);
border-radius: var(--radius-2xl);
background: var(--clr-card);
}
/* --- Card 1: rating summary --- */
.review-summary__title {
margin: 0;
font-size: var(--text-xs);
line-height: var(--lh-xs);
font-weight: 700;
text-transform: uppercase;
letter-spacing: .18em;
}
/* One run at one size - "4.9/5", not a big number with a small suffix. */
.review-summary__score {
margin-block: var(--space-l) 0;
font-size: 3rem;
line-height: 1;
font-weight: 800;
color: var(--clr-primary);
}
.review-summary__stars { margin-block: var(--space-m) 0; }
/*
* Named, not `.review-summary > p`. The score and the star row are paragraphs
* too, and a descendant selector scores higher than their own single-class
* rules - so the blanket version repainted the 4.9/5 muted grey.
*/
.review-summary__text {
margin-block: var(--space-xl) 0; color: var(--clr-muted-fg);
}
/* The rule belongs to the awards group, not to the badge inside it. */
.review-summary__awards {
margin-block-start: var(--space-2xl);
padding-block-start: var(--space-xl);
border-block-start: 1px solid var(--clr-border);
}
.review-summary__award {
margin: 0;
display: inline-flex;
align-items: center;
gap: var(--space-xs);
padding: var(--space-2xs) var(--space-m);
border: 2px solid var(--clr-gold);
border-radius: var(--radius-lg);
background: color-mix(in srgb, var(--clr-gold) 10%, transparent);
font-size: var(--text-sm);
line-height: var(--lh-sm);
font-weight: 700;
color: var(--clr-primary);
}
.review-summary__award .mi { background: var(--clr-gold-ink); }
.review-summary .award-grid { margin-block-start: var(--space-l); }
/* --- Card 2: review snippets --- */
.review-quotes ul { list-style: none; display: grid; margin: 0; padding: 0; }
.review-quotes li + li {
margin-block-start: var(--space-m); padding-block-start: var(--space-m); border-block-start: 1px solid var(--clr-border);
}
.review-quotes figure { margin: 0; }
.review-quotes blockquote { margin: 0; }
.review-quote__title { margin: 0; font-size: 1rem; line-height: var(--lh-base); font-weight: 700; color: var(--clr-primary); }
.review-quotes blockquote p { margin-block: var(--space-3xs) 0; color: var(--clr-muted-fg); }
.review-quotes figcaption {
margin-block-start: var(--space-2xs);
font-size: var(--text-sm);
line-height: var(--lh-sm);
font-weight: 600;
color: var(--clr-fg-soft);
}
.review-quotes cite { font-style: normal; }
/* --- Card 3: video review --- */
.review-video { padding: 0; overflow: hidden; }
/*
* The pill hangs past the image's bottom edge, so the media box cannot clip and
* the body below opens up enough room for the overhang to land in.
*/
.review-video__media { position: relative; }
.review-video img {
inline-size: 100%; aspect-ratio: 4 / 3; object-fit: cover; display: block;
}
.review-video__play {
position: absolute;
inset-block-start: 50%;
inset-inline-start: 50%;
translate: -50% -50%;
inline-size: 4rem;
block-size: 4rem;
border-radius: var(--radius-full);
background: var(--clr-gold);
box-shadow: 0 10px 15px -3px color-mix(in srgb, var(--clr-fg) 10%, transparent),
0 0 0 4px color-mix(in srgb, var(--clr-primary-fg) 40%, transparent);
display: grid;
place-items: center;
}
.review-video__play::after {
content: "";
inline-size: 1.75rem;
block-size: 1.75rem;
/* Nudged right so the triangle looks centred - its visual mass sits left. */
margin-inline-start: .125rem;
background: var(--clr-primary);
-webkit-mask: var(--icon-play-solid) center / contain no-repeat;
mask: var(--icon-play-solid) center / contain no-repeat;
}
.review-video__cta {
position: absolute;
inset-inline: var(--space-xl);
inset-block-end: -1.25rem;
padding-block: var(--space-m);
border: 1px solid var(--clr-border);
border-radius: var(--radius-xl);
background: var(--clr-card);
box-shadow: 0 4px 6px -1px color-mix(in srgb, var(--clr-fg) 10%, transparent);
font-size: var(--text-sm);
line-height: var(--lh-sm);
font-weight: 700;
color: var(--clr-primary);
text-align: center;
text-decoration: none;
transition: background-color .2s ease;
}
@media (hover: hover) {
.review-video__cta:hover { background: var(--clr-secondary); }
}
/* Top padding clears the pill's overhang. */
.review-video__body { padding: var(--space-3xl) var(--space-2xl) var(--space-2xl); }
.review-video__body p { margin: 0; color: var(--clr-muted-fg); }
.review-video__body .link-arrow { margin-block-start: var(--space-l); }
/* --- Why book with us ---------------------------------------------------- */
.usp-card {
block-size: 100%;
padding: var(--space-2xl);
border: 1px solid var(--clr-border);
border-radius: var(--radius-2xl);
background: var(--clr-card);
}
.usp-card__icon {
inline-size: 3rem;
block-size: 3rem;
display: grid;
place-items: center;
border-radius: var(--radius-xl);
background: color-mix(in srgb, var(--clr-gold) 15%, transparent);
}
.usp-card__icon::after {
content: "";
inline-size: 1.5rem;
block-size: 1.5rem;
background: var(--clr-gold-fg);
-webkit-mask: var(--mi) center / contain no-repeat;
mask: var(--mi) center / contain no-repeat;
}
.usp-card__title { margin-block: var(--space-m) 0; }
.usp-card p {
margin-block: var(--space-2xs) 0; color: var(--clr-muted-fg);
}
/* --- FAQ ----------------------------------------------------------------- */
.tour-category-faq { display: grid; gap: var(--space-m); align-items: start; }
@media (min-width: 48rem) {
.tour-category-faq {
grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: var(--space-2xl);
}
}
/*
* The one thing this FAQ does differently: each question is its own card, so it
* carries the border and all four corners. On the tour page the items are stacked
* inside a single rounded frame and only that frame is rounded. Everything else -
* padding, type, chevron, hover - comes from the shared rules above.
*/
.tour-category-faq details {
border: 1px solid var(--clr-border);
border-radius: var(--radius-xl);
background: var(--clr-card);
overflow: hidden;
}
/* --- See more ------------------------------------------------------------ */
.more-links { gap: var(--space-m); }
@media (min-width: 40rem) {
.more-links { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (min-width: 64rem) {
.more-links { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}
.more-links a {
block-size: 100%;
display: flex;
align-items: center;
justify-content: space-between;
gap: var(--space-m);
padding: .875rem var(--space-l);
border: 1px solid var(--clr-border);
border-radius: var(--radius-xl);
background: var(--clr-card);
font-size: var(--text-sm);
line-height: var(--lh-sm);
font-weight: 500;
color: var(--clr-fg-soft);
text-decoration: none;
transition: color .15s ease, border-color .15s ease, background-color .15s ease;
}
.more-links a::after {
content: "";
inline-size: 1rem;
block-size: 1rem;
flex: 0 0 auto;
background: var(--clr-muted-fg);
-webkit-mask: var(--icon-arrow-right) center / contain no-repeat;
mask: var(--icon-arrow-right) center / contain no-repeat;
}
@media (hover: hover) {
.more-links a:hover {
border-color: var(--clr-primary); color: var(--clr-primary); background: var(--clr-secondary);
}
}
/* ==========================================================================
9. PAGE: HOME - only what is unique to this template
========================================================================== */
/*
* One class from layer 8 is used here too: .tour-grid. By the rule at the top
* of layer 5 it should move down into Components now that two templates share
* it, but it carries three breakpoint overrides and a .tour-group descendant
* rule, and moving those out of the category page's layer without a visual
* check risks a page that is signed off. Left where it is on purpose, and
* recorded for the cleanup pass rather than done quietly.
*/
/*
* This page alone sits on white.
*
* Every other template sits on --clr-bg (#F8FAFD), and the reference does the
* same: its tour and category pages wrap in bg-background, which is that exact
* colour. Its home page wraps in bg-white instead, so every untinted band here
* is on #FFFFFF.
*
* That difference is the whole reason the tinted panels on this page read as
* panels. #F1F6FC on white is a 14-step on red; on #F8FAFD it is 7, and the
* story fact tiles all but disappeared into the page.
*
* Set on html, not body: html already paints a background, and once it does,
* a background on body no longer propagates to the canvas - it would paint
* body's own box and leave the rest of the viewport on the old colour.
*
* Keyed to the template, not to body.home. WordPress only adds "home" to the
* front page, so a translation of the homepage - or any other page on this
* template - fell back to the off-white ground and every white section on it
* turned grey (2026-09-15).
*/
html:has(body.page-template-homepage) { background-color: var(--clr-card); }
/*
* Sections carry their own vertical padding rather than sitting in a gapped
* grid the way .tour-category does. Half of them are tinted edge to edge, and
* a gap between them would show the page background as a stripe through the
* tint.
*/
.home > section { padding-block: var(--section-py); }
.home > section:where(.home-cities, .home-styles, .home-reviews, .home-faq) { background: var(--clr-secondary); }
.home > section.home-plans { background: linear-gradient(180deg, var(--clr-surface-tint), var(--clr-card)); }
.home > section.home-recognition { background: #031C3D; color: var(--clr-primary-fg); }
/*
* Three sections supply their own vertical space and must not take the shared
* padding as well. The hero was taking both: 160px of section padding on top of
* the 160px its inner block already had, which pushed it past its 600px
* min-height to 667 and made it fill a laptop screen.
*/
.home > section:where(.home-hero, .home-find, .home-proof) { padding-block: 0; }
/*
* The eyebrow keeps the shared layer 5 treatment - size, weight, tracking and
* colour all come from there, so a label on this page reads exactly like one on
* the tour or category pages.
*
* The one thing taken from the home reference is the short rule before the
* text. It is decoration, it carries no meaning, and it is scoped to this
* template on purpose: the other two were signed off without it.
*
* currentColor rather than a token, so the rule follows the label - gold on a
* light ground, gold on a dark one - and can never disagree with it.
*/
/*
* flex-start, not center: on a label that wraps, centring put the rule in the
* gap between the two lines. It now sits on the first line, and the margin
* centres it within that line rather than within the whole block. 1lh is the
* element's own line height, so it stays correct if the type scale moves.
*/
.home .section-eyebrow {
display: inline-flex;
align-items: flex-start;
gap: var(--space-s);
}
.home .section-eyebrow::before {
content: "";
flex: none;
margin-block-start: calc((1lh - 2px) / 2);
inline-size: 1.25rem;
block-size: 2px;
border-radius: var(--radius-full);
background: currentColor;
}
/*
* Headings and their intro are capped by measure, not by a share of the
* container.
*
* A percentage ties line length to the viewport: the same heading is 608px wide
* at 1440 and 480px at 1024, so it can break in one place on one screen and
* somewhere else on another, and a heading signed off as two clean lines can
* arrive as three. A ch cap fixes the line itself - 48 characters at every
* width - so what is approved is what everyone sees. It also survives a change
* to the type scale, which a pixel value would not.
*
* 48ch is the measure the reference uses (max-w-3xl), and every heading on this
* page fits inside it on one line.
*
* Headings only. The intro shared this cap and it is far too tight for running
* text - 414px, which pushed four of the seven intros onto three lines. It
* falls back to the 48rem in layer 5, which is the measure every other template
* already sets for the same paragraph.
*/
.home .section-title { max-inline-size: 48ch; }
/*
* No rule under the heading, on this page only.
*
* The shared header in layer 5 draws a gold bar between the title and the text
* below it. The home reference has none - its SectionHead is an eyebrow, an h2
* and a paragraph, and the two hand-built heads (Recognition, closing CTA) go
* straight from heading to copy as well. Scoped to .home because the category
* and tour pages were signed off with the bar.
*
* content: none rather than display: none - the box is never generated at all,
* so it cannot be reached by a later rule that sets display back.
*/
.home .section-title::after { content: none; }
/*
* The gap below the heading belongs to whatever sits under it.
*
* That 32px in layer 5 exists to clear the bar - its own comment says so - and
* with the bar gone it is 32px of nothing. Handing the gap to the element below
* is also the only way to get the three different distances the reference uses,
* since they depend on what follows: a lede takes 12px (mt-3), the story body
* takes 16px (mt-4, already set on those paragraphs), and Travel style has no
* text at all under its heading - cards follow, and the 32px there is right.
*
* :has(+ p) is what tells those apart. No paragraph, no override, so Travel
* style keeps the layer 5 spacing untouched.
*/
.home .section-title:has(+ p) { margin-block-end: 0 !important; }
.home .section-lede { margin-block-start: var(--space-m); }
/* The same eyebrow on a dark ground, where the muted gold disappears. */
.section-eyebrow--light { color: var(--clr-gold); }
/*
* 12px between a label and the heading it introduces, everywhere on this page.
*
* The reference sets it on the label (Eyebrow carries mb-3), which cannot work
* here: .home .section-eyebrow is inline-flex so it can hold the short rule
* before its text, and a bottom margin on an inline-level box does not push the
* block that follows. So the heading claims the gap instead.
*
* It was 8px under the section heads and 1px in the record card, where the
* heading was a bare h3 that never met .section-title 8px top margin at all.
*/
.home .section-eyebrow + .section-title { margin-block-start: var(--space-m) !important; }
/* The hero h1 is not a .section-title, so it needs saying separately. */
.home-hero .section-eyebrow { margin-block-end: var(--space-m); }
/* --- Hero ---------------------------------------------------------------- */
/*
* Full-bleed. The photograph is a real and , which never meet
* the p rule that sets 1.75 - and lands around 90px.
*
* That is also what pays for the caption going 12px -> 14px: the tighter
* leading returns more height than the larger type costs, so the tiles end up
* shorter than they started while nothing on them is under 14px.
*/
.story-facts :is(strong, span) { display: block; font-size: var(--text-sm); line-height: var(--lh-sm); }
.story-facts strong { color: var(--clr-primary); }
.story-facts span { margin-block-start: var(--space-3xs); color: var(--clr-muted-fg); }
.home-story__action { margin-block-start: var(--space-3xl); }
/* --- Recognition ----------------------------------------------------------- */
.home-recognition__inner { display: grid; gap: var(--space-xl); }
@media (min-width: 64rem) {
.home-recognition__inner { grid-template-columns: .84fr 1.16fr; }
}
.recognition-card {
padding: var(--space-3xl);
background: rgb(255 255 255 / .05);
border: 1px solid rgb(255 255 255 / .12);
border-radius: var(--radius-3xl);
}
/* Inherit rather than name the token again, so the surface can never drift. */
.recognition-card :is(h2, h3) { color: inherit; }
/*
* :not() so the gold eyebrow inside the card keeps its own colour - a plain
* .recognition-card p scores higher than .section-eyebrow--light and was
* repainting the label white.
*/
.recognition-card p:not(.section-eyebrow) { color: rgb(255 255 255 / .75); }
.recognition-card > :is(h2, h3) + p { margin-block-start: var(--space-m); }
/* 9.4rem, not the reference 6rem: a deliberate departure so the award reads as
the point of the card rather than an icon above the heading. */
.recognition-card__badge img { block-size: 9.4rem; inline-size: auto; }
.recognition-card__badge { margin-block-end: var(--space-xl); }
.recognition-card .btn { margin-block-start: var(--space-2xl); }
.record-grid {
display: grid;
gap: var(--space-m);
margin-block-start: var(--space-2xl);
padding: 0;
list-style: none;
}
@media (min-width: 40rem) {
.record-grid { grid-template-columns: 1fr 1fr; }
}
.record-grid li { padding: var(--space-l); background: rgb(255 255 255 / .08); border-radius: var(--radius-xl); }
/*
* The figure stays at 18px, as in the reference. Its caption goes to 14px, and
* both drop the page 1.75 for their own leading - the same trade as the story
* tiles, where the tighter line is what pays for the larger caption.
*/
.record-grid strong { display: block; font-size: 1.125rem; line-height: var(--lh-lg); color: var(--clr-gold); }
.record-grid span {
display: block;
margin-block-start: var(--space-3xs);
font-size: var(--text-sm);
line-height: var(--lh-sm);
color: rgb(255 255 255 / .7);
}
/* --- Reviews ---------------------------------------------------------------- */
.home-rating {
display: flex;
flex-wrap: wrap;
align-items: center;
justify-content: space-between;
gap: var(--space-l);
margin-block-end: var(--space-2xl);
padding: var(--space-xl);
background: var(--clr-card);
border: 1px solid var(--clr-border);
border-radius: var(--radius-2xl);
}
/*
* Both lines take their own leading rather than the page 1.75, which is what
* made this bar 16px taller than the reference. Two lines of text at 1.75 are
* 52px against 44px, and the bar is only as tall as its contents.
*/
.home-rating strong { display: block; line-height: var(--lh-base); color: var(--clr-primary); }
.home-rating span { display: block; font-size: var(--text-sm); line-height: var(--lh-sm); color: var(--clr-muted-fg); }
/*
* align-items: start, so a column holding few cards stays as short as they are.
* Stretched to the tallest column it would show empty space under its loop.
*/
.review-columns {
display: grid;
gap: var(--space-xl);
grid-template-columns: 1fr;
align-items: start;
}
@media (min-width: 40rem) {
.review-columns { grid-template-columns: 1fr 1fr; }
}
@media (min-width: 64rem) {
.review-columns { grid-template-columns: repeat(3, 1fr); }
}
.review-column--wide-only { display: none; }
@media (min-width: 64rem) {
.review-column--wide-only { display: block; }
}
/*
* Each column scrolls its own cards past a window of at most 52rem. The track
* is one copy of the set tall; the second copy hangs below it outside the
* layout. So the window is never taller than one copy - a column of a few short
* cards is simply a shorter window - and the loop can never show a gap.
*/
.review-column {
max-block-size: 52rem;
overflow: hidden;
/*
* A fixed 5rem fade, not a percentage. 8% of a short column is a 44px fade
* and 8% of a tall one is 80px, so the softness of the edge would drift with
* the height instead of staying a property of the design.
*/
-webkit-mask-image: linear-gradient(180deg, transparent 0, #000 5rem, #000 calc(100% - 5rem), transparent 100%);
mask-image: linear-gradient(180deg, transparent 0, #000 5rem, #000 calc(100% - 5rem), transparent 100%);
}
/*
* 15s per unit, a text card counting one and a photo card two (set in the
* template). The design's columns hold four units, so they keep their 60s,
* and adding reviews lengthens the loop instead of speeding it up.
*/
.review-track {
position: relative;
animation: review-drift calc(var(--review-units, 4) * 15s) linear infinite;
/*
* Promote the track to its own layer.
*
* Without this the browser has no reason to composite it separately, so each
* frame repaints a 2000px column of full-bleed photographs on the main
* thread and the drift stutters. With it the animation moves a layer that is
* already painted.
*/
will-change: transform;
}
.review-track--reverse { animation-direction: reverse; }
.review-set { display: grid; gap: var(--space-xl); }
.review-set--copy {
position: absolute;
inset-inline: 0;
inset-block-start: calc(100% + var(--space-xl));
}
/*
* Hovering any column pauses all three.
*
* Scoped to one column, the other two carried on moving while the reader held
* still over the third, which reads as the section glitching rather than as a
* deliberate pause.
*/
.review-columns:hover .review-track,
.review-columns:focus-within .review-track { animation-play-state: paused; }
@keyframes review-drift {
from { transform: translateY(0); }
/* One copy plus the gap before the next: exactly where the second copy started. */
to { transform: translateY(calc(-100% - var(--space-xl))); }
}
.review-card {
overflow: hidden;
background: var(--clr-card);
border: 1px solid var(--clr-border);
border-radius: var(--radius-2xl);
box-shadow: var(--shadow-card);
}
/* The photo is a link to where the trip was posted. */
.review-card__media {
position: relative;
display: block;
aspect-ratio: 4 / 3;
overflow: hidden;
}
.review-card__media img { display: block; inline-size: 100%; block-size: 100%; object-fit: cover; }
/* Centred by inset+auto margins rather than a transform, which the marquee
animation on the ancestor would otherwise fight over. */
.review-card__play {
position: absolute;
inset: 0;
margin: auto;
inline-size: 3rem;
block-size: 3rem;
border-radius: var(--radius-full);
background: rgb(255 255 255 / .9);
}
.review-card__play::after {
content: "";
position: absolute;
inset: 0;
margin: auto;
inline-size: 1.25rem;
block-size: 1.25rem;
background: var(--clr-primary);
-webkit-mask: var(--icon-play-solid) center / contain no-repeat;
mask: var(--icon-play-solid) center / contain no-repeat;
}
/* Also the link's accessible name - the image itself is decorative. */
.review-card__badge {
position: absolute;
inset-block-end: var(--space-m);
inset-inline-start: var(--space-m);
padding: var(--space-3xs) var(--space-s);
border-radius: var(--radius-md);
background: rgb(3 28 61 / .86);
color: var(--clr-primary-fg);
font-size: var(--text-meta);
font-weight: 700;
line-height: var(--lh-xs);
}
.review-card__body { padding: var(--space-xl); }
.review-card__meta {
display: flex;
align-items: center;
justify-content: space-between;
gap: var(--space-m);
margin: 0;
}
.review-card__kind { font-size: var(--text-meta); line-height: var(--lh-xs); color: var(--clr-muted-fg); }
.review-card blockquote { margin: var(--space-m) 0 0; }
.review-card blockquote p { color: var(--clr-fg); }
.review-card__who {
display: flex;
align-items: center;
gap: var(--space-s);
margin-block-start: var(--space-l);
padding-block-start: var(--space-m);
border-block-start: 1px solid var(--clr-border);
}
/* Decoration: the name is written out beside it, and the full name is on the
title attribute for a pointer. */
.review-card__avatar {
display: inline-flex;
align-items: center;
justify-content: center;
flex: none;
inline-size: 2rem;
block-size: 2rem;
border-radius: var(--radius-full);
background: var(--clr-primary);
color: var(--clr-primary-fg);
font-size: var(--text-sm);
font-weight: 700;
line-height: 1;
text-transform: uppercase;
}
.review-card__who-text { display: grid; gap: 2px; min-inline-size: 0; }
.review-card__who cite { font-style: normal; font-weight: 700; font-size: var(--text-sm); line-height: var(--lh-sm); color: var(--clr-primary); }
/*
* Named, not ".review-card__who span". That bare selector used to be the only
* rule here, and with the avatar and the text wrapper now both being spans it
* would have repainted the initial muted grey and shrunk it - the same trap as
* the plan and style cards.
*/
.review-card__trip { font-size: var(--text-meta); line-height: var(--lh-xs); color: var(--clr-muted-fg); }
.home-reviews__actions {
display: flex;
flex-wrap: wrap;
justify-content: center;
gap: var(--space-m);
margin-block-start: var(--space-4xl);
}
/* --- Media mentions --------------------------------------------------------- */
/*
* Three explicit columns, not auto-fit. With three items auto-fit still made
* room for a fourth track at desktop, leaving the cards a quarter narrow with
* an empty column beside them.
*/
.press-grid {
display: grid;
gap: var(--space-l);
margin: 0;
padding: 0;
list-style: none;
}
@media (min-width: 48rem) {
.press-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
.press-card {
position: relative;
display: flex;
flex-direction: column;
block-size: 100%;
padding: var(--space-2xl);
background: var(--clr-card);
border: 1px solid var(--clr-border);
border-radius: var(--radius-2xl);
box-shadow: var(--shadow-card);
transition: transform .2s ease, border-color .2s ease;
}
.press-card__outlet {
align-self: start;
margin-block-end: var(--space-l);
padding: var(--space-xs) var(--space-m);
font-size: var(--text-meta);
font-weight: 800;
color: var(--clr-primary);
background: var(--clr-secondary);
border-radius: var(--radius-lg);
}
.press-card__kind { font-size: var(--text-meta); text-transform: uppercase; letter-spacing: .04em; color: var(--clr-muted-fg); }
/*
* The headline takes the slack, so the link label below it sits on the same
* line in all three cards however long the headline runs.
*/
.press-card h3 { flex: 1; margin-block-start: var(--space-2xs); font-size: 1rem; }
.press-card h3 a { text-decoration: none; }
.press-card h3 a::after { content: ""; position: absolute; inset: 0; }
.press-card__cta {
display: inline-flex;
align-items: center;
gap: var(--space-2xs);
padding-block-start: var(--space-l);
font-size: var(--text-sm);
font-weight: 700;
color: var(--clr-primary);
}
.press-card__cta::after {
content: "";
flex: none;
inline-size: 1rem;
block-size: 1rem;
background: currentColor;
-webkit-mask: var(--icon-arrow-right) center / contain no-repeat;
mask: var(--icon-arrow-right) center / contain no-repeat;
}
/* Only a card with a link lifts: one without is plain text, not a control. */
@media (hover: hover) {
.press-card:has(h3 a):hover { transform: translateY(-2px); border-color: var(--clr-primary); }
}
/* --- Guides ------------------------------------------------------------------ */
/*
* Equal cards: one wide on a phone, two from 40rem, three from 64rem. Extra
* guides wrap onto the next row, left-aligned. Replaces the large-card mosaic,
* which only worked for exactly three.
*/
.guide-grid {
display: grid;
gap: var(--space-l);
margin: 0;
padding: 0;
list-style: none;
}
@media (min-width: 40rem) {
.guide-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (min-width: 64rem) {
.guide-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
/* 240px tall, as the reference. Radius is the 1.25rem token against its 19px. */
.guide-card {
position: relative;
display: block;
block-size: 100%;
min-block-size: 15rem;
overflow: hidden;
background: var(--clr-primary);
border-radius: var(--radius-2xl);
}
.guide-card img {
position: absolute;
inset: 0;
inline-size: 100%;
block-size: 100%;
object-fit: cover;
transition: transform .5s;
}
.guide-card::after {
content: "";
position: absolute;
inset: 0;
background: linear-gradient(180deg, rgb(3 28 61 / .05) 30%, rgb(3 28 61 / .92));
}
.guide-card__body {
position: absolute;
inset-inline: 0;
inset-block-end: 0;
z-index: 1;
padding: var(--space-2xl);
color: var(--clr-primary-fg);
}
.guide-card__body h3 { color: inherit; margin-block-start: var(--space-2xs); }
.guide-card__body h3 a { color: inherit; text-decoration: none; }
.guide-card__body h3 a::after { content: ""; position: absolute; inset: 0; z-index: 2; }
.guide-card__kind {
font-size: var(--text-badge);
font-weight: 800;
letter-spacing: .08em;
text-transform: uppercase;
color: var(--clr-gold);
}
/* The link below the cards sits 2rem under them, as the reference. */
.home-guides__all { margin-block-start: var(--space-3xl); }
/* Only a card with a link zooms: one without is plain text, not a control. */
@media (hover: hover) {
.guide-card:has(h3 a):hover img { transform: scale(1.035); }
}
/* --- FAQs --------------------------------------------------------------------- */
.home-faq__inner { display: grid; gap: var(--space-4xl); align-items: start; }
@media (min-width: 64rem) {
.home-faq__inner { grid-template-columns: .8fr 1.2fr; }
/* Only the intro, or only the questions: that column takes the full width. */
.home-faq__inner--single { grid-template-columns: 1fr; }
}
.home-faq__intro .section-lede { margin-block-end: var(--space-3xl); }
/*
* One column.
*
* .tour-category-faq goes two-up from 48rem, which is right on the category
* page where the FAQ spans the full width. Here it already sits in the right
* half of a two-column section, so a second column inside it would be a quarter
* of the page wide. The reference stacks them.
*
* It also stops the list squeezing its neighbour: 1.2fr is minmax(auto, 1.2fr),
* so a wide min-content in this column takes space from the heading beside it.
*/
.home-faq .tour-category-faq { grid-template-columns: 1fr; }
/* border-color so the outline button eases rather than snaps; no transform,
the lift belongs to the closing panel only - see .help-cta .btn. */
.home .btn { transition: filter .2s ease, border-color .2s ease; }
@media (hover: hover) {
/*
* The navy button lightens on hover; gold still darkens.
*
* The shared rule pulls every button down 5%, which is right for gold on a
* light page and backwards for navy - the reference lifts the blue button to
* 110% and darkens only the gold one. Scoped to this page, like the lift.
*
* The :not() list is doing real work. Plain ".home a.btn:hover" would
* outscore the ghost and outline rules that switch the filter off, and put
* the background change back on the two buttons just taken off it.
*/
.home a.btn:not(.btn--gold, .btn--ghost, .btn--outline):hover,
.home button.btn:not(.btn--gold, .btn--ghost, .btn--outline):hover {
filter: brightness(1.1);
}
}
/* --- Closing call to action ----------------------------------------------------- */
/*
* This panel writes its own heading and copy rather than using .help-cta__text,
* so the paragraph rule in layer 5 never reached it and it had no top margin at
* all. Nothing showed while the gold rule sat between the two; without it the
* copy is flush against the heading. Same 12px as every other head here.
*/
/*
* Home only, all of it.
*
* .help-cta is shared with the tour category page, and the two pages are drawn
* differently in the reference: the category panel is p-8 sm:p-12 with gap-6 and
* a from-primary gradient, which is exactly what the shared rule already sets.
* This page is p-10, gap-8 and py-16. The gradient is left alone: the shared
* one stays on both.
*/
/*
* 64 above, 24 below - which reads as 64 either side of the panel.
*
* .site-footer adds its own --space-4xl margin directly under this section, so
* a symmetric 64/64 here paints 64 above and 104 below. The bottom gives up
* exactly what the footer contributes.
*
* Coupled to that margin on purpose, and only here: if --space-4xl on
* .site-footer ever changes, this is the other half of the sum.
*/
.home > section.home-cta { padding-block: var(--space-6xl) var(--space-2xl); }
/*
* The other side of that coupling. The footer's margin only makes sense under the
* CTA panel, which is white. With the CTA hidden or emptied, the page ends on a
* full-width band - the grey FAQs by default - and the margin showed as a white
* strip between two grey blocks. Any other last section already ends in its own
* --section-py, so it gets no extra margin either.
*/
.site-main:has(> .home > section:last-child:not(.home-cta)) + .site-footer { margin-block-start: 0; }
/*
* The panel is the shared component - see the markup in homepage.php. These two
* rules are the only departure, and they exist because of this page wording.
*
* "Plan my Morocco trip" and "WhatsApp the team" are 403px of button against the
* category page 278px. Below roughly 1200px that no longer fits beside the 36rem
* copy, and the default flex-wrap splits the pair across two rows in place.
* Holding them together and letting the whole block wrap instead means the
* buttons drop under the copy as one row, which is the same thing the panel
* already does on a phone - just starting earlier.
*/
@media (min-width: 48rem) {
.home-cta .help-cta { flex-wrap: wrap; }
.home-cta .help-cta__actions { flex: 0 0 auto; flex-wrap: nowrap; }
}
/* --- Motion --------------------------------------------------------------------- */
/*
* Both marquees are decorative drift. Someone who has asked their system to
* reduce motion gets the same content as a static row they can scroll by hand,
* rather than something moving in their peripheral vision for as long as the
* page is open.
*/
@media (prefers-reduced-motion: reduce) {
.proof-track,
.review-track { animation: none; }
.help-cta a.btn, .help-cta button.btn { transition: filter .2s ease, border-color .2s ease; }
.help-cta .btn:hover { transform: none; }
/*
* The second track exists only so the loop has no seam. With the animation
* off it is every proof point printed a second time, so it goes.
*/
.proof-track[aria-hidden="true"] { display: none; }
/*
* inline-size, not overflow alone. The marquee is max-content wide, which
* makes the box exactly as wide as its row - so overflow-x had nothing to
* scroll past and the strip was clipped rather than swipeable. Constraining
* the box is what gives the overflow something to do.
*/
.proof-marquee { inline-size: 100%; overflow-x: auto; }
/*
* The reviews marquee carries the same second copy for the same reason, and
* it goes for the same one: with the animation stopped every review is
* printed twice. The duplicates are the second set in each column.
*/
.review-set--copy { display: none; }
/*
* The third column is hidden below 64rem so the drifting grid stays two wide
* on a phone. Nothing is drifting here, so hiding a third of the reviews only
* makes them unreachable - they stack instead.
*/
.review-column--wide-only { display: block; }
.review-column { max-block-size: none; overflow: visible; -webkit-mask-image: none; mask-image: none; }
.press-card { transition: border-color .2s ease; }
.press-card:hover { transform: none; }
.city-card img,
.guide-card img { transition: none; }
}
/* ==========================================================================
10. PAGE: MOROCCO TOURS - only what is unique to this template
Most of the page is the framework already here: the hero is the city page's
hero, the cards are .tour-card in a .tour-grid, the FAQ is
.tour-category-faq, the closing panel is .help-cta, and the route strip is a
component in section 5 because it renders inside the shared card.
What is left is the finder - a rail beside a results column - and two small
blocks the site did not have: the answer grid and the browse rows.
========================================================================== */
/* Same rhythm as .tour-category, so the two templates read as one site. */
.morocco {
display: grid;
/*
* minmax(0, 1fr), not the implicit 1fr: a grid item's default min-width is
* auto, so a section whose own grid wants more room than the phone has will
* push this track wider and take the whole page sideways with it. The answer
* block did exactly that - four columns of 15rem forced the document to
* 627px inside a 375px screen.
*/
grid-template-columns: minmax(0, 1fr);
gap: var(--section-py);
padding-block: var(--section-py);
}
/*
* The header plus a little air - not 9rem.
*
* 9rem is right on a tour page, where a sticky .tour-nav sits BELOW the header
* and an anchor has to clear both. This page has no sub-nav, so the same figure
* left 79px of the previous section showing above "Find your trip" and the
* scroll looked like it had stopped early. One rule covers both ways in: the
* hero button is a #finder hash link and scroll-margin applies to those as well
* as to scrollIntoView.
*/
.morocco > section { scroll-margin-block-start: calc(var(--header-h) + var(--space-m)); }
/* --- Answer block --------------------------------------------------------
*
* One hairline grid rather than four bordered cards: these are four answers to
* one question, not four things to choose between. The 1px gap over a border
* background is what draws the rules, so they stay exactly 1px at every width.
* ---------------------------------------------------------------------- */
.morocco-answers__grid {
margin: 0;
padding: 0;
list-style: none;
display: grid;
gap: 1px;
background: var(--clr-border);
border: 1px solid var(--clr-border);
border-radius: var(--radius-xl);
overflow: hidden;
grid-template-columns: repeat(auto-fit, minmax(min(15rem, 100%), 1fr));
}
.morocco-answers__grid > li {
background: var(--clr-card);
padding: var(--space-xl);
display: grid;
gap: var(--space-xs);
align-content: start;
}
.morocco-answers__grid h3 { margin: 0; font-size: 1rem; }
.morocco-answers__grid p { margin: 0; font-size: var(--text-sm); color: var(--clr-muted-fg); }
/* --- Finder --------------------------------------------------------------
*
* A 17rem rail and a results column that takes the rest. minmax(0, 1fr) on the
* second track, not 1fr: a grid item's default min-width is auto, so a wide
* card or a long route would push the whole page sideways instead of
* scrolling inside its own box.
* ---------------------------------------------------------------------- */
.finder__layout {
display: grid;
grid-template-columns: 17rem minmax(0, 1fr);
gap: var(--space-3xl);
align-items: start;
margin-block-start: var(--space-2xl);
}
/* Quick filters: one scrolling row on a phone, wrapping on a desktop. */
.finder__quick { margin-block-start: var(--space-xl); }
.finder__quick-label {
margin: 0 0 var(--space-xs);
font-size: var(--text-meta);
font-weight: 600;
color: var(--clr-muted-fg);
}
.finder__quick ul {
margin: 0;
padding: 0 0 var(--space-3xs);
list-style: none;
display: flex;
gap: var(--space-xs);
overflow-x: auto;
overscroll-behavior-x: contain;
scrollbar-width: none;
-webkit-mask-image: linear-gradient(to right, transparent 0, #000 18px, #000 calc(100% - 18px), transparent 100%);
mask-image: linear-gradient(to right, transparent 0, #000 18px, #000 calc(100% - 18px), transparent 100%);
}
.finder__quick ul::-webkit-scrollbar { display: none; }
.finder__quick.is-start ul {
-webkit-mask-image: linear-gradient(to right, #000 calc(100% - 18px), transparent 100%);
mask-image: linear-gradient(to right, #000 calc(100% - 18px), transparent 100%);
}
.finder__quick.is-end ul {
-webkit-mask-image: linear-gradient(to right, transparent 0, #000 18px);
mask-image: linear-gradient(to right, transparent 0, #000 18px);
}
.finder__quick.is-still ul { -webkit-mask-image: none; mask-image: none; }
.finder__quick li { flex: none; }
/*
* White, not --clr-bg.
*
* .chip's own ground is --clr-bg, which is right inside the city pages' filter
* bar because that bar is a white card. Here the chips sit directly on the page,
* which is --clr-bg too - so they came out the same colour as what is behind
* them and read as outlines rather than as things to press. The card colour and
* the resting lift give them an edge.
*/
.finder__quick .chip {
background: var(--clr-card);
box-shadow: var(--shadow-card);
}
.finder__quick .chip[aria-current="true"] { background: var(--clr-primary); }
/* The rail */
.finder__rail {
position: sticky;
inset-block-start: calc(var(--header-h) + var(--space-l));
background: var(--clr-card);
border: 1px solid var(--clr-border);
border-radius: var(--radius-xl);
padding: 0 var(--space-l) var(--space-l);
}
.finder__rail-head {
display: flex;
align-items: baseline;
justify-content: space-between;
gap: var(--space-m);
padding-block: var(--space-l) var(--space-3xs);
}
/*
* Bigger than the legends under it, on every screen.
*
* It was 1rem against legends of 14px, which sounds like a clear step and is
* not: the legends are bold, tracked and in caps, and all three make a line
* read larger than its rem. 1.25rem is the first size that looks like a
* heading next to them rather than a sibling.
*/
.finder__rail-title {
margin: 0;
font-size: 1.25rem;
line-height: var(--lh-xs);
font-weight: 700;
color: var(--clr-primary);
}
/*
* Only in the sheet. As a column the rail has no edges to be shut, so the
* button would be a control that closes nothing; the media query below turns
* it on.
*/
.finder__rail-close { display: none; }
.finder__clear { font-size: var(--text-sm); color: var(--clr-primary); }
/*
* Nothing selected, nothing to clear. Still a link rather than a disabled
* button, because it is the page's own URL and always a valid place to go - it
* just has nothing to do, and says so by going quiet.
*/
.finder__clear.is-off { color: var(--clr-muted-fg); text-decoration: none; pointer-events: none; }
.finder__facet {
margin: var(--space-m) 0 0;
padding: var(--space-m) 0 0;
border: 0;
border-block-start: 1px solid var(--clr-border);
}
.finder__facet legend {
padding: 0;
margin-block-end: var(--space-2xs);
/* A legend heads a group of controls somebody reads before choosing, so it
sits on the floor rather than under it with the pills. */
font-size: var(--text-sm);
font-weight: 700;
letter-spacing: .06em;
text-transform: uppercase;
color: var(--clr-muted-fg);
}
.finder__facet ul { margin: 0; padding: 0; list-style: none; }
.finder__opt {
display: flex;
align-items: center;
gap: var(--space-s);
/* 2.75rem of target: the whole row is the control, not just the box. */
min-block-size: 2.75rem;
/*
* The same on both sides. At --space-2xs, with the checkbox just inside
* the left edge and the count hard against the right, the hover band read
* as lopsided - the number looked to have less room than the label.
*/
padding-inline: var(--space-s);
border-radius: var(--radius-sm);
font-size: var(--text-sm);
cursor: pointer;
}
.finder__opt input { inline-size: 1rem; block-size: 1rem; flex: none; accent-color: var(--clr-primary); }
.finder__opt-name { flex: 1 1 auto; }
.finder__opt-n { font-size: var(--text-xs); color: var(--clr-muted-fg); font-variant-numeric: tabular-nums; }
/*
* An option that would return nothing is greyed, not removed. A choice that
* disappears reads as the page malfunctioning; a greyed one says that
* combination does not exist, which is information.
*/
.finder__opt.is-empty { color: var(--clr-muted-fg); opacity: .55; cursor: default; }
@media (hover: hover) {
.finder__opt:not(.is-empty):hover { background: var(--clr-secondary); }
}
.finder__more { border-block-start: 1px solid var(--clr-border); margin-block-start: var(--space-m); }
/*
* The icon leads, on every screen. It used to be a "+" trailing the words on
* a desktop and nothing at all on a phone, which made one control look like
* two different ones. The sliders glyph says "more settings" without being
* read, and sits where an icon is looked for - before the label.
*/
.finder__more > summary {
display: flex;
align-items: center;
gap: var(--space-xs);
padding-block: var(--space-m) 0;
/* A control you press, so it sits on the 14px floor rather than under it
with the labels that only name things. */
font-size: var(--text-sm);
font-weight: 600;
color: var(--clr-primary);
cursor: pointer;
list-style: none;
}
.finder__more > summary::-webkit-details-marker { display: none; }
.finder__more > summary .mi { inline-size: .9375rem; block-size: .9375rem; }
/*
* The first facet inside the disclosure needs the gap the others get from
* the rule above them. Without it, its legend sat tight under "More filters"
* and read as a heading belonging to the summary rather than to the group.
*/
/*
* Slower here than the FAQs, on purpose.
*
* .details-body runs at .3s, which suits an answer of a few lines. This panel
* is three whole facets - about 600px - so the same duration moves it six
* times faster and the slide barely registers as one.
*/
.finder__more .details-body { transition-duration: .5s; }
.finder__more .details-body .finder__facet:first-of-type {
border-block-start: 0;
margin-block-start: var(--space-l);
}
.finder__submit { margin-block: var(--space-l) 0; }
/*
* The form's own submit is for people without scripting. Once the script runs,
* filters apply as they are ticked, so a button that reloads the page to the
* same place would be a second, slower way to do the same thing.
*/
.has-js .finder__submit { display: none; }
/* Results */
/*
* minmax(0, 1fr) again, and min-inline-size: 0 down the chain below it.
*
* Every one of these is the same rule: a grid or flex child's automatic
* minimum is its content, not zero. The route strip inside a card is a
* scroller, but a scroller still reports its content as its minimum unless it
* is told otherwise - so a fifteen-town route was quietly setting the width of
* the grid, the results column, and through them the whole document. On a
* 375px phone the page came out 593px wide.
*/
.finder__results { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--space-l); }
.finder__bar {
display: flex;
flex-wrap: wrap;
align-items: center;
gap: var(--space-m) var(--space-l);
}
.finder__count { margin: 0; font-size: 1.0625rem; font-weight: 600; }
.finder__count strong { font-weight: 700; }
/*
* The note beside the count, reading as one line with it. A separate element
* rather than part of the live region: it never changes, and a screen reader
* re-announcing "departing any day you choose" on every filter press would be
* noise around the one number that did change.
*/
.finder__note {
margin: 0;
margin-inline-start: calc(var(--space-xs) * -1);
font-size: var(--text-sm);
color: var(--clr-muted-fg);
}
.finder__note::before { content: "ยท "; }
.finder__sort {
margin: 0;
margin-inline-start: auto;
display: flex;
align-items: center;
gap: var(--space-xs);
}
.finder__sort label { font-size: var(--text-meta); color: var(--clr-muted-fg); }
/*
* The select itself is the planner's, joined to those rules above rather than
* restyled here - so the homepage and this page offer the same control, with
* the same arrow and the same focus ring, and only one of them has to be
* maintained. All that is left is the size it takes in this row.
*/
.finder__sort select { min-block-size: 2.75rem; inline-size: auto; }
/*
* White, against the planner's tint.
*
* The shared rule reaches this select through an :is() whose heaviest arm is
* .book-form .ff-default .ff-el-form-control - three classes - so a plain
* .finder__sort select loses and the tint stayed. Three classes here too, and
* background-color only: the shared rule paints the arrow as a background
* image and the shorthand would wipe it.
*/
.finder .finder__bar .finder__sort select { background-color: var(--clr-card); }
/* The rail is always on screen at this width, so nothing has to open it. */
.finder__sheet-open { display: none; }
.finder__sheet-open .mi { inline-size: .9375rem; block-size: .9375rem; }
.finder__grid { margin: 0; min-inline-size: 0; }
.finder__grid > li { display: flex; min-inline-size: 0; }
.finder__grid > li > .fcard { inline-size: 100%; }
/*
* Past the first twelve matching cards.
*
* PHP marks these on first paint so they are never drawn and then taken away,
* and the script takes over the attribute from there. Behind .has-js, because
* the script is the only thing that can reveal them again - with no script the
* whole list is simply on the page, which is the honest fallback and the one
* that keeps every link visible.
*/
.has-js .finder__grid > li[data-over] { display: none; }
.finder__more-cards { margin: 0; text-align: center; }
.finder__empty {
padding: var(--space-4xl) var(--space-2xl);
border: 1px dashed var(--clr-rule, var(--clr-border));
border-radius: var(--radius-xl);
background: var(--clr-card);
display: grid;
gap: var(--space-m);
justify-items: start;
}
.finder__empty h3 { margin: 0; }
.finder__empty p { margin: 0; color: var(--clr-muted-fg); max-inline-size: 52ch; }
.finder__outs { display: flex; flex-wrap: wrap; gap: var(--space-xs); margin: 0; }
/* --- The finder card -----------------------------------------------------
*
* Compact because there are fifty-six of them. Everything the category card
* carries and this one does not - description, icon list, button - was a line
* repeated fifty-six times between one price and the next.
*
* The whole card is the link: the photo has a cover anchor under the slider
* arrows, and the title is an anchor of its own so the accessible name is the
* trip rather than the word "link".
* ---------------------------------------------------------------------- */
.fcard {
block-size: 100%;
min-inline-size: 0;
display: flex;
flex-direction: column;
background: var(--clr-card);
border: 1px solid var(--clr-border);
border-radius: var(--radius-2xl);
overflow: hidden;
transition: transform .2s ease, box-shadow .2s ease, border-color .2s ease;
}
/*
* The same lift as every other tour card on the site, and the same hairline.
* The border stays --clr-border on hover: darkening it made the card look like
* it had been selected rather than pointed at, and the shadow already says
* which one the cursor is over.
*/
@media (hover: hover) {
.fcard:hover {
transform: translateY(-2px);
box-shadow: 0 10px 24px -14px rgba(5, 18, 35, .35);
}
}
.fcard__shot { position: relative; background: var(--clr-surface-tint); }
/* --- The gallery, as a track rather than a stack -------------------------
*
* The photos were stacked and crossfaded. A fade tells you the picture
* changed; it does not tell you there is a row of them and which way you are
* going through it. They now sit side by side and the row slides.
*
* A scroller, not a transform: a scroller is what makes a swipe work on a
* phone without a line of script, and scroll-behavior gives the arrows their
* animation for free - including switching it off under reduced motion,
* which a transition would have needed its own rule for.
*
* The badge, the counter, the cover link and the arrows stay outside the
* track, positioned against .fcard__shot, or they would scroll away with the
* photographs.
* ---------------------------------------------------------------------- */
.fcard__track {
display: flex;
/* See .finder__results: a flex child offers its content as a minimum. */
min-inline-size: 0;
overflow-x: auto;
scroll-snap-type: x mandatory;
scroll-behavior: smooth;
/* Sideways at the end of the row must not turn into a back-navigation
gesture or start scrolling the page behind it. */
overscroll-behavior-x: contain;
scrollbar-width: none;
}
.fcard__track::-webkit-scrollbar { display: none; }
/*
* Each slide is exactly one card wide, so a snap lands on a photograph and
* the arrows can scroll by clientWidth and be right every time. It is a link
* rather than a bare image - see the card partial for why the old overlay had
* to go.
*/
.fcard__slide {
flex: 0 0 100%;
min-inline-size: 0;
display: block;
scroll-snap-align: center;
/* One photograph per swipe. Without this a quick flick sails past three. */
scroll-snap-stop: always;
}
.fcard__track img {
inline-size: 100%;
aspect-ratio: 3 / 2;
object-fit: cover;
display: block;
}
@media (prefers-reduced-motion: reduce) {
.fcard__track { scroll-behavior: auto; }
}
.fcard__badge {
position: absolute;
inset-block-start: .75rem;
inset-inline-end: .75rem;
z-index: 2;
margin: 0;
padding: var(--space-3xs) var(--space-s);
border-radius: var(--radius-md);
background: rgba(3, 28, 61, .86);
/*
* Uppercase and tracked, at --text-badge.
*
* The case is what does the work: caps carry more cap-height per rem, so
* the same 11px reads considerably larger than it did in sentence case.
* It went to --text-xs first and that was a step too far on the home card,
* where the pill has far less around it. 11px is also the nearest the
* scale has to the 0.6rem that measured best - there is nothing below it.
*/
font-size: var(--text-badge);
font-weight: 800;
line-height: var(--lh-xs);
letter-spacing: .05em;
text-transform: uppercase;
color: var(--clr-primary-fg);
}
/*
* The same pill, gold, when the trip carries a highlight. It replaces the type
* badge rather than joining it: every card here says "Private tour", so the
* navy one carries no information, and two pills would split the attention the
* highlight exists to collect.
*/
.fcard__badge.is-highlight {
background: var(--clr-gold);
color: var(--clr-gold-fg);
}
.fcard__count {
position: absolute;
inset-block-end: .75rem;
inset-inline-end: .75rem;
z-index: 2;
margin: 0;
padding: 0 var(--space-xs);
border-radius: var(--radius-full);
background: rgba(5, 18, 35, .55);
color: #fff;
font-size: var(--text-xs);
font-variant-numeric: tabular-nums;
}
/* The slider arrows, added by the script and only where there is a second photo. */
.fcard__nav {
position: absolute;
inset-block-start: 50%;
translate: 0 -50%;
z-index: 3;
/*
* 48px of button around a 32px disc. The hit area was already 44 - the
* problem was that it did not look it, so people aimed at the 28px circle
* they could see and missed the photo they meant to change.
*/
inline-size: 3rem;
block-size: 3rem;
padding: 0;
border: 0;
background: none;
display: grid;
place-items: center;
cursor: pointer;
color: var(--clr-fg);
opacity: 0;
transition: opacity .18s ease;
}
.fcard__nav span {
inline-size: 2rem;
block-size: 2rem;
border-radius: var(--radius-full);
background: rgb(255 255 255 / .92);
display: grid;
place-items: center;
box-shadow: var(--shadow-card);
}
.fcard__nav--prev { inset-inline-start: .25rem; }
.fcard__nav--next { inset-inline-end: .25rem; }
.fcard:hover .fcard__nav,
.fcard__nav:focus-visible { opacity: 1; }
/* No hover to reveal them on a touch screen, so they are simply there. */
@media (hover: none) { .fcard__nav { opacity: 1; } }
/* An arrow at the end of the row has nothing to show. Dimmed rather than
removed, so the pair does not shuffle sideways as you go through. */
.fcard__nav:disabled { cursor: default; }
.fcard__nav:disabled span { opacity: .4; }
.fcard__body {
display: flex;
flex-direction: column;
gap: var(--space-2xs);
padding: var(--space-l) var(--space-xl) var(--space-xl);
flex: 1 1 auto;
}
.fcard__top {
margin: 0;
display: flex;
align-items: center;
justify-content: space-between;
gap: var(--space-s);
font-size: var(--text-xs);
color: var(--clr-muted-fg);
}
.fcard__route { min-inline-size: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.fcard__rating { flex: none; display: inline-flex; align-items: center; gap: var(--space-3xs); font-variant-numeric: tabular-nums; }
.fcard__rating .mi {
inline-size: .8125rem;
block-size: .8125rem;
/* The mask is filled with currentColor, so the colour goes on the icon. */
color: var(--clr-gold);
}
.fcard__rating b { font-weight: 700; color: var(--clr-fg); }
.fcard__title { margin: 0; font-size: 1.0625rem; }
.fcard__title a { text-decoration: none; }
@media (hover: hover) { .fcard__title a:hover { text-decoration: underline; } }
.fcard__foot {
/* Never wraps: the unit is stated once above the grid rather than on all
fifty-six cards, which is what used to push this onto a second line. */
flex-wrap: nowrap;
white-space: nowrap;
margin: auto 0 0;
padding-block-start: var(--space-m);
border-block-start: 1px solid var(--clr-border);
display: flex;
align-items: baseline;
justify-content: space-between;
gap: var(--space-s);
font-size: var(--text-sm);
color: var(--clr-muted-fg);
}
.fcard__price data { font-size: 1.125rem; font-weight: 700; color: var(--clr-primary); }
.fcard__unit { font-size: var(--text-xs); }
/* --- Cards / Compare toggle --------------------------------------------- */
.finder__views {
margin: 0;
display: inline-flex;
border: 1px solid var(--clr-border);
border-radius: var(--radius-md);
background: var(--clr-card);
overflow: hidden;
}
.finder__view {
min-block-size: 2.75rem;
padding-inline: var(--space-l);
display: inline-flex;
align-items: center;
font-size: var(--text-sm);
font-weight: 500;
color: var(--clr-muted-fg);
text-decoration: none;
}
.finder__view + .finder__view { border-inline-start: 1px solid var(--clr-border); }
.finder__view.is-on { background: var(--clr-secondary); color: var(--clr-fg); font-weight: 700; }
/* --- Comparison table ----------------------------------------------------
*
* The scroll lives on the wrapper, so a long route widens the table inside its
* own box rather than the page. min-inline-size keeps the columns from
* collapsing into unreadable slivers before that scroll kicks in.
* ---------------------------------------------------------------------- */
.finder__table {
inline-size: 100%;
max-inline-size: 100%;
overflow-x: auto;
overscroll-behavior-x: contain;
border: 1px solid var(--clr-border);
border-radius: var(--radius-xl);
background: var(--clr-card);
/*
* A bar that is always there, in the brand navy.
*
* macOS and iOS hide the overlay scrollbar until something is already
* moving, which is no use as a hint: the one moment it would help is
* before anybody has scrolled. scrollbar-color forces a real one, and the
* WebKit block below is for the Safari versions that ignore it.
*/
scrollbar-width: thin;
scrollbar-color: var(--clr-primary) var(--clr-secondary);
}
.finder__table::-webkit-scrollbar { block-size: .5rem; }
.finder__table::-webkit-scrollbar-track {
background: var(--clr-secondary);
border-radius: var(--radius-full);
}
.finder__table::-webkit-scrollbar-thumb {
background: var(--clr-primary);
border-radius: var(--radius-full);
}
/*
* And the same fade the route strips use, so the page has one way of saying
* "there is more this way". The script swaps these as it is scrolled and adds
* is-still when the whole table fits, which is what a desktop sees - a fade
* over a hard edge would be a lie there.
*
* Not a sticky first column: the trip name is 177px of a 342px phone, so
* pinning it would leave a third of the screen for the four columns somebody
* scrolled sideways to read. Not a second scrollbar above the table either -
* it is a second control to keep in sync, and nobody drags a bar on a phone.
*/
.finder__table {
-webkit-mask-image: linear-gradient(to right, transparent 0, #000 20px, #000 calc(100% - 20px), transparent 100%);
mask-image: linear-gradient(to right, transparent 0, #000 20px, #000 calc(100% - 20px), transparent 100%);
}
.finder__table.is-start {
-webkit-mask-image: linear-gradient(to right, #000 calc(100% - 20px), transparent 100%);
mask-image: linear-gradient(to right, #000 calc(100% - 20px), transparent 100%);
}
.finder__table.is-end {
-webkit-mask-image: linear-gradient(to right, transparent 0, #000 20px);
mask-image: linear-gradient(to right, transparent 0, #000 20px);
}
.finder__table.is-still { -webkit-mask-image: none; mask-image: none; }
/* The focus ring goes on the scroller, because the scroller is now a tab
stop - without it the focus lands somewhere invisible. */
.finder__table:focus-visible { outline: 2px solid var(--clr-primary); outline-offset: 2px; }
/* The hint is for the state the fade is describing, so it goes when the fade
does. Its own line, so it never runs into the caption. */
.finder__table-hint { display: block; margin-block-start: var(--space-3xs); }
.finder__table.is-still .finder__table-hint { display: none; }
.finder__table table { inline-size: 100%; min-inline-size: 48rem; border-collapse: collapse; font-size: var(--text-sm); }
.finder__table caption {
padding: var(--space-l) var(--space-xl) var(--space-m);
text-align: start;
font-size: var(--text-sm);
color: var(--clr-muted-fg);
border-block-end: 1px solid var(--clr-border);
}
.finder__table th,
.finder__table td { padding: var(--space-m) var(--space-xl); text-align: start; vertical-align: top; }
.finder__table thead th {
background: var(--clr-secondary);
font-size: var(--text-xs);
font-weight: 700;
letter-spacing: .05em;
text-transform: uppercase;
color: var(--clr-muted-fg);
}
.finder__table tbody th,
.finder__table tbody td { border-block-start: 1px solid var(--clr-border); }
.finder__table tbody th { font-weight: 600; }
.finder__table tbody th a { text-decoration: none; }
.finder__table .tnum { font-variant-numeric: tabular-nums; white-space: nowrap; }
.finder__table .finder__nights { color: var(--clr-muted-fg); }
@media (hover: hover) {
.finder__table tbody tr:hover th,
.finder__table tbody tr:hover td { background: var(--clr-secondary); }
.finder__table tbody th a:hover { text-decoration: underline; }
}
/* --- Show more, while it is working -------------------------------------
*
* Twelve cards appearing is instant, so the spinner is not there to cover a
* wait - it is there so a press has an answer. It shows for one beat and the
* button reports itself busy to anyone listening.
* ---------------------------------------------------------------------- */
.finder__more-cards .btn { position: relative; }
.finder__spinner { display: none; }
.finder__more-icon { inline-size: .875rem; block-size: .875rem; }
.finder__more-cards .btn[aria-busy=true] .finder__more-label,
.finder__more-cards .btn[aria-busy=true] .finder__more-icon { visibility: hidden; }
.finder__more-cards .btn[aria-busy=true] .finder__spinner {
display: block;
position: absolute;
inset-block-start: 50%;
inset-inline-start: 50%;
inline-size: 1.125rem;
block-size: 1.125rem;
margin: -0.5625rem 0 0 -0.5625rem;
border: 2px solid currentColor;
border-block-start-color: transparent;
border-radius: var(--radius-full);
animation: finder-spin .6s linear infinite;
}
@keyframes finder-spin { to { rotate: 360deg; } }
/* --- Filtering, with movement -------------------------------------------
*
* The same treatment the city pages use: a card that survives a filter slides
* to its new place instead of the grid jump-cutting. The transition here is
* only the leaving half - the sliding is done by the script, which measures
* where each card was and animates it from there.
* ---------------------------------------------------------------------- */
/*
* Fade, and only fade. There was a slide as well - cards travelling from where
* they used to be to where the filter put them - and it read as confusing
* rather than smooth: fifty-six cards reflowing at once gives the eye too many
* things moving in different directions to follow. A fade says "this set
* changed" without asking anyone to track a card across the grid.
*/
.finder__grid > li { transition: opacity .18s ease; }
.finder__grid > li.is-leaving { opacity: 0; }
@media (prefers-reduced-motion: reduce) {
.finder__grid > li { transition: none; }
.finder__spinner { animation: none; }
}
@media (max-width: 40rem) {
.finder__views { inline-size: 100%; }
.finder__view { flex: 1 1 0; justify-content: center; }
}
/* --- Browse rows ---------------------------------------------------------
*
* Text link cards, not the homepage's photo cards: these are a way out of the
* page rather than something to look at, and nine photographs under a grid of
* fifty-six would compete with the results for attention.
* ---------------------------------------------------------------------- */
.morocco-browse__row {
margin: 0;
padding: 0;
list-style: none;
display: grid;
gap: var(--space-s);
grid-template-columns: repeat(auto-fit, minmax(min(13rem, 100%), 1fr));
}
.morocco-browse__row a {
display: grid;
gap: var(--space-3xs);
align-content: start;
block-size: 100%;
padding: var(--space-l);
border: 1px solid var(--clr-border);
border-radius: var(--radius-lg);
background: var(--clr-card);
text-decoration: none;
transition: border-color .15s ease;
}
.morocco-browse__row h3 { margin: 0; font-size: 1rem; }
.morocco-browse__n {
margin: 0;
/* The count is the reason to click one of these, so it is not the
smallest thing in the card. */
font-size: var(--text-sm);
font-weight: 700;
color: var(--clr-gold-ink);
}
.morocco-browse__note { margin: 0; font-size: var(--text-sm); color: var(--clr-muted-fg); }
@media (hover: hover) {
.morocco-browse__row a:hover { border-color: var(--clr-primary); }
}
/* --- The rail becomes a sheet ------------------------------------------ */
@media (max-width: 64rem) {
.finder__layout { grid-template-columns: minmax(0, 1fr); }
/*
* Off-canvas, and only where a script can bring it back: with no script the
* rail stays in the flow above the results, where it still works as a form.
*/
.has-js .finder__rail {
position: fixed;
inset: 0;
z-index: 60;
border: 0;
border-radius: 0;
overflow-y: auto;
/*
* No padding on top. It used to be var(--space-l), and a sticky head
* inside a padded scroller sticks BELOW that padding - so cards
* scrolled up through the 16px strip above the bar and showed over it.
* The head carries the spacing instead, where it is opaque.
*/
padding: 0 var(--space-xl) 6rem;
}
.has-js .finder__rail { display: none; }
.has-js .finder__rail.is-open { display: block; }
.has-js .finder__sheet-open { display: inline-flex; }
/* Boxed exactly as .nav-burger is - same size, same border, same radius.
Two buttons that open and shut a panel covering the whole screen should
not be drawn as two different kinds of control. */
.has-js .finder__rail .finder__rail-close {
display: inline-flex;
align-items: center;
justify-content: center;
inline-size: 2.5rem;
block-size: 2.5rem;
padding: 0;
border: 1px solid var(--clr-border);
border-radius: var(--radius-md);
background: none;
cursor: pointer;
color: var(--clr-primary);
}
.has-js .finder__rail .finder__rail-close span {
inline-size: 1.25rem;
block-size: 1.25rem;
background: currentColor;
-webkit-mask: var(--icon-x) center / contain no-repeat;
mask: var(--icon-x) center / contain no-repeat;
}
/* The head stays put while the facets scroll under it, so the way out is
never somewhere you have to scroll back up to find. */
.has-js .finder__rail .finder__rail-head {
position: sticky;
inset-block-start: 0;
z-index: 1;
align-items: center;
/* Refine, then everything else pushed to the far end together. */
justify-content: flex-start;
gap: var(--space-m);
padding-block: var(--space-l) var(--space-s);
background: var(--clr-card);
}
/* Clear all belongs next to the way out, not adrift in the middle: with
three children, space-between was landing it dead centre. */
.has-js .finder__rail .finder__clear { margin-inline-start: auto; }
/* Inside the sheet, the submit is how you apply and close. */
.has-js .finder__rail .finder__submit {
display: block;
position: fixed;
inset-inline: var(--space-xl);
inset-block-end: var(--space-xl);
z-index: 61;
}
.has-js .finder__rail .finder__submit .btn { inline-size: 100%; justify-content: center; }
}
@media (max-width: 40rem) {
.finder__sort { margin-inline-start: 0; inline-size: 100%; }
.finder__sort select { flex: 1 1 auto; }
}
/* =========================================================================
* 11. BLOG
*
* The article body is whatever the editor wrote, so almost everything here
* styles element selectors inside .post-body rather than classes. The
* furniture around it - masthead, contents rail, author box - is ours and
* uses classes like the rest of the theme.
* ====================================================================== */
/* --- How far down the article you are ------------------------------------
*
* Fixed above everything, 3px, gold. Rendered at zero width rather than
* created by script, so it does not appear a beat after the page: a bar that
* arrives late reads as something loading, which is the opposite of what it
* is for.
* ---------------------------------------------------------------------- */
.reading-progress {
position: fixed;
inset-block-start: 0;
inset-inline: 0;
z-index: 200;
block-size: 3px;
background: transparent;
pointer-events: none;
}
.reading-progress span {
display: block;
inline-size: 0;
block-size: 100%;
background: var(--clr-gold);
transition: inline-size .12s linear;
}
@media (prefers-reduced-motion: reduce) {
.reading-progress span { transition: none; }
}
/* --- Breadcrumb ----------------------------------------------------------
* Its own bar above the masthead, on the tinted ground, so the title below
* starts clean.
* ---------------------------------------------------------------------- */
/*
* Three tones, lightest first: page, strip, masthead.
*
* The strip and the masthead were both --clr-secondary, so the boundary
* between them did not exist and the two read as one block. The reference
* runs secondary at 40% for the strip and the darker surface tint for the
* masthead below it, which is what separates them.
*/
.crumbs {
border-block-end: 1px solid var(--clr-border);
background: color-mix(in srgb, var(--clr-secondary) 40%, var(--clr-bg));
font-size: var(--text-sm);
}
.crumbs ol {
display: flex;
flex-wrap: wrap;
align-items: center;
gap: var(--space-2xs);
margin: 0;
padding: var(--space-m) 0;
list-style: none;
color: var(--clr-muted-fg);
}
.crumbs li + li::before {
content: "/";
margin-inline-end: var(--space-2xs);
/* --clr-border is a hairline colour. As a glyph it all but disappeared;
the reference sets the slash in the same grey as the links. */
color: var(--clr-muted-fg);
}
.crumbs a { color: var(--clr-muted-fg); text-decoration: none; }
.crumbs [aria-current="page"] { color: var(--clr-fg); }
@media (hover: hover) {
.crumbs a:hover { color: var(--clr-primary); text-decoration: underline; }
}
/* --- Masthead ----------------------------------------------------------- */
.post-head {
background: var(--clr-surface-tint);
padding-block: var(--space-3xl) var(--space-2xl);
}
.post-head__topics {
display: flex;
flex-wrap: wrap;
gap: var(--space-2xs);
margin: 0 0 var(--space-l);
}
/*
* No measure cap.
*
* 22ch broke the title at 475px inside a 768px column, so it wrapped to two
* short lines with a third of the column empty beside it. Size and leading
* are the global h1 scale, which is what every template except the home
* page uses - the masthead is not a special case and should not declare
* its own.
*/
.post-head__title {
margin: 0;
color: var(--clr-primary);
text-wrap: balance;
}
.post-head__stand {
/* Wider than the title and narrower than the page: it is read as a
paragraph, not scanned as a heading. */
max-inline-size: 60ch;
margin: var(--space-l) 0 0;
color: var(--clr-muted-fg);
}
.post-head__meta {
display: flex;
flex-wrap: wrap;
align-items: center;
gap: var(--space-xs) var(--space-l);
margin: var(--space-xl) 0 0;
/*
* --text-meta, not --text-sm. This line names and qualifies the article
* rather than being read on its own, which is what that token exists for.
* The reference sets it at 12px; 13px is the nearest step that keeps the
* 14px floor for anything actually read as prose.
*/
font-size: var(--text-meta);
font-weight: 500;
color: var(--clr-muted-fg);
}
/*
* The gap separates these, not a dot.
*
* A dot on every item but the first lands at the START of a wrapped line on a
* phone, where it reads as a stray bullet rather than a separator - and CSS
* cannot tell which items share a line.
*/
/*
* No weight or colour of its own.
*
* It was 600 in --clr-fg while the date and the reading time beside it
* were 500 in --clr-muted-fg, so the name read as a heading in a row of
* labels. The three are one line of metadata and should look like it.
*/
/* --- The lead photograph ------------------------------------------------ */
.post-lead {
/* Sits on the join between the tinted masthead and the page, so it reads as
belonging to the article rather than to either band. */
background: linear-gradient(to bottom, var(--clr-secondary) 55%, var(--clr-bg) 55%);
padding-block-end: var(--space-3xl);
}
.post-lead figure {
margin: 0;
overflow: hidden;
border: 1px solid var(--clr-border);
border-radius: var(--radius-3xl);
background: var(--clr-card);
}
.post-lead__img { display: block; inline-size: 100%; block-size: auto; }
.post-lead figcaption {
padding: var(--space-m) var(--space-xl);
border-block-start: 1px solid var(--clr-border);
font-size: var(--text-sm);
color: var(--clr-muted-fg);
}
/* --- The two-column body ------------------------------------------------ */
.post-layout {
display: grid;
/* See .finder__results: a grid child's minimum is its content, and this one
holds tables that scroll. */
grid-template-columns: minmax(0, 1fr);
gap: var(--space-2xl);
padding-block-end: var(--section-py);
}
@media (min-width: 64rem) {
.post-layout {
grid-template-columns: 16rem minmax(0, 1fr);
gap: var(--space-4xl);
}
}
/* --- The contents rail -------------------------------------------------- */
.post-rail { display: grid; gap: var(--space-l); align-content: start; }
@media (min-width: 64rem) {
.post-rail {
position: sticky;
inset-block-start: calc(var(--header-h) + var(--space-l));
}
}
.post-toc {
padding: var(--space-l);
border: 1px solid var(--clr-border);
border-radius: var(--radius-xl);
background: var(--clr-card);
}
.post-toc > summary {
display: flex;
align-items: center;
gap: var(--space-xs);
font-size: var(--text-sm);
font-weight: 700;
color: var(--clr-primary);
cursor: pointer;
list-style: none;
}
.post-toc > summary::-webkit-details-marker { display: none; }
.post-toc > summary .mi { inline-size: .9375rem; block-size: .9375rem; }
.post-toc ol {
counter-reset: toc;
margin: var(--space-m) 0 0;
padding: 0;
list-style: none;
display: grid;
gap: var(--space-3xs);
}
.post-toc li { counter-increment: toc; }
.post-toc a {
display: grid;
grid-template-columns: 1.5rem minmax(0, 1fr);
gap: var(--space-2xs);
padding: var(--space-2xs) var(--space-xs);
border-radius: var(--radius-md);
font-size: var(--text-sm);
line-height: var(--lh-sm);
color: var(--clr-muted-fg);
text-decoration: none;
}
.post-toc a::before {
content: counter(toc, decimal-leading-zero);
font-variant-numeric: tabular-nums;
color: var(--clr-gold-ink);
font-weight: 700;
}
@media (hover: hover) {
.post-toc a:hover { background: var(--clr-secondary); color: var(--clr-fg); }
}
/*
* The section being read. The script sets it; without one nothing is ever
* marked, which is correct - a static page has no "current" section.
*/
.post-toc a[aria-current="true"] {
background: var(--clr-secondary);
color: var(--clr-primary);
font-weight: 600;
}
/* On a phone the rail is a disclosure, shut, so it is one line rather than a
screen of links between the reader and the first paragraph. */
@media (max-width: 63.99rem) {
.post-toc:not([open]) nav { display: none; }
}
.post-rail__ask {
padding: var(--space-l);
border: 1px solid var(--clr-border);
border-radius: var(--radius-xl);
background: var(--clr-secondary);
font-size: var(--text-sm);
color: var(--clr-muted-fg);
}
.post-rail__ask p { margin: 0 0 var(--space-m); }
.post-rail__ask-title { font-weight: 700; color: var(--clr-primary); margin-block-end: var(--space-2xs); }
.post-rail__ask .btn { inline-size: 100%; justify-content: center; }
/* --- The article itself --------------------------------------------------
*
* Element selectors, because this is whatever the editor wrote. A measure of
* about 70 characters on the prose, but tables and figures are allowed the
* full column - they are looked at, not read line by line.
* ---------------------------------------------------------------------- */
.post-main { min-inline-size: 0; }
/*
* 37rem, the measure .section-lede already sets for the whole theme.
*
* NOT 70ch. The ch unit is the width of the "0" glyph, which in Inter is much
* wider than an average letter - 70ch measured 87 to 91 real characters a
* line, well past the 45-75 that is comfortable to read. 37rem lands near 74.
*/
/* No measure cap: the reference lets prose fill the column, and a 37rem
cap inside a 905px column left a third of it empty. */
.post-body > * + * { margin-block-start: var(--space-xl); }
.post-body h2 {
/* Clears the sticky header when an anchor lands on it. */
scroll-margin-block-start: calc(var(--header-h) + var(--space-m));
margin-block-start: var(--space-4xl);
margin-block-end: var(--space-m);
color: var(--clr-primary);
text-wrap: balance;
}
.post-body h3 {
scroll-margin-block-start: calc(var(--header-h) + var(--space-m));
margin-block-start: var(--space-2xl);
margin-block-end: var(--space-s);
color: var(--clr-primary);
}
.post-body h4 {
margin-block-start: var(--space-xl);
margin-block-end: var(--space-2xs);
color: var(--clr-fg);
}
.post-body h2:first-child,
.post-body h3:first-child { margin-block-start: 0; }
.post-body p { color: var(--clr-fg); line-height: var(--lh-relaxed); }
.post-body a { color: var(--clr-primary); text-underline-offset: 3px; }
.post-body strong { color: var(--clr-fg); font-weight: 700; }
.post-body ul,
.post-body ol { padding-inline-start: var(--space-xl); color: var(--clr-fg); }
.post-body li + li { margin-block-start: var(--space-2xs); }
.post-body li { line-height: var(--lh-relaxed); }
.post-body img { max-inline-size: 100%; block-size: auto; border-radius: var(--radius-xl); }
.post-body figure { margin-inline: 0; }
.post-body figcaption {
margin-block-start: var(--space-s);
font-size: var(--text-sm);
color: var(--clr-muted-fg);
}
/* The "Quick tips" asides. One step under the body text, because they
qualify the section they sit in rather than carrying its argument. */
.post-body blockquote {
margin-inline: 0;
font-size: var(--text-sm);
padding: var(--space-l) var(--space-xl);
border-inline-start: 3px solid var(--clr-gold);
border-radius: 0 var(--radius-lg) var(--radius-lg) 0;
background: var(--clr-secondary);
color: var(--clr-fg);
}
.post-body blockquote > :first-child { margin-block-start: 0; }
/*
* Tables.
*
* A comparison table is the reason half these guides exist, and it is also
* the thing most likely to be wider than a phone. The wrapper the script adds
* gives it somewhere to scroll; the rules here cover the unwrapped case too,
* so a table still behaves before the script runs.
*/
.post-scroller {
overflow-x: auto;
overscroll-behavior-x: contain;
border: 1px solid var(--clr-border);
border-radius: var(--radius-xl);
scrollbar-width: thin;
scrollbar-color: var(--clr-primary) var(--clr-secondary);
}
.post-scroller::-webkit-scrollbar { block-size: .5rem; }
.post-scroller::-webkit-scrollbar-track { background: var(--clr-secondary); border-radius: var(--radius-full); }
.post-scroller::-webkit-scrollbar-thumb { background: var(--clr-primary); border-radius: var(--radius-full); }
.post-scroller:focus-visible { outline: 2px solid var(--clr-primary); outline-offset: 2px; }
.post-body table {
inline-size: 100%;
min-inline-size: 38rem;
border-collapse: collapse;
font-size: var(--text-sm);
background: var(--clr-card);
}
.post-body :not(.post-scroller) > table {
border: 1px solid var(--clr-border);
border-radius: var(--radius-xl);
}
/*
* Rules both ways, so a reader can see where a column ends.
*
* The reference draws only the horizontal lines; on a three-column
* comparison that leaves the Merzouga and Zagora answers running into
* each other, which on a table whose whole job is "this one versus that
* one" is the wrong thing to lose. Same hairline colour both ways.
*
* The last cell in a row drops its rule: the table already has a border,
* and a second line against it reads as a double edge.
*/
.post-body th,
.post-body td {
padding: var(--space-m) var(--space-l);
text-align: start;
vertical-align: top;
border-block-start: 1px solid var(--clr-border);
border-inline-end: 1px solid var(--clr-border);
}
.post-body tr > :last-child { border-inline-end: 0; }
.post-body thead th {
border-block-start: 0;
background: var(--clr-secondary);
font-size: var(--text-xs);
font-weight: 700;
letter-spacing: .05em;
text-transform: uppercase;
color: var(--clr-muted-fg);
}
/* --- Who wrote it ------------------------------------------------------- */
.post-author { background: var(--clr-secondary); padding-block: var(--section-py); }
.post-author__card {
display: grid;
grid-template-columns: auto minmax(0, 1fr);
gap: var(--space-l);
align-items: start;
padding: var(--space-2xl);
border: 1px solid var(--clr-border);
border-radius: var(--radius-2xl);
background: var(--clr-card);
}
.post-author__mark {
display: grid;
place-items: center;
inline-size: 3.5rem;
block-size: 3.5rem;
margin: 0;
border-radius: var(--radius-xl);
background: var(--clr-primary);
color: var(--clr-primary-fg);
font-weight: 800;
letter-spacing: .04em;
}
.post-author__name { margin: 0 0 var(--space-2xs); color: var(--clr-primary); }
.post-author__card p:last-child { margin: 0; color: var(--clr-muted-fg); }
/* --- Related reading ---------------------------------------------------- */
.post-more { padding-block: var(--section-py); background: var(--clr-secondary); }
.post-more__grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(min(18rem, 100%), 1fr));
gap: var(--grid-gap);
margin: 0;
padding: 0;
list-style: none;
}
/* --- Share --------------------------------------------------------------
*
* Real links, so they work before any script and open the network's own
* composer. The copy-link button is added by the script, because copying is
* the one thing a link cannot do - absent rather than broken where it would
* not work.
* ---------------------------------------------------------------------- */
.post-share {
display: flex;
flex-wrap: wrap;
align-items: center;
gap: var(--space-xs);
margin: var(--space-xl) 0 0;
/*
* The row's height, reserved before the script fills it.
*
* Every button here is built by JavaScript, so the element is empty when the
* page paints and 40px tall a moment later. On a phone, where the masthead
* is one column, that pushed the lead photograph and the whole article down
* by exactly 40px after first paint - measured - which is a layout shift
* against Cumulative Layout Shift for no reason at all.
*
* 2.5rem is the button height, so the space is already the right size and
* nothing moves when the buttons arrive.
*/
min-block-size: 2.5rem;
}
.post-share__label {
font-size: var(--text-sm);
font-weight: 600;
color: var(--clr-muted-fg);
margin-inline-end: var(--space-2xs);
}
.post-share__btn {
display: inline-grid;
place-items: center;
/* 40px, the same square as .nav-burger - every icon-only control on the
site is the same target. */
inline-size: 2.5rem;
block-size: 2.5rem;
border: 1px solid var(--clr-border);
border-radius: var(--radius-md);
background: var(--clr-card);
color: var(--clr-primary);
cursor: pointer;
}
.post-share__btn .mi { inline-size: 1rem; block-size: 1rem; }
@media (hover: hover) {
.post-share__btn:hover { border-color: var(--clr-primary); background: var(--clr-secondary); }
}
/* What the copy button says after it has copied. Polite, so it is announced
without interrupting. */
.post-share__said {
font-size: var(--text-sm);
color: var(--clr-ok, var(--clr-primary));
}
/* --- At a glance --------------------------------------------------------
*
* Four facts for somebody deciding whether this is their article, before they
* commit sixteen minutes to it.
* ---------------------------------------------------------------------- */
.post-glance { padding-block-end: var(--section-py); }
.post-glance__card {
padding: var(--space-2xl);
border: 1px solid var(--clr-border);
border-radius: var(--radius-2xl);
background: var(--clr-card);
}
.post-glance__card .section-title { margin-block-end: var(--space-xl); }
.post-glance__grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(min(13rem, 100%), 1fr));
gap: var(--space-m);
margin: 0;
padding: 0;
list-style: none;
}
.post-glance__grid > li {
padding: var(--space-l);
border: 1px solid var(--clr-border);
border-radius: var(--radius-xl);
background: var(--clr-secondary);
}
/* 1.25rem navy - the same glyph size and colour as .tour-stats .stat-icon,
which is the same object doing the same job on a tour page. */
.post-glance__grid .mi {
inline-size: 1.25rem;
block-size: 1.25rem;
color: var(--clr-primary);
}
.post-glance__grid p { margin: 0; }
.post-glance__label {
margin-block-start: var(--space-s) !important;
font-size: var(--text-xs);
font-weight: 700;
letter-spacing: .05em;
text-transform: uppercase;
color: var(--clr-muted-fg);
}
.post-glance__value {
margin-block-start: var(--space-3xs) !important;
font-size: 1.125rem;
font-weight: 700;
color: var(--clr-primary);
}
/* One step up from --text-sm. There is no 15px in the scale, so the step
from 14 is 16 - which is the body size, and right for a line that is
read rather than scanned. */
.post-glance__note {
margin-block-start: var(--space-3xs) !important;
font-size: 1rem;
line-height: var(--lh-base);
color: var(--clr-muted-fg);
}
/* --- The short answer ---------------------------------------------------
*
* Gold edge, above the first paragraph. A sixteen-minute guide owes the
* reader its conclusion in two sentences: anyone it satisfies was never
* reading to the end, and anyone it does not now knows what they are reading
* towards.
* ---------------------------------------------------------------------- */
.post-answer {
margin-block-end: var(--space-2xl);
padding: var(--space-l) var(--space-xl);
border: 1px solid var(--clr-border);
border-inline-start: 4px solid var(--clr-gold);
/* Rounded on all four corners, as the reference has it. It was square
down the gold edge, which made the rule look like a crop rather than
a deliberate border. */
border-radius: var(--radius-2xl);
background: color-mix(in srgb, var(--clr-gold) 7%, transparent);
}
.post-answer p { margin: 0; color: var(--clr-fg); line-height: var(--lh-relaxed); }
/*
* 16px gold, not 11px.
*
* The reference sets this at 16px/700 in the bright gold #F3BA25. That
* exact colour measures about 1.8:1 against the pale gold ground behind
* it - unreadable, and the reason --clr-gold-ink exists. gold-ink is the
* same hue with enough depth to pass AA on a light ground, and it is
* already what every .section-eyebrow on the site uses.
*
* At 11px it was reading as near-black; at 16px the hue is legible as
* gold, which is what makes the line catch the eye.
*/
/*
* .post-answer .post-answer__label, not .post-answer__label.
*
* The label is a , and `.post-answer p { color: var(--clr-fg) }` two rules
* up is (0,1,1) against this one's (0,1,0) - so the gold lost to the body
* colour whatever the order, and the line rendered near-black. Exactly the
* trap already written up for the in-body blocks, hit again here because this
* block sits outside .post-body and was not in that group.
*/
.post-answer .post-answer__label {
margin-block-end: var(--space-xs) !important;
font-size: 1rem;
font-weight: 700;
line-height: var(--lh-sm);
letter-spacing: .1em;
text-transform: uppercase;
color: var(--clr-gold-ink);
}
/* --- The FAQ, as its own section ---------------------------------------
* The accordion itself is .tour-faq, shared with the tour pages.
* ---------------------------------------------------------------------- */
.post-faq { margin-block-start: var(--space-4xl); }
.post-faq > h2 {
scroll-margin-block-start: calc(var(--header-h) + var(--space-m));
margin-block-end: var(--space-l);
color: var(--clr-primary);
}
/* --- Tours this guide discusses ----------------------------------------- */
.post-linked { padding-block: var(--section-py); }
/* --- The masthead, as two columns ---------------------------------------
*
* Title on the left, share on the right, both sitting on the same
* baseline - which is why it is align-items: end rather than start. One
* column below 64rem, where a second one would leave the title four words
* wide.
* ---------------------------------------------------------------------- */
.post-head__grid { display: grid; gap: var(--space-xl); }
.post-head__intro { max-inline-size: 48rem; }
@media (min-width: 64rem) {
.post-head__grid {
/* minmax(0, 1fr): the title track must be allowed to be narrower than
its longest unbreakable word, or a long headline widens the page. */
grid-template-columns: minmax(0, 1fr) auto;
align-items: end;
}
.post-head__aside .post-share { margin: 0; justify-content: flex-end; }
}
/* --- Why this is worth believing ----------------------------------------
*
* Four claims under the author card. They are the ones a reader can check
* for themselves - where the team is, what it does, how to reach it, where
* the reviews are - rather than adjectives about quality.
*
* Two columns on a phone, not one: these are short pairs, and a single
* column turns four tiles into a screen of scrolling.
* ---------------------------------------------------------------------- */
.post-trust {
display: grid;
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: var(--space-m);
margin: var(--space-m) 0 0;
padding: 0;
list-style: none;
}
@media (min-width: 64rem) {
.post-trust { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}
.post-trust > li {
padding: var(--space-l);
border: 1px solid var(--clr-border);
border-radius: var(--radius-xl);
background: var(--clr-card);
}
.post-trust p { margin: 0; }
.post-trust__title { font-weight: 700; color: var(--clr-primary); }
.post-trust__note {
margin-block-start: var(--space-3xs) !important;
font-size: var(--text-sm);
line-height: var(--lh-sm);
color: var(--clr-muted-fg);
}
/* --- Booking note --------------------------------------------------------
*
* An aside, not a section: it interrupts the argument to say something
* practical, and it is not a step in it. A
carries its title rather
* than an
, so a box that exists to be skipped does not appear in the
* document outline as though it were part of the thread.
* ---------------------------------------------------------------------- */
.post-note {
padding: var(--space-xl) var(--space-2xl);
border: 1px solid var(--clr-border);
border-radius: var(--radius-2xl);
background: var(--clr-surface-tint);
}
.post-note p { margin: 0; }
.post-note__label {
font-size: var(--text-badge);
font-weight: 800;
letter-spacing: .08em;
text-transform: uppercase;
color: var(--clr-primary);
}
.post-note__title {
margin-block-start: var(--space-3xs) !important;
font-size: 1.0625rem;
font-weight: 700;
line-height: 1.35;
color: var(--clr-primary);
}
.post-note__text {
margin-block-start: var(--space-xs) !important;
line-height: var(--lh-relaxed);
color: var(--clr-fg);
}
/* --- Two verdicts, side by side -----------------------------------------
*
* A pair of cards that answer the same question two ways. The titles are
* paragraphs for the reason above: they are labels on parallel options,
* not two more sections of the argument, and as headings they would sit in
* the outline with nothing under them but a list.
* ---------------------------------------------------------------------- */
.post-verdict {
display: grid;
grid-template-columns: minmax(0, 1fr);
gap: var(--space-m);
margin: 0;
padding: 0;
list-style: none;
}
@media (min-width: 40rem) {
.post-verdict { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
.post-verdict > li {
padding: var(--space-xl);
border: 1px solid var(--clr-border);
border-radius: var(--radius-2xl);
background: var(--clr-card);
box-shadow: var(--shadow-card);
}
.post-verdict__tag {
font-size: var(--text-badge);
font-weight: 800;
letter-spacing: .08em;
text-transform: uppercase;
color: var(--clr-gold-ink);
}
.post-verdict__title {
margin-block-start: var(--space-3xs) !important;
font-size: 1.0625rem;
font-weight: 700;
color: var(--clr-primary);
}
.post-verdict ul {
margin-block-start: var(--space-m);
padding-inline-start: var(--space-xl);
font-size: var(--text-sm);
color: var(--clr-muted-fg);
}
.post-verdict ul li + li { margin-block-start: var(--space-3xs); }
/* --- Booking checklist ---------------------------------------------------
* Ten things to ask before paying, in two columns where there is room.
* ---------------------------------------------------------------------- */
.post-checklist {
padding: var(--space-xl) var(--space-2xl);
border: 1px solid var(--clr-border);
border-radius: var(--radius-2xl);
background: var(--clr-card);
box-shadow: var(--shadow-card);
}
.post-checklist__title {
margin: 0 0 var(--space-m);
font-size: var(--text-badge);
font-weight: 800;
letter-spacing: .08em;
text-transform: uppercase;
color: var(--clr-primary);
}
.post-checklist ul {
display: grid;
gap: var(--space-s);
margin: 0;
padding: 0;
list-style: none;
}
@media (min-width: 40rem) {
.post-checklist ul { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
/* Overrides the .post-body li rule, which adds space between stacked
paragraphs of prose and is wrong inside a grid that has its own gap. */
.post-checklist li + li { margin-block-start: 0; }
.post-checklist li {
display: flex;
align-items: flex-start;
gap: var(--space-xs);
font-size: var(--text-sm);
line-height: var(--lh-sm);
color: var(--clr-muted-fg);
}
/* .15rem drops the tick onto the first line's baseline rather than its box. */
.post-checklist .mi {
margin-block-start: .15rem;
inline-size: 1rem;
block-size: 1rem;
color: var(--clr-primary);
}
/* --- The call to action inside the article ------------------------------
*
* The same gradient as .help-cta, at the smaller radius the in-body blocks
* use, so the two read as the same object at two scales rather than as two
* different panels.
* ---------------------------------------------------------------------- */
.post-cta {
display: grid;
gap: var(--space-xl);
padding: var(--space-2xl);
border-radius: var(--radius-2xl);
background: linear-gradient(to bottom right, var(--clr-primary), color-mix(in srgb, var(--clr-primary) 85%, transparent));
color: var(--clr-primary-fg);
}
@media (min-width: 48rem) {
.post-cta { grid-template-columns: minmax(0, 1fr) auto; align-items: center; }
}
.post-cta__title {
margin: 0;
font-size: 1.0625rem;
font-weight: 700;
color: var(--clr-primary-fg);
}
/* !important because .post-body p sets the body colour and would win. */
.post-cta__text {
margin-block-start: var(--space-xs) !important;
line-height: var(--lh-relaxed);
color: color-mix(in srgb, var(--clr-primary-fg) 85%, transparent) !important;
}
/* Stacked, not side by side: two pill buttons in a row took half the
panel and squeezed the sentence beside them into five short lines. */
.post-cta__actions {
display: flex;
flex-direction: column;
align-items: stretch;
gap: var(--space-m);
margin: 0;
}
.post-cta__actions .btn { text-decoration: none; }
/* --- The related-reading card -------------------------------------------
*
* This had no rules at all. It never showed, because the section only
* draws when the post has siblings in its categories and this blog had one
* post - so an unstyled card was sitting one published article away the
* whole time.
* ---------------------------------------------------------------------- */
.post-card {
display: flex;
flex-direction: column;
block-size: 100%;
overflow: hidden;
border: 1px solid var(--clr-border);
border-radius: var(--radius-2xl);
background: var(--clr-card);
box-shadow: var(--shadow-card);
transition: transform .2s ease, box-shadow .2s ease;
}
@media (hover: hover) {
.post-card:hover { transform: translateY(-2px); box-shadow: 0 10px 24px -14px rgba(5, 18, 35, .35); }
}
.post-card__media img { inline-size: 100%; aspect-ratio: 3 / 2; object-fit: cover; }
.post-card__body {
display: flex;
flex-direction: column;
gap: var(--space-2xs);
flex: 1 1 auto;
padding: var(--space-xl);
}
.post-card__topic {
margin: 0;
font-size: var(--text-badge);
font-weight: 700;
letter-spacing: .1em;
text-transform: uppercase;
color: var(--clr-gold-ink);
}
.post-card__title { margin: 0; font-size: 1.0625rem; }
.post-card__title a { text-decoration: none; }
.post-card__excerpt {
margin: 0;
font-size: var(--text-sm);
line-height: var(--lh-sm);
color: var(--clr-muted-fg);
}
/* margin-block-start: auto pins the link to the bottom, so three cards of
unequal text still line their links up. */
.post-card__more {
display: inline-flex;
align-items: center;
gap: var(--space-3xs);
margin-block-start: auto;
padding-block-start: var(--space-m);
font-size: var(--text-sm);
font-weight: 700;
color: var(--clr-primary);
}
.post-card__more .mi { inline-size: .875rem; block-size: .875rem; }
/* --- The in-body blocks, against the prose rules ------------------------
*
* .post-body styles the raw elements an editor produces - p, ul, li - and
* it does so at (0,1,1). Every label and title inside these four blocks is
* a , and two of them are a
, so a plain .post-note__title at
* (0,1,0) loses to .post-body p no matter which comes last in the file.
* The .post-cta title was the visible one: navy text on a navy panel.
*
* These are not a second opinion about the design. They are the same
* declarations at the weight needed to survive the prose reset, kept
* together so it is obvious why they exist.
* ---------------------------------------------------------------------- */
.post-body .post-note__label,
.post-body .post-note__title,
.post-body .post-verdict__title,
.post-body .post-checklist__title { color: var(--clr-primary); }
.post-body .post-verdict__tag { color: var(--clr-gold-ink); }
.post-body .post-cta__title { color: var(--clr-primary-fg); }
/* The label lines are badges, not sentences: the relaxed prose leading
makes an uppercase line of eleven characters look double-spaced. */
.post-body .post-note__label,
.post-body .post-verdict__tag,
.post-body .post-checklist__title { line-height: var(--lh-sm); }
/* .post-body ul gives every list an indent. These two are grids. */
.post-body .post-verdict,
.post-body .post-checklist ul { padding-inline-start: 0; }
.post-body .post-verdict > li + li,
.post-body .post-checklist li + li { margin-block-start: 0; }
/* --- Share: the two buttons that carry a word --------------------------
*
* Copy link and Print are labelled in the reference, and the four network
* buttons beside them are not. That is the right split rather than an
* inconsistency: a network's own mark says what it is, while a printer
* glyph and a pair of rectangles do not - and these are the two controls
* that do something to the reader's own machine rather than opening a
* site they recognise.
* ---------------------------------------------------------------------- */
.post-share__btn--text {
inline-size: auto;
gap: var(--space-2xs);
padding-inline: var(--space-m);
display: inline-flex;
align-items: center;
font-size: var(--text-sm);
font-weight: 600;
}
/* --- The topic tags above the title ------------------------------------
*
* Not .chip. That one is a filter control - a button on the city pages and a
* link in the finder, with a pressed state, a pointer cursor and hover
* transitions. These are static labels saying what the article is about, and
* they differ from .chip on every property that matters, so inheriting it and
* overriding six declarations would be worse than stating six.
*
* White, because the masthead behind them is tinted: on --clr-bg they were a
* shade off the background and read as having no fill at all.
* ---------------------------------------------------------------------- */
.post-head__topic {
display: inline-flex;
align-items: center;
padding: var(--space-3xs) var(--space-m);
border: 1px solid var(--clr-border);
border-radius: var(--radius-full);
background: var(--clr-card);
/* One step up from --text-badge. The reference sets 11px; at our line-height
and weight that read as a footnote rather than a label. */
font-size: var(--text-xs);
font-weight: 600;
line-height: var(--lh-sm);
color: var(--clr-primary);
text-decoration: none;
}
@media (hover: hover) {
.post-head__topic:hover { border-color: var(--clr-primary); }
}
/* --- The byline row ------------------------------------------------------
*
* An icon in front of each item, which is Hassan's addition rather than the
* reference's - the reference separates them with dots. The icons do the
* separating here, so there is no dot and nothing that can land at the start
* of a wrapped line on a phone.
*
* --text-meta, not --text-sm: this line names and qualifies the article
* rather than being read on its own, which is exactly what that token is for.
* The reference sets it at 12px; 13px is the nearest step that keeps the
* 14px floor for anything actually read as prose.
* ---------------------------------------------------------------------- */
.post-head__meta > * {
display: inline-flex;
align-items: center;
gap: var(--space-3xs);
}
.post-head__meta .mi {
inline-size: .875rem;
block-size: .875rem;
/* The icon qualifies the words; it should not outweigh them. */
color: color-mix(in srgb, var(--clr-muted-fg) 80%, transparent);
}
/* --- The blog FAQ, as separated cards -----------------------------------
*
* Scoped to .post-faq on purpose. .tour-faq is shared with the tour and
* category pages, where it is one bordered block of joined rows and has
* already been reviewed that way. Only the blog takes the reference's
* separated cards, so nothing else moves.
*
* The internal spacing is untouched - that was settled in an earlier round.
* What changes is the shell and the marker.
* ---------------------------------------------------------------------- */
.post-faq .tour-faq {
display: grid;
gap: var(--space-m);
border: 0;
border-radius: 0;
overflow: visible;
background: none;
}
.post-faq .tour-faq details {
border: 1px solid var(--clr-border);
border-radius: var(--radius-xl);
overflow: hidden;
background: var(--clr-card);
}
/* Each row is its own card now, so the divider between rows would be a
second line against the card above it. */
.post-faq .tour-faq details + details { border-block-start: 1px solid var(--clr-border); }
/* The shared chevron is replaced by the badge in the markup. */
.post-faq .tour-faq summary::after { display: none; }
.post-faq__toggle {
display: grid;
place-items: center;
flex: 0 0 auto;
inline-size: 1.75rem;
block-size: 1.75rem;
border-radius: var(--radius-lg);
background: var(--clr-surface-tint);
color: var(--clr-primary);
transition: background-color .2s ease, color .2s ease;
}
.post-faq__toggle .mi {
inline-size: 1rem;
block-size: 1rem;
transition: transform .3s ease;
}
/*
* .is-open, not [open].
*
* The script adds [open] the instant it starts measuring the answer's height
* and only then adds .is-open, so keying the turn to [open] would spin the
* plus a beat before the panel moves. This mirrors what the shared chevron
* already does two hundred lines up.
*/
.post-faq .tour-faq details.is-open .post-faq__toggle {
background: var(--clr-primary);
color: var(--clr-primary-fg);
}
.post-faq .tour-faq details.is-open .post-faq__toggle .mi { transform: rotate(45deg); }
.post-faq .tour-faq details[open]:not(.is-open) .post-faq__toggle .mi { transform: none; }