@breathe-ds/ui 0.2.0 → 0.4.0

package/README.md

@@ -52,18 +52,34 @@ For a site without a ready-made token file, define the roles on `:root` itself:
 }
 ```
 
+`theme.css` also sets the family's base behaviour: smooth scrolling for anchors
+(`html { scroll-behavior: smooth }`, switched off under `prefers-reduced-motion`)
+and `scroll-padding` (6rem top, 7rem bottom) so keyboard focus never lands
+hidden behind the sticky Header or the BottomNav (WCAG 2.4.11).
+
 ## Token roles
 
 | Token (Tailwind) | Role | `--cg-*` |
 |---|---|---|
 | `surface` | base background | `--cg-surface` |
 | `surface-panel` | dark panel (footer, final CTA) | `--cg-surface-panel` |
+| `card` | raised surface: cards, pills, menus over the page (white on all three palettes) | `--cg-card` |
 | `ink` | primary text / headings | `--cg-ink` |
 | `ink-soft` | secondary text | `--cg-ink-soft` |
 | `ink-body` | reading body text | `--cg-ink-body` |
 | `action` | CTA / highlight — **never plain text** | `--cg-action` |
 | `action-text` | text in the action color (AA) | `--cg-action-text` |
+| `on-action` | text ON the action color (the accent button) | `--cg-on-action` |
+| `action-tint` | highlighted panel or card: a 6% wash of the action color over the surface | `--cg-action-tint` |
+| `action-line` | border of a highlighted card (closed tone, 3:1 on the surface; pure ttcab orange is 1.91:1) | `--cg-action-line` |
 | `line` | hairlines / borders | `--cg-line` |
+
+**Dose of the action color** (what brands with a hot accent do, Cloudflare orange,
+Airbnb red): the action color is the fill of ONE element per block, with
+`on-action` text on it; links stay in `ink`/`ink-soft` with an underline; a
+highlighted card is `action-tint` + `action-line`, not the full color; the
+color as text only as `action-text`. The "Action dose" section of the playground
+shows the disciplined and the loud version side by side.
 | `font-heading` / `font-body` | typography | `--cg-font-*` |
 | `radius-xl/2xl/pill` · `ease-cg` | radius and motion curve | fixed |
 
@@ -76,10 +92,11 @@ Values from the standard WCAG formula (the same ones `preview/` computes live):
 | surface `#fbf5e9` / ink `#144753` | 9.41:1 | AAA |
 | surface `#fbf5e9` / ink-soft `#54707a` | 4.86:1 | AA |
 | surface `#fbf5e9` / ink-body `#1e4f5b` | 8.32:1 | AAA |
-| surface `#fbf5e9` / action-text `#9a5d07` | 4.90:1 | AA |
+| surface `#fbf5e9` / action-text `#bd3f0c` | 4.98:1 | AA |
+| action `#e8541e` / on-action `#ffffff` (accent button) | 3.67:1 | 3:1 UI component; below AA text, conscious exception |
 | surface-panel `#144753` / cream text | 9.41:1 | AAA |
 
-`action` `#f6a22a` is decorative/CTA only — do not use it as text on cream.
+`action` `#e8541e` is a vivid red-orange with white text, the Cloudflare/Airbnb route: 3.67:1 passes the 3:1 of UI components, not the 4.5:1 of normal text. A conscious exception, limited to the accent Button (one per block, same type scale as the other buttons so they never look mismatched); small controls (chips, tabs, segments) use `ink` or `action-tint` + `action-text` instead. The UI orange does not match the logo's `#f6a22a` on purpose. As text, use `action-text`.
 
 ## Family typography
 
@@ -147,6 +164,17 @@ edited by hand: it is the one from each brand's manual.
 novo.creeta: symbol, then name, then tagline; with reduced motion it becomes
 a short fade.
 
+## Typography
+
+The family's scale, from novo.creeta, as components: `Heading` (sizes
+`display` 2.5rem→6xl · `hero` · `section` 1.75rem→4xl · `card` · `small`;
+Quicksand medium in `ink`) with an optional `accent` — the second sentence of
+the same heading on its own line, one tone below in `ink-soft` — and
+`SectionHeading` (eyebrow/number line, title + accent, lead). `Text` for
+paragraphs (`lead`, `body`, `small`, `eyebrow`, Figtree) and `Prose` for a run
+of paragraphs at reading width. Two tones, one element: the hierarchy comes
+from color, not from extra markup.
+
 ## Navigation
 
 - **Header**: brand (the app passes the link to the home page) · items · item with dropdown
