@breathe-ds/ui 0.2.0 → 0.4.0

package/theme.css

@@ -18,12 +18,15 @@
   /* ── Colors (roles) — value comes from the site's --cg-* ── */
   --color-surface: var(--cg-surface);              /* base background */
   --color-surface-panel: var(--cg-surface-panel);  /* dark panel (footer/CTA) */
+  --color-card: var(--cg-card, #ffffff);           /* raised surface: cards, pills, menus over the page */
   --color-ink: var(--cg-ink);                      /* primary text / headings */
   --color-ink-soft: var(--cg-ink-soft);            /* secondary text */
   --color-ink-body: var(--cg-ink-body);            /* body copy */
   --color-action: var(--cg-action);                /* CTA/highlight — never plain text */
   --color-action-text: var(--cg-action-text);      /* text in the action color (AA) */
   --color-on-action: var(--cg-on-action);          /* text ON the action color (button) */
+  --color-action-tint: var(--cg-action-tint, var(--cg-surface));  /* highlighted panel/card: a 6% wash of the action color */
+  --color-action-line: var(--cg-action-line, var(--cg-action));   /* border of a highlighted card (3:1 on surface) */
   --color-line: var(--cg-line);                    /* hairlines/borders */
 
   /* ── Typography (roles; actual family comes from --cg-font-*) ── */
@@ -38,3 +41,206 @@
   /* ── Motion — the family's signature curve ── */
   --ease-cg: cubic-bezier(0.2, 0.8, 0.2, 1);
 }
