/* ========================================================================== The Invisible Excellence - livello di design -------------------------------------------------------------------------- Implementa le linee guida del brief Stitch "Redesign Corporate Premium". E' un livello di TOKEN e di COMPONENTI: non riscrive le pagine, offre le variabili e le classi con cui adeguarle una alla volta. Perche' un livello separato e non modifiche sparse: il sito ha 1.101 pagine e 132 gradienti solo sulla home. Cambiare a mano significa cambiare in modo diverso in posti diversi. Un token si cambia una volta. NOTA SUL FONT Il brief chiede "Satoshi o Inter". Le pagine chiedevano a Google Fonts la prima delle due, che Google non distribuisce: la richiesta veniva ignorata in silenzio e tutta l'interfaccia ripiegava su system-ui - cioe' Segoe UI su Windows, San Francisco su Mac, Roboto su Android. Un marchio che si presenta come corporate premium non puo' avere tre volti a seconda del dispositivo di chi guarda. Si usa Inter, che il brief ammette e che si carica davvero. (Questo commento e' stato riscritto a mano: la sostituzione automatica del nome del font aveva cambiato anche le parole che lo spiegavano, e il commento diceva il contrario di quello che era successo.) ========================================================================== */ :root { /* Rete per i fogli che usano i token senza definirli: senza questa riga 35 pagine rendono i titoli col font di sistema. */ --font-h: 'Cormorant Garamond',Georgia,serif; --font-b: 'Inter',system-ui,sans-serif; /* --- colore ---------------------------------------------------------- */ --vp-nero: #030303; /* Obsidian Black: il fondo */ --vp-inchiostro: #0A0908; /* superfici sollevate, nero appena caldo */ --vp-oro: #C4A84A; /* Champagne Gold: solo conversione e accenti */ --vp-oro-chiaro: #D9C176; --vp-avorio: #EDEAE3; /* testo primario: bianco sporco, non bianco */ --vp-fumo: #9A958C; /* testo secondario */ --vp-fumo-tenue: #6E6A63; /* Le linee. 0.5px e non 1px: a schermo denso resta un capello, a schermo normale il browser la rende comunque. E' la differenza fra un bordo disegnato e un bordo che sembra un errore. */ --vp-linea: rgba(255, 255, 255, .10); --vp-linea-oro: rgba(196, 168, 74, .22); /* --- respiro ---------------------------------------------------------- */ /* Il vuoto e' il segnale di lusso piu' economico che esista: non costa niente e non si puo' imitare a meta'. */ --vp-sez: clamp(80px, 10vw, 160px); --vp-sez-corta: clamp(48px, 6vw, 96px); --vp-gutter: clamp(20px, 4vw, 56px); --vp-max: 1240px; --vp-max-testo: 64ch; /* --- tipografia -------------------------------------------------------- */ --vp-display: 'Cormorant Garamond', 'EB Garamond', Georgia, 'Times New Roman', serif; --vp-ui: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, system-ui, sans-serif; /* --- movimento --------------------------------------------------------- */ --vp-lento: 620ms cubic-bezier(.22, .61, .36, 1); --vp-medio: 420ms cubic-bezier(.22, .61, .36, 1); } /* ========================================================================== Tipografia ========================================================================== */ /* I titoli sono monumentali e sottili: il peso 300 su un corpo grande e' quello che distingue una rivista di architettura da un volantino. */ .vp-display { font-family: var(--vp-display); font-weight: 300; line-height: 1.02; letter-spacing: -.012em; color:var(--vp-avorio); text-wrap: balance; margin: 0; } .vp-d1 { font-size: clamp(42px, 7.2vw, 104px); } .vp-d2 { font-size: clamp(32px, 4.6vw, 62px); } .vp-d3 { font-size: clamp(24px, 2.8vw, 38px); } /* L'accento oro dentro un titolo si usa una volta sola per titolo. Due accenti non sono due enfasi: sono zero. */ .vp-display .oro { color:var(--vp-oro); font-style: normal; } .vp-testo { font-family: var(--vp-ui); font-weight: 300; font-size: clamp(15px, 1.05vw, 17px); line-height: 1.72; color:var(--vp-fumo); max-width: var(--vp-max-testo); } .vp-testo strong { color:var(--vp-avorio); font-weight: 500; } /* L'etichetta: piccola, spaziata, oro. Serve a dire "qui comincia una sezione" senza usare un titolo. */ .vp-eyebrow { font-family: var(--vp-ui); font-size: 10.5px; font-weight: 500; letter-spacing: .24em; text-transform: uppercase; color:var(--vp-oro); margin: 0 0 18px; } /* ========================================================================== Struttura ========================================================================== */ .vp-sezione { padding: var(--vp-sez) 0; } .vp-sezione--corta { padding: var(--vp-sez-corta) 0; } .vp-w { width: 100%; max-width: var(--vp-max); margin: 0 auto; padding: 0 var(--vp-gutter); } /* Una riga sottile fra le sezioni al posto di uno stacco di colore: separa senza gridare. */ .vp-sezione + .vp-sezione { border-top: .5px solid var(--vp-linea); } /* ========================================================================== Materialita': il vetro ========================================================================== */ /* backdrop-filter simula la lastra: cio' che sta sotto si vede, sfocato. E' l'unico effetto del sistema che imita davvero il prodotto venduto. */ .vp-vetro { background: rgba(10, 9, 8, .62); backdrop-filter: blur(14px) saturate(1.15); -webkit-backdrop-filter: blur(14px) saturate(1.15); border-bottom: .5px solid var(--vp-linea); } @supports not (backdrop-filter: blur(1px)) { .vp-vetro { background: rgba(10, 9, 8, .94); } } .vp-pannello { background: rgba(255, 255, 255, .022); border: .5px solid var(--vp-linea); border-radius: 2px; padding: clamp(20px, 2.4vw, 34px); } /* ========================================================================== Trust Quadrant - i segnali di fiducia in griglia leggibile ========================================================================== */ /* Il brief chiede che siano "chiaramente leggibili dagli algoritmi": una griglia con etichette esplicite lo e' molto piu' di una riga di icone. */ .vp-trust { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .5px; background: var(--vp-linea); border: .5px solid var(--vp-linea); } @media (min-width: 900px) { .vp-trust { grid-template-columns: repeat(4, minmax(0, 1fr)); } } .vp-trust-c { background: var(--vp-nero); padding: clamp(18px, 2vw, 28px); } .vp-trust-v { font-family: var(--vp-display); font-weight: 300; font-size: clamp(26px, 3vw, 40px); line-height: 1; color:var(--vp-oro); } .vp-trust-e { font-family: var(--vp-ui); font-size: 10px; font-weight: 500; letter-spacing: .2em; text-transform: uppercase; color:var(--vp-fumo); margin-top: 10px; } /* ========================================================================== Azioni ========================================================================== */ .vp-cta { display: inline-flex; align-items: center; justify-content: center; gap: 10px; min-height: 52px; padding: 0 34px; font-family: var(--vp-ui); font-size: 12.5px; font-weight: 500; letter-spacing: .16em; text-transform: uppercase; text-decoration: none; border-radius: 1px; border: .5px solid transparent; transition: background var(--vp-medio), color var(--vp-medio), border-color var(--vp-medio); } .vp-cta--oro { background: var(--vp-oro); color:#100E09; } .vp-cta--oro:hover, .vp-cta--oro:focus-visible { background: var(--vp-oro-chiaro); } /* La secondaria non compete: nessun fondo, solo un filo. Il brief chiede una sola CTA dominante per schermata. */ .vp-cta--filo { background: transparent; color:var(--vp-avorio); border-color: var(--vp-linea); } .vp-cta--filo:hover, .vp-cta--filo:focus-visible { border-color: var(--vp-oro); color:var(--vp-oro); } /* ========================================================================== Movimento ========================================================================== */ /* Entrata dal basso, lenta. Lo stato di partenza si applica SOLO quando il JavaScript ha marcato il documento: senza questa precauzione, con lo script bloccato la pagina resterebbe invisibile. Un effetto non deve mai poter nascondere il contenuto. */ html.vp-anima .vp-su { opacity: 0; transform: translateY(22px); transition: opacity var(--vp-lento), transform var(--vp-lento); } html.vp-anima .vp-su.vp-dentro { opacity: 1; transform: none; } @media (prefers-reduced-motion: reduce) { html.vp-anima .vp-su { opacity: 1; transform: none; transition: none; } .vp-cta { transition: none; } } /* ========================================================================== Immagini ========================================================================== */ .vp-figura { position: relative; overflow: hidden; background: var(--vp-inchiostro); } .vp-figura img { display: block; width: 100%; height: 100%; object-fit: cover; } /* Ken Burns molto lento e molto piccolo: deve accorgersene il corpo, non l'occhio. Un movimento che si nota e' un movimento sbagliato. */ @media (prefers-reduced-motion: no-preference) { .vp-figura--vivo img { animation: vp-kb 26s ease-in-out infinite alternate; } @keyframes vp-kb { from { transform: scale(1.02); } to { transform: scale(1.075); } } } /* =========================================================================== LA BARRA SU TELEFONO --------------------------------------------------------------------------- Misurato su uno schermo da 375 px: logo 180 + voci 59 + telefono 141 = 380, che partono da 32. La barra ha overflow:hidden, quindi non sborda: TAGLIA. Il numero si leggeva "329 975 76" - mezza cifra - proprio nella riga piu' vista del sito. La regola che risolve esisteva gia', ma dentro css/vp-004.css, che 848 pagine su 884 non caricano. Qui e' in un foglio che tutte e 929 caricano. Le voci del menu spariscono, non il numero: schiacciate a 59 px mostravano soltanto "Tende", e sotto c'e' gia' la barra fissa con WhatsApp e Chiama piu' il menu in fondo alla pagina. Un numero di telefono leggibile vale piu' di un menu illeggibile. =========================================================================== */ @media (max-width: 700px) { .main-nav .nav-links { display: none !important; } .main-nav { padding-left: 14px !important; padding-right: 14px !important; gap: 10px !important; justify-content: space-between !important; } .main-nav .logo { flex: 0 1 auto; min-width: 0; } .main-nav .nav-cta { flex: 0 0 auto; white-space: nowrap; font-size: clamp(12px, 3.4vw, 15px); padding-left: 12px !important; padding-right: 12px !important; } } /* sotto i 380 px il logo cede qualche pixel prima del numero: il numero e' una informazione, il logo una firma - e la firma si legge lo stesso */ @media (max-width: 380px) { .main-nav .logo { transform: scale(.88); transform-origin: left center; } .main-nav .nav-cta { font-size: 12px; letter-spacing: 0; } } /* =========================================================================== LA RIGA LEGALE --------------------------------------------------------------------------- "Vetrate Premium, premium brand di Soluzioni D'Arredo Srl - P.I. ..." Una volta sola, in fondo, piccolissima. Serve a soddisfare un obbligo, non a comunicare: quindi si stacca dal resto con un filo, non con uno spazio, e sta sotto la soglia in cui l'occhio la legge senza cercarla. Misurato nel browser: alla prima stesura era 3,42:1, sotto la soglia AA di 4,5:1 per il testo piccolo. Una nota legale illeggibile non assolve l obbligo per cui sta li, e a quel punto tanto vale non scriverla. Adesso e sopra 4,5:1 alla stessa dimensione: cambia il contrasto, non la grandezza, che e quella richiesta. "Piccolissimo" non puo voler dire illeggibile: "piccolissimo" non puo' voler dire illeggibile, o smette di assolvere l'obbligo per cui e' li'. =========================================================================== */ .vp-legale { display: block; margin: 22px auto 0; padding-top: 12px; max-width: 62ch; border-top: 1px solid rgba(255, 255, 255, .07); font-size: 10px; line-height: 1.6; letter-spacing: .03em; color:rgba(255,255,255,.54); text-align: center; font-weight: 400; } @media (max-width: 700px) { .vp-legale { font-size: 9.5px; padding-inline: 14px } } /* ========================================================================== LA CODA DELLA PAGINA - UN SISTEMA SOLO -------------------------------------------------------------------------- Misurato sulla home, dalla sezione del preventivo alla fine: tre famiglie di caratteri, DODICI corpi diversi, DIECI colori di testo di cui cinque bianchi, e otto elementi sotto la soglia di contrasto AA. Non e' un tema scuro riuscito male: sono tre blocchi costruiti in momenti diversi - il calcolatore, gli approfondimenti, il piede - ognuno con il suo occhiello, il suo titolo e il suo grigio, impilati uno sull'altro. I DUE PEGGIORI, misurati: contatti nel piede rgba(196,168,74,.4) su nero 2,17 : 1 "WhatsApp Diretto" verde chiaro su verde WhatsApp 1,14 : 1 Il secondo e' un pulsante il cui testo ha lo stesso colore del fondo. SULLA SPECIFICITA' La prima stesura di queste regole non ha avuto effetto su meta' degli elementi, e la ragione non era la regola: era l'ORDINE. Le pagine caricano vp-eccellenza.css PRIMA di vp-001.css, quindi a parita' di specificita' vince l'altro. Qui la classe e' ripetuta e preceduta da "html body" per alzare il peso in modo esplicito, invece di ricorrere a !important, che vincerebbe su tutto compreso cio' che non si vuole toccare. Si cambiano SOLO corpo, colore e superficie: la struttura resta. I colori sono i token gia' definiti in cima a questo foglio, non valori nuovi - misurati su #030303 danno 6,9 : 1 il fumo, 8,9 : 1 l'oro, oltre 15 : 1 l'avorio. ========================================================================== */ /* --- le superfici: due, al posto di quattro quasi identiche -------------- */ /* #030303, #080706, #070605 e un bianco all'1% differiscono di quattro punti di luminosita': non si leggono come alternanza, si leggono come sporco. */ html body .vp-blog, html body footer, html body .geo-nav { background-color: var(--vp-nero) } html body .vp-home-hub { background-color: var(--vp-inchiostro) } /* --- gli occhielli: uno solo -------------------------------------------- */ html body .vpx__k.vpx__k, html body .vp-blog-ey.vp-blog-ey { font-family: var(--vp-ui); font-size: 11px; font-weight: 600; letter-spacing: .2em; text-transform: uppercase; color:var(--vp-oro); } /* --- i titoli: stesso passo, stesso bianco ------------------------------ */ html body .vpx__h.vpx__h, html body .vp-blog-h.vp-blog-h { font-family: var(--vp-display); font-size: clamp(29px, 3.4vw, 38px); font-weight: 300; line-height: 1.12; color:var(--vp-avorio); text-wrap: balance; } html body .vpx__ct.vpx__ct { font-family: var(--vp-display); font-size: 23px; font-weight: 400; color:var(--vp-avorio); } /* --- i testi di servizio: un grigio solo -------------------------------- */ html body .vpx__s.vpx__s, html body .vp-blog-s.vp-blog-s, html body .vpx__cd.vpx__cd { font-family: var(--vp-ui); font-size: 15px; line-height: 1.62; color:var(--vp-fumo); } html body .vpx__t.vpx__t, html body .vp-nota-prezzo.vp-nota-prezzo { font-size: 12.5px; line-height: 1.6; color:var(--vp-fumo); } html body .vpx__s.vpx__s b, html body .vpx__s.vpx__s strong { color:var(--vp-avorio); font-weight: 500 } /* --- l'oro dei richiami: pieno, non al quaranta per cento --------------- */ html body .vpx__c.vpx__c, html body .vpx__cg.vpx__cg, html body .vp-blog-tutti.vp-blog-tutti { color:var(--vp-oro) } /* --- IL PIEDE ----------------------------------------------------------- */ /* .fc era a 8 px. Sotto quella misura non e' "testo piccolo": e' testo che nessuno legge, e occupa comunque lo spazio. */ html body footer .fc.fc { font-size: 11px; letter-spacing: .04em; color:var(--vp-fumo); } /* i contatti erano a 2,17 : 1, e sono il telefono, l'email e WhatsApp: esattamente la parte del piede che serve a essere chiamati. */ html body footer .sb, html body footer .footer-nav a, html body footer .social-bar a, html body footer .footer-copy a, html body footer .footer-slogan a { color:var(--vp-oro); font-size: 12.5px; } html body footer .footer-copy, html body footer .footer-copy *, html body footer .footer-slogan, html body footer .footer-slogan * { font-size: 11.5px; color:var(--vp-fumo); } html body footer a:hover, html body footer a:focus-visible { color:var(--vp-oro-chiaro) } /* --- il pulsante WhatsApp: era verde su verde --------------------------- */ /* Il verde del marchio WhatsApp e' #25D366. Il testo era #4ADE80, cioe' un verde piu' chiaro dello stesso tono: 1,14 : 1. Su quel fondo l'unico colore che si legge e' un verde molto scuro, che e' anche quello che WhatsApp stesso usa. */ /* IL VERDE SCURO VA SOLO DOVE IL FONDO E' VERDE. La prima stesura di questa regola diceva: html body a[href*="wa.me"] { color:#04270F } cioe' dava il verde scuro a QUALUNQUE link verso WhatsApp. Sui pulsanti con lo sfondo #25D366 e' giusto - 8,13 : 1 - ma un link WhatsApp testuale, su fondo nero, e' diventato 1,28 : 1: praticamente invisibile. Il passaggio su tutte le pagine renderizzate l'ha trovato. Il colore del testo dipende dal FONDO su cui sta, non dalla destinazione del link: qui si distinguono i due casi. */ /* AGGIORNATO: i selettori per CLASSE sono stati tolti. Restano solo quelli che guardano il fondo dichiarato nello stile in linea. Motivo: ".btn-wa" dice come si chiama il pulsante, non su che colore sta. Su quattro pagine il fondo e" sovrascritto a verde translucido al 10% sopra il nero, e li" il verde scuro faceva 1,28 : 1 - invisibile. Il colore adesso e" accoppiato al fondo nella regola che lo dichiara, in tutti i 631 punti in cui compare. */ html body [style*="25d366"], html body [style*="25D366"] { color:#04270F !important } /* NESSUNA REGOLA DI COLORE BASATA SULL'INDIRIZZO DEL LINK. Ci ho provato due volte e ho sbagliato due volte, per la stessa ragione. Prima "a[href*=wa.me] { color:#04270F }": giusto sui pulsanti verdi, 1,28 : 1 su un link testuale sul nero. Poi "a[href*=wa.me]:not([class*=btn]) { color:oro }": ma .nav-cta e' un pulsante ORO e non contiene "btn" nel nome, quindi si e' ritrovato testo oro su fondo oro - 1,00 : 1, invisibile. Il colore di un testo dipende dal FONDO su cui poggia, non da dove porta il link. Sopra resta la sola regola che guarda una classe il cui fondo e' noto - .btn-wa, verde WhatsApp - e per tutto il resto decide il sito. */ /* .footer-slogan NON sta dentro