/* =====================================================================
P002 — base.css — copiato dal template P001 v1 il 19/10/2026 (PD-001)
---------------------------------------------------------------------
One file for fonts, colours and every shared component. Both Matti and
Simo build on this; nobody adds a second stylesheet or inline styles.
Design source: ../../../materials/layout website_reference.jpeg
("editorial. timeless. intentional.")
HOW TO USE
Nothing else: fonts are imported from here.
CONTENTS
1. Tokens colours, fonts, spacing (two naming schemes, same values)
2. Reset & base html/body/img/a/headings
3. Typography .eyebrow .h-display .h-1 .h-2 .h-3 .lede .small .arrow-link
.page-kicker .page-title (skeleton aliases)
4. Layout .wrap .site-main .section .split .media
5. Header .site-header (+ .site-nav, mobile toggle) — both markups
6. Footer .site-footer (columns) and .site-footer__cta (dark block)
7. Components buttons, forms, choice chips, accordion, key/value list
8. Cards .stay (accommodation)
9. Pages cover + teasers (index), event, filters, rsvp form, thank-you
10. States .tbc (to confirm), .tbc-banner, .reveal, utilities
FONTS reference asks Canela / Editorial New (headings) and Avenir /
Neue Haas / Inter (body). The first two are commercial. Free
stand-ins: Cormorant Garamond + Inter (Google Fonts, imported
below). To switch, change --f-head / --f-body only.
COLOURS the five swatches of the reference, sampled left → right.
===================================================================== */
@import url("https://fonts.googleapis.com/css2?family=Cormorant+Garamond:ital,wght@0,400;0,500;1,400&family=Inter:wght@300;400;500&display=swap");
/* ---- 1. tokens ------------------------------------------------------ */
:root {
/* palette — reference swatches */
--c-cream: #F2EEE6; /* 1 page ground */
--c-paper: #FAF8F3; /* lighter panel */
--c-stone: #CFC8BD; /* 2 rules, borders, image ground */
--c-taupe: #857A6E; /* 3 secondary text */
--c-olive: #47513C; /* 4 accent, focus ring */
--c-ink: #1C1B18; /* 5 text, dark blocks */
--c-ink-70: rgba(28, 27, 24, .70);
--c-white: #FFFFFF;
--c-tbc: #A8781E; /* "to confirm" marker — deliberately off-palette */
--c-error: #9A3B2A;
/* aliases used by the skeleton (partials/header.html, footer.html) */
--c-bg: var(--c-cream);
--c-muted: var(--c-taupe);
--c-line: var(--c-stone);
--c-accent: var(--c-olive);
--c-warn: var(--c-tbc);
/* type */
--f-head: "Cormorant Garamond", "Canela", "Editorial New", Georgia, serif;
--f-body: "Inter", "Avenir", "Neue Haas Grotesk", system-ui, sans-serif;
--font-display: var(--f-head); /* alias */
--font-body: var(--f-body); /* alias */
--track: .18em; /* letter-spacing for small-caps labels */
/* space & layout */
--space-1: .5rem; --space-2: 1rem; --space-3: 1.5rem; --space-4: 2.5rem; --space-5: 4rem;
--max: 1280px;
--wrap: var(--max); /* alias */
--gutter: clamp(20px, 4vw, 56px);
--ease: cubic-bezier(.22, .61, .36, 1);
}
/* ---- 2. reset ---------------------------------------------------------- */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
body {
margin: 0;
background: var(--c-cream);
color: var(--c-ink);
font-family: var(--f-body);
font-weight: 300;
font-size: 15px;
line-height: 1.65;
-webkit-font-smoothing: antialiased;
}
img { display: block; max-width: 100%; height: auto; }
a { color: inherit; text-decoration: none; }
button { font: inherit; color: inherit; background: none; border: 0; cursor: pointer; }
h1, h2, h3, h4 { font-family: var(--f-head); font-weight: 400; line-height: 1.08; margin: 0; letter-spacing: -.01em; }
p { margin: 0 0 1em; }
:focus-visible { outline: 2px solid var(--c-olive); outline-offset: 3px; }
::selection { background: var(--c-stone); }
/* ---- typography scale ---------------------------------------------- */
.eyebrow {
font-family: var(--f-body);
font-size: 10.5px;
font-weight: 500;
letter-spacing: var(--track);
text-transform: uppercase;
color: var(--c-ink);
margin: 0 0 22px;
}
.eyebrow--muted { color: var(--c-taupe); }
.h-display, .h-1, .h-2, .h-3 { font-family: var(--f-head); font-weight: 400; line-height: 1.08; letter-spacing: -.01em; }
.h-display { font-size: clamp(38px, 5vw, 64px); }
.h-1 { font-size: clamp(34px, 3.8vw, 52px); }
.h-2 { font-size: clamp(26px, 2.6vw, 36px); }
.h-3 { font-size: clamp(20px, 1.8vw, 24px); }
.lede { font-size: 16px; line-height: 1.7; color: var(--c-ink-70); max-width: 52ch; }
.small { font-size: 12.5px; color: var(--c-taupe); }
.serif-i { font-family: var(--f-head); font-style: italic; }
/* arrow link — "READ OUR STORY →" pattern from the reference */
.arrow-link {
display: inline-flex; align-items: center; gap: 12px;
font-size: 10.5px; font-weight: 500; letter-spacing: var(--track); text-transform: uppercase;
padding-bottom: 2px;
}
.arrow-link::after { content: "→"; font-size: 14px; letter-spacing: 0; transition: transform .35s var(--ease); }
.arrow-link:hover::after { transform: translateX(6px); }
/* ---- layout --------------------------------------------------------- */
.wrap { width: 100%; max-width: var(--max); margin: 0 auto; padding-left: var(--gutter); padding-right: var(--gutter); }
.section { padding: clamp(56px, 8vw, 120px) 0; }
.section--paper { background: var(--c-paper); }
.section--rule-top { border-top: 1px solid var(--c-stone); }
.split { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(32px, 6vw, 96px); align-items: center; }
.split--wide-media { grid-template-columns: 1.15fr 1fr; }
@media (max-width: 860px) { .split, .split--wide-media { grid-template-columns: 1fr; } }
.media { position: relative; overflow: hidden; background: var(--c-stone); }
.media img { width: 100%; height: 100%; object-fit: cover; }
.media--4x5 { aspect-ratio: 4 / 5; }
.media--4x3 { aspect-ratio: 4 / 3; }
.media--3x2 { aspect-ratio: 3 / 2; }
.media--mono img { filter: grayscale(1) contrast(1.05); }
.media--top img { object-position: top; } /* keep the top of the photo (faces) when cropping */
.media--bottom img { object-position: bottom; }
/* photo credit (required for CC BY images) */
figure.media { margin: 0; }
.media__credit { position: absolute; right: 10px; bottom: 8px; font-size: 9px; letter-spacing: .08em; text-transform: uppercase; color: var(--c-white); opacity: .7; }
.media__credit a { color: inherit; }
.media__credit a:hover { opacity: 1; text-decoration: underline; }
/* tono di riempimento del segnaposto: distingue un'immagine mancante
da un errore di layout, e regge senza rete */
.media--placeholder { background-image: linear-gradient(155deg, #DCD5CA 0%, #C2BAAE 55%, #A79E92 100%); }
/* placeholder photo caption — remove when real photography arrives */
.media--placeholder::after {
content: "placeholder photo";
position: absolute; left: 12px; bottom: 10px;
font-size: 9.5px; letter-spacing: var(--track); text-transform: uppercase;
color: var(--c-white); opacity: .75; pointer-events: none;
}
/* ---- "to confirm" marker ------------------------------------------- */
.tbc {
color: var(--c-tbc);
border-bottom: 1px dotted var(--c-tbc);
cursor: help;
}
.tbc-banner {
background: var(--c-ink); color: var(--c-cream);
font-size: 11.5px; letter-spacing: .04em;
padding: 10px var(--gutter); text-align: center;
}
.tbc-banner b { color: #E4B45A; font-weight: 500; }
/* ---- header --------------------------------------------------------- */
.site-header { position: sticky; top: 0; z-index: 50; background: var(--c-cream); border-bottom: 1px solid var(--c-stone); }
.site-header__bar {
display: flex; align-items: center; justify-content: space-between;
height: 64px;
}
.monogram {
font-family: var(--f-head); font-size: 17px; letter-spacing: .08em; line-height: 1;
display: inline-flex; align-items: baseline; gap: 4px;
}
.monogram .tbc { border-bottom: 0; }
.site-header__meta { font-size: 10px; letter-spacing: var(--track); text-transform: uppercase; color: var(--c-taupe); }
.site-header__rsvp { font-size: 10.5px; font-weight: 500; letter-spacing: var(--track); text-transform: uppercase; border: 1px solid var(--c-ink); padding: 9px 18px; transition: background .3s, color .3s; }
.site-header__rsvp:hover { background: var(--c-ink); color: var(--c-cream); }
.site-nav { border-top: 1px solid var(--c-stone); }
.site-nav__list {
list-style: none; margin: 0; padding: 0;
display: flex; justify-content: center; flex-wrap: wrap; gap: 0 clamp(18px, 2.6vw, 40px);
}
.site-nav__list a {
display: inline-block; padding: 13px 0;
font-size: 9.5px; font-weight: 500; letter-spacing: var(--track); text-transform: uppercase;
color: var(--c-ink); position: relative;
}
.site-nav__list a::after { content: ""; position: absolute; left: 0; right: 100%; bottom: 8px; height: 1px; background: var(--c-ink); transition: right .35s var(--ease); }
.site-nav__list a:hover::after, .site-nav__list a[aria-current="page"]::after { right: 0; }
.site-nav__list a.is-pending { color: var(--c-taupe); } /* pages not yet built */
.nav-toggle { display: none; width: 40px; height: 40px; align-items: center; justify-content: center; margin-right: -8px; }
.nav-toggle span { display: block; width: 20px; height: 1px; background: var(--c-ink); position: relative; }
.nav-toggle span::before, .nav-toggle span::after { content: ""; position: absolute; left: 0; width: 20px; height: 1px; background: var(--c-ink); transition: transform .3s; }
.nav-toggle span::before { top: -6px; } .nav-toggle span::after { top: 6px; }
@media (max-width: 860px) {
.site-header__meta { display: none; }
.nav-toggle { display: inline-flex; }
.site-nav { display: none; }
.site-header.is-open .site-nav { display: block; }
.site-nav__list { flex-direction: column; align-items: flex-start; gap: 0; padding: 8px 0 16px; }
.site-nav__list a { padding: 10px 0; font-size: 11px; }
.site-nav__list a::after { display: none; }
}
/* ---- page intro (eyebrow + title + lede) ---------------------------- */
.page-intro { padding-top: clamp(48px, 7vw, 96px); }
.page-intro .h-display { max-width: 14ch; margin-bottom: 26px; }
/* ---- footer --------------------------------------------------------- */
.site-footer__cta {
position: relative; color: var(--c-cream); background: var(--c-ink);
min-height: 420px; display: grid; place-items: center; text-align: center; overflow: hidden;
}
.site-footer__cta img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: .38; filter: saturate(.6); }
.site-footer__cta-inner { position: relative; padding: 72px var(--gutter); }
.site-footer__cta .eyebrow { color: var(--c-cream); font-size: 12px; line-height: 2; margin-bottom: 28px; }
.btn-ghost {
display: inline-block; font-size: 10.5px; font-weight: 500; letter-spacing: var(--track); text-transform: uppercase;
border: 1px solid var(--c-cream); color: var(--c-cream); padding: 14px 44px; transition: background .3s, color .3s;
}
.btn-ghost:hover { background: var(--c-cream); color: var(--c-ink); }
.site-footer__deadline { margin-top: 26px; font-size: 10px; letter-spacing: var(--track); text-transform: uppercase; line-height: 2; }
.site-footer__deadline .tbc { color: #E4B45A; border-color: #E4B45A; }
.site-footer__bar { background: var(--c-cream); border-top: 1px solid var(--c-stone); }
.site-footer__row { display: flex; align-items: center; justify-content: space-between; gap: 24px; flex-wrap: wrap; padding: 26px 0; }
.site-footer__links { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 6px 22px; }
.site-footer__links a { font-size: 9.5px; letter-spacing: var(--track); text-transform: uppercase; color: var(--c-taupe); }
.site-footer__links a:hover { color: var(--c-ink); }
/* ---- buttons / forms ------------------------------------------------ */
.btn {
display: inline-block; font-size: 10.5px; font-weight: 500; letter-spacing: var(--track); text-transform: uppercase;
background: var(--c-ink); color: var(--c-cream); border: 1px solid var(--c-ink); padding: 15px 40px;
transition: background .3s, color .3s, opacity .3s;
}
.btn:hover { background: transparent; color: var(--c-ink); }
.btn[disabled] { opacity: .5; cursor: progress; }
.field { display: flex; flex-direction: column; gap: 8px; }
.field label, .field legend { font-size: 10.5px; font-weight: 500; letter-spacing: var(--track); text-transform: uppercase; }
.field .hint { font-size: 12.5px; color: var(--c-taupe); line-height: 1.5; margin: 0; }
.field input[type="text"], .field input[type="email"], .field select, .field textarea {
width: 100%; font: inherit; font-size: 16px; color: var(--c-ink); /* ≥16px: iOS Safari otherwise zooms on focus */
background: transparent; border: 0; border-bottom: 1px solid var(--c-ink); border-radius: 0;
padding: 10px 0; outline: none; transition: border-color .3s;
}
.field textarea { min-height: 96px; resize: vertical; }
.field input:focus, .field select:focus, .field textarea:focus { border-bottom-color: var(--c-olive); }
.field select { appearance: none; background-image: linear-gradient(45deg, transparent 50%, var(--c-ink) 50%), linear-gradient(135deg, var(--c-ink) 50%, transparent 50%); background-position: calc(100% - 12px) 55%, calc(100% - 7px) 55%; background-size: 5px 5px; background-repeat: no-repeat; padding-right: 28px; }
.field.is-invalid input, .field.is-invalid select, .field.is-invalid textarea { border-bottom-color: #9A3B2A; }
.field .error { display: none; font-size: 12px; color: #9A3B2A; margin: 0; }
.field.is-invalid .error { display: block; }
fieldset { border: 0; padding: 0; margin: 0; min-width: 0; }
.choices { display: flex; flex-wrap: wrap; gap: 10px; }
.choice { position: relative; }
.choice input { position: absolute; opacity: 0; inset: 0; margin: 0; }
.choice span {
display: inline-block; padding: 11px 22px; border: 1px solid var(--c-stone);
font-size: 10.5px; font-weight: 500; letter-spacing: var(--track); text-transform: uppercase; transition: all .25s;
}
.choice input:checked + span { background: var(--c-ink); color: var(--c-cream); border-color: var(--c-ink); }
.choice input:focus-visible + span { outline: 2px solid var(--c-olive); outline-offset: 3px; }
/* ---- accordion ------------------------------------------------------ */
.accordion { border-top: 1px solid var(--c-stone); }
.accordion__item { border-bottom: 1px solid var(--c-stone); }
.accordion__trigger {
width: 100%; display: flex; align-items: center; justify-content: space-between; gap: 24px;
padding: 26px 0; text-align: left;
}
.accordion__trigger .h-3 { transition: color .3s; }
.accordion__trigger:hover .h-3 { color: var(--c-taupe); }
.accordion__icon { flex: 0 0 auto; width: 14px; height: 14px; position: relative; }
.accordion__icon::before, .accordion__icon::after { content: ""; position: absolute; background: var(--c-ink); top: 50%; left: 0; width: 14px; height: 1px; transition: transform .35s var(--ease); }
.accordion__icon::after { transform: rotate(90deg); }
.accordion__trigger[aria-expanded="true"] .accordion__icon::after { transform: rotate(0); }
.accordion__panel { overflow: hidden; height: 0; transition: height .4s var(--ease); }
.accordion__panel-inner { padding: 0 0 32px; }
.kv { display: grid; grid-template-columns: max-content 1fr; gap: 14px 40px; align-items: baseline; margin: 0; }
.kv dt { font-size: 10.5px; font-weight: 500; letter-spacing: var(--track); text-transform: uppercase; color: var(--c-taupe); }
.kv dd { margin: 0; font-size: 16px; font-family: var(--f-head); letter-spacing: .04em; }
@media (max-width: 560px) { .kv { grid-template-columns: 1fr; gap: 4px; } .kv dd { margin-bottom: 14px; } }
.copy-btn { font-size: 9.5px; letter-spacing: var(--track); text-transform: uppercase; color: var(--c-taupe); margin-left: 14px; border-bottom: 1px solid var(--c-stone); }
.copy-btn:hover { color: var(--c-ink); }
/* ---- reveal on scroll (reference asks for custom scroll animation) -- */
.reveal { opacity: 0; transform: translateY(18px); transition: opacity .9s var(--ease), transform .9s var(--ease); }
.reveal.is-visible { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) {
.reveal { opacity: 1; transform: none; transition: none; }
html { scroll-behavior: auto; }
}
/* anchors must not hide under the sticky header */
[id] { scroll-margin-top: 84px; }
/* narrow screens: intro text before the photo, and no photo taller than the viewport */
@media (max-width: 860px) {
.page-intro .split > .media { order: 2; max-height: 62vh; }
.page-intro .split > .reveal:not(.media) { order: 1; }
}
/* ---- utilities ------------------------------------------------------ */
.visually-hidden { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.mt-1 { margin-top: 12px; } .mt-2 { margin-top: 24px; } .mt-3 { margin-top: 40px; } .mt-4 { margin-top: 64px; }
.rule { border: 0; border-top: 1px solid var(--c-stone); margin: 0; }
/* =====================================================================
SKELETON MARKUP (partials/header.html, partials/footer.html, *.html
generated from the skeleton). Same design, second set of class names.
===================================================================== */
/* ---- skip link ------------------------------------------------------ */
.skip-link { position: absolute; left: -9999px; top: 0; z-index: 100; background: var(--c-ink); color: var(--c-cream); padding: 10px 16px; font-size: 11px; letter-spacing: var(--track); text-transform: uppercase; }
.skip-link:focus { left: 0; }
/* ---- header (skeleton) ---------------------------------------------- */
.site-header__inner {
width: 100%; max-width: var(--max); margin: 0 auto; padding: 0 var(--gutter);
min-height: 64px; display: flex; align-items: center; justify-content: space-between; gap: 24px; flex-wrap: wrap;
}
.site-header__brand { display: block; padding: 14px 0; }
.site-header__names { display: block; font-family: var(--f-head); font-size: 17px; letter-spacing: .12em; text-transform: uppercase; line-height: 1.1; }
.site-header__names.tbc { border-bottom: 0; }
.site-header__brand .site-header__meta { display: block; margin-top: 4px; }
.site-header__sep { margin: 0 .5em; }
.site-header__toggle { display: none; width: 40px; height: 40px; align-items: center; justify-content: center; border: 0; background: none; cursor: pointer; }
.site-header__burger, .site-header__burger::before, .site-header__burger::after { display: block; width: 20px; height: 1px; background: var(--c-ink); content: ""; }
.site-header__burger { position: relative; }
.site-header__burger::before, .site-header__burger::after { position: absolute; left: 0; }
.site-header__burger::before { top: -6px; } .site-header__burger::after { top: 6px; }
/* nav inside .site-header__inner (skeleton) — one row, right aligned */
.site-header__inner .site-nav { border-top: 0; flex: 1 1 auto; }
.site-header__inner .site-nav__list { justify-content: flex-end; }
.site-nav__link.is-active::after { right: 0; }
/* ---- main (skeleton) ------------------------------------------------ */
.site-main { flex: 1 0 auto; width: 100%; max-width: var(--max); margin: 0 auto; padding: clamp(48px, 7vw, 96px) var(--gutter); }
.page-kicker { font-size: 10.5px; font-weight: 500; letter-spacing: var(--track); text-transform: uppercase; color: var(--c-taupe); margin: 0 0 22px; }
.page-title { font-family: var(--f-head); font-weight: 400; font-size: clamp(38px, 5vw, 64px); line-height: 1.08; letter-spacing: -.01em; margin: 0 0 26px; }
.page-placeholder { border: 1px dashed var(--c-stone); padding: 24px 28px; color: var(--c-taupe); font-size: 14px; max-width: 60ch; }
.page-placeholder p { margin: 0 0 .5em; } .page-placeholder p:last-child { margin: 0; }
.page-placeholder code { font-size: 12px; background: var(--c-paper); padding: 1px 5px; }
.include-error { margin: 16px auto; max-width: var(--max); padding: 14px 18px; border: 1px solid var(--c-tbc); color: var(--c-tbc); font-size: 13px; }
/* ---- footer (skeleton: three columns) -------------------------------- */
.site-footer { background: var(--c-cream); border-top: 1px solid var(--c-stone); }
.site-footer__inner {
width: 100%; max-width: var(--max); margin: 0 auto; padding: clamp(48px, 6vw, 80px) var(--gutter) 32px;
display: grid; grid-template-columns: repeat(3, 1fr); gap: 40px 32px;
}
.site-footer__title { font-family: var(--f-body); font-size: 10.5px; font-weight: 500; letter-spacing: var(--track); text-transform: uppercase; color: var(--c-taupe); margin: 0 0 14px; }
.site-footer__line { margin: 0 0 6px; font-size: 14px; line-height: 1.6; }
.site-footer__link { color: var(--c-ink); border-bottom: 1px solid var(--c-stone); transition: border-color .3s; }
.site-footer__link:hover { border-bottom-color: var(--c-ink); }
.site-footer__nav, .site-footer__colophon { grid-column: 1 / -1; padding-top: 24px; border-top: 1px solid var(--c-stone); }
.site-footer__nav { display: flex; flex-wrap: wrap; gap: 8px 28px; }
.site-footer__nav .site-footer__link { border-bottom: 0; font-size: 9.5px; font-weight: 500; letter-spacing: var(--track); text-transform: uppercase; color: var(--c-taupe); }
.site-footer__nav .site-footer__link:hover { color: var(--c-ink); }
.site-footer__colophon { border-top: 0; padding-top: 0; margin: 0; font-size: 12px; color: var(--c-taupe); }
@media (max-width: 860px) {
.site-header__toggle { display: inline-flex; flex: 0 0 auto; }
.site-header__brand { flex: 1 1 0; min-width: 0; }
.site-header__brand .site-header__meta { display: none; }
.site-header__inner .site-nav { display: none; flex-basis: 100%; }
.site-header__inner .site-nav.is-open { display: block; }
.site-header__inner .site-nav__list { flex-direction: column; align-items: flex-start; gap: 0; padding: 4px 0 16px; border-top: 1px solid var(--c-stone); }
.site-footer__inner { grid-template-columns: 1fr; gap: 28px; }
}
/* =====================================================================
PAGE: accommodation.html — "The Guide · Stay"
===================================================================== */
.filters { display: flex; flex-wrap: wrap; gap: 28px 40px; align-items: flex-end; padding: 28px 0; border-top: 1px solid var(--c-stone); border-bottom: 1px solid var(--c-stone); }
.filters .field { gap: 10px; }
.filters .field label, .filters .field legend { color: var(--c-taupe); }
.filters .choices { gap: 6px; }
.filters .choice span { padding: 8px 14px; font-size: 9.5px; }
.filters__count { margin-left: auto; font-size: 12.5px; color: var(--c-taupe); align-self: center; }
.filters select { min-width: 190px; font-size: 16px; padding: 6px 28px 6px 0; }
@media (max-width: 560px) { .filters__count { margin-left: 0; } }
.stays { display: grid; grid-template-columns: repeat(3, 1fr); gap: clamp(28px, 4vw, 56px) clamp(20px, 2.6vw, 36px); padding-top: clamp(36px, 5vw, 64px); }
@media (max-width: 1024px) { .stays { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 600px) { .stays { grid-template-columns: 1fr; } }
.stay { display: flex; flex-direction: column; }
.stay[hidden] { display: none; }
.stay__media { position: relative; }
.stay__media img { transition: transform 1.2s var(--ease); }
.stay:hover .stay__media img { transform: scale(1.03); }
.stay__band { position: absolute; top: 12px; right: 12px; background: var(--c-cream); color: var(--c-ink); font-size: 10px; letter-spacing: .06em; padding: 5px 9px; line-height: 1; }
.stay__body { padding-top: 18px; display: flex; flex-direction: column; flex: 1; }
.stay__meta { font-size: 10px; letter-spacing: var(--track); text-transform: uppercase; color: var(--c-taupe); margin: 0 0 8px; }
.stay__name { margin-bottom: 8px; }
.stay__rooms { font-size: 13px; color: var(--c-ink-70); margin: 0 0 14px; flex: 1; }
.stay__price { margin: 0 0 16px; display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 10px; }
.stay__total { font-family: var(--f-head); font-size: 24px; letter-spacing: .02em; }
.stay__per { font-size: 12px; color: var(--c-taupe); }
.stay__links { margin: 0; display: flex; gap: 28px; flex-wrap: wrap; }
.stays-empty { padding: 64px 0; text-align: center; color: var(--c-taupe); }
.stays-empty[hidden] { display: none; }
.legend { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 18px 32px; margin: 0; }
.legend dt { font-size: 13px; letter-spacing: .06em; }
.legend dd { margin: 4px 0 0; font-size: 12px; color: var(--c-taupe); }
.note { max-width: 62ch; font-size: 12.5px; color: var(--c-taupe); line-height: 1.7; }
/* =====================================================================
PAGE: rsvp.html — "Before You Go · RSVP"
===================================================================== */
.rsvp-form { display: grid; gap: 34px; }
.rsvp-form .row { display: grid; grid-template-columns: 1fr 1fr; gap: 34px; }
@media (max-width: 560px) { .rsvp-form .row { grid-template-columns: 1fr; } }
.rsvp-form .is-collapsed { display: none; }
.rsvp-form__branch { display: grid; gap: 34px; }
.guest-list { display: grid; gap: 22px; padding: 22px 24px 24px; border: 1px solid var(--c-stone); background: var(--c-cream); }
.guest-list__items { display: grid; gap: 26px; }
.guest { display: grid; gap: 22px; padding-top: 18px; border-top: 1px solid var(--c-stone); }
.guest:first-child { padding-top: 0; border-top: 0; }
.guest__head { display: flex; align-items: baseline; justify-content: space-between; gap: 16px; }
.guest__title { margin: 0; font-family: var(--f-head); font-size: 19px; letter-spacing: .02em; }
.guest__remove { font-size: 9.5px; letter-spacing: var(--track); text-transform: uppercase; color: var(--c-taupe); border-bottom: 1px solid var(--c-stone); }
.guest__remove:hover { color: var(--c-error); border-color: var(--c-error); }
.guest-list[data-list="welcome"] .guest__extra { display: none; } /* welcome party: names only */
.btn-add { justify-self: start; font-size: 10.5px; font-weight: 500; letter-spacing: var(--track); text-transform: uppercase; padding: 10px 0 2px; border-bottom: 1px solid var(--c-ink); }
.btn-add:hover { color: var(--c-taupe); border-color: var(--c-taupe); }
.check { display: inline-flex; align-items: center; gap: 12px; cursor: pointer; font-size: 14px; }
.check input { width: 16px; height: 16px; margin: 0; accent-color: var(--c-ink); }
.field--check { justify-content: flex-end; padding-bottom: 12px; }
.form-status--ok strong { font-family: var(--f-head); font-size: 22px; font-weight: 400; display: block; margin-bottom: 6px; color: var(--c-ink); }
.form-status { font-size: 14px; line-height: 1.6; margin: 0; padding: 18px 22px; border: 1px solid var(--c-stone); }
.form-status[hidden] { display: none; }
.form-status--ok { border-color: var(--c-olive); color: var(--c-olive); }
.form-status--err { border-color: #9A3B2A; color: #9A3B2A; }
.form-status--warn { border-color: var(--c-tbc); color: var(--c-tbc); }
.backup { font-size: 12.5px; color: var(--c-taupe); }
.backup a { border-bottom: 1px solid var(--c-stone); color: var(--c-ink); }
/* =====================================================================
PAGE: thank-you.html — "With Love"
===================================================================== */
.thanks .h-1 { margin-bottom: 20px; }
.thanks__sub { font-family: var(--f-head); font-style: italic; font-size: 20px; line-height: 1.4; color: var(--c-ink-70); margin-bottom: 22px; }
/* =====================================================================
PAGE: index.html — "Cover" and the editorial teasers
Layout source: ../../../materials/layout website_reference.jpeg
===================================================================== */
.cover { position: relative; display: flex; align-items: flex-end; min-height: min(86vh, 780px); background: var(--c-ink); overflow: hidden; }
.cover__media { position: absolute; inset: 0; }
.cover__media img { width: 100%; height: 100%; object-fit: cover; opacity: .8; }
/* finché non arriva la fotografia, la cover resta un blocco tonale:
niente ![]()
, nessuna dipendenza da un servizio esterno di segnaposto */
.cover__media { background: linear-gradient(150deg, #3A362F 0%, #6B6055 45%, #211F1B 100%); }
/* scrim: senza, il testo chiaro sulla foto non tiene il contrasto AA */
.cover__media::after {
content: ""; position: absolute; inset: 0;
background:
/* velatura da destra: la foto di copertina ha marmo chiaro proprio dove
cade il titolo, e il solo scrim verticale non bastava (misurato 2.34:1,
sotto il minimo di 3:1 per il testo grande) */
linear-gradient(270deg, rgba(28,27,24,.45) 0%, rgba(28,27,24,.18) 38%, rgba(28,27,24,0) 62%),
linear-gradient(180deg, rgba(28,27,24,.5) 0%, rgba(28,27,24,.12) 40%, rgba(28,27,24,.75) 100%);
}
.cover__inner {
position: relative; width: 100%; max-width: var(--max); margin: 0 auto;
padding: clamp(80px, 14vh, 150px) var(--gutter) clamp(32px, 5vh, 52px);
color: var(--c-cream); display: grid; gap: clamp(24px, 4vh, 44px);
}
.cover__names { margin: 0; text-align: right; font-family: var(--f-head); font-weight: 400; text-transform: uppercase; font-size: clamp(38px, 8.4vw, 100px); line-height: .98; letter-spacing: .015em; }
/* seconda riga dei nomi: il corsivo minuscolo vale per la "&", non per il nome */
.cover__amp { display: block; }
.cover__ampersand { font-style: italic; text-transform: none; letter-spacing: 0; }
.cover__meta { margin: 0; text-align: right; font-size: clamp(10px, 1.05vw, 12px); font-weight: 500; letter-spacing: var(--track); text-transform: uppercase; line-height: 2.4; }
.cover__cue { justify-self: start; display: inline-flex; align-items: center; gap: 10px; font-size: 10px; font-weight: 500; letter-spacing: var(--track); text-transform: uppercase; color: var(--c-cream); }
.cover__cue::after { content: "↓"; transition: transform .5s var(--ease); }
.cover__cue--flat::after { content: "＋"; font-size: 12px; }
.cover__cue:hover::after { transform: translateY(4px); }
/* il marcatore .tbc va schiarito sui fondi scuri, come nel footer */
.cover .tbc { color: #E4B45A; border-bottom-color: #E4B45A; }
@media (max-width: 640px) { .cover__names, .cover__meta { text-align: left; } }
/* tre giornate — griglia del blocco "The Weekend" */
.days { display: grid; grid-template-columns: repeat(3, 1fr); gap: clamp(18px, 2.4vw, 32px); }
@media (max-width: 720px) { .days { grid-template-columns: 1fr; gap: 36px; } }
.day__eyebrow { margin: 16px 0 8px; font-size: 10px; font-weight: 500; letter-spacing: var(--track); text-transform: uppercase; color: var(--c-taupe); }
.day__title { margin: 0; }
/* cinque sensi — striscia del blocco "The Experience" */
/* Etichette allineate fra le tessere.
Il testo di ogni senso ha lunghezza sua e cambia numero di righe con la
larghezza (misurate da 3 a 7 righe nella fascia a 5 colonne), quindi non
basta riservare uno spazio fisso: con il corpo ancorato in basso ogni
etichetta finiva a un'altezza diversa.
Soluzione: tre righe condivise da tutte le tessere — foto, etichetta,
testo — e ogni .sense le eredita con subgrid. L'etichetta sta nella stessa
riga di griglia per tutte, quindi e' allineata a qualsiasi larghezza.
.sense__body sparisce con display:contents: il markup non cambia. */
.senses {
display: grid; grid-template-columns: repeat(5, 1fr); gap: 2px;
grid-template-rows: 1fr auto auto;
grid-auto-rows: 1fr auto auto;
}
@media (max-width: 980px) { .senses { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 480px) { .senses { grid-template-columns: 1fr; } }
.sense {
position: relative;
display: grid; grid-template-columns: 1fr;
grid-row: span 3; grid-template-rows: subgrid;
}
.sense .media { grid-column: 1; grid-row: 1 / -1; }
.sense::after {
content: ""; position: absolute; inset: 0; pointer-events: none;
/* parte piu' in alto e piu' densa: con le foto vere due tessere su cinque
(taste, touch) hanno il fondo chiaro proprio sotto al testo e stavano a
3.2-3.8:1, sotto il 4.5:1 che serve a un testo di 12.5px */
background: linear-gradient(180deg,
rgba(28,27,24,0) 18%, rgba(28,27,24,.42) 48%,
rgba(28,27,24,.72) 72%, rgba(28,27,24,.92) 100%);
}
/* il wrapper non serve piu' come scatola: passa i figli alla griglia */
.sense__body { display: contents; }
.sense__label {
grid-column: 1; grid-row: 2; z-index: 1; align-self: end;
margin: 0; padding: 0 16px 6px; color: var(--c-white);
font-size: 10px; font-weight: 500; letter-spacing: var(--track); text-transform: uppercase;
}
.sense__text {
grid-column: 1; grid-row: 3; z-index: 1;
margin: 0; padding: 0 16px 18px; color: var(--c-white);
font-size: 12.5px; line-height: 1.55;
}
/* la didascalia "placeholder photo" finirebbe sotto al testo del senso */
.sense .media--placeholder::after { bottom: auto; top: 10px; }
/* =====================================================================
PAGE: event.html — "Ceremony & Venue"
===================================================================== */
.event-kv { margin-bottom: 30px; }
.event-note { max-width: 60ch; font-size: 12.5px; line-height: 1.7; color: var(--c-taupe); }
/* =====================================================================
STATES — aggiunta: fallback senza JS
.reveal parte a opacity 0; assets/js/ui.js mette .js su .
Se lo script non gira, questa regola evita una pagina bianca.
===================================================================== */
html:not(.js) .reveal { opacity: 1; transform: none; }
/* Riempimento in attesa dei contenuti del cliente: deve leggersi come finto
a colpo d'occhio, senza bisogno di aprire il sorgente. */
.is-lorem { color: var(--c-stone); font-style: italic; }
.draft-note {
margin: 26px 0 0; font-size: 9.5px; font-weight: 500;
letter-spacing: var(--track); text-transform: uppercase; color: var(--c-tbc);
}
/* cover: la coppia di richiami in basso (Enter · Add to calendar) */
.cover__actions { display: flex; flex-wrap: wrap; align-items: center; gap: 14px 30px; }
/* =====================================================================
P002 — aggiunte al template P001 v1
===================================================================== */
/* selettore di lingua ES · IT · EN nell'header */
.lang-switch { display: flex; gap: 4px; margin-left: auto; }
.lang-switch button {
font: 500 10.5px/1 var(--f-body); letter-spacing: var(--track); color: var(--c-taupe);
background: none; border: 0; border-bottom: 1px solid transparent; padding: 10px 6px; min-width: 32px; cursor: pointer;
}
.lang-switch button:hover { color: var(--c-ink); }
.lang-switch button[aria-pressed="true"] { color: var(--c-ink); border-bottom-color: var(--c-ink); }
/* due giornate invece di tre */
.days--two { grid-template-columns: repeat(2, 1fr); }
@media (max-width: 720px) { .days--two { grid-template-columns: 1fr; } }
.day .arrow-link { margin-top: 12px; }
/* PD-003: piccola immagine accanto al dress code del matrimonio («una piccola image», planner 22/10) */
.media--small { max-width: 360px; width: 100%; justify-self: end; }
@media (max-width: 860px) { .media--small { justify-self: start; } }