)
B. Adventure amenities → 2-col grid on mobile (was 1-col)
C. Read-more on 2nd paragraph in Beach / Family Life / Convenience
D. Protected Wilderness photos → horizontal swipe row on mobile
E. Section padding compressed on lifestyle pages
========================================================================== */
/* === A. QUIET TRUTHS ACCORDION =========================================== */
/* Reset native details default styling */
details.qa-card summary {
list-style: none;
outline: none;
cursor: pointer;
}
details.qa-card summary::-webkit-details-marker { display: none; }
details.qa-card summary::marker { display: none; }
/* Desktop: questions look static (all answers visible because of `open` attr in HTML).
Removing the pointer cursor signals there's no interaction needed. */
@media (min-width: 701px) {
details.qa-card summary { cursor: default; }
}
/* Mobile: chevron indicator + rotation when open */
@media (max-width: 700px) {
details.qa-card summary {
position: relative;
padding-right: 1.75rem;
margin: 0;
}
details.qa-card summary::after {
content: '';
position: absolute;
right: 0.25rem;
top: 0.55rem;
width: 10px;
height: 10px;
border-right: 2px solid var(--aqua);
border-bottom: 2px solid var(--aqua);
transform: rotate(45deg);
transition: transform 0.25s ease;
}
details.qa-card[open] summary::after {
transform: rotate(-135deg);
top: 0.75rem;
}
details.qa-card .qa-a {
margin-top: 0.85rem;
}
}
/* === B. ADVENTURE AMENITIES — 2-COL ON MOBILE ============================ */
/* Original CSS drops to 1-col at ≤560px. Override to keep 2-col down to 401px,
then fall back to 1-col only on very narrow phones. */
@media (max-width: 700px) {
.amenities-grid {
grid-template-columns: repeat(2, 1fr);
gap: 1.75rem 1rem;
max-width: none;
}
.amenity-icon {
width: 38px;
height: 38px;
margin-bottom: 0.9rem;
}
.amenity h4 {
font-size: 0.95rem;
margin-bottom: 0.4rem;
}
.amenity p {
font-size: 0.82rem;
line-height: 1.5;
}
}
@media (max-width: 400px) {
.amenities-grid {
grid-template-columns: 1fr;
}
}
/* === C. READ-MORE PATTERN (mobile-only, JS-driven) ======================= */
/* Desktop: full content visible, trigger hidden */
.readmore-trigger {
display: none;
}
@media (max-width: 700px) {
.readmore-container .readmore-content {
max-height: 0;
overflow: hidden;
opacity: 0;
transition: max-height 0.4s ease, opacity 0.25s ease;
}
.readmore-container.expanded .readmore-content {
max-height: 80em;
opacity: 1;
transition: max-height 0.5s ease, opacity 0.35s ease 0.1s;
}
.readmore-trigger {
display: inline-flex;
align-items: center;
gap: 0.4rem;
margin-top: 0.75rem;
font-size: 0.7rem;
letter-spacing: 0.2em;
text-transform: uppercase;
color: var(--aqua);
background: transparent;
border: none;
padding: 0.5rem 0;
cursor: pointer;
font-weight: 700;
font-family: inherit;
-webkit-tap-highlight-color: transparent;
}
.readmore-trigger::after {
content: '↓';
font-size: 0.9rem;
line-height: 1;
transition: transform 0.25s ease;
}
.readmore-container.expanded .readmore-trigger::after {
transform: rotate(180deg);
}
}
/* === D. PROTECTED WILDERNESS — HORIZONTAL PHOTO CAROUSEL ================= */
/* Original drops to 1-col stack at ≤800px. Override to swipeable row at ≤700px. */
@media (max-width: 700px) {
.nature-photo-grid {
display: flex;
grid-template-columns: none;
overflow-x: auto;
overflow-y: hidden;
scroll-snap-type: x mandatory;
gap: 0.75rem;
margin: 0 calc(-1 * var(--gutter));
padding: 0.25rem var(--gutter);
scrollbar-width: none;
-webkit-overflow-scrolling: touch;
}
.nature-photo-grid::-webkit-scrollbar { display: none; }
.nature-photo {
flex: 0 0 78%;
scroll-snap-align: start;
aspect-ratio: 4/3;
}
}
/* === E. LIFESTYLE PAGE SECTION PADDING COMPRESSION ======================= */
/* Reduce section padding on mobile for the lifestyle page specifically.
14 sections × ~96px padding adds up to a lot of dead vertical space. */
@media (max-width: 700px) {
body.lifestyle-page .section-pad {
padding-top: clamp(2.25rem, 5vw, 3.25rem);
padding-bottom: clamp(2.25rem, 5vw, 3.25rem);
}
}
/* ==========================================================================
PHASE 3 & 4 PAGE — MOBILE UX PASS
- Read-more containers added to multiple text-heavy sections (uses existing
.readmore-container / .readmore-content / .readmore-trigger pattern,
wired up by js/lifestyle-mobile.js which is now also loaded on this page).
- Stack side-by-side image grids to full-width single column on mobile.
========================================================================== */
/* Stack 2-up image grids on mobile so each image gets full width
(Showcase interiors + Featured Plan renders) */
@media (max-width: 700px) {
.mobile-stack-grid {
grid-template-columns: 1fr !important;
}
}
/* ==========================================================================
MOBILE — HERO TEXT BIGGER + WHITE-OVER-IMAGE READABILITY
Builds on the earlier "hero fits above the fold" pass. This pass:
- Bumps hero title + price typography for impact
- Strengthens dark gradient overlays so white text contrasts cleanly
- Adds subtle text-shadow to all white-text-over-image elements
========================================================================== */
@media (max-width: 700px) {
/* === HERO TYPE (phase pages — .hero class) ============================= */
.hero-title {
font-size: clamp(2.5rem, 10vw, 3.5rem);
line-height: 1.0;
text-shadow: 0 1px 8px rgba(0, 0, 0, 0.4);
}
.hero-meta {
font-size: 1rem;
font-weight: 500;
color: rgba(255, 255, 255, 0.96);
text-shadow: 0 1px 6px rgba(0, 0, 0, 0.4);
}
.hero-meta strong {
font-size: clamp(2rem, 7vw, 2.8rem);
text-shadow: 0 2px 10px rgba(0, 0, 0, 0.45);
}
/* === HERO TYPE (landing pages — .lp-hero on b2b/b2c) =================== */
.lp-hero h1 {
font-size: clamp(2.5rem, 9vw, 3.5rem);
line-height: 1.05;
text-shadow: 0 1px 8px rgba(0, 0, 0, 0.4);
}
.lp-hero p.lead {
font-size: 1.05rem;
color: rgba(255, 255, 255, 0.95);
text-shadow: 0 1px 6px rgba(0, 0, 0, 0.4);
}
/* === GRADIENT OVERLAYS — stronger darkening on mobile ================== */
/* Phase-page hero: deeper bottom gradient since text anchors to bottom */
.hero-bg::after {
background: linear-gradient(
180deg,
rgba(15, 30, 66, 0.25) 0%,
rgba(15, 30, 66, 0) 30%,
rgba(15, 30, 66, 0.55) 65%,
rgba(15, 30, 66, 0.88) 100%
);
}
/* LP-hero: original 110deg left-to-right gradient was tuned for desktop's
2-column hero. On mobile content stacks vertically, so switch to a
top-to-bottom gradient that covers the whole hero evenly. */
.lp-hero .hero-bg::after {
background: linear-gradient(
180deg,
rgba(15, 30, 66, 0.5) 0%,
rgba(15, 30, 66, 0.7) 70%,
rgba(15, 30, 66, 0.85) 100%
);
}
/* === IMAGE BREAK OVERLAYS — readable on mobile ========================= */
/* Original 55% left-fade is too subtle. Mobile gets a stronger
top-to-bottom darkening with text sitting in the deepest band. */
.image-break-overlay {
background: linear-gradient(
180deg,
rgba(15, 30, 66, 0.35) 0%,
rgba(15, 30, 66, 0.55) 50%,
rgba(15, 30, 66, 0.8) 100%
);
}
.image-break-text h2,
.image-break-text .display,
.image-break-text .image-break-h2-xl {
text-shadow: 0 2px 12px rgba(0, 0, 0, 0.45);
}
.image-break-text p {
color: rgba(255, 255, 255, 0.96);
text-shadow: 0 1px 6px rgba(0, 0, 0, 0.4);
}
.image-break-text .eyebrow {
text-shadow: 0 1px 4px rgba(0, 0, 0, 0.4);
}
}
/* ==========================================================================
HOMES-FOR-SALE — MOBILE SIMPLIFICATIONS
- Hide the filter bar (4 selects + reset + search) — with only 5 listings,
filtering on a small screen adds friction without value.
- Hide the "Welgedaan Estate · House Builds In Progress" crumb on mobile —
the H1 below it already says what the page is about.
========================================================================== */
@media (max-width: 700px) {
.listings-filterbar {
display: none;
}
.page-header .crumb {
display: none;
}
}
/* ==========================================================================
MOBILE — 4-ITEM STAT STRIPS → 2×2 GRID
Each affected pattern currently uses repeat(auto-fit, minmax(200-220px, 1fr))
which collapses to 1 column at narrow widths — stacking 4 items vertically
takes ~4 screens of scroll. Forcing 2×2 cuts that to ~2 screens.
========================================================================== */
@media (max-width: 700px) {
/* ---- 1. Phase pages stats strip (phase-2: 30/7/R990k/1.8km, phase-3-4: R420k/R2.8m/HAB/North) ---- */
.site-plan-legend {
grid-template-columns: repeat(2, 1fr) !important;
gap: 1.5rem 1rem !important;
}
.stats-strip .legend-item {
padding-left: 0.85rem;
}
.stats-strip .legend-item strong {
font-size: 1.85rem;
}
/* ---- 2. b2c Smart Move stats (Capital Growth / Hectares / Sold / Phase) ---- */
.smart-stats {
grid-template-columns: repeat(2, 1fr) !important;
gap: 0.85rem !important;
}
/* Tighten internal padding of each stat card */
.smart-stats > div {
padding: 1.25rem !important;
}
/* ---- 3. b2b 4-entry price boxes (Stand-Only / Apartments / Turnkey / Plot+Plan) ---- */
.b2b-stat-grid {
grid-template-columns: repeat(2, 1fr) !important;
gap: 0.85rem !important;
}
.b2b-stat-grid > div {
padding: 1.25rem !important;
}
/* Scale down the big "From R420k" line so it fits the half-width cell.
Targets the 2nd direct child div of each card (the price line). */
.b2b-stat-grid > div > div:nth-of-type(2) {
font-size: 1.7rem !important;
}
}
/* ==========================================================================
READMORE CONTAINER — spacing fix inside .split-text
The .split-text { p + p } rule normally gives 1.25rem between paragraphs,
but the readmore wrapper interrupts that sibling selector. This rule
restores the same spacing for paragraphs that live inside the wrapper,
so the flow reads identically to two consecutive tags on desktop.
========================================================================== */
.split-text > .readmore-container {
margin-top: 1.25rem;
}
.split-text .readmore-content > p {
margin: 0;
}
/* ==========================================================================
TEMPORARILY HIDE: Other Developments
Hides every nav and footer link pointing to other-developments.html across
the whole site. Markup stays in place so the page can be re-exposed any
time by simply removing this rule.
========================================================================== */
li:has(> a[href="other-developments.html"]) {
display: none;
}
/* ==========================================================================
LEGAL — modal, policy page chrome, consent checkboxes, footer link row.
Appended for the POPIA legal-pages spec (LAUNCH-PLAN.md §4.F).
Tokens reused: --navy, --navy-deep, --aqua, --sand, --easing, --gutter.
No new colour values introduced.
========================================================================== */
/* --- sr-only utility — visually hidden, screen-reader accessible ---------- */
.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;
}
/* --- Legal pages (standalone view) ---------------------------------------
When a user visits privacy-policy.html / terms-and-conditions.html directly,
sits at body level and needs container padding
plus readable typography. When inside .legal-modal-body those constraints
are removed (see below). */
body > main.legal-content {
max-width: 820px;
margin: 0 auto;
padding: calc(var(--section-pad) + 4rem) var(--gutter) var(--section-pad);
background: var(--white);
color: var(--ink);
}
body > main.legal-content .legal-title {
font-size: clamp(1.875rem, 4vw, 2.75rem);
font-weight: 300;
letter-spacing: -0.015em;
color: var(--navy-deep);
margin-bottom: 0.5rem;
}
body > main.legal-content .legal-meta {
font-size: var(--f-sm);
color: var(--grey);
margin-bottom: 2.5rem;
padding-bottom: 1.5rem;
border-bottom: 1px solid var(--line);
}
/* Shared (standalone + in-modal) legal-content typography */
main.legal-content section { margin: 2rem 0 2.5rem; }
main.legal-content h2 {
font-size: clamp(1.125rem, 2vw, 1.375rem);
font-weight: 600;
color: var(--navy);
margin-bottom: 1rem;
letter-spacing: -0.005em;
}
main.legal-content p,
main.legal-content ul,
main.legal-content ol,
main.legal-content address {
font-size: 0.95rem;
line-height: 1.7;
color: var(--ink);
margin-bottom: 1rem;
}
main.legal-content ul,
main.legal-content ol { padding-left: 1.5rem; }
main.legal-content li { margin-bottom: 0.35rem; }
main.legal-content address {
font-style: normal;
padding: 1rem 1.25rem;
background: var(--sand);
border-left: 3px solid var(--aqua);
border-radius: 4px;
font-size: 0.9rem;
}
main.legal-content a {
color: var(--navy);
text-decoration: underline;
text-decoration-thickness: 1px;
text-underline-offset: 2px;
}
main.legal-content a:hover { color: var(--aqua); }
main.legal-content code {
font-family: 'SFMono-Regular', Consolas, 'Liberation Mono', monospace;
font-size: 0.85em;
padding: 0.1rem 0.35rem;
background: var(--sand);
border-radius: 3px;
}
/* --- .legal-link — small underlined link used in form labels & footer ----- */
.legal-link {
color: var(--navy);
text-decoration: underline;
text-decoration-thickness: 1px;
text-underline-offset: 2px;
transition: color 0.15s ease;
}
.legal-link:hover,
.legal-link:focus-visible { color: var(--aqua); }
/* --- Legal modal --------------------------------------------------------- */
.legal-modal { position: fixed; inset: 0; z-index: 9999; }
.legal-modal-backdrop {
position: absolute;
inset: 0;
background: rgba(15, 30, 66, 0.72);
display: flex;
align-items: center;
justify-content: center;
padding: var(--gutter);
animation: legal-modal-backdrop-in 0.18s var(--easing);
}
.legal-modal-container {
background: var(--white);
width: 100%;
max-width: 720px;
max-height: 85vh;
border-radius: 12px;
box-shadow: 0 24px 60px rgba(15, 30, 66, 0.35);
overflow: hidden;
display: flex;
flex-direction: column;
animation: legal-modal-in 0.18s var(--easing);
}
.legal-modal-header {
flex-shrink: 0;
display: flex;
align-items: center;
justify-content: space-between;
padding: 1.1rem 1.5rem;
background: var(--navy);
color: var(--white);
}
.legal-modal-title {
margin: 0;
font-size: 1.125rem;
font-weight: 500;
letter-spacing: -0.005em;
color: var(--white);
}
.legal-modal-close {
background: transparent;
border: 0;
color: var(--white);
width: 36px;
height: 36px;
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
cursor: pointer;
transition: background 0.15s ease;
margin-left: 1rem;
}
.legal-modal-close:hover { background: rgba(255, 255, 255, 0.12); }
.legal-modal-close:focus-visible {
outline: 2px solid var(--aqua);
outline-offset: 2px;
}
.legal-modal-body {
flex: 1;
overflow-y: auto;
padding: 1.75rem 1.75rem 2rem;
background: var(--white);
-webkit-overflow-scrolling: touch;
}
/* In-modal overrides — drop the standalone container constraints. */
.legal-modal-body > main.legal-content {
max-width: none;
margin: 0;
padding: 0;
background: transparent;
}
.legal-modal-body main.legal-content .legal-title {
font-size: 1.5rem;
margin-bottom: 0.25rem;
}
.legal-modal-body main.legal-content .legal-meta {
margin-bottom: 1.75rem;
padding-bottom: 1rem;
}
.legal-modal-body main.legal-content section { margin: 1.25rem 0 1.5rem; }
.legal-modal-body main.legal-content h2 {
font-size: 1.05rem;
margin-bottom: 0.65rem;
}
body.legal-modal-open { overflow: hidden; }
/* Tablet — modal fills more of the viewport */
@media (max-width: 768px) {
.legal-modal-backdrop { padding: 1rem; }
.legal-modal-container {
max-width: none;
width: 100%;
max-height: 92vh;
border-radius: 10px;
}
.legal-modal-body { padding: 1.25rem 1.25rem 1.5rem; }
}
/* Phone — full-bleed, 44px close target */
@media (max-width: 480px) {
.legal-modal-backdrop {
padding: 0;
align-items: stretch;
justify-content: stretch;
}
.legal-modal-container {
max-height: none;
height: 100vh;
border-radius: 0;
animation: legal-modal-in-mobile 0.25s var(--easing);
}
.legal-modal-header { padding: 1rem 1.1rem; }
.legal-modal-close { width: 44px; height: 44px; }
.legal-modal-body { padding: 1.1rem 1.1rem 1.5rem; }
}
@keyframes legal-modal-backdrop-in {
from { opacity: 0; }
to { opacity: 1; }
}
@keyframes legal-modal-in {
from { opacity: 0; transform: translateY(8px); }
to { opacity: 1; transform: translateY(0); }
}
@keyframes legal-modal-in-mobile {
from { opacity: 0; transform: translateY(24px); }
to { opacity: 1; transform: translateY(0); }
}
@media (prefers-reduced-motion: reduce) {
.legal-modal-backdrop,
.legal-modal-container { animation: none; }
}
/* --- Form consent block (3 checkboxes inside