@import url("fonts.css");
/* ==========================================================================
Pierian Chalets — site stylesheet
Direction 1A "Hearth" (warm stone, Newsreader serif, light background).
Token values come from the handoff README, which is the source of truth.
Nothing here is rounded and nothing casts a shadow — that is deliberate.
========================================================================== */
/* --------------------------------------------------------------------------
1. Tokens
-------------------------------------------------------------------------- */
:root {
/* surfaces */
--bg: #faf7f1; /* page */
--bg-sand: #f2ece1; /* availability section, booking card */
--bg-dark: #2f3730; /* things-to-do band, CTA band */
--bg-footer: #221f1b;
--photo-ph: #dcd3c4; /* placeholder image fill */
/* ink */
--ink: #221f1b;
--ink-body: #3f3a32;
--ink-soft: #4a443b;
--ink-muted: #5f584d;
--ink-quiet: #6d675e;
--ink-label: #8a7f6d; /* uppercase labels only — see contrast note */
--ink-ph: #8d8271; /* text on placeholder images */
--ink-note: #a1957f; /* "placeholder" notes — delete with them */
--on-dark: #eef0ea;
--on-dark-soft: rgba(238, 240, 234, .72);
--on-dark-quiet: rgba(238, 240, 234, .6);
--on-dark-rule: rgba(238, 240, 234, .16);
--on-footer: #cfc8bb;
--on-footer-dim: #7d766a;
--on-hero: #fdfbf7;
--on-hero-soft: rgba(253, 251, 247, .86);
/* accent */
--accent: #2f5741; /* active nav, links, prices, stars, button hover */
--accent-light: #9db3a1; /* numerals on the dark band */
/* lines */
--rule: #e6ded1;
--rule-input: #ddd2c0;
/* type */
--font-display: "Newsreader", Georgia, "Times New Roman", serif; /* 300 & 400 */
--font-text: "Alegreya Sans", system-ui, -apple-system, sans-serif;
/* geometry */
--radius: 0;
--shadow: none;
--page: 1180px; /* max content width, inclusive of the side padding */
--pad: 44px; /* section side padding */
/* motion — the only transition in the design */
--t: background-color .18s ease, color .18s ease, border-color .18s ease;
}
/* --------------------------------------------------------------------------
2. Base
-------------------------------------------------------------------------- */
*,
*::before,
*::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
margin: 0;
background: var(--bg);
color: var(--ink);
font-family: var(--font-text);
font-size: 16px;
line-height: 1.6;
color-scheme: light; /* keeps native date pickers on the light palette */
-webkit-font-smoothing: antialiased;
}
h1, h2, h3 {
font-family: var(--font-display);
font-weight: 400;
margin: 0;
text-wrap: balance;
}
p { margin: 0; text-wrap: pretty; }
a {
color: inherit;
text-decoration: none;
transition: var(--t);
}
a:hover { text-decoration: underline; }
img { display: block; max-width: 100%; height: auto; }
ul, ol { margin: 0; padding: 0; list-style: none; }
blockquote { margin: 0; }
figure { margin: 0; }
input, select, textarea, button { font-family: inherit; }
:focus-visible {
outline: 2px solid var(--accent);
outline-offset: 2px;
}
/* Focus ring needs to be visible against the two dark bands as well. */
.band--dark :focus-visible,
.site-footer :focus-visible,
.lightbox :focus-visible {
outline-color: var(--on-dark);
}
.visually-hidden {
position: absolute;
width: 1px;
height: 1px;
margin: -1px;
padding: 0;
overflow: hidden;
clip: rect(0 0 0 0);
clip-path: inset(50%);
white-space: nowrap;
}
.skip-link {
position: absolute;
left: 12px;
top: -60px;
z-index: 100;
background: var(--ink);
color: var(--bg);
padding: 12px 18px;
font-size: 12.5px;
font-weight: 600;
letter-spacing: .14em;
text-transform: uppercase;
transition: top .15s ease;
}
.skip-link:focus { top: 12px; }
/* Motion — including the prefers-reduced-motion switch — lives in §17. */
/* --------------------------------------------------------------------------
3. Layout primitives
-------------------------------------------------------------------------- */
/* Content is capped at 1180px and centred. Coloured bands run full-bleed;
their inner wrapper carries the cap so the band edge reaches the viewport. */
.wrap {
width: 100%;
max-width: var(--page);
margin-inline: auto;
padding-inline: var(--pad);
}
.band--sand { background: var(--bg-sand); }
.band--dark { background: var(--bg-dark); color: var(--on-dark); }
.section { padding-block: 80px; }
.section--tall{ padding-block: 82px; }
.section--dark{ padding-block: 78px; }
/* Header row: h2 left, note right, hairline underneath. */
.section-head {
display: flex;
align-items: flex-end;
justify-content: space-between;
gap: 40px;
}
.section-head--ruled {
border-bottom: 1px solid var(--rule);
padding-bottom: 22px;
}
/* Sub-section heads (Amenities) sit two pixels tighter. */
.section-head--tight { padding-bottom: 20px; }
.section-head__note {
font-size: 11px;
letter-spacing: .14em;
text-transform: uppercase;
color: var(--ink-label);
text-align: right;
}
.band--dark .section-head__note {
letter-spacing: .16em;
color: var(--on-dark-quiet);
}
.section-head__lede {
font-size: 15px;
line-height: 1.6;
color: var(--ink-muted);
max-width: 420px;
}
.measure { max-width: 620px; }
/* --------------------------------------------------------------------------
4. Type roles
-------------------------------------------------------------------------- */
.h-hero { font-weight: 300; font-size: 62px; line-height: 1.04; letter-spacing: -.015em; }
.h-page { font-weight: 300; font-size: 52px; line-height: 1.05; letter-spacing: -.02em; }
.h-section { font-weight: 400; font-size: 38px; line-height: 1.1; letter-spacing: -.01em; }
.h-sub { font-weight: 400; font-size: 34px; line-height: 1.1; }
.h-cta { font-weight: 300; font-size: 32px; line-height: 1.1; }
.h-card { font-weight: 400; font-size: 27px; line-height: 1.2; }
.h-item { font-weight: 400; font-size: 22px; line-height: 1.25; }
.band--dark .h-section { font-weight: 300; }
.eyebrow {
font-size: 11px;
letter-spacing: .22em;
text-transform: uppercase;
}
.micro {
font-size: 11px;
letter-spacing: .12em;
text-transform: uppercase;
color: var(--ink-label);
}
/* The "Placeholder …" notes. Delete these elements with the content they
annotate — they must not reach production. */
.placeholder-note {
font-size: 11px;
letter-spacing: .1em;
text-transform: uppercase;
color: var(--ink-note);
}
/* --------------------------------------------------------------------------
5. Buttons and link affordances
-------------------------------------------------------------------------- */
.btn {
display: inline-block;
border: none;
border-radius: var(--radius);
padding: 17px 28px;
font-size: 12.5px;
font-weight: 600;
letter-spacing: .14em;
text-transform: uppercase;
text-align: center;
cursor: pointer;
transition: var(--t);
}
.btn:hover { text-decoration: none; }
/* Dark button — the default call to action. */
.btn--dark { background: var(--ink); color: var(--bg); }
.btn--dark:hover { background: var(--accent); }
/* Light button — used on photography and on the dark bands. */
.btn--light { background: var(--bg); color: var(--ink); }
.btn--light:hover { background: var(--accent); color: var(--on-dark); }
.btn--on-dark { background: var(--on-dark); color: var(--ink); }
.btn--on-dark:hover { background: var(--accent); color: var(--on-dark); }
.btn--block { display: block; width: 100%; padding-inline: 24px; }
.btn[disabled] { opacity: .6; cursor: not-allowed; }
/* Underlined uppercase link — "See the Grand", cross-links. */
.link-rule {
align-self: flex-start;
font-size: 12.5px;
font-weight: 600;
letter-spacing: .12em;
text-transform: uppercase;
color: var(--accent);
border-bottom: 1.5px solid var(--accent);
padding-bottom: 3px;
}
.link-rule:hover { text-decoration: none; color: var(--ink); border-bottom-color: var(--ink); }
.link-plain { color: var(--accent); }
/* --------------------------------------------------------------------------
6. Photo placeholders
--------------------------------------------------------------------------
No photography exists yet. Each `.ph` stands in for one shot and is
captioned with the shot it needs. To ship a real image, replace the whole
element with:
-------------------------------------------------------------------------- */
.ph {
display: flex;
align-items: center;
justify-content: center;
text-align: center;
padding: 12px;
background-color: var(--photo-ph);
background-image: repeating-linear-gradient(135deg,
rgba(0, 0, 0, .055) 0 6px,
rgba(0, 0, 0, 0) 6px 12px);
color: var(--ink-ph);
font-size: 11px;
letter-spacing: .14em;
text-transform: uppercase;
}
.ph--lg { font-size: 12px; letter-spacing: .16em; }
.ph--sm { font-size: 10px; letter-spacing: .12em; }
/* A real photo dropped into a grid cell should fill it the same way. */
.photo { width: 100%; height: 100%; object-fit: cover; }
/* is inline by default, which would leave a baseline gap under the
image and stop it filling a fixed-height tile. */
picture { display: block; }
/* Pulls the crop downwards. Needed where a portrait master sits in a landscape
slot — a centred crop would frame empty sky instead of the building. */
.photo--focus-below { object-position: 50% 65%; }
/* --------------------------------------------------------------------------
7. Header
-------------------------------------------------------------------------- */
.site-header {
background: var(--bg);
border-bottom: 1px solid var(--rule);
}
.site-header__inner {
display: flex;
align-items: center;
justify-content: space-between;
gap: 32px;
padding-block: 20px;
}
.wordmark {
display: flex;
flex-direction: column;
line-height: 1;
}
.wordmark:hover { text-decoration: none; }
.wordmark__name {
font-family: var(--font-display);
font-weight: 400;
font-size: 23px;
letter-spacing: .01em;
}
.wordmark__place {
font-size: 9.5px;
letter-spacing: .24em;
text-transform: uppercase;
color: var(--ink-label);
margin-top: 5px;
}
.site-nav {
display: flex;
align-items: center;
gap: 30px;
font-size: 12.5px;
font-weight: 500;
letter-spacing: .13em;
text-transform: uppercase;
}
.site-nav > a[aria-current="page"],
.nav-item__toggle.is-current {
color: var(--accent);
border-bottom: 1.5px solid var(--accent);
padding-bottom: 3px;
}
/* Dropdown ------------------------------------------------------------------
THE CHALETS is a category, not a page — it opens a submenu listing each
chalet. Adding a third one is a matter of adding an to the .nav-sub on
every page; docs/tools/check-launch.sh fails if the pages disagree. */
/* The nav and the dropdown item fill the header vertically, so the panel can
hang from `top: 100%` and land exactly on the header's bottom rule whatever
the nav text metrics turn out to be once the webfont loads. */
.site-header__inner > .site-nav { align-self: stretch; }
.nav-item {
position: relative;
display: flex;
align-items: center;
align-self: stretch;
}
.nav-item__toggle {
display: inline-flex;
align-items: center;
gap: 7px;
margin: 0;
padding: 0;
border: none;
background: none;
color: inherit;
font: inherit;
letter-spacing: inherit;
text-transform: inherit;
cursor: pointer;
transition: var(--t);
}
.nav-item__toggle:hover { color: var(--accent); }
/* Typographic marks only, per the brief — this is a 4px CSS triangle, not an
icon set. It flips when the menu is open. */
.nav-item__caret {
width: 0;
height: 0;
border-left: 3.5px solid transparent;
border-right: 3.5px solid transparent;
border-top: 4px solid currentColor;
opacity: .55;
transition: transform var(--t-ui, .18s) ease, opacity var(--t-ui, .18s) ease;
}
.nav-item__toggle[aria-expanded="true"] .nav-item__caret {
transform: rotate(180deg);
opacity: 1;
}
.nav-sub {
display: none;
position: absolute;
top: 100%;
left: -18px;
z-index: 70;
min-width: 200px;
margin-top: 21px; /* the header's 20px padding + its 1px rule */
padding: 6px 0;
background: var(--bg);
border: 1px solid var(--rule);
text-transform: none;
letter-spacing: .04em;
font-size: 13px;
font-weight: 400;
}
/* Bridges the gap between the trigger and the panel so the pointer can travel
into the submenu without it closing underneath. */
.nav-sub::before {
content: "";
position: absolute;
inset: -21px 0 100% 0;
}
.nav-item.is-open > .nav-sub { display: block; }
.nav-sub a {
display: block;
padding: 9px 18px;
color: var(--ink);
white-space: nowrap;
}
.nav-sub a:hover {
text-decoration: none;
background: var(--bg-sand);
color: var(--accent);
}
.nav-sub a[aria-current="page"] {
color: var(--accent);
font-weight: 500;
}
/* Keyboard and no-JS fallback: the panel opens on hover and whenever anything
inside it has focus, so the chalet pages stay reachable even if site.js
never runs. Desktop only — below 900px this becomes an accordion. */
@media (min-width: 900px) {
.nav-item:hover > .nav-sub,
.nav-item:focus-within > .nav-sub { display: block; }
}
.lang {
display: flex;
gap: 8px;
font-size: 11px;
font-weight: 400;
letter-spacing: .1em;
text-transform: none;
color: var(--ink-label);
padding-left: 6px;
border-left: 1px solid var(--rule);
}
.lang a[aria-current="true"] { color: var(--ink); }
/* Hamburger — shown once the horizontal nav no longer fits (see §14). */
.nav-toggle {
display: none;
width: 44px;
height: 44px;
margin-right: -10px;
padding: 0;
border: none;
background: none;
color: var(--ink);
cursor: pointer;
}
.nav-toggle__bars,
.nav-toggle__bars::before,
.nav-toggle__bars::after {
display: block;
width: 22px;
height: 1.5px;
background: currentColor;
content: "";
}
.nav-toggle__bars {
position: relative;
margin: 0 auto;
}
.nav-toggle__bars::before { position: absolute; top: -7px; }
.nav-toggle__bars::after { position: absolute; top: 7px; }
.nav-toggle[aria-expanded="true"] .nav-toggle__bars { background: transparent; }
.nav-toggle[aria-expanded="true"] .nav-toggle__bars::before { top: 0; transform: rotate(45deg); }
.nav-toggle[aria-expanded="true"] .nav-toggle__bars::after { top: 0; transform: rotate(-45deg); }
/* --------------------------------------------------------------------------
8. Hero (home)
-------------------------------------------------------------------------- */
.hero {
position: relative;
width: 100%;
max-width: var(--page);
margin-inline: auto;
height: 520px;
display: flex;
align-items: flex-end;
overflow: hidden;
}
.hero__media {
position: absolute;
inset: 0;
}
.hero__overlay {
position: relative;
width: 100%;
padding: 56px var(--pad) 40px;
background: linear-gradient(to top, rgba(28, 24, 19, .72), rgba(28, 24, 19, 0));
display: flex;
align-items: flex-end;
justify-content: space-between;
gap: 40px;
}
.hero__text {
max-width: 620px;
color: var(--on-hero);
}
.hero__eyebrow { opacity: .8; margin-bottom: 18px; }
.hero__text h1 { margin-bottom: 18px; }
.hero__lede {
font-size: 17px;
line-height: 1.6;
max-width: 520px;
color: var(--on-hero-soft);
}
.hero__cta { flex: none; }
/* --------------------------------------------------------------------------
9. The chalets — card grid
-------------------------------------------------------------------------- */
.stack-40 { display: flex; flex-direction: column; gap: 40px; }
.stack-38 { display: flex; flex-direction: column; gap: 38px; }
.stack-32 { display: flex; flex-direction: column; gap: 32px; }
.chalet-grid {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 36px;
}
.chalet-card { display: flex; flex-direction: column; }
.chalet-card__media { height: 300px; }
.chalet-card__body {
padding-top: 26px;
display: flex;
flex-direction: column;
gap: 12px;
}
.chalet-card__title {
display: flex;
align-items: baseline;
justify-content: space-between;
gap: 16px;
}
.chalet-card__price {
font-size: 12px;
letter-spacing: .06em;
color: var(--accent);
white-space: nowrap;
}
.chalet-card__text {
font-size: 15.5px;
line-height: 1.65;
color: var(--ink-soft);
}
.chalet-card .link-rule { margin-top: 4px; }
/* --------------------------------------------------------------------------
10. Things to do — dark band
--------------------------------------------------------------------------
The hairlines between cells are the grid background showing through a 1px
gap; every cell repaints itself with the band colour. */
.activity-grid {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 1px;
background: var(--on-dark-rule);
}
.activity {
background: var(--bg-dark);
padding: 30px 28px 34px;
min-height: 150px;
display: flex;
flex-direction: column;
gap: 10px;
}
.activity__num {
font-size: 11px;
letter-spacing: .14em;
color: var(--accent-light);
}
.activity p {
font-size: 14px;
line-height: 1.6;
color: var(--on-dark-soft);
}
/* --------------------------------------------------------------------------
11. Availability — rail + form
-------------------------------------------------------------------------- */
.availability {
display: flex;
gap: 56px;
align-items: flex-start;
}
.availability__rail {
width: 320px;
flex: none;
display: flex;
flex-direction: column;
gap: 16px;
}
.availability__phone {
font-size: 13px;
letter-spacing: .04em;
color: var(--accent);
border-top: 1px solid var(--rule-input);
padding-top: 16px;
margin-top: 6px;
align-self: flex-start;
}
.early-bird {
margin-top: 8px;
background: var(--accent);
color: var(--bg-sand);
padding: 18px 20px;
}
.early-bird__label {
font-size: 10.5px;
letter-spacing: .18em;
text-transform: uppercase;
opacity: .75;
margin-bottom: 7px;
}
.early-bird__body { font-size: 14.5px; line-height: 1.55; }
/* Form ---------------------------------------------------------------- */
/* The form sits in its own flex child so that swapping the