@birdycom/omniaui 0.12.6 → 0.13.0

package/dist/contact-form.d.ts

@@ -0,0 +1,5 @@
+// File: packages/ui/src/contact-form.d.ts
+// Types for the contact form script.
+
+export function initContactForm(form: HTMLFormElement): void;
+export function initContactForms(scope?: ParentNode): void;

package/dist/contact-form.js

@@ -0,0 +1,138 @@
+// File: packages/ui/src/contact-form.js
+// Map: messages -> field errors -> busy -> send (fetch, JSON) -> result / errors -> "send another" -> boot
+// Contact form without a page reload. The form keeps working without this script (POST + redirect); with it, it sends
+// with fetch and shows the result or the errors in place.
+// Protocol: POST the FormData to form.action with "Accept: application/json"; the server answers
+// { sent: true } (200) or { sent: false, errors: { field: "message", form?: "message" } } (422); a list per field
+// (Laravel: { errors: { email: ["…"] } }) shows its first message.
+// Markup (data attributes, all inside [data-contact-root] or the document):
+//   form[data-contact-form]        the form (novalidate); [data-contact-submit] its button, [data-contact-label] the text
+//   [data-contact-body]            what hides after sending (title, intro, alert, form)
+//   [data-contact-success]         the .oc-result that shows after sending (hidden, role="status", tabindex="-1")
+//   [data-contact-alert]           the .oc-alert above the form (hidden), for errors.form or the general message
+//   [data-contact-again]           the "Send another message" link or button in the result
+// Field errors: aria-invalid="true" + aria-describedby on the field and <p class="oc-field-error" id="err-<name>">.
+// Texts: data-busy-label, data-error-fields, data-error-network on the form (English by default).
+
+const TEXT = {
+  busy: "Sending…",
+  fields: "Please check the fields in red.",
+  network: "Sending failed. Check your connection, or mail or call us directly.",
+};
+
+function clearFieldError(field) {
+  field.removeAttribute("aria-invalid");
+  field.removeAttribute("aria-describedby");
+  field.ownerDocument.getElementById(`err-${field.name}`)?.remove();
+}
+
+function setFieldError(field, message) {
+  const error = field.ownerDocument.createElement("p");
+  error.className = "oc-field-error";
+  error.id = `err-${field.name}`;
+  error.textContent = message;
+  field.setAttribute("aria-invalid", "true");
+  field.setAttribute("aria-describedby", error.id);
+  field.insertAdjacentElement("afterend", error);
+}
+
+/** Send one form[data-contact-form] with fetch and show the result or the errors in place. */
+export function initContactForm(form) {
+  if (!form || form.dataset.ocBound !== undefined || typeof fetch === "undefined") return;
+  form.dataset.ocBound = "";
+  const root = form.closest("[data-contact-root]") || form.ownerDocument;
+  const body = root.querySelector("[data-contact-body]");
+  const success = root.querySelector("[data-contact-success]");
+  const alertBox = root.querySelector("[data-contact-alert]");
+  const button = form.querySelector("[data-contact-submit]") || form.querySelector('[type="submit"]');
+  const label = form.querySelector("[data-contact-label]");
+  const idleLabel = label?.textContent ?? "";
+  const text = {
+    busy: form.dataset.busyLabel || TEXT.busy,
+    fields: form.dataset.errorFields || TEXT.fields,
+    network: form.dataset.errorNetwork || TEXT.network,
+  };
+
+  const showAlert = (message) => {
+    if (!alertBox) return;
+    alertBox.textContent = message;
+    alertBox.hidden = message === "";
+  };
+
+  const setBusy = (busy) => {
+    if (button) button.disabled = busy;
+    form.setAttribute("aria-busy", String(busy));
+    if (label) label.textContent = busy ? text.busy : idleLabel;
+  };
+
+  // A field you change loses its error at once.
+  form.addEventListener("input", (event) => {
+    if (event.target.name) clearFieldError(event.target);
+  });
+
+  form.addEventListener("submit", async (event) => {
+    event.preventDefault();
+    form.querySelectorAll("[aria-invalid]").forEach(clearFieldError);
+    showAlert("");
+    setBusy(true);
+    try {
+      const response = await fetch(form.action, {
+        method: (form.getAttribute("method") || "POST").toUpperCase(),
+        body: new FormData(form),
+        headers: { Accept: "application/json" },
+      });
+      const result = await response.json();
+      if (result.sent) {
+        form.reset();
+        if (body) body.hidden = true;
+        if (success) {
+          success.hidden = false;
+          success.focus({ preventScroll: true });
+          success.scrollIntoView?.({ behavior: "smooth", block: "center" });
+        }
+        form.dispatchEvent(new CustomEvent("oc-contact-sent", { bubbles: true }));
+        return;
+      }
+      // Laravel sends a list per field ({ email: ["…"] }): the first message is shown.
+      const first = (message) => (Array.isArray(message) ? message[0] : message);
+      const errors = result.errors || {};
+      for (const [name, message] of Object.entries(errors)) {
+        const field = form.elements.namedItem(name);
+        if (field instanceof HTMLElement && "name" in field) setFieldError(field, first(message));
+      }
+      showAlert(first(errors.form) || text.fields);
+      (form.querySelector('[aria-invalid="true"]') || alertBox)?.focus?.();
+    } catch {
+      showAlert(text.network);
+    } finally {
+      setBusy(false);
+    }
+  });
+
+  // "Send another message": the form comes back without a reload.
+  root.querySelector("[data-contact-again]")?.addEventListener("click", (event) => {
+    event.preventDefault();
+    if (success) success.hidden = true;
+    if (body) body.hidden = false;
+    form.querySelector("input:not([type=hidden]):not([tabindex='-1']), textarea, select")?.focus();
+  });
+}
+
+/** Bind every contact form under scope. */
+export function initContactForms(scope = document) {
+  scope.querySelectorAll("form[data-contact-form]").forEach(initContactForm);
+}
+
+// Starts on its own as /js/oc-contact-form.js (`npx omniaui copy-js`), with ?auto in the URL or data-oc-auto on the tag.
+function autoStart() {
+  if (typeof document === "undefined") return false;
+  const url = String(import.meta.url);
+  if (url.includes("oc-contact-form") || /[?&]auto(=|&|$)/.test(url)) return true;
+  const file = url.split(/[?#]/)[0];
+  return [...document.querySelectorAll("script[data-oc-auto][src]")].some((s) => s.src.split(/[?#]/)[0] === file);
+}
+if (autoStart()) {
+  const boot = () => initContactForms(document);
+  if (document.readyState === "loading") document.addEventListener("DOMContentLoaded", boot);
+  else boot();
+}

package/dist/fly.d.ts

@@ -0,0 +1,4 @@
+// File: packages/ui/src/fly.d.ts
+// Types for the fly-in script.
+
+export function initFly(scope?: ParentNode): () => void;

package/dist/fly.js

@@ -0,0 +1,80 @@
+// File: packages/ui/src/fly.js
+// Map: row of a card (index, count) -> start offset -> delay -> observe (once or both ways) -> boot
+// Cards that fly in (.oc-reveal--fly): each card starts from the middle of its row (--oc-fly-x) and flies to its place
+// when it scrolls into view (.is-visible). Adds .oc-fly-ready on <html> first, so without this script, or with
+// "reduce motion", nothing is hidden.
+// Options (CSS custom properties on a card or a parent, and one attribute):
+//   --oc-fly-step: 45px     start offset per column from the middle of the row (instead of the full distance)
+//   --oc-fly-stagger: 90ms  delay per column, so a row lands from left to right
+//   data-oc-fly-repeat      the cards fly out again when they leave the view (both scroll directions)
+
+/** Index of the card in its row (cards with the same top in the same parent) and the number of cards in that row. */
+function rowOf(card) {
+  const top = card.offsetTop;
+  const row = [...(card.parentElement?.children ?? [])].filter((el) => el.classList.contains("oc-reveal--fly") && el.offsetTop === top);
+  return { index: Math.max(0, row.indexOf(card)), count: row.length || 1 };
+}
+
+/** Horizontal distance from the card to the middle of its parent, so the row opens from the center. */
+function flyOffset(card, step, index, count) {
+  if (step) return Math.round(((count - 1) / 2 - index) * step);
+  const box = card.getBoundingClientRect();
+  const parent = card.parentElement?.getBoundingClientRect();
+  if (!parent || !box.width) return 0;
+  return Math.round(parent.left + parent.width / 2 - (box.left + box.width / 2));
+}
+
+/** "90ms", "0.09s" or "45px" -> number (ms or px); 0 when empty. */
+function num(value, unitS = false) {
+  const v = String(value).trim();
+  const n = parseFloat(v);
+  if (!v || Number.isNaN(n)) return 0;
+  return unitS && /\ds$/.test(v) ? n * 1000 : n;
+}
+
+/** Let every .oc-reveal--fly under scope fly in once it comes into view. Returns a function that stops watching. */
+export function initFly(scope = document) {
+  const doc = scope.ownerDocument || scope;
+  const win = doc.defaultView;
+  const cards = [...scope.querySelectorAll(".oc-reveal--fly:not(.is-visible)")];
+  if (!cards.length || !win) return () => {};
+  if (!("IntersectionObserver" in win) || win.matchMedia?.("(prefers-reduced-motion: reduce)").matches) {
+    cards.forEach((c) => c.classList.add("is-visible"));
+    return () => {};
+  }
+  for (const card of cards) {
+    const style = win.getComputedStyle(card);
+    const { index, count } = rowOf(card);
+    card.style.setProperty("--oc-fly-x", `${flyOffset(card, num(style.getPropertyValue("--oc-fly-step")), index, count)}px`);
+    const stagger = num(style.getPropertyValue("--oc-fly-stagger"), true);
+    if (stagger) card.style.setProperty("--oc-fly-delay", `${index * stagger}ms`);
+  }
+  doc.documentElement.classList.add("oc-fly-ready");
+  const io = new win.IntersectionObserver((entries) => {
+    for (const entry of entries) {
+      const repeat = entry.target.closest("[data-oc-fly-repeat]");
+      if (entry.isIntersecting) {
+        entry.target.classList.add("is-visible");
+        if (!repeat) io.unobserve(entry.target);
+      } else if (repeat) {
+        entry.target.classList.remove("is-visible");
+      }
+    }
+  }, { rootMargin: "0px 0px -10% 0px", threshold: 0.12 });
+  cards.forEach((c) => io.observe(c));
+  return () => io.disconnect();
+}
+
+// Starts on its own as /js/oc-fly.js (`npx omniaui copy-js`), with ?auto in the URL or data-oc-auto on the tag.
+function autoStart() {
+  if (typeof document === "undefined") return false;
+  const url = String(import.meta.url);
+  if (url.includes("oc-fly") || /[?&]auto(=|&|$)/.test(url)) return true;
+  const file = url.split(/[?#]/)[0];
+  return [...document.querySelectorAll("script[data-oc-auto][src]")].some((s) => s.src.split(/[?#]/)[0] === file);
+}
+if (autoStart()) {
+  const boot = () => initFly(document);
+  if (document.readyState === "loading") document.addEventListener("DOMContentLoaded", boot);
+  else boot();
+}

package/dist/oc-theme.css

@@ -1,4 +1,4 @@
-/* File: oc-theme.css — generated from tokens/semantic.json by @birdycom/omniacss 0.12.6. Do not edit. */
+/* File: oc-theme.css — generated from tokens/semantic.json by @birdycom/omniacss 0.13.0. Do not edit. */
 /* Semantic theme tokens: every color is light-dark() of an Omnia palette token (oc-colors.css). */
 /* Same source as the desktop export: npx omniacss tokens --format json|dtcg|python */
 :root {
@@ -14,6 +14,7 @@
   --oc-foreground: light-dark(var(--color-duskblue-60), var(--color-frostblue-10));
   --oc-muted: light-dark(var(--color-frostblue-60), var(--color-shallowblue-50));
   --oc-muted-foreground: light-dark(var(--color-stormblue-40), var(--color-mistblue-70));
+  --oc-subtle-foreground: light-dark(var(--color-stormblue-10), var(--color-mistblue-95));
   --oc-card: light-dark(var(--color-white-50), var(--color-shallowblue-70));
   --oc-popover: light-dark(var(--color-white-50), var(--color-shallowblue-60));
   --oc-popover-foreground: var(--oc-foreground);
@@ -58,6 +59,7 @@
   --oc-transition-normal: 200ms cubic-bezier(0.4, 0, 0.2, 1);
   --oc-font-sans: system-ui, -apple-system, "Segoe UI", Roboto, Cantarell, "Helvetica Neue", sans-serif;
   --oc-font-mono: "Cascadia Code", "JetBrains Mono", Consolas, ui-monospace, monospace;
+  --oc-font-display: system-ui, -apple-system, "Segoe UI", Roboto, Cantarell, "Helvetica Neue", sans-serif;
 
   /* Shadows (x y blur spread; color + alpha per mode in --oc-shadow-<name>-color) */
   --oc-shadow-sm-color: light-dark(oklch(from var(--color-stormblue-50) l c h / 0.08), oklch(from var(--color-black-50) l c h / 0.4));

package/dist/parts/app-result.css

@@ -0,0 +1,39 @@
+/* File: packages/ui/src/parts/app-result.css */
+/* Map: result -> icon tile -> title -> text -> actions */
+/* The outcome of an action in the place where the form was: "Thank you, your message was sent" with an icon tile, a
+   short text and a button ("Send another message"). Give it role="status" and tabindex="-1" and move the focus to it.
+   --center centers it; the tile takes its color from an .oc-accent--* preset. */
+
+.oc-result {
+  display: grid;
+  justify-items: start;
+  gap: 0.75rem;
+}
+.oc-result:focus { outline: none; }
+.oc-result[hidden] { display: none; }
+.oc-result > .oc-icon-tile { margin-block-end: 0.35rem; }
+.oc-result__title {
+  margin: 0;
+  font-size: 1.2rem;
+  line-height: 1.25;
+}
+.oc-result__text {
+  margin: 0;
+  color: var(--oc-muted-foreground);
+}
+.oc-result__text a {
+  color: var(--oc-primary);
+  text-decoration: underline;
+  text-underline-offset: 3px;
+}
+.oc-result__actions {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 0.75rem;
+  margin-block-start: 0.5rem;
+}
+.oc-result--center {
+  justify-items: center;
+  text-align: center;
+}
+.oc-result--center .oc-result__actions { justify-content: center; }

package/dist/parts/forms-form.css

@@ -0,0 +1,76 @@
+/* File: packages/ui/src/parts/forms-form.css */
+/* Map: form grid -> label hint -> actions + note -> busy -> filled variant */
+/* A form as one grid of fields with one gap, an "(optional)" hint in a label, a row with the submit button and a short
+   note, the busy state while it sends (aria-busy on the form), and .oc-form--filled: fields with a fill and a stronger
+   border, for a form on a card, a photo or a dark band. All through the field tokens of .oc-input. */
+
+.oc-form {
+  display: grid;
+  gap: var(--oc-form-gap, 1.1rem);
+}
+.oc-form .oc-field-group { gap: var(--oc-form-gap, 1.1rem); }
+.oc-form .oc-field {
+  gap: 0.4rem;
+  margin-bottom: 0;
+}
+
+/* <label class="oc-field-label">Phone <span class="oc-field-label__hint">(optional)</span></label> */
+.oc-field-label__hint {
+  color: var(--oc-muted-foreground);
+  font-weight: 400;
+}
+
+/* Submit button with a short note next to it (wraps under it on a narrow form). */
+.oc-form-actions {
+  display: flex;
+  flex-wrap: wrap;
+  align-items: center;
+  gap: 1rem 1.5rem;
+  margin-block-start: 0.4rem;
+}
+.oc-form-note {
+  flex: 1 1 16rem;
+  margin: 0;
+  color: var(--oc-muted-foreground);
+  font-size: 0.85rem;
+}
+.oc-form-note a {
+  color: var(--oc-primary);
+  text-decoration: underline;
+  text-underline-offset: 3px;
+}
+.oc-form-note a:hover { color: var(--oc-foreground); }
+
+/* While the form sends (form aria-busy="true"): the submit button dims and shows a progress cursor. */
+.oc-form[aria-busy="true"] :is([type="submit"], button:not([type])) {
+  opacity: 0.7;
+  cursor: progress;
+}
+
+/* Filled fields: a fill (dark in dark mode), the strong border, more room and a wider focus ring. */
+.oc-form--filled {
+  --oc-input-bg: light-dark(oklch(from var(--oc-foreground) l c h / 0.03), oklch(0 0 0 / 0.25));
+  --oc-input-border: var(--oc-border-strong);
+  --oc-input-padding: 0.75rem 0.9rem;
+  --oc-input-radius: var(--oc-radius-md, 0.75rem);
+  --oc-input-size: 1rem;
+  --oc-ring-width: 3px;
+  --oc-textarea-min: 9rem;
+}
+.oc-form--filled .oc-field-label {
+  font-size: 0.9rem;
+  font-weight: 600;
+  line-height: 1.4;
+}
+.oc-form--filled .oc-field-error { font-size: 0.85rem; }
+.oc-form--filled .oc-select option { background: var(--oc-card); }
+
+/* Honeypot: a field for bots, off screen for people. Not display:none (some bots skip hidden fields). Give the wrapper
+   aria-hidden="true" and the input tabindex="-1" autocomplete="off"; the server ignores a form where it is filled. */
+.oc-honeypot {
+  position: absolute;
+  inset-inline-start: -10000px;
+  inline-size: 1px;
+  block-size: 1px;
+  overflow: hidden;
+}

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/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));
+}