/* =============================================================================
Bijou du Glacier — Saas-Fee
Direction "Stone & Champagne": warm greige paper, deep taupe bands, bronze.
This is the only stylesheet. Edit it directly — the pages link it, nothing
is compiled.
PALETTE — every pair below was measured, not eyeballed.
--linen #F5F3F0 page ground, warm grey
--paper #FCFBF9 raised cards
--band #EAE7E1 alternating light band
--ink #211F1C body + headings 14.8:1 on linen AAA
--ink-soft #57524B secondary text 7.0:1 on linen AAA
--stone #35322E header, hero, footer, reserve card
--stone-2 #45413B raised surface inside a stone band
--bronze #7A5E33 links + accents on light 5.5:1 on linen AA
--champagne #D8C29A accents + CTA on stone 7.4:1 on stone AAA
--on-dark #F5F3F0 text on stone 11.5:1 AAA
--on-dark-lede #D6D0C6 hero standfirst on stone 8.3:1 AAA
--on-dark-2 #BFB8AE secondary on stone 6.5:1 AA
--hair #DFDAD2 hairline on light
--hair-dark #4A453F hairline inside stone
TYPE
Display : Cormorant Garamond 300/400 — high-contrast old-style serif,
the face luxury hotels have used for twenty years, and the
reason the headlines read expensive rather than merely large.
Text/UI : Inter 400/500/600.
Both come from Google Fonts (see the in each page head). If you would
rather self-host and drop the third-party request, put the woff2 files in
fonts/ and swap the for @font-face — the stack below already falls
back to Georgia / system-ui, so nothing breaks in the meantime.
========================================================================== */
:root {
--linen: #F5F3F0;
--paper: #FCFBF9;
--band: #EAE7E1;
--ink: #211F1C;
--ink-soft: #57524B;
--stone: #35322E;
--stone-2: #45413B;
--bronze: #7A5E33;
--champagne: #D8C29A;
--on-dark: #F5F3F0;
--on-dark-lede: #D6D0C6;
--on-dark-2: #BFB8AE;
--hair: #DFDAD2;
--hair-dark: #4A453F;
--display: "Cormorant Garamond", Cormorant, Georgia, "Times New Roman", serif;
--text: "Inter", system-ui, -apple-system, "Segoe UI", Roboto,
"Helvetica Neue", Arial, sans-serif;
--wrap: 1280px;
--gap: 0.5rem;
--ease: cubic-bezier(0.22, 0.61, 0.36, 1);
}
*, *::before, *::after { box-sizing: border-box; }
html {
-webkit-text-size-adjust: 100%;
scroll-behavior: smooth;
scroll-padding-top: 6rem;
}
body {
margin: 0;
background: var(--linen);
color: var(--ink);
font-family: var(--text);
font-size: 1.0625rem;
line-height: 1.7;
font-feature-settings: "kern" 1, "liga" 1;
-webkit-font-smoothing: antialiased;
}
img { max-width: 100%; height: auto; display: block; }
/* ---------- layout ---------- */
.wrap {
width: 100%;
max-width: var(--wrap);
margin-inline: auto;
padding-inline: 1.75rem;
}
.measure { max-width: 38em; }
.section { padding-block: 6rem; }
.section-panel { background: var(--band); border-block: 1px solid var(--hair); }
@media (max-width: 640px) {
.section { padding-block: 3.75rem; }
.wrap { padding-inline: 1.25rem; }
}
/* ---------- typography ---------- */
h1, h2, h3 {
font-family: var(--display);
font-weight: 400;
line-height: 1.08;
letter-spacing: -0.005em;
margin: 0 0 0.5em;
text-wrap: balance;
}
h1 { font-size: clamp(2.6rem, 5.6vw, 4.75rem); font-weight: 300; line-height: 1.02; }
h2 { font-size: clamp(2.1rem, 4vw, 3.25rem); font-weight: 300; }
h3 {
font-family: var(--text);
font-size: 1rem;
font-weight: 600;
letter-spacing: 0.005em;
line-height: 1.4;
margin-bottom: 0.5em;
}
p { margin: 0 0 1.2em; }
p:last-child { margin-bottom: 0; }
.lede {
font-family: var(--display);
font-size: clamp(1.35rem, 2.1vw, 1.75rem);
font-weight: 300;
line-height: 1.4;
letter-spacing: 0;
color: var(--ink);
}
.muted { color: var(--ink-soft); }
.eyebrow {
display: flex;
align-items: center;
gap: 0.9rem;
font-family: var(--text);
font-size: 0.7rem;
font-weight: 600;
letter-spacing: 0.28em;
text-transform: uppercase;
color: var(--bronze);
margin: 0 0 1.25rem;
}
.eyebrow::after { content: ""; flex: 1; height: 1px; background: var(--hair); }
a { color: var(--bronze); text-decoration-thickness: 1px; text-underline-offset: 0.22em; }
a:hover { color: var(--ink); }
:focus-visible {
outline: 2px solid var(--bronze);
outline-offset: 3px;
border-radius: 2px;
}
.skip-link {
position: absolute; left: -9999px; top: 0;
background: var(--champagne); color: var(--stone);
padding: 0.75rem 1.25rem; font-weight: 600; z-index: 100;
}
.skip-link:focus { left: 0; }
/* =============================================================================
HEADER — one bar. Brand, navigation, language and the booking call to action
all live here; there is no second strip below it.
========================================================================== */
.site-header {
position: sticky;
top: 0;
z-index: 40;
background: var(--stone);
border-bottom: 1px solid var(--hair-dark);
}
.header-inner {
display: flex;
align-items: center;
flex-wrap: wrap;
gap: 0.75rem 2rem;
padding-block: 0.9rem;
}
.brand {
display: flex;
align-items: center;
gap: 0.95rem;
text-decoration: none;
color: var(--on-dark);
min-width: 0;
}
.brand-mark {
flex: none;
height: 60px;
width: auto;
filter: drop-shadow(0 1px 4px rgba(0, 0, 0, 0.4));
}
.brand-text {
font-family: var(--display);
font-size: 1.5rem;
font-weight: 400;
letter-spacing: 0.005em;
line-height: 1.05;
white-space: nowrap;
}
.brand-text span {
display: block;
font-family: var(--text);
font-size: 0.58rem;
font-weight: 500;
letter-spacing: 0.26em;
text-transform: uppercase;
color: var(--on-dark-2);
margin-top: 0.4rem;
}
.brand:hover .brand-text { color: var(--champagne); }
.site-nav {
margin-left: auto;
display: flex;
flex-wrap: wrap;
align-items: center;
gap: 0.35rem 1.75rem;
font-size: 0.82rem;
font-weight: 500;
letter-spacing: 0.11em;
text-transform: uppercase;
}
.site-nav a {
color: var(--on-dark);
text-decoration: none;
padding-block: 0.3rem;
border-bottom: 1px solid transparent;
transition: color .18s var(--ease), border-color .18s var(--ease);
}
.site-nav a:hover { color: var(--champagne); border-bottom-color: var(--champagne); }
.site-nav a[aria-current="page"] { color: var(--champagne); border-bottom-color: var(--champagne); }
.langs {
display: flex; align-items: center; gap: 0.35rem;
list-style: none; margin: 0; padding: 0;
font-size: 0.7rem; font-weight: 600; letter-spacing: 0.1em;
}
.langs li { margin: 0; }
.langs li + li::before { content: "·"; color: var(--hair-dark); margin-right: 0.35rem; }
.langs a { color: var(--on-dark-2); text-decoration: none; text-transform: uppercase; }
.langs a:hover { color: var(--on-dark); }
.langs a[aria-current="true"] { color: var(--champagne); }
/* the booking CTA lives in the bar, always one click away */
.header-cta {
font-family: var(--text);
font-size: 0.74rem;
font-weight: 600;
letter-spacing: 0.14em;
text-transform: uppercase;
color: var(--stone);
background: var(--champagne);
padding: 0.7rem 1.35rem;
text-decoration: none;
transition: background-color .18s var(--ease);
}
.header-cta:hover { background: var(--on-dark); color: var(--stone); }
@media (max-width: 1100px) {
.brand-mark { height: 48px; }
.brand-text { font-size: 1.28rem; }
.site-nav { gap: 0.35rem 1.25rem; font-size: 0.76rem; }
.header-cta { display: none; }
}
@media (max-width: 700px) {
.header-inner { gap: 0.6rem 1rem; padding-block: 0.75rem; }
.brand-mark { height: 42px; }
.brand-text { font-size: 1.15rem; }
.brand-text span { font-size: 0.52rem; letter-spacing: 0.2em; }
.site-nav { width: 100%; margin-left: 0; order: 3; justify-content: space-between; gap: 0.5rem; }
}
/* ---------- breadcrumbs ---------- */
.crumbs { padding-block: 0 1.5rem; font-size: 0.76rem; letter-spacing: 0.06em; }
.crumbs ol { display: flex; flex-wrap: wrap; gap: 0.55rem; list-style: none; margin: 0; padding: 0; }
.crumbs li::after { content: "/"; margin-left: 0.55rem; color: var(--hair-dark); }
.crumbs li:last-child::after { content: ""; }
.crumbs a { color: var(--on-dark-2); text-decoration: none; }
.crumbs a:hover { color: var(--champagne); }
.crumbs [aria-current="page"] { color: var(--on-dark); }
/* =============================================================================
HERO — a stone band carrying the headline, the CTA and the mosaic.
========================================================================== */
.hero {
background: var(--stone);
color: var(--on-dark);
padding-block: 1.4rem 2.5rem;
}
/* No max-width on either: headline and lede both run the full measure.
text-wrap is left alone deliberately — `balance` would even the lines out
and stop them reaching the edges, which is the opposite of what is wanted. */
/* The specification row, the headline and the lede must all read as one block
of the same width. The lede fills the column on its own because prose wraps;
the other two have to be made to.
The headline is sized so that it sets on ONE line that reaches the right-hand
edge. Because the four languages are different lengths, each gets its own
size — measured against Cormorant's average advance of 0.414em, so every
language fills 92-97% of the column instead of stopping wherever the words
happen to run out. Below 900px it wraps normally, as a headline should. */
.hero h1 {
color: var(--on-dark);
font-size: clamp(1.9rem, 4.42vw, 3.59rem);
line-height: 1.04;
margin: 0 0 1.1rem;
max-width: none;
text-wrap: normal;
}
@media (min-width: 900px) {
html[lang="fr"] .hero h1 { font-size: clamp(1.9rem, 4.61vw, 3.74rem); }
html[lang="it"] .hero h1 { font-size: clamp(1.9rem, 4.94vw, 4.01rem); }
html[lang="de"] .hero h1 { font-size: clamp(1.9rem, 5.05vw, 4.11rem); }
}
.hero-lede {
font-family: var(--display);
font-weight: 300;
font-size: clamp(1.25rem, 2.25vw, 1.9rem);
line-height: 1.3;
color: var(--on-dark-lede);
max-width: none;
margin: 0;
}
/* Anything set in .lede or .muted inside a hero is sitting on stone, so it has
to take the light palette. Without this, .lede's own `color: var(--ink)`
wins and paints near-black text on a near-black band: 1.29:1, unreadable.
That is exactly what happened on the apartment, Saas-Fee and book pages. */
.hero .lede { color: var(--on-dark-lede); }
.hero .muted { color: var(--on-dark-2); }
.reserve .lede, .site-footer .lede { color: var(--on-dark-lede); }
.reserve .muted, .site-footer .muted { color: var(--on-dark-2); }
/* the specification line, spread edge to edge above the headline. The
separator dots are gone: once the four items are distributed across the full
width they are doing nothing, and the row is cleaner without them. */
.hero-facts {
list-style: none;
margin: 0 0 0.9rem;
padding: 0;
width: 100%;
display: flex;
flex-wrap: wrap;
gap: 0.5rem 2rem;
line-height: 1.15;
font-family: var(--text);
font-size: clamp(0.82rem, 1.05vw, 1rem);
font-weight: 700;
letter-spacing: 0.2em;
text-transform: uppercase;
color: var(--champagne);
}
.hero-facts li { margin: 0; }
@media (min-width: 900px) {
.hero-facts { justify-content: space-between; flex-wrap: nowrap; }
.hero-facts li { white-space: nowrap; }
}
/* section links, on the interior pages, inside the stone band */
.jump { margin-top: 1.5rem; padding-top: 1.25rem; border-top: 1px solid var(--hair-dark); }
.jump ul {
display: flex; flex-wrap: wrap; gap: 0.5rem 1.75rem;
list-style: none; margin: 0; padding: 0;
}
.jump a {
white-space: nowrap;
font-size: 0.7rem; font-weight: 600; letter-spacing: 0.2em;
text-transform: uppercase; color: var(--on-dark-2); text-decoration: none;
transition: color .18s var(--ease);
}
.jump a:hover { color: var(--champagne); }
/* the language-chooser page at the site root */
.page-head { padding-block: 5rem 4rem; }
.page-head .platforms { margin-top: 2.5rem; }
/* interior pages: same masthead band, no mosaic */
.hero-simple { padding-block: 1.4rem 2.25rem; }
.hero-simple h1 { font-size: clamp(2.2rem, 4.4vw, 3.6rem); max-width: 22ch; margin-bottom: 1rem; }
.hero-simple .lede { max-width: 58ch; }
/* ---------- the mosaic ----------
The container carries an explicit aspect-ratio and every cell is placed on a
fixed 12x6 grid, so the full height is reserved before a byte of image data
arrives. Nothing shifts on load. */
.collage {
display: grid;
gap: var(--gap);
grid-template-columns: repeat(12, 1fr);
grid-template-rows: repeat(6, 1fr);
aspect-ratio: 12 / 7;
margin-top: 2rem;
}
.collage figure { margin: 0; position: relative; overflow: hidden; background: var(--stone-2); }
.collage img { width: 100%; height: 100%; object-fit: cover; transition: transform 1.2s var(--ease); }
.collage figure:hover img { transform: scale(1.04); }
.collage figure::after {
content: ""; position: absolute; inset: 0;
box-shadow: inset 0 0 0 1px rgba(245, 243, 240, 0.12);
pointer-events: none;
}
.cell-a { grid-column: 1 / 5; grid-row: 1 / 7; }
.cell-b { grid-column: 5 / 13; grid-row: 1 / 4; }
.cell-c { grid-column: 5 / 8; grid-row: 4 / 7; }
.cell-d { grid-column: 8 / 11; grid-row: 4 / 7; }
.cell-e { grid-column: 11 / 13; grid-row: 4 / 7; }
/* ---------- the hero video ----------
object-fit: contain, never cover — the clip is a walkthrough of the whole
apartment, and cropping it would cut the rooms in half. */
.cell-video { background: var(--stone-2); }
.cell-video video {
display: block; width: 100%; height: 100%;
object-fit: contain; background: var(--stone-2);
}
.motion-still { display: none; }
@media (prefers-reduced-motion: reduce) {
html { scroll-behavior: auto; }
* { animation-duration: 0.01ms !important; transition-duration: 0.01ms !important; }
.cell-video video { display: none; }
.motion-still { display: block; width: 100%; height: 100%; object-fit: contain; }
.collage figure:hover img { transform: none; }
}
@media (max-width: 1023px) {
.collage { grid-template-columns: repeat(6, 1fr); }
.cell-a { grid-column: 1 / 3; grid-row: 1 / 7; }
.cell-b { grid-column: 3 / 7; grid-row: 1 / 4; }
.cell-c { grid-column: 3 / 5; grid-row: 4 / 7; }
.cell-d { grid-column: 5 / 7; grid-row: 4 / 7; }
.cell-e { display: none; }
}
@media (max-width: 639px) {
.collage {
grid-template-columns: repeat(2, 1fr);
grid-template-rows: none;
grid-auto-rows: auto;
aspect-ratio: auto;
}
.collage figure { grid-column: auto; grid-row: auto; }
.cell-a { grid-column: 1 / -1; aspect-ratio: 9 / 16; }
.cell-b { grid-column: 1 / -1; aspect-ratio: 23 / 10; }
.cell-c, .cell-d { aspect-ratio: 17 / 20; }
.cell-e { display: none; }
}
/* ---------- buttons ---------- */
.btn {
display: inline-block;
font-family: var(--text);
font-size: 0.78rem;
font-weight: 600;
letter-spacing: 0.16em;
text-transform: uppercase;
text-decoration: none;
padding: 1.05rem 2.1rem;
border: 1px solid transparent;
transition: background-color .2s var(--ease), color .2s var(--ease),
border-color .2s var(--ease);
}
.btn-primary { background: var(--stone); color: var(--on-dark); border-color: var(--stone); }
.btn-primary:hover, .btn-primary:focus-visible { background: var(--bronze); border-color: var(--bronze); color: #fff; }
.btn-secondary { background: transparent; color: var(--ink); border-color: var(--hair); }
.btn-secondary:hover, .btn-secondary:focus-visible { border-color: var(--bronze); color: var(--bronze); }
/* on stone the primary inverts to champagne */
.hero .btn-primary, .reserve .btn-primary {
background: var(--champagne); border-color: var(--champagne); color: var(--stone);
}
.hero .btn-primary:hover, .reserve .btn-primary:hover,
.hero .btn-primary:focus-visible, .reserve .btn-primary:focus-visible {
background: var(--on-dark); border-color: var(--on-dark); color: var(--stone);
}
.hero .btn-secondary, .reserve .btn-secondary { color: var(--on-dark); border-color: var(--hair-dark); }
.hero .btn-secondary:hover, .reserve .btn-secondary:hover { border-color: var(--champagne); color: var(--champagne); }
.hero :focus-visible, .reserve :focus-visible, .site-header :focus-visible,
.site-footer :focus-visible { outline-color: var(--champagne); }
.cta-row { display: flex; flex-wrap: wrap; align-items: center; gap: 0.9rem 1rem; margin: 0 0 1rem; }
.cta-note { font-size: 0.9rem; color: var(--ink-soft); max-width: 36em; margin: 0; }
@media (max-width: 560px) {
.cta-row { display: block; }
.cta-row .btn { display: block; text-align: center; }
.cta-row .btn + .btn { margin-top: 0.7rem; }
}
/* ---------- editorial gallery ---------- */
.gallery { display: grid; grid-template-columns: repeat(6, 1fr); gap: 1.5rem; margin-top: 3.25rem; }
.gallery figure { margin: 0; }
.gallery a, .gallery .frame { display: block; overflow: hidden; background: var(--band); }
.gallery img {
width: 100%; aspect-ratio: 3 / 2; object-fit: cover;
background: var(--band); transition: transform 1.2s var(--ease);
}
.gallery figure:hover img { transform: scale(1.04); }
.gallery figcaption {
margin-top: 0.85rem;
font-family: var(--text);
font-size: 0.78rem;
letter-spacing: 0.09em;
text-transform: uppercase;
line-height: 1.5;
color: var(--ink-soft);
}
.g-2 { grid-column: span 2; }
.g-3 { grid-column: span 3; }
.g-4 { grid-column: span 4; }
/* Two portraits side by side. The gallery and the split both force 3/2 on
their images, which would slice a portrait photograph in half, so a pair
gets its own container with a 2/3 ratio. It stays two-up on narrow screens:
two tall images stacked is a great deal of scrolling for one balcony. */
.pair { display: grid; grid-template-columns: 1fr 1fr; gap: 1.5rem; margin-top: 2.75rem; }
.pair figure { margin: 0; }
.pair img {
width: 100%; aspect-ratio: 2 / 3; object-fit: cover;
background: var(--band); transition: transform 1.2s var(--ease);
}
.pair figure:hover img { transform: scale(1.03); }
.pair figcaption {
margin-top: 0.85rem;
font-family: var(--text); font-size: 0.78rem; letter-spacing: 0.09em;
text-transform: uppercase; line-height: 1.5; color: var(--ink-soft);
}
@media (max-width: 640px) { .pair { gap: 0.9rem; } .pair figcaption { font-size: 0.7rem; } }
/* -----------------------------------------------------------------------
FLOOR PLAN
A technical drawing, not a photograph. It must never be cropped and must
never be handed a forced aspect-ratio, which is what .gallery img and
.split img both do. Its own near-white ground matches --paper, so the
hairline is what separates it from the band it sits on. The width and
height attributes on the img reserve the space, so there is no shift.
-------------------------------------------------------------------- */
.plan { margin: 3.25rem auto 0; max-width: 660px; }
.plan img {
width: 100%; height: auto;
background: var(--paper);
border: 1px solid var(--hair);
}
.plan figcaption {
margin-top: 1rem;
font-family: var(--text);
font-size: 0.82rem;
line-height: 1.6;
color: var(--ink-soft);
}
@media (min-width: 900px) { .plan { max-width: 620px; } }
.g-6 { grid-column: span 6; }
.g-6 img { aspect-ratio: 21 / 9; }
.g-4 img { aspect-ratio: 16 / 10; }
@media (max-width: 900px) {
.gallery { grid-template-columns: repeat(2, 1fr); }
.g-2, .g-3, .g-4 { grid-column: span 1; }
.g-6 { grid-column: span 2; }
.g-4 img { aspect-ratio: 3 / 2; }
}
@media (max-width: 560px) {
.gallery { grid-template-columns: 1fr; gap: 2rem; }
.g-2, .g-3, .g-4, .g-6 { grid-column: span 1; }
.g-6 img { aspect-ratio: 3 / 2; }
}
/* ---------- prose columns ---------- */
.cols { display: grid; grid-template-columns: 1fr; gap: 3rem 4rem; margin-top: 3rem; }
@media (min-width: 760px) { .cols { grid-template-columns: 1fr 1fr; } }
@media (min-width: 1100px) { .cols-3 { grid-template-columns: repeat(3, 1fr); } }
.col { padding-top: 1.5rem; border-top: 1px solid var(--hair); max-width: 38em; }
.col h3 { color: var(--ink); }
.split { display: grid; gap: 3rem 4.5rem; grid-template-columns: 1fr; align-items: center; margin-top: 3rem; }
@media (min-width: 900px) { .split { grid-template-columns: minmax(0,1fr) minmax(0,1fr); } }
.split figure { margin: 0; overflow: hidden; }
.split img { width: 100%; aspect-ratio: 3 / 2; object-fit: cover; background: var(--band); transition: transform 1.2s var(--ease); }
.split figure:hover img { transform: scale(1.03); }
/* ---------- fact table ---------- */
.facts { width: 100%; border-collapse: collapse; margin-top: 2.75rem; font-size: 0.97rem; text-align: left; }
.facts caption { text-align: left; color: var(--ink-soft); font-size: 0.88rem; padding-bottom: 0.9rem; }
.facts th, .facts td { padding: 0.95rem 1rem; border-bottom: 1px solid var(--hair); vertical-align: top; }
.facts th { width: 36%; font-weight: 500; color: var(--ink-soft); }
.facts tr:nth-child(odd) td, .facts tr:nth-child(odd) th { background: var(--paper); }
/* ---------- amenities ---------- */
.amenities {
list-style: none; margin: 2.75rem 0 0; padding: 0;
display: grid; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr));
gap: 0; border-top: 1px solid var(--hair);
}
.amenities li {
padding: 0.95rem 0.25rem; border-bottom: 1px solid var(--hair);
font-size: 0.94rem; display: flex; align-items: baseline; gap: 0.75rem;
}
.amenities li::before {
content: ""; flex: none; width: 5px; height: 5px;
background: var(--bronze); transform: translateY(-2px); border-radius: 50%;
}
/* ---------- FAQ (native details, no JavaScript) ---------- */
.faq { margin-top: 2.75rem; border-top: 1px solid var(--hair); max-width: 52em; }
.faq details { border-bottom: 1px solid var(--hair); }
.faq summary {
cursor: pointer; list-style: none;
padding: 1.4rem 2.5rem 1.4rem 0; position: relative;
font-family: var(--display); font-weight: 400; font-size: 1.35rem; line-height: 1.3;
transition: color .18s var(--ease);
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after {
content: "+"; position: absolute; right: 0.25rem; top: 1.25rem;
font-family: var(--text); font-size: 1.15rem; font-weight: 300; color: var(--bronze);
}
.faq details[open] summary::after { content: "\2212"; }
.faq summary:hover { color: var(--bronze); }
.faq .answer { padding: 0 2.5rem 1.6rem 0; color: var(--ink-soft); max-width: 42em; }
/* ---------- reserve block ---------- */
.reserve {
margin-top: 3rem;
background: var(--stone);
color: var(--on-dark);
border-left: 3px solid var(--champagne);
padding: 3rem;
max-width: 46rem;
}
.reserve h3 {
font-family: var(--display); font-weight: 300;
font-size: clamp(1.9rem, 3.2vw, 2.6rem); line-height: 1.1;
color: var(--on-dark); margin-bottom: 0.5em;
}
.reserve p, .reserve .cta-note { color: var(--on-dark-2); }
.reserve .cta-row { margin-top: 1.75rem; }
@media (max-width: 560px) { .reserve { padding: 2rem 1.5rem; } }
/* the platform listings, folded into the Reserve panel */
.reserve-alt {
margin-top: 2.25rem;
padding-top: 1.75rem;
border-top: 1px solid var(--hair-dark);
}
.reserve-alt-label {
font-family: var(--text);
font-size: 0.68rem;
font-weight: 600;
letter-spacing: 0.24em;
text-transform: uppercase;
color: var(--on-dark-2);
margin: 0 0 1.1rem;
}
.reserve .platforms { margin-top: 0; }
/* The Airbnb and Booking.com buttons carry the same champagne fill as
"Book direct for the best rate", so all three read as one set.
Stone on champagne measures 7.4:1, AAA. */
.platforms .btn-primary {
background: var(--champagne);
border-color: var(--champagne);
color: var(--stone);
}
.platforms .btn-primary:hover,
.platforms .btn-primary:focus-visible {
background: var(--on-dark); border-color: var(--on-dark); color: var(--stone);
}
/* On the book page the same buttons sit on the light band, where champagne on
#EAE7E1 has almost no edge of its own. A bronze hairline gives the shape a
boundary (4.9:1 against the band) without touching the fill, and the hover
darkens rather than lightens, which is the right direction on light ground. */
.section-panel .platforms .btn-primary,
.section:not(.section-panel) .platforms .btn-primary { border-color: var(--bronze); }
.section-panel .platforms .btn-primary:hover,
.section-panel .platforms .btn-primary:focus-visible,
.section:not(.section-panel) .platforms .btn-primary:hover,
.section:not(.section-panel) .platforms .btn-primary:focus-visible {
background: var(--bronze); border-color: var(--bronze); color: #fff;
}
.reserve .platforms .btn-primary { border-color: var(--champagne); }
.reserve .platforms .btn-primary:hover,
.reserve .platforms .btn-primary:focus-visible {
background: var(--on-dark); border-color: var(--on-dark); color: var(--stone);
}
.platforms { list-style: none; margin: 1.5rem 0 0; padding: 0; display: flex; flex-wrap: wrap; gap: 0.75rem; }
.platforms li { margin: 0; }
.platforms .btn { padding: 0.85rem 1.5rem; font-size: 0.72rem; }
.fineprint { margin-top: 2.25rem; font-size: 0.88rem; color: var(--ink-soft); max-width: 44em; }
/* ---------- footer ---------- */
.site-footer { background: var(--stone); color: var(--on-dark-2); padding-block: 4rem 2.5rem; font-size: 0.9rem; }
.footer-grid { display: grid; gap: 2.5rem 3rem; grid-template-columns: 1fr; }
@media (min-width: 760px) { .footer-grid { grid-template-columns: 1.6fr 1fr 1fr; } }
/* the blason sits beside the address */
.footer-identity { display: flex; align-items: flex-start; gap: 1.5rem; }
.footer-mark {
flex: none; height: 104px; width: auto;
filter: drop-shadow(0 1px 4px rgba(0, 0, 0, 0.4));
}
@media (max-width: 560px) { .footer-mark { height: 80px; } }
.site-footer h2 {
font-family: var(--text); font-size: 0.68rem; font-weight: 600;
letter-spacing: 0.26em; text-transform: uppercase;
color: var(--on-dark); margin: 0 0 1rem;
}
.footer-brand {
font-family: var(--display); font-size: 1.9rem; font-weight: 300;
color: var(--on-dark); margin: 0 0 0.7rem; line-height: 1.1;
}
.site-footer ul { list-style: none; margin: 0; padding: 0; }
.site-footer li { margin-bottom: 0.5rem; }
.site-footer a { color: var(--on-dark-2); text-decoration: none; }
.site-footer a:hover { color: var(--champagne); }
.site-footer .footer-grid { padding-bottom: 0.5rem; }
/* =============================================================================
Scroll reveal.
Deliberately fail-safe: everything is visible by default, and only becomes
hidden-then-revealed once the inline script has added .js to . If the
script never runs, or the visitor asks for reduced motion, the page simply
renders normally.
========================================================================== */
.js .reveal { opacity: 0; transform: translateY(18px); }
.js .reveal.is-in {
opacity: 1; transform: none;
transition: opacity .7s var(--ease), transform .7s var(--ease);
}
@media (prefers-reduced-motion: reduce) {
.js .reveal { opacity: 1; transform: none; }
}
/* ---------- print ---------- */
@media print {
body { background: #fff; color: #000; }
.site-header, .collage, .next-links, .jump { display: none; }
.hero, .reserve, .site-footer { background: none; color: #000; }
.hero h1, .hero .lede, .hero-facts, .reserve h3, .reserve p { color: #000; }
.btn { border: 1px solid #000; color: #000; background: none; }
.js .reveal { opacity: 1; transform: none; }
a::after { content: " (" attr(href) ")"; font-size: 0.8em; }
}