/* ====================================================================================================== File: sielsgrond-programme.css Path: /assets/css/eco/sielsgrond-programme.css Version: v1.14.0 Issued: 2026-08-01 Owner: Buktika Webdesk (Binka) Scope: Page-specific token binding for /eco/sielsgrond-programme.html — the Sielsgrond Programme page, nested under Eco Conservation. Structural rules (.entity-page, .sdx-btn-primary) live in /assets/css/partials/public-entity.css v1.1.0 — this file sets tokens plus the photographic hero overrides that match /assets/css/eco/restoration-programme.css exactly (the approved Programme-tier hero grammar), substituting only page tokens and the image. must carry both class="page-sielsgrond-programme entity-page". Changelog: v1.14.0 (2026-08-01): Terminal CTA retains exact canonical/Restoration structure and metrics, while its normal, hover and focus-visible treatments are explicitly bound to the governed Eco Conservation muted/mint tokens. No Restoration amber, earth, glow or lime token is used. v1.13.1 (2026-08-01): Certificate section moved from the provisional text-only measure into the existing alternating narrative layout after the owner supplied the continued-protection image. Removed the now-unused text-only measure; restrained closing emphasis retained. v1.13.0 (2026-08-01): Added a restrained text-only measure for the sixth Certificate and evidence-boundary section. The closing boundary stays plain text, using weight and foreground colour for emphasis without a banner, icon, border or nested surface. v1.12.1 (2026-08-01): Matched every page eyebrow to restoration-programme.css's governed treatment exactly (display, 2.25rem title gap, 1.1rem size, 600 weight, 1.2 line-height, 0.15em tracking and uppercase). Colour uses the equivalent Eco Conservation channel tokens: --sdx-color-eco-muted in light mode and --sdx-color-eco-mint in dark mode. v1.12.0 (2026-08-01): Owner-review refinements to the existing evidence-depth chain. Heading now reuses the preceding story sections' compact, left-aligned heading grammar with no competing divider. Removed stage top borders and node halos so one shared line remains visibly continuous behind three identical nodes. Added modest chain edge breathing room, narrowed the intro measure, and aligned the widened closing note to the chain width with a tighter vertical gap. SGP3 public name updated in markup/locale; structure unchanged. v1.11.1 (2026-08-01): Dark-mode accessibility correction for the evidence-depth chain. Introduced one shared, contrast-safe chain colour for the eyebrow, SGP codes, connector, nodes and stage rules in dark mode. All three stages remain identical in colour and weight. v1.11.0 (2026-08-01): Added the SGP evidence-depth chain rules (.sgp-chain/.sgp-stage/ .sgp-stage-inner/.sgp-code/.sgp-stage-label/.sgp-stage-body/.sgp-chain-note), replacing "Related concepts" (which used only generic .cards/.card rules from global.css — no page-specific CSS needed removing for that section). One continuous horizontal chain on desktop (CSS grid, three equal columns, a shared top hairline plus one identical node per stage via ::before pseudo-elements — no stage larger, brighter or more decorated than the others), collapsing to one vertical timeline on mobile (a left-edge line plus repositioned nodes, same technique conceptually as a connected progress rail but with no directional arrows, no colour grading and no size change between stages). Closing note styled as a restrained left-accent boundary statement, not a warning banner. v1.10.0 (2026-08-01): Added .sielsgrond-programme-narrative-layout--reverse — a mobile-only order reset (same technique as eco-conservation.css's own .eco-conservation-narrative-layout--reverse) so alternating sections can put prose before the figure in the DOM (giving text-left/image-right on desktop for free, via default grid order) while still stacking image-above-text on mobile like every other section. Owner specified an alternating image/text rhythm across the page's story sections (Polygon: image-left; Opening Record: text-left — retrofitted onto the section added last turn; Ecological Age: image-left, added this turn). No change to the non-reversed narrative-layout rules themselves. v1.9.0 (2026-07-31): OWNER-DIRECTED CORRECTION to exact parity with restoration-programme.css's own Restoration Polygon section rules — the controlling reference. Removed .sielsgrond-programme-section-body p { text-align: left }: that rule only existed to fix the v1.8.0 .section-intro lead paragraph, which is now deleted from the markup entirely (the section body carries only the eyebrow and h2, matching the sibling exactly — not a lead any more, restyled or otherwise). Removed .sielsgrond-programme-link and its hover/focus rule in full: the section now carries zero links, not a quieter one. No entity-breadcrumb CSS lived in this file to begin with (that rule set is in public-entity.css/entity-breadcrumb.css, untouched — removing the breadcrumb was a markup-only change in the .html file). v1.8.0 (2026-07-31): Added The Mapped Land image-and-prose section rules (replaces the former "What the Sielsgrond Programme is" cards, which used only generic .entity-clarify-grid/.card rules from public-entity.css — no page-specific CSS needed removing for that section). .sielsgrond-programme-section-body/-narrative-layout/-media/-prose mirror restoration-programme.css's own Restoration Polygon section rules exactly (in turn matching /assets/css/eco/eco-restoration.css's approved narrative-layout/media/prose pattern), so body typography is identical across the ECO family. Added .sielsgrond-programme-link — a quiet text-link treatment (colour-neutral text, page-accent underline, no fill/border/icon) matching public-entity.css's .entity-structure-trail link style, since this section (unlike the Restoration Polygon one) needs one contextual link and no existing page-scoped quiet-link class existed to reuse. Added .sielsgrond-programme-section-body p { text-align: left } (matched from eco-conservation.css's own .eco-conservation-section-body p rule) — without it the section-intro/lead paragraph inherited the global .section-intro centred alignment, reading inconsistently against the left-aligned eyebrow/heading above it (render-caught). v1.7.3 (2026-07-31): BUG FIX — owner reported the tagline wrapping to two lines while clearly narrower than the headline above it ("I can fit under the title, why is the tagline shorter?"). v1.7.1's max-width: 42rem was tighter than the headline's own column (60rem, inherited from .hero-content — the headline carries no max-width of its own), an inconsistency introduced at the same time as the font-size fix and never revisited. Removed; tagline now shares the same 60rem column as the headline and holds to one line at standard desktop widths. v1.7.2 (2026-07-31): BUG FIX — v1.7.1's font-size: 0.95em on .hero .tagline computed against the inherited root font-size (~16px), not the canonical clamp(1.25rem,3vw,2rem) tagline scale, collapsing the tagline to a flat ~15px instead of a ~5% trim of the real fluid size (owner render-flagged as "way too tiny"). Replaced with calc(clamp(1.25rem, 3vw, 2rem) * 0.95) — a genuine 5% reduction of the actual canonical size at every viewport, not a fixed tiny value computed off the wrong base. max-width:42rem unchanged; wording/colour/shadow/placement concept/headline untouched. v1.7.1 (2026-07-31): Owner-directed minor refinement — tagline read slightly too wide, approaching the central valley. max-width: 42rem and font-size: 0.95em added to .hero .tagline only — the font-size value was reverted in v1.7.2 above due to a unit bug. v1.7.0 (2026-07-30): OWNER-DIRECTED ROLLBACK to exact parity with the approved Restoration Programme hero. Every Sielsgrond-specific invention from v1.3.0-v1.6.0 is removed, not tuned: the two-panel grid (v1.5.0), the green content field (v1.5.0), the localized radial/directional scrims (v1.4.0/v1.6.0), the page-specific oversized/undersized headline clamps (v1.3.0-v1.6.0), the eyebrow (all prior versions), the introduction paragraph and its styling (all prior versions). Hero markup and CSS now mirror restoration-programme.css/.html line for line: - .hero-wrap / .hero / .hero > .container / .hero-content / .hero .headline / .hero .tagline rules copied verbatim from restoration-programme.css (structure, shadow values, the canonical clamp(2.75rem,6vw,4.5rem) headline, the untouched canonical .tagline size/ weight, the hero-content transform: translateY(-3rem) vertical placement, the .hero-wrap::after restrained left-edge-only gradient, the 640px mobile background-position + dual-gradient pattern) — only --hero-image and the page's own colour tokens differ. - background-position tuned from restoration-programme's own 52%/50% (desktop) and 64%/50% (mobile): this photograph's rock face sits at the extreme left edge rather than centre- right like eco-restoration's own image, so a lower percentage is needed to keep the rock face — not the central valley — under the text. Render-verified before finalising. - Markup: no eyebrow, no intro paragraph — hero contains only h1.headline and p.tagline, matching restoration-programme.html exactly. v1.6.0 (2026-07-30): OWNER-DIRECTED ROLLBACK from the two-panel grid to a plain photographic hero, but with page-specific type scale/overlay — superseded by v1.7.0 above. v1.5.0 (2026-07-30): OWNER-REJECTED v1.4.0 — split-panel hero — superseded by v1.6.0 above. v1.4.0 (2026-07-30): OWNER-REJECTED v1.3.x hero corrected again — superseded by v1.5.0 above. v1.3.1 (2026-07-30): Tagline/intro text-shadow deepened — superseded by v1.4.0 above. v1.3.0 (2026-07-30): OWNER-REJECTED v1.2.0 hero corrected to match eco-conservation.css / eco-restoration.css's governing hero system — superseded by v1.4.0 above. v1.2.0 (2026-07-30): OWNER-DIRECTED HERO PHOTOGRAPHY — superseded by v1.3.0 above. v1.1.0 (2026-07-21): Structural rules consolidated into public-entity.css (Batch 2 audit). ====================================================================================================== */ .page-sielsgrond-programme { --page-bg: var(--sdx-color-shell-bg); --page-primary: var(--sdx-color-eco-muted); --page-secondary: var(--sdx-color-eco-khaki); --page-accent: var(--sdx-color-eco-mint); --page-depth: var(--sdx-color-eco-dark-base); --hero-image: url("/assets/images/eco/conservation/eco-sielsgrond-programme-hero.webp"); } .page-sielsgrond-programme .hero-wrap { position: relative; min-height: var(--hero-min); background-image: var(--hero-image); background-size: cover; background-position: 30% 50%; } /* Restrained left-edge-only overlay — same technique and opacity range as restoration-programme.css's own approved treatment. Clears to transparent well before the image centre so the valley and right-side thicket stay bright. */ .page-sielsgrond-programme .hero-wrap::after { content: ""; position: absolute; z-index: 0; inset: 0; pointer-events: none; background: linear-gradient( to right, rgba(7, 27, 17, 0.30) 0%, rgba(7, 27, 17, 0.12) 8%, rgba(7, 27, 17, 0) 16% ); } .page-sielsgrond-programme .hero { position: relative; z-index: 1; display: flex; align-items: center; max-width: none; min-height: var(--hero-min); padding: 0; text-align: left; } .page-sielsgrond-programme .hero > .container { width: 100%; max-width: 1440px; padding-left: 1.25rem; } .page-sielsgrond-programme .hero-content { max-width: 60rem; margin: 0; text-align: left; transform: translateY(-3rem); } .page-sielsgrond-programme .hero .headline { margin: 0 0 1.5rem; font-size: clamp(2.75rem, 6vw, 4.5rem); text-shadow: 0 2px 10px rgba(0, 0, 0, 0.58); } /* Exact approved EduTower/Restoration Programme tagline treatment — colour/shadow untouched. font-size is a small owner-directed reduction; wording, colour and placement concept unchanged; headline untouched. BUG FIX (v1.7.2): font-size: 0.95em (as literally given) computes against the inherited root font-size (~16px), not the canonical clamp(1.25rem,3vw,2rem) tagline scale — that collapsed the tagline to ~15px flat instead of a ~5% trim of the real value. Expressed as calc() against the actual canonical clamp instead. BUG FIX (v1.7.3): the 42rem max-width added alongside the font-size fix was tighter than the headline's own column (60rem, inherited from .hero-content — the headline has no max-width of its own), so the tagline wrapped to two lines well short of where the headline itself reaches, with no genuine risk of the valley it was meant to guard against once the tagline had its own font-size already trimmed. Removed — the tagline now uses the same 60rem column as the headline, matching it edge to edge instead of being arbitrarily narrower. */ .page-sielsgrond-programme .hero .tagline { font-size: calc(clamp(1.25rem, 3vw, 2rem) * 0.95); color: var(--sdx-color-mama-amber); text-shadow: 0 4px 50px rgb(0, 0, 0), 0 4px 30px rgb(0, 0, 0), 0 8px 32px rgb(0, 0, 0); } @media (max-width: 640px) { .page-sielsgrond-programme .hero-wrap { background-position: 20% 50%; } .page-sielsgrond-programme .hero-wrap::after { background: linear-gradient( to top, rgba(7, 27, 17, 0.32) 0%, rgba(7, 27, 17, 0.14) 24%, rgba(7, 27, 17, 0) 44% ), linear-gradient( to right, rgba(7, 27, 17, 0.34) 0%, rgba(7, 27, 17, 0.14) 10%, rgba(7, 27, 17, 0) 20% ); } } /* The Mapped Land image-and-prose section. Layout/typography rules mirror restoration-programme.css's own Restoration Polygon section (in turn matching /assets/css/eco/eco-restoration.css's .eco-restoration-narrative-layout/-media/-prose) so body copy matches the approved ECO pattern exactly. */ .page-sielsgrond-programme .sielsgrond-programme-section-body { text-align: left; } .page-sielsgrond-programme .eyebrow { display: block; margin-bottom: 2.25rem; color: var(--sdx-color-eco-muted); font-size: 1.1rem; font-weight: 600; line-height: 1.2; letter-spacing: 0.15em; text-transform: uppercase; } html[data-theme="dark"] .page-sielsgrond-programme .eyebrow { color: var(--sdx-color-eco-mint); } .page-sielsgrond-programme .sielsgrond-programme-section-body h2 { margin: 0 0 1rem; padding: 0; border: 0; text-align: left; } .page-sielsgrond-programme .sielsgrond-programme-narrative-layout { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); align-items: center; gap: clamp(2rem, 5vw, 4.5rem); margin-top: 2.25rem; } .page-sielsgrond-programme .sielsgrond-programme-media { min-width: 0; margin: 0; } .page-sielsgrond-programme .sielsgrond-programme-media img { display: block; width: 100%; height: auto; aspect-ratio: 4 / 3; object-fit: cover; object-position: center; border-radius: 0.75rem; box-shadow: var(--card-shadow); } .page-sielsgrond-programme .sielsgrond-programme-prose { min-width: 0; } .page-sielsgrond-programme .sielsgrond-programme-prose, .page-sielsgrond-programme .sielsgrond-programme-prose p { color: var(--muted); font-family: var(--text-font); font-size: var(--body); font-weight: 400; line-height: 1.7; } .page-sielsgrond-programme .sielsgrond-programme-prose > :first-child { margin-top: 0; } .page-sielsgrond-programme .sielsgrond-programme-prose > :last-child { margin-bottom: 0; } .page-sielsgrond-programme .sielsgrond-programme-prose .sielsgrond-programme-boundary-closing { color: var(--fg); font-weight: 600; } @media (max-width: 968px) { .page-sielsgrond-programme .sielsgrond-programme-narrative-layout { grid-template-columns: 1fr; gap: 1.75rem; } /* Reverse-layout sections put prose before the figure in the DOM (so desktop's default grid order reads text-left/image-right without extra CSS) — once stacked on mobile, force the image back above the text so every section reads image-then-copy, matching the non-reversed sections. Same technique as eco-conservation.css's own .eco-conservation-narrative-layout--reverse. */ .page-sielsgrond-programme .sielsgrond-programme-narrative-layout--reverse .sielsgrond-programme-prose { order: 2; } .page-sielsgrond-programme .sielsgrond-programme-narrative-layout--reverse .sielsgrond-programme-media { order: 1; } } /* ====================================================================================================== SGP EVIDENCE-DEPTH CHAIN — "THE EVIDENCE LEVELS" section. One continuous ordered-list chain, not three independent cards: SGP1/SGP2/SGP3 are depths of accepted evidence within one continuing programme record, not a quality/rank/reward ladder. All three stages must stay visually equal — no stage larger, brighter, more saturated or more decorated than the others. ====================================================================================================== */ .page-sielsgrond-programme .sgp-evidence-depth { --sgp-chain-color: var(--page-primary); } .page-sielsgrond-programme .sgp-evidence-depth > .section-intro { max-width: 46rem; } html[data-theme="dark"] .page-sielsgrond-programme .sgp-evidence-depth { --sgp-chain-color: color-mix(in srgb, var(--page-primary) 35%, var(--fg) 65%); } .page-sielsgrond-programme .sgp-chain { position: relative; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(2rem, 4vw, 4rem); margin: 3rem 0.75rem 0; padding: 0; list-style: none; } /* Shared top hairline connecting all three stages — one continuous line, not three separate borders, so the chain reads before the detail (Gestalt continuity). */ .page-sielsgrond-programme .sgp-chain::before { content: ""; position: absolute; top: 0.15rem; left: 0; right: 0; height: 1px; background: color-mix(in srgb, var(--sgp-chain-color) 36%, var(--border) 64%); } html[data-theme="dark"] .page-sielsgrond-programme .sgp-chain::before { background: color-mix(in srgb, var(--sgp-chain-color) 70%, var(--border) 30%); } .page-sielsgrond-programme .sgp-stage { position: relative; min-width: 0; } /* Identical node per stage — same size, same colour, every time. Do not vary by stage. */ .page-sielsgrond-programme .sgp-stage::before { content: ""; position: absolute; top: -0.2rem; left: 0; width: 0.7rem; height: 0.7rem; border-radius: 50%; background: var(--sgp-chain-color); } /* Restrained stage surface — no independent border, shadow or tint. The one shared connector line remains visible behind every node without breaks. */ .page-sielsgrond-programme .sgp-stage-inner { height: 100%; padding: 1.5rem 0 0; background: transparent; } .page-sielsgrond-programme .sgp-stage-heading { display: flex; flex-direction: column; gap: 0; } .page-sielsgrond-programme .sgp-code { display: inline-block; margin-bottom: 0.55rem; font-family: var(--text-font); font-size: var(--small); font-weight: 800; letter-spacing: 0.1em; text-transform: uppercase; color: var(--sgp-chain-color); } .page-sielsgrond-programme .sgp-stage h3 { margin: 0; font-family: var(--text-font); font-size: clamp(1.2rem, 1.7vw, 1.45rem); line-height: 1.3; color: var(--fg); } /* Functional label carries the primary meaning — same size/weight across all three stages regardless of copy length (do not shrink SGP2 because it's shorter, do not grow SGP1 because it's longer). */ .page-sielsgrond-programme .sgp-stage-label { margin: 1rem 0 0; font-size: 1.0625rem; font-weight: 700; line-height: 1.45; color: var(--fg); } .page-sielsgrond-programme .sgp-stage-body { margin: 0.75rem 0 0; font-size: var(--body); line-height: 1.65; color: var(--muted); } /* Closing boundary note — a restrained programme-boundary statement (why the chain is not a quality ladder), not a warning banner: no icon, no red, no all-caps. */ .page-sielsgrond-programme .sgp-chain-note { max-width: none; margin: 1.75rem 0.75rem 0; padding: 1rem 1.25rem; border-left: 4px solid var(--page-accent); background: var(--surface-alt); color: var(--muted); font-size: var(--body); line-height: 1.65; } /* Terminal CTA — same canonical structure, spacing, typography, dimensions, shadow and alignment as Restoration Programme. Only the colour system differs: Conservation tokens throughout. */ .page-sielsgrond-programme .sdx-cta-band .sdx-btn-primary, .page-sielsgrond-programme .sdx-cta-band .sdx-btn-primary:link, .page-sielsgrond-programme .sdx-cta-band .sdx-btn-primary:visited { background: linear-gradient( 135deg, var(--sdx-color-eco-muted) 0%, color-mix(in srgb, var(--sdx-color-eco-muted) 65%, black) 100% ); } .page-sielsgrond-programme .sdx-cta-band .sdx-btn-primary:hover, .page-sielsgrond-programme .sdx-cta-band .sdx-btn-primary:focus { background: linear-gradient( 135deg, color-mix(in srgb, var(--sdx-color-eco-muted) 88%, var(--sdx-color-eco-mint) 12%) 0%, color-mix(in srgb, var(--sdx-color-eco-muted) 58%, black) 100% ); } .page-sielsgrond-programme .sdx-cta-band .sdx-btn-primary:focus-visible { outline: 3px solid var(--sdx-color-eco-mint); outline-offset: 3px; } @media (max-width: 768px) { .page-sielsgrond-programme .sgp-chain { display: block; margin-top: 2.5rem; padding-left: 2rem; } /* Shared line rotates to a vertical left-edge timeline instead of a horizontal rule. */ .page-sielsgrond-programme .sgp-chain::before { top: 0; bottom: 0; left: 0.35rem; right: auto; width: 1px; height: auto; } .page-sielsgrond-programme .sgp-stage { padding-bottom: 2.5rem; } .page-sielsgrond-programme .sgp-stage:last-child { padding-bottom: 0; } .page-sielsgrond-programme .sgp-stage::before { top: 0.25rem; left: -1.95rem; } .page-sielsgrond-programme .sgp-stage-inner { padding-top: 0; border-top: 0; } }