style.css

:root {
    --colorePrincipale: #F5F5F4;
    --coloreSecondario: #181532;
    --disabledColor: #BDBDC5;
    --coloreOmbra: rgba(0, 0, 0, 0.35);
    --cardColor: #232148;
    --buttonColor: #4F61EE;
    --navbarColor: #181532e6;
    --modalColor: #18153266;
    --transizioneConRimbalzo: cubic-bezier(0.3, 0, 0.25, 1.5);
    --transizioneSenzaRimbalzo: cubic-bezier(0.3, 0, 0.25, 1);
    --transizioneColore: cubic-bezier(.1, .45, .65, .7);
}

@font-face { font-family: myFont; src: url("assets/fonts/Exo2-VariableFont_wght.ttf"); font-display: swap; }

* { padding: 0; margin: 0; box-sizing: border-box; }

body, html {
    background-color: var(--coloreSecondario);
    color: var(--colorePrincipale);
    font-family: "myFont", Helvetica;
    font-size: calc(15px + 0.390625vw);
    line-height: 1.6;
    scroll-behavior: smooth;
    text-align: center;
}
body.body--loading { overflow: hidden; }

@media (max-width: 1024px) { body, html { line-height: 1.5; } }
@media (max-width: 600px) { body, html { font-size: calc(13px + 0.390625vw); line-height: 1.4; } }

section { overflow: hidden; padding-bottom: 8rem; }
section:nth-child(1) { padding-bottom: 2rem; } /* portfolioPage */
section:nth-child(2) { padding-top: 1rem; } /* cvPage */
section:last-child { padding-bottom: 5rem; } /* contattiPage */
@media (max-width: 1024px) { section:last-child { padding-bottom: 6vh; } } /* contattiPage */
@media (min-height: 1024px) { section:last-child { padding-bottom: 25vh; } } /* contattiPage */

h1 { font-size: 3rem; }
@media (max-width: 600px) { h1 { font-size: 2.5rem; } }

button {
    background-color: var(--buttonColor);
    color: var(--colorePrincipale);
    box-shadow: var(--coloreOmbra) 0px 3px 10px;
    font-size: 1rem;
    font-weight: bold;
    padding: .7rem 0;
    width: 9rem;
    border-radius: 1.5rem;
    border: none;
    cursor: pointer;
}

button:active { transform: scale(0.95); }

a:active { color: var(--colorePrincipale); }

img, button, input, label, a {
    -webkit-tap-highlight-color: transparent;
    -webkit-touch-callout: none;
    user-select: none; /* rende non selezionabile */
    -moz-user-select: none; /* firefox */
    -webkit-user-select: none; /* Chrome, Opera and Safari*/
    -ms-user-select: none; /* IE, ms-edge */
}

.osservato { will-change: transform, opacity; }
.mostrato {
    transition: transform .4s var(--transizioneConRimbalzo), opacity .4s var(--transizioneSenzaRimbalzo) !important;
    transition-delay: 300ms !important;
    transform: translate(0, 0) !important;
    opacity: 100% !important;
}

.small { display: none; }
@media (max-width: 600px) { .large { display: none; } .small { display: block; } }



/* stile Scrollbar */
*::-webkit-scrollbar { width: 11px; }
  
*::-webkit-scrollbar-track { background: var(--coloreSecondario); }
  
*::-webkit-scrollbar-thumb { background: var(--colorePrincipale); border-radius: 1.5rem; border: 3px solid var(--coloreSecondario); }
/* stile Scrollbar */



/* stile loadingScreen */
#loadingScreen {
    background-color: var(--coloreSecondario);
    position: fixed;
    top: 0;
    left: 0;
    height: 100%;
    width: 100%;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    transition: all .25s var(--transizioneSenzaRimbalzo); 
    z-index: 9999;
}
#loadingScreen.loadingScreen--hidden { opacity: 0; visibility: hidden; }

#loadingScreen__logo { width: 40vw; max-height: 45vh; z-index: 9999; }

#loadingScreen__logo__cpu { animation: animazioneCPU 1s forwards; transform-origin: center; animation-delay: .5s; }

