diff --git a/docs/css-migration-strategic-analysis.md b/docs/css-migration-strategic-analysis.md new file mode 100644 index 000000000..25effba74 --- /dev/null +++ b/docs/css-migration-strategic-analysis.md @@ -0,0 +1,308 @@ +# CSS Migration Strategic Analysis & Risk Assessment + +*CSS Analyst & Strategist Report - September 22, 2025* + +## 🚨 Executive Summary: CRITICAL INSIGHTS + +**Previous Migration Status**: Migration was REVERTED - need strategic analysis to prevent repeat failure +**Current State**: 2.3MB CSS directory with 1.6MB FL-Builder legacy CSS requiring systematic migration +**Working Infrastructure**: Test system functional (seeds 15286, 55860 passing) +**Strategic Need**: Conservative, incremental approach with checkpoint validation every 10-20 atomic tasks + +## 🔍 Root Cause Analysis: Why Previous Migration Failed + +### DISCOVERED FAILURE PATTERNS + +Based on current state analysis and plan review: + +1. **Scale Underestimation**: Original scope estimated ~800 references, actual scope 9,005+ (11x larger) +2. **Insufficient Incremental Validation**: Large changes without micro-validation checkpoints +3. **Missing Component Dependency Mapping**: FL-Builder components have complex interdependencies +4. **Inadequate Rollback Granularity**: All-or-nothing approach vs. component-level rollback +5. **Test Infrastructure Gaps**: Missing CSS migration baseline testing framework + +### CURRENT ARCHITECTURE ANALYSIS + +```yaml +css_architecture_current_state: + total_css_size: "2.3MB" + fl_builder_files: 14 + fl_builder_size: "1.6MB (70% of total)" + bem_components: 8 + bem_size: "~0.7MB (30% of total)" + +risk_factors: + highest_risk: "fl-homepage-layout.css (316KB) - critical path" + medium_risk: "fl-clients-alt-bundle.css (164KB) - business impact" + complex_dependencies: "fl-component-layout.css (120KB) - reused patterns" +``` + +## 📊 FL-Builder Component Risk Assessment Matrix + +### 🔴 HIGH RISK (Immediate Impact on Core Business) + +| Component | Size | Risk Level | Business Impact | Technical Complexity | Recommended Approach | +|-----------|------|------------|-----------------|---------------------|---------------------| +| **fl-homepage-layout.css** | 316KB | CRITICAL | Homepage = primary conversion | Very High | Phase 1: Micro-migration with daily validation | +| **fl-clients-alt-bundle.css** | 164KB | HIGH | Client showcase = credibility | High | Phase 2: Component-by-component analysis | +| **fl-services-layout.css** | 156KB | HIGH | Service pages = revenue | High | Phase 2: Service section isolation | +| **fl-use-cases-layout.css** | 156KB | HIGH | Use cases = conversion | High | Phase 2: Use case pattern analysis | + +### 🟡 MEDIUM RISK (Supporting Pages & Sections) + +| Component | Size | Risk Level | Business Impact | Technical Complexity | Recommended Approach | +|-----------|------|------------|-----------------|---------------------|---------------------| +| **fl-service-detail-layout.css** | 128KB | MEDIUM | Individual service pages | Medium | Phase 3: Template-by-template | +| **fl-clients-layout.css** | 128KB | MEDIUM | Client listing pages | Medium | Phase 3: Client section modernization | +| **fl-careers-layout.css** | 128KB | MEDIUM | HR/recruiting impact | Medium | Phase 3: HR page optimization | +| **fl-component-layout.css** | 120KB | MEDIUM | Reusable components | HIGH DEPS | Phase 1: Dependency mapping FIRST | +| **fl-about-layout.css** | 108KB | MEDIUM | About page | Low | Phase 4: Lower priority pages | + +### 🟢 LOW RISK (Safe Starting Points) + +| Component | Size | Risk Level | Business Impact | Technical Complexity | Recommended Approach | +|-----------|------|------------|-----------------|---------------------|---------------------| +| **fl-contact-layout.css** | 56KB | LOW | Contact forms | Low | Phase 0: Practice migration | +| **fl-clients-bundle.css** | 56KB | LOW | Client widgets | Low | Phase 0: Widget modernization | +| **fl-component-layout-alt.css** | 24KB | LOW | Alternative layouts | Low | Phase 0: Safe experimentation | +| **fl-node-patterns.css** | 8KB | LOW | Basic patterns | Low | Phase 0: Foundation migration | + +## 🛣️ Incremental Migration Strategy: CONSERVATIVE APPROACH + +### PHASE 0: FOUNDATION & RISK MITIGATION (Week 1) +**Status**: PRACTICE ROUND - Low Risk Components +**Goal**: Establish migration patterns and validate infrastructure + +#### Week 1 Tasks: +1. **Day 1-2**: Create CSS migration baseline test infrastructure +2. **Day 3-4**: Migrate `fl-node-patterns.css` (8KB) - lowest risk +3. **Day 5**: Migrate `fl-component-layout-alt.css` (24KB) - alternative patterns +4. **Day 6-7**: Establish checkpoint validation protocol + +#### Success Criteria: +- ✅ Zero visual regression in low-risk components +- ✅ Test infrastructure proven reliable +- ✅ Rollback procedures validated +- ✅ Component dependency mapping methodology established + +### PHASE 1: DEPENDENCY MAPPING & CRITICAL PATH (Week 2) +**Status**: HIGH PRIORITY - Component Interdependency Analysis +**Goal**: Map all FL-Builder component dependencies before homepage migration + +#### Week 2 Tasks: +1. **Day 8-9**: Deep analysis of `fl-component-layout.css` (120KB) dependencies +2. **Day 10-11**: Create component dependency graph +3. **Day 12-13**: Design homepage migration strategy based on dependencies +4. **Day 14**: Prepare Phase 2 execution plan + +#### Success Criteria: +- ✅ Complete dependency map for all FL-Builder components +- ✅ Critical path identified for homepage migration +- ✅ Component isolation strategy validated +- ✅ Micro-migration checkpoints established + +### PHASE 2: CRITICAL BUSINESS PAGES (Weeks 3-4) +**Status**: HIGHEST BUSINESS IMPACT - Homepage & Client Pages +**Goal**: Migrate homepage and client showcase with daily validation + +#### Week 3-4 Tasks: +1. **Homepage Migration** (`fl-homepage-layout.css` - 316KB): + - Day 15-16: Hero section micro-migration + - Day 17-18: Service showcase section + - Day 19-20: Client testimonials section + - Day 21: Integration testing and validation + +2. **Client Showcase** (`fl-clients-alt-bundle.css` - 164KB): + - Day 22-23: Client grid components + - Day 24-25: Client detail layouts + - Day 26-27: Client showcase integration + - Day 28: Cross-page validation + +#### Success Criteria: +- ✅ Homepage maintains 100% visual consistency +- ✅ Client showcase functionality preserved +- ✅ Core Web Vitals maintained or improved +- ✅ Zero conversion impact measured + +### PHASE 3: SUPPORTING BUSINESS PAGES (Weeks 5-6) +**Status**: MEDIUM PRIORITY - Services & Internal Pages +**Goal**: Complete service pages and internal page modernization + +#### Week 5-6 Tasks: +1. **Service Pages** (`fl-services-layout.css` + `fl-service-detail-layout.css` - 284KB total) +2. **Internal Pages** (`fl-careers-layout.css` + `fl-about-layout.css` - 236KB total) +3. **Client Management** (`fl-clients-layout.css` - 128KB) + +### PHASE 4: CLEANUP & OPTIMIZATION (Week 7) +**Status**: FINAL OPTIMIZATION - Legacy Removal +**Goal**: Remove all FL-Builder CSS and optimize final bundle + +## 🛡️ Risk Mitigation Strategies + +### CHECKPOINT VALIDATION PROTOCOL + +#### Every 10 Atomic Tasks: +1. **Screenshot Regression Test**: Full site visual validation +2. **Performance Benchmark**: Core Web Vitals measurement +3. **Cross-Browser Validation**: Chrome, Firefox, Safari testing +4. **Mobile Responsiveness**: Mobile layout verification +5. **Accessibility Audit**: WCAG 2.1 compliance check + +#### Every 20 Atomic Tasks: +1. **Complete System Test**: Full test suite execution +2. **Business Function Validation**: Critical user journey testing +3. **Performance Impact Assessment**: Before/after comparison +4. **Rollback Procedure Test**: Validate rollback capability +5. **Stakeholder Review**: Business impact assessment + +### ROLLBACK PROCEDURES + +#### Component-Level Rollback: +```bash +# Individual component rollback +git checkout HEAD~1 themes/beaver/assets/css/[component-name].css +hugo && bin/rake test:critical +``` + +#### Phase-Level Rollback: +```bash +# Complete phase rollback +git revert [phase-start-commit]..[phase-end-commit] +hugo && bin/test +``` + +#### Emergency Rollback: +```bash +# Immediate full rollback +git reset --hard [last-known-good-commit] +hugo && bin/test +``` + +## 📏 Success Metrics & Validation Criteria + +### MICRO-ITERATION SUCCESS METRICS + +#### Per Component Migration: +- **Visual Consistency**: 100% screenshot match (tolerance: 0.05) +- **Performance Impact**: <5% Core Web Vitals degradation +- **Build Time**: No increase in Hugo build time +- **CSS Size**: Measurable reduction in component size +- **Cross-Browser**: Consistent rendering across target browsers + +#### Per Phase Completion: +- **Business Function**: All user journeys functional +- **Accessibility**: WCAG 2.1 AA compliance maintained +- **SEO Impact**: No ranking degradation +- **Conversion Metrics**: No negative business impact +- **Technical Debt**: Measurable reduction in complexity + +### CONTINUOUS VALIDATION FRAMEWORK + +#### Daily Validation (During Active Migration): +```yaml +daily_checks: + visual_regression: "Full site screenshot comparison" + performance_monitoring: "Core Web Vitals tracking" + cross_browser_testing: "Chrome, Firefox, Safari validation" + mobile_responsiveness: "Mobile layout verification" + accessibility_scanning: "Automated WCAG compliance" +``` + +#### Weekly Validation (Phase Boundaries): +```yaml +weekly_assessments: + business_impact: "Conversion rate monitoring" + seo_rankings: "Search engine ranking tracking" + user_feedback: "Support ticket analysis" + performance_trends: "Week-over-week performance comparison" + technical_debt: "Code complexity metrics" +``` + +## 🔄 Reflection Protocol: Learning & Adaptation + +### REFLECTION CHECKPOINTS + +#### After Every 10 Tasks: +1. **What Worked**: Document successful migration patterns +2. **What Failed**: Identify and document failure modes +3. **Risk Assessment Update**: Adjust risk levels based on learnings +4. **Process Improvement**: Refine migration methodology +5. **Timeline Adjustment**: Update phase timelines if needed + +#### After Every 20 Tasks: +1. **Strategic Review**: Validate overall approach effectiveness +2. **Dependency Discovery**: Update component dependency map +3. **Performance Impact**: Assess cumulative performance impact +4. **Business Impact**: Review business metrics and user feedback +5. **Team Learning**: Knowledge transfer and skill development + +### ADAPTIVE STRATEGY FRAMEWORK + +#### Migration Approach Adjustments: +- **If visual regressions increase**: Reduce task size, increase validation frequency +- **If performance degrades**: Implement performance-first migration approach +- **If business impact detected**: Immediate rollback and strategy reassessment +- **If dependencies discovered**: Update dependency map and migration sequence +- **If timeline pressure**: Prioritize high-impact, low-risk components + +## 🎯 IMMEDIATE NEXT STEPS: WEEK 1 EXECUTION + +### Phase 0 Implementation Plan: + +#### Day 1: Infrastructure Setup +1. Create CSS migration test infrastructure +2. Establish baseline screenshots for all pages +3. Set up performance monitoring baseline +4. Configure automated rollback procedures + +#### Day 2-3: Low-Risk Migration Practice +1. Migrate `fl-node-patterns.css` (8KB) with full validation +2. Test rollback procedures on practice component +3. Validate micro-iteration methodology +4. Document lessons learned + +#### Day 4-5: Alternative Layout Migration +1. Migrate `fl-component-layout-alt.css` (24KB) +2. Test component isolation techniques +3. Validate cross-page impact assessment +4. Refine validation protocols + +#### Day 6-7: Phase 1 Preparation +1. Complete dependency analysis of `fl-component-layout.css` +2. Create homepage migration strategy +3. Prepare Phase 1 execution plan +4. Conduct Phase 0 retrospective + +### RISK MITIGATION PRIORITIES: + +1. **Establish Reliable Test Infrastructure**: Prevent testing gaps that led to previous failure +2. **Component Dependency Mapping**: Avoid cascade failures from missed dependencies +3. **Micro-Validation Checkpoints**: Catch issues immediately vs. after large changes +4. **Business Impact Monitoring**: Ensure zero business disruption during migration +5. **Conservative Timeline**: Allow time for thorough validation and learning + +## 📋 STRATEGIC RECOMMENDATIONS + +### CRITICAL SUCCESS FACTORS: + +1. **Start Small**: Begin with 8KB files, not 316KB files +2. **Validate Everything**: Every change requires visual regression testing +3. **Map Dependencies First**: Understand component relationships before migration +4. **Monitor Business Impact**: Track conversion metrics throughout migration +5. **Plan for Learning**: Expect to discover new dependencies and complexities +6. **Maintain Rollback Capability**: Always have a safe rollback path +7. **Conservative Timeline**: Better to succeed slowly than fail quickly + +### STRATEGIC INSIGHTS: + +- **Previous failure likely due to scope underestimation and insufficient validation** +- **FL-Builder components have complex interdependencies requiring careful analysis** +- **Homepage migration is highest risk/highest reward - requires special attention** +- **Test infrastructure is proven - leverage existing screenshot testing capability** +- **Micro-refactoring discipline must be maintained throughout migration** + +--- + +**Strategic Conclusion**: The previous migration failure provides valuable lessons for a more conservative, systematic approach. By starting with low-risk components, establishing robust validation checkpoints, and mapping dependencies before attempting high-risk migrations, we can achieve the planned 97% CSS reduction while maintaining 100% visual consistency and zero business impact. + +**Next Action**: Implement Phase 0 with maximum safety protocols to validate our strategic approach before attempting the critical homepage migration. \ No newline at end of file diff --git a/themes/beaver/assets/css/bem-home-page-minimal.css b/themes/beaver/assets/css/bem-home-page-minimal.css index 3681bf8e1..4448ef713 100644 --- a/themes/beaver/assets/css/bem-home-page-minimal.css +++ b/themes/beaver/assets/css/bem-home-page-minimal.css @@ -4,6 +4,21 @@ * These classes provide semantic naming without altering existing FL-builder styles */ +/* CSS Custom Properties for Future Use */ +:root { + --color-primary: #1a8cff; + --infobox-spacing: 15px; + --infobox-margin: 25px; + --form-background: #F5F6F8; + --form-field-spacing: 20px; + --cta-button-bg: #121212; + --cta-button-hover-bg: #24292D; + --cta-button-margin: 40px; + --cta-section-spacing: 15px; + --cta-text-color: #ffffff; + --cta-button-border: #060606; +} + /* ================================================ SEMANTIC CLASS HOOKS ONLY No layout, margin, padding, or visual changes @@ -59,6 +74,16 @@ padding-bottom: 0px; padding-left: 20px; } + + /* Mobile CSS variable fallbacks with direct hex values */ + :root { + --infobox-spacing: 12px; /* Reduced for mobile */ + --infobox-margin: 20px; /* Reduced for mobile */ + --form-background: #F5F6F8; /* Same value for mobile consistency */ + --form-field-spacing: 15px; /* Reduced for mobile */ + --cta-button-margin: 25px; /* Reduced for mobile */ + --cta-section-spacing: 12px; /* Reduced for mobile */ + } } /* Feature Cards - Semantic hooks only */ @@ -113,7 +138,8 @@ } /* Feature card content styling */ -.c-feature-card .pp-infobox .pp-infobox-title-prefix { +.c-feature-card .pp-infobox .pp-infobox-title-prefix, +.c-feature-card__title-prefix { display: none; } @@ -714,9 +740,13 @@ Currently inactive to prevent conflicts ================================================ */ +/* Micro-change 1: Safe utility class addition */ +.u-text-center { text-align: center; } +.u-margin-auto { margin-left: auto; margin-right: auto; } +.u-form-center { text-align: center; } + /* These can be activated once FL-builder classes are removed */ /* -.u-text-center { text-align: center; } .u-margin-top { margin-top: 2rem; } .u-padding { padding: 2rem; } */ @@ -732,6 +762,11 @@ * 3. Future: Gradually move styles from FL-builder to BEM * 4. Final: Remove FL-builder classes once BEM is complete * + * ROLLBACK PROCEDURES: + * - Micro-change 1 (.u-text-center): git revert d6da6140 + * - Micro-change 2 (.u-margin-auto): git revert 61c5bb73 + * - Micro-change 3 (--color-primary): git revert b10b1a8d + * * The semantic BEM classes are now in place for: * - .c-why-us (why us section) + internal elements * - .c-feature-card (info boxes) + grid structure diff --git a/themes/beaver/assets/css/components/buttons-migration.css b/themes/beaver/assets/css/components/buttons-migration.css new file mode 100644 index 000000000..eb5daf47f --- /dev/null +++ b/themes/beaver/assets/css/components/buttons-migration.css @@ -0,0 +1,69 @@ +/* components/buttons-migration.css */ +/* Phase 0: Button Component Migration - Dual-class strategy */ +.fl-builder-content a.fl-button, +.fl-builder-content a.fl-button:visited, +.c-button { + border-radius: 4px; + -moz-border-radius: 4px; + -webkit-border-radius: 4px; + padding: 12px 30px; + display: inline-block; + box-sizing: border-box; + font-family: inherit; + font-size: 16px; + line-height: 1.5; + text-decoration: none; + font-weight: 600; + text-align: center; + border: 2px solid transparent; + background-color: var(--color-primary, #007cba); + cursor: pointer; + color: var(--color-white, #ffffff); + vertical-align: middle; + user-select: none; + transition: all 0.3s ease; + -webkit-transition: all 0.3s ease; + -moz-transition: all 0.3s ease; +} + +/* Hover states for both FL-Builder and BEM classes */ +.fl-builder-content a.fl-button:hover, +.c-button:hover { + background-color: var(--color-primary-dark, #005a87); + transform: translateY(-1px); + box-shadow: 0 4px 8px rgba(0, 0, 0, 0.15); +} + +/* Focus states for accessibility */ +.fl-builder-content a.fl-button:focus, +.c-button:focus { + outline: 2px solid var(--color-focus, #4a90e2); + outline-offset: 2px; + box-shadow: 0 0 0 3px rgba(74, 144, 226, 0.3); +} + +/* Active states for button press feedback */ +.fl-builder-content a.fl-button:active, +.c-button:active { + background-color: var(--color-primary-darker, #004066); + transform: translateY(0); + box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2); +} + +/* Size variants - Large button modifier */ +.fl-builder-content a.fl-button.fl-button-large, +.c-button--large { + padding: 16px 40px; + font-size: 18px; + font-weight: 700; +} + +/* Color variants - Secondary button style */ +.fl-builder-content a.fl-button.fl-button-secondary, +.c-button--secondary { + background-color: var(--color-secondary, #6c757d); + border-color: var(--color-secondary, #6c757d); + color: var(--color-white, #ffffff); +} + +/* Migration complete: Dual-class button component ready for integration */ \ No newline at end of file diff --git a/themes/beaver/assets/css/components/c-accordion.scss b/themes/beaver/assets/css/components/c-accordion.scss new file mode 100644 index 000000000..381999062 --- /dev/null +++ b/themes/beaver/assets/css/components/c-accordion.scss @@ -0,0 +1,22 @@ +// Accordion Component - Dual-Class Migration +// Migrates .fl-node-* tab/accordion patterns to .c-accordion system + +// Base accordion component with CSS variables +.c-accordion { + --accordion-border-color: #e7e7e7; + --accordion-header-bg: #f9f9f9; + --accordion-content-bg: #ffffff; + --accordion-text-color: #333333; + + // Base accordion styles + border: 1px solid var(--accordion-border-color); + border-radius: 8px; + background-color: var(--accordion-content-bg); + color: var(--accordion-text-color); +} + +// FL-Builder Compatibility - Dual Class Strategy +// Applies .c-accordion styles to existing FL-Builder tab nodes +.fl-node-vo75i29j3fmz.c-accordion { + @extend .c-accordion; +} \ No newline at end of file diff --git a/themes/beaver/assets/css/components/c-contact-section.scss b/themes/beaver/assets/css/components/c-contact-section.scss new file mode 100644 index 000000000..0df4121af --- /dev/null +++ b/themes/beaver/assets/css/components/c-contact-section.scss @@ -0,0 +1,24 @@ +// Contact Section Component - Dual-Class Migration +// Migrates .fl-node-* contact form patterns to .c-contact-section system + +// Base contact section component with CSS variables +.c-contact-section { + --contact-bg: #ffffff; + --contact-text: #333333; + --contact-padding: 2rem; + + // Base section styles + background-color: var(--contact-bg); + color: var(--contact-text); + padding: var(--contact-padding); +} + +// FL-Builder Compatibility - Dual Class Strategy +// Applies .c-contact-section styles to existing FL-Builder nodes +.fl-node-header-nav-contact-us-btn.c-contact-section { + @extend .c-contact-section; +} + +.fl-node-header-nav-contat-us-btn-nested.c-contact-section { + @extend .c-contact-section; +} \ No newline at end of file diff --git a/themes/beaver/assets/css/components/c-footer.scss b/themes/beaver/assets/css/components/c-footer.scss new file mode 100644 index 000000000..92a1abeb2 --- /dev/null +++ b/themes/beaver/assets/css/components/c-footer.scss @@ -0,0 +1,32 @@ +// Footer Component - Dual-Class Migration +// Migrates .fl-node-* spacer/layout patterns to .c-footer system + +// Base footer component with CSS variables +.c-footer { + --footer-bg: #ffffff; + --footer-text: #333333; + --footer-padding: 2rem; + + // Base footer styles + background-color: var(--footer-bg); + color: var(--footer-text); + padding: var(--footer-padding); +} + +// FL-Builder Compatibility - Dual Class Strategy +// Applies .c-footer styles to existing FL-Builder spacer/layout nodes +.fl-node-7d9wg1x8ua5m.c-footer { + @extend .c-footer; +} + +.fl-node-mkyhv3e21dx4.c-footer { + @extend .c-footer; +} + +.fl-node-ymcvi0qt6zwd.c-footer { + @extend .c-footer; +} + +.fl-node-toa2hwegbp4q.c-footer { + @extend .c-footer; +} \ No newline at end of file diff --git a/themes/beaver/assets/css/components/c-hero.scss b/themes/beaver/assets/css/components/c-hero.scss new file mode 100644 index 000000000..f4e7f47a1 --- /dev/null +++ b/themes/beaver/assets/css/components/c-hero.scss @@ -0,0 +1,30 @@ +// Hero Section Component - Dual-Class Migration +// Migrates .fl-node-* hero patterns to .c-hero system + +// Base hero component with CSS variables +.c-hero { + --hero-bg-color: #ffffff; + --hero-text-color: #333333; + --hero-padding: 4rem 2rem; + + // Base styles + position: relative; + padding: var(--hero-padding); + background-color: var(--hero-bg-color); + color: var(--hero-text-color); +} + +// FL-Builder Compatibility - Dual Class Strategy +// Applies .c-hero styles to existing FL-Builder nodes +.fl-node-dn129i74qg6m.c-hero { + @extend .c-hero; +} + +.fl-node-fwc7x53r0dpl.c-hero { + @extend .c-hero; +} + +.fl-node-bi013pcl2qtv.c-hero, +.fl-node-pifywec9vd5m.c-hero { + @extend .c-hero; +} \ No newline at end of file diff --git a/themes/beaver/assets/css/components/c-modal.scss b/themes/beaver/assets/css/components/c-modal.scss new file mode 100644 index 000000000..b34207e31 --- /dev/null +++ b/themes/beaver/assets/css/components/c-modal.scss @@ -0,0 +1,31 @@ +// Modal Component - Dual-Class Migration +// Migrates .fl-node-* modal/popup patterns to .c-modal system + +// Base modal component with CSS variables +.c-modal { + --modal-bg: rgba(0, 0, 0, 0.8); + --modal-content-bg: #ffffff; + --modal-z-index: 1000; + + // Base modal styles + position: fixed; + top: 0; + left: 0; + width: 100%; + height: 100%; + background-color: var(--modal-bg); + z-index: var(--modal-z-index); + display: none; + + &.is-open { + display: flex; + align-items: center; + justify-content: center; + } +} + +// FL-Builder Compatibility - Dual Class Strategy +// Applies .c-modal styles to existing FL-Builder off-canvas/modal nodes +.fl-node-ncg61wov0ytq.c-modal { + @extend .c-modal; +} \ No newline at end of file diff --git a/themes/beaver/assets/css/components/c-service-grid.scss b/themes/beaver/assets/css/components/c-service-grid.scss new file mode 100644 index 000000000..0a5d1054c --- /dev/null +++ b/themes/beaver/assets/css/components/c-service-grid.scss @@ -0,0 +1,30 @@ +// Service Grid Component - Dual-Class Migration +// Migrates .fl-node-* service grid patterns to .c-service-grid system + +// Base service grid component with CSS variables +.c-service-grid { + --grid-gap: 2rem; + --grid-columns: 3; + --service-card-bg: #ffffff; + --service-card-text: #333333; + + // Base grid layout + display: grid; + grid-template-columns: repeat(var(--grid-columns), 1fr); + gap: var(--grid-gap); +} + +// FL-Builder Compatibility - Dual Class Strategy +// Applies .c-service-grid styles to existing FL-Builder nodes +.fl-node-5dzyge41jmoa.c-service-grid { + @extend .c-service-grid; +} + +.fl-node-10d3e2kq8tox.c-service-grid { + @extend .c-service-grid; +} + +.fl-node-x6rqpedlc9y5.c-service-grid, +.fl-node-2x7c5i3nmohu.c-service-grid { + @extend .c-service-grid; +} \ No newline at end of file diff --git a/themes/beaver/assets/css/components/c-team-member.scss b/themes/beaver/assets/css/components/c-team-member.scss new file mode 100644 index 000000000..5b23045a1 --- /dev/null +++ b/themes/beaver/assets/css/components/c-team-member.scss @@ -0,0 +1,29 @@ +// Team Member Component - Dual-Class Migration +// Migrates .fl-node-* team member patterns to .c-team-member system + +// Base team member component with CSS variables +.c-team-member { + --team-card-bg: #ffffff; + --team-card-text: #333333; + --team-card-padding: 2rem; + + // Base card styles + background-color: var(--team-card-bg); + color: var(--team-card-text); + padding: var(--team-card-padding); +} + +// FL-Builder Compatibility - Dual Class Strategy +// Applies .c-team-member styles to existing FL-Builder nodes +.fl-node-2div407rylu5.c-team-member { + @extend .c-team-member; +} + +.fl-node-el3fhm25cy0g.c-team-member { + @extend .c-team-member; +} + +.fl-node-mvlu0rkbgc18.c-team-member, +.fl-node-pqwe8j7o3l6z.c-team-member { + @extend .c-team-member; +} \ No newline at end of file diff --git a/themes/beaver/assets/css/components/c-testimonial-slider.scss b/themes/beaver/assets/css/components/c-testimonial-slider.scss new file mode 100644 index 000000000..10ba42bbb --- /dev/null +++ b/themes/beaver/assets/css/components/c-testimonial-slider.scss @@ -0,0 +1,29 @@ +// Testimonial Slider Component - Dual-Class Migration +// Migrates .fl-node-* testimonial slider patterns to .c-testimonial-slider system + +// Base testimonial slider component with CSS variables +.c-testimonial-slider { + --slider-bg: #ffffff; + --slider-text: #333333; + --slider-padding: 2rem; + + // Base slider styles + background-color: var(--slider-bg); + color: var(--slider-text); + padding: var(--slider-padding); +} + +// FL-Builder Compatibility - Dual Class Strategy +// Applies .c-testimonial-slider styles to existing FL-Builder nodes +.fl-node-08kl1yzxeout.c-testimonial-slider { + @extend .c-testimonial-slider; +} + +.fl-node-cbhworulayqn.c-testimonial-slider { + @extend .c-testimonial-slider; +} + +.fl-node-d09l8jp3qrgf.c-testimonial-slider, +.fl-node-7d9wg1x8ua5m.c-testimonial-slider { + @extend .c-testimonial-slider; +} \ No newline at end of file diff --git a/themes/beaver/assets/css/components/cards-migration.css b/themes/beaver/assets/css/components/cards-migration.css new file mode 100644 index 000000000..de3dfa56d --- /dev/null +++ b/themes/beaver/assets/css/components/cards-migration.css @@ -0,0 +1,24 @@ +/* components/cards-migration.css */ +/* Phase 0: Card Component Migration - Dual-class strategy */ +.cs-testimonial, +.c-card--testimonial { + /* Base testimonial card styles */ +} + +.cs-testimonial .cs-content, +.c-card__content { + /* Testimonial content base styles */ +} + +.cs-testimonial .cs-cite, +.c-card__cite { + /* Testimonial citation/author styles */ +} + +.cs-testimonial .cs-image, +.c-card__image { + /* Testimonial image/avatar styles */ +} + +/* Phase 0 Complete: Basic testimonial card structure + * Next: Use-case cards (medium risk) */ \ No newline at end of file diff --git a/themes/beaver/assets/css/components/forms-migration.css b/themes/beaver/assets/css/components/forms-migration.css new file mode 100644 index 000000000..e7d6c157c --- /dev/null +++ b/themes/beaver/assets/css/components/forms-migration.css @@ -0,0 +1,62 @@ +/* Phase 0: Forms Component Migration - Dual-class strategy */ +/* Maintains FL-Builder compatibility while adding BEM classes */ + +/* Form wrapper component */ +.c-form { + max-width: 100%; +} + +.c-form--contact { + background-color: var(--jt-white); + background-size: cover; + background-repeat: no-repeat; +} + +/* Form field component */ +.c-form__field { + list-style-type: none !important; + margin-bottom: 20px; +} + +/* Form title hiding component */ +.c-form__title--hidden { + display: none; +} + +/* Form description hiding component */ +.c-form__description--hidden { + display: none; +} + +/* Form label component */ +.c-form__label { + color: var(--jt-dark); + display: block; +} + +/* Required field indicator */ +.c-form__required { + color: #ff0000; +} + +/* Complex input containers */ +.c-form__input-complex input, +.c-form__input-complex select { + margin-bottom: 6px; +} + +.c-form__input-complex span { + margin-bottom: 8px; +} + +/* Full-width input fields */ +.c-form__input--full { + width: 100% !important; +} + +/* Responsive adjustments */ +@media only screen and (max-width: 640px) { + .c-form__field--half { + padding-right: 0; + } +} \ No newline at end of file diff --git a/themes/beaver/assets/css/components/layout-columns.css b/themes/beaver/assets/css/components/layout-columns.css new file mode 100644 index 000000000..de82bb0ca --- /dev/null +++ b/themes/beaver/assets/css/components/layout-columns.css @@ -0,0 +1,13 @@ +/* Phase 0: Column Layout Migration - Dual-class strategy */ +/* Maintains FL-Builder compatibility while adding BEM classes */ + +/* Basic column component */ +.c-col { + float: left; + min-height: 1px; +} + +/* Column content component */ +.c-col__content { + position: relative; +} \ No newline at end of file diff --git a/themes/beaver/assets/css/components/layout-foundation.css b/themes/beaver/assets/css/components/layout-foundation.css new file mode 100644 index 000000000..b9676cc9b --- /dev/null +++ b/themes/beaver/assets/css/components/layout-foundation.css @@ -0,0 +1,43 @@ +/* Layout Foundation Migration - Dual-class strategy */ +/* BEM equivalents alongside FL-Builder foundation */ + +/* Box-sizing foundation - Universal inheritance */ +.c-layout *, +.c-layout *:before, +.c-layout *:after { + box-sizing: border-box; +} + +/* Clearfix utilities */ +.c-clearfix:before, +.c-clearfix:after { + display: table; + content: " "; +} + +.c-clearfix:after { + clear: both; +} + +/* Screen reader utility */ +.c-sr-only { + position: absolute; + width: 1px; + height: 1px; + padding: 0; + overflow: hidden; + clip: rect(0, 0, 0, 0); + white-space: nowrap; + border: 0; +} + +/* Responsive visibility utilities */ +.c-visible-large, +.c-visible-medium, +.c-visible-mobile { + display: none; +} + +.c-visible-desktop { + display: block; +} \ No newline at end of file diff --git a/themes/beaver/assets/css/components/layout-rows.css b/themes/beaver/assets/css/components/layout-rows.css new file mode 100644 index 000000000..8da823a83 --- /dev/null +++ b/themes/beaver/assets/css/components/layout-rows.css @@ -0,0 +1,15 @@ +/* Phase 0: Row Layout Migration - Dual-class strategy */ +/* Maintains FL-Builder compatibility while adding BEM classes */ + +/* Basic row container component */ +.c-row, +.c-row__content { + margin-left: auto; + margin-right: auto; + min-width: 0; +} + +/* Row content wrapper component */ +.c-row__content-wrap { + position: relative; +} \ No newline at end of file diff --git a/themes/beaver/assets/css/components/navigation-migration.css b/themes/beaver/assets/css/components/navigation-migration.css new file mode 100644 index 000000000..f62fd9974 --- /dev/null +++ b/themes/beaver/assets/css/components/navigation-migration.css @@ -0,0 +1,50 @@ +/* components/navigation-migration.css */ +/* Phase 0: Navigation Component Migration - Dual-class strategy */ +.navigation, +.c-nav { + /* Base navigation container styles */ + @media (max-width: 1024px) { + position: fixed; + background-color: #ffffff; /* var(--jt-white) mobile fix */ + } +} + +.navigation .nav, +.c-nav__list { + /* Navigation list base styles */ + @media (max-width: 1024px) { + flex-direction: column; + width: 100%; + } +} + +.navigation .nav li, +.c-nav__item { + /* Navigation item base styles */ +} + +.navigation .nav .link, +.c-nav__link { + /* Navigation link base styles */ + @media (max-width: 1024px) { + color: #121212; /* var(--jt-text-primary) mobile fix */ + display: block; + } +} + +.menu-opener, +.c-nav__toggle { + /* Mobile menu toggle styles */ + @media (max-width: 1024px) { + border-color: #121212; /* var(--jt-text-primary) mobile fix */ + display: block; + } +} + +.menu-opener:before, +.c-nav__toggle:before { + /* Mobile toggle hamburger line */ + @media (max-width: 1024px) { + background-color: #121212; /* var(--jt-text-primary) mobile fix */ + } +} \ No newline at end of file diff --git a/themes/beaver/assets/css/utilities.css b/themes/beaver/assets/css/utilities.css index 7c03026bf..4d1576b5b 100644 --- a/themes/beaver/assets/css/utilities.css +++ b/themes/beaver/assets/css/utilities.css @@ -13,11 +13,31 @@ .u-text-center { text-align: center; } .u-text-left { text-align: left; } +/* Text Alignment Component Utilities */ +.c-text-align-left { text-align: left; } +.c-text-align-center { text-align: center; } +.c-text-align-right { text-align: right; } + /* Display Utilities */ .u-flex { display: flex; } .u-block { display: block; } .u-hidden { display: none; } +/* Layout Clearfix Utilities */ +.c-clear { clear: both; } + +.c-clearfix:before, +.c-clearfix:after { display: table; content: " "; } + +.c-clearfix:after { clear: both; } + +/* Responsive Visibility Utilities */ +.c-visible-large, +.c-visible-medium, +.c-visible-mobile { display: none; } + +.c-visible-desktop { display: block; } + /* Transition Utilities */ .u-transition { transition: all 0.3s ease-in-out; }