/* ================================================================= DriveX.lk — LIGHT BRAND THEME (VISUAL LAYER ONLY) ----------------------------------------------------------------- White + DriveX Blue + DriveX Orange. Brand colours are sampled from the official DriveX logo (wp-content/uploads/2026/06/drivex-logo.png): BLUE #07367A (dominant pixel value of the logo mark) ORANGE #F96501 (dominant pixel value of the logo swoosh) This file ONLY restyles. It adds no markup, changes no behaviour, touches no PHP logic, no queries, no routes. It is loaded LAST so it re-points the existing design tokens the theme already uses; everything downstream (buttons, cards, forms) follows automatically. Rollback = remove the single wp_enqueue_style('dx-light-theme') call in functions.php, or restore the PRE_THEME_CHANGE_BACKUP archive. ================================================================= */ /* ----------------------------------------------------------------- 0. BRAND PALETTE + TOKEN REMAP The theme already drives ~90% of its colour through these tokens, so re-pointing them here converts the whole site consistently. `body.home` is included because dx-homepage-v2.css re-declares the same tokens at a higher specificity for the homepage. ----------------------------------------------------------------- */ :root, body.home { /* ---- Source of truth: the DriveX logo ---- */ --dx-blue: #07367A; --dx-blue-hi: #0A4A9E; --dx-blue-deep: #052A5F; --dx-blue-soft: #3E6FB8; --dx-blue-05: #F4F7FC; --dx-blue-10: #E8EFF9; --dx-blue-20: #D2E0F1; --dx-blue-rgb: 7,54,122; /* Orange has two tiers because the logo orange is only 3.05:1 on white. --dx-orange fills, icons, badges (white text sits on it) --dx-orange-deep LARGE orange text (4.1:1 — clears AA large) --dx-orange-text SMALL orange text (4.85:1 — clears AA normal) */ --dx-orange: #F96501; --dx-orange-hi: #FF8124; --dx-orange-deep: #D75300; --dx-orange-text: #C44A00; --dx-orange-05: #FFF5EE; --dx-orange-10: #FFE9DA; --dx-orange-rgb: 249,101,1; --dx-ink: #0E1C31; --dx-ink-2: #48596F; --dx-ink-3: #5E7089; --dx-line: #E3E9F2; --dx-line-2: #D2DCEA; /* ---- Re-point the existing theme tokens ---- */ --bg: #FFFFFF; --bg2: #F5F8FD; --bg3: #EDF3FA; --bg4: #E3EBF6; --card: #FFFFFF; --card2: #F8FAFE; --card-hover: #F4F8FE; --border: #E3E9F2; --border2: #D2DCEA; --border-hover: rgba(7,54,122,0.34); /* --text3 is the muted tier. #5E7089 clears WCAG AA (4.5:1) on white (5.05), on --bg2 (4.71) and on --bg3 (4.53); the lighter grey it replaced only reached 3.2–3.4 once the canvas turned white. */ --text: #0E1C31; --text2: #48596F; --text3: #5E7089; /* PRIMARY action colour = DriveX blue (dominant, per brand brief) */ --accent: #07367A; --accent2: #0A4A9E; --accent-dark: #052A5F; --accent-rgb: 7,54,122; /* Homepage-specific token names used by dx-homepage-v2.css */ --orange: #F96501; --orange2: #FF8124; --navy: #07367A; --navy2: #0A4A9E; --grad-cta: linear-gradient(135deg,#07367A 0%,#0A4A9E 100%); --grad-hero: linear-gradient(135deg,#07367A 0%,#0A4A9E 100%); --shadow-cta: 0 6px 20px rgba(7,54,122,0.26); --glow-cta: 0 0 24px rgba(7,54,122,0.16); /* Supporting colours, re-tuned for legibility on white */ --blue: #0A4A9E; --green: #0B7A44; --red: #C62828; --purple: #5B34B8; --blue-rgb: 10,74,158; --green-rgb: 11,122,68; --red-rgb: 198,40,40; --purple-rgb: 91,52,184; /* Soft, light-UI shadows — no more black glows */ --shadow-xs: 0 1px 2px rgba(14,28,49,0.05); --shadow-sm: 0 1px 3px rgba(14,28,49,0.07), 0 1px 2px rgba(14,28,49,0.04); --shadow: 0 4px 14px rgba(14,28,49,0.08), 0 1px 3px rgba(14,28,49,0.05); --shadow-md: 0 8px 26px rgba(14,28,49,0.10), 0 2px 6px rgba(14,28,49,0.05); --shadow-lg: 0 18px 46px rgba(14,28,49,0.13), 0 4px 12px rgba(14,28,49,0.06); --shadow-card: 0 1px 3px rgba(14,28,49,0.07), 0 1px 2px rgba(14,28,49,0.04); --shadow-float:0 20px 48px rgba(14,28,49,0.14); --shadow-gold: 0 6px 20px rgba(249,101,1,0.24); --shadow-glow: 0 6px 20px rgba(7,54,122,0.16); --shadow-glow-sm: 0 2px 10px rgba(7,54,122,0.12); /* Glass surfaces become frosted-white instead of frosted-black */ --glass-bg: rgba(255,255,255,0.72); --glass-border: rgba(7,54,122,0.10); /* Gradients that were gold-on-black */ --grad-gold: linear-gradient(135deg,#F96501 0%,#FF8124 100%); --grad-blue: linear-gradient(135deg,#07367A 0%,#0A4A9E 100%); --grad-green: linear-gradient(135deg,#0F9D58 0%,#12B366 100%); --grad-red: linear-gradient(135deg,#D93B3B 0%,#F96501 100%); --grad-purple: linear-gradient(135deg,#6D46C8 0%,#8B67E0 100%); --grad-mesh: none; } /* ----------------------------------------------------------------- 1. PAGE CANVAS ----------------------------------------------------------------- */ html { background: #FFFFFF; } body, body.home { background: #FFFFFF; background-image: none; color: var(--dx-ink); } body::selection, ::selection { background: rgba(7,54,122,0.14); color: var(--dx-ink); } /* The old dark decorative layers (aurora mesh, dot grid, glow orbs) */ body.home .al-hero::before, body.home .al-hero::after { background: none !important; background-image: none !important; } .al-hero-orbs, .al-orb-1, .al-orb-2, .al-orb-3 { display: none !important; } /* Scrollbar */ ::-webkit-scrollbar-track { background: var(--dx-blue-05); } ::-webkit-scrollbar-thumb { background: #C3D0E2; border-radius: 99px; } ::-webkit-scrollbar-thumb:hover { background: var(--dx-blue-soft); } /* ----------------------------------------------------------------- 2. TYPOGRAPHY — hierarchy on a light canvas ----------------------------------------------------------------- */ h1,h2,h3,h4,h5,h6, .al-section-title, .al-hero h1 { color: var(--dx-ink); } h1,h2,.al-section-title { letter-spacing: -0.028em; } h3,h4 { letter-spacing: -0.018em; } /* The highlighted word inside section titles / hero = DriveX ORANGE accent */ .al-section-title span, .al-hero h1 .highlight, body.home .al-hero h1 .highlight, .al-logo-accent, body.home .al-logo-accent, .al-footer-logo span, body.home .al-footer-logo span { background: none !important; -webkit-background-clip: initial !important; background-clip: initial !important; -webkit-text-fill-color: var(--dx-orange-deep) !important; color: var(--dx-orange-deep) !important; filter: none !important; } /* Only the nav logo plate sits on navy, where the bright logo orange is correct. The footer wordmark fallback sits on a light surface, so it keeps the accessible orange tier set above. */ .al-nav .al-logo .al-logo-accent { -webkit-text-fill-color: var(--dx-orange) !important; color: var(--dx-orange) !important; } /* Archive page titles mark their highlight word with an inline `color:var(--accent)` span. Now that --accent is blue that word matched the heading, losing the emphasis, so the highlight role is unified to the orange accent used by the hero and section titles. */ h1 > span[style*="color:var(--accent)"], h1 > span[style*="color: var(--accent)"], h2 > span[style*="color:var(--accent)"], h2 > span[style*="color: var(--accent)"] { color: var(--dx-orange-deep) !important; -webkit-text-fill-color: var(--dx-orange-deep) !important; } /* Body / muted copy */ .al-hero-sub, body.home .al-hero-sub, .al-section-sub { color: var(--dx-ink-2) !important; } small, .al-muted { color: var(--dx-ink-3); } /* ----------------------------------------------------------------- 3. HEADER — white bar, navy logo plate, blue + orange actions The logo file is NOT modified. Its wordmark is white, so it sits on a small DriveX-navy plate to stay legible on the white header. ----------------------------------------------------------------- */ .al-nav, body.home .al-nav { background: rgba(255,255,255,0.94) !important; backdrop-filter: blur(18px) saturate(1.15); -webkit-backdrop-filter: blur(18px) saturate(1.15); border-bottom: 1px solid var(--dx-line) !important; box-shadow: 0 1px 3px rgba(14,28,49,0.05) !important; } /* --- Navy logo plate --- */ .al-nav .al-logo { display: inline-flex; align-items: center; background: var(--dx-blue); padding: 7px 12px; border-radius: 10px; box-shadow: 0 2px 8px rgba(7,54,122,0.20); transition: box-shadow .2s ease, transform .2s ease; } .al-nav .al-logo:hover { box-shadow: 0 4px 14px rgba(7,54,122,0.30); transform: translateY(-1px); } .al-nav .al-logo .al-logo-img { height: 30px !important; } /* Text fallback (when no logo image is set) stays readable on the plate */ .al-nav .al-logo .al-logo-text { color: #FFFFFF !important; -webkit-text-fill-color: #FFFFFF !important; background: none !important; } .al-nav .al-logo .al-logo-accent { color: var(--dx-orange) !important; -webkit-text-fill-color: var(--dx-orange) !important; } @media (max-width: 768px) { .al-nav .al-logo { padding: 6px 9px; border-radius: 9px; } .al-nav .al-logo .al-logo-img { height: 26px !important; } } /* --- Nav links --- */ .al-nav-link { color: var(--dx-ink-2) !important; font-weight: 600; } .al-nav-link:hover { color: var(--dx-blue) !important; background: var(--dx-blue-05) !important; } .al-nav-link.active { color: var(--dx-blue) !important; background: var(--dx-blue-10) !important; } .al-nav-link.active::after { background: var(--dx-orange) !important; } /* Header icons (messages, etc.) */ .al-hdr-msg { color: var(--dx-ink-2) !important; } .al-hdr-msg:hover { color: var(--dx-blue) !important; background: var(--dx-blue-05) !important; } .al-hdr-msg-badge { background: var(--dx-orange) !important; color: #fff !important; } /* Mobile menu / hamburger */ .al-mobile-toggle, .al-nav-toggle { color: var(--dx-ink) !important; } .al-mobile-menu, .al-mobile-nav { background: #FFFFFF !important; border-color: var(--dx-line) !important; box-shadow: var(--shadow-lg) !important; } .al-mobile-menu a, .al-mobile-nav a { color: var(--dx-ink) !important; border-color: var(--dx-line) !important; } .al-mobile-menu a:hover, .al-mobile-nav a:hover { background: var(--dx-blue-05) !important; color: var(--dx-blue) !important; } /* User dropdown */ .al-user-dropdown { background: #FFFFFF !important; border: 1px solid var(--dx-line) !important; box-shadow: var(--shadow-lg) !important; transition: opacity .18s ease, transform .18s ease; } .al-dropdown-item { color: var(--dx-ink-2) !important; } .al-dropdown-item:hover { background: var(--dx-blue-05) !important; color: var(--dx-blue) !important; } /* ----------------------------------------------------------------- 4. HERO — white fading into a soft blue-grey ----------------------------------------------------------------- */ .al-hero, body.home .al-hero { background: linear-gradient(180deg, #FFFFFF 0%, #F4F8FD 48%, #EAF1FA 100%) !important; border-bottom: 1px solid var(--dx-line); } .al-hero h1, body.home .al-hero h1 { color: var(--dx-ink) !important; } /* Hero eyebrow badge — orange accent pill */ .al-hero-badge, body.home .al-hero-badge { background: var(--dx-orange-05) !important; border: 1px solid rgba(249,101,1,0.28) !important; color: var(--dx-orange-text) !important; box-shadow: none !important; } .al-hero-badge .al-badge-icon { background: var(--dx-orange) !important; color: #fff !important; } .al-hero-badge-ai::before, .al-hero-badge-ai::after { opacity: .35 !important; } /* Eyebrows used across sections — small text, so the deeper orange tier */ .dx-eyebrow, .dx-eyebrow-gold { background: var(--dx-orange-05) !important; border: 1px solid rgba(249,101,1,0.26) !important; color: var(--dx-orange-text) !important; } /* ----------------------------------------------------------------- 5. SEARCH CARD — white card, soft blue border, blue tabs & button ----------------------------------------------------------------- */ .al-search-box, body.home .al-search-box, .dx-search-form { background: #FFFFFF !important; border: 1px solid var(--dx-blue-20) !important; border-radius: 16px !important; box-shadow: 0 10px 30px rgba(7,54,122,0.08), 0 2px 6px rgba(14,28,49,0.04) !important; } /* Tab strip */ .al-search-tabs { background: var(--dx-blue-05) !important; border-radius: 12px; } .al-search-tab { color: var(--dx-ink-2) !important; background: transparent !important; transition: background .18s ease, color .18s ease, box-shadow .18s ease; } .al-search-tab:hover { color: var(--dx-blue) !important; background: var(--dx-blue-10) !important; } .al-search-tab.active, body.home .al-search-tab.active { background: var(--dx-blue) !important; background-image: linear-gradient(135deg,#07367A 0%,#0A4A9E 100%) !important; color: #FFFFFF !important; box-shadow: 0 2px 10px rgba(7,54,122,0.28) !important; } /* Field labels */ .al-field label, .al-field-label, .dx-sf-label { color: var(--dx-ink-3) !important; font-weight: 700; letter-spacing: .04em; } /* ----------------------------------------------------------------- 6. FORM CONTROLS — clean white inputs everywhere ----------------------------------------------------------------- */ input[type="text"], input[type="email"], input[type="tel"], input[type="number"], input[type="password"], input[type="search"], input[type="url"], input[type="date"], input[type="time"], select, textarea, .al-input, .al-select, .al-textarea, .al-field input, .al-field select, .al-field textarea, .dx-sf-control, .dx-sf-control select, .dx-adv-input { background: #FFFFFF !important; color: var(--dx-ink) !important; border: 1px solid var(--dx-line-2) !important; border-radius: 10px !important; transition: border-color .16s ease, box-shadow .16s ease, background .16s ease; } input::placeholder, textarea::placeholder { color: #9AA9BE !important; opacity: 1; } input:focus, select:focus, textarea:focus, .al-input:focus, .al-select:focus, .al-textarea:focus, .al-field input:focus, .al-field select:focus, .al-field textarea:focus, body.home .al-field select:focus, body.home .al-field input:focus, .dx-sf-control:focus, .dx-adv-input:focus { border-color: var(--dx-blue) !important; box-shadow: 0 0 0 3px rgba(7,54,122,0.12) !important; background: #FFFFFF !important; outline: none !important; } /* Native dropdown options were painted dark */ select option, .dx-sf-control select option { background: #FFFFFF !important; color: var(--dx-ink) !important; } /* Checkbox / radio accent */ input[type="checkbox"], input[type="radio"] { accent-color: var(--dx-blue); } /* Toggles */ .al-checkbox-toggle.on { background: var(--dx-blue) !important; } .al-checkbox-toggle.on .al-toggle-thumb { background: #FFFFFF !important; } /* Searchable-select dropdown panel (opt-in picker on taxi search) */ .dx-ss-panel, .dx-ss-dropdown, .dx-ss-list { background: #FFFFFF !important; border: 1px solid var(--dx-line-2) !important; box-shadow: var(--shadow-lg) !important; color: var(--dx-ink) !important; } .dx-ss-option, .dx-ss-item { color: var(--dx-ink) !important; } .dx-ss-option:hover, .dx-ss-item:hover, .dx-ss-option.active, .dx-ss-item.active { background: var(--dx-blue-05) !important; color: var(--dx-blue) !important; } /* ----------------------------------------------------------------- 7. BUTTONS Primary = DriveX BLUE + white text Accent = DriveX ORANGE + white text (Post Your Ad, boost CTAs) Secondary= white + blue border/text ----------------------------------------------------------------- */ .al-btn { transition: background .18s ease, color .18s ease, border-color .18s ease, box-shadow .22s ease, transform .18s ease; } .al-btn-primary, body.home .al-btn-primary, .al-search-grid > button[type="submit"], body.home .al-search-grid > button[type="submit"], .al-search-grid > a.al-btn-primary, body.home .al-search-grid > .al-btn-primary, .dx-sf-btn, .al-form-footer .al-btn-primary.al-btn-lg, button[type="submit"].al-btn-primary { background: linear-gradient(135deg,#07367A 0%,#0A4A9E 100%) !important; color: #FFFFFF !important; border: none !important; box-shadow: 0 3px 12px rgba(7,54,122,0.24) !important; } .al-btn-primary:hover, body.home .al-btn-primary:hover, .al-search-grid > button[type="submit"]:hover, body.home .al-search-grid > button[type="submit"]:hover, .dx-sf-btn:hover { background: linear-gradient(135deg,#0A4A9E 0%,#1259B8 100%) !important; box-shadow: 0 6px 18px rgba(7,54,122,0.32) !important; transform: translateY(-1px); } .al-btn-primary:active { transform: translateY(0); } /* Accent / CTA — the money action keeps the DriveX orange */ /* The gradient runs from the logo orange into a deeper shade rather than a lighter one: white-on-#F96501 is only 3.05:1, so lightening the ramp (as the original gold gradient did) would have made the label harder to read, not easier. Deepening keeps it unmistakably the DriveX orange. */ .al-post-btn, body.home .al-post-btn, .al-btn-accent, .dx-promo-cta, .dx-dealer-cta-btn { background: linear-gradient(135deg,#F96501 0%,#DB5600 100%) !important; color: #FFFFFF !important; border: none !important; box-shadow: 0 3px 12px rgba(249,101,1,0.28) !important; } .al-post-btn:hover, body.home .al-post-btn:hover, .al-btn-accent:hover, .dx-dealer-cta-btn:hover { background: linear-gradient(135deg,#DB5600 0%,#BF4A00 100%) !important; box-shadow: 0 6px 18px rgba(249,101,1,0.36) !important; transform: translateY(-1px); } /* Secondary / ghost */ .al-btn-ghost, .dx-dealer-cta-ghost { background: #FFFFFF !important; color: var(--dx-blue) !important; border: 1px solid var(--dx-blue-20) !important; box-shadow: none !important; } .al-btn-ghost:hover, .dx-dealer-cta-ghost:hover { background: var(--dx-blue-05) !important; border-color: var(--dx-blue) !important; color: var(--dx-blue-deep) !important; } /* Semantic buttons stay semantic, just legible on white */ .al-btn-green { background: var(--green) !important; color: #FFFFFF !important; } .al-btn-green:hover { background: #0C8A4C !important; } .al-btn-danger, .al-btn-red { background: var(--red) !important; color: #FFFFFF !important; } /* Pagination */ .al-page-btn { background: #FFFFFF !important; color: var(--dx-ink-2) !important; border: 1px solid var(--dx-line-2) !important; } .al-page-btn:hover { border-color: var(--dx-blue) !important; color: var(--dx-blue) !important; background: var(--dx-blue-05) !important; } .al-page-btn.active { background: var(--dx-blue) !important; color: #FFFFFF !important; border-color: var(--dx-blue) !important; } /* Language switcher */ .al-lang-btn { color: var(--dx-ink-2) !important; } .al-lang-btn.active, .al-lang-btn:hover { background: var(--dx-blue) !important; color: #FFFFFF !important; } /* ----------------------------------------------------------------- 8. LINKS ----------------------------------------------------------------- */ main a:not(.al-btn):not(.al-nav-link):not(.hp-cat-card):not(.al-vehicle-card):not(.al-logo):not([class*="btn"]) { color: var(--dx-blue); } main a:not(.al-btn):not(.al-nav-link):not(.hp-cat-card):not(.al-vehicle-card):not(.al-logo):not([class*="btn"]):hover { color: var(--dx-orange-text); } /* ----------------------------------------------------------------- 9. CARDS — white, subtle border, soft shadow, gentle lift ----------------------------------------------------------------- */ .al-card, .al-vehicle-card, .al-listing-card, .dx-card, .al-panel, .al-box, .al-widget, .al-sidebar-card, .dx-hp-taxi-card, .al-dealer-card, .al-rental-card, .dx-portal-card, .dx-stat-card, .al-stat-card { background: #FFFFFF !important; border: 1px solid var(--dx-line) !important; border-radius: 14px !important; box-shadow: var(--shadow-sm) !important; transition: box-shadow .24s ease, transform .24s ease, border-color .24s ease; } .al-card:hover, .al-vehicle-card:hover, .al-listing-card:hover, .dx-hp-taxi-card:hover, .al-dealer-card:hover, .al-rental-card:hover { box-shadow: 0 12px 30px rgba(7,54,122,0.12), 0 2px 6px rgba(14,28,49,0.05) !important; border-color: var(--dx-blue-20) !important; transform: translateY(-3px); } /* Vehicle card internals */ .al-vcard-title, .al-card-title { color: var(--dx-ink) !important; } .al-vcard-make, body.home .al-vcard-make { background: none !important; -webkit-background-clip: initial !important; background-clip: initial !important; -webkit-text-fill-color: var(--dx-ink-3) !important; color: var(--dx-ink-3) !important; } /* Price — DriveX blue, the strongest information on the card */ .al-vcard-price, body.home .al-vcard-price, .al-price, .al-detail-price { background: none !important; -webkit-background-clip: initial !important; background-clip: initial !important; -webkit-text-fill-color: var(--dx-blue) !important; color: var(--dx-blue) !important; font-weight: 800; } .al-vcard-meta, .al-card-meta, .al-vcard-specs { color: var(--dx-ink-3) !important; } .al-vcard-media, .al-card-media { background: var(--dx-blue-05) !important; } /* ----------------------------------------------------------------- 10. BADGES / CHIPS / TAGS ----------------------------------------------------------------- */ .al-badge, .al-chip, .al-tag { background: var(--dx-blue-05) !important; color: var(--dx-blue) !important; border: 1px solid var(--dx-blue-20) !important; } /* Boosted / Featured — orange, the promotional accent */ .al-badge-featured, body.home .al-badge-featured { background: linear-gradient(135deg,#F96501 0%,#FF8124 100%) !important; color: #FFFFFF !important; box-shadow: 0 2px 8px rgba(249,101,1,0.32) !important; border: none !important; } .al-badge-ev { background: var(--green) !important; color: #FFFFFF !important; border: none !important; } .al-badge-verified { background: #E7F5EE !important; color: #0B7A44 !important; border: 1px solid #BFE6D2 !important; } .al-badge-new { background: var(--dx-blue) !important; color: #FFFFFF !important; border: none !important; } .dx-filter-chip { background: #FFFFFF !important; color: var(--dx-ink-2) !important; border: 1px solid var(--dx-line-2) !important; } .dx-filter-chip:hover, .dx-filter-chip.active { background: var(--dx-blue-05) !important; color: var(--dx-blue) !important; border-color: var(--dx-blue) !important; } .dx-dealer-chip { background: var(--dx-blue-05) !important; color: var(--dx-blue) !important; border: 1px solid var(--dx-blue-20) !important; } /* ----------------------------------------------------------------- 11. TRUST BAR + INFO STRIPS ----------------------------------------------------------------- */ .al-trust-bar { background: var(--dx-blue-05) !important; border-top: 1px solid var(--dx-line) !important; border-bottom: 1px solid var(--dx-line) !important; } .al-trust-icon, body.home .al-trust-icon { background: #FFFFFF !important; border: 1px solid var(--dx-blue-20) !important; color: var(--dx-blue) !important; box-shadow: var(--shadow-xs) !important; transition: box-shadow .2s ease, transform .2s ease, color .2s ease; } .al-trust-item:hover .al-trust-icon, body.home .al-trust-item:hover .al-trust-icon { color: var(--dx-orange) !important; border-color: rgba(249,101,1,0.35) !important; box-shadow: 0 4px 12px rgba(249,101,1,0.18) !important; transform: translateY(-2px); } .al-trust-text strong { color: var(--dx-ink) !important; } .al-trust-text span { color: var(--dx-ink-3) !important; } /* ----------------------------------------------------------------- 12. SECTION BACKGROUNDS — alternate white / very light blue-grey ----------------------------------------------------------------- */ .hp-cat-section, .al-section, .dx-section { background: #FFFFFF !important; } .hp-cat-section::before { background: linear-gradient(90deg,transparent,var(--dx-line),transparent) !important; } .al-section-alt, .dx-section-alt, .dx-how-section, .dx-why-section, .al-cta-section { background: var(--dx-blue-05) !important; border-top: 1px solid var(--dx-line); border-bottom: 1px solid var(--dx-line); } /* Step numbers / feature icons */ .dx-step-num { background: linear-gradient(135deg,#07367A 0%,#0A4A9E 100%) !important; color: #FFFFFF !important; } .dx-feature-icon, .dx-step-icon { background: var(--dx-blue-05) !important; border: 1px solid var(--dx-blue-20) !important; color: var(--dx-blue) !important; } .dx-testimonial-avatar { background: linear-gradient(135deg,#07367A 0%,#0A4A9E 100%) !important; color: #FFFFFF !important; } /* ----------------------------------------------------------------- 13. FOOTER — light, structured, brand-anchored ----------------------------------------------------------------- */ /* The footer is a navy bar (see section 31c) — these are the on-navy equivalents. `.al-footer a` is (0,1,1) and beats a bare `.al-footer-link`, so the link colour has to be set HERE or it silently stays dark-on-navy. */ .al-footer, footer.al-footer { background: var(--dx-bar) !important; border-top: none !important; color: var(--dx-bar-text) !important; } .al-footer h3, .al-footer h4, .al-footer-heading, .al-footer-col-title { color: #FFFFFF !important; } .al-footer a, .al-footer-link { color: var(--dx-bar-text) !important; } .al-footer a:hover, .al-footer-link:hover { color: #FFFFFF !important; } .al-footer-bottom, .al-footer-legal { border-top: 1px solid var(--dx-bar-line) !important; color: #93A9C6 !important; background: transparent !important; } .al-footer-logo { color: #FFFFFF !important; } /* No plate: the logo sits directly on the navy bar */ .al-footer .al-footer-logo img, .al-footer img.al-logo-img { background: none; padding: 0; border-radius: 0; } .al-social-link, .al-footer-social a, .al-social-btn { background: rgba(255,255,255,0.08) !important; border: 1px solid rgba(255,255,255,0.18) !important; color: #FFFFFF !important; transition: background .18s ease, color .18s ease, border-color .18s ease, transform .18s ease; } .al-social-link:hover, .al-footer-social a:hover, .al-social-btn:hover { background: var(--dx-orange) !important; border-color: var(--dx-orange) !important; color: #FFFFFF !important; transform: translateY(-2px); } /* Mobile footer accordion */ .al-footer-acc-head { color: #FFFFFF !important; border-color: var(--dx-bar-line) !important; } /* ----------------------------------------------------------------- 14. MODALS / OVERLAYS / DROPDOWN PANELS ----------------------------------------------------------------- */ .dx-modal, .al-modal, .dx-modal-box, .al-modal-content, .dx-modal-content, .al-auth-modal, #dxSellGuideOverlay .dx-guide-box { background: #FFFFFF !important; color: var(--dx-ink) !important; border: 1px solid var(--dx-line) !important; box-shadow: var(--shadow-float) !important; } .dx-modal-backdrop, .al-modal-backdrop, .dx-overlay, .al-overlay, #dxSellGuideOverlay { background: rgba(14,28,49,0.45) !important; } .dx-modal-head, .al-modal-header { border-bottom: 1px solid var(--dx-line) !important; } .dx-modal-foot, .al-modal-footer { border-top: 1px solid var(--dx-line) !important; background: var(--dx-blue-05) !important; } .dx-modal-close, .al-modal-close { color: var(--dx-ink-3) !important; } .dx-modal-close:hover, .al-modal-close:hover { color: var(--dx-ink) !important; background: var(--dx-blue-05) !important; } /* ----------------------------------------------------------------- 15. TABLES (wallet, admin, reports, transactions) ----------------------------------------------------------------- */ table, .al-table, .dx-table { color: var(--dx-ink) !important; } .al-table thead th, .dx-table thead th, table thead th { background: var(--dx-blue-05) !important; color: var(--dx-ink-2) !important; border-bottom: 1px solid var(--dx-line-2) !important; } .al-table td, .dx-table td, table td { border-bottom: 1px solid var(--dx-line) !important; } .al-table tbody tr:hover, .dx-table tbody tr:hover, table tbody tr:hover { background: var(--dx-blue-05) !important; } /* ----------------------------------------------------------------- 16. DASHBOARDS — seller portal, rental, admin, wallet ----------------------------------------------------------------- */ .dx-portal-tabs, .al-portal-tabs, .al-tabs, .dx-tabs { background: #FFFFFF !important; border-bottom: 1px solid var(--dx-line) !important; } .al-tab, .dx-tab, .al-portal-tab { color: var(--dx-ink-2) !important; transition: color .18s ease, border-color .18s ease, background .18s ease; } .al-tab:hover, .dx-tab:hover, .al-portal-tab:hover { color: var(--dx-blue) !important; background: var(--dx-blue-05) !important; } .al-tab.active, .dx-tab.active, .al-portal-tab.active { color: var(--dx-blue) !important; border-bottom-color: var(--dx-blue) !important; background: transparent !important; } /* Admin shell */ #alListBulkForm, .dx-admin-panel, .dx-admin-card { background: #FFFFFF !important; border: 1px solid var(--dx-line) !important; color: var(--dx-ink) !important; } .dx-adv-search { background: var(--dx-blue-05) !important; border: 1px solid var(--dx-line) !important; } .dx-admin-bnav { background: rgba(255,255,255,0.97) !important; border-top: 1px solid var(--dx-line) !important; box-shadow: 0 -2px 10px rgba(14,28,49,0.07) !important; } .dx-admin-bnav a { color: var(--dx-ink-3) !important; } .dx-admin-bnav a.active { color: var(--dx-blue) !important; } /* Wallet */ .dx-promo-banner { background: linear-gradient(135deg,#07367A 0%,#0A4A9E 100%) !important; color: #FFFFFF !important; border: none !important; } .dx-promo-badge { background: var(--dx-orange) !important; color: #FFFFFF !important; } .dx-wallet-balance, .dx-wallet-card { background: linear-gradient(135deg,#07367A 0%,#0A4A9E 100%) !important; color: #FFFFFF !important; border: none !important; } .dx-wallet-balance *, .dx-wallet-card * { color: #FFFFFF !important; } /* Boost options */ .al-boost-option { background: #FFFFFF !important; border: 1px solid var(--dx-line-2) !important; } .al-boost-option:hover, .al-boost-option.selected { border-color: var(--dx-blue) !important; box-shadow: 0 0 0 3px rgba(7,54,122,0.10) !important; } .al-boost-option.popular::before { background: var(--dx-orange) !important; color: #FFFFFF !important; } /* ----------------------------------------------------------------- 17. MOBILE POST-AD WORKFLOW (<=768px stepped flow) ----------------------------------------------------------------- */ .dx-mwf-progress { background: rgba(255,255,255,0.97) !important; border-bottom: 1px solid var(--dx-line) !important; color: var(--dx-ink) !important; } .dx-mwf-bar { background: var(--dx-blue-10) !important; } .dx-mwf-bar span { background: linear-gradient(90deg,#07367A,#0A4A9E) !important; } .dx-mwf-modepick { background: var(--dx-blue-05) !important; border: 1px solid var(--dx-line) !important; } .dx-mwf-modepick button { color: var(--dx-ink-2) !important; } .dx-mwf-modepick button.active { background: var(--dx-blue) !important; color: #FFFFFF !important; } .dx-mwf-summary { background: var(--dx-blue-05) !important; border: 1px solid var(--dx-line) !important; color: var(--dx-ink) !important; } .dx-mwf-summary .row { border-bottom: 1px solid var(--dx-line) !important; } .dx-mwf-review-photos img { border: 1px solid var(--dx-line-2) !important; background: #FFFFFF !important; } .dx-mwf-nav { background: rgba(255,255,255,0.98) !important; border-top: 1px solid var(--dx-line) !important; box-shadow: 0 -2px 12px rgba(14,28,49,0.08) !important; } .dx-mwf-nav .dx-mwf-back { background: #FFFFFF !important; color: var(--dx-blue) !important; border: 1px solid var(--dx-blue-20) !important; } .dx-mwf-nav .dx-mwf-next { background: linear-gradient(135deg,#07367A 0%,#0A4A9E 100%) !important; color: #FFFFFF !important; } html.dx-mwf-on .dx-mwf-step .al-form-section-title { color: var(--dx-ink) !important; background: transparent !important; } /* ----------------------------------------------------------------- 18. LISTING DETAIL PAGE ----------------------------------------------------------------- */ .al-detail-layout, .al-detail-main, .al-detail-side { color: var(--dx-ink); } .al-spec-item, .al-spec-row { background: #FFFFFF !important; border: 1px solid var(--dx-line) !important; } .al-spec-label { color: var(--dx-ink-3) !important; } .al-spec-value { color: var(--dx-ink) !important; } .al-gallery-main, .al-gallery-thumb { background: var(--dx-blue-05) !important; border-color: var(--dx-line) !important; } .al-gallery-thumb.active { border-color: var(--dx-blue) !important; box-shadow: 0 0 0 2px rgba(7,54,122,0.18) !important; } .al-safety-note, .dx-safety-box { background: var(--dx-orange-05) !important; border: 1px solid rgba(249,101,1,0.25) !important; color: var(--dx-ink) !important; } .dx-payment-warning { background: #FFF6F6 !important; border: 1px solid #F3CDCD !important; color: #8A2020 !important; } .al-seller-card, .al-dealer-card { background: #FFFFFF !important; border: 1px solid var(--dx-line) !important; } /* Comments / messaging */ .dx-comment, .dx-msg-bubble-in { background: var(--dx-blue-05) !important; border: 1px solid var(--dx-line) !important; color: var(--dx-ink) !important; } .dx-msg-bubble-out { background: var(--dx-blue) !important; color: #FFFFFF !important; } .dx-conv-item { border-bottom: 1px solid var(--dx-line) !important; color: var(--dx-ink) !important; } .dx-conv-item:hover, .dx-conv-item.active { background: var(--dx-blue-05) !important; } .dx-conv-unread { background: var(--dx-orange) !important; color: #FFFFFF !important; } /* Empty states */ .al-empty, .al-empty-state, .dx-empty { color: var(--dx-ink-3) !important; } .al-empty i, .al-empty-state i { color: var(--dx-blue-20) !important; } /* Filters sidebar (archive) */ .al-filters, .al-filter-panel, .al-sidebar { background: #FFFFFF !important; border: 1px solid var(--dx-line) !important; } .al-filter-group-title { color: var(--dx-ink-3) !important; } .al-filter-option, .al-filter-item { color: var(--dx-ink-2) !important; border-color: var(--dx-line) !important; } .al-filter-option:hover { color: var(--dx-blue) !important; } /* ----------------------------------------------------------------- 19. AUTH PAGES (sign in / register / forgot password / OTP) Visual only — no change to any auth behaviour or markup. ----------------------------------------------------------------- */ .al-auth-box, .al-auth-card, .dx-auth-card, .al-signin-box { background: #FFFFFF !important; border: 1px solid var(--dx-line) !important; box-shadow: var(--shadow-md) !important; border-radius: 16px !important; } .al-auth-tab { color: var(--dx-ink-2) !important; } .al-auth-tab.active { color: var(--dx-blue) !important; border-bottom-color: var(--dx-blue) !important; } .dx-otp-input, .al-otp-input { background: #FFFFFF !important; border: 1px solid var(--dx-line-2) !important; color: var(--dx-ink) !important; } .dx-otp-input:focus, .al-otp-input:focus { border-color: var(--dx-blue) !important; box-shadow: 0 0 0 3px rgba(7,54,122,0.12) !important; } /* ----------------------------------------------------------------- 20. NOTICES ----------------------------------------------------------------- */ .al-notice, .dx-notice { background: var(--dx-blue-05) !important; border: 1px solid var(--dx-blue-20) !important; color: var(--dx-ink) !important; } .al-notice-success, .dx-notice-success { background: #EDF9F2 !important; border-color: #BFE6D2 !important; color: #0B6B3C !important; } .al-notice-error, .dx-notice-error { background: #FDF1F1 !important; border-color: #F2CFCF !important; color: #96231F !important; } .al-notice-warn, .dx-notice-warn { background: var(--dx-orange-05) !important; border-color: rgba(249,101,1,0.3) !important; color: #8A3A00 !important; } /* ----------------------------------------------------------------- 21. CATEGORY CARDS — real automotive photography Images are attached to the EXISTING .hp-cat-bg element only. No markup, category, slug, URL or query is touched. ----------------------------------------------------------------- */ .hp-cat-card { box-shadow: var(--shadow-sm); border: 1px solid var(--dx-line); background: #FFFFFF; } .hp-cat-card:hover { box-shadow: 0 16px 36px rgba(7,54,122,0.18) !important; border-color: var(--dx-blue-20); } .hp-cat-bg { background-size: cover !important; background-position: center !important; background-repeat: no-repeat !important; background-color: var(--dx-blue-05) !important; } /* Readability scrim: keeps the white label legible over any photo */ .hp-cat-overlay { background: linear-gradient( to top, rgba(7,26,58,0.90) 0%, rgba(7,26,58,0.55) 42%, rgba(7,26,58,0.16) 72%, rgba(7,26,58,0.05) 100% ) !important; } .hp-cat-card:hover .hp-cat-overlay { background: linear-gradient( to top, rgba(7,54,122,0.92) 0%, rgba(7,54,122,0.58) 42%, rgba(7,54,122,0.18) 72%, rgba(7,54,122,0.05) 100% ) !important; } .hp-cat-name { color: #FFFFFF !important; text-shadow: 0 1px 3px rgba(0,0,0,0.4); } .hp-cat-count { color: rgba(255,255,255,0.82) !important; } /* Icon tile on every card — unified DriveX orange over the photo */ .hp-cat-card .hp-cat-icon { background: rgba(249,101,1,0.92) !important; border: 1px solid rgba(255,255,255,0.35) !important; color: #FFFFFF !important; box-shadow: 0 2px 8px rgba(0,0,0,0.25) !important; } /* The oversized ghost icon is redundant once there is a photo */ .hp-cat-illustration-icon { opacity: 0 !important; } /* Category artwork is NOT set here any more. It comes from the central map in inc/dx-category-images.php, rendered as an inline background-image on the existing .hp-cat-bg element, so images can be swapped in one place. */ /* ----------------------------------------------------------------- 22. SUBTLE MOTION Existing animations (.dx-reveal scroll reveal, orb float, counters, hover scales) are left untouched — only smoothed and extended. ----------------------------------------------------------------- */ .al-card, .al-vehicle-card, .hp-cat-card, .al-btn, .al-trust-icon, .al-social-link, .dx-filter-chip { will-change: auto; } .hp-cat-card:hover .hp-cat-bg { transform: scale(1.07); } /* Dropdown / panel entrance */ .al-user-dropdown, .dx-ss-panel, .al-mobile-menu { transition: opacity .18s ease, transform .18s ease; } /* Focus visibility for keyboard users (accessibility, no layout change) */ a:focus-visible, button:focus-visible, input:focus-visible, select:focus-visible, textarea:focus-visible { outline: 2px solid var(--dx-blue); outline-offset: 2px; } /* ----------------------------------------------------------------- 23. REDUCED MOTION — respect the OS setting ----------------------------------------------------------------- */ @media (prefers-reduced-motion: reduce) { /* The plain universal selector is not enough here: several existing rules set the `transition` SHORTHAND with !important on selectors such as `section a[href*="/vehicles/"]` (specificity 0,1,2), which outranks `*` (0,0,0) even though both are !important. Repeating :root lifts this block to 0,2,0 so it wins, without touching those original rules. */ :root:root *, :root:root *::before, :root:root *::after, *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; scroll-behavior: auto !important; } .dx-reveal, .dx-reveal-left, .dx-reveal-scale { opacity: 1 !important; transform: none !important; } .al-card:hover, .al-vehicle-card:hover, .hp-cat-card:hover, .al-btn:hover, .al-btn-primary:hover, .al-post-btn:hover { transform: none !important; } } /* ----------------------------------------------------------------- 24. RESPONSIVE GUARDS No layout is changed; these only stop the new surfaces from introducing overflow on small screens. ----------------------------------------------------------------- */ @media (max-width: 768px) { .al-search-box, body.home .al-search-box, .dx-search-form { border-radius: 14px !important; box-shadow: 0 6px 20px rgba(7,54,122,0.10) !important; } .hp-cat-card:hover { transform: none; } .al-card:hover, .al-vehicle-card:hover { transform: none; } } @media (hover: none) { .al-card:hover, .al-vehicle-card:hover, .hp-cat-card:hover, .al-btn:hover, .al-btn-primary:hover, .al-post-btn:hover { transform: none !important; } } /* ----------------------------------------------------------------- 26. INLINE-STYLE RECONCILIATION Many templates carry inline styles such as style="background:var(--accent);color:#0a0c0f" i.e. near-black text that was designed to sit on the old orange. Now that --accent is DriveX blue, that text must be white. These attribute selectors fix every occurrence at once WITHOUT editing a single PHP template — purely presentational. ----------------------------------------------------------------- */ [style*="background:var(--accent)"], [style*="background: var(--accent)"], [style*="background:var(--grad-cta)"], [style*="background: var(--grad-cta)"], [style*="background:linear-gradient(135deg,var(--accent)"], [style*="background:var(--accent2)"] { color: #FFFFFF !important; border-color: var(--dx-blue) !important; } [style*="background:var(--accent)"] *, [style*="background: var(--accent)"] *, [style*="background:var(--grad-cta)"] * { color: #FFFFFF !important; } /* Inline dark panel backgrounds → light surfaces */ [style*="background:#0f1623"], [style*="background: #0f1623"], [style*="background:#0a0c0f"], [style*="background: #0a0c0f"], [style*="background:#07080d"], [style*="background: #07080d"], [style*="background:#0d0d1a"], [style*="background:#050a12"], [style*="background:#0a1120"], [style*="background:#0d1929"], [style*="background:#1a1d24"], [style*="background:#23262d"], [style*="background:linear-gradient(135deg,#1a2436"] { background: var(--dx-blue-05) !important; background-image: none !important; color: var(--dx-ink) !important; border-color: var(--dx-line) !important; } /* Inline near-black text sitting on now-light surfaces stays dark ink */ [style*="color:#0a0c0f"]:not([style*="background:var(--accent)"]):not([style*="background:var(--grad-cta)"]), [style*="color:#0D0D1A"]:not([style*="background:var(--accent)"]), [style*="color:#0d0d1a"]:not([style*="background:var(--accent)"]) { color: var(--dx-ink) !important; } /* Elements whose inline style paints an --accent bar/dot keep blue, no text rule */ [style*="background:var(--accent);flex-shrink"], [style*="background:var(--accent);margin-right"] { color: inherit !important; } /* ----------------------------------------------------------------- 27. HOMEPAGE-SCOPED OVERRIDES dx-homepage-v2.css declares these at `body.home` specificity with !important, so they must be matched at the same weight. ----------------------------------------------------------------- */ body.home .al-section-title span, body.home .hp-section-title span { background: none !important; -webkit-background-clip: initial !important; background-clip: initial !important; -webkit-text-fill-color: var(--dx-orange-deep) !important; color: var(--dx-orange-deep) !important; } body.home .dx-eyebrow-gold { background: var(--dx-orange-05) !important; border-color: rgba(249,101,1,0.26) !important; color: var(--dx-orange-text) !important; } /* Stat numbers — DriveX blue reads as data, not promotion */ body.home .dx-stat-num, body.home .al-stat-num { background: none !important; -webkit-background-clip: initial !important; background-clip: initial !important; -webkit-text-fill-color: var(--dx-blue) !important; color: var(--dx-blue) !important; } body.home .al-stat-label, body.home .dx-stat-label { color: var(--dx-ink-3) !important; } /* Homepage section shells */ body.home .dx-compact-head .al-section-title { color: var(--dx-ink) !important; } body.home .al-section, body.home section { background-color: transparent; } /* ----------------------------------------------------------------- 28. PAGE-SPECIFIC LEGACY COLOURS A handful of components hardcoded neon colours that only worked on the old dark canvas (mint #00C896, sky #60D0FF, amber #F5A623). Re-pointed to the DriveX palette at accessible strengths. ----------------------------------------------------------------- */ /* Market Benchmark */ .bm-chip { color: var(--dx-ink-2) !important; border-color: var(--dx-line-2) !important; background: #FFFFFF !important; } .bm-chip:hover { border-color: var(--dx-blue) !important; color: var(--dx-blue) !important; background: var(--dx-blue-05) !important; } .bm-chip.on { background: var(--dx-blue) !important; color: #FFFFFF !important; border-color: var(--dx-blue) !important; } .bm-page-btn { color: var(--dx-ink-2) !important; border-color: var(--dx-line-2) !important; background: #FFFFFF !important; } .bm-page-btn.ap { background: var(--dx-blue) !important; color: #FFFFFF !important; border-color: var(--dx-blue) !important; } /* Text-colour occurrences only — matching `color:` keeps these rules from touching elements that use the same hex as a background. */ [style*="color:#00C896"], [style*="color:#00c896"], [style*="color: #00C896"], [style*="color: #00c896"] { color: var(--dx-blue) !important; } [style*="color:#60d0ff"], [style*="color:#60D0FF"], [style*="color: #60d0ff"], [style*="color: #60D0FF"] { color: var(--dx-blue) !important; } [style*="color:#f5a623"], [style*="color:#F5A623"], [style*="color: #f5a623"], [style*="color: #F5A623"] { color: var(--dx-orange-text) !important; } /* Solid mint fills (progress bars, meters) become DriveX blue. The trailing semicolon is deliberate: the fuel-type badges are painted `background:#00C89622` (an 8-digit alpha tint) and must keep their soft tint — a bare `#00C896` substring match would swallow those too and turn a subtle pill into a solid block. */ [style*="background:#00C896;"], [style*="background:#00c896;"], [style*="background: #00C896;"], [style*="background: #00c896;"] { background: var(--dx-blue) !important; } /* Semantic status colours were picked for a dark canvas and drop below WCAG AA once the background is white. These re-point ONLY the `color:` uses — the same hexes used as backgrounds are left alone, because white text already reads correctly on them. Meaning is preserved: red stays red, green stays green; only the shade deepens. */ [style*="color:#ef4444"], [style*="color: #ef4444"], [style*="color:#EF4444"], [style*="color:#f87171"], [style*="color:#e85252"], [style*="color:#e74c3c"], [style*="color:#fca5a5"], [style*="color:#ff6b6b"] { color: #C62828 !important; } [style*="color:#22c55e"], [style*="color: #22c55e"], [style*="color:#10b981"], [style*="color: #10b981"], [style*="color:#3dd68c"], [style*="color:#4ee8a0"], [style*="color:#1fbd5c"], [style*="color:#00c896"], [style*="color:#00C896"], [style*="color:#128663"] { color: #0B7A44 !important; } [style*="color:#f59e0b"], [style*="color: #f59e0b"], [style*="color:#fbbf24"], [style*="color:#fcd34d"], [style*="color:#f0c96a"], [style*="color:#fdba74"], [style*="color:#c49a2e"] { color: #A15C00 !important; } [style*="color:#3b82f6"], [style*="color: #3b82f6"], [style*="color:#60a5fa"], [style*="color:#4a9eff"], [style*="color:#93c5fd"], [style*="color:#2f6bff"], [style*="color:#60d0ff"], [style*="color:#60D0FF"] { color: #1D4ED8 !important; } [style*="color:#8b5cf6"], [style*="color: #8b5cf6"], [style*="color:#9b6dff"], [style*="color:#c084fc"], [style*="color:#a855f7"], [style*="color:#8a5dee"], [style*="color:#9b5de5"] { color: #5B34B8 !important; } [style*="color:#94a3b8"], [style*="color: #94a3b8"], [style*="color:#9aa0ad"], [style*="color:#cbd5e1"], [style*="color:#5a6070"], [style*="color:#d1d5db"], [style*="color:#a5b4fc"] { color: var(--dx-ink-3) !important; } /* Near-white text that was written for the dark canvas. Scoped to elements that carry NO inline background of their own, so anything deliberately painted light-on-colour (badges, gradient buttons) is left untouched. */ [style*="color:#f1f5f9"]:not([style*="background"]), [style*="color:#f8fafc"]:not([style*="background"]), [style*="color:#f0f2f5"]:not([style*="background"]), [style*="color:#e2e8f0"]:not([style*="background"]) { color: var(--dx-ink) !important; } /* Rental / archive filter pills — same active treatment as every other tab */ .al-rental-tab.active, .al-type-chip.active, .al-pill.active { background: var(--dx-blue) !important; color: #FFFFFF !important; border-color: var(--dx-blue) !important; } /* WhatsApp buttons keep their own recognisable brand green; only ensure the label on top of that green stays white. Text-coloured uses are untouched. */ [style*="background:#25d366"], [style*="background:#25D366"], [style*="background: #25d366"], [style*="background: #25D366"] { color: #FFFFFF !important; } /* ----------------------------------------------------------------- 29. FINAL RE-ASSERTION The semantic-colour block above matches at the same specificity as the accent-background block in section 26, so on a solid brand surface the later rule would otherwise win and repaint the label. Re-asserting last guarantees text on a brand fill stays white. ----------------------------------------------------------------- */ [style*="background:var(--accent)"], [style*="background: var(--accent)"], [style*="background:var(--grad-cta)"], [style*="background: var(--grad-cta)"], .al-btn-primary, .al-post-btn, .al-btn-accent, .al-search-tab.active, body.home .al-search-tab.active, .al-badge-featured, body.home .al-badge-featured, .al-page-btn.active, .bm-chip.on, .bm-page-btn.ap, .dx-mwf-nav .dx-mwf-next, .dx-mwf-modepick button.active, .dx-promo-banner, .dx-wallet-balance, .dx-wallet-card { color: #FFFFFF !important; } [style*="background:var(--accent)"] *:not(i), [style*="background: var(--accent)"] *:not(i), .al-btn-primary *:not(i), .al-post-btn *:not(i), .al-btn-accent *:not(i), .al-search-tab.active *:not(i), .al-badge-featured *:not(i) { color: #FFFFFF !important; -webkit-text-fill-color: #FFFFFF !important; } /* ================================================================= 30. HEADER · BROWSE BY CATEGORY · FOOTER — focused visual pass ----------------------------------------------------------------- Scoped to these three areas only. Everything here is presentation: no markup, link, URL, handler or behaviour is affected. ================================================================= */ /* ----------------------------------------------------------------- 30a. HEADER The logo wordmark is white, so it keeps its navy plate — but the plate is now a proportioned brand lockup and the logo scales with the viewport instead of sitting at a fixed 26px on every phone. ----------------------------------------------------------------- */ .al-nav { box-shadow: 0 1px 2px rgba(14,28,49,0.04), 0 4px 16px rgba(14,28,49,0.04) !important; } .al-nav-inner { gap: 10px; } /* The logo may shrink before the action buttons do, never after — this is what stops the buttons being pushed off-screen. */ .al-nav .al-logo { flex-shrink: 1; min-width: 0; padding: 7px 14px; border-radius: 12px; /* Deep navy, NOT the brand blue: the logo's own arrow mark is #07367A, so a #07367A plate made the mark vanish into its background and left only the orange stroke reading. #041730 is that same blue darkened, which lets the full lockup show the way it does on the original dark UI. */ background: #041730; box-shadow: 0 2px 10px rgba(4,23,48,0.26); transition: box-shadow .22s ease, transform .22s ease; } .al-nav .al-logo:hover { box-shadow: 0 5px 18px rgba(7,54,122,0.32); transform: translateY(-1px); } .al-nav .al-logo:active { transform: translateY(0); } .al-nav .al-logo .al-logo-img { height: 32px !important; width: auto !important; max-width: 100%; object-fit: contain; /* LiteSpeed lazy-loads this behind a 1x1 GIF. Without an intrinsic ratio the placeholder renders as a tiny square and the header visibly jumps when the real file swaps in. Declaring the logo's own 997:243 ratio reserves the correct box up front, so there is no shift. */ aspect-ratio: 997 / 243; } /* Mobile: the logo grows with the viewport so the full lockup — mark, DRIVEX, .LK and the SELL. RENT. DRIVE. strapline — stays readable. clamp() keeps it inside the space the action buttons leave free, from 320px up. Nothing is cropped or stretched. */ @media (max-width: 768px) { .al-nav-inner { gap: 8px; padding-left: 12px; padding-right: 12px; } .al-nav .al-logo { padding: 6px 10px; border-radius: 11px; } .al-nav .al-logo .al-logo-img { height: clamp(28px, 8.5vw, 40px) !important; } } @media (max-width: 359px) { .al-nav-inner { gap: 6px; padding-left: 8px; padding-right: 8px; } .al-nav .al-logo { padding: 5px 8px; } } /* Action cluster never collapses */ .al-nav-right { flex-shrink: 0; gap: 8px; } /* Nav links */ .al-nav-link { position: relative; border-radius: 9px; transition: color .18s ease, background .18s ease; } .al-nav-link::after { content: ''; position: absolute; left: 14px; right: 14px; bottom: 4px; height: 2px; border-radius: 2px; background: var(--dx-orange); transform: scaleX(0); transform-origin: center; transition: transform .22s cubic-bezier(0.4,0,0.2,1); } .al-nav-link:hover::after { transform: scaleX(1); } .al-nav-link.active::after { transform: scaleX(1); } /* Post Your Ad — the orange CTA */ .al-post-btn, body.home .al-post-btn { border-radius: 10px !important; font-weight: 700; letter-spacing: -0.01em; } /* Sign In / ghost button in the bar */ .al-nav-right .al-btn-ghost { border-radius: 10px !important; font-weight: 600; } /* Message + profile icons */ .al-hdr-msg { border-radius: 10px; transition: background .18s ease, color .18s ease, transform .18s ease; } .al-hdr-msg:hover { transform: translateY(-1px); } #alUserMenuBtn { border-radius: 10px !important; transition: background .18s ease, border-color .18s ease; } #alUserMenuBtn:hover { background: var(--dx-blue-05) !important; border-color: var(--dx-blue-20) !important; } /* ----------------------------------------------------------------- 30b. BROWSE BY CATEGORY Same cards, same links, same order — richer presentation. ----------------------------------------------------------------- */ .hp-cat-section { padding-bottom: 64px !important; } .hp-cat-card { border-radius: 16px !important; box-shadow: 0 1px 3px rgba(14,28,49,0.07), 0 1px 2px rgba(14,28,49,0.04) !important; border: 1px solid var(--dx-line) !important; transition: transform .35s cubic-bezier(0.34,1.56,0.64,1), box-shadow .3s ease, border-color .3s ease !important; } .hp-cat-card:hover { transform: translateY(-6px) !important; box-shadow: 0 18px 38px rgba(7,54,122,0.20) !important; border-color: var(--dx-blue-20) !important; } /* Image: gentle zoom, no distortion (cover + centre keeps aspect) */ .hp-cat-bg { transition: transform .55s cubic-bezier(0.4,0,0.2,1), filter .4s ease !important; } .hp-cat-card:hover .hp-cat-bg { transform: scale(1.08) !important; } /* Icon tile — DriveX blue, per brief */ .hp-cat-card .hp-cat-icon { background: linear-gradient(135deg, rgba(7,54,122,0.95) 0%, rgba(10,74,158,0.95) 100%) !important; border: 1px solid rgba(255,255,255,0.40) !important; color: #FFFFFF !important; box-shadow: 0 3px 10px rgba(0,0,0,0.28) !important; border-radius: 12px !important; } .hp-cat-card:hover .hp-cat-icon { transform: scale(1.1) rotate(-4deg); } /* Orange arrow indicator — drawn as a self-contained SVG data URI so it needs no markup change and no icon-font codepoint. */ .hp-cat-card::after { content: ''; position: absolute; right: 14px; bottom: 16px; z-index: 3; width: 28px; height: 28px; border-radius: 50%; background-color: var(--dx-orange); background-image: url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%23fff' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12h14M13 6l6 6-6 6'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: center; background-size: 15px 15px; opacity: 0; transform: translateX(-6px); transition: opacity .28s ease, transform .28s cubic-bezier(0.34,1.56,0.64,1); box-shadow: 0 3px 10px rgba(0,0,0,0.3); pointer-events: none; } .hp-cat-card:hover::after { opacity: 1; transform: translateX(0); } .hp-cat-name { font-size: 15px !important; letter-spacing: -0.2px; } .hp-cat-count { color: rgba(255,255,255,0.86) !important; } /* Mobile: the arrow would crowd the shorter 5:2 card, so it is hidden there (hover is not a mobile interaction anyway) */ @media (max-width: 768px) { .hp-cat-card::after { display: none; } .hp-cat-card { border-radius: 14px !important; } .hp-cat-card:hover { transform: none !important; } } /* ----------------------------------------------------------------- 30c. FOOTER The brand column becomes one deliberate navy brand card holding the logo and social links, instead of a small box hugging the artwork. The logo file itself is untouched — it simply sits on the navy it was designed for, at a size that keeps the full lockup readable. ----------------------------------------------------------------- */ .al-footer, footer.al-footer { background: linear-gradient(180deg, #FFFFFF 0%, var(--dx-blue-05) 100%) !important; border-top: 1px solid var(--dx-line) !important; } .al-footer-brand { /* Same reasoning as the header plate — deep navy so the logo's navy mark stays visible; the brand blue would swallow it. */ background: linear-gradient(150deg, #041730 0%, #072A55 100%); border-radius: 16px; padding: 26px 24px; box-shadow: 0 6px 22px rgba(4,23,48,0.20); align-self: start; } /* Neutralise the earlier plate — the card now provides the navy */ .al-footer .al-footer-logo img, .al-footer img.al-logo-img { background: none !important; padding: 0 !important; border-radius: 0 !important; } .al-footer .al-footer-logo { margin: 0 0 2px; display: block; } .al-footer .al-footer-logo img { height: clamp(40px, 3.4vw, 52px) !important; width: auto !important; max-width: 100% !important; display: block; aspect-ratio: 997 / 243; /* same lazy-load reservation as the header */ object-fit: contain; } /* Text fallback, if no logo image is set */ .al-footer .al-footer-logo:not(:has(img)) { color: #FFFFFF !important; font-weight: 800; font-size: 24px; } /* Social buttons live inside the brand card */ .al-footer-socials { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 18px; } .al-footer-socials .al-social-btn, .al-social-btn { width: 38px; height: 38px; display: inline-flex; align-items: center; justify-content: center; border-radius: 10px; background: rgba(255,255,255,0.12) !important; border: 1px solid rgba(255,255,255,0.24) !important; color: #FFFFFF !important; font-size: 17px; transition: background .2s ease, transform .2s ease, border-color .2s ease; } .al-footer-socials .al-social-btn:hover, .al-social-btn:hover { background: var(--dx-orange) !important; border-color: var(--dx-orange) !important; color: #FFFFFF !important; transform: translateY(-2px); } /* Column headings — navy with a short orange rule. DESKTOP ONLY. On mobile these same headings are the accordion toggles and dx-uiux-improvements.css already owns `.al-footer-col-title::after` for the open/close chevron — overriding it there would have replaced the chevron with a bar and broken the affordance. */ .al-footer-col-title { color: var(--dx-ink) !important; font-weight: 800; } @media (min-width: 769px) { .al-footer-col-title { position: relative; padding-bottom: 10px; margin-bottom: 14px; } .al-footer-col-title::after { content: ''; position: absolute; left: 0; bottom: 0; width: 26px; height: 3px; border-radius: 3px; background: var(--dx-orange); } } /* Links — subtle slide on hover */ .al-footer-link { display: inline-block; color: var(--dx-ink-2) !important; transition: color .18s ease, transform .18s ease; } .al-footer-link:hover { color: var(--dx-blue) !important; transform: translateX(3px); } .al-footer-bottom-link { color: var(--dx-ink-3) !important; transition: color .18s ease; } .al-footer-bottom-link:hover { color: var(--dx-blue) !important; } .al-footer-bottom { border-top: 1px solid var(--dx-line) !important; } .al-footer-copy { color: var(--dx-ink-3) !important; } /* Mobile footer: brand card full width, logo centred and uncropped */ @media (max-width: 768px) { .al-footer-brand { padding: 20px 18px; border-radius: 14px; text-align: center; margin-bottom: 22px; } .al-footer .al-footer-logo img { margin-left: auto; margin-right: auto; height: clamp(38px, 11vw, 52px) !important; width: auto !important; max-width: 100% !important; } .al-footer-socials { justify-content: center; } .al-footer-link:hover { transform: none; } } /* ================================================================= 31. HEADER / FOOTER / CATEGORY / TYPOGRAPHY — professional pass ----------------------------------------------------------------- One background per bar. The DriveX wordmark is white artwork, so the header and footer take the navy the logo was drawn for and carry it edge to edge — the logo then sits IN the bar instead of on a patch. The page body between them stays white. ================================================================= */ :root, body.home { --dx-bar: #041730; /* header / footer bar */ --dx-bar-2: #072A55; /* subtle lift within the bar */ --dx-bar-line: rgba(255,255,255,0.10); --dx-bar-text: #C8D6EA; /* muted text on the bar (7.9:1 on --dx-bar) */ } /* ----------------------------------------------------------------- 31a. HEADER — one continuous navy bar ----------------------------------------------------------------- */ .al-nav, body.home .al-nav { background: var(--dx-bar) !important; backdrop-filter: none; -webkit-backdrop-filter: none; border-bottom: 1px solid rgba(255,255,255,0.08) !important; box-shadow: 0 2px 14px rgba(4,23,48,0.18) !important; height: 72px; } .al-nav-inner { gap: 14px; } /* Logo now sits directly on the bar — no plate, no box */ .al-nav .al-logo { background: none !important; padding: 0 !important; border-radius: 0 !important; box-shadow: none !important; flex-shrink: 1; min-width: 0; } .al-nav .al-logo:hover { transform: none; box-shadow: none !important; opacity: .88; } .al-nav .al-logo .al-logo-img { height: 38px !important; } /* Navigation */ .al-nav-link { color: var(--dx-bar-text) !important; font-weight: 600 !important; font-size: 14px !important; padding: 8px 13px; } .al-nav-link:hover { color: #FFFFFF !important; background: rgba(255,255,255,0.07) !important; } .al-nav-link.active { color: #FFFFFF !important; background: rgba(255,255,255,0.10) !important; } .al-nav-link::after { bottom: 3px; background: var(--dx-orange) !important; } /* Icons + account control on the bar */ .al-hdr-msg { color: var(--dx-bar-text) !important; } .al-hdr-msg:hover { color: #FFFFFF !important; background: rgba(255,255,255,0.10) !important; } #alUserMenuBtn { color: #FFFFFF !important; background: rgba(255,255,255,0.08) !important; border: 1px solid rgba(255,255,255,0.18) !important; } #alUserMenuBtn:hover { background: rgba(255,255,255,0.15) !important; border-color: rgba(255,255,255,0.30) !important; } .al-mobile-toggle, .al-nav-toggle { color: #FFFFFF !important; } /* Sign In — outlined on navy */ .al-nav-right .al-btn-ghost { background: transparent !important; color: #FFFFFF !important; border: 1px solid rgba(255,255,255,0.34) !important; font-weight: 600 !important; } .al-nav-right .al-btn-ghost:hover { background: rgba(255,255,255,0.12) !important; border-color: rgba(255,255,255,0.55) !important; color: #FFFFFF !important; } @media (max-width: 768px) { .al-nav, body.home .al-nav { height: 62px; } .al-nav-inner { gap: 8px; padding-left: 14px; padding-right: 14px; } .al-nav .al-logo .al-logo-img { height: clamp(30px, 9vw, 42px) !important; } } @media (max-width: 359px) { .al-nav-inner { gap: 6px; padding-left: 10px; padding-right: 10px; } } /* ----------------------------------------------------------------- 31b. BROWSE BY CATEGORY — branded vector artwork The graphics are already navy, so the old heavy scrim is dropped to a short one that only sits under the label. ----------------------------------------------------------------- */ .hp-cat-overlay, .hp-cat-card:hover .hp-cat-overlay { background: linear-gradient(to top, rgba(3,20,43,0.90) 0%, rgba(3,20,43,0.32) 26%, rgba(3,20,43,0.00) 52%) !important; } .hp-cat-bg { background-size: cover !important; background-position: center !important; } /* The artwork carries its own large glyph, so the small tile is redundant */ .hp-cat-card .hp-cat-icon { display: none !important; } .hp-cat-content { padding: 14px 16px !important; } .hp-cat-name { font-size: 15px !important; font-weight: 800 !important; } .hp-cat-count { font-size: 11.5px !important; font-weight: 500 !important; color: rgba(255,255,255,0.80) !important; } .hp-cat-card::after { bottom: 14px; right: 12px; } @media (max-width: 768px) { .hp-cat-content { padding: 10px 12px !important; } .hp-cat-name { font-size: 13px !important; } .hp-cat-count { font-size: 10.5px !important; } } /* ----------------------------------------------------------------- 31c. FOOTER — one continuous navy bar, four link columns, compact ----------------------------------------------------------------- */ .al-footer, footer.al-footer { background: var(--dx-bar) !important; border-top: none !important; color: var(--dx-bar-text) !important; padding-top: 44px !important; padding-bottom: 0 !important; } /* Brand column: no card, the logo sits straight on the footer */ .al-footer-brand { background: none !important; box-shadow: none !important; border-radius: 0 !important; padding: 0 !important; } .al-footer .al-footer-logo img { height: 44px !important; width: auto !important; max-width: 100% !important; aspect-ratio: 997 / 243; object-fit: contain; display: block; } /* Brand + four link columns */ .al-footer-grid { display: grid !important; grid-template-columns: 1.35fr 1fr 1fr 1fr 1fr !important; gap: 28px 24px !important; align-items: start; padding-bottom: 30px !important; } .al-footer-col-title { color: #FFFFFF !important; font-size: 12px !important; font-weight: 800 !important; letter-spacing: .08em; text-transform: uppercase; } .al-footer-links { display: flex; flex-direction: column; gap: 9px; } .al-footer-link { color: var(--dx-bar-text) !important; font-size: 13.5px !important; font-weight: 500 !important; } .al-footer-link:hover { color: #FFFFFF !important; } .al-footer-bottom-link { color: var(--dx-bar-text) !important; font-weight: 500; } .al-footer-bottom-link:hover { color: #FFFFFF !important; } .al-footer-socials { margin-top: 18px; } .al-social-btn { background: rgba(255,255,255,0.08) !important; border: 1px solid rgba(255,255,255,0.18) !important; } .al-footer-bottom { border-top: 1px solid var(--dx-bar-line) !important; padding: 16px 0 18px !important; background: transparent !important; } .al-footer-copy { color: #93A9C6 !important; font-size: 12.5px !important; } @media (max-width: 1100px) { .al-footer-grid { grid-template-columns: 1.2fr 1fr 1fr !important; } } @media (max-width: 768px) { .al-footer, footer.al-footer { padding-top: 26px !important; } .al-footer-grid { display: block !important; padding-bottom: 6px !important; } .al-footer-brand { text-align: center; margin-bottom: 18px; } .al-footer .al-footer-logo img { margin: 0 auto; height: clamp(34px, 10vw, 46px) !important; } .al-footer-socials { justify-content: center; margin-top: 14px; } .al-footer-bottom { padding: 14px 0 16px !important; } } /* ----------------------------------------------------------------- 31d. TYPOGRAPHY — one consistent weight ladder 800 page/section titles · 700 card + block titles · 700 buttons 600 labels, nav, table heads · 500 supporting copy · 400 body ----------------------------------------------------------------- */ h1, .al-hero h1, .al-section-title, .al-page-title { font-weight: 800 !important; } h2 { font-weight: 800 !important; } h3 { font-weight: 700 !important; } h4, h5, h6 { font-weight: 700 !important; } .al-section-title { font-size: clamp(22px, 2.4vw, 30px) !important; letter-spacing: -0.03em; } .al-section-sub, .al-hero-sub { font-weight: 500 !important; } /* Buttons read as actions. The .al-btn-sm rule comes FIRST so the primary and CTA buttons below win — most of them also carry .al-btn-sm, and the other order silently dropped them back to 600. */ .al-btn-sm { font-weight: 600 !important; } .al-btn, .al-btn-primary, .al-btn-ghost, .al-btn-accent, .al-post-btn, button[type="submit"], .dx-sf-btn { font-weight: 700 !important; } /* Field labels and eyebrows */ .al-field label, .al-field-label, .dx-sf-label, .al-form-label, .al-filter-group-title, .dx-eyebrow, .al-table thead th, table thead th { font-weight: 700 !important; letter-spacing: .05em; } /* Card + listing titles */ .al-vcard-title, .al-card-title, .al-listing-title, .dx-card-title, .al-spec-value { font-weight: 700 !important; } /* Money is the most important number on a card */ .al-vcard-price, body.home .al-vcard-price, .al-price, .al-detail-price { font-weight: 800 !important; letter-spacing: -0.02em; } /* Supporting copy: readable, not feather-light */ .al-vcard-meta, .al-card-meta, .al-vcard-specs, .al-spec-label, .al-trust-text span, .hp-cat-count { font-weight: 500 !important; } .al-trust-text strong { font-weight: 700 !important; } /* Stat blocks */ .dx-stat-num, .al-stat-num, body.home .dx-stat-num, body.home .al-stat-num { font-weight: 800 !important; } .dx-stat-label, .al-stat-label { font-weight: 600 !important; } /* Minimum comfortable size for muted small print */ .al-footer-copy, .al-muted, small { font-size: 12.5px; } /* ================================================================= 33. BROWSE SECTIONS · FOOTER · HEADER ACTIONS Category, Brand and District now share one card language: navy surface · 16px radius · 1px light border · lift on hover. ================================================================= */ /* ----------------------------------------------------------------- 33a. HEADER — profile / Sign In carries the same weight as Post Your Ad ----------------------------------------------------------------- */ .al-nav-right .al-btn-ghost, .al-nav-right .al-btn-ghost.al-btn-sm { background: linear-gradient(135deg,#0A4A9E 0%,#07367A 100%) !important; color: #FFFFFF !important; border: 1px solid rgba(255,255,255,0.22) !important; font-weight: 700 !important; font-size: 13px !important; box-shadow: 0 2px 8px rgba(4,23,48,0.35) !important; } .al-nav-right .al-btn-ghost:hover { background: linear-gradient(135deg,#0E5AB8 0%,#0A4A9E 100%) !important; border-color: rgba(255,255,255,0.38) !important; color: #FFFFFF !important; } /* Logged-in account control — same treatment */ #alUserMenuBtn { background: linear-gradient(135deg,#0A4A9E 0%,#07367A 100%) !important; border: 1px solid rgba(255,255,255,0.22) !important; color: #FFFFFF !important; font-weight: 700 !important; box-shadow: 0 2px 8px rgba(4,23,48,0.35) !important; } #alUserMenuBtn:hover { background: linear-gradient(135deg,#0E5AB8 0%,#0A4A9E 100%) !important; } #alUserMenuBtn span, #alUserMenuBtn i { color: #FFFFFF !important; font-weight: 700; } .al-hdr-msg { color: #E4EDF9 !important; } /* ----------------------------------------------------------------- 33b. BROWSE BY CATEGORY — mobile: graphic centred, label beneath The artwork switches to `contain` so the whole vehicle graphic is visible and centred — nothing is cropped, stretched or overlapped. ----------------------------------------------------------------- */ @media (max-width: 768px) { .hp-cat-grid { grid-template-columns: repeat(2,1fr) !important; gap: 10px !important; } .hp-cat-card { aspect-ratio: auto !important; min-height: 0 !important; display: flex !important; flex-direction: column !important; /* The card carries the SAME gradient as the SVG artwork, so when the graphic is shown `contain` (never cropped) the letterbox gutters beside it read as one continuous navy surface rather than empty margins. */ background: linear-gradient(150deg,#0A4A9E 0%,#052A5F 100%) !important; border: 1px solid rgba(255,255,255,0.10) !important; border-radius: 14px !important; overflow: hidden; } .hp-cat-bg { position: relative !important; inset: auto !important; height: 92px !important; width: 100% !important; background-size: contain !important; /* whole graphic, no crop */ background-position: center !important; background-repeat: no-repeat !important; background-color: transparent !important; /* let the card gradient show */ transform: none !important; } /* The scrim exists to make a bottom-anchored label readable over art — the label is no longer over the art, so it would only dim the graphic. */ .hp-cat-overlay { display: none !important; } .hp-cat-content { position: static !important; padding: 10px 10px 13px !important; text-align: center; background: #041730; } .hp-cat-name { font-size: 13px !important; font-weight: 800 !important; margin-bottom: 2px !important; } .hp-cat-count { font-size: 10.5px !important; color: rgba(255,255,255,0.72) !important; } .hp-cat-card:active { transform: scale(.985); } } /* ----------------------------------------------------------------- 33c. BROWSE BY BRAND — same card language as Category ----------------------------------------------------------------- */ section:has(#hpBrandGrid) { background: #FFFFFF !important; } .hp-brand-grid { gap: 14px !important; } .hp-brand-item { background: linear-gradient(150deg,#07367A 0%,#052A5F 100%) !important; border: 1px solid rgba(255,255,255,0.10) !important; border-radius: 16px !important; padding: 16px 10px 14px !important; gap: 10px !important; box-shadow: 0 1px 3px rgba(14,28,49,0.07) !important; transition: transform .3s cubic-bezier(0.34,1.56,0.64,1), box-shadow .3s ease, border-color .3s ease !important; } .hp-brand-item:hover { transform: translateY(-5px) !important; box-shadow: 0 16px 34px rgba(7,54,122,0.22) !important; border-color: rgba(249,101,1,0.45) !important; } .hp-brand-item::before { display: none !important; } /* White plate keeps every manufacturer logo legible and identical in size */ .hp-brand-item .hp-brand-logo, .hp-brand-toyota .hp-brand-logo, .hp-brand-honda .hp-brand-logo, .hp-brand-suzuki .hp-brand-logo, .hp-brand-nissan .hp-brand-logo, .hp-brand-bmw .hp-brand-logo, .hp-brand-mercedes .hp-brand-logo, .hp-brand-hyundai .hp-brand-logo, .hp-brand-kia .hp-brand-logo, .hp-brand-mitsu .hp-brand-logo, .hp-brand-mazda .hp-brand-logo, .hp-brand-vw .hp-brand-logo, .hp-brand-audi .hp-brand-logo, .hp-brand-mg .hp-brand-logo, .hp-brand-isuzu .hp-brand-logo, .hp-brand-lr .hp-brand-logo, .hp-brand-byd .hp-brand-logo { width: 58px !important; height: 58px !important; border-radius: 14px !important; background: #FFFFFF !important; border: 1px solid rgba(255,255,255,0.55) !important; color: var(--dx-blue) !important; padding: 9px !important; box-sizing: border-box !important; box-shadow: 0 2px 8px rgba(0,0,0,0.18) !important; transition: transform .3s cubic-bezier(0.34,1.56,0.64,1), box-shadow .3s ease; } .hp-brand-logo img, .hp-brand-logo picture { width: 100% !important; height: 100% !important; object-fit: contain !important; /* never stretched or cropped */ display: block; } .hp-brand-item:hover .hp-brand-logo { transform: scale(1.08) !important; box-shadow: 0 6px 16px rgba(0,0,0,0.28) !important; } .hp-brand-fallback { color: var(--dx-blue) !important; } .hp-brand-name { font-size: 12px !important; font-weight: 700 !important; color: #FFFFFF !important; text-align: center; } @media (max-width: 768px) { .hp-brand-grid { gap: 10px !important; } .hp-brand-item { padding: 13px 6px 11px !important; border-radius: 14px !important; } .hp-brand-item .hp-brand-logo { width: 46px !important; height: 46px !important; padding: 7px !important; border-radius: 12px !important; } .hp-brand-name { font-size: 11px !important; } .hp-brand-item:hover { transform: none !important; } } /* ----------------------------------------------------------------- 33d. BROWSE BY DISTRICT — same language, bigger icon, 2 shown first Flex (not grid) so the two initial cards centre instead of hugging the left edge of a 6-column track. ----------------------------------------------------------------- */ .hp-district-grid { display: flex !important; flex-wrap: wrap; justify-content: center; gap: 14px !important; } body.home .hp-district-card, .hp-district-card { flex: 0 1 calc(16.666% - 12px); min-width: 150px; max-width: 220px; min-height: 118px !important; background: linear-gradient(150deg,#07367A 0%,#052A5F 100%) !important; border: 1px solid rgba(255,255,255,0.10) !important; border-radius: 16px !important; display: flex !important; flex-direction: column !important; align-items: center !important; justify-content: center !important; gap: 10px !important; padding: 18px 12px !important; box-shadow: 0 1px 3px rgba(14,28,49,0.07) !important; transition: transform .3s cubic-bezier(0.34,1.56,0.64,1), box-shadow .3s ease, border-color .3s ease !important; } .hp-district-card::after { display: none !important; } /* The toggle collapses extras by setting an INLINE display:none. The card rule above uses `display:flex !important`, which outranks an inline declaration — so the collapsed state has to be re-asserted here or every district shows. Same guard for the Browse-by-Brand extras, which use the identical pattern. */ .hp-district-card.hp-district-extra[style*="display:none"], .hp-district-card.hp-district-extra[style*="display: none"], .hp-brand-item.hp-brand-extra[style*="display:none"], .hp-brand-item.hp-brand-extra[style*="display: none"] { display: none !important; } .hp-district-icon { position: static !important; font-size: 34px !important; line-height: 1 !important; color: var(--dx-orange) !important; transition: transform .3s cubic-bezier(0.34,1.56,0.64,1); } .hp-district-name { font-size: 13.5px !important; font-weight: 700 !important; color: #FFFFFF !important; text-shadow: none !important; text-align: center; } .hp-district-card:hover { transform: translateY(-5px) !important; box-shadow: 0 16px 34px rgba(7,54,122,0.22) !important; border-color: rgba(249,101,1,0.45) !important; } .hp-district-card:hover .hp-district-icon { transform: scale(1.14) !important; color: var(--dx-orange-hi) !important; } @media (max-width: 1024px) { .hp-district-card { flex-basis: calc(25% - 12px); } } @media (max-width: 640px) { .hp-district-grid { gap: 10px !important; } .hp-district-card { flex-basis: calc(33.333% - 8px); min-width: 100px; min-height: 96px !important; padding: 14px 8px !important; } .hp-district-icon { font-size: 27px !important; } .hp-district-name { font-size: 12px !important; } .hp-district-card:hover { transform: none !important; } } @media (max-width: 380px) { .hp-district-card { flex-basis: calc(50% - 6px); } } /* ----------------------------------------------------------------- 33e. KNOW THE FAIR PRICE — five balanced cards ----------------------------------------------------------------- */ .hp-bm-cards { display: grid; grid-template-columns: repeat(5, 1fr); gap: 12px; margin-bottom: 20px; } @media (max-width: 1200px) { .hp-bm-cards { grid-template-columns: repeat(3, 1fr); } } @media (max-width: 820px) { .hp-bm-cards { grid-template-columns: repeat(2, 1fr); } } @media (max-width: 520px) { .hp-bm-cards { grid-template-columns: 1fr; } } /* ----------------------------------------------------------------- 33f. FOOTER — social icons as a deliberate row under the logo ----------------------------------------------------------------- */ .al-footer-brand { display: flex; flex-direction: column; align-items: flex-start; } .al-footer-socials { display: flex !important; align-items: center; gap: 10px !important; margin-top: 16px !important; padding: 0 !important; } .al-social-btn { width: 40px !important; height: 40px !important; min-width: 40px; border-radius: 11px !important; font-size: 18px !important; line-height: 1 !important; display: inline-flex !important; align-items: center !important; justify-content: center !important; padding: 0 !important; } .al-social-btn i { line-height: 1; display: block; } @media (max-width: 768px) { .al-footer-brand { align-items: center; } .al-footer-socials { justify-content: center; margin-top: 14px !important; } .al-social-btn { width: 42px !important; height: 42px !important; min-width: 42px; font-size: 19px !important; } } /* ----------------------------------------------------------------- 33g. MOBILE FOOTER ACCORDION — links stack vertically and animate The existing max-height transition and JS binding are untouched; the links simply needed to be block-level to stack, and the panel a little more headroom so longer columns are not clipped. ----------------------------------------------------------------- */ @media (max-width: 768px) { .al-footer-grid > div:not(.al-footer-brand) { border-bottom: 1px solid var(--dx-bar-line) !important; } .al-footer-grid > div:not(.al-footer-brand) .al-footer-col-title { padding: 15px 2px !important; font-size: 12.5px !important; color: #FFFFFF !important; min-height: 48px; /* comfortable touch target */ display: flex !important; align-items: center !important; justify-content: space-between !important; } .al-footer-grid > div:not(.al-footer-brand) .al-footer-col-title::after { color: var(--dx-orange) !important; font-size: 22px !important; transition: transform .28s ease !important; } .al-footer-grid > div:not(.al-footer-brand) .al-footer-links { display: block !important; max-height: 0 !important; overflow: hidden !important; opacity: .35; transition: max-height .3s cubic-bezier(0.4,0,0.2,1), opacity .3s ease, padding .3s ease !important; } .al-footer-grid > div:not(.al-footer-brand).open .al-footer-links { max-height: 460px !important; opacity: 1; padding-bottom: 8px !important; } /* Each link on its own line, full-width and easy to tap */ .al-footer-grid > div:not(.al-footer-brand) .al-footer-link { display: block !important; padding: 10px 2px !important; font-size: 13.5px !important; } } /* ================================================================= 35. PREMIUM PASS — depth, journey, bento, ad types, spacing ----------------------------------------------------------------- One surface language across every "browse"/"explain" section: a navy card lit by a soft radial glow and the DriveX swoosh, so the sections read as designed automotive panels rather than flat blocks. ================================================================= */ :root, body.home { /* Section rhythm — a single spacing scale for the whole homepage */ --dx-sec-y: clamp(38px, 4.2vw, 60px); /* major section */ --dx-sec-y-tight: clamp(26px, 3vw, 40px); /* related/subsection */ --dx-head-gap: clamp(18px, 2vw, 26px); /* heading → content */ } /* ----------------------------------------------------------------- 35a. SHARED CARD SURFACE Reused by Brand, District and Ad Type cards. The glow + swoosh are pseudo-elements, so no extra markup and no image requests. ----------------------------------------------------------------- */ .hp-brand-item, .hp-district-card, .dx-adtype-card { position: relative; isolation: isolate; overflow: hidden; background: radial-gradient(120% 90% at 18% 0%, rgba(255,255,255,0.13) 0%, transparent 55%), linear-gradient(150deg, #0A4A9E 0%, #07367A 46%, #052A5F 100%) !important; } /* Soft brand glow, top-right */ .hp-brand-item::before, .hp-district-card::before, .dx-adtype-card::before { content: ''; position: absolute; top: -46%; right: -26%; width: 78%; padding-bottom: 78%; border-radius: 50%; background: radial-gradient(circle, rgba(249,101,1,0.30) 0%, rgba(249,101,1,0.06) 45%, transparent 70%); opacity: .55; transition: opacity .35s ease, transform .45s ease; pointer-events: none; z-index: -1; display: block !important; } /* The DriveX swoosh, echoing the logo mark */ .hp-brand-item::after, .hp-district-card::after, .dx-adtype-card::after { content: ''; position: absolute; right: -18%; bottom: -34%; width: 116%; height: 116%; background: radial-gradient(closest-side, rgba(255,255,255,0.05), transparent 72%), conic-gradient(from 210deg at 50% 50%, transparent 0deg, rgba(255,255,255,0.055) 42deg, transparent 96deg); transform: rotate(-12deg); pointer-events: none; z-index: -1; transition: transform .5s ease; display: block !important; } .hp-brand-item:hover::before, .hp-district-card:hover::before, .dx-adtype-card:hover::before { opacity: .95; transform: scale(1.08); } .hp-brand-item:hover::after, .hp-district-card:hover::after, .dx-adtype-card:hover::after { transform: rotate(-6deg) scale(1.04); } /* Section backdrop: white with the faintest road-grid + brand wash */ .dx-brandwash { position: relative; background: radial-gradient(60% 55% at 8% 0%, rgba(7,54,122,0.055) 0%, transparent 62%), radial-gradient(48% 48% at 96% 12%, rgba(249,101,1,0.05) 0%, transparent 60%), #FFFFFF; } .dx-brandwash::before { content: ''; position: absolute; inset: 0; background-image: repeating-linear-gradient(90deg, rgba(7,54,122,0.045) 0 1px, transparent 1px 84px); mask-image: linear-gradient(180deg, transparent, #000 22%, #000 78%, transparent); -webkit-mask-image: linear-gradient(180deg, transparent, #000 22%, #000 78%, transparent); pointer-events: none; } .dx-brandwash > * { position: relative; } /* Apply the backdrop to the browse/explain sections */ section:has(#hpBrandGrid), section:has(#hpDistrictGrid) { background: radial-gradient(60% 55% at 8% 0%, rgba(7,54,122,0.055) 0%, transparent 62%), radial-gradient(48% 48% at 96% 12%, rgba(249,101,1,0.05) 0%, transparent 60%), #FFFFFF !important; } /* ----------------------------------------------------------------- 35b. HEADER — message + avatar join the button system ----------------------------------------------------------------- */ .al-hdr-msg { width: 40px; height: 40px; display: inline-flex !important; align-items: center; justify-content: center; border-radius: 10px; background: rgba(255,255,255,0.10) !important; border: 1px solid rgba(255,255,255,0.20) !important; color: #FFFFFF !important; font-size: 18px; } .al-hdr-msg:hover { background: rgba(255,255,255,0.20) !important; border-color: rgba(255,255,255,0.36) !important; } .al-hdr-msg i { color: #FFFFFF !important; } /* Avatar initial sat navy-on-pale-orange inside a blue button — now reads as part of the same control. */ #alUserMenuBtn [data-dx-avatar] { background: rgba(255,255,255,0.20) !important; color: #FFFFFF !important; border: 1px solid rgba(255,255,255,0.28); } @media (max-width: 768px) { .al-hdr-msg { width: 38px; height: 38px; font-size: 17px; } } /* ----------------------------------------------------------------- 35c. HOW DRIVEX WORKS — a connected journey ----------------------------------------------------------------- */ .dx-how-section { background: radial-gradient(70% 60% at 50% 0%, rgba(7,54,122,0.06) 0%, transparent 60%), var(--dx-blue-05) !important; padding: var(--dx-sec-y) 0 !important; border-top: 1px solid var(--dx-line); border-bottom: 1px solid var(--dx-line); } .dx-step-grid { gap: 18px !important; } .dx-step-card { position: relative; background: #FFFFFF !important; border: 1px solid var(--dx-line) !important; border-radius: 16px !important; padding: 26px 20px 22px !important; text-align: center; box-shadow: 0 1px 3px rgba(14,28,49,0.06); transition: transform .3s cubic-bezier(0.34,1.56,0.64,1), box-shadow .3s ease, border-color .3s ease; } .dx-step-card:hover { transform: translateY(-6px); box-shadow: 0 18px 38px rgba(7,54,122,0.14); border-color: var(--dx-blue-20) !important; } /* Numbered badge sits on the card edge */ /* dx-premium.css pins this at `left:24px` and dx-homepage-compact.css shrinks it to 24px under `body.home .dx-how-section` (0,3,0) — both outrank a bare `.dx-step-num`, so the badge has to be re-placed at this weight or it sits in the card's top-left corner. */ body.home .dx-how-section .dx-step-num, .dx-step-num { position: absolute !important; top: -17px !important; left: 50% !important; right: auto !important; transform: translateX(-50%) !important; width: 34px !important; height: 34px !important; font-size: 14px !important; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: 14px; font-weight: 800; background: linear-gradient(135deg,#07367A,#0A4A9E) !important; color: #FFFFFF !important; box-shadow: 0 4px 12px rgba(7,54,122,0.32); border: 3px solid var(--dx-blue-05); z-index: 2; } .dx-step-icon { width: 60px; height: 60px; margin: 14px auto 14px; border-radius: 17px; display: flex; align-items: center; justify-content: center; font-size: 27px; background: linear-gradient(150deg, rgba(7,54,122,0.10), rgba(249,101,1,0.10)) !important; border: 1px solid var(--dx-blue-20) !important; color: var(--dx-blue) !important; transition: transform .35s cubic-bezier(0.34,1.56,0.64,1), background .3s ease, color .3s ease; } .dx-step-card:hover .dx-step-icon { transform: scale(1.1) rotate(-5deg); background: linear-gradient(150deg,#07367A,#0A4A9E) !important; color: #FFFFFF !important; } .dx-step-title { font-size: 15.5px; font-weight: 800; color: var(--dx-ink); margin-bottom: 7px; letter-spacing: -.2px; } .dx-step-desc { font-size: 13px; font-weight: 500; color: var(--dx-ink-2); line-height: 1.6; } /* Connector between steps — draws in when the row scrolls into view */ .dx-step-connector { display: block !important; position: absolute; top: 58px; left: calc(100% + 1px); width: 18px; height: 2px; background: linear-gradient(90deg, var(--dx-blue-20), var(--dx-orange)); opacity: .8; z-index: 1; } .dx-step-connector::after { content: ''; position: absolute; right: -1px; top: 50%; width: 6px; height: 6px; border-top: 2px solid var(--dx-orange); border-right: 2px solid var(--dx-orange); transform: translateY(-50%) rotate(45deg); } @media (max-width: 900px) { .dx-step-grid { grid-template-columns: repeat(2,1fr) !important; } .dx-step-connector { display: none !important; } } @media (max-width: 560px) { .dx-step-grid { grid-template-columns: 1fr !important; gap: 26px !important; } .dx-step-card { padding: 24px 18px 20px !important; } .dx-step-card:hover { transform: none; } } /* ----------------------------------------------------------------- 35d. WHY DRIVEX — bento, not six identical tiles ----------------------------------------------------------------- */ .dx-why-section { padding: var(--dx-sec-y) 0 !important; background: radial-gradient(55% 50% at 92% 6%, rgba(249,101,1,0.06) 0%, transparent 60%), #FFFFFF !important; } /* 12 columns so six cards land in exactly two full rows: row 1 = two hero cards (6 + 6), row 2 = four cards (3 + 3 + 3 + 3). A 6-column grid left the sixth card orphaned on a third row. */ .dx-feature-grid { grid-template-columns: repeat(12, 1fr) !important; gap: 14px !important; } .dx-feature-card { grid-column: span 3; background: #FFFFFF !important; border: 1px solid var(--dx-line) !important; border-radius: 16px !important; padding: 22px 20px !important; box-shadow: 0 1px 3px rgba(14,28,49,0.06); transition: transform .3s cubic-bezier(0.34,1.56,0.64,1), box-shadow .3s ease, border-color .3s ease; position: relative; overflow: hidden; } /* First two are the hero statements — wider, tinted, with a soft brand wash */ .dx-feature-grid .dx-feature-card:nth-child(1), .dx-feature-grid .dx-feature-card:nth-child(2) { grid-column: span 6; background: radial-gradient(80% 100% at 100% 0%, rgba(7,54,122,0.07) 0%, transparent 62%), #FFFFFF !important; padding: 26px 24px !important; } .dx-feature-grid .dx-feature-card:nth-child(1) .dx-feature-icon, .dx-feature-grid .dx-feature-card:nth-child(2) .dx-feature-icon { width: 54px; height: 54px; font-size: 25px; border-radius: 15px; } .dx-feature-card:hover { transform: translateY(-5px); box-shadow: 0 16px 34px rgba(7,54,122,0.13); border-color: var(--dx-blue-20) !important; } .dx-feature-icon { width: 46px; height: 46px; border-radius: 13px; display: flex; align-items: center; justify-content: center; font-size: 21px; margin-bottom: 14px; background: linear-gradient(150deg, rgba(7,54,122,0.10), rgba(249,101,1,0.10)) !important; border: 1px solid var(--dx-blue-20) !important; color: var(--dx-blue) !important; transition: transform .35s cubic-bezier(0.34,1.56,0.64,1), background .3s ease, color .3s ease; } .dx-feature-card:hover .dx-feature-icon { transform: scale(1.08) rotate(-5deg); background: linear-gradient(150deg,#07367A,#0A4A9E) !important; color: #FFFFFF !important; } @media (max-width: 1024px) { .dx-feature-grid { grid-template-columns: repeat(6,1fr) !important; } .dx-feature-card { grid-column: span 3; } .dx-feature-grid .dx-feature-card:nth-child(1), .dx-feature-grid .dx-feature-card:nth-child(2) { grid-column: span 3; } } @media (max-width: 640px) { .dx-feature-grid { grid-template-columns: 1fr !important; } .dx-feature-card, .dx-feature-grid .dx-feature-card:nth-child(1), .dx-feature-grid .dx-feature-card:nth-child(2) { grid-column: span 1; } .dx-feature-card:hover { transform: none; } } /* ----------------------------------------------------------------- 35e. WHAT YOU CAN ADVERTISE ----------------------------------------------------------------- */ .dx-adtypes-section { padding: var(--dx-sec-y) 0 !important; background: radial-gradient(58% 52% at 6% 4%, rgba(7,54,122,0.06) 0%, transparent 60%), var(--dx-blue-05); border-top: 1px solid var(--dx-line); border-bottom: 1px solid var(--dx-line); } .dx-adtype-grid { display: grid; grid-template-columns: repeat(5, 1fr); gap: 14px; } .dx-adtype-card { display: flex; flex-direction: column; align-items: flex-start; gap: 9px; padding: 22px 18px 18px !important; border-radius: 16px !important; border: 1px solid rgba(255,255,255,0.12) !important; text-decoration: none; box-shadow: 0 1px 3px rgba(14,28,49,0.07); transition: transform .3s cubic-bezier(0.34,1.56,0.64,1), box-shadow .3s ease, border-color .3s ease; } .dx-adtype-card:hover { transform: translateY(-6px); box-shadow: 0 18px 38px rgba(7,54,122,0.24); border-color: rgba(249,101,1,0.5) !important; } .dx-adtype-icon { width: 46px; height: 46px; border-radius: 13px; display: flex; align-items: center; justify-content: center; font-size: 22px; background: rgba(255,255,255,0.13); border: 1px solid rgba(255,255,255,0.26); color: #FFFFFF; transition: transform .35s cubic-bezier(0.34,1.56,0.64,1), background .3s ease; } .dx-adtype-card:hover .dx-adtype-icon { transform: scale(1.09) rotate(-5deg); background: var(--dx-orange); border-color: var(--dx-orange); } .dx-adtype-title { font-size: 15px; font-weight: 800; color: #FFFFFF; letter-spacing: -.2px; } .dx-adtype-desc { font-size: 12.5px; font-weight: 500; color: rgba(255,255,255,0.78); line-height: 1.55; flex: 1; } .dx-adtype-cta { display: inline-flex; align-items: center; gap: 6px; margin-top: 4px; font-size: 12.5px; font-weight: 700; color: var(--dx-orange-hi); } .dx-adtype-cta i { transition: transform .28s cubic-bezier(0.34,1.56,0.64,1); } .dx-adtype-card:hover .dx-adtype-cta i { transform: translateX(4px); } @media (max-width: 1100px) { .dx-adtype-grid { grid-template-columns: repeat(3,1fr); } } @media (max-width: 720px) { .dx-adtype-grid { grid-template-columns: repeat(2,1fr); gap: 10px; } } @media (max-width: 420px) { .dx-adtype-grid { grid-template-columns: 1fr; } } @media (max-width: 768px) { .dx-adtype-card:hover { transform: none; } } /* ----------------------------------------------------------------- 35f. DISTRICT — clamp to exactly TWO ROWS until "View All" The clamp is a height, so it always shows two rows of whatever the current breakpoint fits (6 / 4 / 3 / 2 per row). ----------------------------------------------------------------- */ /* Cards are a uniform 118px tall at every breakpoint, so a single clamp shows exactly two rows everywhere — 6 per row on desktop, 4 on tablet, 3 then 2 on phones. Row three starts at 256px at the tightest gap, so 250px always cuts cleanly between row two and row three. */ #hpDistrictGrid { max-height: 250px; overflow: hidden; transition: max-height .45s cubic-bezier(0.4,0,0.2,1); } #hpDistrictGrid.dx-rows-open { max-height: 2600px; } /* ----------------------------------------------------------------- 35g. HOMEPAGE SECTION RHYTHM One scale instead of a dozen ad-hoc paddings. Related blocks sit tighter than major sections; nothing collapses into its neighbour. ----------------------------------------------------------------- */ body.home .hp-cat-section { padding: var(--dx-sec-y-tight) 0 var(--dx-sec-y) !important; } body.home .al-trust-bar { padding: 16px 0 !important; } body.home .dx-compact-head { margin-bottom: var(--dx-head-gap) !important; } body.home section > .al-container > .dx-compact-head:last-child { margin-bottom: 0 !important; } .dx-section-sub { font-size: 13.5px; font-weight: 500; color: var(--dx-ink-2); max-width: 520px; margin: 0 auto; } /* ----------------------------------------------------------------- 35h. SITE-WIDE POLISH — forms, cards, empty states, page heads Applies to every page, not just the homepage. ----------------------------------------------------------------- */ /* Page shells get a hair of brand warmth instead of flat white */ body:not(.home) main { background: #FFFFFF; } /* Inputs: taller, clearer, consistent focus */ input[type="text"], input[type="email"], input[type="tel"], input[type="number"], input[type="password"], input[type="search"], input[type="url"], input[type="date"], input[type="time"], select, textarea, .al-input, .al-select, .al-textarea { padding: 11px 13px !important; font-size: 14px !important; font-weight: 500; } input:hover:not(:focus), select:hover:not(:focus), textarea:hover:not(:focus) { border-color: var(--dx-blue-20) !important; } /* Form sections read as titled blocks */ .al-form-section, .al-form-card, .dx-form-section { background: #FFFFFF !important; border: 1px solid var(--dx-line) !important; border-radius: 16px !important; box-shadow: 0 1px 3px rgba(14,28,49,0.06) !important; } .al-form-section-title, .dx-form-section-title { display: flex; align-items: center; gap: 9px; font-size: 15.5px !important; font-weight: 800 !important; color: var(--dx-ink) !important; padding-bottom: 12px; margin-bottom: 16px; border-bottom: 1px solid var(--dx-line); } .al-form-section-title i, .dx-form-section-title i { width: 30px; height: 30px; flex: 0 0 30px; display: inline-flex; align-items: center; justify-content: center; border-radius: 9px; font-size: 16px; background: linear-gradient(150deg, rgba(7,54,122,0.10), rgba(249,101,1,0.10)); border: 1px solid var(--dx-blue-20); color: var(--dx-blue) !important; } /* Listing-type chooser on Post Your Ad */ .al-listing-type-card { background: #FFFFFF !important; border-radius: 14px !important; transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease, background .22s ease; } .al-listing-type-card:hover { transform: translateY(-2px); box-shadow: 0 8px 20px rgba(7,54,122,0.10); } .al-listing-type-card.selected { background: var(--dx-blue-05) !important; box-shadow: 0 0 0 3px rgba(7,54,122,0.10) !important; } /* Photo upload / dropzones */ .al-upload-area, .al-dropzone, .dx-dropzone, .al-photo-upload { background: var(--dx-blue-05) !important; border: 2px dashed var(--dx-line-2) !important; border-radius: 16px !important; transition: border-color .22s ease, background .22s ease; } .al-upload-area:hover, .al-dropzone:hover, .dx-dropzone:hover, .al-photo-upload:hover { border-color: var(--dx-blue) !important; background: var(--dx-blue-10) !important; } /* Empty states get a branded medallion instead of a lonely glyph */ .al-empty i, .al-empty-state i, .dx-empty i { display: inline-flex; align-items: center; justify-content: center; width: 78px; height: 78px; border-radius: 50%; font-size: 34px !important; background: linear-gradient(150deg, rgba(7,54,122,0.08), rgba(249,101,1,0.08)) !important; border: 1px solid var(--dx-blue-20) !important; color: var(--dx-blue) !important; margin-bottom: 14px; } .al-empty, .al-empty-state, .dx-empty { color: var(--dx-ink-2) !important; } /* Page heads across inner pages */ .al-page-head, .dx-page-head { border-bottom: 1px solid var(--dx-line); padding-bottom: 16px; margin-bottom: var(--dx-head-gap); } /* ----------------------------------------------------------------- 35i. MOTION — scroll reveal for the new sections ----------------------------------------------------------------- */ .dx-adtype-card { will-change: transform; } @media (prefers-reduced-motion: reduce) { .dx-step-card:hover, .dx-feature-card:hover, .dx-adtype-card:hover, .hp-brand-item:hover, .hp-district-card:hover { transform: none !important; } #hpDistrictGrid { transition: none !important; } } /* ----------------------------------------------------------------- 36. PRINT ----------------------------------------------------------------- */ @media print { body { background: #FFFFFF !important; color: #000 !important; } .al-nav, .al-footer, .al-post-btn { display: none !important; } }