/* Author: Shadow Themes Author URL: https://shadow-themes.com Name: Bringer | Creative Multipurpose Version: 1.0 License: Themeforest ================= Table of Contents ================= 01. GENERAL 1.1 - Basics Styles 1.2 - BrickWall Styles 1.3 - Selection 02. TYPOGRAPHY 2.1 - Basics Typography 2.2 - Blockquote 2.3 - Lists 2.4 - Marked List 2.5 - Headings 2.6 - Alignment 03. FORMS AND FIELDS 04. HEADER 4.1 - General Header 4.2 - Main Menu 4.3 - Sub-Menu 4.4 - Mobile Menu Container 05. MAIN CONTAINER 06. FOOTER 6.1 - General Footer 6.2 - Footer Widgets 6.3 - Footer Line 6.4 - Socials List 07. HERO SECTIONS 7.1 - Info Line 7.2 - Layout 01 7.3 - Layout 02 7.4 - Layout 03 7.5 - Layout 04 7.6 - Layout 05 7.7 - Layout 06 7.8 - Layout 07 7.9 - Layout 08 08. SCROLLING ELEMENTS 8.1 - Smooth Scroll 8.2 - Mask Fill Text 8.3 - Expanded Section 09. ELEMENTS 9.1 - Base Grid 9.2 - Lazy Loader 9.3 - Masked Block 9.4 - Icons 9.5 - Block Item 9.6 - Tags List 9.7 - Link with Arrow 9.8 - Icon Link 9.9 - Square Button 9.10 - Price Card 9.11 - Marquee List 9.12 - Counter Block 9.13 - Porftolio Grid Card 9.14 - Portfolio Short List 9.15 - Testimonials Grid Card 9.16 - Carousel Card 9.17 - List with Preview 9.18 - Carousel (Swiper) 9.19 - Detailed List 9.20 - Image Box 9.21 - Icon Box 9.22 - Grid More Masked 9.23 - Price Table Card 9.24 - FAQ List 9.25 - Toggles 9.26 - Swiper Slider 9.27 - Fullscreen Slider 9.28 - Portfolio Next Post 9.29 - Bento Grid Block 9.30 - Meta List 9.31 - Masked CTA 9.32 - Member Contacts 9.33 - Infinite List 9.34 - Column Listing Item 9.35 - Grid CTA 9.36 - CTA with Image 9.37 - Right Click Protection 10. PHOTOSWIPE 11. HOVER STATES 12. ANIMATIONS 12.1 - Keyframes 12.2 - Entrance Animations ====================================== */ /** =========== 01. GENERAL =========== */ @import url("stg.css"); * { box-sizing: border-box; outline: none; } :root { --qa-border-mask: linear-gradient(#000, #000) content-box content-box, linear-gradient(#000, #000); } body, html { padding: 0; margin: 0; min-height: 100%; max-width: 100vw; } body { overflow-x: hidden; position: relative; -webkit-tap-highlight-color: transparent; font-family: var(--qa-t-content-ff); font-size: var(--qa-t-content-fs); line-height: var(--qa-t-content-lh); letter-spacing: var(--qa-t-content-ls); font-weight: var(--qa-t-content-fw); color: var(--qa-s-text); background: var(--qa-s-body-bg); } body.is-unloading { pointer-events: none; } body.qa-fullscreen-page { overflow: hidden; } body.qa-fullscreen-page { height: 100svh; } body.is-loaded { opacity: 1; } body.is-unloaded { mask-position: 175%; transition: mask-position 0.75s; } iframe { max-width: 100%; border-radius: var(--qa-default-br); } iframe.qa-google-map { border-radius: var(--qa-small-br); } img, video { display: block; max-width: 100%; height: auto; } img, video { border-radius: var(--qa-default-br); } header img, header video, footer video, footer img, .qa-logo img { border-radius: unset; } .qa-parallax-media:not([class*='qa-grid']), .qa-parallax-media .st-lazy-wrapper, .qa-parallax-image { overflow: hidden; border-radius: var(--qa-default-br); } .pswp { display: none; } .pswp.pswp--open { display: block; } [data-bg-src] { background: var(--qa-s-container-bg) no-repeat center; background-size: cover; position: relative; } .qa-grid-item-link { position: absolute; left: 0; top: 0; bottom: 0; right: 0; z-index: 7; border-radius: inherit; } /* === BrickWall Styles === */ .brickwall-grid { position: relative; } .brickwall-grid > div { position: absolute; left: 0; top: 0; } .brickwall-grid > div.is-appended, .brickwall-grid > div.is-prepended { transform: scale(0); } .brickwall-grid:not(.animation--none) > div.brickwall-item { transition: transform 0.4s, opacity 0.4s; will-change: transform, opacity; } .brickwall-grid.animation--slow > div.brickwall-item { transition: transform 0.8s, opacity 0.8s; will-change: transform, opacity; } /* === Selection === */ ::selection { color: var(--qa-s-heading); background-color: var(--qa-s-accent); } img, a img, .qa-counter, header#qa-header, .swiper, .disable-selection { -webkit-touch-callout: none; -webkit-user-select: none; -khtml-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none; } /** ============== 02. TYPOGRAPHY ============== */ .qa-highlight { color: var(--qa-s-heading); } strong { font-weight: var(--qa-t-heading-fw); color: var(--qa-s-heading); } p { margin: 0 0 var(--qa-t-content-lh) 0; } .qa-large-text { font-size: var(--qa-t-large-fs); line-height: var(--qa-t-content-lh); color: var(--qa-s-heading); } p:last-child { margin: 0; } p:empty { display: none; } a { position: relative; } a, a:focus, a:visited { text-decoration: none; color: var(--qa-s-text-accent); } a { transition: color 0.3s; } address { margin: 0 0 28px 0; } ins, tt, kbd, code, pre { padding: 7px 15px 8px 15px; display: inline-block; margin: 10px 0; max-width: 100%; } tt, kbd, code { margin: 0 5px; } abbr { text-transform: uppercase; } ins, acronym, abbr { text-decoration: none; } kbd, code { margin: 10px 5px; font-family: monospace; } pre { white-space: pre-wrap; margin-bottom: 1.65em; } hr { border: none; width: 100%; height: 1px; background: var(--qa-c-border-gradient); margin: 1.65em 0; } hr:first-child { margin-top: 0; } hr:first-child { margin-bottom: 0; } label, blockquote cite, .qa-label { font-size: var(--qa-t-meta-fs); font-weight: var(--qa-t-meta-fw); letter-spacing: var(--qa-t-meta-ls); color: var(--qa-s-heading-fade); text-transform: uppercase; margin-bottom: 4px; } sup { font-size: 0.6em; margin-right: 2px; display: inline-block; transform: translateY(0.05em); } .qa-title-with-label h1 { margin-bottom: 0; } .qa-title-with-label .qa-label:first-child { display: block; margin-bottom: var(--stg-xs-gap); } .qa-title-with-label .qa-label:last-child { display: block; margin-top: 4px; margin-bottom: 0; } .is-dropcap::first-letter { font-family: var(--qa-t-heading-ff); font-weight: var(--qa-t-heading-fw); line-height: var(--qa-t-h2-lh); color: var(--qa-s-heading); font-size: var(--qa-t-h2-fs); letter-spacing: var(--qa-t-h2-ls); display: block; float: left; margin: -6px 16px -8px 0; } /* Blockquote */ blockquote cite { opacity: 1; position: relative; } blockquote cite::before { content: ''; width: 8px; height: 2px; background-color: var(--qa-s-heading); display: inline-block; margin-right: 8px; vertical-align: middle; transform: translateY(-1px); } cite { text-align: right; display: block; font-style: normal; } /* === Lists === */ ol, ul { padding: 0; margin: 0; } ol:last-child, ul:last-child { margin: 0; } ol li, ul li { padding: 0; margin: 0; list-style: disc; } /* === Marked List === */ .qa-marked-list { padding: 0; margin: 0; } .qa-marked-list li { list-style: none; padding: 0 0 0 28px; margin: 0 0 1.5em 0; position: relative; } .qa-marked-list li:last-child { margin: 0; } .qa-marked-list:not(:last-child) { margin: 0 0 1.5em 0; } .qa-marked-list li::before { content: ''; width: 16px; height: 12px; display: block; position: absolute; left: 0; top: 5px; background: var(--qa-s-heading); -webkit-mask-repeat: no-repeat; -webkit-mask-size: contain; -webkit-mask-position: center; mask-repeat: no-repeat; mask-size: contain; mask-position: center; -webkit-mask-image: var(--icon-check); mask-image: var(--icon-check); } /* === Headings === */ h1, h2, h3, h4, h5, h6 { font-family: var(--qa-t-heading-ff); font-weight: var(--qa-t-heading-fw); color: var(--qa-s-heading); } h1, h2, h3 { margin: 0 0 var(--stg-gap) 0; } h4, h5, h6 { margin: 0 0 var(--stg-small-gap) 0; } h1:last-child, h2:last-child, h3:last-child, h4:last-child, h5:last-child, h6:last-child { margin-bottom: 0; } h1 a, h2 a, h3 a, h4 a, h5 a, h6 a { color: var(--qa-s-heading); } h1 sup, h2 sup, h3 sup, h4 sup, h5 sup, h6 sup { opacity: 0.25; } .qa-accent { color: var(--qa-s-text-accent); } .is-accented .qa-accent { color: var(--qa-s-heading); } .qa-page-title { display: block; width: 100%; } .qa-post-title { margin-bottom: 0; } .qa-post-title:not(:last-child), .qa-page-title:not(:last-child) { margin-bottom: var(--stg-gap); } .qa-title-with-meta span:first-child { margin-bottom: 4px; display: block; } .qa-title-with-meta span:last-child { margin-top: 4px; display: block; } h1.qa-page-title { margin-bottom: calc( -1 * var(--stg-small-gap) ); } .qa-section-title { margin-bottom: var(--stg-large-gap); } .qa-section-title p.is-short { max-width: calc(0.5 * var(--stg-container-width)); margin: 0 auto; } .qa-page-title.is-large { font-size: calc(1.2 * var(--qa-t-h1-fs)); line-height: calc(1.2 * var(--qa-t-h1-lh)); } h1 { font-size: var(--qa-t-h1-fs); letter-spacing: var(--qa-t-h1-ls); line-height: var(--qa-t-h1-lh); margin: var(--qa-t-h1-margin); } h2 { font-size: var(--qa-t-h2-fs); letter-spacing: var(--qa-t-h2-ls); line-height: var(--qa-t-h2-lh); margin: var(--qa-t-h2-margin); } h3 { font-size: var(--qa-t-h3-fs); letter-spacing: var(--qa-t-h3-ls); line-height: var(--qa-t-h3-lh); margin: var(--qa-t-h3-margin); } h4 { font-size: var(--qa-t-h4-fs); letter-spacing: var(--qa-t-h4-ls); line-height: var(--qa-t-h4-lh); margin: var(--qa-t-h4-margin); } .qa-block h4 { margin-bottom: var(--stg-gap); } h5 { font-size: var(--qa-t-h5-fs); letter-spacing: var(--qa-t-h5-ls); line-height: var(--qa-t-h5-lh); margin: var(--qa-t-h5-margin); } h6 { font-size: var(--qa-t-h6-fs); letter-spacing: var(--qa-t-h6-ls); line-height: var(--qa-t-h6-lh); margin: var(--qa-t-h6-margin); } .stg-vertical-space-between > h1, .stg-vertical-space-between > h2, .stg-vertical-space-between > h3, .stg-vertical-space-between > h4, .stg-vertical-space-between > h5, .stg-vertical-space-between > h6 { margin-bottom: 0; } .align-center h1, .align-center h2, .align-center h3, .align-center h4, .align-center h5, .align-center h6 { margin-left: auto; margin-right: auto; } .qa-meta { font-size: var(--qa-t-meta-fs); font-weight: var(--qa-t-heading-fw); font-family: var(--qa-t-heading-ff); letter-spacing: var(--qa-t-meta-ls); text-transform: uppercase; color: var(--qa-s-heading-fade); margin-bottom: calc(0.5 * var(--stg-xs-gap)); } .qa-meta.qa-highlight { color: var(--qa-s-heading); } .qa-meta > a, .qa-meta > span { color: var(--qa-s-heading); } /* === Alignment === */ .align-left { text-align: left; } .align-center { text-align: center; } .align-right { text-align: right; } .align-center img { margin-left: auto; margin-right: auto; } .align-right img { margin-left: auto; } /** ==================== 03. FORMS AND FIELDS ==================== */ label { transition: opacity 0.2s; display: block; margin-bottom: 8px; } label.in-focus { opacity: 1; } input, textarea { width: 100%; display: block; font-family: var(--qa-t-content-ff); font-weight: var(--qa-t-content-fw); font-size: var(--qa-t-input-fs); line-height: 1em; letter-spacing: var(--qa-t-content-ls); border: 1px solid var(--qa-s-border); border-radius: var(--qa-input-br); background: var(--qa-s-container-bg); padding: var(--qa-input-spacing); color: var(--qa-s-text); transition: color 0.3s, border-color 0.3s, box-shadow 0.3s; box-shadow: 0 0 8px transparent; } input:focus, textarea:focus { border-color: var(--qa-s-accent); color: var(--qa-s-heading); box-shadow: 0 8px 16px var(--qa-s-box-shadow); } input:not(:last-child), textarea:not(:last-child) { margin-bottom: var(--qa-input-gap); } textarea { line-height: var(--qa-t-input-lh); height: 191px; resize: vertical; } input[type="button"], input[type="reset"], input[type="submit"], button:not([class*='pswp']), a.qa-button { font-family: var(--qa-t-content-ff); font-weight: var(--qa-t-content-fw); font-size: var(--qa-t-button-fs); line-height: 1; padding: var(--qa-button-spacing); display: inline-block; color: var(--qa-s-accented-text); background: var(--qa-s-accent); border-radius: var(--qa-button-br); border: 1px solid var(--qa-s-border-accent); transition: background-color 0.3s; cursor: pointer; } a.qa-button.is-secondary, .qa-square-button.is-secondary { background: transparent; transition: background-color 0.3s, border-color 0.3s; border-color: var(--qa-s-heading); } input[type="button"].is-fullwidth, input[type="reset"].is-fullwidth, input[type="submit"].is-fullwidth, button.is-fullwidth, .qa-button.is-fullwidth { width: 100%; display: block; text-align: center; } /* === Contact Form === */ form.qa-contact-form { box-shadow: 0 8px 16px var(--qa-s-box-shadow); width: 100%; transition: transform 0.3s; will-change: transform; } .qa-form-content { transition: opacity 0.3s; } form.qa-contact-form.is-busy .qa-form-content { opacity: 0.5; } .qa-contact-form:not(.is-short) [type="submit"] { margin-bottom: 0; width: 100%; } .qa-form-spinner { width: 48px; height: 48px; border: 2px solid var(--qa-s-border-mute); border-top-color: var(--qa-s-heading); border-radius: 50%; animation: sta_spin 1s infinite linear; pointer-events: none; position: absolute; z-index: 15; top: calc(50% - 24px); left: calc(50% - 24px); display: block; will-change: transform, opacity; opacity: 0; transition: opacity 0.3s; } .qa-contact-form.is-busy .qa-form-spinner { opacity: 1; } .qa-contact-form.is-busy { transform: scale(0.95); pointer-events: none; } .qa-contact-form.is-error { animation: sta_shake 0.3s linear; } .qa-contact-form__response { padding-top: var(--stg-gap); text-align: center; position: static; font-size: var(--qa-t-meta-fs); font-weight: var(--qa-t-meta-fw); letter-spacing: var(--qa-t-meta-ls); color: var(--qa-s-heading); text-transform: uppercase; width: 100%; display: none; } .is-short .qa-contact-form__response { position: absolute; top: 100%; left: 0; } .qa-masked-cta .qa-contact-form__response { top: auto; left: var(--stg-large-gap); bottom: calc( 0.5 * (var(--stg-large-gap) - var(--qa-t-content-lh)) ); } /** ========== 04. HEADER ========== */ #qa-header { position: absolute; left: 0; top: 0; width: 100%; z-index: 111; background: var(--qa-s-nav); } #qa-header.is-sticky { position: fixed; } #qa-header.is-frosted { -webkit-backdrop-filter: saturate(150%) blur(12px); backdrop-filter: saturate(150%) blur(12px); } #qa-header::after { content: ''; width: 100%; height: 1px; display: block; background: var(--qa-c-border-gradient); position: absolute; bottom: 0; left: 0; } #qa-header::before { content: ''; position: absolute; left: 0; top: 0; right: 0; bottom: 0; background: linear-gradient( 0deg, transparent 25%, var(--qa-s-body-bg) 100%); display: block; } .no-header-border #qa-header::after { display: none; } .qa-header-inner { padding: var(--qa-header-spacing) 0; min-height: 44px; display: flex; justify-content: space-between; align-items: center; width: var(--stg-container-width); margin: 0 auto; position: relative; z-index: 5; } .qa-mobile-header-inner { display: none; } /* === Main Menu === */ .qa-active-menu-ind { position: absolute; width: calc(var(--active-width) - 0.5 * var(--qa-menu-gap)); height: 2px; background-color: var(--qa-s-heading); border-radius: 1px; left: calc(var(--active-left) + 0.25 * var(--qa-menu-gap)); bottom: 0; } .qa-active-menu-ind::before { content: ''; height: var(--st-header-height); width: 200%; background: radial-gradient(ellipse at center bottom, var(--qa-s-heading) 10%, transparent 60%) no-repeat bottom center; display: block; position: absolute; bottom: 100%; left: -50%; opacity: 0.1; } nav.qa-nav ul.main-menu { display: flex; justify-content: center; align-items: center; gap: calc(0.5 * var(--qa-menu-gap)); --stea-move: var(--stg-small-gap); } ul.main-menu li { list-style: none; margin: 0; padding: 0; font-family: var(--qa-t-menu-ff); font-weight: var(--qa-t-menu-fw); font-size: var(--qa-t-menu-fs); line-height: var(--qa-t-menu-lh); position: relative; } ul.sub-menu li { font-family: var(--qa-t-submenu-ff); font-weight: var(--qa-t-submenu-fw); font-size: var(--qa-t-submenu-fs); line-height: var(--qa-t-submenu-lh); } ul.main-menu li.qa-menu-divider { position: relative; padding: 12px 0; height: 1px; pointer-events: none; } ul.main-menu li.qa-menu-divider::after { content: ''; width: 100%; height: 1px; display: block; background: var(--qa-c-border-gradient); position: absolute; left: 0; top: 12px; opacity: 0.5; } nav.qa-nav ul.main-menu > li > a { padding: calc(0.25 * var(--qa-menu-gap)); } ul.main-menu a { color: var(--qa-c-menu); display: block; transition: color 0.3s; } ul.main-menu li.current-menu-parent > a, ul.main-menu li.current-menu-item > a, ul.main-menu li.current-menu-ancestor > a { color: var(--qa-c-menu-active); font-weight: var(--qa-t-heading-fw); } #qa-header ul.sub-menu > li.current-menu-item a::after, #qa-header ul.sub-menu > li.current-menu-parent a::after { content: ''; position: absolute; width: 2px; height: calc(100% - 16px); left: -8px; top: 8px; background: var(--qa-s-heading); border-radius: 1px; } ul.main-menu li.menu-item-has-children > a::after { content: ''; width: var(--qa-t-menu-fs); height: var(--qa-t-menu-fs); background: var(--qa-c-menu); transition: background-color 0.3s; display: inline-block; margin-left: 8px; vertical-align: middle; -webkit-mask-repeat: no-repeat; -webkit-mask-position: center; -webkit-mask-size: contain; mask-repeat: no-repeat; mask-size: contain; mask-position: center; -webkit-mask-image: var(--icon-chevron-down); mask-image: var(--icon-chevron-down); transform: scale(1.5) translateY(-1px); } ul.main-menu li.menu-item-has-children.current-menu-parent > a::after, ul.main-menu li.menu-item-has-children.current-menu-item > a::after, ul.main-menu li.menu-item-has-children.current-menu-ancestor > a::after { color: var(--qa-c-menu-active); } /* Sub-Menu */ nav.qa-nav ul.sub-menu { display: block; position: absolute; top: 100%; left: -16px; width: var(--qa-sub-menu-width); background: var(--qa-s-container-bg) radial-gradient(circle at center bottom, var(--qa-s-backlight) 0%, transparent) no-repeat; z-index: 222; border-radius: var(--qa-small-br); padding: 8px; transition: opacity 0.2s, transform 0.2s; will-change: opacity, transform; pointer-events: none; opacity: 0; transform: scale(1, 0); transform-origin: 50% 0%; } nav.qa-nav ul.sub-menu ul.sub-menu { top: -8px; left: calc(100% + 16px); z-index: 223; transform: scale(0, 1); transform-origin: 0% 50%; } nav.qa-nav ul.sub-menu::before, nav.qa-nav ul.sub-menu ul.sub-menu::after { content: ''; position: absolute; left: 0; top: 0; user-select: none; } nav.qa-nav ul.sub-menu::before { right: 0; bottom: 0; inset: 0px; padding: 1px; background: linear-gradient( 0deg, var(--qa-s-border), var(--qa-s-backlight) ); mask: var(--qa-border-mask); -webkit-mask: var(--qa-border-mask); border-radius: var(--qa-small-br); mask-composite: exclude; -webkit-mask-composite: xor; } nav.qa-nav ul.sub-menu ul.sub-menu::after { width: 32px; height: 100%; top: 0; left: -24px; background: transparent; } nav.qa-nav ul.sub-menu li { position: relative; z-index: 3; } nav.qa-nav ul.sub-menu li::before { content: ''; background: var(--qa-s-backlight); position: absolute; left: 0; top: 0; bottom: 0; right: 0; border-radius: var(--qa-xs-br); transition: opacity 0.3s; will-change: opacity; opacity: 0; } nav.qa-nav ul.sub-menu li a { padding: 12px; position: relative; z-index: 4; } nav.qa-nav ul.sub-menu li.menu-item-has-children > a::after { position: absolute; right: 8px; top: calc(50% - calc(0.5 * var(--qa-t-menu-fs))); mask-image: var(--icon-menu-chevron); -webkit-mask-image: var(--icon-menu-chevron); transform: scale(1.5) translateX(0px); } /* Show Sub-Menu Event */ nav.qa-nav li.menu-item-has-children:hover > ul.sub-menu { opacity: 1; transform: scale(1); pointer-events: all; } /* Mobile Menu Container */ .qa-mobile-nav { position: fixed; right: 0; top: var(--st-header-height); width: 100%; height: calc(100% - var(--st-header-height)); max-width: 390px; z-index: 88; background: var(--qa-s-nav); contain: paint; overflow-y: scroll; scrollbar-width: none; pointer-events: none; transform: translateX(100%); transition: transform 0.3s; will-change: transform; display: none; } .qa-mobile-nav.is-frosted { -webkit-backdrop-filter: saturate(150%) blur(12px); backdrop-filter: saturate(150%) blur(12px); } /** ================== 05. MAIN CONTAINER ================== */ main#qa-main { position: relative; z-index: 5; contain: paint; padding-top: var(--st-header-height); transition: opacity 0.5s; will-change: opacity; } body:not(.is-loaded) main#qa-main { opacity: 0; } body.qa-fullscreen-page main#qa-main { transition: opacity 0.5s, transform 0.8s; will-change: transform, opacity; } body.qa-fullscreen-page:not(.is-loaded) main#qa-main { transform: scale(1.05); } #qa-main.qa-min-content { display: flex; width: 100%; height: 100%; align-items: center; padding: 0 0 var(--st-footer-height) 0; min-height: calc(100svh - var(--st-footer-height)); } body.qa-fullscreen-page main#qa-main { position: fixed; left: 0; right: 0; top: 0; width: 100%; height: 100svh; padding-top: 0; } section { padding: var(--qa-section-gap) 0; position: relative; } section > div { position: relative; z-index: 5; } section[data-padding="none"] { padding-top: 0; padding-bottom: 0; } section[data-padding="top"] { padding-bottom: 0; } section[data-padding="bottom"] { padding-top: 0; } section[data-padding="small"] { padding: calc(0.5 * var(--qa-section-gap)) 0; } section.is-fullwidth { max-width: 100svw; --qa-fw-spacing: calc(0.5 * (100vw - var(--stg-container-width))); margin-left: calc(-1 * var(--qa-fw-spacing)); margin-right: calc(-1 * var(--qa-fw-spacing)); padding-left: var(--qa-fw-spacing); padding-right: var(--qa-fw-spacing); } section.is-fullwidth.is-stretched { padding-left: 0; padding-right: 0; } section.is-fullwidth.is-stretched > .is-boxed { --qa-fw-spacing: calc(0.5 * (100vw - var(--stg-container-width))); padding-left: var(--qa-fw-spacing); padding-right: var(--qa-fw-spacing); } section.backlight-top::before, section.backlight-bottom::after, section.backlight-both::before, section.backlight-both::after, section.divider-both::before, section.divider-both::after, section.divider-top::before, section.divider-bottom::after { content: ''; position: absolute; z-index: 1; left: calc(-0.5 * (100vw - var(--stg-container-width))); pointer-events: none; } .stg-container.is-fullwidth section.backlight-top::before, .stg-container.is-fullwidth section.backlight-bottom::after, .stg-container.is-fullwidth section.backlight-both::before, .stg-container.is-fullwidth section.backlight-both::after, .stg-container.is-fullwidth section.divider-both::before, .stg-container.is-fullwidth section.divider-both::after, .stg-container.is-fullwidth section.divider-top::before, .stg-container.is-fullwidth section.divider-bottom::after, section.is-fullwidth.backlight-top::before, section.is-fullwidth.backlight-bottom::after, section.is-fullwidth.backlight-both::before, section.is-fullwidth.backlight-both::after, section.is-fullwidth.divider-both::before, section.is-fullwidth.divider-both::after, section.is-fullwidth.divider-top::before, section.is-fullwidth.divider-bottom::after { left: 0; } section.backlight-top::before, section.backlight-bottom::after, section.backlight-both::before, section.backlight-both::after { width: 100vw; height: 50vw; } section.backlight-top::before, section.backlight-both::before { background: radial-gradient( 100vw circle at 50vw 0%, var(--qa-s-backlight), transparent 50% ); } section.backlight-bottom::after, section.backlight-both::after { background: radial-gradient( 100vw circle at 50vw 100%, var(--qa-s-backlight), transparent 50% ); } section.backlight-top::before, section.backlight-both::before { top: 0; } section.backlight-bottom::after, section.backlight-both::after { bottom: 0; } section.divider-both::before, section.divider-both::after, section.divider-top::before, section.divider-bottom::after { width: 100vw; height: 1px; display: block; background: var(--qa-c-border-gradient); } section.divider-both::before, section.divider-top::before { top: 0; } section.divider-both::after, section.divider-bottom::after { bottom: 0; } section.backlight-top:last-child::before { height: 100%; } /* Mouse Cursor Backlight */ .qa-backlight { position: fixed; left: 0; top: 0; width: 100%; height: 100%; background: radial-gradient( 50vw circle at var(--mouse-x) var(--mouse-y), var(--qa-s-cursor-light), transparent 50% ); opacity: 0.75; z-index: 1; } /** ========== 06. FOOTER ========== */ #qa-footer { position: relative; z-index: 22; } #qa-footer.is-sticky, .qa-fullscreen-page #qa-footer { position: fixed; width: 100%; bottom: 0; left: 0; background: var(--qa-s-nav); } #qa-footer.is-frosted, .qa-fullscreen-page #qa-footer.is-frosted { -webkit-backdrop-filter: saturate(150%) blur(12px); backdrop-filter: saturate(150%) blur(12px); } #qa-footer a { color: var(--qa-s-heading); } /* === Footer Widgets === */ .qa-footer-line::before, .qa-footer-widgets::before { content: ''; width: 100%; height: 1px; display: block; background: var(--qa-c-border-gradient); position: absolute; top: 0; left: 0; } .qa-footer-widgets::before { opacity: 0.5; } .qa-footer-widgets { padding: var(--stg-large-gap) 0; position: relative; } .qa-footer-widgets::after { content: ''; position: absolute; left: 0; top: 0; bottom: 0; right: 0; background: var(--qa-s-backlight) radial-gradient( 100vw circle at 50vw 35vw, var(--qa-s-backlight), transparent 50% ); opacity: 0.5; pointer-events: none; } .qa-footer-widgets .stg-container { position: relative; z-index: 3; } .qa-footer-widgets h6 { margin-bottom: var(--stg-gap); } .qa-widget ul { margin: 0; padding: 0; } .qa-widget ul li { padding: 0; margin: 0; list-style: none; } /* Widget: Info */ .qa-info-widget { display: flex; flex-direction: column; align-items: flex-start; justify-content: flex-start; } .qa-info-widget .qa-logo { margin: 0 0 var(--stg-gap) 0; } .qa-info-description { margin-bottom: 28px; } .qa-info-widget .qa-label { margin-bottom: var(--stg-xs-gap); color: var(--qa-s-heading); } /* Widget: Contacts */ .qa-contacts-widget ul li:not(:last-child) { margin-bottom: 16px; } .qa-contacts-widget .qa-label { display: block; } /* Widget: Menu */ .qa-menu-widget ul li { margin: 0 -8px; position: relative; } .qa-menu-widget a { display: block; padding: 8px; position: relative; z-index: 3; opacity: 0.7; transition: opacity 0.3s; } .qa-menu-widget ul { margin: -8px 0; } .qa-menu-widget ul li::before { content: ''; position: absolute; left: 0; top: 0; right: 0; bottom: 0; border-radius: var(--qa-xs-br); background: var(--qa-s-backlight); z-index: 1; opacity: 0; transform-origin: 0 50%; will-change: opacity; transition: opacity 0.2s; } /* === Footer Line === */ .no-footer-border .qa-footer-line::before { display: none; } .qa-footer-line { display: flex; justify-content: space-between; align-items: center; padding: var(--stg-gap) 0; position: relative; font-size: var(--qa-t-footer-fs); line-height: var(--qa-t-footer-lh); } .qa-footer-line:has(.align-center) { justify-content: center; } .qa-footer-divider { margin: 0 8px; } /* === Socials List === */ ul.qa-socials-list { display: flex; gap: var(--qa-socials-gap); } ul.qa-socials-list.stg-xs-gap { gap: var(--stg-xs-gap); } ul.qa-socials-list.stg-small-gap { gap: var(--stg-small-gap); } ul.qa-socials-list.stg-large-gap { gap: var(--stg-large-gap); } ul.qa-socials-list.stg-xl-gap { gap: var(--stg-xl-gap); } .qa-footer-line ul.qa-socials-list { margin: -8px 0; } .qa-socials-list li { list-style: none; padding: 0; display: block; } .qa-socials-list a { position: relative; width: calc(var(--qa-socials-size) + 24px); height: calc(var(--qa-socials-size) + 24px); padding: 8px; display: flex; justify-content: center; align-items: center; border-radius: var(--qa-xs-br); transition: transform 0.1s, background-color 0.3s; will-change: transform; } .qa-socials-list a::before { content: ''; display: block; position: absolute; left: 0; bottom: 0; right: 0; top: 0; border-radius: inherit; border: 1px solid var(--qa-s-heading); transition: opacity 0.3s; will-change: opacity; } .qa-socials-list i { width: var(--qa-socials-size); height: var(--qa-socials-size); background-color: var(--qa-s-heading); -webkit-mask-repeat: no-repeat; -webkit-mask-size: contain; -webkit-mask-position: center; mask-repeat: no-repeat; mask-size: contain; mask-position: center; display: block; z-index: 3; } .qa-socials-500px i { -webkit-mask-image: var(--icon-social-500px); mask-image: var(--icon-social-500px); } .qa-socials-behance i { -webkit-mask-image: var(--icon-social-behance); mask-image: var(--icon-social-behance); } .qa-socials-dribbble i { -webkit-mask-image: var(--icon-social-dribbble); mask-image: var(--icon-social-dribbble); } .qa-socials-facebook i { -webkit-mask-image: var(--icon-social-facebook); mask-image: var(--icon-social-facebook); } .qa-socials-flickr i { -webkit-mask-image: var(--icon-social-flickr); mask-image: var(--icon-social-flickr); } .qa-socials-instagram i { -webkit-mask-image: var(--icon-social-instagram); mask-image: var(--icon-social-instagram); } .qa-socials-linkedin i { -webkit-mask-image: var(--icon-social-linkedin); mask-image: var(--icon-social-linkedin); } .qa-socials-patreon i { -webkit-mask-image: var(--icon-social-patreon); mask-image: var(--icon-social-patreon); } .qa-socials-pinterest i { -webkit-mask-image: var(--icon-social-pinterest); mask-image: var(--icon-social-pinterest); } .qa-socials-tiktok i { -webkit-mask-image: var(--icon-social-tiktok); mask-image: var(--icon-social-tiktok); } .qa-socials-tumblr i { -webkit-mask-image: var(--icon-social-tumblr); mask-image: var(--icon-social-tumblr); } .qa-socials-vimeo i { -webkit-mask-image: var(--icon-social-vimeo); mask-image: var(--icon-social-vimeo); } .qa-socials-x i { -webkit-mask-image: var(--icon-social-x); mask-image: var(--icon-social-x); } .qa-socials-xing i { -webkit-mask-image: var(--icon-social-xing); mask-image: var(--icon-social-xing); } .qa-socials-youtube i { -webkit-mask-image: var(--icon-social-youtube); mask-image: var(--icon-social-youtube); } /* Framed Socials */ .qa-socials-list.qa-framed-socials { flex-wrap: wrap; gap: var(--stg-small-gap); } /** ================= 07. HERO SECTIONS ================= */ .qa-hero-block .qa-page-title { margin-bottom: 0; } /* Info Line */ .qa-hero-info-line { display: flex; justify-content: space-between; --stea-move: var(--stg-gap); } .qa-hero-info-line .qa-meta { margin: 0; } .qa-hero-info-line > div { width: 33.33%; } .qa-hero-info-line > div:nth-child(2) { text-align: center; } .qa-hero-info-line > div:nth-child(3) { text-align: right; } /* === Layout 01 === */ .qa-hero-type01 .qa-masked-block { --masked-inner-radius: var(--qa-large-br); } .qa-hero-type01 .qa-masked-content { width: 128px; height: 128px; position: absolute; bottom: 0; right: 0; } .qa-hero-type01 .qa-masked-content a.qa-square-button { width: 112px; height: 112px; border-radius: var(--qa-default-br); } .qa-hero-type01 .qa-masked-content a span { width: 32px; height: 32px; } /* Social Proof */ .qa-hero-type01 .qa-hero-social-proof { display: flex; flex-direction: column; align-items: flex-end; padding-top: var(--stg-small-gap); } .qa-hero-type01 .qa-hero-social-proof > div { display: flex; justify-content: flex-end; margin-right: -4px; margin-bottom: 20px; } .qa-hero-type01 .qa-hero-social-proof p { text-align: right; text-transform: uppercase; color: var(--qa-s-heading); max-width: 110px; } .qa-hero-type01 .qa-hero-social-proof img, .qa-hero-type01 .qa-hero-social-proof a { display: flex; width: 64px; height: 64px; border-radius: 50%; margin-left: -32px; border: 4px solid var(--qa-s-body-bg); } .qa-hero-type01 .qa-hero-social-proof a { justify-content: center; align-items: center; text-align: center; color: var(--qa-s-heading); background: var(--qa-s-accent); } /* === Layout 02 === */ .qa-hero-type02 .qa-page-title { padding-right: var(--stg-gap); margin-bottom: var(--stg-large-gap); padding-bottom: 0; } .stg-row.qa-hero02-row { padding-bottom: var(--stg-large-gap); width: calc(var(--stg-container-width) + var(--stg-gap)); } /* === Layout 03 === */ .qa-hero-type03 .qa-hero-title-wrap { display: flex; width: 100%; justify-content: space-between; margin-bottom: var(--stg-gap); } .qa-hero-type03 .qa-hero-title-wrap h1 { max-width: 70%; margin-bottom: 0; } .qa-hero-type03 .qa-hero-title-wrap > div { max-width: 25%; height: auto; border-radius: var(--qa-default-br); } .qa-hero-type03 .qa-hero-media { aspect-ratio: 2/1; } .qa-hero-type03 .qa-hero-media video, .qa-hero-type03 .qa-hero-media img { width: 100%; height: 100%; object-fit: cover; display: block; } .qa-hero-type03 .qa-hero-media-content { max-width: 25%; width: max-content; text-align: right; } .qa-hero-type03 .qa-hero-media-content-inner { padding: 0 0 calc(var(--stg-small-gap) + 4px) var(--stg-small-gap); } .qa-hero-type03 svg { position: absolute; pointer-events: none; left: 0; top: 0; opacity: 0; } .qa-hero-type03 .qa-tags-list { position: absolute; left: var(--stg-small-gap); bottom: var(--stg-small-gap); max-width: 33%; } .qa-tags-list li[data-appear] { --stea-move: var(--stg-small-gap); } /* === Layout 04 === */ .qa-hero-type04 .qa-large-text { max-width: 50%; margin: 0 auto; } .qa-hero-type04 .qa-hero-info-line { margin-bottom: var(--stg-gap); } /* === Layout 05 === */ .qa-hero-type05 .qa-title-block { aspect-ratio: 1/1; display: flex; flex-direction: column; justify-content: space-between; align-items: flex-start; margin-bottom: var(--stg-gap); border-radius: var(--qa-default-br); } .qa-hero-type05 .qa-title-block .qa-large-text { max-width: 425px; } .qa-hero-type05 .qa-hero-media-wrap { position: relative; border-radius: var(--qa-default-br); } .qa-hero-type05 .qa-hero-media-wrap img { position: absolute; width: calc(100% - 2 * var(--stg-large-gap)); height: auto; top: var(--stg-large-gap); left: var(--stg-large-gap); display: block; box-shadow: 0 8px 16px var(--qa-s-box-shadow); } .qa-hero-type05 .qa-square-button { width: 100%; height: 100%; display: flex; border-radius: var(--qa-default-br); } .qa-hero-type05 a.qa-square-button span.qa-icon { width: 64px; height: 64px; } /* === Layout 06 === */ .qa-hero-type06 .is-large .qa-bento-hero-media p { max-width: 320px; } .qa-bento-hero-media { position: absolute; left: 0; top: 0; bottom: 0; right: 0; padding: var(--stg-gap); display: flex; flex-direction: column; justify-content: space-between; border-radius: inherit; } .qa-hero-type06 .qa-masked-block { --masked-inner-radius: var(--qa-large-br); } .qa-hero-type06 .qa-masked-content.at-bottom-right { width: 128px; height: 128px; } .qa-hero-type06 .qa-masked-content.at-bottom-right a.qa-square-button { margin: calc(1.5 * var(--stg-small-gap)) 0 0 calc(1.5 * var(--stg-small-gap)); } .qa-hero-type06 .qa-square-button { width: calc(100% - 1.5 * var(--stg-small-gap)); height: calc(100% - 1.5 * var(--stg-small-gap)); border-radius: var(--qa-default-br); } .qa-hero-type06 .qa-square-button span.qa-icon { width: 32px; height: 32px; } /* === Layout 07 === */ .qa-hero-type07 .qa-hero-info-line { margin: var(--stg-gap) 0 var(--stg-large-gap) 0; } /* Social Proof */ .qa-hero-type07 .qa-hero-social-proof { margin-top: calc(-1 * var(--stg-xs-gap)); } .qa-hero-type07 .qa-hero-social-proof > div { display: flex; justify-content: flex-end; gap: var(--stg-xs-gap); } .qa-hero-type07 .qa-hero-social-proof a, .qa-hero-type07 .qa-hero-social-proof img { width: 128px; height: 128px; display: block; border-radius: var(--qa-small-br); } .qa-hero-type07 .qa-hero-social-proof a { display: flex; flex-direction: column; justify-content: center; align-items: center; text-align: center; } .qa-hero-type07 .qa-hero-social-proof a span { font-size: var(--qa-t-meta-fs); font-weight: var(--qa-t-meta-fw); letter-spacing: var(--qa-t-meta-ls); color: var(--qa-s-heading); text-transform: uppercase; display: block; height: auto; width: 100%; } .qa-hero-type07 .qa-hero-social-proof a h5 { margin: 0 0 4px 0; } /* === Layout 08 === */ .qa-hero-form { display: flex; justify-content: flex-start; align-items: flex-start; gap: var(--stg-small-gap); width: 100%; padding-bottom: var(--stg-xs-gap); } .qa-hero-form input { width: 100%; } .qa-hero-form button { padding-right: var(--stg-gap); padding-left: var(--stg-gap); } .qa-hero-form input, .qa-hero-form button { margin: 0; } .qa-partners span { display: block; } .qa-partners .qa-block { padding: 0; border-radius: var(--qa-xs-br); } /** ====================== 08. SCROLLING ELEMENTS ====================== */ .st-expandable-wrap { overflow: hidden; } /* === Smooth Scroll === */ .stss-wrap { position: absolute; left: 0; top: 0; width: 100%; height: 100%; z-index: 4; overflow: hidden; } .stss-wrap.is-ready { position: fixed; } .stss-container { width: 100%; min-height: 100%; height: auto; will-change: transform; } /* === Mask Fill Text === */ .qa-text-fill-mask { background: linear-gradient(var(--qa-s-heading), var(--qa-s-heading)) left top no-repeat; -webkit-background-clip: text; -webkit-text-fill-color: var(--qa-s-heading-fade); } /* === Expanded Section === */ .qa-expand-on-scroll { --st-eos-init-scale: 1.25; --st-eos-init-clip: 0.5; --st-eos-br: var(--qa-default-br); transform-origin: 50% 0; } .qa-expand-on-scroll img, .qa-expand-on-scroll video { border-radius: 0; } .qa-expand-on-scroll > * { width: 100%; height: auto; display: block; } .qa-expand-on-scroll iframe { aspect-ratio: 16/9; } /** ============ 09. ELEMENTS ============ */ [class*='qa-grid'] { display: grid; grid-column-gap: var(--stg-gap); grid-row-gap: var(--stg-gap); } .qa-grid-1col { grid-template-columns: repeat(1, 1fr); } .qa-grid-2cols { grid-template-columns: repeat(2, 1fr); } .qa-grid-3cols { grid-template-columns: repeat(3, 1fr); } .qa-grid-4cols { grid-template-columns: repeat(4, 1fr); } .qa-grid-5cols { grid-template-columns: repeat(5, 1fr); } .qa-grid-6cols { grid-template-columns: repeat(6, 1fr); } .qa-subgrid-item { display: grid; grid-template-rows: subgrid; grid-row: span 2; } /* === Lazy Loader === */ .st-lazy-wrapper { position: relative; display: block; border-radius: inherit; } .st-lazy-wrapper:has(img[data-speed]) { border-radius: var(--qa-default-br); } .st-lazy-wrapper::before, .st-lazy-wrapper::after { content: ''; position: absolute; display: block; transition: opacity 0.3s; will-change: opacity; transition-delay: 0.05s; } .st-lazy-wrapper::before { left: 0; top: 0; width: 100%; height: 100%; background: var(--qa-s-container-bg); z-index: 4; border-radius: var(--qa-default-br); } .st-lazy-wrapper.is-loaded::before { opacity: 0; } .st-lazy-wrapper::after { z-index: 5; width: 40px; height: 40px; border: 2px solid var(--qa-s-border); border-top-color: var(--qa-s-heading); animation: sta_spin 1s linear infinite; border-radius: 50%; left: calc(50% - 22px); top: calc(50% - 22px); } .st-lazy-wrapper.is-loaded::after { opacity: 0; } .st-lazy-wrapper.stop-anim::after { opacity: 0; animation: unset; } /* === Masked Block === */ .qa-masked-block { position: relative; --masked-border-radius: var(--qa-default-br); } .qa-masked-content, .qa-masked-content.at-top-left { position: absolute; top: 0; left: 0; bottom: auto; right: auto; } .qa-masked-content.at-top-right { top: 0; left: auto; bottom: auto; right: 0; } .qa-masked-content.at-bottom-left { top: auto; left: 0; bottom: 0; right: auto; } .qa-masked-content.at-bottom-right { top: auto; left: auto; bottom: 0; right: 0; } .qa-masked-content.at-middle-right, .qa-masked-content.at-middle-left { top: 50%; bottom: auto; transform: translateY(-50%); } .qa-masked-content.at-middle-right { right: 0; left: auto; } .qa-masked-content.at-middle-left { left: 0; right: auto; } .qa-masked-content.at-top-center, .qa-masked-content.at-bottom-center { left: 50%; right: auto; transform: translateX(-50%); } .qa-masked-content.at-top-center { top: 0; bottom: auto; } .qa-masked-content.at-bottom-center { bottom: 0; top: auto; } /* Square Button */ .qa-masked-content .qa-square-button, .qa-masked-content.at-top-left .qa-square-button { margin: 0 var(--stg-small-gap) var(--stg-small-gap) 0; } .qa-masked-content.at-top-right .qa-square-button { margin: 0 0 var(--stg-small-gap) var(--stg-small-gap); } .qa-masked-content.at-bottom-left .qa-square-button { margin: var(--stg-small-gap) var(--stg-small-gap) 0 0; } .qa-masked-content.at-bottom-right .qa-square-button { margin: var(--stg-small-gap) 0 0 var(--stg-small-gap); } .qa-masked-content.at-top-center .qa-square-button { margin: 0 var(--stg-small-gap) var(--stg-small-gap) var(--stg-small-gap); } .qa-masked-content.at-bottom-center .qa-square-button { margin: var(--stg-small-gap) var(--stg-small-gap) 0 var(--stg-small-gap); } .qa-masked-content.at-middle-left .qa-square-button { margin: var(--stg-small-gap) var(--stg-small-gap) var(--stg-small-gap) 0; } .qa-masked-content.at-middle-right .qa-square-button { margin: var(--stg-small-gap) 0 var(--stg-small-gap) var(--stg-small-gap); } /* Content Padding */ .qa-masked-content > div, .qa-masked-content.at-top-left > div { padding: 0 var(--stg-small-gap) var(--stg-small-gap) 0; } .qa-masked-content.at-top-right > div { padding: 0 0 var(--stg-small-gap) var(--stg-small-gap); } .qa-masked-content.at-bottom-left > div { padding: var(--stg-small-gap) var(--stg-small-gap) 0 0; } .qa-masked-content.at-bottom-right > div { padding: var(--stg-small-gap) 0 0 var(--stg-small-gap); } .qa-masked-content.at-top-center > div { padding: 0 var(--stg-small-gap) var(--stg-small-gap) var(--stg-small-gap); } .qa-masked-content.at-bottom-center > div { padding: var(--stg-small-gap) var(--stg-small-gap) 0 var(--stg-small-gap); } .qa-masked-content.at-middle-left > div { padding: var(--stg-small-gap) var(--stg-small-gap) var(--stg-small-gap) 0; } .qa-masked-content.at-middle-right > div { padding: var(--stg-small-gap) 0 var(--stg-small-gap) var(--stg-small-gap); } /* === Icons === */ .qa-icon { -webkit-mask-repeat: no-repeat; -webkit-mask-size: contain; -webkit-mask-position: center; mask-repeat: no-repeat; mask-size: contain; mask-position: center; background: var(--qa-s-heading); display: block; width: 24px; height: 24px; } .qa-icon-explore { -webkit-mask-image: var(--icon-arrow-explore); mask-image: var(--icon-arrow-explore); } .qa-icon-arrow-down { -webkit-mask-image: var(--icon-arrow-down); mask-image: var(--icon-arrow-down); } .qa-icon-arrow-left { -webkit-mask-image: var(--icon-arrow-left); mask-image: var(--icon-arrow-left); } .qa-icon-arrow-right { -webkit-mask-image: var(--icon-arrow-right); mask-image: var(--icon-arrow-right); } .qa-icon-arrow-submit { -webkit-mask-image: var(--icon-arrow-submit); mask-image: var(--icon-arrow-submit); } .qa-icon-creativity { -webkit-mask-image: var(--icon-creativity); mask-image: var(--icon-creativity); } .qa-icon-collab { -webkit-mask-image: var(--icon-collab); mask-image: var(--icon-collab); } .qa-icon-impact { -webkit-mask-image: var(--icon-impact); mask-image: var(--icon-impact); } .qa-icon-innovation { -webkit-mask-image: var(--icon-innovation); mask-image: var(--icon-innovation); } .qa-icon-chevron-left { -webkit-mask-image: var(--icon-chevron-left); mask-image: var(--icon-chevron-left); } .qa-icon-chevron-right { -webkit-mask-image: var(--icon-chevron-right); mask-image: var(--icon-chevron-right); } /* === Block Item === */ .qa-block { border-radius: var(--qa-small-br); background-color: var(--qa-s-container-bg); padding: var(--stg-gap); padding-bottom: calc(var(--stg-gap) - 3px); position: relative; --mouse-x: 50%; --mouse-y: 0; } .qa-block.stg-valign-middle { display: flex; flex-direction: column; justify-content: center; } .qa-block.is-frosted { background: var(--qa-s-container-frosted); -webkit-backdrop-filter: saturate(150%) blur(12px); backdrop-filter: saturate(150%) blur(12px); } [class*='stg-col'].qa-block { border-radius: var(--qa-default-br); } .qa-block::before, .qa-block::after { content: ''; border-radius: inherit; position: absolute; left: 0; top: 0; right: 0; bottom: 0; pointer-events: none; } .qa-block::before { inset: 0px; padding: 1px; background: radial-gradient( 800px circle at var(--mouse-x) var(--mouse-y), var(--qa-s-border-highlight), var(--qa-s-border-mute) 40% ); mask: var(--qa-border-mask); -webkit-mask: var(--qa-border-mask); mask-composite: exclude; -webkit-mask-composite: xor; transition: opacity 0.4s; will-change: opacity; opacity: 0.75; } .qa-block.is-accented { background: var(--qa-s-accent) bottom right no-repeat; color: var(--qa-s-accented-text); } .qa-block.is-accented::before { background: radial-gradient( 800px circle at var(--mouse-x) var(--mouse-y), var(--qa-s-text-accent), var(--qa-s-border-accent) 40% ); } .qa-block::after { opacity: 0; transition: opacity 0.4s; will-change: opacity; width: 100%; background: radial-gradient( 800px circle at var(--mouse-x) var(--mouse-y), var(--qa-s-backlight), transparent 40% ); z-index: 5; } /* === Tags List === */ .qa-tags-list { display: flex; justify-content: flex-start; align-items: flex-start; flex-wrap: wrap; gap: var(--stg-xs-gap); padding: 0; margin: 0; } .qa-tags-list li { margin: 0; padding: 0; list-style: none; display: block; } .qa-tags-list li a { border-radius: var(--qa-xs-br); font-size: var(--qa-t-meta-fs); font-weight: var(--qa-t-meta-fw); letter-spacing: var(--qa-t-meta-ls); color: var(--qa-s-heading); text-transform: uppercase; padding: calc(0.75 * var(--stg-xs-gap)) calc(1.5 * var(--stg-xs-gap)); background: var(--qa-s-nav); -webkit-backdrop-filter: saturate(150%) blur(12px); backdrop-filter: saturate(150%) blur(12px); display: block; border: 1px solid var(--qa-s-border); transition: background-color 0.3s, border-color 0.3s; } /* === Link with Arrow === */ .qa-arrow-link, a.qa-arrow-link { display: inline-block; position: relative; font-size: var(--qa-t-meta-fs); font-weight: var(--qa-t-meta-fw); letter-spacing: var(--qa-t-meta-ls); color: var(--qa-s-heading); text-transform: uppercase; padding: 0 24px 2px 0; margin-top: -5px; } .qa-arrow-link::before, .qa-arrow-link::after { content: ''; position: absolute; background: var(--qa-s-heading); transition: transform 0.3s; } .qa-arrow-link::before { width: calc(100% - 24px); height: 2px; bottom: 0; transform-origin: 0 50%; } .qa-arrow-link::after { content: ''; width: 16px; height: 16px; background: var(--qa-s-heading); display: block; right: 0; top: 6px; -webkit-mask-repeat: no-repeat; -webkit-mask-size: contain; -webkit-mask-position: center; mask-repeat: no-repeat; mask-size: contain; mask-position: center; -webkit-mask-image: var(--icon-arrow-explore); mask-image: var(--icon-arrow-explore); transform-origin: 0% 100%; } /* === Icon Link === */ .qa-icon-link { display: inline-flex; align-items: center; gap: 16px; } .qa-icon-link .qa-icon-link-content { transition: transform 0.3s; will-change: transform; margin-top: 4px; text-align: left; } .qa-icon-link .qa-icon-link-content:first-child { text-align: right; } .qa-icon-link h6 { margin: 0; } .qa-icon-link .qa-label { margin: 6px 0 0 0; display: block; } .qa-icon-link .qa-icon-wrap { width: 80px; height: 80px; position: relative; display: flex; justify-content: center; align-items: center; transition: background-color 0.3s; background-color: transparent; border-radius: var(--qa-small-br); } .qa-icon-wrap::before { content: ''; left: 0; top: 0; right: 0; bottom: 0; border: 2px solid var(--qa-s-heading); border-radius: inherit; position: absolute; display: block; transition: opacity 0.3s; will-change: opacity; } .qa-icon-link i { transition: transform 0.3s; } /* === Square Button === */ .qa-square-button { aspect-ratio: 1/1; display: flex; justify-content: center; align-items: center; position: relative; color: var(--qa-s-accented-text); background: var(--qa-s-accent); border-radius: var(--qa-small-br); border: 1px solid var(--qa-s-border-accent); transition: background-color 0.3s; cursor: pointer; width: 80px; height: 80px; } .qa-square-button span.qa-icon { width: 24px; height: 24px; transition: transform 0.2s; will-change: transform; } /* === Price Card === */ .qa-price-card-item { display: grid; grid-template-rows: subgrid; grid-row: span 2; row-gap: var(--stg-large-gap); position: relative; } .qa-price { font-family: var(--qa-t-heading-ff); font-weight: var(--qa-t-heading-fw); color: var(--qa-s-heading); font-size: var(--qa-t-h3-fs); font-size: var(--qa-t-h3-fs); letter-spacing: var(--qa-t-h3-ls); line-height: var(--qa-t-h3-lh); margin: -10px 0 26px -3px; } /* === Marquee === */ .qa-marquee { background: var(--qa-s-accent); min-width: 100%; overflow: hidden; max-width: max-content; } .qa-marquee-inner { display: flex; justify-content: flex-start; align-items: center; flex-wrap: nowrap; width: max-content; will-change: transform; } .qa-marquee.is-init .qa-marquee-inner { animation: marquee_scroll 5s infinite linear; } .qa-marquee-inner-wrap { display: flex; justify-content: flex-start; flex-wrap: nowrap; width: max-content; } .qa-marquee-list { padding: 0; margin: 0; display: flex; justify-content: flex-start; align-items: center; flex-wrap: nowrap; width: max-content; } .qa-marquee-list li { list-style: none; margin: 0; padding: 0; white-space: nowrap; display: flex; align-items: center; } .qa-marquee-list li::before { content: ''; width: 8px; height: 8px; display: block; margin: var(--stg-large-gap); border-radius: 2px; outline: 4px solid var(--qa-s-heading); transform: translateY(-2px) rotate(45deg); } /* === Counter Block === */ .qa-counter { display: grid; grid-template-rows: subgrid; grid-row: span 2; row-gap: var(--stg-small-gap); position: relative; text-align: center; padding: var(--stg-large-gap) var(--stg-small-gap); } .qa-counter-number { font-family: var(--qa-t-heading-ff); font-weight: var(--qa-t-heading-fw); font-size: var(--qa-t-h1-fs); letter-spacing: var(--qa-t-h1-ls); line-height: var(--qa-t-h1-lh); color: var(--qa-s-heading); } .qa-counter-number::before { content: attr(data-prefix); } .qa-counter-number::after { content: attr(data-suffix); } /* Small Style */ .qa-counter.qa-small-counter { padding: 0; text-align: left; row-gap: 2px; } .qa-small-counter .qa-counter-number { font-size: var(--qa-t-h3-fs); font-size: var(--qa-t-h3-fs); letter-spacing: var(--qa-t-h3-ls); line-height: var(--qa-t-h3-lh); } /* === Porftolio Grid Card === */ .qa-portfolio-card { padding: var(--stg-small-gap); border-radius: var(--qa-default-br); } .qa-portfolio-card-image { transition: transform 0.3s; will-change: transform; contain: paint; aspect-ratio: 1/1; border-radius: var(--qa-small-br); } .qa-portfolio-card-image .st-lazy-wrapper { border-radius: var(--qa-small-br); } .qa-portfolio-card-image img, .qa-portfolio-card-image video { border-radius: unset; object-fit: cover; width: 100%; height: 100%; } .qa-portfolio-card-footer { display: flex; width: 100%; justify-content: space-between; align-items: center; padding: var(--stg-small-gap) 0 9px 0; } .qa-portfolio-card-title { min-height: 24px; align-self: flex-end; } .qa-portfolio-card-title h6 { margin: 0; } .qa-portfolio-card .qa-icon { transform-origin: 0% 100%; width: 24px; height: 24px; transition: transform 0.3s; margin-right: var(--stg-xs-gap); margin-top: var(--stg-xs-gap); } .qa-portfolio-card > a { position: absolute; left: 0; top: 0; right: 0; bottom: 0; display: block; border-radius: var(--qa-small-br); } /* === Portfolio Short List === */ .qa-portfolio-short-item { position: relative; padding: var(--stg-xs-gap); border-radius: var(--qa-small-br); display: flex; align-items: center; justify-content: flex-start; } .qa-portfolio-thmb { width: 88px; height: 88px; border-radius: var(--qa-xs-br); overflow: hidden; margin-right: var(--stg-gap); box-shadow: 0 4px 8px var(--qa-s-box-shadow); } .qa-portfolio-thmb img { width: 100%; height: 100%; object-fit: cover; display: block; border-radius: 0; } .qa-portfolio-short-item .qa-icon { position: absolute; top: calc(50% - 12px); right: var(--stg-gap); width: 24px; height: 24px; transform-origin: 0 100%; transition: transform 0.3s; will-change: transform; } .qa-portfolio-short-item a { position: absolute; border-radius: inherit; left: 0; top: 0; right: 0; bottom: 0; } .qa-portfolio-short-more { position: relative; padding: var(--stg-gap); border-radius: var(--qa-small-br); color: var(--qa-s-accented-text); background: var(--qa-s-accent); border: 1px solid var(--qa-s-border-accent); } .qa-portfolio-short-item span.qa-meta, .qa-portfolio-short-more .qa-label { display: block; margin-bottom: 4px; margin-top: -4px; } /* === Testimonials Grid Card === */ .qa-tetimonials-card { display: grid; grid-template-rows: subgrid; grid-row: span 2; row-gap: var(--stg-gap); } .qa-tetimonials-card-descr { margin-top: -4px; } .qa-tetimonials-card-footer { display: flex; justify-content: space-between; align-items: flex-end; margin-bottom: -4px; } .qa-tetimonials-card-name h6 { margin: 0; } [class*='qa-tetimonials-stars'] { display: block; position: relative; width: 76px; height: 12px; opacity: 0.5; margin-bottom: 8px; } [class*='qa-tetimonials-stars']::before, [class*='qa-tetimonials-stars']::after { content: ''; height: 12px; background: var(--qa-s-heading); -webkit-mask-repeat: repeat-x; -webkit-mask-size: contain; -webkit-mask-position: left; mask-repeat: repeat-x; mask-size: contain; mask-position: left; position: absolute; left: 0; top: 0; } [class*='qa-tetimonials-stars']::before { -webkit-mask-image: var(--icon-star-empty); mask-image: var(--icon-star-empty); z-index: 1; width: 100%; } [class*='qa-tetimonials-stars']::after { -webkit-mask-image: var(--icon-star-full); mask-image: var(--icon-star-full); z-index: 3; } .qa-tetimonials-stars1::after { width: 20%; } .qa-tetimonials-stars2::after { width: 40%; } .qa-tetimonials-stars3::after { width: 60%; } .qa-tetimonials-stars4::after { width: 80%; } .qa-tetimonials-stars5::after { width: 100%; } /* === Carousel Card === */ .qa-carousel { border-radius: var(--qa-xs-br); } .qa-fullscreen-page .qa-carousel-wrapper { position: relative; height: calc(100svh - var(--st-header-height) - var(--st-footer-height)); } .qa-fullscreen-page .qa-carousel { top: 50%; transform: translateY(-50%); } .qa-fullscreen-page .qa-carousel.swiper { overflow: visible; } .qa-carousel-card { padding: var(--stg-small-gap); } .qa-carousel-card-image { transition: transform 0.3s; will-change: transform; contain: paint; border-radius: var(--qa-xs-br); } .qa-carousel-card-image img, .qa-carousel-card-image video { border-radius: unset } .qa-carousel-card-footer { display: flex; width: 100%; justify-content: space-between; align-items: center; padding: var(--stg-small-gap) 0 9px 0; } .qa-carousel-card-title { min-height: 24px; align-self: flex-end; } .qa-carousel-card-title h6 { margin: 0; } .qa-carousel-card .qa-icon { transform-origin: 0% 100%; width: 24px; height: 24px; transition: transform 0.3s; margin-right: var(--stg-xs-gap); margin-top: var(--stg-xs-gap); } .qa-carousel-card > a { position: absolute; left: 0; top: 0; right: 0; bottom: 0; display: block; border-radius: var(--qa-small-br); } /* === List with Preview === */ .qa-list-with-preview { display: flex; justify-content: space-between; gap: var(--stg-gap); } .qa-list-with-preview[data-preview-position="right"] { flex-direction: row-reverse; } .qa-list-with-preview > div { width: 50%; } .qa-lwp-media { position: relative; overflow: hidden; border-radius: var(--qa-default-br); display: flex; flex-direction: row; flex-wrap: nowrap; width: 100%; } .qa-lwp-media img, .qa-lwp-media video { width: 100%; height: auto; min-width: 100%; object-position: center; } .qa-lwp-media img, .qa-lwp-media video { transition: clip-path 0.3s; position: relative; border-radius: unset; } .qa-lwp-media img.is-active, .qa-lwp-media video.is-active { animation: lwp_active 0.3s ease-in-out; } .qa-lwp-roster { display: flex; flex-direction: column; gap: var(--stg-gap); } .qa-lwp-item { transition: background-color 0.2s, border-color 0.2s; position: relative; border-radius: var(--qa-default-br); } .qa-lwp-item .qa-accent { transition: color 0.2s; } .qa-lwp-item a { position: absolute; left: 0; top: 0; right: 0; bottom: 0; border-radius: inherit; } .qa-lwp-roster img { display: none; } .qa-list-with-preview[data-preview-position="right"] .qa-lwp-media img.is-active, .qa-list-with-preview[data-preview-position="right"] .qa-lwp-media video.is-active { animation: lwp_active_r 0.3s ease-in-out; } /* === Carousel (Swiper) === */ .qa-carousel { --swiper-gap: var(--stg-gap); } .qa-dots .swiper-pagination-bullet { background: var(--qa-s-heading); } .qa-dots .swiper-pagination-bullet-active { background: var(--qa-s-heading); } .qa-dots.swiper-pagination { position: static; bottom: auto; left: auto; margin: var(--stg-gap) auto 0 auto; transform: none!important; height: 12px; } .qa-dots .swiper-pagination-bullet { width: 12px; height: 12px; } /* === Detailed List === */ .qa-detailed-list { margin: 0; padding: 0; position: relative; } .qa-detailed-list li { list-style: none; margin: 0; padding: 0; display: flex; justify-content: space-between; padding: var(--stg-gap) 0 calc(1px + var(--stg-gap)) 0; position: relative; margin: 0 calc(-0.5 * var(--stg-gap)); } .qa-detailed-list::before, .qa-detailed-list li::before, .qa-detailed-list li::after { content: ''; position: absolute; width: 100%; display: block; } .qa-detailed-list::before, .qa-detailed-list li::after { left: calc(-0.5 * (100vw - var(--stg-container-width))); bottom: 0; height: 1px; background: var(--qa-c-border-gradient); width: 100vw; } .qa-detailed-list::before { bottom: auto; top: 0; } .qa-detailed-list li::before { height: 100%; background: radial-gradient(ellipse, var(--qa-s-heading) 0%, transparent 75%) no-repeat bottom center; background-size: 100% 200%; top: 0; left: 0; opacity: 0; transition: opacity 0.3s; will-change: opacity; } .qa-detailed-list li > div { margin: 0 calc(0.5 * var(--stg-gap)); } .qa-detailed-list li a { position: absolute; left: 0; top: 0; bottom: 0; right: 0; display: block; } .qa-detailed-list-title { min-width: calc(33.333% - var(--stg-gap)); max-width: calc(33.333% - var(--stg-gap)); } .qa-detailed-list-title > * { margin-top: 0; } .qa-detailed-list-description { min-width: calc(66.666% - 2 * var(--stg-gap) - 80px); max-width: calc(66.666% - 2 * var(--stg-gap) - 80px); } .qa-detailed-list-button { width: 80px; height: 80px; border: 2px solid var(--qa-s-heading); border-radius: var(--qa-small-br); display: flex; justify-content: center; align-items: center; transition: background-color 0.3s, border-color 0.3s; } .qa-detailed-list-button span.qa-icon { width: 24px; height: 24px; } /* === Image Box === */ .qa-image-box:not(:last-child) { margin-bottom: var(--stg-large-gap); } .qa-image-box-head { display: flex; justify-content: space-between; align-items: center; margin-bottom: var(--stg-small-gap); } .qa-image-box-head img { max-width: 80px; height: auto; display: block; border-radius: var(--qa-xs-br); } /* === Icon Box === */ .qa-icon-box { display: grid; grid-template-rows: subgrid; grid-row: span 2; row-gap: var(--stg-xl-gap); position: relative; } .qa-icon-box .qa-box-icon { width: 64px; height: 64px; border-radius: var(--qa-small-br); display: flex; justify-content: center; align-items: center; position: absolute; right: var(--stg-gap); top: var(--stg-gap); } .qa-icon-box i { width: 32px; height: 32px; } .qa-icon-box .qa-box-icon::before { content: ''; position: absolute; left: 0; top: 0; bottom: 0; right: 0; border: 2px solid var(--qa-s-heading); border-radius: inherit; background-color: transparent; } .qa-icon-box h4 { padding-right: calc(64px + var(--stg-gap)); margin: 0; } .qa-icon-box .qa-large-text { margin: 0; } /* === Grid More Masked === */ .qa-grid-more-masked { --masked-border-radius: var(--qa-small-br); --masked-inner-radius: var(--qa-default-br); position: relative; } .qa-grid-more-masked a { position: absolute; left: 0; top: 0; right: 0; bottom: 0; border-radius: var(--qa-small-br); } .qa-grid-more-masked .qa-masked-media p { padding-right: 96px; } /* === Price Table Card === */ .qa-price-table h6, .qa-price-table > p { margin-bottom: var(--stg-gap); } .qa-price-wrapper { background: radial-gradient(ellipse at center top, var(--qa-s-backlight) 0%, transparent) no-repeat; margin: 0 calc(-1 * var(--stg-gap)) var(--stg-gap) calc(-1 * var(--stg-gap)); padding: var(--stg-gap); width: calc(100% + 2 * var(--stg-gap)); position: relative; display: flex; flex-direction: column; align-items: center; } .qa-price-wrapper::before, .qa-price-table ul.qa-marked-list::after, .qa-price-wrapper::after { content: ''; width: 100%; height: 1px; background: var(--qa-c-border-gradient); position: absolute; left: 0; } .qa-price-wrapper::before { top: 0; } .qa-price-table ul.qa-marked-list::after, .qa-price-wrapper::after { bottom: 0; } .qa-price-wrapper > .qa-label { margin-bottom: 5px; } .qa-price-wrapper > h2 { margin-bottom: -4px; } .qa-price-table > .qa-label { color: var(--qa-s-heading); opacity: 1; margin-bottom: var(--stg-small-gap); } .qa-price-table ul.qa-marked-list { margin-bottom: var(--stg-gap); padding-bottom: var(--stg-gap); position: relative; } .qa-price-table ul.qa-marked-list li:last-child { margin: 0; } /* === FAQ List === */ .qa-faq-list { display: flex; flex-direction: column; gap: var(--stg-gap); } .qa-faq-list hr { margin-top: 0; margin-bottom: 0; } /* === Toggles === */ .qa-toggles-item { cursor: pointer; } .qa-toggles-item--title { display: block; position: relative; } .qa-toggles-item--title .qa-label { margin: -4px 0 8px 0; display: block; } .qa-toggles-item--title sup { display: inline-block; margin: 0 2px; transform: translateY(-6px); } .qa-toggles-item--title h4 { margin-bottom: 4px; padding-right: 64px; display: flex; justify-content: flex-start; gap: 8px; align-items: flex-start; } .qa-toggles-item--title i.qa-icon { position: absolute; right: 0; top: calc(50% - 16px); margin: 0; width: 32px; height: 32px; transform: rotate(-90deg); transition: transform 0.3s; will-change: transform; } .is-active .qa-toggles-item--title .qa-icon { transform: rotate(0deg) translate(0, 12px); } .qa-toggles-item--content { padding-top: calc(2 * var(--stg-gap)); position: relative; cursor: default; } .qa-toggles-item--content::after { content: ''; width: 100%; height: 1px; background: var(--qa-c-border-gradient); position: absolute; left: 0; top: var(--stg-gap); } .qa-toggles-item--content span { margin-bottom: var(--stg-small-gap); display: block; } /* === Swiper Slider === */ .qa-slider-wrapper { position: relative; } .qa-slider-wrapper svg { position: absolute; left: 0; top: 0; width: 0; height: 0; pointer-events: none; opacity: 0; } .qa-slider { border-radius: var(--qa-default-br); position: relative; } .qa-slider-wrapper .qa-slider { border-radius: 0; } .qa-slider:not([data-effect="coverflow"]) img, .qa-slider:not([data-effect="coverflow"]) video { border-radius: 0; } .qa-slider-nav { position: absolute; z-index: 22; } /* Masked Block Navigation */ .qa-slider-nav.qa-masked-content { display: flex; width: 160px; height: 80px; } .qa-slider-nav.qa-masked-content a { width: 64px; height: 64px; margin: 16px 0 0 16px; display: flex; justify-content: center; align-items: center; position: relative; border-radius: var(--qa-small-br); transition: background-color 0.3s; } .qa-slider-nav.qa-masked-content a::before { content: ''; display: block; position: absolute; left: 0; top: 0; bottom: 0; right: 0; border-radius: inherit; border: 2px solid var(--qa-s-heading); z-index: 3; transition: opacity 0.3s; will-change: opacity; } .qa-slider-nav.qa-masked-content span.qa-icon { width: 16px; height: 16px; position: relative; z-index: 5; transition: transform 0.3s; will-change: transform; } /* Side by Side Navigation */ .qa-slider-nav.on-sides { pointer-events: none; left: 0; width: 100%; top: calc(50% - 48px); display: flex; justify-content: space-between; --masked-border-radius: var(--qa-default-br); --masked-inner-radius: var(--qa-xl-br); } .qa-slider-nav.on-sides a { pointer-events: all; width: 64px; height: 96px; display: block; position: relative; display: flex; justify-content: center; align-items: center; } .qa-slider-nav.on-sides a span.qa-icon { width: 24px; height: 24px; background: var(--qa-s-heading); transition: transform 0.3s; will-change: transform; } /* Content */ .qa-slider .swiper-slide.has-content { --masked-border-radius: var(--qa-default-br); --masked-inner-radius: var(--qa-large-br); } .qa-slider .qa-slide-content { position: absolute; bottom: 0; } .qa-slider .qa-slide-content-inner { padding: var(--stg-gap) var(--stg-large-gap); transition: transform 0.3s; will-change: transform; } .qa-slide-content > a { position: absolute; display: block; left: 0; top: 0; bottom: 0; right: 0; } .qa-slide-post-title { display: flex; flex-direction: column; justify-content: center; align-items: center; } .qa-slide-post-title .qa-meta { opacity: 0.5; margin-bottom: var(--stg-xs-gap); } /* === Fullscreen Slider === */ .qa-fullscreen-page .qa-slider-wrapper { top: var(--st-header-height); width: calc(100% - 2 * var(--stg-small-gap)); height: calc(100svh - var(--st-header-height) - var(--st-footer-height)); margin: 0 var(--stg-small-gap); overflow: hidden; } .qa-fullscreen-page .qa-slider-media .st-lazy-wrapper { position: absolute; left: 0; top: 0; right: 0; bottom: 0; } .qa-fullscreen-page .qa-slider { width: 100%; height: inherit } .qa-fullscreen-page .qa-slider img, .qa-fullscreen-page .qa-slider video { width: 100%; height: 100%; object-fit: cover; object-position: center; border-radius: 0; } .qa-fullscreen-page .qa-slider .swiper-slide { height: 100%; position: relative; } .qa-fullscreen-page .qa-slider-media { position: absolute; left: 0; top: 0; bottom: 0; right: 0; } /* === Portfolio Next Post === */ .qa-next-post.qa-icon-link { gap: var(--stg-gap); } .qa-next-post h2 { font-size: var(--qa-t-h1-fs); letter-spacing: var(--qa-t-h1-ls); line-height: var(--qa-t-h1-lh); margin: var(--qa-t-h1-margin); margin-bottom: 0; } .qa-next-post h6 { opacity: 0.75; margin: 0 0 var(--stg-xs-gap) 0; } .qa-next-post .qa-icon-link-content { text-align: right; } .qa-next-post.qa-icon-link .qa-icon-wrap { width: 160px; height: 160px; border-radius: var(--qa-large-br); } .qa-next-post .qa-icon { width: 48px; height: 48px; } .qa-next-post .qa-icon-wrap::before { border: 4px solid var(--qa-s-heading); } /* === Bento Grid Block === */ .qa-bento-grid { display: grid; grid-template-columns: repeat(4, 1fr); grid-template-rows: repeat(2, 1fr); grid-gap: var(--stg-gap); grid-auto-columns: 1fr; grid-auto-rows: 1fr; grid-auto-flow: column; max-width: 100%; } .qa-bento-grid img { max-width: 100%; height: auto; } .qa-bento-grid .is-medium { overflow: hidden; } .qa-bento-grid .is-small { aspect-ratio: 1; } /* Type 01 */ .qa-bento-grid .is-large:first-child { grid-area: 1 / 1 / 3 / 3; } .qa-bento-grid .is-medium:nth-child(2) { grid-area: 1 / 3 / 1 / 5; } /* Type 02 */ .qa-bento-grid .is-medium:last-child { grid-area: 2 / 3 / 2 / 5; } /* Type 03 */ .qa-bento-grid .is-medium:first-child { grid-area: 1 / 1 / 2 / 3; } .qa-bento-grid .is-large:last-child { grid-area: 1 / 3 / 3 / 5; } /* Type 04 */ .qa-bento-grid .is-medium:nth-child(3) { grid-area: 2 / 1 / 3 / 3; } /* Inner Elements */ .qa-bento-grid > div { position: relative; } .qa-bento-grid > div, .qa-bento-grid .qa-block { border-radius: var(--qa-default-br); } .qa-bento-grid div:has(img) { padding: 0; contain: paint; } .qa-bento-grid img { width: 100%; height: 100%; object-fit: cover; border-radius: inherit; } .qa-bento-grid h1, .qa-bento-grid h2 { margin-bottom: 0; } .qa-bento-grid > div > ul { display: flex; flex-direction: column; align-items: flex-start; justify-content: space-between; } .qa-bento-grid .qa-marked-list { margin: 0 } /* === Meta List === */ .qa-meta-list { display: flex; flex-direction: column; min-height: 100%; justify-content: space-between; align-items: flex-start; padding: 0; margin: 0; } .qa-meta-list li { padding: 0; margin: 0; list-style: none; } .qa-meta-list li span { display: block; } /* Hack for Safari */ @supports (-webkit-appearance:none) and (stroke-color:transparent) { .qa-meta-list { min-height: calc(100% - 2 * var(--stg-gap)); } } /* === Masked CTA === */ .qa-masked-cta .qa-cta-form { display: flex; justify-content: space-between; align-items: flex-end; gap: var(--stg-gap); padding: var(--stg-large-gap); background: var(--qa-s-accent); } .qa-masked-cta button { background: var(--qa-s-heading); border-color: var(--qa-s-heading); border-radius: var(--qa-default-br); padding: calc(1.5 * var(--stg-gap)) calc(1.5 * var(--stg-large-gap)); } .qa-masked-cta button span { background: var(--qa-s-accent); width: 32px; height: 32px; } .qa-cta-title { font-family: var(--qa-t-heading-ff); font-weight: var(--qa-t-heading-fw); font-size: var(--qa-t-h1-fs); letter-spacing: var(--qa-t-h1-ls); line-height: var(--qa-t-h1-lh); color: var(--qa-s-heading); margin-bottom: var(--stg-large-gap); } .qa-masked-cta input { background: var(--qa-s-border); color: var(--qa-s-heading); font-family: var(--qa-t-heading-ff); font-weight: var(--qa-t-heading-fw); font-size: var(--qa-t-h2-fs); letter-spacing: var(--qa-t-h2-ls); line-height: 1; border-radius: var(--qa-default-br); padding: var(--stg-gap); padding-top: calc(var(--stg-gap) - 4px); } .qa-masked-cta input:focus { border-color: var(--qa-s-border); } .qa-masked-cta input::-webkit-input-placeholder { opacity: 1; color: var(--qa-s-heading); } .qa-masked-cta input::-moz-placeholder { opacity: 1; color: var(--qa-s-heading); } .qa-masked-cta input::-ms-input-placeholder { opacity: 1; color: var(--qa-s-heading); } .qa-masked-cta-content { text-align: right; width: 350px; } .qa-masked-cta-content p { display: block; padding: 0 0 var(--stg-d-gap) var(--stg-d-gap); } /* === Member Contacts === */ .qa-member-contacts-list { display: flex; flex-direction: column; align-items: flex-start; justify-content: flex-start; gap: var(--stg-small-gap); } .qa-member-contacts-list a { font-family: var(--qa-t-heading-ff); font-weight: var(--qa-t-heading-fw); color: var(--qa-s-heading); font-size: var(--qa-t-h6-fs); letter-spacing: var(--qa-t-h6-ls); line-height: var(--qa-t-h6-lh); } .qa-member-contacts .qa-socials-list { margin-top: var(--stg-gap); } .qa-member-contacts .qa-socials-list a { width: 80px; height: 80px; border-radius: var(--qa-small-br); } .qa-member-contacts .qa-socials-list a::before { border: 2px solid var(--qa-s-heading); } .qa-member-contacts .qa-socials-list a i { width: 40px; height: 40px; } /* === Infinite List === */ body:has(.qa-infinite-list) .qa-backlight { display: none; } .qa-infinite-list-wrap { position: fixed; left: 0; top: 0; z-index: 11; width: 100%; height: 100%; overflow: hidden; cursor: grab; } .qa-infinite-list-wrap.is-grabbed { cursor: grabbing; } .qa-infinite-list { opacity: 0; position: absolute; left: 0; top: 0; pointer-events: none; } .qa-infinite-scroll { width: var(--stg-container-width); margin: 0 auto; position: relative; z-index: 15; } .qa-infinite-list-item { display: flex; justify-content: space-between; align-items: center; position: relative; padding: 30px 0 35px 0; transition: opacity 0.3s; } .qa-infinite-list-item::before { content: ''; position: absolute; width: 100%; display: block; height: 100%; background: radial-gradient(ellipse, var(--qa-s-heading) 0%, transparent 75%) no-repeat bottom center; background-size: 100% 200%; top: 0; left: 0; opacity: 0; transition: opacity 0.3s; will-change: opacity; } .qa-infinite-list-item::after { content: ''; width: 100vw; height: 1px; display: block; background: var(--qa-c-border-gradient); position: absolute; bottom: 0; left: calc(-0.5 * (100vw - var(--stg-container-width))); } .qa-infinite-list-item a { position: absolute; left: -65px; top: 0; width: calc(100% + 130px); height: 100%; z-index: 5; display: block; } .qa-infinite-list-title { transition: transform 0.3s; will-change: transform; } .qa-infinite-list-item .qa-meta { display: block; margin-bottom: 7px; } .qa-infinite-list-preview { position: absolute; width: 96px; height: 96px; border-radius: var(--qa-small-br); right: calc(100% + 28px); top: calc(50% - 48px); background: no-repeat center; background-size: cover; pointer-events: none; opacity: 0; transition: opacity 0.3s; } .qa-infinite-list-preview video { width: 100%; height: 100%; object-fit: cover; display: block; border-radius: 50%; } .qa-infinite-list-icon { width: 80px; height: 80px; display: block; border-radius: var(--qa-small-br); display: flex; justify-content: center; align-items: center; position: relative; } .qa-infinite-list-icon span { position: relative; z-index: 5; transition: transform 0.3s; } .qa-infinite-list-icon::before, .qa-infinite-list-icon::after { content: ''; position: absolute; left: 0; top: 0; bottom: 0; right: 0; border-radius: inherit; will-change: opacity; transition: opacity 0.3s; } .qa-infinite-list-icon::before { z-index: 3; border: 2px solid var(--qa-s-heading); opacity: 1; } .qa-infinite-list-icon::after { background: var(--qa-s-accent); opacity: 0; } .qa-infinite-list-bgs { pointer-events: none; opacity: 0.15; } .qa-infinite-list-bgs, .qa-infinite-list-bgs > div { position: absolute; left: 0; top: 0; width: 100%; height: 100%; z-index: 0; overflow: hidden; } .qa-infinite-list-bgs > div { background: no-repeat center; background-size: cover; will-change: opacity, transform; transition: opacity 0.5s, transform 0.5s; transform: scale(1.05); opacity: 0; z-index: 1; } .qa-infinite-list-bgs > div.is-active { opacity: 1; transform: scale(1); z-index: 2; } .qa-infinite-list-bgs > div video { width: 100%; height: 100%; object-fit: cover; display: block; } /* === Column Listing Item === */ .qa-column-item:not(:last-child) { margin-bottom: var(--stg-large-gap); } .qa-column-item.qa-masked-block { --masked-inner-radius: var(--qa-large-br); } .qa-column-item-content { padding: var(--stg-gap) var(--stg-gap) 0 0; position: relative; display: flex; justify-content: space-between; align-items: center; min-width: calc(0.33 * var(--stg-container-width)); } .qa-column-item-title { padding-left: var(--stg-small-gap); margin-right: var(--stg-gap); transform: translateY(-4px); transition: transform 0.3s; } .qa-column-item-title span { margin-bottom: 8px; display: block; transition: transform 0.3s; } .qa-column-item-title h4 { margin-bottom: 0; transition: transform 0.3s; } .qa-column-item-content .qa-icon-wrap { position: relative; width: 80px; height: 80px; border-radius: var(--qa-small-br); display: flex; justify-content: center; align-items: center; transition: background-color 0.3s; } .qa-column-item-content .qa-icon-wrap::before { transition: opacity 0.3s; will-change: opacity; } .qa-column-item a { position: absolute; left: 0; top: 0; right: 0; bottom: 0; border-radius: var(--qa-default-br); z-index: 7; } /* === Grid CTA === */ .qa-masked-content { max-width: 35%; position: absolute; bottom: 0; right: 0; } .qa-masked-content:has(.qa-square-button) { max-width: 50%; } .qa-grid-cta-media { padding: var(--stg-large-gap); position: absolute; left: 0; top: 0; right: 0; bottom: 0; } .qa-masked-cta-content p { padding: 0 0 var(--stg-d-gap) var(--stg-d-gap); display: block; text-align: right; } .qa-bento-grid .qa-masked-content p { padding: var(--stg-d-gap) 0 0 var(--stg-d-gap); } .qa-grid-cta .is-medium { display: flex; align-items: center; text-align: center; justify-content: center; } .qa-grid-cta .qa-square-button { width: 100%; height: 100%; border-radius: var(--qa-default-br); } .qa-grid-cta .qa-square-button span { width: 80px; height: 80px; } .qa-grid-cta-heading { font-family: var(--qa-t-heading-ff); font-weight: var(--qa-t-heading-fw); color: var(--qa-s-heading); font-size: var(--qa-t-h1-fs); letter-spacing: var(--qa-t-h1-ls); line-height: var(--qa-t-h1-lh); margin: var(--qa-t-h1-margin); } /* === CTA with Image === */ .stg-cta-with-image { --this-spacing: var(--qa-section-gap); padding: var(--this-spacing) 0; } .stg-cta-with-image > div { position: relative; } [class*='stg-col-'] > div.qa-offset-image { --this-offset: calc(-0.5 * (100vw - var(--stg-container-width))); width: calc(50% - var(--this-offset)); top: calc(-1 * var(--this-spacing)); bottom: calc(-1 * var(--this-spacing)); position: absolute; background-position: right; } [class*='stg-col-']:first-child > div.qa-offset-image { left: var(--this-offset); border-radius: 0 var(--qa-default-br) var(--qa-default-br) 0; } [class*='stg-col-']:last-child > div.qa-offset-image { right: var(--this-offset); border-radius: var(--qa-default-br) 0 0 var(--qa-default-br); } .qa-cta-form-title { font-family: var(--qa-t-heading-ff); font-weight: var(--qa-t-heading-fw); color: var(--qa-s-heading); font-size: var(--qa-t-h1-fs); letter-spacing: var(--qa-t-h1-ls); line-height: var(--qa-t-h1-lh); } .qa-cta-text { padding: calc(var(--stg-gap) + var(--stg-large-gap)) 0; } .qa-cta-icon { position: relative; } .qa-cta-icon, .qa-cta-icon::before, .qa-cta-icon::after { background-color: var(--qa-s-text-accent); border-radius: 4px; width: 8px; height: 64px; display: block; } .qa-cta-icon::before, .qa-cta-icon::after { content: ''; position: absolute; left: 0; top: 0; } .qa-cta-icon::before { transform: rotate(120deg); } .qa-cta-icon::after { transform: rotate(240deg); } /* === Right Click Protection === */ .qa-rcp-overlay { position: fixed; left: 0; top: 0; width: 100%; height: 100%; z-index: 333; } .qa-rcp-overlay { z-index: 3; background-color: var(--qa-s-body-bg); opacity: 0.9; } .qa-rcp-container { z-index: 5; position: absolute; left: calc(50% - 0.5 * var(--stg-container-width)); top: 50%; width: var(--stg-container-width); text-align: center; transition: transform 0.3s; will-change: transform; transform: translateY(0%); pointer-events: none; } .rcp-show .qa-rcp-container { transform: translateY(-50%); } /** ============== 10. PHOTOSWIPE ============== */ .pswp__img { border-radius: var(--qa-default-br); } .pswp__ui { width: 100%; height: 100%; position: relative; pointer-events: none; } .pswp--open .pswp__ui button { pointer-events: all; } .pswp__button, .pswp__ui--fit .pswp__top-bar button.pswp__button { width: 60px; height: 60px; border-radius: var(--qa-small-br); background: var(--qa-s-nav); display: flex; justify-content: center; align-items: center; transition: background-color 0.3s; } .pswp__button::before, .pswp__ui--fit .pswp__top-bar button.pswp__button::before, .pswp__button::after, .pswp__ui--fit .pswp__top-bar button.pswp__button::after { content: ''; position: absolute; display: block; } .pswp__button::before, .pswp__ui--fit .pswp__top-bar button.pswp__button::before { position: absolute; left: 0; top: 0; bottom: 0; right: 0; border: 2px solid var(--qa-s-heading); border-radius: inherit; transition: opacity 0.3s; } .pswp__button::after, .pswp__ui--fit .pswp__top-bar button.pswp__button::after { -webkit-mask-repeat: no-repeat; -webkit-mask-size: contain; -webkit-mask-position: center; mask-repeat: no-repeat; mask-size: contain; mask-position: center; background: var(--qa-s-heading); width: 16px; height: 16px; transition: transform 0.3s; } button.pswp__button.pswp__button--close, .pswp__top-bar button.pswp__button, .pswp__ui--fit .pswp__top-bar button.pswp__button { right: 64px; top: 48px; position: absolute; } button.pswp__button.pswp__button--close::after, .pswp__ui--fit .pswp__top-bar button.pswp__button::after { -webkit-mask-image: var(--icon-cross); mask-image: var(--icon-cross); width: 14px; height: 14px; } .qa-pswp-prev, .qa-pswp-next { position: absolute; top: calc(50% - 20px); } .qa-pswp-prev { left: 64px; } button.pswp__button.qa-pswp-prev::after { -webkit-mask-image: var(--icon-chevron-left); mask-image: var(--icon-chevron-left); } button.pswp__button.qa-pswp-next::after { -webkit-mask-image: var(--icon-chevron-right); mask-image: var(--icon-chevron-right); } .qa-pswp-next { right: 64px; } .pswp__preloader { top: calc(50% - 22px); } .qa-pswp-media--video { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); pointer-events: all; } .qa-pswp-media--video video { width: 100%; height: auto; border-radius: var(--qa-default-br); } /** ================ 11. HOVER STATES ================ */ @media (hover:hover) { a:hover { color: var(--qa-s-heading); } /* --- PSWP Lightbox --- */ .pswp__button:hover::after { transform: scale(1.2); } .pswp__button:hover::before, .pswp__ui--fit .pswp__top-bar button.pswp__button:hover::before { opacity: 0.15; } .pswp__button:hover, .pswp__ui--fit .pswp__top-bar button.pswp__button:hover { background-color: var(--qa-s-accent); } .qa-lightbox-link > .st-lazy-wrapper, .qa-lightbox-link > img { transition: scale 0.3s; } .qa-lightbox-link:hover > .st-lazy-wrapper, .qa-lightbox-link:hover > img { scale: 1.02; } /* --- Forms and Fields --- */ input[type="button"]:hover, input[type="reset"]:hover, input[type="submit"]:hover, button:not([class*='pswp']):hover, a.qa-button:hover { background-color: var(--qa-button-hover-bg); } a.qa-button.is-secondary:hover, .qa-square-button.is-secondary:hover { background: var(--qa-s-accent); border-color: var(--qa-s-border-accent); } a.qa-button.is-secondary:hover { background: var(--qa-s-border); } /* --- Main Menu --- */ ul.main-menu li:hover > a { color: var(--qa-c-menu-hover); } ul.main-menu li.menu-item-has-children:hover > a::after { background-color: var(--qa-c-menu-hover); } ul.sub-menu li:hover::before { opacity: 1; } nav.qa-nav ul.sub-menu li:hover::before { opacity: 1; } /* --- Footer --- */ #qa-footer .qa-menu-widget a:hover, .qa-menu-widget ul li:hover::before { opacity: 1; } .qa-socials-list a:hover { background-color: var(--qa-s-accent); } .qa-socials-list a:hover::before { opacity: 0.15; } /* --- Block --- */ .qa-block:hover::after { opacity: 0.75; } .qa-block:hover::before { opacity: 1; } /* --- Links --- */ .qa-tags-list li a:hover { background-color: var(--qa-s-accent); border-color: var(--qa-s-border-accent); } .qa-arrow-link:hover::before { transform: scale(0, 1); } .qa-arrow-link:hover::after { transform: scale(1.2, 1.2); } /* --- Icon Link --- */ .qa-icon-link:hover i { transform: scale(1.2); } .qa-icon-link:hover .qa-icon-wrap { background-color: var(--qa-s-accent); } .qa-icon-link:hover .qa-icon-wrap::before { opacity: 0.15; } .qa-icon-link:hover .qa-icon-link-content:first-child { transform: translateX(calc(-1 * var(--stg-xs-gap))); } .qa-icon-link:hover .qa-icon-link-content:last-child { transform: translateX(var(--stg-xs-gap)); } .qa-square-button:hover span.qa-icon { transform: scale(1.2); } /* --- Portfolio --- */ .qa-portfolio-card:hover .qa-icon { transform: scale(1.2, 1.2); } .qa-portfolio-card:hover .qa-portfolio-card-image { transform: scale(1.01); } .qa-portfolio-short-item:hover .qa-icon { transform: scale(1.2); } .qa-carousel-card:hover .qa-icon { transform: scale(1.2, 1.2); } .qa-carousel-card:hover .qa-carousel-card-image { transform: scale(1.01); } .qa-detailed-list li:hover::before { opacity: 0.05; } .qa-detailed-list li:has(a):hover .qa-detailed-list-button { background: var(--qa-s-accent); border-color: var(--qa-s-border-accent); } .qa-grid-more-masked:hover .qa-square-button.is-secondary { background: var(--qa-s-accent); border-color: var(--qa-s-border-accent); } .qa-grid-more-masked:hover .qa-square-button span.qa-icon { transform: scale(1.2); } /* --- Slider --- */ .qa-slider-nav.qa-masked-content a:hover span.qa-icon { transform: scale(1.2); } .qa-slider-nav.qa-masked-content a:hover { background-color: var(--qa-s-accent); } .qa-slider-nav.qa-masked-content a:hover::before { opacity: 0.15; } .qa-slider-nav.on-sides a.qa-slider-next:hover span.qa-icon { transform: translateX(10px) } .qa-slider-nav.on-sides a.qa-slider-prev:hover span.qa-icon { transform: translateX(-10px) } .qa-slide-content:has(a):hover .qa-slide-content-inner { transform: scale(1.1); } .qa-masked-cta button:hover { background: var(--qa-s-heading-fade); } /* --- Infinite List --- */ .qa-infinite-list-item:hover::before { opacity: 0.05; } .qa-infinite-list-item:hover .qa-infinite-list-preview { opacity: 1; } .qa-infinite-list-item:hover .qa-infinite-list-icon::before { opacity: 0.15; } .qa-infinite-list-item:hover .qa-infinite-list-icon::after { opacity: 1; } .qa-infinite-list-item:hover .qa-infinite-list-icon span { transform: scale(1.1); } /* --- Column List --- */ .qa-column-item-content:hover .qa-icon-wrap { background-color: var(--qa-s-accent); } .qa-column-item-content:hover .qa-icon-wrap::before { opacity: 0.15; } .qa-column-item-content:hover .qa-icon-wrap span.qa-icon { transform: scale(1.2); } .qa-column-item-content:hover .qa-column-item-title span { transform: translateX(calc(-1 * var(--stg-xs-gap))); } .qa-column-item-content:hover .qa-column-item-title h4 { transform: translateX(var(--stg-xs-gap)); } } @media (hover:none) { .qa-backlight { display: none; } .qa-block::before { opacity: 0.5; } .qa-block::after { opacity: 0.75; } .qa-toggles-item:not(.is-active)::after { opacity: 0; } .qa-infinite-list-bgs { display: none; } .qa-infinite-list-item { padding-left: calc(96px + var(--stg-gap)); } .qa-infinite-list-preview { opacity: 1; right: auto; left: 0; } } /** ============== 12. ANIMATIONS ============== */ @keyframes sta_spin { 0% { transform: rotate(0); } 100% { transform: rotate(360deg); } } @keyframes sta_shake { 0% { transform: translateX(0); } 10% { transform: translateX(-10px); } 30% { transform: translateX(10px); } 50% { transform: translateX(-10px); } 70% { transform: translateX(10px); } 90% { transform: translateX(-10px); } 100% { transform: translateX(0); } } /* === Marquee === */ @keyframes marquee_scroll { 0% { transform: translateX(0); } 100% { transform: translateX(-50%); } } /* === List with Preview === */ @keyframes lwp_active { 0% { clip-path: inset(0% 0% 0% 100% round var(--qa-default-br)); } 100% { clip-path: inset(0% 0% 0% 0% round var(--qa-default-br)); } } @keyframes lwp_active_r { 0% { clip-path: inset(0% 100% 0% 0% round var(--qa-default-br)); } 100% { clip-path: inset(0% 0% 0% 0% round var(--qa-default-br)); } } /* === Entrance Animations === */ :root { --stea-move: var(--stg-gap); --stea-zoom-in: 0.9; --stea-zoom-out: 1.1; --stea-duration: 0.5s; } [data-split-appear] { --stea-move: 0.5cap; } [data-split-appear].qa-line-overflow:not(.is-done) .line { overflow: hidden; } [data-split-appear].setting-up [data-appear] { transition: unset!important; } [data-unload*='fade-'].is-unloading, [data-unload*='zoom-'].is-unloading, [data-appear*='fade-']:not(.setting-up), [data-appear*='zoom-']:not(.setting-up) { transition: opacity var(--stea-duration), transform var(--stea-duration); will-change: opacity, transform; } [data-unload*='fade-'].is-unloading, [data-unload*='zoom-'].is-unloading, [data-appear*='fade-'], [data-appear*='zoom-'] { opacity: 0; } [data-appear*="zoom-"].in-view, [data-appear*="fade-"].in-view { opacity: 1; transform: scale(1) translate(0,0); } [data-unload="zoom-out"].is-unloading, [data-appear="zoom-in"], [data-appear="fade-zoom"] { transform: scale(var(--stea-zoom-in)); } [data-unload="fade-down"].is-unloading, [data-appear="fade-up"] { transform: translateY(var(--stea-move)); } [data-unload="fade-up"].is-unloading, [data-appear="fade-down"] { transform: translateY(calc(-1 * var(--stea-move))); } [data-unload="fade-right"].is-unloading, [data-appear="fade-left"] { transform: translateX(var(--stea-move)); } [data-unload="fade-left"].is-unloading, [data-appear="fade-right"] { transform: translateX(calc(-1 * var(--stea-move))); } [data-unload="fade-down-right"].is-unloading, [data-appear="fade-up-left"] { transform: translate(var(--stea-move), var(--stea-move)); } [data-unload="fade-down-left"].is-unloading, [data-appear="fade-up-right"] { transform: translate(calc(-1 * var(--stea-move)), var(--stea-move)); } [data-unload="fade-up-right"].is-unloading, [data-appear="fade-down-left"] { transform: translate(var(--stea-move), calc(-1 * var(--stea-move))); } [data-unload="fade-up-left"].is-unloading, [data-appear="fade-down-right"] { transform: translate(calc(-1 * var(--stea-move)), calc(-1 * var(--stea-move))); } [data-unload="zoom-out-down"].is-unloading, [data-appear="zoom-in-up"] { transform: translateY(var(--stea-move)) scale(var(--stea-zoom-in)); } [data-unload="zoom-out-up"].is-unloading, [data-appear="zoom-in-down"] { transform: translateY(calc(-1 * var(--stea-move))) scale(var(--stea-zoom-in)); } [data-unload="zoom-out-right"].is-unloading, [data-appear="zoom-in-left"] { transform: translateX(var(--stea-move)) scale(var(--stea-zoom-in)); } [data-unload="zoom-out-left"].is-unloading, [data-appear="zoom-in-right"] { transform: translateX(calc(-1 * var(--stea-move))) scale(var(--stea-zoom-in)); } [data-unload="zoom-out-down-right"].is-unloading, [data-appear="zoom-in-up-left"] { transform: translate(var(--stea-move), var(--stea-move)) scale(var(--stea-zoom-in)); } [data-unload="zoom-out-down-left"].is-unloading, [data-appear="zoom-in-up-right"] { transform: translate(calc(-1 * var(--stea-move)), var(--stea-move)) scale(var(--stea-zoom-in)); } [data-unload="zoom-out-up-right"].is-unloading, [data-appear="zoom-in-down-left"] { transform: translate(var(--stea-move), calc(-1 * var(--stea-move))) scale(var(--stea-zoom-in)); } [data-unload="zoom-out-up-left"].is-unloading, [data-appear="zoom-in-down-right"] { transform: translate(calc(-1 * var(--stea-move)), calc(-1 * var(--stea-move))) scale(var(--stea-zoom-in)); } [data-unload="fade-zoom"].is-unloading, [data-unload="zoom-in"].is-unloading, [data-appear="zoom-out"] { transform: scale(var(--stea-zoom-out)); } [data-unload="zoom-in-down"].is-unloading, [data-appear="zoom-out-up"] { transform: translateY(var(--stea-move)) scale(var(--stea-zoom-out)); } [data-unload="zoom-in-up"].is-unloading, [data-appear="zoom-out-down"] { transform: translateY(calc(-1 * var(--stea-move))) scale(var(--stea-zoom-out)); } [data-unload="zoom-in-right"].is-unloading, [data-appear="zoom-out-left"] { transform: translateX(var(--stea-move)) scale(var(--stea-zoom-out)); } [data-unload="zoom-in-left"].is-unloading, [data-appear="zoom-out-right"] { transform: translateX(calc(-1 * var(--stea-move))) scale(var(--stea-zoom-out)); } [data-unload="zoom-in-down-right"].is-unloading, [data-appear="zoom-out-up-left"] { transform: translate(var(--stea-move), var(--stea-move)) scale(var(--stea-zoom-out)); } [data-unload="zoom-in-down-left"].is-unloading, [data-appear="zoom-out-up-right"] { transform: translate(calc(-1 * var(--stea-move)), var(--stea-move)) scale(var(--stea-zoom-out)); } [data-unload="zoom-in-up-right"].is-unloading, [data-appear="zoom-out-down-left"] { transform: translate(var(--stea-move), calc(-1 * var(--stea-move))) scale(var(--stea-zoom-out)); } [data-unload="zoom-in-up-left"].is-unloading, [data-appear="zoom-out-down-right"] { transform: translate(calc(-1 * var(--stea-move)), calc(-1 * var(--stea-move))) scale(var(--stea-zoom-out)); } html { scroll-behavior: smooth; }