/* ============================================================================= ZB Cloud website: design system (zbstack.xyz visual language) Depends on css/tokens.css only for the teammate label colours. Documented in DESIGN-SYSTEM.md (kept outside the site). v2 (airy): larger section rhythm, quieter glows, no section rules, zbstack-style hero, featured ModelShifter stage, image slots. 1 Tokens 8 Lists (points, steps, team list, Q&A) 2 Base 9 Figures, captions, tags, placeholders, controls 3 Layout + sections 10 Motion (reveal) 4 Type 11 ZB Studio window + screens 5 Buttons + links 12 Diagrams (team, flow, rerun, cost, compare, handoff, stages) 6 Header + menu 13 Illustrations (subscriptions, stats, final frame) 7 Footer 14 ModelShifter switchboard diagram (.msd) 15 Hero (home, zbstack style) + inner-page hero 16 ModelShifter feature stage + tier explainer 17 Image slots (.media) + placeholders 18 Compositions (statement, pair, launch) 19 Reduced motion ========================================================================== */ /* 1. Tokens ---------------------------------------------------------------- */ :root { --ink: #0a0a0a; --paper: #f5f5f0; --line: #262626; --line-2: #34342f; --steel: #7a828b; --amber: #f59e0b; --glint: #fbbf24; --deep: #b45309; --live: #4ade80; --text-2: #cfcfc9; /* body copy */ --text-3: #9aa0a6; /* secondary, captions (7:1 on ink) */ --panel: #101010; /* cards */ --amber-bg: rgb(21, 16, 7); --amber-line: rgba(245, 158, 11, .55); --amber-soft: rgba(245, 158, 11, .08); --live-bg: rgb(11, 16, 12); --live-line: rgba(74, 222, 128, .34); --amber-grad: linear-gradient(100deg, #fbbf24 0%, #f59e0b 32%, #b45309 50%, #f59e0b 68%, #fbbf24 100%); --amber-fill: linear-gradient(180deg, #fbbf24, #f59e0b); --dash-v: repeating-linear-gradient(to bottom, rgba(245, 158, 11, .5) 0 3px, transparent 3px 10px); --dash-h: repeating-linear-gradient(to right, rgba(245, 158, 11, .5) 0 3px, transparent 3px 10px); --serif: 'Source Serif 4', Georgia, 'Times New Roman', serif; --ui: 'Instrument Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif; --mono: 'JetBrains Mono', ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; --fs-display: clamp(2.75rem, 1.55rem + 4.4vw, 5rem); /* 44 -> 80 */ --fs-display-sm: clamp(2.5rem, 1.6rem + 3vw, 4rem); /* inner-page heroes: 40 -> 64 */ --fs-h2: clamp(2.25rem, 1.5rem + 2.5vw, 3.625rem); /* 36 -> 58 */ --fs-h3: clamp(1.25rem, 1.15rem + .4vw, 1.5rem); --fs-lead: clamp(1.0625rem, 1rem + .35vw, 1.25rem); /* 17 -> 20 */ --gutter: clamp(16px, 3vw, 32px); --container: 1200px; --container-wide: 1320px; --section-y: clamp(112px, 12vw, 200px); /* airy rhythm between sections */ --head-gap: clamp(56px, 6vw, 96px); /* heading -> its visual */ --block-gap: clamp(64px, 7vw, 120px); /* visual -> next block in a section */ --grid-gap: clamp(48px, 6vw, 112px); --ground: #070706; --radius: 12px; --radius-lg: 16px; --ease: cubic-bezier(.2, .7, .2, 1); --header-h: 68px; } /* Teammate label colours: .tm- on an element, .tm-label on the text. */ .tm-neo { --tm: var(--zb-teammate-neo-label-on-dark); } .tm-iris { --tm: var(--zb-teammate-iris-label-on-dark); } .tm-bolt { --tm: var(--zb-teammate-bolt-label-on-dark); } .tm-lumi { --tm: var(--zb-teammate-lumi-label-on-dark); } .tm-mint { --tm: var(--zb-teammate-mint-label-on-dark); } .tm-ping { --tm: var(--zb-teammate-ping-label-on-dark); } .tm-label { color: var(--tm, var(--paper)); } /* 2. Base ------------------------------------------------------------------ */ *, *::before, *::after { box-sizing: border-box; } html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; background: var(--ink); scroll-behavior: smooth; scroll-padding-top: calc(var(--header-h) + 16px); } body { margin: 0; background: var(--ink); color: var(--paper); font-family: var(--ui); font-size: 1rem; line-height: 1.6; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; text-rendering: optimizeLegibility; overflow-x: clip; } img, svg { display: block; max-width: 100%; } img { height: auto; } h1, h2, h3, h4, p, ul, ol, figure, dl, dd { margin: 0; } ul, ol { padding: 0; list-style: none; } a { color: inherit; } button { font: inherit; color: inherit; } table { border-collapse: collapse; } :focus-visible { outline: 2px solid var(--glint); outline-offset: 3px; border-radius: 4px; } ::selection { background: var(--amber); color: var(--ink); } .visually-hidden { position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; } .skip-link { position: absolute; left: 16px; top: -48px; z-index: 100; background: var(--amber); color: var(--ink); padding: 10px 14px; border-radius: 999px; font-size: .875rem; font-weight: 600; text-decoration: none; transition: top .2s; } .skip-link:focus { top: 12px; } /* 3. Layout + sections ------------------------------------------------------ */ .container { width: 100%; max-width: calc(var(--container) + var(--gutter) * 2); margin-inline: auto; padding-inline: var(--gutter); } /* Every section sits on one continuous ground with quiet amber light. No rules between sections: space does the separating. The glows sit inside the section so they fade out before its edges (no seams). */ .section { position: relative; overflow: hidden; overflow: clip; color: var(--paper); padding-block: var(--section-y); background: radial-gradient(55% 42% at 6% 16%, rgba(245, 158, 11, .045), transparent 70%), radial-gradient(45% 38% at 96% 86%, rgba(180, 83, 9, .04), transparent 70%), var(--ground); } .section--glow-right { background: radial-gradient(55% 42% at 94% 16%, rgba(245, 158, 11, .045), transparent 70%), radial-gradient(45% 38% at 4% 86%, rgba(180, 83, 9, .04), transparent 70%), var(--ground); } .section--glow-top { background: radial-gradient(50% 36% at 50% 12%, rgba(245, 158, 11, .055), transparent 70%), var(--ground); } .section--hero { padding-top: clamp(72px, 9vw, 136px); background: radial-gradient(70% 60% at 86% 8%, rgba(245, 158, 11, .12), transparent 62%), radial-gradient(55% 50% at 92% 40%, rgba(180, 83, 9, .10), transparent 64%), linear-gradient(#0a0a0a, var(--ground)); } .section--cta { text-align: center; padding-block: clamp(120px, 13vw, 208px); background: radial-gradient(80% 60% at 50% 100%, rgba(245, 158, 11, .14), transparent 66%), radial-gradient(60% 50% at 50% 92%, rgba(180, 83, 9, .10), transparent 66%), var(--ground); } .section--tight { padding-block: calc(var(--section-y) * .6); } .container--wide { max-width: calc(var(--container-wide) + var(--gutter) * 2); } .grid { display: grid; gap: var(--grid-gap); grid-template-columns: minmax(0, 1fr); align-items: start; } @media (min-width: 900px) { .grid--5-7 { grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); } .grid--7-5 { grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); } .grid--6-6 { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); } .grid--4-8 { grid-template-columns: minmax(0, 4fr) minmax(0, 8fr); } .grid--center { align-items: center; } } .sticky-col { position: sticky; top: calc(var(--header-h) + 32px); } @media (max-width: 899px) { .sticky-col { position: static; } } .section-head { max-width: 820px; } .section-head > * + * { margin-top: 24px; } .section-head > .eyebrow + * { margin-top: 0; } .section-head--center { margin-inline: auto; text-align: center; } .section-head--center .lead { margin-inline: auto; } .section-head + * { margin-top: var(--head-gap); } @media (min-width: 900px) { .section-head--split { max-width: none; display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); column-gap: clamp(56px, 7vw, 120px); align-items: end; } .section-head--split > .eyebrow { grid-column: 1 / -1; } .section-head--split > * + * { margin-top: 0; } .section-head--split .lead { padding-bottom: .35em; } } .block-gap { margin-top: var(--block-gap); } /* 4. Type ------------------------------------------------------------------ */ .eyebrow { font: 500 11px/1 var(--mono); letter-spacing: .22em; text-transform: uppercase; color: var(--amber); margin-bottom: 22px; } .h-display { font-family: var(--serif); font-size: var(--fs-display); font-weight: 500; line-height: 1; letter-spacing: -.038em; text-wrap: balance; background: var(--amber-grad); -webkit-background-clip: text; background-clip: text; color: transparent; padding-bottom: .06em; } .h-display .line { display: block; } .h2 { font-family: var(--serif); font-size: var(--fs-h2); font-weight: 500; line-height: 1.04; letter-spacing: -.03em; color: var(--paper); text-wrap: balance; } .h3 { font-family: var(--serif); font-size: var(--fs-h3); font-weight: 500; line-height: 1.25; letter-spacing: -.012em; } /* Amber highlight on the second sentence (or tail phrase) of a headline. */ .hl { background: var(--amber-grad); -webkit-background-clip: text; background-clip: text; color: transparent; -webkit-box-decoration-break: clone; box-decoration-break: clone; padding-bottom: .04em; } .lead { font-size: var(--fs-lead); line-height: 1.6; color: var(--text-2); max-width: 60ch; text-wrap: pretty; } .body { color: var(--text-2); text-wrap: pretty; } .label { font: 500 11px/1.4 var(--mono); letter-spacing: .14em; text-transform: uppercase; color: var(--text-3); } .mono { font-family: var(--mono); } /* 5. Buttons + links -------------------------------------------------------- */ .btn { display: inline-flex; align-items: center; justify-content: center; gap: 10px; height: 52px; padding: 0 26px; border-radius: 999px; border: 1px solid transparent; font: 600 .9375rem/1 var(--ui); letter-spacing: -.005em; text-decoration: none; white-space: nowrap; cursor: pointer; transition: box-shadow .25s, background-color .2s, border-color .2s, filter .2s; } .btn svg { width: 14px; height: 14px; flex: none; transition: transform .25s var(--ease); } .btn:hover svg { transform: translateX(3px); } .btn--primary { background: var(--amber-fill); color: var(--ink); box-shadow: 0 10px 30px -12px rgba(245, 158, 11, .7), inset 0 1px 0 rgba(255, 255, 255, .25); } .btn--primary:hover { filter: brightness(1.06); box-shadow: 0 12px 36px -10px rgba(245, 158, 11, .85), inset 0 1px 0 rgba(255, 255, 255, .3); } .btn--secondary { background: transparent; color: var(--glint); border-color: var(--amber-line); } .btn--secondary:hover { border-color: var(--glint); background: var(--amber-soft); } .btn--sm { height: 40px; padding: 0 18px; font-size: .875rem; } .btn-row { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 24px; } .link { display: inline-flex; align-items: center; gap: 8px; font: 500 .8125rem/1.4 var(--mono); letter-spacing: .02em; color: var(--glint); text-decoration: none; border-bottom: 1px solid transparent; transition: border-color .2s; } .link:hover { border-bottom-color: var(--amber-line); } .link svg { width: 13px; height: 13px; transition: transform .25s var(--ease); } .link:hover svg { transform: translateX(3px); } /* Quiet secondary link (hero): grey text, amber arrow that nudges down. */ .link--quiet { color: var(--text-2); font: 500 .875rem/1.4 var(--ui); letter-spacing: 0; gap: 10px; } .link--quiet svg { color: var(--amber); } .link--quiet:hover { color: var(--paper); border-bottom-color: transparent; } .link--quiet:hover svg { transform: translateY(3px); } /* 6. Header + mobile menu --------------------------------------------------- */ .site-header { position: sticky; top: 0; z-index: 50; background: rgba(10, 10, 10, .62); -webkit-backdrop-filter: saturate(140%) blur(14px); backdrop-filter: saturate(140%) blur(14px); border-bottom: 1px solid transparent; transition: border-color .25s, background-color .25s; } .site-header.is-scrolled, .site-header.is-open { border-bottom-color: var(--line); background: rgba(10, 10, 10, .82); } .site-header__inner { display: flex; align-items: center; gap: 32px; height: var(--header-h); } .site-logo { display: block; flex: none; border-radius: 6px; } .site-logo img { width: 132px; height: auto; } .site-nav { display: flex; align-items: center; gap: 4px; margin-left: auto; } .site-nav a { position: relative; display: inline-flex; align-items: center; height: 36px; padding: 0 12px; border-radius: 6px; font-size: .9375rem; color: var(--text-3); text-decoration: none; transition: color .2s; } .site-nav a:hover, .site-nav a[aria-current="page"] { color: var(--paper); } .site-nav a[aria-current="page"]::after { content: ""; position: absolute; left: 12px; right: 12px; bottom: 4px; height: 1px; background: var(--amber-line); } .site-header__cta { margin-left: 8px; } .site-header .btn { height: 40px; padding: 0 18px; font-size: .875rem; box-shadow: 0 6px 20px -10px rgba(245, 158, 11, .7); } .menu-toggle { display: none; margin-left: auto; align-items: center; gap: 8px; height: 40px; padding: 0 14px; border: 1px solid var(--line-2); border-radius: 999px; background: transparent; color: var(--paper); font-size: .875rem; font-weight: 500; cursor: pointer; } .menu-toggle svg { width: 16px; height: 16px; } .menu-toggle .i-close { display: none; } .menu-toggle[aria-expanded="true"] .i-close { display: block; } .menu-toggle[aria-expanded="true"] .i-menu { display: none; } .mobile-menu { display: none; } @media (max-width: 860px) { .site-nav, .site-header__cta { display: none; } .menu-toggle { display: inline-flex; } .mobile-menu { position: fixed; inset: var(--header-h) 0 auto 0; z-index: 49; display: block; background: #0a0a0a; border-bottom: 1px solid var(--line); padding: 8px var(--gutter) 24px; box-shadow: 0 24px 48px -12px rgba(0, 0, 0, .8); opacity: 0; visibility: hidden; transform: translateY(-8px); transition: opacity .2s, transform .25s var(--ease), visibility 0s .25s; } .mobile-menu.is-open { opacity: 1; visibility: visible; transform: none; transition: opacity .2s, transform .25s var(--ease); } .mobile-menu ul { margin-bottom: 20px; } .mobile-menu li + li { border-top: 1px solid var(--line); } .mobile-menu a:not(.btn) { display: flex; align-items: center; justify-content: space-between; padding: 14px 0; font: 500 1.25rem/1.3 var(--serif); text-decoration: none; color: var(--paper); } .mobile-menu a[aria-current="page"]::after { content: ""; width: 6px; height: 6px; border-radius: 50%; background: var(--amber); } .mobile-menu .btn { width: 100%; } } /* 7. Footer ----------------------------------------------------------------- */ .site-footer { background: var(--ink); color: var(--paper); border-top: 1px solid var(--line); padding-block: 56px 36px; } .site-footer__top { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 32px; align-items: flex-start; } .site-footer__brand img { width: 132px; height: auto; } .site-footer__line { margin-top: 16px; color: var(--text-2); font-size: .9375rem; } .site-footer__nav ul { display: flex; flex-wrap: wrap; gap: 10px 28px; } .site-footer__nav a { color: var(--text-3); text-decoration: none; font-size: .9375rem; transition: color .2s; } .site-footer__nav a:hover, .site-footer__nav a[aria-current="page"] { color: var(--paper); } .site-footer__bottom { margin-top: 44px; padding-top: 20px; border-top: 1px solid var(--line); } .site-footer__copy { font: 400 11.5px/1.5 var(--mono); color: var(--text-3); letter-spacing: .02em; } /* 8. Lists ------------------------------------------------------------------ */ .points > li { display: grid; grid-template-columns: 52px minmax(0, 1fr); padding: 28px 0; border-top: 1px solid var(--line); } .points > li:last-child { border-bottom: 1px solid var(--line); } .points__n { font: 500 11px/1 var(--mono); letter-spacing: .14em; color: var(--amber); padding-top: 8px; } .points__title { font-weight: 600; color: var(--paper); } .points p { color: var(--text-2); line-height: 1.65; font-size: 1.0625rem; } /* Steps: open columns, no cards. A short amber rule marks each step. */ .steps { display: grid; } .steps > li { position: relative; display: grid; align-content: start; grid-template-columns: 44px minmax(0, 1fr); gap: 0 16px; padding: 26px 0; border-top: 1px solid var(--line); } .steps > li:last-child { border-bottom: 1px solid var(--line); } .steps__n { display: inline-grid; place-items: center; width: 30px; height: 30px; border-radius: 50%; border: 1px solid var(--amber-line); font: 500 12px/1 var(--mono); color: var(--glint); } .steps p { color: var(--text-2); line-height: 1.65; } @media (min-width: 900px) { .steps--row { grid-template-columns: repeat(var(--cols, 4), minmax(0, 1fr)); gap: clamp(32px, 4vw, 64px); } .steps--row > li { grid-template-columns: 1fr; gap: 20px; padding: 28px 0 0; border: 0 !important; } .steps--row > li::before { content: ""; position: absolute; top: 0; left: 0; width: 40px; height: 1px; background: var(--amber-line); } } .team-list > li { display: flex; gap: 16px; align-items: center; padding: 15px 0; border-top: 1px solid var(--line); color: var(--text-2); } .team-list > li:last-child { border-bottom: 1px solid var(--line); } .team-list img { width: 32px; height: 32px; flex: none; border-radius: 50%; } .team-list .tm-label { font-weight: 600; } .team-list__sys { padding-left: 46px !important; position: relative; } .team-list__sys::before { content: ""; position: absolute; left: 12px; top: 50%; width: 8px; height: 8px; margin-top: -4px; border-radius: 50%; background: var(--amber); box-shadow: 0 0 10px 1px rgba(245, 158, 11, .5); } .team-list__sys strong { color: var(--paper); font-weight: 600; } .qa { border-top: 1px solid var(--line); } .qa details { border-bottom: 1px solid var(--line); } .qa summary { list-style: none; cursor: pointer; display: flex; align-items: flex-start; justify-content: space-between; gap: 24px; padding: 28px 0; font: 500 clamp(1.1875rem, 1.1rem + .4vw, 1.4375rem)/1.3 var(--serif); letter-spacing: -.01em; color: var(--paper); border-radius: 4px; } .qa summary::-webkit-details-marker { display: none; } .qa summary::after { content: ""; flex: none; width: 30px; height: 30px; margin-top: -1px; border-radius: 50%; border: 1px solid var(--amber-line); background: linear-gradient(var(--glint), var(--glint)) center / 10px 1.5px no-repeat, linear-gradient(var(--glint), var(--glint)) center / 1.5px 10px no-repeat; transition: transform .3s var(--ease), background-size .3s var(--ease); } .qa details[open] summary::after { background-size: 10px 1.5px, 1.5px 0; transform: rotate(180deg); } .qa summary:hover::after { border-color: var(--glint); background-color: var(--amber-soft); } .qa__a { padding: 0 54px 32px 0; color: var(--text-2); max-width: 44em; line-height: 1.65; } /* 9. Figures, captions, tags, placeholders, controls ------------------------ */ .figure { min-width: 0; } .caption { margin-top: 20px; display: flex; gap: 10px; align-items: baseline; font-size: .8125rem; color: var(--text-3); line-height: 1.5; } .caption::before { content: ""; flex: none; width: 14px; height: 1px; background: var(--amber-line); transform: translateY(-4px); } .caption-row { margin-top: 20px; display: flex; flex-wrap: wrap; gap: 12px 24px; align-items: center; justify-content: space-between; } .caption-row .caption { margin-top: 0; } .demo-tag { display: inline-flex; align-items: center; gap: 6px; flex: none; height: 22px; padding: 0 9px; border-radius: 999px; border: 1px solid var(--line-2); color: var(--text-3); font: 500 10.5px/1 var(--mono); letter-spacing: .04em; white-space: nowrap; } .demo-tag::before { content: ""; width: 5px; height: 5px; border-radius: 50%; background: var(--amber); } .needed { display: flex; align-items: center; justify-content: center; min-height: 72px; padding: 18px 20px; border: 1.5px dashed var(--steel); border-radius: var(--radius); color: var(--text-3); font: 400 .8125rem/1.55 var(--mono); text-align: center; text-wrap: balance; } .needed--visual { aspect-ratio: 16 / 10; min-height: 220px; max-height: 420px; max-width: 100%; } .needed--wide { aspect-ratio: 16 / 9; } .needed--inline { justify-content: flex-start; text-align: left; min-height: 0; padding: 12px 16px; } .play-toggle { display: inline-flex; align-items: center; gap: 9px; height: 36px; padding: 0 16px 0 14px; border: 1px solid rgba(245, 158, 11, .5); border-radius: 999px; background: transparent; color: var(--glint); cursor: pointer; font: 600 13px/1 var(--ui); transition: border-color .2s, background-color .2s; } .play-toggle:hover { border-color: var(--glint); background: var(--amber-soft); } .play-toggle svg { width: 10px; height: 10px; fill: currentColor; } .play-toggle .i-play { display: none; } .play-toggle[data-state="paused"] .i-play { display: block; } .play-toggle[data-state="paused"] .i-pause { display: none; } .demo-controls { display: flex; align-items: center; gap: 14px; } .demo-progress { width: 96px; height: 2px; border-radius: 2px; background: var(--line); overflow: hidden; } .demo-progress span { display: block; height: 100%; width: 100%; background: var(--amber-fill); transform-origin: 0 50%; transform: scaleX(var(--p, 0)); } .tour-steps { margin-top: 16px; } .demo-steps { display: flex; flex-wrap: wrap; gap: 8px; } .demo-steps button { display: inline-flex; align-items: center; gap: 8px; height: 34px; padding: 0 13px; border-radius: 999px; border: 1px solid var(--line-2); background: transparent; color: var(--text-3); cursor: pointer; font-size: .8125rem; font-weight: 500; } .demo-steps button .n { font: 500 10.5px/1 var(--mono); color: var(--steel); } .demo-steps button:hover { color: var(--paper); border-color: var(--amber-line); } .demo-steps button[aria-current="step"] { color: var(--glint); border-color: var(--amber-line); background: var(--amber-bg); } .demo-steps button[aria-current="step"] .n { color: var(--amber); } /* 10. Motion: scroll-in ----------------------------------------------------- */ .js .reveal { opacity: 0; transform: translateY(18px); transition: opacity .8s var(--ease), transform .8s var(--ease); transition-delay: calc(var(--i, 0) * 90ms); } .js .reveal.is-visible { opacity: 1; transform: none; } /* ========================================================================== 11. ZB Studio window + screens ========================================================================== */ .studio { container: studio / inline-size; position: relative; background: #0d0d0c; color: var(--paper); border: 1px solid var(--line-2); border-radius: 14px; overflow: hidden; box-shadow: 0 0 0 1px rgba(0, 0, 0, .6), 0 40px 90px -40px rgba(245, 158, 11, .28), 0 30px 60px -30px rgba(0, 0, 0, .9); font-size: 13px; line-height: 1.45; text-align: left; } .studio__bar { display: flex; align-items: center; gap: 12px; height: 40px; padding: 0 14px; border-bottom: 1px solid var(--line); background: #111110; } .studio__dots { display: flex; gap: 6px; } .studio__dots i { width: 9px; height: 9px; border-radius: 50%; background: #2c2c2a; } .studio__title { font: 400 11.5px/1 var(--mono); color: var(--text-3); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; min-width: 0; } .studio__title b { color: var(--paper); font-weight: 500; } .studio__bar .demo-tag { margin-left: auto; } .studio__body { position: relative; transition: opacity .5s; } .studio--app .studio__body { display: grid; grid-template-columns: 52px 336px minmax(0, 1fr); height: 572px; } .studio__rail { border-right: 1px solid var(--line); display: flex; flex-direction: column; align-items: center; gap: 6px; padding: 14px 0; } .studio__rail span { width: 32px; height: 32px; border-radius: 8px; display: grid; place-items: center; color: var(--steel); } .studio__rail span.is-on { background: var(--amber-bg); color: var(--glint); box-shadow: inset 0 0 0 1px var(--amber-line); } .studio__rail svg { width: 16px; height: 16px; } .studio__rail .you { margin-top: auto; width: 28px; height: 28px; border-radius: 50%; border: 1px solid var(--line-2); } .studio__pane { min-width: 0; min-height: 0; display: flex; flex-direction: column; } .studio__pane + .studio__pane { border-left: 1px solid var(--line); } .pane-head { display: flex; align-items: center; gap: 10px; min-height: 48px; padding: 0 16px; border-bottom: 1px solid var(--line); } .pane-head__title { font-weight: 600; font-size: 13.5px; } .pane-head__meta { margin-left: auto; font: 400 11px/1 var(--mono); color: var(--text-3); white-space: nowrap; display: flex; align-items: center; gap: 10px; } .avatar { width: 28px; height: 28px; border-radius: 50%; flex: none; } .avatar--24 { width: 24px; height: 24px; } .avatar--32 { width: 32px; height: 32px; } .avatar--40 { width: 40px; height: 40px; } .who { display: flex; align-items: center; gap: 8px; min-width: 0; } .who__name { font-weight: 600; font-size: 13px; } .who__role { font: 400 10.5px/1.3 var(--mono); color: var(--text-3); white-space: nowrap; } /* Model chip: generic model labels in amber mono, like the diagram's model names */ .model-chip { display: inline-flex; align-items: center; gap: 6px; height: 22px; padding: 0 8px; border-radius: 999px; border: 1px solid var(--line-2); background: var(--panel); color: var(--amber); font: 500 10.5px/1 var(--mono); white-space: nowrap; } .model-chip .tier { display: inline-flex; gap: 2px; } .model-chip .tier i { width: 3px; height: 9px; border-radius: 1px; background: #3a3a36; } .model-chip[data-tier="1"] .tier i:nth-child(-n+1), .model-chip[data-tier="2"] .tier i:nth-child(-n+2), .model-chip[data-tier="3"] .tier i:nth-child(-n+3) { background: var(--amber); } .model-chip--top { background: var(--amber-bg); border-color: var(--amber-line); color: var(--glint); } .st-btn { display: inline-flex; align-items: center; justify-content: center; height: 30px; padding: 0 14px; border-radius: 999px; font-size: 12.5px; font-weight: 600; border: 1px solid var(--line-2); color: var(--paper); background: transparent; white-space: nowrap; } .st-btn--primary { background: var(--amber-fill); color: var(--ink); border-color: transparent; } .status { display: inline-flex; align-items: center; gap: 6px; font: 400 10.5px/1 var(--mono); color: var(--text-3); white-space: nowrap; } .status::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: var(--steel); } .status--live::before { background: var(--glint); box-shadow: 0 0 8px 1px rgba(251, 191, 36, .6); } .status--done { color: var(--live); } .status--done::before { background: var(--live); box-shadow: 0 0 8px 1px rgba(74, 222, 128, .45); } .status--paused::before { background: transparent; border: 1.5px solid var(--glint); width: 5px; height: 5px; } .tm-states { position: relative; flex: none; width: 28px; height: 28px; } .tm-states img { position: absolute; inset: 0; width: 100%; height: 100%; opacity: 0; transition: opacity .35s; } .tm-states img[data-state="idle"] { opacity: 1; } .tm-states[data-phase]:not([data-phase="idle"]) img[data-state="idle"] { opacity: 0; } .tm-states[data-phase="thinking"] img[data-state="thinking"], .tm-states[data-phase="speaking"] img[data-state="speaking"], .tm-states[data-phase="done"] img[data-state="done"] { opacity: 1; } /* Screen: conversation with Neo */ .chat { flex: 1; min-height: 0; display: flex; flex-direction: column; } .chat__log { flex: 1; min-height: 0; overflow: hidden; padding: 18px 16px 8px; display: flex; flex-direction: column; gap: 16px; } .msg { display: flex; gap: 10px; align-items: flex-start; } .msg__body { min-width: 0; flex: 1; } .msg__meta { display: flex; align-items: baseline; gap: 8px; margin-bottom: 4px; } .msg__text { color: #e4e4de; font-size: 13px; line-height: 1.5; } .msg--you { justify-content: flex-end; } .msg--you .msg__bubble { background: var(--amber-bg); border: 1px solid var(--amber-line); color: var(--paper); border-radius: 12px 12px 4px 12px; padding: 8px 13px; font-size: 13px; max-width: 80%; } .msg__plan { margin-top: 10px; border: 1px solid var(--line); border-radius: 10px; overflow: hidden; background: var(--panel); } .msg__plan li { display: flex; align-items: center; gap: 9px; padding: 7px 10px; font-size: 12.5px; color: #e4e4de; } .msg__plan li + li { border-top: 1px solid var(--line); } .msg__plan .count { margin-left: auto; font: 400 10.5px/1 var(--mono); color: var(--text-3); } .dots { display: inline-flex; gap: 4px; padding: 8px 0; } .dots i { width: 5px; height: 5px; border-radius: 50%; background: var(--amber); animation: dots 1.2s infinite ease-in-out; } .dots i:nth-child(2) { animation-delay: .15s; } .dots i:nth-child(3) { animation-delay: .3s; } @keyframes dots { 0%, 60%, 100% { opacity: .3; transform: none; } 30% { opacity: 1; transform: translateY(-2px); } } .composer { margin: 8px 16px 16px; display: flex; align-items: center; gap: 8px; min-height: 42px; padding: 0 6px 0 12px; border: 1px solid var(--line-2); border-radius: 12px; background: var(--panel); } .composer__text { flex: 1; min-width: 0; font-size: 13px; color: var(--paper); white-space: nowrap; overflow: hidden; } .composer__ph { color: var(--steel); } .composer[data-phase]:not([data-phase="empty"]) .composer__ph { display: none; } .composer[data-phase="empty"] .composer__typed, .composer[data-phase="empty"] .composer__caret { display: none; } .composer__caret { display: inline-block; width: 1.5px; height: 15px; background: var(--glint); vertical-align: -3px; margin-left: 1px; animation: caret 1s steps(1) infinite; } @keyframes caret { 50% { opacity: 0; } } .composer__send { width: 30px; height: 30px; border-radius: 50%; display: grid; place-items: center; background: #1c1c1a; color: var(--steel); transition: background-color .2s, color .2s; } .composer__send svg { width: 14px; height: 14px; } .composer[data-phase="ready"] .composer__send { background: var(--amber-fill); color: var(--ink); } /* Screen: shared board */ .board { flex: 1; min-height: 0; display: flex; flex-direction: column; } .board__cols { flex: 1; min-height: 0; display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 10px; padding: 14px; } .board__col { position: relative; min-width: 0; display: flex; flex-direction: column; gap: 8px; } .board__ghost { position: absolute; left: 0; right: 0; top: 40px; height: 76px; border: 1px dashed var(--line-2); border-radius: 10px; pointer-events: none; } .board__colhead { display: flex; align-items: center; gap: 8px; padding: 2px 2px 6px; } .board__colhead .who__name { font-size: 12.5px; } .board__count { margin-left: auto; font: 400 10.5px/1 var(--mono); color: var(--text-3); } .task { position: relative; background: var(--panel); border: 1px solid var(--line); border-radius: 10px; padding: 10px 10px 9px; display: flex; flex-direction: column; gap: 9px; min-width: 0; transition: border-color .35s, box-shadow .35s; } .task__top { display: flex; align-items: flex-start; justify-content: space-between; gap: 8px; min-width: 0; } .task__title { font-size: 12.5px; line-height: 1.35; color: var(--paper); font-weight: 500; min-width: 0; } .task__state { flex: none; width: 16px; height: 16px; display: grid; place-items: center; margin-top: 1px; } .task__state::before { content: ""; width: 6px; height: 6px; border-radius: 50%; border: 1px solid var(--steel); } .task__state svg { display: none; width: 9px; height: 9px; color: var(--ink); } .task[data-phase="active"] { border-color: var(--amber-line); box-shadow: 0 0 18px -6px rgba(245, 158, 11, .45); } .task[data-phase="active"] .task__state::before { border: 0; background: var(--glint); box-shadow: 0 0 8px 1px rgba(251, 191, 36, .65); animation: live 1.6s ease-in-out infinite; } .task[data-phase="done"] .task__title { color: var(--text-3); } .task[data-phase="done"] .task__state { border-radius: 50%; background: var(--live); } .task[data-phase="done"] .task__state::before { display: none; } .task[data-phase="done"] .task__state svg { display: block; } @keyframes live { 50% { opacity: .55; } } .task__meta { display: flex; align-items: center; gap: 6px; min-height: 22px; min-width: 0; } .task .model-chip { font-size: 10px; padding: 0 7px; max-width: 100%; overflow: hidden; } .task .model-chip .tier { display: none; } .task--waiting { background: transparent; border-style: dashed; border-color: var(--line-2); } .task--waiting .task__title { color: var(--text-3); font-weight: 400; } /* Screen: Neo's standup */ .standup { padding: 18px; display: flex; flex-direction: column; gap: 16px; } .standup__head { display: flex; align-items: center; gap: 12px; } .standup__head .h { font: 500 16px/1.2 var(--serif); } .standup__group h4 { font: 500 10px/1 var(--mono); letter-spacing: .14em; text-transform: uppercase; color: var(--amber); margin-bottom: 8px; } .standup__group li { display: flex; align-items: center; gap: 10px; padding: 8px 0; border-top: 1px solid var(--line); color: #e4e4de; font-size: 12.5px; } .standup__group li .st-btn, .standup__group li .model-chip { margin-left: auto; } .standup__group--you li { border: 1px solid var(--amber-line); background: var(--amber-bg); border-radius: 10px; padding: 8px 8px 8px 12px; } /* Screen: approval request */ .approval { padding: 18px; display: flex; flex-direction: column; gap: 14px; } .approval__ask { display: flex; gap: 10px; align-items: flex-start; } .approval__card { border: 1px solid var(--line); border-radius: 12px; overflow: hidden; background: var(--panel); } .approval__preview { aspect-ratio: 16 / 7; background: #f5f5f0; border-bottom: 1px solid var(--line); padding: 16px 18px; display: flex; flex-direction: column; gap: 8px; justify-content: center; } .approval__preview i { display: block; height: 7px; border-radius: 4px; background: #d9d9d2; } .approval__preview i.h { height: 13px; width: 55%; background: #1a1a18; } .approval__preview i.s { width: 80%; } .approval__preview i.t { width: 64%; } .approval__preview i.b { width: 22%; height: 18px; border-radius: 999px; background: var(--amber); margin-top: 4px; } .approval__rows { padding: 4px 14px; } .approval__rows div { display: flex; justify-content: space-between; gap: 12px; padding: 8px 0; font-size: 12.5px; } .approval__rows div + div { border-top: 1px solid var(--line); } .approval__rows dt { color: var(--text-3); } .approval__rows dd { color: var(--paper); text-align: right; display: flex; align-items: center; gap: 6px; } .approval__rows .ok { color: var(--live); } .approval__actions { display: flex; gap: 8px; flex-wrap: wrap; } /* Screen: budget-cap pause */ .budget { padding: 18px; display: flex; flex-direction: column; gap: 16px; } .budget__banner { display: flex; align-items: center; gap: 10px; padding: 10px 12px; border-radius: 10px; border: 1px solid var(--amber-line); background: var(--amber-bg); } .budget__banner .status { color: var(--glint); } .budget__meter { position: relative; height: 8px; border-radius: 4px; background: #1c1c1a; } .budget__fill { position: absolute; inset: 0 auto 0 0; width: var(--spent, 80%); border-radius: 4px; background: var(--amber-fill); } .budget__cap { position: absolute; top: -6px; bottom: -6px; right: 0; width: 2px; border-radius: 1px; background: var(--paper); } .budget__nums { display: flex; justify-content: space-between; font: 400 11px/1 var(--mono); color: var(--text-3); margin-top: 10px; } .budget__nums b { color: var(--paper); font-weight: 500; } .budget__next { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 10px; padding: 10px 0; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); font-size: 12.5px; color: #e4e4de; } .budget__next .mono { margin-left: auto; color: var(--paper); font-size: 12px; } .budget__team { display: flex; align-items: center; gap: 6px; } .budget__team img { width: 24px; height: 24px; border-radius: 50%; opacity: .5; } /* Screen: task summary table */ .summary { width: 100%; font-size: 12.5px; } .summary th { text-align: left; font: 500 10px/1 var(--mono); letter-spacing: .14em; text-transform: uppercase; color: var(--text-3); padding: 13px 14px 11px; border-bottom: 1px solid var(--line); white-space: nowrap; } .summary td { padding: 9px 14px; border-bottom: 1px solid var(--line); color: #e4e4de; vertical-align: middle; } .summary td:first-child { color: var(--paper); } .summary .cost { text-align: right; font-family: var(--mono); font-variant-numeric: tabular-nums; white-space: nowrap; color: var(--paper); } .summary th.cost { color: var(--text-3); } .summary .who { gap: 7px; } .summary tfoot td { border-bottom: 0; font-weight: 600; color: var(--paper); padding-top: 12px; padding-bottom: 12px; } .summary tfoot .cost { color: var(--glint); } .rerun-tag { display: inline-block; margin-left: 6px; font: 500 9px/1 var(--mono); letter-spacing: .1em; text-transform: uppercase; color: var(--amber); border: 1px solid var(--amber-line); border-radius: 999px; padding: 3px 6px; vertical-align: 1px; } .sub-who { display: none; margin-top: 4px; align-items: center; gap: 6px; font-size: 11px; } .sub-who img { width: 24px; height: 24px; border-radius: 50%; } @container studio (max-width: 520px) { .summary thead th:nth-child(2), .summary tbody td:nth-child(2), .summary tfoot td:nth-child(2) { display: none; } .summary th, .summary td { padding-left: 12px; padding-right: 12px; } .summary td:first-child .sub-who { display: flex; } } /* Summary close-up: one row, magnified */ .summary-line { border: 1px solid var(--line-2); border-radius: var(--radius-lg); background: #0d0d0c; overflow: hidden; container: sline / inline-size; box-shadow: 0 40px 90px -40px rgba(245, 158, 11, .25); } .summary-line__head, .summary-line__row { display: grid; grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr) minmax(0, 1.25fr) auto; gap: 16px; align-items: center; padding: 0 22px; } .summary-line__head { height: 44px; border-bottom: 1px solid var(--line); font: 500 10.5px/1 var(--mono); letter-spacing: .14em; text-transform: uppercase; color: var(--text-3); } .summary-line__head span:last-child { text-align: right; } .summary-line__row { min-height: 60px; border-bottom: 1px solid var(--line); color: var(--text-3); font-size: 14px; } .summary-line__row--ghost > * { opacity: .4; } .summary-line__row--focus { min-height: 92px; font: 500 19px/1.3 var(--serif); color: var(--paper); position: relative; background: var(--amber-bg); box-shadow: inset 0 0 0 1px var(--amber-line); } .summary-line__row--focus .who { font-family: var(--ui); font-size: 16px; } .summary-line__row--focus .model-chip { height: 28px; font-size: 12.5px; padding: 0 11px; } .summary-line__row--focus .avatar { width: 32px; height: 32px; } .summary-line__row--focus .cost { font-size: 22px; color: var(--glint); } .summary-line__row .cost { font-family: var(--mono); font-variant-numeric: tabular-nums; text-align: right; } .summary-line .model-chip { justify-self: start; } .summary-line__foot { display: flex; justify-content: space-between; align-items: center; padding: 12px 22px; } @container sline (max-width: 520px) { .summary-line__head { display: none; } .summary-line__row { grid-template-columns: minmax(0, 1fr) auto; padding: 12px 16px; row-gap: 8px; } .summary-line__row .who, .summary-line__row .model-chip { grid-row: 2; } .summary-line__row .who { grid-column: 1; } .summary-line__row .model-chip { grid-column: 2; justify-self: end; } .summary-line__row .task-name { grid-column: 1; grid-row: 1; } .summary-line__row .cost { grid-column: 2; grid-row: 1; } .summary-line__row--focus { font-size: 17px; } .summary-line__row--focus .cost { font-size: 18px; } .summary-line__foot { padding: 12px 16px; justify-content: flex-end; } .summary-line__foot .status { display: none; } } .screens { display: grid; gap: 20px; grid-template-columns: minmax(0, 1fr); align-items: start; } @media (min-width: 900px) { .screens--2 { grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); } .screens--2-even { grid-template-columns: repeat(2, minmax(0, 1fr)); } .screens--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); } } /* Demo clip / tour: timeline-driven states (js/site.js, DemoPlayer) */ .js .demo-player [data-at] { transition: opacity .45s var(--ease), transform .45s var(--ease); } .js .demo-player [data-at]:not(.is-in) { opacity: 0; transform: translateY(6px); } .js .demo-player .task [data-at]:not(.is-in) { transform: none; } .js .demo-player .model-chip[data-at].is-in { animation: chip-in 1s var(--ease); } @keyframes chip-in { 0% { box-shadow: 0 0 0 0 rgba(251, 191, 36, 0); border-color: var(--glint); } 30% { box-shadow: 0 0 14px 1px rgba(251, 191, 36, .5); border-color: var(--glint); } 100% { box-shadow: 0 0 0 0 rgba(251, 191, 36, 0); } } .demo-player.is-resetting .studio__body { opacity: 0; } .route-status { position: relative; min-width: 210px; height: 20px; display: inline-flex; align-items: center; justify-content: flex-end; } .route-status > span { position: absolute; right: 0; } .studio__screen { position: absolute; inset: 0; z-index: 2; background: #0d0d0c; display: grid; place-items: start center; overflow: hidden; padding: 28px 20px; } .studio__screen > * { width: 100%; max-width: 620px; } .studio__screen .summary { border: 1px solid var(--line); border-radius: 12px; overflow: hidden; display: table; } .js .demo-player .studio__screen:not(.is-in) { pointer-events: none; } @container studio (max-width: 980px) { .studio--app .studio__body { grid-template-columns: minmax(0, 1fr); height: 560px; } .studio--app .studio__rail { display: none; } .studio--app .studio__pane { grid-area: 1 / 1; transition: opacity .5s var(--ease), transform .5s var(--ease); } .studio--app .studio__pane + .studio__pane { border-left: 0; } .studio--app .studio__pane--board { opacity: 0; transform: translateX(16px); pointer-events: none; } .studio--app[data-phase="board"] .studio__pane--chat { opacity: 0; transform: translateX(-16px); pointer-events: none; } .studio--app[data-phase="board"] .studio__pane--board { opacity: 1; transform: none; pointer-events: auto; } } @container studio (max-width: 720px) { .board__cols { grid-template-columns: minmax(0, 1fr); gap: 0; padding: 6px 14px; overflow: hidden; align-content: start; } .board__col { display: grid; grid-template-columns: 104px minmax(0, 1fr); gap: 5px 10px; align-items: start; padding: 9px 0; border-top: 1px solid var(--line); } .board__col:first-child { border-top: 0; } .board__colhead { padding: 4px 0 0; grid-row: 1 / span 4; } .board__count, .board__ghost { display: none; } .task { flex-direction: row; align-items: center; justify-content: space-between; padding: 6px 8px; gap: 8px; } .task__top { flex: 1; align-items: center; } .task__title { font-size: 12px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .task__meta { flex: none; min-height: 0; } .task--hide-sm { display: none; } .route-status { display: none; } .pane-head__meta .spend-label { display: none; } } @container studio (max-width: 440px) { .studio--app .studio__body { height: 600px; } .board__col { grid-template-columns: minmax(0, 1fr); gap: 5px; padding: 7px 0; } .board__colhead { grid-row: auto; padding: 0; } .task--hide-xs { display: none; } .msg__plan li { font-size: 12px; } } /* Final frame: launched site beside Neo's summary */ .final { display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr); } .final__site { padding: 18px; border-right: 1px solid var(--line); display: flex; flex-direction: column; gap: 12px; } .browser { border: 1px solid var(--line-2); border-radius: 10px; overflow: hidden; background: #f5f5f0; } .browser__bar { height: 28px; display: flex; align-items: center; gap: 6px; padding: 0 10px; background: #e9e9e3; border-bottom: 1px solid #d9d9d2; } .browser__bar i { width: 7px; height: 7px; border-radius: 50%; background: #c9c9c2; } .browser__bar span { margin-left: 8px; height: 14px; flex: 1; max-width: 220px; border-radius: 7px; background: #f5f5f0; border: 1px solid #d9d9d2; } .browser__page { padding: 22px 22px 26px; display: flex; flex-direction: column; gap: 10px; } .browser__page i { display: block; height: 8px; border-radius: 4px; background: #dcdcd5; } .browser__page .nav { display: flex; justify-content: space-between; margin-bottom: 14px; } .browser__page .nav b { width: 54px; height: 10px; border-radius: 3px; background: #1a1a18; } .browser__page .nav span { display: flex; gap: 8px; } .browser__page .nav span i { width: 26px; height: 6px; background: #c9c9c2; } .browser__page .h1 { height: 18px; width: 72%; background: #1a1a18; border-radius: 4px; } .browser__page .h1.two { width: 48%; } .browser__page .p { width: 86%; } .browser__page .p2 { width: 60%; } .browser__page .cta { width: 92px; height: 24px; border-radius: 999px; background: var(--amber); margin-top: 8px; } .browser__page .tiles { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; margin-top: 14px; } .browser__page .tiles i { height: 54px; border-radius: 6px; background: #ebebe5; border: 1px solid #dcdcd5; } .final__summary { padding: 18px; display: flex; flex-direction: column; gap: 14px; } .final__total { display: flex; justify-content: space-between; align-items: baseline; padding: 12px 0; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); } .final__total b { font: 500 22px/1 var(--mono); color: var(--glint); } .final__list li { display: flex; align-items: center; gap: 8px; padding: 6px 0; font-size: 12.5px; color: #e4e4de; } .final__list li .model-chip { margin-left: auto; } @container studio (max-width: 640px) { .final { grid-template-columns: minmax(0, 1fr); } .final__site { border-right: 0; border-bottom: 1px solid var(--line); } } /* ========================================================================== 12. Diagrams ========================================================================== */ /* Team diagram: You -> Neo -> five teammates -> ModelShifter -> ZB Cloud */ .team-diagram { --char: 96px; position: relative; max-width: 880px; margin-inline: auto; display: flex; flex-direction: column; align-items: center; text-align: center; container: team / inline-size; } .td-you { display: inline-flex; align-items: center; gap: 10px; height: 42px; padding: 0 18px 0 6px; border-radius: 10px; border: 1px solid var(--line); background: var(--panel); font: 500 14px/1 var(--mono); color: var(--paper); } .td-you__icon { width: 28px; height: 28px; border-radius: 50%; border: 1px solid var(--line-2); display: grid; place-items: center; color: var(--text-3); } .td-you__icon svg { width: 14px; height: 14px; } .td-stem { position: relative; width: 1px; height: 36px; background: var(--dash-v); } .td-stem--live { background: repeating-linear-gradient(to bottom, var(--glint) 0 3px, transparent 3px 10px); } .td-stem--live::after { content: ""; position: absolute; left: -3px; bottom: -3px; width: 7px; height: 7px; border-radius: 50%; background: var(--glint); box-shadow: 0 0 8px 1px rgba(251, 191, 36, .6); } .td-char { display: flex; flex-direction: column; align-items: center; gap: 6px; min-width: 0; } .td-char img { width: var(--char); height: var(--char); } .td-char__name { font: 500 17px/1.2 var(--serif); color: var(--paper); } .td-char__role { font-size: .75rem; line-height: 1.3; } .td-team { position: relative; display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); width: 100%; padding-top: 28px; } .td-team::before { content: ""; position: absolute; top: 0; left: 10%; right: 10%; height: 1px; background: var(--dash-h); } .td-team > li { position: relative; padding: 0 4px; } .td-team > li::before { content: ""; position: absolute; top: -28px; left: 50%; width: 1px; height: 28px; background: var(--dash-v); } .td-merge { position: relative; width: 100%; height: 44px; } .td-merge::before { content: ""; position: absolute; bottom: 22px; left: 10%; right: 10%; height: 1px; background: var(--dash-h); } .td-merge::after { content: ""; position: absolute; bottom: 0; left: 50%; width: 1px; height: 22px; background: var(--dash-v); } .td-merge i { position: absolute; top: 0; height: 22px; width: 1px; background: var(--dash-v); } .td-merge i:nth-child(1) { left: 10%; } .td-merge i:nth-child(2) { left: 30%; } .td-merge i:nth-child(3) { left: 50%; } .td-merge i:nth-child(4) { left: 70%; } .td-merge i:nth-child(5) { left: 90%; } .td-tier { display: flex; align-items: center; justify-content: center; width: 100%; border-radius: 13px; } .td-tier--shifter { max-width: 420px; height: 76px; border: 1px solid var(--amber-line); background: linear-gradient(160deg, rgba(245, 158, 11, .1), rgb(20, 16, 7) 62%), #070706; box-shadow: 0 0 40px -14px rgba(245, 158, 11, .45); } .td-tier--shifter img { width: 168px; height: auto; } .td-tier--cloud { height: 84px; border: 1px solid var(--line); background: var(--panel); } .td-tier--cloud img { width: 150px; height: auto; } @container team (max-width: 620px) { .td-char { --char: 72px; } .td-team { grid-template-columns: repeat(3, minmax(0, 1fr)); row-gap: 20px; padding: 20px 8px; border: 1px dashed var(--amber-line); border-radius: var(--radius); } .td-team::before, .td-team > li::before { display: none; } .td-merge { height: 32px; } .td-merge::before, .td-merge i { display: none; } .td-merge::after { height: 32px; } .td-char__role { font-size: .6875rem; } } .team-diagram--small { max-width: 640px; } .team-diagram--small .td-char { --char: 56px; } .team-diagram--small .td-char__role { display: none; } .team-diagram--small .td-tier--shifter { height: 60px; } .team-diagram--small .td-tier--cloud { height: 60px; } /* "Launch my product" flow: one row per task (--short 4 rows, --full 6 rows) */ .flow { border: 1px solid var(--line); border-radius: var(--radius-lg); background: var(--panel); overflow: hidden; container: flow / inline-size; } .flow__head { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 20px; padding: 16px 20px; border-bottom: 1px solid var(--line); } .flow__goal { display: flex; align-items: baseline; gap: 12px; font: 500 18px/1.2 var(--serif); color: var(--paper); } .flow__goal .label { color: var(--amber); letter-spacing: .18em; font-size: 10.5px; } .flow__brand { margin-left: auto; display: flex; align-items: center; gap: 14px; } .flow__brand img { width: 160px; height: auto; } .flow__cols, .flow__row { display: grid; grid-template-columns: 28px 150px minmax(0, 1fr) 56px 228px minmax(0, .8fr); gap: 0 16px; align-items: center; padding: 0 20px; } .flow__cols { height: 40px; border-bottom: 1px solid var(--line); } .flow__cols .label { font-size: 10px; } .flow__row { min-height: 72px; border-bottom: 1px solid var(--line); position: relative; } .flow__row:last-child { border-bottom: 0; } .flow__n { font: 500 11px/1 var(--mono); letter-spacing: .1em; color: var(--amber); } .flow__who { display: flex; align-items: center; gap: 10px; min-width: 0; } .flow__who img { width: 32px; height: 32px; border-radius: 50%; flex: none; } .flow__who b { display: block; font-weight: 600; font-size: .9375rem; line-height: 1.2; } .flow__who span span { display: block; font-size: .6875rem; color: var(--text-3); line-height: 1.3; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .flow__task { font-size: .9375rem; color: var(--paper); line-height: 1.4; } .flow__route { position: relative; height: 1px; background: var(--dash-h); } .flow__route::after { content: ""; position: absolute; top: -3px; right: -2px; width: 7px; height: 7px; border-radius: 50%; background: var(--steel); transition: background-color .4s, box-shadow .4s; } .flow__route i { position: absolute; inset: 0; background: repeating-linear-gradient(to right, var(--glint) 0 3px, transparent 3px 10px); transform-origin: 0 50%; } .flow__row.is-live .flow__route::after { background: var(--glint); box-shadow: 0 0 8px 1px rgba(251, 191, 36, .6); } .flow__model { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; } .flow__why { font: 400 .75rem/1.45 var(--mono); color: var(--text-3); } .flow__row--rerun { background: var(--amber-bg); } .flow__fail { display: flex; width: fit-content; align-items: center; gap: 6px; margin-top: 4px; font: 400 .6875rem/1.4 var(--mono); color: var(--text-3); } .flow__fail svg { width: 12px; height: 12px; color: var(--glint); } .flow__fail s { text-decoration-color: var(--text-3); } .flow .model-chip { height: 26px; font-size: .71875rem; padding: 0 10px; } .js .flow.reveal .flow__route i { transform: scaleX(0); transition: transform .7s var(--ease); transition-delay: calc(300ms + var(--r, 0) * 380ms); } .js .flow.reveal .flow__model > *, .js .flow.reveal .flow__why { opacity: 0; transition: opacity .5s var(--ease); transition-delay: calc(700ms + var(--r, 0) * 380ms); } .js .flow.reveal.is-visible .flow__route i { transform: scaleX(1); } .js .flow.reveal.is-visible .flow__model > *, .js .flow.reveal.is-visible .flow__why { opacity: 1; } @container flow (max-width: 860px) { .flow__cols { display: none; } .flow__row { grid-template-columns: 24px minmax(0, 1fr) auto; grid-template-areas: "n who model" "n task task" "n why why"; gap: 6px 12px; padding: 16px; align-items: start; } .flow__n { grid-area: n; padding-top: 10px; } .flow__who { grid-area: who; } .flow__task { grid-area: task; padding-top: 4px; } .flow__route { display: none; } .flow__model { grid-area: model; justify-content: flex-end; padding-top: 3px; } .flow__why { grid-area: why; } .flow__brand { margin-left: 0; width: 100%; justify-content: space-between; flex-wrap: wrap; gap: 10px; } .flow__head { padding: 14px 16px; } } @container flow (max-width: 420px) { .flow__row { grid-template-columns: minmax(0, 1fr) auto; grid-template-areas: "who model" "task task" "why why"; } .flow__n { display: none; } .flow__who > span > span { display: none; } } /* Checks close-up: task -> failed check -> rerun on a stronger model */ .rerun { display: grid; grid-template-columns: minmax(0, 1fr) 48px minmax(0, 1fr) 48px minmax(0, 1fr); align-items: stretch; } .rerun__step { border: 1px solid var(--line); border-radius: var(--radius); padding: 18px; background: var(--panel); display: flex; flex-direction: column; gap: 12px; } .rerun__step--fail { border-style: dashed; border-color: var(--amber-line); background: var(--amber-bg); } .rerun__step--pass { border-color: var(--live-line); background: var(--live-bg); box-shadow: 0 0 24px -10px rgba(74, 222, 128, .4); } .rerun__k { display: flex; justify-content: space-between; align-items: center; } .rerun__k .label { color: var(--amber); letter-spacing: .18em; } .rerun__t { font: 500 18px/1.25 var(--serif); color: var(--paper); } .rerun__d { font: 400 .75rem/1.55 var(--mono); color: var(--text-3); } .rerun__badge { display: inline-flex; align-items: center; gap: 6px; font: 500 .6875rem/1 var(--mono); color: var(--glint); } .rerun__step--pass .rerun__badge { color: var(--live); } .rerun__badge svg { width: 13px; height: 13px; } .rerun__arrow { position: relative; align-self: center; height: 1px; background: var(--dash-h); margin: 0 6px; } .rerun__arrow::after { content: ""; position: absolute; right: -1px; top: -3px; width: 7px; height: 7px; border-top: 1px solid var(--amber); border-right: 1px solid var(--amber); transform: rotate(45deg); } .rerun__arrow--live { background: repeating-linear-gradient(to right, var(--glint) 0 3px, transparent 3px 10px); } @media (max-width: 760px) { .rerun { grid-template-columns: minmax(0, 1fr); } .rerun__arrow { width: 1px; height: 28px; margin: 0 auto; background: var(--dash-v); } .rerun__arrow--live { background: repeating-linear-gradient(to bottom, var(--glint) 0 3px, transparent 3px 10px); } .rerun__arrow::after { top: auto; bottom: -1px; right: -3px; transform: rotate(135deg); } } /* Cost picture: premium for every task vs premium only at the top */ .costpic { padding: 0; container: costpic / inline-size; } .costpic__chart { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: clamp(20px, 5cqi, 56px); align-items: end; height: 380px; padding: 0 clamp(4px, 3cqi, 32px); border-bottom: 1px solid var(--line-2); } .costpic__bar { height: 100%; display: flex; flex-direction: column; justify-content: flex-end; align-items: center; position: relative; } .costpic__stack { width: min(140px, 100%); display: flex; flex-direction: column; gap: 2px; } .costpic__seg { height: calc(var(--h, 40px) * var(--k, 1)); border-radius: 4px; position: relative; transform-origin: 50% 100%; background: linear-gradient(180deg, #fbbf24, #f59e0b 70%, #d97706); } .costpic__seg--top { box-shadow: 0 0 24px -6px rgba(245, 158, 11, .7); } .costpic__seg--mid { background: #8a6a33; } .costpic__seg--low { background: #3a3a36; } .costpic__tick { position: absolute; left: calc(100% + 10px); top: 50%; display: flex; align-items: center; gap: 6px; white-space: nowrap; font: 400 .6875rem/1 var(--mono); color: var(--text-3); transform: translateY(-50%); } .costpic__tick::before { content: ""; width: 14px; height: 1px; background: var(--glint); } .costpic__labels { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: clamp(20px, 5cqi, 56px); padding: 14px clamp(4px, 3cqi, 32px) 0; text-align: center; } .costpic__labels b { display: block; font: 500 17px/1.25 var(--serif); color: var(--paper); } .costpic__labels span { display: block; font: 400 .75rem/1.4 var(--mono); color: var(--text-3); margin-top: 4px; } .costpic__legend { display: flex; flex-wrap: wrap; gap: 8px 20px; margin-top: 22px; padding-top: 16px; border-top: 1px solid var(--line); } .costpic__legend li { display: flex; align-items: center; gap: 8px; font: 400 .75rem/1 var(--mono); color: var(--text-3); } .costpic__legend i { width: 12px; height: 12px; border-radius: 3px; background: var(--amber-fill); } .costpic__legend i.mid { background: #8a6a33; } .costpic__legend i.low { background: #3a3a36; } .js .costpic.reveal .costpic__seg { transform: scaleY(0); transition: transform .6s var(--ease); transition-delay: calc(200ms + var(--s, 0) * 70ms); } .js .costpic.reveal.is-visible .costpic__seg { transform: none; } @container costpic (max-width: 420px) { .costpic__chart { height: 280px; } .costpic__seg { --k: .78; } .costpic__tick { display: none; } } /* Category comparison table. Stacked cards under 760px. */ .compare-wrap { border: 1px solid var(--line); border-radius: var(--radius-lg); overflow: hidden; background: var(--panel); } .compare { width: 100%; table-layout: fixed; } .compare th, .compare td { padding: 20px 16px; border-bottom: 1px solid var(--line); text-align: center; vertical-align: middle; } .compare thead th { font: 500 10.5px/1.45 var(--mono); letter-spacing: .12em; text-transform: uppercase; color: var(--text-3); vertical-align: bottom; padding-top: 18px; padding-bottom: 16px; } .compare thead th:first-child { width: 36%; } .compare tbody th { text-align: left; font-weight: 400; } .compare__cat { display: block; font: 500 18px/1.25 var(--serif); color: var(--paper); margin-bottom: 6px; } .compare__line { display: block; font-size: .875rem; color: var(--text-2); line-height: 1.5; } .compare tbody tr:last-child th, .compare tbody tr:last-child td { border-bottom: 0; } .compare__us { background: var(--amber-bg); } .compare__us th { position: relative; } .compare__us th::before { content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 2px; background: var(--amber-fill); } .compare__us .compare__cat { color: var(--glint); } .mark { display: inline-grid; place-items: center; width: 26px; height: 26px; border-radius: 50%; vertical-align: middle; } .mark svg { width: 13px; height: 13px; } .mark--yes { border: 1px solid var(--amber-line); color: var(--glint); } .mark--no { color: #55554f; } .mark--no svg { width: 12px; height: 2px; } .compare__us .mark--yes { background: var(--amber-fill); border-color: transparent; color: var(--ink); box-shadow: 0 0 12px -2px rgba(245, 158, 11, .6); } .compare__k { display: none; } @media (max-width: 760px) { .compare, .compare tbody, .compare tr, .compare th, .compare td { display: block; width: auto !important; } .compare thead { display: none; } .compare tr { padding: 20px; border-bottom: 1px solid var(--line); } .compare tbody tr:last-child { border-bottom: 0; } .compare th, .compare td { padding: 0; border: 0; text-align: left; } .compare tbody th { margin-bottom: 14px; } .compare td { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 8px 0; border-top: 1px solid var(--line); } .compare__k { display: block; font-size: .875rem; color: var(--text-2); } .compare__us th::before { left: -20px; } .mark { width: 22px; height: 22px; } } /* Handoff / shared memory: Iris -> Lumi -> Bolt with ZB Stack beneath */ .handoff { container: handoff / inline-size; position: relative; } .handoff__lanes { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); position: relative; } .handoff__step { display: flex; flex-direction: column; align-items: center; text-align: center; gap: 10px; position: relative; padding: 0 12px; } .handoff__step img.char { width: 88px; height: 88px; } .handoff__step > div { display: flex; flex-direction: column; align-items: center; gap: 2px; } .handoff__name { font: 500 18px/1.2 var(--serif); color: var(--paper); } .handoff__role { font-size: .75rem; } .handoff__task { margin-top: 8px; display: inline-flex; align-items: center; gap: 8px; border: 1px solid var(--line-2); border-radius: 999px; padding: 6px 12px; font: 500 .75rem/1 var(--mono); color: var(--paper); background: var(--panel); } .handoff__task::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: var(--steel); } .handoff__step.is-live .handoff__task { border-color: var(--amber-line); background: var(--amber-bg); } .handoff__step.is-live .handoff__task::before { background: var(--glint); box-shadow: 0 0 8px 1px rgba(251, 191, 36, .6); } .handoff__step:not(:last-child)::after { content: ""; position: absolute; top: 44px; left: calc(50% + 60px); right: calc(-50% + 60px); height: 1px; background: var(--dash-h); } .handoff__mem { margin-top: 28px; border: 1px solid var(--amber-line); border-radius: 13px; padding: 14px 18px; display: flex; flex-wrap: wrap; align-items: center; gap: 10px 14px; position: relative; background: linear-gradient(160deg, rgba(245, 158, 11, .1), rgb(20, 16, 7) 62%), #070706; } .handoff__mem .label { margin-right: 4px; color: var(--glint); letter-spacing: .18em; } .handoff__mem ul { display: flex; flex-wrap: wrap; gap: 8px; } .handoff__mem li { font: 500 .75rem/1 var(--mono); border: 1px solid var(--line-2); border-radius: 999px; padding: 6px 10px; color: var(--paper); background: var(--ink); } .handoff__ties { position: absolute; inset: auto 0 100% 0; height: 28px; display: grid; grid-template-columns: repeat(3, 1fr); pointer-events: none; } .handoff__ties i { justify-self: center; width: 1px; height: 100%; background: var(--dash-v); } .handoff__mem-dot { position: absolute; top: -4px; width: 7px; height: 7px; border-radius: 50%; background: var(--glint); box-shadow: 0 0 8px 1px rgba(251, 191, 36, .6); left: 16.66%; transform: translateX(-50%); } .js .handoff.is-visible .handoff__mem-dot { animation: mem-travel 6s var(--ease) infinite; } @keyframes mem-travel { 0%, 12% { left: 16.66%; } 38%, 50% { left: 50%; } 76%, 100% { left: 83.33%; } } @container handoff (max-width: 560px) { .handoff__lanes { grid-template-columns: minmax(0, 1fr); gap: 28px; } .handoff__step { flex-direction: row; text-align: left; gap: 14px; padding: 0; } .handoff__step img.char { width: 64px; height: 64px; } .handoff__step > div { align-items: flex-start; } .handoff__step:not(:last-child)::after { top: 72px; left: 32px; right: auto; width: 1px; height: 20px; background: var(--dash-v); } .handoff__ties, .handoff__mem-dot { display: none; } } /* Four stages: build, launch, run, grow */ .stages { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; } .stage { border: 1px solid var(--line); border-radius: var(--radius); padding: 18px; background: var(--panel); display: flex; flex-direction: column; gap: 14px; position: relative; min-width: 0; } .stage__top { display: flex; justify-content: space-between; align-items: center; } .stage__n { font: 500 11px/1 var(--mono); letter-spacing: .14em; color: var(--text-3); } .stage__icon { width: 36px; height: 36px; border-radius: 10px; border: 1px solid var(--line-2); display: grid; place-items: center; color: var(--amber); } .stage__icon svg { width: 18px; height: 18px; } .stage__name { font: 500 22px/1.2 var(--serif); letter-spacing: -.015em; color: var(--paper); } .stage__team { display: flex; gap: 4px; margin-top: auto; } .stage__team img { width: 24px; height: 24px; border-radius: 50%; } .stage--start { border-color: var(--amber-line); background: linear-gradient(160deg, rgba(245, 158, 11, .1), rgb(20, 16, 7) 62%), #070706; box-shadow: 0 0 30px -14px rgba(245, 158, 11, .5); } .stage--start .stage__n { color: var(--amber); } .stage--start .stage__icon { border-color: var(--amber-line); } .stage:not(:last-child)::after { content: ""; position: absolute; top: 36px; right: -13px; width: 14px; height: 1px; background: var(--dash-h); } @media (max-width: 860px) { .stages { grid-template-columns: repeat(2, minmax(0, 1fr)); } .stage::after { display: none; } } @media (max-width: 420px) { .stage { padding: 14px; } .stage__name { font-size: 19px; } } /* ========================================================================== 13. Illustrations ========================================================================== */ /* Problem: four subscriptions in dollars beside one month's card statement */ .subs { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 16px; align-items: start; } .subs__cards { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; } .sub-card { border: 1px solid var(--line); border-radius: var(--radius); padding: 18px; background: transparent; display: flex; flex-direction: column; gap: 16px; min-height: 150px; } .sub-card__icon { width: 32px; height: 32px; border-radius: 9px; border: 1px solid var(--line-2); display: grid; place-items: center; color: var(--text-3); } .sub-card__icon svg { width: 16px; height: 16px; } .sub-card__name { font: 500 17px/1.2 var(--serif); } .sub-card__price { margin-top: auto; font: 400 .75rem/1 var(--mono); color: var(--text-3); } .sub-card__price b { font-size: 1.25rem; font-weight: 500; color: var(--paper); letter-spacing: -.02em; } .statement { border: 1px solid var(--line); border-radius: var(--radius); background: var(--panel); padding: 18px 18px 14px; display: flex; flex-direction: column; font: 400 .75rem/1.4 var(--mono); color: var(--text-3); } .statement__head { display: flex; justify-content: space-between; align-items: baseline; padding-bottom: 12px; border-bottom: 1px solid var(--line); } .statement__head b { font: 500 17px/1.2 var(--serif); color: var(--paper); } .statement__rows li { display: flex; justify-content: space-between; gap: 12px; min-width: 0; padding: 10px 0; border-bottom: 1px dashed var(--line-2); } .statement__rows li span:last-child { color: var(--paper); white-space: nowrap; } .statement__rows li.is-hit span:first-child::before { content: ""; display: inline-block; width: 6px; height: 6px; border-radius: 50%; background: var(--amber); margin-right: 8px; vertical-align: 1px; } .statement__total { display: flex; justify-content: space-between; padding-top: 14px; margin-top: 4px; color: var(--glint); font-weight: 500; font-size: .875rem; } @media (max-width: 640px) { .subs { grid-template-columns: minmax(0, 1fr); } .sub-card { min-height: 0; gap: 12px; padding: 14px; } } /* Stat pair: two figures side by side (About) */ .stat-pair { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); border: 1px solid var(--line); border-radius: var(--radius-lg); overflow: hidden; background: var(--panel); } .stat { padding: clamp(20px, 3vw, 36px); display: flex; flex-direction: column; gap: 10px; } .stat + .stat { border-left: 1px solid var(--line); } .stat__k { font: 500 11px/1 var(--mono); letter-spacing: .14em; text-transform: uppercase; color: var(--text-3); } .stat__v { font: 500 clamp(2.5rem, 1.5rem + 4vw, 4.5rem)/1 var(--serif); letter-spacing: -.035em; color: var(--paper); } .stat--hl .stat__v { background: var(--amber-grad); -webkit-background-clip: text; background-clip: text; color: transparent; padding-bottom: .05em; } .stat__bar { height: 6px; background: #1c1c1a; border-radius: 3px; overflow: hidden; margin-top: 8px; } .stat__bar i { display: block; height: 100%; width: var(--w); min-width: 3px; background: var(--steel); border-radius: 3px; } .stat--hl .stat__bar i { background: var(--amber-fill); } @media (max-width: 480px) { .stat-pair { grid-template-columns: minmax(0, 1fr); } .stat + .stat { border-left: 0; border-top: 1px solid var(--line); } } /* Hero copy (shared by the home hero and inner-page heroes) + closing section */ .hero__copy { max-width: 940px; } .hero__copy .lead { margin-top: 28px; max-width: 46ch; } .hero__copy .btn-row { margin-top: 44px; } .hero__clip { margin-top: var(--block-gap); } .ask .btn-row { justify-content: center; margin-top: 44px; } .ask__needed { max-width: 640px; margin: 32px auto 0; } .ask__frame { margin-top: var(--head-gap); text-align: left; } /* ========================================================================== 14. ModelShifter switchboard diagram (approved v3, ported). JS: ZBModelShifter in js/site.js ========================================================================== */ .msd { --flow: 0px; } .msd__dsk { display: block; } .msd__dsk svg { display: block; width: 100%; height: auto; overflow: visible; } .msd__ctl { display: flex; align-items: center; gap: 10px 22px; flex-wrap: wrap; margin-top: 22px; } .msd__cap { display: flex; align-items: baseline; gap: 4px 20px; flex-wrap: wrap; min-height: 20px; flex: 1 1 420px; } .msd__route, .msd__ev { font: 500 12px/1.6 var(--mono); color: var(--paper); } .msd .k { color: var(--steel); } .msd .md { color: var(--amber); } .msd__ev { opacity: 0; } .msd__note { font-size: 12px; color: var(--text-3); white-space: nowrap; } .msd__svg text { font-family: var(--mono); } .msd .s-box { fill: #101010; stroke: var(--line); stroke-width: 1px; } .msd .s-gate { fill: rgb(21, 16, 7); stroke: rgba(245, 158, 11, .55); stroke-width: 1px; } .msd .s-out { fill: rgb(11, 16, 12); stroke: rgba(74, 222, 128, .34); stroke-width: 1px; } .msd .s-dash { fill: none; stroke-width: 1px; stroke-dasharray: 3 7; } .msd .s-feed, .msd .s-fan path { stroke: rgba(245, 158, 11, .5); } .msd .s-conv path { stroke: rgba(245, 158, 11, .26); } .msd .s-hot path { fill: none; stroke: var(--glint); stroke-width: 1.4px; stroke-dasharray: 3 7; } .msd .s-t1 { fill: var(--paper); } .msd .s-t2 { fill: var(--steel); } .msd .s-name { font-family: var(--serif) !important; letter-spacing: -.01em; fill: var(--glint); font-weight: 600; } .msd .s-kicker { letter-spacing: .18em; fill: rgb(154, 160, 166); } .msd .s-sub { fill: rgb(207, 207, 201); } .msd .s-agent { fill: var(--amber); } .msd .s-job { fill: rgb(201, 205, 209); } .msd .s-dashc { fill: rgb(126, 133, 140); } .msd .s-live { fill: var(--live); } .msd .s-pill { fill: #101010; stroke: var(--line); stroke-width: 1px; } .msd .s-pass { fill: rgb(22, 18, 10); stroke: rgba(245, 158, 11, .75); stroke-width: 1px; } .msd .s-tok rect { fill: rgb(21, 16, 7); stroke: rgba(245, 158, 11, .55); stroke-width: 1px; } .msd .s-tok text { fill: var(--paper); font-weight: 500; } .msd .s-tag rect { fill: #0a0a0a; stroke: rgba(245, 158, 11, .55); stroke-width: 1px; } .msd .s-tag text { fill: var(--amber); letter-spacing: .14em; font-weight: 500; } /* Stacked version below 920px */ .msd__mst { display: none; max-width: 340px; margin: 0 auto; position: relative; } .msd .m-card { position: relative; z-index: 2; text-align: center; border-radius: 12px; display: block; width: 100%; } .msd .m-src { border: 1px solid var(--line); background: #101010; padding: 11px 14px; } .msd .m-src b, .msd .m-out b { font: 500 15px/1.2 var(--serif); color: var(--paper); display: block; } .msd .m-src i, .msd .m-out i { font: 400 10px/1.4 var(--mono); font-style: normal; color: var(--steel); display: block; margin-top: 2px; } .msd .m-out i { color: var(--live); } .msd .m-gate { border: 1px solid rgba(245, 158, 11, .55); background: linear-gradient(160deg, rgba(245, 158, 11, .1), rgb(20, 16, 7) 62%), #070706; padding: 14px 16px; } .msd .m-gate svg { display: block; width: 48px; height: 48px; margin: 0 auto 4px; } .msd .m-gate b { font: 600 22px/1.15 var(--serif); letter-spacing: -.01em; color: var(--glint); display: block; } .msd .m-gate i { font: 400 8.5px/1.4 var(--mono); font-style: normal; letter-spacing: .14em; text-transform: uppercase; color: var(--steel); display: block; margin-top: 4px; } .msd .m-gate em { font-size: 12px; font-style: normal; color: #cfcfc9; display: block; margin-top: 8px; line-height: 1.4; } .msd .m-out { border: 1px solid rgba(74, 222, 128, .34); background: rgb(11, 16, 12); padding: 15px 14px; } .msd .vline { position: absolute; width: 1px; background-image: repeating-linear-gradient(to bottom, rgba(245, 158, 11, .5) 0 3px, transparent 3px 10px); background-position: 0 var(--flow); } .msd .hline { position: absolute; height: 1px; background-image: repeating-linear-gradient(to right, rgba(245, 158, 11, .4) 0 3px, transparent 3px 10px); background-position: var(--flow) 0; } .msd .vline.hot { background-image: repeating-linear-gradient(to bottom, #fbbf24 0 3px, transparent 3px 10px); opacity: 0; z-index: 1; } .msd .hline.hot { background-image: repeating-linear-gradient(to right, #fbbf24 0 3px, transparent 3px 10px); opacity: 0; z-index: 1; } .msd .m-feed { position: relative; height: 104px; } .msd .m-feed > .vline { left: 10px; top: 0; bottom: 0; } .msd .m-tok { position: absolute; left: 0; top: 0; z-index: 1; font: 500 11px/1 var(--mono); color: var(--paper); background: rgb(21, 16, 7); border: 1px solid rgba(245, 158, 11, .55); border-radius: 999px; padding: 5px 10px; white-space: nowrap; opacity: 0; } .msd .m-fan { position: relative; padding: 16px 0 16px 32px; } .msd .m-fan > .vline { left: 10px; top: 0; bottom: 0; } .msd .m-fan ul { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 7px; position: relative; } .msd .m-fan li { position: relative; border: 1px solid var(--line); background: #101010; border-radius: 12px; padding: 8px 14px; display: flex; align-items: baseline; gap: 7px; flex-wrap: wrap; } .msd .m-fan li::before { content: ""; position: absolute; left: -22px; top: 50%; width: 22px; height: 1px; background-image: repeating-linear-gradient(to right, rgba(245, 158, 11, .32) 0 3px, transparent 3px 10px); background-position: var(--flow) 0; } .msd .m-fan li b { font: 500 11.5px/1.35 var(--mono); color: var(--amber); } .msd .m-fan li b::after { content: " \2014"; color: rgb(126, 133, 140); } .msd .m-fan li span { font-size: 13px; line-height: 1.35; color: rgb(201, 205, 209); } .msd .m-dot { position: absolute; left: 0; top: 0; width: 7px; height: 7px; margin: -3.5px 0 0 -3.5px; border-radius: 50%; background: var(--glint); box-shadow: 0 0 8px 1px rgba(251, 191, 36, .6); z-index: 3; opacity: 0; } .msd .m-dot.res { background: var(--live); box-shadow: 0 0 8px 1px rgba(74, 222, 128, .55); } .msd .m-tag { position: absolute; right: 8px; top: 0; z-index: 4; font: 500 8.5px/1 var(--mono); letter-spacing: .14em; color: var(--amber); background: #0a0a0a; border: 1px solid rgba(245, 158, 11, .55); border-radius: 999px; padding: 4px 8px; opacity: 0; white-space: nowrap; } @media (max-width: 919px) { .msd__dsk { display: none; } .msd__mst { display: block; } .msd__note { white-space: normal; } } /* ========================================================================== 15. Hero (home, modelled on the zbstack.xyz hero) + inner-page hero ========================================================================== */ .hero { position: relative; isolation: isolate; overflow: hidden; overflow: clip; color: var(--paper); min-height: calc(100svh - var(--header-h)); display: flex; align-items: center; padding-block: clamp(72px, 9vh, 120px) clamp(112px, 14vh, 176px); background: radial-gradient(120% 90% at 82% 18%, rgba(245, 158, 11, .20), transparent 55%), radial-gradient(80% 70% at 88% 42%, rgba(180, 83, 9, .22), transparent 60%), linear-gradient(#0a0a0a, #100d08); } .hero > .container { position: relative; z-index: 1; } /* The particle mesh: right 60%, faded into black toward the left and the bottom. */ .hero__media { position: absolute; z-index: 0; top: 0; right: 0; bottom: 0; width: 60%; pointer-events: none; -webkit-mask-image: linear-gradient(90deg, transparent 6%, #000 62%), linear-gradient(180deg, #000 58%, transparent 96%); -webkit-mask-composite: source-in; mask-image: linear-gradient(90deg, transparent 6%, #000 62%), linear-gradient(180deg, #000 58%, transparent 96%); mask-composite: intersect; } .hero__media img { width: 100%; height: 100%; object-fit: cover; object-position: 40% 50%; opacity: .78; transform-origin: 60% 50%; } @media (prefers-reduced-motion: no-preference) { .hero__media img { animation: hero-drift 34s ease-in-out infinite alternate; } } @keyframes hero-drift { from { transform: scale(1); } to { transform: scale(1.07) translateY(-8px); } } .hero__fade { position: absolute; z-index: 0; left: 0; right: 0; bottom: 0; height: 140px; pointer-events: none; background: linear-gradient(180deg, transparent, var(--ground) 92%); } @media (min-width: 900px) and (max-width: 1279px) { /* Narrower desktops: the headline reaches further right, so the mesh fades in later. */ .hero__media { -webkit-mask-image: linear-gradient(90deg, transparent 22%, #000 74%), linear-gradient(180deg, #000 58%, transparent 96%); mask-image: linear-gradient(90deg, transparent 22%, #000 74%), linear-gradient(180deg, #000 58%, transparent 96%); } } .hero .h-display { max-width: 11.5em; } .hero .btn-row { gap: 16px 36px; } @media (max-width: 899px) { /* Stack: the mesh sits as a band above the headline and fades out before the text starts. */ .hero { min-height: 0; display: block; padding-top: min(68vw, 360px); padding-bottom: clamp(96px, 20vw, 136px); } .hero__media { left: 0; width: 100%; bottom: auto; height: min(82vw, 440px); -webkit-mask-image: linear-gradient(180deg, #000 30%, transparent 92%), linear-gradient(90deg, transparent 0%, #000 22%, #000 100%); mask-image: linear-gradient(180deg, #000 30%, transparent 92%), linear-gradient(90deg, transparent 0%, #000 22%, #000 100%); } .hero__media img { object-position: 50% 58%; opacity: .7; } } /* Inner-page hero: copy left, image slot right. */ .page-hero__grid { display: grid; grid-template-columns: minmax(0, 1fr); gap: clamp(48px, 6vw, 96px); align-items: center; } .page-hero .h-display { font-size: var(--fs-display-sm); } @media (min-width: 900px) { .page-hero__grid { grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); } } @media (max-width: 899px) { .page-hero__grid .media { max-width: 520px; } } /* ========================================================================== 16. ModelShifter feature stage (home): full-bleed, no box, ambient glow ========================================================================== */ .ms-feature { padding-block: clamp(128px, 14vw, 224px); background: radial-gradient(46% 30% at 50% 50%, rgba(245, 158, 11, .085), transparent 72%), radial-gradient(70% 42% at 50% 54%, rgba(180, 83, 9, .085), transparent 74%), var(--ground); } .ms-feature .section-head { max-width: 900px; } .ms-feature .h2 { font-size: clamp(2.375rem, 1.45rem + 3.1vw, 4.25rem); } .eyebrow--logo { display: flex; justify-content: center; margin-bottom: 30px; } .eyebrow--logo img { width: 176px; height: auto; } .ms-stage { position: relative; margin-top: clamp(72px, 8vw, 128px); } .ms-stage::before { content: ""; position: absolute; z-index: 0; left: 50%; top: 46%; width: min(1500px, 130%); height: 140%; transform: translate(-50%, -50%); pointer-events: none; background: radial-gradient(closest-side, rgba(245, 158, 11, .10), rgba(180, 83, 9, .05) 55%, transparent); } .ms-stage .msd { position: relative; z-index: 1; } .ms-stage .msd__ctl { margin-top: 36px; padding-top: 20px; border-top: 1px solid rgba(255, 255, 255, .06); } /* Three tiers, drawn from the ModelShifter lead. Open columns, no cards. */ .tiers { display: grid; grid-template-columns: minmax(0, 1fr); gap: 40px; max-width: 1120px; margin: clamp(96px, 10vw, 152px) auto 0; } @media (min-width: 900px) { .tiers { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(40px, 5vw, 88px); } } .tiers > li { position: relative; padding-top: 30px; } .tiers > li::before { content: ""; position: absolute; top: 0; left: 0; right: 0; height: 1px; background: linear-gradient(90deg, var(--amber-line), rgba(245, 158, 11, .08) 60%, transparent); } .tiers__k { display: flex; align-items: center; gap: 12px; font: 500 11px/1 var(--mono); letter-spacing: .18em; text-transform: uppercase; color: var(--amber); } .tiers__t { margin-top: 18px; font: 500 clamp(1.3125rem, 1.15rem + .55vw, 1.625rem)/1.3 var(--serif); letter-spacing: -.015em; color: var(--paper); text-wrap: balance; } .tier-bars { display: inline-flex; align-items: flex-end; gap: 3px; height: 16px; } .tier-bars i { width: 4px; border-radius: 1px; background: #3a3a36; } .tier-bars i:nth-child(1) { height: 8px; } .tier-bars i:nth-child(2) { height: 12px; } .tier-bars i:nth-child(3) { height: 16px; } .tier-bars[data-tier="1"] i:nth-child(-n+1), .tier-bars[data-tier="2"] i:nth-child(-n+2), .tier-bars[data-tier="3"] i:nth-child(-n+3) { background: var(--amber-fill); } .tier-bars[data-tier="3"] { filter: drop-shadow(0 0 6px rgba(245, 158, 11, .5)); } /* ========================================================================== 17. Image slots (.media) + designed placeholders Markup: figure.media[style="--ar:W/H"] > img[src="img/-
.webp"] + .media__ph The slot keeps its aspect ratio, so nothing shifts when the real file lands. js/site.js adds .is-loaded (fade in) or .is-missing (shows the placeholder). ========================================================================== */ .media { position: relative; isolation: isolate; overflow: hidden; aspect-ratio: var(--ar, 16 / 9); border-radius: var(--radius-lg); background: #0b0b0a; container: media / inline-size; } .media > img { position: absolute; inset: 0; z-index: 1; width: 100%; height: 100%; object-fit: cover; object-position: var(--focus, 50% 50%); } .js .media > img { opacity: 0; transition: opacity 1s var(--ease); } .js .media.is-loaded > img { opacity: 1; } .media.is-missing > img { display: none; } .media--flush { border-radius: 0; } /* 21:9 bands crop taller on phones (same file; --focus keeps the subject in frame). */ @media (max-width: 640px) { .media--band { aspect-ratio: 16 / 10; } } /* When something overlaps the lower part of a slot, keep the placeholder labels at the top. */ .media--labels-top .media__ph { justify-content: flex-start; } .media--labels-top .media__top { justify-content: flex-start; gap: 20px; } .media__ph { position: absolute; inset: 0; z-index: 0; display: flex; flex-direction: column; justify-content: space-between; gap: 12px; padding: clamp(16px, 4.2cqi, 32px); border-radius: inherit; border: 1px solid rgba(245, 158, 11, .26); background: linear-gradient(90deg, transparent calc(33.333% - .5px), rgba(245, 158, 11, .07) calc(33.333% - .5px), rgba(245, 158, 11, .07) calc(33.333% + .5px), transparent calc(33.333% + .5px), transparent calc(66.666% - .5px), rgba(245, 158, 11, .07) calc(66.666% - .5px), rgba(245, 158, 11, .07) calc(66.666% + .5px), transparent calc(66.666% + .5px)), linear-gradient(180deg, transparent calc(33.333% - .5px), rgba(245, 158, 11, .07) calc(33.333% - .5px), rgba(245, 158, 11, .07) calc(33.333% + .5px), transparent calc(33.333% + .5px), transparent calc(66.666% - .5px), rgba(245, 158, 11, .07) calc(66.666% - .5px), rgba(245, 158, 11, .07) calc(66.666% + .5px), transparent calc(66.666% + .5px)), radial-gradient(60% 70% at var(--glow, 70% 34%), rgba(245, 158, 11, .14), transparent 70%), radial-gradient(70% 60% at 12% 100%, rgba(180, 83, 9, .08), transparent 70%), #0b0b0a; font-family: var(--mono); color: var(--text-3); } /* Registration corners make the empty frame read as a deliberate slot. */ .media__ph::before { content: ""; position: absolute; inset: 10px; pointer-events: none; opacity: .9; --c: rgba(245, 158, 11, .6); background: linear-gradient(var(--c), var(--c)) top left / 14px 1px no-repeat, linear-gradient(var(--c), var(--c)) top left / 1px 14px no-repeat, linear-gradient(var(--c), var(--c)) top right / 14px 1px no-repeat, linear-gradient(var(--c), var(--c)) top right / 1px 14px no-repeat, linear-gradient(var(--c), var(--c)) bottom left / 14px 1px no-repeat, linear-gradient(var(--c), var(--c)) bottom left / 1px 14px no-repeat, linear-gradient(var(--c), var(--c)) bottom right / 14px 1px no-repeat, linear-gradient(var(--c), var(--c)) bottom right / 1px 14px no-repeat; } .media__top, .media__bot { position: relative; display: flex; gap: 8px 16px; } .media__top { justify-content: space-between; align-items: center; } .media__bot { flex-direction: column; max-width: 46ch; } .media__id { display: inline-flex; align-items: center; gap: 8px; font: 500 11px/1 var(--mono); letter-spacing: .18em; color: var(--amber); } .media__id::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: var(--glint); box-shadow: 0 0 10px 1px rgba(251, 191, 36, .55); } .media__ar { font: 400 10.5px/1.3 var(--mono); letter-spacing: .08em; color: var(--text-3); text-align: right; } .media__file { font: 500 12px/1.4 var(--mono); color: var(--paper); word-break: break-all; } .media__desc { font: 400 11.5px/1.55 var(--mono); color: var(--text-3); text-wrap: pretty; } @container media (max-width: 300px) { .media__desc { display: none; } .media__ar { font-size: 9.5px; } } /* While a real image is loading only the dark glow shows; the labels appear only for a missing file. */ .media__ph > *, .media__ph::before { transition: opacity .4s var(--ease); } .js .media:not(.is-missing) .media__ph > *, .js .media:not(.is-missing) .media__ph::before { opacity: 0; } /* ========================================================================== 18. Compositions ========================================================================== */ /* Statement: one big line and a wide image (home, Why ZB Cloud) */ .statement-sec .section-head .link { margin-top: 32px; } .statement-sec .h2 { font-size: clamp(2.375rem, 1.45rem + 3.1vw, 4.25rem); } /* Pair: a photo with a product screen overlapping its edge (home, You stay in charge) */ .pair { display: grid; grid-template-columns: minmax(0, 1fr); align-items: center; } .pair__screen { position: relative; z-index: 2; margin: -64px 12px 0; } @media (min-width: 900px) { .pair { grid-template-columns: minmax(0, 8fr) minmax(0, 5fr); align-items: end; } .pair__screen { margin: 0 0 calc(-1 * clamp(32px, 4vw, 64px)) calc(-1 * clamp(64px, 9vw, 144px)); } .pair { padding-bottom: clamp(32px, 4vw, 64px); } } /* Launch: wide image with the finished-launch frame rising over it (home, closing) */ .launch { margin-top: var(--head-gap); text-align: left; } .launch .ask__frame { position: relative; z-index: 2; max-width: 1040px; margin: calc(-1 * clamp(56px, 13vw, 220px)) auto 0; padding-inline: clamp(0px, 3vw, 48px); } @media (max-width: 640px) { .launch .ask__frame { margin-top: -40px; } } /* Questions: portrait image under the sticky heading */ .q-media { margin-top: clamp(40px, 5vw, 64px); max-width: 400px; } @media (max-width: 899px) { .q-media { display: none; } } /* ========================================================================== 19. Reduced motion ========================================================================== */ @media (prefers-reduced-motion: reduce) { .hero__media img { animation: none; transform: none; } html { scroll-behavior: auto; } *, *::before, *::after { animation-duration: .001ms !important; animation-iteration-count: 1 !important; transition-duration: .001ms !important; transition-delay: 0s !important; } .js .reveal { opacity: 1; transform: none; } .js .flow.reveal .flow__route i { transform: none; } .js .flow.reveal .flow__model > *, .js .flow.reveal .flow__why { opacity: 1; } .js .costpic.reveal .costpic__seg { transform: none; } .composer__caret, .dots i { animation: none; } }