@birdycom/omniaui 0.12.6 → 0.13.0

package/dist/parts/site-fly.css

@@ -0,0 +1,40 @@
+/* File: packages/ui/src/parts/site-fly.css */
+/* Map: fly in (only with fly.js) -> visible -> reduced motion -> product card badge -> code window tokens */
+/* Cards that fly in when they scroll into view: they start from the middle of their row (--oc-fly-x, set by fly.js),
+   70px lower, smaller and tilted, and land in their place. Without fly.js (html.oc-fly-ready is missing) or with
+   "reduce motion" everything simply stands in its place. Options: --oc-fly-step (offset per column), --oc-fly-stagger
+   (delay per column) and data-oc-fly-repeat (fly out again when leaving the view). The lift on hover uses translate, so it never fights the
+   transform of the fly-in. Also: a "New" badge in a product card name and short syntax classes for a code window. */
+
+.oc-fly-ready .oc-reveal--fly {
+  /* --oc-fly-delay: set per card by fly.js from --oc-fly-stagger (delay per column). */
+  transition:
+    opacity 0.6s var(--oc-ease-out, ease) var(--oc-fly-delay, 0s),
+    transform 0.9s cubic-bezier(0.16, 1, 0.3, 1) var(--oc-fly-delay, 0s),
+    border-color 0.35s;
+}
+.oc-fly-ready .oc-reveal--fly:not(.is-visible) {
+  opacity: 0;
+  transform: perspective(900px) translate3d(var(--oc-fly-x, 0), 70px, 0) scale(0.9) rotateX(14deg);
+}
+@media (prefers-reduced-motion: reduce) {
+  .oc-fly-ready .oc-reveal--fly:not(.is-visible) { opacity: 1; transform: none; }
+}
+
+/* "New" after the name of a product card: <h3 class="oc-product-card__name">Product 1 <span class="oc-product-card__badge oc-pill">New</span></h3> */
+.oc-product-card__badge {
+  margin-inline-start: 0.4rem;
+  vertical-align: middle;
+  font-family: var(--oc-font-sans);
+  font-size: 0.7rem;
+  letter-spacing: 0.04em;
+  text-transform: uppercase;
+}
+
+/* Short syntax classes for hand-written code in an .oc-code-window: keyword, string, constant, function, muted.
+   They take the colors of the window (--oc-syntax-*), so they follow light and dark mode and a theme can change them. */
+.oc-code-window .oc-tok-k { color: var(--oc-syntax-keyword); }
+.oc-code-window .oc-tok-s { color: var(--oc-syntax-string); }
+.oc-code-window .oc-tok-c { color: var(--oc-syntax-constant); }
+.oc-code-window .oc-tok-f { color: var(--oc-syntax-function); }
+.oc-code-window .oc-tok-m { color: var(--oc-syntax-comment); }

package/dist/parts/site-layout.css

@@ -0,0 +1,69 @@
+/* File: packages/ui/src/parts/site-layout.css */
+/* Map: page hero -> section head / more -> action row -> group title -> band -> meta line */
+/* Page building blocks for a marketing or company site, on top of the showcase classes (.oc-section-pad, .oc-display):
+   the larger header of an inner page, a section head and a "see more" row, a row of buttons, a group title with a count,
+   a full-width band (for a stat strip) and a meta line (version · date). */
+
+/* Inner page header: more room on top, less below, and a larger display title. */
+.oc-section-pad--page { padding-block: clamp(4rem, 10vw, 7rem) clamp(2rem, 5vw, 3rem); }
+.oc-display--page {
+  margin-block-end: 1.25rem;
+  font-size: clamp(2.5rem, 6.5vw, 4.75rem);
+}
+
+/* Head of a section (eyebrow, title, lead) and the row with a "see all" link under the section. */
+.oc-section-head {
+  max-inline-size: 46rem;
+  margin-block-end: 3rem;
+}
+.oc-section-head--center {
+  margin-inline: auto;
+  text-align: center;
+}
+.oc-section-more { margin-block-start: 2.5rem; }
+
+/* Row of buttons under a text: wraps on a narrow screen. */
+.oc-actions {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 0.75rem;
+  margin-block-start: 2rem;
+}
+.oc-actions--center { justify-content: center; }
+.oc-actions--end { justify-content: flex-end; }
+.oc-actions--tight { margin-block-start: 1rem; }
+
+/* Title of a group of cards with the number of items in a pill: <h3 class="oc-group-title">Apps <span class="oc-group-title__count">8</span></h3> */
+.oc-group-title {
+  display: flex;
+  align-items: center;
+  gap: 0.75rem;
+  margin: 0 0 1.5rem;
+  font-size: 1.4rem;
+}
+.oc-group-title__count {
+  padding: 0.1rem 0.6rem;
+  border-radius: 999px;
+  background: var(--oc-surface-strong);
+  color: var(--oc-muted-foreground);
+  font-size: 0.85rem;
+  font-weight: 500;
+}
+
+/* Band over the full width of the page with a line above and below; the content stays in its .oc-container.
+   Put a .oc-stat-strip--plain in it for a row of key figures. */
+.oc-band {
+  border-block: 1px solid var(--oc-border);
+  background: var(--oc-band-bg, var(--oc-surface));
+}
+
+/* Meta line under a page title: version · date, author. */
+.oc-meta {
+  margin: 0 0 1rem;
+  color: var(--oc-subtle-foreground, var(--oc-muted-foreground));
+  font-size: 0.9rem;
+}
+
+/* Muted and subtle text from the theme tokens, for running text inside a panel, a spotlight or a split. */
+.oc-text-muted { color: var(--oc-muted-foreground); }
+.oc-text-subtle { color: var(--oc-subtle-foreground, var(--oc-muted-foreground)); }

