/* * Prefixed by https://a21cbcaf-129b-462f-bcda-675a349e93ec.p.bardy.io * PostCSS: v8.4.14, * Autoprefixer: v10.4.7 * Browsers: last 4 version */ /* .navbar-wrapper .nav-link.only-mobile.w-nav-link.w--nav-link-open, */ .w-nav-overlay .nav-link.w-nav-link.w--nav-link-open { max-width: 100% !important; width: 100% !important; } p { margin: 0; } .banner-animation-wrapper { max-width: 25rem; /* 450px; */ min-width: 18.75rem; /* 300px; */ width: 100%; /* margin:3rem; */ /*transform-origin: 50% 0; transform: scale(0.8); margin-bottom: -20%;*/ } .banner-animation-header { width: 100%; display: -ms-grid; display: grid; -ms-grid-columns: 1fr 1fr 1fr 1fr 1fr; grid-template-columns: 1fr 1fr 1fr 1fr 1fr; margin-bottom: 1rem; } .banner-animation-header .logo-square { aspect-ratio: 1 / 1; height: 100%; background: white; 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; border-radius: 0.625rem; /* 10px; */ position: relative; -webkit-transform-style: preserve-3d; transform-style: preserve-3d; -webkit-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0); z-index: 3; } .banner-animation-header .header-content-wrapper { -ms-grid-column: 2; grid-column-start: 2; -ms-grid-column-span: 4; grid-column-end: 6; padding-left: 0.75rem; width: 100%; height: 100%; } .banner-animation-header .header-content { -webkit-box-sizing: border-box; box-sizing: border-box; border: none; position: relative; background: #1F252A; color: #fff; padding: 1rem 1rem; width: 100%; height: 100%; border-radius: 0.625rem; /* 10px; */ /* overflow: hidden; */ } .banner-animation-header .header-content .header-text { position: relative; min-height: 1.2em; width: 100%; } .banner-animation-header .header-content .header-text>span { position: absolute; top: 0; left: 0; width: 100%; font-size: 1rem; font-weight: 300; /* 16px; */ line-height: 1.2; opacity: 0; } .banner-animation-body { /* padding-top: 0.5rem; */ width: 100%; aspect-ratio: 1 / 1; /* height: 100%; */ display: -ms-grid; display: grid; -ms-grid-columns: 1fr 1fr 1fr 1fr 1fr; grid-template-columns: 1fr 1fr 1fr 1fr 1fr; -ms-grid-rows: 1fr 1fr 1fr 1fr 1fr; grid-template-rows: 1fr 1fr 1fr 1fr 1fr; position: relative; -webkit-transform-style: preserve-3d; transform-style: preserve-3d; -webkit-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0); } .banner-animation-body>*:nth-child(1) { -ms-grid-row: 1; -ms-grid-column: 1; } .banner-animation-body>*:nth-child(2) { -ms-grid-row: 1; -ms-grid-column: 2; } .banner-animation-body>*:nth-child(3) { -ms-grid-row: 1; -ms-grid-column: 3; } .banner-animation-body>*:nth-child(4) { -ms-grid-row: 1; -ms-grid-column: 4; } .banner-animation-body>*:nth-child(5) { -ms-grid-row: 1; -ms-grid-column: 5; } .banner-animation-body>*:nth-child(6) { -ms-grid-row: 2; -ms-grid-column: 1; } .banner-animation-body>*:nth-child(7) { -ms-grid-row: 2; -ms-grid-column: 2; } .banner-animation-body>*:nth-child(8) { -ms-grid-row: 2; -ms-grid-column: 3; } .banner-animation-body>*:nth-child(9) { -ms-grid-row: 2; -ms-grid-column: 4; } .banner-animation-body>*:nth-child(10) { -ms-grid-row: 2; -ms-grid-column: 5; } .banner-animation-body>*:nth-child(11) { -ms-grid-row: 3; -ms-grid-column: 1; i } .banner-animation-body>*:nth-child(12) { -ms-grid-row: 3; -ms-grid-column: 2; } .banner-animation-body>*:nth-child(13) { -ms-grid-row: 3; -ms-grid-column: 3; } .banner-animation-body>*:nth-child(14) { -ms-grid-row: 3; -ms-grid-column: 4; } .banner-animation-body>*:nth-child(15) { -ms-grid-row: 3; -ms-grid-column: 5; } .banner-animation-body>*:nth-child(16) { -ms-grid-row: 4; -ms-grid-column: 1; } .banner-animation-body>*:nth-child(17) { -ms-grid-row: 4; -ms-grid-column: 2; } .banner-animation-body>*:nth-child(18) { -ms-grid-row: 4; -ms-grid-column: 3; } .banner-animation-body>*:nth-child(19) { -ms-grid-row: 4; -ms-grid-column: 4; } .banner-animation-body>*:nth-child(20) { -ms-grid-row: 4; -ms-grid-column: 5; } .banner-animation-body>*:nth-child(21) { -ms-grid-row: 5; -ms-grid-column: 1; } .banner-animation-body>*:nth-child(22) { -ms-grid-row: 5; -ms-grid-column: 2; } .banner-animation-body>*:nth-child(23) { -ms-grid-row: 5; -ms-grid-column: 3; } .banner-animation-body>*:nth-child(24) { -ms-grid-row: 5; -ms-grid-column: 4; } .banner-animation-body>*:nth-child(25) { -ms-grid-row: 5; -ms-grid-column: 5; } /* ANIMATION ai GRID */ .banner-animation-body .banner-animation-ai-grid { width: 100%; height: 100%; position: absolute; -webkit-transform-style: preserve-3d; transform-style: preserve-3d; -webkit-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0); z-index: 0; -webkit-filter: url(#round); filter: url(#round); /* filter: url(#round-optimize); */ /* filter: url(#goo-test); */ will-change: transform, filter; pointer-events: none; } .banner-animation-body .banner-animation-ai-grid .banner-animation-ai-grid-svg { width: 100%; height: 100%; position: absolute; -webkit-transform-style: preserve-3d; transform-style: preserve-3d; -webkit-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0); z-index: 0; /* filter: url(#round); */ /* filter: url(#round-optimize); */ /* filter: url(#goo-test); */ will-change: transform, filter; } .banner-animation-body .banner-animation-ai-logo-grid { width: 100%; height: 100%; position: absolute; z-index: 1; -webkit-transform-style: preserve-3d; transform-style: preserve-3d; -webkit-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0); will-change: transform, filter; pointer-events: none; } .banner-animation-body .banner-animation-ai-grid .ai-grid-element { /* width: 100%; */ position: absolute; -webkit-transform-style: preserve-3d; transform-style: preserve-3d; -webkit-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0); will-change: opacity, transform, filter; } .banner-animation-body .banner-animation-ai-logo-grid .ai-grid-logo-element { /* width: 100%; */ position: absolute; padding: 1.5%; -webkit-transform-style: preserve-3d; transform-style: preserve-3d; -webkit-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0); will-change: transform, filter; } .banner-animation-body .banner-animation-ai-logo-grid .ai-grid-logo-element svg { -webkit-transform-origin: center; -ms-transform-origin: center; transform-origin: center; -webkit-transform-style: preserve-3d; transform-style: preserve-3d; -webkit-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0); will-change: transform, filter; } /* ANIMATION INPUTS */ .banner-animation-body .banner-animation-inputs { width: 100%; height: 100%; -ms-grid-column: 1; grid-column-start: 1; -ms-grid-column-span: 5; grid-column-end: 6; -ms-grid-row: 1; grid-row-start: 1; -ms-grid-row-span: 4; grid-row-end: 5; } .animation-inputs-wrapper { width: 100%; height: 100%; background: #fff; border-radius: 0.625rem; /* 10px; */ padding: 3rem 2rem; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-direction: column; flex-direction: column; -webkit-box-pack: justify; -ms-flex-pack: justify; justify-content: space-between; } .animation-input {} .animation-input-label { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-pack: justify; -ms-flex-pack: justify; justify-content: space-between; -webkit-box-align: center; -ms-flex-align: center; align-items: center; font-size: 0.75rem; /* 12px; */ color: #939393; } .animation-input-icon { width: 0.5rem; /* 8px; */ height: 0.5rem; /* 8px; */ background-color: #753FF7; border-radius: 100%; } .animation-input-field { position: relative; padding: 0.5rem 0; font-size: 1rem; } .animation-input-underline { position: absolute; bottom: 0; left: 0; height: 1px; width: 100%; background-color: #D9D9D9; } /* ANIMATION SUMMARY REPORT */ .banner-animation-body .banner-animation-summary { /* display: none; */ -ms-grid-row: 1; -ms-grid-row-span: 4; grid-row: 1 / 5; -ms-grid-column: 1; -ms-grid-column-span: 5; grid-column: 1 / 6; position: relative; z-index: 3; } .banner-animation-body .banner-animation-summary .summary-bg { position: absolute; top: 0; left: 0; width: 100%; height: 100%; background: #fff; border-radius: 0.625rem; /* 10px; */ } .banner-animation-body .banner-animation-summary .summary-approved { position: absolute; top: 50%; left: 50%; transform: translate3d(-50%, -50%, 0); width: 4rem; height: 4rem; background: #fff; border-radius: 4rem; opacity: 0; /* 10px; */ } .banner-animation-body .banner-animation-summary .summary-wrapper { position: absolute; top: 0; left: 0; width: 100%; height: 100%; border-radius: 0.625rem; /* 10px; */ /* padding:3rem 2rem; */ /* padding: clamp(1rem, -1rem + 10.6667vw, 2rem) clamp(1rem, -1rem + 10.6667vw, 2rem); */ padding: clamp(0.5rem, -0.5rem + 5.3333vw, 1rem); display: -ms-grid; display: grid; -ms-grid-columns: 1fr 1rem 1fr; grid-template-columns: 1fr 1fr; -ms-grid-rows: auto 1rem 1fr; grid-template-rows: auto 1fr; gap: 1rem; /* TEMP */ /* display: none; */ overflow: hidden; } .banner-animation-body .banner-animation-summary .summary-wrapper>*:nth-child(1) { -ms-grid-row: 1; -ms-grid-column: 1; } .banner-animation-body .banner-animation-summary .summary-wrapper>*:nth-child(2) { -ms-grid-row: 1; -ms-grid-column: 3; } .banner-animation-body .banner-animation-summary .summary-wrapper>*:nth-child(3) { -ms-grid-row: 3; -ms-grid-column: 1; } .banner-animation-body .banner-animation-summary .summary-wrapper>*:nth-child(4) { -ms-grid-row: 3; -ms-grid-column: 3; } .banner-animation-body .banner-animation-summary .summary-wrapper.summary-extra { position: absolute; top: 0; left: 0; width: 100%; height: 100%; display: -ms-grid; display: grid; -ms-grid-columns: 1fr clamp(0.25rem, -0.75rem + 5.3333vw, 0.75rem) 1fr clamp(0.25rem, -0.75rem + 5.3333vw, 0.75rem) 1fr clamp(0.25rem, -0.75rem + 5.3333vw, 0.75rem) 1fr clamp(0.25rem, -0.75rem + 5.3333vw, 0.75rem) 1fr clamp(0.25rem, -0.75rem + 5.3333vw, 0.75rem) 1fr; grid-template-columns: 1fr 1fr 1fr 1fr 1fr 1fr; -ms-grid-rows: 1fr clamp(0.25rem, -0.75rem + 5.3333vw, 0.75rem) 1.75fr; grid-template-rows: 1fr 1.75fr; padding: clamp(0.5rem, -0.5rem + 5.3333vw, 1rem); gap: clamp(0.25rem, -0.75rem + 5.3333vw, 0.75rem); overflow: hidden; } .banner-animation-body .banner-animation-summary .summary-wrapper.summary-extra>*:nth-child(1) { -ms-grid-row: 1; -ms-grid-column: 1; } .banner-animation-body .banner-animation-summary .summary-wrapper.summary-extra>*:nth-child(2) { -ms-grid-row: 1; -ms-grid-column: 3; } .banner-animation-body .banner-animation-summary .summary-wrapper.summary-extra>*:nth-child(3) { -ms-grid-row: 1; -ms-grid-column: 5; } .banner-animation-body .banner-animation-summary .summary-wrapper.summary-extra>*:nth-child(4) { -ms-grid-row: 1; -ms-grid-column: 7; } .banner-animation-body .banner-animation-summary .summary-wrapper.summary-extra>*:nth-child(5) { -ms-grid-row: 1; -ms-grid-column: 9; } .banner-animation-body .banner-animation-summary .summary-wrapper.summary-extra>*:nth-child(6) { -ms-grid-row: 1; -ms-grid-column: 11; } .banner-animation-body .banner-animation-summary .summary-wrapper.summary-extra>*:nth-child(7) { -ms-grid-row: 3; -ms-grid-column: 1; } .banner-animation-body .banner-animation-summary .summary-wrapper.summary-extra>*:nth-child(8) { -ms-grid-row: 3; -ms-grid-column: 3; } .banner-animation-body .banner-animation-summary .summary-wrapper.summary-extra>*:nth-child(9) { -ms-grid-row: 3; -ms-grid-column: 5; } .banner-animation-body .banner-animation-summary .summary-wrapper.summary-extra>*:nth-child(10) { -ms-grid-row: 3; -ms-grid-column: 7; } .banner-animation-body .banner-animation-summary .summary-wrapper.summary-extra>*:nth-child(11) { -ms-grid-row: 3; -ms-grid-column: 9; } .banner-animation-body .banner-animation-summary .summary-wrapper.summary-extra>*:nth-child(12) { -ms-grid-row: 3; -ms-grid-column: 11; } .banner-animation-body .banner-animation-summary .summary-wrapper .summary-item { height: 100%; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-direction: column; flex-direction: column; gap: 0.25rem; /* padding: clamp(0.5rem, -0.5rem + 5.3333vw, 1rem); */ padding: clamp(0.25rem, -0.75rem + 5.3333vw, 0.75rem); } .banner-animation-body .banner-animation-summary .summary-wrapper .summary-item.span-2 { -ms-grid-column-span: 2; grid-column: span 2; } .banner-animation-body .banner-animation-summary .summary-wrapper .summary-item.span-3 { -ms-grid-column-span: 3; grid-column: span 3; } .banner-animation-body .banner-animation-summary .summary-wrapper.summary-extra .summary-item { height: 100%; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-direction: column; flex-direction: column; gap: 0.25rem; background: #EFEFEF; border-radius: 0.625rem; /* 10px; */ } .banner-animation-body .banner-animation-summary .summary-wrapper .summary-item.summary-item-full { -webkit-box-pack: end; -ms-flex-pack: end; justify-content: end; } .banner-animation-body .banner-animation-summary .summary-wrapper.summary-extra .summary-item.summary-item-full { -webkit-box-pack: justify; -ms-flex-pack: justify; justify-content: space-between; } .banner-animation-body .banner-animation-summary .summary-wrapper .summary-item .summary-item-title { font-family: "Acid Grotesk-Regular", Helvetica; font-weight: 500; color: #343434; font-size: 1rem; /* 16px; */ /* font-size: clamp(0.75rem, 0.25rem + 2.6667vw, 1rem); */ /* font-size: clamp(1rem, 0rem + 5.3333vw, 1.5rem); */ /* font-size: clamp(0.75rem, -0.25rem + 5.3333vw, 1.25rem); */ letter-spacing: 0; line-height: normal; } .banner-animation-body .banner-animation-summary .summary-wrapper.summary-extra .summary-item .summary-item-title { font-weight: 500; font-size: 1rem; /* font-size: clamp(1rem, 0rem + 5.3333vw, 1.5rem); */ /* font-size: clamp(0.75rem, -0.25rem + 5.3333vw, 1.25rem); */ } .banner-animation-body .banner-animation-summary .summary-wrapper .summary-item .summary-item-text { font-family: "Acid Grotesk-Normal", Helvetica; font-weight: 400; color: #939393; font-size: 0.875rem; /* 14px; */ font-size: clamp(0.625rem, 0.125rem + 2.6667vw, 0.875rem); letter-spacing: 0; line-height: normal; } .banner-animation-body .banner-animation-summary .summary-wrapper .summary-item .summary-item-text .summary-item-text-green { font-weight: 400; color: #afc070; } .banner-animation-body .banner-animation-summary .summary-wrapper .summary-item .summary-item-text .summary-item-text-green.pill { color: #000; font-size: 0.625rem; } .banner-animation-body .banner-animation-summary .summary-wrapper .summary-item .lines { width: 100%; padding-top: clamp(0.5rem, -0.5rem + 5.3333vw, 1rem); } /* FONT NAME Fff Acidgrotesk Trial */ .banner-animation-body .banner-animation-summary .summary-wrapper .summary-item .graph { margin-top: auto; width: 100%; padding-top: clamp(0.5rem, -0.5rem + 5.3333vw, 1rem); } /* ANIMATION FOOTER */ .banner-animation-body .banner-animation-footer { /* background: #000; */ width: 100%; height: 100%; -ms-grid-column: 1; grid-column-start: 1; -ms-grid-column-span: 3; grid-column-end: 4; -ms-grid-row: 5; grid-row-start: 5; -ms-grid-row-span: 1; grid-row-end: 6; padding-right: 0.75rem; padding-top: 0.75rem; } .banner-animation-body .banner-animation-footer .footer-content { -webkit-box-sizing: border-box; box-sizing: border-box; border: none; position: relative; z-index: 2; background: #1F252A; color: #B0DDDB; padding: 0.5rem 1rem; /* padding-bottom: calc(0.5rem + 10px); */ padding-bottom: 0rem; padding-top: 0rem; width: 100%; height: 100%; border-radius: 0.625rem; /* 10px; */ overflow: hidden; font-size: 1rem; /* 16px; */ line-height: 1.2; 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; } .banner-animation-body .banner-animation-footer .footer-content .footer-text { position: relative; min-height: 1.2em; width: 100%; margin: 0; } .banner-animation-body .banner-animation-footer .footer-content .footer-text>span { position: absolute; top: 0; left: 0; width: 100%; height: 100%; font-size: 1rem; /* 16px; */ display: flex; align-items: center; font-size: clamp(0.5rem, -0.5rem + 5.3333vw, 1rem); line-height: 1.2; opacity: 0; } /* .banner-animation-body .banner-animation-footer .footer-content .footer-text > span.footer-text-start{ opacity: 1; } */ .banner-animation-body .banner-animation-footer .footer-content .footer-icon { min-width: 2rem; /* 40px; */ min-height: 2rem; /* 40px; */ width: 2rem; /* 40px; */ height: 2rem; /* 40px; */ /* background-color: white; border-radius: 100%; */ position: relative; } .banner-animation-body .banner-animation-footer .footer-content .footer-icon .footer-arrow { position: absolute; top: 0; left: 0; width: 100%; height: 100%; border-radius: 100%; background: #fff; 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; } .banner-animation-body .banner-animation-footer .footer-content .footer-icon .footer-ai-icon { position: absolute; top: 12.5; left: 12.5; width: 75%; height: 75%; 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; opacity: 0; } .banner-animation-body .banner-animation-footer .footer-content .footer-icon .footer-approved-icon { position: absolute; top: 0; left: 0; width: 100%; height: 100%; border-radius: 100%; background: #fff; 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; opacity: 0; } .banner-animation-body .banner-animation-footer .footer-content .footer-icon .footer-ai-icon .star-1 { transform-origin: 40% 40%; } .banner-animation-body .banner-animation-footer .footer-content .footer-icon .footer-ai-icon .star-2 { transform-origin: 23.5% 22.2%; /* -5.5% 2.5% */ } .animated-gradient { /* --color-start: #e5f7fb; */ /* --color-end: #cbcefc; */ --color-start: #BBC8C3; --color-end: #E9E5BE; background: -o-repeating-linear-gradient(left, var(--color-start) 0%, var(--color-end) 40%, var(--color-end) 60%, var(--color-start) 100%); background: repeating-linear-gradient(to right, var(--color-start) 0%, var(--color-end) 40%, var(--color-end) 60%, var(--color-start) 100%); position: absolute; bottom: -1px; left: 0; width: 100%; height: 0.625rem; /* 10px; */ background-size: 200% auto; background-position: 0 100%; border-radius: 0 0 0.625rem 0.625rem; } .animated-gradient.animation-on { -webkit-animation: gradient 1s infinite; animation: gradient 1s infinite; -webkit-animation-fill-mode: forwards; animation-fill-mode: forwards; -webkit-animation-timing-function: linear; animation-timing-function: linear; } .animated-ai-icon { --color-start: #BBC8C3; --color-end: #E9E5BE; background: -o-repeating-linear-gradient(left, var(--color-start) 0%, var(--color-end) 40%, var(--color-end) 60%, var(--color-start) 100%); background: repeating-linear-gradient(to right, var(--color-start) 0%, var(--color-end) 40%, var(--color-end) 60%, var(--color-start) 100%); background-size: 200% auto; background-position: 0 100%; -webkit-animation: gradient 1s infinite; animation: gradient 1s infinite; -webkit-animation-fill-mode: forwards; animation-fill-mode: forwards; -webkit-animation-timing-function: linear; animation-timing-function: linear; -webkit-clip-path: url(#ai-icon); clip-path: url(#ai-icon); } /* .teste{ width:100px; height:100px; clip-path: url(#ai-icon); background:black; } */ @-webkit-keyframes gradient { 0% { background-position: 0 0; } 100% { background-position: -200% 0; } } @keyframes gradient { 0% { background-position: 0 0; } 100% { background-position: -200% 0; } }