/*!
Rinavho Funeral Suppliers and Tombstones — main stylesheet
Author: Agent 2 (Design System, CSS & Interaction)
=========================================================================
REQUIRED ADDITIONS (add these exactly, in this order, before this
stylesheet's own tag so the fonts are ready when CSS references
them):
=========================================================================
*/
/* =========================================================================
1. DESIGN TOKENS
========================================================================= */
:root {
/* Brand colour tokens — deep forest green / warm cream / subtle gold.
Contrast checked (WCAG AA) — see handoff notes for the maths. */
--color-primary: #1B4332; /* deep forest green — headings, primary buttons, links */
--color-primary-dark: #123024; /* pressed/hover state for primary */
--color-primary-light: #2E5D45; /* lighter green for subtle fills/hovers on dark */
--color-bg: #FAF6EE; /* warm cream page background */
--color-bg-alt: #F2EBDC; /* slightly deeper cream for alternating sections */
--color-surface: #FFFFFF; /* card / surface background */
--color-gold: #C9A24B; /* decorative gold accent — borders, badges, dividers, icons ONLY. Do not use as body text colour (fails AA on cream). */
--color-gold-deep: #8A6B2E; /* AA-safe darker gold for the rare case gold is used as text (e.g. small eyebrow accents) */
--color-charcoal: #2B2B2B; /* body text — never pure black */
--color-charcoal-muted: #5B5B57; /* secondary/muted text, still passes AA on cream for larger text */
--color-border: #E4DCC8; /* hairline borders on cream/white */
--color-border-strong: #D8CBA9;
--color-error: #A6423B; /* muted brick red — on-brand, not clinical */
--color-error-bg: #F6E8E5;
--color-success: #2F6B4F;
--color-whatsapp: #1A7F4B; /* WhatsApp CTA ONLY — deepened from brand #25D366 so white button text clears AA contrast. Never used elsewhere. */
--color-whatsapp-dark: #145F39;
/* Typography */
--font-heading: 'Playfair Display', Georgia, 'Times New Roman', serif;
--font-body: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
--text-xs: 0.8125rem; /* 13px */
--text-sm: 0.9375rem; /* 15px */
--text-base: 1rem; /* 16px minimum body size */
--text-lg: 1.125rem; /* 18px */
--text-xl: 1.375rem; /* 22px */
--text-2xl: clamp(1.5rem, 1.3rem + 1vw, 2rem);
--text-3xl: clamp(1.875rem, 1.5rem + 1.6vw, 2.75rem);
--text-4xl: clamp(2.25rem, 1.7rem + 2.4vw, 3.5rem);
/* Spacing scale */
--space-1: 0.25rem;
--space-2: 0.5rem;
--space-3: 0.75rem;
--space-4: 1rem;
--space-5: 1.5rem;
--space-6: 2rem;
--space-7: 3rem;
--space-8: 4rem;
--space-9: 6rem;
/* Radii & shadows */
--radius-sm: 6px;
--radius-md: 12px;
--radius-lg: 20px;
--radius-full: 999px;
--shadow-sm: 0 1px 3px rgba(27, 67, 50, 0.08);
--shadow-md: 0 8px 24px rgba(27, 67, 50, 0.10);
--shadow-lg: 0 20px 48px rgba(27, 67, 50, 0.16);
--shadow-up: 0 -6px 20px rgba(27, 67, 50, 0.12);
/* Layout */
--container-max: 1200px;
--header-height: 72px;
--header-height-scrolled: 56px;
/* Motion */
--transition-fast: 150ms ease;
--transition-base: 250ms ease;
--transition-slow: 450ms ease;
--reveal-distance: 18px;
}
/* =========================================================================
2. RESET / NORMALIZE
========================================================================= */
*,
*::before,
*::after {
box-sizing: border-box;
}
html {
font-size: 100%; /* baseline: 1rem = 16px, never go below for body copy */
scroll-behavior: smooth;
-webkit-text-size-adjust: 100%;
}
@media (prefers-reduced-motion: reduce) {
html {
scroll-behavior: auto;
}
}
body,
h1, h2, h3, h4, h5, h6,
p, figure, blockquote, dl, dd {
margin: 0;
}
ul[class],
ol[class] {
margin: 0;
padding: 0;
list-style: none;
}
body {
min-height: 100vh;
font-family: var(--font-body);
font-size: var(--text-base);
line-height: 1.6;
color: var(--color-charcoal);
background-color: var(--color-bg);
text-rendering: optimizeLegibility;
-webkit-font-smoothing: antialiased;
}
img,
picture,
svg,
video {
display: block;
max-width: 100%;
height: auto;
}
/* Global rule: any photo inside a fixed-size/aspect-ratio frame must crop,
never stretch. Apply this class on the ![]()
itself; pair with an
aspect-ratio (and overflow:hidden) on its containing element. */
.img-cover {
width: 100%;
height: 100%;
object-fit: cover;
object-position: center;
display: block;
}
/* Used where the source image must never be cropped (e.g. logo/badge
artwork with text baked in right to the edge) — letterboxes on a
brand-cream fill instead of cropping to cover the frame. */
.img-contain {
width: 100%;
height: 100%;
object-fit: contain;
object-position: center;
display: block;
background-color: var(--color-bg-alt);
}
input,
button,
textarea,
select {
font: inherit;
color: inherit;
}
button {
cursor: pointer;
background: none;
border: none;
}
a {
color: var(--color-primary);
text-decoration-thickness: 1.5px;
text-underline-offset: 3px;
}
a:not([class]) {
color: var(--color-primary);
}
table {
border-collapse: collapse;
border-spacing: 0;
width: 100%;
}
h1, h2, h3, h4 {
font-family: var(--font-heading);
font-weight: 600;
line-height: 1.2;
color: var(--color-primary);
}
h1 { font-size: var(--text-4xl); }
h2 { font-size: var(--text-3xl); }
h3 { font-size: var(--text-2xl); }
h4 { font-size: var(--text-xl); }
p {
max-width: 65ch;
}
/* =========================================================================
3. ACCESSIBILITY UTILITIES
========================================================================= */
.sr-only,
.visually-hidden {
position: absolute;
width: 1px;
height: 1px;
padding: 0;
margin: -1px;
overflow: hidden;
clip: rect(0, 0, 0, 0);
white-space: nowrap;
border: 0;
}
/* Netlify honeypot field — apply this class to the wrapping /
that
holds the bot-field input so it is hidden from sighted users but still
present in the DOM (do not use display:none on the honeypot itself if
Agent 1 wired it per Netlify docs; this class is safe either way). */
.hp-field {
position: absolute;
left: -9999px;
top: -9999px;
width: 1px;
height: 1px;
overflow: hidden;
}
.skip-link {
position: absolute;
top: -100px;
left: var(--space-4);
z-index: 1000;
background-color: var(--color-primary);
color: var(--color-surface);
padding: var(--space-3) var(--space-5);
border-radius: var(--radius-sm);
font-weight: 600;
text-decoration: none;
transition: top var(--transition-base);
}
.skip-link:focus {
top: var(--space-4);
}
/* Global focus-visible ring — on-brand, always visible, never removed */
:focus {
outline: none;
}
:focus-visible {
outline: 3px solid var(--color-primary);
outline-offset: 3px;
border-radius: 4px;
}
.btn:focus-visible,
.mobile-nav-toggle:focus-visible,
.accordion-trigger:focus-visible {
outline: 3px solid var(--color-gold);
outline-offset: 3px;
}
/* =========================================================================
4. LAYOUT PRIMITIVES
========================================================================= */
.container {
width: 100%;
max-width: var(--container-max);
margin-inline: auto;
padding-inline: var(--space-5);
}
@media (min-width: 768px) {
.container {
padding-inline: var(--space-7);
}
}
.section {
padding-block: var(--space-8);
}
@media (min-width: 768px) {
.section {
padding-block: var(--space-9);
}
}
.section--alt {
background-color: var(--color-bg-alt);
}
.section-header {
max-width: 640px;
margin-bottom: var(--space-6);
}
.section-header--center {
margin-inline: auto;
text-align: center;
}
.eyebrow {
display: inline-flex;
align-items: center;
gap: var(--space-2);
font-family: var(--font-body);
font-size: var(--text-xs);
font-weight: 700;
letter-spacing: 0.12em;
text-transform: uppercase;
color: var(--color-primary);
margin-bottom: var(--space-3);
}
.eyebrow::before {
content: '';
display: inline-block;
width: 28px;
height: 2px;
background-color: var(--color-gold);
}
.eyebrow--on-dark {
color: var(--color-gold);
}
/* Gentle scroll reveal (progressively enhanced by JS) */
.reveal {
opacity: 0;
transform: translateY(var(--reveal-distance));
transition: opacity var(--transition-slow), transform var(--transition-slow);
}
.reveal.is-visible {
opacity: 1;
transform: translateY(0);
}
@media (prefers-reduced-motion: reduce) {
.reveal {
opacity: 1;
transform: none;
transition: none;
}
}
/* =========================================================================
5. BUTTONS
========================================================================= */
.btn {
display: inline-flex;
align-items: center;
justify-content: center;
gap: var(--space-2);
padding: 0.85rem 1.75rem;
font-family: var(--font-body);
font-size: var(--text-base);
font-weight: 600;
line-height: 1.2;
border-radius: var(--radius-full);
border: 2px solid transparent;
text-decoration: none;
cursor: pointer;
transition: background-color var(--transition-base), color var(--transition-base),
border-color var(--transition-base), transform var(--transition-base), box-shadow var(--transition-base);
white-space: nowrap;
}
.btn:active {
transform: translateY(1px);
}
.btn-primary {
background-color: var(--color-primary);
color: var(--color-surface);
border-color: var(--color-primary);
}
.btn-primary:hover {
background-color: var(--color-primary-dark);
border-color: var(--color-primary-dark);
color: var(--color-surface);
}
.btn-secondary {
background-color: transparent;
color: var(--color-primary);
border-color: var(--color-primary);
}
.btn-secondary:hover {
background-color: var(--color-primary);
color: var(--color-surface);
}
.btn-whatsapp {
background-color: var(--color-whatsapp);
color: var(--color-surface);
border-color: var(--color-whatsapp);
}
.btn-whatsapp:hover {
background-color: var(--color-whatsapp-dark);
border-color: var(--color-whatsapp-dark);
}
.btn-whatsapp .icon,
.btn-whatsapp svg {
width: 1.15em;
height: 1.15em;
flex-shrink: 0;
fill: currentColor;
}
.btn-call {
background-color: var(--color-surface);
color: var(--color-primary);
border-color: var(--color-border-strong);
}
.btn-call:hover {
border-color: var(--color-primary);
}
.btn-block {
width: 100%;
}
.btn-sm {
padding: 0.6rem 1.25rem;
font-size: var(--text-sm);
}
.btn[disabled],
.btn:disabled {
opacity: 0.55;
cursor: not-allowed;
transform: none;
}
/* =========================================================================
6. SITE HEADER / NAV
========================================================================= */
/* Transparent-at-top, frosted-once-scrolled sticky header. Starts flush
with the page background (blends with the hero) at 72px tall; past a
small scroll threshold JS adds .is-scrolled, which compresses it to
56px and brings in a translucent blurred bar with a gold hairline.
Scroll compression is intentionally frozen (see js/main.js) while the
mobile menu is open, so .nav's fixed top offset never has to chase a
moving header height. */
.site-header {
position: sticky;
top: 0;
z-index: 200;
height: var(--header-height);
background-color: transparent;
border-bottom: 1px solid transparent;
transition: height 250ms ease, background-color 250ms ease, border-color 250ms ease;
}
.site-header.is-scrolled {
height: var(--header-height-scrolled);
background-color: rgba(250, 246, 239, 0.92);
border-bottom-color: rgba(201, 162, 39, 0.35);
}
@supports (backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px)) {
.site-header.is-scrolled {
-webkit-backdrop-filter: blur(8px);
backdrop-filter: blur(8px);
}
}
@media (prefers-reduced-motion: reduce) {
.site-header {
transition: none;
}
}
.site-header .container {
display: flex;
align-items: center;
justify-content: space-between;
height: 100%;
gap: var(--space-4);
}
/* Wordmark — "Rinavho" only, never wraps. Full business name lives in the
footer and
only. */
.site-logo {
display: inline-flex;
align-items: center;
gap: var(--space-2);
font-family: var(--font-heading);
font-weight: 600;
font-size: var(--text-lg);
color: var(--color-primary);
text-decoration: none;
white-space: nowrap;
flex-shrink: 0;
}
.logo-dot {
color: var(--color-gold);
margin-left: 2px;
font-weight: 700;
}
/* Circular medallion badge — crops the square logo photo (black background,
bright-green ring text + silhouette mark) into a wax-seal-style medallion.
The thin gold ring keeps the black disc from reading as a stray dark
blob against the cream header/footer. Sits alongside the text wordmark,
never replaces it. */
.site-logo-badge {
display: inline-flex;
width: 38px;
height: 38px;
border-radius: 50%;
overflow: hidden;
flex-shrink: 0;
border: 1.5px solid var(--color-gold);
transition: width 250ms ease, height 250ms ease;
}
.site-logo-badge img {
width: 100%;
height: 100%;
object-fit: cover;
display: block;
}
.site-header.is-scrolled .site-logo-badge {
width: 30px;
height: 30px;
}
@media (prefers-reduced-motion: reduce) {
.site-logo-badge {
transition: none;
}
}
/* Single "Contact us" CTA — desktop instance lives outside .nav (hidden
below 900px); an identical mobile instance lives inside the off-canvas
menu (hidden at/above 900px). Two instances, not one relocated via JS,
since they sit in different visual positions per breakpoint. */
.btn-contact {
background-color: var(--color-primary);
border-color: var(--color-primary);
color: var(--color-bg);
display: inline-flex;
align-items: center;
gap: 0.35em;
transition: background-color var(--transition-fast), transform var(--transition-fast), box-shadow var(--transition-fast);
}
.btn-contact:hover {
background-color: #142E20;
color: var(--color-bg);
box-shadow: var(--shadow-md);
}
.btn-contact .btn-chevron {
color: var(--color-gold);
font-size: 1.15em;
line-height: 1;
}
.btn-contact[aria-current="page"] {
background-color: #142E20;
border-color: #142E20;
}
.header-cta-desktop {
display: none;
flex-shrink: 0;
}
.mobile-nav-toggle {
display: inline-flex;
position: relative;
width: 44px;
height: 44px;
padding: 0;
border-radius: var(--radius-sm);
background: transparent;
z-index: 210;
flex-shrink: 0;
}
/* Two-bar hamburger: both bars are real, independently-positioned
siblings (not a pseudo-element nested inside the other — that made the
bar itself its own child's containing block and broke percentage/
transform-origin math). Closed state offsets them apart via `top`; the
open state moves both to the SAME `top` (so their centers land on the
exact same pixel) while rotating each ±45deg around its own center —
since there's no offset left to compensate for, they always converge
into a symmetric X. */
.hamburger-bar {
position: absolute;
left: 50%;
top: 21px;
width: 22px;
height: 2px;
margin-left: -11px;
background-color: var(--color-charcoal);
border-radius: 2px;
transition: top 250ms ease, transform 250ms ease, background-color 250ms ease;
}
.hamburger-bar-1 {
top: 18px;
}
.hamburger-bar-2 {
top: 24px;
}
.mobile-nav-toggle[aria-expanded="true"] .hamburger-bar {
top: 21px;
}
.mobile-nav-toggle[aria-expanded="true"] .hamburger-bar-1 {
transform: rotate(45deg);
}
.mobile-nav-toggle[aria-expanded="true"] .hamburger-bar-2 {
transform: rotate(-45deg);
}
/* Mobile off-canvas menu: full-screen cream overlay, large serif links. */
.nav {
position: fixed;
top: var(--header-height);
right: 0;
bottom: 0;
left: 0;
display: flex;
flex-direction: column;
background-color: var(--color-bg);
padding: var(--space-6) var(--space-5);
padding-bottom: calc(var(--space-6) + env(safe-area-inset-bottom));
transform: translateX(100%);
transition: transform var(--transition-base);
overflow-y: auto;
-webkit-overflow-scrolling: touch;
}
.nav.is-open {
transform: translateX(0);
}
.nav-list {
display: flex;
flex-direction: column;
gap: var(--space-1);
}
.nav-list a {
display: block;
padding: var(--space-4) 0;
font-family: var(--font-heading);
font-weight: 600;
font-size: var(--text-2xl);
color: var(--color-charcoal);
text-decoration: none;
border-bottom: 1px solid var(--color-border);
transition: color var(--transition-fast);
}
.nav-list a:hover,
.nav-list a[aria-current="page"] {
color: var(--color-primary);
}
.nav-mobile-cta {
display: flex;
flex-direction: column;
gap: var(--space-3);
margin-top: var(--space-6);
}
@media (prefers-reduced-motion: reduce) {
.nav,
.hamburger-bar {
transition: none;
}
}
@media (min-width: 900px) {
.mobile-nav-toggle {
display: none;
}
.nav-mobile-cta {
display: none;
}
.nav {
position: static;
inset: auto;
display: block;
transform: none;
background: transparent;
padding: 0;
overflow: visible;
}
/* Clean text links on the bar — no pill/background container. */
.nav-list {
flex-direction: row;
align-items: center;
gap: clamp(20px, 3vw, 36px);
}
.nav-list a {
padding: 0;
border-bottom: none;
position: relative;
font-family: var(--font-body);
font-weight: 500;
font-size: 15px;
letter-spacing: 0.01em;
color: var(--color-charcoal);
}
.nav-list a:hover {
color: var(--color-primary);
}
.nav-list a[aria-current="page"] {
color: var(--color-primary);
}
.nav-list a[aria-current="page"]::after {
content: '';
position: absolute;
left: 0;
right: 0;
bottom: -6px;
height: 2px;
background-color: var(--color-gold);
}
.header-cta-desktop {
display: inline-flex;
}
}
/* =========================================================================
7. HERO (home page) & PAGE HEADER (inner pages)
========================================================================= */
.hero {
padding-bottom: var(--space-8);
}
.hero-visual {
margin-bottom: var(--space-6);
}
.hero-media {
overflow: hidden;
aspect-ratio: 16 / 10;
max-height: 60vh;
}
.hero-content {
padding-top: var(--space-6);
}
.hero-heading {
margin-bottom: var(--space-4);
}
.hero .accent,
.page-header .accent {
color: var(--color-primary);
font-style: italic;
}
.hero-tagline {
font-family: var(--font-body);
font-size: var(--text-sm);
font-weight: 700;
letter-spacing: 0.1em;
text-transform: uppercase;
color: var(--color-gold-deep);
margin-bottom: var(--space-4);
}
.hero-lede {
font-size: var(--text-lg);
color: var(--color-charcoal-muted);
margin-bottom: var(--space-6);
max-width: 52ch;
}
.hero-actions {
display: flex;
flex-wrap: wrap;
gap: var(--space-3);
}
@media (min-width: 768px) {
.hero {
display: grid;
grid-template-columns: 1.1fr 1fr;
align-items: center;
gap: var(--space-8);
max-width: var(--container-max);
margin-inline: auto;
padding-inline: var(--space-7);
padding-top: var(--space-7);
}
.hero-visual {
order: 2;
margin-bottom: 0;
}
.hero-media {
border-radius: var(--radius-lg);
box-shadow: var(--shadow-lg);
aspect-ratio: 4 / 3;
max-height: none;
}
.hero-content {
order: 1;
padding-top: 0;
padding-inline: 0;
max-width: none;
margin-inline: 0;
}
}
/* Simple centred/left header band used at the top of every inner page */
.page-header {
padding-block: var(--space-7) var(--space-6);
}
.section-intro {
color: var(--color-charcoal-muted);
font-size: var(--text-lg);
max-width: 65ch;
margin-top: var(--space-3);
}
.section-cta {
display: flex;
flex-wrap: wrap;
gap: var(--space-3);
margin-top: var(--space-6);
}
/* Hero slideshow — crossfades between the hero image and the two
supplied location photos; arrows/dots are added by JS-driven markup
in the HTML, so all interactive elements degrade to "just show the
first slide" if JS fails to init. */
.hero-slideshow {
position: relative;
}
.hero-slide {
position: absolute;
inset: 0;
width: 100%;
height: 100%;
opacity: 0;
z-index: 1;
transition: opacity 1.1s ease;
pointer-events: none;
}
/* .is-active switches to position:relative (see comment above) so the
slide still renders if aspect-ratio isn't supported and .hero-media has
no definite height to lean on. Explicit width/height:100% here is what
makes that slide actually fill the (aspect-ratio-derived) box in modern
browsers instead of shrinking to the image's own intrinsic ratio —
without it, a non-16:9 image (e.g. a square logo) overflows the frame
and gets clipped by .hero-media's overflow:hidden. */
.hero-slide picture {
display: block;
width: 100%;
height: 100%;
}
.hero-slide.is-active {
position: relative;
opacity: 1;
z-index: 2;
pointer-events: auto;
}
/* Single-word caption per slide, shown BELOW the photo (not overlaid on
it) so it never competes with the image for legibility. */
.hero-slide-labels {
position: relative;
height: 1.75rem;
margin-top: var(--space-4);
text-align: center;
}
.hero-slide-label {
position: absolute;
inset: 0;
display: flex;
align-items: center;
justify-content: center;
font-family: var(--font-body);
font-size: var(--text-sm);
font-weight: 700;
letter-spacing: 0.16em;
text-transform: uppercase;
color: var(--color-gold-deep);
opacity: 0;
transition: opacity 0.5s ease;
}
.hero-slide-label.is-active {
opacity: 1;
}
.hero-slide-arrow {
position: absolute;
top: 50%;
transform: translateY(-50%);
z-index: 3;
display: flex;
align-items: center;
justify-content: center;
width: 40px;
height: 40px;
border: none;
border-radius: 50%;
background-color: rgba(28, 26, 23, 0.45);
color: #fff;
cursor: pointer;
transition: background-color 0.2s ease;
}
.hero-slide-arrow:hover,
.hero-slide-arrow:focus-visible {
background-color: rgba(28, 26, 23, 0.7);
}
.hero-slide-arrow-prev {
left: var(--space-3);
}
.hero-slide-arrow-next {
right: var(--space-3);
}
.hero-slide-dots {
position: absolute;
left: 50%;
bottom: var(--space-3);
transform: translateX(-50%);
z-index: 3;
display: flex;
gap: 8px;
}
.hero-slide-dot {
width: 8px;
height: 8px;
padding: 0;
border: none;
border-radius: 50%;
background-color: rgba(255, 255, 255, 0.55);
cursor: pointer;
transition: background-color 0.2s ease, transform 0.2s ease;
}
.hero-slide-dot.is-active {
background-color: #fff;
transform: scale(1.2);
}
/* =========================================================================
8. CARDS / SERVICES
========================================================================= */
.card {
background-color: var(--color-surface);
border: 1px solid var(--color-border);
border-radius: var(--radius-md);
padding: var(--space-5);
box-shadow: var(--shadow-sm);
transition: box-shadow var(--transition-base);
}
.card:hover {
box-shadow: var(--shadow-md);
}
.card__icon {
display: inline-flex;
align-items: center;
justify-content: center;
width: 52px;
height: 52px;
border-radius: var(--radius-full);
background-color: var(--color-bg-alt);
color: var(--color-primary);
margin-bottom: var(--space-4);
}
.card__icon svg {
width: 26px;
height: 26px;
fill: currentColor;
}
.card h2,
.card h3 {
font-size: var(--text-xl);
margin-bottom: var(--space-2);
}
.card p {
color: var(--color-charcoal-muted);
font-size: var(--text-base);
}
.services-grid,
.services-teaser-grid,
.packages-teaser-grid,
.values-grid,
.card-grid {
display: grid;
grid-template-columns: 1fr;
gap: var(--space-5);
margin-top: var(--space-6);
}
@media (min-width: 768px) {
.services-grid,
.values-grid,
.card-grid {
grid-template-columns: repeat(2, 1fr);
}
.services-teaser-grid {
grid-template-columns: repeat(3, 1fr);
}
.packages-teaser-grid {
grid-template-columns: repeat(2, 1fr);
max-width: 720px;
}
}
@media (min-width: 1280px) {
.services-grid,
.values-grid,
.card-grid {
grid-template-columns: repeat(3, 1fr);
}
}
/* =========================================================================
9. PACKAGE / PRICING CARDS
========================================================================= */
/* Forward-compatible hook: neither service-card nor package-card currently
contains an <img>, but if one is added it must crop, not stretch. Pair
with class="img-cover" on the <img> itself. */
.service-card img,
.package-card img {
aspect-ratio: 16 / 10;
border-radius: var(--radius-sm);
margin-bottom: var(--space-4);
}
.package-cards-grid {
display: grid;
grid-template-columns: 1fr;
gap: var(--space-6);
align-items: stretch;
}
@media (min-width: 768px) {
.package-cards-grid {
grid-template-columns: repeat(2, 1fr);
}
}
@media (min-width: 1280px) {
.package-cards-grid {
grid-template-columns: repeat(3, 1fr);
}
}
.package-card,
.package-card-mini {
position: relative;
display: flex;
flex-direction: column;
}
.package-card {
padding: var(--space-6) var(--space-5);
border-radius: var(--radius-lg);
}
.package-card-mini {
padding-top: var(--space-6);
}
.package-card h2,
.package-card h3,
.package-card-mini h3 {
font-size: var(--text-xl);
margin-bottom: var(--space-2);
}
.package-note {
color: var(--color-charcoal-muted);
font-size: var(--text-base);
font-style: italic;
margin-bottom: var(--space-4);
}
.price {
display: flex;
align-items: baseline;
gap: var(--space-1);
margin-bottom: var(--space-5);
font-family: var(--font-heading);
font-size: var(--text-2xl);
font-weight: 700;
color: var(--color-primary);
font-variant-numeric: lining-nums;
font-feature-settings: "lnum" 1;
}
.price span {
font-size: var(--text-sm);
font-family: var(--font-body);
font-weight: 400;
color: var(--color-charcoal-muted);
}
.package-features {
margin: 0 0 var(--space-6);
padding: 0;
list-style: none;
flex-grow: 1;
}
.package-features li {
position: relative;
padding-left: 1.75rem;
margin-bottom: var(--space-3);
font-size: var(--text-base);
line-height: 1.5;
}
.package-features li::before {
content: '';
position: absolute;
left: 0;
top: 0.15em;
width: 20px;
height: 20px;
border-radius: var(--radius-full);
background-color: var(--color-bg-alt);
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='%231B4332' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3 8.5l3 3 7-7'/%3E%3C/svg%3E");
background-repeat: no-repeat;
background-position: center;
background-size: 11px;
}
.package-card .btn,
.package-card-mini .btn {
margin-top: auto;
}
/* Featured / "Most Comprehensive" card */
.package-card.featured {
border-color: var(--color-gold);
box-shadow: var(--shadow-lg);
background-color: var(--color-surface);
}
@media (min-width: 768px) {
.package-card.featured {
transform: translateY(-10px);
}
}
.package-card.featured .package-features li::before,
.package-card-mini.featured .package-features li::before {
background-color: rgba(201, 162, 75, 0.16);
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='%238A6B2E' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3 8.5l3 3 7-7'/%3E%3C/svg%3E");
}
.badge {
position: absolute;
top: -14px;
left: 50%;
transform: translateX(-50%);
display: inline-flex;
align-items: center;
gap: var(--space-1);
background-color: var(--color-gold);
color: var(--color-charcoal);
font-size: var(--text-xs);
font-weight: 700;
letter-spacing: 0.04em;
text-transform: uppercase;
padding: 0.4rem 0.9rem;
border-radius: var(--radius-full);
box-shadow: var(--shadow-sm);
white-space: nowrap;
}
/* Pending-confirmation state — visually distinct from the gold "featured"
badge so a visitor can immediately tell these plans aren't finalised yet,
without it reading as an alarming/broken error state. */
.badge--pending {
background-color: var(--color-surface);
color: var(--color-gold-deep);
border: 1.5px solid var(--color-gold);
}
.package-card.is-pending {
border-style: dashed;
border-color: var(--color-border-strong);
}
.conflict-notice {
grid-column: 1 / -1;
background-color: var(--color-bg-alt);
border-left: 3px solid var(--color-gold);
border-radius: var(--radius-sm);
padding: var(--space-4) var(--space-5);
margin-bottom: var(--space-2);
}
.conflict-notice p {
margin: 0;
font-size: var(--text-sm);
color: var(--color-charcoal-muted);
max-width: 68ch;
}
.conflict-notice strong {
color: var(--color-charcoal);
}
.table-note {
font-size: var(--text-sm);
color: var(--color-charcoal-muted);
margin-top: var(--space-2);
margin-bottom: var(--space-4);
}
/* =========================================================================
10. COMPARE TABLE
========================================================================= */
.table-scroll {
overflow-x: auto;
-webkit-overflow-scrolling: touch;
border: 1px solid var(--color-border);
border-radius: var(--radius-md);
background-color: var(--color-surface);
}
.compare-table {
min-width: 640px;
font-size: var(--text-base);
}
.compare-table caption {
text-align: left;
font-weight: 600;
padding: var(--space-4);
color: var(--color-primary);
}
.compare-table th,
.compare-table td {
padding: var(--space-3) var(--space-4);
text-align: left;
border-bottom: 1px solid var(--color-border);
vertical-align: top;
}
.compare-table thead th {
font-family: var(--font-heading);
color: var(--color-primary);
background-color: var(--color-bg-alt);
position: sticky;
top: 0;
}
.compare-table tbody th {
font-weight: 600;
color: var(--color-charcoal);
white-space: nowrap;
}
.compare-table tbody tr:last-child td,
.compare-table tbody tr:last-child th {
border-bottom: none;
}
.compare-table td[data-included="true"]::before {
content: '\2713';
color: var(--color-primary);
font-weight: 700;
margin-right: 0.4em;
}
.compare-table td[data-included="false"]::before {
content: '\2013';
color: var(--color-charcoal-muted);
margin-right: 0.4em;
}
/* =========================================================================
11. ACCORDION
========================================================================= */
.accordion {
border-top: 1px solid var(--color-border);
}
.accordion-item {
border-bottom: 1px solid var(--color-border);
}
.accordion-trigger {
position: relative;
display: flex;
align-items: center;
width: 100%;
padding: var(--space-5) var(--space-7) var(--space-5) var(--space-2);
text-align: left;
font-family: var(--font-heading);
font-size: var(--text-lg);
font-weight: 600;
color: var(--color-primary);
background: transparent;
}
/* Self-contained plus/minus indicator — no icon element needed in markup */
.accordion-trigger::before,
.accordion-trigger::after {
content: '';
position: absolute;
right: calc(var(--space-2) + 6px);
top: 50%;
background-color: var(--color-gold);
transition: transform var(--transition-base);
}
.accordion-trigger::before {
right: var(--space-2);
width: 14px;
height: 2px;
transform: translate(-6px, -50%);
}
.accordion-trigger::after {
width: 2px;
height: 14px;
transform: translateY(-50%);
}
.accordion-trigger[aria-expanded="true"]::after {
transform: translateY(-50%) scaleY(0);
}
.accordion-panel {
display: grid;
grid-template-rows: 0fr;
opacity: 0;
transition: grid-template-rows var(--transition-base), opacity var(--transition-base);
}
.accordion-panel > * {
overflow: hidden;
padding: 0 var(--space-2) var(--space-5);
margin: 0;
color: var(--color-charcoal-muted);
font-size: var(--text-base);
max-width: 68ch;
}
.accordion-panel.is-open {
grid-template-rows: 1fr;
opacity: 1;
}
@media (prefers-reduced-motion: reduce) {
.accordion-panel {
transition: none;
}
.accordion-trigger::before,
.accordion-trigger::after {
transition: none;
}
}
/* Fallback for browsers without grid-template-rows animation support keeps
content usable: when JS hasn't run yet panels are simply collapsed via
[hidden] attribute, which this rule respects. */
.accordion-panel[hidden] {
display: none;
}
/* =========================================================================
12. (reserved)
========================================================================= */
/* =========================================================================
13. FORMS
========================================================================= */
.form-field {
margin-bottom: var(--space-5);
}
.form-section-grid {
display: grid;
grid-template-columns: 1fr;
gap: var(--space-6);
}
@media (min-width: 1280px) {
.form-section-grid {
grid-template-columns: 2fr 1fr;
align-items: start;
}
}
.form-sidebar {
background-color: var(--color-bg-alt);
border-radius: var(--radius-md);
padding: var(--space-6) var(--space-5);
}
.form-sidebar h2 {
font-size: var(--text-xl);
margin-bottom: var(--space-2);
}
.form-sidebar p {
color: var(--color-charcoal-muted);
font-size: var(--text-sm);
}
.form-sidebar-actions {
display: flex;
flex-direction: column;
gap: var(--space-3);
margin-top: var(--space-4);
}
label {
display: block;
font-weight: 600;
font-size: var(--text-base);
color: var(--color-charcoal);
margin-bottom: var(--space-2);
}
label .optional {
font-weight: 400;
color: var(--color-charcoal-muted);
text-transform: none;
}
.required-indicator {
color: var(--color-error);
margin-left: 2px;
}
input,
select,
textarea {
width: 100%;
padding: 0.8rem 1rem;
font-size: var(--text-base);
color: var(--color-charcoal);
background-color: var(--color-surface);
border: 1.5px solid var(--color-border-strong);
border-radius: var(--radius-sm);
transition: border-color var(--transition-fast), box-shadow var(--transition-fast);
}
textarea {
min-height: 140px;
resize: vertical;
}
input::placeholder,
textarea::placeholder {
color: var(--color-charcoal-muted);
}
input:hover,
select:hover,
textarea:hover {
border-color: var(--color-primary-light);
}
input:focus,
select:focus,
textarea:focus {
outline: none;
border-color: var(--color-primary);
box-shadow: 0 0 0 3px rgba(27, 67, 50, 0.15);
}
input:focus-visible,
select:focus-visible,
textarea:focus-visible {
outline: 3px solid var(--color-primary);
outline-offset: 2px;
}
input.is-invalid,
select.is-invalid,
textarea.is-invalid,
input[aria-invalid="true"],
select[aria-invalid="true"],
textarea[aria-invalid="true"] {
border-color: var(--color-error);
background-color: var(--color-error-bg);
}
input.is-valid,
select.is-valid,
textarea.is-valid {
border-color: var(--color-success);
}
.form-field-checkbox {
display: flex;
align-items: flex-start;
gap: var(--space-3);
flex-wrap: wrap;
}
.form-field-checkbox input[type="checkbox"] {
width: 20px;
height: 20px;
min-width: 20px;
margin-top: 2px;
accent-color: var(--color-primary);
}
.form-field-checkbox label {
margin-bottom: 0;
font-weight: 400;
font-size: var(--text-base);
color: var(--color-charcoal-muted);
flex: 1;
}
.privacy-notice {
font-size: var(--text-base);
color: var(--color-charcoal-muted);
background-color: var(--color-bg-alt);
border-left: 3px solid var(--color-gold);
padding: var(--space-4);
border-radius: var(--radius-sm);
margin-bottom: var(--space-5);
}
.privacy-notice-heading {
font-family: var(--font-body);
font-size: var(--text-sm);
font-weight: 700;
text-transform: uppercase;
letter-spacing: 0.06em;
color: var(--color-charcoal);
margin-bottom: var(--space-2);
}
.field-error {
display: none;
align-items: flex-start;
gap: 0.4em;
margin-top: var(--space-2);
font-size: var(--text-base);
font-weight: 600;
color: var(--color-error);
}
.field-error:not(:empty) {
display: flex;
}
.field-error::before {
content: '\26A0';
flex-shrink: 0;
line-height: 1.4;
}
.form-status {
margin-bottom: var(--space-5);
padding: var(--space-4);
border-radius: var(--radius-sm);
font-weight: 600;
display: none;
}
.form-status.is-visible {
display: block;
}
.form-status--error {
background-color: var(--color-error-bg);
color: var(--color-error);
}
.form-status--success {
background-color: #E7F0EA;
color: var(--color-success);
}
/* =========================================================================
14. FOOTER
========================================================================= */
.site-footer {
background-color: var(--color-primary);
color: #EFE8D8;
padding-block: var(--space-8) var(--space-6);
}
.site-footer a {
color: #EFE8D8;
}
.site-footer h2,
.site-footer h3,
.site-footer h4 {
color: var(--color-surface);
}
.footer-grid {
display: grid;
grid-template-columns: 1fr;
gap: var(--space-6);
margin-bottom: var(--space-7);
}
@media (min-width: 768px) {
.footer-grid {
grid-template-columns: 1.4fr 1fr 1fr;
gap: var(--space-7);
}
}
.footer-heading {
font-family: var(--font-body);
font-size: var(--text-base);
font-weight: 700;
text-transform: uppercase;
letter-spacing: 0.08em;
margin-bottom: var(--space-4);
}
.footer-col ul {
display: flex;
flex-direction: column;
gap: var(--space-2);
}
.footer-col a {
text-decoration: none;
opacity: 0.9;
}
/* tel:/wa.me:/mailto: links specifically need a real ≥44px tap target —
the plain inline text these render as by default is only ~20px tall. */
.footer-contact-list a {
display: inline-flex;
align-items: center;
min-height: 44px;
}
.footer-col a:hover {
opacity: 1;
text-decoration: underline;
text-decoration-color: var(--color-gold);
}
.footer-brand-mark {
display: flex;
align-items: center;
gap: var(--space-3);
}
.footer-brand-mark .site-logo-badge {
width: 34px;
height: 34px;
}
.footer-logo {
font-family: var(--font-heading);
font-size: var(--text-xl);
color: var(--color-surface);
margin-bottom: var(--space-3);
}
.footer-tagline {
color: var(--color-gold);
font-size: var(--text-sm);
letter-spacing: 0.06em;
text-transform: uppercase;
margin-bottom: var(--space-4);
}
.footer-brand p {
opacity: 0.9;
font-size: var(--text-sm);
}
.social-links {
display: flex;
gap: var(--space-3);
margin-top: var(--space-4);
}
.social-links a {
display: inline-flex;
align-items: center;
justify-content: center;
width: 40px;
height: 40px;
border-radius: var(--radius-full);
border: 1.5px solid rgba(239, 232, 216, 0.35);
transition: border-color var(--transition-fast), background-color var(--transition-fast);
}
.social-links a:hover {
border-color: var(--color-gold);
background-color: rgba(201, 162, 75, 0.12);
}
.social-links svg {
width: 18px;
height: 18px;
fill: currentColor;
}
.footer-bottom {
border-top: 1px solid rgba(239, 232, 216, 0.2);
padding-top: var(--space-5);
font-size: var(--text-xs);
opacity: 0.8;
}
.footer-bottom-inner {
display: flex;
flex-wrap: wrap;
gap: var(--space-3);
justify-content: space-between;
}
.footer-credit {
display: inline-flex;
align-items: center;
gap: var(--space-2);
white-space: nowrap;
}
.credit-logo {
display: inline-block;
height: 1.1em;
width: auto;
vertical-align: middle;
border-radius: 3px;
}
/* =========================================================================
17. CREDIT BAR — "Website by CousinFlow Digital"
========================================================================= */
.credit-bar {
max-width: none;
display: flex;
align-items: center;
justify-content: center;
gap: var(--space-2);
margin: 0;
padding: 0.4rem var(--space-4);
background-color: var(--color-primary);
color: var(--color-bg);
text-align: center;
font-size: var(--text-xs);
letter-spacing: 0.02em;
}
.branches-note {
font-size: var(--text-sm);
color: var(--color-charcoal-muted);
margin-top: var(--space-2);
}
/* =========================================================================
15. BRANCH STRIP
========================================================================= */
/* Higher specificity than ".footer-col ul" so the branch list keeps its
wrapped chip layout instead of the footer's default vertical link list. */
.footer-col ul.branch-strip,
.branch-strip {
display: flex;
flex-wrap: wrap;
gap: var(--space-2) var(--space-4);
padding: var(--space-5) 0;
}
.branch-strip li {
display: flex;
align-items: center;
gap: 0.4em;
font-size: var(--text-sm);
font-weight: 600;
color: inherit;
}
.branch-strip li::before {
content: '';
width: 6px;
height: 6px;
border-radius: 50%;
background-color: var(--color-gold);
flex-shrink: 0;
}
/* =========================================================================
16. STICKY MOBILE CTA BAR
========================================================================= */
.sticky-cta-bar {
display: flex;
position: fixed;
left: 0;
right: 0;
bottom: 0;
z-index: 300;
gap: var(--space-3);
padding: var(--space-3) var(--space-4);
padding-bottom: calc(var(--space-3) + env(safe-area-inset-bottom));
background-color: var(--color-surface);
border-top: 1px solid var(--color-border);
box-shadow: var(--shadow-up);
}
.sticky-cta-bar .btn {
flex: 1;
}
@media (min-width: 768px) {
.sticky-cta-bar {
display: none;
}
}
/* Hide the sticky call/WhatsApp bar while the mobile nav overlay is open —
otherwise it sits on top of (or directly behind, fighting for the same
44px of screen) the nav's own CTA buttons at the bottom of the sheet. */
body.nav-open .sticky-cta-bar {
display: none;
}
/* Prevent the fixed bar from covering content/footer on mobile */
body:has(.sticky-cta-bar) {
padding-bottom: 78px;
}
@media (min-width: 768px) {
body:has(.sticky-cta-bar) {
padding-bottom: 0;
}
}
/* =========================================================================
16b. CTA BAND (bottom call-to-action, every page)
========================================================================= */
.cta-band {
background-color: var(--color-primary);
color: var(--color-surface);
text-align: center;
/* Deliberately smaller than the generic .section padding — this band is a
closing nudge right before the footer, not a primary content section,
and the footer below is already a solid dark-green block of its own. */
padding-block: var(--space-6);
border-bottom: 1px solid rgba(201, 162, 75, 0.35);
}
@media (min-width: 768px) {
.cta-band {
padding-block: var(--space-7);
}
}
.cta-band h2 {
color: var(--color-surface);
/* Smaller than the default h2 (--text-3xl) — still confident at this
position, but no longer competing with the page's real headings. */
font-size: var(--text-2xl);
margin-bottom: var(--space-2);
}
.cta-band-content > p {
color: rgba(255, 255, 255, 0.85);
max-width: 56ch;
margin-inline: auto;
margin-bottom: var(--space-4);
}
.cta-band-actions {
display: flex;
flex-wrap: wrap;
justify-content: center;
gap: var(--space-3);
}
/* Laptop/desktop: heading + copy on the left, actions on the right, single
row — reads as a tidy closing nudge instead of a tall centered stack.
Grid placement (not source order) puts h2/p in column 1 and the actions
group in column 2, so no HTML changes are needed. */
@media (min-width: 1024px) {
.cta-band {
text-align: left;
}
.cta-band-content {
display: grid;
grid-template-columns: 1fr auto;
align-items: center;
column-gap: var(--space-7);
}
.cta-band-content > h2 {
grid-column: 1;
grid-row: 1;
margin-bottom: var(--space-1);
}
.cta-band-content > p {
grid-column: 1;
grid-row: 2;
margin-inline: 0;
margin-bottom: 0;
max-width: 48ch;
}
.cta-band-actions {
grid-column: 2;
grid-row: 1 / span 2;
justify-content: flex-end;
}
}
/* Buttons need contrast overrides here — the default btn-primary/btn-secondary
green matches the band's own background and would otherwise disappear. */
.cta-band .btn-primary {
background-color: var(--color-surface);
color: var(--color-primary);
border-color: var(--color-surface);
}
.cta-band .btn-primary:hover {
background-color: var(--color-bg-alt);
}
.cta-band .btn-secondary {
color: var(--color-surface);
border-color: var(--color-surface);
}
.cta-band .btn-secondary:hover {
background-color: var(--color-surface);
color: var(--color-primary);
}
/* =========================================================================
16c. ABOUT PAGE
========================================================================= */
.about-intro-grid {
display: grid;
grid-template-columns: 1fr;
gap: var(--space-6);
align-items: center;
}
@media (min-width: 768px) {
.about-intro-grid {
grid-template-columns: 1fr 1fr;
gap: var(--space-8);
}
}
.about-image-wrap {
border-radius: var(--radius-lg);
overflow: hidden;
box-shadow: var(--shadow-lg);
aspect-ratio: 4 / 3;
}
.about-image-wrap picture {
display: block;
width: 100%;
height: 100%;
}
.about-copy p {
color: var(--color-charcoal-muted);
margin-bottom: var(--space-4);
}
.about-copy p:last-child {
margin-bottom: 0;
}
/* =========================================================================
17. MISC UTILITIES
========================================================================= */
.text-center { text-align: center; }
.text-muted { color: var(--color-charcoal-muted); }
.mt-0 { margin-top: 0; }
.mb-0 { margin-bottom: 0; }
.flow > * + * {
margin-top: var(--space-4);
}
/* =========================================================================
18. GLOBAL REDUCED-MOTION SAFETY NET
========================================================================= */
@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;
}
}
/* =========================================================================
19. GALLERY SLIDESHOW & MASONRY
========================================================================= */
.slideshow-section {
--slideshow-green-deep: #142E20;
--slideshow-green: #1F3D2B;
--slideshow-cream: #FAF6EF;
--slideshow-gold: #C9A227;
padding-block: var(--space-6) var(--space-8);
}
/* Establishes a container-query context so .slideshow-stage's height can
be computed from the CONTAINER's actual width (cqw) rather than the
viewport's (vw) — .container has its own side padding, so vw and the
container's real content width diverge, and using vw alone produced a
box measurably taller/narrower than the intended ratio (verified: at a
375px viewport the container is only 327px wide, so 75vw came out 15%
taller than a true 4:3 box would be — cropping far more off the sides
than intended). cqw is exact; vw is kept only as a fallback for browsers
without container-query support. */
.slideshow-section .container {
container-type: inline-size;
}
/* Height is set via height:min(...) rather than aspect-ratio+max-height:
combining aspect-ratio with a binding max-height on a width-filling
block element makes Chromium derive WIDTH from the capped height too
(confirmed empirically — 560px * 16/9 = 995.5px, exactly the shrunk
width observed), leaving a gap instead of filling the container. This
approach keeps width at a true 100% always, with height approximating
the requested 4:3 / 16:9 ratio and hard-capped at 560px on desktop. */
.slideshow-stage {
position: relative;
overflow: hidden;
width: 100%;
height: min(75vw, 480px);
border-radius: 14px;
box-shadow: var(--shadow-lg);
background-color: var(--slideshow-green-deep);
}
@media (min-width: 768px) {
.slideshow-stage {
height: min(56.25vw, 560px);
}
}
@supports (container-type: inline-size) {
.slideshow-stage {
height: min(75cqw, 480px);
}
@media (min-width: 768px) {
.slideshow-stage {
height: min(56.25cqw, 560px);
}
}
}
.slideshow-track {
position: relative;
width: 100%;
height: 100%;
min-height: inherit;
touch-action: pan-y;
}
.slide {
position: absolute;
inset: 0;
opacity: 0;
z-index: 1;
transition: opacity 1.2s ease;
pointer-events: none;
}
.slide.is-active {
opacity: 1;
z-index: 2;
pointer-events: auto;
}
.slide-media {
position: absolute;
inset: 0;
overflow: hidden;
}
.slide-media picture {
display: block;
width: 100%;
height: 100%;
}
/* .img-cover (in HTML) supplies width/height/object-fit/display; this rule
adds the slideshow-specific Ken Burns transform behaviour only. */
.slide-image {
transform: scale(1);
will-change: transform;
background-color: var(--slideshow-green);
}
/* Ken Burns — alternating zoom + pan direction per slide, only while active */
.slide:nth-child(odd) .slide-image {
transform-origin: 30% 35%;
}
.slide:nth-child(even) .slide-image {
transform-origin: 70% 65%;
}
.slide.is-active .slide-image {
animation: kenburns 6.2s ease-out forwards;
}
.slide:nth-child(even).is-active .slide-image {
animation-name: kenburns-alt;
}
.slideshow-stage.no-motion .slide-image {
animation: none;
transform: scale(1);
}
@keyframes kenburns {
from { transform: scale(1) translate(0, 0); }
to { transform: scale(1.04) translate(-1.5%, -1%); }
}
@keyframes kenburns-alt {
from { transform: scale(1) translate(0, 0); }
to { transform: scale(1.04) translate(1.5%, 1%); }
}
.slide-gradient {
position: absolute;
inset: 0;
background: linear-gradient(to top, rgba(20, 46, 32, 0.85) 0%, rgba(20, 46, 32, 0.45) 35%, transparent 65%);
pointer-events: none;
}
.slide-caption {
position: absolute;
left: var(--space-5);
right: var(--space-5);
bottom: var(--space-7);
z-index: 3;
max-width: 44ch;
color: var(--slideshow-cream);
opacity: 0;
transform: translateY(10px);
transition: opacity 0.6s ease 0.25s, transform 0.6s ease 0.25s;
}
.slide.is-active .slide-caption {
opacity: 1;
transform: translateY(0);
}
@media (min-width: 768px) {
.slide-caption {
left: var(--space-8);
right: var(--space-8);
bottom: var(--space-8);
}
}
.slide-divider {
display: block;
width: 48px;
height: 2px;
background-color: var(--slideshow-gold);
margin-bottom: var(--space-4);
}
.slide-message {
font-family: var(--font-heading);
font-size: clamp(1.25rem, 2.2vw, 1.75rem);
font-weight: 500;
font-style: italic;
line-height: 1.25;
margin-bottom: var(--space-2);
color: var(--slideshow-cream);
}
.slide-category {
font-family: var(--font-body);
font-size: var(--text-xs);
font-weight: 700;
letter-spacing: 0.14em;
text-transform: uppercase;
color: var(--slideshow-gold);
}
/* Segmented progress bars */
.slideshow-progress {
position: absolute;
top: var(--space-4);
left: var(--space-5);
right: calc(var(--space-5) + 52px);
z-index: 5;
display: flex;
gap: var(--space-2);
}
@media (min-width: 768px) {
.slideshow-progress {
left: var(--space-8);
right: calc(var(--space-8) + 56px);
}
}
.progress-segment {
flex: 1;
height: 3px;
padding: 0;
background: rgba(255, 255, 255, 0.3);
border-radius: var(--radius-full);
overflow: hidden;
}
.progress-fill {
display: block;
height: 100%;
width: 0%;
background-color: var(--slideshow-gold);
border-radius: var(--radius-full);
}
.progress-segment.is-complete .progress-fill {
width: 100%;
}
.progress-segment.is-active .progress-fill {
width: 0%;
animation: slide-progress-fill 5000ms linear forwards;
}
.slideshow-stage.is-paused .progress-segment.is-active .progress-fill {
animation-play-state: paused;
}
@keyframes slide-progress-fill {
from { width: 0%; }
to { width: 100%; }
}
/* Play/pause button */
.slideshow-playpause {
position: absolute;
top: var(--space-4);
right: var(--space-5);
z-index: 5;
width: 36px;
height: 36px;
display: inline-flex;
align-items: center;
justify-content: center;
background-color: rgba(20, 46, 32, 0.55);
border-radius: var(--radius-full);
color: var(--color-surface);
transition: background-color var(--transition-fast);
}
@media (min-width: 768px) {
.slideshow-playpause {
right: var(--space-8);
}
}
.slideshow-playpause:hover {
background-color: rgba(20, 46, 32, 0.8);
}
.playpause-icon {
position: relative;
display: block;
width: 12px;
height: 14px;
}
.playpause-icon::before {
content: '';
position: absolute;
inset: 0;
border-style: solid;
border-width: 7px 0 7px 12px;
border-color: transparent transparent transparent currentColor;
}
.slideshow-playpause[aria-pressed="true"] .playpause-icon::before {
display: none;
}
.slideshow-playpause[aria-pressed="true"] .playpause-icon::after {
content: '';
position: absolute;
inset: 0;
background-image: linear-gradient(to right, currentColor 4px, transparent 4px 8px, currentColor 8px 12px);
}
/* Thumbnail film-strip — sits inside the same container width as the
stage, directly beneath it. All 8 thumbnails fit at typical container
widths; overflow-x handles it gracefully if that ever changes. */
.slideshow-thumbs {
display: flex;
gap: var(--space-2);
padding: var(--space-4) 0 0;
overflow-x: auto;
-webkit-overflow-scrolling: touch;
background-color: transparent;
}
@media (min-width: 768px) {
.slideshow-thumbs {
gap: var(--space-3);
}
}
.thumb {
flex: 0 0 auto;
width: 84px;
aspect-ratio: 16 / 9;
border-radius: var(--radius-sm);
overflow: hidden;
border: 2px solid transparent;
opacity: 0.55;
transition: opacity var(--transition-base), border-color var(--transition-base);
}
.thumb picture {
display: block;
width: 100%;
height: 100%;
}
.thumb:hover {
opacity: 0.85;
}
.thumb.is-active {
opacity: 1;
border-color: var(--slideshow-gold);
}
/* Filter pills */
.filter-pills {
display: flex;
flex-wrap: wrap;
gap: var(--space-2);
margin: var(--space-5) 0 var(--space-6);
}
.filter-pill {
padding: 0.5rem 1.1rem;
border-radius: var(--radius-full);
border: 1.5px solid var(--color-border-strong);
background-color: var(--color-surface);
font-size: var(--text-sm);
font-weight: 600;
color: var(--color-charcoal-muted);
transition: background-color var(--transition-fast), border-color var(--transition-fast), color var(--transition-fast);
}
.filter-pill:hover {
border-color: var(--color-primary);
color: var(--color-primary);
}
.filter-pill.is-active {
background-color: var(--color-primary);
border-color: var(--color-primary);
color: var(--color-surface);
}
/* Masonry browse grid */
.gallery-masonry {
column-count: 1;
column-gap: var(--space-4);
}
@media (min-width: 640px) {
.gallery-masonry {
column-count: 2;
}
}
@media (min-width: 1024px) {
.gallery-masonry {
column-count: 3;
}
}
.masonry-item {
aspect-ratio: 4 / 3;
break-inside: avoid;
margin-bottom: var(--space-4);
border-radius: var(--radius-md);
overflow: hidden;
box-shadow: var(--shadow-sm);
}
.masonry-item picture {
display: block;
width: 100%;
height: 100%;
}
.masonry-item.is-filtered-out {
display: none;
}
@media (prefers-reduced-motion: reduce) {
.slide.is-active .slide-image {
animation: none;
}
.progress-segment.is-active .progress-fill {
animation: none;
}
}
/* =========================================================================
20. CONTACT PAGE — photo hero, CTA cards, other-ways strip, dormant
Find Us, sentiment band. Fully scoped to contact.html.
========================================================================= */
/* --- Hero: full-bleed photo, directional gradient, overlaid content --- */
.contact-hero {
position: relative;
min-height: 72vh;
min-height: 72dvh;
display: flex;
align-items: flex-end;
overflow: hidden;
background-color: #12291B;
}
@media (min-width: 768px) {
.contact-hero {
align-items: center;
}
}
.contact-hero-bg {
position: absolute;
inset: 0;
z-index: 0;
}
.contact-hero-bg picture {
display: block;
width: 100%;
height: 100%;
}
/* Mobile: dark at bottom (content sits over the lower half). Desktop:
dark on the left (content sits on the left, photo reads on the right). */
.contact-hero-gradient {
position: absolute;
inset: 0;
background: linear-gradient(180deg, rgba(18, 41, 27, 0.25) 0%, rgba(18, 41, 27, 0.92) 100%);
}
@media (min-width: 768px) {
.contact-hero-gradient {
background: linear-gradient(90deg, rgba(18, 41, 27, 0.92) 0%, rgba(18, 41, 27, 0.25) 100%);
}
}
.contact-hero .container {
position: relative;
z-index: 1;
}
.contact-hero-content {
max-width: 620px;
padding-block: var(--space-7) var(--space-8);
}
.contact-hero-heading {
color: var(--color-bg);
max-width: 14ch;
}
.contact-hero-sub {
color: rgba(250, 246, 238, 0.82);
font-size: var(--text-lg);
max-width: 50ch;
margin-bottom: var(--space-6);
}
/* --- Two CTA cards: the design's centerpiece --- */
.contact-cta-cards {
display: flex;
flex-direction: column;
gap: var(--space-4);
}
@media (min-width: 640px) {
.contact-cta-cards {
flex-direction: row;
align-items: stretch;
}
}
.contact-cta-card {
position: relative;
display: flex;
flex-direction: column;
align-items: flex-start;
flex: 1;
min-height: 88px;
padding: var(--space-5);
border-radius: 14px;
text-decoration: none;
box-shadow: var(--shadow-md);
transition: background-color var(--transition-fast), box-shadow var(--transition-fast);
}
.contact-cta-card:hover {
box-shadow: var(--shadow-lg);
}
.contact-cta-icon {
display: inline-flex;
align-items: center;
justify-content: center;
width: 40px;
height: 40px;
border-radius: var(--radius-full);
margin-bottom: var(--space-3);
}
.contact-cta-icon svg {
width: 20px;
height: 20px;
fill: currentColor;
}
.contact-cta-label {
font-size: var(--text-xs);
font-weight: 700;
letter-spacing: 0.1em;
text-transform: uppercase;
color: var(--color-gold);
margin-bottom: var(--space-1);
}
.contact-cta-number {
font-family: var(--font-heading);
font-size: 1.8rem;
font-variant-numeric: lining-nums;
font-feature-settings: "lnum" 1;
color: var(--color-bg);
line-height: 1.15;
margin-bottom: var(--space-3);
}
.contact-cta-footer {
font-size: var(--text-sm);
color: rgba(250, 246, 238, 0.75);
margin-top: auto;
}
.contact-cta-card--call {
background-color: #1F3D2B;
}
.contact-cta-card--call .contact-cta-icon {
background-color: rgba(250, 246, 238, 0.12);
color: var(--color-gold);
}
.contact-cta-card--call:hover {
background-color: #142E20;
}
.contact-cta-card--whatsapp {
background-color: #2E7D4F;
}
.contact-cta-card--whatsapp .contact-cta-icon {
background-color: #25D366;
color: var(--color-surface);
}
.contact-cta-card--whatsapp:hover {
background-color: #266943;
}
/* --- "Other ways to reach us": ruled heading + one card, hairline columns --- */
.ruled-heading {
display: flex;
align-items: center;
justify-content: center;
gap: var(--space-3);
font-family: var(--font-body);
font-size: var(--text-xs);
font-weight: 700;
letter-spacing: 0.16em;
text-transform: uppercase;
color: var(--color-charcoal-muted);
margin-bottom: var(--space-6);
}
.ruled-heading .rule {
display: block;
width: 32px;
height: 1px;
background-color: var(--color-gold);
}
.other-ways-card {
display: grid;
grid-template-columns: 1fr;
background-color: var(--color-surface);
border-radius: var(--radius-lg);
box-shadow: var(--shadow-md);
overflow: hidden;
}
@media (min-width: 768px) {
.other-ways-card {
grid-template-columns: repeat(3, 1fr);
}
}
.other-ways-col {
padding: var(--space-6) var(--space-5);
text-align: center;
border-bottom: 1px solid var(--color-border);
}
.other-ways-col:last-child {
border-bottom: none;
}
@media (min-width: 768px) {
.other-ways-col {
border-bottom: none;
border-right: 1px solid var(--color-border);
}
.other-ways-col:last-child {
border-right: none;
}
}
.other-ways-icon {
display: inline-flex;
align-items: center;
justify-content: center;
width: 52px;
height: 52px;
border-radius: var(--radius-full);
background-color: var(--color-bg);
color: var(--color-primary);
margin-bottom: var(--space-4);
}
.other-ways-icon svg {
width: 24px;
height: 24px;
fill: currentColor;
}
.other-ways-col h3 {
font-family: var(--font-heading);
font-size: var(--text-lg);
margin-bottom: var(--space-3);
}
.other-ways-list {
display: flex;
flex-direction: column;
align-items: center;
gap: var(--space-2);
}
.other-ways-col a {
min-height: 44px;
display: inline-flex;
align-items: center;
}
/* --- Find Us: built in full, shipped dormant via [hidden] on the wrapper --- */
.find-us-grid {
display: grid;
grid-template-columns: 1fr;
gap: var(--space-6);
align-items: stretch;
}
@media (min-width: 900px) {
.find-us-grid {
grid-template-columns: 1.1fr 1fr;
}
}
.find-us-map {
border-radius: var(--radius-lg);
overflow: hidden;
}
.map-placeholder {
height: 100%;
min-height: 320px;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
gap: var(--space-3);
background-color: var(--color-bg-alt);
border: 1px dashed var(--color-border-strong);
border-radius: var(--radius-lg);
color: var(--color-charcoal-muted);
}
.map-pin-icon {
display: inline-flex;
align-items: center;
justify-content: center;
width: 48px;
height: 48px;
border-radius: var(--radius-full);
background-color: var(--color-surface);
color: var(--color-gold-deep);
}
.map-pin-icon svg {
width: 24px;
height: 24px;
fill: currentColor;
}
.find-us-details {
display: flex;
flex-direction: column;
justify-content: center;
}
.find-us-row {
padding-block: var(--space-4);
border-bottom: 1px solid var(--color-border);
}
.find-us-row h3 {
font-family: var(--font-body);
font-size: var(--text-sm);
font-weight: 700;
text-transform: uppercase;
letter-spacing: 0.06em;
color: var(--color-charcoal-muted);
margin-bottom: var(--space-2);
}
.find-us-details .btn {
margin-top: var(--space-5);
align-self: flex-start;
}
/* --- Sentiment band: closing note above the footer --- */
.sentiment-band {
position: relative;
background-color: #12291B;
padding-block: var(--space-8);
overflow: hidden;
}
.sentiment-band::before,
.sentiment-band::after {
content: '';
position: absolute;
width: 180px;
height: 180px;
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'%3E%3Cpath d='M50 5c20 15 30 30 30 45S70 80 50 95C30 80 20 65 20 50S30 20 50 5z' fill='%23C9A24B'/%3E%3C/svg%3E");
background-repeat: no-repeat;
opacity: 0.06;
pointer-events: none;
}
.sentiment-band::before {
top: -40px;
left: -40px;
}
.sentiment-band::after {
bottom: -40px;
right: -40px;
transform: rotate(180deg);
}
.sentiment-band-content {
position: relative;
z-index: 1;
max-width: 560px;
margin-inline: auto;
text-align: center;
}
.leaf-divider {
display: inline-flex;
color: var(--color-gold);
margin-bottom: var(--space-5);
}
.leaf-divider svg {
width: 64px;
height: 24px;
}
.sentiment-line {
font-family: var(--font-heading);
font-style: italic;
font-size: var(--text-2xl);
color: var(--color-bg);
margin-bottom: var(--space-3);
}
.sentiment-subline {
font-size: var(--text-base);
color: rgba(250, 246, 238, 0.7);
}
/* =========================================================================
21. FIRST-VISIT PAGE LOADER (index.html only)
Pure CSS, timer-driven — it hides itself via animation-fill-mode after a
fixed delay rather than waiting on a JS "content ready" signal, so a
blocked/slow script can never leave it stuck covering the page.
========================================================================= */
.page-loader {
position: fixed;
inset: 0;
z-index: 9999;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
gap: var(--space-4);
background-color: var(--color-primary);
animation: page-loader-dismiss 0.6s ease forwards;
animation-delay: 1.1s;
}
.page-loader-mark {
position: relative;
width: 88px;
height: 88px;
display: flex;
align-items: center;
justify-content: center;
opacity: 0;
transform: scale(0.85);
animation: page-loader-mark-in 0.6s ease forwards;
animation-delay: 0.1s;
}
.page-loader-mark img {
width: 64px;
height: 64px;
border-radius: 50%;
object-fit: cover;
}
.page-loader-ring {
position: absolute;
inset: 0;
border-radius: 50%;
border: 2px solid rgba(201, 162, 75, 0.3);
border-top-color: var(--color-gold);
animation: page-loader-spin 1s linear infinite;
}
.page-loader-tagline {
font-family: var(--font-body);
font-size: var(--text-xs);
font-weight: 600;
letter-spacing: 0.16em;
text-transform: uppercase;
color: rgba(250, 246, 238, 0.75);
opacity: 0;
animation: page-loader-mark-in 0.6s ease forwards;
animation-delay: 0.3s;
}
@keyframes page-loader-mark-in {
to { opacity: 1; transform: scale(1); }
}
@keyframes page-loader-spin {
to { transform: rotate(360deg); }
}
@keyframes page-loader-dismiss {
to { opacity: 0; visibility: hidden; }
}
@media (prefers-reduced-motion: reduce) {
.page-loader,
.page-loader-mark,
.page-loader-tagline {
animation-delay: 0s !important;
}
}