/* ====================================================================================================== File: restoration-programme.css Path: /assets/css/eco/restoration-programme.css Version: v1.13.0 Issued: 2026-07-31 Owner: Buktika Webdesk (Binka) Scope: Page-specific token binding for /eco/restoration-programme.html — the Restoration Programme page, nested under Eco Restoration. Shares the eco-restoration colour family, distinguished by a brighter lime hero blend (RP1-RP7 active works track). 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/eco-restoration.css and /assets/css/eco/eco-conservation.css. must carry both class="page-restoration-programme entity-page". Changelog: v1.13.0 (2026-07-31): Fixed the lightbox caption rendering far wider than the image when gallery arrows are visible (.lightbox-inner/.lightbox-media switch to a wide flex row to make room for the arrows; the v1.12.0 width:100% override stretched the caption to that full row). Capped the caption back to max-width:min(90vw,640px) and centred it instead of stretching it. Same fix applied to /eco/eco-restoration.html and /eco/eco-conservation.html. v1.12.0 (2026-07-31): Added the canonical EduTower media-lightbox to all six narrative-section photographs — same pattern as .page-eco-conservation (assets/css/eco/eco-conservation.css): a page-scoped .media-thumb reset (block, no border/padding/background, cursor:zoom-in) on .restoration-programme-media, plus a #media-lightbox .lightbox-caption sizing override (full-width, not the shared component's default narrow inline-flex item) for the title+description caption pairs. Shared component files (media-lightbox.css/.js) unchanged. v1.11.0 (2026-07-31): Terminal CTA consolidated to one. The page previously ended with two CTAs — the inset "Explore Eco Guilds on the map" card (inside a .sdx-card-section, bright-green left border) followed by the canonical .sdx-cta-band ("See the Eco Restoration channel"). The inset card is gone; its copy now lives in the single canonical .sdx-cta-band. Added a .sdx-cta-band .sdx-btn-primary override so the CTA button uses the same governed --sdx-color-green-deep as this page's eyebrow and RP7 circles, instead of the lighter restoration-glow lime that .sdx-btn-primary resolves to by default. v1.10.0 (2026-07-31): Four RP7-section refinements per owner review: (1) connector line opacity mix reduced 32%→16% so the numbered circles stay dominant over the line (applies to both the desktop horizontal line and the mobile vertical line); (2) closing statement's top margin increased 2.5rem→4.5rem so it reads as a conclusion, not a sixth paragraph; (3) closing statement given more authority via weight 400→600 and colour var(--muted)→var(--fg) — no border, background or icon, so it stays a plain paragraph rather than becoming a callout/warning box; (4) the section's own h2 scoped down from the page's standard clamp(1.375rem,3.5vw,2rem) to clamp(1.25rem,3vw,1.75rem) — RP7 no longer visually dominates the page. Every other section's heading size is untouched. v1.9.0 (2026-07-31): Added the text-only "RP7 and Long-Term Protection" five-step sequence (.restoration-programme-rp7-*) — no image, per explicit instruction: a map or footprint graphic could wrongly imply a predetermined spatial relationship between the Restoration Polygon, RP7 works area and any later legal footprint. Desktop: five equal grid columns, dark-green (--sdx-color-green-deep) numbered circles connected by one calc()-computed horizontal line that passes through each circle's true centre regardless of column width (circles are left-aligned with the text below them, not centred). Below 900px: flex column stack with a single vertical connector reusing the same technique as .eco-restoration-progression-step's line in eco-restoration.css. No cards, no fixed text heights. v1.8.0 (2026-07-31): Added a .restoration-programme-narrative-layout--reverse modifier (prose left / media right on desktop, image still stacks above text on mobile) for the new "The Starting Condition" section — mirrors .eco-restoration-narrative-layout--reverse in /assets/css/eco/eco-restoration.css. v1.7.0 (2026-07-31): Restoration Polygon section eyebrow now uses the governed EduTower eyebrow treatment copied verbatim from .page-eco-restoration .eyebrow (display/margin-bottom/font-size/font-weight/ line-height/letter-spacing/text-transform), not a recreated ruleset. Colour changed from --page-primary (the lighter restoration-glow lime) to the hardcoded --sdx-color-green-deep used by that same governed rule, keeping the eyebrow readable but visually subordinate to the heading. Heading, body copy, image and all other section spacing unchanged. v1.6.0 (2026-07-31): Removed the boundary-statement left-accent rule and the contextual-link rule (.restoration-programme-polygon-boundary/-link/-link-wrap) — the link was removed from the section and the former boundary line is now a third plain paragraph using the same .restoration-programme-prose typography as the other two. No other section rules changed. v1.5.0 (2026-07-31): Added the Restoration Polygon image-and-prose section (replaces the former "What the Restoration Programme is" cards) — narrative-layout, media and prose rules match the approved pattern in /assets/css/eco/eco-restoration.css (.eco-restoration-narrative-layout/-media/-prose), reused here under .page-restoration-programme so body typography stays identical. Added a restrained boundary-statement rule (left accent border, same body typography) and a text-link style matching this page's existing .entity-structure-trail link treatment. v1.4.2 (2026-07-31): Cut the tagline's heavy triple black text-shadow (opaque, 30-50px blur) down to two tight, semi-transparent layers — the old shadow was reading as a smoky halo around the amber text. Headline shadow untouched. v1.4.1 (2026-07-30): Left-edge overlay lightened and shortened further — was still reading as a soft "smoke" haze over the water/mountains; peak opacity dropped to ~0.30 (mobile ~0.34) and it now clears fully by 16% (mobile 20%) instead of 26%/32%. v1.4.0 (2026-07-30): Shifted the hero text block ~3rem higher (transform, hero height unchanged) and tuned the left-edge overlay to a lighter opacity that clears sooner, while keeping the existing text-shadow contrast. Headline, tagline, wording, image and hero height untouched. v1.3.0 (2026-07-30): Hero now carries only the headline and tagline (intro paragraph removed from the markup). Replaced the broad dark hero overlay with a restrained left-edge gradient that clears to transparent well before the image centre, so the wetland, water and mountains in eco-restoration-programme-hero.webp stay bright. Nudged the hero text block further left. v1.2.0 (2026-07-30): Replaced the gradient hero with the commissioned eco-restoration-programme-hero.webp photograph and the approved EduTower hero layout (hero-content, headline/tagline/intro, left-side readability vignette), matching /eco/eco-restoration.html and /eco/eco-conservation.html. v1.1.0 (2026-07-21): Structural rules consolidated into public-entity.css (Batch 2 audit). ====================================================================================================== */ .page-restoration-programme { --page-bg: var(--sdx-color-shell-bg); --page-primary: var(--sdx-color-restoration-glow); --page-secondary: var(--sdx-color-restoration-lime); --page-accent: var(--sdx-color-restoration-lime); --page-depth: var(--sdx-color-eco-dark-base); --hero-image: url("/assets/images/eco/restoration/eco-restoration-programme-hero.webp"); } .page-restoration-programme .hero-wrap { position: relative; min-height: var(--hero-min); background-image: var(--hero-image); background-size: cover; background-position: 52% 50%; } .page-restoration-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-restoration-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-restoration-programme .hero > .container { width: 100%; max-width: 1440px; padding-left: 1.25rem; } .page-restoration-programme .hero-content { max-width: 60rem; margin: 0; text-align: left; transform: translateY(-3rem); } .page-restoration-programme .hero .headline { margin: 0 0 1.5rem; font-size: clamp(2.75rem, 6vw, 4.5rem); } .page-restoration-programme .hero .headline, .page-restoration-programme .hero .intro { text-shadow: 0 2px 10px rgba(0, 0, 0, 0.58); } .page-restoration-programme .hero .intro { margin-left: 0; margin-right: 0; } .page-restoration-programme .hero .tagline { color: var(--sdx-color-mama-amber); text-shadow: 0 2px 8px rgba(0, 0, 0, 0.70), 0 1px 3px rgba(0, 0, 0, 0.55); } /* Restoration Polygon image-and-prose section. Layout/typography rules mirror .page-eco-restoration .eco-restoration-narrative-layout/-media/-prose (/assets/css/eco/eco-restoration.css) so body copy matches the approved Eco Restoration page exactly. */ .page-restoration-programme .restoration-programme-section-body { text-align: left; } /* Governed EduTower eyebrow — reused verbatim from .page-eco-restoration .eyebrow (/assets/css/eco/eco-restoration.css), not recreated. Colour hardcoded to --sdx-color-green-deep, same as that rule, instead of --page-primary (which on this page resolves to the lighter restoration-glow lime) so the eyebrow stays subordinate to the heading. */ .page-restoration-programme .eyebrow { display: block; margin-bottom: 2.25rem; color: var(--sdx-color-green-deep); font-size: 1.1rem; font-weight: 600; line-height: 1.2; letter-spacing: 0.15em; text-transform: uppercase; } .page-restoration-programme .restoration-programme-section-body h2 { margin: 0 0 1rem; padding: 0; border: 0; text-align: left; } .page-restoration-programme .restoration-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-restoration-programme .restoration-programme-media { min-width: 0; margin: 0; } .page-restoration-programme .restoration-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); } /* EduTower-matched media-lightbox trigger reset — same pattern as .page-eco-conservation .eco-conservation-media .media-thumb in eco-conservation.css. */ .page-restoration-programme .restoration-programme-media .media-thumb { display: block; width: 100%; margin: 0; padding: 0; border: 0; border-radius: 0.75rem; background: none; cursor: zoom-in; text-align: left; } .page-restoration-programme .restoration-programme-media .media-thumb::-moz-focus-inner { border: 0; padding: 0; } .page-restoration-programme .restoration-programme-prose { min-width: 0; } .page-restoration-programme .restoration-programme-prose, .page-restoration-programme .restoration-programme-prose p { color: var(--muted); font-family: var(--text-font); font-size: var(--body); font-weight: 400; line-height: 1.7; } .page-restoration-programme .restoration-programme-prose > :first-child { margin-top: 0; } .page-restoration-programme .restoration-programme-prose > :last-child { margin-bottom: 0; } @media (max-width: 968px) { .page-restoration-programme .restoration-programme-narrative-layout { grid-template-columns: 1fr; gap: 1.75rem; } .page-restoration-programme .restoration-programme-narrative-layout--reverse .restoration-programme-prose { order: 2; } .page-restoration-programme .restoration-programme-narrative-layout--reverse .restoration-programme-media { order: 1; } } /* RP7 and Long-Term Protection — text-only five-step sequence. Deliberately no imagery: a map or footprint graphic could wrongly suggest the Restoration Polygon, RP7 works area and any later legal footprint share a predetermined spatial relationship. Circle colour reuses --sdx-color-green-deep, the same governed dark green already used for this page's eyebrow treatment (see the .eyebrow rule above). */ /* Heading reduced slightly relative to the page's other section headings (--h2: clamp(1.375rem, 3.5vw, 2rem)) — RP7 reads as one clarification among several, not the programme's climax. Eyebrow and body copy untouched. */ .page-restoration-programme .restoration-programme-rp7-section .restoration-programme-section-body h2 { font-size: clamp(1.25rem, 3vw, 1.75rem); } .page-restoration-programme .restoration-programme-rp7-intro { margin-top: 1.5rem; max-width: 48rem; } .page-restoration-programme .restoration-programme-rp7-intro p { margin: 0 0 1rem; color: var(--muted); font-family: var(--text-font); font-size: var(--body); font-weight: 400; line-height: 1.7; text-align: left; } .page-restoration-programme .restoration-programme-rp7-intro p:last-child { margin-bottom: 0; } .page-restoration-programme .restoration-programme-rp7-sequence { --rp7-gap: 2rem; --rp7-circle: 3rem; position: relative; display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: var(--rp7-gap); list-style: none; margin: 2.75rem 0 0; padding: 0; } /* One continuous horizontal line, computed to pass through every circle's centre regardless of column width — left-aligned circles, not centred, per spec. */ .page-restoration-programme .restoration-programme-rp7-sequence::before { content: ""; position: absolute; z-index: 0; top: calc(var(--rp7-circle) / 2); left: calc(var(--rp7-circle) / 2); right: calc((100% - 4 * var(--rp7-gap)) / 5 - (var(--rp7-circle) / 2)); height: 2px; background: color-mix(in srgb, var(--sdx-color-green-deep) 16%, var(--border)); } .page-restoration-programme .restoration-programme-rp7-step { position: relative; z-index: 1; display: flex; flex-direction: column; align-items: flex-start; text-align: left; } .page-restoration-programme .restoration-programme-rp7-number { position: relative; z-index: 1; display: inline-flex; align-items: center; justify-content: center; width: var(--rp7-circle, 3rem); height: var(--rp7-circle, 3rem); margin-bottom: 1.25rem; border-radius: 50%; background: linear-gradient( 135deg, var(--sdx-color-green-deep) 0%, color-mix(in srgb, var(--sdx-color-green-deep) 65%, black) 100% ); color: #ffffff; font-weight: 700; box-shadow: 0 4px 14px color-mix(in srgb, var(--sdx-color-green-deep) 35%, transparent), inset 0 0 0 1px rgba(255, 255, 255, 0.18); } .page-restoration-programme .restoration-programme-rp7-step-body { min-width: 0; } .page-restoration-programme .restoration-programme-rp7-step-body h3 { margin: 0 0 0.5rem; padding: 0; border: 0; color: var(--fg); font-family: var(--headline-font); font-size: 1.15rem; text-align: left; } .page-restoration-programme .restoration-programme-rp7-step-body p { margin: 0; color: var(--muted); font-family: var(--text-font); font-size: var(--body); font-weight: 400; line-height: 1.7; text-align: left; } .page-restoration-programme .restoration-programme-rp7-closing { margin: 4.5rem 0 0; max-width: 48rem; color: var(--fg); font-family: var(--text-font); font-size: var(--body); font-weight: 600; line-height: 1.7; text-align: left; } @media (max-width: 900px) { .page-restoration-programme .restoration-programme-rp7-sequence { display: flex; flex-direction: column; gap: 0; } .page-restoration-programme .restoration-programme-rp7-sequence::before { display: none; } .page-restoration-programme .restoration-programme-rp7-step { flex-direction: row; align-items: flex-start; gap: 1.25rem; padding-bottom: 2rem; } .page-restoration-programme .restoration-programme-rp7-step:not(:last-child)::after { content: ""; position: absolute; z-index: 0; top: var(--rp7-circle, 3rem); bottom: 0; left: calc(var(--rp7-circle, 3rem) / 2 - 1px); width: 2px; background: color-mix(in srgb, var(--sdx-color-green-deep) 16%, var(--border)); } .page-restoration-programme .restoration-programme-rp7-step:last-child { padding-bottom: 0; } .page-restoration-programme .restoration-programme-rp7-number { margin-bottom: 0; flex-shrink: 0; } .page-restoration-programme .restoration-programme-rp7-step-body { flex: 1 1 auto; } } /* Terminal CTA band — dark-green button treatment. .sdx-btn-primary's canonical background is var(--page-primary), which on this page resolves to the lighter restoration-glow lime; overridden here to the same governed --sdx-color-green-deep used by the eyebrow and the RP7 step circles, so the page's one terminal action matches its established accent colour rather than the lighter pillar lime. */ .page-restoration-programme .sdx-cta-band .sdx-btn-primary, .page-restoration-programme .sdx-cta-band .sdx-btn-primary:link, .page-restoration-programme .sdx-cta-band .sdx-btn-primary:visited { background: linear-gradient( 135deg, var(--sdx-color-green-deep) 0%, color-mix(in srgb, var(--sdx-color-green-deep) 65%, black) 100% ); } /* display:block keeps the title+description pair readable (canonical .lightbox-caption is inline-flex, which collapsed the split caption). align-self:stretch/width:100% (the original fix) is wrong once a gallery's prev/next arrows are visible: .lightbox-inner/.lightbox-media switch to a wide flex row to make room for the arrows, and the caption stretched to that full row width — much wider than the image above it. Capped back to the canonical max-width so the caption reads as a caption, not a banner. */ .page-restoration-programme #media-lightbox .lightbox-caption { display: block; box-sizing: border-box; align-self: center; width: auto; max-width: min(90vw, 640px); } @media (max-width: 640px) { .page-restoration-programme .hero-wrap { background-position: 64% 50%; } .page-restoration-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% ); } }