.hero__box--text, .hero__link, .showreel__btn { align-items: center; display: flex; } .showreel__btn { justify-content: center; } .hero, .hero__box-wrap, .hero__box--link, .projects__container, .project, .skills__list, .skill, .skill-desc__list, .hero__container { flex-direction: column; display: flex; } .projects__box-wrap, .projects__list { flex-wrap: wrap; display: flex; } .hero__container { flex-grow: 1; } .hero, .skill-desc__item { position: relative; } .hero:before, .hero:after, .showreel__video, .showreel__btn, .showreel__btn:before, .skill-desc__item:before { position: absolute; } .showreel__box { position: fixed; } .showreel__btn, .showreel__btn:before { transition: var(--transition--100, 0.1s linear); border-radius: 50%; } .project__img { transition: var(--transition--300, 0.3s linear); } .projects__box-wrap, .projects__list { gap: var(--gap); } .projects__box, .project { flex-basis: calc( (100% - var(--gap, 16px) * (var(--items, 1) - 1)) / var(--items, 1) ); width: calc( (100% - var(--gap, 16px) * (var(--items, 1) - 1)) / var(--items, 1) ); } .hero { padding-top: calc(60px + var(--header--height)); color: #fff; background-color: var(--color-bg, #393c3d); padding-bottom: 24px; overflow: hidden; } .hero:before { content: ""; z-index: 1; pointer-events: none; background: url(/assets/images/icons/bg-line-hero-4.svg) no-repeat; width: 1429.31px; height: 672.977px; bottom: -240px; left: -5%; transform: rotate(2.611deg); } .hero:after { content: ""; z-index: 2; pointer-events: none; background: url(/assets/images/icons/bg-line-hero-3.svg) 100% 100% no-repeat; width: 1429.31px; height: 672.977px; top: -200px; right: -600px; transform: rotate(2.611deg); } @media (min-width: 480px) { .hero:after { top: -180px; right: -520px; } } @media (min-width: 768px) { .hero:after { top: -140px; right: -400px; } } @media (min-width: 980px) { .hero:after { right: -300px; } } @media (min-width: 1024px) { .hero:after { right: -200px; } } @media (min-width: 1200px) { .hero:after { right: -20px; } } .hero__box-wrap { gap: 16px; margin-top: auto; } @media (min-width: 768px) { .hero__box-wrap { flex-direction: row-reverse; justify-content: space-between; } } .hero__box--text { gap: 16px; } @media (min-width: 768px) { .hero__box--text { flex: 0 0 400px; } } @media (min-width: 1024px) { .hero__box--text { flex: 0 0 532px; } } .hero__title { margin-bottom: 40px; font-size: 36px; font-weight: 500; } @media (min-width: 768px) { .hero__title { max-width: 500px; font-size: 48px; } } .hero__link { gap: 16px; width: fit-content; margin-top: auto; } .hero__link svg { fill: currentColor; } .hero__img { border-radius: 50%; } @media (max-width: 1023px) { .hero__img { display: none; } } .hero__text { letter-spacing: -1.2px; color: #f8f8f8d6; font-size: 19px; line-height: 27px; } @media (min-width: 768px) { .hero__text { letter-spacing: -1.4px; font-size: 22px; line-height: 24px; } } .showreel { background-color: #111; } .showreel__box { width: 120vw; height: 120vh; top: 50%; left: 50%; overflow: hidden; transform: translate(-50%, -50%); } .showreel__video { width: 100%; height: 100%; max-width: initial; object-fit: cover; object-position: center; top: 50%; left: 50%; transform: translate(-50%, -50%); } .showreel__btn { z-index: 2; background-color: #fff; width: 120px; height: 120px; font-weight: 500; top: 50%; left: 50%; transform: translate(-50%, -50%); } .showreel__btn:before { content: ""; z-index: -1; border: 2px solid #cdcecf; width: 128px; height: 128px; top: 50%; left: 50%; transform: translate(-50%, -50%); } .showreel__btn:hover, .showreel__btn:focus { color: #fff; background-color: #000; } .projects__container { gap: 50px; } .projects__box-wrap { --gap: 32px; } @media (min-width: 768px) { .projects__box--50 { --items: 2; } } .projects__list { --gap: 64px; } .project { gap: 24px; } @media (min-width: 768px) { .project--50 { --items: 2; } } .project__title { letter-spacing: 0.14px; margin-bottom: 16px; font-size: 22px; font-weight: 600; line-height: 108%; } .project__text { color: #19191980; letter-spacing: 0.115px; line-height: 130.5%; } .project__img-wrap { overflow: hidden; } .project__img { object-fit: cover; width: 100%; height: 240px; } .project__link--rotate:hover .project__img, .project__link--rotate:focus .project__img { transform: scale(1.15) rotate(2deg); } @media (min-width: 1024px) { .project__img { height: 320px; } .project--100 .project__img { height: 480px; } } @media (min-width: 1440px) { .project__img { height: 425px; } .project--100 .project__img { height: 528px; } } .skills { color: #fff; z-index: 2; background-color: #2b2d2e; padding: 50px 0 36px; } @media (min-width: 768px) { .skills { padding: 60px 0; } } @media (min-width: 1024px) { .skills { filter: grayscale(); background-image: url(/assets/images/skills/bg-x2.webp); background-position: right -300px bottom; background-repeat: no-repeat; background-size: contain; } } @media (min-width: 1024px) and (min-device-pixel-ratio: 2), (min-width: 1024px) and (-webkit-min-device-pixel-ratio: 2), (min-width: 1024px) and (min-resolution: 192dpi), (min-width: 1024px) and (min-resolution: 2dppx) { .skills { background-image: url(/assets/images/skills/bg-x3.webp); } } @media (min-width: 1024px) and (min-device-pixel-ratio: 3), (min-width: 1024px) and (-webkit-min-device-pixel-ratio: 3), (min-width: 1024px) and (min-resolution: 288dpi), (min-width: 1024px) and (min-resolution: 3dppx) { .skills { background-image: url(/assets/images/skills/bg-x3.webp); } } @media (min-width: 1200px) { .skills { background-position: right -200px bottom; } } @media (min-width: 1440px) { .skills { background-position: 100% 100%; } } @media (min-width: 1024px) { .skills__box { max-width: 600px; } } .skills__title { width: 230px; color: var(--color--white); letter-spacing: 0.1px; margin-bottom: 50px; font-size: 20px; font-weight: 300; line-height: 130.5%; } .skills__list { gap: 48px; } .skill { gap: 16px; } .skill__title { letter-spacing: -1.4px; color: var(--color--white); pointer-events: none; font-size: 22px; font-weight: 500; line-height: 24px; } .skill-desc__list { gap: 16px; padding: 0 34px; } .skill-desc__item:before { content: ""; background-color: #fff; width: 10px; height: 1px; top: 12px; left: -18px; } .section--slide { min-height: var(--viewport-height, 100vh); scroll-snap-align: start; scroll-snap-stop: always; will-change: min-height; transition: min-height 0.4s; } .showreel { height: 100vh; position: relative; overflow: hidden; } .showreel__inner { will-change: transform; width: 100%; height: 100%; transition: transform 0.1s ease-out; position: absolute; top: 0; left: 0; }