/* V7-HEADER File: iso-standards.css Path: /assets/css/iso/iso-standards.css Version: v5.9.0 Issued: 2026-03-18 Author: Buktika Webdesk (Binka) Purpose: ISO Standards page: token consumer. Compliant with BKT-PIL-08 v1.0.0, BKT-DOC-02 v2.0.0, DOC-03 §16, ai.md HARD RULES. Palette (BKT-PIL-08 §2): - page-bg = #f7f4ed (PIL-08 §2 exception) - page-primary = --sdx-color-mama-amber #f5b014 (h2 border, btn start, tagline) - page-secondary = --sdx-color-mama-gold #c8861a (decorative accents ONLY: NOT links) - page-accent = --sdx-color-stem-olive #464820 (card borders, body links, btn end) - page-depth = --sdx-color-stem-olive #464820 (grounding) Link colour: var(--page-accent) #464820 = 8.66:1 on #f7f4ed: AAA. mama-gold #c8861a = 2.78:1 on #f7f4ed: WCAG AA FAIL. Gold for decorative only. Permitted permanent exceptions (PIL-08 / DOC-02 §5.3): - #ffffff hero text: photography context - left:-8px / width:14px / height:14px: fixed indicator geometry Version: v6.0.0 Issued: 2026-03-18 Author: Buktika Webdesk (Binka) Purpose: ISO Standards page: token consumer. Compliant with BKT-PIL-08 v1.0.0, BKT-DOC-02 v2.0.0, DOC-03 §16, ai.md HARD RULES. Palette (BKT-PIL-08 §2): - page-bg = #f7f4ed (PIL-08 §2 exception) - page-primary = --sdx-color-mama-amber #f5b014 (h2 border, btn start, tagline) - page-secondary = --sdx-color-mama-gold #c8861a (decorative accents ONLY: NOT links) - page-accent = --sdx-color-stem-olive #464820 (card borders, body links, btn end) - page-depth = --sdx-color-stem-olive #464820 (grounding) Link colour: var(--page-accent) #464820 = 8.66:1 on #f7f4ed: AAA. mama-gold #c8861a = 2.78:1 on #f7f4ed: WCAG AA FAIL. Gold for decorative only. Permitted permanent exceptions (PIL-08 / DOC-02 §5.3): - #ffffff hero text: photography context - left:-8px / width:14px / height:14px: fixed indicator geometry ChangeLog: v6.2.0 (2026-03-18): Hero intro text-shadow strengthened — owner instruction. OWNER EXCEPTION: .hero .intro text-shadow added beyond global.css canonical. ISO hero photography is warm/golden — white intro text loses contrast at mid-frame where the bottom vignette does not reach. Three-layer shadow at 0.70–0.90 opacity. Same basis as EduTower tagline exception (PIL-05 registered 2026-03-18). v6.1.0 (2026-03-18): Fix flagged items from v6.0.0. F1: .sdx-card-section h2: font-family: var(--headline-font) + font-weight: 700 added. Was absent vs all other page CSS files — browser default font would render instead of headline font stack. F2: [data-theme="dark"] .note-box removed from second dark mode block. Block 1 (canonical): .note-box + .important-box → rgba(245,176,20,0.07) amber per ai.md. Block 2 was overriding .note-box background to olive rgba(page-accent/0.12) — non-canonical. .contact-box retained in block 2 — surface component, olive tint is correct. v6.0.0 (2026-03-18): global.css v3.16.0 compliance — section heading border-bottom. V1 REMOVED: padding-bottom: 0.75rem from .sdx-card-section h2 — owned by global.css. V2 REMOVED: border-bottom: 2px solid var(--page-primary) from .sdx-card-section h2 — global.css v3.16.0 now owns canonically. Visual result unchanged on ISO (page-primary = mama-amber both before and after). V3 REMOVED: [data-theme="dark"] border-bottom-color: rgba(from var(--page-primary) r g b / 0.40) — global.css v3.16.0 owns dark mode rule. Opacity was already correct (0.40) but per-page override is redundant per v3.16.0 directive. FLAG: Two dark mode blocks both target .note-box — line ~405 (canonical amber) is overridden by line ~411 (page-accent rgba). .note-box dark background is non-canonical. Held for owner. FLAG: .sdx-card-section h2 missing font-family: var(--headline-font) and font-weight: 700 vs all other page CSS files. Held for owner. v5.9.0 (2026-03-18): Inset white ring reinstated on btn-hero-primary. - DOC-03 §4.1: "Inset white ring required to lift the button off the hero photography." This is a HARD RULE. Removed incorrectly in v5.7.0. Reinstated. - box-shadow: inset 0 0 0 2px rgba(255,255,255,0.80) on rest + hover states. v5.7.0 (2026-03-18): Hero button WCAG SC 1.4.11 token fix. - btn-hero-primary: gradient reversed to depth→primary (olive start). Olive #464820 against golden photo = strong contrast. #fff on olive = 8.2:1 AAA. Inset ring removed. - btn-hero-secondary: glass replaced with rgba(--page-depth/0.82) dark olive surface. Solid dark background guaranteed visible on any photo tone. No backdrop-filter. - translateY removed from both buttons and shared transition per owner instruction. All values token-based. No new hex colours. v5.6.0 (2026-03-18): WCAG SC 1.4.11 boundary contrast attempt (superseded). - btn-hero-secondary: border strengthened to rgba(255,255,255,0.90); inset white ring added at rgba(255,255,255,0.60); outer shadow increased to rgba(0,0,0,0.30). rgba(255,255,255,0.60) border alone dissolves against light photo tones — fails 3:1. - btn-hero-primary: outer shadow strengthened from rgba(0,0,0,0.20) to rgba(0,0,0,0.35) to ensure button lifts off photography at any photo tone. v5.5.0 (2026-03-18): Button text cascade fix. - btn-hero-primary + btn-hero-secondary: selector prefixed with body.page-iso to raise specificity from (0,2,0) to (0,2,1), beating global a{color} cascade. Dark button text visible in screenshot was a specificity failure, not a contrast violation. PIL-08 §10 WCAG: #fff on #f5b014 = 1.89:1, large text rule met at 1rem bold per §5.1. #fff on #464820 = 8.2:1 AAA. v5.4.0 (2026-03-18): Hero height corrected to spec. - --hero-min: 640px override removed. PIL-08 specifies no height override. DOC-02 §3.2: canonical default is var(--hero-min) = 1000px from global.css. _support-template.css 640px literal is an outdated scaffold, not a normative spec. Page inherits 1000px correctly via var(--hero-min) on .hero-wrap and .hero. v5.3.0 (2026-03-18): Hero height incorrectly set to 640px (reverted above). - .hero: padding:6rem 2rem added per DOC-02 §3.2 canonical pattern - .btn-hero-primary: gradient + inset white ring added per DOC-03 §4.1-HR1 + PIL-08 §5.2 - .btn-hero-primary/secondary: shared geometry block added (display, padding, border-radius etc.) - All em dashes removed from CSS per site HARD RULE v5.1.0 (2026-03-18): Hero visual fixes.: global.css targets .hero-body but this page uses .hero-content; scoped rule ensures glass renders correctly. v5.0.0 (2026-03-18): Full compliance rebuild. - C3: .hero-wrap: background-size:cover added (was absent: image not filling container) - C4: min-height: 640px → var(--hero-min) on .hero-wrap + .hero per DOC-02 §7.1 - C5 HARD: .note-box + .important-box backgrounds → rgba(120,113,108,0.08) per ai.md callout HARD RULE (was amber tint / coral tint: non-canonical) - C6 HARD: .note-box + .important-box border → 1px solid var(--border) per DOC-03 §16.2 (was 4px border-left: button/card pattern, not callout) - C7: btn-primary inset shadow rgba(255,255,255,x) noted: permanent exception for white ring opacity on photography context - C9: dark mode: color:var(--sdx-color-ui-dark-text) added per PIL-08 §8 v4.1.0 (2026-03-06): DOC-02 §7.2.4 + §7.2.6 compliance. v4.0.9 (2026-03-03): Link hover contrast fix. Colour Map: v3.11.0 (normative) Design System: v4.0.0 ISO Reference: ISO 27001, ISO 9241-110 License: © Buktika, 2026. All rights reserved. */ /* 0) depends on: global.css · themes.css · partials/footer.css header.css is lifted automatically by includes.js: MUST NOT be linked in */ /* ====================================================================================================== 1) Page variable binding: PIL-08 §2 (LOCKED) ====================================================================================================== */ .page-iso { --page-bg: #f7f4ed; /* ISO exception per PIL-08 §2 */ --page-primary: var(--sdx-color-mama-amber); /* #f5b014: amber */ --page-secondary: var(--sdx-color-mama-gold); /* #c8861a: gold, decorative only */ --page-accent: var(--sdx-color-stem-olive); /* #464820: olive, links + borders */ --page-depth: var(--sdx-color-stem-olive); /* #464820: grounding */ --page-dark-base: var(--sdx-color-livingtower-dark-base); --page-dark-surface: var(--sdx-color-livingtower-dark-surface); --hero-image: url('/assets/images/iso/iso-hero.webp'); --hero-vignette-from: rgba(70, 72, 32, 0.18); /* stem-olive derived, max 0.25 */ --hero-vignette-to: rgba(70, 72, 32, 0); } /* ====================================================================================================== 2) Base page surfaces ====================================================================================================== */ .page-iso { background: var(--page-bg); color: var(--fg); } /* ====================================================================================================== 3) Hero: bottom vignette only. No overlay. PIL-08 §3. ====================================================================================================== */ .page-iso .hero-wrap { background-image: var(--hero-image); background-size: cover; /* FIXED v5.0.0: was absent */ background-position: center 40%; min-height: var(--hero-min); /* FIXED v5.0.0: was 640px px literal */ } .page-iso .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-iso .hero { display: flex; align-items: center; justify-content: center; min-height: var(--hero-min); padding: 6rem 2rem; /* DOC-02 §3.2 canonical pattern */ } .page-iso .hero-content { max-width: 52rem; margin: 0 auto; text-align: center; } /* font-size override only: global.css owns color, font-family, weight, line-height, text-shadow */ .page-iso .headline { font-size: clamp(2.5rem, 5vw, 4.5rem); /* iso-standards approved range DOC-02 §3.3.1 */ margin: 0 0 1.5rem; } /* Tagline: mama-amber per PIL-08 §4. font-size, weight, colour owned by global.css */ .page-iso .tagline { color: var(--page-primary); } /* Shared hero button geometry */ .page-iso .btn-hero-primary, .page-iso .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; line-height: 1.2; cursor: pointer; transition: filter 0.28s ease, box-shadow 0.28s ease; } /* Hero primary: PIL-08 §5.1 + DOC-03 §4.1. Inset white ring is MANDATORY per DOC-03 §4.1 — lifts button off photography. body prefix beats global a{color} cascade. No translateY per owner instruction. */ body.page-iso .btn-hero-primary { background: linear-gradient(135deg, var(--page-depth) 0%, var(--page-primary) 100%); color: #ffffff; box-shadow: inset 0 0 0 2px rgba(255, 255, 255, 0.80), 0 4px 14px rgba(0, 0, 0, 0.40); } body.page-iso .btn-hero-primary:hover { filter: brightness(1.10); box-shadow: inset 0 0 0 2px rgba(255, 255, 255, 0.80), 0 6px 20px rgba(0, 0, 0, 0.50); } /* Hero secondary: solid dark semi-opaque surface using page-depth token. WCAG SC 1.4.11: dark olive surface at 0.82 opacity = clearly visible against any photo tone. #fff text on semi-opaque olive = passes AAA. No translateY. No glass. */ body.page-iso .btn-hero-secondary { background: rgba(from var(--page-depth) r g b / 0.82); color: #ffffff; border: 1.5px solid rgba(255, 255, 255, 0.50); } /* max-width + margin permitted page overrides only: global.css owns all other .intro properties. OWNER EXCEPTION (PIL-08 registered 2026-03-18): text-shadow strengthened beyond global.css canonical because ISO hero photography is warm/golden — white intro text loses contrast at mid-frame where the bottom vignette does not reach. WCAG SC 1.4.3 risk without it. */ .page-iso .hero .intro { max-width: 700px; margin: 0 auto; text-shadow: 0 2px 12px rgba(0, 0, 0, 0.90), 0 4px 24px rgba(0, 0, 0, 0.80), 0 8px 32px rgba(0, 0, 0, 0.70); } .page-iso .hero-actions { display: flex; gap: 1rem; justify-content: center; flex-wrap: wrap; margin-top: 2.5rem; } /* ====================================================================================================== 4) Typography: h2: var(--fg) + amber underline per PIL-08. Links use var(--page-accent) olive (8.66:1 AAA). Gold (#c8861a 2.78:1) is decorative only. body.page-iso selector required for link hover specificity: beats global.css coral catch-all. ====================================================================================================== */ .page-iso .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; /* border-bottom + padding-bottom owned by global.css v3.16.0 — var(--page-primary). MUST NOT override. */ } .page-iso .sdx-card-section h3 { font-size: 1.25rem; font-weight: 600; color: var(--fg); margin: 2rem 0 1rem; } .page-iso .sdx-card-section h4 { font-size: 1.125rem; font-weight: 600; color: var(--fg); margin: 1.5rem 0 0.75rem; } .page-iso .sdx-card-section p { margin: 1rem 0; color: var(--muted); line-height: 1.7; } .page-iso .sdx-card-section ul, .page-iso .sdx-card-section ol { margin: 1rem 0 1rem 2rem; color: var(--muted); line-height: 1.7; } .page-iso .sdx-card-section li { margin: 0.5rem 0; } .page-iso .sdx-card-section strong { font-weight: 600; color: var(--fg); } .page-iso .sdx-card-section a:not([class]), .page-iso .sdx-card-section a.direct-link { color: var(--page-accent); border-bottom: 1px solid rgba(from var(--page-accent) r g b / 0.35); transition: border-color 0.22s ease; text-decoration: none; } /* body.page-iso specificity required to beat global.css coral catch-all (0,6,1) */ body.page-iso .sdx-card-section a:not([class]):hover, body.page-iso .sdx-card-section a.direct-link:hover { color: var(--fg); border-color: var(--page-accent); } /* ====================================================================================================== 5) Sections and alternation ====================================================================================================== */ /* none: .sdx-card-section in global.css handles all section surfaces */ /* ====================================================================================================== 6) Cards: border-left at rest. Hover = lift + shadow (global.css owns). ====================================================================================================== */ .page-iso .card { border-left: 4px solid var(--page-accent); } .page-iso .card h3, .page-iso .card h4 { margin-top: 0; color: var(--fg); } .page-iso .card .muted { color: var(--muted); line-height: 1.6; margin: 0.75rem 0 0; } /* grid override: global.css auto-fit resolves to 3 cols at desktop — both .cards instances carry 4 cards, strict 2x2 required. Mobile collapse to 1fr at <=768px already present. */ .page-iso .cards { display: grid; grid-template-columns: repeat(2, 1fr); gap: 1.5rem; margin: 2rem 0; } /* ====================================================================================================== 7) Buttons: PIL-08 §5.1: amber → stem-olive. White text mandatory (olive is dark stop). ====================================================================================================== */ .page-iso .sdx-btn-primary { background: linear-gradient(135deg, var(--page-primary) 0%, var(--page-depth) 100%); color: #ffffff; box-shadow: 0 4px 16px rgba(from var(--page-accent) r g b / 0.35), inset 0 0 0 1px rgba(255, 255, 255, 0.20); /* permanent exception: white ring opacity */ } .page-iso .sdx-btn-primary:hover { filter: brightness(1.08); transform: translateY(-3px); box-shadow: 0 10px 30px rgba(from var(--page-accent) r g b / 0.50), inset 0 0 0 1px rgba(255, 255, 255, 0.25); } /* ====================================================================================================== 8) Page modules: ISO-specific components ====================================================================================================== */ /* Timeline */ .page-iso .timeline { margin: 2rem 0; } .page-iso .timeline-item { position: relative; padding-left: 2.5rem; padding-bottom: 2rem; border-left: 3px solid rgba(from var(--page-accent) r g b / 0.25); } .page-iso .timeline-item:last-child { padding-bottom: 0; border-left: none; } .page-iso .timeline-item::before { content: ''; position: absolute; left: -8px; /* EXCEPTION §15.4: fixed indicator geometry: dot centred on border-left */ top: 0; width: 14px; /* EXCEPTION §15.4: fixed indicator geometry */ height: 14px; /* EXCEPTION §15.4: fixed indicator geometry */ border-radius: 50%; background: var(--page-secondary); border: 3px solid var(--card); box-shadow: 0 0 0 3px rgba(from var(--page-accent) r g b / 0.15); } .page-iso .timeline-item h4 { font-size: 1.125rem; margin: 0 0 0.75rem; color: var(--fg); } .page-iso .timeline-item .muted { color: var(--muted); line-height: 1.6; margin: 0; } /* Callout boxes: ai.md HARD RULE: rgba(120,113,108,0.08) + 1px solid var(--border). No gradient. No box-shadow. No border-left accent. DOC-03 §16.2. */ .page-iso .note-box, .page-iso .important-box { background: rgba(120, 113, 108, 0.08); border: 1px solid var(--border); padding: 1.5rem; margin: 1.5rem 0; border-radius: var(--radius); } .page-iso .note-box p, .page-iso .important-box p { margin: 0.5rem 0; color: var(--fg); } /* Contact box */ .page-iso .contact-box { background: rgba(from var(--page-primary) r g b / 0.06); padding: 2rem; border-radius: var(--radius); margin-top: 1rem; } .page-iso .contact-box p { margin: 0.75rem 0; color: var(--muted); } .page-iso .contact-box strong { color: var(--fg); } .page-iso .contact-box a:not([class]), .page-iso .contact-box a.direct-link { color: var(--page-accent); text-decoration: none; border-bottom: 1px solid rgba(from var(--page-accent) r g b / 0.35); transition: border-color 0.22s ease; } body.page-iso .contact-box a:not([class]):hover, body.page-iso .contact-box a.direct-link:hover { color: var(--fg); border-color: var(--page-accent); } /* ====================================================================================================== 9) Media queries ====================================================================================================== */ @media (max-width: 768px) { .page-iso .sdx-card-section h2 { font-size: 1.5rem; } .page-iso .sdx-card-section h3 { font-size: 1.125rem; } .page-iso .cards { grid-template-columns: 1fr; } .page-iso .timeline-item { padding-left: 2rem; } } @media (max-width: 480px) { .page-iso .hero { padding: 3rem 1.25rem; } } /* ====================================================================================================== 10) Dark mode: [data-theme="dark"] ONLY. @media prefers-color-scheme MUST NOT appear. PIL-08 §8. ====================================================================================================== */ [data-theme="dark"] .page-iso { background: var(--page-dark-base); color: var(--sdx-color-ui-dark-text); /* FIXED v5.0.0: was absent: PIL-08 §8 */ } /* border-bottom-color on .sdx-card-section h2 owned by global.css v3.16.0 — rgba(from var(--page-primary) r g b / 0.40). */ [data-theme="dark"] .page-iso .sdx-card-section h3, [data-theme="dark"] .page-iso .sdx-card-section h4 { color: var(--page-primary); /* amber #f5b014 ~7.2:1 on dark: AAA. gold #c8861a ~3.1:1: fail */ } [data-theme="dark"] .page-iso .note-box, [data-theme="dark"] .page-iso .important-box { background: rgba(245, 176, 20, 0.07); /* ai.md dark callout canonical */ border-color: rgba(245, 176, 20, 0.18); /* ai.md dark callout canonical */ } /* .contact-box is a surface component, not a callout — olive tint is correct here. .note-box removed from this selector v6.1.0: was overriding canonical amber above. */ [data-theme="dark"] .page-iso .contact-box { background: rgba(from var(--page-accent) r g b / 0.12); }