(the page body) is hidden during loading — the sidebar/topbar stay in place so the navigation never feels blank. A semi-transparent backdrop with the PropSpot logo gently pulses in the center. */ /* Premium look: solid background that matches the page exactly (no jarring overlay or blur), a generously-sized PropSpot logo with a soft brand-green halo ring that gently pulses behind it, and a subtle wordmark beneath. */ html.page-loading main { opacity: 0 !important; } main { opacity: 1; transition: opacity 0.18s ease-in; } .os-page-loader { position: fixed; inset: 0; background: #ffffff; /* logo PNG is now transparent — any bg works */ z-index: 99999; display: flex; align-items: center; justify-content: center; opacity: 0; visibility: hidden; pointer-events: none; transition: opacity 0s 0.18s, visibility 0s 0.18s linear; } html.page-loading .os-page-loader, .os-page-loader.show { opacity: 1; visibility: visible; pointer-events: all; transition: opacity 0.1s ease-out; } /* Centered stack: artwork + wordmark + loading bar. Small gap between artwork and wordmark; larger margin on the bar so it doesn't crowd the wordmark. */ .os-page-loader-stack { display: flex; flex-direction: column; align-items: center; gap: 10px; } .os-page-loader-stack .os-page-loader-bar { margin-top: 24px; } /* Horizontal lockup matching the topbar: dog+house icon + wordmark text. */ .os-page-loader-brand { display: flex; flex-direction: column; align-items: center; gap: 12px; } .os-page-loader-logo { width: 102px; height: 64px; /* dog+house icon only, aspect ≈ 1.6:1 */ background-image: url('/logo-icon.png?v=8'); background-size: contain; background-repeat: no-repeat; background-position: center; } /* "propspot" wordmark, system-sans (no asset cropping risk). Only "spot" gets the brand accent — "prop" uses the base color, like the topbar. */ .os-page-loader-wordmark { font-size: 2.1rem; font-weight: 900; letter-spacing: -.04em; color: #1a1f2e; line-height: 1; font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif; } .os-page-loader-wordmark .ws-accent { color: #61B746; } /* Loading bar — only animated element */ .os-page-loader-bar { width: 200px; height: 3px; border-radius: 2px; background: rgba(97,183,70,0.12); overflow: hidden; position: relative; } .os-page-loader-bar-fill { position: absolute; top: 0; bottom: 0; width: 45%; border-radius: 2px; background: linear-gradient(90deg, rgba(97,183,70,0) 0%, rgba(97,183,70,0.5) 30%, #61B746 50%, rgba(97,183,70,0.5) 70%, rgba(97,183,70,0) 100%); animation: os-loader-bar-slide 1.4s cubic-bezier(0.4, 0, 0.2, 1) infinite; } @keyframes os-loader-bar-slide { 0% { left: -50%; } 100% { left: 105%; } } /* Dark-mode overrides — must live here (not dark.css) to avoid flash */ html.theme-dark .os-page-loader { background: #16171a; } html.theme-dark .os-page-loader-logo { /* Outlined icon (halo baked in). Slightly larger box than the light icon to offset the transparent halo padding so the art renders at the same size. */ width: 107px; height: 69px; background-image: url('/logo-icon-dark.png?v=10'); } html.theme-dark .os-page-loader-wordmark { color: #d4d4d4; } html.theme-dark .os-page-loader-wordmark .ws-accent { color: #5ab040; } html.theme-dark .os-page-loader-bar { background: rgba(255,255,255,0.07); } html.theme-dark .os-page-loader-bar-fill { background: linear-gradient(90deg, rgba(90,176,64,0) 0%, rgba(90,176,64,0.5) 30%, #5ab040 50%, rgba(90,176,64,0.5) 70%, rgba(90,176,64,0) 100%); } /* Brand wordmark swap: the light logo's black "propspot"/".io" text blends into dark surfaces, so in dark mode swap to the white-outlined sticker variant (same treatment as the loader mark above). content: on an replaces the rendered source in WebKit/Blink, which is what this app targets. */ html.theme-dark .apps-rail-brand img, html.theme-dark .login-logo-img { content: url('/logo-dark.png?v=10'); } @media (prefers-reduced-motion: reduce) { .os-page-loader-bar-fill { animation: none; width: 100%; opacity: 0.5; } main { transition: none; } } :root { --brand: #61B746; /* company green */ --brand-dark: #4f9e38; --brand-light: #edf7e9; --brand-deep: #22402c; /* v2: deep green for signature/dark cards */ --surface: #ffffff; --surface-tint: #f6faf4; /* v2: subtle tinted inner fills, tracks */ --bg: #eef3ef; /* solid fallback; body uses the gradient below */ --text: #16241c; /* v2: green-tinted near-black */ --text-muted: #5e6f64; /* v2: muted green-gray */ --text-faint: #9aa79f; /* v2: tertiary / hints */ --border: #e5e7eb; /* inputs/tables keep a visible edge */ --hairline: rgba(28,54,38,.07); /* v2: barely-there card separators */ --danger: #e5564b; --success: #54b864; --warn: #e8a33d; /* geometric radius scale — hairline 2px, no pills */ --radius: 2px; --radius-card: 2px; --radius-sm: 2px; --radius-pill: 2px; /* v2 soft, green-tinted elevation */ --shadow: 0 1px 2px rgba(16,24,40,.04), 0 16px 40px -22px rgba(40,72,48,.30); --shadow-soft: 0 10px 30px -18px rgba(40,72,48,.28); --shadow-hover: 0 2px 6px rgba(16,24,40,.06), 0 26px 56px -22px rgba(40,72,48,.40); --nav-height: 64px; --header-height:56px; } *, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; } html { font-size: 16px; -webkit-text-size-adjust: 100%; } body { font-family: system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif; background: #f2f3f5; color: var(--text); min-height: 100dvh; padding-bottom: var(--nav-height); -webkit-font-smoothing: antialiased; } /* Dark theme keeps a deep, tinted version of the same gradient */ html.theme-dark body { background: radial-gradient(900px 520px at 12% -8%, rgba(34,85,48,.45), transparent 60%), radial-gradient(820px 600px at 110% 6%, rgba(63,35,100,.40), transparent 55%), linear-gradient(168deg, #11201a 0%, #0f1a16 40%, #0d1714 100%); background-attachment: fixed; } /* ── Top Header ──────────────────────────────────────────── */ .app-header { position: sticky; top: 0; z-index: 100; background: var(--brand); color: #fff; height: var(--header-height); display: flex; align-items: center; padding: 0 16px; gap: 12px; box-shadow: 0 2px 8px rgba(0,0,0,.15); } .app-header .logo { font-size: 1.25rem; font-weight: 800; letter-spacing: -.5px; color: #fff; text-decoration: none; display: inline-flex; align-items: center; gap: 8px; } .app-header .logo-img { height: 36px; width: 36px; object-fit: contain; } .app-header .header-title { font-size: 1rem; font-weight: 600; flex: 1; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .app-header .back-btn { background: none; border: none; color: #fff; font-size: 1.5rem; cursor: pointer; padding: 4px 8px 4px 0; line-height: 1; } .app-header .header-actions { display: flex; gap: 8px; margin-left: auto; } .icon-btn { background: rgba(255,255,255,.2); border: none; border-radius: 2px; color: #fff; width: 36px; height: 36px; display: flex; align-items: center; justify-content: center; font-size: 1.1rem; cursor: pointer; text-decoration: none; transition: background .15s; } .icon-btn:hover { background: rgba(255,255,255,.3); } /* ── Bottom Nav ──────────────────────────────────────────── */ .bottom-nav { position: fixed; bottom: 0; left: 0; right: 0; height: var(--nav-height); background: var(--surface); border-top: 1px solid var(--border); display: flex; z-index: 100; box-shadow: 0 -2px 12px rgba(0,0,0,.07); } .nav-link { flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 3px; color: var(--text-muted); text-decoration: none; font-size: .65rem; font-weight: 500; transition: color .15s; } .nav-link .nav-icon { font-size: 1.4rem; line-height: 1; } .nav-link.active { color: var(--brand); } .nav-link:hover { color: var(--brand); } /* These elements live in the sidebar on desktop, hidden on mobile */ .nav-brand { display: none; } .nav-spacer { display: none; } .nav-signout { display: none; } .nav-collapse-btn { display: none; } /* ── Desktop Sidebar (≥900px) ────────────────────────────── */ @media (min-width: 900px) { :root { --sidebar-width: 220px; --nav-height: 0px; } body { padding-bottom: 0; padding-left: var(--sidebar-width); transition: padding-left .22s ease; } .bottom-nav { position: fixed; top: 0; left: 0; bottom: 0; right: auto; width: var(--sidebar-width); height: 100dvh; flex-direction: column; align-items: stretch; justify-content: flex-start; border-top: none; border-right: 1px solid var(--border); box-shadow: none; padding: 0; gap: 2px; overflow-y: auto; overflow-x: hidden; background: var(--surface); transition: width .22s ease; } .nav-brand { display: flex; align-items: center; gap: 8px; font-size: 1.2rem; font-weight: 900; color: var(--brand); letter-spacing: -.5px; padding: 20px 20px 16px; border-bottom: 1px solid var(--border); margin-bottom: 8px; text-decoration: none; flex-shrink: 0; white-space: nowrap; overflow: hidden; } .nav-brand .nav-label { transition: opacity .15s ease; } .nav-spacer { display: block; flex: 1; } .nav-signout { display: flex; align-items: center; gap: 12px; padding: 11px 14px; margin: 0 8px 8px; width: calc(100% - 16px); font-size: .88rem; font-weight: 500; color: var(--text-muted); background: none; border: none; border-radius: 2px; cursor: pointer; text-align: left; flex-shrink: 0; white-space: nowrap; overflow: hidden; } .nav-signout:hover { background: #fee2e2; color: var(--danger); } .nav-link { flex: none; flex-direction: row; justify-content: flex-start; gap: 12px; padding: 11px 14px; font-size: .88rem; font-weight: 500; border-radius: 2px; margin: 0 8px; width: calc(100% - 16px); white-space: nowrap; overflow: hidden; } .nav-link .nav-icon { font-size: 1.15rem; flex-shrink: 0; } .nav-link.active, .nav-link:hover { background: var(--brand-light); color: var(--brand); } .nav-collapse-btn { position: fixed; top: 22px; left: calc(var(--sidebar-width) - 12px); width: 24px; height: 24px; border-radius: 50%; background: var(--surface); border: 1.5px solid var(--border); color: var(--text-muted); font-size: .75rem; cursor: pointer; display: flex; align-items: center; justify-content: center; z-index: 200; box-shadow: 0 2px 6px rgba(0,0,0,.12); transition: left .22s ease, background .15s, color .15s, border-color .15s; line-height: 1; } .nav-collapse-btn:hover { background: var(--brand); color: #fff; border-color: var(--brand); } html.sidebar-collapsed { --sidebar-width: 64px; } /* Hide every label-bearing span (and any bare text inside nav rows) when the sidebar is collapsed. Icons remain visible. */ html.sidebar-collapsed .nav-label, html.sidebar-collapsed .nav-brand .nav-label, html.sidebar-collapsed .nav-link .nav-label, html.sidebar-collapsed .nav-signout .nav-label { display: none; } html.sidebar-collapsed .nav-link, html.sidebar-collapsed .nav-signout { font-size: 0; } html.sidebar-collapsed .nav-brand { justify-content: center; padding: 20px 0 16px; gap: 0; } html.sidebar-collapsed .nav-link { justify-content: center; padding: 12px 0; width: calc(100% - 8px); margin: 0 4px; gap: 0; } html.sidebar-collapsed .nav-link .nav-icon { font-size: 1.3rem; } html.sidebar-collapsed .nav-signout { justify-content: center; padding: 12px 0; width: calc(100% - 8px); margin: 0 4px 8px; gap: 0; } html.sidebar-collapsed .nav-signout .nav-icon { font-size: 1.15rem; } /* Hide logo from top header — it's in the sidebar now */ .app-header .logo { display: none; } .header-signout { display: none; } .page { max-width: 1100px; } } /* ============================================================ New OS layout: top header + slim left apps rail Opt-in via ============================================================ */ body.os-newlayout { padding-top: var(--top-header-height, 56px); padding-left: var(--apps-rail-width, 64px); padding-bottom: 0; background: var(--bg); /* Hard stop against horizontal overflow on phones. chrome.css adds this too, but it loads asynchronously — declaring it here (in the synchronous stylesheet) prevents a wide child from widening the mobile layout viewport on first paint, which otherwise breaks every max-width media query for the rest of the session. */ overflow-x: hidden; } body.os-newlayout .app-header { display: none; } /* hide old mobile header */ body.os-newlayout .bottom-nav { display: none; } /* hide old left sidebar */ body.os-newlayout .nav-collapse-btn { display: none; } /* Fluid by default: fills the viewport so wide monitors don't waste the right-hand third on dead space. Padding scales slightly with width via clamp(). A page can opt INTO a constrained reading width by adding the .page-narrow class on its main element. */ body.os-newlayout .page { max-width: var(--page-max-width, none); padding: clamp(20px, 2vw, 32px); } body.os-newlayout .page.page-narrow { max-width: 1100px; margin-left: auto; margin-right: auto; } /* ── Top header ────────────────────────────────────────────── */ .top-header { position: fixed; top: 0; left: var(--apps-rail-width, 64px); right: 0; height: var(--top-header-height, 56px); z-index: 90; background: var(--surface); border-bottom: 1px solid var(--border); display: flex; align-items: center; gap: 12px; padding: 0 16px 0 20px; } .top-nav-links { display: flex; gap: 2px; align-items: center; flex-wrap: nowrap; } .top-nav-link { padding: 8px 14px; border-radius: 2px; text-decoration: none; color: var(--text-muted); font-weight: 600; font-size: .92rem; white-space: nowrap; transition: color .12s, background .12s; } .top-nav-link:hover { background: var(--brand-light); color: var(--brand-dark); } .top-nav-link.active { color: var(--brand-dark); background: var(--brand-light); } .top-nav-search { position: relative; flex: 1; max-width: 380px; display: flex; align-items: center; background: var(--bg); border: 1px solid var(--border); border-radius: 2px; padding: 6px 10px; margin-left: auto; } .top-nav-search input { flex: 1; border: none; background: transparent; outline: none; font-size: .88rem; color: var(--text); min-width: 0; } .top-nav-search .search-icon { color: var(--text-muted); margin-right: 6px; flex-shrink: 0; } /* Live search dropdown */ .search-results { position: absolute; top: calc(100% + 6px); left: 0; right: 0; background: var(--surface); border: 1px solid var(--border); border-radius: 2px; box-shadow: 0 6px 24px rgba(0,0,0,.14); max-height: 460px; overflow-y: auto; z-index: 250; display: none; padding: 4px 0; } .search-results.open { display: block; } .search-section { padding: 4px 0; } .search-section + .search-section { border-top: 1px solid var(--border); } .search-section-header { font-size: .68rem; font-weight: 700; text-transform: uppercase; letter-spacing: .04em; color: var(--text-muted); padding: 8px 14px 4px; } .search-result { display: flex; align-items: center; gap: 10px; padding: 8px 14px; cursor: pointer; text-decoration: none; color: var(--text); font-size: .88rem; } .search-result:hover { background: var(--brand-light); } .search-result-icon { font-size: 1.1rem; flex-shrink: 0; width: 22px; text-align: center; } .search-result-body { flex: 1; min-width: 0; } .search-result-title { font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .search-result-subtitle { font-size: .72rem; color: var(--text-muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .search-empty { padding: 14px; font-size: .82rem; color: var(--text-muted); text-align: center; } .search-loading { padding: 14px; font-size: .82rem; color: var(--text-muted); text-align: center; } .top-nav-icons { display: flex; gap: 2px; align-items: center; flex-shrink: 0; } .top-nav-icon-btn { background: none; border: none; cursor: pointer; width: 38px; height: 38px; border-radius: 2px; display: flex; align-items: center; justify-content: center; font-size: 1.15rem; text-decoration: none; color: var(--text-muted); position: relative; } .top-nav-icon-btn:hover { background: var(--brand-light); color: var(--brand-dark); } .top-nav-icon-btn.active { background: var(--brand-light); color: var(--brand-dark); } .top-nav-avatar { width: 36px; height: 36px; border-radius: 50%; background: var(--brand); color: #fff; display: flex; align-items: center; justify-content: center; font-weight: 700; font-size: .82rem; cursor: pointer; border: none; overflow: hidden; padding: 0; } /* Profile picture rendered inside an avatar circle. The three size variants (default / --big / --xl) match the contexts where avatars render: topbar circle, user-menu header, edit-profile modal. */ .avatar-img { display: block; width: 100%; height: 100%; object-fit: cover; border-radius: 50%; } .user-avatar-big { width: 44px; height: 44px; border-radius: 50%; background: var(--brand); color: #fff; display: flex; align-items: center; justify-content: center; font-weight: 700; font-size: 1rem; flex-shrink: 0; overflow: hidden; } /* ── User dropdown menu ──────────────────────────────────── */ .user-menu { position: fixed; top: calc(var(--top-header-height, 56px) + 4px); right: 12px; min-width: 220px; background: var(--surface); border: 1px solid var(--border); border-radius: 2px; padding: 6px; box-shadow: 0 6px 24px rgba(0,0,0,.12); z-index: 200; display: none; } .user-menu.open { display: block; } .user-menu .user-info { padding: 10px 12px; border-bottom: 1px solid var(--border); margin-bottom: 4px; } .user-menu .user-name { font-weight: 700; font-size: .88rem; } .user-menu .user-email { font-size: .72rem; color: var(--text-muted); margin-top: 2px; word-break: break-all; } .user-menu a, .user-menu button { display: flex; align-items: center; gap: 8px; width: 100%; padding: 9px 12px; border-radius: 2px; font-size: .88rem; text-align: left; background: none; border: none; cursor: pointer; text-decoration: none; color: var(--text); } .user-menu a:hover, .user-menu button:hover { background: var(--brand-light); color: var(--brand-dark); } .user-menu .menu-divider { height: 1px; background: var(--border); margin: 4px 0; } .user-menu button.danger:hover { background: #fee2e2; color: var(--danger); } /* Quick-access rows at the top of the avatar dropdown (Create new / Notifications) — two-line cards with sub-label */ .user-menu .um-quick { align-items: center; padding: 9px 12px; border-radius: 2px; font-weight: 600; position: relative; } .user-menu .um-quick .user-menu-icon { width: 28px; height: 28px; border-radius: 2px; display: inline-flex; align-items: center; justify-content: center; background: rgba(97,183,70,0.10); color: var(--brand-dark, #15803d); font-size: 14px; flex-shrink: 0; } .user-menu .um-quick:hover .user-menu-icon { background: var(--brand); color: #fff; } .user-menu .um-quick .um-row-sub { display: block; font-size: .68rem; font-weight: 500; color: var(--text-muted); margin-top: 1px; letter-spacing: 0.01em; text-transform: none; } .user-menu .um-quick:hover .um-row-sub { color: var(--brand-dark, #15803d); opacity: 0.85; } .user-menu .um-notif-count { margin-left: auto; background: #ef4444; color: #fff; font-size: 10px; font-weight: 800; padding: 2px 8px; border-radius: 2px; font-variant-numeric: tabular-nums; box-shadow: 0 0 0 3px rgba(239,68,68,0.14); } /* ── Slim left apps rail ─────────────────────────────────── */ .apps-rail { position: fixed; top: 0; left: 0; bottom: 0; width: var(--apps-rail-width, 64px); z-index: 100; background: var(--surface); border-right: 1px solid var(--border); display: flex; flex-direction: column; align-items: center; padding: 10px 0 14px; gap: 6px; } .apps-rail-brand { width: 44px; height: 44px; border-radius: 2px; display: flex; align-items: center; justify-content: center; background: var(--brand); color: #fff; text-decoration: none; margin-bottom: 6px; font-size: 1.2rem; font-weight: 800; border: none; cursor: pointer; overflow: hidden; } .apps-rail-brand img { width: 28px; height: 28px; object-fit: contain; } .apps-rail-link { width: 44px; height: 44px; border-radius: 2px; display: flex; align-items: center; justify-content: center; background: transparent; color: var(--text); text-decoration: none; font-size: 1.5rem; transition: background .12s, transform .1s; position: relative; } .apps-rail-link:hover { background: var(--brand-light); transform: translateY(-1px); } .apps-rail-link.active { background: var(--brand-light); } .apps-rail-link::after { content: attr(data-label); position: absolute; left: 52px; top: 50%; transform: translateY(-50%); background: var(--text); color: #fff; padding: 4px 10px; border-radius: 2px; font-size: .74rem; font-weight: 600; white-space: nowrap; opacity: 0; pointer-events: none; transition: opacity .12s; z-index: 250; } .apps-rail-link:hover::after { opacity: 1; } .apps-rail-spacer { flex: 1; } /* Sign-out button in the rail — strip default