/* V7-HEADER File: edutower.css Path: /assets/css/edutower/edutower.css Version: v4.8.0 Issued: 2026-03-18 Author: Buktika Webdesk (Binka) Purpose: EduTower pillar page token consumer. PIL-05 v1.0.0 + DOC-02 + DOC-03 + ai.md 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: v4.7.0 (2026-03-18): Strict grid columns — auto-fit resolved to wrong counts. G4: .cards (4 cards — How to Participate): global auto-fit minmax(280px) → repeat(2,1fr). Mobile ≤768px: collapses to 1fr (added to media block). G1: .mamadex-features (4 cards): auto-fit minmax(250px) → repeat(2, 1fr). 2×2. Mobile ≤768px: collapses to 1fr (added to media block). G2: .stats-grid (4 cards): auto-fit minmax(200px) → repeat(4, 1fr) desktop. Mobile ≤768px: repeat(2, 1fr) 2×2 (added to media block). G3: .iso-badges (6 items): auto-fit minmax(150px) → repeat(3, 1fr). 2 rows of 3. Mobile ≤768px: repeat(2, 1fr) already present — unchanged. Root cause: auto-fit with minmax produces 3+1, 5+1 etc at intermediate widths. Same fix pattern as legal.css §5.4/§5.5. v4.6.0 (2026-03-18): Pillar-colour border corrections — owner confirmed. V3: .card border-left: var(--page-accent) → var(--page-primary). Structural card border-left is a pillar-identity signal. Accent (leaf-green) is for badges/checkmarks only. V4: .feature-card border-top: var(--page-accent) → var(--page-primary). Same rationale. NOTE: .module-number badge retains var(--page-accent) — owner confirmed intentional (leaf-green tag is the visual design of the module number component). v4.5.0 (2026-03-18): global.css v3.16.0 compliance — section heading border-bottom. V1 REMOVED: .sdx-card-section h2 border-bottom: 2px solid var(--page-accent). global.css v3.16.0 now owns this rule canonically with var(--page-primary). Per-page override was redundant and still pointed to leaf-green (accent), contradicting the pillar-colour wayfinding change. V2 UPDATED: [data-theme="dark"] .sdx-card-section h2 border-bottom-color: rgba(245,176,20,0.25) [amber hardcode] → rgba(from var(--page-primary) r g b / 0.40) per global.css v3.16.0 dark mode amendment. Pillar colour at 0.40 opacity. v4.0.0 (2026-03-18): Full rebuild. 22 violations resolved. C1 HARD: --page-secondary: leaf-green -> green-deep per PIL-05 §2 (was swapped with --page-accent). C2: .hero-wrap: background-size:cover added. C3: .hero: padding:6rem 2rem added per DOC-02 §3.2. C4 HARD: .hero .intro: font-size + margin removed per DOC-02 §3.3.3. max-width only. C5: .hero-actions gap: 1.5rem -> 1rem per DOC-02 §3.3.5. C6 HARD: .btn-hero-primary gradient bare hex -> var(--sdx-color-teal-deep)/var(--page-depth). C7 HARD: inset ring 1px/0.25 -> 2px/0.80 per DOC-03 §4.1. C8 HARD: btn-hero-primary:hover full gradient re-declaration -> filter:brightness(1.08). C9 HARD: .sdx-btn-primary gradient bare hex -> tokens. C10 HARD: all legacy button classes bare hex -> tokens. C11 HARD: .note-box + .contact-box -> rgba(120,113,108,0.08) + 1px solid var(--border) per DOC-03 §16. C12: .sdx-card-section h2 font-family:var(--headline-font) added. C13: .stream-cards auto-fit minmax -> repeat(2, 1fr). C14 HARD: all border-radius px literals -> rem (12px->0.75rem, 8px->0.5rem, 6px exception per DOC-03). C15: dark mode color:var(--fg) -> var(--sdx-color-ui-dark-text) per PIL-05 §8. v3.3.0 (2026-03-06): Previous compliance pass. */ /* 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 — bottom vignette only, max opacity 0.20, fade 32% per PIL-05 §3 */ .page-edutower .hero-wrap { background-image: var(--hero-image); background-size: cover; background-position: center 40%; 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 { display: flex; align-items: center; justify-content: center; min-height: var(--hero-min); padding: 6rem 2rem; } .page-edutower .hero-content { max-width: 52rem; margin: 0 auto; text-align: center; } /* font-size only per DOC-02 §3.3.1. color:#ffffff permanent exception — hero text always white over photography. */ .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. --page-secondary is green-deep on this page — must reference mama-amber directly. OWNER EXCEPTION (PIL-05 registered 2026-03-18): text-shadow strengthened beyond global.css canonical (0 3px 12px rgba(0,0,0,0.90)) because EduTower hero photography is warm/golden and amber tagline loses contrast at mid-frame where the bottom vignette does not reach. WCAG SC 1.4.3 failure on this hero image without the stronger shadow. */ .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); } /* max-width ONLY per DOC-02 §3.3.3 HARD RULE. margin owned by global.css — MUST NOT override. */ .page-edutower .hero .intro { max-width: 700px; } .page-edutower .hero-actions { display: flex; gap: 1rem; flex-wrap: wrap; justify-content: center; margin-top: 2.5rem; } /* Shared hero button geometry */ .page-edutower .btn-hero-primary, .page-edutower .btn-hero-secondary { display: inline-flex; align-items: center; justify-content: center; padding: 0.875rem 1.75rem; font-family: var(--text-font); font-size: 1rem; font-weight: 600; text-decoration: none; border-radius: 6px; min-height: 3rem; cursor: pointer; transition: filter 0.28s ease, box-shadow 0.28s ease; } /* Hero primary: PIL-05 §5.1 + DOC-03 §4.1. body prefix beats global a{color}. */ body.page-edutower .btn-hero-primary { background: linear-gradient(145deg, var(--sdx-color-teal-deep) 0%, var(--page-depth) 100%); color: #ffffff; box-shadow: inset 0 0 0 2px rgba(255,255,255,0.80), 0 4px 20px rgba(47,92,104,0.45); } body.page-edutower .btn-hero-primary:hover { filter: brightness(1.08); box-shadow: inset 0 0 0 2px rgba(255,255,255,0.80), 0 8px 28px rgba(47,92,104,0.55); } /* Hero secondary: canonical glass per DOC-03 §4.2 */ body.page-edutower .btn-hero-secondary { background: rgba(255,255,255,0.18); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); color: #ffffff; border: 1.5px solid rgba(255,255,255,0.60); box-shadow: 0 2px 12px rgba(0,0,0,0.15); } /* 4) Typography */ .page-edutower .sdx-card-section h2 { font-family: var(--headline-font); font-size: 1.75rem; font-weight: 700; color: var(--fg); margin: 0 0 1.5rem; /* border-bottom owned by global.css v3.16.0 — var(--page-primary) pillar colour. MUST NOT override. */ } .page-edutower .sdx-card-section h3 { font-size: 1.25rem; color: var(--page-primary); 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); } /* Checkmark list */ .page-edutower .sdx-card-section > ul { list-style: none; padding: 0; margin: 0; } .page-edutower .sdx-card-section > ul > li { position: relative; padding-left: 2rem; margin-bottom: 1rem; } .page-edutower .sdx-card-section > ul > li::before { content: '\2713'; position: absolute; left: 0; color: var(--page-accent); font-weight: 700; font-size: 1.25rem; } /* 5) Sections: none — .sdx-card-section in global.css handles all section surfaces */ /* 6) Cards */ .page-edutower .card { border-left: 4px solid var(--page-primary); padding: 1.5rem; } .page-edutower .card h3 { color: var(--page-primary); } /* .cards (global class) used in How to Participate: 4 cards — strict 2×2. global.css auto-fit minmax(280px) resolves to 3+1 at desktop. Override required. */ .page-edutower .cards { grid-template-columns: repeat(2, 1fr); } .page-edutower .stream-cards { display: grid; grid-template-columns: repeat(2, 1fr); gap: 2rem; margin: 2rem 0; } .page-edutower .stream-card { background: var(--card); padding: 2rem; border-radius: 0.75rem; border-left: 6px solid var(--page-primary); transition: transform 0.22s ease, box-shadow 0.22s ease; box-shadow: var(--card-shadow); } .page-edutower .stream-card:hover { transform: translateY(-3px); box-shadow: var(--card-shadow-hover); } .page-edutower .stream-card.stream-community { border-left-color: var(--page-community); } .page-edutower .stream-badge { display: inline-block; background: rgba(from var(--page-primary) r g b / 0.14); color: var(--page-primary); padding: 0.2rem 0.75rem; border-radius: 4px; font-size: 0.75rem; font-weight: 600; text-transform: uppercase; letter-spacing: 0.04em; margin-bottom: 1rem; } .page-edutower .stream-card.stream-community .stream-badge { background: rgba(from var(--page-community) r g b / 0.14); color: var(--page-community); } .page-edutower .stream-card h3 { margin-top: 0; color: var(--fg); font-size: 1.5rem; } /* Module cards */ .page-edutower .modules { display: grid; gap: 2rem; margin: 2rem 0; } .page-edutower .module-card { background: var(--card); padding: 2rem; border-radius: 0.5rem; border: 2px solid var(--border); position: relative; box-shadow: var(--card-shadow); transition: transform 0.22s ease, box-shadow 0.22s ease; } .page-edutower .module-card:hover { transform: translateY(-3px); box-shadow: var(--card-shadow-hover); } .page-edutower .module-number { position: absolute; top: -0.75rem; left: 2rem; background: rgba(from var(--page-accent) r g b / 0.75); color: var(--page-primary); padding: 0.2rem 0.75rem; border-radius: 4px; font-size: 0.75rem; font-weight: 600; text-transform: uppercase; letter-spacing: 0.04em; } .page-edutower .module-card h3 { margin-top: 1rem; } .page-edutower .module-purpose { font-style: italic; color: var(--page-primary); margin: 0.5rem 0; } .page-edutower .module-assess { margin-top: 1rem; padding-top: 1rem; border-top: 1px dashed var(--border); color: var(--page-primary); font-weight: 500; } /* Feature cards */ .page-edutower .mamadex-features { display: grid; grid-template-columns: repeat(2, 1fr); gap: 1.5rem; margin: 2rem 0; } .page-edutower .feature-card { background: var(--sdx-color-edutower-cream); padding: 1.5rem; border-radius: 0.5rem; border: 1px solid var(--border); border-top: 3px solid var(--page-primary); box-shadow: var(--card-shadow); transition: transform 0.22s ease, box-shadow 0.22s ease; } .page-edutower .feature-card:hover { transform: translateY(-3px); box-shadow: var(--card-shadow-hover); } .page-edutower .feature-card h3 { margin-top: 0; color: var(--page-primary); font-size: 1.125rem; } /* Faculty cards */ .page-edutower .faculty-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 2rem; margin: 2rem 0; } .page-edutower .faculty-card { background: var(--card); padding: 2rem; border-radius: 0.5rem; border-left: 4px solid var(--page-primary); box-shadow: var(--card-shadow); transition: transform 0.22s ease, box-shadow 0.22s ease; } .page-edutower .faculty-card:hover { transform: translateY(-3px); box-shadow: var(--card-shadow-hover); } .page-edutower .faculty-card h3 { margin-top: 0; } .page-edutower .faculty-card .role { color: var(--page-primary); font-weight: 600; font-size: 0.9375rem; margin: 0.5rem 0 1rem; } /* Facility cards */ .page-edutower .facilities-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 1.5rem; margin: 2rem 0; } .page-edutower .facility-card { background: var(--card); padding: 1.5rem; border-radius: 0.5rem; border: 2px solid var(--border); box-shadow: var(--card-shadow); transition: transform 0.22s ease, box-shadow 0.22s ease; } .page-edutower .facility-card:hover { transform: translateY(-2px); box-shadow: var(--card-shadow-hover); } .page-edutower .facility-card h3 { margin-top: 0; color: var(--page-primary); font-size: 1.125rem; } /* ISO badges */ .page-edutower .iso-badges { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1rem; margin: 2rem 0; } .page-edutower .iso-badge { background: var(--page-primary); color: #ffffff; padding: 1.5rem 1rem; border-radius: 0.5rem; text-align: center; } .page-edutower .iso-badge-light { background: rgba(from var(--page-primary) r g b / 0.09); border: 2px solid var(--page-primary); padding: 1.5rem 1rem; border-radius: 0.5rem; text-align: center; } .page-edutower .iso-badge h4, .page-edutower .iso-badge-light h4 { margin: 0 0 0.5rem; font-size: 1.2rem; } .page-edutower .iso-badge h4 { color: #ffffff; } .page-edutower .iso-badge .muted { color: rgba(255,255,255,0.9); font-size: 0.875rem; margin: 0; } .page-edutower .iso-badge-light h4 { color: var(--page-depth); } .page-edutower .iso-badge-light p { font-size: 0.875rem; margin: 0; line-height: 1.4; } /* Stat cards */ .page-edutower .stats-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 1.5rem; margin: 2rem 0 3rem; } .page-edutower .stat-card { --stat-accent: var(--page-primary); --stat-rgb: 86 116 123; text-align: center; padding: 2.5rem 1.5rem; background: var(--card); border-radius: 0.75rem; border-top: 4px solid var(--stat-accent); box-shadow: 0 8px 20px rgb(var(--stat-rgb) / 0.08), 0 2px 4px rgb(var(--stat-rgb) / 0.04); transition: transform 0.22s ease, box-shadow 0.22s ease; position: relative; overflow: hidden; } .page-edutower .stat-card::before { content: ''; position: absolute; inset: 0; background: linear-gradient(135deg, rgb(var(--stat-rgb) / 0.05) 0%, rgb(var(--stat-rgb) / 0.02) 100%); pointer-events: none; } .page-edutower .stat-card:hover { transform: translateY(-3px); box-shadow: 0 12px 28px rgb(var(--stat-rgb) / 0.12); } .page-edutower .stat-card.stat-green { --stat-accent: var(--sdx-color-green-deep); --stat-rgb: 46 93 58; } .page-edutower .stat-card.stat-teal { --stat-accent: var(--page-primary); --stat-rgb: 86 116 123; } .page-edutower .stat-card.stat-purple { --stat-accent: var(--sdx-color-teal-deep); --stat-rgb: 47 92 104; background: var(--sdx-color-edutower-sand); } .page-edutower .stat-number { font-size: 3.5rem; font-weight: 700; color: var(--sdx-color-edutower-umber); line-height: 1; margin-bottom: 0.75rem; position: relative; z-index: 1; font-family: var(--headline-font); } .page-edutower .stat-label { font-size: 1rem; margin: 0; line-height: 1.4; position: relative; z-index: 1; font-weight: 500; } /* Callout boxes: DOC-03 §16 canonical. No gradient. No border-left accent. */ .page-edutower .note-box, .page-edutower .contact-box { background: rgba(120,113,108,0.08); border: 1px solid var(--border); padding: 1.5rem; margin: 1.5rem 0; border-radius: 0.5rem; } .page-edutower .contact-box strong { color: var(--page-primary); } .page-edutower .contact-box 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 .contact-box a:not([class]):hover { filter: brightness(0.85); } /* 7) Buttons and CTAs */ /* sdx-btn-primary: CTA band + standalone — all tokens, no bare hex */ .page-edutower .sdx-btn-primary { background: linear-gradient(145deg, var(--sdx-color-teal-deep) 0%, var(--page-depth) 100%); color: #ffffff; box-shadow: 0 4px 16px rgba(47,92,104,0.28); } /* Legacy button classes — all tokenised */ .page-edutower .btn-primary, .page-edutower .cta-btn, .page-edutower .btn-secondary-outline, .page-edutower .btn-trigger { display: inline-flex; align-items: center; justify-content: center; padding: 0.75rem 1.75rem; border-radius: var(--radius); text-decoration: none; font-family: var(--text-font); font-size: 0.9375rem; font-weight: 600; background: linear-gradient(145deg, var(--sdx-color-teal-deep) 0%, var(--page-depth) 100%); color: #ffffff; border: none; box-shadow: 0 4px 16px rgba(47,92,104,0.24); transition: filter 0.22s ease, box-shadow 0.22s ease; } .page-edutower .btn-primary:hover, .page-edutower .cta-btn:hover, .page-edutower .btn-secondary-outline:hover, .page-edutower .btn-trigger:hover { filter: brightness(1.08); box-shadow: 0 10px 40px rgba(47,92,104,0.32); } /* 8) Page modules */ .page-edutower .edutower-triggers .trigger-cards-compact { /* individual card shadows define boundary */ } .page-edutower .triggers-intro { text-align: center; max-width: 760px; margin: 0 auto 2rem; font-size: 1.0625rem; line-height: 1.6; } .page-edutower .trigger-cards-compact { display: grid; grid-template-columns: 1fr; gap: 1.75rem; margin-top: 2rem; } .page-edutower .trigger-card-edu { padding: 1.75rem; background: var(--card); border-radius: 0.75rem; box-shadow: var(--card-shadow); transition: transform 0.22s ease, box-shadow 0.22s ease; border: 1px solid var(--border); display: flex; flex-direction: column; } .page-edutower .trigger-card-edu:hover { transform: translateY(-3px); box-shadow: var(--card-shadow-hover); } .page-edutower .trigger-education { border-left: 4px solid var(--page-primary); } .page-edutower .trigger-badge-edu { display: inline-block; background: rgba(from var(--page-primary) r g b / 0.14); color: var(--page-primary); padding: 0.2rem 0.625rem; border-radius: 4px; font-size: 0.75rem; font-weight: 600; text-transform: uppercase; letter-spacing: 0.04em; margin-bottom: 1rem; } .page-edutower .trigger-card-edu h3 { font-size: 1.25rem; color: var(--fg); margin: 0 0 1rem; line-height: 1.3; } .page-edutower .trigger-details-edu { margin: 0; flex: 1; } .page-edutower .trigger-details-edu dt { font-weight: 600; color: var(--page-primary); margin: 1rem 0 0.5rem; font-size: 0.9375rem; } .page-edutower .trigger-details-edu dd { margin: 0 0 1rem; line-height: 1.7; font-size: var(--body); } .page-edutower .trigger-card-actions { padding-top: 1.5rem; border-top: 1px solid var(--border); } .page-edutower .section-bottom-cta { margin-top: 3rem; padding-top: 2rem; border-top: 2px solid var(--border); text-align: center; } .page-edutower .cta-helper { font-size: 1rem; margin: 0 0 1rem; font-weight: 500; } /* 9) Media queries */ @media (min-width: 900px) { .page-edutower .trigger-cards-compact { grid-template-columns: repeat(3, 1fr); } } @media (max-width: 968px) { .page-edutower .hero { padding: 4rem 2rem; } } @media (max-width: 768px) { .page-edutower .sdx-card-section { padding: 2rem 1.25rem; } .page-edutower .sdx-card-section h2 { font-size: 1.5rem; } .page-edutower .sdx-card-section h3 { font-size: 1.125rem; } .page-edutower .stream-cards, .page-edutower .facilities-grid, .page-edutower .faculty-grid { grid-template-columns: 1fr; } .page-edutower .cards { grid-template-columns: 1fr; } /* 4 cards → single column */ .page-edutower .mamadex-features { grid-template-columns: 1fr; } /* 4 cards → single column */ .page-edutower .stats-grid { grid-template-columns: repeat(2, 1fr); } /* 4 stats → 2×2 */ .page-edutower .stat-number { font-size: 2.5rem; } .page-edutower .iso-badges { grid-template-columns: repeat(2, 1fr); } } @media (max-width: 480px) { .page-edutower .hero-wrap, .page-edutower .hero { min-height: 480px; } .page-edutower .hero { padding: 3rem 1.25rem; } .page-edutower .hero-actions { flex-direction: column; width: 100%; } .page-edutower .btn-hero-primary { width: 100%; } } @media (prefers-reduced-motion: reduce) { * { animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; transition-duration: 0.01ms !important; } } /* 10) 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 .sdx-card-section h2 { color: var(--sdx-color-mama-amber); border-bottom-color: rgba(from var(--page-primary) r g b / 0.40); } [data-theme="dark"] .page-edutower .sdx-card-section h3 { color: var(--sdx-color-mama-amber); } [data-theme="dark"] .page-edutower .stream-card, [data-theme="dark"] .page-edutower .module-card, [data-theme="dark"] .page-edutower .facility-card, [data-theme="dark"] .page-edutower .faculty-card, [data-theme="dark"] .page-edutower .trigger-card-edu, [data-theme="dark"] .page-edutower .stat-card, [data-theme="dark"] .page-edutower .feature-card { background: var(--card); } [data-theme="dark"] .page-edutower .note-box, [data-theme="dark"] .page-edutower .contact-box { background: rgba(245,176,20,0.07); border-color: rgba(245,176,20,0.18); }