/* ============================================================================ Mootdeck — marketing site Built on the design-system tokens (../styles.css). The art direction extends the product's own language: near-black canvas, dot grid, magenta accent, cyan+amber brand glow, nodes wired by ropes, pulsing status dots. ============================================================================ */ :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(72px, 11vw, 160px); } /* 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; } /* --------------------------------------------------------------------- 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: 16px; 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: 4px; margin-left: 12px; flex: 1 1 auto; } .nav__links a { 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__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); } /* --------------------------------------------------------------- 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); } .section__head { max-width: 720px; margin-bottom: clamp(40px, 6vw, 72px); } .section__head--left { margin-bottom: 0; } .section__head h2 { font-size: clamp(28px, 4.6vw, 52px); font-weight: 600; letter-spacing: -0.025em; line-height: 1.05; margin: 16px 0 0; text-wrap: balance; } .lede { font-size: clamp(15px, 1.6vw, 18px); color: var(--md-text-dim); margin: 18px 0 0; max-width: 60ch; } .eyebrow { display: inline-flex; align-items: center; gap: 8px; 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); } /* ===================================================================== HERO */ .hero { position: relative; z-index: 1; max-width: var(--site-max); margin: 0 auto; min-height: 100svh; padding: clamp(120px, 16vh, 180px) clamp(18px, 4vw, 40px) 60px; display: grid; grid-template-columns: 1.05fr 0.95fr; align-items: center; gap: 40px; } .hero__title { font-size: clamp(40px, 7.2vw, 88px); font-weight: 600; letter-spacing: -0.035em; line-height: 0.98; 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: 26px 0 0; max-width: 52ch; } .hero__cta { display: flex; flex-wrap: wrap; gap: 12px; margin: 32px 0 0; } .hero__meta { font-family: var(--md-mono); font-size: 12.5px; color: var(--md-text-dim); margin: 22px 0 0; opacity: .8; } /* 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); } .mooty-tag { font: 600 10.5px var(--md-font); letter-spacing: .04em; 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 */ .band { position: relative; z-index: 1; max-width: var(--site-max); margin: 0 auto; display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 4px; padding: 8px clamp(18px, 4vw, 40px) 8px; } .band__chip { display: inline-flex; align-items: center; gap: 8px; padding: 9px 16px; border: 1px solid var(--md-border); border-radius: var(--md-radius-pill); background: color-mix(in srgb, var(--md-panel) 70%, transparent); backdrop-filter: blur(6px); font-size: 13.5px; color: var(--md-text); } .band__rope { width: clamp(16px, 4vw, 48px); height: 1px; background: linear-gradient(90deg, transparent, var(--md-accent), transparent); opacity: .6; } /* ================================================================ 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); } /* ================================================================== 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::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 p { font-size: 14px; color: var(--md-text-dim); margin: 0; line-height: 1.6; } .feature code, .lede code, .flow code, .cli-list code, .bubble code { font-family: var(--md-mono); font-size: .9em; color: var(--md-accent); background: var(--md-accent-soft); padding: 1px 5px; border-radius: 4px; } /* ====================================================================== 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; 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 */ .section--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: 10px; } .cli-list li { font-size: 15px; color: var(--md-text-dim); padding-left: 18px; position: relative; } .cli-list li::before { content: ""; position: absolute; left: 0; top: 9px; width: 7px; height: 7px; border-radius: 50%; background: var(--md-accent); box-shadow: 0 0 8px var(--md-accent-glow); } .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__body { margin: 0; padding: 18px; min-height: 280px; 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; } .chat { max-width: 560px; 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: 86%; 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 { font-family: var(--md-mono); font-size: 11.5px; 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; } /* ======================================================================= 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(32px, 6vw, 64px); font-weight: 600; letter-spacing: -0.03em; line-height: 1.02; 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; } .cta__btns { display: flex; flex-wrap: wrap; gap: 12px; justify-content: center; margin-top: 34px; } /* ==================================================================== 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; 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-template-columns: 1fr; min-height: auto; padding-top: 120px; gap: 48px; } .stage { max-width: 460px; margin: 0 auto; width: 100%; } .cli-wrap { grid-template-columns: 1fr; } .features { grid-template-columns: repeat(2, 1fr); } .flow { grid-template-columns: 1fr; } } @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; } .band { gap: 8px; } .band__rope { display: none; } .terminal__body { min-height: 220px; } } @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; } }