package/dist/parts/site-panel.css

@@ -0,0 +1,29 @@
+/* File: packages/ui/src/parts/site-panel.css */
+/* Map: panel -> glow (start / end / both) */
+/* A framed panel on the page (a form, a call to action, a feature with a list): card background, strong border, large
+   radius, and room above it when a link jumps to it (#form). --glow adds a soft radial light in a corner:
+   --oc-panel-glow-color (brand 1) and --oc-panel-glow-at (top left); --glow-end puts it top right, --glow-both adds a
+   second light (brand 3) bottom right. */
+
+.oc-panel {
+  --oc-panel-glow-color: var(--oc-brand-1);
+  --oc-panel-glow-at: 0% 0%;
+  position: relative;
+  padding: var(--oc-panel-padding, clamp(1.5rem, 4vw, 2.5rem));
+  border: 1px solid var(--oc-border-strong);
+  border-radius: calc(var(--oc-radius-lg, 1.25rem) * 1.2);
+  background: var(--oc-card);
+  scroll-margin-top: var(--oc-scroll-offset, 6rem);
+}
+.oc-panel--glow {
+  background:
+    radial-gradient(30rem circle at var(--oc-panel-glow-at), oklch(from var(--oc-panel-glow-color) l c h / 0.12), transparent 60%),
+    var(--oc-card);
+}
+.oc-panel--glow-end { --oc-panel-glow-at: 100% 0%; }
+.oc-panel--glow-both {
+  background:
+    radial-gradient(40rem circle at 0% 0%, oklch(from var(--oc-brand-1) l c h / 0.18), transparent 55%),
+    radial-gradient(40rem circle at 100% 100%, oklch(from var(--oc-brand-3) l c h / 0.2), transparent 55%),
+    var(--oc-card);
+}

package/dist/parts/site-prose.css

@@ -134,3 +134,15 @@
 @media (prefers-reduced-motion: reduce) {
   .oc-prose :where(a) { transition: none; }
 }
+
+/* ---- Legal text (terms, privacy, cookies): narrower, muted body text in a slightly larger size, headings and strong
+   in the foreground, disc lists with a gap, links in brand 1. A table in an .oc-table-wrap scrolls on a phone. ---- */
+.oc-prose--legal { max-inline-size: 46rem; color: var(--oc-muted-foreground); font-size: 1.0625rem; }
+.oc-prose--legal :where(h2) { margin-block-start: 2.5rem; font-size: 1.35rem; color: var(--oc-foreground); }
+.oc-prose--legal :where(h3) { margin-block-start: 1.5rem; font-size: 1.05rem; color: var(--oc-foreground); }
+.oc-prose--legal :where(strong, b) { color: var(--oc-foreground); }
+.oc-prose--legal :where(ul) { display: grid; gap: 0.4rem; padding-inline-start: 1.25rem; list-style: disc; }
+.oc-prose--legal :where(ul > li) { margin-block-start: 0; }
+.oc-prose--legal :where(a) { color: var(--oc-brand-1); font-weight: inherit; text-decoration-color: currentColor; text-underline-offset: 3px; }
+.oc-prose--legal :where(a:hover) { color: var(--oc-foreground); }
+.oc-prose--legal :where(table) { font-size: 0.93rem; }

package/dist/parts/utility-hover.css

@@ -0,0 +1,44 @@
+/* File: packages/ui/src/parts/utility-hover.css */
+/* Map: smooth timing -> lift / grow / glow / none -> steady hover area -> reduced motion */
+/* Hover effect of a card, chosen with one class on the card (any card: .oc-card, product, feature, link, price, project …):
+     .oc-hover-lift   moves up (--oc-hover-lift, 6px) with a soft shadow; what a product card does by default
+     .oc-hover-grow   grows a little in place (--oc-hover-scale, 1.02)
+     .oc-hover-glow   stays in place, with a glow in the accent color
+     .oc-hover-none   no movement (also turns off the default lift of a product or price card)
+   They share one smooth curve: --oc-hover-duration (0.45s) and --oc-hover-ease. This file loads after the cards, so the class wins. */
+
+:is(.oc-hover-lift, .oc-hover-grow, .oc-hover-glow, .oc-product-card) {
+  transition:
+    translate var(--oc-hover-duration, 0.45s) var(--oc-hover-ease, cubic-bezier(0.22, 1, 0.36, 1)),
+    scale var(--oc-hover-duration, 0.45s) var(--oc-hover-ease, cubic-bezier(0.22, 1, 0.36, 1)),
+    box-shadow var(--oc-hover-duration, 0.45s) var(--oc-hover-ease, cubic-bezier(0.22, 1, 0.36, 1)),
+    border-color 0.35s,
+    background-color 0.35s,
+    --oc-glow 0.35s;
+}
+.oc-product-card:hover { translate: 0 calc(-1 * var(--oc-hover-lift, 6px)); }
+.oc-hover-lift:hover {
+  translate: 0 calc(-1 * var(--oc-hover-lift, 6px));
+  box-shadow: 0 1.25rem 2.5rem -1.25rem oklch(from var(--color-black-60) l c h / 0.35);
+}
+.oc-hover-grow:hover { translate: none; scale: var(--oc-hover-scale, 1.02); }
+.oc-hover-glow:hover {
+  translate: none;
+  box-shadow:
+    0 0 0 1px oklch(from var(--oc-accent-from, var(--oc-primary)) l c h / 0.4),
+    0 0.75rem 2.5rem -0.75rem oklch(from var(--oc-accent-from, var(--oc-primary)) l c h / 0.5);
+}
+.oc-hover-none:hover { translate: none; scale: none; }
+
+/* While a card moves up, the strip it leaves keeps the hover, so a mouse at the bottom edge does not make it bounce. */
+:where(.oc-hover-lift) { position: relative; }
+:is(.oc-hover-lift, .oc-product-card:not([class*="oc-hover-"])):hover::before {
+  content: "";
+  position: absolute;
+  inset: 0 0 calc(-1 * var(--oc-hover-lift, 6px) - 2px);
+  z-index: -1;
+}
+
+@media (prefers-reduced-motion: reduce) {
+  :is(.oc-hover-lift, .oc-hover-grow, .oc-product-card):hover { translate: none; scale: none; }
+}

