.landing-v4-root { font-family: var(--landing-v4-font-sans), system-ui, -apple-system, sans-serif; -webkit-font-smoothing: antialiased; /* canvas.css:79/82 — light-pill text tokens + accent-pink, referenced * by #padd.on (Task 3/4) and by the Task 7 node-graph pills below. * Not present anywhere in the app's global tailwind.css tokens. */ --m-on-light: #171717; --m-on-light-2: #3d3d3d; --m-pink: #E7CDDD; /* canvas.css:85 — the hero headline's own responsive clamp, distinct * from the shared --text-hero token (36px fixed) already provided by * the app's global tailwind.css tokens. Missing this left .hh/.gfhead * resolving font-size to the browser default (16px) instead of * scaling with viewport width — caught in Task 15 full-page QA. */ --landing-hero: clamp(30px, 4.6vw, 64px); /* canvas.css line-height scale. Nothing defined these, so * every line-height: var(--lh-*) in the ported rules fell back to the * app's 1.5: bento headings ran at 30px instead of 22, and each * card grew ~13px. */ --lh-tight: 1.1; --lh-lead: 1.45; --lh-body: 1.5; /* The canvas's card radius and the one nested inside it, named so * the blog, which is layered on these rules and draws the same * cards, can use them without restating the numbers. */ --landing-r-card: 21px; --landing-r-inset: 13px; } /* canvas.css:@media (max-width:1180px) and (max-width:620px) — the * type ramp steps down on tablet and phone. Without these the shared * tokens keep their desktop sizes all the way to 390px, which is what * made every heading read as cramped: the studio lede alone came out * 10 lines / 414px against the canvas's 7 / 242. */ @media (max-width: 1180px) { .landing-v4-root { --landing-hero: clamp(34px, 6.4vw, 64px); } } @media (max-width: 620px) { .landing-v4-root { --text-hero: 30px; --text-title: 22px; --text-display: 26px; --landing-hero: clamp(34px, 10vw, 44px); } } /* Ported verbatim from source canvas.css (Geist Pixel Square @font-face block) — small pixel-numeral display face used for hero numerals/prices, embedded as base64 for offline use. */ @font-face { /* type-allow: @font-face descriptor for the embedded font resource's * own weight, not a text style — there is nothing to tokenize. */ font-family: 'Geist Pixel Square'; src: url("data:font/woff2;base64,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") format('woff2'); font-weight: 400; /* type-allow: font-face descriptor weight, not text style */ font-display: swap; } /* Ported verbatim from source canvas.css — header/nav (.hdr, .hdrin, .hlogo, .nav, .navpill, .navlink, .navext, .mbtn, .mbi, .btn) plus the <=1180px mobile-drawer rules. Each selector prefixed with .landing-v4-root. */ .landing-v4-root a { color: var(--m-accent); text-decoration: none; } .landing-v4-root a:where(:not(.btn)):hover { color: var(--m-accent-hover); } .landing-v4-root .btn { appearance: none; font-family: inherit; box-sizing: border-box; height: 34px; padding: 0 21px; display: inline-flex; align-items: center; justify-content: center; gap: 8px; border: 1px solid transparent; border-radius: 8px; font-size: var(--text-body); line-height: 1; font-weight: var(--font-weight-medium); letter-spacing: 0; white-space: nowrap; cursor: pointer; transition: background-color .18s, border-color .18s, color .18s; } .landing-v4-root .btn svg { width: 14px; height: 14px; flex: 0 0 auto; } .landing-v4-root .btn-primary { background: var(--m-accent); color: var(--m-accent-ink); font-weight: var(--font-weight-medium); } .landing-v4-root .btn-primary:hover, .landing-v4-root .btn-primary:active { color: var(--m-accent-ink); } .landing-v4-root .btn-primary:hover { background: var(--m-mark); } .landing-v4-root .btn-primary:active { background: var(--m-mark); } .landing-v4-root .btn-primary.neutral { background: linear-gradient(145deg, #E8F0F0, #F6F4F1, #E7CDDD); color: var(--m-bg); } .landing-v4-root .btn-primary.neutral { transition: filter .18s, background .18s; } .landing-v4-root .btn-primary.neutral:hover { filter: brightness(.92) saturate(.92); } .landing-v4-root .btn-secondary { background: var(--m-raise); color: var(--m-text); } .landing-v4-root .btn-secondary:hover { background: var(--m-surface-hover); } /* canvas.css:86-100 — .top wraps the ENTIRE page (not just the * header — see the comment near this element's closing tag below * for why that nesting is load-bearing), painting the hero's dark * gradient + film-grain background behind it via absolutely * positioned pseudo-elements sized to the --hero-bg custom * property (mirrored onto this element by useLandingV4HeroBgVar * below, matching canvas.js:401). Falls back to 100svh before the * effect runs. */ .landing-v4-root .top { position: relative; z-index: 1; width: 100%; max-width: 1280px; margin: 0 auto; } /* canvas.css:@media (max-width:1390px) — below the point where the * 1280 max-width stops centring, .top carries the side gutter itself. * Without this the header sits flush against the screen edge on every * tablet and phone (sections keep their own .wrap padding, the header * has none of its own). The hero opts out: it pads from the inside. */ @media (max-width: 1390px) { .landing-v4-root .top { box-sizing: border-box; padding-left: clamp(21px, 3.8vw, 55px); padding-right: clamp(21px, 3.8vw, 55px); } } .landing-v4-root .top::before { content: ""; position: absolute; top: 0; left: calc(50% - 50vw); width: 100vw; height: var(--hero-bg, 100svh); z-index: -2; pointer-events: none; background: linear-gradient(to bottom, #0f0f0f 0%, #0f0f0f 38%, #161616 100%); } .landing-v4-root .top::after { content: ""; position: absolute; top: 0; left: calc(50% - 50vw); width: 100vw; height: var(--hero-bg, 100svh); z-index: -1; pointer-events: none; opacity: .45; background-image: url("data:image/svg+xml;utf8,"); background-size: 300px 300px; } .landing-v4-root .hdr { --hdr-gap: 8px; position: sticky; top: calc(-1 * var(--hdr-gap)); z-index: 100; display: block; padding: var(--hdr-gap) 0; box-sizing: border-box; } .landing-v4-root .hdr::before { content: ""; position: absolute; inset: 0; left: calc(50% - 50vw); width: 100vw; background: #121212; opacity: 0; transition: opacity .55s cubic-bezier(.4,0,.2,1); pointer-events: none; } .landing-v4-root .hdr.stuck::before { opacity: 1; } .landing-v4-root .hlogo svg path { transition: fill .55s cubic-bezier(.4,0,.2,1); } .landing-v4-root .hdr.stuck .hlogo svg path { fill: var(--m-text); } /* MODUS_WORDMARK_PATH (shared with the v3 landing page) doesn't carry * the green M-mark's own fill — source (index.html:13) hardcodes * fill="#6EECA5" on that first path only, so replicate it via CSS * instead of touching the shared v3 constant. */ .landing-v4-root .hlogo svg path:first-child { fill: #6EECA5; } .landing-v4-root .hdrin { display: grid; grid-template-columns: auto 1fr auto; column-gap: 34px; position: relative; z-index: 1; margin: 0; padding: 0; min-height: 55px; align-items: center; } .landing-v4-root .hdr-actions { display: flex; align-items: center; gap: 8px; grid-column: 3; justify-self: end; } .landing-v4-root .navpill { gap: 8px; } .landing-v4-root .nav { display: flex; align-items: center; justify-content: center; flex-wrap: nowrap; min-width: 0; } .landing-v4-root .navlink { position: relative; z-index: 0; display: inline-flex; align-items: center; height: 26px; padding: 0 13px; border-radius: 8px; font-size: var(--text-body); line-height: 1.5; font-weight: var(--font-weight-normal); font-family: Geist; color: var(--m-text-3); white-space: nowrap; letter-spacing: 0; cursor: pointer; transition: color .18s; } .landing-v4-root a.navlink { text-decoration: none; } /* Between the drawer (<=1180px) and the header's full width, eight * links in the longer languages ran under the logo and the buttons: * Russian by 67px a side at 1181, Portuguese by 37. The nav is * centred, so every pixel saved here is half a pixel a side. The pill * tightens there instead of dropping a link. */ @media (min-width: 1181px) and (max-width: 1439px) { .landing-v4-root .hdrin { column-gap: 21px; } .landing-v4-root .navpill { gap: 2px; } .landing-v4-root .navlink { padding: 0 8px; } } .landing-v4-root .hlogo { display: block; justify-self: start; line-height: 0; color: inherit; } /* The fill used to be a direct background swap on hover — browsers * don't reliably interpolate between two gradients, so it read as an * instant snap rather than an animation. A ::before layer that fades * in via opacity animates smoothly everywhere; it sits behind the * link's own text/icon via the stacking context above. */ .landing-v4-root .navlink::before { content: ""; position: absolute; inset: 0; z-index: -1; border-radius: inherit; background: linear-gradient(145deg, #E8F0F0, #F6F4F1, #E7CDDD); opacity: 0; transition: opacity .32s cubic-bezier(.16,1,.3,1); } .landing-v4-root .navlink:hover, .landing-v4-root .navlink:hover svg path { color: #0f0f0f; fill: #0f0f0f; } .landing-v4-root .navlink:hover::before { opacity: 1; } .landing-v4-root .nav > .navlink svg { transform-origin: 14% 86%; transition: transform .34s cubic-bezier(.34,1.4,.4,1); } .landing-v4-root .nav > .navlink:hover svg { animation: landing-v4-navtick .62s cubic-bezier(.32,1.5,.36,1); } @keyframes landing-v4-navtick { 0% { transform: none; } 38% { transform: translate(-1.5px,-1.5px) scale(.93); } 72% { transform: translate(.4px,.4px) scale(1.02); } 100% { transform: none; } } @media (prefers-reduced-motion: reduce) { .landing-v4-root .navlink::before { transition: none; } .landing-v4-root .nav > .navlink:hover svg { animation: none; } } .landing-v4-root .mbtn { display: none; appearance: none; background: none; border: 0; padding: 0; width: 34px; height: 34px; border-radius: 8px; color: var(--m-text); cursor: pointer; align-items: center; justify-content: center; } .landing-v4-root .mbtn:hover { background: var(--m-hover); } .landing-v4-root .mbi { position: relative; display: block; width: 18px; height: 12px; } .landing-v4-root .mbi i { position: absolute; left: 0; width: 18px; height: 1.5px; border-radius: 1px; background: currentColor; transition: transform .42s cubic-bezier(.16,1,.3,1), top .42s cubic-bezier(.16,1,.3,1); } .landing-v4-root .mbi i:first-child { top: 0; } .landing-v4-root .mbi i:last-child { top: 10.5px; } .landing-v4-root .hdr.open .mbi i:first-child { top: 5.25px; transform: rotate(45deg); } .landing-v4-root .hdr.open .mbi i:last-child { top: 5.25px; transform: rotate(-45deg); } .landing-v4-root .hdr.open .nav > .navlink:hover, .landing-v4-root .hdr.open .nav > .navlink:hover svg path { color: var(--m-text-3); fill: var(--m-text-3); } .landing-v4-root .hdr.open::before { opacity: 1; } /* Drawer-only Sign-in link + footer (legal links, social icons) — hidden by default via inline style, shown only inside the open mobile drawer by the media-gated rules below. */ .landing-v4-root .navfoot .nfl { display: flex; flex-direction: column; gap: 13px; } .landing-v4-root .navfoot .nfl a { font-size: var(--text-body); color: var(--m-text-3); text-decoration: none; } .landing-v4-root .navfoot .nfl a:hover { color: var(--m-text); } .landing-v4-root .navfoot .nfs { display: flex; gap: 8px; margin-left: -8px; } .landing-v4-root .gfs { display: inline-flex; align-items: center; justify-content: center; width: 34px; height: 34px; text-decoration: none; } .landing-v4-root .gfi { display: block; background: var(--m-text-3); -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat; -webkit-mask-position: center; mask-position: center; -webkit-mask-size: contain; mask-size: contain; transition: background .18s; } .landing-v4-root .gfs:hover .gfi { background: var(--m-text); } @media (max-width: 620px) { .landing-v4-root .hdr .hsign { display: none; } } @media (min-width: 621px) { .landing-v4-root .hdr.open .nav .navsign { display: none !important; } } @media (max-width: 1180px) { .landing-v4-root .nav { display: none !important; } .landing-v4-root .mbtn { display: inline-flex; } .landing-v4-root .hdr.open .nav { display: flex !important; position: fixed; left: 0; right: 0; top: var(--hdr-h, 55px); bottom: 0; height: auto; overflow-y: auto; z-index: 20; flex-direction: column; align-items: stretch !important; gap: 0 !important; padding: 34px clamp(21px, 3.8vw, 55px) 55px; box-sizing: border-box; background: #121212; border-bottom: 0; justify-content: flex-start; } .landing-v4-root .hdr.open .nav > .navlink { height: auto; padding: 13px 0; border-radius: 0; border: 0; font-family: 'Geist Pixel Square', 'Geist Mono', ui-monospace, monospace; /* canvas.css:112/114 — the mobile drawer's own nav-link size is * set twice in source (first to var(--text-display), then * immediately overridden to a flat 34px by a second identical * selector later in the same file); the override wins the * cascade, so 34 is what source actually renders, not the * token. Marketing display type, off the role scale on * purpose, matching source's own literal override. */ font-size: 34px; /* type-allow: source's own literal override, see comment above */ line-height: 1.1; letter-spacing: -.01em; color: var(--m-text); background: none !important; } .landing-v4-root .hdr.open .nav > .navlink svg { display: none !important; } .landing-v4-root .hdr.open .nav .navsign { display: inline-flex !important; margin-top: 34px; align-self: flex-start; height: 34px; padding: 0 21px; border-radius: 8px; font-family: Geist, system-ui, sans-serif; font-size: var(--text-body); line-height: 1; letter-spacing: 0; font-weight: var(--font-weight-medium); background: linear-gradient(145deg, #E8F0F0, #F6F4F1, #E7CDDD) !important; color: var(--m-bg) !important; } .landing-v4-root .hdr.open .nav .navfoot { display: flex !important; flex-direction: column; gap: 21px; margin-top: auto; padding-top: 34px; border-top: 1px solid var(--m-border); } .landing-v4-root .hdrin { column-gap: 21px; } .landing-v4-root .hdr-actions { gap: 13px; } } /* The drawer carries its own Sign-in only where the header's button is * gone. Above 620 .hsign is still in the header, so showing it in the * drawer too put the same action on screen twice; the rule that shows * it sits inside the 1180 block above, so this has to come after it to * win at equal specificity. */ @media (min-width: 621px) { .landing-v4-root .hdr.open .nav .navsign { display: none !important; } } /* canvas.css:@media (max-width:620px) — the drawer tightens on a phone: * 30px links instead of 34, and a shorter panel padding. Without it the * seven links plus padding filled the panel exactly, so the footer's * margin-top: auto had no free space left to push with and the Sign-in * pill ended up sitting on the separator line. */ @media (max-width: 620px) { .landing-v4-root .hdr.open .nav > .navlink { font-size: 30px; } .landing-v4-root .hdr.open .nav { padding-top: 21px; padding-bottom: 34px; } /* Beats .hdr.open .nav > .navlink (equal specificity, declared later), * which would otherwise hand the pill height:auto — it has to match the * header's own button at 34px. */ .landing-v4-root .hdr.open .nav > .navlink.navsign { display: inline-flex !important; margin-top: 34px; align-self: flex-start; height: 34px; padding: 0 21px; border-radius: 8px; font-family: Geist, system-ui, sans-serif; font-size: var(--text-body); line-height: 1; } } /* Ported verbatim from source canvas.css — hero shell (.sh, .shmid, .hero, .hh, .hfix), the word-cycler (.cwrap, .csize, .chroma-word, .csr, .kn + chroma-* keyframes, prefixed landing-v4- like the header's keyframes above), the decorative composer (.hp, #pfield, #padd, .seg, .md, .mdi, .mdl, #pmic, #psend, .mnote), and the hand/heart graphic (.hfh, .thmr, .hrtg + handPop/thumbCycle/heartCycle keyframes). Each selector prefixed with .landing-v4-root. Responsive (max-width) tweaks for this section are deferred to a later polish task — only the reduced-motion companions the brief calls out are ported here. */ @property --landing-v4-chromatic-sweep { syntax: ""; inherits: false; initial-value: -14%; } @keyframes landing-v4-chroma-sweep { from { --landing-v4-chromatic-sweep: -14%; } to { --landing-v4-chromatic-sweep: 114%; } } @keyframes landing-v4-chroma-blur { from { filter: blur(3px); } to { filter: blur(0); } } @keyframes landing-v4-chroma-fade { from { opacity: .56; } to { opacity: 1; } } @keyframes landing-v4-chroma-rise { from { transform: translateY(5px); } to { transform: translateY(0); } } /* Not in source (canvas.js swaps the word instantly, no exit) — requested follow-up so the outgoing word animates away instead of cutting to blank; see use-hero-word-cycle.ts's EXIT_MS. */ @keyframes landing-v4-chroma-exit-fade { from { opacity: 1; } to { opacity: 0; } } @keyframes landing-v4-chroma-exit-blur { from { filter: blur(0); } to { filter: blur(3px); } } @keyframes landing-v4-chroma-exit-rise { from { transform: translateY(0); } to { transform: translateY(-5px); } } @keyframes landing-v4-handPop { from { transform: scale(0); } to { transform: scale(1); } } @keyframes landing-v4-thumbCycle { 0% { transform: rotate(-100deg); animation-timing-function: cubic-bezier(.2,.9,.25,1); } 4.5%, 95.5% { transform: rotate(0); animation-timing-function: cubic-bezier(.75,0,.8,.1); } 100% { transform: rotate(-100deg); } } @keyframes landing-v4-heartCycle { 0%, 1% { transform: translateY(26px) scale(0); opacity: 0; animation-timing-function: cubic-bezier(.24,1.3,.32,1); } 8%, 92% { transform: translateY(0) scale(1); opacity: 1; animation-timing-function: cubic-bezier(.68,0,.76,-.3); } 99%, 100% { transform: translateY(26px) scale(0); opacity: 0; } } @keyframes landing-v4-thumbPing { 0% { transform: rotate(0); animation-timing-function: cubic-bezier(.75,0,.8,.1); } 47% { transform: rotate(-100deg); animation-timing-function: cubic-bezier(.2,.9,.25,1); } 100% { transform: rotate(0); } } @keyframes landing-v4-heartPing { 0% { transform: translateY(0) scale(1); opacity: 1; animation-timing-function: cubic-bezier(.68,0,.76,-.3); } 32% { transform: translateY(26px) scale(0); opacity: 0; } 42% { transform: translateY(26px) scale(0); opacity: 0; animation-timing-function: cubic-bezier(.24,1.3,.32,1); } 100% { transform: translateY(0) scale(1); opacity: 1; } } .landing-v4-root .sh { position: relative; background: transparent; display: grid; grid-template-columns: minmax(0,1fr); grid-template-rows: 1fr auto; min-height: calc(100svh - var(--hdr-h, 71px)); box-sizing: border-box; } .landing-v4-root .sh > * { position: relative; z-index: 1; min-width: 0; } .landing-v4-root .shmid { display: grid; align-items: center; min-height: 0; min-width: 0; } .landing-v4-root .hero { position: relative; z-index: 1; max-width: 1280px; margin: 0 auto; box-sizing: border-box; width: 100%; padding: 34px clamp(21px,3.8vw,55px) 89px; text-align: center; } /* Both of these have to sit after the base rule above, not before it: * at equal specificity the later declaration wins, and while they were * higher up the base padding kept overriding them. The 1390 rule drops * the side gutter (.top already carries it there, so the composer was * being inset twice and came out 306px wide against the canvas's 348); * the 620 rule is the phone's own vertical rhythm. */ @media (max-width: 1390px) { .landing-v4-root .hero { padding-left: 0; padding-right: 0; } } @media (max-width: 620px) { .landing-v4-root .hero { padding-top: 21px; padding-bottom: 55px; } } .landing-v4-root .hh { margin: 0; font-family: 'Geist Pixel Square', 'Geist Mono', ui-monospace, monospace; font-size: var(--landing-hero); font-weight: var(--font-weight-normal); line-height: 1.04; letter-spacing: -.002em; color: var(--m-text); } .landing-v4-root .hfix { letter-spacing: -.002em; } .landing-v4-root .cwrap { position: relative; display: inline-grid; vertical-align: baseline; } .landing-v4-root .csize { grid-column: 1; grid-row: 1; visibility: hidden; white-space: nowrap; } .landing-v4-root .csize[data-w="company."], .landing-v4-root #cw[data-w="company."] { letter-spacing: -.034em; } .landing-v4-root .csize[data-w="revenue."], .landing-v4-root #cw[data-w="revenue."] { letter-spacing: .031em; } .landing-v4-root .csize[data-w="mainnet."], .landing-v4-root #cw[data-w="mainnet."] { letter-spacing: .01em; } .landing-v4-root #cw .kn, .landing-v4-root .csize .kn { letter-spacing: .004em; } .landing-v4-root .csr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; } .landing-v4-root .chroma-word { position: absolute; inset-inline-start: 0; top: 0; white-space: nowrap; contain: paint; --landing-v4-chromatic-sweep: -14%; background-image: linear-gradient(90deg, #f5f4f1 0%, #f5f4f1 calc(var(--landing-v4-chromatic-sweep) - 14%), #3d9bf5 calc(var(--landing-v4-chromatic-sweep) - 14%), #e574d4 calc(var(--landing-v4-chromatic-sweep) - 7%), #efd02a var(--landing-v4-chromatic-sweep), #6f7ef0 calc(var(--landing-v4-chromatic-sweep) + 7%), #28d67c calc(var(--landing-v4-chromatic-sweep) + 14%), transparent calc(var(--landing-v4-chromatic-sweep) + 14%), transparent 100%); background-size: 100% 100%; background-repeat: no-repeat; -webkit-background-clip: text; background-clip: text; color: transparent; animation: landing-v4-chroma-sweep 1.2s cubic-bezier(.77,0,.175,1) forwards, landing-v4-chroma-fade .28s cubic-bezier(.16,1,.3,1) forwards, landing-v4-chroma-blur .36s cubic-bezier(.16,1,.3,1) forwards, landing-v4-chroma-rise .36s cubic-bezier(.16,1,.3,1) forwards; } .landing-v4-root .chroma-word.is-exiting { animation: landing-v4-chroma-exit-fade .22s cubic-bezier(.16,1,.3,1) forwards, landing-v4-chroma-exit-blur .22s cubic-bezier(.16,1,.3,1) forwards, landing-v4-chroma-exit-rise .22s cubic-bezier(.16,1,.3,1) forwards; } @media (prefers-reduced-motion: reduce) { .landing-v4-root .chroma-word { animation: none; background-position-x: 0%; } } .landing-v4-root .hp { margin: 34px auto 0; width: min(610px,100%); text-align: left; } .landing-v4-root #pfield.ghost { white-space: pre-wrap !important; line-height: 21px !important; padding-top: 0 !important; min-height: 42px; } .landing-v4-root #pfield:focus, .landing-v4-root #pfield.user { height: auto !important; min-height: 42px; line-height: 21px !important; max-height: 144px !important; overflow-y: auto !important; scrollbar-width: none; } .landing-v4-root #pfield.ghost { transition: opacity .28s; color: var(--m-text-4) !important; caret-color: transparent; } .landing-v4-root #pfield.ghost.out { opacity: 0; } .landing-v4-root #pfield.ghost .cur { display: none; } .landing-v4-root #pfield.clamped { height: 34px; min-height: 34px; max-height: 34px; overflow-y: auto; scrollbar-width: none; } .landing-v4-root #pfield.clamped::-webkit-scrollbar { display: none; } .landing-v4-root #pfield:focus { outline: none; } .landing-v4-root .md { appearance: none; background: none; border: 0; padding: 0; display: inline-flex; align-items: center; gap: 8px; cursor: pointer; font-family: inherit; font-size: var(--text-body); line-height: var(--lh-body); font-weight: var(--font-weight-normal); color: var(--m-text-4); transition: color .18s; } .landing-v4-root .md:hover { color: var(--m-text-3); } .landing-v4-root .md.on { color: var(--m-text); } .landing-v4-root .mdi { display: inline-flex; align-items: center; color: currentColor; } .landing-v4-root .mdi svg { display: block; width: 13px; height: 13px; } .landing-v4-root .mdi svg path { fill: currentColor; } .landing-v4-root #padd { appearance: none; border: 0; padding: 0; margin-left: 0; width: 26px; height: 26px; flex-shrink: 0; display: inline-flex; align-items: center; justify-content: center; border-radius: 89px; background: transparent; color: var(--m-text-3); cursor: pointer; transition: background .34s cubic-bezier(.34,1.2,.34,1), color .34s cubic-bezier(.34,1.2,.34,1); } .landing-v4-root #padd svg { display: block; transform: rotate(0deg); transition: transform .42s cubic-bezier(.34,1.3,.4,1); will-change: transform; } .landing-v4-root #padd:hover { color: var(--m-text); } .landing-v4-root #padd.on { background: linear-gradient(145deg, #E8F0F0, #F6F4F1, var(--m-pink)); color: var(--m-on-light); } .landing-v4-root #padd.on svg { transform: rotate(135deg); } .landing-v4-root #pmic { appearance: none; border: 0; padding: 0; margin-left: auto; margin-right: -13px; width: 34px; height: 34px; flex-shrink: 0; display: inline-flex; align-items: center; justify-content: center; border-radius: 13px; background: transparent; color: var(--m-text-3); cursor: pointer; transition: background .16s, color .16s; } .landing-v4-root #pmic:hover { color: var(--m-text); background: var(--m-s3); } /* Dictation, listening: matches the app's real composer exactly * (thread-editor-composer.tsx) — an inline style swaps in the * accent background/border and the button's own content swaps from * the mic icon to a live 4-bar level meter (hero.tsx), so no * dedicated listening-state CSS lives here beyond position:relative * for the interim-transcript popup to anchor against. */ .landing-v4-root #pmic { position: relative; } .landing-v4-root .seg { position: relative; display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); align-items: center; padding: 3px; background: var(--m-panel); border: 1px solid var(--m-border-2); border-radius: 8px; user-select: none; } .landing-v4-root .seg .md { height: 26px; padding: 0 21px; border-radius: 5px; gap: 8px; justify-content: center; color: var(--m-text-3); background: transparent; transition: color .18s; position: relative; z-index: 2; } .landing-v4-root .seg .md:hover { color: var(--m-text); } /* canvas.css:@media (max-width:620px) — the hero composer's segmented * control tightens to 13px of side padding on a phone. At 21 the pills * came out 76px wide against the canvas's 86 and clipped "Research". */ @media (max-width: 620px) { .landing-v4-root .hp .seg .md { padding: 0 13px; } .landing-v4-root .hp .seg .mdi { display: none; } } /* Always-on staff: the cube sat 32px low, close enough to the logo * band under it to read as one block. Measured at 390 — the text ends * at 470, the band starts at 680, so the gap's centre is 575 while the * cube's was 608. Only the cube moves; the band keeps its place. * (musti, 2026-09-09) */ @media (max-width: 620px) { .landing-v4-root .bc.b4 .bv { transform: translateY(-32px); } } .landing-v4-root .seg .md.on { color: var(--m-text-3); } .landing-v4-root .seg .thumb { position: absolute; top: 3px; bottom: 3px; left: 3px; width: calc(50% - 3px); border-radius: 5px; background: linear-gradient(145deg, #E8F0F0, #F6F4F1, #E7CDDD); overflow: hidden; pointer-events: none; z-index: 1; transform: translateX(calc(var(--i,0)*100%)); transition: transform .42s cubic-bezier(.3,1.25,.4,1); } .landing-v4-root .seg .thumb .mask { position: absolute; top: 0; bottom: 0; left: 0; width: 200%; display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); transform: translateX(calc(var(--i,0)*-50%)); transition: transform .42s cubic-bezier(.3,1.25,.4,1); } .landing-v4-root .seg .thumb .md, .landing-v4-root .seg .thumb .md * { color: var(--m-bg) !important; pointer-events: none; } .landing-v4-root .seg .thumb .md svg path { fill: var(--m-bg) !important; } .landing-v4-root .seg .md.on { color: transparent; } .landing-v4-root .seg .md.on * { color: transparent; } .landing-v4-root .seg .md.on svg path { fill: transparent; } .landing-v4-root .seg .mdi svg { width: 13px; height: 13px; display: block; } @media (prefers-reduced-motion: reduce) { .landing-v4-root .seg .thumb, .landing-v4-root .seg .thumb .mask { transition: none; } } .landing-v4-root .mnote { margin: 13px auto 0; max-width: 89%; white-space: nowrap; overflow: hidden; font-family: 'Geist Mono', ui-monospace, monospace; font-size: var(--text-body); line-height: 1.6; letter-spacing: 0; color: var(--m-text-2); text-align: center; text-wrap: balance; } /* canvas.css:538/610 — the note keeps a fixed height so the composer * does not jump when the mode text changes or wraps. */ @media (max-width: 1180px) { .landing-v4-root .mnote { height: 22px; } } @media (max-width: 620px) { .landing-v4-root .mnote { height: 44px; white-space: normal; } } .landing-v4-root .hfh { display: flex; justify-content: center; align-items: flex-end; padding: 0 0 55px; color: var(--m-text); cursor: pointer; } .landing-v4-root .hfh svg { width: 26px; height: 44px; display: block; opacity: .9; overflow: visible; animation: landing-v4-handPop .4s cubic-bezier(.2,.9,.25,1) 1s both; } .landing-v4-root .thmr { transform-box: fill-box; transform-origin: 43px 71px; animation: landing-v4-thumbCycle 10s 1.36s infinite both; } .landing-v4-root .hrtg { transform-box: fill-box; transform-origin: 50% 50%; animation: landing-v4-heartCycle 10s 1.36s infinite both; } @media (prefers-reduced-motion: reduce) { .landing-v4-root .thmr, .landing-v4-root .hrtg { animation: none; } } .landing-v4-root .cls-1 { fill: #ededed; } .landing-v4-root .cls-2 { fill: #161616; } .landing-v4-root .hrt { fill: #6EECA5; } .landing-v4-root .bc .bv { grid-column: 5 / -1; grid-row: 1; } .landing-v4-root .bc .bv { position: relative; min-width: 0; min-height: 0; align-self: stretch; display: flex; flex-direction: column; justify-content: center; gap: 21px; } .landing-v4-root .cubes { display: block; width: 100%; height: 233px; flex: 0 0 auto; min-height: 89px; -webkit-mask-image: linear-gradient(to bottom, #000 0, #000 72%, transparent 100%); mask-image: linear-gradient(to bottom, #000 0, #000 72%, transparent 100%); } .landing-v4-root .b3 .cubes { -webkit-mask-image: linear-gradient(to bottom, #000 0, #000 72%, transparent 100%), linear-gradient(to right, transparent 0, #000 25%); -webkit-mask-composite: source-in; mask-image: linear-gradient(to bottom, #000 0, #000 72%, transparent 100%), linear-gradient(to right, transparent 0, #000 25%); mask-composite: intersect; } .landing-v4-root .bc .bv { overflow: hidden; } .landing-v4-root .cubes3d { position: relative; } .landing-v4-root .cubes3d canvas { display: block; width: 100%; height: 100%; -webkit-mask-image: radial-gradient(ellipse closest-side at 50% 50%, #000 0, #000 78%, rgba(0,0,0,.6) 88%, rgba(0,0,0,.16) 95%, transparent 100%); mask-image: radial-gradient(ellipse closest-side at 50% 50%, #000 0, #000 78%, rgba(0,0,0,.6) 88%, rgba(0,0,0,.16) 95%, transparent 100%); } .landing-v4-root .bc .bv { margin: -34px -34px -34px 0; } .landing-v4-root .bc .bv { grid-row: 1; grid-column: 2; position: relative; align-self: stretch; display: block; min-width: 0; min-height: 0; margin: -34px -34px -34px 0; overflow: hidden; } .landing-v4-root .cubes3d { position: absolute; inset: 0; display: block; width: 100%; height: 100%; min-height: 0; -webkit-mask-image: none; mask-image: none; } /* Integrations section (Task 6) — ported from canvas.css */ .landing-v4-root .si { position: relative; } .landing-v4-root .si::before { content: ""; position: absolute; top: 0; bottom: 0; left: calc(50% - 50vw); width: 100vw; z-index: -1; pointer-events: none; background: linear-gradient(to bottom, #0c0c0c, #111111); } .landing-v4-root .si .wrap.intg-sec { border-bottom: 1px solid var(--m-border); padding-left: 0; padding-right: 0; } .landing-v4-root .stw { width: 100%; max-width: 1440px; margin: 0 auto; box-sizing: border-box; } .landing-v4-root .sec.intg-sec { position: relative; z-index: 1; text-align: left; background: transparent; padding-top: 55px; padding-bottom: 55px; border-top: 0; border-bottom: 0; } .landing-v4-root .sec.intg-sec .mq { -webkit-mask-image: linear-gradient(to right, transparent 0, #000 89px, #000 calc(100% - 89px), transparent 100%); mask-image: linear-gradient(to right, transparent 0, #000 89px, #000 calc(100% - 89px), transparent 100%); } .landing-v4-root .sec.intg-sec .mq::before, .landing-v4-root .sec.intg-sec .mq::after { display: none; } .landing-v4-root .intg > span { font-size: var(--text-body); line-height: var(--lh-body); font-weight: var(--font-weight-normal); letter-spacing: normal; color: rgb(157, 157, 157); } .landing-v4-root .mq { margin-top: 34px; position: relative; overflow: hidden; pointer-events: none; } .landing-v4-root .mq::before, .landing-v4-root .mq::after { content: ""; position: absolute; top: 0; bottom: 0; z-index: 1; pointer-events: none; } .landing-v4-root .mq::before { left: 0; width: 55px; background: linear-gradient(to right, var(--m-bg), transparent); } .landing-v4-root .mq::after { right: 0; width: 55px; background: linear-gradient(to left, var(--m-bg), transparent); } .landing-v4-root .mqi { display: flex; width: max-content; animation: mq 55s linear infinite; will-change: transform; transform: translateZ(0); backface-visibility: hidden; } .landing-v4-root .lg svg { transform: translateZ(0); } .landing-v4-root .lg { flex-shrink: 0; height: 34px; margin-right: 34px; display: flex; align-items: center; gap: 8px; color: var(--m-text-3); } .landing-v4-root .lg svg { display: block; } .landing-v4-root .lg span { font-family: 'Geist Mono', ui-monospace, monospace; font-size: var(--text-body); line-height: var(--lh-lead); color: var(--m-text-3); white-space: nowrap; } .landing-v4-root .lg img { filter: grayscale(1) brightness(.62); } .landing-v4-root .lg img.pf { width: 20px; height: 20px; } .landing-v4-root .lg img.pn { width: 22px; height: 22px; } .landing-v4-root .lg .fl { display: block; width: 20.9px; height: 20.9px; background: currentColor; -webkit-mask: url("/landing-v4/flap.png") center / contain no-repeat; mask: url("/landing-v4/flap.png") center / contain no-repeat; } .landing-v4-root .lg svg.sol { width: 19.95px; height: 19.95px; } @keyframes mq { from { transform: translate3d(0, 0, 0); } to { transform: translate3d(-50%, 0, 0); } } @media (prefers-reduced-motion: reduce) { .landing-v4-root .mqi { animation: none; } } @media (max-width: 900px) { .landing-v4-root .sec.intg-sec { padding-top: 34px; padding-bottom: 34px; } .landing-v4-root .sec.intg-sec .mq { margin-top: 21px; } .landing-v4-root .sec.intg-sec .mq { -webkit-mask-image: linear-gradient(to right, transparent 0, #000 34px, #000 calc(100% - 34px), transparent 100%); mask-image: linear-gradient(to right, transparent 0, #000 34px, #000 calc(100% - 34px), transparent 100%); } } /* How section — node-graph diagram (Task 7), ported from canvas.css. * .wrap/.sec/.bhead are generic section primitives used by #how * that no prior task needed yet, so they're introduced here. */ .landing-v4-root .wrap { width: 100%; max-width: 1440px; box-sizing: border-box; padding: 144px clamp(21px,3.8vw,55px); margin: 0 auto; background: transparent; } .landing-v4-root .sec { position: relative; border-top: 1px solid var(--m-border); } .landing-v4-root .sec.gridfield { padding-left: 0; padding-right: 0; border-top: 0; } .landing-v4-root .bhead { margin: 0 0 55px; display: grid; grid-template-columns: repeat(12,minmax(0,1fr)); column-gap: 21px; row-gap: 13px; text-align: left; } .landing-v4-root .bhead h2 { margin: 0; font-family: 'Geist Pixel Square', 'Geist Mono', ui-monospace, monospace; font-size: var(--text-hero); line-height: 1.04; font-weight: var(--font-weight-normal); letter-spacing: -.015em; color: var(--m-text); grid-column: 1 / span 9; } .landing-v4-root .bhead.ghead { margin: 0 0 89px; } .landing-v4-root .bhead.ghead h2 { grid-column: 1 / span 9; font-size: var(--text-hero); line-height: 1.15; letter-spacing: -.02em; text-wrap: pretty; } .landing-v4-root .sg { position: relative; } .landing-v4-root .sg::before { content: ""; position: absolute; top: 0; bottom: 0; left: calc(50% - 50vw); width: 100vw; z-index: -1; pointer-events: none; background: linear-gradient(to bottom, #111111 0, #141414 calc(100% - 377px), #121212 calc(100% - 144px), #0f0f0f 100%); } .landing-v4-root .gridfield { position: relative; isolation: isolate; } .landing-v4-root .gridfield::before { content: ""; position: absolute; top: 0; bottom: 0; left: calc(50% - 50vw); width: 100vw; z-index: -1; pointer-events: none; background-image: repeating-linear-gradient(to right, rgba(127,127,127,.13) 0 1px, transparent 1px 34px), repeating-linear-gradient(to bottom, rgba(127,127,127,.13) 0 1px, transparent 1px 34px); background-position: 50% 0; -webkit-mask-image: radial-gradient(115% 78% at 50% 62%, #000 0%, rgba(0,0,0,.55) 52%, transparent 82%), linear-gradient(to bottom, #000 0, #000 calc(100% - 144px), rgba(0,0,0,.45) calc(100% - 89px), rgba(0,0,0,.12) calc(100% - 34px), transparent 100%); -webkit-mask-composite: source-in; mask-image: radial-gradient(115% 78% at 50% 62%, #000 0%, rgba(0,0,0,.55) 52%, transparent 82%), linear-gradient(to bottom, #000 0, #000 calc(100% - 144px), rgba(0,0,0,.45) calc(100% - 89px), rgba(0,0,0,.12) calc(100% - 34px), transparent 100%); mask-composite: intersect; } /* The grid moved into the .gtravel canvas (use-grid-field.ts): the * traces have to share its coordinate system or they run beside the * lines instead of on them. Mask and tone are unchanged, they just * apply to the canvas now. */ .landing-v4-root .gridfield::before { display: none; } .landing-v4-root .gridfield .gtravel { position: absolute; top: 0; bottom: 0; height: 100%; left: calc(50% - 50vw); width: 100vw; z-index: -1; pointer-events: none; display: block; -webkit-mask-image: radial-gradient(115% 78% at 50% 62%, #000 0%, rgba(0,0,0,.55) 52%, transparent 82%), linear-gradient(to bottom, #000 0, #000 calc(100% - 144px), rgba(0,0,0,.45) calc(100% - 89px), rgba(0,0,0,.12) calc(100% - 34px), transparent 100%); -webkit-mask-composite: source-in; mask-image: radial-gradient(115% 78% at 50% 62%, #000 0%, rgba(0,0,0,.55) 52%, transparent 82%), linear-gradient(to bottom, #000 0, #000 calc(100% - 144px), rgba(0,0,0,.45) calc(100% - 89px), rgba(0,0,0,.12) calc(100% - 34px), transparent 100%); mask-composite: intersect; } .landing-v4-root .gcap { position: absolute; bottom: 89px; left: 0; width: calc((100% - 21px * 11) / 12 * 3 + 21px * 2); z-index: 2; } .landing-v4-root .gcap span { display: inline-flex; align-items: center; gap: 8px; font-family: 'Geist', system-ui, sans-serif; font-size: var(--text-heading); line-height: var(--lh-body); letter-spacing: -.008em; color: var(--m-text-2); } .landing-v4-root .gcap span svg { display: block; flex: 0 0 auto; width: 16px; height: 16px; } .landing-v4-root .shell { position: relative; width: 100%; margin-top: 0; } .landing-v4-root .stage { width: 100%; overflow: hidden; } .landing-v4-root .clip { overflow: hidden; margin: 0 auto; } .landing-v4-root .fit { overflow: hidden; transform-origin: 0 0; } .landing-v4-root .frame { position: relative; background: transparent; } /* left/top/width are driven entirely by JS now (use-node-graph.ts * interpolates a before/after layout every animation frame and * derives that frame's wires from the SAME numbers) — a CSS * transition on these would double-animate against the JS tween, * chasing it every frame instead of matching it. */ .landing-v4-root .node { position: absolute; box-sizing: border-box; width: max-content; z-index: 0; border-radius: 8px; overflow: hidden; padding: 8px 13px; display: flex; flex-direction: column; gap: 0; color: var(--m-on-light); cursor: pointer; user-select: none; } .landing-v4-root .node.measuring .body { display: none; } .landing-v4-root .node.open { z-index: 1; } /* The card's overall height (open or closed) is now the SAME JS * number driving its neighbors' give-way positions — applied * directly as .node's own height style (how.tsx) instead of derived * from a CSS-transitioned grid-template-rows. Two independently * "close enough" animations (a JS tween of a measured target, a * CSS transition of the real box) never guaranteed the same * value on the same frame; whichever settled first looked like * it had teleported relative to the other (musti, 2026-09-11, * after several rounds: "animasyon bitince isinlaniyorlar"). The * outer .node's overflow:hidden clips this the same way * grid-template-rows:0fr used to — the margin/padding below are * unconditional (harmless while clipped) rather than toggled by * .open. */ .landing-v4-root .node .body { display: block; margin: 8px 0 0; padding-bottom: 5px; } .landing-v4-root .node .body > p { overflow: hidden; min-height: 0; opacity: 0; transition: opacity .14s ease; margin: 0; font-family: 'Geist Mono', ui-monospace, monospace; font-size: var(--text-body); line-height: var(--lh-body); letter-spacing: -.005em; color: var(--m-on-light-2); text-wrap: pretty; } .landing-v4-root .node.open .body > p { opacity: 1; transition: opacity .3s ease .18s; } .landing-v4-root .node .tog { margin-left: auto; width: 12px; height: 12px; position: relative; opacity: .85; flex-shrink: 0; } .landing-v4-root .node .tog::before, .landing-v4-root .node .tog::after { content: ""; position: absolute; background: currentColor; } .landing-v4-root .node .tog::before { left: 0; top: 5px; width: 12px; height: 2px; } .landing-v4-root .node .tog::after { left: 5px; top: 0; width: 2px; height: 12px; } .landing-v4-root .node.open .tog::after { opacity: 0; } .landing-v4-root .node b { font-size: var(--text-body); line-height: var(--lh-body); font-weight: var(--font-weight-medium); letter-spacing: -.006em; } .landing-v4-root .node .hd { display: flex; align-items: center; gap: 8px; height: 18px; } .landing-v4-root .node .hd svg { display: block; flex-shrink: 0; } .landing-v4-root .wires { contain: paint; transform: translateZ(0); backface-visibility: hidden; position: absolute; left: 0; top: 0; pointer-events: none; z-index: 5; } .landing-v4-root .wires .w { fill: none; stroke-width: 1.6; opacity: .65; } .landing-v4-root .wires .flow { fill: none; stroke-width: 1.9; stroke-linecap: round; stroke-dasharray: 40 999; animation: landing-v4-dash 3s linear infinite; } @keyframes landing-v4-dash { from { stroke-dashoffset: 1039; } to { stroke-dashoffset: 0; } } @media (prefers-reduced-motion: reduce) { .landing-v4-root .wires .flow { animation: none; opacity: 0; } } @media (max-width: 1180px) { .landing-v4-root .wrap.sec.gridfield { display: grid; grid-template-columns: repeat(12,minmax(0,1fr)); column-gap: 21px; align-items: start; } .landing-v4-root .gridfield > .bhead.ghead { grid-column: 1 / span 6; grid-row: 1; display: block; margin: 0; } .landing-v4-root .gridfield > .bhead.ghead h2 { font-size: var(--text-hero); line-height: 1.15; } .landing-v4-root .gridfield > .shell { grid-column: 7 / -1; grid-row: 1; } .landing-v4-root .gridfield > .gcap { grid-column: 1 / -1; grid-row: 2; text-align: left; margin-top: 55px; position: static; width: auto; } .landing-v4-root .stage, .landing-v4-root .clip, .landing-v4-root .fit { overflow: visible; width: auto !important; transform: none !important; } .landing-v4-root .frame { margin: 0; } } @media (max-width: 900px) { .landing-v4-root .bhead { margin-bottom: 34px; } .landing-v4-root .bhead.ghead { margin-bottom: 55px; } .landing-v4-root .bhead.ghead h2 { line-height: 1.15; } .landing-v4-root .bhead h2, .landing-v4-root .bhead p { grid-column: 1 / -1; } /* canvas.css:549 — narrows the unconditional 144px .bento-sec padding (see .sec.bento-sec rule below, Task 8) down to 89px under 900px. Forward-carried from Task 8 review (Task 15 item 2). */ .landing-v4-root .sec.bento-sec, .landing-v4-root .sec + .sec.bento-sec { padding-top: 89px !important; padding-bottom: 89px !important; } } @media (max-width: 620px) { .landing-v4-root .bhead, .landing-v4-root .bhead.ghead { margin-bottom: 55px !important; } .landing-v4-root .bhead.ghead h2 { grid-column: 1 / -1; } .landing-v4-root .gridfield > .bhead.ghead { grid-column: 1 / -1; grid-row: 1; margin: 0 0 55px; } .landing-v4-root .gridfield > .shell { grid-column: 1 / -1; grid-row: 2; } .landing-v4-root .gridfield > .gcap { grid-column: 1 / -1; grid-row: 3; margin-top: 55px; } .landing-v4-root .sec.gridfield { padding-top: 89px; padding-bottom: 89px; } /* canvas.css:606 — the grid canvas only fades on a phone; at every wider * width it paints at full strength. */ .landing-v4-root .gridfield > .gtravel { opacity: .35; } } /* Platform section (Task 8) — bento grid + shared-canvas cube scenes, * ported from canvas.css. The .bc/.bv/.cubes3d rules already carry a * two-generation cascade (an older 7-col card layout, then a newer * 66/34 two-column layout that overrides most of it) — that split is * preserved verbatim, in source file order, from Task 5's Step 3 (see * the .bc .bv / .cubes / .cubes3d rules directly above the "How" * section comment) plus what's added here, so the final computed * styles match source exactly rather than a hand-resolved merge. * Selectors whose target markup doesn't exist on this page (.ph, * .b1 .pn/.pl, .b2 .canvas/.ab/.tag, .b3 .log, .b4 .ag/.team) are * dead in source too (remnants of an earlier bento card design) and * are intentionally not ported. */ .landing-v4-root .sc, .landing-v4-root .sg { display: block; } .landing-v4-root .sec.bento-sec, .landing-v4-root .sec + .sec.bento-sec { border-top: 1px solid var(--m-border); padding: 144px 0; } .landing-v4-root .bfoot { margin: 55px 0 0; display: flex; justify-content: center; align-items: center; gap: 34px; } .landing-v4-root .bfoot .lnk { font-size: var(--text-body); line-height: var(--lh-body); color: var(--m-text); text-decoration: none; transition: color .18s; } .landing-v4-root .bfoot .lnk:hover { color: var(--m-text-3); } .landing-v4-root .bento { display: grid; grid-template-columns: repeat(12,minmax(0,1fr)); grid-auto-rows: auto; gap: 21px; } .landing-v4-root .bc { position: relative; display: grid; grid-template-columns: repeat(var(--n,7),minmax(0,1fr)); column-gap: 21px; row-gap: 21px; align-items: start; min-height: 0; padding: 34px; border-radius: 21px; background: url("/landing-v4/card-grad.png") 0 0/96px 100% repeat-x #121212; box-shadow: 0 0 0 1px var(--m-border); color: var(--m-text); overflow: hidden; box-sizing: border-box; } .landing-v4-root .bc .bt { position: relative; z-index: 1; } .landing-v4-root .bc .eb { display: block; font-family: var(--font-mono,'Geist Mono',ui-monospace,monospace); font-size: var(--text-meta); line-height: 1.2; letter-spacing: 0; text-transform: none; color: var(--c,var(--m-text-4)); margin: 0 0 -5px; } .landing-v4-root .bc { --n: 6; } .landing-v4-root .aband { grid-column: 1 / -1; align-self: end; margin: 0; padding: 1px 0; position: relative; overflow: hidden; pointer-events: none; -webkit-mask-image: linear-gradient(to right,transparent 0,#000 55px,#000 calc(100% - 55px),transparent 100%); mask-image: linear-gradient(to right,transparent 0,#000 55px,#000 calc(100% - 55px),transparent 100%); } .landing-v4-root .abi { display: flex; gap: 0; width: max-content; padding-left: 0; animation: mq 34s linear infinite; will-change: transform; transform: translateZ(0); backface-visibility: hidden; } .landing-v4-root .abi > .lslot { margin-right: 8px; } .landing-v4-root .lslot { flex-shrink: 0; } @media (prefers-reduced-motion: reduce) { .landing-v4-root .abi { animation: none; } } .landing-v4-root .lslot { width: 26px; height: 26px; background: transparent; display: flex; align-items: center; justify-content: center; box-sizing: border-box; } .landing-v4-root .lslot.has { background: transparent; border: 0; } .landing-v4-root .lslot img { width: 18px; height: 18px; display: block; } .landing-v4-root .bc h3 { margin: 0; font-size: var(--text-heading); line-height: 1.2; font-weight: var(--font-weight-normal); letter-spacing: -.02em; text-wrap: balance; } .landing-v4-root .bc p { margin: 13px 0 0; font-size: var(--text-body); line-height: var(--lh-body); color: var(--m-text-3); text-wrap: pretty; max-width: 44ch; } .landing-v4-root .bc { grid-column: span 6; } .landing-v4-root .bc .bt { grid-row: 1; grid-column: 1 / span 4; } .landing-v4-root .bc > * { position: relative; z-index: 1; } .landing-v4-root .b1 { --ga: 170deg; } .landing-v4-root .b2 { --ga: 190deg; } .landing-v4-root .b3 { --ga: 175deg; } .landing-v4-root .b4 { --ga: 185deg; } .landing-v4-root .b1 .bt { align-self: center; } @media (max-width: 620px) { .landing-v4-root .bento { grid-auto-rows: auto; } .landing-v4-root .bc .bt { grid-column: 1 / -1; } .landing-v4-root .bc .bv { grid-column: 1 / -1; grid-row: 2; height: 233px; margin: 0 -21px -21px; } } @media (max-width: 620px) { .landing-v4-root .bento { grid-auto-rows: auto; } .landing-v4-root .bc { grid-column: span 12 !important; min-height: 0; padding: 21px; } .landing-v4-root .bfoot { flex-direction: column; gap: 21px; } } /* canvas.css overrides its own column rule later in the same 620 * block: the button and the link fit side by side at 390, so stacking * them cost a whole row (76px against the canvas's 34). Wrap keeps the * stack available for a longer label without forcing it. */ @media (max-width: 620px) { .landing-v4-root .bfoot { flex-direction: row; flex-wrap: wrap; justify-content: center; align-items: center; gap: 21px; } } /* Second-generation bento layout (canvas.css ~L388-424) — supersedes * most of the block above via source order at equal specificity. */ .landing-v4-root .bento { display: grid; grid-template-columns: repeat(12,minmax(0,1fr)); grid-auto-rows: 1fr; gap: 21px; } .landing-v4-root .bc { grid-column: span 6; display: grid; grid-template-columns: minmax(0,66fr) minmax(0,34fr); grid-template-rows: auto; column-gap: 21px; row-gap: 0; align-items: stretch; box-sizing: border-box; padding: 34px; min-height: 0; border-radius: 21px; overflow: hidden; box-shadow: none; border: 1px solid transparent; background: linear-gradient(to bottom,var(--m-s3) 0%,var(--m-s2) 62%,var(--m-s2) 100%) padding-box, linear-gradient(to bottom,rgba(255,255,255,.065) 0%,rgba(255,255,255,.045) 60%,rgba(255,255,255,.035) 100%) border-box; } .landing-v4-root .bc.b1, .landing-v4-root .bc.b2 { background: linear-gradient(to bottom,var(--m-s2) 0%,var(--m-s2) 38%,var(--m-s3) 100%) padding-box, linear-gradient(to bottom,rgba(255,255,255,.035) 0%,rgba(255,255,255,.045) 40%,rgba(255,255,255,.065) 100%) border-box; } .landing-v4-root .bc .bt { grid-row: 1; grid-column: 1; align-self: start; display: flex; flex-direction: column; gap: 13px; min-height: 0; padding: 0; } .landing-v4-root .bc h3 { margin: 0; font-size: var(--text-heading); line-height: var(--lh-tight); font-weight: var(--font-weight-normal); letter-spacing: -.02em; color: var(--m-text); max-width: 20ch; text-wrap: balance; } .landing-v4-root .bc h3 { font-weight: var(--font-weight-medium); } .landing-v4-root .bc p { margin: 0; font-size: var(--text-lead); line-height: var(--lh-lead); color: var(--m-text-3); max-width: 44ch; text-wrap: pretty; } .landing-v4-root .b4 .bv { grid-row: 1 / -1; } .landing-v4-root .b4 .aband { position: relative; grid-row: 2; grid-column: 1 / -1; align-self: end; z-index: 2; margin: 21px -34px -21px; padding: 1px 0; -webkit-mask-image: linear-gradient(to right,transparent 0,#000 89px,#000 calc(100% - 89px),transparent 100%); mask-image: linear-gradient(to right,transparent 0,#000 89px,#000 calc(100% - 89px),transparent 100%); } .landing-v4-root .b4 .lslot { width: 34px; height: 34px; border-radius: 8px; } .landing-v4-root .b4 .lslot svg, .landing-v4-root .b4 .lslot img { display: block; width: 20px; height: 20px; object-fit: contain; } .landing-v4-root .b4 .abi > .lslot { margin-right: 13px; } @media (min-width: 1181px) { .landing-v4-root .bc p { max-width: 30ch; } } @media (max-width: 1180px) { .landing-v4-root .bc { grid-column: span 12; } } @media (max-width: 620px) { .landing-v4-root .bc { grid-template-columns: minmax(0,1fr); grid-template-rows: auto auto; row-gap: 21px; min-height: 0; padding: 21px; } .landing-v4-root .bc .bt { grid-column: 1; min-height: 0; } .landing-v4-root .bc h3 { min-height: 0; } .landing-v4-root .bc .bv { grid-row: 2; grid-column: 1; height: 233px; margin: 0 -21px -21px; } .landing-v4-root .b4 .aband { left: -21px; right: -21px; bottom: 8px; } } /* Third-generation .b4 .aband tweak (canvas.css ~L451) — final margin * + mask-inset values, still superseding the block above at equal * specificity by source order. */ .landing-v4-root .b4 .aband { margin-top: 34px; margin-left: 0; margin-right: 0; -webkit-mask-image: linear-gradient(to right,transparent 0,#000 55px,#000 calc(100% - 55px),transparent 100%); mask-image: linear-gradient(to right,transparent 0,#000 55px,#000 calc(100% - 55px),transparent 100%); } .landing-v4-root .lslot[title="X"] img { width: 16px; height: 16px; } .landing-v4-root .lslot[title="Notion"] img { width: 19px; height: 19px; } .landing-v4-root .lslot[title="Linear"] img { width: 20px; height: 20px; } .landing-v4-root .bento-sec .bhead.mm { display: flex; justify-content: center; margin: 0 0 55px; } .landing-v4-root .bhead.mm h2 { display: inline-flex; align-items: center; gap: 16px; } .landing-v4-root .mmark { height: .95em; width: auto; display: block; color: var(--m-text); flex-shrink: 0; transform: translateY(.008em); } /* .cubes/.cubes3d forward-carried from Task 5 (see the block above the * "How" section comment) never got a "cubes" class to actually match, * since Task 5 deliberately left SharedCanvasCube unmounted. Source * mounts a single element carrying BOTH "cubes" and "cubes3d" — but * that structure would make .cubes3d's cascade-final mask-image:none * (ported above) clobber .cubes' fade mask on that same element, * since both are single-class selectors and .cubes3d's override * comes later in source order. SharedCanvasCube already returns a * bare (Task 5's component, not * modified here), so this section wraps it in a separate *
instead of merging the classes: the fade * mask lives on the wrapper (unclobbered), the canvas keeps its own * absolute-fill positioning. The one necessary deviation from * verbatim canvas.css is "position: relative" on .cubes itself — * source never needed it (mask + cubes3d's position:absolute were on * the same element there), but our split wrapper/child structure * needs it so the canvas's "inset: 0" resolves against the 233px * masked wrapper instead of escaping to the .bv ancestor. * * Caveat (not visual parity with source): reviving .cubes' mask * here makes a LINEAR bottom-fade visible — that is .cubes' own * mask-image (canvas.css:194), not source's actual rendered effect. * Source's real vignette is a RADIAL ellipse mask on the canvas * itself (.cubes3d canvas, canvas.css:196), which targets a canvas * that is a *descendant* of .cubes3d — a structure that can't exist * here since SharedCanvasCube's canvas IS the .cubes3d element, not * a child of one (see above). That radial vignette is unreachable * given the component's current bare-canvas structure (and is dead * in true source too, for the unrelated reason that .cubes3d's own * later mask-image:none override clobbers it on the same element). * Fixing this for real needs Task 5's component restructured to * mount a host div — out of this task's scope. Don't mistake the * linear fade below for confirmed visual parity with source. */ .landing-v4-root .cubes { position: relative; } /* canvas.css:526, inside its own "@media (max-width:1180px)" block — * resets .bento back to grid-auto-rows:auto (undoing the * second-generation block's unconditional grid-auto-rows:1fr, which * otherwise wins at ANY viewport including mobile: an unconditional * rule beats an earlier @media-scoped rule of equal specificity * regardless of whether the media condition currently matches, since * cascade order follows textual position, not nesting). Without this, * every stacked mobile card is force-equalized to the tallest card's * height via the 1fr flex-track algorithm, producing hundreds of * pixels of dead space under the shorter cards. Confirmed against * the actual static source (served locally) before porting — this * rule is required, not optional, for the mobile bento to render at * its content height like the real site. */ @media (max-width: 1180px) { .landing-v4-root .bento { grid-auto-rows: auto; } .landing-v4-root .bc { min-height: 0; } .landing-v4-root .bc .bv { min-height: 233px; } } /* ---- Studio section (canvas.css:425-503, plus the studio-specific * slices of the responsive blocks at canvas.css:541-613) — ported * verbatim, scoped under .landing-v4-root. The .sdflank .sdtwinkle * dotted-grid background canvas (canvas.css:498) is intentionally * NOT ported: Studio doesn't mount the decorative canvas.sdtwinkle * element canvas.js:583-638 creates at runtime (its own animation * loop is dead code in source too, gated behind an unconditional * return added 2026-09-06 — see that file's comment), matching * Task 7's same call on the node-graph's .gtravel canvas as an * out-of-scope decorative follow-up. */ .landing-v4-root .sd .bhead { margin: 0 0 25px; } .landing-v4-root .sdhead h2 { grid-column: 1 / span 9; } .landing-v4-root .bhead.sdhead { margin: 0; } .landing-v4-root .bhead.sdhead .sdlede { grid-column: 1 / span 9; grid-row: 1; margin: 0; font-size: var(--text-hero); line-height: 1.15; letter-spacing: -.02em; text-wrap: pretty; } /* canvas.css:1439 — the hard
s in the studio lede and the node * graph heading are tuned for a box wide enough to take them (>=945px, * i.e. a 1440 viewport). Below that they land mid-line and leave * orphans, so they drop out and the browser balances the rag instead. * Measured on the canvas: at 1194 the lede went from a 24% last line * to 82%. */ @media (max-width: 1439px) { .landing-v4-root .sdlede br, .landing-v4-root .sg .bhead h2 br { display: none; } .landing-v4-root .bhead.sdhead .sdlede, .landing-v4-root .sg .bhead h2 { text-wrap: balance; } } @media (max-width: 900px) { .landing-v4-root .bhead.sdhead .sdlede { grid-column: 1 / -1; } } .landing-v4-root .sdb { grid-column: span 3; display: flex; flex-direction: column; gap: 13px; padding: 10px; } .landing-v4-root .sdb h3 { margin: 0; font-size: var(--text-heading); line-height: 1.3; font-weight: var(--font-weight-normal); letter-spacing: .4px; color: #f5f4f1; } .landing-v4-root .sdb p { margin: 0; font-size: var(--text-lead); line-height: 1.55; letter-spacing: .4px; color: #A9A9A9; text-wrap: pretty; } .landing-v4-root .sdcards { position: relative; z-index: 1; display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 21px; margin-top: 55px; } .landing-v4-root .sdc { box-sizing: border-box; display: flex; flex-direction: column; background: var(--m-s2); box-shadow: 0 0 0 1px var(--m-border); border-radius: 21px; overflow: hidden; padding: 34px; } .landing-v4-root .sdi { display: inline-flex; width: 16px; height: 16px; flex-shrink: 0; color: #f5f4f1; } .landing-v4-root .sdi svg { display: block; } .landing-v4-root .sdc b { display: flex; align-items: center; gap: 8px; font-family: Geist, system-ui, -apple-system, sans-serif; font-weight: var(--font-weight-medium); font-size: var(--text-lead); line-height: 1.3; letter-spacing: .2px; color: #f5f4f1; margin: 0; } .landing-v4-root .sdc p { margin: 13px 0 0; font-size: var(--text-body); line-height: 1.55; color: #A9A9A9; } @media (max-width: 960px) { .landing-v4-root .sdlede, .landing-v4-root .sdb { grid-column: 1 / -1; } .landing-v4-root .sdcards { grid-template-columns: 1fr; } } .landing-v4-root .stfit { position: relative; width: 100%; overflow: visible; } .landing-v4-root .stfit2 { display: none; position: relative; width: 100%; } @media (max-width: 620px) { .landing-v4-root .stfit2 { display: block; } .landing-v4-root .stfit2 iframe { border: 0; width: 100%; display: block; color-scheme: normal; } } @media (max-width: 1180px) { .landing-v4-root .sdflank { overflow-x: clip; } } .landing-v4-root .stframe { position: absolute; left: 50%; top: 0; width: 1360px; height: 1010px; border: 0; background: transparent; transform-origin: top center; color-scheme: normal; } .landing-v4-root .sdflank { position: relative; isolation: isolate; margin-top: 55px; display: grid; grid-template-columns: 260px minmax(0,1fr); column-gap: 34px; align-items: start; } /* The grid canvas use-studio-grid.ts prepends. Full-bleed and masked * from the centre out, so it never ends on a hard edge. */ .landing-v4-root .sdflank .sdtwinkle { position: absolute; top: -89px; bottom: 0; left: calc(50% - 50vw); width: 100vw; z-index: -1; pointer-events: none; display: block; -webkit-mask-image: radial-gradient(115% 78% at 50% 50%, #000 0%, rgba(0,0,0,.55) 52%, transparent 82%), linear-gradient(to bottom, transparent 0, rgba(0,0,0,.12) 34px, rgba(0,0,0,.45) 89px, #000 144px, #000 calc(100% - 144px), rgba(0,0,0,.45) calc(100% - 89px), rgba(0,0,0,.12) calc(100% - 34px), transparent 100%); -webkit-mask-composite: source-in; mask-image: radial-gradient(115% 78% at 50% 50%, #000 0%, rgba(0,0,0,.55) 52%, transparent 82%), linear-gradient(to bottom, transparent 0, rgba(0,0,0,.12) 34px, rgba(0,0,0,.45) 89px, #000 144px, #000 calc(100% - 144px), rgba(0,0,0,.45) calc(100% - 89px), rgba(0,0,0,.12) calc(100% - 34px), transparent 100%); mask-composite: intersect; } .landing-v4-root .sdflank .sdfl2 { margin-top: 34px; display: flex; flex-direction: column; gap: 13px; } .landing-v4-root .sd .sdcta { margin-top: 89px; display: flex; justify-content: center; } .landing-v4-root .sdflank .sdfl h3 { font-size: var(--text-heading); line-height: 1.3; } .landing-v4-root .sdflank .sdfl p { font-size: var(--text-lead); line-height: var(--lh-lead); text-wrap: pretty; text-wrap: balance; } .landing-v4-root .sdflank .sdfl { margin: 0; padding: 0; } .landing-v4-root .sdflank > .left { grid-column: 1; grid-row: 1; } .landing-v4-root .sdflank > .stfit { grid-column: 2; grid-row: 1; } /* studio: metin ustte (iki blok yan yana), kolaj altta. 1011, cunku kolaj bir iframe ve kendi ic CSS'i 640'ta mobil duzene geciyor -- kartlari alt alta diziyor. Iki kolonda kolaj sutunu = sayfa genisligi - 260 metin - 34 gap, ve bu 640'in altina 1012'de dusuyor (olculdu: 1012 -> 641px sutun, masaustu kolaji; 1009 -> 638px, mobil duzen). 960'ta stack'lemek 961-1011 arasini iki kolonda birakiyordu: yaninda metin duran, ici mobile dusmus bir kolaj. Stack'te kolaj tum genisligi aliyor ve olcekli masaustu kompozisyonu geri geliyor -- 960 altindakiyle ayni davranis, sadece dogru yerden basliyor. */ @media (max-width: 1011px) { .landing-v4-root .sdflank { grid-template-columns: minmax(0,1fr); row-gap: 55px; margin-top: 55px; } .landing-v4-root .sdflank > .left { grid-row: 1; grid-column: 1; padding-top: 0 !important; display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); column-gap: 21px; row-gap: 13px; align-content: start; } .landing-v4-root .sdflank > .left > h3 { grid-column: 1; grid-row: 1; } .landing-v4-root .sdflank > .left > p { grid-column: 1; grid-row: 2; } .landing-v4-root .sdflank > .left > .sdfl2 { grid-column: 2; grid-row: 1 / span 2; margin-top: 0 !important; } .landing-v4-root .sdflank > .stfit { grid-row: 2; grid-column: 1; } } /* Kartlar ve CTA 960'ta kaliyor: onlar kolaj sutununa bagli degil ve 961-1011'de uc kolon zaten olcusunde duruyor (284px). */ @media (max-width: 960px) { .landing-v4-root .sdcards { margin-top: 55px !important; grid-template-columns: repeat(2,minmax(0,1fr)); } .landing-v4-root .sd .sdcta { margin-top: 55px; } } @media (max-width: 900px) { .landing-v4-root .sd .stw > div { padding-top: 89px !important; padding-bottom: 89px !important; } } @media (max-width: 620px) { .landing-v4-root .bhead.sdhead .sdlede { grid-column: 1 / -1; } .landing-v4-root .sdflank > .left { grid-template-columns: minmax(0,1fr); } .landing-v4-root .sdflank > .left > .sdfl2 { grid-column: 1; grid-row: 3; margin-top: 21px !important; } /* studio mobil: metin -> kolaj -> metin -> editor */ .landing-v4-root .sdflank > .left { display: contents; } .landing-v4-root .sdflank > .left > h3 { grid-row: 1; } .landing-v4-root .sdflank > .left > p { grid-row: 2; } .landing-v4-root .sdflank > .stfit { grid-row: 3; margin-top: 21px; } .landing-v4-root .sdflank > .left > .sdfl2 { grid-row: 4; margin-top: 21px !important; gap: 13px; } .landing-v4-root .sdflank > .stfit2 { grid-row: 5; margin-top: 21px; } .landing-v4-root .sdflank { row-gap: 13px; } .landing-v4-root .sdcards { margin-top: 55px !important; gap: 21px; grid-template-columns: 1fr; } .landing-v4-root .sd .sdcta { margin-top: 55px; } } /* ---- Launcher section (canvas.css:506-518) — ported verbatim, * scoped under .landing-v4-root. Three step cards with inline color * vars (--c), responsive breakpoints at 900px/1180px/620px. */ .landing-v4-root .sec.launch-sec { border-top: 1px solid var(--m-border); padding: 144px 0; } /* canvas.css:@media (max-width:900px) — the section rhythm drops from * 144 to 89 below 900, the same step every other section takes there. */ @media (max-width: 900px) { .landing-v4-root .sec.launch-sec { padding-top: 89px; padding-bottom: 89px; } } .landing-v4-root .launch-sec .bhead.sdhead { margin: 0 0 55px; row-gap: 21px; } .landing-v4-root .launch-sec .llede { grid-column: 1 / span 9; grid-row: 2; margin: 0; font-family: 'Geist Pixel Square', 'Geist Mono', ui-monospace, monospace; font-size: var(--text-title); line-height: 1.25; font-weight: var(--font-weight-normal); letter-spacing: -0.01em; color: var(--m-text-3); text-wrap: pretty; } @media (max-width: 900px) { .landing-v4-root .launch-sec .llede { grid-column: 1 / -1; } } .landing-v4-root .lsteps { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 21px; } .landing-v4-root .lstep { box-sizing: border-box; padding: 34px; display: flex; flex-direction: column; gap: 13px; border-radius: 21px; border: 1px solid transparent; background: linear-gradient(to bottom, var(--m-s3) 0%, var(--m-s2) 62%, var(--m-s2) 100%) padding-box, linear-gradient(to bottom, rgba(255, 255, 255, 0.065) 0%, rgba(255, 255, 255, 0.045) 60%, rgba(255, 255, 255, 0.035) 100%) border-box; } .landing-v4-root .lstep .eb { display: block; font-family: 'Geist Mono', ui-monospace, monospace; font-size: var(--text-meta); line-height: 1.2; color: var(--c, var(--m-text-4)); } .landing-v4-root .lstep h3 { margin: 0; font-size: var(--text-heading); line-height: var(--lh-tight); font-weight: var(--font-weight-medium); letter-spacing: -0.02em; color: var(--m-text); max-width: 20ch; text-wrap: balance; } .landing-v4-root .lstep p { margin: 0; font-size: var(--text-lead); line-height: var(--lh-lead); color: var(--m-text-3); max-width: 44ch; text-wrap: pretty; } .landing-v4-root .launch-sec .bfoot { margin-top: 55px; } @media (max-width: 1180px) { .landing-v4-root .lsteps { grid-template-columns: 1fr; } .landing-v4-root .lstep { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: 21px; row-gap: 8px; padding: 21px 34px; align-items: start; } .landing-v4-root .lstep .eb { grid-column: 1 / span 4; grid-row: 1; } .landing-v4-root .lstep h3 { grid-column: 1 / span 4; grid-row: 2; max-width: none; } .landing-v4-root .lstep p { grid-column: 5 / -1; grid-row: 1 / span 2; max-width: none; font-size: var(--text-body); line-height: var(--lh-body); } } @media (max-width: 620px) { .landing-v4-root .lstep { display: flex; flex-direction: column; gap: 13px; padding: 21px; } .landing-v4-root .lstep .eb, .landing-v4-root .lstep h3, .landing-v4-root .lstep p { grid-column: auto; grid-row: auto; } } @media (max-width: 1180px) { .landing-v4-root .launch-sec .llede { grid-column: 1 / -1; font-family: Geist, system-ui, sans-serif; font-size: var(--text-heading); line-height: 1.4; letter-spacing: -0.01em; color: var(--m-text-2); } } /* ---- Pricing section (Task 11) -- canvas.css:148-163, ported * verbatim, scoped under .landing-v4-root. '.bhead p' is a * generic base rule (sits inside the same cited line range as * '.bhead.split') not yet ported by any earlier task; every * other landing-v4 paragraph under '.bhead' so far relied on a * more specific selector, so adding it here is additive, not a * behavior change for prior sections. '.sp .stw > div''s 89px * padding override (canvas.css:549, inside its own * max-width:900px block) isn't in the 148-163 range but is * added for the same reason Task 9 added the analogous * '.sd .stw > div' rule: without it the inline 144px section * padding never collapses to the page's standard 89px rhythm * below that breakpoint. */ .landing-v4-root .bhead p { margin: 0; font-size: var(--text-heading); line-height: 1.4; font-weight: var(--font-weight-normal); letter-spacing: -.01em; color: var(--m-text-2); text-wrap: pretty; } .landing-v4-root section.sp .bhead.split h2 { font-size: var(--text-hero); line-height: 1.04; grid-column: 1 / span 9; grid-row: 1; } .landing-v4-root section.sp .bhead.split { row-gap: 13px; } .landing-v4-root section.sp .bhead.split p { font-size: var(--text-heading); line-height: 1.4; letter-spacing: -.01em; grid-column: 1 / span 9; grid-row: 2; max-width: none; margin: 0; text-align: left; } .landing-v4-root .ptable { display: grid; grid-template-columns: repeat(4,minmax(0,1fr)); gap: 21px; } .landing-v4-root .bsw { grid-column: 8 / span 5; grid-row: 1; align-self: center; justify-self: end; display: flex; align-items: center; } .landing-v4-root .seg.bseg .md { padding: 0 13px; } .landing-v4-root .seg .bsav { color: var(--m-accent); } .landing-v4-root .seg .thumb .bsav { color: var(--m-accent-ink) !important; } .landing-v4-root .p-old { position: relative; } .landing-v4-root .p-old::after { content: ""; position: absolute; left: -8%; right: -8%; top: 50%; height: 1.5px; background: var(--m-text-4); transform: translateY(-50%) rotate(-14deg); pointer-events: none; } .landing-v4-root .pro-card { position: relative; } .landing-v4-root .pro-card > div { position: relative; z-index: 1; } @media (max-width: 900px) { .landing-v4-root .bhead.split h2, .landing-v4-root .bhead.split p { grid-column: 1 / -1; text-align: left; } .landing-v4-root .bsw { grid-column: 1 / -1; justify-self: start; margin-top: 8px; } .landing-v4-root .pfoot > div { grid-column: 1 / -1; } .landing-v4-root .pfoot > a { grid-column: 1 / -1; justify-self: start; } .landing-v4-root .sp .stw > div { padding-top: 89px !important; padding-bottom: 89px !important; } /* canvas.css:557, under a source comment literally reading * "pricing", and more specific than the plain .bsw rule two * lines up (section.sp .bhead.split .bsw beats .bsw) -- this * is the rule that actually pushes the billing toggle onto * its own row 3 below the h2/p (rows 1/2) instead of stacking * on top of the heading. Missing it was caught by a * screenshot diff against the real source at 500px width. */ .landing-v4-root section.sp .bhead.split .bsw { grid-row: 3; grid-column: 1 / -1; justify-self: start; margin-top: 13px; } } @media (max-width: 1180px) { .landing-v4-root .bhead p, .landing-v4-root .bhead.split p, .landing-v4-root section.sp .bhead.split p, .landing-v4-root .gfsub { grid-column: 1 / -1; max-width: none; } } @media (max-width: 1100px) { .landing-v4-root .ptable { grid-template-columns: repeat(2,minmax(0,1fr)); } } @media (max-width: 620px) { .landing-v4-root .ptable { grid-template-columns: 1fr; } /* canvas.css:570/593/598/608 — on a phone the heading, lede and the * "Need more?" row all take the full width; the !important beats the * inline grid placement the markup carries, exactly as in source. */ .landing-v4-root section.sp .bhead.split h2, .landing-v4-root section.sp .bhead.split p { grid-column: 1 / -1; } .landing-v4-root .pfoot > div { grid-column: 1 / -1 !important; } .landing-v4-root .pfoot { margin-top: 55px; row-gap: 21px; } .landing-v4-root .pfoot > a { grid-row: 2 !important; grid-column: 1 / -1 !important; justify-self: start !important; } } /* ---- FAQ section (Task 12) -- canvas.css:348-367, ported * verbatim, scoped under .landing-v4-root. The '.faqq' selector * is widened to also match 'button.faqq' since source used a * plain div for the clickable question and this port uses * a real button for keyboard accessibility -- markup * semantics changed, not visible copy or CSS values. * '.faqq' also needs a border:0;background:none;text-align:left; * font:inherit;color:inherit reset since it's a real button * now, none of which exist in source (a div needs no * button-reset). '.faq-a'/'.faq-a>p' intentionally declare NO * transition property here, matching canvas.css:364-365 exactly -- * source drives the open/close height and the answer fade * entirely with the Web Animations API (canvas.js:372-385, * ported in faq.tsx), not CSS transitions, because the open * direction uses a spring curve no single CSS easing function * can express. Only the chevron icon rotation * (.faqi i, below) is a real CSS transition, matching source. */ .landing-v4-root .faql { display: grid; grid-template-columns: repeat(12,minmax(0,1fr)); column-gap: 21px; align-items: start; } .landing-v4-root .faqt { grid-column: 1 / span 3; grid-row: 1; } .landing-v4-root .faqt span { font-family: 'Geist Pixel Square','Geist Mono',ui-monospace,monospace; font-size: var(--text-hero); font-weight: var(--font-weight-normal); line-height: 1.04; letter-spacing: -.015em; color: var(--m-text); } .landing-v4-root .faqc { grid-column: 5 / span 8; grid-row: 1; display: grid; grid-template-columns: repeat(8,minmax(0,1fr)); column-gap: 21px; } .landing-v4-root .faqr { grid-column: 1 / -1; display: grid; grid-template-columns: subgrid; border-top: 1px solid var(--m-border); cursor: pointer; user-select: none; } .landing-v4-root .faqq, .landing-v4-root button.faqq { grid-column: 1 / -1; } .landing-v4-root .faq-a { grid-column: 1 / span 7; } .landing-v4-root .faqr:last-child { border-bottom: 1px solid var(--m-border); } .landing-v4-root .faqq, .landing-v4-root button.faqq { display: flex; align-items: flex-start; justify-content: space-between; gap: 21px; padding: 21px 0; width: 100%; border: 0; background: none; text-align: left; font: inherit; color: inherit; cursor: pointer; } .landing-v4-root .faqq > span:first-child { font-size: var(--text-heading); font-weight: var(--font-weight-normal); line-height: 1.4; letter-spacing: -.015em; color: var(--m-text); text-wrap: pretty; } .landing-v4-root .faqr:hover .faqq > span:first-child { color: var(--m-text-2); } .landing-v4-root .faqi { position: relative; flex: 0 0 auto; width: 14px; height: 21px; margin-top: 5px; } .landing-v4-root .faqi i { position: absolute; left: 0; top: 9.5px; width: 14px; height: 1.5px; border-radius: 1px; background: var(--m-text-3); transition: transform .62s cubic-bezier(.16,1.62,.3,1), background .2s; } .landing-v4-root .faqi i:last-child { transform: rotate(90deg); } .landing-v4-root .faqr:hover .faqi i { background: var(--m-text); } .landing-v4-root .faqr.open .faqi i, .landing-v4-root .faqr.open .faqi i:last-child { transform: rotate(180deg); } .landing-v4-root .faq-a { overflow: hidden; height: 0; } .landing-v4-root .faq-a > p { margin: 0; padding-bottom: 21px; font-size: var(--text-body); line-height: var(--lh-body); color: var(--m-text-2); text-wrap: pretty; opacity: 0; will-change: transform, opacity; } @media (max-width: 900px) { .landing-v4-root .faqt, .landing-v4-root .faqc { grid-column: 1 / -1; } .landing-v4-root .faqt { margin-bottom: 34px; } .landing-v4-root .sq .stw > div { padding-top: 89px !important; padding-bottom: 89px !important; } /* canvas.css:559, from the site's consolidated 900px rules * block (canvas.css:548-567) rather than the FAQ-specific * 366 block cited in the brief -- without it .faqc stays on * grid-row:1 stacked on top of .faqt at this width instead * of dropping below it. */ .landing-v4-root .faqc { grid-row: 2; } } @media (max-width: 620px) { /* canvas.css:599, from the site's consolidated 620px rules * block (canvas.css:568-614) -- overrides the 34px margin * above with 55px at this narrower width, matching the * page's mobile spacing rhythm. */ .landing-v4-root .faqt { margin-bottom: 55px; } } @media (prefers-reduced-motion: reduce) { .landing-v4-root .faqi i { transition: none; } } /* ---- Footer section (Task 13) -- canvas.css:301-346 (base) + * :347, :548-567, :568-614 (footer-relevant lines only) media * rules, ported verbatim, scoped under .landing-v4-root. * .gfs/.gfi are already defined by Header (Task 4) since the * header's mobile drawer footer reuses the same classes -- not * redeclared here. Keyframe names get the shared * landing-v4- prefix per this file's convention (see * landing-v4-navtick above) so they can't collide with any * app-wide global CSS. */ .landing-v4-root .gfoot::before { content: ""; position: absolute; top: 0; bottom: -55px; left: calc(50% - 50vw); width: 100vw; background: #121212; z-index: 0; pointer-events: none; } .landing-v4-root .gfoot > * { position: relative; z-index: 1; } .landing-v4-root .gfoot::after { content: ""; position: absolute; top: 0; bottom: -55px; left: calc(50% - 50vw); width: 100vw; z-index: 0; pointer-events: none; opacity: .28; background-image: url("data:image/svg+xml;utf8,"); background-size: 300px 300px; } .landing-v4-root .gfoot { position: relative; padding: 144px 0 55px; } /* The glow canvas use-footer-glow.ts prepends (canvas.css:.gfglow). * Full-bleed like the ::before ground it sits on, and it stops * 111px short of the bottom so the last row keeps the flat ground. */ .landing-v4-root .gfglow { position: absolute; top: 0; left: calc(50% - 50vw); width: 100vw; height: calc(100% - 111px); z-index: 0; pointer-events: none; display: block; } .landing-v4-root .gfin, .landing-v4-root .gfbot { position: relative; z-index: 2; display: grid; grid-template-columns: repeat(12,minmax(0,1fr)); column-gap: 21px; align-items: start; } .landing-v4-root .gfhead { font-family: 'Geist Pixel Square','Geist Mono',ui-monospace,monospace; font-size: var(--landing-hero); font-weight: var(--font-weight-normal); line-height: 1.04; letter-spacing: -.015em; color: var(--m-text); text-wrap: pretty; } .landing-v4-root .gfsub { margin: 21px 0 0; max-width: none; font-size: var(--text-lead); line-height: var(--lh-lead); color: var(--m-text-2); text-wrap: balance; } .landing-v4-root .gfcta { margin-top: 34px; display: flex; align-items: center; gap: 13px; } .landing-v4-root .gfmain { grid-column: 1 / span 6; grid-row: 1 / span 2; } .landing-v4-root .gfnews { grid-column: 9 / -1; grid-row: 2; align-self: end; margin-top: 34px; display: flex; flex-direction: column; gap: 13px; } .landing-v4-root .gfnews-l { font-size: var(--text-body); line-height: var(--lh-body); color: var(--m-text-3); } .landing-v4-root .gfnews-row { display: flex; align-items: center; gap: 8px; width: 100%; } .landing-v4-root .gfnews-in { appearance: none; -webkit-appearance: none; box-sizing: border-box; display: block; margin: 0; min-width: 0; flex: 1; width: auto; height: 34px; padding: 0 13px; background: var(--m-raise); border: 1px solid transparent; border-radius: 8px; box-shadow: none; color: var(--m-text); caret-color: var(--m-accent); font-family: inherit; font-size: var(--text-body); line-height: 1; outline: none; transition: border-color .18s, box-shadow .18s; } .landing-v4-root .gfnews-in:-webkit-autofill, .landing-v4-root .gfnews-in:-webkit-autofill:hover, .landing-v4-root .gfnews-in:-webkit-autofill:focus { -webkit-text-fill-color: var(--m-text); -webkit-box-shadow: 0 0 0 1000px var(--m-raise) inset; transition: background-color 9999s ease-in-out 0s; } .landing-v4-root .gfnews-in::-webkit-contacts-auto-fill-button, .landing-v4-root .gfnews-in::-webkit-credentials-auto-fill-button { visibility: hidden; pointer-events: none; position: absolute; right: 0; } .landing-v4-root .gfnews-in::placeholder { color: var(--m-text-3); } .landing-v4-root .gfnews-in:focus, .landing-v4-root .gfnews-in:focus-visible { outline: none; border-color: var(--m-accent); box-shadow: 0 0 0 1px var(--m-accent); } .landing-v4-root .gfnews-row .btn { flex: none; margin: 0; } /* The submit outcome. Always in the DOM (a non-breaking space when idle) so filling it never pushes the footer's bottom row down, which would otherwise re-run the glow canvas's resize on every submit. */ .landing-v4-root .gfnews-msg { margin: -5px 0 0; font-size: var(--text-meta); line-height: var(--lh-body); color: var(--m-text-3); min-height: 1em; } .landing-v4-root .gfnews-msg[data-tone="good"] { color: var(--m-accent); } .landing-v4-root .gfnews-msg[data-tone="bad"] { color: var(--m-danger); } .landing-v4-root .gfnews-in:disabled, .landing-v4-root .gfnews-row .btn:disabled { opacity: .55; cursor: default; } .landing-v4-root .gfn { grid-row: 1; display: flex; flex-direction: column; gap: 13px; } .landing-v4-root .gfn-a { grid-column: 9 / span 2; } .landing-v4-root .gfn-b { grid-column: 11 / span 2; } /* Footer links may wrap. They were nowrap, and on a phone a Russian label * ("Политика конфиденциальности") ran past its half-width column and * made every Russian page scroll sideways. */ .landing-v4-root .gfl { align-self: flex-start; display: inline-flex; align-items: center; gap: 5px; max-width: 100%; font-size: var(--text-body); line-height: var(--lh-body); color: var(--m-text-3); text-decoration: none; transition: color .18s; } .landing-v4-root .gfl:hover { color: var(--m-text); } .landing-v4-root .gfl svg { display: block; flex: 0 0 auto; width: 13px; height: 13px; transform-origin: 14% 86%; transition: transform .34s cubic-bezier(.34,1.4,.4,1); } .landing-v4-root .gfl:hover svg { animation: landing-v4-navtickDown .62s cubic-bezier(.32,1.5,.36,1); } @keyframes landing-v4-navtickDown { 0% { transform: none; } 38% { transform: translate(-1px,-1px) scale(.94); } 72% { transform: translate(.3px,.3px) scale(1.02); } 100% { transform: none; } } .landing-v4-root .gfn-a .gfl svg { transform-origin: 14% 86%; } .landing-v4-root .gfn-a .gfl:hover svg { animation: landing-v4-navtickUp .62s cubic-bezier(.32,1.5,.36,1); } @keyframes landing-v4-navtickUp { 0% { transform: none; } 38% { transform: translate(-1px,1px) scale(.94); } 72% { transform: translate(.3px,-.3px) scale(1.02); } 100% { transform: none; } } .landing-v4-root .gfhand { grid-column: 5 / span 4; justify-self: center; display: flex; justify-content: center; } /* canvas.css:@media (max-width:620px) — once the hand renders on the * logo row it takes the middle four columns of that grid instead of * the bottom bar's slot. */ @media (max-width: 620px) { .landing-v4-root .gfmid > .gfhand { grid-column: 5 / span 4; justify-self: center; margin: 0; } } .landing-v4-root .gfhand .hfh { padding: 0; } .landing-v4-root .gfhand .hfh svg { width: 21px; height: 34px; } .landing-v4-root .gfmid { position: relative; z-index: 2; margin-top: 89px; display: grid; grid-template-columns: repeat(12,minmax(0,1fr)); column-gap: 21px; align-items: center; } .landing-v4-root .gfmark { grid-column: 1 / span 3; color: var(--m-text); display: block; } .landing-v4-root .gfmark img { display: block; width: auto; height: 21px; } .landing-v4-root .gfseals { grid-column: 9 / span 4; justify-self: end; display: flex; align-items: center; gap: 13px; } .landing-v4-root .gfbot { margin-top: 21px; padding-top: 21px; border-top: 1px solid var(--m-border); align-items: center; } .landing-v4-root .gfsoc { grid-column: 1 / span 4; display: flex; align-items: center; gap: 8px; margin-left: -8px; } .landing-v4-root .gfc { grid-column: 9 / span 4; justify-self: end; font-size: var(--text-body); line-height: var(--lh-body); color: var(--m-text-3); } @media (max-width: 900px) { .landing-v4-root .gfhand { grid-column: 1 / -1; justify-self: start; margin-top: 21px; } .landing-v4-root .gfmain { grid-column: 1 / -1; } .landing-v4-root .gfn-a { grid-column: 1 / span 6; grid-row: 2; margin-top: 55px; } .landing-v4-root .gfn-b { grid-column: 7 / span 6; grid-row: 2; margin-top: 55px; } .landing-v4-root .gfmark { grid-column: 1 / -1; } .landing-v4-root .gfsoc { grid-column: 1 / -1; } .landing-v4-root .gfc { grid-column: 1 / -1; justify-self: start; margin-top: 13px; } .landing-v4-root .gfseals { grid-column: 1 / -1; justify-self: start; margin-top: 21px; } } @media (max-width: 900px) { /* canvas.css:548-567's later, more specific tablet pass -- * appears after the block above in source order too, so (same * specificity) it wins on every overlapping property, exactly * as it does in source. */ .landing-v4-root .gfoot { padding: 89px 0 34px; } .landing-v4-root .gfhead br { display: none; } .landing-v4-root .gfmain { grid-column: 1 / span 7; grid-row: 1 / span 2; } .landing-v4-root .gfn-a { grid-column: 8 / span 2; grid-row: 1; margin-top: 0; } .landing-v4-root .gfn-b { grid-column: 10 / span 3; grid-row: 1; margin-top: 0; } .landing-v4-root .gfnews { grid-column: 8 / -1; grid-row: 2; margin-top: 34px; } .landing-v4-root .gfmark { grid-column: 1 / span 4; } .landing-v4-root .gfseals { grid-column: 9 / -1; justify-self: end; margin: 0; } .landing-v4-root .gfsoc { grid-column: 1 / span 4; grid-row: 1; margin-left: -8px; } .landing-v4-root .gfhand { grid-column: 5 / span 4; grid-row: 1; justify-self: center; margin: 0; } .landing-v4-root .gfhand .hfh svg { width: 18px; height: 30px; } .landing-v4-root .gfc { grid-column: 9 / -1; grid-row: 1; justify-self: end; margin: 0; font-size: var(--text-meta); } } @media (max-width: 620px) { .landing-v4-root .gfcta .btn { flex: 1 1 auto; justify-content: center; } .landing-v4-root .gfmain { grid-column: 1 / -1; grid-row: 1; } .landing-v4-root .gfn-a { grid-column: 1 / span 6; grid-row: 2; margin-top: 55px; display: flex; flex-direction: column; gap: 13px; } .landing-v4-root .gfn-b { grid-column: 7 / -1; grid-row: 2; margin-top: 55px; display: flex; flex-direction: column; gap: 13px; } .landing-v4-root .gfnews { grid-column: 1 / -1; grid-row: 3; margin-top: 55px; } .landing-v4-root .gfnews-row { flex-wrap: nowrap; } .landing-v4-root .gfnews-row .gfnews-in { flex: 1 1 auto; } .landing-v4-root .gfnews-row .btn { flex: 0 0 auto; } .landing-v4-root .gfcta { flex-wrap: wrap; } .landing-v4-root .gfmid { margin-top: 89px; } .landing-v4-root .gfmark { grid-column: 1 / span 4; } .landing-v4-root .gfmid > .gfhand { grid-column: 5 / span 4; justify-self: center; margin: 0; } .landing-v4-root .gfseals { grid-column: 9 / -1; justify-self: end; gap: 8px; } .landing-v4-root .gfbot { margin-top: 21px; padding-top: 21px; align-items: center; } .landing-v4-root .gfsoc { grid-column: 1 / span 6; grid-row: 1; } .landing-v4-root .gfc { grid-column: 7 / -1; grid-row: 1; justify-self: end; margin: 0; font-size: var(--text-meta); } } /* Language switcher under the footer's bottom bar: every language's own * name, the current one lit. Not in the canvas source; added for the * localized landing (/ko, /ru, /hi, /pt-br). */ .landing-v4-root .gflang { display: flex; flex-wrap: wrap; gap: 8px 21px; margin-top: 21px; font-size: var(--text-meta); } .landing-v4-root .gflang a { color: var(--m-text-3); text-decoration: none; transition: color .18s; } .landing-v4-root .gflang a:hover { color: var(--m-text); } .landing-v4-root .gflang a[aria-current] { color: var(--m-text); }