/* ForgeOS Life — the shared design layer. One look for every page.
*
* Asked for on 2026-09-30: "Provide some life into ForgeOS ... catchy, sticky,
* interesting, amusing, light, visual, impressive", then "make it beautiful",
* then "make the entire website this way". This file is the one place that
* look lives, so every page -- public or signed in -- can take it by adding
*
* after the page's own sheet
* (motion helpers, optional)
*
* and using the classes below. Everything is prefixed `life-` so nothing here
* can restyle a page that has not opted in. Colour comes only from the
* Medina19 platform tokens (medina19-platform-tokens.css, which every page
* already loads first), so light, dark and the theme toggle all follow.
*
* Tokens (custom properties on :root)
* --life-display / --life-text / --life-mono Geist display, Inter/system text, Geist Mono
* --life-t-hero, -1, -2, -3, -body, -small, -micro type scale (fluid at the top)
* --life-ink, -ink-2, -ink-3, --life-canvas, --life-surface, --life-glass, --life-line
* --life-brand, --life-brand-ink, --life-brand-soft, --life-spectrum
* --life-r-sm | --life-r | --life-r-lg | --life-r-xl | --life-r-pill radii
* --life-shadow-1 | -2 | -3, --life-glow depth
* --life-ease (cubic-bezier(.2,.8,.2,1)), --life-spring, --life-d1 200ms, --life-d2 360ms, --life-d3 600ms
*
* Type .life-eyebrow .life-display .life-title .life-lede .life-gradient-text
* Actions .life-btn (+ .life-btn--primary | --ghost | --soft | --sm) .life-chip
* Surfaces .life-card (+ --glass | --interactive) .life-hero .life-section-head
* .life-grid > .life-feature (.life-feature-icon, h3, p)
* .life-callout (+ --info | --success | --warning) .life-empty (.life-empty-art)
* Live .life-pulse (a breathing dot) .life-toasts > .life-toast (ForgeOSLife.toast)
* Reveal .life-device (.life-device-bar, .life-device-screen): a browser frame that settles in
* [data-life-reveal]: rises in when scrolled into view (ForgeOSLife.observe)
* .life-shimmer: one sheen across a surface .life-glow: a soft brand halo
* .life-confetti > i: the burst ForgeOSLife.celebrate() draws, once
* Palettes .life-p1 ... .life-p8 set --pa (accent) --pb (soft) --pc (deep) for SVG
* illustrations, whose shapes use .t-a .t-b .t-c .t-ink .t-paper .t-line
*
* Motion is decoration, never information: prefers-reduced-motion switches every
* animation and transition in this layer off, and nothing waits on one.
*/
@font-face { font-family: "Geist"; src: url(/assets/fonts/geist-latin.woff2) format("woff2"); font-weight: 100 900; font-display: swap; }
@font-face { font-family: "Geist Mono"; src: url(/assets/fonts/geist-mono-latin.woff2) format("woff2"); font-weight: 100 900; font-display: swap; }
:root {
--life-display: "Geist", var(--m19-font);
--life-text: var(--m19-font);
--life-mono: "Geist Mono", var(--m19-font-mono);
--life-t-hero: clamp(40px, 6.2vw, 84px);
--life-t-1: clamp(30px, 4vw, 52px);
--life-t-2: clamp(22px, 2.4vw, 30px);
--life-t-3: 18px;
--life-t-body: 16px;
--life-t-small: 14px;
--life-t-micro: 12px;
--life-ink: var(--m19-ink);
--life-ink-2: var(--m19-ink-2);
--life-ink-3: var(--m19-ink-3);
--life-canvas: var(--m19-canvas);
--life-surface: var(--m19-surface);
--life-glass: color-mix(in srgb, var(--m19-surface) 72%, transparent);
--life-line: var(--m19-line);
--life-brand: var(--m19-brand-600);
--life-brand-ink: var(--m19-brand-700);
--life-brand-soft: var(--m19-brand-050);
--life-on-brand: var(--m19-on-accent-light);
--life-spectrum: var(--m19-spectrum);
--life-aura: radial-gradient(60% 80% at 20% 0%, color-mix(in srgb, var(--m19-brand-500) 18%, transparent), transparent 70%),
radial-gradient(50% 70% at 90% 10%, color-mix(in srgb, var(--m19-spectrum-3) 12%, transparent), transparent 70%);
--life-r-sm: 10px; --life-r: 16px; --life-r-lg: 22px; --life-r-xl: 28px; --life-r-pill: 999px;
--life-shadow-1: 0 1px 2px rgba(16,24,40,.05), 0 2px 6px -2px rgba(16,24,40,.06);
--life-shadow-2: 0 1px 2px rgba(16,24,40,.04), 0 14px 34px -14px rgba(16,24,40,.18);
--life-shadow-3: 0 2px 6px rgba(16,24,40,.05), 0 40px 80px -30px rgba(40,34,120,.34);
--life-glow: 0 0 0 1px color-mix(in srgb, var(--m19-brand-500) 26%, transparent), 0 24px 60px -22px color-mix(in srgb, var(--m19-brand-500) 60%, transparent);
--life-ease: cubic-bezier(.2,.8,.2,1);
--life-spring: cubic-bezier(.34,1.4,.64,1);
--life-d1: 200ms; --life-d2: 360ms; --life-d3: 600ms;
}
@media (prefers-color-scheme: dark) {
:root:not([data-m19-theme="light"]) {
--life-shadow-1: 0 1px 2px rgba(0,0,0,.4);
--life-shadow-2: 0 1px 2px rgba(0,0,0,.4), 0 18px 40px -16px rgba(0,0,0,.6);
--life-shadow-3: 0 2px 6px rgba(0,0,0,.4), 0 44px 90px -30px rgba(0,0,0,.8);
}
}
:root[data-m19-theme="dark"] {
--life-shadow-1: 0 1px 2px rgba(0,0,0,.4);
--life-shadow-2: 0 1px 2px rgba(0,0,0,.4), 0 18px 40px -16px rgba(0,0,0,.6);
--life-shadow-3: 0 2px 6px rgba(0,0,0,.4), 0 44px 90px -30px rgba(0,0,0,.8);
}
/* ── Type ───────────────────────────────────────────────────────────────── */
.life-eyebrow { display: inline-flex; align-items: center; gap: 8px; margin: 0; font: 500 var(--life-t-micro)/1.2 var(--life-mono); letter-spacing: .1em; text-transform: uppercase; color: var(--life-brand-ink); }
.life-display { margin: 0; font: 680 var(--life-t-hero)/.98 var(--life-display); letter-spacing: -.045em; color: var(--life-ink); text-wrap: balance; }
.life-title { margin: 0; font: 650 var(--life-t-2)/1.12 var(--life-display); letter-spacing: -.03em; color: var(--life-ink); text-wrap: balance; }
.life-lede { margin: 12px 0 0; max-width: 56ch; font: 400 var(--life-t-3)/1.55 var(--life-text); color: var(--life-ink-3); text-wrap: pretty; }
.life-gradient-text { background: linear-gradient(95deg, var(--m19-brand-500), var(--m19-spectrum-2) 45%, var(--m19-spectrum-3)); -webkit-background-clip: text; background-clip: text; color: transparent; }
/* ── Actions ────────────────────────────────────────────────────────────── */
.life-btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: var(--m19-tap, 44px); padding: 0 20px; border-radius: var(--life-r-pill); border: 1px solid var(--life-line); background: var(--life-surface); color: var(--life-ink); font: 600 15px/1 var(--life-display); letter-spacing: -.01em; cursor: pointer; text-decoration: none; transition: transform var(--life-d1) var(--life-ease), box-shadow var(--life-d1) var(--life-ease), background var(--life-d1); }
.life-btn:hover { transform: translateY(-1px); box-shadow: var(--life-shadow-2); }
.life-btn:active { transform: translateY(0) scale(.98); }
.life-btn:focus-visible, .life-chip:focus-visible, .life-card--interactive:focus-visible { outline: 3px solid var(--m19-brand-400); outline-offset: 2px; }
.life-btn--primary { background: var(--life-brand); border-color: transparent; color: var(--life-on-brand); box-shadow: inset 0 1px 0 rgba(255,255,255,.2), 0 10px 24px -12px var(--m19-brand-600); }
.life-btn--primary:hover { background: var(--m19-brand-700); color: var(--life-on-brand); }
:root[data-m19-theme="dark"] .life-btn--primary:hover { background: var(--m19-brand-600); }
.life-btn--ghost { background: transparent; }
.life-btn--soft { background: var(--life-brand-soft); border-color: transparent; color: var(--life-brand-ink); }
.life-btn--sm { min-height: 36px; padding: 0 14px; font-size: 14px; }
.life-chip { display: inline-flex; align-items: center; gap: 6px; min-height: 36px; padding: 0 14px; border-radius: var(--life-r-pill); border: 1px solid var(--life-line); background: var(--life-glass); color: var(--life-ink-2); font: 500 var(--life-t-small)/1 var(--life-text); cursor: pointer; transition: border-color var(--life-d1), color var(--life-d1), transform var(--life-d1) var(--life-ease); }
.life-chip:hover { border-color: var(--m19-brand-400); color: var(--life-brand-ink); transform: translateY(-1px); }
/* ── Surfaces ───────────────────────────────────────────────────────────── */
.life-card { position: relative; border: 1px solid var(--life-line); border-radius: var(--life-r-lg); background: var(--life-surface); box-shadow: var(--life-shadow-1); padding: 20px; color: var(--life-ink); }
.life-card--glass { background: var(--life-glass); -webkit-backdrop-filter: blur(14px) saturate(1.2); backdrop-filter: blur(14px) saturate(1.2); }
.life-card--interactive { cursor: pointer; transition: transform var(--life-d2) var(--life-ease), box-shadow var(--life-d2) var(--life-ease), border-color var(--life-d2); }
.life-card--interactive:hover { transform: translateY(-3px); box-shadow: var(--life-shadow-2); border-color: color-mix(in srgb, var(--m19-brand-500) 36%, var(--life-line)); }
.life-hero { position: relative; isolation: isolate; padding: clamp(48px, 8vw, 112px) 16px clamp(40px, 6vw, 80px); text-align: center; }
.life-hero::before { content: ""; position: absolute; inset: 0; z-index: -1; background: var(--life-aura); pointer-events: none; }
.life-hero .life-lede { margin-inline: auto; }
.life-section-head { max-width: 720px; margin: 0 auto 32px; text-align: center; }
.life-section-head .life-title { margin-top: 10px; font-size: var(--life-t-1); }
.life-section-head .life-lede { margin-inline: auto; }
.life-grid { display: grid; gap: 16px; grid-template-columns: repeat(auto-fit, minmax(min(100%, 240px), 1fr)); }
.life-feature { border: 1px solid var(--life-line); border-radius: var(--life-r-lg); background: var(--life-surface); padding: 22px; box-shadow: var(--life-shadow-1); }
.life-feature h3 { margin: 14px 0 6px; font: 620 var(--life-t-3)/1.25 var(--life-display); letter-spacing: -.02em; color: var(--life-ink); }
.life-feature p { margin: 0; font: 400 var(--life-t-small)/1.55 var(--life-text); color: var(--life-ink-3); }
.life-feature-icon { display: grid; place-items: center; width: 40px; height: 40px; border-radius: 12px; background: var(--life-brand-soft); color: var(--life-brand-ink); }
.life-feature-icon svg { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.life-callout { display: flex; gap: 12px; align-items: flex-start; padding: 14px 16px; border-radius: var(--life-r); border: 1px solid var(--life-line); background: var(--m19-surface-2); color: var(--life-ink-2); font: 400 var(--life-t-small)/1.5 var(--life-text); }
.life-callout--info { background: var(--m19-state-info-soft); color: var(--m19-state-info-ink); border-color: transparent; }
.life-callout--success { background: var(--m19-state-success-soft); color: var(--m19-state-success-ink); border-color: transparent; }
.life-callout--warning { background: var(--m19-state-warning-soft); color: var(--m19-state-warning-ink); border-color: transparent; }
.life-empty { display: grid; justify-items: center; gap: 10px; padding: 40px 20px; text-align: center; color: var(--life-ink-3); }
.life-empty-art { width: 120px; height: 90px; }
.life-empty strong { font: 620 var(--life-t-3)/1.3 var(--life-display); color: var(--life-ink); }
/* ── Live ───────────────────────────────────────────────────────────────── */
.life-pulse { position: relative; display: inline-block; width: 8px; height: 8px; border-radius: 50%; background: var(--m19-brand-500); flex: none; }
.life-pulse::after { content: ""; position: absolute; inset: -4px; border-radius: 50%; border: 2px solid var(--m19-brand-400); opacity: 0; animation: life-ping 1.8s var(--life-ease) infinite; }
@keyframes life-ping { 0% { transform: scale(.5); opacity: .7; } 100% { transform: scale(1.6); opacity: 0; } }
.life-toasts { position: fixed; z-index: 90; left: 50%; bottom: max(20px, env(safe-area-inset-bottom)); transform: translateX(-50%); display: grid; gap: 8px; width: min(92vw, 420px); pointer-events: none; }
.life-toast { pointer-events: auto; padding: 12px 16px; border-radius: var(--life-r); background: var(--m19-ink); color: var(--m19-canvas); box-shadow: var(--life-shadow-3); font: 500 var(--life-t-small)/1.4 var(--life-text); animation: life-rise var(--life-d2) var(--life-ease) both; }
/* ── Reveal ─────────────────────────────────────────────────────────────── */
@keyframes life-rise { from { opacity: 0; transform: translateY(14px) scale(.985); } to { opacity: 1; transform: none; } }
@keyframes life-settle { 0% { opacity: 0; transform: translateY(28px) scale(.94) rotateX(8deg); } 70% { opacity: 1; transform: translateY(-3px) scale(1.005); } 100% { opacity: 1; transform: none; } }
@keyframes life-sheen { from { transform: translateX(-120%) skewX(-18deg); } to { transform: translateX(260%) skewX(-18deg); } }
@keyframes life-fly { 0% { transform: translate(0, 0) rotate(0); opacity: 1; } 100% { transform: translate(var(--dx, 0px), var(--dy, 0px)) rotate(var(--rot, 0deg)); opacity: 0; } }
.life-pending { opacity: 0; transform: translateY(14px); }
.life-in { animation: life-rise var(--life-d3) var(--life-ease) both; animation-delay: calc(var(--i, 0) * 70ms); }
.life-device { position: relative; border-radius: var(--life-r-lg); border: 1px solid var(--life-line); background: var(--life-surface); box-shadow: var(--life-shadow-3); overflow: hidden; perspective: 1200px; }
.life-device.is-settling { animation: life-settle 820ms var(--life-ease) both; }
.life-device-bar { display: flex; align-items: center; gap: 6px; height: 32px; padding: 0 12px; border-bottom: 1px solid var(--life-line); background: var(--m19-surface-2); }
.life-device-bar i { width: 9px; height: 9px; border-radius: 50%; background: var(--m19-line-strong); }
.life-device-bar i:nth-child(1) { background: var(--m19-state-danger); } .life-device-bar i:nth-child(2) { background: var(--m19-state-warning); } .life-device-bar i:nth-child(3) { background: var(--m19-state-success); }
.life-device-url { flex: 1; margin-left: 8px; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; font: 500 11.5px/1 var(--life-mono); color: var(--life-ink-3); }
.life-glow { box-shadow: var(--life-glow), var(--life-shadow-3); }
.life-shimmer { position: relative; overflow: hidden; }
.life-shimmer::after { content: ""; position: absolute; top: 0; bottom: 0; left: 0; width: 40%; pointer-events: none; background: linear-gradient(90deg, transparent, rgba(255,255,255,.42), transparent); animation: life-sheen 1.3s var(--life-ease) .35s 1 both; }
.life-confetti { position: fixed; z-index: 95; width: 0; height: 0; pointer-events: none; }
.life-confetti i { position: absolute; left: 0; top: 0; width: 7px; height: 11px; border-radius: 2px; background: var(--c, var(--m19-brand-500)); animation: life-fly var(--t, 1100ms) cubic-bezier(.15,.7,.3,1) forwards; }
/* ── Palettes for illustrations (identity accents, never state) ─────────── */
.life-p1 { --pa: var(--m19-product-atelier); --pc: var(--m19-brand-700); }
.life-p2 { --pa: var(--m19-product-asterline); --pc: var(--m19-product-product-design); }
.life-p3 { --pa: var(--m19-product-frameforge); --pc: var(--m19-product-automation-studio); }
.life-p4 { --pa: var(--m19-product-lumaloop-ai); --pc: var(--m19-product-health-human-services); }
.life-p5 { --pa: var(--m19-product-neora-ai-chatroom); --pc: var(--m19-product-finance); }
.life-p6 { --pa: var(--m19-product-quillforge); --pc: var(--m19-product-knowledge-base); }
.life-p7 { --pa: var(--m19-product-auralis); --pc: var(--m19-product-civic-atlas); }
.life-p8 { --pa: var(--m19-product-sculptura); --pc: var(--m19-product-asterline); }
.life-p1, .life-p2, .life-p3, .life-p4, .life-p5, .life-p6, .life-p7, .life-p8 { --pb: color-mix(in srgb, var(--pa) 16%, var(--m19-surface)); }
.t-a { fill: var(--pa); } .t-b { fill: var(--pb); } .t-c { fill: var(--pc); }
.t-ink { fill: var(--m19-ink); } .t-paper { fill: var(--m19-surface); } .t-soft { fill: var(--m19-surface-3); }
.t-line { fill: none; stroke: var(--m19-line-strong); stroke-width: 2; stroke-linecap: round; }
.t-stroke { fill: none; stroke: var(--pa); stroke-width: 3; stroke-linecap: round; stroke-linejoin: round; }
@media (prefers-reduced-motion: reduce) {
.life-btn, .life-chip, .life-card--interactive, .life-toast, .life-in, .life-device, .life-device.is-settling,
.life-pulse::after, .life-shimmer::after, .life-confetti, .life-confetti i { animation: none !important; transition: none !important; }
.life-pending { opacity: 1; transform: none; }
.life-confetti { display: none; }
}
/* ── Fresh air: the brand feel, on every page (owner, 2026-10-03) ──────────
* "It should always be leading people in the right direction ... like a
* breath of fresh air", "portrayed with our entire company and website
* design." One calm system every page inherits: an airy spacing scale, one
* accent, soft depth, gentle motion, and one primary-action pattern -- the
* one obvious next step on a screen looks and moves the same everywhere.
* Colour still comes only from the Medina19 tokens. */
:root {
--air-1: 4px; --air-2: 8px; --air-3: 12px; --air-4: 16px; --air-5: 24px; --air-6: 32px; --air-7: 48px; --air-8: 72px;
--air-measure: 60ch;
--air-accent: var(--m19-brand-600);
--air-accent-soft: var(--m19-brand-050);
--air-radius: 16px;
--air-shadow: 0 1px 2px rgba(15, 23, 42, .04), 0 8px 24px -12px rgba(15, 23, 42, .14);
--air-ease: cubic-bezier(.2, .8, .2, 1);
--air-spring: cubic-bezier(.34, 1.56, .64, 1);
--air-dur: 180ms;
--air-dur-2: 260ms;
--air-dur-3: 420ms;
/* One type scale, a gentle 1.2 step: small print to a hero line. */
--air-text-xs: .8125rem; --air-text-sm: .9375rem; --air-text-md: 1rem; --air-text-lg: 1.2rem;
--air-text-xl: 1.44rem; --air-text-2xl: 1.728rem; --air-text-3xl: clamp(2rem, 1.4rem + 2.6vw, 3.2rem);
--air-leading: 1.6; --air-leading-tight: 1.15;
}
/* Words that breathe: balanced headings, no lone last word in a paragraph. */
:is(h1, h2, h3) { text-wrap: balance; }
p { text-wrap: pretty; }
/* The primary action: pill, soft lift on hover, a small press, a clear ring. */
:is(.btn-primary, .os-btn-primary, .life-btn--primary, .cw-send, .cw-new-chat) {
border-radius: 999px;
box-shadow: var(--air-shadow);
transition: transform var(--air-dur) var(--air-spring), box-shadow var(--air-dur) var(--air-ease), background-color var(--air-dur) var(--air-ease), filter var(--air-dur) var(--air-ease);
}
:is(.btn-primary, .os-btn-primary, .life-btn--primary, .cw-new-chat):hover { transform: translateY(-1px); }
:is(.btn-primary, .os-btn-primary, .life-btn--primary, .cw-send, .cw-new-chat):active { transform: scale(.97); }
:is(.btn-primary, .os-btn-primary, .life-btn--primary, .cw-send, .cw-new-chat):focus-visible { outline: 3px solid var(--m19-brand-400); outline-offset: 2px; }
/* Gentle motion on everything pressable; disclosures open with room to breathe. */
:is(a, button, summary) { transition-timing-function: var(--air-ease); }
details > summary { cursor: pointer; }
details[open] > summary { margin-bottom: var(--air-2); }
@media (prefers-reduced-motion: reduce) {
:is(.btn-primary, .os-btn-primary, .life-btn--primary, .cw-send, .cw-new-chat) { transition: none !important; transform: none !important; }
}
/* A finger needs room: every control at least 44x44 CSS px on touch screens
(WCAG 2.5.5). Inline links in running text keep their line height. */
@media (pointer: coarse) {
:is(button, .btn, a.btn, [role="button"], [role="tab"], [role="switch"], summary, select,
input:not([type="checkbox"]):not([type="radio"]):not([type="hidden"]):not([type="range"]), textarea) { min-height: 44px; }
:is(button, .btn, a.btn, [role="button"], [role="tab"], [role="switch"], summary) { min-width: 44px; }
.os-phone-body a.os-link { min-height: 44px; }
:is(nav, header, footer, aside, .nav, .ftr, td, dd) a, :is(li, div) > a:only-child, a.link, a.os-link,
a[class*="brand"], a[class*="logo"], .sv-key a, .sv-small a { display: inline-flex; align-items: center; min-height: 44px; min-width: 44px; max-width: 100%; }
}