@birdycom/omniaui-blocks 0.0.0-stage → 0.11.0

package/dist/blocks.css

@@ -0,0 +1,1431 @@
+/* File: public/css/oc-blocks.css */
+
+/* Map: block tokens -> hero blocks -> auth blocks -> pricing blocks -> feature blocks -> footer blocks */
+
+/* Description: Pre-composed page blocks built from OmniaCSS utilities and components. Copy-paste ready. */
+
+/* Version: 0.1.6 */
+
+/* Depends on: oc-components.css (for primitives like oc-btn, oc-input) */
+
+/* ===================================================================
+   BLOCK TOKENS (shared variables for blocks)
+   =================================================================== */
+
+:root {
+  --oc-block-max-width: 1200px;
+  --oc-block-gap: 24px;
+  --oc-block-radius: 16px;
+  --oc-block-surface: var(--oc-card);
+  --oc-block-surface-soft: var(--oc-muted);
+  --oc-block-border: var(--oc-border);
+  --oc-block-text: var(--oc-foreground);
+  --oc-block-text-soft: var(--oc-muted-foreground);
+  --oc-block-accent: var(--oc-primary);
+}
+
+/* ===================================================================
+   HERO BLOCKS
+   Full-width hero sections for landing pages
+   =================================================================== */
+
+/* Hero — centered with CTA */
+
+.oc-block-hero {
+  text-align: center;
+  padding: 64px var(--oc-block-gap) 48px;
+  max-width: var(--oc-block-max-width);
+  margin: 0 auto;
+}
+
+.oc-block-hero-badge {
+  display: inline-block;
+  font-size: 0.78rem;
+  padding: 4px 12px;
+  border-radius: 999px;
+  border: 1px solid var(--oc-block-border);
+  color: var(--oc-block-accent);
+  background: oklch(from var(--color-vividblue-50) l c h / 0.08);
+  margin-bottom: 16px;
+}
+
+.oc-block-hero h1 {
+  font-size: clamp(2rem, 5vw, 3.5rem);
+  line-height: 1.15;
+  margin: 0 0 16px;
+  color: var(--oc-block-text);
+  font-weight: 700;
+  letter-spacing: -0.02em;
+}
+
+.oc-block-hero p {
+  font-size: 1.1rem;
+  line-height: 1.6;
+  color: var(--oc-block-text-soft);
+  max-width: 640px;
+  margin: 0 auto 28px;
+}
+
+.oc-block-hero-actions {
+  display: flex;
+  justify-content: center;
+  gap: 12px;
+  flex-wrap: wrap;
+}
+
+/* Hero — split (text left, image/visual right) */
+
+.oc-block-hero-split {
+  display: grid;
+  grid-template-columns: 1fr 1fr;
+  gap: 40px;
+  align-items: center;
+  padding: 48px var(--oc-block-gap);
+  max-width: var(--oc-block-max-width);
+  margin: 0 auto;
+}
+
+.oc-block-hero-split h1 {
+  font-size: clamp(1.8rem, 4vw, 2.8rem);
+  line-height: 1.15;
+  margin: 0 0 14px;
+  color: var(--oc-block-text);
+  font-weight: 700;
+}
+
+.oc-block-hero-split p {
+  font-size: 1rem;
+  line-height: 1.6;
+  color: var(--oc-block-text-soft);
+  margin: 0 0 24px;
+}
+
+.oc-block-hero-visual {
+  background: var(--oc-block-surface);
+  border: 1px solid var(--oc-block-border);
+  border-radius: var(--oc-block-radius);
+  min-height: 280px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  color: var(--oc-block-text-soft);
+  font-size: 0.9rem;
+}
+
+@media (max-width: 50rem) {
+  .oc-block-hero-split {
+    grid-template-columns: 1fr;
+    text-align: center;
+  }
+}
+
+/* ===================================================================
+   AUTH BLOCKS
+   Login / Register forms
+   =================================================================== */
+
+.oc-block-auth {
+  max-width: 400px;
+  margin: 48px auto;
+  padding: 0 var(--oc-block-gap);
+}
+
+.oc-block-auth-card {
+  background: var(--oc-block-surface);
+  border: 1px solid var(--oc-block-border);
+  border-radius: var(--oc-block-radius);
+  padding: 32px 28px;
+}
+
+.oc-block-auth-card h2 {
+  margin: 0 0 6px;
+  font-size: 1.3rem;
+  color: var(--oc-block-text);
+}
+
+.oc-block-auth-card .oc-block-subtitle {
+  margin: 0 0 24px;
+  font-size: 0.88rem;
+  color: var(--oc-block-text-soft);
+}
+
+.oc-block-auth-footer {
+  text-align: center;
+  margin-top: 16px;
+  font-size: 0.85rem;
+  color: var(--oc-block-text-soft);
+}
+
+.oc-block-auth-footer a {
+  color: var(--oc-block-accent);
+  text-decoration: none;
+}
+
+.oc-block-auth-footer a:hover {
+  text-decoration: underline;
+}
+
+.oc-block-auth-divider {
+  display: flex;
+  align-items: center;
+  gap: 12px;
+  margin: 20px 0;
+  color: var(--oc-block-text-soft);
+  font-size: 0.82rem;
+}
+
+.oc-block-auth-divider::before,
+.oc-block-auth-divider::after {
+  content: "";
+  flex: 1;
+  height: 1px;
+  background: var(--oc-block-border);
+}
+
+/* ===================================================================
+   PRICING BLOCKS
+   Pricing cards in a grid
+   =================================================================== */
+
+.oc-block-pricing {
+  max-width: var(--oc-block-max-width);
+  margin: 48px auto;
+  padding: 0 var(--oc-block-gap);
+  text-align: center;
+}
+
+.oc-block-pricing h2 {
+  font-size: 1.8rem;
+  margin: 0 0 8px;
+  color: var(--oc-block-text);
+}
+
+.oc-block-pricing > p {
+  color: var(--oc-block-text-soft);
+  margin: 0 0 32px;
+  font-size: 1rem;
+}
+
+.oc-block-pricing-grid {
+  display: grid;
+  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
+  gap: 20px;
+}
+
+.oc-block-pricing-card {
+  background: var(--oc-block-surface);
+  border: 1px solid var(--oc-block-border);
+  border-radius: var(--oc-block-radius);
+  padding: 28px 24px;
+  text-align: left;
+  display: flex;
+  flex-direction: column;
+}
+
+.oc-block-pricing-card--featured {
+  border-color: var(--oc-block-accent);
+  box-shadow: 0 0 0 1px var(--oc-block-accent);
+}
+
+.oc-block-pricing-name {
+  font-size: 1rem;
+  font-weight: 600;
+  color: var(--oc-block-text);
+  margin: 0 0 4px;
+}
+
+.oc-block-pricing-desc {
+  font-size: 0.85rem;
+  color: var(--oc-block-text-soft);
+  margin: 0 0 16px;
+}
+
+.oc-block-pricing-price {
+  font-size: 2.2rem;
+  font-weight: 700;
+  color: var(--oc-block-text);
+  margin: 0 0 4px;
+}
+
+.oc-block-pricing-price span {
+  font-size: 0.9rem;
+  font-weight: 400;
+  color: var(--oc-block-text-soft);
+}
+
+.oc-block-pricing-features {
+  list-style: none;
+  margin: 16px 0 24px;
+  padding: 0;
+  flex: 1;
+}
+
+.oc-block-pricing-features li {
+  padding: 6px 0;
+  font-size: 0.88rem;
+  color: var(--oc-block-text-soft);
+  border-bottom: 1px solid var(--oc-border);
+}
+
+.oc-block-pricing-features li::before {
+  content: "✓ ";
+  color: var(--oc-block-accent);
+  font-weight: 600;
+}
+
+/* ===================================================================
+   FEATURE BLOCKS
+   Feature grid with icon + title + text
+   =================================================================== */
+
+.oc-block-features {
+  max-width: var(--oc-block-max-width);
+  margin: 48px auto;
+  padding: 0 var(--oc-block-gap);
+  text-align: center;
+}
+
+.oc-block-features h2 {
+  font-size: 1.6rem;
+  margin: 0 0 8px;
+  color: var(--oc-block-text);
+}
+
+.oc-block-features > p {
+  color: var(--oc-block-text-soft);
+  margin: 0 0 32px;
+}
+
+.oc-block-features-grid {
+  display: grid;
+  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
+  gap: 20px;
+  text-align: left;
+}
+
+.oc-block-feature-card {
+  background: var(--oc-block-surface);
+  border: 1px solid var(--oc-block-border);
+  border-radius: var(--oc-block-radius);
+  padding: 24px;
+}
+
+.oc-block-feature-icon {
+  width: 40px;
+  height: 40px;
+  border-radius: 10px;
+  background: oklch(from var(--color-vividblue-50) l c h / 0.12);
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  margin-bottom: 14px;
+  font-size: 1.2rem;
+  color: var(--oc-block-accent);
+}
+
+.oc-block-feature-card h3 {
+  margin: 0 0 8px;
+  font-size: 1rem;
+  color: var(--oc-block-text);
+}
+
+.oc-block-feature-card p {
+  margin: 0;
+  font-size: 0.88rem;
+  color: var(--oc-block-text-soft);
+  line-height: 1.55;
+}
+
+/* ===================================================================
+   TESTIMONIAL BLOCK
+   Quote cards in a grid
+   =================================================================== */
+
+.oc-block-testimonials {
+  max-width: var(--oc-block-max-width);
+  margin: 48px auto;
+  padding: 0 var(--oc-block-gap);
+}
+
+.oc-block-testimonial-grid {
+  display: grid;
+  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
+  gap: 20px;
+}
+
+.oc-block-testimonial-card {
+  background: var(--oc-block-surface);
+  border: 1px solid var(--oc-block-border);
+  border-radius: var(--oc-block-radius);
+  padding: 24px;
+}
+
+.oc-block-testimonial-card blockquote {
+  margin: 0 0 16px;
+  font-size: 0.92rem;
+  color: var(--oc-block-text-soft);
+  line-height: 1.6;
+  font-style: italic;
+}
+
+.oc-block-testimonial-author {
+  display: flex;
+  align-items: center;
+  gap: 10px;
+}
+
+.oc-block-testimonial-author strong {
+  display: block;
+  font-size: 0.88rem;
+  color: var(--oc-block-text);
+}
+
+.oc-block-testimonial-author span {
+  font-size: 0.78rem;
+  color: var(--oc-block-text-soft);
+}
+
+/* ===================================================================
+   FOOTER BLOCK
+   Multi-column footer with links
+   =================================================================== */
+
+.oc-block-footer {
+  inline-size: 100%;
+  border-top: 1px solid var(--oc-block-border);
+  padding: 40px var(--oc-block-gap) 24px;
+  max-width: var(--oc-block-max-width);
+  margin: 48px auto 0;
+}
+
+.oc-block-footer-grid {
+  display: grid;
+  grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
+  gap: 32px;
+  margin-bottom: 32px;
+}
+
+.oc-block-footer-col h4 {
+  margin: 0 0 12px;
+  font-size: 0.85rem;
+  text-transform: uppercase;
+  letter-spacing: 0.06em;
+  color: var(--oc-block-text-soft);
+}
+
+.oc-block-footer-col ul {
+  list-style: none;
+  margin: 0;
+  padding: 0;
+}
+
+.oc-block-footer-col li {
+  margin-bottom: 8px;
+}
+
+.oc-block-footer-col a {
+  color: var(--oc-block-text-soft);
+  text-decoration: none;
+  font-size: 0.88rem;
+}
+
+.oc-block-footer-col a:hover {
+  color: var(--oc-block-text);
+}
+
+.oc-block-footer-bottom {
+  border-top: 1px solid var(--oc-block-border);
+  padding-top: 16px;
+  font-size: 0.82rem;
+  color: var(--oc-block-text-soft);
+  display: flex;
+  justify-content: space-between;
+  flex-wrap: wrap;
+  gap: 8px;
+}
+
+/* ===================================================================
+   CTA BLOCK
+   Call-to-action banner
+   =================================================================== */
+
+.oc-block-cta {
+  background: linear-gradient(135deg, oklch(from var(--color-vividblue-50) l c h / 0.12), oklch(from var(--color-indigo-10) l c h / 0.08));
+  border: 1px solid var(--oc-block-border);
+  border-radius: var(--oc-block-radius);
+  padding: 40px;
+  text-align: center;
+  max-width: var(--oc-block-max-width);
+  margin: 48px auto;
+}
+
+.oc-block-cta h2 {
+  margin: 0 0 10px;
+  font-size: 1.5rem;
+  color: var(--oc-block-text);
+}
+
+.oc-block-cta p {
+  margin: 0 0 24px;
+  color: var(--oc-block-text-soft);
+  max-width: 520px;
+  margin-left: auto;
+  margin-right: auto;
+}
+
+/* ===================================================================
+   STATS BLOCK
+   Key metrics in a row
+   =================================================================== */
+
+.oc-block-stats {
+  display: grid;
+  grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
+  gap: 20px;
+  max-width: var(--oc-block-max-width);
+  margin: 48px auto;
+  padding: 0 var(--oc-block-gap);
+  text-align: center;
+}
+
+.oc-block-stat {
+  padding: 20px;
+}
+
+.oc-block-stat-value {
+  font-size: 2rem;
+  font-weight: 700;
+  color: var(--oc-block-accent);
+  margin-bottom: 4px;
+}
+
+.oc-block-stat-label {
+  font-size: 0.85rem;
+  color: var(--oc-block-text-soft);
+}
+
+/* ===================================================================
+   Swatch Grid Block — auto-fit grid for color swatch cards
+   =================================================================== */
+
+.oc-block-swatch-grid {
+  display: grid;
+  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
+  gap: 10px;
+  margin-top: 10px;
+}
+
+/* RAL group card — accent highlight for color group headers */
+
+.oc-block-swatch-grid .oc-swatch--ral-group {
+  border-color: var(--color-vividblue-70);
+  background: oklch(from var(--color-vividblue-70) l c h / 0.12);
+  min-height: 88px;
+}
+
+/* ===================================================================
+   APPLICATION BLOCKS (v0.2.0) — composed sections for app UIs
+   Built from @birdycom/omniaui (sidebar, sheet, table, stepper, …). Colors: --oc-* theme tokens only.
+   Index: shell · appbar · modulehead · kpis · datatable · authsplit · twofactor · settings · hub · onboarding · wizard · team · formpage
+   =================================================================== */
+
+/* ---- App shell: sidebar + main column (appbar, breadcrumb strip, scrolling content) ---- */
+
+.oc-block-shell {
+  --oc-block-shell-height: 100dvh;
+  display: grid;
+  grid-template-columns: auto minmax(0, 1fr);
+  block-size: var(--oc-block-shell-height);
+  background: var(--oc-background);
+  color: var(--oc-foreground);
+  overflow: hidden;
+}
+
+.oc-block-shell-toggle {
+  position: absolute;
+  opacity: 0;
+  pointer-events: none;
+}
+
+/* CSS-only collapse: <label for="toggle"> flips the checkbox, :has() collapses the sidebar */
+
+.oc-block-shell:has(.oc-block-shell-toggle:checked) .oc-sidebar {
+  inline-size: var(--oc-sidebar-width-icon);
+}
+
+.oc-block-shell:has(.oc-block-shell-toggle:checked) .oc-sidebar-menu-label,
+.oc-block-shell:has(.oc-block-shell-toggle:checked) .oc-sidebar-menu-badge,
+.oc-block-shell:has(.oc-block-shell-toggle:checked) .oc-sidebar-menu-sub,
+.oc-block-shell:has(.oc-block-shell-toggle:checked) .oc-sidebar-group-label,
+.oc-block-shell:has(.oc-block-shell-toggle:checked) .oc-sidebar .oc-user-text,
+.oc-block-shell:has(.oc-block-shell-toggle:checked) details.oc-sidebar-collapsible > summary::after { display: none; }
+
+.oc-block-shell:has(.oc-block-shell-toggle:checked) .oc-sidebar-menu-button { justify-content: center; padding-inline: 0; }
+
+.oc-block-shell-main { display: flex; flex-direction: column; min-inline-size: 0; min-block-size: 0; }
+
+.oc-block-shell-breadcrumbs {
+  flex-shrink: 0;
+  padding: 0.5rem 1rem;
+  background: var(--oc-background);
+  border-block-end: 1px solid var(--oc-border);
+}
+
+.oc-block-shell-content {
+  flex: 1;
+  min-block-size: 0;
+  min-inline-size: 0;
+  padding: 1rem;
+  overflow: auto;
+  overscroll-behavior-y: contain;
+}
+
+.oc-block-shell-menu-button { display: none; }
+
+@media (max-width: 47.99rem) {
+  .oc-block-shell { grid-template-columns: minmax(0, 1fr); }
+  .oc-block-shell > .oc-sidebar { display: none; }
+  .oc-block-shell-menu-button { display: inline-flex; }
+}
+
+/* ---- App header bar ---- */
+
+.oc-block-appbar {
+  display: flex;
+  align-items: center;
+  gap: 0.75rem;
+  min-block-size: 3.5rem;
+  padding: 0.5rem 1rem;
+  flex-shrink: 0;
+  background: var(--oc-background);
+  border-block-end: 1px solid var(--oc-border);
+}
+
+.oc-block-appbar-nav { flex: 1; min-inline-size: 0; overflow-x: auto; }
+
+.oc-block-appbar-actions { display: flex; align-items: center; gap: 0.5rem; margin-inline-start: auto; }
+
+.oc-block-appbar-title { font-size: 1rem; font-weight: 600; white-space: nowrap; }
+
+/* ---- Module header: icon + title + intro + actions ---- */
+
+.oc-block-modulehead { padding: 1.5rem 0 0.5rem; }
+
+.oc-block-modulehead-band {
+  display: flex;
+  align-items: flex-start;
+  gap: 0.75rem;
+  padding: 1rem 1.25rem;
+  background: linear-gradient(100deg, oklch(from var(--oc-primary) l c h / 0.1), oklch(from var(--oc-primary) l c h / 0.02));
+  border: 1px solid oklch(from var(--oc-primary) l c h / 0.25);
+  border-radius: calc(var(--oc-radius) + 4px);
+}
+
+.oc-block-modulehead-icon {
+  display: grid;
+  place-items: center;
+  inline-size: 2.5rem;
+  block-size: 2.5rem;
+  flex-shrink: 0;
+  font-size: 1.25rem;
+  color: var(--oc-primary);
+  background: oklch(from var(--oc-primary) l c h / 0.12);
+  border-radius: calc(var(--oc-radius) + 2px);
+}
+
+.oc-block-modulehead-icon svg { inline-size: 1.25em; block-size: 1.25em; }
+
+.oc-block-authsplit-logo svg { inline-size: 1.5rem; block-size: 1.5rem; }
+
+.oc-block-modulehead-body { max-inline-size: 42rem; min-inline-size: 0; }
+
+.oc-block-modulehead-title { margin: 0; font-size: 1.25rem; font-weight: 600; letter-spacing: -0.01em; color: var(--oc-foreground); }
+
+.oc-block-modulehead-intro { margin: 0.25rem 0 0; font-size: 0.875rem; line-height: 1.55; color: var(--oc-muted-foreground); }
+
+.oc-block-modulehead-meta { display: flex; flex-wrap: wrap; align-items: center; gap: 0.5rem; margin-block-start: 0.5rem; }
+
+.oc-block-modulehead-actions { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 0.5rem; padding-block: 1rem 0; }
+
+/* ---- KPI / dashboard stats ---- */
+
+/* ---- Data table card: header · toolbar · table · footer ---- */
+
+.oc-block-datatable { padding: 0; }
+
+.oc-block-datatable-head {
+  display: flex;
+  flex-wrap: wrap;
+  align-items: flex-start;
+  justify-content: space-between;
+  gap: 0.75rem;
+  padding: 1.25rem 1.5rem 0;
+}
+
+.oc-block-datatable-title { margin: 0; font-size: 1.1rem; font-weight: 600; color: var(--oc-foreground); }
+
+.oc-block-datatable-description { margin: 0.125rem 0 0; font-size: 0.875rem; color: var(--oc-muted-foreground); }
+
+.oc-block-datatable-body { padding: 1rem 1.5rem 1.25rem; }
+
+.oc-block-datatable .oc-table-wrap { border: 1px solid var(--oc-border); }
+
+.oc-block-datatable .oc-table { table-layout: auto; }
+
+.oc-block-datatable .oc-table th,
+.oc-block-datatable .oc-table td { border-inline: 0; }
+
+.oc-block-datatable .oc-table tbody tr:last-child td { border-block-end: 0; }
+
+.oc-block-datatable .oc-table-wrap > .oc-table { min-inline-size: 40rem; }
+
+.oc-block-datatable-bulk {
+  display: flex;
+  align-items: center;
+  gap: 0.75rem;
+  padding: 0.5rem 0.75rem;
+  margin-block-end: 0.75rem;
+  font-size: 0.8125rem;
+  background: oklch(from var(--oc-primary) l c h / 0.08);
+  border: 1px solid oklch(from var(--oc-primary) l c h / 0.3);
+  border-radius: var(--oc-radius);
+}
+
+/* ---- Split auth layout: brand panel + form panel ---- */
+
+.oc-block-authsplit {
+  display: grid;
+  min-block-size: 32rem;
+  background: var(--oc-background);
+  color: var(--oc-foreground);
+}
+
+@media (min-width: 62rem) { .oc-block-authsplit { grid-template-columns: 1fr 1fr; } }
+
+.oc-block-authsplit-brand {
+  position: relative;
+  display: none;
+  flex-direction: column;
+  justify-content: space-between;
+  gap: 2rem;
+  padding: 2.5rem;
+  color: var(--oc-primary-foreground);
+  background:
+    radial-gradient(ellipse 80% 60% at 20% -10%, oklch(from var(--oc-brand-2) l c h / 0.35), transparent 55%),
+    var(--oc-primary);
+  border-inline-end: 1px solid var(--oc-border);
+}
+
+@media (min-width: 62rem) { .oc-block-authsplit-brand { display: flex; } }
+
+.oc-block-authsplit-logo { display: inline-flex; align-items: center; gap: 0.75rem; font-size: 1.1rem; font-weight: 600; letter-spacing: -0.01em; color: inherit; text-decoration: none; }
+
+.oc-block-authsplit-quote { margin: 0; max-inline-size: 28rem; padding-inline-start: 1.25rem; border-inline-start: 2px solid oklch(from var(--oc-primary-foreground) l c h / 0.55); }
+
+.oc-block-authsplit-quote p { margin: 0 0 0.5rem; font-size: 1.1rem; line-height: 1.55; font-weight: 500; }
+
+.oc-block-authsplit-quote footer { font-size: 0.875rem; opacity: 0.75; }
+
+.oc-block-authsplit-form { display: flex; align-items: center; justify-content: center; padding: 2rem 1rem; }
+
+.oc-block-authsplit-card { inline-size: 100%; max-inline-size: 26rem; }
+
+.oc-block-authsplit-title { margin: 0 0 0.25rem; font-size: 1.5rem; font-weight: 600; letter-spacing: -0.01em; text-align: center; }
+
+.oc-block-authsplit-subtitle { margin: 0 0 1.5rem; font-size: 0.875rem; text-align: center; color: var(--oc-muted-foreground); }
+
+.oc-block-authsplit-fields { display: flex; flex-direction: column; gap: 1rem; }
+
+.oc-block-authsplit-row { display: flex; align-items: center; justify-content: space-between; gap: 0.5rem; font-size: 0.8125rem; }
+
+/* ---- Two-factor: OTP code + recovery codes ---- */
+
+.oc-block-twofactor { display: grid; gap: 1.5rem; max-inline-size: 28rem; margin-inline: auto; }
+
+.oc-block-twofactor-step { display: grid; gap: 0.75rem; }
+
+.oc-block-twofactor-center { display: grid; justify-items: center; gap: 0.75rem; text-align: center; }
+
+.oc-block-twofactor-qr {
+  display: grid;
+  place-items: center;
+  inline-size: 11rem;
+  block-size: 11rem;
+  font-size: 0.75rem;
+  color: var(--oc-muted-foreground);
+  background: var(--oc-surface-strong);
+  border: 1px dashed var(--oc-border-strong);
+  border-radius: var(--oc-radius);
+}
+
+/* ---- Settings page: section navigation + content sections ---- */
+
+/* ---- Hub: grid of launcher cards ---- */
+
+/* ---- Onboarding checklist card ---- */
+
+/* ---- Wizard dialog: stepper rail + step content ---- */
+
+.oc-block-wizard { display: flex; flex-direction: column; min-block-size: 0; }
+
+@media (min-width: 48rem) { .oc-block-wizard { flex-direction: row; } }
+
+.oc-block-wizard-rail { flex-shrink: 0; padding: 0.75rem; border-block-end: 1px solid var(--oc-border); overflow-x: auto; }
+
+@media (min-width: 48rem) { .oc-block-wizard-rail { inline-size: 15rem; padding: 1rem; border-block-end: 0; border-inline-end: 1px solid var(--oc-border); overflow-y: auto; } }
+
+.oc-block-wizard-main { display: flex; flex: 1; flex-direction: column; min-inline-size: 0; }
+
+.oc-block-wizard-step { flex: 1; padding: 1.25rem 1.5rem; display: flex; flex-direction: column; gap: 1rem; }
+
+.oc-block-wizard-step[hidden] { display: none; }
+
+/* ---- Team list: members with role and actions ---- */
+
+.oc-block-team { display: flex; flex-direction: column; border: 1px solid var(--oc-border); border-radius: calc(var(--oc-radius) + 4px); background: var(--oc-card); overflow: hidden; }
+
+.oc-block-team-row { display: flex; align-items: center; gap: 0.75rem; padding: 0.75rem 1rem; }
+
+.oc-block-team-row + .oc-block-team-row { border-block-start: 1px solid var(--oc-border); }
+
+.oc-block-team-row .oc-user { flex: 1; }
+
+.oc-block-team-meta { display: flex; align-items: center; gap: 0.5rem; }
+
+/* ---- Form page: collapsible sections + sticky action bar ---- */
+
+.oc-block-formpage { display: flex; flex-direction: column; gap: 1rem; max-inline-size: 56rem; }
+
+.oc-block-formpage-grid { display: grid; gap: 1rem; }
+
+@media (min-width: 40rem) { .oc-block-formpage-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
+
+.oc-block-formpage-actions {
+  position: sticky;
+  inset-block-end: 0;
+  display: flex;
+  justify-content: flex-end;
+  gap: 0.5rem;
+  padding: 0.75rem 1rem;
+  background: var(--oc-background);
+  border: 1px solid var(--oc-border);
+  border-radius: calc(var(--oc-radius) + 2px);
+  box-shadow: 0 -4px 16px oklch(from var(--color-black-60) l c h / 0.08);
+}
+
+/* C-BLOCKS:begin */
+
+/* ===================================================================
+   AUTH FAMILY (login-01..05, signup-01..03, otp-01..03, forgot-password, reset-password)
+   Index: authpage · authcard · authsocial · authduo (container-query split) · authmin
+   =================================================================== */
+
+.oc-block-authpage {
+  display: grid;
+  place-items: center;
+  min-block-size: 30rem;
+  padding: 2rem 1rem;
+  color: var(--oc-foreground);
+  background: var(--oc-muted);
+  border-radius: calc(var(--oc-radius) + 4px);
+}
+
+.oc-block-authpage--plain { background: var(--oc-background); border: 1px solid var(--oc-border); }
+
+.oc-block-authcard {
+  display: flex;
+  flex-direction: column;
+  gap: 1rem;
+  inline-size: 100%;
+  max-inline-size: 24rem;
+  padding: 1.5rem;
+  color: var(--oc-foreground);
+  background: var(--oc-card);
+  border: 1px solid var(--oc-border);
+  border-radius: calc(var(--oc-radius) + 4px);
+  box-shadow: 0 1px 2px oklch(from var(--color-black-60) l c h / 0.06);
+}
+
+.oc-block-authcard--flat { padding: 0; background: transparent; border: 0; box-shadow: none; }
+
+.oc-block-authcard--wide { max-inline-size: 28rem; }
+
+.oc-block-authcard-logo {
+  display: grid;
+  place-items: center;
+  inline-size: 2.5rem;
+  block-size: 2.5rem;
+  margin-inline: auto;
+  color: var(--oc-primary-foreground);
+  background: var(--oc-primary);
+  border-radius: var(--oc-radius);
+}
+
+.oc-block-authcard-logo svg { inline-size: 1.35rem; block-size: 1.35rem; }
+
+.oc-block-authcard-head { display: flex; flex-direction: column; gap: 0.25rem; text-align: center; }
+
+.oc-block-authcard-title { margin: 0; font-size: 1.375rem; font-weight: 600; letter-spacing: -0.01em; }
+
+.oc-block-authcard-text { margin: 0; font-size: 0.875rem; color: var(--oc-muted-foreground); }
+
+.oc-block-authcard-fields { display: flex; flex-direction: column; gap: 1rem; }
+
+.oc-block-authcard-row { display: flex; align-items: center; justify-content: space-between; gap: 0.5rem; font-size: 0.8125rem; }
+
+.oc-block-authcard-foot { margin: 0; font-size: 0.875rem; text-align: center; color: var(--oc-muted-foreground); }
+
+.oc-block-authcard-foot a { color: var(--oc-foreground); font-weight: 500; text-decoration: underline; text-underline-offset: 3px; }
+
+.oc-block-authcard-legal { margin: 0; font-size: 0.75rem; text-align: center; color: var(--oc-muted-foreground); }
+
+.oc-block-authcard-legal a { color: inherit; text-decoration: underline; text-underline-offset: 3px; }
+
+.oc-block-authcard-submit { inline-size: 100%; }
+
+.oc-block-authcard-hint { margin: 0; font-size: 0.75rem; color: var(--oc-muted-foreground); }
+
+.oc-block-authcard-center { display: flex; flex-direction: column; align-items: center; gap: 0.75rem; }
+
+.oc-block-authsocial { display: grid; grid-template-columns: repeat(auto-fit, minmax(7.5rem, 1fr)); gap: 0.5rem; }
+
+.oc-block-authsocial .oc-btn { inline-size: 100%; }
+
+/* Split: panel + form, switches to two columns by container width */
+
+.oc-block-authduo {
+  container: oc-authduo / inline-size;
+  color: var(--oc-foreground);
+  background: var(--oc-background);
+  border: 1px solid var(--oc-border);
+  border-radius: calc(var(--oc-radius) + 4px);
+  overflow: hidden;
+}
+
+.oc-block-authduo-grid { display: grid; min-block-size: 34rem; }
+
+@container oc-authduo (min-width: 42rem) {
+  .oc-block-authduo-grid { grid-template-columns: 1fr 1fr; }
+  .oc-block-authduo-panel { display: flex; }
+  .oc-block-authduo--reverse .oc-block-authduo-panel { order: 2; }
+}
+
+.oc-block-authduo-panel {
+  position: relative;
+  display: none;
+  flex-direction: column;
+  justify-content: space-between;
+  gap: 2rem;
+  padding: 2rem;
+  color: var(--oc-primary-foreground);
+  background:
+    radial-gradient(ellipse 70% 55% at 85% 100%, oklch(from var(--oc-brand-2) l c h / 0.4), transparent 60%),
+    radial-gradient(ellipse 60% 50% at 10% 0%, oklch(from var(--oc-brand-3) l c h / 0.35), transparent 60%),
+    var(--oc-primary);
+}
+
+.oc-block-authduo-panel--image::before {
+  content: "";
+  position: absolute;
+  inset: 0;
+  background:
+    repeating-linear-gradient(135deg, oklch(from var(--oc-primary-foreground) l c h / 0.07) 0 1px, transparent 1px 14px),
+    linear-gradient(to top, oklch(from var(--oc-primary) l c h / 0.7), transparent 60%);
+  pointer-events: none;
+}
+
+.oc-block-authduo-panel--muted { color: var(--oc-foreground); background: var(--oc-muted); }
+
+.oc-block-authduo-panel > * { position: relative; }
+
+.oc-block-authduo-logo { display: inline-flex; align-items: center; gap: 0.6rem; font-weight: 600; color: inherit; text-decoration: none; }
+
+.oc-block-authduo-logo svg { inline-size: 1.4rem; block-size: 1.4rem; }
+
+.oc-block-authduo-quote { margin: 0; max-inline-size: 26rem; }
+
+.oc-block-authduo-quote p { margin: 0 0 0.5rem; font-size: 1.05rem; line-height: 1.55; font-weight: 500; }
+
+.oc-block-authduo-quote footer { font-size: 0.8125rem; opacity: 0.8; }
+
+.oc-block-authduo-form { display: grid; place-items: center; padding: 2rem 1.25rem; }
+
+/* Minimal: no card, one centered column */
+
+.oc-block-authmin { display: grid; place-items: center; min-block-size: 26rem; padding: 2rem 1rem; color: var(--oc-foreground); background: var(--oc-background); border: 1px solid var(--oc-border); border-radius: calc(var(--oc-radius) + 4px); }
+
+/* ===================================================================
+   SIDEBAR FAMILY (sidebar-01..16) — a demo frame around .oc-sidebar plus a page-shaped main area
+   Index: sb · sb-main · sb-bar · sb-body · sb-ph · sb-group (collapsible group) · sb-rail · sb-toggle (icon collapse)
+   =================================================================== */
+
+.oc-block-sb {
+  --oc-block-sb-height: 26rem;
+  display: grid;
+  grid-template-columns: auto minmax(0, 1fr);
+  block-size: var(--oc-block-sb-height);
+  color: var(--oc-foreground);
+  background: var(--oc-background);
+  border: 1px solid var(--oc-border);
+  border-radius: calc(var(--oc-radius) + 4px);
+  overflow: hidden;
+}
+
+.oc-block-sb--floating { background: var(--oc-muted); }
+
+.oc-block-sb-main { display: flex; flex-direction: column; min-inline-size: 0; min-block-size: 0; }
+
+.oc-block-sb-bar {
+  display: flex;
+  align-items: center;
+  gap: 0.5rem;
+  flex-shrink: 0;
+  min-block-size: 3rem;
+  padding: 0.5rem 0.75rem;
+  background: var(--oc-background);
+  border-block-end: 1px solid var(--oc-border);
+}
+
+.oc-block-sb-sep { inline-size: 1px; block-size: 1rem; background: var(--oc-border-strong); }
+
+.oc-block-sb-body {
+  flex: 1;
+  display: grid;
+  grid-template-columns: repeat(3, minmax(0, 1fr));
+  grid-auto-rows: 4.5rem;
+  gap: 0.75rem;
+  min-block-size: 0;
+  padding: 0.75rem;
+  overflow: auto;
+}
+
+.oc-block-sb-ph { background: var(--oc-muted); border-radius: var(--oc-radius); }
+
+.oc-block-sb-ph--wide { grid-column: 1 / -1; grid-row: span 3; }
+
+.oc-block-sb-toggle { position: absolute; opacity: 0; pointer-events: none; }
+
+.oc-block-sb:has(.oc-block-sb-toggle:checked) .oc-sidebar { inline-size: var(--oc-sidebar-width-icon); }
+
+.oc-block-sb:has(.oc-block-sb-toggle:checked) .oc-sidebar-menu-label,
+.oc-block-sb:has(.oc-block-sb-toggle:checked) .oc-sidebar-menu-badge,
+.oc-block-sb:has(.oc-block-sb-toggle:checked) .oc-sidebar-menu-sub,
+.oc-block-sb:has(.oc-block-sb-toggle:checked) .oc-sidebar-group-label,
+.oc-block-sb:has(.oc-block-sb-toggle:checked) .oc-sidebar .oc-user-text,
+.oc-block-sb:has(.oc-block-sb-toggle:checked) details.oc-sidebar-collapsible > summary::after { display: none; }
+
+.oc-block-sb:has(.oc-block-sb-toggle:checked) .oc-sidebar-menu-button { justify-content: center; padding-inline: 0; }
+
+.oc-block-sb-hint { margin: 0; padding: 0 0.75rem; font-size: 0.75rem; color: var(--oc-muted-foreground); }
+
+/* Collapsible group: <details class="oc-block-sb-group"><summary>Label</summary><ul class="oc-sidebar-menu">… */
+
+.oc-block-sb-group > summary {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  padding: 0.5rem 0.625rem 0.25rem;
+  font-size: 0.7rem;
+  font-weight: 600;
+  letter-spacing: 0.04em;
+  text-transform: uppercase;
+  color: var(--oc-muted-foreground);
+  list-style: none;
+  cursor: pointer;
+  border-radius: var(--oc-radius);
+}
+
+.oc-block-sb-group > summary::-webkit-details-marker { display: none; }
+
+.oc-block-sb-group > summary::after {
+  content: "";
+  inline-size: 0.4rem;
+  block-size: 0.4rem;
+  border-inline-end: 1.5px solid currentColor;
+  border-block-end: 1.5px solid currentColor;
+  rotate: -45deg;
+  transition: rotate var(--oc-transition-fast);
+}
+
+.oc-block-sb-group[open] > summary::after { rotate: 45deg; }
+
+.oc-block-sb-group > summary:focus-visible { outline: 2px solid var(--oc-ring); outline-offset: -2px; }
+
+/* Icon rail for the double sidebar */
+
+.oc-block-sb-rail {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  gap: 0.5rem;
+  inline-size: 3.5rem;
+  padding: 0.75rem 0.5rem;
+  background: var(--oc-muted);
+  border-inline-end: 1px solid var(--oc-border);
+}
+
+.oc-block-sb-rail .oc-sidebar-menu-button { justify-content: center; padding: 0.5rem; }
+
+/* Team switcher + user menu buttons */
+
+.oc-block-sb-switch { inline-size: 100%; border: 0; background: transparent; font: inherit; color: inherit; cursor: pointer; text-align: start; }
+
+.oc-block-sb-tile { display: grid; place-items: center; inline-size: 2rem; block-size: 2rem; flex: none; color: var(--oc-primary-foreground); background: var(--oc-primary); border-radius: var(--oc-radius); }
+
+.oc-block-sb-tile svg { inline-size: 1rem; block-size: 1rem; }
+
+.oc-block-sb-sub { display: block; font-size: 0.75rem; font-weight: 400; color: var(--oc-muted-foreground); }
+
+/* ===================================================================
+   DASHBOARD-01 + CHARTS — charts are plain SVG/CSS on the --oc-chart-1..5 tokens
+   Index: chart (card) · chart-svg · chart-line/-area/-grid · chart-months · donut · radial · hbars · spark
+   =================================================================== */
+
+.oc-block-dash-row { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 18rem), 1fr)); gap: 1rem; }
+
+.oc-block-dash-table { inline-size: 100%; }
+
+/* parts/site-about-timeline.css */
+/* File: packages/blocks/src/parts/site-about-timeline.css
+   Map: section -> split grid -> media placeholder + badge -> copy -> timeline spacing -> reverse variant
+   About block: a picture next to the story of the company, ending in the timeline component. */
+
+.oc-block-about {
+  container-type: inline-size;
+  max-inline-size: var(--oc-block-max-width, 1200px);
+  margin-inline: auto;
+  padding: clamp(3rem, 7vw, 5rem) var(--oc-block-gap, 24px);
+}
+
+.oc-block-about-inner { display: grid; gap: clamp(2rem, 5vw, 3.5rem); align-items: center; }
+@container (min-width: 52rem) {
+  .oc-block-about-inner { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
+  /* Reverse: picture on the right. */
+  .oc-block-about--reverse .oc-block-about-media { order: 2; }
+}
+
+/* Picture: an <img> inside, or the accent gradient placeholder when empty. */
+.oc-block-about-media {
+  position: relative;
+  margin: 0;
+  aspect-ratio: 4 / 3;
+  border: 1px solid var(--oc-border);
+  border-radius: var(--oc-radius-lg, 1.25rem);
+  background:
+    radial-gradient(circle at 25% 20%, color-mix(in oklch, var(--color-white-50) 28%, transparent), transparent 40%),
+    linear-gradient(140deg, var(--oc-accent-from), var(--oc-accent-to));
+  overflow: hidden;
+}
+.oc-block-about-media > img { display: block; inline-size: 100%; block-size: 100%; object-fit: cover; }
+
+/* Floating badge on the picture ("Since 2012"). */
+.oc-block-about-badge {
+  position: absolute;
+  inset: auto auto 1rem 1rem;
+  display: grid;
+  padding: 0.75rem 1rem;
+  border: 1px solid var(--oc-border);
+  border-radius: var(--oc-radius-md, 0.75rem);
+  background: color-mix(in oklch, var(--oc-background) 85%, transparent);
+  backdrop-filter: blur(10px);
+  color: var(--oc-muted-foreground);
+  font-size: 0.85rem;
+}
+.oc-block-about-badge strong { color: var(--oc-foreground); font-size: 1.4rem; line-height: 1.1; }
+
+.oc-block-about-title {
+  margin: 0 0 1rem;
+  font-size: clamp(1.75rem, 4vw, 2.6rem);
+  font-weight: 700;
+  line-height: 1.15;
+  letter-spacing: -0.02em;
+  text-wrap: balance;
+}
+.oc-block-about-copy > p:not([class]) {
+  margin: 0 0 1rem;
+  color: var(--oc-muted-foreground);
+  line-height: 1.65;
+}
+.oc-block-about-copy .oc-timeline { margin-block-start: 1.75rem; }
+
+/* parts/site-contact-grid.css */
+/* File: packages/blocks/src/parts/site-contact-grid.css
+   Map: section -> head -> card grid -> card (mark, title, lines) -> plain variant
+   Contact grid block: contact info cards (e-mail, phone, address, hours). */
+
+.oc-block-contact {
+  max-inline-size: var(--oc-block-max-width, 1200px);
+  margin-inline: auto;
+  padding: clamp(3rem, 7vw, 5rem) var(--oc-block-gap, 24px);
+}
+
+.oc-block-contact-head { max-inline-size: 40rem; margin-block-end: 2rem; }
+.oc-block-contact-heading {
+  margin: 0 0 0.75rem;
+  font-size: clamp(1.75rem, 4vw, 2.5rem);
+  font-weight: 700;
+  letter-spacing: -0.02em;
+}
+.oc-block-contact-lead { margin: 0; color: var(--oc-muted-foreground); font-size: 1.05rem; line-height: 1.6; }
+
+.oc-block-contact-grid {
+  display: grid;
+  grid-template-columns: repeat(auto-fill, minmax(min(100%, 15rem), 1fr));
+  gap: 1.25rem;
+}
+
+.oc-block-contact-card {
+  display: grid;
+  align-content: start;
+  gap: 0.35rem;
+  padding: 1.5rem;
+  border: 1px solid var(--oc-border);
+  border-radius: var(--oc-radius-lg, 1.25rem);
+  background: var(--oc-surface);
+  font-style: normal; /* the address card is an <address> */
+}
+.oc-block-contact-card > .oc-product-mark { margin-block-end: 0.75rem; }
+.oc-block-contact-title { margin: 0 0 0.25rem; font-size: 1.05rem; font-weight: 700; }
+
+/* A line of info. As a link it turns to the foreground color on hover. */
+.oc-block-contact-line {
+  margin: 0;
+  color: var(--oc-muted-foreground);
+  font-size: 0.95rem;
+  line-height: 1.55;
+  text-decoration: none;
+  overflow-wrap: anywhere;
+}
+a.oc-block-contact-line { color: var(--oc-foreground); font-weight: 500; }
+a.oc-block-contact-line:hover { color: var(--oc-brand-1); }
+
+/* Plain: no card frames, a thin accent line on top of each item. */
+.oc-block-contact--plain .oc-block-contact-card {
+  padding: 1.25rem 0 0;
+  border: 0;
+  border-block-start: 2px solid var(--oc-border-strong);
+  border-radius: 0;
+  background: none;
+}
+
+/* parts/site-faq.css */
+/* File: packages/blocks/src/parts/site-faq.css
+   Map: section -> head (eyebrow, title, lead) -> accordion list -> "more" line -> split variant
+   FAQ block: a title plus the accordion component on native <details name="…"> (one item open at a time). */
+
+.oc-block-faq {
+  container-type: inline-size;
+  max-inline-size: var(--oc-block-max-width, 1200px);
+  margin-inline: auto;
+  padding: clamp(3rem, 7vw, 5rem) var(--oc-block-gap, 24px);
+}
+
+.oc-block-faq-inner {
+  display: grid;
+  gap: 2rem;
+  max-inline-size: 48rem;
+  margin-inline: auto;
+}
+
+.oc-block-faq-head { text-align: center; }
+.oc-block-faq-title {
+  margin: 0 0 0.75rem;
+  font-size: clamp(1.75rem, 4vw, 2.5rem);
+  font-weight: 700;
+  letter-spacing: -0.02em;
+  text-wrap: balance;
+}
+.oc-block-faq-lead {
+  margin: 0;
+  color: var(--oc-block-text-soft, var(--oc-muted-foreground));
+  font-size: 1.05rem;
+  line-height: 1.6;
+}
+
+/* The accordion fills the column (the component default is 46rem wide). */
+.oc-block-faq-list { --oc-accordion-width: 100%; background: var(--oc-block-surface, var(--oc-card)); }
+
+.oc-block-faq-more {
+  margin: 0;
+  color: var(--oc-block-text-soft, var(--oc-muted-foreground));
+  text-align: center;
+}
+
+/* Split: head on the left, questions on the right (from 48rem container width). */
+@container (min-width: 48rem) {
+  .oc-block-faq--split .oc-block-faq-inner {
+    grid-template-columns: minmax(0, 2fr) minmax(0, 3fr);
+    align-items: start;
+    max-inline-size: none;
+  }
+  .oc-block-faq--split .oc-block-faq-head { text-align: start; position: sticky; inset-block-start: 1rem; }
+  .oc-block-faq--split .oc-block-faq-more { grid-column: 2; text-align: start; }
+}
+
+/* parts/site-hero-orbit.css */
+/* File: packages/blocks/src/parts/site-hero-orbit.css
+   Map: visual (square, container) -> dashed ring that turns -> marks on the ring (stay upright) -> center window -> reduced motion
+   Hero orbit block: hero-code layout where product marks orbit around the code window.
+   Place a mark with style="--oc-orbit-angle: 60deg". The ring turns once per --oc-orbit-duration (default 60s). */
+
+/* Square stage; container units (cqi) give the ring radius. */
+.oc-block-orbit-visual {
+  position: relative;
+  container-type: inline-size;
+  display: grid;
+  place-items: center;
+  inline-size: 100%;
+  max-inline-size: 32rem;
+  aspect-ratio: 1;
+  margin-inline: auto;
+}
+
+/* The ring: a dashed circle that slowly turns and carries the marks. */
+.oc-block-orbit-ring {
+  position: absolute;
+  inset: 6%;
+  border: 1px dashed color-mix(in oklch, var(--oc-border-strong) 80%, transparent);
+  border-radius: 50%;
+  animation: oc-orbit-spin var(--oc-orbit-duration, 60s) linear infinite;
+}
+/* Second, inner ring for depth (no marks). */
+.oc-block-orbit-ring::before {
+  content: "";
+  position: absolute;
+  inset: 18%;
+  border: 1px solid color-mix(in oklch, var(--oc-border) 70%, transparent);
+  border-radius: 50%;
+}
+
+/* A mark sits on the ring at its angle. Radius = half the ring = 44% of the stage width. */
+.oc-block-orbit-mark {
+  position: absolute;
+  inset-block-start: 50%;
+  inset-inline-start: 50%;
+  translate: -50% -50%;
+  transform: rotate(var(--oc-orbit-angle, 0deg)) translateX(44cqi) rotate(calc(var(--oc-orbit-angle, 0deg) * -1));
+}
+/* The mark turns back as fast as the ring turns, so its glyph stays upright. */
+.oc-block-orbit-mark > * {
+  display: grid;
+  animation: oc-orbit-spin var(--oc-orbit-duration, 60s) linear infinite reverse;
+}
+
+/* Center: the code window (or any visual) above the ring. */
+.oc-block-orbit-center {
+  position: relative;
+  z-index: 1;
+  inline-size: min(100%, 72cqi);
+}
+.oc-block-orbit-center.oc-code-window .oc-code-window__body { font-size: clamp(0.7rem, 2.6cqi, 0.9rem); }
+
+@keyframes oc-orbit-spin { to { rotate: 360deg; } }
+
+@media (prefers-reduced-motion: reduce) {
+  .oc-block-orbit-ring,
+  .oc-block-orbit-mark > * { animation: none; }
+}
+
+/* parts/site-portfolio-grid.css */
+/* File: packages/blocks/src/parts/site-portfolio-grid.css
+   Map: section -> head (title left, "all projects" link right) -> card grid -> two-column variant
+   Portfolio grid block: a heading and a grid of project-card components. */
+
+.oc-block-portfolio-head {
+  display: flex;
+  flex-wrap: wrap;
+  align-items: flex-end;
+  justify-content: space-between;
+  gap: 1rem 2rem;
+  margin-block-end: 2rem;
+}
+.oc-block-portfolio-head .oc-display { margin-block-end: 0; }
+.oc-block-portfolio-lead { margin: 0.75rem 0 0; color: var(--oc-muted-foreground); max-inline-size: 36rem; }
+
+.oc-block-portfolio-grid {
+  display: grid;
+  grid-template-columns: repeat(auto-fill, minmax(min(100%, var(--oc-portfolio-min, 18rem)), 1fr));
+  gap: 1.5rem;
+}
+
+/* Two columns: bigger cards (fewer, more important projects). */
+.oc-block-portfolio--two { --oc-portfolio-min: 26rem; }
+
+/* parts/site-profile-header.css */
+/* File: packages/blocks/src/parts/site-profile-header.css
+   Map: section -> banner -> bar (overhanging avatar, info, actions) -> tab bar -> compact variant
+   Profile header block: banner, an avatar that overlaps the banner edge, name + meta, actions and link tabs.
+   Banner image: style="--oc-profile-banner: url(...)" (default: an accent gradient). */
+
+.oc-block-profile {
+  container-type: inline-size;
+  max-inline-size: var(--oc-block-max-width, 1200px);
+  margin-inline: auto;
+}
+
+.oc-block-profile-banner {
+  aspect-ratio: 6 / 1;
+  min-block-size: 7rem;
+  border-radius: var(--oc-block-radius, 16px);
+  background:
+    var(--oc-profile-banner, radial-gradient(circle at 85% 30%, color-mix(in oklch, var(--color-white-50) 25%, transparent), transparent 40%)),
+    linear-gradient(120deg, var(--oc-accent-from), var(--oc-accent-to));
+  background-size: cover;
+  background-position: center;
+}
+
+.oc-block-profile-bar {
+  display: flex;
+  flex-wrap: wrap;
+  align-items: flex-end;
+  gap: 1rem 1.25rem;
+  padding-inline: clamp(1rem, 3vw, 1.5rem);
+}
+
+/* The avatar component, made bigger and pulled up over the banner edge. */
+.oc-block-profile-avatar.oc-avatar {
+  width: 6.5rem;
+  height: 6.5rem;
+  margin-block-start: -3.25rem;
+  border: 4px solid var(--oc-background);
+  font-size: 2rem;
+}
+
+.oc-block-profile-info { flex: 1 1 16rem; min-inline-size: 0; padding-block-start: 0.75rem; }
+.oc-block-profile-name { margin: 0; font-size: clamp(1.4rem, 3vw, 1.9rem); font-weight: 700; letter-spacing: -0.02em; }
+.oc-block-profile-meta { margin: 0.2rem 0 0; color: var(--oc-muted-foreground); font-size: 0.9rem; }
+.oc-block-profile-bio { margin: 0.5rem 0 0; color: var(--oc-muted-foreground); font-size: 0.95rem; max-inline-size: 44rem; }
+.oc-block-profile-actions { display: flex; flex-wrap: wrap; gap: 0.5rem; }
+
+/* Tab bar: links; the current one gets aria-current="page". Scrolls sideways on small screens. */
+.oc-block-profile-tabs {
+  display: flex;
+  gap: 0.25rem;
+  margin-block-start: 1.25rem;
+  padding-inline: clamp(1rem, 3vw, 1.5rem);
+  border-block-end: 1px solid var(--oc-border);
+  overflow-x: auto;
+  scrollbar-width: none;
+}
+.oc-block-profile-tab {
+  padding: 0.75rem 1rem;
+  border-block-end: 2px solid transparent;
+  color: var(--oc-muted-foreground);
+  font-size: 0.92rem;
+  font-weight: 500;
+  text-decoration: none;
+  white-space: nowrap;
+  transition: color var(--oc-transition-fast, 150ms), border-color var(--oc-transition-fast, 150ms);
+}
+.oc-block-profile-tab:hover { color: var(--oc-foreground); }
+.oc-block-profile-tab[aria-current="page"] { border-block-end-color: var(--oc-brand-1); color: var(--oc-foreground); }
+.oc-block-profile-tab:focus-visible { outline: 2px solid var(--oc-ring); outline-offset: -2px; }
+
+/* Compact: low banner and a smaller avatar. */
+.oc-block-profile--compact .oc-block-profile-banner { aspect-ratio: 10 / 1; min-block-size: 4.5rem; }
+.oc-block-profile--compact .oc-block-profile-avatar.oc-avatar { width: 4.5rem; height: 4.5rem; margin-block-start: -2.25rem; font-size: 1.4rem; }
+
+/* Narrow: the actions go below the info, full width. */
+@container (max-width: 34rem) {
+  .oc-block-profile-actions { flex-basis: 100%; }
+}