cinqcinqdev-seo 0.1.32 → 0.1.34

package/dist/module.json

@@ -4,7 +4,7 @@
   "compatibility": {
     "nuxt": ">=3.0.0"
   },
-  "version": "0.1.32",
+  "version": "0.1.34",
   "builder": {
     "@nuxt/module-builder": "1.0.2",
     "unbuild": "unknown"

package/dist/runtime/components/sections/ContactForm.vue

@@ -5,7 +5,7 @@
       <!-- SPLIT layout -->
       <div v-if="layout === 'split'" class="grid grid-cols-1 md:grid-cols-2 gap-16 items-start">
         <div>
-          <span v-if="badge" class="inline-block text-[10px] font-bold tracking-[0.5em] uppercase px-3 py-1 rounded-full border mb-4" :style="{ borderColor: textColor + '25', color: textColor + 'aa' }">{{ badge }}</span>
+          <span v-if="badge" class="inline-block text-[10px] font-bold tracking-[0.5em] uppercase px-3 py-1 rounded-full border mb-4" :style="{ borderColor: ca(textColor, '25'), color: ca(textColor, 'aa') }">{{ badge }}</span>
           <component :is="titleTag" class="text-3xl md:text-5xl font-black uppercase tracking-tighter leading-[0.9] mb-4">{{ title }}</component>
           <p v-if="description" class="text-sm leading-relaxed mb-8" :style="{ opacity: 0.55 }">{{ description }}</p>
           <div v-if="infos && infos.length" class="space-y-4">
@@ -18,17 +18,17 @@
             </div>
           </div>
         </div>
-        <div :class="['p-8 border', cardRound]" :style="{ backgroundColor: textColor + '04', borderColor: textColor + '10' }">
+        <div :class="['p-8 border', cardRound]" :style="{ backgroundColor: ca(textColor, '04'), borderColor: ca(textColor, '10') }">
           <form @submit.prevent="handleSubmit" class="space-y-5">
             <slot name="fields">
               <div v-for="field in fields" :key="field.name" class="flex flex-col gap-1.5">
                 <label class="text-[11px] font-black uppercase tracking-widest" :style="{ opacity: 0.5 }">{{ field.label }}<span v-if="field.required" class="ml-0.5" :style="{ opacity: 0.4 }">*</span></label>
                 <textarea v-if="field.type === 'textarea'" v-model="formData[field.name]" :placeholder="field.placeholder" :required="field.required" rows="4"
                   class="w-full px-4 py-3 rounded-xl text-sm resize-none"
-                  :style="{ backgroundColor: textColor + '08', border: `1px solid ${textColor}15`, color: textColor, outline: 'none' }"></textarea>
+                  :style="{ backgroundColor: ca(textColor, '08'), border: `1px solid ${ca(textColor, '15')}`, color: textColor, outline: 'none' }"></textarea>
                 <input v-else v-model="formData[field.name]" :type="field.type || 'text'" :placeholder="field.placeholder" :required="field.required"
                   class="w-full px-4 py-3 rounded-xl text-sm"
-                  :style="{ backgroundColor: textColor + '08', border: `1px solid ${textColor}15`, color: textColor, outline: 'none' }" />
+                  :style="{ backgroundColor: ca(textColor, '08'), border: `1px solid ${ca(textColor, '15')}`, color: textColor, outline: 'none' }" />
               </div>
             </slot>
             <button type="submit" :disabled="submitting"
@@ -43,7 +43,7 @@
 
       <!-- CENTERED layout -->
       <div v-else-if="layout === 'centered'" class="max-w-xl mx-auto text-center">
-        <span v-if="badge" class="inline-block text-[10px] font-bold tracking-[0.5em] uppercase px-3 py-1 rounded-full border mb-4" :style="{ borderColor: textColor + '25', color: textColor + 'aa' }">{{ badge }}</span>
+        <span v-if="badge" class="inline-block text-[10px] font-bold tracking-[0.5em] uppercase px-3 py-1 rounded-full border mb-4" :style="{ borderColor: ca(textColor, '25'), color: ca(textColor, 'aa') }">{{ badge }}</span>
         <component :is="titleTag" class="text-3xl md:text-5xl font-black uppercase tracking-tighter leading-[0.9] mb-4">{{ title }}</component>
         <p v-if="description" class="text-sm leading-relaxed mb-10" :style="{ opacity: 0.55 }">{{ description }}</p>
         <form @submit.prevent="handleSubmit" class="space-y-4 text-left">
@@ -51,10 +51,10 @@
             <label class="text-[11px] font-black uppercase tracking-widest" :style="{ opacity: 0.5 }">{{ field.label }}<span v-if="field.required" class="ml-0.5" :style="{ opacity: 0.4 }">*</span></label>
             <textarea v-if="field.type === 'textarea'" v-model="formData[field.name]" :placeholder="field.placeholder" :required="field.required" rows="4"
               class="w-full px-4 py-3 rounded-xl text-sm resize-none"
-              :style="{ backgroundColor: textColor + '08', border: `1px solid ${textColor}15`, color: textColor, outline: 'none' }"></textarea>
+              :style="{ backgroundColor: ca(textColor, '08'), border: `1px solid ${ca(textColor, '15')}`, color: textColor, outline: 'none' }"></textarea>
             <input v-else v-model="formData[field.name]" :type="field.type || 'text'" :placeholder="field.placeholder" :required="field.required"
               class="w-full px-4 py-3 rounded-xl text-sm"
-              :style="{ backgroundColor: textColor + '08', border: `1px solid ${textColor}15`, color: textColor, outline: 'none' }" />
+              :style="{ backgroundColor: ca(textColor, '08'), border: `1px solid ${ca(textColor, '15')}`, color: textColor, outline: 'none' }" />
           </div>
           <button type="submit" :disabled="submitting"
             class="w-full py-3.5 rounded-full text-[11px] font-black uppercase tracking-widest transition-all hover:opacity-80 active:scale-95 disabled:opacity-50"
@@ -67,11 +67,11 @@
 
       <!-- MINIMAL layout (default) -->
       <div v-else class="max-w-2xl">
-        <span v-if="badge" class="inline-block text-[10px] font-bold tracking-[0.5em] uppercase px-3 py-1 rounded-full border mb-4" :style="{ borderColor: textColor + '25', color: textColor + 'aa' }">{{ badge }}</span>
+        <span v-if="badge" class="inline-block text-[10px] font-bold tracking-[0.5em] uppercase px-3 py-1 rounded-full border mb-4" :style="{ borderColor: ca(textColor, '25'), color: ca(textColor, 'aa') }">{{ badge }}</span>
         <component :is="titleTag" class="text-3xl md:text-5xl font-black uppercase tracking-tighter leading-[0.9] mb-4">{{ title }}</component>
         <p v-if="description" class="text-sm leading-relaxed mb-10" :style="{ opacity: 0.55 }">{{ description }}</p>
         <form @submit.prevent="handleSubmit" class="space-y-6">
-          <div v-for="field in fields" :key="field.name" class="flex flex-col gap-2 border-b pb-6" :style="{ borderColor: textColor + '10' }">
+          <div v-for="field in fields" :key="field.name" class="flex flex-col gap-2 border-b pb-6" :style="{ borderColor: ca(textColor, '10') }">
             <label class="text-[10px] font-black uppercase tracking-widest" :style="{ opacity: 0.4 }">{{ field.label }}<span v-if="field.required" class="ml-0.5">*</span></label>
             <textarea v-if="field.type === 'textarea'" v-model="formData[field.name]" :placeholder="field.placeholder" :required="field.required" rows="3"
               class="w-full bg-transparent text-sm resize-none"
@@ -96,6 +96,10 @@
 </template>
 
 <script setup>
+const ca = (c, h) => {
+  const m = c.match(/rgba\((var\([^)]+\)),\s*[\d.]+\)/);
+  return m ? `rgba(${m[1]}, ${Math.round(parseInt(h, 16) / 255 * 1e3) / 1e3})` : c + h;
+};
 import { ref, reactive, computed } from "vue";
 const props = defineProps({
   layout: { type: String, default: "split" },
@@ -114,8 +118,8 @@ const props = defineProps({
     ]
   },
   infos: { type: Array, default: () => [] },
-  bgColor: { type: String, default: "#ffffff" },
-  textColor: { type: String, default: "#000000" },
+  bgColor: { type: String, default: "rgba(var(--body-bg), 1)" },
+  textColor: { type: String, default: "rgba(var(--text-color), 1)" },
   spacing: { type: String, default: "normal" },
   radius: { type: String, default: "rounded" }
 });

