/* ==========================================================================
The White Hart, Great Yeldham — site styles
Rebuild of whitehartgreatyeldham.co.uk. Mobile first.
========================================================================== */
:root {
--primary: 4, 53, 32; /* deep green #043520 */
--primary-light: 2, 66, 36; /* nav green #024224 */
--secondary: 214, 217, 190; /* sage #D6D9BE */
--secondary-light: 235, 238, 216;
--secondary-dark: 181, 185, 146;
--tertiary: 182, 147, 127; /* clay #B6937F */
--tertiary-dark: 146, 112, 94;
--ink: #231f20;
--paper: #ffffff;
--serif: "Cormorant Garamond", "Times New Roman", serif;
--sans: "Jost", "Gill Sans", "Helvetica Neue", Arial, sans-serif;
--radius: 4px;
--header-h: 8.5rem;
--space: clamp(3rem, 7vw, 5.5rem);
--ease: cubic-bezier(.06, .79, .53, .99);
}
/* Reset ------------------------------------------------------------------ */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; overflow-x: clip; }
body {
margin: 0;
font-family: var(--sans);
font-weight: 300;
font-size: 1rem;
line-height: 1.7;
color: var(--ink);
background: var(--paper);
overflow-x: hidden;
}
img { max-width: 100%; height: auto; display: block; }
figure { margin: 0; }
h1, h2, h3, h4, h5 {
font-family: var(--serif);
font-weight: 500;
line-height: 1.2;
margin: 0 0 1rem;
color: inherit;
}
p { margin: 0 0 1rem; }
a { color: rgb(var(--primary)); text-underline-offset: 3px; }
a:hover { color: rgb(var(--tertiary-dark)); }
ul, ol { padding-left: 1.4rem; }
blockquote { margin: 0; }
button { font-family: inherit; }
:focus-visible { outline: 2px solid rgb(var(--tertiary)); outline-offset: 2px; }
.sr-only {
position: absolute; width: 1px; height: 1px; margin: -1px;
padding: 0; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}
.skip-link {
position: absolute; left: 0.5rem; top: -3rem; z-index: 200;
background: rgb(var(--primary)); color: #fff; padding: 0.5rem 1rem;
border-radius: var(--radius); transition: top 0.2s;
}
.skip-link:focus { top: 0.5rem; color: #fff; }
.desktop-only { display: none; }
@media (min-width: 1024px) { .desktop-only { display: inline; } }
/* Icons (inline SVG masks, colour follows currentColor) ------------------ */
.icon, i[class*="fa-"] {
display: inline-block; width: 1.1em; height: 1.1em; vertical-align: -0.15em;
background-color: currentColor;
-webkit-mask: var(--icon) center / contain no-repeat;
mask: var(--icon) center / contain no-repeat;
}
.icon-phone, i.fa-phone { --icon: url('data:image/svg+xml,');
}
.icon-bars, i.fa-bars { --icon: url('data:image/svg+xml,'); }
.icon-close { --icon: url('data:image/svg+xml,'); }
i.fa-angle-down, .icon-angle-down { --icon: url('data:image/svg+xml,'); }
i.fa-angle-up { --icon: url('data:image/svg+xml,'); }
i.fa-angle-right, .icon-angle-right { --icon: url('data:image/svg+xml,'); }
i.fa-mouse-alt { --icon: url('data:image/svg+xml,'); }
i.fa-spinner-third { display: none; }
.icon-facebook { --icon: url('data:image/svg+xml,'); }
.icon-instagram { --icon: url('data:image/svg+xml,'); }
.icon-tripadvisor { --icon: url('data:image/svg+xml,'); }
/* Buttons ----------------------------------------------------------------- */
/* Body buttons keep sentence case, as on the original; only the header,
navigation and card links are set in capitals. */
.btn {
display: inline-block;
padding: 1rem;
border: 0;
border-radius: var(--radius);
font-family: var(--sans);
font-weight: 400;
font-size: 1rem;
text-decoration: none;
line-height: 1.3;
cursor: pointer;
text-align: center;
transition: background-color 0.25s var(--ease), color 0.25s var(--ease);
}
.header-ctas .btn, .booking-drop-menu-btn, .mobile-nav-ctas .btn {
text-transform: uppercase; letter-spacing: 0.12em; font-size: 0.8rem;
}
.primary-btn { background: rgb(var(--primary)); color: #fff; }
.primary-btn:hover { background: rgb(var(--primary-light)); color: #fff; }
.secondary-btn { background: rgb(var(--secondary)); color: rgb(var(--primary)); }
.secondary-btn:hover { background: rgb(var(--secondary-dark)); color: rgb(var(--primary)); }
.tertiary-btn { background: rgb(var(--tertiary)); color: #fff; }
.tertiary-btn:hover { background: rgb(var(--tertiary-dark)); color: #fff; }
.outline-btn { background: transparent; color: inherit; border: 1px solid currentColor; }
/* Header ------------------------------------------------------------------ */
#site-header {
position: fixed;
top: 0; left: 0; right: 0;
z-index: 100;
color: #fff;
transition: background-color 0.3s var(--ease), box-shadow 0.3s var(--ease);
background: linear-gradient(to bottom, rgba(10, 20, 15, 0.55), rgba(10, 20, 15, 0));
}
body:not(.has-hero) #site-header,
#site-header.scrolled {
background: #fff;
color: var(--ink);
box-shadow: 0 1px 6px rgba(0, 0, 0, 0.12);
}
.header-container {
display: grid;
grid-template-columns: 1fr auto 1fr;
align-items: center;
gap: 0.5rem;
padding: 0.6rem 0.75rem;
max-width: 1500px;
margin: 0 auto;
}
@media (min-width: 1024px) { .header-container { padding: 0.6rem 1rem; } }
.logo a { display: block; color: inherit; }
.logo svg { display: block; width: min(46vw, 300px); height: auto; }
.logo svg * { fill: currentColor; }
.logo svg .cls-1 { fill: none; }
.contact-info { display: flex; align-items: center; gap: 1rem; justify-self: start; }
.phone-link { display: inline-flex; align-items: center; gap: 0.5rem; color: inherit; text-decoration: none; font-size: 0.95rem; }
.menu-toggle {
display: inline-flex; align-items: center; gap: 0.45rem;
background: none; border: 0; color: inherit; cursor: pointer;
font-size: 0.85rem; letter-spacing: 0.1em; text-transform: uppercase; padding: 0.25rem;
}
.menu-toggle .icon { width: 1.3em; height: 1.3em; }
.menu-toggle-label { display: none; }
.header-ctas { justify-self: end; display: flex; align-items: center; gap: 0.6rem; }
.header-ctas .voucher { display: none; }
.header-ctas .btn { padding: 0.65rem 1.1rem; font-size: 0.8rem; white-space: nowrap; }
@media (max-width: 1023px) {
.header-ctas .btn { padding: 0.55rem 0.7rem; font-size: 0.72rem; letter-spacing: 0.08em; }
.phone-link { font-size: 0.85rem; }
}
.book-btn { background: rgb(var(--secondary)); color: rgb(var(--primary)); }
.book-btn:hover { background: rgb(var(--secondary-dark)); }
.book-now-container { position: relative; }
.button-holder {
position: absolute; right: 0; top: calc(100% + 0.4rem);
min-width: 13rem;
display: flex;
flex-direction: column;
background: rgb(var(--primary));
border-radius: var(--radius);
overflow: hidden;
box-shadow: 0 8px 20px rgba(0, 0, 0, 0.25);
opacity: 0; visibility: hidden; translate: 0 -6px;
transition: opacity 0.25s var(--ease), translate 0.25s var(--ease), visibility 0.25s;
}
.book-now-container.open .button-holder { opacity: 1; visibility: visible; translate: 0 0; }
.booking-drop-menu-btn {
color: #fff; text-decoration: none; padding: 0.85rem 1.2rem;
font-size: 0.85rem; letter-spacing: 0.1em; text-transform: uppercase;
border-bottom: 1px solid rgba(255, 255, 255, 0.15);
}
.booking-drop-menu-btn:last-child { border-bottom: 0; }
.booking-drop-menu-btn:hover { background: rgb(var(--primary-light)); color: #fff; }
/* Desktop nav */
.desktop-nav { display: none; }
@media (min-width: 1024px) {
.desktop-nav { display: block; }
.menu-toggle { display: none; }
.header-ctas .voucher { display: inline-block; }
#site-header.scrolled .desktop-nav,
body:not(.has-hero) .desktop-nav { background: rgb(var(--primary-light)); }
.desktop-nav > ul {
display: flex; flex-wrap: wrap; justify-content: center; gap: 0.25rem;
list-style: none; margin: 0 auto; padding: 0; max-width: 1300px;
}
.desktop-nav li { position: relative; }
.desktop-nav a, .desktop-nav .nav-label {
display: block; padding: 0.7rem 0.9rem;
color: #fff; text-decoration: none;
font-size: 0.85rem; letter-spacing: 0.1em; text-transform: uppercase; font-weight: 400;
cursor: pointer; white-space: nowrap;
}
.desktop-nav > ul > li > a::after, .desktop-nav > ul > li > .nav-label::after {
content: ""; display: block; height: 1px; background: #fff;
transform: scaleX(0); transition: transform 0.3s var(--ease);
}
.desktop-nav > ul > li:hover > a::after,
.desktop-nav > ul > li > a.active::after { transform: scaleX(1); }
.desktop-nav ul ul {
position: absolute; top: 100%; left: 50%; transform: translateX(-50%);
min-width: 15rem;
background: rgb(var(--primary));
list-style: none; padding: 0.4rem 0; margin: 0;
border-radius: 0 0 var(--radius) var(--radius);
box-shadow: 0 10px 24px rgba(0, 0, 0, 0.25);
opacity: 0; visibility: hidden; translate: 0 8px;
transition: opacity 0.25s var(--ease), translate 0.25s var(--ease), visibility 0.25s;
}
.desktop-nav li:hover > ul, .desktop-nav li:focus-within > ul {
opacity: 1; visibility: visible; translate: 0 0;
}
.desktop-nav ul ul a { padding: 0.55rem 1.2rem; white-space: normal; text-align: center; }
.desktop-nav ul ul a:hover { background: rgb(var(--primary-light)); }
}
/* Mobile nav -------------------------------------------------------------- */
.mobile-nav {
position: fixed; inset: 0; z-index: 150;
background: rgb(var(--primary));
color: #fff;
overflow-y: auto;
padding: 5.5rem 1.5rem 2.5rem;
}
.mobile-nav[hidden] { display: none; }
body.nav-open { overflow: hidden; }
body.nav-open .menu-toggle .icon-bars { --icon: url('data:image/svg+xml,'); }
body.nav-open #site-header { background: rgb(var(--primary)); color: #fff; box-shadow: none; }
.mobile-nav ul { list-style: none; margin: 0; padding: 0; }
.mobile-nav > .mobile-nav-inner > ul > li { border-bottom: 1px solid rgba(255, 255, 255, 0.18); }
.mobile-nav-item { display: flex; align-items: center; justify-content: space-between; }
.mobile-nav a {
display: block; padding: 0.9rem 0.25rem; color: #fff; text-decoration: none;
font-size: 1.05rem; letter-spacing: 0.08em; text-transform: uppercase;
}
.submenu-toggle {
background: none; border: 0; color: #fff; padding: 0.9rem;
cursor: pointer; font-size: 1rem;
}
.submenu-toggle i { transition: transform 0.3s; }
.submenu-toggle[aria-expanded="true"] i { transform: rotate(180deg); }
.mobile-nav ul ul { padding-left: 1rem; display: none; }
.mobile-nav ul ul.open { display: block; padding-bottom: 0.5rem; }
.mobile-nav ul ul a { font-size: 0.95rem; text-transform: none; letter-spacing: 0.03em; padding: 0.45rem 0.25rem; }
.mobile-nav-ctas { display: grid; gap: 0.75rem; margin-top: 2rem; }
/* Layout helpers ---------------------------------------------------------- */
main.content { min-height: 60vh; }
body:not(.has-hero) main.content { padding-top: calc(var(--header-h) - 2rem); }
section.add-space { margin: var(--space) auto; }
section.no-space { margin: 0; }
/* Hero -------------------------------------------------------------------- */
section.hero { position: relative; overflow: hidden; }
section.hero, section.hero .carousel, section.hero .carousel-track { height: min(92svh, 960px); }
section.hero.small, section.hero.small .carousel, section.hero.small .carousel-track { height: min(60svh, 620px); }
section.hero .carousel-slide, section.hero .card-img { position: absolute; inset: 0; }
section.hero img { width: 100%; height: 100%; object-fit: cover; }
section.hero .video-wrapper { position: absolute; inset: 0; }
section.hero video { width: 100%; height: 100%; object-fit: cover; }
section.hero .hero-overlay { position: absolute; inset: 0; }
section.hero::after {
content: ""; position: absolute; inset: 0; pointer-events: none;
background: linear-gradient(to bottom, rgba(0, 0, 0, 0.25), transparent 30%, transparent 75%, rgba(0, 0, 0, 0.3));
}
.hero-scroll {
position: absolute; bottom: 3.5rem; left: 50%; transform: translateX(-50%);
z-index: 5; color: #fff; text-align: center;
}
.hero-scroll small { display: block; letter-spacing: 0.25em; text-transform: uppercase; font-size: 0.7rem; margin-bottom: 0.4rem; }
.hero-scroll i { width: 1.6em; height: 1.6em; animation: bob 1.6s ease-in-out infinite; }
@keyframes bob { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(6px); } }
/* Carousel ---------------------------------------------------------------- */
.carousel { position: relative; overflow: hidden; max-width: 100%; }
/* stop carousel tracks (N x 100% wide) inflating grid/flex parents */
.img-text-container > *, .three-card-container > *, .splide-card-container > *,
.accommodation-item > *, .testimonial-container, .image-frame, .image-wrap { min-width: 0; }
.carousel-track { display: flex; transition: transform 0.5s var(--ease); }
.carousel-slide { flex: 0 0 100%; min-width: 0; }
.carousel.fade .carousel-track { display: block; transition: none; }
.carousel.fade .carousel-slide {
position: absolute; inset: 0; opacity: 0; transition: opacity 1.1s ease; z-index: 1;
}
.carousel.fade .carousel-slide.current { opacity: 1; z-index: 2; }
.carousel-dots {
position: absolute; bottom: 1rem; left: 0; right: 0; z-index: 6;
display: flex; justify-content: center; gap: 0.5rem;
}
.carousel-dots button {
width: 9px; height: 9px; border-radius: 50%; border: 0; padding: 0;
background: rgba(255, 255, 255, 0.55); cursor: pointer;
}
.carousel-dots button[aria-current="true"] { background: #fff; }
.carousel-arrow {
position: absolute; top: 50%; transform: translateY(-50%); z-index: 6;
width: 2.4rem; height: 2.4rem; border-radius: 50%; border: 0;
background: rgba(255, 255, 255, 0.85); color: rgb(var(--primary));
cursor: pointer; display: grid; place-items: center;
}
.carousel-arrow:hover { background: #fff; }
.carousel-arrow.prev { left: 0.75rem; }
.carousel-arrow.prev i { transform: rotate(180deg); }
.carousel-arrow.next { right: 0.75rem; }
/* Intro ------------------------------------------------------------------- */
section.intro {
max-width: 1024px;
padding: 0 1.25rem;
margin-left: auto; margin-right: auto;
text-align: center;
}
section.intro .tagline {
margin-bottom: 1rem;
color: rgb(var(--tertiary-dark));
letter-spacing: 0.2em; text-transform: uppercase; font-size: 0.85rem;
}
section.intro .section-title, section.intro h1, section.intro h2 {
font-size: clamp(1.9rem, 4.5vw, 3.2rem);
margin-bottom: 1.25rem;
}
/* The stag flourish that closes every intro block */
.flourish {
width: 9rem; height: 6rem; margin: 2rem auto 0;
background: url('/assets/svg/green-stag.svg') no-repeat center center;
background-size: auto 100%;
}
@media (min-width: 1024px) { .flourish { height: 8rem; } }
/* Full text --------------------------------------------------------------- */
section.full-text { max-width: 1280px; margin-left: auto; margin-right: auto; padding: 0 1.25rem; }
section.full-text .title { font-size: clamp(1.6rem, 3vw, 2.1rem); }
/* Three cards ------------------------------------------------------------- */
/* Three states, matching the original:
< 768px image with a dark wash, all copy visible
768-1023 white card, image left / copy right
>= 1024 image with title at the base; hover reveals copy and the link */
section.three-cards { max-width: 1536px; margin-left: auto; margin-right: auto; padding: 0 1.25rem; }
.three-card-container { display: grid; grid-template-columns: 1fr; gap: 0.75rem; }
@media (min-width: 1024px) { .three-card-container { grid-template-columns: repeat(3, 1fr); } }
/* Mobile stacks image and copy in the same grid cell, so the copy sets the
height and can never be clipped by a fixed ratio. */
.three-card-container .card { position: relative; width: 100%; overflow: hidden; display: grid; }
.three-card-container .card-inner { display: contents; }
.three-card-container .card-image { grid-area: 1 / 1; width: 100%; height: 100%; }
.three-card-container .card-image img {
width: 100%; height: 100%; object-fit: cover;
transition: transform 1.2s var(--ease);
}
.three-card-container .card-text {
grid-area: 1 / 1; position: relative;
display: flex; flex-direction: column; align-items: center; justify-content: center;
min-height: 20rem;
padding: 2.5rem 1.25rem; text-align: center; color: #fff;
background: rgba(0, 0, 0, 0.5);
transition: background-color 0.5s var(--ease), box-shadow 0.5s var(--ease);
}
.three-card-container .card-title { width: 100%; }
.three-card-container .title { display: block; font-size: 1.5rem; margin-bottom: 1rem; color: inherit; }
.three-card-container .text { display: block; margin-bottom: 1rem; padding: 0 1.5rem; }
.three-card-container .link {
display: inline-block; margin: 0 auto;
border-bottom: 2px solid rgb(var(--tertiary));
padding-bottom: 0.25rem;
color: rgb(var(--tertiary));
transition: color 0.3s var(--ease), border-color 0.3s var(--ease);
}
.three-card-container .link a { color: inherit; text-decoration: none; letter-spacing: 0.14em; text-transform: uppercase; font-size: 0.85rem; }
.three-card-container .link .deco-line { display: none; }
.three-card-container .card:hover .link, .three-card-container .card:focus-within .link {
color: #fff; border-color: #fff;
}
/* Tablet: a plain white card, image beside the copy */
@media (min-width: 768px) and (max-width: 1023px) {
.three-card-container .card { display: flex; flex-direction: row; background: #fff; }
.three-card-container .card-image { grid-area: auto; width: 50%; }
.three-card-container .card-text {
grid-area: auto; width: 50%; min-height: 0;
justify-content: center;
border: 2px solid #e5e7eb;
background: #fff; color: var(--ink);
padding: 2rem 1.25rem;
}
.three-card-container .title { color: rgb(var(--primary)); }
}
/* Desktop: title sits at the base until hover opens the card up */
@media (min-width: 1024px) {
.three-card-container .card { display: block; cursor: pointer; }
.three-card-container .card-image img { aspect-ratio: 4 / 5; }
.three-card-container .card-text {
position: absolute; inset: 0; min-height: 0;
justify-content: flex-end;
background: rgba(0, 0, 0, 0);
box-shadow: inset 0 10rem 10rem 15rem rgba(0, 0, 0, 0.3);
padding: 1rem;
}
.three-card-container .title { margin-bottom: 0; transition: margin-bottom 0.5s var(--ease); }
.three-card-container .text, .three-card-container .link { display: none; }
.three-card-container .card:hover .card-text,
.three-card-container .card:focus-within .card-text {
justify-content: center;
background: rgba(0, 0, 0, 0.1);
box-shadow: inset 0 10rem 10rem 20rem rgba(0, 0, 0, 0.5);
}
.three-card-container .card:hover .title,
.three-card-container .card:focus-within .title { margin-bottom: 1rem; }
.three-card-container .card:hover .text,
.three-card-container .card:focus-within .text { display: block; }
.three-card-container .card:hover .link,
.three-card-container .card:focus-within .link { display: inline-block; }
.three-card-container .card:hover .card-image img,
.three-card-container .card:focus-within .card-image img { transform: scale(1.05); }
}
/* Decorated text links */
.link { display: inline-block; position: relative; }
.link a {
color: rgb(var(--primary)); text-decoration: none;
letter-spacing: 0.14em; text-transform: uppercase; font-size: 0.85rem;
}
.link .deco-line {
display: block; height: 1px; background: rgb(var(--tertiary));
transform-origin: left; transition: transform 0.3s var(--ease);
}
.link:hover .deco-line { transform: scaleX(0.55); }
/* Image + text ------------------------------------------------------------ */
/* Full-bleed image with a solid panel of copy laid over its inner edge.
Alternate blocks carry .swap, which mirrors the layout and switches the
panel from deep green to sage. */
section.img-text { display: block; width: 100%; padding: 0; max-width: none; }
.img-text-container { display: flex; flex-direction: column; }
@media (min-width: 768px) { .img-text-container { flex-direction: row; } }
@media (min-width: 1024px) { .img-text-container { align-items: center; justify-content: center; } }
.image-wrap { position: relative; z-index: 30; padding: 0; }
@media (min-width: 768px) { .image-wrap { width: 50%; } }
@media (min-width: 1024px) { .image-wrap { width: 60%; } }
.image-wrap .image-frame { position: relative; width: 100%; height: auto; margin-bottom: 0; }
@media (min-width: 768px) { .image-wrap .image-frame { height: 100%; } }
@media (min-width: 1024px) { .image-wrap .image-frame { height: auto; } }
.image-wrap img { width: 100%; height: 100%; object-fit: cover; aspect-ratio: 3 / 2; }
.image-wrap .carousel, .image-wrap .carousel-track, .image-wrap .carousel-slide { height: 100%; }
.image-wrap .carousel.fade { aspect-ratio: 3 / 2; }
.image-wrap .carousel.fade img { position: absolute; inset: 0; height: 100%; }
.content-wrap { z-index: 40; display: block; width: 100%; }
@media (min-width: 768px) { .content-wrap { width: 50%; } }
@media (min-width: 1280px) { .content-wrap { width: 40%; } }
.content-inner {
width: 100%;
padding: 1.5rem;
background: rgb(var(--primary));
color: #fff;
}
@media (min-width: 640px) { .content-inner { padding: 2rem; } }
@media (min-width: 768px) { .content-inner { padding: 1.5rem; } }
/* from here the panel reaches back across the photograph */
@media (min-width: 1024px) { .content-inner { margin-left: -3.5rem; padding: 2rem; } }
@media (min-width: 1280px) { .content-inner { margin-left: -4rem; } }
@media (min-width: 1536px) { .content-inner { margin-left: -13rem; padding: 4rem; } }
.content-inner .title { color: inherit; font-size: clamp(1.6rem, 2.6vw, 2.25rem); }
.content-inner .subtitle {
display: block; margin-bottom: 1rem;
font-size: 0.875rem; text-transform: uppercase; letter-spacing: 0.16em;
color: rgb(var(--tertiary));
}
.content-inner .btn { margin-top: 0.5rem; }
/* Mirrored blocks: image right, sage panel left */
@media (min-width: 768px) {
section.img-text.swap .image-wrap { order: 2; }
section.img-text.swap .content-wrap { order: 1; }
}
section.img-text.swap .content-inner { background: rgb(var(--secondary)); color: rgb(var(--primary)); }
section.img-text.swap .content-inner .subtitle { color: rgb(var(--tertiary-dark)); }
@media (min-width: 1024px) { section.img-text.swap .content-inner { margin-left: 3.5rem; } }
@media (min-width: 1280px) { section.img-text.swap .content-inner { margin-left: 4rem; } }
@media (min-width: 1536px) { section.img-text.swap .content-inner { margin-left: 13rem; } }
/* Two cards (overlay cards) ----------------------------------------------- */
section.two-cards { max-width: 1400px; margin-left: auto; margin-right: auto; padding: 0 1.25rem; }
.splide-card-container { display: grid; gap: 1.75rem; }
@media (min-width: 700px) { .splide-card-container { grid-template-columns: 1fr 1fr; } }
section.two-cards a { text-decoration: none; color: inherit; display: block; }
section.two-cards .card { position: relative; overflow: hidden; border-radius: var(--radius); }
section.two-cards .card-img img { width: 100%; aspect-ratio: 16 / 10.5; object-fit: cover; transition: transform 0.6s var(--ease); }
section.two-cards .card:hover .card-img img { transform: scale(1.045); }
section.two-cards .card-overlay {
position: absolute; inset: 0;
display: flex; align-items: flex-end;
background: linear-gradient(to top, rgba(0, 0, 0, 0.78), rgba(0, 0, 0, 0.25) 55%, transparent);
color: #fff;
}
.overlay-inner { padding: 1.5rem; }
.overlay-inner .card-title { font-size: 1.7rem; margin-bottom: 0.4rem; }
.card-overlay-text { display: block; font-size: 0.95rem; }
.card-overlay-text p { margin-bottom: 0.5rem; }
.card-overlay-text p:last-child { margin-bottom: 0.75rem; }
.icon-link { letter-spacing: 0.14em; text-transform: uppercase; font-size: 0.8rem; border-bottom: 1px solid rgb(var(--secondary)); padding-bottom: 0.2rem; }
@media (min-width: 1024px) {
section.two-cards .card-overlay-text { max-height: 0; opacity: 0; overflow: hidden; transition: max-height 0.5s var(--ease), opacity 0.5s var(--ease); }
section.two-cards .card:hover .card-overlay-text,
section.two-cards a:focus-visible .card-overlay-text { max-height: 20rem; opacity: 1; }
}
@media (max-width: 1023px) {
/* image above, solid green panel below: overlay text never fights the photo */
section.two-cards .card-overlay { position: static; background: rgb(var(--primary)); }
}
/* Highlight band ---------------------------------------------------------- */
/* Sage panel carrying the hart line-pattern, deep green type. */
section.highlight {
background-color: rgb(var(--secondary));
background-image: url('/assets/svg/white-pattern.svg');
background-repeat: no-repeat;
background-size: 400% auto;
background-position: top 28% center;
color: rgb(var(--primary));
}
@media (min-width: 1024px) { section.highlight { background-size: 200% auto; } }
.highlight-inner .content {
max-width: 1280px; margin: 0 auto;
padding: clamp(3.5rem, 8vw, 7rem) 1.5rem;
text-align: center;
}
.highlight-inner .tagline {
display: block; margin-bottom: 1rem;
font-size: 0.875rem; letter-spacing: 0.2em; text-transform: uppercase;
color: rgb(var(--tertiary-dark));
}
.highlight-inner .title { font-size: clamp(1.9rem, 4vw, 3rem); margin-bottom: 1.5rem; color: rgb(var(--primary)); }
.highlight-inner .description { display: block; max-width: 42rem; margin: 0 auto 2rem; }
/* Image flurry ------------------------------------------------------------
A slow ribbon of detail shots that drifts continuously across the foot of
the page. The track is duplicated in JS so the loop never shows a seam. */
section.img-flurry { overflow: hidden; }
section.img-flurry .image-container {
display: flex;
width: max-content;
will-change: transform;
}
section.img-flurry .image {
flex: 0 0 auto;
width: 60vw;
overflow: hidden;
}
@media (min-width: 700px) { section.img-flurry .image { width: 30vw; } }
@media (min-width: 1100px) { section.img-flurry .image { width: 22vw; } }
@media (min-width: 1600px) { section.img-flurry .image { width: 17vw; } }
section.img-flurry .image img {
width: 100%; height: 100%; aspect-ratio: 1 / 1; object-fit: cover;
transition: transform 0.9s var(--ease), filter 0.6s var(--ease);
}
/* the strip settles when you point at it, so a photo can be looked at */
.js-anim section.img-flurry .image-container.is-marquee { animation: flurryDrift var(--flurry-duration, 90s) linear infinite; }
.js-anim section.img-flurry:hover .image-container.is-marquee { animation-play-state: paused; }
section.img-flurry .image:hover img { transform: scale(1.06); }
@keyframes flurryDrift { from { transform: translateX(0); } to { transform: translateX(-50%); } }
/* Testimonials ------------------------------------------------------------ */
section.testimonial-feed { padding: 0 1.25rem; max-width: 1200px; margin-left: auto; margin-right: auto; }
.testimonial-container .testimonial-carousel { background: rgb(var(--primary)); padding: 1.25rem; }
.testimonial-carousel .carousel-track { border-top: 4px double rgba(255, 255, 255, 0.9); border-bottom: 4px double rgba(255, 255, 255, 0.9); }
.testimonal {
padding: 2.5rem clamp(1rem, 5vw, 4rem);
text-align: center; color: #fff;
}
.testimonal .diamond-large-white {
display: block; width: 10px; height: 10px; margin: 0 auto 1.5rem;
background: rgb(var(--secondary)); transform: rotate(45deg);
}
.testimonal .title { display: block; font-family: var(--serif); font-size: 1.6rem; margin-bottom: 1rem; }
.testimonal .text { font-size: 0.98rem; max-width: 56rem; margin: 0 auto 1rem; }
.testimonal .author { display: block; letter-spacing: 0.2em; text-transform: uppercase; font-size: 0.8rem; color: rgb(var(--secondary)); }
/* Accordion --------------------------------------------------------------- */
/* An editorial question list: hairline rules rather than filled bars, so a
long run of questions stays calm and the page keeps its light feel. */
section.accordion { max-width: 900px; margin-left: auto; margin-right: auto; padding: 0 1.25rem; }
section.accordion > .title {
font-size: clamp(1.6rem, 3vw, 2.1rem);
margin: 0 0 0.5rem;
color: rgb(var(--primary));
}
.accordion-btn {
display: flex; width: 100%; align-items: center; justify-content: space-between; gap: 1.5rem;
border: 0;
border-top: 1px solid rgba(var(--secondary-dark), 0.55);
background: transparent;
color: rgb(var(--primary));
padding: 1.35rem 0.9rem;
font-family: var(--serif); font-size: clamp(1.1rem, 1.6vw, 1.3rem);
line-height: 1.35;
text-align: left;
cursor: pointer;
transition: color 0.3s var(--ease), background-color 0.3s var(--ease);
}
/* only the first question carries a top rule; the rest come from the answers */
.accordion-btn ~ .accordion-btn { border-top: 0; }
.accordion-btn:hover { color: rgb(var(--tertiary-dark)); background: rgba(var(--secondary), 0.28); }
/* the chevron sits in a quiet ring that fills in once the answer is open */
.accordion-btn > span {
flex: 0 0 auto;
display: grid; place-items: center;
width: 2.25rem; height: 2.25rem;
border-radius: 50%;
border: 1px solid rgba(var(--secondary-dark), 0.9);
color: rgb(var(--primary));
transition: background-color 0.3s var(--ease), border-color 0.3s var(--ease), color 0.3s var(--ease);
}
.accordion-btn:hover > span { border-color: rgb(var(--tertiary)); color: rgb(var(--tertiary-dark)); }
.accordion-btn i { width: 0.8em; height: 0.8em; transition: transform 0.4s var(--ease); }
.accordion-btn[aria-expanded="true"] { color: rgb(var(--primary)); }
.accordion-btn[aria-expanded="true"] > span {
background: rgb(var(--primary)); border-color: rgb(var(--primary)); color: #fff;
}
.accordion-btn[aria-expanded="true"] i { transform: rotate(180deg); }
/* Expands by animating the grid row from 0fr to 1fr, so it eases open
to its natural height without needing a hard-coded max-height. */
/* The rule under each answer is what separates one question from the next,
so a closed answer still leaves its hairline behind. */
.accordion-content {
display: grid; grid-template-rows: 0fr;
border-bottom: 1px solid rgba(var(--secondary-dark), 0.55);
transition: grid-template-rows 0.45s var(--ease);
}
.accordion-content > * { overflow: hidden; min-height: 0; padding: 0 0.9rem; }
.accordion-content.open { grid-template-rows: 1fr; }
.accordion-content.open > * { padding: 0.25rem 3.5rem 1.75rem 0.9rem; }
.accordion-content p, .accordion-content li { max-width: 64ch; }
.accordion-content p:last-child { margin-bottom: 0; }
.accordion-content ul { margin-bottom: 1rem; }
/* Menus ------------------------------------------------------------------- */
.menu-section { max-width: 1280px; margin: 0 auto var(--space); padding: 0 1.25rem; }
.mobile-menu-buttons { margin-bottom: 1.5rem; }
@media (min-width: 900px) { .mobile-menu-buttons { display: none; } }
.select-dropdown, .filter-select, .offer-filters-select {
width: 100%; padding: 0.8rem 1rem; font-family: inherit; font-size: 1rem;
border: 1px solid rgb(var(--secondary-dark)); border-radius: var(--radius);
background: #fff; color: var(--ink);
}
.menu-tabs { display: none; }
@media (min-width: 900px) {
.menu-tabs {
display: flex; flex-wrap: wrap; justify-content: center; gap: 0.5rem;
margin-bottom: 2.5rem;
}
.menu-tabs > div { flex: 0 1 auto; max-width: none; }
.menu-btn {
cursor: pointer;
border: 1px solid rgba(var(--secondary-dark), 0.9);
border-radius: 999px;
padding: 0.7rem 1.4rem; text-align: center;
display: grid; place-items: center;
transition: background-color 0.25s var(--ease), color 0.25s var(--ease), border-color 0.25s var(--ease);
}
.menu-btn:hover { background: rgb(var(--secondary)); border-color: rgb(var(--secondary-dark)); }
.menu-btn.active { background: rgb(var(--primary)); border-color: rgb(var(--primary)); color: #fff; }
.menu-btn .menu-title { font-family: var(--sans); font-size: 0.85rem; letter-spacing: 0.08em; margin: 0; }
}
.menu-content { display: none; }
.menu-content.active {
display: block;
background-color: rgba(var(--tertiary), 0.06);
background-image: url('/assets/svg/black-pattern.svg');
background-repeat: no-repeat;
background-position: top 20% center;
background-size: 500% auto;
background-blend-mode: screen;
padding: 2rem 1rem;
}
@media (min-width: 900px) { .menu-content.active { padding: 3rem 2.5rem; } }
.menu-heading { text-align: center; margin-bottom: 2.5rem; }
.menu-heading .menu-title {
font-family: var(--serif); font-size: clamp(1.8rem, 3vw, 2.4rem);
display: block; margin-bottom: 1rem; color: rgb(var(--primary));
}
/* Notes were set in capitals, which is hard going for allergy and tips
copy. Sentence case at a comfortable measure reads far better. */
.menu-description {
display: block; max-width: 44rem; margin: 0 auto;
text-transform: none; letter-spacing: 0; font-size: 0.9rem;
line-height: 1.65; color: #55564e;
}
.menu-description p { margin-bottom: 0.5rem; }
.menu-description p:last-child { margin-bottom: 0; }
.menu-text { max-width: 46rem; margin: 0 auto; }
.menu-text .group { margin-bottom: 2.75rem; }
.menu-row.group-heading {
display: flex; align-items: baseline; justify-content: space-between; gap: 1rem;
border-bottom: 1px solid rgba(var(--secondary-dark), 0.8);
padding-bottom: 0.5rem; margin-bottom: 1.25rem;
font-family: var(--serif); font-size: 1.4rem; color: rgb(var(--primary));
}
.menu-row.group-heading .text-sm { display: block; font-family: var(--sans); font-size: 0.82rem; color: #66675e; }
.menu-row.group-heading .text-sm p { margin: 0; }
/* the price label only makes sense when prices are actually shown */
.menu-row.group-heading > span:last-child {
font-family: var(--sans); font-size: 0.72rem; letter-spacing: 0.14em;
text-transform: uppercase; color: #86877c;
}
.group-items { list-style: none; padding: 0; margin: 0; }
/* Classic menu setting: dish and price on one line, joined by a faint
leader so the eye can travel across without a hard rule. */
.menu-item { display: flex; align-items: baseline; gap: 0.75rem; padding: 0.7rem 0; }
.menu-item .item { flex: 1; min-width: 0; }
.menu-item .item-name { font-weight: 400; color: rgb(var(--primary)); }
.menu-item .item-desc {
display: block; font-size: 0.9rem; color: #66675e; font-weight: 300;
margin-top: 0.15rem; max-width: 38rem;
}
.menu-item .item-price { white-space: nowrap; font-weight: 400; color: rgb(var(--primary)); }
.menu-item .item-name { display: flex; align-items: baseline; gap: 0.5rem; }
/* the leader fills whatever room is left, so the dish name never wraps early */
.menu-item:has(.item-price) .item-name::after {
content: "";
flex: 1 1 auto; min-width: 1.5rem;
border-bottom: 1px dotted rgba(var(--secondary-dark), 0.9);
transform: translateY(-0.28em);
}
/* Accommodation ----------------------------------------------------------- */
section.accommodation { max-width: 1300px; margin-left: auto; margin-right: auto; padding: 0 1.25rem; }
/* Rooms alternate side to side down the page, each a large photograph with
the detail set on sage beside it, so the list reads as a tour of the rooms
rather than a stack of identical boxes. */
.accommodation-item {
display: grid; margin-bottom: 3rem;
border: 0;
overflow: hidden;
background: rgb(var(--secondary-light));
}
@media (min-width: 900px) {
.accommodation-item { grid-template-columns: 1.15fr 1fr; align-items: stretch; }
.accommodation-list .accommodation-item:nth-child(even) .image-container { order: 2; }
}
.accommodation-item .image-container { position: relative; min-height: 280px; }
.accommodation-item .image-container .carousel,
.accommodation-item .image-container .carousel-track,
.accommodation-item .image-container .carousel-slide,
.accommodation-item .image-container .card-img { height: 100%; }
.accommodation-item .image-container img { width: 100%; height: 100%; object-fit: cover; aspect-ratio: 3 / 2; }
@media (min-width: 900px) { .accommodation-item .image-container img { aspect-ratio: auto; } }
.accommodation-item .right-container {
padding: clamp(1.75rem, 4vw, 3rem);
display: flex; flex-direction: column; justify-content: center;
}
/* room name first, then the tabs, which is the order you actually read in */
.accommodation-item .tabs-wrap { display: flex; flex-direction: column; }
.room-title { order: 1; margin-bottom: 1.25rem; }
.accommodation-tabs { order: 2; display: flex; gap: 0.5rem; list-style: none; padding: 0; margin: 0 0 1.25rem; }
.accommodation-tabs .tab-btn {
cursor: pointer; font-size: 0.75rem; letter-spacing: 0.12em; text-transform: uppercase;
padding: 0.5rem 1rem;
border: 1px solid rgba(var(--secondary-dark), 0.9); border-radius: 999px;
color: rgb(var(--primary)); background: transparent;
transition: background-color 0.25s var(--ease), border-color 0.25s var(--ease), color 0.25s var(--ease);
}
.accommodation-tabs .tab-btn:hover { border-color: rgb(var(--tertiary)); color: rgb(var(--tertiary-dark)); }
.accommodation-tabs .tab-btn.active-tab {
background: rgb(var(--primary)); border-color: rgb(var(--primary)); color: #fff;
}
.description-wrap, .facilities-wrap { order: 3; }
.room-name { font-size: clamp(1.6rem, 2.4vw, 2rem); margin-bottom: 0.35rem; color: rgb(var(--primary)); }
.room-tagline {
display: inline-block;
color: rgb(var(--tertiary-dark));
letter-spacing: 0.14em; text-transform: uppercase; font-size: 0.75rem;
}
.description-wrap[hidden], .facilities-wrap[hidden] { display: none; }
.room-description p:last-child { margin-bottom: 0; }
.accommodation-item .btn { align-self: flex-start; margin-top: 1.5rem; }
/* facilities read as a tidy two-column tick list */
.facilities-wrap ul, .facilities-list {
list-style: none; padding: 0; margin: 0;
display: grid; grid-template-columns: 1fr; gap: 0.4rem 1.5rem;
font-size: 0.95rem;
}
@media (min-width: 520px) { .facilities-wrap ul, .facilities-list { grid-template-columns: 1fr 1fr; } }
.facilities-wrap li { position: relative; padding-left: 1.4rem; }
.facilities-wrap li::before {
content: ""; position: absolute; left: 0; top: 0.62em;
width: 6px; height: 6px; background: rgb(var(--tertiary));
transform: rotate(45deg);
}
/* Gallery ----------------------------------------------------------------- */
section.gallery { max-width: 1400px; margin-left: auto; margin-right: auto; padding: 0 1.25rem; }
.gallery-filter { margin-bottom: 1.5rem; }
.filter-select { max-width: 24rem; }
@media (min-width: 700px) { .gallery-filter .filter-select { display: none; } }
.filter-buttons { display: none; }
@media (min-width: 700px) { .filter-buttons { display: flex; flex-wrap: wrap; gap: 0.6rem; justify-content: center; } }
.filter-buttons .btn.active { background: rgb(var(--primary)); color: #fff; }
.gallery-images { display: grid; grid-template-columns: repeat(2, 1fr); gap: 0.6rem; }
@media (min-width: 700px) { .gallery-images { grid-template-columns: repeat(3, 1fr); } }
@media (min-width: 1100px) { .gallery-images { grid-template-columns: repeat(4, 1fr); } }
.gallery-images .gallery-image, .gallery-images a, .gallery-images figure { display: block; }
.gallery-images img { width: 100%; aspect-ratio: 1 / 1; object-fit: cover; cursor: pointer; transition: opacity 0.25s; }
.gallery-images img:hover { opacity: 0.88; }
.gallery-images .hidden-by-filter { display: none; }
/* Lightbox */
.lightbox {
position: fixed; inset: 0; z-index: 300;
background: rgba(0, 0, 0, 0.92);
display: grid; place-items: center; padding: 2rem;
}
.lightbox[hidden] { display: none; }
.lightbox img { max-width: 100%; max-height: 84vh; width: auto; height: auto; }
.lightbox-close {
position: absolute; top: 1rem; right: 1rem;
background: none; border: 0; color: #fff; cursor: pointer;
width: 2.5rem; height: 2.5rem;
}
.lightbox .carousel-arrow { background: rgba(255, 255, 255, 0.2); color: #fff; }
/* Offers ------------------------------------------------------------------ */
section.offers { max-width: 1400px; margin-left: auto; margin-right: auto; padding: 0 1.25rem; }
section.offers .section-title { text-align: center; margin-bottom: 1.5rem; }
section.offers .section-title h2 { font-size: clamp(1.7rem, 3vw, 2.3rem); margin: 0; }
.offer-feed-filter { margin-bottom: 1.5rem; }
.offer-feed-filter .offer-filters-select { max-width: 24rem; }
@media (min-width: 700px) { .offer-feed-filter .offer-filters-select { display: none; } }
.mobile-select { display: none; }
@media (min-width: 700px) { .mobile-select { display: flex; gap: 0.6rem; flex-wrap: wrap; justify-content: center; } }
.mobile-select .btn.inactive { background: rgb(var(--secondary)); color: rgb(var(--primary)); }
.offers-container .grid-container { display: grid; gap: 2rem 1.75rem; }
/* each offer sits inside a filter wrapper, so pass the stretch through */
.offers-container .grid-container > * { display: flex; }
.offers-container .grid-container > .offer { display: flex; }
.offers-container .grid-container > * > .offer { flex: 1; }
@media (min-width: 800px) { .offers-container .grid-container { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1200px) { .offers-container .grid-container { grid-template-columns: repeat(3, 1fr); } }
/* Each offer reads as a plate: full-width photograph, the price carried on a
sage band across its foot, then the detail beneath. */
.offer {
display: flex; flex-direction: column;
background: #fff;
border: 1px solid rgba(var(--secondary-dark), 0.6);
overflow: hidden;
transition: box-shadow 0.35s var(--ease), transform 0.35s var(--ease);
}
.offer:hover { box-shadow: 0 14px 34px rgba(4, 53, 32, 0.13); transform: translateY(-4px); }
.offer .offer-img { position: relative; overflow: hidden; }
.offer .offer-img img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; display: block; }
.offer .overlay, .offer .offer-txt {
display: flex; flex-direction: column; flex: 1;
padding: 1.5rem;
}
.offer .tagline {
display: block;
margin: 0 0 1rem;
padding: 0.55rem 0.9rem;
align-self: flex-start;
background: rgb(var(--secondary));
color: rgb(var(--primary));
border-radius: var(--radius);
letter-spacing: 0.1em; text-transform: uppercase; font-size: 0.72rem;
}
.offer .heading, .offer .offer-txt .title {
font-size: 1.5rem; margin-bottom: 0.75rem; color: rgb(var(--primary));
}
.offer .description { flex: 1; }
.offer .description p:last-of-type { margin-bottom: 0; }
/* the call to action always sits on the baseline, whatever the copy length */
.offer .description .btn, .offer .offer-txt .btn { margin-top: 1.25rem; align-self: flex-start; }
.offer.hidden-by-filter { display: none; }
/* Blog -------------------------------------------------------------------- */
.blog-filters { display: flex; flex-wrap: wrap; gap: 0.6rem; justify-content: center; margin: 0 0 2.5rem; padding: 0; list-style: none; }
.blog-filters .btn.inactive { background: rgb(var(--secondary)); color: rgb(var(--primary)); }
section.blog-feed { max-width: 1400px; margin: 0 auto var(--space); padding: 0 1.25rem; }
.blog-grid { display: grid; gap: 2rem; }
@media (min-width: 700px) { .blog-grid { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1100px) { .blog-grid { grid-template-columns: repeat(3, 1fr); } }
.blog-card { text-decoration: none; color: inherit; display: block; }
.blog-card:hover { color: inherit; }
.blog-card img { width: 100%; aspect-ratio: 3 / 2; object-fit: cover; }
.blog-card .blog-date { display: block; margin: 1rem 0 0.35rem; letter-spacing: 0.15em; text-transform: uppercase; font-size: 0.75rem; color: rgb(var(--tertiary-dark)); }
.blog-card h3 { font-size: 1.4rem; margin-bottom: 0.5rem; }
.blog-card:hover h3 { color: rgb(var(--tertiary-dark)); }
.blog-card p { font-size: 0.95rem; }
.blog-card.hidden-by-filter { display: none; }
article.blog-post { max-width: 820px; margin: 0 auto var(--space); padding: 0 1.25rem; }
article.blog-post img { margin: 1.5rem auto; }
.back-to-blog { display: inline-block; margin-top: 2rem; }
/* Forms ------------------------------------------------------------------- */
section.forms { max-width: 760px; margin-left: auto; margin-right: auto; padding: 0 1.25rem; }
form label { display: block; font-size: 0.9rem; letter-spacing: 0.05em; margin-bottom: 0.3rem; }
form label .required { color: rgb(var(--tertiary-dark)); }
.text-field, .email-field, .select-field, .textarea-field, form input[type="text"], form input[type="email"], form input[type="tel"], form select, form textarea {
width: 100%; padding: 0.75rem 0.9rem; margin-bottom: 1.1rem;
border: 1px solid #cfcfc6; border-radius: var(--radius);
font-family: inherit; font-size: 1rem; background: #fff; color: var(--ink);
}
form textarea { min-height: 8rem; resize: vertical; }
form input:focus, form select:focus, form textarea:focus { border-color: rgb(var(--primary)); outline: none; }
.form-hp { position: absolute; left: -9999px; }
.submit-button { background: rgb(var(--tertiary)); color: #fff; }
.submit-button:hover { background: rgb(var(--tertiary-dark)); color: #fff; }
.response-message { display: none; }
.response-message.show { display: block; margin-top: 1rem; padding: 0.9rem 1.1rem; border-radius: var(--radius); background: rgb(var(--secondary-light)); color: rgb(var(--primary)); }
.response-message.error { background: #f6e3e0; color: #7a2e20; }
/* Embed ------------------------------------------------------------------- */
section.embed { max-width: 900px; margin-left: auto; margin-right: auto; padding: 0 1.25rem; }
.embed-content iframe { width: 100%; border: 0; min-height: 620px; }
/* Sitemap ----------------------------------------------------------------- */
section.sitemap { max-width: 900px; margin: 0 auto var(--space); padding: 0 1.25rem; }
section.sitemap ul { list-style: none; padding-left: 0; }
section.sitemap ul ul { padding-left: 1.5rem; }
section.sitemap a { display: inline-block; padding: 0.2rem 0; }
/* Footer ------------------------------------------------------------------ */
footer { background: rgb(var(--primary)); color: #fff; }
footer a { color: #fff; text-decoration: none; }
footer a:hover { color: rgb(var(--secondary)); }
/* The stag and a single line set the tone before the practical detail */
.footer-lead {
max-width: 1300px; margin: 0 auto;
padding: 3.5rem 1.5rem 0;
text-align: center;
}
.footer-stag {
display: block; width: 9rem; height: 5rem; margin: 0 auto 1.25rem;
background: url('/assets/svg/white-stag.svg') no-repeat center center;
background-size: auto 100%;
}
.footer-strapline {
max-width: 34rem; margin: 0 auto;
font-family: var(--serif); font-size: clamp(1.15rem, 2vw, 1.4rem);
line-height: 1.5; color: rgba(255, 255, 255, 0.92);
}
.footer-container {
max-width: 1300px; margin: 0 auto;
padding: 3rem 1.5rem 2.5rem;
display: grid; gap: 2.5rem;
}
@media (min-width: 640px) { .footer-container { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1024px) { .footer-container { grid-template-columns: 1.5fr 1fr 1fr 1fr; gap: 3rem; } }
/* the newsletter needs the full width before the columns split */
@media (min-width: 640px) and (max-width: 1023px) { .footer-col.newsletter { grid-column: 1 / -1; } }
.footer-heading {
font-family: var(--sans); font-size: 0.75rem;
letter-spacing: 0.18em; text-transform: uppercase;
color: rgb(var(--secondary));
margin: 0 0 1.1rem;
}
.footer-col address { font-style: normal; line-height: 1.9; }
.footer-note { font-size: 0.88rem; color: rgba(255, 255, 255, 0.72); }
.footer-contact { margin: 0.75rem 0 0; font-family: var(--serif); font-size: 1.35rem; }
.footer-contact a:hover { color: rgb(var(--secondary)); }
.footer-links { list-style: none; padding: 0; margin: 0; }
.footer-links li { margin-bottom: 0.55rem; }
.footer-links a { position: relative; }
.footer-links a::after {
content: ""; position: absolute; left: 0; bottom: -3px;
width: 100%; height: 1px; background: rgb(var(--secondary));
transform: scaleX(0); transform-origin: left;
transition: transform 0.3s var(--ease);
}
.footer-links a:hover::after { transform: scaleX(1); }
.hours { margin: 0; font-size: 0.95rem; }
.hours dt {
font-size: 0.72rem; letter-spacing: 0.14em; text-transform: uppercase;
color: rgba(255, 255, 255, 0.6); margin-top: 0.9rem;
}
.hours dt:first-child { margin-top: 0; }
.hours dd { margin: 0.1rem 0 0; }
/* Newsletter */
.newsletter .form-container { display: grid; gap: 0.6rem; margin-top: 1rem; }
@media (min-width: 480px) { .newsletter .form-container { grid-template-columns: 1fr 1fr; } }
@media (min-width: 480px) { .newsletter .form-container .btn { grid-column: 1 / -1; justify-self: start; } }
/* [type] keeps these ahead of the general form field styling, which would
otherwise paint them white and leave white text invisible. */
.newsletter input[type] {
padding: 0.8rem 0.9rem;
border: 1px solid rgba(255, 255, 255, 0.28);
background: rgba(255, 255, 255, 0.07); color: #fff;
border-radius: var(--radius);
font-family: inherit; font-size: 0.95rem; margin: 0;
}
.newsletter input[type]::placeholder { color: rgba(255, 255, 255, 0.6); }
.newsletter input[type]:focus { border-color: rgb(var(--secondary)); outline: none; background: rgba(255, 255, 255, 0.12); }
.newsletter .primary-btn { background: rgb(var(--tertiary)); padding: 0.8rem 2rem; }
.newsletter .primary-btn:hover { background: rgb(var(--tertiary-dark)); }
.newsletter .privacy { font-size: 0.8rem; margin: 1rem 0 0; color: rgba(255, 255, 255, 0.65); }
.newsletter .privacy a { text-decoration: underline; }
.social-icons { display: flex; gap: 0.6rem; margin-top: 1.25rem; }
.social-icons a {
display: grid; place-items: center;
width: 2.5rem; height: 2.5rem; border-radius: 50%;
border: 1px solid rgba(255, 255, 255, 0.28);
transition: background-color 0.25s var(--ease), border-color 0.25s var(--ease);
}
.social-icons a:hover { background: rgb(var(--tertiary)); border-color: rgb(var(--tertiary)); color: #fff; }
.social-icons .icon { width: 1.05rem; height: 1.05rem; }
/* Base strip */
.footer-base {
border-top: 1px solid rgba(255, 255, 255, 0.16);
max-width: 1300px; margin: 0 auto;
padding: 1.5rem;
display: flex; flex-direction: column; align-items: center; gap: 0.9rem;
text-align: center;
}
@media (min-width: 768px) { .footer-base { flex-direction: row; justify-content: space-between; text-align: left; } }
.footer-nav ul {
display: flex; flex-wrap: wrap; justify-content: center; gap: 0.4rem 1.75rem;
list-style: none; margin: 0; padding: 0;
}
.footer-nav a { font-size: 0.8rem; letter-spacing: 0.1em; text-transform: uppercase; }
.site-footer-credit { font-size: 0.78rem; color: rgba(255, 255, 255, 0.6); }
/* Cookie banner ----------------------------------------------------------- */
.cookie-banner {
position: fixed; left: 1rem; right: 1rem; bottom: 1rem; z-index: 250;
max-width: 34rem; margin: 0 auto;
background: rgb(var(--primary)); color: #fff;
border-radius: var(--radius);
box-shadow: 0 12px 30px rgba(0, 0, 0, 0.35);
}
.cookie-banner-inner { padding: 1.25rem 1.5rem; }
.cookie-banner p { font-size: 0.9rem; margin-bottom: 1rem; }
.cookie-banner a { color: rgb(var(--secondary)); }
.cookie-banner-actions { display: flex; gap: 0.75rem; flex-wrap: wrap; }
.cookie-banner .btn { padding: 0.6rem 1.3rem; font-size: 0.8rem; }
.cookie-banner .primary-btn { background: rgb(var(--secondary)); color: rgb(var(--primary)); }
.cookie-banner .primary-btn:hover { background: rgb(var(--secondary-dark)); }
/* Utility leftovers from source markup ------------------------------------ */
.text-center { text-align: center; }
.text-white { color: #fff; }
.uppercase { text-transform: uppercase; }
.block { display: block; }
.tracking-widest { letter-spacing: 0.25em; }
.animate-bounce { animation: bob 1.6s ease-in-out infinite; }
.hidden { display: none; }
/* ==========================================================================
Motion
Everything here is additive polish, gated behind the .js-anim class (set
in the head only when the visitor has not asked for reduced motion), so
the site is complete and readable with no JavaScript and no animation.
========================================================================== */
/* Sections ease up into place as they enter the viewport */
.js-anim [data-reveal] {
opacity: 0;
transform: translateY(28px);
transition: opacity 0.8s var(--ease), transform 0.8s var(--ease);
will-change: opacity, transform;
}
.js-anim [data-reveal].is-visible { opacity: 1; transform: none; }
.js-anim [data-reveal].is-visible > * { will-change: auto; }
/* Cards, tiles and gallery items arrive one after another rather than as a block */
.js-anim [data-reveal-child] {
opacity: 0;
transform: translateY(22px);
transition: opacity 0.7s var(--ease), transform 0.7s var(--ease);
transition-delay: var(--stagger, 0ms);
}
.js-anim [data-reveal-child].is-visible { opacity: 1; transform: none; }
/* The stag settles in with a touch of scale */
.js-anim .flourish[data-reveal] { transform: translateY(14px) scale(0.94); }
.js-anim .flourish[data-reveal].is-visible { transform: none; transition-duration: 1s; }
/* Slow drift across the hero photography */
@keyframes heroDrift { from { transform: scale(1); } to { transform: scale(1.08); } }
.js-anim section.hero .carousel-slide.current img { animation: heroDrift 7.5s ease-out both; }
.js-anim section.hero .carousel-slide:only-child img { animation: heroDrift 14s ease-out both; }
/* Buttons lift very slightly on hover */
.btn { will-change: transform; }
.btn:hover { transform: translateY(-2px); }
.btn:active { transform: translateY(0); }
.js-anim .btn { transition: background-color 0.25s var(--ease), color 0.25s var(--ease), transform 0.25s var(--ease), box-shadow 0.25s var(--ease); }
.js-anim .btn:hover { box-shadow: 0 6px 16px rgba(0, 0, 0, 0.18); }
/* Editorial images breathe on hover */
.img-text-container .image-wrap img,
.blog-card img,
.offer .offer-img img { transition: transform 1.1s var(--ease); }
.img-text-container:hover .image-wrap img,
.blog-card:hover img,
.offer:hover .offer-img img { transform: scale(1.04); }
.image-wrap, .blog-card, .offer .offer-img { overflow: hidden; }
/* Gallery tiles */
.gallery-images img { transition: transform 0.7s var(--ease), opacity 0.3s var(--ease); }
.gallery-images a:hover img { transform: scale(1.05); }
.gallery-images a { overflow: hidden; display: block; }
/* Lightbox fades rather than snapping in */
.js-anim .lightbox { animation: fadeIn 0.25s ease both; }
@keyframes fadeIn { from { opacity: 0; } to { opacity: 1; } }
/* Anyone who prefers reduced motion gets none of it */
@media (prefers-reduced-motion: reduce) {
*, *::before, *::after {
animation-duration: 0.001ms !important;
animation-iteration-count: 1 !important;
transition-duration: 0.001ms !important;
scroll-behavior: auto !important;
}
[data-reveal], [data-reveal-child] { opacity: 1 !important; transform: none !important; }
.btn:hover { transform: none; }
}
/* Print ------------------------------------------------------------------- */
@media print {
#site-header, footer, .cookie-banner, .hero-scroll { display: none; }
section.hero { height: auto; }
/* never print a half-revealed page */
[data-reveal], [data-reveal-child] { opacity: 1 !important; transform: none !important; }
.accordion-content { grid-template-rows: 1fr !important; }
.accordion-content > * { overflow: visible !important; }
}