:root { --accent: #ffd700; } @keyframes spin3 { 0%, 100% { box-shadow: 10px 10px rgba(255, 255, 255, 1), -10px 10px rgba(255, 255, 255, 0.2), -10px -10px rgba(255, 255, 255, 1), 10px -10px rgba(255, 255, 255, 0.2); } 25% { box-shadow: -10px 10px rgba(255, 255, 255, 0.2), -10px -10px rgba(255, 255, 255, 1), 10px -10px rgba(255, 255, 255, 0.2), 10px 10px rgba(255, 255, 255, 1); } 50% { box-shadow: -10px -10px rgba(255, 255, 255, 1), 10px -10px rgba(255, 255, 255, 0.2), 10px 10px rgba(255, 255, 255, 1), -10px 10px rgba(255, 255, 255, 0.2); } 75% { box-shadow: 10px -10px rgba(255, 255, 255, 0.2), 10px 10px rgba(255, 255, 255, 1), -10px 10px rgba(255, 255, 255, 0.2), -10px -10px rgba(255, 255, 255, 1); } } #wpadminbar { top: 0 !important; } #c27-site-wrapper { background-color: #000000 }/* Make listing content blocks black */ body.single-listing .content-block { background-color: #000 !important; color: #fff !important; border-radius: 6px; border: 1px solid #333; padding: 20px; /* optional: keep spacing */ } /* Head section (title area) */ body.single-listing .content-block .pf-head { background-color: #111 !important; border-bottom: 1px solid #333; padding: 10px; } /* Text inside */ body.single-listing .content-block, body.single-listing .content-block * { color: #fff !important; } /* Style the Gallery block */ body.single-listing .gallery-carousel-block { background-color: #000 !important; color: #fff !important; border-radius: 6px; border: 1px solid #333; padding: 20px; } /* Header section (Gallery title + icons) */ body.single-listing .gallery-carousel-block .pf-head { background-color: #111 !important; border-bottom: 1px solid #333; padding: 10px; } /* Make text + icons white */ body.single-listing .gallery-carousel-block, body.single-listing .gallery-carousel-block * { color: #fff !important; fill: #fff !important; /* for SVGs if any */ } /* Gallery arrows default state */ body.single-listing .gallery-carousel-block i.mi.keyboard_arrow_left, body.single-listing .gallery-carousel-block i.mi.keyboard_arrow_right { background: #000 !important; /* black background */ color: #fff !important; /* white arrow */ border: 1px solid #333 !important; border-radius: 50% !important; font-size: 24px !important; padding: 8px !important; /* space inside circle */ display: inline-flex !important; align-items: center; justify-content: center; transition: all 0.3s ease-in-out; /* smooth hover effect */ } /* Hover state — highlight gold */ body.single-listing .gallery-carousel-block i.mi.keyboard_arrow_left:hover, body.single-listing .gallery-carousel-block i.mi.keyboard_arrow_right:hover { background: #ffd700 !important; /* gold background */ color: #000 !important; /* black arrow */ border-color: #ffd700 !important; } /* Force gallery item size */ /* Hide login/sign-in button in MyListing header */ /* Hide Sign in link and its icon in MyListing header */ /* Hide Sign in link and its icon in MyListing header */ .c27-header .user-area, .c27-header .header-login, .c27-header .open-login-modal, a[href*="my-account-2"], a[href*="my-account-2"] i { display: none !important; } } /* * CSS for forcing a listing card element into a portrait (taller than wide) aspect ratio. * * BASED ON: The "My Listing" theme structure provided by the user. * Target elements: .lf-item-container, .lf-item, .lf-background */ /* ========================================================= 1. CARD WIDTH OVERRIDES (to reduce the size by ~20-30%) ========================================================= */ /* Tiny Mobile View (xs - up to 480px): Still needs 1 card per row (100%) for usability. */ .grid-item.col-xs-12 { width: 100% !important; } /* Mobile/Tablet View (sm - 481px to 767px): 2 cards per row (50% width) We are restoring the default 50% width to reduce the size on mobile. */ .grid-item.col-sm-6 { width: 50% !important; /* Forces 2 cards per row on mobile/small tablet screens */ } /* Medium View (md - 768px to 1199px): 3 cards per row (33.33% width) We are restoring the default 33.33% width to reduce the size on desktop/tablet. */ @media (min-width: 768px) { .grid-item.col-md-4 { width: 33.3333% !important; /* Padding adjustments restored */ padding-left: 10px !important; padding-right: 10px !important; } } /* Large View (lg - 1200px and up): 3 cards per row (33.33% width) */ @media (min-width: 1200px) { .grid-item.col-lg-4 { width: 33.3333% !important; /* Padding adjustments restored */ padding-left: 15px !important; padding-right: 15px !important; } } /* ========================================================= 2. PORTRAIT ASPECT RATIO (3:4) - Still needed for shape ========================================================= */ .lf-item { /* Force portrait ratio: 3 units wide for every 4 units tall */ aspect-ratio: 3 / 4 !important; /* Crucial: Ensure the height is auto-calculated based on the aspect-ratio */ height: auto !important; /* Ensure the container is positioned correctly for overlays like lf-item-info */ position: relative; overflow: hidden; /* General Styling (Keeping the look consistent) */ background-color: #ffffff; border-radius: 12px; box-shadow: 0 6px 16px rgba(0, 0, 0, 0.1); transition: transform 0.2s ease; } /* Ensure the immediate parent doesn't restrict the height */ .lf-item-container { height: auto !important; max-height: none !important; } /* 3. Ensure the content inside the card fills the space */ .lf-item > a { height: 100% !important; width: 100%; display: flex; flex-direction: column; } /* 4. The Image Element (.lf-background) */ .lf-background { /* Ensure the background div fills the new portrait area */ height: 100% !important; width: 100% !important; flex-grow: 1; /* Ensure the background image covers the area without being tiled or distorted */ background-size: cover !important; background-position: center center !important; } /* 5. The Details Section (.lf-item-info) */ .lf-item-info { position: absolute; bottom: 0; width: 100%; z-index: 10; padding: 1rem; } /* Optional: Hover effect from previous version */ .lf-item:hover { transform: translateY(-2px); box-shadow: 0 10px 20px rgba(0, 0, 0, 0.15); }