/* ============================================================================ Mootdeck — marketing site · "terminal elegance / typographic drama" Built on the design-system tokens (./styles.css). Near-black canvas, one magenta accent, cyan+amber brand glow used sparingly. The art direction is typographic: a strict hairline grid, dramatic display type, monospace reserved for code/numbers/CLI, and a recurring section-index signature. ============================================================================ */ :root { --site-max: 1200px; --ease: cubic-bezier(0.22, 1, 0.36, 1); --ease-soft: cubic-bezier(0.4, 0, 0.2, 1); --grad-brand: linear-gradient(105deg, var(--md-brand-cyan), var(--md-accent) 55%, var(--md-brand-amber)); --sect-pad: clamp(80px, 12vw, 168px); --hair: color-mix(in srgb, var(--md-border) 80%, transparent); --status-red: #ff5d52; } /* The DS base.css locks html,body to height:100%/overflow:hidden for the fixed app shell. A marketing page needs the document to scroll normally — restore it. overflow-x:hidden lives on (the scroller) so it doesn't turn into a nested scroll container. */ html { height: auto; overflow-x: hidden; overflow-y: auto; scroll-behavior: smooth; } body { height: auto; min-height: 100%; overflow: visible; background: var(--md-bg); color: var(--md-text); line-height: 1.5; } @media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } } ::selection { background: var(--md-accent); color: #fff; } /* ---------------------------------------------------------------- Living bg */ .bg { position: fixed; inset: 0; z-index: 0; pointer-events: none; overflow: hidden; } .bg-grid { position: absolute; inset: -40px; background: radial-gradient(circle at 1px 1px, var(--md-bg-grid) 1.3px, transparent 1.6px) 0 0 / 30px 30px; -webkit-mask-image: radial-gradient(ellipse 80% 70% at 50% 30%, #000 40%, transparent 100%); mask-image: radial-gradient(ellipse 80% 70% at 50% 30%, #000 40%, transparent 100%); opacity: .6; animation: grid-drift 32s linear infinite; } @keyframes grid-drift { to { transform: translate3d(30px, 30px, 0); } } .bg-glow { position: absolute; border-radius: 50%; filter: blur(90px); opacity: .22; will-change: transform; } .bg-glow--magenta { width: 50vw; height: 50vw; top: -10vw; left: 40vw; background: var(--md-accent); } .bg-glow--cyan { width: 42vw; height: 42vw; top: 30vh; left: -12vw; background: var(--md-brand-cyan); opacity: .16; } .bg-glow--amber { width: 36vw; height: 36vw; top: 120vh; left: 55vw; background: var(--md-brand-amber); opacity: .12; } /* a single, very faint scanline sweep — the "terminal" signature, kept subtle */ .bg-scan { position: absolute; inset: 0; background: linear-gradient(to bottom, transparent, color-mix(in srgb, var(--md-accent) 6%, transparent) 50%, transparent); height: 42vh; opacity: .5; animation: scan 9s var(--ease-soft) infinite; } @keyframes scan { 0% { transform: translateY(-50vh); } 100% { transform: translateY(150vh); } } /* --------------------------------------------------------------------- Nav */ .nav { position: fixed; top: 0; left: 0; right: 0; z-index: 100; display: flex; align-items: center; gap: 20px; padding: 16px clamp(18px, 4vw, 40px); transition: padding .3s var(--ease), background .3s var(--ease), border-color .3s var(--ease); border-bottom: 1px solid transparent; } .nav.is-stuck { padding-top: 11px; padding-bottom: 11px; background: color-mix(in srgb, var(--md-bg) 72%, transparent); backdrop-filter: blur(14px) saturate(140%); -webkit-backdrop-filter: blur(14px) saturate(140%); border-bottom: 1px solid var(--md-border); } .nav__brand { display: flex; align-items: center; gap: 9px; font-weight: 600; font-size: 15px; letter-spacing: -0.01em; color: var(--md-text); text-decoration: none; flex: 0 0 auto; } .nav__brand img { filter: drop-shadow(0 0 10px rgba(255,45,120,.35)); border-radius: 7px; } .nav__links { display: flex; gap: 2px; margin-left: 16px; flex: 1 1 auto; } .nav__links a { display: inline-flex; align-items: baseline; gap: 7px; color: var(--md-text-dim); text-decoration: none; font-size: 14px; padding: 7px 12px; border-radius: var(--md-radius-sm); transition: color .15s, background .15s; } .nav__links a:hover { color: var(--md-text); background: var(--md-elev); } .nav__idx { font-family: var(--md-mono); font-size: 10px; color: var(--md-accent); opacity: .65; letter-spacing: 0; } .nav__actions { display: flex; gap: 8px; flex: 0 0 auto; } .nav__burger { display: none; } /* ----------------------------------------------------------------- Buttons */ .btn { --b: var(--md-border); display: inline-flex; align-items: center; justify-content: center; gap: 8px; padding: 9px 16px; border-radius: var(--md-radius-sm); font-family: var(--md-font); font-size: 14px; font-weight: 600; text-decoration: none; cursor: pointer; border: 1px solid var(--b); transition: transform .18s var(--ease), background .18s, border-color .18s, box-shadow .25s; white-space: nowrap; } .btn .ic { width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; } .btn--lg { padding: 13px 22px; font-size: 15px; border-radius: var(--md-radius); } .btn--primary { background: var(--md-accent); color: #fff; --b: transparent; box-shadow: 0 8px 26px -8px var(--md-accent-glow); } .btn--primary:hover { background: var(--md-accent-2); box-shadow: 0 12px 36px -8px var(--md-accent-glow); } .btn--ghost { background: color-mix(in srgb, var(--md-panel) 60%, transparent); color: var(--md-text); } .btn--ghost:hover { background: var(--md-elev); border-color: color-mix(in srgb, var(--md-accent) 50%, var(--md-border)); } .btn:active { transform: translateY(1px) scale(.99); } /* "Coming soon" — honest, non-clickable state for unshipped links */ .btn.is-soon { cursor: default; color: var(--md-text-dim); background: color-mix(in srgb, var(--md-panel) 45%, transparent); border-style: dashed; opacity: .85; } .btn.is-soon:hover { transform: none; border-color: var(--b); background: color-mix(in srgb, var(--md-panel) 45%, transparent); } .soon { font-family: var(--md-mono); font-size: 9.5px; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; color: var(--md-accent); background: var(--md-accent-soft); border: 1px solid color-mix(in srgb, var(--md-accent) 30%, transparent); border-radius: var(--md-radius-pill); padding: 1px 7px; line-height: 1.5; } .soon--inline { margin-right: 8px; vertical-align: 1px; } /* --------------------------------------------------------------- Mobile nav */ .mobile-menu { position: fixed; top: 0; right: 0; z-index: 99; width: min(78vw, 320px); height: 100dvh; display: flex; flex-direction: column; gap: 6px; padding: 86px 20px 24px; background: var(--md-panel); border-left: 1px solid var(--md-border); box-shadow: var(--md-shadow-panel-left); transform: translateX(100%); transition: transform .34s var(--ease); } .mobile-menu[hidden] { display: flex; } .mobile-menu.is-open { transform: translateX(0); } .mobile-menu a { color: var(--md-text); text-decoration: none; font-size: 16px; padding: 12px 10px; border-radius: var(--md-radius-sm); } .mobile-menu a:hover { background: var(--md-elev); } .mobile-menu .btn { margin-top: 4px; justify-content: center; } /* ===== shared section scaffolding ===== */ .section { position: relative; z-index: 1; max-width: var(--site-max); margin: 0 auto; padding: var(--sect-pad) clamp(18px, 4vw, 40px); } /* hairline top-rule that runs the content width — the recurring signature detail */ .section::before { content: ""; position: absolute; top: 0; left: clamp(18px, 4vw, 40px); right: clamp(18px, 4vw, 40px); height: 1px; background: var(--hair); } .section--canvas::before, .section--cli::before { background: linear-gradient(90deg, var(--md-accent), transparent 60%); opacity: .6; } .section__head { max-width: 760px; margin-bottom: clamp(40px, 6vw, 72px); } .section__head--left { margin-bottom: 0; } .section__head h2 { font-size: clamp(30px, 5vw, 56px); font-weight: 600; letter-spacing: -0.03em; line-height: 1.04; margin: 18px 0 0; text-wrap: balance; } .section__head h2 .muted { color: var(--md-text-dim); } .lede { font-size: clamp(15px, 1.6vw, 18px); color: var(--md-text-dim); margin: 20px 0 0; max-width: 62ch; line-height: 1.62; } .lede strong { color: var(--md-text); font-weight: 600; } .lede em { font-style: normal; font-weight: 600; color: var(--md-accent); } .eyebrow { display: inline-flex; align-items: center; gap: 9px; font-family: var(--md-mono); font-size: 12px; letter-spacing: 0.04em; text-transform: uppercase; color: var(--md-text-dim); } .eyebrow-dot { width: 7px; height: 7px; border-radius: 50%; background: var(--md-accent); box-shadow: 0 0 10px var(--md-accent-glow); } /* the section index — big, faint, monospace; the typographic signature */ .sect-no { font-family: var(--md-mono); font-size: 11px; font-weight: 700; letter-spacing: .04em; color: var(--md-accent); border: 1px solid color-mix(in srgb, var(--md-accent) 30%, transparent); background: var(--md-accent-soft); border-radius: var(--md-radius-sm); padding: 2px 7px; line-height: 1; } /* shared code styling */ code { font-family: var(--md-mono); } .feature code, .lede code, .flow code, .cli-list code, .bubble code, .topo code, .chat__foot code { font-size: .9em; color: var(--md-accent); background: var(--md-accent-soft); padding: 1px 5px; border-radius: 4px; } /* ===================================================================== HERO */ .hero { position: relative; z-index: 1; max-width: var(--site-max); margin: 0 auto; min-height: 100svh; padding: clamp(110px, 15vh, 168px) clamp(18px, 4vw, 40px) 56px; display: flex; flex-direction: column; justify-content: center; } /* hero hairline rule with monospace ticks — top frame of the document */ .hero__rule { display: flex; align-items: center; justify-content: space-between; gap: 16px; font-family: var(--md-mono); font-size: 10.5px; letter-spacing: .18em; color: var(--md-text-dim); text-transform: uppercase; opacity: .7; padding-bottom: 14px; margin-bottom: clamp(24px, 5vh, 56px); border-bottom: 1px solid var(--hair); } .hero__rule-meta { color: var(--md-accent); opacity: .9; } .hero__rule span:last-child { text-align: right; } .hero__grid { display: grid; grid-template-columns: 1.05fr 0.95fr; align-items: center; gap: 44px; } .hero__title { font-size: clamp(42px, 7.4vw, 92px); font-weight: 600; letter-spacing: -0.04em; line-height: 0.96; margin: 22px 0 0; } .hero__title .line { display: block; overflow: hidden; } .hero__title .w { display: inline-block; transform: translateY(110%); } .hero__title .grad { background: var(--grad-brand); -webkit-background-clip: text; background-clip: text; color: transparent; background-size: 200% 100%; animation: grad-pan 6s ease-in-out infinite; } @keyframes grad-pan { 0%,100% { background-position: 0% 50%; } 50% { background-position: 100% 50%; } } .hero__sub { font-size: clamp(15px, 1.7vw, 19px); color: var(--md-text-dim); margin: 28px 0 0; max-width: 52ch; line-height: 1.6; } .hero__sub em { font-style: normal; font-weight: 600; color: var(--md-text); } .hero__cta { display: flex; flex-wrap: wrap; gap: 12px; margin: 32px 0 0; } /* hero stat strip — numbers carry the message, monospace, hairline-divided */ .hero__stats { display: grid; grid-template-columns: repeat(4, 1fr); gap: 0; margin: 38px 0 0; border-top: 1px solid var(--hair); } .hero__stats .stat { padding: 16px 18px 0 0; position: relative; } .hero__stats .stat + .stat { padding-left: 18px; border-left: 1px solid var(--hair); } .stat dt { font-size: 11px; font-weight: 500; color: var(--md-text-dim); letter-spacing: .01em; text-transform: uppercase; margin: 0; } .stat dd { margin: 8px 0 0; font-family: var(--md-mono); font-weight: 700; font-size: clamp(26px, 3vw, 34px); line-height: 1; color: var(--md-text); display: flex; align-items: baseline; gap: 7px; } .stat:nth-child(1) dd { color: var(--md-accent); } .stat:nth-child(4) dd { color: var(--md-status-ok); } .stat__u { font-family: var(--md-mono); font-size: 9.5px; font-weight: 500; color: var(--md-text-dim); letter-spacing: .02em; } /* hero stage ---------------------------------------------------------------*/ .stage { position: relative; aspect-ratio: 520 / 460; width: 100%; } .stage__ropes { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; z-index: 1; } .rope { fill: none; stroke: var(--md-accent); stroke-width: 1.5; stroke-opacity: .5; stroke-linecap: round; } .stage .rope { stroke-dasharray: 520; stroke-dashoffset: 520; animation: rope-draw 1.6s var(--ease) forwards; } .stage #ropeB { animation-delay: .25s; } .stage #ropeC { animation-delay: .5s; } @keyframes rope-draw { to { stroke-dashoffset: 0; } } .pulse { fill: var(--md-accent); filter: drop-shadow(0 0 6px var(--md-accent-glow)); } .pulse--cyan { fill: var(--md-brand-cyan); filter: drop-shadow(0 0 6px rgba(44,198,218,.7)); } .node { position: absolute; z-index: 2; width: min(58%, 280px); background: var(--md-panel); border: 1px solid var(--md-border); border-radius: var(--md-radius); box-shadow: var(--md-shadow); overflow: hidden; opacity: 0; transform: translateY(14px); animation: node-in .7s var(--ease) forwards; will-change: transform; } .node:nth-of-type(2) { animation-delay: .15s; } .node:nth-of-type(3) { animation-delay: .3s; } .node:nth-of-type(4) { animation-delay: .45s; } @keyframes node-in { to { opacity: 1; transform: translateY(0); } } .node--note { width: min(42%, 190px); background: var(--md-note-bg); border-color: var(--md-note-border); } .node--mooty { width: min(54%, 240px); padding: 12px 14px; background: var(--md-panel-2); } .node__bar { display: flex; align-items: center; gap: 7px; padding: 8px 10px; background: var(--md-panel-2); border-bottom: 1px solid var(--md-border); } .node__bar--note { background: var(--md-note-bg-2); border-color: var(--md-note-border); } .node__glyph { font-family: var(--md-mono); font-size: 12px; color: var(--md-text-dim); } .node__bar--note .node__glyph { color: var(--md-note-text-dim); } .node__name { flex: 1 1 auto; font-size: 12px; font-weight: 600; letter-spacing: .2px; } .node__bar--note .node__name { color: var(--md-note-text); } .node__x { color: var(--md-text-dim); font-size: 14px; } .node__body { margin: 0; padding: 10px; font: 11.5px/1.6 var(--md-mono); color: var(--md-text); white-space: pre-wrap; } .node__body .g { color: var(--md-status-ok); } .node__body .d { color: var(--md-text-dim); } .node__body .a { color: var(--md-accent); } .node__body--note { color: var(--md-note-text); } .node--mooty .mooty-tag { display: block; } .node--mooty p { margin: 6px 0 0; font-size: 13px; color: var(--md-text); } .node--mooty code { font-family: var(--md-mono); font-size: .92em; color: var(--md-accent); } .mooty-tag { font: 600 10.5px var(--md-mono); letter-spacing: .1em; text-transform: uppercase; color: var(--md-accent); } .dot { width: 9px; height: 9px; border-radius: 50%; flex: 0 0 auto; display: inline-block; } .dot--ok { background: var(--md-status-ok); box-shadow: 0 0 6px var(--md-status-ok-glow); } .dot--recruited { background: var(--md-accent); box-shadow: 0 0 6px var(--md-accent-glow); } .dot--working { background: var(--md-status-working); box-shadow: 0 0 7px rgba(74,163,255,.6); animation: dot-pulse 1.6s ease-in-out infinite; } .dot--awaiting { background: var(--md-status-awaiting); box-shadow: 0 0 8px rgba(255,204,51,.75); animation: dot-pulse 1s ease-in-out infinite; } @keyframes dot-pulse { 0%,100% { opacity: 1; } 50% { opacity: .4; } } .caret { display: inline-block; width: 6px; height: 13px; background: var(--md-accent); vertical-align: -2px; margin-left: 1px; animation: blink 1.05s step-end infinite; } @keyframes blink { 0%,80%,100% { opacity: 0; } 40% { opacity: 1; } } /* ============================================================= concept band */ /* a slow monospace marquee — the "ticker" of node types */ .band { position: relative; z-index: 1; margin: clamp(8px, 2vw, 24px) 0; border-top: 1px solid var(--hair); border-bottom: 1px solid var(--hair); overflow: hidden; padding: 14px 0; -webkit-mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent); mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent); } .band__track { display: flex; width: max-content; animation: marquee 34s linear infinite; } @keyframes marquee { to { transform: translateX(-50%); } } .band__set { display: flex; align-items: center; gap: 22px; padding-right: 22px; } .band__chip { display: inline-flex; align-items: center; gap: 9px; font-family: var(--md-mono); font-size: 14px; letter-spacing: .01em; color: var(--md-text); white-space: nowrap; } .band__sep { color: var(--md-accent); opacity: .5; font-family: var(--md-mono); } /* ================================================================ canvas demo */ .canvas-demo { position: relative; height: clamp(320px, 42vw, 460px); border: 1px solid var(--md-border); border-radius: var(--md-radius); background: var(--md-bg); overflow: hidden; box-shadow: var(--md-shadow); } .canvas-demo__grid { position: absolute; inset: 0; background: radial-gradient(circle at 1px 1px, var(--md-bg-grid) 1.3px, transparent 1.6px) 0 0 / 26px 26px; animation: grid-drift 26s linear infinite; } .cd-ropes { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; } .canvas-demo .rope { stroke-dasharray: 600; stroke-dashoffset: 600; } .canvas-demo.is-in .rope { animation: rope-draw 1.4s var(--ease) forwards; } .canvas-demo.is-in .rope:nth-child(2) { animation-delay: .2s; } .canvas-demo.is-in .rope:nth-child(3) { animation-delay: .4s; } .cd-node, .cd-note { position: absolute; z-index: 2; display: inline-flex; align-items: center; gap: 8px; padding: 9px 13px; border-radius: var(--md-radius-sm); background: var(--md-panel); border: 1px solid var(--md-border); box-shadow: var(--md-shadow); font-size: 13px; font-weight: 600; transform: translate(-50%, -50%); } .cd-node--a { left: 26%; top: 33%; } .cd-node--b { left: 70%; top: 36%; } .cd-node--c { left: 45%; top: 83%; } .cd-note { left: 67%; top: 83%; background: var(--md-note-bg); border-color: var(--md-note-border); color: var(--md-note-text); font-family: var(--md-mono); font-weight: 500; font-size: 12px; } .cd-minimap { position: absolute; right: 14px; bottom: 14px; width: 116px; height: 76px; z-index: 3; background: var(--md-glass); border: 1px solid var(--md-border); border-radius: var(--md-radius-sm); box-shadow: var(--md-shadow); backdrop-filter: blur(10px); } .cd-minimap span { position: absolute; width: 16px; height: 11px; border-radius: 2px; background: var(--md-elev); border: 1px solid var(--md-border); } .cd-minimap span.note { background: var(--md-note-bg-2); border-color: var(--md-note-border); } .cd-minimap .view { width: 46px; height: 30px; left: 30%; top: 26%; background: var(--md-accent-soft); border-color: var(--md-accent); } .cd-tag { position: absolute; left: 14px; top: 14px; z-index: 3; font-family: var(--md-mono); font-size: 10px; letter-spacing: .08em; text-transform: uppercase; color: var(--md-text-dim); border: 1px solid var(--md-border); border-radius: var(--md-radius-pill); padding: 3px 9px; background: var(--md-glass); backdrop-filter: blur(8px); } /* ================================================================== topology */ .topo { display: grid; grid-template-columns: 0.85fr 1.15fr; gap: clamp(28px, 4vw, 56px); align-items: center; } .topo__viz { position: relative; border: 1px solid var(--md-border); border-radius: var(--md-radius); background: radial-gradient(circle at 1px 1px, var(--md-bg-grid) 1.2px, transparent 1.5px) 0 0 / 24px 24px, var(--md-panel); box-shadow: var(--md-shadow); padding: 18px; aspect-ratio: 360 / 280; } .topo__svg { width: 100%; height: 100%; overflow: visible; } .topo__rope { stroke-width: 1.6; stroke-opacity: .6; } .topo__pkt circle { fill: var(--md-accent); filter: drop-shadow(0 0 5px var(--md-accent-glow)); } .topo__node circle { fill: var(--md-panel-2); stroke: var(--md-border); stroke-width: 1.5; } .topo__node text { fill: var(--md-text); font: 700 16px var(--md-mono); text-anchor: middle; dominant-baseline: middle; } .topo__node--a circle { stroke: var(--md-accent); fill: var(--md-accent-soft); } .topo__node--a text { fill: var(--md-accent); } .topo__node--b circle { stroke: var(--md-status-ok); } .topo__node--unreachable circle { stroke: var(--md-border); stroke-dasharray: 4 4; opacity: .8; } .topo__node--unreachable text { fill: var(--md-text-dim); } .topo__x { fill: var(--md-text-dim); font: 600 11px var(--md-mono); text-anchor: middle; letter-spacing: .04em; text-transform: uppercase; } .topo__cli { margin: 0; padding: 16px 18px; border-radius: var(--md-radius); background: var(--md-bg); border: 1px solid var(--md-border); font: 12.5px/1.7 var(--md-mono); white-space: pre-wrap; color: var(--md-text); } .topo__cli .g { color: var(--md-status-ok); } .topo__cli .a { color: var(--md-accent); } .topo__cli .c { color: var(--md-brand-cyan); } .topo__cli .d { color: var(--md-text-dim); } .topo__cli .y { color: var(--md-brand-amber); } .topo__cli .r { color: var(--status-red); } .topo__pts { list-style: none; margin: 22px 0 0; padding: 0; display: flex; flex-direction: column; gap: 14px; } .topo__pts li { font-size: 14.5px; color: var(--md-text-dim); line-height: 1.55; padding-top: 14px; border-top: 1px solid var(--hair); } .topo__pts li:first-child { border-top: none; padding-top: 0; } .topo__k { display: inline-block; margin-right: 10px; font-family: var(--md-mono); font-size: 11px; font-weight: 700; letter-spacing: .04em; color: var(--md-accent); text-transform: uppercase; } /* ================================================================== features */ .features { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; } .feature { position: relative; padding: 26px; border-radius: var(--md-radius); background: color-mix(in srgb, var(--md-panel) 80%, transparent); border: 1px solid var(--md-border); overflow: hidden; transition: transform .3s var(--ease), border-color .3s, background .3s; transform-style: preserve-3d; } .feature--wide { grid-column: span 2; } .feature::before { content: ""; position: absolute; inset: 0; border-radius: inherit; padding: 1px; background: var(--grad-brand); -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite: xor; mask-composite: exclude; opacity: 0; transition: opacity .3s; } .feature:hover { transform: translateY(-4px); background: color-mix(in srgb, var(--md-panel) 95%, transparent); } .feature:hover::before { opacity: .5; } .feature__ic { width: 44px; height: 44px; display: grid; place-items: center; border-radius: 11px; background: var(--md-accent-soft); margin-bottom: 18px; } .feature__ic svg { width: 22px; height: 22px; fill: none; stroke: var(--md-accent); stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; } .feature__ic--cyan { background: color-mix(in srgb, var(--md-brand-cyan) 16%, transparent); } .feature__ic--cyan svg { stroke: var(--md-brand-cyan); } .feature__ic--amber { background: color-mix(in srgb, var(--md-brand-amber) 16%, transparent); } .feature__ic--amber svg { stroke: var(--md-brand-amber); } .feature h3 { font-size: 18px; font-weight: 600; letter-spacing: -0.01em; margin: 0 0 8px; } .feature h3 code { font-size: .92em; } .feature p { font-size: 14px; color: var(--md-text-dim); margin: 0; line-height: 1.6; } .feature p em { font-style: normal; font-weight: 600; color: var(--md-text); } .feature p strong { font-weight: 600; color: var(--md-brand-amber); } .feature--wide p { font-size: 15px; max-width: 56ch; } /* ====================================================================== flow */ .flow { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; counter-reset: f; } .flow__step { position: relative; padding: 28px 24px; border-radius: var(--md-radius); border: 1px solid var(--md-border); background: color-mix(in srgb, var(--md-panel) 70%, transparent); } .flow__num { font-family: var(--md-mono); font-size: 13px; font-weight: 700; color: var(--md-accent); letter-spacing: .1em; } .flow__step h3 { font-size: 19px; font-weight: 600; margin: 14px 0 8px; letter-spacing: -0.01em; } .flow__step p { font-size: 14.5px; color: var(--md-text-dim); margin: 0; line-height: 1.6; } /* ======================================================================= CLI */ .cli-wrap { display: grid; grid-template-columns: 0.9fr 1.1fr; gap: clamp(32px, 5vw, 64px); align-items: center; } .cli-list { list-style: none; margin: 26px 0 0; padding: 0; display: flex; flex-direction: column; gap: 0; } .cli-list li { font-size: 15px; color: var(--md-text); padding: 11px 0 11px 18px; position: relative; border-top: 1px solid var(--hair); display: flex; align-items: baseline; gap: 10px; } .cli-list li:first-child { border-top: none; } .cli-list li::before { content: ""; position: absolute; left: 0; top: 18px; width: 7px; height: 7px; border-radius: 50%; background: var(--md-accent); box-shadow: 0 0 8px var(--md-accent-glow); } .cli-list code { font-size: 14px; flex: 0 0 auto; } .cli-list__d { color: var(--md-text-dim); font-size: 14px; } .terminal { border: 1px solid var(--md-border); border-radius: var(--md-radius); overflow: hidden; background: var(--md-panel); box-shadow: var(--md-shadow); } .terminal__bar { display: flex; align-items: center; gap: 8px; padding: 11px 14px; background: var(--md-panel-2); border-bottom: 1px solid var(--md-border); } .terminal__title { font-size: 12.5px; font-weight: 600; color: var(--md-text); } .terminal__tag { margin-left: auto; font-family: var(--md-mono); font-size: 9.5px; letter-spacing: .08em; text-transform: uppercase; color: var(--md-text-dim); border: 1px solid var(--md-border); border-radius: var(--md-radius-pill); padding: 2px 8px; } .terminal__body { margin: 0; padding: 18px; min-height: 300px; font: 13px/1.7 var(--md-mono); color: var(--md-text); white-space: pre-wrap; } .terminal__body .g { color: var(--md-status-ok); } .terminal__body .d { color: var(--md-text-dim); } .terminal__body .a { color: var(--md-accent); } .terminal__body .c { color: var(--md-brand-cyan); } .terminal__body .y { color: var(--md-brand-amber); } /* ===================================================================== mooty */ .section--mooty .section__head { margin-left: auto; margin-right: auto; text-align: center; } .section--mooty .section__head .eyebrow { justify-content: center; } .section--mooty .lede { margin-left: auto; margin-right: auto; } .chat { max-width: 580px; margin: 0 auto; display: flex; flex-direction: column; gap: 16px; } .chat__msg { display: flex; flex-direction: column; gap: 9px; } .chat__msg--user { align-items: flex-end; } .chat__msg--mooty { align-items: flex-start; } .bubble { max-width: 88%; padding: 13px 16px; border-radius: 14px; font-size: 15px; line-height: 1.5; } .chat__msg--user .bubble { background: var(--md-accent); color: #fff; border-bottom-right-radius: 5px; } .bubble--mooty { background: var(--md-elev); border: 1px solid var(--md-border); border-bottom-left-radius: 5px; } .chips { display: flex; flex-wrap: wrap; gap: 6px; } .chip { display: inline-flex; align-items: center; gap: 5px; font-family: var(--md-mono); font-size: 11px; color: var(--md-text-dim); border: 1px solid var(--md-border); background: var(--md-panel-2); border-radius: var(--md-radius-pill); padding: 3px 9px; } .chip__ic { width: 12px; height: 12px; fill: none; stroke: var(--md-accent); stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; } .chat__foot { text-align: center; font-family: var(--md-mono); font-size: 11.5px; color: var(--md-text-dim); margin: 8px 0 0; letter-spacing: .01em; } /* ======================================================================= CTA */ .cta { position: relative; z-index: 1; text-align: center; padding: clamp(90px, 13vw, 170px) clamp(18px, 4vw, 40px); max-width: 760px; margin: 0 auto; } .cta__mark { position: relative; width: 120px; height: 120px; margin: 0 auto 30px; } .cta__mark img { position: relative; z-index: 2; animation: float 5s ease-in-out infinite; filter: drop-shadow(0 0 24px rgba(255,45,120,.45)); border-radius: 28px; } .cta__halo { position: absolute; inset: -30%; border-radius: 50%; background: radial-gradient(circle, var(--md-accent) 0%, transparent 62%); opacity: .3; filter: blur(28px); animation: halo 5s ease-in-out infinite; } @keyframes float { 0%,100% { transform: translateY(0); } 50% { transform: translateY(-12px); } } @keyframes halo { 0%,100% { opacity: .22; transform: scale(1); } 50% { opacity: .4; transform: scale(1.12); } } .cta h2 { font-size: clamp(34px, 6.4vw, 68px); font-weight: 600; letter-spacing: -0.035em; line-height: 1.0; margin: 0; text-wrap: balance; } .cta p { font-size: clamp(15px, 1.8vw, 19px); color: var(--md-text-dim); margin: 18px auto 0; max-width: 46ch; } /* Cross-platform download cards (coming soon — non-clickable, honest) */ .downloads { display: flex; flex-wrap: wrap; gap: 12px; justify-content: center; margin: 34px auto 0; } .dl { display: inline-flex; align-items: center; gap: 12px; text-align: left; padding: 13px 18px; border-radius: var(--md-radius); background: color-mix(in srgb, var(--md-panel) 70%, transparent); border: 1px solid var(--md-border); cursor: default; transition: border-color .25s var(--ease), transform .25s var(--ease); } .dl:hover { border-color: color-mix(in srgb, var(--md-accent) 40%, var(--md-border)); transform: translateY(-2px); } .dl__ic { width: 26px; height: 26px; flex: 0 0 auto; fill: var(--md-text); } .dl:nth-child(2) .dl__ic { fill: var(--md-brand-cyan); } .dl:nth-child(3) .dl__ic { fill: var(--md-brand-amber); } .dl__t { display: flex; flex-direction: column; line-height: 1.25; } .dl__os { font-size: 14.5px; font-weight: 600; color: var(--md-text); } .dl__sub { font-family: var(--md-mono); font-size: 11px; color: var(--md-text-dim); } .cta__note { display: inline-flex; align-items: center; flex-wrap: wrap; justify-content: center; font-size: 13.5px !important; color: var(--md-text-dim); margin-top: 18px !important; } /* ==================================================================== footer */ .footer { position: relative; z-index: 1; max-width: var(--site-max); margin: 0 auto; display: flex; align-items: center; gap: 20px; flex-wrap: wrap; padding: 40px clamp(18px, 4vw, 40px); border-top: 1px solid var(--md-border); } .footer__brand { display: flex; align-items: center; gap: 9px; font-weight: 600; } .footer__note { flex: 1 1 240px; font-size: 13px; color: var(--md-text-dim); margin: 0; } .footer__links { display: flex; align-items: center; gap: 18px; } .footer__links a { color: var(--md-text-dim); text-decoration: none; font-size: 13.5px; } .footer__links a:hover { color: var(--md-text); } /* ============================================================= reveal system */ .reveal { opacity: 0; transform: translateY(26px); transition: opacity .7s var(--ease), transform .7s var(--ease); } .reveal.is-in { opacity: 1; transform: none; } /* ================================================================ responsive */ @media (max-width: 940px) { .hero__grid { grid-template-columns: 1fr; min-height: auto; gap: 48px; } .hero { min-height: auto; padding-top: 116px; } .stage { max-width: 460px; margin: 0 auto; width: 100%; } .cli-wrap { grid-template-columns: 1fr; } .topo { grid-template-columns: 1fr; } .topo__viz { max-width: 420px; } .features { grid-template-columns: repeat(2, 1fr); } .feature--wide { grid-column: span 2; } .flow { grid-template-columns: 1fr; } .hero__stats { grid-template-columns: repeat(2, 1fr); } .hero__stats .stat:nth-child(3) { border-left: none; } .hero__stats .stat:nth-child(odd) { padding-left: 0; } .hero__stats .stat:nth-child(n+3) { border-top: 1px solid var(--hair); margin-top: 16px; padding-top: 4px; } } @media (max-width: 720px) { .nav__links, .nav__actions { display: none; } .nav__burger { display: inline-flex; flex-direction: column; gap: 5px; justify-content: center; align-items: center; width: 40px; height: 40px; margin-left: auto; border: 1px solid var(--md-border); border-radius: var(--md-radius-sm); background: var(--md-panel); cursor: pointer; } .nav__burger span { width: 18px; height: 1.7px; background: var(--md-text); border-radius: 2px; transition: transform .3s var(--ease), opacity .2s; } .nav__burger[aria-expanded="true"] span:first-child { transform: translateY(3.4px) rotate(45deg); } .nav__burger[aria-expanded="true"] span:last-child { transform: translateY(-3.4px) rotate(-45deg); } .features { grid-template-columns: 1fr; } .feature--wide { grid-column: span 1; } .hero__stats { grid-template-columns: 1fr 1fr; } .hero__rule span:nth-child(2) { display: none; } .terminal__body { min-height: 240px; } } @media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: .001ms !important; animation-iteration-count: 1 !important; } .reveal { opacity: 1; transform: none; } .hero__title .w { transform: none; } .stage .rope, .canvas-demo .rope { stroke-dashoffset: 0; } .band__track { animation: none; } .bg-scan { display: none; } }