/* ============================================================ PULSE-APP26-V1 — 2026 mobile app design layer Ported from the Claude-design reference drop (390x844, 1:1 CSS px). REVERSIBLE: every rule is gated on , which is set ONLY inside the Pulse app (see base.html). The website — desktop AND phone browser — is completely untouched. To reverse: remove the pulse-app26.css from base.html. Loads AFTER pulse-app-motion.css so it wins on equal specificity. New class prefix a26- everywhere, so nothing collides with the existing md-* mobile dashboard or the !important mobile-fixes layer. ============================================================ */ /* ============================================================ 0. TYPEFACES — Poppins + DM Sans, per the handoff. SELF-HOSTED, latin subset only: 102KB total, served from our own origin. No Google Fonts request, so nothing breaks offline in the wrapper and no third-party is contacted at runtime. DM Sans is a variable font, so one file covers 400/500/700. font-display:swap => text paints immediately in the system stack and swaps in, so first paint is never blocked. ============================================================ */ @font-face{font-family:'Poppins';font-style:normal;font-weight:400;font-display:swap; src:url('fonts/Poppins-400.woff2') format('woff2');} @font-face{font-family:'Poppins';font-style:normal;font-weight:500;font-display:swap; src:url('fonts/Poppins-500.woff2') format('woff2');} @font-face{font-family:'Poppins';font-style:normal;font-weight:600;font-display:swap; src:url('fonts/Poppins-600.woff2') format('woff2');} @font-face{font-family:'Poppins';font-style:normal;font-weight:700;font-display:swap; src:url('fonts/Poppins-700.woff2') format('woff2');} @font-face{font-family:'Poppins';font-style:normal;font-weight:800;font-display:swap; src:url('fonts/Poppins-800.woff2') format('woff2');} @font-face{font-family:'DM Sans';font-style:normal;font-weight:400 700;font-display:swap; src:url('fonts/DMSans-var.woff2') format('woff2-variations'); src:url('fonts/DMSans-var.woff2') format('woff2');} /* Token values below are taken verbatim from the design handoff's token table (design_handoff_pulse_mobile/README.md), NOT sampled from the PNGs. */ html.pulse-app { /* --- surfaces --- */ --a26-bg: #F4F5F9; /* field */ --a26-card: #FFFFFF; /* surface */ --a26-line: #E6E8F0; /* hairline */ --a26-divider: #F0F1F7; /* --- navy chrome --- */ --a26-navy-900: #0D1320; --a26-navy-800: #1D2745; /* --- ink --- */ --a26-ink: #12172B; --a26-ink-2: #5A6182; --a26-ink-3: #8A90AE; --a26-ink-4: #A9AEC4; --a26-label: #8A90AE; /* micro caps labels use ink-3 */ --a26-on-dark: #FFFFFF; --a26-on-dark-2: rgba(255,255,255,.62); /* --- accents --- */ /* ACCENT — derived at the navy header's own hue (225deg) so the accent reads as the same family as the chrome, not a colour bolted on beside it. Replaces the handoff's purple per Affan's direction. */ --a26-accent: #2046B6; --a26-accent-700: #1B388D; --a26-accent-500: #3A63DF; --a26-accent-400: #6788E9; --a26-accent-300: #96ACEE; --a26-accent-soft:#EBEFFC; --a26-green: #15803D; --a26-green-soft: #ECFDF3; --a26-amber: #D97706; --a26-amber-deep: #B45309; --a26-amber-soft: #FFF7E6; /* The ADMIN role chip is amber ON dark brown, carried over from the web app. */ --a26-badge-ink: #F59E0B; --a26-badge-bg: #2B1A00; --a26-red: #B91C1C; --a26-red-soft: #FEE2E2; --a26-indigo: #4338CA; --a26-indigo-soft:#EEF2FF; /* --- shape / elevation --- */ --a26-r-card: 16px; /* cards 15-18 */ --a26-r-tile: 13px; /* tiles/chips 9-13 */ --a26-r-ctl: 11px; --a26-pad: 20px; /* screen gutter */ --a26-shadow: 0 1px 2px rgba(13,19,32,.04); /* --- motion --- */ --a26-ease: cubic-bezier(.23, 1, .32, 1); --a26-ease-ios: cubic-bezier(.32, .72, 0, 1); /* --- type --- */ --a26-display: 'Poppins', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif; --a26-body: 'DM Sans', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif; } /* Spec type roles: Poppins carries titles, metrics and headings; DM Sans carries body, meta and the all-caps micro labels. */ html.pulse-app .a26-page, html.pulse-app .sidebar { font-family: var(--a26-body); } html.pulse-app .a26-nm, html.pulse-app .a26-hero-big, html.pulse-app .a26-stat-v, html.pulse-app .a26-sec h3, html.pulse-app .a26-rnm, html.pulse-app .a26-rv, html.pulse-app .a26-standing b, html.pulse-app .a26-seg a { font-family: var(--a26-display); } html.pulse-app .a26-lbl, html.pulse-app .a26-standing .sl, html.pulse-app .sidebar .nav-label { font-family: var(--a26-body); font-weight: 700; } /* Spec: "Every numeral uses tabular-nums so figures don't jitter between states." Applied to every figure the app renders. */ html.pulse-app .a26-hero-big, html.pulse-app .a26-stat-v, html.pulse-app .a26-rv, html.pulse-app .a26-delta, html.pulse-app .a26-standing b, html.pulse-app .a26-spark-x { font-variant-numeric: tabular-nums; } /* ============================================================ 1. PAGE SHELL ============================================================ */ html.pulse-app body.a26 { background: var(--a26-bg); } /* A native app has no visible scrollbar. Hide it everywhere in the app (the page still scrolls) — website is unaffected, this is .pulse-app only. */ html.pulse-app, html.pulse-app body, html.pulse-app .sidebar, html.pulse-app .a26-chips { scrollbar-width: none; /* Firefox */ -ms-overflow-style: none; /* legacy Edge */ } html.pulse-app::-webkit-scrollbar, html.pulse-app body::-webkit-scrollbar, html.pulse-app .sidebar::-webkit-scrollbar, html.pulse-app .a26-chips::-webkit-scrollbar { width: 0; height: 0; display: none; } /* The dark header is full-bleed, so the page wrapper must cancel the `padding: 54px 10px 78px !important` that pulse-mobile-fixes.css puts on .main at <=768px. Negative margins do that without needing :has(). */ html.pulse-app .a26-page { margin: -54px -10px -78px; padding: 0 0 96px; background: var(--a26-bg); min-height: 100vh; } /* pulse-mobile-fixes.css sets `.main > *:first-child { margin-top: 0 !important }`, which would otherwise cancel the -54px and leave a white band above the header. */ html.pulse-app .main > .a26-page, html.pulse-app .main-full > .a26-page { margin-top: -54px !important; } html.pulse-app .a26-body { padding: 0 var(--a26-pad); } /* ============================================================ 2. HEADER (dark navy block: identity + scope segmented) Design: spans y 0-186 including the status area. ============================================================ */ html.pulse-app .a26-head { background: linear-gradient(180deg, var(--a26-navy-800), var(--a26-navy-900)); /* Spec: header top padding 62px iOS / 48px Android (status bar). On a device env() supplies the real inset; the 48px floor covers Android and keeps the desktop preview honest, where env() resolves to 0. */ padding: calc(max(env(safe-area-inset-top, 0px), 48px) + 12px) var(--a26-pad) 16px; border-radius: 0 0 26px 26px; /* spec */ } /* --- identity row --- */ html.pulse-app .a26-id { display: flex; align-items: center; gap: 12px; } /* Spec "glass control": rgba(13,19,32,.44) + blur(16px) saturate(170%), 1px rgba(255,255,255,.2) border, inset top edge to catch the light. Press is scale(.93) over 140ms. */ html.pulse-app .a26-hamb { width: 38px; height: 38px; flex: 0 0 38px; display: flex; align-items: center; justify-content: center; border-radius: var(--a26-r-ctl); background: rgba(13,19,32,.44); -webkit-backdrop-filter: blur(16px) saturate(170%); backdrop-filter: blur(16px) saturate(170%); border: 1px solid rgba(255,255,255,.2); box-shadow: inset 0 1px 0 rgba(255,255,255,.2); color: #fff; -webkit-tap-highlight-color: transparent; cursor: pointer; padding: 0; transition: transform 140ms ease-out; } html.pulse-app .a26-hamb svg { width: 18px; height: 18px; stroke: currentColor; fill: none; stroke-width: 1.9; stroke-linecap: round; } html.pulse-app .a26-hamb:active { transform: scale(.93); } @media (prefers-reduced-transparency: reduce) { html.pulse-app .a26-hamb { -webkit-backdrop-filter: none; backdrop-filter: none; } } html.pulse-app .a26-av { width: 42px; height: 42px; flex: 0 0 42px; border-radius: 13px; background: linear-gradient(145deg, #6788E9, #2046B6); color: #fff; display: flex; align-items: center; justify-content: center; font-size: 19px; font-weight: 700; letter-spacing: .01em; text-decoration: none; overflow: hidden; } html.pulse-app .a26-av img { width: 100%; height: 100%; object-fit: cover; } html.pulse-app .a26-who { flex: 1; min-width: 0; } html.pulse-app .a26-nm-row { display: flex; align-items: center; gap: 7px; } html.pulse-app .a26-nm { font-size: 17.5px; font-weight: 700; color: var(--a26-on-dark); letter-spacing: -.01em; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } html.pulse-app .a26-badge { flex: 0 0 auto; font-size: 9.5px; font-weight: 800; letter-spacing: .07em; text-transform: uppercase; padding: 3px 7px; border-radius: 6px; /* Spec: the ADMIN role chip is amber #F59E0B on dark brown #2B1A00. */ background: var(--a26-badge-bg); color: var(--a26-badge-ink); } html.pulse-app .a26-sub { margin-top: 2px; font-size: 12px; font-weight: 500; color: var(--a26-on-dark-2); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } html.pulse-app .a26-bell { position: relative; width: 38px; height: 38px; flex: 0 0 38px; display: flex; align-items: center; justify-content: center; border-radius: 50%; background: rgba(255,255,255,.09); border: 1px solid rgba(255,255,255,.10); color: #fff; text-decoration: none; } html.pulse-app .a26-bell svg { width: 18px; height: 18px; stroke: currentColor; fill: none; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; } html.pulse-app .a26-bell:active { transform: scale(.93); } html.pulse-app .a26-bell .dot { position: absolute; top: 8px; right: 9px; width: 7px; height: 7px; border-radius: 50%; background: var(--a26-red); box-shadow: 0 0 0 2px rgba(24,32,57,.9); } /* --- scope segmented control (inside the dark header) --- */ html.pulse-app .a26-seg { display: flex; margin-top: 16px; padding: 4px; border-radius: 13px; background: rgba(255,255,255,.07); border: 1px solid rgba(255,255,255,.07); } html.pulse-app .a26-seg a { flex: 1; text-align: center; padding: 9px 4px; border-radius: 10px; font-size: 13px; font-weight: 600; color: rgba(255,255,255,.62); text-decoration: none; transition: background .18s ease, color .18s ease; } html.pulse-app .a26-seg a.on { background: #fff; color: var(--a26-ink); font-weight: 700; box-shadow: 0 2px 8px -2px rgba(0,0,0,.35); } /* ============================================================ 3. DATE-PRESET CHIP RAIL (horizontal scroll, no visible bar) ============================================================ */ html.pulse-app .a26-chips { display: flex; gap: 8px; padding: 14px var(--a26-pad) 4px; overflow-x: auto; scrollbar-width: none; -webkit-overflow-scrolling: touch; } html.pulse-app .a26-chips::-webkit-scrollbar { display: none; } html.pulse-app .a26-chip { flex: 0 0 auto; padding: 8px 15px; border-radius: 10px; font-size: 13px; font-weight: 600; white-space: nowrap; text-decoration: none; background: #fff; color: var(--a26-ink-2); border: 1px solid var(--a26-line); } html.pulse-app .a26-chip.on { background: var(--a26-accent); color: #fff; border-color: var(--a26-accent); } html.pulse-app .a26-chip:active { transform: scale(.96); } /* ============================================================ 4. HERO CARD (headline metric) ============================================================ */ html.pulse-app .a26-hero { margin-top: 10px; background: var(--a26-card); border-radius: var(--a26-r-card); padding: 18px; box-shadow: var(--a26-shadow); border: 1px solid var(--a26-line); } html.pulse-app .a26-hero-top { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; } html.pulse-app .a26-lbl { font-size: 10.5px; font-weight: 700; letter-spacing: .07em; text-transform: uppercase; color: var(--a26-label); line-height: 1.45; } html.pulse-app .a26-hero-big { margin-top: 10px; font-size: clamp(24px, 8.2vw, 34px); font-weight: 800; letter-spacing: -.03em; color: var(--a26-ink); line-height: 1.05; } html.pulse-app .a26-hero-sub { margin-top: 8px; font-size: 12.5px; font-weight: 500; color: var(--a26-ink-2); } /* --- period-over-period delta chip --- */ html.pulse-app .a26-delta { flex: 0 0 auto; padding: 4px 9px; border-radius: 8px; font-size: 11.5px; font-weight: 700; letter-spacing: -.01em; white-space: nowrap; } html.pulse-app .a26-delta.up { background: var(--a26-green-soft); color: var(--a26-green); } html.pulse-app .a26-delta.down { background: #FEE9E9; color: var(--a26-red); } /* --- sparkline --- */ html.pulse-app .a26-spark { margin-top: 16px; } html.pulse-app .a26-spark svg { display: block; width: 100%; height: 70px; overflow: visible; } html.pulse-app .a26-spark-x { display: flex; justify-content: space-between; margin-top: 6px; } html.pulse-app .a26-spark-x span { font-size: 10px; font-weight: 600; color: #B6BCCC; letter-spacing: .02em; } /* ============================================================ 5. STAT TILES (2-up grid) ============================================================ */ html.pulse-app .a26-grid { margin-top: 11px; display: grid; grid-template-columns: 1fr 1fr; gap: 11px; } html.pulse-app .a26-stat { background: var(--a26-card); border-radius: var(--a26-r-tile); padding: 14px; min-height: 88px; display: flex; flex-direction: column; box-shadow: var(--a26-shadow); border: 1px solid var(--a26-line); } html.pulse-app .a26-stat .a26-lbl { font-size: 9.5px; } /* Real Pulse figures run to 9-11 digits, far longer than the design's abbreviated sample values. Scale the number to the tile so it stays on one line instead of wrapping. */ html.pulse-app .a26-stat-v { margin-top: 9px; font-size: clamp(14px, 4.6vw, 20px); font-weight: 800; letter-spacing: -.03em; color: var(--a26-ink); line-height: 1.15; white-space: nowrap; } html.pulse-app .a26-hero-big { white-space: nowrap; } html.pulse-app .a26-stat-v.green { color: var(--a26-green); } html.pulse-app .a26-stat-v.amber { color: var(--a26-amber); } html.pulse-app .a26-stat-s { margin-top: auto; padding-top: 5px; font-size: 11.5px; font-weight: 500; color: var(--a26-ink-3); } /* ============================================================ 6. SECTION HEADINGS + LIST ROWS ============================================================ */ html.pulse-app .a26-sec { display: flex; align-items: baseline; justify-content: space-between; margin: 22px 0 10px; } html.pulse-app .a26-sec h3 { margin: 0; font-size: 17px; font-weight: 700; letter-spacing: -.015em; color: var(--a26-ink); } html.pulse-app .a26-sec a { font-size: 12.5px; font-weight: 600; color: var(--a26-accent); text-decoration: none; } html.pulse-app .a26-row { display: flex; align-items: center; gap: 12px; background: var(--a26-card); border-radius: var(--a26-r-tile); padding: 13px 14px; margin-bottom: 9px; text-decoration: none; box-shadow: var(--a26-shadow); border: 1px solid var(--a26-line); } html.pulse-app .a26-row:active { transform: scale(.985); } html.pulse-app .a26-rk { width: 30px; height: 30px; flex: 0 0 30px; display: flex; align-items: center; justify-content: center; border-radius: 9px; background: var(--a26-accent-soft); color: var(--a26-accent); font-size: 13px; font-weight: 800; } html.pulse-app .a26-rk.gold { background: var(--a26-amber-soft); color: var(--a26-amber-deep); } html.pulse-app .a26-rbody { flex: 1; min-width: 0; } html.pulse-app .a26-rnm { font-size: 14.5px; font-weight: 650; color: var(--a26-ink); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } html.pulse-app .a26-rmt { margin-top: 2px; font-size: 12px; font-weight: 500; color: var(--a26-ink-3); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } html.pulse-app .a26-rv { flex: 0 0 auto; font-size: 13.5px; font-weight: 700; color: var(--a26-ink); letter-spacing: -.015em; } /* --- quick actions on a lead row --- */ html.pulse-app .a26-qa { width: 34px; height: 34px; flex: 0 0 34px; display: flex; align-items: center; justify-content: center; border-radius: 10px; cursor: pointer; -webkit-tap-highlight-color: transparent; } html.pulse-app .a26-qa svg { width: 16px; height: 16px; } html.pulse-app .a26-qa.call { background: var(--a26-accent-soft); color: var(--a26-accent); } html.pulse-app .a26-qa.wa { background: var(--a26-green-soft); color: var(--a26-green); } html.pulse-app .a26-qa:active { transform: scale(.92); } html.pulse-app .a26-empty { margin: 4px 0 0; padding: 22px 16px; text-align: center; font-size: 13px; color: var(--a26-ink-3); background: var(--a26-card); border-radius: var(--a26-r-tile); } /* --- standing strip (rank pills) --- */ html.pulse-app .a26-standing { margin-top: 11px; display: flex; align-items: center; justify-content: space-around; background: var(--a26-card); border-radius: var(--a26-r-tile); padding: 12px 8px; box-shadow: var(--a26-shadow); border: 1px solid var(--a26-line); } html.pulse-app .a26-standing div { text-align: center; } html.pulse-app .a26-standing .sl { display: block; font-size: 9.5px; font-weight: 700; letter-spacing: .07em; text-transform: uppercase; color: var(--a26-label); } html.pulse-app .a26-standing b { display: block; margin-top: 5px; font-size: 17px; font-weight: 800; color: var(--a26-ink); } /* ============================================================ 7. TAB BAR (recolour of the existing PULSE-BOTTOMNAV markup) ============================================================ */ /* Spec: 76px tall + home indicator, rgba(255,255,255,.94) + blur(14px), 1px #E6E8F0 top edge. */ html.pulse-app .pulse-tabbar { height: calc(76px + env(safe-area-inset-bottom, 0px)); background: rgba(255,255,255,.94); -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px); border-top: 1px solid var(--a26-line); border-radius: 0; box-shadow: none; } html.pulse-app .pulse-tab { height: 76px; gap: 5px; font-size: 10.5px; font-weight: 600; color: var(--a26-ink-3); } /* Spec: prefers-reduced-transparency removes every backdrop-filter. */ @media (prefers-reduced-transparency: reduce) { html.pulse-app .pulse-tabbar { -webkit-backdrop-filter: none; backdrop-filter: none; background: #fff; } } html.pulse-app .pulse-tab svg { width: 22px; height: 22px; stroke-width: 1.8; fill: none; stroke: currentColor; } html.pulse-app .pulse-tab.active { color: var(--a26-accent); font-weight: 700; } /* pulse-app-motion.css paints a pill behind the active tab; the 2026 design marks the active tab with colour alone. */ html.pulse-app .pulse-tab.active::before { display: none; } /* Design FAB is a purple squircle, not a circle, and carries no light ring. */ /* NOTE the doubled `.t26.pulse-app` selector: pulse-theme26.css sets the FAB with `html.t26.pulse-app .pulse-fab` (three classes), which outranks a two-class selector no matter what loads last. Matching its specificity lets load order decide, and this file loads after theme26. */ html.t26.pulse-app .pulse-fab, html.pulse-app .pulse-fab { width: 56px; height: 56px; border-radius: 20px; background: linear-gradient(150deg, var(--a26-accent-500), var(--a26-accent)); box-shadow: 0 12px 26px -8px rgba(32,70,182,.55); border: none; bottom: calc(24px + env(safe-area-inset-bottom, 0px)); } /* The assistant button ships as indigo -> violet -> pink, off the palette entirely now. App-only; the website keeps its original styling. */ html.pulse-app #chatbotBtn, html.pulse-app .chatbot-fab { background: linear-gradient(150deg, var(--a26-accent-500), var(--a26-accent)); box-shadow: 0 10px 24px -8px rgba(32,70,182,.5); } /* ============================================================ 8. SIDEBAR DRAWER Restyles the EXISTING #sidebar (real routes, real permission gating, existing COLLAPSIBLE-NAV-V1 +/- behaviour) to match the design. No duplicate nav is introduced. ============================================================ */ /* Spec: 300px wide, linear-gradient(180deg,#1D2745,#0D1320), drawer in = translateX(-100%)->0 over 300ms on the iOS curve. */ html.pulse-app .sidebar { position: fixed; top: 0; bottom: 0; left: 0; z-index: 1401; width: 300px; max-width: 86vw; height: 100vh; padding: calc(env(safe-area-inset-top, 0px) + 18px) 12px calc(env(safe-area-inset-bottom, 0px) + 12px); background: linear-gradient(180deg, var(--a26-navy-800), var(--a26-navy-900)); border-right: none; box-shadow: 4px 0 34px rgba(0,0,0,.4); transform: translateX(-100%); transition: transform .3s var(--a26-ease-ios); } html.pulse-app .sidebar.open { transform: translateX(0); } /* Spec: scrim rgba(13,19,32,.55) + blur(2px). */ html.pulse-app .sidebar-backdrop { position: fixed; inset: 0; z-index: 1400; background: rgba(13,19,32,.55); -webkit-backdrop-filter: blur(2px); backdrop-filter: blur(2px); opacity: 0; visibility: hidden; transition: opacity .24s ease, visibility .24s ease; } html.pulse-app .sidebar-backdrop.open { opacity: 1; visibility: visible; } @media (prefers-reduced-transparency: reduce) { html.pulse-app .sidebar-backdrop { -webkit-backdrop-filter: none; backdrop-filter: none; } } /* The drawer's own bell is redundant in the app — the header carries one. */ html.pulse-app .sidebar .notif-bell-wrap { display: none !important; } /* Close button: hidden on the website, shown only in the app drawer. */ .a26-dr-x { display: none; } html.pulse-app .sidebar .a26-dr-x { display: flex; align-items: center; justify-content: center; position: absolute; top: calc(env(safe-area-inset-top, 0px) + 16px); right: 14px; width: 34px; height: 34px; border-radius: 10px; background: rgba(255,255,255,.09); border: 1px solid rgba(255,255,255,.10); color: #fff; padding: 0; cursor: pointer; -webkit-tap-highlight-color: transparent; } html.pulse-app .sidebar .a26-dr-x svg { width: 17px; height: 17px; stroke: currentColor; fill: none; stroke-width: 2.2; stroke-linecap: round; } html.pulse-app .sidebar .a26-dr-x:active { transform: scale(.93); } /* Designation · team line under the drawer's user chip. */ .a26-user-sub { display: none; } html.pulse-app .sidebar .a26-user-sub { display: block; margin-top: 3px; font-size: 11.5px; font-weight: 500; color: rgba(255,255,255,.55); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } /* --- group labels: design uses a quieter, wider caps label --- */ html.pulse-app .sidebar .nav-label { display: flex; align-items: center; justify-content: space-between; padding: 12px 8px; margin-top: 0; font-size: 10.5px; font-weight: 800; letter-spacing: .10em; color: rgba(255,255,255,.52); opacity: 1; } html.pulse-app .sidebar .nav-section { margin-bottom: 2px; } /* --- nav items --- */ html.pulse-app .sidebar .nav-item { padding: 11px 10px; border-radius: 9px; font-size: 14.5px; font-weight: 500; color: rgba(255,255,255,.82); } html.pulse-app .sidebar .nav-item:hover { transform: none; } /* Spec: active item is rgba(58,99,223,.24) fill with a 3px var(--a26-accent-500) left bar. */ html.pulse-app .sidebar .nav-item.active { background: rgba(58,99,223,.24); color: #fff; font-weight: 600; box-shadow: none; } html.pulse-app .sidebar .nav-item.active::before { left: 0; top: 0; bottom: 0; width: 3px; border-radius: 0; background: var(--a26-accent-500); box-shadow: none; } html.pulse-app .sidebar .nav-item:active { background: rgba(255,255,255,.07); } /* ============================================================ 10. SPLASH — ported from the handoff's splash-screen.html. Timings, delays and curves are the spec; do not "tidy" them. 0.35s baseline fades in · 0.45s ECG traces L->R (1.7s) 1.05s rings ripple · 2.35s trace flies out right 2.85s icon pops in · 4.35s rings fade · 4.50s icon slides left 84px 4.62s wordmark wipes in · 5.15s cyan underline draws · ~5.9s done ============================================================ */ html.pulse-app.pa-splashing .a26-splash { background: radial-gradient(120% 72% at 76% 10%, #2B407E 0%, rgba(43,64,126,0) 56%), radial-gradient(105% 62% at 16% 34%, #182652 0%, rgba(24,38,82,0) 62%), linear-gradient(180deg, #0E1428 0%, #0A0E1A 58%, #060810 100%); overflow: hidden; cursor: pointer; } /* --- 1. ripple rings --- */ html.pulse-app .a26-rings { position: absolute; top: 40%; left: 50%; width: 0; height: 0; animation: a26FadeOut .5s 4.35s ease-out forwards; } html.pulse-app .a26-ring { position: absolute; border-radius: 50%; left: 0; top: 0; animation: a26Ripple 2.6s cubic-bezier(.23,1,.32,1) infinite; } html.pulse-app .a26-ring.a { width: 330px; height: 330px; margin: -165px 0 0 -165px; border: 1px solid rgba(255,255,255,.16); animation-delay: 1.05s; } html.pulse-app .a26-ring.b { width: 250px; height: 250px; margin: -125px 0 0 -125px; border: 1px solid rgba(255,255,255,.2); background: rgba(255,255,255,.03); animation-delay: 1.35s; } html.pulse-app .a26-ring.c { width: 172px; height: 172px; margin: -86px 0 0 -86px; border: 1px solid rgba(255,255,255,.24); background: rgba(255,255,255,.045); animation-delay: 1.65s; } /* --- 2. the ECG trace --- */ html.pulse-app .a26-trace { position: absolute; top: 40%; left: 0; right: 0; height: 150px; margin-top: -75px; opacity: 0; animation: a26FadeIn .3s .35s ease-out forwards, a26TraceOut .55s 2.35s cubic-bezier(.23,1,.32,1) forwards; } html.pulse-app .a26-trace svg { display: block; width: 100%; height: 150px; filter: drop-shadow(0 0 7px rgba(181,199,253,.95)) drop-shadow(0 0 26px rgba(92,130,246,.6)); } html.pulse-app .a26-trace path { fill: none; stroke: #fff; stroke-width: 3.2; stroke-linecap: round; stroke-linejoin: round; stroke-dasharray: 900; animation: a26Trace 1.7s .45s cubic-bezier(.33,.05,.2,1) forwards; } /* --- 3. logo lockup --- */ html.pulse-app .a26-lockup { position: absolute; top: 40%; left: 50%; width: 340px; height: 96px; margin: -48px 0 0 -170px; } html.pulse-app .a26-icon { position: absolute; top: 4px; left: 126px; width: 88px; height: 88px; border-radius: 26px; border: 1.5px solid rgba(255,255,255,.34); background: linear-gradient(155deg, rgba(255,255,255,.1), rgba(255,255,255,.02)); box-shadow: 0 0 44px rgba(58,99,223,.34), inset 0 1px 0 rgba(255,255,255,.26); display: grid; place-items: center; opacity: 0; animation: a26IconPop .48s 2.85s cubic-bezier(.23,1,.32,1) forwards, a26IconShift .6s 4.50s cubic-bezier(.32,.72,0,1) forwards; } html.pulse-app .a26-halo { position: absolute; border-radius: 50%; } html.pulse-app .a26-halo.o { width: 64px; height: 64px; border: 1px solid rgba(255,255,255,.13); } html.pulse-app .a26-halo.i { width: 50px; height: 50px; border: 1px solid rgba(255,255,255,.08); } html.pulse-app .a26-icon svg { position: relative; } /* Cyan belongs to the logo and nothing else (spec's semantic rule). */ html.pulse-app .a26-cap { stroke: #22D3EE; stroke-width: 3.4; stroke-linecap: round; filter: drop-shadow(0 0 5px rgba(34,211,238,.95)); } html.pulse-app .a26-beat { stroke: #fff; stroke-width: 2.5; stroke-linecap: round; stroke-linejoin: round; filter: drop-shadow(0 0 5px rgba(255,255,255,.5)); } html.pulse-app .a26-word { position: absolute; top: 16px; left: 150px; clip-path: inset(0 100% 0 0); animation: a26WipeIn .62s 4.62s cubic-bezier(.32,.72,0,1) forwards; } html.pulse-app .a26-word h1 { margin: 0; font-family: 'Poppins', system-ui, sans-serif; font-weight: 800; font-size: 43px; line-height: .94; color: #fff; letter-spacing: -.035em; text-shadow: 0 0 30px rgba(139,167,250,.45); } html.pulse-app .a26-word .a26-rule { display: block; margin: 0 0 0 26px; transform-origin: left; transform: scaleX(0); filter: drop-shadow(0 0 5px rgba(34,211,238,.65)); animation: a26Underline .55s 5.15s cubic-bezier(.23,1,.32,1) forwards; } html.pulse-app .a26-word .a26-rule path { fill: none; stroke: #38BDF8; stroke-width: 1.9; stroke-linecap: round; stroke-linejoin: round; } html.pulse-app .a26-word small { display: block; margin-top: 3px; font-family: 'DM Sans', system-ui, sans-serif; font-weight: 700; font-size: 8.5px; letter-spacing: .34em; color: #B8C4E8; } /* --- 4. footer diamond --- */ html.pulse-app .a26-mark { position: absolute; bottom: 64px; left: 0; right: 0; text-align: center; opacity: 0; animation: a26FadeIn .6s .5s ease-out forwards; } html.pulse-app .a26-mark span { font-size: 15px; color: rgba(255,255,255,.5); animation: a26Glow 2.8s ease-in-out infinite; } @keyframes a26Trace { from { stroke-dashoffset: 900 } to { stroke-dashoffset: 0 } } @keyframes a26TraceOut { to { opacity: 0; transform: translateX(90px) } } @keyframes a26Ripple { from { transform: scale(.62); opacity: .5 } to { transform: scale(1.45); opacity: 0 } } @keyframes a26IconPop { from { opacity: 0; transform: scale(1.42) } to { opacity: 1; transform: scale(1) } } @keyframes a26IconShift { to { transform: translateX(-84px) } } @keyframes a26WipeIn { from { clip-path: inset(0 100% 0 0) } to { clip-path: inset(0 -14% 0 0) } } @keyframes a26Underline { from { transform: scaleX(0) } to { transform: scaleX(1) } } @keyframes a26FadeIn { from { opacity: 0 } to { opacity: 1 } } @keyframes a26FadeOut { to { opacity: 0 } } @keyframes a26Glow { 0%,100% { opacity: .85 } 50% { opacity: .35 } } @media (prefers-reduced-motion: reduce) { html.pulse-app .a26-splash * { animation-duration: .001ms !important; animation-delay: 0ms !important; animation-iteration-count: 1 !important; } } /* ============================================================ 13. PIPELINE (screen 08) ============================================================ */ html.pulse-app .a26-title { font-family: var(--a26-display); font-size: 20px; font-weight: 600; color: #fff; /* spec: screen title */ letter-spacing: -.01em; } html.pulse-app .a26-hcount { flex: 0 0 auto; text-align: right; font-family: var(--a26-display); font-size: 19px; font-weight: 700; color: #fff; font-variant-numeric: tabular-nums; line-height: 1.05; } html.pulse-app .a26-hcount span { display: block; margin-top: 1px; font-family: var(--a26-body); font-size: 10.5px; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; color: rgba(255,255,255,.55); } /* stage funnel — one flex segment per stage, sized by its real share */ /* Continuous bar, not segments: Pulse has up to 30 stages and a long tail of tiny ones, so gaps + min-widths turned it into a dashed line that misread the proportions. A hairline divider keeps the stages legible instead. */ html.pulse-app .a26-funnel { display: flex; margin-top: 15px; height: 7px; border-radius: 999px; overflow: hidden; background: rgba(255,255,255,.08); } html.pulse-app .a26-funnel span { display: block; min-width: 2px; box-shadow: inset -1px 0 0 rgba(13,19,32,.35); } html.pulse-app .a26-funnel span:last-child { box-shadow: none; } /* chips carry a count, so give the number its own weight */ html.pulse-app .a26-chip b { font-family: var(--a26-display); font-weight: 700; font-variant-numeric: tabular-nums; margin-left: 3px; opacity: .75; } html.pulse-app .a26-chip { font-family: var(--a26-body); cursor: pointer; } /* --- lead cards --- */ html.pulse-app .om-lead { border: 1px solid var(--a26-line) !important; border-radius: var(--a26-r-tile) !important; box-shadow: var(--a26-shadow); padding: 11px 12px !important; gap: 6px !important; } html.pulse-app .om-av { border-radius: 12px !important; background: var(--a26-accent-soft) !important; color: var(--a26-accent) !important; font-family: var(--a26-display); } html.pulse-app .om-nm { font-family: var(--a26-display); font-size: 14.5px !important; color: var(--a26-ink); } html.pulse-app .om-mt { color: var(--a26-ink-3) !important; } html.pulse-app .om-budget { color: var(--a26-green) !important; } html.pulse-app .om-qa { border-radius: 10px !important; } html.pulse-app .om-qa.call { background: var(--a26-accent-soft) !important; color: var(--a26-accent) !important; } html.pulse-app .om-qa.wa { background: var(--a26-green-soft) !important; color: var(--a26-green) !important; } html.pulse-app .om-sum { color: var(--a26-ink-3) !important; font-size: 12px !important; } html.pulse-app .om-sum b { font-family: var(--a26-display); color: var(--a26-ink) !important; } html.pulse-app .om-more a { color: var(--a26-accent) !important; } html.pulse-app .om-empty { color: var(--a26-ink-3) !important; } /* stage pill + last-touched meta on a lead card */ html.pulse-app .om-pill { flex: 0 0 auto; font-family: var(--a26-body); font-size: 9.5px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; padding: 3px 8px; border-radius: 999px; background: var(--a26-accent-soft); color: var(--a26-accent); white-space: nowrap; } html.pulse-app .om-touch { color: var(--a26-ink-4); } html.pulse-app .om-touch.stale { color: var(--a26-amber); font-weight: 600; } /* ============================================================ 14. PEOPLE (screens 13/14) — restyle of the cm-* mobile layer ============================================================ */ html.pulse-app .cm-row { border: 1px solid var(--a26-line) !important; border-radius: var(--a26-r-tile) !important; box-shadow: var(--a26-shadow); padding: 11px 12px !important; } html.pulse-app .cm-av { border-radius: 12px !important; background: var(--a26-accent-soft) !important; color: var(--a26-accent) !important; font-family: var(--a26-display); } html.pulse-app .cm-nm { font-family: var(--a26-display); font-size: 14.5px !important; color: var(--a26-ink); } html.pulse-app .cm-mt { color: var(--a26-ink-3) !important; } html.pulse-app .cm-newtag { color: var(--a26-accent) !important; background: var(--a26-accent-soft) !important; border-radius: 999px !important; padding: 2px 7px !important; letter-spacing: .06em !important; } html.pulse-app .cm-qa { border-radius: 10px !important; } html.pulse-app .cm-qa.call { background: var(--a26-accent-soft) !important; color: var(--a26-accent) !important; } html.pulse-app .cm-qa.wa { background: var(--a26-green-soft) !important; color: var(--a26-green) !important; } html.pulse-app .cm-empty { color: var(--a26-ink-3) !important; } html.pulse-app .cm-pg-btn { background: #fff; border: 1px solid var(--a26-line); border-radius: 10px; padding: 8px 14px; font-size: 12.5px; font-weight: 600; color: var(--a26-accent); text-decoration: none; } html.pulse-app .cm-pg-btn.off { color: var(--a26-ink-4); } html.pulse-app .cm-pg-info { font-size: 11.5px; color: var(--a26-ink-3); } /* ============================================================ 15. MEETINGS (screen 19) ============================================================ */ html.pulse-app .mt-new { background: linear-gradient(150deg, var(--a26-accent-500), var(--a26-accent)) !important; border-radius: 999px !important; padding: 13px !important; font-family: var(--a26-display); box-shadow: 0 8px 20px -8px rgba(32,70,182,.8); } html.pulse-app .mt-day { font-family: var(--a26-body); font-size: 9.5px; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: var(--a26-ink-3); margin: 16px 2px 8px; } html.pulse-app .mt-row { border: 1px solid var(--a26-line) !important; border-radius: var(--a26-r-tile) !important; box-shadow: var(--a26-shadow); padding: 12px !important; /* Spec (19): "card with a coloured 3px left border" keyed to status. */ border-left: 3px solid var(--a26-ink-4) !important; } html.pulse-app .mt-row.st-applied { border-left-color: var(--a26-accent) !important; } html.pulse-app .mt-row.st-rescheduled { border-left-color: var(--a26-amber) !important; } html.pulse-app .mt-row.st-done { border-left-color: var(--a26-green) !important; } html.pulse-app .mt-row.st-canceled { border-left-color: var(--a26-red) !important; } html.pulse-app .mt-when { flex: 0 0 46px; text-align: center; } html.pulse-app .mt-when b { font-family: var(--a26-display); font-size: 14px; font-weight: 700; color: var(--a26-ink); font-variant-numeric: tabular-nums; } html.pulse-app .mt-nm { font-family: var(--a26-display); font-size: 14.5px !important; color: var(--a26-ink); } html.pulse-app .mt-sub { color: var(--a26-ink-3) !important; } html.pulse-app .mt-pill { border-radius: 999px !important; font-size: 9.5px !important; letter-spacing: .06em; text-transform: uppercase; background: var(--a26-accent-soft) !important; color: var(--a26-accent) !important; } html.pulse-app .st-done .mt-pill { background: var(--a26-green-soft) !important; color: var(--a26-green) !important; } html.pulse-app .st-canceled .mt-pill { background: var(--a26-red-soft) !important; color: var(--a26-red) !important; } html.pulse-app .st-rescheduled .mt-pill { background: var(--a26-amber-soft) !important; color: var(--a26-amber-deep) !important; } html.pulse-app .mt-empty { color: var(--a26-ink-3) !important; } /* ============================================================ 16. NOTIFICATIONS (screen 07) Spec: unread rows get a TINTED background and matching border — not the solid fill the old app used. ============================================================ */ html.pulse-app .nm-group { font-family: var(--a26-body); font-size: 9.5px; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: var(--a26-ink-3); margin: 18px 2px 9px; } html.pulse-app .nm-row { border-radius: var(--a26-r-tile) !important; } html.pulse-app .nm-row.unread { background: var(--a26-accent-soft) !important; border: 1px solid rgba(32,70,182,.22) !important; color: var(--a26-ink) !important; } html.pulse-app .nm-row.unread .nm-ic { background: rgba(32,70,182,.12) !important; } html.pulse-app .nm-row.read { border: 1px solid var(--a26-line) !important; box-shadow: var(--a26-shadow); } html.pulse-app .nm-row.read .nm-ic { background: var(--a26-accent-soft) !important; } html.pulse-app .nm-ic { border-radius: 11px !important; width: 34px !important; height: 34px !important; } html.pulse-app .nm-rtitle { font-family: var(--a26-display); font-size: 14px !important; } html.pulse-app .nm-rtext { color: var(--a26-ink-2); } html.pulse-app .nm-rtime { color: var(--a26-ink-4); } html.pulse-app .nm-empty { color: var(--a26-ink-3) !important; } /* broadcast (unclaimed lead) card keeps its emphasis, on the new accent */ html.pulse-app .nm-bcast { background: linear-gradient(150deg, var(--a26-accent-500), var(--a26-accent)) !important; border-radius: var(--a26-r-card) !important; box-shadow: 0 10px 24px -12px rgba(32,70,182,.7); } html.pulse-app .nm-accept { color: var(--a26-accent) !important; border-radius: 999px !important; font-family: var(--a26-display); } html.pulse-app .nm-pass { border-radius: 999px !important; } /* ============================================================ 11. AUTH — sign in + verify OTP Recolours LOGIN-APP-V1 (pulse-app-motion.css) onto the navy family. That layer sets these with !important, so these must match in kind; this file loads after it, so equal specificity resolves here. ============================================================ */ /* Sign-in field: identical gradient geometry to LOGIN-APP-V1, every stop hue-rotated from aubergine onto the navy hue so nothing else shifts. */ html.pulse-app .auth-wrap { background: radial-gradient(90% 55% at 88% -8%, #253157 0%, rgba(37,49,87,0) 62%), radial-gradient(120% 75% at -22% 12%, #2b3a69 0%, rgba(43,58,105,0) 55%), radial-gradient(95% 65% at 108% 88%, #1b2440 0%, rgba(27,36,64,0) 58%), linear-gradient(168deg, #161e36 0%, #101524 55%, #0b0f1b 100%); } html.pulse-app .auth-wrap::before { background: radial-gradient(closest-side, #0d1222 62%, rgba(13,18,34,0) 100%); } html.pulse-app .auth-wrap::after { background: radial-gradient(closest-side, #0b101e 58%, rgba(11,16,30,0) 100%); } html.pulse-app .auth-card form input:focus { border-color: var(--a26-accent-500) !important; box-shadow: 0 0 0 4px rgba(58,99,223,.20) !important; } html.pulse-app .auth-card form > div a { color: var(--a26-accent-300) !important; } html.pulse-app .auth-card form .btn-primary { background: linear-gradient(135deg, var(--a26-accent-500), var(--a26-accent)) !important; } /* OTP squircle + any auth accent marks */ html.pulse-app .auth-card .auth-badge, html.pulse-app .auth-card .otp-badge { background: linear-gradient(150deg, var(--a26-accent-500), var(--a26-accent)) !important; } /* ============================================================ 12. LEGACY md-* HERO / LEADERBOARD The old mobile dashboard's purple gradients. The dashboard no longer renders these, but other templates still use md-* blocks, so recolour rather than leave a stray purple in the app. ============================================================ */ html.pulse-app .md-hero { background: linear-gradient(150deg, var(--a26-accent) 0%, var(--a26-accent-500) 58%, var(--a26-accent-400) 100%) !important; box-shadow: 0 16px 34px -16px rgba(32,70,182,.55) !important; } html.pulse-app .md-lb { background: linear-gradient(120deg, var(--a26-accent-500) 0%, var(--a26-accent) 100%) !important; box-shadow: 0 10px 22px -14px rgba(32,70,182,.6); } /* ============================================================ 9. REDUCED MOTION ============================================================ */ @media (prefers-reduced-motion: reduce) { html.pulse-app .sidebar, html.pulse-app .sidebar-backdrop, html.pulse-app .a26-seg a { transition: none !important; } html.pulse-app .a26-hamb:active, html.pulse-app .a26-bell:active, html.pulse-app .a26-chip:active, html.pulse-app .a26-row:active { transform: none !important; } }