astro-component-kit 0.3.1 → 0.4.1

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

@@ -0,0 +1,141 @@
+---
+/**
+ * CareersOpenings — Job listings section grouped by department, with location,
+ * type and remote badges, plus perks strip and a general-application CTA.
+ *
+ * @param {string} title - Section heading.
+ * @param {string} subtitle - Section description.
+ * @param {Array<{title: string, department: string, location: string, type: string, remote?: boolean, href: string}>} jobs - Open roles.
+ * @param {string[]} perks - Short perk labels.
+ * @param {{label: string, href: string}} cta - General application link.
+ * @param {string} variant - Row style (list|cards|minimal).
+ * @param {string} size - Vertical rhythm (sm|md|lg).
+ * @param {string} className - Extra CSS class.
+ */
+interface Job { title: string; department: string; location: string; type: string; remote?: boolean; href: string }
+interface Props {
+  title?: string;
+  subtitle?: string;
+  jobs?: Job[];
+  perks?: string[];
+  cta?: { label: string; href: string };
+  variant?: 'list' | 'cards' | 'minimal';
+  size?: 'sm' | 'md' | 'lg';
+  className?: string;
+}
+
+const {
+  title = 'Join the team',
+  subtitle = 'We’re a small, remote-first crew building tools for the open web.',
+  jobs = [
+    { title: 'Senior Frontend Engineer', department: 'Engineering', location: 'Europe', type: 'Full-time', remote: true, href: '#' },
+    { title: 'Design Systems Engineer', department: 'Engineering', location: 'Americas', type: 'Full-time', remote: true, href: '#' },
+    { title: 'Product Designer', department: 'Design', location: 'Barcelona', type: 'Full-time', href: '#' },
+    { title: 'Developer Advocate', department: 'Marketing', location: 'Anywhere', type: 'Contract', remote: true, href: '#' },
+  ],
+  perks = ['Remote-first', '4-day work week', 'Learning budget', 'Equity for everyone'],
+  cta = { label: 'Send an open application', href: '#' },
+  variant = 'list',
+  size = 'md',
+  className = '',
+} = Astro.props;
+
+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">
+      <div>
+        <h2 id={id} class="co__title">{title}</h2>
+        <p class="co__subtitle">{subtitle}</p>
+      </div>
+      <span class="co__count">{jobs.length} open roles</span>
+    </header>
+
+    <ul class="co__perks" aria-label="Perks">
+      {perks.map((p) => <li>{p}</li>)}
+    </ul>
+
+    {departments.map((d) => (
+      <div class="co__dept">
+        <h3 class="co__dept-title">{d}</h3>
+        <ul class="co__jobs">
+          {jobs.filter((j) => j.department === d).map((j) => (
+            <li>
+              <a class="co__job" href={j.href}>
+                <span class="co__job-title">{j.title}</span>
+                <span class="co__meta">
+                  <span class="co__tag">
+                    <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" aria-hidden="true"><path d="M20 10c0 6-8 12-8 12s-8-6-8-12a8 8 0 0 1 16 0z" /><circle cx="12" cy="10" r="3" /></svg>
+                    {j.location}
+                  </span>
+                  <span class="co__tag">{j.type}</span>
+                  {j.remote && <span class="co__tag co__tag--remote">Remote</span>}
+                </span>
+                <svg class="co__arrow" width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" aria-hidden="true"><path d="M7 17 17 7M8 7h9v9" /></svg>
+              </a>
+            </li>
+          ))}
+        </ul>
+      </div>
+    ))}
+
+    {cta && (
+      <p class="co__cta">Don’t see your role? <a href={cta.href}>{cta.label}</a></p>
+    )}
+  </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);
+    background: var(--c-bg, #050505);
+  }
+  .co--sm { --co-py: 3.5rem; }
+  .co--lg { --co-py: 7.5rem; }
+  .co__inner { max-width: 960px; margin: 0 auto; }
+  .co__head { display: flex; justify-content: space-between; align-items: flex-end; gap: 1.5rem; flex-wrap: wrap; margin-bottom: 1.5rem; }
+  .co__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); }
+  .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 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 rgb(var(--ink-rgb, 255 255 255) / 0.07); }
+  .co__job {
+    display: grid;
+    grid-template-columns: 1fr auto 24px;
+    align-items: center;
+    gap: 1rem;
+    min-height: 64px;
+    padding: 0.85rem 1rem;
+    color: inherit;
+    text-decoration: none;
+    transition: background 0.2s ease, border-color 0.2s ease;
+  }
+  .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: 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: 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; }
+  @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; }
+  }
+</style>

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

