/* -------------------------------------------------------------------------- * Header - colori come su britishmotors-subaru.it * * Motors 5.6 colora insieme top bar e header principale di nero (#232628): * .stm-layout-header-car_dealer #top-bar, * .stm-layout-header-car_dealer .header-main { background-color: #232628; } * * In produzione la fascia principale e' blu e solo la top bar resta scura. * Le Theme Options hanno i campi header_bg_color / header_text_color, ma il * template header-car_dealer.php non li usa: vanno applicati via CSS. * * Questo file e' scritto a mano e NON viene rigenerato: le modifiche fatte qui * sopravvivono agli aggiornamenti del tema (a differenza di motors-brand-colors.css). * -------------------------------------------------------------------------- */ /* Fascia principale blu, top bar scura. */ .stm-layout-header-car_dealer .header-main { background-color: #1f82d9; } .stm-layout-header-car_dealer #top-bar { background-color: #232628; } /* Icone ed etichette in azzurro. */ .stm-layout-header-car_dealer .header-main .header-address .stm-icon-pin, .stm-layout-header-car_dealer .header-main .header-main-phone .stm-icon-phone, .stm-layout-header-car_dealer .header-main .header-main-phone .phone .phone-label, .stm-layout-header-car_dealer .header-main .header-secondary-phone .phone .phone-label { color: #4ce8f3; } /* Testi in bianco: indirizzo e numero di telefono. */ .stm-layout-header-car_dealer .header-main .header-address .address, .stm-layout-header-car_dealer .header-main .header-address .address span, .stm-layout-header-car_dealer .header-main .header-main-phone .phone .phone-number, .stm-layout-header-car_dealer .header-main .header-main-phone .phone .phone-number a, .stm-layout-header-car_dealer .header-main .header-secondary-phone .phone .phone-number { color: #ffffff; } /* Il link "visualizza sulla mappa" resta azzurro. */ .stm-layout-header-car_dealer .header-main .header-address .address a, .stm-layout-header-car_dealer .header-main .header-address .address a:link, .stm-layout-header-car_dealer .header-main .header-address .address a:visited { color: #4ce8f3; } .stm-layout-header-car_dealer .header-main .header-address .address a:hover { color: #ffffff; } /* Social: icona bianca senza cerchio, azzurra al passaggio del mouse. */ .stm-layout-header-car_dealer .header-main .header-main-socs ul li a { background-color: transparent; color: #ffffff; } .stm-layout-header-car_dealer .header-main .header-main-socs ul li a:hover { background-color: transparent; color: #4ce8f3; } /* Link alla mappa. Il tema lo stampa come e lo apre in un lightbox con iframe, che Google rifiuta (X-Frame-Options). bm-header-map.php lo sostituisce con un verso Google Maps, come in produzione: la classe cambia apposta, altrimenti lightGallery si riaggancia e blocca il click. Le due classi restano stilate insieme per il breve istante prima della sostituzione. */ .stm-layout-header-car_dealer .header-main .header-address .address .fancy-iframe, .stm-layout-header-car_dealer .header-main .header-address .address .bm-map-link { color: #4ce8f3; font-size: 12px; font-weight: 400; text-transform: none; text-decoration: none; cursor: pointer; } .stm-layout-header-car_dealer .header-main .header-address .address .fancy-iframe:hover, .stm-layout-header-car_dealer .header-main .header-address .address .bm-map-link:hover { color: #ffffff; border-bottom-color: rgba(255, 255, 255, 0.6); } /* -------------------------------------------------------------------------- * Footer: colori come su britishmotors-subaru.it (misurati sul sito live). * * Il footer sta su #232628. Valori di produzione: * titolo del primo widget #1f82d9 (blu del brand) * titolo "Orari di apertura" bianco * testo dei widget bianco * link #6c98e1 (blu chiaro) * riga copyright #555 * * Nota: motors-brand-colors.css rimappa #6c98e1 -> #1f82d9 su tutto il sito, ma sul * fondo scuro del footer quel blu non ha contrasto sufficiente: qui si torna al * valore di produzione. * -------------------------------------------------------------------------- */ #footer-main #custom_html-1 .widget_title h3, #footer-main #custom_html-1 .widget_title, #footer-main #custom_html-1 h6 { color: #1f82d9; } /* 2026-09-14: su richiesta di Max footer riallineato alla produzione (#6c98e1, 5,23:1 AA). * Nota storica: link del footer schiariti rispetto alla produzione. * Il valore di produzione e' #6c98e1, che su #232628 da' 5,23:1 (passa AA, non AAA). * #9fbdf0 e' lo stesso blu piu' chiaro e arriva a 7,98:1, quindi AAA anche a 13px, * senza spostarsi dalla tinta del brand. Scelta di leggibilita' voluta il 2026-09-11. */ #footer-main a, #footer-copyright .copyright-text a { color: #6c98e1; } #footer-main a:hover, #footer-copyright .copyright-text a:hover { color: #ffffff; } /* 2026-09-14: riallineata alla produzione, #888888 in Open Sans (4,7:1, AA). * Nota storica: riga del copyright schiarita rispetto alla produzione. * Il valore di produzione e' #555555, che su #232628 da' 2,04:1 a 13px: sotto * qualsiasi soglia di leggibilita'. #9a9a9a arriva a 5,73:1 (AA) e resta comunque * piu' spento del testo dei widget (#aaaaaa, 6,55:1), come vuole una riga di * copyright. Scelta di leggibilita' voluta il 2026-09-11. */ #footer-copyright .copyright-text { color: #888888; font-family: "Open Sans", Arial, sans-serif; } /* -------------------------------------------------------------------------- * Hero delle pagine interne, come su britishmotors-subaru.it. * * In produzione l'immagine di testata e' alta 450px fissi e il titolo della * pagina e' nascosto: sono due regole CSS custom aggiunte a mano nel 4.x * (`.entry-header { height: 450px }` e `.entry-title { display: none }`), * non stili del tema, per questo dopo la migrazione l'hero risultava alto * solo 222px e col titolo in evidenza. * * Il titolo si nasconde solo dentro l'hero: in produzione la regola e' globale, * ma cosi' si evita di far sparire i titoli altrove (blog, archivi). * -------------------------------------------------------------------------- */ .entry-header { height: 450px; } .entry-header .entry-title { display: none; } /* Su schermi piccoli 450px occuperebbero mezza pagina. */ @media (max-width: 767px) { .entry-header { height: 240px; } } /* Niente velo scuro sopra l'immagine di testata. * * Il tema stende un overlay al 50% (`.entry-header::after { background: rgba(35,38,40,.5) }`) * per rendere leggibile il titolo sopra la foto. In produzione quell'overlay e' annullato * (`background: rgba(0,0,0,0)`) e le foto si vedono a colori pieni; con il titolo nascosto * non serve piu' a nulla e scuriva soltanto le immagini. */ .entry-header::after { background: rgba(0, 0, 0, 0); } /* -------------------------------------------------------------------------- * Testate senza immagine: foto predefinita come nel 4.x (2026-09-14). * * app.css del 4.x dava a ogni .entry-header la foto title-box-default-bg.jpg (la strada), * che la 5.6 non assegna piu': la testata restava una fascia grigia, e prima la * nascondevamo sulle schede veicolo. Su richiesta di Max si torna alla produzione: * foto predefinita ovunque manchi un'immagine (schede veicolo, blog, archivi). * Il file esiste ancora nel tema 5.6. * -------------------------------------------------------------------------- */ .entry-header[style=""] { background-image: url("../motors/assets/images/title-box-default-bg.jpg"); background-size: cover; background-position: 50% 0; } /* -------------------------------------------------------------------------- * Mobile: hamburger e pulsanti sulla fascia blu dell'header. * * Il tema disegna le tre barre dell'hamburger nel colore del brand. Qui la * fascia principale dell'header e' blu (#1f82d9, vedi sopra), quindi le barre * risultavano blu su blu: invisibili. Stesso problema per l'icona dei contatti. * -------------------------------------------------------------------------- */ .stm-layout-header-car_dealer .header-main .mobile-menu-trigger span { background-color: #ffffff; } .stm-layout-header-car_dealer .header-main .mobile-contacts-trigger, .stm-layout-header-car_dealer .header-main .mobile-contacts-trigger i { color: #ffffff; } /* -------------------------------------------------------------------------- * Header come nel 4.x (2026-09-14), valori misurati su britishmotors-subaru.it. * -------------------------------------------------------------------------- */ /* Barra superiore: testo come scritto nelle Theme Options (niente maiuscolo forzato). */ .stm-layout-header-car_dealer #top-bar { text-transform: none; } .stm-layout-header-car_dealer #top-bar .top-bar-info li { text-transform: none; line-height: 14px; } /* Contatti allineati come nel 4.x: la 5.6 aggiunge al blocco padding 0 15px 15px, che lo abbassa di 15px e lo stacca di 15px dal bordo destro del contenitore. */ .stm-layout-header-car_dealer .header-main .header-top-info { padding-top: 0; padding-right: 0; } .stm-layout-header-car_dealer #top-bar .top-bar-info li i { margin-right: 5px; } /* Facebook: nel 4.x (Font Awesome 4) era la "f" semplice; fa-facebook di Font Awesome 6 e' la "f" nel cerchio, piu' larga, e sposta tutti i contatti di 15px. Glifo facebook-f. */ .header-main-socs .fa-facebook:before, .copyright-socials .fa-facebook:before { content: "\f39e"; } /* -------------------------------------------------------------------------- * Testata della home uguale a quelle delle altre pagine (2026-09-29). * * Le pagine interne usano .entry-header, che il tema disegna a tutta finestra * con background-size: cover e altezza fissa (450px, 240px sotto i 767px). * La home non puo' usare lo stesso meccanismo: page.php del tema racchiude * partials/title_box in un ' ! is_front_page() ', e per aggirarlo servirebbe * sovrascrivere page.php nel child, cioe' un file da riconfrontare a ogni * aggiornamento del tema. Si e' scelto di non farlo. * * La sua testata resta quindi l'elemento Single image della prima riga, a cui * qui diamo lo stesso comportamento: larghezza piena (la riga e' * stretch_row_content_no_spaces) e ritaglio cover alla stessa altezza. * Solo CSS del child: nessun file del tema toccato. * -------------------------------------------------------------------------- */ .bm-home-hero .wpb_single_image, .bm-home-hero .wpb_single_image .vc_figure, .bm-home-hero .wpb_single_image .vc_single_image-wrapper { display: block; width: 100%; } .bm-home-hero .wpb_single_image img { width: 100%; height: 450px; object-fit: cover; object-position: 50% 0; } @media (max-width: 767px) { .bm-home-hero .wpb_single_image img { height: 240px; } } /* -------------------------------------------------------------------------- * Testata di contatti: stessa altezza delle altre pagine (2026-09-29). * * Contatti non ha una .entry-header: la foto sta in una riga parallax, la cui * altezza e' il padding-top della riga (impostato a 449px nel css della riga, * +1px del contenuto = 450, come .entry-header). * * Sotto i 767px le altre testate scendono a 240px, ma quel padding e' fisso e * per giunta con !important: serve ripeterlo qui. La classe bm-contatti-hero * e' nostra (el_class della riga), non generata da WPBakery, quindi non cambia * se la riga viene risalvata dall'editor. * -------------------------------------------------------------------------- */ @media (max-width: 767px) { /* due classi: il css inline di WPBakery (.vc_custom_...) ha una sola classe con !important ed e' stampato dopo i fogli di stile, quindi a parita' di specificita' vincerebbe lui. */ .vc_row.bm-contatti-hero { padding-top: 239px !important; } }