/* Optimisad — personalizzazioni sopra il tema Gencyo */
/* Palette: blu avio al posto dell'arancione di default del tema */
:root {
--theme-color1: #4A7FB5;
--theme-color1-rgb: 74, 127, 181;
--theme-color1-text-color: #fff;
}
/* Font di sistema con metriche scalate per approssimare "Beatrice Trial" (font
di terze parti da fonts.cdnfonts.com, caricato in modo non bloccante): senza
questo, il fallback generico "sans-serif" ha un box (larghezza/altezza riga)
molto diverso dal font reale, e lo swap al caricamento provoca un layout
shift enorme sull'h1.hero-title in home (CLS 0.597 misurato via PageSpeed
Insights sul report del 2026-07-16, 8 giri dopo il deploy). Valori calcolati
con fontTools confrontando le metriche reali di Beatrice Trial (Bold/Regular)
con quelle di Liberation Sans (clone metric-compatible di Arial) — stesso
algoritmo usato da next/font. Se il font "Beatrice Trial" viene mai
sostituito, questi valori vanno ricalcolati sul nuovo font.
unicode-range limitato ai SOLI 64 glifi realmente presenti in Beatrice Trial
(verificato con fontTools: spazio, punto, 0-9, A-Z, a-z — il font "trial" non
ha NEMMENO gli accenti italiani o quasi tutta la punteggiatura, es. virgola,
due punti, punto interrogativo, parentesi, "·", "—"). Senza questo limite,
il fallback scalato intercetterebbe anche quei caratteri (che già oggi, con
o senza questo fix, ricadono sempre sul fallback perché Beatrice non li ha),
allargandoli del ~2% e cambiando gli a-capo di paragrafi/footer che li usano
— un effetto collaterale reale ma inutile, dato che quei caratteri non fanno
mai lo swap "Beatrice reale" e quindi non contribuiscono al CLS da correggere. */
@font-face {
font-family: "Beatrice Trial Fallback";
src: local("Arial"), local("Liberation Sans"), local("Helvetica"), local("Helvetica Neue");
unicode-range: U+0020, U+002E, U+0030-0039, U+0041-005A, U+0061-007A;
ascent-override: 104.4%;
descent-override: 41.7%;
line-gap-override: 0%;
size-adjust: 101.7%;
}
:root {
--body-font-family: "Beatrice Trial", "Beatrice Trial Fallback", sans-serif;
--heading-font-family: "Beatrice Trial", "Beatrice Trial Fallback", sans-serif;
}
/* Il tema Gencyo imposta strong/b su #333 (pensato per sfondi chiari): sul nostro
body-bg quasi nero (#0D0D0D) il testo in grassetto risulta praticamente invisibile.
Lo riportiamo al bianco dei titoli, come il resto del testo body chiaro-su-scuro. */
b,
strong {
color: var(--headings-color);
}
/* Icone a stella e a spunta ridisegnate come icon-font per seguire il colore accent
(i png originali star.png / check-2-1.png sono arancioni fissi e non seguono la palette) */
.sub-title-star {
color: var(--theme-color1);
margin-right: 8px;
font-size: 13px;
}
/* Il tema Gencyo tratta ".sub-title" (il testo con la stella) come un piccolo
"eyebrow" (16px) sopra il vero titolo h2 ".title" (50px) — ma sul nostro sito
il testo con la stella (es. "Certificazioni", "Cosa faccio", "Servizio 01" in
servizi.html) è il titolo di sezione vero e proprio, mentre il titolo sotto
(h2 ".title" dentro ".sec-title", oppure h3 dentro ".service-detail-block"
nel dettaglio servizi di servizi.html) è più una tagline. Invertiamo
l'enfasi visiva: ingrandiamo il sub-title e rimpiccioliamo il titolo sotto. */
.sec-title .sub-title,
.service-detail-block .sub-title {
font-size: 34px;
font-weight: 600;
color: var(--headings-color);
}
.sec-title .sub-title .sub-title-star,
.service-detail-block .sub-title .sub-title-star {
font-size: 24px;
}
.sec-title .title,
.service-detail-block h3 {
font-size: 20px;
font-weight: 400;
}
@media (max-width: 1199.98px) {
.sec-title .sub-title,
.service-detail-block .sub-title {
font-size: 28px;
}
.sec-title .sub-title .sub-title-star,
.service-detail-block .sub-title .sub-title-star {
font-size: 20px;
}
.sec-title .title,
.service-detail-block h3 {
font-size: 18px;
}
}
@media (max-width: 767.98px) {
.sec-title .sub-title,
.service-detail-block .sub-title {
font-size: 24px;
}
.sec-title .sub-title .sub-title-star,
.service-detail-block .sub-title .sub-title-star {
font-size: 18px;
}
.sec-title .title,
.service-detail-block h3 {
font-size: 17px;
}
}
@media (max-width: 469.98px) {
.sec-title .sub-title,
.service-detail-block .sub-title {
font-size: 21px;
}
.sec-title .sub-title .sub-title-star,
.service-detail-block .sub-title .sub-title-star {
font-size: 16px;
}
.sec-title .title,
.service-detail-block h3 {
font-size: 16px;
}
}
/* Logo grafico (SVG con contorni del font incorporati, nessuna dipendenza da webfont) */
.logo img,
.nav-logo img {
height: 48px;
width: auto;
display: block;
}
.footer-logo img {
height: 40px;
width: auto;
display: block;
}
/* Blocchi statistica (sezione "Un po' di numeri", home) */
.stat-block {
text-align: center;
}
.stat-block .stat-number {
font-size: 48px;
font-weight: 700;
color: var(--theme-color1);
line-height: 1;
margin-bottom: 12px;
}
.stat-block p {
margin: 0;
}
/* Sezione "cosa non faccio" */
.no-list-items ul li i {
color: #9aa0a6;
}
/* Badge testimonianza in arrivo */
/* Servizio: blocco dettaglio completo (pagina Servizi) */
.service-detail-block {
scroll-margin-top: 140px;
}
.service-detail-block + .service-detail-block {
margin-top: 60px;
padding-top: 60px;
border-top: 1px solid rgba(255, 255, 255, 0.08);
}
.service-detail-block .problem-box {
background: var(--theme-color-black);
border-radius: 20px;
padding: 30px;
margin-bottom: 30px;
}
.service-detail-block .fit-box {
border-left: 3px solid var(--theme-color1);
padding-left: 20px;
margin-top: 30px;
}
/* Testo digitato nel form contatti: il tema lo imposta a #686a6f (poco leggibile su sfondo input #222222) */
.form-control {
color: var(--headings-color) !important;
}
/* L'autofill del browser (Chrome/Safari) forza uno sfondo chiaro sugli input via
stile interno non sovrascrivibile con background-color: serve il trucco
dell'inset box-shadow per mantenere lo sfondo scuro del tema, altrimenti il
testo bianco sparisce su sfondo chiaro quando un campo viene autocompilato. */
.form-control:-webkit-autofill,
.form-control:-webkit-autofill:hover,
.form-control:-webkit-autofill:focus {
-webkit-text-fill-color: var(--headings-color);
-webkit-box-shadow: 0 0 0 1000px #222222 inset;
box-shadow: 0 0 0 1000px #222222 inset;
transition: background-color 5000s ease-in-out 0s;
}
/* Hero e page-title senza foto stock (il tema non fornisce foto reali) */
/* Hero home: foto reale (via lattea) con overlay scuro/blu per leggibilità del testo */
.hero-section.hero-photo-bg {
background-color: var(--theme-color3);
background-image: linear-gradient(135deg, rgba(13, 13, 13, 0.75) 0%, rgba(21, 21, 21, 0.55) 55%, rgba(16, 22, 28, 0.8) 100%), radial-gradient(circle at 15% 20%, rgba(74, 127, 181, 0.18) 0%, rgba(74, 127, 181, 0) 45%), url("../images/banner/hero-luci-led.webp");
background-size: cover, cover, cover;
background-position: center, center, center;
background-repeat: no-repeat;
}
/* Sotto i 992px la sezione è alta al massimo ~700px CSS: una variante più piccola
basta anche su schermi ad alto DPR e riduce di netto il peso su mobile (LCP). */
@media (max-width: 991.98px) {
.hero-section.hero-photo-bg {
background-image: linear-gradient(135deg, rgba(13, 13, 13, 0.75) 0%, rgba(21, 21, 21, 0.55) 55%, rgba(16, 22, 28, 0.8) 100%), radial-gradient(circle at 15% 20%, rgba(74, 127, 181, 0.18) 0%, rgba(74, 127, 181, 0) 45%), url("../images/banner/hero-luci-led-mobile.webp");
}
}
.page-title {
background-image: none !important;
background-color: var(--theme-color3);
}
.page-title:before {
background: linear-gradient(179deg, rgba(41, 41, 41, 0.6) 19.26%, rgba(74, 127, 181, 0.45) 97.47%);
}
/* Checklist generica (usata fuori dal contesto .about-content) */
.about-list-items {
border: 1px solid rgba(255, 255, 255, 0.14);
padding: 35px 50px;
border-radius: 20px;
}
.about-list-items ul {
list-style: none;
margin: 0;
padding: 0;
}
.about-list-items ul li {
font-size: 16px;
font-weight: 400;
color: #fff;
display: flex;
align-items: center;
gap: 16px;
}
.about-list-items ul li:not(:last-child) {
margin-bottom: 18px;
}
.about-list-items ul li i {
color: var(--theme-color1);
flex-shrink: 0;
}
.about-list-items.no-list-items ul li i {
color: #6b6b6b;
}
/* Box di richiamo (nota/avviso all'interno del testo) */
.callout-box {
border-left: 3px solid var(--theme-color1);
padding: 20px 30px;
background: rgba(74, 127, 181, 0.08);
border-radius: 0 12px 12px 0;
}
/* Link con freccia usato fuori dalle card servizio (es. hero) */
a.arrow-link {
display: inline-flex;
align-items: center;
gap: 10px;
color: #fff;
font-size: 16px;
font-weight: 500;
text-decoration: underline;
}
a.arrow-link:hover {
color: var(--theme-color1);
}
/* Card testimonianza semplificata (senza foto cliente) */
.testimonial-block-one.simple .inner-box {
min-height: auto;
text-align: center;
}
.testimonial-block-one.simple .inner-box .infu {
padding-top: 20px;
justify-content: center;
}
/* Citazione: il tema la pensa per uno slide a piena larghezza (font-size 20px, max-width
710px); qui sta in una card stretta a 4 colonne, quindi la rimpiccioliamo e togliamo
il max-width che altrimenti non avrebbe effetto. flex:1 + align-items:center centra
la citazione verticalmente nello spazio sopra il nome/ruolo, a prescindere dalla
lunghezza del testo (le card sono equal-height, vedi regola .testimonial-block-one sotto) */
.home-testimonials-section .testimonial-block-one .inner-box .text {
font-size: 15px;
max-width: none;
flex: 1;
display: flex;
align-items: center;
}
/* Icona virgolette decorativa sopra la citazione (non stelline: le recensioni
sono reali - LinkedIn, vedi sotto - ma LinkedIn non ha un sistema di voto a
stelle, quindi delle stelle implicherebbero un punteggio che non esiste).
fa-quote-left::before non è definito nel fontawesome.css purgato (icona non
usata al momento della purge, vedi Performance sopra) — ridichiarato qui. */
.fa-quote-left::before {
content: "\f10d";
}
.home-testimonials-section .testimonial-block-one .inner-box .quote-icon {
color: var(--theme-color1);
font-size: 28px;
margin-bottom: 16px;
}
/* Blocco statistiche a numero (sezione "Un po' di numeri", home) */
.numbers-row {
border: 1px solid rgba(255, 255, 255, 0.14);
border-radius: 20px;
padding: 50px 20px;
}
/* Card di dimensione uniforme in tutte le griglie del sito (griglia "Cosa faccio" in
home, griglia servizi in servizi.html, testimonianze in home): Bootstrap equalizza
già l'altezza delle colonne di una row, ma non quella dei blocchi-card al loro
interno, quindi a testo di lunghezza diversa corrispondono card di altezza diversa.
Qui i blocchi vengono estesi a tutta l'altezza della colonna con flexbox, cosí i
bordi delle card si allineano a prescindere dalla lunghezza di titolo/testo. */
.service-block-one,
.testimonial-block-one {
height: 100%;
}
.service-block-one .inner-block,
.testimonial-block-one .inner-box {
height: 100%;
display: flex;
flex-direction: column;
}
.service-block-one .inner-block .content-box {
display: flex;
flex-direction: column;
flex: 1;
}
.service-block-one .inner-block .content-box .text {
flex: 1;
}
/* Sezione "Cosa faccio" (home): illustrazione Google Ads a piena larghezza di card,
al posto della semplice icona (le altre card restano con icona standard) */
.home-services-section .service-block-one .inner-block .content-box .icon.icon-image {
display: block;
width: 100%;
margin-bottom: 20px;
}
.home-services-section .service-block-one .inner-block .content-box .icon.icon-image img {
width: 100%;
height: auto;
aspect-ratio: 1 / 1;
object-fit: cover;
border-radius: 16px;
}
/* Il tema riserva spazio in alto (padding-top:125px) e sposta il contenuto di 58px
per un'animazione hover che qui non usiamo: lo spazio vuoto va ridotto al minimo
e tutto il testo deve essere leggibile senza hover */
.home-services-section .service-block-one .inner-block {
padding-top: 40px;
}
.home-services-section .service-block-one .inner-block .content-box {
transform: translateY(0);
}
/* Sezione "Certificazioni" (home): come per "Cosa faccio", disattiviamo lo spazio
riservato in alto e l'animazione hover del tema — qui il link "Mostra credenziale"
è l'unica azione della card, quindi deve restare visibile senza bisogno di hover
(su touch il tema lo terrebbe altrimenti nascosto, essendo pensato come CTA
secondaria rispetto a un titolo-link che qui non c'è). */
.home-certifications-section .service-block-one .inner-block {
padding-top: 40px;
}
.home-certifications-section .service-block-one .inner-block .content-box {
transform: translateY(0);
}
.home-certifications-section .service-block-one .inner-block .content-box .icon {
color: var(--theme-color1);
}
.home-certifications-section .service-block-one .inner-block .content-box .arrow-link {
opacity: 1;
visibility: visible;
margin-top: 16px;
}
/* Pagina chi-sono: foto in "Intro" senza la maschera decorativa a blob del
tema (pensata per foto ritratto semplici) — con uno sfondo articolato
(evento/conference) il taglio del mask risultava irregolare sugli
elementi dello sfondo. Rettangolo con angoli arrotondati, coerente con
il comportamento che il tema applica già sotto i 1200px. */
.about-section .about-image-1 {
mask: none;
-webkit-mask: none;
max-width: 100%;
}
/* Pagina contatti: lista info + label form */
.contact-simple-list {
list-style: none;
margin: 30px 0 0;
padding: 0;
}
.contact-simple-list li {
display: flex;
align-items: center;
gap: 16px;
font-size: 17px;
}
.contact-simple-list li:not(:last-child) {
margin-bottom: 20px;
}
.contact-simple-list li i {
color: var(--theme-color1);
font-size: 20px;
width: 24px;
text-align: center;
flex-shrink: 0;
}
.contact-simple-list li a {
color: #fff;
}
.contact-simple-list li a:hover {
color: var(--theme-color1);
}
.form-label {
color: #fff;
font-size: 14px;
margin-bottom: 8px;
display: inline-block;
}
.privacy-note {
font-size: 14px;
opacity: 0.65;
margin-top: 30px;
}
/* Il tema disattiva tutti i sotto i 768px (style.css, pensato per non
forzare interruzioni di riga nei titoli su mobile) — ma nel credit line
del footer il separa contenuto (email da dati legali), non è uno
stile: senza, "On-Page" e "info@optimisad.it" si incollano senza spazio. */
.footer-bottom-wrapper p br {
display: inline;
}
/* Il badge Google Partner (SVG di gstatic.com) non ha width/height nel tag