@birdycom/omniaui 0.12.5 → 0.13.0

package/dist/parts/media-lightbox.css

@@ -97,6 +97,10 @@
 .oc-lightbox__nav { grid-row: 1; justify-self: center; }
 .oc-lightbox__nav--prev { grid-column: 1; }
 .oc-lightbox__nav--next { grid-column: 3; }
+.oc-lightbox__close :is(svg, iconify-icon, .oc-icon) { inline-size: 1.1rem; block-size: 1.1rem; font-size: 1.1rem; }
+/* A <picture> (animated WebP with a still image for "reduce motion") gets the frame; the image fits in it. */
+.oc-lightbox__media > picture { display: grid; overflow: hidden; }
+.oc-lightbox__media > picture > img { max-inline-size: 100%; max-block-size: calc(100dvh - 9rem); object-fit: contain; }
 
 /* ---- Caption with the "2 / 5" counter ---- */
 .oc-lightbox__caption {

package/dist/parts/media-message-thread.css

@@ -2,7 +2,7 @@
    people, status, actions) -> wallpaper (masked doodles in a token color) -> scroll area (starts at the bottom)
    -> composer footer -> sending overlay (aria-busy) -> reduced motion
    Message thread: one conversation. The scroll area uses flex-direction: column-reverse, so it opens at the newest message
