/* V7-HEADER File: edutower.css Path: /assets/css/edutower/edutower.css Version: v10.6.0 Issued: 2026-07-30 Author: Buktika Webdesk (Binka) Purpose: EduTower orientation-hub stylesheet. PIL-05 v1.1.0 + DOC-01 v3.0.0 + DOC-02 v3.0.0 + DOC-03 v3.0.0 HARD RULES. page-bg:edutower-bg #f4f7f8 | page-primary:edutower-blue #56747b page-secondary:green-deep #2e5d3a | page-accent:leaf-green #9ec93c | page-depth:stem-olive #464820 ChangeLog: v10.6.0 (2026-07-30): OWNER-DIRECTED REBUILD FROM SCRATCH, Capability section only. Not a patch on v10.5.0 -- the vertical Beginning/Turning Point/Independent Practice stack (and every class name specific to it: .edutower-capability-beginning[-grid], .edutower-capability-journey, .edutower-capability-stage-heading, .edutower-capability-threshold- statement, the shared .edutower-stage-label usage on this section) is removed outright and replaced with a horizontal transformation: two substantial, visually balanced content states, .edutower-capability-warm (heading "Knowledge begins in practice", the existing garden image and Beginning prose, now stacked image-above-text rather than side-by-side since each state only gets roughly half the card's width) and .edutower-capability-cool (heading "The learner shows the work", the existing three-step numbered progression -- unchanged marker/heading/ body CSS, rule 7, only two step titles' i18n text changed -- and the existing conclusion sentence), either side of one deliberately narrow, non-heading transition (.edutower-capability-threshold, now two centred text lines only). Section header simplified to a single H2 + intro, no eyebrow. New .edutower-capability-transform CSS Grid lays the three parts out left-to-right on desktop (minmax(0,1fr) clamp(90px,8vw,140px) minmax(0,1fr), zero column gap so the colour stays continuous) and collapses to a single column at 768px, stacking warm -> threshold -> cool top-to-bottom; the threshold's gradient direction is bound to the same axis (to right on desktop, to bottom at <=768px) so it always visually connects its two literal neighbours. Colour tokens (--capability-warm/--capability-cool, light and dark) and the bleed-to- the-card's-own-edges technique (--capability-bleed-x/-bottom, overflow:hidden on .edutower-capability-section clipping to its existing 1rem radius) are unchanged in principle from v10.5.0, only re-applied to the new horizontal structure. Stale selectors referencing the deleted classes fixed at their other call sites: the 968px breakpoint's now-nonexistent .edutower-capability-beginning-grid entry removed from its grid-template-columns:1fr list (the new .edutower-capability-warm-grid is display:flex, not display:grid, so no equivalent override is needed); the dark-mode image border-colour override retargeted from .edutower-capability-beginning-grid img to .edutower-capability-warm-grid img. edutower.css relinked at ?v=10.6.0 (was ?v=10.5.0). v10.5.0 (2026-07-30): OWNER-DIRECTED CONTINUOUS COLOUR TRANSITION, Capability section only. Full rationale inline at rule 6 (the new --capability-warm/ --capability-cool/bleed custom properties) and "Turning point" (its own rule, above). Summary: the flat card background + horizontal-divider framing between Beginning/Turning Point/Independent Practice is replaced with one continuous background running the full height of the three parts -- a very light warm neutral (var(--card)) under Beginning, a subtle pale blue-green (color-mix from --sdx-color-edutower-blue) under Independent Practice, and a linear-gradient between the exact same two values under Turning Point, so the colour is continuous with zero visible seam. All three zones bleed to the outer card's true left/right edges (and Independent Practice to its bottom edge) via a negative- margin/padding pair keyed to new --capability-bleed-x/-bottom custom properties (2.5rem/3.5rem desktop, 1.25rem/2rem <=768px, matching .sdx-card-section's own existing padding at each breakpoint exactly); overflow:hidden added to .edutower-capability-section clips that bleed to the section's existing 1rem border-radius automatically, so its rounded shape needs no manual radius-matching on the inner zones. The Turning Point band's old border-top/border-bottom and margin-block are removed (no border, no gap -- the colour shift alone marks the transition); it is now min-height 140px desktop / 100px <=768px, vertically and horizontally centred (flex column, justify-content:center + text-align:center), holding only its existing stage label and statement -- unchanged copy, unchanged statement typography (still smaller than the two main headings, still larger than body text). Dark mode: --capability-cool is redefined to a colour-mix of --sdx-color-edutower-dark-surface (the page's own existing cool teal-dark token) into --card, so the same warm-to-cool transition holds in dark mode without inventing a new dark palette; the now-unused dark- mode border-colour override for .edutower-capability-threshold is removed. edutower.css relinked at ?v=10.5.0 (was ?v=10.4.0). v10.4.0 (2026-07-30): OWNER-DIRECTED HIERARCHY REPAIR (round 2), Capability section only. Full rationale inline at rules 6 and "Turning point" above. Summary: 01/02/03 numbering removed from every stage label; Turning Point demoted from a third .edutower-capability-stage-heading (H3, identical weight to Beginning/Independent Practice) to a smaller, lighter, non-heading .edutower-capability-threshold-statement (

, var(--muted), font-weight 600, ~1.25-1.5rem vs the main headings' ~1.65-2.25rem); its margin-block/padding-block tightened (3rem/1.5rem -> 2rem/1rem) so it reads as one quick transitional beat, not a section occupying as much space as the two main blocks either side of it. No other rule on the page touched. v10.3.0 (2026-07-30): OWNER-DIRECTED HUB CONTENT-HIERARCHY REPAIR. See edutower.html v8.3.0 changelog for the full brief and rationale. Doors (rule 5) loses its bespoke .edutower-doors-eyebrow (text-align:center) and > h2 (border-bottom removal) rules -- both now obsolete, since the doors heading moved into the shared .edutower-section-body wrapper along with every other section on the page (rule 4.4's comment updated to match). Capability (rule 6) loses .edutower-capability-header / .edutower-capability-subhead entirely, including their bare-

nav-collision reset -- that markup is gone. In its place: one shared .edutower-capability-stage-heading class carries identical font-family, font-weight, font-size, line-height and colour for all three stage H3s (01 Beginning, 02 Turning Point, 03 Independent Practice), reusing the existing Studio-sequence .edutower-stage-label component (rule 11, unchanged) for all three stage kickers instead of a bespoke eyebrow per stage. The Turning Point's amber accent and larger bespoke font-size (.edutower-capability-threshold .eyebrow / .edutower-capability-threshold-statement) are removed along with it -- no stage may read as typographically distinct from the other two. The inner three-step numbered progression's own threshold-stage amber treatment (.edutower-journey-step--threshold, rule 7) is unrelated and untouched -- that colours one of three numbered *steps* inside stage 03, not the top-level stage heading this pass unified. v10.2.1 (2026-07-24): HUB CONTRAST FIX -- owner instruction ("edutower.html ... requires the same") extending the EduTower Teaching/Learning journey-page contrast fix (edutower-journey.css v3.2.3/v3.2.4) to this hub page's identical pattern. .edutower-capability-threshold .eyebrow's light-mode amber override is removed: amber text against this page's #f8f5f2 card background measures ~1.7:1, failing WCAG 2.2 AA for a small functional eyebrow label (see this repo's own colour governance whitepaper, assets/documents/bkt-design-foundation-colour-tokens- governance-set/bkt-www-colour-map-whitepaper-v3.16.0.txt §8.11, which documents 2.7:1 for this exact token/background pairing and scopes it to "DECORATIVE ONLY - headings >=24px bold", not a small eyebrow). The eyebrow now falls back to the shared .eyebrow default, var(--page-primary) (4.63:1, passing) -- the same colour every other eyebrow on this page already uses. Dark mode unaffected (already 9.02:1 via the existing sitewide dark-mode eyebrow rule, line ~847 below, unchanged). NOT changed in this pass: .edutower-journey-step--threshold h4 (the threshold stage's own amber heading) -- the governance whitepaper's large-bold- heading carve-out plausibly applies there and the owner did not name it; left unchanged pending an explicit instruction either way. No HTML structure or copy on edutower.html touched; that file needs only its stylesheet query string bumped to pick this up (see that file's own changelog). v10.2.0 (2026-07-29): OWNER-DIRECTED FINAL CAPABILITY-SECTION CORRECTION. See edutower.html v8.2.0 changelog for the full context. Every selector that existed only to support the rejected rail/nested-card structure is deleted outright, confirmed unused first with rg (all of .edutower-arc-grid, .edutower-arc-rail-item, its ::after connector and the negative row-gap-compensation offset it depended on, .edutower-arc-number, .edutower-arc-card, the narrow-width overrides that hid that connector, and the now-orphaned .edutower-narrative grid rule plus the .edutower-narrative-media fragments folded out of the shared image-styling selector lists). Replaced with a flat set of rules for the new structure: .edutower-capability-header / .edutower-capability-subhead (left-aligned, exact clamp() typography per spec for the section h2 and both h3s); .edutower-capability-beginning-grid (a plain 0.48fr/0.52fr grid, align-items:start, no forced height on either column, so nothing creates a blank area under the shorter one); .edutower-capability-threshold (thin border-top/border-bottom, margin-block:3rem, padding-block:1.5rem, no fill, no radius; its .eyebrow is recoloured to the governed amber token as the section's one small accent); .edutower-journey-progression / .edutower-journey-step (renamed from .edutower-journey-sequence, same dimensional marker construction as before, now sized via the exact clamp() values specified rather than fixed rems) with a threshold-stage override for ~0.25rem more padding above and below plus a matching connector-line start offset; .edutower-capability-journey-conclusion (renamed from .edutower-journey-coda, margin-left:4rem to align with the progression text column rather than the markers, per the same convention already used by .edutower-progression-note). Every gap in the required vertical rhythm (2.75rem / 1.75rem / 3rem / 3rem / 2rem / 2rem) is a plain margin-top on the following element -- none of it depends on a fixed row-gap, a negative offset, or a fixed height; the 3rem gaps either side of the threshold rely on ordinary margin collapse (nothing else sets a competing margin on the adjacent elements). Dark-mode border-colour overrides updated to match the renamed classes; added one for .edutower-capability-threshold's own rules, unstyled before. Also fixed a collision discovered during rendering: the new markup reuses a bare header element for .edutower-capability-header and .edutower-capability-subhead, which matched the sitewide nav rule (header { position:fixed; top:0; z-index:1000; display:flex !important; ... } in partials/header.css) and pinned both to the viewport top instead of letting them sit in normal flow. Added a scoped reset (position:static, flex-direction:column to keep eyebrow-above-heading stacking since the nav rule's display:flex !important cannot be un-set, only redirected). partials/header.css itself is untouched. Also dropped an initial max-width:44rem on .edutower-capability-threshold-statement discovered during rendering to force an unwanted wrap at 1440px; the statement now simply fills the section's own content column (already capped by .sdx-card-section itself), which lets the short sentence sit on one line at 1440px as specified. No change to Record, Studio, Closing, or Doors CSS. v10.1.0 (2026-07-28): OWNER-DIRECTED STRUCTURAL CORRECTION. See edutower.html v8.1.0 changelog for the full context ("the only correct correction now"). (1) NEW: .edutower-arc-grid, a 2-column/2-row CSS grid (rail column ~15rem, card column 1fr) where source order alone puts rail-item-1 beside card-1 and rail-item-2 beside card-2 (default grid auto-placement, no explicit grid-row/column needed). The connecting line (.edutower-arc-rail-item:not(:last-child)::after) spans from just below its own marker to its own box's bottom (align-self:stretch makes that box match the taller card's row height), then bridges the grid's fixed row-gap (2.5rem) with a matching negative bottom offset, landing exactly on the next rail item -- this only works because the row-gap is a fixed value, not a clamp(), so the offsets can match it exactly. (2) .edutower-section-body h2 rule extended to also match h3 — the Beginning/Journey cards' own headings moved down one level (still styled identically: left-aligned, same margin) now that they sit inside the outer arc section's own h2. (3) .edutower-journey-* rules trimmed to match the three-stage card: .edutower-journey-origin, .edutower-journey-role and .edutower-journey-reflection deleted outright (unused, since the copy they styled no longer exists in the markup); .edutower-journey-step's heading selector changed h3 -> h4 (one level deeper again, matching the new h2/h3/h4 nesting). .edutower-journey-coda kept, restyled to nothing (same rule, new content). (4) Narrow-width handling: under 968px the arc grid collapses to one column (matching every other 2-column layout on this page at that breakpoint); the connecting line is explicitly hidden there rather than left to misfire, since a single-column stack puts each card directly after its own rail item in source order, not the next rail item, so the fixed row-gap math the line depends on no longer applies. No change to Record, Studio, or Closing. v10.0.0 (2026-07-27): OWNER-DIRECTED REMOVAL OF THE JOURNEY DIAGRAM. See edutower.html v8.0.0 changelog for the full context. Rule 7 (previously "CAPABILITY JOURNEY", the SVG figure plus a display:none/block toggle against a mobile-only ordered list) is replaced outright with ".edutower-journey-story" and its children -- one representation at every width, no media-query toggle needed since there is no image to hide. The numbered-marker construction is copied from .edutower-progression-number (rule 10) verbatim except for colour (teal-deep instead of purple-deep), so the Journey and Record sequences share one visual language while remaining identifiably distinct. The threshold step's marker and heading switch to sdx-color-mama-amber with no colour-mix darkening on the heading itself (flat amber, for maximum legibility against the card surface); every other property (font sizes, connecting-line construction, dark-mode adaptation via var(--fg)/var(--muted)/var(--page-primary) rather than hardcoded per-theme overrides) follows the same rules already governing the rest of the page. No change to any other section's CSS. v9.1.0 (2026-07-26): OWNER REJECTED v9.0.0. See edutower.html v7.1.0 changelog for the full owner-verdict context. CSS-side changes in this pass: (1) .edutower-story-section margin-bottom reduced from the sitewide default 2rem to 0.75rem — Beginning and Journey are two separate .sdx-card-section elements again (HTML), closed to a single reading beat instead of either one merged card or two normally-spaced ones. (2) CAPTION BUG — .edutower-studio-stage-media figcaption, .edutower-figure .sdx-figure-caption gained an explicit text-align:left. Root cause: the second Studio image's figcaption additionally carries global.css's own .sdx-figure-caption class, whose text-align:center this page's rule never overrode (it only ever set margin/colour/size) — confirmed by reading global.css directly. The first row's plain figcaption was never affected by that global rule, which is why only the second caption was ever centred. (3) .edutower-narrative-copy p added at 1.125rem (was inheriting global's 1rem

default); .edutower-identity-anchor raised 1.125rem -> 1.3rem. (4) .edutower-progression-note margin-top 0.75rem -> 0.5rem (closer to the progression it qualifies). (5) .edutower-studio-stage grid-template-columns 1.08fr/0.92fr -> 1fr/1fr — fixed the second row's heading wrapping onto an orphaned last word, and incidentally gave both rows more copy width generally; .edutower-studio-sequence gap reduced (3-4.5rem clamp -> 2-3rem clamp). (6) .sdx-cta-band padding reduced again, 3rem 2rem -> 2.25rem 2rem (2rem 1.5rem -> ... under 600px unchanged proportionally); added .container > .sdx-card-section:last-of-type margin-bottom:0.75rem so the Studio-to-closing gap matches the Beginning-to-Journey tightening. The band's background token (var(--bg), distinct from --card) is untouched — that is a sitewide DOC-03 pattern, not something safe to override on one page alone. No change to hero, door cards, button colours/interactions, routes, or images. v9.0.0 (2026-07-25): OWNER-DIRECTED NARRATIVE REBUILD. Worked from the current file as-is; no restore. Layout/style corrections needed to support the new copy and the merged beginning-and-journey section: (1) DOORS HEADING — removed global.css's canonical .sdx-card-section > h2 border-bottom/padding-bottom (the "decorative horizontal rule") for this section's heading only; spacing (margin-bottom) carries the break instead. This is the one remaining bare-centred h2 on the page, so the fix is fully scoped to it (every other heading already lives inside .edutower-section-body, which the global underline rule never matched). (2) BEGINNING+JOURNEY CONTINUITY — added .edutower-journey-transition { margin-top } so the merged section's second half (the practice transition) reads as a clear beat, not a full section gap or card seam, from the opening story above it. (3) CLOSING-LINE RESTYLE — .edutower-identity-anchor (the opening story's subordinate closing line) changed from a bold serif 1.375rem/page-primary treatment (indistinguishable from a sub-heading) to a moderate 1.125rem/500 sans-serif weight in a muted-primary blend (color-mix of page-primary and muted), so it reads as subordinate to the section heading, not another title. The stale dark-mode override (an unrelated moon-glow token) is removed; the color-mix formula already resolves correctly under [data-theme="dark"] because --page-primary and --muted are both re-bound there. (4) BOUNDARY NOTES — .note-box (opaque filled rectangle) deleted outright, along with its now-dead dark-mode rule; no page markup references it any longer. Both the record section's qualification note and the Studio truth boundary now use one shared quiet treatment (new .edutower-boundary-note class, and .edutower-progression-note restyled to match): a 3px left rule, no background fill, no oversized padding. The progression note is additionally indented (margin-left: 4rem, 3.5rem at the narrow breakpoint) to align with the progression TEXT column, not the numbered markers. (5) CAPTION ALIGNMENT UNIFIED — .edutower-capability-figure figcaption was the only centred caption on the page (auto margins, text-align:center, max-width 900px); changed to left-aligned with a left margin, matching every other editorial caption on the hub (Studio's plain figcaption rule already was, and always has been, left by default). (6) CLOSING PADDING — added .page-edutower .sdx-cta-band { padding: 3rem 2rem } (2.5rem 1.5rem under 600px), down from global's canonical 5rem/3.5rem, so the band reads as the story's own final consequence rather than a separate promotional banner. No change to hero, door CTA colours/interactions, route hrefs, or images. v8.1.0 (2026-07-24): OWNER-DIRECTED CORRECTION PASS 2. Worked from the current file as-is; no restore, no repeated general token audit (owner explicitly scoped this pass to four measured/targeted corrections): (1) EYEBROW-TO-TITLE SPACING — measured live on mamadex-restoration-evidence.html (its own .eyebrow margin-block-end: 2.25rem, heading margin-top: 0 — computed gap 36px). EduTower's generic .eyebrow rule only had margin-bottom: 2rem (32px), and a second, more specific rule for section-body-wrapped eyebrows (.edutower-section-body > .eyebrow:first-child) cut that down further to 0.75rem (12px) for exactly the three sections the owner flagged (The Journey, The Turning Point, The Next Horizon) — the two sections not wrapped in .edutower-section-body (The Beginning, The Living Tower) were already at the wrong 32px. Fixed by (a) changing the generic rule to 2.25rem and (b) deleting the section-body override outright, so the measured MamaDEX gap is now the single spacing value for every EduTower eyebrow/heading pair, not a per-section padding hack. (2) NUMBERED MARKER DEPTH — inspected the actual live computed styles of mamadex-restoration-evidence.html's own dimensional violet construction (its .sdx-cta-band .sdx-btn-primary, mamadex-mamas.css: 135deg gradient light-to-dark, a colour-tinted depth shadow, inset 0 0 0 1px rgba(255,255,255,0.18) highlight ring). The EduTower .edutower-progression-number had only a flat gradient and one soft grey-tinted shadow. Reproduced the same two-layer shadow construction (colour-tinted depth shadow + inset white ring) on EduTower's own governed purple-deep gradient — matching MamaDEX's depth, not its hue, per the owner's explicit instruction not to substitute colour family for construction. (3) STUDIO DECORATIVE AXIS REMOVED — .edutower-studio-sequence::before (vertical line), .edutower-studio-stage::before (three dots), and .edutower-studio-connector (small arrow, added last pass) deleted outright, along with the padding-left gutter reserved for them. The two stages are now two plain rows sharing one grid-template-columns rule (unchanged proportions/axes, already identical between both stages), reading top to bottom; "Begin Now" -> "Grow the Route" is carried by the stage labels and natural order alone. (4) LIGHTBOX CAPTION WIDTH — media-lightbox.css (shared, read-only) sizes .lightbox-caption as a flex item under .lightbox-media's align-items:center, so it shrinks to its own text width and wraps well short of the image's displayed width. Added a page-scoped override only (.page-edutower #media-lightbox .lightbox-caption { align-self:stretch; width:100%; max-width:none; ... }) — .page-edutower lives on , so this cannot reach any other page, and the shared stylesheet is untouched. No change to the hero, door cards, button colours/interactions, record-stage wording, Studio wording, routes, or images. v8.0.0 (2026-07-23): OWNER-DIRECTED CORRECTION PASS. Worked from the current file as-is (no historical revision restored). Colour-token governance audit performed against BKT WWW Colour Map Whitepaper v3.16.0 (§5.6 EduTower, §8.1 Button System) before any rule changed: (1) DOOR CTA GRADIENT FIXED — .edutower-door-body .sdx-btn-primary had no page-specific background rule and was falling back to global.css's flat single-tone .sdx-btn-primary default (var(--page-primary) alone, i.e. edutower-blue only). This violated the governed dual-tone requirement. Added the literal governed EduTower button gradient, linear-gradient(145deg, var(--sdx-color-teal-deep) 0%, var(--page-depth) 100%) — teal-deep to stem-olive, per whitepaper §5.6/§8.1 (both agree; --page-primary itself is a third, different tone — edutower-blue — reserved for card borders, links and the eyebrow, not the button). Restrained shadow-only highlight on hover, matching the confirmed live MamaDEX .door-card-body .sdx-btn-primary pattern (mamadex.css) exactly: box-shadow alpha increase only, no transform, no filter. (2) MOTION — door CTAs previously inherited global.css's standalone .sdx-btn-primary:hover lift (translateY(-2px)) because .edutower-door-card is not literally .card, so the sitewide "no lift inside a card" rule never matched it. Added an explicit page-wide transform:none on .sdx-btn-primary hover/focus-visible (covers the door CTAs and the closing CTA; matches mamadex.css's own page-wide motion-cancel rule). Card lift itself (.edutower-door-card:hover) is unchanged — MamaDEX's own door-card keeps an identical lift; only buttons never move. (3) RECOGNITION SECTION REBALANCED — .edutower-recognition-layout now uses align-items:stretch and the image fills the column's full height (object-fit:cover) instead of stopping at its own intrinsic ratio, which left a blank area below the image whenever the four-point progression ran taller than the photo. Reverted to natural height at the stacked (<=968px) breakpoint where there is no shared row height to fill. (4) STUDIO CONTINUITY CONNECTOR — added .edutower-studio-connector, a small chevron centred on the existing continuity axis between the two Studio stages, so "Begin Now" and "Grow the Route" (edutower.html) read as one visible progression rather than two rows joined only by a thin line. (5) MOBILE CAPABILITY LIST — .edutower-capability-list and its children (<760px fallback for the capability SVG) had no CSS at all; the browser's own

    decimal marker was doubling up against the .edutower-capability-number badge already in the markup ("1. 1"). Added list-style:none plus a number-badge layout reusing the same visual pattern as .edutower-progression-step (rule 10). No other rule, section, or token binding changed. v7.0.0 (2026-07-22): OWNER-DIRECTED FULL VISUAL RECONSTRUCTION. Manual owner review rejected v6.0.3 despite passing browser checks. Authority audit performed against the LIVE rendered treatment of mamadex.css and living-tower.css before any rule changed (see edutower-journey.css v3.0.0's changelog for the full source-by-source reasoning, which applies identically here): (1) EYEBROW strengthened to the confirmed live MamaDEX/Living Tower scale: 1.1rem, weight 600, 0.15em letter-spacing, uppercase, color var(--page-primary), margin-bottom 2rem. (2) BUTTON HOVER changed to a box-shadow increase only, matching mamadex.css's confirmed .door-card-body .sdx-btn-primary:hover exactly -- no filter, no transform, no scale, no lift. (3) HERO redesigned: the hero photograph was opened and inspected (people and laptops at a table, ground-mounted and roof solar arrays, the rammed-earth-style building entrance all sit centre-right and lower-right; the mountain and open sky upper-left are the genuine quiet zone). Hero content is now left-anchored over that quiet zone instead of centred over the whole frame, matching the treatment already verified correct on the six journey pages. (4) DOOR CTA CENTRED -- .edutower-door-body .sdx-btn-primary now uses align-self:center (heading and body text remain left-aligned above it), matching mamadex.css's own door-card-body CTA alignment exactly. (5) SHARED NUMBERED PROGRESSION added (.edutower-progression*), identical contract to edutower-journey.css v3.0.0's component, using --sdx-color-purple-deep -- replaces the old .edutower-capability-mobile bespoke list and the old .edutower-definitions grid-pair layout for Recognition, giving the hub one consistent sequence language instead of three different ad hoc list styles. (6) LEFT-AXIS NARRATIVE BODY (.edutower-section-body) added, same contract as edutower-journey.css, for every story section that needs a left-locked eyebrow + heading + body instead of the canonical centred direct-child h2 pattern. (7) Dead .hero-actions/.btn-hero-primary/.btn-hero-secondary rules removed outright: no hub hero has carried an action button since v4.0.0, and no future hero CTA is planned under the current information architecture. (8) STUDIO CONTINUITY -- .edutower-studio-sequence given a single connecting axis (a continuous vertical line through both stages, using the page-primary token, not the purple governance token, since this is a capability continuity, not an evidence/recognition sequence) so "learning can begin now" and "the future Studio enlarges what becomes possible" read as one continuous idea rather than two unrelated rows. (9) CARD CONSOLIDATION -- no rule in this file forces a minimum section height; fragmentation was an HTML-authoring pattern, corrected in edutower.html directly. v6.0.3 (2026-07-22) and earlier: see prior file revision for the full history (capability-journey SVG, story-copy review support, retained explanatory images, orientation-hub rewrite, and the full compliance history back to v3.3.0). */ /* 0) depends on: global.css, themes.css, partials/footer.css header.css lifted by includes.js, MUST NOT be linked in */ /* 1) Page variable binding — PIL-05 §2 (LOCKED) */ .page-edutower { --page-bg: var(--sdx-color-edutower-bg); --page-primary: var(--sdx-color-edutower-blue); --page-secondary: var(--sdx-color-green-deep); --page-accent: var(--sdx-color-leaf-green); --page-depth: var(--sdx-color-stem-olive); --page-community: var(--sdx-color-edutower-community); --page-dark-base: var(--sdx-color-edutower-dark-base); --page-dark-surface: var(--sdx-color-edutower-dark-surface); --hero-image: url('/assets/images/edutower/edutower-hero.webp'); --hero-vignette-from: rgba(47, 92, 104, 0.20); --hero-vignette-to: rgba(47, 92, 104, 0); background: var(--page-bg); color: var(--fg); } /* 2) Base page surfaces */ body.page-edutower { background-color: var(--page-bg); } /* 3) Hero — the photograph's people, laptops, solar arrays and the building entrance all sit centre-right and lower-right; the mountain and open sky upper-left are the real quiet zone (confirmed by opening the image, not assumed). Hero text is left-anchored over that zone, matching the journey pages' treatment. Bottom vignette per PIL-05 §3 is retained; a matching left-side scrim is added for the same contrast reason already verified on the journey pages (the sky is bright at this exact crop). */ .page-edutower .hero-wrap { position: relative; background-image: var(--hero-image); background-size: cover; background-position: 62% 32%; min-height: var(--hero-min); } .page-edutower .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-edutower .hero-wrap::after { content: ''; position: absolute; inset: 0; pointer-events: none; background: linear-gradient(to right, rgba(8,14,16,0.55) 0%, rgba(8,14,16,0.28) 30%, rgba(8,14,16,0) 55%); } .page-edutower .hero { display: flex; align-items: center; justify-content: flex-start; min-height: var(--hero-min); padding: 6rem clamp(1.5rem, 6vw, 5rem); } .page-edutower .hero-content { position: relative; z-index: 1; max-width: 30rem; margin: 0; text-align: left; } .page-edutower .headline { font-size: clamp(2.75rem, 6vw, 4.5rem); margin: 0 0 1.5rem; color: #ffffff; } /* tagline: PIL-05 §4 + DOC-01 §4 HARD RULE: universal amber, no per-pillar exceptions. OWNER EXCEPTION (PIL-05 §4.1, registered 2026-03-18, unchanged this pass): text-shadow strengthened beyond global.css canonical because EduTower hero photography is warm/golden and amber tagline loses contrast at mid-frame. WCAG SC 1.4.3. */ .page-edutower .tagline { color: var(--sdx-color-mama-amber); text-shadow: 0 4px 50px rgb(0, 0, 0), 0 4px 30px rgb(0, 0, 0), 0 8px 32px rgb(0, 0, 0); } .page-edutower .hero .intro { max-width: 28rem; margin: 1.25rem 0 0; } /* 4) Typography — eyebrow strengthened to the confirmed live MamaDEX/Living Tower scale (see changelog (1)). h1-h6/section-title/figure-caption remain otherwise global-owned. */ .page-edutower .eyebrow { font-size: 1.1rem; font-weight: 600; letter-spacing: 0.15em; color: var(--page-primary); margin-bottom: 2.25rem; /* 36px — measured live from mamadex-restoration-evidence.html's eyebrow-to-heading gap (its own .eyebrow margin-block-end: 2.25rem); reproduced verbatim so every EduTower eyebrow/heading pair carries the same measured relationship. */ } .page-edutower .sdx-card-section h3 { margin: 2rem 0 1rem; } .page-edutower .sdx-card-section strong { color: var(--fg); } .page-edutower .sdx-card-section a:not([class]) { color: var(--page-primary); border-bottom: 1px solid rgba(from var(--page-primary) r g b / 0.30); transition: filter 0.22s ease; } .page-edutower .sdx-card-section a:not([class]):hover { filter: brightness(0.85); } /* Left-axis narrative body — same contract as edutower-journey.css v3.0.0. .edutower-section-body's h2 is a grandchild of .sdx-card-section (not a direct child), so the canonical centred .sdx-card-section > h2 rule never matches it; this is the intended, non-overriding escape hatch for every section on this page that must read eyebrow -> heading -> body on one hard left axis (rule 4.4). v10.3.0: Doors now uses this same wrapper (previously the page's one remaining bare-centred h2, direct child of .sdx-card-section, with its own .edutower-doors-eyebrow/> h2 overrides) — those rules are removed as obsolete; Doors, Capability, Record and Studio headers are now identically structured and identically styled. */ .page-edutower .edutower-section-body { text-align: left; } /* h3 covers stage/card headings nested one level below a section's own h2 (Capability's three movements; Record and Studio's own inner headings). */ .page-edutower .edutower-section-body h2, .page-edutower .edutower-section-body h3 { text-align: left; margin: 0 0 1rem; } .page-edutower .edutower-section-body p { text-align: left; } .page-edutower .edutower-section-body .section-intro { margin: 0 0 1.25rem; max-width: none; } /* 5) SIX VISITOR DOORS — CTA centred (matches mamadex.css's own door-card-body CTA alignment exactly); heading and body copy remain left-aligned above it. */ .page-edutower .edutower-door-grid { display: grid; grid-template-columns: 1fr; gap: 1.5rem; max-width: 1200px; margin: 2rem auto 0; } @media (min-width: 768px) { .page-edutower .edutower-door-grid { grid-template-columns: repeat(2, 1fr); gap: 2rem; } } .page-edutower .edutower-door-card { display: flex; flex-direction: column; background: var(--card); border: 1px solid var(--border); border-radius: 0.75rem; overflow: hidden; box-shadow: var(--card-shadow); transition: transform 0.28s ease, box-shadow 0.28s ease; } .page-edutower .edutower-door-card:hover, .page-edutower .edutower-door-card:focus-within { transform: translateY(-3px); box-shadow: var(--card-shadow-hover); } .page-edutower .edutower-door-media { display: block; width: 100%; aspect-ratio: 4 / 3; overflow: hidden; background: var(--surface-alt); } .page-edutower .edutower-door-media img { display: block; width: 100%; height: 100%; object-fit: cover; object-position: center; } .page-edutower .edutower-door-media .media-thumb { display: block; width: 100%; height: 100%; padding: 0; border: 0; background: none; cursor: zoom-in; } .page-edutower .edutower-door-body { display: flex; flex-direction: column; align-items: flex-start; gap: 0.75rem; padding: 1.75rem; flex: 1; } .page-edutower .edutower-door-heading { font-family: var(--headline-font); font-size: 1.375rem; font-weight: 700; color: var(--fg); margin: 0; } .page-edutower .edutower-door-body p { margin: 0; color: var(--muted); flex: 1; } /* Door CTA — governed EduTower dual-tone gradient (teal-deep -> stem-olive, BKT colour-map whitepaper v3.16.0 §5.6/§8.1 button table; --page-primary alone is edutower-blue, a different tone, so the two literal gradient tokens are bound directly). Shadow-only highlight on hover/focus, no transform, matching the confirmed live MamaDEX door-card-body CTA (mamadex.css .door-card-body .sdx-btn-primary). */ .page-edutower .edutower-door-body .sdx-btn-primary { margin-top: 0.25rem; align-self: center; background: linear-gradient(145deg, var(--sdx-color-teal-deep) 0%, var(--page-depth) 100%); color: #ffffff; box-shadow: 0 3px 12px rgba(from var(--sdx-color-teal-deep) r g b / 0.32); } .page-edutower .edutower-door-body .sdx-btn-primary:hover { box-shadow: 0 6px 18px rgba(from var(--sdx-color-teal-deep) r g b / 0.45); } /* No lift on any EduTower button, in or out of a card (door CTAs, closing CTA). Card lift (.edutower-door-card:hover) is untouched. */ .page-edutower .sdx-btn-primary:hover, .page-edutower .sdx-btn-primary:focus-visible { transform: none; } /* 6) FROM KNOWLEDGE TO CAPABILITY — one outer card only (.sdx-card-section supplies the sole rounded border, background and shadow). v10.6.0: OWNER-DIRECTED REBUILD FROM SCRATCH. Replaces every prior version of this section's inner structure (the vertical eyebrow-stack, then the vertical colour-band variant) with one horizontal transformation: two substantial, equally-weighted content states (.edutower-capability-warm, .edutower-capability-cool) either side of one deliberately narrow, non-equal transition (.edutower-capability-threshold — no heading, no eyebrow, no image, no card of its own). Colour system unchanged in principle from the prior pass: --capability-warm reuses var(--card) (the site's own locked warm card surface, #f8f5f2 in light mode) under the left/warm state; --capability-cool is a subtle pale blue-green mixed from the page's own --sdx-color-edutower-blue under the right/cool state; the transition is a linear-gradient between the exact same two properties, so the colour is continuous with zero visible seam at both boundaries. Same bleed technique as before (negative inline margin equal to the outer .sdx-card-section's own padding, restored as padding on each zone) reaches the card's true left/right/bottom edges; overflow:hidden on the outer card still clips that bleed to its existing 1rem rounded corners. */ .page-edutower .edutower-capability-section { --capability-warm: var(--card); --capability-cool: color-mix(in srgb, var(--sdx-color-livingtower-warm-sand) 22%, var(--card)); --capability-bleed-x: 2.5rem; --capability-bleed-bottom: 3.5rem; overflow: hidden; } [data-theme="dark"] .page-edutower .edutower-capability-section { --capability-cool: color-mix(in srgb, var(--sdx-color-livingtower-warm-sand) 18%, var(--card)); } @media (max-width: 768px) { .page-edutower .edutower-capability-section { --capability-bleed-x: 1.25rem; --capability-bleed-bottom: 2rem; } } /* The transformation grid — desktop: warm | narrow transition | cool, left-to-right, zero gap between columns (the gap would show the plain card colour and break the continuous transition), each column stretched to the row's full height (grid default align-items:stretch) so the transition column's gradient always spans the taller neighbour's full height, not a fixed height of its own. The whole grid bleeds to the card's left/right/bottom edges exactly as the old three stacked zones did; only the direction of composition changed, not the bleed mechanism. */ .page-edutower .edutower-capability-transform { display: grid; grid-template-columns: minmax(0, 1fr) clamp(150px, 13vw, 210px) minmax(0, 1fr); margin-inline: calc(var(--capability-bleed-x) * -1); margin-bottom: calc(var(--capability-bleed-bottom) * -1); margin-top: 2.75rem; } @media (max-width: 768px) { .page-edutower .edutower-capability-transform { grid-template-columns: 1fr; } } .page-edutower .edutower-capability-warm, .page-edutower .edutower-capability-cool { padding: 2.5rem var(--capability-bleed-x); } .page-edutower .edutower-capability-warm { background: var(--capability-warm); } .page-edutower .edutower-capability-cool { background: var(--capability-cool); padding-bottom: var(--capability-bleed-bottom); } .page-edutower .edutower-capability-warm h3, .page-edutower .edutower-capability-cool h3 { margin: 0 0 1.5rem; text-align: left; font-family: var(--headline-font); font-weight: 700; font-size: clamp(1.65rem, 1.4rem + 0.7vw, 2.25rem); line-height: 1.18; color: var(--fg); } /* Warm state — image stacked above prose, not side-by-side: at roughly half the card's own width per column, a two-column image/text split (the old .edutower-capability-beginning-grid layout) would leave neither column enough room to read comfortably. */ .page-edutower .edutower-capability-warm-grid { display: flex; flex-direction: column; gap: 1.5rem; } .page-edutower .edutower-capability-warm-grid figure { margin: 0; } .page-edutower .edutower-capability-warm-grid figure img { display: block; width: 100%; height: auto; border: 1px solid var(--border); border-radius: 0.75rem; } .page-edutower .edutower-capability-warm-grid .media-thumb { display: block; width: 100%; padding: 0; border: 0; background: none; cursor: zoom-in; } .page-edutower .edutower-narrative-copy p { font-size: clamp(1.0625rem, 1rem + 0.2vw, 1.1875rem); line-height: 1.65; } /* Closing line of the opening prose — visually subordinate to the state heading, a clear step up from body text (a "pull sentence", not a footnote): muted-primary colouring, sans-serif, no quotation marks, no filled box. */ .page-edutower .edutower-identity-anchor { font-family: var(--text-font); font-size: clamp(1.05rem, 1rem + 0.1vw, 1.25rem); font-weight: 500; line-height: 1.5; color: color-mix(in srgb, var(--page-primary) 65%, var(--muted) 35%); text-align: left; margin: 1.5rem 0 0; } /* Transition — deliberately narrow (see the grid's clamp(90px,8vw,140px) middle column above), not a third equal panel: no heading, no eyebrow, no number, no image, no card, no motion. Its own background is a plain linear-gradient between the exact --capability-warm/--capability-cool values that fill its two neighbours, so it reads as pure colour transition rather than a distinct panel of its own. Gradient direction matches the grid's own axis: left-to-right on desktop (matching the horizontal warm-to-cool layout), flipped to top-to-bottom at the same 768px breakpoint where the grid itself stacks to one column. Content (two short centred lines, .edutower-capability-threshold-line) is centred on both axes via flex; no forced min-height on desktop, since the column already stretches to match its two neighbours' full height and a fixed height would fight that. */ .page-edutower .edutower-capability-threshold { display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; padding: 1.5rem 1rem; background: linear-gradient(to right, var(--capability-warm), var(--capability-cool)); } @media (max-width: 768px) { .page-edutower .edutower-capability-threshold { min-height: 100px; padding: 1.25rem 1.25rem; background: linear-gradient(to bottom, var(--capability-warm), var(--capability-cool)); } } .page-edutower .edutower-capability-threshold-line { margin: 0; max-width: 12rem; font-family: var(--headline-font); font-weight: 600; font-size: clamp(1.0625rem, 1rem + 0.3vw, 1.1875rem); line-height: 1.35; color: var(--muted); } .page-edutower .edutower-capability-threshold-line + .edutower-capability-threshold-line { margin-top: 0.75rem; } /* 7) JOURNEY PROGRESSION — the only numbering system inside this section. Same dimensional marker construction as the record section's progression (rule 10), recoloured to EduTower's own teal so the two sequences read as related but distinct; amber only for the threshold stage. */ .page-edutower .edutower-journey-progression { list-style: none; margin: 2rem 0 0; padding: 0; max-width: 42rem; } .page-edutower .edutower-journey-step { position: relative; display: grid; grid-template-columns: 3rem minmax(0, 1fr); gap: 1rem; padding: 0 0 1.75rem; text-align: left; } .page-edutower .edutower-journey-step:not(:last-child)::after { content: ""; position: absolute; inset-block-start: 3rem; inset-block-end: 0; inset-inline-start: calc(1.5rem - 1px); width: 2px; background: color-mix(in srgb, var(--sdx-color-teal-deep) 32%, var(--border)); } .page-edutower .edutower-journey-number { position: relative; z-index: 1; display: inline-flex; align-items: center; justify-content: center; width: 3rem; height: 3rem; border-radius: 50%; background: linear-gradient(135deg, var(--sdx-color-teal-deep) 0%, color-mix(in srgb, var(--sdx-color-teal-deep) 65%, black) 100%); color: #ffffff; font-weight: 700; box-shadow: 0 4px 14px color-mix(in srgb, var(--sdx-color-teal-deep) 35%, transparent), inset 0 0 0 1px rgba(255, 255, 255, 0.18); } .page-edutower .edutower-journey-step h4 { margin: 0 0 0.35rem; font-family: var(--headline-font); font-weight: 700; color: var(--fg); font-size: clamp(1.3rem, 1.18rem + 0.35vw, 1.6rem); line-height: 1.2; } .page-edutower .edutower-journey-step p { margin: 0; color: var(--muted); font-size: clamp(1.025rem, 0.98rem + 0.15vw, 1.125rem); line-height: 1.55; } /* The threshold stage: the one place in the sequence carried by type and colour alone (amber, larger heading) rather than by any graphic device; ~0.25rem more breathing room above and below than stages 1 and 3. */ .page-edutower .edutower-journey-step--threshold { padding-block: 0.25rem 2rem; } .page-edutower .edutower-journey-step--threshold:not(:last-child)::after { inset-block-start: 3.25rem; } .page-edutower .edutower-journey-step--threshold .edutower-journey-number { background: linear-gradient(135deg, var(--sdx-color-mama-amber) 0%, color-mix(in srgb, var(--sdx-color-mama-amber) 65%, black) 100%); box-shadow: 0 4px 14px color-mix(in srgb, var(--sdx-color-mama-amber) 40%, transparent), inset 0 0 0 1px rgba(255, 255, 255, 0.18); } .page-edutower .edutower-journey-step--threshold h4 { /* Raw --sdx-color-mama-amber measures ~1.55:1 against the warm-sand --capability-cool background, failing WCAG 2.2 AA even at the large-bold text threshold (3:1) -- darkened for light mode only. Dark mode's own --capability-cool is dark enough that the raw amber already passes (~4.46:1) and is restored below. */ color: color-mix(in srgb, var(--sdx-color-mama-amber) 55%, black); } [data-theme="dark"] .page-edutower .edutower-journey-step--threshold h4 { color: var(--sdx-color-mama-amber); } /* Journey conclusion — one sentence, aligned with the progression TEXT column (3rem number + 1rem gap = 4rem), not with the numbered markers. */ .page-edutower .edutower-capability-journey-conclusion { font-family: var(--text-font); font-weight: 500; font-size: clamp(1.25rem, 1.15rem + 0.3vw, 1.4rem); line-height: 1.4; color: color-mix(in srgb, var(--page-primary) 65%, var(--muted) 35%); text-align: left; margin: 2rem 0 0 4rem; } .page-edutower .edutower-recognition-media, .page-edutower .edutower-studio-stage-media { margin: 0; } .page-edutower .edutower-recognition-media img, .page-edutower .edutower-studio-stage-media img { display: block; width: 100%; height: auto; border: 1px solid var(--border); border-radius: 0.75rem; } .page-edutower .edutower-recognition-media .media-thumb, .page-edutower .edutower-studio-stage-media .media-thumb { display: block; width: 100%; padding: 0; border: 0; background: none; cursor: zoom-in; } /* 8) RECOGNITION — the assessment photograph beside the shared numbered progression (four stages), replacing the old dt/dd definition-pair layout. */ .page-edutower .edutower-recognition-layout { display: grid; grid-template-columns: minmax(0, 0.92fr) minmax(0, 1.08fr); align-items: stretch; gap: clamp(2rem, 5vw, 4.5rem); margin-top: 2.25rem; } .page-edutower .edutower-recognition-content { min-width: 0; } /* Image carries full column height (matches the four-point progression's height) instead of stopping at its own intrinsic ratio and leaving blank space below it. */ .page-edutower .edutower-recognition-media { display: flex; } .page-edutower .edutower-recognition-media img { height: 100%; min-height: 22rem; object-fit: cover; } /* 9) Boundary notes — quiet subordinate notes, not filled callout boxes. Shared by the record section's qualification note and the Studio truth boundary: a restrained left rule, no background fill, no oversized padding, sized and coloured below the copy it follows so it never competes with the claim it qualifies. */ .page-edutower .edutower-boundary-note { margin-top: 0.75rem; padding-left: 1rem; border-left: 3px solid var(--border); color: var(--muted); font-size: 0.875rem; line-height: 1.6; max-width: 34rem; } /* 9.1) Lightbox caption width — EduTower-scoped override only (media-lightbox.css is shared and read-only). Root cause: .lightbox-media is display:inline-flex, flex-direction:column, align-items:center — the caption is a flex item that shrinks to its own text width and centres, instead of matching the image's displayed width, so a long caption wraps at a much narrower measure than the photograph beside it. align-self:stretch makes the caption match whichever width .lightbox-media itself resolved to (the image's rendered width), which is exactly the fix without touching the shared stylesheet. Scoped under .page-edutower on , so no other page is affected. */ .page-edutower #media-lightbox .lightbox-caption { align-self: stretch; display: block; box-sizing: border-box; width: 100%; max-width: none; } /* 10) SHARED NUMBERED PROGRESSION — identical contract to edutower-journey.css v3.0.0, modelled on mamadex-restoration-evidence.css's confirmed live .evidence-story-step structure, using the governed purple primitive. */ .page-edutower .edutower-progression { max-width: 44rem; margin: 2rem 0; } .page-edutower .edutower-progression-step { position: relative; display: grid; grid-template-columns: 3rem minmax(0, 1fr); gap: 1rem; padding: 0 0 1.75rem; text-align: left; } .page-edutower .edutower-progression-step:not(:last-child)::after { content: ""; position: absolute; inset-block-start: 3rem; inset-block-end: 0; inset-inline-start: calc(1.5rem - 1px); width: 2px; background: color-mix(in srgb, var(--sdx-color-purple-deep) 32%, var(--border)); } /* Marker construction reproduces the actual live MamaDEX dimensional treatment measured on mamadex-restoration-evidence.html's own .sdx-cta-band .sdx-btn-primary (mamadex-mamas.css rule 7): a 135deg gradient (light stop upper-left, dark stop lower-right), a colour-tinted depth/glow shadow, and an inset white ring for a dimensional edge. Colour family intentionally stays EduTower's own governed purple-deep, not MamaDEX's mama-violet -- only the depth construction is reused. */ .page-edutower .edutower-progression-number { position: relative; z-index: 1; display: inline-flex; align-items: center; justify-content: center; width: 3rem; height: 3rem; border-radius: 50%; background: linear-gradient(135deg, var(--sdx-color-purple-deep) 0%, color-mix(in srgb, var(--sdx-color-purple-deep) 65%, black) 100%); color: #ffffff; font-weight: 700; box-shadow: 0 4px 14px color-mix(in srgb, var(--sdx-color-purple-deep) 35%, transparent), inset 0 0 0 1px rgba(255, 255, 255, 0.18); } .page-edutower .edutower-progression-step h3 { margin: 0 0 0.35rem; font-family: var(--headline-font); font-size: 1.25rem; color: var(--fg); } .page-edutower .edutower-progression-step p { margin: 0; color: var(--muted); font-size: var(--body); line-height: 1.65; } /* Quiet subordinate note, aligned with the progression TEXT column (3rem number + 1rem gap = 4rem), not with the numbered markers themselves — see the shared .edutower-boundary-note treatment (rule 9). */ .page-edutower .edutower-progression-note { max-width: 40rem; margin: 0.5rem 0 0 4rem; padding-left: 1rem; border-left: 3px solid var(--border); text-align: left; color: var(--muted); font-size: 0.875rem; line-height: 1.6; } /* 11) STUDIO SEQUENCE — two clean, aligned rows (image | copy, same column proportions in both), reading top-to-bottom. "Begin Now" -> "Grow the Route" is carried entirely by the stage labels and reading order; no decorative axis (no line, no dots, no connector arrow). */ .page-edutower .edutower-studio-sequence { display: grid; gap: clamp(2rem, 4vw, 3rem); margin-top: 2.25rem; } .page-edutower .edutower-studio-stage { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); align-items: center; gap: clamp(2rem, 5vw, 4.5rem); } .page-edutower .edutower-studio-stage-copy > :first-child { margin-top: 0; } .page-edutower .edutower-stage-label { margin: 0 0 0.625rem; color: var(--page-primary); font-size: 0.8125rem; font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase; } .page-edutower .edutower-studio-stage-copy h3 { margin: 0 0 1rem; color: var(--fg); } .page-edutower .edutower-studio-stage-media figcaption, .page-edutower .edutower-figure .sdx-figure-caption { margin-top: 0.75rem; color: var(--muted); font-size: 0.9375rem; line-height: 1.55; text-align: left; /* overrides global.css .sdx-figure-caption's text-align:center — that rule was the actual cause of the second Studio row's caption rendering centred while the first row (a plain, unclassed figcaption never touched by that global rule) was already left, despite both being governed by this same page rule for every other property. */ } .page-edutower .edutower-figure { margin: 0; } .page-edutower .edutower-figure img { border: 1px solid var(--border); } /* 12) Hub closing — final CTA and a subordinate Living Tower handoff, both inside the mandatory .sdx-cta-band final section. Padding reduced further from global's canonical 5rem (and from this hub's own earlier 3rem) so the band sits close to the Studio section above it and reads as the story's own final consequence, not a separate promotional banner. */ .page-edutower .sdx-cta-band { padding: 2.25rem 2rem; } /* Studio (the last card-section before the band) keeps its normal margin with every other section above it, but the gap immediately before the closing band is tightened the same way as the Beginning/Journey pair, so the return reads as this section's own consequence, not a new module. */ .page-edutower .container > .sdx-card-section:last-of-type { margin-bottom: 0.75rem; } .page-edutower .edutower-final-cta { margin-bottom: 1.5rem; } /* Closing CTA — same governed dual-tone gradient and restrained highlight as the door CTAs (see rule 5); .sdx-btn-primary:hover/:focus-visible transform cancellation (rule 5) already covers this button, so no lift here either. */ .page-edutower .sdx-cta-band .sdx-btn-primary { background: linear-gradient(145deg, var(--sdx-color-teal-deep) 0%, var(--page-depth) 100%); color: #ffffff; box-shadow: 0 3px 12px rgba(from var(--sdx-color-teal-deep) r g b / 0.32); } .page-edutower .sdx-cta-band .sdx-btn-primary:hover { box-shadow: 0 6px 18px rgba(from var(--sdx-color-teal-deep) r g b / 0.45); } .page-edutower .edutower-living-tower-handoff { padding-top: 1.5rem; border-top: 1px solid rgba(255,255,255,0.16); } .page-edutower .edutower-living-tower-handoff p { font-size: 0.9375rem; } /* 13) Media queries */ @media (max-width: 968px) { .page-edutower .hero { padding: 4rem clamp(1.25rem, 5vw, 3rem); } .page-edutower .edutower-recognition-layout, .page-edutower .edutower-studio-stage { grid-template-columns: 1fr; gap: 1.75rem; } .page-edutower .edutower-recognition-media img { height: auto; min-height: 0; } } @media (max-width: 768px) { .page-edutower .sdx-card-section { padding: 2rem 1.25rem; } .page-edutower .edutower-studio-sequence { gap: 2.5rem; } } @media (max-width: 640px) { .page-edutower .hero-wrap::after { background: linear-gradient(to top, rgba(8,14,16,0.70) 0%, rgba(8,14,16,0.40) 45%, rgba(8,14,16,0.15) 100%); } .page-edutower .hero { justify-content: center; padding: 3.5rem 1.25rem; } .page-edutower .hero-content { max-width: 100%; text-align: center; } .page-edutower .hero .intro { max-width: 100%; margin-left: auto; margin-right: auto; } .page-edutower .edutower-progression-step { grid-template-columns: 2.5rem minmax(0,1fr); } .page-edutower .edutower-progression-number { width: 2.5rem; height: 2.5rem; font-size: 0.9375rem; } .page-edutower .edutower-progression-step:not(:last-child)::after { inset-inline-start: calc(1.25rem - 1px); } .page-edutower .edutower-progression-note { margin-left: 3.5rem; } .page-edutower .edutower-journey-step { grid-template-columns: 2.5rem minmax(0,1fr); } .page-edutower .edutower-journey-number { width: 2.5rem; height: 2.5rem; font-size: 0.9375rem; } .page-edutower .edutower-journey-step:not(:last-child)::after { inset-inline-start: calc(1.25rem - 1px); } .page-edutower .edutower-capability-journey-conclusion { margin-left: 3.5rem; } } @media (max-width: 600px) { .page-edutower .sdx-cta-band { padding: 2rem 1.5rem; } } @media (max-width: 480px) { .page-edutower .hero-wrap, .page-edutower .hero { min-height: 480px; } .page-edutower .hero { padding: 3rem 1.25rem; } } @media (prefers-reduced-motion: reduce) { .page-edutower * { animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; transition-duration: 0.01ms !important; } } /* 14) Dark mode: [data-theme="dark"] ONLY. @media prefers-color-scheme MUST NOT appear. PIL-05 §8. */ [data-theme="dark"] .page-edutower { background: var(--page-dark-base); color: var(--sdx-color-ui-dark-text); } [data-theme="dark"] .page-edutower .eyebrow { color: var(--sdx-color-mama-amber); } [data-theme="dark"] .page-edutower .edutower-door-card { background: var(--card); } [data-theme="dark"] .page-edutower .edutower-capability-warm-grid img, [data-theme="dark"] .page-edutower .edutower-recognition-media img, [data-theme="dark"] .page-edutower .edutower-studio-stage-media img { border-color: rgba(245,176,20,0.18); } [data-theme="dark"] .page-edutower .edutower-living-tower-handoff { border-top-color: rgba(255,255,255,0.10); }