@contentgrowth/content-widget 1.3.1 → 1.3.3

package/dist/widget/widget.dev.css

@@ -19,7 +19,7 @@
   --cg-shadow-lg: 0 10px 15px -3px rgba(0, 0, 0, 0.1);
   --cg-radius: 12px;
   --cg-transition: all 0.2s ease;
-  
+
   font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
   font-size: 16px;
   line-height: 1.5;
@@ -166,7 +166,7 @@
     grid-template-columns: 1fr;
     grid-template-rows: auto auto;
   }
-  
+
   .cg-content-rows .cg-expand-btn {
     grid-column: 1;
     grid-row: 1;
@@ -635,7 +635,9 @@ a.cg-card {
 }
 
 @keyframes cg-spin {
-  to { transform: rotate(360deg); }
+  to {
+    transform: rotate(360deg);
+  }
 }
 
 .cg-loading p,
@@ -968,3 +970,262 @@ a.cg-card {
   color: var(--cg-text-secondary);
   font-size: 1.125rem;
 }
+
+/* ===== Featured Card Component ===== */
+.cg-featured-card {
+  /* Custom property defaults */
+  --cg-card-border-color: #e5e7eb;
+  --cg-card-bg: transparent;
+  --cg-items-bg: #f3f4f6;
+
+  display: block;
+  text-decoration: none;
+  color: inherit;
+  border-radius: 12px;
+  background: var(--cg-card-bg);
+  border: none;
+  transition: all 0.2s ease;
+  overflow: hidden;
+}
+
+/* Border style variants */
+.cg-featured-card.cg-border-line {
+  border: 1px solid var(--cg-card-border-color);
+}
+
+.cg-featured-card.cg-border-dashed {
+  border: 2px dashed var(--cg-card-border-color);
+}
+
+.cg-featured-card:hover {
+  border-color: var(--cg-primary);
+}
+
+.cg-featured-card-inner {
+  padding: 2rem 2.5rem;
+  height: 100%;
+  display: flex;
+  flex-direction: column;
+}
+
+.cg-featured-card-category {
+  margin-bottom: 1.25rem;
+}
+
+.cg-category-badge {
+  display: inline-block;
+  padding: 0.25rem 0.75rem;
+  background: #eff6ff;
+  color: var(--cg-primary);
+  border-radius: 4px;
+  font-size: 0.75rem;
+  font-weight: 600;
+}
+
+.cg-featured-card-title {
+  margin: 0 0 1rem;
+  font-size: 1.625rem;
+  font-weight: 800;
+  line-height: 1.25;
+  color: var(--cg-text);
+  letter-spacing: -0.02em;
+}
+
+.cg-featured-card-summary {
+  font-size: 1rem;
+  line-height: 1.7;
+  color: var(--cg-text-secondary);
+  margin-bottom: 1.5rem;
+  flex-grow: 1;
+}
+
+.cg-featured-card-summary p {
+  margin: 0 0 1rem;
+}
+
+.cg-featured-card-summary p:last-child {
+  margin: 0;
+}
+
+.cg-featured-card-summary strong,
+.cg-featured-card-summary b {
+  font-weight: 700;
+  color: var(--cg-text);
+}
+
+.cg-featured-card-footer {
+  display: flex;
+  align-items: center;
+  font-size: 0.875rem;
+  font-weight: 500;
+  color: var(--cg-text-secondary);
+  margin-bottom: 1rem;
+}
+
+.cg-featured-card-separator {
+  margin: 0 0.5rem;
+  opacity: 0.4;
+}
+
+/* CTA: Simple text link style */
+.cg-featured-card-cta {
+  display: inline-flex;
+  align-items: center;
+  gap: 0.375rem;
+  font-size: 1rem;
+  font-weight: 600;
+  color: var(--cg-primary);
+  text-decoration: none;
+  transition: all 0.2s ease;
+  align-self: flex-start;
+}
+
+.cg-featured-card:hover .cg-featured-card-cta {
+  gap: 0.625rem;
+  text-decoration: underline;
+}
+
+.cg-featured-card-arrow {
+  transition: transform 0.2s ease;
+}
+
+.cg-featured-card:hover .cg-featured-card-arrow {
+  transform: translateX(3px);
+}
+
+/* ===== Featured Summary Template Styles ===== */
+
+/* Intro paragraph styling */
+.cg-featured-card-summary>p:first-child {
+  font-size: 1rem;
+  line-height: 1.7;
+}
+
+/* List & Steps Template - Styled like reference */
+.cg-featured-card-summary ul,
+.cg-featured-card-summary ol {
+  margin: 0;
+  padding: 1.25rem 1.5rem;
+  padding-left: 1.5rem;
+  list-style: none;
+  background: var(--cg-items-bg);
+  border-radius: 8px;
+}
+
+.cg-featured-card-summary li {
+  margin-bottom: 1.25rem;
+  padding-left: 2.5rem;
+  line-height: 1.5;
+  position: relative;
+}
+
+.cg-featured-card-summary li:last-child {
+  margin-bottom: 0;
+}
+
+/* Unordered list: simple bullets */
+.cg-featured-card-summary ul li::before {
+  content: '';
+  position: absolute;
+  left: 0.5rem;
+  top: 0.5rem;
+  width: 6px;
+  height: 6px;
+  background: var(--cg-primary);
+  border-radius: 50%;
+}
+
+/* Ordered list: numbered circles like reference */
+.cg-featured-card-summary ol {
+  counter-reset: item;
+}
+
+.cg-featured-card-summary ol li::before {
+  content: counter(item);
+  counter-increment: item;
+  position: absolute;
+  left: 0;
+  top: 0;
+  width: 1.5rem;
+  height: 1.5rem;
+  background: var(--cg-primary);
+  color: white;
+  border-radius: 4px;
+  font-size: 0.75rem;
+  font-weight: 700;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+
+/* List item content: bold title + description on next line */
+.cg-featured-card-summary li strong {
+  display: block;
+  font-size: 0.9375rem;
+  font-weight: 700;
+  color: var(--cg-text);
+  margin-bottom: 0.125rem;
+}
+
+/* Quote Template */
+.cg-featured-card-summary blockquote {
+  margin: 0;
+  padding: 1rem 1.25rem;
+  border-left: 3px solid var(--cg-primary);
+  background: var(--cg-bg-secondary);
+  border-radius: 0 8px 8px 0;
+  font-style: italic;
+  font-size: 1rem;
+  color: var(--cg-text);
+}
+
+/* ===== Horizontal Layout ===== */
+/* Horizontal layout: intro paragraph on left, list/remaining content on right */
+
+@media (min-width: 768px) {
+  .cg-layout-horizontal .cg-featured-card-inner {
+    padding: 2.5rem 3rem;
+  }
+
+  .cg-layout-horizontal .cg-featured-card-title {
+    font-size: 1.875rem;
+  }
+
+  /* Only the summary content gets the horizontal grid */
+  .cg-layout-horizontal .cg-featured-card-summary {
+    display: grid;
+    grid-template-columns: 1fr 1.25fr;
+    gap: 2.5rem;
+    align-items: stretch;
+    /* Changed from start to stretch for balance */
+  }
+
+  /* First paragraph (intro) stays on left - improved styling */
+  .cg-layout-horizontal .cg-featured-card-summary>p:first-child {
+    grid-column: 1;
+    grid-row: 1;
+    margin: 0;
+    font-size: 1.0625rem;
+    line-height: 1.8;
+    color: var(--cg-text-secondary);
+    display: flex;
+    flex-direction: column;
+    justify-content: center;
+    /* Vertically center the text */
+  }
+
+  /* List/quote goes on right */
+  .cg-layout-horizontal .cg-featured-card-summary ul,
+  .cg-layout-horizontal .cg-featured-card-summary ol,
+  .cg-layout-horizontal .cg-featured-card-summary blockquote {
+    grid-column: 2;
+    grid-row: 1;
+    margin: 0;
+  }
+
+  /* If no list, additional paragraphs go on right */
+  .cg-layout-horizontal .cg-featured-card-summary>p:not(:first-child) {
+    grid-column: 2;
+    margin: 0 0 0.75rem;
+  }
+}

package/dist/widget/widget.dev.js

@@ -1,6 +1,6 @@
 /**
  * Content Growth Widget - Standalone Bundle
- * Version: 1.3.1
+ * Version: 1.3.3
  * https://www.content-growth.com
  */
 (function(window) {
@@ -3514,7 +3514,7 @@ class ContentViewer {
 
 class ContentGrowthWidget {
   // Version will be injected during build from package.json
-  static version = '1.3.1';
+  static version = '1.3.3';
   
   constructor(container, config) {
     
@@ -3826,6 +3826,6 @@ window.ContentGrowthWidget = ContentGrowthWidget;
   // ===== Expose to window =====
   window.ContentGrowthWidget = ContentGrowthWidget;
   
-  console.log('[ContentGrowthWidget] Loaded successfully v1.3.1');
+  console.log('[ContentGrowthWidget] Loaded successfully v1.3.3');
   
 })(window);