section that is NOT a .dynamic-header / .dynamic-body. (Hero image handling for these pages lives in §10.) */ .website-theme main > section:not(.dynamic-header):not(.dynamic-body) { --card: #1a2332; --card-foreground: #eef3f8; --popover: #1a2332; --popover-foreground: #eef3f8; --input: rgba(255, 255, 255, 0.14); --border: rgba(255, 255, 255, 0.1); --muted: #223047; --muted-foreground: rgba(240, 244, 248, 0.7); } .website-theme main > section.bg-brand-snow:not(.dynamic-header):not(.dynamic-body) { background: #0f1419 !important; } .website-theme main > section:not(.dynamic-header):not(.dynamic-body) :is(.bg-white, .bg-brand-snow, .bg-brand-snow\/90, .bg-brand-snow\/70) { background-color: #1a2332 !important; border-color: rgba(255, 255, 255, 0.08) !important; } .website-theme main > section:not(.dynamic-header):not(.dynamic-body) :is(.text-brand-charcoal, .text-brand-deep, [class*="text-brand-deep/"], [class*="text-brand-charcoal/"]) { color: rgba(240, 244, 248, 0.82) !important; } /* ============================================================================ Whakapapa Conditions panel — Option A "Editorial light" skin (v2, readable) Paste into: Admin -> Setup & Configuration -> Site Appearance & Content -> Raw CSS (Replace the previous block with this one.) ---------------------------------------------------------------------------- v2 uses EXPLICIT, self-consistent colours instead of the site theme variables, so the panel is always dark-text-on-light-surface and readable no matter what palette the club has configured. Everything is scoped under #conditions and uses !important on colours/backgrounds so it reliably wins. Tweak the palette in the first block to taste. ============================================================================ */ /* Neutralise EVERY themed border inside the panel to the light line colour, so a dark club --border can never show through as a black line (e.g. between the Mountain Conditions rows). */ #conditions .border-border, #conditions [class*="border-border"] { border-color: var(--w-line) !important; } #conditions { --w-paper: #ffffff; /* panel + summary tiles */ --w-snow: #f5f8f6; /* nested chips / trails / road box */ --w-mist: #e9ebe9; /* table header + zebra */ --w-line: #d8ded9; /* borders / dividers */ --w-ink: #1c211d; /* body text */ --w-charcoal:#21362b; /* headings / key figures */ --w-muted: #566058; /* muted text (AA on white and snow) */ --w-teal: #57b3ab; /* keyline / underline / live ring (accents) */ --w-teal-ink:#2b7a72; /* accent used AS TEXT (passes contrast) */ --w-ok: #1f7a3d; --w-ok-bg: #e4f3e9; --w-warn: #8a5a10; --w-warn-bg: #f7eed7; --w-bad: #b4271f; --w-bad-bg: #f7e0de; --w-soon: #566058; --w-soon-bg: #eceeec; } /* ---- the panel: a white card lifted off the page ------------------------ */ #conditions.wcx-panel { background: var(--w-paper) !important; border: 1px solid var(--w-line) !important; border-radius: 14px; box-shadow: 0 1px 2px rgba(23,35,28,.06), 0 10px 26px -14px rgba(23,35,28,.22); padding: 0 !important; overflow: hidden; } /* ---- header ------------------------------------------------------------- */ #conditions .wcx-head { position: relative; align-items: flex-end; gap: 12px 20px; margin: 0; padding: 20px 22px 16px; border-bottom: 1px solid var(--w-line); } #conditions .wcx-head::before { content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 4px; background: var(--w-teal); } #conditions .wcx-eyebrow { margin: 0 0 3px; color: var(--w-teal-ink) !important; letter-spacing: .14em; font-size: 11px; } #conditions .wcx-title { margin: 0; color: var(--w-charcoal) !important; font-size: clamp(20px, 3.6vw, 26px); line-height: 1.06; letter-spacing: -.03em; } #conditions .wcx-updated { margin-top: 4px; font-size: 12.5px; color: var(--w-muted) !important; } #conditions .wcx-head-meta { flex-direction: column; align-items: flex-end; gap: 6px; } /* live cue */ #conditions .wcx-live { color: var(--w-ok) !important; letter-spacing: .1em; text-transform: uppercase; font-size: 11px; } #conditions .wcx-live-dot { background-color: var(--w-ok) !important; animation: wcx-pulse 2.4s ease-out infinite; } @keyframes wcx-pulse { 0% { box-shadow: 0 0 0 0 rgba(31,122,61,.5); } 70% { box-shadow: 0 0 0 7px rgba(31,122,61,0); } 100% { box-shadow: 0 0 0 0 rgba(31,122,61,0); } } @media (prefers-reduced-motion: reduce) { #conditions .wcx-live-dot { animation: none; } } /* ---- body spacing ------------------------------------------------------- */ #conditions .wcx-summary, #conditions > .grid, #conditions > #whakapapa-mountain-conditions { margin-left: 22px; margin-right: 22px; } #conditions > #whakapapa-mountain-conditions { margin-bottom: 22px; } #conditions .wcx-summary { margin-top: 18px; } /* ---- summary strip: all four stats on ONE line, white tiles + hairlines -- */ #conditions .wcx-summary { grid-template-columns: repeat(4, 1fr) !important; /* one line, always */ gap: 1px; background: var(--w-line); border: 1px solid var(--w-line); border-radius: 12px; overflow: hidden; } #conditions .wcx-stat { background: var(--w-paper) !important; border: 0 !important; border-radius: 0; padding: 13px 15px; } #conditions .wcx-stat-label { color: var(--w-muted) !important; letter-spacing: .08em; margin-bottom: 2px; } #conditions .wcx-stat-value { color: var(--w-charcoal) !important; font-size: 22px; line-height: 1.1; letter-spacing: -.02em; font-variant-numeric: tabular-nums; } #conditions .wcx-stat-value.wcx-tone-ok { color: var(--w-ok) !important; } #conditions .wcx-stat-value.wcx-tone-accent { color: var(--w-teal-ink) !important; } #conditions .wcx-stat-sub { color: var(--w-muted) !important; margin-top: 1px; } /* ---- grouped sections: transparent, with a teal-underlined title -------- */ #conditions .wcx-group { background: transparent !important; border: 0 !important; border-radius: 0; padding: 4px 0 0 !important; } #conditions .wcx-group-title { display: inline-block; margin: 0 0 12px; padding-bottom: 7px; border-bottom: 2px solid var(--w-teal); color: var(--w-charcoal) !important; font-size: 13px; letter-spacing: -.01em; text-transform: uppercase; } /* nested cards (facility items, trails) sit on snow */ #conditions .wcx-item, #conditions .wcx-trail { background: var(--w-snow) !important; border: 1px solid var(--w-line) !important; border-radius: 10px; padding: 10px 12px; } #conditions .conditions-trail-name, #conditions [class$="-status-description"] { color: var(--w-ink) !important; font-size: 13.5px; } #conditions .conditions-trail-details { color: var(--w-muted) !important; } #conditions #whakapapa-trails h4 { color: var(--w-muted) !important; } /* road box on snow */ #conditions #whakapapa-road-status > div { background: var(--w-snow); border: 1px solid var(--w-line); border-radius: 10px; padding: 12px 14px; } #conditions #whakapapa-road-status dt { color: var(--w-muted) !important; } #conditions #whakapapa-road-status dd, #conditions #whakapapa-road-status .text-muted-foreground { color: var(--w-ink) !important; } /* ---- status pills: explicit, readable semantic colours ----------------- */ #conditions .bg-success-3 { background-color: var(--w-ok-bg) !important; color: var(--w-ok) !important; } #conditions .bg-danger-3 { background-color: var(--w-bad-bg) !important; color: var(--w-bad) !important; } #conditions .bg-warning-3 { background-color: var(--w-warn-bg)!important; color: var(--w-warn)!important; } #conditions .bg-muted { background-color: var(--w-soon-bg)!important; color: var(--w-soon)!important; } #conditions .conditions-trail-status { width: auto; align-self: flex-start; padding: 3px 10px; font-size: 11px; font-weight: 700; } /* ---- conditions table --------------------------------------------------- */ #conditions .wcx-conditions-table { font-size: 13.5px; } #conditions .wcx-conditions-table thead th { padding: 11px 14px; background: var(--w-mist) !important; color: var(--w-muted) !important; border-bottom: 1px solid var(--w-line); letter-spacing: .06em; } #conditions .wcx-conditions-table tr { border-color: var(--w-line) !important; } #conditions .wcx-conditions-table td { padding: 11px 14px; color: var(--w-ink) !important; font-variant-numeric: tabular-nums; border-top: 1px solid var(--w-line) !important; } /* explicit row fills so a dark theme surface can never show through */ #conditions .wcx-conditions-table tbody tr:nth-child(odd) td { background: var(--w-paper) !important; } #conditions .wcx-conditions-table tbody tr:nth-child(even) td { background: var(--w-snow) !important; } #conditions .wcx-conditions-table td:first-child { color: var(--w-charcoal) !important; font-weight: 600; } #conditions .wcx-conditions-table td:nth-child(5) { color: var(--w-teal-ink) !important; font-weight: 700; } /* ========================================================================== 10. Join / Contact (bespoke pages) — tall image hero like the reference. These pages' heros are

(not .dynamic-header). Turn them into a tall hero with the photo, a dark overlay, bottom-aligned content and a huge uppercase Oswald title. (The membership-tier cards use the design classes, backed by the §5 utilities which apply across all

content.) ========================================================================== */ /* Hero frame + photo for the bespoke pages (join, contact, join/apply). */ .website-theme main > section.bg-gradient-to-br:not(.dynamic-header) { position: relative; min-height: 62vh; display: flex; flex-direction: column; justify-content: flex-end; padding-top: 8rem; padding-bottom: 5rem; overflow: hidden; background-image: linear-gradient(to bottom, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 1) 100%), url('/api/images/uploaded/join2.jpg'); background-size: cover; background-position: center; background-repeat: no-repeat; } /* /join/apply omits the extra bottom gradient (plain image). */ .website-theme:has(footer[data-page-slug="join/apply"]) main > section.bg-gradient-to-br:not(.dynamic-header) { background-image: url(/api/images/uploaded/hero-alpine-warmth.jpg); } .website-theme:has(footer[data-page-slug="join"]) main > section.bg-gradient-to-br h1 { max-width: 50rem; } .website-theme main > section.bg-gradient-to-br:not(.dynamic-header)::after { content: ""; position: absolute; inset: 0; z-index: 0; background: linear-gradient(to top, rgba(15, 20, 25, 0.95) 0%, rgba(15, 20, 25, 0.55) 55%, rgba(15, 20, 25, 0.3) 100%), linear-gradient(to right, rgba(15, 20, 25, 0.6) 0%, rgba(15, 20, 25, 0) 65%); } .website-theme main > section.bg-gradient-to-br:not(.dynamic-header) > div { position: relative; z-index: 1; width: 100%; } .website-theme main > section.bg-gradient-to-br:not(.dynamic-header) h1 { font-family: var(--font-theme-oswald), "Oswald", sans-serif; text-transform: uppercase; font-weight: 700; color: #fff; line-height: 0.88; letter-spacing: -0.01em; font-size: clamp(2.75rem, 8vw, 6.5rem); margin-top: 1rem; } /* Join "How To Join" steps: hovering a step turns its number orange (like the /rules page). These steps are

with a faint text-white/10 number but no `group` class, so drive it from the step's own :hover. Scoped to the join page via the footer slug. */ .website-theme:has(footer[data-page-slug="join"]) main .flex.gap-6 > .text-white\/10 { transition: color 0.3s ease; } .website-theme:has(footer[data-page-slug="join"]) main .flex.gap-6:hover > .text-white\/10 { color: #ff7c12 !important; } /* Reusable button classes */ .website-theme .btn-big-blue, .website-theme .btn-big-clear { display: inline-flex !important; align-items: center; justify-content: center; gap: 0.5rem; text-transform: uppercase !important; letter-spacing: 0.15em; font-weight: 700; font-size: 0.9rem; line-height: 1; padding: 1.05rem 2.4rem !important; border: 1px solid transparent; border-radius: 0 !important; text-decoration: none !important; cursor: pointer; transition: all 0.3s ease; } .website-theme .btn-big-blue svg, .website-theme .btn-big-clear svg { width: 1.15rem; height: 1.15rem; } /* Solid cyan — the menu "Book Now" button */ .website-theme .btn-big-blue { background: #00b4d8 !important; color: #fff !important; border-color: transparent !important; box-shadow: 0 0 24px rgba(0, 180, 216, 0.3); } .website-theme .btn-big-blue:hover { background: #0096b4 !important; color: #fff !important; box-shadow: 0 0 34px rgba(0, 180, 216, 0.55); } /* Outline / transparent — the home "Explore The Lodge" button */ .website-theme .btn-big-clear { background: transparent !important; color: #fff !important; border-color: rgba(255, 255, 255, 0.25) !important; box-shadow: none; backdrop-filter: blur(2px); } .website-theme .btn-big-clear:hover { background: rgba(255, 255, 255, 0.07) !important; color: #fff !important; border-color: rgba(255, 255, 255, 0.4) !important; } /* 11. Legal / policy pages (Terms, Privacy, FAQ) — .website-legal-copy is authored for a light theme (dark text) and reads dark-on-dark on the dark body. Recolour it to match the other pages. */ .dynamic-body .website-legal-copy { color: rgba(240, 244, 248, 0.8); } .dynamic-body .website-legal-copy :is(h2, h3) { color: #fff; } .dynamic-body .website-legal-copy strong { color: #fff; } .dynamic-body .website-legal-copy a { color: #00b4d8; } .dynamic-body .website-legal-copy a:hover { color: #7fe0f5; } .dynamic-body .website-legal-copy summary { color: #fff; } .dynamic-body .website-legal-copy details { background: #1a2332; border-color: rgba(255, 255, 255, 0.08); } .dynamic-body .website-legal-callout { background: #1a2332; border-color: rgba(255, 255, 255, 0.08); } /* App links (.website-link) — Contact page phone / email / Facebook, etc. Authored dark, so invisible on the dark theme; make them cyan to match. */ .website-theme main .website-link { color: #00b4d8; } .website-theme main .website-link:hover { color: #7fe0f5; } .website-theme main { & .max-w-2xl { max-width: 100%; } } /* Fix white-on-white issue for help widget panel */ [data-testid="help-widget-panel"] { background-color: #ffffff !important; color: #1a1a1a !important; border: 1px solid #e2e8f0 !important; box-shadow: 0 10px 25px -5px rgba(0, 0, 0, 0.1), 0 8px 10px -6px rgba(0, 0, 0, 0.1) !important; border-radius: 0.75rem !important; overflow: hidden; } /* Ensure child headers, titles, text, and paragraphs inside the panel inherit dark text */ [data-testid="help-widget-panel"] *, [data-testid="help-widget-panel"] h1, [data-testid="help-widget-panel"] h2, [data-testid="help-widget-panel"] h3, [data-testid="help-widget-panel"] p, [data-testid="help-widget-panel"] span, [data-testid="help-widget-panel"] label { color: #1f2937 !important; } /* Style links and interactive buttons inside the panel */ [data-testid="help-widget-panel"] a { color: #2563eb !important; text-decoration: underline; } [data-testid="help-widget-panel"] button { background-color: #f3f4f6 !important; color: #111827 !important; border: 1px solid #d1d5db !important; } [data-testid="help-widget-panel"] button:hover { background-color: #e5e7eb !important; } /* styling the info panels */ .dynamic-body .lwtc-card{transition:border-color .2s ease, box-shadow .2s ease;} .dynamic-body .lwtc-card:hover{border-color:rgba(255,255,255,.6);box-shadow:0 0 0 1px rgba(255,255,255,.22);} .dynamic-body .lwtc-card-orange-warning{border-color:#ff7c12;} .dynamic-body .lwtc-card-orange:hover{border-color:#ff7c12;} /* Restore the old app-theme look of the booking forms (forms only). */ #bookingRequestForm { width: 60% } #schoolBookingForm{ width: 60% } /* App sub-headings used League Spartan, not the website's Oswald. */ .dynamic-body[data-page-slug="booking-requests"] :is(h1,h2,h3,h4), .dynamic-body[data-page-slug="school-bookings"] :is(h1,h2,h3,h4) { font-family: var(--font-theme-league-spartan), system-ui, sans-serif; } /* Centre the card, the way the old layout did (optional). */ .dynamic-body[data-page-slug="booking-requests"] .max-w-2xl, .dynamic-body[data-page-slug="school-bookings"] .max-w-2xl { margin-inline: auto; } /* Light mode: match the app's input border + focus ring. */ .dynamic-body[data-page-slug="booking-requests"], .dynamic-body[data-page-slug="school-bookings"] { --input: #777c81; --ring: #777c81; } /* Dark mode: the app form used a DARK card; restore the full app dark palette and darken the form band so the card sits on it as before. */ @media (prefers-color-scheme: dark) { .dynamic-body[data-page-slug="booking-requests"], .dynamic-body[data-page-slug="school-bookings"] { background-color: #1c1d1e; --background: #1c1d1e; --foreground: #edeeef; --card: #151617; --card-foreground: #edeeef; --popover: #151617; --popover-foreground: #edeeef; --primary: #a8beff; --primary-foreground: #1a2135; --secondary: #242526; --secondary-foreground: #edeeef; --muted: #242526; --muted-foreground: #b6b9bc; --accent: #2a2b2d; --accent-foreground: #edeeef; --border: #383a3d; --input: #787c7f; --ring: #787c7f; } } /* Date-input calendar icon → grey (WebKit/Chromium; the native glyph is black and hard to see on the booking forms). */ #bookingRequestForm input[type="date"]::-webkit-calendar-picker-indicator, #schoolBookingForm input[type="date"]::-webkit-calendar-picker-indicator { filter: brightness(0) invert(0.55); /* force to black, then lift to mid-grey */ opacity: 0.9; cursor: pointer; } @media (prefers-color-scheme: dark) { #bookingRequestForm input[type="date"]::-webkit-calendar-picker-indicator, #schoolBookingForm input[type="date"]::-webkit-calendar-picker-indicator , #joinApplyForm input[type="date"]::-webkit-calendar-picker-indicator{ filter: brightness(0) invert(0.7); /* lighter grey on the dark card */ } }

Gallery