package/dist/runtime/components/sections/FAQ.vue

@@ -7,7 +7,7 @@
       <div class="space-y-3">
         <div v-for="(item, index) in items" :key="index"
           :class="['overflow-hidden border transition-all duration-300', cardRound]"
-          :style="{ backgroundColor: textColor + '04', borderColor: textColor + '10' }">
+          :style="{ backgroundColor: ca(textColor, '04'), borderColor: ca(textColor, '10') }">
           <button @click="toggle(index)" class="w-full flex items-center justify-between p-7 text-left cursor-pointer">
             <span class="text-sm md:text-base font-black uppercase tracking-tight pr-8 leading-snug">{{ item.question }}</span>
             <span class="text-2xl font-light shrink-0 transition-transform duration-300" :style="{ transform: openIndex === index ? 'rotate(45deg)' : 'none' }">+</span>
@@ -18,8 +18,8 @@
         </div>
         <div v-if="!items.length" v-for="n in 3" :key="n"
           :class="['border p-7', cardRound]"
-          :style="{ backgroundColor: textColor + '04', borderColor: textColor + '10' }">
-          <div class="h-4 rounded" :style="{ backgroundColor: textColor + '15', width: n === 1 ? '70%' : n === 2 ? '55%' : '65%' }"></div>
+          :style="{ backgroundColor: ca(textColor, '04'), borderColor: ca(textColor, '10') }">
+          <div class="h-4 rounded" :style="{ backgroundColor: ca(textColor, '15'), width: n === 1 ? '70%' : n === 2 ? '55%' : '65%' }"></div>
         </div>
       </div>
     </div>
@@ -27,13 +27,17 @@
 </template>
 
 <script setup>
+const ca = (c, h) => {
+  const m = c.match(/rgba\((var\([^)]+\)),\s*[\d.]+\)/);
+  return m ? `rgba(${m[1]}, ${Math.round(parseInt(h, 16) / 255 * 1e3) / 1e3})` : c + h;
+};
 import { ref, computed } from "vue";
 const props = defineProps({
   title: { type: String, default: "FAQ" },
   titleTag: { type: String, default: "h2" },
   items: { type: Array, default: () => [] },
-  bgColor: { type: String, default: "#F9F9FB" },
-  textColor: { type: String, default: "#000000" },
+  bgColor: { type: String, default: "rgba(var(--body-bg), 1)" },
+  textColor: { type: String, default: "rgba(var(--text-color), 1)" },
   spacing: { type: String, default: "normal" },
   radius: { type: String, default: "rounded" }
 });

package/dist/runtime/components/sections/Features.vue

@@ -4,7 +4,7 @@
       <div class="mb-16 md:mb-20">
         <component :is="titleTag" class="text-4xl md:text-6xl font-black uppercase tracking-tighter leading-none max-w-4xl italic">{{ title }}</component>
       </div>
-      <div v-if="items.length" :class="['grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-px overflow-hidden', cardRound]" :style="{ backgroundColor: textColor + '10', border: `1px solid ${textColor}10` }">
+      <div v-if="items.length" :class="['grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-px overflow-hidden', cardRound]" :style="{ backgroundColor: ca(textColor, '10'), border: `1px solid ${ca(textColor, '10')}` }">
         <div v-for="(item, index) in items" :key="index" class="p-10 transition-all duration-300 hover:brightness-95" :style="{ backgroundColor: bgColor }">
           <div class="flex flex-col h-full">
             <span class="text-[10px] font-black opacity-20 mb-8 tracking-widest">{{ index < 9 ? '0' : '' }}{{ index + 1 }}</span>
@@ -13,11 +13,11 @@
           </div>
         </div>
       </div>
-      <div v-else :class="['grid grid-cols-1 md:grid-cols-3 gap-px overflow-hidden', cardRound]" :style="{ backgroundColor: textColor + '10', border: `1px solid ${textColor}10` }">
+      <div v-else :class="['grid grid-cols-1 md:grid-cols-3 gap-px overflow-hidden', cardRound]" :style="{ backgroundColor: ca(textColor, '10'), border: `1px solid ${ca(textColor, '10')}` }">
         <div v-for="n in 3" :key="n" class="p-10" :style="{ backgroundColor: bgColor }">
           <span class="text-[10px] font-black opacity-20 mb-8 tracking-widest block">0{{ n }}</span>
-          <div class="h-4 rounded mb-3" :style="{ backgroundColor: textColor + '12', width: '60%' }"></div>
-          <div class="h-3 rounded" :style="{ backgroundColor: textColor + '08', width: '80%' }"></div>
+          <div class="h-4 rounded mb-3" :style="{ backgroundColor: ca(textColor, '12'), width: '60%' }"></div>
+          <div class="h-3 rounded" :style="{ backgroundColor: ca(textColor, '08'), width: '80%' }"></div>
         </div>
       </div>
     </div>
@@ -25,14 +25,18 @@
 </template>
 
 <script setup>
+const ca = (c, h) => {
+  const m = c.match(/rgba\((var\([^)]+\)),\s*[\d.]+\)/);
+  return m ? `rgba(${m[1]}, ${Math.round(parseInt(h, 16) / 255 * 1e3) / 1e3})` : c + h;
+};
 import { computed } from "vue";
 const props = defineProps({
   title: { type: String, default: "Why choose us?" },
   titleTag: { type: String, default: "h2" },
   itemTag: { type: String, default: "h3" },
   items: { type: Array, default: () => [] },
-  bgColor: { type: String, default: "#ffffff" },
-  textColor: { type: String, default: "#000000" },
+  bgColor: { type: String, default: "rgba(var(--body-bg), 1)" },
+  textColor: { type: String, default: "rgba(var(--text-color), 1)" },
   spacing: { type: String, default: "normal" },
   radius: { type: String, default: "rounded" }
 });

package/dist/runtime/components/sections/HeroSection.vue

@@ -4,8 +4,8 @@
     <!-- CENTERED -->
     <div v-if="layout === 'centered'" class="px-6 md:px-12 pt-20 pb-16 text-center">
       <div class="max-w-4xl mx-auto">
-        <span v-if="badge" class="inline-flex items-center gap-1.5 text-[10px] font-bold tracking-[0.4em] uppercase px-4 py-1.5 rounded-full border mb-8" :style="{ borderColor: textColor + '30', color: textColor + '80' }">
-          <span class="w-1.5 h-1.5 rounded-full inline-block" :style="{ backgroundColor: textColor + '60' }"></span>{{ badge }}
+        <span v-if="badge" class="inline-flex items-center gap-1.5 text-[10px] font-bold tracking-[0.4em] uppercase px-4 py-1.5 rounded-full border mb-8" :style="{ borderColor: ca(textColor, '30'), color: ca(textColor, '80') }">
+          <span class="w-1.5 h-1.5 rounded-full inline-block" :style="{ backgroundColor: ca(textColor, '60') }"></span>{{ badge }}
         </span>
         <component :is="titleTag" class="font-black uppercase tracking-tighter leading-[0.88] mb-6" :style="{ fontSize: titleSize === 'sm' ? 'clamp(2.5rem,5vw,4rem)' : titleSize === 'lg' ? 'clamp(3.5rem,9vw,8rem)' : 'clamp(3rem,7vw,6rem)' }">{{ title }}</component>
         <p class="text-sm leading-relaxed max-w-lg mx-auto mb-10" :style="{ opacity: 0.5 }">{{ subtitle }}</p>