@@ -168,9 +196,90 @@ a short fade.
   the code, opens the three languages; header) or `list` (plain links; the Footer
   uses it). Same page in the other language, each language written in itself,
   current marked by ✓ and `aria-current`.
+- **List**: the family's list with a marker in front of each item (novo.creeta):
+  `marker="check"` (24px bubble, "what we assess / what we treat") or
+  `marker="arrow"` (corner arrow, one sentence per item, as in the Footer
+  notice). An item with `href` is a link: semibold, underline, outbound arrow.
+- **Timeline**: the "Como cuidamos" of novo.creeta — ordered steps, each with a
+  44px icon bubble, a title and a paragraph; a thin line links the drawings. A
+  step may end with a link (strong link + outbound arrow).
+- **RowList** / **CollapseRow** / **LinkRow**: the list of equal rows at the foot
+  of a card (the Trajectory / Guidance / Instagram block of the ProfessionalCard),
+  generic. 48px rows with hairlines; a CollapseRow is a native `<details>` with a
+  text or a list of links (`links`, count beside the label); a LinkRow goes
+  somewhere (↗ another page, ↓ anchor, `external` for a new tab, `icon` to
+  replace the arrow). The ProfessionalCard is built on them.
+- **ProfessionalCard** / **ProfessionalModal** / **CaptionBand**: the team card of
+  novo.creeta — portrait (plain, living clip on hover, or with the "Presentation"
+  chip), name, role, registration (**always**: COFFITO 414/2012) and generic
+  `rows` (collapse with text or links, link with arrow or icon — on creeta:
+  trajectory, guidance, Instagram); the modal plays the presentation with sound,
+  the live caption band (active WebVTT cue) above the name, and the full `bio`.
+  Three sizes (`size`): `full` (team page), `medium` (the home's tile — 3:4
+  portrait, name, "Meet" badge on hover, a link to the full card; `shortName`,
+  `href`) and `micro` (the "who treats" row — 72px photo, name, role, link).
+- **Rail** / **RailItem**: novo.creeta's `Trilho` — on the phone a snapping
+  horizontal rail with a progress bar underneath (shown only when it scrolls),
+  a grid from md (`grid` classes written in full). RailItem presets the phone
+  width: `wide` (treatments, videos) or `narrow` (team).
+- **Byline** / **PersonChip** / **Avatar**: who signs or explains content
+  (novo.creeta) — stacked portraits + eyebrow + linked names, or portrait + name
+  + "Watch the video ↗"; the person chip (portrait, name, role · registration,
+  arrow bubble when it links to the person's card). No photo → initials bubble.
+- **Breadcrumb**: the article trail "← Section › Parent" (current page not listed).
+- **FactStrip**: the three facts under the hero of novo.creeta — icon bubble +
+  two lines of equal weight per fact, thin dividers between columns (rows on
+  phones); the separator between the lines is read by screen readers only.
+- **InfoCard**: the white info cards of the clinic page (icon bubble, title,
+  lines/address, note, outbound links "Directions ↗ · Waze ↗").
+- **MediaCard**: photo or muted clip behind a title, badge top-left, arrow button
+  top-right, whole card a link; Ken Burns zoom on hover (mouse only), clip plays
+  while visible or on hover; pause hooks exported for a page-level pause button.
+  The portrait variant ("Who created the method"): `eyebrow` + title + `linkLabel`
+  ("See the team ↗") with `arrowButton={false}`.
+- **VideoStoryCard**: the vertical Instagram-style video card (poster, play
+  button, duration badge; gradient grows and the lead appears on hover/focus;
+  tap plays with sound in place; optional muted hover preview). When the clip
+  ends the card returns to the poster with a "Watched" badge (check + word,
+  top-right): `watched` sets it from the site, `onWatched` fires once at the end,
+  `remember` keeps the set of watched clips in localStorage (by `src`). Exports
+  the page-level pause contract (`CARD_VIDEOS_PAUSE_EVENT` / `CARD_VIDEOS_PAUSED_ATTR`).
+- **TestimonialCard**: clip with a play button on the left, quote + author +
+  outbound link on the right ("Famílias contam").
+- **MapCard**: the Mapa of novo.creeta — a still preview fading into the card,
+  the address, "View the map" and the outbound "Directions" link; Google is only
+  called after the tap (no consent banner, lighter page). Open, the map fills
+  the card with the same close bar as the hero video.
+- **CtaCard** / **VideoInviteCard**: the final call of a novo.creeta page — white
+  card (title, lead, CTA slot) beside a video card: muted loop with the speaker's
+  name over it, pause control, play button that plays the full video with sound.
+- **CareSteps**: "how the care works" of novo.creeta — a bento mosaic of
+  numbered steps (drawing above, text below; the first takes two columns) with
+  the invite on the dark panel closing the sequence. The drawings are slots:
+  **ChatPreview** (a sample chat, bubble by bubble, the clinic "types"; loops
+  while on screen, pause button), **PlanTimeline** (three stages, the line comes
+  down and each dot lights up; 6s loop, pause button), **PhotoSequence** (photos
+  with fade and a slow zoom, CSS only, paused by a hidden checkbox), or a still
+  image. All stand still and whole with reduced motion. `useOnAppear` (animate
+  when half on screen, only while on screen) and `PauseButton` (44px, 32px
+  circle) are exported for your own drawings.
+- **Blog**: creeta's "guidance" area — **PostCard** (the card of the list:
+  cover, category, title as the link stretched over the card, excerpt in three
+  lines, author · date), **FeaturedPosts** ("in the words of who treats you":
+  bento, the first post wide with the cover beside the text, a Byline with the
+  speaker and "Watch the video ↗" at the foot) and **PostArticle** (the page:
+  trail, title, PersonChip and date, the text with its notice, the video beside
+  it sticky from md, the transcript open; children for "other posts" and the
+  final call).
+- **StoryPanel**: creeta's "origin" block — one dark panel (surface-panel)
+  grouping a story: media at the top with a film that fades into the panel, the
+  logo at its base, title, lead, three pillars in columns with a hairline above
+  each, and the outbound links. For "who we are" and "why us" blocks.
 - **Footer**: the site-footer of novo.creeta, by tokens — full width like the
   Header, with the signed brand + sentence, "Pages" (title on the first line, links in two
-  columns), "Where we are" (address, hours, "Directions ↗ · Waze ↗"), an optional
+  columns; with many pages, `pages.groups` — titled columns, up to four side by
+  side, so the list gets wider instead of taller), "Where we are" (address, hours,
+  "Directions ↗ · Waze ↗"), an optional
   notice band on `surface`, the legal line with the **CNPJ (always required in
   the family)** plus the contact chips, and the languages as plain links.
   `navHiddenFrom` keeps room at the bottom for the BottomNav.
