CSS Phase C sprint C2: de-obfuscate the shared layer - 17 semantic re-keys, last hash-named file retired

docs/projects/2509-css-migration/2026-07-12-css-maintainability-redesign.md

@@ -147,7 +147,7 @@ parity. Measured against the success criteria above, the goal is NOT yet met:
 | # | Criterion | Status 2026-07-18 (tree at 1df33334) |
 |---|-----------|--------------------------------------|
 | 1 | FL files 16 → 0 | ✅ done (PR #365) |
-| 2 | No obfuscated artifacts | ❌ ~3,700 `.fl-node-*` rules moved INTO `pages/*.css` by the delta ports (homepage 1,038 · careers 583 · services 492 · clients 366 · about-us 364 · single-service 350 · single-use-cases 329 · use-cases 147 · single-career 67); 604 `fl-node/fl-row/fl-col` refs across 14 templates; `skin-65eda28877e04.css` still hash-named; `critical/fl-*` trio + `foundations/fl-builder-common-base.css` kept alive only by the fl markup |
+| 2 | No obfuscated artifacts | ❌ ~3,700 `.fl-node-*` rules moved INTO `pages/*.css` by the delta ports (homepage 1,038 · careers 583 · services 492 · clients 366 · about-us 364 · single-service 350 · single-use-cases 329 · use-cases 147 · single-career 67); 604 `fl-node/fl-row/fl-col` refs across 14 templates; `legacy-theme-skin.css` still hash-named; `critical/fl-*` trio + `foundations/fl-builder-common-base.css` kept alive only by the fl markup |
 | 3 | No duplication in hand layer | ❌ 55–70% byte-identical lines between sibling page files (clients↔services 841/1,463 · single-service↔services 851/1,455 · use-cases↔single-use-cases 832/1,176) — shared-partial node rules copied into every consumer; `critical/*.css` files each share ~250+ identical lines with their page file |
 | 4 | Safe-edit under a minute | ✅ map + suites; per-file "affects pages" headers still to add (folded into C1/C2) |
 | 5 | Evidence rule | ✅ standing (compiled+gzip, never source lines) |
@@ -169,7 +169,7 @@ gated and revertable.
 - **C2 — de-obfuscate the shared layer** (criterion 2 start). Re-key the shared
   partials' fl-node ids to semantic classes (template + component file in the
   same commit, one node per commit); rename the hash-named skin file and
-  `dynamic-404-590.css`; land the deferred 586.css:823 cascade hardening.
+  `dynamic-404.css`; land the deferred 586.css:823 cascade hardening.
 - **C3 — page re-keying pilots** (criterion 2, easiest pages first). R3c alias
   technique: rename `.fl-node-xyz` → meaning-carrying class in page template +
   page CSS, one node-cluster per commit, ZERO baseline changes. Pilots:

docs/projects/2509-css-migration/TASK-TRACKER.md

@@ -461,7 +461,7 @@ follow_ups:
 
 ## 📅 PHASE C (CURRENT PLAN): Post-burn-down cleanup — sprints C1–C3
 
