astro-component-kit 0.3.1 → 0.4.1

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);

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

@@ -0,0 +1,121 @@
+---
+/**
+ * FaqTwoColumn — FAQ section with a sticky intro column (heading + support CTA)
+ * and native <details> accordions on the right. Works without JavaScript.
+ *
+ * @param {string} title - Section heading.
+ * @param {string} subtitle - Intro copy.
+ * @param {Array<{q: string, a: string}>} items - Questions and answers.
+ * @param {{label: string, href: string}} support - Support link.
+ * @param {boolean} exclusive - Only one item open at a time (uses the `name` attribute).
+ * @param {string} variant - Item style (bordered|cards|plain).
+ * @param {string} size - Vertical rhythm (sm|md|lg).
+ * @param {string} className - Extra CSS class.
+ */
+interface Props {
+  title?: string;
+  subtitle?: string;
+  items?: Array<{ q: string; a: string }>;
+  support?: { label: string; href: string };
+  exclusive?: boolean;
+  variant?: 'bordered' | 'cards' | 'plain';
+  size?: 'sm' | 'md' | 'lg';
+  className?: string;
+}
+
+const {
+  title = 'Frequently asked questions',
+  subtitle = 'Everything you need to know about the kit. Can’t find an answer? Our team replies within a day.',
+  items = [
+    { q: 'Do I need to install a package?', a: 'No. Every component is a standalone .astro file. Copy it into your project, or install the package if you prefer imports.' },
+    { q: 'Do the charts need a JavaScript library?', a: 'No. The SVG charts render at build time. A tiny shared script only powers hover tooltips, and every chart includes a data table fallback.' },
+    { q: 'Is it accessible?', a: 'Components target WCAG 2.2 AA: semantic HTML, visible focus states, keyboard support and contrast of at least 4.5:1 for text.' },
+    { q: 'Can I use it in commercial projects?', a: 'Yes. The kit is MIT licensed. Use it for client work, SaaS products and anything else.' },
+    { q: 'How do I change the colors?', a: 'Edit the CSS custom properties in global.css. Every component reads from the same tokens, so one change updates everything.' },
+  ],
+  support = { label: 'Contact support', href: '#' },
+  exclusive = true,
+  variant = 'bordered',
+  size = 'md',
+  className = '',
+} = Astro.props;
+
+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">
+      <h2 id={id} class="ftc__title">{title}</h2>
+      <p class="ftc__subtitle">{subtitle}</p>
+      {support && (
+        <a class="ftc__support" href={support.href}>
+          <svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M21 15a2 2 0 0 1-2 2H7l-4 4V5a2 2 0 0 1 2-2h14a2 2 0 0 1 2 2z" /></svg>
+          {support.label}
+        </a>
+      )}
+    </div>
+    <div class="ftc__list">
+      {items.map((it, i) => (
+        <details class="ftc__item" name={exclusive ? `faq-${uid}` : undefined} open={i === 0}>
+          <summary class="ftc__q">
+            <span>{it.q}</span>
+            <svg class="ftc__chev" width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" aria-hidden="true"><path d="M12 5v14M5 12h14" /></svg>
+          </summary>
+          <div class="ftc__a"><p>{it.a}</p></div>
+        </details>
+      ))}
+    </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);
+    background: var(--c-bg, #050505);
+  }
+  .ftc--sm { --ftc-py: 3.5rem; }
+  .ftc--lg { --ftc-py: 7.5rem; }
+  .ftc__inner { max-width: 1120px; margin: 0 auto; display: grid; grid-template-columns: 1fr 1.6fr; gap: clamp(2rem, 6vw, 5rem); align-items: start; }
+  .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 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 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;
+    align-items: center;
+    gap: 1rem;
+    min-height: 64px;
+    padding: 1rem 0;
+    cursor: pointer;
+    list-style: none;
+    font-size: 1.0625rem;
+    font-weight: 600;
+    color: var(--c-text-1, #fff);
+  }
+  .ftc__q::-webkit-details-marker { display: none; }
+  .ftc__q:focus-visible { outline: 2px solid var(--c-primary-light, #d4a017); outline-offset: 2px; border-radius: 6px; }
+  .ftc__chev { flex-shrink: 0; color: var(--c-text-2, #a3a3a3); transition: transform 0.25s ease; }
+  .ftc__item[open] .ftc__chev { transform: rotate(45deg); color: var(--c-primary-light, #d4a017); }
+  .ftc__a { padding: 0 2.5rem 1.25rem 0; }
+  .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); } }
+  @container (max-width: 820px) {
+    .ftc__inner { grid-template-columns: 1fr; }
+    .ftc__intro { position: static; }
+  }
+  @media (prefers-reduced-motion: reduce) { .ftc__chev { transition: none; } .ftc__item[open] .ftc__a { animation: none; } }
+</style>

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

@@ -0,0 +1,192 @@
+---
+/**
+ * FeatureAlternatingRows — Zig-zag feature section: text and a visual alternate
+ * sides on each row. Visuals are pure-CSS illustrations (no images to load).
+ *
+ * @param {string} title - Section heading (visually hidden if empty-styled).
+ * @param {Array<{eyebrow: string, title: string, text: string, bullets: string[], visual: 'chart'|'code'|'stack'}>} rows - Feature rows.
+ * @param {boolean} startReversed - Put the visual on the left in the first row.
+ * @param {string} variant - Visual frame (glass|outline|plain).
+ * @param {string} size - Vertical rhythm (sm|md|lg).
+ * @param {string} className - Extra CSS class.
+ */
+interface Row { eyebrow: string; title: string; text: string; bullets: string[]; visual: 'chart' | 'code' | 'stack' }
+interface Props {
+  title?: string;
+  rows?: Row[];
+  startReversed?: boolean;
+  variant?: 'glass' | 'outline' | 'plain';
+  size?: 'sm' | 'md' | 'lg';
+  className?: string;
+}
+
+const {
+  title = 'How the kit helps your team',
+  rows = [
+    {
+      eyebrow: 'Insights',
+      title: 'Dashboards your stakeholders actually read',
+      text: 'Drop-in SVG charts with tooltips, legends and table fallbacks. No chart library to configure.',
+      bullets: ['45 chart types', 'Colorblind-safe palette', 'Keyboard-accessible marks'],
+      visual: 'chart',
+    },
+    {
+      eyebrow: 'Developer experience',
+      title: 'Typed props, sensible defaults',
+      text: 'Every component ships a TypeScript Props interface and renders beautifully with zero configuration.',
+      bullets: ['Strict TypeScript', 'JSDoc on every prop', 'Copy-paste friendly'],
+      visual: 'code',
+    },
+    {
+      eyebrow: 'Design system',
+      title: 'One token file to re-theme everything',
+      text: 'Swap colors, radii and spacing in global.css and every section updates consistently.',
+      bullets: ['CSS custom properties', 'Dark-first', '8pt spacing grid'],
+      visual: 'stack',
+    },
+  ],
+  startReversed = false,
+  variant = 'glass',
+  size = 'md',
+  className = '',
+} = Astro.props;
+
+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">
+    {rows.map((r, i) => {
+      const reversed = startReversed ? i % 2 === 0 : i % 2 === 1;
+      return (
+        <article class={`far__row ${reversed ? 'far__row--rev' : ''}`}>
+          <div class="far__copy">
+            <p class="far__eyebrow">{r.eyebrow}</p>
+            <h3 class="far__title">{r.title}</h3>
+            <p class="far__text">{r.text}</p>
+            <ul class="far__bullets">
+              {r.bullets.map((b) => (
+                <li>
+                  <svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.4" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M20 6 9 17l-5-5" /></svg>
+                  {b}
+                </li>
+              ))}
+            </ul>
+          </div>
+          <div class="far__visual" aria-hidden="true">
+            {r.visual === 'chart' && (
+              <div class="far__chart">
+                {bars.map((h, bi) => <span style={`--h:${h}%; --d:${bi * 80}ms`}></span>)}
+              </div>
+            )}
+            {r.visual === 'code' && (
+              <pre class="far__code"><code><span class="k">interface</span> <span class="t">Props</span> {'{'}
+  title?: <span class="t">string</span>;
+  variant?: <span class="s">'glass'</span> | <span class="s">'solid'</span>;
+  size?: <span class="s">'sm'</span> | <span class="s">'md'</span> | <span class="s">'lg'</span>;
+{'}'}
+
+<span class="c">// Sensible defaults, zero config</span>
+&lt;<span class="t">LineChart</span> /&gt;</code></pre>
+            )}
+            {r.visual === 'stack' && (
+              <div class="far__stack">
+                <span style="--c:var(--chart-1, #3987e5)">--chart-1</span>
+                <span style="--c:var(--c-primary-light, #d4a017)">--c-primary</span>
+                <span style="--c:var(--chart-3, #199e70)">--chart-pos</span>
+                <span style="--c:var(--chart-7, #9085e9)">--r-lg: 20px</span>
+              </div>
+            )}
+          </div>
+        </article>
+      );
+    })}
+  </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);
+    background: var(--c-bg, #050505);
+  }
+  .far--sm { --far-py: 3.5rem; }
+  .far--lg { --far-py: 7.5rem; }
+  .far__sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
+  .far__inner { max-width: 1120px; margin: 0 auto; display: grid; gap: clamp(4rem, 8vw, 7rem); }
+  .far__row { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(2rem, 5vw, 5rem); align-items: center; }
+  .far__row--rev .far__copy { order: 2; }
+  .far__eyebrow { margin: 0 0 0.75rem; font-size: 0.8125rem; font-weight: 650; letter-spacing: 0.08em; text-transform: uppercase; color: var(--c-primary-light, #d4a017); }
+  .far__title { margin: 0 0 1rem; font-size: clamp(1.6rem, 3vw, 2.25rem); font-weight: 750; letter-spacing: -0.025em; line-height: 1.15; color: var(--c-text-1, #fff); }
+  .far__text { margin: 0 0 1.5rem; font-size: 1.0625rem; line-height: 1.65; color: var(--c-text-2, #a3a3a3); }
+  .far__bullets { list-style: none; margin: 0; padding: 0; display: grid; gap: 0.7rem; }
+  .far__bullets li { display: flex; align-items: center; gap: 0.6rem; color: var(--c-text-1, #fff); font-size: 0.9375rem; }
+  .far__bullets svg { color: var(--chart-pos, #34c38f); flex-shrink: 0; }
+
+  .far__visual {
+    aspect-ratio: 4 / 3;
+    border-radius: var(--r-xl, 24px);
+    display: grid;
+    place-items: center;
+    padding: 2rem;
+    overflow: hidden;
+  }
+  .far--glass .far__visual {
+    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 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;
+    height: var(--h);
+    border-radius: 6px 6px 0 0;
+    background: linear-gradient(to top, rgba(57, 135, 229, 0.35), var(--chart-1, #3987e5));
+    transform-origin: bottom;
+    animation: far-grow 0.8s cubic-bezier(0.4, 0, 0.2, 1) both;
+    animation-delay: var(--d);
+  }
+  @keyframes far-grow { from { transform: scaleY(0); } }
+  .far__code {
+    margin: 0;
+    width: 100%;
+    padding: 1.5rem;
+    border-radius: var(--r-md, 12px);
+    background: #0b0b0d;
+    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;
+    color: var(--c-text-2, #c4c4c4);
+    overflow-x: auto;
+  }
+  .far__code .k { color: #c792ea; }
+  .far__code .t { color: #82aaff; }
+  .far__code .s { color: #c3e88d; }
+  .far__code .c { color: #6b7280; }
+  .far__stack { display: grid; gap: 0.75rem; width: 100%; max-width: 320px; }
+  .far__stack span {
+    display: flex;
+    align-items: center;
+    gap: 0.75rem;
+    padding: 0.85rem 1rem;
+    border-radius: var(--r-md, 12px);
+    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);
+  }
+  .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; }
+  @container (max-width: 820px) {
+    .far__row { grid-template-columns: 1fr; }
+    .far__row--rev .far__copy { order: 0; }
+  }
+  @media (prefers-reduced-motion: reduce) { .far__chart span { animation: none; } }
+</style>

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%;