#loadingScreen__logo .lineeLobo path { animation: animazioneLineeLobo 1s infinite alternate; animation-delay: .5s; }
#loadingScreen__logo .lineaLobo__sopra { transform-origin: bottom; }
#loadingScreen__logo .lineaLobo__destra { transform-origin: left; }
#loadingScreen__logo .lineaLobo__sinistra { transform-origin: right; }
#loadingScreen__logo .lineaLobo__sotto { transform-origin: top; }

#loadingScreen__logo .lobo { animation: animazioneLobo 1s infinite alternate; animation-delay: .5s; }
#loadingScreen__logo .lobo.dx { transform-origin: right; }
#loadingScreen__logo .lobo.sx { transform-origin: left; }

@keyframes animazioneCPU { 0% { fill: var(--disabledColor); } 60%, 100% { fill: var(--colorePrincipale); } }
@keyframes animazioneLineeLobo { 0%, 30% { fill: var(--disabledColor); } 100% { fill: var(--colorePrincipale); } }
@keyframes animazioneLobo { 0%, 30% { stroke: var(--disabledColor); } 100% { stroke: var(--colorePrincipale); } }

#loadingScreen__testo { color: var(--coloreSecondario); font-size: .5rem; }
/* stile loadingScreen */



/* stile navbar */
#header {
    background-color: var(--navbarColor);
    backdrop-filter: blur(4px);
    -webkit-backdrop-filter: blur(4px);
    position: fixed;
    top: 0;
    width: 100%;
    height: 4rem;
    padding-right: 1.5rem;
    transform: translateY(-4rem);
    opacity: 0;
    will-change: background-color, transform, opacity;
    transition: background-color .15s var(--transizioneColore) 250ms,
    transform .35s var(--transizioneSenzaRimbalzo) 300ms,
    opacity .35s var(--transizioneSenzaRimbalzo) 300ms !important;
    z-index: 100;
}

#header__spaceIconaMenu { visibility: hidden; display: flex; justify-content: flex-end; align-items: center; height: 100%; }

/* stile icona animata hamburger menu */
.container.top { transform: translateY(-4px) scaleX(.88235); will-change: transform; }
.container.bottom { transform: translateY(4px) scaleX(.88235); will-change: transform; }
#header__iconaMenu { will-change: transform; }
#header__iconaMenu:checked + label .container .line.bottom { transform: rotateZ(45deg); }
#header__iconaMenu:checked + label .container .line.top { transform: rotateZ(-45deg); }
#header__iconaMenu:checked + label .container.bottom { transform: translateY(0) scale(85%); }
#header__iconaMenu:checked + label .container.top { transform: translateY(0) scale(85%); }
#header__iconaMenu:checked + label .line.bottom { transform: translateY(0) scale(85%); transition-delay: 0.05s; }
#header__iconaMenu:checked + label .line.top { transform: translateY(0) scale(85%); transition-delay: 0.05s; }
.container { transition: transform 0.15s var(--transizioneSenzaRimbalzo) .05s; }
#header__iconaMenu:checked + label .container { transition-delay: 0s; }
.line { transition: transform 0.15s var(--transizioneSenzaRimbalzo); }
/* --- sopra animazioni e sotto parte grafica --- */
#header__iconaMenu__button { all: unset; cursor: pointer; display: block; }
#header__iconaMenu__button * { pointer-events: none; }
.burger { height: 20px; width: 27px; display: block; position: relative; }
.container { position: absolute; top: 9px; }
.line { height: 2px; border-radius: 3px; background: var(--disabledColor); width: 27px; }
#header__iconaMenu + label { cursor: pointer; }
#header__iconaMenu { display: none; }
/* stile icona animata hamburger menu */

#header__menu {
    color: var(--disabledColor);
    height: 100%;
    padding: 0;
    display: flex;
    justify-content: flex-end;
    align-items: center;
    gap: 1.5rem;
    border-radius: 0 0 1.5rem 1.5rem;
}

#header__menu a { padding: .25rem .5rem; cursor: pointer; transition: all .15s var(--transizioneSenzaRimbalzo); border-radius: 1.5rem; }

#header__menu a::before { display: block; content: attr(title); font-weight: bold; height: 0; overflow: hidden; visibility: hidden; }

#header__menu a.active { color: var(--colorePrincipale); font-weight: bold; }