+
+/* ── Base behaviour the whole family shares ──
+   Smooth scrolling for anchors (AnchorNav, "On this page", BottomNav); off
+   for people who asked for reduced motion. The header sticks at the top
+   (~5rem) and, on phones, the BottomNav sticks at the bottom: without this
+   padding the control that receives keyboard focus would stop hidden behind
+   them (WCAG 2.4.11). Anchored sections may still add their own scroll-margin. */
+@layer base {
+  html {
+    scroll-behavior: smooth;
+    scroll-padding-top: 6rem;
+    scroll-padding-bottom: 7rem;
+  }
+  @media (prefers-reduced-motion: reduce) {
+    html {
+      scroll-behavior: auto;
+    }
+  }
+  /* Tailwind v4's reset leaves buttons with the default cursor; in the family
+     everything that can be tapped shows the hand: buttons, links, the summary
+     of a collapse, labels of controls, selects. Disabled ones keep the arrow. */
+  button:not(:disabled),
+  [role="button"]:not([aria-disabled="true"]),
+  a[href],
+  summary,
+  label[for],
+  select:not(:disabled),
+  input[type="checkbox"]:not(:disabled),
+  input[type="radio"]:not(:disabled),
+  input[type="file"]:not(:disabled) {
+    cursor: pointer;
+  }
+}
+
+/* Outbound/anchor arrow on links: takes a small step toward where the link
+   goes, on hover. Used by Footer, List, Byline, PersonChip, PillList. */
+@media (prefers-reduced-motion: no-preference) {
+  .cg-arrow-go {
+    transition: transform 150ms var(--ease-cg);
+  }
+  a:hover .cg-arrow-go,
+  .group:hover .cg-arrow-go {
+    transform: translate(2px, -2px);
+  }
+  .cg-arrow-down {
+    transition: transform 150ms var(--ease-cg);
+  }
+  a:hover .cg-arrow-down,
+  .group:hover .cg-arrow-down {
+    transform: translateY(2px);
+  }
+}
+
+/* ── BreatheMark: the symbol "breathes" (scale pulse); off under reduced motion ── */
+@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; } }
+      
+
+/* ── Lockup entrance: symbol (scale + slight turn) → name (slides in) → tagline.
+   Same vocabulary as the Curtain; under reduced motion only a short fade. ── */
+.cg-lockup--entrance .cg-lockup__mark{ animation: cg-lockup-mark 500ms var(--ease-cg,cubic-bezier(.2,.8,.2,1)) var(--cg-entrance-delay,0ms) both; }
+.cg-lockup--entrance .cg-lockup__name{ animation: cg-lockup-name 420ms var(--ease-cg,cubic-bezier(.2,.8,.2,1)) calc(var(--cg-entrance-delay,0ms) + 420ms) both; }
+.cg-lockup--entrance .cg-lockup__tag{ animation: cg-lockup-tag 360ms ease calc(var(--cg-entrance-delay,0ms) + 700ms) both; }
+@keyframes cg-lockup-mark{ from{ opacity:0; transform:scale(.6) rotate(-16deg); } }
+@keyframes cg-lockup-name{ from{ opacity:0; transform:translateX(-8px); } }
+@keyframes cg-lockup-tag{ from{ opacity:0; transform:translateY(4px); } }
+@media (prefers-reduced-motion:reduce){
+  .cg-lockup--entrance .cg-lockup__mark, .cg-lockup--entrance .cg-lockup__name, .cg-lockup--entrance .cg-lockup__tag{ animation: cg-lockup-fade 240ms ease var(--cg-entrance-delay,0ms) both; }
+  @keyframes cg-lockup-fade{ from{ opacity:0; } }
+}
+
+/* Rail: the horizontal list hides its scrollbar (the progress bar under it says how much is left). */
+.cg-no-scrollbar {
+  scrollbar-width: none;
+}
+.cg-no-scrollbar::-webkit-scrollbar {
+  display: none;
+}
+
+/* ── Care flow drawings (CareSteps): ChatPreview, PlanTimeline, PhotoSequence ──
+   Ported from novo.creeta's globals.css. Only opacity and transform. */
+
+/* ChatPreview: each bubble animates when it enters; the component sets the
+   rhythm (and the loop). Nothing animates without data-state="playing". */
+@keyframes cg-bubble-in {
+  from {
+    opacity: 0;
+    transform: translateY(8px) scale(0.96);
+  }
+}
+@keyframes cg-dot-pulse {
+  0%,
+  60%,
+  100% {
+    opacity: 0.35;
+    transform: none;
+  }
+  30% {
+    opacity: 1;
+    transform: translateY(-2px);
+  }
+}
+.cg-chat[data-state="playing"] .cg-bubble {
+  animation: cg-bubble-in 320ms cubic-bezier(0.23, 1, 0.32, 1) both;
+}
+.cg-chat[data-state="playing"] .cg-typing i {
+  animation: cg-dot-pulse 900ms ease-in-out calc(var(--n) * 140ms) infinite;
+}
+.cg-chat[data-paused] .cg-bubble,
+.cg-chat[data-paused] .cg-typing i {
+  animation-play-state: paused;
+}
+
+/* PlanTimeline, 6s loop: the line comes down from 0.2s to 1.7s and each dot
+   lights up when it arrives (0.2s, 0.95s, 1.7s); everything stays lit until
+   5.1s, goes off and restarts. One set of keyframes per dot. */
+@keyframes cg-plan-line {
+  0%, 3.3% { opacity: 1; transform: scaleY(0); }
+  28.3%, 85% { opacity: 1; transform: scaleY(1); }
+  92%, 100% { opacity: 0; transform: scaleY(1); }
+}
+@keyframes cg-plan-dot-1 {
+  0%, 3.3% { opacity: 0; transform: scale(0.3); }
+  8.6%, 85% { opacity: 1; transform: none; }
+  92%, 100% { opacity: 0; transform: scale(0.3); }
+}
+@keyframes cg-plan-dot-2 {
+  0%, 15.8% { opacity: 0; transform: scale(0.3); }
+  21.1%, 85% { opacity: 1; transform: none; }
+  92%, 100% { opacity: 0; transform: scale(0.3); }
+}
+@keyframes cg-plan-dot-3 {
+  0%, 28.3% { opacity: 0; transform: scale(0.3); }
+  33.6%, 85% { opacity: 1; transform: none; }
+  92%, 100% { opacity: 0; transform: scale(0.3); }
+}
+/* The name out of turn stays at 75%, not less: ink at 75% over the card still
+   passes AA (creeta measured 5.03:1; at 45% it failed, WCAG 1.4.3). */
+@keyframes cg-plan-name-1 {
+  0%, 3.3%, 92%, 100% { opacity: 0.75; }
+  8.6%, 85% { opacity: 1; }
+}
+@keyframes cg-plan-name-2 {
+  0%, 15.8%, 92%, 100% { opacity: 0.75; }
+  21.1%, 85% { opacity: 1; }
+}
+@keyframes cg-plan-name-3 {
+  0%, 28.3%, 92%, 100% { opacity: 0.75; }
+  33.6%, 85% { opacity: 1; }
+}
+.cg-plan[data-state="waiting"] .cg-plan-line { transform: scaleY(0); }
+.cg-plan[data-state="waiting"] .cg-plan-dot { opacity: 0; }
+.cg-plan[data-state="waiting"] .cg-plan-name { opacity: 0.75; }
+.cg-plan[data-state="playing"] .cg-plan-line { animation: cg-plan-line 6s linear infinite; }
+.cg-plan[data-state="playing"] .cg-plan-step[data-n="1"] .cg-plan-dot { animation: cg-plan-dot-1 6s cubic-bezier(0.23, 1, 0.32, 1) infinite; }
+.cg-plan[data-state="playing"] .cg-plan-step[data-n="2"] .cg-plan-dot { animation: cg-plan-dot-2 6s cubic-bezier(0.23, 1, 0.32, 1) infinite; }
+.cg-plan[data-state="playing"] .cg-plan-step[data-n="3"] .cg-plan-dot { animation: cg-plan-dot-3 6s cubic-bezier(0.23, 1, 0.32, 1) infinite; }
+.cg-plan[data-state="playing"] .cg-plan-step[data-n="1"] .cg-plan-name { animation: cg-plan-name-1 6s ease infinite; }
+.cg-plan[data-state="playing"] .cg-plan-step[data-n="2"] .cg-plan-name { animation: cg-plan-name-2 6s ease infinite; }
+.cg-plan[data-state="playing"] .cg-plan-step[data-n="3"] .cg-plan-name { animation: cg-plan-name-3 6s ease infinite; }
+/* Paused on the button, or off screen. Same weight as the rules above and after them. */
+.cg-plan[data-state][data-stopped] .cg-plan-line,
+.cg-plan[data-state][data-stopped] .cg-plan-step .cg-plan-dot,
+.cg-plan[data-state][data-stopped] .cg-plan-step .cg-plan-name {
+  animation-play-state: paused;
+}
+
+/* PhotoSequence: the hidden checkbox pauses the photos through CSS. */
+.cg-seq-pause:checked ~ .cg-seq img {
+  animation-play-state: paused !important;
+}
+
+/* Reduced motion: the components do not even start; this is the second lock,
+   in case the preference changes with the page open. The sequence keeps the
+   first photo and loses the control (a nameless checkbox in the tab order
+   would fail WCAG 4.1.2). */
+@media (prefers-reduced-motion: reduce) {
+  .cg-chat .cg-bubble,
+  .cg-chat .cg-typing i,
+  .cg-plan .cg-plan-line,
+  .cg-plan .cg-plan-dot,
+  .cg-plan .cg-plan-name {
+    animation: none !important;
+    opacity: 1;
+    transform: none;
+  }
+  .cg-seq img {
+    animation: none !important;
+  }
+  .cg-seq-control,
+  .cg-seq-pause {
+    display: none;
+  }
+}

