/* * ═══════════════════════════════════════════════════════════════ * PRIME PROPERTY PARTNERS — PREMIUM DESIGN SYSTEM * Upload to: /home/primrzuu/public_html/css/premium.css * Add to app.blade.php : * * (load AFTER app.css so it overrides cleanly) * ═══════════════════════════════════════════════════════════════ */ /* ── 1. GOOGLE FONTS ─────────────────────────────────────────── */ @import url('https://fonts.googleapis.com/css2?family=Playfair+Display:ital,wght@0,400;0,600;0,700;1,400&family=DM+Sans:opsz,wght@9..40,300;9..40,400;9..40,500;9..40,600&family=Cairo:wght@300;400;500;600;700&family=Vazirmatn:wght@300;400;500;600&display=swap'); /* ── 2. BRAND TOKENS ─────────────────────────────────────────── */ :root { /* Core palette */ --pp-navy: #0d1f3c; /* Deep navy — primary background */ --pp-navy-mid: #132749; /* Mid navy — cards, nav */ --pp-navy-light: #1e3a5f; /* Light navy — hover states */ --pp-gold: #c9a84c; /* True gold — primary accent */ --pp-gold-light: #e2c97e; /* Gold light — hover, highlights */ --pp-gold-pale: #f7f0dc; /* Gold pale — subtle backgrounds */ --pp-white: #ffffff; --pp-off-white: #f8f7f4; /* Warm off-white for backgrounds */ --pp-text: #1a2332; /* Primary text */ --pp-text-mid: #4a5568; /* Secondary text */ --pp-text-muted: #8a9ab5; /* Muted text */ --pp-border: #e8e2d6; /* Warm border */ --pp-border-dark: rgba(255,255,255,0.1); /* Dark bg border */ --pp-success: #0d9f6e; --pp-error: #dc2626; /* Typography */ --font-display: 'Playfair Display', Georgia, serif; --font-body: 'DM Sans', -apple-system, sans-serif; --font-arabic: 'Cairo', 'DM Sans', sans-serif; --font-persian: 'Vazirmatn', 'Cairo', sans-serif; --font-mono: 'JetBrains Mono', monospace; /* Spacing scale */ --space-xs: 4px; --space-sm: 8px; --space-md: 16px; --space-lg: 24px; --space-xl: 40px; --space-2xl: 64px; --space-3xl: 96px; /* Shadows */ --shadow-sm: 0 1px 3px rgba(13,31,60,0.06), 0 1px 2px rgba(13,31,60,0.04); --shadow-md: 0 4px 16px rgba(13,31,60,0.10), 0 2px 4px rgba(13,31,60,0.06); --shadow-lg: 0 12px 40px rgba(13,31,60,0.14), 0 4px 12px rgba(13,31,60,0.08); --shadow-xl: 0 24px 64px rgba(13,31,60,0.18); --shadow-gold: 0 4px 20px rgba(201,168,76,0.25); /* Radius */ --r-sm: 6px; --r-md: 10px; --r-lg: 16px; --r-xl: 24px; --r-full: 999px; /* Transitions */ --t-fast: 150ms ease; --t-base: 250ms ease; --t-slow: 400ms cubic-bezier(0.16,1,0.3,1); } /* ── 3. BASE OVERRIDES ───────────────────────────────────────── */ html { scroll-behavior: smooth; } body { font-family: var(--font-body); color: var(--pp-text); background: var(--pp-off-white); -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; } /* Arabic/Persian font override */ [lang="ar"] body, [dir="rtl"] body, .lang-ar, .is-arabic { font-family: var(--font-arabic); } [lang="fa"] body, .lang-fa, .is-persian { font-family: var(--font-persian); } /* Headings use display font */ h1, h2, h3, .display-heading { font-family: var(--font-display); font-weight: 600; letter-spacing: -0.01em; line-height: 1.2; } [dir="rtl"] h1, [dir="rtl"] h2, [dir="rtl"] h3 { font-family: var(--font-arabic); letter-spacing: 0; } /* ── 4. PREMIUM NAVIGATION ───────────────────────────────────── */ .navbar, nav.main-nav, .main-navigation, header > nav { background: var(--pp-navy) !important; backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); border-bottom: 1px solid rgba(201,168,76,0.15); transition: box-shadow var(--t-base); } .navbar.scrolled, .navbar--scrolled { box-shadow: 0 2px 24px rgba(13,31,60,0.3); } /* Nav logo area */ .navbar-brand img, .nav-logo img { height: 42px; width: auto; } /* Nav links */ .navbar a:not(.btn), .main-nav a:not(.btn) { color: rgba(255,255,255,0.82) !important; font-size: 13.5px; font-weight: 500; letter-spacing: 0.02em; transition: color var(--t-fast); text-decoration: none; } .navbar a:not(.btn):hover, .main-nav a:not(.btn):hover { color: var(--pp-gold-light) !important; } /* Active nav link */ .navbar a.active, .main-nav a.active { color: var(--pp-gold) !important; position: relative; } .navbar a.active::after { content: ''; position: absolute; bottom: -2px; left: 0; right: 0; height: 2px; background: var(--pp-gold); border-radius: 2px; } /* ── 5. PREMIUM BUTTONS ──────────────────────────────────────── */ .btn-primary, .btn-pp-primary, button[type="submit"].primary, .cta-primary { background: linear-gradient(135deg, var(--pp-gold) 0%, #b8922e 100%); color: var(--pp-navy) !important; font-weight: 600; font-size: 14px; letter-spacing: 0.03em; padding: 12px 28px; border-radius: var(--r-md); border: none; cursor: pointer; transition: all var(--t-base); box-shadow: 0 2px 8px rgba(201,168,76,0.3); text-decoration: none; display: inline-flex; align-items: center; gap: 8px; } .btn-primary:hover, .btn-pp-primary:hover { background: linear-gradient(135deg, var(--pp-gold-light) 0%, var(--pp-gold) 100%); box-shadow: var(--shadow-gold); transform: translateY(-1px); color: var(--pp-navy) !important; } .btn-outline, .btn-pp-outline { background: transparent; color: var(--pp-navy) !important; border: 1.5px solid var(--pp-navy); font-weight: 600; font-size: 14px; padding: 11px 26px; border-radius: var(--r-md); cursor: pointer; transition: all var(--t-base); text-decoration: none; display: inline-flex; align-items: center; gap: 8px; } .btn-outline:hover { background: var(--pp-navy); color: #fff !important; } /* Inverse on dark backgrounds */ .bg-primary .btn-outline, .dark-bg .btn-outline { color: #fff !important; border-color: rgba(255,255,255,0.4); } .bg-primary .btn-outline:hover { background: rgba(255,255,255,0.1); border-color: rgba(255,255,255,0.7); } /* ── 6. PREMIUM PROPERTY CARDS ───────────────────────────────── */ .property-card, .card-property { background: var(--pp-white); border-radius: var(--r-lg); overflow: hidden; box-shadow: var(--shadow-sm); border: 1px solid var(--pp-border); transition: transform var(--t-slow), box-shadow var(--t-slow); position: relative; } .property-card:hover { transform: translateY(-4px); box-shadow: var(--shadow-lg); border-color: transparent; } /* Card image */ .property-card__image, .card-img-top { position: relative; overflow: hidden; aspect-ratio: 4/3; background: var(--pp-border); } .property-card__image img, .card-img-top img { width: 100%; height: 100%; object-fit: cover; transition: transform 600ms cubic-bezier(0.16,1,0.3,1); } .property-card:hover .property-card__image img, .property-card:hover .card-img-top img { transform: scale(1.05); } /* Premium badge on card */ .property-card .badge-citizenship, .badge-citizenship { background: linear-gradient(135deg, var(--pp-gold), #b8922e); color: var(--pp-navy); font-size: 10px; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; padding: 4px 10px; border-radius: var(--r-full); } /* Price display */ .property-card .price, .property-price { font-family: var(--font-display); font-size: 22px; font-weight: 600; color: var(--pp-navy); letter-spacing: -0.02em; } .property-card .price-per-sqm, .price-per-sqm { font-size: 12px; color: var(--pp-text-muted); } /* Property specs row */ .property-specs, .card-specs { display: flex; gap: 16px; flex-wrap: wrap; } .spec-item { display: flex; align-items: center; gap: 5px; font-size: 13px; color: var(--pp-text-mid); white-space: nowrap; } .spec-item i, .spec-item .icon { color: var(--pp-gold); font-size: 14px; } /* ── 7. PREMIUM HERO / SEARCH BAR ────────────────────────────── */ .hero-section { background: linear-gradient(165deg, var(--pp-navy) 0%, var(--pp-navy-light) 60%, #1a3a6e 100%); position: relative; overflow: hidden; } .hero-section::before { content: ''; position: absolute; inset: 0; background: url("data:image/svg+xml,%3Csvg width='60' height='60' viewBox='0 0 60 60' xmlns='http://www.w3.org/2000/svg'%3E%3Cg fill='none' fill-rule='evenodd'%3E%3Cg fill='%23c9a84c' fill-opacity='0.04'%3E%3Cpath d='M36 34v-4h-2v4h-4v2h4v4h2v-4h4v-2h-4zm0-30V0h-2v4h-4v2h4v4h2V6h4V4h-4zM6 34v-4H4v4H0v2h4v4h2v-4h4v-2H6zM6 4V0H4v4H0v2h4v4h2V6h4V4H6z'/%3E%3C/g%3E%3C/g%3E%3C/svg%3E"); opacity: 1; } /* Search form premium style */ .search-form, .hero-search, .search-bar { background: var(--pp-white); border-radius: var(--r-xl); box-shadow: var(--shadow-xl); padding: 8px; display: flex; gap: 4px; align-items: center; } /* ── 8. PREMIUM FORM INPUTS ──────────────────────────────────── */ input[type="text"], input[type="email"], input[type="tel"], input[type="number"], select, textarea { border: 1.5px solid var(--pp-border); border-radius: var(--r-md); padding: 10px 14px; font-family: var(--font-body); font-size: 14px; color: var(--pp-text); background: var(--pp-white); transition: border-color var(--t-fast), box-shadow var(--t-fast); outline: none; width: 100%; } input:focus, select:focus, textarea:focus { border-color: var(--pp-navy); box-shadow: 0 0 0 3px rgba(13,31,60,0.08); } input::placeholder { color: var(--pp-text-muted); } label { font-size: 13px; font-weight: 500; color: var(--pp-text); margin-bottom: 5px; display: block; } /* ── 9. PREMIUM FOOTER ───────────────────────────────────────── */ footer .bg-primary { background: linear-gradient(160deg, var(--pp-navy) 0%, #0a1628 100%) !important; } /* ── 10. TRUST BAR ───────────────────────────────────────────── */ .trust-bar { background: rgba(0,0,0,0.2); border-top: 1px solid rgba(201,168,76,0.15); border-bottom: 1px solid rgba(201,168,76,0.15); } /* ── 11. PREMIUM SECTION TITLES ──────────────────────────────── */ .section-eyebrow { font-size: 11px; font-weight: 600; letter-spacing: 0.14em; text-transform: uppercase; color: var(--pp-gold); margin-bottom: 8px; display: block; } .section-title { font-family: var(--font-display); font-size: clamp(24px, 3vw, 36px); font-weight: 600; color: var(--pp-navy); line-height: 1.2; } .section-title--light { color: var(--pp-white); } .section-divider { width: 40px; height: 3px; background: linear-gradient(90deg, var(--pp-gold), transparent); border-radius: 2px; margin: 12px 0 20px; } [dir="rtl"] .section-divider { background: linear-gradient(270deg, var(--pp-gold), transparent); } /* ── 12. PREMIUM BADGES & TAGS ───────────────────────────────── */ .tag-pill { display: inline-flex; align-items: center; gap: 5px; padding: 4px 12px; border-radius: var(--r-full); font-size: 12px; font-weight: 500; } .tag-pill--new { background: rgba(13,159,110,0.1); color: var(--pp-success); border: 1px solid rgba(13,159,110,0.2); } .tag-pill--off-plan{ background: rgba(201,168,76,0.12); color: var(--pp-gold); border: 1px solid rgba(201,168,76,0.25); } .tag-pill--featured{ background: var(--pp-navy); color: #fff; } /* ── 13. SKELETON LOADING ────────────────────────────────────── */ .skeleton { background: linear-gradient(90deg, #f0ede8 25%, #e8e4dd 50%, #f0ede8 75%); background-size: 200% 100%; animation: skeleton-shimmer 1.5s ease-in-out infinite; border-radius: var(--r-sm); } @keyframes skeleton-shimmer { 0% { background-position: 200% 0; } 100% { background-position: -200% 0; } } .skeleton-card { height: 320px; border-radius: var(--r-lg); } /* ── 14. TOAST NOTIFICATIONS ─────────────────────────────────── */ #toast-container { position: fixed; bottom: 24px; right: 24px; z-index: 9999; display: flex; flex-direction: column; gap: 10px; pointer-events: none; } [dir="rtl"] #toast-container { right: auto; left: 24px; } .toast-item { background: var(--pp-navy); color: #fff; padding: 13px 18px; border-radius: var(--r-md); font-size: 13.5px; font-weight: 500; box-shadow: var(--shadow-lg); display: flex; align-items: center; gap: 10px; pointer-events: all; max-width: 320px; animation: toast-in 300ms cubic-bezier(0.16,1,0.3,1) forwards; border-left: 3px solid var(--pp-gold); } .toast-item.toast-success { border-left-color: var(--pp-success); } .toast-item.toast-error { border-left-color: var(--pp-error); } .toast-item.toast-out { animation: toast-out 250ms ease forwards; } @keyframes toast-in { from { opacity:0; transform: translateY(12px); } to { opacity:1; transform: translateY(0); } } @keyframes toast-out { from { opacity:1; transform: translateY(0); } to { opacity:0; transform: translateY(8px); } } /* ── 15. SCROLL ANIMATIONS ───────────────────────────────────── */ .reveal { opacity: 0; transform: translateY(20px); transition: opacity 600ms ease, transform 600ms cubic-bezier(0.16,1,0.3,1); } .reveal.is-visible { opacity: 1; transform: translateY(0); } .reveal-delay-1 { transition-delay: 100ms; } .reveal-delay-2 { transition-delay: 200ms; } .reveal-delay-3 { transition-delay: 300ms; } /* ── 16. PREMIUM LOADING OVERLAY ─────────────────────────────── */ #loading-overlay { position: fixed; inset: 0; background: var(--pp-navy); z-index: 99999; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 16px; transition: opacity 400ms ease; } #loading-overlay.hide { opacity: 0; pointer-events: none; } .loading-logo { width: 60px; animation: loading-pulse 1.5s ease-in-out infinite; } .loading-bar { width: 160px; height: 2px; background: rgba(255,255,255,0.1); border-radius: 2px; overflow: hidden; } .loading-bar-fill { height: 100%; background: linear-gradient(90deg, transparent, var(--pp-gold), transparent); animation: loading-sweep 1.2s ease-in-out infinite; } @keyframes loading-pulse { 0%,100%{opacity:1} 50%{opacity:.5} } @keyframes loading-sweep { from{transform:translateX(-100%)} to{transform:translateX(100%)} } /* ── 17. RTL OVERRIDES ───────────────────────────────────────── */ [dir="rtl"] { text-align: right; } [dir="rtl"] .flex { flex-direction: row-reverse; } [dir="rtl"] .space-x-4 > * + * { margin-right: 1rem; margin-left: 0; } [dir="rtl"] .mr-2 { margin-right: 0; margin-left: 0.5rem; } [dir="rtl"] .ml-2 { margin-left: 0; margin-right: 0.5rem; } [dir="rtl"] .pl-4 { padding-left: 0; padding-right: 1rem; } [dir="rtl"] .pr-4 { padding-right: 0; padding-left: 1rem; } [dir="rtl"] .text-left { text-align: right; } [dir="rtl"] .text-right { text-align: left; } [dir="rtl"] .rounded-l-lg { border-radius: 0 var(--r-lg) var(--r-lg) 0; } [dir="rtl"] .rounded-r-lg { border-radius: var(--r-lg) 0 0 var(--r-lg); } [dir="rtl"] .border-l { border-left: none; border-right-width: 1px; } [dir="rtl"] .border-r { border-right: none; border-left-width: 1px; } /* Dropdown RTL */ [dir="rtl"] .dropdown-menu { right: auto; left: 0; } /* ── 18. SCROLL BAR PREMIUM ──────────────────────────────────── */ ::-webkit-scrollbar { width: 6px; height: 6px; } ::-webkit-scrollbar-track { background: var(--pp-off-white); } ::-webkit-scrollbar-thumb { background: var(--pp-text-muted); border-radius: 3px; } ::-webkit-scrollbar-thumb:hover { background: var(--pp-navy); } /* ── 19. SELECTION COLOR ─────────────────────────────────────── */ ::selection { background: rgba(201,168,76,0.2); color: var(--pp-navy); } /* ── 20. FOCUS VISIBLE (accessibility) ──────────────────────── */ :focus-visible { outline: 2px solid var(--pp-gold); outline-offset: 3px; border-radius: 3px; } /* ── 21. RESPONSIVE ──────────────────────────────────────────── */ @media (max-width: 768px) { :root { --space-xl: 24px; --space-2xl: 40px; --space-3xl: 60px; } .section-title { font-size: 22px; } #toast-container { bottom: 16px; right: 16px; left: 16px; } .toast-item { max-width: 100%; } [dir="rtl"] #toast-container { left: 16px; right: 16px; } } /* ── 22. PRINT ───────────────────────────────────────────────── */ @media print { .navbar, footer, #toast-container, #loading-overlay { display: none !important; } body { background: white; color: black; } }