@media (max-width: 600px) {
    #header.header__menu--open {
        background-color: var(--cardColor);
        transition: background-color .15s var(--transizioneSenzaRimbalzo) 0ms !important;
    }

    #header__menu {
        background-color: var(--cardColor);
        width: 100%;
        height: auto;
        transform: scaleY(0);
        transform-origin: top;
        position: absolute;
        top: 4rem;
        display: grid;
        grid-template-columns: repeat(1, auto);
        grid-template-rows: repeat(4, 1fr);
        gap: 2.5rem;
        justify-content: center;
        overflow: hidden;
        z-index: 100;
        opacity: 90%;
        transition: transform .35s var(--transizioneSenzaRimbalzo), opacity .15s var(--transizioneSenzaRimbalzo);
    }

    #header__menu a { padding: .5rem .8rem; opacity: 0; }

    #header__menu.header__menu--open {
        transform: scaleY(100%);
        padding: 2rem 0 3.5rem 0;
        transition: transform .35s var(--transizioneConRimbalzo);
        opacity: 100%;
    }
    
    #header__menu.header__menu--open a { opacity: 100%; }

    #header__spaceIconaMenu { visibility: visible; }
}
/* stile navbar */



/* stile homePage */
#homePage {
    height: 70vh;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    margin-top: 4rem;
}

#homePage__fotoPresentazione {
    width: 10rem;
    margin-bottom: 1rem;
    opacity: 0;
    transform: translateY(4rem);
    transition: transform .35s var(--transizioneSenzaRimbalzo), opacity .35s var(--transizioneSenzaRimbalzo) !important;
    transition-delay: 300ms !important;
}

#homePage__titolo { opacity: 0; transform: translateX(4rem); transition-delay: 650ms !important; padding: 0 4rem; }

#homePage__text {
    margin-top: 1rem;
    opacity: 0;
    transform: translateX(-4rem);
    transition-delay: 650ms !important;
}

