@sociallane/elements 1.0.9 → 1.0.10

package/packages/widgets/social-proof-trust/templates/partials/layout-trust.php

@@ -29,7 +29,7 @@ $cls = $view['classes'];
 	<div class="lg:max-w-xl">
 		<header class="<?php echo $has_heading ? '' : 'sr-only'; ?>" id="<?php echo esc_attr( $section_id ); ?>">
 			<?php if ( $view['show_eyebrow'] && $view['eyebrow'] !== '' ) : ?>
-				<p class="<?php echo esc_attr( $cls['eyebrow'] ?? '' ); ?> text-sm text-blue-chill-200 font-normal uppercase tracking-wider mb-3">
+				<p class="<?php echo esc_attr( $cls['eyebrow'] ?? '' ); ?> text-sm text-neutral-200 font-normal uppercase tracking-wider mb-3">
 					<?php echo $view['eyebrow']; ?>
 				</p>
 			<?php endif; ?>
@@ -44,7 +44,7 @@ $cls = $view['classes'];
 			<?php endif; ?>
 
 			<?php if ( $view['show_description'] && $view['description'] !== '' ) : ?>
-				<p class="<?php echo esc_attr( $cls['description'] ?? '' ); ?> mt-4 text-lg md:text-xl text-blue-chill-200 leading-relaxed">
+				<p class="<?php echo esc_attr( $cls['description'] ?? '' ); ?> mt-4 text-lg md:text-xl text-neutral-200 leading-relaxed">
 					<?php echo $view['description']; ?>
 				</p>
 			<?php endif; ?>

package/packages/widgets/social-proof-trust/templates/partials/stat-card.php

@@ -19,7 +19,7 @@ $classes = $view['classes'] ?? [];
 ?>
 <div class="flex flex-col gap-3">
 	<?php if ( ! empty( $stat['icon']['value'] ) ) : ?>
-		<div class="social-proof-stat-icon <?php echo esc_attr( $classes['icon'] ?? 'text-blue-chill-600' ); ?> shrink-0 [&_.e-icon]:w-8 [&_.e-icon]:h-8 [&_svg]:fill-current" aria-hidden="true">
+		<div class="social-proof-stat-icon <?php echo esc_attr( $classes['icon'] ?? 'text-neutral-600' ); ?> shrink-0 [&_.e-icon]:w-8 [&_.e-icon]:h-8 [&_svg]:fill-current" aria-hidden="true">
 			<?php \Elementor\Icons_Manager::render_icon( $stat['icon'], [ 'aria-hidden' => 'true', 'class' => 'w-8 h-8' ] ); ?>
 		</div>
 	<?php endif; ?>

package/packages/widgets/testimonials-bento/data/view.php

