/* ========================================================================== CUSTOM.CSS - Per-Company Customization ========================================================================== This file is loaded AFTER style.css and overrides the default theme. Each company gets their own copy of this file. INSTRUCTIONS: - Change ONLY the :root variables below to customize colors - Add company-specific overrides in Section 2 - DO NOT edit style.css - it is shared across all installations ========================================================================== */ /* ========================================================================== 1. COLOR VARIABLES ========================================================================== Change these to match company branding. These variables control ALL colors across every page. ========================================================================== */ :root { /* ----------------------------------------------------------------- ACCENT COLORS - MAIN (changes 90% of the look) ----------------------------------------------------------------- Used in: icons, buttons, links, headers, badges, price values, info panels, booking tabs, summary totals, footer Files: ALL pages + JS files ----------------------------------------------------------------- */ /* === PRESET: Green (default) === */ --accent-color:#939393; --accent-color-dark:#939393; --accent-color-light: #66BB6A; --accent-color-mid: #34d399; /* === PRESET: Yellow (uncomment to activate, comment Green above) === --accent-color: #ffcb08; --accent-color-dark: #ffcb08; --accent-color-light: #ffd633; --accent-color-mid: #ffcb08; */ /* ----------------------------------------------------------------- ACCENT TRANSPARENT VARIANTS ----------------------------------------------------------------- Used in: glow effects, subtle backgrounds, borders on confirmation/booking info pages (glass dark theme) HOW TO CHANGE: If your accent is BLUE (#3b82f6 = rgb 59,130,246) replace "52, 211, 153" with "59, 130, 246" everywhere below, and "16, 185, 129" with "37, 99, 235" (darker blue). ----------------------------------------------------------------- */ --accent-glow-strong: rgba(52, 211, 153, 1); /* Icon pulse animation peak */ --accent-glow: rgba(52, 211, 153, 0.7); /* Icon glow, drop-shadow */ --accent-glow-soft: rgba(52, 211, 153, 0.45); /* Card header icon glow */ --accent-glow-dim: rgba(52, 211, 153, 0.35); /* Grand total text-shadow */ --accent-glow-faint: rgba(52, 211, 153, 0.08); /* Grand total box-shadow */ --accent-bg-subtle: rgba(52, 211, 153, 0.14); /* Vehicle category badge bg */ --accent-bg-glass: rgba(16, 185, 129, 0.10); /* Grand total panel bg */ --accent-bg-radial: rgba(52, 211, 153, 0.18); /* Banner shimmer effect */ --accent-border-subtle: rgba(52, 211, 153, 0.22); /* Category badge border */ --accent-border-medium: rgba(52, 211, 153, 0.30); /* Grand total panel border */ --accent-text-85: rgba(52, 211, 153, 0.85); /* Payment method text */ --accent-text-70: rgba(52, 211, 153, 0.70); /* Payment label text */ /* ----------------------------------------------------------------- ACTION BUTTONS --warning: "Book Now" / "Select" button on vehicle cards --error: Strikethrough prices (old price), validation errors --success: Success messages, web check-in success gradient Files: script14-core.js, script14-booking.js, web_check_in ----------------------------------------------------------------- */ --warning: #F59E0B; /* Amber - Book Now button */ --error: #EF4444; /* Red - strikethrough prices */ --success: #10B981; /* Green - success states */ --success-dark: #059669; /* Dark green - success gradient */ /* ----------------------------------------------------------------- TOP NAVIGATION BAR Files: navigation.php (.top-nav-bar) ----------------------------------------------------------------- */ --topbar-bg: #403f41; /* ----------------------------------------------------------------- TEXT COLORS Files: All pages ----------------------------------------------------------------- */ --text-color: #333; /* Main body text */ --text-muted: #6c757d; /* Labels, secondary text */ /* ----------------------------------------------------------------- BACKGROUNDS Files: All pages ----------------------------------------------------------------- */ --light-bg: #f8f9fa; /* Page background */ --white: #ffffff; /* Cards, panels */ --dark-bg: #343a40; /* Dark sections, header */ /* ----------------------------------------------------------------- BORDERS Files: Vehicle cards, form elements ----------------------------------------------------------------- */ --border-color: #e2e8f0; /* Card borders, dividers */ /* ----------------------------------------------------------------- FLATPICKR DATE PICKER Files: index.php, vehicle.results.php ----------------------------------------------------------------- */ --flatpickr-hover-bg: #ecba00; /* Day hover background */ --flatpickr-hover-text: #393939; /* Day hover text */ /* ----------------------------------------------------------------- SEARCH FORM (Neumorphic style - index.php) Files: index.php, style.css Section 6 ----------------------------------------------------------------- */ --neumorphic-bg: #f0f2f5; --shadow-light: #ffffff; --shadow-dark: #d1d9e6; /* ----------------------------------------------------------------- FORM INPUTS Files: All forms ----------------------------------------------------------------- */ --form-bg: var(--white); --form-text: var(--text-color); --form-label: #555; } /* ========================================================================== 2. COMPANY-SPECIFIC OVERRIDES (Optional) ========================================================================== Add any CSS rules that go beyond variable changes. COMMON CUSTOMIZATIONS: ========================================================================== */ /* --- Book Now button style --- */ /* .ez-book-btn { border-radius: 20px; font-size: 14px; } */ /* --- Price display size --- */ /* .ez-price-value { font-size: 28px; } */ /* .ez-price-value--large { font-size: 32px; } */ /* --- Vehicle card corners --- */ /* .vehicle-card { border-radius: 10px; } */ /* --- Topbar logo size --- */ /* .ez-topbar-logo { max-height: 50px; } */ /* --- Navigation link hover --- */ /* .ez-nav-link:hover { color: var(--accent-color-light) !important; } */ /* ========================================================================== QUICK REFERENCE: ez- Classes and where they appear ========================================================================== CLASS WHAT IT STYLES FILE(S) --------------------------- -------------------------------- -------------------------- .ez-accent-text Icon/text accent color All JS + PHP files .ez-accent-bg Background accent color index.php .ez-accent-gradient Gradient button background script14-booking-tab3.js .ez-accent-link Accent colored links script14-booking-tab3.js .ez-pricing-container Right panel of vehicle card script14-core.js .ez-pricing-grid 2-column price layout script14-core.js .ez-pricing-single 1-column price layout script14-core.js .ez-price-card Individual price box script14-core.js .ez-price-card--active Active price box (accent border) script14-core.js .ez-price-card--muted Inactive price box (gray border) script14-core.js .ez-price-label "TOTAL PRICE" label script14-core.js .ez-price-original Strikethrough old price script14-core.js .ez-price-value Main price number script14-core.js .ez-price-value--large Large price (single column) script14-core.js .ez-price-txt Deposit description text script14-core.js .ez-price-strike Max charge exceeded strike script14-booking.js .ez-deposit-label "DEPOSIT REQUIRED" label script14-core.js .ez-deposit-value Deposit amount number script14-core.js .ez-book-btn "Book Now" / "Select" button script14-core.js .ez-btn-next "Next" tab button script14-booking.js .ez-btn-submit "Complete Booking" button script14-booking.js .ez-badge Duration/subtotal badges script14-booking.js .ez-info-header Info panel headers (pickup etc) script14-booking.js .ez-summary-total Total price in summaries script14-booking.js + tab3 .ez-ins-price Insurance price display script14-booking.js + tab3 .ez-extra-icon Extras section icons script14-booking.js .ez-why-book-list "Why book with us" list index.php .ez-nav-link Navigation link hover navigation.php .ez-topbar-logo Logo in top bar navigation.php .ez-vehicle-img Vehicle image max-height script14-core.js .ez-confirm-vehicle-name Vehicle name on confirm pages booking.confirm/info.php .ez-confirm-prepaid-separator Prepaid amount divider booking.confirm/info.php .ez-confirm-pending-icon Pending status icon (amber) booking.info.php ========================================================================== */ /* ========================================================================== EXAMPLE: Blue Theme Override ========================================================================== Uncomment below to see a completely different color scheme: :root { --accent-color: #3b82f6; --accent-color-dark: #2563eb; --accent-color-light: #60a5fa; --accent-color-mid: #93c5fd; --accent-glow-strong: rgba(59, 130, 246, 1); --accent-glow: rgba(59, 130, 246, 0.7); --accent-glow-soft: rgba(59, 130, 246, 0.45); --accent-glow-dim: rgba(59, 130, 246, 0.35); --accent-glow-faint: rgba(59, 130, 246, 0.08); --accent-bg-subtle: rgba(59, 130, 246, 0.14); --accent-bg-glass: rgba(37, 99, 235, 0.10); --accent-bg-radial: rgba(59, 130, 246, 0.18); --accent-border-subtle: rgba(59, 130, 246, 0.22); --accent-border-medium: rgba(59, 130, 246, 0.30); --accent-text-85: rgba(59, 130, 246, 0.85); --accent-text-70: rgba(59, 130, 246, 0.70); --success-dark: #1d4ed8; --topbar-bg: #1e40af; --warning: #dc2626; --flatpickr-hover-bg: #dbeafe; --flatpickr-hover-text: #1e3a8a; } ========================================================================== */ /* 1. Αφαίρεση bold και ελαφρώς μικρότερη γραμματοσειρά στα labels */ .ez-sf-field label { font-weight: 600 !important; /* Κανονικό πάχος, όχι έντονο (bold) */ font-size: 0.73rem !important; /* Λίγο πιο μικρά γράμματα */ } /* 2. Περισσότερος «αέρας» (padding/margin) ανάμεσα στα διαφορετικά πεδία */ .ez-sf-field { margin-bottom: 12px !important; /* Δημιουργεί κενό κάτω από κάθε πεδίο */ } /* 3. Μείωση του ύψους στα πεδία (inputs και selects) */ .ez-sf-field input[type="text"], .ez-sf-field select { padding: 5px 10px !important; /* Μειώνουμε το πάνω-κάτω κενό σε 5px (ήταν 8px) */ font-size: 0.8rem !important; /* Ελάχιστα πιο μικρά τα γράμματα μέσα στο πεδίο για να ταιριάζουν */ } /* ========================================================================== 4. Στυλ για το κουτί των Φίλτρων (Ομοιομορφία με Modify Search) ========================================================================== */ /* ========================================================================== 4. Στυλ για το κουτί των Φίλτρων (Ομοιομορφία με Modify Search) ========================================================================== */ /* Το κεντρικό κουτί των φίλτρων */ #filterSidebar > div.bg-white.shadow-md { border-radius: 12px !important; box-shadow: 0 2px 12px rgba(0,0,0,0.08) !important; border: none !important; padding: 16px 18px !important; } /* Συγχρονισμός του τίτλου "Filters" */ #filterSidebar > div.bg-white h3 { font-size: 0.95rem !important; color: #334155 !important; padding-bottom: 10px !important; border-bottom: 1px solid #e2e8f0 !important; margin-bottom: 0 !important; /* Μηδενίζουμε το margin για να κλείσει το κενό */ } /* Μειώνουμε το κενό ανάμεσα στον τίτλο Filters και στο Price */ #filterSidebar .flex.justify-between.mb-4 { margin-bottom: 12px !important; } /* Στυλ για τα labels των κατηγοριών (Price, Seats, κλπ) - Ίδια με το Modify Search */ #filterSidebar h4 { font-size: 0.73rem !important; font-weight: 600 !important; color: #4a5568 !important; /* text-transform: uppercase;*/ letter-spacing: 0.5px; margin-bottom: 8px !important; } /* Γραμματοσειρά στις επιλογές (2, 4, Automatic, κλπ) - Ίδια με τα πεδία του Modify Search */ #filterSidebar label.flex.items-center { font-size: 0.8rem !important; color: #334155 !important; } /* Μειώνουμε το μεγάλο κενό κάτω από κάθε ενότητα φίλτρου */ #filterSidebar .mb-6 { margin-bottom: 16px !important; } /* VEHICLE-RESULT- pricing column width is now automatic. 1 option = 223px, 2+ options = 370px (set in style.css) Override here ONLY if this company needs custom widths: .ez-vehicle-col--pricing.ez-pricing-cols-1 { width: 200px !important; } .ez-vehicle-col--pricing.ez-pricing-cols-2 { width: 400px !important; } */ /* ========================================================================== 5. GRANULAR ACCENT COLOR OVERRIDES ========================================================================== These classes replaced the generic .ez-accent-text so each group of elements can have its own color per client. Default: color: var(--accent-color-dark) -- defined in style.css Here we override with different colors per client. To restore a single uniform color, delete this entire section and it falls back to var(--accent-color-dark) from style.css. ========================================================================== */ /* --- Feature Icons (seats, doors, gearbox, fuel, luggage, A/C) --- Where: 3x2 grid below the vehicle photo File: script14-core.js > buildVehicleFeaturesHtml() ----------------------------------------------------------------- */ .ez-feature-icon { color: #403f41; } /* -- separates specs from offers */ /* --- Offer Title ("Friendly service at the best price!" + gift icon) --- Where: Title in the left offers column File: script14-core.js > buildPriceIncludesSection() ----------------------------------------------------------------- */ .ez-offer-title { color: #ffcb08; } /* Gold/yellow -- matches gift/promo feel */ /* --- Offer Check Icons (checkmarks in offers & price-includes lists) --- Where: Check icons next to each offer/include item File: script14-core.js > buildPriceIncludesSection() + hidden features ----------------------------------------------------------------- */ .ez-offer-icon { color: #42624e; } /* -- "included" / "yes" meaning */ /* --- View More / View All Features toggle links --- Where: Below offers list + below features grid File: script14-core.js > createVehicleCard() ----------------------------------------------------------------- */ .ez-viewmore-link { color: #ffcb08; } /* -- looks like a link/action */ /* --- Search Summary Bar Icons (location, calendar, clock) --- Where: Bar below navigation, above results File: vehicle.results.php > search summary bar HTML ----------------------------------------------------------------- */ .ez-searchbar-icon { color: #ffcb08; } /* Gold -- matches motorclub branding */ /* --- Info Panel Icons (dates, group, model in booking tabs) --- Where: Info panels (Pick-up, Drop-off, Vehicle Info) File: script14-booking.js > generateInfoPanelsHtml() ----------------------------------------------------------------- */ .ez-info-icon { color: #ffcb08; } /* -- subtle, does not steal focus */ /* --- Tab Section Header Icons (shield, receipt, user, credit-card etc) --- Where: Section titles in booking tabs (Insurance, Extras, Summary etc) File: script14-booking.js + script14-booking-tab3.js ----------------------------------------------------------------- */ .ez-tab-icon { color: #d9d9d9; } /* Cyan/teal -- professional, distinct headers */ /* --- Optional Extras Icons & Price --- Where: Extras list (baby seat, GPS etc) File: script14-core.js > renderOptionalExtras() ----------------------------------------------------------------- */ .ez-extras-icon { color: #8b5cf6; } /* Purple -- distinguishes paid extras */ .ez-extras-price { color: #8b5cf6; } /* Purple -- same as icon for consistency */ /* --- Insurance Price --- Where: The price amount on insurance cards File: script14-core.js > renderInsurancePackages() ----------------------------------------------------------------- */ .ez-insurance-price { color: #0891b2; } /* Cyan/teal -- same as tab headers */ /* EXTRA colors AD */ .form-group label i { color: #d9d9d9; } .includes-box ul li i { color: #ffcb02; } .booking-form button { background-color: #ffcb02; } .ez-accent-text { color: #939393 !important; } .ez-book-btn { background: #ffcb08; } .ez-feature-icon { color: #939393; } .ez-price-value{ color: #e7bd4a; } .ez-sf-field label i { color: #939393; } .ez-sf-submit{ background: #ffcb08; box-shadow: 0 4px 10px rgb(175 175 175 / 0%)!important; } .ez-ins-card--selected { border-color: #e7bd18 !important; } .ez-btn--selected { background: #ffcb08 !important; } .ez-extra-item { border: 1px solid #ffcb08; } .ez-extra-icon { color: #ffcb08; } .ez-summary-total { color: #ffcb08; } .ez-tab-icon { color: #ffcb08; } .floating-label-input input:focus + label, .floating-label-input input:not(:placeholder-shown) + label, .floating-label-input select:focus + label, .floating-label-input select:not([value=""]) + label { color: #ffcb08; } .ez-accent-link { color: #ffcb08; } .ez-btn-next, .ez-btn-submit { background-color: #ffcb08; } .confirm-card-header h3 i { color: #ffcb02; filter: drop-shadow(0 0 6px rgb(255 255 255 / 47%)); } .ez-fleet-price-card { border: 2px solid #ffcb02; } .ez-fleet-book-btn { background: #ffcb02!important; } .mf-submit { background: #ffcb02; } .model-form-title i { color: #ffcb02; } .model-price-amount { color: #ffcb02; } .model-category-badge{ background: #ffcb02; } .model-title-divider{ background: #ffcb02; } .model-includes-list li i { color: #ffcb02; } .ez-sf-header h3 i{ color: #e7bd4a; } .ez-fleet-price-value { color: #ffcb08; } .border-green-500 { border-color: rgb(255 203 8)!important; } .affiliateStepDot.active i, .affiliateStepDot.done i { background: #ffc904; } .affiliateSectionTitle i { color: #ffc904; } .ez-accent-text { color: #ffcb02 !important; } .ez-price-card--active { border-color: #ffcb08!important; } .ez-price-card--selected { background-color: #ffcb080f !important; } .ez-accent-gradient { background: linear-gradient(135deg, #ffcb08 0%, #ffcb08 100%); } .ez-book-btn{ box-shadow: 0 4px 10px rgb(34 197 94 / 0%)!important; } .ez-category-pill--active { background: rgb(255 203 8 / 14%)!important; } .ez-category-pill--active:hover { background: rgb(251 245 219)!important; } .form-group button:hover{ box-shadow: 0 10px 18px rgb(34 197 94 / 0%)!important; } .form-group input[type="text"], .form-group input[type="date"], .form-group input[type="time"], .form-group select { box-shadow: 0 10px 18px rgb(34 197 94 / 0%)!important; } .flatpickr-months{ background-color:#ffcb02; } .flatpickr-day:hover{ background-color: #ffde5d; } .flatpickr-day.selected, .flatpickr-day.startRange, .flatpickr-day.endRange, .flatpickr-day.selected.inRange, .flatpickr-day.startRange.inRange, .flatpickr-day.endRange.inRange, .flatpickr-day.selected:focus, .flatpickr-day.startRange:focus, .flatpickr-day.endRange:focus, .flatpickr-day.selected:hover, .flatpickr-day.startRange:hover, .flatpickr-day.endRange:hover, .flatpickr-day.selected.prevMonthDay, .flatpickr-day.startRange.prevMonthDay, .flatpickr-day.endRange.prevMonthDay, .flatpickr-day.selected.nextMonthDay, .flatpickr-day.startRange.nextMonthDay, .flatpickr-day.endRange.nextMonthDay{ background: #ffcb02; border-color: #ffde5d; } footer .footer-link-item::before{ background-color: rgb(255 214 93); } footer .border-custom-accent\/30 { border-color: rgb(255 214 93 / 28%); } footer .hover\:text-custom-accent:hover { color: #ffcb02; } .ez-fleet-price-card:hover { box-shadow: 0 4px 15px rgb(255 203 2 / 35%); } .mf-field select:focus, .mf-field input[type="text"]:focus { box-shadow: 0 0 0 2px rgb(255 222 93 / 0%); } .ez-sort-select{ box-shadow: 0 10px 18px rgb(34 197 94 / 0%)!important; } .peer:checked ~ .ez-toggle-checked { background-color: #ffcb08 !important; } .confirm-banner::before{ background: radial-gradient(ellipse at 30% 40%, rgb(52 211 153 / 0%) 0%, transparent 55%), radial-gradient(ellipse at 75% 60%, rgba(59, 130, 246, 0.12) 0%, transparent 55%); } #affiliateBenefitsTitle i, #affiliateFormTitle i { color: #ffcb02c2; } .affiliateFeatureBox:hover{ background: rgb(255 201 4 / 14%); border-color: rgb(255 201 4 / 18%); } .affiliateNextBtn:hover{ box-shadow: 0 10px 20px rgb(34 197 94 / 0%); } .affiliateNextBtn{ box-shadow: 0 10px 20px rgb(34 197 94 / 0%); } .confirm-new-booking{ background: rgb(224 182 21); } .booking-form-wrapper{ background: rgb(0 0 0 / 15%); } .includes-box{ background: rgb(0 0 0 / 15%); } .top-nav-bar { background-color: #ffca0e; } header.bg-gray-950.text-gray-300.shadow-sm.sticky.top-0.z-50 { background-color: #403f41; } footer.bg-gray-950.text-gray-300.py-12.relative.overflow-hidden.font-sans{ background-color: #403f41; } footer .text-custom-accent { color: #ffcb02; } .confirm-banner-title i{ color: #05c530; animation: none; } .confirm-card{ background: rgb(15 23 42 / 0%); } #manageBookingPage .mb-label i { color: #ffca0e; } #manageBookingPage .mb-card-header h2 i { color: #ffca0e; } #managebooking2 .booking-details-wrapper .text-green-600, #managebooking2 .booking-details-wrapper .text-green-500 { color: #ffcb08 !important; } #managebooking2 .booking-details-wrapper .text-green-700.font-bold { color: #ffffff !important; } #managebooking2 .booking-details-wrapper .text-blue-600, #managebooking2 .booking-details-wrapper i.text-blue-600 { color: #ffcb02 !important; } #managebooking2 .booking-details-wrapper .text-blue-700 { color: #ffffff !important; } #managebooking2 .booking-details-wrapper .text-green-600.bg-green-50 { background: rgb(4 124 48 / 96%) !important; color: #ffffff !important; } #managebooking2 .booking-details-wrapper .border-gray-300 i.text-gray-500 { color: #ffcb02 !important; } #managebooking2 .booking-details-wrapper .bg-gray-50, #managebooking2 .booking-details-wrapper .bg-green-50:not(.p-3) { background: rgb(0 0 0 / 6%) !important; } #managebooking2 .booking-details-wrapper .bg-white { background: #00000021 !important; } #managebooking2 .booking-details-wrapper .bg-green-50 .text-xl.font-extrabold { color: #ffffff !important; } #manageBookingPage .mb-btn:hover { box-shadow: 0 6px 20px rgb(255 255 255 / 35%); } .ez-clear-filters-btn{ background: #ffcb08; color: #fff; }