/* ===================================================================== DriveX Design System — foundations and global components --------------------------------------------------------------------- ONE colour system, ONE type scale, ONE spacing scale, ONE radius scale, ONE elevation scale, ONE button system, ONE card language. This file is the last stylesheet on the page (enqueued at priority 1000) and is a PURE VISUAL LAYER: it adds no markup, no behaviour, no query. Existing class names are kept exactly as they are — this sheet re-points them at the tokens below instead of at the ~700KB of drifted rules that accumulated across thirteen earlier stylesheets. `!important` appears where an older sheet already used it; without a match the older declaration would win at equal specificity. ===================================================================== */ /* ===================================================================== 1. TOKENS --------------------------------------------------------------------- Brand hexes are pixel-sampled from the official DriveX logo and are NOT changed here. Everything else is derived from them so the interface can never drift into unrelated colours again. ===================================================================== */ :root, body.home, body.home .al-section { /* --- brand ------------------------------------------------------- */ --ds-primary: #07367A; /* DriveX blue — structure, links, primary action */ --ds-primary-hover: #052A61; --ds-primary-light: #0A4A9E; --ds-primary-soft: #EDF3FA; /* tinted surface */ --ds-primary-line: #C9D9EC; /* tinted border */ --ds-accent: #F96501; /* DriveX orange — the single commercial CTA */ --ds-accent-hover: #DB5600; --ds-accent-soft: #FFF3EA; --ds-accent-line: #FBD3B4; --ds-accent-text: #C44A00; /* orange that is legible as small text on white */ --ds-navy: #041730; /* header / footer bar */ /* --- neutral surfaces -------------------------------------------- */ --ds-bg: #FFFFFF; --ds-surface: #FFFFFF; --ds-surface-2: #F7F9FC; --ds-surface-3: #EDF3FA; --ds-border: #E3E9F1; --ds-border-strong: #CBD7E6; /* --- ink ---------------------------------------------------------- */ --ds-ink: #0D1B2E; /* headings, primary text — 16.5:1 */ --ds-ink-2: #41546E; /* body, secondary text — 8.1:1 */ --ds-ink-3: #5E7089; /* muted, captions, labels — 4.9:1 */ --ds-ink-on-brand: #FFFFFF; /* --- semantic (one value per meaning) ----------------------------- */ --ds-success: #0F7A4A; /* text / icon */ --ds-success-fill: #12905A; /* solid fill */ --ds-success-soft: #E7F5EE; --ds-success-line: #B9E0CC; --ds-warning: #A15406; --ds-warning-fill: #E08600; --ds-warning-soft: #FFF5E6; --ds-warning-line: #F5D9AC; --ds-error: #C02626; --ds-error-fill: #DC3232; --ds-error-soft: #FDECEC; --ds-error-line: #F5C6C6; --ds-info: var(--ds-primary); --ds-info-soft: var(--ds-primary-soft); --ds-info-line: var(--ds-primary-line); /* WhatsApp brand, darkened until white label text clears 4.5:1 (5.0:1). Used ONLY on WhatsApp actions. */ --ds-whatsapp: #0F7D3E; --ds-whatsapp-hover: #0C6832; /* White on the logo orange is 3.05:1 — fine for a large CTA label, short of AA for 12px badge text. Small text on an orange fill uses this deeper tone instead (4.8:1), and orange TEXT on white always uses --ds-accent-text (4.85:1) rather than the fill colour. */ --ds-accent-deep: #C44A00; /* --- radius (5 steps, nothing else) ------------------------------- */ --ds-r-xs: 6px; --ds-r-sm: 8px; --ds-r-md: 12px; --ds-r-lg: 16px; --ds-r-xl: 20px; --ds-r-pill: 999px; /* --- elevation (flat, neutral, never coloured) -------------------- */ --ds-e0: none; --ds-e1: 0 1px 2px rgba(13,27,46,.05); --ds-e2: 0 1px 3px rgba(13,27,46,.06), 0 4px 12px rgba(13,27,46,.05); --ds-e3: 0 4px 10px rgba(13,27,46,.07), 0 12px 28px rgba(13,27,46,.07); --ds-e4: 0 24px 60px rgba(13,27,46,.20); --ds-ring: 0 0 0 3px rgba(7,54,122,.22); /* --- spacing ------------------------------------------------------ */ --ds-1: 4px; --ds-2: 8px; --ds-3: 12px; --ds-4: 16px; --ds-5: 20px; --ds-6: 24px; --ds-8: 32px; --ds-10: 40px; --ds-12: 48px; --ds-16: 64px; --ds-20: 80px; /* --- type scale --------------------------------------------------- */ --ds-fs-display: clamp(28px, 6.2vw, 52px); --ds-fs-h1: clamp(23px, 4.4vw, 34px); --ds-fs-h2: clamp(20px, 3.2vw, 27px); --ds-fs-h3: clamp(17px, 2.2vw, 20px); --ds-fs-h4: 16px; --ds-fs-body: 15px; --ds-fs-sm: 13.5px; --ds-fs-caption: 12.5px; --ds-fs-label: 12px; /* uppercase, 700 — the floor for any text */ /* --- control heights ---------------------------------------------- */ --ds-ctl-sm: 34px; --ds-ctl-md: 42px; --ds-ctl-lg: 48px; /* --- motion ------------------------------------------------------- */ --ds-fast: .15s; --ds-base: .22s; --ds-ease: cubic-bezier(.4, 0, .2, 1); /* --- section rhythm ----------------------------------------------- */ --ds-sec-y: clamp(40px, 6vw, 72px); } /* Re-point the legacy token names at the system so every rule written against the old names inherits the consolidated palette automatically. */ :root, body.home, body.home .al-section { --accent: var(--ds-accent); --accent-2: var(--ds-accent-hover); --green: var(--ds-success-fill); --red: var(--ds-error-fill); /* `--purple` and `--cyan` carried no meaning — they were decorative variety on About / Advertise / Market Price icon lists. Re-pointing the tokens removes the stray hues everywhere at once, without touching a template. */ --purple: var(--ds-primary); --purple-rgb: 7, 54, 122; --blue: var(--ds-primary-light); --cyan: var(--ds-primary-light); --gold: var(--ds-warning-fill); --radius: var(--ds-r-lg); --radius-sm: var(--ds-r-sm); --shadow: var(--ds-e2); /* Ink: there were two parallel scales a shade apart (--text/--dx-ink at #0E1C31 vs the system's #0D1B2E). Both now resolve to one. */ --text: var(--ds-ink); --text2: var(--ds-ink-2); --text3: var(--ds-ink-3); --dx-ink: var(--ds-ink); --dx-ink-2: var(--ds-ink-2); --dx-ink-3: var(--ds-ink-3); /* Surfaces and lines */ --bg: var(--ds-bg); --bg2: var(--ds-surface-2); --bg3: var(--ds-surface-3); --card: var(--ds-surface); --card2: var(--ds-surface-2); --card-hover: var(--ds-surface-2); --border: var(--ds-border); --border2: var(--ds-border-strong); --dx-line: var(--ds-border); --dx-line-2: var(--ds-border-strong); /* Brand aliases */ --dx-blue: var(--ds-primary); --dx-blue-hi: var(--ds-primary-light); --dx-blue-deep: var(--ds-primary-hover); --dx-blue-05: var(--ds-primary-soft); --dx-blue-10: var(--ds-primary-soft); --dx-blue-20: var(--ds-primary-line); --dx-orange: var(--ds-accent); --dx-orange-deep: var(--ds-accent-hover); --dx-orange-text: var(--ds-accent-text); --dx-orange-05: var(--ds-accent-soft); --dx-orange-10: var(--ds-accent-soft); --orange: var(--ds-accent); --navy: var(--ds-primary); --navy2: var(--ds-primary-light); } /* ===================================================================== 2. TYPOGRAPHY --------------------------------------------------------------------- Space Grotesk for headings (confident, slightly technical — reads as automotive), DM Sans for everything else (highly legible at small sizes). Two families only; the third loaded family was never used. ===================================================================== */ body { font-size: var(--ds-fs-body); line-height: 1.6; color: var(--ds-ink-2); text-rendering: optimizeLegibility; } h1, h2, h3, h4, h5, h6, .al-section-title, .al-hero-title, .dx-sec-title { color: var(--ds-ink); font-family: var(--font-head, 'Space Grotesk'), system-ui, sans-serif; letter-spacing: -0.015em; text-wrap: balance; } h1, .al-hero-title { font-size: var(--ds-fs-h1); line-height: 1.14; font-weight: 800; } h2, .al-section-title, .dx-sec-title { font-size: var(--ds-fs-h2); line-height: 1.2; font-weight: 800; } h3 { font-size: var(--ds-fs-h3); line-height: 1.3; font-weight: 700; } h4 { font-size: var(--ds-fs-h4); line-height: 1.35; font-weight: 700; } p { text-wrap: pretty; } p, li { max-width: 72ch; } .al-container p.al-full, .al-detail-desc p { max-width: none; } /* --- readability floor ------------------------------------------------ Every one of these carried real content at 9–11px, which is unreadable on a phone. Nothing that a user has to read is below 12.5px now; the 12px floor is reserved for uppercase 700-weight labels. */ .al-vcard-make, .dx-dcard-make, .al-spec-key, .al-vcard-loc, .al-vcard-time, .al-spec-tag, .hp-cat-count, .hp-brand-name, .price-note, .pu-label, .dx-hp-taxi-loc, .dx-pay-warn-head, .dx-pay-warn-text, .bm-chip, .bm-vote-btn, .al-cal-label, .dx-eyebrow, .al-verified-badge, .dx-sn-btn { font-size: var(--ds-fs-caption) !important; line-height: 1.4; } .al-vcard-make, .dx-dcard-make, .al-spec-key, .dx-eyebrow, .pu-label, .al-cal-label { font-size: var(--ds-fs-label) !important; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--ds-ink-3); } /* Badges were rendered at 8px, 10px and 11.5px depending on which sheet reached them; the attribute selector catches the inline sizes too. */ .al-badge, .al-badge-featured, .al-badge-urgent, .al-badge-ev, span[class*="al-badge"], div[class*="al-badge"], .al-vcard-badges .al-badge, .al-detail-gallery .al-badge, .al-vcard-badges span, .dx-taxi-vt, .dx-taxi-boost, .dx-hp-taxi-type { font-size: var(--ds-fs-label) !important; letter-spacing: .045em; } /* Several hundred elements carry an inline font-size between 8px and 11px — eyebrows, unit suffixes, table captions, badge text — written straight into the templates, so no class selector can reach them. Anything a person has to read is raised to the 12.5px floor; 11px is kept only where the element is an uppercase label. */ [style*="font-size:8px"], [style*="font-size: 8px"], [style*="font-size:9px"], [style*="font-size: 9px"], [style*="font-size:9.5px"],[style*="font-size: 9.5px"], [style*="font-size:10px"], [style*="font-size: 10px"], [style*="font-size:10.5px"], [style*="font-size: 10.5px"], [style*="font-size:11px"], [style*="font-size: 11px"], [style*="font-size:11.5px"], [style*="font-size: 11.5px"] { font-size: 12.5px !important; line-height: 1.4; } /* Uppercase micro-labels may stay at 11.5px — they are short, bold and not read as prose. */ [style*="text-transform:uppercase"][style*="font-size:10px"], [style*="text-transform:uppercase"][style*="font-size:11px"], [style*="text-transform: uppercase"][style*="font-size:10px"], [style*="text-transform: uppercase"][style*="font-size:11px"] { font-size: var(--ds-fs-label) !important; } /* Muted greys that failed contrast on white. */ .al-vcard-loc, .al-vcard-time, .hp-cat-count, .al-muted, .dx-sec-sub, .al-section-sub { color: var(--ds-ink-3) !important; } /* ===================================================================== 3. FOCUS, MOTION, SELECTION ===================================================================== */ :where(a, button, input, select, textarea, [tabindex]):focus-visible { outline: 2px solid var(--ds-primary); outline-offset: 2px; border-radius: var(--ds-r-xs); } .al-btn:focus-visible, .al-post-btn:focus-visible { outline: 2px solid var(--ds-ink); outline-offset: 3px; } ::selection { background: var(--ds-primary); color: #fff; } /* Interactive surfaces must say so. */ a, button, [role="button"], .al-vcard, .hp-cat-card, .hp-brand-card, .hp-district-card, .al-thumb, .dx-adtype-card { cursor: pointer; } /* One motion language: short, transform/opacity only, never bouncy. */ .al-btn, .al-vcard, .hp-cat-card, .hp-brand-card, .hp-district-card, .al-card, .dx-card, .al-thumb, .al-dropdown-item, .dx-adtype-card { transition: transform var(--ds-base) var(--ds-ease), box-shadow var(--ds-base) var(--ds-ease), border-color var(--ds-fast) var(--ds-ease), background-color var(--ds-fast) var(--ds-ease), color var(--ds-fast) var(--ds-ease) !important; } /* `:root:root *` (0,2,0) is required to outrank the transition shorthands that older sheets set with !important on element selectors. */ @media (prefers-reduced-motion: reduce) { :root:root *, :root:root *::before, :root:root *::after { animation-duration: .001ms !important; animation-iteration-count: 1 !important; transition-duration: .001ms !important; scroll-behavior: auto !important; } :root:root .dx-reveal { opacity: 1 !important; transform: none !important; } } /* ===================================================================== 4. BUTTONS --------------------------------------------------------------------- Three sizes, four roles, one radius. Height is set by padding + a min-height so a button never inflates to 55–99px again, and never drops below the 44px comfortable-tap size where it is a primary mobile action. ===================================================================== */ .al-btn, a.al-btn, button.al-btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: var(--ds-ctl-md) !important; height: auto !important; padding: 10px 18px !important; font-family: var(--font-head, 'Space Grotesk'), system-ui, sans-serif; font-size: 14px !important; font-weight: 700 !important; line-height: 1.2 !important; letter-spacing: -0.005em; border-radius: var(--ds-r-md) !important; border: 1px solid transparent; text-decoration: none; white-space: nowrap; overflow: visible !important; } .al-btn i { font-size: 16px; line-height: 1; flex-shrink: 0; } .al-btn-sm, a.al-btn-sm, button.al-btn-sm { min-height: var(--ds-ctl-sm) !important; padding: 7px 13px !important; font-size: 13px !important; border-radius: var(--ds-r-sm) !important; } .al-btn-sm i { font-size: 15px; } .al-btn-lg, a.al-btn-lg, button.al-btn-lg { min-height: var(--ds-ctl-lg) !important; padding: 13px 24px !important; font-size: 15px !important; border-radius: var(--ds-r-md) !important; } /* The decorative sheen older sheets painted over every button read as a 2015 gradient button. Removed; state is carried by colour and elevation. */ .al-btn::after, .al-btn::before { display: none !important; } /* --- role: primary (structural action) ------------------------------- */ .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: var(--ds-primary) !important; color: #fff !important; border-color: var(--ds-primary) !important; box-shadow: var(--ds-e1) !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: var(--ds-primary-hover) !important; border-color: var(--ds-primary-hover) !important; box-shadow: var(--ds-e2) !important; transform: none !important; } /* --- role: accent (the one commercial CTA) --------------------------- */ .al-post-btn, body.home .al-post-btn, .al-btn-accent, .dx-promo-cta, .dx-dealer-cta-btn { background: var(--ds-accent) !important; color: #fff !important; border-color: var(--ds-accent) !important; box-shadow: var(--ds-e1) !important; } .al-post-btn:hover, body.home .al-post-btn:hover, .al-btn-accent:hover, .dx-dealer-cta-btn:hover { background: var(--ds-accent-hover) !important; border-color: var(--ds-accent-hover) !important; box-shadow: var(--ds-e2) !important; transform: none !important; } /* --- role: secondary (outlined) --------------------------------------- */ .al-btn-ghost, .dx-dealer-cta-ghost, .al-btn-outline, .al-btn-secondary { background: #fff !important; color: var(--ds-primary) !important; border: 1px solid var(--ds-border-strong) !important; box-shadow: none !important; font-weight: 700 !important; } .al-btn-ghost:hover, .dx-dealer-cta-ghost:hover, .al-btn-outline:hover, .al-btn-secondary:hover { background: var(--ds-primary-soft) !important; border-color: var(--ds-primary) !important; color: var(--ds-primary-hover) !important; transform: none !important; } /* --- role: tertiary / quiet -------------------------------------------- */ .al-btn-text, .al-btn-link { background: transparent !important; border-color: transparent !important; color: var(--ds-primary) !important; padding-left: 8px !important; padding-right: 8px !important; box-shadow: none !important; } .al-btn-text:hover, .al-btn-link:hover { background: var(--ds-primary-soft) !important; } /* --- semantic buttons -------------------------------------------------- */ .al-btn-blue { background: var(--ds-primary) !important; color: #fff !important; border-color: var(--ds-primary) !important; } .al-btn-blue:hover { background: var(--ds-primary-hover) !important; } .al-btn-green { background: var(--ds-success-fill) !important; color: #fff !important; border-color: var(--ds-success-fill) !important; } .al-btn-green:hover { background: var(--ds-success) !important; } .al-btn-danger, .al-btn-red { background: var(--ds-error-fill) !important; color: #fff !important; border-color: var(--ds-error-fill) !important; } .al-btn-danger:hover, .al-btn-red:hover { background: var(--ds-error) !important; } /* WhatsApp keeps its brand colour — flat, not a gradient slab. */ .al-btn-whatsapp, .dx-wa-btn { background: var(--ds-whatsapp) !important; color: #fff !important; border-color: var(--ds-whatsapp) !important; box-shadow: var(--ds-e1) !important; } .al-btn-whatsapp:hover, .dx-wa-btn:hover { background: var(--ds-whatsapp-hover) !important; transform: none !important; } /* --- disabled / busy ---------------------------------------------------- */ .al-btn:disabled, .al-btn[disabled], .al-btn.is-loading, .al-btn[aria-disabled="true"] { opacity: .55 !important; cursor: not-allowed !important; box-shadow: none !important; transform: none !important; filter: grayscale(.25); } /* --- icon-only buttons keep a comfortable tap area ---------------------- */ .al-icon-btn, .al-hdr-msg, .al-cal-nav, .al-fav-btn, .dx-icon-btn { display: inline-flex; align-items: center; justify-content: center; min-width: 38px; min-height: 38px; border-radius: var(--ds-r-sm); } /* ===================================================================== 5. FORM CONTROLS --------------------------------------------------------------------- One height, one radius, one border, one focus ring — across every form in the site (search, filters, post-ad, dealer registration, admin). ===================================================================== */ input[type="text"], input[type="email"], input[type="tel"], input[type="url"], input[type="number"], input[type="password"], input[type="search"], input[type="date"], input[type="time"], input[type="datetime-local"], select, textarea, .al-input, .al-select, .al-textarea, .al-form-input, .al-form-select { width: 100%; min-height: var(--ds-ctl-lg); padding: 11px 14px; font-family: var(--font-body, 'DM Sans'), system-ui, sans-serif; font-size: 15px; /* 16px-equivalent rendering; never triggers iOS zoom below 16 */ line-height: 1.4; color: var(--ds-ink); background: #fff; border: 1px solid var(--ds-border-strong); border-radius: var(--ds-r-sm); box-shadow: none; transition: border-color var(--ds-fast) var(--ds-ease), box-shadow var(--ds-fast) var(--ds-ease); -webkit-appearance: none; appearance: none; } textarea { min-height: 120px; padding-top: 12px; resize: vertical; } /* iOS zooms the page when a focused field is under 16px. */ @media (max-width: 768px) { input[type="text"], input[type="email"], input[type="tel"], input[type="url"], input[type="number"], input[type="password"], input[type="search"], input[type="date"], select, textarea, .al-input, .al-select, .al-textarea { font-size: 16px; } } select, .al-select { padding-right: 38px; background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%235E7089' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right 13px center; background-size: 16px; } input:hover, select:hover, textarea:hover { border-color: var(--ds-ink-3); } input:focus, select:focus, textarea:focus, .al-input:focus, .al-select:focus, .al-textarea:focus { border-color: var(--ds-primary) !important; box-shadow: var(--ds-ring) !important; outline: none !important; } input::placeholder, textarea::placeholder { color: var(--ds-ink-3); opacity: 1; } input:disabled, select:disabled, textarea:disabled { background: var(--ds-surface-2); color: var(--ds-ink-3); cursor: not-allowed; } /* Labels and helper text */ .al-label, .al-form-label, label.al-label { display: block; margin-bottom: 6px; font-size: var(--ds-fs-label); font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--ds-ink-3); } .al-help, .al-form-help, .dx-field-help { margin-top: 5px; font-size: var(--ds-fs-caption); color: var(--ds-ink-3); } /* Validation — colour is never the only signal, the message carries it. */ .al-input.error, .al-select.error, input.error, select.error, textarea.error, [aria-invalid="true"] { border-color: var(--ds-error-fill) !important; box-shadow: 0 0 0 3px rgba(220,50,50,.16) !important; } .al-error, .al-field-error, .dx-error-msg { display: flex; align-items: flex-start; gap: 6px; margin-top: 6px; font-size: var(--ds-fs-caption); font-weight: 600; color: var(--ds-error); } .al-input.valid, input.valid { border-color: var(--ds-success-fill) !important; } /* Checkbox / radio — real controls, tinted to the brand. */ input[type="checkbox"], input[type="radio"] { width: 19px; height: 19px; min-height: 0; padding: 0; margin: 0; accent-color: var(--ds-primary); border-radius: 5px; cursor: pointer; flex-shrink: 0; -webkit-appearance: auto; appearance: auto; } input[type="radio"] { border-radius: 50%; } /* ===================================================================== 6. SURFACES — one card language --------------------------------------------------------------------- Subtle border + near-flat elevation. No heavy shadows, no random radii, no competing card styles. ===================================================================== */ .al-card, .dx-card, .al-detail-price-card, .al-filter-sidebar, .al-portal-card, .al-dash-card, .al-stat-card, .al-spec-item, .dx-panel, .al-box { background: var(--ds-surface) !important; border: 1px solid var(--ds-border) !important; border-radius: var(--ds-r-lg) !important; box-shadow: var(--ds-e1) !important; } /* Radius consolidation — nineteen values collapse to the five-step scale. */ [style*="border-radius:5px"], [style*="border-radius: 5px"], [style*="border-radius:6px"], [style*="border-radius: 6px"], [style*="border-radius:7px"], [style*="border-radius: 7px"] { border-radius: var(--ds-r-xs) !important; } [style*="border-radius:9px"], [style*="border-radius: 9px"], [style*="border-radius:10px"], [style*="border-radius: 10px"], [style*="border-radius:11px"], [style*="border-radius: 11px"] { border-radius: var(--ds-r-sm) !important; } [style*="border-radius:13px"], [style*="border-radius: 13px"], [style*="border-radius:14px"], [style*="border-radius: 14px"] { border-radius: var(--ds-r-md) !important; } [style*="border-radius:18px"], [style*="border-radius: 18px"] { border-radius: var(--ds-r-lg) !important; } [style*="border-radius:24px"], [style*="border-radius: 24px"] { border-radius: var(--ds-r-xl) !important; } [style*="border-radius:50px"], [style*="border-radius: 50px"] { border-radius: var(--ds-r-pill) !important; } /* Elevation consolidation — the coloured glows read as a template. */ [style*="box-shadow:0 4px 16px rgba(249,115,22"], [style*="box-shadow: 0 4px 16px rgba(249,115,22"], [style*="box-shadow:0 4px 20px rgba(37,211,102"], [style*="box-shadow:0 2px 8px rgba(61,214,140"], [style*="box-shadow:0 2px 8px rgba(232,82,82"] { box-shadow: var(--ds-e2) !important; } hr, .al-divider, .al-hr { border: 0; border-top: 1px solid var(--ds-border); margin: var(--ds-5) 0; } /* ===================================================================== 7. BADGES AND PILLS --------------------------------------------------------------------- One shape, one size, semantic colour only. Badges are labels, not decorations — the listing image is what should carry the eye. ===================================================================== */ .al-badge, .dx-badge, .al-status-badge, .al-chip { display: inline-flex; align-items: center; gap: 5px; padding: 4px 9px; font-family: var(--font-body, 'DM Sans'), system-ui, sans-serif; font-size: 11px !important; font-weight: 700; line-height: 1.35; letter-spacing: .045em; text-transform: uppercase; border-radius: var(--ds-r-xs) !important; border: 1px solid transparent; white-space: nowrap; } .al-badge i, .dx-badge i { font-size: 12px; } .al-badge-featured, .al-badge-boosted { background: var(--ds-accent) !important; color: #fff !important; border-color: transparent !important; } .al-badge-urgent { background: var(--ds-error-soft) !important; color: var(--ds-error) !important; border-color: var(--ds-error-line) !important; } .al-badge-ev, .al-badge-success, .al-badge-active { background: var(--ds-success-soft) !important; color: var(--ds-success) !important; border-color: var(--ds-success-line) !important; } .al-badge-pending, .al-badge-warning { background: var(--ds-warning-soft) !important; color: var(--ds-warning) !important; border-color: var(--ds-warning-line) !important; } .al-badge-info, .al-badge-new, .al-ai-pill, .al-verified-badge { background: var(--ds-primary-soft) !important; color: var(--ds-primary) !important; border-color: var(--ds-primary-line) !important; } .al-badge-muted, .al-badge-draft, .al-badge-expired { background: var(--ds-surface-3) !important; color: var(--ds-ink-3) !important; border-color: var(--ds-border) !important; } /* Eyebrow labels above section titles */ .dx-eyebrow, .dx-eyebrow-gold { display: inline-flex; align-items: center; gap: 6px; padding: 5px 11px; background: var(--ds-accent-soft) !important; color: var(--ds-accent-text) !important; border: 1px solid var(--ds-accent-line) !important; border-radius: var(--ds-r-pill) !important; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; } /* ===================================================================== 8. COLOUR CONSOLIDATION --------------------------------------------------------------------- The audit found two oranges (#F96501 brand + #F97316 Tailwind), two greens, two reds, plus stray purple / cyan / amber accents that carried no meaning. Everything is mapped onto the palette above. Substring matching on inline styles is anchored with a trailing `;` or `)` so an 8-digit alpha hex (#00C89622) can never be caught by the rule written for the solid colour. ===================================================================== */ [style*="color:#F97316"], [style*="color: #F97316"], [style*="color:#f97316"], [style*="color: #f97316"] { color: var(--ds-accent-text) !important; } [style*="background:#F97316"], [style*="background: #F97316"], [style*="background:#f97316"] { background: var(--ds-accent) !important; } [style*="color:#00C896;"], [style*="color:#3DD68C;"], [style*="color:#10B981;"], [style*="color:#22C55E;"] { color: var(--ds-success) !important; } [style*="background:#00C896;"], [style*="background:#3DD68C;"] { background: var(--ds-success-fill) !important; } [style*="color:#E85252;"], [style*="color:#EF4444;"] { color: var(--ds-error) !important; } [style*="background:#E85252;"], [style*="background:#EF4444;"] { background: var(--ds-error-fill) !important; } [style*="color:#9B6DFF"], [style*="color:#9B5DE5"], [style*="color:#9b5de5"], [style*="color:#8B5CF6"], [style*="color:#8b5cf6"], [style*="color:#A855F7"], [style*="color:#60D0FF"], [style*="color:#4A9EFF"], [style*="color:#06B6D4"], [style*="color:#06b6d4"], [style*="color:#F5A623"], [style*="color:#0090FF"] { color: var(--ds-primary) !important; } /* ANCHOR THE SEMICOLON. An 8-digit alpha hex (#60D0FF22, a 13%-opacity tint) also matches the substring written for the solid colour — repainting a soft pill as a solid block and, where the label used the same hex, making the text invisible. Every solid-colour match below ends in `;`. */ [style*="background:#9B6DFF;"], [style*="background:#9B5DE5;"], [style*="background:#8B5CF6;"], [style*="background:#60D0FF;"], [style*="background:#4A9EFF;"], [style*="background:#06B6D4;"] { background: var(--ds-primary) !important; color: #fff !important; } /* The alpha-tint variants become proper soft pills instead. */ [style*="background:#60D0FF22"], [style*="background:#4A9EFF22"], [style*="background:#9B5DE522"], [style*="background:#9B6DFF22"] { background: var(--ds-primary-soft) !important; color: var(--ds-primary) !important; } [style*="background:#00C89622"], [style*="background:#3DD68C22"] { background: var(--ds-success-soft) !important; color: var(--ds-success) !important; } [style*="background:#F5A62322"], [style*="background:#FFB02E22"] { background: var(--ds-warning-soft) !important; color: var(--ds-warning) !important; } [style*="background:#E8525222"], [style*="background:#EF444422"] { background: var(--ds-error-soft) !important; color: var(--ds-error) !important; } /* Soft tints written against the old Tailwind orange and the old mint green. They read as separate hues next to the brand tints, so they are folded in. */ [style*="rgba(249,115,22,.06)"], [style*="rgba(249,115,22,.07)"], [style*="rgba(249,115,22,.08)"], [style*="rgba(249,115,22,.1)"], [style*="rgba(249,115,22,.12)"], [style*="rgba(249,115,22,.15)"], [style*="rgba(249, 115, 22, 0.08)"], [style*="rgba(249, 115, 22, 0.1)"], .al-acct-card.selected { background-color: var(--ds-accent-soft) !important; border-color: var(--ds-accent-line) !important; } [style*="rgba(61,214,140,.06)"], [style*="rgba(61,214,140,.08)"], [style*="rgba(61,214,140,.1)"], [style*="rgba(61,214,140,.12)"], [style*="rgba(0,200,150,.1)"], [style*="rgba(0,200,150,.12)"], [style*="rgba(34,197,94,.12)"] { background-color: var(--ds-success-soft) !important; border-color: var(--ds-success-line) !important; } [style*="color:#3DD68C"], [style*="color:#22C55E"], [style*="color:#22c55e"], [style*="color:#10B981"], [style*="color:#00C896"] { color: var(--ds-success) !important; } [style*="color:#EF4444"], [style*="color:#ef4444"], [style*="color:#E85252"], [style*="color:#E83A3A"], [style*="color:#C62828"] { color: var(--ds-error) !important; } /* White text on a brand fill — re-asserted at the end of the file too, because the semantic-colour block above otherwise repaints these. */ [style*="background:var(--accent)"], [style*="background: var(--accent)"], [style*="background:var(--ds-accent)"] { color: #fff !important; } /* `#0a0c0f` was the dark theme's page background, used as the LABEL colour on roughly 140 coloured fills. On a light site it is near-black text on a saturated chip — 2:1 at best. White is the correct label on all of them. */ [style*="color:#0a0c0f"], [style*="color: #0a0c0f"], [style*="color:#0A0C0F"], [style*="color:#0D0D1A"] { color: #fff !important; } /* Links */ a { color: var(--ds-primary); text-underline-offset: 2px; } a:hover { color: var(--ds-primary-hover); } main a:not(.al-btn):not(.al-vcard):not(.hp-cat-card):not(.hp-brand-card):not([class*="card"]):not(.al-dropdown-item):not(.al-nav-link):hover { text-decoration: underline; } /* ===================================================================== 9. HEADER --------------------------------------------------------------------- One navy bar. Exactly ONE filled button (Post Your Ad, orange). Sign In and the account control are quiet outlined controls of the same size and shape, so the profile area no longer reads as a second, competing CTA. ===================================================================== */ .al-nav { background: var(--ds-navy) !important; border-bottom: 1px solid rgba(255,255,255,.08) !important; box-shadow: none !important; } .al-nav-inner { gap: var(--ds-4); } .al-nav-link { font-size: 14px !important; font-weight: 600 !important; color: rgba(255,255,255,.78) !important; padding: 8px 12px !important; border-radius: var(--ds-r-sm) !important; background: transparent !important; } .al-nav-link:hover { color: #fff !important; background: rgba(255,255,255,.09) !important; } .al-nav-link.active { color: #fff !important; background: rgba(255,255,255,.12) !important; font-weight: 700 !important; } .al-nav-link.active::after, .al-nav-link::after { display: none !important; } /* Sign In + account: identical quiet treatment, no fill. */ .al-nav-right .al-btn-ghost, .al-nav-right .al-btn-ghost.al-btn-sm, #alUserMenuBtn { background: rgba(255,255,255,.07) !important; color: #fff !important; border: 1px solid rgba(255,255,255,.22) !important; border-radius: var(--ds-r-sm) !important; font-weight: 600 !important; font-size: 13px !important; min-height: 38px !important; padding: 7px 14px !important; box-shadow: none !important; } .al-nav-right .al-btn-ghost:hover, #alUserMenuBtn:hover { background: rgba(255,255,255,.16) !important; border-color: rgba(255,255,255,.38) !important; color: #fff !important; transform: none !important; } #alUserMenuBtn [data-dx-avatar] { background: rgba(255,255,255,.16) !important; color: #fff !important; border: 1px solid rgba(255,255,255,.22); } /* Message icon matches the account control exactly. */ .al-hdr-msg { width: 38px !important; height: 38px !important; border-radius: var(--ds-r-sm) !important; background: rgba(255,255,255,.07) !important; border: 1px solid rgba(255,255,255,.22) !important; color: #fff !important; } .al-hdr-msg:hover { background: rgba(255,255,255,.16) !important; color: #fff !important; } .al-hdr-msg i { font-size: 18px !important; } .al-hdr-msg-badge { background: var(--ds-accent) !important; box-shadow: 0 0 0 2px var(--ds-navy) !important; font-size: 10px !important; } /* The single filled action in the bar. */ .al-nav-right .al-post-btn { min-height: 38px !important; padding: 8px 16px !important; border-radius: var(--ds-r-sm) !important; font-size: 13.5px !important; font-weight: 700 !important; box-shadow: none !important; } .al-nav-right .al-post-btn:hover { box-shadow: var(--ds-e2) !important; } /* Account dropdown */ .al-user-dropdown { border-radius: var(--ds-r-md) !important; border: 1px solid var(--ds-border) !important; box-shadow: var(--ds-e3) !important; padding: 6px !important; } .al-dropdown-item { border-radius: var(--ds-r-sm) !important; font-size: 14px !important; color: var(--ds-ink-2) !important; min-height: 40px; } .al-dropdown-item:hover { background: var(--ds-primary-soft) !important; color: var(--ds-primary) !important; } @media (max-width: 768px) { /* A phone header is its own design: logo + a 3-control cluster that always fits at 320px, not a squeezed desktop bar. */ .al-nav-inner { padding: 0 12px !important; gap: 8px !important; } .al-nav-right { gap: 6px !important; } .al-nav-right .al-btn-ghost, #alUserMenuBtn, .al-hdr-msg { min-height: 36px !important; height: 36px !important; width: auto; padding: 0 11px !important; font-size: 12.5px !important; } .al-hdr-msg { width: 36px !important; padding: 0 !important; } .al-nav-right .al-post-btn { min-height: 36px !important; padding: 0 12px !important; font-size: 12.5px !important; } .al-post-icon { display: inline-flex !important; font-size: 14px !important; } .al-post-text { font-size: 12.5px !important; } } @media (max-width: 380px) { /* At 320–380px the label yields before the tap target does. */ .al-nav-right .al-post-btn .al-post-text { display: none !important; } .al-nav-right .al-post-btn { width: 36px; padding: 0 !important; justify-content: center; } .al-post-icon { font-size: 17px !important; } .al-nav-inner { padding: 0 10px !important; } } /* ===================================================================== 10. TABLES (admin, wallet, reports) --------------------------------------------------------------------- Desktop keeps the table. Mobile turns each row into a labelled card — the same markup, no functionality touched. ===================================================================== */ .al-table, table.al-admin-table, .dx-table { width: 100%; border-collapse: separate; border-spacing: 0; font-size: var(--ds-fs-sm); } .al-table th, .dx-table th { padding: 11px 14px; font-size: var(--ds-fs-label); font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--ds-ink-3); background: var(--ds-surface-2); border-bottom: 1px solid var(--ds-border); text-align: left; } .al-table td, .dx-table td { padding: 13px 14px; border-bottom: 1px solid var(--ds-border); color: var(--ds-ink-2); vertical-align: middle; } .al-table tbody tr:hover td { background: var(--ds-surface-2); } .al-table-wrap, .dx-table-wrap { overflow-x: auto; -webkit-overflow-scrolling: touch; border-radius: var(--ds-r-md); } /* ===================================================================== 11. EMPTY, LOADING AND MESSAGE STATES ===================================================================== */ .al-empty, .dx-empty, .al-no-results { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 10px; padding: 48px 24px; text-align: center; background: var(--ds-surface-2); border: 1px dashed var(--ds-border-strong); border-radius: var(--ds-r-lg); color: var(--ds-ink-3); } .al-empty i, .dx-empty i { font-size: 32px; color: var(--ds-border-strong); } .al-empty h3, .dx-empty h3 { font-size: var(--ds-fs-h4); color: var(--ds-ink); margin: 0; } .al-empty p, .dx-empty p { font-size: var(--ds-fs-sm); margin: 0; max-width: 42ch; } .al-notice, .al-alert, .dx-notice { display: flex; gap: 10px; align-items: flex-start; padding: 13px 15px; border-radius: var(--ds-r-md); border: 1px solid var(--ds-border); background: var(--ds-surface-2); font-size: var(--ds-fs-sm); color: var(--ds-ink-2); } .al-notice-success, .al-alert-success { background: var(--ds-success-soft); border-color: var(--ds-success-line); color: var(--ds-success); } .al-notice-error, .al-alert-error, .al-notice-danger { background: var(--ds-error-soft); border-color: var(--ds-error-line); color: var(--ds-error); } .al-notice-warning, .al-alert-warning { background: var(--ds-warning-soft); border-color: var(--ds-warning-line); color: var(--ds-warning); } .al-notice-info, .al-alert-info { background: var(--ds-info-soft); border-color: var(--ds-info-line); color: var(--ds-primary); } @keyframes ds-skeleton { 0% { background-position: 100% 0; } 100% { background-position: -100% 0; } } .dx-skeleton, .al-skeleton { background: linear-gradient(90deg, var(--ds-surface-2) 25%, var(--ds-surface-3) 37%, var(--ds-surface-2) 63%); background-size: 300% 100%; animation: ds-skeleton 1.3s ease-in-out infinite; border-radius: var(--ds-r-sm); } /* ===================================================================== 12. MODALS, DROPDOWNS, TOASTS --------------------------------------------------------------------- z-index scale: dropdown 100, sticky 200, overlay 900, modal 1000, toast 1100. Modals are sheets on a phone and dialogs on a desktop. ===================================================================== */ .al-modal, .dx-modal, .al-modal-overlay { z-index: 1000; background: rgba(4, 23, 48, .55); backdrop-filter: blur(2px); } .al-modal-box, .dx-modal-box, .al-modal-content { background: var(--ds-surface) !important; border: 1px solid var(--ds-border) !important; border-radius: var(--ds-r-xl) !important; box-shadow: var(--ds-e4) !important; max-height: calc(100dvh - 32px); overflow-y: auto; -webkit-overflow-scrolling: touch; } @media (max-width: 600px) { .al-modal-box, .dx-modal-box, .al-modal-content { width: 100% !important; max-width: 100% !important; margin: 0 !important; border-radius: var(--ds-r-xl) var(--ds-r-xl) 0 0 !important; max-height: 92dvh; padding-bottom: max(16px, env(safe-area-inset-bottom, 0px)) !important; } .al-modal, .dx-modal { align-items: flex-end !important; } } .al-toast, .dx-toast { z-index: 1100; border-radius: var(--ds-r-md); box-shadow: var(--ds-e3); font-size: var(--ds-fs-sm); font-weight: 600; } /* ===================================================================== 13. TOUCH TARGETS AND ACCESSIBILITY --------------------------------------------------------------------- Every control the audit measured below the comfortable tap size is lifted here. Sizes grow; nothing is moved, removed or rewired. ===================================================================== */ /* Sizes are set unconditionally rather than behind `pointer: coarse`, so a laptop with a touchscreen gets them too. */ .al-social-btn, .al-footer .al-social-btn, .al-footer-social a { width: 40px !important; height: 40px !important; min-width: 40px !important; min-height: 40px !important; display: inline-flex !important; align-items: center; justify-content: center; border-radius: var(--ds-r-sm) !important; } .dx-sn-btn { min-height: 34px !important; padding: 7px 12px !important; border-radius: var(--ds-r-xs) !important; } .bm-chip { min-height: 36px !important; padding: 8px 13px !important; border-radius: var(--ds-r-pill) !important; } .bm-vote-btn, .bm-page-btn, .al-cal-nav { min-height: 38px !important; min-width: 38px !important; padding: 8px 13px !important; border-radius: var(--ds-r-sm) !important; } /* Inline text and icon links that act as controls need a tap area of their own — "Forgot password?", "Report this listing", the searchable-select triggers and similar were 16–20px tall. */ a[href*="forgot"], .al-forgot-link, .dx-forgot-link, .al-text-link, .al-inline-action, [onclick*="dxOpenReport"], .dxss-trigger { display: inline-flex !important; align-items: center; min-height: 38px !important; padding-block: 8px !important; } .dxss-trigger { width: 100%; } /* Screen-reader-only utility for labels added to icon-only controls. */ .ds-sr { position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; } /* Images never break their container. */ img, svg, video { max-width: 100%; height: auto; } /* ===================================================================== 14. RE-ASSERTIONS --------------------------------------------------------------------- Rule order matters at equal specificity: these repeat declarations that an earlier block in this same file would otherwise override. ===================================================================== */ .al-badge-featured, .al-badge-boosted, .al-post-btn, .al-btn-accent, .dx-promo-cta, .dx-dealer-cta-btn { color: #fff !important; } .al-btn-primary, .al-btn-blue, .al-btn-whatsapp, .al-btn-green, .al-btn-danger, .al-btn-red { color: #fff !important; } .al-btn-primary i, .al-post-btn i, .al-btn-whatsapp i, .al-btn-blue i { color: #fff !important; } /* ===================================================================== 15. CONTRAST CORRECTIONS --------------------------------------------------------------------- Measured against the rendered page, not against the palette on paper. ===================================================================== */ /* Orange as TEXT on a light surface is 3.05:1 — it must use the deeper tone. Orange as a FILL keeps the logo colour. */ .al-btn-text[style*="var(--accent)"], a[style*="color:var(--accent)"], span[style*="color:var(--accent)"], div[style*="color:var(--accent)"], strong[style*="color:var(--accent)"], button[style*="color:var(--accent)"], [style*="color:#F96501"], [style*="color:#f96501"], .al-section-title span, .dx-sec-title span, .dx-adtype-cta, .al-count, .al-filter-count { color: var(--ds-accent-text) !important; } /* 12px badge labels on an orange fill: deepen the fill so the label clears AA. */ .al-badge-featured, .al-badge-boosted, .dx-hp-taxi-type, .dx-taxi-vt, .dx-taxi-boost, body.home .al-section .al-badge-featured { background: var(--ds-accent-deep) !important; color: #fff !important; } /* Old mint tints written with a 3-decimal alpha the earlier rule missed. */ [style*="rgba(0,200,150,0.133)"], [style*="rgba(0, 200, 150, 0.133)"], [style*="rgba(61,214,140,0.133)"], [style*="rgba(0,200,150,.133)"] { background-color: var(--ds-success-soft) !important; border-color: var(--ds-success-line) !important; color: var(--ds-success) !important; } [style*="rgba(245,166,35,0.133)"], [style*="rgba(245, 166, 35, 0.133)"] { background-color: var(--ds-warning-soft) !important; border-color: var(--ds-warning-line) !important; color: var(--ds-warning) !important; } [style*="rgba(232,58,58,0.133)"], [style*="rgba(232, 58, 58, 0.133)"] { background-color: var(--ds-error-soft) !important; border-color: var(--ds-error-line) !important; color: var(--ds-error) !important; } [style*="rgba(155,93,229,0.133)"], [style*="rgba(74,158,255,0.133)"], [style*="rgba(96,208,255,0.133)"] { background-color: var(--ds-primary-soft) !important; border-color: var(--ds-primary-line) !important; color: var(--ds-primary) !important; } /* The readability floor, re-asserted at the specificity the older sheets used. `body.home .al-section .al-badge` (0,3,0) shrank homepage badges to 8px, and several page-level