/* * pulse.css — FinFex "The Pulse" PWA * * Design invariants: * - OLED black background (#0F0F0F) — true black for OLED power saving * - Pulse Cyan (#00FFFF) primary accent — maximum contrast outdoors * - Pulse Red (#FF3333) emergency state * - System font stack (Inter → SF Pro → system-ui) — zero font loading * - All touch targets ≥ 48×48 px (WCAG 2.5.5 AAA) * - No soft grays, no decorative borders, no shadows that reduce contrast * - CSS custom properties for instant theme switching (CYAN ↔ RED) */ /* ── Reset & base ─────────────────────────────────────────────────────────── */ *, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; -webkit-tap-highlight-color: transparent; } :root { /* Theme tokens */ --bg: #0F0F0F; --accent: #00FFFF; --accent-dim: rgba(0, 255, 255, 0.15); --emergency: #FF3333; --emergency-dim:rgba(255, 51, 51, 0.15); --text-primary: #FFFFFF; --text-muted: #888888; --offline-bg: #2A2A2A; /* Typography */ --font: "Inter", "SF Pro Display", -apple-system, BlinkMacSystemFont, "Segoe UI", system-ui, sans-serif; /* Layout */ --zone-a-h: 30vh; --zone-b-h: 40vh; --zone-c-h: 30vh; --fab-size: 64px; --card-gap: 12px; --card-radius: 12px; /* Active state — toggled by JS between cyan and red */ --state-color: var(--accent); --state-color-dim: var(--accent-dim); --state-glow: 0 0 24px rgba(0, 255, 255, 0.45); } /* Emergency state — applied to by JS */ body.state-red { --state-color: var(--emergency); --state-color-dim: var(--emergency-dim); --state-glow: 0 0 28px rgba(255, 51, 51, 0.55); } html, body { height: 100%; width: 100%; overflow: hidden; background: var(--bg); color: var(--text-primary); font-family: var(--font); font-size: 16px; line-height: 1.4; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; /* Prevent text size adjustment on orientation change */ -webkit-text-size-adjust: 100%; } /* ── Offline ribbon ───────────────────────────────────────────────────────── */ .offline-ribbon { position: fixed; top: 0; left: 0; right: 0; z-index: 100; display: flex; align-items: center; justify-content: center; gap: 8px; padding: 10px 16px; background: var(--offline-bg); color: var(--text-muted); font-size: 13px; font-weight: 600; letter-spacing: 0.04em; text-transform: uppercase; /* Hidden by default — shown only when offline */ transform: translateY(-100%); transition: transform 0.25s ease; pointer-events: none; } .offline-ribbon.visible { transform: translateY(0); pointer-events: auto; } .offline-dot { width: 8px; height: 8px; border-radius: 50%; background: var(--text-muted); animation: offline-blink 1.4s ease-in-out infinite; } @keyframes offline-blink { 0%, 100% { opacity: 1; } 50% { opacity: 0.3; } } /* ── Zone layout ──────────────────────────────────────────────────────────── */ .zone { position: relative; width: 100%; } .zone-a { height: var(--zone-a-h); display: flex; align-items: center; justify-content: center; padding: 0 24px; /* Push down when offline ribbon is visible */ transition: padding-top 0.25s ease; } body.offline .zone-a { padding-top: 44px; } .zone-b { height: var(--zone-b-h); display: flex; flex-direction: column; align-items: stretch; padding: 0 0 4px; } .zone-c { height: var(--zone-c-h); overflow: hidden; } /* ── Zone A: System Anchor ────────────────────────────────────────────────── */ .anchor-wrapper { text-align: center; width: 100%; } .balance-value { font-size: clamp(44px, 12vw, 72px); font-weight: 900; letter-spacing: -0.02em; color: var(--state-color); text-shadow: var(--state-glow); line-height: 1; transition: color 0.4s ease, text-shadow 0.4s ease; /* Prevent layout shift during number updates */ font-variant-numeric: tabular-nums; font-feature-settings: "tnum"; } /* Pulse animation on value update */ .balance-value.pulse-update { animation: value-pulse 0.35s ease; } @keyframes value-pulse { 0% { transform: scale(1); } 40% { transform: scale(1.04); } 100% { transform: scale(1); } } .balance-label { margin-top: 8px; font-size: 13px; font-weight: 500; color: var(--text-muted); letter-spacing: 0.08em; text-transform: uppercase; } .balance-context { margin-top: 10px; font-size: 15px; font-weight: 500; color: var(--text-primary); opacity: 0.75; min-height: 22px; transition: opacity 0.3s ease; } /* ── Zone B: Pulse Timeline ───────────────────────────────────────────────── */ .timeline-container { flex: 1; display: flex; flex-direction: column; padding: 0 16px; } .pulse-chart { flex: 1; width: 100%; overflow: visible; } /* Chart line */ .chart-line { fill: none; stroke: var(--state-color); stroke-width: 2.5; stroke-linecap: round; stroke-linejoin: round; filter: url(#glow-cyan); transition: stroke 0.4s ease; vector-effect: non-scaling-stroke; } body.state-red .chart-line { filter: url(#glow-red); } /* Area fill */ .chart-fill { fill: url(#fill-cyan); transition: fill 0.4s ease; } body.state-red .chart-fill { fill: url(#fill-red); } /* Event pulse dots on the line */ .event-dot { fill: var(--state-color); opacity: 0.9; transition: fill 0.4s ease; } .event-dot.sassa { fill: #00FFFF; animation: dot-sassa-pulse 2s ease-in-out infinite; } @keyframes dot-sassa-pulse { 0%, 100% { r: 4; opacity: 0.9; } 50% { r: 6; opacity: 0.5; } } /* X-axis day ticks */ .day-ticks { display: flex; justify-content: space-between; padding: 4px 2px 0; color: var(--text-muted); font-size: 11px; font-weight: 600; letter-spacing: 0.02em; user-select: none; } .day-ticks span { flex: 1; text-align: center; } /* ── Zone C: Action Cards ─────────────────────────────────────────────────── */ .card-scroll-viewport { height: 100%; overflow: hidden; padding: 8px 16px 80px; /* bottom padding clears FAB */ position: relative; } /* Fade mask at bottom so cards disappear cleanly */ .card-scroll-viewport::after { content: ''; position: absolute; bottom: 0; left: 0; right: 0; height: 80px; background: linear-gradient(transparent, var(--bg)); pointer-events: none; } .card-list { display: flex; flex-direction: column; gap: var(--card-gap); /* Auto-scroll animation driven by JS */ } /* Individual action card */ .action-card { display: flex; align-items: flex-start; gap: 14px; padding: 16px; border-radius: var(--card-radius); border: 1px solid var(--state-color); background: var(--state-color-dim); transition: border-color 0.4s ease, background 0.4s ease; /* Entrance animation */ animation: card-enter 0.3s ease both; } @keyframes card-enter { from { opacity: 0; transform: translateY(12px); } to { opacity: 1; transform: translateY(0); } } .card-icon { flex-shrink: 0; width: 36px; height: 36px; display: flex; align-items: center; justify-content: center; color: var(--state-color); transition: color 0.4s ease; } .card-icon svg { width: 28px; height: 28px; stroke: currentColor; fill: none; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; } .card-body { flex: 1; min-width: 0; } .card-header { font-size: 15px; font-weight: 700; color: var(--text-primary); line-height: 1.3; margin-bottom: 4px; } .card-description { font-size: 13px; font-weight: 400; color: var(--text-muted); line-height: 1.5; } /* ── FAB — Camera button ──────────────────────────────────────────────────── */ .fab { position: fixed; bottom: max(24px, env(safe-area-inset-bottom, 24px)); right: 20px; z-index: 50; width: var(--fab-size); height: var(--fab-size); border-radius: 50%; border: none; cursor: pointer; background: var(--state-color); color: var(--bg); box-shadow: var(--state-glow), 0 4px 16px rgba(0,0,0,0.6); display: flex; align-items: center; justify-content: center; transition: background 0.4s ease, box-shadow 0.4s ease, transform 0.15s ease; /* Minimum 48×48 touch target — FAB is 64×64 so already compliant */ touch-action: manipulation; } .fab:active { transform: scale(0.93); } .fab svg { width: 28px; height: 28px; stroke: currentColor; fill: none; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; } /* FAB tap ripple */ .fab::after { content: ''; position: absolute; inset: 0; border-radius: 50%; background: rgba(255,255,255,0.25); opacity: 0; transform: scale(0.6); transition: opacity 0.3s ease, transform 0.3s ease; } .fab:active::after { opacity: 1; transform: scale(1.2); } /* ── Loading skeleton ─────────────────────────────────────────────────────── */ .skeleton { background: linear-gradient( 90deg, rgba(255,255,255,0.04) 25%, rgba(255,255,255,0.08) 50%, rgba(255,255,255,0.04) 75% ); background-size: 200% 100%; animation: skeleton-shimmer 1.4s ease infinite; border-radius: 6px; } @keyframes skeleton-shimmer { 0% { background-position: 200% 0; } 100% { background-position: -200% 0; } } /* ── Accessibility ────────────────────────────────────────────────────────── */ /* Focus ring — visible for keyboard/switch access users */ :focus-visible { outline: 3px solid var(--state-color); outline-offset: 3px; } /* Reduce motion — respect system preference */ @media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: 0.01ms !important; transition-duration: 0.01ms !important; } } /* ── Landscape orientation adjustment ────────────────────────────────────── */ @media (orientation: landscape) and (max-height: 500px) { :root { --zone-a-h: 35vh; --zone-b-h: 35vh; --zone-c-h: 30vh; } .balance-value { font-size: clamp(32px, 8vw, 52px); } } /* ── Horizon fan (days 15–45) ────────────────────────────────────────────── * * Painted beneath the 14-day line, never over it. The near term stays the * crispest mark on the chart because it is the most knowable; the fan is * deliberately softer, and gets softer still toward its outer edge, so the * eye reads the middle as the forecast and the edges as range. */ .fan-envelope { stroke: none; pointer-events: none; } .fan-envelope--outer { fill: var(--state-color); fill-opacity: 0.10; } .fan-envelope--inner { fill: var(--state-color); fill-opacity: 0.20; } .fan-median { fill: none; stroke: var(--state-color); stroke-width: 1; stroke-dasharray: 3 3; stroke-opacity: 0.65; vector-effect: non-scaling-stroke; } .fan-caption { margin-top: 6px; font-size: 12px; line-height: 1.35; color: var(--text-muted); text-align: center; min-height: 1em; /* reserve the line so the chart never jumps */ } /* The day ticks label days 1-14. With a fan present the axis runs to 45, * so leaving them visible — even dimmed — labels the chart wrongly. * visibility rather than display: the row keeps its space, so the chart * does not jump the moment a merchant's first horizon run lands. */ body.has-fan .day-ticks { visibility: hidden; } /* ── One Move card ───────────────────────────────────────────────────────── * * Advice, not an alert. It shares the action cards' shape but not their * urgency: no emergency red, no pulse, no auto-scroll. A merchant should be * able to tell "here is something you could do" from "here is something * going wrong" without reading either. */ .one-move { margin: 0 16px var(--card-gap); padding: 14px 16px; border-radius: var(--card-radius); background: var(--accent-dim); border-left: 3px solid var(--accent); } .one-move-headline { font-size: 11px; font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase; color: var(--accent); margin-bottom: 6px; } .one-move-instruction { font-size: 16px; line-height: 1.4; color: var(--text-primary); } /* The amount earns the glance; the instruction is what gets acted on — so * the saving is set apart but never larger than the sentence it supports. */ .one-move-saving { margin-top: 6px; font-size: 14px; font-weight: 600; color: var(--accent); } .one-move[hidden] { display: none; }