*/
.t-hero { font-size: var(--t-hero) !important; line-height: 1.05; letter-spacing: -0.02em; }
/* Editorial serif emphasis — uses the already-loaded Cormorant Garamond */
.t-emph { font-family: var(--font-family-display); font-style: italic; font-weight: 600; }
/* Eyebrow — one tracked-caps treatment for section kickers */
.eyebrow { font-size: .75rem; text-transform: uppercase; letter-spacing: .18em; font-weight: 600; color: var(--accent); }
/* Hairline rule */
.hairline { height: 1px; width: 100%; border: 0; background-color: var(--line); }
/* Readable measure for long-form text */
.measure { max-width: 65ch; }
/* Gold underline-wipe for inline / nav links (L→R) */
.link-wipe {
background-image: linear-gradient(var(--accent), var(--accent));
background-repeat: no-repeat; background-position: 0 100%;
background-size: 0% 1.5px; padding-bottom: 2px;
transition: background-size var(--ui-dur) var(--ui-ease);
}
.link-wipe:hover, .link-wipe:focus-visible { background-size: 100% 1.5px; }
/* =====================================================================
VISIBLE CRAFT PASS — serif display headings · eyebrows · ticks · seal · magnetic
===================================================================== */
/* Editorial serif display: hero + every section in Playfair Display
at a refined 600 weight — one elegant heading voice across the whole site.
Labels, buttons, nav and body all use the single sans (Inter). */
.t-hero {
font-family: var(--font-family-display);
font-weight: 600;
letter-spacing: -0.01em;
}
h2[class*="font-[Outfit]"],
h2[class*="font-['Outfit']"] {
font-family: var(--font-family-display) !important;
font-weight: 600;
line-height: 1.12;
letter-spacing: -0.005em;
}
/* Card & sub-section titles — bring every in-page – into the SAME
Playfair Display heading voice as the section s, at a refined 600
weight instead of the old heavy sans-bold/semibold. This covers facility
cards ("Spacious Stables"), livery cards ("DIY Livery"), about/contact
cards ("Why Choose Us?", "Call Us"), detail-page sub-headings and feature
rows ("Stabling Features", "Practical Layout"), etc. — whether or not they
carry the legacy `font-[Outfit]` class. Scoped to #main so the footer's
tracked-caps section labels (.ftr-head) keep the clean sans; nav, buttons
and stats/prices in
in Playfair Display
at a refined 600 weight — one elegant heading voice across the whole site.
Labels, buttons, nav and body all use the single sans (Inter). */
.t-hero {
font-family: var(--font-family-display);
font-weight: 600;
letter-spacing: -0.01em;
}
h2[class*="font-[Outfit]"],
h2[class*="font-['Outfit']"] {
font-family: var(--font-family-display) !important;
font-weight: 600;
line-height: 1.12;
letter-spacing: -0.005em;
}
/* Card & sub-section titles — bring every in-page – into the SAME
Playfair Display heading voice as the section s, at a refined 600
weight instead of the old heavy sans-bold/semibold. This covers facility
cards ("Spacious Stables"), livery cards ("DIY Livery"), about/contact
cards ("Why Choose Us?", "Call Us"), detail-page sub-headings and feature
rows ("Stabling Features", "Practical Layout"), etc. — whether or not they
carry the legacy `font-[Outfit]` class. Scoped to #main so the footer's
tracked-caps section labels (.ftr-head) keep the clean sans; nav, buttons
and stats/prices in
into the SAME
Playfair Display heading voice as the section s, at a refined 600
weight instead of the old heavy sans-bold/semibold. This covers facility
cards ("Spacious Stables"), livery cards ("DIY Livery"), about/contact
cards ("Why Choose Us?", "Call Us"), detail-page sub-headings and feature
rows ("Stabling Features", "Practical Layout"), etc. — whether or not they
carry the legacy `font-[Outfit]` class. Scoped to #main so the footer's
tracked-caps section labels (.ftr-head) keep the clean sans; nav, buttons
and stats/prices in
/ are likewise untouched. One elegant font
for titles, the single sans (Inter) for all readable information. */
#main h3,
#main h4,
#main h5,
#main h6 {
font-family: var(--font-family-display) !important;
font-weight: 600 !important;
line-height: 1.25;
letter-spacing: -0.005em;
}
/* Form labels — the inline `text-[11px]` uppercase labels were a shade too
small to scan comfortably; lift to 12px (still discreet, clearly legible). */
#main form label { font-size: 0.75rem; }
/* Eyebrow — gold tracked-caps flanked by short hairline ticks (centres or left-aligns
with its container automatically because it is inline-flex). */
.eyebrow { display: inline-flex !important; align-items: center; gap: 0.7rem; }
.eyebrow::before, .eyebrow::after {
content: ""; width: 26px; height: 1px; flex: 0 0 auto;
background-color: var(--accent); opacity: .9;
}
/* Engraved gold tick badge — replaces bare check bullets in feature lists */
.tick {
display: inline-flex; align-items: center; justify-content: center;
width: 18px; height: 18px; flex: 0 0 auto;
border-radius: 9999px; background: rgba(201,169,97,.16);
color: var(--accent); font-size: 9px;
}
/* Horse seal — a small gold-ringed crest mark (uses fa-horse) */
.seal {
display: inline-flex; align-items: center; justify-content: center;
width: 60px; height: 60px; border-radius: 9999px;
border: 1px solid var(--accent);
box-shadow: 0 0 0 4px rgba(201,169,97,.12);
color: var(--primary-color); font-size: 22px;
}
/* CTA hover handoff — colour/shadow only. The magnetic cursor-pull and the
press-scale were removed so buttons NEVER move, scale, or shift on
hover/press (see main.js). */
[data-magnetic] {
transition: background-color .25s ease, color .25s ease, border-color .25s ease, box-shadow .25s ease;
}
/* =====================================================================
FOOTER — refined, spacious, divider-column layout
Dark green premium footer — two-colour system only: a dark green field
(#2E4422) and white / off-white text. Hierarchy is built purely from
white at different opacities; dividers are low-opacity white hairlines.
No gold, beige or grey accents. Scoped to #global-footer so nothing else
changes.
===================================================================== */
#global-footer {
/* Footer-scoped palette — two colours only. Local vars so the global
--accent and the rest of the site stay untouched. */
--ftr-line: rgb(255 255 255 / 0.16); /* subtle low-opacity white hairline */
background-color: #2E4422; /* dark green field */
color: #ffffff; /* white base */
}
#global-footer .ftr-wrap { max-width: 80rem; margin: 0 auto; padding: 4rem 1.5rem 2.5rem; }
@media (min-width: 768px) { #global-footer .ftr-wrap { padding: 6rem 2.5rem 2.75rem; } }
#global-footer .ftr-grid { display: grid; grid-template-columns: 1fr; gap: 3rem; }
@media (min-width: 640px) {
#global-footer .ftr-grid { grid-template-columns: 1fr 1fr; column-gap: 2.5rem; row-gap: 3rem; }
#global-footer .ftr-brandcol { grid-column: 1 / -1; }
}
@media (min-width: 1024px) {
#global-footer .ftr-grid { grid-template-columns: 1.7fr 1fr 1fr 1.5fr; gap: 0; }
#global-footer .ftr-brandcol { grid-column: auto; padding-right: 3rem; }
/* thin vertical rules between columns — desktop only */
#global-footer .ftr-col { border-left: 1px solid var(--ftr-line); padding-left: 3rem; }
}
#global-footer .ftr-brand {
font-family: var(--font-family-display); font-weight: 600;
font-size: clamp(1.6rem, 2.4vw, 2.15rem); letter-spacing: 0.14em; text-transform: uppercase;
color: #ffffff; line-height: 1.05; display: inline-block; /* white wordmark */
}
#global-footer .ftr-desc { margin-top: 1.6rem; max-width: 22rem; font-size: 0.9rem; line-height: 1.7; color: rgb(255 255 255 / 0.72); }
#global-footer .ftr-head {
font-size: 0.6875rem; letter-spacing: 0.2em; text-transform: uppercase;
color: #ffffff; font-weight: 600; margin-bottom: 1.5rem; /* white heading */
}
#global-footer .ftr-list { display: flex; flex-direction: column; gap: 0.9rem; }
#global-footer .ftr-link { color: rgb(255 255 255 / 0.78); transition: color 0.25s var(--ui-ease); }
#global-footer .ftr-link:hover, #global-footer .ftr-link:focus-visible { color: #ffffff; }
#global-footer .ftr-address { font-style: normal; font-size: 0.9rem; line-height: 1.7; color: rgb(255 255 255 / 0.78); }
#global-footer .ftr-cta {
display: inline-block; margin-top: 1.75rem; font-size: 0.75rem; letter-spacing: 0.16em;
text-transform: uppercase; color: #ffffff; font-weight: 600; transition: opacity 0.25s;
}
#global-footer .ftr-cta:hover { opacity: 0.7; }
#global-footer .ftr-bottom {
margin-top: 4rem; padding-top: 2rem; border-top: 1px solid var(--ftr-line);
display: flex; flex-direction: column; gap: 1rem; font-size: 0.75rem; color: rgb(255 255 255 / 0.62);
}
@media (min-width: 640px) { #global-footer .ftr-bottom { flex-direction: row; align-items: center; justify-content: space-between; } }
#global-footer .ftr-bottom a { transition: color 0.25s; }
#global-footer .ftr-bottom a:hover { color: #ffffff; }
#global-footer .ftr-legal { display: flex; gap: 1.75rem; }
#global-footer .ftr-credit a { color: inherit; text-decoration: underline; text-underline-offset: 2px; }
/* =====================================================================
HOME HERO — cinematic full-bleed image · depth background ·
larger display headline · credential strip with trust signal
===================================================================== */
.hero {
position: relative;
overflow: hidden;
background:
radial-gradient(55% 45% at 20% 36%, rgba(201,169,97,0.11), rgba(201,169,97,0) 72%),
linear-gradient(168deg, #FAF8F2 0%, #F1F0E7 56%, #E9ECE2 100%);
}
.hero-inner { position: relative; z-index: 2; }
.hero-text { max-width: 30rem; margin-inline: auto; }
/* Larger, tighter display headline (home hero only) */
.hero .t-hero { font-size: clamp(2.5rem, 5.4vw + 0.5rem, 4.75rem) !important; line-height: 1.02; }
/* Credential strip + trust signal */
.hero-cred {
margin-top: 2rem; padding-top: 1.5rem; border-top: 1px solid var(--line);
display: flex; flex-wrap: wrap; align-items: center; gap: 0.7rem 1.1rem;
}
.hero-rating { display: inline-flex; align-items: center; gap: 0.5rem; font-size: 0.85rem; color: var(--ink); white-space: nowrap; }
.hero-stars { display: inline-flex; gap: 2px; color: #F4B400; font-size: 0.72rem; }
.hero-rating strong { font-weight: 700; }
.hero-rating__src { color: var(--muted); }
.hero-vsep { width: 1px; height: 14px; background: var(--line); }
.hero-facts { font-size: 0.7rem; letter-spacing: 0.09em; text-transform: uppercase; color: #5A5A5A; font-weight: 500; }
/* Media */
.hero-media { position: relative; width: 100%; height: 54vh; min-height: 300px; }
.hero-media .media-ph, .hero-media img { width: 100%; height: 100%; object-fit: cover; display: block; }
.hero-media::after { content: ""; position: absolute; inset: 0; border: 1px solid rgba(201,169,97,0.20); pointer-events: none; z-index: 2; }
.hero-media__scrim {
position: absolute; inset: 0; pointer-events: none; z-index: 1;
background: linear-gradient(to top, rgba(18,28,16,0.30) 0%, rgba(18,28,16,0) 42%);
}
@media (min-width: 1024px) {
/* Mobile-only headline line breaks: neutralised on desktop so the
headline flows/wraps naturally exactly as before (desktop untouched). */
.hero-br { display: none; }
/* Full-viewport hero: the SECTION spans the entire viewport (100svh) so the
next section ("Our Livery Options") starts exactly at the fold. The fixed
header overlays the top of the page, so we reserve its true rendered
height (--hero-header-height, 73px) as padding-top — the flex-centred
content then sits optically centred in the VISIBLE band below the nav
rather than behind it. 100svh == 100vh on desktop but is URL-bar-safe.
Desktop-only (gated @media min-width:1024px); mobile/tablet untouched. */
.hero {
min-height: 100vh; /* fallback for browsers without svh support */
min-height: 100svh; /* preferred: URL-bar-safe full viewport */
padding-top: var(--hero-header-height);
display: flex;
align-items: center;
}
.hero-inner { width: 100%; }
.hero-text { margin-inline: 0; max-width: 32rem; }
/* top:0 → image bleeds full-viewport behind the 95%-opaque header (keeps the
original full-bleed look); object-fit:cover means the taller box never
distorts the horse. */
.hero-media { position: absolute; right: 0; top: 0; bottom: 0; width: 52vw; height: auto; min-height: 0; }
/* Gentle image→cream blend on the image's inner (left) edge: narrower band
(~14% vs 30%) and a softened peak (78% vs solid paper) so the horse stays
visible close to the edge and the seam reads as a subtle, refined
transition — not a washed-out white strip. Blends to the same #F7F5EF
paper cream as the hero background. Bottom scrim kept for depth. */
.hero-media__scrim {
background:
linear-gradient(to right, rgba(247,245,239,0.78) 0%, rgba(247,245,239,0) 14%),
linear-gradient(to top, rgba(18,28,16,0.26) 0%, rgba(18,28,16,0) 42%);
}
}
/* =====================================================================
HEADER — slim · self-condensing on scroll · active-page nav · gold hover
===================================================================== */
#global-header {
transition: transform 250ms ease-in-out, background-color 250ms ease, box-shadow 250ms ease;
}
/* Respect reduced-motion: the header still hides/shows on scroll, it just
snaps instead of sliding. Placed AFTER the base transition so it wins. */
@media (prefers-reduced-motion: reduce) {
#global-header { transition: background-color 250ms ease, box-shadow 250ms ease; }
}
/* Logo height via a CSS variable on the header (arbitrary Tailwind h-[..] isn't compiled) */
#global-header { --logo-h: 50px; }
@media (min-width: 1024px) { #global-header { --logo-h: 56px; } }
#global-header [data-logo] img { height: var(--logo-h); width: auto; }
/* Scrolled past the top → firmer bg, soft shadow + hair-thin gold rule, logo shrinks */
#global-header.is-solid {
background-color: rgba(255,255,255,0.94);
box-shadow: 0 1px 0 rgba(201,169,97,0.30), 0 10px 28px -20px rgba(20,28,16,0.45);
}
/* Condense on scroll = firmer bg + soft shadow + gold hairline (above); logo stays slim. */
/* =====================================================================
LIVERY PACKAGE CARDS — refined, with a featured / recommended tier
===================================================================== */
.livery-card {
position: relative; background: #FFFEFB;
border: 1px solid #E6E1D6; border-radius: 1.5rem; overflow: hidden;
box-shadow: 0 1px 2px rgba(20,28,16,.04), 0 18px 40px -26px rgba(20,28,16,.22);
transition: box-shadow .5s var(--ui-ease), border-color .5s;
}
.livery-card:hover { box-shadow: 0 2px 4px rgba(20,28,16,.06), 0 34px 70px -30px rgba(20,28,16,.40); }
/* Featured livery-card treatment removed — DIY and Full now share the base
.livery-card style (equal size, no gold ring / top-accent / lift). */
/* Image area + bottom scrim for depth */
.livery-media { position: relative; height: 16rem; overflow: hidden; }
@media (min-width: 640px) { .livery-media { height: 20rem; } }
.livery-media::after { content:""; position:absolute; inset:0; pointer-events:none; z-index:1;
background: linear-gradient(to top, rgba(18,28,16,.30), rgba(18,28,16,0) 48%); }
/* ---------------------------------------------------------------------
FOCUS-ON-HOVER SPOTLIGHT (Livery Options cards) — pure CSS, no JS.
Hovering one card softly blurs + dims the OTHER card's photo and slowly
zooms the hovered photo. Mapping from the shared house spec:
.grid.has-focus-hover → the livery grid (class added in the markup)
.card → .livery-card
.card-media → .livery-media (already position:relative + overflow:hidden)
.card-media-inner/img → the hydrated (media.js) — the DIY/FULL
badge and the ::after scrim are SIBLINGS above it,
and all copy sits below the frame, so blur can
never touch text.
The optional frame-lift from the spec is intentionally skipped: these
images live inside bordered, clip-rounded cards that already deepen their
own shadow on hover — translating the frame would shear it out of the
card's rounded corners. */
/* Slow luxury zoom — replaces the Tailwind group-hover zoom (1.05/0.7s) on
these cards with the spec's 1.04/1.2s. The transition shorthand re-states
transform alongside filter/opacity so nothing clobbers anything.
:focus-within mirrors hover for keyboard users (the card is a
s only — body text, icons, spacing and other headings are
untouched. Higher specificity than the inline `text-lg`, so no !important. */
#s46ef3 h3 { font-size: 1.25rem; }
/* Sand Arenas page — "Large & Small Sand Arenas" feature cards (#srktnjl
left-column 2-col grid only): the small titles (text-sm 14px) and
descriptions (text-xs 12px) felt undersized, so nudge them up subtly for
readability while keeping the serif-title / Inter-body styling and a clear
hierarchy. Scoped to these four cards — icons, badge, layout, spacing,
borders, shadows and the section heading are untouched. */
#srktnjl .grid.grid-cols-2 h4 { font-size: 1.125rem; line-height: 1.3; }
#srktnjl .grid.grid-cols-2 p { font-size: 0.875rem; }
/* Sand Arenas page — hero pricing card (#s4expd badge only): the two footnotes
under the price felt too small. Bump the explanatory line slightly and the
green "arena access included" reassurance note more (it's the emphasis),
with a touch more line-height for readability. The £10 price and "per hour
per horse" (both s) are untouched, as are the card width, border,
background, shadow, spacing and layout. Scoped to this card only. */
#s4expd .rounded-2xl p:first-of-type { font-size: 0.9375rem; } /* explanatory: text-xs/sm → 15px */
#s4expd .rounded-2xl p:last-of-type { font-size: 1rem; line-height: 1.5; } /* green note: text-xs → 16px (emphasis) */
/* About page — "Welcome to Peninsula Equestrian" right-column feature cards
(#sfqk5hd only): vertically centre each serif title beside its icon box
(the row was top-aligned via items-start) and give the titles slightly more
presence (text-lg/xl 18–20px → 20–22px). Zeroing the title's own mb-1 makes
the centring exact without touching the title→description gap (that gap is
the row's mb-4). Scoped to these three cards — icon, card, padding,
background, border, shadow and body text are untouched. */
#sfqk5hd .space-y-6 .flex.items-start { align-items: center; }
#sfqk5hd .space-y-6 .flex.items-start h4 { margin-bottom: 0; font-size: 1.25rem; }
@media (min-width: 640px) {
#sfqk5hd .space-y-6 .flex.items-start h4 { font-size: 1.375rem; }
}
/* Contact page — contact info cards (#scontact-form only): the "Call Us" /
"Email Us" / "Find Us" serif titles felt slightly small, so nudge them up
~2px (text-sm/base 14–16px → 16–18px). These are the only
s in the
section. Scoped here so nothing site-wide changes; icon, card, spacing,
background, borders, shadows and the phone/email/address/directions text
are untouched, and the centred layout is unaffected. */
#scontact-form h4 { font-size: 1rem; }
@media (min-width: 640px) {
#scontact-form h4 { font-size: 1.125rem; }
}
/* "Explore →" affordance — always visible (muted), brightens + arrow slides on hover */
.facility-cta {
display: inline-flex; align-items: center; gap: .45rem; margin-top: .9rem;
font-size: .72rem; letter-spacing: .12em; text-transform: uppercase; font-weight: 600;
color: #A89567; transition: color .3s var(--ui-ease);
}
.facility-cta i { font-size: .6rem; transition: transform .3s var(--ui-ease); }
.facility-card:hover .facility-cta { color: var(--accent); }
.facility-card:hover .facility-cta i { transform: translateX(3px); }
@media (prefers-reduced-motion: reduce) {
.facility-card, .facility-title, .facility-cta, .facility-cta i { transition: none; }
}
/* ---------------------------------------------------------------------
FOCUS-ON-HOVER SPOTLIGHT (Everything Your Horse Needs cards) — pure CSS.
Same interaction as the Livery Options cards, tuned SOFTER because this is
a six-card grid: the un-hovered photos only gently soften (light blur +
mild dim) so the section never feels busy, while the hovered card's photo
slowly zooms. Targets the pre-existing `.facility-focus-grid` hook on the
grids (home + facilities page). The icon chip and ::after scrim are
siblings above the image, and all copy sits below the frame, so text and
icons always stay sharp. */
/* Slow luxury zoom — replaces the Tailwind group-hover zoom (1.05/0.7s) with
the house 1.04/1.2s. Cards are elements, so :focus-visible gives
keyboard users the same cue. */
.facility-focus-grid .facility-card .facility-media img {
transition: transform 1.2s cubic-bezier(0.22, 1, 0.36, 1),
filter 0.3s cubic-bezier(0.76, 0, 0.24, 1),
opacity 0.3s cubic-bezier(0.76, 0, 0.24, 1);
}
.facility-focus-grid .facility-card:hover .facility-media img,
.facility-focus-grid .facility-card:focus-visible .facility-media img {
transform: scale(1.04);
}
/* Subtle de-emphasis of the other cards' photos — hover-capable fine
pointers on desktop only, so touch devices can never get stuck softened. */
@media (hover: hover) and (pointer: fine) and (min-width: 768px) {
.facility-focus-grid:hover .facility-card:not(:hover) .facility-media img {
filter: blur(2px) saturate(0.9);
opacity: 0.8;
}
.facility-focus-grid:hover .facility-card:hover .facility-media img {
filter: none;
opacity: 1;
}
.facility-focus-grid:hover .facility-card .facility-media img {
will-change: filter, opacity;
contain: paint;
}
}
/* Reduced motion: hard-kill the softening and the zoom */
@media (prefers-reduced-motion: reduce) {
.facility-focus-grid .facility-card .facility-media img {
filter: none !important;
opacity: 1 !important;
transform: none !important;
transition: none !important;
}
}
/* =====================================================================
FEATURE BAND — immersive full-bleed feature (image bleeds LEFT on desktop,
mirroring the hero's right-bleed for an alternating editorial rhythm).
===================================================================== */
.feature-band {
position: relative; overflow: hidden;
background:
radial-gradient(50% 55% at 82% 42%, rgba(201,169,97,.08), rgba(201,169,97,0) 70%),
linear-gradient(180deg, #FAF8F2 0%, #F1F0E8 100%);
}
.feature-inner { position: relative; z-index: 2; }
.feature-text { max-width: 30rem; margin-inline: auto; padding: 2.75rem 0 0.25rem; }
.feature-media { position: relative; width: 100%; height: 54vh; min-height: 300px; }
.feature-media .media-ph, .feature-media img { width:100%; height:100%; object-fit:cover; display:block; }
.feature-media::after { content:""; position:absolute; inset:0; pointer-events:none; z-index:1;
background: linear-gradient(to top, rgba(18,28,16,.34), rgba(18,28,16,0) 46%); }
.feature-tag {
position:absolute; z-index:3; left:1.1rem; bottom:1.1rem;
display:inline-flex; align-items:center; gap:.45rem;
background: rgba(14,20,15,.55); backdrop-filter: blur(6px);
border:1px solid rgba(255,255,255,.18); color:#fff;
font-size:.6rem; letter-spacing:.13em; text-transform:uppercase; font-weight:600;
padding:.4rem .8rem; border-radius:9999px;
}
.feature-tag i { color: var(--accent); font-size:.62rem; }
.feature-points { display:flex; flex-direction:column; gap:.65rem; margin:.25rem 0 1.75rem; }
.feature-points li { display:flex; align-items:center; gap:.6rem; color:#5a5a5a; font-size:.9rem; }
.feature-link { display:inline-flex; align-items:center; gap:.5rem; color: var(--primary-color); font-weight:600; font-size:.875rem; }
.feature-link i { font-size:.7rem; }
/* Hacking-routes CTA — two polished buttons (primary forest-green + subtle
outlined secondary) replacing the old weak "Enquire now" text link. The
secondary mirrors the hero's outlined CTA for a consistent premium feel. */
.feature-cta { display:flex; flex-wrap:wrap; align-items:stretch; gap:.85rem; }
.feature-btn {
display:inline-flex; align-items:center; justify-content:center; gap:.5rem;
padding:.9rem 1.9rem; border-radius:.85rem;
font-weight:600; font-size:.875rem; letter-spacing:.02em; line-height:1;
transition: background .3s var(--ui-ease), border-color .3s var(--ui-ease),
box-shadow .3s var(--ui-ease), color .3s var(--ui-ease);
}
.feature-btn i { font-size:.7rem; }
.feature-btn--primary {
background: var(--primary-color); color:#fff; border:2px solid var(--primary-color);
box-shadow: 0 6px 16px -8px rgba(20,28,16,.45);
}
.feature-btn--primary:hover {
background:#1F3A0F; border-color:#1F3A0F; /* deepen green; soft glow comes from the shared FX */
}
.feature-btn--secondary {
background: rgba(255,255,255,.55); color: var(--primary-color);
border:2px solid rgba(45,80,22,.22);
}
.feature-btn--secondary:hover {
background: var(--primary-color); color: var(--accent2-color); /* outline → fill green, cream text */
border-color: var(--primary-color);
}
@media (min-width: 1024px) {
.feature-band { min-height: 76vh; display: flex; align-items: center; }
.feature-inner { width: 100%; }
.feature-text { margin-inline: 0; margin-left: auto; max-width: 30rem; padding: 0; }
.feature-media { position: absolute; left: 0; top: 0; bottom: 0; width: 52vw; height: auto; min-height: 0; }
.feature-media::after {
/* Gentle image→cream blend: narrower band (~14% vs 30%) and a softened
peak (78% vs solid) so the photo stays visible close to the right edge
and the seam reads as a subtle, refined transition — not a white haze.
Blends to the same #F1F0E8 cream as the band background. */
background:
linear-gradient(to left, rgba(241,240,232,0.78) 0%, rgba(241,240,232,0) 14%),
linear-gradient(to top, rgba(18,28,16,.30), rgba(18,28,16,0) 42%);
}
}
/* =====================================================================
FAQ — centered section header above a contained, numbered animated accordion
===================================================================== */
.faq-list { counter-reset: faq; display: flex; flex-direction: column; gap: .75rem; }
.faq-item {
position: relative; background: #FFFEFB; counter-increment: faq;
border: 1px solid #E8E4DB; border-radius: 1rem; overflow: hidden;
transition: border-color .3s var(--ui-ease), box-shadow .3s var(--ui-ease);
}
.faq-item:hover { border-color: #DDD6C6; }
.faq-item.is-open { border-color: rgba(201,169,97,.55); box-shadow: 0 14px 34px -22px rgba(45,80,22,.30); }
.faq-item.is-open::before { content:""; position:absolute; left:0; top:0; bottom:0; width:3px; background: var(--accent); z-index:1; }
.faq-q {
width: 100%; display: flex; align-items: center; gap: 1rem;
padding: 1.2rem 1.5rem; text-align: left; cursor: pointer;
background: transparent; transition: background-color .2s;
}
.faq-q:hover { background: rgba(45,80,22,.025); }
/* Open state: warm pale-gold header band, clearly distinct from the lighter
off-white answer area below, with a subtle gold divider between them. Padding
and flex centring (align-items:center above) stay identical to the closed
state — only the background + divider change. */
.faq-item.is-open .faq-q {
background: #F3ECDB;
border-bottom: 1px solid rgba(201,169,97,.32);
}
.faq-q__text { flex: 1; font-weight: 600; color: var(--ink); font-size: 1rem; line-height: 1.4; transition: color .3s; }
.faq-q__text::before {
content: counter(faq, decimal-leading-zero) " ";
font-family: var(--font-family-display); font-style: italic; font-weight: 600;
font-size: 1.05rem; color: var(--accent); margin-right: .55rem;
}
.faq-item.is-open .faq-q__text { color: var(--primary-color); }
.faq-q__icon {
flex-shrink: 0; width: 1.75rem; height: 1.75rem; border-radius: 9999px;
display: inline-flex; align-items: center; justify-content: center;
background: rgba(201,169,97,.14); color: var(--accent); font-size: .68rem;
transition: background-color .3s, color .3s;
}
.faq-item.is-open .faq-q__icon { background: var(--accent); color: #fff; }
.faq-q__icon i { transition: transform .35s var(--ui-ease); }
.faq-item.is-open .faq-q__icon i { transform: rotate(180deg); }
/* Smooth expand/collapse via grid-template-rows */
.faq-answer { display: grid; grid-template-rows: 0fr; transition: grid-template-rows .35s var(--ui-ease); }
.faq-item.is-open .faq-answer { grid-template-rows: 1fr; }
.faq-answer__inner { overflow: hidden; }
.faq-a__text { color: #6B6B6B; font-size: .95rem; line-height: 1.7; margin: 0; padding: 1.1rem 1.5rem 1.35rem 3.55rem; }
@media (prefers-reduced-motion: reduce) {
.faq-answer, .faq-q__icon i, .faq-item { transition: none; }
}
/* FAQ now uses a stacked layout — a centered section header above a contained
accordion (max-w-4xl in the markup). The old left-column intro and the
desktop/mobile "Have another question?" CTAs were removed. */
/* Desktop only: keep the FAQ section compact and intentional — slightly less
vertical padding. Mobile/tablet keep their original py-12 spacing. */
@media (min-width: 1024px) {
.faq-section { padding-top: 3.5rem; padding-bottom: 3.5rem; }
}
/* =====================================================================
FIND US — Contact Details labels + Travel Times pills (readability polish)
Defined in CSS (not Tailwind arbitrary values) so the colours always apply.
===================================================================== */
/* Small LOCATION / PHONE / EMAIL labels — muted grey-green, readable yet
understated (was very pale #B0B0B0). */
.contact-label { color: #6E7A66; }
/* Travel-time pills — warm pale gold-cream with a faint muted-gold border so
the pill shape reads clearly (was near-white #F8F6F1); deep-green text. */
.travel-pill {
background-color: #EDE4CF;
border: 1px solid #D7C79E;
color: #2D5016;
}
.travel-pill:hover { background-color: #E4D8BB; border-color: #CDBA8C; }
/* Desktop nav links — gold underline wipes in on hover, stays on the active page */
.nav-link { position: relative; }
.nav-link::after {
content: ""; position: absolute; left: 0; right: 0; bottom: -7px; height: 1.5px;
background: var(--accent); transform: scaleX(0); transform-origin: left;
transition: transform 250ms var(--ui-ease);
}
.nav-link:hover::after, .nav-link:focus-visible::after { transform: scaleX(1); }
.nav-link[aria-current="page"] { color: var(--primary-color); }
.nav-link[aria-current="page"]::after { transform: scaleX(1); }
/* ===================================================================
IMAGE LIGHTBOX — click a carousel image to enlarge, then page
through that carousel's images (arrows / keys / swipe).
=================================================================== */
/* zoom affordance on any clickable lightbox image (carousel items or grouped images) */
[data-lightbox-src] { cursor: zoom-in; }
.pe-lightbox {
position: fixed; inset: 0; z-index: 1000;
display: none; align-items: center; justify-content: center;
padding: clamp(1rem, 4vw, 3rem);
background: rgba(16, 24, 14, .9);
-webkit-backdrop-filter: blur(4px); backdrop-filter: blur(4px);
opacity: 0; transition: opacity .25s ease;
}
.pe-lightbox.is-open { display: flex; opacity: 1; }
.pe-lightbox__figure {
margin: 0; display: flex; flex-direction: column; align-items: center; gap: .85rem;
max-width: 94vw; max-height: 88vh;
}
.pe-lightbox__img {
display: block; max-width: 94vw; max-height: 80vh; width: auto; height: auto;
object-fit: contain; border-radius: .75rem; background: #11180e;
box-shadow: 0 24px 70px -12px rgba(0, 0, 0, .65);
}
.pe-lightbox__counter {
position: absolute; top: 1.15rem; left: 50%; transform: translateX(-50%);
color: rgba(255, 255, 255, .72); font-size: .78rem; letter-spacing: .1em;
}
.pe-lightbox__close,
.pe-lightbox__nav {
position: absolute; display: flex; align-items: center; justify-content: center;
background: rgba(255, 255, 255, .12); color: #fff; border: 0; cursor: pointer;
border-radius: 9999px; z-index: 2;
transition: background .2s ease, transform .2s ease;
}
.pe-lightbox__close { top: 1rem; right: 1rem; width: 2.75rem; height: 2.75rem; font-size: 1.3rem; }
.pe-lightbox__nav { top: 50%; transform: translateY(-50%); width: 3rem; height: 3rem; font-size: 1.15rem; }
.pe-lightbox__nav--prev { left: 1.25rem; }
.pe-lightbox__nav--next { right: 1.25rem; }
.pe-lightbox__close:hover { background: rgba(255, 255, 255, .26); transform: scale(1.08); }
.pe-lightbox__nav:hover { background: rgba(255, 255, 255, .26); transform: translateY(-50%) scale(1.08); }
.pe-lightbox__close:focus-visible,
.pe-lightbox__nav:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
@media (max-width: 640px) {
.pe-lightbox__nav { width: 2.5rem; height: 2.5rem; }
.pe-lightbox__nav--prev { left: .5rem; }
.pe-lightbox__nav--next { right: .5rem; }
}
@media (prefers-reduced-motion: reduce) {
.pe-lightbox, .pe-lightbox__close, .pe-lightbox__nav { transition: none; }
}
/* ===================================================================
PILL CTA — outlined pill at rest; on hover the forest-green fill fades
in (background-color transition only — no slide/movement) with cream
text. Applied to the site's primary CTAs. Stays completely still on hover.
=================================================================== */
.btn-pill {
display: inline-flex;
align-items: center;
justify-content: center;
gap: 12px;
padding: 14px 28px;
border: 1px solid rgba(45, 80, 22, 0.30);
border-radius: 999px;
color: #2D5016;
background: transparent;
text-decoration: none;
font-weight: 600;
font-size: 0.875rem; /* was .85rem — a touch larger for clarity */
letter-spacing: 0.10em; /* was .12em — less airy, sturdier to read */
text-transform: uppercase;
cursor: pointer;
transition: background-color 0.25s ease, color 0.25s ease, border-color 0.25s ease, box-shadow 0.25s ease;
}
.btn-pill:hover,
.btn-pill:focus-visible {
background-color: #2D5016; /* forest-green fill fades in — no slide/movement */
color: #F5F1E8; /* cream reads strongly on the green */
border-color: #2D5016; /* deep forest green border */
outline: none;
}
/* compact variant for the header nav CTA */
.btn-pill--sm { padding: 10px 22px; font-size: 0.8125rem; }
/* Inline form success/error message (contact + viewing forms) */
.form-status { font-size: 0.875rem; font-weight: 500; line-height: 1.5; text-align: center; }
.form-status.is-success { color: #1f6d3f; }
.form-status.is-error { color: #b3261e; }
@media (prefers-reduced-motion: reduce) {
.btn-pill { transition: none; }
}
/* =====================================================================
PREMIUM BUTTON HOVER FX — stationary & refined. Layered on every CTA:
.btn-pill, .feature-btn, and inline buttons tagged .btn-sheen. Adds a
cream shimmer sweep, a soft glow + subtle gold inner-border glow, a
gentle arrow nudge (icon only — never moves the button or its text),
and an accessible gold focus-visible ring. The BUTTON itself never
moves: no transform is applied to it — only to the clipped shimmer and
the trailing icon.
===================================================================== */
.btn-pill, .feature-btn, .btn-sheen {
position: relative;
overflow: hidden; /* clips the shimmer to the button's rounded shape */
isolation: isolate;
}
/* Cream shimmer — a translucent diagonal band that sweeps across on
hover/focus. Only the band moves (inside the button); the button stays put. */
.btn-pill::after, .feature-btn::after, .btn-sheen::after {
content: "";
position: absolute;
top: 0; bottom: 0; left: 0;
width: 45%;
z-index: 1;
pointer-events: none;
background: linear-gradient(100deg, transparent 0%, rgba(245, 241, 232, 0.28) 50%, transparent 100%);
transform: translateX(-180%) skewX(-12deg);
opacity: 0;
transition: transform 0.7s var(--ui-ease), opacity 0.3s ease;
}
.btn-pill:hover::after, .feature-btn:hover::after, .btn-sheen:hover::after,
.btn-pill:focus-visible::after, .feature-btn:focus-visible::after, .btn-sheen:focus-visible::after {
transform: translateX(320%) skewX(-12deg);
opacity: 1;
}
/* Soft warm glow + subtle gold inner-border glow on hover */
.btn-pill:hover, .feature-btn:hover, .btn-sheen:hover {
box-shadow: 0 10px 26px -12px rgba(20, 28, 16, 0.55), inset 0 0 0 1px rgba(201, 169, 97, 0.20);
}
/* Outline buttons (e.g. Explore Facilities, Enquire Now) fill deep forest
green with cream text on hover — defined here (not via Tailwind arbitrary
classes, which the static build may not include). */
.btn-outline:hover, .btn-outline:focus-visible {
background-color: #2D5016;
color: #F5F1E8;
border-color: #2D5016;
}
/* Gentle arrow nudge — icon only; never pushes text or resizes the button */
.btn-pill i, .feature-btn i, .btn-sheen i {
transition: transform 0.35s var(--ui-ease), color 0.25s ease;
}
.btn-pill:hover i, .feature-btn:hover i, .btn-sheen:hover i,
.btn-pill:focus-visible i, .feature-btn:focus-visible i, .btn-sheen:focus-visible i {
transform: translateX(3px);
}
/* Accessible keyboard focus ring (muted gold) — wins over the hover glow */
.btn-pill:focus-visible, .feature-btn:focus-visible, .btn-sheen:focus-visible {
outline: none;
box-shadow: 0 0 0 3px rgba(201, 169, 97, 0.55), 0 10px 26px -12px rgba(20, 28, 16, 0.5);
}
@media (prefers-reduced-motion: reduce) {
.btn-pill::after, .feature-btn::after, .btn-sheen::after { transition: opacity 0.3s ease; }
.btn-pill i, .feature-btn i, .btn-sheen i { transition: color 0.25s ease; }
.btn-pill:hover i, .feature-btn:hover i, .btn-sheen:hover i,
.btn-pill:focus-visible i, .feature-btn:focus-visible i, .btn-sheen:focus-visible i { transform: none; }
}
/* =====================================================================
MOBILE / RESPONSIVE REFINEMENTS (≤1023px)
---------------------------------------------------------------------
Mobile-only polish layer. Everything is gated behind max-width:1023px
(with a ≤639px small-phone block) so the completed desktop design
(≥1024px) is never touched. Loaded last, so it wins over equal-specificity
utilities from tailwind.css without needing !important (except where the
original hero rule already used it).
===================================================================== */
@media (max-width: 1023px) {
/* ---- No sideways scroll ------------------------------------------- *
* Root already clips via `html.js { overflow-x: clip }`; mirror it on
* body and cap media so nothing can push past the viewport edge. `clip`
* (not `hidden`) never creates a scroll container, so the fixed header
* and vertical scrolling are unaffected. */
html, body { max-width: 100%; overflow-x: clip; }
img, video, svg, iframe { max-width: 100%; }
/* ---- HERO: shorter premium image -------------------------------- *
* 54vh dominated the first screen and pushed the headline down. Cap the
* image to a calm 330–370px band so users reach the headline sooner.
* (~350 / 361 / 370px at 390 / 412 / 430px.) *
* padding-top clears the FIXED header exactly (logo 44 + py-2 16 +
* 1px border = 61px) so the image sits flush beneath the white header
* with no cream gap, without being hidden behind it. */
.hero { padding-top: 60px; padding-bottom: 2.5rem; }
.hero-media {
height: clamp(340px, 50vw + 155px, 370px);
min-height: 0;
/* Soft premium seam — the image lifts gently off the cream content
area instead of meeting it on a hard line. Sits inside `.hero`
(no clipping) and only casts downward (positive y, negative spread). */
box-shadow: 0 14px 26px -18px rgba(20, 28, 16, 0.30);
}
/* Intentional mobile crop: the portrait photo (1086×1448) is cropped
top/bottom on the wider mobile box, so vertical object-position is the
lever. 36% gives comfortable sunset sky above the head while keeping
the horse fully visible and grounded on the sand — no awkward leg crop.
Overrides the inline object-position on the hydrated
. */
.hero-media img { object-position: center 36% !important; }
/* Keep the photo natural: drop the cinematic darkening to a whisper so
it is never heavily darkened, and remove the hard gold line at the
bottom edge so the image melts into the cream below. */
.hero-media__scrim {
background: linear-gradient(to top, rgba(18, 28, 16, 0.10) 0%, rgba(18, 28, 16, 0) 26%);
}
.hero-media::after { border-bottom-color: transparent; }
/* ---- HERO CONTENT: tight, intentional grouping ------------------- *
* Neat, controlled gap between the image and the eyebrow→headline→
* paragraph→buttons stack so the copy no longer sits too low. */
.hero-text { margin-top: 1.6rem; }
/* ---- HERO TYPE: bold, centred, three-line display --------------- *
* Bigger for real impact — ~50px on a 375px phone (was 40px), fluidly
* sized so the widest line ("Premium DIY") sits at ~90% of the content
* width across phones and caps at 52px on large phones / tablets. The
* three lines are locked via
(Premium DIY /
* & Full Livery / in Greyabbey), so a larger size can't spill onto a
* fourth line. Centred; serif display + green italic "Greyabbey" kept. */
.hero .t-hero {
font-size: clamp(2.375rem, 14.8vw - 0.37rem, 3.25rem) !important; /* ~38 → 50 → 52px */
line-height: 1.1;
letter-spacing: -0.015em;
text-align: center;
}
/* ---- HERO BUTTONS: stacked, full-width, equal height ------------- *
* Targets the home hero CTA row (`flex flex-col sm:flex-row`). Forcing
* the column + full width across the whole mobile range keeps the two
* CTAs consistent (incl. at 768px). min-height equalises the heights
* despite the secondary button's 2px border. */
.hero-text .flex.flex-col { flex-direction: column; gap: 0.7rem; width: 100%; }
.hero-text .flex.flex-col > a {
width: 100%;
min-height: 3.25rem;
border-radius: 0.65rem;
font-size: 0.8rem;
}
/* ---- HEADER: more compact, clear (not oversized) logo ------------ */
#global-header { --logo-h: 44px; }
/* ---- MOBILE MENU: overlays from any scroll position -------------- *
* The panel is `absolute top-full` inside the FIXED header, so it always
* drops from the top of the viewport regardless of scroll. Lift it above
* the header and let it scroll internally if it ever exceeds the screen. */
[data-landingsite-mobile-menu] {
z-index: 60;
max-height: calc(100vh - 60px);
max-height: calc(100dvh - 60px);
overflow-y: auto;
-webkit-overflow-scrolling: touch;
}
/* ---- SECTION RHYTHM --------------------------------------------- *
* Trim the oversized header gap above the viewing form on small screens. */
#contact .mb-16 { margin-bottom: 2.5rem; }
/* ---- HACKING-ROUTES FEATURE: premium mobile treatment ----------- *
* Previously the image butted straight onto the facility cards above and
* the text sat too far below it. Give the section intentional breathing
* room over a calm cream continuation, inset the image into a rounded
* "feature card" matching the facility-card corners, and tighten the gap
* to the copy so image + text + buttons read as one premium block. */
/* Tighter bottom padding (was Tailwind pb-10 / 2.5rem) so the single
primary button doesn't leave an empty gap below the section. */
.feature-band { padding-top: 2.75rem; padding-bottom: 1.5rem; }
/* Inset, rounded, softly-seated feature image (was full-bleed & square).
Tighten the immersive proportion to match the hero (was 54vh). */
.feature-media {
height: clamp(320px, 54vw + 110px, 400px); min-height: 0;
width: auto; margin: 0 1.25rem;
border-radius: 1.25rem; overflow: hidden;
box-shadow: 0 18px 34px -22px rgba(20, 28, 16, 0.40);
}
/* Connect the copy to the image: smaller, intentional gap (was 2.75rem).
Centre the label, heading and paragraph on mobile. The bullet