package/dist/showcase.css

@@ -54,7 +54,8 @@
   /* border-box: the gradient also runs under the transparent 1px border of .oc-btn; from the padding box it would
      repeat in that border and show a thin stripe of the other end's color on both sides. */
   background: linear-gradient(100deg, var(--oc-accent-from), var(--oc-accent-to)) border-box;
-  color: var(--color-white-50);
+  /* --oc-btn-gradient-ink: dark text on a light accent (set it with the accent). */
+  color: var(--oc-btn-gradient-ink, var(--color-white-50));
   box-shadow: 0 10px 30px -10px var(--oc-accent-to);
   transition: transform 0.2s var(--oc-ease-out), box-shadow 0.2s;
 }
@@ -81,7 +82,8 @@
 
 /* Backdrop: slowly drifting color blobs + fine grid behind the page.
    <div class="oc-backdrop" aria-hidden="true"><i class="oc-backdrop__blob"></i><i class="oc-backdrop__grid"></i></div>
-   .oc-backdrop--local keeps it inside a positioned section instead of the viewport. */
+   .oc-backdrop--local keeps it inside a positioned section instead of the viewport.
+   A theme sets the colors: --oc-backdrop-1, -2, -3 (the blobs), --oc-backdrop-3-opacity and --oc-backdrop-grid (the lines). */
 .oc-backdrop {
   position: fixed;
   inset: 0;
@@ -102,24 +104,27 @@
   opacity: var(--oc-backdrop-opacity, 0.35);
   animation: oc-drift 24s ease-in-out infinite alternate;
 }
-.oc-backdrop::before { background: var(--color-blue-40); inset-block-start: -18rem; inset-inline-start: -12rem; }
-.oc-backdrop::after { background: var(--color-purple-30); inset-block-start: 10rem; inset-inline-end: -16rem; animation-delay: -8s; }
-.oc-backdrop > .oc-backdrop__blob { background: var(--color-teal-40); inset-block-end: -20rem; inset-inline-start: 30%; animation-delay: -16s; opacity: calc(var(--oc-backdrop-opacity, 0.35) * 0.6); }
+.oc-backdrop::before { background: var(--oc-backdrop-1, var(--color-blue-40)); inset-block-start: -18rem; inset-inline-start: -12rem; }
+.oc-backdrop::after { background: var(--oc-backdrop-2, var(--color-purple-30)); inset-block-start: 10rem; inset-inline-end: -16rem; animation-delay: -8s; }
+.oc-backdrop > .oc-backdrop__blob { background: var(--oc-backdrop-3, var(--color-teal-40)); inset-block-end: -20rem; inset-inline-start: 30%; animation-delay: -16s; opacity: var(--oc-backdrop-3-opacity, calc(var(--oc-backdrop-opacity, 0.35) * 0.6)); }
 .oc-backdrop > .oc-backdrop__grid {
   position: absolute;
   inset: 0;
   background-image:
-    linear-gradient(oklch(from var(--oc-foreground) l c h / 0.05) 1px, transparent 1px),
-    linear-gradient(90deg, oklch(from var(--oc-foreground) l c h / 0.05) 1px, transparent 1px);
+    linear-gradient(var(--oc-backdrop-grid, oklch(from var(--oc-foreground) l c h / 0.05)) 1px, transparent 1px),
+    linear-gradient(90deg, var(--oc-backdrop-grid, oklch(from var(--oc-foreground) l c h / 0.05)) 1px, transparent 1px);
   background-size: 64px 64px;
   mask-image: radial-gradient(ellipse at 50% 0%, black 20%, transparent 70%);
 }
 @keyframes oc-drift { to { transform: translate(6rem, 4rem) scale(1.15); } }
 
 /* Container, section spacing and display headings */
-.oc-container { inline-size: min(100% - 2.5rem, var(--oc-container, 1200px)); margin-inline: auto; }
+/* --oc-container is the width, --oc-container-gutter the room on each side on a narrower screen (1.25rem). */
+.oc-container { inline-size: min(100% - 2 * var(--oc-container-gutter, 1.25rem), var(--oc-container, 1200px)); margin-inline: auto; }
 .oc-section-pad { padding-block: clamp(4rem, 9vw, 7rem); }
 .oc-section-pad--tight { padding-block: clamp(2rem, 5vw, 3.5rem); }
