/* ============================================================ MathematiX — "The quiet laboratory notebook" Premium academic aesthetic. Paper + graph grid + emerald. Type: Spectral (display) · Hanken Grotesk (body) · IBM Plex Mono (chrome) ============================================================ */ /* ---------- Design tokens ---------- */ :root { /* Paper + ink */ --paper: #f6f4ec; --paper-2: #fbfaf4; --paper-3: #ffffff; --ink: #16201a; --ink-soft: #4c574f; --ink-faint: #828a82; --line: #e3dfd1; --line-soft: #ece8db; /* Brand green */ --green: #1c7c54; --green-700: #145c3d; --green-800: #103f2b; --green-300: #6fbb96; --mint: #e8f1ea; --mint-line: #cfe3d6; /* Accent secondaries (used sparingly, real STEM color coding) */ --amber: #b9892f; --plum: #7a557e; --sky: #2f6e9e; /* Grid textures */ --grid: rgba(22, 32, 26, 0.045); --grid-major: rgba(22, 32, 26, 0.075); /* Dark spotlight */ --dark: #0e1a14; --dark-2: #122318; --dark-line: rgba(255,255,255,0.10); --dark-text: #e9f1ea; --dark-soft: #9fb3a6; --glow: #3fa776; /* Form */ --radius: 18px; --radius-sm: 12px; --radius-lg: 26px; --shadow-sm: 0 1px 2px rgba(16,40,28,0.05), 0 2px 6px rgba(16,40,28,0.04); --shadow-md: 0 10px 30px -12px rgba(16,40,28,0.18), 0 2px 8px rgba(16,40,28,0.05); --shadow-lg: 0 30px 70px -30px rgba(16,40,28,0.32), 0 8px 24px -12px rgba(16,40,28,0.14); --maxw: 1200px; --ease: cubic-bezier(0.22, 1, 0.36, 1); --spring: cubic-bezier(.34, 1.4, .5, 1); --font-serif: "Spectral", Georgia, "Times New Roman", serif; --font-sans: "Hanken Grotesk", -apple-system, BlinkMacSystemFont, sans-serif; --font-mono: "IBM Plex Mono", ui-monospace, "SFMono-Regular", monospace; } /* ---------- Personal colour themes ---------- These only replace the brand/accent scale. Paper, ink, semantic class colours, and contrast stay untouched, so every palette still feels like the same MathematiX notebook. accent-boot.js sets the attribute in to avoid a flash of the default Forest palette. */ html[data-accent="ocean"] { --green: #256f92; --green-700: #185572; --green-800: #103c54; --green-300: #72acc5; --mint: #e7f1f5; --mint-line: #c9e0e9; --glow: #68b5d5; } html[data-accent="violet"] { --green: #7657a6; --green-700: #5b3e89; --green-800: #412a66; --green-300: #ae94d0; --mint: #f0ebf7; --mint-line: #ddcfed; --glow: #ad8be0; } html[data-accent="sunset"] { --green: #bd5a3d; --green-700: #91412d; --green-800: #672d21; --green-300: #dc927b; --mint: #f8ebe5; --mint-line: #efd3c7; --glow: #ed8d6f; } /* ---------- Reset / base ---------- */ *, *::before, *::after { box-sizing: border-box; } * { margin: 0; padding: 0; } html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; } body { font-family: var(--font-sans); color: var(--ink); background-color: var(--paper); background-image: linear-gradient(var(--grid) 1px, transparent 1px), linear-gradient(90deg, var(--grid) 1px, transparent 1px), linear-gradient(var(--grid-major) 1px, transparent 1px), linear-gradient(90deg, var(--grid-major) 1px, transparent 1px); background-size: 30px 30px, 30px 30px, 150px 150px, 150px 150px; line-height: 1.6; font-size: 17px; letter-spacing: -0.005em; -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; overflow-x: hidden; } img, svg { display: block; max-width: 100%; } a { color: inherit; text-decoration: none; } button { font-family: inherit; cursor: pointer; border: none; background: none; } ul { list-style: none; } ::selection { background: var(--green); color: #fff; } /* ---------- Layout primitives ---------- */ .wrap { width: 100%; max-width: var(--maxw); margin: 0 auto; padding: 0 28px; } .section { padding: 96px 0; position: relative; } .section--tight { padding: 72px 0; } .eyebrow { font-family: var(--font-mono); font-size: 12px; letter-spacing: 0.16em; text-transform: uppercase; color: var(--green-700); display: inline-flex; align-items: center; gap: 9px; font-weight: 500; } .eyebrow::before { content: ""; width: 22px; height: 1px; background: var(--green-300); } .eyebrow--center { justify-content: center; } .eyebrow--center::before { display: none; } h1, h2, h3 { font-family: var(--font-serif); font-weight: 500; letter-spacing: -0.02em; line-height: 1.05; } .h-display { font-size: clamp(2.6rem, 5.2vw, 4.1rem); font-weight: 400; line-height: 1.02; letter-spacing: -0.03em; } .section-title { font-size: clamp(2rem, 3.6vw, 3rem); font-weight: 400; letter-spacing: -0.025em; line-height: 1.06; max-width: 18ch; } .section-title--center { margin: 0 auto; text-align: center; } .section-lead { color: var(--ink-soft); font-size: 1.12rem; max-width: 56ch; margin-top: 18px; } .section-lead--center { margin-left: auto; margin-right: auto; text-align: center; } .section-head { margin-bottom: 56px; } em.in { font-style: italic; color: var(--green-700); } /* ---------- Buttons ---------- */ .btn { display: inline-flex; align-items: center; justify-content: center; gap: 9px; font-family: var(--font-sans); font-weight: 600; font-size: 0.96rem; letter-spacing: -0.01em; padding: 13px 22px; border-radius: 12px; transition: transform .25s var(--ease), box-shadow .25s var(--ease), background .25s var(--ease), color .25s var(--ease); white-space: nowrap; } .btn svg { width: 17px; height: 17px; } .btn--primary { background: var(--green); color: #fff; box-shadow: 0 1px 0 rgba(255,255,255,0.15) inset, var(--shadow-sm); } .btn--primary:hover { background: var(--green); transform: translateY(-2px); box-shadow: var(--shadow-md); } .btn--ghost { background: transparent; color: var(--ink); border: 1px solid var(--line); } .btn--ghost:hover { border-color: var(--line); background: transparent; transform: translateY(-2px); } .btn--light { background: var(--paper-3); color: var(--ink); border: 1px solid var(--line); box-shadow: var(--shadow-sm); } .btn--light:hover { transform: translateY(-2px); box-shadow: var(--shadow-md); border-color: var(--line); } .btn--lg { padding: 16px 28px; font-size: 1.02rem; } .btn--on-dark { background: var(--glow); color: #062014; } .btn--on-dark:hover { background: var(--glow); transform: translateY(-2px); } .btn--block { width: 100%; } /* Shared CTA buttons */ .btn--access { position: relative; overflow: hidden; isolation: isolate; color: #fff; background: linear-gradient( 105deg, #287e68 0%, #319b7c 30%, #347f91 55%, #319b7c 78%, #287e68 100% ); background-size: 220% 100%; border: 1px solid rgba(255,255,255,0.12); box-shadow: 0 1px 0 rgba(255,255,255,0.16) inset, 0 7px 18px rgba(20, 104, 87, 0.16); animation: access-color-flow 7s ease-in-out infinite alternate; } .btn--access:hover, .btn--access:focus-visible { background: linear-gradient( 105deg, #287e68 0%, #319b7c 30%, #347f91 55%, #319b7c 78%, #287e68 100% ); background-size: 220% 100%; animation: access-color-flow 7s ease-in-out infinite alternate; transform: translateY(-2px); box-shadow: 0 1px 0 rgba(255,255,255,0.2) inset, 0 10px 22px rgba(20, 104, 87, 0.22); } .btn--access svg, .btn--lemma svg, .btn--beta svg { transition: transform .25s var(--ease); } .btn--access:hover svg, .btn--lemma:hover svg, .btn--beta:hover svg, .btn--access:focus-visible svg, .btn--lemma:focus-visible svg, .btn--beta:focus-visible svg { transform: translateX(3px); } /* Lemma AI CTA: darker, subtler glow for the dark section */ .btn--lemma { position: relative; overflow: hidden; isolation: isolate; color: #eff8f2; background: radial-gradient(circle at 18% 18%, rgba(255,255,255,0.12), rgba(255,255,255,0) 30%), linear-gradient(135deg, #1c6a51 0%, #2f8a72 46%, #236d85 100%); border: 1px solid rgba(127,220,171,0.28); box-shadow: 0 1px 0 rgba(255,255,255,0.12) inset, 0 16px 34px -24px rgba(9,31,22,0.72); } .btn--lemma:hover, .btn--lemma:focus-visible { color: #eff8f2; border-color: rgba(127,220,171,0.28); transform: translateY(-3px) scale(1.01); box-shadow: 0 1px 0 rgba(255,255,255,0.14) inset, 0 20px 44px -24px rgba(9,31,22,0.8); } /* Beta card CTA: paper-button polish with a soft mint fill */ .btn--beta { position: relative; overflow: hidden; isolation: isolate; color: var(--green-800); background: linear-gradient(180deg, #fffdf7 0%, #f4fff7 100%); border: 1px solid var(--mint-line); box-shadow: 0 1px 0 rgba(255,255,255,0.9) inset, 0 12px 28px -20px rgba(16,63,43,0.34); } .btn--beta:hover, .btn--beta:focus-visible { color: var(--green-800); border-color: var(--mint-line); transform: translateY(-2px); box-shadow: 0 1px 0 rgba(255,255,255,0.95) inset, 0 16px 34px -20px rgba(16,63,43,0.42); } @keyframes access-color-flow { from { background-position: 0% 50%; } to { background-position: 100% 50%; } } @media (prefers-reduced-motion: reduce) { .btn--access, .btn--lemma, .btn--beta, .box.is-attached::after { animation: none; transition: none; } } .textlink { font-weight: 600; color: var(--green-700); display: inline-flex; align-items: center; gap: 6px; transition: gap .25s var(--ease); } .textlink svg { width: 15px; height: 15px; transition: transform .25s var(--ease); } .textlink:hover { gap: 10px; } .textlink:hover svg { transform: translateX(2px); } /* ---------- Top nav ---------- */ .nav { position: sticky; top: 0; z-index: 100; background: rgba(246,244,236,0.78); backdrop-filter: saturate(1.4) blur(14px); -webkit-backdrop-filter: saturate(1.4) blur(14px); border-bottom: 1px solid transparent; transition: border-color .3s ease, background .3s ease; } .nav.is-stuck { border-bottom-color: var(--line); background: rgba(246,244,236,0.92); } .nav__inner { display: flex; align-items: center; gap: 28px; height: 72px; } .brand { display: inline-flex; align-items: center; gap: 11px; font-family: var(--font-serif); font-size: 1.28rem; font-weight: 500; letter-spacing: -0.02em; } .brand__mark { width: 32px; height: 32px; border-radius: 9px; background: transparent; display: grid; place-items: center; overflow: hidden; flex: none; } .brand__mark img { width: 100%; height: 100%; object-fit: contain; display: block; } .brand b { font-weight: 600; } .brand .x { color: var(--green); font-style: italic; } .nav .brand { gap: 0; } .nav .brand__mark { display: none; } .nav__links { display: flex; align-items: center; gap: 4px; margin-left: 8px; } .nav__links a { font-size: 0.95rem; font-weight: 500; color: var(--ink-soft); padding: 8px 13px; border-radius: 9px; transition: color .2s ease, background .2s ease; } .nav__links a:hover { color: var(--ink); background: var(--paper-2); } .nav__links a.active { color: var(--green-700); } .nav__right { margin-left: auto; display: flex; align-items: center; gap: 12px; } .nav__login { font-weight: 600; font-size: 0.95rem; color: var(--ink); padding: 8px 6px; } .nav__login:hover { color: var(--green-700); } .nav__toggle { display: none; width: 42px; height: 42px; border-radius: 10px; border: 1px solid var(--line); } .nav__toggle span { display: block; width: 18px; height: 1.5px; background: var(--ink); margin: 4px auto; transition: .3s var(--ease); } /* ---------- Hero ---------- */ .hero { padding: 64px 0 88px; position: relative; } .hero__grid { display: grid; grid-template-columns: 0.95fr 1.05fr; gap: 48px; align-items: center; } .hero__copy { max-width: 560px; } .hero h1 { margin: 22px 0 0; color: #0d1711; } .hero-title__lead { display: block; color: #0d1711; font-size: clamp(3.05rem, 5.8vw, 4.6rem); font-weight: 500; text-shadow: 0 1px 0 rgba(255,255,255,0.5); } .hero-title__phrase { display: block; min-height: 1.02em; font-size: clamp(2.9rem, 4.4vw, 3.75rem); font-weight: 500; letter-spacing: -0.04em; line-height: 1.02; white-space: nowrap; color: #124d34; font-style: italic; text-shadow: 0 1px 0 rgba(255,255,255,0.45), 0 0 10px rgba(28,124,84,0.08); background-image: linear-gradient(90deg, #124d34, #1c7c54, #6fbb96, #145c3d, #124d34); /* 200%, paired with the 0%→200% sweep below — see hero-title-wave */ background-size: 200% 100%; background-position: 0% 50%; } .hero-title__phrase { animation: hero-title-wave 7s linear infinite; } @supports not ((-webkit-background-clip: text) or (background-clip: text)) { .hero-title__phrase { animation: none; } } @supports ((-webkit-background-clip: text) or (background-clip: text)) { .hero-title__phrase { color: transparent; -webkit-text-fill-color: transparent; -webkit-background-clip: text; background-clip: text; } } .hero-title__phrase::after { content: ""; display: inline-block; width: 2px; height: 0.82em; margin-left: 5px; background: var(--green-800); animation: hero-title-caret 0.9s steps(1) infinite; vertical-align: -0.03em; } @keyframes hero-title-caret { 50% { opacity: 0; } } /* A percentage background-position is NOT a percentage of the image — it resolves to `pct × (elementWidth − imageWidth)`. With a 2× background-size that makes each 1% worth −1% of the element, so sweeping 0%→200% shifts the gradient by exactly one tile width and the loop closes on itself. The old 180% size sweeping 0%→180% shifted only 1.44 tiles, so every 7s the gradient snapped back mid-colour — the jump this fixes. If the size changes, the sweep has to change with it: for a size of k, sweep to k/(k−1). */ @keyframes hero-title-wave { from { background-position: 0% 50%; } to { background-position: 200% 50%; } } .hero__lead { color: var(--ink-soft); font-size: 1.14rem; margin-top: 20px; max-width: 42ch; } .signup { display: flex; gap: 10px; margin-top: 30px; max-width: 430px; } .signup__field { flex: 1; display: flex; align-items: center; gap: 10px; background: var(--paper-3); border: 1px solid var(--line); border-radius: 12px; padding: 0 14px; transition: border-color .2s ease, box-shadow .2s ease; } .signup__field:focus-within { border-color: var(--green-300); box-shadow: 0 0 0 4px var(--mint); } .signup__field svg { width: 17px; height: 17px; color: var(--ink-faint); flex: none; } .signup input { border: none; outline: none; background: none; font-family: var(--font-sans); font-size: 0.97rem; color: var(--ink); width: 100%; padding: 13px 0; } .signup input::placeholder { color: var(--ink-faint); } .signup__note { font-size: 0.83rem; color: var(--ink-faint); margin-top: 12px; font-family: var(--font-mono); letter-spacing: 0.01em; } .benefits { display: flex; flex-wrap: wrap; gap: 8px 22px; margin-top: 30px; } .benefits li { display: inline-flex; align-items: center; gap: 9px; font-size: 0.92rem; color: var(--ink-soft); font-weight: 500; } .benefits li svg { width: 16px; height: 16px; color: var(--green); flex: none; } /* ---------- Hero notebook preview ---------- */ .preview { position: relative; background: var(--paper-3); border: 1px solid var(--line); border-radius: var(--radius-lg); box-shadow: var(--shadow-lg); overflow: hidden; } .preview__bar { display: flex; align-items: center; gap: 14px; padding: 13px 18px; border-bottom: 1px solid var(--line-soft); background: linear-gradient(var(--paper-2), var(--paper-3)); } .dots { display: flex; gap: 7px; } .dots i { width: 11px; height: 11px; border-radius: 50%; background: var(--line); display: block; } .dots i:nth-child(1){ background:#e0c4a0; } .dots i:nth-child(2){ background:#d9d6c4; } .dots i:nth-child(3){ background: var(--green-300); } .preview__tools { display: flex; align-items: center; gap: 4px; margin-left: 6px; } .tool { width: 30px; height: 30px; border-radius: 8px; display: grid; place-items: center; color: var(--ink-soft); border: 1px solid transparent; } .tool svg { width: 16px; height: 16px; } .tool.is-active { background: var(--mint); color: var(--green-700); border-color: var(--mint-line); } .preview__title { margin-left: auto; font-family: var(--font-mono); font-size: 12px; color: var(--ink-faint); display: flex; align-items: center; gap: 7px; } .preview__title b { color: var(--ink-soft); font-weight: 500; } .canvas { position: relative; padding: 26px; min-height: 568px; background-color: var(--paper-2); background-image: linear-gradient(var(--grid) 1px, transparent 1px), linear-gradient(90deg, var(--grid) 1px, transparent 1px); background-size: 24px 24px; } /* canvas cards */ .card { position: absolute; background: var(--paper-3); border: 1px solid var(--line); border-radius: 14px; box-shadow: var(--shadow-md); padding: 15px 16px; } .card__tag { font-family: var(--font-mono); font-size: 10.5px; letter-spacing: 0.08em; text-transform: uppercase; display: inline-flex; align-items: center; gap: 6px; color: var(--ink-faint); margin-bottom: 9px; } .card__tag i { width: 7px; height: 7px; border-radius: 2px; display: block; } .card__tag.t-note i { background: var(--sky); } .card__tag.t-math i { background: var(--green); } .card__tag.t-graph i { background: var(--amber); } .card__tag.t-chem i { background: var(--plum); } .card--note { top: 24px; left: 24px; width: 250px; } .card--math { top: 206px; left: 24px; width: 250px; } .card--chem { top: 402px; left: 24px; width: 238px; z-index: 2; } .card--graph { top: 24px; right: 24px; width: 240px; } .card--note h4 { font-family: var(--font-serif); font-size: 1.02rem; font-weight: 600; margin-bottom: 7px; } .card--note p { font-size: 0.86rem; color: var(--ink-soft); line-height: 1.5; } .card--note .hl { background: var(--mint); border-radius: 3px; padding: 0 3px; color: var(--green-800); } /* equations */ .eq { font-family: var(--font-serif); font-style: italic; font-size: 1.05rem; color: var(--ink); display: flex; align-items: center; flex-wrap: wrap; gap: 4px; line-height: 1.9; } .eq .op { font-style: normal; color: var(--ink-soft); padding: 0 2px; } .eq sup { font-size: 0.66em; } .eq sub { font-size: 0.66em; } .frac { display: inline-flex; flex-direction: column; text-align: center; vertical-align: middle; margin: 0 3px; } .frac > span { padding: 0 6px; } .frac .den { border-top: 1.4px solid var(--ink); } .eq--result { color: var(--green-700); } .eq-note { font-family: var(--font-mono); font-size: 11px; color: var(--ink-faint); margin-top: 8px; } /* mini graph */ .graph__svg { width: 100%; height: 100px; border-radius: 8px; } .graph__cap { display: flex; flex-direction: column; gap: 1px; margin-top: 8px; } .graph__cap span { font-family: var(--font-mono); font-size: 11px; color: var(--ink-faint); white-space: nowrap; } .graph__cap b { font-size: 0.84rem; color: var(--ink-soft); font-weight: 500; font-family: var(--font-sans); } /* AI panel */ .ai-panel { position: absolute; top: 248px; right: 24px; left: auto; transform: none; width: min(304px, calc(100% - 320px)); background: var(--paper-3); border: 1px solid var(--line); border-radius: 16px; box-shadow: var(--shadow-lg); overflow: hidden; z-index: 5; } .ai-panel__head { display: flex; align-items: center; gap: 9px; padding: 11px 14px; border-bottom: 1px solid var(--line-soft); } .ai-orb { width: 24px; height: 24px; border-radius: 7px; flex: none; background: radial-gradient(circle at 30% 30%, var(--green-300), var(--green) 75%); box-shadow: 0 0 0 3px var(--mint); display: grid; place-items: center; } .ai-orb svg { width: 13px; height: 13px; color: #fff; } .ai-panel__head b { font-size: 0.92rem; font-weight: 600; } .ai-panel__head .badge { margin-left: auto; font-family: var(--font-mono); font-size: 10px; color: var(--green-700); background: var(--mint); padding: 3px 8px; border-radius: 20px; letter-spacing: 0.05em; } .ai-panel__body { padding: 13px 14px; display: flex; flex-direction: column; gap: 10px; } .msg { font-size: 0.86rem; line-height: 1.5; max-width: 88%; padding: 9px 12px; border-radius: 13px; } .msg--user { align-self: flex-end; background: var(--green); color: #fff; border-bottom-right-radius: 4px; } .msg--ai { align-self: flex-start; background: var(--mint); color: var(--green-800); border-bottom-left-radius: 4px; } .msg--ai b { font-weight: 600; } .ai-panel__input { display: flex; align-items: center; gap: 8px; padding: 10px 12px; border-top: 1px solid var(--line-soft); background: var(--paper-2); } .ai-panel__input span { flex: 1; font-size: 0.83rem; color: var(--ink-faint); } .ai-panel__send { width: 28px; height: 28px; border-radius: 8px; background: var(--green); display: grid; place-items: center; } .ai-panel__send svg { width: 14px; height: 14px; color: #fff; } .hero__strip { margin-top: 42px; padding-top: 24px; border-top: 1px solid var(--line); display: flex; align-items: center; gap: 18px 28px; flex-wrap: wrap; } .hero__strip span { font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--ink-faint); } .hero__strip ul { display: flex; gap: 28px; flex-wrap: wrap; } .hero__strip li { font-family: var(--font-serif); font-size: 1.05rem; color: var(--ink-soft); font-weight: 500; } /* ---------- How it works ---------- */ .steps { display: grid; grid-template-columns: repeat(3, 1fr); gap: clamp(18px, 2vw, 24px); align-items: stretch; } .step { background: linear-gradient(155deg, color-mix(in srgb, var(--paper-2) 96%, #fff) 0%, var(--paper-2) 72%); border: 1px solid var(--line); border-radius: 20px; padding: 26px 26px 0; position: relative; overflow: hidden; isolation: isolate; display: flex; flex-direction: column; box-shadow: 0 12px 34px -30px rgba(20, 52, 36, .48), 0 1px 0 rgba(255,255,255,.8) inset; transition: transform .3s var(--ease), box-shadow .3s var(--ease), border-color .3s var(--ease); } .step:hover, .step:focus-within { transform: translateY(-4px); box-shadow: 0 22px 54px -32px rgba(20, 64, 42, .42); border-color: var(--green-300); } .step__n { font-family: var(--font-mono); font-size: 12px; color: var(--green-700); letter-spacing: 0.1em; } .step__replay { position: absolute; top: 19px; right: 20px; z-index: 3; height: 30px; padding: 0 10px; border: 1px solid var(--line); border-radius: 999px; background: color-mix(in srgb, var(--paper-2) 90%, transparent); color: var(--ink-faint); display: inline-flex; align-items: center; gap: 6px; font-family: var(--font-mono); font-size: 9.5px; letter-spacing: .06em; text-transform: uppercase; backdrop-filter: blur(8px); transition: color .2s var(--ease), border-color .2s var(--ease), background .2s var(--ease), transform .2s var(--ease); } .step__replay svg { width: 13px; height: 13px; } .step__replay:hover, .step__replay:focus-visible { color: var(--green-700); border-color: var(--mint-line); background: var(--mint); transform: translateY(-1px); } .step__replay:focus-visible { outline: 2px solid var(--green-300); outline-offset: 2px; } .step h3 { font-size: 1.32rem; margin: 14px 0 8px; } .step p { color: var(--ink-soft); font-size: 0.96rem; margin-bottom: 22px; } .mini-chip { display: inline-flex; align-items: center; gap: 6px; font-family: var(--font-mono); font-size: 10.5px; background: var(--mint); color: var(--green-800); border: 1px solid var(--mint-line); border-radius: 20px; padding: 4px 10px; margin: 0 5px 5px 0; } /* ---------- How it works: native product stories ---------- These use the same recipe as the hero and phone: real DOM, a logical app viewport scaled as one unit, and a pausable JS story. No recorded media. */ .step__shot { position: relative; /* full-bleed to the card's side and bottom edges; the auto top margin bottom-aligns the three shots when the copy above them runs to different lengths, and .step p's margin keeps a gap when it doesn't */ margin: auto -26px 0; aspect-ratio: 444 / 310; background: var(--paper-3); border-top: 1px solid var(--line-soft); overflow: hidden; box-shadow: 0 -14px 32px -34px rgba(20, 52, 36, .72); } .step__shot::after { content: ""; position: absolute; inset: 0; z-index: 1; pointer-events: none; box-shadow: inset 0 0 0 1px rgba(255,255,255,.34); } .step-demo__stage { --step-scale: 1; position: absolute; left: 0; top: 0; width: 444px; height: 310px; transform: scale(var(--step-scale)); transform-origin: left top; } .sd-window { width: 444px; height: 310px; position: relative; overflow: hidden; color: var(--ink); background: var(--paper-3); font-family: var(--font-sans); font-size: 11px; line-height: 1.35; user-select: none; isolation: isolate; -webkit-font-smoothing: antialiased; text-rendering: geometricPrecision; } .sd-window *, .sd-window *::before, .sd-window *::after { box-sizing: border-box; } .sd-window button { font: inherit; border: 0; color: inherit; } .sd-side { position: absolute; inset: 0 auto 0 0; width: 242px; z-index: 2; background: rgba(251,250,244,.98); border-right: 1px solid var(--line); transition: width .58s var(--ease), opacity .36s var(--ease), border-color .36s var(--ease); } .sd-tabs { height: 42px; display: grid; grid-template-columns: 1fr 1fr; gap: 4px; padding: 7px; border-bottom: 1px solid var(--line-soft); } .sd-tab { display: flex; align-items: center; justify-content: center; gap: 5px; border-radius: 7px; color: var(--ink-faint); font-family: var(--font-mono); font-size: 8.5px; letter-spacing: .13em; text-transform: uppercase; transition: color .25s var(--ease), background .25s var(--ease); } .sd-tab b { font-size: 12px; font-weight: 400; } .sd-tab.is-on { color: var(--green-700); background: var(--mint); } .sd-library-body { padding: 11px 12px; transition: opacity .24s var(--ease), transform .32s var(--ease); } .sd-search { height: 30px; padding: 0 8px; display: flex; align-items: center; gap: 6px; color: var(--ink-faint); border: 1px solid var(--line); border-radius: 8px; background: var(--paper-3); } .sd-search svg { width: 14px; height: 14px; flex: none; } .sd-search span { flex: 1; white-space: nowrap; overflow: hidden; } .sd-search kbd { border: 1px solid var(--line); border-radius: 5px; padding: 2px 5px; font: 7px var(--font-mono); } .sd-course { display: flex; align-items: center; gap: 6px; padding: 16px 7px 8px; } .sd-course i { width: 8px; height: 8px; border-radius: 50%; background: var(--green); } .sd-course strong { font-size: 11px; white-space: nowrap; } .sd-course small { margin-left: auto; font: 7px var(--font-mono); letter-spacing: .08em; color: var(--ink-faint); } .sd-file, .sd-folder { position: relative; height: 32px; display: flex; align-items: center; gap: 7px; margin: 1px 0; padding: 0 8px 0 28px; border-radius: 7px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; font-size: 10px; } .sd-file > span { color: var(--ink-faint); font-size: 13px; } .sd-folder { padding-left: 12px; font-size: 10.5px; } .sd-file--new { opacity: 0; transform: translateY(-6px); color: var(--green-700); background: var(--mint); font-weight: 600; } .sd-file--new::before { content: ""; position: absolute; left: 2px; top: 6px; bottom: 6px; width: 3px; border-radius: 3px; background: var(--green); } .sd-file--new.is-on { opacity: 1; transform: none; transition: opacity .28s var(--ease), transform .38s var(--spring); } .sd-drop { position: absolute; left: 42px; top: 68px; z-index: 4; width: 158px; height: 52px; display: grid; grid-template-columns: 27px 1fr; grid-template-rows: 1fr 1fr; align-items: center; padding: 6px 8px; border: 1px solid var(--green-300); border-radius: 9px; background: rgba(251,250,244,.96); box-shadow: var(--shadow-md); opacity: 0; transform: translateY(-10px) scale(.96); transition: opacity .25s var(--ease), transform .38s var(--spring); } .sd-drop.is-on { opacity: 1; transform: none; } .sd-drop b { grid-row: 1 / 3; width: 23px; height: 29px; display: grid; place-items: center; border-radius: 4px; color: #b44b45; background: #f8e8e4; font: 7px var(--font-mono); } .sd-drop span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 8.5px; } .sd-drop i { color: var(--green-700); font: normal 7px var(--font-mono); } .sd-capture-agent { position: absolute; left: 0; right: 0; top: 42px; bottom: 0; padding: 10px 12px; background: var(--paper-3); opacity: 0; transform: translateX(16px); pointer-events: none; transition: opacity .28s var(--ease), transform .4s var(--ease); } .sd-capture.is-agent .sd-library-body { opacity: 0; transform: translateX(-14px); } .sd-capture.is-agent .sd-capture-agent { opacity: 1; transform: none; } .sd-capture.is-agent .sd-side { width: 330px; } .sd-capture.is-canvas .sd-side { width: 0; opacity: 0; border-right-color: transparent; } .sd-capture.is-canvas .sd-work { left: 0; } .sd-agent-head { height: 29px; display: flex; align-items: center; gap: 7px; } .sd-agent-head > span { font-family: var(--font-serif); font-size: 14px; font-weight: 600; flex: 1; white-space: nowrap; } .sd-agent-head > span::first-letter { color: var(--green); } .sd-agent-head em { color: var(--green); font-weight: 500; } .sd-agent-head small { color: var(--green-700); background: var(--mint); border: 1px solid var(--mint-line); border-radius: 99px; padding: 3px 6px; font: 6.5px var(--font-mono); letter-spacing: .12em; } .sd-agent-head > b { color: var(--ink-faint); font-size: 11px; font-weight: 400; } .sd-context { min-height: 27px; display: flex; align-items: center; gap: 5px; color: var(--ink-faint); font: 7px var(--font-mono); } .sd-context > span { flex: 1; white-space: nowrap; } .sd-context > i { position: relative; width: 18px; height: 10px; border-radius: 99px; background: var(--green); } .sd-context > i::after { content: ""; position: absolute; width: 7px; height: 7px; border-radius: 50%; top: 1.5px; right: 1.5px; background: #fff; } .sd-context > b { color: var(--green-700); font-size: 6.5px; font-weight: 500; text-transform: uppercase; } .sd-context > em { color: var(--green-700); font-size: 6.5px; font-style: normal; text-transform: uppercase; white-space: nowrap; } .sd-file-chip { display: inline-flex; align-items: center; gap: 5px; height: 24px; max-width: 184px; padding: 0 8px; border: 1px solid var(--line); border-radius: 99px; font: 7.5px var(--font-mono); white-space: nowrap; } .sd-file-chip > span { color: var(--green-700); font-weight: 600; } .sd-file-chip > b { color: var(--ink-faint); margin-left: auto; } .sd-agent-status { margin-top: 11px; display: flex; align-items: center; gap: 6px; color: var(--ink-faint); font: 7.5px var(--font-mono); opacity: 0; } .sd-agent-status.is-on { opacity: 1; } .sd-agent-status i, .sd-ai-status i, .sd-build-status i { width: 8px; height: 8px; border: 1.5px solid var(--green-300); border-right-color: var(--green); border-radius: 50%; animation: sd-spin .8s linear infinite; } .sd-capture-composer, .sd-ask-composer { position: absolute; left: 7px; right: 7px; bottom: 8px; min-height: 72px; padding: 10px 9px 7px; background: var(--paper-3); border: 1px solid var(--green-300); border-radius: 9px; box-shadow: 0 4px 18px rgba(23,78,52,.07); } .sd-capture-composer { left: 12px; right: 12px; bottom: 10px; } .sd-capture-composer > span, .sd-ask-composer > span { display: block; min-height: 29px; color: var(--ink-soft); font-size: 8.5px; } .sd-capture-composer > i, .sd-ask-composer > i { display: inline-block; width: 1px; height: 10px; background: var(--green); animation: sd-caret .75s steps(1) infinite; vertical-align: top; } .sd-capture-composer > div, .sd-ask-composer > div { display: flex; align-items: center; gap: 6px; height: 23px; } .sd-capture-composer small, .sd-ask-composer small { border: 1px solid var(--line); border-radius: 5px; padding: 3px 6px; color: var(--ink-soft); font-size: 6.5px; } .sd-capture-composer em, .sd-ask-composer em { margin-left: auto; padding: 3px 6px; color: var(--green-700); background: var(--mint); border-radius: 99px; font: normal 6.5px var(--font-mono); } .sd-capture-composer button, .sd-ask-composer button { width: 21px; height: 21px; border-radius: 7px; color: white; background: var(--green); font-size: 13px; line-height: 1; } .sd-capture-composer button.is-press, .sd-ask-composer button.is-press { transform: scale(.9); filter: brightness(1.14); } .sd-work { position: absolute; inset: 0 0 0 242px; transition: left .58s var(--ease); } .sd-capture.is-agent .sd-work { left: 330px; } .sd-crumb { height: 42px; display: flex; align-items: center; gap: 7px; padding: 0 12px; border-bottom: 1px solid var(--line-soft); font: 8.5px var(--font-mono); white-space: nowrap; overflow: hidden; } .sd-crumb i { width: 7px; height: 7px; border-radius: 50%; background: var(--green); flex: none; } .sd-crumb span { color: var(--green-700); } .sd-crumb b { color: var(--line); font-weight: 400; } .sd-crumb strong { overflow: hidden; text-overflow: ellipsis; font-weight: 500; } .sd-canvas, .sd-ask-canvas { background-color: var(--paper-2); background-image: linear-gradient(var(--grid) 1px, transparent 1px), linear-gradient(90deg, var(--grid) 1px, transparent 1px); background-size: 24px 24px; } .sd-work > .sd-canvas { position: absolute; inset: 42px 0 0; } .sd-note { position: absolute; padding: 10px 12px; border: 1px solid var(--line); border-radius: 10px; background: rgba(255,254,250,.98); box-shadow: 0 4px 10px rgba(34,48,40,.11); } .sd-capture [data-capture-box] { opacity: 0; transform: translateY(10px) scale(.96); } .sd-capture [data-capture-box].is-on { opacity: 1; transform: none; transition: opacity .3s var(--ease), transform .48s var(--spring); } .sd-note--title { left: 38px; top: 30px; width: 210px; } .sd-note--title strong { display: block; font: 600 17px var(--font-serif); } .sd-note--title span { color: var(--ink-faint); font: 8.5px var(--font-mono); } .sd-note--ideas { left: 38px; top: 88px; width: 184px; } .sd-note--ideas strong { display: block; margin-bottom: 7px; font-size: 9px; } .sd-note--ideas span { font-size: 8.3px; line-height: 1.55; } .sd-note--eq { left: 272px; top: 70px; padding: 8px 13px; border-color: var(--mint-line); box-shadow: 0 0 0 2px rgba(116,201,164,.12), var(--shadow-sm); } .sd-note--eq span { font: italic 16px var(--font-serif); } .sd-note--eq2 { left: 252px; top: 142px; } .sd-build-status { position: absolute; right: 9px; top: 9px; z-index: 3; display: flex; align-items: center; gap: 6px; padding: 5px 8px; border: 1px solid var(--mint-line); border-radius: 99px; color: var(--green-700); background: rgba(247,251,247,.94); font: 7px var(--font-mono); opacity: 0; transform: translateY(-5px); } .sd-build-status.is-on { opacity: 1; transform: none; transition: opacity .25s var(--ease), transform .35s var(--ease); } .sd-build-status.is-done i { animation: none; border: 0; background: var(--green); position: relative; } .sd-build-status.is-done i::after { content: "✓"; position: absolute; inset: -1px 0 0; color: white; font: 7px var(--font-sans); text-align: center; } /* Visual canvas story */ .sd-toolrow { height: 38px; padding: 0 14px; display: flex; align-items: center; justify-content: center; gap: 6px; border-bottom: 1px solid var(--line-soft); } .sd-toolrow span { min-width: 44px; height: 25px; display: grid; place-items: center; border: 1px solid transparent; border-radius: 7px; color: var(--ink-soft); font: 8px var(--font-mono); transition: .22s var(--ease); } .sd-toolrow span.is-on { color: var(--green-700); background: var(--mint); border-color: var(--mint-line); transform: translateY(-1px); } .sd-canvas-demo > .sd-crumb { height: 42px; } .sd-canvas-demo > .sd-canvas { position: absolute; inset: 80px 0 0; } .sd-v-title { left: 30px; top: 18px; padding: 9px 12px; } .sd-v-title strong { font: 15px var(--font-serif); } .sd-v-equation { left: 30px; top: 58px; padding: 8px 11px; } .sd-v-equation span { font: 13px var(--font-serif); } .sd-v-equation sup, .sd-graph-controls sup { font-size: .62em; } .sd-graph-card, .sd-table-card { position: absolute; overflow: hidden; border: 1px solid var(--line); border-radius: 10px; background: var(--paper-3); box-shadow: 0 5px 14px rgba(34,48,40,.12); } .sd-graph-card { left: 30px; top: 100px; width: 204px; height: 128px; opacity: 0; transform: translateY(10px) scale(.96); } .sd-graph-card.is-on { opacity: 1; transform: none; transition: opacity .3s var(--ease), transform .5s var(--spring); } .sd-graph-controls { height: 32px; display: flex; align-items: center; gap: 5px; padding: 0 7px; border-bottom: 1px solid var(--line); font-size: 7px; color: var(--ink-faint); } .sd-graph-controls b, .sd-graph-controls em { height: 22px; display: grid; place-items: center; padding: 0 8px; border: 1px solid var(--line); border-radius: 5px; color: var(--ink); background: var(--paper-3); font: 8px var(--font-serif); } .sd-graph-card svg { width: 100%; height: 96px; color: rgba(83,99,89,.17); } .sd-graph-card .sd-axis { fill: none; stroke: rgba(45,62,51,.34); stroke-width: 1; } .sd-graph-card .sd-curve { fill: none; stroke: var(--green); stroke-width: 1.8; stroke-dasharray: 245; stroke-dashoffset: 245; } .sd-graph-card.is-on .sd-curve { animation: sd-draw 1.1s .22s var(--ease) forwards; } .sd-table-card { left: 132px; top: 92px; width: 168px; height: 136px; opacity: 0; transform: translateY(9px) scale(.96); z-index: 4; transition: left .72s cubic-bezier(.22,.78,.22,1), top .72s cubic-bezier(.22,.78,.22,1), opacity .3s var(--ease), transform .45s var(--spring), border-color .25s var(--ease); } .sd-table-card.is-on { opacity: 1; transform: none; } .sd-table-card.is-drag { border-color: var(--green); box-shadow: 0 7px 20px rgba(30,122,80,.18); } .sd-table-card.is-arranged { left: 248px; top: 52px; } .sd-table-tools { height: 32px; padding: 0 7px; display: flex; align-items: center; gap: 7px; border-bottom: 1px solid var(--line); color: var(--ink-faint); font: 6.8px var(--font-mono); white-space: nowrap; } .sd-table-tools b { padding: 5px 7px; color: var(--green-700); background: var(--mint); border-radius: 5px; font-weight: 500; } .sd-table-card table { width: calc(100% - 14px); margin: 7px; border-collapse: collapse; table-layout: fixed; font-size: 9px; } .sd-table-card th, .sd-table-card td { height: 21px; padding: 0 7px; text-align: left; border: 1px solid var(--line); } .sd-table-card th { font-weight: 600; } /* Ask Lemma story */ .sd-ask-panel { position: absolute; inset: 0 20px 0 0; z-index: 2; padding: 10px 14px 8px; background: rgba(251,250,244,.985); border-right: 1px solid var(--line); } .sd-ask-panel .sd-agent-head { height: 34px; } .sd-ask-panel .sd-agent-head > span { font-size: 17px; } .sd-ask-panel .sd-context { height: 35px; font-size: 7.5px; } .sd-ask-panel .sd-context > span { flex: 1; } .sd-ask-panel .sd-file-chip { margin-top: 2px; } .sd-ask-canvas { position: absolute; inset: 0 0 0 424px; } .sd-ask-thread { position: absolute; top: 106px; left: 14px; right: 14px; bottom: 81px; overflow: hidden; transition: bottom .42s var(--ease); } .sd-user-msg { position: absolute; right: 0; top: 4px; max-width: 280px; padding: 9px 12px; border: 1px solid var(--mint-line); border-radius: 13px 13px 4px 13px; background: var(--mint); font-size: 11px; opacity: 0; transform: translateY(7px); transition: opacity .25s var(--ease), transform .38s var(--spring); } .sd-user-msg.is-on { opacity: 1; transform: none; transition: opacity .25s var(--ease), transform .38s var(--spring); } .sd-ai-msg { position: absolute; left: 0; right: 0; top: 52px; opacity: 0; transition: top .42s var(--ease), opacity .28s var(--ease); } .sd-ai-msg.is-on { opacity: 1; transition: top .42s var(--ease), opacity .28s var(--ease); } .sd-ai-who { display: flex; align-items: center; gap: 6px; color: var(--green); font-size: 13px; } .sd-ai-who span { color: var(--ink-soft); font: 8px var(--font-mono); letter-spacing: .12em; text-transform: uppercase; } .sd-ai-who small { padding: 3px 7px; color: var(--ink-faint); border: 1px solid var(--line); border-radius: 99px; font: 7px var(--font-mono); } .sd-ai-status { display: flex; align-items: center; gap: 7px; margin-top: 9px; color: var(--ink-faint); font: 8px var(--font-mono); } .sd-ai-answer { margin-top: 8px; font-size: 10.5px; line-height: 1.55; } .sd-ai-answer p { margin: 0 0 5px; } .sd-ai-answer b { font-weight: 600; } .sd-ai-answer .sd-math { display: block; margin: 7px 0; font: italic 16px var(--font-serif); white-space: nowrap; } .sd-stream-caret { display: inline-block; width: 2px; height: 11px; margin-left: 2px; background: var(--green-300); animation: sd-caret .72s steps(1) infinite; vertical-align: -1px; } .sd-check-card { margin-top: 8px; padding: 6px 10px; border: 1px solid var(--mint-line); border-radius: 10px; background: linear-gradient(145deg, var(--mint), rgba(247,251,247,.95)); opacity: 0; transform: translateY(8px); } .sd-check-card.is-on { opacity: 1; transform: none; transition: opacity .3s var(--ease), transform .45s var(--spring); } .sd-check-card p, .sd-check-card strong { display: flex; align-items: center; gap: 7px; margin: 0 0 4px; color: var(--ink-soft); font: 7.7px var(--font-mono); } .sd-check-card strong { margin: 0; color: var(--green-700); font: 600 9px var(--font-sans); } .sd-check-card i { width: 12px; height: 12px; display: grid; place-items: center; border-radius: 50%; color: white; background: var(--green); font: normal 7px var(--font-sans); } .sd-ask-composer { left: 13px; right: 13px; bottom: 9px; min-height: 68px; } .sd-ask .sd-ask-composer { transition: opacity .28s var(--ease), transform .42s var(--ease); } .sd-ask.is-sent .sd-ask-composer { opacity: 0; transform: translateY(24px); } .sd-ask.is-sent .sd-ask-thread { bottom: 8px; } .sd-ask.is-answering .sd-user-msg { opacity: 0; transform: translateY(-7px); } .sd-ask.is-answering .sd-ai-msg { top: 0; } .sd-ask.is-answering .sd-ai-who { display: none; } .sd-cursor { position: absolute; left: 0; top: 0; z-index: 30; width: 18px; height: 22px; opacity: 0; transform: translate(0,0); pointer-events: none; transition: transform .68s cubic-bezier(.22,.78,.22,1), opacity .22s var(--ease); filter: drop-shadow(0 1px 2px rgba(16,35,25,.2)); } .sd-cursor.is-on { opacity: 1; } .sd-cursor svg { width: 18px; height: 22px; fill: #fffdf7; stroke: #2c3530; stroke-width: 1.5; stroke-linejoin: round; transition: transform .16s var(--ease); transform-origin: 5px 4px; } .sd-cursor.is-click svg { transform: scale(.78); } @keyframes sd-spin { to { transform: rotate(360deg); } } @keyframes sd-caret { 50% { opacity: 0; } } @keyframes sd-draw { to { stroke-dashoffset: 0; } } /* A restrained playback rail makes the loop legible without putting chrome over the tiny product UI. steps-demo.js keeps it in lockstep with the story. */ .step__rail { position: absolute; left: 0; right: 0; bottom: 0; z-index: 2; height: 3px; background: color-mix(in srgb, var(--line) 74%, transparent); overflow: hidden; } .step__rail i { display: block; width: 100%; height: 100%; background: var(--green); transform: scaleX(0); transform-origin: left center; } .step__shot.is-playing .step__rail i { animation: step-demo-progress var(--demo-duration) linear infinite; } .step__shot.is-paused .step__rail i { animation-play-state: paused; } .step__shot.is-paused .sd-window *, .step__shot.is-paused .sd-window *::before, .step__shot.is-paused .sd-window *::after { animation-play-state: paused !important; } @keyframes step-demo-progress { to { transform: scaleX(1); } } @media (prefers-reduced-motion: reduce) { .step__rail { display: none; } .sd-cursor { display: none; } } /* ---------- Feature grid (workspace) ---------- */ .feature-split { display: grid; grid-template-columns: 1.05fr 0.95fr; gap: 48px; align-items: center; } .tile-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; } .tile { background: var(--paper-2); border: 1px solid var(--line); border-radius: var(--radius); padding: 22px; transition: transform .3s var(--ease), box-shadow .3s var(--ease), border-color .3s var(--ease); } .tile:hover { transform: translateY(-4px); box-shadow: var(--shadow-md); border-color: var(--green-300); } .tile__icon { width: 40px; height: 40px; border-radius: 11px; display: grid; place-items: center; background: var(--mint); color: var(--green-700); border: 1px solid var(--mint-line); margin-bottom: 16px; } .tile__icon svg { width: 20px; height: 20px; } .tile h3 { font-size: 1.16rem; margin-bottom: 7px; } .tile p { color: var(--ink-soft); font-size: 0.92rem; line-height: 1.55; } .tile--wide { grid-column: span 2; } .feature-head { display: flex; align-items: end; justify-content: space-between; gap: 24px; margin: 8px 0 28px; } .feature-head__btn { flex: none; white-space: nowrap; } /* workspace big preview reuse */ .work-preview { position: relative; } .work-stack { display: flex; flex-direction: column; gap: 14px; } .code-card { background: #0e1a14; border-radius: 14px; border: 1px solid rgba(255,255,255,.08); box-shadow: var(--shadow-md); overflow: hidden; font-family: var(--font-mono); } .code-card__bar { display: flex; align-items: center; gap: 8px; padding: 10px 14px; border-bottom: 1px solid rgba(255,255,255,.07); } .code-card__bar span { font-size: 11px; color: var(--dark-soft); } .code-card__badge { margin-left: auto; font-family: var(--font-mono); font-size: 10px; letter-spacing: 0.06em; color: var(--glow); border: 1px solid rgba(63,167,118,0.35); padding: 3px 8px; border-radius: 999px; } .code-card__bar span.code-card__badge { font-size: 10px; color: var(--glow); } .code-card pre { padding: 14px 16px; font-size: 12.5px; line-height: 1.7; color: #cfe3d6; overflow-x: auto; } .code-card .k { color: #7bc49a; } .code-card .s { color: #d8b878; } .code-card .c { color: #6c7d72; } .code-card .f { color: #9ec7e6; } .code-card .n { color: #d59ad0; } .table-card { background: var(--paper-3); border: 1px solid var(--line); border-radius: 14px; box-shadow: var(--shadow-md); overflow: hidden; } .table-card table { width: 100%; border-collapse: collapse; font-size: 0.86rem; } .table-card th { font-family: var(--font-mono); font-size: 10.5px; text-transform: uppercase; letter-spacing: 0.06em; color: var(--ink-faint); text-align: left; padding: 11px 14px; background: var(--paper-2); border-bottom: 1px solid var(--line); font-weight: 500; } .table-card td { padding: 10px 14px; border-bottom: 1px solid var(--line-soft); color: var(--ink-soft); } .table-card tr:last-child td { border-bottom: none; } .table-card td b { color: var(--ink); font-weight: 600; } /* ---------- Dark spotlight (Lemma AI) ---------- */ .dark { background: var(--dark); color: var(--dark-text); position: relative; overflow: hidden; background-image: radial-gradient(900px 500px at 80% -10%, rgba(63,167,118,0.14), transparent 60%), linear-gradient(rgba(255,255,255,0.022) 1px, transparent 1px), linear-gradient(90deg, rgba(255,255,255,0.022) 1px, transparent 1px); background-size: auto, 34px 34px, 34px 34px; } .dark .eyebrow { color: var(--glow); } .dark .eyebrow::before { background: rgba(63,167,118,0.5); } .dark .section-title { color: var(--dark-text); } .dark .section-lead { color: var(--dark-soft); } .dark em.in { color: var(--glow); } .ai-layout { display: grid; grid-template-columns: 0.95fr 1.05fr; gap: 52px; align-items: center; } .prompt-list { display: flex; flex-direction: column; gap: 12px; } .prompt { display: flex; align-items: center; gap: 14px; background: rgba(255,255,255,0.035); border: 1px solid var(--dark-line); border-radius: 14px; padding: 15px 18px; transition: transform .25s var(--ease), background .25s var(--ease), border-color .25s var(--ease); } .prompt:hover { transform: translateX(6px); background: rgba(63,167,118,0.1); border-color: rgba(63,167,118,0.4); } .prompt__q { width: 26px; height: 26px; flex: none; border-radius: 8px; background: rgba(63,167,118,0.16); color: var(--glow); display: grid; place-items: center; font-family: var(--font-mono); font-size: 13px; } .prompt span { font-size: 1rem; font-weight: 500; } .prompt em { font-style: normal; color: var(--dark-soft); display: block; font-size: 0.82rem; margin-top: 2px; font-weight: 400; } /* dark AI demo card */ .ai-demo { background: var(--dark-2); border: 1px solid var(--dark-line); border-radius: var(--radius-lg); box-shadow: 0 40px 90px -40px rgba(0,0,0,0.7); overflow: hidden; } .ai-demo__bar { display: flex; align-items: center; gap: 10px; padding: 14px 18px; border-bottom: 1px solid var(--dark-line); } .ai-demo__bar b { font-size: 0.95rem; } .ai-demo__bar .badge { margin-left: auto; font-family: var(--font-mono); font-size: 10px; color: var(--glow); border: 1px solid rgba(63,167,118,0.4); padding: 3px 9px; border-radius: 20px; } .ai-demo__body { padding: 22px; display: flex; flex-direction: column; gap: 16px; } .dmsg { max-width: 86%; font-size: 0.92rem; line-height: 1.55; padding: 12px 15px; border-radius: 15px; } .dmsg--user { align-self: flex-end; background: var(--glow); color: #062014; border-bottom-right-radius: 5px; font-weight: 500; } .dmsg--ai { align-self: flex-start; background: rgba(255,255,255,0.05); border: 1px solid var(--dark-line); border-bottom-left-radius: 5px; } .dmsg--ai b { color: var(--glow); } .canvas-drop { align-self: flex-start; width: 100%; background: rgba(255,255,255,0.03); border: 1px dashed rgba(63,167,118,0.45); border-radius: 14px; padding: 16px; } .canvas-drop__tag { font-family: var(--font-mono); font-size: 10px; letter-spacing: 0.1em; text-transform: uppercase; color: var(--glow); margin-bottom: 12px; display: flex; align-items: center; gap: 7px; } .canvas-drop .eq { color: var(--dark-text); } .canvas-drop .eq .op { color: var(--dark-soft); } .canvas-drop .frac .den { border-color: var(--dark-text); } /* ---------- Organization / workflow ---------- */ .org-layout { display: grid; grid-template-columns: 0.9fr 1.1fr; gap: 48px; align-items: center; } .finder { background: var(--paper-3); border: 1px solid var(--line); border-radius: var(--radius); box-shadow: var(--shadow-md); overflow: hidden; display: grid; grid-template-columns: 200px 1fr; } .finder__side { background: var(--paper-2); border-right: 1px solid var(--line); padding: 16px 12px; } .finder__search { display: flex; align-items: center; gap: 8px; background: var(--paper-3); border: 1px solid var(--line); border-radius: 9px; padding: 8px 10px; margin-bottom: 16px; font-size: 0.82rem; color: var(--ink-faint); } .finder__search svg { width: 14px; height: 14px; } .finder__label { font-family: var(--font-mono); font-size: 10px; letter-spacing: 0.08em; text-transform: uppercase; color: var(--ink-faint); padding: 0 8px; margin: 14px 0 7px; } .finder__item { display: flex; align-items: center; gap: 9px; padding: 8px 9px; border-radius: 8px; font-size: 0.88rem; color: var(--ink-soft); } .finder__item svg { width: 15px; height: 15px; color: var(--green); flex: none; } .finder__item.is-active { background: var(--mint); color: var(--green-800); font-weight: 500; } .finder__item .count { margin-left: auto; font-family: var(--font-mono); font-size: 10px; color: var(--ink-faint); } .finder__main { padding: 18px; } .finder__crumb { font-family: var(--font-mono); font-size: 11px; color: var(--ink-faint); margin-bottom: 14px; } .note-row { display: flex; align-items: center; gap: 12px; padding: 11px 12px; border: 1px solid var(--line-soft); border-radius: 11px; margin-bottom: 9px; background: var(--paper-2); transition: border-color .2s ease, transform .2s ease; } .note-row:hover { border-color: var(--green-300); transform: translateX(3px); } .note-row__ic { width: 32px; height: 32px; border-radius: 9px; display: grid; place-items: center; flex: none; } .note-row__ic svg { width: 16px; height: 16px; } .note-row__ic.c-math { background: var(--mint); color: var(--green-700); } .note-row__ic.c-phys { background: #fdf1de; color: var(--amber); } .note-row__ic.c-chem { background: #f2eaf3; color: var(--plum); } .note-row b { font-size: 0.9rem; font-weight: 600; display: block; } .note-row small { font-size: 0.76rem; color: var(--ink-faint); font-family: var(--font-mono); } .note-row .tag { margin-left: auto; font-family: var(--font-mono); font-size: 10px; color: var(--ink-faint); border: 1px solid var(--line); padding: 3px 8px; border-radius: 20px; } .org-list { display: grid; grid-template-columns: 1fr 1fr; gap: 14px 28px; } .org-item { display: flex; gap: 13px; } .org-item__ic { width: 36px; height: 36px; border-radius: 10px; flex: none; display: grid; place-items: center; background: var(--mint); color: var(--green-700); border: 1px solid var(--mint-line); } .org-item__ic svg { width: 18px; height: 18px; } .org-item h4 { font-family: var(--font-sans); font-size: 0.98rem; font-weight: 700; margin-bottom: 2px; } .org-item p { font-size: 0.86rem; color: var(--ink-soft); line-height: 1.5; } /* ---------- Mobile companion ---------- */ .mobile-layout { display: grid; grid-template-columns: 0.85fr 1.15fr; gap: 56px; align-items: center; } .phone { width: 264px; margin: 0 auto; background: var(--dark); border-radius: 38px; padding: 11px; box-shadow: var(--shadow-lg), 0 0 0 1px var(--line); position: relative; } .phone__notch { position: absolute; top: 20px; left: 50%; transform: translateX(-50%); width: 96px; height: 26px; background: var(--dark); border-radius: 16px; z-index: 3; } .phone__screen { background: var(--paper-2); border-radius: 28px; overflow: hidden; height: 524px; background-image: linear-gradient(var(--grid) 1px, transparent 1px), linear-gradient(90deg, var(--grid) 1px, transparent 1px); background-size: 20px 20px; display: flex; flex-direction: column; } .phone__top { padding: 38px 18px 14px; } .phone__top h4 { font-size: 1.15rem; font-family: var(--font-serif); } .phone__top p { font-size: 0.78rem; color: var(--ink-faint); font-family: var(--font-mono); } .phone__body { padding: 4px 16px; flex: 1; overflow: hidden; } .cap-btn { display: flex; align-items: center; gap: 11px; background: var(--paper-3); border: 1px solid var(--line); border-radius: 13px; padding: 12px 13px; margin-bottom: 10px; box-shadow: var(--shadow-sm); } .cap-btn__ic { width: 34px; height: 34px; border-radius: 10px; background: var(--mint); color: var(--green-700); display: grid; place-items: center; flex: none; } .cap-btn__ic svg { width: 17px; height: 17px; } .cap-btn b { font-size: 0.86rem; display: block; } .cap-btn small { font-size: 0.72rem; color: var(--ink-faint); } .cap-btn .chev { margin-left: auto; color: var(--ink-faint); } .phone__bar { margin-top: auto; display: flex; justify-content: space-around; padding: 12px 16px 22px; border-top: 1px solid var(--line); background: var(--paper-3); } .phone__bar i { width: 22px; height: 22px; border-radius: 6px; background: var(--line); display: block; } .phone__bar i.on { background: var(--green); } .mobile-points { display: flex; flex-direction: column; gap: 4px; } .mpoint { display: flex; gap: 15px; padding: 18px 0; border-bottom: 1px solid var(--line); } .mpoint:last-child { border-bottom: none; } .mpoint__ic { width: 42px; height: 42px; border-radius: 12px; flex: none; display: grid; place-items: center; background: var(--paper-2); border: 1px solid var(--line); color: var(--green-700); } .mpoint__ic svg { width: 20px; height: 20px; } .mpoint h4 { font-family: var(--font-sans); font-size: 1.05rem; font-weight: 700; margin-bottom: 4px; } .mpoint p { color: var(--ink-soft); font-size: 0.94rem; } .callout { display: flex; gap: 12px; align-items: flex-start; background: var(--mint); border: 1px solid var(--mint-line); border-radius: 14px; padding: 16px 18px; margin-top: 26px; } .callout svg { width: 19px; height: 19px; color: var(--green-700); flex: none; margin-top: 2px; } .callout p { font-size: 0.92rem; color: var(--green-800); } .callout b { font-weight: 700; } .section--desktop-handoff { overflow: hidden; background: linear-gradient(180deg, rgba(251,250,244,0) 0%, rgba(47,110,158,0.06) 100%); } .desktop-handoff { position: relative; isolation: isolate; display: grid; grid-template-columns: minmax(0, 1fr) 340px; gap: 28px; align-items: center; max-width: 980px; margin: 0 auto; padding: 30px; border: 1px solid rgba(207,227,214,0.9); border-radius: var(--radius); background: linear-gradient(135deg, rgba(232,241,234,0.92), rgba(255,255,255,0.86) 52%, rgba(47,110,158,0.08)), var(--paper-2); box-shadow: var(--shadow-lg); overflow: hidden; } .desktop-handoff::before { content: ""; position: absolute; inset: 0; z-index: -1; opacity: 0.55; background-image: linear-gradient(rgba(22,32,26,0.04) 1px, transparent 1px), linear-gradient(90deg, rgba(22,32,26,0.04) 1px, transparent 1px); background-size: 28px 28px; animation: desktop-handoff-grid 16s linear infinite; } .desktop-handoff .callout { margin: 16px 0 20px; background: rgba(255,255,255,0.56); backdrop-filter: blur(10px); } .btn--desktop-handoff { letter-spacing: 0; } .btn--desktop-handoff svg { transition: transform .25s var(--ease); } .btn--desktop-handoff:hover svg, .btn--desktop-handoff:focus-visible svg { transform: translateX(3px); } .desktop-handoff__preview { position: relative; min-height: 206px; border: 1px solid rgba(20,92,61,0.16); border-radius: 16px; background: linear-gradient(180deg, rgba(255,255,255,0.92), rgba(246,244,236,0.72)), var(--paper-3); box-shadow: var(--shadow-md); overflow: hidden; transform: translateZ(0); transition: transform .35s var(--ease), box-shadow .35s var(--ease), border-color .35s var(--ease); } .desktop-handoff__preview:hover, .desktop-handoff__preview:focus-visible { transform: translateY(-4px); border-color: rgba(28,124,84,0.32); box-shadow: 0 24px 52px -30px rgba(16,40,28,0.36), 0 10px 24px -18px rgba(47,110,158,0.28); } .desktop-handoff__bar { display: flex; gap: 7px; align-items: center; height: 34px; padding: 0 13px; border-bottom: 1px solid var(--line-soft); background: rgba(255,255,255,0.62); } .desktop-handoff__bar i { width: 8px; height: 8px; border-radius: 50%; background: var(--green-300); } .desktop-handoff__bar i:nth-child(2) { background: var(--amber); } .desktop-handoff__bar i:nth-child(3) { background: var(--sky); } .desktop-handoff__canvas { position: absolute; inset: 34px 0 0; background-image: linear-gradient(rgba(22,32,26,0.045) 1px, transparent 1px), linear-gradient(90deg, rgba(22,32,26,0.045) 1px, transparent 1px); background-size: 24px 24px; } .desktop-handoff__node, .desktop-handoff__note, .desktop-handoff__route { position: absolute; display: block; } .desktop-handoff__node { width: 58px; height: 58px; border-radius: 14px; border: 1px solid rgba(20,92,61,0.18); background: rgba(232,241,234,0.92); box-shadow: var(--shadow-sm); } .desktop-handoff__node::after { content: ""; position: absolute; inset: 17px; border-radius: 50%; background: var(--green); } .desktop-handoff__node--one { top: 26px; left: 32px; animation: desktop-node-float 5s var(--ease) infinite alternate; } .desktop-handoff__node--two { right: 34px; bottom: 26px; background: rgba(47,110,158,0.11); animation: desktop-node-float 5.5s var(--ease) .4s infinite alternate; } .desktop-handoff__node--two::after { background: var(--sky); } .desktop-handoff__note { left: 92px; right: 84px; top: 78px; height: 54px; border-radius: 12px; border: 1px solid rgba(185,137,47,0.22); background: linear-gradient(90deg, rgba(185,137,47,0.12) 0 4px, transparent 4px), rgba(255,255,255,0.76); box-shadow: var(--shadow-sm); } .desktop-handoff__note::before, .desktop-handoff__note::after { content: ""; position: absolute; left: 18px; right: 18px; height: 1px; background: rgba(22,32,26,0.12); } .desktop-handoff__note::before { top: 18px; } .desktop-handoff__note::after { top: 32px; right: 58px; } .desktop-handoff__route { left: 82px; right: 82px; top: 80px; height: 2px; background: linear-gradient(90deg, transparent, var(--green), var(--sky), transparent); transform-origin: left center; animation: desktop-route 3.8s var(--ease) infinite; } @keyframes desktop-handoff-grid { to { background-position: 28px 28px, 28px 28px; } } @keyframes desktop-node-float { to { transform: translateY(-6px); } } @keyframes desktop-route { 0% { transform: scaleX(0); opacity: 0; } 28%, 72% { transform: scaleX(1); opacity: 0.75; } 100% { transform: scaleX(1); opacity: 0; } } /* ---------- Icon micro-interactions (org + mobile lists) ---------- */ .org-item__ic, .mpoint__ic { transition: transform .4s var(--ease), background .3s var(--ease), border-color .3s var(--ease), box-shadow .4s var(--ease); } .org-item__ic svg, .mpoint__ic svg { transition: transform .4s var(--ease), color .3s var(--ease); transform-origin: center; } .org-item:hover .org-item__ic { transform: translateY(-3px); border-color: var(--green); box-shadow: 0 9px 20px -8px rgba(16,185,129,0.4); } .mpoint:hover .mpoint__ic { transform: translateY(-3px); background: var(--mint); border-color: var(--mint-line); box-shadow: 0 9px 20px -8px rgba(16,185,129,0.3); } .org-item:hover .org-item__ic svg, .mpoint:hover .mpoint__ic svg { color: var(--green); } /* feature tiles — icon tile lifts with its card */ .tile__icon { transition: transform .4s var(--ease), background .3s var(--ease), border-color .3s var(--ease), box-shadow .4s var(--ease); } .tile__icon svg { transition: transform .4s var(--ease), color .3s var(--ease); transform-origin: center; } .tile:hover .tile__icon { transform: translateY(-3px); border-color: var(--green); box-shadow: 0 9px 20px -8px rgba(16,185,129,0.4); } .tile:hover .tile__icon svg { color: var(--green); } /* per-glyph motions — keyed to meaning, one motion per hover */ .ic-lift svg, .ic-dip svg, .ic-pop svg { will-change: transform; } .org-item:hover .ic-lift svg, .mpoint:hover .ic-lift svg, .tile:hover .ic-lift svg { transform: translateY(-2px) rotate(-5deg); } .org-item:hover .ic-dip svg, .mpoint:hover .ic-dip svg, .tile:hover .ic-dip svg { transform: translateY(2px); } .org-item:hover .ic-pop svg, .mpoint:hover .ic-pop svg, .tile:hover .ic-pop svg { transform: scale(1.14); } .org-item:hover .ic-tick svg, .mpoint:hover .ic-tick svg, .tile:hover .ic-tick svg { animation: ic-tick .65s var(--ease); } .org-item:hover .ic-seek svg, .mpoint:hover .ic-seek svg, .tile:hover .ic-seek svg { animation: ic-seek .6s var(--ease); } .org-item:hover .ic-bob svg, .mpoint:hover .ic-bob svg, .tile:hover .ic-bob svg { animation: ic-bob .6s var(--ease); } .org-item:hover .ic-shutter svg, .mpoint:hover .ic-shutter svg, .tile:hover .ic-shutter svg { animation: ic-shutter .55s var(--ease); } .org-item:hover .ic-spin svg, .mpoint:hover .ic-spin svg, .tile:hover .ic-spin svg { animation: ic-spin .8s var(--ease); } .org-item:hover .ic-blink svg, .mpoint:hover .ic-blink svg, .tile:hover .ic-blink svg { animation: ic-blink .7s var(--ease); } .org-item:hover .ic-wiggle svg, .mpoint:hover .ic-wiggle svg, .tile:hover .ic-wiggle svg { animation: ic-wiggle .6s var(--ease); } @keyframes ic-tick { 0% { transform: rotate(0); } 55% { transform: rotate(15deg); } 100% { transform: rotate(0); } } @keyframes ic-seek { 0%,100% { transform: translate(0,0); } 35% { transform: translate(-2px,-2px); } 65% { transform: translate(2px,1px); } } @keyframes ic-bob { 0%,100% { transform: translateY(0); } 35% { transform: translateY(-3px); } } @keyframes ic-shutter { 0%,100% { transform: scale(1); } 45% { transform: scale(0.85); } } @keyframes ic-spin { to { transform: rotate(360deg); } } @keyframes ic-blink { 0%,100% { transform: scaleY(1); } 45%,55% { transform: scaleY(0.12); } } @keyframes ic-wiggle { 0%,100% { transform: rotate(0); } 25% { transform: rotate(-7deg); } 75% { transform: rotate(7deg); } } /* finder list — icon eases forward on hover */ .finder__item svg { transition: transform .25s var(--ease); } .finder__item:hover svg { transform: translateX(2px); } /* ---------- Pricing ---------- */ .plan-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 18px; align-items: start; } .plan { background: var(--paper-2); border: 1px solid var(--line); border-radius: var(--radius); padding: 26px 24px; display: flex; flex-direction: column; transition: transform .3s var(--ease), box-shadow .3s var(--ease); } .plan:hover { transform: translateY(-5px); box-shadow: var(--shadow-md); } .plan--feature { background: var(--green-800); color: #fff; border-color: var(--green-800); position: relative; box-shadow: var(--shadow-lg); } .plan--feature .plan__price, .plan--feature h3 { color: #fff; } .plan--feature .plan__price small { color: var(--green-300); } .plan--feature .plan__desc { color: rgba(255,255,255,0.82); } .plan.plan--feature li { color: rgba(255,255,255,0.96); } .plan.plan--feature li svg { color: #7fdcab; } .plan__flag { position: absolute; top: -12px; left: 24px; font-family: var(--font-mono); font-size: 10px; letter-spacing: 0.1em; text-transform: uppercase; background: var(--glow); color: #062014; padding: 4px 11px; border-radius: 20px; font-weight: 600; } .plan h3 { font-family: var(--font-serif); font-size: 1.32rem; font-weight: 500; } .plan__desc { font-size: 0.86rem; color: var(--ink-soft); margin: 6px 0 18px; min-height: 38px; } .plan__price { font-family: var(--font-serif); font-size: 2.3rem; font-weight: 500; line-height: 1; letter-spacing: -0.03em; display: inline-flex; align-items: baseline; white-space: nowrap; } .plan__price small { font-size: 0.85rem; font-family: var(--font-mono); color: var(--ink-faint); font-weight: 400; letter-spacing: 0; transition: opacity 0.18s var(--ease); } .plan__cursor { display: inline-block; width: 2.5px; height: 0.76em; margin: 0 1px 0 2px; background-color: var(--green-700); vertical-align: -0.02em; border-radius: 1px; animation: plan-cursor-blink 0.65s infinite; transition: opacity 0.22s var(--ease); } .plan--feature .plan__cursor { background-color: #7fdcab; } .plan__cursor.is-hidden { opacity: 0; animation: none; } @keyframes plan-cursor-blink { 0%, 100% { opacity: 1; } 50% { opacity: 0; } } .plan ul { margin: 20px 0 24px; display: flex; flex-direction: column; gap: 11px; } .plan li { display: flex; gap: 9px; font-size: 0.88rem; color: var(--ink-soft); align-items: flex-start; } .plan li svg { width: 16px; height: 16px; color: var(--green); flex: none; margin-top: 3px; } .plan .btn { margin-top: auto; } .plan__bill { font-family: var(--font-mono); font-size: 0.72rem; letter-spacing: 0.01em; color: var(--ink-faint); margin: 8px 0 0; min-height: 1.2em; transition: opacity 0.25s var(--ease), transform 0.25s var(--ease); } .plan--feature .plan__bill { color: var(--green-300); } .plan__bill.is-hidden { opacity: 0; transform: translateY(-2px); } /* Monthly / yearly billing toggle */ .bill-toggle { display: inline-flex; gap: 4px; margin: 24px auto 0; padding: 4px; background: var(--paper-2); border: 1px solid var(--line); border-radius: 999px; box-shadow: var(--shadow-sm); } .bill-toggle__opt { font-family: var(--font-sans); font-size: 0.9rem; font-weight: 600; color: var(--ink-soft); background: transparent; border: 0; padding: 9px 18px; border-radius: 999px; cursor: pointer; display: inline-flex; align-items: center; gap: 8px; transition: background 0.22s var(--ease), color 0.22s var(--ease); } .bill-toggle__opt:hover { color: var(--ink); } .bill-toggle__opt.is-on { background: var(--green-800); color: #fff; } .bill-toggle__opt.is-on:hover { color: #fff; } .bill-toggle__save { font-family: var(--font-mono); font-size: 10px; letter-spacing: 0.06em; text-transform: uppercase; background: var(--mint); color: var(--green-700); padding: 3px 8px; border-radius: 999px; } .bill-toggle__opt.is-on .bill-toggle__save { background: rgba(255,255,255,0.18); color: #fff; } /* Lemma agent — Topology of Thought callout (dark section) */ .agent-topo { display: flex; gap: 12px; align-items: flex-start; padding: 14px 16px; border: 1px solid var(--dark-line); border-radius: var(--radius-sm); background: rgba(63,167,118,0.08); } .agent-topo__ic { color: var(--glow); font-size: 1.15rem; line-height: 1.3; flex: none; } .agent-topo p { font-size: 0.86rem; color: var(--dark-soft); line-height: 1.55; } .agent-topo b { color: var(--dark-text); } /* ---------- CTA band ---------- */ .cta { background: var(--green-800); color: #fff; border-radius: var(--radius-lg); padding: 64px; text-align: center; position: relative; overflow: hidden; isolation: isolate; background-image: radial-gradient(700px 400px at 50% -30%, rgba(63,167,118,0.22), transparent 60%); } .cta::before, .cta::after { content: ""; position: absolute; pointer-events: none; z-index: 0; } .cta::before { inset: -55% -18%; background: radial-gradient(ellipse at 18% 52%, rgba(59, 197, 168, 0.22) 0 14%, transparent 42%), radial-gradient(ellipse at 76% 46%, rgba(74, 222, 128, 0.16) 0 18%, transparent 48%); filter: blur(10px); animation: cta-water-drift 18s ease-in-out infinite alternate; } .cta::after { width: 135%; height: 78%; left: -18%; bottom: -61%; border-radius: 44% 56% 0 0 / 24% 30% 0 0; background: linear-gradient(105deg, rgba(45, 212, 191, 0.18), rgba(74, 222, 128, 0.08) 54%, rgba(16, 185, 129, 0.18)); box-shadow: 0 -22px 70px rgba(45, 212, 191, 0.12); animation: cta-water-wave 13s ease-in-out infinite alternate; } .cta > * { position: relative; z-index: 1; } @keyframes cta-water-drift { from { transform: translate3d(-2%, -1%, 0) rotate(-2deg) scale(1); } to { transform: translate3d(3%, 2%, 0) rotate(2deg) scale(1.08); } } @keyframes cta-water-wave { from { transform: translate3d(-2%, 0, 0) rotate(-1.5deg); } to { transform: translate3d(3%, -7%, 0) rotate(1.5deg); } } .cta h2 { font-size: clamp(1.9rem, 3.4vw, 2.8rem); color: #fff; font-weight: 400; margin-bottom: 14px; } .cta p { color: rgba(255,255,255,0.8); max-width: 50ch; margin: 0 auto 28px; } .cta .signup { margin: 0 auto; max-width: 460px; } .cta .signup__field { background: rgba(255,255,255,0.1); border-color: rgba(255,255,255,0.18); } .cta .signup__field svg { color: rgba(255,255,255,0.6); } .cta .signup input { color: #fff; } .cta .signup input::placeholder { color: rgba(255,255,255,0.55); } .cta .signup__note { color: rgba(255,255,255,0.6); text-align: center; } /* ---------- Footer ---------- */ .footer { border-top: 1px solid var(--line); padding: 64px 0 40px; } .footer__grid { display: grid; grid-template-columns: 1.6fr repeat(3, 1fr); gap: 40px; } .footer__brand p { color: var(--ink-soft); font-size: 0.92rem; margin: 16px 0 20px; max-width: 30ch; } .footer__col h5 { font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.1em; text-transform: uppercase; color: var(--ink-faint); margin-bottom: 16px; font-weight: 500; } .footer__col a { display: block; font-size: 0.92rem; color: var(--ink-soft); padding: 5px 0; transition: color .2s; } .footer__col a:hover { color: var(--green-700); } .footer__bottom { display: flex; justify-content: space-between; align-items: center; margin-top: 52px; padding-top: 26px; border-top: 1px solid var(--line); flex-wrap: wrap; gap: 14px; } .footer__bottom p { font-family: var(--font-mono); font-size: 12px; color: var(--ink-faint); } .footer__social { display: flex; gap: 10px; } .footer__social a { width: 36px; height: 36px; border-radius: 9px; border: 1px solid var(--line); display: grid; place-items: center; color: var(--ink-soft); transition: .2s; } .footer__social a:hover { border-color: var(--green-300); color: var(--green-700); } .footer__social svg { width: 16px; height: 16px; } /* ---------- Generic page header ---------- */ .page-head { padding: 72px 0 36px; text-align: center; } .page-head .h-display { max-width: 18ch; margin: 18px auto 0; } .page-head .section-lead { margin: 20px auto 0; text-align: center; } /* alt feature row (features page) */ .frow { display: grid; grid-template-columns: 1fr 1fr; gap: 52px; align-items: center; padding: 40px 0; } .frow:nth-child(even) .frow__media { order: -1; } .frow__media { background: var(--paper-3); border: 1px solid var(--line); border-radius: var(--radius); box-shadow: var(--shadow-md); padding: 22px; min-height: 280px; background-image: linear-gradient(var(--grid) 1px, transparent 1px), linear-gradient(90deg, var(--grid) 1px, transparent 1px); background-size: 22px 22px; display: flex; flex-direction: column; justify-content: center; gap: 12px; } .frow h3 { font-size: 1.7rem; margin-bottom: 12px; } .frow > div > p { color: var(--ink-soft); margin-bottom: 18px; } .frow .feat-list { display: flex; flex-direction: column; gap: 9px; } .frow .feat-list li { display: flex; gap: 9px; font-size: 0.94rem; color: var(--ink-soft); } .frow .feat-list svg { width: 17px; height: 17px; color: var(--green); flex: none; margin-top: 3px; } /* FAQ */ .faq { max-width: 760px; margin: 0 auto; } .faq__item { border-bottom: 1px solid var(--line); padding: 22px 0; } .faq__item h4 { font-family: var(--font-serif); font-size: 1.2rem; font-weight: 500; margin-bottom: 8px; } .faq__item p { color: var(--ink-soft); font-size: 0.96rem; } /* developers code block */ .dev-code { background: var(--dark); border-radius: var(--radius); border: 1px solid var(--dark-line); box-shadow: var(--shadow-lg); overflow: hidden; } .dev-code__bar { display: flex; align-items: center; gap: 10px; padding: 13px 18px; border-bottom: 1px solid var(--dark-line); } .dev-code__bar span { font-family: var(--font-mono); font-size: 12px; color: var(--dark-soft); } .dev-code pre { padding: 20px 22px; font-family: var(--font-mono); font-size: 13px; line-height: 1.8; color: #cfe3d6; overflow-x: auto; } .dev-code .k { color: #7bc49a; } .dev-code .s { color: #d8b878; } .dev-code .c { color: #6c7d72; } .dev-code .f { color: #9ec7e6; } .dev-code .p { color: #d59ad0; } .endpoint { display: flex; align-items: center; gap: 14px; padding: 16px 18px; border: 1px solid var(--line); border-radius: 12px; margin-bottom: 11px; background: var(--paper-2); font-family: var(--font-mono); font-size: 0.86rem; } .endpoint .verb { font-size: 11px; font-weight: 600; padding: 3px 9px; border-radius: 6px; letter-spacing: 0.05em; } .endpoint .verb.get { background: var(--mint); color: var(--green-800); } .endpoint .verb.post { background: #fdf1de; color: var(--amber); } .endpoint .path { color: var(--ink); } .endpoint .desc { margin-left: auto; font-family: var(--font-sans); font-size: 0.85rem; color: var(--ink-faint); } /* educators stat */ .stat-row { display: grid; grid-template-columns: repeat(3,1fr); gap: 24px; } .stat { text-align: center; padding: 28px; background: var(--paper-2); border: 1px solid var(--line); border-radius: var(--radius); } .stat b { font-family: var(--font-serif); font-size: 2.6rem; font-weight: 500; color: var(--green-700); display: block; line-height: 1; letter-spacing: -0.03em; } .stat span { font-size: 0.92rem; color: var(--ink-soft); margin-top: 8px; display: block; } /* ---------- Reveal animation ---------- */ .reveal { opacity: 0; transform: translateY(22px); transition: opacity .7s var(--ease), transform .7s var(--ease); } .reveal.in { opacity: 1; transform: none; } .reveal[data-d="1"]{ transition-delay: .08s; } .reveal[data-d="2"]{ transition-delay: .16s; } .reveal[data-d="3"]{ transition-delay: .24s; } .reveal[data-d="4"]{ transition-delay: .32s; } .reveal[data-d="5"]{ transition-delay: .40s; } @media (prefers-reduced-motion: reduce) { * { animation: none !important; transition: none !important; } .reveal { opacity: 1; transform: none; } html { scroll-behavior: auto; } } /* ---------- Responsive ---------- */ @media (max-width: 1040px) { .nav__links, .nav__login { display: none; } .nav__toggle { display: block; } .nav.is-open .nav__links { display: flex; flex-direction: column; align-items: stretch; position: absolute; top: 72px; left: 0; right: 0; background: var(--paper); border-bottom: 1px solid var(--line); padding: 14px 20px; gap: 2px; margin: 0; } .nav.is-open .nav__links a { padding: 13px; font-size: 1rem; } } @media (max-width: 1080px) { .hero__grid { grid-template-columns: 1fr; gap: 44px; } .hero__copy { max-width: 560px; } .steps { grid-template-columns: 1fr; max-width: 920px; margin-inline: auto; } .step { display: grid; grid-template-columns: minmax(220px, .72fr) minmax(430px, 1.28fr); grid-template-rows: auto auto 1fr; padding: 28px; } .step__n, .step h3, .step p { grid-column: 1; } .step h3 { align-self: end; } .step p { margin-bottom: 0; max-width: 34ch; } .step__shot { grid-column: 2; grid-row: 1 / 4; margin: -28px -28px -28px 32px; border-top: 0; border-left: 1px solid var(--line-soft); } .step__replay { top: 22px; left: 164px; right: auto; } .feature-split, .org-layout, .ai-layout, .mobile-layout { grid-template-columns: 1fr; gap: 40px; } .ai-layout .ai-demo, .mobile-layout .phone { order: -1; } .plan-grid { grid-template-columns: repeat(2, 1fr); } .footer__grid { grid-template-columns: 1fr 1fr; gap: 32px; } .footer__brand { grid-column: span 2; } } @media (max-width: 860px) { .steps, .tile-grid, .stat-row { grid-template-columns: 1fr; } .frow, .frow:nth-child(even) .frow__media { grid-template-columns: 1fr; } .frow:nth-child(even) .frow__media { order: 0; } .org-list { grid-template-columns: 1fr; } .canvas { min-height: 0; padding: 18px; } .card { position: static; width: auto !important; margin-bottom: 14px; } .card--graph, .card--chem { right: auto; } .card--chem { z-index: 1; } .ai-panel { position: static; transform: none; width: auto; margin-top: 14px; } .finder { grid-template-columns: 1fr; } .finder__side { display: none; } .feature-head { align-items: flex-start; flex-direction: column; } .desktop-handoff { grid-template-columns: 1fr; } .desktop-handoff__preview { min-height: 184px; } } @media (max-width: 700px) { .step { display: flex; min-height: 0; padding: 24px 24px 0; } .step p { max-width: none; margin-bottom: 20px; } .step__shot { margin: auto -24px 0; border-top: 1px solid var(--line-soft); border-left: 0; } .step__replay { top: 17px; left: auto; right: 18px; } } @media (max-width: 560px) { .hero { padding: 42px 0 60px; } .hero .h-display, .hero-title__lead { font-size: clamp(2.5rem, 11vw, 3rem); } .hero-title__phrase { font-size: clamp(2.12rem, 9.2vw, 2.62rem); } .hero__lead { margin-top: 16px; } .signup, .benefits, .hero__strip { margin-top: 24px; } .hero__strip { padding-top: 20px; } .section { padding: 68px 0; } .wrap { padding: 0 20px; } .plan-grid { grid-template-columns: 1fr; } .signup { flex-direction: column; } .cta { padding: 40px 24px; } .tile--wide { grid-column: span 1; } .table-card { overflow-x: auto; -webkit-overflow-scrolling: touch; } .table-card table { font-size: 0.8rem; min-width: 440px; } .desktop-handoff { padding: 22px; border-radius: 16px; } .desktop-handoff .callout { flex-direction: column; } .btn--desktop-handoff { width: 100%; } } @media (max-width: 380px) { .hero .h-display, .hero-title__lead { font-size: clamp(2.18rem, 10vw, 2.5rem); } .hero-title__phrase { font-size: clamp(1.8rem, 8.4vw, 2.08rem); } } /* ============================================================ INTERACTIONS — minimal, purposeful, content-driven ============================================================ */ html { scroll-padding-top: 90px; } /* keyboard focus */ :focus-visible { outline: 2px solid var(--green); outline-offset: 3px; border-radius: 6px; } .dark :focus-visible { outline-color: var(--glow); } /* scroll progress bar */ .scroll-progress { position: fixed; top: 0; left: 0; right: 0; height: 2px; z-index: 200; transform: scaleX(0); transform-origin: 0 50%; background: linear-gradient(90deg, var(--green-300), var(--green)); pointer-events: none; } /* shared keyframes */ @keyframes msg-in { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } } @keyframes dot { 0%, 60%, 100% { opacity: .3; transform: translateY(0); } 30% { opacity: 1; transform: translateY(-3px); } } @keyframes caret { 50% { opacity: 0; } } @keyframes spin { to { transform: rotate(360deg); } } /* hero graph: self-draw line + traveling projectile */ .graph__line { stroke-dasharray: 480; stroke-dashoffset: 480; animation: graph-draw 1.7s var(--ease) .35s forwards; } @keyframes graph-draw { to { stroke-dashoffset: 0; } } .graph__ball { opacity: 0; } @supports (offset-path: path("M0 0 L1 1")) { .graph__ball { offset-path: path("M24 108 Q126 -22 228 108"); offset-rotate: 0deg; animation: projectile 4s var(--ease) 1.4s infinite; } } @keyframes projectile { 0% { offset-distance: 0%; opacity: 0; } 10% { opacity: 1; } 90% { opacity: 1; } 100% { offset-distance: 100%; opacity: 0; } } /* ---------- Code runner ---------- */ .run-btn { margin-left: auto; display: inline-flex; align-items: center; gap: 6px; font-family: var(--font-mono); font-size: 11px; color: var(--glow); background: rgba(63,167,118,0.08); border: 1px solid rgba(63,167,118,0.35); padding: 4px 11px; border-radius: 7px; transition: background .2s var(--ease); } .run-btn:hover { background: rgba(63,167,118,0.08); } .run-btn:disabled { opacity: .5; cursor: default; } .run-btn svg { width: 10px; height: 10px; } .code-caret { color: var(--glow); animation: caret 1s steps(1) infinite; } .runner-out { border-top: 1px solid rgba(255,255,255,0.07); padding: 12px 16px; font-family: var(--font-mono); font-size: 12.5px; line-height: 1.7; display: flex; flex-direction: column; gap: 1px; } .runner-out[hidden] { display: none; } .out-line { color: #cfe3d6; white-space: pre-wrap; opacity: 0; transform: translateY(4px); transition: opacity .3s var(--ease), transform .3s var(--ease); } .out-line.in { opacity: 1; transform: none; } .out-prompt { color: #6c7d72; user-select: none; } .out-res { color: #7bc49a; } .out-status { color: var(--glow); display: inline-flex; align-items: center; gap: 7px; } .out-spin { width: 9px; height: 9px; border: 1.5px solid rgba(63,167,118,0.3); border-top-color: var(--glow); border-radius: 50%; display: inline-block; animation: spin .7s linear infinite; } /* ---------- Chat (Lemma AI) ---------- */ .msg, .dmsg { animation: msg-in .35s var(--ease) both; } .ai-panel__body { max-height: 210px; overflow-y: auto; scroll-behavior: smooth; } .ai-demo__body { scroll-behavior: smooth; } .ai-panel__input input { flex: 1; border: none; outline: none; background: none; font-family: var(--font-sans); font-size: .84rem; color: var(--ink); min-width: 0; padding: 0; } .ai-panel__input input::placeholder { color: var(--ink-faint); } .msg.typing { align-self: flex-start; background: var(--mint); display: inline-flex; gap: 5px; align-items: center; padding: 12px 14px; border-radius: 13px; border-bottom-left-radius: 4px; } .msg.typing i { width: 6px; height: 6px; border-radius: 50%; background: var(--green); display: block; animation: dot 1s infinite; } .dmsg.typing { align-self: flex-start; background: rgba(255,255,255,0.05); border: 1px solid var(--dark-line); display: inline-flex; gap: 5px; align-items: center; padding: 13px 15px; border-radius: 15px; border-bottom-left-radius: 5px; } .dmsg.typing i { width: 6px; height: 6px; border-radius: 50%; background: var(--glow); display: block; animation: dot 1s infinite; } .msg.typing i:nth-child(2), .dmsg.typing i:nth-child(2) { animation-delay: .15s; } .msg.typing i:nth-child(3), .dmsg.typing i:nth-child(3) { animation-delay: .30s; } /* suggested prompt chips */ .ai-chips { display: flex; gap: 6px; padding: 0 12px 10px; overflow-x: auto; } .ai-chips::-webkit-scrollbar { height: 0; } .chip { cursor: pointer; white-space: nowrap; font-family: var(--font-mono); font-size: 10.5px; color: var(--green-800); background: var(--mint); border: 1px solid var(--mint-line); border-radius: 20px; padding: 5px 11px; transition: background .2s var(--ease), transform .15s var(--ease); } .chip:hover { background: var(--mint); transform: translateY(-1px); } .ai-demo__chips { flex-wrap: wrap; padding: 0 20px 16px; } .ai-demo__chips .chip { color: var(--glow); background: rgba(63,167,118,0.1); border-color: rgba(63,167,118,0.32); } .ai-demo__chips .chip:hover { background: rgba(63,167,118,0.1); } .ai-demo__input { display: flex; align-items: center; gap: 10px; padding: 16px 20px 4px; border-top: 1px solid var(--dark-line); } .ai-demo__input input { flex: 1; min-width: 0; border: 1px solid rgba(255,255,255,0.18); outline: none; background: rgba(255,255,255,0.06); border-radius: 22px; padding: 12px 16px; font-family: var(--font-sans); font-size: .92rem; color: var(--dark-text); box-shadow: inset 0 1px 2px rgba(0,0,0,0.18); transition: border-color .2s var(--ease), box-shadow .2s var(--ease), background .2s var(--ease); } .ai-demo__input input::placeholder { color: var(--dark-soft); } .ai-demo__input input:focus { border-color: var(--glow); background: rgba(255,255,255,0.09); box-shadow: 0 0 0 3px rgba(63,167,118,0.18); } .ai-demo__send { width: 40px; height: 40px; flex: none; border-radius: 50%; background: linear-gradient(135deg, #22c55e, #10b981); display: grid; place-items: center; box-shadow: 0 4px 14px rgba(16,185,129,0.3); transition: filter .2s var(--ease), transform .2s var(--ease); } .ai-demo__send:hover { filter: none; } .ai-demo__send:active { transform: scale(.92); } .ai-demo__send svg { width: 17px; height: 17px; color: #06140d; } /* clickable prompt rows feed the demo */ .prompt { cursor: pointer; -webkit-user-select: none; user-select: none; } .prompt:focus-visible { outline: 2px solid var(--glow); outline-offset: 3px; } /* ---------- Finder (interactive) ---------- */ .finder__item { cursor: pointer; transition: background .15s var(--ease); } .finder__item:hover { background: var(--line-soft); } .note-row { cursor: pointer; animation: msg-in .3s var(--ease) both; } .note-row__txt { flex: 1; min-width: 0; } .note-row.is-open { border-color: var(--green); background: var(--mint); } .note-row.is-open b { color: var(--green-800); } /* ---------- Phone (interactive) ---------- */ .phone__screen { position: relative; } .cap-btn { cursor: pointer; transition: transform .12s var(--ease), border-color .2s var(--ease); } .cap-btn:hover { border-color: var(--line); } .cap-btn.is-tapped { transform: scale(.96); border-color: var(--green); } .phone__bar i { cursor: pointer; transition: background .2s var(--ease); } .phone__toast { position: absolute; left: 16px; right: 16px; bottom: 74px; z-index: 6; display: flex; align-items: center; gap: 8px; background: var(--green); color: #fff; border-radius: 12px; padding: 11px 13px; font-size: .78rem; font-weight: 500; box-shadow: var(--shadow-md); opacity: 0; transform: translateY(12px); transition: opacity .3s var(--ease), transform .3s var(--ease); pointer-events: none; } .phone__toast.show { opacity: 1; transform: none; } .phone__toast svg { width: 15px; height: 15px; flex: none; } /* ============================================================ CHAT CARDS — fixed size + mobile-app styling Keeps every interactive chat card one constant size; the log scrolls internally instead of growing the card. ============================================================ */ .ai-demo[data-chat] .ai-demo__body { height: 372px; overflow-y: auto; } .ai-panel[data-chat] .ai-panel__body { height: 178px; max-height: none; } .ai-demo[data-chat] .ai-demo__body::-webkit-scrollbar { width: 6px; } .ai-demo[data-chat] .ai-demo__body::-webkit-scrollbar-thumb { background: rgba(63,167,118,0.28); border-radius: 20px; } /* hero panel: scrolls, but never shows a scrollbar */ .ai-panel[data-chat] .ai-panel__body::-webkit-scrollbar { width: 0; height: 0; display: none; } .ai-demo[data-chat] .ai-demo__body { scrollbar-width: thin; scrollbar-color: rgba(63,167,118,0.28) transparent; } /* user bubble → the mobile app's green gradient */ .dmsg--user { background: linear-gradient(135deg, #22c55e, #10b981); color: #06140d; } .dmsg--ai { background: rgba(255,255,255,0.055); } /* mobile-style options row under the chat input (Pipeline · Effort · Review) */ .ai-opts { display: flex; gap: 8px; padding: 12px 20px 18px; } .ai-opt { flex: 1; min-width: 0; min-height: 38px; display: flex; align-items: center; gap: 6px; padding: 7px 11px; border: 1px solid var(--dark-line); border-radius: 11px; background: rgba(255,255,255,0.04); } .ai-opt__label { font-family: var(--font-mono); font-size: 11px; font-weight: 600; color: var(--dark-soft); letter-spacing: .02em; white-space: nowrap; } .ai-opt__value { font-size: 13px; font-weight: 700; color: var(--glow); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .ai-opt__chev { flex: none; margin-left: auto; color: var(--dark-soft); } .ai-opt--review { flex: 0 0 auto; gap: 8px; } .ai-opt__track { width: 38px; height: 22px; flex: none; border-radius: 999px; background: rgba(120,140,130,0.32); padding: 2px; display: inline-flex; align-items: center; } .ai-opt__thumb { width: 18px; height: 18px; border-radius: 999px; background: #fff; box-shadow: 0 1px 2px rgba(0,0,0,0.3); transform: translateX(0); transition: transform .2s var(--ease); } .ai-opt--review.is-on .ai-opt__track { background: linear-gradient(135deg, #22c55e, #10b981); } .ai-opt--review.is-on .ai-opt__thumb { transform: translateX(16px); } /* ============================================================ PHONE — MathematiX Mobile app UI (ported from the real app) ============================================================ */ .phone__screen--app { background: #FDFCF8; background-image: none; color: #2e3029; font-family: var(--font-sans); } .mui-bg { position: absolute; inset: 0; z-index: 0; overflow: hidden; background: linear-gradient(135deg, #f3faf2 0%, #fcfdfb 50%, #eefbf1 100%); } .mui-bg i { position: absolute; border-radius: 50%; filter: blur(50px); display: block; opacity: .9; } .mui-bg i:nth-child(1) { top: -12%; left: -14%; width: 62%; height: 52%; background: rgba(74,222,128,0.22); animation: mui-float1 26s infinite alternate ease-in-out; } .mui-bg i:nth-child(2) { bottom: -16%; right: -14%; width: 66%; height: 54%; background: rgba(20,184,166,0.18); animation: mui-float2 30s infinite alternate ease-in-out; } .mui-bg i:nth-child(3) { top: 32%; right: -22%; width: 52%; height: 44%; background: rgba(253,224,71,0.16); animation: mui-float1 22s infinite alternate-reverse ease-in-out; } @keyframes mui-float1 { 0% { transform: translate(0,0) scale(1); } 100% { transform: translate(8%,6%) scale(1.12); } } @keyframes mui-float2 { 0% { transform: translate(0,0) scale(1); } 100% { transform: translate(-7%,-9%) scale(1.08); } } .phone__screen--app > :not(.mui-bg) { position: relative; z-index: 1; } .mui-header { flex: none; display: flex; align-items: center; gap: 6px; padding: 38px 8px 8px; border-bottom: 1px solid rgba(60,60,50,0.08); background: rgba(255,255,255,0.55); backdrop-filter: blur(12px); } .mui-icon { flex: none; width: 34px; height: 34px; display: grid; place-items: center; border-radius: 10px; color: #2e3029; background: transparent; transition: background .15s var(--ease); } .mui-icon:hover { background: transparent; } .mui-title { flex: 1; display: flex; flex-direction: column; align-items: center; line-height: 1.1; } .mui-brand { font-size: 16px; font-weight: 800; letter-spacing: -0.02em; color: #2e3029; } .mui-brand .x { color: #10B981; } .mui-sub { font-size: 10px; color: #5c6258; margin-top: 1px; } .mui-chat { flex: 1 1 auto; overflow: hidden; display: flex; padding: 14px; } .mui-empty { margin: auto; text-align: center; color: #5c6258; padding: 8px 0; } .mui-empty h2 { font-size: 15px; font-weight: 700; color: #2e3029; margin: 0 0 12px; min-height: 22px; display: flex; align-items: center; justify-content: center; white-space: nowrap; overflow: hidden; width: 100%; } .mui-hl { color: #2E7D32; font-weight: 800; background: rgba(74,222,128,0.14); padding: 0 4px; border-radius: 4px; margin: 0 2px; } .mui-caret { display: inline-block; width: 2px; height: 1.05em; background: #2E7D32; margin-left: 3px; animation: mui-blink 1s step-end infinite; } @keyframes mui-blink { from, to { opacity: 0; } 50% { opacity: 1; } } .mui-empty p { margin: 0 0 18px; font-size: 12.5px; line-height: 1.55; } .mui-suggestions { display: flex; flex-direction: column; gap: 9px; } .mui-suggestion { border: 1px solid rgba(60,60,50,0.10); background: #ffffff; color: #2e3029; border-radius: 15px; padding: 13px 15px; font-size: 12.5px; text-align: left; cursor: pointer; box-shadow: 0 4px 12px rgba(31,38,135,0.05); transition: border-color .2s var(--ease), background .2s var(--ease), transform .15s var(--ease), box-shadow .2s var(--ease); } .mui-suggestion:hover { border-color: rgba(60,60,50,0.10); transform: translateY(-2px); box-shadow: 0 10px 22px rgba(46,125,50,0.10); } .mui-suggestion:active { transform: scale(.98); } .mui-inputbar { flex: none; padding: 10px 12px 16px; border-top: 1px solid rgba(60,60,50,0.08); background: rgba(255,255,255,0.6); backdrop-filter: blur(12px); } .mui-input-row { display: flex; align-items: center; gap: 8px; } .mui-attach { flex: none; width: 38px; height: 38px; border-radius: 50%; border: 1px solid rgba(60,60,50,0.12); background: #F7F5F0; color: #2e3029; display: grid; place-items: center; cursor: pointer; box-shadow: 0 2px 6px rgba(31,38,135,0.05); transition: background .2s var(--ease), transform .2s var(--ease); } .mui-attach:hover { background: #F7F5F0; } .mui-attach:active { transform: scale(.9); } .mui-input { flex: 1; min-width: 0; height: 40px; border: 1.5px solid rgba(46,48,41,0.22); background: #ffffff; color: #2e3029; border-radius: 20px; padding: 0 15px; font: inherit; font-size: 13px; outline: none; box-shadow: inset 0 1px 2px rgba(0,0,0,0.04); transition: border-color .2s var(--ease), box-shadow .2s var(--ease); } .mui-input::placeholder { color: rgba(92,98,88,0.75); } .mui-input:focus { border-color: #2E7D32; box-shadow: 0 0 0 3px rgba(46,125,50,0.12); } .mui-send { flex: none; width: 40px; height: 40px; border-radius: 50%; border: 1px solid rgba(255,255,255,0.3); background: linear-gradient(135deg, #22c55e, #10b981); color: #fff; display: grid; place-items: center; cursor: pointer; box-shadow: 0 4px 14px rgba(46,125,50,0.3); transition: transform .2s var(--ease), filter .2s var(--ease); } .mui-send:hover { filter: none; } .mui-send:active { transform: scale(.9); } .mui-options { display: grid; grid-template-columns: 1fr 1fr 1.18fr; gap: 5px; margin-top: 10px; padding: 0; } .mui-drop, .mui-review { min-width: 0; min-height: 36px; display: flex; align-items: center; justify-content: center; gap: 4px; padding: 6px 6px; border: 1px solid rgba(60,60,50,0.12); border-radius: 11px; background: #F7F5F0; color: #2e3029; font: inherit; cursor: pointer; transition: border-color .2s var(--ease), box-shadow .2s var(--ease); } .mui-drop:hover, .mui-review:hover { border-color: rgba(60,60,50,0.12); } .mui-options .mui-drop:focus-visible, .mui-options .mui-review:focus-visible { outline: none; border-color: #2E7D32; box-shadow: 0 0 0 2px rgba(46,125,50,0.16); } .mui-drop-label { min-width: 0; font-family: var(--font-mono); font-size: 9px; font-weight: 700; color: #5c6258; white-space: nowrap; letter-spacing: -0.06em; } .mui-drop-value { display: none; } .mui-chev { flex: none; width: 7px; color: #5c6258; } .mui-review { gap: 5px; } .mui-track { width: 32px; height: 20px; flex: none; border-radius: 999px; background: rgba(100,116,139,0.28); padding: 2px; display: inline-flex; align-items: center; } .mui-thumb { width: 16px; height: 16px; border-radius: 999px; background: #fff; box-shadow: 0 1px 2px rgba(15,23,42,0.22); transform: translateX(0); transition: transform .2s var(--ease); } .mui-review.is-on .mui-track { background: linear-gradient(135deg, #22c55e, #10b981); } .mui-review.is-on .mui-thumb { transform: translateX(12px); } /* reduced motion: keep everything visible, drop the motion */ @media (prefers-reduced-motion: reduce) { .graph__line { stroke-dashoffset: 0 !important; } .out-line { opacity: 1; transform: none; } .mui-bg i { animation: none !important; } .mui-caret { animation: none !important; } .demo-pills { display: none !important; } } /* ============================================================ CUSTOM SCROLLBARS — thin, themed, site-wide ============================================================ */ * { scrollbar-width: thin; /* Firefox */ scrollbar-color: rgba(28,124,84,0.28) transparent; } ::-webkit-scrollbar { width: 6px; height: 6px; } ::-webkit-scrollbar-track { background: transparent; } ::-webkit-scrollbar-corner { background: transparent; } ::-webkit-scrollbar-thumb { background: rgba(28,124,84,0.26); border-radius: 999px; } ::-webkit-scrollbar-thumb:hover { background: rgba(28,124,84,0.45); } /* dark mode (app) — soft green glow instead of white system bars */ .dark *, .dark { scrollbar-color: rgba(63,167,118,0.35) transparent; } .dark ::-webkit-scrollbar-thumb { background: rgba(63,167,118,0.3); } .dark ::-webkit-scrollbar-thumb:hover { background: rgba(63,167,118,0.55); } /* ============ FAQ ============ */ .faq { max-width: 720px; margin: 40px auto 0; display: flex; flex-direction: column; gap: 12px; } .faq__item { background: var(--paper-3); border: 1px solid var(--line); border-radius: 14px; padding: 0 22px; transition: border-color 0.2s ease, box-shadow 0.2s ease; } .faq__item:hover { border-color: var(--mint-line); } .faq__item[open] { border-color: var(--mint-line); box-shadow: 0 6px 22px rgba(22, 32, 26, 0.05); } .faq__item summary { cursor: pointer; list-style: none; display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 18px 0; font-weight: 600; font-size: 1rem; color: var(--ink); } .faq__item summary::-webkit-details-marker { display: none; } .faq__chev { flex: none; width: 24px; height: 24px; border-radius: 50%; background: var(--mint); color: var(--green); display: grid; place-items: center; transition: transform 0.25s ease; } .faq__chev svg { width: 12px; height: 12px; } .faq__item[open] .faq__chev { transform: rotate(45deg); } .faq__item p { margin: 0; padding: 0 0 18px; color: var(--ink-soft); font-size: 0.95rem; line-height: 1.65; max-width: 62ch; } /* drop-down animation: JS drives the height, CSS eases it + fades the copy in */ .faq__body { transition: height 0.32s cubic-bezier(0.32, 0.72, 0, 1); } .faq__item.is-animating .faq__body { overflow: hidden; will-change: height; } .faq__body > * { opacity: 1; transform: none; transition: opacity 0.24s ease 0.06s, transform 0.3s cubic-bezier(0.32, 0.72, 0, 1) 0.04s; } .faq__item:not([open]) .faq__body > *, .faq__item.is-closing .faq__body > * { opacity: 0; transform: translateY(-6px); transition: opacity 0.18s ease, transform 0.24s ease; } @media (prefers-reduced-motion: reduce) { .faq__body, .faq__body > * { transition: none; } .faq__item:not([open]) .faq__body > *, .faq__item.is-closing .faq__body > * { opacity: 1; transform: none; } } /* ============================================================ HERO DEMO LOOP — scripted scenes inside the notebook preview ============================================================ */ /* scene pills (story-style) — bottom-left, clear of the AI panel; overlaid so revealing them never shifts layout */ .demo-pills { position: absolute; left: 18px; bottom: 14px; display: flex; gap: 7px; z-index: 20; padding: 7px 9px; border-radius: 999px; background: rgba(255, 253, 247, 0.88); border: 1px solid var(--line); box-shadow: var(--shadow-sm); backdrop-filter: blur(4px); } .demo-pills[hidden] { display: none; } .demo-pill { position: relative; width: 34px; height: 5px; border-radius: 999px; background: var(--line); overflow: hidden; cursor: pointer; border: none; padding: 0; display: block; transition: background .2s var(--ease); } .demo-pill:hover { background: var(--mint-line); } .demo-pill i { position: absolute; inset: 0; width: 0%; background: var(--green); border-radius: inherit; display: block; } /* scene cards: invisible without the demo (static page stays pixel-identical) */ .card[data-scene]:not([data-scene="1"]) { display: none; } /* demo active: every scene card participates in soft cross-fades */ .preview.is-demo .card[data-scene] { display: block; opacity: 0; pointer-events: none; transform: translateY(10px) rotate(var(--fan, 0deg)) scale(0.98); transition: opacity .45s var(--ease), transform .45s var(--ease); } .preview.is-demo .card[data-scene].is-on { opacity: 1; transform: none; } /* freeze CSS keyframes in sync with the JS clock */ .preview.is-paused .canvas * { animation-play-state: paused !important; } /* chat scrolls but never shows scrollbars (message log + chip row) */ .ai-panel__body, .ai-panel .ai-chips { scrollbar-width: none; -ms-overflow-style: none; } .ai-panel__body::-webkit-scrollbar, .ai-panel .ai-chips::-webkit-scrollbar { width: 0; height: 0; display: none; } /* scene 1: demo owns the graph animation (kill the one-shot load version) */ .preview.is-demo .card--graph .graph__line { animation: none; stroke-dashoffset: 480; } .preview.is-demo .card--graph .graph__ball { animation: none; opacity: 0; } .preview.is-demo .card--graph.redraw .graph__line { animation: graph-draw 1s var(--ease) forwards; } @supports (offset-path: path("M0 0 L1 1")) { .preview.is-demo .card--graph.redraw .graph__ball { offset-path: path("M24 108 Q126 -22 228 108"); offset-rotate: 0deg; animation: projectile 2.8s var(--ease) .8s infinite; } } /* scene 2: PDF summary cards, fanned-in from the left column */ .card--sum1 { top: 24px; left: 24px; width: 252px; --fan: -2.5deg; } .card--sum2 { top: 180px; left: 24px; width: 252px; --fan: 1.8deg; } .card--sum3 { top: 334px; left: 24px; width: 252px; --fan: -1.4deg; } .card--sum1 h4 { font-family: var(--font-serif); font-size: 1.02rem; font-weight: 600; margin-bottom: 7px; } .card--sum1 p, .card--sum3 p { font-size: 0.86rem; color: var(--ink-soft); line-height: 1.5; } .card--sum1 .hl { background: var(--mint); border-radius: 3px; padding: 0 3px; color: var(--green-800); } /* pdf chip — in the chat input, then echoed inside the sent message */ .ai-panel .pdf-chip { display: inline-flex; align-items: center; gap: 5px; flex: none; font-family: var(--font-mono); font-size: 10.5px; color: var(--green-800); background: var(--mint); border: 1px solid var(--mint-line); border-radius: 7px; padding: 3px 8px; white-space: nowrap; opacity: 0; transform: translateY(4px); transition: opacity .3s var(--ease), transform .3s var(--ease); } .ai-panel .pdf-chip[hidden] { display: none; } .ai-panel .pdf-chip.is-in { opacity: 1; transform: none; } .ai-panel .msg--user .pdf-chip { opacity: 1; transform: none; margin-bottom: 5px; background: rgba(255,255,255,0.16); border-color: rgba(255,255,255,0.28); color: #fff; } /* scene 3: live-typed note; plain text math renders into real markup */ .card--live { top: 150px; left: 36px; width: 282px; } .card--live h4 { font-family: var(--font-serif); font-size: 1.02rem; font-weight: 600; margin-bottom: 7px; min-height: 1.35em; } .card--live p { font-size: 0.86rem; color: var(--ink-soft); line-height: 1.5; min-height: 1.5em; margin-bottom: 2px; } .live-math { position: relative; min-height: 52px; } .live-eq { opacity: 0; transition: opacity .4s var(--ease); } .live-plain { position: absolute; inset: 0; padding-top: 9px; display: block; font-family: var(--font-mono); font-size: 12.5px; color: var(--ink-soft); opacity: 1; transition: opacity .4s var(--ease); } .card--live.is-rendered .live-eq { opacity: 1; } .card--live.is-rendered .live-plain { opacity: 0; } /* typing caret — applied to whichever node is being typed into */ .is-typing::after { content: ""; display: inline-block; width: 2px; height: 1em; background: var(--green); margin-left: 2px; vertical-align: text-bottom; animation: caret .9s steps(1) infinite; } /* scene 4: worked problem with a wrong step + reserved fix row */ .card--steps { top: 96px; left: 24px; width: 276px; } .card--steps h4 { font-family: var(--font-serif); font-size: 1rem; font-weight: 600; margin-bottom: 9px; } .steps-list { display: flex; flex-direction: column; gap: 5px; } .srow { font-family: var(--font-mono); font-size: 12px; color: var(--ink-soft); display: flex; gap: 8px; align-items: baseline; padding: 5px 8px; border-radius: 7px; transition: background .35s var(--ease), color .35s var(--ease), opacity .35s var(--ease); } .srow span { color: var(--ink-faint); font-size: 10.5px; flex: none; } .srow.is-wrong { background: #fdecea; color: #b3473c; text-decoration: line-through; } .srow.is-wrong span { color: #b3473c; } .srow--fix { opacity: 0; } .srow--fix.is-fixed { opacity: 1; background: var(--mint); color: var(--green-800); } .srow--fix.is-fixed span { color: var(--green-700); } /* ghost cursor — glides over toolbar + canvas */ .ghost-cursor { position: absolute; top: 40px; left: 40px; width: 19px; height: 19px; z-index: 30; opacity: 0; pointer-events: none; transition: top .55s var(--ease), left .55s var(--ease), opacity .3s var(--ease), transform .15s var(--ease); } .ghost-cursor svg { width: 100%; height: 100%; filter: drop-shadow(0 1px 3px rgba(22,32,26,0.35)); display: block; } .ghost-cursor.is-visible { opacity: 1; } .ghost-cursor.is-click { transform: scale(0.8); } /* the demo is desktop-only: cards lose absolute positioning below 860px. NB: no .ghost-cursor rule here. The hero's live app demo is the only thing on the site that still owns one, it scales rather than reflows (see hero-app.css), and an unscoped `display: none !important` on this selector is what used to make its pointer vanish on every phone. */ @media (max-width: 860px) { .demo-pills { display: none !important; } .card[data-scene]:not([data-scene="1"]) { display: none !important; } }