-**Phase Status**: 🔲 Not started (planned 2026-07-18)
+**Phase Status**: 🔄 C1 ✅ (PR #371, merged) · C2 ✅ (PR pending) · C3 next
 **Source**: Spec §"Phase C — post-burn-down cleanup" (revision 2026-07-18) —
 read it FIRST; it defines the gate stack, the preflight rule, the
 dedup-trap warning, and the non-goals (no DOM restructuring, no rule-content
@@ -579,6 +579,19 @@ estimated_commits: ~18-22 (2 preflight, 7+~5+3 swaps, docs)
 
 ### Sprint C2 — de-obfuscate the shared layer (criterion 2 start)
 
+**✅ SHIPPED 2026-07-19** (branch css-migration/c2-deobfuscate-shared, 21 commits):
+C2.1 all 10 testimonial nodes -> testimonials-* (incl. purge-safelist
+companion: /^testimonials-/ + /^cta-banner/ greedy entries replace the
+accidental /^fl-node/ shield for runtime pp-* classes); C2.2 all 7 CTA
+nodes -> cta-banner-* (swept across the partial + 6 inline template
+copies); C2.3 skin -> legacy-theme-skin.css (NAME AWAITING PAUL);
+C2.4 dynamic-404.css; C2.5 586.css masked-background deletion;
+C2.6 safe-edit headers. Gate held: every re-key byte-identical after
+guarded reverse substitution; renames fingerprint-identical.
+FOLLOW-UP for Paul: .jt-reviews-box swiper-arrow design has been
+silently purged in production (runtime classes, no shield) - restoring
+it is an intentional visual change needing a design decision.
+
 **Branch**: `css-migration/c2-deobfuscate-shared`
 **Depends on**: C1 merged (re-key each shared block once, not 7×).
 **Deliverable**: shared partials use semantic classes; zero hash-named CSS
@@ -597,15 +610,15 @@ tasks:
   - [ ] C2.2 Re-key cta partial — same protocol, ≈7 commits
         (cta-banner, cta-banner-heading, cta-banner-button, …) in
         partials/page/cta.html + components/cta-banner.css.
-  - [ ] C2.3 Rename skin-65eda28877e04.css → legacy-theme-skin.css (last
+  - [ ] C2.3 Rename legacy-theme-skin.css → legacy-theme-skin.css (last
         hash-named file; criterion 2). Enumerate ALL refs first:
-        `grep -rln 'skin-65eda28877e04' themes/ config/ | sort` (12+ template
+        `grep -rln 'legacy-theme-skin.css' themes/ config/ | sort` (12+ template
         slices at last count). git mv + sed all refs in ONE commit; file
         content untouched. Gate: every bundle's rule content identical
         (fingerprints change — concat input renamed — that is the ONLY
         expected diff). Name pre-approved? NO — flag in PR for Paul; rename
         is one-commit revertable if he prefers another name.
-  - [ ] C2.4 Rename dynamic-404-590.css → dynamic-404.css (node-id 590 is
+  - [ ] C2.4 Rename dynamic-404.css → dynamic-404.css (node-id 590 is
         retired). Refs: themes/beaver/layouts/404.html +
         partials/assets/homepage-css-resources.html. One commit, same gate
         as C2.3.
@@ -707,7 +720,7 @@ Authoritative table: css-bundle-ownership-map.md
 ```
 fl-node rules in pages/*.css:   ~3,700  (target: 0 — sprints C2/C3/C4)
 fl-* refs in templates:            604  (target: 0)
-Hash-named CSS files:                1  (skin-65eda28877e04.css; target: 0 — C2.3)
+Hash-named CSS files:                1  (legacy-theme-skin.css; target: 0 — C2.3)
 Dup lines between sibling pages: 55-70% (target: ~0 — C1)
 Re-measure commands:
   for f in themes/beaver/assets/css/pages/*.css; do grep -c 'fl-node-' "$f"; done
@@ -754,7 +767,7 @@ fcp_metrics:
   in the hand layer) are NOT met — the delta ports moved ~3,700 fl-node rules
   into pages/*.css, 604 fl-* refs remain in 14 templates, 55–70% of lines are
   byte-identical between sibling page files (shared-partial copies), and
-  skin-65eda28877e04.css is still hash-named.
+  legacy-theme-skin.css is still hash-named.
 - **Shipped**: spec revision (§"Phase C — post-burn-down cleanup": phase
   structure C1→C4, gate stack, preflight rule, non-goals) + this tracker's
   PHASE C section with agent-executable micro-commit task lists for sprints
@@ -1043,7 +1056,7 @@ further whole-file merges found.
 - **Landed**: orphaned use-cases-critical.css deleted (265 lines); 8 invalid
   mid-file @charset removed; css-variables foundation wired into the 4
   bundles that lacked it (blog-single, taxonomy list, not_found, course-single)
-- **ROLLED BACK**: skin-65eda28877e04.css font-stack extraction (6 stacks).
+- **ROLLED BACK**: legacy-theme-skin.css font-stack extraction (6 stacks).
   Root cause: postcss-delete-duplicate-css (production builds only) deletes
   the later of two byte-identical declarations; converting skin's body
   font-family to var() made it duplicate an earlier critical-CSS declaration,

docs/projects/2509-css-migration/css-bundle-ownership-map.md

@@ -33,7 +33,7 @@ zero FL-Builder export files remain in any slice.
 | contact-us | `page/contact-us.html` (partial `contact-us-css-resources.html`) | pages/contact-us.css | 18.9K → 17.4K | migrated (R2) |
 | course-list | `layouts/course/list.html` (repo root, NOT in theme) | pages/course-list.css | 17.6K → 14.6K² | migrated (R1) |
 | privacy-policy | `page/single.html` (generic pages) | pages/simple-page.css | 17.1K → 14.6K | migrated (R1) |
-| not_found | `404.html` | — (404.css, dynamic-404-590.css) | 16.2K → 16.2K | no-FL |
+| not_found | `404.html` | — (404.css, dynamic-404.css) | 16.2K → 16.2K | no-FL |
 | pagination | `list.html` (second bundle) | — (pagination.css only) | 0.2K → 0.2K | no-FL |
 
 ¹ careers was a byte-identical verbatim move (3086-layout2 had zero dead
@@ -48,7 +48,7 @@ site-wide). Not FL-affected.
 
 Shared non-FL slice members loaded by most bundles: `critical/base.css` (pulls
 the critical/fl-* trio), `dynamic-icons.css`, `586.css`, `vendors/base-4.min.css`,
-`style.css`, `skin-65eda28877e04.css`, `footer.css`, plus per-page extras
+`style.css`, `legacy-theme-skin.css`, `footer.css`, plus per-page extras
 (`technologies.css`, `single-post.css`, `use-cases-dynamic.css`, `homepage.css`,
 `companies.css`, `careers.css`, `404.css`, `pagination.css`,
 `component-bundle.css`, `theme-main.css`).

docs/projects/2509-css-migration/css-loading-order-analysis.md

@@ -102,7 +102,7 @@ This analysis maps the complete CSS loading architecture across all Hugo templat
 5. css/homepage.css                           # Homepage main styles
 6. css/dynamic-404-590.css                    # Dynamic FL-builder styles (template-generated)
 7. css/590-layout.css                         # FL-builder layout (590 = homepage post ID)
-8. css/skin-65eda28877e04.css                # Theme skin
+8. css/legacy-theme-skin.css                # Theme skin
 9. css/style.css                              # General styles
 10. css/dynamic-icons.css                      # Dynamic icon styles (template-generated)
 11. css/586.css                                # Additional FL-builder module styles
@@ -123,7 +123,7 @@ This analysis maps the complete CSS loading architecture across all Hugo templat
 ```yaml
 1. css/critical/base.css                      # Critical global styles
 2. css/701-layout.css                         # FL-builder layout (701 = about page ID)
-3. css/skin-65eda28877e04.css                # Theme skin
+3. css/legacy-theme-skin.css                # Theme skin
 4. css/dynamic-icons.css                      # Dynamic icon styles
 5. css/586.css                                # FL-builder module styles
 6. css/bf72bba397177a0376baed325bffdc75-layout-bundle.css  # Shared layout bundle
@@ -145,7 +145,7 @@ This analysis maps the complete CSS loading architecture across all Hugo templat
 5. css/586.css                                # FL-builder module styles
 6. css/vendors/base-4.min.css                 # ⚠️ VENDOR DEPENDENCY: Foundation framework
 7. css/style.css                              # General styles
-8. css/skin-65eda28877e04.css                # Theme skin
+8. css/legacy-theme-skin.css                # Theme skin
 9. css/technologies.css                       # Technologies section
 10. css/footer.css                             # Footer styles
 11. css/use-cases-dynamic.css                  # Use cases dynamic styles
@@ -183,7 +183,7 @@ This analysis maps the complete CSS loading architecture across all Hugo templat
 4. css/vendors/base-4.min.css                 # ⚠️ VENDOR DEPENDENCY: Foundation framework
 5. css/3114-layout.css                        # FL-builder layout (3114 = blog template ID)
 6. css/bf72bba397177a0376baed325bffdc75-layout-bundle.css  # Shared layout bundle
-7. css/skin-65eda28877e04.css                # Theme skin
+7. css/legacy-theme-skin.css                # Theme skin
 8. css/single-post.css                        # Single post styles
 9. css/footer.css                             # Footer styles
 ```
@@ -202,7 +202,7 @@ This analysis maps the complete CSS loading architecture across all Hugo templat
 5. css/homepage.css                           # Homepage styles (form reuse)
 6. css/vendors/base-4.min.css                 # ⚠️ VENDOR DEPENDENCY: Foundation framework
 7. css/style.css                              # General styles
-8. css/skin-65eda28877e04.css                # Theme skin
+8. css/legacy-theme-skin.css                # Theme skin
 9. css/footer.css                             # Footer styles
 ```
 
@@ -355,14 +355,14 @@ fl-shape-dividers.css:   # FL-builder shape dividers
 
 ```yaml
 style.css:               # General site styles (typography, utilities, etc.)
-skin-65eda28877e04.css: # Theme skin (colors, spacing, FL-builder theme)
+legacy-theme-skin.css: # Theme skin (colors, spacing, FL-builder theme)
 footer.css:             # Footer component styles
 586.css:                # FL-builder module styles (ID 586)
 ```
 
 **Loading Pattern**:
 - `style.css` loads mid-bundle (after layouts, before skin)
-- `skin-65eda28877e04.css` loads near end (theme overrides)
+- `legacy-theme-skin.css` loads near end (theme overrides)
 - `footer.css` loads LAST (footer appears last in DOM)
 
 ### 8.2 Component-Specific Global Files
@@ -418,7 +418,7 @@ homepage-layout.css:   # Homepage layout grid
 **Order 4: Theme & Overrides**
 ```yaml
 10. css/style.css                              # General site styles
-11. css/skin-65eda28877e04.css                # Theme skin (colors, spacing)
+11. css/legacy-theme-skin.css                # Theme skin (colors, spacing)
 ```
 
 **Rationale**: Theme overrides component defaults
@@ -460,7 +460,7 @@ homepage-layout.css:   # Homepage layout grid
 
 **Extract LAST** (Highest Cascade Risk):
 1. 🚨 `css/style.css` → Complex dependencies, audit required
-2. 🚨 `css/skin-65eda28877e04.css` → Theme overrides, affects all pages
+2. 🚨 `css/legacy-theme-skin.css` → Theme overrides, affects all pages
 3. 🚨 `css/{page-id}-layout.css` → FL-builder layouts, preserve node classes
 4. 🚨 `css/vendors/base-4.min.css` → Foundation grid, system-wide impact
 
@@ -575,7 +575,7 @@ css/critical/*-critical.css:          # ALL critical CSS files
 
 ```yaml
 css/style.css:                        # General styles, complex dependencies
-css/skin-65eda28877e04.css:          # Theme skin, global overrides
+css/legacy-theme-skin.css:          # Theme skin, global overrides
 css/bf72bba397177a0376baed325bffdc75-layout-bundle.css:  # Shared layout, used by multiple pages
 ```
 
@@ -641,7 +641,7 @@ Load Order:
   5. css/homepage.css
   6. css/dynamic-404-590.css (template-generated)
   7. css/590-layout.css (FL-builder)
-  8. css/skin-65eda28877e04.css
+  8. css/legacy-theme-skin.css
   9. css/style.css
   10. css/dynamic-icons.css (template-generated)
   11. css/586.css
@@ -653,7 +653,7 @@ Bundle: about-us
 Load Order:
   1. css/critical/base.css
   2. css/701-layout.css (FL-builder)
-  3. css/skin-65eda28877e04.css
+  3. css/legacy-theme-skin.css
   4. css/dynamic-icons.css (template-generated)
   5. css/586.css
   6. css/bf72bba397177a0376baed325bffdc75-layout-bundle.css
@@ -669,7 +669,7 @@ Load Order:
   5. css/586.css
   6. css/vendors/base-4.min.css (⚠️ Foundation)
   7. css/style.css
-  8. css/skin-65eda28877e04.css
+  8. css/legacy-theme-skin.css
   9. css/technologies.css
   10. css/footer.css
   11. css/use-cases-dynamic.css (template-generated)
@@ -697,7 +697,7 @@ Load Order:
   4. css/vendors/base-4.min.css (⚠️ Foundation)
   5. css/3114-layout.css (FL-builder)
   6. css/bf72bba397177a0376baed325bffdc75-layout-bundle.css
-  7. css/skin-65eda28877e04.css
+  7. css/legacy-theme-skin.css
   8. css/single-post.css
   9. css/footer.css
 
@@ -711,7 +711,7 @@ Load Order:
   5. css/homepage.css
   6. css/vendors/base-4.min.css (⚠️ Foundation)
   7. css/style.css
-  8. css/skin-65eda28877e04.css
+  8. css/legacy-theme-skin.css
   9. css/footer.css
 ```
 

layouts/course/list.html

@@ -5,7 +5,7 @@
     (resources.Get "css/586.css")
     (resources.Get "css/vendors/base-4.min.css")
     (resources.Get "css/style.css")
-    (resources.Get "css/skin-65eda28877e04.css")
+    (resources.Get "css/legacy-theme-skin.css")
     (resources.Get "css/single-post.css")
     (resources.Get "css/pages/course-list.css")
     (resources.Get "css/footer.css")

postcss.config.js

@@ -43,6 +43,11 @@ const purgecss = createPurgeCss({
 
     greedy: [
       /^swiper-/, /^is-/, /^has-/, /^js-/, /^fl-builder-content/, /^fl-col/, /^fl-node/, /^technologies-component/, /^footer-component/, /^use-cases/,
+      // C2 de-obfuscation: semantic component prefixes inherit the greedy
+      // protection their selectors previously got from /^fl-node/ (PowerPack
+      // runtime classes like pp-swiper-button/pp-review-image are never in
+      // hugo_stats.json, so without this the renamed rules get purged).
+      /^testimonials-/, /^cta-banner/,
       // Brand CTA buttons — preserve any selector mentioning these classes.
       // Standard safelist didn't catch tag+class compound selectors like
       // `a.fl-button` on CI (produced blue pills instead of Ruby red).

themes/beaver/assets/css/586.css

@@ -1,3 +1,5 @@
+/* affects pages: 16 of 19 bundles (site-wide) - see docs/projects/2509-css-migration/css-bundle-ownership-map.md
+   Legacy shared layer (Phase C4 strangler target) - verify with bin/qtest before editing. */
 /******* Do not edit this file *******
 Simple Custom CSS and JS - by Silkypress.com
 Saved: Nov 25 2022 | 22:27:19 */
@@ -829,7 +831,6 @@ footer .footer-menu.careers-text .fl-rich-text p:last-child a strong {
   font-size: 16px;
   border: unset;
   padding: 20px;
-  background-color: #F5F6F8;
   border-radius: 16px;
   word-break: unset !important;
 }

themes/beaver/assets/css/component-bundle.css

@@ -1,3 +1,5 @@
+/* affects pages: blog-list + free-consultation bundles - see docs/projects/2509-css-migration/css-bundle-ownership-map.md
+   Legacy shared layer (Phase C4 strangler target) - verify with bin/qtest before editing. */
 .fl-node-header-nav-row .fl-row-content {
   max-width: 1280px;
 }

themes/beaver/assets/css/components/cta-banner.css

@@ -14,45 +14,45 @@
 
 
 
-.fl-node-fa7hjib92cpv.fl-module-heading .fl-heading {
+.cta-banner-heading.fl-module-heading .fl-heading {
   text-align: center;
 }
 
 
 
-.fl-node-fa7hjib92cpv > .fl-module-content {
+.cta-banner-heading > .fl-module-content {
   margin-top: 20px;
 }
 @media ( max-width: 860px ) {
 
-  .fl-node-fa7hjib92cpv.fl-module > .fl-module-content {
+  .cta-banner-heading.fl-module > .fl-module-content {
     margin-top: 10px;
   }
 }
 
 
 
-.fl-builder-content .fl-node-9hf5wet31z02 .fl-rich-text, .fl-builder-content .fl-node-9hf5wet31z02 .fl-rich-text *:not(b, strong) {
+.fl-builder-content .cta-banner-text .fl-rich-text, .fl-builder-content .cta-banner-text .fl-rich-text *:not(b, strong) {
   text-align: center;
 }
 
 
 
-.fl-node-9hf5wet31z02 > .fl-module-content {
+.cta-banner-text > .fl-module-content {
   margin-top: 15px;
   margin-right: 250px;
   margin-left: 250px;
 }
 @media ( max-width: 1115px ) {
 
-  .fl-node-9hf5wet31z02.fl-module > .fl-module-content {
+  .cta-banner-text.fl-module > .fl-module-content {
     margin-right: 0px;
     margin-left: 0px;
   }
 }
 @media ( max-width: 860px ) {
 
-  .fl-node-9hf5wet31z02.fl-module > .fl-module-content {
+  .cta-banner-text.fl-module > .fl-module-content {
     margin-top: 15px;
     margin-right: 0px;
     margin-left: 0px;
@@ -61,19 +61,19 @@
 
 
 
-.fl-node-toa2hwegbp4q .pp-spacer-module {
+.cta-banner-spacer .pp-spacer-module {
   height: 60px;
   width: 100%;
 }
 @media only screen and (max-width: 1115px) {
 
-  .fl-node-toa2hwegbp4q .pp-spacer-module {
+  .cta-banner-spacer .pp-spacer-module {
     height: 60px;
   }
 }
 @media only screen and (max-width: 860px) {
 
-  .fl-node-toa2hwegbp4q .pp-spacer-module {
+  .cta-banner-spacer .pp-spacer-module {
     height: 15px;
   }
 }