-   and stays there when messages are added, without a script. Based on the question chat of the Korrekt app. */
+   and stays there when messages are added, without a script. */
 
 .oc-message-thread {
   --oc-message-thread-height: 32rem;

package/dist/parts/media-message.css

@@ -2,7 +2,7 @@
    -> grouping (:has) -> hover actions -> date divider + system line -> reduced motion
    Message: one chat bubble. Incoming on the left with the avatar, outgoing on the right in the primary tint.
    Consecutive messages of one sender group by themselves: the avatar shows once (on the last one), the name once (on the
-   first one). Based on the question chat of the Korrekt app. */
+   first one). */
 
 .oc-message-list {
   --oc-message-in: var(--oc-card);

package/dist/parts/nav-topbar-variants.css

@@ -0,0 +1,96 @@
+/* File: packages/ui/src/parts/nav-topbar-variants.css
+   Map: brand (logo tile, room before the menu) -> centred menu -> plain links -> dark / brand colour -> floating pill
+   -> strip above the bar -> footer bar (split, links, dark)
+   Variants of the site header (.oc-topbar in docs-ui.css) and the footer bar (.oc-footerbar). Colours are tokens. */
+
+/* Brand: a logo tile and the name, always with room before the menu. */
+.oc-topbar-brand { display: inline-flex; align-items: center; gap: 0.55rem; margin-inline-end: 1rem; }
+.oc-topbar-logo {
+  display: grid;
+  place-items: center;
+  flex: none;
+  inline-size: 1.85rem;
+  block-size: 1.85rem;
+  border-radius: 9px;
+  color: var(--color-white-50);
+  background: linear-gradient(135deg, var(--oc-accent-from, var(--oc-primary)), var(--oc-accent-to, var(--oc-primary)));
+  font-size: 0.95rem;
+}
+.oc-topbar-logo > :is(svg, iconify-icon) { inline-size: 1.1rem; block-size: 1.1rem; font-size: 1.1rem; }
+.oc-topbar-nav { min-inline-size: 0; }
+.oc-topbar-actions .oc-btn { white-space: nowrap; }
+
+/* Centred menu: brand left, menu in the middle, actions right (from 761px; smaller screens keep the burger). */
+@media (min-width: 761px) {
+  .oc-topbar--center { display: grid; grid-template-columns: 1fr auto 1fr; }
+  .oc-topbar--center .oc-topbar-brand { justify-self: start; }
+  .oc-topbar--center .oc-topbar-actions { justify-self: end; }
+}
+
+/* Plain links: no pill frames, the current page underlined. */
+.oc-topbar--plain .oc-navmenu--site .oc-navmenu-link {
+  border-color: transparent;
+  border-radius: 0;
+  background: none;
+  color: var(--oc-muted-foreground);
+  box-shadow: inset 0 -2px 0 transparent;
+}
+.oc-topbar--plain .oc-navmenu--site .oc-navmenu-link:hover { color: var(--oc-foreground); border-color: transparent; background: none; }
+.oc-topbar--plain .oc-navmenu--site .oc-navmenu-link[aria-current="page"] {
+  color: var(--oc-foreground);
+  border-color: transparent;
+  background: none;
+  box-shadow: inset 0 -2px 0 var(--oc-primary);
+}
+
+/* Dark bar and brand-colour bar: light text, links as soft pills. */
+.oc-topbar:is(.oc-topbar--dark, .oc-topbar--brand) { color: var(--color-white-50); border-block-end-color: transparent; }
+.oc-topbar.oc-topbar--dark { background: var(--oc-dark-band, var(--color-duskblue-95)); }
+.oc-topbar--brand { background: linear-gradient(100deg, var(--oc-accent-from, var(--oc-primary)), var(--oc-accent-to, var(--oc-primary))); }
+.oc-topbar:is(.oc-topbar--dark, .oc-topbar--brand) .oc-navmenu--site .oc-navmenu-link {
+  color: oklch(from var(--color-white-50) l c h / 0.8);
+  border-color: transparent;
+  background: none;
+}
+.oc-topbar:is(.oc-topbar--dark, .oc-topbar--brand) .oc-navmenu--site .oc-navmenu-link:is(:hover, [aria-current="page"]) {
+  color: var(--color-white-50);
+  border-color: transparent;
+  background: oklch(from var(--color-white-50) l c h / 0.14);
+}
+.oc-topbar--dark .oc-topbar-logo { background: oklch(from var(--color-white-50) l c h / 0.14); }
+.oc-topbar--brand .oc-topbar-logo { color: var(--oc-primary); background: var(--color-white-50); }
+.oc-topbar:is(.oc-topbar--dark, .oc-topbar--brand) .oc-topbar-burger { color: inherit; border-color: oklch(from var(--color-white-50) l c h / 0.3); }
+
+/* Floating: a rounded bar with room around it and a soft shadow (over a hero or a photo). */
+.oc-topbar--floating {
+  margin: 0.75rem;
+  border: 1px solid var(--oc-border);
+  border-radius: 16px;
+  box-shadow: 0 14px 34px -18px oklch(from var(--color-black-60) l c h / 0.35);
+}
+
+/* Strip: a small row above the bar (contact, language, account). */
+.oc-topbar-strip {
+  display: flex;
+  flex-wrap: wrap;
+  align-items: center;
+  justify-content: space-between;
+  gap: 0.25rem 1rem;
+  padding: 0.35rem clamp(14px, 2vw, 28px);
+  font-size: 0.78rem;
+  color: var(--oc-muted-foreground);
+  background: var(--oc-muted);
+}
+.oc-topbar-strip a { color: inherit; text-decoration: none; }
+.oc-topbar-strip a:hover { color: var(--oc-foreground); }
+.oc-topbar-strip > span { display: inline-flex; flex-wrap: wrap; align-items: center; gap: 0.25rem 1rem; }
+
+/* Footer bar: text left and links right (--split), a link list, a dark bar. */
+.oc-footerbar--split { justify-content: space-between; gap: 1rem; text-align: start; }
+.oc-footerbar--tall { block-size: auto; min-block-size: var(--ocm-footer-height, 2.25rem); padding-block: 0.85rem; flex-wrap: wrap; }
+.oc-footerbar-links { display: inline-flex; flex-wrap: wrap; gap: 0.25rem 1rem; margin: 0; padding: 0; list-style: none; }
+.oc-footerbar-links a { color: var(--oc-muted-foreground); text-decoration: none; }
+.oc-footerbar-links a:hover { color: var(--oc-foreground); }
+.oc-footerbar.oc-footerbar--dark { color: oklch(from var(--color-white-50) l c h / 0.7); background: var(--oc-dark-band, var(--color-duskblue-95)); border-block-start-color: transparent; }
+.oc-footerbar--dark :is(a, .oc-footerbar-links a) { color: oklch(from var(--color-white-50) l c h / 0.85); }
+.oc-footerbar--dark .oc-footerbar-links a:hover { color: var(--color-white-50); }

package/dist/parts/site-base.css

@@ -0,0 +1,33 @@
+/* File: packages/ui/src/parts/site-base.css */
+/* Map: skip link -> icon */
+/* Two small site helpers: a skip link for keyboard users (hidden above the page until it gets the focus) and a basic
+   inline icon (svg or iconify-icon) that is as large as the text around it. */
+
+/* <a class="oc-skip-link" href="#main">Skip to content</a> as the first element in <body>. */
+.oc-skip-link {
+  position: absolute;
+  inset-inline-start: 1rem;
+  inset-block-start: 1rem;
+  /* Fully above the edge, whatever its height; drops in on focus. */
+  translate: 0 calc(-100% - 2rem);
+  z-index: 100;
+  padding: 0.6rem 1rem;
+  border-radius: var(--oc-radius-md, 0.75rem);
+  background: var(--oc-foreground);
+  color: var(--oc-background);
+  font-weight: 600;
+  text-decoration: none;
+  transition: translate var(--oc-transition-fast);
+}
+.oc-skip-link:focus { translate: none; }
+
+/* Inline icon: 1.25em (1.1em in a button), never squeezed in a flex row. */
+.oc-icon {
+  inline-size: 1.25em;
+  block-size: 1.25em;
+  flex-shrink: 0;
+}
+.oc-btn > .oc-icon {
+  inline-size: 1.1em;
+  block-size: 1.1em;
+}

package/dist/parts/site-brand-mark.css

@@ -0,0 +1,56 @@
+/* File: packages/ui/src/parts/site-brand-mark.css */
+/* Map: brand mark (icon + text) -> word (accent part in the brand gradient) -> tagline -> sizes */
+/* A logo built from an icon and text: the mark (svg or img) with a soft glow in the brand color, the word mark with one
+   part in the brand gradient, and a small tagline under it. Sizes --sm and --lg (a footer, a hero or a map). */
+
+.oc-brand-mark {
+  --oc-brand-mark-icon: 2.25rem;
+  --oc-brand-mark-word: 1.35rem;
+  --oc-brand-mark-tagline: 0.6rem;
+  display: inline-flex;
+  align-items: center;
+  gap: 0.6rem;
+  color: var(--oc-foreground);
+  text-decoration: none;
+}
+.oc-brand-mark__icon {
+  flex: none;
+  inline-size: var(--oc-brand-mark-icon);
+  block-size: var(--oc-brand-mark-icon);
+  filter: drop-shadow(0 6px 14px oklch(from var(--oc-brand-1) l c h / 0.35));
+}
+.oc-brand-mark__text {
+  display: grid;
+  line-height: 1;
+}
+.oc-brand-mark__word {
+  font-family: var(--oc-font-display, inherit);
+  font-size: var(--oc-brand-mark-word);
+  font-weight: 800;
+  letter-spacing: -0.04em;
+}
+.oc-brand-mark__accent {
+  background: linear-gradient(90deg, var(--oc-brand-1), var(--oc-brand-2));
+  -webkit-background-clip: text;
+  background-clip: text;
+  color: transparent;
+}
+.oc-brand-mark__tagline {
+  margin-block-start: 0.3rem;
+  color: var(--oc-subtle-foreground, var(--oc-muted-foreground));
+  font-family: var(--oc-font-mono);
+  font-size: var(--oc-brand-mark-tagline);
+  font-weight: 600;
+  letter-spacing: 0.16em;
+  text-transform: uppercase;
+}
+.oc-brand-mark--sm {
+  --oc-brand-mark-icon: 1.75rem;
+  --oc-brand-mark-word: 1.1rem;
+  --oc-brand-mark-tagline: 0.55rem;
+}
+.oc-brand-mark--lg {
+  --oc-brand-mark-icon: 2.6rem;
+  --oc-brand-mark-word: 1.6rem;
+  --oc-brand-mark-tagline: 0.66rem;
+}

package/dist/parts/site-cards.css

@@ -0,0 +1,183 @@
+/* File: packages/ui/src/parts/site-cards.css */
+/* Map: feature card -> link card -> icon list (+ points) -> accent list + note -> badge row + accent tagline
+   -> screenshot grid -> browser frame glow + mark */
+/* Cards and lists for the pages of a company site: services and features (icon tile + title + text), cards that are
+   links, a list of icon rows in frames (or as points with a title), a list with markers in the accent color, a small
+   note, a row of badges, a tagline in the accent color, a grid of screenshots that open in the lightbox, and a browser
+   frame with a glow in the accent color and a product mark on it. */
+
+/* Feature / service card: tile, title, text; a quiet hover. In an .oc-card-grid (--oc-card-min sets the column width). */
+.oc-feature-card {
+  padding: 1.6rem;
+  border: 1px solid var(--oc-border);
+  border-radius: var(--oc-radius-lg, 1.25rem);
+  background: var(--oc-surface);
+  transition: border-color 0.3s, background 0.3s;
+}
+.oc-feature-card:hover {
+  border-color: var(--oc-border-strong);
+  background: var(--oc-surface-strong);
+}
+.oc-feature-card > .oc-icon-tile { margin-block-end: 1.1rem; }
+.oc-feature-card__title {
+  margin: 0 0 0.6rem;
+  font-family: var(--oc-font-display, inherit);
+  font-size: 1.2rem;
+  line-height: 1.25;
+}
+.oc-feature-card__text {
+  margin: 0;
+  color: var(--oc-muted-foreground);
+  font-size: 0.95rem;
+}
+
+/* Card that is a link (an agent, a tool, a document): tile, title, text and a "more" line; hover in the accent color. */
+.oc-link-card {
+  display: grid;
+  align-content: start;
+  gap: 0.4rem;
+  padding: 1.25rem;
+  border: 1px solid var(--oc-border);
+  border-radius: var(--oc-radius-lg, 1.25rem);
+  background: var(--oc-surface);
+  color: var(--oc-foreground);
+  text-decoration: none;
+  transition: border-color 0.3s, background 0.3s;
+}
+/* --oc-link-card-hover: the hover color alone (without an accent preset, so the tile keeps its own color). */
+.oc-link-card:hover {
+  border-color: oklch(from var(--oc-link-card-hover, var(--oc-accent-from)) l c h / 0.5);
+  background: var(--oc-surface-strong);
+}
+.oc-link-card:focus-visible { outline: 2px solid var(--oc-ring); outline-offset: 2px; }
+.oc-link-card > .oc-icon-tile { margin-block-end: 0.4rem; }
+.oc-link-card__title { font-family: var(--oc-font-display, inherit); font-weight: 700; }
+.oc-link-card__text { color: var(--oc-muted-foreground); font-size: 0.93rem; }
+.oc-link-card__more {
+  display: inline-flex;
+  align-items: center;
+  gap: 0.35rem;
+  margin-block-start: 0.4rem;
+  font-size: 0.9rem;
+  font-weight: 600;
+}
+.oc-link-card__more::after { content: "→"; transition: translate 0.25s var(--oc-ease-out, ease); }
+.oc-link-card:hover .oc-link-card__more::after { translate: 4px 0; }
+
+/* Icon list: rows with an icon in a frame. --points: an icon tile next to a title and a text, without frames. */
+.oc-icon-list {
+  display: grid;
+  gap: 0.75rem;
+  margin: 0;
+  padding: 0;
+  list-style: none;
+}
+.oc-icon-list > li {
+  display: flex;
+  align-items: center;
+  gap: 0.75rem;
+  padding: 0.85rem 1rem;
+  border: 1px solid var(--oc-border);
+  border-radius: var(--oc-radius-md, 0.75rem);
+  background: var(--oc-surface);
+}
+.oc-icon-list > li > :is(svg, iconify-icon, .oc-icon) {
+  flex: none;
+  inline-size: 1.25rem;
+  block-size: 1.25rem;
+  font-size: 1.25rem;
+  color: var(--oc-primary);
+}
+.oc-icon-list--points { gap: 1rem; }
+.oc-icon-list--points > li {
+  display: grid;
+  grid-template-columns: auto 1fr;
+  align-items: start;
+  gap: 0.25rem 0.9rem;
+  padding: 0;
+  border: 0;
+  background: none;
+}
+.oc-icon-list--points > li > .oc-icon-tile { grid-row: span 2; }
+.oc-icon-list__title { font-family: var(--oc-font-display, inherit); font-weight: 700; }
+.oc-icon-list__text { color: var(--oc-muted-foreground); font-size: 0.95rem; }
+
+/* List with markers in the accent color, and a small note under a block. */
+.oc-list--accent {
+  display: grid;
+  gap: 0.6rem;
+  margin: 0;
+  padding-inline-start: 1.1rem;
+  list-style: disc;
+  color: var(--oc-muted-foreground);
+  font-size: 0.95rem;
+}
+.oc-list--accent > li::marker { color: var(--oc-accent-from, var(--oc-primary)); }
+.oc-note {
+  margin: 1.25rem 0 0;
+  color: var(--oc-muted-foreground);
+  font-size: 0.85rem;
+}
+.oc-note--md {
+  max-inline-size: 60rem;
+  font-size: 1rem;
+}
+
+/* Row of badges or pills above a title, and a tagline in the accent color (lighter, so it reads on a dark page). */
+.oc-badge-row {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 0.5rem;
+  margin-block-end: 1.25rem;
+}
+.oc-tagline--accent {
+  margin: 0 0 1rem;
+  color: light-dark(var(--oc-accent-from), color-mix(in oklch, var(--oc-accent-from) 55%, white));
+  font-size: clamp(1.2rem, 2.5vw, 1.6rem);
+  font-weight: 600;
+}
+
+/* Screenshot grid: figures with the whole image visible (contain, 16:10 on the card color) and a caption;
+   a link or a button around the image opens the lightbox
+   (<button command="show-modal" commandfor="<lightbox id>">). A <picture> (animated WebP with a still image) works the same. */
+.oc-shot-grid {
+  display: grid;
+  grid-template-columns: repeat(auto-fit, minmax(min(100%, var(--oc-shot-min, 18rem)), 1fr));
+  gap: 1.25rem;
+}
+.oc-shot {
+  margin: 0;
+  border: 1px solid var(--oc-border);
+  border-radius: var(--oc-radius-lg, 1.25rem);
+  overflow: hidden;
+  background: var(--oc-surface);
+}
+.oc-shot > :is(a, button) { display: block; inline-size: 100%; padding: 0; border: 0; background: none; cursor: zoom-in; }
+.oc-shot > :is(a, button):focus-visible { outline: 2px solid var(--oc-ring); outline-offset: -2px; }
+.oc-shot :is(picture) { display: block; }
+.oc-shot img {
+  display: block;
+  inline-size: 100%;
+  aspect-ratio: var(--oc-shot-ratio, 16 / 10);
+  object-fit: contain;
+  background: var(--oc-card);
+}
+.oc-shot > figcaption {
+  padding: 0.8rem 1rem;
+  color: var(--oc-muted-foreground);
+  font-size: 0.88rem;
+}
+
+/* Browser frame with a shadow in the accent color and a product mark on the bottom end corner. */
+.oc-browser-frame--glow {
+  position: relative;
+  box-shadow: 0 40px 90px -40px color-mix(in srgb, var(--oc-accent-from) 70%, transparent);
+}
+.oc-browser-frame--glow :is(.oc-browser-frame__view, .oc-browser-frame__body) img { transition: scale 0.6s var(--oc-ease-out, ease); }
+.oc-browser-frame--glow:hover :is(.oc-browser-frame__view, .oc-browser-frame__body) img { scale: 1.02; }
+.oc-browser-frame__mark {
+  position: absolute;
+  inset-block-end: 1rem;
+  inset-inline-end: 1rem;
+  filter: drop-shadow(0 10px 20px oklch(0 0 0 / 0.6));
+}

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-header-variants.css

@@ -0,0 +1,70 @@
+/* File: packages/ui/src/parts/site-header-variants.css
+   Map: actions slot -> centred menu -> dark -> floating pill -> glass pill -> footer: centred, dark, newsletter, social
+   Variants of the marketing header (.oc-site-header) and footer (.oc-site-footer) in showcase.css. The sticky header
+   turns to glass while scrolling; the coloured variants keep their own background (no scroll animation). */
+
+.oc-site-header__actions { display: flex; align-items: center; gap: 0.5rem; flex: none; }
+.oc-site-header__brand { white-space: nowrap; flex: none; }
+.oc-site-header__nav > :is(a, button):not(.oc-btn) { white-space: nowrap; }
+
+/* Centred menu: brand left, menu in the middle, actions right. */
+@media (min-width: 861px) {
+  .oc-site-header--center .oc-site-header__inner { display: grid; grid-template-columns: 1fr auto 1fr; }
+  .oc-site-header--center .oc-site-header__brand { justify-self: start; }
+  .oc-site-header--center .oc-site-header__actions { justify-self: end; }
+}
+
+/* Dark: a solid dark bar with light text. */
+.oc-site-header--dark {
+  animation: none;
+  color: var(--color-white-50);
+  background: var(--oc-dark-band, var(--color-duskblue-95));
+}
+.oc-site-header--dark :is(.oc-site-header__brand, .oc-site-header__nav a[aria-current="page"], .oc-site-header__nav a:not(.oc-btn):hover) { color: var(--color-white-50); }
+.oc-site-header--dark .oc-site-header__nav a:not(.oc-btn) { color: oklch(from var(--color-white-50) l c h / 0.72); }
+
+/* Floating: the bar as a rounded card with room around it. */
+.oc-site-header:is(.oc-site-header--floating, .oc-site-header--glass) { animation: none; padding: 0.75rem; }
+.oc-site-header--floating .oc-site-header__inner {
+  block-size: 4rem;
+  padding-inline: 1rem 0.75rem;
+  border: 1px solid var(--oc-border);
+  border-radius: 18px;
+  background: var(--oc-background);
+  box-shadow: 0 16px 36px -22px oklch(from var(--color-black-60) l c h / 0.45);
+}
+
+/* Glass: a clear liquid-glass pill over a photo or a hero (look in media-glass-liquid.css). */
+.oc-site-header--glass .oc-site-header__inner { block-size: 3.75rem; padding-inline: 1.1rem 0.6rem; border-radius: 999px; }
+.oc-site-header--glass :is(.oc-site-header__brand, .oc-site-header__nav a:not(.oc-btn)) { color: light-dark(var(--color-black-95), var(--color-white-50)); text-shadow: 0 1px 2px light-dark(oklch(100% 0 0deg / 0.5), oklch(0% 0 0deg / 0.4)); }
+
+/* ---- Footer variants ---- */
+/* Centred: brand, one row of links, social icons and the bottom line, all centred. */
+.oc-site-footer--center { text-align: center; }
+.oc-site-footer--center :is(.oc-site-footer__about, .oc-site-footer__bottom) { justify-items: center; justify-content: center; }
+.oc-site-footer--center .oc-site-footer__about { display: grid; gap: 1rem; }
+.oc-site-footer--center .oc-site-footer__about p { margin: 0; max-inline-size: 34rem; }
+.oc-site-footer__row { display: flex; flex-wrap: wrap; justify-content: center; gap: 0.5rem 1.75rem; margin: 2rem 0 0; padding: 0; list-style: none; }
+.oc-site-footer__social { display: flex; flex-wrap: wrap; gap: 0.5rem; margin: 0; padding: 0; list-style: none; }
+.oc-site-footer--center .oc-site-footer__social { justify-content: center; margin-block-start: 1.5rem; }
+.oc-site-footer__social a {
+  display: grid;
+  place-items: center;
+  inline-size: 2.25rem;
+  block-size: 2.25rem;
+  border: 1px solid var(--oc-border);
+  border-radius: 999px;
+  transition: border-color 0.2s, color 0.2s;
+}
+.oc-site-footer__social a:hover { border-color: var(--oc-primary); color: var(--oc-primary); }
+.oc-site-footer__social :is(svg, iconify-icon) { inline-size: 1.1rem; block-size: 1.1rem; font-size: 1.1rem; }
+
+/* Dark: light text on a dark band, the same deep blue in light and dark mode (--oc-dark-band), no top border. */
+.oc-site-footer--dark { border-block-start: 0; color: oklch(from var(--color-white-50) l c h / 0.7); background: var(--oc-dark-band, var(--color-duskblue-95)); }
+.oc-site-footer--dark :is(.oc-site-footer__title, .oc-site-header__brand, a:hover) { color: var(--color-white-50); }
+.oc-site-footer--dark :is(.oc-site-footer__bottom, .oc-site-footer__social a) { border-color: oklch(from var(--color-white-50) l c h / 0.16); }
+
+/* Newsletter: a sign-up field in the brand column. */
+.oc-site-footer__signup { display: flex; flex-wrap: wrap; gap: 0.5rem; margin-block-start: 1.25rem; max-inline-size: 24rem; }
+.oc-site-footer__signup .oc-input { flex: 1 1 12rem; min-inline-size: 0; }
+.oc-site-footer--dark .oc-site-footer__signup .oc-input { color: var(--color-white-50); background: oklch(from var(--color-white-50) l c h / 0.08); border-color: oklch(from var(--color-white-50) l c h / 0.2); }

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

@@ -3,7 +3,7 @@
    -> sizes (--sm, --lg) -> full width
    Prose: typography for long-form text from a CMS, blog or help page, where the HTML has no classes of its own.
    Every rule is scoped with :where(), so a utility class on an element inside still wins. Spacing is in em, so --sm and --lg
-   scale the whole text. Based on the help and maintenance pages of the Korrekt app. */
+   scale the whole text. */
 
 .oc-prose {
   max-inline-size: 68ch;
@@ -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; }