/* ===================================================================== parser.cloud landing v2: a supplier's site becomes your table Mode classes on (set by js/boot.js): (none) no JavaScript: static page, every text and the finished table visible .still reduced motion or ?still: the same static page, final states .motion choreography allowed; scenes add their own .is-live only after they are set up, so a failing scene stays in the static layout .intro the page opened at the top: the calm entrance plays once Switch on : data-telegram="off" removes every [data-bot] ("on" removes [data-nobot]) The scene "site into table" is css/scene.css, the pinned hero css/hero.css. ===================================================================== */ /* ---------- Tokens ---------- */ :root { /* the dark workspace */ --night: #0a0e0c; --night-2: #111713; --night-3: #18201b; --night-line: #26312b; --night-ink: #ecf2ec; --night-muted: #9aa69e; --night-faint: #808c84; /* the light sheet */ --paper: #f3f4ef; --paper-2: #e8ebe3; --card: #ffffff; --ink: #0c120f; --ink-2: #333d37; --muted: #58635c; --line: #d6dbd2; --line-2: #c0c7bc; /* brand: the selected cell */ --lime: #c6f14e; --lime-hi: #d6fa75; --lime-rgb: 198 241 78; --on-lime: #0a0e0c; --sel: #6ea300; /* selection frame on white */ --lime-ink: #3b6400; /* lime-family text on light */ /* data states */ --ok: #17824a; --ok-night: #52d18c; --no: #b5321e; --no-bg: #fbe6e0; --no-night: #ff806a; --chg-bg: #ffefbf; --chg-night: #f5c04a; --was: #6f5f38; --tg: #1a75b5; --tg-hi: #1f84cc; /* the supplier page: a generic shop, kept grey so the table wins the eye */ --shop-bg: #f2f3f0; --shop-card: #ffffff; --shop-junk: #e3e5e0; --shop-junk-2: #d5d8d2; --shop-ink: #2a2e2b; --shop-soft: #7b817c; --sans: "Geist", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif; --mono: "Geist Mono", ui-monospace, "SF Mono", "Cascadia Mono", Consolas, "Roboto Mono", monospace; --ease-out: cubic-bezier(0.16, 1, 0.3, 1); --ease-io: cubic-bezier(0.65, 0, 0.35, 1); --gutter: 18px; --top-h: 56px; --r: 14px; --sec-y: 64px; } @media (min-width: 700px) { :root { --gutter: 32px; --sec-y: 104px; } } @media (min-width: 1000px) { :root { --gutter: 48px; --top-h: 68px; --sec-y: 128px; } } /* ---------- Base ---------- */ *, *::before, *::after { box-sizing: border-box; } html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; scroll-padding-top: var(--top-h); } body { margin: 0; background: var(--night); color: var(--night-ink); font: 400 16px/1.55 var(--sans); overflow-x: clip; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; } h1, h2, h3, p, ul, ol, dl, dd, figure { margin: 0; padding: 0; } ul, ol { list-style: none; } a { color: inherit; text-decoration: none; } button, input { font: inherit; color: inherit; } button { cursor: pointer; } svg { display: block; } img { display: block; max-width: 100%; } [hidden] { display: none !important; } .sr { position: absolute; width: 1px; height: 1px; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; } .nw { white-space: nowrap; } :focus-visible { outline: 2px solid var(--lime); outline-offset: 3px; border-radius: 6px; } .paper :focus-visible, .modal :focus-visible { outline-color: var(--sel); } /* The Telegram bot switch: "off" (not live yet) hides everything about the bot, "on" hides the stand-ins */ html[data-telegram="off"] [data-bot] { display: none !important; } html[data-telegram="on"] [data-nobot] { display: none !important; } .wrap { width: min(100% - 2 * var(--gutter), 1200px); margin-inline: auto; } /* Light sections are sheets laid over the dark workspace */ .paper { position: relative; z-index: 1; background: var(--paper); color: var(--ink); } .night { position: relative; z-index: 1; background: var(--night); color: var(--night-ink); } .night + .paper, .hero + .paper, .paper + .night { border-radius: 22px 22px 0 0; margin-top: -22px; } section { padding-block: var(--sec-y); } /* ---------- Type ---------- */ .h2 { margin-top: 16px; max-width: 20ch; font: 600 clamp(30px, 6.4vw + 6px, 58px)/1.04 var(--sans); letter-spacing: -0.035em; text-wrap: balance; } .h3 { font: 600 19px/1.25 var(--sans); letter-spacing: -0.015em; } .lead { margin-top: 16px; max-width: 52ch; font-size: clamp(16px, 0.6vw + 13.5px, 19px); line-height: 1.55; color: var(--ink-2); } .night .lead { color: var(--night-muted); } .note { margin-top: 18px; font-size: 14px; color: var(--muted); } /* Section label as a spreadsheet formula bar: cell address, fx, value */ .fx { display: inline-flex; align-items: stretch; height: 28px; border: 1px solid var(--line-2); border-radius: 7px; background: var(--card); font: 500 12px/1 var(--mono); color: var(--ink); overflow: hidden; } .fx__cell { position: relative; display: flex; align-items: center; justify-content: center; min-width: 38px; padding: 0 8px; border-right: 1px solid var(--line); } .fx__f { display: flex; align-items: center; padding: 0 8px; border-right: 1px solid var(--line); color: var(--muted); font-style: italic; } .fx__v { display: flex; align-items: center; padding: 0 12px 0 10px; letter-spacing: 0.02em; } .night .fx { background: var(--night-2); border-color: var(--night-line); color: var(--night-ink); } .night .fx__cell, .night .fx__f { border-color: var(--night-line); } .night .fx__f { color: var(--night-muted); } /* ---------- Buttons ---------- */ .btn { display: inline-flex; align-items: center; justify-content: center; gap: 10px; min-height: 52px; padding: 0 22px; border: 1px solid transparent; border-radius: 12px; font: 600 16px/1.1 var(--sans); letter-spacing: -0.005em; text-align: center; transition: background-color 0.18s ease, border-color 0.18s ease, color 0.18s ease, transform 0.18s var(--ease-out); } .btn svg { width: 18px; height: 18px; flex: none; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; transition: transform 0.25s var(--ease-out); } .btn:hover svg { transform: translateX(3px); } .btn:active { transform: translateY(1px); } .btn--lime { background: var(--lime); color: var(--on-lime); } .btn--lime:hover { background: var(--lime-hi); } .btn--ink { background: var(--ink); color: var(--paper); } .btn--ink:hover { background: #1d2621; } .btn--tg { background: var(--tg); color: #fff; } .btn--tg:hover { background: var(--tg-hi); } .btn--tg svg { fill: currentColor; stroke: none; width: 20px; height: 20px; } .btn--tg:hover svg { transform: none; } .btn--ghost { background: transparent; border-color: var(--night-line); color: var(--night-ink); } .btn--ghost:hover { border-color: var(--night-muted); } .btn:disabled { opacity: 0.7; cursor: default; } .linkbtn { padding: 6px 0; border: 0; background: none; color: var(--night-muted); font-size: 14px; text-decoration: underline; text-underline-offset: 3px; } .linkbtn:hover { color: var(--night-ink); } .tag { display: inline-flex; align-items: center; height: 18px; padding: 0 6px; border: 1px dashed var(--line-2); border-radius: 4px; color: var(--muted); font: 500 10px/1 var(--mono); letter-spacing: 0.04em; text-transform: uppercase; } .pill { display: inline-flex; align-items: center; height: 24px; padding: 0 10px; border: 1px solid var(--line); border-radius: 99px; color: var(--muted); font: 500 12px/1 var(--mono); } .pill--lime { background: var(--lime); border-color: var(--lime); color: var(--on-lime); } .dot { display: inline-block; width: 7px; height: 7px; border-radius: 2px; flex: none; } .dot--ok { background: var(--ok-night); } .dot--no { background: var(--no-night); } .dot--chg { background: var(--chg-night); } /* ---------- Header ---------- */ .progress { display: none; } .top { position: fixed; top: 0; left: 0; right: 0; z-index: 60; height: var(--top-h); color: var(--night-ink); } .top::before { content: ""; position: absolute; inset: 0; background: rgb(10 14 12 / 0.92); border-bottom: 1px solid var(--night-line); opacity: 0; transition: opacity 0.3s ease; } @supports (backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px)) { .top::before { background: rgb(10 14 12 / 0.9); -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px); } } .top.is-solid::before, html:not(.js) .top::before, html.still .top::before { opacity: 1; } .top__row { position: relative; display: flex; align-items: center; justify-content: space-between; gap: 12px; height: 100%; } .logo { display: inline-flex; align-items: center; gap: 9px; font: 600 18px/1 var(--sans); letter-spacing: -0.03em; white-space: nowrap; } .logo__mark { width: 24px; height: 24px; flex: none; } .logo__cell { fill: none; stroke: var(--lime); stroke-width: 2; } .logo__handle { fill: var(--lime); stroke: var(--night); stroke-width: 1.6; } .logo__dot { display: inline-block; width: 0.26em; height: 0.26em; margin: 0 0.07em; background: var(--lime); color: transparent; vertical-align: 0.02em; overflow: hidden; line-height: 0.26em; } .nav { display: none; gap: 28px; font-size: 15px; color: var(--night-muted); } .nav a:hover { color: var(--night-ink); } .top__right { display: flex; align-items: center; gap: 8px; } .top__cta { display: inline-flex; align-items: center; height: 38px; padding: 0 14px; border: 1px solid var(--night-line); border-radius: 10px; background: rgb(10 14 12 / 0.4); font: 600 14px/1 var(--sans); white-space: nowrap; transition: border-color 0.2s ease, background-color 0.2s ease, color 0.2s ease; } .top__cta:hover { border-color: var(--lime); } .top__tg { display: inline-flex; align-items: center; justify-content: center; width: 38px; height: 38px; border-radius: 10px; background: var(--tg); color: #fff; } .top__tg svg { width: 20px; height: 20px; fill: currentColor; } @media (min-width: 1000px) { .nav { display: flex; } .top__cta { background: var(--lime); border-color: var(--lime); color: var(--on-lime); } .top__cta:hover { background: var(--lime-hi); } } /* ===================================================================== HERO (shared parts; each variant arranges them in its own file) ===================================================================== */ .hero { position: relative; z-index: 0; padding: calc(var(--top-h) + 18px) 0 48px; overflow: hidden; background: var(--night); } /* Dot grid of cell corners; the WebGL field replaces it when it runs */ .hero::before { content: ""; position: absolute; inset: 0; z-index: -1; background-image: radial-gradient(circle at 1px 1px, rgb(236 242 236 / 0.1) 1px, transparent 1.6px); background-size: 24px 24px; -webkit-mask-image: radial-gradient(120% 80% at 50% 30%, #000 30%, transparent 80%); mask-image: radial-gradient(120% 80% at 50% 30%, #000 30%, transparent 80%); pointer-events: none; } .hero.has-gl::before { display: none; } .hero__gl { position: absolute; inset: 0; z-index: -1; width: 100%; height: 100%; pointer-events: none; } /* Text and form, then the scene; side by side on desktop, the scene wider */ .hero__grid { display: grid; grid-template-columns: minmax(0, 1fr); gap: 18px; grid-template-areas: "side" "scene"; } .hero__grid > * { min-width: 0; } .hero__side { grid-area: side; display: flex; flex-direction: column; gap: 18px; } .hero__act { display: flex; flex-direction: column; gap: 10px; } .hscene { grid-area: scene; } @media (min-width: 1000px) { .hero { display: grid; align-content: center; min-height: 100vh; min-height: 100svh; padding: calc(var(--top-h) + var(--pin-top, 40px)) 0 64px; } .hero__grid { grid-template-columns: minmax(0, 0.8fr) minmax(0, 1.2fr); grid-template-areas: "side scene"; column-gap: clamp(40px, 4vw, 64px); align-items: start; } .hero__act { max-width: 520px; } } /* A calm entrance: the text rises once, the scene fades in */ html.intro .hero__side { animation: h-rise 0.8s var(--ease-out) both; } html.intro .hscene { animation: h-fade 0.9s ease 0.2s both; } @keyframes h-rise { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: none; } } @keyframes h-fade { from { opacity: 0; } to { opacity: 1; } } .hero__eyebrow { display: flex; align-items: center; gap: 10px; margin-bottom: 14px; color: var(--night-muted); font: 500 13px/1.35 var(--sans); } .hero__eyebrow::before { content: ""; width: 9px; height: 9px; flex: none; border: 1.5px solid var(--lime); border-radius: 2px; } .hero__title { font: 600 clamp(30px, 7vw + 3px, 66px)/1.03 var(--sans); letter-spacing: -0.038em; text-wrap: balance; } @media (min-width: 1000px) { .hero__eyebrow { font-size: 15px; } .hero__title { font-size: clamp(34px, 1.8vw + 12px, 42px); } } .hero__lead { max-width: 44ch; font-size: clamp(15px, 0.5vw + 13px, 18px); line-height: 1.45; color: var(--night-muted); } /* ---------- The link form ---------- */ .check { display: flex; flex-direction: column; gap: 7px; } .check__label { font: 500 14px/1.3 var(--sans); color: var(--night-ink); } .check__row { display: flex; flex-wrap: wrap; gap: 5px; padding: 5px; border: 1px solid var(--night-line); border-radius: 14px; background: var(--night-2); transition: border-color 0.2s ease, box-shadow 0.2s ease; } .check__row:focus-within { border-color: rgb(var(--lime-rgb) / 0.8); box-shadow: 0 0 0 3px rgb(var(--lime-rgb) / 0.16); } .check__input { flex: 1 1 100%; min-width: 0; height: 46px; padding: 0 10px; border: 0; background: transparent; font: 400 16px/1 var(--mono); outline: none; } .check__input::placeholder { color: var(--night-faint); } .check__btn { flex: 1 1 100%; min-height: 50px; padding: 0 18px; border-radius: 10px; gap: 9px; white-space: nowrap; } .check__ic { display: inline-flex; } .check__ic svg { width: 18px; height: 18px; } .check__ic[data-bot] svg { fill: currentColor; stroke: none; width: 19px; height: 19px; } .check__btn:hover .check__ic[data-bot] svg { transform: none; } .check__hint { font-size: 13px; line-height: 1.45; color: var(--night-muted); } .check__err { color: var(--no-night); font-size: 13px; line-height: 1.4; } .check.is-bad .check__row { border-color: var(--no-night); } .check__alt { margin-top: -2px; } .check__alt .linkbtn { padding: 2px 0; font-size: 13.5px; } .nojs { font-size: 14px; color: var(--night-muted); } .nojs a { color: var(--lime); text-decoration: underline; } html:not(.js) .check, html:not(.js) .check__alt { display: none; } @media (min-width: 700px) { .check__row { flex-wrap: nowrap; } .check__input { flex: 1 1 auto; } .check__btn { flex: none; min-height: 46px; } } /* On the way to Telegram: a short state, then a button if the app did not open */ .go { display: grid; gap: 10px; padding: 12px 14px; border: 1px solid var(--night-line); border-radius: 12px; background: var(--night-2); } .go__line { display: flex; align-items: center; gap: 10px; font: 600 15px/1.3 var(--sans); } .go__spin { width: 16px; height: 16px; flex: none; border: 2px solid var(--night-line); border-top-color: var(--lime); border-radius: 50%; animation: spin 0.8s linear infinite; } .go__manual { display: grid; gap: 8px; color: var(--night-muted); font-size: 14px; } .go__manual .btn { width: 100%; } .go.is-manual .go__line { display: none; } .go__demo { color: var(--night-faint); font: 400 12px/1.4 var(--mono); overflow-wrap: anywhere; } [data-check-box].is-going .check__btn { opacity: 0.7; } /* The sheet: a spreadsheet, not a picture of one */ .sheet { --c-i: 22px; --c-p: 84px; --c-s: 66px; --c-k: 58px; --row: 28px; display: flex; flex-direction: column; background: var(--card); color: var(--ink); } .sheet__bar { display: flex; align-items: center; gap: 7px; flex: none; height: 36px; padding: 0 10px; border-bottom: 1px solid var(--line); font: 600 13px/1 var(--sans); white-space: nowrap; } .sheet__ic { width: 16px; height: 16px; flex: none; fill: none; stroke: var(--ok); stroke-width: 1.4; } .sheet__title { overflow: hidden; text-overflow: ellipsis; min-width: 0; } .sheet__upd { display: inline-flex; align-items: center; gap: 6px; margin-left: auto; padding: 3px 4px; margin-right: -4px; border-radius: 4px; color: var(--muted); font: 500 11px/1 var(--mono); transition: background-color 0.9s ease; } .sheet__upd i { width: 6px; height: 6px; border-radius: 50%; background: var(--ok); } .sheet__grid { display: flex; flex-direction: column; flex: 1 1 auto; min-height: 0; font: 400 12.5px/1 var(--sans); } .sheet__letters, .sheet__head, .r { display: grid; grid-template-columns: var(--c-i) minmax(0, 1fr) var(--c-p) var(--c-s) var(--c-k); } .sheet__letters { height: 18px; background: #f1f3ee; color: var(--muted); font-size: 10px; } .sheet__letters span { display: flex; align-items: center; justify-content: center; border-right: 1px solid var(--line); border-bottom: 1px solid var(--line); } .sheet__head { height: 26px; background: #fafbf8; font: 600 11px/1 var(--sans); } .c { display: flex; align-items: center; min-width: 0; padding: 0 5px; border-right: 1px solid var(--line); border-bottom: 1px solid var(--line); white-space: nowrap; overflow: hidden; transition: background-color 0.9s ease; } .sheet__letters span:last-child, .c:last-child { border-right: 0; } .c--i { justify-content: center; padding: 0; background: #f1f3ee; color: var(--muted); font-size: 10px; } .c--name { display: block; line-height: var(--row); text-overflow: ellipsis; } .sheet__head .c--name { line-height: 26px; } .c--price { justify-content: flex-end; font: 400 11.5px/1 var(--mono); font-variant-numeric: tabular-nums; } .sheet__head .c--price { justify-content: flex-end; font: 600 11px/1 var(--sans); } .c--sku { color: var(--muted); font: 400 10.5px/var(--row) var(--mono); display: block; text-overflow: ellipsis; } .sheet__head .c--sku { color: var(--ink); font: 600 11px/26px var(--sans); } .r { height: var(--row); } .sheet__body { position: relative; flex: 1 1 auto; min-height: 0; overflow: hidden; } .sheet__rows { position: relative; } .c--stock { gap: 5px; } .r .c--stock::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: var(--line-2); flex: none; } .c--stock.is-yes { color: var(--ok); } .c--stock.is-yes::before { background: var(--ok) !important; } .c--stock.is-no { color: var(--no); } .c--stock.is-no::before { background: var(--no) !important; } .r--empty .c--i { color: #aab2ab; } .c .v { display: inline-block; max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; vertical-align: top; } .c--price .v { flex: none; } .sheet__tabs { display: flex; align-items: stretch; flex: none; height: 26px; border-top: 1px solid var(--line); background: #f1f3ee; font: 500 11px/1 var(--sans); } .sheet__tabs i { display: flex; align-items: center; padding: 0 10px; color: var(--muted); font-style: normal; font-size: 14px; } .sheet__tabs span { display: flex; align-items: center; padding: 0 12px; background: var(--card); color: var(--ok); box-shadow: inset 0 2px 0 var(--ok); } /* The cell cursor: the brand mark at work */ .sel { position: absolute; top: 0; left: 0; z-index: 2; border: 2px solid var(--sel); pointer-events: none; opacity: 0; } .sel::after { content: ""; position: absolute; right: -5px; bottom: -5px; width: 7px; height: 7px; background: var(--sel); border: 1.5px solid var(--card); } /* Cells waiting for data, landing flashes */ .sheet .c.is-pending { color: transparent; } .sheet .c.is-pending::before { opacity: 0; } .sheet .c.is-flash { background: rgb(var(--lime-rgb) / 0.6); transition: none; } /* The Telegram summary card */ .toast { display: flex; gap: 10px; padding: 11px 12px; border: 1px solid var(--night-line); border-radius: 14px; background: var(--night-2); color: var(--night-ink); font-size: 12.5px; line-height: 1.4; box-shadow: 0 18px 40px -12px rgb(0 0 0 / 0.45); } .toast__ava { display: flex; align-items: center; justify-content: center; width: 30px; height: 30px; flex: none; border-radius: 9px; background: var(--night); } .toast__ava svg { width: 20px; height: 20px; } .toast__ava rect:first-child { fill: none; stroke: var(--lime); stroke-width: 2; } .toast__ava rect:last-child { fill: var(--lime); stroke: var(--night); stroke-width: 1.6; } .toast__txt { min-width: 0; } .toast__from { display: flex; justify-content: space-between; gap: 8px; color: var(--night-muted); font: 500 11px/1.3 var(--mono); } .toast__h { margin: 1px 0 3px; font-weight: 600; font-size: 13px; } .toast__li { display: flex; align-items: baseline; gap: 7px; color: var(--night-muted); } .toast__li .dot { transform: translateY(-1px); } /* Supplier page, schematic and muted (the scene shows it, css/scene.css) */ .site__bar { position: relative; z-index: 3; display: flex; align-items: center; gap: 10px; height: 32px; padding: 0 10px; background: #e7e9e4; border-bottom: 1px solid #d5d8d2; } .site__dots { display: flex; gap: 4px; } .site__dots i { width: 7px; height: 7px; border-radius: 50%; background: #c6cac3; } .site__url { display: flex; align-items: center; gap: 5px; flex: 1 1 auto; min-width: 0; height: 20px; padding: 0 8px; border-radius: 6px; background: #fff; color: #5c625d; font: 400 11px/1 var(--mono); } .site__url svg { width: 11px; height: 11px; flex: none; fill: none; stroke: currentColor; stroke-width: 1.4; } .site__host { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .site__view { position: absolute; top: 32px; left: 0; right: 0; bottom: 0; overflow: hidden; } .site__page { position: relative; padding: 8px 10px 16px; } .j { display: block; height: 7px; border-radius: 4px; background: var(--shop-junk); } .j--s { width: 40%; } .site__head { display: flex; align-items: center; gap: 8px; height: 26px; margin-bottom: 8px; } .j--logo { width: 46px; height: 14px; border-radius: 3px; background: var(--shop-junk-2); } .j--search { flex: 1; height: 20px; border-radius: 10px; background: #fff; border: 1px solid var(--shop-junk); } .j--ic { width: 16px; height: 16px; border-radius: 50%; } .site__promo { display: flex; align-items: center; gap: 8px; height: 26px; margin-bottom: 8px; padding: 0 10px; border-radius: 6px; background: #ebecE8; } .site__promo b { padding: 3px 6px; border-radius: 3px; background: #c9ccc5; color: #4d534e; font: 700 9px/1 var(--sans); letter-spacing: 0.06em; } .site__promo .j { flex: 1; background: #dcdfd8; } .site__promo .j--s { flex: 0 0 26%; } .site__grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; } .card { position: relative; display: flex; flex-direction: column; gap: 3px; padding: 7px; border-radius: 8px; background: var(--shop-card); box-shadow: 0 1px 2px rgb(0 0 0 / 0.05); } .card__img { position: relative; display: flex; align-items: center; justify-content: center; height: 62px; margin-bottom: 3px; border-radius: 5px; background: #f1f2ef; overflow: hidden; } .card__img svg { width: 42px; height: 42px; fill: none; stroke: #a3a9a4; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; } .card__img::after { content: ""; position: absolute; top: 5px; right: 5px; width: 12px; height: 12px; border-radius: 50%; border: 1.5px solid #d3d6d0; } .card__name { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; min-height: 2.4em; font: 500 10.5px/1.2 var(--sans); } .card__sku { color: var(--shop-soft); font: 400 8.5px/1.2 var(--mono); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .card__price { display: flex; align-items: baseline; gap: 5px; min-height: 16px; } .card__price b { color: var(--shop-ink); font: 700 13px/1.2 var(--sans); white-space: nowrap; } .card__stock { font: 500 9px/1.2 var(--sans); color: #4f7d5d; } .card__stock.is-no { color: #9aa19b; } .card__buy { display: flex; align-items: center; gap: 5px; margin-top: 2px; } .card__buy span { flex: 1; padding: 5px 0; border-radius: 5px; background: #dfe2dc; color: #5c625d; font: 600 9px/1 var(--sans); text-align: center; } .card__buy.is-off span { background: #ebede8; color: #8a908b; } .card__buy i { width: 18px; height: 18px; border-radius: 5px; border: 1px solid var(--shop-junk); } /* Detection frames and flying data (the beam itself is in css/scene.css) */ [data-f] { position: relative; transition: opacity 0.4s ease; } [data-f].is-hit { opacity: 0.35; } [data-f]::after { content: ""; position: absolute; inset: -2px -3px; border: 1.5px solid var(--sel); border-radius: 3px; background: rgb(var(--lime-rgb) / 0.22); opacity: 0; transition: opacity 0.18s ease; pointer-events: none; } [data-f].is-seen::after { opacity: 1; } .chip-f { position: absolute; top: 0; left: 0; max-width: 150px; padding: 2px 5px; border-radius: 4px; background: var(--lime); color: var(--on-lime); font: 600 11px/1.3 var(--mono); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; box-shadow: 0 4px 14px -2px rgb(var(--lime-rgb) / 0.55); will-change: transform; } @keyframes spin { to { transform: rotate(360deg); } } @media (min-width: 700px) { .sheet { --c-i: 32px; --c-p: 118px; --c-s: 104px; --c-k: 104px; --row: 30px; } .sheet__grid { font-size: 13.5px; } .c--price { font-size: 12.5px; } .c--sku { font-size: 11.5px; } .sheet__head, .sheet__head .c--price, .sheet__head .c--sku { font-size: 12px; } .site__grid { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; } .card__img { height: 80px; } .card__name { font-size: 11.5px; } .card__price b { font-size: 14px; } } @media (min-width: 1000px) { .site__grid { grid-template-columns: repeat(4, minmax(0, 1fr)); } .toast { font-size: 13.5px; } } /* Single-column grids never grow wider than the phone because of a long word */ .drift__in, .syms, .faq__grid, .scope__cols, .foot__row, .steps, .tabs, .qas { grid-template-columns: minmax(0, 1fr); } /* ===================================================================== CHANGES: the supplier moves, the table follows ===================================================================== */ .drift { margin-top: 36px; } .drift__in { display: grid; gap: 22px; } .dt { position: relative; overflow: hidden; border: 1px solid var(--line); border-radius: var(--r); background: var(--card); font: 400 14px/1.2 var(--mono); } .dt__days { display: flex; align-items: center; gap: 4px; padding: 9px 10px; border-bottom: 1px solid var(--line); background: #f4f6f1; } .dt__day { padding: 5px 9px; border-radius: 5px; color: var(--muted); font-size: 12px; } .dt__day.d3, .drift.is-live .dt__day.is-on { background: var(--ink); color: var(--paper); } .drift.is-live .dt__day.d3:not(.is-on) { background: none; color: var(--muted); } .dt__cap { margin-left: auto; color: var(--muted); font-size: 10.5px; letter-spacing: 0.04em; text-transform: uppercase; } .dt__head, .dt__row { display: grid; grid-template-columns: minmax(0, 1fr) 118px 92px; } .dt__head span { padding: 10px; color: var(--muted); font: 500 12px/1.2 var(--sans); } .dt__head span + span, .dt__row > span + span { border-left: 1px solid var(--line); } .dt__head span:nth-child(2) { text-align: right; } .dt__row > span { display: flex; align-items: center; height: 48px; padding: 0 10px; border-top: 1px solid var(--line); transition: background-color 0.5s ease; } .dt__name { font-family: var(--sans); font-size: 14px; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; display: block !important; line-height: 48px; } .dt__p { justify-content: flex-end; gap: 8px; font-variant-numeric: tabular-nums; } .dt__was { color: var(--was); font-size: 11px; transition: opacity 0.4s ease 0.3s; } .dt__s { gap: 6px; color: var(--ok); font-family: var(--sans); } .dt__s::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: currentColor; flex: none; } .roll { display: inline-grid; overflow: hidden; height: 1.3em; line-height: 1.3em; } .roll b { grid-area: 1 / 1; font-weight: 500; text-align: right; transition: transform 0.6s var(--ease-out); } /* Final (static) state: every change has happened and is marked */ .roll b:first-child { transform: translateY(-110%); } .roll b:last-child { transform: none; } .dt__row .dt__p--roll, .dt__row .dt__s--roll { background: var(--chg-bg); } .dt__s--roll { color: var(--no); } .dt__s--roll .roll b { text-align: left; } .dt__toast { margin-top: 10px; max-width: 460px; } .syms { display: grid; gap: 18px; } .sym { padding-top: 16px; border-top: 1px solid var(--line); } .sym__n { color: var(--sel); font: 500 12px/1 var(--mono); letter-spacing: 0.06em; margin-bottom: 8px; } .sym p:not(.sym__n) { margin-top: 6px; max-width: 40ch; color: var(--ink-2); font-size: 15.5px; } @media (min-width: 1000px) { .drift { margin-top: 56px; } .drift__in { grid-template-columns: minmax(0, 1.2fr) minmax(0, 0.8fr); gap: 72px; align-items: center; } .dt { font-size: 18px; border-radius: 18px; } .dt__days { padding: 12px 16px; } .dt__day { font-size: 14px; padding: 6px 12px; } .dt__head span { padding: 14px 18px; font-size: 14px; } .dt__head, .dt__row { grid-template-columns: minmax(0, 1fr) 190px 160px; } .dt__row > span { height: 68px; padding: 0 18px; } .dt__name { font-size: 18px; line-height: 68px; } .dt__was { font-size: 14px; } .dt__toast { margin-top: 14px; } .syms { gap: 28px; } .sym .h3 { font-size: 26px; } .sym p:not(.sym__n) { font-size: 17px; } } /* ===================================================================== HOW: the pipeline ===================================================================== */ .how__head { margin-bottom: 36px; } .pipe { position: relative; --id: 34px; } .pipe__row { display: grid; grid-template-columns: var(--id) minmax(0, 1fr); align-items: center; height: 34px; } .pipe__id { color: var(--night-muted); font: 500 12px/1 var(--mono); transition: color 0.3s ease; } .pipe__lane { position: relative; height: 100%; border-bottom: 1px solid var(--night-line); } .pipe__bar { position: absolute; top: 8px; bottom: 8px; left: calc(var(--i) * 33.33%); width: 33.33%; } .pipe__row--loop .pipe__bar { width: 12%; } .pipe__fill { position: absolute; inset: 0; border-radius: 3px; background: var(--lime); } .pipe__ok { position: absolute; right: 3px; top: 50%; width: 12px; height: 12px; margin-top: -6px; border-radius: 3px; background: var(--night); } .pipe__ok::after { content: ""; position: absolute; left: 3px; top: 2.5px; width: 5px; height: 3px; border-left: 1.6px solid var(--lime); border-bottom: 1.6px solid var(--lime); transform: rotate(-45deg); } .pipe__runs { position: absolute; top: 8px; bottom: 8px; left: calc(66.66% + 13%); right: 0; display: flex; justify-content: space-between; } .pipe__runs i { width: 9%; border-radius: 3px; background: var(--lime); } .pipe__cursor { display: none; } .steps { display: grid; gap: 26px; margin-top: 36px; } .step__meta { display: flex; align-items: center; gap: 12px; margin-bottom: 10px; } .step__num { color: var(--lime); font: 500 13px/1 var(--mono); } .cells { display: flex; gap: 3px; } .cells i { width: 14px; height: 6px; border-radius: 1.5px; background: var(--night-line); } .cells i.on { background: var(--lime); } .step p:not(.step__meta) { margin-top: 6px; max-width: 36ch; color: var(--night-muted); font-size: 15.5px; } @media (min-width: 1000px) { .pipe { --id: 48px; } .steps { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 40px; margin-top: 56px; padding-left: var(--id); } .pipe__row { height: 64px; } .pipe__bar, .pipe__runs { top: 18px; bottom: 18px; } .pipe__id { font-size: 14px; } .step__meta { flex-direction: column; align-items: flex-start; gap: 18px; } .step__num { color: transparent; -webkit-text-stroke: 1.4px var(--lime); font: 600 110px/0.86 var(--sans); letter-spacing: -0.05em; } .step .h3 { font-size: 26px; } .step p:not(.step__meta) { font-size: 17px; } } /* Short desktop windows (laptops at 720-800 px): a tighter pipeline keeps the scene pinned */ @media (min-width: 1000px) and (max-height: 820px) { .how__head { margin-bottom: 20px; } .pipe__row { height: 46px; } .pipe__bar, .pipe__runs { top: 13px; bottom: 13px; } .steps { margin-top: 32px; } .step__num { font-size: 80px; } } /* ===================================================================== TABLE: the columns you get ===================================================================== */ .grow { margin-top: 40px; padding-left: var(--gutter); overflow: hidden; } @media (min-width: 1000px) { .grow { width: min(100% - 2 * var(--gutter), 1200px); margin-inline: auto; padding-left: 0; } } .grow__track { display: inline-block; border: 1px solid var(--line); border-radius: 12px; background: var(--card); font: 400 12.5px/1 var(--mono); overflow: hidden; } .grow__row { display: grid; grid-template-columns: 28px 150px 76px 92px 72px 86px 140px 96px 120px; } .grow__row > span { display: flex; align-items: center; height: 36px; padding: 0 9px; border-right: 1px solid var(--line); border-bottom: 1px solid var(--line); white-space: nowrap; } .grow__row:last-child > span { border-bottom: 0; } .grow__row > span:last-child { border-right: 0; } .grow__row > span:first-child { justify-content: center; padding: 0; background: #f1f3ee; color: var(--muted); font-size: 10.5px; } .grow__row--letters > span { height: 20px; justify-content: center; background: #f1f3ee; color: var(--muted); font-size: 10.5px; } .grow__row--head > span { font: 600 12.5px/1 var(--sans); } .grow__row .b { background: rgb(var(--lime-rgb) / 0.2); } .grow__row--head .b { background: rgb(var(--lime-rgb) / 0.55); } .grow__row .o { color: var(--muted); border-right-style: dashed; } .grow__row--head .o::before { content: "+"; margin-right: 6px; color: var(--sel); font-family: var(--mono); font-weight: 600; } .ph { display: block; width: 70%; height: 7px; border-radius: 4px; background: var(--paper-2); } .ph--s { width: 40%; } .ph--img { width: 22px; height: 18px; border-radius: 4px; } .scope__cols { display: grid; gap: 14px; margin-top: 28px; } .scope__col { padding: 22px 20px; border: 1px solid var(--line); border-radius: var(--r); background: var(--card); } .scope__col--opt { background: transparent; border-style: dashed; border-color: var(--line-2); } .scope__top { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 16px; } .ticklist { display: grid; gap: 11px; font-size: 16px; } .ticklist li { position: relative; padding-left: 28px; } .ticklist li::before { content: ""; position: absolute; left: 0; top: 3px; width: 18px; height: 18px; border-radius: 5px; background: var(--lime); } .ticklist li::after { content: ""; position: absolute; left: 5px; top: 7px; width: 8px; height: 5px; border-left: 2px solid var(--ink); border-bottom: 2px solid var(--ink); transform: rotate(-45deg); } .ticklist--plus li::before { background: none; border: 1.5px dashed var(--line-2); } .ticklist--plus li::after { content: "+"; left: 0; top: 3px; display: flex; align-items: center; justify-content: center; width: 18px; height: 18px; border: 0; transform: none; font: 600 14px/1 var(--mono); color: var(--ink); } @media (min-width: 700px) { .scope__cols { grid-template-columns: 1fr 1.4fr; } .ticklist--plus { grid-template-columns: 1fr 1fr; } } /* ===================================================================== CARE: workbook tabs on the dark desk ===================================================================== */ .tabs { display: grid; gap: 50px; margin-top: 64px; } .tcard { position: relative; padding: 22px 20px 24px; border: 1px solid var(--line); border-radius: 0 var(--r) var(--r) var(--r); background: var(--card); color: var(--ink); } .tcard__tab { position: absolute; left: calc(-1px + var(--i) * min(30vw, 118px)); bottom: 100%; display: flex; align-items: center; gap: 8px; height: 30px; padding: 0 12px; border: 1px solid var(--line); border-bottom: 0; border-radius: 8px 8px 0 0; background: var(--card); font: 500 12px/1 var(--mono); white-space: nowrap; } .tcard__tab::after { content: ""; position: absolute; left: 0; right: 0; bottom: -1px; height: 2px; background: var(--card); } .tcard__tab span { color: var(--sel); font-weight: 600; } .tcard:first-child { border-top-left-radius: 0; } .tcard:not(:first-child) { border-top-left-radius: var(--r); } .tcard__art { display: flex; flex-wrap: wrap; gap: 6px; min-height: 64px; margin-bottom: 18px; } .chip { display: inline-flex; align-items: center; gap: 6px; height: 30px; padding: 0 10px; border: 1px solid var(--line); border-radius: 8px; background: var(--paper); font: 500 13px/1 var(--sans); } .chip svg { width: 15px; height: 15px; fill: none; stroke: var(--ink); stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; } .chip--mono { font-family: var(--mono); } .tcard__art--code { display: grid; gap: 0; padding: 10px 12px; border-radius: 10px; background: var(--night); color: var(--night-ink); font: 400 12.5px/1.8 var(--mono); } .tcard__art--code p { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 12px; } .tcard__art--code b { color: var(--lime); font-weight: 500; } .tcard__art--log { display: grid; gap: 7px; font: 400 13px/1.2 var(--mono); } .tcard__art--log p { display: flex; align-items: center; gap: 8px; } .tcard__art--log .dot--ok { background: var(--ok); } .tcard__art--log .dot--chg { background: #d79a12; } .tcard .h3 { margin-bottom: 8px; } .tcard p:not(.tcard__tab) { color: var(--ink-2); font-size: 15.5px; } .tcard .tcard__art p { color: inherit; font-size: inherit; } .tcard__art--code p { color: var(--night-ink) !important; } @media (min-width: 1000px) { .tabs { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 20px; } .tcard__tab { left: -1px; } .tcard:not(:first-child) { border-top-left-radius: 0; } } /* ===================================================================== PRICE ===================================================================== */ .cells2 { position: relative; display: grid; margin-top: 36px; border: 1px solid var(--line-2); border-radius: var(--r); background: var(--card); } .pc { position: relative; padding: 24px 22px 26px; } .pc + .pc { border-top: 1px solid var(--line); } .pc__k { color: var(--muted); font: 500 12px/1 var(--mono); letter-spacing: 0.08em; text-transform: uppercase; } .pc__v { margin: 16px 0 12px; font: 600 clamp(52px, 8vw + 20px, 88px)/0.95 var(--sans); letter-spacing: -0.05em; font-variant-numeric: tabular-nums; white-space: nowrap; } .pc__pre { margin-right: 8px; color: var(--muted); font: 500 17px/1 var(--sans); letter-spacing: 0; } .pc__per { margin-left: 6px; color: var(--muted); font: 500 17px/1 var(--sans); letter-spacing: 0; } .pc__c { color: var(--ink-2); font-size: 15px; } .cells2__sel { display: none; } .price__notes { display: grid; gap: 8px; margin-top: 22px; color: var(--ink-2); font-size: 15.5px; } .price__notes li { position: relative; padding-left: 20px; } .price__notes li::before { content: ""; position: absolute; left: 2px; top: 0.62em; width: 8px; height: 8px; border-radius: 2px; background: var(--sel); } .price__cta { margin-top: 28px; } .price__cta .btn { width: 100%; } @media (min-width: 700px) { .cells2 { grid-template-columns: 1fr 1fr; } .pc + .pc { border-top: 0; border-left: 1px solid var(--line); } .pc { padding: 34px 32px 36px; } .price__notes { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 24px; } .price__cta .btn { width: auto; } } /* ===================================================================== FAQ (on the dark desk) ===================================================================== */ .faq { padding-bottom: 32px; } .faq__grid { display: grid; gap: 32px; } .qas { display: grid; gap: 10px; } .qa { border: 1px solid var(--night-line); border-radius: var(--r); background: var(--night-2); overflow: hidden; transition: border-color 0.3s ease; } .qa[open] { border-color: #34423a; } .qa summary { display: flex; align-items: center; justify-content: space-between; gap: 16px; min-height: 60px; padding: 16px 18px; font: 600 16.5px/1.35 var(--sans); letter-spacing: -0.01em; list-style: none; cursor: pointer; } .qa summary::-webkit-details-marker { display: none; } .qa__ic { position: relative; width: 26px; height: 26px; flex: none; border: 1px solid var(--night-line); border-radius: 7px; transition: background-color 0.3s ease, border-color 0.3s ease, transform 0.4s var(--ease-out); } .qa__ic::before, .qa__ic::after { content: ""; position: absolute; left: 50%; top: 50%; width: 10px; height: 1.6px; margin: -0.8px 0 0 -5px; background: var(--night-ink); transition: transform 0.4s var(--ease-out); } .qa__ic::after { transform: rotate(90deg); } .qa[open] .qa__ic { background: var(--lime); border-color: var(--lime); transform: rotate(45deg); } .qa[open] .qa__ic::before, .qa[open] .qa__ic::after { background: var(--on-lime); } .qa__a { overflow: hidden; } .qa__a p { padding: 0 18px 18px; max-width: 62ch; color: var(--night-muted); font-size: 15.5px; } .qa__a a { color: var(--lime); font-weight: 600; text-decoration: underline; text-underline-offset: 3px; } .qa.is-closing .qa__ic { background: none; border-color: var(--night-line); transform: none; } .qa.is-closing .qa__ic::before, .qa.is-closing .qa__ic::after { background: var(--night-ink); } @media (min-width: 1000px) { .faq__grid { grid-template-columns: 0.8fr 1.2fr; gap: 64px; } } /* ===================================================================== FINAL + FOOTER ===================================================================== */ .final { overflow: hidden; } .final::before { content: ""; position: absolute; inset: 0; background-image: linear-gradient(var(--night-line) 1px, transparent 1px), linear-gradient(90deg, var(--night-line) 1px, transparent 1px); background-size: 88px 32px; opacity: 0.35; -webkit-mask-image: radial-gradient(80% 70% at 70% 40%, #000, transparent 75%); mask-image: radial-gradient(80% 70% at 70% 40%, #000, transparent 75%); pointer-events: none; } .final__in { position: relative; } .final__h { max-width: 14ch; font-size: clamp(34px, 7vw + 6px, 76px); } .final .lead { max-width: 46ch; } .check--final { max-width: 620px; margin-top: 26px; } .final__in > .go { max-width: 620px; margin-top: 10px; } .final__more { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 20px; max-width: 620px; margin-top: 16px; } .final__remark { margin-top: 16px; color: var(--night-muted); font-size: 14px; } .foot { padding: 56px 0 40px; border-top: 1px solid var(--night-line); } .paper + .foot, .night + .foot { border-radius: 0; margin-top: 0; } .foot__brand { position: relative; margin-bottom: 44px; font: 600 clamp(56px, 17vw, 240px)/0.9 var(--sans); letter-spacing: -0.055em; white-space: nowrap; } .foot__line { display: block; color: transparent; -webkit-text-stroke: 1px var(--night-line); } .foot__fill { display: none; position: absolute; left: 0; top: 0; color: var(--night-3); } .foot__dot { display: inline-block; width: 0.2em; height: 0.2em; margin: 0 0.06em; background: var(--lime); color: transparent; overflow: hidden; line-height: 0.2em; -webkit-text-stroke: 0; } .foot__row { display: grid; gap: 28px; } .foot__desc { margin-top: 12px; max-width: 34ch; color: var(--night-muted); font-size: 14.5px; } .foot__h { margin-bottom: 10px; color: var(--night-faint); font: 500 11px/1 var(--mono); letter-spacing: 0.08em; text-transform: uppercase; } .foot__col a { display: block; padding: 6px 0; color: var(--night-muted); font-size: 15px; } .foot__col a:hover { color: var(--night-ink); } .foot__copy { margin-top: 36px; padding-top: 18px; border-top: 1px solid var(--night-line); color: var(--night-faint); font-size: 13px; } @media (min-width: 700px) { .foot__row { grid-template-columns: 1.4fr 1fr 1fr; } } /* ===================================================================== MODAL ===================================================================== */ .modal { position: fixed; inset: 0; z-index: 100; display: flex; align-items: center; justify-content: center; padding: 16px; } .modal__bg { position: absolute; inset: 0; background: rgb(6 9 8 / 0.62); } @supports (backdrop-filter: blur(1px)) { .modal__bg { backdrop-filter: blur(3px); } } .modal__card { position: relative; width: 100%; max-width: 440px; max-height: calc(100% - 8px); overflow-y: auto; padding: 28px 22px 22px; border-radius: 18px; background: var(--paper); color: var(--ink); box-shadow: 0 30px 80px -20px rgb(0 0 0 / 0.6); } .modal__x { position: absolute; top: 10px; right: 10px; display: flex; align-items: center; justify-content: center; width: 40px; height: 40px; border: 0; border-radius: 10px; background: none; color: var(--muted); } .modal__x svg { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; } .modal__x:hover { background: var(--paper-2); color: var(--ink); } .modal__t { padding-right: 36px; font: 600 22px/1.2 var(--sans); letter-spacing: -0.02em; } .modal__sub { margin: 8px 0 18px; color: var(--ink-2); font-size: 15px; } #leadForm { display: grid; gap: 10px; } #leadForm input { height: 52px; padding: 0 14px; border: 1px solid var(--line-2); border-radius: 12px; background: var(--card); color: var(--ink); font-size: 16px; } #leadForm input:focus-visible { outline: none; border-color: var(--sel); box-shadow: 0 0 0 3px rgb(var(--lime-rgb) / 0.45); } #leadForm .hp { position: absolute; left: -9999px; width: 1px; height: 1px; } #leadForm .btn { width: 100%; margin-top: 4px; } .modal__err { margin-top: 12px; color: var(--no); font-size: 14px; } .modal__err a, .modal__done a { color: var(--lime-ink); font-weight: 600; text-decoration: underline; } .modal__fine { margin-top: 12px; color: var(--muted); font-size: 13px; text-align: center; } .modal__done { padding: 18px 0 6px; text-align: center; } .modal__done-h { display: flex; flex-direction: column; align-items: center; gap: 12px; font: 600 18px/1.35 var(--sans); } .modal__done-h svg { width: 44px; height: 44px; padding: 10px; border-radius: 12px; background: var(--lime); fill: none; stroke: var(--ink); stroke-width: 2.4; stroke-linecap: round; stroke-linejoin: round; } .modal__done-s { margin-top: 10px; color: var(--ink-2); font-size: 14.5px; } .modal__src { display: grid; gap: 3px; margin: -6px 0 16px; padding: 10px 12px; border: 1px dashed var(--line-2); border-radius: 10px; font-size: 13.5px; } .modal__src span { color: var(--muted); font: 500 11px/1.2 var(--mono); letter-spacing: 0.04em; text-transform: uppercase; } .modal__src b { font-weight: 500; overflow-wrap: anywhere; } /* ===================================================================== Motion mode. Everything below only applies when the scripts run. ===================================================================== */ html.motion .progress { display: block; position: fixed; top: 0; left: 0; right: 0; z-index: 70; height: 2px; pointer-events: none; } .progress__bar { display: block; height: 100%; background: var(--lime); transform: scaleX(0); transform-origin: 0 50%; } /* Section labels type themselves in */ .fx.is-live .fx__v { clip-path: inset(0 100% 0 0); transition: clip-path 0.7s steps(12, end) 0.15s; } .fx.is-live .fx__cell::after { content: ""; position: absolute; inset: 2px; border: 1.5px solid var(--sel); border-radius: 3px; transform: scale(1.6); opacity: 0; transition: transform 0.5s var(--ease-out), opacity 0.3s ease; } .night .fx.is-live .fx__cell::after { border-color: var(--lime); } .fx.is-live.is-in .fx__v { clip-path: inset(0 0 0 0); } .fx.is-live.is-in .fx__cell::after { transform: none; opacity: 1; } /* Split text masks get a little air, so descenders and accents are never cut */ .hl-mask { padding: 0.08em 0.04em 0.14em; margin: -0.08em -0.04em -0.14em; } /* Changes: pinned while it fits; day by day the cells change and are marked */ .drift.is-live .roll b:first-child { transform: none; } .drift.is-live .roll b:last-child { transform: translateY(110%); } .drift.is-live .dt__was { opacity: 0; } .drift.is-live .dt__row .dt__p--roll, .drift.is-live .dt__row .dt__s--roll { background: none; } .drift.is-live .dt__s--roll { color: var(--ok); transition: color 0.4s ease 0.3s; } .drift.is-live .dt__toast { opacity: 0; transform: translateY(14px); transition: opacity 0.4s ease, transform 0.6s var(--ease-out); } .drift.is-live.s1 .r1 .roll b:first-child, .drift.is-live.s2 .r2 .roll b:first-child, .drift.is-live.s3 .r3 .roll b:first-child, .drift.is-live.s3 .r4 .roll b:first-child { transform: translateY(-110%); } .drift.is-live.s1 .r1 .roll b:last-child, .drift.is-live.s2 .r2 .roll b:last-child, .drift.is-live.s3 .r3 .roll b:last-child, .drift.is-live.s3 .r4 .roll b:last-child { transform: none; } .drift.is-live.s1 .r1 .dt__was, .drift.is-live.s3 .r3 .dt__was, .drift.is-live.s3 .r4 .dt__was { opacity: 1; } .drift.is-live.s1 .r1 .dt__p, .drift.is-live.s2 .r2 .dt__s--roll, .drift.is-live.s3 .r3 .dt__p, .drift.is-live.s3 .r4 .dt__p { background: var(--chg-bg); transition-delay: 0.3s; } .drift.is-live.s2 .r2 .dt__s--roll { color: var(--no); } .drift.is-live.s3 .dt__toast { opacity: 1; transform: none; transition-delay: 0.5s; } .drift.is-pinned .drift__stage { position: sticky; top: var(--top-h); display: flex; align-items: center; min-height: calc(100vh - var(--top-h)); min-height: calc(100svh - var(--top-h)); padding: 20px 0; } @media (max-width: 999px) { .drift.is-pinned .drift__stage { align-items: stretch; padding: 14px 0 20px; } .drift.is-pinned .drift__in { display: flex; flex-direction: column; gap: 0; min-height: calc(100svh - var(--top-h) - 34px); } .drift.is-pinned .syms { display: grid; margin-top: auto; padding-top: 12px; } .drift.is-pinned .sym { grid-area: 1 / 1; padding-top: 0; border-top: 0; opacity: 0; visibility: hidden; transition: opacity 0.25s ease, visibility 0s linear 0.25s; } .drift.is-pinned .sym.is-now { opacity: 1; visibility: visible; transition: opacity 0.3s ease 0.1s, visibility 0s; } .drift.is-pinned .sym__n { margin-bottom: 10px; color: transparent; -webkit-text-stroke: 1.4px var(--sel); font: 600 clamp(72px, 22vw, 130px)/0.86 var(--sans); letter-spacing: -0.05em; } .drift.is-pinned .sym .h3 { font-size: 23px; } } /* Short phones and in-app browsers: a smaller number keeps the scene pinned (js/main.js drift() counts 52 px) */ @media (max-width: 999px) and (max-height: 759px) { .drift.is-pinned .sym__n { font-size: 52px; margin-bottom: 8px; } } @media (min-width: 1000px) { .drift.is-live .sym { opacity: 0.3; transition: opacity 0.5s ease; } .drift.is-live .sym.is-now, .drift.is-live .sym.is-done { opacity: 1; } } /* Care: on phones the sheets stack into a workbook, tabs side by side */ @media (max-width: 999px) { .tabs.is-live { gap: 10vh; } .tabs.is-live .tcard { position: sticky; top: calc(var(--top-h) + 44px); min-height: var(--tmin, 300px); box-shadow: 0 -8px 24px -14px rgb(0 0 0 / 0.6); } .tabs.is-live .tcard__shade { position: absolute; inset: 0; border-radius: inherit; background: var(--night); opacity: 0; pointer-events: none; } } .tabs.is-live .tcard.is-under .tcard__tab { background: var(--paper-2); color: var(--muted); } .tabs.is-live .tcard.is-under .tcard__tab::after { background: var(--paper-2); } /* How: pinned pipeline (only when it fits) */ .how.is-live .pipe__cursor { display: block; position: absolute; top: -12px; bottom: 0; left: var(--id); right: 0; pointer-events: none; } .pipe__pin { position: absolute; top: 0; bottom: 0; left: 0; width: 2px; margin-left: -1px; background: var(--night-ink); will-change: transform; } .pipe__pin i { position: absolute; left: 50%; top: -2px; width: 12px; height: 12px; margin-left: -6px; background: var(--night-ink); clip-path: polygon(0 0, 100% 0, 50% 100%); } .how.is-live .pipe__fill { clip-path: inset(0 100% 0 0); background: repeating-linear-gradient(-45deg, var(--lime) 0 3px, transparent 3px 7px); } .how.is-live .pipe__row.is-done .pipe__fill { background: var(--lime); } .how.is-live .pipe__ok { opacity: 0; transform: scale(0.3); transition: opacity 0.25s ease, transform 0.5s var(--ease-out); } .how.is-live .pipe__row.is-done .pipe__ok { opacity: 1; transform: none; } .how.is-live .pipe__runs i { opacity: 0; transform: scaleY(0.2); transition: opacity 0.2s ease, transform 0.4s var(--ease-out); } .how.is-live .pipe__runs i.is-on { opacity: 1; transform: none; } .how.is-live .pipe__row.is-now .pipe__id, .how.is-live .pipe__row.is-done .pipe__id { color: var(--lime); } .how.is-pinned .how__stage { position: sticky; top: var(--top-h); display: flex; flex-direction: column; min-height: calc(100vh - var(--top-h)); min-height: calc(100svh - var(--top-h)); padding: 28px 0 32px; } @media (max-width: 999px) { .how.is-pinned .how__in { display: flex; flex: 1 1 auto; flex-direction: column; } .how.is-pinned .steps { display: grid; margin-top: auto; padding-top: 24px; } .how.is-pinned .step { grid-area: 1 / 1; opacity: 0; visibility: hidden; transition: opacity 0.22s ease, visibility 0s linear 0.22s; } .how.is-pinned .step.is-now { opacity: 1; visibility: visible; transition: opacity 0.2s ease 0.08s, visibility 0s; } .how.is-pinned .pipe__row { height: 44px; } .how.is-pinned .pipe__bar, .how.is-pinned .pipe__runs { top: 11px; bottom: 11px; } .how.is-pinned .step__meta { flex-direction: column; align-items: flex-start; gap: 14px; } .how.is-pinned .step__num { color: transparent; -webkit-text-stroke: 1.4px var(--lime); font: 600 clamp(72px, 22vw, 130px)/0.86 var(--sans); letter-spacing: -0.05em; } .how.is-pinned .step .h3 { font-size: 23px; } } @media (min-width: 1000px) { .how.is-pinned .how__stage { justify-content: center; } .how.is-live .step { opacity: 0.3; transition: opacity 0.6s ease; } .how.is-live .step.is-now, .how.is-live .step.is-done { opacity: 1; } } /* Price: the selection walks from cell to cell */ .cells2.is-live .cells2__sel { display: block; position: absolute; top: -1px; left: -1px; z-index: 2; border: 2px solid var(--sel); border-radius: var(--r); pointer-events: none; opacity: 0; } .cells2__sel i { position: absolute; right: -6px; bottom: -6px; width: 10px; height: 10px; background: var(--sel); border: 2px solid var(--card); } /* Footer brand pours in */ html.motion .foot__fill { display: block; } /* Smooth scrolling library (desktop only) */ html.lenis, html.lenis body { height: auto; } .lenis.lenis-smooth { scroll-behavior: auto !important; } .lenis.lenis-stopped { overflow: hidden; } /* ===================================================================== Still mode: reduced motion or ?still. Final states, nothing moves. ===================================================================== */ html.still *, html.still *::before, html.still *::after { animation: none !important; transition: none !important; } @media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation: none !important; transition: none !important; scroll-behavior: auto !important; } }