Merge branch 'rebase-experiment'

Author: pftg

docs/fl-node-homepage-inventory.md

@@ -236,4 +236,4 @@ This migration aligns with our 8 component systems:
 - Micro-commits allow for easy rollback
 - Comprehensive testing at each stage
 - Conservative timeline with buffer for issues
-- Team coordination through swarm methodology
+- Team coordination through swarm methodology

test/system/desktop_site_test.rb

@@ -11,12 +11,18 @@ def setup
 
   def test_homepage
     visit "/"
+
+    preload_all_images
+
     assert_text "Build faster. Scale smarter."
     assert_screenshot "homepage", tolerance: 0.10
   end
 
   def test_top_image_have_highest_priority
     visit "/"
+
+    preload_all_images
+
     within ".fl-photo-content.fl-photo-img-jpeg" do
       assert_css "img[fetchpriority=high]"
     end

themes/beaver/assets/css/base-layout.css

@@ -53,7 +53,7 @@
 .grid-col-4 { grid-template-columns: repeat(4, 1fr); }
 
 /* FL-Builder Compatibility: Responsive Modifiers */
-@media (max-width: var(--fl-breakpoint-medium)) {
+@media (max-width: 1115px) {
   .grid-col-2, .grid-col-3, .grid-col-4 { grid-template-columns: 1fr; }
 }
 
@@ -2916,12 +2916,12 @@ a.text-dark:focus {
 /* Responsive Utilities - Consolidates duplicate media queries */
 /* Use these classes to replace duplicate @media (max-width: 1115px) and @media (max-width: 860px) */
 
-@media (max-width: var(--fl-breakpoint-medium)) { /* 1115px */
+@media (max-width: 1115px) { /* 1115px */
   .responsive-single-col { grid-template-columns: 1fr !important; }
   .medium-hidden { display: none !important; }
 }
 
-@media (max-width: var(--fl-breakpoint-mobile)) { /* 860px */
+@media (max-width: 860px) { /* 860px */
   .mobile-single-col { grid-template-columns: 1fr !important; }
   .mobile-hidden { display: none !important; }
 }

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

@@ -182,7 +182,7 @@ img.mfp-img {
 .pp-advanced-menu .pp-toggle-arrows .pp-menu-toggle:before,
 .pp-advanced-menu .pp-toggle-none .pp-menu-toggle:before {
   content: "";
-  border-color: #333;
+  border-color: #333333;
 }
 
 .pp-advanced-menu .pp-menu-expanded .pp-menu-toggle {
@@ -200,7 +200,7 @@ img.mfp-img {
   padding: 8px;
   background-color: transparent;
   border: none;
-  color: #333;
+  color: #333333;
   border-radius: 0;
   cursor: pointer;
   line-height: 0;
@@ -292,7 +292,7 @@ img.mfp-img {
   .pp-hamburger
   .pp-hamburger-box
   .pp-hamburger-inner:after {
-  background-color: #000;
+  background-color: #000000;
   position: absolute;
   width: 30px;
   height: 3px;
@@ -632,7 +632,7 @@ html:not(.pp-off-canvas-menu-open)
   width: 320px;
   height: 100%;
   opacity: 0;
-  background: #333;
+  background: #333333;
   overflow-y: auto;
   overflow-x: hidden;
   -ms-overflow-style: -ms-autohiding-scrollbar;
@@ -1070,7 +1070,7 @@ ul.pp-advanced-menu-horizontal li.mega-menu > ul.sub-menu ul.sub-menu {
   border-style: solid;
   border-bottom-width: 0px;
   border-color: transparent;
-  
+
   color: #121212;
 }
 
@@ -1095,7 +1095,7 @@ ul.pp-advanced-menu-horizontal li.mega-menu > ul.sub-menu ul.sub-menu {
 .fl-node-menu .sub-menu > li > .pp-has-submenu-container > a:focus,
 .fl-node-menu .sub-menu > li.current-menu-item > a,
 .fl-node-menu .sub-menu > li.current-menu-item > .pp-has-submenu-container > a {
-  
+
   color: #1a8cff;
 }
 
@@ -1410,7 +1410,7 @@ ul.pp-advanced-menu-horizontal li.mega-menu > ul.sub-menu ul.sub-menu {
   .fl-node-menu .sub-menu > li > a,
   .fl-node-menu .sub-menu > li > .pp-has-submenu-container > a {
     border-bottom-width: 0px;
-    
+
   }
 
   .fl-node-menu .sub-menu {
@@ -1446,7 +1446,7 @@ ul.pp-advanced-menu-horizontal li.mega-menu > ul.sub-menu ul.sub-menu {
   .fl-node-menu .sub-menu > li > a,
   .fl-node-menu .sub-menu > li > .pp-has-submenu-container > a {
     border-bottom-width: 0px;
-    
+
   }
 
   .fl-node-menu .pp-advanced-menu-mobile {
@@ -1891,7 +1891,7 @@ body:not(.single-fl-theme-layout)
 }
 
 .fl-node-530uo7f2gcli > .fl-row-content-wrap {
-  background-color: #000;
+  background-color: #000000;
   background-repeat: no-repeat;
   background-position: center center;
   background-attachment: scroll;
@@ -2758,15 +2758,15 @@ body:not(.single-fl-theme-layout)
   .trust-details {
     grid-template-columns: 1fr;
   }
-  
+
   .rating-display {
     grid-template-columns: 1fr;
   }
-  
+
   .rating-stats {
     grid-template-columns: 1fr;
   }
-  
+
   .trust-signals-comprehensive section {
     padding: 1.5rem;
   }
@@ -2785,7 +2785,7 @@ body:not(.single-fl-theme-layout)
   position: relative;
   padding: 0.5rem 0 0.5rem 1.5rem;
   margin-bottom: 0.5rem;
-  color: #333;
+  color: #333333;
   line-height: 1.4;
 }
 

themes/beaver/assets/css/components/c-navigation.scss

@@ -20,13 +20,13 @@
 
 .c-nav__link {
   display: block;
-  padding: var(--spacing-sm) var(--spacing-md);
-  color: var(--jt-text-color);
+  padding: 0.5rem 1rem;
+  color: #121212;
   text-decoration: none;
   transition: all 0.2s ease;
 
   &:hover {
-    background-color: var(--jt-primary-color);
+    background-color: #1a8cff;
     color: white;
   }
 }

themes/beaver/assets/css/navigation.css

@@ -22,6 +22,18 @@
   background-color: #007af4;
 }
 
+/* Mobile-specific button styles with direct hex values for consistent rendering */
+@media (max-width: 768px) {
+  .btn-primary {
+    background-color: #1a8cff;
+    color: #fff !important;
+  }
+
+  .btn-primary:hover {
+    background-color: #007af4;
+  }
+}
+
 .top-panel {
   padding: 15px 20px 0;
   position: absolute;
@@ -55,7 +67,7 @@
 .navigation {
   @media (max-width: 1024px) {
     position: fixed;
-    background-color: #fff;
+    background-color: #FFFFFF;
     top: 0;
     bottom: 0;
     width: 320px;
@@ -110,6 +122,8 @@
   top: 50%;
   margin-top: -1px;
   transform: rotate(45deg);
+  backface-visibility: hidden;
+  will-change: transform;
 }
 
 .menu-close:after {
@@ -122,6 +136,8 @@
   top: 50%;
   margin-top: -1px;
   transform: rotate(-45deg);
+  backface-visibility: hidden;
+  will-change: transform;
 }
 
 .navigation.-open .menu-close {
@@ -169,6 +185,8 @@
   transform-origin: 70% 70%;
   transform: rotate(45deg);
   transition: .3s;
+  backface-visibility: hidden;
+  will-change: transform;
 }
 
 .navigation .link {
@@ -193,7 +211,7 @@
 
 .navigation .sub-menu {
   display: none;
-  background-color: #fff;
+  background-color: #FFFFFF;
   box-shadow: 0 10px 40px rgba(0,0,0,.1);
   border-radius: 20px;
   padding: 30px 30px 0;
@@ -207,6 +225,8 @@
   width: 888px;
   transform: translateX(-40%);
   font-size: 0;
+  backface-visibility: hidden;
+  will-change: transform;
   line-height: 0;
 
   @media (max-width: 1080px) {
@@ -221,7 +241,7 @@
   height: 0;
   border-style: solid;
   border-width: 15px 0 15px 15px;
-  border-color: transparent transparent transparent #fff;
+  border-color: transparent transparent transparent #FFFFFF;
   right: unset!important;
   top: -20px !important;
   left: 45% !important;
@@ -280,7 +300,7 @@
   font-weight: 300;
   margin-bottom: 0;
   margin-top: 5px;
-  color: #7e7e7e;
+  color: #666666;
 }
 
 @media (min-width: 1025px) {
@@ -299,6 +319,40 @@
 }
 
 @media (max-width: 1024px) {
+  .menu-opener {
+    border-color: #121212;
+  }
+
+  .menu-opener:before {
+    background-color: #121212;
+  }
+
+  .menu-close:before,
+  .menu-close:after {
+    background-color: #121212;
+  }
+
+  .navigation .link {
+    color: #121212;
+  }
+
+  .navigation .item .arrow {
+    border-color: #121212;
+  }
+
+  .navigation .sub-name {
+    color: #121212;
+  }
+
+  .navigation {
+    background-color: #FFFFFF;
+  }
+
+  .navigation .sub-menu {
+    background-color: #FFFFFF;
+  }
+
+
   .navigation.-open {
     right: 0;
     overflow-y: auto;
@@ -344,6 +398,12 @@
     margin-top: 15px;
   }
 
+  /* Mobile-specific color overrides to fix CSS variable inconsistencies */
+  .navigation .btn {
+    background-color: #121212 !important;
+    color: #FFFFFF !important;
+  }
+
   .navigation .item {
     padding: 0;
     margin: 0;

themes/beaver/assets/css/theme-main.css

@@ -1,3 +1,14 @@
+:root {
+  --jt-primary-color: #1a8cff;
+  --jt-text-color: #121212;
+  --jt-primary: #1a8cff;
+  --jt-text-primary: #121212;
+  --jt-primary-dark: #0066cc;
+  --jt-primary-hover: #007af4;
+  --jt-white: #ffffff;
+  --jt-text-secondary: #7e7e7e;
+}
+
 body {
   background-color: #fff;
   color: #121212;

themes/beaver/assets/css/use-cases-dynamic.css

@@ -1,5 +1,5 @@
 .use-cases > .heading {
-  color: #1a8cff;
+  color: var(--jt-primary);
   font-weight: 600;
   text-align: center;
   margin-bottom: 30px;

themes/beaver/assets/css/utilities/c-spacing.scss

@@ -26,9 +26,9 @@
   --spacing-5xl: 8rem;    // 128px
 
   // Component-specific spacing
-  --spacing-component-padding: var(--spacing-lg);
-  --spacing-section-padding: var(--spacing-2xl);
-  --spacing-container-padding: var(--spacing-md);
+  --spacing-component-padding: 1.5rem;
+  --spacing-section-padding: 3rem;
+  --spacing-container-padding: 1rem;
 }
 
 /* ==========================================================================