/* ============================================================================================ STYLES PORTAL — GLOBAL CHROME OVERHAUL (Style lane · JOB 2) -------------------------------------------------------------------------------------------- Visual elevation of the chrome the Style lane owns: app shell + top-nav LOOK, letterhead, login + resident-portal entry, global search box, dashboard/landing, footer. RENDER-ONLY, token-driven (so it is dark-safe via design-system.css), additive over existing classes — no markup, no structure, no route changes (Shell owns nav structure/routing). Loads AFTER design-system.css so chrome refinements win. Pairs with: design-system.css (tokens, components, motion keyframes ds-reveal/ds-spin). Owner: Style Agent · injected once in server.py page() after the design-system link. ============================================================================================ */ /* ── SHELL / TOP NAV ──────────────────────────────────────────────────────────────────────── Warmer depth on the dark bar + a crisp gold hairline + refined menu flyouts. */ .shell { box-shadow:0 1px 0 rgba(0,0,0,.18); } /* Header row fixes: the ".search-scope" caption ("Showing only what your role and properties can see.") was emitted in the nav row, adding ~210px → the row overflowed and .shell-nav painted over the brand lockup. Hide that caption in the global bar (it belongs on /search results, not the nav), and harden the row so nav can never overlap the brand. On phones, hide the bar search (it clipped the SEARCH button and pushed the menu off-screen) — search stays reachable via the menu / Ctrl-K. */ .shell .search-scope { display:none; } .shell-brand--logo { flex:0 0 auto; } .shell-nav { min-width:0; } @media (max-width:900px){ .shell-search { display:none; } } .shell-brand--logo { transition:opacity var(--dur-fast) var(--ease-standard); } .shell-brand--logo:hover { opacity:.84; } /* active nav item: gold underline gets a touch more presence */ .shell-nav a.is-active, .shell-nav .nav-group.is-active > .nav-group-label { text-shadow:0 0 18px rgba(227,191,124,.32); } /* flyout menus: gold top accent + smoother elevation */ .shell-nav .nav-group-menu { border-top:2px solid var(--gold-deep); box-shadow:0 22px 50px -12px rgba(0,0,0,.55); background:linear-gradient(180deg, color-mix(in srgb, var(--shell) 92%, #2a261d), var(--shell)); } /* global search: gold focus glow that matches the system focus ring */ .shell-search input[type="search"]:focus { box-shadow:0 0 0 3px rgba(227,191,124,.20); } .account-tools { border-left-color:color-mix(in srgb, var(--gold-soft) 22%, transparent); } /* ── LETTERHEAD (public header) ─────────────────────────────────────────────────────────────*/ .letterhead { background:linear-gradient(180deg, color-mix(in srgb, var(--brand-primary) 92%, #2a261d), var(--brand-primary)); box-shadow:0 8px 26px -20px rgba(0,0,0,.7); } .letterhead-help { transition:background var(--dur-fast) var(--ease-standard), border-color var(--dur-fast) var(--ease-standard); } .letterhead-help:hover { background:rgba(255,255,255,.10); border-color:rgba(255,255,255,.6); } /* ── LOGIN STAGE — atmosphere + motion ────────────────────────────────────────────────────── Layered gold glow + grid + vignette over the existing cream gradient; staggered entrance on the hero copy and proof tiles. All guarded by prefers-reduced-motion (design-system §3). */ .login-stage { background: radial-gradient(120% 80% at 88% -10%, rgba(181,138,62,.16), transparent 60%), linear-gradient(90deg, rgba(217,207,184,.34) 0 1px, transparent 1px) 0 0 / 72px 72px, linear-gradient(180deg, var(--brand-paper), var(--paper-deep)); } .login-welcome { background: radial-gradient(140% 120% at 100% 0%, rgba(181,138,62,.20), transparent 55%), var(--brand-primary); box-shadow:0 30px 70px -28px rgba(26,24,20,.5); } .login-welcome::after { box-shadow:0 0 0 42px rgba(255,255,255,.045), 0 0 0 92px rgba(181,138,62,.12); } .login-copy { animation:ds-reveal var(--dur-slow) var(--ease-out) both; } .login-proof-item { animation:ds-reveal var(--dur-slow) var(--ease-out) both; transition:transform var(--dur-fast) var(--ease-standard), border-color var(--dur-fast) var(--ease-standard); } .login-proof-item:nth-child(1) { animation-delay:.10s; } .login-proof-item:nth-child(2) { animation-delay:.18s; } .login-proof-item:nth-child(3) { animation-delay:.26s; } .login-proof-item:hover { transform:translateY(-2px); border-color:rgba(227,191,124,.42); } .login-card { box-shadow:0 30px 70px -28px rgba(26,24,20,.4); border-top:2px solid color-mix(in srgb, var(--brand-accent) 50%, transparent); } .login-submit { transition:filter var(--dur-fast) var(--ease-standard), box-shadow var(--dur-fast) var(--ease-standard); } .login-submit:hover { box-shadow:0 10px 24px -10px rgba(181,138,62,.6); } .login-support-card { transition:transform var(--dur-fast) var(--ease-standard), border-color var(--dur-fast) var(--ease-standard); } .login-support-card:hover { transform:translateY(-2px); border-color:var(--gold-deep); } /* ── RESIDENT PORTAL ENTRY ──────────────────────────────────────────────────────────────────*/ .rp-hero { box-shadow:var(--shadow-2); } .rp-hero-meta-block { background:linear-gradient(180deg, var(--paper-deep), color-mix(in srgb, var(--paper-deep) 80%, var(--paper))); } .rp-hero-actions .btn { transition:filter var(--dur-fast) var(--ease-standard), box-shadow var(--dur-fast) var(--ease-standard); } .rp-hero-actions .btn--gold:hover { box-shadow:0 10px 24px -10px rgba(181,138,62,.55); } .rp-trust-strip span { transition:border-color var(--dur-fast) var(--ease-standard), background var(--dur-fast) var(--ease-standard); } .rp-trust-strip span:hover { border-color:var(--gold-soft); } .rp-subnav { box-shadow:0 1px 0 rgba(26,24,20,.05), 0 6px 14px -14px rgba(26,24,20,.5); } .rp-panel { transition:box-shadow var(--dur-base) var(--ease-standard); } /* ── DASHBOARD / LANDING ──────────────────────────────────────────────────────────────────── A single, gentle page-enter (no markup needed) + warmer KPI + lane affordances. */ body.admin-page main { animation:ds-reveal var(--dur-slow) var(--ease-out); } .kpi { position:relative; overflow:hidden; } .kpi::before { content:""; position:absolute; left:0; top:0; bottom:0; width:3px; background:var(--gold-deep); transform:scaleY(0); transform-origin:top; transition:transform var(--dur-base) var(--ease-out); } .kpi:hover::before { transform:scaleY(1); } .today-row-action .btn, .lane-row a .btn { transition:filter var(--dur-fast) var(--ease-standard); } .crm-stage-card, .crm-workspace-link, .summary-tile, .pay { transition:transform var(--dur-fast) var(--ease-standard), border-color var(--dur-fast) var(--ease-standard), box-shadow var(--dur-fast) var(--ease-standard); } .crm-stage-card:hover, .summary-tile:hover { border-color:var(--gold-deep); box-shadow:var(--shadow-2); } /* ── SECTION HEADS — quiet gold tick before the eyebrow ─────────────────────────────────────*/ .section-title::before { content:""; display:inline-block; width:14px; height:2px; margin-right:9px; vertical-align:middle; background:var(--gold-deep); opacity:.7; } /* ── GLOBAL FOOTER (CSS ready — markup wiring is an orchestrator one-liner, see handoff) ───── No global footer exists today. This styles an