/* ============================================================================ motion.css — Top Builder OS site-wide motion + icon system (2026-08-13) The consolidation of Sample C ("Cinematic"): every page links THIS file and motion.js instead of carrying private copies. One reveal engine, one glyph language, one place to tune easing. Icon system is style 8, "live line", in BLUE (Cory 2026-08-13): stroke-drawn glyphs that draw themselves in on reveal, with a breathing status dot. Glyphs live in assets/icons.svg and are shared verbatim with the OS app. ⛔ Every animation in here sits behind prefers-reduced-motion. The reduced experience is the FINISHED state (glyphs drawn, content visible), never a broken half-state. ========================================================================== */ :root{ /* the icon system is BLUE on purpose — it lands on the palette's existing ADA-verified --indigo (#2563EB), so no new color enters the system. Emerald stays reserved for money-positive figures and the primary CTA. */ --icon:#2563EB; --icon-soft:#3B82F6; --icon-dot:#3B82F6; --icon-on-dark:#93C5FD; --ease-cine:cubic-bezier(.16,1,.3,1); /* full-width layout (Cory: "use the full width of the screen") */ --maxw:1400px; } /* ---------- full-bleed bands ------------------------------------------- */ /* A section that should run edge-to-edge from INSIDE a .wrap. Content stays readable inside its own inner wrap; the BAND (background, borders) bleeds. ⛔ 100vw includes the vertical scrollbar, so .bleed on a page that scrolls overflows by the scrollbar width (+8px measured in the sweep). Use it ONLY when trapped inside a constrained parent; a top-level
is already edge-to-edge for free, because body spans the viewport. */ .bleed{ width:100vw; margin-left:calc(50% - 50vw); } @media (min-width:1520px){ .wrap{ padding-inline:36px } } /* ---------- icon plumbing (style 8, blue) ------------------------------ */ .tbi{ width:1em; height:1em; display:inline-block; vertical-align:-0.12em; color:var(--icon); overflow:visible } .ico .tbi{ width:22px; height:22px; vertical-align:middle } .card .ico{ background:rgba(37,99,235,.09); border-color:rgba(37,99,235,.26) } .ag .ico{ background:rgba(37,99,235,.10); border-color:rgba(37,99,235,.28) } .on-dark .tbi, .console .tbi{ color:var(--icon-on-dark) } /* the breathing status dot — decoration on marketing, a real badge in-app */ .tbi-dot{ fill:var(--icon-dot) } @media (prefers-reduced-motion: no-preference){ .tbi-dot{ animation:tbi-ping 2.8s ease-out infinite } @keyframes tbi-ping{ 0%,60%{ opacity:1 } 80%{ opacity:.25 } 100%{ opacity:1 } } } /* draw-in: strokes start invisible and draw when the parent reveals. ⛔ Page CSS cannot select INSIDE a shadow tree — so the dash values live on the HOST .tbi element and reach the cloned paths by inheritance (stroke-dasharray/-dashoffset are inheritable; the sprite's paths declare neither). Applied only when motion.js is present and motion is allowed; otherwise glyphs render fully drawn. */ @media (prefers-reduced-motion: no-preference){ .js-motion .reveal .tbi{ stroke-dasharray:130; stroke-dashoffset:130 } .js-motion .reveal.in .tbi{ animation:tbi-draw 1.1s var(--ease-cine) .25s forwards } @keyframes tbi-draw{ to{ stroke-dashoffset:0 } } } /* ---------- reveal refinements (engine lives in each page + motion.js) -- */ @media (prefers-reduced-motion: no-preference){ /* section-title underline wipe */ h2.reveal{ position:relative } h2.reveal::after{ content:""; position:absolute; left:0; bottom:-8px; height:3px; width:64px; border-radius:2px; background:linear-gradient(90deg,var(--icon),var(--emerald,#047857)); clip-path:inset(0 100% 0 0); transition:clip-path .8s var(--ease-cine) .35s } h2.reveal.in::after{ clip-path:inset(0) } /* hero ambience: one soft orb, 18s, barely there */ .hero{ position:relative; overflow:hidden } .hero::before{ content:""; position:absolute; width:520px; height:520px; border-radius:50%; background:radial-gradient(circle, rgba(37,99,235,.09), transparent 66%); top:-160px; right:-120px; pointer-events:none; animation:orb 18s ease-in-out infinite } @keyframes orb{ 0%,100%{ transform:translate(0,0) } 50%{ transform:translate(-48px,36px) } } } /* ---------- proof marquee (seamless, content doubled by motion.js) ------ */ .mq{ overflow:hidden; border-block:1px solid var(--line,#E2E8F0); margin-top:34px; -webkit-mask-image:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent); mask-image:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent) } .mq-track{ display:inline-flex; gap:44px; white-space:nowrap; padding:12px 0 } .mq span{ font-size:12.5px; letter-spacing:.12em; text-transform:uppercase; color:var(--ink3,#64748B) } @media (prefers-reduced-motion: no-preference){ .mq-track{ animation:mqx 26s linear infinite } @keyframes mqx{ to{ transform:translateX(-50%) } } } /* ---------- glyph plates (bespoke mini-diagrams on promise cards) ------- */ .glyph{ display:block; margin-bottom:10px } @media (prefers-reduced-motion: no-preference){ .glyph .draw{ stroke-dasharray:120; stroke-dashoffset:120 } .in .glyph .draw{ animation:gdraw 1.2s var(--ease-cine) .35s forwards } @keyframes gdraw{ to{ stroke-dashoffset:0 } } .glyph .dotp{ animation:tbi-ping 2.8s ease-out infinite; transform-origin:center } .glyph .bar1{ animation:gbar 3.4s ease-in-out infinite; transform-origin:bottom } .glyph .bar2{ animation:gbar 3.4s ease-in-out 1.1s infinite; transform-origin:bottom } @keyframes gbar{ 0%,100%{ transform:scaleY(.55) } 50%{ transform:scaleY(1) } } } @media (prefers-reduced-motion: reduce){ .glyph .draw{ stroke-dashoffset:0 } } /* ============================================================================ THE PLATFORM DEMO — an animated mock of the OS itself on the homepage. Honest by construction: framed in browser chrome, labeled "interface demo", and every figure is obviously illustrative. Sequenced by motion.js adding .p1..p4 to .demo-stage in a loop; all transitions are pure CSS. ========================================================================== */ .demo-band{ background:linear-gradient(180deg,#0B1220,#101A2E); padding:84px 0; border-block:1px solid #1E293B } .demo-band .eyebrow{ color:var(--icon-on-dark) } .demo-band h2{ color:#F8FAFC } .demo-band .lede{ color:#94A3B8 } .demo-note{ font-size:12px; color:#64748B; margin-top:14px } .demo-frame{ margin-top:38px; border:1px solid #24324A; border-radius:18px; overflow:hidden; background:#0F1626; box-shadow:0 60px 120px -50px rgba(0,0,0,.85) } .demo-chrome{ display:flex; align-items:center; gap:7px; padding:12px 16px; border-bottom:1px solid #1E293B; background:rgba(255,255,255,.02) } .demo-chrome i{ width:10px; height:10px; border-radius:50%; background:#2A3650; display:inline-block } .demo-chrome .t{ margin-left:10px; font-size:12px; color:#64748B } .demo-stage{ display:grid; grid-template-columns:180px 1fr 300px; min-height:380px } @media (max-width:900px){ .demo-stage{ grid-template-columns:52px 1fr } .demo-right{ display:none } } /* sidebar — the app's real nav, blue glyphs, live badge on Inbox */ .demo-side{ border-right:1px solid #1E293B; padding:14px 10px; display:flex; flex-direction:column; gap:2px } .demo-side .it{ display:flex; align-items:center; gap:10px; padding:8px 10px; border-radius:8px; color:#94A3B8; font-size:13px; font-weight:500; white-space:nowrap } .demo-side .it .tbi{ width:18px; height:18px; flex:none; color:#64748B } .demo-side .it.on{ background:rgba(37,99,235,.16); color:#F8FAFC } .demo-side .it.on .tbi{ color:var(--icon-on-dark) } .demo-side .badge-dot{ margin-left:auto; width:7px; height:7px; border-radius:99px; background:var(--icon-soft) } @media (max-width:900px){ .demo-side .it span{ display:none } } /* center — dispatch column where the new job card lands */ .demo-main{ padding:18px; display:flex; flex-direction:column; gap:10px } .demo-h{ font-size:11.5px; font-weight:700; letter-spacing:.08em; text-transform:uppercase; color:#64748B } .dcard{ border:1px solid #24324A; border-radius:12px; background:#141D31; padding:12px 14px; display:flex; align-items:center; justify-content:space-between; gap:10px } .dcard .nm{ font-size:13.5px; font-weight:600; color:#E2E8F0 } .dcard .meta{ font-size:11.5px; color:#64748B; margin-top:2px } .dcard .pill{ font-size:10.5px; font-weight:700; padding:3px 9px; border-radius:99px; background:rgba(37,99,235,.15); color:#93C5FD; white-space:nowrap } .dcard .pill.paid{ background:rgba(16,185,129,.15); color:#6EE7B7 } /* the animated actors */ .dcard.arrive{ opacity:0; transform:translateY(14px) scale(.985) } .p1 .dcard.arrive{ opacity:1; transform:none; transition:opacity .6s var(--ease-cine), transform .6s var(--ease-cine) } .flipwrap{ position:relative } .flipwrap .face{ transition:opacity .45s ease } .flipwrap .face.paid-face{ position:absolute; inset:0; opacity:0 } .p3 .flipwrap .face.open-face{ opacity:0 } .p3 .flipwrap .face.paid-face{ opacity:1 } /* toast — slides in when the invoice gets paid */ .demo-toast{ position:absolute; right:18px; bottom:18px; display:flex; gap:10px; align-items:center; background:#0F172A; border:1px solid rgba(16,185,129,.35); border-radius:12px; padding:11px 14px; font-size:12.5px; color:#D1FAE5; opacity:0; transform:translateY(10px); pointer-events:none } .p3 .demo-toast{ opacity:1; transform:none; transition:opacity .5s var(--ease-cine) .2s, transform .5s var(--ease-cine) .2s } .demo-toast .tbi{ color:#34D399 } /* right rail — the money the owner actually watches */ .demo-right{ border-left:1px solid #1E293B; padding:18px; display:flex; flex-direction:column; gap:12px } .mtile{ border:1px solid #24324A; border-radius:12px; background:#141D31; padding:13px 14px } .mtile .lab{ font-size:11px; font-weight:700; letter-spacing:.07em; text-transform:uppercase; color:#64748B } .mtile .val{ font-size:21px; font-weight:700; color:#F8FAFC; margin-top:4px; font-variant-numeric:tabular-nums } .mtile .sub{ font-size:11.5px; color:#64748B; margin-top:3px } .mtile.gain .val{ color:#6EE7B7 } .bankline{ display:flex; justify-content:space-between; align-items:center; font-size:12.5px; color:#94A3B8; border-top:1px solid #1E293B; padding-top:10px; margin-top:2px; opacity:0; transform:translateX(10px) } .p4 .bankline{ opacity:1; transform:none; transition:opacity .5s var(--ease-cine), transform .5s var(--ease-cine) } .bankline .match{ font-size:10.5px; font-weight:700; color:#93C5FD; background:rgba(37,99,235,.15); padding:2px 8px; border-radius:99px } /* the step rail — the demo becomes clickable. Each button jumps the stage to that phase and pauses the auto-loop; the loop also lights these as it runs, so the rail doubles as a "where are we" indicator. */ .demo-steps{ display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:10px; margin-top:14px } @media (max-width:900px){ .demo-steps{ grid-template-columns:repeat(2,minmax(0,1fr)) } } @media (max-width:560px){ .demo-steps{ grid-template-columns:1fr } } .dstep{ text-align:left; font:inherit; cursor:pointer; border:1px solid #24324A; border-radius:12px; background:#141D31; padding:12px 14px; display:block; transition:border-color .25s ease, background-color .25s ease } .dstep:hover{ border-color:rgba(59,130,246,.45) } .dstep:focus-visible{ outline:2px solid var(--icon-on-dark); outline-offset:2px } .dstep .n{ display:inline-flex; align-items:center; justify-content:center; width:22px; height:22px; border-radius:99px; font-size:11.5px; font-weight:700; color:#93C5FD; background:rgba(37,99,235,.16); margin-bottom:8px } .dstep .tt{ display:block; font-size:13.5px; font-weight:700; color:#E2E8F0 } .dstep .dd{ display:block; font-size:12px; line-height:1.5; color:#64748B; margin-top:4px } .dstep.on{ border-color:rgba(59,130,246,.6); background:rgba(37,99,235,.10) } .dstep.on .n{ background:var(--icon,#2563EB); color:#fff } .dstep.on .dd{ color:#94A3B8 } @media (prefers-reduced-motion: reduce){ /* the finished story, statically: card present, invoice paid, line matched */ .dcard.arrive{ opacity:1; transform:none } .flipwrap .face.open-face{ opacity:0 } .flipwrap .face.paid-face{ opacity:1 } .demo-toast{ opacity:1; transform:none } .bankline{ opacity:1; transform:none } } /* ---------- hex agent nodes join the blue icon system ------------------- */ .card .ico.hex .hx{ stroke:var(--icon); fill:rgba(37,99,235,.10) } .card .ico.hex .gl{ stroke:var(--icon) } .card .ico.hex .glf{ fill:var(--icon) } /* ---------- wide-viewport flow (Cory 2026-08-13) ------------------------ */ /* The container grew 1140 -> 1400, but hero-era blocks kept their 760px caps, so page tops hugged the left while the sections below filled the width. At >=1000px the hero's CARDS fill the container exactly like the card grids below them; only running TEXT keeps a reading measure. */ @media (min-width:1000px){ .answer-box, .ib{ max-width:none } .answer-box p{ max-width:88ch } .hero h1{ max-width:26ch } .hero .sub, .lede{ max-width:78ch } } /* ⛔ ONE CONTAINER RULE FOR EVERY PAGE (Cory: edge to edge, phone -> large desktop). The site grew page by page and so did its containers: .wrap at 1140 on most pages, .container at a DIFFERENT variable (1200) on two, .page at 820 on the report, 980 on the shows pages, 840-900 on the legal and start pages. This file loads AFTER every page's inline