@@ -0,0 +1,151 @@
+---
+/**
+ * ChangelogSection — Release notes timeline with version tags, dates and
+ * categorised entries (new / improved / fixed), each labelled with text + icon.
+ *
+ * @param {string} title - Section heading.
+ * @param {string} subtitle - Section description.
+ * @param {Array<{version: string, date: string, title: string, changes: Array<{type: 'new'|'improved'|'fixed', text: string}>}>} releases - Releases, newest first.
+ * @param {{label: string, href: string}} subscribe - Optional RSS/updates link.
+ * @param {string} variant - Layout (timeline|cards|compact).
+ * @param {string} size - Vertical rhythm (sm|md|lg).
+ * @param {string} className - Extra CSS class.
+ */
+interface Change { type: 'new' | 'improved' | 'fixed'; text: string }
+interface Release { version: string; date: string; title: string; changes: Change[] }
+interface Props {
+  title?: string;
+  subtitle?: string;
+  releases?: Release[];
+  subscribe?: { label: string; href: string };
+  variant?: 'timeline' | 'cards' | 'compact';
+  size?: 'sm' | 'md' | 'lg';
+  className?: string;
+}
+
+const {
+  title = 'Changelog',
+  subtitle = 'New components, improvements and fixes, shipped every week.',
+  releases = [
+    { 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.' },
+      { type: 'improved', text: 'Chart color tokens validated for color-vision deficiency.' },
+    ] },
+    { version: 'v0.3.1', date: '2026-10-27', title: 'Localized SEO', changes: [
+      { type: 'improved', text: 'Meta titles and descriptions in English, Spanish and Russian.' },
+      { type: 'fixed', text: 'Code blocks no longer appear in search snippets.' },
+    ] },
+    { version: 'v0.3.0', date: '2026-10-12', title: 'Notes & categories', changes: [
+      { type: 'new', text: 'Browse-by-category section on the home page.' },
+      { type: 'fixed', text: 'Category titles resolve correctly in every locale.' },
+    ] },
+  ],
+  subscribe = { label: 'Subscribe via RSS', href: '#' },
+  variant = 'timeline',
+  size = 'md',
+  className = '',
+} = Astro.props;
+
+const id = `cls-${Math.random().toString(36).slice(2, 8)}`;
+const typeLabel = { new: 'New', improved: 'Improved', fixed: 'Fixed' };
+const typeIcon = {
+  new: '<path d="M12 5v14M5 12h14"/>',
+  improved: '<path d="M12 19V5M5 12l7-7 7 7"/>',
+  fixed: '<path d="M20 6 9 17l-5-5"/>',
+};
+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">
+      <div>
+        <h2 id={id} class="cls__title">{title}</h2>
+        <p class="cls__subtitle">{subtitle}</p>
+      </div>
+      {subscribe && (
+        <a class="cls__subscribe" href={subscribe.href}>
+          <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" aria-hidden="true"><path d="M4 11a9 9 0 0 1 9 9M4 4a16 16 0 0 1 16 16" /><circle cx="5" cy="19" r="1" fill="currentColor" /></svg>
+          {subscribe.label}
+        </a>
+      )}
+    </header>
+    <ol class="cls__list">
+      {releases.map((r) => (
+        <li class="cls__release">
+          <div class="cls__when">
+            <span class="cls__version">{r.version}</span>
+            <time datetime={r.date}>{fmtDate(r.date)}</time>
+          </div>
+          <article class="cls__body">
+            <h3 class="cls__release-title">{r.title}</h3>
+            <ul class="cls__changes">
+              {r.changes.map((c) => (
+                <li>
+                  <span class={`cls__type cls__type--${c.type}`}>
+                    <svg width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="3" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true" set:html={typeIcon[c.type]}></svg>
+                    {typeLabel[c.type]}
+                  </span>
+                  <span>{c.text}</span>
+                </li>
+              ))}
+            </ul>
+          </article>
+        </li>
+      ))}
+    </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);
+    background: var(--c-bg, #050505);
+  }
+  .cls--sm { --cls-py: 3.5rem; }
+  .cls--lg { --cls-py: 7.5rem; }
+  .cls__inner { max-width: 920px; margin: 0 auto; }
+  .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 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: 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: 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: 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: 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; }
+  .cls__changes li { display: flex; align-items: flex-start; gap: 0.75rem; font-size: 0.9375rem; line-height: 1.55; color: var(--c-text-2, #c4c4c4); }
+  .cls__type { display: inline-flex; align-items: center; gap: 0.3rem; flex-shrink: 0; min-width: 5.5rem; padding: 0.15rem 0.5rem; border-radius: 999px; font-size: 0.75rem; font-weight: 650; }
+  .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; }
+  @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; }
+    .cls--timeline .cls__body::before { display: none; }
+    .cls__when { flex-direction: row; align-items: center; }
+  }
+</style>

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

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