+/* The hero of a home page: a little less room on top and below than a section. */
+.oc-section-pad--hero { padding-block: clamp(3.5rem, 9vw, 7rem) clamp(3rem, 6vw, 5rem); }
 .oc-display {
   margin: 0 0 1.5rem;
   font-size: clamp(2.6rem, 5.6vw, 4.6rem);
@@ -129,8 +134,28 @@
   text-wrap: balance;
 }
 .oc-display--md { font-size: clamp(1.9rem, 4vw, 3rem); }
+.oc-display--sm { font-size: clamp(1.5rem, 3vw, 2.1rem); }
 .oc-lead { margin: 0 0 1rem; color: var(--oc-muted-foreground); font-size: 1.15rem; line-height: 1.65; max-inline-size: 42rem; text-wrap: pretty; }
-.oc-split { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 24rem), 1fr)); gap: 3rem; align-items: center; }
+/* Larger and narrower, for a home hero. */
+.oc-lead--lg { font-size: 1.2rem; max-inline-size: 36rem; }
+.oc-split { display: grid; grid-template-columns: var(--oc-split-cols, repeat(auto-fit, minmax(min(100%, 24rem), 1fr))); gap: var(--oc-split-gap, 3rem); align-items: center; }
+/* Ratio presets (one column up to 960px): --lead makes the text column wider, --media the image column.
+   Your own ratio: set --oc-split-cols in a class (and to 1fr in a media query for small screens). */
+.oc-split--lead { --oc-split-cols: 1.25fr 1fr; }
+.oc-split--media { --oc-split-cols: 1fr 1.15fr; }
+.oc-split__media { display: grid; place-items: center; }
+/* Columns aligned at the top (a fact list next to a long text). */
+.oc-split--top { align-items: start; }
+/* --oc-split-cols-wide: your own ratio that only applies above 960px, so the split still stacks on a phone. */
+@media (min-width: 961px) {
+  .oc-split { grid-template-columns: var(--oc-split-cols-wide, var(--oc-split-cols, repeat(auto-fit, minmax(min(100%, 24rem), 1fr)))); }
+}
+@media (max-width: 960px) {
+  .oc-split--lead, .oc-split--media { --oc-split-cols: 1fr; }
+  /* The image (a product mark, a screenshot) comes first on a small screen, aligned at the start, and an xl tile shrinks. */
+  .oc-split__media { order: -1; justify-items: start; }
+  .oc-split__media .oc-icon-tile--xl { --oc-tile-size: 7rem; }
+}
 
 /* Code window: editor frame with traffic lights and a file name. It follows the page theme: a light frame and light
    syntax colors in light mode, the Omnia Dark editor colors in dark mode. --dark keeps it dark on a light page (the
@@ -218,7 +243,12 @@
 @keyframes oc-float { 50% { translate: 0 -12px; } }
 
 /* Product / feature card with hover lift and accent glow */
-.oc-card-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, var(--oc-card-min, 17rem)), 1fr)); gap: 1.25rem; }
+.oc-card-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, var(--oc-card-min, 17rem)), 1fr)); gap: var(--oc-card-gap, 1.25rem); }
+/* Wide cards (projects, case studies): from 32rem, three in a row on a wide screen. */
+.oc-card-grid--wide { --oc-card-min: 32rem; --oc-card-gap: 1.5rem; }
+/* --fit: the cards stretch over the full width when there are fewer than fit in a row (auto-fit instead of auto-fill). */
+.oc-card-grid--fit { grid-template-columns: repeat(auto-fit, minmax(min(100%, var(--oc-card-min, 17rem)), 1fr)); }
+@media (min-width: 1280px) { .oc-card-grid--wide { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
 .oc-product-card {
   position: relative;
   display: flex;
@@ -232,7 +262,7 @@
     var(--oc-surface);
   color: var(--oc-foreground);
   text-decoration: none;
-  transition: transform 0.35s var(--oc-ease-out), border-color 0.35s, --oc-glow 0.35s;
+  transition: translate 0.35s var(--oc-ease-out), border-color 0.35s, --oc-glow 0.35s;
 }
 @property --oc-glow {
   syntax: "<number>";
@@ -241,7 +271,8 @@
 }
 .oc-product-card:hover {
   --oc-glow: 0.22;
-  transform: translateY(-6px);
+  /* The lift uses translate; a fly-in (.oc-reveal--fly) animates the transform, so both keep working. */
+  translate: 0 calc(-1 * var(--oc-hover-lift, 6px));
   border-color: oklch(from var(--oc-accent-from) l c h / 0.55);
 }
 .oc-product-card__top { display: flex; justify-content: space-between; align-items: flex-start; margin-block-end: 0.75rem; }
@@ -297,9 +328,17 @@
 }
 .oc-stat-strip__item { padding: 2rem 1.5rem; border-inline-start: 1px solid var(--oc-border); }
 .oc-stat-strip__item:first-child { border-inline-start: 0; }
-.oc-stat-strip__value { font-size: clamp(2.2rem, 4vw, 3rem); font-weight: 700; line-height: 1.1; }
+.oc-stat-strip__value { font-family: var(--oc-font-display, inherit); font-size: clamp(2.2rem, 4vw, 3rem); font-weight: 700; line-height: 1.1; }
 .oc-stat-strip__suffix { color: var(--oc-brand-1); }
 .oc-stat-strip__label { display: block; color: var(--oc-muted-foreground); font-size: 0.92rem; }
+/* Plain: no lines and no background of its own, for a strip inside an .oc-band (full width) or a card. */
+.oc-stat-strip--plain { border-block: 0; background: none; }
+/* Four figures on a narrower screen: two rows of two instead of three and one. */
+@media (max-width: 960px) {
+  .oc-stat-strip:has(> .oc-stat-strip__item:nth-child(4):last-child) { grid-template-columns: 1fr 1fr; }
+  .oc-stat-strip:has(> .oc-stat-strip__item:nth-child(4):last-child) > .oc-stat-strip__item:nth-child(3) { border-inline-start: 0; }
+  .oc-stat-strip:has(> .oc-stat-strip__item:nth-child(4):last-child) > .oc-stat-strip__item:nth-child(n + 3) { border-block-start: 1px solid var(--oc-border); }
+}
 
 /* Spotlight: large highlighted panel with copy + module list */
 .oc-spotlight {
@@ -317,8 +356,12 @@
 }
 .oc-spotlight__title { display: flex; align-items: center; gap: 1rem; margin: 1.25rem 0 0.5rem; font-size: clamp(2.2rem, 5vw, 3.5rem); line-height: 1.1; }
 .oc-spotlight__tagline { color: light-dark(var(--oc-accent-from), oklch(from var(--oc-accent-from) max(l, 0.72) c h)); font-size: 1.2rem; font-weight: 600; }
+/* --oc-spotlight-cols: your own ratio above 960px (copy | modules); on a smaller screen the spotlight stacks. */
+@media (min-width: 961px) {
+  .oc-spotlight { grid-template-columns: var(--oc-spotlight-cols, repeat(auto-fit, minmax(min(100%, 22rem), 1fr))); }
+}
 .oc-spotlight__modules { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 12rem), 1fr)); gap: 0.75rem; margin: 0; padding: 0; list-style: none; }