@@ -182,7 +291,7 @@ a short fade.
 ## Roadmap
 
 - [x] v0.1 — tokens (preset + ttcab/creeta palettes) + preview
-- [x] Accordion (1st component; injectable-deps pattern)
+- [x] Accordion (1st component; injectable-deps pattern) — the Perguntas of novo.creeta: white card (`bg-card`), 22px radius, no border
 - [x] Family typography (Quicksand + Figtree, free fonts only)
 - [ ] **novo.creeta scales** (full reference, approved): **typography** (sizes/weights/line-height)
       **+ spacing/rhythm** (section padding, gaps) **+ default border-radius** → become DS tokens
@@ -190,19 +299,15 @@ a short fade.
       import/inject it (without each site depending on lucide directly)
 - [ ] **MediaCard** (video/image behind + icon badge + title + lead + arrow;
       **horizontal carousel on mobile** variant with progress bar + pause) — approved
-- [ ] **TestimonialCard** — approved. Variants: **quote** (text card),
-      **video hero** (full-bleed with overlaid quote), **video beside** ("Famílias contam": video + text).
-      Consider a **mix** of the two. **Already exists in ttcab** (TestimonialVideoHero/Card) → extract/generalize.
-- [ ] **VideoStoryCard** (short vertical video) — approved. Play + duration badge +
-      title + lead + **"Read the transcript"** (collapsible, reuses the Accordion). Pattern of the Videos page.
-      _Note: the card can still improve in a future update (fine to leave for later)._
-- [ ] **ProfessionalCard** (team) — approved. Two versions: **small** (photo + name, in a row)
+- [x] **TestimonialCard** — from novo.creeta (10/29): clip + play on the left, quote/author/link on the right. The "video hero" and "video beside" variants from ttcab are still open
+- [x] **VideoStoryCard** — from novo.creeta (10/29): vertical card, play + duration badge, lead on hover/focus, plays with sound in place; "Read the transcript" goes in `children` (Accordion)
+- [x] **ProfessionalCard** (team) — from novo.creeta (10/29): small = PersonChip/Byline, big = the card with living portrait, presentation modal + captions. Original note: Two versions: **small** (photo + name, in a row)
       and **big** (photo + name + role + CREFITO + "Trajetória"/"Orientações" accordions).
       **Video** variant: "Apresentação" badge, hover plays the video, and a **modal** (video + bio).
       **Data rule:** every professional MUST have a **CREFITO** attached (COFFITO requirement).
