html {
scroll-behavior: smooth;
}
:root {
--verde: #c7d42d;
--blu: #0b4b5c;
}
p, h1, h2, h3, h4, h5, h6 {
margin: 0;
}
ul {
padding-left: 50px;
}
li {
font-size: 20px;
color: var(--blu);
}
h1, h2 {
line-height: 1em;
white-space: pre-line;
padding: 25px;
text-align: center;
}
h3 {
text-align: center;
}
h4 {
font-weight: 400;
}
#introSito {
position: relative;
height: 100vh;
}
#introSito .hero {
background-image: url('/img/BCG_Hero.jpg');
background-repeat: no-repeat;
background-size: cover;
width: 100%;
height: 100vh;
display: flex;
flex-wrap: wrap;
align-content: center;
margin-top: 50px;
.row {
align-items: center;
}
h1 {
color: white;
text-transform: none;
margin: 0;
}
h2 {
text-transform: none;
text-align: left;
font-size: 2em;
font-weight: 100;
color: white;
line-height: 1.2em;
margin-top: 100px;
}
}
#homeDue {
background-image: url('/img/bg1.jpg');
background-repeat: no-repeat;
background-size: cover;
background-position: bottom;
padding: 100px 0;
h3 {
text-wrap: balance;
}
}
a.cta-std-verde {
display: block;
width: fit-content;
margin: 0 auto;
background: var(--verde);
color: var(--blu);
font-size: 1.3em;
text-transform: uppercase;
padding: 10px 30px;
transition: all .3s cubic-bezier(.215, .61, .355, 1);
&:hover {
background: var(--blu);
color: var(--verde);
text-decoration: none;
}
}
a.cta-std-bianco {
display: block;
width: fit-content;
margin: 0 auto;
background: white;
color: var(--blu);
font-size: 1.3em;
text-transform: uppercase;
padding: 10px 30px;
transition: all .3s cubic-bezier(.215, .61, .355, 1);
&:hover {
background: var(--blu);
color: var(--verde);
text-decoration: none;
}
}
#homeTre {
h2 {
padding: 50px 0;
text-align: left;
text-wrap: balance;
}
h3 {
text-wrap: balance;
padding: 50px 0 0;
}
}
#homeQuattro {
background: var(--blu);
h2 {
text-transform: uppercase;
color: white;
margin-bottom: 50px;
}
p {
color: white;
}
h4 {
color: var(--verde);
}
a.cta-std-verde {
margin: 50px 0 0!important;
&:hover {
background: white;
color: var(--blu);
}
}
}
#homeSei {
.row {
align-items: end;
}
h2 {
font-size: 3.5vw;
text-transform: uppercase;
padding-bottom: 50px;
}
h3 {
text-align: left;
}
p {
padding-right: 50px;
}
a.cta-std-verde {
width: 90%;
margin: 0;
text-align: center;
&:hover {
background: white;
color: var(--blu);
}
}
}
#homeSette {
background-image: url('/img/home4.jpg');
background-repeat: no-repeat;
background-size: cover;
position: relative;
.filtro {
display: block;
width: 100%;
height: 100%;
background: var(--blu);
opacity: .8;
position: absolute;
top: 0;
left: 0;
}
h2 {
color: white;
text-transform: uppercase;
}
h3 {
text-wrap: balance;
white-space: pre-line;
color: white;
padding: 50px 0;
}
h4 {
text-wrap: balance;
white-space: pre-line;
color: white;
text-align: center;
}
.contenuto {
display: flex;
align-items: center;
justify-content: space-between;
padding-bottom: 100px;
.box {
width: 25%;
text-align: center;
h4 {
text-transform: uppercase;
color: var(--verde);
}
p {
color: white;
line-height: 1.2em;
text-wrap: balance;
padding-top: 25px;
}
}
span {
display: block;
width: 10%;
height: 3px;
background: var(--verde);
}
}
}
footer {
h3 {
text-align: left;
}
}
/* ============================================================
PAGINA — PERCHÉ EE50 (perche-ee50.html)
============================================================ */
/* ---- HERO ---- */
#perche-hero {
position: relative;
min-height: 60vh;
background-image: url('/img/Perche_01.jpg');
background-size: cover;
background-position: center;
display: flex;
flex-wrap: wrap;
align-content: center;
.filtro {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: var(--blu);
opacity: .75;
}
.container-fluid {
position: relative;
z-index: 1;
padding-top: 120px;
padding-bottom: 60px;
}
.occhiello {
display: block;
text-align: center;
text-transform: uppercase;
letter-spacing: 3px;
color: var(--verde);
font-weight: 700;
margin-bottom: 15px;
}
h1 {
color: white;
text-transform: none;
text-wrap: balance;
margin: 0;
}
}
/* ---- INTRO ---- */
#perche-intro {
padding: 100px 0;
.row {
align-items: center;
}
p {
text-wrap: pretty;
margin-bottom: 20px;
}
.valore {
border-left: 4px solid var(--verde);
padding: 5px 0 5px 25px;
margin-bottom: 30px;
&:last-child {
margin-bottom: 0;
}
h4 {
text-transform: uppercase;
color: var(--blu);
font-weight: 700;
margin-bottom: 10px;
}
p {
margin: 0;
}
}
}
/* ---- PARTNER / DIFFIDENZA ---- */
#perche-partner {
background: var(--blu);
padding: 100px 0;
h2 {
color: white;
text-transform: uppercase;
text-align: left;
padding: 0;
margin-bottom: 25px;
}
.sottotitolo {
color: white;
text-wrap: pretty;
margin-bottom: 50px;
max-width: 900px;
}
.box {
background: rgba(255, 255, 255, .05);
border-top: 4px solid var(--verde);
padding: 35px;
height: 100%;
.tag {
display: inline-block;
background: var(--verde);
color: var(--blu);
text-transform: uppercase;
font-weight: 700;
font-size: .85em;
padding: 3px 15px;
margin-bottom: 20px;
}
h4 {
color: white;
font-weight: 700;
margin-bottom: 15px;
}
p {
color: white;
margin: 0;
text-wrap: pretty;
}
}
}
/* ---- DA COSTO A INVESTIMENTO ---- */
#perche-investimento {
padding: 100px 0;
.row {
align-items: center;
}
.img-col img {
width: 100%;
height: 100%;
object-fit: cover;
}
.txt-col {
padding-left: 50px;
h2 {
text-align: left;
padding: 0;
text-transform: uppercase;
margin-bottom: 25px;
}
p {
text-wrap: pretty;
margin-bottom: 20px;
}
}
}
/* ---- METODO DGR ---- */
#perche-metodo {
background-image: url('/img/bg1.jpg');
background-size: cover;
background-position: bottom;
padding: 100px 0;
h2 {
text-transform: uppercase;
margin-bottom: 15px;
}
.sottotitolo {
text-align: center;
margin-bottom: 60px;
}
.step {
background: white;
text-align: center;
padding: 40px 30px;
height: 100%;
border-bottom: 4px solid var(--verde);
img {
width: 90px;
margin-bottom: 25px;
}
h4 {
text-transform: uppercase;
color: var(--blu);
font-weight: 700;
margin-bottom: 15px;
}
p {
text-wrap: pretty;
margin: 0;
}
}
}
/* ---- GARANZIA ---- */
#perche-garanzia {
padding: 100px 0;
.row {
align-items: center;
}
.txt-col {
h2 {
text-align: left;
padding: 0;
text-transform: uppercase;
margin-bottom: 25px;
}
p {
text-wrap: pretty;
padding-right: 30px;
}
}
.img-col img {
width: 100%;
height: 100%;
object-fit: cover;
max-height: 380px;
}
.cards {
margin-top: 50px;
.box {
background: #f5f6f0;
border-left: 4px solid var(--verde);
padding: 30px;
height: 100%;
h4 {
text-transform: uppercase;
color: var(--blu);
font-weight: 700;
margin-bottom: 15px;
}
p {
margin: 0;
text-wrap: pretty;
}
}
}
}
/* ---- A CHI È UTILE ---- */
#perche-utile {
background: var(--blu);
padding: 100px 0;
h2 {
color: white;
text-transform: uppercase;
margin-bottom: 60px;
}
.voce {
text-align: center;
padding: 0 20px;
margin-bottom: 30px;
h4 {
color: var(--verde);
text-transform: uppercase;
font-weight: 700;
margin-bottom: 15px;
}
p {
color: white;
text-wrap: pretty;
margin: 0;
}
}
.chiusura {
color: white;
text-align: center;
text-wrap: balance;
font-size: 1.2em;
max-width: 900px;
margin: 40px auto 0;
}
h3 {
color: white;
text-wrap: balance;
padding-top: 50px;
}
}
/* ---- CTA FINALE ---- */
#perche-cta {
position: relative;
background-image: url('/img/home4.jpg');
background-size: cover;
background-position: center;
padding: 120px 0;
.filtro {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: var(--blu);
opacity: .8;
}
.container-fluid {
position: relative;
z-index: 1;
}
h2 {
color: white;
text-transform: uppercase;
text-wrap: balance;
margin-bottom: 40px;
}
}
/* ============================================================
PAGINA — CHI SIAMO (chi-siamo.html)
============================================================ */
/* ---- HERO ---- */
#chi-hero {
position: relative;
min-height: 60vh;
background-image: url('/img/Chi_Siamo_Hero.jpg');
background-size: cover;
background-position: center;
display: flex;
flex-wrap: wrap;
align-content: center;
.filtro {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: var(--blu);
opacity: .75;
}
.container-fluid {
position: relative;
z-index: 1;
padding-top: 120px;
padding-bottom: 60px;
}
.occhiello {
display: block;
text-align: center;
text-transform: uppercase;
letter-spacing: 3px;
color: var(--verde);
font-weight: 700;
margin-bottom: 15px;
}
h1 {
color: white;
text-transform: none;
text-wrap: balance;
margin: 0;
}
}
/* ---- INTRO ---- */
#chi-intro {
padding: 0 0 100px;
.lead {
font-size: 1.4em;
line-height: 1.4em;
color: var(--blu);
text-wrap: balance;
margin-bottom: 40px;
}
h3 {
color: white;
text-wrap: balance;
background: var(--blu);
padding: 100px 0;
margin: 2em 0;
}
p {
text-wrap: pretty;
}
}
/* ---- GUIDA VISIBILE ---- */
#chi-guida {
padding: 0 0 100px;
h2 {
text-transform: uppercase;
margin-bottom: 15px;
text-wrap: balance;
}
.sottotitolo {
text-align: center;
text-wrap: pretty;
max-width: 950px;
margin: 0 auto 50px;
}
.box {
background: #f5f6f0;
border-top: 4px solid var(--verde);
padding: 35px;
height: 100%;
.tag {
display: inline-block;
background: var(--verde);
color: var(--blu);
text-transform: uppercase;
font-weight: 700;
font-size: .85em;
padding: 3px 15px;
margin-bottom: 20px;
}
p {
margin: 0;
text-wrap: pretty;
}
}
}
/* ---- LE PERSONE / TEAM ---- */
#chi-team {
background: var(--blu);
padding: 100px 0;
h2 {
color: white;
text-transform: uppercase;
margin-bottom: 60px;
}
.membro {
display: flex;
align-items: flex-start;
background: rgba(255, 255, 255, .05);
border-left: 4px solid var(--verde);
padding: 30px;
height: 100%;
margin-bottom: 30px;
.foto {
flex: 0 0 auto;
width: 110px;
height: 110px;
border-radius: 100%;
overflow: hidden;
margin-right: 25px;
img {
width: 100%;
height: 100%;
object-fit: cover;
}
}
.bio {
h4 {
color: white;
font-weight: 700;
margin-bottom: 4px;
}
.ruolo {
display: block;
color: var(--verde);
text-transform: uppercase;
font-size: .85em;
font-weight: 700;
letter-spacing: 1px;
margin-bottom: 15px;
}
p {
color: white;
text-wrap: pretty;
margin: 0;
}
}
&.featured {
border-left: none;
border-top: 4px solid var(--verde);
background: rgba(199, 212, 45, .08);
padding: 40px;
.foto {
width: 170px;
height: 170px;
margin-right: 40px;
}
.bio h4 {
font-size: 1.6em;
}
}
}
.row .membro {
margin-bottom: 0;
}
}
/* ---- RADICI E VISIONE ---- */
#chi-radici {
padding: 100px 0;
.row {
align-items: center;
}
.txt-col {
padding-right: 50px;
h2 {
text-align: left;
padding: 0;
text-transform: uppercase;
margin-bottom: 25px;
}
p {
text-wrap: pretty;
margin-bottom: 20px;
}
}
.img-col img {
width: 100%;
height: 100%;
object-fit: cover;
}
}
/* ---- IL NOSTRO MODO DI LAVORARE ---- */
#chi-metodo {
background-image: url('/img/bg1.jpg');
background-size: cover;
background-position: bottom;
padding: 100px 0;
h2 {
text-transform: uppercase;
margin-bottom: 60px;
}
.valore {
background: white;
text-align: center;
padding: 40px 25px;
height: 100%;
border-bottom: 4px solid var(--verde);
margin-bottom: 30px;
img {
width: 80px;
margin-bottom: 25px;
}
h4 {
text-transform: uppercase;
color: var(--blu);
font-weight: 700;
margin-bottom: 15px;
}
p {
text-wrap: pretty;
margin: 0;
}
}
}
/* ---- CTA FINALE ---- */
#chi-cta {
position: relative;
background-image: url('/img/home4.jpg');
background-size: cover;
background-position: center;
padding: 120px 0;
.filtro {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: var(--blu);
opacity: .8;
}
.container-fluid {
position: relative;
z-index: 1;
}
h2 {
color: white;
text-transform: uppercase;
text-wrap: balance;
margin-bottom: 40px;
}
}
/* ============================================================
PAGINA — CONDOMINI (condomini.html)
============================================================ */
#introSito.condomini {
h1 {
text-transform: uppercase;
}
}
/* ---- INTRO ---- */
#cond-intro {
padding: 100px 0;
p {
text-wrap: pretty;
}
}
/* ---- IL PROBLEMA ---- */
#cond-problema {
background: var(--blu);
padding: 100px 0;
h2 {
color: white;
text-transform: uppercase;
text-align: left;
padding: 0;
margin-bottom: 40px;
}
p {
color: white;
text-wrap: pretty;
}
.obiezioni {
margin-top: 25px;
span {
display: block;
border-left: 4px solid var(--verde);
color: var(--verde);
font-size: 1.2em;
font-style: italic;
padding: 5px 0 5px 20px;
margin-bottom: 15px;
}
}
.chiusura {
border-top: 1px solid rgba(255, 255, 255, .2);
margin-top: 50px;
padding-top: 40px;
max-width: 1000px;
}
}
/* ---- IL RISPARMIO SUPPORTATO DAI DATI ---- */
#cond-dati {
padding: 100px 0;
.row {
align-items: center;
}
.txt-col {
padding-right: 50px;
h2 {
text-align: left;
padding: 0;
text-transform: uppercase;
margin-bottom: 25px;
}
p {
text-wrap: pretty;
margin-bottom: 20px;
}
}
.img-col img {
width: 100%;
height: 100%;
object-fit: cover;
}
}
/* ---- LE SOLUZIONI (ACCORDION) ---- */
#cond-soluzioni {
background-image: url('/img/bg1.jpg');
background-size: cover;
background-position: bottom;
padding: 100px 0;
h2 {
text-transform: uppercase;
margin-bottom: 15px;
}
.sottotitolo {
text-align: center;
margin-bottom: 50px;
}
}
/* ---- ACCORDION SOLUZIONI (condiviso hub condomini / aziende) ---- */
#cond-soluzioni .cont,
#az-soluzioni .cont {
margin-bottom: 15px;
.cont-titolo {
display: flex;
align-items: center;
justify-content: space-between;
padding: 20px 30px;
cursor: pointer;
transition: all .3s cubic-bezier(.215, .61, .355, 1);
h2 {
text-align: left;
font-size: 1.5em;
line-height: 1.2em;
text-transform: uppercase;
white-space: normal;
padding: 0;
margin: 0;
}
span {
font-size: 2em;
line-height: 1em;
margin-left: 25px;
transition: transform .3s cubic-bezier(.215, .61, .355, 1);
}
&[aria-expanded="true"] span {
transform: rotate(45deg);
}
/* palette ciclica */
&.uno {
background: var(--blu);
h2, span {
color: white;
}
&:hover {
background: var(--verde);
h2, span {
color: var(--blu);
}
}
}
&.due {
background: var(--verde);
h2, span {
color: var(--blu);
}
&:hover {
background: var(--blu);
h2, span {
color: white;
}
}
}
&.tre {
background: white;
border: 2px solid var(--blu);
h2, span {
color: var(--blu);
}
&:hover {
background: var(--verde);
border: 2px solid var(--blu);
h2, span {
color: var(--blu);
}
}
}
}
.cont-testo {
background: white;
p {
text-wrap: pretty;
padding: 0 30px;
margin-bottom: 20px;
&:first-child {
padding-top: 30px;
}
}
.cont-img img {
width: 100%;
max-height: 320px;
object-fit: cover;
}
}
}
/* ---- UN METODO GARANTITO ---- */
#cond-metodo {
background: var(--blu);
padding: 100px 0;
h2 {
color: white;
text-transform: uppercase;
margin-bottom: 20px;
}
.sottotitolo {
color: white;
text-align: center;
text-wrap: pretty;
max-width: 1000px;
margin: 0 auto 60px;
}
.step {
border-top: 4px solid var(--verde);
padding: 25px 0 0;
height: 100%;
margin-bottom: 30px;
.numero {
display: block;
color: var(--verde);
font-size: 2.5em;
font-weight: 700;
line-height: 1em;
margin-bottom: 10px;
}
h4 {
color: white;
text-transform: uppercase;
font-weight: 700;
small {
display: block;
text-transform: none;
font-size: .6em;
color: rgba(255, 255, 255, .6);
}
}
}
.chiusura {
color: white;
text-align: center;
text-wrap: balance;
max-width: 900px;
margin: 30px auto 0;
}
}
/* ---- CTA FINALE ---- */
#cond-cta {
position: relative;
background-image: url('/img/home4.jpg');
background-size: cover;
background-position: center;
padding: 120px 0;
.filtro {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: var(--blu);
opacity: .8;
}
.container-fluid {
position: relative;
z-index: 1;
}
h2 {
color: white;
text-transform: uppercase;
text-wrap: balance;
margin-bottom: 40px;
}
}
/* ============================================================
PAGINA — METODO EE50 CONDOMINI (metodo-ee50-condomini.html)
============================================================ */
/* ---- HERO ---- */
#metodo-hero {
position: relative;
min-height: 60vh;
background-image: url('/img/Hero_Condomini_2.jpg');
background-size: cover;
background-position: center;
display: flex;
flex-wrap: wrap;
align-content: center;
.filtro {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: var(--blu);
opacity: .75;
}
.container-fluid {
position: relative;
z-index: 1;
padding-top: 120px;
padding-bottom: 60px;
}
.occhiello {
display: block;
text-align: center;
text-transform: uppercase;
letter-spacing: 3px;
color: var(--verde);
font-weight: 700;
margin-bottom: 15px;
}
h1 {
color: white;
text-transform: uppercase;
text-wrap: balance;
margin: 0;
}
}
/* ---- INTRO ---- */
#metodo-intro {
padding: 100px 0;
.lead {
font-size: 1.4em;
line-height: 1.4em;
color: var(--blu);
text-wrap: balance;
margin-bottom: 40px;
}
p {
text-wrap: pretty;
}
h3 {
text-wrap: balance;
padding-bottom: 50px;
}
.callout {
background: #f5f6f0;
border-left: 4px solid var(--verde);
padding: 35px;
margin-top: 50px;
.tag {
display: inline-block;
background: var(--verde);
color: var(--blu);
text-transform: uppercase;
font-weight: 700;
font-size: .85em;
letter-spacing: 1px;
padding: 3px 15px;
margin-bottom: 20px;
}
p {
margin: 0;
}
}
}
/* ---- IL METODO DGR ---- */
#metodo-dgr {
background: var(--blu);
padding: 100px 0;
h2 {
color: white;
text-transform: uppercase;
margin-bottom: 20px;
}
.sottotitolo {
color: white;
text-align: center;
text-wrap: pretty;
max-width: 1000px;
margin: 0 auto 60px;
}
.chiusura {
color: white;
text-align: center;
text-wrap: pretty;
max-width: 1000px;
margin: 60px auto 0;
padding-top: 40px;
border-top: 1px solid rgba(255, 255, 255, .2);
}
}
/* ---- PERCORSO D/G/R (condiviso metodo condomini / aziende) ---- */
#metodo-dgr .percorso,
#metodo-az-dgr .percorso {
display: flex;
align-items: flex-start;
justify-content: space-between;
.tappa {
width: 28%;
text-align: center;
.lettera {
display: flex;
align-items: center;
justify-content: center;
width: 90px;
height: 90px;
margin: 0 auto 25px;
border-radius: 100%;
background: var(--verde);
color: var(--blu);
font-size: 2.5em;
font-weight: 700;
line-height: 1em;
}
h4 {
color: var(--verde);
text-transform: uppercase;
font-weight: 700;
margin-bottom: 15px;
}
p {
color: white;
text-wrap: pretty;
margin: 0;
}
}
.linea {
flex: 1;
height: 3px;
background: var(--verde);
margin-top: 45px;
}
}
/* ---- FASI (DIAGNOSI / GARANZIA / RENDICONTO) ---- */
.fase {
padding: 100px 0;
.row {
align-items: center;
}
.txt-col {
padding-right: 50px;
.numero {
display: block;
color: var(--verde);
font-size: 3em;
font-weight: 700;
line-height: 1em;
margin-bottom: 10px;
}
h2 {
text-align: left;
padding: 0;
text-transform: uppercase;
margin-bottom: 25px;
}
p {
text-wrap: pretty;
margin-bottom: 20px;
}
}
.img-col {
position: relative;
height: 60vh;
img {
width: 100%;
height: 100%;
object-fit: cover;
}
img.icona {
position: absolute;
z-index: 1;
top: -30px;
left: 0;
width: 90px;
height: auto;
background: white;
padding: 15px;
border-radius: 100%;
}
}
&.invertita .txt-col {
padding-right: 15px;
padding-left: 50px;
}
}
#metodo-garanzia,
#metodo-az-garanzia {
background: #f5f6f0;
}
/* ---- IL CONTRATTO EPC ---- */
#metodo-epc {
padding: 100px 0;
background: #f5f6f0;
h2 {
text-transform: uppercase;
margin-bottom: 40px;
}
p {
text-wrap: pretty;
}
}
/* ---- CATENA DI PASSAGGI (condiviso metodo condomini / EMS aziendale / finanza / case study) ---- */
#metodo-epc .catena,
#emsaz-gestione .catena,
#fin-strumenti .catena,
#cs-intro .catena {
display: flex;
align-items: center;
justify-content: center;
flex-wrap: wrap;
margin-top: 60px;
span {
position: relative;
background: var(--blu);
color: white;
text-transform: uppercase;
font-weight: 700;
font-size: .95em;
letter-spacing: 1px;
padding: 12px 28px;
margin: 8px 22px 8px 0;
&::after {
content: "";
position: absolute;
top: 50%;
right: -18px;
width: 14px;
height: 3px;
background: var(--verde);
transform: translateY(-50%);
}
&:last-child {
background: var(--verde);
color: var(--blu);
margin-right: 0;
&::after {
display: none;
}
}
}
}
/* ---- CTA FINALE ---- */
#metodo-cta {
position: relative;
background-image: url('/img/home4.jpg');
background-size: cover;
background-position: center;
padding: 120px 0;
.filtro {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: var(--blu);
opacity: .8;
}
.container-fluid {
position: relative;
z-index: 1;
}
h2 {
color: white;
text-transform: uppercase;
text-wrap: balance;
margin-bottom: 40px;
}
}
/* ============================================================
PAGINA — ENERGY MANAGEMENT CONDOMINIALE
(energy-management-condominiale.html)
============================================================ */
/* ---- HERO ---- */
#ems-hero {
position: relative;
min-height: 60vh;
background-image: url('/img/Privati.jpg');
background-size: cover;
background-position: center;
display: flex;
flex-wrap: wrap;
align-content: center;
.filtro {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: var(--blu);
opacity: .75;
}
.container-fluid {
position: relative;
z-index: 1;
padding-top: 120px;
padding-bottom: 60px;
}
.occhiello {
display: block;
text-align: center;
text-transform: uppercase;
letter-spacing: 3px;
color: var(--verde);
font-weight: 700;
margin-bottom: 15px;
}
h1 {
color: white;
text-transform: uppercase;
text-wrap: balance;
margin: 0;
}
}
/* ---- INTRO ---- */
#ems-intro {
padding: 100px 0;
.row {
align-items: center;
}
.lead {
font-size: 1.4em;
line-height: 1.4em;
color: var(--blu);
text-wrap: balance;
margin-bottom: 25px;
}
p {
text-wrap: pretty;
}
.callout {
background: var(--blu);
border-left: 4px solid var(--verde);
padding: 35px;
.tag {
display: inline-block;
background: var(--verde);
color: var(--blu);
text-transform: uppercase;
font-weight: 700;
font-size: .85em;
letter-spacing: 1px;
padding: 3px 15px;
margin-bottom: 20px;
}
p {
color: white;
margin: 0;
}
}
}
/* ---- LA SOLUZIONE: EMS ---- */
#ems-piattaforma {
background-image: url('/img/bg1.jpg');
background-size: cover;
background-position: bottom;
padding: 100px 0;
h2 {
text-transform: uppercase;
margin-bottom: 15px;
}
.sottotitolo {
text-align: center;
text-wrap: pretty;
max-width: 1000px;
margin: 0 auto 60px;
}
.chiusura {
text-wrap: pretty;
text-align: center;
max-width: 1000px;
margin: 50px auto 0;
}
}
/* ---- GRUPPO + CHIPS (condiviso EMS condominiale / aziendale, hub aziende) ---- */
#ems-piattaforma .gruppo,
#emsaz-piattaforma .gruppo {
background: white;
border-top: 4px solid var(--verde);
padding: 35px;
height: 100%;
h4 {
text-transform: uppercase;
color: var(--blu);
font-weight: 700;
margin-bottom: 25px;
}
}
#ems-piattaforma .chips,
#emsaz-piattaforma .chips,
#az-intro .chips,
#fin-strumenti .chips {
display: flex;
flex-wrap: wrap;
span {
background: #f5f6f0;
border: 1px solid var(--blu);
color: var(--blu);
font-size: .95em;
padding: 6px 18px;
margin: 0 10px 10px 0;
}
}
/* ---- CONTABILIZZAZIONE CALORE ---- */
#ems-contabilizzazione {
padding: 100px 0;
.row {
align-items: center;
}
.txt-col {
padding-right: 50px;
h2 {
text-align: left;
padding: 0;
text-transform: uppercase;
margin-bottom: 25px;
}
p {
text-wrap: pretty;
margin-bottom: 20px;
}
}
.img-col img {
width: 100%;
height: 100%;
object-fit: cover;
max-height: 500px;
}
}
/* ---- TELECONTROLLO IMPIANTI ---- */
#ems-telecontrollo {
background: var(--blu);
padding: 100px 0;
h2 {
color: white;
text-transform: uppercase;
margin-bottom: 15px;
}
.sottotitolo {
color: white;
text-align: center;
text-wrap: pretty;
max-width: 1000px;
margin: 0 auto 50px;
}
.etichetta-segnali {
color: var(--verde);
text-transform: uppercase;
font-weight: 700;
letter-spacing: 2px;
font-size: .9em;
text-align: center;
margin-bottom: 25px;
}
.chiusura {
color: white;
text-align: center;
text-wrap: pretty;
max-width: 1000px;
margin: 40px auto 0;
padding-top: 40px;
border-top: 1px solid rgba(255, 255, 255, .2);
}
}
/* ---- CARD SEGNALI (condiviso EMS condominiale / aziendale) ---- */
#ems-telecontrollo .segnali,
#emsaz-sprechi .segnali {
justify-content: center;
}
#ems-telecontrollo .segnale,
#emsaz-sprechi .segnale {
display: flex;
align-items: center;
background: rgba(255, 255, 255, .05);
border-left: 3px solid var(--verde);
color: white;
line-height: 1.4em;
padding: 18px 25px;
margin-bottom: 25px;
height: calc(100% - 25px);
span {
flex: 0 0 auto;
width: 10px;
height: 10px;
background: var(--verde);
border-radius: 100%;
margin-right: 15px;
}
}
/* ---- RENDICONTO ANNUALE ---- */
#ems-rendiconto {
padding: 100px 0;
.row {
align-items: center;
}
.txt-col {
padding-left: 50px;
h2 {
text-align: left;
padding: 0;
text-transform: uppercase;
margin-bottom: 25px;
}
p {
text-wrap: pretty;
margin-bottom: 20px;
}
blockquote {
border-left: 4px solid var(--verde);
color: var(--blu);
font-size: 1.25em;
line-height: 1.4em;
font-style: italic;
text-wrap: balance;
padding: 5px 0 5px 25px;
margin: 30px 0;
}
}
.img-col img {
width: 100%;
height: 100%;
object-fit: cover;
max-height: 500px;
}
}
/* ---- CTA FINALE ---- */
#ems-cta {
position: relative;
background-image: url('/img/home4.jpg');
background-size: cover;
background-position: center;
padding: 120px 0;
.filtro {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: var(--blu);
opacity: .8;
}
.container-fluid {
position: relative;
z-index: 1;
}
h2 {
color: white;
text-transform: uppercase;
text-wrap: balance;
margin-bottom: 40px;
}
}
/* ============================================================
PAGINA — AZIENDE (aziende.html)
============================================================ */
/* ---- INTRO ---- */
#az-intro {
padding: 100px 0;
p {
text-wrap: pretty;
margin-bottom: 20px;
}
.etichetta {
color: var(--blu);
text-transform: uppercase;
font-weight: 700;
letter-spacing: 2px;
font-size: .9em;
margin: 30px 0 20px;
}
.chips {
display: flex;
flex-wrap: wrap;
span {
background: #f5f6f0;
border: 1px solid var(--blu);
color: var(--blu);
font-size: .95em;
padding: 6px 18px;
margin: 0 10px 10px 0;
}
}
}
/* ---- LA BOLLETTA ---- */
#az-bolletta {
background: var(--blu);
padding: 100px 0;
h2 {
color: white;
text-transform: uppercase;
text-align: left;
padding: 0;
margin-bottom: 40px;
}
p {
color: white;
text-wrap: pretty;
}
.chiusura {
border-top: 1px solid rgba(255, 255, 255, .2);
margin-top: 50px;
padding-top: 40px;
max-width: 1000px;
}
}
/* ---- LA SOLUZIONE: BUSINESS CASE ---- */
#az-businesscase {
padding: 100px 0;
h2 {
text-transform: uppercase;
margin-bottom: 15px;
}
.sottotitolo {
text-align: center;
text-wrap: pretty;
max-width: 1000px;
margin: 0 auto 60px;
}
.etichetta-domande {
color: var(--blu);
text-transform: uppercase;
font-weight: 700;
letter-spacing: 2px;
font-size: .9em;
text-align: center;
margin-bottom: 30px;
}
.chiusura {
text-align: center;
text-wrap: pretty;
max-width: 1000px;
margin: 25px auto 0;
}
}
/* ---- CARD DOMANDE (condiviso hub aziende / EMS aziendale) ---- */
#az-businesscase .domanda,
#emsaz-monitoraggio .domanda {
display: flex;
align-items: flex-start;
background: #f5f6f0;
border-left: 3px solid var(--verde);
color: var(--blu);
line-height: 1.4em;
padding: 18px 25px;
margin-bottom: 25px;
height: calc(100% - 25px);
span {
flex: 0 0 auto;
color: var(--verde);
font-weight: 700;
margin-right: 15px;
}
}
/* ---- LE SOLUZIONI (ACCORDION) ---- */
#az-soluzioni {
background-image: url('/img/bg1.jpg');
background-size: cover;
background-position: bottom;
padding: 100px 0;
h2 {
text-transform: uppercase;
margin-bottom: 15px;
}
.sottotitolo {
text-align: center;
margin-bottom: 50px;
}
}
/* ---- GARANZIE E PROVA ECONOMICA ---- */
#az-garanzie {
background: var(--blu);
padding: 100px 0;
h2 {
color: white;
text-transform: uppercase;
margin-bottom: 20px;
}
.sottotitolo {
color: white;
text-align: center;
text-wrap: pretty;
max-width: 1000px;
margin: 0 auto 50px;
}
.voci {
justify-content: center;
}
.voce {
background: rgba(255, 255, 255, .05);
border-top: 3px solid var(--verde);
color: white;
text-transform: uppercase;
font-weight: 700;
font-size: .9em;
line-height: 1.3em;
text-align: center;
padding: 20px 10px;
margin-bottom: 25px;
height: calc(100% - 25px);
display: flex;
align-items: center;
justify-content: center;
}
.chiusura {
color: white;
text-align: center;
text-wrap: pretty;
max-width: 1000px;
margin: 25px auto 0;
padding-top: 40px;
border-top: 1px solid rgba(255, 255, 255, .2);
}
}
/* ---- CTA FINALE ---- */
#az-cta {
position: relative;
background-image: url('/img/home4.jpg');
background-size: cover;
background-position: center;
padding: 120px 0;
.filtro {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: var(--blu);
opacity: .8;
}
.container-fluid {
position: relative;
z-index: 1;
}
h2 {
color: white;
text-transform: uppercase;
text-wrap: balance;
margin-bottom: 40px;
}
}
/* ============================================================
PAGINA — METODO EE50 AZIENDALE (metodo-ee50-aziendale.html)
============================================================ */
/* ---- HERO ---- */
#metodo-az-hero {
position: relative;
min-height: 60vh;
background-image: url('/img/Hero_Aziende.jpg');
background-size: cover;
background-position: center;
display: flex;
flex-wrap: wrap;
align-content: center;
.filtro {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: var(--blu);
opacity: .75;
}
.container-fluid {
position: relative;
z-index: 1;
padding-top: 120px;
padding-bottom: 60px;
}
.occhiello {
display: block;
text-align: center;
text-transform: uppercase;
letter-spacing: 3px;
color: var(--verde);
font-weight: 700;
margin-bottom: 15px;
}
h1 {
color: white;
text-transform: uppercase;
text-wrap: balance;
margin: 0;
}
}
/* ---- INTRO ---- */
#metodo-az-intro {
padding: 100px 0;
.lead {
font-size: 1.4em;
line-height: 1.4em;
color: var(--blu);
text-wrap: balance;
margin-bottom: 40px;
}
p {
text-wrap: pretty;
}
h3 {
text-wrap: balance;
padding-bottom: 100px;
}
}
/* ---- IL METODO DGR ---- */
#metodo-az-dgr {
background: var(--blu);
padding: 100px 0;
.sottotitolo {
color: white;
text-align: center;
text-wrap: pretty;
font-size: 1.2em;
max-width: 1000px;
margin: 0 auto 60px;
}
}
/* ---- ANALISI PER RESPONSABILI E TITOLARI ---- */
#metodo-az-analisi {
padding: 100px 0;
h2 {
text-transform: uppercase;
margin-bottom: 15px;
}
.sottotitolo {
text-align: center;
margin-bottom: 50px;
}
.output {
background: #f5f6f0;
border-top: 4px solid var(--verde);
padding: 35px;
height: 100%;
.numero {
display: block;
color: var(--verde);
font-size: 2.2em;
font-weight: 700;
line-height: 1em;
margin-bottom: 15px;
}
h4 {
text-transform: uppercase;
color: var(--blu);
font-weight: 700;
margin-bottom: 15px;
}
p {
text-wrap: balance;
margin: 0;
}
}
.prospettive {
margin-top: 50px;
p {
text-align: center;
text-wrap: balance;
margin-bottom: 20px;
}
.finale {
border-top: 1px solid #dedede;
padding-top: 30px;
margin-bottom: 0;
}
}
}
/* ---- SCENARI ---- */
#metodo-az-scenari {
background: var(--blu);
padding: 100px 0;
h2 {
color: white;
text-transform: uppercase;
margin-bottom: 15px;
text-wrap: balance;
}
.sottotitolo {
color: white;
text-align: center;
margin-bottom: 50px;
}
.scenario {
border-left: 4px solid var(--verde);
background: rgba(255, 255, 255, .05);
padding: 30px;
height: 100%;
.etichetta {
display: inline-block;
text-transform: uppercase;
font-weight: 700;
letter-spacing: 1px;
font-size: .85em;
padding: 3px 15px;
margin-bottom: 20px;
background: var(--verde);
color: var(--blu);
}
p {
color: white;
text-wrap: pretty;
margin: 0;
}
/* gradazione: dal prudente all'ottimistico */
&.conservativo .etichetta {
background: white;
}
&.base .etichetta {
background: var(--verde);
}
&.ottimistico {
background: rgba(199, 212, 45, .12);
}
}
.chiusura {
color: white;
text-align: center;
text-wrap: pretty;
max-width: 1000px;
margin: 50px auto 0;
padding-top: 40px;
border-top: 1px solid rgba(255, 255, 255, .2);
}
}
/* ---- CTA FINALE ---- */
#metodo-az-cta {
position: relative;
background-image: url('/img/home4.jpg');
background-size: cover;
background-position: center;
padding: 120px 0;
.filtro {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: var(--blu);
opacity: .8;
}
.container-fluid {
position: relative;
z-index: 1;
}
h2 {
color: white;
text-transform: uppercase;
text-wrap: balance;
margin-bottom: 40px;
}
}
/* ============================================================
PAGINA — ENERGY MANAGEMENT AZIENDALE
(energy-management-aziendale.html)
============================================================ */
/* ---- HERO ---- */
#emsaz-hero {
position: relative;
min-height: 60vh;
background-image: url('/img/tecnico.jpg');
background-size: cover;
background-position: center;
display: flex;
flex-wrap: wrap;
align-content: center;
.filtro {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: var(--blu);
opacity: .75;
}
.container-fluid {
position: relative;
z-index: 1;
padding-top: 120px;
padding-bottom: 60px;
}
.occhiello {
display: block;
text-align: center;
text-transform: uppercase;
letter-spacing: 3px;
color: var(--verde);
font-weight: 700;
margin-bottom: 15px;
}
h1 {
color: white;
text-transform: uppercase;
text-wrap: balance;
margin: 0;
}
}
/* ---- INTRO ---- */
#emsaz-intro {
padding: 100px 0;
.row {
align-items: center;
}
.lead {
font-size: 1.4em;
line-height: 1.4em;
color: var(--blu);
text-wrap: balance;
margin-bottom: 25px;
}
p {
text-wrap: pretty;
}
.callout {
background: var(--blu);
border-left: 4px solid var(--verde);
padding: 35px;
.tag {
display: inline-block;
background: var(--verde);
color: var(--blu);
text-transform: uppercase;
font-weight: 700;
font-size: .85em;
letter-spacing: 1px;
padding: 3px 15px;
margin-bottom: 20px;
}
p {
color: white;
margin: 0;
}
}
}
/* ---- SCOPRIRE GLI SPRECHI ---- */
#emsaz-sprechi {
background: var(--blu);
padding: 100px 0;
h2 {
color: white;
text-transform: uppercase;
margin-bottom: 15px;
}
.sottotitolo {
color: white;
text-align: center;
margin-bottom: 50px;
}
.etichetta-sprechi {
color: var(--verde);
text-transform: uppercase;
font-weight: 700;
letter-spacing: 2px;
font-size: .9em;
text-align: center;
margin-bottom: 25px;
}
p {
color: white;
text-wrap: pretty;
}
.row:last-child {
margin-top: 25px;
}
}
/* ---- LA SOLUZIONE: PIATTAFORMA IOT E AI ---- */
#emsaz-piattaforma {
background-image: url('/img/bg1.jpg');
background-size: cover;
background-position: bottom;
padding: 100px 0;
h2 {
text-transform: uppercase;
margin-bottom: 15px;
}
.sottotitolo {
text-align: center;
text-wrap: pretty;
max-width: 1000px;
margin: 0 auto 60px;
}
.chiusura {
text-wrap: pretty;
text-align: center;
max-width: 1000px;
margin: 50px auto 0;
}
}
/* ---- SISTEMI DI MONITORAGGIO ---- */
#emsaz-monitoraggio {
padding: 100px 0;
h2 {
text-transform: uppercase;
margin-bottom: 40px;
}
p {
text-wrap: pretty;
}
.domande {
margin-top: 40px;
}
.chiusura {
text-align: center;
text-wrap: pretty;
max-width: 1000px;
margin: 25px auto 0;
}
}
/* ---- ENERGY MANAGEMENT PER AZIENDE ---- */
#emsaz-gestione {
background: #f5f6f0;
padding: 100px 0;
h2 {
text-transform: uppercase;
margin-bottom: 15px;
}
.sottotitolo {
text-align: center;
text-wrap: pretty;
max-width: 1000px;
margin: 0 auto;
}
.etichetta-priorita {
color: var(--blu);
text-transform: uppercase;
font-weight: 700;
letter-spacing: 2px;
font-size: .9em;
text-align: center;
margin: 60px 0 25px;
}
.regole {
max-width: 1100px;
margin: 0 auto;
.regola {
display: flex;
align-items: stretch;
flex-wrap: wrap;
background: white;
border-left: 3px solid var(--verde);
margin-bottom: 15px;
.se {
flex: 1 1 55%;
color: var(--blu);
line-height: 1.4em;
padding: 18px 25px;
}
.allora {
flex: 1 1 40%;
display: flex;
align-items: center;
background: var(--blu);
color: var(--verde);
text-transform: uppercase;
font-weight: 700;
font-size: .9em;
line-height: 1.3em;
padding: 18px 25px;
}
}
}
.chiusura {
text-align: center;
text-wrap: pretty;
max-width: 1000px;
margin: 50px auto 0;
}
}
/* ---- MULTISITO ---- */
#emsaz-multisito {
padding: 100px 0;
.row {
align-items: center;
}
.txt-col {
padding-left: 50px;
h2 {
text-align: left;
padding: 0;
text-transform: uppercase;
margin-bottom: 25px;
}
p {
text-wrap: pretty;
margin-bottom: 20px;
}
}
.img-col img {
width: 100%;
height: 100%;
object-fit: cover;
max-height: 480px;
}
}
/* ---- CHIUSURA ---- */
#emsaz-chiusura {
background: var(--blu);
padding: 100px 0;
h2 {
color: white;
text-transform: uppercase;
margin-bottom: 40px;
}
p {
color: white;
text-align: center;
text-wrap: pretty;
margin-bottom: 20px;
}
.finale {
border-top: 1px solid rgba(255, 255, 255, .2);
padding-top: 30px;
margin-bottom: 0;
}
}
/* ---- CTA FINALE ---- */
#emsaz-cta {
position: relative;
background-image: url('/img/home4.jpg');
background-size: cover;
background-position: center;
padding: 120px 0;
.filtro {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: var(--blu);
opacity: .8;
}
.container-fluid {
position: relative;
z-index: 1;
}
h2 {
color: white;
text-transform: uppercase;
text-wrap: balance;
margin-bottom: 40px;
}
}
/* ============================================================
PAGINA — FINANZA AGEVOLATA AZIENDE
(finanza-agevolata-aziende.html)
============================================================ */
/* ---- HERO ---- */
#fin-hero {
position: relative;
min-height: 60vh;
background-image: url('/img/home4.jpg');
background-size: cover;
background-position: center;
display: flex;
flex-wrap: wrap;
align-content: center;
.filtro {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: var(--blu);
opacity: .75;
}
.container-fluid {
position: relative;
z-index: 1;
padding-top: 120px;
padding-bottom: 60px;
}
.occhiello {
display: block;
text-align: center;
text-transform: uppercase;
letter-spacing: 3px;
color: var(--verde);
font-weight: 700;
margin-bottom: 15px;
}
h1 {
color: white;
text-transform: uppercase;
text-wrap: balance;
margin: 0;
}
}
/* ---- INTRO ---- */
#fin-intro {
padding: 100px 0;
.lead {
font-size: 1.4em;
line-height: 1.4em;
color: var(--blu);
text-wrap: balance;
margin-bottom: 40px;
}
h3 {
padding-bottom: 50px;
text-wrap: balance;
}
p {
text-wrap: pretty;
}
}
/* ---- PRIMA IL PROGETTO, POI LO STRUMENTO ---- */
#fin-strumenti {
background: #f5f6f0;
padding: 100px 0;
h2 {
text-transform: uppercase;
margin-bottom: 15px;
}
.sottotitolo {
text-align: center;
text-wrap: pretty;
max-width: 1000px;
margin: 0 auto;
}
.etichetta-strumenti {
color: var(--blu);
text-transform: uppercase;
font-weight: 700;
letter-spacing: 2px;
font-size: .9em;
text-align: center;
margin: 60px 0 25px;
}
.chips {
justify-content: center;
max-width: 1000px;
margin: 0 auto;
span {
background: white;
}
}
.nota {
display: flex;
align-items: flex-start;
flex-wrap: wrap;
background: white;
border-left: 4px solid var(--blu);
max-width: 1000px;
padding: 25px 30px;
margin: 50px auto 0;
.tag {
flex: 0 0 auto;
background: var(--blu);
color: var(--verde);
text-transform: uppercase;
font-weight: 700;
font-size: .8em;
letter-spacing: 1px;
padding: 4px 15px;
margin-right: 25px;
}
p {
flex: 1;
text-wrap: pretty;
margin: 0;
}
}
}
/* ---- L'INCENTIVO È UN ACCELERATORE ---- */
#fin-acceleratore {
padding: 100px 0;
.row {
align-items: center;
}
.txt-col {
padding-right: 50px;
h2 {
text-align: left;
padding: 0;
text-transform: uppercase;
margin-bottom: 25px;
}
p {
text-wrap: pretty;
margin-bottom: 20px;
}
blockquote {
border-left: 4px solid var(--verde);
color: var(--blu);
font-size: 1.15em;
line-height: 1.5em;
font-style: italic;
text-wrap: pretty;
padding: 5px 0 5px 25px;
margin: 30px 0 0;
}
}
.img-col img {
width: 100%;
height: 100%;
object-fit: cover;
max-height: 520px;
}
}
/* ---- MISURE (TRANSIZIONE 5.0 / CONTO TERMICO / TEE) ---- */
.misura {
padding: 100px 0;
&.alt {
background: var(--blu);
.tag {
background: var(--verde);
color: var(--blu);
}
h2,
p {
color: white;
}
.evidenza {
border-left-color: var(--verde);
color: white;
}
}
.tag {
display: inline-block;
background: var(--blu);
color: var(--verde);
text-transform: uppercase;
font-weight: 700;
font-size: .8em;
letter-spacing: 2px;
padding: 4px 18px;
margin-bottom: 20px;
}
h2 {
text-align: left;
padding: 0;
text-transform: uppercase;
margin-bottom: 40px;
}
p {
text-wrap: pretty;
margin-bottom: 20px;
}
.evidenza {
border-left: 4px solid var(--blu);
padding: 5px 0 5px 25px;
margin-bottom: 0;
}
}
/* ---- CTA FINALE ---- */
#fin-cta {
position: relative;
background-image: url('/img/home4.jpg');
background-size: cover;
background-position: center;
padding: 120px 0;
.filtro {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: var(--blu);
opacity: .8;
}
.container-fluid {
position: relative;
z-index: 1;
}
h2 {
color: white;
text-transform: uppercase;
text-wrap: balance;
margin-bottom: 40px;
}
}
#heroFaq {
.container-fluid {
margin-top: 100px;
h1 {
text-transform: uppercase;
font-size: 6vw;
}
}
}
/* ============================================================
PAGINA — DOMANDE FREQUENTI (domande-frequenti.html)
============================================================ */
/* ---- INTRO + INDICE ANCORATO ---- */
#faq-indice {
padding: 50px 0 50px;
position: sticky;
top: 0;
background: white;
z-index: 1;
.intro {
text-align: center;
text-wrap: pretty;
max-width: 1000px;
margin: 0 auto 50px;
}
h4 {
text-wrap: balance;
}
.indice {
display: flex;
justify-content: center;
a {
display: flex;
align-items: center;
background: #f5f6f0;
border-left: 3px solid var(--verde);
color: var(--blu);
text-transform: uppercase;
font-weight: 700;
font-size: .9em;
line-height: 1.3em;
padding: 14px 22px;
margin: 0 12px 12px 0;
transition: all .3s cubic-bezier(.215, .61, .355, 1);
span {
display: inline-block;
background: var(--verde);
color: var(--blu);
font-size: .85em;
padding: 1px 9px;
margin-right: 12px;
}
&:hover {
background: var(--blu);
color: white;
text-decoration: none;
}
}
}
}
/* ---- SEZIONI FAQ ---- */
.faq-sezione {
padding: 0 0 150px;
/* offset per l'ancora, così il menu fisso non copre il titolo */
scroll-margin-top: 140px;
h2 {
text-align: left;
padding: 0;
text-transform: uppercase;
margin-bottom: 30px;
border-bottom: 3px solid var(--verde);
padding-bottom: 15px;
}
.approfondisci {
margin-top: 25px;
font-size: 1.2em;
background: var(--blu);
padding: 0 10px;
color: white;
text-transform: uppercase;
a {
color: white;
font-weight: 700;
text-decoration: underline;
&:hover {
color: var(--verde);
}
}
}
}
/* ---- ACCORDION FAQ ----
struttura standard .cont / .cont-titolo / .cont-testo,
con alternanza sobria: su un elenco lungo aiuta la scansione. */
.faq-sezione .cont {
scroll-margin-top: 140px;
.cont-titolo {
display: flex;
align-items: center;
justify-content: space-between;
border-left: 3px solid transparent;
padding: 18px 25px;
cursor: pointer;
transition: all .3s cubic-bezier(.215, .61, .355, 1);
h3 {
text-align: left;
color: var(--blu);
font-size: 1.15em;
line-height: 1.35em;
font-weight: 700;
margin: 0;
}
span {
flex: 0 0 auto;
color: var(--verde);
font-size: 1.8em;
line-height: 1em;
margin-left: 25px;
transition: transform .3s cubic-bezier(.215, .61, .355, 1);
}
/* alternanza ciclica */
&.uno,
&.tre {
background: white;
}
&.due {
background: #f5f6f0;
}
&:hover {
border-left-color: var(--verde);
h3 {
color: var(--verde);
}
}
/* lo stato aperto deve vincere sulle classi cicliche: va tenuto per ultimo */
&[aria-expanded="true"] {
background: var(--blu);
border-left-color: var(--verde);
h3 {
color: white;
}
span {
transform: rotate(45deg);
}
}
}
.cont-testo {
border-left: 3px solid var(--verde);
background: #f5f6f0;
p {
text-wrap: pretty;
padding: 25px;
margin: 0;
}
}
}
/* ---- CTA FINALE ---- */
#faq-cta {
position: relative;
background-image: url('/img/home4.jpg');
background-size: cover;
background-position: center;
padding: 100px 0;
.filtro {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: var(--blu);
opacity: .85;
}
.container-fluid {
position: relative;
z-index: 1;
}
h2 {
color: white;
text-transform: uppercase;
text-wrap: balance;
margin-bottom: 40px;
}
}
/* ============================================================
PAGINA — CASE STUDY (case-study.html)
============================================================ */
/* ---- HERO ---- */
#cs-hero {
position: relative;
min-height: 60vh;
background-image: url('/img/Perche_01.jpg');
background-size: cover;
background-position: center;
display: flex;
flex-wrap: wrap;
align-content: center;
.filtro {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: var(--blu);
opacity: .8;
}
.container-fluid {
position: relative;
z-index: 1;
padding-top: 120px;
padding-bottom: 60px;
}
.occhiello {
display: block;
text-align: center;
text-transform: uppercase;
letter-spacing: 3px;
color: var(--verde);
font-weight: 700;
margin-bottom: 15px;
}
h1 {
color: white;
text-transform: uppercase;
text-wrap: balance;
margin: 0;
}
}
/* ---- INTRO ---- */
#cs-intro {
padding: 100px 0 80px;
.lead {
font-size: 1.4em;
line-height: 1.4em;
color: var(--blu);
text-align: center;
text-wrap: balance;
max-width: 1000px;
margin: 0 auto 25px;
}
.sottotitolo {
text-align: center;
text-wrap: pretty;
max-width: 1000px;
margin: 0 auto;
}
}
/* ---- ARCHIVIO ---- */
#cs-archivio {
padding: 0 0 100px;
/* filtri per tipo di cliente */
.filtri {
display: flex;
flex-wrap: wrap;
justify-content: center;
margin-bottom: 50px;
.filtro-btn {
background: white;
border: 2px solid var(--blu);
color: var(--blu);
text-transform: uppercase;
font-weight: 700;
font-size: .9em;
letter-spacing: 1px;
padding: 10px 28px;
margin: 0 10px 10px 0;
cursor: pointer;
transition: all .3s cubic-bezier(.215, .61, .355, 1);
&:last-child {
margin-right: 0;
}
&:hover {
background: var(--verde);
border-color: var(--verde);
}
&.attivo {
background: var(--blu);
color: var(--verde);
}
}
}
.griglia > [class*='col-'] {
margin-bottom: 30px;
&.nascondi-caso {
display: none;
}
}
.vuoto {
text-align: center;
color: var(--blu);
margin-top: 20px;
}
}
/* ---- CARD DEL SINGOLO CASO ---- */
.caso {
display: flex;
flex-direction: column;
background: white;
border-bottom: 4px solid var(--verde);
box-shadow: 0 2px 18px rgba(11, 75, 92, .08);
height: 100%;
transition: all .3s cubic-bezier(.215, .61, .355, 1);
&:hover {
box-shadow: 0 8px 28px rgba(11, 75, 92, .18);
transform: translateY(-4px);
.media img {
transform: scale(1.05);
}
}
.media {
position: relative;
display: block;
overflow: hidden;
aspect-ratio: 16 / 10;
img {
width: 100%;
height: 100%;
object-fit: cover;
transition: transform .5s cubic-bezier(.215, .61, .355, 1);
}
.tipo {
position: absolute;
top: 0;
left: 0;
background: var(--verde);
color: var(--blu);
text-transform: uppercase;
font-weight: 700;
font-size: .8em;
letter-spacing: 1px;
padding: 5px 15px;
}
}
.corpo {
display: flex;
flex-direction: column;
flex: 1;
padding: 30px;
}
.meta {
text-transform: uppercase;
letter-spacing: 1px;
font-size: .8em;
color: var(--blu);
opacity: .6;
margin-bottom: 12px;
}
h3 {
text-align: left;
font-size: 1.35em;
line-height: 1.3em;
margin-bottom: 15px;
a {
color: var(--blu);
&:hover {
color: var(--verde);
text-decoration: none;
}
}
}
.partenza {
text-wrap: pretty;
font-size: .95em;
margin-bottom: 20px;
}
.interventi {
display: flex;
flex-wrap: wrap;
list-style: none;
padding: 0;
margin: 0 0 25px;
li {
background: #f5f6f0;
color: var(--blu);
font-size: .85em;
padding: 4px 14px;
margin: 0 8px 8px 0;
}
}
/* i due numeri chiave: promessa vs prova */
.risultati {
display: flex;
border-top: 1px solid #e4e6dc;
margin-top: auto;
padding-top: 20px;
.dato {
flex: 1;
.valore {
display: block;
font-size: 1.9em;
font-weight: 700;
line-height: 1em;
color: var(--blu);
}
.etichetta {
display: block;
text-transform: uppercase;
letter-spacing: 1px;
font-size: .75em;
color: var(--blu);
opacity: .6;
margin-top: 6px;
}
&.ottenuto {
border-left: 1px solid #e4e6dc;
padding-left: 20px;
.valore {
color: var(--verde);
}
}
}
}
.leggi {
display: inline-block;
align-self: flex-start;
color: var(--blu);
text-transform: uppercase;
font-weight: 700;
font-size: .85em;
letter-spacing: 1px;
border-bottom: 2px solid var(--verde);
padding-bottom: 3px;
margin-top: 25px;
transition: all .3s cubic-bezier(.215, .61, .355, 1);
&:hover {
color: var(--verde);
text-decoration: none;
}
}
}
/* ============================================================
PAGINA — DETTAGLIO CASE STUDY (case-study-dettaglio.html)
============================================================ */
/* ---- SCHEDA PROGETTO ---- */
#caso-scheda {
background: var(--blu);
padding: 150px 0 100px;
.torna {
display: inline-block;
color: var(--verde);
text-transform: uppercase;
font-weight: 700;
font-size: .85em;
letter-spacing: 2px;
margin-bottom: 40px;
transition: all .3s cubic-bezier(.215, .61, .355, 1);
i {
margin-right: 8px;
}
&:hover {
color: white;
text-decoration: none;
}
}
/* galleria */
.galleria-caso {
.swiper-slide img {
display: block;
width: 100%;
aspect-ratio: 4 / 3;
object-fit: cover;
}
.swiper-pagination {
position: static;
margin-top: 20px;
.swiper-pagination-bullet {
width: 10px;
height: 10px;
background: white;
opacity: .4;
border-radius: 0;
transition: all .3s cubic-bezier(.215, .61, .355, 1);
}
.swiper-pagination-bullet-active {
background: var(--verde);
opacity: 1;
width: 26px;
}
}
}
/* colonna dati */
.col-txt {
padding-left: 50px;
.tipo {
display: inline-block;
background: var(--verde);
color: var(--blu);
text-transform: uppercase;
font-weight: 700;
font-size: .8em;
letter-spacing: 1px;
padding: 4px 15px;
margin-bottom: 20px;
}
h1 {
color: white;
text-align: left;
text-transform: none;
text-wrap: balance;
font-size: 3em;
padding: 0;
margin: 0;
}
.sep {
width: 90px;
height: 4px;
background: var(--verde);
margin: 20px 0;
}
.luogo {
color: white;
text-transform: uppercase;
font-weight: 700;
letter-spacing: 2px;
margin-bottom: 35px;
i {
color: var(--verde);
margin-right: 8px;
}
}
}
/* tabella scheda tecnica */
.scheda {
width: 100%;
tr {
border-bottom: 1px solid rgba(255, 255, 255, .18);
&:first-child {
border-top: 1px solid rgba(255, 255, 255, .18);
}
}
td {
color: white;
vertical-align: top;
padding: 16px 0;
}
.dato {
width: 42%;
text-transform: uppercase;
font-weight: 700;
font-size: .8em;
line-height: 1.4em;
letter-spacing: 1px;
padding-right: 25px;
}
.valore {
text-wrap: pretty;
ul {
list-style: none;
padding: 0;
margin: 0;
li {
position: relative;
padding-left: 18px;
margin-bottom: 6px;
color: white;
font-size: 1em;
&::before {
content: "";
position: absolute;
top: .6em;
left: 0;
width: 7px;
height: 7px;
background: var(--verde);
}
}
}
}
/* i due numeri chiave: promessa vs prova */
.evidenza .valore {
font-size: 1.5em;
font-weight: 700;
line-height: 1.2em;
small {
font-size: .55em;
font-weight: 400;
opacity: .75;
}
}
.evidenza.verde .valore {
color: var(--verde);
}
}
}
/* ---- ALTRI PROGETTI ---- */
#caso-altri {
padding: 100px 0;
h2 {
text-transform: uppercase;
margin-bottom: 50px;
}
.slider-progetti {
padding-bottom: 50px;
.swiper-pagination {
bottom: 0;
.swiper-pagination-bullet {
width: 10px;
height: 10px;
background: var(--blu);
opacity: .3;
border-radius: 0;
transition: all .3s cubic-bezier(.215, .61, .355, 1);
}
.swiper-pagination-bullet-active {
background: var(--verde);
opacity: 1;
width: 26px;
}
}
}
.progetto {
position: relative;
display: block;
overflow: hidden;
aspect-ratio: 4 / 3;
padding-top: 0!important;
img {
width: 100%;
height: 100%;
object-fit: cover;
transition: transform .5s cubic-bezier(.215, .61, .355, 1);
}
.hover {
position: absolute;
top: 0;
left: 0;
display: flex;
align-items: center;
justify-content: center;
width: 100%;
height: 100%;
background: rgba(11, 75, 92, .55);
padding: 25px;
transition: all .3s cubic-bezier(.215, .61, .355, 1);
h3 {
color: white;
text-transform: uppercase;
font-size: 1.4em;
line-height: 1.25em;
text-wrap: balance;
margin: 0;
}
}
&:hover {
text-decoration: none;
img {
transform: scale(1.06);
}
.hover {
background: rgba(11, 75, 92, .8);
h3 {
color: var(--verde);
}
}
}
}
}
/* ---- CTA FINALE ---- */
#caso-cta {
position: relative;
background-image: url('/img/home4.jpg');
background-size: cover;
background-position: center;
padding: 120px 0;
.filtro {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: var(--blu);
opacity: .8;
}
.container-fluid {
position: relative;
z-index: 1;
}
h2 {
color: white;
text-transform: uppercase;
text-wrap: balance;
margin-bottom: 40px;
}
}
/* ---- CTA FINALE ---- */
#cs-cta {
position: relative;
background-image: url('/img/home4.jpg');
background-size: cover;
background-position: center;
padding: 120px 0;
.filtro {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: var(--blu);
opacity: .8;
}
.container-fluid {
position: relative;
z-index: 1;
}
h2 {
color: white;
text-transform: uppercase;
text-wrap: balance;
margin-bottom: 40px;
}
}
/* ----------------------- AGGIUNTIVO -----------------------*/
#cond-dati a {
margin: 50px 0 0;
}
/* ===================== CONTATTI ===================== */
/* ---- HERO ---- */
#contatti-hero {
position: relative;
min-height: 60vh;
background-image: url('/img/contatti.jpg');
background-size: cover;
background-position: center;
display: flex;
flex-wrap: wrap;
align-content: center;
.filtro {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: var(--blu);
opacity: .75;
}
.container-fluid {
position: relative;
z-index: 1;
padding-top: 120px;
padding-bottom: 60px;
}
.occhiello {
display: block;
text-align: center;
text-transform: uppercase;
letter-spacing: 3px;
color: var(--verde);
font-weight: 700;
margin-bottom: 15px;
}
h1 {
color: white;
text-transform: none;
text-wrap: balance;
margin: 0;
}
}
/* ---- RECAPITI ---- */
#contatti-recapiti {
padding: 100px 0 60px;
.box {
background: #f5f6f0;
border-bottom: 4px solid var(--verde);
text-align: center;
padding: 40px 30px;
height: 100%;
h3 {
text-transform: uppercase;
color: var(--blu);
font-weight: 700;
margin-bottom: 20px;
}
p {
text-align: center;
margin: 0;
}
a {
color: var(--blu);
transition: all .3s cubic-bezier(.215, .61, .355, 1);
&:hover {
color: var(--verde);
text-decoration: none;
}
}
}
}
/* ---- TESTO INTRO + FORM ---- */
#contatti-form {
padding: 40px 0 100px;
.intro {
max-width: 900px;
margin: 0 auto 60px;
h2 {
text-transform: uppercase;
margin-bottom: 25px;
}
p {
text-wrap: pretty;
margin-bottom: 20px;
}
}
.form-contatti {
max-width: 1100px;
margin: 0 auto;
[class*='col-'] {
margin-bottom: 20px;
}
input[type='text'],
input[type='tel'],
input[type='email'],
.voci-form,
select,
textarea {
width: 100%!important;
background: #f5f6f0!important;
border: none!important;
border-bottom: 2px solid var(--blu)!important;
color: var(--blu)!important;
font-size: 1em!important;
padding: 14px 18px!important;
transition: all .3s cubic-bezier(.215, .61, .355, 1)!important;
&::placeholder {
color: var(--blu)!important;
opacity: .6!important;
}
&:focus {
outline: none!important;
border-bottom-color: var(--verde)!important;
}
}
select {
appearance: none!important;
border-radius: 0!important;
}
textarea {
resize: vertical!important;
}
.riga-invio {
align-items: center!important;
}
.flag label {
display: flex!important;
align-items: flex-start!important;
margin: 0!important;
cursor: pointer!important;
input[type='checkbox'] {
margin: 5px 12px 0 0!important;
flex-shrink: 0!important;
}
span {
color: var(--blu)!important;
font-size: .9em!important;
line-height: 1.4em!important;
}
}
.div-btn {
text-align: right!important;
}
input[type='submit'], .cta-invio {
background: var(--verde)!important;
border: none!important;
color: var(--blu)!important;
font-size: 1.3em!important;
text-transform: uppercase!important;
padding: 10px 40px!important;
transition: all .3s cubic-bezier(.215, .61, .355, 1)!important;
width: 100%!important;
&:hover {
background: var(--blu)!important;
color: var(--verde)!important;
}
}
}
}
/* ============================================================
PAGINA — NEWS (news.html)
============================================================ */
/* ---- HERO ---- */
#news-hero {
position: relative;
min-height: 60vh;
background-image: url('/img/Home_01.jpg');
background-size: cover;
background-position: center;
display: flex;
flex-wrap: wrap;
align-content: center;
.filtro {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: var(--blu);
opacity: .8;
}
.container-fluid {
position: relative;
z-index: 1;
padding-top: 120px;
padding-bottom: 60px;
}
.occhiello {
display: block;
text-align: center;
text-transform: uppercase;
letter-spacing: 3px;
color: var(--verde);
font-weight: 700;
margin-bottom: 15px;
}
h1 {
color: white;
text-transform: uppercase;
text-wrap: balance;
margin: 0;
}
}
/* ---- INTRO ---- */
#news-intro {
padding: 100px 0 70px;
.row {
align-items: center;
}
.lead {
font-size: 1.4em;
line-height: 1.4em;
color: var(--blu);
text-wrap: pretty;
}
.nota {
text-wrap: pretty;
border-left: 4px solid var(--verde);
padding-left: 25px;
}
.conteggio {
text-transform: uppercase;
letter-spacing: 1px;
font-size: .85em;
color: var(--blu);
opacity: .6;
padding-left: 29px;
margin-top: 20px;
strong {
color: var(--verde);
font-size: 1.4em;
}
}
}
/* ---- ARTICOLO IN EVIDENZA ---- */
#news-evidenza {
background: #f5f6f0;
padding: 70px 0;
.etichetta-sezione {
display: inline-block;
background: var(--blu);
color: var(--verde);
text-transform: uppercase;
font-weight: 700;
font-size: .85em;
letter-spacing: 2px;
padding: 8px 22px;
margin-bottom: 30px;
}
.row {
align-items: center;
}
.media {
display: block;
overflow: hidden;
aspect-ratio: 16 / 9;
img {
width: 100%;
height: 100%;
object-fit: cover;
transition: transform .5s cubic-bezier(.215, .61, .355, 1);
}
&:hover img {
transform: scale(1.04);
}
}
.testo {
padding-left: 40px;
}
.data {
display: flex;
flex-wrap: wrap;
align-items: center;
text-transform: uppercase;
letter-spacing: 1px;
font-size: .8em;
color: var(--blu);
margin-bottom: 18px;
.categoria {
background: var(--verde);
color: var(--blu);
font-weight: 700;
padding: 4px 14px;
margin-right: 15px;
}
time {
opacity: .6;
}
}
h2 {
text-align: left;
text-wrap: balance;
font-size: 2.2em;
line-height: 1.1em;
color: var(--blu);
padding: 0;
margin-bottom: 20px;
}
.estratto {
text-wrap: pretty;
margin-bottom: 30px;
}
}
/* ---- ARCHIVIO ---- */
#news-archivio {
padding: 90px 0 100px;
/* filtri per categoria */
.filtri {
display: flex;
flex-wrap: wrap;
justify-content: center;
margin-bottom: 50px;
.filtro-btn {
background: white;
border: 2px solid var(--blu);
color: var(--blu);
text-transform: uppercase;
font-weight: 700;
font-size: .9em;
letter-spacing: 1px;
padding: 10px 28px;
margin: 0 10px 10px 0;
cursor: pointer;
transition: all .3s cubic-bezier(.215, .61, .355, 1);
&:last-child {
margin-right: 0;
}
/* i filtri news sono link: serve annullare l'underline di Bootstrap */
&:hover {
background: var(--verde);
border-color: var(--verde);
color: var(--blu);
text-decoration: none;
}
&.attivo {
background: var(--blu);
color: var(--verde);
}
}
}
.griglia > [class*='col-'] {
margin-bottom: 30px;
}
.vuoto {
text-align: center;
color: var(--blu);
margin-top: 20px;
}
/* paginazione */
.paginazione {
display: flex;
flex-wrap: wrap;
justify-content: center;
align-items: center;
margin-top: 40px;
.pagina {
color: var(--blu);
font-weight: 700;
border: 2px solid #e4e6dc;
padding: 8px 18px;
margin: 0 8px 8px 0;
transition: all .3s cubic-bezier(.215, .61, .355, 1);
&:hover {
border-color: var(--verde);
text-decoration: none;
}
&.attiva {
background: var(--blu);
border-color: var(--blu);
color: var(--verde);
}
&.avanti {
text-transform: uppercase;
letter-spacing: 1px;
font-size: .85em;
margin-right: 0;
}
}
}
}
/* ---- CARD DEL SINGOLO ARTICOLO ---- */
.articolo {
display: flex;
flex-direction: column;
background: white;
border-bottom: 4px solid var(--verde);
box-shadow: 0 2px 18px rgba(11, 75, 92, .08);
height: 100%;
transition: all .3s cubic-bezier(.215, .61, .355, 1);
&:hover {
box-shadow: 0 8px 28px rgba(11, 75, 92, .18);
transform: translateY(-4px);
.media img {
transform: scale(1.05);
}
}
.media {
position: relative;
display: block;
overflow: hidden;
aspect-ratio: 16 / 10;
img {
width: 100%;
height: 100%;
object-fit: cover;
transition: transform .5s cubic-bezier(.215, .61, .355, 1);
}
.categoria {
position: absolute;
top: 0;
left: 0;
background: var(--verde);
color: var(--blu);
text-transform: uppercase;
font-weight: 700;
font-size: .8em;
letter-spacing: 1px;
padding: 5px 15px;
}
}
.corpo {
display: flex;
flex-direction: column;
flex: 1;
padding: 30px;
}
.data {
display: flex;
align-items: center;
text-transform: uppercase;
letter-spacing: 1px;
font-size: .8em;
color: var(--blu);
opacity: .6;
margin-bottom: 12px;
.lettura {
padding-left: 12px;
margin-left: 12px;
border-left: 1px solid #c9cec2;
}
}
h3 {
text-align: left;
text-wrap: pretty;
font-size: 1.35em;
line-height: 1.3em;
margin-bottom: 15px;
a {
color: var(--blu);
&:hover {
color: var(--verde);
text-decoration: none;
}
}
}
.estratto {
text-wrap: pretty;
font-size: .95em;
margin-bottom: 25px;
}
.leggi {
margin-top: auto;
}
}
/* link "leggi l'articolo": stesso trattamento in card e in evidenza */
#news-evidenza .leggi,
.articolo .leggi {
display: inline-block;
text-transform: uppercase;
font-weight: 700;
font-size: .85em;
letter-spacing: 1px;
color: var(--blu);
border-bottom: 2px solid var(--verde);
padding-bottom: 4px;
align-self: flex-start;
transition: all .3s cubic-bezier(.215, .61, .355, 1);
&:hover {
color: var(--verde);
border-color: var(--blu);
text-decoration: none;
}
}
/* ---- CTA FINALE ---- */
#news-cta {
position: relative;
background-image: url('/img/bg1.jpg');
background-size: cover;
background-position: center;
padding: 110px 0;
.filtro {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: var(--blu);
opacity: .85;
}
.container-fluid {
position: relative;
z-index: 1;
}
.row {
align-items: center;
}
h2 {
text-align: left;
text-transform: uppercase;
text-wrap: balance;
color: white;
padding: 0;
margin-bottom: 20px;
}
p {
color: white;
text-wrap: pretty;
opacity: .85;
}
.col-cta {
text-align: right;
a.cta-std-verde {
margin-right: 0;
}
}
}
/* ============================================================
PAGINA — DETTAGLIO NEWS (news-dettaglio.html)
============================================================ */
/* ---- TESTATA ---- */
#post-testata {
background: var(--blu);
padding: 150px 0 0;
.torna {
display: inline-block;
color: var(--verde);
text-transform: uppercase;
font-weight: 700;
font-size: .85em;
letter-spacing: 2px;
margin-bottom: 40px;
transition: all .3s cubic-bezier(.215, .61, .355, 1);
i {
margin-right: 8px;
}
&:hover {
color: white;
text-decoration: none;
}
}
.categoria {
display: inline-block;
background: var(--verde);
color: var(--blu);
text-transform: uppercase;
font-weight: 700;
font-size: .8em;
letter-spacing: 2px;
padding: 5px 18px;
margin-bottom: 20px;
}
h1 {
text-align: left;
text-wrap: balance;
white-space: normal;
color: white;
font-size: 2.6em;
line-height: 1.1em;
max-width: 1000px;
padding: 0;
margin: 0;
}
.sep {
width: 90px;
height: 4px;
background: var(--verde);
margin: 25px 0;
}
.meta {
display: flex;
flex-wrap: wrap;
align-items: center;
text-transform: uppercase;
letter-spacing: 1px;
font-size: .8em;
color: white;
opacity: .7;
.lettura,
.autore {
padding-left: 15px;
margin-left: 15px;
border-left: 1px solid rgba(255, 255, 255, .35);
}
}
/* immagine di copertina a cavallo tra testata e corpo */
.media {
margin-top: 60px;
margin-bottom: -100px;
img {
display: block;
width: 100%;
aspect-ratio: 21 / 9;
object-fit: cover;
}
}
}
/* ---- CORPO ARTICOLO ---- */
#post-corpo {
padding: 160px 0 100px;
/* section { overflow: hidden } in custom.css annullerebbe lo sticky della sidebar */
overflow: visible;
.col-testo {
padding-right: 5%;
}
/* stili del contenuto redazionale (the_content) */
.contenuto {
p {
text-wrap: pretty;
margin-bottom: 25px;
}
.chapeau {
font-size: 1.3em;
line-height: 1.4em;
color: var(--blu);
font-weight: 500;
margin-bottom: 35px;
}
h2 {
text-align: left;
text-wrap: balance;
white-space: normal;
color: var(--blu);
font-size: 1.8em;
line-height: 1.2em;
padding: 0;
margin: 50px 0 20px;
scroll-margin-top: 150px;
&::before {
content: '';
display: block;
width: 60px;
height: 4px;
background: var(--verde);
margin-bottom: 20px;
}
}
/* sottosezione dentro un h2: niente filetto, così la gerarchia resta leggibile */
h3 {
text-align: left;
text-wrap: balance;
white-space: normal;
color: var(--blu);
font-size: 1.25em;
line-height: 1.3em;
padding: 0;
margin: 40px 0 15px;
scroll-margin-top: 150px;
}
/* due titoli di fila non devono staccarsi come se ci fosse del testo in mezzo */
h2 + h3 {
margin-top: 25px;
}
ul {
padding-left: 25px;
margin-bottom: 25px;
li {
font-size: 1em;
line-height: 1.5em;
margin-bottom: 10px;
&::marker {
color: var(--verde);
}
}
}
blockquote {
background: #f5f6f0;
border-left: 5px solid var(--verde);
padding: 30px 35px;
margin: 40px 0;
p {
font-size: 1.25em;
line-height: 1.4em;
color: var(--blu);
font-style: italic;
margin: 0;
}
}
/* .img-articolo = markup a mano, figure.wp-block-image = blocco Immagine di Gutenberg */
.img-articolo,
figure.wp-block-image {
margin: 45px 0;
img {
display: block;
width: 100%;
aspect-ratio: 16 / 9;
object-fit: cover;
}
figcaption {
font-size: .9em;
color: var(--blu);
opacity: .65;
border-left: 3px solid var(--verde);
padding-left: 15px;
margin-top: 15px;
}
}
}
/* condivisione */
.condividi {
display: flex;
flex-wrap: wrap;
align-items: center;
border-top: 1px solid #e4e6dc;
padding-top: 30px;
margin-top: 50px;
.etichetta {
text-transform: uppercase;
font-weight: 700;
font-size: .85em;
letter-spacing: 2px;
color: var(--blu);
margin-right: 20px;
}
a {
display: flex;
align-items: center;
justify-content: center;
width: 42px;
height: 42px;
background: #f5f6f0;
color: var(--blu);
margin-right: 10px;
transition: all .3s cubic-bezier(.215, .61, .355, 1);
&:hover {
background: var(--verde);
text-decoration: none;
}
}
}
/* sidebar */
.col-sidebar {
.sticky {
position: sticky;
top: 140px;
}
.titolo-box {
display: block;
text-transform: uppercase;
font-weight: 700;
font-size: .85em;
letter-spacing: 2px;
color: var(--blu);
margin-bottom: 18px;
}
.indice {
border-top: 4px solid var(--verde);
background: #f5f6f0;
padding: 30px;
ul {
list-style: none;
padding: 0;
margin: 0;
}
li {
font-size: 1em;
line-height: 1.35em;
margin-bottom: 14px;
&:last-child {
margin-bottom: 0;
}
a {
display: block;
color: var(--blu);
border-left: 3px solid transparent;
padding-left: 15px;
transition: all .3s cubic-bezier(.215, .61, .355, 1);
&:hover {
border-color: var(--verde);
text-decoration: none;
}
}
}
}
.box-cta {
background: var(--blu);
padding: 30px;
margin-top: 30px;
.titolo-box {
color: var(--verde);
}
p {
color: white;
font-size: .95em;
text-wrap: pretty;
margin-bottom: 25px;
}
a.cta-std-verde {
font-size: 1.1em;
margin: 0;
}
}
}
}
/* ---- ARTICOLI CORRELATI ---- */
#post-correlati {
background: #f5f6f0;
padding: 90px 0 100px;
h2 {
text-transform: uppercase;
color: var(--blu);
margin-bottom: 50px;
}
.row > [class*='col-'] {
margin-bottom: 30px;
}
.tutte {
margin-top: 30px;
}
}
.pulse {
animation: pulse-animation 1.5s infinite;
}
@keyframes pulse-animation {
0% {
box-shadow: 0 0 0 0px rgba(255, 255, 255, 1);
}
100% {
box-shadow: 0 0 0 10px rgba(0, 0, 0, 0);
}
}
/* ============================================================
PAGINA — 404
============================================================ */
#pagina-404 {
/* min-height tiene il footer in fondo su una pagina molto corta */
min-height: 60vh;
display: flex;
align-items: center;
padding: 200px 0;
text-align: center;
.occhiello {
display: block;
text-transform: uppercase;
letter-spacing: 3px;
color: var(--verde);
font-weight: 700;
margin-bottom: 15px;
}
h1 {
color: var(--blu);
text-transform: uppercase;
}
.sep {
width: 90px;
height: 4px;
background: var(--verde);
margin: 25px auto;
}
p {
color: var(--blu);
max-width: 620px;
margin: 0 auto 40px;
}
}