/* Vendor libraries are linked directly in each page's rather
than @import'd here - @import serializes the download (browser must
fetch and parse this file before it even discovers the imports),
while separate tags let the browser fetch all of them in
parallel. This was the single biggest render-blocking cost on the
site (PageSpeed Insights, Sep 2026). */
@font-face {
font-family: "EB Garamond";
src: url('../css/vendor/ebgaramond-var.woff2') format('woff2');
font-weight: 400 700;
font-style: normal;
font-display: swap;
}
@font-face {
font-family: "Work Sans";
src: url('../css/vendor/worksans-var.woff2') format('woff2');
font-weight: 400 700;
font-style: normal;
font-display: swap;
}
@property --progress {
syntax: '';
inherits: true;
initial-value: 0;
}
@keyframes load {
to {
--progress: var(var(--value))
}
}
@keyframes ripple {
from {
opacity: 1;
transform: scale3d(1, 1, 1);
transform-origin: center;
border-width: 0px;
}
to {
opacity: 0;
transform: scale3d(1.7, 1.7, 1.8);
transform-origin: center;
border-width: 13px;
}
}
@keyframes fadeIn{
from {
opacity: 0;
transform: translate(0);
}
to{
opacity: 1;
transform: translate(0);
}
}
@keyframes fadeInLeft {
from {
opacity: 0;
transform: translateX(-500px);
}
to {
opacity: 1;
transform: translateX(0);
}
}
@keyframes fadeInRight {
from {
opacity: 0;
transform: translateX(500px);
}
to {
opacity: 1;
transform: translateX(0);
}
}
@keyframes fadeInUp {
from {
opacity: 0;
transform: translateY(100px);
}
to {
opacity: 1;
transform: translateY(0);
}
}
@keyframes fadeInDown {
from {
opacity: 0;
transform: translateY(-100px);
}
to {
opacity: 1;
transform: translateY(0);
}
}
:root {
/* Bootstrap sets scroll-behavior: smooth on :root (specificity of a
class, so a plain `html` selector here can't win). Same-page nav
anchors (#story, #cabin, etc.) depend on this actually landing —
an animation that stalls leaves the click looking like it did
nothing, with no fallback. Same reasoning as the fade-in safety
net in script.js: a critical interaction shouldn't depend on an
animation completing. */
scroll-behavior: auto;
}
:root{
/* Red Beech Cabin palette — pulled from the new mark and the cabin's
own photography, not the Amity demo. See docs in project root. */
--paper: #F7F1E4;
--ink: #241F18;
--pine: #24392C;
--pine-deep: #152219;
--ember: #9A4B33;
--stone: #E7DFCC;
--water: #4C6B6C;
/* Pale storybook-page backgrounds - light tints of Pine and Ember,
not new hues. Verified: --ink and --pine both clear 9.8:1+ on
either, so body copy and inline links stay readable unchanged. */
--moss-pale: #E6EAE0;
--terracotta-pale: #F2E2D6;
--primary: #FFFDF8;
--text-color: #3A342A;
--text-color-2: #FBF6EA;
--background-color: var(--paper);
--accent-color: var(--pine);
--accent-color-2: var(--text-color-2);
--accent-color-3: var(--ink);
--font-1: "EB Garamond", "Iowan Old Style", Georgia, serif;
--font-2: "Work Sans", -apple-system, "Segoe UI", Helvetica, Arial, sans-serif;
}
/* Eyebrow/kicker labels ("About Us", "Booking"...) get the sparing second
accent instead of the workhorse Pine used everywhere else.
These are
, not real headings - they were
purely for the small styling, which broke the page's heading
hierarchy (h1 -> h6 -> h2 -> h3 -> h6 ..., flagged by Lighthouse).
The actual section heading is always the adjacent
so hero/footer/nav links (already explicitly classed
accent-color-2, and correctly light-on-dark) are untouched.
Same bug, same fix, for the other light-background contexts that
put a link directly inside their own element rather than inside a
: FAQ accordion answers (.accordion-body), the pricing/story
fact lists (.list-ember li), and the About page's
of business/
contact details (dd) - all were still falling through to the
near-invisible default. */
p a:not(.btn),
.accordion-body a:not(.btn),
.list-ember a:not(.btn),
dd a:not(.btn) {
color: var(--pine);
text-decoration: underline;
text-underline-offset: 2px;
}
p a:not(.btn):hover,
.accordion-body a:not(.btn):hover,
.list-ember a:not(.btn):hover,
dd a:not(.btn):hover {
color: var(--ember-bright);
}
/* ============================================================
Book page-turn scroll - #story, #cabin, #around-you, #gallery
are physical "sheets": as you scroll down through one, it lifts
at the bottom-right and rotates open toward the top-left (hinged
there, like a book's spine), revealing the next sheet
underneath. Same paper/moss/terracotta rounded-frame look as the
hero (.hero-frame), same clamp() values, on purpose.
.page-sheet is `min-height`, not a fixed `height` - it was fixed
with an inner `overflow-y: auto` at first, so the Bentral price
table and the photo mosaic couldn't stretch it or get clipped by
it. In practice that read as a bug: a photo sitting right at the
box's edge just looked sliced off, because nobody expects or
finds a scrollbar nested inside a page. min-height lets the
sheet grow to fit its own content instead, same as a normal
page - which is also why #pricing isn't one of these anymore.
Its content is Bentral's price-list table, rendered by their own
script with a height we don't control at all; a page that's tall
or short depending on what a third party's JS does on a given
day is a bad fit for a "turning page" that's meant to feel like
a fixed object. Pricing is a normal page now, its price list
lives on book.html - the same pattern #faq already uses: a
teaser here, the full thing on faq.html.
.page-spacer is the outer, tall (200vh) element that gives the
turn scroll distance to play out in; .page-sheet is the visual
page, pinned inside it. The rotation itself is driven by
js/script.js (rAF-throttled scroll handler, respects
prefers-reduced-motion) rather than CSS alone, since the amount
of turn has to track how far scrolled through THIS section's
own range - a plain CSS transition has no notion of that.
z-index starts at 10, comfortably clear of the header/sidebar
chrome (navbar:3, overlay:4, sidebar:5), so the open mobile menu
is never at risk of being painted over. Below 780px, or with
reduced motion, the whole mechanic drops to plain stacked
sections - no pin, no turn - both because a page that's forced
to be one screen tall is a worse fit for a small screen than
just letting it flow normally, and because iOS Safari's
address-bar resize makes 100vh pinning visibly janky.
============================================================ */
main { perspective: 2200px; }
.page-spacer {
position: relative;
/* Height is set by js/script.js: this section's own .page-sheet
height, plus a fixed amount of extra scroll room (TURN_ROOM_PX).
A flat 200vh here, decoupled from how tall the content actually
is, was the original bug - it left a huge, content-dependent
gap before the next section arrived. Sizing to content height
plus a small constant keeps that gap small and predictable
instead of eliminating it outright: the next section can only
start entering the viewport once this ENTIRE spacer (not just
the sheet's own CSS-sticky "stuck" span, which ends earlier -
see js/script.js) has scrolled past, since the sheet, being
taller than one viewport for most sections, keeps scrolling
normally for a while after it un-sticks before it's fully
gone. js/script.js ties the rotation to the spacer's own full
scrollable range for exactly this reason, so the turn is still
actively happening for that whole stretch rather than sitting
motionless and fully turned while nothing else happens.
min-height is only the pre-JS fallback, for the instant before
that measurement runs. */
min-height: 100vh;
overflow-x: hidden;
}
.page-sheet {
position: sticky;
top: clamp(10px, 2vw, 26px);
min-height: calc(100vh - clamp(20px, 4vw, 52px));
margin-inline: clamp(10px, 2vw, 26px);
border-radius: clamp(18px, 2.4vw, 40px);
/* Deliberately NOT a fixed height + inner overflow-y:auto. That
looked like a bug in practice: a photo sitting right at the box's
lower edge just gets sliced, with no visible cue that there's
more below in a SECOND, nested scroll area - nobody expects or
finds a scrollbar inside a page. min-height lets the sheet grow
to fit whatever it holds instead, exactly like a normal page;
nothing is ever cropped. */
box-shadow: 0 40px 90px -30px rgba(0, 0, 0, 0.55);
transform-origin: top left;
transform-style: preserve-3d;
backface-visibility: hidden;
display: flex;
align-items: center;
padding: clamp(2.5rem, 5vw, 5rem) clamp(1.5rem, 4vw, 4rem);
will-change: transform;
--turn: 0;
}
/* A flat rectangle rotating in 3D reads as stiff cardboard, not
paper - real paper isn't flat while it turns, it bends. A cheap
but genuine cue for that: a soft shadow gathering along the loose
(right) edge as the turn progresses, as if the sheet is curling
rather than swinging on a hinge. --turn (0-1) is set by
js/script.js in lockstep with the rotation itself. */
.page-sheet::after {
content: "";
position: absolute;
inset: 0;
border-radius: inherit;
pointer-events: none;
background: linear-gradient(to right, transparent 45%, rgba(20, 15, 10, 0.4) 100%);
opacity: var(--turn);
z-index: 5;
}
#story .page-sheet { z-index: 10; background-color: var(--paper); }
#cabin .page-sheet { z-index: 11; background-color: var(--moss-pale); }
#around-you .page-sheet { z-index: 12; background-color: var(--terracotta-pale); }
#gallery .page-sheet { z-index: 13; background-color: var(--paper); }
@media (max-width: 780px), (prefers-reduced-motion: reduce) {
.page-spacer { height: auto; }
.page-sheet {
position: relative;
top: auto;
min-height: auto;
margin-inline: 0.5em;
transform: none !important;
box-shadow: none;
}
}
/* ============================================================
PAGE-TURN: OFF (backlog item, not a removal). Repeats the mobile
fallback above with no media condition, so it wins at every
viewport - #story/#cabin/#around-you/#gallery render as plain
stacked sections again, matching js/script.js's own kill switch
(PAGE_TURN_ENABLED). Delete this block and flip that flag back to
re-enable; everything the effect needs is still intact above.
============================================================ */
.page-spacer { height: auto; }
.page-sheet {
position: relative;
top: auto;
min-height: auto;
margin-inline: 0.5em;
transform: none !important;
box-shadow: none;
}
/* ---- Story: tall photo + a small accent photo tucked at its
corner, with the copy card overlapping the main photo's edge ---- */
.story-collage {
position: relative;
display: grid;
grid-template-columns: 0.85fr 1.15fr;
align-items: center;
gap: 0;
}
.story-collage > * { min-width: 0; }
.story-photo-main {
grid-column: 1;
grid-row: 1;
border-radius: 20px;
overflow: hidden;
aspect-ratio: 3 / 4;
}
.story-photo-main img {
width: 100%;
height: 100%;
object-fit: cover;
display: block;
}
.story-photo-accent {
position: absolute;
left: 0;
bottom: -8%;
width: 42%;
border-radius: 16px;
overflow: hidden;
box-shadow: 0 24px 48px -16px rgba(36, 25, 16, 0.35);
border: 6px solid var(--paper);
z-index: 1;
}
.story-photo-accent img {
width: 100%;
display: block;
}
.story-copy {
grid-column: 2;
grid-row: 1;
margin-left: -14%;
background: var(--paper);
border-radius: 20px;
padding: clamp(1.75rem, 3vw, 3rem);
box-shadow: 0 20px 60px -24px rgba(36, 25, 16, 0.3);
display: flex;
flex-direction: column;
gap: 1rem;
position: relative;
z-index: 2;
}
.story-facts {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 1.25rem;
margin-top: 0.5rem;
}
@media (max-width: 900px) {
.story-collage { grid-template-columns: 1fr; }
.story-photo-main { grid-row: 1; aspect-ratio: 4 / 3; }
.story-photo-accent { display: none; }
.story-copy { grid-row: 2; margin-left: 0; margin-top: -10%; margin-inline: 1rem; }
.story-facts { grid-template-columns: 1fr; }
}
/* ---- Cabin: same overlap move on the Living Room photo, then
the remaining three rooms as an even, ungapped mosaic row ---- */
.cabin-intro-collage {
position: relative;
display: grid;
grid-template-columns: 1.1fr 0.9fr;
align-items: center;
}
.cabin-intro-collage > * { min-width: 0; }
.cabin-intro-collage .image-container { grid-column: 1; grid-row: 1; aspect-ratio: 4 / 3; height: auto; }
.cabin-intro-copy {
grid-column: 2;
grid-row: 1;
margin-left: -10%;
background: var(--paper);
border-radius: 20px;
padding: clamp(1.5rem, 2.5vw, 2.5rem);
box-shadow: 0 20px 50px -22px rgba(36, 25, 16, 0.3);
position: relative;
z-index: 1;
display: flex;
flex-direction: column;
gap: 0.85rem;
}
@media (max-width: 900px) {
.cabin-intro-collage { grid-template-columns: 1fr; }
.cabin-intro-collage .image-container { grid-row: 1; }
.cabin-intro-copy { grid-row: 2; margin-left: 0; margin-top: -8%; margin-inline: 1rem; }
}
.cabin-mosaic {
display: grid;
grid-template-columns: repeat(12, 1fr);
gap: 1.25rem;
}
.cabin-mosaic > * { grid-column: span 4; min-width: 0; }
.cabin-mosaic .image-container { height: auto; aspect-ratio: 1 / 1; }
@media (max-width: 780px) {
.cabin-mosaic { grid-template-columns: 1fr; }
.cabin-mosaic > * { grid-column: span 1; }
}
/* ---- Around You: text and the tree accent as an asymmetric
pair instead of two equal centred columns, activities in a
plain even grid (three genuinely parallel items - no need to
force artificial overlap where nothing is actually behind) ---- */
.around-intro {
display: flex;
align-items: flex-end;
justify-content: space-between;
gap: 2rem;
flex-wrap: wrap;
}
.around-intro .around-copy { max-width: 480px; }
@media (max-width: 780px) {
.around-intro { flex-direction: column; align-items: center; text-align: center; }
}
.around-activities {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 1.75rem;
}
.around-activities > * { min-width: 0; }
@media (max-width: 900px) { .around-activities { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 600px) { .around-activities { grid-template-columns: 1fr; } }
/* ---- Gallery: two tiles promoted to a 2x2 span so the grid
reads as a curated mosaic instead of eight identical squares ---- */
.gallery-mosaic {
display: grid;
grid-template-columns: repeat(4, 1fr);
grid-auto-rows: 15vw;
grid-auto-flow: dense;
gap: 1rem;
}
.gallery-mosaic .gallery-item { aspect-ratio: auto; min-width: 0; }
.gallery-mosaic .gallery-item:nth-child(1),
.gallery-mosaic .gallery-item:nth-child(4) {
grid-column: span 2;
grid-row: span 2;
}
@media (max-width: 780px) {
.gallery-mosaic { grid-template-columns: repeat(2, 1fr); grid-auto-rows: 28vw; }
}
/* ---- Reviews: real guest quotes, on-site - the point is to give
people enough here that they book direct instead of clicking
through to Airbnb/Booking.com to read more. Same number-plus-label
treatment as .hero-fact (1885 / Foundation Stone Laid), reused here
for the stay count so the two "trust" numbers on the page read as
one consistent device. ---- */
.review-stat {
display: flex;
flex-direction: column;
align-items: center;
font-family: var(--font-1);
margin-top: 0.25rem;
}
.review-stat .review-stat-num {
font-size: clamp(1.8rem, 1.6vw + 1.2rem, 2.6rem);
color: var(--paper);
line-height: 1;
}
.review-stat .review-stat-label {
font-family: var(--font-2);
font-size: 0.7rem;
letter-spacing: 0.16em;
text-transform: uppercase;
color: var(--stone);
opacity: 0.85;
margin-top: 0.35rem;
}
.review-grid {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 1.25rem;
width: 100%;
text-align: left;
}
.review-card {
background: rgba(247, 241, 228, 0.07);
border: 1px solid rgba(247, 241, 228, 0.16);
border-radius: 16px;
padding: 1.6rem;
display: flex;
flex-direction: column;
gap: 1rem;
}
.review-card p {
color: var(--stone);
font-size: 0.95rem;
line-height: 1.65;
margin: 0;
}
.review-card .review-meta {
display: flex;
justify-content: space-between;
align-items: baseline;
gap: 0.75rem;
font-family: var(--font-1);
}
.review-card .review-name {
color: var(--paper);
font-weight: 600;
}
.review-card .review-source {
font-family: var(--font-2);
font-size: 0.68rem;
letter-spacing: 0.1em;
text-transform: uppercase;
color: var(--stone);
opacity: 0.7;
white-space: nowrap;
}
/* One honestly mixed review sits in the mix on purpose - an
all-perfect wall of quotes reads as curated, not real. This border
just marks it as a slightly different register, not a warning. */
.review-card.review-mixed {
border-color: rgba(154, 75, 51, 0.4);
}
@media (max-width: 900px) {
.review-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 600px) {
.review-grid { grid-template-columns: 1fr; }
}
/* ---- Language switcher: sits in the header next to Check
Availability, on the transparent-over-photo bar every page shares,
so --paper/--stone match whatever's already used there. The current
language is shown but not a link (pointer-events:none) - clicking
your own language shouldn't be a dead reload. ---- */
.lang-switch {
display: flex;
align-items: center;
gap: 0.35rem;
font-family: var(--font-2);
font-size: 0.78rem;
letter-spacing: 0.04em;
/* Every other piece of header chrome (Check Availability, the
hamburger) sits on a solid pine fill, which is exactly what
keeps it readable no matter what part of the hero photo is
behind it. This was bare text with no backing of its own, so
wherever it happened to land over a bright patch of sky it
nearly disappeared. Same fix: a solid chip underneath it. */
background-color: var(--pine-deep);
padding: 0.3rem 0.65rem;
border-radius: 999px;
}
.lang-switch .lang-link {
color: var(--paper);
opacity: 0.55;
text-decoration: none;
}
.lang-switch .lang-link:hover {
opacity: 0.85;
}
.lang-switch .lang-link.is-active {
opacity: 1;
font-weight: 600;
pointer-events: none;
}
.lang-switch .lang-sep {
color: var(--paper);
opacity: 0.35;
}