-- [x] **PillList** (chips like "Condições que atendemos": label + arrow, wrapping grid, "View all" link)
+- [x] **Pill / PillList** — the Atalho of novo.creeta (white 44px pill, arrow bubble: ↓ anchor, ↗ other page, optional meta); wrapping row + "See all"
 - [x] **AnchorNav** (floating capsule of anchors, scroll-spy + sliding indicator) — extracted from ttcab (10/29)
-- [x] **Footer** · **PageVideoHero** (loop and player) · **Header** (dropdown, house) · **BottomNav** · **Curtain** · **Lockup** (5 arrangements) · **BreatheMark**
+- [x] **Footer** · **PageVideoHero** (loop, and player from a YouTube id or the site's own mp4) · **Header** (dropdown, house) · **BottomNav** · **Curtain** · **Lockup** (5 arrangements) · **BreatheMark**
 - [x] **Site brand marks** (`components/marks/`): real symbol + wordmark for TTCAB and Creeta (10/29)
 - [ ] **ThreadRail** (side graphic device — a thread running down the left linking sections) — approved,
       **already exists in ttcab** → extract.

package/components/Accordion.tsx

@@ -51,7 +51,8 @@ export function Accordion({ items, defaultOpenId, single = true }: Props) {
         return (
           <div
             key={it.id}
-            className="overflow-hidden rounded-2xl border border-line bg-surface"
+            // the Perguntas of novo.creeta: a white card (bg-card), 22px radius, no border — it reads by tone over the page
+            className="overflow-hidden rounded-[22px] bg-card px-5 md:px-7"
           >
             <h3 className="m-0">
               <button
@@ -60,13 +61,13 @@ export function Accordion({ items, defaultOpenId, single = true }: Props) {
                 aria-expanded={isOpen}
                 aria-controls={panelId}
                 onClick={() => toggle(it.id)}
-                className="flex w-full items-center justify-between gap-4 px-[clamp(18px,3vw,28px)] py-[clamp(16px,2.4vw,22px)] text-left font-heading text-[1.05rem] font-semibold text-ink transition-colors focus-visible:outline-2 focus-visible:-outline-offset-2 focus-visible:outline-ink"
+                className="flex min-h-14 w-full items-center justify-between gap-4 py-1 text-left font-heading text-lg font-medium text-ink transition-colors focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-ink"
               >
                 <span>{it.title}</span>
                 <svg
                   aria-hidden="true"
                   viewBox="0 0 24 24"
-                  className={`h-5 w-5 flex-none text-ink-soft transition-transform duration-200 ease-[cubic-bezier(.2,.8,.2,1)] motion-reduce:transition-none ${
+                  className={`h-5 w-5 flex-none text-ink transition-transform duration-200 ease-[cubic-bezier(.2,.8,.2,1)] motion-reduce:transition-none ${
                     isOpen ? "rotate-180" : ""
                   }`}
                   fill="none"
@@ -91,7 +92,8 @@ export function Accordion({ items, defaultOpenId, single = true }: Props) {
               }`}
             >
               <div className="min-h-0 overflow-hidden">
-                <div className="px-[clamp(18px,3vw,28px)] pt-0 pb-[clamp(18px,2.6vw,26px)] text-ink-body">
+                {/* full-width item, reading-width body (max-w-2xl), as the Perguntas of novo.creeta */}
+                <div className="max-w-2xl pb-5 leading-relaxed text-ink/80">
                   {it.content}
                 </div>
               </div>

package/components/AnchorNav.tsx

@@ -36,7 +36,8 @@ type Props = {
  * The active signal = the indicator (ink/12 fill + outline), NOT text color:
  * the text is always `ink` on `surface`, with no low-contrast frame.
  * prefers-reduced-motion removes the slide. Target sections need a
- * `scroll-mt-*` compatible with the sticky offset (e.g. `scroll-mt-40`).
+ * `scroll-mt-*` that, added to the theme's `scroll-padding-top` (96px), clears
+ * the header plus the capsule (e.g. `scroll-mt-20` with an 80px header).
  */
 export function AnchorNav({ items, stickyTop = "top-20", linkComponent, className = "", labels }: Props) {
   const L: ElementType = linkComponent ?? "a";
@@ -45,6 +46,10 @@ export function AnchorNav({ items, stickyTop = "top-20", linkComponent, classNam
   const listRef = useRef<HTMLUListElement>(null);
   const linkRefs = useRef<Record<string, HTMLAnchorElement | null>>({});
   const [pill, setPill] = useState({ x: 0, y: 0, w: 0, h: 0, ready: false });
+  // Stable key of the items: sites pass the array inline, so a new reference
+  // on every render. Keyed by reference, the arrival effect below re-ran on
+  // every page scroll and kept dragging the page back to the hash.
+  const key = items.map((it) => it.id).join("|");
 
   // Scroll-spy
   useEffect(() => {
@@ -63,11 +68,13 @@ export function AnchorNav({ items, stickyTop = "top-20", linkComponent, classNam
     );
     sections.forEach((s) => io.observe(s));
     return () => io.disconnect();
-  }, [items]);
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [key]);
 
   // Arriving with a #hash via client-side navigation: scrolls to the anchor (on
   // a full load the browser already does it; here it's idempotent). Reapplies a
-  // few times to beat the router's late scroll reset.
+  // few times to beat the router's late scroll reset. Runs once, on arrival:
+  // the hash the person sets by clicking a pill is the browser's job.
   useEffect(() => {
     const hash = window.location.hash.slice(1);
     if (!hash || !items.some((it) => it.id === hash)) return;
@@ -80,7 +87,8 @@ export function AnchorNav({ items, stickyTop = "top-20", linkComponent, classNam
       if (++tries >= 4) window.clearInterval(id);
     }, 60);
     return () => window.clearInterval(id);
-  }, [items]);
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [key]);
 
   const measure = () => {
     const el = linkRefs.current[active];

package/components/Avatar.tsx

@@ -0,0 +1,37 @@
+import type { ReactNode } from "react";
+
+type Props = {
+  /** Person's name: the initials fallback and nothing else (the image is decorative). */
+  name: string;
+  /** Photo src. Without it, the initials in a tinted bubble (as the team cards of novo.creeta). */
+  photo?: string;
+  /** Your own image element (e.g. next/image), replaces `photo`. */
+  children?: ReactNode;
+  /** Side in px. */
+  size?: number;
+  /** White ring, for stacked groups. */
+  ring?: boolean;
+  className?: string;
+};
+
+export const initials = (name: string) =>
+  name
+    .trim()
+    .split(/\s+/)
+    .filter((w) => w.length > 2 || w === name)
+    .slice(0, 2)
+    .map((w) => w[0]?.toUpperCase() ?? "")
+    .join("");
+
+/** Round portrait, decorative (the name is written next to it). */
+export function Avatar({ name, photo, children, size = 40, ring = false, className = "" }: Props) {
+  const style = { width: size, height: size, fontSize: Math.round(size * 0.36) };
+  const base = `inline-flex shrink-0 items-center justify-center overflow-hidden rounded-full ${ring ? "ring-2 ring-card" : ""} ${className}`;
+  if (children) return <span aria-hidden="true" className={base} style={style}>{children}</span>;
+  if (photo) return <img src={photo} alt="" loading="lazy" decoding="async" className={`${base} object-cover`} style={style} />;
+  return (
+    <span aria-hidden="true" className={`${base} bg-ink/[0.12] font-heading font-bold text-ink`} style={style}>
+      {initials(name)}
+    </span>
+  );
+}

package/components/BottomNav.tsx

@@ -282,7 +282,7 @@ const CSS = `
 .cg-more-panel{
   position:fixed; inset:auto .75rem calc(5.75rem + env(safe-area-inset-bottom)) .75rem;
   width:auto; margin:0; border:0; border-radius:26px; padding:.5rem;
-  background:#fff; color:var(--color-ink);
+  background:var(--color-card); color:var(--color-ink);
   box-shadow:0 20px 48px -16px rgb(0 0 0 / .35), 0 1px 2px rgb(0 0 0 / .1);
   opacity:0; transform:translateY(8px) scale(.97); transform-origin:88% 100%;
   transition:opacity 180ms cubic-bezier(.23,1,.32,1), transform 180ms cubic-bezier(.23,1,.32,1), overlay 180ms allow-discrete, display 180ms allow-discrete;

package/components/Breadcrumb.tsx

@@ -0,0 +1,45 @@
+import type { ElementType, ReactNode } from "react";
+
+export type Crumb = { label: ReactNode; href: string };
+
+type Props = {
+  /** From the section the page belongs to down to the parent of the current page. */
+  items: Crumb[];
+  linkComponent?: ElementType;
+  /** aria-label of the nav. */
+  label?: string;
+  className?: string;
+};
+
+// trail link: no resting underline (two underlines side by side weighed too much);
+// it shows on hover and on focus
+const link =
+  "inline-flex min-h-11 items-center text-ink underline decoration-transparent underline-offset-4 transition-[text-decoration-color] duration-150 hover:decoration-ink focus-visible:decoration-ink focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-ink motion-reduce:transition-none";
+
+/**
+ * Breadcrumb — the trail of a novo.creeta article: "← Section › Parent", so
+ * the text starts right away. The first crumb carries the back arrow; the
+ * current page is not listed (its title follows).
+ */
+export function Breadcrumb({ items, linkComponent, label = "Trail", className = "" }: Props) {
+  const L: ElementType = linkComponent ?? "a";
+  return (
+    <nav aria-label={label} className={className}>
+      <ol className="m-0 flex list-none flex-wrap items-center gap-x-2 p-0 text-sm font-semibold text-ink/80">
+        {items.map((c, i) => (
+          <li key={`${i}-${c.href}`} className="flex items-center gap-x-2">
+            {i > 0 && (
+              <svg aria-hidden="true" viewBox="0 0 24 24" width={14} height={14} className="text-ink/50" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round"><path d="m9 18 6-6-6-6" /></svg>
+            )}
+            <L href={c.href} className={`${link} ${i === 0 ? "gap-1.5" : ""}`}>
+              {i === 0 && (
+                <svg aria-hidden="true" viewBox="0 0 24 24" width={16} height={16} fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round"><path d="m12 19-7-7 7-7M19 12H5" /></svg>
+              )}
+              {c.label}
+            </L>
+          </li>
+        ))}
+      </ol>
+    </nav>
+  );
+}

package/components/BreatheMark.tsx

@@ -27,19 +27,6 @@ export function BreatheMark({
 }: Props) {
   return (
     <span className={className} style={{ display: "inline-flex", lineHeight: 0 }}>
-      <style>{`
-        @keyframes breathe-mark-inhale {
-          0%, 100% { transform: scale(0.93); }
-          50%      { transform: scale(1.05); }
-        }
-        .breathe-mark__g {
-          transform-box: fill-box;
-          transform-origin: center;
-          animation: breathe-mark-inhale var(--breathe-dur, 6s) cubic-bezier(0.37, 0, 0.63, 1) infinite;
-        }
-        .breathe-mark--static .breathe-mark__g { animation: none; }
-        @media (prefers-reduced-motion: reduce) { .breathe-mark__g { animation: none; } }
-      `}</style>
       <svg
         width={size}
         height={size}

package/components/Button.tsx

@@ -15,10 +15,17 @@ const linkBase =
   "group inline-flex items-center gap-1.5 font-body font-semibold underline decoration-[1.5px] decoration-current/50 underline-offset-4 transition-[text-decoration-color,text-underline-offset] duration-200 hover:decoration-current hover:underline-offset-[5px] focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-ink rounded-[2px] disabled:pointer-events-none disabled:opacity-50 motion-reduce:transition-none [&>svg]:transition-transform [&>svg]:duration-200 hover:[&>svg]:-translate-y-0.5 hover:[&>svg]:translate-x-0.5 motion-reduce:[&>svg]:transform-none";
 
 const variants: Record<Exclude<Variant, "link">, string> = {
-  // solid petrol, cream text (e.g. "Falar com a equipe")
-  solid: "bg-ink text-surface hover:-translate-y-0.5 shadow-[0_6px_18px_rgba(20,71,83,0.28)]",
-  // action color (orange/magenta) + on-action text (from the token, varies per site)
-  accent: "bg-action text-on-action hover:-translate-y-0.5 shadow-[0_6px_18px_rgba(20,71,83,0.22)]",
+  // Flat, as the pill buttons of novo.creeta: no drop shadow, no lift; the hover
+  // is a change of fill and the tap scales the pill (pillBase). A shadow under a
+  // hot action color read as a grey halo (2026-10-29).
+  // solid petrol, cream text (e.g. "Falar com a equipe"): hover goes to ink-soft (creeta's teal-escuro)
+  solid: "bg-ink text-surface hover:bg-ink-soft",
+  // action color (orange/magenta) + on-action text (from the token, varies per site).
+  // Same type scale as the other variants: buttons side by side must share a size.
+  // On ttcab (white on the vivid red-orange) that is 3.67:1, a conscious exception
+  // (Cloudflare and Airbnb ship the same): passes the 3:1 of UI components, not
+  // the 4.5:1 of normal text. Keep the accent for ONE large button per block.
+  accent: "bg-action text-on-action hover:brightness-[0.92]",
   outline: "border border-line text-ink hover:bg-ink/[0.05]",
   ghost: "text-ink hover:bg-ink/[0.06]",
 };

package/components/Byline.tsx

@@ -0,0 +1,105 @@
+import type { ElementType, ReactNode } from "react";
+import { Avatar } from "./Avatar";
+
+export type Person = { name: string; href?: string; photo?: string; avatar?: ReactNode };
+
+type Props = {
+  people: Person[];
+  /** Small line above the names ("Who explains"). With it, the avatars stack
+   *  and the names go on their own line; without it, one inline line:
+   *  avatar · name · action. */
+  eyebrow?: ReactNode;
+  /** Link after the name(s) ("Watch the video ↗"). */
+  action?: { label: ReactNode; href: string; external?: boolean };
+  /** Joiners between names: ", " and " and ". */
+  joiners?: { sep: string; last: string };
+  /** Wrap the names in <cite> (a testimonial's author). */
+  cite?: boolean;
+  /** sr-only after an external action link. */
+  newTabLabel?: string;
+  linkComponent?: ElementType;
+  className?: string;
+};
+
+const ArrowUpRight = () => (
+  <svg aria-hidden="true" viewBox="0 0 24 24" width={16} height={16} className="cg-arrow-go" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round"><path d="M7 17 17 7M9 7h8v8" /></svg>
+);
+
+const nameLink =
+  "underline decoration-ink/30 underline-offset-4 transition-colors duration-150 hover:decoration-ink motion-reduce:transition-none focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-ink";
+
+/**
+ * Byline — who signs or explains a piece of content, from novo.creeta:
+ * - group ("Quem explica" under the timeline): stacked portraits, an eyebrow
+ *   and the names, each one a link to the person's card;
+ * - inline (under a topic card): portrait, name and "Watch the video ↗".
+ * Portraits are decorative: the names carry the information.
+ */
+export function Byline({ people, eyebrow, action, joiners = { sep: ", ", last: " and " }, cite = false, newTabLabel = "(opens in a new tab)", linkComponent, className = "" }: Props) {
+  const L: ElementType = linkComponent ?? "a";
+  // portraits stack with a ring (as on the site); initials would lose their letters, so they sit side by side
+  const stack = people.length > 1 && people.every((p) => p.photo || p.avatar);
+  const row = `flex shrink-0 ${stack ? "-space-x-2" : "gap-1.5"}`;
+  const Names: ElementType = cite ? "cite" : "span";
+  const names = people.map((p, i) => (
+    <span key={p.name}>
+      {i > 0 && (i === people.length - 1 ? joiners.last : joiners.sep)}
+      {p.href ? (
+        <L href={p.href} className={nameLink}>{p.name}</L>
+      ) : (
+        p.name
+      )}
+    </span>
+  ));
+  // min-h-11 keeps the 44px tap target; -my-3 takes those extra 12px out of the
+  // flow, so when the link wraps under the names the two lines read as one caption
+  const actionEl = action ? (
+    <L
+      href={action.href}
+      {...(action.external ? { target: "_blank", rel: "noopener noreferrer" } : {})}
+      className="-my-3 inline-flex min-h-11 items-center gap-1 font-semibold text-ink underline underline-offset-4"
+    >
+      {action.label}
+      <ArrowUpRight />
+      {action.external && <span className="sr-only"> {newTabLabel}</span>}
+    </L>
+  ) : null;
+
+  if (eyebrow) {
+    return (
+      <div className={`flex items-center gap-3 ${className}`}>
+          <span className={row}>
+          {people.map((p) => (
+            <Avatar key={p.name} name={p.name} photo={p.photo} size={36} ring={stack}>{p.avatar}</Avatar>
+          ))}
+        </span>
+        <div className="leading-snug">
+          <p className="m-0 text-sm text-ink/80">{eyebrow}</p>
+          <p className="m-0 mt-0.5 font-semibold text-ink">
+            <Names className="not-italic">{names}</Names>
+            {actionEl && <> · {actionEl}</>}
+          </p>
+        </div>
+      </div>
+    );
+  }
+
+  return (
+    <p className={`m-0 flex items-center gap-3 text-sm text-ink/80 ${className}`}>
+      {people.length === 1 ? (
+        <Avatar name={people[0].name} photo={people[0].photo} size={40}>{people[0].avatar}</Avatar>
+      ) : (
+        <span className={row}>
+          {people.map((p) => (
+            <Avatar key={p.name} name={p.name} photo={p.photo} size={36} ring={stack}>{p.avatar}</Avatar>
+          ))}
+        </span>
+      )}
+      <span className="flex flex-wrap items-center gap-x-2">
+        <Names className="not-italic font-semibold text-ink">{names}</Names>
+        {actionEl}
+      </span>
+    </p>
+  );
+}
+

package/components/CaptionBand.tsx

@@ -0,0 +1,74 @@
+"use client";
+
+import { useCallback, useEffect, useRef, useState } from "react";
+
+/**
+ * The line being spoken right now, read from the video's WebVTT <track>
+ * (novo.creeta's `useLegenda`, components/legenda.tsx).
+ *
+ * The captions are not drawn over the picture: many of the site's videos
+ * already carry burned-in Portuguese captions, in positions that vary, and one
+ * on top of the other is unreadable. The track is the browser's (a hidden
+ * <track> it loads and syncs itself) and the text comes out beside/under the
+ * video, in `CaptionBand`.
+ *
+ * Usage: `const { line, attach } = useCaption()` and `<track ref={attach} … />`.
+ */
+export function useCaption() {
+  const [line, setLine] = useState("");
+
+  const attach = useCallback((el: HTMLTrackElement | null) => {
+    const track = el?.track;
+    if (!track) return;
+    // 'hidden': the browser loads the file and fires the events, but does not draw
+    track.mode = "hidden";
+    track.addEventListener("cuechange", () => {
+      const cue = track.activeCues?.[0] as VTTCue | undefined;
+      setLine(cue ? cue.text : "");
+    });
+  }, []);
+
+  return { line, attach };
+}
+
+type Props = {
+  /** The current cue text (from `useCaption`). Empty between cues: the band
+   *  stays, so the layout does not jump at every line. */
+  text: string;
+  /** BCP 47 tag of the captions ("en", "pt-BR"). */
+  lang: string;
+  className?: string;
+};
+
+/**
+ * Caption band of the Cuidado Global family (novo.creeta's `FaixaDeLegenda`).
+ * Fixed height of three lines so the page does not jump at every line. White
+ * on `ink` (creeta's petrol: 10.2:1). Hidden from screen readers: who neither
+ * hears nor sees uses the transcript on the page; here the text would change
+ * every two seconds.
+ *
+ * When it appears (the person pressed play) the page scrolls the least needed
+ * for the band to be in view: on phones it would be born behind the bottom
+ * bar, and the person would watch without knowing there are captions. The
+ * scroll margin is the bar's height.
+ */
+export function CaptionBand({ text, lang, className = "" }: Props) {
+  const band = useRef<HTMLParagraphElement>(null);
+
+  useEffect(() => {
+    const calm = typeof matchMedia === "function" && matchMedia("(prefers-reduced-motion: reduce)").matches;
+    band.current?.scrollIntoView?.({ block: "nearest", behavior: calm ? "auto" : "smooth" });
+  }, []);
+
+  return (
+    <p
+      ref={band}
+      aria-hidden="true"
+      lang={lang}
+      data-caption-band=""
+      className={`mt-2 flex min-h-[4.75rem] scroll-mb-28 items-center justify-center rounded-[20px] bg-ink px-4 py-2.5 text-center text-[0.9375rem] font-medium leading-snug text-white md:scroll-mb-6 ${className}`}
+    >
+      {text}
+    </p>
+  );
+}