/* ========================================================================== Al Amir Auto - style.css (v2.0 - Tailwind First) This file now only contains styles that are difficult or inconvenient to handle with Tailwind CSS classes directly in the HTML. ========================================================================== */ /* --- 1. Base & Custom Fonts --- */ body { /* Sets the main font for paragraphs and general text */ font-family: 'Roboto', sans-serif; /* The background color is now controlled by a class on the tag in the HTML */ } h1, h2, h3, h4, h5, h6 { /* Sets a bolder, more distinct font for all headings */ font-family: 'Oswald', sans-serif; letter-spacing: 0.5px; /* Adds a bit of space between letters for clarity */ } /* --- 2. Admin & Dynamic Element Styles --- */ /* Styles for the yellow highlight on editable fields in admin mode */ .editable-field { border: 1px dashed transparent; padding: 2px 4px; margin: -2px -4px; /* Offset padding to keep layout stable */ border-radius: 3px; transition: border-color 0.3s ease, background-color 0.3s ease; display: inline-block; /* Essential for proper editing flow */ min-width: 20px; } body.admin-edit-mode .editable-field { border-color: #fbbf24; /* Tailwind amber-400 */ background-color: #fffbeb; /* Tailwind amber-50 */ cursor: text; } body.admin-edit-mode .editable-field:hover { background-color: #fef3c7; /* Tailwind amber-100 */ } /* Pin icon on vehicle cards */ .pin-icon { cursor: pointer; color: #cbd5e1; /* Tailwind slate-300 */ filter: drop-shadow(1px 1px 1px rgba(0,0,0,0.3)); } .pin-icon:hover { color: #f59e0b; /* Tailwind amber-500 */ transform: scale(1.1); } .pin-icon.featured { color: #ef4444; /* Tailwind red-500 */ } /* --- 3. Modal & Gallery Styles --- */ /* The .modal container is the dark backdrop */ .modal { display: none; /* Hidden by default, shown by adding .active class */ position: fixed; inset: 0; background-color: rgba(0, 0, 0, 0.75); padding: 1rem; z-index: 60; overflow-y: auto; } .modal.active { display: flex; align-items: center; justify-content: center; } /* Main gallery image container inside the modal */ .gallery-main-image-container { position: relative; background-color: #f3f4f6; /* gray-100 */ } #modal-main-image { display: block; width: 100%; max-height: 60vh; object-fit: contain; /* Shows the whole image without cropping */ } /* Arrows for the gallery */ .gallery-arrow { position: absolute; top: 50%; transform: translateY(-50%); background-color: rgba(0, 0, 0, 0.5); color: white; border: none; padding: 0.5rem 0.75rem; border-radius: 9999px; cursor: pointer; font-size: 1.25rem; line-height: 1; z-index: 10; } .gallery-arrow:hover { background-color: rgba(0, 0, 0, 0.8); } .gallery-arrow.left { left: 0.5rem; } .gallery-arrow.right { right: 0.5rem; } /* Thumbnail styles */ .gallery-thumbnails { display: flex; flex-wrap: wrap; gap: 0.5rem; justify-content: center; padding: 0.5rem; border-top: 1px solid #e5e7eb; border-bottom: 1px solid #e5e7eb; background-color: #f9fafb; min-height: 76px; /* Ensures container has height even when empty */ } .thumbnail-item { width: 80px; height: 60px; cursor: pointer; border: 3px solid transparent; border-radius: 0.25rem; overflow: hidden; position: relative; /* For admin controls */ flex-shrink: 0; } .thumbnail-item img { width: 100%; height: 100%; object-fit: cover; } .thumbnail-item.active { border-color: #ef4444; /* red-500 */ } .thumbnail-item:hover { transform: scale(1.05); } /* Styles for SortableJS library */ .thumbnail-item.sortable-ghost { opacity: 0.4; background-color: #d1d5db; } .thumbnail-item.sortable-chosen { cursor: grabbing; } /* --- 4. Custom Polish & Effects --- */ /* A subtle transition for all elements that might change (color, transform, etc.) */ * { transition: all 0.2s ease-in-out; } /* A slightly softer shadow for cards and sections */ .shadow-custom { box-shadow: 0 4px 14px 0 rgba(0, 0, 0, 0.05); } .shadow-custom-lg { box-shadow: 0 10px 25px 0 rgba(0, 0, 0, 0.07); } /* Styling for the hero section background image */ .hero-bg { background-image: url('https://images.unsplash.com/photo-1552519507-da3b142c6e3d?q=80&w=2070&auto=format&fit=crop'); /* A great placeholder car image */ background-size: cover; background-position: center; background-attachment: fixed; /* Creates a cool parallax effect on scroll */ } /* A custom gradient for buttons to give them depth */ .btn-gradient { background-image: linear-gradient(to right, #c81e1e, #a01818); } .btn-gradient:hover { background-image: linear-gradient(to right, #a01818, #c81e1e); } .carousel-arrow { position: absolute; top: 50%; transform: translateY(-50%); background-color: rgba(0, 0, 0, 0.4); color: white; border: none; width: 44px; height: 44px; border-radius: 50%; cursor: pointer; font-size: 1.25rem; display: flex; align-items: center; justify-content: center; z-index: 10; transition: background-color 0.2s ease, transform 0.2s ease; } .carousel-arrow:hover { background-color: rgba(200, 30, 30, 0.8); /* Red on hover */ transform: translateY(-50%) scale(1.1); } .carousel-arrow.left { left: 1rem; } .carousel-arrow.right { right: 1rem; } .carousel-arrow.hidden { display: none; } /* The individual navigation dots at the bottom */ .carousel-dot { width: 12px; height: 12px; border-radius: 50%; background-color: rgba(255, 255, 255, 0.5); border: 1px solid rgba(0, 0, 0, 0.2); cursor: pointer; transition: background-color 0.3s ease, transform 0.3s ease; } .carousel-dot:hover { background-color: white; } .carousel-dot.active { background-color: #ef4444; /* Red color */ transform: scale(1.2); } /* Styles for each slide inside the carousel */ .carousel-slide { width: 100%; flex-shrink: 0; box-sizing: border-box; padding: 2rem; } .delete-icon { cursor: pointer; transition: color 0.2s ease-in-out, transform 0.2s ease-in-out; } .delete-icon:hover { color: #b91c1c !important; /* Tailwind red-800, using !important to override inline class */ transform: scale(1.1); } .archive-icon { cursor: pointer; transition: background-color 0.2s ease-in-out, color 0.2s ease-in-out, transform 0.2s ease-in-out; } .archive-icon:hover { transform: scale(1.1); }