astro-component-kit 0.4.0 → 0.5.0

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

@@ -174,7 +174,7 @@ const faqs = [
     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);
@@ -208,7 +208,7 @@ const faqs = [
   .faq-tab {
     padding: 0.5rem 1.1rem;
     background: rgba(15, 23, 42, 0.6);
-    border: 1px solid rgba(255, 255, 255, 0.08);
+    border: 1px solid rgb(var(--ink-rgb, 255 255 255) / 0.08);
     border-radius: 9999px;
     color: #94a3b8;
     font-size: 0.85rem;
@@ -219,7 +219,7 @@ const faqs = [
 
   .faq-tab:hover {
     color: #fff;
-    border-color: rgba(255, 255, 255, 0.2);
+    border-color: rgb(var(--ink-rgb, 255 255 255) / 0.2);
   }
 
   .faq-tab--active {
@@ -239,14 +239,14 @@ const faqs = [
   .faq-item {
     background: rgba(15, 23, 42, 0.5);
     backdrop-filter: blur(16px);
-    border: 1px solid rgba(255, 255, 255, 0.08);
+    border: 1px solid rgb(var(--ink-rgb, 255 255 255) / 0.08);
     border-radius: 16px;
     overflow: hidden;
     transition: border-color 0.3s ease, background 0.3s ease;
   }
 
   .faq-item:hover {
-    border-color: rgba(255, 255, 255, 0.18);
+    border-color: rgb(var(--ink-rgb, 255 255 255) / 0.18);
   }
 
   .faq-item[open] {
@@ -302,7 +302,7 @@ const faqs = [
     gap: 1.5rem;
     padding: 1.75rem 2rem;
     background: rgba(15, 23, 42, 0.6);
-    border: 1px solid rgba(255, 255, 255, 0.1);
+    border: 1px solid rgb(var(--ink-rgb, 255 255 255) / 0.1);
     border-radius: 20px;
     flex-wrap: wrap;
   }
@@ -331,8 +331,8 @@ const faqs = [
 
   .support-btn {
     padding: 0.75rem 1.4rem;
-    background: rgba(255, 255, 255, 0.08);
-    border: 1px solid rgba(255, 255, 255, 0.15);
+    background: rgb(var(--ink-rgb, 255 255 255) / 0.08);
+    border: 1px solid rgb(var(--ink-rgb, 255 255 255) / 0.15);
     border-radius: 10px;
     color: #fff;
     font-size: 0.9rem;

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

@@ -44,6 +44,7 @@ const uid = Math.random().toString(36).slice(2, 8);
 const id = `ftc-${uid}`;
 ---
 
+<div class="cq-faq-two-column-cq">
 <section class={`ftc ftc--${variant} ftc--${size} ${className}`} aria-labelledby={id}>
   <div class="ftc__inner">
     <div class="ftc__intro">
@@ -69,8 +70,9 @@ const id = `ftc-${uid}`;
     </div>
   </div>
 </section>
-
+</div>
 <style>
+  .cq-faq-two-column-cq { container-type: inline-size; }
   .ftc {
     --ftc-py: 5.5rem;
     padding: var(--ftc-py) var(--sp-6, 1.5rem);
@@ -82,14 +84,14 @@ const id = `ftc-${uid}`;
   .ftc__intro { position: sticky; top: 6rem; }
   .ftc__title { margin: 0 0 1rem; font-size: clamp(1.9rem, 4vw, 2.5rem); font-weight: 800; letter-spacing: -0.03em; line-height: 1.12; color: var(--c-text-1, #fff); }
   .ftc__subtitle { margin: 0 0 1.75rem; font-size: 1rem; line-height: 1.65; color: var(--c-text-2, #a3a3a3); }
-  .ftc__support { display: inline-flex; align-items: center; gap: 0.5rem; min-height: 46px; padding: 0 1.25rem; border-radius: var(--r-md, 12px); border: 1px solid rgba(255, 255, 255, 0.14); color: var(--c-text-1, #fff); font-weight: 600; text-decoration: none; transition: border-color 0.2s ease; }
-  .ftc__support:hover { border-color: rgba(255, 255, 255, 0.32); color: var(--c-text-1, #fff); }
+  .ftc__support { display: inline-flex; align-items: center; gap: 0.5rem; min-height: 46px; padding: 0 1.25rem; border-radius: var(--r-md, 12px); border: 1px solid rgb(var(--ink-rgb, 255 255 255) / 0.14); color: var(--c-text-1, #fff); font-weight: 600; text-decoration: none; transition: border-color 0.2s ease; }
+  .ftc__support:hover { border-color: rgb(var(--ink-rgb, 255 255 255) / 0.32); color: var(--c-text-1, #fff); }
   .ftc__support:focus-visible { outline: 2px solid var(--c-primary-light, #d4a017); outline-offset: 2px; }
   .ftc__list { display: grid; }
   .ftc--cards .ftc__list { gap: 0.75rem; }
-  .ftc--bordered .ftc__item { border-bottom: 1px solid rgba(255, 255, 255, 0.08); }
-  .ftc--bordered .ftc__item:first-child { border-top: 1px solid rgba(255, 255, 255, 0.08); }
-  .ftc--cards .ftc__item { border-radius: var(--r-md, 14px); background: rgba(255, 255, 255, 0.025); border: 1px solid var(--c-border, rgba(255, 255, 255, 0.07)); padding-inline: 1.25rem; }
+  .ftc--bordered .ftc__item { border-bottom: 1px solid rgb(var(--ink-rgb, 255 255 255) / 0.08); }
+  .ftc--bordered .ftc__item:first-child { border-top: 1px solid rgb(var(--ink-rgb, 255 255 255) / 0.08); }
+  .ftc--cards .ftc__item { border-radius: var(--r-md, 14px); background: rgb(var(--ink-rgb, 255 255 255) / 0.025); border: 1px solid var(--c-border, rgb(var(--ink-rgb, 255 255 255) / 0.07)); padding-inline: 1.25rem; }
   .ftc__q {
     display: flex;
     justify-content: space-between;
@@ -111,7 +113,7 @@ const id = `ftc-${uid}`;
   .ftc__a p { margin: 0; font-size: 0.9875rem; line-height: 1.7; color: var(--c-text-2, #a3a3a3); }
   .ftc__item[open] .ftc__a { animation: ftc-in 0.25s ease; }
   @keyframes ftc-in { from { opacity: 0; transform: translateY(-4px); } }
-  @media (max-width: 820px) {
+  @container (max-width: 820px) {
     .ftc__inner { grid-template-columns: 1fr; }
     .ftc__intro { position: static; }
   }

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

@@ -55,6 +55,7 @@ const id = `far-${Math.random().toString(36).slice(2, 8)}`;
 const bars = [38, 62, 48, 80, 66, 92, 74];
 ---
 
+<div class="cq-feature-alternating-rows-cq">
 <section class={`far far--${variant} far--${size} ${className}`} aria-labelledby={id}>
   <h2 id={id} class="far__sr">{title}</h2>
   <div class="far__inner">
@@ -105,8 +106,9 @@ const bars = [38, 62, 48, 80, 66, 92, 74];
     })}
   </div>
 </section>
-
+</div>
 <style>
+  .cq-feature-alternating-rows-cq { container-type: inline-size; }
   .far {
     --far-py: 5.5rem;
     padding: var(--far-py) var(--sp-6, 1.5rem);
@@ -134,10 +136,10 @@ const bars = [38, 62, 48, 80, 66, 92, 74];
     overflow: hidden;
   }
   .far--glass .far__visual {
-    background: radial-gradient(circle at 30% 20%, rgba(255, 255, 255, 0.06), transparent 60%), rgba(255, 255, 255, 0.02);
-    border: 1px solid var(--c-border, rgba(255, 255, 255, 0.07));
+    background: radial-gradient(circle at 30% 20%, rgb(var(--ink-rgb, 255 255 255) / 0.06), transparent 60%), rgb(var(--ink-rgb, 255 255 255) / 0.02);
+    border: 1px solid var(--c-border, rgb(var(--ink-rgb, 255 255 255) / 0.07));
   }
-  .far--outline .far__visual { border: 1px dashed rgba(255, 255, 255, 0.14); }
+  .far--outline .far__visual { border: 1px dashed rgb(var(--ink-rgb, 255 255 255) / 0.14); }
   .far__chart { display: flex; align-items: flex-end; gap: 10px; width: 100%; height: 70%; }
   .far__chart span {
     flex: 1;
@@ -155,7 +157,7 @@ const bars = [38, 62, 48, 80, 66, 92, 74];
     padding: 1.5rem;
     border-radius: var(--r-md, 12px);
     background: #0b0b0d;
-    border: 1px solid rgba(255, 255, 255, 0.06);
+    border: 1px solid rgb(var(--ink-rgb, 255 255 255) / 0.06);
     font-family: var(--font-mono, monospace);
     font-size: 0.8125rem;
     line-height: 1.75;
@@ -173,8 +175,8 @@ const bars = [38, 62, 48, 80, 66, 92, 74];
     gap: 0.75rem;
     padding: 0.85rem 1rem;
     border-radius: var(--r-md, 12px);
-    background: rgba(255, 255, 255, 0.03);
-    border: 1px solid rgba(255, 255, 255, 0.07);
+    background: rgb(var(--ink-rgb, 255 255 255) / 0.03);
+    border: 1px solid rgb(var(--ink-rgb, 255 255 255) / 0.07);
     font-family: var(--font-mono, monospace);
     font-size: 0.8125rem;
     color: var(--c-text-1, #fff);
@@ -182,7 +184,7 @@ const bars = [38, 62, 48, 80, 66, 92, 74];
   .far__stack span::before { content: ''; width: 20px; height: 20px; border-radius: 6px; background: var(--c); }
   .far__stack span:nth-child(2) { margin-left: 1.5rem; }
   .far__stack span:nth-child(3) { margin-left: 3rem; }
-  @media (max-width: 820px) {
+  @container (max-width: 820px) {
     .far__row { grid-template-columns: 1fr; }
     .far__row--rev .far__copy { order: 0; }
   }

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

@@ -21,6 +21,7 @@ const {
 } = Astro.props;
 ---
 
+<div class="cq-feature-bento-grid-cq">
 <section class={`bento-section ${className}`} aria-labelledby="bento-title">
   <div class="bento-bg" aria-hidden="true">
     <div class="bento-glow bento-glow--1"></div>
@@ -139,8 +140,9 @@ const {
     </div>
   </div>
 </section>
-
+</div>
 <style>
+  .cq-feature-bento-grid-cq { container-type: inline-size; }
   .bento-section {
     position: relative;
     padding: var(--sp-20, 5rem) var(--sp-6, 1.5rem);
@@ -199,7 +201,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);
@@ -233,7 +235,7 @@ const {
     background: rgba(15, 23, 42, 0.6);
     backdrop-filter: blur(20px);
     -webkit-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, 20px);
     padding: 2rem;
     display: flex;
@@ -245,7 +247,7 @@ const {
 
   .bento-card:hover {
     transform: translateY(-4px);
-    border-color: rgba(255, 255, 255, 0.18);
+    border-color: rgb(var(--ink-rgb, 255 255 255) / 0.18);
     box-shadow: 0 20px 40px -15px rgba(0, 0, 0, 0.6);
   }
 
@@ -306,13 +308,13 @@ const {
     padding: 1rem;
     background: rgba(0, 0, 0, 0.3);
     border-radius: 12px;
-    border: 1px solid rgba(255, 255, 255, 0.05);
+    border: 1px solid rgb(var(--ink-rgb, 255 255 255) / 0.05);
   }
 
   .speed-score {
     text-align: center;
     padding-right: 1.5rem;
-    border-right: 1px solid rgba(255, 255, 255, 0.1);
+    border-right: 1px solid rgb(var(--ink-rgb, 255 255 255) / 0.1);
   }
 
   .score-number {
@@ -364,7 +366,7 @@ const {
   .a11y-pill {
     padding: 0.6rem 0.85rem;
     background: rgba(0, 0, 0, 0.3);
-    border: 1px solid rgba(255, 255, 255, 0.06);
+    border: 1px solid rgb(var(--ink-rgb, 255 255 255) / 0.06);
     border-radius: 8px;
     font-size: 0.82rem;
     color: #cbd5e1;
@@ -380,7 +382,7 @@ const {
     width: 22px;
     height: 22px;
     border-radius: 50%;
-    border: 2px solid rgba(255, 255, 255, 0.2);
+    border: 2px solid rgb(var(--ink-rgb, 255 255 255) / 0.2);
   }
   .color-dot--gold { background: #eab308; }
   .color-dot--indigo { background: #6366f1; }
@@ -391,7 +393,7 @@ const {
     padding: 0.75rem;
     background: rgba(0, 0, 0, 0.5);
     border-radius: 8px;
-    border: 1px solid rgba(255, 255, 255, 0.06);
+    border: 1px solid rgb(var(--ink-rgb, 255 255 255) / 0.06);
     font-size: 0.8rem;
     color: #93c5fd;
     font-family: var(--font-mono, monospace);
@@ -424,7 +426,7 @@ const {
     50% { transform: scale(1.4); opacity: 0.6; }
   }
 
-  @media (max-width: 960px) {
+  @container (max-width: 960px) {
     .bento-grid {
       grid-template-columns: 1fr;
     }
@@ -439,7 +441,7 @@ const {
     }
     .speed-score {
       border-right: none;
-      border-bottom: 1px solid rgba(255, 255, 255, 0.1);
+      border-bottom: 1px solid rgb(var(--ink-rgb, 255 255 255) / 0.1);
       padding-right: 0;
       padding-bottom: 0.75rem;
       width: 100%;

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

@@ -113,14 +113,14 @@ const id = `fig-${Math.random().toString(36).slice(2, 8)}`;
     transition: border-color 0.25s ease, background 0.25s ease, transform 0.25s ease;
   }
   .fig--card .fig__card {
-    background: linear-gradient(160deg, rgba(255, 255, 255, 0.04), rgba(255, 255, 255, 0.01));
-    border: 1px solid var(--c-border, rgba(255, 255, 255, 0.07));
+    background: linear-gradient(160deg, rgb(var(--ink-rgb, 255 255 255) / 0.04), rgb(var(--ink-rgb, 255 255 255) / 0.01));
+    border: 1px solid var(--c-border, rgb(var(--ink-rgb, 255 255 255) / 0.07));
   }
-  .fig--bordered .fig__card { border: 1px solid rgba(255, 255, 255, 0.1); }
+  .fig--bordered .fig__card { border: 1px solid rgb(var(--ink-rgb, 255 255 255) / 0.1); }
   .fig--plain .fig__card { padding: 0.5rem 0; }
   .fig--card .fig__card:hover, .fig--card .fig__card:focus-within,
   .fig--bordered .fig__card:hover, .fig--bordered .fig__card:focus-within {
-    border-color: rgba(212, 160, 23, 0.35);
+    border-color: color-mix(in srgb, var(--c-primary-light, #d4a017) 35%, transparent);
     transform: translateY(-3px);
   }
   .fig__icon {
@@ -130,8 +130,8 @@ const id = `fig-${Math.random().toString(36).slice(2, 8)}`;
     height: 46px;
     margin-bottom: 1.25rem;
     border-radius: var(--r-md, 12px);
-    background: var(--c-primary-glow, rgba(184, 134, 11, 0.12));
-    border: 1px solid rgba(212, 160, 23, 0.25);
+    background: var(--c-primary-glow, color-mix(in srgb, var(--c-primary, #b8860b) 12%, transparent));
+    border: 1px solid color-mix(in srgb, var(--c-primary-light, #d4a017) 25%, transparent);
     color: var(--c-primary-light, #d4a017);
   }
   .fig__card-title { margin: 0 0 0.5rem; font-size: 1.125rem; font-weight: 650; color: var(--c-text-1, #fff); letter-spacing: -0.01em; }

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

@@ -37,6 +37,7 @@ const uid = Math.random().toString(36).slice(2, 8);
 const id = `fts-${uid}`;
 ---
 
+<div class="cq-feature-tabs-showcase-cq">
 <section class={`fts fts--${variant} fts--${size} ${className}`} aria-labelledby={id}>
   <div class="fts__inner">
     <header class="fts__head">
@@ -79,7 +80,7 @@ const id = `fts-${uid}`;
     </div>
   </div>
 </section>
-
+</div>
 <script>
   document.querySelectorAll<HTMLElement>('[data-fts]').forEach((root) => {
     const tabs = Array.from(root.querySelectorAll<HTMLButtonElement>('[role="tab"]'));
@@ -106,6 +107,7 @@ const id = `fts-${uid}`;
 </script>
 
 <style>
+  .cq-feature-tabs-showcase-cq { container-type: inline-size; }
   .fts {
     --fts-py: 5.5rem;
     padding: var(--fts-py) var(--sp-6, 1.5rem);
@@ -133,13 +135,13 @@ const id = `fts-${uid}`;
   }
   .fts__tab:hover { color: var(--c-text-1, #fff); }
   .fts__tab:focus-visible { outline: 2px solid var(--c-primary-light, #d4a017); outline-offset: 2px; }
-  .fts--pills .fts__list { width: fit-content; margin-inline: auto; padding: 0.35rem; border-radius: var(--r-full, 999px); background: rgba(255, 255, 255, 0.04); border: 1px solid rgba(255, 255, 255, 0.07); }
-  .fts--pills .fts__tab[aria-selected='true'] { background: var(--c-text-1, #fff); color: #0a0a0a; }
-  .fts--underline .fts__list { border-bottom: 1px solid rgba(255, 255, 255, 0.08); gap: 1.5rem; }
+  .fts--pills .fts__list { width: fit-content; margin-inline: auto; padding: 0.35rem; border-radius: var(--r-full, 999px); background: rgb(var(--ink-rgb, 255 255 255) / 0.04); border: 1px solid rgb(var(--ink-rgb, 255 255 255) / 0.07); }
+  .fts--pills .fts__tab[aria-selected='true'] { background: var(--c-text-1, #fff); color: var(--c-on-primary, #0a0a0a); }
+  .fts--underline .fts__list { border-bottom: 1px solid rgb(var(--ink-rgb, 255 255 255) / 0.08); gap: 1.5rem; }
   .fts--underline .fts__tab { border-radius: 0; padding: 0 0.25rem; border-bottom: 2px solid transparent; margin-bottom: -1px; }
   .fts--underline .fts__tab[aria-selected='true'] { color: var(--c-text-1, #fff); border-bottom-color: var(--c-primary-light, #d4a017); }
-  .fts--cards .fts__tab { border-radius: var(--r-md, 12px); border-color: rgba(255, 255, 255, 0.08); }
-  .fts--cards .fts__tab[aria-selected='true'] { border-color: var(--c-primary-light, #d4a017); color: var(--c-text-1, #fff); background: var(--c-primary-glow, rgba(184, 134, 11, 0.12)); }
+  .fts--cards .fts__tab { border-radius: var(--r-md, 12px); border-color: rgb(var(--ink-rgb, 255 255 255) / 0.08); }
+  .fts--cards .fts__tab[aria-selected='true'] { border-color: var(--c-primary-light, #d4a017); color: var(--c-text-1, #fff); background: var(--c-primary-glow, color-mix(in srgb, var(--c-primary, #b8860b) 12%, transparent)); }
 
   .fts__panel {
     display: grid;
@@ -148,8 +150,8 @@ const id = `fts-${uid}`;
     align-items: center;
     padding: clamp(1.5rem, 4vw, 3rem);
     border-radius: var(--r-xl, 24px);
-    background: linear-gradient(160deg, rgba(255, 255, 255, 0.045), rgba(255, 255, 255, 0.01));
-    border: 1px solid var(--c-border, rgba(255, 255, 255, 0.07));
+    background: linear-gradient(160deg, rgb(var(--ink-rgb, 255 255 255) / 0.045), rgb(var(--ink-rgb, 255 255 255) / 0.01));
+    border: 1px solid var(--c-border, rgb(var(--ink-rgb, 255 255 255) / 0.07));
     animation: fts-in 0.35s ease;
   }
   .fts__panel[hidden] { display: none; }
@@ -168,13 +170,13 @@ const id = `fts-${uid}`;
     gap: 0.5rem;
     min-height: 200px;
     border-radius: var(--r-lg, 20px);
-    background: radial-gradient(circle at 50% 30%, var(--c-primary-glow, rgba(184, 134, 11, 0.16)), transparent 70%), rgba(255, 255, 255, 0.02);
-    border: 1px solid rgba(255, 255, 255, 0.06);
+    background: radial-gradient(circle at 50% 30%, var(--c-primary-glow, color-mix(in srgb, var(--c-primary, #b8860b) 16%, transparent)), transparent 70%), rgb(var(--ink-rgb, 255 255 255) / 0.02);
+    border: 1px solid rgb(var(--ink-rgb, 255 255 255) / 0.06);
     text-align: center;
     padding: 1.5rem;
   }
   .fts__stat-value { font-size: clamp(2.75rem, 6vw, 4rem); font-weight: 800; letter-spacing: -0.04em; color: var(--c-text-1, #fff); font-variant-numeric: tabular-nums; line-height: 1; }
   .fts__stat-label { font-size: 0.875rem; color: var(--c-text-2, #a3a3a3); }
-  @media (max-width: 760px) { .fts__panel { grid-template-columns: 1fr; } }
+  @container (max-width: 760px) { .fts__panel { grid-template-columns: 1fr; } }
   @media (prefers-reduced-motion: reduce) { .fts__panel { animation: none; } }
 </style>

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

@@ -48,6 +48,7 @@ const steps = [
 ];
 ---
 
+<div class="cq-feature-timeline-flow-cq">
 <section class={`timeline-section ${className}`} aria-labelledby="timeline-title">
   <div class="timeline-bg" aria-hidden="true">
     <div class="timeline-glow"></div>
@@ -83,8 +84,9 @@ const steps = [
     </div>
   </div>
 </section>
-
+</div>
 <style>
+  .cq-feature-timeline-flow-cq { container-type: inline-size; }
   .timeline-section {
     position: relative;
     padding: var(--sp-20, 5rem) var(--sp-6, 1.5rem);
@@ -131,7 +133,7 @@ const steps = [
     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);
@@ -199,7 +201,7 @@ const steps = [
     flex: 1;
     background: rgba(15, 23, 42, 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: 20px;
     padding: 2rem;
     transition: transform 0.3s ease, border-color 0.3s ease;
@@ -207,7 +209,7 @@ const steps = [
 
   .step-card__body:hover {
     transform: translateX(4px);
-    border-color: rgba(255, 255, 255, 0.18);
+    border-color: rgb(var(--ink-rgb, 255 255 255) / 0.18);
   }
 
   .step-tag {
@@ -234,7 +236,7 @@ const steps = [
   .step-code {
     padding: 0.75rem 1rem;
     background: rgba(0, 0, 0, 0.5);
-    border: 1px solid rgba(255, 255, 255, 0.08);
+    border: 1px solid rgb(var(--ink-rgb, 255 255 255) / 0.08);
     border-radius: 10px;
     font-family: var(--font-mono, monospace);
     font-size: 0.85rem;
@@ -242,7 +244,7 @@ const steps = [
     overflow-x: auto;
   }
 
-  @media (max-width: 640px) {
+  @container (max-width: 640px) {
     .flow-line {
       display: none;
     }

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

@@ -8,6 +8,7 @@ interface Props {
 const { title = "Feedback", subtitle = "Badges, alerts, and notification components." } = Astro.props;
 ---
 
+<div class="cq-feedback-showcase-cq">
 <section class="feedback-showcase">
   <div class="container">
     <div class="showcase-header">
@@ -66,8 +67,9 @@ const { title = "Feedback", subtitle = "Badges, alerts, and notification compone
     </div>
   </div>
 </section>
-
+</div>
 <style>
+  .cq-feedback-showcase-cq { container-type: inline-size; }
   .feedback-showcase {
     padding: var(--sp-16) 0;
     position: relative;
@@ -84,8 +86,8 @@ const { title = "Feedback", subtitle = "Badges, alerts, and notification compone
     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);
   }
@@ -107,7 +109,7 @@ const { title = "Feedback", subtitle = "Badges, alerts, and notification compone
     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);
@@ -192,13 +194,13 @@ const { title = "Feedback", subtitle = "Badges, alerts, and notification compone
   }
   .badge--new {
     background: linear-gradient(135deg, var(--c-primary-light), var(--c-primary));
-    color: #0a0a0a;
-    box-shadow: 0 2px 10px rgba(184,134,11,0.25);
+    color: var(--c-on-primary, #0a0a0a);
+    box-shadow: 0 2px 10px color-mix(in srgb, var(--c-primary, #b8860b) 25%, transparent);
   }
   .badge--beta {
-    background: rgba(255,255,255,0.08);
+    background: rgb(var(--ink-rgb, 255 255 255) / 0.08);
     color: var(--c-text-1);
-    border: 1px solid rgba(255,255,255,0.12);
+    border: 1px solid rgb(var(--ink-rgb, 255 255 255) / 0.12);
   }
   .badge--count {
     background: rgba(239,68,68,0.15);
@@ -215,9 +217,9 @@ const { title = "Feedback", subtitle = "Badges, alerts, and notification compone
     gap: 0.75rem;
     width: 100%;
     padding: 1rem;
-    background: rgba(255,255,255,0.06);
+    background: rgb(var(--ink-rgb, 255 255 255) / 0.06);
     backdrop-filter: blur(12px);
-    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-lg);
     box-shadow: 0 8px 30px rgba(0,0,0,0.3);
     animation: fadeSlideIn 0.5s ease 0.45s both;
@@ -268,7 +270,7 @@ const { title = "Feedback", subtitle = "Badges, alerts, and notification compone
   .spinner {
     width: 1.5rem;
     height: 1.5rem;
-    border: 2px solid rgba(184,134,11,0.2);
+    border: 2px solid color-mix(in srgb, var(--c-primary, #b8860b) 20%, transparent);
     border-top-color: var(--c-primary-light);
     border-radius: 50%;
     animation: spin 0.8s linear infinite;
@@ -300,7 +302,7 @@ const { title = "Feedback", subtitle = "Badges, alerts, and notification compone
   .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 {
@@ -309,7 +311,7 @@ const { title = "Feedback", subtitle = "Badges, alerts, and notification compone
     color: var(--c-primary-light);
   }
 
-  @media (max-width: 640px) {
+  @container (max-width: 640px) {
     .feedback-stack { max-width: 100%; gap: var(--sp-4); }
     .preview-stage { padding: var(--sp-8) var(--sp-4); }
     .preview-stage__inner { min-height: auto; }

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

@@ -58,6 +58,7 @@ const icons = {
 const id = `fms-${Math.random().toString(36).slice(2, 8)}`;
 ---
 
+<div class="cq-footer-mega-section-cq">
 <footer class={`fms fms--${variant} fms--${size} ${className}`} aria-labelledby={id}>
   <h2 id={id} class="fms__sr">Site footer</h2>
   <div class="fms__inner">
@@ -108,32 +109,33 @@ const id = `fms-${Math.random().toString(36).slice(2, 8)}`;
     </div>
   </div>
 </footer>
-
+</div>
 <style>
+  .cq-footer-mega-section-cq { container-type: inline-size; }
   .fms {
     --fms-py: 4.5rem;
     padding: var(--fms-py) var(--sp-6, 1.5rem) 2rem;
     background: var(--c-bg-1, #0a0a0a);
-    border-top: 1px solid rgba(255, 255, 255, 0.06);
+    border-top: 1px solid rgb(var(--ink-rgb, 255 255 255) / 0.06);
   }
   .fms--sm { --fms-py: 3rem; }
   .fms--lg { --fms-py: 6rem; }
-  .fms--bordered .fms__inner { padding: clamp(1.5rem, 4vw, 3rem); border-radius: var(--r-xl, 28px); border: 1px solid var(--c-border, rgba(255, 255, 255, 0.08)); background: rgba(255, 255, 255, 0.015); }
+  .fms--bordered .fms__inner { padding: clamp(1.5rem, 4vw, 3rem); border-radius: var(--r-xl, 28px); border: 1px solid var(--c-border, rgb(var(--ink-rgb, 255 255 255) / 0.08)); background: rgb(var(--ink-rgb, 255 255 255) / 0.015); }
   .fms--minimal { background: transparent; border-top: 0; }
   .fms--minimal .fms__news { display: none; }
   .fms__sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
   .fms__inner { max-width: 1180px; margin: 0 auto; }
-  .fms__top { display: grid; grid-template-columns: 1.2fr 2fr; gap: clamp(2rem, 6vw, 5rem); padding-bottom: 3rem; border-bottom: 1px solid rgba(255, 255, 255, 0.07); }
+  .fms__top { display: grid; grid-template-columns: 1.2fr 2fr; gap: clamp(2rem, 6vw, 5rem); padding-bottom: 3rem; border-bottom: 1px solid rgb(var(--ink-rgb, 255 255 255) / 0.07); }
   .fms__logo { display: inline-flex; align-items: center; gap: 0.6rem; min-height: 44px; font-size: 1.25rem; font-weight: 800; letter-spacing: -0.02em; color: var(--c-text-1, #fff); text-decoration: none; }
   .fms__tagline { margin: 0.75rem 0 1.75rem; max-width: 320px; font-size: 0.9375rem; line-height: 1.6; color: var(--c-text-2, #a3a3a3); }
   .fms__news-label { display: block; margin-bottom: 0.5rem; font-size: 0.8125rem; font-weight: 600; color: var(--c-text-1, #fff); }
-  .fms__news-field { display: flex; max-width: 340px; border-radius: var(--r-md, 12px); border: 1px solid rgba(255, 255, 255, 0.12); background: rgba(0, 0, 0, 0.3); overflow: hidden; transition: border-color 0.2s ease; }
+  .fms__news-field { display: flex; max-width: 340px; border-radius: var(--r-md, 12px); border: 1px solid rgb(var(--ink-rgb, 255 255 255) / 0.12); background: rgba(0, 0, 0, 0.3); overflow: hidden; transition: border-color 0.2s ease; }
   .fms__news-field:focus-within { border-color: var(--c-primary-light, #d4a017); }
   .fms__news-field input { flex: 1; min-width: 0; min-height: 46px; padding: 0 0.9rem; border: 0; background: transparent; color: var(--c-text-1, #fff); font: inherit; font-size: 0.9375rem; }
   .fms__news-field input:focus { outline: none; }
   .fms__news-field input::placeholder { color: var(--c-text-3, #737373); }
-  .fms__news-field button { width: 46px; border: 0; background: rgba(255, 255, 255, 0.06); color: var(--c-text-1, #fff); cursor: pointer; transition: background 0.2s ease; }
-  .fms__news-field button:hover { background: var(--c-primary-light, #d4a017); color: #0a0a0a; }
+  .fms__news-field button { width: 46px; border: 0; background: rgb(var(--ink-rgb, 255 255 255) / 0.06); color: var(--c-text-1, #fff); cursor: pointer; transition: background 0.2s ease; }
+  .fms__news-field button:hover { background: var(--c-primary-light, #d4a017); color: var(--c-on-primary, #0a0a0a); }
   .fms__news-field button:focus-visible { outline: 2px solid var(--c-primary-light, #d4a017); outline-offset: -2px; }
   .fms__cols { display: grid; grid-template-columns: repeat(auto-fit, minmax(130px, 1fr)); gap: 2rem; }
   .fms__col-title { margin: 0 0 1rem; font-size: 0.8125rem; font-weight: 650; letter-spacing: 0.06em; text-transform: uppercase; color: var(--c-text-1, #fff); }
@@ -144,12 +146,12 @@ const id = `fms-${Math.random().toString(36).slice(2, 8)}`;
   .fms a:focus-visible { outline: 2px solid var(--c-primary-light, #d4a017); outline-offset: 2px; border-radius: 4px; }
   .fms__bottom { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 1rem; padding-top: 1.75rem; }
   .fms__copy { margin: 0; font-size: 0.8125rem; }
-  .fms__status { display: inline-flex; align-items: center; gap: 0.5rem; min-height: 36px; padding: 0 0.85rem; border-radius: 999px; border: 1px solid rgba(255, 255, 255, 0.08); font-size: 0.8125rem; }
+  .fms__status { display: inline-flex; align-items: center; gap: 0.5rem; min-height: 36px; padding: 0 0.85rem; border-radius: 999px; border: 1px solid rgb(var(--ink-rgb, 255 255 255) / 0.08); font-size: 0.8125rem; }
   .fms__status:hover { color: var(--c-text-1, #fff); }
   .fms__dot { width: 8px; height: 8px; border-radius: 50%; background: var(--chart-pos, #34c38f); box-shadow: 0 0 8px var(--chart-pos, #34c38f); }
   .fms__socials { list-style: none; margin: 0; padding: 0; display: flex; gap: 0.25rem; }
   .fms__socials a { display: grid; place-items: center; width: 44px; height: 44px; border-radius: 10px; color: var(--c-text-2, #a3a3a3); transition: color 0.2s ease, background 0.2s ease; }
-  .fms__socials a:hover { color: var(--c-text-1, #fff); background: rgba(255, 255, 255, 0.06); }
-  @media (max-width: 860px) { .fms__top { grid-template-columns: 1fr; } }
-  @media (max-width: 560px) { .fms__bottom { flex-direction: column; align-items: flex-start; } }
+  .fms__socials a:hover { color: var(--c-text-1, #fff); background: rgb(var(--ink-rgb, 255 255 255) / 0.06); }
+  @container (max-width: 860px) { .fms__top { grid-template-columns: 1fr; } }
+  @container (max-width: 560px) { .fms__bottom { flex-direction: column; align-items: flex-start; } }
 </style>