/* ========================================================================== Appservices — the v2 landing's hero stage, "one automation flow" (P11 D-405; js/site2/show.js draws it, the static poster in index-v2.html is its final state). Three linked panels on the brand gradient: the sign-in showcase's demonstrations (account_app/css/showcase.css, copied and re-scoped from body.auth.as-a2 to .lp-show; the sign-in files are unchanged), CAPTCHA → BLS Script → Remote Selfie, a data pulse along the links. No pointer, no click: the AI and the script work by themselves. The rules (restated from D-303, pinned by tests/core/test_p11_show.py): every part's base style is its FINAL state (the poster, a paused or resting panel, the calm version's end); motion runs only in the panel on show (.lp-panel.is-on, which only show.js sets); keyframes move transform and opacity only (the calm version's held states excepted); a lasting part animates `from` its start, a passing effect (.a2-fx, .lp-pulse) is hidden at rest and ends hidden; a demonstration's rule that times an animation sets its delay AND duration, and every demonstration's motion ends by 2.5 s of its 3 s; the pulse runs in the slot's last half second; nothing is endless. States on the stage: is-live (show.js mounted), is-still (paused: every animation dropped, the final state), is-calm (prefers-reduced-motion: discrete states, opacity only, the next panel outlined instead of the pulse). Sizes: 21:8 from 1024 px, the same three panels at 2:1 from 768 px, one panel at a time in 4:3 under 768 px. ========================================================================== */ /* ── the stage, its panels and links ─────────────────────────────────────────────────────────────────────────── */ .lp-show { position: relative; z-index: 0; box-sizing: border-box; width: 100%; max-width: 1120px; margin-inline: auto; aspect-ratio: 21 / 8; overflow: hidden; border-radius: var(--as-radius-30); background: radial-gradient(70% 90% at 50% 0%, rgba(109, 155, 255, .38), transparent 70%), linear-gradient(160deg, var(--as-brand-600), var(--as-brand-800)); box-shadow: 0 40px 80px -48px rgba(0, 49, 174, .7); color: var(--as-neutral-950); } /* the sign-in panel's faint 40 px grid, fading toward the edges */ .lp-show::before { content: ""; position: absolute; inset: 0; z-index: -1; background-image: linear-gradient(to right, rgba(255, 255, 255, .08) 1px, transparent 1px), linear-gradient(to bottom, rgba(255, 255, 255, .08) 1px, transparent 1px); background-size: 40px 40px; mask-image: radial-gradient(80% 80% at 50% 50%, #000 30%, transparent 85%); } .lp-flow { position: absolute; inset: 0; display: grid; align-items: center; padding-inline: 3%; grid-template-columns: minmax(0, 1fr) 5% minmax(0, 1fr) 5% minmax(0, 1fr); grid-template-rows: minmax(0, 1fr); } .lp-panel { position: relative; display: grid; grid-template: 1fr / 1fr; box-sizing: border-box; inline-size: 100%; aspect-ratio: 1; container-type: inline-size; border-radius: var(--as-radius-22); transition: transform .45s var(--as-ease), opacity .45s var(--as-ease); } .lp-show.is-live .lp-panel:not(.is-on) { opacity: .85; } .lp-panel.is-on { z-index: 1; transform: scale(1.03); } /* the lift's shadow: a layer that fades in (the phone has its own) */ .lp-panel::after { content: ""; position: absolute; inset: 0; z-index: -1; border-radius: inherit; opacity: 0; box-shadow: 0 28px 56px -18px rgba(3, 14, 48, .65), 0 0 0 1px rgba(255, 255, 255, .35); transition: opacity .45s var(--as-ease); } .lp-panel.is-on:not(.lp-panel-3)::after { opacity: 1; } /* the calm version's outline on the next panel (on the phone in the third) */ .lp-panel-1, .lp-panel-2, .lp-show .lp-panel-3 .a2-phone { outline: 3px solid transparent; outline-offset: 5px; } /* a link between two panels: a thin line, its end (the next panel's side) marked. Physical sides on purpose: in RTL the whole link is mirrored once (scaleX(-1)), so the end mark sits on the left and the pulse runs right to left */ .lp-link { position: relative; align-self: center; block-size: 30px; overflow: hidden; } .lp-link::before { content: ""; position: absolute; right: 6%; left: 6%; inset-block-start: 14px; block-size: 2px; border-radius: var(--as-radius-pill); background: linear-gradient(to right, rgba(255, 255, 255, .2), rgba(255, 255, 255, .65)); } .lp-link::after { content: ""; position: absolute; right: 2%; inset-block-start: 12px; inline-size: 6px; block-size: 6px; border-radius: 50%; background: rgba(255, 255, 255, .8); } :root[dir="rtl"] .lp-link { transform: scaleX(-1); } /* the data pulse (a passing effect: hidden at rest): a bright head with its tail, run once across the link */ .lp-pulse { position: absolute; inset: 0; opacity: 0; background: radial-gradient(circle at 88% 50%, #fff 0 4px, rgba(191, 219, 254, .95) 5px, rgba(147, 197, 253, 0) 14px), linear-gradient(to right, transparent 20%, rgba(191, 219, 254, .9) 86%, transparent 88%) center / 100% 3px no-repeat; } @media (min-width: 768px) and (max-width: 1023px) { .lp-show { aspect-ratio: 2 / 1; } .lp-flow { padding-inline: 2.5%; grid-template-columns: minmax(0, 1fr) 3% minmax(0, 1fr) 3% minmax(0, 1fr); } } @media (max-width: 767px) { .lp-show { aspect-ratio: 4 / 3; } .lp-flow { grid-template-columns: minmax(0, 1fr); justify-items: center; padding: 4%; } .lp-panel { grid-area: 1 / 1; inline-size: auto; block-size: 100%; } .lp-link { display: none; } .lp-panel.is-on { transform: none; } .lp-show.is-live .lp-panel:not(.is-on), .lp-show:not(.is-live) .lp-panel:not(.lp-panel-1) { opacity: 0; } } @media (prefers-reduced-motion: reduce) { .lp-panel { transition-property: opacity; } } /* a narrow panel (768-1023 px, phones): a demonstration's header text on two lines at most, smaller */ @container (max-width: 279px) { .lp-show .a2-frame .a2-task, .lp-show .a2-frame .a2-cal-name { display: -webkit-box; overflow: hidden; font-size: 9px; line-height: 1.15; -webkit-line-clamp: 2; -webkit-box-orient: vertical; } } /* ── a demonstration: a white card (a picture of a page, white in both themes); every part placed in percent ──── */ .lp-show .a2-frame { grid-area: 1 / 1; position: relative; box-sizing: border-box; min-inline-size: 0; overflow: hidden; container-type: inline-size; background: var(--as-neutral-0); color: var(--as-neutral-950); border-radius: var(--as-radius-22); box-shadow: var(--as-shadow-l); line-height: 1.25; text-align: start; } .lp-show .a2-frame span, .lp-show .a2-frame bdi { display: block; } .lp-show .a2-frame bdi { unicode-bidi: isolate; } /* a passing effect: out of the flow, hidden in its final state, never in the way */ .lp-show .a2-frame .a2-fx { position: absolute; opacity: 0; pointer-events: none; } /* the ✓ (CSS borders: no image, no data: URL), sized by its box's font-size */ .lp-show .a2-frame .a2-check { inline-size: .32em; block-size: .62em; margin-block-start: -.18em; border: solid currentColor; border-width: 0 .15em .15em 0; transform: rotate(45deg); } /* the outcome chip: green, white text, a white disc with the ✓ (white on --as-ok-700: 6.59:1) */ .lp-show .a2-frame .a2-chip { position: absolute; z-index: 4; display: flex; align-items: center; gap: 1.8cqi; box-sizing: border-box; block-size: 9.5%; padding-inline: 1.6cqi 3.8cqi; border-radius: var(--as-radius-pill); background: var(--as-ok-700); color: var(--as-neutral-0); font-size: max(10px, 3.7cqi); font-weight: 700; white-space: nowrap; box-shadow: 0 1.4cqi 3.6cqi -1.2cqi rgba(10, 107, 63, .7), 0 0 0 1cqi rgba(18, 161, 80, .16); } .lp-show .a2-frame .a2-chip-icon { display: grid; place-items: center; flex: none; inline-size: 5.4cqi; block-size: 5.4cqi; border-radius: 50%; background: var(--as-neutral-0); color: var(--as-ok-700); font-size: 4.2cqi; } /* a marked target's tick: a white disc with a ✓ in its top corner */ .lp-show .a2-frame .a2-tick { position: absolute; inset-block-start: 8%; right: 5%; display: grid; place-items: center; inline-size: 4.4cqi; block-size: 4.4cqi; border-radius: 50%; background: var(--as-neutral-0); font-size: 3.2cqi; } /* a target marked by the AI or the script: a glow of the target's shape spreading from it (not a click's ripple) */ .lp-show .a2-frame .a2-fx-glow { z-index: 3; inset: -1px; box-sizing: border-box; border-radius: inherit; border: .6cqi solid var(--as-brand-400); box-shadow: 0 0 2.6cqi .4cqi rgba(61, 116, 255, .55); } /* who does the work: the AI / the script's badge (white on the brand gradient: 6.75:1 at its lightest) */ .lp-show .a2-frame .a2-ai { position: relative; flex: none; display: flex; align-items: center; gap: 1.2cqi; padding: 1cqi 2.4cqi; border-radius: var(--as-radius-pill); background: linear-gradient(135deg, var(--as-brand-600), var(--as-brand-800)); color: var(--as-neutral-0); font-size: max(9px, 3cqi); font-weight: 800; letter-spacing: .04em; } .lp-show .a2-frame .a2-ai-dot { flex: none; inline-size: 1.4cqi; block-size: 1.4cqi; border-radius: 50%; background: var(--as-ok-300); } .lp-show .a2-frame .a2-fx-ping { inset: 0; border: 2px solid var(--as-brand-400); border-radius: var(--as-radius-pill); } /* the work's status line ("AI solving…"): a light pill, a spinner, brand text (--as-brand-700 on --as-brand-50: 7.6:1), where the outcome chip then pops */ .lp-show .a2-frame .a2-fx-status { z-index: 3; display: flex; align-items: center; gap: 1.8cqi; box-sizing: border-box; block-size: 9.5%; padding-inline: 2.2cqi 3.6cqi; border: 1px solid var(--as-brand-100); border-radius: var(--as-radius-pill); background: var(--as-brand-50); color: var(--as-brand-700); font-size: max(10px, 3.6cqi); font-weight: 700; white-space: nowrap; } .lp-show .a2-frame .a2-fx-spinner { position: relative; flex: none; box-sizing: border-box; inline-size: 3.6cqi; block-size: 3.6cqi; border-radius: 50%; border: .6cqi solid var(--as-brand-100); border-top-color: var(--as-brand-600); } /* the scanned zone: the beam passes over the targets (above them), inside the zone only */ .lp-show .a2-frame .a2-zone { position: absolute; z-index: 2; overflow: hidden; pointer-events: none; border-radius: 2cqi; } /* a demonstration's header row */ .lp-show .a2-frame .a2-toprow { position: absolute; left: 6%; right: 6%; top: 4.5%; block-size: 11%; display: flex; align-items: center; gap: 3cqi; } /* ── 1 CAPTCHA Solver: the AI beam scans the grid, frames the three 482 tiles, then marks them by itself ───────── */ .lp-show .a2-frame-1 .a2-task { flex: 1 1 auto; min-inline-size: 0; font-size: max(10px, 3.7cqi); font-weight: 700; } .lp-show .a2-frame-1 .a2-zone { left: 6%; top: 18%; inline-size: 88%; block-size: 64%; } .lp-show .a2-frame-1 .a2-fx-beam { left: 0; right: 0; top: 0; block-size: 24%; border-block-end: 2px solid var(--as-brand-400); background: linear-gradient(to bottom, rgba(61, 116, 255, 0), rgba(61, 116, 255, .16) 55%, rgba(109, 155, 255, .45)); box-shadow: 0 8px 20px -6px rgba(0, 70, 238, .55); } .lp-show .a2-frame-1 .a2-tile { position: absolute; z-index: 1; display: grid; place-items: center; box-sizing: border-box; inline-size: 27.33%; block-size: 19.33%; border: 1px solid var(--as-neutral-150); border-radius: 2.6cqi; background: var(--as-neutral-75); color: var(--as-neutral-950); font: 700 4.6cqi / 1 var(--as-font-display); font-variant-numeric: tabular-nums; } .lp-show .a2-frame-1 .a2-c1 { left: 6%; } .lp-show .a2-frame-1 .a2-c2 { left: 36.33%; } .lp-show .a2-frame-1 .a2-c3 { left: 66.67%; } .lp-show .a2-frame-1 .a2-r1 { top: 18%; } .lp-show .a2-frame-1 .a2-r2 { top: 40.33%; } .lp-show .a2-frame-1 .a2-r3 { top: 62.67%; } /* the AI's detection frame (dashed), then the marked tile: brand blue, white number (6.75:1), its tick */ .lp-show .a2-frame-1 .a2-fx-detect { inset: -3px; border: 2px dashed var(--as-brand-500); border-radius: 3cqi; } .lp-show .a2-frame-1 .a2-on { position: absolute; inset: -1px; display: grid; place-items: center; border-radius: inherit; background: var(--as-brand-600); color: var(--as-neutral-0); box-shadow: 0 0 0 .9cqi rgba(61, 116, 255, .28); } .lp-show .a2-frame-1 .a2-tick { color: var(--as-brand-600); } .lp-show .a2-frame-1 .a2-done, .lp-show .a2-frame-1 .a2-fx-status { left: 0; right: 0; top: 86%; margin-inline: auto; inline-size: max-content; } /* ── 2 Script Automation Booking: the script's highlight steps over the taken dates and lands on the first free one (green), the free time is picked, Booked ─────────────────────────────────────────────────────────────────────── */ .lp-show .a2-frame-2 .a2-cal-icon { position: relative; flex: none; inline-size: 7cqi; block-size: 7cqi; border-radius: 1.8cqi; background: linear-gradient(160deg, var(--as-brand-600), var(--as-brand-800)); } .lp-show .a2-frame-2 .a2-cal-icon::before { content: ""; position: absolute; inset: 36% 22% 20%; border-radius: .6cqi; background: rgba(255, 255, 255, .92); } .lp-show .a2-frame-2 .a2-cal-name { flex: 1 1 auto; min-inline-size: 0; font-size: max(10px, 3.7cqi); font-weight: 700; } .lp-show .a2-frame-2 .a2-wd { position: absolute; top: 17%; inline-size: 5.6%; block-size: 1.4%; margin-left: 2.8%; border-radius: var(--as-radius-pill); background: var(--as-neutral-150); } .lp-show .a2-frame-2 .a2-day { position: absolute; z-index: 1; display: grid; place-items: center; box-sizing: border-box; inline-size: 11.2%; block-size: 9.5%; border: 1px solid var(--as-neutral-150); border-radius: 1.8cqi; background: var(--as-neutral-0); color: var(--as-neutral-950); font-size: max(9px, 3.2cqi); font-weight: 600; } .lp-show .a2-frame-2 .a2-c1 { left: 6%; } .lp-show .a2-frame-2 .a2-c2 { left: 18.8%; } .lp-show .a2-frame-2 .a2-c3 { left: 31.6%; } .lp-show .a2-frame-2 .a2-c4 { left: 44.4%; } .lp-show .a2-frame-2 .a2-c5 { left: 57.2%; } .lp-show .a2-frame-2 .a2-c6 { left: 70%; } .lp-show .a2-frame-2 .a2-c7 { left: 82.8%; } .lp-show .a2-frame-2 .a2-r1 { top: 22%; } .lp-show .a2-frame-2 .a2-r2 { top: 33.3%; } .lp-show .a2-frame-2 .a2-r3 { top: 44.6%; } .lp-show .a2-frame-2 .a2-r4 { top: 55.9%; } .lp-show .a2-frame-2 .a2-r5 { top: 67.2%; } .lp-show .a2-frame-2 .a2-day > .a2-num { position: relative; } .lp-show .a2-frame-2 .a2-past { border-color: transparent; background: transparent; color: var(--as-neutral-500); } .lp-show .a2-frame-2 .a2-taken { background: var(--as-neutral-100); color: var(--as-neutral-600); text-decoration: line-through; } /* a free date: open, white, its number bold (the script finds the first one) */ .lp-show .a2-frame-2 .a2-free { border-color: var(--as-neutral-200); background: var(--as-neutral-0); color: var(--as-neutral-950); font-weight: 700; } /* the script's highlight: the demonstration's size, its box (a date's size) at its top-left corner (see the header) */ .lp-show .a2-frame-2 .a2-fx-seek { z-index: 3; inset: 0; transform-origin: 0 0; } .lp-show .a2-frame-2 .a2-seek-box { position: absolute; left: 0; top: 0; box-sizing: border-box; inline-size: 11.2%; block-size: 9.5%; border-radius: 1.8cqi; border: .6cqi solid var(--as-brand-500); background: rgba(61, 116, 255, .14); box-shadow: 0 0 0 .9cqi rgba(61, 116, 255, .18), 0 .6cqi 2.4cqi rgba(0, 70, 238, .35); } .lp-show .a2-frame-2 .a2-fx-status { left: 6%; top: 82%; block-size: 10%; } /* the picked date and time: green, white text (6.59:1), its tick, a green glow */ .lp-show .a2-frame-2 .a2-fx-glow { border-color: var(--as-ok-500); box-shadow: 0 0 2.6cqi .4cqi rgba(18, 161, 80, .5); } .lp-show .a2-frame-2 .a2-on { position: absolute; inset: -1px; z-index: 1; display: grid; place-items: center; border-radius: inherit; background: var(--as-ok-700); color: var(--as-neutral-0); font-weight: 800; box-shadow: 0 0 0 .9cqi rgba(18, 161, 80, .3); } .lp-show .a2-frame-2 .a2-tick { inset-block-start: -14%; right: -14%; inline-size: 3.8cqi; block-size: 3.8cqi; color: var(--as-ok-700); font-size: 2.8cqi; box-shadow: 0 .3cqi .8cqi rgba(7, 21, 49, .25); } .lp-show .a2-frame-2 .a2-slot { position: absolute; z-index: 1; top: 82%; display: grid; place-items: center; box-sizing: border-box; inline-size: 19%; block-size: 10%; border: 1px solid var(--as-neutral-200); border-radius: 2.2cqi; background: var(--as-neutral-0); color: var(--as-neutral-950); font: 700 max(10px, 3.4cqi) / 1 var(--as-font-display); font-variant-numeric: tabular-nums; } .lp-show .a2-frame-2 .a2-slot-taken { border-color: transparent; background: var(--as-neutral-100); color: var(--as-neutral-600); text-decoration: line-through; } .lp-show .a2-frame-2 .a2-slot-1 { left: 6%; } .lp-show .a2-frame-2 .a2-slot-2 { left: 27%; } .lp-show .a2-frame-2 .a2-booked { right: 6%; top: 82%; block-size: 10%; } /* ── 3 Remote Selfie: a phone; the ring turns and a line scans the face (liveness), then green with a ✓ ─────── */ .lp-show .a2-frame.a2-frame-3 { background: transparent; box-shadow: none; overflow: visible; } .lp-show .a2-frame-3 .a2-phone { position: absolute; left: 21%; top: 0; bottom: 0; inline-size: 58%; box-sizing: border-box; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 4.4cqi; padding: 8cqi 3.4cqi 6cqi; border: 1.6cqi solid var(--as-neutral-950); border-radius: 8cqi; background: var(--as-neutral-0); text-align: center; box-shadow: var(--as-shadow-l), 0 0 0 .5cqi rgba(255, 255, 255, .22); } .lp-show .a2-frame-3 .a2-notch { position: absolute; top: 2.4cqi; left: 0; right: 0; margin-inline: auto; inline-size: 13cqi; block-size: 2.4cqi; border-radius: var(--as-radius-pill); background: var(--as-neutral-950); } .lp-show .a2-frame-3 .a2-hint { color: var(--as-neutral-600); font-size: max(10px, 3.4cqi); font-weight: 600; } .lp-show .a2-frame-3 .a2-cam { position: relative; flex: none; inline-size: 80%; aspect-ratio: 1; } .lp-show .a2-frame-3 .a2-cam::before { content: ""; position: absolute; inset: 0; border-radius: 50%; border: .7cqi solid var(--as-neutral-150); } .lp-show .a2-frame-3 .a2-face { position: absolute; inset: 9%; overflow: hidden; border-radius: 50%; background: var(--as-brand-50); } .lp-show .a2-frame-3 .a2-face-art { position: absolute; inset: 0; inline-size: 100%; block-size: 100%; } .lp-show .a2-frame-3 .a2-shoulders, .lp-show .a2-frame-3 .a2-skull { fill: var(--as-brand-200); } .lp-show .a2-frame-3 .a2-fx-mesh circle { fill: var(--as-brand-600); } .lp-show .a2-frame-3 .a2-headg { transform-box: fill-box; transform-origin: 50% 90%; } .lp-show .a2-frame-3 .a2-fx-scan { left: 6%; right: 6%; top: 6%; block-size: .7cqi; border-radius: var(--as-radius-pill); background: var(--as-brand-400); box-shadow: 0 0 1.6cqi .5cqi rgba(61, 116, 255, .6); } .lp-show .a2-frame-3 .a2-fx-spin { inset: 0; box-sizing: border-box; border-radius: 50%; border: .7cqi solid transparent; border-top-color: var(--as-brand-500); border-right-color: var(--as-brand-500); } .lp-show .a2-frame-3 .a2-ring { position: absolute; inset: 0; box-sizing: border-box; border-radius: 50%; border: .7cqi solid var(--as-ok-500); box-shadow: 0 0 0 1.4cqi rgba(18, 161, 80, .14); } .lp-show .a2-frame-3 .a2-badge { position: absolute; right: 1%; bottom: 3%; display: grid; place-items: center; box-sizing: border-box; inline-size: 24%; aspect-ratio: 1; border-radius: 50%; border: .7cqi solid var(--as-neutral-0); background: var(--as-ok-700); color: var(--as-neutral-0); font-size: 5.6cqi; box-shadow: 0 .8cqi 2cqi -.4cqi rgba(10, 107, 63, .6); } .lp-show .a2-frame-3 .a2-bar { position: relative; flex: none; inline-size: 72%; block-size: 1.4cqi; overflow: hidden; border-radius: var(--as-radius-pill); background: var(--as-neutral-150); } .lp-show .a2-frame-3 .a2-bar-fill, .lp-show .a2-frame-3 .a2-bar-ok { position: absolute; inset: 0; border-radius: inherit; transform-origin: left center; } .lp-show .a2-frame-3 .a2-bar-fill { background: var(--as-brand-500); } .lp-show .a2-frame-3 .a2-bar-ok { background: var(--as-ok-500); } .lp-show .a2-frame-3 .a2-verified { position: relative; block-size: auto; padding-block: 1.4cqi; font-size: max(10px, 3.4cqi); } /* ── the motion — lasting parts: from their start, no end step (the end is the base style), `both` fill; passing effects: a2-fx-*, ending hidden ────────────────────────────────────────────────────────────────────────────── */ @keyframes a2-enter { from { opacity: 0; transform: scale(.96); } } @keyframes a2-leave { from { opacity: 1; transform: none; } } @keyframes a2-fill { from { transform: scaleX(0); } } @keyframes a2-rise { from { opacity: 0; transform: translateY(30%); } } @keyframes a2-pop { from { opacity: 0; transform: scale(.4); } } @keyframes a2-mark { from { opacity: 0; transform: scale(.8); } } @keyframes a2-fade { from { opacity: 0; } } @keyframes a2-grow { from { transform: scaleX(0); } } @keyframes a2-turn { from { transform: none; } 50% { transform: translateX(-6px) rotate(-5deg); } } @keyframes a2-fx-beam { 0% { opacity: 0; transform: translateY(-100%); } 12% { opacity: 1; } 88% { opacity: 1; } 100% { opacity: 0; transform: translateY(330%); } } @keyframes a2-fx-ping { 0% { opacity: 0; transform: scale(1); } 10% { opacity: .9; } 100% { opacity: 0; transform: scale(1.35, 1.8); } } @keyframes a2-fx-detect { 0% { opacity: 0; transform: scale(1.12); } 18% { opacity: 1; transform: scale(1); } 88% { opacity: 1; } 100% { opacity: 0; transform: scale(1); } } @keyframes a2-fx-glow { 0% { opacity: 0; transform: scale(.94); } 12% { opacity: 1; } 100% { opacity: 0; transform: scale(1.3); } } @keyframes a2-fx-status { 0% { opacity: 0; transform: translateY(40%); } 10% { opacity: 1; transform: none; } 88% { opacity: 1; transform: none; } 100% { opacity: 0; transform: scale(.92); } } @keyframes a2-fx-spinner { 0% { opacity: 1; transform: rotate(0deg); } 94% { opacity: 1; } 100% { opacity: 0; transform: rotate(1080deg); } } /* the script's highlight (from .3 s, for 1 s): it steps over the taken dates 9 to 16 (their corners in percent of the demonstration: date d at column (d + 2) % 7 + 1, row (d + 2) / 7 + 1 of the sheet), off at the row's end and on at the next row's start, and lands on 17, the first free date, at 1.1 s */ @keyframes a2-fx-seek { 0% { opacity: 0; transform: translate(57.2%, 33.3%); } 5% { opacity: 1; transform: translate(57.2%, 33.3%); } 10% { transform: translate(57.2%, 33.3%); } 14% { transform: translate(70%, 33.3%); } 19% { transform: translate(70%, 33.3%); } 23% { opacity: 1; transform: translate(82.8%, 33.3%); } 28% { opacity: 1; transform: translate(82.8%, 33.3%); } 31% { opacity: 0; transform: translate(82.8%, 33.3%); } 32% { opacity: 0; transform: translate(6%, 44.6%); } 35% { opacity: 1; transform: translate(6%, 44.6%); } 40% { transform: translate(6%, 44.6%); } 44% { transform: translate(18.8%, 44.6%); } 49% { transform: translate(18.8%, 44.6%); } 53% { transform: translate(31.6%, 44.6%); } 58% { transform: translate(31.6%, 44.6%); } 62% { transform: translate(44.4%, 44.6%); } 67% { transform: translate(44.4%, 44.6%); } 71% { transform: translate(57.2%, 44.6%); } 76% { transform: translate(57.2%, 44.6%); } 80% { transform: translate(70%, 44.6%); } 88% { opacity: 1; transform: translate(70%, 44.6%); } 100% { opacity: 0; transform: translate(70%, 44.6%); } } @keyframes a2-fx-spin { 0% { opacity: 0; transform: rotate(0deg); } 12% { opacity: 1; } 88% { opacity: 1; } 100% { opacity: 0; transform: rotate(630deg); } } @keyframes a2-fx-scan { 0% { opacity: 0; transform: translateY(0); } 10% { opacity: 1; } 50% { transform: translateY(26cqi); } 90% { opacity: 1; } 100% { opacity: 0; transform: translateY(0); } } @keyframes a2-fx-mesh { 0% { opacity: 0; } 20% { opacity: 1; } 80% { opacity: 1; } 100% { opacity: 0; } } /* the data pulse along a link: from the panel that finished to the next one (a passing effect) */ @keyframes lp-fx-pulse { 0% { opacity: 0; transform: translateX(-85%); } 15% { opacity: 1; } 85% { opacity: 1; } 100% { opacity: 0; transform: translateX(8%); } } /* the panel on show: its demonstration drawn anew fades in over the outgoing one, which then leaves (show.js) */ .lp-show .is-on > .a2-frame { animation-name: a2-enter; animation-duration: .4s; animation-timing-function: var(--as-ease); animation-fill-mode: both; } .lp-show .lp-panel > .a2-frame.a2-leaving { z-index: 1; opacity: 0; transform: scale(1.02); } .lp-show .is-on > .a2-frame.a2-leaving { animation-name: a2-leave; animation-duration: .3s; animation-timing-function: ease-in; } /* the pulse along the link after the panel on show, in the slot's last half second */ .lp-show .is-on + .lp-link > .lp-pulse { animation-name: lp-fx-pulse; animation-duration: .5s; animation-delay: 2.5s; animation-timing-function: ease-in-out; animation-fill-mode: backwards; } .lp-show .is-on .a2-frame .a2-toprow, .lp-show .is-on .a2-frame .a2-tile, .lp-show .is-on .a2-frame .a2-day, .lp-show .is-on .a2-frame .a2-wd, .lp-show .is-on .a2-frame .a2-on, .lp-show .is-on .a2-frame .a2-slot, .lp-show .is-on .a2-frame .a2-chip, .lp-show .is-on .a2-frame .a2-ai, .lp-show .is-on .a2-frame .a2-phone, .lp-show .is-on .a2-frame .a2-hint, .lp-show .is-on .a2-frame .a2-headg, .lp-show .is-on .a2-frame .a2-bar-fill, .lp-show .is-on .a2-frame .a2-bar-ok, .lp-show .is-on .a2-frame .a2-ring, .lp-show .is-on .a2-frame .a2-badge { animation-duration: .4s; animation-timing-function: var(--as-ease); animation-fill-mode: both; } /* the lasting parts that animate keep their own layer to the end: at an animation's end Chromium would otherwise put the part back into its parent's layer and, until that layer is painted again, leave it blank (seen in recordings: the outcome chip vanishing for a few tenths of a second) */ .lp-show .is-on .a2-frame .a2-on, .lp-show .is-on .a2-frame .a2-slot, .lp-show .is-on .a2-frame .a2-chip, .lp-show .is-on .a2-frame .a2-ai, .lp-show .is-on .a2-frame .a2-hint, .lp-show .is-on .a2-frame .a2-bar-fill, .lp-show .is-on .a2-frame .a2-bar-ok, .lp-show .is-on .a2-frame .a2-ring, .lp-show .is-on .a2-frame .a2-badge, .lp-show .is-on .a2-frame .a2-fx, .lp-show .is-on > .a2-frame { will-change: transform, opacity; } /* a passing effect: its own timing; before its delay its first step, after its end its (hidden) base */ .lp-show .is-on .a2-frame .a2-fx { animation-timing-function: ease-in-out; animation-fill-mode: backwards; } /* the pops overshoot a little */ .lp-show .is-on .a2-frame .a2-chip, .lp-show .is-on .a2-frame .a2-on, .lp-show .is-on .a2-frame .a2-badge, .lp-show .is-on .a2-frame .a2-ai { animation-timing-function: cubic-bezier(.34, 1.56, .64, 1); } /* 1: the AI badge wakes and pings, "AI solving…", its beam scans the grid and frames each 482 tile as it passes, then the three are marked by themselves one after another (blue with a tick, a glow), then Solved — all by 2.5 s */ .lp-show .is-on .a2-frame-1 .a2-ai { animation-name: a2-pop; animation-duration: .4s; animation-delay: .2s; } .lp-show .is-on .a2-frame-1 .a2-fx-ping { animation-name: a2-fx-ping; animation-duration: .45s; animation-iteration-count: 2; animation-delay: .35s; } .lp-show .is-on .a2-frame-1 .a2-fx-status { animation-name: a2-fx-status; animation-duration: 1.8s; animation-delay: .25s; } .lp-show .is-on .a2-frame-1 .a2-fx-spinner { animation-name: a2-fx-spinner; animation-duration: 1.8s; animation-delay: .25s; animation-timing-function: linear; } .lp-show .is-on .a2-frame-1 .a2-fx-beam { animation-name: a2-fx-beam; animation-duration: .9s; animation-delay: .3s; } .lp-show .is-on .a2-frame-1 .a2-fx-detect { animation-name: a2-fx-detect; } .lp-show .is-on .a2-frame-1 .a2-hit-1 .a2-fx-detect { animation-duration: .6s; animation-delay: .55s; } .lp-show .is-on .a2-frame-1 .a2-hit-2 .a2-fx-detect { animation-duration: .65s; animation-delay: .75s; } .lp-show .is-on .a2-frame-1 .a2-hit-3 .a2-fx-detect { animation-duration: .7s; animation-delay: .95s; } .lp-show .is-on .a2-frame-1 .a2-on { animation-name: a2-mark; } .lp-show .is-on .a2-frame-1 .a2-fx-glow { animation-name: a2-fx-glow; animation-timing-function: ease-out; } .lp-show .is-on .a2-frame-1 .a2-hit-1 .a2-on { animation-duration: .35s; animation-delay: 1.1s; } .lp-show .is-on .a2-frame-1 .a2-hit-1 .a2-fx-glow { animation-duration: .55s; animation-delay: 1.1s; } .lp-show .is-on .a2-frame-1 .a2-hit-2 .a2-on { animation-duration: .35s; animation-delay: 1.35s; } .lp-show .is-on .a2-frame-1 .a2-hit-2 .a2-fx-glow { animation-duration: .55s; animation-delay: 1.35s; } .lp-show .is-on .a2-frame-1 .a2-hit-3 .a2-on { animation-duration: .35s; animation-delay: 1.6s; } .lp-show .is-on .a2-frame-1 .a2-hit-3 .a2-fx-glow { animation-duration: .55s; animation-delay: 1.6s; } .lp-show .is-on .a2-frame-1 .a2-done { animation-name: a2-pop; animation-duration: .4s; animation-delay: 1.95s; } /* 2: the script's badge wakes, "Searching for a free date…", its highlight steps over the taken dates and lands on the first free one (green with a tick, a glow), the times rise and the free one is picked by itself, then Booked — all by 2.5 s */ .lp-show .is-on .a2-frame-2 .a2-ai { animation-name: a2-pop; animation-duration: .4s; animation-delay: .15s; } .lp-show .is-on .a2-frame-2 .a2-fx-ping { animation-name: a2-fx-ping; animation-duration: .45s; animation-iteration-count: 2; animation-delay: .3s; } .lp-show .is-on .a2-frame-2 .a2-fx-status { animation-name: a2-fx-status; animation-duration: 1.2s; animation-delay: .2s; } .lp-show .is-on .a2-frame-2 .a2-fx-spinner { animation-name: a2-fx-spinner; animation-duration: 1.2s; animation-delay: .2s; animation-timing-function: linear; } .lp-show .is-on .a2-frame-2 .a2-fx-seek { animation-name: a2-fx-seek; animation-duration: 1s; animation-delay: .3s; } .lp-show .is-on .a2-frame-2 .a2-on { animation-name: a2-mark; } .lp-show .is-on .a2-frame-2 .a2-fx-glow { animation-name: a2-fx-glow; animation-timing-function: ease-out; } .lp-show .is-on .a2-frame-2 .a2-day .a2-on { animation-duration: .35s; animation-delay: 1.12s; } .lp-show .is-on .a2-frame-2 .a2-day .a2-fx-glow { animation-duration: .55s; animation-delay: 1.12s; } .lp-show .is-on .a2-frame-2 .a2-slot { animation-name: a2-rise; animation-duration: .3s; animation-delay: 1.35s; } .lp-show .is-on .a2-frame-2 .a2-slot .a2-on { animation-duration: .35s; animation-delay: 1.65s; } .lp-show .is-on .a2-frame-2 .a2-slot .a2-fx-glow { animation-duration: .55s; animation-delay: 1.65s; } .lp-show .is-on .a2-frame-2 .a2-booked { animation-name: a2-pop; animation-duration: .4s; animation-delay: 1.95s; } /* 3: the hint, the ring turns and the line scans the face while its landmarks show and the head turns (liveness), the bar fills, then the ring, the bar and the badge turn green, Verified — all by 2.5 s */ .lp-show .is-on .a2-frame-3 .a2-hint { animation-name: a2-rise; animation-duration: .35s; animation-delay: .15s; } .lp-show .is-on .a2-frame-3 .a2-fx-spin { animation-name: a2-fx-spin; animation-duration: 1.5s; animation-delay: .3s; animation-timing-function: linear; } .lp-show .is-on .a2-frame-3 .a2-fx-scan { animation-name: a2-fx-scan; animation-duration: 1.35s; animation-delay: .4s; } .lp-show .is-on .a2-frame-3 .a2-fx-mesh { animation-name: a2-fx-mesh; animation-duration: 1.25s; animation-delay: .45s; } .lp-show .is-on .a2-frame-3 .a2-headg { animation-name: a2-turn; animation-duration: 1s; animation-delay: .55s; animation-timing-function: ease-in-out; } .lp-show .is-on .a2-frame-3 .a2-bar-fill { animation-name: a2-grow; animation-duration: 1.45s; animation-delay: .3s; animation-timing-function: ease-in-out; } .lp-show .is-on .a2-frame-3 .a2-bar-ok { animation-name: a2-fade; animation-duration: .25s; animation-delay: 1.75s; } .lp-show .is-on .a2-frame-3 .a2-ring { animation-name: a2-pop; animation-duration: .35s; animation-delay: 1.75s; } .lp-show .is-on .a2-frame-3 .a2-badge { animation-name: a2-pop; animation-duration: .4s; animation-delay: 1.9s; } .lp-show .is-on .a2-frame-3 .a2-verified { animation-name: a2-pop; animation-duration: .4s; animation-delay: 2.05s; } /* paused: the panel on show in its final state at once (the passing effects hidden), the segment full */ .lp-show.is-still .lp-panel *, .lp-show.is-still .lp-link * { animation: none !important; } /* ── reduced motion: the CALM version (as the sign-in showcase's). The same three panels advance every 3 s (show.js: the stage's is-calm class is the only difference), with the segments (discrete: the one on show full, no fill), the Pause control (WCAG 2.2.2) and, in place of the pulse, an outline on the next panel. Every animation above is dropped, and these rules, all !important, play instead: * the crossfade: opacity only (a2-fade in, a2-leave out; the outgoing frame and the panel not scaled); * inside a demonstration, discrete states: a2-calm-* keyframes hold ONE state (`from, to`: no step between two values, so nothing is interpolated, nothing moves) for a window — a2-calm-off keeps a part's outcome hidden until its moment (delay 0, duration = that moment), a2-calm-on shows a passing effect (the status line, the detection frames, the landmarks) from its delay for its duration, a2-calm-checked tints a date the script has checked, a2-calm-ring-1 / -3 draw the scan ring a quarter, then three quarters. Each rule says `animation: !important` and every window ends by 2.5 s, like the full version's. No beam, highlight, spinner, glow, ping, head turn, scan line or growing bar: those stay hidden or still. Paused (is-still), the final state at once, as above. */ .lp-show.is-calm .lp-panel *, .lp-show.is-calm .lp-link * { animation: none !important; } .lp-show.is-calm .lp-panel > .a2-frame.a2-leaving, .lp-show.is-calm .lp-panel.is-on { transform: none; } .lp-show.is-calm .a2-frame .a2-fx-spinner { display: none; } @keyframes a2-calm-off { from, to { opacity: 0; } } @keyframes a2-calm-on { from, to { opacity: 1; } } @keyframes a2-calm-checked { from, to { border-color: var(--as-brand-500); background-color: var(--as-brand-50); color: var(--as-brand-700); } } @keyframes a2-calm-ring-1 { from, to { opacity: 1; border-right-color: transparent; } } @keyframes a2-calm-ring-3 { from, to { opacity: 1; border-bottom-color: var(--as-brand-500); } } .lp-show.is-calm:not(.is-still) .is-on > .a2-frame { animation: a2-fade .4s var(--as-ease) both !important; } .lp-show.is-calm:not(.is-still) .is-on > .a2-frame.a2-leaving { animation: a2-leave .3s ease-in !important; } /* 1: "AI solving…"; the AI frames the three 482 tiles, then marks them one after another; Solved */ .lp-show.is-calm:not(.is-still) .is-on .a2-frame-1 .a2-fx-status { animation: a2-calm-on 1.7s .25s !important; } .lp-show.is-calm:not(.is-still) .is-on .a2-frame-1 .a2-hit-1 .a2-fx-detect { animation: a2-calm-on .55s .55s !important; } .lp-show.is-calm:not(.is-still) .is-on .a2-frame-1 .a2-hit-2 .a2-fx-detect { animation: a2-calm-on .6s .75s !important; } .lp-show.is-calm:not(.is-still) .is-on .a2-frame-1 .a2-hit-3 .a2-fx-detect { animation: a2-calm-on .65s .95s !important; } .lp-show.is-calm:not(.is-still) .is-on .a2-frame-1 .a2-hit-1 .a2-on { animation: a2-calm-off 1.1s 0s !important; } .lp-show.is-calm:not(.is-still) .is-on .a2-frame-1 .a2-hit-2 .a2-on { animation: a2-calm-off 1.35s 0s !important; } .lp-show.is-calm:not(.is-still) .is-on .a2-frame-1 .a2-hit-3 .a2-on { animation: a2-calm-off 1.6s 0s !important; } .lp-show.is-calm:not(.is-still) .is-on .a2-frame-1 .a2-done { animation: a2-calm-off 1.95s 0s !important; } /* 2: "Searching for a free date…"; the taken dates 9 to 16 checked one after another (tinted, in place), then 17, the first free one, green; the times show and 11:00 is picked; Booked */ .lp-show.is-calm:not(.is-still) .is-on .a2-frame-2 .a2-fx-status { animation: a2-calm-on 1.15s .2s !important; } .lp-show.is-calm:not(.is-still) .is-on .a2-frame-2 .a2-day.a2-c5.a2-r2 { animation: a2-calm-checked .77s .35s !important; } .lp-show.is-calm:not(.is-still) .is-on .a2-frame-2 .a2-day.a2-c6.a2-r2 { animation: a2-calm-checked .68s .44s !important; } .lp-show.is-calm:not(.is-still) .is-on .a2-frame-2 .a2-day.a2-c7.a2-r2 { animation: a2-calm-checked .59s .53s !important; } .lp-show.is-calm:not(.is-still) .is-on .a2-frame-2 .a2-day.a2-c1.a2-r3 { animation: a2-calm-checked .5s .62s !important; } .lp-show.is-calm:not(.is-still) .is-on .a2-frame-2 .a2-day.a2-c2.a2-r3 { animation: a2-calm-checked .41s .71s !important; } .lp-show.is-calm:not(.is-still) .is-on .a2-frame-2 .a2-day.a2-c3.a2-r3 { animation: a2-calm-checked .32s .8s !important; } .lp-show.is-calm:not(.is-still) .is-on .a2-frame-2 .a2-day.a2-c4.a2-r3 { animation: a2-calm-checked .23s .89s !important; } .lp-show.is-calm:not(.is-still) .is-on .a2-frame-2 .a2-day.a2-c5.a2-r3 { animation: a2-calm-checked .14s .98s !important; } .lp-show.is-calm:not(.is-still) .is-on .a2-frame-2 .a2-day .a2-on { animation: a2-calm-off 1.12s 0s !important; } .lp-show.is-calm:not(.is-still) .is-on .a2-frame-2 .a2-slot { animation: a2-calm-off 1.35s 0s !important; } .lp-show.is-calm:not(.is-still) .is-on .a2-frame-2 .a2-slot .a2-on { animation: a2-calm-off 1.65s 0s !important; } .lp-show.is-calm:not(.is-still) .is-on .a2-frame-2 .a2-booked { animation: a2-calm-off 1.95s 0s !important; } /* 3: the face's landmarks show, the scan ring is drawn by quarters (one, two, three), then the ring, the bar and the badge turn green; Verified */ .lp-show.is-calm:not(.is-still) .is-on .a2-frame-3 .a2-fx-mesh { animation: a2-calm-on 1.25s .45s !important; } .lp-show.is-calm:not(.is-still) .is-on .a2-frame-3 .a2-fx-spin { animation: a2-calm-ring-1 .45s .3s, a2-calm-on .5s .75s, a2-calm-ring-3 .5s 1.25s !important; } .lp-show.is-calm:not(.is-still) .is-on .a2-frame-3 .a2-bar-fill { animation: a2-calm-off 1.75s 0s !important; } .lp-show.is-calm:not(.is-still) .is-on .a2-frame-3 .a2-bar-ok { animation: a2-calm-off 1.75s 0s !important; } .lp-show.is-calm:not(.is-still) .is-on .a2-frame-3 .a2-ring { animation: a2-calm-off 1.75s 0s !important; } .lp-show.is-calm:not(.is-still) .is-on .a2-frame-3 .a2-badge { animation: a2-calm-off 1.9s 0s !important; } .lp-show.is-calm:not(.is-still) .is-on .a2-frame-3 .a2-verified { animation: a2-calm-off 2.05s 0s !important; } /* the next panel outlined for the last half second, in place of the pulse */ @keyframes lp-calm-next { from, to { outline-color: rgba(255, 255, 255, .9); } } .lp-show.is-calm:not(.is-still) .lp-panel-1.is-next, .lp-show.is-calm:not(.is-still) .lp-panel-2.is-next, .lp-show.is-calm:not(.is-still) .lp-panel-3.is-next .a2-phone { animation: lp-calm-next .5s 2.5s !important; } /* ── under the stage: the captions (the services' names, the one on show marked), the segments, Pause/Play ───── */ .lp-show__bar { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 12px 20px; max-width: 1120px; margin: 20px auto 0; } .lp-show__caps { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; margin: 0; } .lp-show__caps > span { display: inline-flex; align-items: center; box-sizing: border-box; min-block-size: 32px; padding: 4px 14px; border: 1px solid var(--line-2); border-radius: var(--as-radius-pill); color: var(--text-2); font-size: 15px; font-weight: 600; line-height: 1.2; transition: color .3s, background-color .3s, border-color .3s; } /* the text on --brand-soft: --on-brand-soft (brand-700 light 7.5:1, brand-300 dark 5.1:1; the brand text 3.9:1) */ .lp-show__caps > .is-on { border-color: var(--brand); background: var(--brand-soft); color: var(--on-brand-soft); } .lp-show__segs { display: flex; gap: 6px; } .lp-show__segs > span { position: relative; overflow: hidden; inline-size: 36px; block-size: 4px; border-radius: var(--as-radius-pill); background: var(--line-2); } .lp-seg-fill { position: absolute; inset: 0; background: var(--brand); transform: scaleX(0); transform-origin: left center; } :root[dir="rtl"] .lp-seg-fill { transform-origin: right center; } .lp-show__segs > .is-done > .lp-seg-fill, .lp-show__segs > .is-on > .lp-seg-fill { transform: none; } .lp-show__segs > .is-on > .lp-seg-fill { animation-name: a2-fill; animation-duration: 3s; animation-timing-function: linear; animation-fill-mode: both; } .lp-show.is-still ~ .lp-show__bar .lp-seg-fill, .lp-show.is-calm ~ .lp-show__bar .lp-seg-fill { animation: none !important; } .lp-show__pause { display: inline-grid; place-items: center; box-sizing: border-box; inline-size: 32px; block-size: 32px; border: 1px solid var(--line-2); border-radius: 50%; background: var(--surface); color: var(--text-2); scroll-margin-block: 16px; } /* focus scrolls show the whole ring */ .lp-show__pause .icon { width: 16px; height: 16px; } .lp-show__pause:hover, .lp-show__pause[aria-pressed="true"] { border-color: var(--brand); color: var(--brand-text); } @media (prefers-reduced-motion: reduce) { .lp-show__caps > span { transition: none; } } /* phones: one panel at a time, so the one caption on show (all three before show.js runs) */ @media (max-width: 767px) { .lp-show__bar { gap: 12px 16px; margin-block-start: 16px; } /* Pause on the bar's physical left: the support chat's launcher is fixed at the bottom right (D-10) and would cover it when the bar rests at the bottom of a phone's first view */ .lp-show__pause { order: -1; } :root[dir="rtl"] .lp-show__pause { order: 1; } /* right to left, the decorative segments take the right end instead of the caption (P11.0.1) */ :root[dir="rtl"] .lp-show__segs { order: -1; } .lp-show.is-live ~ .lp-show__bar .lp-show__caps > span:not(.is-on) { display: none; } } @media (forced-colors: active) { .lp-show__caps > span, .lp-show__pause { border-color: ButtonText; } .lp-show__caps > .is-on { outline: 2px solid Highlight; } }