/* ============================================================ PULSE-APP-MOTION-V1 — app-only motion & materials layer Every rule is gated on html.pulse-app (website untouched). Personalities (prototype iterations), set on : "1" Calm — critically damped, translucent chrome (default) "2" Springy — slight bounce on momentum surfaces, icon pop "3" Instant — fastest, no stagger, solid chrome (speed profile) Performance: transform/opacity only. Reduced-motion supported. ============================================================ */ html.pulse-app { --pa-ease-out: cubic-bezier(0.23, 1, 0.32, 1); /* strong ease-out */ --pa-ease-inout: cubic-bezier(0.77, 0, 0.175, 1); --pa-ease-sheet: cubic-bezier(0.32, 0.72, 0, 1); /* iOS drawer curve */ --pa-press: 120ms; --pa-release: 180ms; --pa-enter: 220ms; --pa-sheet-in: 340ms; --pa-sheet-out: 240ms; --pa-stagger: 40ms; --pa-rise: 10px; } html.pulse-app[data-pa-variant="3"] { --pa-press: 90ms; --pa-release: 120ms; --pa-enter: 140ms; --pa-sheet-in: 240ms; --pa-sheet-out: 180ms; --pa-stagger: 0ms; --pa-rise: 6px; } /* ── Numbers: stop AED figures jittering ─────────────────────── */ html.pulse-app body { font-variant-numeric: tabular-nums; } /* ── 1. Page enter: fade + rise (replaces the hard cut) ──────── */ html.pulse-app body > .main, html.pulse-app body > .main-full, html.pulse-app .m-page { animation: pa-page-enter var(--pa-enter) var(--pa-ease-out) both; } @keyframes pa-page-enter { from { opacity: 0; transform: translateY(var(--pa-rise)); } to { opacity: 1; transform: translateY(0); } } /* leaving: a fast, subtle dim so the tap feels acknowledged */ html.pulse-app.pa-leaving body { opacity: .55; transition: opacity 90ms ease-out; } /* ── 2. Press states: everything tappable responds on touch-down ── */ html.pulse-app .pulse-tab, html.pulse-app .pulse-fab, html.pulse-app .pulse-sheet-item, html.pulse-app .btn, html.pulse-app button:not(.pulse-tab), html.pulse-app .card, html.pulse-app .m-card, html.pulse-app .cm-item, html.pulse-app .list-row, html.pulse-app a.card { transition: transform var(--pa-release) var(--pa-ease-out); } html.pulse-app .pulse-tab:active { transform: scale(0.94); opacity: 1; transition-duration: var(--pa-press); } html.pulse-app .pulse-sheet-item:active { transform: scale(0.98); transition-duration: var(--pa-press); } html.pulse-app .btn:active, html.pulse-app button:not(.pulse-tab):active { transform: scale(0.97); transition-duration: var(--pa-press); } /* CARD-STABLE-V1: a plain .card is a CONTAINER, not a button — :active on it fires when any child is pressed, so typing/long-pressing in a form field scaled the whole card (and the movement dismissed the mobile paste menu). Press-scale now only applies to genuinely tappable rows, and even those stay locked when they hold a text-entry field. */ html.pulse-app .m-card:not(:has(input:not([type=checkbox]):not([type=radio]), textarea, select, [contenteditable])):active, html.pulse-app .cm-item:not(:has(input:not([type=checkbox]):not([type=radio]), textarea, select, [contenteditable])):active, html.pulse-app .list-row:not(:has(input:not([type=checkbox]):not([type=radio]), textarea, select, [contenteditable])):active, html.pulse-app a.card:active { transform: scale(0.985); transition-duration: var(--pa-press); } /* FAB: press + open-state (keep the translateX centering!) */ html.pulse-app .pulse-fab { transition: transform var(--pa-release) var(--pa-ease-out), box-shadow var(--pa-release) var(--pa-ease-out); } html.pulse-app .pulse-fab:active { transform: translateX(-50%) scale(0.94); box-shadow: 0 6px 14px -6px rgba(124,107,255,.6); transition-duration: var(--pa-press); } html.pulse-app .pulse-fab.open { transform: translateX(-50%) rotate(45deg); } html.pulse-app .pulse-fab.open:active { transform: translateX(-50%) rotate(45deg) scale(0.94); } /* ── 3. Tab bar: floating translucent material ───────────────── */ html.pulse-app .pulse-tabbar { background: rgba(255, 255, 255, 0.82); -webkit-backdrop-filter: blur(18px) saturate(180%); backdrop-filter: blur(18px) saturate(180%); border-top: 1px solid rgba(13, 19, 32, 0.06); box-shadow: none; } html.pulse-app[data-theme="dark"] .pulse-tabbar { background: rgba(15, 17, 23, 0.82); border-top-color: rgba(255, 255, 255, 0.08); } /* Variant 3: solid chrome (speed profile, cheapest paint) */ html.pulse-app[data-pa-variant="3"] .pulse-tabbar { background: #ffffff; -webkit-backdrop-filter: none; backdrop-filter: none; border-top: 1px solid #ECEEF4; } html.pulse-app[data-pa-variant="3"][data-theme="dark"] .pulse-tabbar { background: #0f1117; } /* Active tab: soft violet squircle chip behind the glyph (reference style) */ html.pulse-app .pulse-tab { position: relative; } html.pulse-app .pulse-tab:not(.pulse-tab-spacer)::before { content: ""; position: absolute; top: 5px; left: 50%; width: 44px; height: 28px; margin-left: -22px; border-radius: 11px; background: rgba(124, 58, 237, 0.13); border: 1px solid rgba(124, 58, 237, 0.16); opacity: 0; transform: scale(0.6); transition: transform 200ms var(--pa-ease-out), opacity 200ms var(--pa-ease-out); pointer-events: none; } html.pulse-app .pulse-tab.active::before { opacity: 1; transform: scale(1); } html.pulse-app[data-theme="dark"] .pulse-tab:not(.pulse-tab-spacer)::before { background: rgba(167, 139, 250, 0.15); border-color: rgba(167, 139, 250, 0.2); } html.pulse-app .pulse-tab svg { position: relative; } html.pulse-app .pulse-tab svg { transition: transform 200ms var(--pa-ease-out); } html.pulse-app .pulse-tab.active svg { transform: translateY(-1px); } /* Variant 2: icon pop on activation */ html.pulse-app[data-pa-variant="2"] .pulse-tab.active svg { animation: pa-pop 320ms var(--pa-ease-out); } @keyframes pa-pop { 0% { transform: translateY(-1px) scale(1); } 40% { transform: translateY(-2px) scale(1.14); } 100% { transform: translateY(-1px) scale(1); } } /* ── 4. Sheet: iOS curve, asymmetric exit, staggered items ───── */ html.pulse-app .pulse-sheet { transition: transform var(--pa-sheet-out) var(--pa-ease-sheet); will-change: transform; touch-action: none; } html.pulse-app .pulse-sheet.open { transition-duration: var(--pa-sheet-in); } /* Variant 2's sheet uses the same calm curve as V1 — bounce was cut after the prototype round (V1 shipped; overshoot without gesture momentum reads wrong). V2's remaining personality is the tab-icon pop. */ html.pulse-app .pulse-sheet-backdrop { transition: opacity var(--pa-sheet-out) ease-out; background: rgba(13, 19, 32, 0.38); -webkit-backdrop-filter: blur(2px); backdrop-filter: blur(2px); } html.pulse-app .pulse-sheet-backdrop.open { transition-duration: var(--pa-sheet-in); } html.pulse-app[data-pa-variant="3"] .pulse-sheet-backdrop { -webkit-backdrop-filter: none; backdrop-filter: none; } /* Grip invites the drag */ html.pulse-app .pulse-sheet-grip { width: 42px; } /* Items cascade in when the sheet opens (decorative, non-blocking) */ html.pulse-app .pulse-sheet.open .pulse-sheet-item { animation: pa-item-in 240ms var(--pa-ease-out) both; } html.pulse-app .pulse-sheet.open .pulse-sheet-item:nth-child(2) { animation-delay: calc(var(--pa-stagger) * 1); } html.pulse-app .pulse-sheet.open .pulse-sheet-item:nth-child(3) { animation-delay: calc(var(--pa-stagger) * 2); } html.pulse-app .pulse-sheet.open .pulse-sheet-item:nth-child(4) { animation-delay: calc(var(--pa-stagger) * 3); } html.pulse-app .pulse-sheet.open .pulse-sheet-item:nth-child(5) { animation-delay: calc(var(--pa-stagger) * 4); } @keyframes pa-item-in { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: translateY(0); } } /* While the sheet is open, competing floaters yield (fixes AI FAB over backdrop) */ html.pulse-app.pa-sheet-open #chatbotBtn, html.pulse-app.pa-sheet-open .chatbot-fab, html.pulse-app.pa-sheet-open .chatbot-launch { opacity: 0 !important; pointer-events: none !important; transition: opacity 160ms ease-out; } html.pulse-app #chatbotBtn, html.pulse-app .chatbot-fab, html.pulse-app .chatbot-launch { transition: opacity 160ms ease-out; } /* ── 5. First-screen list cascade on page enter ──────────────── */ html.pulse-app .pa-cascade > * { animation: pa-item-in 260ms var(--pa-ease-out) both; } html.pulse-app .pa-cascade > *:nth-child(1) { animation-delay: 30ms; } html.pulse-app .pa-cascade > *:nth-child(2) { animation-delay: calc(30ms + var(--pa-stagger)); } html.pulse-app .pa-cascade > *:nth-child(3) { animation-delay: calc(30ms + var(--pa-stagger) * 2); } html.pulse-app .pa-cascade > *:nth-child(4) { animation-delay: calc(30ms + var(--pa-stagger) * 3); } html.pulse-app .pa-cascade > *:nth-child(5) { animation-delay: calc(30ms + var(--pa-stagger) * 4); } html.pulse-app .pa-cascade > *:nth-child(6) { animation-delay: calc(30ms + var(--pa-stagger) * 5); } html.pulse-app .pa-cascade > *:nth-child(n+7) { animation-delay: calc(30ms + var(--pa-stagger) * 6); } html.pulse-app[data-pa-variant="3"] .pa-cascade > * { animation: none; } /* ── 6. Sidebar drawer: match the iOS curve ──────────────────── */ html.pulse-app body aside.sidebar { transition: transform 280ms var(--pa-ease-sheet) !important; } /* ============================================================ APPLE-POLISH-V1 — materials, typography, accessibility signals (non-motion Apple-design pass; still 100% html.pulse-app gated) ============================================================ */ /* ── Typography: size-specific tracking + leading (§15) ──────── */ html.pulse-app h1, html.pulse-app .page-head h1 { letter-spacing: -0.02em; line-height: 1.15; font-optical-sizing: auto; } html.pulse-app h2 { letter-spacing: -0.01em; } /* tiny labels over the translucent bar: vibrancy = weight + tracking */ html.pulse-app .pulse-tab { letter-spacing: 0.01em; } html.pulse-app .pulse-tab.active { font-weight: 700; } /* ── Materials: the sheet is the top layer — let it read as one ── */ html.pulse-app .pulse-sheet { background: rgba(255, 255, 255, 0.94); -webkit-backdrop-filter: blur(20px) saturate(180%); backdrop-filter: blur(20px) saturate(180%); border-top: 1px solid rgba(255, 255, 255, 0.65); /* light catching the edge */ } html.pulse-app[data-theme="dark"] .pulse-sheet { background: rgba(23, 25, 34, 0.94); border-top-color: rgba(255, 255, 255, 0.1); } /* variant 3 stays cheap: solid, no blur */ html.pulse-app[data-pa-variant="3"] .pulse-sheet { background: #ffffff; -webkit-backdrop-filter: none; backdrop-filter: none; border-top: none; } html.pulse-app[data-pa-variant="3"][data-theme="dark"] .pulse-sheet { background: #171922; } /* ── Accessibility signals beyond reduced-motion (§14) ───────── */ @media (prefers-reduced-transparency: reduce) { html.pulse-app .pulse-tabbar, html.pulse-app .pulse-sheet { background: #ffffff; -webkit-backdrop-filter: none; backdrop-filter: none; } html.pulse-app[data-theme="dark"] .pulse-tabbar, html.pulse-app[data-theme="dark"] .pulse-sheet { background: #0f1117; } html.pulse-app .pulse-sheet-backdrop { -webkit-backdrop-filter: none; backdrop-filter: none; } } @media (prefers-contrast: more) { html.pulse-app .pulse-tabbar { background: #ffffff; -webkit-backdrop-filter: none; backdrop-filter: none; border-top: 1px solid #9AA2B1; } html.pulse-app .pulse-sheet { background: #ffffff; -webkit-backdrop-filter: none; backdrop-filter: none; border-top: 1px solid #9AA2B1; } html.pulse-app[data-theme="dark"] .pulse-tabbar, html.pulse-app[data-theme="dark"] .pulse-sheet { background: #0f1117; border-top-color: #4a5064; } } /* ============================================================ LOGIN-APP-V1 — app-only login skin (aubergine blob reference) Same structure & flow (email, password, log in, forgot, OTP); website login completely untouched. Pure CSS: gradients only, no images, transform/opacity animation. ============================================================ */ /* Full-bleed, scroll-locked screen — the login is a fixed surface, not a page */ html.pulse-app:has(.auth-wrap), html.pulse-app:has(.auth-wrap) body { height: 100dvh; overflow: hidden !important; overscroll-behavior: none; } html.pulse-app .auth-wrap { position: fixed; inset: 0; height: 100dvh; display: flex; align-items: center; justify-content: center; padding: 28px 26px; overflow: hidden; background: radial-gradient(90% 55% at 88% -8%, #3f2557 0%, rgba(63, 37, 87, 0) 62%), radial-gradient(120% 75% at -22% 12%, #4c2b69 0%, rgba(76, 43, 105, 0) 55%), radial-gradient(95% 65% at 108% 88%, #2e1b40 0%, rgba(46, 27, 64, 0) 58%), linear-gradient(168deg, #261636 0%, #1a1024 55%, #130b1b 100%); } /* organic dark blobs, echoing the reference's layered curves */ html.pulse-app .auth-wrap::before { content: ""; position: absolute; top: -28%; left: -22%; width: 85%; height: 62%; background: radial-gradient(closest-side, #170d22 62%, rgba(23, 13, 34, 0) 100%); border-radius: 58% 42% 55% 45% / 55% 48% 52% 45%; } html.pulse-app .auth-wrap::after { content: ""; position: absolute; bottom: -32%; right: -26%; width: 95%; height: 72%; background: radial-gradient(closest-side, #140b1e 58%, rgba(20, 11, 30, 0) 100%); border-radius: 45% 55% 48% 52% / 50% 45% 55% 50%; } html.pulse-app .auth-card { position: relative; z-index: 1; background: transparent !important; border: none !important; box-shadow: none !important; width: 100%; max-width: 330px; padding: 0 !important; } html.pulse-app .auth-brand { display: none; } html.pulse-app .auth-card h1 { color: #ffffff; font-size: 42px !important; /* mobile-fixes caps h1 at 20px — this is a display heading */ line-height: 1.06 !important; font-weight: 700; letter-spacing: -0.02em; max-width: 7ch; margin: 0 0 8px !important; } html.pulse-app .auth-card > p.muted { color: rgba(255, 255, 255, 0.5); margin-bottom: 48px; } html.pulse-app .auth-card form { display: flex; flex-direction: column; } html.pulse-app .auth-card form label { font-size: 0; /* hides the label text; placeholder carries it */ color: transparent; /* (the label still exists for structure + a11y- */ margin: 0 0 16px; /* conscious users keep the website's version) */ } html.pulse-app .auth-card form input { width: 100%; font-size: 16px !important; background: rgba(255, 255, 255, 0.05) !important; border: 1.5px solid rgba(255, 255, 255, 0.38) !important; border-radius: 999px !important; color: #ffffff !important; padding: 15px 24px !important; transition: border-color 180ms ease, box-shadow 180ms ease; } html.pulse-app .auth-card form input::placeholder { color: rgba(255, 255, 255, 0.45); } html.pulse-app .auth-card form input:focus { border-color: #3A63DF !important; box-shadow: 0 0 0 4px rgba(139, 92, 246, 0.18) !important; outline: none !important; } /* the reference puts Forgot BELOW the button, centered — reorder via flex */ html.pulse-app .auth-card form > div { order: 4; text-align: center !important; margin: 30px 0 0 !important; } html.pulse-app .auth-card form > div a { color: #96ACEE !important; font-size: 13.5px; font-weight: 600; } html.pulse-app .auth-card form .btn-primary { order: 3; width: auto !important; align-self: center; margin-top: 26px; padding: 14px 48px !important; border-radius: 999px !important; border: none !important; background: linear-gradient(135deg, #2046B6, #6d28d9) !important; color: #fff !important; font-size: 15px; font-weight: 600; box-shadow: 0 14px 28px -12px rgba(8, 4, 16, 0.55); transition: transform 160ms cubic-bezier(0.23, 1, 0.32, 1), box-shadow 160ms ease; } html.pulse-app .auth-card form .btn-primary:active { transform: scale(0.96); box-shadow: 0 6px 14px -8px rgba(8, 4, 16, 0.45); } html.pulse-app .auth-card > p.center { color: rgba(255, 255, 255, 0.38); margin-top: 40px; } /* entrance: heading → subtitle → fields → button, gentle cascade */ html.pulse-app .auth-card h1, html.pulse-app .auth-card > p.muted, html.pulse-app .auth-card form label, html.pulse-app .auth-card form .btn-primary, html.pulse-app .auth-card form > div, html.pulse-app .auth-card > p.center { animation: pa-item-in 320ms var(--pa-ease-out) both; } html.pulse-app .auth-card > p.muted { animation-delay: 50ms; } html.pulse-app .auth-card form label:nth-of-type(1) { animation-delay: 110ms; } html.pulse-app .auth-card form label:nth-of-type(2) { animation-delay: 160ms; } html.pulse-app .auth-card form .btn-primary { animation-delay: 220ms; } html.pulse-app .auth-card form > div { animation-delay: 270ms; } html.pulse-app .auth-card > p.center { animation-delay: 320ms; } /* ============================================================ PAGE-SWITCH-V2 — cross-document view transitions (app only) The browser snapshots the outgoing and incoming documents and composites the switch natively: no blank gap, no JS timing. Where supported, the JS-era enter/leave bridge retires itself. Navigation is the highest-frequency action, so the bridge is near-imperceptible: 90ms out / 180ms in, strong ease-out. ============================================================ */ @supports (view-transition-name: none) { html.pulse-app body > .main, html.pulse-app body > .main-full, html.pulse-app .m-page { animation: none; } html.pulse-app.pa-leaving body { opacity: 1; transition: none; } html.pulse-app::view-transition-old(root) { animation: pa-vt-out 90ms ease-out both; } html.pulse-app::view-transition-new(root) { animation: pa-vt-in 180ms var(--pa-ease-out) both; } } @keyframes pa-vt-out { to { opacity: 0; } } @keyframes pa-vt-in { from { opacity: 0; transform: translateY(6px); } } @media (prefers-reduced-motion: reduce) { html.pulse-app::view-transition-old(root) { animation-duration: 100ms; } html.pulse-app::view-transition-new(root) { animation-name: pa-fade; animation-duration: 120ms; } } /* ============================================================ SPLASH-V1 — coded logo splash (from the approved video, frame by frame, recolored to the violet brand family per Affan). Storyboard @2× tempo (~2.9s total, video was 6s): 0.10–1.10s EKG line draws across, glowing head 0.50–1.70s ripple rings bloom from center 1.20s icon squircle materializes, light sweep crosses 1.90–2.50s icon glides left, wordmark reveals + rule sweep 2.90s overlay dissolves (tap anywhere skips) App-only, once per launch. Transform/opacity + one dash-draw. ============================================================ */ .pa-splash { display: none; } html.pulse-app.pa-splashing .pa-splash { display: block; position: fixed; inset: 0; z-index: 999999; overflow: hidden; background: radial-gradient(85% 55% at 85% -5%, rgba(109, 40, 217, 0.55) 0%, rgba(109, 40, 217, 0) 60%), radial-gradient(110% 70% at -15% 20%, rgba(124, 58, 237, 0.35) 0%, rgba(124, 58, 237, 0) 55%), radial-gradient(90% 60% at 105% 90%, rgba(76, 29, 149, 0.5) 0%, rgba(76, 29, 149, 0) 60%), linear-gradient(168deg, #2b1745 0%, #1d0f33 55%, #140a24 100%); opacity: 1; transition: opacity 320ms ease-out; } html.pulse-app.pa-splashing .pa-splash.pa-done { opacity: 0; pointer-events: none; } /* ── the EKG line drawing across ── */ .pa-splash-line { position: absolute; left: 50%; top: 44%; width: min(122vw, 560px); transform: translate(-50%, -50%); filter: drop-shadow(0 0 9px rgba(196, 167, 255, 0.85)); animation: pa-sp-linefade 400ms ease-out 1.15s both; } .pa-splash-line .pa-ekg { stroke-dasharray: 1; stroke-dashoffset: 1; animation: pa-sp-draw 1.0s cubic-bezier(0.45, 0, 0.3, 1) 0.10s forwards; } @keyframes pa-sp-draw { to { stroke-dashoffset: 0; } } @keyframes pa-sp-linefade { from { opacity: 1; } to { opacity: 0; } } /* ── ripple rings ── */ .pa-splash-ring { position: absolute; left: 50%; top: 44%; width: 300px; height: 300px; margin: -150px 0 0 -150px; border-radius: 50%; border: 2px solid rgba(216, 200, 255, 0.22); opacity: 0; transform: scale(0.35); } html.pulse-app.pa-splashing .pa-splash .r1 { animation: pa-sp-ring 1.1s cubic-bezier(0.23, 1, 0.32, 1) 0.50s both; } html.pulse-app.pa-splashing .pa-splash .r2 { animation: pa-sp-ring 1.1s cubic-bezier(0.23, 1, 0.32, 1) 0.72s both; } html.pulse-app.pa-splashing .pa-splash .r3 { animation: pa-sp-ring 1.1s cubic-bezier(0.23, 1, 0.32, 1) 0.94s both; } @keyframes pa-sp-ring { 0% { opacity: 0; transform: scale(0.35); } 25% { opacity: 0.9; } 100% { opacity: 0; transform: scale(1.55); } } /* ── lockup: icon + words. Starts centered on the icon, glides left ── */ .pa-splash-lockup { position: absolute; left: 50%; top: 44%; display: flex; align-items: center; gap: 26px; transform: translate(-50%, -50%) translateX(104px); animation: pa-sp-slide 600ms cubic-bezier(0.23, 1, 0.32, 1) 1.90s forwards; } @keyframes pa-sp-slide { to { transform: translate(-50%, -50%) translateX(0); } } .pa-splash-icon { position: relative; flex: none; width: 108px; height: 108px; border-radius: 30px; background: rgba(255, 255, 255, 0.09); border: 1.5px solid rgba(255, 255, 255, 0.35); overflow: hidden; display: flex; align-items: center; justify-content: center; opacity: 0; transform: scale(0.82); animation: pa-sp-icon 420ms cubic-bezier(0.23, 1, 0.32, 1) 1.20s forwards; box-shadow: 0 18px 40px -18px rgba(8, 4, 16, 0.6); } .pa-splash-icon svg { width: 96px; } /* the reference's persistent diagonal glass streak */ .pa-splash-icon::before { content: ""; position: absolute; inset: 0; border-radius: inherit; background: linear-gradient(115deg, transparent 32%, rgba(255, 255, 255, 0.09) 44%, rgba(255, 255, 255, 0.15) 50%, rgba(255, 255, 255, 0.09) 56%, transparent 68%); pointer-events: none; } @keyframes pa-sp-icon { to { opacity: 1; transform: scale(1); } } /* light sweep across the icon face, once */ .pa-splash-sweep { position: absolute; left: 50%; top: 50%; width: 300%; height: 34px; margin: -17px 0 0 -150%; background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.35), transparent); transform: rotate(-115deg); animation: pa-sp-sweep 800ms ease-out 1.55s both; } @keyframes pa-sp-sweep { from { transform: rotate(-115deg); } to { transform: rotate(65deg); } } /* ── wordmark ── */ .pa-splash-words { min-width: 182px; } .pa-splash-name { color: #ffffff; font-size: 56px; font-weight: 800; letter-spacing: -0.02em; line-height: 1; clip-path: inset(0 100% 0 0); animation: pa-sp-reveal 480ms cubic-bezier(0.23, 1, 0.32, 1) 2.05s forwards; } .pa-splash-rule { height: 3px; border-radius: 2px; margin: 10px 0 9px; background: linear-gradient(90deg, #3A63DF, #96ACEE 60%, rgba(167, 139, 250, 0.15)); transform: scaleX(0); transform-origin: left center; animation: pa-sp-rule 420ms cubic-bezier(0.23, 1, 0.32, 1) 2.30s forwards; } .pa-splash-by { color: rgba(255, 255, 255, 0.72); font-size: 15px; font-weight: 700; letter-spacing: 0.32em; opacity: 0; transform: translateY(6px); animation: pa-sp-by 380ms cubic-bezier(0.23, 1, 0.32, 1) 2.45s forwards; } @keyframes pa-sp-reveal { to { clip-path: inset(0 -8% 0 0); } } @keyframes pa-sp-rule { to { transform: scaleX(1); } } @keyframes pa-sp-by { to { opacity: 1; transform: translateY(0); } } /* reduced motion: no choreography — the finished lockup, briefly */ @media (prefers-reduced-motion: reduce) { html.pulse-app.pa-splashing .pa-splash-line, html.pulse-app.pa-splashing .pa-splash-ring, html.pulse-app.pa-splashing .pa-splash-sweep { display: none; } html.pulse-app.pa-splashing .pa-splash-lockup { animation: none; transform: translate(-50%, -50%); } html.pulse-app.pa-splashing .pa-splash-icon, html.pulse-app.pa-splashing .pa-splash-by { animation: pa-fade 200ms ease both; opacity: 1; transform: none; } html.pulse-app.pa-splashing .pa-splash-name { animation: none; clip-path: none; } html.pulse-app.pa-splashing .pa-splash-rule { animation: none; transform: scaleX(1); } } /* ============================================================ DASH-CARDS-V1 — app dashboard, per Affan's references: hero = portfolio-card structure (label / huge value / stat chips; NO action buttons), colors stay Pulse indigo. leaderboard = gradient rank pills (no top-3 podium). ============================================================ */ html.pulse-app .md-hero { border-radius: 22px !important; padding: 20px 20px 18px !important; background: linear-gradient(150deg, #1B388D 0%, #2046B6 58%, #3A63DF 100%) !important; box-shadow: 0 16px 34px -16px rgba(91, 73, 224, 0.55) !important; } html.pulse-app .md-hero-lbl { font-size: 12.5px !important; font-weight: 600 !important; color: rgba(255, 255, 255, 0.75) !important; letter-spacing: 0.02em; margin-bottom: 6px !important; } html.pulse-app .md-hero-big { font-size: clamp(20px, 7.6vw, 28px) !important; /* one line, reference-style */ white-space: nowrap; font-weight: 800 !important; letter-spacing: -0.02em !important; line-height: 1.05 !important; color: #ffffff !important; margin-bottom: 14px !important; } /* stats become translucent chips, like the reference's delta chips */ html.pulse-app .md-hero-row { display: flex !important; gap: 8px !important; flex-wrap: wrap; } html.pulse-app .md-hero-row > div { background: rgba(255, 255, 255, 0.16); border: 1px solid rgba(255, 255, 255, 0.14); border-radius: 11px; padding: 7px 12px !important; display: flex; flex-direction: column; gap: 1px; } html.pulse-app .md-hero-row > div span { font-size: 10.5px !important; font-weight: 600; letter-spacing: 0.04em; text-transform: uppercase; color: rgba(255, 255, 255, 0.72) !important; } html.pulse-app .md-hero-row > div b { font-size: 13.5px !important; color: #ffffff !important; } /* leaderboard rows → gradient rank pills */ html.pulse-app .md-lb { display: flex; align-items: center; gap: 12px; background: linear-gradient(120deg, #2046B6 0%, #1B388D 100%) !important; border: none !important; border-radius: 15px !important; padding: 12px 16px !important; margin-bottom: 9px !important; box-shadow: 0 10px 22px -14px rgba(91, 73, 224, 0.6); } html.pulse-app .md-lb .md-rk { background: transparent !important; color: rgba(255, 255, 255, 0.85) !important; font-size: 15px !important; font-weight: 800 !important; width: 20px !important; height: auto !important; text-align: center; flex: none; } html.pulse-app .md-lb .md-rk.gold { color: #ffd76a !important; } html.pulse-app .md-lb .md-lead-nm { color: #ffffff !important; font-weight: 650 !important; font-size: 14.5px !important; } html.pulse-app .md-lb .md-lead-mt { color: rgba(255, 255, 255, 0.62) !important; font-size: 11.5px !important; } html.pulse-app .md-lb .md-lbv { margin-left: auto; color: #ffffff !important; font-weight: 750 !important; font-size: 13.5px !important; } /* ── Reduced motion: gentle cross-fades, no movement ─────────── */ @media (prefers-reduced-motion: reduce) { html.pulse-app body > .main, html.pulse-app body > .main-full, html.pulse-app .m-page { animation: pa-fade 160ms ease both; } html.pulse-app .pa-cascade > *, html.pulse-app .pulse-sheet.open .pulse-sheet-item, html.pulse-app .auth-card h1, html.pulse-app .auth-card > p.muted, html.pulse-app .auth-card form label, html.pulse-app .auth-card form .btn-primary, html.pulse-app .auth-card form > div, html.pulse-app .auth-card > p.center { animation: pa-fade 160ms ease both; } html.pulse-app .pulse-sheet { transition: opacity 180ms ease; } html.pulse-app .pulse-tab:active, html.pulse-app .btn:active, html.pulse-app .card:active, html.pulse-app .pulse-fab:active { transform: none; } html.pulse-app[data-pa-variant="2"] .pulse-tab.active svg { animation: none; } } @keyframes pa-fade { from { opacity: 0; } to { opacity: 1; } }