@innovastudio/contentbox 1.6.178 → 1.6.179

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@innovastudio/contentbox",
   "type": "module",
-  "version": "1.6.178",
+  "version": "1.6.179",
   "description": "",
   "main": "public/contentbox/contentbox.esm.js",
   "types": "index.d.ts",

package/public/contentbox/contentbox.esm.js

@@ -142419,6 +142419,8 @@ class Box {
       overlayColor = overlayBg.querySelector('.is-overlay-color');
     }
 
+    if (overlayBg) overlayBg.style.opacity = ''; // clear unwanted opacity
+
     if (this.builder.useCssClasses) {
       const classes = this.builder.cssClasses.opacity;
 
@@ -145727,8 +145729,13 @@ class CodeChat {
     let isChatVisible = savedState === 'true'; // Only open if explicitly set to 'true'
 
     if (!isChatVisible) {
-      modal.classList.add('hidden');
-      modal.setAttribute('aria-hidden', 'true');
+      if (this.builder.startCodeChat) {
+        modal.classList.remove('hidden');
+        modal.removeAttribute('aria-hidden');
+      } else {
+        modal.classList.add('hidden');
+        modal.setAttribute('aria-hidden', 'true');
+      }
     } else {
       modal.classList.remove('hidden');
       modal.removeAttribute('aria-hidden');
@@ -147387,7 +147394,7 @@ ${this.builder.html()}
     banner.className = 'demo-banner';
     banner.innerHTML = `
             <div style="
-                background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
+                background: linear-gradient(135deg, #527cff 0%, #5563db 100%);
                 color: white;
                 padding: 12px 16px;
                 border-radius: 8px;
@@ -148586,23 +148593,15 @@ The overlay system provides background images and colors behind content.
     </div>
 </div>
 
-### Background Image with Color Overlay
-
-<div class="is-overlay" style="background-color: rgb(225, 225, 225);">
-    <div class="is-overlay-bg" 
-         style="background-image: url('image.jpg'); 
-                background-position: 50% 60%; 
-                opacity: 0.7;">
-    </div>
-</div>
-
 ### Dark Overlay on Image
 
+**Use case:** For the background behind white text content.
+
 <div class="is-overlay">
     <div class="is-overlay-bg" 
          style="background-image: url('image.jpg'); 
                 background-position: 50% 60%;">
-        <div class="is-overlay-color opacity-12"></div>
+        <div class="is-overlay-color opacity-30"></div>
     </div>
 </div>
 
@@ -148946,6 +148945,24 @@ The Box Framework provides structure. The Content.css Framework provides content
 
 Always use both frameworks together for complete designs.
 
+### 9. Add smooth image scaling for overlay background image
+
+<div class="is-section ...">
+    <!-- Section content -->
+</div>
+<div class="is-section ...">
+    <!-- Section content -->
+</div>
+<style>
+    /* Smooth image scaling */
+    .is-overlay-bg {
+        transition: transform 1.5s cubic-bezier(0.25, 0.46, 0.45, 0.94);
+    }
+    .is-box:hover .is-overlay-bg {
+        transform: scale(1.03);
+    }
+</style>
+
 ---
 
 ## Common Patterns
@@ -148985,6 +149002,29 @@ Always use both frameworks together for complete designs.
     </div>
 </div>
 
+### Pattern: Dark overlay background image behind white text content.
+
+<div class="is-section is-box type-system-ui is-section-60 is-content-bottom edge-y-4">
+    <div class="is-overlay">
+        <div class="is-overlay-bg" style="background-image: url('assets/thelayout/images/ai-aZkV0.jpg'); background-position: 50% 40%;">
+            <div class="is-overlay-color opacity-30"></div>
+        </div>
+    </div>
+    <div class="is-container is-content-1200 text-center">
+        <div class="row">
+            <div class="column">
+                <h2 class="size-60 font-light text-white leading-12 pb-6">Start your next chapter.</h2>
+                <div class="spacer height-20"></div>
+                <div>
+                    <a href="#" role="button" class="transition-all inline-block whitespace-nowrap cursor-pointer no-underline border-2 border-solid mt-2 mb-1 font-normal tracking-normal rounded-full py-3 px-10 size-16 leading-16 border-white hover:bg-white hover:text-black" style="color: #ffffff;">
+                        Visit Us Today
+                    </a>
+                </div>
+            </div>
+        </div>
+    </div>
+</div>
+
 ### Pattern: Three Equal Boxes
 
 <div class="is-section type-system-ui is-section-60">
@@ -149288,6 +149328,15 @@ The frameworks provide utility classes for structure and typography. To create r
 
 <!-- Embedded Styke -->
 <style>
+    /* Smooth image scaling */
+    .is-overlay-bg {
+        transition: transform 1.5s cubic-bezier(0.25, 0.46, 0.45, 0.94);
+    }
+
+    .is-box:hover .is-overlay-bg {
+        transform: scale(1.03);
+    }
+
     /* Subtle hover zoom for background images */
     .is-overlay-bg {
         transition: transform 1s ease;