/* ============================================================================ AbuJudom UI Enhancements (May 2026) Standalone, additive stylesheet. Does NOT override existing classes. All custom classes are prefixed with "aj-" to avoid conflicts. What's inside: 1. CSS variables + dark mode tokens 2. Dark mode (opt-in via body.aj-dark) 3. Scroll-reveal animations (.aj-reveal, .aj-reveal-up, .aj-reveal-zoom) 4. Modern card hover (.aj-card-hover) 5. Sticky shrinking header (.aj-sticky-header on the existing header) 6. Loading skeletons (.aj-skeleton, .aj-skeleton-card) 7. Floating action button + back-to-top 8. Print stylesheet for property detail pages (saves ink, prints clean) ============================================================================ */ :root { --aj-primary: #d4a017; --aj-primary-dark: #b48010; --aj-bg: #ffffff; --aj-bg-soft: #f7f8fa; --aj-bg-card: #ffffff; --aj-text: #1f2937; --aj-text-muted: #6b7280; --aj-border: #e5e7eb; --aj-shadow: 0 4px 12px rgba(15, 23, 42, 0.06); --aj-shadow-hover: 0 12px 28px rgba(15, 23, 42, 0.14); --aj-radius: 10px; --aj-transition: 280ms cubic-bezier(.2, .8, .2, 1); } /* ---------- 1. DARK MODE (opt-in) ---------- Activated when has class "aj-dark". Toggled by abujudom-enhancements.js / persisted via localStorage. */ body.aj-dark { --aj-bg: #0f172a; --aj-bg-soft: #1e293b; --aj-bg-card: #1e293b; --aj-text: #e5e7eb; --aj-text-muted: #94a3b8; --aj-border: #334155; --aj-shadow: 0 4px 12px rgba(0, 0, 0, 0.4); --aj-shadow-hover: 0 12px 28px rgba(0, 0, 0, 0.6); background: var(--aj-bg); color: var(--aj-text); } body.aj-dark .gray-bg, body.aj-dark .listing-item, body.aj-dark .geodir-category-listing, body.aj-dark .box-widget, body.aj-dark .main-header, body.aj-dark .geodir-category-content, body.aj-dark footer { background-color: var(--aj-bg-card) !important; color: var(--aj-text) !important; border-color: var(--aj-border) !important; } body.aj-dark .list-single-main-item_content p, body.aj-dark .geodir-category-content h3, body.aj-dark .geodir-category-content_price, body.aj-dark h1, body.aj-dark h2, body.aj-dark h3, body.aj-dark h4, body.aj-dark h5, body.aj-dark h6 { color: var(--aj-text) !important; } body.aj-dark a:not(.color-bg):not(.btn) { color: #fbbf24; } body.aj-dark .main-search-input, body.aj-dark input[type="text"], body.aj-dark input[type="email"], body.aj-dark input[type="search"], body.aj-dark input[type="number"], body.aj-dark select, body.aj-dark textarea { background: var(--aj-bg-soft) !important; color: var(--aj-text) !important; border-color: var(--aj-border) !important; } /* Smooth transition when toggling dark mode */ body, body * { transition: background-color var(--aj-transition), color var(--aj-transition), border-color var(--aj-transition); } /* ---------- 2. DARK MODE TOGGLE BUTTON ---------- Default position: bottom-LEFT (LTR) / bottom-RIGHT (RTL). The site already has a back-to-top of its own, so we keep this on the opposite side to avoid overlap. */ .aj-theme-toggle { position: fixed; bottom: 24px; left: 24px; z-index: 9998; width: 48px; height: 48px; border-radius: 50%; background: var(--aj-primary); color: #ffffff; border: none; box-shadow: var(--aj-shadow-hover); cursor: pointer; font-size: 20px; display: flex; align-items: center; justify-content: center; transition: transform var(--aj-transition), background var(--aj-transition); } .aj-theme-toggle:hover { transform: scale(1.1) rotate(15deg); background: var(--aj-primary-dark); } .aj-theme-toggle:focus-visible { outline: 3px solid #fbbf24; outline-offset: 2px; } html[dir="rtl"] .aj-theme-toggle { left: auto; right: 24px; } /* ---------- 3. SCROLL-REVEAL ANIMATIONS ---------- Add class .aj-reveal (or aj-reveal-up / aj-reveal-zoom) to any element. Element starts hidden, fades in when scrolled into view. No JS library needed - powered by IntersectionObserver in our enhancement JS. */ .aj-reveal, .aj-reveal-up, .aj-reveal-zoom { opacity: 0; transition: opacity 700ms cubic-bezier(.2, .8, .2, 1), transform 700ms cubic-bezier(.2, .8, .2, 1); will-change: opacity, transform; } .aj-reveal-up { transform: translateY(32px); } .aj-reveal-zoom { transform: scale(0.94); } .aj-reveal-left { transform: translateX(-32px); } .aj-reveal-right { transform: translateX(32px); } .aj-reveal.aj-revealed, .aj-reveal-up.aj-revealed, .aj-reveal-zoom.aj-revealed, .aj-reveal-left.aj-revealed, .aj-reveal-right.aj-revealed { opacity: 1; transform: none; } @media (prefers-reduced-motion: reduce) { .aj-reveal, .aj-reveal-up, .aj-reveal-zoom, .aj-reveal-left, .aj-reveal-right { opacity: 1 !important; transform: none !important; transition: none !important; } } /* ---------- 4. MODERN CARD HOVER ---------- Add class .aj-card-hover to property cards / listing items. */ .aj-card-hover { transition: transform var(--aj-transition), box-shadow var(--aj-transition); will-change: transform; } .aj-card-hover:hover { transform: translateY(-6px); box-shadow: var(--aj-shadow-hover); } .aj-card-hover img { transition: transform 600ms cubic-bezier(.2, .8, .2, 1); will-change: transform; } .aj-card-hover:hover img { transform: scale(1.06); } /* ---------- 5. STICKY SHRINKING HEADER ---------- Activated when gets class "aj-sticky-header" + "aj-shrunk". The enhancement JS adds aj-shrunk on scroll. */ header.main-header.aj-sticky-header { position: fixed !important; top: 0; left: 0; right: 0; z-index: 9000; transition: padding var(--aj-transition), background var(--aj-transition), box-shadow var(--aj-transition); } header.main-header.aj-sticky-header.aj-shrunk { padding-top: 6px; padding-bottom: 6px; background: rgba(255, 255, 255, 0.96); backdrop-filter: saturate(180%) blur(16px); -webkit-backdrop-filter: saturate(180%) blur(16px); box-shadow: 0 4px 20px rgba(15, 23, 42, 0.08); } header.main-header.aj-sticky-header.aj-shrunk .logo-holder img { transform: scale(0.85); transition: transform var(--aj-transition); } body.aj-dark header.main-header.aj-sticky-header.aj-shrunk { background: rgba(15, 23, 42, 0.92); } /* Add top padding to compensate for fixed header (only when sticky is active) */ body.aj-sticky-active { padding-top: 80px; } /* ---------- 6. LOADING SKELETONS ---------- Use .aj-skeleton on a div to show a shimmering placeholder. */ .aj-skeleton { background: linear-gradient(90deg, var(--aj-bg-soft) 25%, var(--aj-border) 50%, var(--aj-bg-soft) 75%); background-size: 200% 100%; animation: aj-skeleton-shimmer 1.4s ease-in-out infinite; border-radius: 6px; color: transparent !important; pointer-events: none; } @keyframes aj-skeleton-shimmer { 0% { background-position: 200% 0; } 100% { background-position: -200% 0; } } .aj-skeleton-card { height: 320px; border-radius: var(--aj-radius); } /* ---------- 7. (was: BACK-TO-TOP - REMOVED, site has its own) ---------- */ /* ---------- 8. PROGRESS BAR (page reading progress) ---------- */ .aj-progress { position: fixed; top: 0; left: 0; height: 3px; background: linear-gradient(90deg, var(--aj-primary), #fbbf24); z-index: 10000; transition: width 80ms linear; width: 0; } /* ---------- 9. PRINT STYLES (property details) ---------- */ @media print { .main-header, footer, .header-modal, .scroll-nav-wrap, .listing-carousel-wrapper, .breadcrumbs, .aj-theme-toggle, .aj-progress, .compare-top-btn, .like-btn, .share-holder { display: none !important; } body { background: #ffffff !important; color: #000000 !important; } .gallery-items { page-break-inside: avoid; } .list-single-main-wrapper { box-shadow: none !important; } } /* ---------- 10. KEYBOARD-FRIENDLY FOCUS STATES (a11y) ---------- */ a:focus-visible, button:focus-visible, [role="button"]:focus-visible, input:focus-visible, select:focus-visible, textarea:focus-visible { outline: 3px solid var(--aj-primary); outline-offset: 2px; border-radius: 4px; }