style_v2024.css

body,ul,p,h1,h2,h3,h4,h5,em,li,a, hr, footer, button {
    margin: 0;
    padding: 0;
    list-style: none;
    text-decoration: none;
    color: inherit;
    font-size: unset;
    line-height: 1.5;
  }

  button {
    border: none;
    margin: 0;
    text-decoration: none;
    cursor: pointer;
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
}

@import url('https://fonts.googleapis.com/css2?family=Gemunu+Libre:wght@200..800&family=Inter:wght@100..900&display=swap');

@font-face {
    font-family: 'PP Editorial New';
    font-style: normal;
    src: url(./font/PPEditorialNew-Regular.otf) format('otf');
  }

@font-face {
  font-family: 'PP Editorial New';
  font-style: italic;
  src: url(./font/PPEditorialNew-Italic.otf) format('otf');
}

/* variable */
:root {
    --background-color: #fff;
    --text-color: #221D1D;
    --color-hover: #ff0000;
    --placeholder: #e1e1e1;
    --global-theme-toggle-content: '🌞 DAY';
    scroll-behavior: smooth; 
    --gapM: 2rem;
    --gapS: 1rem;
  }
  
  /* dark theme*/
  html[data-theme='dark'] {
    --background-color: #000;
    --text-color: #fff;
    --color-hover: #ff0000;
    --placeholder: #333333;
    --global-theme-toggle-content: '🌝 NIGHT';
  }
  
  /* css */
  html {
    font-family: "Inter", sans-serif;
    font-weight: normal;
    box-sizing: border-box;
    color: var(--text-color);
    background: var(--background-color);
    font-size: 16px;
    /* transition: 3s ease, color 1s ease; */
  }
 
body{
    display: flex;
    width: 100dvw;
    flex-direction: column;
    align-items: flex-start;
}

.gridColumns{
    display: grid;
    grid-template-columns: repeat(14, 1fr);
    gap: var(--gap);
}

header{
    color: #221D1D;
    font-size: 0.75rem;
    font-style: normal;
    font-weight: 500;
    line-height: 90%; /* 10.8px */
    text-transform: uppercase;
    width: max-content;
    width: 100dvw;
    padding: 2.5rem 0 2.5rem ;
}

.containerNav{
    grid-column: 2 / span 12;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

nav {
    display: flex;
    align-items: center;
    gap: 8rem;
}

h1{
    color: var(--text-color);
    font-size: 8rem;
    font-style: normal;
    font-weight: 400;
    line-height: 90%; /* 115.2px */
    text-transform: uppercase;
}

h1 > span > span > span{
    color: var(--text-color);
    font-family: "PP Editorial New";
    font-style: italic;
    font-size: 7.5rem;
}

h2{
    color: #221D1D;
    font-size: 6rem;
    font-style: normal;
    font-weight: 400;
    line-height: 92%; /* 5.52rem */
    text-transform: uppercase;
}

h3 {
    text-transform: uppercase;
    font-size: 1rem;
}

h4{
    color: #221D1D;
    font-size: 0.75rem;
    font-style: normal;
    font-weight: 400;
    line-height: 90%; /* 0.675rem */
}

#logo{
    display: flex;
    align-items: center;
    gap: 10px;
    font-weight: 700;
}

.container{
    width: 100%;
    height: 100%;
    justify-content: center;
    display: flex;
    flex-direction: column;
}

#hero{
    width: 100%;
    gap: 32px;
    display: grid;
    grid-template-columns: repeat(14, 1fr);
    grid-template-rows: repeat(7, 1fr);
}

#heroTitle{
    grid-column: 2 / span 6;
    grid-row: 1 / span 4;
    z-index: 1;
}

.heroImg{
    display: flex;
    flex-direction: column;
    gap: 10px;
    width: 100%;
}

#heroImgS{
    grid-column: 4 / span 4;
    grid-row: 3 / span 5;
}

#heroImgL{
    grid-column: 8 / span 6;
    grid-row: 1 / span 6;
}

#imgS{
    flex: auto;
    background-image: url(img/dinamo_cover.png);
    background-size: cover;
    background-position: center;
}

