/* High Corn Mill — shared styles */
/* Fonts are served from this origin, latin subset only. Nothing is fetched
from a font CDN, so there is no third party in the critical path. */
@font-face {
font-family: 'Quicksand'; font-style: normal; font-weight: 300 700; font-display: swap;
src: url('../fonts/quicksand-var.woff2') format('woff2');
}
:root {
/* Green and gold are sampled straight from the logo artwork so the nav mark
and the page never disagree: #016831 wordmark, #c7a52e wheel. */
--green: #016831;
--green-dark: #015327;
--green-deep: #013d1f;
--gold: #c7a52e;
--gold-dark: #a88820;
/* Logo gold darkened until it clears 4.5:1 on white — for small accent text */
--gold-deep: #8a6d15;
/* And lifted the other way until it clears 3:1 on the green panel — for a
graphic that has to read against the dark ground rather than sit in it */
--gold-light: #d8b743;
--cream: #faf8f2;
--cream-deep: #f1ece0;
/* The green at the tint the nav pill and the menu use */
--green-soft: #e7f0e9;
--ink: #1f2620;
--muted: #5b6459;
--line: #e2ded3;
}
* { margin: 0; padding: 0; box-sizing: border-box; }
html { scroll-behavior: smooth; }
/* Quicksand throughout — the rounded-terminal match for the lettering ringing
the badge. Prose is set normally; the caps-and-tracking treatment belongs to
headings, menus and labels, where it reads as lettering rather than text. */
body {
font-family: 'Quicksand', -apple-system, sans-serif;
color: var(--ink);
background: var(--cream);
line-height: 1.72;
font-size: 1rem; font-weight: 500;
}
h1, h2, h3, h4 { font-family: 'Quicksand', -apple-system, sans-serif; line-height: 1.14; }
/* ===== Weight scale =====
Quicksand runs 300-700, so 700 is the ceiling and only one tier gets it at
display size: the H1. Everything else steps down. Small type steps back UP —
700 on a 12px tracked label carries about the same presence as 600 on a 40px
heading, so a label being numerically bolder than the heading above it is
correct rather than an inversion. Within a tier, size does the separating. */
h1 { font-weight: 700; } /* thickest, display only */
h2, h3, h4, .title, .cta-band h2,
.tile span, .social-head h2, .bee-panel h3,
.footer .discover { font-weight: 600; } /* headings, a step under H1 */
.stat b, .timeline b, .explore-card span { font-weight: 600; } /* display numerals and tile labels */
.nav-links a, .panel-pages a, .btn { font-weight: 700; } /* navigation and controls */
.kicker, .title .thin, .dir-tag,
.stat span, .field label, .panel-extra h5,
.footer .discover .thin,
.footer-right h4, .notice h4 { font-weight: 700; } /* small tracked labels */
p, li { font-weight: 500; } /* running text */
p.lead { font-weight: 600; }
/* Display headings, same treatment as everything else — kept as its own rule
so the sizes and weights below have something to hang off. */
h1, .title, .cta-band h2, .panel-rows h2, .soon h2 {
text-transform: uppercase; letter-spacing: .16em;
}
/* Kept explicit rather than left to inherit, so these survive any later
change to the body rule. */
h3, h4, .crumbs, .tile span, .explore-card span, .panel-extra a,
.social-head .handle, .footer-bottom, .dir-links a,
.timeline b, .nav-panel .panel-extra a {
text-transform: uppercase; letter-spacing: .16em;
}
/* Where the visible text IS an email or a web address, leave it as typed —
capitalising one makes it harder to read and harder to trust. Links whose
text is a label ("Email the practice") take the caps like everything else. */
.panel-extra a[href^="mailto:"],
.phero-facts a[href^="mailto:"], .dir-links a[href^="http"] {
text-transform: none; letter-spacing: .01em;
}
img { max-width: 100%; height: auto; display: block; }
a { color: var(--green); }
.wrap { max-width: 1200px; margin: 0 auto; padding: 0 28px; }
/* Gold wave flourish */
.wave { display: block; width: 110px; height: 14px; margin: 18px 0 0; }
.wave path { stroke: var(--gold); stroke-width: 3.6; fill: none; stroke-linecap: round; }
/* ===== Top utility bar =====
Solid green, the way the site started. No rule underneath: the change of
colour from the green bar to the white nav is the edge. */
.topbar {
background: var(--green); color: #fff; font-size: 1.02rem;
}
.topbar-inner {
max-width: 1200px; margin: 0 auto; padding: 12px 28px;
display: flex; align-items: center; justify-content: flex-end; gap: 30px;
}
/* Set exactly like the main nav below it, a size down so the row still fits */
.topbar a {
color: #fff; text-decoration: none;
font-family: 'Quicksand', sans-serif; font-weight: 600; font-size: .76rem;
letter-spacing: .16em; text-transform: uppercase;
transition: color .2s ease;
}
.topbar a:hover { color: var(--gold); }
.topbar .socials { display: flex; gap: 20px; align-items: center; margin-left: 44px; }
.topbar .socials svg { width: 21px; height: 21px; fill: #fff; display: block; }
.topbar .socials a:hover svg { fill: var(--gold); }
.topbar-inner, .nav-inner { position: relative; }
/* ===== Main nav ===== */
.nav {
background: #fff; position: sticky; top: 0; z-index: 130;
box-shadow: 0 1px 0 var(--line), 0 20px 40px -34px rgba(48, 56, 46, .18);
}
.nav-inner {
max-width: 1200px; margin: 0 auto; padding: 18px 28px;
display: flex; align-items: center; gap: 26px;
}
/* Never let the logo be a flex casualty. It was shrinking to fit the row, and
because img{max-width:100%} clamps the picture to its parent while the height
stays pinned, the wordmark came out 17.6% narrower than it should be — a
squashed logo rather than a smaller one. flex-shrink pins the box; max-width
none means even a mis-sized box could not distort the artwork again. */
.nav-logo { margin-right: auto; flex-shrink: 0; }
.nav-logo img { height: 68px; width: auto; max-width: none; }
/* The pill is why the gap is 4px and not 32: the padding round each label is
doing the spacing now, and 32 on top of it pushed the row off the end. */
.nav-links { display: flex; align-items: center; gap: 3px; list-style: none; }
/* A pill rather than an underline. Same shape language as the buttons and the
cards, and it gives the menu a friendlier hit area than a 2px rule. */
.nav-links a {
color: var(--ink); text-decoration: none;
font-family: 'Quicksand', sans-serif; font-weight: 700;
font-size: .86rem; letter-spacing: .12em; text-transform: uppercase;
padding: 10px 11px; border-radius: 999px;
/* Two-word labels must not break in half. Adding What's On took the row past
the width where flex would rather wrap the words inside each pill than
admit the row is full — which reads as seven broken labels, not a menu. */
white-space: nowrap;
transition: background .2s ease, color .2s ease;
}
.nav-links a:hover, .nav-links a.active { background: var(--green-soft); color: var(--green); }
/* ===== About, with a submenu =====
The label stays a real link to the About page and the chevron is a separate
button beside it. That way someone who wants the page gets the page and
someone who wants the list gets the list — rather than the common pattern
where the top item does nothing and the first submenu entry repeats it.
The pill highlight lives on the pair so the two read as one control. */
.nav-drop { position: relative; display: flex; align-items: center; border-radius: 999px; transition: background .2s ease; }
.nav-drop > a { padding-right: 3px; }
.nav-drop-btn {
display: grid; place-items: center; width: 24px; align-self: stretch;
padding: 0 7px 0 0; border: 0; background: none; cursor: pointer;
color: var(--ink); border-radius: 999px;
transition: color .2s ease;
}
.nav-drop-btn svg { transition: transform .25s ease; }
.nav-drop:hover, .nav-drop.is-open, .nav-drop:not(.is-js):focus-within { background: var(--green-soft); }
.nav-drop:hover > a, .nav-drop.is-open > a, .nav-drop:not(.is-js):focus-within > a { background: none; color: var(--green); }
.nav-drop:hover .nav-drop-btn, .nav-drop.is-open .nav-drop-btn, .nav-drop:not(.is-js):focus-within .nav-drop-btn { color: var(--green); }
.nav-drop.is-open .nav-drop-btn svg { transform: rotate(180deg); }
/* The page you are on still marks the pill, open or not */
.nav-drop.has-active { background: var(--green-soft); }
.nav-drop.has-active > a { color: var(--green); }
.nav-drop.has-active .nav-drop-btn { color: var(--green); }
.nav-drop-menu {
/* Anchored to the pill's right edge, not its left. About sits second from the
end of the row, so a left-anchored panel hangs 3px past the viewport at
1200px wide — and a hidden absolute box still counts towards scrollWidth,
so that showed up as a horizontal scrollbar on a menu nobody had opened. */
position: absolute; top: 100%; right: 0; z-index: 60;
min-width: 224px; margin: 12px 0 0; padding: 8px; list-style: none;
background: #fff; border-radius: 22px; border: 1px solid var(--line);
box-shadow: 0 26px 52px -24px rgba(35, 40, 31, .34);
opacity: 0; visibility: hidden; transform: translateY(-7px);
transition: opacity .18s ease, transform .18s ease, visibility .18s;
}
/* Bridges the gap between pill and panel so the menu does not shut while the
pointer is crossing it. */
.nav-drop-menu::before { content: ""; position: absolute; left: 0; right: 0; top: -12px; height: 12px; }
/* focus-within is the fallback that keeps the submenu reachable by tab if
js/site.js never loads. Once the script is running it adds .is-js and takes
the keyboard over via the chevron button, because otherwise Escape cannot
close the menu: returning focus to the button, which sits inside .nav-drop,
would re-satisfy focus-within and open it straight back up. */
.nav-drop:not(.is-js):focus-within .nav-drop-menu,
.nav-drop.is-open .nav-drop-menu { opacity: 1; visibility: visible; transform: none; }
@media (hover: hover) and (pointer: fine) {
.nav-drop:hover .nav-drop-menu { opacity: 1; visibility: visible; transform: none; }
}
.nav-drop-menu li { list-style: none; }
.nav-links .nav-drop-menu a {
display: block; padding: 11px 15px; border-radius: 15px;
font-size: .82rem; letter-spacing: .085em; white-space: nowrap;
}
.nav-links .nav-drop-menu a:hover { background: var(--cream-deep); color: var(--green); }
.nav-links .nav-drop-menu a[aria-current="page"] { background: var(--green-soft); color: var(--green); }
@media (prefers-reduced-motion: reduce) {
.nav-drop-menu, .nav-drop-btn svg { transition: none; }
}
/* Burger is the small-screen nav only — the inline links cover desktop */
.nav-burger { display: none; background: none; border: 0; cursor: pointer; padding: 6px 0 6px 4px; }
.nav-burger span {
display: block; width: 34px; height: 4.5px; background: var(--green);
margin: 6px 0; border-radius: 3px; transition: transform .25s ease, opacity .25s ease;
}
.nav-burger:hover span { background: var(--green-dark); }
.nav-burger.open span:nth-child(1) { transform: translateY(10.5px) rotate(45deg); }
.nav-burger.open span:nth-child(2) { opacity: 0; }
.nav-burger.open span:nth-child(3) { transform: translateY(-10.5px) rotate(-45deg); }
/* ===== Skip link =====
First thing in the tab order on every page, and the only reason it is not
visible is that it has nothing to say until it is focused. */
.skip {
position: absolute; left: 12px; top: -60px; z-index: 300;
background: var(--green); color: #fff; text-decoration: none;
font-weight: 700; font-size: .8rem; letter-spacing: .16em; text-transform: uppercase;
padding: 12px 20px; border-radius: 999px;
transition: top .2s ease;
}
.skip:focus { top: 12px; }
#main:focus { outline: none; }
/* ===== Mobile menu =====
Was a dropdown of small links hanging off the header. It is now a drawer:
full height, off the right edge, with the three things somebody standing in
Skipton actually wants — directions, phone, email — above the page list
rather than buried under it. Rows are 52px so they can be hit with a thumb.
It slides on transform alone, which the compositor handles. visibility is
what keeps the closed panel out of the tab order; display:none would do that
too but cannot be transitioned, so it is delayed by the length of the slide
on the way out and immediate on the way in. */
.nav-scrim {
position: fixed; inset: 0; z-index: 190;
background: rgba(20, 26, 18, .5);
opacity: 0; pointer-events: none; transition: opacity .26s ease;
}
.nav-scrim.open { opacity: 1; pointer-events: auto; }
.nav-panel {
position: fixed; top: 0; right: 0; bottom: 0; z-index: 200;
width: min(87vw, 396px);
background: #fff; display: flex; flex-direction: column;
overflow-y: auto; overscroll-behavior: contain;
box-shadow: -22px 0 60px rgba(20, 26, 18, .3);
visibility: hidden; transform: translateX(101%);
transition: transform .28s cubic-bezier(.4, 0, .2, 1), visibility 0s .28s;
}
.nav-panel.open { visibility: visible; transform: translateX(0); transition-delay: 0s, 0s; }
.panel-head {
position: sticky; top: 0; z-index: 2; background: #fff;
display: flex; align-items: center; justify-content: space-between;
padding: 17px 20px 15px; border-bottom: 1px solid var(--line);
}
.panel-title {
font-size: .74rem; font-weight: 700; letter-spacing: .2em;
text-transform: uppercase; color: var(--gold-deep);
}
.panel-close {
width: 46px; height: 46px; margin-right: -8px; border-radius: 50%;
border: 1.5px solid var(--line); background: #fff; color: var(--green);
display: grid; place-items: center; cursor: pointer;
}
.panel-close:hover { border-color: var(--green); }
/* Directions, call, email. The point of the whole rebuild. */
.panel-acts { display: grid; grid-template-columns: repeat(2, 1fr); gap: 10px; padding: 18px 20px 14px; }
.pact {
display: grid; place-items: center; gap: 9px; min-height: 90px; padding: 16px 6px;
background: var(--green-soft); border-radius: 22px; color: var(--green);
text-decoration: none; font-size: .66rem; font-weight: 700;
letter-spacing: .1em; text-transform: uppercase; text-align: center;
transition: background .18s ease;
}
.pact:hover, .pact:active { background: #d8e7dc; }
.panel-pages { display: flex; flex-direction: column; padding: 4px 10px 10px; }
.panel-pages a {
display: flex; align-items: center; min-height: 52px; padding: 13px 12px;
border-radius: 16px; color: var(--ink); text-decoration: none;
font-family: 'Quicksand', sans-serif; font-size: 1rem; font-weight: 700;
letter-spacing: .16em; text-transform: uppercase;
}
.panel-pages a::after {
content: ""; width: 8px; height: 8px; margin-left: auto;
border-top: 2px solid currentColor; border-right: 2px solid currentColor;
transform: rotate(45deg); opacity: .3;
}
.panel-pages a:hover { background: var(--cream-deep); }
/* The page you are on, marked in the markup rather than worked out in script */
.panel-pages a[aria-current="page"] { background: var(--green-soft); color: var(--green); }
.panel-pages a[aria-current="page"]::after { opacity: .6; }
/* The drawer has no room for hover menus, so About's children are simply shown
nested under it. Indent, a smaller size and a quieter colour all say the same
thing, so the relationship survives even if one of the three is missed. */
.panel-sub { display: flex; flex-direction: column; padding-left: 20px; margin: 0 0 6px; }
.panel-pages .panel-sub a {
min-height: 46px; padding: 10px 12px;
font-size: .84rem; letter-spacing: .13em; color: var(--muted);
}
.panel-pages .panel-sub a::after { width: 6px; height: 6px; }
.panel-pages .panel-sub a[aria-current="page"] { color: var(--green); }
.panel-extra {
margin-top: auto; display: grid; gap: 12px; align-content: start;
padding: 20px 22px calc(24px + env(safe-area-inset-bottom));
border-top: 1px solid var(--line);
}
.panel-extra h5 {
font-size: .72rem; letter-spacing: .2em; text-transform: uppercase;
color: var(--gold-deep); font-family: 'Quicksand', sans-serif; margin-bottom: 2px;
}
.panel-extra a { color: var(--muted); text-decoration: none; font-weight: 600; font-size: .95rem; }
.panel-extra a:hover { color: var(--green); }
/* ===== Quick action bar =====
Phones only, and fixed, because "how do I get there" and "can I ring them"
are the two questions this site exists to answer for somebody holding a phone
in Skipton — neither should cost a scroll to the footer. Body padding below
reserves its height so it never sits on top of the last line of the page. */
.quickbar { display: none; }
@media (max-width: 700px) {
.quickbar {
position: fixed; left: 0; right: 0; bottom: 0; z-index: 120;
display: grid; grid-template-columns: repeat(3, 1fr);
background: rgba(255, 255, 255, .97);
border-top: 1px solid var(--line);
box-shadow: 0 -8px 26px rgba(35, 40, 31, .09);
padding-bottom: env(safe-area-inset-bottom);
}
.quickbar a {
display: grid; place-items: center; gap: 4px; min-height: 58px; padding: 9px 4px 10px;
color: var(--green); text-decoration: none;
font-size: .62rem; font-weight: 700; letter-spacing: .11em; text-transform: uppercase;
}
.quickbar a + a { border-left: 1px solid var(--line); }
.quickbar a:active { background: var(--green-soft); }
/* Two navigations on screen at once is one too many, so the bar drops out
of the way while the drawer is open rather than stacking under it. */
body.menu-open .quickbar { transform: translateY(100%); pointer-events: none; }
.quickbar { transition: transform .26s cubic-bezier(.4, 0, .2, 1); }
body { padding-bottom: 68px; }
}
/* ===== Hero film =====
All that survives of the old full-bleed hero. The home page frames the film
in a card now, and this makes the video fill whatever box it is given; the
rest of that hero — the dark scrim, the watermark, the scroll arrow — went
with the layout it belonged to. js/site.js still finds the element by this
class, so the name stays. */
.hero-video {
position: absolute; inset: 0; width: 100%; height: 100%;
object-fit: cover; z-index: 0;
}
/* ===== Marquee ===== */
.marquee { background: var(--green); overflow: hidden; padding: 13px 0; }
.marquee-track { display: flex; width: max-content; animation: marquee 36s linear infinite; }
.marquee-track span {
color: rgba(255, 255, 255, .92); font-size: .82rem; font-weight: 600;
letter-spacing: .16em; text-transform: uppercase; white-space: nowrap; padding-right: 26px;
}
/* Separator is the wheel off the logo rather than a stray dingbat */
.marquee-track span::after {
content: ""; display: inline-block; vertical-align: -3px;
width: 15px; height: 15px; margin: 0 26px 0 26px;
background: url('data:image/svg+xml;utf8,') center/contain no-repeat;
}
@keyframes marquee { to { transform: translateX(-50%); } }
/* ===== Buttons ===== */
.btn {
display: inline-block; font-family: 'Quicksand', sans-serif; font-weight: 700;
font-size: .86rem; letter-spacing: .16em; text-transform: uppercase;
padding: 16px 34px; border-radius: 999px; text-decoration: none; cursor: pointer;
transition: background .2s ease, color .2s ease;
}
.btn::after { content: "→"; display: inline-block; margin-left: 12px; transition: transform .2s ease; }
.btn:hover::after { transform: translateX(5px); }
/* Green primary, logo gold on hover. Text flips to deep green on the gold
because white on gold is nowhere near enough contrast. */
.btn-primary { background: var(--green); color: #fff; }
.btn-primary:hover { background: var(--gold); color: var(--green-deep); }
.btn-green { background: var(--green); color: #fff; }
.btn-green:hover { background: var(--green-dark); }
.btn-outline { border: 2px solid #fff; color: #fff; }
.btn-outline:hover { background: #fff; color: var(--green); }
.btn-outline-green { border: 2px solid var(--green); color: var(--green); }
.btn-outline-green:hover { background: var(--green); color: #fff; }
.btn-row { display: flex; gap: 14px; flex-wrap: wrap; }
/* ===== Sections ===== */
section { padding: 100px 0; }
.kicker {
color: var(--gold-deep); font-weight: 700; letter-spacing: .2em;
text-transform: uppercase; font-size: .8rem; margin-bottom: 14px;
}
.title { font-size: clamp(1.75rem, 3.1vw, 2.5rem); margin-bottom: 22px; }
/* Section eyebrows are set like the ones on the hero cards, which in turn take
after the lettering ringing the badge: caps, wide tracking, gold. */
.title .thin {
display: block; font-family: 'Quicksand', -apple-system, sans-serif;
font-weight: 700; font-style: normal; text-transform: uppercase;
letter-spacing: .2em; font-size: .8rem; line-height: 1.5;
color: var(--gold-deep); margin-bottom: 14px;
}
/* Arched image — Saratoga signature */
/* Photo frames all share one rounded-corner radius — no arches */
/* Welcome */
.welcome { background: #fff; }
.welcome-grid { display: grid; grid-template-columns: 1fr 1.05fr; gap: 70px; align-items: center; }
.welcome-grid .copy > p { color: var(--muted); margin-bottom: 22px; max-width: 34em; }
.welcome-grid .copy > p.lead { color: var(--ink); font-size: 1.16rem; font-weight: 600; }
.welcome-grid .btn { margin-top: 6px; }
.map-fig { background: var(--cream); border-radius: 38px; padding: 30px 22px; }
.map-fig img { width: 100%; height: auto; }
.stats { display: flex; gap: 44px; margin: 34px 0 36px; flex-wrap: wrap; }
.stat b { font-family: 'Quicksand', sans-serif; font-size: 2.3rem; color: var(--green); display: block; line-height: 1.1; }
.stat span { font-size: .8rem; color: var(--muted); letter-spacing: .16em; text-transform: uppercase; font-weight: 600; }
/* Tiles */
.tiles { background: #fff; padding-top: 0; }
.tiles-head {
display: flex; align-items: flex-end; justify-content: space-between;
gap: 20px; margin-bottom: 32px;
}
.tiles-head .title { margin-bottom: 0; }
.tiles-head .wave { margin-top: 14px; }
.tile-arrows { display: none; }
.tile-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 22px; }
.tile {
position: relative; aspect-ratio: 1 / 1; border-radius: 34px; overflow: hidden;
display: flex; align-items: flex-end; justify-content: center; text-decoration: none;
}
.tile img {
position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover;
transition: transform .6s ease;
}
.tile::after {
content: ""; position: absolute; inset: 0;
background: linear-gradient(180deg, rgba(23, 33, 14, .05) 35%, rgba(23, 33, 14, .72));
transition: background .3s ease;
}
.tile span {
position: relative; z-index: 2; color: #fff; font-family: 'Quicksand', sans-serif;
font-size: clamp(1.5rem, 2.6vw, 2rem); font-weight: 600; letter-spacing: .03em;
text-align: center; padding: 0 16px 26px;
text-shadow: 0 2px 14px rgba(0, 0, 0, .5);
}
.tile span::after {
content: "→"; display: block; font-family: 'Quicksand', sans-serif; font-size: .55em;
width: 40px; height: 40px; line-height: 40px; margin: 12px auto 0;
border: 1.5px solid rgba(255, 255, 255, .8); border-radius: 50%;
opacity: 0; transform: translateY(8px); transition: opacity .3s ease, transform .3s ease;
}
.tile:hover span::after { opacity: 1; transform: translateY(0); }
.tile:hover img { transform: scale(1.07); }
.tile:hover::after { background: linear-gradient(180deg, rgba(46, 100, 23, .15) 30%, rgba(28, 63, 11, .8)); }
/* Things to do */
.things { background: var(--cream); }
.things-grid { display: grid; grid-template-columns: 1.02fr .98fr; gap: 80px; align-items: center; }
.things-grid .copy p { color: var(--muted); margin-bottom: 22px; max-width: 36em; }
.things-grid .btn { margin-top: 8px; }
.things-art { position: relative; padding: 30px 30px 0 0; }
.things-art .photo img { width: 100%; aspect-ratio: 4 / 4.6; object-fit: cover; border-radius: 34px; box-shadow: 0 24px 60px rgba(35, 40, 31, .2); }
.things-art .badge {
position: absolute; top: 0; right: 0; width: 168px; height: auto;
transform: rotate(9deg); z-index: 2;
}
/* Green panels */
.panels { background: var(--green); color: #fff; }
.panels-grid { display: grid; grid-template-columns: 1.08fr .92fr; gap: 80px; align-items: center; }
.panel-rows h2 { font-size: clamp(1.9rem, 3.4vw, 2.6rem); margin-bottom: 8px; }
.panel-rows h2 + p { color: rgba(255, 255, 255, .85); margin-bottom: 26px; }
.panel-row {
display: grid; grid-template-columns: 138px 1fr; gap: 24px; align-items: center;
padding: 24px 0; border-bottom: 1px solid rgba(255, 255, 255, .22);
}
.panel-row:last-child { border-bottom: 0; }
.panel-row img { width: 138px; height: 104px; object-fit: cover; border-radius: 24px; }
.panel-row h3 { font-size: 1.45rem; margin-bottom: 5px; }
.panel-row p { color: rgba(255, 255, 255, .88); font-size: .97rem; margin-bottom: 8px; }
.panel-row a { color: var(--gold); font-weight: 600; font-size: .92rem; text-decoration: none; }
.panel-row a:hover { text-decoration: underline; text-underline-offset: 4px; }
.bee-panel { text-align: center; }
.bee-panel .bee-photo {
width: min(340px, 80%); aspect-ratio: 4 / 4.2; object-fit: cover; margin: 0 auto 30px;
border-radius: 34px; box-shadow: 0 20px 50px rgba(0, 0, 0, .25);
}
.bee-panel h3 { font-family: 'Quicksand', sans-serif; font-size: 2rem; margin-bottom: 14px; }
.bee-panel p { color: rgba(255, 255, 255, .9); margin-bottom: 28px; max-width: 30em; margin-left: auto; margin-right: auto; }
/* Social strip */
.social { background: #fff; }
.social-head { display: flex; align-items: flex-end; gap: 20px; flex-wrap: wrap; margin-bottom: 36px; }
.social-head h2 {
font-size: clamp(1.7rem, 2.9vw, 2.3rem); color: var(--green);
text-transform: uppercase; letter-spacing: .16em; font-weight: 600;
}
.social-head p { color: var(--muted); padding-bottom: 6px; }
.social-head .handle {
margin-left: auto; display: flex; align-items: center; gap: 10px;
color: var(--ink); font-weight: 600; text-decoration: none; padding-bottom: 6px;
}
.social-head .handle svg { width: 26px; height: 26px; color: var(--green); }
.social-head .handle:hover { color: var(--green); }
.social-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 22px; align-items: end; }
.social-grid img {
width: 100%; aspect-ratio: 4 / 4.4; object-fit: cover; border-radius: 34px;
transition: transform .3s ease, box-shadow .3s ease;
}
.social-grid img:hover { transform: translateY(-8px); box-shadow: 0 18px 40px rgba(35, 40, 31, .18); }
/* ===== Inner page heroes =====
One treatment, used on every inner page: a photograph running flush under the
nav with a white card lapping over its lower edge. Light ground, ink type,
gold rule along the top of the card. */
/* The generic `section` rule puts 100px of air top and bottom. On a hero that
reads as a dead band under the nav, so heroes opt out and set their own. */
.phero { position: relative; overflow: hidden; padding: 0; }
.phero h1 {
font-size: clamp(1.95rem, 3.6vw, 2.85rem); color: var(--ink);
letter-spacing: -.005em;
}
.phero .kicker { color: var(--gold-deep); }
.phero-lede { color: var(--muted); margin-top: 18px; font-size: 1.1rem; max-width: 34em; }
.phero .btn-row { margin-top: 30px; }
.phero .wave { margin: 16px 0 0; }
.phero-band { background: var(--cream); padding-bottom: 64px; }
.phero-band .band-photo { height: clamp(280px, 36vw, 460px); }
.phero-band .band-photo img { width: 100%; height: 100%; object-fit: cover; }
.phero-band .band-card { max-width: 1200px; margin: -104px auto 0; padding: 0 28px; position: relative; }
.phero-band .band-card > div {
background: #fff; border-radius: 44px; padding: 44px 52px 46px; max-width: 790px;
border-top: 4px solid var(--gold);
box-shadow: 0 30px 66px rgba(35, 40, 31, .18);
}
/* ===== Bees =====
Only on the beekeeping hero, and only over the photograph of the hives —
a page about bees can carry a few, but motion loose over the reading is
just noise. They sit under the card, so one drifting across passes behind
it rather than over the words, and they never take a click.
Four paths rather than one shared one: bees that all move the same way at
the same time read as a screensaver, and the point is that they do not. */
.phero-band .band-photo { position: relative; }
/* Bounded by the photograph itself, so this cannot drift out of step with the
band height the way a copied clamp did. */
.bees { position: absolute; inset: 0; z-index: 1; pointer-events: none; }
.phero-band .band-card { z-index: 2; }
.bee {
position: absolute; left: 0; top: 0; will-change: transform;
/* Sized by height, so the ratio has to be stated here: the inline drawing
carries no width or height of its own, and without this it falls back to
the 300px default every SVG gets and swamps the picture. */
aspect-ratio: 22 / 16;
/* The photograph behind them runs from bright sky to dark stonework, so they
need to carry their own edge or they vanish over half of it. */
filter: drop-shadow(0 1px 2px rgba(20, 24, 16, .5));
}
.bee-jig { display: block; width: 100%; height: 100%; animation: bee-jig 1.9s ease-in-out infinite; }
.bee-art { display: block; width: 100%; height: 100%; }
/* Fast enough to read as a blur rather than as a flap. */
.bee-wing { transform-origin: 11.5px 6px; animation: bee-wing .14s ease-in-out infinite alternate; }
.bee--rev .bee-art { transform: scaleX(-1); }
@keyframes bee-wing { from { transform: scaleY(1); } to { transform: scaleY(.55); } }
@keyframes bee-jig {
0%, 100% { transform: translate(0, 0); }
25% { transform: translate(3px, -4px); }
50% { transform: translate(-2px, 3px); }
75% { transform: translate(4px, 2px); }
}
/* The beekeepers' heads start about a quarter of the way down the picture, and
they stay there at every width because the photograph is cropped at the sides
rather than top and bottom. So both the size of each bee and how high it sits
are shares of the band: the same sky keeps the same bees in it whether the
band is 460px tall or 190px, and nothing needs re-checking per breakpoint.
The floor stops the smallest turning into a speck on a phone. Lowest any of
them reaches is 17% plus its rise, against a face line at 25%. */
.bee--a { top: 3%; height: max(13px, 7%); animation: bee-a 32s linear infinite; }
.bee--b { top: 9%; height: max(11px, 5.4%); opacity: .92; animation: bee-b 41s linear infinite -6s; }
.bee--c { top: 6%; height: max(10px, 4.4%); opacity: .86; animation: bee-c 19s ease-in-out infinite -3s; }
.bee--d { top: 10%; height: max(12px, 6%); animation: bee-d 47s linear infinite -14s; }
/* The rise and dip in the paths is in pixels, so it has to come down with the
band. Same 920px the band itself shortens at — using a different breakpoint
here is how four full-size bees ended up in a short band on a tablet. */
@media (max-width: 920px) { .bees { --wob: .34; } }
@keyframes bee-a {
0% { transform: translate(-8vw, 0); }
25% { transform: translate(20vw, calc(var(--wob, 1) * -22px)); }
50% { transform: translate(48vw, calc(var(--wob, 1) * 14px)); }
75% { transform: translate(76vw, calc(var(--wob, 1) * -18px)); }
100% { transform: translate(108vw, calc(var(--wob, 1) * 6px)); }
}
@keyframes bee-b {
0% { transform: translate(106vw, 0); }
30% { transform: translate(70vw, calc(var(--wob, 1) * 22px)); }
60% { transform: translate(34vw, calc(var(--wob, 1) * -16px)); }
100% { transform: translate(-10vw, calc(var(--wob, 1) * 10px)); }
}
/* This one never leaves — it works the top corner of the picture and stays. */
@keyframes bee-c {
0%, 100% { transform: translate(72vw, 0); }
20% { transform: translate(79vw, calc(var(--wob, 1) * -22px)); }
45% { transform: translate(85vw, calc(var(--wob, 1) * 8px)); }
70% { transform: translate(74vw, calc(var(--wob, 1) * 26px)); }
}
@keyframes bee-d {
0% { transform: translate(-6vw, calc(var(--wob, 1) * 22px)); }
35% { transform: translate(26vw, calc(var(--wob, 1) * -14px)); }
70% { transform: translate(58vw, calc(var(--wob, 1) * 18px)); }
100% { transform: translate(104vw, calc(var(--wob, 1) * -8px)); }
}
/* The wanderers. Fixed to the viewport rather than to the document, because a
bee pinned to a spot two screens down is a bee nobody ever sees. Sits above
the page but under the header, the menu and the lightbox, so it can cross the
reading without ever getting in front of a control. */
.bee-sky {
position: fixed; inset: 0; z-index: 100;
pointer-events: none; overflow: hidden;
}
.bee-rover {
position: absolute; left: 0; top: 0;
aspect-ratio: 22 / 16; will-change: transform;
filter: drop-shadow(0 1px 2px rgba(20, 24, 16, .45));
}
@media (prefers-reduced-motion: reduce) { .bee-sky { display: none; } }
/* Asked for less motion, they are gone rather than frozen — four bees stopped
dead in mid-air over a photograph looks like a fault, not a still. */
@media (prefers-reduced-motion: reduce) { .bees { display: none; } }
/* Contact details sitting inside the hero card as pills */
.phero-facts { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 28px; }
.phero-facts .ico { color: var(--green); flex: 0 0 auto; }
.phero-facts a, .phero-facts span {
display: inline-flex; align-items: center; gap: 8px;
background: var(--cream); border: 1px solid var(--line); border-radius: 999px;
padding: 9px 18px; font-size: .92rem; font-weight: 600;
color: var(--ink); text-decoration: none; transition: border-color .2s ease, color .2s ease;
}
.phero-facts a:hover { border-color: var(--green); color: var(--green); }
/* Breadcrumb — one tap back to the section above */
.crumbs { font-size: .8rem; color: var(--muted); padding: 16px 28px 0; }
.crumbs a { color: var(--muted); text-decoration: none; }
.crumbs a:hover { color: var(--green); text-decoration: underline; text-underline-offset: 3px; }
.crumbs span { padding: 0 8px; opacity: .55; }
.crumbs b { font-weight: 600; color: var(--ink); }
/* ===== Generic image + copy split ===== */
.split { display: grid; grid-template-columns: 1fr 1fr; gap: 70px; align-items: center; }
.split.narrow-art { grid-template-columns: 1.1fr .9fr; }
.split.flip .split-art { order: 2; }
.split-copy p { color: var(--muted); margin-bottom: 20px; max-width: 36em; }
.split-copy p.lead { color: var(--ink); font-size: 1.15rem; font-weight: 600; }
.split-copy .btn-row { margin-top: 30px; }
.split-art img { width: 100%; border-radius: 34px; box-shadow: 0 24px 60px rgba(35, 40, 31, .18); }
.split-art figcaption { color: var(--muted); font-size: .87rem; margin-top: 12px; text-align: center; }
/* ===== Info cards (address, hours, parking, prices) ===== */
.card-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 22px; }
.card-grid.two { grid-template-columns: repeat(2, 1fr); }
.card {
background: #fff; border: 1px solid var(--line); border-radius: 34px; padding: 32px 30px;
transition: transform .25s ease, box-shadow .25s ease;
}
.cream-bg .card, .card.on-cream { background: #fff; }
.card h3 { font-size: 1.4rem; margin-bottom: 10px; color: var(--green); }
.card p { color: var(--muted); font-size: .97rem; }
.card p + p { margin-top: 12px; }
/* :not(.btn) matters — .card a is more specific than .btn-green, so without it
a filled button inside a card renders green text on a green pill. */
.card a:not(.btn) { color: var(--green); font-weight: 600; text-decoration: none; }
.card a:not(.btn):hover { text-decoration: underline; text-underline-offset: 3px; }
.card .card-icon {
width: 46px; height: 46px; border-radius: 20px; background: var(--cream-deep);
display: grid; place-items: center; margin-bottom: 18px; color: var(--green);
}
a.card { display: block; text-decoration: none; color: inherit; }
a.card:hover { transform: translateY(-5px); box-shadow: 0 18px 40px rgba(35, 40, 31, .13); }
/* ===== Checklist ===== */
.checks { list-style: none; display: grid; grid-template-columns: repeat(2, 1fr); gap: 12px 30px; margin: 8px 0 0; }
.checks li { position: relative; padding-left: 30px; color: var(--muted); font-size: .98rem; }
.checks li::before {
content: "✓"; position: absolute; left: 0; top: -1px;
color: var(--green); font-weight: 700;
}
.checks.one-col { grid-template-columns: 1fr; }
/* ===== Notice strip ===== */
.notice {
display: flex; gap: 16px; align-items: flex-start;
background: #fff; border: 1px solid var(--line); border-left: 5px solid var(--gold);
border-radius: 28px; padding: 22px 26px; margin-top: 30px;
}
.notice .n-mark { color: var(--gold-dark); display: grid; place-items: center; padding-top: 2px; }
.notice h4 { font-size: 1.05rem; letter-spacing: .16em; text-transform: uppercase; color: var(--green); margin-bottom: 5px; }
.notice p { color: var(--muted); font-size: .95rem; }
/* ===== Business directory ===== */
.dir-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 26px; }
.dir-card {
background: #fff; border: 1px solid var(--line); border-radius: 34px; overflow: hidden;
display: flex; flex-direction: column; transition: transform .25s ease, box-shadow .25s ease;
}
.dir-card:hover { transform: translateY(-6px); box-shadow: 0 22px 48px rgba(35, 40, 31, .15); }
.dir-card > img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; }
.dir-body { padding: 26px 26px 28px; display: flex; flex-direction: column; flex: 1; }
.dir-body h3 { font-size: 1.35rem; margin-bottom: 4px; }
.dir-tag {
font-size: .72rem; letter-spacing: .16em; text-transform: uppercase;
color: var(--gold-deep); font-weight: 700; margin-bottom: 12px;
}
.dir-body p { color: var(--muted); font-size: .95rem; margin-bottom: 18px; }
.dir-links { margin-top: auto; display: flex; flex-wrap: wrap; gap: 8px; }
.dir-links a {
font-size: .84rem; font-weight: 600; text-decoration: none;
color: var(--green); border: 1.5px solid var(--line); border-radius: 999px; padding: 7px 15px;
transition: background .2s ease, color .2s ease, border-color .2s ease;
}
.dir-links a:hover { background: var(--green); border-color: var(--green); color: #fff; }
/* One shared sprite per page carries the brand glyphs; the symbols are only
ever referenced with