/* ========================================================================== 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 ----------------------------------------------------------------- */ --accent-color: #22c55e; /* Light green - calendar, form borders */ --accent-color-dark: #16a34a; /* Dark green - primary accent, footer */ --accent-color-light: #66BB6A; /* Lighter green - button hover */ --accent-color-mid: #34d399; /* Medium green - confirmation pages */ /* ----------------------------------------------------------------- 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: #59b55d; /* ----------------------------------------------------------------- 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: #bbf7d0; /* Day hover background */ --flatpickr-hover-text: #166534; /* 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; }