#imgL{
    flex: auto;
    background-image: url(img/jaguar_cover.png);
    background-size: cover;
    background-position: center;
}

#imgI{
    flex: auto;
    background-image: url(img/hugo.webp);
    background-size: cover;
    background-position: center;
}

.heroImgText{
    display: flex;
    justify-content: space-between;
    align-items: flex-start;

    color: #221D1D;
    font-size: 1rem;
    font-style: normal;
    font-weight: 400;
    line-height: 110%; /* 17.6px */
    text-transform: uppercase
    ;
}

.heroImgLegende{
    display: flex;
    gap: 10px;
    justify-content: space-between;
}

.heroImgText > a:hover{
    color: #ff0000;
}

#block-1{
    grid-template-areas: ". . text text text . list list list list list list . .";
    align-items: flex-start;
}

.block-1-text{
    grid-area: text;
}

.CTA{
    padding: 0.875rem 1rem;
    justify-content: center;
    align-items: center;
    gap: 0.625rem;
    border-radius: 3.125rem;
    background: #221D1D;
    color: #FFF;
    font-size: 0.75rem;
    font-style: normal;
    font-weight: 400;
    line-height: 115%; /* 0.8625rem */
    width: fit-content;
    text-transform: uppercase;
    margin-top: 1rem;
}

.CTA:hover{
    background-color: white;
    color: black;
    -webkit-box-shadow:inset 0px 0px 0px 1.2px #222;
    -moz-box-shadow:inset 0px 0px 0px 1.2px #222;
    box-shadow:inset 0px 0px 0px 1.2px #222;
}

.block-1-list{
    display: flex;
    grid-area: list;
    gap: 2rem;
}

.block-1-list > ul {
    flex: 1;
    gap: 2rem;
    display: flex;
    flex-direction: column;
}

.block-1-list ul > li > p > span {
    color: #221D1D;
    font-size: 3rem;
    font-style: normal;
    font-weight: 400;
    line-height: 92%; /* 2.76rem */
}

.block-2-title{
    display: flex;
    flex: auto;
    align-items: flex-start;
    justify-content: space-between;
    grid-column: 2 / span 11;
}

.block-2-hero{
    display: flex;
    grid-column: 3 / 13;
}

.oblong{
    display: flex;
    padding: 0.5rem 1rem;
    align-items: flex-start;
    gap: 0.625rem;

    font-size: 0.75rem;
    line-height: 1;
    border-radius: 4rem;
    border: 1px solid #aaaaaa;
    text-transform: uppercase;

    color: #565656;
    }

.block-2-hero-item{
    display: flex;
    flex: auto;
    width: 10px;
    gap: 1.25rem;
    flex-direction: column;
}

.block-2-hero-item-img {
    max-width: 100%;
    aspect-ratio: 16/10;
    background-position: center;
}

#workItem2{
    flex: auto;
    background-image: url(img/dinamo_cover.png);
    background-size: cover;
    background-position: center;
}

#workItem1{
    flex: auto;
    background-image: url(img/jaguar_cover.png);
    background-size: cover;
    background-position: center;
}

.block-2-list{
    text-decoration: none;
    grid-column: 3 / span 10;
}

.block-2-list > li {
    display: flex;
    padding: 1.875rem;
    justify-content: space-between;
    align-items: flex-start;
    align-self: stretch;

    border-top: 1px solid #000;

    background-size: 100% 200%;
    background-image: linear-gradient(to bottom, white 50%, black 50%);
    -webkit-transition: background-position 0.5s ease-in-out;
    -moz-transition: background-position 0.5s ease-in-out;
    transition: background-position 0.5s ease-in-out;
}

.block-2-list > li > h3 {
    font-size: 2rem;
    font-style: normal;
    font-weight: 400;
    line-height: 90%; /* 1.8rem */
}

.block-2-list > li > p {
    font-size: 2rem;
    font-style: normal;
    font-weight: 400;
    line-height: 90%; /* 1.8rem */
}

#block-4{
    padding: 11.25rem 0 11.25rem;
}

.block-4-text{
    grid-column: 8 / span 4;
    grid-row: 1;
    display: flex;
    gap:var(--gap);
    flex-direction: column;
    align-items: flex-start;
}

