/* * Marketing landing (/) — hand-written reproduction of the Framer zay.me site. * * Every measurement in here was taken off the live site at a 1440px viewport; * the numbers and the reasoning behind the background stack are recorded in * llm/outputs/2026-08-13-zayme-landing-live-spec.md. When something looks * arbitrary (108px type, a 188%-tall shader, a 40px gutter) it is because the * original is that value — prefer changing the token over hard-coding a new one. * * The only JavaScript is the hero shader in app/javascript/marketing_shader. */ /* ---- fonts ---- */ @font-face { font-family: "ABC Camera Plain"; src: url("/fonts/CameraPlain-Regular.otf") format("opentype"); font-weight: 400; font-display: swap; } @font-face { font-family: "ABC Camera Plain"; src: url("/fonts/CameraPlain-Medium.otf") format("opentype"); font-weight: 500; font-display: swap; } /* ---- design tokens ---- */ :root { --ink: #000; --ink-22: #222; --ink-40: rgba(0, 0, 0, 0.4); --ink-65: rgba(17, 17, 17, 0.65); --grey: #858585; --grey-60: rgba(133, 133, 133, 0.6); --white: #fff; --accent: #00a2ff; /* The page-wide sunset. One gradient, anchored to the bottom centre of the * whole document — the hero sits at its blue outer edge, the footer in its * hot centre. Every warm tone on the page comes from this. */ --sunset: radial-gradient(129% 123% at 50% 100%, rgb(167, 35, 2) 17.9336%, rgb(255, 177, 76) 48.0363%, rgb(9, 157, 255) 100%); --radius-surface: 28px; --radius-card: 24px; --radius-pill: 999px; --font-display: "ABC Camera Plain", "Inter", system-ui, -apple-system, "Segoe UI", Helvetica, Arial, sans-serif; /* The sunset shows through in this narrow band down both sides — the live * surface starts at x=7 and is rounded 28px. */ --gutter: clamp(4px, 0.5vw, 7px); /* Section padding inside the white surface. */ --pad: clamp(20px, 5.6vw, 80px); /* The header lockup sits further in than the surface edge. */ --header-pad: clamp(20px, 2.8vw, 40px); } /* ---- base ---- */ *, *::before, *::after { box-sizing: border-box; } /* The sunset is declared once, on , and propagates to the canvas. It is * anchored to the bottom of the *document*, so it must scroll with the page — * a `fixed` copy on would be painted over by this one anyway. */ body.marketing { margin: 0; padding: 0; color: var(--ink); background: var(--sunset); font-family: var(--font-display); font-size: 16px; line-height: 1.4; letter-spacing: -0.02em; -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; overflow-x: hidden; } img { display: block; max-width: 100%; height: auto; } a { color: inherit; text-decoration: none; } .sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0; } /* ---- header ---- */ /* Transparent and floating over the hero — the live header has no background, * no border and no backdrop filter. */ .marketing-header { position: absolute; top: 0; left: 0; right: 0; z-index: 20; display: flex; align-items: center; justify-content: space-between; padding: 16px var(--header-pad); height: 78px; } .marketing-header__logo { display: inline-flex; align-items: center; color: var(--ink); } .marketing-header__logo img { width: 110px; height: 22px; } .marketing-header__cta { font-size: 15px; line-height: 1.5; letter-spacing: -0.02em; color: var(--ink-65); } .marketing-header__cta:hover { color: var(--ink); } /* ---- the white surface every section sits on ---- */ .marketing-surface { position: relative; margin: 0 var(--gutter) var(--gutter); border-radius: var(--radius-surface); background: var(--white); overflow: clip; } /* ---- hero ---- */ /* Exactly one viewport tall, with the phone mockup allowed to overflow and be * clipped — on the live site it runs off both the top and the bottom of the * hero rather than stretching it. */ .hero { position: relative; height: 100vh; min-height: 640px; padding: 78px var(--pad) 20px; display: flex; align-items: center; overflow: clip; isolation: isolate; } /* ShaderMount appends its canvas here and matches this box. Deliberately * 188% of the hero height and pinned to its bottom edge: the live site shows * only the lower slice of a much larger field, which is what keeps the * gradient soft and large-scale instead of busy. */ .hero__shader { position: absolute; left: 0; right: 0; bottom: 0; height: 188%; z-index: -1; pointer-events: none; /* The live hero carries a blur(10px) layer over its shader; without it the * warp bands read as hard-edged snakes rather than a diffuse wash. */ filter: blur(10px); /* Fallback for no-WebGL and prefers-reduced-motion. Approximates the Warp * field's resting state; the sunset behind supplies the warm half. */ background: radial-gradient(46% 38% at 22% 62%, rgba(76, 173, 252, 0.55) 0%, rgba(76, 173, 252, 0) 70%), radial-gradient(40% 34% at 72% 44%, rgba(255, 255, 255, 0.95) 0%, rgba(255, 255, 255, 0) 72%), radial-gradient(60% 50% at 45% 78%, rgba(255, 255, 255, 0.9) 0%, rgba(255, 255, 255, 0) 76%); } .hero__shader canvas { display: block; } .hero__inner { width: 100%; display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); align-items: center; gap: 24px; } /* The live hero copy is inset a further 120px beyond the section padding, * putting the title at x=200 in a 1425px-wide surface. */ .hero__copy { padding-left: clamp(0px, 8.4vw, 120px); } .hero__title { font-size: clamp(46px, 7.5vw, 108px); font-weight: 400; line-height: 0.85; letter-spacing: -0.07em; color: var(--ink); margin: 0 0 40px; } /* Solid blue at the baseline fading to nothing at the cap height — the top of * the word reads as pale because the page shows through, not because it is a * lighter blue. */ .hero__title-online { color: rgba(0, 162, 255, 0.5); background-image: linear-gradient(0deg, rgb(0, 162, 255) 0%, rgba(0, 0, 0, 0) 100%); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; } .hero__lead { font-size: clamp(17px, 1.4vw, 20px); line-height: 1.6; letter-spacing: -0.02em; color: var(--ink-40); margin: 0 0 36px; } .hero__mockup { justify-self: end; width: min(615px, 100%); margin-top: -22px; } .hero__mockup img { width: 100%; height: auto; } /* ---- waitlist form ---- */ .waitlist-form { display: grid; grid-template-columns: 1fr auto; align-items: center; gap: 4px; width: min(332px, 100%); padding: 4px 4px 4px 6px; background: var(--white); border-radius: var(--radius-pill); border: 1px solid rgba(0, 0, 0, 0.08); box-shadow: 0 2px 10px rgba(0, 0, 0, 0.04); position: relative; } .waitlist-form__input { border: 0; outline: 0; background: transparent; padding: 12px 14px; font-family: inherit; font-size: 16px; letter-spacing: -0.02em; color: var(--ink); min-width: 0; } .waitlist-form__input::placeholder { color: var(--grey); } .waitlist-form__submit { border: 0; background: #0d0d0d; color: var(--white); font-family: inherit; font-size: 16px; letter-spacing: -0.02em; padding: 12px 22px; border-radius: var(--radius-pill); cursor: pointer; transition: background 120ms ease; } .waitlist-form__submit:hover { background: #000; } .waitlist-form__error { grid-column: 1 / -1; margin: 6px 8px 0; font-size: 13px; color: #b3261e; } /* ---- scroll-linked motion ---- * * The Framer original animates on scroll *position*, not on a timer: freeze the * scroll mid-reveal and the element freezes with it, and scrolling back up plays * it backwards. That is what `animation-timeline: view()` does, so the whole * thing is keyframes with no JavaScript at all. * * Everything on the page is one primitive — fade in while rising — measured off * the live site: opacity 0 -> 1 with translateY(50px) -> 0 on the use-case * cards, the same with 25px on heading lines. There the reveal finishes as the * element becomes fully visible; our cards are taller than the original's, so * the equivalent percentage would hold them blank until they were nearly at the * top of the screen. The ranges below are pulled earlier to compensate. * * Guarded by @supports: browsers without scroll-driven animations skip the rules * entirely and render the finished state, which is the base style. Never put the * hidden state in the base style — an unsupported browser would keep it. */ @supports (animation-timeline: view()) { @media (prefers-reduced-motion: no-preference) { .reveal { animation: reveal-rise linear both; animation-timeline: view(); /* A percentage of `entry` is a percentage of the element's own height, so * a short heading would flick through its whole reveal in a few dozen * pixels. Give the small stuff a fixed 200px window instead; the tall * cards below get percentages, which suit them better. */ animation-range: entry 0 entry 200px; } /* Headings and copy travel half as far as the cards do. A class, not an * inline custom property — style-src carries no unsafe-inline. */ .reveal--short { --rise: 25px; } /* Each card runs off its own timeline, so they arrive one at a time rather * than the whole column going at once. */ .use-card, .feature-card { animation-range: entry 20% entry 85%; } } } /* No `to`: when it is omitted the browser builds the end keyframe from the * element's own computed style, so the finished state cannot drift out of sync * with the base rule — and "the base style is the finished state" stops being a * convention held up by a comment. */ @keyframes reveal-rise { from { opacity: 0; transform: translateY(var(--rise, 50px)); } } /* ---- shared section type ---- */ .section-title { font-size: clamp(38px, 4.7vw, 68px); font-weight: 400; line-height: 0.9; letter-spacing: -0.05em; color: var(--ink); margin: 0; } /* The live site colours the accent phrase solid blue. No italics anywhere. */ .section-title__accent { color: var(--accent); } .section-lead { font-size: clamp(17px, 1.4vw, 20px); line-height: 1.2; letter-spacing: -0.02em; color: var(--grey); margin: 24px 0 0; max-width: 22em; } /* ---- use cases ---- */ .use-cases { padding: clamp(96px, 16vw, 240px) var(--pad) 0; display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: clamp(32px, 5vw, 72px); align-items: start; } /* Pinned while the cards scroll past it. */ .use-cases__intro { position: sticky; top: 120px; padding-bottom: 120px; } .use-cases__cards { list-style: none; padding: 0; margin: 0; display: grid; gap: 90px; /* The dashed rule the numbered badges ride on. */ position: relative; } .use-cases__cards::before { content: ""; position: absolute; top: 0; bottom: 90px; left: 22px; /* centre of the 44px badge */ border-left: 1px dashed rgba(0, 0, 0, 0.18); } .use-card { position: relative; padding-left: 62px; } /* Every badge is the same dark circle. There is no active/inactive state on the * live site — a badge only *looks* grey while its card is still fading in, * because the badge sits inside the revealing card and shares its opacity. */ .use-card__number { position: absolute; left: 0; top: 44px; width: 44px; height: 44px; border-radius: var(--radius-pill); background: #262424; color: var(--white); font-size: 16px; line-height: 1.5; letter-spacing: 0; display: inline-flex; align-items: center; justify-content: center; } .use-card__art { border-radius: var(--radius-card) var(--radius-card) 0 0; overflow: hidden; aspect-ratio: 555 / 308; } .use-card__art img { width: 100%; height: 100%; object-fit: cover; } .use-card__body { border-radius: 0 0 var(--radius-card) var(--radius-card); padding: 30px 40px 44px; text-align: center; } .use-card--sand .use-card__art, .use-card--sand .use-card__body { background: rgb(233, 225, 218); } .use-card--salmon .use-card__art, .use-card--salmon .use-card__body { background: rgb(243, 175, 152); } .use-card--sky .use-card__art, .use-card--sky .use-card__body { background: rgb(219, 228, 239); } .use-card__title { font-size: 24px; font-weight: 400; line-height: 1.2; letter-spacing: -0.05em; margin: 0 0 12px; } .use-card__text { font-size: 16px; line-height: 1.4; letter-spacing: 0; color: var(--ink-40); margin: 0; } /* ---- stats ---- */ .stats { padding: clamp(96px, 14vw, 200px) var(--pad); } .stats__intro { text-align: center; font-size: 18px; line-height: 1.2; letter-spacing: -0.02em; color: var(--grey); margin: 0 auto 96px; } .stats__grid { display: grid; grid-template-columns: repeat(4, 1fr); margin: 0; } .stats__cell { text-align: center; padding: 0 20px; border-right: 1px solid rgba(0, 0, 0, 0.1); } .stats__cell:last-child { border-right: 0; } .stats__value { font-size: clamp(40px, 4.4vw, 64px); line-height: 1.2; letter-spacing: -0.04em; color: var(--ink); margin: 0; white-space: nowrap; } /* The live values read "30 +" and "< 1 min" — the suffix is spaced off. */ .stats__suffix { letter-spacing: -0.04em; margin-left: 0.12em; } .stats__label { font-size: 16px; line-height: 1.2; letter-spacing: 0; color: var(--grey); margin: 22px 0 0; } /* ---- features ---- */ .features { padding: 0 var(--pad) clamp(96px, 14vw, 200px); } .features__intro { text-align: center; margin: 0 auto clamp(56px, 8vw, 110px); } /* One line on the live site, wrapping only once the viewport forces it. */ .features .section-title { line-height: 1.2; max-width: 17em; margin: 0 auto; } .features__cards { list-style: none; padding: 0; margin: 0; display: grid; grid-template-columns: repeat(3, 1fr); gap: clamp(16px, 1.6vw, 24px); } .feature-card { border-radius: var(--radius-card); overflow: hidden; display: flex; flex-direction: column; justify-content: space-between; padding: 40px 24px; min-height: 520px; text-align: center; } .feature-card--lilac { background: linear-gradient(160deg, #d5d3e6 0%, #e9e6ee 55%, #efeef1 100%); } .feature-card--blue { background: linear-gradient(160deg, #ccd7ea 0%, #dde3ec 55%, #eceef1 100%); } .feature-card--sun { background: linear-gradient(160deg, #cdd6ea 0%, #e4e2d8 55%, #f2e6b8 100%); } .feature-card__art { margin: 0 0 40px; } .feature-card__art img { width: 100%; height: auto; border-radius: 6px; } .feature-card__title { font-size: 24px; font-weight: 400; line-height: 1.47; letter-spacing: -0.04em; color: var(--ink-22); margin: 0 0 6px; } .feature-card__text { font-size: 16px; line-height: 1.4; letter-spacing: 0; color: var(--ink-40); margin: 0 auto; max-width: 22em; } /* ---- cta ---- */ .cta { position: relative; padding: clamp(96px, 14vw, 180px) var(--pad) clamp(80px, 10vw, 140px); isolation: isolate; text-align: center; } /* The collage is not a parallax. Every portrait starts stacked in the middle of * the section at full size and flies outward along a fixed vector while * shrinking, all five sharing one scroll progress — so the copy is revealed by * the photos getting out of its way. The vectors and end scales below are the * live site's, read off its transform matrices; each is a displacement from the * centre of a 445px square, which is why they are plain pixel numbers. */ .cta__collage { position: absolute; inset: 0; z-index: -1; pointer-events: none; --k: 1; /* scales the whole arrangement down on narrower viewports */ /* The portraits animate off *this* box, not their own. Their own view * timelines would be measured from boxes the animation is busy moving. */ view-timeline-name: --cta-collage; view-timeline-axis: block; } .cta__portrait { position: absolute; left: 50%; top: 50%; width: 445px; aspect-ratio: 1 / 1; margin: -222px 0 0 -222px; border-radius: 16px; object-fit: cover; transform: translate(calc(var(--dx) * var(--k)), calc(var(--dy) * var(--k))) scale(calc(var(--ds) * var(--k))); } .cta__portrait--a { --dx: 392px; --dy: 166px; --ds: 0.4; } .cta__portrait--b { --dx: 500px; --dy: -250px; --ds: 0.5; } .cta__portrait--c { --dx: -300px; --dy: 350px; --ds: 0.5; } .cta__portrait--d { --dx: -500px; --dy: -80px; --ds: 0.3; } .cta__portrait--e { --dx: -364px; --dy: -396px; --ds: 0.4; } @supports (animation-timeline: view()) { @media (prefers-reduced-motion: no-preference) { .cta__portrait { animation: cta-scatter linear both; animation-timeline: --cta-collage; animation-range: entry 20% cover 55%; } } } /* As above, the end keyframe is implicit — it would otherwise have to restate * the scatter transform from .cta__portrait verbatim. */ @keyframes cta-scatter { from { transform: translate(0, 0) scale(1); } } @media (max-width: 1200px) { .cta__collage { --k: 0.72; } } .cta__panel { position: relative; max-width: 1130px; margin: 0 auto; } .cta__title { font-size: clamp(38px, 4.7vw, 68px); font-weight: 400; line-height: 1; letter-spacing: -0.07em; margin: 0 0 14px; color: var(--ink); } .cta__lead { font-size: 18px; line-height: 1.2; letter-spacing: -0.02em; color: var(--grey); margin: 0 auto 60px; max-width: 26em; } /* The CTA form is wider than the hero's on the live site. */ .cta .waitlist-form { margin: 0 auto; width: min(427px, 100%); } /* ---- footer ---- */ .marketing-footer { padding: clamp(56px, 8vw, 100px) var(--gutter) 40px; color: var(--grey); text-align: center; } .marketing-footer__inner { max-width: 1130px; margin: 0 auto; } .marketing-footer__follow { display: flex; justify-content: center; gap: 14px; font-size: 16px; line-height: 1.2; letter-spacing: -0.02em; margin: 0 0 44px; } .marketing-footer__follow a { color: var(--ink); } .marketing-footer__links { list-style: none; padding: 28px 0 0; margin: 0; display: flex; gap: 28px; justify-content: center; border-top: 1px solid rgba(0, 0, 0, 0.08); font-size: 12px; line-height: 1.2; letter-spacing: -0.02em; } .marketing-footer__legal { margin: 32px 0 0; font-size: 12px; line-height: 1.5; letter-spacing: 0; color: var(--grey-60); } /* ---- responsive ---- */ @media (max-width: 900px) { /* Both height and min-height have to go: the stacked hero is taller than a * viewport, and the base rule's `overflow: clip` would eat the headline. */ .hero { height: auto; min-height: auto; padding-top: 110px; padding-bottom: 60px; } .hero__inner { grid-template-columns: 1fr; gap: 40px; } .hero__copy { padding-left: 0; } .hero__mockup { justify-self: center; width: min(420px, 100%); margin-top: 0; } .use-cases { grid-template-columns: 1fr; gap: 48px; } .use-cases__intro { position: static; padding-bottom: 0; } .use-cases__cards { gap: 56px; } .features__cards { grid-template-columns: 1fr; } .feature-card { min-height: 0; } .stats__grid { grid-template-columns: repeat(2, 1fr); gap: 40px 0; } .stats__cell:nth-child(2n) { border-right: 0; } .cta__collage { display: none; } } @media (max-width: 540px) { .marketing-header { padding-left: var(--gutter); padding-right: var(--gutter); height: 64px; } .marketing-header__logo img { width: 92px; height: 18px; } .use-cases__cards::before { display: none; } .use-card { padding-left: 0; padding-top: 0; } .use-card__number { position: static; margin: 0 auto 14px; display: flex; } .use-card__body { padding: 24px 20px 32px; } .waitlist-form { grid-template-columns: 1fr; padding: 8px; border-radius: 20px; } .waitlist-form__input { padding: 14px 12px; } .waitlist-form__submit { padding: 14px; } .stats__grid { grid-template-columns: 1fr; gap: 40px 0; } .stats__cell { border-right: 0; } .marketing-footer { padding-left: 20px; padding-right: 20px; } .marketing-footer__links { flex-wrap: wrap; } } @media (prefers-reduced-motion: reduce) { .waitlist-form__submit { transition: none; } }