@@ -27,7 +27,7 @@
         </div>
         <div :class="['aspect-[4/3] overflow-hidden', cardRound]">
           <img v-if="image" :src="image" class="w-full h-full object-cover" />
-          <div v-else class="w-full h-full" :style="{ backgroundColor: textColor + '06' }"></div>
+          <div v-else class="w-full h-full" :style="{ backgroundColor: ca(textColor, '06') }"></div>
         </div>
       </div>
     </div>
@@ -35,7 +35,7 @@
     <!-- BENTO -->
     <div v-else-if="layout === 'bento'" class="p-3 md:p-5">
       <div class="max-w-6xl mx-auto grid grid-cols-12 gap-3">
-        <div :class="['col-span-12 md:col-span-7 p-8 md:p-10 border flex flex-col justify-between min-h-[320px]', cardRound]" :style="{ borderColor: textColor + '10', backgroundColor: textColor + '04' }">
+        <div :class="['col-span-12 md:col-span-7 p-8 md:p-10 border flex flex-col justify-between min-h-[320px]', cardRound]" :style="{ borderColor: ca(textColor, '10'), backgroundColor: ca(textColor, '04') }">
           <span v-if="badge" class="text-[9px] font-black uppercase tracking-[0.4em] opacity-30">{{ badge }}</span>
           <div>
             <component :is="titleTag" class="font-black uppercase tracking-tighter leading-[0.88] mb-4" :style="{ fontSize: 'clamp(2rem,4.5vw,3.8rem)' }">{{ title }}</component>
@@ -45,7 +45,7 @@
         </div>
         <div :class="['col-span-12 md:col-span-5 overflow-hidden min-h-[260px] md:min-h-[320px]', cardRound]">
           <img v-if="image" :src="image" class="w-full h-full object-cover" />
-          <div v-else class="w-full h-full" :style="{ backgroundColor: textColor + '08' }"></div>
+          <div v-else class="w-full h-full" :style="{ backgroundColor: ca(textColor, '08') }"></div>
         </div>
       </div>
     </div>
@@ -54,15 +54,15 @@
     <div v-else-if="layout === 'fullscreen'" class="relative min-h-[88vh] flex flex-col justify-end">
       <div class="absolute inset-0">
         <img v-if="image" :src="image" class="w-full h-full object-cover" />
-        <div v-else class="w-full h-full" :style="{ backgroundColor: textColor + '08' }"></div>
-        <div class="absolute inset-0" :style="{ background: `linear-gradient(to top, ${bgColor} 20%, ${bgColor}cc 40%, ${bgColor}44 65%, transparent 100%)` }"></div>
+        <div v-else class="w-full h-full" :style="{ backgroundColor: ca(textColor, '08') }"></div>
+        <div class="absolute inset-0" :style="{ background: `linear-gradient(to top, ${bgColor} 20%, ${ca(bgColor, 'cc')} 40%, ${ca(bgColor, '44')} 65%, transparent 100%)` }"></div>
       </div>
       <div class="relative z-10 max-w-6xl mx-auto w-full px-6 md:px-12 pb-14">
         <span v-if="badge" class="inline-block text-[9px] font-black uppercase tracking-[0.5em] opacity-40 mb-4">{{ badge }}</span>
         <component :is="titleTag" class="font-black uppercase tracking-tighter leading-[0.88] mb-6" :style="{ fontSize: 'clamp(3rem,8vw,7rem)' }">{{ title }}</component>
         <div class="flex flex-col sm:flex-row sm:items-center gap-6 sm:gap-10">
           <p class="text-sm leading-relaxed max-w-xs" :style="{ opacity: 0.6 }">{{ subtitle }}</p>
-          <NuxtLink :to="ctaLink || '#'" class="inline-flex items-center gap-2.5 px-7 py-3 rounded-full text-[11px] font-black uppercase tracking-widest border transition-all hover:gap-5 shrink-0" :style="{ borderColor: textColor + '50', color: textColor }">{{ ctaText }}<span>→</span></NuxtLink>
+          <NuxtLink :to="ctaLink || '#'" class="inline-flex items-center gap-2.5 px-7 py-3 rounded-full text-[11px] font-black uppercase tracking-widest border transition-all hover:gap-5 shrink-0" :style="{ borderColor: ca(textColor, '50'), color: textColor }">{{ ctaText }}<span>→</span></NuxtLink>
         </div>
       </div>
     </div>
@@ -70,16 +70,16 @@
     <!-- MINIMAL -->
     <div v-else-if="layout === 'minimal'" class="px-6 md:px-12 py-14">
       <div class="max-w-6xl mx-auto">
-        <div class="flex items-center gap-4 mb-10 border-b pb-5" :style="{ borderColor: textColor + '10' }">
+        <div class="flex items-center gap-4 mb-10 border-b pb-5" :style="{ borderColor: ca(textColor, '10') }">
           <span v-if="badge" class="text-[9px] font-black uppercase tracking-[0.5em] opacity-30">{{ badge }}</span>
-          <div class="flex-1 h-px" :style="{ backgroundColor: textColor + '08' }"></div>
+          <div class="flex-1 h-px" :style="{ backgroundColor: ca(textColor, '08') }"></div>
           <span class="text-[9px] font-black uppercase tracking-[0.5em] opacity-20">{{ ctaText }}</span>
         </div>
         <component :is="titleTag" class="font-black uppercase tracking-tighter leading-[0.85] mb-10" :style="{ fontSize: 'clamp(3.5rem,10vw,9rem)' }">{{ title }}</component>
         <div v-if="image" :class="['mb-10 overflow-hidden aspect-video', cardRound]">
           <img :src="image" class="w-full h-full object-cover" />
         </div>
-        <div class="flex flex-col md:flex-row items-start md:items-end justify-between gap-6 border-t pt-8" :style="{ borderColor: textColor + '10' }">
+        <div class="flex flex-col md:flex-row items-start md:items-end justify-between gap-6 border-t pt-8" :style="{ borderColor: ca(textColor, '10') }">
           <p class="text-sm leading-relaxed max-w-xs" :style="{ opacity: 0.5 }">{{ subtitle }}</p>
           <NuxtLink :to="ctaLink || '#'" class="inline-flex items-center gap-2.5 text-[11px] font-black uppercase tracking-widest transition-all hover:gap-5 shrink-0">{{ ctaText }}<span>→</span></NuxtLink>
         </div>
@@ -90,7 +90,7 @@
     <div v-else class="px-6 md:px-12 py-14">
       <div class="max-w-6xl mx-auto">
         <div class="flex items-center gap-4 mb-8">
-          <div class="w-8 h-px" :style="{ backgroundColor: textColor + '30' }"></div>
+          <div class="w-8 h-px" :style="{ backgroundColor: ca(textColor, '30') }"></div>
           <span class="text-[9px] font-black uppercase tracking-[0.5em] opacity-30">{{ badge || '—' }}</span>
         </div>
         <div class="flex flex-col md:flex-row md:items-end gap-8 mb-8">
@@ -99,7 +99,7 @@
             <img :src="image" class="w-full h-full object-cover" />
           </div>
         </div>
-        <div class="flex flex-col md:flex-row items-start md:items-center justify-between gap-6 border-t pt-8" :style="{ borderColor: textColor + '10' }">
+        <div class="flex flex-col md:flex-row items-start md:items-center justify-between gap-6 border-t pt-8" :style="{ borderColor: ca(textColor, '10') }">
           <p class="text-sm leading-relaxed max-w-sm" :style="{ opacity: 0.5 }">{{ subtitle }}</p>
           <NuxtLink :to="ctaLink || '#'" class="inline-flex items-center gap-2.5 px-7 py-3 rounded-full text-[11px] font-black uppercase tracking-widest transition-all hover:gap-5 shrink-0 active:scale-95" :style="{ backgroundColor: textColor, color: bgColor }">{{ ctaText }}<span>→</span></NuxtLink>
         </div>
@@ -110,6 +110,10 @@
 </template>
 
 <script setup>
