/* =====================================================================
Golden Hi Hills — site stylesheet
---------------------------------------------------------------------
One stylesheet for the public website, the certificate, the password
reset page and the admin dashboard.
The COLOUR VALUES below are the organisation's established palette and
are unchanged. Everything else — type, layout, components — belongs to
this design.
Contents
1. Tokens
2. Base & utilities
3. Buttons, pills, icons
4. Header (utility bar + main bar)
5. Hero carousel
6. Sections, row carousels, cards
7. Tiles, story cards, quotes, partners, CTA band
8. Inner-page band & overlap card
9. Page-specific: about, donate, volunteer, vacancies, contact, gallery
10. Forms, status messages, modals, lightbox, chat
11. Footer
12. Certificate & password reset
13. Admin dashboard
14. Motion & responsive
===================================================================== */
/* ---------------------------------------------------------------------
Fonts - all served from this site (assets/fonts/), none from a CDN.
DM Sans (body) and Fraunces (headings) are variable fonts; Atkinson
Hyperlegible is the "Easy-to-read font" choice. All three are under the
SIL Open Font Licence: the licence texts sit next to the files.
Each is split into latin and latin-ext, so Afrikaans, isiZulu and the
other official languages (ḓ, ṋ, ṱ, š, ê, ë ...) are covered; the browser
only downloads the part a page actually needs.
--------------------------------------------------------------------- */
@font-face {
font-family: "DM Sans"; font-style: normal; font-weight: 100 1000; font-display: swap;
src: url("assets/fonts/dm-sans-latin-ext-wght-normal.woff2") format("woff2");
unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
font-family: "DM Sans"; font-style: normal; font-weight: 100 1000; font-display: swap;
src: url("assets/fonts/dm-sans-latin-wght-normal.woff2") format("woff2");
unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
font-family: "Fraunces"; font-style: normal; font-weight: 100 900; font-display: swap;
src: url("assets/fonts/fraunces-latin-ext-wght-normal.woff2") format("woff2");
unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
font-family: "Fraunces"; font-style: normal; font-weight: 100 900; font-display: swap;
src: url("assets/fonts/fraunces-latin-wght-normal.woff2") format("woff2");
unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
font-family: "Atkinson Hyperlegible"; font-style: normal; font-weight: 400; font-display: swap;
src: url("assets/fonts/atkinson-hyperlegible-latin-ext-400-normal.woff2") format("woff2");
unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
font-family: "Atkinson Hyperlegible"; font-style: normal; font-weight: 400; font-display: swap;
src: url("assets/fonts/atkinson-hyperlegible-latin-400-normal.woff2") format("woff2");
unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
font-family: "Atkinson Hyperlegible"; font-style: normal; font-weight: 700; font-display: swap;
src: url("assets/fonts/atkinson-hyperlegible-latin-ext-700-normal.woff2") format("woff2");
unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
font-family: "Atkinson Hyperlegible"; font-style: normal; font-weight: 700; font-display: swap;
src: url("assets/fonts/atkinson-hyperlegible-latin-700-normal.woff2") format("woff2");
unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* ---------------------------------------------------------------------
Fonts - all served from this site (assets/fonts/), none from a CDN.
DM Sans (body) and Fraunces (headings) are variable fonts; Atkinson
Hyperlegible is the "Easy-to-read font" choice. All three are under the
SIL Open Font Licence: the licence texts sit next to the files.
Each is split into latin and latin-ext, so Afrikaans, isiZulu and the
other official languages (ḓ, ṋ, ṱ, š, ê, ë ...) are covered; the browser
only downloads the part a page actually needs.
--------------------------------------------------------------------- */
@font-face {
font-family: "DM Sans"; font-style: normal; font-weight: 100 1000; font-display: swap;
src: url("assets/fonts/dm-sans-latin-ext-wght-normal.woff2") format("woff2");
unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
font-family: "DM Sans"; font-style: normal; font-weight: 100 1000; font-display: swap;
src: url("assets/fonts/dm-sans-latin-wght-normal.woff2") format("woff2");
unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
font-family: "Fraunces"; font-style: normal; font-weight: 100 900; font-display: swap;
src: url("assets/fonts/fraunces-latin-ext-wght-normal.woff2") format("woff2");
unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
font-family: "Fraunces"; font-style: normal; font-weight: 100 900; font-display: swap;
src: url("assets/fonts/fraunces-latin-wght-normal.woff2") format("woff2");
unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
font-family: "Atkinson Hyperlegible"; font-style: normal; font-weight: 400; font-display: swap;
src: url("assets/fonts/atkinson-hyperlegible-latin-ext-400-normal.woff2") format("woff2");
unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
font-family: "Atkinson Hyperlegible"; font-style: normal; font-weight: 400; font-display: swap;
src: url("assets/fonts/atkinson-hyperlegible-latin-400-normal.woff2") format("woff2");
unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
font-family: "Atkinson Hyperlegible"; font-style: normal; font-weight: 700; font-display: swap;
src: url("assets/fonts/atkinson-hyperlegible-latin-ext-700-normal.woff2") format("woff2");
unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
font-family: "Atkinson Hyperlegible"; font-style: normal; font-weight: 700; font-display: swap;
src: url("assets/fonts/atkinson-hyperlegible-latin-700-normal.woff2") format("woff2");
unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* ---------------------------------------------------------------------
Fonts - all served from this site (assets/fonts/), none from a CDN.
DM Sans (body) and Fraunces (headings) are variable fonts; Atkinson
Hyperlegible is the "Easy-to-read font" choice. All three are under the
SIL Open Font Licence: the licence texts sit next to the files.
Each is split into latin and latin-ext, so Afrikaans, isiZulu and the
other official languages (ḓ, ṋ, ṱ, š, ê, ë ...) are covered; the browser
only downloads the part a page actually needs.
--------------------------------------------------------------------- */
@font-face {
font-family: "DM Sans"; font-style: normal; font-weight: 100 1000; font-display: swap;
src: url("assets/fonts/dm-sans-latin-ext-wght-normal.woff2") format("woff2");
unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
font-family: "DM Sans"; font-style: normal; font-weight: 100 1000; font-display: swap;
src: url("assets/fonts/dm-sans-latin-wght-normal.woff2") format("woff2");
unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
font-family: "Fraunces"; font-style: normal; font-weight: 100 900; font-display: swap;
src: url("assets/fonts/fraunces-latin-ext-wght-normal.woff2") format("woff2");
unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
font-family: "Fraunces"; font-style: normal; font-weight: 100 900; font-display: swap;
src: url("assets/fonts/fraunces-latin-wght-normal.woff2") format("woff2");
unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
font-family: "Atkinson Hyperlegible"; font-style: normal; font-weight: 400; font-display: swap;
src: url("assets/fonts/atkinson-hyperlegible-latin-ext-400-normal.woff2") format("woff2");
unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
font-family: "Atkinson Hyperlegible"; font-style: normal; font-weight: 400; font-display: swap;
src: url("assets/fonts/atkinson-hyperlegible-latin-400-normal.woff2") format("woff2");
unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
font-family: "Atkinson Hyperlegible"; font-style: normal; font-weight: 700; font-display: swap;
src: url("assets/fonts/atkinson-hyperlegible-latin-ext-700-normal.woff2") format("woff2");
unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
font-family: "Atkinson Hyperlegible"; font-style: normal; font-weight: 700; font-display: swap;
src: url("assets/fonts/atkinson-hyperlegible-latin-700-normal.woff2") format("woff2");
unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* ---------------------------------------------------------------------
1. Tokens
--------------------------------------------------------------------- */
:root {
--ease-out: cubic-bezier(.16, 1, .3, 1);
--white: #FFFFFF;
--topbar-h: 38px;
--navbar-h: 76px;
--paper: #f7f1e6;
--paper-alt: #ede2cf;
--ink: #183027;
--ink-soft: #52605a;
--gold: #e7b95f;
--gold-deep: #a96d17;
/* Gold dark enough for small text on cream and paper (AA) */
--gold-ink: #8f5b0f;
--pine: #133c2f;
--pine-dark: #0b2b21;
--pine-light: #638c57;
/* Darker leaf green, readable behind white text (AA) */
--pine-leaf: #557b4a;
--pine-bright: #276b4f;
--clay: #a94b38;
--cream-card: #fffdf8;
--onyx: #0c281f;
--text-on-dark: #fbf6eb;
--text-on-dark-soft: #c9d7cf;
--line: rgba(19, 60, 47, .11);
--line-strong: rgba(19, 60, 47, .22);
--gold-tint: rgba(231, 185, 95, .22);
--green-tint: rgba(39, 107, 79, .12);
--clay-tint: rgba(169, 75, 56, .11);
--font: "DM Sans", system-ui, -apple-system, "Segoe UI", sans-serif;
--font-display: "Fraunces", Georgia, serif;
--font-body: var(--font);
--radius-xs: 8px;
--radius-sm: 10px;
--radius: 14px;
--radius-lg: 18px;
--shadow: 0 12px 40px rgba(12, 40, 31, .08);
--shadow-lift: 0 24px 60px rgba(12, 40, 31, .16);
--container: 1240px;
--gutter: clamp(20px, 4vw, 52px);
}
/* ---------------------------------------------------------------------
2. Base & utilities
--------------------------------------------------------------------- */
*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; zoom: var(--accessibility-scale, 1); }
html, body { overflow-x: clip; }
body { margin: 0; font-family: var(--font); -webkit-font-smoothing: antialiased; background: #fffdf8; color: var(--ink); font-size: 1rem; line-height: 1.5; }
/* The Easy-to-read font switch: Atkinson Hyperlegible for everything, headings included. */
body.accessibility-font { --font: "Atkinson Hyperlegible", Arial, Helvetica, sans-serif; --font-display: var(--font); --font-body: var(--font); }
body.accessibility-contrast { --ink: #000; --ink-soft: #222; --paper: #fff; --paper-alt: #eee; --line: #555; --line-strong: #222; }
.accessibility-toggle { position: fixed; left: 16px; bottom: 16px; z-index: 250; display: inline-flex; align-items: center; gap: 8px; min-height: 48px; padding: 4px 16px 4px 6px; border: 2px solid var(--onyx); border-radius: 12px; background: var(--gold); color: var(--onyx); font-weight: 700; cursor: pointer; }
.accessibility-toggle .accessibility-pic { width: 40px; height: 40px; flex: 0 0 40px; }
.accessibility-icon { width: 1.35em; height: 1.35em; flex: 0 0 auto; }
.accessibility-pic { display: block; width: 48px; height: 48px; flex: 0 0 48px; object-fit: contain; }
.accessibility-panel { position: fixed; left: 16px; bottom: 68px; z-index: 250; display: grid; gap: 8px; width: min(360px, calc(100vw - 32px)); max-height: calc(100vh - 88px); overflow-x: hidden; overflow-y: auto; padding: 14px; background: var(--paper); color: var(--ink); border: 2px solid var(--ink); border-radius: 12px; box-shadow: var(--shadow); }
.accessibility-toggle, .accessibility-panel { zoom: var(--accessibility-widget-scale, 1); }
.accessibility-panel-title { margin: 0; padding-right: 52px; font-size: 1.75rem; font-weight: 800; line-height: 1.15; color: var(--ink); }
.accessibility-panel button { padding: 8px; text-align: left; cursor: pointer; }
.accessibility-close { position: absolute; top: 8px; right: 8px; border: 0; background: transparent; color: var(--ink); font-size: 1.5rem; line-height: 1; }
.accessibility-panel .accessibility-close { display: grid; place-items: center; width: 44px; height: 44px; padding: 0; text-align: center; }
.accessibility-close .accessibility-icon { width: 1.75rem; height: 1.75rem; stroke-width: 2.5; }
.accessibility-size { display: flex; align-items: center; gap: 8px; }
.accessibility-panel .accessibility-size-button { min-width: 44px; min-height: 44px; padding: 4px; border: 2px solid var(--ink); border-radius: 6px; background: var(--paper-alt); color: var(--ink); font-size: 1.125rem; font-weight: 800; text-align: center; }
.accessibility-panel .accessibility-size-button[aria-pressed="true"] { background: var(--gold); }
.accessibility-size-status { min-width: 48px; margin-left: 4px; font-size: 1.125rem; font-weight: 700; color: var(--ink); text-align: center; }
.accessibility-panel .accessibility-control { display: grid; grid-template-columns: 48px minmax(0, 1fr); align-items: center; gap: 12px; width: 100%; min-height: 56px; padding: 4px 12px 4px 6px; border: 1px solid var(--ink); border-radius: 8px; background: var(--cream-card); color: var(--ink); font-size: 1rem; font-weight: 600; line-height: 1.25; overflow-wrap: anywhere; }
.accessibility-panel .accessibility-control:hover { border-color: var(--gold-deep); background: var(--gold-tint); }
.accessibility-panel .accessibility-control[aria-pressed="true"] { border-color: var(--gold-deep); background: var(--gold-tint); }
.accessibility-panel .accessibility-control:disabled { opacity: .6; cursor: not-allowed; }
.accessibility-control:focus-visible, .accessibility-size-button:focus-visible, .accessibility-close:focus-visible, .accessibility-toggle:focus-visible { outline: 3px solid var(--gold-deep); outline-offset: 2px; }
.admin-shell ~ .accessibility-toggle, body:has(.admin-shell) .accessibility-toggle { left: 288px; }
.admin-shell ~ .accessibility-panel, body:has(.admin-shell) .accessibility-panel { left: 288px; }
[hidden] { display: none !important; }
img { max-width: 100%; display: block; }
a { color: var(--pine-bright); text-decoration-thickness: 1px; text-underline-offset: 3px; }
a:hover { color: var(--pine); }
h1, h2, h3, h4 { font-family: var(--font); line-height: 1.2; margin: 0 0 .5em; color: var(--ink); }
h1 { font-weight: 700; }
h2 { font-weight: 700; font-size: clamp(1.4rem, 2.2vw, 1.75rem); }
h3 { font-weight: 600; font-size: 1.1rem; }
p { margin: 0 0 1em; }
:focus-visible { outline: 3px solid var(--gold-deep); outline-offset: 2px; border-radius: 4px; }
.container { width: 100%; max-width: var(--container); margin: 0 auto; padding: 0 var(--gutter); }
.skip-link {
position: absolute;
left: 12px;
top: -60px;
z-index: 1000;
background: var(--onyx);
color: var(--white);
padding: 10px 16px;
border-radius: var(--radius-sm);
font-weight: 600;
text-decoration: none;
}
.skip-link:focus { top: 12px; color: var(--white); }
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
.muted { color: var(--ink-soft); }
/* ---------------------------------------------------------------------
3. Buttons, pills, icons
--------------------------------------------------------------------- */
.icon {
width: 1.2em;
height: 1.2em;
flex: none;
display: inline-block;
vertical-align: -0.22em;
}
.icon--brand { fill: currentColor; stroke: none; }
.icon--btn { margin-right: 8px; }
.btn {
display: inline-flex;
align-items: center;
justify-content: center;
gap: 8px;
font-family: var(--font);
font-weight: 600;
font-size: 0.95rem;
line-height: 1.2;
padding: 12px 22px;
border-radius: var(--radius-sm);
border: 2px solid transparent;
text-decoration: none;
cursor: pointer;
transition: transform .15s ease, box-shadow .15s ease, background-color .15s ease;
white-space: nowrap;
}
.btn .icon--btn { margin-right: 0; }
.btn:hover { transform: translateY(-1px); }
.btn:active { transform: translateY(1px); }
.btn:disabled { opacity: .6; cursor: not-allowed; transform: none; }
.btn-gold, .btn--primary { background: var(--gold); color: var(--onyx); box-shadow: inset 0 -3px 0 var(--gold-deep); }
.btn-gold:hover, .btn--primary:hover { color: var(--onyx); background: var(--gold); }
.btn-dark { background: var(--onyx); color: var(--white); box-shadow: inset 0 -3px 0 rgba(0,0,0,.35); }
.btn-dark:hover { color: var(--white); }
.btn-outline { background: transparent; color: var(--ink); border-color: var(--line-strong); }
.btn-outline:hover { border-color: var(--ink); color: var(--ink); }
.btn-outline-light { background: transparent; color: var(--white); border-color: rgba(255,255,255,.7); }
.btn-outline-light:hover { color: var(--onyx); background: var(--white); border-color: var(--white); }
.btn-block { width: 100%; }
/* min-height keeps the smaller buttons thumb-sized without looking bigger. */
.btn-sm { padding: 8px 14px; font-size: .85rem; min-height: 40px; }
/* Chunky, colour-coded action buttons — one colour per way to help */
.action-btn {
display: inline-flex;
align-items: center;
gap: 10px;
padding: 14px 21px;
border-radius: var(--radius-sm);
font-family: var(--font);
font-weight: 600;
font-size: 1rem;
text-decoration: none;
border: 0;
cursor: pointer;
transition: transform .15s ease, filter .15s ease;
}
.action-btn .icon { width: 1.3em; height: 1.3em; }
.action-btn:hover { transform: translateY(-2px); filter: brightness(1.04); }
.action-btn:active { transform: translateY(1px); }
.action-btn--volunteer { background: var(--pine-bright); color: var(--white); box-shadow: inset 0 -4px 0 var(--pine); }
.action-btn--goods { box-shadow: inset 0 -4px 0 rgba(15,29,18,.35); background: rgba(255,255,255,.12); color: var(--white); border: 1px solid rgba(255,255,255,.4); }
.action-btn--money { background: var(--gold); color: var(--onyx); box-shadow: inset 0 -4px 0 var(--gold-deep); }
.action-btn--help { color: var(--white); background: transparent; border: 1px solid rgba(255,255,255,.4); box-shadow: none; }
.action-btn--volunteer:hover, .action-btn--help:hover { color: var(--white); }
.action-btn--goods:hover, .action-btn--money:hover { color: var(--onyx); }
.pill {
display: inline-flex;
align-items: center;
gap: 6px;
border-radius: 999px;
font-size: .8125rem;
font-weight: 600;
line-height: 1.3;
white-space: nowrap;
padding: 5px 11px;
letter-spacing: .015em;
}
.pill--elderly { background: var(--gold); color: var(--onyx); }
.pill--children { background: var(--pine-bright); color: var(--white); }
.pill--gbv { background: var(--clay); color: var(--white); }
.pill--youth { background: var(--gold-ink); color: var(--white); }
.pill--community { background: var(--pine-leaf); color: var(--white); }
.pill--dark { background: var(--onyx); color: var(--white); }
.pill--soft { background: var(--paper-alt); color: var(--ink); }
.pill--date { background: var(--pine-bright); color: var(--white); }
.meta { display: flex; align-items: center; gap: 6px; font-size: .85rem; color: var(--ink-soft); }
.meta .icon { width: 1em; height: 1em; }
/* ---------------------------------------------------------------------
4. Header
--------------------------------------------------------------------- */
.site-header { position: sticky; top: 0; z-index: 100; background: var(--white); transition: box-shadow .2s ease; }
.site-header.is-scrolled { box-shadow: 0 6px 24px rgba(15,29,18,.12); }
.topbar { color: var(--text-on-dark-soft); font-size: .8rem; background: var(--pine-dark); border-bottom: 1px solid rgba(255,255,255,.08); }
.topbar .container { display: flex; align-items: stretch; justify-content: space-between; min-height: 42px; }
.topbar-info { display: flex; align-items: center; gap: 18px; }
.topbar-info a, .topbar-info span { color: var(--text-on-dark-soft); text-decoration: none; display: inline-flex; align-items: center; gap: 6px; min-height: 40px; }
.topbar-info a:hover { color: var(--white); }
.topbar-links { display: flex; align-items: stretch; }
.topbar-links a { display: inline-flex; align-items: center; padding: 0 14px; color: var(--text-on-dark); text-decoration: none; font-weight: 500; }
.topbar-links a:hover { color: var(--gold); }
.topbar-links .topbar-cta { font-weight: 600; padding: 0 18px; }
.topbar-links .topbar-cta--help { background: var(--clay); color: var(--white); }
.topbar-links .topbar-cta--donate { background: var(--gold); color: var(--onyx); }
.topbar-links .topbar-cta--help:hover { color: var(--white); filter: brightness(1.1); }
.topbar-links .topbar-cta--donate:hover { color: var(--onyx); filter: brightness(1.05); }
.navbar { background: rgba(255,253,248,.94); border-bottom: 1px solid var(--line); backdrop-filter: blur(18px); }
.navbar .container { display: flex; align-items: center; justify-content: space-between; gap: 24px; min-height: 86px; }
.brand { display: inline-flex; align-items: center; text-decoration: none; color: var(--ink); gap: 14px; }
.brand-mark img { width: 100%; height: 100%; object-fit: contain; }
.brand-text { display: flex; flex-direction: column; line-height: 1.1; }
.brand-tag { font-size: .8125rem; font-weight: 600; margin-top: 3px; color: var(--gold-ink); letter-spacing: .04em; }
.main-nav { display: flex; align-items: center; gap: 3px; }
.main-nav a {
display: inline-flex;
align-items: center;
text-decoration: none;
position: relative;
color: var(--ink);
font-size: .9rem;
font-weight: 600;
border-radius: 8px;
padding: 10px 13px;
}
.main-nav a:hover { background: var(--paper); color: var(--pine); }
.main-nav a[aria-current="page"] { font-weight: 600; box-shadow: inset 0 -3px 0 var(--gold); border-radius: 0; background: var(--green-tint); color: var(--pine); }
.main-nav .nav-mobile-only { display: none; }
.nav-toggle {
display: none;
background: transparent;
border: 2px solid var(--line-strong);
border-radius: var(--radius-sm);
width: 46px;
height: 46px;
cursor: pointer;
color: var(--ink);
align-items: center;
justify-content: center;
}
.nav-toggle .icon { width: 24px; height: 24px; }
/* ---------------------------------------------------------------------
5. Hero carousel
--------------------------------------------------------------------- */
.hero { position: relative; color: var(--white); overflow: hidden; border-bottom: 5px solid var(--gold); background: var(--pine-dark); }
.hero-slide { position: absolute; inset: 0; opacity: 0; visibility: hidden; transition: opacity .8s ease, visibility .8s ease; }
.hero-slide.is-active { opacity: 1; visibility: visible; }
.hero-slide img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; transform: scale(1.015); }
.hero-content { position: absolute; inset: 0; z-index: 2; display: flex; align-items: center; }
.hero-content .container { padding-top: 64px; padding-bottom: 108px; }
.hero-kicker {
display: inline-flex;
align-items: center;
gap: 8px;
font-weight: 600;
color: var(--gold);
margin-bottom: 14px;
text-transform: uppercase;
letter-spacing: .11em;
font-size: .8125rem;
}
.hero-title {
color: var(--white);
margin-bottom: 22px;
font-family: var(--font-display);
font-size: clamp(3rem, 6vw, 5.2rem);
font-weight: 600;
line-height: 1.02;
letter-spacing: -.02em;
max-width: 10.5ch;
text-wrap: balance;
text-shadow: 0 4px 24px rgba(0,0,0,.18);
}
.hero-blurb {
border-left: 4px solid var(--gold);
padding: 2px 0 2px 16px;
color: var(--text-on-dark);
margin-bottom: 28px;
max-width: 51ch;
border-left-width: 2px;
padding-left: 20px;
font-size: clamp(1rem, 1.6vw, 1.14rem);
line-height: 1.7;
}
.hero-blurb strong { color: var(--gold); font-weight: 700; }
.hero-actions { display: flex; flex-wrap: wrap; gap: 10px; }
.hero-controls { position: absolute; left: 0; right: 0; z-index: 3; bottom: 30px; }
.hero-controls .container { display: flex; align-items: center; gap: 10px; }
.hero-ctrl {
width: 44px;
height: 44px;
border-radius: 50%;
display: grid;
place-items: center;
cursor: pointer;
background: transparent;
color: var(--white);
border: 2px solid rgba(255,255,255,.75);
border-width: 1px;
backdrop-filter: blur(8px);
}
.hero-ctrl:hover { background: rgba(255,255,255,.15); }
.hero-ctrl--plain { border-color: transparent; }
.hero-ctrl .icon { width: 20px; height: 20px; }
/* The dots stay 10px to look at, but each gets a 24px invisible tap area
(padding + background-clip), the minimum size for a touch target. */
.hero-dots { display: flex; gap: 0; margin-left: -1px; }
.hero-dot {
box-sizing: content-box;
width: 10px;
height: 10px;
border-radius: 999px;
border: 0;
/* The dot stays 10px; the padding is what a thumb actually hits. */
padding: 17px 8px;
background: rgba(255,255,255,.45);
background-clip: content-box;
cursor: pointer;
}
.hero-dot[aria-current="true"] { background: var(--gold); background-clip: content-box; width: 26px; border-radius: 999px; }
/* ---------------------------------------------------------------------
6. Sections, row carousels, cards
--------------------------------------------------------------------- */
.section--tint { background: var(--paper); }
.section--tight { padding-top: 24px; }
.section-head { display: flex; align-items: flex-end; justify-content: space-between; gap: 20px; margin-bottom: clamp(30px, 4vw, 50px); }
.section-head h2 { margin: 0; }
.section-head p { margin: 6px 0 0; color: var(--ink-soft); font-size: 1.03rem; max-width: 56ch; }
.section-head--center { justify-content: center; text-align: center; }
.section-head--center p { margin-left: auto; margin-right: auto; }
.row-arrows { display: flex; gap: 10px; flex: none; }
.row-arrow {
width: 44px;
height: 44px;
border-radius: 50%;
border: 2px solid var(--line-strong);
background: var(--white);
color: var(--ink);
display: grid;
place-items: center;
cursor: pointer;
transition: border-color .15s ease, background .15s ease;
}
.row-arrow:hover:not(:disabled) { border-color: var(--ink); }
.row-arrow:disabled { opacity: .35; cursor: default; }
.row-arrow .icon { width: 20px; height: 20px; }
.row-track {
display: grid;
grid-auto-flow: column;
gap: 20px;
grid-auto-columns: calc((100% - 3 * 20px) / 4);
overflow-x: auto;
scroll-snap-type: x mandatory;
scroll-behavior: smooth;
padding: 4px 4px 18px;
margin: 0 -4px;
scrollbar-width: none;
}
.row-track:focus-visible { outline-offset: -3px; }
.row-track::-webkit-scrollbar { display: none; }
.row-track > * { scroll-snap-align: start; }
.row-track--3 { grid-auto-columns: calc((100% - 2 * 20px) / 3); }
.row-track--2 { grid-auto-columns: calc((100% - 20px) / 2); }
.grid { display: grid; gap: 20px; }
.grid--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.grid--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.grid--4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.card {
position: relative;
overflow: hidden;
display: flex;
flex-direction: column;
transition: transform .2s ease, box-shadow .2s ease;
border: 1px solid rgba(19,60,47,.08);
border-radius: var(--radius);
box-shadow: var(--shadow);
background: rgba(255,255,255,.92);
}
a.card { text-decoration: none; color: inherit; }
a.card:hover, .card--hover:hover { box-shadow: var(--shadow-lift); transform: translateY(-3px); }
.card-media { position: relative; background: var(--paper-alt); overflow: hidden; aspect-ratio: 4 / 3; }
.card-media img { width: 100%; height: 100%; object-fit: cover; transition: transform .65s cubic-bezier(.2,.7,.2,1); }
.card-badge .icon { width: 20px; height: 20px; }
.card-body { display: flex; flex-direction: column; flex: 1; padding: 22px 22px 25px; gap: 13px; }
.card-body h3 { margin: 0; font-size: 1.05rem; font-weight: 700; }
.card-body p { margin: 0; font-size: .92rem; color: var(--ink-soft); }
.card-tags { display: flex; flex-wrap: wrap; gap: 6px; }
.card-foot { margin-top: auto; padding-top: 6px; }
.card-link { font-weight: 600; font-size: .9rem; text-decoration: none; display: inline-flex; align-items: center; gap: 6px; color: var(--pine); }
.card-link:hover { color: var(--pine); }
.bg-elderly { background: var(--gold); color: var(--onyx); }
.bg-children { background: var(--pine-bright); color: var(--white); }
.bg-gbv { background: var(--clay); color: var(--white); }
.bg-youth { background: var(--gold-ink); color: var(--white); }
.bg-community { background: var(--pine-leaf); color: var(--white); }
.bg-dark { background: var(--onyx); color: var(--white); }
/* Icon-led card (no photograph) */
.icon-card { gap: 12px; padding: 28px; }
.icon-card .icon-chip { display: grid; place-items: center; width: 54px; height: 54px; border-radius: 50%; }
.icon-card .icon-chip .icon { width: 24px; height: 24px; }
.icon-card h3 { margin: 0; font-size: 1.02rem; font-weight: 700; }
.icon-card p { margin: 0; font-size: .9rem; color: var(--ink-soft); }
/* ---------------------------------------------------------------------
7. Tiles, story cards, quotes, partners, CTA band
--------------------------------------------------------------------- */
.tile {
position: relative;
display: block;
overflow: hidden;
aspect-ratio: 4 / 5;
background: var(--onyx);
color: var(--white);
text-decoration: none;
border-radius: 26px;
box-shadow: var(--shadow);
}
.tile img { width: 100%; height: 100%; object-fit: cover; transition: transform .5s ease; }
.tile:hover img { transform: scale(1.05); }
.tile::after { content: ""; position: absolute; inset: 0; z-index: 1; background: linear-gradient(0deg, rgba(8,35,26,.92), rgba(8,35,26,.05) 67%); }
.tile-caption { position: absolute; z-index: 2; font-weight: 600; line-height: 1.35; left: 22px; right: 22px; bottom: 22px; font-size: 1rem; }
.tile:hover { color: var(--white); }
.story-card {
position: relative;
border-radius: var(--radius);
overflow: hidden;
min-height: 380px;
display: flex;
align-items: flex-end;
color: var(--white);
box-shadow: var(--shadow);
background: var(--onyx);
}
.story-card > img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
/* The overlay is ::before, which paints before the photograph in source
order, so it needs an explicit z-index to sit above it. */
.story-card::before {
content: "";
position: absolute;
inset: 0;
z-index: 1;
background: linear-gradient(180deg, rgba(15,29,18,.25) 0%, rgba(15,29,18,.82) 45%, rgba(15,29,18,.95) 100%);
}
.story-body { position: relative; z-index: 2; padding: 26px; }
.story-body h3 { color: var(--white); font-size: 1.3rem; font-weight: 700; margin: 0 0 12px; }
.story-body hr { border: 0; border-top: 1px solid rgba(255,255,255,.35); margin: 0 0 12px; }
.story-body p { color: var(--text-on-dark); font-size: .92rem; margin: 0 0 18px; }
.quote-card {
background: var(--white);
border-radius: var(--radius);
box-shadow: var(--shadow);
padding: 30px 28px;
text-align: center;
position: relative;
overflow: hidden;
}
.quote-card .icon { width: 34px; height: 34px; color: var(--gold); margin: 0 auto 12px; display: block; }
.quote-card blockquote { margin: 0 0 16px; line-height: 1.55; color: var(--ink); font-family: var(--font-display); font-size: clamp(1.35rem, 2.2vw, 2rem); }
.quote-card cite { font-style: normal; font-weight: 700; display: block; }
.quote-card small { color: var(--ink-soft); text-transform: uppercase; letter-spacing: .08em; font-size: .8125rem; font-weight: 600; }
.values { display: flex; flex-wrap: wrap; justify-content: center; gap: 10px; margin-top: 26px; padding: 0; }
.values li { list-style: none; }
.partners {
overflow: hidden;
position: relative;
-webkit-mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
}
.partners-track { display: flex; gap: 14px; width: max-content; animation: marquee 40s linear infinite; padding: 6px 0; }
.partners:hover .partners-track { animation-play-state: paused; }
.partner {
display: inline-flex;
align-items: center;
gap: 10px;
white-space: nowrap;
padding: 14px 22px;
border-radius: var(--radius);
background: var(--white);
border: 1px solid var(--line);
font-weight: 600;
color: var(--pine);
}
.partner .icon { color: var(--gold-deep); }
@keyframes marquee {
from { transform: translateX(0); }
to { transform: translateX(-50%); }
}
.cta-band {
position: relative;
overflow: hidden;
color: var(--white);
border-radius: var(--radius-lg);
background: linear-gradient(135deg, var(--pine-dark), var(--pine));
box-shadow: var(--shadow-lift);
}
.cta-band > img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.cta-band::before { content: ""; position: absolute; inset: 0; z-index: 1; background: rgba(15,29,18,.78); }
.cta-band-body { position: relative; z-index: 2; padding: clamp(36px, 6vw, 60px) 24px; text-align: center; }
.cta-band-body h2 { color: var(--white); margin-bottom: 10px; }
.cta-band-body p { color: var(--text-on-dark); max-width: 56ch; margin: 0 auto 22px; }
.cta-band-actions { display: flex; justify-content: center; flex-wrap: wrap; gap: 12px; }
/* ---------------------------------------------------------------------
8. Inner-page band & overlap card
--------------------------------------------------------------------- */
.page-band h1 {
margin: 0 auto 8px;
text-wrap: balance;
font-family: var(--font-display);
font-size: clamp(3rem, 6vw, 5.6rem);
font-weight: 600;
max-width: 13ch;
letter-spacing: -.02em;
color: var(--white);
}
.page-band p { margin: 0 auto; max-width: 60ch; font-size: 1.12rem; color: var(--text-on-dark-soft); }
.crumbs {
display: flex;
justify-content: center;
gap: 8px;
font-weight: 500;
margin-bottom: 12px;
text-transform: uppercase;
letter-spacing: .09em;
font-size: .8125rem;
color: var(--text-on-dark-soft);
}
.crumbs a { color: var(--gold); }
.crumbs span[aria-hidden] { opacity: .6; }
.overlap { position: relative; z-index: 2; margin-top: -70px; }
.overlap-card { border-radius: var(--radius); box-shadow: var(--shadow-lift); padding: clamp(20px, 3vw, 30px); background: var(--cream-card); }
.overlap-card h2 { font-size: 1.15rem; margin-bottom: 14px; }
.fact-row { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 16px; }
.fact { display: flex; align-items: center; gap: 14px; padding: 28px 24px; }
.fact .icon-chip { width: 48px; height: 48px; border-radius: var(--radius-sm); display: grid; place-items: center; flex: none; }
.fact .icon-chip .icon { width: 24px; height: 24px; }
.fact strong { display: block; line-height: 1.2; font-family: var(--font-display); font-size: 1.65rem; }
.fact span { font-size: .82rem; color: var(--ink-soft); }
/* Choice buttons inside an overlap card (donation type, programme, filter) */
.choice-row { display: flex; flex-wrap: wrap; gap: 12px; }
.choice, .tab-btn, .donation-cat-btn {
display: inline-flex;
align-items: center;
gap: 10px;
padding: 12px 18px;
border-radius: var(--radius-sm);
border: 2px solid var(--line-strong);
background: var(--white);
color: var(--ink);
font-family: var(--font);
font-weight: 600;
font-size: .95rem;
cursor: pointer;
transition: all .15s ease;
}
.choice:hover, .tab-btn:hover, .donation-cat-btn:hover { border-color: var(--ink); }
.choice .icon, .tab-btn .icon, .donation-cat-btn .icon { width: 1.25em; height: 1.25em; }
.choice.is-active, .tab-btn.is-active, .donation-cat-btn.is-active { background: var(--onyx); border-color: var(--onyx); color: var(--white); }
/* ---------------------------------------------------------------------
9. Page-specific
--------------------------------------------------------------------- */
/* About */
.split { display: grid; grid-template-columns: 1.05fr .95fr; gap: clamp(40px, 7vw, 88px); align-items: center; }
.split-media { overflow: hidden; aspect-ratio: 4 / 3; border-radius: var(--radius-lg); box-shadow: var(--shadow-lift); animation: float-y-soft 6s ease-in-out infinite alternate; }
.split-media img { width: 100%; height: 100%; object-fit: cover; }
.eyebrow {
display: inline-block;
margin-bottom: 8px;
color: var(--gold-ink);
font-size: .8125rem;
font-weight: 700;
letter-spacing: .13em;
text-transform: uppercase;
}
.lead { font-size: clamp(1.12rem, 2vw, 1.4rem); line-height: 1.65; color: var(--pine); }
.objective { counter-increment: objective; }
.objectives { counter-reset: objective; }
.objective .obj-num { width: 44px; height: 44px; border-radius: 50%; display: grid; place-items: center; background: var(--onyx); color: var(--gold); font-weight: 700; }
.objective .obj-num::before { content: counter(objective, decimal-leading-zero); }
.need-list { list-style: none; padding: 0; margin: 0; display: grid; gap: 12px; }
.need-list li {
display: flex;
gap: 12px;
align-items: flex-start;
background: var(--white);
border-radius: var(--radius);
padding: 14px 16px;
box-shadow: var(--shadow);
}
.need-list .icon { color: var(--pine-bright); margin-top: 3px; }
/* Donate */
.donation-cat-panel { display: none; }
.donation-cat-panel.is-active { display: block; }
.pay-card { background: var(--onyx); color: var(--text-on-dark); border-radius: var(--radius); padding: 26px; }
.pay-card h3 { color: var(--white); display: flex; align-items: center; gap: 10px; }
.pay-card h3 .icon { color: var(--gold); }
.pay-block + .pay-block { margin-top: 20px; padding-top: 20px; border-top: 1px solid rgba(255,255,255,.15); }
.pay-block h4 { color: var(--gold); font-size: .85rem; font-weight: 600; margin-bottom: 10px; }
.pay-rows { display: grid; grid-template-columns: auto 1fr; gap: 6px 16px; margin: 0; font-size: .92rem; }
.pay-rows dt { color: var(--text-on-dark-soft); }
.pay-rows dd { margin: 0; color: var(--white); font-weight: 600; font-variant-numeric: tabular-nums; }
/* White quiet zone around the code: scanners need it on a dark card. */
.pay-qr { display: block; width: 160px; height: 160px; padding: 8px; margin-bottom: 14px; background: var(--white); border-radius: var(--radius-sm); }
.pay-note {
margin-top: 18px;
padding: 12px 14px;
border-radius: var(--radius-sm);
background: rgba(232,184,109,.14);
color: var(--text-on-dark);
font-size: .88rem;
}
/* Volunteer */
.tab-panel { display: none; }
.tab-panel.is-active { display: block; }
.tab-panel-body { display: grid; grid-template-columns: 240px 1fr; gap: 24px; align-items: center; margin-top: 20px; }
.tab-panel-body img { border-radius: var(--radius); aspect-ratio: 4 / 3; object-fit: cover; width: 100%; }
.tab-panel-body h3 { font-size: 1.15rem; }
.role-meta { display: flex; flex-wrap: wrap; gap: 14px; }
.cert-promo {
display: grid;
grid-template-columns: auto 1fr auto;
gap: 22px;
align-items: center;
background: var(--onyx);
color: var(--text-on-dark);
border-radius: var(--radius-lg);
padding: 28px;
}
.cert-promo h2 { color: var(--white); margin-bottom: 6px; }
.cert-promo p { margin: 0; }
.cert-promo .icon-chip { width: 64px; height: 64px; border-radius: 50%; display: grid; place-items: center; background: var(--gold); color: var(--onyx); }
.cert-promo .icon-chip .icon { width: 30px; height: 30px; }
/* Vacancies */
.jobs-filter { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; }
.jobs-filter-label { font-weight: 600; margin-right: 6px; }
.chip {
padding: 8px 16px;
border-radius: 999px;
border: 2px solid var(--line-strong);
background: var(--white);
font-family: var(--font);
font-weight: 600;
font-size: .88rem;
color: var(--ink);
cursor: pointer;
}
.chip { min-height: 40px; }
.chip:hover { border-color: var(--ink); }
.chip.is-active { background: var(--onyx); color: var(--white); border-color: var(--onyx); }
.job-card { padding: 22px; gap: 12px; }
.job-card-top { display: flex; justify-content: space-between; align-items: flex-start; gap: 12px; }
.job-card h3 { margin: 0; font-size: 1.1rem; font-weight: 700; }
.job-card p { margin: 0; color: var(--ink-soft); font-size: .92rem; }
.job-reqs { list-style: none; padding: 0; margin: 0; display: grid; gap: 6px; font-size: .9rem; }
.job-reqs li { display: flex; gap: 8px; }
.job-reqs .icon { color: var(--pine-bright); margin-top: 3px; }
.status-pill { padding: 4px 12px; border-radius: 999px; font-size: .8125rem; font-weight: 700; white-space: nowrap; }
.status-pill.status-open { background: var(--green-tint); color: var(--pine-bright); }
.status-pill.status-closed { background: var(--paper-alt); color: var(--ink); }
.job-card[data-status="closed"] .apply-btn { display: none; }
.jobs-empty { text-align: center; color: var(--ink-soft); padding: 30px 0; }
/* Contact */
.contact-tile { display: flex; gap: 14px; align-items: center; text-decoration: none; color: var(--ink); border-radius: var(--radius-sm); padding: 12px; }
a.contact-tile:hover { background: var(--paper); color: var(--ink); }
.contact-tile .icon-chip { width: 52px; height: 52px; border-radius: 50%; display: grid; place-items: center; flex: none; box-shadow: 0 8px 20px rgba(12,40,31,.1); }
.contact-tile .icon-chip .icon { width: 24px; height: 24px; }
.contact-tile small { display: block; color: var(--ink-soft); font-size: .8125rem; font-weight: 500; }
.contact-tile strong { font-weight: 600; overflow-wrap: anywhere; }
.contact-tiles { grid-template-columns: repeat(2, minmax(0, 1fr)); }
@media (max-width: 640px) { .contact-tiles { grid-template-columns: 1fr; } }
/* Gallery */
.album + .album { margin-top: clamp(40px, 6vw, 64px); }
.album-head { display: flex; flex-wrap: wrap; align-items: baseline; gap: 10px 16px; margin-bottom: 8px; }
.album-head h2 { margin: 0; }
.album > p { color: var(--ink-soft); max-width: 70ch; margin-bottom: 18px; }
.album-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); grid-auto-rows: clamp(150px, 17vw, 230px); gap: 18px; }
.album-grid .tile { aspect-ratio: auto; height: 100%; cursor: zoom-in; border: 0; padding: 0; width: 100%; font-family: var(--font); text-align: left; }
.album-grid .tile--wide { grid-column: span 2; }
.jump-links { display: grid; grid-template-columns: repeat(auto-fill, minmax(250px, 1fr)); gap: 12px; }
.album-link {
display: flex;
align-items: center;
gap: 14px;
padding: 8px 14px 8px 8px;
background: var(--white);
border: 1px solid var(--line);
border-radius: var(--radius);
color: var(--ink);
text-decoration: none;
transition: border-color .2s ease, box-shadow .2s ease, transform .2s ease;
}
.album-link:hover { border-color: rgba(187,125,35,.55); box-shadow: 0 10px 24px rgba(12,40,31,.10); transform: translateY(-2px); }
.album-link:focus-visible { outline: 3px solid var(--gold); outline-offset: 2px; }
.album-link__cover { flex: none; width: 60px; height: 60px; border-radius: var(--radius-sm); object-fit: cover; }
.album-link__text { display: grid; gap: 2px; min-width: 0; flex: 1; }
.album-link__title { font-weight: 600; font-size: .92rem; line-height: 1.3; }
.album-link__meta { font-size: .8125rem; color: var(--ink-soft); }
.album-link__arrow { flex: none; width: 18px; height: 18px; color: var(--gold-deep); transition: transform .2s ease; }
.album-link:hover .album-link__arrow { transform: translateX(3px); }
.overlap .overlap-card h2.jump-title { margin: 0 0 16px; font-family: var(--font); font-size: .8125rem; font-weight: 700; letter-spacing: .13em; text-transform: uppercase; color: var(--gold-ink); }
/* ---------------------------------------------------------------------
10. Forms, status, modals, lightbox, chat
--------------------------------------------------------------------- */
.form-card { border-radius: var(--radius); box-shadow: var(--shadow); padding: clamp(26px, 4vw, 40px); background: rgba(255,255,255,.94); }
.form-card h2, .form-card h3 { margin-bottom: 6px; font-family: var(--font-display); }
.form-card > p { color: var(--ink-soft); }
.field { display: flex; flex-direction: column; gap: 6px; margin-bottom: 14px; }
.field--checkbox { flex-direction: row; align-items: center; gap: 10px; }
.field--checkbox input { width: auto; }
.field > span { font-size: .85rem; font-weight: 600; color: var(--ink); }
.field > span em { font-style: normal; color: var(--clay); }
.field-row { display: grid; grid-template-columns: 1fr 1fr; gap: 0 14px; }
.field-hint { font-size: .8125rem; color: var(--ink-soft); }
input[type="file"] { padding: 9px 10px; background: var(--paper); }
textarea { resize: vertical; min-height: 110px; }
input:focus, select:focus, textarea:focus { outline: none; border-color: var(--gold-deep); box-shadow: 0 0 0 4px var(--gold-tint); }
.form-status { margin: 12px 0 0; padding: 12px 14px; border-radius: var(--radius-sm); font-size: .9rem; font-weight: 500; }
.form-status.ok { background: var(--green-tint); color: var(--pine-bright); }
.form-status.err { background: var(--clay-tint); color: var(--clay); }
.panel-lede { color: var(--ink-soft); font-size: .92rem; }
.beneficiary-id-form { display: flex; align-items: end; flex-wrap: wrap; gap: 12px; padding: 8px 0; }
.beneficiary-id-form label { display: flex; flex: 1 1 190px; flex-direction: column; gap: 6px; }
.beneficiary-id-consent { flex: 0 1 auto !important; flex-direction: row; align-items: center; }
.beneficiary-id-form input[type="checkbox"] { width: auto; }
/* Modal */
.apply-modal { position: fixed; inset: 0; z-index: 400; background: rgba(15,29,18,.7); display: none; align-items: center; justify-content: center; padding: 20px; }
.apply-modal.is-open { display: flex; }
.apply-modal-card {
position: relative;
background: var(--white);
border-radius: var(--radius-lg);
width: min(560px, 100%);
max-height: calc(100vh - 40px);
overflow-y: auto;
padding: 30px;
box-shadow: var(--shadow-lift);
}
.apply-modal-card h3 { font-size: 1.3rem; font-weight: 700; padding-right: 40px; }
.apply-modal-close {
position: absolute;
top: 16px;
right: 16px;
width: 38px;
height: 38px;
border-radius: 50%;
border: 0;
background: var(--paper);
color: var(--ink);
font-size: 1.5rem;
line-height: 1;
cursor: pointer;
}
.apply-modal-close:hover { background: var(--paper-alt); }
/* Lightbox */
.lightbox {
position: fixed;
inset: 0;
z-index: 500;
background: rgba(15,29,18,.94);
display: none;
flex-direction: column;
align-items: center;
justify-content: center;
padding: 24px;
gap: 14px;
}
.lightbox.is-open { display: flex; }
.lightbox img { max-width: min(1100px, 100%); max-height: 78vh; object-fit: contain; border-radius: var(--radius-sm); }
.lightbox-caption { color: var(--text-on-dark); font-weight: 500; text-align: center; }
.lightbox-close {
position: absolute;
top: 18px;
right: 18px;
width: 46px;
height: 46px;
border-radius: 50%;
border: 2px solid rgba(255,255,255,.6);
background: transparent;
color: var(--white);
font-size: 1.7rem;
cursor: pointer;
}
/* Chat */
.chat-widget { position: fixed; right: 22px; bottom: 22px; z-index: 300; }
.chat-launcher {
border-radius: 50%;
cursor: pointer;
color: var(--onyx);
display: grid;
place-items: center;
box-shadow: 0 8px 24px rgba(15,29,18,.3);
transition: transform .15s ease, scale .15s ease;
width: 62px;
height: 62px;
background: var(--gold);
border: 5px solid #fffdf8;
}
.chat-launcher:hover { scale: 1.06; }
.chat-launcher .icon { width: 26px; height: 26px; }
.chat-icon-close { display: none; }
.chat-widget.is-open .chat-icon-open { display: none; }
.chat-widget.is-open .chat-icon-close { display: block; }
.chat-panel {
position: absolute;
right: 0;
bottom: 76px;
width: min(360px, calc(100vw - 44px));
background: var(--white);
border-radius: var(--radius-lg);
box-shadow: var(--shadow-lift);
overflow: hidden;
display: none;
flex-direction: column;
}
.chat-widget.is-open .chat-panel { display: flex; }
.chat-panel-head { display: flex; align-items: center; gap: 12px; background: var(--onyx); color: var(--white); padding: 14px 16px; }
.chat-panel-head img { width: 40px; height: 40px; object-fit: contain; background: var(--white); border-radius: 50%; padding: 3px; }
.chat-panel-head strong { display: block; font-size: .95rem; }
.chat-panel-head span { font-size: .8125rem; color: var(--text-on-dark-soft); }
.chat-panel-body { padding: 16px; display: flex; flex-direction: column; gap: 10px; max-height: 320px; overflow-y: auto; overscroll-behavior: contain; background: var(--paper); }
.chat-bubble {
align-self: flex-start;
background: var(--white);
border-radius: 14px 14px 14px 4px;
padding: 10px 14px;
font-size: .9rem;
max-width: 85%;
box-shadow: 0 2px 6px rgba(0,0,0,.05);
}
.chat-bubble--user { align-self: flex-end; background: var(--onyx); color: var(--white); border-radius: 14px 14px 4px 14px; }
/* The assistant's own two states: thinking, and something went wrong. */
.chat-bubble--error { background: var(--clay-tint); border: 1px solid var(--clay); color: var(--ink); }
.chat-bubble--typing { display: flex; gap: 4px; align-items: center; padding: 12px 14px; }
.chat-bubble--typing span {
width: 6px; height: 6px; border-radius: 50%; background: var(--ink-soft);
animation: chat-typing 1.2s ease-in-out infinite;
}
.chat-bubble--typing span:nth-child(2) { animation-delay: .18s; }
.chat-bubble--typing span:nth-child(3) { animation-delay: .36s; }
@keyframes chat-typing {
0%, 60%, 100% { opacity: .25; transform: translateY(0); }
30% { opacity: 1; transform: translateY(-3px); }
}
.chat-panel-form input:disabled, .chat-panel-form button:disabled { opacity: .55; cursor: progress; }
.chat-quick-replies { display: flex; flex-wrap: wrap; gap: 8px; padding: 12px 16px; border-top: 1px solid var(--line); }
.chat-quick-replies button {
font-family: var(--font);
font-size: .8rem;
font-weight: 600;
padding: 7px 12px;
border-radius: 999px;
border: 2px solid var(--line-strong);
background: var(--white);
color: var(--ink);
cursor: pointer;
}
.chat-quick-replies button:hover { border-color: var(--ink); }
.chat-panel-form { display: flex; gap: 8px; padding: 12px 16px; border-top: 1px solid var(--line); }
.chat-panel-form input { flex: 1; padding: 9px 12px; }
.chat-panel-form button {
width: 42px;
border: 0;
border-radius: var(--radius-sm);
background: var(--gold);
color: var(--onyx);
cursor: pointer;
display: grid;
place-items: center;
}
/* ---------------------------------------------------------------------
11. Footer
--------------------------------------------------------------------- */
.site-footer { margin-top: 96px; background: linear-gradient(180deg, transparent 0, transparent 80px, var(--onyx) 80px); }
.news-band {
color: var(--onyx);
padding: clamp(24px, 4vw, 34px);
text-align: center;
position: relative;
z-index: 1;
box-shadow: var(--shadow-lift);
background: linear-gradient(120deg, #efd08b, var(--gold));
border-radius: var(--radius-lg);
padding-block: clamp(32px, 5vw, 50px);
}
.news-band h2 { color: var(--onyx); margin-bottom: 6px; font-family: var(--font-display); font-size: clamp(2rem, 4vw, 3.2rem); }
.news-band p { margin: 0 0 18px; }
.news-form { display: flex; flex-wrap: wrap; justify-content: center; gap: 10px; max-width: 560px; margin: 0 auto; }
.news-form input { flex: 1 1 260px; border-color: transparent; }
.news-form .form-status { flex-basis: 100%; margin-top: 2px; }
.news-form .form-status.ok { background: var(--white); }
.footer-main { background: var(--onyx); color: var(--text-on-dark-soft); padding: 44px 0 0; padding-top: 58px; }
.footer-brand {
display: flex;
flex-direction: column;
align-items: center;
gap: 6px;
text-align: center;
padding-bottom: 26px;
border-bottom: 1px solid rgba(255,255,255,.12);
}
.footer-brand img { width: 74px; height: 74px; object-fit: contain; }
.footer-brand strong { color: var(--white); font-family: var(--font-display); font-size: 1.55rem; }
.footer-brand span { color: var(--gold); font-size: .85rem; font-weight: 600; }
.footer-contact { display: flex; flex-wrap: wrap; justify-content: center; gap: 18px 26px; padding: 24px 0; border-bottom: 1px solid rgba(255,255,255,.12); }
.footer-contact a, .footer-contact div { display: flex; align-items: center; gap: 12px; color: var(--text-on-dark-soft); text-decoration: none; font-size: .85rem; }
.footer-contact a:hover { color: var(--white); }
.footer-contact .ring { width: 42px; height: 42px; border-radius: 50%; border: 2px solid var(--gold); color: var(--gold); display: grid; place-items: center; flex: none; }
.footer-contact small { display: block; font-size: .8125rem; color: var(--text-on-dark-soft); }
.footer-contact strong { color: var(--white); font-weight: 600; }
.footer-cols { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 28px; padding: 32px 0; }
.footer-cols h3 { color: var(--white); font-size: .95rem; font-weight: 600; margin-bottom: 12px; }
.footer-cols ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.footer-cols a { color: var(--text-on-dark-soft); text-decoration: none; font-size: .88rem; }
.footer-cols a:hover { color: var(--gold); }
.footer-cols li { font-size: .88rem; }
.footer-legal { border-top: 1px solid rgba(255,255,255,.12); padding: 18px 0 26px; font-size: .8125rem; }
.footer-legal .container { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 10px; }
.footer-legal a { color: var(--text-on-dark-soft); }
.footer-legal a:hover { color: var(--white); }
/* ---------------------------------------------------------------------
12. Certificate & password reset
--------------------------------------------------------------------- */
.cert-page { background: var(--paper); min-height: 100vh; }
.cert-toolbar { max-width: 960px; margin: 0 auto; padding: 20px 24px; display: flex; justify-content: space-between; align-items: center; gap: 12px; flex-wrap: wrap; }
.cert-wrap { max-width: 960px; margin: 0 auto 60px; padding: 0 24px; }
.certificate {
position: relative;
overflow: hidden;
background: var(--white);
border-radius: var(--radius-lg);
box-shadow: var(--shadow-lift);
padding: 0 0 48px;
text-align: center;
}
.cert-top { background: var(--onyx); color: var(--white); padding: 28px 24px 26px; border-bottom: 6px solid var(--gold); }
.cert-top img { width: 84px; height: 84px; object-fit: contain; margin: 0 auto 8px; background: var(--white); border-radius: 50%; padding: 6px; }
.cert-org { font-weight: 700; font-size: 1.1rem; }
.cert-kicker { display: inline-block; margin: 34px 0 10px; }
.certificate h1 { font-size: clamp(1.6rem, 3.6vw, 2.3rem); margin: 0 24px 24px; }
.cert-line { color: var(--ink-soft); margin-bottom: 6px; }
.cert-name {
display: inline-block;
font-size: clamp(1.8rem, 4vw, 2.5rem);
font-weight: 700;
color: var(--pine);
padding: 0 20px 8px;
border-bottom: 4px solid var(--gold);
margin: 6px 0 22px;
}
.cert-body { max-width: 580px; margin: 0 auto 28px; padding: 0 24px; line-height: 1.7; }
.cert-meta { display: flex; justify-content: center; flex-wrap: wrap; gap: 14px; margin: 0 24px 34px; }
.cert-meta > div { background: var(--paper); border-radius: var(--radius); padding: 12px 22px; min-width: 150px; }
.cert-meta-label { font-size: .8125rem; font-weight: 600; color: var(--ink-soft); }
.cert-meta-value { font-weight: 700; }
.cert-sign-row { display: flex; justify-content: center; gap: 40px; flex-wrap: wrap; padding: 0 24px; }
.cert-sign { min-width: 220px; }
.cert-sign-line { border-top: 2px solid var(--ink); padding-top: 8px; font-weight: 600; }
.cert-sign small { color: var(--ink-soft); font-size: .8125rem; }
.cert-no { margin-top: 30px; font-size: .8125rem; color: var(--ink-soft); }
.cert-watermark { position: absolute; right: -60px; bottom: -60px; width: 300px; opacity: .06; pointer-events: none; }
@media print {
.cert-page { background: var(--white); }
.cert-toolbar { display: none; }
.cert-wrap { max-width: none; margin: 0; padding: 0; }
.certificate { box-shadow: none; border: 1px solid var(--line-strong); }
.certificate, .cert-top { -webkit-print-color-adjust: exact; print-color-adjust: exact; }
}
.auth-page { min-height: 100vh; display: grid; place-items: center; padding: 24px; background: var(--paper); }
.auth-card { width: min(440px, 100%); background: var(--white); border-radius: var(--radius-lg); box-shadow: var(--shadow-lift); overflow: hidden; }
.auth-card-top { background: var(--onyx); padding: 22px; display: flex; align-items: center; gap: 12px; color: var(--white); border-bottom: 5px solid var(--gold); }
.auth-card-top img { width: 48px; height: 48px; background: var(--white); border-radius: 50%; padding: 4px; object-fit: contain; }
.auth-card-top strong { display: block; }
.auth-card-top span { font-size: .8rem; color: var(--text-on-dark-soft); }
.auth-card-body { padding: 28px; }
.auth-card-body h1 { font-size: 1.5rem; }
.auth-message { margin-top: 14px; font-weight: 500; }
.auth-message:empty { display: none; }
/* ---------------------------------------------------------------------
13. Admin dashboard
--------------------------------------------------------------------- */
.admin-login-screen {
min-height: 100vh;
display: flex;
align-items: center;
justify-content: center;
padding: 24px;
background: linear-gradient(90deg, rgba(15,29,18,.9), rgba(15,29,18,.55)), url("assets/img/gallery-29.webp") center / cover no-repeat;
}
.admin-login-card { width: min(420px, 100%); background: var(--white); border-radius: var(--radius-lg); box-shadow: var(--shadow-lift); padding: 32px; text-align: left; }
.admin-login-logo { width: 64px; height: 64px; margin-bottom: 14px; }
.admin-login-logo img { width: 100%; height: 100%; object-fit: contain; }
.admin-login-card h1 { font-size: 1.5rem; margin: 0; }
.admin-login-card > p { color: var(--ink-soft); font-size: .9rem; margin: 2px 0 20px; }
.admin-login-error {
display: none;
align-items: center;
gap: 10px;
background: var(--clay-tint);
color: var(--clay);
padding: 12px 14px;
border-radius: var(--radius-sm);
font-size: .88rem;
font-weight: 500;
margin-bottom: 16px;
}
.admin-login-error.is-visible { display: flex; }
.admin-forgot-link { text-align: right; margin: 12px 0 0; font-size: .85rem; }
.admin-login-hint { font-size: .8rem; color: var(--ink-soft); margin: 18px 0 0; }
.admin-login-back { margin: 14px 0 0; font-size: .85rem; }
.admin-login-back a { text-decoration: none; display: inline-flex; align-items: center; gap: 6px; }
.admin-shell { display: grid; grid-template-columns: 272px 1fr; min-height: 100vh; background: var(--paper); }
.admin-sidebar {
position: sticky;
top: 0;
height: 100vh;
overflow-y: auto;
border-right: 1px solid var(--line);
display: flex;
flex-direction: column;
padding: 0 14px 18px;
background: #fffdf8;
}
.admin-sidebar .brand {
padding: 18px 8px;
margin: 0 -14px 10px;
padding-left: 22px;
border-bottom: 4px solid var(--gold);
background: linear-gradient(135deg, var(--pine-dark), var(--pine));
}
.admin-sidebar .brand-name { color: var(--white); font-size: 1.05rem; }
.admin-sidebar .brand-tag { color: var(--gold); }
.admin-sidebar .brand-mark { width: 42px; height: 42px; background: var(--white); border-radius: 50%; padding: 3px; }
.admin-nav-section-label { font-size: .8125rem; font-weight: 600; color: var(--ink-soft); margin: 18px 10px 8px; }
.admin-nav-link {
display: flex;
align-items: center;
gap: 12px;
width: 100%;
text-align: left;
font-family: var(--font);
font-size: .93rem;
font-weight: 500;
color: var(--ink);
background: transparent;
border: 0;
border-radius: var(--radius-sm);
padding: 8px 10px;
cursor: pointer;
margin-bottom: 2px;
}
.admin-nav-link .icon--btn {
margin: 0;
width: 34px;
height: 34px;
padding: 7px;
flex: none;
border-radius: 50%;
box-shadow: inset 0 0 0 1px rgba(255,255,255,.2);
background: transparent !important;
color: var(--pine) !important;
border: 1px solid var(--line);
}
.admin-nav-link[data-panel="overview"] .icon--btn { background: var(--gold); color: var(--onyx); }
.admin-nav-link[data-panel="volunteers"] .icon--btn { background: var(--pine-bright); color: var(--white); }
.admin-nav-link[data-panel="beneficiaries"] .icon--btn { background: var(--clay); color: var(--white); }
.admin-nav-link[data-panel="donations"] .icon--btn { background: var(--gold-deep); color: var(--onyx); }
.admin-nav-link[data-panel="vacancies"] .icon--btn { background: var(--onyx); color: var(--white); }
/* White on the lighter --pine-light is only 3.87:1; the darker leaf green is 4.86:1. */
.admin-nav-link[data-panel="content"] .icon--btn { background: var(--pine-leaf); color: var(--white); }
.admin-nav-link:hover { background: var(--paper); }
.admin-nav-link.is-active { background: var(--paper-alt); font-weight: 700; box-shadow: inset 4px 0 0 var(--gold-deep); }
.admin-nav-badge { margin-left: auto; background: var(--clay); color: var(--white); font-size: .8125rem; font-weight: 700; border-radius: 999px; padding: 2px 8px; }
.admin-sidebar-footer { margin-top: auto; padding-top: 16px; border-top: 1px solid var(--line); }
.admin-user-row { display: flex; align-items: center; gap: 10px; margin-bottom: 12px; padding: 0 6px; }
.admin-user-avatar { width: 40px; height: 40px; border-radius: 50%; background: var(--gold); color: var(--onyx); font-weight: 700; display: grid; place-items: center; }
.admin-user-name { font-weight: 600; font-size: .9rem; }
.admin-user-role { font-size: .8125rem; color: var(--ink-soft); }
.admin-logout-btn {
width: 100%;
display: flex;
align-items: center;
justify-content: center;
gap: 8px;
font-family: var(--font);
font-weight: 600;
font-size: .9rem;
padding: 10px;
border-radius: var(--radius-sm);
background: var(--white);
color: var(--clay);
border: 2px solid var(--clay-tint);
cursor: pointer;
}
.admin-logout-btn .icon--btn { margin: 0; }
.admin-logout-btn:hover { background: var(--clay-tint); }
.admin-nav-toggle {
display: none;
position: fixed;
top: 14px;
left: 14px;
z-index: 220;
width: 46px;
height: 46px;
border-radius: var(--radius-sm);
border: 0;
background: var(--onyx);
color: var(--white);
cursor: pointer;
align-items: center;
justify-content: center;
}
.admin-main { padding: 26px clamp(16px, 3vw, 34px) 60px; min-width: 0; background: linear-gradient(145deg, #f6f0e6, #eee6d8); }
.admin-topbar {
display: flex;
align-items: center;
justify-content: space-between;
gap: 16px;
flex-wrap: wrap;
background: var(--white);
border-radius: var(--radius);
box-shadow: var(--shadow);
padding: 18px 22px;
margin-bottom: 22px;
}
.admin-topbar h1 { font-size: 1.5rem; margin: 0; }
.admin-topbar-date { margin: 2px 0 0; color: var(--ink-soft); font-size: .88rem; }
.admin-stat-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 16px; margin-bottom: 22px; }
.admin-stat-card { position: relative; background: var(--white); border-radius: var(--radius); box-shadow: var(--shadow); padding: 22px 20px 18px; overflow: hidden; }
.admin-stat-card::before { content: ""; position: absolute; left: 0; top: 0; right: 0; height: 5px; background: var(--gold); }
.admin-stat-card:nth-child(2)::before { background: var(--pine-bright); }
.admin-stat-card:nth-child(3)::before { background: var(--gold-deep); }
.admin-stat-card:nth-child(4)::before { background: var(--clay); }
.admin-stat-card .num { font-size: 1.9rem; font-weight: 700; line-height: 1.1; color: var(--ink); }
.admin-stat-card .label { font-size: .85rem; color: var(--ink-soft); margin-top: 4px; }
.admin-panel { background: var(--white); border-radius: var(--radius); box-shadow: var(--shadow); padding: 20px 22px; margin-bottom: 20px; }
.admin-panel-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; margin-bottom: 14px; }
.admin-panel-head h2 { font-size: 1.12rem; margin: 0; }
.admin-table-wrap { overflow-x: auto; border: 1px solid var(--line); border-radius: var(--radius-sm); }
.admin-table { width: 100%; border-collapse: collapse; font-size: .9rem; min-width: 560px; }
.admin-table th {
text-align: left;
font-size: .8125rem;
font-weight: 600;
color: var(--ink-soft);
background: var(--cream-card);
padding: 11px 14px;
border-bottom: 1px solid var(--line);
white-space: nowrap;
}
.admin-table td { padding: 12px 14px; border-bottom: 1px solid var(--line); vertical-align: middle; }
.admin-table tbody tr:last-child td { border-bottom: 0; }
.admin-table tbody tr:hover td { background: var(--paper); }
.admin-badge {
display: inline-flex;
align-items: center;
padding: 4px 11px;
border-radius: 999px;
font-size: .8125rem;
font-weight: 600;
white-space: nowrap;
background: var(--gold-tint);
color: var(--onyx);
}
.admin-badge--open { background: var(--green-tint); color: var(--pine-bright); }
.admin-badge--pending { background: var(--gold-tint); color: var(--onyx); }
.admin-row-action {
display: inline-flex;
align-items: center;
gap: 4px;
font-family: var(--font);
font-size: .8rem;
font-weight: 600;
padding: 6px 12px;
margin: 2px 6px 2px 0;
border-radius: 999px;
cursor: pointer;
background: var(--white);
color: var(--pine-bright);
border: 2px solid var(--green-tint);
}
.admin-row-action .icon--btn { margin-right: 2px; width: 1em; height: 1em; }
.admin-row-action:hover { background: var(--green-tint); }
.admin-row-action--danger { color: var(--clay); border-color: var(--clay-tint); }
.admin-row-action--danger:hover { background: var(--clay-tint); }
.admin-gallery-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 12px; }
.admin-gallery-item { position: relative; aspect-ratio: 1 / 1; border-radius: var(--radius); overflow: hidden; box-shadow: var(--shadow); transition: opacity .2s ease; }
.admin-gallery-item img { width: 100%; height: 100%; object-fit: cover; }
.admin-gallery-item.is-removed { opacity: .35; }
.admin-gallery-remove {
position: absolute;
top: 8px;
right: 8px;
width: 32px;
height: 32px;
border-radius: 50%;
border: 0;
background: var(--clay);
color: var(--white);
font-size: 1.2rem;
line-height: 1;
cursor: pointer;
box-shadow: 0 2px 8px rgba(0,0,0,.25);
}
.admin-update-card { border: 1px solid var(--line); border-radius: var(--radius); padding: 16px 18px; margin-bottom: 12px; background: var(--cream-card); }
.admin-update-head { display: flex; justify-content: space-between; align-items: center; gap: 10px; margin-bottom: 8px; }
.admin-update-card h3 { margin: 0 0 4px; font-size: 1rem; }
.admin-update-card p { margin: 0; color: var(--ink-soft); font-size: .9rem; }
/* ---------------------------------------------------------------------
14. Motion & responsive
--------------------------------------------------------------------- */
.reveal {
opacity: 0;
transform: translateY(28px);
transition: opacity .7s var(--ease-out), transform .7s var(--ease-out);
transition-delay: var(--reveal-delay, 0ms);
}
.reveal.is-visible { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) {
html { scroll-behavior: auto; }
*, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; }
.reveal { opacity: 1; transform: none; }
.partners-track { animation: none; flex-wrap: wrap; width: auto; justify-content: center; }
}
@media (max-width: 1180px) {
.row-track { grid-auto-columns: calc((100% - 2 * 20px) / 3); }
.nav-toggle { display: inline-flex; }
.navbar .container { position: relative; }
.main-nav.is-open { display: flex; }
.main-nav a[aria-current="page"] { background: var(--green-tint); box-shadow: none; }
.main-nav .nav-mobile-only { display: flex; }
}
@media (max-width: 980px) {
/* Phones and tablets are tapped, not clicked. Footer links are read as a
list but hit with a thumb, so give each one a full-height target
instead of the 18px the text alone occupies. */
.footer-cols ul { gap: 0; }
.footer-cols a { display: inline-flex; align-items: center; min-height: 40px; }
.topbar-info .topbar-hide-md { display: none; }
.row-track, .row-track--3 { grid-auto-columns: calc((100% - 20px) / 2); }
.grid--4, .fact-row { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.grid--3 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.split { grid-template-columns: 1fr; }
.album-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.footer-cols { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.cert-promo { grid-template-columns: auto 1fr; }
.cert-promo .btn { grid-column: 1 / -1; justify-self: start; }
.admin-shell { grid-template-columns: 1fr; }
.admin-nav-toggle { display: inline-flex; }
.admin-sidebar {
position: fixed;
left: 0;
top: 0;
bottom: 0;
width: 280px;
z-index: 210;
transform: translateX(-100%);
transition: transform .25s ease;
box-shadow: var(--shadow-lift);
}
.admin-sidebar.is-open { transform: none; }
.admin-main { padding-top: 74px; }
.admin-stat-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.navbar .container { min-height: 76px; }
.hero-title { font-size: clamp(3.2rem, 9vw, 5.2rem); }
.fact { padding: 22px 18px; }
.impact-link { grid-column: 1 / -1; }
}
@media (max-width: 640px) {
.topbar .container { flex-wrap: wrap; }
.topbar-links { flex: 1 1 100%; min-width: 0; flex-wrap: wrap; justify-content: flex-end; }
.topbar-links a:not(.topbar-cta) { display: none; }
.topbar-info { font-size: .8125rem; gap: 10px; }
.brand-name { font-size: 1.05rem; }
:root { --navbar-h: 66px; --gutter: 20px; }
.hero-content { align-items: flex-end; }
.hero-actions { display: grid; grid-template-columns: 1fr 1fr; gap: 9px; }
/* Let the heading and its button stack on phones; without wrapping, the
button ("View the gallery", carousel arrows) pushed past the screen
edge and the whole page scrolled sideways. */
.section-head { align-items: flex-start; flex-wrap: wrap; margin-bottom: 28px; }
.row-track, .row-track--3, .row-track--2 { grid-auto-columns: 88%; gap: 15px; }
.grid--2, .grid--3, .grid--4, .fact-row { grid-template-columns: 1fr; }
.field-row { grid-template-columns: 1fr; }
.album-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
.album-grid .tile--wide { grid-column: span 2; }
.tab-panel-body { grid-template-columns: 1fr; }
.news-form { flex-direction: column; }
.footer-cols { gap: 22px; grid-template-columns: 1fr; }
.cert-promo { grid-template-columns: 1fr; text-align: left; }
.job-card-top { flex-direction: column; }
.chat-widget { right: 14px; bottom: 14px; }
.accessibility-toggle { left: 14px; bottom: 14px; }
.accessibility-panel { left: 14px; bottom: 68px; width: calc(100vw - 28px); max-height: calc(100vh - 84px); }
body:has(.admin-shell) .accessibility-toggle { left: 14px; right: auto; bottom: 14px; }
body:has(.admin-shell) .accessibility-panel { left: auto; right: 14px; bottom: 68px; }
.admin-stat-grid { grid-template-columns: 1fr 1fr; }
.admin-stat-card .num { font-size: 1.5rem; }
.topbar .container { min-height: 38px; }
.brand-tag { font-size: .75rem; }
.hero-content .container { padding-top: 44px; padding-bottom: 100px; }
.hero-blurb { font-size: .96rem; line-height: 1.6; }
.page-band h1 { font-size: clamp(2.9rem, 13vw, 4.2rem); }
.overlap { margin-top: -58px; }
.fact-row { gap: 0; }
.fact + .fact { border-top: 1px solid var(--line); }
.donation-cat-tabs { border-radius: 22px; }
.site-footer { margin-top: 70px; }
.footer-contact { justify-content: flex-start; }
.footer-contact a, .footer-contact div { width: 100%; }
}
/* =====================================================================
15. Page sections
---------------------------------------------------------------------
Refinements for specific parts of the public pages: display headings,
header details, hero, impact strip, photo-led cards and the admin
surfaces. They build on the base components above, so they sit after
them in the cascade; the two media blocks at the end of this section
are their responsive rules.
===================================================================== */
body:not(.cert-page):not(.auth-page):not(:has(.admin-shell)):not(:has(.admin-login-screen)) main { overflow: hidden; }
body:not(:has(.admin-shell)):not(:has(.admin-login-screen)) h1,
body:not(:has(.admin-shell)):not(:has(.admin-login-screen)) h2 { font-family: var(--font-display); letter-spacing: -.025em; line-height: 1.08; }
body:not(:has(.admin-shell)):not(:has(.admin-login-screen)) h2 { font-size: clamp(2rem, 4vw, 3.35rem); }
.topbar-info, .topbar-links { letter-spacing: .01em; }
.topbar-cta { border-radius: 0; padding-inline: 22px; }
.topbar-cta--donate { background: var(--gold); }
.topbar-cta--help { background: var(--clay); }
.brand-mark { flex: none; display: grid; place-items: center; width: 54px; height: 54px; padding: 3px; }
.brand-name { font-weight: 700; color: var(--pine); font-family: var(--font-display); font-size: 1.35rem; letter-spacing: -.02em; }
.hero-slides { position: relative; min-height: clamp(650px, 76vh, 820px); }
.hero-slide::after {
content: "";
position: absolute;
inset: 0;
background: linear-gradient(90deg, rgba(8,35,26,.93) 0%, rgba(8,35,26,.72) 43%, rgba(8,35,26,.12) 78%),
linear-gradient(0deg, rgba(8,35,26,.55), transparent 45%);
}
.hero-actions .action-btn--goods,
.hero-actions .action-btn--help { display: none; }
.action-btn, .btn { border-radius: var(--radius-sm); box-shadow: none; font-weight: 700; letter-spacing: -.01em; }
.action-btn--volunteer, .action-btn--money { box-shadow: 0 10px 28px rgba(0,0,0,.16); }
.action-btn--goods:hover { color: var(--white); }
.impact-strip { position: relative; z-index: 5; margin-top: -1px; background: var(--gold); }
.impact-strip__inner { min-height: 132px; display: grid; grid-template-columns: minmax(250px, 1.5fr) repeat(3, minmax(125px, .7fr)) auto; align-items: center; gap: 26px; }
.impact-intro { padding-right: 24px; border-right: 1px solid rgba(12,40,31,.2); }
.impact-intro .eyebrow { color: var(--pine); }
.impact-intro p { margin: 5px 0 0; line-height: 1.45; }
.impact-stat { display: grid; gap: 1px; }
.impact-stat strong { font-family: var(--font-display); font-size: 2rem; line-height: 1; color: var(--pine-dark); }
.impact-stat span { font-size: .8125rem; font-weight: 600; color: rgba(12,40,31,.72); }
.impact-link { color: var(--pine-dark); font-weight: 700; text-decoration: none; white-space: nowrap; }
.impact-link span { display: inline-block; margin-left: 6px; transition: transform .2s ease; }
.impact-link:hover { color: var(--pine); }
.impact-link:hover span { transform: translateX(4px); }
.section { position: relative; padding: clamp(72px, 9vw, 124px) 0; }
.card:hover .card-media img { transform: scale(1.03); }
.card-body h3, .icon-card h3 { font-family: var(--font-display); font-size: 1.35rem; }
.card-link .icon { transition: transform .2s ease; }
.card-link:hover .icon { transform: translateX(4px); }
/* Photo-led content cards: real programme imagery carries the story while
icons remain reserved for small functional controls. */
#servicesTrack .icon-card {
min-height: 330px;
justify-content: flex-end;
isolation: isolate;
background-position: center;
background-size: cover;
color: var(--white);
border: 0;
overflow: hidden;
}
#servicesTrack .icon-card::before {
content: "";
position: absolute;
inset: 0;
z-index: -1;
background: linear-gradient(0deg, rgba(8,35,26,.94) 0%, rgba(8,35,26,.48) 60%, rgba(8,35,26,.08) 100%);
}
#servicesTrack .icon-chip { display: none; }
/* Card photos are real ![]()
elements (lazy-loaded, editable in the HTML)
laid under the text; the ::before gradient keeps the text readable. */
.card-photo { display: none; }
#servicesTrack .card-photo,
section[aria-labelledby="funding-title"] .card-photo { display: block; position: absolute; inset: 0; z-index: -2; width: 100%; height: 100%; object-fit: cover; }
#roles .card-photo { display: block; position: absolute; top: 0; left: 0; right: 0; width: 100%; height: 146px; object-fit: cover; }
#servicesTrack .icon-card h3 { color: var(--white); font-size: 1.65rem; }
#servicesTrack .icon-card p { color: rgba(255,255,255,.82); }
#funding-title + p { max-width: 46ch; }
#funding-title ~ * { position: relative; }
section[aria-labelledby="funding-title"] .icon-card { min-height: 300px; justify-content: flex-end; isolation: isolate; background-position: center; background-size: cover; border: 0; overflow: hidden; }
section[aria-labelledby="funding-title"] .icon-card::before { content: ""; position: absolute; inset: 0; z-index: -1; background: linear-gradient(0deg, rgba(8,35,26,.95), rgba(8,35,26,.12) 78%); }
section[aria-labelledby="funding-title"] .icon-chip { display: none; }
section[aria-labelledby="funding-title"] .icon-card p { color: rgba(255,255,255,.88); }
#roles .icon-card { padding-top: 178px; overflow: hidden; }
#valuesTrack .icon-chip { display: none; }
#valuesTrack .icon-card::before { content: ""; width: 42px; height: 3px; border-radius: 999px; background: var(--gold); margin-bottom: 8px; }
.icon-chip,
.ring { background: transparent; color: var(--pine); border: 1px solid rgba(187,125,35,.38); box-shadow: none; }
.card-badge {
position: absolute;
width: 38px;
height: 38px;
display: grid;
place-items: center;
top: 16px;
right: 16px;
border-radius: 50%;
background: var(--cream-card);
color: var(--pine);
border: 1px solid rgba(187,125,35,.38);
box-shadow: 0 2px 8px rgba(12,40,31,.12);
}
.icon-chip .icon,
.card-badge .icon { width: 22px; height: 22px; }
.story-card, .quote-card, .overlap-card, .form-card, .job-card { border: 1px solid rgba(19,60,47,.09); border-radius: var(--radius-lg); box-shadow: var(--shadow); }
.page-band { color: var(--onyx); text-align: center; padding: clamp(64px, 8vw, 104px) 0 132px; background: linear-gradient(135deg, var(--pine-dark), var(--pine)); }
.donation-cat-tabs { border-radius: 14px; padding: 7px; background: rgba(255,253,248,.95); border: 1px solid var(--line); box-shadow: var(--shadow); }
.donation-cat-btn { border-radius: var(--radius-sm); }
.donation-cat-btn.is-active { background: var(--pine); color: var(--white); }
.progress-track { height: 13px; border-radius: 999px; }
.progress-fill { background: linear-gradient(90deg, var(--gold-deep), var(--gold)); }
input[type="text"], input[type="email"], input[type="tel"], input[type="number"], input[type="password"],
input[type="url"], input[type="file"], input[type="date"], select, textarea {
width: 100%;
font-family: var(--font);
font-size: .95rem;
color: var(--ink);
transition: border-color .15s ease, box-shadow .15s ease;
border: 1px solid var(--line-strong);
border-radius: var(--radius-sm);
padding: 13px 15px;
background: #fffefb;
}
.partners-wrap { opacity: .78; }
/* Give the private/admin views the same quality without sacrificing density. */
.admin-shell, .auth-page, .cert-page { background: #f3ede2; }
.admin-topbar, .admin-stat-card, .admin-panel, .auth-card, .certificate { border: 1px solid var(--line); }
.admin-topbar h1, .auth-card-body h1, .certificate h1 { font-family: var(--font-display); }
/* Section 15 on tablets and phones */
@media (max-width: 980px) {
.impact-strip__inner { grid-template-columns: 1.4fr repeat(3, 1fr); padding-block: 24px; }
}
@media (max-width: 640px) {
.topbar-cta { padding-inline: 13px; }
.brand-mark { width: 46px; height: 46px; }
.hero-slides { min-height: 690px; }
.hero-slide::after { background: linear-gradient(0deg, rgba(8,35,26,.97) 0%, rgba(8,35,26,.8) 58%, rgba(8,35,26,.2) 100%); }
.hero-title { font-size: clamp(3rem, 14vw, 4.3rem); }
.action-btn { justify-content: center; min-height: 50px; padding: 11px 10px; font-size: .84rem; }
.section { padding: 72px 0; }
.impact-strip__inner { grid-template-columns: repeat(3, 1fr); gap: 22px 12px; padding-block: 28px; }
.impact-intro { grid-column: 1 / -1; padding: 0 0 20px; border-right: 0; border-bottom: 1px solid rgba(12,40,31,.2); }
.impact-stat strong { font-size: 1.55rem; }
.impact-stat span { font-size: .75rem; line-height: 1.3; }
.impact-link { grid-column: 1 / -1; }
body:not(:has(.admin-shell)):not(:has(.admin-login-screen)) h2 { font-size: 2.2rem; }
.page-band { padding: 50px 0 104px; }
.donation-cat-btn { border-radius: 14px; }
}
/* Collapsed navigation: eight links plus the brand don't fit below ~1180px,
so tablets and phones get the menu button. Kept last so it wins over the
desktop link styles above. */
@media (max-width: 1180px) {
.main-nav {
position: absolute;
top: 100%;
left: 0;
right: 0;
display: none;
flex-direction: column;
align-items: stretch;
gap: 0;
padding: 8px var(--gutter) 22px;
background: var(--white);
border-bottom: 1px solid var(--line);
border-radius: 0 0 24px 24px;
box-shadow: 0 16px 30px rgba(15,29,18,.12);
}
.main-nav a { padding: 13px 16px; border-radius: 12px; font-size: 1rem; }
}
/* ---------------------------------------------------------------------
16. Small layout helpers (used instead of inline style attributes,
which the Content-Security-Policy discourages and are hard to reuse)
--------------------------------------------------------------------- */
.u-ink { color: var(--ink); }
.u-text-sm { font-size: .85rem; }
.u-text-body { font-size: .95rem; }
.u-m0 { margin: 0; }
.u-mt-8 { margin-top: 8px; }
.u-mb-16 { margin-bottom: 16px; }
.u-mb-24 { margin-bottom: 24px; }
.u-mb-34 { margin-bottom: 34px; }
.u-row { display: flex; }
.u-contents { display: contents; }
.u-items-start { align-items: start; }
.u-items-center { align-items: center; }
.u-justify-center { justify-content: center; }
.u-gap-8 { gap: 8px; }
.u-gap-10 { gap: 10px; }
.u-gap-20 { gap: 20px; }
.btn-compact { padding: 8px 16px; font-size: .82rem; }
.btn-roomy { padding: 10px 22px; }
.admin-note { margin: 0 0 16px; font-size: .85rem; color: var(--ink-soft); }
.admin-note--tight { margin-bottom: 14px; }
.cta-row { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 22px; }
.section-cta { margin-top: 26px; text-align: center; }
.give-footer { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 16px; margin-top: 22px; }
.pay-grid { gap: 16px; margin: 18px 0; }
.jobs-toolbar { flex-direction: row; flex-wrap: wrap; align-items: center; margin-top: 28px; }
.jobs-toolbar__field { flex: 1; min-width: 240px; }
.auth-footnote { margin: 18px 0 0; }
.objective p { color: var(--ink); }
.pay-grid .fact strong { font-size: 1rem; }
/* Gallery album links on phones: one swipeable row instead of a tall list. */
@media (max-width: 640px) {
.jump-links { grid-template-columns: none; grid-auto-flow: column; grid-auto-columns: 78%; overflow-x: auto; scroll-snap-type: x mandatory; padding-bottom: 6px; }
.album-link { scroll-snap-align: start; }
}
/* ---------------------------------------------------------------------
17. Motion
Everything here is decoration on top of a page that already works
without it, and the reduced-motion block in section 14 switches it off
for people who ask their device for less movement.
--------------------------------------------------------------------- */
/* Pages cross-fade into each other; the header stays put. Browsers without
cross-document view transitions simply load the next page as before. */
@view-transition { navigation: auto; }
.site-header { view-transition-name: site-header; }
::view-transition-old(root) { animation: vt-fade-out .22s ease both; }
::view-transition-new(root) { animation: vt-fade-in .32s var(--ease-out) both; }
@keyframes vt-fade-out { to { opacity: 0; } }
@keyframes vt-fade-in { from { opacity: 0; transform: translateY(10px); } }
/* Hero: the photographs drift slowly in and out, and the words of each
slide rise in one after another every time it comes in. */
.hero-slide img { animation: hero-drift 16s ease-in-out infinite alternate; }
@keyframes hero-drift { from { transform: scale(1.015); } to { transform: scale(1.09); } }
.hero-slide.is-active .hero-kicker,
.hero-slide.is-active .hero-title,
.hero-slide.is-active .hero-blurb,
.hero-slide.is-active .hero-actions { animation: rise-in .9s var(--ease-out) both; }
.hero-slide.is-active .hero-title { animation-delay: .12s; }
.hero-slide.is-active .hero-blurb { animation-delay: .26s; }
.hero-slide.is-active .hero-actions { animation-delay: .4s; }
@keyframes rise-in { from { opacity: 0; transform: translateY(26px); } }
/* Reading progress: a thin gold line under the header fills as the page
scrolls. Uses scroll-driven animation where the browser supports it. */
@supports (animation-timeline: scroll()) {
.site-header::after {
content: "";
position: absolute;
left: 0;
right: 0;
bottom: 0;
height: 3px;
background: linear-gradient(90deg, var(--gold-deep), var(--gold));
transform-origin: 0 50%;
transform: scaleX(0);
animation: read-progress linear both;
animation-timeline: scroll(root);
pointer-events: none;
}
@keyframes read-progress { to { transform: scaleX(1); } }
}
/* Main buttons: a soft sheen passes across on hover. */
.action-btn, .btn-gold, .btn-dark { position: relative; overflow: hidden; }
.action-btn::after, .btn-gold::after, .btn-dark::after {
content: "";
position: absolute;
inset: 0;
background: linear-gradient(110deg, transparent 30%, rgba(255,255,255,.28) 50%, transparent 70%);
transform: translateX(-120%);
transition: transform .7s var(--ease-out);
pointer-events: none;
}
.action-btn:hover::after, .btn-gold:hover::after, .btn-dark:hover::after { transform: translateX(120%); }
/* Chat button: two gentle pulses shortly after the page opens. */
@keyframes chat-nudge {
0% { box-shadow: 0 8px 24px rgba(15,29,18,.3), 0 0 0 0 rgba(231,185,95,.6); }
100% { box-shadow: 0 8px 24px rgba(15,29,18,.3), 0 0 0 18px rgba(231,185,95,0); }
}
/* Floating touches: slow, small movements that give the page some life.
Switched off by the reduced-motion block like everything else. */
@keyframes float-y { from { transform: translateY(0); } to { transform: translateY(-12px); } }
@keyframes float-y-soft { from { transform: translateY(0); } to { transform: translateY(-6px); } }
/* Hero: two glass-free stat cards drifting over the photograph (desktop). */
.hero-float { display: none; }
@media (min-width: 981px) {
.hero-float { display: block; position: absolute; right: max(32px, calc((100vw - var(--container)) / 2)); bottom: 110px; z-index: 3; width: 250px; height: 210px; pointer-events: none; }
.float-card {
position: absolute;
display: flex;
align-items: center;
gap: 12px;
padding: 12px 18px 12px 12px;
background: var(--cream-card);
color: var(--ink);
border-radius: var(--radius);
box-shadow: 0 18px 40px rgba(8,35,26,.28);
animation: float-y 4.5s ease-in-out infinite alternate;
}
.float-card--a { right: 0; bottom: 0; }
.float-card--b { left: 0; top: 0; animation-duration: 5.5s; animation-delay: -2s; }
.float-card__icon { display: grid; place-items: center; width: 42px; height: 42px; border-radius: 50%; background: var(--gold-tint); color: var(--gold-deep); flex: none; }
.float-card strong { display: block; font-family: var(--font-display); font-size: 1.35rem; line-height: 1.05; color: var(--pine-dark); }
.float-card small { display: block; font-size: .8125rem; color: var(--ink-soft); }
}
/* Icon badges and small photos bob gently, out of step with each other. */
.fact .icon-chip, .contact-tile .icon-chip, .cert-promo .icon-chip { animation: float-y-soft 3.2s ease-in-out infinite alternate; }
.fact:nth-child(2) .icon-chip, .contact-tile:nth-child(2) .icon-chip { animation-delay: -.8s; }
.fact:nth-child(3) .icon-chip, .contact-tile:nth-child(3) .icon-chip { animation-delay: -1.6s; }
.fact:nth-child(4) .icon-chip, .contact-tile:nth-child(4) .icon-chip { animation-delay: -2.4s; }
/* The chat button floats too, after its two welcome pulses. */
.chat-launcher { animation: chat-nudge 1.6s ease-out 3s 2, float-y-soft 3s ease-in-out 6.2s infinite alternate; }
/* ---------------------------------------------------------------------
18. News & events (home page)
--------------------------------------------------------------------- */
.news-layout { display: grid; grid-template-columns: minmax(0, 2fr) minmax(280px, 1fr); gap: 28px; align-items: start; }
.news-list { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 20px; }
.news-card {
display: flex;
flex-direction: column;
overflow: hidden;
background: var(--white);
border: 1px solid var(--line);
border-radius: var(--radius);
box-shadow: var(--shadow);
transition: transform .45s var(--ease-out), box-shadow .45s var(--ease-out);
}
.news-card:hover { transform: translateY(-4px); box-shadow: var(--shadow-lift); }
.news-card__media { display: block; aspect-ratio: 16 / 10; overflow: hidden; }
.news-card__media img { width: 100%; height: 100%; object-fit: cover; transition: transform .7s var(--ease-out); }
.news-card:hover .news-card__media img { transform: scale(1.05); }
.news-card__body { display: flex; flex-direction: column; gap: 10px; padding: 18px 20px 22px; }
.news-card__meta { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 10px; font-size: .8125rem; color: var(--ink-soft); }
.news-card h3 { margin: 0; font-family: var(--font-display); font-size: 1.2rem; line-height: 1.2; }
.news-card h3, .news-card h3 a { color: var(--pine-bright); text-decoration: none; }
.news-card h3 a:hover { color: var(--pine-bright); }
.news-card p { margin: 0; font-size: .9rem; color: var(--ink-soft); }
/* A posted update has no photograph, so its accent bar leads instead. */
.news-card--post { border-top: 4px solid var(--gold); }
.news-card__text { display: -webkit-box; -webkit-line-clamp: 5; -webkit-box-orient: vertical; overflow: hidden; white-space: pre-line; }
.news-card--post.is-expanded .news-card__text { display: block; }
.news-card__more { align-self: flex-start; padding: 0; background: none; border: 0; font: inherit; font-size: .85rem; font-weight: 700; color: var(--pine-bright); cursor: pointer; }
.news-card__more:hover { text-decoration: underline; }
.events-panel { position: sticky; top: 140px; padding: 24px; background: var(--pine-dark); color: var(--text-on-dark); border-radius: var(--radius); box-shadow: var(--shadow-lift); }
.events-panel h3 { display: flex; align-items: center; gap: 10px; margin: 0 0 16px; font-family: var(--font-display); font-size: 1.3rem; color: var(--white); }
.events-panel h3 .icon { color: var(--gold); }
.event-list { display: grid; gap: 12px; margin: 0; padding: 0; list-style: none; }
.event-item { display: flex; align-items: center; gap: 14px; padding-bottom: 12px; border-bottom: 1px solid rgba(255,255,255,.12); }
.event-item:last-child { padding-bottom: 0; border-bottom: 0; }
.event-date { display: grid; place-items: center; flex: none; width: 58px; height: 62px; border-radius: var(--radius-sm); background: var(--gold); color: var(--onyx); line-height: 1; }
.event-date strong { font-family: var(--font-display); font-size: 1.6rem; }
.event-date span { font-size: .8125rem; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; }
.event-info h4 { margin: 0 0 3px; font-size: .95rem; color: var(--white); }
.event-where { font-size: .8rem; color: var(--text-on-dark-soft); }
.event-info { min-width: 0; }
.event-ticket-prices { margin: 5px 0; color: var(--text-on-dark-soft); font-size: .8125rem; line-height: 1.45; overflow-wrap: anywhere; }
.event-info .btn { max-width: 100%; white-space: normal; }
.events-panel .event-info .btn-outline {
color: var(--text-on-dark);
border-color: var(--text-on-dark-soft);
}
.events-panel .event-info .btn-outline:hover,
.events-panel .event-info .btn-outline:focus-visible {
color: var(--onyx);
background: var(--white);
border-color: var(--white);
}
.events-empty { margin: 0; font-size: .92rem; line-height: 1.6; color: var(--text-on-dark-soft); }
.events-empty a { color: var(--gold); font-weight: 600; }
.campaign-section { margin: 0 0 28px; }
.campaign-section > h2 { margin-bottom: 16px; }
.campaign-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 260px), 1fr)); gap: 16px; }
.campaign-card { min-width: 0; padding: 20px; border: 1px solid var(--line); border-radius: var(--radius); background: var(--cream-card); box-shadow: var(--shadow); }
.campaign-card h3 { margin: 0 0 8px; font-family: var(--font-display); }
.campaign-card p { overflow-wrap: anywhere; }
.campaign-progress { height: 14px; overflow: hidden; margin: 12px 0 16px; border-radius: 999px; background: var(--paper-alt); }
.campaign-progress span { display: block; height: 100%; border-radius: inherit; background: var(--gold-deep); }
.ticket-order-total { margin: 8px 0; font-weight: 700; font-size: 1.1rem; }
.ticket-consent { display: block; margin: 12px 0; line-height: 1.6; }
.events-panel .rsvp-form { color: var(--ink); }
.events-panel .rsvp-form h3 { color: var(--ink); }
@media (max-width: 1180px) {
.news-layout { grid-template-columns: 1fr; }
.events-panel { position: static; }
}
@media (max-width: 980px) {
.news-list { grid-template-columns: none; grid-auto-flow: column; grid-auto-columns: minmax(260px, 70%); overflow-x: auto; scroll-snap-type: x mandatory; padding-bottom: 8px; scrollbar-width: none; }
.news-list::-webkit-scrollbar { display: none; }
.news-card { scroll-snap-align: start; }
}
.admin-cell-note { margin-top: 3px; font-size: .8125rem; color: var(--ink-soft); }
/* Wits-style heading with a link beside it: "Latest news | All news". */
.head-title-row { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 18px; }
.head-title-row h2 { margin-bottom: 0; }
.head-link { padding-left: 18px; border-left: 2px solid var(--gold); color: var(--pine-bright); font-weight: 600; font-size: 1rem; line-height: 1.2; text-decoration: none; }
.head-link:hover { color: var(--pine); text-decoration: underline; text-underline-offset: 4px; }
.section-head .head-title-row + p { margin-top: 10px; }
/* The date closes each news card, in the brand colour. */
.news-card__body { flex: 1; }
.news-card__date { margin-top: auto; padding-top: 6px; font-size: .85rem; font-weight: 600; color: var(--pine-bright); }
/* A heading link sits beside a heading, so give it a finger-sized target.
The same goes for the links that stand on their own line inside a card
or a panel: the text is only ~25px tall, which is a small thing to hit
with a thumb. The extra height is inside the link, so nothing moves. */
.head-link,
.card-link,
.impact-link,
.news-card__body h3 a,
.footer-legal a,
.auth-footnote a,
.admin-forgot-link a,
.admin-login-back a { display: inline-flex; align-items: center; min-height: 44px; }
/* ---------------------------------------------------------------------
19. Language switcher
--------------------------------------------------------------------- */
.lang-switch { display: inline-flex; align-items: center; gap: 8px; }
/* The owner's language badge (South Africa, 11 languages) beside the menu. */
.lang-switch::before {
content: ""; flex: none; width: 28px; height: 28px;
background: url("assets/img/lang-badge.webp") center / contain no-repeat;
}
.lang-select {
width: auto;
min-height: 40px;
padding: 6px 30px 6px 10px;
border: 1px solid rgba(255,255,255,.28);
border-radius: var(--radius-sm);
background: transparent;
background-image: linear-gradient(45deg, transparent 50%, currentColor 50%), linear-gradient(135deg, currentColor 50%, transparent 50%);
background-position: right 14px center, right 9px center;
background-size: 5px 5px, 5px 5px;
background-repeat: no-repeat;
color: var(--text-on-dark);
font: inherit;
font-size: .82rem;
font-weight: 500;
appearance: none;
cursor: pointer;
}
.lang-select:hover { border-color: var(--gold); color: var(--gold); }
.lang-select option { color: var(--ink); background: var(--white); }
/* On the pages with no dark top bar the menu sits on a light background. */
.admin-topbar .lang-select,
.auth-footnote .lang-select,
.cert-actions .lang-select { border-color: var(--line-strong); color: var(--ink); }
.topbar-cta { white-space: nowrap; }
/* The language menu stays in the top bar at every width. On phones it shrinks
and the top bar can wrap, while the full name is mirrored inside the menu. */
.lang-switch--menu { display: none; }
@media (max-width: 640px) {
/* Same for the breadcrumb: small uppercase text, tapped with a thumb. */
.crumbs a { display: inline-flex; align-items: center; min-height: 40px; }
.crumbs { margin-bottom: 4px; }
/* Everything in the bar has to sit on one line, or the phone number breaks
in half. Give the number the space it needs and squeeze the rest. */
.topbar-info a { white-space: nowrap; }
.topbar-info { font-size: .8125rem; gap: 8px; }
.topbar-links .topbar-cta { padding: 0 11px; font-size: .8125rem; }
.topbar .lang-switch { gap: 5px; }
.topbar .lang-switch::before { width: 22px; height: 22px; }
.topbar .lang-select {
max-width: 78px;
padding: 4px 17px 4px 6px;
font-size: .8125rem;
background-position: right 8px center, right 4px center;
text-overflow: ellipsis;
}
.lang-switch--menu { display: flex; padding: 12px 16px 4px; }
.lang-switch--menu .lang-select { width: 100%; max-width: none; border-color: var(--line-strong); color: var(--ink); }
}
@media (prefers-reduced-motion: reduce) {
.chat-bubble--typing span { animation: none; opacity: .6; }
}
/* ---------- Running announcements strip ----------
A print-style ticker: the one idea worth borrowing from the big
agency sites, because here it carries real news rather than
decoration. It pauses on hover and on keyboard focus, and stops
moving altogether for anyone who has asked for less motion. */
.ticker {
position: relative;
background: var(--onyx);
color: var(--text-on-dark);
overflow: hidden;
border-block: 1px solid rgba(231, 185, 95, .25);
}
.ticker::after {
content: "";
position: absolute;
z-index: 1;
inset: 0 0 0 auto;
width: 104px;
background: var(--onyx);
pointer-events: none;
}
.ticker:focus-visible { outline-offset: -3px; }
.ticker__toggle {
position: absolute;
z-index: 2;
top: 50%;
right: 12px;
display: inline-flex;
align-items: center;
gap: 6px;
min-height: 36px;
padding: 6px 10px;
border: 1px solid var(--gold);
border-radius: var(--radius-xs);
background: var(--onyx);
color: var(--text-on-dark);
font: inherit;
font-size: .8125rem;
font-weight: 700;
cursor: pointer;
transform: translateY(-50%);
}
.ticker__toggle:hover { background: var(--pine-dark); }
.ticker__track { display: flex; width: max-content; animation: ticker-scroll 48s linear infinite; }
.ticker__run { display: flex; align-items: center; padding-block: 11px; }
.ticker__item {
display: inline-flex; align-items: center; white-space: nowrap;
padding-inline: 26px;
font-size: .8125rem; letter-spacing: .14em; text-transform: uppercase;
font-weight: 600; color: var(--text-on-dark-soft);
}
.ticker__item::after {
content: ""; width: 5px; height: 5px; border-radius: 50%;
background: var(--gold); margin-left: 26px;
}
@keyframes ticker-scroll { to { transform: translateX(-50%); } }
.ticker:not(.ticker--playing):focus-within .ticker__track,
.ticker--paused .ticker__track { animation-play-state: paused; }
@media (hover: hover) {
.ticker:hover .ticker__track { animation-play-state: paused; }
}
@media (prefers-reduced-motion: reduce) {
.ticker__track { animation: none; }
.ticker { overflow-x: auto; }
}
/* (A full-screen SVG noise overlay used to sit here. Removed: it stalled
rendering -- measured at 25.7s versus 6.7s to paint the same page -- and
a flat design system has no place for texture anyway.) */
/* ==========================================================================
12. DESIGN SYSTEM — institutional / editorial
--------------------------------------------------------------------------
A formal, content-first system: serif typography, square flat controls,
no elevation, and white space doing the separating work.
ADOPTED: the typography scale, the shapes, the flatness, the spacing
rhythm, the restraint on motion.
NOT ADOPTED: its colours. Golden Hi Hills keeps its own gold, pine,
cream and ink throughout — every value below is expressed through the
existing palette variables, so the brand is untouched.
Everything lives in this one block on purpose: deleting from the line
above to the end of the file restores the previous look exactly, once the
Google Fonts for DM Sans and Fraunces is put back in each page's
(it was removed because this block never shows those fonts).
========================================================================== */
:root {
/* --- Typography: DM Sans for reading, Fraunces for headings (self-hosted) -- */
--font: "DM Sans", system-ui, -apple-system, "Segoe UI", sans-serif;
--font-display: "Fraunces", Georgia, "Times New Roman", serif;
--font-body: var(--font);
/* --- Shapes: square. Cards alone may soften to 8px. ------------------- */
--radius-xs: 0px;
--radius-sm: 0px;
--radius: 8px;
--radius-lg: 8px;
/* --- Elevation: none. Borders and spacing separate layers instead. ---- */
--shadow: none;
--shadow-lift: none;
/* --- Spacing rhythm --------------------------------------------------- */
--sp-xs: 2px;
--sp-sm: 10px;
--sp-md: 22px;
--sp-lg: 26px;
--sp-xl: 40px;
}
/* --- Type scale ---------------------------------------------------------
Sizes are fixed steps rather than fluid, but in rem, so they follow the
font size chosen in the visitor's browser (1rem = 16px by default). Body
text sits on a 1.5 line height; headings are tighter. */
body { font-size: 1rem; line-height: 1.5; letter-spacing: 0; }
h1, .hero-title, .page-title { font-size: 2rem; line-height: 1.2; font-weight: 700; letter-spacing: 0; }
h2 { font-size: 1.6875rem; line-height: 1.2; font-weight: 700; letter-spacing: 0; }
h3 { font-size: 1.4375rem; line-height: 1.25; font-weight: 700; letter-spacing: 0; }
h4, h5, h6 { font-size: 1rem; font-weight: 600; line-height: 1.4; letter-spacing: 0; }
p, li, td, th, input, select, textarea, .hero-blurb, .lead {
font-size: 1rem; line-height: 1.5; letter-spacing: 0;
}
/* Several headings carry their own fluid clamp() sizes, which outrank a
bare element selector. They are named here so the scale actually wins --
one scale, or it is not a scale. */
body:not(:has(.admin-shell)):not(:has(.admin-login-screen)) h2,
.news-band h2,
.page-band h1,
.certificate h1,
.quote-card blockquote {
font-size: 1.6875rem; line-height: 1.2; font-weight: 700; letter-spacing: 0;
}
.hero-title, .page-band h1 { font-size: 2rem; line-height: 1.2; }
.lead { font-size: 1rem; line-height: 1.5; }
/* Labels, buttons and small caps: same size, heavier, never tracked. */
.btn, .action-btn, label, .field > span, .eyebrow, .pill, .chip,
.ticker__item, .topbar a, .nav a, .footer h4 {
font-size: 1rem; font-weight: 600; letter-spacing: 0; text-transform: none;
}
/* --- Controls: flat, square, bordered -----------------------------------
2px border, generous padding, a real minimum size. No shadow, no radius,
no lift on hover: the border and the colour carry the affordance. */
.btn, .action-btn {
border-radius: 0;
border-width: 2px;
border-style: solid;
padding: 12px 35px;
min-width: 180px;
min-height: 46px;
box-shadow: none;
text-decoration: none;
justify-content: center;
}
.btn:hover, .btn:active, .action-btn:hover, .action-btn:active { transform: none; filter: none; }
.btn-gold, .btn--primary { border-color: var(--gold-deep); box-shadow: none; }
.btn-dark { border-color: var(--onyx); box-shadow: none; }
.action-btn--volunteer, .action-btn--money, .action-btn--goods, .action-btn--help { box-shadow: none; }
/* Small buttons keep the flat treatment but not the 180px floor — they sit
inside tables and cards where that width would break the layout. */
.btn-sm, .news-card__more, .chat-quick-replies button {
min-width: 0;
padding: 10px 18px;
border-radius: 0;
box-shadow: none;
}
/* Icon-only controls stay circular: they are utilities, not buttons with
labels, and a 46x180 rectangle around a single arrow would be absurd. */
.hero-ctrl, .chat-launcher, .chat-panel-form button, .row-ctrl, .admin-nav-toggle {
min-width: 0;
padding: initial;
border-width: 1px;
}
/* Text-level actions: underlined, no chrome. */
.head-link, .card-link, .impact-link, .footer-legal a, .auth-footnote a,
.news-card__body h3 a, .crumbs a {
text-decoration: underline;
box-shadow: none;
}
/* --- Surfaces: bordered, not floating ----------------------------------- */
.card, .news-card, .icon-card, .form-card, .contact-tile, .float-card,
.objective, .cert-promo, .stat-card, .chat-panel {
box-shadow: none;
border: 1px solid var(--line);
border-radius: 8px;
}
/* No elevation anywhere. The focus ring is exempt: it is an accessibility
affordance, not decoration. */
*:not(:focus-visible) { box-shadow: none; }
/* --- Motion: restrained -------------------------------------------------
Functional movement stays (the ticker, the typing dots, page fades).
Decorative drifting, floating and pulsing does not. */
.split-media, .chat-launcher, .float-card { animation: none; }
.hero-slide img { animation: none; transform: none; }
.impact-stat { border: 0; box-shadow: none; }
/* --- Labels: square tags, never pills, and allowed to wrap --------------
At 16px a long label ("Orphans & Vulnerable Children") no longer fits
on one line inside a card, and clipping it would lose words. */
.pill, .chip, .tag, .badge {
border-radius: 0;
white-space: normal;
max-width: 100%;
line-height: 1.25;
}
.hero-kicker, .eyebrow { text-transform: none; letter-spacing: 0; }
/* --- Narrow screens ------------------------------------------------------
The 180px minimum is a desk-width rule. Two of them cannot sit side by
side on a 390px phone, so there the buttons take the full width and
stack -- still flat, still square, still 46px tall. */
@media (max-width: 640px) {
.btn, .action-btn { min-width: 0; width: 100%; padding: 12px 20px; }
.hero-actions, .cta-row, .btn-row { flex-direction: column; align-items: stretch; }
.btn-sm, .chat-quick-replies button { width: auto; }
}
/* --- Fixes from the page-by-page audit -----------------------------------
Each of these was found by looking at every page at 1280px and 390px. */
/* 1. The newsletter box grew ~260px tall on phones. The form turns into a
column there, and the input's flex-basis (260px, meant as a WIDTH)
silently became its HEIGHT. Pin it to its natural height. */
@media (max-width: 640px) {
.news-form input { flex: 0 0 auto; width: 100%; }
.news-form .btn, .news-form button { width: 100%; }
}
/* 2. Controls that were still rounded. Square, per the system. Only true
circles for single icons (the chat button, contact rings) remain. */
.pill, .chip, .status-pill, .chat-quick-replies button,
.donation-cat-tabs, .donation-cat-btn, .admin-badge, .admin-row-action,
.progress-track, .hero-dot, .hero-dot[aria-current="true"] {
border-radius: 0;
}
@media (max-width: 980px) { .main-nav a { border-radius: 0; } }
@media (max-width: 640px) { .donation-cat-tabs, .donation-cat-btn { border-radius: 0; } }
/* 3. Photo tiles were hard-coded to 26px corners. Cards may soften to 8px. */
.tile { border-radius: 8px; }
/* 4. Titles were squeezed into a narrow column ("Volunteer / with us").
Their width limits were in ch units tuned for huge display type, so
at 32px they allowed only ~10 characters per line. */
.hero-title { max-width: 22ch; }
.page-band h1 { max-width: none; }
/* 5. Partners appeared twice. The list is doubled in the markup so it can
loop as a marquee; with motion restrained, the copy is shown too.
Show one static list instead. */
.partners-track { animation: none; flex-wrap: wrap; width: auto; justify-content: center; }
.partners-track > [aria-hidden="true"] { display: none; }
/* 6. Long quotes (vision, mission) were set at section-heading size and
ran to eleven lines on a phone. One step down the scale. */
.quote-card blockquote { font-size: 1.4375rem; line-height: 1.25; }
/* 7. The newsletter band was a gradient. Flat gold, as everywhere else. */
.news-band { background: var(--gold); background-image: none; }
/* 8. "NPO 303-676" broke at its hyphen in the fact strip. */
.fact strong, .impact-stat strong { white-space: nowrap; }
/* 9. The last footer line sat under the floating chat button, hiding
"Staff login". Leave room for the button at the very bottom. */
.footer-legal { padding-bottom: 72px; }
/* 10. Frosted glass (backdrop-filter blur) on the sticky header and the
hero controls. The system bans glassmorphism, and a blurred sticky
header re-renders the blur on every scroll frame -- the likely cause
of the render stalls measured near the foot of long pages. A solid
surface looks the same here, because the header is already 94%
opaque. */
.navbar { backdrop-filter: none; background: var(--cream-card); }
.hero-ctrl, .hero-controls * { backdrop-filter: none; }
/* 11. The assistant now writes real answers -- paragraphs, lists, bold --
and some run to a few hundred words, so the panel is roomier and
formatted replies get quiet, compact typography of their own. */
.chat-panel { width: min(400px, calc(100vw - 44px)); }
.chat-panel-body { max-height: min(440px, 58vh); }
.chat-bubble { font-size: 0.9375rem; line-height: 1.45; }
.chat-bubble--rich { max-width: 92%; }
.chat-bubble--rich p, .chat-bubble--rich li { font-size: inherit; line-height: inherit; margin: 0; }
.chat-bubble--rich p + p, .chat-bubble--rich p + ul, .chat-bubble--rich p + ol,
.chat-bubble--rich ul + p, .chat-bubble--rich ol + p { margin-top: 8px; }
.chat-bubble--rich ul, .chat-bubble--rich ol { margin: 6px 0 0; padding-left: 20px; }
.chat-bubble--rich li + li { margin-top: 3px; }
.chat-bubble--rich code { font-family: Consolas, "Courier New", monospace; font-size: .9em; background: var(--paper); padding: 0 4px; }
.chat-bubble--rich a { color: inherit; text-decoration: underline; }
.chat-bubble--rich pre { margin: 8px 0 0; padding: 8px 10px; background: var(--paper); border-radius: 6px; overflow-x: auto; }
.chat-bubble--rich pre code { background: none; padding: 0; white-space: pre; font-size: 0.8125rem; }
.chat-sources { margin-top: 10px; padding-top: 8px; border-top: 1px solid var(--line); font-size: 0.8125rem; }
.chat-sources__group + .chat-sources__group { margin-top: 10px; }
.chat-sources__label { display: block; margin-bottom: 4px; font-weight: 600; }
.chat-bubble--rich .chat-sources ul { margin: 0; padding: 0; list-style: none; display: grid; gap: 4px; }
.chat-bubble--rich .chat-sources li + li { margin-top: 0; }
.chat-bubble--rich a.chat-source {
display: flex; align-items: center; gap: 8px; min-height: 36px; padding: 6px 10px;
border: 1px solid var(--line); border-radius: 8px; background: var(--paper);
color: inherit; text-decoration: none;
}
.chat-bubble--rich a.chat-source:hover { border-color: var(--gold-deep); }
.chat-bubble--rich a.chat-source:focus-visible { outline: 2px solid var(--gold-deep); outline-offset: 1px; }
.chat-source__title { flex: 1; min-width: 0; overflow-wrap: anywhere; }
.chat-source__site { flex: none; max-width: 40%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--ink-soft); font-size: .8125rem; }
.chat-source__icon { flex: none; color: var(--gold-deep); }
.chat-typing-note { margin-left: 8px; font-size: 0.8125rem; color: var(--ink-soft); }
/* 12. The close button inside the chat header (every screen size). */
.chat-panel-close {
flex: none; margin-left: auto; width: 44px; height: 44px; min-width: 0; padding: 0;
display: grid; place-items: center; border: 1px solid rgba(255, 255, 255, .35); border-radius: 50%;
background: transparent; color: var(--white); cursor: pointer; transition: background-color .2s ease, border-color .2s ease;
}
.chat-panel-close:hover { background: rgba(255, 255, 255, .12); border-color: var(--gold); }
.chat-panel-close:focus-visible { outline: 3px solid var(--gold); outline-offset: 2px; }
.chat-panel-close .icon { width: 22px; height: 22px; }
/* 13. The chat on phones: one panel covering the screen, as tall as the
screen itself. The keyboard is left to the phone: the browser keeps
the message box in view above it (the top of the panel may slide out
of sight meanwhile) and the panel settles back once it closes. The
floating button steps aside while it is open, the messages take all
the spare height and scroll on their own, the shortcuts sit in two
tidy columns, and the page behind stays still. */
@media (max-width: 640px) {
.chat-open, .chat-open body { overflow: hidden; }
.chat-widget.is-open .chat-panel {
position: fixed; top: 0; right: 0; bottom: 0; left: 0;
width: auto; border: 0; border-radius: 0;
}
.chat-panel-head { padding: 10px 12px 10px 16px; }
.chat-panel-body { flex: 1; min-height: 0; max-height: none; }
.chat-quick-replies { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; padding: 10px 12px; }
.chat-widget .chat-quick-replies button {
width: 100%; min-height: 44px; padding: 8px 10px; font-size: 0.9375rem; line-height: 1.2; text-align: center;
}
.chat-panel-form { padding: 10px 12px; }
.chat-panel-form input { min-width: 0; font-size: 1rem; } /* 16px or more: iOS does not zoom in */
.chat-panel-form button { width: 48px; min-height: 44px; }
}
/* 14. Voice mode (chat-voice.js, only where the browser can listen).
The round dark button with sound bars beside Send starts a spoken
conversation -- deliberately not a microphone, which reads as
"dictate this message". While it runs, the shortcuts and the box
give way to the session: mute on the left, the orb in the middle,
End on the right. The orb is not a button: it only shows what is
happening -- listening (it follows the voice), hearing the visitor
(a ring), thinking, speaking, muted. */
.chat-panel-form .chat-voice-start {
background: var(--onyx); color: var(--gold); border: 1px solid var(--onyx); border-radius: 50%;
}
.chat-panel-form .chat-voice-start:hover { background: var(--ink); }
.chat-panel-form .chat-voice-start .icon { width: 22px; height: 22px; }
.chat-panel.is-voice .chat-quick-replies,
.chat-panel.is-voice .chat-panel-form { display: none; }
.voice-mode {
display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 10px;
padding: 16px; border-top: 1px solid var(--line); background: var(--white);
}
.voice-mode[hidden] { display: none; }
.voice-centre { display: flex; flex-direction: column; align-items: center; gap: 6px; min-width: 0; }
.voice-status { margin: 0; font-size: 0.9375rem; font-weight: 600; color: var(--ink); text-align: center; }
.voice-caption {
margin: 0; max-width: 240px; min-height: 1.4em; font-size: 0.875rem; font-style: italic; color: var(--ink-soft);
text-align: center; overflow: hidden; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical;
}
.voice-mute, .voice-end {
min-height: 44px; border: 1px solid var(--line); background: var(--white); color: var(--ink); cursor: pointer;
transition: border-color .2s ease, background-color .2s ease;
}
.voice-mute { justify-self: start; width: 44px; padding: 0; border-radius: 50%; display: grid; place-items: center; }
.voice-mute[aria-pressed="true"] { background: var(--paper-alt); border-color: var(--ink); }
.voice-end {
justify-self: end; display: inline-flex; align-items: center; gap: 6px; padding: 8px 14px;
border-radius: var(--radius-sm); font-weight: 600;
}
.voice-mute:hover, .voice-end:hover { border-color: var(--ink); }
.voice-mute .icon, .voice-end .icon { width: 20px; height: 20px; }
/* =====================================================================
VOICE ORB - grainy painterly orb (owner's reference, Oct 2026)
Self-contained block: the orb look, its colours and the colour swatches.
- Texture: soft overlapping radial gradients + one tiny static SVG noise
tile (data URI, drawn once; nothing here animates the texture).
- Animations stay transform/opacity only (breathe, turn, ripple), as before.
- Colours: gold (default), green, rose, blue, violet. The page sets
data-orb-colour on (assets/js/orb-colour.js, remembered in
localStorage); the swatches carry the same attribute so they paint
themselves with the same variables.
- --level (0 to 1, set by chat-voice.js) still scales the core.
===================================================================== */
:root {
--orb-deep: #1d4f3a; --orb-mid: #c9a24a; --orb-pale: #f1d78f; --orb-hi: #fff3cf; --orb-accent: #2f6b4f;
--orb-ring: #c9a24a; --orb-ring-deep: #a96d17; --orb-glow: rgba(201, 162, 74, .42);
}
[data-orb-colour="green"] {
--orb-deep: #0c281f; --orb-mid: #2f7a58; --orb-pale: #a9d6b8; --orb-hi: #e6f5df; --orb-accent: #c9a24a;
--orb-ring: #2f7a58; --orb-ring-deep: #14503a; --orb-glow: rgba(47, 122, 88, .42);
}
[data-orb-colour="rose"] {
--orb-deep: #5a1b3a; --orb-mid: #c4577d; --orb-pale: #f3b8c8; --orb-hi: #ffe6ec; --orb-accent: #e8935f;
--orb-ring: #c4577d; --orb-ring-deep: #8a2a52; --orb-glow: rgba(196, 87, 125, .42);
}
[data-orb-colour="blue"] {
--orb-deep: #112d5a; --orb-mid: #3f79c6; --orb-pale: #a9cbf2; --orb-hi: #e4effd; --orb-accent: #5fb4c9;
--orb-ring: #3f79c6; --orb-ring-deep: #1d4a8a; --orb-glow: rgba(63, 121, 198, .42);
}
[data-orb-colour="violet"] {
--orb-deep: #34195e; --orb-mid: #7c52c6; --orb-pale: #cbb3ef; --orb-hi: #f0e8fc; --orb-accent: #d174b4;
--orb-ring: #7c52c6; --orb-ring-deep: #4c2a8a; --orb-glow: rgba(124, 82, 198, .42);
}
/* The orb. --level (0 to 1) is the microphone's level, set many times a second. */
.voice-orb {
--level: 0;
position: relative; width: 112px; height: 112px; border-radius: 50%;
display: grid; place-items: center;
}
.voice-orb__core {
position: relative; width: 92px; height: 92px; border-radius: 50%; overflow: hidden; isolation: isolate;
background-color: var(--orb-mid);
background-image:
url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n' x='0' y='0' width='100%25' height='100%25'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.8' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix type='matrix' values='.33 .33 .33 0 0 .33 .33 .33 0 0 .33 .33 .33 0 0 0 0 0 0 .85'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E"),
radial-gradient(circle at 30% 22%, var(--orb-hi) 0, transparent 38%),
radial-gradient(circle at 80% 28%, var(--orb-pale) 0, transparent 52%),
radial-gradient(circle at 74% 90%, var(--orb-accent) 0, transparent 56%),
radial-gradient(circle at 16% 82%, var(--orb-deep) 0, transparent 62%),
linear-gradient(150deg, var(--orb-pale) 0%, var(--orb-mid) 52%, var(--orb-deep) 100%);
background-size: 180px 180px, auto, auto, auto, auto, auto;
background-blend-mode: overlay, normal, normal, normal, normal, normal;
box-shadow: 0 8px 22px var(--orb-glow), inset 0 0 0 1px rgba(255, 255, 255, .35);
transform: scale(calc(1 + var(--level) * .3)); transition: transform .08s linear;
}
/* The soft, semi-transparent white disc with the phone handset (Lucide "phone"). */
.voice-orb__core::before {
content: ""; position: absolute; inset: 25%; border-radius: 50%;
background-color: rgba(255, 255, 255, .34);
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='1.9' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M22 16.92v3a2 2 0 0 1-2.18 2 19.79 19.79 0 0 1-8.63-3.07 19.5 19.5 0 0 1-6-6 19.79 19.79 0 0 1-3.07-8.67A2 2 0 0 1 4.11 2h3a2 2 0 0 1 2 1.72 12.84 12.84 0 0 0 .7 2.81 2 2 0 0 1-.45 2.11L8.09 9.91a16 16 0 0 0 6 6l1.27-1.27a2 2 0 0 1 2.11-.45 12.84 12.84 0 0 0 2.81.7A2 2 0 0 1 22 16.92z'/%3E%3C/svg%3E");
background-repeat: no-repeat; background-position: center; background-size: 48%;
box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .5), 0 2px 10px rgba(0, 0, 0, .12);
}
.voice-orb[data-state="thinking"] .voice-orb__core { transform: none; animation: voice-breathe 1.6s ease-in-out infinite; }
.voice-orb[data-state="thinking"]::after {
content: ""; position: absolute; inset: 2px; border-radius: 50%;
border: 3px solid transparent; border-top-color: var(--orb-ring); animation: voice-turn 1s linear infinite;
}
.voice-orb[data-state="speaking"] .voice-orb__core { transform: none; animation: voice-breathe 1.2s ease-in-out infinite; }
.voice-orb[data-state="speaking"]::before,
.voice-orb[data-state="speaking"]::after {
content: ""; position: absolute; inset: 10px; border-radius: 50%; border: 2px solid var(--orb-ring);
animation: voice-ripple 1.8s ease-out infinite;
}
.voice-orb[data-state="speaking"]::after { animation-delay: .9s; }
.voice-orb[data-state="hearing"]::after {
content: ""; position: absolute; inset: 0; border-radius: 50%; border: 3px solid var(--orb-ring-deep);
}
.voice-orb[data-state="muted"] .voice-orb__core { filter: grayscale(1); opacity: .55; transform: none; }
@keyframes voice-breathe { 50% { transform: scale(.9); } }
@keyframes voice-turn { to { transform: rotate(360deg); } }
@keyframes voice-ripple { from { transform: scale(.85); opacity: .9; } to { transform: scale(1.3); opacity: 0; } }
@media (prefers-reduced-motion: reduce) {
.voice-orb__core { transition: none; transform: none; }
.voice-orb[data-state] .voice-orb__core, .voice-orb[data-state]::before, .voice-orb[data-state]::after { animation: none; }
.voice-orb[data-state="speaking"]::before { transform: scale(1.15); opacity: .6; }
.voice-orb[data-state="speaking"]::after { display: none; }
}
html.pref-motion .voice-orb__core { transition: none; transform: none; }
html.pref-motion .voice-orb[data-state] .voice-orb__core,
html.pref-motion .voice-orb[data-state]::before,
html.pref-motion .voice-orb[data-state]::after { animation: none; }
html.pref-motion .voice-orb[data-state="speaking"]::before { transform: scale(1.15); opacity: .6; }
html.pref-motion .voice-orb[data-state="speaking"]::after { display: none; }
/* Colour swatches under the status text (built by orb-colour.js). */
.orb-swatches { display: flex; flex-wrap: wrap; justify-content: center; gap: 6px; margin-top: 4px; }
.orb-swatch {
width: 28px; height: 28px; min-height: 28px; padding: 0; border-radius: 50%; cursor: pointer;
border: 2px solid var(--white, #fff);
background-image: linear-gradient(150deg, var(--orb-pale) 0%, var(--orb-mid) 55%, var(--orb-deep) 100%);
box-shadow: 0 0 0 1px var(--line-strong, rgba(19, 60, 47, .35));
}
.orb-swatch:hover { box-shadow: 0 0 0 2px var(--ink, #183027); }
.orb-swatch[aria-checked="true"] { box-shadow: 0 0 0 2px var(--white, #fff), 0 0 0 4px var(--ink, #183027); }
.orb-swatch:focus-visible { outline: 3px solid var(--ink, #183027); outline-offset: 3px; }
@media (max-width: 640px) {
.voice-orb { width: 100px; height: 100px; }
.voice-orb__core { width: 82px; height: 82px; }
.voice-orb[data-state="speaking"]::before,
.voice-orb[data-state="speaking"]::after { inset: 9px; }
}
/* ===================== end VOICE ORB ===================== */
@media (max-width: 640px) {
.voice-mode { padding: 14px 12px 18px; }
.voice-caption { max-width: 190px; }
}
/* --- Density -------------------------------------------------------------
Sections breathe; the spacing scale does the separating. */
.section { padding-block: var(--sp-xl); }
.form-card, .card, .news-card__body, .icon-card { padding: 16px; }
/* ---------- Find us: the Golden Hi Hills map ----------
Flat and square like the rest of the system. The view buttons sit above
the map rather than inside it, so they are large, labelled targets on a
phone, and work the same for both the keyless and the keyed map. */
.map-toolbar { display: flex; flex-wrap: wrap; gap: 8px; margin: 0 0 14px; }
.map-view-btn {
min-height: 44px; padding: 8px 18px;
border: 2px solid var(--line-strong); border-radius: 0;
background: var(--cream-card); color: var(--ink);
font: inherit; font-size: 1rem; font-weight: 600; cursor: pointer;
}
.map-view-btn:hover { border-color: var(--ink); }
.map-view-btn.is-active { background: var(--onyx); border-color: var(--onyx); color: var(--white); }
.map-view-btn:focus-visible { outline: 3px solid var(--gold); outline-offset: 2px; }
.map-view-btn--fs { margin-left: auto; }
.map-frame {
position: relative; overflow: hidden;
aspect-ratio: 16 / 9; min-height: 360px;
border: 1px solid var(--line); border-radius: 8px;
background: var(--paper-alt);
}
.map-frame:fullscreen { border-radius: 0; border: 0; }
.map-canvas, .map-embed { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }
/* Views not on screen stay loaded but invisible (not display:none, so
Google lays them out at full size and they appear instantly). */
.map-embed { transition: opacity .3s ease; }
.map-embed[data-inactive] { visibility: hidden; opacity: 0; }
.map-placeholder {
position: absolute; inset: 0;
display: flex; flex-direction: column; align-items: center; justify-content: center;
gap: 4px; padding: 16px; text-align: center;
color: var(--ink-soft); font-size: 0.9375rem;
}
.map-placeholder strong { color: var(--ink); font-size: 1.125rem; }
.map-placeholder__pin { fill: var(--gold); margin-bottom: 6px; animation: map-pin-bob 1.4s ease-in-out infinite; }
.map-placeholder__status { margin-top: 8px; font-size: 0.875rem; }
[data-map-ready] .map-placeholder { display: none; }
@keyframes map-pin-bob { 50% { transform: translateY(-6px); } }
@media (prefers-reduced-motion: reduce) {
.map-embed { transition: none; }
.map-placeholder__pin { animation: none; }
}
.map-links { display: flex; flex-wrap: wrap; gap: 4px 24px; margin-top: 12px; }
.map-links a { display: inline-flex; align-items: center; min-height: 44px; font-weight: 600; text-decoration: underline; }
.map-info { font-family: var(--font); font-size: 0.875rem; color: #1b1b1b; line-height: 1.4; }
.map-info strong { display: block; font-size: 0.9375rem; }
@media (max-width: 640px) {
.map-frame { aspect-ratio: auto; height: 62vh; min-height: 320px; }
.map-view-btn { flex: 1 1 calc(50% - 8px); }
.map-view-btn--fs { margin-left: 0; }
}
/* ==========================================================================
Get the app (download.html)
Built inside the design system above: flat surfaces, borders not
shadows, square labels, round only for icon-only controls, and motion
that explains something (the reveal, a hover, the video's play state)
rather than decorates. script.js marks the visitor's own device with
.is-current, moves its card to the front and un-hides its badge.
========================================================================== */
/* --- The install box at the top ------------------------------------------ */
.app-hero { padding: 0; overflow: hidden; }
.app-hero__main { display: flex; align-items: center; gap: 28px; padding: 30px 34px; }
.app-hero__icon { width: 104px; height: 104px; flex: none; border-radius: 22px; }
.app-hero__text { flex: 1; min-width: 0; }
.overlap .app-hero h2 { margin: 0 0 8px; }
.app-hero__text p { margin: 0; color: var(--ink-soft); }
.app-hero__action { flex: none; width: 280px; display: flex; flex-direction: column; gap: 10px; }
/* Nothing to show until the browser offers to install: no empty column. */
.app-hero__action:not(:has(> :not([hidden]))) { display: none; }
.app-status {
margin: 12px 0 0; padding: 10px 14px; text-align: left;
border-left: 3px solid var(--gold-deep); background: var(--gold-tint);
font-size: 0.9375rem; line-height: 1.4; color: var(--ink);
}
/* Steps shown under an Install button when there is no install window to open. */
.app-status p { margin: 0; font-weight: 600; }
.app-status ol { margin: 6px 0 0; padding-left: 20px; }
.app-status li { margin: 4px 0 0; font-size: 0.9375rem; line-height: 1.4; }
/* Four benefits under a hairline. The 1px gap on a line-coloured grid draws
the dividers, so they stay right at any number of columns. */
.app-perks {
display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 1px;
margin: 0; padding: 0; list-style: none;
border-top: 1px solid var(--line); background: var(--line);
}
.app-perks li {
display: flex; align-items: center; gap: 10px; padding: 16px 22px;
background: var(--paper); font-weight: 600; line-height: 1.3; color: var(--pine);
}
.app-perks .icon { width: 22px; height: 22px; color: var(--gold-deep); }
/* --- Device cards ---------------------------------------------------------- */
.app-devices { padding-top: 56px; padding-bottom: 56px; }
.app-devices .section-head, .app-faq .section-head { margin-bottom: 28px; }
.app-devices .section-head p, .app-faq .section-head p { max-width: 70ch; }
.app-platforms { gap: 24px; }
.app-platform {
gap: 20px; padding: 30px 26px 26px; background: var(--cream-card);
/* The reveal's own transitions are repeated here: an element has one transition list. */
transition: opacity .7s var(--ease-out), transform .7s var(--ease-out), border-color .25s ease, background-color .25s ease;
transition-delay: var(--reveal-delay, 0ms), var(--reveal-delay, 0ms), 0s, 0s;
}
/* A gold rule slides in along the top edge on hover, and stays on the visitor's own device. */
.app-platform::before {
content: ""; position: absolute; left: 0; right: 0; top: 0; height: 4px;
background: var(--gold); transform: scaleX(0); transform-origin: left center;
transition: transform .45s var(--ease-out);
}
.app-platform:hover { border-color: rgba(169, 109, 23, .45); background: var(--white); }
.app-platform:hover::before, .app-platform.is-current::before { transform: scaleX(1); }
.app-platform.is-current { border-color: var(--gold-deep); background: var(--white); }
.app-platform__badge {
position: absolute; top: 4px; right: 20px; padding: 5px 12px;
background: var(--pine); color: var(--text-on-dark); font-size: 0.875rem; font-weight: 700; line-height: 1.2;
}
.app-platform__head { display: grid; grid-template-columns: auto 1fr; align-items: center; gap: 16px; }
/* Neutral platform icons: one box size for all three, so the headings line up. */
.app-platform__logo { width: 64px; height: 60px; transition: transform .25s var(--ease-out); }
.app-platform:hover .app-platform__logo { transform: scale(1.06); }
.app-platform__head h3 { margin: 0; font-size: 1.4375rem; line-height: 1.25; }
.app-platform__meta { margin: 4px 0 0; font-size: 0.9375rem; line-height: 1.4; color: var(--ink-soft); }
/* "Recommended browser: Google Chrome" in the Windows and Android cards. */
.app-browser-tip {
padding: 12px 14px; border: 1px solid var(--line); background: var(--paper);
}
.app-browser-tip__title { margin: 0; font-size: 0.9375rem; font-weight: 700; line-height: 1.3; color: var(--ink); }
.app-browser-tip__note { margin: 2px 0 0; font-size: 0.875rem; line-height: 1.4; color: var(--ink-soft); }
.app-platform__note {
margin: 0; padding: 12px 14px; border-left: 3px solid var(--gold-deep); background: var(--gold-tint);
font-size: 0.9375rem; line-height: 1.45; color: var(--ink);
}
/* Tutorial video with its own play button: the browser's control bar would
sit on top of the step captions at the bottom of each video. */
.app-video { position: relative; }
.app-video__media {
display: block; width: 100%; height: auto; aspect-ratio: 4 / 5; cursor: pointer;
border: 1px solid var(--line); border-radius: 8px; background: #f1e8d6;
}
.app-video__toggle {
position: absolute; left: 50%; top: 46%; width: 68px; height: 68px; margin: -34px 0 0 -34px;
display: grid; place-items: center; border: 2px solid var(--gold); border-radius: 50%;
background: var(--pine); color: var(--gold); cursor: pointer;
transition: opacity .25s ease, transform .25s var(--ease-out), background-color .2s ease;
}
.app-video__toggle:hover { background: var(--pine-dark); transform: scale(1.06); }
.app-video__toggle:focus-visible { outline: 3px solid var(--gold); outline-offset: 3px; }
.app-video__toggle .icon { width: 30px; height: 30px; }
.app-video__pause { display: none; }
.app-video.is-playing .app-video__play { display: none; }
.app-video.is-playing .app-video__pause { display: block; }
/* While playing the button steps aside (a tap on the video pauses it),
but comes back for keyboard users who reach it. */
.app-video.is-playing .app-video__toggle { opacity: 0; pointer-events: none; }
.app-video.is-playing .app-video__toggle:focus-visible { opacity: 1; pointer-events: auto; }
/* Sound on/off under each video. Videos start silent (browsers allow only
silent videos to play by themselves); pressing play turns sound on. */
.app-video__bar { display: flex; justify-content: flex-end; margin-top: -8px; }
.app-video__sound {
display: inline-flex; align-items: center; gap: 8px; min-height: 40px; padding: 8px 14px;
border: 1px solid var(--line-strong); background: var(--cream-card); color: var(--pine);
font: inherit; font-size: 0.9375rem; font-weight: 600; cursor: pointer;
transition: border-color .2s ease, background-color .2s ease;
}
.app-video__sound:hover { border-color: var(--gold-deep); background: var(--white); }
.app-video__sound:focus-visible { outline: 3px solid var(--gold); outline-offset: 2px; }
.app-video__sound .icon { width: 20px; height: 20px; }
.app-video__audible { display: none; }
.app-video__sound.is-audible { border-color: var(--gold-deep); background: var(--gold-tint); }
.app-video__sound.is-audible .app-video__audible { display: block; }
.app-video__sound.is-audible .app-video__muted { display: none; }
/* Numbered steps: square markers joined by a thin line. */
.app-steps { display: grid; gap: 14px; margin: 0; padding: 0; list-style: none; counter-reset: app-step; }
.app-steps li { position: relative; padding-left: 42px; font-size: 1rem; line-height: 1.45; counter-increment: app-step; }
.app-steps li::before {
content: counter(app-step); position: absolute; left: 0; top: 0; width: 28px; height: 28px;
display: grid; place-items: center; background: var(--pine); color: var(--gold); font-size: 0.9375rem; font-weight: 700;
}
.app-steps li:not(:last-child)::after {
content: ""; position: absolute; left: 13.5px; top: 32px; bottom: -12px; width: 1px; background: var(--line-strong);
}
.app-platform .card-foot { padding-top: 2px; }
.app-platform .card-foot:not(:has(> :not([hidden]))) { display: none; } /* its button waits for the browser */
/* --- Mac and other devices ------------------------------------------------- */
.app-other {
display: grid; grid-template-columns: auto 1fr; align-items: start; gap: 18px;
margin-top: 24px; padding: 24px 28px; border-left: 4px solid var(--gold-deep);
}
.app-other .icon-chip { display: grid; place-items: center; width: 44px; height: 44px; border-radius: 50%; }
.app-other .icon-chip .icon { width: 22px; height: 22px; }
.app-other h3 { margin: 0 0 6px; font-size: 1rem; line-height: 1.35; }
.app-other p { margin: 0; line-height: 1.5; color: var(--ink-soft); }
.app-other strong { color: var(--ink); white-space: nowrap; } /* keeps the web address on one line */
/* --- Questions ------------------------------------------------------------- */
.app-faq { padding-bottom: 88px; }
.app-faq__grid { gap: 20px; }
.app-faq__item {
gap: 8px; padding: 24px 26px; background: var(--cream-card);
transition: opacity .7s var(--ease-out), transform .7s var(--ease-out), border-color .25s ease, background-color .25s ease;
transition-delay: var(--reveal-delay, 0ms), var(--reveal-delay, 0ms), 0s, 0s;
}
.app-faq__item:hover { border-color: rgba(169, 109, 23, .45); background: var(--white); }
.app-faq__item h3 { display: flex; align-items: flex-start; gap: 10px; margin: 0; font-size: 1rem; line-height: 1.35; }
.app-faq__item h3::before { content: ""; flex: none; width: 10px; height: 10px; margin-top: 5px; background: var(--gold); }
.app-faq__item p { margin: 0; padding-left: 20px; line-height: 1.5; color: var(--ink-soft); }
/* "Can't find it?": the browser's other routes, folded away under one step. */
.app-more { margin-top: 8px; }
.app-more summary {
display: inline-flex; align-items: center; gap: 8px; cursor: pointer; list-style: none;
font-size: 0.9375rem; font-weight: 600; color: var(--gold-ink);
}
.app-more summary::-webkit-details-marker { display: none; }
.app-more summary .icon { width: 20px; height: 20px; flex: none; }
.app-more__collapse, .app-more[open] .app-more__expand { display: none; }
.app-more[open] .app-more__collapse { display: block; }
.app-more summary:hover { text-decoration: underline; text-underline-offset: 3px; }
.app-more summary:focus-visible { outline: 3px solid var(--gold); outline-offset: 2px; }
.app-more p {
margin: 8px 0 0; padding: 10px 12px; border-left: 3px solid var(--line-strong);
background: var(--paper); font-size: 0.9375rem; line-height: 1.45; color: var(--ink);
}
/* Cards folded away on phones (script.js), and the button that shows them. */
.app-platform[hidden] { display: none; }
.app-others-toggle {
display: flex; align-items: center; justify-content: center; gap: 10px; width: 100%; min-height: 50px;
padding: 12px 16px; border: 1.5px dashed var(--line-strong); background: var(--cream-card);
font: inherit; font-weight: 600; color: var(--pine); cursor: pointer;
transition: border-color .2s ease, background-color .2s ease;
}
.app-others-toggle .icon { width: 22px; height: 22px; color: var(--gold-deep); }
.app-others-toggle:hover { border-color: var(--gold-deep); background: var(--white); }
.app-others-toggle:focus-visible { outline: 3px solid var(--gold); outline-offset: 2px; }
/* "Show me how" lands on the visitor's card below the sticky header, and a
gold ring expands once around it to say "here". */
.app-platform { scroll-margin-top: 150px; }
.app-platform:focus { outline: none; }
.app-platform.is-spotlit { animation: app-spotlight 1.2s var(--ease-out) 1; }
@keyframes app-spotlight {
from { outline: 3px solid rgba(231, 185, 95, 1); outline-offset: 0; }
to { outline: 3px solid rgba(231, 185, 95, 0); outline-offset: 14px; }
}
/* --- Smaller screens ------------------------------------------------------- */
/* The pop-out menu (1180px and below) has its own "Get the app" link;
on tablets the top bar has no room for a second one. */
@media (max-width: 980px) {
.topbar-links a[href="download.html"] { display: none; }
.app-perks { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 640px) {
.app-hero__main { flex-direction: column; gap: 16px; padding: 26px 20px; text-align: center; }
.app-hero__icon { width: 88px; height: 88px; border-radius: 19px; }
.app-hero__action { width: 100%; }
.app-perks li { padding: 14px; font-size: 0.9375rem; }
.app-devices { padding-top: 40px; padding-bottom: 40px; }
.app-platform { padding: 28px 18px 20px; scroll-margin-top: 120px; }
.app-other { grid-template-columns: 1fr; gap: 12px; padding: 20px; }
.app-faq { padding-bottom: 64px; }
}
/* ==========================================================================
13. FRONT-END QUALITY PASS (30 September 2026)
Headings in Fraunces, strong focus rings on dark bands, a tidy top bar in
every language, a hero that always fits its text on a phone, the gallery
viewer's Previous / Next buttons, and the map's loading state.
========================================================================== */
/* Headings use the display face everywhere except the admin dashboard,
which stays in the body face. */
body:not(:has(.admin-shell)):not(:has(.admin-login-screen)) :is(h1, h2, h3) { font-family: var(--font-display); }
/* On dark green and onyx bands the gold ring is 6.7:1 or better; the deeper
gold used on light pages is only 3.6:1 there. */
:is(.topbar, .hero, .page-band, .site-footer, .footer-main, .ticker, .events-panel, .pay-card,
.cta-band, .chat-panel-head, .cert-top, .auth-card-top, .lightbox) :focus-visible {
outline-color: var(--gold);
}
/* Top bar: items keep their own line, and when a longer language (Afrikaans,
isiZulu ...) needs more room, whole items drop to a second row instead of
crowding or breaking in the middle of a word. */
.topbar .container { flex-wrap: wrap; column-gap: 16px; }
.topbar-info, .topbar-links { flex-wrap: wrap; row-gap: 0; }
.topbar-info > *, .topbar-links > a { white-space: nowrap; }
.topbar-links { margin-left: auto; }
/* Between 981 and 1180px the address and the registration numbers do not both fit beside
the links in the longer languages; keep the registration numbers (the address is in
the footer and on the Contact page) so the bar stays a single row. */
@media (min-width: 981px) and (max-width: 1180px) {
.topbar-info > .topbar-hide-md:first-child { display: none; }
}
/* Hero on a phone. The hero is at least as tall as its tallest slide needs
(script.js measures it into --hero-need) and, where the browser knows the
small viewport height, no taller than the screen below the header, so the
text and both buttons are all on screen and never tucked under the header. */
@media (max-width: 640px) {
.hero-slides { min-height: max(var(--hero-need, 0px), 690px); }
.hero-content .container { padding-top: 28px; }
}
@supports (height: 1svh) {
@media (max-width: 640px) {
.hero-slides { min-height: max(var(--hero-need, 0px), min(690px, calc(100svh - 120px))); }
}
}
@supports (height: 1svh) {
@media (min-width: 641px) {
.hero-slides { min-height: clamp(650px, 76svh, 820px); }
}
}
/* The width and height attributes now on every photo (they stop the page jumping as images
load) would otherwise override this image's 4:3 crop. */
.tab-panel-body img { height: auto; }
/* Gallery viewer: Previous / Next and the "n of N" count. */
.lightbox-nav {
position: absolute;
top: 50%;
width: 46px;
height: 46px;
margin-top: -23px;
display: grid;
place-items: center;
border-radius: 50%;
border: 2px solid rgba(255,255,255,.6);
background: rgba(12, 40, 31, .55);
color: var(--white);
cursor: pointer;
}
.lightbox-nav:hover, .lightbox-close:hover { background: rgba(255,255,255,.16); }
.lightbox-nav .icon, .lightbox-close .icon { width: 24px; height: 24px; }
.lightbox-prev { left: 18px; }
.lightbox-next { right: 18px; }
.lightbox-count { margin: 0; color: var(--text-on-dark-soft); font-size: .875rem; text-align: center; }
.lightbox-close, .lightbox-nav { display: grid; place-items: center; padding: 0; }
@media (max-width: 640px) {
.lightbox-nav { top: auto; bottom: 18px; margin-top: 0; }
.lightbox-prev { left: 14px; }
.lightbox-next { right: 14px; }
.lightbox { padding-bottom: 76px; }
}
/* Map: while it loads, a soft shimmer sits behind the place name and address
(both stay readable; "Open in Google Maps" is always shown below the map). */
.map-placeholder {
background: linear-gradient(100deg, var(--paper-alt) 30%, var(--paper) 50%, var(--paper-alt) 70%) 0 0 / 250% 100%;
animation: map-shimmer 2.4s linear infinite;
}
@keyframes map-shimmer { to { background-position: -150% 0; } }
@media (prefers-reduced-motion: reduce) {
.map-placeholder { animation: none; background: var(--paper-alt); }
}
/* ==========================================================================
Motion upgrade 2026-10-01
--------------------------------------------------------------------------
Additive polish only: no colour, font, size, spacing or layout changes.
Works together with assets/js/motion.js (loaded with defer) and the
scroll-reveal in script.js. Everything is inside no-preference media
queries, so reduced-motion visitors get the plain site. To turn it all
off, delete from this comment to the end of the file (and, if wanted, the
motion.js