-.oc-spotlight__modules > li { display: flex; align-items: center; gap: 0.75rem; padding: 0.9rem; border: 1px solid var(--oc-border); border-radius: var(--oc-radius-md); background: var(--oc-surface); font-size: 0.95rem; }
+.oc-spotlight__modules > li { display: flex; align-items: center; gap: 0.75rem; padding: 0.9rem; border: 1px solid var(--oc-border); border-radius: var(--oc-radius-md); background: var(--oc-spotlight-module-bg, var(--oc-surface)); font-size: 0.95rem; }
 
 /* Steps: numbered process with a gradient tick (numbers come from a CSS counter) */
 .oc-steps { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 14rem), 1fr)); gap: 1.25rem; margin: 0; padding: 0; list-style: none; counter-reset: oc-step; }
@@ -351,6 +394,9 @@
 /* Tag list (tech stack) and check list */
 .oc-tag-list { display: flex; flex-wrap: wrap; gap: 0.6rem; margin: 0; padding: 0; list-style: none; }
 .oc-tag-list > li { padding: 0.55rem 1.1rem; border: 1px solid oklch(from var(--oc-accent-from) l c h / 0.35); border-radius: 999px; background: oklch(from var(--oc-accent-from) l c h / 0.1); font-family: var(--oc-font-mono); font-size: 0.88rem; }
+/* Neutral chips (no accent color) and large chips in the display font, e.g. a strip of brand names. */
+.oc-tag-list--neutral > li { border-color: var(--oc-border); background: var(--oc-surface); color: var(--oc-foreground); }
+.oc-tag-list--lg > li { padding: 0.45rem 1rem; font-family: var(--oc-font-display, inherit); font-size: 1rem; font-weight: 700; letter-spacing: 0.02em; }
 .oc-check-list { display: grid; gap: 0.5rem; margin: 1.1rem 0 0; padding: 0; list-style: none; font-size: 0.93rem; }
 .oc-check-list > li { display: flex; gap: 0.5rem; align-items: baseline; }
 .oc-check-list > li::before { content: "✓"; color: var(--oc-brand-1); font-weight: 700; }
@@ -385,6 +431,8 @@
 .oc-site-header__nav a:not(.oc-btn):hover,
 .oc-site-header__nav a[aria-current="page"] { color: var(--oc-foreground); }
 .oc-site-header__toggle { display: none; padding: 0.5rem 0.7rem; border: 1px solid var(--oc-border); border-radius: var(--oc-radius-md); background: var(--oc-surface); color: var(--oc-foreground); cursor: pointer; }
+/* The icon in the menu button is a block, so the button is as tall as a line of text (no inline gap under it). */
+.oc-site-header__toggle :is(svg, img, iconify-icon, .oc-icon) { display: block; }
 @media (min-width: 861px) {
   /* Desktop: the popover nav is always visible in the header bar. */
   .oc-site-header__nav[popover] { display: flex; }
@@ -409,6 +457,8 @@
     backdrop-filter: blur(16px);
   }
   .oc-site-header__nav[popover] a:not(.oc-btn) { padding: 0.75rem 0; font-size: 1.1rem; }
+  /* The call to action (.oc-site-header__cta, a button) gets room above it in the open menu. */
+  .oc-site-header__cta { margin-block-start: 0.75rem; }
 }
 
 /* Site footer: brand column + link columns + bottom bar */
