/* Palette in uso: Pletta Immobiliare Piccolo */ /* =========================================================================== I COLORI DEL SITO, TUTTI QUI DENTRO =========================================================================== Questo file esiste per una ragione sola: avere un unico posto dove mettere le mani sui colori. Per rifare il sito con un'altra tinta - o per clonare il tema per un'altra agenzia - si copia la cartella del tema e si cambiano i valori qui sotto, senza andare a cercare dentro le migliaia di righe degli altri fogli di stile. Come funziona ------------- I colori non sono scritti direttamente nelle regole: sono variabili, e le regole del tema le richiamano con var(--ip-qualcosa). Cambiando il valore qui, cambia ovunque quel colore sia usato. Le stesse variabili sono definite anche dentro template_immobiliare_1.css, che e' il foglio del template e non va modificato. Questo file viene caricato DOPO quello, quindi i valori scritti qui hanno la meglio: si governa il colore senza toccare il file del template. ATTENZIONE ALL'ORDINE: se un giorno si cambia l'ordine dei fogli di stile in partials/head.php, questo deve restare l'ultimo, altrimenti i valori del template tornano a comandare. Si modifica dal pannello ------------------------ Backend > Colori del sito. Salvando, il pannello riscrive questo file: le note qui sopra restano, i valori vengono aggiornati. Si puo' comunque modificare a mano, con un qualsiasi editor di testo. =========================================================================== */ :root { /* --- I due colori del marchio --------------------------------------- Il verde e il blu dell'insegna. Sono quelli che si vedono di piu': pulsanti, collegamenti, titoli, icone. */ --ip-green: #2d8a47; --ip-green-dark: #1b6a35; /* verde scuro: sopra il pulsante, al passaggio del mouse */ --ip-green-light: #e7f4ea; /* verde chiarissimo: sfondi delicati */ --ip-green-deep: #1f7a3d; /* verde intenso: alcune scritte in evidenza */ --ip-green-bright: #2d8a47; /* verde acceso: titolo e prezzo delle schede in evidenza, sopra la fotografia */ --ip-navy: #132290; /* blu del marchio */ --ip-navy-dark: #15145f; /* blu scuro */ --ip-navy-light: #eceaf9; /* blu chiarissimo: sfondi delicati */ --ip-navy-title: #1e2b5c; /* blu dei titoli di sezione, piu' morbido */ /* --- La barra in cima alle pagine ------------------------------------- Quella con telefono, indirizzo e icone dei social. Ha una voce sua perche' non sempre va del colore dei titoli: su certe combinazioni si vuole della tinta viva, con i titoli scuri. */ --ip-barra-superiore: #132290; --ip-barra-superiore-testo: #ffffff; --ip-barra-superiore-social-hover: #2d8a47; /* sfondo dei quadratini social al passaggio del mouse */ --ip-barra-superiore-link-hover: #ffffff; /* telefono, indirizzo ed email al passaggio del mouse */ /* --- Intestazione alternativa (barra scura col menu) ------------------- Solo per l'intestazione scelta in "Contenuti del sito" > "Impostazioni generali" > "Intestazione" quando e' impostata su "alternativa" (menu su una barra a tinta unita, ricerca subito sotto). L'intestazione di sempre non li usa. Il pulsante del telefono invece e' lo stesso in entrambe le intestazioni, per questo le sue due voci valgono sempre. */ --ip-header-sfondo: #dfe2fb; /* sfondo della barra col menu */ --ip-header-menu-testo: #ffffff; /* voci di menu, stato normale */ --ip-header-menu-testo-hover: #ffffff; /* voci di menu, al passaggio del mouse */ --ip-header-tacca: #132290; /* lineetta sotto la voce di menu, su hover o pagina corrente */ --ip-header-telefono: #132290; /* pulsante telefono nell'header, contorno e testo */ --ip-header-telefono-hover: #2d8a47; /* pulsante telefono, sfondo al passaggio del mouse (testo bianco) */ /* --- Modulo di ricerca (Contratto / Tipologia / Città) ---------------- Il modulo che compare in home e nelle intestazioni: quattro colori separati, uno per gruppo di elementi. */ --ip-ricerca-campo: #132290; /* etichette (CONTRATTO, TIPOLOGIA...), contorno e testo delle caselle */ --ip-ricerca-affitto-vendita: #132290; /* pallino e testo delle opzioni Affitto/Vendita */ --ip-ricerca-tasto-cerca: #132290; /* contorno, testo e icona del pulsante Cerca */ --ip-ricerca-tasto-filtri: #132290; /* sfondo e contorno del pulsante Filtri */ /* --- Banner "Vuoi comprare/vendere casa?" ------------------------------- Le due fasce di richiamo della home ("Vuoi comprare casa..."/"Vuoi vendere casa?") e la stessa fascia nella pagina "Richiedi Valutazione": stesso componente, stessi colori ovunque compaia. */ --ip-banner-sfondo-inizio: #132290; /* sfondo del banner, lato sinistro del gradiente */ --ip-banner-sfondo-fine: #132290; /* sfondo del banner, lato destro del gradiente */ --ip-banner-pulsante: #2d8a47; /* icona a cerchio e pulsante, stato normale */ --ip-banner-pulsante-hover: #2d8a47; /* pulsante al passaggio del mouse */ --ip-banner-testo: #ffffff; /* titolo, testo e nota (icona dell'orologio compresa) */ /* --- Immobili in evidenza (home) --------------------------------------- Le schede a foto intera della sezione "Immobili in evidenza": qui sta solo il colore della zona/citta', scritta sotto il titolo. Il titolo, il prezzo e le icone (mq, vani, bagni) restano governati dal "Verde acceso" del marchio (--ip-green-bright, qui sopra). */ --ip-evidenza-zona: #ffffff; /* --- Categorie immobili (home) ------------------------------------------ I riquadri con foto della sezione "Categorie immobili": il nome della tipologia (Villa, Appartamento...) e la voce descrittiva sotto, scritti sopra la fotografia. */ --ip-categoria-titolo: #ffffff; --ip-categoria-voce: #ffffff; /* --- Testate di pagina (banner in cima a home e pagine interne) -------- Il blocco di testo sopra la fotografia: titolo, parola in evidenza nel titolo, sottotitolo ed etichetta piccola sopra il titolo (dove c'e'). Riguarda lo schema "chiaro" usato dalla maggior parte delle pagine; le testate con un proprio schema scuro dedicato (Contatti, Servizi, Richiedi Valutazione) restano come sono, pensate apposta per la loro fotografia. */ --ip-testata-titolo: #ffffff; --ip-testata-titolo-evidenza: #2d8a47; --ip-testata-sottotitolo: #ffffff; --ip-testata-eyebrow: #db0021; /* --- Pulsanti principali del banner home ------------------------------- "Cerca immobili" (pieno) e "Valuta il tuo immobile" (contorno) sopra la fotografia della home. */ --ip-hero-pulsante-primario: #2d8a47; --ip-hero-pulsante-primario-hover: #277c3f; --ip-hero-pulsante-secondario: #277c3f; --ip-hero-pulsante-secondario-hover: #e7f4ea; /* --- Box di ricerca su telefono ----------------------------------------- Lo stesso modulo "Contratto / Tipologia / Città" del box desktop (vedi sopra "Modulo di ricerca"), ma nella versione compatta che compare sulla fotografia della home quando si guarda il sito dal telefono. */ --ip-ricerca-mobile-titolo: #1e2b5c; --ip-ricerca-mobile-campo: #2d8a47; --ip-ricerca-mobile-affitto-vendita: #2d8a47; --ip-ricerca-mobile-tasto-cerca: #1f7a3d; --ip-ricerca-mobile-link-avanzata: #2d8a47; /* --- Piè di pagina ------------------------------------------------------ Sfondo (un leggero gradiente), colore primario (usato per il filetto sotto i titoli di colonna, le icone social, il pulsante WhatsApp, le parole in evidenza della fascia "chi siamo" e la partita IVA) e colore del testo: da questo derivano anche le sfumature piu' tenui gia' presenti (descrizione, note legali...), tramite color-mix() nel CSS. */ --ip-footer-sfondo-inizio: #232323; --ip-footer-sfondo-fine: #282828; --ip-footer-primario: #2d8a47; --ip-footer-testo: #ffffff; /* --- Colori di servizio ---------------------------------------------- Servono ai messaggi: rosso per gli errori, arancione per gli avvisi. Si cambiano di rado. */ --ip-red: #d2130a; --ip-red-dark: #a80f08; --ip-red-light: #fbe9e8; --ip-orange: #ff9f43; --ip-orange-dark: #e07d19; --ip-orange-light: #fff2e4; /* Il cuore dei preferiti: rosso sia da vuoto (contorno) che da pieno, quando l'annuncio e' gia' salvato. */ --ip-preferiti: #e0245e; /* --- Sfondi e superfici ----------------------------------------------- Da qui si decide se il sito e' chiaro o scuro. Sono le tinte grandi: il fondo delle pagine, le fasce che si alternano, il colore delle schede e quello del piede. Per un sito a fasce scure con il testo chiaro - come si vede su certi siti immobiliari - si scuriscono "fascia" e "superficie" e si schiarisce "testo su scuro": non serve toccare nessun foglio di stile. */ --ip-sfondo-pagina: #ffffff; /* il fondo di tutte le pagine */ --ip-fascia-chiara: #f8f8f9; /* le fasce che si alternano al bianco */ --ip-fascia-tenue: #f2f2f3; /* una seconda tinta di fascia, appena piu' marcata */ --ip-superficie: #ffffff; /* schede degli immobili, riquadri, finestre */ --ip-pannello-fondo: #ffffff; /* i pannelli che si aprono di lato */ /* La schermata che si vede mentre la pagina arriva. */ --ip-preloader-cerchio: #2d8a47; /* il cerchio che gira attorno al marchio */ --ip-preloader-sfondo: #eceefd; /* il velo dietro, appena accennato */ --ip-superficie-scura: #252525; /* il piede della pagina e le fasce scure */ --ip-testo-su-scuro: #ffffff; /* il testo quando il fondo e' scuro */ --ip-bordo-tenue: #e5e7eb; /* le righe leggere fra un riquadro e l'altro */ /* --- Testo e bordi ---------------------------------------------------- */ --ip-text-body: #4b5563; /* il grigio dei paragrafi */ --ip-text-heading: #132290; /* il colore dei titoli principali */ --ip-text-muted: #787878; /* note e testi di servizio */ --ip-icona-neutra: #525252; /* icone che restano neutre */ --ip-border: #eeeeee; /* le righe di separazione */ /* --- L'alone attorno ai campi quando si scrive ------------------------- E' il verde del marchio reso trasparente: cambiando il verde qui sopra va cambiato anche qui, perche' il colore e' scritto per esteso. */ --ip-ring: rgba(45, 138, 71, 0.25); --ip-ring-strong: rgba(45, 138, 71, 0.5); /* --- I due nomi che usa il template ------------------------------------ Il foglio del template chiama i colori del marchio "primary" e "secondary": restano agganciati ai due qui sopra, cosi' basta cambiare una volta sola. */ --primary: var(--ip-green); --secondary: var(--ip-navy); }