#imgAboutMe{
    background: url(img/hugo.webp);
    background-size: cover;
    background-position: bottom;
}

.block-4-img{
    grid-column: 3 / span 4;
    height: auto;
    width: 100%;
    aspect-ratio: 1;
}

footer{
    width: 100%;
    padding-top: 11.25rem;
}

.CTABig{
    border-radius: 360rem;
    border: solid 1px black;
    display: flex;
    color: black;
    justify-content: space-between;
    color: #000;
    font-size: 8rem;
    font-style: normal;
    font-weight: 400;
    line-height: 90%; /* 7.2rem */
    grid-column: 2 / span 12;
    padding: 4rem 6rem;
    text-transform: uppercase;

    background-size: 200% 100%;
    background-image: linear-gradient(to right, white 50%, black 50%);
    -webkit-transition: background-position 0.25s ease-in-out;
    -moz-transition: background-position 0.25s ease-in-out;
    transition: background-position 0.25s ease-in-out;
}

.CTABig:hover{
    background-position: -100% 0;
    color: white;
}

.footerCredit{
    grid-column: 2 / span 12;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    align-self: stretch;
}

.footerCredit > p {
    color: #000;
    font-size: 1rem;
    font-style: italic;
    font-weight: 400;
    line-height: 110%; 
    width: 100%;
    border-bottom: solid 1px black;
    padding: 1.2rem 0;
}

.footerCredit > p > span {
    font-weight: 700;
    font-style: normal;
}

.footerCredit > div {
    display: flex;
    flex-direction: row;
    color: #000;
    font-size: 0.75rem;
    font-style: normal;
    font-weight: 400;
    line-height: 110%; /* 0.825rem */
    text-transform: uppercase;
    width: 100%;
    justify-content: space-between;
    padding: 1.2rem 0;
}

#nav_clock_date{
    font-weight: 700;
}


@media (max-width: 576px) {

.gridColumns{
    display: grid;
    grid-template-columns: repeat(14, 1fr);
}

h1{
    font-size: 6rem;
}

h2{
    font-size: 4rem;
}

#block-2{
    display: flex;
    flex-direction: column;
}

}

.block-2-list > li:hover {
    background-position: 0 -100%;
    color: white;
}

.ctahover {
    background-size: 200% 100%;
    background-image: linear-gradient(to right, black 50%, white 50%);
    -webkit-transition: background-position 0.25s ease-in-out;
    -moz-transition: background-position 0.25s ease-in-out;
    transition: background-position 0.25s ease-in-out;
}

.ctahover:hover{
    background-position: -100% 0;
    color: black;
}

.CTAHero{
    transition: all 300ms ease-out;
    display: inline-block;
    position: relative;
}

.CTAHero:after{
    content: "↗";
    position: absolute;
    transition: all 300ms ease-out;
    display: inline-block;
    right: 0;
    transform: translate(-10px, 10px);
    opacity: 0%;
}

.CTAHero:hover::after {
    transform: translate(0px, 0px);
    opacity: 100%;
}

.CTAHero:before{
    content: "↗";
    position: absolute;
    transition: all 300ms ease-out;
    display: inline-block;
    right: 0;
    opacity: 100%;
}

.CTAHero:hover::before {
    transform: translate(10px, -10px);
    opacity: 0%;
}

.CTAHero > span{
    opacity: 0%;
}

/* animation class and keyframes */
.overflow-hidden {
    overflow: hidden;
    display: flex;
}
   
.drop-in {
    animation: drop-in 1s ease 200ms backwards;
}
   
.drop-in-2 {
 animation: drop-in 1200ms ease 300ms backwards;
}

@keyframes drop-in {
from {
     opacity: 0;
     transform: translateY(100px);
}
to {
     opacity: 1;
     transform: translate(0px);
}
}
   
.heroSite{
    height: 100dvh;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
}

.footerColumns{
    grid-column: 2 / span 12;
    display: flex;
    justify-content: space-between;
    gap: var(--gap);
    padding-bottom: calc(var(--gapM) * 2);
}

.footerColumnsMain{
    display: flex;
    flex-direction: row;
    flex: 1;
    justify-content: space-between;
    gap: var(--gap);
}

