Legacy Page Reconciliation

The steps

1. Save a rollback. Copy the page's current HTML from CodeMirror into Project Pangea/experiments/<page>-before.html before changing anything.
2. Find. List every rule in the page's <style> block and every inline style="…" attribute. Also note any color, heading or surface class used on something that isn't what the class is for.
3. Map. For each item, find its global replacement in the table below or on the Extended Global CSS Examples page (catalog IDs). If nothing fits, mark it KEEP.
4. Swap. Change the markup to the global classes. Delete every page rule that is now replaced. Remove inline colors.
5. Trim what's kept. Each KEEP rule is scoped under the page's wrapper class (for example .sdla-about .sdla-belief-number), uses global variables (var(--sdla-blue)), never raw hex, and gets a one-line comment saying why it stays. Never style body, :root or bare tags like h2 or table.
6. Check. Run the checklist below.
7. Paste and verify. Paste into CodeMirror, save, and view the live page on desktop and phone width.
8. Log. Record the page in Asana (Project Pangaea › Page markup and content) as a PGA task: Where, What/why, Before/After, Rollback, Verified. Log any new global problem as its own task.

Mapping table

Patterns found so far. Add rows as new legacy pages turn up new patterns.

Rules that always apply

• Palette words are reserved for palette values. No new colors; if a legacy color has no match, pick the nearest palette color and note it.
• Light colors decorate, they are not text. Green, yellow and orange are for fills, bars, icons and underlines, with dark text on top.
• No white text on bright fills (blue, green, orange, yellow). Use charcoal.
• Heading classes go on headings only (h1–h4, .el-title).
• Don't fight global.css. If a page needs !important to override a global rule, say so in the comment; if more than one page needs the same override, log it as a global task.

Checklist before pasting

Prompt for an AI helper

This block is the complete recipe in a form AI helpers read well. Copy all of it, then paste the legacy page's HTML below it. Attach global.css if the helper can take files.

=== SDLA LEGACY PAGE RECONCILIATION — AI INSTRUCTIONS (v1.1, 2026-11-10) ===

ROLE
You are reconciling one legacy SDLA Joomla article onto the site's common CSS
(global.css v13+, YOOtheme Pro, UIkit 3.25). The article is edited as raw HTML
in CodeMirror. The site template already supplies html, head, body, main, the
header, the menu and the fonts.

GOAL
When done, the article's own style block holds only what global.css cannot do,
and every color, heading, card, list and table comes from a global class.

WORKFLOW (follow in order; do not skip the approval stop)
1. FIND: List every rule in the page's style block and every inline style="..."
   attribute. Also list any heading, color or surface class used on an element
   it is not meant for.
2. MAP: For each item give: legacy pattern | global replacement | notes.
   Use the MAPPING TABLE below. If nothing fits, mark it KEEP and say why.
3. FLAG: List every rule violation and every contrast failure you find
   (see RULES and CHECKLIST), with the element and the colors involved.
4. STOP. Show the mapping and flags as a table and WAIT for approval.
   Do not write revised HTML yet.
5. SWAP (after approval): change the markup to the global classes, delete
   every replaced page rule, remove inline colors.
6. TRIM: every KEEP rule must be scoped under the article's wrapper class
   (example: .sdla-about .sdla-belief-number), use global variables
   (var(--sdla-blue)), never raw hex, and carry a one-line comment saying
   why it stays.
7. RETURN the full revised article HTML in one code block, then a short
   list of visual changes the editor should expect (for example, white cards
   becoming pale tinted cards).
