astro-component-kit 0.4.0 → 0.5.0

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

@@ -0,0 +1,147 @@
+---
+/**
+ * AgencyWorkGrid — Case-study grid with category filter chips: large art tiles, client, title,
+ * services and a headline result, in an alternating big/small rhythm.
+ *
+ * @param {string} eyebrow - Small label. Default 'Selected work'.
+ * @param {string} title - Heading. Default 'Work we are proud of'.
+ * @param {Array<{slug: string, client: string, title: string, category: string, services?: string[], result?: string, year?: string, hue?: number, image?: string, href?: string}>} projects - Case studies.
+ * @param {boolean} filters - Show category chips. Default true.
+ * @param {{label: string, href: string}} link - "All work" link (optional).
+ * @param {string} variant - Layout (mosaic|grid). Default 'mosaic'.
+ * @param {string} className - Extra class.
+ *
+ * Accessibility: each card is one link with a heading; filter chips are toggle buttons and the
+ * number of visible projects is announced; art is decorative.
+ */
+interface Project { slug: string; client: string; title: string; category: string; services?: string[]; result?: string; year?: string; hue?: number; image?: string; href?: string }
+interface Props {
+  eyebrow?: string;
+  title?: string;
+  projects?: Project[];
+  filters?: boolean;
+  link?: { label: string; href: string };
+  variant?: 'mosaic' | 'grid';
+  className?: string;
+}
+
+const {
+  eyebrow = 'Selected work',
+  title = 'Work we are proud of',
+  projects = [
+    { slug: 'nordlys', client: 'Nordlys', title: 'A Nordic skincare brand that sold out its launch', category: 'Brand', services: ['Identity', 'Packaging'], result: '+212% preorders', year: '2026', hue: 190 },
+    { slug: 'pace', client: 'Pace', title: 'A running app redesign that doubled retention', category: 'Product', services: ['UX', 'UI'], result: '2× day-30 retention', year: '2025', hue: 80 },
+    { slug: 'casa-alba', client: 'Casa Alba', title: 'Direct bookings for a boutique hotel group', category: 'Web', services: ['Website', 'SEO'], result: '+64% direct revenue', year: '2025', hue: 25 },
+    { slug: 'fintrack', client: 'Fintrack', title: 'Paid social that halved the cost per signup', category: 'Growth', services: ['Paid social', 'CRO'], result: '−48% CPA', year: '2026', hue: 280 },
+  ],
+  filters = true,
+  link = { label: 'All case studies', href: '#' },
+  variant = 'mosaic',
+  className = '',
+} = Astro.props;
+
+const cats = Array.from(new Set(projects.map((p) => p.category)));
+---
+
+<div class="cq-agency-work">
+<section class:list={['awg', `awg--${variant}`, className]} aria-labelledby="awg-title" data-work>
+  <header class="awg__head">
+    <div>
+      <p class="awg__eyebrow">{eyebrow}</p>
+      <h2 class="awg__title" id="awg-title">{title}</h2>
+    </div>
+    {link && <a class="awg__all" href={link.href}>{link.label} <span aria-hidden="true">↗</span></a>}
+  </header>
+  {filters && cats.length > 1 && (
+    <div class="awg__chips" role="group" aria-label="Filter by discipline">
+      <button type="button" aria-pressed="true" data-cat="">All <sup>{projects.length}</sup></button>
+      {cats.map((c) => <button type="button" aria-pressed="false" data-cat={c}>{c} <sup>{projects.filter((p) => p.category === c).length}</sup></button>)}
+    </div>
+  )}
+  <p class="sr-only" aria-live="polite" data-announce></p>
+  <ul class="awg__grid">
+    {projects.map((p, i) => (
+      <li class:list={['awg__item', { 'awg__item--wide': variant === 'mosaic' && i % 3 === 0 }]} data-cat={p.category}>
+        <a class="awg__card" href={p.href ?? '#'}>
+          <span class="awg__art" style={`--h: ${p.hue ?? 80}`} aria-hidden="true">
+            {p.image ? <img src={p.image} alt="" loading="lazy" decoding="async" /> : <span class="awg__glyph">{p.client.slice(0, 1)}</span>}
+            {p.result && <span class="awg__result">{p.result}</span>}
+          </span>
+          <span class="awg__meta"><span>{p.client}</span>{p.year && <span>{p.year}</span>}</span>
+          <h3 class="awg__name">{p.title}</h3>
+          {p.services && <span class="awg__tags">{p.services.map((s) => <span>{s}</span>)}</span>}
+        </a>
+      </li>
+    ))}
+  </ul>
+</section>
+</div>
+
+<script>
+  document.querySelectorAll<HTMLElement>('[data-work]:not([data-bound])').forEach((root) => {
+    root.dataset.bound = '';
+    const chips = Array.from(root.querySelectorAll<HTMLButtonElement>('[data-cat]')).filter((b) => b.tagName === 'BUTTON');
+    const items = Array.from(root.querySelectorAll<HTMLElement>('li[data-cat]'));
+    const announce = root.querySelector<HTMLElement>('[data-announce]')!;
+    chips.forEach((c) => c.addEventListener('click', () => {
+      const cat = c.dataset.cat || '';
+      chips.forEach((x) => x.setAttribute('aria-pressed', String(x === c)));
+      let n = 0;
+      items.forEach((it) => { const show = !cat || it.dataset.cat === cat; it.hidden = !show; if (show) n++; });
+      announce.textContent = `${n} ${n === 1 ? 'project' : 'projects'} shown`;
+    }));
+  });
+</script>
+
+<style>
+  .cq-agency-work { container-type: inline-size; }
+  .awg { color: var(--c-text-1, #fff); }
+  .awg__head { display: flex; align-items: flex-end; justify-content: space-between; gap: var(--sp-4, 1rem); margin-bottom: var(--sp-5, 1.25rem); }
+  .awg__eyebrow { margin: 0 0 var(--sp-2, 0.5rem); font-size: 0.8rem; font-weight: 800; letter-spacing: 0.12em; text-transform: uppercase; color: var(--c-text-2, #a3a3a3); }
+  .awg__title { margin: 0; font-size: clamp(2.2rem, 6cqi, 4.2rem); font-weight: 900; letter-spacing: -0.05em; line-height: 0.95; }
+  .awg__all { display: inline-flex; align-items: center; gap: 6px; min-height: 48px; padding: 0 1.2rem; border-radius: 999px; border: 1.5px solid currentColor; color: inherit; font-weight: 800; text-decoration: none; white-space: nowrap; }
+  .awg__all:hover { background: var(--c-text-1, #fff); color: var(--c-bg, #050505); }
+  .awg__chips { display: flex; gap: 6px; margin-bottom: var(--sp-6, 1.5rem); overflow-x: auto; scrollbar-width: none; }
+  .awg__chips button { min-height: 42px; padding: 0 1rem; border-radius: 999px; border: 1.5px solid var(--c-border, rgba(255, 255, 255, 0.2)); background: transparent; color: var(--c-text-1, #fff); font: inherit; font-size: 0.9rem; font-weight: 700; white-space: nowrap; cursor: pointer; }
+  .awg__chips sup { font-size: 0.65rem; opacity: 0.7; }
+  .awg__chips [aria-pressed='true'] { background: var(--c-text-1, #fff); color: var(--c-bg, #050505); border-color: var(--c-text-1, #fff); }
+
+  .awg__grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: clamp(1rem, 3cqi, 2rem); margin: 0; padding: 0; list-style: none; }
+  .awg--grid .awg__grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
+  .awg__item[hidden] { display: none; }
+  .awg__item--wide { grid-column: 1 / -1; }
+  .awg__card { display: grid; gap: var(--sp-2, 0.5rem); color: inherit; text-decoration: none; }
+  .awg__art {
+    position: relative;
+    display: grid;
+    place-items: center;
+    aspect-ratio: 4 / 3;
+    border-radius: 24px;
+    overflow: hidden;
+    background:
+      radial-gradient(circle at 25% 25%, hsl(var(--h) 85% 65%), transparent 55%),
+      radial-gradient(circle at 80% 80%, hsl(calc(var(--h) + 50) 80% 55%), transparent 55%),
+      hsl(var(--h) 45% 18%);
+    transition: border-radius 0.4s ease;
+  }
+  .awg__item--wide .awg__art { aspect-ratio: 21 / 9; }
+  .awg__art img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
+  .awg__glyph { font-size: clamp(6rem, 22cqi, 16rem); font-weight: 900; letter-spacing: -0.08em; line-height: 1; color: rgba(255, 255, 255, 0.92); mix-blend-mode: overlay; transition: transform 0.6s cubic-bezier(0.16, 1, 0.3, 1); }
+  .awg__card:hover .awg__glyph { transform: scale(1.08) rotate(-4deg); }
+  .awg__card:hover .awg__art { border-radius: 48px; }
+  .awg__result { position: absolute; left: 16px; bottom: 16px; padding: 8px 14px; border-radius: 999px; background: var(--agency-accent, var(--c-primary-light, #d4a017)); color: var(--c-on-primary, #050505); font-size: 0.88rem; font-weight: 800; transform: rotate(-2deg); }
+  .awg__meta { display: flex; justify-content: space-between; margin-top: var(--sp-2, 0.5rem); font-size: 0.85rem; font-weight: 700; color: var(--c-text-2, #a3a3a3); }
+  .awg__name { margin: 0; font-size: clamp(1.25rem, 2.6cqi, 1.8rem); font-weight: 800; letter-spacing: -0.03em; line-height: 1.15; }
+  .awg__card:hover .awg__name { text-decoration: underline; text-decoration-thickness: 2px; text-underline-offset: 4px; }
+  .awg__tags { display: flex; flex-wrap: wrap; gap: 6px; }
+  .awg__tags span { padding: 4px 10px; border-radius: 999px; border: 1px solid var(--c-border, rgba(255, 255, 255, 0.18)); font-size: 0.78rem; color: var(--c-text-2, #a3a3a3); }
+  .awg :is(a, button):focus-visible { outline: 2px solid var(--agency-accent, var(--c-primary-light, #d4a017)); outline-offset: 4px; }
+  .sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
+
+  @container (max-width: 720px) {
+    .awg__grid, .awg--grid .awg__grid { grid-template-columns: 1fr; }
+    .awg__item--wide .awg__art { aspect-ratio: 4 / 3; }
+    .awg__head { flex-direction: column; align-items: flex-start; }
+  }
+  @media (prefers-reduced-motion: reduce) { .awg__glyph, .awg__art { transition: none; } }
+</style>

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

@@ -37,13 +37,14 @@ const {
 const id = `bgs-${Math.random().toString(36).slice(2, 8)}`;
 const gradients = [
   'radial-gradient(circle at 20% 20%, rgba(57,135,229,.65), transparent 55%), radial-gradient(circle at 80% 80%, rgba(144,133,233,.55), transparent 50%), #101018',
-  'radial-gradient(circle at 70% 30%, rgba(212,160,23,.6), transparent 50%), #15120a',
+  'radial-gradient(circle at 70% 30%, color-mix(in srgb, var(--c-primary-light, #d4a017) 60%, transparent), transparent 50%), #15120a',
   'radial-gradient(circle at 30% 70%, rgba(25,158,112,.6), transparent 55%), #0b1411',
   'radial-gradient(circle at 60% 40%, rgba(213,81,129,.55), transparent 55%), #150b10',
 ];
 const fmtDate = (d: string) => new Date(`${d}T00:00:00Z`).toLocaleDateString('en-US', { month: 'short', day: 'numeric', year: 'numeric', timeZone: 'UTC' });
 ---
 
+<div class="cq-blog-grid-section-cq">
 <section class={`bgs bgs--${variant} bgs--${size} ${className}`} aria-labelledby={id}>
   <div class="bgs__inner">
     <header class="bgs__head">
@@ -79,8 +80,9 @@ const fmtDate = (d: string) => new Date(`${d}T00:00:00Z`).toLocaleDateString('en
     </ul>
   </div>
 </section>
-
+</div>
 <style>
+  .cq-blog-grid-section-cq { container-type: inline-size; }
   .bgs {
     --bgs-py: 5.5rem;
     padding: var(--bgs-py) var(--sp-6, 1.5rem);
@@ -96,8 +98,8 @@ const fmtDate = (d: string) => new Date(`${d}T00:00:00Z`).toLocaleDateString('en
   .bgs__grid { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1.25rem; }
   .bgs__post--featured { grid-column: 1 / -1; }
   .bgs__card { position: relative; height: 100%; display: flex; flex-direction: column; border-radius: var(--r-lg, 20px); overflow: hidden; transition: transform 0.25s ease, border-color 0.25s ease; }
-  .bgs--cards .bgs__card { background: rgba(255, 255, 255, 0.025); border: 1px solid var(--c-border, rgba(255, 255, 255, 0.07)); }
-  .bgs__card:hover, .bgs__card:focus-within { transform: translateY(-3px); border-color: rgba(255, 255, 255, 0.18); }
+  .bgs--cards .bgs__card { 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)); }
+  .bgs__card:hover, .bgs__card:focus-within { transform: translateY(-3px); border-color: rgb(var(--ink-rgb, 255 255 255) / 0.18); }
   .bgs__post--featured .bgs__card { display: grid; grid-template-columns: 1.2fr 1fr; }
   .bgs__cover { aspect-ratio: 16 / 9; position: relative; }
   .bgs__post--featured .bgs__cover { aspect-ratio: auto; min-height: 280px; }
@@ -112,7 +114,7 @@ const fmtDate = (d: string) => new Date(`${d}T00:00:00Z`).toLocaleDateString('en
   .bgs--overlay .bgs__body { position: relative; margin-top: auto; }
   .bgs--overlay .bgs__post--featured .bgs__card { display: flex; }
   .bgs__meta { display: flex; flex-wrap: wrap; align-items: center; gap: 0.5rem; margin: 0; font-size: 0.8125rem; color: var(--c-text-2, #a3a3a3); }
-  .bgs__cat { padding: 0.15rem 0.55rem; border-radius: 999px; background: rgba(255, 255, 255, 0.07); color: var(--c-text-1, #fff); font-weight: 600; font-size: 0.75rem; }
+  .bgs__cat { padding: 0.15rem 0.55rem; border-radius: 999px; background: rgb(var(--ink-rgb, 255 255 255) / 0.07); color: var(--c-text-1, #fff); font-weight: 600; font-size: 0.75rem; }
   .bgs__post-title { margin: 0; font-size: 1.1875rem; font-weight: 700; line-height: 1.3; letter-spacing: -0.015em; }
   .bgs__post--featured .bgs__post-title { font-size: clamp(1.5rem, 3vw, 2rem); }
   .bgs__post-title a { color: var(--c-text-1, #fff); text-decoration: none; }
@@ -121,11 +123,11 @@ const fmtDate = (d: string) => new Date(`${d}T00:00:00Z`).toLocaleDateString('en
   .bgs__card:has(a:focus-visible) { outline: 2px solid var(--c-primary-light, #d4a017); outline-offset: 3px; }
   .bgs__excerpt { margin: 0; font-size: 0.9375rem; line-height: 1.6; color: var(--c-text-2, #a3a3a3); }
   .bgs__author { margin: auto 0 0; padding-top: 0.5rem; font-size: 0.8125rem; color: var(--c-text-3, #8a8a8a); }
-  @media (max-width: 900px) {
+  @container (max-width: 900px) {
     .bgs__grid { grid-template-columns: 1fr 1fr; }
     .bgs__post--featured .bgs__card { grid-template-columns: 1fr; }
     .bgs__post--featured .bgs__cover { min-height: 200px; }
   }
-  @media (max-width: 600px) { .bgs__grid { grid-template-columns: 1fr; } }
+  @container (max-width: 600px) { .bgs__grid { grid-template-columns: 1fr; } }
   @media (prefers-reduced-motion: reduce) { .bgs__card { transition: none; } }
 </style>

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

@@ -8,6 +8,7 @@ interface Props {
 const { title = "Buttons", subtitle = "Interactive button components with premium styles and animations." } = Astro.props;
 ---
 
+<div class="cq-buttons-showcase-cq">
 <section class="buttons-showcase">
   <div class="container">
     <div class="showcase-header">
@@ -34,8 +35,9 @@ const { title = "Buttons", subtitle = "Interactive button components with premiu
     </div>
   </div>
 </section>
-
+</div>
 <style>
+  .cq-buttons-showcase-cq { container-type: inline-size; }
   .buttons-showcase {
     padding: var(--sp-16) 0;
     position: relative;
@@ -52,8 +54,8 @@ const { title = "Buttons", subtitle = "Interactive button components with premiu
     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);
   }
@@ -75,7 +77,7 @@ const { title = "Buttons", subtitle = "Interactive button components with premiu
     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);
@@ -107,37 +109,37 @@ const { title = "Buttons", subtitle = "Interactive button components with premiu
   }
   .btn--primary {
     background: linear-gradient(135deg, var(--c-primary-light), var(--c-primary));
-    color: #0a0a0a;
-    box-shadow: 0 4px 20px rgba(184,134,11,0.3);
+    color: var(--c-on-primary, #0a0a0a);
+    box-shadow: 0 4px 20px color-mix(in srgb, var(--c-primary, #b8860b) 30%, transparent);
   }
   .btn--primary:hover {
     transform: translateY(-2px);
-    box-shadow: 0 8px 30px rgba(184,134,11,0.4);
+    box-shadow: 0 8px 30px color-mix(in srgb, var(--c-primary, #b8860b) 40%, transparent);
   }
   .btn--glass {
-    background: rgba(255,255,255,0.06);
+    background: rgb(var(--ink-rgb, 255 255 255) / 0.06);
     backdrop-filter: blur(12px);
     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);
   }
   .btn--glass:hover {
-    background: rgba(255,255,255,0.1);
-    border-color: rgba(184,134,11,0.3);
+    background: rgb(var(--ink-rgb, 255 255 255) / 0.1);
+    border-color: color-mix(in srgb, var(--c-primary, #b8860b) 30%, transparent);
   }
   .btn--glow {
     background: transparent;
     color: var(--c-primary-light);
     border: 1px solid var(--c-primary);
-    box-shadow: 0 0 12px rgba(184,134,11,0.2);
+    box-shadow: 0 0 12px color-mix(in srgb, var(--c-primary, #b8860b) 20%, transparent);
   }
   .btn--glow:hover {
-    box-shadow: 0 0 24px rgba(184,134,11,0.5);
+    box-shadow: 0 0 24px color-mix(in srgb, var(--c-primary, #b8860b) 50%, transparent);
     transform: translateY(-2px);
   }
   .btn--shimmer {
     background: linear-gradient(110deg, #b8860b 0%, #d4a017 40%, #fef3c7 50%, #d4a017 60%, #b8860b 100%);
     background-size: 200% 100%;
-    color: #0a0a0a;
+    color: var(--c-on-primary, #0a0a0a);
     animation: shimmer 3s linear infinite;
   }
   @keyframes shimmer {
@@ -147,10 +149,10 @@ const { title = "Buttons", subtitle = "Interactive button components with premiu
   .btn--neumorphic {
     background: #1a1a1a;
     color: var(--c-text-1);
-    box-shadow: 4px 4px 12px rgba(0,0,0,0.5), -4px -4px 12px rgba(255,255,255,0.05);
+    box-shadow: 4px 4px 12px rgba(0,0,0,0.5), -4px -4px 12px rgb(var(--ink-rgb, 255 255 255) / 0.05);
   }
   .btn--neumorphic:hover {
-    box-shadow: 2px 2px 8px rgba(0,0,0,0.4), -2px -2px 8px rgba(255,255,255,0.04);
+    box-shadow: 2px 2px 8px rgba(0,0,0,0.4), -2px -2px 8px rgb(var(--ink-rgb, 255 255 255) / 0.04);
   }
   .btn--ghost {
     background: transparent;
@@ -165,7 +167,7 @@ const { title = "Buttons", subtitle = "Interactive button components with premiu
   .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 {
@@ -174,7 +176,7 @@ const { title = "Buttons", subtitle = "Interactive button components with premiu
     color: var(--c-primary-light);
   }
 
-  @media (max-width: 640px) {
+  @container (max-width: 640px) {
     .button-grid { gap: var(--sp-3); }
     .btn { min-width: 100px; padding: 0.6rem 1.2rem; font-size: 0.85rem; }
     .preview-stage { padding: var(--sp-8) var(--sp-4); }

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

@@ -8,6 +8,7 @@ interface Props {
 const { title = "Cards", subtitle = "Versatile card containers for content display." } = Astro.props;
 ---
 
+<div class="cq-cards-showcase-cq">
 <section class="cards-showcase">
   <div class="container">
     <div class="showcase-header">
@@ -74,8 +75,9 @@ const { title = "Cards", subtitle = "Versatile card containers for content displ
     </div>
   </div>
 </section>
-
+</div>
 <style>
+  .cq-cards-showcase-cq { container-type: inline-size; }
   .cards-showcase {
     padding: var(--sp-16) 0;
     position: relative;
@@ -92,8 +94,8 @@ const { title = "Cards", subtitle = "Versatile card containers for content displ
     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);
   }
@@ -115,7 +117,7 @@ const { title = "Cards", subtitle = "Versatile card containers for content displ
     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);
@@ -144,16 +146,16 @@ const { title = "Cards", subtitle = "Versatile card containers for content displ
   .glass-card {
     width: 100%;
     padding: var(--sp-6);
-    background: rgba(255,255,255,0.05);
+    background: rgb(var(--ink-rgb, 255 255 255) / 0.05);
     backdrop-filter: blur(16px);
-    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);
     text-align: center;
     transition: all 0.3s ease;
   }
   .glass-card:hover {
-    background: rgba(255,255,255,0.08);
-    border-color: rgba(184,134,11,0.3);
+    background: rgb(var(--ink-rgb, 255 255 255) / 0.08);
+    border-color: color-mix(in srgb, var(--c-primary, #b8860b) 30%, transparent);
     transform: translateY(-4px);
     box-shadow: 0 12px 40px rgba(0,0,0,0.3);
   }
@@ -178,15 +180,15 @@ const { title = "Cards", subtitle = "Versatile card containers for content displ
   .profile-card {
     width: 100%;
     padding: var(--sp-6);
-    background: rgba(255,255,255,0.04);
-    border: 1px solid rgba(255,255,255,0.08);
+    background: rgb(var(--ink-rgb, 255 255 255) / 0.04);
+    border: 1px solid rgb(var(--ink-rgb, 255 255 255) / 0.08);
     border-radius: var(--r-lg);
     text-align: center;
     transition: all 0.3s ease;
   }
   .profile-card:hover {
-    background: rgba(255,255,255,0.06);
-    border-color: rgba(184,134,11,0.25);
+    background: rgb(var(--ink-rgb, 255 255 255) / 0.06);
+    border-color: color-mix(in srgb, var(--c-primary, #b8860b) 25%, transparent);
     transform: translateY(-4px);
     box-shadow: 0 12px 40px rgba(0,0,0,0.3);
   }
@@ -199,7 +201,7 @@ const { title = "Cards", subtitle = "Versatile card containers for content displ
     display: flex;
     align-items: center;
     justify-content: center;
-    color: #0a0a0a;
+    color: var(--c-on-primary, #0a0a0a);
   }
   .profile-card__avatar-icon {
     width: 32px;
@@ -227,7 +229,7 @@ const { title = "Cards", subtitle = "Versatile card containers for content displ
     display: flex;
     justify-content: center;
     gap: var(--sp-4);
-    border-top: 1px solid rgba(255,255,255,0.08);
+    border-top: 1px solid rgb(var(--ink-rgb, 255 255 255) / 0.08);
     padding-top: var(--sp-3);
   }
   .profile-card__stat {
@@ -243,16 +245,16 @@ const { title = "Cards", subtitle = "Versatile card containers for content displ
   .pricing-card {
     width: 100%;
     padding: var(--sp-6);
-    background: rgba(255,255,255,0.04);
-    border: 1px solid rgba(184,134,11,0.2);
+    background: rgb(var(--ink-rgb, 255 255 255) / 0.04);
+    border: 1px solid color-mix(in srgb, var(--c-primary, #b8860b) 20%, transparent);
     border-radius: var(--r-lg);
     text-align: center;
     position: relative;
     transition: all 0.3s ease;
   }
   .pricing-card:hover {
-    background: rgba(255,255,255,0.06);
-    border-color: rgba(184,134,11,0.4);
+    background: rgb(var(--ink-rgb, 255 255 255) / 0.06);
+    border-color: color-mix(in srgb, var(--c-primary, #b8860b) 40%, transparent);
     transform: translateY(-4px);
     box-shadow: 0 12px 40px rgba(0,0,0,0.3);
   }
@@ -263,7 +265,7 @@ const { title = "Cards", subtitle = "Versatile card containers for content displ
     font-weight: 700;
     text-transform: uppercase;
     letter-spacing: 0.05em;
-    color: #0a0a0a;
+    color: var(--c-on-primary, #0a0a0a);
     background: linear-gradient(135deg, var(--c-primary-light), var(--c-primary));
     border-radius: var(--r-full);
     margin-bottom: var(--sp-3);
@@ -309,7 +311,7 @@ const { title = "Cards", subtitle = "Versatile card containers for content displ
     font-size: 0.8rem;
     color: var(--c-text-2);
     padding: 0.4rem 0;
-    border-bottom: 1px solid rgba(255,255,255,0.04);
+    border-bottom: 1px solid rgb(var(--ink-rgb, 255 255 255) / 0.04);
     position: relative;
     padding-left: 1.2rem;
   }
@@ -329,16 +331,16 @@ const { title = "Cards", subtitle = "Versatile card containers for content displ
     font-size: 0.85rem;
     font-weight: 700;
     font-family: var(--font-sans);
-    color: #0a0a0a;
+    color: var(--c-on-primary, #0a0a0a);
     background: linear-gradient(135deg, var(--c-primary-light), var(--c-primary));
     border: none;
     border-radius: var(--r-md);
     cursor: pointer;
     transition: all 0.25s ease;
-    box-shadow: 0 4px 16px rgba(184,134,11,0.25);
+    box-shadow: 0 4px 16px color-mix(in srgb, var(--c-primary, #b8860b) 25%, transparent);
   }
   .pricing-card__cta:hover {
-    box-shadow: 0 6px 24px rgba(184,134,11,0.4);
+    box-shadow: 0 6px 24px color-mix(in srgb, var(--c-primary, #b8860b) 40%, transparent);
     transform: translateY(-1px);
   }
 
@@ -346,7 +348,7 @@ const { title = "Cards", subtitle = "Versatile card containers for content displ
   .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 {
@@ -355,7 +357,7 @@ const { title = "Cards", subtitle = "Versatile card containers for content displ
     color: var(--c-primary-light);
   }
 
-  @media (max-width: 900px) {
+  @container (max-width: 900px) {
     .card-grid {
       grid-template-columns: 1fr;
       max-width: 380px;
@@ -368,7 +370,7 @@ const { title = "Cards", subtitle = "Versatile card containers for content displ
       padding: var(--sp-8) var(--sp-4);
     }
   }
-  @media (max-width: 640px) {
+  @container (max-width: 640px) {
     .card-grid {
       max-width: 100%;
     }

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

@@ -44,6 +44,7 @@ const id = `co-${Math.random().toString(36).slice(2, 8)}`;
 const departments = [...new Set(jobs.map((j) => j.department))];
 ---
 
+<div class="cq-careers-openings-cq">
 <section class={`co co--${variant} co--${size} ${className}`} aria-labelledby={id}>
   <div class="co__inner">
     <header class="co__head">
@@ -87,8 +88,9 @@ const departments = [...new Set(jobs.map((j) => j.department))];
     )}
   </div>
 </section>
-
+</div>
 <style>
+  .cq-careers-openings-cq { container-type: inline-size; }
   .co {
     --co-py: 5.5rem;
     padding: var(--co-py) var(--sp-6, 1.5rem);
@@ -102,11 +104,11 @@ const departments = [...new Set(jobs.map((j) => j.department))];
   .co__subtitle { margin: 0; font-size: 1.0625rem; color: var(--c-text-2, #a3a3a3); }
   .co__count { padding: 0.35rem 0.85rem; border-radius: 999px; background: rgba(52, 195, 143, 0.12); color: #7ee2b8; font-size: 0.8125rem; font-weight: 650; }
   .co__perks { list-style: none; margin: 0 0 2.5rem; padding: 0; display: flex; flex-wrap: wrap; gap: 0.5rem; }
-  .co__perks li { padding: 0.4rem 0.85rem; border-radius: 999px; border: 1px solid rgba(255, 255, 255, 0.1); font-size: 0.8125rem; color: var(--c-text-2, #a3a3a3); }
+  .co__perks li { padding: 0.4rem 0.85rem; border-radius: 999px; border: 1px solid rgb(var(--ink-rgb, 255 255 255) / 0.1); font-size: 0.8125rem; color: var(--c-text-2, #a3a3a3); }
   .co__dept + .co__dept { margin-top: 2rem; }
   .co__dept-title { 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); }
   .co__jobs { list-style: none; margin: 0; padding: 0; display: grid; gap: 0.5rem; }
-  .co--list .co__jobs { gap: 0; border-top: 1px solid rgba(255, 255, 255, 0.07); }
+  .co--list .co__jobs { gap: 0; border-top: 1px solid rgb(var(--ink-rgb, 255 255 255) / 0.07); }
   .co__job {
     display: grid;
     grid-template-columns: 1fr auto 24px;
@@ -118,20 +120,20 @@ const departments = [...new Set(jobs.map((j) => j.department))];
     text-decoration: none;
     transition: background 0.2s ease, border-color 0.2s ease;
   }
-  .co--list .co__job { border-bottom: 1px solid rgba(255, 255, 255, 0.07); }
-  .co--cards .co__job { 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)); }
+  .co--list .co__job { border-bottom: 1px solid rgb(var(--ink-rgb, 255 255 255) / 0.07); }
+  .co--cards .co__job { 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)); }
   .co--minimal .co__job { padding-inline: 0; }
-  .co__job:hover { background: rgba(255, 255, 255, 0.035); }
+  .co__job:hover { background: rgb(var(--ink-rgb, 255 255 255) / 0.035); }
   .co__job:focus-visible { outline: 2px solid var(--c-primary-light, #d4a017); outline-offset: 2px; border-radius: 10px; }
   .co__job-title { font-size: 1.0625rem; font-weight: 600; color: var(--c-text-1, #fff); }
   .co__meta { display: flex; flex-wrap: wrap; gap: 0.4rem; justify-content: flex-end; }
-  .co__tag { display: inline-flex; align-items: center; gap: 0.3rem; padding: 0.2rem 0.6rem; border-radius: 999px; background: rgba(255, 255, 255, 0.05); font-size: 0.75rem; color: var(--c-text-2, #a3a3a3); }
+  .co__tag { display: inline-flex; align-items: center; gap: 0.3rem; padding: 0.2rem 0.6rem; border-radius: 999px; background: rgb(var(--ink-rgb, 255 255 255) / 0.05); font-size: 0.75rem; color: var(--c-text-2, #a3a3a3); }
   .co__tag--remote { background: rgba(57, 135, 229, 0.14); color: #a9cdf7; }
   .co__arrow { color: var(--c-text-3, #8a8a8a); transition: transform 0.2s ease, color 0.2s ease; }
   .co__job:hover .co__arrow { transform: translate(2px, -2px); color: var(--c-text-1, #fff); }
   .co__cta { margin: 2.5rem 0 0; text-align: center; color: var(--c-text-2, #a3a3a3); }
   .co__cta a { color: var(--c-primary-light, #d4a017); font-weight: 600; text-decoration: underline; text-underline-offset: 3px; }
-  @media (max-width: 640px) {
+  @container (max-width: 640px) {
     .co__job { grid-template-columns: 1fr 24px; }
     .co__meta { grid-column: 1; grid-row: 2; justify-content: flex-start; }
     .co__arrow { grid-row: 1 / span 2; grid-column: 2; }

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

@@ -27,6 +27,17 @@ const {
   title = 'Changelog',
   subtitle = 'New components, improvements and fixes, shipped every week.',
   releases = [
+    { version: 'v0.5.0', date: '2026-11-04', title: 'Official MCP Server & 1-Click AI Integrations', changes: [
+      { type: 'new', text: 'Official remote SSE MCP server (mcp.astrocomponents.dev) and local stdio mode.' },
+      { type: 'new', text: '1-click CLI installer (`npx astro-component-kit mcp install <client>`) for Cursor, Claude, Codex, Lovable and universal MCP.' },
+      { type: 'new', text: 'Dedicated 21st.dev-style /mcp interactive landing page with client tabs and tools catalog.' },
+      { type: 'new', text: '8 built-in AI tools with real-time discovery of 340+ components, templates, and design tokens.' },
+    ] },
+    { version: 'v0.4.1', date: '2026-11-04', title: 'Multi-page templates & e-commerce suite', changes: [
+      { type: 'new', text: 'Three complete production templates: Nova Store, Forma Studio & The Lobby.' },
+      { type: 'new', text: '17 e-commerce components with persistent cart, filters and checkout.' },
+      { type: 'new', text: 'Light theme tokens with adaptive ink-rgb contrast and theme toggle.' },
+    ] },
     { version: 'v0.4.0', date: '2026-11-03', title: 'SVG charts & 24 new sections', changes: [
       { type: 'new', text: '40 zero-dependency SVG charts with tooltips and table fallbacks.' },
       { type: 'new', text: 'Waitlist, terminal and dashboard hero sections.' },
@@ -57,6 +68,7 @@ const typeIcon = {
 const fmtDate = (d: string) => new Date(`${d}T00:00:00Z`).toLocaleDateString('en-US', { month: 'long', day: 'numeric', year: 'numeric', timeZone: 'UTC' });
 ---
 
+<div class="cq-changelog-section-cq">
 <section class={`cls cls--${variant} cls--${size} ${className}`} aria-labelledby={id}>
   <div class="cls__inner">
     <header class="cls__head">
@@ -97,8 +109,9 @@ const fmtDate = (d: string) => new Date(`${d}T00:00:00Z`).toLocaleDateString('en
     </ol>
   </div>
 </section>
-
+</div>
 <style>
+  .cq-changelog-section-cq { container-type: inline-size; }
   .cls {
     --cls-py: 5.5rem;
     padding: var(--cls-py) var(--sp-6, 1.5rem);
@@ -110,22 +123,22 @@ const fmtDate = (d: string) => new Date(`${d}T00:00:00Z`).toLocaleDateString('en
   .cls__head { display: flex; justify-content: space-between; align-items: flex-end; gap: 1rem; flex-wrap: wrap; margin-bottom: 3rem; }
   .cls__title { margin: 0 0 0.5rem; font-size: clamp(1.9rem, 4vw, 2.75rem); font-weight: 800; letter-spacing: -0.03em; color: var(--c-text-1, #fff); }
   .cls__subtitle { margin: 0; font-size: 1.0625rem; color: var(--c-text-2, #a3a3a3); }
-  .cls__subscribe { display: inline-flex; align-items: center; gap: 0.45rem; min-height: 44px; padding: 0 1rem; border-radius: var(--r-md, 12px); border: 1px solid rgba(255, 255, 255, 0.14); color: var(--c-text-1, #fff); font-size: 0.875rem; font-weight: 600; text-decoration: none; }
+  .cls__subscribe { display: inline-flex; align-items: center; gap: 0.45rem; min-height: 44px; padding: 0 1rem; 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-size: 0.875rem; font-weight: 600; text-decoration: none; }
   .cls__subscribe svg { color: #f59e0b; }
-  .cls__subscribe:hover { border-color: rgba(255, 255, 255, 0.3); color: var(--c-text-1, #fff); }
+  .cls__subscribe:hover { border-color: rgb(var(--ink-rgb, 255 255 255) / 0.3); color: var(--c-text-1, #fff); }
   .cls__subscribe:focus-visible { outline: 2px solid var(--c-primary-light, #d4a017); outline-offset: 2px; }
   .cls__list { list-style: none; margin: 0; padding: 0; display: grid; gap: 2.5rem; }
   .cls__release { display: grid; grid-template-columns: 180px 1fr; gap: 2rem; position: relative; }
-  .cls--timeline .cls__release::before { content: ''; position: absolute; left: 196px; top: 10px; bottom: -2.5rem; width: 1px; background: rgba(255, 255, 255, 0.08); }
+  .cls--timeline .cls__release::before { content: ''; position: absolute; left: 196px; top: 10px; bottom: -2.5rem; width: 1px; background: rgb(var(--ink-rgb, 255 255 255) / 0.08); }
   .cls--timeline .cls__release:last-child::before { bottom: 0; }
   .cls--timeline .cls__body { position: relative; padding-left: 2rem; }
   .cls--timeline .cls__body::before { content: ''; position: absolute; left: -21px; top: 7px; width: 9px; height: 9px; border-radius: 50%; background: var(--c-primary-light, #d4a017); box-shadow: 0 0 0 4px var(--c-bg, #050505); }
-  .cls--cards .cls__body { padding: 1.5rem; border-radius: var(--r-lg, 18px); background: rgba(255, 255, 255, 0.025); border: 1px solid var(--c-border, rgba(255, 255, 255, 0.07)); }
+  .cls--cards .cls__body { padding: 1.5rem; border-radius: var(--r-lg, 18px); 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)); }
   .cls--compact .cls__list { gap: 1.5rem; }
   .cls--compact .cls__release { grid-template-columns: 1fr; gap: 0.5rem; }
   .cls--compact .cls__when { flex-direction: row; align-items: center; }
   .cls__when { display: flex; flex-direction: column; gap: 0.4rem; align-items: flex-start; }
-  .cls__version { padding: 0.2rem 0.6rem; border-radius: 6px; background: rgba(255, 255, 255, 0.06); border: 1px solid rgba(255, 255, 255, 0.1); font-family: var(--font-mono, monospace); font-size: 0.8125rem; color: var(--c-text-1, #fff); }
+  .cls__version { padding: 0.2rem 0.6rem; border-radius: 6px; background: rgb(var(--ink-rgb, 255 255 255) / 0.06); border: 1px solid rgb(var(--ink-rgb, 255 255 255) / 0.1); font-family: var(--font-mono, monospace); font-size: 0.8125rem; color: var(--c-text-1, #fff); }
   .cls__when time { font-size: 0.8125rem; color: var(--c-text-2, #a3a3a3); }
   .cls__release-title { margin: 0 0 1rem; font-size: 1.25rem; font-weight: 700; color: var(--c-text-1, #fff); letter-spacing: -0.015em; }
   .cls__changes { list-style: none; margin: 0; padding: 0; display: grid; gap: 0.75rem; }
@@ -134,7 +147,7 @@ const fmtDate = (d: string) => new Date(`${d}T00:00:00Z`).toLocaleDateString('en
   .cls__type--new { background: rgba(57, 135, 229, 0.14); color: #a9cdf7; }
   .cls__type--improved { background: rgba(144, 133, 233, 0.16); color: #c9c3f5; }
   .cls__type--fixed { background: rgba(52, 195, 143, 0.14); color: #7ee2b8; }
-  @media (max-width: 680px) {
+  @container (max-width: 680px) {
     .cls__release { grid-template-columns: 1fr; gap: 0.75rem; }
     .cls--timeline .cls__release::before { display: none; }
     .cls--timeline .cls__body { padding-left: 0; }