/* Theme Name: Mo Cars Classified Ads Theme Theme URI: https://example.com/mo-cars-classified-ads Author: MO Cars Description: A highly extendable classified ads theme for cars and motorcycles. Freemium listing limits, seller stores, buyer-to-seller chat, VIP/Premium ad promotion and native Elementor widgets. Translation ready (EN / FR). Version: 2.13.9 Requires at least: 6.0 Tested up to: 6.6 Requires PHP: 7.4 License: GNU General Public License v2 or later License URI: http://www.gnu.org/licenses/gpl-2.0.html Text Domain: mo-cars-classified-ads Domain Path: /languages Tags: classifieds, automotive, elementor, translation-ready, custom-colors */ /* ------------------------------------------------------------------------- 1. Design tokens The three values below are re-printed at runtime by inc/customizer.php so an admin can change them from WP-Admin without touching this file. ---------------------------------------------------------------------- */ :root { --mo-primary: #1B232F; /* dark blue: header, footer, structural UI */ --mo-accent: #DB1A2D; /* red: CTAs, badges, price tags, active states */ --mo-neutral: #F4F6F8; /* light gray: filter blocks, section backgrounds */ --mo-primary-soft: #253045; --mo-primary-line: #2f3a4a; --mo-accent-dark: #b41525; --mo-ink: #17202b; --mo-body: #5c6672; --mo-muted: #8a939e; --mo-line: #e3e7ec; --mo-white: #ffffff; --mo-ok: #1f9d55; --mo-warn: #d98218; --mo-radius: 3px; --mo-radius-lg: 6px; --mo-shadow: 0 2px 14px rgba(27, 35, 47, .08); --mo-shadow-lg: 0 18px 50px rgba(27, 35, 47, .14); --mo-font: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; --mo-font-display: "Montserrat", "Inter", -apple-system, "Segoe UI", Roboto, Arial, sans-serif; --mo-shell: 1200px; --mo-gutter: 16px; --mo-header-h: 90px; } /* ------------------------------------------------------------------------- 2. Reset / base ---------------------------------------------------------------------- */ *, *::before, *::after { box-sizing: border-box; } /* * A last-resort backstop against horizontal page scroll. * * This does not fix a card, grid or badge that overflows its own container — * several of those have been found and fixed directly at the source, each * with min-width: 0 or a rescaled dimension, because that is what actually * makes the content fit. What this catches is the next one nobody has found * yet: without it, one overflowing element anywhere on the page makes the * entire scroll sideways and clips whatever sits at the viewport edge * — which is what the reported "SERVI" / "MAINT" text cut off at the very * edge of the screen actually was. With it, the same underlying bug is * contained to the element that has it, which is visibly wrong and fixable, * rather than invisibly wrong and shipped. */ html, body { max-width: 100%; overflow-x: hidden; } html { -webkit-text-size-adjust: 100%; } body { margin: 0; font-family: var(--mo-font); font-size: 15px; line-height: 1.65; color: var(--mo-body); background: var(--mo-white); -webkit-font-smoothing: antialiased; } h1, h2, h3, h4, h5, h6 { font-family: var(--mo-font-display); color: var(--mo-ink); margin: 0 0 .6em; line-height: 1.2; font-weight: 700; } h1 { font-size: 34px; } h2 { font-size: 26px; } h3 { font-size: 20px; } h4 { font-size: 16px; } p { margin: 0 0 1em; } a { color: var(--mo-accent); text-decoration: none; } a:hover { color: var(--mo-accent-dark); } img { max-width: 100%; height: auto; display: block; } :focus-visible { outline: 2px solid var(--mo-accent); outline-offset: 2px; } .screen-reader-text { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip: rect(1px, 1px, 1px, 1px); white-space: nowrap; } .skip-link:focus { position: fixed; top: 8px; left: 8px; z-index: 9999; background: var(--mo-white); padding: 10px 16px; clip: auto; width: auto; height: auto; } /* ------------------------------------------------------------------------- 3. Layout primitives ---------------------------------------------------------------------- */ .mo-shell { width: 100%; max-width: var(--mo-shell); margin-inline: auto; padding-inline: var(--mo-gutter); } .mo-section { padding-block: 56px; } .mo-section--neutral { background: var(--mo-neutral); } .mo-section--dark { background: var(--mo-primary); color: #c6ccd6; } .mo-section--dark h2, .mo-section--dark h3 { color: var(--mo-white); } .mo-grid { display: grid; gap: 24px; } .mo-grid--2 { grid-template-columns: repeat(2, 1fr); } .mo-grid--3 { grid-template-columns: repeat(3, 1fr); } .mo-grid--4 { grid-template-columns: repeat(4, 1fr); } .mo-heading { text-align: center; margin-bottom: 34px; } .mo-heading h2 { text-transform: uppercase; letter-spacing: .04em; margin-bottom: 12px; } .mo-heading__rule { display: inline-block; width: 34px; height: 3px; background: var(--mo-accent); transform: skewX(-20deg); position: relative; } .mo-heading__rule::after { content: ""; position: absolute; left: 40px; top: 0; width: 14px; height: 3px; background: var(--mo-accent); } /* ------------------------------------------------------------------------- 4. Buttons & form controls ---------------------------------------------------------------------- */ .mo-btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; padding: 13px 26px; border: 0; border-radius: var(--mo-radius); font-family: var(--mo-font-display); font-size: 13px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; cursor: pointer; transition: background .18s ease, color .18s ease, transform .18s ease; } .mo-btn--accent { background: var(--mo-accent); color: var(--mo-white); } .mo-btn--accent:hover { background: var(--mo-accent-dark); color: var(--mo-white); } .mo-btn--dark { background: var(--mo-primary); color: var(--mo-white); } .mo-btn--dark:hover { background: var(--mo-primary-soft); color: var(--mo-white); } .mo-btn--ghost { background: transparent; color: var(--mo-ink); border: 1px solid var(--mo-line); } .mo-btn--ghost:hover { border-color: var(--mo-accent); color: var(--mo-accent); } .mo-btn--block { width: 100%; } .mo-btn--sm { padding: 9px 16px; font-size: 11px; } .mo-btn[disabled] { opacity: .5; cursor: not-allowed; } 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 { width: 100%; padding: 12px 14px; border: 1px solid transparent; background: var(--mo-neutral); border-radius: var(--mo-radius); font-family: inherit; font-size: 14px; color: var(--mo-ink); } input:focus, select:focus, textarea:focus { border-color: var(--mo-accent); background: var(--mo-white); outline: none; } textarea { min-height: 130px; resize: vertical; } label { display: block; font-size: 13px; color: var(--mo-body); margin-bottom: 6px; } select { appearance: none; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath fill='%235c6672' d='M1 1l5 5 5-5'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right 14px center; padding-right: 34px; } .mo-field { margin-bottom: 18px; } .mo-field--check { display: flex; align-items: center; gap: 8px; } .mo-field--check label { margin: 0; } .mo-notice { padding: 14px 18px; border-left: 3px solid var(--mo-accent); background: var(--mo-neutral); margin-bottom: 22px; font-size: 14px; } .mo-notice--ok { border-left-color: var(--mo-ok); } .mo-notice--warn { border-left-color: var(--mo-warn); } /* ------------------------------------------------------------------------- 5. Responsive (mobile first fallbacks) ---------------------------------------------------------------------- */ @media (max-width: 1024px) { .mo-grid--4 { grid-template-columns: repeat(2, 1fr); } .mo-grid--3 { grid-template-columns: repeat(2, 1fr); } } @media (max-width: 640px) { h1 { font-size: 26px; } h2 { font-size: 21px; } .mo-section { padding-block: 38px; } .mo-grid--2, .mo-grid--3, .mo-grid--4 { grid-template-columns: 1fr; } } @media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: .01ms !important; transition-duration: .01ms !important; scroll-behavior: auto !important; } }