* {
box-sizing: border-box;
}
html,
body {
margin: 0;
padding: 0;
width: 100%;
min-height: 100vh;
}
body {
font-size: 0.7292vw;
overflow-x: hidden;
}
/* =========================================================
SEZIONE 1
Reference originale: 1920x1080
Tutte le proporzioni sono rapportate alla viewport.
========================================================= */
.sezione_1 {
width: 100%;
height: 56.25vw;
position: relative;
overflow: hidden;
}
/* =========================================================
SFONDO SCURO
========================================================= */
.contenitore_sezione_1 {
width: 100%;
height: 100%;
background: var(--colore-grigio-primario);
position: absolute;
top: 0;
left: 0;
overflow: hidden;
}
/* =========================================================
TITOLO
Posizione reference:
x = 58px / 1920
y = 156px / 1920
font = 70px / 1920
========================================================= */
.titolo_sezione_1 {
width: calc(100% - 6.04vw);
color: var(--colore-bianco);
position: absolute;
top: 8.125vw;
left: 3.021vw;
font-family: var(--font-titoli);
font-weight: 400;
font-size: 3.6458vw;
line-height: 1.05;
text-align: left;
}
/* =========================================================
SOTTOTITOLO 1
========================================================= */
.sottotitolo_sezione_1 {
width: calc(100% - 6.04vw);
color: var(--colore-bianco);
position: absolute;
top: 16.51vw;
left: 3.021vw;
font-family: var(--font-titoli);
font-weight: 400;
font-size: 2.0833vw;
line-height: 1.1;
text-align: left;
text-decoration: underline;
text-decoration-thickness: 0.1042vw;
text-underline-offset: 0.2604vw;
}
/* =========================================================
TESTO PRINCIPALE
========================================================= */
.testo_1_sezione_1 {
width: calc(100% - 6.04vw);
color: var(--colore-bianco);
position: absolute;
top: 20.9375vw;
left: 3.021vw;
font-family: var(--font-titoli);
font-weight: 400;
font-size: 1.4063vw;
line-height: 1.25;
text-align: left;
}
/* =========================================================
SOTTOTITOLO 2
========================================================= */
.sottotitolo_2_sezione_1 {
width: calc(100% - 6.04vw);
color: var(--colore-bianco);
position: absolute;
top: 28.333vw;
left: 3.021vw;
font-family: var(--font-titoli);
font-weight: 400;
font-size: 2.0833vw;
line-height: 1.1;
text-align: left;
text-decoration: underline;
text-decoration-thickness: 0.1042vw;
text-underline-offset: 0.2604vw;
}
/* =========================================================
ELENCO 1
========================================================= */
.testo_2_sezione_1 {
width: calc(100% - 6.04vw);
color: var(--colore-bianco);
position: absolute;
top: 32.76vw;
left: 3.021vw;
margin: 0;
padding-left: 1.35em;
font-family: var(--font-titoli);
font-weight: 400;
font-size: 1.4063vw;
line-height: 1.25;
text-align: left;
}
.testo_2_sezione_1 li {
margin: 0;
padding-left: 0.15em;
}
.testo_2_sezione_1 li::marker {
color: var(--colore-bianco);
font-size: 0.8em;
}
/* =========================================================
SOTTOTITOLO 3
========================================================= */
.sottotitolo_3_sezione_1 {
width: calc(100% - 6.04vw);
color: var(--colore-bianco);
position: absolute;
top: 40.625vw;
left: 3.021vw;
font-family: var(--font-titoli);
font-weight: 400;
font-size: 2.0833vw;
line-height: 1.1;
text-align: left;
text-decoration: underline;
text-decoration-thickness: 0.1042vw;
text-underline-offset: 0.2604vw;
}
/* =========================================================
ELENCO 2
========================================================= */
.testo_3_sezione_1 {
width: calc(100% - 6.04vw);
color: var(--colore-bianco);
position: absolute;
top: 44.0625vw;
left: 3.021vw;
margin: 0;
padding-left: 1.35em;
font-family: var(--font-titoli);
font-weight: 400;
font-size: 1.4063vw;
line-height: 1.25;
text-align: left;
}
.testo_3_sezione_1 li {
margin: 0;
padding-left: 0.15em;
}
.testo_3_sezione_1 li::marker {
color: var(--colore-bianco);
font-size: 0.8em;
}
/* =========================================================
SEPARATORE
========================================================= */
.separatore_sezione_1 {
width: calc(100% - 6.04vw);
height: 0.2604vw;
background: var(--colore-bianco);
position: absolute;
top: 14.375vw;
left: 3.021vw;
overflow: hidden;
}
/* =========================================================
SEZIONE 2
========================================================= */
.sezione_2 {
width: 100%;
height: 43.125vw;
/*
* Distanza dalla Sezione 1:
* 69px a 1920px
* completamente elastica.
*/
margin-top: 3.59375vw;
position: relative;
overflow: hidden;
}
/* =========================================================
TITOLO
Reference:
x = 10px
y = 0px
width = 991px
font = 55px
========================================================= */
.titolo_sezione_2 {
width: 51.615vw;
color: var(--colore-grigio-primario);
position: absolute;
top: 0vw;
left: 3.0729167vw;
font-family: var(--font-titoli);
font-weight: 400;
font-size: 2.865vw;
line-height: 1.05;
text-align: left;
}
/* =========================================================
JUDOGI
Reference:
x = 0
y = 157
width = 595
height = 595
========================================================= */
.judogi {
width: 30.99vw;
height: 30.99vw;
background: url("../assets/unisciti_a_noi/judogi.png");
background-repeat: no-repeat;
background-position: center center;
background-size: 100% 100%;
position: absolute;
top: 8.177vw;
left: 0vw;
overflow: hidden;
}
/* =========================================================
CONTENITORE ELEMENTI SEZIONE 2
Reference:
x = 897
y = 139
width = 832
height = 689
========================================================= */
.contenitore_elementi_sezione_2 {
width: 43.333vw;
height: 35.885vw;
position: absolute;
top: 7.24vw;
left: 46.719vw;
overflow: hidden;
}
/* =========================================================
CINTURE
Reference:
x = 0
y = 5
width = 526
height = 680
========================================================= */
.cinture_sezione_2 {
width: 27.396vw;
height: 35.417vw;
position: absolute;
top: 0.26vw;
left: 0vw;
overflow: hidden;
}
/* =========================================================
CINTURE - COLONNA SINISTRA
========================================================= */
.bianca {
width: 5.417vw;
height: 2.083vw;
background: url("../assets/unisciti_a_noi/bianca.png");
background-repeat: no-repeat;
background-position: center center;
background-size: 100% 100%;
position: absolute;
top: 0vw;
left: 0vw;
overflow: hidden;
}
.gialla {
width: 5.417vw;
height: 2.083vw;
background: url("../assets/unisciti_a_noi/gialla.png");
background-repeat: no-repeat;
background-position: center center;
background-size: 100% 100%;
position: absolute;
top: 4.167vw;
left: 0vw;
overflow: hidden;
}
.arancione {
width: 5.417vw;
height: 2.083vw;
background: url("../assets/unisciti_a_noi/arancione.png");
background-repeat: no-repeat;
background-position: center center;
background-size: 100% 100%;
position: absolute;
top: 8.333vw;
left: 0vw;
overflow: hidden;
}
.verde {
width: 5.417vw;
height: 2.083vw;
background: url("../assets/unisciti_a_noi/verde.png");
background-repeat: no-repeat;
background-position: center center;
background-size: 100% 100%;
position: absolute;
top: 12.5vw;
left: 0vw;
overflow: hidden;
}
.blu {
width: 5.417vw;
height: 2.083vw;
background: url("../assets/unisciti_a_noi/blu.png");
background-repeat: no-repeat;
background-position: center center;
background-size: 100% 100%;
position: absolute;
top: 16.667vw;
left: 0vw;
overflow: hidden;
}
.marrone {
width: 5.417vw;
height: 2.083vw;
background: url("../assets/unisciti_a_noi/marrone.png");
background-repeat: no-repeat;
background-position: center center;
background-size: 100% 100%;
position: absolute;
top: 20.833vw;
left: 0vw;
overflow: hidden;
}
.nera {
width: 5.417vw;
height: 2.083vw;
background: url("../assets/unisciti_a_noi/nera.png");
background-repeat: no-repeat;
background-position: center center;
background-size: 100% 100%;
position: absolute;
top: 25vw;
left: 0vw;
overflow: hidden;
}
.bianco_rossa {
width: 5.417vw;
height: 2.083vw;
background: url("../assets/unisciti_a_noi/bianco_rossa.png");
background-repeat: no-repeat;
background-position: center center;
background-size: 100% 100%;
position: absolute;
top: 29.167vw;
left: 0vw;
overflow: hidden;
}
.rossa {
width: 5.417vw;
height: 2.083vw;
background: url("../assets/unisciti_a_noi/rossa.png");
background-repeat: no-repeat;
background-position: center center;
background-size: 100% 100%;
position: absolute;
top: 33.333vw;
left: 0vw;
overflow: hidden;
}
/* =========================================================
CINTURE - COLONNA DESTRA
========================================================= */
.bianco_gialla {
width: 5.417vw;
height: 2.083vw;
background: url("../assets/unisciti_a_noi/bianco_gialla.png");
background-repeat: no-repeat;
background-position: center center;
background-size: 100% 100%;
position: absolute;
top: 1.979vw;
left: 21.979vw;
overflow: hidden;
}
.giallo_arancione {
width: 5.417vw;
height: 2.083vw;
background: url("../assets/unisciti_a_noi/giallo_arancione.png");
background-repeat: no-repeat;
background-position: center center;
background-size: 100% 100%;
position: absolute;
top: 6.146vw;
left: 21.979vw;
overflow: hidden;
}
.arancio_verde {
width: 5.417vw;
height: 2.083vw;
background: url("../assets/unisciti_a_noi/arancio_verde.png");
background-repeat: no-repeat;
background-position: center center;
background-size: 100% 100%;
position: absolute;
top: 10.313vw;
left: 21.979vw;
overflow: hidden;
}
.verde_blu {
width: 5.417vw;
height: 2.083vw;
background: url("../assets/unisciti_a_noi/verde_blu.png");
background-repeat: no-repeat;
background-position: center center;
background-size: 100% 100%;
position: absolute;
top: 14.479vw;
left: 21.979vw;
overflow: hidden;
}
.blu_marrone {
width: 5.417vw;
height: 2.083vw;
background: url("../assets/unisciti_a_noi/blu_marrone.png");
background-repeat: no-repeat;
background-position: center center;
background-size: 100% 100%;
position: absolute;
top: 18.646vw;
left: 21.979vw;
overflow: hidden;
}
/* =========================================================
TESTI
Reference:
x = 104
y = 0
width = 728
height = 689
========================================================= */
.testi_sezione_2 {
width: 37.917vw;
height: 35.885vw;
position: absolute;
top: 0vw;
left: 5.417vw;
overflow: hidden;
}
/* =========================================================
TESTI
Reference:
width = 306px
font = 32px
========================================================= */
.testo_1_sezione_2,
.testo_2_sezione_2,
.testo_3_sezione_2,
.testo_4_sezione_2,
.testo_5_sezione_2,
.testo_6_sezione_2,
.testo_7_sezione_2,
.testo_8_sezione_2,
.testo_9_sezione_2,
.testo_10_sezione_2,
.testo_11_sezione_2,
.testo_12_sezione_2,
.testo_13_sezione_2,
.testo_14_sezione_2 {
width: 15.938vw;
color: var(--colore-grigio-primario);
position: absolute;
font-family: var(--font-titoli);
font-weight: 400;
font-size: 1.667vw;
line-height: 1.1;
text-align: center;
}
/* =========================================================
POSIZIONI TESTI
========================================================= */
.testo_1_sezione_2 {
top: 0vw;
left: 0vw;
}
.testo_2_sezione_2 {
top: 1.979vw;
left: 21.979vw;
}
.testo_3_sezione_2 {
top: 6.146vw;
left: 21.979vw;
}
.testo_4_sezione_2 {
top: 10.313vw;
left: 21.979vw;
}
.testo_5_sezione_2 {
top: 14.479vw;
left: 21.979vw;
}
.testo_6_sezione_2 {
top: 18.646vw;
left: 21.979vw;
}
.testo_7_sezione_2 {
top: 20.833vw;
left: 0vw;
}
.testo_8_sezione_2 {
top: 25vw;
left: 0vw;
}
.testo_9_sezione_2 {
top: 29.167vw;
left: 0vw;
}
.testo_10_sezione_2 {
top: 33.333vw;
left: 0vw;
}
.testo_11_sezione_2 {
top: 16.667vw;
left: 0vw;
}
.testo_12_sezione_2 {
top: 12.5vw;
left: 0vw;
}
.testo_13_sezione_2 {
top: 8.333vw;
left: 0vw;
}
.testo_14_sezione_2 {
top: 4.167vw;
left: 0vw;
}
/* =========================================================
RESPONSIVE SEZIONE 2
========================================================= */
@media (max-width: 600px) {
.sezione_2 {
width: 100%;
height: 56.25vw;
}
.titolo_sezione_2 {
font-size: 2.865vw;
}
.testo_1_sezione_2,
.testo_2_sezione_2,
.testo_3_sezione_2,
.testo_4_sezione_2,
.testo_5_sezione_2,
.testo_6_sezione_2,
.testo_7_sezione_2,
.testo_8_sezione_2,
.testo_9_sezione_2,
.testo_10_sezione_2,
.testo_11_sezione_2,
.testo_12_sezione_2,
.testo_13_sezione_2,
.testo_14_sezione_2 {
font-size: 1.667vw;
}
}
/* =========================================================
SEZIONE 3
Reference originale: 1920x1080
Tutto scala proporzionalmente alla larghezza della viewport.
La sezione rimane nel normale flusso della pagina.
========================================================= */
.sezione_3 {
width: 100%;
height: 20.833333vw;
margin-top: 3.59375vw;
margin-bottom: 3.59375vw;
position: relative;
overflow: hidden;
}
/* =========================================================
TITOLO
Reference:
x = 59px
y = 69px
font = 55px
========================================================= */
.titolo_sezione_3 {
width: 100%;
color: var(--colore-grigio-primario);
position: absolute;
left: 3.0729167vw;
font-family: var(--font-titoli);
font-weight: 400;
font-size: 2.8645833vw;
line-height: 1.05;
text-align: left;
margin: 0;
}
/* =========================================================
SOTTOTITOLO
Reference:
x = 59px
width = 1811px
height = 90px
========================================================= */
.sottotitolo_sezione_3 {
width: 94.3229167vw;
height: 4.6875vw;
color: var(--colore-grigio-primario);
position: absolute;
top: 4.5833333vw;
left: 3.0729167vw;
font-family: var(--font-titoli);
font-weight: 400;
font-size: 1.40625vw;
line-height: 1.25;
text-align: left;
margin: 0;
}
/* =========================================================
TESTO SOPRA I PULSANTI
========================================================= */
.testo_pulsante_1 {
width: 30vw;
color: var(--colore-nero);
position: absolute;
top: 11.9791667vw;
left: 1.6667vw;
font-family: var(--font-testo);
font-weight: 400;
font-size: 2.0833333vw;
line-height: 1.1;
text-align: center;
margin: 0;
}
.testo_pulsante_2 {
width: 30vw;
color: var(--colore-nero);
position: absolute;
top: 11.9791667vw;
left: 35vw;
font-family: var(--font-testo);
font-weight: 400;
font-size: 2.0833333vw;
line-height: 1.1;
text-align: center;
margin: 0;
}
.testo_pulsante_3 {
width: 30vw;
color: var(--colore-nero);
position: absolute;
top: 11.9791667vw;
left: 68.3333vw;
font-family: var(--font-testo);
font-weight: 400;
font-size: 2.0833333vw;
line-height: 1.1;
text-align: center;
margin: 0;
}
/* =========================================================
PULSANTE 1
========================================================= */
.pulsante_1 {
width: 13.0208333vw;
height: 4.6875vw;
position: absolute;
top: 16.1458333vw;
left: 10.1563vw;
overflow: hidden;
text-decoration: none;
display: block;
}
/* ---------------------------------------------------------
TESTO "CLICCA QUI"
--------------------------------------------------------- */
.clicca_qui_1 {
width: 100%;
color: var(--colore-grigio-primario);
position: absolute;
top: 50%;
left: 0;
transform: translateY(-50%);
font-family: var(--font-testo);
font-weight: 400;
font-size: 1.6666667vw;
line-height: 1;
text-align: center;
z-index: 2;
transition: color 0.5s ease;
}
/* ---------------------------------------------------------
BOX
--------------------------------------------------------- */
.box_pulsante_1 {
width: 13.0208333vw;
height: 4.6875vw;
position: absolute;
top: 0;
left: 0;
border: 0.0521vw solid var(--colore-grigio-primario);
overflow: hidden;
}
/* ---------------------------------------------------------
OVERLAY ANIMATO
--------------------------------------------------------- */
.box_pulsante_1::after {
content: "";
position: absolute;
inset: 0;
background-color: var(--colore-grigio-primario);
opacity: 0;
transition: opacity 0.5s ease;
pointer-events: none;
}
.pulsante_1:hover .box_pulsante_1::after {
}
.pulsante_1:hover .clicca_qui_1 {
color: white;
}
/* =========================================================
PULSANTE 2
========================================================= */
.pulsante_2 {
width: 13.0208333vw;
height: 4.6875vw;
position: absolute;
top: 16.1458333vw;
left: 43.4896vw;
overflow: hidden;
text-decoration: none;
display: block;
}
/* ---------------------------------------------------------
TESTO "CLICCA QUI"
--------------------------------------------------------- */
.clicca_qui_2 {
width: 100%;
color: var(--colore-grigio-primario);
position: absolute;
top: 50%;
left: 0;
transform: translateY(-50%);
font-family: var(--font-testo);
font-weight: 400;
font-size: 1.6666667vw;
line-height: 1;
text-align: center;
z-index: 2;
transition: color 0.5s ease;
}
/* ---------------------------------------------------------
BOX
--------------------------------------------------------- */
.box_pulsante_2 {
width: 13.0208333vw;
height: 4.6875vw;
position: absolute;
top: 0;
left: 0;
border: 0.0521vw solid var(--colore-grigio-primario);
overflow: hidden;
}
/* ---------------------------------------------------------
OVERLAY ANIMATO
--------------------------------------------------------- */
.box_pulsante_2::after {
content: "";
position: absolute;
inset: 0;
background-color: var(--colore-grigio-primario);
opacity: 0;
transition: opacity 0.5s ease;
pointer-events: none;
}
.pulsante_2:hover .box_pulsante_2::after {
}
.pulsante_2:hover .clicca_qui_2 {
color: white;
}
/* =========================================================
PULSANTE 3
========================================================= */
.pulsante_3 {
width: 13.0208333vw;
height: 4.6875vw;
position: absolute;
top: 16.1458333vw;
left: 76.8229vw;
overflow: hidden;
text-decoration: none;
display: block;
}
/* ---------------------------------------------------------
TESTO "CLICCA QUI"
--------------------------------------------------------- */
.clicca_qui_3 {
width: 100%;
color: var(--colore-grigio-primario);
position: absolute;
top: 50%;
left: 0;
transform: translateY(-50%);
font-family: var(--font-testo);
font-weight: 400;
font-size: 1.6666667vw;
line-height: 1;
text-align: center;
z-index: 2;
transition: color 0.5s ease;
}
/* ---------------------------------------------------------
BOX
--------------------------------------------------------- */
.box_pulsante_3 {
width: 13.0208333vw;
height: 4.6875vw;
position: absolute;
top: 0;
left: 0;
border: 0.0521vw solid var(--colore-grigio-primario);
overflow: hidden;
}
/* ---------------------------------------------------------
OVERLAY ANIMATO
--------------------------------------------------------- */
.box_pulsante_3::after {
content: "";
position: absolute;
inset: 0;
background-color: var(--colore-grigio-primario);
opacity: 0;
transition: opacity 0.5s ease;
pointer-events: none;
}
.pulsante_3:hover .box_pulsante_3::after {
}
.pulsante_3:hover .clicca_qui_3 {
color: white;
}
/* =========================================================
RESPONSIVE SEZIONE 3
Nessuna modifica alle proporzioni.
La composizione continua semplicemente a scalare.
========================================================= */
@media (max-width: 600px) {
.sezione_3 {
width: 100%;
height: 20.833333vw;
}
.titolo_sezione_3 {
font-size: 2.8645833vw;
}
.sottotitolo_sezione_3 {
font-size: 1.40625vw;
}
.testo_pulsante_1,
.testo_pulsante_2,
.testo_pulsante_3 {
font-size: 2.0833333vw;
}
.clicca_qui_1,
.clicca_qui_2,
.clicca_qui_3 {
font-size: 1.6666667vw;
}
}