@@ -416,21 +466,33 @@
   margin-block-start: 4rem;
   padding-block-start: 4rem;
   border-block-start: 1px solid var(--oc-border);
-  background: linear-gradient(to bottom, transparent, var(--oc-surface-strong));
+  background: var(--oc-footer-bg, linear-gradient(to bottom, transparent, var(--oc-surface-strong)));
   color: var(--oc-muted-foreground);
   font-size: 0.95rem;
+  container-type: inline-size;
 }
-.oc-site-footer__grid { display: grid; grid-template-columns: 1.6fr repeat(3, 1fr); gap: 2.5rem; }
+/* Columns: --oc-footer-cols (about + 3 link columns). Footer narrower than 66rem (about a 1060px screen):
+   --oc-footer-cols-md columns (3) with the about column over the full width; narrower than 54rem: two columns.
+   Container queries on the footer, so a footer in a narrow column or a preview follows its own width. */
+.oc-site-footer__grid { display: grid; grid-template-columns: var(--oc-footer-cols, 1.6fr repeat(3, 1fr)); gap: 2.5rem; }
 .oc-site-footer__about p { margin-block: 1rem 0; max-inline-size: 22rem; }
 .oc-site-footer__title { margin: 0 0 1rem; color: var(--oc-foreground); font-size: 0.95rem; font-weight: 700; }
 .oc-site-footer__list { display: flex; flex-direction: column; gap: 0.5rem; margin: 0; padding: 0; list-style: none; font-style: normal; }
 .oc-site-footer a { color: inherit; text-decoration: none; }
 .oc-site-footer a:hover { color: var(--oc-foreground); }
-.oc-site-footer__bottom { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 1rem; margin-block-start: 3rem; padding-block: 1.5rem; border-block-start: 1px solid var(--oc-border); font-size: 0.85rem; }
-@media (max-width: 860px) {
-  .oc-site-footer__grid { grid-template-columns: 1fr 1fr; }
+.oc-site-footer__bottom { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 1rem; margin-block-start: 3rem; padding-block: 1.5rem; border-block-start: 1px solid var(--oc-border); color: var(--oc-footer-bottom-color, inherit); font-size: 0.85rem; }
+/* A second title further down in a column (e.g. "Tools" under the projects). */
+.oc-site-footer__subtitle { margin-block-start: 1.75rem; }
+/* Legal links in the bottom bar (Terms · Privacy · Cookies) and the build number after them. */
+.oc-site-footer__legal { display: flex; flex-wrap: wrap; gap: 0.5rem 1.25rem; margin: 0; padding: 0; list-style: none; }
+.oc-site-footer__build { opacity: 0.7; font-variant-numeric: tabular-nums; }
+@container (max-width: 66rem) {
+  .oc-site-footer__grid { grid-template-columns: repeat(var(--oc-footer-cols-md, 3), minmax(0, 1fr)); }
   .oc-site-footer__about { grid-column: 1 / -1; }
 }
+@container (max-width: 54rem) {
+  .oc-site-footer__grid { grid-template-columns: 1fr 1fr; }
+}
 
 /* Reveal on scroll: elements slide in when they enter the viewport (scroll-driven, no JS; visible without support) */
 @supports (animation-timeline: view()) {

package/manifest.json

@@ -1271,6 +1271,78 @@
       "requires": [
         "@birdycom/omniaui"
       ]
+    },
+    {
+      "name": "panel",
+      "file": "snippets/panel.html",
+      "description": "A framed panel on the page for a form, a call to action or a feature: card background, strong border, large radius and an optional soft glow in a corner",
+      "requires": [
+        "@birdycom/omniaui"
+      ]
+    },
+    {
+      "name": "result",
+      "file": "snippets/result.html",
+      "description": "The outcome of an action in the place where the form was: an icon tile, a title, a short text and a button such as Send another message",
+      "requires": [
+        "@birdycom/omniaui"
+      ]
+    },
+    {
+      "name": "brand-mark",
+      "file": "snippets/brand-mark.html",
+      "description": "A logo from an icon and text: the mark with a glow in the brand color, a word mark with one part in the brand gradient and a small tagline",
+      "requires": [
+        "@birdycom/omniaui"
+      ]
+    },
+    {
+      "name": "page-sections",
+      "file": "snippets/page-sections.html",
+      "description": "Building blocks for the pages of a company site: the header of an inner page, a section head, a row of buttons, a group title with a count, a full-width band and a meta line",
+      "requires": [
+        "@birdycom/omniaui"
+      ]
+    },
+    {
+      "name": "feature-card",
+      "file": "snippets/feature-card.html",
+      "description": "Cards for services and features (icon tile, title, text) and cards that are links, in a grid whose column width you set",
+      "requires": [
+        "@birdycom/omniaui"
+      ]
+    },
+    {
+      "name": "icon-list",
+      "file": "snippets/icon-list.html",
+      "description": "Lists for a company site: rows with an icon in a frame, points with an icon tile, a title and a text, and a list with markers in the accent color",
+      "requires": [
+        "@birdycom/omniaui"
+      ]
+    },
+    {
+      "name": "shot-grid",
+      "file": "snippets/shot-grid.html",
+      "description": "A grid of screenshots with a caption that open in the lightbox, and a browser frame with a glow in the accent color and a product mark on it",
+      "requires": [
+        "@birdycom/omniaui"
+      ]
+    },
+    {
+      "name": "fly-in",
+      "file": "snippets/fly-in.html",
+      "description": "Cards that fly in from the middle of their row when they scroll into view, with a hover lift that keeps working, and a New badge in a product card",
+      "requires": [
+        "@birdycom/omniaui"
+      ]
+    },
+    {
+      "name": "hover-effects",
+      "file": "snippets/hover-effects.html",
+      "description": "Choose how a card reacts to the mouse: lift, grow, glow or stay still, with one smooth curve for all of them",
+      "requires": [
+        "@birdycom/omniaui"
+      ]
     }
   ]
 }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@birdycom/omniaui",