package/tokens/creeta.css

@@ -2,17 +2,22 @@
   Creeta palette (RTA clinic in Floripa) — petrol + mist + magenta.
   Values from novo.creeta. Measured contrasts (WCAG formula):
    - surface #eef3f4 / ink #144753 ............ ~9.1:1 (AAA)
-   - surface #eef3f4 / ink-soft #52707a ....... ~4.7:1 (AA)
+   - surface #eef3f4 / ink-soft #266675 ....... 5.79:1 (AA) — the site's "teal-escuro":
+     second tone of two-tone headings, eyebrows, strong links
+   - surface #eef3f4 / ink-body #1e4f5b ....... 8.07:1 (AAA)
    - action #ab2781 (magenta) is the CTA ("Agendar"); text on it = white.
 */
 :root {
   --cg-surface: #eef3f4;        /* mist */
   --cg-surface-panel: #144753;  /* petrol */
+  --cg-card: #ffffff;           /* cards, pills and menus over the page */
   --cg-ink: #144753;            /* petrol */
-  --cg-ink-soft: #52707a;
+  --cg-ink-soft: #266675;       /* teal-escuro */
   --cg-ink-body: #1e4f5b;
   --cg-action: #ab2781;         /* magenta (Agendar) */
   --cg-action-text: #8f1f6c;    /* darker magenta for text */
+  --cg-action-tint: #eae7ed;  /* 6% magenta over mist: highlighted card */
+  --cg-action-line: #ab2781;    /* magenta itself: 5.62:1 on mist */
   --cg-on-action: #ffffff;      /* white on magenta */
   --cg-line: rgb(20 71 83 / 0.16);
   --cg-font-heading: var(--font-quicksand), system-ui, sans-serif;  /* Quicksand */

package/tokens/neutral.css

@@ -3,17 +3,25 @@
   purpose: color comes from EACH application (ttcab, creeta…). Use this as the
   base and override the --cg-* in your site's :root. Monochrome (gray/near-black)
   to make it clear it is a "bring your own color" placeholder.
-   - surface #ffffff / ink #18181b ............ ~17:1 (AAA)
-   - surface #ffffff / ink-soft #71717a ....... ~4.8:1 (AA)
+  The page is a light gray and the cards are white: the family is tonal (mist on
+  creeta, cream on ttcab), so the neutral palette is too — a white page would
+  swallow the white cards.
+   - surface #f4f4f5 / ink #18181b ............ 16.1:1 (AAA)
+   - surface #f4f4f5 / ink-soft #65656e ....... 5.25:1 (AA)
+   - surface #f4f4f5 / ink-body #3f3f46 ....... 9.5:1 (AAA)
+   - card #ffffff / ink-soft #65656e .......... 5.77:1 (AA)
 */
 :root {
-  --cg-surface: #ffffff;
+  --cg-surface: #f4f4f5;        /* page: light gray, so white cards read */
   --cg-surface-panel: #18181b;
+  --cg-card: #ffffff;
   --cg-ink: #18181b;
-  --cg-ink-soft: #71717a;
+  --cg-ink-soft: #65656e;
   --cg-ink-body: #3f3f46;
   --cg-action: #18181b;
   --cg-action-text: #52525b;
+  --cg-action-tint: #e9e9ea;
+  --cg-action-line: #18181b;
   --cg-on-action: #ffffff;
   --cg-line: rgb(0 0 0 / 0.12);
   --cg-font-heading: var(--font-quicksand), system-ui, sans-serif;  /* Quicksand (fixed across the family) */

package/tokens/ttcab.css

@@ -3,19 +3,28 @@
    - 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)
    - surface-panel #144753 / surface (text) ... 9.41:1 (AAA)
-   - action #f6a22a is DECORATIVE/CTA — never text on cream.
+   - action #e8541e / on-action #ffffff ...... 3.67:1 — the accent button
+   The action color is a vivid red-orange with WHITE text (decided 2026-10-29,
+   the Cloudflare/Airbnb route): 3.67:1 passes the 3:1 of UI components and of
+   large text, NOT the 4.5:1 of normal text. Conscious exception, limited to the
+   accent Button (one per block, same type scale as the other buttons). Small
+   controls never put white on it (ink, or action-tint + action-text). The logo
+   keeps its own #f6a22a.
 */
 :root {
   --cg-surface: #fbf5e9;
   --cg-surface-panel: #144753;
+  --cg-card: #ffffff;           /* cards, pills and menus over the page */
   --cg-ink: #144753;
   --cg-ink-soft: #54707a;
   --cg-ink-body: #1e4f5b;
-  --cg-action: #f6a22a;
-  --cg-on-action: #144753;   /* ink on orange */
-  --cg-action-text: #9a5d07;
+  --cg-action: #e8541e;      /* vivid red-orange: white on it 3.67:1 (large text / UI 3:1) */
+  --cg-on-action: #ffffff;
+  --cg-action-text: #bd3f0c;   /* 4.98:1 on cream, 4.64:1 on the tint */
+  --cg-action-tint: #faebdd;   /* 6% action over cream: highlighted card (ink 8.75:1) */
+  --cg-action-line: #e8541e;   /* the action color itself: 3.38:1 on cream */
   --cg-line: rgb(20 71 83 / 0.16);
   --cg-font-heading: var(--font-quicksand), system-ui, sans-serif;  /* Quicksand */
   --cg-font-body: var(--font-figtree), system-ui, sans-serif;      /* Figtree */