@@ -87,7 +87,7 @@ function prepare_testimonials_bento_view( array $settings, string $widget_id ):
 	|
 	*/
 	$classes = [
-		'section'   => 'bg-neutral-100 dark:bg-zinc-900',
+		'section'   => 'bg-neutral-100 dark:bg-neutral-900',
 		'headline'  => 'text-neutral-900 dark:text-white',
 		'subtitle'  => 'text-neutral-600 dark:text-neutral-300',
 		'card'      => 'bg-white dark:bg-neutral-800 rounded-xl border border-neutral-200 dark:border-neutral-700',

package/packages/widgets/testimonials-grid/data/view.php

@@ -84,7 +84,7 @@ function prepare_testimonials_grid_view( array $settings, string $widget_id ): a
 	|
 	*/
 	$classes = [
-		'section'   => 'bg-neutral-100 dark:bg-zinc-900',
+		'section'   => 'bg-neutral-100 dark:bg-neutral-900',
 		'headline'  => 'text-neutral-900 dark:text-white',
 		'subtitle'  => 'text-neutral-600 dark:text-neutral-300',
 		'card'      => 'bg-white dark:bg-neutral-800 rounded-xl border border-neutral-200 dark:border-neutral-700',

package/packages/widgets/testimonials-masonry/data/view.php

@@ -84,7 +84,7 @@ function prepare_testimonials_masonry_view( array $settings, string $widget_id )
 	|
 	*/
 	$classes = [
-		'section'   => 'bg-neutral-100 dark:bg-zinc-900',
+		'section'   => 'bg-neutral-100 dark:bg-neutral-900',
 		'headline'  => 'text-neutral-900 dark:text-white',
 		'subtitle'  => 'text-neutral-600 dark:text-neutral-300',
 		'card'      => 'bg-white dark:bg-neutral-800 rounded-xl border border-neutral-200 dark:border-neutral-700',

package/packages/widgets/widget-filter/data/view.php

@@ -490,7 +490,7 @@ function prepare_widget_filter_view( array $settings, string $widget_id ): array
 	$grid_class = $grid_columns[ $columns ] ?? $grid_columns['3'];
 
 	// Animation
-	$animation = sociallane_animation_view_data( $settings, [ 'headline' => true, 'stagger' => true ] );
+	$animation = sociallane_animation_view_data( $settings, [ 'headline' => true ] );
 
 	// Theme classes (light + dark)
 	$classes = [

package/packages/widgets/widget-filter/templates/wrapper.php

@@ -23,7 +23,6 @@ if ( empty( $view ) ) {
 
 $anim           = $view['animation'] ?? [];
 $section_attrs  = sociallane_section_animation_attrs( $anim );
-$stagger_attrs  = sociallane_stagger_attrs( $anim );
 $block_id            = 'widget-filter-' . $view['widget_id'];
 $categories          = $view['categories'];
 $categories_visible  = $view['categories_visible'] ?? $categories;
@@ -212,6 +211,67 @@ $filter_inactive_classes = ! empty( $classes['filter_inactive'] ) ? explode( ' '
 			});
 		}
 
+		function animateCardsOnLoad() {
+			var grid = block.querySelector('[data-widget-cards-grid]');
+			if (!grid || grid.dataset.cardsAnimated === 'yes') return;
+
+			var cardNodes = grid.querySelectorAll('.widget-filter__card');
+			if (!cardNodes.length) return;
+
+			grid.dataset.cardsAnimated = 'yes';
+
+			var prefersReducedMotion = window.matchMedia && window.matchMedia('(prefers-reduced-motion: reduce)').matches;
+			if (prefersReducedMotion) return;
+
+			var cards = Array.prototype.slice.call(cardNodes);
+			var gsapApi = window.SocialLaneAnimations && window.SocialLaneAnimations.gsap;
+			var staggerEach = cards.length > 36 ? 0.01 : 0.018;
+			var maxAnimatedCards = 48;
+
+			if (gsapApi && typeof gsapApi.fromTo === 'function') {
+				gsapApi.fromTo(
+					cards.slice(0, maxAnimatedCards),
+					{ opacity: 0, y: 14, willChange: 'transform,opacity', force3D: true },
+					{
+						opacity: 1,
+						y: 0,
+						duration: 0.38,
+						stagger: staggerEach,
+						ease: 'power2.out',
+						clearProps: 'opacity,transform,willChange',
+					}
+				);
+				return;
+			}
+
+			cards.slice(0, maxAnimatedCards).forEach(function(card, index) {
+				card.style.opacity = '0';
+				card.style.transform = 'translate3d(0, 14px, 0)';
+				card.style.willChange = 'transform, opacity';
+				card.style.transition = 'opacity 0.38s cubic-bezier(0.22, 1, 0.36, 1), transform 0.38s cubic-bezier(0.22, 1, 0.36, 1)';
+				card.style.transitionDelay = String(index * staggerEach) + 's';
+			});
+
+			requestAnimationFrame(function() {
+				requestAnimationFrame(function() {
+					cards.slice(0, maxAnimatedCards).forEach(function(card) {
+						card.style.opacity = '1';
+						card.style.transform = 'translate3d(0, 0, 0)';
+					});
+				});
+			});
+
+			setTimeout(function() {
+				cards.slice(0, maxAnimatedCards).forEach(function(card) {
+					card.style.transition = '';
+					card.style.transitionDelay = '';
+					card.style.willChange = '';
+					card.style.opacity = '';
+					card.style.transform = '';
+				});
+			}, 1200);
+		}
+
 		block.querySelectorAll('[data-add-to-collection]').forEach(function(cb) {
 			cb.addEventListener('change', function() {
 				var pkg = cb.getAttribute('data-npm-package');
@@ -249,6 +309,7 @@ $filter_inactive_classes = ! empty( $classes['filter_inactive'] ) ? explode( ' '
 
 		renderCollection();
 		updateCount();
+		animateCardsOnLoad();
 
 		// Hover preview: show iframe on card hover, keep detail page link
 		var hoverPreview = block.querySelector('[data-hover-preview]');
@@ -528,7 +589,7 @@ $filter_inactive_classes = ! empty( $classes['filter_inactive'] ) ? explode( ' '
 				<?php if ( ! empty( $widgets ) ) : ?>
 					<div
 						class="grid <?php echo esc_attr( $view['grid_class'] ); ?> gap-4 sm:gap-6"
-						<?php echo $stagger_attrs ? ' ' . $stagger_attrs : ''; ?>
+						data-widget-cards-grid
 						role="list"
 						aria-label="<?php esc_attr_e( 'Available widgets', 'sociallane-elements' ); ?>"
 					>

package/packages/widgets/widget-filter/widget-filter.php

@@ -47,7 +47,7 @@ class Widget_Filter extends Widget_Base {
 
 	protected function register_controls(): void {
 		$this->register_content_section();
-		$this->register_animation_controls( true, true );
+		$this->register_animation_controls( true );
 	}
 
 	private function register_content_section(): void {

package/vite.config.js

@@ -56,6 +56,8 @@ function watchTailwindContent() {
 
 export default defineConfig(({ mode }) => {
   const isDev = mode === 'development';
+  const isProd = mode === 'production';
+  const isWatchMode = process.argv.includes('--watch');
 
   return {
     plugins: [tailwindcss(), watchTailwindContent()],
@@ -64,24 +66,42 @@ export default defineConfig(({ mode }) => {
       outDir: 'assets/dist',
       manifest: true,
       emptyOutDir: true,
-      watch: {
-        usePolling: true,
-        interval: 300,
-      },
+      watch: isWatchMode
+        ? {
+            usePolling: true,
+            interval: 300,
+          }
+        : null,
       rollupOptions: {
         input: {
           tailwind: resolve(__dirname, 'assets/css/tailwind.css'),
           animations: resolve(__dirname, 'assets/js/animations.js'),
         },
+        treeshake: 'recommended',
         output: {
+          manualChunks(id) {
+            const normalizedId = id.replace(/\\/g, '/');
+            if (!normalizedId.includes('/node_modules/')) {
+              return undefined;
+            }
+            if (normalizedId.includes('/node_modules/gsap/')) {
+              return 'vendor-gsap';
+            }
+            if (normalizedId.includes('/node_modules/lenis/')) {
+              return 'vendor-lenis';
+            }
+            return 'vendor';
+          },
           entryFileNames: '[name]-[hash].js',
           chunkFileNames: '[name]-[hash].js',
           assetFileNames: '[name]-[hash][extname]',
         },
       },
-      minify: 'esbuild',
+      minify: isProd ? 'esbuild' : false,
+      cssMinify: isProd,
       cssCodeSplit: true,
       sourcemap: isDev,
+      reportCompressedSize: isProd,
       target: 'es2020',
     },
 

package/widgets/bento-grid/data/view.php

@@ -129,15 +129,15 @@ function prepare_bento_grid_view( array $settings, string $widget_id ): array {
 
 	// Light/dark: section and cards
 	$classes = [
-		'section'     => 'bg-neutral-100 dark:bg-zinc-900',
-		'eyebrow'     => 'text-zinc-900 dark:text-neutral-200',
-		'headline'    => 'text-zinc-900 dark:text-neutral-200',
-		'card'        => 'bg-white dark:bg-zinc-900 rounded-2xl border border-neutral-200 dark:border-neutral-700 dark:shadow-none',
-		'card_title'  => 'text-zinc-900 dark:text-neutral-200 font-bold',
-		'card_desc'   => 'text-zinc-900 dark:text-neutral-200',
-		'metric_val'  => 'text-zinc-900 dark:text-neutral-200',
+		'section'     => 'bg-neutral-100 dark:bg-neutral-900',
+		'eyebrow'     => 'text-neutral-900 dark:text-neutral-200',
+		'headline'    => 'text-neutral-900 dark:text-neutral-200',
+		'card'        => 'bg-white dark:bg-neutral-900 rounded-2xl border border-neutral-200 dark:border-neutral-700 dark:shadow-none',
+		'card_title'  => 'text-neutral-900 dark:text-neutral-200 font-bold',
+		'card_desc'   => 'text-neutral-900 dark:text-neutral-200',
+		'metric_val'  => 'text-neutral-900 dark:text-neutral-200',
 		'metric_change' => 'text-primary dark:text-neutral-200',
-		'code_bg'     => 'bg-zinc-900 dark:bg-zinc-900 text-neutral-200',
+		'code_bg'     => 'bg-neutral-900 dark:bg-neutral-900 text-neutral-200',
 		'badge'       => 'bg-primary/20 dark:bg-primary-light/20 text-primary dark:text-primary-light text-xs font-medium px-2.5 py-1 rounded-full',
 	];
 

package/widgets/bento-grid/templates/partials/tcsr-row1-left.php

@@ -34,7 +34,7 @@ $tabs = $data['tabs'] ?? [];
 	<div class="p-5 md:p-6 flex-1 flex flex-col">
 		<?php if ( ( $data['project'] ?? '' ) !== '' ) : ?>
 			<div class="flex items-center gap-2 mb-4">
-				<span class="w-2 h-2 rounded-full bg-green-500 shrink-0" aria-hidden="true"></span>
+				<span class="w-2 h-2 rounded-full bg-neutral-500 shrink-0" aria-hidden="true"></span>
 				<span class="<?php echo esc_attr( $cls['card_title'] ); ?> text-sm font-semibold"><?php echo $data['project']; ?></span>
 			</div>
 			<?php if ( ( $data['project_meta'] ?? '' ) !== '' ) : ?>

package/widgets/bento-grid/templates/partials/two-row-deploys.php

@@ -26,7 +26,7 @@ $items  = $data['items'] ?? [];
 					<a href="<?php echo esc_url( $item['href'] ); ?>" <?php echo $item['attrs']; ?> class="group flex items-start justify-between gap-3 rounded-lg p-2 -m-2 hover:bg-neutral-100 dark:hover:bg-neutral-700/50 focus:outline-none focus:ring-2 focus:ring-primary focus:ring-offset-2 focus:ring-offset-white dark:focus:ring-offset-[#21283B]">
 						<div class="min-w-0 flex-1">
 							<div class="flex items-center gap-2 flex-wrap">
-								<span class="shrink-0 w-2 h-2 rounded-full <?php echo $item['status'] === 'success' ? 'bg-green-500' : 'bg-neutral-400 dark:bg-neutral-500'; ?>" aria-hidden="true"></span>
+								<span class="shrink-0 w-2 h-2 rounded-full <?php echo $item['status'] === 'success' ? 'bg-neutral-500' : 'bg-neutral-400 dark:bg-neutral-500'; ?>" aria-hidden="true"></span>
 								<span class="<?php echo esc_attr( $cls['card_title'] ); ?> text-sm font-semibold"><?php echo $item['label']; ?></span>
 								<?php if ( $item['badge'] !== '' ) : ?>
 									<span class="<?php echo esc_attr( $cls['badge'] ); ?>"><?php echo $item['badge']; ?></span>

package/widgets/bento-grid/templates/partials/two-row-overview.php

@@ -27,7 +27,7 @@ $tabs = $data['tabs'] ?? [];
 	<div class="p-5 md:p-6 flex-1 flex flex-col">
 		<?php if ( ( $data['project'] ?? '' ) !== '' ) : ?>
 			<div class="flex items-center gap-2 mb-4">
-				<span class="w-2 h-2 rounded-full bg-green-500 shrink-0" aria-hidden="true"></span>
+				<span class="w-2 h-2 rounded-full bg-neutral-500 shrink-0" aria-hidden="true"></span>
 				<span class="<?php echo esc_attr( $cls['card_title'] ); ?> text-sm font-semibold"><?php echo $data['project']; ?></span>
 			</div>
 			<?php if ( ( $data['project_meta'] ?? '' ) !== '' ) : ?>

package/widgets/bento-grid/templates/partials/two-row-security.php

@@ -36,7 +36,7 @@ $avatar2 = $data['avatar2'] ?? null;
 			<?php if ( $avatar2 && ! empty( $avatar2['url'] ) ) : ?>
 				<span class="relative inline-block">
 					<img src="<?php echo esc_url( $avatar2['url'] ); ?>" alt="" class="w-10 h-10 rounded-full border-2 border-white dark:border-[#21283B] object-cover" loading="lazy" width="40" height="40" />
-					<span class="absolute bottom-0 right-0 w-3 h-3 bg-green-500 rounded-full border-2 border-white dark:border-[#21283B]" aria-hidden="true"></span>
+					<span class="absolute bottom-0 right-0 w-3 h-3 bg-neutral-500 rounded-full border-2 border-white dark:border-[#21283B]" aria-hidden="true"></span>
 				</span>
 			<?php endif; ?>
 		</div>

package/widgets/bento-portfolio/data/view.php

@@ -89,10 +89,10 @@ function prepare_bento_portfolio_view( array $settings, string $widget_id ): arr
 
 	$animation = sociallane_animation_view_data( $settings, [ 'headline' => true, 'stagger' => true ] );
 	$classes = [
-		'section'    => 'bg-neutral-100 dark:bg-zinc-900',
-		'eyebrow'    => 'text-zinc-900 dark:text-neutral-200 uppercase tracking-wider text-sm font-normal',
+		'section'    => 'bg-neutral-100 dark:bg-neutral-900',
+		'eyebrow'    => 'text-neutral-900 dark:text-neutral-200 uppercase tracking-wider text-sm font-normal',
 		'headline'   => 'text-neutral-900 dark:text-neutral-200',
-		'subtitle'   => 'text-zinc-900 leading-8 dark:text-neutral-200',
+		'subtitle'   => 'text-neutral-900 leading-8 dark:text-neutral-200',
 		'card'       => 'bg-white dark:bg-[#21283B] rounded-2xl border border-neutral-200 dark:border-neutral-700/50 shadow-sm dark:shadow-none overflow-hidden',
 		'card_title' => 'text-neutral-900 leading-relaxed dark:text-neutral-200 font-normal',
 		'card_desc'  => 'text-neutral-600 dark:text-neutral-400',

package/widgets/bento-portfolio/templates/partials/portfolio-card.php

@@ -42,7 +42,7 @@ $align_row        = [ 'left' => 'justify-between', 'center' => 'justify-center',
 
 	<div class="absolute inset-0 bg-gradient-to-t from-black/60 via-black/0 to-transparent pointer-events-none" aria-hidden="true"></div>
 
-	<div class="absolute inset-0 pointer-events-none opacity-0 group-hover/card:opacity-100 transition-opacity duration-300 ease-out bg-[linear-gradient(to_top,var(--color-blue-chill-950)_0%,transparent_50%)]" aria-hidden="true"></div>
+	<div class="absolute inset-0 pointer-events-none opacity-0 group-hover/card:opacity-100 transition-opacity duration-300 ease-out bg-[linear-gradient(to_top,var(--color-neutral-950)_0%,transparent_50%)]" aria-hidden="true"></div>
 
 	<?php if ( $show_category && $category_label !== '' ) : ?>
 		<div class="absolute top-0 left-0 p-4 md:p-5">
@@ -69,7 +69,7 @@ $align_row        = [ 'left' => 'justify-between', 'center' => 'justify-center',
 		<a
 			href="<?php echo esc_url( $link_href ); ?>"
 			<?php echo $link_attrs; ?>
-			class="group shrink-0 h-10 md:h-12 rounded-full bg-blue-chill-950 dark:bg-blue-chill-300 dark:border-blue-chill-300/30 dark:text-blue-chill-950 text-blue-chill-300 border border-blue-chill-300/30 inline-flex items-center justify-end overflow-hidden transition-[max-width] duration-300 ease-out max-w-[2.5rem] md:max-w-[3rem] hover:max-w-[14rem] focus:outline-none focus:ring-2 focus:ring-white focus:ring-offset-2 focus:ring-offset-neutral-900 pl-2 pr-2 md:pl-3 md:pr-3 hover:pl-4 hover:pr-4 md:hover:pl-5 md:hover:pr-5"
+			class="group shrink-0 h-10 md:h-12 rounded-full bg-neutral-950 dark:bg-neutral-300 dark:border-neutral-300/30 dark:text-neutral-950 text-neutral-300 border border-neutral-300/30 inline-flex items-center justify-end overflow-hidden transition-[max-width] duration-300 ease-out max-w-[2.5rem] md:max-w-[3rem] hover:max-w-[14rem] focus:outline-none focus:ring-2 focus:ring-white focus:ring-offset-2 focus:ring-offset-neutral-900 pl-2 pr-2 md:pl-3 md:pr-3 hover:pl-4 hover:pr-4 md:hover:pl-5 md:hover:pr-5"
 			aria-label="<?php esc_attr_e( 'View project', 'sociallane-elements' ); ?>"
 		>
 			<span class="whitespace-nowrap overflow-hidden max-w-0 opacity-0 group-hover:max-w-[8rem] group-hover:opacity-100 transition-[max-width,opacity] duration-500 ease-out text-sm md:text-base font-medium mr-1.5 md:mr-2">

package/widgets/blog-grid/data/view.php

@@ -49,7 +49,7 @@ function prepare_blog_grid_view( array $settings, string $widget_id ): array {
 		'card_title'   => 'text-neutral-900 dark:text-neutral-100',
 		'meta'         => 'text-neutral-500 dark:text-neutral-400',
 		'excerpt'      => 'text-neutral-600 dark:text-neutral-300',
-		'read_more'    => 'text-blue-chill-600 dark:text-blue-chill-300',
+		'read_more'    => 'text-neutral-600 dark:text-neutral-300',
 		'tag_bg'       => 'bg-neutral-900/70 dark:bg-neutral-950/80',
 		'tag_text'     => 'text-white dark:text-white',
 		'cta_button'   => 'bg-neutral-200 text-neutral-900 hover:bg-neutral-300 dark:bg-neutral-700 dark:text-neutral-100 dark:hover:bg-neutral-600 focus:ring-2 focus:ring-primary focus:ring-offset-2 focus:ring-offset-white dark:focus:ring-offset-neutral-900',

package/widgets/card-hover-reveal/data/view.php

@@ -117,7 +117,7 @@ function prepare_card_hover_reveal_view( array $settings, string $widget_id ): a
 		'section'     => 'bg-white dark:bg-neutral-900',
 		'headline'    => 'text-neutral-900 dark:text-white',
 		'header_cta'  => 'inline-flex items-center gap-2 px-4 py-2.5 rounded-lg bg-neutral-100 dark:bg-neutral-800 text-neutral-900 dark:text-white font-medium hover:bg-neutral-200 dark:hover:bg-neutral-700 focus:outline-none focus:ring-2 focus:ring-primary focus:ring-offset-2 transition-colors',
-		'bar_bg'      => 'bg-zinc-900/60 border-t border-white-100/10 dark:bg-zinc-900/70 dark:border-white-100/10 backdrop-blur-sm',
+		'bar_bg'      => 'bg-neutral-900/60 border-t border-white-100/10 dark:bg-neutral-900/70 dark:border-white-100/10 backdrop-blur-sm',
 		'title'       => 'text-white font-bold',
 		'description' => 'text-white/90',
 		'cta_focus'   => 'focus:ring-white focus:ring-offset-2 focus:ring-offset-neutral-900 dark:focus:ring-offset-neutral-950',

package/widgets/content-block/data/view.php

@@ -84,10 +84,10 @@ function prepare_content_block_view( array $settings, string $widget_id ): array
 	$animation = sociallane_animation_view_data( $settings, [ 'headline' => true ] );
 
 	$classes = [
-		'section' => 'bg-neutral-100 text-blue-chill-950 dark:bg-zinc-900',
-		'text'    => 'text-blue-chill-950 dark:text-neutral-200',
-		'subtext' => 'text-blue-chill-950 dark:text-neutral-200',
-		'eyebrow' => 'text-blue-chill-950 dark:text-primary-light',
+		'section' => 'bg-neutral-100 text-neutral-950 dark:bg-neutral-900',
+		'text'    => 'text-neutral-950 dark:text-neutral-200',
+		'subtext' => 'text-neutral-950 dark:text-neutral-200',
+		'eyebrow' => 'text-neutral-950 dark:text-primary-light',
 	];
 
 	// First block title id for aria-labelledby (used when any block has a title)

package/widgets/cta-banner/data/view.php

@@ -70,13 +70,13 @@ function prepare_cta_banner_view( array $settings, string $widget_id ): array {
 
 	// Dark slate overlay (matches design: #313D4D feel), white text, teal/cyan icons
 	$classes = [
-		'overlay'     => 'bg-blue-chill-900 dark:bg-blue-chill-950',
+		'overlay'     => 'bg-neutral-900 dark:bg-neutral-950',
 		'headline'    => 'text-white dark:text-white',
 		'description' => 'text-white/90 dark:text-neutral-200',
 		'contact'     => 'text-white dark:text-white',
-		'icon'        => 'text-blue-chill-300 dark:text-blue-chill-400',
+		'icon'        => 'text-neutral-300 dark:text-neutral-400',
 		'separator'   => 'text-white/50 dark:text-neutral-400',
-		'cta_focus'   => 'focus:ring-white focus:ring-offset-blue-chill-900 dark:focus:ring-offset-blue-chill-950',
+		'cta_focus'   => 'focus:ring-white focus:ring-offset-neutral-900 dark:focus:ring-offset-neutral-950',
 	];
 
 	return [

package/widgets/cta-banner/templates/wrapper.php

@@ -84,7 +84,7 @@ $has_heading   = $has_headline || $has_description;
 					<?php if ( ! empty( $view['phone'] ) ) : ?>
 						<a
 							href="<?php echo esc_url( $view['phone']['url'] ); ?>"
-							class="<?php echo esc_attr( $view['classes']['contact'] ); ?> inline-flex items-center gap-2 hover:opacity-90 focus:outline-none focus:ring-2 focus:ring-white focus:ring-offset-2 focus:ring-offset-blue-chill-900 dark:focus:ring-offset-blue-chill-950 rounded transition-opacity"
+							class="<?php echo esc_attr( $view['classes']['contact'] ); ?> inline-flex items-center gap-2 hover:opacity-90 focus:outline-none focus:ring-2 focus:ring-white focus:ring-offset-2 focus:ring-offset-neutral-900 dark:focus:ring-offset-neutral-950 rounded transition-opacity"
 							aria-label="<?php echo esc_attr( sprintf( /* translators: phone number */ __( 'Call %s', 'sociallane-elements' ), $view['phone']['label'] ) ); ?>"
 						>
 							<svg class="w-5 h-5 shrink-0 <?php echo esc_attr( $view['classes']['icon'] ); ?>" fill="currentColor" viewBox="0 0 20 20" aria-hidden="true">
@@ -101,7 +101,7 @@ $has_heading   = $has_headline || $has_description;
 					<?php if ( ! empty( $view['email'] ) ) : ?>
 						<a
 							href="<?php echo esc_url( $view['email']['url'] ); ?>"
-							class="<?php echo esc_attr( $view['classes']['contact'] ); ?> inline-flex items-center gap-2 hover:opacity-90 focus:outline-none focus:ring-2 focus:ring-white focus:ring-offset-2 focus:ring-offset-blue-chill-900 dark:focus:ring-offset-blue-chill-950 rounded transition-opacity"
+							class="<?php echo esc_attr( $view['classes']['contact'] ); ?> inline-flex items-center gap-2 hover:opacity-90 focus:outline-none focus:ring-2 focus:ring-white focus:ring-offset-2 focus:ring-offset-neutral-900 dark:focus:ring-offset-neutral-950 rounded transition-opacity"
 							aria-label="<?php echo esc_attr( sprintf( /* translators: email address */ __( 'Email %s', 'sociallane-elements' ), $view['email']['label'] ) ); ?>"
 						>
 							<svg class="w-5 h-5 shrink-0 <?php echo esc_attr( $view['classes']['icon'] ); ?>" fill="currentColor" viewBox="0 0 20 20" aria-hidden="true">

package/widgets/cta-split/data/view.php

@@ -58,13 +58,13 @@ function prepare_cta_split_view( array $settings, string $widget_id ): array {
 
 	// Dark slate left panel (#2E3E4C), white headline, lighter grey description, teal contact (#34D399)
 	$classes = [
-		'panel'       => 'bg-blue-chill-900 dark:bg-blue-chill-950',
+		'panel'       => 'bg-neutral-900 dark:bg-neutral-950',
 		'headline'    => 'text-white dark:text-white',
 		'description' => 'text-white/90 dark:text-neutral-200',
-		'contact'     => 'text-emerald-400 dark:text-emerald-400',
-		'icon'        => 'text-emerald-400 dark:text-emerald-400 shrink-0',
+		'contact'     => 'text-neutral-400 dark:text-neutral-400',
+		'icon'        => 'text-neutral-400 dark:text-neutral-400 shrink-0',
 		'separator'   => 'text-white/50 dark:text-neutral-400',
-		'focus_ring'  => 'focus:ring-emerald-400 focus:ring-offset-2 focus:ring-offset-blue-chill-900 dark:focus:ring-offset-blue-chill-950',
+		'focus_ring'  => 'focus:ring-neutral-400 focus:ring-offset-2 focus:ring-offset-neutral-900 dark:focus:ring-offset-neutral-950',
 	];
 
 	return [

package/widgets/faq/data/view.php

@@ -68,15 +68,15 @@ function prepare_faq_view( array $settings, string $widget_id ): array {
 
 	// Light/dark mode classes (all color/theme here — templates only echo these)
 	$classes = [
-		'section'      => 'bg-neutral-100 dark:bg-zinc-900',
-		'title'        => 'text-zinc-900 dark:text-neutral-200',
-		'description'  => 'text-zinc-900 dark:text-neutral-200',
-		'item_border'  => 'border-neutral-200 dark:border-blue-chill-100/0',
+		'section'      => 'bg-neutral-100 dark:bg-neutral-900',
+		'title'        => 'text-neutral-900 dark:text-neutral-200',
+		'description'  => 'text-neutral-900 dark:text-neutral-200',
+		'item_border'  => 'border-neutral-200 dark:border-neutral-100/0',
 		'item_bg'      => 'bg-transparent',
-		'question'     => 'text-zinc-900 dark:text-neutral-200',
-		'answer'       => 'text-zinc-900 dark:text-neutral-200',
+		'question'     => 'text-neutral-900 dark:text-neutral-200',
+		'answer'       => 'text-neutral-900 dark:text-neutral-200',
 		'summary_focus'=> 'focus:ring-primary focus:ring-offset-2 focus:ring-offset-white dark:focus:ring-offset-neutral-900',
-		'chevron'      => 'bg-blue-chill-300 dark:bg-neutral-800 text-neutral-600 dark:text-blue-chill-300',
+		'chevron'      => 'bg-neutral-300 dark:bg-neutral-800 text-neutral-600 dark:text-neutral-300',
 	];
 
 	// Schema for FAQPage (for SEO JSON-LD)

package/widgets/faq/templates/partials/accordion.php

@@ -18,12 +18,12 @@ if ( ! is_array( $view ?? null ) || ! is_array( $view['items'] ?? null ) || empt
 
 $items       = $view['items'];
 $faq_classes = is_array( $view['classes'] ?? null ) ? $view['classes'] : [
-	'item_border'   => 'border-neutral-200 dark:border-blue-chill-100/0',
+	'item_border'   => 'border-neutral-200 dark:border-neutral-100/0',
 	'item_bg'       => 'bg-transparent',
-	'question'      => 'text-zinc-900 dark:text-neutral-200',
-	'answer'        => 'text-zinc-900 dark:text-neutral-200',
+	'question'      => 'text-neutral-900 dark:text-neutral-200',
+	'answer'        => 'text-neutral-900 dark:text-neutral-200',
 	'summary_focus' => 'focus:ring-primary focus:ring-offset-2 focus:ring-offset-white dark:focus:ring-offset-neutral-900',
-	'chevron'       => 'bg-blue-chill-300 dark:bg-neutral-800 text-neutral-600 dark:text-blue-chill-300',
+	'chevron'       => 'bg-neutral-300 dark:bg-neutral-800 text-neutral-600 dark:text-neutral-300',
 ];
 $elements_path = defined( 'SOCIALLANE_ELEMENTS_PATH' ) ? SOCIALLANE_ELEMENTS_PATH . 'elements' : '';
 $stagger_attrs = isset( $stagger_attrs ) ? $stagger_attrs : '';

package/widgets/feature-grid/data/view.php

@@ -92,14 +92,14 @@ function prepare_feature_grid_view( array $settings, string $widget_id ): array
 	|
 	*/
 	$classes = [
-		'section'     => 'bg-neutral-100 dark:bg-zinc-900',
-		'headline'    => 'text-zinc-900 dark:text-neutral-200',
-		'subtitle'    => 'text-zinc-900 dark:text-neutral-200',
-		'eyebrow'     => 'text-zinc-900 dark:text-neutral-200',
-		'description' => 'text-zinc-900 dark:text-neutral-200',
-		'title'       => 'text-zinc-900 dark:text-neutral-200',
-		'link'        => 'text-zinc-900 dark:text-neutral-200 hover:underline focus:outline-none focus:ring-2 focus:ring-primary focus:ring-offset-2 focus:ring-offset-white dark:focus:ring-offset-neutral-900',
-		'icon_box'    => 'bg-zinc-400 dark:bg-zinc-700 text-zinc-900 rounded-lg',
+		'section'     => 'bg-neutral-100 dark:bg-neutral-900',
+		'headline'    => 'text-neutral-900 dark:text-neutral-200',
+		'subtitle'    => 'text-neutral-900 dark:text-neutral-200',
+		'eyebrow'     => 'text-neutral-900 dark:text-neutral-200',
+		'description' => 'text-neutral-900 dark:text-neutral-200',
+		'title'       => 'text-neutral-900 dark:text-neutral-200',
+		'link'        => 'text-neutral-900 dark:text-neutral-200 hover:underline focus:outline-none focus:ring-2 focus:ring-primary focus:ring-offset-2 focus:ring-offset-white dark:focus:ring-offset-neutral-900',
+		'icon_box'    => 'bg-neutral-400 dark:bg-neutral-700 text-neutral-900 rounded-lg',
 		'icon'        => 'w-6 h-6 text-white',
 	];
 

package/widgets/feature-list/data/view.php

@@ -37,10 +37,10 @@ function prepare_feature_list_view( array $settings, string $widget_id ): array
 
 	// Light background (#F8F8F8), title dark grey, list items lighter grey, checkmark teal
 	$classes = [
-		'section' => 'bg-neutral-100 dark:bg-zinc-900',
-		'title'   => 'text-zinc-800 dark:text-neutral-100 font-bold font-heading',
-		'item'    => 'text-zinc-600 dark:text-neutral-300',
-		'icon'    => 'text-emerald-500 dark:text-emerald-400 shrink-0',
+		'section' => 'bg-neutral-100 dark:bg-neutral-900',
+		'title'   => 'text-neutral-800 dark:text-neutral-100 font-bold font-heading',
+		'item'    => 'text-neutral-600 dark:text-neutral-300',
+		'icon'    => 'text-neutral-500 dark:text-neutral-400 shrink-0',
 	];
 
 	return [

package/widgets/feature-list-cta/data/view.php

@@ -62,13 +62,13 @@ function prepare_feature_list_cta_view( array $settings, string $widget_id ): ar
 
 	// Light/dark: dual classes for Nav theme switcher (elementor-widget-structure, widget-utility-classes)
 	$classes = [
-		'section'     => 'bg-neutral-100 dark:bg-blue-chill-950',
-		'headline'    => 'text-blue-chill-950 dark:text-white',
-		'subtitle'    => 'text-blue-chill-950 dark:text-blue-chill-100/50',
-		'card_title'  => 'text-blue-chill-950 dark:text-blue-chill-300',
-		'card_desc'   => 'text-neutral-600 dark:text-blue-chill-100/50',
+		'section'     => 'bg-neutral-100 dark:bg-neutral-950',
+		'headline'    => 'text-neutral-950 dark:text-white',
+		'subtitle'    => 'text-neutral-950 dark:text-neutral-100/50',
+		'card_title'  => 'text-neutral-950 dark:text-neutral-300',
+		'card_desc'   => 'text-neutral-600 dark:text-neutral-100/50',
 		'link'        => 'text-primary dark:text-primary-light hover:underline focus:outline-none focus:ring-2 focus:ring-primary focus:ring-offset-2 focus:ring-offset-white dark:focus:ring-offset-neutral-900',
-		'icon'        => 'text-primary dark:text-blue-chill-300',
+		'icon'        => 'text-primary dark:text-neutral-300',
 	];
 
 	return [

package/widgets/feature-list-cta/templates/partials/feature-item.php

@@ -20,7 +20,7 @@ $classes = $view['classes'] ?? [];
 ?>
 <article class="flex flex-col items-center text-center">
 	<?php if ( ! empty( $feature['icon']['value'] ) ) : ?>
-		<div class="<?php echo esc_attr( $classes['icon'] ?? 'text-blue-chill-300' ); ?> mb-4 [&_.e-icon]:w-12 [&_.e-icon]:h-12" aria-hidden="true">
+		<div class="<?php echo esc_attr( $classes['icon'] ?? 'text-neutral-300' ); ?> mb-4 [&_.e-icon]:w-12 [&_.e-icon]:h-12" aria-hidden="true">
 			<?php \Elementor\Icons_Manager::render_icon( $feature['icon'], [ 'aria-hidden' => 'true', 'class' => 'w-12 h-12' ] ); ?>
 		</div>
 	<?php endif; ?>

package/widgets/footer/data/view.php

@@ -105,12 +105,12 @@ function prepare_footer_view( array $settings, string $widget_id ): array {
 	|
 	*/
 	$classes = [
-		'section'           => 'bg-neutral-200 dark:bg-zinc-900',
-		'cta_heading'      => 'text-zinc-900 dark:text-neutral-200',
+		'section'           => 'bg-neutral-200 dark:bg-neutral-900',
+		'cta_heading'      => 'text-neutral-900 dark:text-neutral-200',
 		'cta_primary_class'=> 'focus:ring-offset-white dark:focus:ring-offset-neutral-900',
 		'cta_secondary_class' => 'border-neutral-300 dark:border-neutral-500 text-neutral-900 dark:text-white hover:bg-neutral-900 dark:hover:bg-neutral-100 hover:text-white dark:hover:text-neutral-900 focus:ring-2 focus:ring-primary focus:ring-offset-2 focus:ring-offset-white dark:focus:ring-offset-neutral-900',
-		'col_heading'      => 'text-zinc-900 dark:text-neutral-200 font-bold uppercase tracking-wider text-sm',
-		'link'             => 'text-zinc-600 dark:text-neutral-200 hover:text-neutral-900 dark:hover:text-neutral-100 transition-colors focus:outline-none focus:ring-2 focus:ring-primary focus:ring-offset-2 focus:ring-offset-white dark:focus:ring-offset-neutral-900',
+		'col_heading'      => 'text-neutral-900 dark:text-neutral-200 font-bold uppercase tracking-wider text-sm',
+		'link'             => 'text-neutral-600 dark:text-neutral-200 hover:text-neutral-900 dark:hover:text-neutral-100 transition-colors focus:outline-none focus:ring-2 focus:ring-primary focus:ring-offset-2 focus:ring-offset-white dark:focus:ring-offset-neutral-900',
 		'copyright'        => 'text-neutral-600 dark:text-neutral-400 text-sm',
 		'divider'          => 'border-neutral-200 dark:border-neutral-700',
 		'select_bg'        => 'bg-neutral-100 dark:bg-neutral-800 text-neutral-700 dark:text-neutral-300 border-neutral-200 dark:border-neutral-600 focus:outline-none focus:ring-2 focus:ring-primary focus:ring-offset-2 focus:ring-offset-white dark:focus:ring-offset-neutral-900',

package/widgets/footer-brand/data/view.php

@@ -91,21 +91,21 @@ function prepare_footer_brand_view( array $settings, string $widget_id ): array
 
 	// Light/dark: dual classes for Nav theme switcher (elementor-widget-structure, widget-utility-classes)
 	$classes = [
-		'section'     => 'bg-white dark:bg-gradient-to-t from-blue-chill-900 dark:via-blue-chill-950 dark:to-neutral-950',
-		'col_heading' => 'text-neutral-900 dark:text-blue-chill-200 font-normal font-heading uppercase tracking-wider text-sm',
-		'link'        => 'text-neutral-600 dark:text-blue-chill-200 hover:text-neutral-900 dark:hover:text-white transition-colors',
-		'copyright'   => 'text-neutral-600 dark:text-blue-chill-200 text-sm',
-		'divider'     => 'border-neutral-200 dark:border-blue-chill-200',
-		'description' => 'text-neutral-600 dark:text-blue-chill-200 text-sm leading-relaxed',
-		'logo_text'   => 'text-neutral-900 dark:text-blue-chill-200',
-		'social_icon' => 'text-neutral-600 dark:text-blue-chill-200',
-		'social_href' => 'text-neutral-600 dark:text-blue-chill-200',
-		'social_attrs' => 'text-neutral-600 dark:text-blue-chill-200',
-		'social_aria_label' => 'text-neutral-600 dark:text-blue-chill-200',
-		'social_icon' => 'text-neutral-600 dark:text-blue-chill-200',
-		'social_href' => 'text-neutral-600 dark:text-blue-chill-200',
-		'social_attrs' => 'text-neutral-600 dark:text-blue-chill-200',
-		'social_aria_label' => 'text-neutral-600 dark:text-blue-chill-200',
+		'section'     => 'bg-white dark:bg-gradient-to-t from-neutral-900 dark:via-neutral-950 dark:to-neutral-950',
+		'col_heading' => 'text-neutral-900 dark:text-neutral-200 font-normal font-heading uppercase tracking-wider text-sm',
+		'link'        => 'text-neutral-600 dark:text-neutral-200 hover:text-neutral-900 dark:hover:text-white transition-colors',
+		'copyright'   => 'text-neutral-600 dark:text-neutral-200 text-sm',
+		'divider'     => 'border-neutral-200 dark:border-neutral-200',
+		'description' => 'text-neutral-600 dark:text-neutral-200 text-sm leading-relaxed',
+		'logo_text'   => 'text-neutral-900 dark:text-neutral-200',
+		'social_icon' => 'text-neutral-600 dark:text-neutral-200',
+		'social_href' => 'text-neutral-600 dark:text-neutral-200',
+		'social_attrs' => 'text-neutral-600 dark:text-neutral-200',
+		'social_aria_label' => 'text-neutral-600 dark:text-neutral-200',
+		'social_icon' => 'text-neutral-600 dark:text-neutral-200',
+		'social_href' => 'text-neutral-600 dark:text-neutral-200',
+		'social_attrs' => 'text-neutral-600 dark:text-neutral-200',
+		'social_aria_label' => 'text-neutral-600 dark:text-neutral-200',
 	];
 
 	return [