*, :before, :after { box-sizing: border-box; } * { border: 0; margin: 0; padding: 0; } body { scroll-behavior: smooth; text-rendering: optimizeSpeed; line-height: normal; } article, aside, details, figcaption, figure, footer, header, hgroup, menu, nav, section { display: block; } img, picture, video, canvas, svg { max-width: 100%; display: block; } img { vertical-align: top; } ol, ul, li { list-style: none; } a, input, button, textarea, select { font: inherit; color: inherit; background-color: #0000; text-decoration: none; } button[disabled] { cursor: auto; } p, h1, h2, h3, h4, h5, h6 { overflow-wrap: break-word; } :root { --color-accent-primary: #362e2b; --color-accent-primary-light: #937e76; --color-light: #f4f0ef; --color-bg: #393c3d; --color-dark: #191919; --color-gray: #cdcecf; --vh: 100vh; --items: 1; --gap: 16px; --transition--200: 0.2s linear; --transition--300: 0.3s linear; --transition-parallax: all 0.2s cubic-bezier(0.25, 0.74, 0.22, 0.99); } .logo, .cta-btn, .header, .modal-contact-me__links, .modal__backdrop, .modal--contact-me .modal__box, .header__container, .loader__backdrop, .cta-btn__text, .cta-btn__icon-wrap, .btn-cross, .burger-menu__btn, .footer__bottom, .modal-contact-me__link { align-items: center; display: flex; } .loader__backdrop, .cta-btn__text, .cta-btn__icon-wrap, .btn-cross, .burger-menu__btn, .footer__bottom, .modal-contact-me__link { justify-content: center; } .header__container { justify-content: space-between; } .burger-menu__nav .nav__list, .burger-menu__container, .burger-menu__body, .footer__container, .footer__top, .footer__box, html, body { flex-direction: column; display: flex; } .modal__backdrop, .modal--contact-me .modal__box { flex-direction: column; } main, body { flex-grow: 1; } .lds-roller, .btn-cross, .burger-menu__btn, .hover-line { position: relative; } .lds-roller div:after, .btn-cross .burger-line, .burger-menu__btn .burger-line, .modal__backdrop, .modal__btn-close, .visually-hidden, .hover-line:before { position: absolute; } .burger-menu, .loader__backdrop, .modal { position: fixed; } .loader__backdrop, .modal { inset: 0; } button, a { cursor: pointer; } .lds-roller div:after, .modal--contact-me .modal__btn-close { border-radius: 50%; } .cta-btn, .cta-btn__text, .cta-btn__icon-wrap, .hover-line:before { transition: var(--transition--100, 0.1s linear); } .burger-menu, .header, .modal__backdrop, html { transition: var(--transition--200, 0.2s linear); } .modal-contact-me__link { transition: var(--transition--300, 0.3s linear); } .loader__backdrop { background-color: var(--color-bg, #393c3d); opacity: 1; z-index: 11; width: 100vw; height: 100vh; } .isHidden .loader__backdrop { display: none; } .lds-roller { width: 80px; height: 80px; display: inline-block; } .lds-roller div { transform-origin: 40px 40px; animation: 1.2s cubic-bezier(0.5, 0, 0.5, 1) infinite lds-roller; } .lds-roller div:after { content: " "; background-color: var(--color-accent-primary, #4c6753); width: 7px; height: 7px; margin: -4px 0 0 -4px; display: block; } .lds-roller div:first-child { animation-delay: -0.036s; } .lds-roller div:first-child:after { top: 63px; left: 63px; } .lds-roller div:nth-child(2) { animation-delay: -0.072s; } .lds-roller div:nth-child(2):after { top: 68px; left: 56px; } .lds-roller div:nth-child(3) { animation-delay: -0.108s; } .lds-roller div:nth-child(3):after { background-color: var(--color-accent-primary, #4c6753); top: 71px; left: 48px; } .lds-roller div:nth-child(4) { animation-delay: -0.144s; } .lds-roller div:nth-child(4):after { top: 72px; left: 40px; } .lds-roller div:nth-child(5) { animation-delay: -0.18s; } .lds-roller div:nth-child(5):after { top: 71px; left: 32px; } .lds-roller div:nth-child(6) { animation-delay: -0.216s; } .lds-roller div:nth-child(6):after { top: 68px; left: 24px; } .lds-roller div:nth-child(7) { animation-delay: -0.252s; } .lds-roller div:nth-child(7):after { top: 63px; left: 17px; } .lds-roller div:nth-child(8) { animation-delay: -0.288s; } .lds-roller div:nth-child(8):after { top: 56px; left: 12px; } @keyframes lds-roller { 0% { transform: rotate(0); } to { transform: rotate(360deg); } } .logo { letter-spacing: -1.008px; font-size: 16px; font-weight: 500; line-height: 118%; } .logo.footer__logo .logo--long { display: none; } @media (max-width: 767px) { .logo.footer__logo { display: none; } } @media (max-width: 1023px) { .logo.header__logo .logo--long { display: none; } } @media (min-width: 1024px) { .logo.header__logo .logo--short { display: none; } } .cta-btn { height: 32px; color: var(--color-dark, #191919); letter-spacing: 0.08px; text-transform: uppercase; gap: 16px; font-size: 12px; font-weight: 500; line-height: 1; } .cta-btn span, .cta-btn svg { pointer-events: none; } @media (max-width: 767px) { .cta-btn.header__cta-btn { display: none; } } .cta-btn__text { background-color: #fff; border: 1px solid #0000; border-radius: 16px; width: 120px; height: 32px; } .cta-btn__icon-wrap { background-color: #fff; border: 1px solid #0000; border-radius: 50%; width: 32px; height: 32px; } .cta-btn__icon { fill: currentColor; width: 12px; height: 12px; } .cta-btn:hover { color: #fff; } .cta-btn:hover .cta-btn__text, .cta-btn:hover .cta-btn__icon-wrap { border-color: var(--color-dark, #191919); background-color: var(--color-dark, #191919); } .header--dark .cta-btn:hover .cta-btn__text, .header--dark .cta-btn:hover .cta-btn__icon-wrap { border-color: #fff; } .footer__cta-btn .cta-btn__text { border-color: var(--color-dark, #191919); } .footer__cta-btn .cta-btn__icon-wrap { border-color: #1919191a; } @media (max-width: 767px) { .footer__cta-btn .cta-btn__text { width: 100%; } } .projects__cta-btn { margin-top: 16px; } .projects__cta-btn .cta-btn__text { border-color: var(--color-dark, #191919); } .projects__cta-btn .cta-btn__icon-wrap { border-color: #1919191a; } .burger-menu__cta-btn { margin-top: auto; } .recent-projects__cta-btn { margin-left: auto; } .recent-projects__cta-btn .cta-btn__text { border-color: var(--color-dark, #191919); } .recent-projects__cta-btn .cta-btn__icon-wrap { border-color: #1919191a; } .btn-cross { width: 36px; height: 36px; color: var(--color-white, #fff); z-index: 10; background-color: #0000; } .btn-cross .burger-line { pointer-events: none; background-color: currentColor; border-radius: 12px; width: 20px; height: 2px; margin: 0; transition-property: height, opacity, transform; transition-duration: 0.4s; } .btn-cross .burger-line:first-child { transform: rotate(-45deg); } .btn-cross .burger-line:last-child { transform: rotate(45deg); } @media (max-width: 767px) { .header__nav { display: none; } } .header__nav .nav__list { --gap: 40px; align-items: center; gap: var(--gap); display: flex; } .burger-menu__nav .nav__list { gap: 24px; } .nav__link { position: relative; } .header__nav .nav__link { color: var(--color, --color--dark); letter-spacing: 0.09px; font-size: 14px; line-height: 94%; } .burger-menu__nav .nav__link { color: var(--color, --color--white); letter-spacing: -1.06px; font-size: 32px; line-height: 132.5%; } .nav__link:before { content: ""; background-color: var(--color); width: 0%; height: 1px; transition: all 0.2s linear; display: block; position: absolute; bottom: -4px; left: 0; } .nav__link:hover:before, .nav__link:focus:before { width: 100%; } .burger-menu__btn { width: 36px; height: 36px; color: var(--color-white, #fff); z-index: 1; background-color: #0000; } body.burgerMenuIsOpen .burger-menu__btn { z-index: 20; } @media (min-width: 768px) { .burger-menu__btn { display: none; } } .burger-menu__btn .burger-line { pointer-events: none; background-color: currentColor; border-radius: 12px; width: 20px; height: 2px; margin: 0; transition-property: height, opacity, transform; transition-duration: 0.4s; } .burger-menu__btn .burger-line:first-child { transform: translateY(-6px); } .burger-menu__btn .burger-line:last-child { transform: translateY(6px); } body.burgerMenuIsOpen .burger-menu__btn .burger-line:first-child { transform: rotate(-45deg); } body.burgerMenuIsOpen .burger-menu__btn .burger-line:nth-child(2n) { opacity: 0; } body.burgerMenuIsOpen .burger-menu__btn .burger-line:last-child { transform: rotate(45deg); } .burger-menu { width: 100%; height: 100%; padding: calc(60px + var(--header--height)) 0 40px; color: #fff; background-color: var(--color-dark); z-index: 10; top: 0; right: 0; } .burger-menu.isHidden { opacity: 0; pointer-events: none; visibility: hidden; right: -101%; } .burger-menu.isHidden button, .burger-menu.isHidden a { pointer-events: none; visibility: hidden; } @media (min-width: 1024px) { .burger-menu { display: none; } } .burger-menu:before { content: ""; z-index: -1; background: url(/assets/images/icons/bg-line-hero.svg) no-repeat; width: 3000px; height: 1000px; position: absolute; top: 75%; left: 25%; transform: rotate(2.611deg); } .burger-menu__container, .burger-menu__body { height: 100%; } .header { z-index: 11; width: 100%; min-height: var(--header--height); color: #fff; background-color: #0000; position: fixed; top: 0; left: 0; right: 0; } .header--dark { background-color: var(--color-dark, #191919); } footer { border-top: 1px solid #e8e8e8; padding: 24px 0; } @media (min-width: 768px) { footer { padding: 36px 0 24px; } } .footer__container { gap: 24px; } @media (min-width: 768px) { .footer__container { gap: 36px; } } .footer__top { gap: 24px; } @media (min-width: 768px) { .footer__top { flex-direction: row; justify-content: space-between; } } .footer__box--links { gap: 8px; } .footer__box--cta { gap: 24px; } @media (max-width: 767px) { .footer__box--logo { display: none; } .footer__box--cta { order: -1; } } .footer-link { width: fit-content; } .modal { z-index: 12; } .modal.isHidden { display: none; } .modal__backdrop { background-color: #000000e6; width: 100%; height: 100%; padding: 24px; } .modal.isHidden .modal__backdrop { opacity: 0; } .modal__content { color: #fff; margin: auto; } .modal__btn-close { top: 24px; right: 24px; } .modal-showreel__iframe { aspect-ratio: 16/9; border: 0; width: auto; min-width: 60vw; max-width: 90vw; height: 90vh; min-height: 90vh; max-height: 90vh; margin-bottom: auto; } .modal-video__player { aspect-ratio: 16/9; width: auto; min-width: 60vw; max-width: 90vw; max-height: 90vh; margin-bottom: auto; } .modal--contact-me .modal__backdrop { background-color: #393c3d; } .modal--contact-me .modal__content { position: relative; } .modal--contact-me .modal__btn-close { width: 28px; height: 28px; color: var(--color-dark); background-color: #fff; top: -20px; right: -20px; } .modal--contact-me .modal__box { max-width: 520px; } .modal-contact-me__title { color: #fffc; text-align: center; letter-spacing: -3.35px; margin-bottom: 24px; font-size: 52px; font-weight: 600; line-height: 118%; } .modal-contact-me__text { color: #fffc; text-align: center; letter-spacing: -1.4px; margin-bottom: 12px; font-size: 22px; font-weight: 400; line-height: 142%; } .modal-contact-me__links { gap: 16px; } .modal-contact-me__link { color: #fff; background-color: var(--color-dark); border-radius: 40px; gap: 8px; width: 128px; height: 40px; padding: 0 8px; } .modal-contact-me__link svg { fill: currentColor; width: 20px; } .modal-contact-me__link--telegram:hover, .modal-contact-me__link--telegram:focus { background-color: #08c; } .modal-contact-me__link--whatsapp:hover, .modal-contact-me__link--whatsapp:focus { background-color: #25d366; } .modal-contact-me__link--email { color: #fff; letter-spacing: -1.4px; border-radius: 40px; height: 40px; margin-bottom: 52px; padding: 4px 16px; font-size: 22px; font-weight: 600; line-height: 142.5%; text-decoration-line: underline; transition: all 0.3s linear; display: block; } .modal-contact-me__link--email:hover, .modal-contact-me__link--email:focus { background-color: var(--color-dark); } html { --header--height: 64px; height: 100%; scroll-padding-top: var(--header--height); scroll-behavior: smooth; } body.modalIsOpen, body.burgerMenuIsOpen { overflow: hidden; } @media (min-width: 1024px) { body { font-size: 16px; } } @media (min-width: 1440px) { body { font-size: 18px; } } main { overflow: hidden; } footer { margin-top: auto; } svg { pointer-events: none; } .section { padding: 32px 0; } .container { width: 100%; margin: 0 auto; padding: 0 24px; } @media (min-width: 480px) { .container { width: 480px; } } @media (min-width: 768px) { .container { width: 768px; } } @media (min-width: 1024px) { .container { width: 1024px; padding: 0 48px; } } @media (min-width: 1200px) { .container { width: 1200px; padding: 0 80px; } } @media (min-width: 1440px) { .container { width: 1440px; } } .section__title { letter-spacing: -1.056px; font-size: 32px; font-weight: 500; line-height: 132%; } .visually-hidden { white-space: nowrap; clip: rect(0 0 0 0); clip-path: inset(50%); border: 0; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; } .hover-line:before { content: ""; background-color: currentColor; width: 0%; height: 1px; bottom: -1px; left: 0; } .hover-line:hover:before { width: 100%; } .fw-500 { font-weight: 500; } .fw-600 { font-weight: 600; } .fw-700 { font-weight: 700; } .mb-16 { margin-bottom: 16px; } .mb-32 { margin-bottom: 24px; } .mb-24 { margin-bottom: 32px; }