-  "version": "0.12.6",
+  "version": "0.13.0",
   "description": "OmniaUI components: CSS-first UI built on native HTML (dialog, popover, details) with light-dark() theming — no JavaScript required. Includes the omniaui CLI (add/list).",
   "type": "module",
   "license": "MIT",
@@ -33,6 +33,8 @@
     "./barcode.js": "./dist/barcode.js",
     "./form-extras.js": "./dist/form-extras.js",
     "./lazy.js": "./dist/lazy.js",
+    "./contact-form.js": "./dist/contact-form.js",
+    "./fly.js": "./dist/fly.js",
     "./manifest.json": "./manifest.json",
     "./package.json": "./package.json"
   },
@@ -60,7 +62,7 @@
     "omniaui": "./bin/omniaui.mjs"
   },
   "peerDependencies": {
-    "@birdycom/omniacss": "^0.12.6"
+    "@birdycom/omniacss": "^0.13.0"
   },
   "peerDependenciesMeta": {
     "@birdycom/omniacss": {

package/snippets/brand-mark.html

@@ -0,0 +1,41 @@
+<!-- OmniaUI component: brand-mark - A logo from an icon and text: the mark with a glow in the brand color, a word mark with one part in the brand gradient and a small tagline. Needs @birdycom/omniaui CSS.
+     File: packages/ui/snippets/brand-mark.html | Map: in the header -> sizes.
+     Class API (modifiers are extra classes / attributes on the same element):
+       .oc-brand-mark: The logo: a link or a span with the icon and the text side by side.
+       .oc-brand-mark__icon: The mark (svg or img), 2.25rem, with a drop shadow in brand 1.
+       .oc-brand-mark__text: Word mark and tagline stacked.
+       .oc-brand-mark__word: The name: --oc-font-display, 800, tight letter spacing.
+       .oc-brand-mark__accent: The part of the name in the gradient brand 1 → brand 2.
+       .oc-brand-mark__tagline: Mono, uppercase, wide letter spacing, muted.
+       .oc-brand-mark--sm / --lg: Smaller (footer) or larger (hero, ecosystem map). The sizes are tokens: --oc-brand-mark-icon, --oc-brand-mark-word, --oc-brand-mark-tagline.
+-->
+<a class="oc-brand-mark" href="#home" aria-label="Company 1, home">
+  <svg class="oc-brand-mark__icon" viewBox="0 0 40 40" aria-hidden="true"><defs><linearGradient id="oc-brand-grad" x1="0" y1="0" x2="1" y2="1"><stop offset="0" stop-color="var(--oc-brand-1)"/><stop offset="1" stop-color="var(--oc-brand-2)"/></linearGradient></defs><rect width="40" height="40" rx="10" fill="url(#oc-brand-grad)"/><path d="M12 27V13h9a5 5 0 0 1 0 10h-5v4z" fill="var(--oc-background)"/></svg>
+  <span class="oc-brand-mark__text">
+    <span class="oc-brand-mark__word">Company<span class="oc-brand-mark__accent">1</span></span>
+    <span class="oc-brand-mark__tagline">Software &amp; IT</span>
+  </span>
+</a>
+<div style="display:flex;flex-wrap:wrap;align-items:center;gap:2.5rem">
+<a class="oc-brand-mark oc-brand-mark--sm" href="#home" aria-label="Company 1, home">
+  <svg class="oc-brand-mark__icon" viewBox="0 0 40 40" aria-hidden="true"><defs><linearGradient id="oc-brand-grad-sm" x1="0" y1="0" x2="1" y2="1"><stop offset="0" stop-color="var(--oc-brand-1)"/><stop offset="1" stop-color="var(--oc-brand-2)"/></linearGradient></defs><rect width="40" height="40" rx="10" fill="url(#oc-brand-grad-sm)"/><path d="M12 27V13h9a5 5 0 0 1 0 10h-5v4z" fill="var(--oc-background)"/></svg>
+  <span class="oc-brand-mark__text">
+    <span class="oc-brand-mark__word">Company<span class="oc-brand-mark__accent">1</span></span>
+    <span class="oc-brand-mark__tagline">Software &amp; IT</span>
+  </span>
+</a>
+<a class="oc-brand-mark" href="#home" aria-label="Company 1, home">
+  <svg class="oc-brand-mark__icon" viewBox="0 0 40 40" aria-hidden="true"><defs><linearGradient id="oc-brand-grad-md" x1="0" y1="0" x2="1" y2="1"><stop offset="0" stop-color="var(--oc-brand-1)"/><stop offset="1" stop-color="var(--oc-brand-2)"/></linearGradient></defs><rect width="40" height="40" rx="10" fill="url(#oc-brand-grad-md)"/><path d="M12 27V13h9a5 5 0 0 1 0 10h-5v4z" fill="var(--oc-background)"/></svg>
+  <span class="oc-brand-mark__text">
+    <span class="oc-brand-mark__word">Company<span class="oc-brand-mark__accent">1</span></span>
+    <span class="oc-brand-mark__tagline">Software &amp; IT</span>
+  </span>
+</a>
+<a class="oc-brand-mark oc-brand-mark--lg" href="#home" aria-label="Company 1, home">
+  <svg class="oc-brand-mark__icon" viewBox="0 0 40 40" aria-hidden="true"><defs><linearGradient id="oc-brand-grad-lg" x1="0" y1="0" x2="1" y2="1"><stop offset="0" stop-color="var(--oc-brand-1)"/><stop offset="1" stop-color="var(--oc-brand-2)"/></linearGradient></defs><rect width="40" height="40" rx="10" fill="url(#oc-brand-grad-lg)"/><path d="M12 27V13h9a5 5 0 0 1 0 10h-5v4z" fill="var(--oc-background)"/></svg>
+  <span class="oc-brand-mark__text">
+    <span class="oc-brand-mark__word">Company<span class="oc-brand-mark__accent">1</span></span>
+    <span class="oc-brand-mark__tagline">Software &amp; IT</span>
+  </span>
+</a>
+</div>

package/snippets/feature-card.html

@@ -0,0 +1,52 @@
+<!-- OmniaUI component: feature-card - Cards for services and features (icon tile, title, text) and cards that are links, in a grid whose column width you set. Needs @birdycom/omniaui CSS.
+     File: packages/ui/snippets/feature-card.html | Map: services -> link cards -> brand chips.
+     Class API (modifiers are extra classes / attributes on the same element):
+       .oc-feature-card: Card: tile, title, text; surface background, the border turns strong on hover.
+       .oc-feature-card__title / __text: Title (display font, 1.2rem) and muted text.
+       .oc-link-card: A card that is an <a>: __title, __text, __more (arrow moves on hover); the border takes the accent color on hover (.oc-accent--violet …).
+       .oc-card-grid: Auto-fill grid; --oc-card-min is the minimum column width (17rem), --oc-card-gap the gap.
+       .oc-card-grid--wide: Wide cards (projects): from 32rem, three in a row from 1280px.
+       .oc-tag-list--neutral / --lg: Chips without the accent color / larger chips in the display font (a strip of brand names).
+-->
+<div class="oc-card-grid" style="--oc-card-min: 15.5rem; inline-size:100%">
+  <article class="oc-feature-card">
+    <span class="oc-icon-tile oc-icon-tile--sm" aria-hidden="true"><iconify-icon icon="mdi:application-outline"></iconify-icon></span>
+    <h3 class="oc-feature-card__title">Business apps</h3>
+    <p class="oc-feature-card__text">Software built around how your company works.</p>
+  </article>
+  <article class="oc-feature-card">
+    <span class="oc-icon-tile oc-icon-tile--sm" aria-hidden="true"><iconify-icon icon="mdi:web"></iconify-icon></span>
+    <h3 class="oc-feature-card__title">Websites</h3>
+    <p class="oc-feature-card__text">Fast sites you can edit yourself.</p>
+  </article>
+  <article class="oc-feature-card">
+    <span class="oc-icon-tile oc-icon-tile--sm" aria-hidden="true"><iconify-icon icon="mdi:laptop"></iconify-icon></span>
+    <h3 class="oc-feature-card__title">Hardware</h3>
+    <p class="oc-feature-card__text">Computers, screens and networks, installed on site.</p>
+  </article>
+  <article class="oc-feature-card">
+    <span class="oc-icon-tile oc-icon-tile--sm" aria-hidden="true"><iconify-icon icon="mdi:headset"></iconify-icon></span>
+    <h3 class="oc-feature-card__title">Support</h3>
+    <p class="oc-feature-card__text">One point of contact for every question.</p>
+  </article>
+</div>
+<div class="oc-card-grid" style="--oc-card-min: 16rem; inline-size:100%">
+  <a class="oc-link-card oc-accent--violet" href="#agent-1">
+    <span class="oc-icon-tile oc-icon-tile--sm oc-accent--violet" aria-hidden="true"><iconify-icon icon="mdi:robot-outline"></iconify-icon></span>
+    <span class="oc-link-card__title">Agent 1</span>
+    <span class="oc-link-card__text">Answers questions about your own documents.</span>
+    <span class="oc-link-card__more">Read more</span>
+  </a>
+  <a class="oc-link-card oc-accent--violet" href="#agent-2">
+    <span class="oc-icon-tile oc-icon-tile--sm oc-accent--violet" aria-hidden="true"><iconify-icon icon="mdi:file-search-outline"></iconify-icon></span>
+    <span class="oc-link-card__title">Agent 2</span>
+    <span class="oc-link-card__text">Reads incoming invoices and fills in the booking.</span>
+    <span class="oc-link-card__more">Read more</span>
+  </a>
+</div>
+<div style="display:grid;gap:1rem">
+  <ul class="oc-tag-list oc-tag-list--neutral oc-tag-list--lg" aria-label="Brands we work with">
+    <li>Brand 1</li><li>Brand 2</li><li>Brand 3</li><li>Brand 4</li><li>Brand 5</li>
+  </ul>
+  <p class="oc-note" style="margin:0">Other brands on request.</p>
+</div>