@charset "UTF-8"; /* Name: Motion Design for Digital Products Author: Andre Navarre Author URI: https://andrenavarre.com Description: Portfolio website Version: 1.0.0.540 */ /* FONTS */ @font-face { font-family: 'averta_regular'; src: url('_fonts/averta/avertastd-regular-webfont.woff2') format('woff2'), url('_fonts/averta/avertastd-regular-webfont.woff') format('woff'); font-weight: normal; font-style: normal; font-display: swap; } @font-face { font-family: 'averta_semibold'; src: url('_fonts/averta/avertastd-semibold-webfont.woff2') format('woff2'), url('_fonts/averta/avertastd-semibold-webfont.woff') format('woff'); font-weight: normal; font-style: normal; font-display: swap; } @font-face { font-family: 'averta_bold'; src: url('_fonts/averta/avertastd-bold-webfont.woff2') format('woff2'), url('_fonts/averta/avertastd-bold-webfont.woff') format('woff'); font-weight: normal; font-style: normal; font-display: swap; } @font-face { font-family: 'averta_extrabold'; src: url('_fonts/averta/avertastd-extrabold-webfont.woff2') format('woff2'), url('_fonts/averta/avertastd-extrabold-webfont.woff') format('woff'); font-weight: normal; font-style: normal; font-display: swap; } /* ------------ Degbug CSS -------------- */ /* * { outline: 1px solid red; background: rgba(50, 50, 50, 0.25); } */ /* ------------ Global variables -------------- */ :root { /* EASINGS */ --LINEAR: cubic-bezier(0.250, 0.250, 0.750, 0.750); --EASE: cubic-bezier(0.250, 0.100, 0.250, 1.000); --EASE_IN: cubic-bezier(0.420, 0.000, 1.000, 1.000); --EASE_OUT: cubic-bezier(0.000, 0.000, 0.580, 1.000); --EASE_IN_OUT: cubic-bezier(0.420, 0.000, 0.580, 1.000); /* Ease IN curves */ --EASE_IN_QUAD: cubic-bezier(0.550, 0.085, 0.680, 0.530); --EASE_IN_CUBIC: cubic-bezier(0.550, 0.055, 0.675, 0.190); --EASE_IN_QUART: cubic-bezier(0.895, 0.030, 0.685, 0.220); --EASE_IN_QUINT: cubic-bezier(0.755, 0.050, 0.855, 0.060); --EASE_IN_SINE: cubic-bezier(0.470, 0.000, 0.745, 0.715); --EASE_IN_EXPO: cubic-bezier(0.950, 0.050, 0.795, 0.035); --EASE_IN_CIRC: cubic-bezier(0.600, 0.040, 0.980, 0.335); /* Ease Out Curves */ --EASE_OUT_QUAD: cubic-bezier(0.250, 0.460, 0.450, 0.940); --EASE_OUT_CUBIC: cubic-bezier(0.215, 0.610, 0.355, 1.000); --EASE_OUT_QUART: cubic-bezier(0.165, 0.840, 0.440, 1.000); --EASE_OUT_QUINT: cubic-bezier(0.230, 1.000, 0.320, 1.000); --EASE_OUT_SINE: cubic-bezier(0.390, 0.575, 0.565, 1.000); --EASE_OUT_EXPO: cubic-bezier(0.190, 1.000, 0.220, 1.000); --EASE_OUT_CIRC: cubic-bezier(0.075, 0.820, 0.165, 1.000); /* Ease IN Out Curves */ --EASE_IN_OUT_QUAD: cubic-bezier(0.455, 0.030, 0.515, 0.955); --EASE_IN_OUT_CUBIC: cubic-bezier(0.645, 0.045, 0.355, 1.000); --EASE_IN_OUT_QUART: cubic-bezier(0.770, 0.000, 0.175, 1.000); --EASE_IN_OUT_QUINT: cubic-bezier(0.860, 0.000, 0.070, 1.000); --EASE_IN_OUT_SINE: cubic-bezier(0.445, 0.050, 0.550, 0.950); --EASE_IN_OUT_EXPO: cubic-bezier(1.000, 0.000, 0.000, 1.000); --EASE_IN_OUT_CIRC: cubic-bezier(0.785, 0.135, 0.150, 0.860); /* Ease Bounce Curves */ --EASE_IN_BACK: cubic-bezier(0.600, -0.280, 0.735, 0.045); --EASE_OUT_BACK: cubic-bezier(0.175, 0.885, 0.320, 1.275); --EASE_IN_OUT_BACK: cubic-bezier(0.680, -0.550, 0.265, 1.550); --burgerEase: var(--EASE_OUT_QUAD); --customEase: var(--EASE_OUT_EXPO); /* HOME SPACING */ --bottom: 3svh; --left: 3vw; --right: 3vw; --top: 3svh; /* PAGE WIDTH */ --page-padding: 20%; /* PRELOADER */ --loader_light: #4d5a5c; --yellow: var(--loader_light); --red: var(--loader_light); --blue: var(--loader_light); --violet: var(--loader_light); /* CANVAS RESOLUTION */ --resolution-default: 1; /* CANVAS RESOLUTION */ --width-logo-andre: 150px; /* TYPOGRAPHY */ --font-averta_regular: averta_regular, Arial, Helvetica, sans-serif; --font-averta_bold: averta_bold, Arial, Helvetica, sans-serif; --font-averta_semibold: averta_semibold, Arial Bold, sans-serif; --font-averta_extrabold: averta_extrabold, Arial Bold, Helvetica, sans-serif; --font-size-p: 20px; --line-height-p: 26px; --font-size-link: 14px; --font-size-list: 17px; --line-height-list: 30px; --font-size-H1: 3.3svw; --line-height-H1: 3.5svw; --font-size-H2: 3.3svw; --line-height-H2: 3.5svw; --font-size-nav-title: calc(var(--font-size-p) * 0.6); --font-size-ticker-area: var(--font-size-p); /* linked to paragraph */ --font-size-tags: 12px; --font-size-card-title: 18px; --font-size-card-subtitle: 17px; --font-size-footer: 18px; --line-height-footer: 26px; /* Contact button in Menu */ --font-size-contact-btn-menu: var(--font-size-p); --width-contact-btn-menu: calc(var(--font-size-p)*6.66); --width-contact-btn-menu-icn: calc(var(--width-contact-btn-menu)*2/3); --height-contact-btn-menu: calc(var(--font-size-p)*3.33); --roundness-contact-btn-menu: var(--height-contact-btn-menu); --padding-contact-btn-menu: 0; --width-icn-contact: calc(var(--font-size-p)*1.75); --height-icn-contact: calc(var(--font-size-p)*1.75); /* Menu list links - This needs to stay responsive */ --font-size-menu: var(--font-size-contact-btn-form); --font-padding-menu: 1.8svh; /* Contact form header */ --font-size-contact-form-h1: 3.3svw; --line-height-contact-form-h1: 3.5svw; /* Contact form Send button - needs to stay responsive */ --font-size-contact-btn-form: 24px; --roundness-contact-btn-form: 2em; --padding-contact-btn-form: calc(var(--height-contact-btn-menu)/2) 1.5em calc(var(--height-contact-btn-menu)/2) 1.5em; --padding-clients-btn: calc(var(--height-contact-btn-menu)/4) 4svh calc(var(--height-contact-btn-menu)/4) 4svh; /* Text under the Hero animation - needs to be the same as Lottie size */ --font-size-subline: 20px; --line-height-subline: 26px; /* Lights Animation */ --lightSourceEase: var(--EASE_OUT_CUBIC); --lightSourceFade: 2s; --lightSourceRotate: 2s; /* Home Hero Color Animations */ --lights-right-color-speed: 10s; --lights-right-color-delay: 0s; --lights-left-color-speed: 10s; --lights-left-color-delay: 0s; --hero-color-speed: 10s; --hero-color-delay: 0s; /* CTA button Animations */ --CTA-btn-grad-speed: 30s; /* Text Gradient Animations */ --grad-text-speed: 60s; /* Primary Gray */ --brand-color-gray: rgba(245, 250, 255, 1); /* Gray replica dual function for light/dark menu */ --brand-color-gray-transparency: rgba(183, 231, 255, 0.25); } html { height: 100%; } #fps_profiler { position: absolute; z-index: 99999; top: 0; right: 0; color: #fff; padding: 1em; pointer-events: none; display: none; } body.light #fps_profiler { color: #000; } /* ------------ Body -------------- */ body { margin: 0; overflow: hidden; color: #121212; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; font-feature-settings: "kern", "liga", "clig", "calt"; -moz-font-feature-settings: "kern", "liga", "clig", "calt"; -ms-font-feature-settings: "kern", "liga", "clig", "calt"; -webkit-font-feature-settings: "kern", "liga", "clig", "calt"; pointer-events: all; font-family: var(--font-averta_regular); } body.light { margin: 0; overflow-x: hidden; overflow-y: scroll; } body.clients-open { overflow-y: scroll; } body.home { background-color: #000; /* PREVENT DRAGGING PAGE ON IPAD */ -ms-scroll-chaining: none; overscroll-behavior: none; -ms-touch-action: none; touch-action: none; } body.home * { /* PREVENT DRAGGING PAGE ON IPAD */ -ms-scroll-chaining: none; overscroll-behavior: none; } body.menu-open { height: 100%; overflow: hidden; } button { background: unset; border: unset; } a, a:link, a:visited, a:hover, a:active { text-decoration: unset; color: unset; } input:focus, select:focus, textarea:focus, button:focus { outline: none; } /* ------------ Typography -------------- */ /* CIENTLIST */ h2 { font-size: var(--font-size-H2); line-height: var(--line-height-H2); font-family: var(--font-averta_extrabold); font-weight: unset; } span.icn_bolt { padding-right: 0.25em; background-image: url('_img/bolt-solid.svg'); background-repeat: no-repeat; background-position: center; background-size: contain; height: calc(var(--font-size-H2) * 2); width: calc(var(--font-size-H2) * 2); -webkit-transform: translateY(0.25svw); -ms-transform: translateY(0.25svw); transform: translateY(0.25svw); } /* body.light span.icn_bolt { -webkit-filter: invert(1); filter: invert(1); } */ body.clientlist span.icn_bolt { -webkit-filter: unset; filter: unset; } .header-area.clientlist { /* margin-top: calc(var(--top)*2); */ margin-bottom: 6em; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: flex-end; -ms-flex-pack: distribute; -webkit-box-pack: justify; justify-content: space-between; /* column-gap: 20%; */ } .header-area.clientlist h2 { -webkit-margin-after: unset; margin-block-end: unset; } .header-area.clientlist .col_left { width: 51vw; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; -webkit-column-gap: 2em; -moz-column-gap: 2em; column-gap: 2em; } .header-area.clientlist .col_mid { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-pack: end; -ms-flex-pack: end; justify-content: flex-end; } /* .col_mid p { width: 20em; position: relative; border-left: 2px solid var(--brand-color-gray-transparency); padding: 2em; padding-block: calc(1.5em - 4px); font-size: var(--font-size-p); line-height: var(--line-height-p); } */ #footer-area_clientlist { position: fixed; left: 0; padding-inline: calc(var(--page-padding)/2); bottom: var(--bottom); opacity: 0; -webkit-transition: opacity 2s var(--customEase) 1s; -o-transition: opacity 2s var(--customEase) 1s; transition: opacity 2s var(--customEase) 1s; } body.clientlist #footer-area_clientlist.activated { opacity: 1; } #footer-area_clientlist p { opacity: 0.25; font-size: 18px; -webkit-margin-after: unset; margin-block-end: unset; -webkit-margin-before: unset; margin-block-start: unset; } div#footer-area_clientlist { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; } .cover-background, body.light.clientlist .cover-background { width: calc(100% + var(--page-padding) + var(--left)*2); height: 105%; background: var(--brand-color-gray-transparency); position: absolute; margin-top: -4em; left: calc(var(--left)*-4); opacity: 0.5; } body.light .cover-background { background: rgba(183, 231, 255, 0.18); } .header-area.clientlist .col_right { /* width: 20%; */ display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-pack: end; -ms-flex-pack: end; justify-content: flex-end; } .clientlist span { animation-play-state: paused; -webkit-animation-play-state: paused; } body.clients-open .clientlist span, body.clientlist .clientlist span { animation-play-state: running; -webkit-animation-play-state: running; } #clientlist_container { visibility: hidden; } /* Clientlist page */ .clientlist_page { width: 100%; height: 100%; display: -webkit-box; display: -ms-flexbox; display: flex; position: fixed; top: 0; left: 0; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; } body.clients-open #clientlist_container, body.clientlist #clientlist_container { visibility: visible; } /* Sticky nav buttons */ .shadow-wrap { /* width: 16em; */ height: -webkit-fit-content; height: -moz-fit-content; height: fit-content; border-radius: 2em; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; -webkit-box-shadow: 0.1px 1.1px 2.2px rgba(0, 0, 0, 0), 0.1px 2.7px 5.3px rgba(0, 0, 0, 0), 0.3px 5px 10px rgba(0, 0, 0, 0), 0.4px 8.9px 17.9px rgba(0, 0, 0, 0), 0.8px 16.7px 33.4px rgba(0, 0, 0, 0), 2px 40px 80px rgba(0, 0, 0, 0); box-shadow: 0.1px 1.1px 2.2px rgba(0, 0, 0, 0), 0.1px 2.7px 5.3px rgba(0, 0, 0, 0), 0.3px 5px 10px rgba(0, 0, 0, 0), 0.4px 8.9px 17.9px rgba(0, 0, 0, 0), 0.8px 16.7px 33.4px rgba(0, 0, 0, 0), 2px 40px 80px rgba(0, 0, 0, 0); transition: -webkit-box-shadow 1s var(--customEase), transform 1s var(--customEase); } .shadow-wrap:hover { -webkit-box-shadow: 0px 5.5px 2.2px rgba(0, 0, 0, 0.028), 0px 13.3px 5.3px rgba(0, 0, 0, 0.04), 0px 25px 10px rgba(0, 0, 0, 0.05), 0px 44.7px 17.9px rgba(0, 0, 0, 0.06), 0px 83.6px 33.4px rgba(0, 0, 0, 0.072), 0px 200px 80px rgba(0, 0, 0, 0.1); box-shadow: 0px 5.5px 2.2px rgba(0, 0, 0, 0.028), 0px 13.3px 5.3px rgba(0, 0, 0, 0.04), 0px 25px 10px rgba(0, 0, 0, 0.05), 0px 44.7px 17.9px rgba(0, 0, 0, 0.06), 0px 83.6px 33.4px rgba(0, 0, 0, 0.072), 0px 200px 80px rgba(0, 0, 0, 0.1); -webkit-transform: scale(1.05); -ms-transform: scale(1.05); transform: scale(1.05); } a.nav_btn { position: relative; display: -webkit-box; display: -ms-flexbox; display: flex; padding: 1.5em 2em; border-radius: 2em; background: #000; color: #fff; text-transform: uppercase; -webkit-column-gap: 4em; -moz-column-gap: 4em; column-gap: 4em; -webkit-box-align: center; -ms-flex-align: center; align-items: center; -webkit-box-pack: justify; -ms-flex-pack: justify; justify-content: space-between; pointer-events: all; cursor: pointer; } a.nav_btn .wrapper { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-flow: column; flex-flow: column; text-align: left; } .top_line { white-space: nowrap; font-family: var(--font-averta_bold); font-size: var(--font-size-nav-title); opacity: 0.5; } .title_line { font-family: var(--font-averta_bold); font-size: var(--font-size-p); animation-play-state: paused; -webkit-animation-play-state: paused; } .icn_arrow { background-image: url('_img/arrow.svg'); background-repeat: no-repeat; background-position: center; background-size: contain; display: -webkit-inline-box; display: -ms-inline-flexbox; display: inline-flex; width: 2.5em; height: 4em; will-change: auto; /* background: -o-radial-gradient(center center, circle, #FF00B8 0%, #5200FF 20%, #567eef 33%, #00c3ff 50%, #567eef 61%, #5200FF 77%, #FF00B8 100%); background: radial-gradient(circle at center center, #FF00B8 0%, #5200FF 20%, #567eef 33%, #00c3ff 50%, #567eef 61%, #5200FF 77%, #FF00B8 100%); */ background: var(--nav-btn-gradient-o-); background: var(--nav-btn-gradient); color: transparent; /* background-size: 2500% 2500%; */ background-size: var(--nav-btn-grad-size); mask-image: url('_img/arrow.svg'); mask-repeat: no-repeat; mask-size: contain; mask-position: center; -webkit-mask-image: url('_img/arrow.svg'); -webkit-mask-repeat: no-repeat; -webkit-mask-size: contain; -webkit-mask-position: center; -webkit-animation: gradientAnimation var(--grad-text-speed) linear infinite; animation: gradientAnimation var(--grad-text-speed) linear infinite; -o-animation: gradientAnimation var(--grad-text-speed) linear infinite; animation-play-state: paused; -webkit-animation-play-state: paused; } body.clients-open .icn_arrow { animation-play-state: running; -webkit-animation-play-state: running; } .clientlist_page .icn_arrow { animation-play-state: running; -webkit-animation-play-state: running; } a.nav_btn:before { pointer-events: none; opacity: 0; } a.nav_btn:hover:before { animation-play-state: running; -webkit-animation-play-state: running; opacity: 1; } a.nav_btn, #menuToggle a.nav_btn { -webkit-transition: unset !important; -o-transition: unset !important; transition: unset !important; } :root { --nav-btn-line-thickness: 1.25px; --home-btn-CTA-line-thickness: 1.5px; --nav-btn-gradient-o-: -o-radial-gradient(center center, circle, #FF00B8 0%, #5200FF 20%, #567eef 33%, #00c3ff 50%, #567eef 61%, #5200FF 77%, #FF00B8 100%); --nav-btn-gradient: radial-gradient(circle at center center, #FF00B8 0%, #5200FF 20%, #567eef 33%, #00c3ff 50%, #567eef 61%, #5200FF 77%, #FF00B8 100%); --nav-btn-gradient-hover-o-: -o-linear-gradient(45deg, #000000, #567eef, #FF00B8, #5200FF, #567eef, #000000, #567eef, #5200FF, #FF00B8, #567eef, #000000); --nav-btn-gradient-hover: linear-gradient(45deg, #000000, #567eef, #FF00B8, #5200FF, #567eef, #000000, #567eef, #5200FF, #FF00B8, #567eef, #000000); --nav-btn-grad-size: 2500%; --nav-btn-grad-size-hover: 1000%; --nav-btn-animation: gradientAnimation var(--grad-text-speed) linear infinite; --nav-btn-animation-hover: steam var(--CTA-btn-grad-speed) linear infinite; } a.nav_btn:hover, #menuToggle a.nav_btn:hover { background: #fff; color: #000; padding-block: calc(1.5em - var(--nav-btn-line-thickness)/2); padding-inline: calc(2em - var(--nav-btn-line-thickness)/2); border-radius: calc(2em - var(--nav-btn-line-thickness)/2); } a.nav_btn:hover .top_line, #menuToggle a.nav_btn:hover .top_line { opacity: 1; } a.nav_btn:hover .title_line, #menuToggle a.nav_btn:hover .title_line, /* body.light.clients-open #menuToggle .title_line, */ body.light .buttons_sticky.appear a.nav_btn .title_line { will-change: auto; background: var(--nav-btn-gradient-o-); background: var(--nav-btn-gradient); background-clip: text; color: transparent; -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-size: var(--nav-btn-grad-size); -webkit-animation: var(--nav-btn-animation); animation: var(--nav-btn-animation); -o-animation: var(--nav-btn-animation); word-break: break-word; white-space: nowrap; width: 100%; animation-play-state: running; -webkit-animation-play-state: running; } body.light a.nav_btn:hover, body.light #menuToggle a.nav_btn:hover { background: #fff; color: #000; } a.nav_btn:before { content: ''; will-change: auto; border-radius: 2em; position: absolute; left: calc(var(--nav-btn-line-thickness)*-2); top: calc(var(--nav-btn-line-thickness)*-2); /* background: -o-linear-gradient(45deg, #FF00B8, #08CAE9, #8385EF, #FF00B8, #8385EF, #08CAE9, #FF00B8); background: linear-gradient(45deg, #FF00B8, #08CAE9, #8385EF, #FF00B8, #8385EF, #08CAE9, #FF00B8); */ background: var(--nav-btn-gradient-o-); background: var(--nav-btn-gradient); background-size: var(--nav-btn-grad-size); width: calc(100% + var(--nav-btn-line-thickness)*4); height: calc(100% + var(--nav-btn-line-thickness)*4); z-index: -1; animation: var(--nav-btn-animation); -webkit-animation: var(--nav-btn-animation); -moz-animation: var(--nav-btn-animation); -o-animation: var(--nav-btn-animation); animation-play-state: paused; -webkit-animation-play-state: paused; } body.light a.nav_btn:before { animation-play-state: paused; -webkit-animation-play-state: paused; } body.light .buttons_sticky.appear a.nav_btn:before { animation-play-state: running; -webkit-animation-play-state: running; } body.light a.nav_btn:hover:before { animation-play-state: running; -webkit-animation-play-state: running; } /* Sticky buttons appear activated */ body.light .buttons_sticky.appear a.nav_btn { padding-block: calc(1.5em - var(--nav-btn-line-thickness)*2); padding-inline: calc(2em - var(--nav-btn-line-thickness)*2); border-radius: calc(2em - var(--nav-btn-line-thickness)*2); top: calc(var(--nav-btn-line-thickness)*-2); background: #000; } body.light .buttons_sticky.appear a.nav_btn .top_line { opacity: 1; } body.light .buttons_sticky.appear a.nav_btn .title_line { animation-play-state: running; -webkit-animation-play-state: running; } body.light .buttons_sticky.appear a.nav_btn:before { opacity: 1; animation-play-state: running; -webkit-animation-play-state: running; } body.light .buttons_sticky.appear a.nav_btn:hover { background: #121212; } body.light .buttons_sticky.appear a.nav_btn:hover:before { width: calc(100% + var(--nav-btn-line-thickness)*4); height: calc(100% + var(--nav-btn-line-thickness)*4); } body.light .buttons_sticky.appear a.nav_btn:hover:before { background: var(--nav-btn-gradient-hover-o-); background: var(--nav-btn-gradient-hover); /* background: -o-linear-gradient(45deg, #000000, #08CAE9, #8385EF, #000000, #8385EF, #08CAE9, #000000); background: linear-gradient(45deg, #000000, #08CAE9, #8385EF, #000000, #8385EF, #08CAE9, #000000); */ /* background: -o-radial-gradient(center center, circle, #8385EF 0%, #9156ef 11%, #08CAE9 33%, #567eef 50%, #9156ef 61%, #08CAE9 77%, #8385EF 100%); background: radial-gradient(circle at center center, #8385EF 0%, #9156ef 11%, #08CAE9 33%, #567eef 50%, #9156ef 61%, #08CAE9 77%, #8385EF 100%); */ background-size: var(--nav-btn-grad-size-hover); animation: var(--nav-btn-animation-hover); -webkit-animation: var(--nav-btn-animation-hover); -moz-animation: var(--nav-btn-animation-hover); -o-animation: var(--nav-btn-animation-hover); } /* body.light .buttons_sticky.appear a.nav_btn:hover .title_line { background: var(--nav-btn-gradient-hover-o-); background: var(--nav-btn-gradient-hover); background-clip: text; color: transparent; -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-size: var(--nav-btn-grad-size-hover); animation: var(--nav-btn-animation-hover); -webkit-animation: var(--nav-btn-animation-hover); -moz-animation: var(--nav-btn-animation-hover); -o-animation: var(--nav-btn-animation-hover); } */ /* Sticky buttons menu open */ /* body.light.clients-open a.nav_btn .top_line { color: #fff; opacity: 1; } */ /* body.light.clients-open #menuToggle a.nav_btn { background: #000; padding-block: calc(1.5em - var(--nav-btn-line-thickness)*2); padding-inline: calc(2em - var(--nav-btn-line-thickness)*2); border-radius: calc(2em - var(--nav-btn-line-thickness)*2); left: calc(var(--nav-btn-line-thickness)*2); } */ a.nav_btn:hover:before { border-radius: calc(2em + var(--nav-btn-line-thickness)); } body.light .buttons_sticky.appear a.nav_btn:hover:before { border-radius: 2em; } /* --- */ body h1 { font-size: var(--font-size-H1); line-height: var(--line-height-H1); font-family: var(--font-averta_extrabold); /* PREVENTS iOS User Agent Overrides */ font-weight: unset; } body p { font-size: var(--font-size-p); line-height: var(--line-height-p); } p span { font-family: var(--font-averta_bold); } .bloc_tag-intro li { font-family: var(--font-averta_bold); font-size: var(--font-size-tags); white-space: nowrap; list-style-type: none; background: #fff; padding: 0.85em 1.5em; border-radius: var(--tag-border-radius); } #hero-text-area h1 { position: absolute; } body.light #hero-text-area, #hero-text-area h1 span.HOME_HEADER { position: absolute; display: block; overflow: hidden; top: 0; z-index: -999; text-indent: -1000vw; color: #fff; } /* CTA PAGE EFFECT TRANSITION */ /* body.animate_out #hero-scene { -webkit-transition: opacity 1s var(--customEase), -webkit-transform 1s var(--customEase); transition: opacity 1s var(--customEase), -webkit-transform 1s var(--customEase); -o-transition: transform 1s var(--customEase), opacity 1s var(--customEase); transition: transform 1s var(--customEase), opacity 1s var(--customEase); transition: transform 1s var(--customEase), opacity 1s var(--customEase), -webkit-transform 1s var(--customEase); -webkit-transform: scale(0.95); -ms-transform: scale(0.95); transform: scale(0.95); opacity: 0; } .transition_container { pointer-events: none; position: absolute; width: 100%; height: 100%; overflow: hidden; z-index: 99999999; } #transition-wipe { position: absolute; width: 100%; height: 100%; -webkit-transform: translateY(100%); -ms-transform: translateY(100%); transform: translateY(100%); -webkit-backdrop-filter: invert(1); backdrop-filter: invert(1); -webkit-filter: grayscale(1); filter: grayscale(1); } */ /* body.animate_out #transition-wipe { -webkit-animation: 0.5s var(--customEase) 0.5s transition_wipe forwards; animation: 0.5s var(--customEase) 0.5s transition_wipe forwards; } @-webkit-keyframes transition_wipe { 0% { -webkit-transform: translateY(100%); -ms-transform: translateY(100%); transform: translateY(100%); } 100% { -webkit-transform: translateY(0%); -ms-transform: translateY(0%); transform: translateY(0%); } } @keyframes transition_wipe { 0% { -webkit-transform: translateY(100%); -ms-transform: translateY(100%); transform: translateY(100%); } 100% { -webkit-transform: translateY(0%); -ms-transform: translateY(0%); transform: translateY(0%); } } */ /* Load Splash */ .splash_container { will-change: auto; position: absolute; width: 100%; height: 100%; overflow: hidden; z-index: 0; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; } #lottie_HOME_splash { will-change: auto; display: -webkit-box; display: -ms-flexbox; display: flex; width: 122%; height: auto; position: absolute; } /* TESTING PAGE LOAD ANIMATION > removing class with JS */ /* #projects_home .content { height: auto; } */ .content { position: relative; margin: 0px auto; width: 100%; height: auto; min-height: 100vh; padding-top: calc(var(--top) *5); } :root { /* NO DELAY SINCE TRANSITION HAPPENS ON LOTTIE COMPLETE */ --page-transition-delay: 0s; /* DELAY IS LOTTIE ANIMATION DURATION MINUS ANY WANTED OVERLAPPING */ --clients-transition-delay: 1.75s; } .transition { will-change: auto; overflow-x: hidden; padding-inline: var(--page-padding); position: -webkit-sticky; position: sticky; height: auto; top: 0; margin: 0; /* INITIAL POSITION */ opacity: 0; -webkit-transform: translateY(25%); -ms-transform: translateY(25%); transform: translateY(25%); /* DELAY IS LOTTIE ANIMATION DURATION */ -webkit-transition: opacity 2s var(--customEase), -webkit-transform 2s var(--customEase); transition: opacity 2s var(--customEase), -webkit-transform 2s var(--customEase); -o-transition: transform 2s var(--customEase), opacity 2s var(--customEase); transition: transform 2s var(--customEase), opacity 2s var(--customEase); transition: transform 2s var(--customEase), opacity 2s var(--customEase), -webkit-transform 2s var(--customEase); } .transition.activated { /* FINAL POSITION */ opacity: 1; -webkit-transform: translateY(0); -ms-transform: translateY(0); transform: translateY(0); } .transition.no-delay { -webkit-animation: 2s var(--customEase) var(--page-transition-delay) pageTransition forwards; animation: 2s var(--customEase) var(--page-transition-delay) pageTransition forwards; -webkit-animation-delay: 0s; animation-delay: 0s; } .header-area.projects { /* INITIAL POSITION */ opacity: 0; margin-top: 2em; -webkit-transform: translateY(25%); -ms-transform: translateY(25%); transform: translateY(25%); /* DELAY IS LOTTIE ANIMATION DURATION */ -webkit-transition: opacity 2s var(--customEase), -webkit-transform 2s var(--customEase); transition: opacity 2s var(--customEase), -webkit-transform 2s var(--customEase); -o-transition: transform 2s var(--customEase), opacity 2s var(--customEase); transition: transform 2s var(--customEase), opacity 2s var(--customEase); transition: transform 2s var(--customEase), opacity 2s var(--customEase), -webkit-transform 2s var(--customEase); -webkit-transition-delay: 0.25s; -o-transition-delay: 0.25s; transition-delay: 0.25s; } .bloc_tag-intro { /* INITIAL POSITION */ opacity: 0; -webkit-transform: translateY(25%); -ms-transform: translateY(25%); transform: translateY(25%); /* DELAY IS LOTTIE ANIMATION DURATION */ -webkit-transition: opacity 2s var(--customEase), -webkit-transform 2s var(--customEase); transition: opacity 2s var(--customEase), -webkit-transform 2s var(--customEase); -o-transition: transform 2s var(--customEase), opacity 2s var(--customEase); transition: transform 2s var(--customEase), opacity 2s var(--customEase); transition: transform 2s var(--customEase), opacity 2s var(--customEase), -webkit-transform 2s var(--customEase); -webkit-transition-delay: 0.10s; -o-transition-delay: 0.10s; transition-delay: 0.10s; } .transition.activated .header-area.projects, .transition.activated .bloc_tag-intro { /* FINAL POSITION */ opacity: 1; -webkit-transform: translateY(0); -ms-transform: translateY(0); transform: translateY(0); } @-webkit-keyframes pageTransition { 0% { opacity: 0; -webkit-transform: translateY(25%); transform: translateY(25%); } 90% { opacity: 1; } 100% { opacity: 1; -webkit-transform: translateY(0%); transform: translateY(0%); } } @keyframes pageTransition { 0% { opacity: 0; -webkit-transform: translateY(25%); transform: translateY(25%); } 90% { opacity: 1; } 100% { opacity: 1; -webkit-transform: translateY(0%); transform: translateY(0%); } } /* CLIENT LIST APPEAR */ #clientlist_insert, #clientlist_insert_clientspage { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-flow: column; flex-flow: column; gap: 2em; -webkit-box-align: center; -ms-flex-align: center; align-items: center; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; opacity: 0; } body.clients-open #clientlist_insert, body.clientlist #clientlist_insert_clientspage { opacity: 1; } #clientlist_container { /* width: 90%; */ width: calc(100% - var(--page-padding)); display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-flow: column; flex-flow: column; gap: 2em; position: fixed; opacity: 0; -webkit-transform: translateY(50%); -ms-transform: translateY(50%); transform: translateY(50%); } #clientlist_container, .header-area.clientlist { -webkit-transition-delay: 0s; -o-transition-delay: 0s; transition-delay: 0s; /* DELAY IS LOTTIE ANIMATION DURATION */ -webkit-transition: opacity 1s var(--customEase), -webkit-transform 2s var(--customEase); transition: opacity 1s var(--customEase), -webkit-transform 2s var(--customEase); -o-transition: transform 2s var(--customEase), opacity 1s var(--customEase); transition: transform 2s var(--customEase), opacity 1s var(--customEase); transition: transform 2s var(--customEase), opacity 1s var(--customEase), -webkit-transform 2s var(--customEase); } body.clients-open #clientlist_container, body.clientlist #clientlist_container.activated { -webkit-transition-delay: var(--clients-transition-delay); -o-transition-delay: var(--clients-transition-delay); transition-delay: var(--clients-transition-delay); -webkit-transform: translateY(0); -ms-transform: translateY(0); transform: translateY(0); opacity: 1; } .header-area.clientlist { opacity: 0; -webkit-transform: translateY(10%); -ms-transform: translateY(10%); transform: translateY(10%); } body.clients-open .header-area.clientlist, body.clientlist .header-area.clientlist.activated { -webkit-transition-delay: calc(var(--clients-transition-delay) + 0.25s); -o-transition-delay: calc(var(--clients-transition-delay) + 0.25s); transition-delay: calc(var(--clients-transition-delay) + 0.25s); -webkit-transform: translateY(0); -ms-transform: translateY(0); transform: translateY(0); opacity: 1; } /* Clients Area */ body.clients-open #location-area p, body.clients-open #location-area .timezone, body.clientlist #location-area .timezone.onPage { color: #121212; } /* body.light.menu-open.clients-open #location-area p, body.light.menu-open.clients-open #location-area .timezone { color: #fff; } */ body.clientlist.menu-open #location-area.activated { /* left: unset; */ /* right: var(--right); */ -webkit-transition: opacity 2s var(--customEase) 1s; -o-transition: opacity 2s var(--customEase) 1s; transition: opacity 2s var(--customEase) 1s; } /* body.clients-open #location-area .icn_location { -webkit-filter: unset; filter: unset; } */ body.clients-open #dribbble-area p { color: #121212; } /* body.light.menu-open.clients-open #dribbble-area p { color: #fff; } */ body.clients-open #lottie_logo_Dribbble g path { fill: #121212; stroke: #121212; } /* body.light.menu-open.clients-open #lottie_logo_Dribbble g path { fill: #fff; stroke: #fff; } */ /* ------------ Light pages styling ------------ */ body.light.menu-open { overflow: unset; } .noScroll { overflow: hidden; position: fixed; width: 100%; } .header-area.projects.services { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; -webkit-box-pack: justify; -ms-flex-pack: justify; justify-content: space-between; } .col_left { width: 50%; } .col_right { width: 22svw; max-width: 350px; } /* TESTING CENTER TITLE IN HEADER */ .header-area.projects.page-portfolio, .header-area.projects.page-services, .header-area.projects.page-about { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; -webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-flow: column; flex-flow: column; text-align: center; } .header-area.projects.page-portfolio .col_right { width: 700px; max-width: unset; } .header-area.projects.page-services .col_left { width: unset; max-width: unset; } .header-area.projects.page-services .col_right { width: 730px; max-width: unset; } .header-area.projects.page-about .col_left { width: 40svw; max-width: unset; } .header-area.projects.page-about.cta .col_left { width: 30svw; max-width: unset; } .header-area.projects.page-about.cta .col_right { width: 600px; max-width: unset; } .header-area.projects.page-about .col_right { width: 600px; max-width: unset; } .header-area.projects.page-about img { width: 40%; margin-top: 2em; } /* ------------ Block styling ------------ */ :root { --bloc-border-radius: 1em; --tag-border-radius: 4em; } .bloc_tag-intro { background: var(--brand-color-gray); padding: 2%; border-radius: var(--bloc-border-radius); margin-top: var(--top); display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; -webkit-box-pack: justify; -ms-flex-pack: justify; justify-content: space-between; } .col_os { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; -webkit-box-pack: space-evenly; -ms-flex-pack: space-evenly; justify-content: space-evenly; width: 30%; } .col_tag { width: 70%; } .icn_os { width: 4em; height: 4em; background-size: contain; background-repeat: no-repeat; background-position: center; } .ios { background-image: url('_img/icn_apple.svg'); } .android { background-image: url('_img/icn_android.svg'); } .wearos { background-image: url('_img/icn_wearos.svg'); } .html { background-image: url('_img/icn_html.svg'); } .css { background-image: url('_img/icn_css.svg'); } .video { background-image: url('_img/icn_video.svg'); } .js { background-image: url('_img/icn_js.svg'); } .bloc_tag-intro ul { display: -webkit-box; display: -ms-flexbox; display: flex; -ms-flex-flow: wrap; flex-flow: wrap; -webkit-column-gap: 1em; -moz-column-gap: 1em; column-gap: 1em; row-gap: 1em; } .bloc_tag-intro li { font-family: var(--font-averta_bold); font-size: var(--font-size-tags); white-space: nowrap; list-style-type: none; background: #fff; padding: 0.85em 1.5em; border-radius: var(--tag-border-radius); } /* ------------ Portfolio styling ------------ */ :root { --portfolio-row-height: 21.9vw; --portfolio-row-gap: 5%; --porfolio-row-spacing: calc(3vw + var(--portfolio-logos-spacing)); --portfolio-item-small: 38%; --portfolio-item-large: 62%; --portfolio-border-radius: 1.5em; --portfolio-logos-height: 1.8vw; --portfolio-logos-spacing: calc(var(--portfolio-logos-height)*1.66); --card-padding-inline: 2.2vw; --card-padding-block: 2em; } .portfolio.projects { display: -webkit-box; display: -ms-flexbox; display: flex; margin-top: calc(var(--top)*4); -webkit-box-orient: horizontal; -webkit-box-direction: normal; -ms-flex-flow: row wrap; flex-flow: row wrap; row-gap: var(--porfolio-row-spacing); } .row { display: -webkit-box; display: -ms-flexbox; display: flex; width: 100%; height: var(--portfolio-row-height); column-gap: 5%; -webkit-column-gap: 5%; -moz-column-gap: 5%; -webkit-box-pack: justify; -ms-flex-pack: justify; justify-content: space-between; -webkit-box-flex: 0; -ms-flex: 0 0 100%; flex: 0 0 100%; } .container-small { position: relative; display: -webkit-box; display: -ms-flexbox; display: flex; width: calc(var(--portfolio-item-small) - (var(--portfolio-row-gap) /2)); height: auto; -webkit-box-align: center; -ms-flex-align: center; align-items: center; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; } .container-large { position: relative; display: -webkit-box; display: -ms-flexbox; display: flex; width: calc(var(--portfolio-item-large) - (var(--portfolio-row-gap) /2)); height: auto; -webkit-box-align: center; -ms-flex-align: center; align-items: center; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; } .item-small, .item-large { top: var(--portfolio-logos-spacing); background: var(--brand-color-gray); width: 100%; height: auto; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; overflow: hidden; position: relative; border-radius: var(--portfolio-border-radius); } .artwork { width: 100%; height: var(--portfolio-row-height); overflow: hidden; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; } /* ARTWORK - TAG HEUER */ .watch { width: 100%; height: 100%; position: relative; } .watch-strap img, .watch-face img { width: 100%; height: auto; } .watch-strap { width: 48%; -webkit-transform-origin: center; -ms-transform-origin: center; transform-origin: center; position: absolute; top: 0; left: 0; right: 0; bottom: 0; margin: auto; height: auto; -webkit-transform: translate(-1.5%, -16%); -ms-transform: translate(-1.5%, -16%); transform: translate(-1.5%, -16%); } .watch-face { width: 90%; z-index: 1; -webkit-transform-origin: center; -ms-transform-origin: center; transform-origin: center; position: absolute; top: 0; left: 0; right: 0; bottom: 0; margin: auto; height: 90%; } /* #video_TAG { width: 62%; -webkit-transform: translateY(1.33%); -ms-transform: translateY(1.33%); transform: translateY(1.33%); height: auto; border-radius: 100%; z-index: 2; -webkit-transform-origin: center; -ms-transform-origin: center; transform-origin: center; position: absolute; top: 0; left: 0; right: 0; bottom: 0; margin: auto; } */ #video_TAG { width: 62%; height: 60%; -webkit-transform: translateY(1.33%); -ms-transform: translateY(1.33%); transform: translateY(1.33%); border-radius: 100%; overflow: hidden; z-index: 2; -webkit-transform-origin: center; -ms-transform-origin: center; transform-origin: center; position: absolute; top: 0; left: 0; right: 0; bottom: 0; margin: auto; } .client_tag .project-info { background: #E62039; color: #fff; } .client_tag { /* background: #A62020; background: -webkit-linear-gradient(180deg, #790f0f 0%, #460303 15%, #790f0f 50%, #000 65%, #790f0f 100%); */ background: #000; background: -webkit-linear-gradient(39deg, #2b1f1f 0%, #484848 15%, #000 50%, #484848 65%, #2b1f1f 100%); background-size: 300% 300%; } .client_tag .bg-grad { background: #000; opacity: 0; } .client_tag:hover .bg-grad { opacity: 1; } .client_tag .subtitle { color: #FFABB6 !important; } .client_tag.card.active { background: var(--brand-color-gray); } /* ARTWORK - ALAN */ #lottie_ALAN { height: 90%; width: 100%; position: absolute; bottom: -5px; } /* ALAN GREEN COLORS */ /* .client_alan { background: #23B17E; background: -webkit-linear-gradient(180deg, #53F2A6 0%, #23B17E 15%, #22E39E 50%, #23B17E 65%, #53F2A6 100%); background-size: 300% 300%; } .client_alan .bg-grad { background: #23B17E; background: -webkit-radial-gradient(center top, ellipse farthest-corner, #53F2A6 0%, #23B17E 100%); background-size: 100% 100%; opacity: 0; } */ .client_alan { background: #23B17E; background: -o-linear-gradient(317.36deg, #FFF3FC 3.85%, #EBF5FF 100.01%); background: linear-gradient(132.64deg, #FFF3FC 3.85%, #EBF5FF 100.01%); background-size: 100% 100%; } .client_alan .bg-grad { background: #23B17E; background: -o-linear-gradient(317.36deg, #EBF5FF 3.85%, #d4dde7 100.01%); background: linear-gradient(132.64deg, #EBF5FF 3.85%, #d4dde7 100.01%); background-size: 100% 100%; opacity: 0; } .client_alan:hover .bg-grad { opacity: 1; } /* ARTWORK ATHLETIC */ .image_ATHLETIC { width: 100%; width: auto; height: 100%; z-index: 2; -webkit-transform-origin: center; -ms-transform-origin: center; transform-origin: center; /* position: absolute; */ } #video_ATHLETIC { display: block; position: absolute; z-index: 2; width: 35%; height: auto; left: 31%; top: -7.5%; -webkit-transform-origin: center; -ms-transform-origin: center; transform-origin: center; -webkit-transform: rotate(35deg); -ms-transform: rotate(35deg); transform: rotate(35deg); } .image_ATHLETIC img { width: auto; height: 100%; } /* ARTWORK BANKIN */ .mobile { width: 100%; height: 100%; position: relative; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; -webkit-box-align: end; -ms-flex-align: end; align-items: flex-end; } .client_bankin.card.active { background: var(--brand-color-gray); } /* ARTWORK BANKIN */ #video_BANKIN { height: 95%; z-index: 2; -webkit-transform-origin: center; -ms-transform-origin: center; transform-origin: center; border-radius: 2vw 2vw 0 0; overflow: hidden; position: absolute; bottom: -5px; } .client_bankin { background: #3BB2FF; background: -o-linear-gradient(116.95deg, #8700FF 4.03%, #00F0FF 112.53%, #00FFB2 154.99%); background: linear-gradient(333.05deg, #8700FF 4.03%, #00F0FF 112.53%, #00FFB2 154.99%); background-size: 100% 100%; } .client_bankin .bg-grad { background: #3BB2FF; background: -o-linear-gradient(116.95deg, #8700FF 4.03%, #00F0FF 112.53%, #00FFB2 154.99%); background: linear-gradient(333.05deg, #8700FF 4.03%, #00F0FF 112.53%, #00FFB2 154.99%); background-size: 300% 300%; opacity: 0; } .client_bankin:hover .bg-grad { opacity: 1; } /* ARTWORK BETTERSLEEP */ #video_BETTERSLEEP { width: auto; height: 100%; z-index: 2; -webkit-transform-origin: center; -ms-transform-origin: center; transform-origin: center; position: absolute; } /* ARTWORK MALT */ #video_MALT { width: 100%; height: auto; z-index: 2; -webkit-transform-origin: center; -ms-transform-origin: center; transform-origin: center; position: absolute; } /* ARTWORK PAYFIT */ #video_PAYFIT { width: 100%; height: auto; z-index: 2; -webkit-transform-origin: center; -ms-transform-origin: center; transform-origin: center; position: absolute; } /* ARTWORK LUDIA */ #video_LUDIA { width: auto; height: 100%; z-index: 2; -webkit-transform-origin: center; -ms-transform-origin: center; transform-origin: center; position: absolute; } /* ARTWORK ORIZON */ #video_ORIZON { width: auto; height: 100%; z-index: 2; -webkit-transform-origin: center; -ms-transform-origin: center; transform-origin: center; position: absolute; } /* ARTWORK HERMES */ #video_HERMES, #video_HERMES_mobile { width: auto; height: 100%; z-index: 2; -webkit-transform-origin: center; -ms-transform-origin: center; transform-origin: center; position: absolute; } .client_hermes .video_shadow { opacity: 0; } #video_HERMES_mobile { display: none; } #video_ALMA { width: auto; height: 101%; z-index: 2; -webkit-transform-origin: center; -ms-transform-origin: center; transform-origin: center; position: absolute; } .video_shadow { position: absolute; width: 100%; height: 100%; -webkit-box-shadow: 0px 0px 33px rgba(0, 0, 0, 0.05) inset; box-shadow: 0px 0px 33px rgba(0, 0, 0, 0.05) inset; top: 0; left: 0; z-index: 999; } #video_SENDWAVE { width: auto; height: 100%; z-index: 2; -webkit-transform-origin: center; -ms-transform-origin: center; transform-origin: center; position: absolute; } #video_COSSETTE { width: auto; height: 100%; z-index: 2; -webkit-transform-origin: center; -ms-transform-origin: center; transform-origin: center; position: absolute; } #video_WEGLOT { width: 100%; height: auto; z-index: 2; -webkit-transform-origin: center; -ms-transform-origin: center; transform-origin: center; position: absolute; } /* LOGOS PORTFOLIO */ .client_tag.project-logo { background-image: url('_img/client-logos/logo_Tag.svg'); } .client_alan.project-logo { background-image: url('_img/client-logos/logo_Alan.svg'); } .client_athletic.project-logo { background-image: url('_img/client-logos/logo_Athletic.svg'); background-size: 30%; } .client_bankin.project-logo { background-image: url('_img/client-logos/logo_Bankin.svg'); } .client_bettersleep.project-logo { background-image: url('_img/client-logos/logo_Bettersleep.svg'); height: calc(var(--portfolio-logos-height)*1.25); overflow: visible; top: calc(var(--portfolio-logos-height)*-0.25); } .client_malt.project-logo { background-image: url('_img/client-logos/logo_Malt.svg'); } .client_payfit.project-logo { background-image: url('_img/client-logos/logo_PayFit.svg'); height: calc(var(--portfolio-logos-height)*2); overflow: visible; top: calc(var(--portfolio-logos-height)*-0.5); } .client_ludia.project-logo { background-image: url('_img/client-logos/logo_Ludia.svg'); height: calc(var(--portfolio-logos-height)*1.25); overflow: visible; top: calc(var(--portfolio-logos-height)*-0.05); } .client_orizon.project-logo { background-image: url('_img/client-logos/logo_Orizon.svg'); height: calc(var(--portfolio-logos-height)*1.5); overflow: visible; top: calc(var(--portfolio-logos-height)*-0.25); } .client_hermes.project-logo { background-image: url('_img/client-logos/logo_Hermes.svg'); height: calc(var(--portfolio-logos-height)*1.5); overflow: visible; top: calc(var(--portfolio-logos-height)*-0.25); } .client_alma.project-logo { background-image: url('_img/client-logos/logo_Alma.svg'); background-size: 17%; } .client_sendwave.project-logo { background-image: url('_img/client-logos/logo_Sendwave.svg'); height: calc(var(--portfolio-logos-height)*2); overflow: visible; top: calc(var(--portfolio-logos-height)*-0.8); } .client_cossette.project-logo { background-image: url('_img/client-logos/logo_Cossette.svg'); background-size: 40%; } .client_weglot.project-logo { background-image: url('_img/client-logos/logo_Weglot.svg'); background-size: 20%; } /* CARDS HOVER */ .card .glow { will-change: auto; position: absolute; width: 100%; height: 100%; margin: 0px auto; opacity: 0; background-image: -o-radial-gradient(25% -25%, circle, rgba(240, 248, 255, 0.25), rgba(240, 248, 255, 0)); background-image: radial-gradient(circle at 25% -25%, rgba(240, 248, 255, 0.25), rgba(240, 248, 255, 0)); overflow: hidden; display: -webkit-box; display: -ms-flexbox; display: flex; border-radius: inherit; z-index: 3; -webkit-transition: opacity 1s var(--customEase); -o-transition: opacity 1s var(--customEase); transition: opacity 1s var(--customEase); } .card:hover .glow { opacity: 1; } .card { -webkit-box-shadow: 0.1px 1.1px 2.2px rgba(0, 0, 0, 0), 0.1px 2.7px 5.3px rgba(0, 0, 0, 0), 0.3px 5px 10px rgba(0, 0, 0, 0), 0.4px 8.9px 17.9px rgba(0, 0, 0, 0), 0.8px 16.7px 33.4px rgba(0, 0, 0, 0), 2px 40px 80px rgba(0, 0, 0, 0); box-shadow: 0.1px 1.1px 2.2px rgba(0, 0, 0, 0), 0.1px 2.7px 5.3px rgba(0, 0, 0, 0), 0.3px 5px 10px rgba(0, 0, 0, 0), 0.4px 8.9px 17.9px rgba(0, 0, 0, 0), 0.8px 16.7px 33.4px rgba(0, 0, 0, 0), 2px 40px 80px rgba(0, 0, 0, 0); } .card { will-change: auto; -webkit-transform: scale(1); -ms-transform: scale(1); transform: scale(1); -webkit-transition: -webkit-transform 1s var(--customEase), -webkit-box-shadow 1s var(--customEase); transition: -webkit-transform 1s var(--customEase), -webkit-box-shadow 1s var(--customEase); -o-transition: transform 1s var(--customEase), box-shadow 1s var(--customEase); transition: transform 1s var(--customEase), box-shadow 1s var(--customEase); transition: transform 1s var(--customEase), box-shadow 1s var(--customEase), -webkit-transform 1s var(--customEase), -webkit-box-shadow 1s var(--customEase); } .card:hover, .card.active:hover { -webkit-box-shadow: 0px 5.5px 2.2px rgba(0, 0, 0, 0.028), 0px 13.3px 5.3px rgba(0, 0, 0, 0.04), 0px 25px 10px rgba(0, 0, 0, 0.05), 0px 44.7px 17.9px rgba(0, 0, 0, 0.06), 0px 83.6px 33.4px rgba(0, 0, 0, 0.072), 0px 200px 80px rgba(0, 0, 0, 0.1); box-shadow: 0px 5.5px 2.2px rgba(0, 0, 0, 0.028), 0px 13.3px 5.3px rgba(0, 0, 0, 0.04), 0px 25px 10px rgba(0, 0, 0, 0.05), 0px 44.7px 17.9px rgba(0, 0, 0, 0.06), 0px 83.6px 33.4px rgba(0, 0, 0, 0.072), 0px 200px 80px rgba(0, 0, 0, 0.1); } .card:hover, .card.active:hover { -webkit-transform: scale(1.05); -ms-transform: scale(1.05); transform: scale(1.05); } /* .card:hover { transform: scale(1.05); } .side_left .card.active:hover { transform: scale(1.05) perspective(50px) rotate3d(0.5, 1, 0, 0.5deg); } .side_right .card.active:hover { transform: scale(1.05) perspective(50px) rotate3d(0.5, -1, 0, 0.5deg); } */ /* CARD INTERACTION */ #icn_info-toggle, #icn_info-active, #icn_info-inactive { width: 2em; height: 2em; position: absolute; /* background: blue; */ border-radius: 100%; right: calc(var(--card-padding-inline) / 2); top: calc(var(--card-padding-inline) / 2); -webkit-filter: invert(1); filter: invert(1); } /* DISABLING ICONs FOR NEW INTERACTION WIP */ #icn_info-active, #icn_info-inactive { display: none; } .project-info { will-change: auto; background: #000; color: #fff; z-index: 3; -webkit-transform: translateY(100%); -ms-transform: translateY(100%); transform: translateY(calc(100% + 1px)); -webkit-transition: opacity 1s var(--customEase), -webkit-transform 1s var(--customEase); transition: opacity 1s var(--customEase), -webkit-transform 1s var(--customEase); -o-transition: transform 1s var(--customEase), opacity 1s var(--customEase); transition: transform 1s var(--customEase), opacity 1s var(--customEase); transition: transform 1s var(--customEase), opacity 1s var(--customEase), -webkit-transform 1s var(--customEase); width: 100%; height: var(--portfolio-row-height); overflow: hidden; -webkit-transform-origin: center; -ms-transform-origin: center; transform-origin: center; position: absolute; border-radius: inherit; -webkit-box-align: start; -ms-flex-align: start; align-items: flex-start; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; display: -webkit-box; display: -ms-flexbox; display: flex; } #icn_info-active { background-image: url('_img/plus-solid.svg'); } .card #icn_info-inactive { will-change: auto; /* background: #000; */ background-repeat: no-repeat; background-size: contain; z-index: 999; opacity: 0; -webkit-transition: opacity 0.5s ease-out; -o-transition: opacity 0.5s ease-out; transition: opacity 0.5s ease-out; pointer-events: all; cursor: pointer; } #icn_info-inactive { background-image: url('_img/circle-plus-solid.svg'); -webkit-filter: unset; filter: unset; } .card.active #icn_info-active { background-repeat: no-repeat; background-size: contain; z-index: 1; opacity: 1; pointer-events: all; cursor: pointer; } .card.active .project-info { -webkit-transform: translateY(0); -ms-transform: translateY(0); transform: translateY(0); } .card.active #icn_info-active { -webkit-filter: invert(1); filter: invert(1); opacity: 1; } .card .fade-overlay { will-change: auto; -webkit-transition: opacity 1s var(--customEase); -o-transition: opacity 1s var(--customEase); transition: opacity 1s var(--customEase); } .card.active .fade-overlay { opacity: 0; } .card { pointer-events: all; cursor: pointer; } .bg-grad { will-change: auto; position: absolute; top: 0; left: 0; right: 0; bottom: 0; margin: auto; z-index: -1; -webkit-transition: opacity 0.5s ease-out; -o-transition: opacity 0.5s ease-out; transition: opacity 0.5s ease-out; } .item-small.bg-grad.anim { width: calc(var(--portfolio-row-height)*2); height: calc(var(--portfolio-row-height)*2); -webkit-transform: rotate(158deg) translate(25%, 5%); -ms-transform: rotate(158deg) translate(25%, 5%); transform: rotate(158deg) translate(25%, 5%); -webkit-transform-origin: center; -ms-transform-origin: center; transform-origin: center; } .item-large .bg-grad.anim { width: calc(var(--portfolio-row-height)*3); height: calc(var(--portfolio-row-height)*2); -webkit-transform: rotate(158deg) translate(15%, 5%); -ms-transform: rotate(158deg) translate(15%, 5%); transform: rotate(158deg) translate(15%, 5%); } /* NEW CARD HOVER INTERACTION */ #icn_info-toggle { background: rgba(0, 0, 0, 0.1); background-image: url('_img/circle-plus-solid.svg'); background-repeat: no-repeat; background-position: center; background-size: contain; -webkit-filter: unset; filter: unset; z-index: 999; opacity: 0; background-size: 100%; -webkit-transition: background-image 0s linear 0s, opacity 0.5s var(--customEase) 0s, -webkit-transform 1s var(--customEase) 0s; transition: background-image 0s linear 0s, opacity 0.5s var(--customEase) 0s, -webkit-transform 1s var(--customEase) 0s; -o-transition: transform 1s var(--customEase) 0s, background-image 0s linear 0s, opacity 0.5s var(--customEase) 0s; transition: transform 1s var(--customEase) 0s, background-image 0s linear 0s, opacity 0.5s var(--customEase) 0s; transition: transform 1s var(--customEase) 0s, background-image 0s linear 0s, opacity 0.5s var(--customEase) 0s, -webkit-transform 1s var(--customEase) 0s; } .card:hover #icn_info-toggle { opacity: 1; } .card.active #icn_info-toggle { background: rgba(0, 0, 0, 1); background-image: url('_img/plus-solid.svg'); background-repeat: no-repeat; background-position: center; opacity: 1; -webkit-transition: background 1s var(--customEase) 0.25s, background-image 0s linear 0.25s, background-size 0s linear 0.25s, -webkit-transform 1s var(--customEase) 0.25s; transition: background 1s var(--customEase) 0.25s, background-image 0s linear 0.25s, background-size 0s linear 0.25s, -webkit-transform 1s var(--customEase) 0.25s; -o-transition: transform 1s var(--customEase) 0.25s, background 1s var(--customEase) 0.25s, background-image 0s linear 0.25s, background-size 0s linear 0.25s; transition: transform 1s var(--customEase) 0.25s, background 1s var(--customEase) 0.25s, background-image 0s linear 0.25s, background-size 0s linear 0.25s; transition: transform 1s var(--customEase) 0.25s, background 1s var(--customEase) 0.25s, background-image 0s linear 0.25s, background-size 0s linear 0.25s, -webkit-transform 1s var(--customEase) 0.25s; -webkit-transform: rotate(-45deg); -ms-transform: rotate(-45deg); transform: rotate(-45deg); background-size: 50%; } /* Card content */ .info-text { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-flow: column; flex-flow: column; -webkit-box-align: start; -ms-flex-align: start; align-items: flex-start; -webkit-box-pack: start; -ms-flex-pack: start; justify-content: flex-start; padding-inline: var(--card-padding-inline); margin-top: var(--card-padding-block); line-height: var(--line-height-p); } .info-text .title { font-family: var(--font-averta_bold); font-size: var(--font-size-card-title); text-transform: uppercase; } .info-text .subtitle { font-size: var(--font-size-card-subtitle); color: #01f2b2; } .info-text .description { margin-top: var(--card-padding-inline); font-size: var(--font-size-p); } .info-text span { font-family: var(--font-averta_bold); } .icn_group { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: end; -ms-flex-align: end; align-items: flex-end; -webkit-box-pack: end; -ms-flex-pack: end; justify-content: flex-end; -webkit-box-orient: horizontal; -webkit-box-direction: normal; -ms-flex-flow: row; flex-flow: row; width: calc(100% - var(--card-padding-inline)*2); position: absolute; bottom: 0; height: 5em; bottom: var(--card-padding-block); } .icn_group .item { font-size: var(--font-size-tags); font-family: var(--font-averta_semibold); display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-flow: column; flex-flow: column; -webkit-box-align: center; -ms-flex-align: center; align-items: center; -webkit-box-pack: end; -ms-flex-pack: end; justify-content: flex-end; width: -webkit-fit-content; width: -moz-fit-content; width: fit-content; height: 5em; margin-left: calc(var(--card-padding-inline)/2); } .card .icn_os { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: end; -ms-flex-align: end; align-items: flex-end; -webkit-box-pack: stretch; -ms-flex-pack: stretch; justify-content: stretch; -webkit-box-orient: horizontal; -webkit-box-direction: normal; -ms-flex-flow: row; flex-flow: row; background-size: 2em; min-width: 2em; background-position: center; } .card .icn_os.ios { background-image: url('_img/icn_apple_white.svg'); } .card .icn_os.css { background-image: url('_img/icn_css_white.svg'); } .card .icn_os.html { background-image: url('_img/icn_html_white.svg'); } .card .icn_os.js { background-image: url('_img/icn_js_white.svg'); } /* ------------ Project logos ------------ */ .icn_link { will-change: auto; background-repeat: no-repeat; background-size: 1.5em; background-image: url('_img/link-solid.svg'); background-position: center right; display: -webkit-box; display: -ms-flexbox; display: flex; width: 2em; height: 100%; opacity: 0; -webkit-transition: opacity 0.5s var(--customEase); -o-transition: opacity 0.5s var(--customEase); transition: opacity 0.5s var(--customEase); } .project-logo:hover .icn_link { opacity: 0.1; } .project-logo:hover .icn_link:hover { opacity: 1; } .project-logo { will-change: auto; background-repeat: no-repeat; background-position: left; background-size: contain; z-index: 999; opacity: 1; pointer-events: all; cursor: default; width: 100%; height: var(--portfolio-logos-height); display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; -webkit-box-pack: end; -ms-flex-pack: end; justify-content: flex-end; position: absolute; top: 0; transition: opacity 0.5s var(--customEase); -webkit-transition: opacity 0.5s var(--customEase); -moz-transition: opacity 0.5s var(--customEase); -o-transition: opacity 0.5s var(--customEase); } .card:hover~.project-logo, .card.active:hover~.project-logo { opacity: 0.15; -webkit-filter: grayscale(); filter: grayscale(); } /* TESTING TOUCH CLOSE */ .card.touch-close { -webkit-transform: scale(1); -ms-transform: scale(1); transform: scale(1); -webkit-box-shadow: 0.1px 1.1px 2.2px rgba(0, 0, 0, 0), 0.1px 2.7px 5.3px rgba(0, 0, 0, 0), 0.3px 5px 10px rgba(0, 0, 0, 0), 0.4px 8.9px 17.9px rgba(0, 0, 0, 0), 0.8px 16.7px 33.4px rgba(0, 0, 0, 0), 2px 40px 80px rgba(0, 0, 0, 0); box-shadow: 0.1px 1.1px 2.2px rgba(0, 0, 0, 0), 0.1px 2.7px 5.3px rgba(0, 0, 0, 0), 0.3px 5px 10px rgba(0, 0, 0, 0), 0.4px 8.9px 17.9px rgba(0, 0, 0, 0), 0.8px 16.7px 33.4px rgba(0, 0, 0, 0), 2px 40px 80px rgba(0, 0, 0, 0); } .card.touch-close~.project-logo { -webkit-filter: unset; filter: unset; opacity: 1; } /* ------------ Gradient text animations ------------ */ span.gradient-hashtag { will-change: auto; background: -o-radial-gradient(center center, circle, #8385EF 0%, #9156ef 11%, #08CAE9 33%, #567eef 50%, #9156ef 61%, #08CAE9 77%, #8385EF 100%); background: radial-gradient(circle at center center, #8385EF 0%, #9156ef 11%, #08CAE9 33%, #567eef 50%, #9156ef 61%, #08CAE9 77%, #8385EF 100%); background-clip: text; color: transparent; -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-size: 2500% 2500%; -webkit-animation: gradientAnimation var(--grad-text-speed) linear infinite; animation: gradientAnimation var(--grad-text-speed) linear infinite; -o-animation: gradientAnimation var(--grad-text-speed) linear infinite; word-break: break-word; white-space: nowrap; width: 100%; } span.gradient-text_1 { will-change: auto; background: -o-radial-gradient(center center, circle, #FF00B8 0%, #5200FF 20%, #567eef 33%, #00c3ff 50%, #567eef 61%, #5200FF 77%, #FF00B8 100%); background: radial-gradient(circle at center center, #FF00B8 0%, #5200FF 20%, #567eef 33%, #00c3ff 50%, #567eef 61%, #5200FF 77%, #FF00B8 100%); background-clip: text; color: transparent; -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-size: 2500% 2500%; -webkit-animation: gradientAnimation var(--grad-text-speed) linear infinite; animation: gradientAnimation var(--grad-text-speed) linear infinite; -o-animation: gradientAnimation var(--grad-text-speed) linear infinite; word-break: break-word; white-space: nowrap; width: 100%; } span.gradient-text_2 { will-change: auto; background: -o-radial-gradient(center center, circle, #FF7A00 0%, #FF2E00 20%, #BD00FF 50%, #FF2E00 80%, #FF7A00 100%); background: radial-gradient(circle at center center, #FF7A00 0%, #FF2E00 20%, #BD00FF 50%, #FF2E00 80%, #FF7A00 100%); background-clip: text; color: transparent; -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-size: 2500% 2500%; -webkit-animation: gradientAnimation var(--grad-text-speed) linear infinite; animation: gradientAnimation var(--grad-text-speed) linear infinite; -o-animation: gradientAnimation var(--grad-text-speed) linear infinite; word-break: break-word; white-space: nowrap; width: 100%; } body.home span.gradient-text_1, body.home span.gradient-text_2 { -webkit-animation-play-state: paused; animation-play-state: paused; color: #121212; } body.home .portfolio.services span.gradient-text_1 { color: #fff; } body.body.home-portfolio-open .portfolio.services span.gradient-text_1 { color: transparent; } body.home-portfolio-open span.gradient-text_1, body.home-portfolio-open span.gradient-text_2 { -webkit-animation-play-state: running; animation-play-state: running; color: transparent; } #clientlist_container span.gradient-text_1, #clientlist_container span.gradient-text_2 { -webkit-animation-play-state: paused; animation-play-state: paused; color: #121212; } body.clients-open #clientlist_container span.gradient-text_1, body.clients-open #clientlist_container span.gradient-text_2, body.clientlist #clientlist_container span.gradient-text_1, body.clientlist #clientlist_container span.gradient-text_2 { -webkit-animation-play-state: running; animation-play-state: running; color: transparent; } body.menu-open .content span.gradient-text_1, body.menu-open .content span.gradient-text_2 { -webkit-animation-play-state: paused; animation-play-state: paused; color: #121212; } body.clients-open span.gradient-text_1, body.clients-open span.gradient-text_2 { -webkit-animation-play-state: running; animation-play-state: running; color: transparent; } span.gradient-text_contact_1, span.gradient-text_contact_2 { will-change: auto; background: -o-radial-gradient(center center, circle, #2ce997 0%, #2ce9e6 20%, #2ce997 33%, #ffee00 50%, #2ce997 61%, #2ce9e6 77%, #2ce997 100%); background: radial-gradient(circle at center center, #2ce997 0%, #2ce9e6 20%, #2ce997 33%, #ffee00 50%, #2ce997 61%, #2ce9e6 77%, #2ce997 100%); background-clip: text; color: transparent; -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-size: 2500% 2500%; word-break: break-word; white-space: nowrap; width: 100%; -webkit-animation: gradientAnimation var(--grad-text-speed) linear infinite; animation: gradientAnimation var(--grad-text-speed) linear infinite; -o-animation: gradientAnimation var(--grad-text-speed) linear infinite; -webkit-animation-play-state: paused; animation-play-state: paused; } span.gradient-text_contact_1 { will-change: auto; -webkit-animation-delay: -15s; animation-delay: -15s; -o-animation-delay: -15s; } body.contact-open span.gradient-text_contact_1, body.contact-open span.gradient-text_contact_2 { -webkit-animation-play-state: running; animation-play-state: running; } span.gradient-text_old_1 { background: -webkit-linear-gradient(180deg, #8385EF 0%, #9156ef 11%, #08CAE9 33%, #567eef 50%, #9156ef 61%, #08CAE9 77%, #8385EF 100%); } span.gradient-text_old_2 { background: -webkit-linear-gradient(180deg, #567eef 0%, #08CAE9 11%, #8385EF 33%, #567eef 50%, #8385EF 61%, #08CAE9 77%, #567eef 100%); } @-webkit-keyframes gradientAnimation { 0% { background-position: 300% 50%; } 50% { background-position: -300% 50%; } 100% { background-position: 300% 50%; } } @keyframes gradientAnimation { 0% { background-position: 300% 50%; } 50% { background-position: -300% 50%; } 100% { background-position: 300% 50%; } } /* ------------ Preloader courtesy of Prathamesh Koshti : https://codepen.io/prathameshkoshti/pen/bGNbMWr -------------- */ #loader { /* position: absolute; top: 50%; left: 50%; */ pointer-events: none; position: fixed; top: 50%; left: 50%; display: -webkit-box; display: -ms-flexbox; display: flex; width: -webkit-fit-content; width: -moz-fit-content; width: fit-content; -webkit-box-align: center; -ms-flex-align: center; align-items: center; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; -webkit-box-orient: horizontal; -webkit-box-direction: normal; -ms-flex-flow: row; flex-flow: row; z-index: 9999; } #loader-container { /* z-index: 0; position: absolute; transform: translate(-50%, -50%); display: flex; justify-content: center; align-items: center; */ z-index: 0; display: -webkit-box; display: -ms-flexbox; display: flex; } #loader-container>div { will-change: auto; width: 1svh; height: 1svh; border-radius: 100%; margin: 0.20svh; -webkit-animation: 5s preloader-bounce ease-in-out infinite; animation: 5s preloader-bounce ease-in-out infinite; } #loader-container.paused { opacity: 0; } #loader-container.paused>div { animation-play-state: paused; -webkit-animation-play-state: paused; } #loader-container>div.ready { will-change: auto; animation: unset; -webkit-animation: unset; -moz-animation: unset; -o-animation: unset; } .yellow { will-change: auto; background-color: var(--yellow); animation-delay: 0.50s !important; -webkit-animation-delay: 0.50s !important; -moz-animation-delay: 0.50s !important; -o-animation-delay: 0.50s !important; opacity: 0; } .red { will-change: auto; background-color: var(--red); animation-delay: 0.55s !important; -webkit-animation-delay: 0.55s !important; -moz-animation-delay: 0.55s !important; -o-animation-delay: 0.55s !important; opacity: 0; } .blue { will-change: auto; background-color: var(--blue); -webkit-animation-delay: 0.80s !important; animation-delay: 0.80s !important; opacity: 0; } .violet { will-change: auto; background-color: var(--violet); -webkit-animation-delay: 1.00s !important; animation-delay: 1.00s !important; opacity: 0; } @-webkit-keyframes preloader-bounce { 0%, 50%, 100% { -webkit-transform: scale(0); transform: scale(0); opacity: 0; } 25% { -webkit-transform: scale(1); transform: scale(1); opacity: 1; } 75% { -webkit-transform: scale(1); transform: scale(1); opacity: 1; } } @keyframes preloader-bounce { 0%, 50%, 100% { -webkit-transform: scale(0); transform: scale(0); opacity: 0; } 25% { -webkit-transform: scale(1); transform: scale(1); opacity: 1; } 75% { -webkit-transform: scale(1); transform: scale(1); opacity: 1; } } #clients-area_home { will-change: auto; opacity: 0; pointer-events: all; z-index: 9999998; position: fixed; bottom: var(--bottom); right: var(--right); display: -webkit-box; display: -ms-flexbox; display: flex; justify-items: center; -webkit-box-align: center; -ms-flex-align: center; align-items: center; -ms-grid-columns: -webkit-max-content; -ms-grid-columns: max-content; grid-template-columns: -webkit-max-content; grid-template-columns: max-content; -ms-grid-rows: -webkit-max-content; -ms-grid-rows: max-content; grid-template-rows: -webkit-max-content; grid-template-rows: max-content; grid-gap: 1svh; transition: 1s opacity ease-out; -webkit-transition: 1s opacity ease-out; -moz-transition: 1s opacity ease-out; -o-transition: 1s opacity ease-out; /* -webkit-animation: 15s ease home_appear; -moz-animation: 15s ease home_appear; -o-animation: 15s ease home_appear; animation: 15s ease home_appear; */ } #clients-area_home>*:nth-child(1) { -ms-grid-row: 1; -ms-grid-column: 1; } /* #clients-area_home p { border-bottom: 1px solid rgba(255, 255, 255, 0.5); padding: 0.5em 0em; } */ #clients-area_home button { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; -webkit-box-pack: end; -ms-flex-pack: end; justify-content: flex-end; pointer-events: all; cursor: pointer; } #clients-area_home .icn_plus { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; padding: 0.25em; background-repeat: no-repeat; background-size: 1em; background-image: url('_img/bolt-solid.svg'); background-position: center; -webkit-filter: invert(1); filter: invert(1); border: unset; border-radius: 100%; width: 1em; height: 1em; opacity: 0.5; } #clients-area_home:hover .icn_plus { border: 2px solid rgba(0, 0, 0, 1); } #clients-area_home:active .icn_plus, #clients-area_home:focus .icn_plus, #clients-area_home:link .icn_plus { border: 2px solid rgba(0, 0, 0, 1); background-color: #fff; -webkit-filter: unset; filter: unset; } /* body.clients-open #location-area p { display: none; } */ /* body.clients-open #location-area { -webkit-margin-before: 1em; margin-block-start: 1em; -webkit-margin-after: 1em; margin-block-end: 1em; } */ body.clients-open #location-area .timezone, body.clientlist #location-area .timezone.onPage { margin-left: unset; font-size: inherit; } /* body.clients-open #location-area .icn_location { display: none; } */ #clients-area_home.activated { opacity: 1; } #clients-area_home:hover { opacity: 1; } #clients-area_home button p { will-change: auto; -webkit-transition: 1s -webkit-transform var(--customEase); transition: 1s -webkit-transform var(--customEase); transition: 1s transform var(--customEase); transition: 1s transform var(--customEase), 1s -webkit-transform var(--customEase); -webkit-transition: 1s transform var(--customEase); -moz-transition: 1s transform var(--customEase); -o-transition: 1s transform var(--customEase); -webkit-transform: translateX(0); -ms-transform: translateX(0); transform: translateX(0); } #clients-area_home:hover button p { -webkit-transform: translateX(-0.5em); -ms-transform: translateX(-0.5em); transform: translateX(-0.5em); } /* Menu Bar for responsive */ /* body.home #menu_bar, body.home #menu_bar_clients { display: none; visibility: hidden; } */ #menu_bar, #menu_bar_clients { width: 100%; height: calc(var(--height-contact-btn-menu) + (calc(var(--top)*2.7))); background: rgba(255, 255, 255, 0.95); position: fixed; top: 0; left: 0; z-index: 9999998; display: none; opacity: 0; } #menu_bar .shadow, #menu_bar_clients .shadow_clients { will-change: auto; width: 100%; height: 100%; opacity: 0; -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); -webkit-box-shadow: 0px 8px 35px -26px rgba(66, 68, 90, 0.52); box-shadow: 0px 8px 35px -26px rgba(66, 68, 90, 0.52); } #menu_bar_clients { z-index: 2; } /* #menu_bar, #menu_bar_clients, */ #menu_bar .shadow, #menu_bar_clients .shadow_clients { transition: 1s opacity var(--customEase); -webkit-transition: 1s opacity var(--customEase); -moz-transition: 1s opacity var(--customEase); -o-transition: 1s opacity var(--customEase); } /* Page splash transition */ .transition_splash_container { will-change: auto; position: fixed; width: 100%; height: 100%; overflow: hidden; z-index: 0; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; background: #fff; } #lottie_pageTransition { display: -webkit-box; display: -ms-flexbox; display: flex; -ms-flex-item-align: center; align-self: center; /* --- WIDTH 100 BECAUSE ZOOMING IN LOTTIE --- */ /* width: 90%; */ width: 100%; } /* Menu CLIENTS */ #lottie_clients_bg, #lottie_clients_bg_clientlist { pointer-events: none; overflow: hidden; pointer-events: none; position: fixed; overflow: hidden; display: -webkit-box; display: -ms-flexbox; display: flex; -ms-flex-item-align: center; align-self: center; /* --- WIDTH 100 BECAUSE ZOOMING IN LOTTIE --- */ /* width: 90%; */ width: 100%; z-index: 1; opacity: 0; } /* body.clients-open #lottie_clients_bg { opacity: 1; } */ body.clients-open #lottie_clients_bg svg g path { fill: #fff; } /* body.light.clients-open #lottie_clients_bg svg g path { fill: #000; } */ #clientlist_insert, #clientlist_insert_clientspage { color: #121212; z-index: 1; } /* body.light #clientlist_insert { color: #fff; } */ /* #clientlist_insert_clientspage { color: #121212; } */ .client_cat { font-family: var(--font-averta_bold); font-size: var(--font-size-p); } .client_cat p { -webkit-margin-before: unset; margin-block-start: unset; -webkit-margin-after: unset; margin-block-end: unset; } /* MENU BG LOTTIE */ #lottie_menu_bg { pointer-events: none; overflow: hidden; pointer-events: none; position: fixed; overflow: hidden; display: -webkit-box; display: -ms-flexbox; display: flex; -ms-flex-item-align: center; align-self: center; /* --- WIDTH 100 BECAUSE ZOOMING IN LOTTIE --- */ /* width: 90%; */ width: 100%; z-index: 1; opacity: 0; } /* Animated Text Effect CLIENT LIST */ .rw-words { display: inline; } :root { --clientlist-duration: 20s; --clientlist-delay: 0s; --clientlist-height: 8em; --clientlist-text-height: 1.5em; --clientlist-padding: 0.25em; } .clients_row { display: -webkit-box; display: -ms-flexbox; display: flex; gap: 2em; } .clients_col { width: 20%; height: var(--clientlist-height); overflow: hidden; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: start; -ms-flex-align: start; align-items: flex-start; -webkit-box-pack: start; -ms-flex-pack: start; justify-content: flex-start; -webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-flow: column; flex-flow: column; row-gap: 1em; } .scroll-box { width: 100%; height: var(--clientlist-height); overflow: hidden; } .scroll-text { margin: 0; padding: 0; white-space: nowrap; -webkit-animation: scrollUp var(--clientlist-duration) linear infinite normal var(--clientlist-delay); animation: scrollUp var(--clientlist-duration) linear infinite normal var(--clientlist-delay); -webkit-animation-play-state: paused; animation-play-state: paused; } .scroll-box.expanded .list_static.activated li p { width: 95%; white-space: nowrap; overflow: hidden; -o-text-overflow: ellipsis; text-overflow: ellipsis; display: block; } body.clients-open .scroll-text, body.clientlist .scroll-text { -webkit-animation-play-state: running; animation-play-state: running; } .scroll-text li { opacity: 1; height: var(--clientlist-text-height); padding-inline: var(--clientlist-padding); list-style: none; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-pack: justify; -ms-flex-pack: justify; justify-content: space-between; -webkit-column-gap: 1em; -moz-column-gap: 1em; column-gap: 1em; pointer-events: all } #menuToggle .scroll-text li a, body.clientlist .scroll-text li a { /* width: 100%; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-pack: justify; -ms-flex-pack: justify; justify-content: space-between; */ color: #121212; color: #121212; width: 90%; white-space: nowrap; overflow: hidden; -o-text-overflow: ellipsis; text-overflow: ellipsis; } /* body.light #menuToggle .scroll-text li a { color: #fff; } */ /* #menuToggle .scroll-text li a:hover, body.light #menuToggle .scroll-text li a:hover, body.clientlist .scroll-text li a:hover { color: #01f2b2; } */ .scroll-text li span { opacity: 0.15; } @-webkit-keyframes scrollUp { from { -webkit-transform: translateY(0); transform: translateY(0); } to { -webkit-transform: translateY(-50%); transform: translateY(-50%); } } @keyframes scrollUp { from { -webkit-transform: translateY(0); transform: translateY(0); } to { -webkit-transform: translateY(-50%); transform: translateY(-50%); } } /* ------------ Menu courtesy of Eric Terwan : https://codepen.io/erikterwan/pen/EVzeRP -------------- */ nav { -ms-grid-column: 2; grid-column: 2; z-index: 99999; /* border: 1px solid green; */ } #menuToggle { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; -webkit-box-align: center; -ms-flex-align: center; align-items: center; pointer-events: all; cursor: pointer; padding: 1svh; z-index: 999999; -webkit-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none; opacity: 0.25; /* transition: transform 0.5s var(--burgerEase), opacity 0.55s ease; -webkit-transition: transform 0.5s var(--burgerEase), opacity 0.55s ease; -moz-transition: transform 0.5s var(--burgerEase), opacity 0.55s ease; -o-transition: transform 0.5s var(--burgerEase), opacity 0.55s ease; */ } #menuToggle:hover { opacity: 1; } #menuToggle ul:not(.scroll-text) a { will-change: auto; text-decoration: none; color: #fff; transition: color 0.3s ease; -webkit-transition: color 0.3s ease; -moz-transition: color 0.3s ease; -o-transition: color 0.3s ease; } #menuToggle ul:not(.scroll-text) li:hover, #clientlist_insert ul li:hover a, #clientlist_insert_clientspage ul li:hover a { /* color: #01f2b2; */ background: -o-radial-gradient(center center, circle, #FF00B8 0%, #5200FF 20%, #567eef 33%, #00c3ff 50%, #567eef 61%, #5200FF 77%, #FF00B8 100%); background: radial-gradient(circle at center center, #FF00B8 0%, #5200FF 20%, #567eef 33%, #00c3ff 50%, #567eef 61%, #5200FF 77%, #FF00B8 100%); background-clip: text; color: transparent; -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-size: 2500% 2500%; -webkit-animation: gradientAnimation var(--grad-text-speed) linear infinite; animation: gradientAnimation var(--grad-text-speed) linear infinite; -o-animation: gradientAnimation var(--grad-text-speed) linear infinite; word-break: break-word; white-space: nowrap; } ul#menu li:hover a:before, ul#menu li:hover a:after { will-change: auto; background: -o-radial-gradient(center center, circle, #8385EF 0%, #9156ef 11%, #08CAE9 33%, #567eef 50%, #9156ef 61%, #08CAE9 77%, #8385EF 100%); background: radial-gradient(circle at center center, #8385EF 0%, #9156ef 11%, #08CAE9 33%, #567eef 50%, #9156ef 61%, #08CAE9 77%, #8385EF 100%); background-clip: text; color: transparent; -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-size: 2500% 2500%; -webkit-animation: gradientAnimation var(--grad-text-speed) linear infinite; animation: gradientAnimation var(--grad-text-speed) linear infinite; -o-animation: gradientAnimation var(--grad-text-speed) linear infinite; word-break: break-word; white-space: nowrap; } #menuToggle input { pointer-events: all; cursor: pointer; display: -webkit-box; display: -ms-flexbox; display: flex; position: fixed; width: var(--height-contact-btn-menu); height: var(--height-contact-btn-menu); margin: unset; padding: unset; /* width: 4svh; height: 4svh; top: 1.5svh; right: 0; */ opacity: 0; /* hide this */ z-index: 9999999; /* and place it over the hamburger */ /* -webkit-touch-callout: none; */ /* -webkit-tap-highlight-color: rgba(0, 0, 0, 0); */ } /* * Just a quick hamburger */ #menuToggle #menu-anim span { will-change: auto; display: block; width: 2.3vh; height: 0.4vh; position: relative; background: #fff; border-radius: 1vh; z-index: 1; opacity: 1; -webkit-transform-origin: center; -ms-transform-origin: center; transform-origin: center; -webkit-transition: opacity 0.55s ease, -webkit-transform 0.33s var(--burgerEase); transition: opacity 0.55s ease, -webkit-transform 0.33s var(--burgerEase); transition: transform 0.33s var(--burgerEase), opacity 0.55s ease; transition: transform 0.33s var(--burgerEase), opacity 0.55s ease, -webkit-transform 0.33s var(--burgerEase); -webkit-transition: transform 0.33s var(--burgerEase), opacity 0.55s ease; -moz-transition: transform 0.33s var(--burgerEase), opacity 0.55s ease; -o-transition: transform 0.33s var(--burgerEase), opacity 0.55s ease; } body.light #menuToggle, body.clients-open #menuToggle { opacity: 1; } #menuToggle #menu-anim span:nth-last-child(1), #menuToggle #menu-anim span:nth-last-child(2) { margin-top: 0.34vh; } /* * Transform all the slices of hamburger * into a crossmark. */ #menuToggle input:checked~#menu-anim span { -webkit-transform: rotate(135deg) translate(0.45vh, -0.55vh); -ms-transform: rotate(135deg) translate(0.45vh, -0.55vh); transform: rotate(135deg) translate(0.45vh, -0.55vh); opacity: 1; } body.light #menuToggle input:checked~#menu-anim span { will-change: auto; -webkit-transition: background 0.25s ease-out 0.5s, opacity 0.55s ease, -webkit-transform 0.33s var(--burgerEase); transition: background 0.25s ease-out 0.5s, opacity 0.55s ease, -webkit-transform 0.33s var(--burgerEase); transition: background 0.25s ease-out 0.5s, transform 0.33s var(--burgerEase), opacity 0.55s ease; transition: background 0.25s ease-out 0.5s, transform 0.33s var(--burgerEase), opacity 0.55s ease, -webkit-transform 0.33s var(--burgerEase); -webkit-transition: background 0.25s ease-out 0.5s, transform 0.33s var(--burgerEase), opacity 0.55s ease; -moz-transition: background 0.25s ease-out 0.5s, transform 0.33s var(--burgerEase), opacity 0.55s ease; -o-transition: background 0.25s ease-out 0.5s, transform 0.33s var(--burgerEase), opacity 0.55s ease; } /* TEST WIP TESTING NO HAMBURGER ANIMATION ON CLIENTS BUTTON */ body.clients-open #menuToggle input:checked~#menu-anim span { -webkit-transition: unset; -o-transition: unset; transition: unset; } body.clients-open #menuToggle input:checked~#menu-bg { -webkit-transition: unset; -o-transition: unset; transition: unset; } body.clients-open #contact { -webkit-transition: unset; -o-transition: unset; transition: unset; background: var(--brand-color-gray-transparency); } body.light #contact, body.clients-open #contact { -webkit-transition: unset; -o-transition: unset; transition: unset; } body.light.clients-open #contact.menu-delay { -webkit-transition: unset; -o-transition: unset; transition: unset; /* color: #fff; */ } body.light.clients-open #contact:hover { background: #fff; } /* body.light.clients-open #contact:hover #icn_contact { -webkit-filter: unset; filter: unset; } */ body.light.clients-open #contact { -webkit-transition: unset; -o-transition: unset; transition: unset; color: #fff; } body.light.clients-open #lottie_logo_left-stacked g.name path { -webkit-transition: unset; -o-transition: unset; transition: unset; fill: #fff; } body.light.clients-open #lottie_logo_left-stacked.logo-light g.name path { -webkit-transition: unset; -o-transition: unset; transition: unset; fill: #fff; } body.light #lottie_logo_left-stacked.contact-no-delay g.name path { -webkit-transition: unset; -o-transition: unset; transition: unset; fill: #fff; } #contact-bg.show, #clientlist-bg.show { -webkit-transition: unset; -o-transition: unset; transition: unset; opacity: 1; } /* * But let's hide the middle one. */ #menuToggle input:checked~#menu-anim span:nth-last-child(2) { -webkit-transform: rotate(45deg) scale(0.2, 0.2); -ms-transform: rotate(45deg) scale(0.2, 0.2); transform: rotate(45deg) scale(0.2, 0.2); } /* * Ohyeah and the last one should go the other direction */ #menuToggle input:checked~#menu-anim span:nth-last-child(1) { -webkit-transform: rotate(-135deg) translate(0.55vh, 0.55vh); -ms-transform: rotate(-135deg) translate(0.55vh, 0.55vh); transform: rotate(-135deg) translate(0.55vh, 0.55vh) } #menu-anim { will-change: auto; } #menuToggle input:checked~#menu-anim { will-change: auto; -webkit-animation: menu_icn_animation 1s; animation: menu_icn_animation 1s; } @-webkit-keyframes menu_icn_animation { 0% { -webkit-animation-timing-function: ease-in; -webkit-transform: scale(1); transform: scale(1); } 33% { -webkit-transform: scale(1.25); transform: scale(1.25); } 100% { -webkit-animation-timing-function: ease-out; -webkit-transform: scale(1); transform: scale(1); } } @keyframes menu_icn_animation { 0% { -webkit-animation-timing-function: ease-in; animation-timing-function: ease-in; -webkit-transform: scale(1); transform: scale(1); } 33% { -webkit-transform: scale(1.25); transform: scale(1.25); } 100% { -webkit-animation-timing-function: ease-out; animation-timing-function: ease-out; -webkit-transform: scale(1); transform: scale(1); } } /* * Make this absolute positioned * at the top left of the screen */ #menu { will-change: auto; pointer-events: none; list-style-type: none; text-align: center; position: fixed; width: 100%; height: 100%; left: 0; top: 0; padding: unset; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-flow: column; flex-flow: column; -webkit-box-align: center; -ms-flex-align: center; align-items: center; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; -webkit-margin-before: unset; margin-block-start: unset; -webkit-margin-after: unset; margin-block-end: unset; -webkit-font-smoothing: antialiased; /* to stop flickering of text in safari */ -webkit-transform-origin: center; -ms-transform-origin: center; transform-origin: center; -webkit-transform: scale(2); -ms-transform: scale(2); transform: scale(2); opacity: 0; -webkit-transition: opacity 1s var(--customEase) 0s, -webkit-transform 1s var(--customEase) 0s; transition: opacity 1s var(--customEase) 0s, -webkit-transform 1s var(--customEase) 0s; transition: opacity 1s var(--customEase) 0s, transform 1s var(--customEase) 0s; transition: opacity 1s var(--customEase) 0s, transform 1s var(--customEase) 0s, -webkit-transform 1s var(--customEase) 0s; -webkit-transition: opacity 1s var(--customEase) 0s, transform 1s var(--customEase) 0s; -moz-transition: opacity 1s var(--customEase) 0s, transform 1s var(--customEase) 0s; -o-transition: opacity 1s var(--customEase) 0s, transform 1s var(--customEase) 0s; } #menuToggle input:checked~ul#menu { will-change: auto; /* pointer-events: all; */ opacity: 1; -webkit-transform: scale(1); -ms-transform: scale(1); transform: scale(1); -webkit-transition: opacity 3s var(--customEase) 0.5s, -webkit-transform 2s var(--customEase) 0.5s; transition: opacity 3s var(--customEase) 0.5s, -webkit-transform 2s var(--customEase) 0.5s; transition: opacity 3s var(--customEase) 0.5s, transform 2s var(--customEase) 0.5s; transition: opacity 3s var(--customEase) 0.5s, transform 2s var(--customEase) 0.5s, -webkit-transform 2s var(--customEase) 0.5s; -webkit-transition: opacity 3s var(--customEase) 0.5s, transform 2s var(--customEase) 0.5s; -moz-transition: opacity 3s var(--customEase) 0.5s, transform 2s var(--customEase) 0.5s; -o-transition: opacity 3s var(--customEase) 0.5s, transform 2s var(--customEase) 0.5s; } #menuToggle input:checked~ul#menu li a { pointer-events: all; } /* fix for clicking contact button from menu in open state */ #menuToggle input:checked~ul#menu.cancel { will-change: auto; -webkit-transition: opacity 1s var(--customEase) 0s, -webkit-transform 1s var(--customEase) 0s; transition: opacity 1s var(--customEase) 0s, -webkit-transform 1s var(--customEase) 0s; transition: opacity 1s var(--customEase) 0s, transform 1s var(--customEase) 0s; transition: opacity 1s var(--customEase) 0s, transform 1s var(--customEase) 0s, -webkit-transform 1s var(--customEase) 0s; -webkit-transition: opacity 1s var(--customEase) 0s, transform 1s var(--customEase) 0s; -moz-transition: opacity 1s var(--customEase) 0s, transform 1s var(--customEase) 0s; -o-transition: opacity 1s var(--customEase) 0s, transform 1s var(--customEase) 0s; opacity: 0; } ul#menu li a:before, ul#menu li a:after { content: ""; position: absolute; -webkit-transition: opacity 1s var(--customEase) 0s, -webkit-transform 1s var(--customEase) 0s; transition: opacity 1s var(--customEase) 0s, -webkit-transform 1s var(--customEase) 0s; transition: opacity 1s var(--customEase) 0s, transform 1s var(--customEase) 0s; transition: opacity 1s var(--customEase) 0s, transform 1s var(--customEase) 0s, -webkit-transform 1s var(--customEase) 0s; -webkit-transition: opacity 1s var(--customEase) 0s, transform 1s var(--customEase) 0s; -moz-transition: opacity 1s var(--customEase) 0s, transform 1s var(--customEase) 0s; -o-transition: opacity 1s var(--customEase) 0s, transform 1s var(--customEase) 0s; opacity: 0; } ul#menu li a:before { width: 1em; margin-left: -1em; -webkit-transform: translateX(-100%); -ms-transform: translateX(-100%); transform: translateX(-100%); } ul#menu li a:after { width: 1em; margin-left: 0em; -webkit-transform: translateX(100%); -ms-transform: translateX(100%); transform: translateX(100%); } ul#menu li:hover a:before { content: "- "; -webkit-transform: translateX(0); -ms-transform: translateX(0); transform: translateX(0); opacity: 1; } ul#menu li:hover a:after { content: " -"; -webkit-transform: translateX(0); -ms-transform: translateX(0); transform: translateX(0); opacity: 1; } #menu-bg { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; } #menuToggle input~#menu-bg { will-change: auto; pointer-events: none; position: fixed; position: fixed; width: 100%; height: 100%; left: 0; top: 0; opacity: 0; transition: opacity 0.75s var(--customEase) 0.5s; -webkit-transition: opacity 0.75s var(--customEase) 0.5s; -moz-transition: opacity 0.75s var(--customEase) 0.5s; -o-transition: opacity 0.75s var(--customEase) 0.5s; background: #000; } #menuToggle input~#menu-bg #menu_bg_anim { will-change: auto; width: 100%; height: 100%; -webkit-animation: menu_bg_animation 10s ease infinite; animation: menu_bg_animation 10s ease infinite; -webkit-animation-play-state: paused; animation-play-state: paused; } #menuToggle.open input~#menu-bg #menu_bg_anim { -webkit-animation-play-state: running; animation-play-state: running; } #menuToggle.open input~#menu-bg.hide #menu_bg_anim { -webkit-animation-play-state: paused; animation-play-state: paused; } @-webkit-keyframes menu_bg_animation { 0% { background-position: 0% 50% } 50% { background-position: 100% 50% } 100% { background-position: 0% 50% } } @keyframes menu_bg_animation { 0% { background-position: 0% 50% } 50% { background-position: 100% 50% } 100% { background-position: 0% 50% } } /* #texture_grain { background-size: 50px; width: 100vw; height: 100svh; background-image: url('../_css/_img/texture_grain.png'); background-repeat: repeat; margin: unset; padding: unset; max-width: unset; position: absolute; top: 0; z-index: 999999; opacity: 0.2; } */ #menuToggle input:checked~#menu-bg { pointer-events: none; opacity: 1; } #menuToggle.open { opacity: 1; } #menu li { font-size: var(--font-size-menu); padding: var(--font-padding-menu); } /* * And let's slide it in from the left */ #menuToggle input:checked~ul { -webkit-transform: none; -ms-transform: none; transform: none; } #nav-top { will-change: auto; /* pointer-events: none; */ top: calc(var(--top) + 1svh); right: var(--right); position: fixed; z-index: 9999998; display: -ms-grid; display: grid; justify-items: end; -webkit-box-align: center; -ms-flex-align: center; align-items: center; -ms-grid-columns: -webkit-max-content; -ms-grid-columns: max-content; grid-template-columns: -webkit-max-content; grid-template-columns: max-content; -ms-grid-rows: -webkit-max-content; -ms-grid-rows: max-content; grid-template-rows: -webkit-max-content; grid-template-rows: max-content; grid-gap: calc(var(--left) * 0.66); -webkit-animation: 15s ease home_appear; animation: 15s ease home_appear; } #nav-top>*:nth-child(1) { -ms-grid-row: 1; -ms-grid-column: 1; } /* --------- START OF CONTACT BTN LIGHT ----------- */ /* Body light contact button */ /* var(--brand-color-gray-transparency) is var(--brand-color-gray) blue replica */ body.clients-open ul#menu { display: none; } body.light #contact { will-change: auto; transition: width 0.25s ease-out, background 0.25s ease-out, color 0.25s ease-out; -webkit-transition: width 0.25s ease-out, background 0.25s ease-out, color 0.25s ease-out; -moz-transition: width 0.25s ease-out, background 0.25s ease-out, color 0.25s ease-out; -o-transition: width 0.25s ease-out, background 0.25s ease-out, color 0.25s ease-out; background: var(--brand-color-gray-transparency); color: #121212; } /* body.light.menu-open.clients-open.noScroll #contact { color: #fff; } body.light.clients-open.menu-open #contact:hover #icn_contact { -webkit-filter: unset; filter: unset; } */ body.light #contact:hover { background: #000; color: #fff; } /* TEST WIP */ /* body.light.menu-open #contact, body.clients-open #contact { will-change: auto; transition: width 0.25s ease-out, color 0.25s ease-out 0.25s, background 0.5s ease-out 0.5s; -webkit-transition: width 0.25s ease-out, color 0.25s ease-out 0.5s, background 0.5s ease-out 0.5s; -moz-transition: width 0.25s ease-out, color 0.25s ease-out 0.5s, background 0.5s ease-out 0.5s; -o-transition: width 0.25s ease-out, color 0.25s ease-out 0.5s, background 0.5s ease-out 0.5s; color:#fff; } */ body.clients-open #contact { color: #121212; } /* TEST WIP */ /* body.light.menu-open.noScroll #contact { will-change: auto; transition: width 0.25s ease-out, background 0.25s ease-out, color 0.25s ease-out; -webkit-transition: width 0.25s ease-out, background 0.25s ease-out, color 0.25s ease-out; -moz-transition: width 0.25s ease-out, background 0.25s ease-out, color 0.25s ease-out; -o-transition: width 0.25s ease-out, background 0.25s ease-out, color 0.25s ease-out; } */ /* body.light.menu-open.noScroll #contact:hover { background: #fff; color: #000; } */ body.clients-open.noScroll #contact:hover { background: #000; color: #fff; } body.light #contact.menu-delay { color: #fff; } body.clients-open #contact.menu-delay { color: #121212; } body.light #menuToggle #menu-anim span { background: #121212; } /* Home Portfolio Transition menu styling */ body.menu-delay.home-portfolio-open #menuToggle #menu-anim span { -webkit-transition: background 0.25s ease-out 0.15s; -o-transition: background 0.25s ease-out 0.15s; transition: background 0.25s ease-out 0.15s; } body.menu-delay.home-portfolio-open #menuToggle { -webkit-transition: opacity 0.25s ease-out 0.15s; -o-transition: opacity 0.25s ease-out 0.15s; transition: opacity 0.25s ease-out 0.15s; } body.menu-delay.home-portfolio-open #contact { -webkit-transition: width 0.25s ease-out 0.25s, background 0.25s ease-out 0.25s, color 0.25s ease-out 0.25s; -o-transition: width 0.25s ease-out 0.25s, background 0.25s ease-out 0.25s, color 0.25s ease-out 0.25s; transition: width 0.25s ease-out 0.25s, background 0.25s ease-out 0.25s, color 0.25s ease-out 0.25s; } body.logo-delay.home-portfolio-open #icn_contact.show { -webkit-filter: invert(1); filter: invert(1); } body.logo-delay.home-portfolio-open #lottie_logo_left-stacked g.name path { fill: #fff; } body.light.menu-open #menuToggle #menu-anim span { background: #fff; } /* #menuToggle.contact-no-delay #menu-anim span { background: #fff; } */ body.clients-open #menuToggle #menu-anim span { background: #121212; } body.clients-open #menuToggle #menu-anim span { background: #121212; } body.clients-open #menuToggle.menu-delay #menu-anim span { background: #121212; } body.light #menuToggle.menu-delay #menu-anim span { background: #fff; } body.light.clients-open #menuToggle.menu-delay #menu-anim span { background: #121212; } body.light #menuToggle.contact-no-delay input:checked~#menu-anim span { will-change: auto; transition: width 0.25s ease-out, background 0.25s ease-out, color 0.25s ease-out; -webkit-transition: width 0.25s ease-out, background 0.25s ease-out, color 0.25s ease-out; -moz-transition: width 0.25s ease-out, background 0.25s ease-out, color 0.25s ease-out; -o-transition: width 0.25s ease-out, background 0.25s ease-out, color 0.25s ease-out; /* background: #fff; */ } body.light #icn_contact, body.clients-open #icn_contact { -webkit-filter: unset; filter: unset; } body.light #contact:hover #icn_contact, body.clients-open #contact:hover #icn_contact { -webkit-filter: invert(1); filter: invert(1); } body.light .contact-btn.remove #contact, body.clients-open .contact-btn.remove #contact { will-change: auto; transition: width 0.25s ease-out, background 0.25s ease-out, color 0.25s ease-out; -webkit-transition: width 0.25s ease-out, background 0.25s ease-out, color 0.25s ease-out; -moz-transition: width 0.25s ease-out, background 0.25s ease-out, color 0.25s ease-out; -o-transition: width 0.25s ease-out, background 0.25s ease-out, color 0.25s ease-out; background: rgba(255, 255, 255, 0) !important; } body.light.menu-open #icn_contact /* , body.light.clients-open.menu-open #icn_contact */ { -webkit-filter: invert(1); filter: invert(1); } /* body.clients-open.menu-open #icn_contact.show { -webkit-transition: unset; -o-transition: unset; transition: unset; } */ body.clients-open.menu-open #icn_contact { -webkit-filter: unset; filter: unset; /* -webkit-transition: unset; -o-transition: unset; transition: unset; */ } body.clients-open.menu-open #contact.hide { -webkit-transition: unset; -o-transition: unset; transition: unset; } body.clients-open.menu-open #contact.hide p { -webkit-transition: unset; -o-transition: unset; transition: unset; } body.clients-open.menu-open #contact:hover { background: #121212; } /* body.clients-open.menu-open #contact:hover #icn_contact { -webkit-filter: invert(1); filter: invert(1); } */ /* END OF CONTACT BTN LIGHT */ #contact { will-change: auto; pointer-events: all; cursor: pointer; background: rgba(255, 255, 255, 0.25); color: #fff; width: var(--width-contact-btn-menu); height: var(--height-contact-btn-menu); border-radius: var(--roundness-contact-btn-menu); padding: var(--padding-contact-btn-menu); display: -ms-grid; display: grid; -webkit-box-align: center; -ms-flex-align: center; align-items: center; -ms-flex-line-pack: center; align-content: center; overflow: hidden; z-index: 999999; -ms-grid-column: 1; grid-column: 1; transition: width 0.25s ease-out, background 0.25s ease-out, color 0.25s ease-out; -webkit-transition: width 0.25s ease-out, background 0.25s ease-out, color 0.25s ease-out; -moz-transition: width 0.25s ease-out, background 0.25s ease-out, color 0.25s ease-out; -o-transition: width 0.25s ease-out, background 0.25s ease-out, color 0.25s ease-out; } #contact:hover, body.light.menu-open:not(.clients-open) #contact:hover { background: rgba(255, 255, 255, 1); color: #000; } #contact:hover #icn_contact { -webkit-filter: unset; filter: unset; } .contact-btn.remove #icn_contact { -webkit-filter: invert(1) !important; filter: invert(1) !important; opacity: 0; } #contact p { will-change: auto; -ms-grid-column: 1; grid-column: 1; -ms-grid-row: 1; grid-row: 1; font-family: var(--font-averta_semibold); font-size: var(--font-size-contact-btn-menu); opacity: 1; transition: opacity 0.15s ease-out; -webkit-transition: opacity 0.15s ease-out; -moz-transition: opacity 0.15s ease-out; -o-transition: opacity 0.15s ease-out; } #icn_contact { -ms-grid-column: 1; grid-column: 1; -ms-grid-row: 1; grid-row: 1; background-image: url('_img/envelope-solid.svg'); background-repeat: no-repeat; -webkit-filter: invert(1); filter: invert(1); width: var(--width-icn-contact); height: var(--height-icn-contact); margin: 0px auto; opacity: 0; } #contact.disable { pointer-events: none; } #contact.hide p { will-change: auto; transition: opacity 0.15s ease-out; -webkit-transition: opacity 0.15s ease-out; -moz-transition: opacity 0.15s ease-out; -o-transition: opacity 0.15s ease-out; opacity: 0; } #contact.show p { will-change: auto; transition: opacity 0.5s ease-out 0.15s; -webkit-transition: opacity 0.5s ease-out 0.15s; -moz-transition: opacity 0.5s ease-out 0.15s; -o-transition: opacity 0.5s ease-out 0.15s; opacity: 1; } #contact.hide { width: var(--width-contact-btn-menu-icn); } .contact-btn.remove { will-change: auto; transition: opacity 0.33s ease 1s; -webkit-transition: opacity 0.33s ease 1s; -moz-transition: opacity 0.33s ease 1s; -o-transition: opacity 0.33s ease 1s; opacity: 1; pointer-events: none !important; cursor: pointer !important; } .contact-btn.remove #contact.hide { background: rgba(183, 231, 255, 0); width: calc(var(--width-icn-contact)*2.1); opacity: 0.3; mix-blend-mode: multiply; } #icn_contact.show { will-change: auto; transition: opacity 0.5s ease-out 0.25s; -webkit-transition: opacity 0.5s ease-out 0.25s; -moz-transition: opacity 0.5s ease-out 0.25s; -o-transition: opacity 0.5s ease-out 0.25s; opacity: 1; } button.contact-btn { will-change: auto; z-index: 999999; transition: opacity 0.5s var(--customEase) 0.25s; -webkit-transition: opacity 0.5s var(--customEase) 0.25s; -moz-transition: opacity 0.5s var(--customEase) 0.25s; -o-transition: opacity 0.5s var(--customEase) 0.25s; -webkit-tap-highlight-color: rgba(0, 0, 0, 0); } button { color: inherit; padding: unset; /* -webkit-tap-highlight-color: rgba(0, 0, 0, 0); */ } #menu-bg.open { opacity: 1 !important; } #menu.hide { opacity: 0 !important; pointer-events: none !important; } button.contact-btn.hide { opacity: 0; } button.contact-btn.hide #contact { pointer-events: none; } #contact-bg, #clientlist-bg { will-change: auto; pointer-events: none; width: 100%; height: 100%; position: fixed; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; -webkit-box-align: center; -ms-flex-align: center; align-items: center; top: 0; left: 0; opacity: 0; transition: opacity 0.75s var(--customEase); -webkit-transition: opacity 0.75s var(--customEase); -moz-transition: opacity 0.75s var(--customEase); -o-transition: opacity 0.75s var(--customEase); } .contact_bg_color { width: 100%; height: 100%; background: #006EE6; } #contact-bg.show, #clientlist-bg.show { opacity: 1; } .clientlist_bg_color { width: 100%; height: 100%; background: #fff; } /* MENU BG EFFECTS UNUSED */ .styleTEMP { background: -o-radial-gradient(center center, circle, #FF00B8 0%, #5200FF 20%, #567eef 33%, #00c3ff 50%, #567eef 61%, #5200FF 77%, #FF00B8 100%); background: radial-gradient(circle at center center, #FF00B8 0%, #5200FF 20%, #567eef 33%, #00c3ff 50%, #567eef 61%, #5200FF 77%, #FF00B8 100%); } /* :root { --pulse-size-x: 25vw; --pulse-size-y: 60vw; --pulse-line: 3px; --pulse-growth: 50; --pulse-color-1: #01f2b2; --pulse-color-2: #00c3ff; --pulse-color-3: #5200FF; --pulse-color-4: #FF00B8; } .pulse_container_left { width: 100%; height: 100%; pointer-events: none; position: fixed; margin-left: -40vw; display: flex; justify-content: start; } .pulse_container_right { width: 100%; height: 100%; pointer-events: none; position: fixed; margin-right: -40vw; display: flex; justify-content: end; } .pulse_circle { position: relative; display: flex; justify-content: center; align-items: center; opacity: 0; } .small-circle { width: calc(var(--pulse-size-x) + calc(var(--pulse-size-x) * var(--pulse-growth) * 1 / 100)); height: calc(var(--pulse-size-y) + calc(var(--pulse-size-y) * var(--pulse-growth) * 1 / 100)); border: var(--pulse-line) solid var(--pulse-color-1); border-radius: 100%; position: absolute; -webkit-animation: pulsate infinite ease-in-out 2s; animation: pulsate infinite ease-in-out 2s; display: flex; justify-content: center; align-items: center; } .medium-circle { width: calc(var(--pulse-size-x) + calc(var(--pulse-size-x) * var(--pulse-growth) * 2 / 100)); height: calc(var(--pulse-size-y) + calc(var(--pulse-size-y) * var(--pulse-growth) * 2 / 100)); border: var(--pulse-line) solid var(--pulse-color-2); position: absolute; border-radius: 100%; background: transparent; -webkit-animation: pulsate infinite ease-in-out 2s 0.3s; animation: pulsate infinite ease-in-out 2s 0.3s; display: flex; justify-content: center; align-items: center; } .big-circle { width: calc(var(--pulse-size-x) + calc(var(--pulse-size-x) * var(--pulse-growth) * 3 / 100)); height: calc(var(--pulse-size-y) + calc(var(--pulse-size-y) * var(--pulse-growth) * 3 / 100)); border: var(--pulse-line) solid var(--pulse-color-3); position: absolute; border-radius: 100%; background: transparent; -webkit-animation: pulsate infinite ease-in-out 2s 0.6s; animation: pulsate infinite ease-in-out 2s 0.6s; display: flex; justify-content: center; align-items: center; } .huge-circle { width: calc(var(--pulse-size-x) + calc(var(--pulse-size-x) * var(--pulse-growth) * 4 / 100)); height: calc(var(--pulse-size-y) + calc(var(--pulse-size-y) * var(--pulse-growth) * 4 / 100)); border: var(--pulse-line) solid var(--pulse-color-4); position: absolute; border-radius: 100%; background: transparent; -webkit-animation: pulsate infinite ease-in-out 2s 0.9s; animation: pulsate infinite ease-in-out 2s 0.9s; display: flex; justify-content: center; align-items: center; } .small-circle, .medium-circle, .big-circle, .huge-circle { } body.menu-open #menuToggle.open .small-circle, body.menu-open #menuToggle.open .medium-circle, body.menu-open #menuToggle.open .big-circle, body.menu-open #menuToggle.open .huge-circle { -webkit-animation-play-state: running; animation-play-state: running; } body.menu-open #menuToggle.open .pulse_circle { opacity: 0.25; } @-webkit-keyframes pulsate { 0% { -webkit-transform: scale(1, 1); transform: scale(1, 1); opacity: 0; } 50% { opacity: 1; } 100% { -webkit-transform: scale(1.3, 1.3); transform: scale(1.3, 1.3); opacity: 0; } } @keyframes pulsate { 0% { -webkit-transform: scale(1, 1); transform: scale(1, 1); opacity: 0; } 50% { opacity: 1; } 100% { -webkit-transform: scale(1.3, 1.3); transform: scale(1.3, 1.3); opacity: 0; } } @-moz-keyframes pulsate { 0% { -webkit-transform: scale(1, 1); transform: scale(1, 1); opacity: 0; } 50% { opacity: 1; } 100% { -webkit-transform: scale(1.3, 1.3); transform: scale(1.3, 1.3); opacity: 0; } } @-o-keyframes pulsate { 0% { -webkit-transform: scale(1, 1); transform: scale(1, 1); opacity: 0; } 50% { opacity: 1; } 100% { -webkit-transform: scale(1.3, 1.3); transform: scale(1.3, 1.3); opacity: 0; } } */ /* CONTACT MENU EFFECT */ #ball_container { width: 100%; height: 20%; z-index: -1; position: relative; top: -140%; } .ball { position: absolute; border-radius: 100%; opacity: 0.5; } /* ------------ Hero Cover Area -------------- */ .hero_cover_area_home { position: absolute; margin: 0px auto; padding: 0px; height: 100vh; height: 100svh; cursor: default; background: none; z-index: 9998; width: 100%; overflow: hidden; } #lottie_logo_left-stacked { will-change: auto; width: var(--width-logo-andre); left: var(--left); top: var(--top); position: fixed; z-index: 9999999; pointer-events: all; cursor: pointer; opacity: 0; transition: 1s opacity ease-out; -webkit-transition: 1s opacity ease-out; -moz-transition: 1s opacity ease-out; -o-transition: 1s opacity ease-out; /* -webkit-touch-callout: none; */ /* -webkit-tap-highlight-color: rgba(0, 0, 0, 0); */ } body.light #lottie_logo_left-stacked g.name path { fill: #121212; } body.light #lottie_logo_left-stacked.logo-light g.name path { fill: #fff; } body.light #lottie_logo_left-stacked.logo-dark g.name path, body.clients-open #lottie_logo_left-stacked.logo-dark g.name path { fill: #121212; } body.light #lottie_logo_left-stacked:hover #accent_white, body.clients-open #lottie_logo_left-stacked:hover #accent_white { opacity: 0; } body.light #lottie_logo_left-stacked #accent_blue, body.clients-open #lottie_logo_left-stacked #accent_blue { opacity: 1; } body.light #lottie_logo_left-stacked:hover #accent_blue, body.clients-open #lottie_logo_left-stacked:hover #accent_blue { opacity: 0; } body.light #lottie_logo_left-stacked:hover #accent_green, body.clients-open #lottie_logo_left-stacked:hover #accent_green { opacity: 1; } #lottie_logo_left-stacked:hover #accent_white { will-change: auto; transition: unset; -webkit-transition: unset; -moz-transition: unset; -o-transition: unset; opacity: 1; } #lottie_logo_left-stacked:hover #accent_green { will-change: auto; transition: unset; -webkit-transition: unset; -moz-transition: unset; -o-transition: unset; opacity: 0; } #accent_green { opacity: 1; } #accent_blue { opacity: 0; } #accent_white { opacity: 0; } #lottie_logo_left-stacked.accent_green #accent_green { opacity: 1; } #lottie_logo_left-stacked.accent_green #accent_white { opacity: 0; } #lottie_logo_left-stacked.accent_blue #accent_green { opacity: 0; } #lottie_logo_left-stacked.accent_blue #accent_white { opacity: 0; } #lottie_logo_left-stacked.accent_blue #accent_blue { opacity: 1; } /* ------------ LOTTIE H1 INTRO -------------- */ :root { /* This affects hero container and bloom smoke container for iPad */ --hero_left: -20vw; } #hero-background { width: 100%; height: 100svh; position: absolute; background: rgb(0, 1, 4); margin: 0; padding: 0; top: 0; } #HOME_hero_container { will-change: auto; margin: 0px; position: absolute; width: 150%; height: 120%; left: var(--hero_left); overflow: hidden; -webkit-transform: translateX(-3vw); -ms-transform: translateX(-3vw); transform: translateX(-3vw); -webkit-transition: transform 3s var(--customEase); -o-transition: transform 3s var(--customEase); -webkit-transition: -webkit-transform 3s var(--customEase); transition: -webkit-transform 3s var(--customEase); transition: transform 3s var(--customEase); transition: transform 3s var(--customEase), -webkit-transform 3s var(--customEase); } #HOME_hero_container.slide { -webkit-transform: translateX(0); -ms-transform: translateX(0); transform: translateX(0); } #HOME_hero_image { width: 100%; height: 100%; position: absolute; z-index: 1; } #img_HOME_hero, #img_HOME_hero_brain, #img_HOME_hero_heart, .hero_interaction { will-change: auto; background: #000; background-size: contain; background-repeat: no-repeat; background-position: center; position: absolute; margin: 0px auto; z-index: 1; height: 100%; width: 100%; top: 0; left: 0; -webkit-transform-origin: 0% 0%; -ms-transform-origin: 0% 0%; transform-origin: 0% 0%; opacity: 0; } #img_HOME_hero { will-change: auto; /* DELAY TO FIX SLOW CONNECTION LOAD TRIGGER BUG */ transition: opacity 0.75s ease-in-out 0.25s; -webkit-transition: opacity 0.75s ease-in-out 0.25s; -moz-transition: opacity 0.75s ease-in-out 0.25s; -o-transition: opacity 0.75s ease-in-out 0.25s; animation: hue var(--hero-color-speed) infinite var(--hero-color-delay); -o-animation: hue var(--hero-color-speed) infinite var(--hero-color-delay); -moz-animation: hue var(--hero-color-speed) infinite var(--hero-color-delay); -webkit-animation: hue var(--hero-color-speed) infinite var(--hero-color-delay); -webkit-animation-play-state: paused; animation-play-state: paused; } #img_HOME_hero { background-image: url('_img/home/img_andre_base_2x_wide.jpg'); -webkit-animation-play-state: running; animation-play-state: running; } /* #img_HOME_hero_brain { background-color: unset; background-image: url('../_lottie/home/hero/images/img_andre_brain_2x_wide.png'); z-index: 2; pointer-events: none; } #img_HOME_hero_heart { background-color: unset; background-image: url('../_lottie/home/hero/images/img_andre_heart_2x_wide.png'); z-index: 2; pointer-events: none; } */ .hero_interaction svg { width: 100%; height: 100%; } .hero_interaction { /* not sure about z-index here */ z-index: 999; background: unset; opacity: 1; pointer-events: none; } g#target_brain, g#target_heart { pointer-events: none; background: unset; opacity: 0; } .hero_interaction.activated svg#brain g, .hero_interaction.activated svg#heart g { pointer-events: fill; } /* .cursor_unicorn_big { cursor: url("data:image/svg+xml;utf8,<svg height=100 style=fill:#000;font-size:64px viewport="0 0 100 100"width=100 xmlns=http://www.w3.org/2000/svg><text y=50%>🦄</text></svg>") 16 0, auto; } */ /* svg#brain g#target_brain:hover { cursor: url("data:image/svg+xml;utf8,<svg height=48 style=fill:#000;font-size:24px viewport="0 0 100 100"width=40 xmlns=http://www.w3.org/2000/svg><text y=50%>🦄</text></svg>") 16 0, auto; } svg#heart g#target_heart:hover { cursor: url("data:image/svg+xml;utf8,<svg height=48 style=fill:#000;font-size:24px viewport="0 0 100 100"width=40 xmlns=http://www.w3.org/2000/svg><text y=50%>⚡️</text></svg>") 16 0, auto; } */ /* FIREFOX DISABLING CURSOR UNTIL :HAS() SUPPORT */ @-moz-document url-prefix() { svg#brain g#target_brain:hover { cursor: default; } svg#heart g#target_heart:hover { cursor: default; } } #img_HOME_hero_brain, #img_HOME_hero_heart { opacity: 0; will-change: auto; -webkit-animation-play-state: paused; animation-play-state: paused; } .hero_interaction:has(svg#brain g#target_brain:hover)>#img_HOME_hero_brain, .hero_interaction:has(svg#heart g#target_heart:hover)>#img_HOME_hero_heart { animation: hue 0.5s infinite; -o-animation: hue 0.5s infinite; -moz-animation: hue 0.5s infinite; -webkit-animation: hue 0.5s infinite; -webkit-animation-play-state: running; animation-play-state: running; /* NO DELAY */ transition: opacity 0.5s var(--customEase); -webkit-transition: opacity 0.5s var(--customEase); -moz-transition: opacity 0.5s var(--customEase); -o-transition: opacity 0.5s var(--customEase); opacity: 1; } body.menu-open #img_HOME_hero, body.home-portfolio-open #img_HOME_hero { -webkit-animation-play-state: paused; animation-play-state: paused; } /* TOOLTIPS */ .tooltips { pointer-events: none; } .brain_tooltip, .heart_tooltip { position: absolute; width: 11em; color: #FFFFFF; background: rgba(0, 110, 230, 90%); height: auto; line-height: 1.5em; text-align: center; border-radius: 0.5em; padding: 1em; -webkit-box-shadow: 0px 5px 30px rgba(0, 0, 0, 0.5); box-shadow: 0px 5px 30px rgba(0, 0, 0, 0.5); z-index: 9999; transition: unset; -webkit-transition: unset; -moz-transition: unset; -o-transition: unset; } .tooltips span:after { content: ""; position: absolute; top: 100%; left: 50%; margin-left: -6px; border-width: 6px; border-style: solid; border-color: rgba(0, 110, 230, 90%) transparent transparent transparent; /* box-shadow: 0px 5px 30px rgba(0, 0, 0, 0.5); */ mix-blend-mode: lighten; } .brain_tooltip, .heart_tooltip { opacity: 0; -webkit-transform: translateY(2em); -ms-transform: translateY(2em); transform: translateY(2em); } .hero_interaction:has(svg#brain g#target_brain:hover)>.brain_tooltip, .hero_interaction:has(svg#heart g#target_heart:hover)>.heart_tooltip { -webkit-transition: transform 2s var(--customEase) 0.25s, opacity 0.5s var(--customEase) 0.25s; -o-transition: transform 2s var(--customEase) 0.25s, opacity 0.5s var(--customEase) 0.25s; -webkit-transition: opacity 0.5s var(--customEase) 0.25s, -webkit-transform 2s var(--customEase) 0.25s; transition: opacity 0.5s var(--customEase) 0.25s, -webkit-transform 2s var(--customEase) 0.25s; transition: transform 2s var(--customEase) 0.25s, opacity 0.5s var(--customEase) 0.25s; transition: transform 2s var(--customEase) 0.25s, opacity 0.5s var(--customEase) 0.25s, -webkit-transform 2s var(--customEase) 0.25s; opacity: 1; -webkit-transform: translateY(0); -ms-transform: translateY(0); transform: translateY(0); } .brain_tooltip { right: 65%; bottom: 85%; } .heart_tooltip { right: 55%; bottom: 30%; } /* LIGHTSOURCE */ #lottie_HOME_pattern_container { will-change: auto; margin: 0px auto; padding: 0px; min-height: 100%; height: 100svh; cursor: default; background: none; width: 100%; overflow: hidden; position: absolute; pointer-events: none; z-index: 998; } #lottie_HOME_pattern_container svg { pointer-events: none; } #HOME_hero_lightsource_container { will-change: auto; margin: 0px auto; padding: 0px; min-height: 100%; height: 100svh; cursor: default; background: none; width: 100%; overflow: hidden; position: absolute; top: 0; left: 0; } #HOME_hero_lightsource_right { will-change: auto; background-image: url('_img/home/light.jpg'); background-repeat: no-repeat; background-size: contain; position: absolute; z-index: 999999; height: calc((200vw + 200svh)/2); width: calc((75vw + 75svh)/2); top: -31svh; left: calc(50vw + 50svh); -webkit-transform-origin: top center; -ms-transform-origin: top center; transform-origin: top center; -webkit-transform: rotate(0deg); -ms-transform: rotate(0deg); transform: rotate(0deg); opacity: 0; -webkit-transition: opacity var(--lightSourceFade) var(--lightSourceEase), -webkit-transform var(--lightSourceRotate) var(--lightSourceEase); transition: opacity var(--lightSourceFade) var(--lightSourceEase), -webkit-transform var(--lightSourceRotate) var(--lightSourceEase); transition: opacity var(--lightSourceFade) var(--lightSourceEase), transform var(--lightSourceRotate) var(--lightSourceEase); transition: opacity var(--lightSourceFade) var(--lightSourceEase), transform var(--lightSourceRotate) var(--lightSourceEase), -webkit-transform var(--lightSourceRotate) var(--lightSourceEase); -webkit-transition: opacity var(--lightSourceFade) var(--lightSourceEase), transform var(--lightSourceRotate) var(--lightSourceEase); -moz-transition: opacity var(--lightSourceFade) var(--lightSourceEase), transform var(--lightSourceRotate) var(--lightSourceEase); -o-transition: opacity var(--lightSourceFade) var(--lightSourceEase), transform var(--lightSourceRotate) var(--lightSourceEase); pointer-events: none; } #HOME_hero_lightsource_left { will-change: auto; background-image: url('_img/home/light.jpg'); background-repeat: no-repeat; background-size: contain; position: absolute; z-index: 999999; height: calc((200vw + 200svh)/2); width: calc((75vw + 75svh)/2); top: -5svh; left: calc((-75vw - 75svh)/2); -webkit-transform-origin: top center; -ms-transform-origin: top center; transform-origin: top center; -webkit-transform: rotate(1turn); -ms-transform: rotate(1turn); transform: rotate(1turn); opacity: 0; -webkit-transition: opacity var(--lightSourceFade) var(--lightSourceEase), -webkit-transform var(--lightSourceRotate) var(--lightSourceEase); transition: opacity var(--lightSourceFade) var(--lightSourceEase), -webkit-transform var(--lightSourceRotate) var(--lightSourceEase); transition: opacity var(--lightSourceFade) var(--lightSourceEase), transform var(--lightSourceRotate) var(--lightSourceEase); transition: opacity var(--lightSourceFade) var(--lightSourceEase), transform var(--lightSourceRotate) var(--lightSourceEase), -webkit-transform var(--lightSourceRotate) var(--lightSourceEase); -webkit-transition: opacity var(--lightSourceFade) var(--lightSourceEase), transform var(--lightSourceRotate) var(--lightSourceEase); -moz-transition: opacity var(--lightSourceFade) var(--lightSourceEase), transform var(--lightSourceRotate) var(--lightSourceEase); -o-transition: opacity var(--lightSourceFade) var(--lightSourceEase), transform var(--lightSourceRotate) var(--lightSourceEase); pointer-events: none; } /* TESTING PERFORMANCE was 336deg before */ #HOME_hero_lightsource_right { will-change: auto; animation: hue var(--lights-right-color-speed) infinite var(--lights-right-color-delay); -o-animation: hue var(--lights-right-color-speed) infinite var(--lights-right-color-delay); -moz-animation: hue var(--lights-right-color-speed) infinite var(--lights-right-color-delay); -webkit-animation: hue var(--lights-right-color-speed) infinite var(--lights-right-color-delay); mix-blend-mode: lighten; -webkit-animation-play-state: running; animation-play-state: running; } #HOME_hero_lightsource_left { will-change: auto; animation: hue var(--lights-left-color-speed) infinite var(--lights-left-color-delay); -o-animation: hue var(--lights-left-color-speed) infinite var(--lights-left-color-delay); -moz-animation: hue var(--lights-left-color-speed) infinite var(--lights-left-color-delay); -webkit-animation: hue var(--lights-left-color-speed) infinite var(--lights-left-color-delay); mix-blend-mode: lighten; -webkit-animation-play-state: running; animation-play-state: running; } body.menu-open #HOME_hero_lightsource_right, body.menu-open #HOME_hero_lightsource_left, body.home-portfolio-open #HOME_hero_lightsource_right, body.home-portfolio-open #HOME_hero_lightsource_left { -webkit-animation-play-state: paused; animation-play-state: paused; } @-webkit-keyframes hue { 0%, 100% { -webkit-filter: hue-rotate(0.9turn); filter: hue-rotate(0.9turn); } 33% { -webkit-filter: hue-rotate(0.8turn); filter: hue-rotate(0.8turn); } 66% { -webkit-filter: hue-rotate(1.1turn); filter: hue-rotate(1.1turn); } } @keyframes hue { 0%, 100% { -webkit-filter: hue-rotate(0.9turn); filter: hue-rotate(0.9turn); } 33% { -webkit-filter: hue-rotate(0.8turn); filter: hue-rotate(0.8turn); } 66% { -webkit-filter: hue-rotate(1.1turn); filter: hue-rotate(1.1turn); } } #HOME_hero_lightsource_right.activated { opacity: 0.7; -webkit-transform: rotate(52deg); -ms-transform: rotate(52deg); transform: rotate(52deg); } #HOME_hero_lightsource_left.activated { opacity: 0.35; -webkit-transform: rotate(0.85turn); -ms-transform: rotate(0.85turn); transform: rotate(0.85turn); } /* ------------ PARALLAX EFFECT -------------- */ #parallax_scene { width: 100%; height: 100%; will-change: auto; } /* ------------ DUST -------------- */ #dust_container, #smoke_container { will-change: auto; width: 100%; height: 100%; position: absolute; overflow: hidden; transition: opacity 2s ease-out; -webkit-transition: opacity 2s ease-out; -moz-transition: opacity 2s ease-out; -o-transition: opacity 2s ease-out; } #dust_container { pointer-events: none; z-index: 3; opacity: 0; mix-blend-mode: plus-lighter; } #dust_container.activated { opacity: 1; } #smoke_container { /* THIS COMPENSATES PARENT CONTAINER FOR IPAD TOUCH */ -webkit-transform: translateX(calc(var(--hero_left) * -1)); -ms-transform: translateX(calc(var(--hero_left) * -1)); transform: translateX(calc(var(--hero_left) * -1)); opacity: 0.5; z-index: 4; mix-blend-mode: soft-light; } /* DUST VIDEO */ #dust_video { will-change: auto; display: block; position: absolute; top: 0; margin: 0; padding: 0; width: 100%; height: 100%; -webkit-transform: scale(var(--resolution-default)); -ms-transform: scale(var(--resolution-default)); transform: scale(var(--resolution-default)); -webkit-transform-origin: 0% 0%; -ms-transform-origin: 0% 0%; transform-origin: 0% 0%; mask-size: contain; -webkit-mask-size: contain; -webkit-mask-position: center; mask-position: center; -webkit-mask-position-x: center; -webkit-mask-position-y: center; mask-image: url('_img/home/img_andre_background_matte_wide.png'); -webkit-mask-image: url('_img/home/img_andre_background_matte_wide.png'); mask-repeat: no-repeat; -webkit-mask-repeat: no-repeat; mask-type: alpha; opacity: 0; } .banner_canvas { position: fixed; top: 0; left: 0; height: 100%; width: 100%; z-index: 999; } #dust_video { background: #000; } /* FIXES THE RIGHT EDGE 1ps visible BUG */ #hero_blend_fix { width: 52vw; height: 100%; background: #000; position: absolute; z-index: 2; right: 0; pointer-events: none; } #lottie_HOME_pattern { will-change: auto; z-index: 998; position: absolute; margin: 0px auto; top: -5svh; width: 200svh; /* OLD VALUE OUTSIDE OF HERO CONTAINER */ left: calc(25vw - 75svh); opacity: 0; -webkit-transition: opacity 0.5s ease-out; -o-transition: opacity 0.5s ease-out; transition: opacity 0.5s ease-out; -webkit-transition: opacity 0.5s ease-in-out; -moz-transition: opacity 0.5s ease-in-out; -o-transition: opacity 0.5s ease-in-out; } #lottie_HOME_pattern_appear { will-change: auto; z-index: 998; position: absolute; margin: 0px auto; top: -5svh; width: 200svh; left: calc(40vw - 75svh); /* opacity: 0; */ -webkit-transition: opacity 1s ease-out; -o-transition: opacity 1s ease-out; transition: opacity 1s ease-out; -webkit-transition: opacity 1s ease-in-out; -moz-transition: opacity 1s ease-in-out; -o-transition: opacity 1s ease-in-out; } /* ------------ HERO TEXT AREA -------------- */ #hero-text-area { will-change: auto; z-index: 999; position: absolute; margin: 0px auto; z-index: 9999999; top: 25svh; left: 55vw; width: 350px; display: -ms-grid; display: grid; -webkit-transform: scale(1.5); -ms-transform: scale(1.5); transform: scale(1.5); -webkit-transition: transform 2s var(--EASE_IN_OUT_CUBIC); -o-transition: transform 2s var(--EASE_IN_OUT_CUBIC); -webkit-transition: -webkit-transform 2s var(--EASE_IN_OUT_CUBIC); transition: -webkit-transform 2s var(--EASE_IN_OUT_CUBIC); transition: transform 2s var(--EASE_IN_OUT_CUBIC); transition: transform 2s var(--EASE_IN_OUT_CUBIC), -webkit-transform 2s var(--EASE_IN_OUT_CUBIC); pointer-events: none; } #hero-text-area.appear { -webkit-transform: scale(1.25); -ms-transform: scale(1.25); transform: scale(1.25); } #lottie_HOME_HEADER { will-change: auto; -ms-grid-row: 1; grid-row: 1; transition: opacity 1s ease-in; -webkit-transition: opacity 1s ease-in; -moz-transition: opacity 1s ease-in; -o-transition: opacity 1s ease-in; pointer-events: none; } #HOME_subline { opacity: 0; -ms-grid-row: 2; grid-row: 2; -webkit-transform: translateY(25px); -ms-transform: translateY(25px); transform: translateY(25px); pointer-events: none; } #HOME_subline p, body.light #HOME_subline p, body.home-portfolio-open #HOME_subline p { font-size: var(--font-size-subline); line-height: var(--line-height-subline); } #HOME_subline p { color: #fff; opacity: 0.8; } span.header_subline { font-family: var(--font-averta_regular); font-size: var(--font-size-ticker-area); color: #fff; opacity: 0; display: block; } #HOME_CTA { will-change: auto; border-radius: 60px; /* border: 2px solid white; */ margin-top: 0.5em; height: 4.25em; width: 90%; z-index: -1; opacity: 0; visibility: hidden; -webkit-transform: translateY(25px) scale(1); -ms-transform: translateY(25px) scale(1); transform: translateY(25px) scale(1); -ms-grid-row: 3; grid-row: 3; -webkit-transition: opacity 1s var(--customEase) 0.5s, -webkit-transform 3s var(--customEase) 0.5s; transition: opacity 1s var(--customEase) 0.5s, -webkit-transform 3s var(--customEase) 0.5s; transition: opacity 1s var(--customEase) 0.5s, transform 3s var(--customEase) 0.5s; transition: opacity 1s var(--customEase) 0.5s, transform 3s var(--customEase) 0.5s, -webkit-transform 3s var(--customEase) 0.5s; -webkit-transition: opacity 1s var(--customEase) 0.5s, transform 3s var(--customEase) 0.5s; -moz-transition: opacity 1s var(--customEase) 0.5s, transform 3s var(--customEase) 0.5s; -o-transition: opacity 1s var(--customEase) 0.5s, transform 3s var(--customEase) 0.5s; } #HOME_subline.appear { will-change: auto; -webkit-transition: opacity 1s var(--customEase), -webkit-transform 2s var(--customEase); transition: opacity 1s var(--customEase), -webkit-transform 2s var(--customEase); transition: opacity 1s var(--customEase), transform 2s var(--customEase); transition: opacity 1s var(--customEase), transform 2s var(--customEase), -webkit-transform 2s var(--customEase); -webkit-transition: opacity 1s var(--customEase), transform 2s var(--customEase); -moz-transition: opacity 1s var(--customEase), transform 2s var(--customEase); -o-transition: opacity 1s var(--customEase), transform 2s var(--customEase); transition-delay: 0.5s; -webkit-transition-delay: 0.5s; -moz-transition-delay: 0.5s; -o-transition-delay: 0.5s; opacity: 1; -webkit-transform: translateY(0px); -ms-transform: translateY(0px); transform: translateY(0px); } #HOME_CTA.appear { transition-delay: 1s; -webkit-transition-delay: 1s; -moz-transition-delay: 1s; -o-transition-delay: 1s; visibility: visible; opacity: 1; -webkit-transform: translateY(0px); -ms-transform: translateY(0px); transform: translateY(0px); } .block { border-radius: 60px; background: #000; color: #fff; font-family: var(--font-averta_bold); font-size: var(--font-size-ticker-area); position: relative; height: 100%; /* background-color: rgba(0, 0, 0, 0.5); */ /* -webkit-mask-image: linear-gradient(black, transparent); */ display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; pointer-events: all; cursor: pointer; } .block:before { will-change: auto; border-radius: 60px; content: ''; position: absolute; left: calc(var(--home-btn-CTA-line-thickness)*-1); top: calc(var(--home-btn-CTA-line-thickness)*-1); background: -o-linear-gradient(45deg, #000000, #08CAE9, #8385EF, #000000, #8385EF, #08CAE9, #000000); background: linear-gradient(45deg, #000000, #08CAE9, #8385EF, #000000, #8385EF, #08CAE9, #000000); /* background-size: 1000%; */ background-size: var(--nav-btn-grad-size); width: calc(100% + var(--home-btn-CTA-line-thickness)*2); height: calc(100% + var(--home-btn-CTA-line-thickness)*2); z-index: -1; animation: var(--nav-btn-animation); -webkit-animation: var(--nav-btn-animation); -moz-animation: var(--nav-btn-animation); -o-animation: var(--nav-btn-animation); } body.home-portfolio-open .block:before { animation-play-state: paused; -webkit-animation-play-state: paused; } /* .block:before { opacity: 0; } a.block:hover:before { opacity: 1; } */ a.block:hover:before { background: var(--nav-btn-gradient-o-); background: var(--nav-btn-gradient); background-size: var(--nav-btn-grad-size); animation: var(--nav-btn-animation); -webkit-animation: var(--nav-btn-animation); -moz-animation: var(--nav-btn-animation); -o-animation: var(--nav-btn-animation); } #blur_container { will-change: auto; opacity: 0; mix-blend-mode: plus-lighter; top: 0; right: 0; width: 150svh; height: 100svh; pointer-events: none; position: absolute; margin: 0px auto; z-index: 9999; display: -ms-grid; display: grid; overflow: visible; transition: opacity 3s ease-in; -webkit-transition: opacity 3s ease-in; -moz-transition: opacity 3s ease-in; -o-transition: opacity 3s ease-in; } #blur_container.appear { opacity: 1; } #blur_video { -o-object-fit: fill; object-fit: fill; width: 100%; height: 100%; opacity: 0.5; background: #000; } /* #dust_video_button, #dust_blur_button { opacity: 0; display: block; position: absolute; top: 0; margin: 0; padding: 0; width: 100%; height: 100%; -o-object-fit: none; object-fit: none; border-radius: 60px; background: #000; pointer-events: none; -webkit-transform: scale(2); -ms-transform: scale(2); transform: scale(2); } #dust_blur_button { opacity: 0.1; } #dust_video_button { opacity: 0.3; } #btn_video:hover #dust_blur_button, #btn_video:hover #dust_video_button { opacity: 0; } /* #btn_video .video-rotate { width: calc(var(--font-size-ticker-area) * 1.5 + 2px); height: calc((33svh * 90/100)/2); -webkit-transform: rotate(-90deg); -ms-transform: rotate(-90deg); transform: rotate(-90deg); position: absolute; } */ /* Interaction Effect */ a.block:after { content: ""; pointer-events: none; display: block; position: absolute; border-radius: 100%; width: 75vw; height: 75vw; background: #fff; -webkit-transform: scale(1); -ms-transform: scale(1); transform: scale(1); opacity: 0; z-index: -1; -webkit-transition: opacity 1s var(--customEase), -webkit-transform 1s var(--customEase); transition: opacity 1s var(--customEase), -webkit-transform 1s var(--customEase); -o-transition: transform 1s var(--customEase), opacity 1s var(--customEase); transition: transform 1s var(--customEase), opacity 1s var(--customEase); transition: transform 1s var(--customEase), opacity 1s var(--customEase), -webkit-transform 1s var(--customEase); } a.right_clicked.block:after { -webkit-transition: unset; -o-transition: unset; transition: unset; } a.block:active:after { -webkit-transform: scale(0); -ms-transform: scale(0); transform: scale(0); opacity: 1; -webkit-transition: 0s; -o-transition: 0s; transition: 0s; } #HOME_CTA.activated { will-change: auto; -webkit-animation: 0.5s ease btn_interaction forwards; animation: 0.5s ease btn_interaction forwards; } @-webkit-keyframes btn_interaction { 0% { -webkit-transform: scale(1); -ms-transform: scale(1); transform: scale(1); } 50% { -webkit-transform: scale(1.05); -ms-transform: scale(1.05); transform: scale(1.05); } 100% { -webkit-transform: scale(1); -ms-transform: scale(1); transform: scale(1); } } @keyframes btn_interaction { 0% { -webkit-transform: scale(1); -ms-transform: scale(1); transform: scale(1); } 50% { -webkit-transform: scale(1.05); -ms-transform: scale(1.05); transform: scale(1.05); } 100% { -webkit-transform: scale(1); -ms-transform: scale(1); transform: scale(1); } } /* Home video button particles */ a.block:hover #dust_video_button { opacity: 0; } a.block span { will-change: auto; color: #fff; z-index: 1; display: -webkit-box; display: -ms-flexbox; display: flex; width: 100%; -webkit-box-align: center; -ms-flex-align: center; align-items: center; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; transition: opacity 0.5s var(--customEase), transform 1s var(--customEase), -webkit-transform 1s var(--customEase); -webkit-transition: opacity 0.5s var(--customEase), transform 1s var(--customEase); -moz-transition: opacity 0.5s var(--customEase), transform 1s var(--customEase); -o-transition: opacity 0.5s var(--customEase), transform 1s var(--customEase); } a.block span .text_play { -webkit-transform: translateX(calc(var(--font-size-p) * -1.25 / 1.5)); -ms-transform: translateX(calc(var(--font-size-p) * -1.25 / 1.5)); transform: translateX(calc(var(--font-size-p) * -1.25 / 1.5)); transition: opacity 0.5s var(--customEase), transform 1s var(--customEase), -webkit-transform 1s var(--customEase); -webkit-transition: opacity 0.5s var(--customEase), transform 1s var(--customEase); -moz-transition: opacity 0.5s var(--customEase), transform 1s var(--customEase); -o-transition: opacity 0.5s var(--customEase), transform 1s var(--customEase); } .btn_play { will-change: auto; background-image: url('_img/btn_play.svg'); background-repeat: no-repeat; margin: 0; width: calc(var(--font-size-p)*1.25); height: calc(var(--font-size-p)*1.25); padding-right: 5%; background-size: contain; -webkit-transform: translateX(calc(var(--font-size-p)*-0.75)); -ms-transform: translateX(calc(var(--font-size-p)*-0.75)); transform: translateX(calc(var(--font-size-p)*-0.75)); opacity: 0; -webkit-transition: opacity 0.5s var(--customEase), -webkit-transform 1s var(--customEase); transition: opacity 0.5s var(--customEase), -webkit-transform 1s var(--customEase); transition: opacity 0.5s var(--customEase), transform 1s var(--customEase); transition: opacity 0.5s var(--customEase), transform 1s var(--customEase), -webkit-transform 1s var(--customEase); -webkit-transition: opacity 0.5s var(--customEase), transform 1s var(--customEase); -moz-transition: opacity 0.5s var(--customEase), transform 1s var(--customEase); -o-transition: opacity 0.5s var(--customEase), transform 1s var(--customEase); } a.block:hover .btn_play { -webkit-transform: unset; -ms-transform: unset; transform: unset; opacity: 1; } a.block:hover span .text_play { -webkit-transform: unset; -ms-transform: unset; transform: unset; } /* a.block:hover span { -webkit-transform: unset; -ms-transform: unset; transform: unset; } */ @keyframes steam { 0% { background-position: 0 0; } 50% { background-position: 500% 0; } 100% { background-position: 0 0; } } @-webkit-keyframes steam { 0% { background-position: 0 0; } 50% { background-position: 500% 0; } 100% { background-position: 0 0; } } /* ------------ bottom areas -------------- */ #ticker-area { will-change: auto; pointer-events: none; position: fixed; left: var(--left); bottom: var(--bottom); z-index: 9999998; display: -ms-grid; display: grid; -ms-grid-columns: -webkit-max-content; -ms-grid-columns: max-content; grid-template-columns: -webkit-max-content; grid-template-columns: max-content; -ms-grid-rows: -webkit-max-content; -ms-grid-rows: max-content; grid-template-rows: -webkit-max-content; grid-template-rows: max-content; /* -webkit-animation: 15s ease home_appear; -moz-animation: 15s ease home_appear; -o-animation: 15s ease home_appear; animation: 15s ease home_appear; */ transition: 1s opacity ease-out; -webkit-transition: 1s opacity ease-out; -moz-transition: 1s opacity ease-out; -o-transition: 1s opacity ease-out; } #ticker-area>*:nth-child(1) { -ms-grid-row: 1; -ms-grid-column: 1; } #projects-area { will-change: auto; opacity: 0; height: 2svh; width: -webkit-fit-content; width: -moz-fit-content; width: fit-content; -ms-grid-row: 1; grid-row: 1; display: -ms-grid; display: grid; -ms-grid-columns: -webkit-max-content; -ms-grid-columns: max-content; grid-template-columns: -webkit-max-content; grid-template-columns: max-content; -ms-flex-line-pack: center; align-content: center; -webkit-box-align: center; -ms-flex-align: center; align-items: center; grid-gap: 1svh; pointer-events: all; -webkit-transform-origin: left center; -ms-transform-origin: left center; transform-origin: left center; -webkit-transition: 1s opacity ease-out, 0.25s -webkit-transform ease-out; transition: 1s opacity ease-out, 0.25s -webkit-transform ease-out; transition: 1s opacity ease-out, 0.25s transform ease-out; transition: 1s opacity ease-out, 0.25s transform ease-out, 0.25s -webkit-transform ease-out; -webkit-transition: 1s opacity ease-out, 0.25s transform ease-out; -moz-transition: 1s opacity ease-out, 0.25s transform ease-out; -o-transition: 1s opacity ease-out, 0.25s transform ease-out; } #projects-area.activated { opacity: 1; } #projects-area p { will-change: auto; -ms-grid-column: 2; grid-column: 2; color: #fff; font-family: var(--font-averta_bold); font-size: var(--font-size-ticker-area); -webkit-transition: 0.25s opacity ease-out, 0.25s -webkit-transform ease-out; transition: 0.25s opacity ease-out, 0.25s -webkit-transform ease-out; transition: 0.25s opacity ease-out, 0.25s transform ease-out; transition: 0.25s opacity ease-out, 0.25s transform ease-out, 0.25s -webkit-transform ease-out; -webkit-transition: 0.25s opacity ease-out, 0.25s transform ease-out; -moz-transition: 0.25s opacity ease-out, 0.25s transform ease-out; -o-transition: 0.25s opacity ease-out, 0.25s transform ease-out; } #projects-area span { will-change: auto; width: -webkit-fit-content; width: -moz-fit-content; width: fit-content; background-color: #006EE6; font-family: var(--font-averta_extrabold); margin-left: 1svh; font-size: calc(var(--font-size-ticker-area)*4/5); padding: 0.333svh 1.25svh 0.333svh 1.25svh; border-radius: 2svh; -webkit-transition: 0.25s opacity ease-out 0.25s, 0.25s -webkit-transform ease-out 0.25s; transition: 0.25s opacity ease-out 0.25s, 0.25s -webkit-transform ease-out 0.25s; transition: 0.25s opacity ease-out 0.25s, 0.25s transform ease-out 0.25s; transition: 0.25s opacity ease-out 0.25s, 0.25s transform ease-out 0.25s, 0.25s -webkit-transform ease-out 0.25s; -webkit-transition: 0.25s opacity ease-out 0.25s, 0.25s transform ease-out 0.25s; -moz-transition: 0.25s opacity ease-out 0.25s, 0.25s transform ease-out 0.25s; -o-transition: 0.25s opacity ease-out 0.25s, 0.25s transform ease-out 0.25s; } #lottie_icn_projects { will-change: auto; -ms-grid-column: 1; grid-column: 1; height: 3svh; width: 3svh; opacity: 0.5; -webkit-transform: scale(1) rotate(0deg); -ms-transform: scale(1) rotate(0deg); transform: scale(1) rotate(0deg); -webkit-transform-origin: center; -ms-transform-origin: center; transform-origin: center; -webkit-transition: 0.25s opacity ease-out, 0.25s -webkit-transform ease-out; transition: 0.25s opacity ease-out, 0.25s -webkit-transform ease-out; transition: 0.25s opacity ease-out, 0.25s transform ease-out; transition: 0.25s opacity ease-out, 0.25s transform ease-out, 0.25s -webkit-transform ease-out; -webkit-transition: 0.25s opacity ease-out, 0.25s transform ease-out; -moz-transition: 0.25s opacity ease-out, 0.25s transform ease-out; -o-transition: 0.25s opacity ease-out, 0.25s transform ease-out; } #projects-area:hover #lottie_icn_projects { opacity: 1; -webkit-transform: scale(1.25); -ms-transform: scale(1.25); transform: scale(1.25); } #projects-area:hover p { -webkit-transform: translate(0.5svh, 0); -ms-transform: translate(0.5svh, 0); transform: translate(0.5svh, 0); } #projects-area:hover { -webkit-transform: scale(1.05); -ms-transform: scale(1.05); transform: scale(1.05); } #projects-area:hover span { will-change: auto; -webkit-transition: 0.25s opacity ease-out, 0.25s -webkit-transform ease-out; transition: 0.25s opacity ease-out, 0.25s -webkit-transform ease-out; transition: 0.25s opacity ease-out, 0.25s transform ease-out; transition: 0.25s opacity ease-out, 0.25s transform ease-out, 0.25s -webkit-transform ease-out; -webkit-transition: 0.25s opacity ease-out, 0.25s transform ease-out; -moz-transition: 0.25s opacity ease-out, 0.25s transform ease-out; -o-transition: 0.25s opacity ease-out, 0.25s transform ease-out; /* color: #000; */ /* background-color: var(--loader_light); */ opacity: 0; } @-webkit-keyframes home_appear { 0% { opacity: 0.1; } 15% { opacity: 1; } 100% { opacity: 1; } } @keyframes home_appear { 0% { opacity: 0.1; } 15% { opacity: 1; } 100% { opacity: 1; } } #work-title-area { pointer-events: none; display: -ms-grid; display: grid; } #location-area { will-change: auto; /* pointer-events: none; */ opacity: 0; position: fixed; bottom: var(--bottom); left: var(--left); right: unset; z-index: 9999998; /* display: grid; */ justify-items: end; -webkit-box-align: center; -ms-flex-align: center; align-items: center; -ms-grid-columns: -webkit-max-content; -ms-grid-columns: max-content; grid-template-columns: -webkit-max-content; grid-template-columns: max-content; -ms-grid-rows: -webkit-max-content; -ms-grid-rows: max-content; grid-template-rows: -webkit-max-content; grid-template-rows: max-content; grid-gap: 1svh; display: -webkit-box; display: -ms-flexbox; display: flex; visibility: hidden; /* transition: 3s opacity ease-out; -webkit-transition: 3s opacity ease-out; -moz-transition: 3s opacity ease-out; -o-transition: 3s opacity ease-out; */ /* -webkit-animation: 15s ease home_appear; -moz-animation: 15s ease home_appear; -o-animation: 15s ease home_appear; animation: 15s ease home_appear; */ } #location-area>*:nth-child(1) { -ms-grid-row: 1; -ms-grid-column: 1; } #location-area .timezone { font-size: calc(var(--font-size-ticker-area) / 2); display: -webkit-box; display: -ms-flexbox; display: flex; width: -webkit-fit-content; width: -moz-fit-content; width: fit-content; color: #fff; opacity: 0.25; margin-left: 0.5em; -webkit-transition: 0.25s opacity ease-out, 0.25s -webkit-transform ease-out; transition: 0.25s opacity ease-out, 0.25s -webkit-transform ease-out; -o-transition: 0.25s opacity ease-out, 0.25s transform ease-out; transition: 0.25s opacity ease-out, 0.25s transform ease-out; transition: 0.25s opacity ease-out, 0.25s transform ease-out, 0.25s -webkit-transform ease-out; } .icn_location { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; padding: 0.25em; background-repeat: no-repeat; background-size: 1em; background-image: url('_img/location-dot-solid.svg'); background-position: center; -webkit-filter: invert(1); filter: invert(1); /* border: 2px solid rgba(255, 255, 255, 1); border-radius: 100%; */ width: 1em; height: 1em; opacity: 0.5; -webkit-transition: 0.25s opacity ease-out, 0.25s -webkit-transform ease-out; transition: 0.25s opacity ease-out, 0.25s -webkit-transform ease-out; -o-transition: 0.25s opacity ease-out, 0.25s transform ease-out; transition: 0.25s opacity ease-out, 0.25s transform ease-out; transition: 0.25s opacity ease-out, 0.25s transform ease-out, 0.25s -webkit-transform ease-out; } #location-area .icn_location { margin-right: 1svh; } #location-area a.google-maps { display: inherit; -webkit-box-align: inherit; -ms-flex-align: inherit; align-items: inherit; -webkit-box-pack: inherit; -ms-flex-pack: inherit; justify-content: inherit; -webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-flow: inherit; flex-flow: inherit; pointer-events: all; } #location-area:hover .icn_location { -webkit-transform: translateY(-6px); -ms-transform: translateY(-6px); transform: translateY(-6px); opacity: 1; } #location-area:hover p { opacity: 1; } #location-area:hover .timezone { opacity: 0.5; } #dribbble-area { will-change: auto; opacity: 0; pointer-events: all; z-index: 9999998; position: fixed; bottom: var(--bottom); right: var(--right); /* display: grid; */ justify-items: end; -webkit-box-align: center; -ms-flex-align: center; align-items: center; -ms-grid-columns: -webkit-max-content; -ms-grid-columns: max-content; grid-template-columns: -webkit-max-content; grid-template-columns: max-content; -ms-grid-rows: -webkit-max-content; -ms-grid-rows: max-content; grid-template-rows: -webkit-max-content; grid-template-rows: max-content; grid-gap: 1svh; display: -webkit-box; display: -ms-flexbox; display: flex; visibility: hidden; /* transition: 1s opacity ease-out; -webkit-transition: 1s opacity ease-out; -moz-transition: 1s opacity ease-out; -o-transition: 1s opacity ease-out; */ /* -webkit-animation: 15s ease home_appear; -moz-animation: 15s ease home_appear; -o-animation: 15s ease home_appear; animation: 15s ease home_appear; */ } #dribbble-area>*:nth-child(1) { -ms-grid-row: 1; -ms-grid-column: 1; } body:not(.menu-open):not(.clientlist) #dribbble-area, body:not(.menu-open):not(.clientlist) #location-area { opacity: 0; pointer-events: none; } body.clients-open #location-area, body.clientlist:not(.noScroll) #location-area { left: unset; right: calc(var(--page-padding)/2); } body.clients-open #dribbble-area { right: unset; left: var(--left); } body.menu-open #ticker-area, body.clients-open #ticker-area, body.menu-open #clients-area_home, body.clients-open #clients-area_home #menu-bg.hide #dribbble-area, body.menu-open .buttons_sticky, body.menu-open .buttons_sticky .shadow-wrap, body.menu-open .buttons_sticky .nav_btn.footer { /* -webkit-transition: opacity 0s var(--customEase) 0.75s; -moz-transition: opacity 0s var(--customEase) 0.75s; -o-transition: opacity 0s var(--customEase) 0.75s; transition: opacity 0s var(--customEase) 0.75s; */ pointer-events: none !important; /* opacity: 0 !important; */ } body.clients-open #clients-area_home, body.clients-open .clientlist-btn, body.clientlist.menu-open .clientlist_page a, body.clientlist #location-area, body.contact-open #location-area a, body.contact-open #dribbble-area { /* -webkit-transition: opacity 0s var(--customEase) 0.75s; -moz-transition: opacity 0s var(--customEase) 0.75s; -o-transition: opacity 0s var(--customEase) 0.75s; transition: opacity 0s var(--customEase) 0.75s; */ pointer-events: none !important; /* opacity: 0 !important; */ } body.clientlist.menu-open .clientlist_page { cursor: default; } body.menu-open #menu-bg #dribbble-area, body.menu-open #menu-bg #location-area { will-change: auto; transition: 3s opacity ease-out; -webkit-transition: 3s opacity ease-out; -moz-transition: 3s opacity ease-out; -o-transition: 3s opacity ease-out; visibility: visible; opacity: 1; } body.clients-open #menu-bg #location-area { will-change: auto; /* transition: 3s opacity ease-out 1s; -webkit-transition: 3s opacity ease-out 1s; -moz-transition: 3s opacity ease-out 1s; -o-transition: 3s opacity ease-out 1s; */ visibility: visible; opacity: 1; -webkit-transition: 2s opacity ease-out 2s; -o-transition: 2s opacity ease-out 2s; transition: 2s opacity ease-out 2s; } body.clientlist #location-area.activated { will-change: auto; /* transition: 3s opacity ease-out; -webkit-transition: 3s opacity ease-out; -moz-transition: 3s opacity ease-out; -o-transition: 3s opacity ease-out; */ visibility: visible; opacity: 1; -webkit-transition: 2s opacity ease-out 1s; -o-transition: 2s opacity ease-out 1s; transition: 2s opacity ease-out 1s; } body.clientlist:not(.noScroll) .clientlist_page #location-area, body.clients-open #location-area { -webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-flow: column; flex-flow: column; -webkit-box-align: start; -ms-flex-align: start; align-items: flex-start; gap: 0; } #footer-area_clientlist span { display: none; } #footer-area_clientlist a { text-decoration: underline; } #menu-bg.hide #dribbble-area, #menu-bg.hide #location-area { opacity: 0; } body.clients-open #menu-bg #dribbble-area { visibility: hidden; } #dribbble-area p { -ms-grid-column: 1; grid-column: 1; } /* body.clientlist #location-area.activated p { opacity: 0; } */ body.clientlist:not(.noScroll) #location-area .icn_location, body.clients-open #location-area .icn_location { opacity: 0.15; -webkit-filter: unset; filter: unset; position: absolute; left: -2em; height: 100%; } /* body.clientlist #location-area.activated p { display: none; } */ #work-title-area p, #dribbble-area p, #clients-area_home p, #location-area p { will-change: auto; font-size: var(--font-size-ticker-area); color: #fff; opacity: 0.5; transition: 1s opacity ease-out; -webkit-transition: 1s opacity ease-out; -moz-transition: 1s opacity ease-out; -o-transition: 1s opacity ease-out; } body.clientlist:not(.noScroll) #location-area p, body.clients-open #location-area p { opacity: 0.25; display: block; color: #000; /* display: block; position: absolute; */ -webkit-margin-before: unset; margin-block-start: unset; -webkit-margin-after: unset; margin-block-end: unset; padding: unset; margin: unset; /* top: -2em; left: 3em; */ font-size: 12px; text-transform: uppercase; white-space: nowrap; line-height: 1.5em; } #dribbble-area:hover p { opacity: 1; } #lottie_logo_Dribbble { will-change: auto; height: 2svh; width: 2svh; opacity: 0.5; -ms-grid-column: 2; grid-column: 2; -webkit-transform: scale(1) rotate(0deg); -ms-transform: scale(1) rotate(0deg); transform: scale(1) rotate(0deg); -webkit-transition: 0.25s opacity ease-out, 0.25s -webkit-transform ease-out; transition: 0.25s opacity ease-out, 0.25s -webkit-transform ease-out; transition: 0.25s opacity ease-out, 0.25s transform ease-out; transition: 0.25s opacity ease-out, 0.25s transform ease-out, 0.25s -webkit-transform ease-out; -webkit-transition: 0.25s opacity ease-out, 0.25s transform ease-out; -moz-transition: 0.25s opacity ease-out, 0.25s transform ease-out; -o-transition: 0.25s opacity ease-out, 0.25s transform ease-out; } /* Dribbble in contact form menu */ #lottie_logo_Dribbble_menu { will-change: auto; height: 4svh; width: 4svh; opacity: 0.5; -ms-grid-column: 1; grid-column: 1; -webkit-transform: scale(1) rotate(0deg); -ms-transform: scale(1) rotate(0deg); transform: scale(1) rotate(0deg); -webkit-transition: 0.25s opacity ease-out, 0.25s -webkit-transform ease-out; transition: 0.25s opacity ease-out, 0.25s -webkit-transform ease-out; transition: 0.25s opacity ease-out, 0.25s transform ease-out; transition: 0.25s opacity ease-out, 0.25s transform ease-out, 0.25s -webkit-transform ease-out; -webkit-transition: 0.25s opacity ease-out, 0.25s transform ease-out; -moz-transition: 0.25s opacity ease-out, 0.25s transform ease-out; -o-transition: 0.25s opacity ease-out, 0.25s transform ease-out; } .dribbble_text { will-change: auto; -ms-grid-column: 2; grid-column: 2; font-family: var(--font-averta_semibold); font-size: var(--font-size-contact-btn-menu); color: #fff; opacity: 0.5; -webkit-transition: 0.25s opacity ease-out, 0.25s -webkit-transform ease-out; transition: 0.25s opacity ease-out, 0.25s -webkit-transform ease-out; transition: 0.25s opacity ease-out, 0.25s transform ease-out; transition: 0.25s opacity ease-out, 0.25s transform ease-out, 0.25s -webkit-transform ease-out; -webkit-transition: 0.25s opacity ease-out, 0.25s transform ease-out; -moz-transition: 0.25s opacity ease-out, 0.25s transform ease-out; -o-transition: 0.25s opacity ease-out, 0.25s transform ease-out; } #dribbble-area:hover #lottie_logo_Dribbble { opacity: 1; -webkit-transform: scale(1.25) rotate(-15deg); -ms-transform: scale(1.25) rotate(-15deg); transform: scale(1.25) rotate(-15deg); -webkit-animation: 1s linear infinite both dribbble_bounce; animation: 1s linear infinite both dribbble_bounce; } #dribbble-area:hover #lottie_logo_Dribbble svg { -webkit-animation: 1s linear infinite both dribbble_rotate; animation: 1s linear infinite both dribbble_rotate; } #dribbble-area_menu:hover #lottie_logo_Dribbble_menu { opacity: 1; -webkit-transform: scale(1.25) rotate(-15deg); -ms-transform: scale(1.25) rotate(-15deg); transform: scale(1.25) rotate(-15deg); } #dribbble-area_menu:hover .dribbble_text { opacity: 1; -webkit-transform: translate(0.5svh, 0); -ms-transform: translate(0.5svh, 0); transform: translate(0.5svh, 0); } .contact-email:hover { color: #fff; } /* FIX FOR CLIPPING LOTTIE ON HOVER SCALE */ #lottie_logo_Dribbble svg { overflow: visible; } #lottie_logo_Dribbble_menu svg { overflow: visible; } @-webkit-keyframes dribbble_bounce { 0% { -webkit-transform: translateY(0); transform: translateY(0); } 20% { -webkit-transform: translateY(2px); transform: translateY(2px); } 50% { -webkit-transform: translateY(-5px); transform: translateY(-5px); } 60% { -webkit-transform: translateY(-6px); transform: translateY(-6px); } 80% { -webkit-transform: translateY(-5px); transform: translateY(-5px); } 100% { -webkit-transform: translateY(0); transform: translateY(0); } } @keyframes dribbble_bounce { 0% { -webkit-transform: translateY(0); transform: translateY(0); } 20% { -webkit-transform: translateY(2px); transform: translateY(2px); } 50% { -webkit-transform: translateY(-5px); transform: translateY(-5px); } 60% { -webkit-transform: translateY(-6px); transform: translateY(-6px); } 80% { -webkit-transform: translateY(-5px); transform: translateY(-5px); } 100% { -webkit-transform: translateY(0); transform: translateY(0); } } @-webkit-keyframes dribbble_rotate { 0% { -webkit-transform: rotate(0deg); transform: rotate(0deg); } 50% { -webkit-transform: rotate(25deg); transform: rotate(25deg); } 100% { -webkit-transform: rotate(0deg); transform: rotate(0deg); } } @keyframes dribbble_rotate { 0% { -webkit-transform: rotate(0deg); transform: rotate(0deg); } 50% { -webkit-transform: rotate(25deg); transform: rotate(25deg); } 100% { -webkit-transform: rotate(0deg); transform: rotate(0deg); } } /* WORK STATUS CAROUSEL */ #work-title_1, #work-title_2, #work-title_3, #work-title_4 { opacity: 0; -ms-grid-row: 1; grid-row: 1; -ms-grid-column: 1; grid-column: 1; animation-play-state: running; -webkit-animation-play-state: running; } #work-title_1 { will-change: auto; -webkit-animation: 30s ease-out infinite work_title_1; animation: 30s ease-out infinite work_title_1; } #work-title_2 { will-change: auto; -webkit-animation: 30s ease-out infinite work_title_2; animation: 30s ease-out infinite work_title_2; } #work-title_3 { will-change: auto; -webkit-animation: 30s ease-out infinite work_title_3; animation: 30s ease-out infinite work_title_3; } #work-title_4 { will-change: auto; -webkit-animation: 30s ease-out infinite work_title_4; animation: 30s ease-out infinite work_title_4; } body.home-portfolio-open #work-title_1, body.home-portfolio-open #work-title_2, body.home-portfolio-open #work-title_3, body.home-portfolio-open #work-title_4 { animation-play-state: paused; -webkit-animation-play-state: paused; } /* Ticker animations : using SCALE to remove hidden layers on same grid row to allow clicking links if needed */ @-webkit-keyframes work_title_1 { 0% { opacity: 0; -webkit-transform: scale(1); transform: scale(1); } 10% { opacity: 1; -webkit-transform: scale(1); transform: scale(1); } 23% { opacity: 1; -webkit-transform: scale(1); transform: scale(1); } 25% { opacity: 0; -webkit-transform: scale(1); transform: scale(1); } 26% { opacity: 0; -webkit-transform: scale(0); transform: scale(0); } 100% { opacity: 0; -webkit-transform: scale(0); transform: scale(0); } } @-webkit-keyframes work_title_2 { 0% { opacity: 0; -webkit-transform: scale(0); transform: scale(0); } 24% { opacity: 0; -webkit-transform: scale(0); transform: scale(0); } 25% { opacity: 0; -webkit-transform: scale(1); transform: scale(1); } 35% { opacity: 1; -webkit-transform: scale(1); transform: scale(1); } 48% { opacity: 1; -webkit-transform: scale(1); transform: scale(1); } 50% { opacity: 0; -webkit-transform: scale(1); transform: scale(1); } 51% { opacity: 0; -webkit-transform: scale(0); transform: scale(0); } 100% { opacity: 0; -webkit-transform: scale(0); transform: scale(0); } } @-webkit-keyframes work_title_3 { 0% { opacity: 0; -webkit-transform: scale(0); transform: scale(0); } 49% { opacity: 0; -webkit-transform: scale(0); transform: scale(0); } 50% { opacity: 0; -webkit-transform: scale(1); transform: scale(1); } 60% { opacity: 1; -webkit-transform: scale(1); transform: scale(1); } 73% { opacity: 1; -webkit-transform: scale(1); transform: scale(1); } 75% { opacity: 0; -webkit-transform: scale(1); transform: scale(1); } } @-webkit-keyframes work_title_4 { 0% { opacity: 0; -webkit-transform: scale(0); transform: scale(0); } 74% { opacity: 0; -webkit-transform: scale(0); transform: scale(0); } 75% { opacity: 0; -webkit-transform: scale(1); transform: scale(1); } 85% { opacity: 1; -webkit-transform: scale(1); transform: scale(1); } 98% { opacity: 1; -webkit-transform: scale(1); transform: scale(1); } 100% { opacity: 0; -webkit-transform: scale(1); transform: scale(1); } } @keyframes work_title_1 { 0% { opacity: 0; -webkit-transform: scale(1); transform: scale(1); } 10% { opacity: 1; -webkit-transform: scale(1); transform: scale(1); } 23% { opacity: 1; -webkit-transform: scale(1); transform: scale(1); } 25% { opacity: 0; -webkit-transform: scale(1); transform: scale(1); } 26% { opacity: 0; -webkit-transform: scale(0); transform: scale(0); } 100% { opacity: 0; -webkit-transform: scale(0); transform: scale(0); } } @keyframes work_title_2 { 0% { opacity: 0; -webkit-transform: scale(0); transform: scale(0); } 24% { opacity: 0; -webkit-transform: scale(0); transform: scale(0); } 25% { opacity: 0; -webkit-transform: scale(1); transform: scale(1); } 35% { opacity: 1; -webkit-transform: scale(1); transform: scale(1); } 48% { opacity: 1; -webkit-transform: scale(1); transform: scale(1); } 50% { opacity: 0; -webkit-transform: scale(1); transform: scale(1); } 51% { opacity: 0; -webkit-transform: scale(0); transform: scale(0); } 100% { opacity: 0; -webkit-transform: scale(0); transform: scale(0); } } @keyframes work_title_3 { 0% { opacity: 0; -webkit-transform: scale(0); transform: scale(0); } 49% { opacity: 0; -webkit-transform: scale(0); transform: scale(0); } 50% { opacity: 0; -webkit-transform: scale(1); transform: scale(1); } 60% { opacity: 1; -webkit-transform: scale(1); transform: scale(1); } 73% { opacity: 1; -webkit-transform: scale(1); transform: scale(1); } 75% { opacity: 0; -webkit-transform: scale(1); transform: scale(1); } } @keyframes work_title_4 { 0% { opacity: 0; -webkit-transform: scale(0); transform: scale(0); } 74% { opacity: 0; -webkit-transform: scale(0); transform: scale(0); } 75% { opacity: 0; -webkit-transform: scale(1); transform: scale(1); } 85% { opacity: 1; -webkit-transform: scale(1); transform: scale(1); } 98% { opacity: 1; -webkit-transform: scale(1); transform: scale(1); } 100% { opacity: 0; -webkit-transform: scale(1); transform: scale(1); } } /*------------------------ Contact form start -------------------------*/ #myModal { z-index: 0; display: -webkit-box; display: -ms-flexbox; display: flex; width: 100%; height: 100%; position: fixed; left: 0; top: 0; -webkit-transform: unset; -ms-transform: unset; transform: unset; -webkit-box-align: center; -ms-flex-align: center; align-items: center; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; visibility: hidden; pointer-events: none; } #myModal.show { visibility: visible; z-index: 99999997; } /* body.clients-open #myModal.show { visibility: hidden; pointer-events: none; } */ .modal-dialog { will-change: auto; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; -webkit-transform-origin: center; -ms-transform-origin: center; transform-origin: center; -webkit-transform: scale(0.75) translate(0, 0); -ms-transform: scale(0.75) translate(0, 0); transform: scale(0.75) translate(0, 0); opacity: 0; -webkit-transition: opacity 1s var(--customEase), -webkit-transform 1s var(--customEase); transition: opacity 1s var(--customEase), -webkit-transform 1s var(--customEase); -o-transition: opacity 1s var(--customEase), transform 1s var(--customEase); transition: opacity 1s var(--customEase), transform 1s var(--customEase); transition: opacity 1s var(--customEase), transform 1s var(--customEase), -webkit-transform 1s var(--customEase); -webkit-transition: opacity 1s var(--customEase), transform 1s var(--customEase); -moz-transition: opacity 1s var(--customEase), transform 1s var(--customEase); -o-transition: opacity 1s var(--customEase), transform 1s var(--customEase); } .modal-dialog.show { pointer-events: all; will-change: auto; -webkit-transition: opacity 1s var(--customEase) 0.25s, -webkit-transform 1s var(--customEase) 0.25s; transition: opacity 1s var(--customEase) 0.25s, -webkit-transform 1s var(--customEase) 0.25s; -o-transition: opacity 1s var(--customEase) 0.25s, transform 1s var(--customEase) 0.25s; transition: opacity 1s var(--customEase) 0.25s, transform 1s var(--customEase) 0.25s; transition: opacity 1s var(--customEase) 0.25s, transform 1s var(--customEase) 0.25s, -webkit-transform 1s var(--customEase) 0.25s; -webkit-transition: opacity 1s var(--customEase) 0.25s, transform 1s var(--customEase) 0.25s; -moz-transition: opacity 1s var(--customEase) 0.25s, transform 1s var(--customEase) 0.25s; -o-transition: opacity 1s var(--customEase) 0.25s, transform 1s var(--customEase) 0.25s; -webkit-transform: scale(1) translate(0, 0); -ms-transform: scale(1) translate(0, 0); transform: scale(1) translate(0, 0); opacity: 1; z-index: 1; } .modal-content { border: unset; width: 55vw; } .modal-header { border: unset; padding: 40px; padding-bottom: 0px; } /* .modal-body #dribbble-area_menu { text-align: left; grid-row: 5; grid-column: 1; margin-top: 2svh; display: flex; grid-gap: 1svh; align-items: center; align-content: center; } */ .modal-body .instructions { text-align: right; -ms-grid-row: 4; grid-row: 4; -ms-grid-column: 2; grid-column: 2; margin-top: 2svh; color: #fff; width: -webkit-fit-content; width: -moz-fit-content; width: fit-content; display: -webkit-box; display: -ms-flexbox; display: flex; justify-self: right; border-bottom: 1px solid rgba(255, 255, 255, 1); padding: 0.5em 0em; } .modal-body .instructions a { will-change: auto; /* opacity: 0.5; */ white-space: nowrap; transition: opacity 1s var(--customEase); -webkit-transition: opacity 1s var(--customEase); -moz-transition: opacity 1s var(--customEase); -o-transition: opacity 1s var(--customEase); } .modal-body .instructions a:hover span { background: -o-radial-gradient(center center, circle, #2ce997 0%, #2ce9e6 20%, #2ce997 33%, #ffee00 50%, #2ce997 61%, #2ce9e6 77%, #2ce997 100%); background: radial-gradient(circle at center center, #2ce997 0%, #2ce9e6 20%, #2ce997 33%, #ffee00 50%, #2ce997 61%, #2ce9e6 77%, #2ce997 100%); background-clip: text; color: transparent; -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-size: 2500% 2500%; word-break: break-word; white-space: nowrap; width: 100%; -webkit-animation: gradientAnimation var(--grad-text-speed) linear infinite; animation: gradientAnimation var(--grad-text-speed) linear infinite; -o-animation: gradientAnimation var(--grad-text-speed) linear infinite; } .close { margin: 0px !important; } #btnContactUs { will-change: auto; -ms-grid-row: 4; grid-row: 4; -ms-grid-column: 1; -ms-grid-column-span: 2; grid-column: 1 / span 2; cursor: pointer; color: #fff; background-color: #000; border: unset; text-align: center; font-family: var(--font-averta_bold); font-size: var(--font-size-contact-btn-form); width: -webkit-fit-content; width: -moz-fit-content; width: fit-content; height: var(--height-contact-btn-menu); border-radius: var(--roundness-contact-btn-form); padding: var(--padding-contact-btn-form); display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; gap: 0.5em; -webkit-transition: background 0.5s ease-out, color 0.25s ease-out, transform 0.5s ease-out, width 0.5s var(--customEase); -webkit-transition: background 0.5s ease-out, color 0.25s ease-out, width 0.5s var(--customEase), -webkit-transform 0.5s ease-out; transition: background 0.5s ease-out, color 0.25s ease-out, width 0.5s var(--customEase), -webkit-transform 0.5s ease-out; transition: background 0.5s ease-out, color 0.25s ease-out, transform 0.5s ease-out, width 0.5s var(--customEase); transition: background 0.5s ease-out, color 0.25s ease-out, transform 0.5s ease-out, width 0.5s var(--customEase), -webkit-transform 0.5s ease-out; -moz-transition: background 0.5s ease-out, color 0.25s ease-out, transform 0.5s ease-out, width 0.5s var(--customEase); -o-transition: background 0.5s ease-out, color 0.25s ease-out, transform 0.5s ease-out, width 0.5s var(--customEase); } #btnContactUs.spinning { width: 25.6svh; background: unset; border: 2px solid #fff; } #spinner_sending { width: 1.2em; height: 1.2em; } #btnContactUs:hover { -webkit-transform: scale(1.1); -ms-transform: scale(1.1); transform: scale(1.1); background-color: #fff; color: #000 } .form-control { display: block; width: 100%; color: #495057; background-clip: padding-box; border: unset; font-size: (var(--font-size-p)); line-height: var(--line-height-p); color: #fff; /* background-color: rgba(255, 255, 255, 0.15); */ background: hsl(211.43deg 90% 49%); border: unset; padding: 1.5rem 2rem; border-radius: 0.75rem; -webkit-box-sizing: border-box; box-sizing: border-box; font-family: var(--font-averta_regular); } .form-control:focus { background-color: hsl(211.43deg 100% 41%); } .form-control::-webkit-input-placeholder { color: #fff; font-family: var(--font-averta_semibold); } .form-control::-moz-placeholder { color: #fff; font-family: var(--font-averta_semibold); } .form-control:-ms-input-placeholder { color: #fff; font-family: var(--font-averta_semibold); } .form-control::-ms-input-placeholder { color: #fff; font-family: var(--font-averta_semibold); } .form-control::placeholder { color: #fff; font-family: var(--font-averta_semibold); } #reused_form { /* display: grid; align-items: center; align-content: center; grid-gap: 1.5svh; */ /* grid-gap: 1.5svh; */ display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: stretch; -ms-flex-align: stretch; align-items: stretch; -webkit-box-pack: justify; -ms-flex-pack: justify; justify-content: space-between; -ms-flex-flow: wrap; flex-flow: wrap; width: 100%; gap: 1%; row-gap: 1.25svh; } .modal-title { /* grid-row: 1; grid-column: 1 / span 2; */ text-align: left; font-size: var(--font-size-contact-form-h1); line-height: var(--line-height-contact-form-h1); font-family: var(--font-averta_extrabold); color: #000; margin-bottom: calc(var(--top) / 2); color: #fff; } /* .modal-title span { color: rgba(255, 255, 255, 0.75); } */ .form-column-left { /* grid-row: 2; grid-column: 1; */ width: 49%; } .form-column-right { /* grid-row: 2; grid-column: 2; */ width: 49%; } .form-column-message { /* grid-row: 3; grid-column: 1 / span 2; */ width: 100%; margin-bottom: calc(var(--top) / 2); resize: none; } .form-column-message textarea { resize: none; height: 25vh; } .form-group label { display: none; } label { color: #000; /* font-weight: 600; */ width: 100%; } #success_message { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-flow: column; flex-flow: column; -webkit-box-align: center; -ms-flex-align: center; align-items: center; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; text-align: center; } #success_message .modal-title, #success_message .modal-subtitle { text-align: center; opacity: 0; -webkit-animation: success_text 1s var(--customEase) forwards 1s; animation: success_text 1s var(--customEase) forwards 1s; } #success_message .modal-subtitle { -webkit-animation-delay: 1.5s; animation-delay: 1.5s; } @-webkit-keyframes success_text { from { opacity: 0; -webkit-transform: translateY(0.35em); transform: translateY(0.35em); } to { opacity: 1; -webkit-transform: translateY(0); transform: translateY(0); } } @keyframes success_text { from { opacity: 0; -webkit-transform: translateY(0.35em); transform: translateY(0.35em); } to { opacity: 1; -webkit-transform: translateY(0); transform: translateY(0); } } #success_message { color: #fff; padding-top: 20px; text-align: center; } #error_message { color: red; padding-top: 20px; text-align: center; } section { overflow: hidden; } #section-pricing { padding-bottom: unset; } #section-contact { padding-top: 60px; padding-bottom: 100px; } .hide-on-desktop { display: none !important; } .logos { margin-top: -30px; position: relative; padding-bottom: 110px; } /* IF PLACING LOTTIE IN PARALLAX OR USING CSS TRANSFORMS */ /* .forceGPU { will-change: auto; } .forceGPU svg { will-change: auto; } */ /* PREVENT USER FROM SELECTING STUFF */ .noselect { -webkit-touch-callout: none; /* iOS Safari */ -webkit-user-select: none; /* Safari */ /* Konqueror HTML */ -moz-user-select: none; /* Old versions of Firefox */ -ms-user-select: none; /* Internet Explorer/Edge */ user-select: none; /* Non-prefixed version, currently supported by Chrome, Edge, Opera and Firefox */ } /* PREVENT CLICKING THROUGH MENU OPEN */ .home-content { z-index: 0; position: relative; } body.menu-open.noScroll .content, body.menu-open.noScroll .home-content *, body.clients-open.noScroll .content, body.clients-open.noScroll .home-content * { visibility: hidden; display: none; -webkit-animation-play-state: paused; animation-play-state: paused; animation-play-state: paused; } /* CTA SECTIONS */ .section-new.cta-area { width: 60%; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; -webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-flow: column; flex-flow: column; position: relative; margin-inline: auto; text-align: center; } /* body.services .section-new.cta-area { width: 49em; } */ .section-new.cta-area p span { font-family: var(--font-averta_bold); } .btn_cta { /* position: relative; */ margin-block: 4em; width: -webkit-fit-content; width: -moz-fit-content; width: fit-content; -webkit-transition: background 0.5s var(--customEase), color 0.5s var(--customEase), width 0.5s var(--customEase), -webkit-transform 0.5s var(--customEase); transition: background 0.5s var(--customEase), color 0.5s var(--customEase), width 0.5s var(--customEase), -webkit-transform 0.5s var(--customEase); -o-transition: background 0.5s var(--customEase), color 0.5s var(--customEase), transform 0.5s var(--customEase), width 0.5s var(--customEase); transition: background 0.5s var(--customEase), color 0.5s var(--customEase), transform 0.5s var(--customEase), width 0.5s var(--customEase); transition: background 0.5s var(--customEase), color 0.5s var(--customEase), transform 0.5s var(--customEase), width 0.5s var(--customEase), -webkit-transform 0.5s var(--customEase); } .btn_cta:hover, .btn_cta:focus, .btn_cta:link { -webkit-transform: scale(1.1); -ms-transform: scale(1.1); transform: scale(1.1); } .btn_cta a { pointer-events: all; cursor: pointer; white-space: nowrap; background: #121212; color: #fff; border: 2px solid #fff; padding: 1em 2em; border-radius: 6em; font-size: var(--font-size-contact-btn-form); font-family: var(--font-averta_semibold); -webkit-transition: background 0.5s var(--customEase), color 0.5s var(--customEase), width 0.5s var(--customEase), -webkit-transform 0.5s var(--customEase); transition: background 0.5s var(--customEase), color 0.5s var(--customEase), width 0.5s var(--customEase), -webkit-transform 0.5s var(--customEase); -o-transition: background 0.5s var(--customEase), color 0.5s var(--customEase), transform 0.5s var(--customEase), width 0.5s var(--customEase); transition: background 0.5s var(--customEase), color 0.5s var(--customEase), transform 0.5s var(--customEase), width 0.5s var(--customEase); transition: background 0.5s var(--customEase), color 0.5s var(--customEase), transform 0.5s var(--customEase), width 0.5s var(--customEase), -webkit-transform 0.5s var(--customEase); } .btn_cta a:hover, .btn_cta:focus, .btn_cta:link { background-color: #fff; border: 2px solid #121212; color: #121212; } .container-services.cta_full .btn_cta { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; margin-block: 3em; } .container-services.cta_full .contact_link { color: #fff; background: #121212; border: 2px solid transparent; z-index: 1; /* padding-inline: calc(2em - 4px); padding-block: calc(1em - 4px); */ } /* .container-services.cta_full .btn_cta:after { content: ""; width: calc(100% + 6px); height: calc(100% + 6px); border-radius: 6em; position: absolute; background: var(--nav-btn-gradient-o-); background: var(--nav-btn-gradient); background-size: var(--nav-btn-grad-size); -webkit-animation: gradientAnimation var(--grad-text-speed) linear infinite; animation: gradientAnimation var(--grad-text-speed) linear infinite; -o-animation: gradientAnimation var(--grad-text-speed) linear infinite; } */ .container-services.cta_full .btn_cta:hover, .container-services.cta_full .btn_cta a:hover, .container-services.cta_full .btn_cta:focus, .container-services.cta_full .btn_cta:link { -webkit-transform: scale(1.1); -ms-transform: scale(1.1); transform: scale(1.1); } /* FOOTER */ footer { /* position: relative; z-index: 99999; */ position: absolute; background: #121212; /* color: #4D6069; */ color: #77888D; width: 100%; min-height: 11.33em; /* margin-top: 15vw; */ height: -webkit-fit-content; height: -moz-fit-content; height: fit-content; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; } #footer_container { /* padding-block: 2.666em; */ width: calc(100% - var(--page-padding)*2); position: relative; } .footer_center { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: flex-start; -ms-flex-flow: row; -webkit-box-orient: horizontal; -webkit-box-direction: normal; flex-flow: row; } footer .col_left, footer .col_right { /* width: 30%; */ height: -webkit-fit-content; height: -moz-fit-content; height: fit-content; width: -webkit-fit-content; width: -moz-fit-content; width: fit-content; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; -webkit-box-orient: horizontal; -webkit-box-direction: normal; -ms-flex-flow: row; flex-flow: row; text-align: left; } footer .col_mid, footer .col_right { padding-inline: 2em; padding-block: 1em; } :root { --font-size-footer-title: 26px; --line-height-footer-title: 28px } footer .col_left.title { width: -webkit-fit-content; width: -moz-fit-content; width: fit-content; font-size: var(--font-size-footer-title); line-height: var(--line-height-footer-title); font-family: var(--font-averta_bold); } footer .col_left.title .desktop { display: block; } footer .col_left.title .mobile { display: none; } footer .col_left.title img { height: 1.5em; width: 3.2em; } footer .col_mid { width: 22em; margin-left: 2em; /* border-left: 1px solid #4D6069; border-right: 1px solid #4D6069; */ font-size: var(--font-size-footer); line-height: var(--line-height-footer); border: 1px dashed rgba(77, 96, 105, 0.3); border-radius: 1em; } footer .col_right { width: -webkit-fit-content; width: -moz-fit-content; width: fit-content; -webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-flow: column; flex-flow: column; text-align: left; -webkit-box-align: start; -ms-flex-align: start; align-items: flex-start; gap: 0.5em; } .footer_contact, .footer_mobile, .footer_contact a, .footer_mobile a { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-orient: horizontal; -webkit-box-direction: normal; -ms-flex-flow: row; flex-flow: row; white-space: nowrap; -webkit-box-align: center; -ms-flex-align: center; align-items: center; } footer a { cursor: pointer; } span.icn_text { font-size: var(--font-size-card-title); line-height: var(--line-height-p); font-family: var(--font-averta_semibold); visibility: hidden; } span.icn_mail, span.icn_dribbble { margin-right: 1em; background-repeat: no-repeat; background-position: center; background-size: contain; width: var(--font-size-card-title); height: var(--font-size-card-title); position: relative; display: -webkit-box; display: -ms-flexbox; display: flex; text-align: left; float: left; } span.icn_mail { background-image: url('_img/icn_mail.svg'); } span.icn_dribbble { background-image: url('_img/icn_dribbble.svg'); } .footer_contact:hover, .footer_mobile:hover { color: #fff; } .footer_contact:hover span.icn_mail, .footer_mobile:hover span.icn_dribbble { -webkit-filter: brightness(5); filter: brightness(5); } /* STICKY BUTTONS */ .buttons_sticky a.nav_btn, .button_back a.nav_btn { background: #121212; } .buttons_sticky a.nav_btn.footer:hover, .button_back a.nav_btn.footer:hover { background: #1a1a1a; } .buttons_sticky a.nav_btn.footer:hover .top_line { color: #fff; } .buttons_sticky .icn_arrow, .button_back .icn_arrow { animation-play-state: running; -webkit-animation-play-state: running; } .buttons_sticky.right { /* position: fixed; */ position: absolute; bottom: -9.2em; right: var(--page-padding); z-index: 9999; /* width: 22svw; */ max-width: 350px; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-pack: end; -ms-flex-pack: end; justify-content: flex-end; } .button_back.left { bottom: 2em; z-index: 9999; /* width: 22svw; */ max-width: 350px; position: absolute; display: block; bottom: 2em; left: 2em; } .button_back.left .icn_arrow { -webkit-transform: rotate(180deg); -ms-transform: rotate(180deg); transform: rotate(180deg); } .button_back.left .shadow-wrap { width: 6em; margin-left: calc(var(--nav-btn-line-thickness)*2); } .buttons_sticky { /* -webkit-transform: translateY(10em); -ms-transform: translateY(10em); transform: translateY(10em); */ opacity: 0; transition: opacity 1s var(--customEase), -webkit-transform 1s var(--customEase); } .buttons_sticky.appear { -webkit-transform: translateY(0); -ms-transform: translateY(0); transform: translateY(0); opacity: 1; } .buttons_sticky a.nav_btn:hover, .button_back.left a.nav_btn:hover { top: calc(var(--nav-btn-line-thickness)*-1); } .section-new { margin-top: 7vw; } .section-more { width: 60%; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; -webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-flow: column; flex-flow: column; position: relative; margin-inline: auto; text-align: center; pointer-events: none; } .section-more button { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; -webkit-box-pack: end; -ms-flex-pack: end; justify-content: flex-end; pointer-events: all; cursor: pointer; } .section-more .icn_plus { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; padding: 0.5em; background-repeat: no-repeat; background-size: 1em; background-image: url('_img/bolt-solid.svg'); background-position: center; -webkit-filter: unset; filter: unset; border: unset; border-radius: 100%; width: 1em; height: 1em; opacity: 1; } .section-more .button:hover .icn_plus { border: 2px solid rgba(0, 0, 0, 1); } /* body.home .section-more .button:active .icn_plus, body.home .section-more .button:focus .icn_plus, body.home .section-more .button:link .icn_plus { border: unset; background-color: #fff; -webkit-filter: unset; filter: unset; } */ body.light .section-more .button:active .icn_plus, body.light .section-more .button:focus .icn_plus, body.light .section-more .button:link .icn_plus { border: 2px solid rgba(0, 0, 0, 1); } .section-more .button:hover { opacity: 1; } .section-more button p, .section-more button .icn_plus { will-change: auto; -webkit-transition: 1s -webkit-transform var(--customEase); transition: 1s -webkit-transform var(--customEase); transition: 1s transform var(--customEase); transition: 1s transform var(--customEase), 1s -webkit-transform var(--customEase); -webkit-transition: 1s transform var(--customEase); -moz-transition: 1s transform var(--customEase); -o-transition: 1s transform var(--customEase); -webkit-transform: translateX(0); -ms-transform: translateX(0); transform: translateX(0); } #projects_home .section-more button p { font-size: var(--font-size-contact-btn-form); } button p { white-space: nowrap; } #projects_home .section-more button.clientlist-link.outline { padding-inline: 4em; } .section-more .button:hover button p { -webkit-transform: translateX(-0.5em); -ms-transform: translateX(-0.5em); transform: translateX(-0.5em); } .section-more .button:hover .icn_plus { -webkit-transform: translateX(0.5em); -ms-transform: translateX(0.5em); transform: translateX(0.5em); } .if_home, .if_projects, .if_services, .if_about, .if_clients { display: none; } body.home .if_home { display: block; } body.projects .if_projects { display: block; } body.services .if_services { display: block; } body.about .if_about { display: block; } body.clientlist .if_clients { display: block; } .insert_footer { background: red; } .page_end { width: 100%; height: 6em; } .clientlist-link.outline { will-change: auto; border: 2px solid #121212; border-radius: 6em; padding-inline: 2.5em; margin-top: 2em; font-family: var(--font-averta_semibold); -webkit-transition: 1s -webkit-transform var(--customEase); transition: 1s -webkit-transform var(--customEase); -o-transition: 1s transform var(--customEase); transition: 1s transform var(--customEase); transition: 1s transform var(--customEase), 1s -webkit-transform var(--customEase); } .section-more .button:hover .clientlist-link.outline { background: #121212; color: #fff; -webkit-transform: scale(1.05); -ms-transform: scale(1.05); transform: scale(1.05); } .clientlist-link.outline .icn_plus { padding-inline: unset; margin-left: 0.5em; } .link button a { all: unset; } .section-more .link button { font-family: var(--font-averta_semibold); font-size: var(--font-size-link); text-decoration: underline; white-space: nowrap; } .section-more .button:hover .clientlist-link.outline .icn_plus { border: unset; -webkit-transform: translateX(0.15em); -ms-transform: translateX(0.15em); transform: translateX(0.15em); -webkit-filter: invert(1); filter: invert(1); } .section-more .button:hover .clientlist-link.outline p { -webkit-transform: translateX(-0.15em); -ms-transform: translateX(-0.15em); transform: translateX(-0.15em); } /* SERVICES PAGE */ .section-new.cta-area.intro { margin-top: unset; } body.services .section-new.cta-area.handoff { width: 40em; } .portfolio.services { -webkit-column-count: 2; -moz-column-count: 2; column-count: 2; -webkit-column-gap: 2em; -moz-column-gap: 2em; column-gap: 2em; margin-top: calc(var(--top)*4); } #projects_home .portfolio.services { -webkit-column-count: unset; -moz-column-count: unset; column-count: unset; -webkit-column-gap: unset; -moz-column-gap: unset; column-gap: unset; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-orient: horizontal; -webkit-box-direction: normal; -ms-flex-flow: row; flex-flow: row; -ms-flex-pack: distribute; justify-content: space-around; background: #121212; border-radius: var(--portfolio-border-radius); /* overflow: hidden; */ } #projects_home .portfolio.services .solutions { background: unset; /* color: #121212; */ height: auto; border-radius: unset; } #projects_home .portfolio.services .solutions.col_left, #projects_home .portfolio.services .solutions.col_right { margin: unset; width: calc(50% - (var(--portfolio-row-gap))); } /* #projects_home .portfolio.services .solutions.col_right { margin: auto; } */ #projects_home .portfolio.about { background: #fff; margin-inline: unset; padding-inline: var(--card-padding-inline); border-radius: var(--portfolio-border-radius); /* overflow: hidden; */ } #projects_home .portfolio.about .side_left { padding-block: var(--card-padding-inline); margin: unset; } #projects_home .lottie_container_block { width: 90%; height: auto; margin: auto; } #projects_home .portfolio.services, #projects_home .portfolio.about { margin-top: 2em } .portfolio.about { margin-top: calc(var(--top)*4); display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: start; -ms-flex-align: start; align-items: flex-start; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; -ms-flex-flow: wrap; flex-flow: wrap; -webkit-column-gap: 2em; -moz-column-gap: 2em; column-gap: 2em; row-gap: 8em; margin-inline: var(--card-padding-inline); } .container-services { position: relative; display: -webkit-box; display: -ms-flexbox; display: flex; /* width: calc(42.5% - (var(--portfolio-row-gap) /2)); */ height: -webkit-fit-content; height: -moz-fit-content; height: fit-content; -webkit-box-align: center; -ms-flex-align: center; align-items: center; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; background: var(--brand-color-gray); border-radius: var(--portfolio-border-radius); padding: var(--card-padding-inline); padding-top: unset; margin-bottom: 2em; -webkit-column-break-inside: avoid; -moz-column-break-inside: avoid; break-inside: avoid-column; } .container-services.cta_full { padding-top: var(--card-padding-inline); } .container-about { position: relative; display: -webkit-box; display: -ms-flexbox; display: flex; width: calc(50% - (var(--portfolio-row-gap) /2)); /* height: -webkit-fit-content; height: -moz-fit-content; height: fit-content; */ /* -webkit-box-align: center; -ms-flex-align: center; align-items: center; */ /* -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; */ -webkit-box-align: start; -ms-flex-align: start; align-items: flex-start; background: var(--brand-color-gray); border-radius: var(--portfolio-border-radius); /* padding-inline: var(--card-padding-inline); */ padding: var(--card-padding-inline); padding-top: unset; margin-bottom: 2em; /* height: 100%; */ -webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-flow: column; flex-flow: column; } .container-services.collaboration { -webkit-box-shadow: 0px 5.5px 2.2px rgba(0, 0, 0, 0.028), 0px 13.3px 5.3px rgba(0, 0, 0, 0.04), 0px 25px 10px rgba(0, 0, 0, 0.05), 0px 44.7px 17.9px rgba(0, 0, 0, 0.06), 0px 83.6px 33.4px rgba(0, 0, 0, 0.072), 0px 200px 80px rgba(0, 0, 0, 0.1); box-shadow: 0px 5.5px 2.2px rgba(0, 0, 0, 0.028), 0px 13.3px 5.3px rgba(0, 0, 0, 0.04), 0px 25px 10px rgba(0, 0, 0, 0.05), 0px 44.7px 17.9px rgba(0, 0, 0, 0.06), 0px 83.6px 33.4px rgba(0, 0, 0, 0.072), 0px 200px 80px rgba(0, 0, 0, 0.1); background: #121212; color: #fff; -webkit-column-break-before: column; -moz-column-break-before: column; break-before: column; } .container-services.solutions { background: #121212; color: #fff; } body.home-portfolio-open .container-services.solutions.side_right { background: var(--brand-color-gray); color: #121212; } .item { width: 100%; height: auto; } .container-services span { white-space: unset; } .container-services p span { font-family: var(--font-averta_bold); } .container-services p.list-title { -webkit-margin-before: 2em; margin-block-start: 2em; } .container-services h2, .container-about h2, .container-work h2 { -webkit-margin-before: var(--card-padding-inline); margin-block-start: var(--card-padding-inline); -webkit-margin-after: var(--card-padding-inline); margin-block-end: var(--card-padding-inline); } .container-services.cta_full h2 { -webkit-margin-before: unset; margin-block-start: unset; -webkit-margin-after: unset; margin-block-end: unset; } body.projects .container-services.cta_full .col_left { width: 65%; } .container-services.cta_full .col_left p { background: #fff; width: -webkit-fit-content; width: -moz-fit-content; width: fit-content; } .container-services.solutions h2, .container-services.reward h2, .container-work h2 { width: 80%; } .container-services.height_process { padding: unset; background: unset; } .height_process h2 { position: absolute; z-index: 2; /* top: var(--card-padding-inline); */ top: 0; left: var(--card-padding-inline); } .lottie_container_process { width: 100%; height: 100%; display: -ms-grid; display: grid; } #lottie_Process { width: 166.66%; -ms-flex-item-align: center; -ms-grid-row-align: center; align-self: center; -ms-grid-column-align: center; justify-self: center; } #lottie_Magic_wand { width: 100%; -ms-flex-item-align: center; -ms-grid-row-align: center; align-self: center; -ms-grid-column-align: center; justify-self: center; } span#lottie_emoji_stars { height: 1em; width: 0.8em; display: inline-block; } .stars_container { margin-top: 2em; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-flow: revert; flex-flow: revert; -webkit-box-align: center; -ms-flex-align: center; align-items: center; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; } .star_line { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-flow: revert; flex-flow: revert; -webkit-box-align: center; -ms-flex-align: center; align-items: center; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; gap: 0.5em; } .star_line::before, .star_line::after { content: ""; width: 3em; border: 1px solid var(--brand-color-gray); } div#lottie_five-stars { height: 100%; width: 8em; } #lottie_emoji_stars_01, #lottie_emoji_stars_02, #lottie_emoji_stars_03, #lottie_emoji_stars_04, #lottie_emoji_stars_05 { height: 100%; width: 2em; /* -webkit-animation: float_stars 2.5s ease-in-out infinite; animation: float_stars 2.5s ease-in-out infinite; */ } /* #lottie_emoji_stars_01 { -webkit-animation-delay: -2s; animation-delay: -2s; } #lottie_emoji_stars_02 { -webkit-animation-delay: -1.5s; animation-delay: -1.5s; } #lottie_emoji_stars_03 { -webkit-animation-delay: -1s; animation-delay: -1s; } #lottie_emoji_stars_04 { -webkit-animation-delay: -0.5s; animation-delay: -0.5s; } #lottie_emoji_stars_05 { -webkit-animation-delay: 0s; animation-delay: 0s; } */ /* #lottie_emoji_stars_02 svg, #lottie_emoji_stars_05 svg { transform: rotate(180deg) !important; } */ /* @-webkit-keyframes float_stars { 0% { -webkit-transform: scale(1); transform: scale(1); } 50% { -webkit-transform: scale(1.5); transform: scale(1.5); } 100% { -webkit-transform: scale(1); transform: scale(1); } } @keyframes float_stars { 0% { -webkit-transform: scale(1); transform: scale(1); } 50% { -webkit-transform: scale(1.5); transform: scale(1.5); } 100% { -webkit-transform: scale(1); transform: scale(1); } } */ .process-mask-top, .process-mask-bottom { height: 1.5em; width: 100%; background: #fff; position: absolute; z-index: 1; } .process-mask-top:before, .process-mask-bottom:before { content: ""; height: 1.5em; width: 100%; background: var(--brand-color-gray); position: absolute; } .process-mask-top, .process-mask-top:before { top: 0; border-radius: 1.5em 1.5em 0 0; } .process-mask-bottom, .process-mask-bottom:before { bottom: 0; border-radius: 0 0 1.5em 1.5em; } .container-services.reward { background: #fff; -webkit-box-shadow: 0px 5.5px 2.2px rgba(0, 0, 0, 0.028), 0px 13.3px 5.3px rgba(0, 0, 0, 0.04), 0px 25px 10px rgba(0, 0, 0, 0.05), 0px 44.7px 17.9px rgba(0, 0, 0, 0.06), 0px 83.6px 33.4px rgba(0, 0, 0, 0.072), 0px 200px 80px rgba(0, 0, 0, 0.1); box-shadow: 0px 5.5px 2.2px rgba(0, 0, 0, 0.028), 0px 13.3px 5.3px rgba(0, 0, 0, 0.04), 0px 25px 10px rgba(0, 0, 0, 0.05), 0px 44.7px 17.9px rgba(0, 0, 0, 0.06), 0px 83.6px 33.4px rgba(0, 0, 0, 0.072), 0px 200px 80px rgba(0, 0, 0, 0.1); } .container-services ul, .container-about ul { list-style-type: none; -webkit-padding-start: unset; padding-inline-start: unset; } .container-services ul li, .container-about ul li { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; } .container-services ul li:before { content: ""; background: url('_img/icn_check.svg'); width: 1em; height: 1em; background-size: contain; display: inline-block; background-repeat: no-repeat; background-position: center; } .container-services.solutions ul li { font-size: var(--font-size-list); line-height: var(--line-height-list); } .container-services.reward ul li { line-height: calc(var(--line-height-p)*1.5); } .container-services.solutions ul li:before { margin-right: 0.5em; } .container-services.reward ul li { font-family: var(--font-averta_bold); font-size: var(--font-size-p); /* -webkit-padding-start: 1.5em; padding-inline-start: 1.5em; */ } .container-services.reward ul li:before { margin-right: 1em; } .container-services.reward .btn_cta { display: -webkit-box; display: -ms-flexbox; display: flex; margin-block: 2em; } .container-services.reward .btn_cta a.contact_link { width: 100%; display: block; text-align: center; } #scroll_observer_Tags { /* background: linear-gradient(-377deg, var(--brand-color-gray) 66%, #fff 100%); */ background: var(--brand-color-gray); padding-block: 0; } .portfolio.about #scroll_observer_Tags { background: #121212; } .container-services .scroll-text li:before, .container-about .scroll-text li:before { all: unset; } .container-services .scroll-text li, .container-about .scroll-text li { background: #fff; border-radius: 1em; font-family: var(--font-averta_bold); width: 100%; -webkit-box-align: center; -ms-flex-align: center; align-items: center; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; height: 100%; padding: 1.725em 0em; } .container-about .scroll-text li { background: #262626; color: #fff; padding: 1em 0em; border-radius: 0.5em; } :root { --scrollBox_services: 25.7vw; } .container-services .scroll-box, .container-about .scroll-box { height: var(--scrollBox_services); -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; display: -webkit-box; display: -ms-flexbox; display: flex; overflow: hidden; position: relative; } .container-about .scroll-box, .container-about .item { height: 100%; } /* .container-services .scroll-box:before, .container-services .scroll-box:after { content: ""; background: -webkit-gradient(linear, left bottom, left top, from(var(--brand-color-gray)), to(transparent)); background: -o-linear-gradient(bottom, var(--brand-color-gray) 0%, transparent 100%); background: linear-gradient(0deg, var(--brand-color-gray) 0%, transparent 100%); height: 2vw; width: 100%; position: absolute; bottom: 0; border-radius: 2em; z-index: 1; } .container-services .scroll-box:after { bottom: unset; transform: rotate(180deg); top: 0; } */ #scroll-text_tracker, .list_static, .list_repeat { /* position: absolute; */ width: 100%; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; text-align: center; -webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-flow: column; flex-flow: column; gap: 1em; } .container-about #scroll-text_tracker { gap: 0.5em; } .container-services .scroll-text { width: 100%; margin: 0; padding: 0; white-space: nowrap; -webkit-animation: scrollUpTags_Services 40s linear infinite normal; animation: scrollUpTags_Services 40s linear infinite normal; } li.first { background: green !important; } li.last { background: red !important; } @-webkit-keyframes scrollUpTags_Services { from { -webkit-transform: translateY(0); transform: translateY(0); } to { -webkit-transform: translateY(calc(var(--scrollBox_services)*-3.865)); transform: translateY(calc(var(--scrollBox_services)*-3.8655)); } } @keyframes scrollUpTags_Services { from { -webkit-transform: translateY(0); transform: translateY(0); } to { -webkit-transform: translateY(calc(var(--scrollBox_services)*-3.865)); transform: translateY(calc(var(--scrollBox_services)*-3.865)); } } .container-about .scroll-text { width: 100%; margin: 0; padding: 0; white-space: nowrap; -webkit-animation: scrollUpTags_About 40s linear infinite normal 0s; animation: scrollUpTags_About 40s linear infinite normal 0; } @-webkit-keyframes scrollUpTags_About { from { -webkit-transform: translateY(0); transform: translateY(0); } to { -webkit-transform: translateY(calc(var(--scrollBox_services)*-2.83)); transform: translateY(calc(var(--scrollBox_services)*-2.83)); } } @keyframes scrollUpTags_About { from { -webkit-transform: translateY(0); transform: translateY(0); } to { -webkit-transform: translateY(calc(var(--scrollBox_services)*-2.83)); transform: translateY(calc(var(--scrollBox_services)*-2.83)); } } /* Twitter Emojis */ p img.emoji { height: 1em; width: 1em; margin: 0 .05em 0 .1em; vertical-align: -0.1em; } .icn_block.smiley-sunglasses { /* background: url('_img/icn_smiley_sunglasses.svg'); background-repeat: no-repeat; background-size: contain; */ width: 3em; height: 3em; position: absolute; top: -1em; left: -1em; z-index: 2; } .icn_block img { width: 100%; height: 100%; } .icn_block.waving-hand { /* background: url('_img/icn_waving_hand.svg'); background-repeat: no-repeat; background-size: contain; */ width: 5em; height: 5em; position: absolute; top: -1em; right: 1em; z-index: 2; } .icn_block.boomerang { /* background: url('_img/icn_boomerang.svg'); background-repeat: no-repeat; background-size: contain; */ width: 5em; height: 5em; position: absolute; top: -1em; right: 1em; z-index: 2; } .toolkit .item { z-index: 3; } .icn_block.smiley-halo { /* background: url('_img/icn_smiley_halo.svg'); background-repeat: no-repeat; background-size: contain; */ width: 5em; height: 5em; position: absolute; top: 0em; left: 58%; z-index: 2; } .icn_block.liked-message { background: url('_img/icn_liked_message.svg'); background-repeat: no-repeat; background-size: contain; width: 3em; height: 3em; position: absolute; left: -1.5em; top: -1.5em; } .icn_grad { width: 5em; height: 5em; position: absolute; right: calc(50% - 2.5em); top: -3.5em; border-radius: 100%; border: 2px solid #fff; z-index: 1; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; } .icn_block.flexed-bicep { background: #121212; background-image: url('_img/icn_magic_wand.svg'); background-repeat: no-repeat; background-size: contain; -webkit-transform: rotate(17deg); -ms-transform: rotate(17deg); transform: rotate(17deg); width: 100%; height: 100%; border-radius: 100%; } .icn_grad:before { content: ""; width: calc(100% + 5px); height: calc(100% + 5px); display: block; border-radius: 100%; z-index: -1; position: absolute; background: var(--nav-btn-gradient-o-); background: var(--nav-btn-gradient); background-size: var(--nav-btn-grad-size); -webkit-animation: gradientAnimation var(--grad-text-speed) linear infinite; animation: gradientAnimation var(--grad-text-speed) linear infinite; -o-animation: gradientAnimation var(--grad-text-speed) linear infinite; } .container-services.cta_full { -webkit-box-pack: justify; -ms-flex-pack: justify; justify-content: space-around; margin-top: 2em; background: #fff; background: -o-repeating-linear-gradient(45deg, rgba(255, 255, 255, 1), rgba(255, 255, 255, 1) 26px, var(--brand-color-gray) 26px, var(--brand-color-gray) 30px); background: repeating-linear-gradient(45deg, rgba(255, 255, 255, 1), rgba(255, 255, 255, 1) 26px, var(--brand-color-gray) 26px, var(--brand-color-gray) 30px); border: 1px solid rgba(0, 0, 0, 0.05); -webkit-box-shadow: 0px 5.5px 2.2px rgba(0, 0, 0, 0.028), 0px 13.3px 5.3px rgba(0, 0, 0, 0.04), 0px 25px 10px rgba(0, 0, 0, 0.05), 0px 44.7px 17.9px rgba(0, 0, 0, 0.06), 0px 83.6px 33.4px rgba(0, 0, 0, 0.072), 0px 200px 80px rgba(0, 0, 0, 0.1); box-shadow: 0px 5.5px 2.2px rgba(0, 0, 0, 0.028), 0px 13.3px 5.3px rgba(0, 0, 0, 0.04), 0px 25px 10px rgba(0, 0, 0, 0.05), 0px 44.7px 17.9px rgba(0, 0, 0, 0.06), 0px 83.6px 33.4px rgba(0, 0, 0, 0.072), 0px 200px 80px rgba(0, 0, 0, 0.1); } .container-services.cta_full.folded { background: -o-linear-gradient(bottom, var(--brand-color-gray), transparent); background: -webkit-gradient(linear, left bottom, left top, from(var(--brand-color-gray)), to(transparent)); background: linear-gradient(0deg, var(--brand-color-gray), transparent); } .container-services.cta_full .col_right { width: unset; } .container-services.cta_full .col_left { width: unset; } .container-services.cta_full h2 { -webkit-margin-after: unset; margin-block-end: unset; } .container-services .btn_cta:hover, .container-services .btn_cta:focus, .container-services .btn_cta:link { -webkit-transform: unset; -ms-transform: unset; transform: unset; } .container-services.extension { padding-top: var(--card-padding-inline); } .container-services.callout { background: unset; padding-top: unset; width: 28em; } .container-services.tools { background: unset; padding: unset; } .lottie_container_tools { width: 100%; } .float_emojis { -webkit-animation: float_emojis 6s ease-in-out infinite; animation: float_emojis 6s ease-in-out infinite; } @-webkit-keyframes float_emojis { 0% { -webkit-transform: translatey(0px); transform: translatey(0px); } 50% { -webkit-transform: translatey(-40px); transform: translatey(-40px); } 100% { -webkit-transform: translatey(0px); transform: translatey(0px); } } @keyframes float_emojis { 0% { -webkit-transform: translatey(0px); transform: translatey(0px); } 50% { -webkit-transform: translatey(-40px); transform: translatey(-40px); } 100% { -webkit-transform: translatey(0px); transform: translatey(0px); } } .float_emoji_waving { -webkit-animation: float_emoji_waving 6s ease-in-out infinite; animation: float_emoji_waving 6s ease-in-out infinite; } @-webkit-keyframes float_emoji_waving { 0% { -webkit-transform: translate(-10px, 10px) rotate(-10deg); transform: translate(-10px, 10px) rotate(-10deg); } 50% { -webkit-transform: translate(10px, -10px) rotate(10deg); transform: translate(10px, -10px) rotate(10deg); } 100% { -webkit-transform: translate(-10px, 10px) rotate(-10deg); transform: translate(-10px, 10px) rotate(-10deg); } } @keyframes float_emoji_waving { 0% { -webkit-transform: translate(-10px, 10px) rotate(-5deg); transform: translate(-10px, 10px) rotate(-5deg); } 50% { -webkit-transform: translate(10px, -10px) rotate(5deg); transform: translate(10px, -10px) rotate(5deg); } 100% { -webkit-transform: translate(-10px, 10px) rotate(-5deg); transform: translate(-10px, 10px) rotate(-5deg); } } /* .float_tools_counter { -webkit-animation: float_tools_counter 6s ease-in-out infinite; animation: float_tools_counter 6s ease-in-out infinite; } @-webkit-keyframes float_tools_counter { 0% { -webkit-transform: translatey(0px); transform: translatey(0px); } 50% { -webkit-transform: translatey(20px); transform: translatey(20px); } 100% { -webkit-transform: translatey(0px); transform: translatey(0px); } } @keyframes float_tools_counter { 0% { -webkit-transform: translatey(0px); transform: translatey(0px); } 50% { -webkit-transform: translatey(20px); transform: translatey(20px); } 100% { -webkit-transform: translatey(0px); transform: translatey(0px); } } */ img.headshot { width: 100%; border-radius: 2em; margin-bottom: 2em; } .section-new.profile { margin-top: 2vw; } .container-services.social { display: -webkit-box; display: -ms-flexbox; display: flex; -ms-flex-wrap: nowrap; flex-wrap: nowrap; -webkit-box-align: center; -ms-flex-align: center; align-items: center; -webkit-box-pack: justify; -ms-flex-pack: justify; justify-content: space-between; -ms-flex-flow: wrap; flex-flow: wrap; } .container-services.social .col_right { width: unset; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; gap: 2em; } .container-services.social .btn_cta { margin-block: unset; } .container-services.cta_full.social .btn_cta:after { content: unset; } .logo_social.linkedin { background: url('_img/logo_linkedin.svg'); background-repeat: no-repeat; background-size: 2em; background-position: center; width: 3em; height: 3em; } a.linkedin, a.dribbble { font-size: var(--font-size-tags); font-family: var(--font-averta_bold); } a.linkedin { background: unset; border: 2px solid #121212; color: #121212; } a.linkedin:hover, a.linkedin:focus { background: #121212; color: #fff; } a.dribbble { position: relative; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; padding-left: 4.25em; font-size: var(--font-size-p); line-height: var(--line-height-p); font-family: var(--font-averta_semibold); background: unset; border: 2px solid #000; color: #121212; -webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-flow: column; flex-flow: column; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; } span.dribbble_title { height: 0.9em; } span.dribbble_spec { font-size: 10px; height: 20px; letter-spacing: 1.5px; text-transform: uppercase; font-family: var(--font-averta_extrabold); opacity: 0.3; } a.dribbble::before { content: ""; background: url('_img/logo_dribbble.svg'); background-repeat: no-repeat; background-size: contain; background-position: center; width: 2em; height: 2em; position: absolute; left: 1.65em; -webkit-transition: -webkit-transform 1s var(--customEase); transition: -webkit-transform 1s var(--customEase); -o-transition: transform 1s var(--customEase); transition: transform 1s var(--customEase); transition: transform 1s var(--customEase), -webkit-transform 1s var(--customEase); } a.dribbble:hover::before { -webkit-transform: scale(1.25) rotate(-5deg); -ms-transform: scale(1.25) rotate(-5deg); transform: scale(1.25) rotate(-5deg); } a.dribbble:hover, a.dribbble:focus { background: #121212; color: #fff; } .logo_social.dribbble { background: url('_img/logo_dribbble.svg'); background-repeat: no-repeat; background-size: 2em; background-position: center; width: 3em; height: 3em; } /* Dribble shots on website */ .container-services.dribbble .col_left { width: 60%; } .container-services.dribbble { /* background: #fff; */ /* background: linear-gradient(180deg, var(--brand-color-gray), transparent); */ background: unset; margin-top: 6em; } .dribbble_portfolio_container { width: 100%; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; -webkit-box-pack: justify; -ms-flex-pack: justify; justify-content: space-between; -webkit-box-orient: horizontal; -webkit-box-direction: normal; -ms-flex-flow: row; flex-flow: row; -ms-flex-wrap: wrap; flex-wrap: wrap; gap: 2%; row-gap: 2em; } a.dribbble_shot video { width: 100%; height: 100%; } a.dribbble_shot { border-radius: 1em; overflow: hidden; width: 48%; display: -webkit-box; display: -ms-flexbox; display: flex; height: auto; background: var(--brand-color-gray); } a.dribbble_shot:before { content: ""; background: url('_img/dribbble-ball-mark.svg'); background-repeat: no-repeat; background-size: 1em; background-position: center; width: 1.5em; height: 1.5em; position: absolute; top: 0.5em; right: 0.5em; opacity: 0; /* filter: drop-shadow(0em 0.25em 0.25em rgba(1, 1, 1, 0.25)); */ } a.dribbble_shot:after { content: ""; background: url('_img/heart-regular.svg'); background-repeat: no-repeat; background-size: 1.1em; background-position: center; width: 1.5em; height: 1.5em; position: absolute; top: 0.5em; right: 2em; opacity: 0; /* filter: drop-shadow(0em 0.25em 0.25em rgba(1, 1, 1, 0.25)); */ } a.dribbble_shot:hover:before, a.dribbble_shot:hover:after { opacity: 1; } a.dribbble_shot { -webkit-box-shadow: 0.1px 1.1px 2.2px rgba(0, 0, 0, 0), 0.1px 2.7px 5.3px rgba(0, 0, 0, 0), 0.3px 5px 10px rgba(0, 0, 0, 0), 0.4px 8.9px 17.9px rgba(0, 0, 0, 0), 0.8px 16.7px 33.4px rgba(0, 0, 0, 0), 2px 40px 80px rgba(0, 0, 0, 0); box-shadow: 0.1px 1.1px 2.2px rgba(0, 0, 0, 0), 0.1px 2.7px 5.3px rgba(0, 0, 0, 0), 0.3px 5px 10px rgba(0, 0, 0, 0), 0.4px 8.9px 17.9px rgba(0, 0, 0, 0), 0.8px 16.7px 33.4px rgba(0, 0, 0, 0), 2px 40px 80px rgba(0, 0, 0, 0); } a.dribbble_shot { will-change: auto; -webkit-transform: scale(1); -ms-transform: scale(1); transform: scale(1); -webkit-transition: -webkit-transform 1s var(--customEase), -webkit-box-shadow 1s var(--customEase); transition: -webkit-transform 1s var(--customEase), -webkit-box-shadow 1s var(--customEase); -o-transition: transform 1s var(--customEase), box-shadow 1s var(--customEase); transition: transform 1s var(--customEase), box-shadow 1s var(--customEase); transition: transform 1s var(--customEase), box-shadow 1s var(--customEase), -webkit-transform 1s var(--customEase), -webkit-box-shadow 1s var(--customEase); } a.dribbble_shot:hover { -webkit-box-shadow: 0px 5.5px 2.2px rgba(0, 0, 0, 0.028), 0px 13.3px 5.3px rgba(0, 0, 0, 0.04), 0px 25px 10px rgba(0, 0, 0, 0.05), 0px 44.7px 17.9px rgba(0, 0, 0, 0.06), 0px 83.6px 33.4px rgba(0, 0, 0, 0.072), 0px 200px 80px rgba(0, 0, 0, 0.1); box-shadow: 0px 5.5px 2.2px rgba(0, 0, 0, 0.028), 0px 13.3px 5.3px rgba(0, 0, 0, 0.04), 0px 25px 10px rgba(0, 0, 0, 0.05), 0px 44.7px 17.9px rgba(0, 0, 0, 0.06), 0px 83.6px 33.4px rgba(0, 0, 0, 0.072), 0px 200px 80px rgba(0, 0, 0, 0.1); -webkit-transform: scale(1.05); -ms-transform: scale(1.05); transform: scale(1.05); } /* ABOUT PAGE */ .lottiefixer_link, .linkedin_link { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; -webkit-box-pack: start; -ms-flex-pack: start; justify-content: flex-start; } .container-about a.linkedin_connect { position: relative; bottom: unset; margin-top: 2em; } .icn_link_about { margin-right: 0.5em; background-image: url('_img/link-solid.svg'); background-repeat: no-repeat; background-position: center; background-size: contain; height: calc(var(--font-size-p)); width: calc(var(--font-size-p)); } .icn_mandalorian { /* margin-left: 0.5em; */ display: inline-block; vertical-align: middle; background-image: url('_img/icn_EmojiBlitzTheMandalorian1.webp'); background-repeat: no-repeat; background-position: center; background-size: contain; height: calc(var(--font-size-p)); width: calc(var(--font-size-p)); } .lottiefixer_link, .linkedin_link { will-change: auto; /* opacity: 0.5; */ white-space: nowrap; transition: opacity 1s var(--customEase); -webkit-transition: opacity 1s var(--customEase); -moz-transition: opacity 1s var(--customEase); -o-transition: opacity 1s var(--customEase); } .lottiefixer_link:hover span.website, .linkedin_link:hover span.website { background: -o-radial-gradient(center center, circle, #FF00B8 0%, #5200FF 20%, #567eef 33%, #00c3ff 50%, #567eef 61%, #5200FF 77%, #FF00B8 100%); background: radial-gradient(circle at center center, #FF00B8 0%, #5200FF 20%, #567eef 33%, #00c3ff 50%, #567eef 61%, #5200FF 77%, #FF00B8 100%); background-clip: text; color: transparent; -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-size: 2500% 2500%; word-break: break-word; white-space: nowrap; -webkit-animation: gradientAnimation var(--grad-text-speed) linear infinite; animation: gradientAnimation var(--grad-text-speed) linear infinite; -o-animation: gradientAnimation var(--grad-text-speed) linear infinite; } :root { --portfolio-about-row-height_1: 35vw; /* --portfolio-about-row-height_2: 35vw; --portfolio-about-row-height_3: 30vw; */ } .portfolio.about .row_1 { height: var(--portfolio-about-row-height_1); } .portfolio.about .row_2 { /* height: var(--portfolio-about-row-height_2); */ height: -webkit-fit-content; height: -moz-fit-content; height: fit-content; -webkit-box-align: center; -ms-flex-align: center; align-items: center; } .portfolio.about .row_3 { /* height: var(--portfolio-about-row-height_3); */ height: -webkit-fit-content; height: -moz-fit-content; height: fit-content; } .container-about a { bottom: 2em; position: absolute; } .container-about .item p span { font-family: var(--font-averta_bold); } .container-about.side_left p { max-width: 88%; } .container-about.tools { -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; } #lottie_Devices { position: relative; width: 200%; -webkit-transform: translateX(-25%); -ms-transform: translateX(-25%); transform: translateX(-25%); } .devices_shadow { height: 10%; width: 50%; position: absolute; bottom: 3%; background-image: -o-radial-gradient(ellipse farthest-side, rgba(10, 10, 50, 0.1) 0%, rgb(245, 250, 255) 50%, rgba(255, 255, 255, 0) 100%); background-image: radial-gradient(ellipse farthest-side, rgba(10, 10, 50, 0.1) 0%, rgb(245, 250, 255) 50%, rgba(255, 255, 255, 0) 100%); -webkit-transform: translateX(50%); -ms-transform: translateX(50%); transform: translateX(50%); -webkit-filter: blur(5px); filter: blur(5px); } .container-about.transparent.side_left { background: unset; padding: unset; width: calc(50% - (var(--portfolio-row-gap) /2) + var(--card-padding-inline) *2); height: 100%; } .container-about.transparent.side_right { background: unset; padding-inline: var(--card-padding-inline); } .no_padding { padding: unset !important; } .container-about.justify_center { -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; } .lottie_container_block { width: 100%; height: auto; } .container-about .section-more { /* margin: unset; -webkit-box-align: start; -ms-flex-align: start; align-items: flex-start; */ /* position: absolute; bottom: var(--card-padding-inline); */ pointer-events: none; all: unset; margin: unset; -webkit-box-align: start; -ms-flex-align: start; display: -webkit-box; display: -ms-flexbox; display: flex; align-items: flex-start; width: unset; -webkit-box-orient: horizontal; -webkit-box-direction: normal; -ms-flex-flow: row; flex-flow: row; -webkit-box-align: baseline; -ms-flex-align: baseline; align-items: baseline; gap: 2em; } #lottie_Tools_particle_trail { position: absolute; bottom: -3vw; z-index: -1; } /* #lottie_Tools_shadow { position: absolute; width: 200%; height: 200%; transform: translate(-25%, -25%); top: 0; z-index: -1; background-image: radial-gradient(ellipse farthest-side at center center, rgba(235, 243, 245, 0.4) 0%, rgba(255, 255, 255, 0) 100%) } */ /* .tools_shaodow { position: absolute; width: 200%; height: 200%; top: -50%; left: -50%; z-index: -1; } */ .grain_container { width: 100%; height: 100%; position: absolute; overflow: hidden; z-index: 999; pointer-events: none; } .texture_grain { pointer-events: none; background: url('_img/grain.png'); opacity: 0.03; inset: -200%; width: 300%; height: 300%; position: absolute; /* -webkit-animation: grain_animation 5s infinite steps(12); animation: grain_animation 5s infinite steps(12); */ } @-webkit-keyframes grain_animation { 0% { -webkit-transform: translate(0, 0); transform: translate(0, 0) } 10% { -webkit-transform: translate(-5%, -5%); transform: translate(-5%, -5%) } 20% { -webkit-transform: translate(-10%, 5%); transform: translate(-10%, 5%) } 30% { -webkit-transform: translate(5%, -10%); transform: translate(5%, -10%) } 40% { -webkit-transform: translate(-5%, 15%); transform: translate(-5%, 15%) } 50% { -webkit-transform: translate(-10%, 5%); transform: translate(-10%, 5%) } 60% { -webkit-transform: translate(15%, 0); transform: translate(15%, 0) } 70% { -webkit-transform: translate(0, 10%); transform: translate(0, 10%) } 80% { -webkit-transform: translate(-15%, 0); transform: translate(-15%, 0) } 90% { -webkit-transform: translate(10%, 5%); transform: translate(10%, 5%) } 100% { -webkit-transform: translate(5%, 0); transform: translate(5%, 0) } } @keyframes grain_animation { 0% { -webkit-transform: translate(0, 0); transform: translate(0, 0) } 10% { -webkit-transform: translate(-5%, -5%); transform: translate(-5%, -5%) } 20% { -webkit-transform: translate(-10%, 5%); transform: translate(-10%, 5%) } 30% { -webkit-transform: translate(5%, -10%); transform: translate(5%, -10%) } 40% { -webkit-transform: translate(-5%, 15%); transform: translate(-5%, 15%) } 50% { -webkit-transform: translate(-10%, 5%); transform: translate(-10%, 5%) } 60% { -webkit-transform: translate(15%, 0); transform: translate(15%, 0) } 70% { -webkit-transform: translate(0, 10%); transform: translate(0, 10%) } 80% { -webkit-transform: translate(-15%, 0); transform: translate(-15%, 0) } 90% { -webkit-transform: translate(10%, 5%); transform: translate(10%, 5%) } 100% { -webkit-transform: translate(5%, 0); transform: translate(5%, 0) } } /* IFRAME TESTING */ #projects_home { pointer-events: all; -ms-scroll-chaining: none; overscroll-behavior: none; width: 100%; height: auto; position: absolute; z-index: 1; background: #fff; /* overflow: hidden; */ border-radius: 2em; -webkit-transform: translateY(var(--iframe-peek-position)) scaleX(var(--iframe-peek-scale)); -ms-transform: translateY(var(--iframe-peek-position)) scaleX(var(--iframe-peek-scale)); transform: translateY(var(--iframe-peek-position)) scaleX(var(--iframe-peek-scale)); /* transform: translateY(var(--iframe-offscreen)) scaleX(var(--iframe-peek-scale)); */ -webkit-transition: opacity 1s var(--customEase), -webkit-transform 1s var(--customEase); transition: opacity 1s var(--customEase), -webkit-transform 1s var(--customEase); -o-transition: transform 1s var(--customEase), opacity 1s var(--customEase); transition: transform 1s var(--customEase), opacity 1s var(--customEase); transition: transform 1s var(--customEase), opacity 1s var(--customEase), -webkit-transform 1s var(--customEase); } #projects_home #transition_iframe { background: #fff; } /* iframe#projects_home.loaded { animation: 3s forwards undefined-easeOutElastic; transform: translateY(var(--iframe-peek-position)) scaleX(var(--iframe-peek-scale)); } */ /* iframe#projects_home.reloaded { -webkit-transition: opacity 1s var(--customEase), -webkit-transform 1s var(--customEase); transition: opacity 1s var(--customEase), -webkit-transform 1s var(--customEase); -o-transition: transform 1s var(--customEase), opacity 1s var(--customEase); transition: transform 1s var(--customEase), opacity 1s var(--customEase); transition: transform 1s var(--customEase), opacity 1s var(--customEase), -webkit-transform 1s var(--customEase); transform: translateY(var(--iframe-peek-position)) scaleX(var(--iframe-peek-scale)); } */ #bounce_peek { top: 100%; z-index: 1; -ms-scroll-chaining: none; overscroll-behavior: none; width: 100%; height: 100svh; position: absolute; /* background: rgba(255, 0, 0, 0.5); */ -webkit-transform: translateY(3svh); -ms-transform: translateY(3svh); transform: translateY(3svh); pointer-events: none; /* overflow: hidden; */ overflow: visible; } #bounce_peek.loaded { -webkit-animation: 2.5s forwards bounce_peek-easeOutElastic; animation: 2.5s forwards bounce_peek-easeOutElastic; } #bounce_peek.scrollable { pointer-events: all; overflow: scroll; } :root { --iframe-offscreen: 100svh; --iframe-peek-position: 97svh; --iframe-peek-scale: 0.94; } @-webkit-keyframes bounce_peek-easeOutElastic { 0% { -webkit-transform: translateY(-97svh); transform: translateY(-97svh); } 16% { -webkit-transform: translateY(-100.73%); transform: translateY(-100.73%); } 28% { -webkit-transform: translateY(-99.48%); transform: translateY(-99.48%); } 44% { -webkit-transform: translateY(-100.23%); transform: translateY(-100.23%); } 59% { -webkit-transform: translateY(-99.86%); transform: translateY(-99.86%); } 73% { -webkit-transform: translateY(-100.12%); transform: translateY(-100.12%); } 88% { -webkit-transform: translateY(-99.9%); transform: translateY(-99.9%); } 100% { -webkit-transform: translateY(-100%); transform: translateY(-100%); } } @keyframes bounce_peek-easeOutElastic { 0% { -webkit-transform: translateY(-97svh); transform: translateY(-97svh); } 16% { -webkit-transform: translateY(-100.73%); transform: translateY(-100.73%); } 28% { -webkit-transform: translateY(-99.48%); transform: translateY(-99.48%); } 44% { -webkit-transform: translateY(-100.23%); transform: translateY(-100.23%); } 59% { -webkit-transform: translateY(-99.86%); transform: translateY(-99.86%); } 73% { -webkit-transform: translateY(-100.12%); transform: translateY(-100.12%); } 88% { -webkit-transform: translateY(-99.9%); transform: translateY(-99.9%); } 100% { -webkit-transform: translateY(-100%); transform: translateY(-100%); } } #projects_home.autoScroll { -webkit-transition: opacity 1s var(--customEase), -webkit-transform 1s var(--customEase); transition: opacity 1s var(--customEase), -webkit-transform 1s var(--customEase); -o-transition: transform 1s var(--customEase), opacity 1s var(--customEase); transition: transform 1s var(--customEase), opacity 1s var(--customEase); transition: transform 1s var(--customEase), opacity 1s var(--customEase), -webkit-transform 1s var(--customEase); border-radius: 0; -webkit-transform: translateY(0) scaleX(1); -ms-transform: translateY(0) scaleX(1); transform: translateY(0) scaleX(1); /* overflow: hidden; */ } /* body.home-portfolio-open #nav-top { display: none; } */ /* body.iframe #lottie_logo_left-stacked { display: none; } body.iframe #nav-top { display: none; } body.iframe #lottie_logo_left-stacked { display: none; } body.iframe .transition_splash_container { display: none; } */ /* Need to have this for both for portfolio scroll transition */ body.home, body.home-portfolio-open { overflow: hidden; position: fixed; top: 0; left: 0; width: 100%; height: 100%; } /* body.menu-open iframe#projects_home { pointer-events: none; } */ #scroll_hero { width: 100%; height: 100vh; position: absolute; z-index: 999999; /* background: red; */ pointer-events: none; -ms-scroll-chaining: none; overscroll-behavior: none; /* To hide scroll bar */ right: -17px; } #scroll_hero.scrollable { pointer-events: all; overflow: scroll; } #scroll_hero #scroller { width: 100%; height: 110%; -ms-scroll-chaining: none; overscroll-behavior: none; } body.home-portfolio-open #scroll_hero { display: none; } #hero-fader { width: 100%; height: 100%; position: absolute; z-index: 1; pointer-events: none; background: #000; opacity: 0; -webkit-transition: opacity 1s var(--customEase); -o-transition: opacity 1s var(--customEase); transition: opacity 1s var(--customEase); } body.home-portfolio-open #hero-fader { opacity: 1; } /* Lazy Loading Videos */ .artwork video { opacity: 0; transition: opacity 1s var(--customEase); -webkit-transition: opacity 1s var(--customEase); -moz-transition: opacity 1s var(--customEase); -o-transition: opacity 1s var(--customEase); } .artwork video.loaded { opacity: 1; } /* Services page updates */ .buttons_dual { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-orient: horizontal; -webkit-box-direction: normal; -ms-flex-flow: row; flex-flow: row; /* column-gap: 2em; */ -webkit-box-align: center; -ms-flex-align: center; align-items: center; -webkit-box-pack: space-evenly; -ms-flex-pack: space-evenly; justify-content: space-evenly; margin-block: 2em; gap: 2em; } .buttons_dual .col_left, .buttons_dual .col_right, .section_split .col_left { all: unset; width: 50%; } .section_split .col_left { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; } .buttons_dual button.clientlist-link.outline, .container-services.reward .buttons_dual .btn_cta { margin: unset; margin-block: unset; width: 100%; -webkit-box-align: center; -ms-flex-align: center; align-items: center; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; position: relative; } .container-services.reward .buttons_dual .btn_cta a { font-size: var(--font-size-p); border: 2px solid #121212; width: 100%; text-align: center; } .container-services.reward .buttons_dual .btn_cta:hover a { background: #121212; color: #fff; transition: 1s transform var(--customEase), 1s -webkit-transform var(--customEase); -webkit-transform: scale(1.05); -ms-transform: scale(1.05); transform: scale(1.05); } .section_split { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-orient: horizontal; -webkit-box-direction: normal; -ms-flex-flow: row; flex-flow: row; -webkit-box-align: center; -ms-flex-align: center; align-items: center; gap: 2em; } .section_split .col_right p { border: 2px dashed rgba(1, 1, 1, 0.05); padding: 1em; border-radius: 1em; font-size: var(--font-size-list); line-height: var(--line-height-list); } /* Scroll Services Updates */ #scroll_observer_Tags.container-services { padding: unset; } #scroll_observer_Tags.container-services .item { overflow: hidden; position: relative; padding-inline: var(--card-padding-inline); } .expand-list_container { border-radius: 6em; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; bottom: 2em; right: 2em; position: absolute; z-index: 1; -webkit-box-shadow: 0px 5.5px 2.2px rgba(0, 0, 0, 0.028), 0px 13.3px 5.3px rgba(0, 0, 0, 0.04), 0px 25px 10px rgba(0, 0, 0, 0.05), 0px 44.7px 17.9px rgba(0, 0, 0, 0.06), 0px 83.6px 33.4px rgba(0, 0, 0, 0.072), 0px 200px 80px rgba(0, 0, 0, 0.1); box-shadow: 0px 5.5px 2.2px rgba(0, 0, 0, 0.028), 0px 13.3px 5.3px rgba(0, 0, 0, 0.04), 0px 25px 10px rgba(0, 0, 0, 0.05), 0px 44.7px 17.9px rgba(0, 0, 0, 0.06), 0px 83.6px 33.4px rgba(0, 0, 0, 0.072), 0px 200px 80px rgba(0, 0, 0, 0.1); } button.expand-list { will-change: auto; pointer-events: all; cursor: pointer; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; background: #fff; border: 2px solid #121212; border-radius: 6em; /* padding-inline: 0.5em; padding-block: 0.5em; */ font-family: var(--font-averta_semibold); font-size: var(--font-size-p); width: 2.5em; height: 2.5em; -webkit-transition: 0.5s width var(--customEase), 1s -webkit-transform var(--customEase); transition: 0.5s width var(--customEase), 1s -webkit-transform var(--customEase); -o-transition: 1s transform var(--customEase), 0.5s width var(--customEase); transition: 1s transform var(--customEase), 0.5s width var(--customEase); transition: 1s transform var(--customEase), 0.5s width var(--customEase), 1s -webkit-transform var(--customEase); } .text_label { will-change: auto; -webkit-font-smoothing: antialiased; -webkit-margin-after: unset; margin-block-end: unset; -webkit-margin-before: unset; margin-block-start: unset; white-space: nowrap; display: none; } .container-services .text_label span { font-family: var(--font-averta_semibold); } button.expand-list:hover .text_label { will-change: auto; display: block; } button.expand-list:hover { width: 8em; background: #121212; color: #fff; -webkit-transform: scale(1.05); -ms-transform: scale(1.05); transform: scale(1.05); } button.expand-list .icn_list { overflow: hidden; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; /* padding: 0.5em; */ background-repeat: no-repeat; background-size: 1em; background-image: url('_img/list-solid.svg'); background-position: center; -webkit-filter: unset; filter: unset; border: unset; width: 1em; height: 1em; opacity: 1; padding-inline: unset; /* margin-right: 0.5em; */ } button.expand-list:hover .icn_list { -webkit-filter: invert(1); filter: invert(1); margin-right: 0.5em; } .container-services .scroll-text li { border: 2px solid #121212; background: unset; padding: unset; height: 4em; -webkit-box-sizing: border-box; box-sizing: border-box; } .container-services .scroll-text li p { will-change: auto; -webkit-transform: translateZ(0); transform: translateZ(0); text-transform: uppercase; -webkit-margin-after: unset; margin-block-end: unset; -webkit-margin-before: unset; margin-block-start: unset; background: -o-radial-gradient(center center, circle, #FF00B8 0%, #5200FF 20%, #567eef 33%, #00c3ff 50%, #567eef 61%, #5200FF 77%, #FF00B8 100%); background: radial-gradient(circle at center center, #FF00B8 0%, #5200FF 20%, #567eef 33%, #00c3ff 50%, #567eef 61%, #5200FF 77%, #FF00B8 100%); background-clip: text; color: transparent; -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-size: 2500% 2500%; -webkit-animation: gradientAnimation var(--grad-text-speed) linear infinite; animation: gradientAnimation var(--grad-text-speed) linear infinite; -o-animation: gradientAnimation var(--grad-text-speed) linear infinite; word-break: break-word; white-space: nowrap; -webkit-animation-play-state: paused; animation-play-state: paused; } .container-services .scroll-text li.visible p { -webkit-animation-play-state: running; animation-play-state: running; } .container-services .scroll-text li::before { content: ''; width: 100%; height: 4em; position: absolute; z-index: -1; border-radius: 1em; background: -o-repeating-linear-gradient(45deg, rgba(255, 255, 255, 1), rgba(255, 255, 255, 1) 26px, var(--brand-color-gray) 26px, var(--brand-color-gray) 30px); background: repeating-linear-gradient(45deg, rgba(255, 255, 255, 1), rgba(255, 255, 255, 1) 26px, var(--brand-color-gray) 26px, var(--brand-color-gray) 30px); /* will-change: auto; border-radius: 2em; position: absolute; left: calc(var(--nav-btn-line-thickness)*-2); top: calc(var(--nav-btn-line-thickness)*-2); background: var(--nav-btn-gradient-o-); background: var(--nav-btn-gradient); background-size: var(--nav-btn-grad-size); width: calc(100% + var(--nav-btn-line-thickness)*4); height: calc(100% + var(--nav-btn-line-thickness)*4); z-index: -1; animation: var(--nav-btn-animation); -webkit-animation: var(--nav-btn-animation); -moz-animation: var(--nav-btn-animation); -o-animation: var(--nav-btn-animation); animation-play-state: running; -webkit-animation-play-state: running; */ } .scroll-box.expanded .scroll-text li p { all: unset; } button.expand-list.reset .text_label { display: none; } button.expand-list.reset { width: 2.5em; } button.expand-list.reset .icn_list { margin-right: 0.15em; background-image: url('_img/angle-left-solid.svg'); background-size: contain; } .scroll-box.expanded #scroll-text_tracker { -webkit-transform: unset !important; -ms-transform: unset !important; transform: unset !important; -webkit-box-align: start; -ms-flex-align: start; align-items: flex-start; -webkit-box-pack: start; -ms-flex-pack: start; justify-content: flex-start; height: 100%; gap: unset; } .scroll-box.expanded .scroll-text { -webkit-animation-play-state: paused; animation-play-state: paused; -webkit-animation: unset; animation: unset; } .scroll-box.expanded .list_repeat { display: none; } .scroll-box.expanded .list_static li::before { all: unset; } .scroll-box.expanded .list_static li { all: unset; display: block; border-top: 1px solid rgba(1, 1, 1, 0.1); padding-block: 0.15em; padding-inline: 0.25em; } .scroll-box.expanded .list_static li p { font-family: var(--font-averta_semibold); font-size: var(--font-size-tags); /* line-height: var(--line-height-list); background: #fff; padding: 0.5em 2em; border-radius: 2em; */ } .scroll-box.expanded .list_static { height: 100%; display: inline-block; white-space: normal; -webkit-columns: 2; -moz-columns: 2; columns: 2; text-align: left; opacity: 0; -webkit-transform: translateY(10%); -ms-transform: translateY(10%); transform: translateY(10%); } .scroll-box.expanded .list_header { opacity: 0; -webkit-transform: translateY(30%); -ms-transform: translateY(30%); transform: translateY(30%); } .scroll-box.expanded .list_static.activated, .scroll-box.expanded .list_header.activated { -webkit-transition: 1.5s opacity var(--customEase), 2.5s -webkit-transform var(--customEase); transition: 1.5s opacity var(--customEase), 2.5s -webkit-transform var(--customEase); -o-transition: 2.5s transform var(--customEase), 1.5s opacity var(--customEase); transition: 2.5s transform var(--customEase), 1.5s opacity var(--customEase); transition: 2.5s transform var(--customEase), 1.5s opacity var(--customEase), 2.5s -webkit-transform var(--customEase); opacity: 1; -webkit-transform: translateY(0); -ms-transform: translateY(0); transform: translateY(0); } .scroll-box.expanded .list_static.activated li p { -webkit-animation-play-state: paused; animation-play-state: paused; } h2.list_header { display: none; -webkit-animation-play-state: paused; animation-play-state: paused; } .scroll-box.expanded h2.list_header { display: block; white-space: normal; text-align: left; } .scroll-box h2.list_header span { -webkit-animation-play-state: paused; animation-play-state: paused; } .scroll-box.expanded h2.list_header span { -webkit-animation-play-state: running; animation-play-state: running; } .list_static li.last-item { display: none; } .last-item a { text-decoration: underline; } .scroll-box.expanded .list_static li.last-item { display: block; } /* About page work area */ .container-work { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: start; -ms-flex-align: start; align-items: flex-start; -webkit-box-pack: justify; -ms-flex-pack: justify; justify-content: space-between; /* background: #121212; color: #fff; */ background: #fff; background: var(--brand-color-gray); border-radius: 2em; overflow: hidden; /* -webkit-column-gap: 2em; -moz-column-gap: 2em; column-gap: 2em; */ row-gap: 8em; /* padding: var(--card-padding-inline); */ margin-inline: var(--card-padding-inline); margin-top: 6em; height: auto; position: relative; } #projects_home .container-work { margin-inline: unset; } .container-work .col_right { all: unset; max-width: unset; padding: var(--card-padding-inline); padding-top: unset; width: 100%; height: auto; } .container-work .col_right h2 span.gradient-text_1 { font-family: var(--font-averta_extrabold); } .container-work .col_left { all: unset; display: -webkit-box; display: -ms-flexbox; display: flex; } .container-work video { width: 100%; height: 100%; padding: unset; margin: unset; } .btn_row { /* position: relative; */ display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; -webkit-box-pack: start; -ms-flex-pack: start; justify-content: flex-start; gap: 2em; } .btn_text { white-space: nowrap; } .container-work .btn_cta { margin-block: unset; margin-top: 8%; will-change: auto; } .container-work .btn_cta a { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; gap: 0.5em; } .container-work .btn_cta a::before { content: ""; background-image: url('_img/btn_play.svg'); background-repeat: no-repeat; width: calc(var(--font-size-p)*1.25); height: calc(var(--font-size-p)*1.25); background-size: contain; } .container-work .btn_cta:hover a::before { -webkit-filter: invert(1); filter: invert(1); } .container-work .btn_cta:hover a { background: unset; } .container-work, #projects_home .portfolio.services, #projects_home .portfolio.about { -webkit-box-shadow: 0px 5.5px 2.2px rgba(0, 0, 0, 0.028), 0px 13.3px 5.3px rgba(0, 0, 0, 0.04), 0px 25px 10px rgba(0, 0, 0, 0.05), 0px 44.7px 17.9px rgba(0, 0, 0, 0.06), 0px 70px 33.4px rgba(0, 0, 0, 0.065), 0px 80px 80px rgba(0, 0, 0, 0.08); box-shadow: 0px 5.5px 2.2px rgba(0, 0, 0, 0.028), 0px 13.3px 5.3px rgba(0, 0, 0, 0.04), 0px 25px 10px rgba(0, 0, 0, 0.05), 0px 44.7px 17.9px rgba(0, 0, 0, 0.06), 0px 70px 33.4px rgba(0, 0, 0, 0.065), 0px 80px 80px rgba(0, 0, 0, 0.08); } .iOS-tagged #iOS_notif { display: none; }