:root{--violet:#d54b78;--background:#edebed;--maxWidth:1920px;--bodyGutter:1.5rem}#cc-main{--cc-bg:var(--background);--cc-btn-primary-bg:var(--violet);--cc-btn-primary-border-color:#000;--cc-btn-primary-hover-bg:linear-gradient(rgb(0 0 0 / 10%) 0 0);--cc-btn-primary-hover-border-color:#000;--cc-btn-primary-hover-color:#000;--cc-btn-secondary-bg:#fff;--cc-btn-secondary-border-color:#000;--cc-btn-secondary-hover-bg:linear-gradient(rgb(0 0 0 / 10%) 0 0);--cc-btn-secondary-hover-border-color:#000;--cc-btn-secondary-hover-color:#000;--cc-modal-border-radius:0;--cc-btn-border-radius:0}@media screen and (min-width:1024px){:root{--bodyGutter:6rem}}@media screen and (min-width:1600px){:root{--bodyGutter:12rem}}html{background-color:var(--background);max-width:var(--maxWidth);margin:0 auto}html.has-lightbox{.menu-mobile { display: none; } .menu-toggle { display: none; } header { .wrapper { *:first-child { opacity: 0; } } } @media screen and (min-width: 1024px) { header { .wrapper { *:first-child { opacity: 1; } } } }}body{margin:7rem var(--bodyGutter)0;@media screen and (min-width:1024px){margin: 8.5rem var(--bodyGutter) 0 var(--bodyGutter);}box-sizing:border-box;position:relative}body{.content { transition: all 0.3s ease-in-out; }}body.mobile-menu-open{header { .wrapper { transition: border-bottom 0.3s ease-in-out; border-bottom: 1px solid var(--background); } } .content { transition: all 0.3s ease-in-out; opacity: 0.3; }}.poppins-thin{font-family:poppins,sans-serif;font-weight:100;font-style:normal}.poppins-extralight{font-family:poppins,sans-serif;font-weight:200;font-style:normal}.poppins-light{font-family:poppins,sans-serif;font-weight:300;font-style:normal}.poppins-regular{font-family:poppins,sans-serif;font-weight:400;font-style:normal}.poppins-medium{font-family:poppins,sans-serif;font-weight:500;font-style:normal}.poppins-semibold{font-family:poppins,sans-serif;font-weight:600;font-style:normal}.poppins-bold{font-family:poppins,sans-serif;font-weight:700;font-style:normal}.poppins-extrabold{font-family:poppins,sans-serif;font-weight:800;font-style:normal}.poppins-black{font-family:poppins,sans-serif;font-weight:900;font-style:normal}.poppins-thin-italic{font-family:poppins,sans-serif;font-weight:100;font-style:italic}.poppins-extralight-italic{font-family:poppins,sans-serif;font-weight:200;font-style:italic}.poppins-light-italic{font-family:poppins,sans-serif;font-weight:300;font-style:italic}.poppins-regular-italic{font-family:poppins,sans-serif;font-weight:400;font-style:italic}.poppins-medium-italic{font-family:poppins,sans-serif;font-weight:500;font-style:italic}.poppins-semibold-italic{font-family:poppins,sans-serif;font-weight:600;font-style:italic}.poppins-bold-italic{font-family:poppins,sans-serif;font-weight:700;font-style:italic}.poppins-extrabold-italic{font-family:poppins,sans-serif;font-weight:800;font-style:italic}.poppins-black-italic{font-family:poppins,sans-serif;font-weight:900;font-style:italic}#back-to-top{position:fixed;bottom:3rem;right:2rem;text-decoration:none;background:linear-gradient(rgb(0 0 0/.1) 0 0);border:1px solid #000;color:#000;padding:.8rem 1rem;opacity:0;font-size:1rem;z-index:100;transition:all .3s;.arrow { border: solid black; border-width: 0 3px 3px 0; display: inline-block; padding: 3px; transform: rotate(-135deg); -webkit-transform: rotate(-135deg); }}#back-to-top:hover{background-color:var(--violet);color:#fff}header{box-sizing:border-box;max-width:var(--maxWidth);width:100%;margin:0 calc(var(--bodyGutter) * -1);background-color:var(--background);padding:0 var(--bodyGutter);position:fixed;top:0;z-index:1000;.wrapper { display: flex; justify-content: space-between; align-items: center; transition: border-bottom 0.3s ease-in-out; border-bottom: 1px solid #000; padding: 1rem 0; @media screen and (min-width: 1024px) { padding: 1rem 0; } img.logo { width: 110px; height: auto; @media screen and (min-width: 1024px) { width: 130px; } } a { text-decoration: none; padding: 0; background: transparent; border: 0; color: #000; font-size: 2rem; cursor: pointer; transition: all 0.3s; } a:not(:first-child) { display: none; } @media screen and (min-width: 1024px) { a:not(:first-child) { display: block; } } a:first-child { text-align: left; } a:last-child { text-align: right; } a:hover { color: var(--violet); transition: all 0.3s; } } .menu-toggle { position: relative; display: inline-block; width: 30px; height: 30px; } .menu-toggle span { margin: 0 auto; position: relative; top: 12px; } .menu-toggle span:before, .menu-toggle span:after { position: absolute; content: ""; } .menu-toggle span, .menu-toggle span:before, .menu-toggle span:after { width: 30px; height: 6px; background-color: #000; display: block; } .menu-toggle span:before { margin-top: -12px; } .menu-toggle span:after { margin-top: 12px; } .menu-toggle span { -webkit-transition-duration: 0s; transition-duration: 0s; -webkit-transition-delay: 0.2s; transition-delay: 0.2s; } .menu-toggle.open span { background-color: rgba(0, 0, 0, 0); -webkit-transition-delay: 0.2s; transition-delay: 0.2s; } .menu-toggle span:before { -webkit-transition-property: margin, -webkit-transform; transition-property: margin, transform; -webkit-transition-duration: 0.2s; transition-duration: 0.2s; -webkit-transition-delay: 0.2s, 0s; transition-delay: 0.2s, 0s; } .menu-toggle.open span:before { margin-top: 0; -webkit-transform: rotate(45deg); transform: rotate(45deg); -webkit-transition-delay: 0s, 0.2s; transition-delay: 0s, 0.2s; } .menu-toggle span:after { -webkit-transition-property: margin, -webkit-transform; transition-property: margin, transform; -webkit-transition-duration: 0.2s; transition-duration: 0.2s; -webkit-transition-delay: 0.2s, 0s; transition-delay: 0.2s, 0s; } .menu-toggle.open span:after { margin-top: 0; -webkit-transform: rotate(-45deg); transform: rotate(-45deg); -webkit-transition-delay: 0s, 0.2s; transition-delay: 0s, 0.2s; } .menu-mobile { position: fixed; top: 0; left: -250px; width: 250px; height: 100%; background-color: #333; overflow-y: auto; transition: left 0.3s ease-in-out; } .menu-mobile ul { list-style-type: none; padding: 0; margin: 0; } .menu-mobile li { border-bottom: 1px solid #444; } .menu-mobile li a { display: block; color: #fff; padding: 1.7rem; text-decoration: none; } .menu-mobile li a:hover { background-color: var(--violet); } .menu-mobile.open { left: 0; } @media screen and (min-width: 1024px) { .menu-toggle { display: none; } .menu-mobile { display: none; } }}.home__hero{h1 { display: block; margin-top: 0; padding-top: 1.5rem; font-size: 1.2rem; letter-spacing: 0.6rem; font-weight: 300; @media screen and (min-width: 1024px) { padding-top: 3rem; font-size: 2rem; letter-spacing: 1rem; font-weight: 200; } .home__hero__uiux { color: var(--violet); } } h2 { font-size: 1.5rem; letter-spacing: 0.3rem; margin-right: 4rem; padding-top: 1rem; @media screen and (min-width: 1024px) { font-size: 2.5rem; letter-spacing: 0.5rem; margin-right: 24rem; padding-top: 3rem; } }}.home__projects{margin:3rem 0;@media screen and (min-width:1024px){margin: 6rem 0;}display:grid;grid-template-columns:1fr;column-gap:6rem;row-gap:3rem;@media screen and (min-width:1024px){grid-template-columns: 1fr 1fr; row-gap: 6rem;}figure { width: 100%; min-height: 40vh; @media screen and (min-width: 1024px) { min-height: 50vh; } @media screen and (min-height: 1200px) { min-height: 30vh; } margin: 0; position: relative; overflow: hidden; img { width: 100%; height: 100%; object-fit: cover; -webkit-transform: scale(1.1); transform: scale(1.1); -webkit-transition: 0.5s ease-in-out; transition: 0.5s ease-in-out; } .home__projects__overlay { position: absolute; top: 0; bottom: 0; left: 0; right: 0; height: 100%; width: 100%; text-decoration: none; opacity: 0; transition: 0.6s ease-in-out; background-color: var(--violet); display: flex; justify-content: center; align-items: center; color: #fff; font-size: 2rem; } } figure:hover { cursor: pointer; img { -webkit-transform: scale(1); transform: scale(1); } .home__projects__overlay { transition: 0.6s ease-in-out; opacity: 0.8; } }}.project-detail{margin:7.5rem 0 0;.project-detail-bg-fixed { background-size: 0px !important; overflow: hidden; position: relative; -webkit-clip-path: polygon(0 0, 100% 0, 100% 100%, 0% 100%); clip-path: polygon(0 0, 100% 0, 100% 100%, 0% 100%); } .project-detail-bg-fixed:before { background-image: inherit !important; background-repeat: inherit !important; background-size: cover; background-position: inherit !important; content: ""; position: fixed; width: 100%; height: 100%; top: 0; left: 0; z-index: -1 !important; pointer-events: none; } .project-detail__hero-image { height: 210px; background-repeat: no-repeat; background-position: 0 7rem; @media screen and (min-height: 900px) { height: 240px; } @media screen and (min-width: 1024px) { height: 500px; background-position: center; } } .project-detail__hero-image:before { background-size: contain; @media screen and (min-width: 1024px) { background-size: cover; } } h2 { color: var(--violet); font-size: 2.5rem; @media screen and (min-width: 1024px) { font-size: 3rem; } } .project-detail__content { display: grid; grid-template-columns: 1fr; column-gap: 6rem; padding-top: 0; padding-bottom: 4rem; @media screen and (min-width: 1024px) { padding-top: 2rem; grid-template-columns: 1fr 1.5fr; } .project-detail__caption { margin-top: 0; font-size: 1.5rem; line-height: 3rem; @media screen and (min-width: 1024px) { font-size: 1.8rem; line-height: 4rem; } h3 { margin-top: 1rem; font-size: 1.5rem; @media screen and (min-width: 1024px) { margin-top: 2rem; font-size: 2rem; } } } .project-detail__description { margin-top: 2rem; font-size: 1.4rem; line-height: 2.5rem; text-align: right; @media screen and (min-width: 1024px) { margin-top: 4rem; font-size: 1.5rem; line-height: 2.8rem; } h3 { margin: 0; } h3:not(:first-child) { margin-top: 2rem; } p { margin-top: 0; margin-bottom: 1rem; font-size: 1.3rem; } p:last-child { margin-bottom: 0; } strong { font-weight: 400; } } } .project-detail__images { display: grid; grid-template-columns: 1fr; @media screen and (min-width: 1024px) { grid-template-columns: 1fr 1fr; } column-gap: 3rem; row-gap: 3rem; img { width: 100%; height: 100%; object-fit: cover; } } figure { margin: 0; overflow: hidden; box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2); } img.project-detail__image__zoom { -webkit-transform: scale(1.1); transform: scale(1.1); -webkit-transition: 0.5s ease-in-out; transition: 0.5s ease-in-out; } img.project-detail__image__zoom:hover { -webkit-transform: scale(1); transform: scale(1); } img.project-detail__image__zoom-reverse { -webkit-transform: scale(1); transform: scale(1); -webkit-transition: 0.5s ease-in-out; transition: 0.5s ease-in-out; } img.project-detail__image__zoom-reverse:hover { -webkit-transform: scale(1.1); transform: scale(1.1); } .project-detail__user-research { background-color: var(--violet); margin: 0 calc(var(--bodyGutter) * -1); padding: 2rem 1.5rem 5rem 1.5rem; @media screen and (min-width: 1024px) { padding: 2rem 11rem 5rem 11rem; } h3 { font-size: 2rem; text-align: center; margin-top: 0; margin-bottom: 2rem; color: #fff; } .project-detail__user-research__feedbacks { display: grid; grid-template-columns: 1fr; column-gap: 3rem; row-gap: 3rem; @media screen and (min-width: 1024px) { grid-template-columns: 1fr 1fr 1fr; row-gap: 0; } div { border: 1px solid #fff; background-image: linear-gradient( to bottom right, var(--violet), rgb(249, 110, 151) ); padding: 3rem 1.5rem; font-size: 1.5rem; color: #fff; text-align: center; box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2); } } p { color: #fff; font-size: 1.3rem; line-height: 2.5rem; margin-top: 3rem; margin-bottom: 3rem; } } .project-detail__product { padding-bottom: 5rem; min-height: 600px; h3 { padding-top: 2rem; padding-bottom: 2rem; font-size: 2rem; text-align: center; margin-top: 0; margin-bottom: 2rem; background-color: rgba(237, 235, 237, 0.5); color: #000; } } .project-detail__product.project-detail-bg-fixed { background-position: 30% 50px; } .project-detail__mockups { margin-bottom: 5rem; margin-left: calc(var(--bodyGutter) * -1); margin-right: calc(var(--bodyGutter) * -1); padding-top: 5rem; padding-bottom: 5rem; background: linear-gradient( 135deg, rgb(249, 110, 151) 0%, rgb(144, 0, 62) 100% ); display: flex; justify-content: center; flex-direction: column; align-items: center; h3 { font-size: 2rem; text-align: center; margin-top: 0; margin-bottom: 2rem; color: #fff; } figure { box-shadow: none; max-width: 80%; @media screen and (min-width: 1024px) { max-width: 60%; } img { width: 100%; height: 100%; } } } .project-detail__screens { margin-top: 5rem; h3 { margin-bottom: 0.5rem !important; font-size: 2rem; text-align: center; margin-top: 0; margin-bottom: 2rem; color: #000; } .project-detail__images { figure { box-shadow: none; } } > figure { margin-top: 3rem; margin-left: auto; margin-right: auto; max-width: 100%; img { width: 100%; height: 100%; } video { width: 100%; height: 100%; } } > figure.project-detail__video { margin-top: 5rem; } } .project-detail__a11ynotes { margin-top: 5rem; h3 { font-size: 2rem; text-align: center; margin-top: 0; margin-bottom: 2rem; color: #000; } p { font-size: 1.2rem; } p:last-child { margin-bottom: -1rem; } } .project-detail__last { margin: 5rem 0 0 0; padding: 0 0 5rem 0; @media screen and (min-width: 1024px) { padding: 0 5rem 5rem 5rem; } h3 { font-size: 2rem; text-align: center; margin-top: 0; margin-bottom: 2rem; color: #000; } .project-detail__last__points { display: grid; column-gap: 4rem; row-gap: 3rem; @media screen and (min-width: 1024px) { grid-template-columns: 1fr 1fr 1fr; row-gap: 0; } b { font-weight: 500; } div { background: linear-gradient( 135deg, rgb(255, 255, 255) 0%, rgb(237, 235, 237) 100% ); border: 1px solid #000; padding: 3rem 1.5rem; font-size: 1.5rem; text-align: center; box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2); } } }}.cv{width:100%;height:100%;object-fit:cover;margin-top:2rem;@media screen and (min-width:1024px){margin-top: 0; margin-left: 2rem;}}#contact{border-top:1px solid #000;padding:3rem 0;@media screen and (min-width:1024px){padding: 6rem 14rem;}display:grid;grid-template-columns:1fr;@media screen and (min-width:1024px){grid-template-columns: 1fr 1fr;}column-gap:3rem;row-gap:2rem;h3 { font-size: 2.5rem; text-align: center; margin-top: 0; margin-bottom: 1rem; @media screen and (min-width: 1024px) { margin-bottom: 2rem; } grid-column: span 1; @media screen and (min-width: 1024px) { grid-column: span 2; } } input { background: transparent; border: 1px solid #000; height: 3rem; } input:focus, textarea:focus { outline: none; border: 2px solid #000; } input:hover, textarea:hover, button:hover { background: linear-gradient(rgb(0 0 0/10%) 0 0) !important; color: #000 !important; } input, input::placeholder, textarea, textarea::placeholder { color: #000; font-size: 1rem; padding-left: 1rem; } input::placeholder, textarea::placeholder { padding-left: 0; opacity: 0.6; } textarea::placeholder { padding-top: 0; } textarea { grid-column: span 1; @media screen and (min-width: 1024px) { grid-column: span 2; } padding-top: 1rem; background: transparent; border: 1px solid #000; height: 8rem; } .contact__submit { grid-column: span 1; @media screen and (min-width: 1024px) { grid-column: span 2; } display: flex; justify-content: center; @media screen and (min-width: 1024px) { justify-content: end; } button { background: var(--violet); height: 3rem; width: 16rem; border: 1px solid #000; color: #fff; font-size: 1.5rem; cursor: pointer; transition: all 0.3s; padding: 0; } }}footer{border-top:1px solid #000;display:flex;flex-direction:column;align-items:center;.footer__links { display: grid; grid-template-columns: 1fr; @media screen and (min-width: 1024px) { grid-template-columns: 1fr 1fr 1fr; } column-gap: 6rem; width: 100%; margin-left: 0; padding-top: 1rem; padding-bottom: 1rem; @media screen and (min-width: 1024px) { padding-top: 3rem; padding-bottom: 3rem; } a { display: block; background: transparent; text-decoration: none; border: 0; color: #000; font-size: 1.5rem; cursor: pointer; transition: all 0.3s; padding: 1rem; @media screen and (min-width: 1024px) { padding: 0; } } a:nth-child(1) { text-align: center; @media screen and (min-width: 1024px) { text-align: left; } } a:nth-child(2) { text-align: center; } a:nth-child(3) { text-align: center; @media screen and (min-width: 1024px) { text-align: right; } } a:hover { color: var(--violet); transition: all 0.3s; } } p { margin-top: 0; }}