/* File: living-tower.css Path: /assets/css/living-tower/living-tower.css Version: v3.30.0 Issued: 2026-03-13 Author: Buktika Webdesk (Binka) Purpose: Living Tower page stylesheet — token consumer only. The organism's front door. How the system works. Colour Map: v3.7.0 Section 5.7 (LOCKED) Design System: v4.0.0 Umbrella: v1.1.0 License: © Buktika, 2026. All rights reserved. ISO Reference: ISO 27001, ISO 9241-110 Source Naming Standard: Buktika v7.1 (ISO Aligned) Changelog: v3.30.0 (2026-06-30): SITE-WIDE READABILITY AUDIT. Raised substantive explanatory, proof, gate, allocation, and ledger copy to the 1rem body floor. Compact identity labels remain small; low-contrast violet/amber labels use darker tokens. v3.29.0 (2026-06-13): MamaDEX/social upliftment identity aligned to Colour Map v3.15.0. CHANGED - Borders, who-label, problem tint, pillar button, and social upliftment bar from mama-earth brown to mama-violet. v3.28.0 (2026-03-13): BREADCRUMB MIGRATED TO global.css v3.15.0. Removed: all .page-living-tower .sdx-spine-breadcrumb rules. Page CSS owns nothing for this component. v3.27.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/640px trilogy chapter rules. Retained: .trilogy-thumb-[slug] backgrounds + .trilogy-contact (Living Tower-only panel — stays in page CSS per ownership rule). .trilogy-contact: opacity:0.55→1.0, transition→filter brightness, :focus→:focus-visible, border token→--sdx-color-mama-amber hardcoded. UX fix: inactive panels full opacity — links must invite. v3.26.0 (2026-03-09): CONTACT CAPTION HEIGHT FIX + DOORS CLEANUP. FIXED - .trilogy-contact caption height: contact panel had one (label only), chapter panels have two (num + label). Caption bar was shorter because there was less content. Fixed by adding trilogy-num eyebrow span ("Get in touch") in HTML — two-line caption matches chapter panels exactly. REMOVED - .trilogy-doors display:none rule — HTML block removed from living-tower.html. Orphaned CSS cleaned up. v3.25.0 (2026-03-09): TRILOGY CONTACT THUMB STRUCTURE + POSITION FIX. FIXED - .trilogy-contact: background-image moved off the onto a .trilogy-thumb-contact div — same structure as .trilogy-chapter panels. Without the thumb div the panel had no full-height photo fill, causing the caption bar to sit at the wrong height. FIXED - background-position: center 36% — brings signpost into frame. FIXED - .trilogy-contact .trilogy-caption: only background override kept — position/padding/z-index inherited from shared .trilogy-caption rule. v3.24.0 (2026-03-09): TRILOGY CONTACT IMAGE POSITION + CAPTION FIX. FIXED - background-position: center top → center 60%. Brings the signpost into frame above the caption bar. Sky/horizon zone was showing. FIXED - .trilogy-contact .trilogy-caption: rgba(0,0,0,0.72) → rgba(0,0,0,0.88). Contact image is light (pale sky). At panel opacity:0.55 rest state, 0.72 overlay was washing to near-transparent. 0.88 holds the bar dark. v3.23.0 (2026-03-09): TRILOGY CONTACT AS PLAIN LINK PANEL. REBUILT - .trilogy-contact: button and all button CSS removed. Now a plain link panel identical in structure and behaviour to .trilogy-chapter panels. opacity:0.55 at rest, 1.0 on hover, transition:0.2s. .trilogy-caption inside at bottom with rgba(0,0,0,0.72) overlay. "Talk to us" renders as .trilogy-label — same white text as chapter labels. contact-hero.webp background. Amber left border retained. v3.22.0 (2026-03-09): TRILOGY CONTACT CORRECT IMAGE. FIXED - .trilogy-contact background-image: was living-tower-hero.webp (same as Ch3 panel immediately to its left — two identical images). Corrected to contact-hero.webp (/assets/images/contact/contact-hero.webp). v3.21.0 (2026-03-09): TRILOGY CONTACT PANEL WIDTH FIX. FIXED - .trilogy-contact: flex:0 0 auto + min-width:12rem was insufficient — three flex:1 chapter panels consumed all available width, squeezing contact to a sliver. Changed to flex:1 so contact gets an equal share of strip width, matching the three photo panels. min-width removed. background-position: center 0% → center top (equivalent, more explicit). v3.20.0 (2026-03-09): TRILOGY CONTACT PANEL REDESIGN + DOORS REMOVED. REMOVED - .trilogy-doors: display:none. Text links were visually incoherent as a non-photo block inside the photo strip. HTML retained per §12. REBUILT - .trilogy-contact: now a true fourth panel. Hero image (living-tower-hero.webp) cropped to top/flag zone (background-position:center 0%). rgba(0,0,0,0.38) overlay for legibility. Amber left border: 4px solid var(--page-accent) signals terminus (§13). min-height:200px, flex:0 0 auto — equal weight as the three photo panels. sdx-btn-secondary overridden: button sits in caption zone at bottom (position:absolute, bottom:0, full width) using PIL-07 §5.1 gradient (amber→stone 145deg), #ffffff text, 1rem/700 per large-text WCAG rule. Hover: opacity:0.88, no colour change. FIXED - Mobile: .trilogy-doors removed from mobile rules (hidden). .trilogy-contact min-height:120px on column stack — same as panels. v3.19.0 (2026-03-09): TRILOGY STRIP VISUAL FIX. FIXED - .sdx-trilogy-strip: align-items:stretch added — all children now fill to equal height. Without this, doors and contact collapsed to content height, floating disconnected from the photo panels. FIXED - .trilogy-doors: unified to var(--page-dark-base) (was var(--page-dark-surface) — one token lighter, read as a separate object). flex:0 0 auto prevents shrink. left border: 1px solid rgba(255,255,255,0.08) signals zone entry without heavy visual weight. Padding increased to 1.5rem 1.75rem. Link opacity reduced to 0.60 — quieter against dark, amber hover preserved. FIXED - .trilogy-contact: flex:0 0 auto. sdx-btn-secondary overridden to amber fill — ghost outline was illegible on #0c0a07 near-black surface. color:#ffffff, font-size:1rem, font-weight:700 per DOC-03 §5.2 large text rule. Hover: page-depth fill. FIXED - Mobile: trilogy-doors border-left→border-top on column stack. trilogy-contact border-left→border-top (4px amber) on column stack. Both get min-height so they don't collapse to line-height. align-items:stretch on strip preserved. v3.18.0 (2026-03-09): COMPLIANCE FIXES — BREADCRUMB + TRILOGY STRIP. ADDED - §3b: .sdx-spine-breadcrumb CSS block per www-F §6.4, scoped under .page-living-tower. Pattern mirrors about.css v8.4.0 NV3 exactly. display:flex, min-height:2.5rem, padding:0.625rem 1.5rem, background:var(--bg), border-bottom:1px solid var(--border). Active item: font-weight:700, color:var(--fg), cursor:default, pointer-events:none. Separator via ::after content:'/'. Mobile: gap:1rem at max-width:600px. All sizing in rem. ADDED - §8: .sdx-trilogy-strip CSS block per www-E §12/§13. Ch3 active. Three equal panels, full-bleed, flex. Active: opacity:1, amber border-bottom:4px, cursor:default, pointer-events:none. Inactive: opacity:0.55 at rest, 1.0 on hover. Transition 200ms. .trilogy-thumb per §14 normative image paths. .trilogy-doors visible on Living Tower (not hidden). .trilogy-contact: dark surface, amber accent, sdx-btn-secondary link. Mobile stacking at max-width:768px per §11/S13. ADDED - .container padding-top:0 — breadcrumb sits immediately above content. About.css v8.5.0 pattern. REMOVED - .sdx-cta-band overrides — band removed from HTML (www-E §11). v3.17.0 (2026-03-06): [previous changelog continues unchanged] BACK-TO-TABS + PROBLEM-RESOLUTION MOBILE FIXES. FIXED - .lt-back-to-tabs: .is-visible class replaces hidden attribute. FIXED - Mobile: .problem-resolution hidden by default, shown via adjacent sibling selector details.problem-more[open] + .problem-resolution. Desktop subgrid track 4 alignment fully preserved. v3.11.0 (2026-03-06): BACK-TO-TABS BUTTON. ADDED - .lt-back-to-tabs: mobile-only sticky pill. display:none at desktop. @media (max-width: 680px): position:sticky, bottom 1.25rem, var(--page-primary) fill, white text, 2rem border-radius. Opacity/transform transition for smooth appear. JS toggles hidden attribute to trigger transition. v3.10.0 (2026-03-06): TOWER PANEL PROGRESSIVE DISCLOSURE. ADDED - details.panel-more: collapse pattern applied to all 8 tower panels. pillar-body (hook sentence) always visible. pillar-facts list and CTA button hidden behind native
disclosure. summary trigger in var(--page-primary), +/− markers, border-top separator. All spacing rem — DOC-02 §15. Panels are now compact by default; user expands to read detail and follow the CTA. v3.9.0 (2026-03-06): MOBILE PADDING + §8.12 DISCLOSURE OPEN MANAGEMENT. FIXED - Section 9 @media (max-width: 640px): .container padding reduced 3rem 2rem → 1.5rem 1rem. .sdx-card-section padding reduced to 2rem 1.25rem. Eliminates wasted side estate on 390px screens. FIXED - Section 9 @media (min-width: 681px): desktop counterpart comment updated. open attribute now JS-managed (living-tower.js v1.2.0 initProblemDisclosure). HTML open attribute removed from all three details.problem-more elements. Native collapse now works on mobile. v3.8.0 (2026-03-06): DOC-03 §8.12 MOBILE CARD PROGRESSIVE DISCLOSURE. ADDED - Section 9 @media (min-width: 681px): desktop counterpart block. details.problem-more { display: block } —
renders all content by default. summary { display: none } removes chrome. display: block (NOT contents) preserves the
as a normal block in subgrid track 3. .problem-resolution is a direct article child (track 4) — never inside
. Subgrid intact. ADDED - Section 9 @media (max-width: 680px): problems-grid disclosure block. Compact grid (gap 0.75rem, card padding 0.875rem) so all three cards fit in first scroll band. problem-h and problem-lead tightened to var(--body) / 1.25 line-height. details.problem-more: border-top separator, summary trigger in var(--page-primary) (stone), +/− toggle markers, body margin-top on open. All spacing rem — zero px. DOC-02 §15 HARD RULE compliant. Font sizes via canonical tokens. BASE - Built on v3.7.0. All v3.7.0 rules preserved intact. v3.6.0 (2026-03-02): THREE ADDITIONS — CURSOR, ILLUSTRATIVE LABEL, ISO BUTTON. ADDED - cursor: default to .pillar-tab.active. Active tab no longer shows pointer cursor. Applies to "The Tower" default tab and all pillar tabs when selected. ADDED - .lt-alloc-illustrative: small italic muted disclaimer placed above allocation bars. 13px, var(--muted), italic — matches .lt-alloc-foot style. Supports HTML "Illustrative only." line. FIXED - .lt-inline-cta (ISO panel "Read the ISO alignment" button): was inheriting .sdx-btn-secondary ghost/outline style. Now overridden with the canonical ISO/About/Teams gradient per Section 8.1: linear-gradient(135deg, --sdx-color-mama-amber 0%, --sdx-color-stem-olive 100%). color: #ffffff per Section 8.3 gradient text rule (stem-olive is darker than #333). border: none overrides sdx-btn-secondary outline. Zero hex literals — both stops via named tokens. BASE - Built on v3.5.1. All v3.5.1 rules preserved intact. v3.5.1 (2026-03-02): FINAL AUDIT FIXES. FIXED - .lt-hekto-p: font-size 0.875rem → 0.9rem (14px canonical per Section 15.3). FIXED - .gate-text: font-size 0.875rem → 0.9rem (14px canonical per Section 15.3). v3.4.0 (2026-03-02): lt-* UTILITY CLASSES ADDED (Section 11). ADDED - Section 11: full lt-* utility block covering all inline style= replacements from living-tower.html v5.3.0+. lt-mb-25, lt-stream-h, lt-stream-p, lt-stream-2, lt-stream-p2, lt-hekto-emoji, lt-hekto-h, lt-hekto-p, lt-callout, lt-callout-primary, lt-ledger-grid, lt-ledger-lrj, lt-ledger-rrj, lt-ledger-kicker-lrj, lt-ledger-kicker-rrj, lt-ledger-title, lt-ledger-text, lt-ledger-rule, lt-alloc-subh, lt-alloc-subh-rrj, lt-alloc-foot, lt-inline-cta, lt-bar-works, lt-bar-pro, lt-bar-retention, lt-bar-retention-solid, lt-bar-social, lt-bar-story, lt-bar-edu, lt-bar-pro-rrj. RULE - All font sizes from Section 15.3 canonical table. All colours via var() tokens. Zero hex literals. BASE - Built on v3.3.0 uploaded 2026-03-02. All v3.3.0 rules preserved intact. v3.3.0 (2026-02-28): §8.7 SEGMENTED CONTROL COMPLIANCE. FIXED - .pillar-tab: border-radius 100px → 6px. HARD RULE §8.7: border-radius on segmented control buttons is 6px. Pill radius (100px) belongs to tag/badge elements and signals non-interactive classification. A clickable control must not look like a badge. Violation corrected. v3.2.0 (2026-02-28): TOWER LAYOUT STACKED + FONT SIZE COMPLIANCE. CHANGED - .tower-layout: grid 1fr 1fr → flex-direction:column. Image full width on top, panels below. tower-sticky position:static. tower-img-wrap max-width:100%. FIXED - .pillar-body: 0.9375rem → var(--body). FIXED - .pillar-facts li: 0.875rem → var(--small). FIXED - .pillar-role: 0.75rem → var(--label). FIXED - .pillar-icon: 1.375rem → var(--h4). FIXED - .pillar-tab: 0.75rem → var(--label). FIXED - .tower-hint: 0.8rem → var(--small). REMOVED - @media 960px tower-layout grid override (no longer needed). REBUILT - .problems-grid: grid-template-rows: auto auto 1fr auto defines 4 shared row tracks across all 3 columns. article uses display:grid + grid-template-rows:subgrid so its 4 children (header, lead, body, resolution) snap to shared tracks. All zones align perfectly at any viewport, any copy length. No min-height. No flex hacks. Structurally correct. SCRAPPED - All perspective/lower/wrapper/min-height approaches removed. REBUILT - Lead sentence is display:block span inside .problem-body paragraph. Tinted block sits above body copy, flows naturally into it. problem-body flex:1 grows to fill card. Grid equalises heights. Resolution pinned at card bottom on all three — no hacks. HTML - living-tower.html v4.8.0: problem-lower removed, perspective merged into problem-body as .problem-lead span. FIXED - .problem-body: flex: 1 added inside .problem-lower flex column. Body copy now grows to fill remaining space — resolution border-top starts at the same point across all three cards. Both flex grow points now set: perspective (equalises tinted blocks) and problem-body (equalises resolution position). FIXED - .problem-perspective: flex: 1 added. Block grows to fill available card height above .problem-lower. All three perspective blocks equalise to the tallest card's height — structural, no min-height. CHANGED - .problem-lower: margin-top: auto removed — no longer needed. perspective flex: 1 consumes the spare space instead. FIXED - All min-height removed from .problem-perspective and .problem-body. ADDED - .problem-lower div wraps .problem-body + .problem-resolution together. margin-top: auto on the wrapper pushes the entire lower block to the same distance from the card bottom on all three cards. CSS grid equalises card heights — auto margin consumes the rest. No hardcoded measurements. Viewport-proof. Copy-change-proof. HTML - living-tower.html v4.7.0: problem-lower wrapper added to all 3 cards. REVERTED - .problem-body min-height removed entirely. Hardcoded measurement breaks at different viewports, copy edits, and user font sizes. RESTORED - .problem-resolution margin-top: auto. CSS grid makes all cards in a row equal height automatically. margin-top: auto then consumes remaining space above the resolution block on every card — resolution tops align without any hardcoded value. Structural. Viewport-proof. Copy-change-proof. CHANGED - .problem-body: min-height: 9rem added. Equalises body copy height across all 3 cards so .problem-resolution tops align. CHANGED - .problem-resolution: margin-top: auto removed. Resolution top is now set by body min-height, not card bottom pinning. CHANGED - .problem-header: row → column (flex-direction). Icon (56px) now sits as a totem above who-label + heading. Full card width for heading — no wrapping pressure. Icon reduced 80px → 56px. §15.4 exception: px retained for fixed visual asset dimensions. CHANGED - .problem-perspective: min-height: 8.5rem added. Locks all three tinted blocks to same height so body copy top-aligns across the grid. .problem-resolution margin-top: auto already pins it to the card bottom. v3.0.0 (2026-02-28): LENS STRIP SCRAPPED. PERSPECTIVE BLOCK ADDED TO CARDS. REMOVED - All .lens-strip, .lens-inner, .lens-prompt, .lens-btns, .lens-btn, .lens-context rules deleted. The interactive selector had no logical purpose — the three cards below already are the three perspectives. ADDED - .problem-perspective: pillar-tinted inset block sits between .problem-header and .problem-body. Directly addresses the reader in their own register. Pillar tints: teal 7%, green 7%, earth 7%. FIXED - Stray closing brace after .problem-h removed. v2.9.0 (2026-02-28): SELECTOR TRACK PATTERN — LENS STRIP REWRITE. FIXED - Lens strip: ghost/outline buttons replaced with iOS-style selector track. Three options sit inside a single rounded track bed (stone 10% tint). Active option = raised white card tile inside the track, lifted with box-shadow. Inactive = plain muted text, no borders. Pillar colour appears only on active tile border-left. This is the universally understood single-select pattern. Prior ghost outline approach looked like three unrelated tags. RULE - Selector track is the canonical segmented control implementation for Buktika. Ratify into Colour Map §8.7 next version. v2.8.0 (2026-02-28): HERO BUTTON, SEGMENTED CONTROL, PROBLEM CARD HEADERS. FIXED - Section 3: .btn-hero-primary gradient override added (amber→stone 145deg). global.css fallback = flat stone #78716c. Not inviting. Spec §8.1. FIXED - Lens strip: full segmented-control rewrite. Ghost state: transparent bg, 1.5px pillar-colour border, pillar-colour text. Hover: 8% pillar tint wash. Active: solid pillar fill, white text, soft shadow. Emoji removed from button labels — colour communicates identity. §8.2: glass not permitted. §8.6: badge rules do not apply to interactive controls. Pattern noted for ratification into Colour Map §8 next version. FIXED - Problem card headers: 24px inline icons upgraded to 80px pillar icons in .problem-header flex row (icon + who-label + heading). About.css pattern. .problem-h: 1.125rem → 1.375rem matching about.css .pillar-header h3. Duplicate old .problem-h rule removed. v2.7.0 (2026-02-28): PROBLEMS SECTION + LENS STRIP + HEADING COMPLIANCE. FIXED - Section 2: .container padding: 3rem 2rem added. Creates gap between hero border-bottom and first sdx-card-section. About.css pattern. FIXED - Section 4: .sdx-card-section h2 rule written (was a NOTE only). clamp(1.75rem,3vw,2rem) / 2.5rem@768px. border-bottom: 2px solid var(--page-accent) (amber). Dark mode: rgba(245,176,20,0.30). FIXED - Section 4: .section-intro canonical rule added (1.125rem, centred, max-width 800px). About.css pattern. FIXED - Section 6: problem cards — per-pillar border-left via nth-child: Viridian=teal-deep, Farmer=green-deep, Mama=mama-violet. FIXED - Section 6: .problems-grid article flex column + .problem-resolution margin-top: auto — bottom-aligns resolution block across all 3 cards. FIXED - Section 6: lens-btn — pillar-coloured active/hover states replace flat amber. Viridian=teal, Farmer=green, Mama=earth. Glass forbidden per §8.2 (glass exclusively .btn-hero-secondary). Solid fill used. font-size: var(--body). lens-prompt: var(--body). FIXED - lens-context: font-size var(--body) (carried from v2.6.0 audit). FIXED - Section 10: dark mode h2 border-bottom override added. NOTE - HTML: problem card logos (emoji → SVG img) and per-pillar card class additions are HTML-side fixes — see living-tower.html v4.4.0. v2.4.0 (2026-02-28): HERO INTRO + LENS STRIP FIXES. FIXED - Section 3: .hero .intro colour override added. global.css sets near-black rgba(32,34,32,0.92) — unreadable over photography. Override: #ffffff + heavy text-shadow. Pattern: about.css v6.7.0. Confirmed exception per Section 4.6 / v3.3.0. FIXED - Section 8: .lens-strip refactored from rogue amber tint band (Section 4.4 violation — retired alternating tint pattern) to inset module inside .sdx-card-section. Double amber borders removed. Stone 5% inset surface + single var(--border) top. No standalone section. v2.3.0 (2026-02-28): SPEC COMPLIANCE — Colour Map v3.7.0. FIXED - Section 1: added --page-secondary: var(--sdx-color-moss). v3.7.0 Section 5.7 now defines --page-secondary for Living Tower. Moss #4a5a4f — Eco Guild register, supporting tints. FIXED - Colour Map reference updated to v3.7.0. v2.2.0 (2026-02-28): SPEC COMPLIANCE — eyebrow rule added to Section 4. FIXED - Section 1: removed --page-secondary (duplicate of --page-accent). Section 5.7 does not define --page-secondary for Living Tower. All var(--page-secondary) references updated to var(--page-accent). FIXED - Section 7: added missing .btn-pillar-viridians, .btn-pillar-iso, .btn-pillar-guild with canonical Section 8.1 gradients. FIXED - Section 10: dark mode .card override changed from var(--page-dark-surface) to var(--card). themes.css v2.5.0 locks --card site-wide to #362c22. Per-page variation is retired. ADDED - Section 4: .eyebrow rule. Replaces 5x inline style= blocks in HTML. Color: var(--page-primary). Section 13.5 check 6 compliance. NOTE - Section 4: owner to add .sdx-card-section h2 amber border-bottom. NOTE - .tower-img-wrap background: #f8f6f0 — confirmed exception per Section 5.9 precedent (ISO page uses same value). v2.0.0 (2026-02-28): Full rewrite for new "How the system works" concept. ====================================================================================================== */ /* 0) depends on: global.css · themes.css · partials/header.css · partials/footer.css */ /* ====================================================================================================== 1) Page variable binding — Colour Map v3.7.0 Section 5.7 (LOCKED) ====================================================================================================== */ .page-living-tower { --page-bg: var(--sdx-color-livingtower-bg); /* #f5f3ef — warm stone dust */ --page-primary: var(--sdx-color-stone); /* #78716c — foundation */ --page-secondary: var(--sdx-color-moss); /* #4a5a4f — Eco Guild register */ --page-accent: var(--sdx-color-mama-amber); /* #f5b014 — warmth, CTAs */ --page-depth: var(--sdx-color-stem-olive); /* #464820 — grounding */ --page-dark-base: var(--sdx-color-livingtower-dark-base); /* #0c0a07 — night on the savanna */ --page-dark-surface: var(--sdx-color-livingtower-dark-surface); /* #1a1510 — soil dark surfaces */ --hero-image: url('/assets/images/living-tower/living-tower-hero.webp'); --hero-vignette-from: rgba(120, 113, 108, 0.20); /* stone-dark, bottom only, max 0.25 */ --hero-vignette-to: rgba(120, 113, 108, 0); } /* ====================================================================================================== 2) Base page surfaces ====================================================================================================== */ .page-living-tower { background: var(--page-bg); color: var(--fg); } /* Hero → first section gap. About.css pattern: padding: 3rem 2rem on .container. Provides breathing room between hero-wrap border-bottom and first sdx-card-section. padding-top:0 — breadcrumb sits immediately above content. About.css v8.5.0 pattern. */ .page-living-tower .container { max-width: 1200px; margin: 0 auto; padding: 3rem 2rem; padding-top: 0; } /* ====================================================================================================== 3b) Spine Breadcrumb Strip BKT-DOC-www-F §6.4. Migrated to global.css v3.15.0. Page CSS owns nothing. ====================================================================================================== */ /* ====================================================================================================== 3) Hero — 800px min-height (owner-specified; px retained per Section 15 hero exception) No overlay. Bottom vignette only. Stone-dark register. Opacity 0.20 (max 0.25). ====================================================================================================== */ .page-living-tower .hero-wrap { background-image: var(--hero-image); background-size: cover; background-position: center 35%; min-height: var(--hero-min); } .page-living-tower .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% ); } .page-living-tower .headline { font-size: clamp(2.75rem, 6vw, 4.5rem); } .page-living-tower .tagline { color: var(--page-accent); } .page-living-tower .hero-actions { display: flex; gap: 1rem; justify-content: center; flex-wrap: wrap; margin-top: 2rem; } /* Hero primary button — Living Tower canonical gradient: amber → stone (Section 8.1). global.css fallback uses var(--page-primary) = flat stone #78716c — override required. Stone #78716c is a mid-dark stop — white text required per §8.3. */ .page-living-tower .btn-hero-primary { background: linear-gradient(145deg, #f5b014 0%, #78716c 100%); color: #ffffff; } /* ====================================================================================================== 4) Typography overrides ====================================================================================================== */ /* Section h2 — amber underline per about.css pattern. --page-primary (stone) used for border per Section 5.7 specification. Dark mode: reduced opacity amber per about.css §10 pattern. */ .page-living-tower .sdx-card-section h2 { font-family: var(--headline-font); font-size: clamp(1.75rem, 3vw, 2rem); font-weight: 700; color: var(--fg); margin: 0 0 1.5rem; padding-bottom: 0.75rem; border-bottom: 2px solid var(--page-accent); text-align: center; } @media (min-width: 768px) { .page-living-tower .sdx-card-section h2 { font-size: 2.5rem; } } .page-living-tower .sdx-card-section .section-intro { font-size: 1.125rem; line-height: 1.7; color: var(--muted); max-width: 800px; margin: 0 auto 2rem; text-align: center; } /* Section eyebrow label — uppercase descriptor above section h2. Replaces inline style= on all 5 eyebrow spans. Section 13.5 check 6. */ .page-living-tower .eyebrow { display: block; font-size: 1.1rem; font-weight: 600; letter-spacing: 0.15em; text-transform: uppercase; color: var(--page-primary); margin-bottom: 2.0rem; } /* ====================================================================================================== 5) Sections and alternation Design System v4.0.0 — .sdx-card-section is the ONLY approved pattern (Section 4.4). ====================================================================================================== */ /* none — .sdx-card-section in global.css owns all section surfaces */ /* ====================================================================================================== 6) Cards and tiles ====================================================================================================== */ /* ── Pillar card border-left colours — canonical pillar tokens ── */ .page-living-tower .pillar-card-farmers { border-left-color: var(--sdx-color-green-deep); } .page-living-tower .pillar-card-mamadex { border-left-color: var(--sdx-color-mama-violet); } .page-living-tower .pillar-card-reporters { border-left-color: var(--tlt-reporters); } .page-living-tower .pillar-card-edutower { border-left-color: var(--sdx-color-teal-deep); } .page-living-tower .pillar-card-iso { border-left-color: var(--sdx-color-stone); } .page-living-tower .pillar-card-guild { border-left-color: var(--tlt-guild); } /* ── Pillar card structure ── */ .page-living-tower .pillar-header { display: flex; align-items: center; gap: 1rem; margin-bottom: 1rem; } .page-living-tower .pillar-icon { width: 90px; height: 90px; flex-shrink: 0; border-radius: 0.5rem; background: radial-gradient( circle at center, rgba(255, 255, 255, 0.92) 0%, /* dominant bright white center */ rgba(255, 255, 255, 0.60) 45%, /* soft white fade */ rgba(164, 146, 133, 0.18) 75%, /* gentle warm-stone transition at edges */ rgba(164, 146, 133, 0.08) 100% /* very light outer tint */ ); display: flex; align-items: center; justify-content: center; font-size: var(--h4); padding: 8px; object-fit: contain; box-shadow: inset 0 0 20px rgba(255, 255, 255, 0.75), /* central white glow */ inset 0 1px 4px rgba(0, 0, 0, 0.06); /* subtle natural depth */ transition: box-shadow 0.25s ease, transform 0.18s ease; } /* Optional: subtle hover lift to make it feel alive */ .page-living-tower .pillar-icon:hover, .page-living-tower .pillar-icon:focus { box-shadow: inset 0 0 28px rgba(255, 255, 255, 0.90), inset 0 1px 6px rgba(0, 0, 0, 0.08); transform: scale(1.04); } .page-living-tower .pillar-role { font-size: var(--label); /* §15: label/eyebrow size — 0.75rem canonical */ font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; color: var(--page-accent); margin-bottom: 0.82rem; display: block; } .page-living-tower .pillar-name { font-family: var(--headline-font); font-size: var(--h3); font-weight: 700; color: var(--fg); margin: 0; line-height: 1.1; } .page-living-tower .pillar-body { font-size: var(--body); line-height: 1.75; color: var(--muted); margin-bottom: 1.25rem; } .page-living-tower .pillar-facts { list-style: none; padding: 0; margin: 0 0 1.25rem; display: flex; flex-direction: column; gap: 0.75rem; } .page-living-tower .pillar-facts li { font-size: var(--body); line-height: 1.65; color: var(--muted); padding-left: 1.25rem; position: relative; } .page-living-tower .pillar-facts li::before { content: '—'; position: absolute; left: 0; color: var(--page-accent); font-weight: 700; } /* ── Tower diagram layout ── */ .page-living-tower .tower-layout { display: flex; flex-direction: column; gap: 2rem; margin-top: 2.5rem; } .page-living-tower .tower-sticky { position: static; width: 100%; } .page-living-tower .tower-img-wrap { position: relative; display: block; width: 100%; max-width: 100%; margin: 0 auto; border-radius: var(--radius); overflow: hidden; box-shadow: var(--card-shadow); background: #f8f6f0; /* EXCEPTION: no token maps to this value — ISO page precedent */ } .page-living-tower .tower-img { width: 100%; height: auto; display: block; } /* RETIRED: .tower-hint replaced by tippy glyph on .tower-hint-glyph */ .page-living-tower .pillar-tabs-row { display: flex; align-items: center; gap: 0.5rem; margin-top: 1rem; justify-content: center; } .page-living-tower .tower-hint-glyph { background: none; border: none; padding: 0; appearance: none; font-size: 1rem; color: var(--muted); cursor: pointer; line-height: 1; flex-shrink: 0; transition: color 0.18s ease; } .page-living-tower .tower-hint-glyph:hover { color: var(--fg); } .page-living-tower .pillar-tabs { display: flex; flex-wrap: wrap; gap: 0.375rem; margin-top: 1rem; justify-content: center; } .page-living-tower .tower-architecture { text-align: center; max-width: 45rem; margin: 0.5rem auto 0; padding: 0; border-top: none; font-size: var(--body); line-height: 1.65; letter-spacing: 0.04em; color: var(--muted); font-style: italic; } .page-living-tower .pillar-tab { background: var(--card); border: 1px solid var(--border); border-radius: 6px; /* FIXED v3.3.0: was 100px — §8.7 HARD RULE: segmented control buttons MUST use 6px, not pill radius */ padding: 0.3rem 0.75rem; font-family: var(--text-font); font-size: var(--label); font-weight: 600; color: var(--muted); cursor: pointer; transition: all 0.18s; -webkit-appearance: none; appearance: none; } .page-living-tower .pillar-tab:hover { border-color: var(--page-accent); color: var(--fg); } .page-living-tower .pillar-tab.active { background: var(--page-accent); border-color: var(--page-accent); color: var(--sdx-color-slate-dark); /* EXCEPTION: amber bg is light — dark text permitted per Section 4.6 */ cursor: default; } .page-living-tower .tower-panels { width: 100%; } .page-living-tower .tower-panel { display: none; } .page-living-tower .tower-panel.active { display: block; animation: ltIn 0.28s ease forwards; } @keyframes ltIn { from { opacity: 0; transform: translateY(0.5rem); } to { opacity: 1; transform: translateY(0); } } /* ── Panel progressive disclosure — DOC-03 §8.12 pattern applied to tower panels pillar-body (hook sentence) always visible. pillar-facts + CTA collapse by default. summary trigger uses var(--page-primary) per §8.12 HARD RULE. All spacing rem — DOC-02 §15. */ .page-living-tower details.panel-more { margin-top: 0.75rem; border-top: 1px solid rgba(0, 0, 0, 0.08); padding-top: 0.75rem; } .page-living-tower details.panel-more > summary { cursor: pointer; font-weight: 700; font-size: var(--body); color: var(--page-primary); list-style: none; padding: 0.25rem 0; } .page-living-tower details.panel-more > summary::-webkit-details-marker { display: none; } .page-living-tower details.panel-more > summary::after { content: " +"; font-weight: 800; } .page-living-tower details.panel-more[open] > summary::after { content: " −"; } /* ── Problem cards — SUBGRID ALIGNMENT ───────────────────────────────────── The grid defines 3 columns × 4 named row tracks. Each article uses display:contents — its 4 children become direct grid children and snap to the shared row tracks automatically. Result: header, lead, body, and resolution all align across all 3 cards at any viewport width, any copy length, any font size. No min-height. No flex hacks. No wrappers. */ .page-living-tower .problems-grid { display: grid; grid-template-columns: repeat(3, 1fr); grid-template-rows: auto auto 1fr auto; gap: 0 1.5rem; margin-top: 2.5rem; align-items: stretch; } /* display: contents removes the article box — children become grid items directly. The card visual (background, border, shadow, padding) moves to a ::before pseudo or we use a wrapper. Simpler: keep article as a grid item but use subgrid for its rows. */ /* Reset: articles span all 4 row tracks and use subgrid internally */ .page-living-tower .problems-grid article { display: grid; grid-row: span 4; grid-template-rows: subgrid; background: var(--card); border-radius: 0.75rem; border-left: 4px solid var(--border); box-shadow: 0 4px 16px rgba(15, 23, 42, 0.06), 0 1px 2px rgba(15, 23, 42, 0.04); padding: 1.75rem; gap: 0; } .page-living-tower .pillar-card-viridians { border-left-color: var(--sdx-color-teal-deep); } .page-living-tower .pillar-card-farmers { border-left-color: var(--sdx-color-green-deep); } .page-living-tower .pillar-card-mamadex { border-left-color: var(--sdx-color-mama-violet); } /* Row 1 — header */ .page-living-tower .problem-header { display: flex; flex-direction: column; align-items: flex-start; gap: 0.75rem; padding-bottom: 1.25rem; } .page-living-tower .problem-icon { width: 90px; height: 90px; flex-shrink: 0; object-fit: contain; } .page-living-tower .problem-who { font-size: 0.75rem; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; margin-bottom: 1.25rem; } .page-living-tower .problem-h { font-family: var(--headline-font); font-size: 1.375rem; font-weight: 700; color: var(--fg); margin: 0; line-height: 1.25; } .page-living-tower .who-v { color: var(--sdx-color-teal-deep); } .page-living-tower .who-f { color: var(--sdx-color-green-deep); } .page-living-tower .who-m { color: var(--sdx-color-mama-depth); } /* Row 2 — lead block */ .page-living-tower .problem-lead { font-size: var(--body); line-height: 1.65; color: var(--fg); border-radius: 0.375rem; padding: 0.75rem 1rem; margin-bottom: 1rem; background: rgba(120, 113, 108, 0.06); } .page-living-tower .pillar-card-viridians .problem-lead { background: rgba(47, 92, 104, 0.07); } .page-living-tower .pillar-card-farmers .problem-lead { background: rgba(46, 93, 58, 0.07); } .page-living-tower .pillar-card-mamadex .problem-lead { background: rgba(139, 92, 246, 0.07); } /* Row 3 — body copy. align-self:stretch fills the 1fr track */ .page-living-tower .problem-body { font-size: var(--body); line-height: 1.75; color: var(--muted); padding-bottom: 1.25rem; align-self: stretch; } /* Row 4 — resolution */ .page-living-tower .problem-resolution { font-size: var(--body); line-height: 1.65; font-weight: 600; color: var(--fg); padding-top: 1rem; border-top: 1px solid var(--border); display: flex; gap: 0.5rem; align-items: flex-start; } .page-living-tower .problem-resolution::before { content: '✓'; color: var(--page-accent); flex-shrink: 0; } /* ── Flow steps ── */ .page-living-tower .flow-steps { position: relative; padding-left: 3rem; margin-top: 3rem; } .page-living-tower .flow-line { position: absolute; left: 0.9375rem; top: 1.875rem; bottom: 0; width: 2px; background: linear-gradient(to bottom, var(--page-accent), var(--page-depth)); opacity: 0.22; } .page-living-tower .flow-step { display: flex; gap: 1.25rem; padding-bottom: 2.5rem; position: relative; opacity: 0; transform: translateX(-0.875rem); transition: opacity 0.42s ease, transform 0.42s ease; } .page-living-tower .flow-step.visible { opacity: 1; transform: translateX(0); } .page-living-tower .flow-step:nth-child(2) { transition-delay: 0.06s; } .page-living-tower .flow-step:nth-child(3) { transition-delay: 0.12s; } .page-living-tower .flow-step:nth-child(4) { transition-delay: 0.18s; } .page-living-tower .flow-step:nth-child(5) { transition-delay: 0.24s; } .page-living-tower .flow-step:nth-child(6) { transition-delay: 0.30s; } .page-living-tower .flow-node{ width: 2rem; height: 2rem; flex-shrink: 0; border-radius: 50%; background: var(--page-accent); color: var(--sdx-color-slate-dark); /* permitted: dark text on amber fill */ display: flex; align-items: center; justify-content: center; font-size: 0.8125rem; font-weight: 800; font-family: var(--text-font); margin-left: -3rem; position: relative; z-index: 1; box-shadow: 0 0 0 4px var(--page-bg); } .page-living-tower .flow-title { font-family: var(--headline-font); font-size: var(--h4); font-weight: 700; color: var(--fg); margin-bottom: 0.375rem; } .page-living-tower .flow-text { font-size: var(--body); line-height: 1.72; color: var(--muted); margin-bottom: 0.625rem; } .page-living-tower .flow-proof { display: inline-block; font-family: var(--text-font); font-size: var(--body); line-height: 1.5; font-weight: 600; letter-spacing: 0.03em; background: rgba(245, 176, 20, 0.10); color: var(--page-depth); border: 1px solid rgba(245, 176, 20, 0.28); border-radius: 100px; padding: 0.2rem 0.75rem; } [data-theme="dark"] .page-living-tower .flow-proof { color: var(--page-accent); } /* ── Gates ── */ .page-living-tower .gates-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1rem; margin-top: 3rem; } .page-living-tower .gate-card { opacity: 0; transform: translateY(1.25rem); transition: opacity 0.4s ease, transform 0.4s ease; } .page-living-tower .gate-card.visible { opacity: 1; transform: translateY(0); display: flex; flex-direction: column; /* stack children vertically */ min-height: 200px; /* ← adjust this value or use height: 100% if parent has fixed height */ } .page-living-tower .gate-card:nth-child(2) { transition-delay: 0.07s; } .page-living-tower .gate-card:nth-child(3) { transition-delay: 0.14s; } .page-living-tower .gate-card:nth-child(4) { transition-delay: 0.21s; } .page-living-tower .gate-card:nth-child(5) { transition-delay: 0.28s; } .page-living-tower .gate-card:nth-child(6) { transition-delay: 0.35s; } .page-living-tower .gate-num{ font-family: var(--headline-font); font-size: clamp(2.25rem, 2.1vw, 2.75rem); font-weight: 800; color: var(--sdx-color-green-deep); opacity: 0.40; /* watermark but readable */ line-height: 1; margin-bottom: 0.625rem; } [data-theme="dark"] .page-living-tower .gate-num{ opacity: 0.26; /* keeps it from flaring on dark */ } .page-living-tower .gate-title { font-family: var(--headline-font); font-size: var(--h4); font-weight: 700; color: var(--fg); margin-bottom: 0.95rem; } .page-living-tower .gate-text { font-size: var(--body); line-height: 1.72; color: var(--muted); margin-bottom: 0.875rem; } .page-living-tower .gate-proof { font-size: var(--body); line-height: 1.5; font-weight: 600; color: var(--sdx-color-green-deep); background-color: var(--sdx-color-livingtower-light-text); padding: 20px; border-radius: 0.375rem; margin-top: auto; /* ← this magic line pushes it to the bottom */ } [data-theme="dark"] .page-living-tower .gate-proof { color: var(--sdx-color-leaf-green); background-color: var(--sdx-color-teal-deep); padding: 20px; margin-top: auto; /* ← this magic line pushes it to the bottom */ } /* ── Allocation bars ── */ .page-living-tower .alloc-grid { display: grid; grid-template-columns: 1fr 1.4fr; gap: 4rem; align-items: start; margin-top: 3rem; } .page-living-tower .alloc-text h3 { font-family: var(--headline-font); font-size: var(--h3); font-weight: 700; color: var(--fg); margin-bottom: 0.5rem; } .page-living-tower .alloc-text p { font-size: var(--body); line-height: 1.75; color: var(--muted); margin-bottom: 1.75rem; } .page-living-tower .alloc-row { display: flex; flex-direction: column; gap: 0.375rem; margin-bottom: 1.25rem; } .page-living-tower .alloc-meta { display: flex; justify-content: space-between; align-items: baseline; } .page-living-tower .alloc-label { font-size: var(--body); font-weight: 600; color: var(--fg); } .page-living-tower .alloc-pct { font-size: 0.8rem; font-weight: 700; color: var(--page-primary); } .page-living-tower .alloc-track { height: 8px; background: var(--border); border-radius: 100px; overflow: hidden; } .page-living-tower .alloc-bar { height: 100%; border-radius: 100px; width: 0; transition: width 1.1s cubic-bezier(0.22, 1, 0.36, 1); } .page-living-tower .alloc-note { font-size: var(--body); line-height: 1.5; color: var(--muted); } /* ====================================================================================================== 7) Buttons and CTAs Living Tower primary: amber→stone per Section 8.1 canonical table. Gradient contains stone #78716c as dark stop — white text required. Pillar reference buttons carry their pillar's canonical gradient per Section 8.1. RULE: All pillar gradients contain a dark stop — color: #ffffff always required. ====================================================================================================== */ .page-living-tower .sdx-btn-primary { background: linear-gradient(145deg, #f5b014 0%, #78716c 100%); color: #ffffff; box-shadow: 0 4px 14px rgba(120, 113, 108, 0.28); } /* Pillar navigation buttons — shared base */ .page-living-tower .btn-pillar { display: inline-flex; align-items: center; justify-content: center; padding: 0.625rem 1.25rem; font-family: var(--text-font); font-size: 0.875rem; font-weight: 600; border-radius: var(--radius); border: none; cursor: pointer; text-decoration: none; color: #ffffff; /* all pillar gradients contain dark stop — white always required */ transition: filter 0.22s ease; } /* Inside card: no lift per Section 8.3 */ .page-living-tower .card .btn-pillar:hover { transform: none; filter: brightness(1.1); box-shadow: 0 6px 20px rgba(0, 0, 0, 0.22); } /* Per-pillar gradients — Section 8.1 canonical table */ .page-living-tower .btn-pillar-farmers { background: linear-gradient(145deg, #2e5d3a 0%, #464820 100%); } .page-living-tower .btn-pillar-mamadex { background: linear-gradient(135deg, var(--sdx-color-mama-violet) 0%, var(--sdx-color-mama-depth) 100%); } .page-living-tower .btn-pillar-reporters { background: linear-gradient(145deg, #f5b014 0%, #d94328 100%); /* dark stop — white text */ } .page-living-tower .btn-pillar-edutower { background: linear-gradient(145deg, #2f5c68 0%, #464820 100%); } .page-living-tower .btn-pillar-viridians { background: linear-gradient(145deg, #4b2a56 0%, #2f5c68 100%); } .page-living-tower .btn-pillar-iso { background: linear-gradient(135deg, #f5b014 0%, #464820 100%); } .page-living-tower .btn-pillar-guild { background: linear-gradient(135deg, #f5b014 0%, #464820 100%); } /* ── Back-to-tabs button — mobile only ── Sticky pill anchored to bottom of tower section on mobile. Hidden by default. JS shows it when a non-default panel is active on mobile. display:none at desktop — JS never shows it above 680px. var(--page-primary) fill, white text, soft shadow. */ /* ── Tower pill — inside each panel-more
. Lives as last child of
. Visible when details[open], hidden when collapsed — native browser behaviour. No JS needed. Desktop: never shown. Mobile: in-flow at bottom of expanded section. */ .page-living-tower .lt-back-to-tabs { display: none; /* desktop: never shown */ } @media (max-width: 680px) { .page-living-tower details.panel-more .lt-back-to-tabs { display: flex; align-items: center; justify-content: center; width: fit-content; margin: 1.25rem auto 0; padding: 0.625rem 1.375rem; background: var(--page-primary); color: #ffffff; font-family: var(--text-font); font-size: var(--small); font-weight: 700; border: none; border-radius: 2rem; cursor: pointer; box-shadow: 0 4px 16px rgba(0, 0, 0, 0.28); } } /* ====================================================================================================== 8) Page modules — Trilogy Strip BKT-DOC-www-E v2.3.0 §13. Geometry, behaviour, typography: global.css v3.14.0. This page owns: thumbnail backgrounds, .trilogy-contact (Living Tower only). Ch3 active. .trilogy-doors not used (HTML removed 2026-03-09). ====================================================================================================== */ /* Thumbnail backgrounds — §14 normative image paths */ .page-living-tower .trilogy-thumb-landing { background-image: url('/assets/images/landing/index-hero.webp'); } .page-living-tower .trilogy-thumb-about { background-image: url('/assets/images/about/about-hero.webp'); } .page-living-tower .trilogy-thumb-living-tower { background-image: url('/assets/images/living-tower/living-tower-hero.webp'); } /* .trilogy-contact — Living Tower only. Fourth panel. Same structure as .trilogy-chapter. Inherits .trilogy-chapter geometry from global.css via shared class on the element. Page-specific: background-image, stronger caption overlay. Amber divider sits on Ch3's border-right — not here — so this panel's content box is full-width. */ .page-living-tower .trilogy-contact { flex: 1; position: relative; display: block; min-height: 200px; overflow: hidden; text-decoration: none; opacity: 1; transition: filter 0.2s ease; border-bottom: 4px solid transparent; } /* Amber divider between Ch3 and contact panel — inset box-shadow on the left edge. Draws inside the panel's painted area without affecting the content box width. */ .page-living-tower .trilogy-contact { box-shadow: inset 4px 0 0 var(--sdx-color-mama-amber); } .page-living-tower .trilogy-contact:focus-visible { filter: brightness(1.08); } .page-living-tower .trilogy-thumb-contact { background-image: url('/assets/images/contact/contact-hero.webp'); background-position: center 36%; } /* Stronger overlay for light sky image */ .page-living-tower .trilogy-contact .trilogy-caption { background: rgba(0, 0, 0, 0.88); } /* ====================================================================================================== 9) Media queries ====================================================================================================== */ @media (max-width: 900px) { .page-living-tower .problems-grid { grid-template-columns: 1fr; } .page-living-tower .gates-grid { grid-template-columns: 1fr 1fr; } .page-living-tower .alloc-grid { grid-template-columns: 1fr; gap: 2.5rem; } } @media (max-width: 640px) { .page-living-tower .hero-wrap { min-height: 560px; background-position: center 40%; } .page-living-tower .gates-grid { grid-template-columns: 1fr; } /* Reduce side padding on mobile — 2rem (32px) is excessive on a 390px screen */ .page-living-tower .container { padding: 1.5rem 1rem; } .page-living-tower .sdx-card-section { padding: 2rem 1.25rem; } } /* Trilogy Strip mobile — geometry owned by global.css v3.14.0. .trilogy-contact mobile min-height override retained (page-specific element). gap between panels provided by .sdx-trilogy-strip gap: 0.5rem (global.css). border-left suppressed — desktop-only divider, meaningless in column stack. */ @media (max-width: 768px) { .page-living-tower .trilogy-contact { min-height: 120px; min-width: unset; border-left: none; box-shadow: none; } } /* DOC-03 §8.12 DESKTOP COUNTERPART — problems-grid disclosure JS (living-tower.js) adds open attribute to all details.problem-more above 680px and removes it on resize to ≤680px. CSS here hides summary chrome at desktop. display: block preserves subgrid track 3 slot. .problem-resolution is a direct article child (track 4) — never inside
. Subgrid intact. HARD RULE: This block is mandatory whenever the mobile disclosure pattern is used. */ @media (min-width: 681px) { .page-living-tower details.problem-more { display: block; } .page-living-tower details.problem-more > summary { display: none; } } /* DOC-03 §8.12 MOBILE CARD PROGRESSIVE DISCLOSURE — problems-grid Compact grid so all three problem cards fit in first scroll band.
wraps .problem-body + .problem-resolution in HTML. HARD RULE: disclosure CSS must be mobile-scoped. MUST NOT apply unconditionally. HARD RULE: all spacing in rem — no px. DOC-02 §15. HARD RULE: summary colour = var(--page-primary). var(--page-accent) MUST NOT be used. */ @media (max-width: 680px) { .page-living-tower .problems-grid { gap: 0.75rem; } .page-living-tower .problems-grid .card { padding: 0.875rem; } .page-living-tower .problem-h { font-size: var(--body); line-height: 1.25; } .page-living-tower .problem-lead { margin-top: 0.5rem; font-size: var(--body); line-height: 1.5; } .page-living-tower details.problem-more { margin-top: 0.625rem; border-top: 1px solid rgba(0, 0, 0, 0.08); padding-top: 0.625rem; } .page-living-tower details.problem-more > summary { cursor: pointer; font-weight: 700; color: var(--page-primary); list-style: none; } .page-living-tower details.problem-more > summary::-webkit-details-marker { display: none; } .page-living-tower details.problem-more > summary::after { content: " +"; font-weight: 800; } .page-living-tower details.problem-more[open] > summary::after { content: " −"; } .page-living-tower details.problem-more[open] .problem-body { margin-top: 0.625rem; } /* problem-resolution is a direct article child (subgrid track 4 on desktop). On mobile hide it when details is closed; show it when open. Adjacent sibling selector: details[open] + .problem-resolution */ .page-living-tower .problem-resolution { display: none; } .page-living-tower details.problem-more[open] + .problem-resolution { display: flex; margin-top: 0.625rem; } } /* ====================================================================================================== 10) Dark mode [data-theme="dark"] mechanism per Section 3.2 — @media prefers-color-scheme MUST NOT appear. themes.css v2.5.0 site-wide card lock: --card resolves to #362c22 universally. Per-page dark card surface overrides are retired. var(--card) is correct and sufficient. ====================================================================================================== */ [data-theme="dark"] .page-living-tower { background: var(--page-dark-base); color: var(--fg); } [data-theme="dark"] .page-living-tower .sdx-card-section h2 { border-bottom-color: rgba(245, 176, 20, 0.30); /* amber at 30% — about.css §10 pattern */ } [data-theme="dark"] .page-living-tower .card, [data-theme="dark"] .page-living-tower .card-surface { background: var(--card); /* FIXED v2.1.0: was var(--page-dark-surface) — violated themes.css v2.5.0 card lock */ } [data-theme="dark"] .page-living-tower .flow-node { box-shadow: 0 0 0 4px var(--page-dark-base); } [data-theme="dark"] .page-living-tower .tower-img-wrap { background: #2a2018; /* EXCEPTION: photography container warm dark tint — no token equivalent */ } /* ====================================================================================================== 11) lt-* UTILITY CLASSES — v3.4.0 Covers all inline style= replacements from living-tower.html v5.3.0+. All colours via var() tokens. All font sizes from Section 15.3 canonical table. Zero hex literals. Zero inline style= attributes remain in live HTML. ====================================================================================================== */ /* ── Stream wrappers ── */ .page-living-tower .lt-mb-25 { margin: 3.5rem 0 3.5rem; } .page-living-tower .lt-stream-h{ font-family: var(--headline-font); font-size: 1.25rem; font-weight: 800; line-height: 1.25; color: var(--fg); margin: 0 0 0.8rem; padding-bottom: 0.65rem; border-bottom: 1px solid var(--border); } /* The descriptive line directly under the stream heading */ .page-living-tower .lt-stream-h + p{ margin-top: 0.65rem; color: var(--muted); font-size: 1.1rem; line-height: 1.6; } /* optional: keep a Living Tower accent without reducing contrast */ .page-living-tower .lt-stream-h .accent{ color: var(--page-primary); font-weight: 900; } .page-living-tower .lt-stream-p { font-size: 1rem; /* --body — Section 15.3 */ line-height: 1.7; color: var(--muted); margin: 0 0 1.5rem; } .page-living-tower .lt-stream-1{ margin-top: 2.5rem; padding-top: 2rem; border-top: 2px solid var(--border); } .page-living-tower .lt-stream-2 { margin-top: 3rem; padding-top: 2.5rem; border-top: 2px solid var(--border); } .page-living-tower .lt-stream-p2 { font-size: 1rem; /* --body — Section 15.3 */ line-height: 1.7; color: var(--muted); margin: 0 0 1.75rem; } /* ── HektoBag mini-cards ── */ .page-living-tower .lt-hekto-emoji { font-size: 1.5rem; margin-bottom: 0.5rem; } .page-living-tower .lt-hekto-h { font-family: var(--headline-font); font-size: 1rem; /* --body — Section 15.3 */ font-weight: 700; color: var(--fg); margin: 0 0 0.4rem; } .page-living-tower .lt-hekto-p { font-size: var(--body); line-height: 1.65; color: var(--muted); margin: 0; } /* ── Callout paragraphs ── */ .page-living-tower .lt-callout { font-size: 1rem; line-height: 1.7; color: var(--fg); background: rgba(120, 113, 108, 0.06); border-left: 3px solid var(--border); border-radius: 0.375rem; padding: 1rem 1.25rem; margin-top: 2rem; } .page-living-tower .lt-callout.lt-callout-primary { border-left-color: var(--page-primary); background: rgba(120, 113, 108, 0.06); } /* ── Two-ledger grid ── */ .page-living-tower .lt-ledger-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 1.5rem; margin-bottom: 2.5rem; } .page-living-tower .lt-ledger-lrj { background: rgba(46, 93, 58, 0.07); border-radius: 0.75rem; padding: 1.5rem; border-left: 4px solid var(--sdx-color-green-deep); } .page-living-tower .lt-ledger-rrj { background: rgba(245, 176, 20, 0.07); border-radius: 0.75rem; padding: 1.5rem; border-left: 4px solid var(--page-accent); } .page-living-tower .lt-ledger-kicker-lrj { display: block; font-size: 0.75rem; /* 12px canonical minimum — Section 15.3 */ letter-spacing: 0.12em; text-transform: uppercase; color: var(--sdx-color-green-deep); font-weight: 700; margin-bottom: 0.6rem; } .page-living-tower .lt-ledger-kicker-rrj { display: block; font-size: 0.75rem; /* 12px canonical minimum — Section 15.3 */ letter-spacing: 0.12em; text-transform: uppercase; color: var(--sdx-color-stem-olive); font-weight: 700; margin-bottom: 0.6rem; } .page-living-tower .lt-ledger-title { font-family: var(--headline-font); font-size: 1.125rem; /* canonical 18px — Section 15.3 */ font-weight: 700; color: var(--fg); margin: 0 0 0.6rem; } .page-living-tower .lt-ledger-text { font-size: var(--body); line-height: 1.65; color: var(--muted); margin: 0 0 1rem; } .page-living-tower .lt-ledger-rule { font-size: var(--body); line-height: 1.65; color: var(--muted); margin: 0; } /* ── Allocation sub-headings ── */ .page-living-tower .lt-alloc-subh { font-family: var(--headline-font); font-size: 1.1rem; /* --body — Section 15.3 */ font-weight: 700; color: var(--fg); margin: 2rem 0 1rem; padding-top: 2.5rem; border-top: 2px solid var(--border); } .page-living-tower .lt-alloc-subh-rrj { font-family: var(--headline-font); font-size: 1.1rem; /* --body — Section 15.3 */ font-weight: 700; color: var(--fg); margin: 2rem 0 1rem; padding-top: 2.5rem; border-top: 2px solid var(--border); } .page-living-tower .lt-alloc-foot { font-size: var(--body); line-height: 1.7; color: var(--muted); margin-top: 1.5rem; } .page-living-tower .lt-alloc-illustrative { font-size: var(--body); line-height: 1.7; color: var(--muted); margin-bottom: 1rem; font-style: italic; } /* ── ISO panel inline CTA — ISO/About/Teams canonical gradient (Section 8.1) ── */ .page-living-tower .lt-inline-cta { display: inline-flex; margin-top: 1.25rem; background: linear-gradient(135deg, var(--sdx-color-mama-amber) 0%, var(--sdx-color-stem-olive) 100%); color: #ffffff; /* REQUIRED: stem-olive is darker than #333 — Section 8.3 gradient text rule */ box-shadow: 0 4px 14px rgba(0, 0, 0, 0.15); border: none; } .page-living-tower .lt-inline-cta:hover { background: linear-gradient(135deg, var(--sdx-color-mama-amber) 0%, var(--sdx-color-stem-olive) 100%); color: #ffffff; box-shadow: 0 6px 20px rgba(0, 0, 0, 0.22); } /* ── Allocation bar backgrounds — token-based, zero hex literals ── */ .page-living-tower .lt-bar-works { background: linear-gradient(to right, var(--sdx-color-green-deep), var(--sdx-color-green-soft)); } .page-living-tower .lt-bar-pro { background: linear-gradient(to right, var(--sdx-color-teal-deep), var(--sdx-color-stone)); } .page-living-tower .lt-bar-retention { background: linear-gradient(to right, var(--sdx-color-stone), var(--sdx-color-livingtower-dark-surface)); } .page-living-tower .lt-bar-retention-solid { background: var(--sdx-color-stone); } .page-living-tower .lt-bar-social { background: linear-gradient(to right, var(--sdx-color-mama-violet), var(--sdx-color-mama-depth)); } .page-living-tower .lt-bar-story { background: linear-gradient(to right, var(--sdx-color-mama-amber), var(--sdx-color-mama-gold)); } .page-living-tower .lt-bar-edu { background: linear-gradient(to right, var(--sdx-color-teal-deep), var(--sdx-color-stone)); } .page-living-tower .lt-bar-pro-rrj { background: linear-gradient(to right, var(--sdx-color-stem-olive), var(--sdx-color-moss)); } /* END lt-* utility block */