/* ============================================================
NORLIBS — UI REFRESH v1
Drop-in stylesheet. No HTML or JS changes required.
Add ONE line inside , immediately before :
============================================================ */
/* ─── 1. TOKENS (scoped to :root overrides) ─── */
:root {
/* Slate-blue tinted neutrals — connects with navy sidebar */
--nl-bg: #E8ECF4;
--nl-surface: #FFFFFF;
--nl-surface-2: #F3F5FA;
--nl-surface-3: #E8ECF4;
--nl-border: #D4DBE7;
--nl-border-2: #E1E6EF;
--nl-ink: #0F1F33;
--nl-ink-2: #475569;
--nl-ink-3: #64748B;
--nl-ink-4: #94A3B8;
--nl-blue: #2563EB;
--nl-blue-hover: #1D4ED8;
--nl-blue-soft: #EFF6FF;
--nl-blue-soft-2: #DBEAFE;
--nl-blue-ink: #1E40AF;
--nl-green: #16A34A;
--nl-green-soft: #F0FDF4;
--nl-green-ink: #15803D;
--nl-amber: #D97706;
--nl-amber-soft: #FFFBEB;
--nl-amber-ink: #92400E;
--nl-red: #DC2626;
--nl-red-soft: #FEF2F2;
--nl-red-ink: #B91C1C;
--nl-shadow-sm: 0 1px 2px rgba(15,31,51,0.06);
--nl-shadow: 0 1px 2px rgba(15,31,51,0.06), 0 4px 12px -4px rgba(15,31,51,0.10);
--nl-shadow-lg: 0 1px 2px rgba(15,31,51,0.06), 0 20px 40px -12px rgba(15,31,51,0.18);
--nl-radius: 12px;
--nl-radius-sm: 8px;
}
/* ─── 2. PAGE BACKGROUND (fix the washed-out white) ─── */
body {
background: var(--nl-bg) !important;
}
.main-content {
background: var(--nl-bg) !important;
}
/* ─── 3. SIDEBAR — left unchanged (uses dashboard1.html defaults) ─── */
/* ─── 4. HEADER (keep as-is, minor refinement) ─── */
.header {
box-shadow: 0 1px 0 rgba(255,255,255,0.04), 0 2px 12px rgba(0,0,0,0.25) !important;
}
/* ─── 5. PAGE HEADER CARD ("Manage your properties") ─── */
/* Target the div immediately inside main-content that contains the H1 */
#main-content > div:first-child {
background: var(--nl-surface) !important;
border: 1px solid var(--nl-border) !important;
border-radius: 14px !important;
box-shadow: var(--nl-shadow-sm) !important;
padding: 20px 24px !important;
}
/* ─── 6. STAT CARDS (6-card grid: showings, listings, revenue, FB, IG, YT) ─── */
/* The stats grid is a direct sibling of the page header inside main-content.
Target all its children (the 6 stat cards). */
#main-content > div:nth-child(2) > div {
background: var(--nl-surface) !important;
border: 1px solid var(--nl-border) !important;
border-radius: 14px !important;
box-shadow: var(--nl-shadow-sm) !important;
transition: transform .15s ease, box-shadow .15s ease, border-color .15s ease !important;
padding: 22px 16px !important;
}
#main-content > div:nth-child(2) > div:hover {
transform: translateY(-1px);
box-shadow: var(--nl-shadow) !important;
border-color: #B8C4D6 !important;
}
/* Revenue card keeps its green identity but with softer, less saturated gradient */
#main-content > div:nth-child(2) > div:has(#portfolio-monthly-revenue) {
background: linear-gradient(135deg, #F0FDF4 0%, #FFFFFF 60%) !important;
border: 1px solid #BBF7D0 !important;
box-shadow: var(--nl-shadow) !important;
}
/* Stat value numbers — tighter letterspacing, more weight */
#portfolio-total-showings,
#portfolio-active-listings,
#portfolio-fb-reach,
#portfolio-ig-reach,
#portfolio-yt-views {
letter-spacing: -0.025em !important;
font-weight: 700 !important;
}
#portfolio-monthly-revenue {
letter-spacing: -0.03em !important;
font-weight: 800 !important;
}
/* ─── 7. PROPERTY CARD CONTAINERS (JS-rendered — must beat inline styles) ─── */
/* Property cards are rendered as with inline style.
We override with !important since inline styles normally win. */
#property-cards-container > [data-property] {
background: var(--nl-surface) !important;
border: 1px solid var(--nl-border) !important;
border-radius: 14px !important;
box-shadow: var(--nl-shadow-sm) !important;
overflow: hidden !important;
transition: transform .2s cubic-bezier(.2,.7,.3,1), box-shadow .2s ease, border-color .2s ease !important;
}
#property-cards-container > [data-property]:hover {
transform: translateY(-2px) !important;
box-shadow: var(--nl-shadow-lg) !important;
border-color: #B8C4D6 !important;
}
/* Carousel (image header) — subtle inner shadow, better bg */
#property-cards-container > [data-property] > div:first-child {
background: #F3F5FA !important;
}
#property-cards-container > [data-property] > div:first-child::after {
content: "";
position: absolute;
inset: 0;
background: linear-gradient(to bottom, rgba(15,31,51,0) 70%, rgba(15,31,51,0.08) 100%);
pointer-events: none;
}
/* Carousel nav arrows — polish */
#property-cards-container [data-carousel-track] ~ button {
background: rgba(255,255,255,0.92) !important;
color: #0F1F33 !important;
font-weight: 500 !important;
box-shadow: 0 2px 8px rgba(15,31,51,0.18) !important;
backdrop-filter: blur(6px);
opacity: 0;
transition: opacity .18s ease, background .15s ease !important;
}
#property-cards-container > [data-property]:hover [data-carousel-track] ~ button {
opacity: 1;
}
#property-cards-container [data-carousel-track] ~ button:hover {
background: #FFFFFF !important;
}
/* Card body padding tweak */
#property-cards-container > [data-property] > div:nth-child(2) {
padding: 16px 18px 16px !important;
}
/* Address typography */
#property-cards-container .address-title {
font-size: 1rem !important;
font-weight: 700 !important;
letter-spacing: -0.015em !important;
color: var(--nl-ink) !important;
}
#property-cards-container .address-second-line {
font-size: 0.78rem !important;
color: var(--nl-ink-3) !important;
font-weight: 500 !important;
margin-top: 3px !important;
}
/* ─── 8. MARKET COMPARISON WIDGET (the blue gradient block) ─── */
/* Note: the widget has display:none by default, JS toggles it visible. */
.market-rate-widget {
background: var(--nl-surface-2) !important;
border: 1px solid var(--nl-border-2) !important;
border-radius: 10px !important;
padding: 12px 14px !important;
font-size: 0.82em !important;
}
/* Header row: title + delta badge */
.market-rate-widget > div:first-child {
margin-bottom: 10px !important;
padding-bottom: 8px !important;
border-bottom: 1px dashed var(--nl-border) !important;
}
.market-rate-widget > div:first-child > span:first-child {
color: var(--nl-ink) !important;
font-weight: 700 !important;
font-size: 0.95em !important;
letter-spacing: 0.01em;
}
/* Delta badge — JS sets bg color based on above/below/at.
We refine typography/shape without fighting the JS color logic. */
.market-rate-badge {
font-family: 'JetBrains Mono', ui-monospace, Menlo, monospace !important;
font-size: 0.78em !important;
font-weight: 700 !important;
padding: 3px 8px !important;
border-radius: 5px !important;
letter-spacing: 0.02em;
}
/* Data grid rows */
.market-rate-widget .market-rate-details {
gap: 5px 14px !important;
}
.market-comp-header {
font-size: 0.78em !important;
color: var(--nl-ink-3) !important;
letter-spacing: 0.01em;
border-bottom-color: var(--nl-border) !important;
padding-bottom: 6px !important;
margin-bottom: 4px !important;
}
.market-avg-rent,
.market-median-rent {
font-variant-numeric: tabular-nums !important;
color: var(--nl-ink) !important;
}
.market-avg-dom {
font-variant-numeric: tabular-nums !important;
font-size: 0.95em;
}
.market-comp-count {
color: var(--nl-ink-3) !important;
}
/* ─── 9. ACTION BUTTON GRID (5 buttons preserved) ─── */
/* The existing data-action colors are good — we polish radii,
shadows, hover, and the Coming Soon badge. */
.property-card-actions {
gap: 8px !important;
padding: 10px 0 4px !important;
}
.btn-card {
border-radius: 8px !important;
font-weight: 600 !important;
letter-spacing: 0.005em;
transition: background .12s ease, border-color .12s ease, color .12s ease, transform .1s ease, box-shadow .12s ease !important;
position: relative;
}
.btn-card:active:not([disabled]) {
transform: translateY(1px);
}
/* Refine each data-action color (softer, more intentional) */
.btn-card[data-action="edit"] {
background: var(--nl-blue-soft) !important;
border: 1px solid var(--nl-blue-soft-2) !important;
color: var(--nl-blue-ink) !important;
}
.btn-card[data-action="edit"]:hover {
background: var(--nl-blue-soft-2) !important;
border-color: var(--nl-blue) !important;
}
.btn-card[data-action="schedule"] {
background: var(--nl-green-soft) !important;
border: 1px solid #BBF7D0 !important;
color: var(--nl-green-ink) !important;
}
.btn-card[data-action="schedule"]:hover {
background: #DCFCE7 !important;
border-color: var(--nl-green) !important;
}
.btn-card[data-action="syndication"] {
background: var(--nl-surface-2) !important;
border: 1px solid var(--nl-border) !important;
color: var(--nl-ink-4) !important;
}
.btn-card[data-action="remove"] {
background: var(--nl-red-soft) !important;
border: 1px solid #FECACA !important;
color: var(--nl-red-ink) !important;
}
.btn-card[data-action="remove"]:hover {
background: #FEE2E2 !important;
border-color: var(--nl-red) !important;
}
.btn-card[data-action="comps"] {
background: var(--nl-amber-soft) !important;
border: 1px solid #FEF3C7 !important;
color: var(--nl-amber-ink) !important;
}
.btn-card[data-action="comps"]:hover {
background: #FEF3C7 !important;
border-color: var(--nl-amber) !important;
}
/* Coming Soon badge — make it feel intentional */
.btn-card[data-action="syndication"] .coming-soon-badge {
background: var(--nl-ink-3) !important;
font-size: 8.5px !important;
font-weight: 700 !important;
letter-spacing: 0.06em;
text-transform: uppercase;
padding: 2px 6px !important;
border-radius: 3px !important;
border: 2px solid var(--nl-surface) !important;
box-shadow: 0 1px 2px rgba(15,31,51,0.15) !important;
top: -7px !important;
right: 6px !important;
}
/* ─── 10. NOT-PUBLISHED / LIVE / PENDING STATUS CHIPS ─── */
/* These are inline-styled spans in the JS template. Light refinement. */
#property-cards-container [data-property] span[style*="background:#6b7280"],
#property-cards-container [data-property] span[style*="background:#6B7280"] {
background: #F1F5F9 !important;
color: var(--nl-ink-2) !important;
border: 1px solid var(--nl-border) !important;
font-weight: 600 !important;
}
/* ─── 11. PRIMARY BUTTON (page-level, e.g. "+ New Listing") ─── */
#main-content > div:first-child .btn-primary {
background: var(--nl-blue) !important;
border-radius: 8px !important;
box-shadow: 0 1px 2px rgba(37,99,235,0.24), inset 0 1px 0 rgba(255,255,255,0.12) !important;
transition: background .12s ease, box-shadow .12s ease, transform .1s ease !important;
}
#main-content > div:first-child .btn-primary:hover {
background: var(--nl-blue-hover) !important;
box-shadow: 0 4px 12px -2px rgba(37,99,235,0.35) !important;
}
/* ─── 12. SCROLLBARS (visible, matches palette) ─── */
.main-content {
overflow-y: auto !important;
}
.main-content::-webkit-scrollbar { width: 10px; }
.main-content::-webkit-scrollbar-track { background: var(--nl-surface-2); }
.main-content::-webkit-scrollbar-thumb {
background: #94A3B8;
border-radius: 5px;
border: 2px solid var(--nl-bg);
}
.main-content::-webkit-scrollbar-thumb:hover { background: #64748B; }
/* ─── 13. RESPONSIVE SAFETY (don't break existing breakpoints) ─── */
@media (max-width: 900px) {
#main-content > div:first-child { padding: 16px 18px !important; }
#main-content > div:nth-child(2) > div { padding: 18px 14px !important; }
}
/* End of norlibs-ui.css */