.footerColumnsSecond{
    display: flex;
    flex: 1;
    flex-direction: column;
    align-items: flex-end;
    gap: 0.5rem;
}

.footerColumnsItems{
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    flex: 1;
}

.footerColumnsItems > h4{
    padding-bottom: 0.5rem;
    text-transform: uppercase;
}

.footerColumnsItems > ul > li {
    text-transform: uppercase;
    font-weight: 700;
    line-height: 110%;
}

.footerColumnsItems > a > sup{
    font-size: 0.6rem;
    font-style: normal;
    font-weight: 300;
    vertical-align: text-top;
}

.uppercase{
    text-transform: uppercase;
}

.footerColumnsSecond > div > a {
    display: flex;
    width: 2.25rem;
    height: 2.25rem;
    justify-content: center;
    align-items: center;
    gap: 0.625rem;
    background-color: #000;
    border-radius: 200rem;
}

.footerColumnsSecond > div {
    flex-direction: row;
    display: flex;
    gap: 0.25rem;
}

.heroImgLegende > h3 {
    text-transform: uppercase;
}

.mouse{
    display: flex;
    align-items: center;
    justify-content: center;
    padding-bottom: 2.5rem;
    flex-direction: column;
    text-transform: uppercase;
    font-size: 0.75rem;
    gap: 0.5rem;
}

.heroTitleText{
    width: calc(50% - 1rem);
}

.paddingL{
    padding: 11.25rem 0 11.25rem;
}

.paddingM{
    padding: 5.625rem 0 5.625rem;
}

.paddingS{
    padding: 2rem 0 2rem 0;
}

.gapS{
    gap: var(--gapS);
}

.gapM{
    gap: var(--gapM);
}

.gapL{
    gap: calc(var(--gapM) * 2);
}

.gapXL{
    gap: calc(var(--gapM) * 4);
}

.gridColumns14{
    display: grid;
    grid-template-columns: repeat(14, 1fr);
}

.gridColumns10{
    display: grid;
    grid-template-columns: repeat(10, 1fr);
}

.gridColumns12{
    display: grid;
    grid-template-columns: repeat(12, 1fr);
}


.block-3-gallery{
    grid-column: 3 / 9;
    display: flex;
    height: fit-content;
}

.block-3-gallery > img {
    width: 100%;
    aspect-ratio: 1;
    background-color: #eee;
}

.gridColumns6{
    display: grid;
    grid-template-columns: repeat(6, 1fr);
}

.block-3-title{
    display: flex;
    flex-direction: column;
}

.flexColumn{
    display: flex;
    flex-direction: column;
}

.flexRow{
    display: flex;
    flex-direction: row;
}

.project{
    grid-column: 3 / span 10;
}

.project:nth-child(1) > .projectImg{
    width: auto;
    aspect-ratio: 2.77 / 1;
    background-color: grey;
    background-image: url(img/jaguar_cover.png);
    background-position: center;
    background-size: cover;
}

.project:nth-child(2) > .projectImg{
    height: auto;
    aspect-ratio: 1.75 / 1;
    background-color: grey;
    background-image: url(img/jaguar_cover.png);
    background-position: center;
    background-size: cover;
}

.flex1{
    flex: 1;
}

.rowgapXL{
    row-gap: calc(var(--gapM) * 6);
}

.spacebetween{
    justify-content: space-between;
}

.grid6{
    grid-column: span 6;
}

.grid4{
    grid-column: span 4;
}

.grid5{
    grid-column: span 5;
}

.grid10{
    grid-column: span 10;
}

.grid12{
    grid-column: span 12;
}

.smallproject > .projectImg{
    width: auto;
    aspect-ratio: 1.75 / 1;
    background-color: grey;
    background-image: url(img/jaguar_cover.png);
    background-position: center;
    background-size: cover;
}

.smallproject h2 {
    font-size: 3rem;
}

.projectTitle{
    grid-column: 2 / span 12;
}

.projectTitle > p{
    font-size: 8rem;
    line-height: 90%;
    text-transform: uppercase;
}

.imgHover:hover{
    filter: saturate(200%);
}

.paddingBotM{
    padding-bottom: 5.625rem;
}