@font-face { font-family: Roboto; src: url("/font/Roboto-VariableFont_wdth_wght.ttf"); } @font-face { font-family: reenie beanie; src: url("/font/ReenieBeanie-Regular.ttf"); } @font-face { font-family: poppins; src: url("/font/Poppins-Medium.ttf"); } * {box-sizing: border-box;} /* /////////////// BASIC STYLING ////////////////////////// */ body { color: rgb(255,0,0); background-color: rgb(255, 255, 255); font-family: Roboto; font-size: 1rem; font-weight: 400; line-height: 1.10; } .wrapper { max-inline-size: 1400px; margin-inline: auto; position: relative; z-index: 1; } img, video { display: block; max-inline-size: 100%; max-block-size: fit-content; } canvas { display: block; max-inline-size: 100%; max-block-size: fit-content; } /* CANVAS */ #canvas-container { position: sticky; top: 0; } /* BACKGROUND color transition */ .bg-color { /* color and background color are set as data attributes in */ transition: color 0.4s ease-in-out, background-color 0.4s ease-in-out; } /* /////////////// PAGES GRID ////////////////////////// */ /* BODY - GRID */ .wrapper { display: grid; grid-template-columns: 1fr 1.7fr 1fr; grid-template-rows: auto auto auto; gap: 3em 2em; grid-template-areas: "home home-txt about" "main main main" "footer footer footer"; } .wrapper-about { display: grid; grid-template-columns: 1fr 1.7fr 1fr; grid-template-rows: auto auto 1fr; gap: 3em 2em; grid-template-areas: "home profile-pic about" "main main main" ". footer ."; } #home { grid-area: home; } #home-txt { grid-area: home-txt; } #profile-pic { grid-area: profile-pic; } #mob-profile-pic { display: none; } #about { grid-area: about; } main { grid-area: main; } footer { grid-area: footer; } /* HOME - GRID */ .home-grid { display: grid; grid-template-columns: 1fr 1.7fr 1fr; grid-template-rows: auto 100svh; gap: 2em; grid-template-areas: "menu . contacts" ". . ."; } .menu { grid-area: menu; } .contacts { grid-area: contacts; } .content { grid-area: content; } .canvas_instrucitons { max-inline-size: 1400px; position: absolute; left:0; right:0; bottom: 5px; } .instructions { margin: 0; text-align: center; font-size: 0.8rem; font-weight: 500; animation: fade-out linear; animation-timeline: view(); } @keyframes fade-out { to {opacity: 0;} 25% { opacity:0;} } .footer-grid { display: grid; grid-template-columns: 1fr 0.85fr 0.85fr 1fr; grid-template-rows: 90svh auto; gap: 2em; grid-template-areas: ". . . ." "call call footer-top-arrow contacts"; } .call { grid-area: call; } .call p, .call a{ margin-block: 0; } .call a { text-decoration: underline; } #footer-top-arrow { grid-area: footer-top-arrow; } footer .contacts { margin-block: 0; } /* ABOUT - GRID */ .about-grid { display: grid; grid-template-columns: 1fr 1.7fr 1fr; grid-template-rows: auto auto; gap: 2em; grid-template-areas: "menu about-txt contacts" ". content ."; } #about-txt { grid-area: about-txt; } /* PROJ - GRID */ .proj-grid { display: grid; grid-template-columns: 1fr 1.7fr 1fr; grid-template-rows: auto auto auto; gap: 2em; grid-template-areas: ". proj-title ." "proj-details proj-text proj-tags" "proj-media proj-media proj-media"; } .proj-title { grid-area: proj-title; } .proj-media { grid-area: proj-media; } .proj-text { grid-area: proj-text; } .proj-details { grid-area: proj-details; } .proj-tags { grid-area: proj-tags; } .proj-title { display: grid; grid-template-columns: 1fr auto; grid-template-rows: auto; } .proj-title h2 { grid-column: 1; } .proj-title p { grid-column: 2; } /* /////////////// CONENT STYLING ////////////////////////// */ /* HOME */ h1, h2 { font-size: 1.2rem; font-weight: 700; } h3 { font-size: 1rem; font-weight: 700; } p { font-size: 1rem; line-height: 1.10; } .note { font-size: 0.8rem; font-weight: 500; line-height: 4; text-align: right; } .button, #home-txt { margin-block: 0em; } a { color: inherit; text-decoration: none; } .curriculum-list a { text-decoration: underline; } a:hover { background-color: red; color: white } .button { font-size: 1.2rem; font-weight: 700; position: sticky; top: 0; margin-block-end: auto; } .proj-title h2 { margin: 0; } #home { margin-inline-end: auto; } .project-list { margin: 0 0 auto 0; } .project-list ol { padding-inline-start: 0; margin-block-start: 0; list-style-position: inside; } .skill-list { margin: auto 0; margin-block-start: 0; } .skill-list ol { list-style-type: none; padding: 0; } .curriculum-list { margin-block-start: 4em; } .content ul { list-style-type: none; margin-block-start: 0; padding-inline-start: 0; } .contacts, #about { margin-inline: auto 0; display: flex; flex-direction: column; text-align: end; } .contacts a { margin-inline-start: auto; } /* ABOUT */ .prof-pic { margin-inline: auto; } .about-grid p, .skill-list ol{ margin-block-start: 0; } .note_about p{ margin: 0; } /* PROJ */ .proj-title { margin-block: 0 1em; position: sticky; top: 0; } .close_x { margin-block: 0; font-weight: 400; font-size: 1.3rem; text-align: end; } .proj-media video { margin: auto; max-inline-size: 70%; margin-block: 10em; } .proj-tags { text-align: end; } h3 { margin-block-end: 0.3em; } .details-tags p { margin: 0; } /* STAR /////////////////////////////////////////////////////////*/ .star-collection { display: grid; grid-template-columns: repeat(8, 1fr); gap: 0.5em; margin-block: 5em; } .star-collection img { margin-block: auto; } .ticket-photo { display: flex; flex-direction: row; flex-wrap: nowrap; gap: 2em; justify-content: center; margin-block: 10em; margin-inline: 2em; } .ticket-photo img { max-height: 80svh; } .star-scan { max-inline-size: 30%; } .star-photo { max-inline-size: 70%; } .star-process { margin-block: 10em; display: grid; } .star-process img { max-block-size: 100svh; margin-inline: auto; } /* SENTIMENTOS PERIPATETICOS /////////////////////////////////////////////////////////*/ .sent_cover_img { margin-block-start: 2em; margin-block-end: 20em; } #sentimentos-layout-grid { margin-block: 20em; display: grid; grid-template-columns: 1fr 3fr 1fr; grid-template-rows: auto; grid-template-areas: 'cover sent-layout-gif backcover'; align-items: center; } #cover{ grid-area: cover; } #sent-layout-gif{ grid-area: sent-layout-gif; } #backcover{ grid-area: backcover; } #sent-layout-gif{ margin: auto; height: auto; max-width: 100%; } /* sent-slides */ .slideshow { margin-block: 20em; display: grid; grid-template-columns: 1fr 5fr 1fr; grid-template-rows: 50svh; grid-template-areas: 'prev slides next'; align-items: center; } .prev { grid-area: prev; } .slides { grid-area: slides; } .next { grid-area: next; } .slides { min-width: 0; /* dont remove - this ensures that on mobile (safari) the imges are centered */ } .slideshow_slides_img { display: block; margin: auto; max-width: 100%; height: auto; min-width: 0; /* dont remove anything here - this ensures that on mobile (safari) the imges are centered */ } .slideshow img { display: none; max-width: 70%; max-height: 70svh; justify-self: center; } img.displaySlide{ display: block; } .prev { justify-self: end; font-weight: 200; font-size: 2rem; } .next { justify-self: start; font-weight: 200; font-size: 2rem; } /* sent-slideshow AUTO */ .sent_slideshow_auto { margin-block: 10em; display: grid; place-items: center; height: 100svh; } .sent_slideshow_auto img { display: none; max-width: 100%; } /* CORA /////////////////////////////////////////////////////////*/ /* imgs grid */ .img-grid { display: grid; grid-template-columns: repeat(8, 1fr); grid-template-rows: repeat(14, 100px); grid-gap: 4em; } #cora_beach { grid-column: 2 / 5 ; grid-row: 1; } #cora_2bottles { grid-column: 5 / 9; grid-row: 3; } #cora_cartas_cacifo { grid-column: 1 / 4; grid-row: 6; } #label-gif { grid-column: 3 / 7; grid-row: 11; } .img-grid video { max-inline-size: 100%; margin-block: auto; } .caption { font-family: poppins; font-weight: 500; color: #e4051f; font-size: 0.9rem; margin-inline: 20px; margin-block: 0.3em; opacity: 0%; } .cora_handwritten { font-family: reenie beanie; color: #e4051f; font-size: 1.5rem; } .caption_right { text-align: right; } .img_and_caption:hover .caption { opacity: 100%; } /* poster side by side */ .posters_grid { max-width: 80%; display: grid; grid-template-columns: repeat(2, 1fr); grid-gap: 10px; justify-self: center; } .posters_grid img { max-height: 95svh; } /* cora - slides */ .story_slideshow { background-color: rgb(0, 0, 0); margin-block: 10em; margin-inline: auto; max-width: 100%; display: grid; grid-template-columns: 1fr 15fr 1fr; grid-template-rows: auto; align-items: center; } .story_slideshow .prev { grid-column: 1 / 2; grid-row: 1 ; z-index: 1; } .story_slideshow .next { grid-column: 3 / 4; grid-row: 1 ; } .story_slides{ grid-column: 1 / 4 ; grid-row: 1 ; } .story_slideshow ul { padding: 0; margin: 0; } .story_slideshow li { display: none; display: grid; list-style: none; grid-template-rows: calc(80svh - 3em) calc(15svh - 3em); align-items: center; height: 95svh; padding: 3em; } .story_slideshow img { justify-self: center; max-height: 70svh; max-width: 80%; object-fit: contain; } .story_slideshow p { justify-self: center; max-width: 550px; color: white; text-align: center; font-size: 1.5rem; font-weight: 400; line-height: 1.3; } .cora_album_grass p, .cora_pack p{ background-color: black; } .cora_open_letter img{ align-self: last baseline; } .cora_bw_photo img { max-height: 60svh; } .cora_time_capsule video{ border-radius: 6px; max-height: 50svh; } .cora_pack { background-color: #000; background-size: cover; } .cora_album_red { background-color: #e4051f; } .cora_album_grass img { max-height: 60svh; } .cora_album_grass { background-image: url(/assets/cora/grass.jpg); background-size: cover; } .story_slideshow a { color: white; } li.displaySlide{ display: grid; } /* DESENHOS TIPOGRÁFICOS /////////////////////////////////*/ .des_tip_cover { overflow: hidden; display: grid; grid-template-columns: 1fr 1fr; gap: 0; margin: 0; } #des_tip_layout { margin: 0 auto; max-block-size: 90svh; max-inline-size: 100%; } /* FOOTER */ .top-arrow { margin-block: 0; font-weight: 200; font-size: 2rem; text-align: end; } /* / MOBILE grid AND style ///////////////////////////////// */ /* MOBILE VERSION */ @media (max-width: 900px) { .wrapper { display: grid; grid-template-columns: 1fr 3fr 1fr; grid-template-rows: auto auto auto; gap: 2em 1em; grid-template-areas: "home home-txt about" "main main main" "footer footer footer"; } .wrapper-about { display: grid; grid-template-columns: 1fr 0.85fr 0.85fr 1fr; grid-template-rows: auto auto auto; gap: 2em 1em; grid-template-areas: "home profile-pic profile-pic about" "main main main main" ". footer footer ."; } #mob-profile-pic { display: none; } /* home */ .home-grid { display: grid; grid-template-columns: 1fr 1fr 1fr 1fr; grid-template-rows: auto 100svh; gap: 1em; grid-template-areas: "menu menu contacts contacts" ". . . ."; } /* about */ .about-grid { display: grid; grid-template-columns: 1fr 0.85fr 0.85fr 1fr; grid-template-rows: auto auto auto; gap: 1em; grid-template-areas: "menu menu contacts contacts" ". about-txt about-txt ." ". content content ."; } .skill-list, .about_contacts { margin-block: 1em auto; } .curriculum-list { margin-block-start: 1em; } /* projects */ .proj-grid { display: grid; grid-template-columns: 1fr 1fr 1fr 1fr 1fr; grid-template-rows: auto auto auto auto; gap: 1em; grid-template-areas: ". proj-title proj-title proj-title ." ". proj-text proj-text proj-text ." "proj-details proj-details . proj-tags proj-tags" "proj-media proj-media proj-media proj-media proj-media"; } .proj-title { margin-block: 0 1em; } .star-collection { display: grid; grid-template-columns: repeat(6, 1fr); gap: 0.5em; margin-block: 3em; } .ticket-photo, .star-process, .proj-media video{ margin-block: 3em; } .proj-media video { max-inline-size: 100%; } /* sentimentos */ #sentimentos-layout-grid { margin-block: 20em; } .slideshow { margin-block: 20em; grid-template-columns: 1fr 5fr 1fr; } .slideshow img { max-width: 90%; } .sent_slideshow_auto { margin-block-start: 20em; margin-block-end: 5em; height: 60svh; } /* cora */ .img-grid { grid-gap: 2em; } .img-grid video { max-inline-size: 100%; margin-block: auto; } .posters_grid { max-width: 100%; } .story_slideshow img { max-height: 60svh; max-width: 90%; } .cora_pack img { max-width: 110%; } .cora_open_letter img{ max-width: 80%; align-self: center; } .story_slideshow p { max-width: 400px; font-size: 1.2rem; font-weight: 400; line-height: 1.3; } .footer-grid { display: grid; grid-template-columns: 1fr 1.5fr 1.5fr 1fr; grid-template-rows: 90svh auto; gap: 1em; grid-template-areas: ". . . ." "call call call footer-top-arrow"; } footer .contacts { display: none; } } @media (max-width: 500px) { .wrapper { display: grid; grid-template-columns: 1fr 1fr; grid-template-rows: auto auto; gap: 1em; grid-template-areas: "home about" "home-txt home-txt" "main main" "footer footer"; } .wrapper-about { display: grid; grid-template-columns: 1fr 1fr; grid-template-rows: auto auto; gap: 1em; grid-template-areas: "home about" "main main" "footer footer"; } #profile-pic { display: none; } /* home */ .home-grid { display: grid; grid-template-columns: 1fr 1fr; grid-template-rows: auto 100svh; gap: 0.5em; grid-template-areas: "contacts contacts" "menu menu" ; } .canvas_instrucitons { display: none; } /* about */ .about-grid { display: grid; grid-template-columns: 1fr 1fr; grid-template-rows: auto auto; gap: 1em; grid-template-areas: "about-txt about-txt" "mob-profile-pic mob-profile-pic" "menu contacts" "content content"; } #mob-profile-pic { display: block; grid-area: mob-profile-pic; margin-inline: auto; } .skill-list, .about_contacts { margin-block: 1em auto; } .curriculum-list { margin-block-start: 1em; } /* projects */ .proj-grid { display: grid; grid-template-columns: 1fr 1fr; grid-template-rows: auto auto auto auto; gap: 1em; grid-template-areas: "proj-title proj-title" "proj-text proj-text" "proj-details proj-tags" "proj-media proj-media"; } .proj-title { margin-block: 1em 0; position: sticky; top: 20px; } .star-collection { display: grid; grid-template-columns: repeat(4, 1fr); gap: 0.5em; margin-block: 3em; } .ticket-photo, .star-process, .proj-media video{ margin-block: 3em; } .proj-media video { max-inline-size: 100%; } /* sentimentos */ #sentimentos-layout-grid { margin-block: 3em; display: grid; grid-template-columns: auto; grid-template-rows: auto auto auto; grid-template-areas: 'cover' 'sent-layout-gif' 'backcover'; justify-items: center; } #cover, #backcover { max-width: 50%; } #cover { justify-self: start; } #backcover { justify-self: end; } .sent_cover_img { margin-block-start: 2em; margin-block-end: 10em; } #sentimentos-layout-grid { margin-block: 10em; } .slideshow { margin-block: 10em; grid-template-columns: 1fr 1fr; grid-template-rows: 50svh auto; grid-template-areas: 'slides slides' 'prev next'; align-items: center; } .slideshow img { max-width: 90%; } .prev { justify-self: center; font-weight: 200; font-size: 2rem; z-index: 1; } .next { justify-self: center; font-weight: 200; font-size: 2rem; } .sent_slideshow_auto { margin-block-start: 10em; margin-block-end: 3em; height: 40svh; } /* cora */ .img-grid { display: grid; grid-template-columns: repeat(5, 1fr); grid-template-rows: repeat(12, 100px); grid-gap: 2em; } #cora_beach { grid-column: 1 / 4 ; grid-row: 1; } #cora_2bottles { grid-column: 3 / 6 ; grid-row: 3; } #cora_cartas_cacifo { grid-column: 1 / 5 ; grid-row: 6; } #label-gif { grid-column: 1 / 6 ; grid-row: 10; } .img-grid video { max-inline-size: 100%; margin-block: auto; } .posters_grid { max-width: 100%; display: grid; grid-template-columns: 1fr; grid-gap: 10px; } .story_slideshow { background-color: rgb(0, 0, 0); margin-block: 10em; margin-inline: auto; max-width: 100%; display: grid; grid-template-columns: 1fr 1fr; align-items: center; } .story_slideshow .prev { justify-self: start; text-align: left; margin-block: 0.5em; margin-inline-start: 0.5em; grid-column: 1 / 2; grid-row: 3 ; z-index: 1; } .story_slideshow .next { justify-self: end; text-align: right; margin-block: 0.5em; margin-inline-end: 0.5em; grid-column: 2 / 3; grid-row: 3 ; } .story_slides { grid-column: 1 / 3; grid-row: 1 / 3 ; } .story_slideshow li { display: none; display: grid; list-style: none; grid-template-rows: calc(50svh - 1em) calc(20svh - 1em); grid-template-columns: 1fr; align-items: center; height: 70svh; padding: 1em; } .story_slideshow img { max-height: 40svh; max-width: 90%; } .cora_pack img { max-width: 110%; } .cora_time_capsule video{ border-radius: 6px; max-height: 40svh; } .story_slideshow p { grid-column: 1 / 3; grid-row: 2 ; max-width: 300px; font-size: 1.2rem; line-height: 1.3; } .caption { display: none; } .footer-grid { display: grid; grid-template-columns: 1fr 1fr 1fr 1fr; grid-template-rows: 90svh auto; gap: 1em; grid-template-areas: ". . . ." "call call call footer-top-arrow"; } footer .contacts { display: none; } }