The human then saves a rollback copy, pastes, checks the live page on
desktop and phone, and logs it in Asana (Project Pangaea, PGA-### task).

MAPPING TABLE (legacy pattern -> replacement : notes)
- Page redefines palette variables (--sdla-blue: #6fb2d9 ...)
    -> delete; use global --sdla-* tokens : legacy values are near-misses,
       some are off-palette (red #f15a29)
- Page styles body, :root or bare tags (h2, table, code ...)
    -> delete : these leak into the site header and menu
- Extra html, head or main elements in the article
    -> delete; wrap content in article class="uk-article sdla-PAGENAME"
- Custom section title class (own font/size)
    -> sdla-heading-h2 + one heading color class : sdla-heading-charcoal is
       the safe default
- Card or box subheading
    -> sdla-heading-h3 (+ color class) : KG Blank Space Solid, weight 400
       by design
- White card with colored top border
    -> uk-card uk-card-body sdla-surface-COLOR sdla-accent-top : visual
       change, card becomes pale tinted
- Gray callout with colored left bar
    -> uk-card uk-card-body sdla-surface-COLOR sdla-accent-left
- uk-card-muted
    -> leave as is : aliased to the gray surface in v13
- Custom check-mark list (pseudo-element)
    -> ul.uk-list with span uk-icon="icon: check" aria-hidden="true" at the
       start of each item (catalog LST-CHECK)
- Custom numbered / bullet list
    -> uk-list uk-list-decimal / uk-list uk-list-bullet
- Custom padding on divider lists
    -> uk-list uk-list-divider
- Custom table styling
    -> uk-table uk-table-divider uk-table-small inside div.uk-overflow-auto
- "Subtle" links styled to look like plain text
    -> delete the rule; links show as normal links : accessibility fix
- Inline style="color: ..." on labels
    -> remove; plain strong : orange text fails contrast
- Heading color class on a non-heading (strong class="sdla-heading-orange")
    -> remove the class : green/yellow/orange classes add an underline
       (known issue PGA-040)
- Numbered circles, icons beside titles
    -> KEEP as scoped page CSS; lay out with uk-flex uk-flex-middle

GLOBAL CLASSES YOU MAY USE
Heading size:   sdla-heading-h2, sdla-heading-h3, sdla-display-heading
Heading color:  sdla-heading-COLOR (charcoal, navy, forest, plum, brick, slate,
                darkblue, blue, darkgreen, red, darkred, purple, darkpurple,
                darkeggplant, darkcyan, darksalmon; green/yellow/darkyellow/
                orange/darkorange render charcoal text with a colored underline)
Surfaces:       sdla-surface-COLOR + optional sdla-accent-top / sdla-accent-left
                (every palette color has a surface)
UIkit:          any standard UIkit 3.25 class or component
Do not invent classes. If unsure a class exists, check global.css or ask.

PALETTE (use var(--sdla-NAME); never raw hex)
Primary:   blue #70B2D9, darkblue #0092C7, green #ADD444, darkgreen #3DB432,
           orange #FDAD43, darkorange #FF7B00, red #E74C3C, darkred #D22B2B
Secondary: yellow #FFCF55, darkyellow #F1C40F, purple #AF7AC5,
           darkpurple #9B59B6, eggplant #A587CA, darkeggplant #7F5AB0,
           cyan #36CEDC, darkcyan #167A83, salmon #FE797B, darksalmon #B5484B
Grays:     lightgray #E8E9E9, palegray #D1D3D4, mediumgray #BABDBF,
           gray #808488, darkgray #666A6D, deepgray #4D5052,
           charcoal #333537, softblack #1C1D1E
Guide:     navy #164F7A, darknavy #234F66, forest #426B36, plum #76528F,
           brick #9F3A38, slate #59636B, darkslate #263746

RULES (always apply)
- Palette words are reserved for palette values. No new colors. If a legacy
  color has no match, use the nearest palette color and note it.
- Light colors decorate; they are never text. Green, yellow and orange are
  for fills, bars, icons and underlines, with dark text on top.
- No white text on bright fills (blue, green, orange, yellow). Use charcoal.
- Heading classes go on headings only (h1-h4, .el-title).
- Never style body, :root or bare tags.
- Don't fight global.css. If a KEEP rule needs !important to beat a global
  rule, say so in its comment.
- Keep all text content unchanged unless asked.

CHECKLIST (verify before returning HTML; report any item that fails)
[ ] No palette variables redefined; no body, :root or bare-tag rules
[ ] No raw hex in kept page CSS or inline styles
[ ] Every kept rule scoped to the article wrapper and commented
[ ] All text passes WCAG 2.1 AA (4.5:1 body text, 3:1 large text and UI)
[ ] Links look like links
[ ] Heading classes only on headings; one main title, then h2, h3 in order
[ ] Decorative icons have aria-hidden="true"
[ ] No fixed widths that would break phone layouts

=== LEGACY PAGE HTML FOLLOWS ===