astro-component-kit 0.4.0 → 0.4.1

package/src/components/lib/sections/ContactGlassForm.astro

@@ -21,6 +21,7 @@ const {
 } = Astro.props;
 ---
 
+<div class="cq-contact-glass-form-cq">
 <section class={`contact-section ${className}`} aria-labelledby="contact-title">
   <div class="contact-bg" aria-hidden="true">
     <div class="contact-glow"></div>
@@ -115,8 +116,9 @@ const {
     </div>
   </div>
 </section>
-
+</div>
 <style>
+  .cq-contact-glass-form-cq { container-type: inline-size; }
   .contact-section {
     position: relative;
     padding: var(--sp-20, 5rem) var(--sp-6, 1.5rem);
@@ -163,7 +165,7 @@ const {
     font-weight: 700;
     letter-spacing: 0.06em;
     text-transform: uppercase;
-    background: rgba(184, 134, 11, 0.12);
+    background: color-mix(in srgb, var(--c-primary, #b8860b) 12%, transparent);
     color: #eab308;
     border: 1px solid rgba(234, 179, 8, 0.25);
     margin-bottom: var(--sp-4, 1rem);
@@ -218,7 +220,7 @@ const {
     gap: 1rem;
     padding: 1rem 1.25rem;
     background: rgba(15, 23, 42, 0.5);
-    border: 1px solid rgba(255, 255, 255, 0.06);
+    border: 1px solid rgb(var(--ink-rgb, 255 255 255) / 0.06);
     border-radius: 14px;
     backdrop-filter: blur(10px);
   }
@@ -227,7 +229,7 @@ const {
     width: 40px;
     height: 40px;
     border-radius: 10px;
-    background: rgba(255, 255, 255, 0.05);
+    background: rgb(var(--ink-rgb, 255 255 255) / 0.05);
     color: #eab308;
     display: flex;
     align-items: center;
@@ -261,7 +263,7 @@ const {
   .contact-form {
     background: rgba(15, 23, 42, 0.7);
     backdrop-filter: blur(24px);
-    border: 1px solid rgba(255, 255, 255, 0.1);
+    border: 1px solid rgb(var(--ink-rgb, 255 255 255) / 0.1);
     border-radius: var(--r-2xl, 24px);
     padding: clamp(1.75rem, 4vw, 2.5rem);
     box-shadow: 0 25px 50px -15px rgba(0, 0, 0, 0.7);
@@ -303,7 +305,7 @@ const {
     width: 100%;
     padding: 0.75rem 1rem;
     background: rgba(0, 0, 0, 0.35);
-    border: 1px solid rgba(255, 255, 255, 0.1);
+    border: 1px solid rgb(var(--ink-rgb, 255 255 255) / 0.1);
     border-radius: 10px;
     color: #fff;
     font-size: 0.92rem;
@@ -346,14 +348,14 @@ const {
     box-shadow: 0 6px 20px rgba(234, 179, 8, 0.45);
   }
 
-  @media (max-width: 960px) {
+  @container (max-width: 960px) {
     .contact-grid {
       grid-template-columns: 1fr;
       gap: 3rem;
     }
   }
 
-  @media (max-width: 640px) {
+  @container (max-width: 640px) {
     .form-row {
       grid-template-columns: 1fr;
     }

package/src/components/lib/sections/ContactSplitMap.astro

@@ -66,6 +66,7 @@ const SX = VW / 100;
 const SY = VH / 100;
 ---
 
+<div class="cq-contact-split-map-cq">
 <section class={`csm csm--${variant} csm--${size} ${className}`} aria-labelledby={id}>
   <div class="csm__inner">
     <div class="csm__info">
@@ -91,8 +92,8 @@ const SY = VH / 100;
       <svg viewBox={`0 0 ${VW} ${VH}`} aria-hidden="true">
         {variant !== 'plain' && dots.map(([x, y]) => (
           variant === 'grid'
-            ? <rect x={x * SX - 0.8} y={y * SY - 0.8} width="1.6" height="1.6" fill="rgba(255,255,255,0.14)" />
-            : <circle cx={x * SX} cy={y * SY} r="0.75" fill="rgba(255,255,255,0.18)" />
+            ? <rect x={x * SX - 0.8} y={y * SY - 0.8} width="1.6" height="1.6" fill="rgb(var(--ink-rgb, 255 255 255) / 0.14)" />
+            : <circle cx={x * SX} cy={y * SY} r="0.75" fill="rgb(var(--ink-rgb, 255 255 255) / 0.18)" />
         ))}
         {offices.map((o) => (
           <g>
@@ -107,8 +108,9 @@ const SY = VH / 100;
     </div>
   </div>
 </section>
-
+</div>
 <style>
+  .cq-contact-split-map-cq { container-type: inline-size; }
   .csm {
     --csm-py: 5.5rem;
     padding: var(--csm-py) var(--sp-6, 1.5rem);
@@ -120,20 +122,20 @@ const SY = VH / 100;
   .csm__title { margin: 0 0 0.75rem; font-size: clamp(1.9rem, 4vw, 2.75rem); font-weight: 800; letter-spacing: -0.03em; color: var(--c-text-1, #fff); }
   .csm__subtitle { margin: 0 0 2rem; font-size: 1.0625rem; line-height: 1.6; color: var(--c-text-2, #a3a3a3); }
   .csm__channels { list-style: none; margin: 0 0 2rem; padding: 0; display: grid; gap: 0.6rem; }
-  .csm__channel { display: flex; align-items: center; gap: 0.9rem; min-height: 60px; padding: 0.6rem 0.9rem; border-radius: var(--r-md, 14px); border: 1px solid var(--c-border, rgba(255, 255, 255, 0.07)); background: rgba(255, 255, 255, 0.02); color: inherit; text-decoration: none; transition: border-color 0.2s ease, background 0.2s ease; }
-  .csm__channel:hover { border-color: rgba(255, 255, 255, 0.2); background: rgba(255, 255, 255, 0.04); }
+  .csm__channel { display: flex; align-items: center; gap: 0.9rem; min-height: 60px; padding: 0.6rem 0.9rem; border-radius: var(--r-md, 14px); border: 1px solid var(--c-border, rgb(var(--ink-rgb, 255 255 255) / 0.07)); background: rgb(var(--ink-rgb, 255 255 255) / 0.02); color: inherit; text-decoration: none; transition: border-color 0.2s ease, background 0.2s ease; }
+  .csm__channel:hover { border-color: rgb(var(--ink-rgb, 255 255 255) / 0.2); background: rgb(var(--ink-rgb, 255 255 255) / 0.04); }
   .csm__channel:focus-visible { outline: 2px solid var(--c-primary-light, #d4a017); outline-offset: 2px; }
-  .csm__icon { display: grid; place-items: center; width: 40px; height: 40px; border-radius: 10px; background: var(--c-primary-glow, rgba(184, 134, 11, 0.14)); color: var(--c-primary-light, #d4a017); flex-shrink: 0; }
+  .csm__icon { display: grid; place-items: center; width: 40px; height: 40px; border-radius: 10px; background: var(--c-primary-glow, color-mix(in srgb, var(--c-primary, #b8860b) 14%, transparent)); color: var(--c-primary-light, #d4a017); flex-shrink: 0; }
   .csm__label { display: block; font-size: 0.75rem; color: var(--c-text-3, #8a8a8a); }
   .csm__value { display: block; font-size: 0.9375rem; font-weight: 600; color: var(--c-text-1, #fff); }
   .csm__offices { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 1rem; }
   .csm__offices address { font-style: normal; font-size: 0.8125rem; line-height: 1.5; color: var(--c-text-2, #a3a3a3); }
   .csm__offices strong { display: block; font-size: 0.9375rem; color: var(--c-text-1, #fff); }
-  .csm__map { position: relative; aspect-ratio: 16 / 11; border-radius: var(--r-xl, 24px); border: 1px solid var(--c-border, rgba(255, 255, 255, 0.07)); background: radial-gradient(circle at 50% 40%, rgba(255, 255, 255, 0.04), transparent 70%), var(--c-bg-1, #0a0a0a); overflow: hidden; }
+  .csm__map { position: relative; aspect-ratio: 16 / 11; border-radius: var(--r-xl, 24px); border: 1px solid var(--c-border, rgb(var(--ink-rgb, 255 255 255) / 0.07)); background: radial-gradient(circle at 50% 40%, rgb(var(--ink-rgb, 255 255 255) / 0.04), transparent 70%), var(--c-bg-1, #0a0a0a); overflow: hidden; }
   .csm__map svg { position: absolute; inset: 0; width: 100%; height: 100%; }
   .csm__ping { transform-box: fill-box; transform-origin: center; animation: csm-ping 2.4s ease-out infinite; }
   @keyframes csm-ping { from { transform: scale(0.6); opacity: 1; } to { transform: scale(2.4); opacity: 0; } }
-  .csm__pin { position: absolute; transform: translate(-50%, calc(-100% - 12px)); padding: 0.2rem 0.55rem; border-radius: 6px; background: rgba(10, 10, 12, 0.85); border: 1px solid rgba(255, 255, 255, 0.12); font-size: 0.6875rem; font-weight: 600; color: var(--c-text-1, #fff); white-space: nowrap; }
-  @media (max-width: 860px) { .csm__inner { grid-template-columns: 1fr; } }
+  .csm__pin { position: absolute; transform: translate(-50%, calc(-100% - 12px)); padding: 0.2rem 0.55rem; border-radius: 6px; background: rgba(10, 10, 12, 0.85); border: 1px solid rgb(var(--ink-rgb, 255 255 255) / 0.12); font-size: 0.6875rem; font-weight: 600; color: var(--c-text-1, #fff); white-space: nowrap; }
+  @container (max-width: 860px) { .csm__inner { grid-template-columns: 1fr; } }
   @media (prefers-reduced-motion: reduce) { .csm__ping { animation: none; } }
 </style>

package/src/components/lib/sections/CtaAppDownload.astro

@@ -21,6 +21,7 @@ const {
 } = Astro.props;
 ---
 
+<div class="cq-cta-app-download-cq">
 <section class={`app-download-section ${className}`} aria-labelledby="app-title">
   <div class="container">
     <div class="app-card">
@@ -72,8 +73,9 @@ const {
     </div>
   </div>
 </section>
-
+</div>
 <style>
+  .cq-cta-app-download-cq { container-type: inline-size; }
   .app-download-section {
     padding: var(--sp-20, 5rem) var(--sp-6, 1.5rem);
     background: var(--c-bg-primary, #030712);
@@ -86,7 +88,7 @@ const {
 
   .app-card {
     background: linear-gradient(135deg, rgba(15, 23, 42, 0.8) 0%, rgba(10, 15, 30, 0.9) 100%);
-    border: 1px solid rgba(255, 255, 255, 0.1);
+    border: 1px solid rgb(var(--ink-rgb, 255 255 255) / 0.1);
     border-radius: var(--r-2xl, 24px);
     padding: clamp(2rem, 5vw, 4rem);
     display: grid;
@@ -103,7 +105,7 @@ const {
     font-weight: 700;
     letter-spacing: 0.06em;
     text-transform: uppercase;
-    background: rgba(184, 134, 11, 0.12);
+    background: color-mix(in srgb, var(--c-primary, #b8860b) 12%, transparent);
     color: #eab308;
     border: 1px solid rgba(234, 179, 8, 0.25);
     margin-bottom: var(--sp-4, 1rem);
@@ -134,8 +136,8 @@ const {
 
   .feat-pill {
     padding: 0.4rem 0.85rem;
-    background: rgba(255, 255, 255, 0.05);
-    border: 1px solid rgba(255, 255, 255, 0.08);
+    background: rgb(var(--ink-rgb, 255 255 255) / 0.05);
+    border: 1px solid rgb(var(--ink-rgb, 255 255 255) / 0.08);
     border-radius: 9999px;
     font-size: 0.82rem;
     color: #cbd5e1;
@@ -153,7 +155,7 @@ const {
     gap: 0.75rem;
     padding: 0.65rem 1.25rem;
     background: rgba(0, 0, 0, 0.6);
-    border: 1px solid rgba(255, 255, 255, 0.15);
+    border: 1px solid rgb(var(--ink-rgb, 255 255 255) / 0.15);
     border-radius: 12px;
     color: #fff;
     text-decoration: none;
@@ -161,8 +163,8 @@ const {
   }
 
   .store-btn:hover {
-    background: rgba(255, 255, 255, 0.1);
-    border-color: rgba(255, 255, 255, 0.3);
+    background: rgb(var(--ink-rgb, 255 255 255) / 0.1);
+    border-color: rgb(var(--ink-rgb, 255 255 255) / 0.3);
   }
 
   .store-btn__text {
@@ -192,7 +194,7 @@ const {
     width: 250px;
     height: 400px;
     background: #020617;
-    border: 3px solid rgba(255, 255, 255, 0.2);
+    border: 3px solid rgb(var(--ink-rgb, 255 255 255) / 0.2);
     border-radius: 36px;
     padding: 12px;
     box-shadow: 0 20px 50px -10px rgba(0, 0, 0, 0.8);
@@ -244,13 +246,13 @@ const {
 
   .phone-card-mini {
     padding: 0.5rem;
-    background: rgba(255, 255, 255, 0.05);
+    background: rgb(var(--ink-rgb, 255 255 255) / 0.05);
     border-radius: 8px;
     font-size: 0.72rem;
     color: #cbd5e1;
   }
 
-  @media (max-width: 960px) {
+  @container (max-width: 960px) {
     .app-card {
       grid-template-columns: 1fr;
     }

package/src/components/lib/sections/CtaGlowBanner.astro

@@ -27,6 +27,7 @@ const {
 } = Astro.props;
 ---
 
+<div class="cq-cta-glow-banner-cq">
 <section class={`cta-banner-section ${className}`} aria-labelledby="cta-title">
   <div class="container">
     <div class="cta-banner-card">
@@ -75,8 +76,9 @@ const {
     </div>
   </div>
 </section>
-
+</div>
 <style>
+  .cq-cta-glow-banner-cq { container-type: inline-size; }
   .cta-banner-section {
     padding: var(--sp-20, 5rem) var(--sp-6, 1.5rem);
     background: var(--c-bg-primary, #030712);
@@ -127,7 +129,7 @@ const {
     font-weight: 700;
     letter-spacing: 0.06em;
     text-transform: uppercase;
-    background: rgba(184, 134, 11, 0.15);
+    background: color-mix(in srgb, var(--c-primary, #b8860b) 15%, transparent);
     color: #facc15;
     border: 1px solid rgba(234, 179, 8, 0.3);
     margin-bottom: var(--sp-4, 1.25rem);
@@ -163,7 +165,7 @@ const {
     align-items: center;
     gap: 0.5rem;
     background: rgba(0, 0, 0, 0.4);
-    border: 1px solid rgba(255, 255, 255, 0.12);
+    border: 1px solid rgb(var(--ink-rgb, 255 255 255) / 0.12);
     border-radius: 12px;
     padding: 0.35rem;
     max-width: 460px;
@@ -211,16 +213,16 @@ const {
   }
 
   .cta-btn--ghost {
-    background: rgba(255, 255, 255, 0.05);
+    background: rgb(var(--ink-rgb, 255 255 255) / 0.05);
     color: #fff;
-    border: 1px solid rgba(255, 255, 255, 0.12);
+    border: 1px solid rgb(var(--ink-rgb, 255 255 255) / 0.12);
     height: 48px;
     box-sizing: border-box;
   }
 
   .cta-btn--ghost:hover {
-    background: rgba(255, 255, 255, 0.12);
-    border-color: rgba(255, 255, 255, 0.25);
+    background: rgb(var(--ink-rgb, 255 255 255) / 0.12);
+    border-color: rgb(var(--ink-rgb, 255 255 255) / 0.25);
   }
 
   .cta-trust-row {
@@ -230,7 +232,7 @@ const {
     justify-content: center;
     gap: 1.5rem;
     padding-top: 1.5rem;
-    border-top: 1px solid rgba(255, 255, 255, 0.08);
+    border-top: 1px solid rgb(var(--ink-rgb, 255 255 255) / 0.08);
   }
 
   .trust-item {
@@ -246,7 +248,7 @@ const {
     color: #eab308;
   }
 
-  @media (max-width: 640px) {
+  @container (max-width: 640px) {
     .cta-form {
       flex-direction: column;
       background: transparent;
@@ -256,7 +258,7 @@ const {
     .cta-input {
       width: 100%;
       background: rgba(0, 0, 0, 0.4);
-      border: 1px solid rgba(255, 255, 255, 0.12);
+      border: 1px solid rgb(var(--ink-rgb, 255 255 255) / 0.12);
       border-radius: 8px;
       box-sizing: border-box;
     }

package/src/components/lib/sections/CtaNewsletterSection.astro

@@ -40,6 +40,7 @@ const {
 const id = `cns-${Math.random().toString(36).slice(2, 8)}`;
 ---
 
+<div class="cq-cta-newsletter-section-cq">
 <section class={`cns cns--${variant} cns--${size} ${className}`} aria-labelledby={id}>
   <div class="cns__box">
     <div class="cns__copy">
@@ -65,7 +66,7 @@ const id = `cns-${Math.random().toString(36).slice(2, 8)}`;
     </form>
   </div>
 </section>
-
+</div>
 <script>
   document.querySelectorAll<HTMLFormElement>('.cns__form').forEach((form) => {
     const input = form.querySelector<HTMLInputElement>('.cns__input');
@@ -89,6 +90,7 @@ const id = `cns-${Math.random().toString(36).slice(2, 8)}`;
 </script>
 
 <style>
+  .cq-cta-newsletter-section-cq { container-type: inline-size; }
   .cns {
     --cns-py: 5rem;
     padding: var(--cns-py) var(--sp-6, 1.5rem);
@@ -107,12 +109,12 @@ const id = `cns-${Math.random().toString(36).slice(2, 8)}`;
     border-radius: var(--r-xl, 28px);
   }
   .cns--gradient .cns__box {
-    background: radial-gradient(circle at 100% 0%, rgba(144, 133, 233, 0.22), transparent 55%), radial-gradient(circle at 0% 100%, var(--c-primary-glow, rgba(184, 134, 11, 0.2)), transparent 55%), #0c0c10;
-    border: 1px solid rgba(255, 255, 255, 0.08);
+    background: radial-gradient(circle at 100% 0%, rgba(144, 133, 233, 0.22), transparent 55%), radial-gradient(circle at 0% 100%, var(--c-primary-glow, color-mix(in srgb, var(--c-primary, #b8860b) 20%, transparent)), transparent 55%), #0c0c10;
+    border: 1px solid rgb(var(--ink-rgb, 255 255 255) / 0.08);
   }
-  .cns--glass .cns__box { background: rgba(255, 255, 255, 0.035); border: 1px solid var(--c-border, rgba(255, 255, 255, 0.08)); backdrop-filter: blur(16px); }
-  .cns--bordered .cns__box { border: 1px solid rgba(255, 255, 255, 0.14); }
-  .cns__icon { display: grid; place-items: center; width: 48px; height: 48px; margin-bottom: 1.25rem; border-radius: 14px; background: rgba(255, 255, 255, 0.06); border: 1px solid rgba(255, 255, 255, 0.1); color: var(--c-text-1, #fff); }
+  .cns--glass .cns__box { background: rgb(var(--ink-rgb, 255 255 255) / 0.035); border: 1px solid var(--c-border, rgb(var(--ink-rgb, 255 255 255) / 0.08)); backdrop-filter: blur(16px); }
+  .cns--bordered .cns__box { border: 1px solid rgb(var(--ink-rgb, 255 255 255) / 0.14); }
+  .cns__icon { display: grid; place-items: center; width: 48px; height: 48px; margin-bottom: 1.25rem; border-radius: 14px; background: rgb(var(--ink-rgb, 255 255 255) / 0.06); border: 1px solid rgb(var(--ink-rgb, 255 255 255) / 0.1); color: var(--c-text-1, #fff); }
   .cns__title { margin: 0 0 0.75rem; font-size: clamp(1.6rem, 3.5vw, 2.25rem); font-weight: 800; letter-spacing: -0.03em; line-height: 1.15; color: var(--c-text-1, #fff); }
   .cns__subtitle { margin: 0 0 1.25rem; font-size: 1rem; line-height: 1.6; color: var(--c-text-2, #a3a3a3); }
   .cns__perks { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 0.5rem 1.25rem; }
@@ -126,7 +128,7 @@ const id = `cns-${Math.random().toString(36).slice(2, 8)}`;
     min-height: 50px;
     padding: 0 1rem;
     border-radius: var(--r-md, 12px);
-    border: 1px solid rgba(255, 255, 255, 0.14);
+    border: 1px solid rgb(var(--ink-rgb, 255 255 255) / 0.14);
     background: rgba(0, 0, 0, 0.35);
     color: var(--c-text-1, #fff);
     font: inherit;
@@ -134,7 +136,7 @@ const id = `cns-${Math.random().toString(36).slice(2, 8)}`;
     transition: border-color 0.2s ease, box-shadow 0.2s ease;
   }
   .cns__input::placeholder { color: var(--c-text-3, #737373); }
-  .cns__input:focus { outline: none; border-color: var(--c-primary-light, #d4a017); box-shadow: 0 0 0 3px var(--c-primary-glow, rgba(184, 134, 11, 0.25)); }
+  .cns__input:focus { outline: none; border-color: var(--c-primary-light, #d4a017); box-shadow: 0 0 0 3px var(--c-primary-glow, color-mix(in srgb, var(--c-primary, #b8860b) 25%, transparent)); }
   .cns__input[aria-invalid='true'] { border-color: var(--chart-neg, #f06a6a); }
   .cns__btn {
     min-height: 50px;
@@ -142,7 +144,7 @@ const id = `cns-${Math.random().toString(36).slice(2, 8)}`;
     border: 0;
     border-radius: var(--r-md, 12px);
     background: var(--c-text-1, #fff);
-    color: #0a0a0a;
+    color: var(--c-on-primary, #0a0a0a);
     font: inherit;
     font-weight: 650;
     cursor: pointer;
@@ -154,10 +156,10 @@ const id = `cns-${Math.random().toString(36).slice(2, 8)}`;
   .cns__msg[data-state='error'] { color: #ff9b9b; }
   .cns__msg[data-state='ok'] { color: #7ee2b8; }
   .cns__privacy { margin: 0.25rem 0 0; font-size: 0.8125rem; color: var(--c-text-3, #8a8a8a); }
-  @media (max-width: 820px) {
+  @container (max-width: 820px) {
     .cns__box { grid-template-columns: 1fr; }
   }
-  @media (max-width: 460px) {
+  @container (max-width: 460px) {
     .cns__field { flex-direction: column; }
   }
 </style>

package/src/components/lib/sections/CtaSplitImage.astro

@@ -47,6 +47,7 @@ const {
 const id = `csi-${Math.random().toString(36).slice(2, 8)}`;
 ---
 
+<div class="cq-cta-split-image-cq">
 <section class={`csi csi--${variant} csi--${size} ${className}`} aria-labelledby={id}>
   <div class="csi__box">
     <div class="csi__copy">
@@ -70,8 +71,9 @@ const id = `csi-${Math.random().toString(36).slice(2, 8)}`;
     </div>
   </div>
 </section>
-
+</div>
 <style>
+  .cq-cta-split-image-cq { container-type: inline-size; }
   .csi {
     --csi-py: 5rem;
     padding: var(--csi-py) var(--sp-6, 1.5rem);
@@ -86,19 +88,19 @@ const id = `csi-${Math.random().toString(36).slice(2, 8)}`;
     grid-template-columns: 1fr 1fr;
     border-radius: var(--r-xl, 28px);
     overflow: hidden;
-    border: 1px solid var(--c-border, rgba(255, 255, 255, 0.08));
+    border: 1px solid var(--c-border, rgb(var(--ink-rgb, 255 255 255) / 0.08));
     background: var(--c-bg-1, #0a0a0a);
   }
-  .csi--outline .csi__box { background: transparent; border-color: rgba(255, 255, 255, 0.15); }
+  .csi--outline .csi__box { background: transparent; border-color: rgb(var(--ink-rgb, 255 255 255) / 0.15); }
   .csi__copy { padding: clamp(2rem, 6vw, 4rem); display: flex; flex-direction: column; justify-content: center; }
   .csi__title { margin: 0 0 1rem; font-size: clamp(1.75rem, 4vw, 2.75rem); font-weight: 800; letter-spacing: -0.03em; line-height: 1.1; color: var(--c-text-1, #fff); text-wrap: balance; }
   .csi__text { margin: 0 0 2rem; font-size: 1.0625rem; line-height: 1.6; color: var(--c-text-2, #a3a3a3); max-width: 460px; }
   .csi__actions { display: flex; flex-wrap: wrap; gap: 0.75rem; }
   .csi__btn { display: inline-flex; align-items: center; min-height: 48px; padding: 0 1.5rem; border-radius: var(--r-md, 12px); font-weight: 650; text-decoration: none; transition: background 0.2s ease, border-color 0.2s ease; }
-  .csi__btn--primary { background: var(--c-primary-light, #d4a017); color: #0a0a0a; }
-  .csi__btn--primary:hover { background: var(--c-accent, #fef3c7); color: #0a0a0a; }
-  .csi__btn--ghost { border: 1px solid rgba(255, 255, 255, 0.15); color: var(--c-text-1, #fff); }
-  .csi__btn--ghost:hover { border-color: rgba(255, 255, 255, 0.32); color: var(--c-text-1, #fff); }
+  .csi__btn--primary { background: var(--c-primary-light, #d4a017); color: var(--c-on-primary, #0a0a0a); }
+  .csi__btn--primary:hover { background: var(--c-accent, #fef3c7); color: var(--c-on-primary, #0a0a0a); }
+  .csi__btn--ghost { border: 1px solid rgb(var(--ink-rgb, 255 255 255) / 0.15); color: var(--c-text-1, #fff); }
+  .csi__btn--ghost:hover { border-color: rgb(var(--ink-rgb, 255 255 255) / 0.32); color: var(--c-text-1, #fff); }
   .csi__btn:focus-visible { outline: 2px solid var(--c-primary-light, #d4a017); outline-offset: 3px; }
   .csi__visual { position: relative; min-height: 320px; }
   .csi__visual img { width: 100%; height: 100%; object-fit: cover; display: block; }
@@ -114,13 +116,13 @@ const id = `csi-${Math.random().toString(36).slice(2, 8)}`;
   }
   .csi--mesh .csi__mesh {
     background:
-      radial-gradient(circle at 20% 20%, rgba(212, 160, 23, 0.55), transparent 45%),
+      radial-gradient(circle at 20% 20%, color-mix(in srgb, var(--c-primary-light, #d4a017) 55%, transparent), transparent 45%),
       radial-gradient(circle at 80% 30%, rgba(144, 133, 233, 0.55), transparent 45%),
       radial-gradient(circle at 50% 90%, rgba(57, 135, 229, 0.5), transparent 50%),
       #121218;
   }
   .csi--solid .csi__mesh { background: linear-gradient(135deg, #1a1408, #0c0c10); }
-  .csi--outline .csi__mesh { background: repeating-linear-gradient(45deg, rgba(255, 255, 255, 0.03) 0 12px, transparent 12px 24px); }
+  .csi--outline .csi__mesh { background: repeating-linear-gradient(45deg, rgb(var(--ink-rgb, 255 255 255) / 0.03) 0 12px, transparent 12px 24px); }
   .csi__chip {
     display: inline-flex;
     align-items: baseline;
@@ -128,7 +130,7 @@ const id = `csi-${Math.random().toString(36).slice(2, 8)}`;
     padding: 0.75rem 1.1rem;
     border-radius: var(--r-md, 14px);
     background: rgba(10, 10, 12, 0.6);
-    border: 1px solid rgba(255, 255, 255, 0.14);
+    border: 1px solid rgb(var(--ink-rgb, 255 255 255) / 0.14);
     backdrop-filter: blur(12px);
     color: var(--c-text-2, #c4c4c4);
     font-size: 0.875rem;
@@ -139,7 +141,7 @@ const id = `csi-${Math.random().toString(36).slice(2, 8)}`;
   .csi__chip:nth-child(3) { transform: translateX(-2rem); }
   .csi__chip strong { font-size: 1.25rem; color: var(--c-text-1, #fff); font-variant-numeric: tabular-nums; }
   @keyframes csi-float { 50% { translate: 0 -8px; } }
-  @media (max-width: 820px) {
+  @container (max-width: 820px) {
     .csi__box { grid-template-columns: 1fr; }
     .csi__visual { min-height: 240px; }
   }

package/src/components/lib/sections/DataShowcase.astro

@@ -8,6 +8,7 @@ interface Props {
 const { title = "Data Display", subtitle = "Stats, tables, and visualization elements." } = Astro.props;
 ---
 
+<div class="cq-data-showcase-cq">
 <section class="data-showcase">
   <div class="container">
     <div class="showcase-header">
@@ -78,8 +79,9 @@ const { title = "Data Display", subtitle = "Stats, tables, and visualization ele
     </div>
   </div>
 </section>
-
+</div>
 <style>
+  .cq-data-showcase-cq { container-type: inline-size; }
   .data-showcase {
     padding: var(--sp-16) 0;
     position: relative;
@@ -96,8 +98,8 @@ const { title = "Data Display", subtitle = "Stats, tables, and visualization ele
     text-transform: uppercase;
     letter-spacing: 0.1em;
     color: var(--c-primary-light);
-    background: rgba(184,134,11,0.1);
-    border: 1px solid rgba(184,134,11,0.25);
+    background: color-mix(in srgb, var(--c-primary, #b8860b) 10%, transparent);
+    border: 1px solid color-mix(in srgb, var(--c-primary, #b8860b) 25%, transparent);
     border-radius: var(--r-full);
     margin-bottom: var(--sp-4);
   }
@@ -119,7 +121,7 @@ const { title = "Data Display", subtitle = "Stats, tables, and visualization ele
     padding: var(--sp-12);
     background: rgba(10, 10, 10, 0.6);
     backdrop-filter: blur(20px);
-    border: 1px solid rgba(255,255,255,0.08);
+    border: 1px solid rgb(var(--ink-rgb, 255 255 255) / 0.08);
     border-radius: var(--r-xl);
     margin-bottom: var(--sp-6);
     box-shadow: 0 20px 60px rgba(0,0,0,0.4);
@@ -146,16 +148,16 @@ const { title = "Data Display", subtitle = "Stats, tables, and visualization ele
   }
   .stat-card {
     padding: var(--sp-5);
-    background: rgba(255,255,255,0.04);
+    background: rgb(var(--ink-rgb, 255 255 255) / 0.04);
     backdrop-filter: blur(12px);
-    border: 1px solid rgba(255,255,255,0.08);
+    border: 1px solid rgb(var(--ink-rgb, 255 255 255) / 0.08);
     border-radius: var(--r-lg);
     text-align: center;
     transition: all 0.25s ease;
   }
   .stat-card:hover {
-    background: rgba(255,255,255,0.07);
-    border-color: rgba(184,134,11,0.25);
+    background: rgb(var(--ink-rgb, 255 255 255) / 0.07);
+    border-color: color-mix(in srgb, var(--c-primary, #b8860b) 25%, transparent);
     transform: translateY(-2px);
   }
   .stat-value {
@@ -176,9 +178,9 @@ const { title = "Data Display", subtitle = "Stats, tables, and visualization ele
 
   /* Mini Table */
   .mini-table {
-    background: rgba(255,255,255,0.04);
+    background: rgb(var(--ink-rgb, 255 255 255) / 0.04);
     backdrop-filter: blur(12px);
-    border: 1px solid rgba(255,255,255,0.08);
+    border: 1px solid rgb(var(--ink-rgb, 255 255 255) / 0.08);
     border-radius: var(--r-lg);
     overflow: hidden;
   }
@@ -186,8 +188,8 @@ const { title = "Data Display", subtitle = "Stats, tables, and visualization ele
     display: grid;
     grid-template-columns: 1.5fr 0.8fr 1fr;
     padding: var(--sp-3) var(--sp-5);
-    background: rgba(255,255,255,0.06);
-    border-bottom: 1px solid rgba(255,255,255,0.08);
+    background: rgb(var(--ink-rgb, 255 255 255) / 0.06);
+    border-bottom: 1px solid rgb(var(--ink-rgb, 255 255 255) / 0.08);
     font-size: 0.7rem;
     font-weight: 600;
     text-transform: uppercase;
@@ -198,7 +200,7 @@ const { title = "Data Display", subtitle = "Stats, tables, and visualization ele
     display: grid;
     grid-template-columns: 1.5fr 0.8fr 1fr;
     padding: var(--sp-3) var(--sp-5);
-    border-bottom: 1px solid rgba(255,255,255,0.04);
+    border-bottom: 1px solid rgb(var(--ink-rgb, 255 255 255) / 0.04);
     font-size: 0.85rem;
     align-items: center;
     transition: background 0.2s ease;
@@ -207,7 +209,7 @@ const { title = "Data Display", subtitle = "Stats, tables, and visualization ele
     border-bottom: none;
   }
   .table-row:hover {
-    background: rgba(255,255,255,0.03);
+    background: rgb(var(--ink-rgb, 255 255 255) / 0.03);
   }
   .col--name {
     color: var(--c-text-1);
@@ -250,9 +252,9 @@ const { title = "Data Display", subtitle = "Stats, tables, and visualization ele
   /* Progress Bar */
   .progress-section {
     padding: var(--sp-5);
-    background: rgba(255,255,255,0.04);
+    background: rgb(var(--ink-rgb, 255 255 255) / 0.04);
     backdrop-filter: blur(12px);
-    border: 1px solid rgba(255,255,255,0.08);
+    border: 1px solid rgb(var(--ink-rgb, 255 255 255) / 0.08);
     border-radius: var(--r-lg);
   }
   .progress-labels {
@@ -273,16 +275,16 @@ const { title = "Data Display", subtitle = "Stats, tables, and visualization ele
   }
   .progress-track {
     height: 8px;
-    background: rgba(255,255,255,0.08);
+    background: rgb(var(--ink-rgb, 255 255 255) / 0.08);
     border-radius: var(--r-full);
     overflow: hidden;
   }
   .progress-fill {
     width: 73%;
     height: 100%;
-    background: linear-gradient(90deg, var(--c-primary-light), var(--c-primary), rgba(184,134,11,0.4));
+    background: linear-gradient(90deg, var(--c-primary-light), var(--c-primary), color-mix(in srgb, var(--c-primary, #b8860b) 40%, transparent));
     border-radius: var(--r-full);
-    box-shadow: 0 0 12px rgba(184,134,11,0.3);
+    box-shadow: 0 0 12px color-mix(in srgb, var(--c-primary, #b8860b) 30%, transparent);
     animation: progress-pulse 2.5s ease-in-out infinite;
   }
   @keyframes progress-pulse {
@@ -293,7 +295,7 @@ const { title = "Data Display", subtitle = "Stats, tables, and visualization ele
   .usage-code {
     text-align: center;
     padding: var(--sp-4);
-    background: rgba(255,255,255,0.02);
+    background: rgb(var(--ink-rgb, 255 255 255) / 0.02);
     border-radius: var(--r-md);
   }
   .usage-code code {
@@ -302,7 +304,7 @@ const { title = "Data Display", subtitle = "Stats, tables, and visualization ele
     color: var(--c-primary-light);
   }
 
-  @media (max-width: 640px) {
+  @container (max-width: 640px) {
     .stats-row {
       grid-template-columns: 1fr;
       gap: var(--sp-3);