:root{ --page:#EEF0EF; --surface:#FFFFFF; --surface-2:#F1F3F1; --text-primary:#16181B; --text-secondary:#6B7280; --text-muted:#9CA3AF; --border:#E5E7EB; --border-strong:#C7CBD1; --teal:#0F8F6B; --teal-deep:#0B6E52; --teal-bg:#E1F5EE; --teal-rgb:15,143,107; --glass-bg:rgba(255,255,255,.28); --teal-text:#0B6E52; --danger:#E24B4A; --danger-bg:#FCEBEB; --danger-text:#A32D2D; --info-text:#2563EB; --status-active:#16A34A; --status-no-loan:#9CA3AF; --status-pending:#D9A404; --status-suspended:#DC2626; --status-blacklisted:#111111; --radius:12px; } [data-theme="dark"]{ --page:#121417; --surface:#1C1F23; --surface-2:#262A2F; --text-primary:#F0F1F3; --text-secondary:#9CA3AF; --text-muted:#6B7280; --border:#33383E; --border-strong:#4A5058; --teal:#14A67D; --teal-deep:#0F8F6B; --teal-bg:#10332A; --teal-rgb:20,166,125; --glass-bg:rgba(28,31,35,.28); --teal-text:#34D399; --danger:#F87171; --danger-bg:#3B1615; --danger-text:#F87171; --info-text:#60A5FA; --status-active:#22C55E; --status-no-loan:#6B7280; --status-pending:#EAB308; --status-suspended:#EF4444; --status-blacklisted:#E5E7EB; } [data-theme="neon"]{ --page:#070B14; --glass-bg:rgba(14,21,32,.28); --surface:#0E1520; --surface-2:#141F30; --text-primary:#E8F4FF; --text-secondary:#7C93B8; --text-muted:#4A5D7A; --border:#1E2C42; --border-strong:#2E4568; --teal:#00D9FF; --teal-deep:#00A8CC; --teal-bg:#062330; --teal-text:#4DEEFF; --teal-rgb:0,217,255; --glow2-rgb:0,255,157; --danger:#FF3B5C; --danger-bg:#2A0A16; --danger-text:#FF6B85; --info-text:#5B8DEF; --status-active:#00FF9D; --status-no-loan:#4A5D7A; --status-pending:#FFB800; --status-suspended:#FF3B5C; --status-blacklisted:#E8F4FF; } [data-theme="aurora"]{ --glass-bg:rgba(16,21,20,.28); --page:#050409; --surface:#0D0C14; --surface-2:#16151F; --text-primary:#E8FFFC; --text-secondary:#7A9490; --text-muted:#445250; --border:#1A2826; --border-strong:#2A423E; --teal:#14DCC8; --teal-deep:#0FA894; --teal-bg:#0A2620; --teal-text:#2EFFE0; --teal-rgb:20,220,200; --glow2-rgb:46,255,180; --danger:#FF3B5C; --danger-bg:#2A0A16; --danger-text:#FF6B85; --info-text:#4FA8FF; --status-active:#14DCC8; --status-no-loan:#445250; --status-pending:#FFB800; --status-suspended:#FF3B5C; --status-blacklisted:#E8FFFC; } [data-theme="gold"]{ --page:#0A0A0C; --surface:#141317; --surface-2:#1D1B1F; --text-primary:#F5F1E8; --text-secondary:#9C9690; --text-muted:#6B655F; --border:#2A2620; --border-strong:#3D3730; --teal:#D4AF37; --teal-deep:#B8860B; --teal-bg:#2A2210; --teal-rgb:212,175,55; --glass-bg:rgba(20,19,23,.28); --teal-text:#F5D061; --danger:#F87171; --danger-bg:#3B1615; --danger-text:#F87171; --info-text:#6FA8DC; --status-active:#22C55E; --status-no-loan:#6B655F; --status-pending:#EAB308; --status-suspended:#EF4444; --status-blacklisted:#F5F1E8; --glow2-rgb:245,208,97; } /* ===== Apple Liquid Glass theme (Standing Directives #1 & #3) ===== Design-system-first, per the owner's explicit sequencing rule: this block defines the tokens; the component rules further below apply those tokens to the SHARED classes every screen already uses (.sheet, .glass-card, .btn-primary/.btn-secondary, header, .dc-card, .c360-card, inputs) rather than styling any screen individually -- so every screen inherits the system automatically, with zero per-screen bespoke code. Cool, translucent, high-clarity palette -- deliberately distinct from Gold's warm restrained glow, since this is meant to read as glass/light rather than metal/gold. */ /* ===== Eclipse theme: cinematic black+gold, halo-ring motif ===== Reference-inspired (owner-provided moodboard, 2026-07-19): deep near-black, a bold warm gold (bolder/brighter than the restrained "Gold" theme, which was deliberately muted), and a signature glowing "halo ring" motif behind portraits/hero moments -- the visual through-line of the reference image. Brothers+Cash identity is kept (own logo, own copy, own data) -- only the *treatment* is inspired by the reference, per Directive #1's "take inspiration, don't copy." */ [data-theme="eclipse"]{ --page:#0A0A0D; --surface:#131316; --surface-2:#1C1B1F; --text-primary:#F5F3EE; --text-secondary:#9C978C; --text-muted:#68635A; --border:rgba(244,192,91,.14); --border-strong:rgba(244,192,91,.28); --teal:#F4C05B; --teal-deep:#D89B3C; --teal-bg:rgba(244,192,91,.14); --teal-rgb:244,192,91; --teal-text:#F9D583; --glass-bg:rgba(19,19,22,.28); --danger:#E85C5C; --danger-bg:rgba(232,92,92,.14); --danger-text:#F08080; --info-text:#6FA8DC; --status-active:#4ADE80; --status-no-loan:#68635A; --status-pending:#F4C05B; --status-suspended:#E85C5C; --status-blacklisted:#F5F3EE; --glow2-rgb:249,213,131; --halo-color: 244,192,91; } /* ===== Prism theme (2026-08-10, direct owner requirement): the new, separate, toggleable theme -- glass overdue banners, a spaced-out loan list with the real logo visible through the gaps, and a swipeable status/risk chart above the banners. Base palette is the same as Dark, since every approved mockup was built against these exact colors. Component-specific overrides follow further below, scoped the same way Eclipse's own are. ===== */ [data-theme="prism"]{ --page:#121417; --surface:#1C1F23; --surface-2:#262A2F; --text-primary:#F0F1F3; --text-secondary:#9CA3AF; --text-muted:#6B7280; --border:#33383E; --border-strong:#4A5058; --teal:#14A67D; --teal-deep:#0F8F6B; --teal-bg:#10332A; --teal-rgb:20,166,125; --glass-bg:rgba(28,31,35,.28); --teal-text:#34D399; --danger:#F87171; --danger-bg:#3B1615; --danger-text:#F87171; --info-text:#60A5FA; --status-active:#22C55E; --status-no-loan:#6B7280; --status-pending:#EAB308; --status-suspended:#EF4444; --status-blacklisted:#E5E7EB; } /* ===== Prism Light theme (2026-08-10, direct owner requirement): the same design as Prism, on the light base palette instead of dark. Structural rules (swipe mechanics, layout, spacing) are shared with dark Prism via :is() below -- only the hardcoded translucent-color rules (banner glass, list row glass, ring card) get a light-specific counterpart, since those can't use CSS variables the same way. ===== */ [data-theme="prism-light"]{ --page:#EEF0EF; --surface:#FFFFFF; --surface-2:#F1F3F1; --text-primary:#16181B; --text-secondary:#6B7280; --text-muted:#9CA3AF; --border:#E5E7EB; --border-strong:#C7CBD1; --teal:#0F8F6B; --teal-deep:#0B6E52; --teal-bg:#E1F5EE; --teal-rgb:15,143,107; --glass-bg:rgba(255,255,255,.28); --teal-text:#0B6E52; --danger:#E24B4A; --danger-bg:#FCEBEB; --danger-text:#A32D2D; --info-text:#2563EB; --status-active:#16A34A; --status-no-loan:#9CA3AF; --status-pending:#D9A404; --status-suspended:#DC2626; --status-blacklisted:#111111; } [data-theme="glass"]{ --page:#0B0D12; --surface:#12151C; --surface-2:#1A1E27; --text-primary:#F2F5F8; --text-secondary:#9AA5B4; --text-muted:#5E6878; --border:rgba(255,255,255,.10); --border-strong:rgba(255,255,255,.20); --teal:#5FB8FF; --teal-deep:#3B8FDB; --teal-bg:rgba(95,184,255,.14); --teal-rgb:95,184,255; --teal-text:#8FD0FF; --glass-bg:rgba(20,23,31,.28); --danger:#FF6B6B; --danger-bg:rgba(255,107,107,.14); --danger-text:#FF8A8A; --info-text:#4C7EFF; --status-active:#3DDC97; --status-no-loan:#5E6878; --status-pending:#FFC94D; --status-suspended:#FF6B6B; --status-blacklisted:#F2F5F8; --glow2-rgb:143,208,255; /* Liquid-Glass-specific tokens (new -- no other theme needs these, so they're only defined here rather than bloating :root for everyone). Component rules below reference them by name. */ --glass-blur: 26px; --glass-blur-soft: 16px; --glass-saturate: 1.7; --glass-radius-lg: 20px; --glass-radius-md: 14px; --glass-spring: cubic-bezier(.34,1.4,.64,1); --glass-ease: cubic-bezier(.22,.61,.36,1); --glass-highlight: rgba(255,255,255,.14); } *{box-sizing:border-box;} /* Plain Mode (2026-07-21): a real, deliberate low-cost mode for lower-end devices -- not a cosmetic toggle. backdrop-filter blur is one of the most GPU-expensive operations that exists, and every glass surface in this app (header, cards, sheets, dialogs -- 23 separate declarations) references these same few custom properties, so zeroing them here turns off the actual expensive work everywhere at once, instead of fighting specificity on 23 individual rules. Motion durations are also collapsed to near-instant, since a slide animation over a now-unblurred background is cheap on its own -- the blur was always the real cost, but removing motion too gives the plainest, safest baseline for genuinely low-end hardware. */ [data-motion="plain"]{ --glass-blur: 0px; --glass-blur-soft: 0px; --glass-saturate: 1; } [data-motion="plain"] *{ backdrop-filter: none !important; -webkit-backdrop-filter: none !important; transition-duration: .01ms !important; animation-duration: .01ms !important; } /* Respects the OS-level accessibility setting automatically, even if the person never finds or touches the in-app toggle -- the same real-world scenario as Plain Mode (return the cheapest possible render path), just triggered by a different signal. */ @media (prefers-reduced-motion: reduce){ *{ transition-duration: .01ms !important; animation-duration: .01ms !important; } } /* REAL BUG (2026-08-27, direct owner report: turning Plain Mode ON made the ambient particles "go crazy"/flicker instead of calming down -- inconsistent between his device and a friend's Android, smooth on one, frantic on the other). Root cause: compressing animation-duration to .01ms above is the right move for a one-shot transition (a sheet sliding open just finishes almost instantly), but wrong for anything with animation-iteration-count:infinite -- an ambient particle float, a twinkle, a rotating halo. An .01ms duration doesn't stop an infinite loop, it replays the whole loop up to ~100,000 times a second, and which phase of that loop actually gets painted on a given repaint is not something the CSS spec pins down -- different browsers/GPUs land on different-looking chaos, which is exactly why this looked fine on one device and frantic on another rather than failing the same way everywhere. This file already had the correct fix for the OS-level prefers-reduced-motion signal on SOME of these elements -- `animation:none` (removes animation-name entirely, so the .01ms duration above has nothing left to apply to and is harmless) -- see .glass-ambient-particle/.vip-glow/.sheet-hero-title/.eclipse-halo/ .dc-hero-particle below. It was just never mirrored onto [data-motion="plain"], and two more infinite loops (.login-star-particle, .nl-header-star) had no override under EITHER signal. Every [data-motion="plain"] sibling added at each of those sites below closes this gap; this comment is the single place explaining why. */ /* ===== Gold theme: restrained liquid-glass + gold glow (no neon-style flashing -- per the design docs, "premium" means refined/restrained) ===== */ [data-theme="gold"] .btn-primary{ background:linear-gradient(135deg,#F5D061,#D4AF37 55%,#B8860B); color:#171310;box-shadow:0 2px 10px -2px rgba(var(--teal-rgb),.45), inset 0 1px 0 rgba(255,255,255,.25); } [data-theme="gold"] .btn-primary:active{filter:brightness(.94);} [data-theme="gold"] header{box-shadow:0 1px 0 rgba(var(--teal-rgb),.12), 0 8px 24px -12px rgba(0,0,0,.6);} [data-theme="gold"] .brand-mark, [data-theme="gold"] .login-mark{ box-shadow:0 0 0 1px rgba(var(--teal-rgb),.35), 0 2px 10px -2px rgba(var(--teal-rgb),.4); } [data-theme="gold"] .glass-card, [data-theme="gold"] .sheet{ box-shadow:0 1px 0 rgba(var(--teal-rgb),.08), 0 12px 32px -16px rgba(0,0,0,.7); } /* Gold-theme .due-banner-header.overdue border-left override removed (2026-08-21, part of the continuous-accent fix -- see the .due-banner:has(...) comment near .due-banner). It set the exact same var(--danger-text) the base rule already resolved to (every theme, gold included, defines its own --danger-text), so it was a no-op even before this change; left in place it would have re-introduced a header-only accent for gold specifically now that the header's own border-left has been removed in favor of the container-level one. */ /* ===== end gold theme ===== */ /* ===== Apple Liquid Glass theme: component layer ===== Every rule below targets a SHARED class already used across every screen (header, .sheet, .glass-card, .c360-card, .dc-card, .btn-primary/.btn-secondary, inputs, .loan-row/.opstats-row) -- deliberately no screen-specific selectors. This is what makes the design system apply "everywhere at once": elevate the shared component, every consumer of it inherits the change automatically. */ [data-theme="glass"] body{ background: radial-gradient(120% 90% at 15% -10%, rgba(var(--teal-rgb),.10), transparent 55%), radial-gradient(100% 80% at 100% 100%, rgba(143,120,255,.07), transparent 60%), var(--page); } /* Header -- floating glass toolbar, heavier blur than the base theme, with a soft top highlight to read as a real glass edge catching light. */ [data-theme="glass"] header{ background:var(--glass-bg); backdrop-filter:blur(var(--glass-blur)) saturate(var(--glass-saturate)); -webkit-backdrop-filter:blur(var(--glass-blur)) saturate(var(--glass-saturate)); border:1px solid var(--border); box-shadow: inset 0 1px 0 var(--glass-highlight), 0 8px 32px -12px rgba(0,0,0,.55), 0 1px 0 rgba(var(--teal-rgb),.10); } [data-theme="glass"] header.header-elevated{ backdrop-filter:blur(calc(var(--glass-blur) + 6px)) saturate(calc(var(--glass-saturate) + .2)); -webkit-backdrop-filter:blur(calc(var(--glass-blur) + 6px)) saturate(calc(var(--glass-saturate) + .2)); } [data-theme="glass"] .brand-mark, [data-theme="glass"] .login-mark{ box-shadow:inset 0 1px 0 var(--glass-highlight), 0 0 0 1px var(--border), 0 4px 14px -4px rgba(var(--teal-rgb),.35); } /* Sheets/dialogs -- real glass, not solid. Every .sheet in the app (New Loan, Customer Profile, Analytics, Document Center, Settings, the viewer, list-sheet, etc.) is the SAME element/class, so this one rule reaches every one of them. */ [data-theme="glass"] .sheet{ background: radial-gradient(ellipse 600px 240px at 20% 0%, rgba(var(--teal-rgb),.10), transparent 70%), var(--glass-bg); backdrop-filter:blur(var(--glass-blur)) saturate(var(--glass-saturate)); -webkit-backdrop-filter:blur(var(--glass-blur)) saturate(var(--glass-saturate)); border-top:1px solid var(--border-strong); box-shadow:inset 0 1px 0 var(--glass-highlight), 0 -16px 48px -20px rgba(0,0,0,.6); border-radius:var(--glass-radius-lg) var(--glass-radius-lg) 0 0; transition:transform .55s var(--glass-spring), opacity .4s ease, filter .2s ease; } [data-theme="glass"] .sheet.sheet-layered{ box-shadow:inset 0 1px 0 var(--glass-highlight), 0 -8px 32px -12px rgba(0,0,0,.5), 0 0 0 1px var(--border); } /* Cards -- .glass-card, .c360-card, .dc-card, .dc-customer-card all become genuine layered glass panels instead of flat tinted boxes. */ [data-theme="glass"] .glass-card, [data-theme="glass"] .c360-card, [data-theme="glass"] .dc-card, [data-theme="glass"] .dc-customer-card{ background:var(--glass-bg); backdrop-filter:blur(var(--glass-blur-soft)) saturate(var(--glass-saturate)); -webkit-backdrop-filter:blur(var(--glass-blur-soft)) saturate(var(--glass-saturate)); border:1px solid var(--border); box-shadow:inset 0 1px 0 var(--glass-highlight), 0 12px 32px -18px rgba(0,0,0,.55); border-radius:var(--glass-radius-md); } @media (hover:hover){ [data-theme="glass"] .dc-card:hover{ border-color:rgba(var(--teal-rgb),.45); box-shadow:inset 0 1px 0 var(--glass-highlight), 0 16px 40px -16px rgba(var(--teal-rgb),.28); } } /* Buttons -- glass sheen + spring compression instead of a flat gradient press. */ [data-theme="glass"] .btn-primary{ background:linear-gradient(180deg, rgba(255,255,255,.16), rgba(255,255,255,0) 40%), linear-gradient(180deg, var(--teal), var(--teal-deep)); box-shadow:inset 0 1px 0 rgba(255,255,255,.35), 0 6px 18px -6px rgba(var(--teal-rgb),.55); transition:transform .18s var(--glass-spring), box-shadow .18s var(--glass-ease); } [data-theme="glass"] .btn-primary:active{transform:scale(.965);box-shadow:inset 0 1px 4px rgba(0,0,0,.25);} [data-theme="glass"] .btn-secondary{ background:rgba(255,255,255,.05); backdrop-filter:blur(10px); -webkit-backdrop-filter:blur(10px); border-color:var(--border); } @media (hover:hover){ [data-theme="glass"] .btn-secondary:hover:not(:disabled){background:rgba(255,255,255,.09);border-color:var(--border-strong);} } /* Inputs / search -- subtle glow on focus, shared across every search bar and text field in the app (login, customer search, Document Center's search, Activity Center's search all use plain ). */ [data-theme="glass"] input:focus, [data-theme="glass"] select:focus, [data-theme="glass"] textarea:focus{ outline:none; border-color:rgba(var(--teal-rgb),.55); box-shadow:0 0 0 3px rgba(var(--teal-rgb),.18), inset 0 1px 0 rgba(255,255,255,.05); transition:box-shadow .22s var(--glass-ease), border-color .22s var(--glass-ease); } /* Toggles -- ios-toggle already exists app-wide (fund source, the new Collateral toggle); give the active track a soft glow to match. */ [data-theme="glass"] .ios-toggle input:checked ~ .ios-toggle-track{ box-shadow:0 0 10px -1px rgba(var(--teal-rgb),.6); } /* Tables / list rows -- .loan-row, .opstats-row, .link-row, .dc-doc-row all share the same hover-tint pattern already; add a touch of glow. */ [data-theme="glass"] .loan-row:active, [data-theme="glass"] .opstats-row:active{background-color:rgba(255,255,255,.05);} @media (hover:hover){ [data-theme="glass"] .loan-row:hover, [data-theme="glass"] .opstats-row:hover, [data-theme="glass"] .link-row:hover, [data-theme="glass"] .dc-doc-row:hover{background-color:rgba(255,255,255,.05);} } /* Ambient motion -- generalizes the Document Center hero's own .dc-hero-particle technique (Batch 62) into a reusable utility any glass surface can opt into, per Directive #3's explicit instruction to expand that idea rather than leave it isolated to one screen. Reduced-motion respected identically to the original. */ .glass-ambient{position:relative;overflow:hidden;} .glass-ambient-particle{ position:absolute;width:4px;height:4px;border-radius:50%; background:var(--teal);opacity:.4; box-shadow:0 0 12px 3px rgba(var(--teal-rgb),.5); animation:glass-float 11s ease-in-out infinite;pointer-events:none; } /* Header gets its own non-clipping ambient layer instead of reusing .glass-ambient directly -- the header's own dropdown menu (#logo-menu-dropdown) extends BELOW the header's visual box, so overflow:hidden on
itself would silently clip the menu. This inner absolutely-positioned layer clips only itself. REAL BUG (2026-07-21, re-fixed after a sandbox revert lost the first fix): position:absolute was only ever defined under [data-theme="glass"] -- every other theme, Eclipse included, left this as a plain, unstyled flex child sitting BEFORE the logo in the header's own flex layout, pushing the logo away from the left corner. Made universal. */ .header-ambient-layer{ position:absolute;inset:0;overflow:hidden;border-radius:inherit; pointer-events:none;z-index:0; } @keyframes glass-float{ 0%,100%{transform:translateY(0) scale(1);opacity:.25;} 50%{transform:translateY(-16px) scale(1.35);opacity:.6;} } @media (prefers-reduced-motion: reduce){ [data-theme="glass"] .glass-ambient-particle{animation:none;} } /* Plain Mode twin of the reduce-motion rule above -- see the "REAL BUG (2026-08-27...)" note near [data-motion="plain"] *. */ [data-motion="plain"] .glass-ambient-particle{animation:none;} /* Login-only "star" particles (2026-08-20, direct owner requirement -- "APPROVED. IMPLEMENT..."): a brand-new, additive class, scoped only to spans placed inside #login-screen -- never applied anywhere else, in particular never inside #app-screen's header. Deliberately does NOT touch .glass-ambient-particle or @keyframes glass-float above; it only REFERENCES glass-float by name from a new selector, which does not alter that shared rule or anything else that already uses it (the authenticated app's #app-screen > header .header-ambient-layer particles). Per-instance size/opacity/color/ animation-duration/animation-delay are set inline on each span so this one class can produce visually varied particles without a class per variant. CORRECTION (2026-08-27): the claim this comment used to make here -- that reduced-motion/[data-motion="plain"] need no extra rule because the global `*` selector already covers it -- was wrong. Forcing animation-duration to .01ms on an infinite-looping animation doesn't stop it, it replays it up to ~100,000 times a second, which is exactly the "particles flicker like crazy" bug reported 2026-08-27. See the "REAL BUG" note near [data-motion="plain"] * for the full explanation; this class needed the same explicit animation:none override .glass-ambient-particle already had, under both signals. */ .login-star-particle{ position:absolute;border-radius:50%; background:#fff; animation:glass-float 11s ease-in-out infinite; pointer-events:none; } @media (prefers-reduced-motion: reduce){ .login-star-particle{animation:none;} } [data-motion="plain"] .login-star-particle{animation:none;} /* Celebratory burst -- a DIFFERENT character from the ambient float above: fires once, radiates outward from a point, then vanishes. Reserved for genuine reward moments (a payment successfully recorded), not idle decoration -- per Directive #3's "success messages feel rewarding" ask, without turning every toast into a confetti cannon. */ [data-theme="glass"] .glass-burst-particle{ position:absolute;top:50%;left:50%;width:5px;height:5px;border-radius:50%; background:var(--status-active); box-shadow:0 0 8px 2px rgba(var(--teal-rgb),.6); animation:glass-burst .85s cubic-bezier(.16,.84,.44,1) forwards; pointer-events:none; } @keyframes glass-burst{ 0%{transform:translate(-50%,-50%) translate(0,0) scale(1);opacity:1;} 100%{transform:translate(-50%,-50%) translate(var(--bx,0),var(--by,-40px)) scale(.3);opacity:0;} } @media (prefers-reduced-motion: reduce){ [data-theme="glass"] .glass-burst-particle{animation:none;display:none;} } /* VIP breathing glow -- delight reserved for the one customer tier the app already treats as special everywhere else (gold crown badge, gold photo ring). Reuses that SAME gold, doesn't invent a second one -- consistent with the app's own "one gold" rule from Batch 50. Made universal (2026-07-21, re-fixed after a sandbox revert) -- uses a fixed color, not a theme-scoped variable, so there was never a real reason this couldn't apply everywhere. */ .vip-glow::before{ content:"";position:absolute;inset:-8px;border-radius:50%; background:radial-gradient(circle, rgba(212,175,55,.35), transparent 70%); animation:vip-breathe 3.2s ease-in-out infinite; z-index:-1;pointer-events:none; } @keyframes vip-breathe{ 0%,100%{opacity:.45;transform:scale(1);} 50%{opacity:.85;transform:scale(1.12);} } @media (prefers-reduced-motion: reduce){ .vip-glow::before{animation:none;opacity:.6;} } [data-motion="plain"] .vip-glow::before{animation:none;opacity:.6;} /* Sheet hero -- a real compact banner (not a bare title crammed into a wrapper), for Analytics/Settings. Owner feedback (2026-07-19): the first version was too subtle -- particles had no room and there was no background/line to give the strip visual weight, unlike Document Center's hero. This gives it real presence: padding, a radial wash, an accent line under the title (same DNA as Document Center's own .dc-hero/.dc-hero-line), AND a title shimmer sweep Document Center doesn't have -- so these screens feel like family, not a lesser copy. */ /* Embossed PANEL, not embossed text (2026-08-29, direct owner correction: "when I say embossed the heading I did not mean the words... I meant the whole box up there... the box that it sits on... now you doubled embossed the words and they look fuzzy I don't like it... I do not like a square like analytics is, I like round like document center is"). Two earlier passes put the emboss on the TEXT (text-shadow, then a stronger text-shadow + a second accent line) -- both wrong target, and the stronger one visibly read as fuzzy letters. Reverted .sheet-hero-title back to a plain shimmer-only heading (no text-shadow) and moved the actual emboss onto .sheet-hero itself: a real raised-panel treatment (bright top/left inner edge, dark bottom/right inner edge, like a light source from the upper-left -- the same convention the old text attempts used, just applied to the box instead of the letters) plus a soft outer drop shadow so the whole panel visibly lifts off the page. border-radius bumped from --glass-radius-md (14px) to 20px -- Document Center's box (.dc-hero, 16px + a solid border + opaque card background) already read as "round" to the owner; this one's glass/blur background is more transparent so the same-ish radius read as "square" by comparison -- rounding it further, and giving it the same explicit emboss shadow as .dc-hero below, makes the two match. */ .sheet-hero{ position:relative;overflow:hidden;border-radius:20px; padding:20px 18px 22px;margin-bottom:4px;min-height:76px; background: radial-gradient(130% 160% at 12% 0%, rgba(var(--teal-rgb),.20), transparent 62%), var(--glass-bg); backdrop-filter:blur(var(--glass-blur-soft)) saturate(var(--glass-saturate)); -webkit-backdrop-filter:blur(var(--glass-blur-soft)) saturate(var(--glass-saturate)); border:1px solid var(--border); box-shadow: inset 0 1.5px 0 rgba(255,255,255,.22), inset 1.5px 0 0 rgba(255,255,255,.08), inset 0 -1.5px 0 rgba(0,0,0,.30), inset -1.5px 0 0 rgba(0,0,0,.16), 0 8px 20px -10px rgba(0,0,0,.4); } .sheet-hero-title{ position:relative;margin:0 0 10px;font-size:1.2rem;font-weight:700;letter-spacing:-.01em; color:var(--text-primary); background-image:linear-gradient(100deg, var(--text-primary) 40%, #fff 50%, var(--text-primary) 60%); background-size:220% 100%;background-clip:text;-webkit-background-clip:text; color:transparent;-webkit-text-fill-color:transparent; animation:sheet-hero-shimmer 5s ease-in-out infinite; } /* REAL BUG (2026-08-27, direct owner report -- "the icons in the headings are black, no details at all" with Plain Mode off, correct with it on): the emoji glyph placed directly inside .sheet-hero-title ("💰 Finance Center", "ℹī¸ Analytics", "⚙ī¸ Settings") inherits this heading's own color:transparent / -webkit-text-fill-color:transparent -- the mechanism the shimmer gradient above needs so background-clip:text can show the moving gradient through the text. Several rendering engines don't special-case color/bitmap emoji glyphs inside that clip-through-transparent-fill technique, and paint them as a flat black silhouette instead of their native colors -- a well-documented cross-browser quirk of background-clip:text, not something specific to this app. Plain Mode "fixed" this by accident: its own override below (mirroring the reduced-motion one) resets -webkit-text-fill-color back to opaque for the WHOLE heading, which incidentally un-breaks the emoji too, but only as a side effect -- the default (non-Plain) heading was always broken for the icon. Real fix: give the icon its own inline element and explicitly pull it back out of the transparent-fill inheritance, so it always renders with its native color regardless of Plain Mode. Wrap the leading emoji in each of those three headings with ... (done at each h2 below). */ .sheet-hero-icon{ color:var(--text-primary); -webkit-text-fill-color:currentColor; } @keyframes sheet-hero-shimmer{ 0%{background-position:160% 0;} 45%,100%{background-position:-60% 0;} } .sheet-hero-line{height:2px;width:56px;border-radius:2px;background:linear-gradient(90deg,var(--teal),transparent);} @media (prefers-reduced-motion: reduce){ .sheet-hero-title{animation:none;-webkit-text-fill-color:var(--text-primary);color:var(--text-primary);} } [data-motion="plain"] .sheet-hero-title{animation:none;-webkit-text-fill-color:var(--text-primary);color:var(--text-primary);} /* ===== end Apple Liquid Glass theme ===== */ /* ===== Eclipse theme: component layer ===== Owner-provided reference image, 2026-07-19: rebuild Customer Profile, Home, and New Loan with real creative reinterpretation of that moodboard's language -- halo rings behind portraits, a bold gold-on-black cinematic feel, stat-strips, a circular status ring. Every number used below comes from data these screens already fetch (Customer 360, the due report) -- nothing fabricated. */ [data-theme="eclipse"] body{ background: radial-gradient(90% 60% at 50% -10%, rgba(var(--halo-color),.08), transparent 60%), var(--page); } /* The halo ring -- the reference's single most distinctive motif: a glowing crescent behind a portrait. Reusable utility; used behind the Customer Profile photo and the New Loan hero icon. Structural positioning made universal (2026-07-21, re-fixed after a sandbox revert): this class is applied unconditionally to the customer photo wrapper on EVERY theme, not just Eclipse, so layout can't depend on which theme is active. The glow itself made universal too (2026-09-02, direct owner request -- "I like that [halo]... can we extend that to all the themes, not just exclusive to the eclipse"). Dropped the [data-theme="eclipse"] gate and swapped --halo-color (only ever defined inside the Eclipse theme block, so this rule genuinely could not have rendered anywhere else) for --teal-rgb, the same universal per-theme accent-color variable .eclipse-pill already uses for exactly this reason a few rounds back -- each theme now glows in its own accent color rather than Eclipse's gold everywhere. Applies to every #customer-photo-wrap, VIP included -- the VIP- specific gold override and backing plate live in the two rules below, layered on top of this one rather than replacing it, so a VIP customer gets everything a regular customer gets PLUS the extra gold treatment, not a swapped-out different effect. */ .eclipse-halo{ position:relative;display:inline-flex;align-items:center;justify-content:center; } .eclipse-halo::before{ content:"";position:absolute;inset:-10px;border-radius:50%; background:conic-gradient(from -40deg, transparent 0deg, rgba(var(--teal-rgb),.9) 60deg, transparent 140deg, transparent 360deg); filter:blur(7px); animation:eclipse-rotate 14s linear infinite; z-index:-1; } @keyframes eclipse-rotate{ to{ transform:rotate(360deg); } } @media (prefers-reduced-motion: reduce){ .eclipse-halo::before{animation:none;} } [data-motion="plain"] .eclipse-halo::before{animation:none;} /* VIP treatment (2026-09-02, direct owner follow-up -- tried giving VIP customers their own separate breathing-glow effect instead of the halo; owner's verdict: "looks ugly... vip needs to look Exclusive. revert it back to the Gold Halo and even go further and give a background to the picture. so it looks exclusive"). Forces the ring itself to the app's one fixed VIP gold (#D4AF37/ rgb(212,175,55), same value .vip-glow and every other VIP treatment in this file already uses -- the "one gold" rule from Batch 50, no second gold invented here) instead of the theme's own --teal-rgb accent, on every theme, not just Gold or Eclipse. Only `background` is redeclared -- position, inset, animation, filter, z-index all still come from the plain .eclipse-halo::before rule above, since this selector (two classes, beats .eclipse-halo's one) doesn't touch them. A second, wider gold "background plate" (::after, z-index:-2, a radial-gradient sitting further back than the ring) was added the same day per the owner's "give a background to the picture" ask, then reverted minutes later per direct follow-up: "The halo change that you did is overwhelming... now it looks like one big circle. I don't like it. The gold halo is what I wanted, not the new one that you did." So the plate is gone -- this gold ring alone is the whole VIP photo-halo treatment now. (The rest of that same message -- "the placeholder for the VIP should have a texture background... do not remove the crown" -- is a separate ask about the no-photo placeholder markup itself, handled where that markup is built, not here; see the comment there.) */ .vip-glow.eclipse-halo::before{ background:conic-gradient(from -40deg, transparent 0deg, rgba(212,175,55,.9) 60deg, transparent 140deg, transparent 360deg); } /* Stat strip -- three stacked-number columns with dividers, matching the reference's "Days / Habits / Focus Hrs" block exactly in structure, populated with real Customer 360 data instead. */ /* Hidden by default for every other theme; only Eclipse turns it on. A base (non-themed) rule + a themed override -- not an inline style, so the theme system is what actually controls this, cleanly. */ .eclipse-stat-strip{display:none;} [data-theme="eclipse"] .eclipse-stat-strip{ display:flex;justify-content:space-around;align-items:center; background:var(--surface-2);border:1px solid var(--border);border-radius:14px; padding:14px 8px;margin:14px 0; } [data-theme="eclipse"] .eclipse-stat{text-align:center;flex:1;position:relative;} [data-theme="eclipse"] .eclipse-stat:not(:last-child)::after{ content:"";position:absolute;right:0;top:10%;bottom:10%;width:1px;background:var(--border); } [data-theme="eclipse"] .eclipse-stat-value{font-size:1.3rem;font-weight:800;color:var(--teal-text);line-height:1.1;} [data-theme="eclipse"] .eclipse-stat-label{font-size:.68rem;color:var(--text-secondary);text-transform:uppercase;letter-spacing:.04em;margin-top:2px;} /* Rating pill -- adds the reference's rounded, glowing pill FEEL without touching the badge's actual background/color (those are set inline per rating on purpose -- red/orange/green must stay visually distinct, a core rule of this app; Eclipse shouldn't override meaning for the sake of style). Only supplements: glow ring, tracking, and a soft entrance -- properties the inline style never sets, so nothing fights here. */ /* Rating pill -- adds the reference's rounded, glowing pill FEEL without touching the badge's actual background/color (those are set inline per rating on purpose -- red/orange/green must stay visually distinct, a core rule of this app; no theme should override meaning for the sake of style). Only supplements: glow ring, tracking, and a soft entrance -- properties the inline style never sets, so nothing fights here. Made universal (2026-07-21, re-fixed after a sandbox revert) using --teal-rgb, which is defined for every theme -- the original used --halo-color, which only exists for Eclipse, so this genuinely couldn't have worked anywhere else. */ .eclipse-pill{ letter-spacing:.05em; box-shadow:0 0 0 1px rgba(255,255,255,.08), 0 2px 10px -3px rgba(var(--teal-rgb),.5); animation:eclipse-pill-in .4s cubic-bezier(.22,.61,.36,1) both; } @keyframes eclipse-pill-in{ from{opacity:0;transform:scale(.85);} to{opacity:1;transform:scale(1);} } @media (prefers-reduced-motion: reduce){ .eclipse-pill{animation:none;} } /* Collections ring -- Home screen. Four real segments (overdue / overdue-soon / due-today / upcoming), same shape as the reference's circular progress + colored-dot legend, built with a single conic- gradient (no SVG/canvas needed, no new dependency). */ /* Hidden by default for every other theme -- same reasoning as .eclipse-stat-strip above: without this, the ring card would render as an unstyled, ugly block on Dark/Gold/Neon/Aurora/Glass. 2026-08-10, direct owner requirement: replaced everywhere by the swipeable prism-chart-card below -- this old, non-swipeable ring no longer has a visibility override for any theme, including Eclipse, so it now stays hidden universally via the base rule above. Left in place rather than deleted, in case it's ever needed again, but it renders nowhere now. */ .eclipse-ring-card{display:none;} [data-theme="eclipse"] .eclipse-ring{ position:relative;width:88px;height:88px;border-radius:50%;flex-shrink:0; display:flex;align-items:center;justify-content:center; } [data-theme="eclipse"] .eclipse-ring-inner{ position:absolute;inset:9px;border-radius:50%;background:var(--surface-2); display:flex;flex-direction:column;align-items:center;justify-content:center; } [data-theme="eclipse"] .eclipse-ring-pct{font-size:1.05rem;font-weight:800;color:var(--text-primary);} [data-theme="eclipse"] .eclipse-ring-sub{font-size:.55rem;color:var(--text-secondary);text-transform:uppercase;letter-spacing:.03em;} [data-theme="eclipse"] .eclipse-legend{flex:1;display:flex;flex-direction:column;gap:6px;} [data-theme="eclipse"] .eclipse-legend-row{display:flex;align-items:center;justify-content:space-between;font-size:.78rem;} [data-theme="eclipse"] .eclipse-legend-dot{width:8px;height:8px;border-radius:50%;display:inline-block;margin-right:7px;} /* Cinematic hero -- New Loan screen. Same DNA as .sheet-hero (glass theme) and .dc-hero (Document Center), rebuilt with the reference's bolder, more dramatic gold glow and the halo motif behind a small icon mark instead of a photo. */ .eclipse-loan-hero{display:none;} [data-theme="eclipse"] .eclipse-loan-hero{ position:relative;overflow:hidden;border-radius:18px;padding:22px 20px;margin-bottom:18px; background: radial-gradient(120% 160% at 20% -20%, rgba(var(--halo-color),.22), transparent 60%), linear-gradient(160deg, var(--surface-2), var(--surface)); border:1px solid var(--border); display:flex;align-items:center;gap:16px; } [data-theme="eclipse"] .eclipse-loan-hero-mark{ width:52px;height:52px;border-radius:50%;flex-shrink:0; background:var(--surface);border:1px solid var(--border-strong); display:flex;align-items:center;justify-content:center;font-size:1.4rem; } [data-theme="eclipse"] .eclipse-loan-hero-title{font-size:1.05rem;font-weight:700;color:var(--text-primary);margin-bottom:3px;} [data-theme="eclipse"] .eclipse-loan-hero-sub{font-size:.78rem;color:var(--text-secondary);line-height:1.35;} /* ===== end Eclipse theme ===== */ /* ===== Prism theme components (2026-08-10, direct owner requirement): glass banners, spaced list, visible logo watermark. Scoped entirely to [data-theme="prism"] -- every other theme, Eclipse included, left completely untouched, same isolation pattern as Glass/Eclipse already use for their own component rules. ===== 2026-08-29 follow-up, direct owner request: the customer list's "spaced cards with the page background showing through" look (once Prism-only) is now generalized to EVERY theme -- see the base .loan-list/.loan-row rules further down, which now carry exactly the background:transparent/gap/card-per-row treatment that used to live only here. The two rules below are left in place ONLY because they're genuinely Prism-specific (the app-wide watermark opacity bump, and the glass due-banner/due-row transparency) -- the list-spacing rules that used to sit here were removed as pure duplicates of the new universal base rule, not because Prism lost the look, just because every theme now shares one definition instead of Prism having its own copy. */ :is([data-theme="prism"],[data-theme="prism-light"]) #app-screen::before{ opacity:.24; } :is([data-theme="prism"],[data-theme="prism-light"]) .due-banner{ background:var(--surface); border:1px solid var(--border);box-shadow:0 4px 16px -8px rgba(0,0,0,.18); } :is([data-theme="prism"],[data-theme="prism-light"]) .due-banner-header, :is([data-theme="prism"],[data-theme="prism-light"]) .due-banner-header.overdue{background:transparent;} :is([data-theme="prism"],[data-theme="prism-light"]) .due-row{background:transparent;} /* Swipeable status/risk chart -- universal across every theme (2026-08-10, direct owner requirement, replacing the old Eclipse-only non-swipeable ring above). Uses var(--surface)/ var(--border)/var(--text-*) throughout so it automatically adapts to whichever theme is active, with zero hardcoded per-theme colors needed anywhere in this block. */ #prism-chart-card{display:block;margin-bottom:8px;position:relative;z-index:1;} .prism-ring-track{display:flex;overflow-x:auto;scroll-snap-type:x mandatory;border-radius:16px;-webkit-overflow-scrolling:touch;scrollbar-width:none;} .prism-ring-track::-webkit-scrollbar{display:none;} .prism-ring-page{flex:0 0 100%;scroll-snap-align:start;} .prism-ring-card{ display:flex;align-items:center;gap:16px;background:var(--surface); border:1px solid var(--border);border-radius:16px;padding:15px; box-shadow:0 4px 16px -8px rgba(0,0,0,.18); min-height:112px;box-sizing:border-box; } .prism-ring{position:relative;width:80px;height:80px;border-radius:50%;flex-shrink:0;display:flex;align-items:center;justify-content:center;} :is([data-theme="prism"],[data-theme="prism-light"]) .btn-collect{ background:var(--surface-2);border-color:var(--border-strong); } .prism-ring-inner{ position:absolute;inset:9px;border-radius:50%;background:var(--surface); display:flex;flex-direction:column;align-items:center;justify-content:center; box-shadow:inset 0 0 0 1px var(--border); } .prism-ring-pct{font-size:15px;font-weight:800;color:var(--text-primary);} .prism-ring-sub{font-size:8px;color:var(--text-secondary);text-transform:uppercase;letter-spacing:.03em;} .prism-legend{flex:1;display:flex;flex-direction:column;gap:5px;min-width:0;} .prism-legend-row{display:flex;align-items:center;justify-content:space-between;font-size:11px;} .prism-legend-dot{width:7px;height:7px;border-radius:50%;display:inline-block;margin-right:6px;flex-shrink:0;} .prism-legend-label{color:var(--text-secondary);} .prism-legend-count{font-weight:700;color:var(--text-primary);} .prism-dots{display:flex;justify-content:center;gap:5px;margin-top:8px;} .prism-dot{width:5px;height:5px;border-radius:50%;background:var(--border-strong);transition:width .2s ease,background .2s ease;} .prism-dot.on{background:var(--text-secondary);width:14px;border-radius:3px;} /* ===== Neon theme: glow effects, gradients, sci-fi styling ===== */ :is([data-theme="neon"],[data-theme="aurora"]) body{ background: radial-gradient(ellipse 900px 500px at 15% -5%, rgba(var(--teal-rgb),.05), transparent 60%), radial-gradient(ellipse 700px 500px at 100% 10%, rgba(var(--glow2-rgb),.03), transparent 55%), var(--page); } :is([data-theme="neon"],[data-theme="aurora"]) .summary-strip, :is([data-theme="neon"],[data-theme="aurora"]) .summary-chip, :is([data-theme="neon"],[data-theme="aurora"]) .due-banner, :is([data-theme="neon"],[data-theme="aurora"]) .loan-row, :is([data-theme="neon"],[data-theme="aurora"]) .sheet, :is([data-theme="neon"],[data-theme="aurora"]) .receipt-block, :is([data-theme="neon"],[data-theme="aurora"]) .login-card{ background:linear-gradient(155deg, var(--surface) 0%, var(--surface-2) 130%); border:1px solid rgba(var(--teal-rgb),.10); box-shadow:0 0 0 1px rgba(var(--teal-rgb),.03), 0 8px 24px -8px rgba(0,0,0,.6); } :is([data-theme="neon"],[data-theme="aurora"]) .btn-primary{ background:linear-gradient(135deg, var(--teal) 0%, var(--teal-deep) 100%); box-shadow:0 0 8px rgba(var(--teal-rgb),.3), 0 0 1px rgba(var(--teal-rgb),.5); border:none;text-shadow:0 0 4px rgba(0,0,0,.3); } :is([data-theme="neon"],[data-theme="aurora"]) .btn-primary:active{box-shadow:0 0 4px rgba(var(--teal-rgb),.25);} :is([data-theme="neon"],[data-theme="aurora"]) .summary-chip .value, :is([data-theme="neon"],[data-theme="aurora"]) .num{ text-shadow:0 0 4px rgba(var(--teal-rgb),.4); } :is([data-theme="neon"],[data-theme="aurora"]) .status-dot{ box-shadow:0 0 4px currentColor; } :is([data-theme="neon"],[data-theme="aurora"]) .status-active, :is([data-theme="neon"],[data-theme="aurora"]) .status-current{box-shadow:0 0 4px var(--status-active);} :is([data-theme="neon"],[data-theme="aurora"]) .status-overdue, :is([data-theme="neon"],[data-theme="aurora"]) .status-suspended{box-shadow:0 0 4px var(--status-suspended);} :is([data-theme="neon"],[data-theme="aurora"]) .status-grace, :is([data-theme="neon"],[data-theme="aurora"]) .status-pending_review{box-shadow:0 0 4px var(--status-pending);} :is([data-theme="neon"],[data-theme="aurora"]) .brand-mark, :is([data-theme="neon"],[data-theme="aurora"]) .login-mark{ box-shadow:0 0 8px rgba(var(--teal-rgb),.3); } :is([data-theme="neon"],[data-theme="aurora"]) .milestone.paid .milestone-marker{ box-shadow:0 0 5px rgba(var(--teal-rgb),.4); } :is([data-theme="neon"],[data-theme="aurora"]) .milestone-end.paid .milestone-end-marker{ box-shadow:0 0 0 2px var(--surface), 0 0 6px rgba(255,184,0,.4); } :is([data-theme="neon"],[data-theme="aurora"]) .fab{ box-shadow:0 0 8px rgba(var(--teal-rgb),.3), 0 4px 16px rgba(0,0,0,.5); } :is([data-theme="neon"],[data-theme="aurora"]) .search-row input:focus, :is([data-theme="neon"],[data-theme="aurora"]) input:focus, :is([data-theme="neon"],[data-theme="aurora"]) select:focus{ box-shadow:0 0 0 2px rgba(var(--teal-rgb),.15); border-color:var(--teal) !important; } :is([data-theme="neon"],[data-theme="aurora"]) .tag-chip{ box-shadow:0 0 3px rgba(var(--teal-rgb),.2); } /* Neon/Aurora .due-banner-header.overdue/.today inset box-shadow accents removed (2026-08-21, same continuous-accent fix -- see the .due-banner:has(...) comment near .due-banner). These painted the glow accent on the header only, so it also stopped at the header on expand; the new container-level border-left (0,3,0) already outranks this theme's own `.due-banner{border:...}` rule (0,2,0), so Neon/Aurora gets the same full-height accent as every other theme with no special-casing needed here. */ /* ===== end neon theme ===== */ /* Login screen background -- made theme-INDEPENDENT (2026-08-21, direct owner requirement, superseding the previous Prism-Light-only contrast fix below in history). Original report: logging out while on Prism Light showed "essentially NO background -- plain white/ blank." First attempt scoped a fix to just [data-theme="prism-light"] (raising .login-card's alpha + the watermark opacity for that theme only) -- direct owner feedback after seeing it live: still not good enough on that theme. Rather than keep chasing per-theme contrast values, the owner asked directly for the login screen to stop following the active theme's --page token at all: one fixed dark backdrop behind the logo/card for every theme, the same way this already looked fine on Dark/Glass/Prism before any of this. Scoped strictly to the logged-out state via body:not(.app-active) -- specificity (0 IDs, 1 attribute-equivalent pseudo-class + 1 element) matches the three existing per-theme body{} rules above (glass, eclipse, neon/aurora) and this rule is the last one in source order, so it wins the cascade tie for login only. The in-app background (body.app-active, and those three theme rules) is completely untouched and stays fully theme-reactive -- this only ever fires before login. .login-card itself keeps its own per-theme background (still var(--glass-bg), still translucent) -- the owner's ask was about the background behind the card, not the card's own theme identity, and every theme's card already reads fine floating on a dark backdrop (that's exactly how Dark/Glass/Prism look today). */ body:not(.app-active){ background: radial-gradient(ellipse 900px 700px at 50% 0%, #1B1F24 0%, transparent 60%), #0A0A0C; /* Lock the login screen in place (2026-08-21, direct owner report: "it moves when I swipe up and down... sideways is ok it doesn't move but up and down it does"). The login screen has nothing that actually needs to scroll -- one centered card -- so any vertical movement is an unwanted mobile artifact, not real scrolling. Root cause: #login-screen below uses min-height:100vh, and mobile Safari/Chrome's 100vh is based on the LARGEST possible viewport (address bar hidden) -- when the address bar is actually showing, the real visible area is shorter than 100vh, so the page has a few extra px of scrollable overflow below the fold. A vertical swipe scrolls into that sliver (collapsing the browser chrome as it goes), which reads exactly as "the login moves." overflow:hidden + overscroll-behavior:none here removes any scroll capability outright, and the html:has() rule just below does the same one level up (iOS rubber-banding can still bounce the outer document even with overflow:hidden on body alone). Scoped to :not(.app-active) only -- the in-app screens (loan lists etc.) need and keep their normal scrolling; this never applies once showApp() adds the .app-active class. */ overflow:hidden; overscroll-behavior:none; } html:has(body:not(.app-active)){ overflow:hidden; overscroll-behavior:none; } html,body{margin:0;padding:0;overflow-x:hidden;max-width:100%;} body{ background:var(--page); color:var(--text-primary); font-family:'Inter',sans-serif; -webkit-font-smoothing:antialiased; min-height:100vh; padding-bottom:env(safe-area-inset-bottom); position:relative; } body::before{ content:""; position:fixed; inset:0; background-image:url('/logo-blue.png'); background-repeat:no-repeat; background-position:center 40%; /* Fixed WIDTH, auto height -- NOT a fixed 280x280 box (2026-08-21, direct owner report: "the gold-bg is stretch not 1:1 like the blue one is"). logo-blue.png is a 1080x1080 perfect square, so a hardcoded 280px 280px box never visibly distorted it -- but logo-gold-full-bg.png (used here once [data-logo-style="gold"] is active, via the override immediately below) is 1024x1536, a 2:3 portrait image, and forcing THAT into a square box squashed it horizontally. auto height lets each image's own native aspect ratio set the second dimension instead of forcing one for both: blue still renders at exactly 280x280 (its own ratio already is 1:1, so auto resolves to 280 anyway -- zero visual change there), gold now renders at 280 wide x its own true proportional height, undistorted. Same fixed-width/auto-height convention already used by body.app-active::before below (min(70vw,380px) auto) -- this just brings the login version in line with it. */ background-size:280px auto; pointer-events:none; z-index:0; } /* Login watermark opacity (2026-08-20, direct owner requirement -- "APPROVED. IMPLEMENT..."): split out into its own explicit selector instead of leaving it as the shared body::before value that body.app-active::before below happens to override via higher specificity. This makes the login-vs-app split visible in the rules themselves, not just implied by cascade order. Raised from the previous .05 (reported as barely visible) to .12 -- clearly visible without competing with the login card's own content. body.app-active::before immediately below is completely unchanged: same selector, same properties, same values as before this edit. */ body:not(.app-active)::before{ opacity:.12; } /* Login watermark gold swap (2026-08-21, direct owner report -- "I need both logos to change": the login screen's big background watermark stayed on the blue asset regardless of the gold/blue toggle). Root cause: body::before's base rule (above) is always logo-blue.png -- unconditional, no swap logic at all -- and the only existing gold override, html[data-logo-style="gold"] body. app-active::before further below, is scoped to .app-active (the in-app watermark) only. The login state (body:not(.app-active)) never had a gold counterpart. Same asset the in-app version already uses (logo-gold-full-bg.png), just scoped to the login state instead. Opacity deliberately left at the existing .12 above, not copying app-active's raised .40 -- that raise was tuned for gold specifically at app-active's larger min(70vw,380px) box size (see the note below), which doesn't apply to the login watermark's smaller fixed 280px box; revisit only if gold reads too dim here once seen live. */ html[data-logo-style="gold"] body:not(.app-active)::before{ background-image:url('/logo-gold-full-bg.png'); } /* Header Logo Style (2026-08-11/12, direct owner requirement): ONE watermark element, not two -- the earlier version used a separate #app-screen::before alongside this one, which rendered simultaneously once logged in (nothing ever hid the login watermark), producing two overlapping backgrounds. Scoped here by .app-active (toggled in showApp()/logout()) instead. Full-screen cover sizing was tried and reverted (2026-08-12) -- reported as too distracting and too blurry, since it stretched the source image well past its native resolution. Back to a constrained, centered box. Gold opacity stays raised (a separate, still-valid request) even though the sizing reverted. 2026-08-19 (direct owner request): watermark was effectively invisible against the dense loan-list cards -- opacity raised .14->.30 / .24->.40 (box size left untouched, per the note above about size increases being reverted as distracting). */ body.app-active::before{ background-position:center; background-size:min(70vw,380px) auto; opacity:.30; } html[data-logo-style="gold"] body.app-active::before{ background-image:url('/logo-gold-full-bg.png'); opacity:.40; } header, main, #login-screen, .sheet{ position:relative; z-index:1; } h1,h2,h3{font-weight:500;margin:0;} .num{font-variant-numeric:tabular-nums;font-feature-settings:"tnum";} button{font-family:inherit;cursor:pointer;} input,select,textarea{font-family:inherit;} /* ---------- Login ---------- */ #login-screen{ min-height:100vh; min-height:100dvh; /* dynamic viewport height -- tracks the actual visible area as mobile browser chrome shows/hides, instead of 100vh's fixed largest-possible-viewport number; part of the scroll-lock fix above. Plain 100vh stays first as a fallback for any browser that doesn't understand dvh -- it's simply ignored, not applied, on those, so nothing regresses there. */ display:flex;align-items:center;justify-content:center; padding:24px; } /* Login card fill (2026-08-21, direct owner requirement, second pass): first pass took this to ~5% opacity ("if 100 was nothing I want it 95"); direct follow-up: "make it instead of 95 make it 100 full transparent." Fill removed entirely -- no color-mix tint, no radial-gradient accent, background:transparent outright. The 1px border (unchanged, still var(--border)) and box-shadow below are now the ONLY thing that reads as the card -- exactly the "can still see the edge-rim" requirement from the first pass, still true here since neither was touched. backdrop-filter left in place (it's already a no-op on every non-Glass theme per the earlier investigation, and with zero fill behind it there's nothing left for it to tint even where it does apply). */ .login-card{ width:100%;max-width:360px; background:transparent; backdrop-filter:blur(var(--glass-blur)) saturate(var(--glass-saturate)); -webkit-backdrop-filter:blur(var(--glass-blur)) saturate(var(--glass-saturate)); border-radius:var(--radius);padding:32px 28px; border:1px solid var(--border); box-shadow:0 4px 20px -4px rgba(0,0,0,.08), 0 1px 3px rgba(0,0,0,.04); } .login-card h1, .login-card .login-sub{text-align:center;} .login-mark{ width:40px;height:40px;border-radius:10px;background:var(--teal); display:flex;align-items:center;justify-content:center;margin:0 auto 16px;overflow:hidden; box-shadow:0 2px 8px -2px rgba(var(--teal-rgb),.5); } .login-mark svg{width:20px;height:20px;} .login-mark img{width:100%;height:100%;object-fit:cover;} .login-card h1{font-size:1.4rem;margin-bottom:4px;} .login-sub{color:var(--text-secondary);font-size:.88rem;margin-bottom:24px;} .field{margin-bottom:16px;} .field label{display:block;font-size:.8rem;font-weight:500;color:var(--text-secondary);margin-bottom:6px;} /* Login card text -- theme-independent, following directly from the card-transparency change above (2026-08-21). Once the card's own fill dropped to ~5% opacity, text sitting directly on that fill (the title, subtitle, field labels) started using each theme's own --text-primary/--text-secondary -- dark, on light themes like Prism Light -- against what's now a dark backdrop showing straight through. Result: near-invisible title text on light themes. Scoped to .login-card specifically, NOT a global var(--text-primary) change, so nothing outside the login screen is touched -- the .field input boxes are already unaffected by any of this (they keep their own opaque var(--surface) fill and var(--text-primary), so they stay exactly as readable as before, theme by theme; this only covers the card's passive text sitting straight on the fill). */ .login-card h1{color:#F2F3F5;} .login-card .login-sub, .login-card .field label{color:#9BA3AE;} .field input{ width:100%;padding:11px 13px;border:1px solid var(--border);border-radius:9px; font-size:1rem;background:var(--surface);color:var(--text-primary); } /* Raised/embossed field shadow, now app-wide (2026-08-29, direct owner request: "add some shadow to all those boxes so they look a lil 3d and nice... around every form field"). This exact 5-layer recipe already existed, but scoped ONLY to #loan-sheet -- a 2026-08-21 owner request had explicitly limited it to New Loan ("strictly a visual CSS/UI refinement of the NEW LOAN form", so as not to silently redesign every field in the app without being asked). The owner has now explicitly asked for it everywhere, so it moved from the #loan-sheet-scoped rule (removed below, see that comment) to this base .field input/.field select rule -- same values, same look, just no longer fenced to one sheet. Kept as box-shadow only, zero change to border/background/padding, for the same reason as before: several selects across the app (Payment method, etc.) set border/background/padding via their own inline style="...", and inline always wins over a class for those properties -- but nothing sets box-shadow inline anywhere, so this reaches every input AND select in the app uniformly with zero markup edits. */ .field input, .field select{ box-shadow: inset 0 1px 0 rgba(255,255,255,.6), inset 0 -1px 0 rgba(0,0,0,.05), 0 -1px 0 rgba(255,255,255,.45), 0 2px 5px -1px rgba(0,0,0,.10), 0 1px 2px rgba(0,0,0,.05); } .field input:focus, .field select:focus{ outline:none;border-color:var(--teal); box-shadow: inset 0 1px 0 rgba(255,255,255,.6), inset 0 -1px 0 rgba(0,0,0,.05), 0 -1px 0 rgba(255,255,255,.45), 0 2px 5px -1px rgba(0,0,0,.10), 0 1px 2px rgba(0,0,0,.05), 0 0 0 3px var(--teal-bg); } /* Native