/* ============================================================ DOORSTEP — Design System v1 Drop-in stylesheet for Flask/Jinja templates. Place at: app/static/css/doorstep.css Load before any page-specific CSS, after resetting Bootstrap. ============================================================ */ /* ---------- 1. Tokens ---------- */ :root { /* Brand */ --ds-blue: #0008D4; --ds-blue-tint: #E8E9F9; --ds-heritage: #5B3608; --ds-heritage-tint: #F3EDE3; /* Ink scale (text) */ --ds-ink: #0A0C14; --ds-ink-2: #25272E; --ds-ink-3: #4A4D57; --ds-ink-4: #7E818A; --ds-ink-5: #A8ABB2; /* Lines + surfaces */ --ds-line: #E1E3E4; --ds-line-2: #EAECED; --ds-surf: #FFFFFF; --ds-surf-2: #F8F9FA; --ds-surf-3: #F3F4F5; /* Semantic */ --ds-good: #1D7A3A; --ds-good-tint: #E3F2E8; --ds-warn: #8A5A00; --ds-warn-tint: #F6ECD6; --ds-bad: #A61B1B; --ds-bad-tint: #F6E0E0; /* Radii + shadows */ --ds-radius: 14px; --ds-radius-sm: 10px; --ds-radius-xs: 6px; --ds-shadow: 0 1px 0 rgba(10, 12, 20, .03), 0 10px 32px rgba(10, 12, 20, .04); --ds-shadow-float: 0 1px 0 rgba(10, 12, 20, .03), 0 18px 44px rgba(10, 12, 20, .10); /* Type */ --ds-font-display: 'Space Grotesk', system-ui, sans-serif; --ds-font-body: 'Manrope', system-ui, sans-serif; --ds-font-mono: 'JetBrains Mono', ui-monospace, monospace; /* Sidebar brand logo — tweak these to reposition/resize the logo + tag. */ --ds-logo-width: 270px; /* logo image width */ --ds-logo-pad-left: 4px; /* nudge the logo right (positive) or left */ --ds-logo-pad-top: 6px; /* space above the logo */ --ds-logo-pad-bottom: 24px; /* space below the brand block (before the nav) */ --ds-logo-color: var(--ds-heritage); /* any CSS color — tints the logo SVG shape */ /* Agency tag ("AGENCY · FOO REALTY") below the logo — or hide it entirely. */ --ds-logo-tag-display: block; /* 'none' hides the tag; 'block' shows it */ --ds-logo-tag-align: center; /* left | center | right */ --ds-logo-tag-gap: 10px; /* vertical gap between logo and tag */ --ds-logo-tag-offset-x: 0px; /* horizontal nudge of the tag */ /* Login-page logo knobs — tweak size, color, and spacing for /auth/login. */ --ds-login-logo-width: 180px; /* width of the logo mark */ --ds-login-logo-color: var(--ds-ink); /* tint (use --ds-heritage for gold) */ --ds-login-logo-gap: 20px; /* space below the logo */ --ds-login-logo-align: center; /* left | center | right */ } /* Login-page logo mask. Reuses the logo.png shape as a mask so tinting via --ds-login-logo-color works in both light and dark themes. */ .ds-login-logo { display: block; width: var(--ds-login-logo-width); aspect-ratio: 1695 / 445; background-color: var(--ds-login-logo-color); -webkit-mask: url("../img/logo.png") no-repeat center / contain; mask: url("../img/logo.png") no-repeat center / contain; margin-left: auto; margin-right: auto; } .ds-login-logo-wrap { text-align: var(--ds-login-logo-align); margin-bottom: var(--ds-login-logo-gap); } /* ---------- 1b. Dark theme ---------- */ /* Applied when . Inline script in base.html head sets this before paint so there's no flash. */ :root[data-theme="dark"] { /* Brand — brighter on dark bg for contrast */ --ds-blue: #7F95FF; --ds-blue-tint: rgba(127, 149, 255, 0.16); --ds-heritage: #D39A5B; --ds-heritage-tint: rgba(211, 154, 91, 0.14); /* Ink scale — inverted (light on dark) */ --ds-ink: #E8EAEE; --ds-ink-2: #C4C7CE; --ds-ink-3: #9699A1; --ds-ink-4: #6E7078; --ds-ink-5: #4C4E55; /* Lines + surfaces — surf is elevated (cards), surf-2 is app bg (deepest), surf-3 is hover/chip (most elevated) */ --ds-line: #2A2D33; --ds-line-2: #22252B; --ds-surf: #15171B; --ds-surf-2: #0B0D10; --ds-surf-3: #1F2128; /* Semantic — brighter + translucent tints for dark */ --ds-good: #4ADE80; --ds-good-tint: rgba(74, 222, 128, 0.14); --ds-warn: #FBBF24; --ds-warn-tint: rgba(251, 191, 36, 0.14); --ds-bad: #F87171; --ds-bad-tint: rgba(248, 113, 113, 0.14); /* Shadows — subtle on dark (cards rely on surface contrast, not shadow) */ --ds-shadow: 0 1px 0 rgba(0, 0, 0, 0.4), 0 8px 24px rgba(0, 0, 0, 0.25); --ds-shadow-float: 0 1px 0 rgba(0, 0, 0, 0.4), 0 18px 44px rgba(0, 0, 0, 0.45); /* Logo is masked and tinted via --ds-logo-color — pure white on dark bg. */ --ds-logo-color: #ffffff; color-scheme: dark; } /* Remap legacy Material tokens (app.css) to Doorstep surfaces in dark mode, so anything still styled via app.css (body bg, cards, dividers) inherits the dark palette instead of staying white. */ :root[data-theme="dark"] { --surface: var(--ds-surf-2); --surface-container-lowest: var(--ds-surf); --surface-container-low: var(--ds-surf-3); --surface-container: var(--ds-surf-3); --surface-container-high: var(--ds-line); --surface-container-highest: var(--ds-line); --surface-dim: var(--ds-line-2); --primary-fixed: var(--ds-blue-tint); --error-container: var(--ds-bad-tint); /* app.css cascades body color through --on-surface and --on-surface-variant. Without this remap, body text stays near-black in dark mode — causing every heading/table cell/label that inherits body color to vanish. */ --on-surface: var(--ds-ink); --on-surface-variant: var(--ds-ink-3); --outline: var(--ds-line); --outline-variant: var(--ds-line-2); } /* Accent surfaces use `background: var(--ds-ink)` for contrast. In light mode --ds-ink is near-black so white text reads; in dark mode it flips to near- white so the #fff text vanishes. Flip those text colors to the dark surface. */ :root[data-theme="dark"] .ds-nav a.active, :root[data-theme="dark"] .ds-nav a.active .ds-icon, :root[data-theme="dark"] .ds-btn.primary, :root[data-theme="dark"] .ds-btn.primary:hover, :root[data-theme="dark"] .ds-tab.on .n, :root[data-theme="dark"] .ds-chip.active, :root[data-theme="dark"] .ds-toggle button.on, :root[data-theme="dark"] .ds-pager button.on, :root[data-theme="dark"] .ds-seg label:has(input:checked), :root[data-theme="dark"] .ds-seg label:has(input:checked):hover { color: var(--ds-surf); } :root[data-theme="dark"] .ds-nav a.active .count { background: rgba(10, 12, 20, 0.18); color: var(--ds-surf); } /* Component overrides that need more than a token swap in dark mode. Keep brand identity on platform badges (myhome orange, ss blue, sold purple) but use translucent backgrounds so they don't glare on the dark surface. */ :root[data-theme="dark"] .ds-src.myhome { background: rgba(232, 119, 34, 0.16); color: #F3A368; } :root[data-theme="dark"] .ds-src.ss { background: rgba(0, 113, 206, 0.18); color: #6AAEE8; } :root[data-theme="dark"] .ds-src.doorstep { background: var(--ds-surf-3); color: var(--ds-ink); } :root[data-theme="dark"] .ds-pill.sold { background: rgba(75, 43, 174, 0.22); color: #A696E8; } /* Modal/dropdown surfaces from Bootstrap — force dark bg so popovers match. */ :root[data-theme="dark"] .modal-content, :root[data-theme="dark"] .dropdown-menu { background: var(--ds-surf); color: var(--ds-ink); border-color: var(--ds-line); } :root[data-theme="dark"] .dropdown-item { color: var(--ds-ink-2); } :root[data-theme="dark"] .dropdown-item:hover, :root[data-theme="dark"] .dropdown-item:focus { background: var(--ds-surf-3); color: var(--ds-ink); } :root[data-theme="dark"] .dropdown-divider { border-color: var(--ds-line); } :root[data-theme="dark"] .btn-close { filter: invert(1) grayscale(100%) brightness(200%); } /* ---------- 2. Base ---------- */ * { box-sizing: border-box } html, body { background: var(--ds-surf-2); color: var(--ds-ink); font-family: var(--ds-font-body); font-size: 14px; line-height: 1.45; -webkit-font-smoothing: antialiased; } a { color: inherit; text-decoration: none } button { font: inherit; color: inherit; background: none; border: 0; cursor: pointer; padding: 0 } .ds-display, .ds-serif { font-family: var(--ds-font-display); letter-spacing: -0.01em } .ds-mono { font-family: var(--ds-font-mono) } /* ---------- 3. App shell (sidebar + main) ---------- */ .ds-app { display: grid; grid-template-columns: 248px 1fr; min-height: 100vh } .ds-sidebar { background: var(--ds-surf); border-right: 1px solid var(--ds-line-2); position: sticky; top: 0; height: 100vh; display: flex; flex-direction: column; padding: 22px 16px; } .ds-brand { display: block; padding: var(--ds-logo-pad-top) 8px var(--ds-logo-pad-bottom) var(--ds-logo-pad-left); text-decoration: none; } .ds-brand-img { display: block; width: var(--ds-logo-width); max-width: 100%; aspect-ratio: 1695 / 445; /* matches logo.png natural aspect */ background-color: var(--ds-logo-color); -webkit-mask: url("../img/logo.png") no-repeat left center / contain; mask: url("../img/logo.png") no-repeat left center / contain; } .ds-brand-tag { display: var(--ds-logo-tag-display); font-size: 10px; color: var(--ds-ink-4); letter-spacing: 0.12em; text-transform: uppercase; font-weight: 500; margin-top: var(--ds-logo-tag-gap); text-align: var(--ds-logo-tag-align); transform: translateX(var(--ds-logo-tag-offset-x)); } .ds-nav-label { font-size: 10px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--ds-ink-5); font-weight: 600; padding: 16px 10px 8px } .ds-nav a { display: flex; align-items: center; gap: 12px; padding: 9px 10px; border-radius: 8px; color: var(--ds-ink-3); font-weight: 500; font-size: 13.5px; margin-bottom: 1px; position: relative; } .ds-nav a:hover { background: var(--ds-surf-3); color: var(--ds-ink) } .ds-nav a.active { background: var(--ds-ink); color: #fff } .ds-nav a.active .ds-icon { color: #fff } .ds-nav a .ds-icon { width: 20px; height: 20px; color: var(--ds-ink-4) } .ds-nav a .count { margin-left: auto; font-size: 11px; font-weight: 600; color: var(--ds-ink-4); background: var(--ds-surf-3); padding: 2px 7px; border-radius: 99px; font-family: var(--ds-font-mono) } .ds-nav a.active .count { background: rgba(255, 255, 255, .14); color: #fff } .ds-sidebar-foot { margin-top: auto; border-top: 1px solid var(--ds-line-2); padding-top: 14px } .ds-me { display: flex; align-items: center; gap: 10px; padding: 8px; border-radius: 10px } .ds-me:hover { background: var(--ds-surf-3) } .ds-avatar { width: 34px; height: 34px; border-radius: 50%; background: linear-gradient(135deg, var(--ds-heritage), #8B5A1C); color: #fff; display: grid; place-items: center; font-weight: 600; font-family: var(--ds-font-display); font-size: 13px; flex-shrink: 0; } .ds-me-name { font-weight: 600; font-size: 13px } .ds-me-role { font-size: 11px; color: var(--ds-ink-4); letter-spacing: 0.04em } .ds-main { min-width: 0; padding: 26px 40px 80px } /* ---------- 4. Masthead (editorial top) ---------- */ .ds-masthead { display: grid; grid-template-columns: 1fr auto; gap: 24px; align-items: end; padding: 8px 0 22px; border-bottom: 1px solid var(--ds-ink); margin-bottom: 24px; } .ds-masthead .ds-edition { display: flex; align-items: baseline; gap: 14px; font-family: var(--ds-font-mono); font-size: 11px; letter-spacing: 0.1em; color: var(--ds-ink-3); text-transform: uppercase } .ds-edition .dot { width: 4px; height: 4px; background: var(--ds-ink-3); border-radius: 50%; display: inline-block } .ds-masthead h1 { font-family: var(--ds-font-display); font-weight: 500; font-size: 64px; line-height: 0.95; letter-spacing: -0.035em; color: var(--ds-ink); margin-top: 10px } .ds-masthead h1 em { font-style: italic; font-weight: 400; color: var(--ds-heritage) } .ds-masthead .actions { display: flex; gap: 8px; align-items: center } /* ---------- 5. Buttons ---------- */ .ds-btn { display: inline-flex; align-items: center; gap: 8px; padding: 10px 16px; border-radius: 99px; font-weight: 600; font-size: 13px; background: var(--ds-surf); color: var(--ds-ink-2); border: 1px solid transparent; transition: all .15s; } .ds-btn:hover { background: var(--ds-surf-3) } .ds-btn.primary { background: var(--ds-ink); color: #fff } .ds-btn.primary:hover { background: var(--ds-ink-2) } .ds-btn.ghost { background: transparent } .ds-btn .ds-icon { width: 18px; height: 18px } /* Search input */ .ds-search { display: flex; align-items: center; gap: 8px; background: var(--ds-surf); padding: 9px 14px; border-radius: 99px; color: var(--ds-ink-4); } .ds-search input { border: 0; outline: 0; font: inherit; color: var(--ds-ink); flex: 1; background: transparent } .ds-search .kbd { font-family: var(--ds-font-mono); font-size: 10px; color: var(--ds-ink-4); background: var(--ds-surf-3); padding: 2px 5px; border-radius: 4px } /* ---------- 6. Cards + overview ---------- */ .ds-card { background: var(--ds-surf); border-radius: var(--ds-radius); padding: 22px; box-shadow: var(--ds-shadow); position: relative; } .ds-k-label { font-size: 10px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--ds-ink-4); font-weight: 600; margin-bottom: 14px; display: flex; align-items: center; gap: 8px; } .ds-k-label .ds-icon { width: 14px; height: 14px } /* ---------- 7. Bulletin / attention rail ---------- */ .ds-bulletin { background: var(--ds-surf); border-radius: var(--ds-radius); box-shadow: var(--ds-shadow); overflow: hidden } .ds-bulletin-head { display: flex; align-items: center; justify-content: space-between; padding: 16px 22px; border-bottom: 1px solid var(--ds-line-2) } .ds-bulletin-head h3 { font-family: var(--ds-font-display); font-size: 16px; font-weight: 600; letter-spacing: -0.01em; display: flex; align-items: center; gap: 10px } .ds-pulse { width: 7px; height: 7px; background: var(--ds-bad); border-radius: 50%; box-shadow: 0 0 0 0 rgba(166, 27, 27, .4); animation: ds-pulse 2s infinite } @keyframes ds-pulse { 70% { box-shadow: 0 0 0 8px rgba(166, 27, 27, 0) } 100% { box-shadow: 0 0 0 0 rgba(166, 27, 27, 0) } } .ds-bulletin-body { display: grid; grid-template-columns: repeat(5, 1fr) } .ds-bul-item { padding: 18px 22px; border-right: 1px solid var(--ds-line-2) } .ds-bul-item:last-child { border-right: 0 } .ds-bul-item .kind { font-size: 10px; letter-spacing: 0.12em; text-transform: uppercase; font-weight: 600; margin-bottom: 8px } .ds-bul-item.urgent .kind { color: var(--ds-bad) } .ds-bul-item.warn .kind { color: var(--ds-warn) } .ds-bul-item.info .kind { color: var(--ds-blue) } .ds-bul-item.good .kind { color: var(--ds-good) } .ds-bul-item .count { font-family: var(--ds-font-display); font-size: 30px; font-weight: 500; letter-spacing: -0.02em; line-height: 1; color: var(--ds-ink) } .ds-bul-item .title { font-size: 12.5px; color: var(--ds-ink-2); margin-top: 6px; font-weight: 500; line-height: 1.35 } /* ---------- 8. Tabs ---------- */ .ds-tabs { display: flex; gap: 2px; border-bottom: 1px solid var(--ds-line); overflow-x: auto } .ds-tab { padding: 14px 20px; font-size: 13px; font-weight: 500; color: var(--ds-ink-4); border-bottom: 2px solid transparent; margin-bottom: -1px; white-space: nowrap; display: flex; align-items: center; gap: 9px; transition: color .15s; } .ds-tab:hover { color: var(--ds-ink-2) } .ds-tab.on { color: var(--ds-ink); border-bottom-color: var(--ds-ink); font-weight: 600 } .ds-tab .n { font-family: var(--ds-font-mono); font-size: 11px; background: var(--ds-surf-3); padding: 2px 8px; border-radius: 99px; color: var(--ds-ink-3); font-weight: 500 } .ds-tab.on .n { background: var(--ds-ink); color: #fff } .ds-tab.urgent .n { background: var(--ds-bad-tint); color: var(--ds-bad) } .ds-tab.warn .n { background: var(--ds-warn-tint); color: var(--ds-warn) } /* ---------- 9. Chips (filter strip) ---------- */ .ds-chip { display: inline-flex; align-items: center; gap: 6px; padding: 6px 12px; border-radius: 99px; background: var(--ds-surf); font-size: 12px; font-weight: 500; color: var(--ds-ink-2); box-shadow: var(--ds-shadow); } .ds-chip .ds-icon { width: 14px; height: 14px; color: var(--ds-ink-4) } .ds-chip.active { background: var(--ds-ink); color: #fff } .ds-chip.active .ds-icon { color: #fff } /* ---------- 10. Sheet (table) ---------- */ .ds-sheet { background: var(--ds-surf); border-radius: var(--ds-radius); box-shadow: var(--ds-shadow); overflow: hidden } .ds-table { width: 100%; border-collapse: collapse; font-size: 13px } .ds-table thead th { font-size: 10.5px; letter-spacing: 0.1em; text-transform: uppercase; color: var(--ds-ink-4); font-weight: 600; text-align: left; padding: 14px 18px; background: var(--ds-surf-2); border-bottom: 1px solid var(--ds-line-2); white-space: nowrap; } .ds-table thead th.num { text-align: right } .ds-table tbody td { padding: 16px 18px; border-bottom: 1px solid var(--ds-line-2); vertical-align: middle } .ds-table tbody tr:last-child td { border-bottom: 0 } .ds-table tbody tr:hover { background: var(--ds-surf-2) } .ds-table.compact tbody td { padding: 9px 18px } .ds-table.compact thead th { padding: 10px 18px } .ds-addr { font-weight: 600; color: var(--ds-ink); font-size: 13.5px; font-family: var(--ds-font-display); letter-spacing: -0.005em } .ds-addr-sub { font-size: 11.5px; color: var(--ds-ink-4); margin-top: 2px; font-family: var(--ds-font-mono); letter-spacing: 0.02em } .ds-price { font-family: var(--ds-font-display); font-size: 15px; font-weight: 500; color: var(--ds-ink); letter-spacing: -0.01em; text-align: right } .ds-price .cur { color: var(--ds-ink-4); font-size: 11px; margin-right: 2px; font-weight: 500 } .ds-num { text-align: right; font-family: var(--ds-font-mono); font-weight: 500; color: var(--ds-ink-2) } /* ---------- 11. Source badges ---------- */ .ds-src { display: inline-flex; align-items: center; gap: 6px; padding: 4px 10px; border-radius: 99px; font-size: 10.5px; font-weight: 600; letter-spacing: 0.04em; text-transform: uppercase } .ds-src .d { width: 5px; height: 5px; border-radius: 50% } .ds-src.myhome { background: #FFF1E6; color: #9A4400 } .ds-src.myhome .d { background: #E87722 } .ds-src.ss { background: #E6F0F8; color: #004680 } .ds-src.ss .d { background: #0071CE } .ds-src.doorstep { background: var(--ds-ink); color: #fff } .ds-src.doorstep .d { background: #fff } /* ---------- 12. Status pills ---------- */ .ds-pill { display: inline-flex; align-items: center; gap: 6px; padding: 4px 12px; border-radius: 99px; font-size: 11px; font-weight: 600 } .ds-pill.active { background: var(--ds-good-tint); color: var(--ds-good) } .ds-pill.rented { background: var(--ds-blue-tint); color: var(--ds-blue) } .ds-pill.sold { background: #E8E6F3; color: #4B2BAE } .ds-pill.rerent { background: var(--ds-warn-tint); color: var(--ds-warn) } .ds-pill.unavail { background: var(--ds-bad-tint); color: var(--ds-bad) } .ds-pill.uploaded { background: var(--ds-surf-3); color: var(--ds-ink-3) } /* ---------- 13. Flag dots ---------- */ .ds-flag { width: 8px; height: 8px; border-radius: 50%; display: inline-block; flex-shrink: 0 } .ds-flag.warn { background: var(--ds-warn) } .ds-flag.bad { background: var(--ds-bad) } .ds-flag.good { background: var(--ds-good) } /* ---------- 14. Toggle (view switcher) ---------- */ .ds-toggle { display: flex; background: var(--ds-surf); border-radius: 99px; padding: 3px; box-shadow: var(--ds-shadow) } .ds-toggle button { padding: 7px 14px; border-radius: 99px; font-size: 12px; font-weight: 600; color: var(--ds-ink-4); display: inline-flex; align-items: center; gap: 6px } .ds-toggle button.on { background: var(--ds-ink); color: #fff } .ds-toggle button .ds-icon { width: 16px; height: 16px } /* ---------- 15. Row hover actions ---------- */ .ds-row-act { display: flex; gap: 2px; justify-content: flex-end; opacity: 0; transition: opacity .15s } .ds-table tbody tr:hover .ds-row-act { opacity: 1 } .ds-row-act button { width: 28px; height: 28px; border-radius: 6px; display: grid; place-items: center; color: var(--ds-ink-4) } .ds-row-act button:hover { background: var(--ds-surf-3); color: var(--ds-ink) } .ds-row-act .ds-icon { width: 18px; height: 18px } /* ---------- 16. Pagination ---------- */ .ds-pagination { display: flex; align-items: center; justify-content: space-between; padding: 18px 4px; font-size: 13px; color: var(--ds-ink-4) } .ds-pager { display: flex; gap: 4px; align-items: center } .ds-pager button { width: 32px; height: 32px; border-radius: 8px; color: var(--ds-ink-3); font-weight: 500; font-family: var(--ds-font-mono); font-size: 12px } .ds-pager button:hover { background: var(--ds-surf-3) } .ds-pager button.on { background: var(--ds-ink); color: #fff } .ds-pager button:disabled { color: var(--ds-ink-5); cursor: not-allowed } /* ---------- 17. Icon base ---------- */ .ds-icon { display: inline-block; vertical-align: middle; flex-shrink: 0; color: currentColor; stroke: currentColor; fill: none; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round } /* ---------- 18. Utility ---------- */ .ds-hidden { display: none !important } .ds-dim { color: var(--ds-ink-4) }