/* landing.css v8.33.0 | Buktika | SDL-PIL-14 Archetype B Depends: global.css v3.14.0, themes.css v2.4.0 v8.33.0 (2026-07-27): Door grid now 4 cards (landing-door-sielsgrond added in index.html v8.36.0) — .landing-door-grid desktop columns changed from repeat(3,1fr) to repeat(2,1fr) for a true 2x2. Added --shadow-sielsgrond token plus eyebrow/border-left/button colour rules for .landing-door-sielsgrond, using --sdx-color-teal-deep (visually distinct from the other three doors' green/violet/purple) since no dedicated Conservation token exists yet in the design system. v8.32.0 (2026-07-09): HERO FINESSE PATCH — three small, targeted fixes, owner confirmed the overall hero direction is accepted. (1) .landing-hero-intro max-width 31rem -> 40rem so "Real work becomes accepted evidence. Value returns to origin." renders on one line on desktop (was wrapping mid-sentence); font-size untouched, .landing-hero-panel's own 620px cap is the real limit now. (2) .landing-hero-cue-img box-shadow eased (blur 1.5rem->1.2rem/opacity 0.28->0.20; ring opacity 0.24->0.14) — shape, size, and border-radius all unchanged, this is intensity only, so the thumbnails read as photographs rather than UI cards. (3) .landing-hero-title's text-shadow opacity eased ~13% per layer (1/.95/.80 -> .87/.83/.70) — the filmstrip-shadow principle and every other hero text element's shadow (kicker/intro/cue-caption/slogan) are unchanged; only the H1's own reads a touch less theatrical now. Hero-wrap gradient, connecting line, labels, lightbox wiring, and all copy are untouched. v8.31.0 (2026-07-09): HERO READABILITY PATCH — scrim/shadow only, no layout change. Owner: hero still too dark overall; wants the filmstrip's own readability principle instead — see landing-film-strip.css .film-fence-content (a light angled overlay, peaks at only 0.24) and .buktika-manifesto-left (readability carried by a strong triple-layer text-shadow, not by darkening the image). Applied here: (1) .hero-wrap's background-image gradient replaced with the owner's exact left-side-strip values — steeper near-field falloff (0.64 at 0% down to 0 by 78%) so the darkening is a narrow strip near the text, not a wash, and the lake is untouched from the middle rightward; (2) every hero text element that sits directly on the photo (.landing-hero-kicker, -title, -intro, -cue-caption, -slogan) gets the filmstrip's own .buktika-manifesto-left text-shadow formula (0 4px 24px black / 0 2px 10px 0.95 / 0 1px 4px 0.8) in place of its previous, lighter single-or-double-layer shadow — readability now comes from the text itself, matching how the filmstrip solves the same problem, not from a dark panel behind it. No class names, markup, or geometry changed; index.html untouched this pass. v8.30.0 (2026-07-09): HERO VISUAL-SKIM FIX — GEOMETRY-ONLY CORRECTION. Owner rejected v8.29.0 on the same block again: the images read as circular badges, not thumbnails. Root cause found on inspection: BOTH .landing-hero-cue-trigger (the button wrapping the image) AND .landing-hero-cue-img itself carried border-radius:999px — v8.29.0's own comment even called this "soft circular frame" while writing down the owner's square- thumbnail brief, a direct contradiction that should have been caught then. Fixed by both: (1) removing 999px radius from .landing-hero-cue-trigger and .landing-hero-cue-img, replaced with 1.1rem (0.9rem at the 600px/mobile step) soft-rounded squares per owner spec; (2) enlarging to clamp(7.5rem, 9vw, 9rem) desktop / clamp(5.8rem, 34vw, 7rem) mobile — up from clamp(7.25rem,8vw,8.25rem) — so they read as substantial thumbnails, not icons; (3) the connecting line's opacity/ thickness/glow raised to the owner's exact values so it is actually visible against the hero photo, not just present in the DOM; (4) grid-template-columns switched from repeat(4, auto) to repeat(4, max-content) and width from fit-content to max-content — same content-sized-row behaviour, owner's exact keyword. The 430px->600px breakpoint move from v8.29.0 is kept and re-verified against these larger sizes (see the Responsive section comment for the updated arithmetic — still holds with margin to spare). Labels unchanged in substance, minor size bump to the owner's 0.74rem. Lightbox wiring (v8.29.0) is UNCHANGED here and was additionally verified this pass by actually executing the real, unmodified assets/js/partials/media-lightbox.js against the real, unmodified index.html markup in a jsdom simulation outside the browser sandbox available in this session (no Chromium available to install here — see chat for the full method and output): click-to-open, correct data-full src, caption resolution via the aria-label "Open full photo:" prefix strip, data-gallery prev/next between all four images, and all three close paths (close button, backdrop, Escape) all passed. That is evidence the JS/DOM contract fires correctly, not a substitute for a real-browser visual check, which this sandbox cannot perform. v8.29.0 (2026-07-09): HERO VISUAL-SKIM FIX — CORRECTION PATCH. Owner rejected v8.28.0's execution on seven points; this is a strict correction of the SAME .landing-hero-panel block, not a redesign. (1) .hero-wrap's left scrim was too dark — replaced with the owner's exact softer gradient (0.42 max opacity, 90deg, clears by 58% instead of 72%-but-heavier). (2) The four cue images had drifted into tall crops because v8.28.0 sized them at width:100% of an equal-fraction (1fr) grid track — correct on paper, but combined with the grid's own box model it read as narrow pillars in the browser. Replaced with the owner's exact fixed clamp(7.25rem, 8vw, 8.25rem) square size (both width and height set explicitly, plus aspect-ratio:1/1 as a belt-and-braces check) inside a content-sized (grid-template-columns: repeat(4, auto); width: fit-content) row, so each image is a true square thumbnail regardless of row width. (3) Connecting line kept, recalibrated to the owner's fixed-rem inset (was percentage-based, tuned for the old full-width row). (4) Labels de-monospaced and enlarged slightly per owner spec — no longer reads as film-strip metadata. (5) Slogan reduced from the v8.28.0 treatment (which had grown too large/heavy) to the owner's quieter clamp. (6) Thumbnails wired to the site's real shared lightbox (assets/js/partials/media-lightbox.js v1.17.2 / media- lightbox.css v2.5.1) — button.media-thumb + data-kind="image" + data-full + data-gallery="hero-cues" is the ACTUAL contract read directly from media-lightbox.js and the working mamadex-mama-profile.js caller, not the illustrative data-image-src/data-lightbox example the correction brief sketched. (7) One correction beyond the brief's literal numbers, disclosed here rather than silently changed: the brief's own fixed clamp() floor (116px per image at any viewport under ~1450px) means four images + three 1rem gaps need 512px of row width — that does not reliably fit between 431px and ~551px if the 2x2 mobile breakpoint is left at 430px as specified, causing exactly the overflow the owner's acceptance criteria rule out. The 2x2 breakpoint is moved to 600px (comfortable margin above the 552px arithmetic minimum) so the single-row layout is never asked to hold more width than it has. No other numbers from the correction brief were changed. This patch edits the v8.28.0 .landing-hero-panel rules IN PLACE (same class names throughout) rather than adding a parallel v8.29.0 set: v8.28.0 was rejected in the same review cycle before ever shipping, so it carries none of the rollback value this file's no-deletion practice exists to protect — that practice is applied here to every revision that WAS shipped and approved before being superseded (v8.27.0 proof strip, v8.26.0/25.0/24.0 text column, the orbit/cue block, the split/evidence block), all of which remain exactly as before, untouched. v8.28.0 (2026-07-09): HERO VISUAL-SKIM FIX. Added "2.3 Hero panel" below for the new .landing-hero-panel block (index.html v8.28.0): kicker, one-line H1, intro sentence, a four-image cue row (Land / Hands / Proof / Return, all new class names — .landing-hero-cues/-cue-tile/-cue-img/-cue-caption) with a thin low- opacity amber thread behind the thumbnails standing in for a root connection (no arrowheads, not a rail/timeline/process arrow), and a demoted .landing-hero-slogan at the bottom. Thumbnails sized clamp(110-140px) desktop / clamp(82-96px) mobile — never shrunk to icons — dropping to a 2x2 grid (line hidden) below 430px so nothing overflows. This entirely replaces the v8.27.0 "2.2 Proof evidence strip" and the v8.26.0 "2.1 Hero" text-column rules in the live page, but none of that CSS is deleted: .landing-hero-copy, -wordmark, -positioning, -h1, -definition, -flow(-step), -brandline, and the whole -proof-strip/-tile/-img/-overlay/-label/-caption block stay exactly as they were, unreferenced, per this project's no-deletion practice — see "SUPERSEDED" markers. The v8.25.0 split/evidence block and the older orbit/cue block further down are likewise untouched. v8.27.0 (2026-07-08): v8.26.0 fixed the wrong problem — it removed the image/evidence layer completely, leaving a scenic text banner. Owner: keep the lake as the full hero background AND put a small, restrained image evidence strip back in, just not as a 4-card grid. Added "2.2 Proof evidence strip" below: THREE tiles only (LAND / PEOPLE / PROOF — Value Back stays text-only in the existing .landing-hero-flow pathway, no fourth image tile), anchored lower-right of the hero via position:absolute against .hero-wrap (already position:relative + overflow:hidden in global.css — no new positioning context needed), max-width min(34%, 480px) so it never dominates or reaches the centre of the frame, each tile clamp(120-152px) x clamp(92-114px) with rounded corners, thin border, soft shadow, no tilt (not a Polaroid), plain flex row (not an orbit/ellipse). Label + caption sit as a slim bottom gradient overlay directly on the photo — no separate white card body. Responsive threshold unified at 700px: at 700px and below the strip becomes position:static, a single-row horizontal-scroll strip (tiles capped at 72px tall) placed after the text, and .hero's forced min-height relaxes to auto since the stacked text+strip now determines the height — the first mobile screen stays text + lake, never a stacked card wall. Removed the old "copy max-width:none at 900px" override (no longer needed: a 720px+ copy column running full-width would have run underneath the now-reintroduced right-anchored strip). Nothing physically deleted — the v8.25.0 split/evidence block and the older orbit/cue block stay below, unreferenced, per no-deletion practice. .headline/.hero/.hero-wrap gradient/.landing-hero-copy etc. from v8.26.0 are otherwise untouched. v8.26.0 (2026-07-08): Hero corrected AGAIN — owner rejected the v8.25.0 two-column split/evidence hero outright: "gone too far... cluttered, heavy, dashboard-like... the four large image cards dominate... beautiful lake/landscape opening has been lost." Restores a single restrained text panel (max-width 620px, left / centre-left) over a full-bleed, only-softly-darkened lake photo — no right-side card grid, no image cards anywhere in the hero. .hero-wrap's background gradient rewritten from a heavy 0.88->0.34 opacity wash across the WHOLE photo down to a soft 0.52->0 fade that clears entirely by ~70% width, so the lake is visibly the hero image again and the right two-thirds stays bright and open. New .page-landing .hero-body override (width:100%; justify-self: stretch) added — global.css's default hero-body centring would otherwise centre the narrower text panel in the middle of the hero instead of placing it left. .landing-hero-wordmark (BUKTIKA eyebrow), -positioning, -h1, -definition, and -brandline carried over unchanged from v8.25.0 (content and styling already matched this brief). .landing-hero-flow's four steps now read plain nouns (Land / People / Proof / Value Back) reusing the existing translated landing.hero.cue.*.label i18n keys instead of the v8.25.0 mechanism-pathway copy, per this project's "reuse existing cue label keys where sensible" convention — still a thin-rule, letter-spaced, arrow-joined line, never pill/button styling. .landing-hero-split and every .landing-evi-* card-grid rule (and their responsive overrides) are left in place directly below, unreferenced, per no-deletion practice — see "SUPERSEDED" marker. The older orbit/cue block further down is untouched. v8.25.0 (2026-07-08): Hero rebuilt as a two-column SPLIT / SYSTEM hero. The v8.24.0 static rebuild fixed the copy but removed the image layer, leaving a landscape poster with centred text (owner rejected). This revision keeps the clear text hierarchy on the LEFT (new .landing-hero-split, .landing-hero-wordmark, .landing-hero-positioning, .landing-hero-h1 [controlled size], .landing-hero-definition, an operating .landing-hero-flow pathway, and the retained .landing-hero-brandline) and adds a four-card EVIDENCE SYSTEM on the RIGHT (.landing-hero-evidence / .landing-evi-card / -media / -img / -num / -label / -caption), built from the real hero-cue photos, numbered 01-04, all visible at once — no tilt, orbit, ellipse, or animation. .hero switched to a flex column with a content-driven min-height in place of global.css's 1000px poster height, and .hero-wrap gained a muted, darkened landscape wash so the photo no longer dominates. The v8.24.0 .landing-hero-eyebrow / -sequence* rules and the older orbit/cue block are left below, unreferenced, per no-deletion practice. Mobile stacks copy first, then the four cards as a vertical pathway (kept, not hidden). v8.24.0 (2026-07-08): Hero corrected to a static explanatory structure. Owner rejected the whole orbit direction (and every card-cue revision before it): the brand slogan stood in as the H1 while the actual explanation of what Buktika does was hidden inside an animated, absolute-positioned card orbit. New rules added below at "2.1 Hero — static explanatory rebuild": .landing-hero-copy (plain-flow wrapper, replaces .landing-hero-orbit), .landing-hero-eyebrow, .landing-hero- sequence/-step/-label/-arrow (static four-step sequence, equal weight, connected by arrow separators, all visible at once, row on desktop / stacked column on mobile — no position:absolute, no transform, no transition, no timer), and .landing-hero-brandline (small, subordinate — demoted former headline). .headline is reused as-is for the new H1 (still governed by the canonical clamp() override just above) and .intro is reused as-is for the subheadline (canonical hero paragraph treatment, already white-on-photo with the correct text-shadow) — neither rule touched. The entire former "2.1 Hero cue" block (.landing-hero-orbit, .landing-hero-orbit-center, .landing-hero-cue and every .landing-hero-cue-* descendant, all four revisions' accumulated rules) is left in place below, untouched, but now applies to nothing: the markup those selectors target no longer exists in index.html. Not physically deleted — no-deletion practice, same as the orphaned landing.hero. tagline/subtitle i18n keys already in this project. v8.23.0 (2026-07-08): Hero cue rebuilt a fourth time same day — wide flat ELLIPSE ORBIT around the fixed centre headline, replacing the Polaroid ROW from v8.22.0. Owner: "too much like a row... This is a long, flat oval orbit around the centre text." New .landing-hero-orbit wraps both the headline (now .landing-hero-orbit-center, fixed, dominant, z-index 3) and .landing-hero-cue (now position:absolute; inset:0, decorative). The four .landing-hero-cue-item cards are absolute-positioned via left/top percentages at named ellipse points — land 18%/52% (left-middle), people 42%/22% (top-centre), proof 82%/52% (right-middle), value_back 56%/78% (bottom-centre) — per owner-specified coordinates, each still carrying a small fixed --tilt custom property. .landing-hero-cue-row (flex row) removed entirely — this is the actual structural fix; a flex row cannot produce an orbit regardless of individual card rotation. Active state changed from a shared-line swap to a per-card reveal: scale now lives on .landing-hero-cue-frame (~1.22, not on the item, so the item's translate(-50%,-50%) ellipse anchor never drifts), plus stronger shadow and a brightness/ saturation lift on the icon; the old .landing-hero-cue- center shared caption is gone, replaced by each item's own .landing-hero-cue-sentence surfacing beneath its own card on activation (was screen-reader-only before, now visible, aria-hidden since the wrapper's aria-label already carries the full summary). Mobile (≤780px): same ellipse mechanism at a tighter, flatter radius — not a fallback to row/grid. v8.22.0 (2026-07-08): Hero cue Polaroid redo, same day, owner feedback on the live v8.21.0 render: (1) cards were rendering tall/ portrait, not square — fixed by sizing the photo off one --cue-photo custom property applied as explicit equal width/height on the itself (was width:100% + aspect-ratio:1/1 on a flex-column child, which is exactly the combination several engines size unreliably; explicit equal px values on both axes cannot mis-render). Card also shrunk: --cue-photo clamp(84px,7.5vw,116px), was a 150-220px frame. (2) "The photos must not move" — removed .is-active's transform entirely; each item's fixed per- data-cue rotate/translateY (unchanged) is now the ONLY transform it ever carries, at rest and active alike. Active state now signalled only by frame box-shadow depth and label colour, never by position/rotation/scale. Reduced- motion block's Proof-card transform override removed for the same reason (its fixed tilt already applies). (3) Label typography rebuilt to match landing-film-strip.css's .film-rail-text span (Courier New, uppercase, 0.7rem/700/ 0.15rem tracking) instead of the previous text-font/ sentence-case label, so the Polaroid captions and the filmstrip's rail text read as the same documentary voice; active colour still the same --sdx-color-mama-amber the filmstrip rail text uses. v8.21.0 (2026-07-08): Hero cue rebuilt a third time same day — scattered Polaroid-style photo strip, replacing the grayscale circular- photo ring from v8.20.0. Owner feedback on the live v8.20.0 render: circles read as a UI avatar cluster, not content in the scene, and the ring layout clustered everything into a small area of a very wide hero, wasting the available width. Full rewrite of the .landing-hero-cue-* block: absolute- positioned ring → flex row in normal flow; circular masked grayscale/colour marks → white Polaroid-frame cards, always full colour, each with a fixed per-item rotation (.landing-hero-cue-item[data-cue="..."]); active state is now a physical lift (translateY + scale + shadow + straighten to 0deg) instead of a colour/grayscale swap. Selector renamed .landing-hero-cue-ring → .landing-hero-cue-row (JS updated to match). .landing-hero-cue-center moved from an absolutely- positioned ring-centre label to a caption line below the photo strip. Container max-width 1200px→1360px. v8.20.0 (2026-07-08): Hero cue marks switched from inline SVG line icons to photographic webp images (owner direction — "super realistic icons," not SVG, and NOT 38px). Rewrote the whole .landing-hero-cue-icon rule for instead of : width/height 38px→130px (84px at ≤780px), object-fit:cover, border-radius:50%, mask-image radial-gradient for a soft feathered edge (raw source photos have hard rectangular edges — this keeps them from sitting as visible rectangles on the hero photo even before real alpha-channel assets exist). Dim/active theming rebuilt: currentColor/stroke (SVG-only) replaced with filter: grayscale()/brightness() for dim vs full colour + amber drop-shadow glow for active — same confirmed Doc 19 palette intent (muted → amber-lit), different mechanism since photos can't be recoloured via CSS `color`. .landing-hero-cue-label colour split out onto its own is-active rule (was inheriting from .item, which no longer carries colour). Container max-width 780px→1200px, centre width 50%→46%. Mobile breakpoint 640px→780px, fallback icon size added (84px). v8.19.4 (2026-07-08): Three fixes. (1) Real bug: .landing-hero-cue- label had a hardcoded color:#ffffff that silently overrode the confirmed Doc 19 dim-stone/active-amber palette for every label at all times — changed to color:inherit, with a stronger dual-layer text-shadow to keep dim stone-coloured labels legible over bright sky/water. (2) Text sizes now use canonical global.css scale instead of arbitrary values: centre sentence font-size 1.05rem→var(--h3) 1.25rem/20px, label font-size 0.95rem→var(--body) 1rem/16px, centre width 44%→50%. Icon 34px→38px to stay proportionate. (3) Guide ellipse thinned back down per the original "faint, implied" brief: stroke-width 1.5→0.75, opacity 0.4→0.22. v8.19.3 (2026-07-08): Hero cue horizontal axis lengthened — guide ellipse rx 190→225 (viewBox 460x210→520x210, ry/cy/height unchanged). Item x-positions recalculated for the new viewBox; y-positions unchanged since ry/cy didn't change. aspect-ratio on .landing-hero-cue-ring updated to match. v8.19.2 (2026-07-08): Fixed hero-cue icon contrast bug — icons had no shadow, so thin dim-stone strokes disappeared against bright parts of the hero photo (sky, water), reading as broken fragments rather than marks. Added a permanent drop-shadow to .landing-hero-cue-icon (same purpose as the text-shadow already on .headline/.tagline/.intro), raised dim opacity 0.5→0.8, stroke-width 1.5→1.75, active glow moved onto the icon itself (drop-shadow) instead of the whole item filter. Centre sentence width 60%→44% (was overlapping the Land/ Proof label positions at the wider setting). v8.19.1 (2026-07-08): Hero cue scaled up — it rendered far too small against the real hero photo/headline. max-width 460px→780px, icon 22px→34px, label 0.7rem→0.95rem, centre sentence 0.8rem→1.05rem (width 46%→60%), guide line stroke 1→1.5 / opacity 0.3→0.4. Same selectors as v8.19.0, values only. v8.19.0 (2026-07-08): Added .landing-hero-cue and children — the four-icon hero cue replacing .tagline ("A living system"). www-rebuild-control/18–22. New rules only; no existing selector in this file edited or removed. v8.18.1 (2026-06-30): Reworked the How It Works section into a balanced two-card narrative grid. Corrected the undefined governed-strip surface token, tightened spacing, and clarified Tika hierarchy. v8.18.0 (2026-06-30): Site-wide readability audit. Restored face-card, door-card, and governed-strip substantive copy to the 1rem body floor. Narrative selectors now exclude compact role labels. v8.17.0 (2026-06-30): Added the homepage Tika Standard governed-by strip. v8.16.0 (2026-06-13): MamaDEX and social upliftment identity aligned to Colour Map v3.15.0. Borders, labels, CTAs, and shadow tint now use mama-violet instead of the retired mama-earth brown. v8.15.0 (2026-03-13): Trilogy strip migrated to global.css v3.14.0. Removed: .sdx-trilogy-strip, .trilogy-chapter, :hover/:focus, .active, .trilogy-thumb (base), .trilogy-caption, .trilogy-num, .trilogy-label, @media 768px trilogy rules, @media 640px trilogy rules. Retained: .trilogy-thumb-[slug] background-image only. UX fix: inactive panels now full opacity (global.css). v8.14.0 (2026-03-10): OVR-6 — Film strip divider. Owner override. BKT-DOC-www-C Rule 8. Full-bleed 35mm film strip between .hero-wrap and .landing-fence. Pure CSS + inline SVG. No image assets. Centre panel shows "end of roll" warm-toned exposure. Partial frames bleed off both viewport edges. Film metadata text (emulsion, exposure data) in strip margins. Sprocket holes via SVG pattern. Grain via CSS noise filter. v8.13.0: Five owner-directed overrides (OVR-1 through OVR-5). v8.12.0: FIX-L (trilogy canonical HTML/CSS), FIX-M (breadcrumb — reversed by OVR-5). v8.11.0: FIX-H/I/J/K. v8.9.0: Six owner-directed fixes. v8.8.0: Five fixes. */ /* -- 1. Page tokens -------------------------------------------------------- */ .page-landing { --page-bg: var(--sdx-color-shell-bg); --page-primary: var(--sdx-color-stone); --page-secondary: var(--sdx-color-mama-amber); --page-accent: var(--sdx-color-mama-amber); --page-depth: var(--sdx-color-stem-olive); --page-dark-base: var(--sdx-color-slate-dark); --page-dark-surface: var(--sdx-color-dark-card); --page-bg-0: rgba(243, 244, 246, 0); --page-dark-base-0: rgba(30, 27, 24, 0); --hero-image: url("/assets/images/landing/index-hero.webp"); --hero-vignette-from: rgba(0, 0, 0, 0.15); --hero-vignette-to: rgba(0, 0, 0, 0); /* V1-FIX: Shadow tint tokens derived from pillar primitives. DOC-01 §2.5. */ --shadow-farmer: rgba(70, 72, 32, 0.25); /* stem-olive channel values */ --shadow-mama: rgba(139, 92, 246, 0.25); /* mama-violet channel values */ --shadow-viridian: rgba(75, 42, 86, 0.25); /* purple-deep channel values */ --shadow-sielsgrond: rgba(47, 92, 104, 0.25); /* teal-deep channel values */ background: var(--page-bg); color: var(--fg); } /* -- 2. Hero --------------------------------------------------------------- */ /* FIX-A (v8.9.0): min-height removed — global.css 1000px default governs. FIX-B (v8.9.0): Pattern B — border-bottom: 4px solid var(--page-accent). DOC-03 §18.3B. */ .page-landing .hero-wrap { --hero: var(--hero-image); border-bottom: 4px solid var(--page-accent); /* v8.31.0 READABILITY PATCH: still reading as too dark overall — owner wants the filmstrip's own principle (see landing-film-strip.css .film-fence-content) applied here instead: a narrow, left-side strip of darkening near the text, carrying almost none of the readability burden itself (that's now mostly on text-shadow — see the hero text rules below), with the lake essentially untouched from the middle rightward. Replaced with the owner's exact values: steeper near-field falloff (0.64 at 0%) than any previous pass, but clearing much sooner and further left (down to 0.03 by 62%, fully clear by 78%) than v8.29.0's 58%/100%. No filter:brightness() — still ruled out, it would dim the WHOLE photo uniformly. ::before bottom vignette (below) is unchanged, still capped at 0.15, and stays underneath this. */ background-image: linear-gradient(90deg, rgba(3, 10, 8, 0.64) 0%, rgba(3, 10, 8, 0.56) 18%, rgba(3, 10, 8, 0.34) 34%, rgba(3, 10, 8, 0.12) 48%, rgba(3, 10, 8, 0.03) 62%, rgba(3, 10, 8, 0.00) 78%), var(--hero-image); background-size: cover, cover; background-position: 50% 42%, 50% 42%; background-repeat: no-repeat, no-repeat; } /* ::before — PIL-14 §3 bottom vignette. opacity ceiling ≤0.25. */ .page-landing .hero-wrap::before { content: ""; position: absolute; inset: 0; pointer-events: none; background: linear-gradient(to top, var(--hero-vignette-from) 0%, var(--hero-vignette-to) 32%); } /* v8.26.0: full-bleed landscape hero. Flex column, left-aligned text, content-driven height — same mechanism as v8.25.0 (a fixed 1000px poster height reads wrong once the text panel is this much narrower than the photo), just no longer paired with a two-column card split. */ .page-landing .hero { display: flex; flex-direction: column; justify-content: center; text-align: left; padding: clamp(3rem, 6vh, 5.5rem) clamp(1.25rem, 3vw, 2.5rem); min-height: clamp(600px, 86vh, 820px); } /* DOC-02 §3.3.1: canonical pillar headline override (base size; the hero H1 narrows this further via .landing-hero-h1 below). */ .page-landing .headline { font-size: clamp(2.75rem, 6vw, 4.5rem); } /* global.css .hero-body normally shrink-wraps its content and centres the resulting box (justify-self: center) — correct for a full-width poster headline, wrong here: with a 620px-max text panel it would centre that panel in the middle of a 1400px hero, not place it left / centre-left. Scoped to this page only; stretches hero-body to the full hero width so .landing-hero-copy's own max-width + left position (below) is what actually places the text, leaving the right side of the photo open. */ .page-landing .hero-body { width: 100%; justify-self: stretch; } /* -- 2.1 Hero — full-bleed landscape rebuild (v8.26.0, 2026-07-08) ---------- Owner rejected the v8.25.0 two-column split/evidence hero outright: "gone too far... cluttered, heavy, dashboard-like... the four large image cards dominate." This restores a single restrained text panel over the lake photo — no right-side card grid, no image cards at all. Structure: small eyebrow (BUKTIKA), a positioning line, a controlled 3-line H1, a one- sentence definition, a small quiet proof pathway (thin rule + letter- spaced labels + amber arrows — deliberately not pill/button styling), and a demoted brand line. Text block capped at 620px per owner spec. No transform / transition / animation anywhere in this block. The v8.25.0 .landing-hero-split / .landing-evi-* card-grid rules are left directly below this section, unreferenced, per no-deletion practice — see the "SUPERSEDED" marker. The older orbit/cue block further down is untouched. */ .page-landing .landing-hero-copy { position: relative; width: 100%; max-width: 620px; margin: 0; text-align: left; } /* Eyebrow — BUKTIKA. Small wordmark label, not a section title. */ .page-landing .landing-hero-wordmark { margin: 0 0 0.9rem; font-family: var(--text-font); font-size: 0.8rem; font-weight: 800; letter-spacing: 0.32em; text-transform: uppercase; color: var(--sdx-color-mama-amber); text-shadow: 0 2px 8px rgba(0, 0, 0, 0.55); } /* Positioning line — who it is for. Above the H1, visually important. */ .page-landing .landing-hero-positioning { margin: 0 0 1.4rem; font-family: var(--text-font); font-size: clamp(1rem, 1.35vw, 1.15rem); font-weight: 600; line-height: 1.45; color: rgba(255, 255, 255, 0.92); text-shadow: 0 2px 10px rgba(0, 0, 0, 0.6); } /* Controlled H1 — strong but not theatrical or oversized. Narrows the .page-landing .headline clamp above, and left-aligns, for the hero only. */ .page-landing .landing-hero-h1 { font-size: clamp(2.1rem, 3.4vw, 3.15rem); line-height: 1.15; margin: 0 0 1.35rem; text-align: left; } /* Definition — the one-sentence explanation. Must stay easily readable. */ .page-landing .landing-hero-definition { margin: 0 0 1.7rem; max-width: 31rem; font-family: var(--text-font); font-size: clamp(1rem, 1.25vw, 1.12rem); line-height: 1.6; color: rgba(255, 255, 255, 0.9); text-shadow: 0 2px 10px rgba(0, 0, 0, 0.6); } /* Small proof pathway — Land -> People -> Proof -> Value Back. A quiet system cue, not a set of buttons: no pill/card backgrounds, thin hairline rule above, small letter-spaced monospace labels, joined by small amber arrows. Static — no hover lift, no transition. */ .page-landing .landing-hero-flow { list-style: none; margin: 0 0 1.9rem; padding: 0.85rem 0 0; border-top: 1px solid rgba(255, 255, 255, 0.22); display: flex; flex-wrap: wrap; align-items: center; gap: 0.55rem 0.7rem; } .page-landing .landing-hero-flow-step { font-family: 'Courier New', Courier, monospace; font-size: 0.72rem; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; color: rgba(255, 255, 255, 0.88); text-shadow: 0 1px 6px rgba(0, 0, 0, 0.6); white-space: nowrap; } .page-landing .landing-hero-flow-step + .landing-hero-flow-step::before { content: "\2192"; /* → */ margin-right: 0.7rem; color: var(--sdx-color-mama-amber); font-weight: 700; } /* Brand line — demoted slogan. Subordinate: small, muted, italic, never competes with the H1. */ .page-landing .landing-hero-brandline { margin: 0; font-family: var(--text-font); font-size: 0.9rem; font-style: italic; font-weight: 500; letter-spacing: 0.01em; color: rgba(255, 255, 255, 0.68); text-shadow: 0 2px 8px rgba(0, 0, 0, 0.55); } /* -- 2.2 Proof evidence strip (v8.27.0, 2026-07-08) ------------------------- Small, quiet image cue — LAND / PEOPLE / PROOF, three tiles only (Value Back stays text-only in .landing-hero-flow above; a fourth image tile was explicitly rejected as clutter). Anchored lower-right of the hero, over the photo but never dominating it: no ancestor between this element and .hero-wrap is positioned, so position:absolute here resolves against .hero-wrap's own box (already position:relative, already overflow:hidden in global.css) — the strip sits independent of the text column's flow and never pushes .landing-hero-copy around. z-index:2 keeps it above the ::before bottom vignette. Fixed small size (clamp caps both axes), rounded corners, thin border, soft shadow — deliberately NOT a Polaroid (no tilt, no white mat), NOT a card grid (three tiles, not four, no equal-width grid), NOT an orbit (plain flex row, no absolute-per-item ellipse math). Label + caption sit as a slim gradient overlay directly on the photo itself, so there is no separate white card body adding bulk. */ .page-landing .landing-hero-proof-strip { position: relative; z-index: 2; margin: 2.25rem 0 0; display: grid; grid-template-columns: repeat(4, 1fr); gap: clamp(0.6rem, 1.2vw, 1rem); max-width: 860px; } .page-landing .landing-hero-proof-tile { position: relative; width: 100%; height: clamp(120px, 15vw, 190px); margin: 0; border-radius: 10px; overflow: hidden; border: 1px solid rgba(255, 255, 255, 0.45); box-shadow: 0 10px 24px rgba(10, 8, 6, 0.35), 0 2px 8px rgba(10, 8, 6, 0.25); } .page-landing .landing-hero-proof-img { display: block; width: 100%; height: 100%; object-fit: cover; } /* Overlay band — bottom third of the tile only, gradient fade, so the photo itself (not a white panel) still reads as most of the tile. */ .page-landing .landing-hero-proof-overlay { position: absolute; inset: auto 0 0 0; margin: 0; padding: 0.45rem 0.6rem 0.5rem; display: flex; flex-direction: column; gap: 0.1rem; background: linear-gradient(to top, rgba(10, 8, 6, 0.85) 0%, rgba(10, 8, 6, 0.45) 60%, rgba(10, 8, 6, 0) 100%); } .page-landing .landing-hero-proof-label { font-family: 'Courier New', Courier, monospace; font-size: 0.68rem; font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase; color: var(--sdx-color-mama-amber); } .page-landing .landing-hero-proof-caption { font-family: var(--text-font); font-size: 0.8rem; line-height: 1.3; color: rgba(255, 255, 255, 0.94); } /* -- 2.3 Hero panel — visual-skim fix (v8.28.0, corrected v8.29.0, geometry-corrected v8.30.0, 2026-07-09) ------------------------------------ Owner brief: the hero already worked for readers; it did not work for a visual, non-reading 20-40yo visitor skimming for 5-10 seconds. "2.1 Hero" and "2.2 Proof evidence strip" above had drifted into duplicating their own cue — Land / People / Proof / Value Back read once as a plain text pathway (.landing-hero-flow) and again as a three-tile photo strip (.landing-hero-proof-strip), and the fourth "value back" photo was never shown. This block replaces both in the live page with ONE quiet sequence under fresh class names (.landing-hero-panel and its descendants) so nothing above is touched or depends on this, and this depends on nothing above either — .landing-hero-copy/-flow/-proof-* stay exactly as written, unreferenced, per no-deletion practice. Single left column: small kicker, a short one-line H1 (the primary skim target), one intro sentence, all FOUR hero-cue photos in one labelled row, and the existing brand slogan demoted to the bottom as a quiet close. v8.29.0 correction pass (see file header changelog for the full rationale): the row is now a content-sized (fit-content) grid of fixed, explicitly-square clamp(7.25rem,8vw,8.25rem) images — true thumbnails, not the v8.28.0 1fr-track pillars — each opening the shared site lightbox (media-lightbox.js) via button.media-thumb; the connecting line's inset is fixed-rem instead of percentage (correct for a fit-content row); labels are plain text-font, not monospace; the slogan is smaller and no longer serif; and the hero-wrap gradient above (2. Hero) is softer. See the Responsive section below for the 600px cue-row breakpoint (moved from the brief's 430px — arithmetic in that section's comment). Right two-thirds of the hero photo stays open — .hero-wrap's left-weighted gradient (2. Hero, above) governs that, unchanged by this section. */ .page-landing .landing-hero-panel { position: relative; z-index: 2; width: 100%; max-width: 620px; margin: 0; text-align: left; } /* Kicker — BUKTIKA. Same treatment as the retired .landing-hero-wordmark eyebrow (text-transform makes the case here irrelevant either way). */ .page-landing .landing-hero-kicker { margin: 0 0 0.9rem; font-family: var(--text-font); font-size: 0.8rem; font-weight: 800; letter-spacing: 0.32em; text-transform: uppercase; color: var(--sdx-color-mama-amber); /* v8.31.0: filmstrip .buktika-manifesto-left formula — see hero-wrap comment above. Readability now carried by the text itself. */ text-shadow: 0 4px 24px rgba(0, 0, 0, 1), 0 2px 10px rgba(0, 0, 0, 0.95), 0 1px 4px rgba(0, 0, 0, 0.80); } /* One-line H1 — the primary skim target. Narrows the shared .headline clamp (global.css) for this page only; colour/shadow/font-family are inherited from .headline via the same class combo the old H1 used. */ .page-landing .landing-hero-title { font-size: clamp(2.1rem, 4.4vw, 3.4rem); line-height: 1.15; margin: 0 0 1.1rem; text-align: left; /* v8.31.0: explicit override of the inherited .headline shadow (global.css, 0.8/0.6/0.4 opacity) with the filmstrip's stronger .buktika-manifesto-left formula — this is the primary skim target, so it gets the same treatment the filmstrip gives its own hero text. v8.32.0: full-strength formula read "a little too theatrical" on the H1 specifically — each layer's opacity eased back ~13% (1 -> 0.87, 0.95 -> 0.83, 0.80 -> 0.70). Offsets/blur untouched, layering kept — this is the same shadow, just quieter, not a different treatment. Only this rule changed; kicker/intro/cue-caption/slogan keep the full-strength filmstrip formula from v8.31.0. */ text-shadow: 0 4px 24px rgba(0, 0, 0, 0.87), 0 2px 10px rgba(0, 0, 0, 0.83), 0 1px 4px rgba(0, 0, 0, 0.70); } .page-landing .landing-hero-intro { margin: 0 0 1.8rem; /* v8.32.0: widened from 31rem so "Real work becomes accepted evidence. Value returns to origin." fits on one line on desktop — at this font-size the sentence needs ~37-38rem; 31rem was forcing an unwanted mid-sentence wrap. 40rem exceeds .landing-hero-panel's own max-width:620px (38.75rem), so the panel is the real, binding constraint on desktop; this is just wide enough to no longer be the constraint itself. Font-size unchanged. */ max-width: 40rem; font-family: var(--text-font); font-size: clamp(1rem, 1.25vw, 1.12rem); line-height: 1.6; color: rgba(255, 255, 255, 0.9); /* v8.31.0: filmstrip .buktika-manifesto-left formula. */ text-shadow: 0 4px 24px rgba(0, 0, 0, 1), 0 2px 10px rgba(0, 0, 0, 0.95), 0 1px 4px rgba(0, 0, 0, 0.80); } /* Four-image cue row — Land / Hands / Proof / Return, all visible at once, one set of labels only (figcaption on each thumbnail — no separate text pathway duplicating the same four words elsewhere). Content-sized row: grid-template-columns: repeat(4, max-content) + width:max-content means the row is exactly as wide as four thumbnails need, never wider, never stretching them. See the Responsive section for how the row is kept from ever needing more width than the viewport has. */ .page-landing .landing-hero-cues { position: relative; display: grid; grid-template-columns: repeat(4, max-content); gap: clamp(0.85rem, 1.4vw, 1.25rem); align-items: start; width: max-content; max-width: 100%; margin: 0 0 1.6rem; padding: 0.35rem 0 0; } /* Root-thread connecting line — warm amber, no arrowheads. Sits behind the thumbnails (z-index:0 vs. 1) so the images visually break it, the way a real thread would disappear behind something laid over it. Never reads as a rail, circuit, or process arrow. GEOMETRY CORRECTION v8.30.0: v8.29.0's line (2px, 0.28-0.34 opacity, no glow) was effectively invisible against the hero photo — thickness, opacity, and a soft box-shadow glow all raised so the line is an actual visible design element, not just present in the DOM. top: half of the desktop thumbnail height (clamp(7.5rem,9vw,9rem) / 2), so it stays centred on the images at every width the clamp produces; the 600px breakpoint below sets its own top to match the smaller mobile thumbnail before hiding it entirely at the 2x2 step. */ .page-landing .landing-hero-cues::before { content: ""; position: absolute; left: 4rem; right: 4rem; top: calc(clamp(7.5rem, 9vw, 9rem) / 2); height: 3px; border-radius: 999px; background: linear-gradient(90deg, transparent 0%, rgba(245, 176, 20, 0) 4%, rgba(245, 176, 20, 0.55) 18%, rgba(245, 176, 20, 0.68) 50%, rgba(245, 176, 20, 0.55) 82%, rgba(245, 176, 20, 0) 96%, transparent 100%); box-shadow: 0 0 0.75rem rgba(245, 176, 20, 0.22); z-index: 0; pointer-events: none; } .page-landing .landing-hero-cue-tile { position: relative; z-index: 1; margin: 0; display: flex; flex-direction: column; align-items: center; gap: 0; } /* Trigger button — wraps the image so the thumbnail opens the shared site lightbox (assets/js/partials/media-lightbox.js). Reset to plain photo chrome: no button background/border/padding of its own. The REQUIRED class is media-thumb (media-lightbox.js's document-level click delegation only recognises that exact class); landing-hero-cue-trigger carries only this reset, nothing lightbox-specific. GEOMETRY CORRECTION v8.30.0: border-radius here was 999px — a circular button mask sitting directly behind/around a likewise-circular image compounded into the "round badge" the owner rejected twice. Matches .landing-hero-cue-img's radius below exactly so the clickable area and the visible shape are identical. */ .page-landing .landing-hero-cue-trigger { display: block; margin: 0; padding: 0; border: 0; background: none; line-height: 0; cursor: pointer; border-radius: 1.1rem; } /* Soft-rounded SQUARE thumbnails, not circles, not pillars — GEOMETRY CORRECTION v8.30.0. Two things changed from v8.29.0, both owner- specified: border-radius 999px -> 1.1rem (a badge is not a thumbnail), and the size increased to clamp(7.5rem, 9vw, 9rem) — a 120px floor on effectively every desktop/laptop viewport (9vw only exceeds that floor above ~1333px), up from the previous 116px floor, so these read as substantial, legible thumbnails rather than icons. aspect-ratio:1/1 is a redundant safeguard alongside the explicit width/height in case any ancestor ever constrains one without the other. The hairline ring stays a box-shadow spread, not a border, per the owner's own spec both times. */ .page-landing .landing-hero-cue-img { display: block; width: clamp(7.5rem, 9vw, 9rem); height: clamp(7.5rem, 9vw, 9rem); aspect-ratio: 1 / 1; object-fit: cover; border-radius: 1.1rem; /* v8.32.0: softened — shape/size/radius unchanged, only the shadow and ring eased back so these read as small photographs sitting in the hero, not UI cards. Drop shadow: blur 1.5rem->1.2rem, opacity 0.28->0.20. Ring (the 0-spread/1px layer): opacity 0.24->0.14, so the bright edge is quieter without disappearing. */ box-shadow: 0 0.5rem 1.2rem rgba(0, 0, 0, 0.20), 0 0 0 1px rgba(255, 255, 255, 0.14); } /* Labels — plain text-font small caps (not monospace — see v8.29.0 changelog). Minor size bump to the owner's 0.74rem this pass. A light text-shadow is kept (not in the owner's snippet) since this caption can sit directly over bright lake pixels once the scrim fades — without it the label can lose contrast on that background. */ .page-landing .landing-hero-cue-caption { display: block; margin-top: 0.5rem; font-family: var(--text-font); font-size: 0.74rem; font-weight: 800; letter-spacing: 0.08rem; text-transform: uppercase; text-align: center; color: rgba(255, 255, 255, 0.88); /* v8.31.0: filmstrip .buktika-manifesto-left formula. */ text-shadow: 0 4px 24px rgba(0, 0, 0, 1), 0 2px 10px rgba(0, 0, 0, 0.95), 0 1px 4px rgba(0, 0, 0, 0.80); } /* Brand slogan — demoted to the bottom of the panel as a quiet closing line. CORRECTION v8.29.0: v8.28.0 over-corrected and made this large enough to compete with the H1; reduced to the owner's quieter clamp and dropped the serif --headline-font in favour of the body text font, so it reads as a closing line, not a second headline. A light text- shadow is kept (not in the owner's snippet) for the same over-the-photo legibility reason as the caption above. */ .page-landing .landing-hero-slogan { margin: 0; margin-top: 1.4rem; max-width: 30rem; font-family: var(--text-font); font-weight: 700; font-size: clamp(1.05rem, 1.6vw, 1.45rem); line-height: 1.25; color: rgba(255, 255, 255, 0.90); /* v8.31.0: filmstrip .buktika-manifesto-left formula. */ text-shadow: 0 4px 24px rgba(0, 0, 0, 1), 0 2px 10px rgba(0, 0, 0, 0.95), 0 1px 4px rgba(0, 0, 0, 0.80); } /* -- Responsive ------------------------------------------------------------- */ /* 700px is the shared threshold for both the copy column and the proof strip: above it, the strip stays absolute/lower-right per owner spec; below it, the strip drops into normal flow as one compact horizontal scroll row under the text (never a stacked card wall), and the hero's forced min-height is relaxed since content now determines the height. */ @media (max-width: 700px) { .page-landing .hero { min-height: auto; } .page-landing .landing-hero-proof-strip { grid-template-columns: repeat(2, 1fr); max-width: none; margin: 1.75rem 0 0; } .page-landing .landing-hero-proof-tile { width: 100%; height: clamp(110px, 34vw, 150px); } /* Hero panel (v8.28.0) — text column takes full available width below 700px regardless of the cue row's own breakpoint (see max-width:600px below), since this is just a convenience for the text, not tied to the row's square-thumbnail math. */ .page-landing .landing-hero-panel { max-width: 100%; } } @media (max-width: 560px) { .page-landing .landing-hero-h1 { font-size: clamp(1.9rem, 8vw, 2.5rem); } /* Pathway wraps to a compact set of short lines rather than one tight row — still the same small text-only cue, never a card stack. */ .page-landing .landing-hero-flow { gap: 0.5rem 0.6rem; } } /* Hero cue row — breakpoint kept at 600px (moved from the owner's original 430px in v8.29.0; re-verified here against v8.30.0's larger sizes). The row is max-content around four fixed clamp(7.5rem,9vw,9rem) images, which floor at 120px on every viewport under ~1333px — four of those plus three gaps at their own clamp(0.85rem,1.4vw,1.25rem) floor (13.6px under ~971px) need 4x120 + 3x13.6 = 520.8px of row width. .hero's own horizontal padding (clamp(1.25rem,3vw,2.5rem), floors at 20px/side under ~667px) leaves 561px available at 601px viewport (the narrowest width this single-row layout ever has to cover) — a 40px margin above the 520.8px the row needs, so it never overflows. Below 600px: four 92-112px squares in one row would be tight, so this drops to a 2x2 grid (all four still visible without scrolling) and hides the connecting line, since a thread behind a 2x2 grid would read as a stray mark rather than a connection. Mobile image radius drops to 0.9rem (owner spec) — proportionally smaller than the desktop 1.1rem for the smaller box. */ @media (max-width: 600px) { .page-landing .landing-hero-cues { grid-template-columns: repeat(2, max-content); gap: 0.9rem 1rem; width: max-content; max-width: 100%; } .page-landing .landing-hero-cues::before { display: none; } .page-landing .landing-hero-cue-trigger { border-radius: 0.9rem; } .page-landing .landing-hero-cue-img { width: clamp(5.8rem, 34vw, 7rem); height: clamp(5.8rem, 34vw, 7rem); border-radius: 0.9rem; } } /* -- 2.1s Hero split / evidence card grid — SUPERSEDED v8.26.0, retained unreferenced --------------------------------------------------------------- The v8.25.0 two-column hero (.landing-hero-split) and its four-card EVIDENCE SYSTEM (.landing-hero-evidence / .landing-evi-*) are exactly what the owner rejected in v8.26.0 — "the four large image cards dominate... cluttered, heavy, dashboard-like." Left in place rather than deleted, per this project's no-deletion practice (same treatment already given to the orbit/cue block further below). Safe to leave: index.html no longer contains .landing-hero-split, .landing-hero-evidence, or any .landing-evi-* element, so none of the following rules apply to the live page. */ .page-landing .landing-hero-split { display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(0, 0.95fr); gap: clamp(2rem, 4vw, 4.5rem); align-items: center; width: 100%; max-width: 1200px; margin: 0 auto; } .page-landing .landing-hero-evidence { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: clamp(0.75rem, 1.4vw, 1.15rem); } .page-landing .landing-evi-card { display: flex; flex-direction: column; background: #fbf9f5; border: 1px solid rgba(255, 255, 255, 0.5); border-radius: 12px; overflow: hidden; box-shadow: 0 14px 34px rgba(20, 16, 10, 0.34), 0 3px 10px rgba(20, 16, 10, 0.22); } .page-landing .landing-evi-media { position: relative; aspect-ratio: 1 / 1; overflow: hidden; } .page-landing .landing-evi-img { display: block; width: 100%; height: 100%; object-fit: cover; } .page-landing .landing-evi-num { position: absolute; top: 0.5rem; left: 0.5rem; min-width: 1.55rem; padding: 0.12rem 0.34rem; font-family: 'Courier New', Courier, monospace; font-size: 0.72rem; font-weight: 700; letter-spacing: 0.05em; text-align: center; color: #1b1712; background: var(--sdx-color-mama-amber); border-radius: 4px; box-shadow: 0 2px 6px rgba(0, 0, 0, 0.35); } .page-landing .landing-evi-text { padding: 0.6rem 0.7rem 0.75rem; display: flex; flex-direction: column; gap: 0.2rem; } .page-landing .landing-evi-label { font-family: 'Courier New', Courier, monospace; font-size: 0.66rem; font-weight: 700; letter-spacing: 0.14em; text-transform: uppercase; color: var(--sdx-color-mama-gold); } .page-landing .landing-evi-caption { font-family: var(--text-font); font-size: 0.82rem; line-height: 1.35; color: #2a2620; } @media (max-width: 900px) { .page-landing .landing-hero-split { grid-template-columns: 1fr; gap: 2rem; max-width: 40rem; } } @media (max-width: 560px) { .page-landing .landing-hero-evidence { grid-template-columns: 1fr; gap: 0.6rem; } .page-landing .landing-evi-card { flex-direction: row; align-items: stretch; } .page-landing .landing-evi-media { flex: 0 0 92px; width: 92px; } .page-landing .landing-evi-text { justify-content: center; padding: 0.65rem 0.85rem; } } /* -- 2.1x Hero cue — SUPERSEDED v8.24.0, retained unreferenced --------------- Everything from here to the end of this sub-section targeted .landing-hero-orbit / .landing-hero-cue, which no longer exist in index.html (see "2.1 Hero — static explanatory rebuild" above). Left in place rather than deleted, per this project's no-deletion practice — same treatment already given to orphaned i18n keys like landing.hero.tagline. Safe to leave: these selectors now match nothing, so none of the rules below apply to the live page. Original v8.23.0 header follows unchanged. */ /* -- 2.1 Hero cue (v8.23.0, 2026-07-08) -------------------------------------- Replaces the former .tagline ("A living system"). www-rebuild-control/ 18–22, fourth revision same day: wide flat ELLIPSE ORBIT around the fixed centre headline. Why the previous three revisions changed: v1 (inline SVG line marks on a tiny elliptical ring) read as too small/abstract once real photography was required. v2 (grayscale circular photo thumbnails on the same ring) read as a UI avatar cluster and wasted the hero's width. v3 (scattered Polaroid cards in normal flex-row flow below the headline) fixed both of those but introduced a new one, flagged directly against the live render: four cards in a horizontal flex row reads as exactly that — a row / feature strip — not an orbit, however much individual tilt each card carried. v4 (this revision) inverts the structure instead of tweaking the row: the headline (.landing-hero-orbit-center) is now the fixed centre of a wide, flat ellipse; the four cards are absolute-positioned at named points on that ellipse (left-middle / top-centre / right-middle / bottom-centre) via left/top percentages on .landing-hero-orbit, which is what actually produces "orbit," not row spacing. One card is active at a time — it scales up (not translates: translate would fight the left/top anchor point and drift the card off its ellipse position), comes forward in z-index, gets a stronger shadow, and brightens; the other three stay smaller, visible, at their fixed ellipse point — never a row, never hidden. Each card's own sentence now surfaces directly beneath that card on activation, instead of a single shared caption line, so the description always reads next to the thing it describes. All rules scoped under .page-landing — does not leak to other pages. Does not touch .tagline / .hero / .headline rules above, which remain shared globals other pages still depend on; .landing-hero-orbit-center only adds positioning, it does not override .headline's font rules. */ .page-landing .landing-hero-orbit { position: relative; width: 100%; max-width: 1400px; margin: 0 auto; min-height: clamp(360px, 40vw, 560px); display: flex; align-items: center; justify-content: center; } /* The centre truth — stays put, stays dominant. No new size/weight here; .headline above already governs those. This only adds the stacking context that keeps it legible against the orbiting cards. */ .page-landing .landing-hero-orbit-center { position: relative; z-index: 3; max-width: 36rem; margin: 0 auto; } /* Decorative wrapper for the four cards — spans the whole orbit box so each item's left/top percentage below is relative to the ellipse, not to the headline. pointer-events:none here, re-enabled per item, so the empty space between cards never blocks clicks/hover on the headline. */ .page-landing .landing-hero-cue { position: absolute; inset: 0; pointer-events: none; } .page-landing .landing-hero-cue-item { position: absolute; pointer-events: auto; transform: translate(-50%, -50%) rotate(var(--tilt, 0deg)); transition: z-index 0s; z-index: 1; } /* The ellipse points — left-middle / top-centre / right-middle / bottom-centre, wide and flat (horizontal spread 18%→82%, vertical spread only 22%→78%) so it reads as an oval orbit, not a circle. Each card also keeps a small fixed --tilt so the set still feels placed by hand, not machine-aligned to the ellipse. */ .page-landing .landing-hero-cue-item[data-cue="land"] { left: 18%; top: 52%; --tilt: -6deg; } .page-landing .landing-hero-cue-item[data-cue="people"] { left: 42%; top: 22%; --tilt: 4deg; } .page-landing .landing-hero-cue-item[data-cue="proof"] { left: 82%; top: 52%; --tilt: -4deg; } .page-landing .landing-hero-cue-item[data-cue="value_back"] { left: 56%; top: 78%; --tilt: 5deg; } .page-landing .landing-hero-cue-item.is-active { z-index: 6; /* comes forward of every resting card and the centre text */ } /* The Polaroid frame — white card. Scale lives HERE, on the frame, not on .landing-hero-cue-item: the item's left/top anchor + translate(-50%, -50%) is what places it exactly on the ellipse point, so item itself must never gain a second transform component or it drifts off that point. Scaling the frame instead keeps the anchor exact while still visibly "coming forward." */ .page-landing .landing-hero-cue-frame { --cue-photo: clamp(68px, 6vw, 98px); display: flex; flex-direction: column; align-items: center; width: calc(var(--cue-photo) + 14px); background: #faf8f4; padding: 7px 7px 0; border-radius: 3px; box-shadow: 0 6px 16px rgba(0, 0, 0, 0.35), 0 2px 5px rgba(0, 0, 0, 0.25); transform: scale(1); transition: transform 0.5s ease, box-shadow 0.5s ease; } .page-landing .landing-hero-cue-item.is-active .landing-hero-cue-frame { transform: scale(1.22); /* owner spec: "about 1.15 to 1.25" */ box-shadow: 0 20px 40px rgba(0, 0, 0, 0.50), 0 8px 18px rgba(0, 0, 0, 0.35); } .page-landing .landing-hero-cue-icon { display: block; width: var(--cue-photo); height: var(--cue-photo); object-fit: cover; filter: saturate(0.9) brightness(0.94); /* quietly waiting */ transition: filter 0.5s ease; } .page-landing .landing-hero-cue-item.is-active .landing-hero-cue-icon { filter: saturate(1.06) brightness(1.08); /* "slightly clearer/brighter" */ } /* Caption strip — typography matches the filmstrip's rail-text treatment below (assets/css/landing/partials/landing-film-strip.css .film-rail-text span: Courier New monospace, uppercase, letter- spaced) so the two sections read as one documentary voice. */ .page-landing .landing-hero-cue-label { display: block; width: 100%; padding: 0.45rem 0.15rem 0.55rem; text-align: center; font-family: 'Courier New', Courier, monospace; font-size: 0.6rem; font-weight: 700; letter-spacing: 0.12rem; text-transform: uppercase; color: rgba(74, 69, 60, 0.8); /* ink-on-paper analogue of the filmstrip's amber-on-celluloid rail text */ transition: color 0.5s ease; } .page-landing .landing-hero-cue-item.is-active .landing-hero-cue-label { color: var(--sdx-color-mama-amber); /* same accent the filmstrip rail text uses (rgba(245,176,20,…)) */ } /* Per-card description — surfaces directly beneath ITS OWN card only when that card is active (replaces the old single shared caption line). Sits on the hero photo, so it keeps the white/text-shadow treatment .headline itself uses. Positioned off the (unscaled) item box, not the frame, so it doesn't inherit the frame's active scale. */ .page-landing .landing-hero-cue-sentence { position: absolute; top: 100%; left: 50%; transform: translateX(-50%); margin-top: 0.9rem; width: max-content; max-width: 12rem; text-align: center; font-family: var(--text-font); font-size: 0.74rem; line-height: 1.4; color: #ffffff; /* hero text over photography — same exception as .headline, global.css v3.3.0 */ text-shadow: 0 3px 10px rgba(0, 0, 0, 0.90), 0 2px 5px rgba(0, 0, 0, 0.70); opacity: 0; pointer-events: none; transition: opacity 0.4s ease; } .page-landing .landing-hero-cue-item.is-active .landing-hero-cue-sentence { opacity: 1; } @media (prefers-reduced-motion: reduce) { .page-landing .landing-hero-cue-item[data-cue="proof"] { /* Reduced motion still needs one settled "active" state per Doc 20 §6 — Proof picked arbitrarily as the fixed resting-active card. Shadow/ colour/opacity settle immediately; the scale transform is skipped entirely rather than transitioned, since scale pop is itself the motion this preference asks to avoid. */ z-index: 6; } .page-landing .landing-hero-cue-item[data-cue="proof"] .landing-hero-cue-frame { box-shadow: 0 20px 40px rgba(0, 0, 0, 0.50), 0 8px 18px rgba(0, 0, 0, 0.35); } .page-landing .landing-hero-cue-item[data-cue="proof"] .landing-hero-cue-label { color: var(--sdx-color-mama-amber); } .page-landing .landing-hero-cue-item[data-cue="proof"] .landing-hero-cue-sentence { opacity: 1; } } @media (max-width: 780px) { .page-landing .landing-hero-orbit { min-height: clamp(300px, 78vw, 420px); } .page-landing .landing-hero-orbit-center { max-width: 20rem; } /* Ellipse points pulled in and flattened further so the orbit still clears the viewport edges at narrow widths — same mechanism, tighter radius, not a switch to a row/grid. */ .page-landing .landing-hero-cue-item[data-cue="land"] { left: 10%; top: 55%; } .page-landing .landing-hero-cue-item[data-cue="people"] { left: 38%; top: 14%; } .page-landing .landing-hero-cue-item[data-cue="proof"] { left: 90%; top: 55%; } .page-landing .landing-hero-cue-item[data-cue="value_back"] { left: 62%; top: 90%; } .page-landing .landing-hero-cue-frame { --cue-photo: clamp(46px, 16vw, 64px); } .page-landing .landing-hero-cue-sentence { max-width: 7.5rem; font-size: 0.62rem; } } .page-landing .btn-hero-primary { background: linear-gradient(135deg, var(--page-accent) 0%, var(--page-depth) 100%); box-shadow: 0 4px 20px rgba(0,0,0,.50), 0 2px 8px rgba(0,0,0,.35), inset 0 0 0 1px rgba(255,255,255,.25); } .page-landing .btn-hero-primary:hover { transform: translateY(-3px); box-shadow: 0 8px 28px rgba(0,0,0,.60), 0 3px 10px rgba(0,0,0,.40), inset 0 0 0 1px rgba(255,255,255,.30); } /* www-F §3.4: white-space: pre-line unlocks \n line breaks from i18n values. Not a prohibited override — only line-height, margin-top, font-size, font-weight are locked on .headline. */ .page-landing .headline { white-space: pre-line; } /* -- 2c. Film strip / Section 1 — owned by landing-film-strip.css v2.0.0 --- */ /* none — all .sdx-film-strip rules live in landing-film-strip.css. OVR-6. */ /* -- 3. (Section alternation removed v8.9.0 FIX-F. All sections var(--card).) -- */ /* -- 3b. Section title margin — OVR-2 ---------------------------------------- */ /* Owner override. Scoped to .page-landing to avoid touching global.css. */ .page-landing .section-title, .page-landing .sdx-card-section > h2 { margin: 1.25rem auto 2.5rem; } /* -- 4. Fence -------------------------------------------------------------- */ .page-landing .landing-fence { position: relative; width: 100%; background-image: url("/assets/images/landing/section-fence-bg.webp"); background-size: cover; background-position: center 45%; overflow: hidden; padding: 6rem 2.5rem; } /* rgba scrim — confirmed exception DOC-01 §2.5. 0.45 within §18.6 range. */ .page-landing .landing-fence::before { content: ""; position: absolute; inset: 0; background: rgba(0, 0, 0, 0.45); pointer-events: none; z-index: 0; } .page-landing .landing-fence-inner { position: relative; z-index: 3; max-width: 820px; margin: 0 auto; } /* FIX-C (v8.9.0): glass backdrop removed. Text-shadow provides legibility. */ .page-landing .landing-fence-para { font-size: clamp(1.0625rem, 1.8vw, 1.25rem); line-height: 1.8; color: #ffffff; margin: 0 0 1.5rem; text-shadow: 0 4px 24px rgba(0,0,0,1), 0 2px 10px rgba(0,0,0,.95), 0 1px 4px rgba(0,0,0,.85); text-align: justify; hyphens: auto; } .page-landing .landing-fence-pull { font-family: var(--headline-font); font-weight: 700; font-size: clamp(1.25rem, 2.5vw, 1.625rem); line-height: 1.4; color: var(--sdx-color-mama-amber); margin: 2rem 0 0; padding-top: 1.5rem; border-top: 2px solid rgba(245, 176, 20, 0.4); text-shadow: 0 4px 24px rgba(0,0,0,1), 0 2px 10px rgba(0,0,0,.95), 0 1px 4px rgba(0,0,0,.80); text-align: center; } /* -- 5. Three Faces -------------------------------------------------------- */ /* FIX-K (v8.11.0): .page-landing .container padding-top overrides global reset. */ .page-landing .container { padding-top: 4.5rem; } .page-landing .landing-faces-grid { grid-template-columns: repeat(3, 1fr); align-items: stretch; } .page-landing .landing-face-card { display: flex; flex-direction: column; gap: 0.75rem; } .page-landing .landing-face-farmer { border-left-color: var(--sdx-color-green-deep); } .page-landing .landing-face-mama { border-left-color: var(--sdx-color-mama-violet); } .page-landing .landing-face-viridian { border-left-color: var(--sdx-color-purple-deep); } .page-landing .landing-face-farmer .landing-face-role { color: var(--sdx-color-green-deep); } .page-landing .landing-face-mama .landing-face-role { color: var(--sdx-color-mama-violet); } .page-landing .landing-face-viridian .landing-face-role { color: var(--sdx-color-purple-deep); } /* FIX-J (v8.11.0): Fixed height on all face-card buttons. V1-FIX: box-shadow uses --shadow-* tokens. DOC-01 §2.5. */ .page-landing .landing-face-farmer .sdx-btn-primary { background: linear-gradient(145deg, var(--sdx-color-mama-amber) 0%, var(--sdx-color-stem-olive) 100%); box-shadow: 0 4px 14px var(--shadow-farmer); margin-top: auto; color: #ffffff; width: 100%; display: flex; align-items: center; justify-content: center; height: 3.5rem; text-align: center; } .page-landing .landing-face-mama .sdx-btn-primary { background: linear-gradient(135deg, var(--sdx-color-mama-violet) 0%, var(--sdx-color-mama-depth) 100%); box-shadow: 0 4px 14px var(--shadow-mama); margin-top: auto; color: #ffffff; width: 100%; display: flex; align-items: center; justify-content: center; height: 3.5rem; text-align: center; } .page-landing .landing-face-viridian .sdx-btn-primary { background: linear-gradient(145deg, var(--sdx-color-purple-deep) 0%, var(--sdx-color-mama-depth) 100%); box-shadow: 0 4px 14px var(--shadow-viridian); margin-top: auto; color: #ffffff; width: 100%; display: flex; align-items: center; justify-content: center; height: 3.5rem; text-align: center; } .page-landing .landing-face-portrait { width: 100%; aspect-ratio: 1/1; overflow: hidden; border-radius: var(--radius); background: var(--border); margin-bottom: 0.5rem; } .page-landing .landing-face-portrait img { width: 100%; height: 100%; object-fit: cover; display: block; } /* V2-FIX: letter-spacing em → rem. */ .page-landing .landing-face-role { font-size: var(--small); font-weight: 600; letter-spacing: 0.08rem; text-transform: uppercase; margin: 0; } .page-landing .landing-face-card h3 { font-size: 1.375rem; margin: 0; } .page-landing .landing-face-card p:not(.landing-face-role) { font-size: var(--body); line-height: 1.75; color: var(--muted); margin: 0; } .page-landing .landing-faces-connector { text-align: center; font-family: var(--headline-font); font-style: italic; font-size: clamp(1rem, 2vw, 1.25rem); color: var(--muted); margin: 2.5rem auto 0; max-width: 640px; padding-top: 2rem; border-top: 1px solid var(--border); } /* -- 6. How It Works ------------------------------------------------------- */ /* V3-FIX: .landing-how-cta rule removed. PIL-14 §5.4: ghost CTA = var(--border) + var(--fg). Global .sdx-btn-secondary governs. No per-page colour override permitted. */ .page-landing .landing-how > .section-title { margin-bottom: 0; } .page-landing .landing-how-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1.5rem; max-width: 980px; margin: 0 auto 1.5rem; } .page-landing .landing-how-body { min-width: 0; margin: 0; padding: 1.5rem 1.75rem; border: 1.5px solid var(--border); border-left: 4px solid var(--sdx-color-mama-amber); border-radius: var(--radius); background: var(--surface-alt); box-shadow: var(--card-shadow); color: var(--fg); font-size: var(--body); line-height: 1.75; text-align: left; } .page-landing .landing-how-body:nth-child(2) { border-left-color: var(--sdx-color-green-deep); } .page-landing .landing-governed-strip { display: block; max-width: 980px; margin: 0 auto 1.5rem; padding: 1rem 1.25rem; border: 1.5px solid var(--border); border-left: 4px solid var(--sdx-color-green-deep); border-radius: var(--radius); background: var(--surface-alt); box-shadow: 0 6px 18px rgba(15, 23, 42, 0.07); color: var(--fg); font-size: var(--body); font-weight: 600; line-height: 1.55; text-align: left; text-decoration: none; } .page-landing .landing-governed-strip:hover, .page-landing .landing-governed-strip:focus-visible { border-color: var(--sdx-color-mama-amber); text-decoration: underline; } .page-landing .landing-how-link-wrap { margin: 1.5rem auto 0; display: flex; justify-content: center; max-width: 680px; } /* OVR-4: Living Tower pillar colours on the How It Works CTA. Owner override. */ .page-landing .landing-how-link-wrap .sdx-btn-primary { background: linear-gradient(135deg, var(--sdx-color-green-deep) 0%, var(--sdx-color-stem-olive) 100%); box-shadow: 0 4px 14px var(--shadow-farmer); color: #ffffff; } /* -- 7. Where Do You Fit -------------------------------------------------- */ .page-landing #landing-door.sdx-card-section { padding-top: 2rem; } .page-landing #landing-door .section-intro { margin-bottom: 1.25rem; } .page-landing .landing-door-grid { grid-template-columns: repeat(2, 1fr); align-items: stretch; } .page-landing .landing-door-card { display: flex; flex-direction: column; gap: 0.75rem; height: 100%; } .page-landing .landing-door-card h3 { font-size: 1.125rem; line-height: 1.4; margin: 0; } .page-landing .landing-door-card p:not(.landing-door-eyebrow) { flex: 1; font-size: var(--body); line-height: 1.75; color: var(--muted); margin: 0; } /* V2-FIX: letter-spacing em → rem. */ .page-landing .landing-door-eyebrow { font-size: var(--small); font-weight: 600; letter-spacing: 0.08rem; text-transform: uppercase; margin: 0; } .page-landing .landing-door-farmer .landing-door-eyebrow { color: var(--sdx-color-green-deep); } .page-landing .landing-door-sielsgrond .landing-door-eyebrow { color: var(--sdx-color-teal-deep); } .page-landing .landing-door-community .landing-door-eyebrow { color: var(--sdx-color-mama-violet); } .page-landing .landing-door-viridian .landing-door-eyebrow { color: var(--sdx-color-purple-deep); } .page-landing .landing-door-farmer { border-left-color: var(--sdx-color-green-deep); } .page-landing .landing-door-sielsgrond { border-left-color: var(--sdx-color-teal-deep); } .page-landing .landing-door-community { border-left-color: var(--sdx-color-mama-violet); } .page-landing .landing-door-viridian { border-left-color: var(--sdx-color-purple-deep); } /* FIX-J: Door card buttons — same fixed height:3.5rem treatment as face cards. */ .page-landing .landing-door-card .sdx-btn-primary { margin-top: auto; color: #ffffff; width: 100%; display: flex; align-items: center; justify-content: center; height: 3.5rem; text-align: center; } .page-landing .landing-door-farmer .sdx-btn-primary { background: linear-gradient(145deg, var(--sdx-color-mama-amber) 0%, var(--sdx-color-stem-olive) 100%); box-shadow: 0 4px 14px var(--shadow-farmer); } .page-landing .landing-door-sielsgrond .sdx-btn-primary { background: linear-gradient(145deg, var(--sdx-color-teal-deep) 0%, var(--sdx-color-mama-depth) 100%); box-shadow: 0 4px 14px var(--shadow-sielsgrond); } .page-landing .landing-door-community .sdx-btn-primary { background: linear-gradient(135deg, var(--sdx-color-mama-violet) 0%, var(--sdx-color-mama-depth) 100%); box-shadow: 0 4px 14px var(--shadow-mama); } .page-landing .landing-door-viridian .sdx-btn-primary { background: linear-gradient(145deg, var(--sdx-color-purple-deep) 0%, var(--sdx-color-mama-depth) 100%); box-shadow: 0 4px 14px var(--shadow-viridian); } /* -- 8. (Removed.) ---------------------------------------------------------- */ /* -- 9. Trilogy Strip — www-E §12–§13 ---------------------------------------- Geometry, behaviour, typography: global.css v3.14.0. This page owns thumbnail backgrounds only. */ .page-landing .trilogy-thumb-landing { background-image: url('/assets/images/landing/index-hero.webp'); background-position: center 35%; } .page-landing .trilogy-thumb-about { background-image: url('/assets/images/about/about-hero.webp'); } .page-landing .trilogy-thumb-living-tower { background-image: url('/assets/images/living-tower/living-tower-hero.webp'); } /* -- 10. CTA band — REMOVED. www-E §11: absent on all three spine pages. -- */ /* -- 11. Responsive -------------------------------------------------------- */ @media (max-width: 1024px) { .page-landing .landing-faces-grid, .page-landing .landing-door-grid { grid-template-columns: repeat(2, 1fr); } } @media (max-width: 680px) { .page-landing .landing-faces-grid, .page-landing .landing-door-grid, .page-landing .landing-how-grid { grid-template-columns: 1fr; } /* FIX-A: Mobile hero — DOC-02 §3.3.6 canonical. Both rules matched. */ .page-landing .hero-wrap, .page-landing .hero { min-height: 560px; } .page-landing .hero { padding: 3rem 1.25rem; } .page-landing .landing-fence { padding: 3.5rem 1.5rem; } .page-landing .landing-fence-para { font-size: var(--body); text-align: left; hyphens: none; } .page-landing .landing-how-grid { gap: 1rem; } .page-landing .landing-how-body { padding: 1.25rem; } .page-landing .landing-faces-connector { text-align: left; } /* FIX-K: Mobile container padding-top reduced to match tighter mobile rhythm. */ .page-landing .container { padding-top: 2.5rem; } } /* -- 12. Dark mode --------------------------------------------------------- */ [data-theme="dark"] .page-landing { background: var(--page-dark-base); } [data-theme="dark"] .page-landing .landing-fence::before { background: rgba(0,0,0,.78); } [data-theme="dark"] .page-landing .landing-how-body, [data-theme="dark"] .page-landing .landing-governed-strip { background: var(--card); } [data-theme="dark"] .page-landing .landing-face-farmer .landing-face-role { color: var(--sdx-color-green-soft); } [data-theme="dark"] .page-landing .landing-face-mama .landing-face-role { color: var(--sdx-color-mama-violet-light); } [data-theme="dark"] .page-landing .landing-face-viridian .landing-face-role { color: var(--sdx-color-purple-deep); } [data-theme="dark"] .page-landing .landing-door-farmer .landing-door-eyebrow { color: var(--sdx-color-green-soft); } [data-theme="dark"] .page-landing .landing-face-farmer .landing-face-role, [data-theme="dark"] .page-landing .landing-door-farmer .landing-door-eyebrow { color: var(--sdx-color-leaf-green); } [data-theme="dark"] .page-landing .landing-door-community .landing-door-eyebrow { color: var(--sdx-color-mama-violet-light); } [data-theme="dark"] .page-landing .landing-door-viridian .landing-door-eyebrow { color: var(--sdx-color-purple-deep); } [data-theme="dark"] .page-landing .landing-face-viridian .landing-face-role, [data-theme="dark"] .page-landing .landing-door-viridian .landing-door-eyebrow { color: var(--sdx-color-mama-violet-light); } [data-theme="dark"] .page-landing .landing-governed-strip { color: var(--fg); } [data-theme="dark"] .page-landing #buktika-loop > .eyebrow { color: var(--muted); } /* V3-FIX: .landing-how-cta dark override removed along with light mode rule. */ [data-theme="dark"] .page-landing .landing-fence-pull { color: var(--sdx-color-mama-amber); }