/* ====================================================================================================== File: public-entity.css Path: /assets/css/partials/public-entity.css Version: v1.1.0 Issued: 2026-07-21 Owner: Buktika Webdesk (Binka) Scope: Shared layout for canonical public entity pages generated from the Tier 1 Public Entity Implementation Pack (modules/atrium/public-entities/). Extends the existing Design System v4.0.0 primitives (.sdx-card-section, .cards, .card, .section-title, .section-intro, .sdx-btn-primary) rather than replacing them — this file adds only the entity-specific pieces those primitives do not already cover: the eyebrow/category tag, the structure trail, the "what it is / what it is not" card modifiers, and (as of v1.1.0) the shared entity-page shell rules every per-page CSS file was repeating verbatim. Depends on: - /assets/css/global.css (canonical tokens + .sdx-card-section/.cards/.card) - /assets/css/themes.css ([data-theme] alias layer) - /assets/css/partials/entity-breadcrumb.css Changelog: v1.1.0 (2026-07-21): Batch 2 audit found the five Batch 1 per-page CSS files (eco.css, eco-conservation.css, eco-restoration.css, sielsgrond-programme.css, restoration- programme.css) each repeated the same three structural rules verbatim, differing only in which page-scoped CSS variables they referenced. Moved those rules here under a shared `.entity-page` body marker class; each per-page CSS file now sets only its own token bindings (--page-bg/--page-primary/--page-secondary/--page-accent/--page-depth/ --hero-image and friends). eco.css keeps its own direct `.page-eco .hero-wrap { background-image: ... }` override (see eco.css v1.0.3 changelog) since it does not use the --hero-image indirection; that one declaration alone is page-specific, so it stays in eco.css rather than here. ====================================================================================================== */ /* 0) Shared entity-page shell. Add class="entity-page" alongside the page-specific class="page-" on . Page CSS files bind only --page-bg/--page-primary/ --page-secondary/--page-accent/--page-depth/--hero-image; structure lives here once. */ .entity-page { background: var(--page-bg); color: var(--sdx-color-slate); } .entity-page .hero-wrap { background-image: var(--hero-image); background-size: cover; background-position: center; min-height: 420px; } .entity-page .sdx-btn-primary { background: linear-gradient(135deg, var(--page-primary) 0%, var(--page-depth) 100%); box-shadow: 0 4px 14px rgba(0, 0, 0, 0.18); } /* 0b) Stage-anchor cards (e.g. #rp1-#rp7 on restoration-programme.html, #sgp1-#sgp3 on sielsgrond-programme.html) are linked to directly from the route registry. Clears the fixed header (matches the 5rem convention used elsewhere on the site, e.g. eco-guilds-farms-grid.css, teams-council-grid.css). */ .entity-page [id^="rp"], .entity-page [id^="sgp"] { scroll-margin-top: 5rem; } /* 1) Eyebrow / category tag — sits above the hero headline, identifies the entity type (e.g. "Ecological pillar", "ECO channel", "Governed programme"). */ .entity-eyebrow { display: inline-block; font-family: var(--text-font); font-size: 0.8125rem; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; color: #ffffff; background: color-mix(in srgb, var(--page-accent, var(--sdx-color-leaf-green)) 55%, rgba(0, 0, 0, 0.35)); padding: 0.375rem 0.875rem; border-radius: 999px; margin-bottom: 1rem; } /* 2) "What it is" / "What it is not" — reuses .cards/.card, adds a distinguishing left-border colour for the "is not" card so a reader can visually tell the two apart at a glance. */ .entity-clarify-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1.5rem; } @media (max-width: 760px) { .entity-clarify-grid { grid-template-columns: 1fr; } } .entity-card--is { border-left: 4px solid var(--page-accent, var(--sdx-color-leaf-green)); } .entity-card--is-not { border-left: 4px solid var(--sdx-color-terracotta, #c1553a); } .entity-card--is h3, .entity-card--is-not h3 { font-family: var(--text-font); font-size: 1.0625rem; font-weight: 700; margin: 0 0 0.75rem; } /* 3) Structure trail — shows the entity's position in the fixed ECO hierarchy (pillar > channel > programme). Plain, accessible ordered list; not a breadcrumb (it describes structural position, not navigation history). */ .entity-structure-trail { list-style: none; display: flex; flex-wrap: wrap; align-items: center; gap: 0.5rem; margin: 0 auto; padding: 0; max-width: 52rem; justify-content: center; font-family: var(--text-font); font-size: 1rem; } .entity-structure-trail li { display: flex; align-items: center; gap: 0.5rem; } .entity-structure-trail li a { color: var(--fg); font-weight: 600; text-decoration: none; border-bottom: 2px solid var(--page-accent, var(--sdx-color-leaf-green)); } .entity-structure-trail li a:hover, .entity-structure-trail li a:focus-visible { color: var(--page-accent, var(--sdx-color-leaf-green)); } .entity-structure-trail li.current span { color: var(--muted); font-weight: 600; padding: 0.2rem 0.7rem; border-radius: 999px; background: color-mix(in srgb, var(--page-accent, var(--sdx-color-leaf-green)) 14%, transparent); } .entity-structure-trail li:not(:last-child)::after { content: "→"; color: var(--border); } /* 4) Related-entity mention list — for related entities that do not yet have a canonical page in this batch. Plain text, not a link, per the implementation rule against linking to routes that remain absent. */ .entity-related-pending { color: var(--muted); font-style: italic; } /* 5) Source-authority note — small print distinguishing D1-defined content from newly introduced architecture, per the D1-boundary rule. */ .entity-source-note { font-size: 0.875rem; color: var(--muted); border-top: 1px solid var(--border); padding-top: 1rem; margin-top: 2rem; } /* 6) Photo-less hero support — this pack has no commissioned photography yet for the five first-batch entities. Pages set --hero-image to a linear-gradient() (using the existing --sdx-color-eco-*/--sdx-color-restoration-* tokens) instead of url(...). No other hero CSS changes: .headline/.intro white-text-on-dark treatment already assumes a dark background and needs no override for a dark gradient. */ /* none — see individual page CSS files for their --hero-image gradient binding */