/* ==========================================================================
Dům u Sebastiana — design system (direction 4a)
Values taken verbatim from the Claude Design handoff.
========================================================================== */
/* --------------------------------------------------------------------------
1. Tokens
-------------------------------------------------------------------------- */
:root {
/* Colour */
--green: #3e7560;
--green-hover: #356452;
--green-dark: #23433a;
--green-ink: #2f5a4a; /* text on green tint */
--sage: #8fb8a3;
--sage-photo: #b9c69f; /* eyebrow on dark photo banner */
--warm: #c98a4b;
--ink: #23201c;
--body: #5b544b;
--body-strong: #4c463f;
--muted: #6d675e;
/* Was #9c968b, which is 2.54:1 on the sand — well under the 4.5:1 small
text needs. It carries the copyright, the price bands' "1–2 OSOBY" and a
dozen other captions, so it had to move rather than be worked around.
There is no lighter value that passes on these backgrounds: the hierarchy
against `--muted` now rests on size and letter-spacing, not on colour. */
--light-muted: #6f6960;
--cream: #fffdf8;
--sand: #f2eee4;
--sand-green: #eef1e5;
--sand-warm: #f7ece4;
--green-tint: #e2ede7;
--canvas: #e8e6e1;
--on-photo: rgba(255, 253, 248, 0.85);
--on-photo-soft: rgba(255, 253, 248, 0.6);
--line: rgba(35, 32, 28, 0.1);
--line-strong: rgba(35, 32, 28, 0.16);
--line-soft: rgba(35, 32, 28, 0.12);
/* Type */
--display: 'Gloock', Georgia, 'Times New Roman', serif;
--ui: 'Plus Jakarta Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
--mono: 'DM Mono', ui-monospace, SFMono-Regular, Menlo, monospace;
/* Layout */
--page-width: 1180px;
--gutter: 40px;
--radius-card: 28px;
--radius-banner: 24px;
--radius-block: 22px;
--radius-media: 20px;
--radius-pill: 999px;
--shadow-card: 0 30px 80px -40px rgba(28, 32, 24, 0.4);
}
/* --------------------------------------------------------------------------
2. Base
-------------------------------------------------------------------------- */
*,
*::before,
*::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
/* The `hidden` attribute is `display: none` in the browser's own stylesheet,
which any author `display` beats — and the design sets one on most things it
hides. `.gallery__item { display: block }` meant the gallery and trip filters
toggled `hidden` on every card and none of them disappeared: the buttons
highlighted, the count changed, and the grid stayed exactly as it was.
`!important` is the documented fix for this and is why it is here. */
[hidden] { display: none !important; }
body {
margin: 0;
background: var(--canvas);
color: var(--body);
font-family: var(--ui);
font-size: 16px;
line-height: 1.6;
-webkit-font-smoothing: antialiased;
}
a { color: inherit; text-decoration: none; }
/* `height: auto` is not optional here, and it is the one line the handoff could
not have known to include.
The static design wrote bare tags with no width/height attributes, so
the height resolved to auto and the aspect ratio held. eleventy-img adds both
attributes — it has to, they are what stops the page reflowing as images
load. With `max-width: 100%` alone the width then shrinks to the column while
the height attribute keeps applying, and a 4:3 photograph renders at 700x900:
a landscape shot squeezed into portrait. Every content image was wrong. */
img {
max-width: 100%;
height: auto;
}
/* eleventy-img wraps every in a to offer AVIF and WebP. That
wrapper becomes the grid or flex item, which silently breaks every layout
rule the design writes against the image itself — `.apartment__gallery
img:first-child { grid-column: span 2 }` stops spanning, because the img is
no longer a grid item and is now the first child of its own .
`display: contents` removes the wrapper from the layout tree entirely, so the
is laid out as a direct child again and the handoff's CSS works
unchanged.
It does not change the DOM, though, only layout — so `img:first-child` still
matches every image, each being the only child of its own . The two
grids that single out their first image (`.apartment__gallery`, `.mosaic`)
are therefore written as `> :first-child img, > img:first-child`, which picks
the right one whether or not a wrapper is present. Any new rule that targets
an image by position needs the same treatment.
`display: contents` also promotes the siblings into the grid, where
they take real cells at zero height — three photographs in a two-column grid
came out over five rows, staggered down the page. They have to be taken out
explicitly. */
picture { display: contents; }
picture > source { display: none; }
button { font: inherit; color: inherit; }
/* h4 and below belong here too. They were left out while the page had none;
once headings nested deeply enough to need them, they arrived carrying the
browser's own margins and opened gaps under the titles they sat with. */
h1, h2, h3, h4, h5, h6, p, blockquote { margin: 0; }
address { font-style: normal; }
:focus-visible {
outline: 2px solid var(--green);
outline-offset: 2px;
border-radius: 4px;
}
.on-photo :focus-visible,
.header:not(.is-stuck) :focus-visible,
.banner :focus-visible,
.cta-dark :focus-visible {
outline-color: var(--cream);
}
.visually-hidden {
position: absolute;
width: 1px; height: 1px;
padding: 0; margin: -1px;
overflow: hidden;
clip: rect(0 0 0 0);
white-space: nowrap;
border: 0;
}
/* --------------------------------------------------------------------------
3. Page card
-------------------------------------------------------------------------- */
.page {
max-width: var(--page-width);
margin: 40px auto;
background: var(--cream);
border-radius: var(--radius-card);
overflow: hidden;
box-shadow: var(--shadow-card);
}
/* Horizontal gutter helper — every band in the design sits on a 40px gutter.
*
* `--top` is also the vertical rhythm of the page: 34px of air between one
* section and the next. It works only as long as the space is owned by the
* band that follows and not also by the thing above it. Where a component
* carried its own trailing margin the two added up and the seam came out at
* 74 or 78px, twice the rest of the page — which is what the stat cards, the
* photo banner and the 3D tour each did. They now end flush and let the next
* band open the gap. */
.band { padding-left: var(--gutter); padding-right: var(--gutter); }
.band--top { padding-top: 34px; }
.band--top-sm { padding-top: 30px; }
.band--bottom { padding-bottom: 44px; }
/* --------------------------------------------------------------------------
4. Buttons, pills, chips
-------------------------------------------------------------------------- */
.btn {
display: inline-block;
border: 0;
border-radius: var(--radius-pill);
font-family: var(--ui);
font-weight: 600;
text-align: center;
cursor: pointer;
transition: background 150ms ease, color 150ms ease;
}
.btn--primary { background: var(--green); color: var(--cream); }
.btn--primary:hover { background: var(--green-hover); }
.btn--light { background: var(--cream); color: var(--ink); }
.btn--light:hover { background: var(--sand); }
.btn--sand { background: var(--sand); color: var(--ink); }
.btn--sand:hover { background: #e8e2d4; }
/* Sizes used in the design */
.btn--sm { font-size: 14px; padding: 12px 18px; }
/* `line-height` in whole pixels: this button is the tallest item in the header
and so sets the bar's height. See .brand__name for why that matters. */
.btn--nav { font-size: 14px; line-height: 22px; padding: 12px 22px; }
.btn--md { font-size: 15px; padding: 15px 26px; }
.btn--lg { font-size: 15px; padding: 15px 28px; }
.btn--xl { font-size: 16px; font-weight: 700; padding: 16px 30px; }
.btn--bold { font-weight: 700; }
.link-green {
color: var(--green);
font-weight: 600;
transition: color 150ms ease;
}
.link-green:hover { color: var(--green-hover); }
.link-underline {
color: var(--cream);
font-size: 15px;
font-weight: 600;
border-bottom: 1px solid rgba(255, 253, 248, 0.4);
padding-bottom: 3px;
}
.link-mono-dark {
font-family: var(--mono);
font-size: 16px;
color: var(--ink);
border-bottom: 1px solid rgba(35, 32, 28, 0.3);
padding-bottom: 3px;
}
.link-mono-light {
font-family: var(--mono);
font-size: 16px;
color: var(--cream);
border-bottom: 1px solid rgba(255, 253, 248, 0.35);
padding-bottom: 3px;
}
.eyebrow {
font-size: 12px;
font-weight: 700;
letter-spacing: 0.16em;
text-transform: uppercase;
color: var(--green);
}
.eyebrow--photo { color: var(--sage-photo); }
.eyebrow--muted { color: var(--light-muted); letter-spacing: 0.14em; }
.chip-mono {
font-family: var(--mono);
font-size: 12px;
background: rgba(35, 32, 28, 0.07);
padding: 3px 7px;
border-radius: 3px;
/* The chip's own 7% wash darkens the sand under it just enough to pull
inherited `--muted` to 4.23:1, under the line for 12px text. */
color: var(--body-strong);
}
.tag {
font-size: 13px;
font-weight: 600;
background: var(--green-tint);
color: var(--green-ink);
padding: 6px 12px;
border-radius: var(--radius-pill);
}
.tag--new {
font-size: 12px;
font-weight: 700;
background: var(--warm);
color: var(--cream);
padding: 4px 10px;
}
/* --------------------------------------------------------------------------
5. Header
-------------------------------------------------------------------------- */
.header {
position: absolute;
top: 0; left: 0; right: 0;
z-index: 40;
}
.header__inner {
display: flex;
align-items: center;
justify-content: space-between;
gap: 20px;
padding: 20px var(--gutter);
}
/* The header paints on whole pixels, and the three line-heights below are what
make that true. They are written in px rather than as ratios because the
ratios landed on fractions: 21 x 1.1 = 23.1 for the brand name, and the
inherited 1.6 gave 14 x 1.6 = 22.4 for both the nav pills and the Rezervovat
button. The button is the tallest thing in the bar, so its 12 + 22.4 + 12
set the header's height at 74.390625px plus the hairline — 75.390625 — with
the brand sitting at 16.140625 and the phone at 16.1875.
That is what made the menu go soft the moment it stuck. `.is-stuck` is
`position: fixed` and animates `translateY(-100%)` on the way in, and a
fixed element mid-transform is composited: the browser rasterises the text
into a GPU texture once, at whatever sub-pixel offset it finds it at, then
the compositor resamples it from there. Above the fold the same markup is
`position: absolute` and never animated, so it paints into the page's own
layer and stays sharp — which is why only the scrolled-down state looked
blurred.
Rounded, the bar is 86px over the hero and 75px stuck, `translateY(-100%)`
is a whole -75px, and every glyph in it lands on the pixel grid. Anything
added to the header wants an integer line-height for the same reason. */
.brand__name {
font-family: var(--display);
font-size: 21px;
line-height: 23px;
color: var(--cream);
}
.brand__place {
font-size: 10px;
font-weight: 700;
letter-spacing: 0.18em;
text-transform: uppercase;
color: rgba(255, 253, 248, 0.6);
margin-top: 3px;
}
/* Slot for the vector logo when it arrives (42px tall, white over photo). */
.brand { display: flex; align-items: center; gap: 12px; }
.brand__mark { height: 42px; width: auto; display: block; filter: brightness(0) invert(1); }
.nav {
display: flex;
gap: 6px;
font-size: 14px;
font-weight: 500;
color: rgba(255, 253, 248, 0.88);
}
.nav__link {
padding: 9px 13px;
line-height: 22px; /* whole pixels — see .brand__name */
border-radius: var(--radius-pill);
transition: background 150ms ease, color 150ms ease;
white-space: nowrap;
}
.nav__link:hover { background: rgba(255, 253, 248, 0.1); }
.nav__link.is-active { background: rgba(255, 253, 248, 0.14); }
.header__actions { display: flex; align-items: center; gap: 16px; }
.phone {
display: flex;
flex-direction: column;
align-items: flex-end;
gap: 2px;
}
.phone__label {
font-size: 10px;
font-weight: 700;
letter-spacing: 0.14em;
text-transform: uppercase;
color: rgba(255, 253, 248, 0.55);
}
.phone__number {
font-family: var(--mono);
font-size: 15px;
color: var(--cream);
}
/* Solid dark-green header (Kontakt — no hero photo) */
.header--solid {
position: static;
background: var(--green-dark);
}
.header--solid .btn--nav { background: var(--cream); color: var(--green-dark); }
.header--solid .btn--nav:hover { background: var(--sand); }
/* Sticky solid state, toggled by JS once the hero has scrolled past */
.header.is-stuck {
position: fixed;
top: 0;
background: var(--cream);
border-bottom: 1px solid var(--line);
animation: header-drop 200ms ease;
}
.header.is-stuck .header__inner {
max-width: var(--page-width);
margin: 0 auto;
padding-top: 14px;
padding-bottom: 14px;
}
.header.is-stuck .brand__name { color: var(--ink); }
.header.is-stuck .brand__place { color: var(--light-muted); }
.header.is-stuck .brand__mark { filter: none; }
.header.is-stuck .nav { color: var(--body); }
.header.is-stuck .nav__link:hover { background: rgba(35, 32, 28, 0.05); }
.header.is-stuck .nav__link.is-active { background: rgba(35, 32, 28, 0.07); color: var(--ink); }
.header.is-stuck .phone__label { color: var(--light-muted); }
.header.is-stuck .phone__number { color: var(--ink); }
.header.is-stuck .nav-toggle { background: rgba(35, 32, 28, 0.06); }
.header.is-stuck .nav-toggle span { background: var(--ink); }
@keyframes header-drop {
from { transform: translateY(-100%); }
to { transform: translateY(0); }
}
/* Mobile menu button */
.nav-toggle {
display: none;
width: 46px; height: 46px;
border: 0;
border-radius: 50%;
background: rgba(255, 253, 248, 0.18);
flex-direction: column;
align-items: center;
justify-content: center;
gap: 4px;
cursor: pointer;
}
.nav-toggle span {
width: 18px; height: 2px;
background: var(--cream);
transition: transform 150ms ease, opacity 150ms ease;
}
.nav-toggle[aria-expanded='true'] span:nth-child(1) { transform: translateY(6px) rotate(45deg); }
.nav-toggle[aria-expanded='true'] span:nth-child(2) { opacity: 0; }
.nav-toggle[aria-expanded='true'] span:nth-child(3) { transform: translateY(-6px) rotate(-45deg); }
/* --------------------------------------------------------------------------
6. Hero
-------------------------------------------------------------------------- */
.hero {
position: relative;
height: 720px;
overflow: hidden;
}
.hero--mid { height: 420px; }
.hero--short { height: 300px; }
.hero__media {
position: absolute;
inset: 0;
width: 100%;
height: 100%;
object-fit: cover;
}
/* Scrim strengths are set by measurement, not by eye.
Sampling the rendered pixels behind each piece of hero text — the only way to
check contrast against a photograph — the handoff's values put seven elements
under WCAG AA: the homepage title at 2.50:1 where it needs 3, the badge at
2.30:1 and the breadcrumb at 2.26:1 where they need 4.5, and the nav, phone
and place line hovering just under at 4.1–4.4:1.
The failures were all against the brightest parts of the photograph — an
autumn sky behind the title, a pale wall behind the breadcrumb. Raising the
top and middle stops fixes those without flattening the image: the bottom
stop, which was already carrying the lead paragraph at 5:1, is unchanged.
Re-check with the pixel sampler after changing a hero photograph; a brighter
one can put these back under the line. */
.hero__scrim {
position: absolute;
inset: 0;
background: linear-gradient(180deg,
rgba(35, 32, 28, 0.72) 0%,
rgba(35, 32, 28, 0.34) 38%,
rgba(35, 32, 28, 0.88) 100%);
}
.hero--mid .hero__scrim {
background: linear-gradient(180deg,
rgba(35, 32, 28, 0.74) 0%,
/* The breadcrumb sits in this band; at 0.44 it measured 4.35:1 against
12px text needing 4.5. */
rgba(35, 32, 28, 0.52) 42%,
rgba(35, 32, 28, 0.88) 100%);
}
.hero--short .hero__scrim {
background: linear-gradient(180deg,
rgba(35, 32, 28, 0.76) 0%,
rgba(35, 32, 28, 0.46) 45%,
rgba(35, 32, 28, 0.87) 100%);
}
/* Výlety (6a) sits between --short and --mid; pair it with --short so the
responsive steps below carry over. */
.hero--trips { height: 320px; }
.hero--trips .hero__scrim {
background: linear-gradient(180deg,
rgba(35, 32, 28, 0.7) 0%,
rgba(35, 32, 28, 0.32) 45%,
rgba(35, 32, 28, 0.86) 100%);
}
.hero--trips .hero__title--sm { font-size: 56px; }
.hero__content {
position: absolute;
left: var(--gutter);
right: var(--gutter);
bottom: 40px;
}
.hero--short .hero__content { bottom: 34px; }
.hero__badge {
display: inline-flex;
align-items: center;
gap: 8px;
/* Dark, not light. The handoff tinted this pill with cream at 16%, which
lightens the very patch of photograph the cream text then has to stand out
against — measured 2.30:1 where 13px text needs 4.5. Tinting the other way
keeps the pill and gives the text something to sit on. */
background: rgba(35, 32, 28, 0.55);
color: var(--cream);
font-size: 13px;
font-weight: 600;
padding: 8px 15px;
border-radius: var(--radius-pill);
margin-bottom: 22px;
}
.hero__title {
font-family: var(--display);
font-weight: 400;
font-size: 82px;
line-height: 1.02;
letter-spacing: -0.025em;
color: var(--cream);
max-width: 20ch;
margin-bottom: 22px;
text-wrap: pretty;
}
.hero__title--md { font-size: 66px; max-width: none; margin-bottom: 16px; }
.hero__title--sm { font-size: 54px; max-width: none; margin-bottom: 12px; }
.hero__lead {
font-size: 17px;
line-height: 1.7;
color: var(--on-photo);
max-width: 58ch;
}
.hero__title--md + .hero__lead { max-width: 60ch; }
.hero__title--sm + .hero__lead { font-size: 16px; line-height: 1.6; max-width: 66ch; }
.breadcrumb {
display: flex;
align-items: center;
gap: 8px;
font-size: 12px;
font-weight: 600;
letter-spacing: 0.14em;
text-transform: uppercase;
/* Full cream, not `--on-photo-soft` (cream at 60%) and not `--on-photo`
(85%). Both were under the 4.5:1 that 12px text needs against the mid-tones
in these photographs — 2.26:1 and 4.35:1 measured. The shadow is belt and
braces; contrast maths gives shadows no credit, so the colour has to carry
it on its own. Darkening the scrim instead would have dulled the
photograph for the sake of one line of small caps. */
color: var(--cream);
text-shadow: 0 1px 3px rgba(35, 32, 28, 0.65);
margin-bottom: 16px;
}
.breadcrumb a:hover { color: var(--cream); }
.breadcrumb [aria-current] { color: var(--cream); }
/* --------------------------------------------------------------------------
7. Availability bar (homepage)
-------------------------------------------------------------------------- */
/* 34 below, the page's rhythm: the stat cards carry no space of their own, so
the bar has to open the seam itself. */
.availability { padding: 32px var(--gutter) 34px; }
.availability__bar {
background: var(--ink);
border-radius: var(--radius-block);
padding: 26px 30px;
display: flex;
align-items: flex-end;
gap: 20px;
color-scheme: dark;
}
.field { flex: 1; min-width: 0; position: relative; }
.field__label {
display: block;
font-size: 12px;
font-weight: 600;
letter-spacing: 0.1em;
text-transform: uppercase;
color: rgba(255, 253, 248, 0.5);
margin-bottom: 8px;
}
.field__control {
width: 100%;
background: transparent;
border: 0;
padding: 0;
font-family: var(--ui);
font-size: 17px;
font-weight: 600;
color: var(--cream);
text-align: left;
cursor: pointer;
}
.field__control::-webkit-calendar-picker-indicator { filter: invert(1); opacity: 0.5; cursor: pointer; }
select.field__control {
appearance: none;
-webkit-appearance: none;
padding-right: 18px;
background-image: linear-gradient(45deg, transparent 50%, rgba(255,253,248,0.6) 50%),
linear-gradient(135deg, rgba(255,253,248,0.6) 50%, transparent 50%);
background-position: right 6px center, right 1px center;
background-size: 5px 5px, 5px 5px;
background-repeat: no-repeat;
}
select.field__control option { color: var(--ink); background: var(--cream); }
/* The date field is two dates wide; the rest of the bar can be narrower. */
.field--wide { flex: 1.6; }
/* Nothing chosen yet reads as a prompt, not as an answer. */
.field__control--picker { color: rgba(255, 253, 248, 0.55); }
[data-daterange].is-set .field__control--picker { color: var(--cream); }
/* Date-range calendar
Replaces two `` boxes. They render as "dd. mm. rrrr" and
take the date only in the order the browser has settled on — guests could not
get a date in, so the form went off empty and the booking widget opened on
its own default week. */
.daterange { position: absolute; z-index: 20; top: calc(100% + 14px); left: -14px; }
.daterange[hidden] { display: none; }
.daterange__panel {
position: relative;
background: var(--cream);
border-radius: 18px;
padding: 18px 20px 16px;
box-shadow: 0 24px 50px -24px rgba(28, 32, 24, 0.55);
color-scheme: light;
}
/* The arrows sit over the two captions, which centre themselves. */
.daterange__head {
position: absolute;
top: 16px;
left: 20px;
right: 20px;
display: flex;
justify-content: space-between;
pointer-events: none;
}
.daterange__nav {
pointer-events: auto;
width: 30px;
height: 30px;
border: 1px solid var(--line);
border-radius: 50%;
background: var(--cream);
color: var(--ink);
font-size: 17px;
line-height: 1;
cursor: pointer;
}
.daterange__nav:hover:not(:disabled) { border-color: var(--green); color: var(--green); }
.daterange__nav:disabled { opacity: 0.3; cursor: default; }
.daterange__months { display: flex; gap: 26px; }
.daterange__month { min-width: 224px; }
.daterange__caption {
margin-bottom: 12px;
font-family: var(--display);
font-size: 17px;
color: var(--ink);
text-align: center;
}
.daterange__grid {
display: grid;
grid-template-columns: repeat(7, 1fr);
gap: 2px;
}
.daterange__dow {
padding-bottom: 4px;
color: var(--light-muted);
font-size: 11px;
text-align: center;
text-transform: uppercase;
letter-spacing: 0.04em;
}
.daterange__day {
aspect-ratio: 1;
border: 0;
border-radius: 8px;
background: transparent;
color: var(--ink);
font-family: var(--ui);
font-size: 13px;
cursor: pointer;
}
.daterange__day:hover:not(:disabled) { background: var(--sand); }
.daterange__day.is-past { color: var(--line-strong); cursor: default; }
.daterange__day.is-in { background: var(--green-tint); border-radius: 0; }
.daterange__day.is-start,
.daterange__day.is-end {
background: var(--green);
color: var(--cream);
font-weight: 600;
}
.daterange__day.is-start { border-radius: 8px 0 0 8px; }
.daterange__day.is-end { border-radius: 0 8px 8px 0; }
.daterange__day.is-start.is-end { border-radius: 8px; }
.daterange__day:focus-visible { outline: 2px solid var(--green); outline-offset: -2px; }
.daterange__foot {
display: flex;
align-items: center;
gap: 12px;
margin-top: 14px;
padding-top: 12px;
border-top: 1px solid var(--line);
}
.daterange__note { flex: 1; font-size: 13px; color: var(--muted); }
/* Occupancy popover */
.occupancy { position: absolute; z-index: 20; top: calc(100% + 14px); left: -14px; min-width: 268px; }
.occupancy[hidden] { display: none; }
.occupancy__panel {
background: var(--cream);
border-radius: 18px;
padding: 18px 20px;
box-shadow: 0 24px 50px -24px rgba(28, 32, 24, 0.55);
display: flex;
flex-direction: column;
gap: 14px;
color-scheme: light;
}
.occupancy__row {
display: flex;
align-items: center;
justify-content: space-between;
gap: 16px;
}
.occupancy__name { font-size: 15px; font-weight: 600; color: var(--ink); }
.occupancy__note { font-size: 12px; color: var(--muted); }
.stepper { display: flex; align-items: center; gap: 12px; }
.stepper__btn {
width: 32px; height: 32px;
border: 1px solid var(--line-strong);
background: var(--cream);
border-radius: 50%;
font-size: 17px;
line-height: 1;
color: var(--ink);
cursor: pointer;
transition: background 150ms ease;
}
.stepper__btn:hover:not(:disabled) { background: var(--sand); }
.stepper__btn:disabled { opacity: 0.35; cursor: default; }
.stepper__value { font-size: 15px; font-weight: 700; color: var(--ink); min-width: 1.5ch; text-align: center; }
/* --------------------------------------------------------------------------
8. Stat strip
-------------------------------------------------------------------------- */
.stats {
padding: 0 var(--gutter);
display: flex;
gap: 20px;
}
.stat {
flex: 1;
background: var(--sand);
border-radius: var(--radius-media);
padding: 26px 28px;
}
.stat__value {
font-family: var(--display);
font-size: 34px;
line-height: 1;
color: var(--ink);
}
.stat__label {
font-size: 14px;
color: var(--body);
margin-top: 8px;
}
/* For a figure that is a word rather than a number. Only the type size moves;
the card keeps its padding, its radius and its place in the row.
`anywhere` rather than `break-word` because only `anywhere` counts toward
the card's minimum width. On a phone the cards are half-width, and a word
this long claimed a whole row for itself and pushed the fourth card onto a
third — 2 + 1 + 1 instead of 2 + 2. It breaks after the hyphen, which is a
real break opportunity and is what the browser reaches for first. */
.stat__value--sm { font-size: 26px; overflow-wrap: anywhere; }
/* Compact 6-up variant (Dům s 8 ložnicemi) */
.stats--six {
display: grid;
grid-template-columns: repeat(6, 1fr);
gap: 14px;
padding: 30px var(--gutter) 0;
}
.stats--six .stat { border-radius: 18px; padding: 20px 22px; }
.stats--six .stat__value { font-size: 28px; }
.stats--six .stat__label { font-size: 13px; margin-top: 6px; }
.stat--green { background: var(--green-tint); }
.stat--green .stat__value { color: var(--green-ink); }
.stat--green .stat__label { color: var(--green); }
/* --------------------------------------------------------------------------
9. Feature cards
-------------------------------------------------------------------------- */
.features {
padding: 20px var(--gutter) 40px;
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 20px;
}
.feature {
background: var(--sand);
border-radius: var(--radius-block);
overflow: hidden;
}
.feature--green { background: var(--sand-green); }
.feature--warm { background: var(--sand-warm); }
.feature__media {
width: 100%;
height: 230px;
object-fit: cover;
display: block;
}
.feature__body { padding: 26px 28px 28px; }
.feature__title {
font-family: var(--display);
font-weight: 400;
font-size: 25px;
color: var(--ink);
margin-bottom: 10px;
}
.feature__text { font-size: 15px; line-height: 1.6; color: var(--body); }
/* --------------------------------------------------------------------------
10. Photo banner
-------------------------------------------------------------------------- */
.banner {
position: relative;
border-radius: var(--radius-banner);
overflow: hidden;
min-height: 420px;
}
.banner--short { min-height: 300px; }
/* The banner opens the space above itself and closes none below — the band
that follows brings its own. It used to be the other way round, which glued
it to the panel above it on the home page and left a doubled gap below. */
.banner--inset { margin: 34px var(--gutter) 0; }
.banner__media {
position: absolute;
inset: 0;
width: 100%;
height: 100%;
object-fit: cover;
}
.banner__scrim {
position: absolute;
inset: 0;
background: linear-gradient(90deg,
rgba(35, 32, 28, 0.92) 0%,
rgba(35, 32, 28, 0.55) 60%,
rgba(35, 32, 28, 0.2) 100%);
}
.banner--short .banner__scrim {
background: linear-gradient(90deg,
rgba(35, 32, 28, 0.92) 0%,
rgba(35, 32, 28, 0.5) 65%,
rgba(35, 32, 28, 0.2) 100%);
}
.banner__content {
position: relative;
padding: 52px 46px;
max-width: 620px;
}
.banner--short .banner__content { padding: 46px; }
.banner__title {
font-family: var(--display);
font-weight: 400;
font-size: 48px;
line-height: 1.06;
color: var(--cream);
margin: 18px 0;
}
.banner--short .banner__title { font-size: 42px; margin: 16px 0; }
.banner__text {
font-size: 16px;
line-height: 1.7;
color: rgba(255, 253, 248, 0.82);
margin-bottom: 28px;
}
.banner--short .banner__text { margin-bottom: 26px; }
.banner__actions { display: flex; align-items: center; gap: 16px; flex-wrap: wrap; }
.banner__actions--inline { gap: 22px; }
/* Quieter than the button beside it: this is the way to read about the house,
not the way to book it. */
.banner__more {
color: var(--on-photo);
font-size: 15px;
font-weight: 600;
text-decoration: underline;
text-decoration-color: rgba(255, 253, 248, 0.4);
text-underline-offset: 4px;
}
.banner__more:hover { color: var(--cream); text-decoration-color: currentColor; }
/* --------------------------------------------------------------------------
11. Family quote
-------------------------------------------------------------------------- */
.quote {
padding: 0 var(--gutter) 44px;
display: grid;
grid-template-columns: 260px 1fr;
gap: 34px;
align-items: center;
}
.quote__photo {
width: 100%;
height: 220px;
object-fit: cover;
display: block;
border-radius: var(--radius-media);
}
.quote__eyebrow { margin-bottom: 16px; }
.quote__text {
font-family: var(--display);
font-weight: 400;
font-size: 28px;
line-height: 1.4;
color: var(--ink);
margin-bottom: 16px;
text-wrap: pretty;
}
.quote__by { font-size: 15px; line-height: 1.6; color: var(--body); }
/* --------------------------------------------------------------------------
12. Footer
-------------------------------------------------------------------------- */
/* Two children now — the written column and the banner — so this row no longer
wraps four blocks against each other. It still wraps, for the phone, where
the banner drops under the text. */
.site-footer {
background: var(--sand);
padding: 32px var(--gutter);
display: flex;
align-items: center;
justify-content: space-between;
gap: 20px 32px;
flex-wrap: wrap;
}
.site-footer__meta { font-size: 14px; color: var(--muted); }
.site-footer__meta a:hover { color: var(--ink); }
/* The four ways to reach us, on the line under the address. They wrap on a
phone, where four monospaced chips do not fit across 350px. */
.site-footer__contacts {
display: flex;
flex-wrap: wrap;
gap: 8px;
}
.site-footer__links {
display: flex;
gap: 18px;
font-size: 14px;
color: var(--muted);
flex-wrap: wrap;
}
.site-footer__links a:hover { color: var(--ink); }
/* Everything we write on the left, stacked; the partner's banner on the right.
All four blocks used to sit in one wrapping row, which put the banner on a
line of its own between the links and the copyright — inside our own text
rather than beside it. */
.site-footer__text {
display: flex;
flex-direction: column;
gap: 12px;
min-width: 0;
}
.site-footer__partners { flex: none; }
.site-footer__partners img {
display: block;
max-width: 100%;
height: auto;
border-radius: 6px;
}
/* --------------------------------------------------------------------------
13. Apartments (5a)
-------------------------------------------------------------------------- */
.filters {
padding: 28px var(--gutter) 0;
display: flex;
align-items: center;
gap: 10px;
flex-wrap: wrap;
}
.filters__label {
font-size: 12px;
font-weight: 700;
letter-spacing: 0.1em;
text-transform: uppercase;
color: var(--light-muted);
margin-right: 6px;
}
.filter {
font-size: 14px;
background: var(--sand);
color: var(--body-strong);
border: 0;
padding: 10px 16px;
border-radius: var(--radius-pill);
cursor: pointer;
transition: background 150ms ease, color 150ms ease;
}
.filter:hover { background: #e8e2d4; }
.filter.is-active {
background: var(--ink);
color: var(--cream);
font-weight: 600;
}
.filters__aside { margin-left: auto; font-size: 14px; }
.apartments {
padding: 34px var(--gutter) 10px;
display: flex;
flex-direction: column;
gap: 34px;
}
.apartment {
display: grid;
grid-template-columns: 620px 1fr;
gap: 30px;
align-items: start;
}
.apartment[hidden] { display: none; }
.apartment.is-reversed { grid-template-columns: 1fr 620px; }
.apartment.is-reversed .apartment__gallery { order: 2; }
.apartment__gallery {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 10px;
}
.apartment__gallery img {
width: 100%;
object-fit: cover;
display: block;
border-radius: 16px;
height: 150px;
}
.apartment__gallery > :first-child img,
.apartment__gallery > img:first-child {
grid-column: span 2;
height: 320px;
border-radius: var(--radius-media);
}
/* Three thumbnails. The rest stay in the markup so the viewer has the whole
set; they are never displayed and, being `loading="lazy"`, never fetched. */
.apartment__gallery > :nth-child(n + 4) { display: none; }
.apartment__shot {
position: relative;
display: block;
padding: 0;
border: 0;
background: none;
cursor: zoom-in;
border-radius: 16px;
overflow: hidden;
}
.apartment__shot:first-child { grid-column: span 2; border-radius: var(--radius-media); }
.apartment__shot img { transition: transform 250ms ease; }
.apartment__shot:hover img { transform: scale(1.03); }
.apartment__shot:focus-visible { outline: 2px solid var(--green); outline-offset: 3px; }
/* "+7" on the third, which opens the lot. */
.apartment__shot--more::after {
content: attr(data-more);
position: absolute;
inset: 0;
display: flex;
align-items: center;
justify-content: center;
background: rgba(28, 32, 24, 0.55);
color: var(--cream);
font-family: var(--display);
font-size: 27px;
letter-spacing: 0.02em;
transition: background 200ms ease;
}
.apartment__shot--more:hover::after { background: rgba(28, 32, 24, 0.42); }
/* "Apt. č. 1 · Superior s balkonem" is how a guest tells the four apart, so it
is set larger than the site's other eyebrows and given back some of the
letter-spacing that made it hard to read at 12px. */
.apartment__eyebrow {
margin-bottom: 12px;
font-size: 15px;
letter-spacing: 0.08em;
}
.apartment__eyebrow-row {
display: flex;
align-items: center;
gap: 10px;
margin-bottom: 12px;
flex-wrap: wrap;
}
/* The headline is a description, not the apartment's name — the label above it
is. It was the larger of the two, which had them the wrong way round. */
.apartment__title {
font-family: var(--display);
font-weight: 400;
font-size: 29px;
line-height: 1.12;
letter-spacing: -0.01em;
color: var(--ink);
margin-bottom: 16px;
}
.apartment__tags {
display: flex;
gap: 8px;
flex-wrap: wrap;
margin-bottom: 18px;
}
.apartment__text {
font-size: 15px;
line-height: 1.7;
color: var(--body);
margin-bottom: 18px;
}
.specs {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 10px 22px;
font-size: 14px;
line-height: 1.5;
color: var(--body);
margin-bottom: 22px;
}
.specs strong { color: var(--ink); font-weight: 600; }
.price-row {
display: flex;
align-items: center;
gap: 18px;
padding-top: 20px;
border-top: 1px solid var(--line);
flex-wrap: wrap;
}
.price__value {
font-family: var(--display);
font-size: 30px;
line-height: 1;
color: var(--ink);
}
.price__note { font-size: 13px; color: var(--muted); margin-top: 5px; }
.price-row .btn { margin-left: auto; }
.divider { height: 1px; background: var(--line); }
/* Shared info panel */
.panel {
background: var(--sand);
border-radius: var(--radius-banner);
padding: 32px 34px;
}
.panel--outline {
background: transparent;
border: 1px solid var(--line-soft);
border-radius: var(--radius-block);
padding: 26px 30px;
}
/* --------------------------------------------------------------------------
13b. What every apartment has — four cards of chips
--------------------------------------------------------------------------
This replaced one cream panel holding eleven paragraphs. The complaint was
that it was too much text to take in, and it was: an inventory set as prose
has to be read from the start to find out whether it mentions a dishwasher.
Chips make the same list findable at a glance, and four cards say where one
subject stops and the next begins without a rule between them. Nothing here
invents a colour or a shape — the card is `.tile`'s, the icon well is
`.tile__icon`'s, the chip is `.pill`'s. */
.facts__eyebrow { display: block; margin-block-end: 18px; }
/* Two columns, and the two cards that do not fit a column take both.
The four hold very different amounts — twenty chips, eleven, seven and six
rules — so a plain 2×2 left 125px of nothing under the short ones. Full
width, the long card's chips flow into three rows instead of five and the
rules lay out three across instead of one; what is left is two middling
cards side by side, which is the one pairing that comes out level. */
.facts__grid {
display: grid;
grid-template-columns: repeat(2, 1fr);
gap: 20px;
}
.fact-card--wide { grid-column: 1 / -1; }
/* Three terms across rather than one. Six rules stacked in a full-width card
would be a column of text with two thirds of the card beside it empty. */
.fact-card--wide .fact-card__facts { grid-template-columns: repeat(3, auto 1fr); }
/* Cards in a row share a height — left to themselves the two rows ended on
four different baselines and the section looked unfinished. The column
layout is what lets the note sit on the bottom edge rather than leaving the
slack under it. */
.fact-card {
padding: 24px 26px 26px;
border: 1px solid var(--line-soft);
border-radius: var(--radius-block);
background: var(--cream);
display: flex;
flex-direction: column;
}
.fact-card__head {
display: flex;
align-items: center;
gap: 14px;
margin-block-end: 16px;
}
.fact-card__icon {
flex: none;
width: 44px;
height: 44px;
display: grid;
place-items: center;
border-radius: 13px;
background: var(--green-tint);
color: var(--green-dark);
}
.fact-card__icon .icon { width: 24px; height: 24px; display: block; }
.fact-card__title {
font-family: var(--display);
font-weight: 400;
font-size: 22px;
line-height: 1.15;
color: var(--ink);
}
.fact-card__chips {
display: flex;
flex-wrap: wrap;
gap: 8px;
margin: 0;
padding: 0;
list-style: none;
}
/* `.pill` is a span elsewhere and an
here; the marker has to go or the
chips sit in an indented column with dots beside them. */
.fact-card__chips .pill { list-style: none; }
/* A chip that goes somewhere, told apart by its outline and its arrow rather
than by a colour — the row would otherwise read as two kinds of fact. */
.fact-card__links { display: flex; flex-wrap: wrap; gap: 8px; margin-block-start: 12px; }
.pill--link {
background: transparent;
border: 1px solid var(--green);
color: var(--green-ink);
text-decoration: none;
transition: background-color 150ms ease;
}
.pill--link:hover { background: var(--green-tint); }
/* Rules, not things: each is an answer to a question, so it is set as term and
value. Two columns of term–value inside the card, aligned on the colon. */
.fact-card__facts {
display: grid;
grid-template-columns: auto 1fr;
gap: 8px 16px;
margin: 0;
font-size: 14px;
line-height: 1.5;
}
.fact-card__facts dt { font-weight: 700; color: var(--ink); }
.fact-card__facts dd { margin: 0; color: var(--body); }
/* The note follows the chips rather than being pushed to the bottom edge.
Pinned down there it left a 200px hole in the middle of the shorter card,
which reads worse than the same slack does under the last line. */
.fact-card__note {
margin-block-start: 14px;
padding-block-start: 12px;
border-top: 1px solid var(--line-soft);
font-size: 13px;
line-height: 1.6;
color: var(--muted);
}
.facts__note {
margin-block-start: 20px;
font-size: 13px;
color: var(--muted);
}
/* --------------------------------------------------------------------------
14. Whole house (5b)
-------------------------------------------------------------------------- */
.mosaic {
padding: 24px var(--gutter) 0;
display: grid;
grid-template-columns: 2fr 1fr 1fr;
grid-template-rows: 170px 170px;
gap: 12px;
}
.mosaic img {
width: 100%;
height: 100%;
object-fit: cover;
display: block;
border-radius: 16px;
}
.mosaic > :first-child img,
.mosaic > img:first-child { grid-row: span 2; border-radius: var(--radius-media); }
/* A row of interiors under the four apartment cards. Same mechanics as the
mosaic — buttons into the lightbox, a "+" on the last — but every tile the
same size, because none of the thirty-eight is the lead. */
.filmstrip {
padding: 22px var(--gutter) 0;
display: grid;
grid-template-columns: repeat(6, 1fr);
gap: 12px;
}
.filmstrip img {
width: 100%;
/* Tall enough to read as a room rather than a stamp — at 132 the strip was
a row of markers under the cards instead of a look inside. */
height: 150px;
object-fit: cover;
display: block;
border-radius: 16px;
}
/* Each tile is a button that opens the lightbox, so it has to be stripped of
what a browser gives a button and given back what the tile had. */
.mosaic__shot,
.filmstrip__shot {
position: relative;
display: block;
padding: 0;
border: 0;
background: none;
cursor: zoom-in;
border-radius: 16px;
overflow: hidden;
}
.mosaic__shot:first-child { grid-row: span 2; border-radius: var(--radius-media); }
.mosaic__shot img,
.filmstrip__shot img { transition: transform 250ms ease; }
.mosaic__shot:hover img,
.filmstrip__shot:hover img { transform: scale(1.03); }
.mosaic__shot:focus-visible,
.filmstrip__shot:focus-visible { outline: 2px solid var(--green); outline-offset: 3px; }
/* "+18" on the last tile, which opens the lot. */
.mosaic__shot--more::after,
.filmstrip__shot--more::after {
content: attr(data-more);
position: absolute;
inset: 0;
display: flex;
align-items: center;
justify-content: center;
background: rgba(28, 32, 24, 0.55);
color: var(--cream);
font-family: var(--display);
font-size: 27px;
letter-spacing: 0.02em;
transition: background 200ms ease;
}
.mosaic__shot--more:hover::after,
.filmstrip__shot--more:hover::after { background: rgba(28, 32, 24, 0.42); }
/* Smaller tiles than the mosaic's, so the "+" is set to match them. */
.filmstrip__shot--more::after { font-size: 23px; }
@media (prefers-reduced-motion: reduce) {
.mosaic__shot img,
.filmstrip__shot img,
.mosaic__shot--more::after,
.filmstrip__shot--more::after { transition: none; }
.mosaic__shot:hover img,
.filmstrip__shot:hover img { transform: none; }
}
@media (max-width: 1023px) {
.filmstrip { grid-template-columns: repeat(3, 1fr); }
}
@media (max-width: 640px) {
.filmstrip { grid-template-columns: repeat(2, 1fr); gap: 10px; }
.filmstrip img { height: 116px; }
}
.two-col {
padding: 34px var(--gutter) 0;
display: grid;
grid-template-columns: 1fr 1fr;
gap: 30px;
}
.col-title {
font-family: var(--display);
font-weight: 400;
font-size: 32px;
letter-spacing: -0.02em;
color: var(--ink);
margin-bottom: 16px;
}
.list-plain {
display: flex;
flex-direction: column;
gap: 12px;
font-size: 15px;
line-height: 1.6;
color: var(--body);
}
.list-plain strong { color: var(--ink); font-weight: 600; }
.pricing__head {
display: flex;
align-items: baseline;
justify-content: space-between;
gap: 16px;
margin-bottom: 20px;
flex-wrap: wrap;
}
.pricing__title {
font-family: var(--display);
font-weight: 400;
font-size: 28px;
color: var(--ink);
}
.pricing__meta { font-size: 13px; color: var(--muted); }
.pricing__grid {
display: grid;
grid-template-columns: repeat(6, 1fr);
gap: 10px;
}
.tier {
background: var(--cream);
border-radius: 14px;
padding: 14px 16px;
}
.tier__range {
font-size: 12px;
font-weight: 700;
letter-spacing: 0.06em;
text-transform: uppercase;
color: var(--light-muted);
}
.tier__price {
font-size: 17px;
font-weight: 700;
color: var(--ink);
margin-top: 5px;
}
.tier--full { background: var(--green-dark); }
.tier--full .tier__range { color: rgba(255, 253, 248, 0.6); }
.tier--full .tier__price { color: var(--cream); }
.pricing__note { margin-top: 16px; font-size: 13px; color: var(--muted); }
/* One price list per apartment, in the tier grid the whole house uses. The
grid there is a fixed six columns; these lists run from three occupancies to
seven, so they fit as many as the width allows. */
.pricing__grid--auto { grid-template-columns: repeat(auto-fit, minmax(128px, 1fr)); }
/* Three occupancies, not seven.
*
* Stretched to fill the row the way the others are, the smallest apartment's
* three prices sat a third of a page apart — the same table drawn at a very
* different scale. Fixed columns from the left instead. Only the lists shorter
* than five get this; at six and seven the full width is what keeps them on
* one row, which is where they belong. */
.pricing__grid--left {
grid-template-columns: repeat(auto-fill, 176px);
justify-content: start;
}
/* Each apartment's rates sit at the end of its own block, spanning the two
columns the gallery and the details share. */
.apartment__rates {
grid-column: 1 / -1;
/* Last, whichever way round the block is. The reversed layout moves the
gallery with `order: 2`, which was harmless while the article had two
children; with a third at the default 0 the gallery landed *after* it, in
a row of its own, and the block grew by 500px. */
order: 3;
/* Pulled up against the apartment it prices.
*
* It sat 78px below the block — 30px of grid gap, then 26 of margin and 22
* of padding — which is more air than separates two apartments from each
* other, so the price list read as a section between them rather than as the
* end of one. The negative margin eats most of the row gap; what is left is
* the rule, close enough under the block to belong to it. */
margin-block-start: -14px;
padding-block-start: 16px;
border-block-start: 1px solid var(--line);
}
/* 2, not 12. The cells below carry 14px of padding inside them, so the label
stood 26px off its own table — further than the table's rows stand from each
other, which made it read as a heading over the page rather than over the
prices. */
.apartment__rates-title {
margin-block-end: 2px;
color: var(--light-muted);
font-size: 12px;
font-weight: 700;
letter-spacing: 0.08em;
text-transform: uppercase;
}
/* The 2027 increase, as a line of small print rather than a second table. */
.apartment__rates-note {
margin-block-start: 10px;
color: var(--muted);
font-size: 12px;
}
.cta-dark {
background: var(--green-dark);
border-radius: var(--radius-banner);
padding: 36px 40px;
display: flex;
align-items: center;
justify-content: space-between;
gap: 30px;
flex-wrap: wrap;
}
.cta-dark__title {
font-family: var(--display);
font-weight: 400;
font-size: 34px;
color: var(--cream);
margin-bottom: 10px;
}
/* No measure cap. The buttons wrap onto their own row anyway, so the 58ch
left 383px of the dark panel empty to the right of a sentence that had
nowhere else to go. Flush both edges, as the leads elsewhere. */
.cta-dark__text {
font-size: 15px;
line-height: 1.6;
color: rgba(255, 253, 248, 0.8);
text-align: justify;
}
.cta-dark__actions { display: flex; align-items: center; gap: 16px; flex-wrap: wrap; }
.cta-green {
background: var(--green-tint);
border-radius: var(--radius-block);
padding: 26px 30px;
display: flex;
align-items: center;
justify-content: space-between;
gap: 24px;
flex-wrap: wrap;
}
.cta-green__text {
font-size: 15px;
line-height: 1.6;
color: var(--green-ink);
max-width: 70ch;
}
.button-row { margin-top: 22px; display: flex; gap: 12px; flex-wrap: wrap; }
/* --------------------------------------------------------------------------
15. Booking page (5c)
-------------------------------------------------------------------------- */
.booking {
padding: 32px var(--gutter) 0;
display: grid;
grid-template-columns: 1fr 380px;
gap: 26px;
align-items: start;
}
/* Previo sends no height to the page — no postMessage, checked — so the frame
cannot follow its content and the number has to be set here. It was 2000px
against a widget whose first step ends, measured in place, at 614px beside
the sidebar and 726px once the layout stacks. That left the best part of
1400px of blank page between the end of the grey panel and whatever came
next.
Two heights, because the frame is narrower on a wide screen — the sidebar
takes 380px of it — and a narrower widget is a taller one.
Previo's cookie bar is `position: fixed` inside the frame, so it stays
reachable at any height. Later steps that run longer scroll inside the
frame, which is the price of a widget that will not say how tall it is. */
/* Rám a zpráva pod ním sdílejí jedno místo — proto obal a překryv, ne dva
prvky pod sebou. Kdyby zpráva stála nad rámem, stránka by při načtení
poskočila o její výšku. */
.booking__frame-wrap {
position: relative;
min-height: 680px;
}
/* Nad rámem, ne pod ním. Nenačtený iframe je neprůhledně bílý, takže zpráva
položená pod něj není vidět vůbec — a přesně to se stalo napoprvé. Skript
ji odstraní, jakmile rám ohlásí `load`. */
/* Text u horního okraje, ne uprostřed. Pole je vysoké 680px a začíná 407px
od vrchu stránky, takže na obrazovce notebooku při stoprocentním zvětšení
padl vystředěný text pod okraj — a host viděl jen prázdnou plochu, tedy
přesně to, co ta zpráva měla vysvětlit. */
.booking__loading {
position: absolute;
inset: 0;
z-index: 1;
display: grid;
place-items: start center;
padding-block-start: 40px;
margin: 0;
border-radius: var(--radius-media);
background: var(--sand);
color: var(--muted);
font-size: 15px;
}
.booking__frame {
display: block;
position: relative;
width: 100%;
height: 680px;
border: 0;
border-radius: var(--radius-media);
}
.calendar__head {
display: flex;
align-items: center;
gap: 14px;
margin-bottom: 14px;
flex-wrap: wrap;
}
.legend {
display: inline-flex;
align-items: center;
gap: 7px;
font-size: 13px;
color: var(--body);
}
.legend__swatch { width: 10px; height: 10px; border-radius: 3px; display: inline-block; }
.legend__swatch--free { background: var(--green); }
.legend__swatch--taken { background: var(--warm); }
.booking-summary {
background: var(--green-tint);
color: var(--green-ink);
border-radius: 14px;
padding: 12px 16px;
font-size: 14px;
margin-bottom: 14px;
}
.booking-summary[hidden] { display: none; }
.slot {
border: 1px solid var(--line-soft);
border-radius: var(--radius-block);
display: flex;
align-items: center;
justify-content: center;
text-align: center;
padding: 24px;
background: repeating-linear-gradient(135deg, #f6f3ec 0 14px, #f2eee4 14px 28px);
}
.slot--calendar { height: 520px; }
.slot--map { height: 320px; border-radius: var(--radius-block); overflow: hidden; }
.slot__label {
font-family: var(--mono);
font-size: 12px;
letter-spacing: 0.16em;
text-transform: uppercase;
color: var(--light-muted);
margin-bottom: 10px;
}
.slot__title {
font-size: 16px;
font-weight: 600;
color: var(--ink);
margin-bottom: 8px;
}
.slot__text { font-size: 14px; line-height: 1.6; color: var(--muted); max-width: 40ch; }
.side-stack { display: flex; flex-direction: column; gap: 14px; }
.side-card {
border: 1px solid var(--line-soft);
border-radius: var(--radius-media);
padding: 24px 26px;
}
.side-card--green {
background: var(--green-tint);
border: 0;
}
.side-card__title {
font-size: 16px;
font-weight: 700;
color: var(--ink);
margin-bottom: 10px;
}
.side-card--green .side-card__title { color: var(--green-dark); }
.side-card__text { font-size: 14px; line-height: 1.6; color: var(--body); }
.side-card__list {
display: flex;
flex-direction: column;
gap: 9px;
font-size: 14px;
line-height: 1.6;
color: #3f5c52;
}
.side-card__list strong { font-weight: 700; }
.pill-row { display: flex; gap: 7px; flex-wrap: wrap; margin-top: 12px; }
.pill {
font-size: 12px;
font-weight: 600;
background: var(--sand);
color: var(--body-strong);
padding: 7px 12px;
border-radius: var(--radius-pill);
}
.slots-head {
display: flex;
align-items: baseline;
justify-content: space-between;
gap: 16px;
margin-bottom: 16px;
flex-wrap: wrap;
}
.slots-head h2 {
font-family: var(--display);
font-weight: 400;
font-size: 26px;
color: var(--ink);
}
.date-list { display: flex; gap: 10px; flex-wrap: wrap; }
.date-card {
display: flex;
flex-direction: column;
gap: 3px;
background: var(--sand);
border-radius: 14px;
padding: 14px 18px;
transition: background 150ms ease;
}
.date-card:hover { background: #e8e2d4; }
.date-card__date { font-size: 15px; font-weight: 700; color: var(--ink); }
.date-card__meta { font-size: 13px; color: var(--muted); }
.split-cta {
padding: 26px var(--gutter) 44px;
display: flex;
align-items: center;
justify-content: space-between;
gap: 24px;
flex-wrap: wrap;
}
.split-cta__title {
font-family: var(--display);
font-weight: 400;
font-size: 30px;
line-height: 1.1;
color: var(--ink);
margin-bottom: 8px;
}
.split-cta__text {
font-size: 15px;
line-height: 1.6;
color: var(--body);
max-width: 62ch;
}
.split-cta__actions { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; }
/* --------------------------------------------------------------------------
16. Services (5d)
-------------------------------------------------------------------------- */
.services {
padding: 34px var(--gutter) 0;
display: grid;
grid-template-columns: 1fr 1fr;
gap: 20px;
}
.service {
background: var(--sand);
border-radius: var(--radius-block);
overflow: hidden;
display: grid;
grid-template-columns: 220px 1fr;
}
.service--green { background: var(--sand-green); }
.service img { width: 100%; height: 100%; object-fit: cover; display: block; }
.service__body { padding: 26px 28px; }
.service__title {
font-family: var(--display);
font-weight: 400;
font-size: 25px;
color: var(--ink);
margin-bottom: 10px;
}
.service__text {
font-size: 14px;
line-height: 1.6;
color: var(--body);
margin-bottom: 14px;
}
/* Seven services in a two-column grid leave the last one sitting beside an
empty half-row. It spans both columns instead, with the photograph widened
to keep the card's proportions rather than stretching only the text. */
.services > .service:last-child:nth-child(odd) {
grid-column: 1 / -1;
grid-template-columns: 420px 1fr;
}
/* The wider photograph makes the row taller than the text needs, so the text
is centred against it rather than stranded at the top. */
.services > .service:last-child:nth-child(odd) .service__body { align-self: center; }
/* --------------------------------------------------------------------------
16b. Wine list
-------------------------------------------------------------------------- */
.wines__heading {
font-family: var(--display);
font-weight: 400;
font-size: 30px;
color: var(--ink);
margin: 32px 0 18px;
}
.wines {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(230px, 1fr));
gap: 14px;
list-style: none;
padding: 0;
margin: 0;
}
.wine {
background: var(--sand);
border-radius: var(--radius-block);
padding: 20px 22px;
}
.wine__name {
font-family: var(--display);
font-weight: 400;
font-size: 21px;
color: var(--ink);
margin: 0 0 8px;
}
.wine__origin {
font-size: 14px;
line-height: 1.5;
color: var(--body);
margin: 0;
}
.wine__style {
font-family: var(--mono);
font-size: 12px;
letter-spacing: 0.02em;
color: var(--muted);
margin: 6px 0 0;
}
.wines__note {
font-family: var(--mono);
font-size: 13px;
color: var(--ink);
margin-top: 18px;
}
/* --------------------------------------------------------------------------
16c. Home page sections
Built from the design's own tokens and existing pieces — the hatched `.slot`,
the `.two-col` grid, the `.trip--flat` card, `.cta-green`. Nothing here
introduces a colour, a face or a radius the rest of the site does not use.
-------------------------------------------------------------------------- */
/* One way on from the hero, beside the rating. The primary call to action is
the booking bar immediately below the photograph, not a button up here. */
.hero__actions {
display: flex;
align-items: center;
gap: 22px;
margin-block-start: 26px;
flex-wrap: wrap;
}
.hero__trust {
display: inline-flex;
align-items: center;
gap: 7px;
color: var(--on-photo);
font-size: 15px;
font-weight: 600;
text-decoration: underline;
text-decoration-color: rgba(255, 253, 248, 0.4);
text-underline-offset: 4px;
}
.hero__trust:hover { color: var(--cream); text-decoration-color: currentColor; }
.hero__stars { color: #f0c14b; font-size: 17px; }
/* Section heading and lead, for the sections that are not a panel. */
.section__title {
padding-inline: var(--gutter);
font-family: var(--display);
font-weight: 400;
font-size: 34px;
line-height: 1.1;
letter-spacing: -0.01em;
color: var(--ink);
}
/* Across the whole card, flush on both edges.
These leads used to stop at 68ch, which on a wide screen left the right half
of the card empty and made the paragraph look like a stray column. They now
run the full width and are justified, so both edges line up with the heading
and the pictures below.
Words are not broken. `hyphens: auto` was set on all seven justified rules
and is the usual answer to the gaps justification tears open; it came off
because the owner would rather have wide spaces than a hyphen mid-word.
That is a real cost and it was measured, not guessed. The widest gap in a
paragraph, against a normal space in the same paragraph:
390px this section 1.7× → 5.4× (10.8px → 22.7px, space is 4.2px)
#location 1.6× → 3.6×
1440px #service 1.9× → 3.2× (6.6px → 12.9px)
Above about 3× the eye starts to see the gaps line up down the page. On a
phone that is one line in a paragraph, not every line, which is why this is
a trade and not a mistake. If it ever reads as too loose, the fix is to
justify only where the column is wide enough — left-align below 700px — and
not to bring the hyphens back. */
.section__text {
padding-inline: var(--gutter);
margin-block-start: 14px;
color: var(--body);
font-size: 16px;
line-height: 1.7;
text-align: justify;
}
.section__subtitle {
padding-inline: var(--gutter);
margin-block-start: 28px;
color: var(--light-muted);
font-size: 12px;
font-weight: 700;
letter-spacing: 0.1em;
text-transform: uppercase;
}
.section__more { padding: 22px var(--gutter) 0; }
/* A heading, some words and a picture beside them — four sections share it. */
.story {
padding-inline: var(--gutter);
display: grid;
grid-template-columns: 1fr 1fr;
gap: 34px;
align-items: center;
}
.story--reversed .story__media { order: -1; }
.story__title {
font-family: var(--display);
font-weight: 400;
font-size: 32px;
line-height: 1.12;
letter-spacing: -0.01em;
color: var(--ink);
margin-block-end: 14px;
}
/* Justified like `.section__text`, and for the same reason — the farm and the
family paragraphs are the same kind of prose as the ones above and below
them, and only these two ran ragged. The column is 493px at 1440, some 55
characters a line, which is wide enough to justify without tearing. */
.story__text {
color: var(--body);
font-size: 16px;
line-height: 1.7;
text-align: justify;
}
.story__cta { margin-block-start: 20px; }
/* The family's words, closing the paragraph they belong to. Set apart by a
rule and the display face rather than by a box. */
/* Both ends, because only setting the start left the browser's own 1em on the
bottom — and the quote is the last thing in the section, so that margin fell
into the seam below and made it 50px against the page's 34. */
.story__quote {
margin-block: 22px 0;
padding-inline-start: 20px;
border-inline-start: 2px solid var(--sage);
}
.story__quote blockquote {
font-family: var(--display);
font-size: 20px;
line-height: 1.35;
color: var(--ink);
}
.story__quote figcaption {
margin-block-start: 10px;
color: var(--muted);
font-size: 14px;
}
/* The picture, or the space it will occupy. */
.shot {
width: 100%;
display: block;
border-radius: var(--radius-media);
object-fit: cover;
}
.slot.shot {
color: var(--light-muted);
font-family: var(--mono);
font-size: 12px;
line-height: 1.5;
/* `.shot` sets `display: block` and is written after `.slot`, so at equal
specificity it won and the label sat in the top corner instead of the
middle. Naming both classes outranks it. */
display: flex;
align-items: center;
justify-content: center;
}
/* The shape the photograph will have, as a class rather than a style attribute.
`style-src 'self'` covers style attributes too, so the inline version was
discarded in production and the placeholders had no height at all. */
.shot--4x3 { aspect-ratio: 4 / 3; }
.shot--16x9 { aspect-ratio: 16 / 9; }
/* `.two-col` brings its own gutter; inside a band that would double it. */
.two-col--flush { padding-inline: var(--gutter); padding-block-start: 24px; }
/* Eight tiles, each with room for the icon or small photograph still to come. */
.tiles {
padding: 26px var(--gutter) 0;
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: 20px;
}
/* Six to a group reads better three-up than four-up, which would leave two
stranded on a second row. */
.tiles--three { grid-template-columns: repeat(3, 1fr); }
.tile {
padding: 22px 24px 24px;
border: 1px solid var(--line-soft);
border-radius: var(--radius-block);
background: var(--cream);
transition: border-color 150ms ease, box-shadow 150ms ease;
}
.tile:hover { border-color: var(--line-strong); }
/* A card that leads somewhere is the whole card. The arrow is the only thing
that marks it apart at rest — a different colour or border would break the
row into two kinds of tile. */
.tile--link { display: block; }
.tile--link:hover {
border-color: var(--green);
box-shadow: var(--shadow-card);
}
.tile--link:focus-visible { outline: 2px solid var(--green); outline-offset: 3px; }
.tile__go {
margin-inline-start: 7px;
color: var(--green);
transition: transform 150ms ease;
display: inline-block;
}
.tile--link:hover .tile__go { transform: translateX(3px); }
/* Buttons under a band already carrying the gutter. */
.button-row--band { padding: 22px var(--gutter) 0; }
@media (prefers-reduced-motion: reduce) {
.tile,
.tile__go { transition: none; }
.tile--link:hover .tile__go { transform: none; }
}
/* The icon sits in a tinted square rather than floating on the card, which
gives the eight tiles a common anchor point at the top left. The darkest
green of the palette, not the mid one: at 27px the drawing has to hold its
own beside a 20px heading, and the mid green went grey at that size. */
.tile__icon {
width: 52px;
height: 52px;
margin-block-end: 14px;
display: grid;
place-items: center;
border-radius: 15px;
background: var(--green-tint);
color: var(--green-dark);
}
.tile__icon .icon { width: 28px; height: 28px; display: block; }
.tile__title {
font-family: var(--display);
font-weight: 400;
font-size: 20px;
line-height: 1.2;
color: var(--ink);
margin-block-end: 8px;
}
.tile__text {
color: var(--body);
font-size: 14px;
line-height: 1.6;
}
/* Same voice as `.tile__text`, one fact a line. The marker is an en dash
rather than a disc: the lines start with a count ("3×"), and a bullet in
front of a number reads as a second number. */
.tile__list {
margin: 0;
padding: 0;
list-style: none;
color: var(--body);
font-size: 14px;
line-height: 1.6;
}
.tile__list li {
position: relative;
padding-inline-start: 14px;
}
.tile__list li + li { margin-block-start: 4px; }
.tile__list li::before {
content: "–";
position: absolute;
inset-inline-start: 0;
color: var(--muted);
}
/* The 3D tour, under the hero. Same click-to-load reasoning as the map. */
.tour__text {
max-width: 68ch;
margin-block-end: 18px;
color: var(--body);
font-size: 15px;
line-height: 1.7;
}
.tour__stage {
border-radius: var(--radius-media);
overflow: hidden;
background: var(--sand);
}
.tour__stage iframe,
.tour__stage .map-block__frame {
display: block;
width: 100%;
aspect-ratio: 16 / 9;
border: 0;
}
.tour__actions {
display: flex;
align-items: center;
gap: 16px;
margin-block-start: 16px;
flex-wrap: wrap;
}
.tour__note { color: var(--muted); font-size: 13px; }
/* The two paragraphs on the whole-house page that are prose rather than a
list: one under the figures, one after the outdoor list. Both run the width
of the page and are flush both sides, as the leads elsewhere. */
.house-intro,
.house-farm {
padding-inline: var(--gutter);
color: var(--body);
font-size: 16px;
line-height: 1.75;
text-align: justify;
}
/* The stat strip above is a solid block of six cards and carries no bottom
padding of its own, so at 4px the paragraph read as a caption stuck to it
rather than as the sentence the page opens with. */
.house-intro { margin-block: 44px 38px; }
.house-farm {
margin-block-start: 26px;
padding-block-start: 24px;
/* The rule ties it to the list it follows from rather than letting it float
between two sections. */
border-block-start: 1px solid var(--line-soft);
margin-inline: var(--gutter);
padding-inline: 0;
}
/* Intro sits in a panel; its own type rather than the panel's. */
.intro__title {
font-family: var(--display);
font-weight: 400;
font-size: 30px;
line-height: 1.15;
color: var(--ink);
margin-block-end: 14px;
}
/* Full width of the panel and flush both sides, as the section leads. */
.intro__text {
color: var(--body);
font-size: 16px;
line-height: 1.75;
text-align: justify;
}
/* Three guest reviews, in the card the trips already use. */
.review__stars {
color: #f0c14b;
font-size: 15px;
letter-spacing: 0.12em;
margin-block-end: 12px;
}
.review__text {
color: var(--body);
font-size: 15px;
line-height: 1.65;
margin-block-end: 14px;
}
.review__by {
margin-block-start: auto;
color: var(--ink);
font-size: 14px;
font-weight: 600;
}
.review__source { color: var(--muted); font-weight: 400; }
/* The closing call to action stacks rather than sitting in a row: it carries a
heading, a paragraph, a button and the contacts. */
.cta-green--stack {
display: block;
padding: 34px 36px 32px;
}
.cta-green__title {
font-family: var(--display);
font-weight: 400;
font-size: 32px;
line-height: 1.12;
color: var(--green-dark);
margin-block-end: 12px;
}
.cta-green--stack .cta-green__text { margin-block-end: 22px; }
.cta-green__contact {
margin-block-start: 16px;
color: var(--green-ink);
font-size: 15px;
}
.cta-green__contact a {
color: var(--green-dark);
text-decoration: underline;
text-underline-offset: 3px;
}
@media (max-width: 1023px) {
.tiles { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 767px) {
/* Still clear of the cards, but a phone has less height to spend on air. */
.house-intro { margin-block: 30px 28px; }
.story { grid-template-columns: 1fr; gap: 22px; }
/* Picture under the words on a phone, whichever way round it sits above. */
.story--reversed .story__media { order: 0; }
.story__title { font-size: 27px; }
.section__title { font-size: 27px; }
.tiles { grid-template-columns: 1fr; }
.two-col--flush { padding-block-start: 18px; }
.cta-green--stack { padding: 26px 22px 24px; }
.cta-green__title { font-size: 26px; }
.cta-green--stack .btn { width: 100%; text-align: center; }
}
/* --------------------------------------------------------------------------
17. Contact (5e)
-------------------------------------------------------------------------- */
.contact {
padding: 44px var(--gutter) 0;
display: grid;
grid-template-columns: 1fr 420px;
gap: 40px;
align-items: start;
}
.contact__title {
font-family: var(--display);
font-weight: 400;
font-size: 54px;
line-height: 1.02;
letter-spacing: -0.025em;
color: var(--ink);
margin-bottom: 18px;
}
.contact__lead {
font-size: 17px;
line-height: 1.7;
color: var(--body);
max-width: 56ch;
margin-bottom: 32px;
}
.contact__cards {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 20px;
margin-bottom: 32px;
}
.contact-card {
background: var(--sand);
border-radius: var(--radius-media);
padding: 24px 26px;
}
.contact-card__label {
font-size: 12px;
font-weight: 700;
letter-spacing: 0.14em;
text-transform: uppercase;
color: var(--light-muted);
margin-bottom: 10px;
}
.contact-card__value {
font-family: var(--mono);
font-size: 20px;
color: var(--ink);
overflow-wrap: anywhere;
}
.contact-card__value--sm { font-size: 18px; }
.contact-card__value--plain { font-family: var(--ui); font-size: 16px; line-height: 1.5; }
.contact-card__meta { font-size: 13px; color: var(--muted); margin-top: 8px; }
.contact-card__links {
display: flex;
flex-direction: column;
gap: 7px;
font-size: 16px;
color: var(--ink);
}
.contact-card__links a:hover { color: var(--green); }
.form-card {
border: 1px solid var(--line-soft);
border-radius: var(--radius-banner);
padding: 28px 30px;
display: flex;
flex-direction: column;
gap: 16px;
}
.form-card__title {
font-family: var(--display);
font-weight: 400;
font-size: 26px;
color: var(--ink);
margin-bottom: 6px;
}
.form-card__sub { font-size: 14px; line-height: 1.6; color: var(--muted); }
.form-label {
display: block;
font-size: 12px;
font-weight: 700;
letter-spacing: 0.06em;
text-transform: uppercase;
color: var(--light-muted);
margin-bottom: 7px;
}
.input {
width: 100%;
border: 1px solid var(--line-strong);
border-radius: 12px;
padding: 13px 15px;
font-family: var(--ui);
font-size: 15px;
color: var(--ink);
background: var(--cream);
transition: border-color 150ms ease;
}
.input::placeholder { color: var(--light-muted); }
.input:focus { border-color: var(--green); }
textarea.input { min-height: 84px; resize: vertical; }
.form-row { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.choice-row { display: flex; gap: 8px; flex-wrap: wrap; }
.choice input { position: absolute; opacity: 0; pointer-events: none; }
.choice span {
display: inline-block;
font-size: 14px;
color: var(--body-strong);
background: var(--sand);
padding: 10px 16px;
border-radius: var(--radius-pill);
cursor: pointer;
transition: background 150ms ease, color 150ms ease;
}
.choice input:checked + span {
background: var(--green);
color: var(--cream);
font-weight: 600;
}
.choice input:focus-visible + span { outline: 2px solid var(--green); outline-offset: 2px; }
.form-status {
font-size: 14px;
line-height: 1.6;
color: var(--green-ink);
background: var(--green-tint);
border-radius: 12px;
padding: 12px 14px;
}
.form-status[hidden] { display: none; }
.host {
margin-top: 20px;
display: grid;
grid-template-columns: 120px 1fr;
gap: 18px;
align-items: center;
}
.host img {
width: 100%;
height: 140px;
object-fit: cover;
display: block;
border-radius: 18px;
}
.host__name { font-size: 16px; font-weight: 700; color: var(--ink); margin-bottom: 6px; }
.host__text { font-size: 14px; line-height: 1.6; color: var(--body); }
/* 44 below, which is what `band--bottom` gives every other page above the
footer. At 78 the contact page ended on almost twice the air. */
.legal {
padding: 34px var(--gutter) 44px;
}
.legal__box {
background: var(--sand);
border-radius: var(--radius-media);
padding: 22px 26px;
font-size: 13px;
line-height: 1.7;
color: var(--muted);
}
/* --------------------------------------------------------------------------
18. Trips (Výlety, 6a)
-------------------------------------------------------------------------- */
.trips {
padding: 26px var(--gutter) 0;
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 20px;
}
.trip {
border: 1px solid var(--line-soft);
border-radius: var(--radius-block);
overflow: hidden;
display: flex;
flex-direction: column;
}
.trip__media {
height: 170px;
width: 100%;
object-fit: cover;
display: block;
}
/* Hatched slot for the trip photos that are still missing, as drawn in 6a. */
.trip__slot {
height: 170px;
background: repeating-linear-gradient(135deg, #f6f3ec 0 14px, var(--sand) 14px 28px);
display: flex;
align-items: flex-end;
padding: 12px 14px;
font-family: var(--mono);
font-size: 11px;
color: var(--light-muted);
}
.trip__body {
padding: 22px 24px 24px;
display: flex;
flex-direction: column;
flex: 1;
}
.trip__tags {
display: flex;
gap: 7px;
flex-wrap: wrap;
margin-bottom: 12px;
}
.trip__tags .tag { font-size: 12px; padding: 5px 11px; }
.trip__title {
font-family: var(--display);
font-weight: 400;
font-size: 24px;
line-height: 1.15;
color: var(--ink);
margin-bottom: 10px;
}
.trip__text {
font-size: 14px;
line-height: 1.6;
color: var(--body);
margin-bottom: 16px;
}
.trip__facts {
margin-top: auto;
display: flex;
flex-direction: column;
gap: 8px;
padding-top: 16px;
border-top: 1px solid var(--line);
font-size: 13px;
color: var(--muted);
}
.trip__fact {
display: flex;
justify-content: space-between;
gap: 12px;
}
.trip__fact strong {
font-family: var(--mono);
font-weight: 400;
color: var(--ink);
text-align: right;
}
.trip__map { font-size: 14px; margin-top: 4px; }
/* A card with no photograph above it — every trip card, and the seven guide
cards on the overview. Same shape as the one the design drew for Pajrek,
without the media strip. */
.trip--flat .trip__body { padding-top: 24px; }
.trip__emoji {
margin-inline-end: 8px;
/* The display face has no emoji, so it falls through to the system font at
whatever size that lands; pinning it keeps the titles on one baseline. */
font-family: var(--ui);
font-size: 20px;
line-height: 1;
}
/* The bracket from the source — a driving time in most guides, a route length
in the cycling one. Quieter than a real tag, because it is a measurement. */
.tag--quiet {
background: var(--sand);
color: var(--muted);
font-family: var(--mono);
font-weight: 400;
}
.trip__more { font-size: 14px; }
.trip:hover .trip__more { text-decoration: underline; }
/* Inside a band the grid brings its own gutter, so the card grid must not. */
.trips--flush { padding-inline: 0; padding-top: 14px; }
/* Seven guides in three columns leave the last one alone on its own row. It
spans the rest instead — there is no photograph whose proportions a wide
card would distort. */
.trips > .trip:last-child:nth-child(3n + 1) { grid-column: span 3; }
/* Four trip tips read as two and two.
Both lines have to sit *after* the two rules they override, and the second
one is why: `.trips--pairs > .trip:…` and `.trips > .trip:…` weigh exactly
the same — two classes and two pseudo-classes each — so specificity settles
nothing and the later one wins. Written above, the span survived, the fourth
tile stretched across an implicit third column, and the computed grid came
out `245px 245px 569px` while the modifier looked like it had been applied. */
.trips--pairs { grid-template-columns: 1fr 1fr; }
.trips--pairs > .trip:last-child:nth-child(3n + 1) { grid-column: auto; }
.filters__empty {
padding: 40px var(--gutter) 0;
font-size: 15px;
color: var(--muted);
}
/* Dark green “from the door on foot” panel */
.walk { padding: 34px var(--gutter) 0; }
.walk__inner {
background: var(--green-dark);
border-radius: var(--radius-banner);
padding: 34px 36px;
}
.walk__head {
display: flex;
align-items: baseline;
justify-content: space-between;
gap: 20px;
margin-bottom: 22px;
}
.walk__title {
font-family: var(--display);
font-weight: 400;
font-size: 34px;
color: var(--cream);
}
.walk__aside {
font-size: 13px;
color: rgba(255, 253, 248, 0.6);
white-space: nowrap;
}
.walk__grid {
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: 18px;
}
.walk-card {
background: rgba(255, 253, 248, 0.08);
border-radius: 18px;
padding: 22px 24px;
}
.walk-card__time {
font-family: var(--mono);
font-size: 13px;
color: var(--sage-photo);
margin-bottom: 10px;
}
.walk-card__title {
font-size: 17px;
font-weight: 700;
color: var(--cream);
margin-bottom: 8px;
}
.walk-card__text {
font-size: 14px;
line-height: 1.6;
color: rgba(255, 253, 248, 0.75);
}
.walk__note {
margin-top: 22px;
padding-top: 20px;
border-top: 1px solid rgba(255, 253, 248, 0.16);
display: flex;
align-items: center;
justify-content: space-between;
gap: 20px;
}
.walk__note p {
font-size: 15px;
line-height: 1.6;
color: rgba(255, 253, 248, 0.8);
max-width: 62ch;
}
.walk__note .btn { flex: none; }
/* --------------------------------------------------------------------------
19. Gallery (6b)
-------------------------------------------------------------------------- */
.breadcrumb--dark { color: var(--light-muted); }
.breadcrumb--dark a:hover { color: var(--ink); }
.breadcrumb--dark [aria-current] { color: var(--ink); }
.gallery-head {
padding: 40px var(--gutter) 0;
display: flex;
align-items: flex-end;
justify-content: space-between;
gap: 30px;
}
.gallery-head__title {
font-family: var(--display);
font-weight: 400;
font-size: 54px;
line-height: 1.02;
letter-spacing: -0.025em;
color: var(--ink);
margin-bottom: 12px;
}
.gallery-head__lead {
font-size: 16px;
line-height: 1.6;
color: var(--body);
max-width: 60ch;
}
.gallery-head .btn { flex: none; }
.gallery {
padding: 22px var(--gutter) 0;
display: grid;
grid-template-columns: repeat(4, 1fr);
grid-auto-rows: 172px;
gap: 12px;
}
.gallery__item {
border: 0;
padding: 0;
margin: 0;
background: none;
border-radius: 14px;
overflow: hidden;
cursor: zoom-in;
display: block;
}
.gallery__item img {
width: 100%;
height: 100%;
object-fit: cover;
display: block;
transition: transform 200ms ease;
}
.gallery__item:hover img { transform: scale(1.03); }
.gallery__item--wide { grid-column: span 2; }
.gallery__item--big {
grid-column: span 2;
grid-row: span 2;
border-radius: var(--radius-media);
}
.gallery__slot {
grid-column: span 2;
border-radius: 14px;
background: repeating-linear-gradient(135deg, #f6f3ec 0 14px, var(--sand) 14px 28px);
display: flex;
align-items: center;
justify-content: center;
font-family: var(--mono);
font-size: 12px;
color: var(--light-muted);
}
.gallery__more {
padding: 24px var(--gutter) 0;
display: flex;
justify-content: center;
}
.btn--outline {
background: transparent;
border: 1px solid rgba(35, 32, 28, 0.2);
color: var(--ink);
}
.btn--outline:hover { background: var(--sand); }
/* Lightbox —