@media (min-width: 1024px) { @media (max-height: 620px) { #homePage__fotoPresentazione { margin-top: 6vh; } } }
@media (max-height: 720px) {
    #homePage { height: auto; }
    #homePage__fotoPresentazione { margin-top: 5vh; }
    #homePage__titolo { transition-delay: 300ms !important; }
    #homePage__text { transition-delay: 300ms !important; }
}
/* stile homePage */



/* stile portfolioPage */
#portfolioPage { display: flex; justify-content: center; gap: 6.5vw; }

.portfolioPage__progetto {
    background-color: var(--cardColor);
    box-shadow: var(--coloreOmbra) 0px 5px 15px;
    width: 40vw;
    max-width: 480px;
    padding: 2rem;
    border-radius: 1.5rem;
    opacity: 0;
    transform: translateY(4rem);
}

.portfolioPage__progetto img { position: relative; width: 100%; border-radius: 1.5rem; }

.portfolioPage__progetto p { margin: 1rem 0 2rem 0; }

@media (max-width: 1024px) {
    #portfolioPage { flex-direction: column; align-items: center; gap: 3rem; }
    .portfolioPage__progetto { width: 60vw; max-width: 24rem; }
}
@media (max-width: 600px) { .portfolioPage__progetto { width: 80vw; min-width: 20rem; } }
/* stile portfolioPage */



/* stile cvPage */
#cvPage__titolo { opacity: 0; transform: translateX(-4rem); }

#cvPage__text { margin-top: 1rem; margin-bottom: 1.5rem; opacity: 0; transform: translateX(4rem); }

.cvPage__spazioCompetenze {
    background-color: var(--cardColor);
    box-shadow: var(--coloreOmbra) 0px 5px 15px;
    border-radius: 1.5rem;
    width: 86.5vw;
    max-width: calc(960px + 6.5vw);
    padding: 1.8rem;
    margin: auto;
    opacity: 0;
    transform: translateY(4rem);
}

.competenze__spazioCompetenze {
    display: grid;
    grid-template-columns: repeat(10, auto);
    grid-template-rows: repeat(2, 1fr);
    gap: 1.8rem;
    margin: 2rem 0 2.3rem 0;
    justify-content: center;
}

.cv__iconaCompetenze { width: 2.5rem; }

@media (max-width: 1024px) {
    .cvPage__spazioCompetenze { width: 24rem; }
    #spazioCompetenze__testo { margin-bottom: 1.5rem; }
    .competenze__spazioCompetenze { grid-template-columns: repeat(5, auto); grid-template-rows: repeat(4, 1fr); }
}
@media (max-width: 480px) {
    .cvPage__spazioCompetenze { width: 20rem; }
    .competenze__spazioCompetenze { gap: 1.4rem; }
    .cv__iconaCompetenze { width: 2.2rem; }
}
/* stile cvPage */



/* stile contattiPage */
#contattiPage__titolo { opacity: 0; transform: translateX(4rem); }

#contattiPage__text { margin-top: 1rem; margin-bottom: 1.5rem; opacity: 0; transform: translateX(-4rem); }

.contattiPage__socialSpace {
    display: grid;
    grid-template-columns: repeat(3, 13.5rem);
    grid-template-rows: repeat(2, 1fr);
    gap: 2rem;
    justify-content: center;
}

.socialSpace__social {
    background-color: var(--cardColor);
    box-shadow: var(--coloreOmbra) 0px 5px 15px;
    border-radius: 1.5rem;
    padding: .5rem .65rem;
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 13.5rem;
    opacity: 0;
    transform: translateY(4rem);
}

.socialSpace__social:nth-child(2).mostrato { transition-delay: 400ms !important; }
.socialSpace__social:nth-child(3).mostrato { transition-delay: 500ms !important; }
.socialSpace__social:nth-child(4).mostrato { transition-delay: 600ms !important; }
.socialSpace__social:nth-child(5).mostrato { transition-delay: 700ms !important; }
.socialSpace__social:nth-child(6).mostrato { transition-delay: 800ms !important; }

.social__socialIcon { width: 2.5rem; cursor: pointer; }
.social__socialIcon:active { transform: scale(0.95); }

.contattiPage__emailSpace { display: flex; justify-content: center; align-items: center; margin-top: 2rem; }

.contattiPage__emailBox {
    background-color: var(--cardColor);
    box-shadow: var(--coloreOmbra) 0px 5px 15px;
    border-radius: 1.5rem;
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 1.8rem;
    padding: .5rem .5rem .5rem 1.8rem;
    opacity: 0;
    transform: translateY(4rem);
}

.contattiPage__emailBox.mostrato{ transition-delay: 900ms !important; }

@media (max-width: 1024px) {
    .contattiPage__socialSpace { grid-template-columns: repeat(2, 13.5rem); grid-template-rows: repeat(3, 1fr); }
    .socialSpace__social:nth-child(2).mostrato { transition-delay: 400ms !important; }
    .socialSpace__social:nth-child(3).mostrato { transition-delay: 300ms !important; }
    .socialSpace__social:nth-child(4).mostrato { transition-delay: 400ms !important; }
    .socialSpace__social:nth-child(5).mostrato { transition-delay: 300ms !important; }
    .socialSpace__social:nth-child(6).mostrato { transition-delay: 400ms !important; }
    .contattiPage__emailBox { flex-direction: column; width: 24rem; gap: 1.5rem; padding: 2rem 0; }
    .contattiPage__emailBox.mostrato{ transition-delay: 500ms !important; }
}
@media (max-width: 720px) {
    .contattiPage__socialSpace { grid-template-columns: repeat(1, 13.5rem); grid-template-rows: repeat(6, 1fr); gap: 1.5rem; }
    .socialSpace__social:nth-child(2).mostrato { transition-delay: 300ms !important; }
    .socialSpace__social:nth-child(3).mostrato { transition-delay: 300ms !important; }
    .socialSpace__social:nth-child(4).mostrato { transition-delay: 300ms !important; }
    .socialSpace__social:nth-child(5).mostrato { transition-delay: 300ms !important; }
    .socialSpace__social:nth-child(6).mostrato { transition-delay: 300ms !important; }
    .contattiPage__emailSpace { margin-top: 1.5rem; }
    .contattiPage__emailBox.mostrato{ transition-delay: 300ms !important; }
}
@media (max-width: 480px) {
    .contattiPage__emailBox { width: 20rem; gap: 1.4rem; }
}
/* stile contattiPage */



/* stile modalPopUp */
#modalPopUp {
    transition: all .1s var(--transizioneColore);
    z-index: 50;
    position: fixed;
    top: 0;
    left: 0;
    height: 100%;
    width: 100%;
    visibility: hidden;
}
#modalPopUp.modalPopUp--open { backdrop-filter: blur(4px); background-color: var(--modalColor); visibility: visible; }
/* stile modalPopUp */