/* * BIZpaye Property — Tenant Theme * CSS custom properties injected per-request from Tenant.PrimaryColor * --tenant-primary is set inline on by _PublicLayout.cshtml */ :root { --tenant-primary: #0d6efd; --tenant-primary-dark: #0a58ca; --tenant-primary-rgb: 13, 110, 253; --tenant-secondary: #6c757d; --tenant-accent: #14b8a6; --theme-header-bg: #0f172a; --theme-header-text: #f8fafc; --theme-main-bg: #f8fafc; --theme-main-text: #111827; --theme-footer-bg: #111827; --theme-footer-text: #e5e7eb; --theme-menu-bg: #0f172a; --theme-menu-text: #e2e8f0; --theme-menu-active: #ffffff; --theme-navbar-toggler-icon: none; } /* ── Tenant color utilities ────────────────────────────────────── */ .bg-tenant { background-color: var(--tenant-primary) !important; } .text-tenant { color: var(--tenant-primary) !important; } .border-tenant { border-color: var(--tenant-primary) !important; } .btn-tenant { background-color: var(--tenant-primary); border-color: var(--tenant-primary); color: #fff; } .btn-tenant:hover, .btn-tenant:focus { background-color: var(--tenant-primary-dark); border-color: var(--tenant-primary-dark); color: #fff; } .btn-outline-tenant { color: var(--tenant-primary); border-color: var(--tenant-primary); background-color: transparent; } .btn-outline-tenant:hover, .btn-outline-tenant:focus { background-color: var(--tenant-primary); border-color: var(--tenant-primary); color: #fff; } /* ── Public Navbar ─────────────────────────────────────────────── */ .public-navbar { background: var(--theme-header-bg); color: var(--theme-header-text); box-shadow: 0 2px 8px rgba(0,0,0,.12); position: sticky; top: 0; z-index: 1030; } .public-navbar .navbar-brand, .public-navbar .nav-link { color: var(--theme-header-text); } .public-navbar .navbar-toggler { border-color: rgba(255,255,255,.25); } .public-navbar .navbar-toggler-icon { background-image: var(--theme-navbar-toggler-icon); } .public-navbar .navbar-brand img, .public-navbar .navbar-brand .public-navbar-logo { display: block; height: 60px; width: auto; max-height: 60px; max-width: 240px; object-fit: contain; } .public-navbar .nav-link { font-weight: 500; color: var(--theme-menu-text); position: relative; transition: color .2s ease, transform .2s ease, opacity .2s ease; } .public-navbar .nav-link:hover, .public-navbar .nav-link:focus-visible, .public-navbar .nav-link.active { color: var(--theme-menu-active); transform: translateY(-1px); } .public-navbar .nav-link::after { content: ''; position: absolute; left: .75rem; right: .75rem; bottom: .25rem; height: 2px; border-radius: 999px; background: var(--tenant-accent); transform: scaleX(0); transform-origin: center; transition: transform .2s ease, background-color .2s ease; } .public-navbar .nav-link:hover::after, .public-navbar .nav-link:focus-visible::after, .public-navbar .nav-link.active::after { transform: scaleX(1); } .public-navbar .navbar-brand { transition: color .2s ease, transform .2s ease, opacity .2s ease; } .public-navbar .navbar-brand:hover, .public-navbar .navbar-brand:focus-visible { color: var(--theme-menu-active); transform: translateY(-1px); } .public-navbar .navbar-brand:focus-visible, .public-navbar .nav-link:focus-visible { outline: 0; text-decoration: none; } .public-navbar .navbar-brand:focus-visible, .public-navbar .nav-link:focus-visible { text-shadow: 0 0 0.01px currentColor; } .public-navbar[data-menu-style="Transparent"] { background: color-mix(in srgb, var(--theme-header-bg) 78%, transparent); backdrop-filter: blur(12px); } .public-navbar[data-menu-style="Light"] { background: #ffffff; } .public-navbar[data-menu-style="Light"] .navbar-brand, .public-navbar[data-menu-style="Light"] .nav-link { color: #111827; } .public-navbar[data-menu-style="Light"] .navbar-toggler { border-color: rgba(17,24,39,.25); } .public-navbar[data-menu-style="Light"] .navbar-toggler-icon { filter: invert(1) brightness(0.2); } /* ── Hero Section ──────────────────────────────────────────────── */ .hero-slide-img { height: 600px; object-fit: cover; filter: brightness(0.65); } @media (max-width: 768px) { .hero-slide-img { height: 320px; } } .hero-caption-box { background: rgba(0,0,0,.35); backdrop-filter: blur(2px); border-radius: .75rem; padding: 2rem; text-align: center; } .text-shadow { text-shadow: 0 2px 8px rgba(0,0,0,.6); } /* ── Section typography ────────────────────────────────────────── */ .section-title { font-size: 2rem; font-weight: 700; color: #1a1a2e; } .section-divider { width: 60px; height: 4px; background: var(--tenant-primary); border-radius: 2px; margin-top: .5rem; margin-bottom: 1.5rem; } /* ── Team / Agent cards ────────────────────────────────────────── */ .agent-photo { width: 220px; height: 220px; object-fit: cover; border: 4px solid var(--tenant-primary); } .agent-photo-placeholder { width: 220px; height: 220px; } /* ── Property cards ────────────────────────────────────────────── */ .property-card { transition: transform .2s, box-shadow .2s; border-radius: .75rem; overflow: hidden; } .property-card:hover { transform: translateY(-4px); box-shadow: 0 8px 24px rgba(0,0,0,.12) !important; } .property-img { transition: transform .4s ease; } .property-card:hover .property-img { transform: scale(1.04); } /* ── Footer ────────────────────────────────────────────────────── */ .public-footer { background: var(--theme-footer-bg); color: var(--theme-footer-text); } .public-footer a { color: var(--theme-footer-text); text-decoration: none; } .public-footer a:hover { color: var(--theme-menu-active); } .public-footer .footer-brand { color: var(--tenant-accent); font-weight: 700; font-size: 1.3rem; } .public-main { background: var(--theme-main-bg); color: var(--theme-main-text); min-height: 60vh; } .public-main .bg-light, .public-footer .bg-light { background-color: color-mix(in srgb, var(--theme-main-bg) 90%, var(--tenant-primary) 10%) !important; } .public-main .bg-secondary, .public-footer .bg-secondary { background-color: color-mix(in srgb, var(--theme-main-text) 18%, var(--theme-main-bg) 82%) !important; } .public-main .text-muted, .public-footer .text-muted { color: var(--theme-main-text) !important; opacity: .72; } .public-main .border-bottom, .public-footer .border-bottom { border-bottom-color: color-mix(in srgb, var(--theme-main-text) 14%, transparent) !important; } .public-main .btn-outline-secondary, .public-footer .btn-outline-secondary { color: var(--tenant-primary); border-color: var(--tenant-primary); background-color: transparent; } .public-main .btn-outline-secondary:hover, .public-main .btn-outline-secondary:focus-visible, .public-footer .btn-outline-secondary:hover, .public-footer .btn-outline-secondary:focus-visible { background-color: var(--tenant-primary); border-color: var(--tenant-primary); color: #fff; } .public-main .theme-surface, .public-footer .theme-surface { background: var(--theme-main-bg); color: var(--theme-main-text); } .public-main .theme-surface-alt, .public-footer .theme-surface-alt { background: color-mix(in srgb, var(--theme-main-bg) 88%, var(--tenant-primary) 12%); color: var(--theme-main-text); } .public-main .theme-surface-raised, .public-footer .theme-surface-raised { background: color-mix(in srgb, var(--theme-main-bg) 96%, var(--tenant-primary) 4%); color: var(--theme-main-text); box-shadow: 0 10px 30px rgba(0,0,0,.08); } .public-main .theme-placeholder, .public-footer .theme-placeholder { background: color-mix(in srgb, var(--theme-main-text) 24%, var(--theme-main-bg) 76%); color: var(--theme-main-bg); } .public-main .theme-badge-muted, .public-footer .theme-badge-muted { background: color-mix(in srgb, var(--theme-main-text) 18%, var(--theme-main-bg) 82%); color: var(--theme-main-text); } .public-main .theme-muted, .public-footer .theme-muted { color: var(--theme-main-text) !important; opacity: .72; } .public-main a { color: var(--tenant-primary); } .public-main a:hover { color: var(--tenant-accent); } .public-main .btn, .public-footer .btn { color: #fff; } .public-main .btn-outline-tenant, .public-footer .btn-outline-tenant { color: var(--tenant-primary) !important; border-color: var(--tenant-primary) !important; background-color: transparent !important; } .public-main .btn-outline-tenant:hover, .public-main .btn-outline-tenant:focus-visible, .public-footer .btn-outline-tenant:hover, .public-footer .btn-outline-tenant:focus-visible { background-color: var(--tenant-primary) !important; border-color: var(--tenant-primary) !important; color: #fff !important; } /* ── Admin area sidebar ────────────────────────────────────────── */ .admin-sidebar { min-height: 100vh; background: #1a1a2e; width: 240px; flex-shrink: 0; } .admin-sidebar .sidebar-brand { padding: 1.25rem 1.5rem; font-weight: 700; font-size: 1.1rem; color: #fff; border-bottom: 1px solid rgba(255,255,255,.1); text-decoration: none; display: block; } .admin-sidebar .nav-link { color: rgba(255,255,255,.75); padding: .6rem 1.5rem; display: flex; align-items: center; gap: .6rem; font-size: .925rem; border-left: 3px solid transparent; transition: all .2s; } .admin-sidebar .nav-link:hover, .admin-sidebar .nav-link.active { color: #fff; background: rgba(255,255,255,.07); border-left-color: var(--tenant-primary); } .admin-sidebar .nav-section { font-size: .7rem; text-transform: uppercase; letter-spacing: .08em; color: rgba(255,255,255,.35); padding: 1rem 1.5rem .25rem; } .admin-content { flex: 1; overflow-y: auto; padding: 2rem; background: #f8f9fa; } @media (max-width: 991px) { .admin-sidebar { width: 100%; min-height: auto; } .admin-layout { flex-direction: column !important; } }