+const ca = (c, h) => {
+  const m = c.match(/rgba\((var\([^)]+\)),\s*[\d.]+\)/);
+  return m ? `rgba(${m[1]}, ${Math.round(parseInt(h, 16) / 255 * 1e3) / 1e3})` : c + h;
+};
 import { computed } from "vue";
 const props = defineProps({
   layout: { type: String, default: "centered" },
@@ -124,8 +128,8 @@ const props = defineProps({
   image: { type: String, default: "" },
   imageStyle: { type: String, default: "cover" },
   imagePosition: { type: String, default: "center" },
-  bgColor: { type: String, default: "#3d35ff" },
-  textColor: { type: String, default: "#ffffff" },
+  bgColor: { type: String, default: "rgba(var(--primary-color), 1)" },
+  textColor: { type: String, default: "rgba(var(--body-bg), 1)" },
   spacing: { type: String, default: "normal" },
   radius: { type: String, default: "rounded" }
 });

package/dist/runtime/components/sections/Pricing.vue

@@ -3,7 +3,7 @@
     <div class="max-w-6xl mx-auto">
 
       <div v-if="title || description" class="mb-12 text-center max-w-2xl mx-auto">
-        <span v-if="badge" class="inline-block text-[10px] font-bold tracking-[0.5em] uppercase px-3 py-1 rounded-full border mb-4" :style="{ borderColor: textColor + '25', color: textColor + 'aa' }">{{ badge }}</span>
+        <span v-if="badge" class="inline-block text-[10px] font-bold tracking-[0.5em] uppercase px-3 py-1 rounded-full border mb-4" :style="{ borderColor: ca(textColor, '25'), color: ca(textColor, 'aa') }">{{ badge }}</span>
         <component :is="titleTag" class="text-3xl md:text-5xl font-black uppercase tracking-tighter leading-[0.9] mb-4">{{ title }}</component>
         <p v-if="description" class="text-sm leading-relaxed" :style="{ opacity: 0.55 }">{{ description }}</p>
       </div>
@@ -12,7 +12,7 @@
       <div v-if="layout === 'cards'" class="grid grid-cols-1 md:grid-cols-3 gap-6 items-end">
         <div v-for="(plan, i) in items" :key="i"
           :class="['border p-8 flex flex-col transition-all duration-300 relative', cardRound, plan.highlighted ? 'md:-translate-y-4 shadow-2xl' : '']"
-          :style="plan.highlighted ? { backgroundColor: textColor, color: bgColor, borderColor: textColor } : { backgroundColor: textColor + '04', borderColor: textColor + '12' }">
+          :style="plan.highlighted ? { backgroundColor: textColor, color: bgColor, borderColor: textColor } : { backgroundColor: ca(textColor, '04'), borderColor: ca(textColor, '12') }">
           <div v-if="plan.highlighted" class="absolute -top-3 left-1/2 -translate-x-1/2">
             <span class="px-4 py-1 rounded-full text-[9px] font-black uppercase tracking-widest" :style="{ backgroundColor: bgColor, color: textColor }">Populaire</span>
           </div>
@@ -38,8 +38,8 @@
       </div>
 
       <!-- MINIMAL -->
-      <div v-else-if="layout === 'minimal'" class="divide-y max-w-2xl mx-auto" :style="{ borderColor: textColor + '12' }">
-        <div v-for="(plan, i) in items" :key="i" class="flex items-center gap-6 py-7" :style="{ borderColor: textColor + '12' }">
+      <div v-else-if="layout === 'minimal'" class="divide-y max-w-2xl mx-auto" :style="{ borderColor: ca(textColor, '12') }">
+        <div v-for="(plan, i) in items" :key="i" class="flex items-center gap-6 py-7" :style="{ borderColor: ca(textColor, '12') }">
           <div class="flex-1">
             <p class="font-black uppercase tracking-tight text-lg leading-none mb-1">{{ plan.name }}</p>
             <p v-if="plan.description" class="text-xs" :style="{ opacity: 0.5 }">{{ plan.description }}</p>
@@ -60,7 +60,7 @@
       <div v-else class="overflow-x-auto">
         <table class="w-full text-sm border-collapse">
           <thead>
-            <tr class="border-b" :style="{ borderColor: textColor + '12' }">
+            <tr class="border-b" :style="{ borderColor: ca(textColor, '12') }">
               <th class="text-left py-4 pr-6 font-black uppercase tracking-widest text-[10px]" :style="{ opacity: 0.4 }">Plan</th>
               <th v-for="(plan, i) in items" :key="i" class="text-center py-4 px-4 font-black uppercase tracking-tight text-sm" :style="plan.highlighted ? { color: textColor } : { opacity: 0.7 }">
                 {{ plan.name }}<br/><span class="text-2xl font-black tracking-tighter">{{ plan.price }}</span>
@@ -68,7 +68,7 @@
             </tr>
           </thead>
           <tbody>
-            <tr v-for="(feat, fi) in allFeatures" :key="fi" class="border-b" :style="{ borderColor: textColor + '08' }">
+            <tr v-for="(feat, fi) in allFeatures" :key="fi" class="border-b" :style="{ borderColor: ca(textColor, '08') }">
               <td class="py-4 pr-6 text-xs" :style="{ opacity: 0.6 }">{{ typeof feat === 'object' ? (feat.fr || feat) : feat }}</td>
               <td v-for="(plan, pi) in items" :key="pi" class="py-4 px-4 text-center text-sm">
                 <span v-if="planHasFeature(plan, feat)">✓</span>
@@ -84,6 +84,10 @@
 </template>
 
 <script setup>
+const ca = (c, h) => {
+  const m = c.match(/rgba\((var\([^)]+\)),\s*[\d.]+\)/);
+  return m ? `rgba(${m[1]}, ${Math.round(parseInt(h, 16) / 255 * 1e3) / 1e3})` : c + h;
+};
 import { computed } from "vue";
 const props = defineProps({
   layout: { type: String, default: "cards" },
@@ -92,8 +96,8 @@ const props = defineProps({
   badge: { type: String, default: "" },
   description: { type: String, default: "" },
   items: { type: Array, default: () => [] },
-  bgColor: { type: String, default: "#ffffff" },
-  textColor: { type: String, default: "#000000" },
+  bgColor: { type: String, default: "rgba(var(--body-bg), 1)" },
+  textColor: { type: String, default: "rgba(var(--text-color), 1)" },
   spacing: { type: String, default: "normal" },
   radius: { type: String, default: "rounded" }
 });

package/dist/runtime/components/sections/Process.vue

@@ -3,14 +3,14 @@
     <div class="max-w-6xl mx-auto">
 
       <div v-if="title || description" class="mb-12" :class="['horizontal','cards'].includes(layout) ? 'text-center max-w-2xl mx-auto' : 'max-w-xl'">
-        <span v-if="badge" class="inline-block text-[10px] font-bold tracking-[0.5em] uppercase px-3 py-1 rounded-full border mb-4" :style="{ borderColor: textColor + '25', color: textColor + 'aa' }">{{ badge }}</span>
+        <span v-if="badge" class="inline-block text-[10px] font-bold tracking-[0.5em] uppercase px-3 py-1 rounded-full border mb-4" :style="{ borderColor: ca(textColor, '25'), color: ca(textColor, 'aa') }">{{ badge }}</span>
         <component :is="titleTag" class="text-3xl md:text-5xl font-black uppercase tracking-tighter leading-[0.9] mb-4">{{ title }}</component>
         <p v-if="description" class="text-sm leading-relaxed" :style="{ opacity: 0.55 }">{{ description }}</p>
       </div>
 
       <!-- STEPS (vertical) -->
       <div v-if="layout === 'steps'" class="relative max-w-2xl">
-        <div class="absolute left-5 top-0 bottom-0 w-px" :style="{ backgroundColor: textColor + '12' }"></div>
+        <div class="absolute left-5 top-0 bottom-0 w-px" :style="{ backgroundColor: ca(textColor, '12') }"></div>
         <div v-for="(step, i) in items" :key="i" class="relative flex gap-8 pb-12 last:pb-0">
           <div class="relative z-10 w-10 h-10 rounded-full flex items-center justify-center text-[11px] font-black shrink-0" :style="{ backgroundColor: textColor, color: bgColor }">
             {{ step.icon || String(i+1).padStart(2,'0') }}
@@ -25,7 +25,7 @@
       <!-- HORIZONTAL -->
       <div v-else-if="layout === 'horizontal'" class="flex flex-col md:flex-row gap-8">
         <div v-for="(step, i) in items" :key="i" class="flex-1 flex flex-col items-center text-center relative">
-          <div v-if="i < items.length - 1" class="hidden md:block absolute top-5 left-1/2 w-full h-px" :style="{ backgroundColor: textColor + '15' }"></div>
+          <div v-if="i < items.length - 1" class="hidden md:block absolute top-5 left-1/2 w-full h-px" :style="{ backgroundColor: ca(textColor, '15') }"></div>
           <div class="relative z-10 w-10 h-10 rounded-full flex items-center justify-center text-[11px] font-black mb-5 shrink-0" :style="{ backgroundColor: textColor, color: bgColor }">
             {{ step.icon || String(i+1).padStart(2,'0') }}
           </div>
@@ -36,7 +36,7 @@
 
       <!-- CARDS -->
       <div v-else-if="layout === 'cards'" class="grid grid-cols-1 sm:grid-cols-2 md:grid-cols-3 gap-6">
-        <div v-for="(step, i) in items" :key="i" :class="['p-7 border', cardRound]" :style="{ backgroundColor: textColor + '04', borderColor: textColor + '10' }">
+        <div v-for="(step, i) in items" :key="i" :class="['p-7 border', cardRound]" :style="{ backgroundColor: ca(textColor, '04'), borderColor: ca(textColor, '10') }">
           <div class="w-10 h-10 rounded-full flex items-center justify-center text-[11px] font-black mb-5" :style="{ backgroundColor: textColor, color: bgColor }">
             {{ step.icon || String(i+1).padStart(2,'0') }}
           </div>
@@ -47,7 +47,7 @@
 
       <!-- TIMELINE -->
       <div v-else-if="layout === 'timeline'" class="relative max-w-3xl mx-auto">
-        <div class="absolute left-1/2 -translate-x-1/2 top-0 bottom-0 w-px" :style="{ backgroundColor: textColor + '12' }"></div>
+        <div class="absolute left-1/2 -translate-x-1/2 top-0 bottom-0 w-px" :style="{ backgroundColor: ca(textColor, '12') }"></div>
         <div v-for="(step, i) in items" :key="i" :class="['relative flex items-start gap-8 pb-12 last:pb-0', i % 2 === 0 ? 'flex-row' : 'flex-row-reverse']">
           <div class="flex-1 text-right" :class="i % 2 === 0 ? '' : 'text-left'">
             <component :is="itemTag" class="font-black uppercase tracking-tight mb-2 leading-tight">{{ step.title }}</component>
@@ -61,8 +61,8 @@
       </div>
 
       <!-- MINIMAL -->
-      <div v-else class="divide-y max-w-2xl" :style="{ borderColor: textColor + '10' }">
-        <div v-for="(step, i) in items" :key="i" class="flex items-start gap-6 py-6" :style="{ borderColor: textColor + '10' }">
+      <div v-else class="divide-y max-w-2xl" :style="{ borderColor: ca(textColor, '10') }">
+        <div v-for="(step, i) in items" :key="i" class="flex items-start gap-6 py-6" :style="{ borderColor: ca(textColor, '10') }">
           <span class="text-[11px] font-black opacity-20 shrink-0 w-5">{{ String(i+1).padStart(2,'0') }}</span>
           <div>
             <component :is="itemTag" class="font-black uppercase tracking-tight mb-1 leading-tight">{{ step.title }}</component>
@@ -76,6 +76,10 @@
 </template>
 
 <script setup>
+const ca = (c, h) => {
+  const m = c.match(/rgba\((var\([^)]+\)),\s*[\d.]+\)/);
+  return m ? `rgba(${m[1]}, ${Math.round(parseInt(h, 16) / 255 * 1e3) / 1e3})` : c + h;
+};
 import { computed } from "vue";
 const props = defineProps({
   layout: { type: String, default: "steps" },
@@ -85,8 +89,8 @@ const props = defineProps({
   description: { type: String, default: "" },
   itemTag: { type: String, default: "h3" },
   items: { type: Array, default: () => [] },
-  bgColor: { type: String, default: "#ffffff" },
-  textColor: { type: String, default: "#000000" },
+  bgColor: { type: String, default: "rgba(var(--body-bg), 1)" },
+  textColor: { type: String, default: "rgba(var(--text-color), 1)" },
   spacing: { type: String, default: "normal" },
   radius: { type: String, default: "rounded" }
 });

package/dist/runtime/components/sections/ServiceGrid.vue

@@ -3,13 +3,13 @@
     <div class="max-w-6xl mx-auto">
 
       <div v-if="title || description" class="mb-12" :class="headerAlign === 'center' ? 'text-center max-w-2xl mx-auto' : 'max-w-xl'">
-        <span v-if="badge" class="inline-block text-[10px] font-bold tracking-[0.5em] uppercase px-3 py-1 rounded-full border mb-4" :style="{ borderColor: textColor + '25', color: textColor + 'aa' }">{{ badge }}</span>
+        <span v-if="badge" class="inline-block text-[10px] font-bold tracking-[0.5em] uppercase px-3 py-1 rounded-full border mb-4" :style="{ borderColor: ca(textColor, '25'), color: ca(textColor, 'aa') }">{{ badge }}</span>
         <component :is="titleTag" class="text-3xl md:text-5xl font-black uppercase tracking-tighter leading-[0.9] mb-4">{{ title }}</component>
         <p v-if="description" class="text-sm leading-relaxed mb-6" :style="{ opacity: 0.55 }">{{ description }}</p>
         <div v-if="ctas && ctas.length" class="flex flex-wrap gap-3">
           <NuxtLink v-for="(cta, i) in ctas" :key="i" :to="cta.link || '#'"
             class="inline-flex items-center gap-2.5 px-6 py-3 rounded-full text-[11px] font-black uppercase tracking-widest transition-all hover:gap-5"
-            :style="i === 0 ? { backgroundColor: textColor, color: bgColor } : { border: `1px solid ${textColor}40`, color: textColor }">
+            :style="i === 0 ? { backgroundColor: textColor, color: bgColor } : { border: `1px solid ${ca(textColor, '40')}`, color: textColor }">
             {{ cta.text }}<span>→</span>
           </NuxtLink>
         </div>
@@ -19,7 +19,7 @@
       <div v-if="layout === 'grid'" class="grid grid-cols-1 md:grid-cols-3 gap-6">
         <div v-for="(service, idx) in items" :key="idx"
           :class="['group relative p-8 border transition-all duration-300 overflow-hidden hover:-translate-y-1 hover:shadow-lg', cardRound]"
-          :style="{ backgroundColor: textColor + '04', borderColor: textColor + '12' }">
+          :style="{ backgroundColor: ca(textColor, '04'), borderColor: ca(textColor, '12') }">
           <span class="absolute -top-6 -right-2 text-[100px] font-black italic opacity-[0.04] select-none">{{ String(idx+1).padStart(2,'0') }}</span>
           <img v-if="service.image" :src="service.image" class="w-10 h-10 object-contain mb-5 rounded-xl" />
           <component :is="itemTag" class="text-lg font-black uppercase tracking-tight mb-3 leading-tight">{{ service.title }}</component>
@@ -30,8 +30,8 @@
       </div>
 
       <!-- LIST -->
-      <div v-else-if="layout === 'list'" :style="{ borderColor: textColor + '12' }">
-        <div v-for="(service, idx) in items" :key="idx" class="group flex items-start gap-8 py-8 border-b last:border-b-0" :style="{ borderColor: textColor + '10' }">
+      <div v-else-if="layout === 'list'" :style="{ borderColor: ca(textColor, '12') }">
+        <div v-for="(service, idx) in items" :key="idx" class="group flex items-start gap-8 py-8 border-b last:border-b-0" :style="{ borderColor: ca(textColor, '10') }">
           <span class="text-[11px] font-black opacity-20 pt-1 w-6 shrink-0">{{ String(idx+1).padStart(2,'0') }}</span>
           <img v-if="service.image" :src="service.image" class="w-12 h-12 object-contain rounded-xl shrink-0" />
           <div class="flex-1 min-w-0">
@@ -47,8 +47,8 @@
       <div v-else-if="layout === 'cards'" class="grid grid-cols-1 md:grid-cols-2 gap-6">
         <div v-for="(service, idx) in items" :key="idx"
           :class="['flex gap-6 p-7 border transition-all hover:shadow-md', cardRound]"
-          :style="{ backgroundColor: textColor + '03', borderColor: textColor + '10' }">
-          <div class="w-12 h-12 rounded-2xl flex items-center justify-center shrink-0" :style="{ backgroundColor: textColor + '10' }">
+          :style="{ backgroundColor: ca(textColor, '03'), borderColor: ca(textColor, '10') }">
+          <div class="w-12 h-12 rounded-2xl flex items-center justify-center shrink-0" :style="{ backgroundColor: ca(textColor, '10') }">
             <img v-if="service.image" :src="service.image" class="w-7 h-7 object-contain" />
             <span v-else class="text-lg font-black opacity-30">{{ String(idx+1).padStart(2,'0') }}</span>
           </div>
@@ -62,7 +62,7 @@
 
       <!-- MINIMAL -->
       <div v-else class="max-w-2xl">
-        <div v-for="(service, idx) in items" :key="idx" class="flex items-start justify-between gap-6 py-6 border-b last:border-b-0" :style="{ borderColor: textColor + '10' }">
+        <div v-for="(service, idx) in items" :key="idx" class="flex items-start justify-between gap-6 py-6 border-b last:border-b-0" :style="{ borderColor: ca(textColor, '10') }">
           <div>
             <component :is="itemTag" class="font-black uppercase tracking-tight mb-1">{{ service.title }}</component>
             <p v-if="service.description" class="text-sm" :style="{ opacity: 0.5 }">{{ service.description }}</p>
@@ -76,6 +76,10 @@
 </template>
 
 <script setup>
+const ca = (c, h) => {
+  const m = c.match(/rgba\((var\([^)]+\)),\s*[\d.]+\)/);
+  return m ? `rgba(${m[1]}, ${Math.round(parseInt(h, 16) / 255 * 1e3) / 1e3})` : c + h;
+};
 import { computed } from "vue";
 const props = defineProps({
   layout: { type: String, default: "grid" },
@@ -87,8 +91,8 @@ const props = defineProps({
   itemTag: { type: String, default: "h3" },
   items: { type: Array, default: () => [] },
   ctas: { type: Array, default: () => [] },
-  bgColor: { type: String, default: "#ffffff" },
-  textColor: { type: String, default: "#000000" },
+  bgColor: { type: String, default: "rgba(var(--body-bg), 1)" },
+  textColor: { type: String, default: "rgba(var(--text-color), 1)" },
   spacing: { type: String, default: "normal" },
   radius: { type: String, default: "rounded" }
 });

package/dist/runtime/components/sections/Testimonials.vue

@@ -3,21 +3,21 @@
     <div class="max-w-6xl mx-auto">
 
       <div v-if="title || description" class="mb-12 max-w-xl">
-        <span v-if="badge" class="inline-block text-[10px] font-bold tracking-[0.5em] uppercase px-3 py-1 rounded-full border mb-4" :style="{ borderColor: textColor + '25', color: textColor + 'aa' }">{{ badge }}</span>
+        <span v-if="badge" class="inline-block text-[10px] font-bold tracking-[0.5em] uppercase px-3 py-1 rounded-full border mb-4" :style="{ borderColor: ca(textColor, '25'), color: ca(textColor, 'aa') }">{{ badge }}</span>
         <component :is="titleTag" class="text-3xl md:text-5xl font-black uppercase tracking-tighter leading-[0.9] mb-3">{{ title }}</component>
         <p v-if="description" class="text-sm leading-relaxed" :style="{ opacity: 0.55 }">{{ description }}</p>
       </div>
 
       <!-- GRID -->
       <div v-if="layout === 'grid'" class="grid grid-cols-1 md:grid-cols-3 gap-6">
-        <div v-for="(item, i) in items" :key="i" :class="['flex flex-col p-7 border transition-all hover:-translate-y-1', cardRound]" :style="{ backgroundColor: textColor + '04', borderColor: textColor + '10' }">
+        <div v-for="(item, i) in items" :key="i" :class="['flex flex-col p-7 border transition-all hover:-translate-y-1', cardRound]" :style="{ backgroundColor: ca(textColor, '04'), borderColor: ca(textColor, '10') }">
           <div v-if="item.rating" class="flex gap-0.5 mb-4">
             <span v-for="s in 5" :key="s" class="text-xs" :style="{ opacity: s <= item.rating ? 1 : 0.15 }">★</span>
           </div>
           <p class="text-sm leading-relaxed flex-1 italic mb-6" :style="{ opacity: 0.7 }">"{{ item.quote }}"</p>
-          <div class="flex items-center gap-3 pt-4 border-t" :style="{ borderColor: textColor + '10' }">
+          <div class="flex items-center gap-3 pt-4 border-t" :style="{ borderColor: ca(textColor, '10') }">
             <img v-if="item.avatar" :src="item.avatar" class="w-9 h-9 rounded-full object-cover shrink-0" />
-            <div v-else class="w-9 h-9 rounded-full flex items-center justify-center text-[11px] font-black shrink-0" :style="{ backgroundColor: textColor + '15' }">{{ (item.name || '?')[0] }}</div>
+            <div v-else class="w-9 h-9 rounded-full flex items-center justify-center text-[11px] font-black shrink-0" :style="{ backgroundColor: ca(textColor, '15') }">{{ (item.name || '?')[0] }}</div>
             <div>
               <p class="text-[11px] font-black uppercase tracking-wide leading-none">{{ item.name }}</p>
               <p v-if="item.role || item.company" class="text-[9px] mt-0.5" :style="{ opacity: 0.4 }">{{ [item.role, item.company].filter(Boolean).join(' · ') }}</p>
@@ -28,14 +28,14 @@
 
       <!-- FEATURED -->
       <div v-else-if="layout === 'featured'">
-        <div v-if="items[0]" :class="['p-10 border mb-6', cardRound]" :style="{ backgroundColor: textColor + '05', borderColor: textColor + '10' }">
+        <div v-if="items[0]" :class="['p-10 border mb-6', cardRound]" :style="{ backgroundColor: ca(textColor, '05'), borderColor: ca(textColor, '10') }">
           <div v-if="items[0].rating" class="flex gap-0.5 mb-6">
             <span v-for="s in 5" :key="s" class="text-base" :style="{ opacity: s <= items[0].rating ? 1 : 0.15 }">★</span>
           </div>
           <p class="text-xl md:text-3xl font-bold italic leading-snug mb-8 max-w-3xl" :style="{ opacity: 0.8 }">"{{ items[0].quote }}"</p>
           <div class="flex items-center gap-4">
             <img v-if="items[0].avatar" :src="items[0].avatar" class="w-12 h-12 rounded-full object-cover" />
-            <div v-else class="w-12 h-12 rounded-full flex items-center justify-center text-sm font-black" :style="{ backgroundColor: textColor + '15' }">{{ (items[0].name || '?')[0] }}</div>
+            <div v-else class="w-12 h-12 rounded-full flex items-center justify-center text-sm font-black" :style="{ backgroundColor: ca(textColor, '15') }">{{ (items[0].name || '?')[0] }}</div>
             <div>
               <p class="text-sm font-black uppercase tracking-wide">{{ items[0].name }}</p>
               <p v-if="items[0].role || items[0].company" class="text-[10px]" :style="{ opacity: 0.4 }">{{ [items[0].role, items[0].company].filter(Boolean).join(' · ') }}</p>
@@ -43,11 +43,11 @@
           </div>
         </div>
         <div class="grid grid-cols-1 md:grid-cols-2 gap-6">
-          <div v-for="(item, i) in items.slice(1)" :key="i" :class="['p-7 border', cardRound]" :style="{ backgroundColor: textColor + '03', borderColor: textColor + '08' }">
+          <div v-for="(item, i) in items.slice(1)" :key="i" :class="['p-7 border', cardRound]" :style="{ backgroundColor: ca(textColor, '03'), borderColor: ca(textColor, '08') }">
             <p class="text-sm italic leading-relaxed mb-5" :style="{ opacity: 0.7 }">"{{ item.quote }}"</p>
             <div class="flex items-center gap-3">
               <img v-if="item.avatar" :src="item.avatar" class="w-8 h-8 rounded-full object-cover" />
-              <div v-else class="w-8 h-8 rounded-full flex items-center justify-center text-[10px] font-black" :style="{ backgroundColor: textColor + '12' }">{{ (item.name || '?')[0] }}</div>
+              <div v-else class="w-8 h-8 rounded-full flex items-center justify-center text-[10px] font-black" :style="{ backgroundColor: ca(textColor, '12') }">{{ (item.name || '?')[0] }}</div>
               <div>
                 <p class="text-[10px] font-black uppercase">{{ item.name }}</p>
                 <p v-if="item.role" class="text-[9px]" :style="{ opacity: 0.4 }">{{ item.role }}</p>
@@ -59,14 +59,14 @@
 
       <!-- WALL / MINIMAL -->
       <div v-else class="columns-1 md:columns-2 lg:columns-3 gap-6 space-y-6">
-        <div v-for="(item, i) in items" :key="i" :class="['break-inside-avoid p-6 border mb-6', cardRound]" :style="{ backgroundColor: textColor + '04', borderColor: textColor + '08' }">
+        <div v-for="(item, i) in items" :key="i" :class="['break-inside-avoid p-6 border mb-6', cardRound]" :style="{ backgroundColor: ca(textColor, '04'), borderColor: ca(textColor, '08') }">
           <div v-if="item.rating" class="flex gap-0.5 mb-3">
             <span v-for="s in 5" :key="s" class="text-[10px]" :style="{ opacity: s <= item.rating ? 1 : 0.15 }">★</span>
           </div>
           <p class="text-sm italic leading-relaxed mb-4" :style="{ opacity: 0.7 }">"{{ item.quote }}"</p>
           <div class="flex items-center gap-2.5">
             <img v-if="item.avatar" :src="item.avatar" class="w-7 h-7 rounded-full object-cover" />
-            <div v-else class="w-7 h-7 rounded-full flex items-center justify-center text-[9px] font-black" :style="{ backgroundColor: textColor + '15' }">{{ (item.name || '?')[0] }}</div>
+            <div v-else class="w-7 h-7 rounded-full flex items-center justify-center text-[9px] font-black" :style="{ backgroundColor: ca(textColor, '15') }">{{ (item.name || '?')[0] }}</div>
             <p class="text-[10px] font-black uppercase">{{ item.name }}</p>
           </div>
         </div>
@@ -77,6 +77,10 @@
 </template>
 
 <script setup>
+const ca = (c, h) => {
+  const m = c.match(/rgba\((var\([^)]+\)),\s*[\d.]+\)/);
+  return m ? `rgba(${m[1]}, ${Math.round(parseInt(h, 16) / 255 * 1e3) / 1e3})` : c + h;
+};
 import { computed } from "vue";
 const props = defineProps({
   layout: { type: String, default: "grid" },
@@ -85,8 +89,8 @@ const props = defineProps({
   badge: { type: String, default: "" },
   description: { type: String, default: "" },
   items: { type: Array, default: () => [] },
-  bgColor: { type: String, default: "#ffffff" },
-  textColor: { type: String, default: "#000000" },
+  bgColor: { type: String, default: "rgba(var(--body-bg), 1)" },
+  textColor: { type: String, default: "rgba(var(--text-color), 1)" },
   spacing: { type: String, default: "normal" },
   radius: { type: String, default: "rounded" }
 });

package/dist/runtime/components/sections/TextVisual.vue

@@ -4,20 +4,20 @@
     <!-- SPLIT -->
     <div v-if="layout === 'split'" :class="['max-w-6xl mx-auto flex flex-col md:flex-row gap-12 items-center', reverse ? 'md:flex-row-reverse' : '']">
       <div class="flex-1 space-y-6">
-        <span v-if="badge" class="inline-block text-[10px] font-bold tracking-[0.5em] uppercase px-3 py-1 rounded-full border" :style="{ borderColor: textColor + '25', color: textColor + 'aa' }">{{ badge }}</span>
+        <span v-if="badge" class="inline-block text-[10px] font-bold tracking-[0.5em] uppercase px-3 py-1 rounded-full border" :style="{ borderColor: ca(textColor, '25'), color: ca(textColor, 'aa') }">{{ badge }}</span>
         <component :is="titleTag" class="text-3xl md:text-4xl font-black uppercase tracking-tighter leading-[0.9]">{{ title }}</component>
         <p class="leading-relaxed text-sm max-w-md" :style="{ opacity: 0.55 }">{{ content }}</p>
         <div v-if="ctas && ctas.length" class="flex flex-wrap gap-3 pt-1">
           <NuxtLink v-for="(cta, i) in ctas" :key="i" :to="cta.link || '#'"
             class="inline-flex items-center gap-2.5 px-6 py-3 rounded-full text-[11px] font-black uppercase tracking-widest transition-all hover:gap-5"
-            :style="i === 0 ? { backgroundColor: textColor, color: bgColor } : { border: `1px solid ${textColor}40`, color: textColor }">
+            :style="i === 0 ? { backgroundColor: textColor, color: bgColor } : { border: `1px solid ${ca(textColor, '40')}`, color: textColor }">
             {{ cta.text }}<span>→</span>
           </NuxtLink>
         </div>
       </div>
       <div :class="['flex-1 overflow-hidden relative', imageContainerClass]">
         <img v-if="image" :src="image" :alt="imageAlt || title" class="w-full h-full object-cover transition-transform duration-700 hover:scale-105" />
-        <div v-else class="w-full h-full" :style="{ backgroundColor: textColor + '08' }"></div>
+        <div v-else class="w-full h-full" :style="{ backgroundColor: ca(textColor, '08') }"></div>
       </div>
     </div>
 
@@ -25,16 +25,16 @@
     <div v-else-if="layout === 'stacked'" class="max-w-3xl mx-auto space-y-8">
       <div :class="['w-full overflow-hidden relative', imageContainerClass]">
         <img v-if="image" :src="image" class="w-full h-full object-cover" />
-        <div v-else class="w-full h-full" :style="{ backgroundColor: textColor + '08' }"></div>
+        <div v-else class="w-full h-full" :style="{ backgroundColor: ca(textColor, '08') }"></div>
       </div>
       <div class="space-y-5">
-        <span v-if="badge" class="inline-block text-[10px] font-bold tracking-[0.5em] uppercase px-3 py-1 rounded-full border" :style="{ borderColor: textColor + '25', color: textColor + 'aa' }">{{ badge }}</span>
+        <span v-if="badge" class="inline-block text-[10px] font-bold tracking-[0.5em] uppercase px-3 py-1 rounded-full border" :style="{ borderColor: ca(textColor, '25'), color: ca(textColor, 'aa') }">{{ badge }}</span>
         <component :is="titleTag" class="text-3xl md:text-4xl font-black uppercase tracking-tighter leading-[0.9]">{{ title }}</component>
         <p class="leading-relaxed text-sm" :style="{ opacity: 0.55 }">{{ content }}</p>
         <div v-if="ctas && ctas.length" class="flex flex-wrap gap-3 pt-1">
           <NuxtLink v-for="(cta, i) in ctas" :key="i" :to="cta.link || '#'"
             class="inline-flex items-center gap-2.5 px-6 py-3 rounded-full text-[11px] font-black uppercase tracking-widest transition-all hover:gap-5"
-            :style="i === 0 ? { backgroundColor: textColor, color: bgColor } : { border: `1px solid ${textColor}40`, color: textColor }">
+            :style="i === 0 ? { backgroundColor: textColor, color: bgColor } : { border: `1px solid ${ca(textColor, '40')}`, color: textColor }">
             {{ cta.text }}<span>→</span>
           </NuxtLink>
         </div>
@@ -45,16 +45,16 @@
     <div v-else :class="['max-w-6xl mx-auto flex flex-col md:flex-row gap-10 items-center', reverse ? 'md:flex-row-reverse' : '']">
       <div :class="['md:w-2/3 w-full overflow-hidden relative', imageContainerClass]">
         <img v-if="image" :src="image" class="w-full h-full object-cover transition-transform duration-700 hover:scale-105" />
-        <div v-else class="w-full h-full" :style="{ backgroundColor: textColor + '08' }"></div>
+        <div v-else class="w-full h-full" :style="{ backgroundColor: ca(textColor, '08') }"></div>
       </div>
       <div class="md:w-1/3 space-y-5">
-        <span v-if="badge" class="inline-block text-[10px] font-bold tracking-[0.5em] uppercase px-3 py-1 rounded-full border" :style="{ borderColor: textColor + '25', color: textColor + 'aa' }">{{ badge }}</span>
+        <span v-if="badge" class="inline-block text-[10px] font-bold tracking-[0.5em] uppercase px-3 py-1 rounded-full border" :style="{ borderColor: ca(textColor, '25'), color: ca(textColor, 'aa') }">{{ badge }}</span>
         <component :is="titleTag" class="text-2xl md:text-3xl font-black uppercase tracking-tighter leading-[0.9]">{{ title }}</component>
         <p class="leading-relaxed text-sm" :style="{ opacity: 0.55 }">{{ content }}</p>
         <div v-if="ctas && ctas.length" class="flex flex-wrap gap-3 pt-1">
           <NuxtLink v-for="(cta, i) in ctas" :key="i" :to="cta.link || '#'"
             class="inline-flex items-center gap-2.5 px-6 py-3 rounded-full text-[11px] font-black uppercase tracking-widest transition-all hover:gap-5"
-            :style="i === 0 ? { backgroundColor: textColor, color: bgColor } : { border: `1px solid ${textColor}40`, color: textColor }">
+            :style="i === 0 ? { backgroundColor: textColor, color: bgColor } : { border: `1px solid ${ca(textColor, '40')}`, color: textColor }">
             {{ cta.text }}<span>→</span>
           </NuxtLink>
         </div>
@@ -65,6 +65,10 @@
 </template>
 
 <script setup>
+const ca = (c, h) => {
+  const m = c.match(/rgba\((var\([^)]+\)),\s*[\d.]+\)/);
+  return m ? `rgba(${m[1]}, ${Math.round(parseInt(h, 16) / 255 * 1e3) / 1e3})` : c + h;
+};
 import { computed } from "vue";
 const props = defineProps({
   layout: { type: String, default: "split" },
@@ -78,8 +82,8 @@ const props = defineProps({
   imageFit: { type: String, default: "cover" },
   imageShadow: { type: Boolean, default: false },
   reverse: { type: Boolean, default: false },
-  bgColor: { type: String, default: "#ffffff" },
-  textColor: { type: String, default: "#000000" },
+  bgColor: { type: String, default: "rgba(var(--body-bg), 1)" },
+  textColor: { type: String, default: "rgba(var(--text-color), 1)" },
   ctas: { type: Array, default: () => [] },
   spacing: { type: String, default: "normal" },
   radius: { type: String, default: "rounded" }

package/dist/runtime/composables/useAdminSections.js

@@ -49,8 +49,8 @@ export const DEFAULT_SECTIONS = {
       image: "",
       imageStyle: "cover",
       imagePosition: "center",
-      bgColor: "#3d35ff",
-      textColor: "#ffffff",
+      bgColor: "rgba(var(--primary-color), 1)",
+      textColor: "rgba(var(--body-bg), 1)",
       ctaText: i18n0("Get Started"),
       ctaLink: "/",
       spacing: "normal",
@@ -102,8 +102,8 @@ export const DEFAULT_SECTIONS = {
       imageFit: "cover",
       imageShadow: false,
       reverse: false,
-      bgColor: "#ffffff",
-      textColor: "#000000",
+      bgColor: "rgba(var(--body-bg), 1)",
+      textColor: "rgba(var(--text-color), 1)",
       ctas: [],
       spacing: "normal",
       radius: "rounded"
@@ -154,8 +154,8 @@ export const DEFAULT_SECTIONS = {
       ctas: [],
       itemTag: "h3",
       items: [],
-      bgColor: "#ffffff",
-      textColor: "#000000",
+      bgColor: "rgba(var(--body-bg), 1)",
+      textColor: "rgba(var(--text-color), 1)",
       spacing: "normal",
       radius: "rounded"
     },
@@ -191,8 +191,8 @@ export const DEFAULT_SECTIONS = {
     defaultProps: {
       title: i18n0("Why choose us?"),
       items: [],
-      bgColor: "#ffffff",
-      textColor: "#000000",
+      bgColor: "rgba(var(--body-bg), 1)",
+      textColor: "rgba(var(--text-color), 1)",
       spacing: "normal",
       radius: "rounded"
     },
@@ -214,8 +214,8 @@ export const DEFAULT_SECTIONS = {
     defaultProps: {
       title: i18n0("FAQ"),
       items: [],
-      bgColor: "#F9F9FB",
-      textColor: "#000000",
+      bgColor: "rgba(var(--body-bg), 1)",
+      textColor: "rgba(var(--text-color), 1)",
       spacing: "normal",
       radius: "rounded"
     },
@@ -241,8 +241,8 @@ export const DEFAULT_SECTIONS = {
       badge: i18n0(),
       description: i18n0(),
       items: [],
-      bgColor: "#ffffff",
-      textColor: "#000000",
+      bgColor: "rgba(var(--body-bg), 1)",
+      textColor: "rgba(var(--text-color), 1)",
       spacing: "normal",
       radius: "rounded"
     },
@@ -279,8 +279,8 @@ export const DEFAULT_SECTIONS = {
       badge: i18n0(),
       description: i18n0(),
       items: [],
-      bgColor: "#ffffff",
-      textColor: "#000000",
+      bgColor: "rgba(var(--body-bg), 1)",
+      textColor: "rgba(var(--text-color), 1)",
       spacing: "normal",
       radius: "rounded"
     },
@@ -319,8 +319,8 @@ export const DEFAULT_SECTIONS = {
       badge: i18n0(),
       description: i18n0(),
       items: [],
-      bgColor: "#ffffff",
-      textColor: "#000000",
+      bgColor: "rgba(var(--body-bg), 1)",
+      textColor: "rgba(var(--text-color), 1)",
       spacing: "normal",
       radius: "rounded"
     },
@@ -358,8 +358,8 @@ export const DEFAULT_SECTIONS = {
       subtitle: i18n0("Describe your project and we'll get back to you within 24h."),
       badge: i18n0(),
       button_text: i18n0("Send"),
-      bgColor: "#ffffff",
-      textColor: "#000000",
+      bgColor: "rgba(var(--body-bg), 1)",
+      textColor: "rgba(var(--text-color), 1)",
       spacing: "normal",
       radius: "rounded"
     },

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "cinqcinqdev-seo",
-  "version": "0.1.32",
+  "version": "0.1.34",
   "description": "A reusable Nuxt 3 admin CMS module with visual page editor powered by Supabase",
   "license": "MIT",
   "module": "./dist/module.mjs",