/* ============================================================ RNTUP — Royal Dark + Gold Luxury Theme Fonts: Cairo (body) · El Messiri (display) · Cormorant (numerals) ============================================================ */ :root { /* Surfaces (onyx → raised) */ --bg-base: #0c0c0f; --bg-elev-1: #131318; --bg-elev-2: #1a1a21; --bg-elev-3: #23232c; --bg-glass: rgba(18, 18, 23, 0.72); /* Neon accent system (cyan primary · purple secondary) */ --gold: #1fe0d0; /* legacy alias → neon cyan */ --gold-bright: #5ff3e6; --gold-deep: #12b3a6; --gold-soft: rgba(31, 224, 208, 0.14); --gold-line: rgba(31, 224, 208, 0.30); --gold-gradient: linear-gradient(135deg, #6ff5e9 0%, #1fe0d0 45%, #12b3a6 100%); --gold-gradient-soft: linear-gradient(135deg, rgba(95,243,230,0.9), rgba(18,179,166,0.9)); /* Neon tokens */ --neon-cyan: #1fe0d0; --neon-cyan-soft: rgba(31, 224, 208, 0.16); --neon-cyan-glow: rgba(31, 224, 208, 0.55); --neon-cyan-grad: linear-gradient(135deg, #6ff5e9, #1fe0d0); --neon-purple: #b14bf4; --neon-purple-soft: rgba(177, 75, 244, 0.16); --neon-purple-glow: rgba(177, 75, 244, 0.50); --neon-purple-grad: linear-gradient(135deg, #cf86ff, #b14bf4); /* Text */ --text-primary: #f4f1e9; --text-secondary: #b7b3a8; --text-tertiary: #807c72; /* Borders & shadows */ --border-subtle: rgba(255, 255, 255, 0.07); --border-gold: rgba(31, 224, 208, 0.22); --shadow-soft: 0 12px 34px rgba(0, 0, 0, 0.45); --shadow-deep: 0 22px 60px rgba(0, 0, 0, 0.6); --shadow-gold: 0 14px 38px rgba(31, 224, 208, 0.22); /* Bootstrap bridge / legacy aliases */ --primary: #1fe0d0; --primary-color: #1fe0d0; --primary-dark: #12b3a6; --primary-light: #6ff5e9; --secondary: #b14bf4; --success: #2fae6b; --warning: #e0a92e; --danger: #e0574b; --dark-bg: #0c0c0f; --dark-card: #1a1a21; --dark-border: #23232c; /* Legacy teal aliases (old pages paint white text over these) — deep teal so the contrast holds on both light and dark surfaces. */ --teal: #0f766e; --teal-dark: #0c4a44; --light-bg: #0c0c0f; --light-card: #1a1a21; --text-primary-legacy: #f4f1e9; --text-secondary-legacy: #b7b3a8; /* RNTUP tokens */ --rntup-featured-glow: 0 0 0 1px var(--gold), 0 0 26px rgba(31, 224, 208, 0.42); --rntup-new-bg: #2fae6b; --rntup-rented-bg: #c14a40; --rntup-available-bg: #1f8f5a; --rntup-urgent-bg: #d98324; --rntup-popular-bg: var(--gold-gradient); } /* ============================================================ RNTUP — Light mode overrides (same design language, light surfaces) Toggled via . Gradients that are always used as bright fills behind dark text (--gold-gradient, --neon-*-grad) are intentionally left unchanged. ============================================================ */ html[data-theme="light"] { /* Surfaces */ --bg-base: #f6f5f1; --bg-elev-1: #ffffff; --bg-elev-2: #ffffff; --bg-elev-3: #f0efe8; --bg-glass: rgba(255, 255, 255, 0.75); /* Accent system — deepened so it stays legible on light surfaces */ --gold: #115e59; --gold-bright: #0f766e; --gold-deep: #0c4a44; --gold-soft: rgba(15, 118, 110, 0.10); --gold-line: rgba(15, 118, 110, 0.28); --neon-cyan: #0f766e; --neon-cyan-soft: rgba(15, 118, 110, 0.10); --neon-cyan-glow: rgba(15, 118, 110, 0.30); --neon-purple: #7c3aed; --neon-purple-soft: rgba(124, 58, 237, 0.10); --neon-purple-glow: rgba(124, 58, 237, 0.28); /* Text */ --text-primary: #1b1b1f; --text-secondary: #57565d; --text-tertiary: #86858c; /* Borders & shadows */ --border-subtle: rgba(20, 20, 25, 0.09); --border-gold: rgba(15, 118, 110, 0.25); --shadow-soft: 0 10px 28px rgba(20, 20, 30, 0.09); --shadow-deep: 0 20px 48px rgba(20, 20, 30, 0.13); --shadow-gold: 0 12px 30px rgba(15, 118, 110, 0.20); /* Bootstrap bridge / legacy aliases */ --primary: #0f766e; --primary-color: #0f766e; --primary-dark: #0c4a44; --primary-light: #d3f0ec; --secondary: #7c3aed; } /* Navbar + footer stay the dark "chrome" bookends in both modes (the brand mark is a light-on-dark lockup only) — re-pin their subtree to the dark tokens so everything inside (dropdowns, buttons, links) keeps working. */ html[data-theme="light"] .navbar, html[data-theme="light"] .footer { --bg-glass: rgba(12, 12, 16, 0.94); --bg-elev-1: #131318; --bg-elev-2: #1a1a21; --bg-elev-3: #23232c; --text-primary: #f4f1e9; --text-secondary: #b7b3a8; --text-tertiary: #807c72; --border-subtle: rgba(255, 255, 255, 0.07); --border-gold: rgba(31, 224, 208, 0.22); --gold: #1fe0d0; --gold-bright: #5ff3e6; --gold-deep: #12b3a6; --gold-soft: rgba(31, 224, 208, 0.14); --gold-line: rgba(31, 224, 208, 0.30); --shadow-soft: 0 12px 34px rgba(0, 0, 0, 0.45); --shadow-deep: 0 22px 60px rgba(0, 0, 0, 0.6); --shadow-gold: 0 14px 38px rgba(31, 224, 208, 0.22); } /* Hardcoded (non-variable) dark surfaces that need explicit light versions */ html[data-theme="light"] .hero-section { background: radial-gradient(1100px 520px at 80% -10%, rgba(15, 118, 110, 0.10), transparent 60%), linear-gradient(160deg, #fbfaf6 0%, #f1efe8 70%); } html[data-theme="light"] .hero-title { background: linear-gradient(120deg, #14161a 25%, var(--gold-bright) 80%); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; text-shadow: 0 2px 24px rgba(15, 118, 110, 0.14); } html[data-theme="light"] .search-box { background: rgba(255, 255, 255, 0.78); } html[data-theme="light"] .cta-section { background: radial-gradient(800px 400px at 50% 120%, rgba(15, 118, 110, 0.12), transparent 60%), linear-gradient(160deg, #fbfaf6, #f1efe8); } html[data-theme="light"] .auth-card { background: rgba(255, 255, 255, 0.82); } /* The brand mark is a white lockup with a teal accent — flip it dark while keeping the accent hue so it stays legible on a light card. */ html[data-theme="light"] .auth-logo { filter: invert(1) hue-rotate(180deg); } html[data-theme="light"] .btn-close { filter: none; } html[data-theme="light"] .alert-warning { color: #8a5a0a; } html[data-theme="light"] .alert-success { color: #1f7a4d; } html[data-theme="light"] .alert-danger { color: #a83527; } html[data-theme="light"] .table-striped > tbody > tr:nth-of-type(odd) > * { background-color: rgba(20, 20, 25, 0.025); } /* Neon marketplace card (nx-card) — light surface; neon glow only on featured */ html[data-theme="light"] .nx-card { background: linear-gradient(180deg, #ffffff, #fbfbfa); box-shadow: 0 0 0 1px rgba(20, 20, 30, 0.06), var(--shadow-soft); } html[data-theme="light"] .nx-card.nx-featured { box-shadow: 0 0 0 1px rgba(20, 20, 30, 0.06), 0 0 22px -4px var(--nx-glow), var(--shadow-soft); } html[data-theme="light"] .nx-nego { background: rgba(20, 20, 25, 0.03); } html[data-theme="light"] .nx-features { border-top-color: rgba(20, 20, 25, 0.08); border-bottom-color: rgba(20, 20, 25, 0.08); } html[data-theme="light"] .nx-fav { border-color: rgba(20, 20, 25, 0.10); background: rgba(20, 20, 25, 0.03); } /* ============================================================ Base ============================================================ */ * { -webkit-tap-highlight-color: transparent; } html { scroll-behavior: smooth; } body { font-family: 'Cairo', system-ui, sans-serif; background-color: var(--bg-base); background-image: radial-gradient(900px 520px at 85% -8%, rgba(31, 224, 208, 0.10), transparent 60%), radial-gradient(760px 480px at 0% 0%, rgba(31, 224, 208, 0.05), transparent 55%); background-attachment: fixed; color: var(--text-primary); line-height: 1.7; letter-spacing: 0.1px; } h1, h2, h3, h4, h5, h6, .section-title, .hero-title, .navbar-brand { font-family: 'El Messiri', 'Cairo', serif; letter-spacing: 0.2px; } a { color: var(--gold-bright); text-decoration: none; transition: color 0.25s ease; } a:hover { color: var(--gold); } hr, .dropdown-divider { border-color: var(--border-subtle); } ::selection { background: var(--gold-soft); color: var(--gold-bright); } /* Elegant gold scrollbar */ ::-webkit-scrollbar { width: 11px; height: 11px; } ::-webkit-scrollbar-track { background: var(--bg-base); } ::-webkit-scrollbar-thumb { background: linear-gradient(var(--gold-deep), var(--gold)); border-radius: 10px; border: 3px solid var(--bg-base); } ::-webkit-scrollbar-thumb:hover { background: var(--gold); } /* ============================================================ Bootstrap dark-luxury overrides (so every page inherits) ============================================================ */ .bg-light, .bg-body, .bg-body-tertiary { background-color: var(--bg-elev-1) !important; color: var(--text-primary) !important; } .bg-dark { background-color: var(--bg-base) !important; } /* .bg-white is a LITERAL white surface in BOTH themes (breadcrumb bars, shepherd tour popup, credit tiles, banner-details card) — keep it white and pin readable dark text for the whole subtree, since the dark theme's near-white --text-primary would be invisible on it. Excludes .bg-white paired with a .bg-opacity-* utility: that combo is a translucent tint OVER a colored parent (e.g. the subscription stat tiles on a teal card), not an opaque white card — leave Bootstrap's rgba() alone. */ .bg-white:not([class*="bg-opacity"]) { background-color: #ffffff !important; color: #1b1b1f !important; --text-primary: #1b1b1f; --text-secondary: #57565d; --text-tertiary: #86858c; /* Accents too: dark mode's neon cyan links are illegible on white — use the deepened light-mode accent values inside white surfaces. */ --gold: #115e59; --gold-bright: #0f766e; --gold-deep: #0c4a44; --gold-soft: rgba(15, 118, 110, 0.10); /* Surfaces: var-driven children (.form-control, .form-select, dropdowns use --bg-elev-*) must render light inside a white card, or inputs stay dark while their text is pinned dark → dark-on-dark. */ --bg-elev-1: #ffffff; --bg-elev-2: #ffffff; --bg-elev-3: #f0efe8; --border-subtle: rgba(20, 20, 25, 0.09); --border-gold: rgba(15, 118, 110, 0.25); } /* A .bg-light nested inside a white surface must stay a LIGHT tint: the site-wide .bg-light→dark override would otherwise paint a dark box whose text inherits the white parent's pinned DARK text vars → dark-on-dark (profile credits widget, banner-details spec tiles, etc.). */ .bg-white:not([class*="bg-opacity"]) .bg-light, .profile-sidebar .bg-light, .profile-card .bg-light, .listing-card-profile .bg-light, .checkout-card .bg-light { background-color: #f0efe8 !important; color: #1b1b1f !important; } .bg-primary { background: var(--gold-gradient) !important; color: #1a1407 !important; } .text-dark, .text-body, .text-black { color: var(--text-primary) !important; } .text-muted, .text-secondary { color: var(--text-secondary) !important; } .text-primary { color: var(--gold) !important; } .text-white { color: var(--text-primary) !important; } .text-warning { color: var(--gold-bright) !important; } .border, .border-top, .border-bottom, .border-start, .border-end { border-color: var(--border-subtle) !important; } /* Cards */ .card { background-color: var(--bg-elev-2); color: var(--text-primary); border: 1px solid var(--border-subtle); border-radius: 16px; box-shadow: var(--shadow-soft); } .card-header, .card-footer { background-color: rgba(255, 255, 255, 0.02); border-color: var(--border-subtle); color: var(--text-primary); } /* Forms */ .form-control, .form-select, .input-group-text { background-color: var(--bg-elev-3); border: 1px solid var(--border-subtle); color: var(--text-primary); border-radius: 12px; padding: 11px 15px; } .form-control::placeholder { color: var(--text-tertiary); } .form-control:focus, .form-select:focus { background-color: var(--bg-elev-3); color: var(--text-primary); border-color: var(--gold); box-shadow: 0 0 0 3px var(--gold-soft); } .form-select { background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3e%3cpath fill='none' stroke='%231fe0d0' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='M2 5l6 6 6-6'/%3e%3c/svg%3e"); } .form-label, .col-form-label { color: var(--text-secondary); font-weight: 500; } .form-check-input { background-color: var(--bg-elev-3); border-color: var(--border-subtle); } .form-check-input:checked { background-color: var(--gold); border-color: var(--gold); } .input-group-text { color: var(--gold); } /* Dropdowns */ .dropdown-menu { /* Bootstrap sets its own dark default text color on .dropdown-menu; without pinning it to the theme, any child text without one of our .text-* utility overrides (e.g. the bare notification-title div) falls back to that near-black default and goes invisible on our dark surface. */ background-color: var(--bg-elev-2); color: var(--text-primary); border: 1px solid var(--border-gold); border-radius: 14px; box-shadow: var(--shadow-deep); padding: 6px; } .dropdown-item { color: var(--text-secondary); border-radius: 9px; padding: 9px 14px; } .dropdown-item:hover, .dropdown-item:focus { background-color: var(--gold-soft); color: var(--gold-bright); } .dropdown-item.active, .dropdown-item:active { background: var(--gold-gradient); color: #1a1407; } /* Tables */ .table { --bs-table-bg: transparent; --bs-table-color: var(--text-primary); color: var(--text-primary); border-color: var(--border-subtle); } .table > :not(caption) > * > * { border-color: var(--border-subtle); } .table thead th { color: var(--gold); font-weight: 600; text-transform: uppercase; font-size: 0.78rem; letter-spacing: 0.6px; border-bottom: 1px solid var(--border-gold); } .table-hover > tbody > tr:hover > * { background-color: rgba(31, 224, 208, 0.06); color: var(--text-primary); } .table-striped > tbody > tr:nth-of-type(odd) > * { background-color: rgba(255, 255, 255, 0.02); color: var(--text-primary); } /* Modals / offcanvas */ .modal-content, .offcanvas { background-color: var(--bg-elev-2); color: var(--text-primary); border: 1px solid var(--border-gold); border-radius: 18px; } .modal-header, .modal-footer { border-color: var(--border-subtle); } .btn-close { filter: invert(1) grayscale(1) brightness(1.6); } /* List groups */ .list-group-item { background-color: var(--bg-elev-2); color: var(--text-primary); border-color: var(--border-subtle); } /* Alerts */ .alert { border-radius: 14px; border: 1px solid var(--border-subtle); background-color: var(--bg-elev-2); color: var(--text-primary); } .alert-warning { background-color: rgba(224, 169, 46, 0.12); border-color: rgba(224, 169, 46, 0.35); color: #f0d28a; } .alert-success { background-color: rgba(47, 174, 107, 0.12); border-color: rgba(47, 174, 107, 0.35); color: #8fe3b6; } .alert-danger { background-color: rgba(224, 87, 75, 0.12); border-color: rgba(224, 87, 75, 0.35); color: #f0a89f; } .alert-info { background-color: var(--gold-soft); border-color: var(--border-gold); color: var(--gold-bright); } /* Tabs / pills */ .nav-tabs { border-bottom: 1px solid var(--border-subtle); } .nav-tabs .nav-link { color: var(--text-secondary); border: none; } .nav-tabs .nav-link.active { color: var(--gold-bright); background: transparent; border-bottom: 2px solid var(--gold); } .nav-pills .nav-link { color: var(--text-secondary); } .nav-pills .nav-link.active { background: var(--gold-gradient); color: #1a1407; } /* Pagination */ .pagination .page-link { color: var(--text-secondary); background-color: var(--bg-elev-2); border: 1px solid var(--border-subtle); border-radius: 10px; margin: 0 3px; } .pagination .page-link:hover { color: var(--gold-bright); border-color: var(--gold-line); } .pagination .page-item.active .page-link { background: var(--gold-gradient); border-color: var(--gold); color: #1a1407; } .pagination .page-item.disabled .page-link { background-color: var(--bg-elev-1); color: var(--text-tertiary); } /* Generic badges keep contrast */ .badge.bg-light { color: #1a1407 !important; } .badge.text-bg-light { color: #1a1407 !important; } /* ============================================================ Buttons ============================================================ */ .btn { border-radius: 12px; font-weight: 600; transition: all 0.25s ease; } .btn-primary { background: var(--gold-gradient); border: none; color: #1a1407; box-shadow: 0 8px 22px rgba(31, 224, 208, 0.28); } .btn-primary:hover, .btn-primary:focus { background: linear-gradient(135deg, #f7e0a0 0%, #e0bd4d 50%, #c89f24 100%); color: #14100a; box-shadow: var(--shadow-gold); transform: translateY(-1px); } .btn-primary:active { transform: translateY(0); } .btn-outline-primary { color: var(--gold-bright); border: 1px solid var(--gold-line); background: transparent; } .btn-outline-primary:hover, .btn-outline-primary:focus { background: var(--gold-gradient); border-color: var(--gold); color: #1a1407; } .btn-secondary-custom, .btn-secondary { background: var(--gold-gradient); border: none; color: #1a1407; } .btn-secondary-custom:hover, .btn-secondary:hover { filter: brightness(1.06); color: #14100a; } .btn-dark { background: var(--bg-elev-3); border: 1px solid var(--border-gold); color: var(--text-primary); } .btn-dark:hover { background: var(--bg-elev-2); border-color: var(--gold); color: var(--gold-bright); } .btn-outline-secondary { color: var(--text-secondary); border-color: var(--border-subtle); } .btn-outline-secondary:hover { background: var(--gold-soft); border-color: var(--gold-line); color: var(--gold-bright); } .btn-link { color: var(--gold-bright); } /* ============================================================ Navbar — onyx glass with gold hairline ============================================================ */ .navbar { background: var(--bg-glass); backdrop-filter: saturate(160%) blur(14px); -webkit-backdrop-filter: saturate(160%) blur(14px); border-bottom: 1px solid var(--gold-line); box-shadow: 0 6px 30px rgba(0, 0, 0, 0.45); padding: 10px 0; } .navbar-brand { font-weight: 700; font-size: 1.5rem; color: #fff !important; padding: 0; } .navbar-brand img.logo-main { height: 56px; width: auto; object-fit: contain; filter: drop-shadow(0 2px 8px rgba(31, 224, 208, 0.25)); } @media (max-width: 575.98px) { .navbar-brand img.logo-main { height: 44px; } } .navbar .nav-link { color: rgba(244, 241, 233, 0.78) !important; font-family: 'Cairo', sans-serif; font-weight: 600; padding: 8px 16px !important; position: relative; transition: color 0.25s ease; } .navbar .nav-link::after { content: ''; position: absolute; left: 16px; right: 16px; bottom: 2px; height: 2px; background: var(--gold-gradient); transform: scaleX(0); transform-origin: center; transition: transform 0.28s ease; border-radius: 2px; } .navbar .nav-link:hover, .navbar .nav-link.active { color: var(--gold-bright) !important; } .navbar .nav-link:hover::after, .navbar .nav-link.active::after { transform: scaleX(1); } .theme-toggle-btn { color: var(--text-primary); border: 1px solid var(--border-gold); border-radius: 10px; width: 34px; display: inline-flex; align-items: center; justify-content: center; } .theme-toggle-btn:hover { background: var(--gold-soft); color: var(--gold-bright); } .theme-toggle-btn .icon-moon { display: none; } html[data-theme="light"] .theme-toggle-btn .icon-sun { display: none; } html[data-theme="light"] .theme-toggle-btn .icon-moon { display: inline-block; } .navbar .lang-switcher .dropdown-toggle { color: var(--text-primary); border: 1px solid var(--border-gold); background: transparent; border-radius: 10px; } .navbar .lang-switcher .dropdown-toggle:hover { border-color: var(--gold); color: var(--gold-bright); } .navbar .btn-outline-secondary { color: var(--text-primary); border-color: var(--border-gold); border-radius: 10px; } .navbar .btn-outline-secondary:hover { background: var(--gold-soft); color: var(--gold-bright); } .navbar .btn-outline-primary { color: var(--gold-bright); border-color: var(--gold-line); } .navbar .btn-outline-primary:hover { background: var(--gold-gradient); border-color: var(--gold); color: #1a1407; } .navbar-toggler { border: 1px solid var(--border-gold); border-radius: 10px; } .navbar-toggler-icon { background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 30'%3e%3cpath stroke='%231fe0d0' stroke-linecap='round' stroke-miterlimit='10' stroke-width='2.2' d='M4 7h22M4 15h22M4 23h22'/%3e%3c/svg%3e"); } /* ============================================================ Hero ============================================================ */ .hero-section { position: relative; background: radial-gradient(1100px 520px at 80% -20%, rgba(31, 224, 208, 0.18), transparent 60%), linear-gradient(160deg, #15151b 0%, #0c0c0f 70%); padding: 110px 0 90px; color: var(--text-primary); overflow: hidden; border-bottom: 1px solid var(--gold-line); } .hero-section::before { content: ''; position: absolute; inset: 0; background-image: linear-gradient(rgba(31, 224, 208, 0.05) 1px, transparent 1px), linear-gradient(90deg, rgba(31, 224, 208, 0.05) 1px, transparent 1px); background-size: 64px 64px; -webkit-mask-image: radial-gradient(circle at 50% 30%, #000 0%, transparent 70%); mask-image: radial-gradient(circle at 50% 30%, #000 0%, transparent 70%); opacity: 0.5; pointer-events: none; } .hero-section .container { position: relative; z-index: 1; } .hero-eyebrow { display: inline-flex; align-items: center; gap: 12px; margin-bottom: 18px; color: var(--gold-bright); font-weight: 600; letter-spacing: 3px; text-transform: uppercase; font-size: 0.85rem; } .hero-eyebrow .line { display: inline-block; width: 46px; height: 1px; background: linear-gradient(90deg, transparent, var(--gold)); } .hero-eyebrow .line:last-child { background: linear-gradient(90deg, var(--gold), transparent); } .hero-eyebrow i { font-size: 1rem; } .hero-title { font-size: clamp(2.1rem, 5vw, 3.4rem); font-weight: 700; margin-bottom: 18px; line-height: 1.25; background: linear-gradient(120deg, #ffffff 30%, var(--gold-bright) 75%); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; text-shadow: 0 2px 30px rgba(31, 224, 208, 0.18); } .hero-subtitle { font-size: clamp(1rem, 2.2vw, 1.25rem); color: var(--text-secondary); margin-bottom: 36px; max-width: 640px; margin-inline: auto; } /* Search box — glass gold panel */ .search-box { background: rgba(26, 26, 33, 0.72); backdrop-filter: blur(16px); -webkit-backdrop-filter: blur(16px); border: 1px solid var(--gold-line); border-radius: 20px; padding: 22px; box-shadow: var(--shadow-deep); max-width: 920px; margin-inline: auto; } .search-box .form-control, .search-box .form-select { background-color: var(--bg-elev-3); border: 1px solid var(--border-subtle); border-radius: 12px; padding: 13px 16px; } .search-box .form-control:focus, .search-box .form-select:focus { border-color: var(--gold); box-shadow: 0 0 0 3px var(--gold-soft); } .search-box .btn { padding: 13px 28px; border-radius: 12px; font-weight: 700; } /* ============================================================ Section titles — gold eyebrow + display heading ============================================================ */ .section-title { font-weight: 700; font-size: clamp(1.4rem, 3vw, 2rem); margin-bottom: 8px; color: var(--text-primary); position: relative; } .section-title.text-center::after { content: ''; display: block; width: 72px; height: 3px; margin: 14px auto 0; background: var(--gold-gradient); border-radius: 3px; } .section-subtitle { color: var(--text-secondary); margin-bottom: 24px; } .categories-section, .listings-section { position: relative; } /* ============================================================ Category cards ============================================================ */ .category-card { display: flex; flex-direction: column; align-items: center; justify-content: flex-start; height: 100%; background: var(--bg-elev-2); border-radius: 16px; padding: 18px 12px; text-align: center; transition: transform 0.3s ease, border-color 0.3s ease, box-shadow 0.3s ease; cursor: pointer; border: 1px solid var(--border-subtle); box-shadow: var(--shadow-soft); text-decoration: none !important; } .category-card:hover, .category-card.active { border-color: var(--gold-line); background: linear-gradient(160deg, var(--bg-elev-3), var(--bg-elev-2)); transform: translateY(-5px); box-shadow: var(--shadow-gold); } .category-card .category-icon { width: 104px; height: 104px; flex-shrink: 0; overflow: hidden; background: radial-gradient(circle at 30% 25%, rgba(31, 224, 208, 0.28), rgba(31, 224, 208, 0.06)); border: 1px solid var(--gold-line); border-radius: 50%; display: flex; align-items: center; justify-content: center; margin: 0 auto 12px; } .category-card .category-icon img { width: 100%; height: 100%; object-fit: cover; display: block; } .category-card .category-icon i, .category-card i { font-size: 1.8rem; color: var(--gold-bright); } .category-card h5, .category-card h6 { font-weight: 600; font-size: 0.9rem; margin: 0; color: var(--text-primary); font-family: 'Cairo', sans-serif; line-height: 1.3; min-height: 2.6em; /* reserve 2 lines so all cards align even when a name wraps */ display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; } /* ============================================================ Marketplace grid + listing cards ============================================================ */ .marketplace-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 14px; } @media (min-width: 768px) { .marketplace-grid { grid-template-columns: repeat(3, 1fr); gap: 18px; } } @media (min-width: 1200px) { .marketplace-grid { grid-template-columns: repeat(4, 1fr); } } .listing-card { background: var(--bg-elev-2); border: 1px solid var(--border-subtle); border-radius: 16px; overflow: hidden; transition: transform 0.28s ease, box-shadow 0.28s ease, border-color 0.28s ease; box-shadow: var(--shadow-soft); height: 100%; display: flex; flex-direction: column; } .listing-card:hover { transform: translateY(-6px); box-shadow: var(--shadow-deep); border-color: var(--gold-line); } .listing-card .card-img-container, .listing-card .listing-image { position: relative; aspect-ratio: 1; overflow: hidden; } .listing-card .card-img-top, .listing-card .listing-image img { width: 100%; height: 100%; object-fit: cover; transition: transform 0.4s ease; } .listing-card:hover .card-img-top, .listing-card:hover .listing-image img { transform: scale(1.06); } .listing-card .badge-type, .listing-card .listing-badge { position: absolute; top: 8px; right: 8px; background: var(--gold-gradient); color: #1a1407; padding: 4px 9px; border-radius: 8px; font-size: 0.7rem; font-weight: 700; } .listing-card .listing-badge.car-badge { background: var(--gold-gradient); } .listing-card .favorite-btn { position: absolute; top: 8px; left: 8px; background: rgba(12, 12, 15, 0.55); backdrop-filter: blur(6px); color: #fff; width: 34px; height: 34px; border-radius: 50%; display: flex; align-items: center; justify-content: center; cursor: pointer; transition: all 0.2s ease; border: 1px solid rgba(255, 255, 255, 0.12); font-size: 14px; } .listing-card .favorite-btn:hover, .listing-card .favorite-btn.active { background: #c14a40; border-color: #c14a40; } .listing-card .card-body, .listing-card .listing-content { padding: 12px 13px; flex: 1; display: flex; flex-direction: column; gap: 5px; } .listing-card .listing-price { color: var(--gold-bright); font-family: 'Cormorant Garamond', 'Cairo', serif; font-weight: 700; font-size: 1.3rem; margin: 0; line-height: 1.15; letter-spacing: 0.3px; } .listing-card .listing-price small { font-weight: 400; font-size: 0.72rem; color: var(--text-tertiary); font-family: 'Cairo', sans-serif; } .listing-card .listing-title { font-family: 'Cairo', sans-serif; font-size: 0.9rem; font-weight: 600; margin: 0; color: var(--text-primary); line-height: 1.3; display: -webkit-box; -webkit-line-clamp: 1; line-clamp: 1; -webkit-box-orient: vertical; overflow: hidden; } .listing-card .listing-location { color: var(--text-secondary); font-size: 0.78rem; margin: 0; display: flex; align-items: center; gap: 3px; } .listing-card .listing-location i { font-size: 0.75rem; color: var(--gold); } .listing-card .listing-features { display: flex; flex-wrap: wrap; gap: 10px; color: var(--text-secondary); font-size: 0.76rem; margin-top: auto; padding-top: 4px; border-top: 1px solid var(--border-subtle); } .listing-card .listing-features span { display: flex; align-items: center; gap: 3px; } .listing-card .listing-features i { font-size: 0.72rem; color: var(--gold); } .listing-card .btn { display: none; } /* ============================================================ Badges (status + featured) ============================================================ */ .badge-new { background: var(--rntup-new-bg); color: #fff; font-weight: 600; letter-spacing: .3px; } .badge-rented { background: var(--rntup-rented-bg); color: #fff; } .badge-available { background: var(--rntup-available-bg); color: #fff; } .badge-urgent { background: var(--rntup-urgent-bg); color: #fff; } .badge-popular { background: var(--gold-gradient); color: #1a1407; font-weight: 700; letter-spacing: .3px; padding-inline: 10px; } .badge-verified { background: #0ea5e9; color: #fff; font-weight: 500; display: inline-flex; align-items: center; gap: 4px; } .badge-verified i { font-size: .95em; } /* Featured glow */ .card-featured { box-shadow: var(--rntup-featured-glow); border: 1px solid var(--gold) !important; animation: rntupFeaturedPulse 2.8s ease-in-out infinite; position: relative; overflow: hidden; } .card-featured::before { content: ""; position: absolute; inset: 0; pointer-events: none; background: linear-gradient(135deg, rgba(31,224,208,0.12) 0%, transparent 38%, transparent 62%, rgba(31,224,208,0.12) 100%); z-index: 1; } @keyframes rntupFeaturedPulse { 0%, 100% { box-shadow: 0 0 0 1px var(--gold), 0 0 16px rgba(31, 224, 208, 0.30); } 50% { box-shadow: 0 0 0 1px var(--gold), 0 0 30px rgba(31, 224, 208, 0.62); } } @media (prefers-reduced-motion: reduce) { .card-featured { animation: none; } } .featured-listing { border: 1px solid var(--gold) !important; box-shadow: 0 8px 26px rgba(31, 224, 208, 0.25); } .listing-image { position: relative; } .featured-badge { position: absolute; top: 10px; left: 10px; padding: 4px 10px; border-radius: 12px; font-size: 11px; font-weight: bold; color: #1a1407; display: flex; align-items: center; gap: 4px; z-index: 2; } .featured-badge i { font-size: 10px; } .badge-gold { background: var(--gold-gradient); box-shadow: 0 2px 10px rgba(31, 224, 208, 0.45); } .badge-silver { background: linear-gradient(135deg, #d7d7d7, #9a9a9a); color: #1a1a1a; } .badge-bronze { background: linear-gradient(135deg, #d99a5b, #9c6326); color: #fff; } .badge-featured { background: var(--gold-gradient); color: #1a1407; box-shadow: 0 2px 10px rgba(31, 224, 208, 0.4); } .trusted-badge { color: var(--gold-bright); } .favorite-btn.active i.bi-heart-fill, .favorite-btn .bi-heart-fill { color: #ff5e6c; } .char-counter { font-size: .8rem; color: var(--text-tertiary); } .char-counter.warn { color: var(--danger); font-weight: 600; } /* ============================================================ Admin banners carousel section ============================================================ */ .admin-banners-section { background: var(--bg-elev-1); } /* Keep the promo banner a sensible size instead of full-bleed tall images */ .admin-banners-section .carousel { max-width: 820px; margin-inline: auto; } /* Full image, edge-to-edge (fills the banner width, no crop, no letterbox) */ .admin-banners-section .carousel-item img { width: 100%; height: auto; display: block; } .admin-banners-slider { display: flex; gap: 16px; overflow-x: auto; scroll-snap-type: x mandatory; padding: 8px 0; -webkit-overflow-scrolling: touch; } .admin-banners-slider::-webkit-scrollbar { display: none; } .admin-banner-card { flex: 0 0 350px; scroll-snap-align: start; background: var(--bg-elev-2); border: 1px solid var(--border-subtle); border-radius: 16px; overflow: hidden; box-shadow: var(--shadow-soft); text-decoration: none; color: inherit; transition: transform 0.3s, box-shadow 0.3s, border-color 0.3s; } .admin-banner-card:hover { transform: translateY(-4px); box-shadow: var(--shadow-gold); border-color: var(--gold-line); } .admin-banner-card .banner-image { position: relative; height: 180px; overflow: hidden; } .admin-banner-card .banner-image img { width: 100%; height: 100%; object-fit: cover; } .admin-banner-card .featured-tag { position: absolute; top: 12px; right: 12px; background: var(--gold-gradient); color: #1a1407; padding: 6px 12px; border-radius: 20px; font-size: 12px; font-weight: bold; display: flex; align-items: center; gap: 4px; } .admin-banner-card .banner-content { padding: 16px; } .admin-banner-card .banner-content h4 { margin: 0 0 8px; font-size: 16px; font-weight: 600; color: var(--text-primary); } .admin-banner-card .banner-location { color: var(--text-secondary); font-size: 13px; margin-bottom: 8px; display: flex; align-items: center; gap: 4px; } .admin-banner-card .banner-price { font-size: 18px; font-weight: bold; color: var(--gold-bright); } @media (max-width: 768px) { .admin-banner-card { flex: 0 0 280px; } .admin-banner-card .banner-image { height: 150px; } } /* Bootstrap carousel — gold controls */ .carousel { border-radius: 18px; overflow: hidden; border: 1px solid var(--border-subtle); box-shadow: var(--shadow-soft); } .carousel-indicators [data-bs-target] { background-color: var(--gold); } .carousel-control-prev-icon, .carousel-control-next-icon { filter: sepia(1) saturate(4) hue-rotate(5deg) brightness(1.1); } .carousel-caption { background: rgba(12,12,15,0.55) !important; backdrop-filter: blur(6px); border: 1px solid var(--gold-line); } /* ============================================================ Stats + CTA ============================================================ */ .stats-section { background: radial-gradient(700px 360px at 50% 0%, rgba(31, 224, 208, 0.10), transparent 60%), var(--bg-elev-1) !important; color: var(--text-primary); padding: 64px 0; border-top: 1px solid var(--border-subtle); border-bottom: 1px solid var(--border-subtle); } .stat-item { text-align: center; } .stat-number { font-family: 'Cormorant Garamond', serif; font-size: 3rem; font-weight: 700; background: var(--gold-gradient); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; line-height: 1; } .stat-label { color: var(--text-secondary); margin-top: 6px; } .cta-section { background: radial-gradient(800px 400px at 50% 120%, rgba(31, 224, 208, 0.16), transparent 60%), linear-gradient(160deg, #15151b, #0c0c0f); color: var(--text-primary); padding: 70px 0; text-align: center; border-top: 1px solid var(--gold-line); } .cta-section h2 { font-weight: 700; margin-bottom: 16px; color: var(--text-primary); } .cta-section .btn-dark { background: var(--gold-gradient); color: #1a1407; border: none; font-weight: 700; padding: 12px 30px; } .cta-section .btn-dark:hover { filter: brightness(1.07); color: #14100a; } /* ============================================================ Auth / Profile / Details / Filters panels ============================================================ */ .auth-page { min-height: calc(100vh - 300px); display: flex; align-items: center; } .auth-card, .profile-sidebar, .profile-card, .add-listing-card, .details-info-card, .owner-card, .filters-card { background: var(--bg-elev-2); border: 1px solid var(--border-subtle); border-radius: 18px; padding: 28px; box-shadow: var(--shadow-soft); color: var(--text-primary); } .auth-card { padding: 40px; } .auth-icon { font-size: 4rem; color: var(--gold); } /* Personal-info field grid (profile.php "My Info" tab) had NO rules at all — label/value text relied purely on inheritance with no safeguard, unlike every other card block on the site. Pin both explicitly. */ .info-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; } @media (max-width: 575.98px) { .info-grid { grid-template-columns: 1fr; } } .info-item { background: var(--bg-elev-1); border: 1px solid var(--border-subtle); border-radius: 12px; padding: 12px 16px; } .info-item label { display: block; font-size: 0.82rem; color: var(--text-secondary); margin-bottom: 4px; } .info-item p { margin: 0; color: var(--text-primary); font-weight: 600; } /* Sidebar nav (.list-group-item-action) — Bootstrap's own default text color for the action variant is a low-contrast muted gray baked into its own stylesheet; pin it explicitly so it can never win the tie against our theme. */ .list-group-item-action { color: var(--text-primary) !important; } .list-group-item-action:hover, .list-group-item-action:focus { color: var(--gold-bright) !important; background-color: var(--gold-soft); } .profile-avatar, .owner-avatar { background: radial-gradient(circle at 30% 25%, rgba(31, 224, 208, 0.3), rgba(31, 224, 208, 0.08)); border: 1px solid var(--gold-line); border-radius: 50%; display: flex; align-items: center; justify-content: center; color: var(--gold-bright); } .profile-avatar { width: 100px; height: 100px; margin: 0 auto; } .profile-avatar i { font-size: 3rem; color: var(--gold-bright); } .owner-avatar { width: 60px; height: 60px; font-size: 24px; font-weight: 600; } .image-upload-area { background: var(--bg-elev-3); border: 1px dashed var(--gold-line) !important; border-radius: 14px; } .filters-card h5 { font-weight: 600; margin-bottom: 20px; padding-bottom: 12px; border-bottom: 1px solid var(--border-gold); color: var(--text-primary); } .filter-group { margin-bottom: 20px; } .filter-group label { font-weight: 500; margin-bottom: 8px; display: block; color: var(--text-secondary); } /* Details gallery */ .details-gallery { border-radius: 18px; overflow: hidden; } .details-main-image { width: 100%; height: 420px; object-fit: cover; border-radius: 16px; } .details-thumbnails { display: flex; gap: 10px; margin-top: 10px; } .details-thumbnails img { width: 84px; height: 62px; object-fit: cover; border-radius: 10px; cursor: pointer; opacity: 0.55; border: 1px solid transparent; transition: opacity 0.3s, border-color 0.3s; } .details-thumbnails img:hover, .details-thumbnails img.active { opacity: 1; border-color: var(--gold); } /* ============================================================ Footer ============================================================ */ .footer { background: radial-gradient(600px 300px at 100% 0%, rgba(31, 224, 208, 0.07), transparent 60%), #08080a; color: var(--text-secondary); padding: 64px 0 28px; border-top: 1px solid var(--gold-line); position: relative; } .footer::before { content: ''; position: absolute; top: -1px; left: 0; right: 0; height: 1px; background: linear-gradient(90deg, transparent, var(--gold), transparent); } .footer h5 { color: var(--text-primary); font-family: 'El Messiri', 'Cairo', serif; font-weight: 600; margin-bottom: 20px; } .footer h5 i { color: var(--gold); } .footer-logo { height: 52px; width: auto; object-fit: contain; filter: drop-shadow(0 2px 10px rgba(31,224,208,0.25)); } .footer a { color: var(--text-secondary); transition: color 0.25s, padding-inline-start 0.25s; } .footer a:hover { color: var(--gold-bright); } .footer-links { list-style: none; padding: 0; margin: 0; } .footer-links li { margin-bottom: 10px; } .footer-links a:hover { padding-inline-start: 4px; } .footer-bottom { border-top: 1px solid var(--border-subtle); padding-top: 24px; margin-top: 40px; text-align: center; color: var(--text-tertiary); } .social-links a { display: inline-flex; align-items: center; justify-content: center; width: 42px; height: 42px; background: var(--bg-elev-2); border: 1px solid var(--border-subtle); border-radius: 50%; margin: 0 5px; color: var(--text-secondary); transition: all 0.3s ease; } .social-links a:hover { background: var(--gold-gradient); border-color: var(--gold); color: #1a1407; transform: translateY(-3px); } /* ============================================================ WhatsApp float / spinners / empty states ============================================================ */ .whatsapp-float { position: fixed; bottom: 22px; left: 22px; background: #25D366; color: #fff; width: 58px; height: 58px; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: 27px; box-shadow: 0 8px 26px rgba(37, 211, 102, 0.45); z-index: 1000; transition: transform 0.3s; } .whatsapp-float:hover { transform: scale(1.1) translateY(-2px); color: #fff; } .spinner-border { color: var(--gold); } .loading-spinner { display: flex; justify-content: center; padding: 40px; } .empty-state { text-align: center; padding: 60px 20px; color: var(--text-secondary); } .empty-state i { font-size: 4rem; color: var(--gold-line); margin-bottom: 16px; } .lang-switcher .dropdown-toggle { background: transparent; border: 1px solid var(--border-gold); padding: 6px 12px; border-radius: 10px; color: var(--text-primary); } /* ============================================================ Responsive ============================================================ */ @media (max-width: 768px) { .hero-section { padding: 70px 0 56px; } .search-box { padding: 16px; } .category-card { padding: 16px 10px; } .category-card .category-icon { width: 88px; height: 88px; } .category-card .category-icon i, .category-card i { font-size: 1.5rem; } .category-card h5 { font-size: 0.8rem; } .stat-number { font-size: 2.4rem; } } /* Notification dropdown — full width on small screens */ @media (max-width: 576px) { .dropdown-menu#notifDropdown.show, #notifDropdown.dropdown-menu.show, #notifDropdown[data-bs-popper] { position: fixed !important; top: 64px !important; left: 8px !important; right: 8px !important; bottom: auto !important; inset: 64px 8px auto 8px !important; min-width: 0 !important; max-width: none !important; width: auto !important; transform: none !important; margin: 0 !important; max-height: 75vh; overflow-y: auto; z-index: 1060 !important; } #notifList { max-height: calc(75vh - 90px) !important; } } /* Notification items in dark dropdown */ #notifDropdown .notif-item.bg-light { background-color: var(--gold-soft) !important; } #notifDropdown .border-bottom, #notifDropdown .border-top { border-color: var(--border-subtle) !important; } /* ============================================================ NEON MARKETPLACE — toolbar · cards · add CTA (matches app) ============================================================ */ .market-toolbar { display: flex; align-items: center; gap: 12px; margin-bottom: 26px; flex-wrap: wrap; } /* Segmented toggle (عقارات / سيارات) */ .market-toggle { display: inline-flex; background: var(--bg-elev-2); border: 1px solid var(--border-subtle); border-radius: 16px; padding: 5px; gap: 4px; } .market-toggle button { border: none; background: transparent; color: var(--text-secondary); font-family: 'Cairo', sans-serif; font-weight: 700; font-size: 0.95rem; padding: 9px 26px; border-radius: 12px; cursor: pointer; transition: all 0.3s ease; } .market-toggle button.active { color: #06201e; background: var(--neon-cyan-grad); box-shadow: 0 0 0 1px var(--neon-cyan), 0 0 18px var(--neon-cyan-glow); } /* Filter icon button */ .market-filter { width: 52px; height: 52px; flex: 0 0 auto; border-radius: 14px; border: 1px solid var(--border-gold); background: var(--bg-elev-2); color: var(--neon-cyan); font-size: 1.25rem; display: inline-flex; align-items: center; justify-content: center; cursor: pointer; transition: all 0.3s ease; } .market-filter:hover { box-shadow: 0 0 0 1px var(--neon-cyan), 0 0 16px var(--neon-cyan-glow); color: var(--gold-bright); } /* Search field */ .market-search { flex: 1 1 280px; position: relative; min-width: 220px; } .market-search i { position: absolute; inset-inline-start: 18px; top: 50%; transform: translateY(-50%); color: var(--neon-cyan); font-size: 1.1rem; pointer-events: none; } .market-search input { width: 100%; background: var(--bg-elev-2); border: 1px solid var(--border-gold); border-radius: 16px; color: var(--text-primary); padding: 15px 52px 15px 18px; font-family: 'Cairo', sans-serif; transition: box-shadow 0.3s ease, border-color 0.3s ease; } .market-search input::placeholder { color: var(--text-tertiary); } .market-search input:focus { outline: none; border-color: var(--neon-cyan); box-shadow: 0 0 0 1px var(--neon-cyan), 0 0 18px var(--neon-cyan-glow); } /* ---------- Neon listing card (nx) ---------- */ .nx-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 16px; } @media (min-width: 768px) { .nx-grid { gap: 20px; } } .nx-card { --nx: var(--neon-cyan); --nx-glow: var(--neon-cyan-glow); --nx-grad: var(--neon-cyan-grad); position: relative; background: linear-gradient(180deg, #15151c, #101015); border: 1.5px solid var(--border-subtle); border-radius: 22px; overflow: hidden; height: 100%; display: flex; flex-direction: column; box-shadow: 0 0 0 1px rgba(0,0,0,0.4), var(--shadow-soft); transition: transform 0.3s cubic-bezier(.16,.84,.44,1), box-shadow 0.3s ease; } /* alternate purple */ .nx-grid > a:nth-child(even) .nx-card, .nx-card.nx-purple { --nx: var(--neon-purple); --nx-glow: var(--neon-purple-glow); --nx-grad: var(--neon-purple-grad); } .nx-card:hover { transform: translateY(-8px); box-shadow: 0 0 0 1px var(--border-gold), var(--shadow-deep); } /* Neon ring + glow reserved for featured listings only */ .nx-card.nx-featured { border-color: var(--nx); box-shadow: 0 0 0 1px rgba(0,0,0,0.4), 0 0 22px -4px var(--nx-glow), var(--shadow-soft); } .nx-card.nx-featured:hover { box-shadow: 0 0 0 1px var(--nx), 0 0 34px -2px var(--nx-glow), var(--shadow-deep); } .nx-media { position: relative; aspect-ratio: 16 / 11; overflow: hidden; margin: 7px 7px 0; border-radius: 16px; } .nx-media img { width: 100%; height: 100%; object-fit: cover; transition: transform 0.5s ease; } .nx-card:hover .nx-media img { transform: scale(1.07); } .nx-chip { position: absolute; display: inline-flex; align-items: center; gap: 4px; font-family: 'Cairo', sans-serif; font-weight: 700; font-size: 0.72rem; padding: 5px 11px; border-radius: 11px; backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px); z-index: 2; } .nx-feat { top: 10px; left: 10px; background: rgba(10,10,14,0.62); color: var(--nx); border: 1px solid var(--nx); box-shadow: 0 0 14px -3px var(--nx-glow); } .nx-new { top: 10px; right: 10px; background: rgba(10,10,14,0.62); color: var(--nx); border: 1px solid var(--nx); } /* The two paid push windows. Both live in the top-LEFT column and are mutually exclusive (urgent outranks promoted), so they never collide with each other. They sit at the top of that column normally and drop below the ★ مميز chip when the card also carries one — otherwise the two would overlap exactly. */ .nx-urgent, .nx-promoted { top: 10px; left: 10px; } .nx-featured .nx-urgent, .nx-featured .nx-promoted { top: 42px; } .nx-urgent { background: rgba(220,38,38,0.92); color: #fff; border: 1px solid rgba(255,255,255,0.35); box-shadow: 0 0 14px -3px rgba(220,38,38,0.7); } /* Deliberately NOT red and NOT the neon featured colour: مُروَّج is a rung below عاجل and a different product from مميز, so a visitor can tell all three apart at a glance. */ .nx-promoted { background: rgba(13,148,136,0.92); color: #fff; border: 1px solid rgba(255,255,255,0.30); } .nx-price { bottom: 10px; left: 10px; background: rgba(8,8,12,0.78); color: #fff; border: 1px solid var(--nx); box-shadow: 0 0 16px -4px var(--nx-glow); font-family: 'Cairo', sans-serif; font-weight: 700; font-size: 0.9rem; padding: 6px 12px; } .nx-status { bottom: 10px; right: 10px; font-weight: 700; color: #06201e; background: var(--nx-grad); box-shadow: 0 0 16px -4px var(--nx-glow); } .nx-status.nx-rented { background: linear-gradient(135deg,#f08a82,#c14a40); color:#fff; } .nx-body { padding: 12px 14px 14px; display: flex; flex-direction: column; gap: 8px; flex: 1; } .nx-title { font-family: 'Cairo', sans-serif; font-weight: 700; font-size: 1.02rem; color: var(--text-primary); margin: 0; line-height: 1.3; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .nx-loc { display: flex; align-items: center; gap: 5px; color: var(--text-secondary); font-size: 0.84rem; } .nx-loc i { color: var(--nx); } .nx-features { display: flex; flex-wrap: wrap; gap: 12px; color: var(--text-secondary); font-size: 0.8rem; padding: 9px 0; border-top: 1px solid rgba(255,255,255,0.06); border-bottom: 1px solid rgba(255,255,255,0.06); } .nx-features span { display: inline-flex; align-items: center; gap: 4px; } .nx-features i { color: var(--nx); font-size: 0.92rem; } .nx-nego { align-self: flex-start; font-family: 'Cairo', sans-serif; font-size: 0.78rem; font-weight: 600; color: var(--nx); border: 1px solid var(--nx); border-radius: 10px; padding: 4px 12px; background: rgba(255,255,255,0.02); } .nx-foot { display: flex; align-items: center; justify-content: space-between; margin-top: auto; padding-top: 4px; gap: 8px; } .nx-verified { display: inline-flex; align-items: center; gap: 5px; color: var(--text-secondary); font-size: 0.74rem; min-width: 0; } .nx-verified .nx-check { color: var(--nx); flex: 0 0 auto; } .nx-verified span { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .nx-org { width: 18px; height: 18px; border-radius: 50%; object-fit: cover; flex: 0 0 auto; } .nx-fav { flex: 0 0 auto; width: 36px; height: 36px; border-radius: 50%; border: 1px solid rgba(255,255,255,0.12); background: rgba(255,255,255,0.04); color: var(--text-secondary); display: inline-flex; align-items: center; justify-content: center; cursor: pointer; transition: all 0.25s ease; } .nx-fav:hover, .nx-fav.active { color: #ff5e6c; border-color: #ff5e6c; box-shadow: 0 0 14px -4px rgba(255,94,108,0.7); } /* ---------- Add CTA (glowing pill) ---------- */ .add-cta-wrap { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 16px; margin: 40px 0 8px; } /* Light mode: the pill's translucent-black fill read as a muddy gray with low-contrast text — swap to a translucent light fill so the teal text/border stay crisp against the page background. */ html[data-theme="light"] .add-cta { background: rgba(255,255,255,0.85); box-shadow: 0 0 0 1px rgba(15,118,110,0.18), var(--shadow-soft); } .add-cta { display: inline-flex; align-items: center; gap: 14px; flex-direction: row-reverse; font-family: 'Cairo', sans-serif; font-weight: 700; font-size: 1.12rem; color: var(--neon-cyan); background: rgba(13,13,18,0.6); border: 1.5px solid var(--neon-cyan); border-radius: 999px; padding: 16px 42px; box-shadow: 0 0 0 1px rgba(31,224,208,0.2), 0 0 26px -6px var(--neon-cyan-glow); transition: all 0.3s ease; } .add-cta .add-cta-ico { width: 34px; height: 34px; border-radius: 50%; background: var(--neon-cyan-grad); color: #06201e; display: inline-flex; align-items: center; justify-content: center; font-size: 1.2rem; } .add-cta:hover { color: #06201e; background: var(--neon-cyan-grad); box-shadow: 0 0 0 1px var(--neon-cyan), 0 0 38px -6px var(--neon-cyan-glow); transform: translateY(-2px); } .add-cta:hover .add-cta-ico { background: rgba(6,32,30,0.25); color: #06201e; } @media (max-width: 575.98px) { .market-toggle button { padding: 8px 16px; font-size: 0.88rem; } .market-filter { width: 46px; height: 46px; } .add-cta { font-size: 1rem; padding: 14px 28px; } } /* ============================================================ PREMIUM FORMS & BUTTONS ============================================================ */ .form-control, .form-select { transition: border-color 0.25s ease, box-shadow 0.25s ease, background-color 0.25s ease; font-size: 0.97rem; } .form-control:hover:not(:focus), .form-select:hover:not(:focus) { border-color: var(--gold-line); } .form-label, .col-form-label { font-size: 0.82rem; font-weight: 600; letter-spacing: 0.3px; margin-bottom: 7px; } .input-group { border-radius: 12px; } .input-group > .form-control, .input-group > .form-select { box-shadow: none; } .input-group:focus-within { box-shadow: 0 0 0 3px var(--gold-soft); border-radius: 12px; } .input-group:focus-within .form-control, .input-group:focus-within .form-select, .input-group:focus-within .input-group-text { border-color: var(--gold); } .input-group .input-group-text { background: var(--bg-elev-2); } /* Checkboxes / switches */ .form-check-input { width: 1.15em; height: 1.15em; margin-top: 0.2em; cursor: pointer; transition: all 0.2s ease; } .form-check-label { cursor: pointer; color: var(--text-secondary); } .form-check-input:focus { border-color: var(--gold); box-shadow: 0 0 0 0.2rem var(--gold-soft); } .form-check-input:checked { box-shadow: 0 0 10px -2px var(--neon-cyan-glow); } .form-switch .form-check-input { width: 2.5em; } /* Button sizing & feel */ .btn { letter-spacing: 0.2px; } .btn-lg { padding: 14px 30px; font-size: 1.05rem; border-radius: 14px; } .btn:active { transform: translateY(1px); } .btn:disabled { opacity: 0.55; } /* ============================================================ LUXE AUTH (login / register) ============================================================ */ .auth-page { position: relative; min-height: calc(100vh - 90px); display: flex; align-items: center; overflow: hidden; background: radial-gradient(720px 500px at 82% -5%, var(--neon-cyan-soft), transparent 60%), radial-gradient(620px 460px at 8% 105%, var(--neon-purple-soft), transparent 60%); } .auth-page::before { content: ''; position: absolute; inset: 0; background-image: linear-gradient(var(--gold-soft) 1px, transparent 1px), linear-gradient(90deg, var(--gold-soft) 1px, transparent 1px); background-size: 60px 60px; -webkit-mask-image: radial-gradient(circle at 50% 40%, #000, transparent 72%); mask-image: radial-gradient(circle at 50% 40%, #000, transparent 72%); opacity: 0.35; pointer-events: none; } .auth-page .container { position: relative; z-index: 1; } .auth-card { position: relative; background: rgba(22, 22, 28, 0.74); backdrop-filter: blur(20px); -webkit-backdrop-filter: blur(20px); border: 1px solid var(--gold-line); border-radius: 26px; padding: 44px 40px; box-shadow: var(--shadow-deep), 0 0 60px -16px var(--neon-cyan-glow); overflow: hidden; animation: luxeRise 0.9s cubic-bezier(.16,.84,.44,1) both; } .auth-card::before { content: ''; position: absolute; top: 0; left: 0; right: 0; height: 2px; background: linear-gradient(90deg, transparent, var(--neon-cyan), var(--neon-purple), transparent); } .auth-card h2 { font-family: 'El Messiri', 'Cairo', serif; font-weight: 700; margin-top: 6px; } .auth-logo { height: 56px; width: auto; object-fit: contain; filter: drop-shadow(0 4px 16px rgba(31, 224, 208, 0.4)); } .auth-icon { display: inline-flex; align-items: center; justify-content: center; width: 86px; height: 86px; border-radius: 50%; background: radial-gradient(circle at 32% 26%, rgba(31, 224, 208, 0.32), rgba(31, 224, 208, 0.05)); border: 1px solid var(--gold-line); color: var(--gold-bright); font-size: 2.5rem; box-shadow: 0 0 34px -6px var(--neon-cyan-glow); margin-bottom: 6px; } /* Social / OTP buttons inside auth card */ .auth-card #socialBtns .btn, .auth-card .btn-outline-secondary { border-radius: 13px; padding: 12px 18px; font-weight: 600; } .auth-card hr { opacity: 0.4; } /* ============================================================ LUXE ANIMATION LAYER ============================================================ */ @keyframes luxeFadeUp { from { opacity: 0; transform: translateY(30px); } to { opacity: 1; transform: none; } } @keyframes luxeShimmer { 0% { transform: translateX(-120%) skewX(-18deg); } 100% { transform: translateX(220%) skewX(-18deg); } } @keyframes luxeFloat { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-16px); } } @keyframes luxeGradient { 0%, 100% { background-position: 0% 50%; } 50% { background-position: 100% 50%; } } @keyframes luxeGlow { 0%, 100% { box-shadow: 0 0 0 1px var(--gold), 0 0 18px rgba(31,224,208,0.25); } 50% { box-shadow: 0 0 0 1px var(--gold), 0 0 34px rgba(31,224,208,0.55); } } @keyframes luxeSpin { to { transform: rotate(360deg); } } @keyframes luxeRise { from { opacity: 0; transform: translateY(60px) scale(.96); } to { opacity: 1; transform: none; } } /* Scroll reveal — applied globally via luxe.js */ .reveal { opacity: 0; transform: translateY(34px); transition: opacity 0.8s cubic-bezier(.16,.84,.44,1), transform 0.8s cubic-bezier(.16,.84,.44,1), filter 0.8s ease; will-change: opacity, transform; } .reveal.reveal-left { transform: translateX(-46px); } .reveal.reveal-right { transform: translateX(46px); } .reveal.reveal-scale { transform: scale(.9); } .reveal.reveal-blur { filter: blur(12px); } .reveal.is-visible { opacity: 1; transform: none; filter: none; } /* Hero animated entrance + living gradient title */ .hero-eyebrow { animation: luxeFadeUp 0.9s ease both; } .hero-title { background-size: 220% auto; animation: luxeFadeUp 1s ease 0.1s both, luxeGradient 7s ease-in-out infinite 1s; } .hero-subtitle { animation: luxeFadeUp 1s ease 0.25s both; } .hero-section .search-box { animation: luxeRise 1.1s cubic-bezier(.16,.84,.44,1) 0.4s both; } /* Floating gold orbs in hero */ .hero-section .orb { position: absolute; border-radius: 50%; background: radial-gradient(circle at 30% 30%, rgba(31,224,208,0.5), rgba(31,224,208,0.04) 70%); filter: blur(8px); pointer-events: none; z-index: 0; } .hero-section .orb-1 { width: 220px; height: 220px; top: -40px; inset-inline-start: 6%; animation: luxeFloat 9s ease-in-out infinite; } .hero-section .orb-2 { width: 150px; height: 150px; bottom: 10%; inset-inline-end: 10%; animation: luxeFloat 7s ease-in-out infinite 1s; } .hero-section .orb-3 { width: 90px; height: 90px; top: 30%; inset-inline-end: 26%; animation: luxeFloat 6s ease-in-out infinite .5s; } /* Mouse spotlight on hero */ .hero-section .spotlight { position: absolute; inset: 0; z-index: 0; pointer-events: none; background: radial-gradient(420px circle at var(--mx, 50%) var(--my, 30%), rgba(31,224,208,0.16), transparent 60%); opacity: 0; transition: opacity 0.4s ease; } .hero-section:hover .spotlight { opacity: 1; } /* Gold shine sweep on primary buttons */ .btn-primary, .btn.btn-primary { position: relative; overflow: hidden; } .btn-primary::after { content: ''; position: absolute; top: 0; bottom: 0; width: 40%; background: linear-gradient(100deg, transparent, rgba(255,255,255,0.55), transparent); transform: translateX(-150%) skewX(-18deg); pointer-events: none; } .btn-primary:hover::after { animation: luxeShimmer 0.9s ease; } /* Gold sheen sweep across listing & category cards on hover */ .listing-card, .category-card, .admin-banner-card { position: relative; } .listing-card::after, .category-card::after { content: ''; position: absolute; top: 0; left: -60%; width: 50%; height: 100%; background: linear-gradient(100deg, transparent, rgba(31,224,208,0.14), transparent); transform: skewX(-18deg); transition: left 0.7s ease; pointer-events: none; z-index: 2; } .listing-card:hover::after, .category-card:hover::after { left: 130%; } /* Featured card living glow */ .card-featured { animation: rntupFeaturedPulse 2.8s ease-in-out infinite, luxeGlow 3s ease-in-out infinite; } .card-featured::after { content: ''; position: absolute; top: 0; left: -70%; width: 55%; height: 100%; z-index: 3; background: linear-gradient(100deg, transparent, rgba(255,235,170,0.35), transparent); transform: skewX(-18deg); animation: luxeShimmer 3.4s ease-in-out infinite; } /* Navbar shrink-on-scroll */ .navbar { transition: padding 0.35s ease, background 0.35s ease, box-shadow 0.35s ease; } .navbar.navbar-scrolled { padding: 4px 0; background: rgba(10,10,13,0.92); box-shadow: 0 8px 34px rgba(0,0,0,0.6); } .navbar.navbar-scrolled .navbar-brand img.logo-main { height: 44px; transition: height 0.35s ease; } /* Animated counter pop */ .stat-number { display: inline-block; transition: transform 0.3s ease; } .stat-item.is-visible .stat-number { animation: luxeRise 0.8s cubic-bezier(.16,.84,.44,1) both; } /* Section title underline draw-in */ .section-title.text-center::after { width: 0; transition: width 0.7s ease 0.2s; } .section-title.text-center.is-visible::after, .section-title.text-center.reveal.is-visible::after { width: 72px; } /* Scroll-progress gold bar */ #luxe-progress { position: fixed; top: 0; inset-inline-start: 0; height: 3px; width: 0%; background: var(--gold-gradient); box-shadow: 0 0 12px rgba(31,224,208,0.6); z-index: 2000; transition: width 0.1s linear; } /* Back-to-top gold button */ #luxe-top { position: fixed; bottom: 22px; inset-inline-end: 22px; width: 50px; height: 50px; border-radius: 50%; background: var(--gold-gradient); color: #1a1407; border: none; display: flex; align-items: center; justify-content: center; font-size: 1.2rem; cursor: pointer; z-index: 1000; opacity: 0; transform: translateY(20px) scale(.8); pointer-events: none; box-shadow: var(--shadow-gold); transition: opacity 0.35s ease, transform 0.35s ease; } #luxe-top.show { opacity: 1; transform: none; pointer-events: auto; } #luxe-top:hover { filter: brightness(1.08); transform: translateY(-3px); } /* Tilt helper (subtle 3D on cards) */ .listing-card, .category-card { transform-style: preserve-3d; } @media (prefers-reduced-motion: reduce) { .reveal { opacity: 1 !important; transform: none !important; filter: none !important; transition: none !important; } .hero-eyebrow, .hero-title, .hero-subtitle, .hero-section .search-box, .hero-section .orb, .card-featured, .card-featured::after, .stat-item.is-visible .stat-number { animation: none !important; } .btn-primary::after, .listing-card::after, .category-card::after { display: none !important; } } /* V6.04 — Photo Reorder Drag/Drop */ .photo-item { cursor: grab; user-select: none; } .photo-item.dragging { opacity: 0.4; cursor: grabbing; } .photo-item.is-cover { box-shadow: 0 0 0 3px var(--gold); border-radius: 6px; } /* Onboarding tour (Shepherd.js): popup is forced to a white surface (bg-white) regardless of theme, but its text inherited the page's default color — which is near-white in dark mode (the site default), making the text invisible. Pin dark, readable text on the white card. The earlier ".bg-white:not([class*=bg-opacity])" dark-theme override (specificity 0,2,0 !important) repaints Shepherd's bg-white popup as the dark elevated background and OUT-SPECIFIES a plain ".shepherd-element" (0,1,0). Match its specificity with ".shepherd-element.bg-white" (0,2,0) — being later in the file, it wins the tie — so the popup stays a literal white surface and the dark text is readable in dark mode too. */ .shepherd-element.bg-white, .shepherd-element { background-color: #fff !important; } .shepherd-element, .shepherd-text, .shepherd-header, .shepherd-title { color: #1a1a21 !important; } .shepherd-button { color: #1a1a21; } .shepherd-button:not(.shepherd-button-secondary) { background: var(--gold-deep); color: #fff; } .shepherd-button-secondary { background: #eee; color: #1a1a21; } .photo-item.is-cover::after { content: "\2605"; position: absolute; top: 4px; left: 4px; color: var(--gold); font-size: 1.4rem; line-height: 1; pointer-events: none; } /* ── Gated actions ──────────────────────────────────────────────────────── An action the current state forbids stays VISIBLE and greyed rather than disappearing: a control that vanishes between page loads reads as a broken site, while a greyed one that answers with the reason tells the user what state their item is in. It deliberately does NOT carry the `disabled` attribute — that would swallow the click and with it the explanation. */ .action-locked { opacity: .38; filter: grayscale(1); cursor: not-allowed; } .action-locked:hover, .action-locked:focus { background: none; color: inherit; }