/* Theme Name: Dealer Showroom Theme URI: https://desaweb.it/temi/dealer-showroom Author: Desa Web Solution Author URI: https://desaweb.it Description: Tema pubblico per concessionarie auto, progettato per lavorare insieme al plugin Dealer CRM. Showroom digitale con listato stock filtrabile, schede veicolo complete, simulatore di finanziamento, permuta e test drive. Nessuna dipendenza esterna, mobile-first, accessibile e ribrandizzabile dal Customizer. Version: 1.1.0 Requires at least: 6.4 Tested up to: 6.8 Requires PHP: 8.1 License: GNU General Public License v2 or later License URI: http://www.gnu.org/licenses/gpl-2.0.html Text Domain: dealer-showroom Domain Path: /languages Tags: automotive, business, custom-logo, custom-menu, featured-images, threaded-comments, translation-ready, block-patterns, wide-blocks, accessibility-ready, right-sidebar, elementor */ /* ========================================================================= 1. Design token I token --ds-* sono la fonte unica di verità: rimappano i --dcrm-* del plugin così che tema e showroom restino coerenti. Il Customizer sovrascrive solo --ds-* con una regola inline in . ========================================================================= */ :root { --ds-primary: #0b2545; --ds-primary-600: #13315c; --ds-primary-050: #eaeff7; --ds-accent: #c8102e; --ds-accent-600: #9e0c24; --ds-ink: #10151f; --ds-muted: #5b6676; --ds-line: #e3e8ef; --ds-bg: #f6f8fb; --ds-surface: #ffffff; --ds-success: #16a34a; --ds-warning: #d97706; --ds-danger: #dc2626; --ds-radius: 12px; --ds-radius-sm: 8px; --ds-radius-pill: 999px; --ds-shadow: 0 1px 2px rgba(16, 21, 31, .06), 0 8px 24px rgba(16, 21, 31, .06); --ds-shadow-lg: 0 2px 4px rgba(16, 21, 31, .06), 0 16px 40px rgba(16, 21, 31, .1); --ds-font: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif; --ds-font-heading: var(--ds-font); --ds-font-mono: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; --ds-text-xs: .75rem; --ds-text-sm: .875rem; --ds-text-base: 1rem; --ds-text-lg: clamp(1.0625rem, 1rem + .3vw, 1.1875rem); --ds-text-xl: clamp(1.25rem, 1.1rem + .6vw, 1.5rem); --ds-text-2xl: clamp(1.5rem, 1.25rem + 1.1vw, 2rem); --ds-text-3xl: clamp(1.875rem, 1.4rem + 2vw, 2.75rem); --ds-text-4xl: clamp(2.125rem, 1.5rem + 3vw, 3.5rem); --ds-space-1: .25rem; --ds-space-2: .5rem; --ds-space-3: .75rem; --ds-space-4: 1rem; --ds-space-5: 1.5rem; --ds-space-6: 2rem; --ds-space-7: 3rem; --ds-space-8: 4rem; --ds-space-9: 6rem; --ds-content: 800px; --ds-wide: 1240px; --ds-gutter: clamp(1rem, 4vw, 2rem); --ds-header-h: 72px; --ds-transition: .18s cubic-bezier(.4, 0, .2, 1); } /* Rimappatura dei token del plugin: il CSS di Dealer CRM eredita il brand. */ :root { --dcrm-primary: var(--ds-primary); --dcrm-primary-600: var(--ds-primary-600); --dcrm-accent: var(--ds-accent); --dcrm-accent-600: var(--ds-accent-600); --dcrm-ink: var(--ds-ink); --dcrm-muted: var(--ds-muted); --dcrm-line: var(--ds-line); --dcrm-bg: var(--ds-bg); --dcrm-surface: var(--ds-surface); --dcrm-success: var(--ds-success); --dcrm-warning: var(--ds-warning); --dcrm-danger: var(--ds-danger); --dcrm-radius: var(--ds-radius); --dcrm-radius-sm: var(--ds-radius-sm); --dcrm-shadow: var(--ds-shadow); --dcrm-shadow-lg: var(--ds-shadow-lg); --dcrm-font: var(--ds-font); --dcrm-gap: var(--ds-space-5); } /* ========================================================================= 2. Reset leggero ========================================================================= */ *, *::before, *::after { box-sizing: border-box; } html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; scroll-padding-top: calc(var(--ds-header-h) + 16px); } body { margin: 0; font-family: var(--ds-font); font-size: var(--ds-text-base); line-height: 1.65; color: var(--ds-ink); background: var(--ds-bg); -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; overflow-wrap: break-word; } img, picture, video, canvas, svg, iframe { display: block; max-width: 100%; } img, video { height: auto; } input, button, textarea, select { font: inherit; color: inherit; } button { cursor: pointer; } h1, h2, h3, h4, h5, h6 { margin: 0 0 var(--ds-space-4); font-family: var(--ds-font-heading); font-weight: 700; line-height: 1.2; letter-spacing: -.02em; color: var(--ds-ink); text-wrap: balance; } h1 { font-size: var(--ds-text-3xl); } h2 { font-size: var(--ds-text-2xl); } h3 { font-size: var(--ds-text-xl); } h4 { font-size: var(--ds-text-lg); } h5, h6 { font-size: var(--ds-text-base); } p, ul, ol, dl, pre, blockquote, figure, table { margin: 0 0 var(--ds-space-4); } a { color: var(--ds-primary); text-decoration-thickness: 1px; text-underline-offset: .18em; transition: color var(--ds-transition); } a:hover { color: var(--ds-accent); } hr { height: 1px; margin: var(--ds-space-6) 0; border: 0; background: var(--ds-line); } code, kbd, pre, samp { font-family: var(--ds-font-mono); font-size: .9em; } pre { padding: var(--ds-space-4); overflow-x: auto; background: var(--ds-ink); color: #f2f5f9; border-radius: var(--ds-radius); } blockquote { padding: var(--ds-space-2) var(--ds-space-5); border-left: 4px solid var(--ds-accent); color: var(--ds-muted); font-size: var(--ds-text-lg); } table { width: 100%; border-collapse: collapse; font-size: var(--ds-text-sm); } th, td { padding: var(--ds-space-3); text-align: left; border-bottom: 1px solid var(--ds-line); } th { font-weight: 600; color: var(--ds-muted); } /* ========================================================================= 3. Accessibilità ========================================================================= */ .screen-reader-text { position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(1px, 1px, 1px, 1px); clip-path: inset(50%); white-space: nowrap; border: 0; } .ds-skip-link { position: absolute; top: -100px; left: var(--ds-space-4); z-index: 100000; padding: var(--ds-space-3) var(--ds-space-5); background: var(--ds-accent); color: #fff; font-weight: 700; border-radius: 0 0 var(--ds-radius-sm) var(--ds-radius-sm); text-decoration: none; transition: top var(--ds-transition); } .ds-skip-link:focus { top: 0; color: #fff; } :focus-visible { outline: 3px solid var(--ds-accent); outline-offset: 2px; border-radius: 2px; } /* ========================================================================= 4. Layout ========================================================================= */ .ds-container { width: 100%; max-width: var(--ds-wide); margin-inline: auto; padding-inline: var(--ds-gutter); } .ds-container--narrow { max-width: var(--ds-content); } .ds-section { padding-block: clamp(2.5rem, 6vw, 5rem); } .ds-section--tight { padding-block: clamp(1.75rem, 4vw, 3rem); } .ds-section--alt { background: var(--ds-surface); } .ds-section--ink { background: var(--ds-primary); color: #fff; } .ds-section--ink h1, .ds-section--ink h2, .ds-section--ink h3 { color: #fff; } .ds-section--ink a { color: #fff; } .ds-section__head { max-width: 760px; margin: 0 auto clamp(1.5rem, 3vw, 2.5rem); text-align: center; } .ds-section__head p { margin: 0; color: var(--ds-muted); font-size: var(--ds-text-lg); } .ds-section--ink .ds-section__head p { color: rgba(255, 255, 255, .82); } .ds-eyebrow { display: inline-block; margin-bottom: var(--ds-space-2); font-size: var(--ds-text-xs); font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: var(--ds-accent); } .ds-site { display: flex; flex-direction: column; min-height: 100vh; } .ds-main { flex: 1 0 auto; } .ds-layout { display: grid; gap: clamp(2rem, 4vw, 3rem); align-items: start; } .has-sidebar .ds-layout { grid-template-columns: minmax(0, 1fr); } @media (min-width: 1000px) { .has-sidebar .ds-layout { grid-template-columns: minmax(0, 1fr) 320px; } } /* ========================================================================= 5. Header ========================================================================= */ .ds-topbar { background: var(--ds-primary); color: rgba(255, 255, 255, .9); font-size: var(--ds-text-sm); } .ds-topbar__inner { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--ds-space-2) var(--ds-space-5); min-height: 40px; padding-block: var(--ds-space-2); } .ds-topbar a { color: inherit; text-decoration: none; } .ds-topbar a:hover { color: #fff; text-decoration: underline; } .ds-contact-bar { display: flex; flex-wrap: wrap; align-items: center; gap: var(--ds-space-2) var(--ds-space-5); margin: 0; padding: 0; list-style: none; } .ds-contact-bar li { display: inline-flex; align-items: center; gap: var(--ds-space-2); } .ds-contact-bar__icon { font-size: 1em; line-height: 1; opacity: .8; } .ds-header { position: relative; z-index: 900; background: var(--ds-surface); border-bottom: 1px solid var(--ds-line); } .ds-header.is-sticky { position: sticky; top: 0; } .ds-header.is-scrolled { box-shadow: var(--ds-shadow); } .ds-header__inner { display: flex; align-items: center; justify-content: space-between; gap: var(--ds-space-4); min-height: var(--ds-header-h); padding-block: var(--ds-space-3); } .ds-brand { display: flex; align-items: center; gap: var(--ds-space-3); flex-shrink: 0; text-decoration: none; } .ds-brand img { width: auto; max-height: 48px; object-fit: contain; } .ds-brand__text { display: flex; flex-direction: column; line-height: 1.15; } .ds-brand__name { margin: 0; font-size: var(--ds-text-lg); font-weight: 800; letter-spacing: -.02em; color: var(--ds-primary); } .ds-brand__tagline { font-size: var(--ds-text-xs); color: var(--ds-muted); } .ds-header__actions { display: flex; align-items: center; gap: var(--ds-space-3); } /* Navigazione */ .ds-nav ul { display: flex; flex-wrap: wrap; align-items: center; gap: var(--ds-space-1); margin: 0; padding: 0; list-style: none; } .ds-nav a { display: block; padding: var(--ds-space-2) var(--ds-space-3); font-size: var(--ds-text-sm); font-weight: 600; color: var(--ds-ink); text-decoration: none; border-radius: var(--ds-radius-sm); transition: background-color var(--ds-transition), color var(--ds-transition); } .ds-nav a:hover, .ds-nav a:focus-visible { background: var(--ds-primary-050); color: var(--ds-primary); } .ds-nav .current-menu-item > a, .ds-nav .current_page_item > a, .ds-nav .current-menu-ancestor > a { color: var(--ds-primary); background: var(--ds-primary-050); } .ds-nav li { position: relative; } .ds-nav .sub-menu { position: absolute; top: 100%; left: 0; z-index: 20; display: block; min-width: 220px; padding: var(--ds-space-2); background: var(--ds-surface); border: 1px solid var(--ds-line); border-radius: var(--ds-radius); box-shadow: var(--ds-shadow-lg); opacity: 0; visibility: hidden; transform: translateY(6px); transition: opacity var(--ds-transition), transform var(--ds-transition), visibility var(--ds-transition); } .ds-nav .sub-menu ul { flex-direction: column; } .ds-nav li:hover > .sub-menu, .ds-nav li:focus-within > .sub-menu { opacity: 1; visibility: visible; transform: translateY(0); } .ds-nav .sub-menu li { width: 100%; } .ds-nav .sub-menu a { width: 100%; } @media (min-width: 1024px) { .ds-nav .sub-menu { flex-direction: column; } .ds-nav .sub-menu ul { display: flex; flex-direction: column; align-items: stretch; } } /* Hamburger */ .ds-nav-toggle { display: inline-flex; align-items: center; justify-content: center; gap: var(--ds-space-2); width: 44px; height: 44px; padding: 0; background: var(--ds-bg); border: 1px solid var(--ds-line); border-radius: var(--ds-radius-sm); color: var(--ds-ink); } .ds-nav-toggle__bars { position: relative; display: block; width: 20px; height: 2px; background: currentColor; border-radius: 2px; transition: background-color var(--ds-transition); } .ds-nav-toggle__bars::before, .ds-nav-toggle__bars::after { content: ""; position: absolute; left: 0; width: 20px; height: 2px; background: currentColor; border-radius: 2px; transition: transform var(--ds-transition), top var(--ds-transition); } .ds-nav-toggle__bars::before { top: -6px; } .ds-nav-toggle__bars::after { top: 6px; } .ds-nav-toggle[aria-expanded="true"] .ds-nav-toggle__bars { background: transparent; } .ds-nav-toggle[aria-expanded="true"] .ds-nav-toggle__bars::before { top: 0; transform: rotate(45deg); } .ds-nav-toggle[aria-expanded="true"] .ds-nav-toggle__bars::after { top: 0; transform: rotate(-45deg); } @media (max-width: 1023px) { .ds-nav { position: absolute; top: 100%; left: 0; right: 0; display: none; max-height: calc(100vh - var(--ds-header-h)); padding: var(--ds-space-4) var(--ds-gutter) var(--ds-space-6); overflow-y: auto; background: var(--ds-surface); border-bottom: 1px solid var(--ds-line); box-shadow: var(--ds-shadow-lg); } .ds-nav.is-open { display: block; } .ds-nav ul { flex-direction: column; align-items: stretch; gap: 0; } .ds-nav a { padding: var(--ds-space-3) var(--ds-space-2); font-size: var(--ds-text-base); border-bottom: 1px solid var(--ds-line); border-radius: 0; } .ds-nav .sub-menu { position: static; opacity: 1; visibility: visible; transform: none; min-width: 0; padding: 0 0 0 var(--ds-space-4); border: 0; box-shadow: none; } } @media (min-width: 1024px) { .ds-nav-toggle { display: none; } .ds-nav { display: block !important; } } /* ========================================================================= 6. Bottoni ========================================================================= */ .ds-btn { display: inline-flex; align-items: center; justify-content: center; gap: var(--ds-space-2); padding: .75rem 1.35rem; font-size: var(--ds-text-sm); font-weight: 700; line-height: 1.2; text-align: center; text-decoration: none; border: 1px solid transparent; border-radius: var(--ds-radius-sm); transition: background-color var(--ds-transition), color var(--ds-transition), border-color var(--ds-transition), transform .1s ease; } .ds-btn:hover { transform: translateY(-1px); } .ds-btn:active { transform: translateY(0); } .ds-btn--primary { background: var(--ds-primary); color: #fff; } .ds-btn--primary:hover { background: var(--ds-primary-600); color: #fff; } .ds-btn--accent { background: var(--ds-accent); color: #fff; } .ds-btn--accent:hover { background: var(--ds-accent-600); color: #fff; } .ds-btn--outline { background: transparent; border-color: var(--ds-line); color: var(--ds-ink); } .ds-btn--outline:hover { background: var(--ds-bg); border-color: var(--ds-primary); color: var(--ds-primary); } .ds-btn--light { background: #fff; color: var(--ds-primary); } .ds-btn--light:hover { background: var(--ds-primary-050); color: var(--ds-primary); } .ds-btn--ghost { background: transparent; color: var(--ds-muted); } .ds-btn--ghost:hover { color: var(--ds-primary); } .ds-btn--whatsapp { background: #25d366; color: #06331a; } .ds-btn--whatsapp:hover { background: #1fb457; color: #06331a; } .ds-btn--lg { padding: 1rem 1.75rem; font-size: var(--ds-text-base); } .ds-btn--sm { padding: .5rem 1rem; font-size: var(--ds-text-xs); } .ds-btn--block { width: 100%; } /* ========================================================================= 7. Hero ========================================================================= */ .ds-hero { position: relative; display: grid; align-items: center; min-height: clamp(420px, 60vh, 640px); background: var(--ds-primary); color: #fff; isolation: isolate; overflow: hidden; } .ds-hero__media { position: absolute; inset: 0; z-index: -2; } .ds-hero__media img { width: 100%; height: 100%; object-fit: cover; } .ds-hero::after { content: ""; position: absolute; inset: 0; z-index: -1; background: linear-gradient(105deg, rgba(11, 37, 69, .93) 0%, rgba(11, 37, 69, .78) 45%, rgba(11, 37, 69, .45) 100%); } .ds-hero__inner { padding-block: clamp(3rem, 8vw, 5.5rem); } .ds-hero__content { max-width: 660px; } .ds-hero h1 { margin: 0 0 var(--ds-space-4); font-size: var(--ds-text-4xl); color: #fff; } .ds-hero__subtitle { margin: 0 0 var(--ds-space-6); font-size: var(--ds-text-lg); color: rgba(255, 255, 255, .88); max-width: 55ch; } .ds-hero__actions { display: flex; flex-wrap: wrap; gap: var(--ds-space-3); margin-bottom: var(--ds-space-6); } /* Ricerca rapida */ .ds-quicksearch { display: grid; grid-template-columns: 1fr; gap: var(--ds-space-3); max-width: 900px; padding: var(--ds-space-4); background: rgba(255, 255, 255, .96); border-radius: var(--ds-radius); box-shadow: var(--ds-shadow-lg); color: var(--ds-ink); } @media (min-width: 700px) { .ds-quicksearch { grid-template-columns: repeat(3, minmax(0, 1fr)) auto; align-items: end; } } .ds-quicksearch__field { display: flex; flex-direction: column; gap: var(--ds-space-1); font-size: var(--ds-text-xs); font-weight: 700; color: var(--ds-muted); text-transform: uppercase; letter-spacing: .05em; } .ds-quicksearch__field select, .ds-quicksearch__field input { padding: .7rem .8rem; font-size: var(--ds-text-sm); font-weight: 400; letter-spacing: normal; text-transform: none; color: var(--ds-ink); background: var(--ds-surface); border: 1px solid var(--ds-line); border-radius: var(--ds-radius-sm); } /* ========================================================================= 8. Punti di forza / griglie generiche ========================================================================= */ .ds-grid { display: grid; gap: var(--ds-space-5); grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); } .ds-grid--2 { grid-template-columns: repeat(auto-fit, minmax(320px, 1fr)); } .ds-grid--4 { grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); } .ds-usp { display: flex; flex-direction: column; gap: var(--ds-space-2); padding: var(--ds-space-5); background: var(--ds-surface); border: 1px solid var(--ds-line); border-radius: var(--ds-radius); box-shadow: var(--ds-shadow); } .ds-usp__icon { display: inline-flex; align-items: center; justify-content: center; width: 48px; height: 48px; font-size: 1.5rem; line-height: 1; background: var(--ds-primary-050); color: var(--ds-primary); border-radius: var(--ds-radius-sm); } .ds-usp h3 { margin: 0; font-size: var(--ds-text-lg); } .ds-usp p { margin: 0; color: var(--ds-muted); font-size: var(--ds-text-sm); } /* Card generica (articoli, pagine, risultati di ricerca) */ .ds-card { display: flex; flex-direction: column; overflow: hidden; background: var(--ds-surface); border: 1px solid var(--ds-line); border-radius: var(--ds-radius); box-shadow: var(--ds-shadow); transition: box-shadow var(--ds-transition), transform var(--ds-transition); } .ds-card:hover { box-shadow: var(--ds-shadow-lg); transform: translateY(-2px); } .ds-card__media { aspect-ratio: 16 / 10; background: var(--ds-bg); } .ds-card__media img { width: 100%; height: 100%; object-fit: cover; } .ds-card__body { display: flex; flex: 1; flex-direction: column; gap: var(--ds-space-2); padding: var(--ds-space-5); } .ds-card__title { margin: 0; font-size: var(--ds-text-lg); } .ds-card__title a { color: var(--ds-ink); text-decoration: none; } .ds-card__title a:hover { color: var(--ds-primary); } .ds-card__meta { display: flex; flex-wrap: wrap; gap: var(--ds-space-1) var(--ds-space-3); font-size: var(--ds-text-xs); color: var(--ds-muted); } .ds-card__excerpt { margin: 0; font-size: var(--ds-text-sm); color: var(--ds-muted); } .ds-card__more { margin-top: auto; padding-top: var(--ds-space-3); font-weight: 700; font-size: var(--ds-text-sm); } /* ========================================================================= 9. Contenuto / articolo ========================================================================= */ .ds-entry { padding: clamp(1.5rem, 4vw, 3rem); background: var(--ds-surface); border: 1px solid var(--ds-line); border-radius: var(--ds-radius); box-shadow: var(--ds-shadow); } .ds-entry__header { margin-bottom: var(--ds-space-5); } .ds-entry__title { margin: 0 0 var(--ds-space-2); } .ds-entry__meta { display: flex; flex-wrap: wrap; gap: var(--ds-space-1) var(--ds-space-4); font-size: var(--ds-text-sm); color: var(--ds-muted); } .ds-entry__thumb { margin-bottom: var(--ds-space-5); overflow: hidden; border-radius: var(--ds-radius); } .ds-entry__thumb img { width: 100%; height: auto; } .ds-entry__content > *:last-child { margin-bottom: 0; } .ds-entry__content ul, .ds-entry__content ol { padding-left: 1.35rem; } .ds-entry__content .alignwide { width: min(100%, var(--ds-wide)); margin-inline: auto; } .ds-entry__content .alignfull { width: 100%; margin-inline: 0; } .ds-entry__content .alignleft { float: left; margin: 0 var(--ds-space-5) var(--ds-space-4) 0; } .ds-entry__content .alignright { float: right; margin: 0 0 var(--ds-space-4) var(--ds-space-5); } .ds-entry__content .aligncenter { margin-inline: auto; } .ds-entry__footer { margin-top: var(--ds-space-5); padding-top: var(--ds-space-4); border-top: 1px solid var(--ds-line); font-size: var(--ds-text-sm); color: var(--ds-muted); } .ds-page-header { padding-block: clamp(2rem, 5vw, 3.5rem) clamp(1rem, 2vw, 1.5rem); background: var(--ds-surface); border-bottom: 1px solid var(--ds-line); } .ds-page-header h1 { margin: 0 0 var(--ds-space-2); } .ds-page-header p { margin: 0; color: var(--ds-muted); max-width: 70ch; } /* Breadcrumb */ .ds-breadcrumbs { margin-bottom: var(--ds-space-4); font-size: var(--ds-text-xs); color: var(--ds-muted); } .ds-breadcrumbs ol { display: flex; flex-wrap: wrap; gap: var(--ds-space-1) var(--ds-space-2); margin: 0; padding: 0; list-style: none; } .ds-breadcrumbs li { display: inline-flex; align-items: center; gap: var(--ds-space-2); } .ds-breadcrumbs li + li::before { content: "›"; opacity: .6; } .ds-breadcrumbs a { color: var(--ds-muted); text-decoration: none; } .ds-breadcrumbs a:hover { color: var(--ds-primary); text-decoration: underline; } .ds-breadcrumbs [aria-current="page"] { color: var(--ds-ink); font-weight: 600; } /* Paginazione */ .ds-pagination { display: flex; flex-wrap: wrap; justify-content: center; gap: var(--ds-space-1); margin-top: var(--ds-space-6); } .ds-pagination .page-numbers { display: inline-flex; align-items: center; justify-content: center; min-width: 44px; height: 44px; padding: 0 var(--ds-space-3); font-size: var(--ds-text-sm); font-weight: 700; color: var(--ds-ink); text-decoration: none; background: var(--ds-surface); border: 1px solid var(--ds-line); border-radius: var(--ds-radius-sm); } .ds-pagination .page-numbers:hover, .ds-pagination .page-numbers.current { background: var(--ds-primary); border-color: var(--ds-primary); color: #fff; } .ds-pagination .dots { background: transparent; border-color: transparent; } /* ========================================================================= 10. Form del tema ========================================================================= */ .ds-form { display: grid; gap: var(--ds-space-4); } .ds-field { display: flex; flex-direction: column; gap: var(--ds-space-2); font-size: var(--ds-text-sm); } .ds-field > span { font-weight: 600; color: var(--ds-muted); } .ds-field input[type="text"], .ds-field input[type="email"], .ds-field input[type="tel"], .ds-field input[type="url"], .ds-field input[type="number"], .ds-field input[type="search"], .ds-field input[type="date"], .ds-field select, .ds-field textarea, .ds-search__input { width: 100%; padding: .7rem .9rem; font-size: var(--ds-text-sm); color: var(--ds-ink); background: var(--ds-surface); border: 1px solid var(--ds-line); border-radius: var(--ds-radius-sm); transition: border-color var(--ds-transition), box-shadow var(--ds-transition); } .ds-field input:focus, .ds-field select:focus, .ds-field textarea:focus, .ds-search__input:focus { outline: none; border-color: var(--ds-primary); box-shadow: 0 0 0 3px var(--ds-primary-050); } .ds-search-form { display: flex; gap: var(--ds-space-2); max-width: 520px; } .ds-search-form .ds-search__input { flex: 1; } /* ========================================================================= 11. Sidebar e widget ========================================================================= */ .ds-sidebar { display: grid; gap: var(--ds-space-5); } .ds-widget { padding: var(--ds-space-5); background: var(--ds-surface); border: 1px solid var(--ds-line); border-radius: var(--ds-radius); box-shadow: var(--ds-shadow); font-size: var(--ds-text-sm); } .ds-widget__title { margin: 0 0 var(--ds-space-3); padding-bottom: var(--ds-space-2); font-size: var(--ds-text-base); border-bottom: 2px solid var(--ds-line); } .ds-widget ul { margin: 0; padding: 0; list-style: none; } .ds-widget li + li { margin-top: var(--ds-space-2); } .ds-widget a { text-decoration: none; } .ds-widget a:hover { text-decoration: underline; } /* ========================================================================= 12. Scheda veicolo (integrazione con il CSS del plugin) ========================================================================= */ .ds-vehicle { display: grid; gap: clamp(2rem, 4vw, 3rem); } .ds-vehicle__header { display: grid; gap: var(--ds-space-2); } .ds-vehicle__title { margin: 0; font-size: var(--ds-text-3xl); } .ds-vehicle__subtitle { margin: 0; font-size: var(--ds-text-lg); font-weight: 500; color: var(--ds-muted); } .ds-vehicle__badges { display: flex; flex-wrap: wrap; gap: var(--ds-space-2); margin-top: var(--ds-space-2); } .ds-badge { display: inline-flex; align-items: center; gap: var(--ds-space-1); padding: .25rem .7rem; font-size: var(--ds-text-xs); font-weight: 700; letter-spacing: .04em; text-transform: uppercase; background: var(--ds-primary-050); color: var(--ds-primary); border-radius: var(--ds-radius-pill); } .ds-badge--accent { background: var(--ds-accent); color: #fff; } .ds-badge--success { background: rgba(22, 163, 74, .12); color: #0f7a37; } .ds-badge--warning { background: rgba(217, 119, 6, .14); color: #9a5406; } .ds-badge--muted { background: var(--ds-bg); color: var(--ds-muted); } .ds-vehicle__aside-actions { display: grid; gap: var(--ds-space-2); } .ds-vehicle__aside-note { margin: 0; font-size: var(--ds-text-xs); color: var(--ds-muted); line-height: 1.5; } .ds-vehicle__aside-divider { height: 1px; background: var(--ds-line); } .ds-vehicle__block { padding: clamp(1.25rem, 3vw, 2rem); background: var(--ds-surface); border: 1px solid var(--ds-line); border-radius: var(--ds-radius); box-shadow: var(--ds-shadow); } .ds-emissions__grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: var(--ds-space-4); margin-bottom: var(--ds-space-4); } .ds-emissions__item { display: flex; flex-direction: column; gap: var(--ds-space-1); } .ds-emissions__label { font-size: var(--ds-text-xs); font-weight: 700; text-transform: uppercase; letter-spacing: .05em; color: var(--ds-muted); } .ds-emissions__value { font-size: var(--ds-text-lg); font-weight: 800; color: var(--ds-ink); } .ds-emissions__legal { margin: 0; font-size: var(--ds-text-xs); line-height: 1.6; color: var(--ds-muted); } /* Tab */ .ds-tabs__list { display: flex; flex-wrap: wrap; gap: var(--ds-space-1); margin-bottom: var(--ds-space-4); border-bottom: 2px solid var(--ds-line); } .ds-tabs__tab { padding: var(--ds-space-3) var(--ds-space-4); margin-bottom: -2px; font-size: var(--ds-text-sm); font-weight: 700; color: var(--ds-muted); background: transparent; border: 0; border-bottom: 2px solid transparent; transition: color var(--ds-transition), border-color var(--ds-transition); } .ds-tabs__tab[aria-selected="true"] { color: var(--ds-primary); border-bottom-color: var(--ds-accent); } .ds-tabs__panel[hidden] { display: none; } /* Veicoli simili */ .ds-similar { display: grid; gap: var(--ds-space-5); } /* ========================================================================= 13. Permuta a 3 step ========================================================================= */ .ds-steps { display: grid; gap: var(--ds-space-5); grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); counter-reset: ds-step; margin: 0; padding: 0; list-style: none; } .ds-steps li { position: relative; padding: var(--ds-space-5) var(--ds-space-5) var(--ds-space-5) var(--ds-space-5); background: var(--ds-surface); border: 1px solid var(--ds-line); border-radius: var(--ds-radius); counter-increment: ds-step; } .ds-steps li::before { content: counter(ds-step); display: inline-flex; align-items: center; justify-content: center; width: 40px; height: 40px; margin-bottom: var(--ds-space-3); font-size: var(--ds-text-lg); font-weight: 800; color: #fff; background: var(--ds-accent); border-radius: 50%; } .ds-steps h3 { margin: 0 0 var(--ds-space-2); font-size: var(--ds-text-lg); } .ds-steps p { margin: 0; font-size: var(--ds-text-sm); color: var(--ds-muted); } /* ========================================================================= 14. Footer ========================================================================= */ .ds-footer { background: var(--ds-primary); color: rgba(255, 255, 255, .82); font-size: var(--ds-text-sm); } .ds-footer a { color: rgba(255, 255, 255, .82); text-decoration: none; } .ds-footer a:hover { color: #fff; text-decoration: underline; } .ds-footer h2, .ds-footer h3, .ds-footer .ds-widget__title { color: #fff; } .ds-footer__widgets { display: grid; gap: var(--ds-space-6); grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); padding-block: clamp(2.5rem, 5vw, 4rem); } .ds-footer .ds-widget { padding: 0; background: transparent; border: 0; box-shadow: none; color: inherit; } .ds-footer .ds-widget__title { border-bottom-color: rgba(255, 255, 255, .18); } .ds-footer__bottom { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--ds-space-3) var(--ds-space-5); padding-block: var(--ds-space-5); border-top: 1px solid rgba(255, 255, 255, .16); font-size: var(--ds-text-xs); } .ds-footer__legal ul { display: flex; flex-wrap: wrap; gap: var(--ds-space-2) var(--ds-space-4); margin: 0; padding: 0; list-style: none; } .ds-social { display: flex; flex-wrap: wrap; gap: var(--ds-space-2); margin: 0; padding: 0; list-style: none; } .ds-social a { display: inline-flex; align-items: center; justify-content: center; width: 40px; height: 40px; font-size: var(--ds-text-xs); font-weight: 700; color: #fff; background: rgba(255, 255, 255, .12); border-radius: 50%; text-decoration: none; transition: background-color var(--ds-transition); } .ds-social a:hover { background: var(--ds-accent); text-decoration: none; } /* Back to top */ .ds-to-top { position: fixed; right: var(--ds-space-4); bottom: var(--ds-space-4); z-index: 950; display: inline-flex; align-items: center; justify-content: center; width: 46px; height: 46px; font-size: 1.1rem; color: #fff; background: var(--ds-primary); border: 0; border-radius: 50%; box-shadow: var(--ds-shadow-lg); opacity: 0; visibility: hidden; transform: translateY(10px); transition: opacity var(--ds-transition), transform var(--ds-transition), visibility var(--ds-transition); } .ds-to-top.is-visible { opacity: 1; visibility: visible; transform: translateY(0); } .ds-to-top:hover { background: var(--ds-accent); } /* ========================================================================= 15. Commenti ========================================================================= */ .ds-comments { margin-top: var(--ds-space-6); padding: clamp(1.5rem, 4vw, 2.5rem); background: var(--ds-surface); border: 1px solid var(--ds-line); border-radius: var(--ds-radius); } .ds-comments .comment-list { margin: 0 0 var(--ds-space-6); padding: 0; list-style: none; } .ds-comments .comment-list ol.children { margin: var(--ds-space-4) 0 0 var(--ds-space-5); padding: 0; list-style: none; } .ds-comments .comment-body { padding: var(--ds-space-4); margin-bottom: var(--ds-space-4); background: var(--ds-bg); border-radius: var(--ds-radius-sm); } .ds-comments .comment-meta { display: flex; flex-wrap: wrap; align-items: center; gap: var(--ds-space-2); margin-bottom: var(--ds-space-2); font-size: var(--ds-text-xs); color: var(--ds-muted); } .ds-comments .avatar { border-radius: 50%; } .ds-comments .comment-form input[type="text"], .ds-comments .comment-form input[type="email"], .ds-comments .comment-form input[type="url"], .ds-comments .comment-form textarea { width: 100%; padding: .7rem .9rem; background: var(--ds-surface); border: 1px solid var(--ds-line); border-radius: var(--ds-radius-sm); } .ds-comments .comment-form .submit { padding: .75rem 1.35rem; font-weight: 700; color: #fff; background: var(--ds-primary); border: 0; border-radius: var(--ds-radius-sm); } /* ========================================================================= 16. 404 / nessun risultato ========================================================================= */ .ds-none { padding: clamp(2rem, 6vw, 4rem); text-align: center; background: var(--ds-surface); border: 1px dashed var(--ds-line); border-radius: var(--ds-radius); } .ds-none h2 { margin-bottom: var(--ds-space-3); } .ds-none p { color: var(--ds-muted); } .ds-404__code { font-size: clamp(4rem, 18vw, 9rem); font-weight: 900; line-height: 1; letter-spacing: -.05em; color: var(--ds-primary-050); } /* ========================================================================= 17. Utility ========================================================================= */ .ds-text-center { text-align: center; } .ds-text-muted { color: var(--ds-muted); } .ds-mt-0 { margin-top: 0; } .ds-mb-0 { margin-bottom: 0; } .ds-mt-4 { margin-top: var(--ds-space-4); } .ds-mb-4 { margin-bottom: var(--ds-space-4); } .ds-mt-6 { margin-top: var(--ds-space-6); } .ds-flex { display: flex; } .ds-flex-wrap { flex-wrap: wrap; } .ds-gap-3 { gap: var(--ds-space-3); } .ds-items-center { align-items: center; } .ds-justify-center { justify-content: center; } .ds-hidden { display: none !important; } .ds-cta { display: grid; gap: var(--ds-space-4); justify-items: center; padding: clamp(2rem, 5vw, 3.5rem); text-align: center; background: var(--ds-primary); color: #fff; border-radius: var(--ds-radius); } .ds-cta h2 { color: #fff; margin: 0; } .ds-cta p { margin: 0; color: rgba(255, 255, 255, .85); max-width: 60ch; } .ds-cta__actions { display: flex; flex-wrap: wrap; gap: var(--ds-space-3); justify-content: center; } /* ========================================================================= 18. Blocchi / pattern ========================================================================= */ .wp-block-button__link { border-radius: var(--ds-radius-sm); } .wp-block-image img { border-radius: var(--ds-radius-sm); } .wp-block-separator { border-color: var(--ds-line); } .ds-promo-band { display: grid; gap: var(--ds-space-4); align-items: center; padding: clamp(1.5rem, 4vw, 2.5rem); background: var(--ds-accent); color: #fff; border-radius: var(--ds-radius); } @media (min-width: 800px) { .ds-promo-band { grid-template-columns: 1fr auto; } } .ds-promo-band h2 { color: #fff; margin: 0 0 var(--ds-space-2); } .ds-promo-band p { margin: 0; color: rgba(255, 255, 255, .9); } /* ========================================================================= 19. Responsive ========================================================================= */ @media (max-width: 767px) { .ds-topbar__inner { justify-content: center; text-align: center; } .ds-header__actions .ds-btn--cta { display: none; } .ds-footer__bottom { justify-content: center; text-align: center; } .ds-brand img { max-height: 40px; } } @media (max-width: 480px) { .ds-hero__actions .ds-btn { width: 100%; } .ds-cta__actions .ds-btn { width: 100%; } } @media print { .ds-topbar, .ds-header, .ds-footer, .ds-to-top, .ds-nav-toggle, .dcrm-filters, .dcrm-form { display: none !important; } body { background: #fff; } .ds-entry, .ds-vehicle__block { border: 0; box-shadow: none; } } /* ========================================================================= 20. Preferenze utente ========================================================================= */ @media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; scroll-behavior: auto !important; } .ds-card:hover, .ds-btn:hover { transform: none; } } /* * Dark mode limitata a header, topbar e footer: le superfici del contenuto * restano chiare per non alterare la resa dei colori delle vetture. */ @media (prefers-color-scheme: dark) { .ds-header { background: #0a1220; border-bottom-color: rgba(255, 255, 255, .1); } .ds-header .ds-brand__name { color: #fff; } .ds-header .ds-brand__tagline { color: rgba(255, 255, 255, .6); } .ds-header .ds-nav a { color: rgba(255, 255, 255, .86); } .ds-header .ds-nav a:hover, .ds-header .ds-nav a:focus-visible { background: rgba(255, 255, 255, .1); color: #fff; } .ds-header .ds-nav .current-menu-item > a { background: rgba(255, 255, 255, .1); color: #fff; } .ds-nav-toggle { background: rgba(255, 255, 255, .08); border-color: rgba(255, 255, 255, .16); color: #fff; } @media (max-width: 1023px) { .ds-nav { background: #0a1220; border-bottom-color: rgba(255, 255, 255, .1); } .ds-nav a { border-bottom-color: rgba(255, 255, 255, .1); } } .ds-btn--outline { border-color: rgba(255, 255, 255, .24); color: #fff; } .ds-footer { background: #060c16; } } /* ------------------------------------------------------------ Elementor */ .ds-full-width .ds-main > .ds-entry--full, .ds-elementor-content .ds-main > .ds-entry { max-width: none; margin: 0; padding: 0; } .ds-full-width .ds-entry__content > .elementor, .ds-elementor-content .ds-entry__content > .elementor { margin: 0; } /* I widget Dealer CRM ereditano i token del tema anche dentro Elementor. */ .elementor-widget[data-widget_type^="dcrm-"] { --dcrm-primary: var(--ds-primary); --dcrm-primary-600: var(--ds-primary-600); --dcrm-accent: var(--ds-accent); --dcrm-accent-600: var(--ds-accent-600); --dcrm-ink: var(--ds-ink); --dcrm-muted: var(--ds-muted); --dcrm-line: var(--ds-line); --dcrm-bg: var(--ds-bg); --dcrm-surface: var(--ds-surface); --dcrm-radius: var(--ds-radius); --dcrm-font: var(--ds-font); } /* Nell'editor le griglie devono restare visibili anche senza dati reali. */ .elementor-editor-active .dcrm-empty { border: 1px dashed var(--ds-line); }