/* Theme Name: Extendable Theme URI: https://github.com/extendify/extendable Author: Extendify Author URI: https://extendify.com Description: Extendable is a distinct, dynamic block theme designed as a canvas for your next online venture. Sporting multiple style variations, Extendable is the most expressive block theme yet. Go fresh, bold, bohemian or minimal — with a single click. Requires at least: 6.6 Tested up to: 7.1 Requires PHP: 7.4 Version: 2.1.9 License: GNU General Public License v2 or later License URI: http://www.gnu.org/licenses/gpl-2.0.html Text Domain: extendable Tags: one-column, custom-colors, custom-menu, custom-logo, e-commerce, editor-style, featured-images, full-site-editing, block-patterns, rtl-language-support, sticky-post, threaded-comments Extendable is a derivative work of the code from the Twenty Twenty-Two WordPress Theme, which is licensed GPLv2. Extendable WordPress Theme, Copyright (C) 2021-2025 Extendify Inc. Extendable therefore is also distributed under the terms of the GNU GPL. */ /* Fallback for deprecate variables. ---------------------------------------------------------------------------- */ :root { --wp--custom--spacing--small: var(--wp--preset--spacing--30, clamp(1.5rem, 5vw, 2rem)); --wp--custom--spacing--medium: var(--wp--preset--spacing--50, clamp(2.5rem, 8vw, 4rem)); --wp--custom--spacing--large: var(--wp--preset--spacing--60, clamp(2.5rem, 8vw, 6rem)); --wp--custom--spacing--outer: max(1.25rem, 4vw); --wp--preset--spacing--80: min(8rem, 12vw); } /* * A color-scheme meta otherwise lets OS dark mode restyle inputs and scrollbars. */ :root { color-scheme: only light; } /* * Smooth scrolling */ html { scroll-behavior: smooth; } /* * Font smoothing. * This is a niche setting that will not be available via Global Styles. * https://github.com/WordPress/gutenberg/issues/35934 */ body { -moz-osx-font-smoothing: var(--wp--custom--typography--font-smoothing--moz, auto); -webkit-font-smoothing: var(--wp--custom--typography--font-smoothing--webkit, auto); } /* * Text and navigation link styles. * Necessary until the following issue is resolved in Gutenberg: * https://github.com/WordPress/gutenberg/issues/27075 */ a { text-decoration-style: var(--wp--custom--elements--link--static--text-decoration-style, solid); text-decoration-thickness: var(--wp--custom--elements--link--text-decoration-thickness, 1px); text-underline-offset: var(--wp--custom--elements--link--text-underline-offset, 0.25ch); } a:hover, a:focus { text-decoration-style: var(--wp--custom--elements--link--interactive--text-decoration-style, dashed); } :where(.wp-site-blocks *:focus) { outline-width: 1px; outline-style: solid; } a:active { text-decoration: none; } /* * Navigation Block */ @media (min-width: 600px) { .site-logo-title { display: none; } .wp-block-navigation__responsive-container.is-menu-open:not(.disable-default-overlay) .wp-block-navigation__responsive-container-content .wp-block-navigation-item, .wp-block-navigation__responsive-container.is-menu-open:not(.disable-default-overlay) .wp-block-navigation__responsive-container-content .wp-block-navigation__container, .wp-block-navigation__responsive-container.is-menu-open:not(.disable-default-overlay) .wp-block-navigation__responsive-container-content .wp-block-page-list { align-items: flex-start !important; } } @media (max-width: 600px) { .has-modal-open .wp-block-navigation__responsive-container.is-menu-open:not(.disable-default-overlay) .wp-block-navigation__responsive-container-content .wp-block-navigation-item, .has-modal-open .wp-block-navigation__responsive-container.is-menu-open:not(.disable-default-overlay) .wp-block-navigation__responsive-container-content .wp-block-navigation__container, .has-modal-open .wp-block-navigation__responsive-container.is-menu-open:not(.disable-default-overlay) .wp-block-navigation__responsive-container-content .wp-block-page-list { align-items: flex-start !important; } } .wp-block-navigation__responsive-container.has-modal-open.is-menu-open .site-logo-title { display: flex; flex-wrap: nowrap; max-width: 100%; align-items: center; gap: 0.5rem; padding-bottom: var(--wp--preset--spacing--30); position: relative; padding-inline-end: 52px; } .wp-block-navigation__responsive-container.has-modal-open.is-menu-open .site-logo-title::after { content: ""; position: absolute; left: calc(-1 * var(--wp--preset--spacing--30)); right: calc(-1 * var(--wp--preset--spacing--30)); bottom: 0; height: 1px; background: #8080801d; } .wp-block-navigation__responsive-container.has-modal-open.is-menu-open .site-logo-title img { max-height: 42px !important; height: auto !important; width: auto !important; } .wp-block-navigation__responsive-container.has-modal-open.is-menu-open .site-logo-title .site-title { font-size: 1.25rem; font-weight: 700; color: var(--wp--preset--color--foreground); text-transform: uppercase; letter-spacing: -0.02em; box-sizing: border-box; line-height: 1.15; } .wp-block-navigation__responsive-container.is-menu-open:not(.disable-default-overlay) .wp-block-navigation__responsive-container-content { padding-top: var(--wp--preset--spacing--30); } .has-modal-open .wp-block-navigation__responsive-container-close { background-color: var(--wp--preset--color--tertiary); padding: 0.625rem; border-radius: 100%; top: -2.5px !important; } .has-modal-open .wp-block-navigation__responsive-container.is-menu-open:not(.disable-default-overlay) .wp-block-navigation__responsive-container-content .wp-block-navigation__container { gap: 0 !important; width: 100%; } .has-modal-open .wp-block-navigation__responsive-container.is-menu-open:not(.disable-default-overlay) .wp-block-navrigation__containe, .has-modal-open .wp-block-navigation__responsive-container.is-menu-open:not(.disable-default-overlay) .wp-block-navigation__container ul { row-gap: 0.75rem !important; width: -webkit-fill-available; max-width: 100%; } .has-modal-open .wp-block-navigation__responsive-container.is-menu-open:not(.disable-default-overlay) .wp-block-navigation__responsive-container-content > ul.wp-block-navigation__container > li.wp-block-navigation-item:not(.wp-block-navigation__submenu-container) { border-bottom: 1px solid #8080801d; padding-top: 0.75rem; padding-bottom: 0.75rem; width: -webkit-fill-available; max-width: 100%; } .has-modal-open .wp-block-navigation__responsive-container.is-menu-open:not(.disable-default-overlay) .wp-block-navigation__responsive-container-content .has-child .wp-block-navigation__submenu-container { padding: 0.75rem 0.75rem 0 0.75rem !important; gap: 0.75rem !important; } .has-modal-open .wp-block-navigation__responsive-container:not(.disable-default-overlay) .wp-block-navigation__responsive-dialog ul.wp-block-navigation__container > li:not(.wp-block-navigation__submenu-container) > a.wp-block-navigation-item__content { font-size: 1.25rem; font-weight: 600; } .has-modal-open .wp-block-navigation__responsive-container:not(.disable-default-overlay) .wp-block-navigation__submenu-container { padding-top: 0.75rem !important; } .has-modal-open .wp-block-navigation__responsive-container:not(.disable-default-overlay) .wp-block-navigation__responsive-dialog ul.wp-block-navigation__container .wp-block-navigation-submenu .wp-block-navigation-item a { font-size: 1rem !important; } /* * When the responsive navigation modal opens (WordPress sets .has-modal-open * on ), suppress every property on the modal's ancestor chain that * creates a containing block for position:fixed descendants — otherwise * the modal is trapped inside the header instead of overlaying the viewport. * * Two rules here: * * 1) Broad ancestor coverage — the header itself plus any element inside * it that contains the responsive dialog. Handles transform/filter on * any header variant (overlay, glass, floating-pill, future ones). * * 2) Animation override — mirrors the selectors used by the floating-pill * scroll animations so we can match their specificity. Those animations * use !important + a deep selector to apply translate/backdrop-filter * via keyframes; without a same-or-higher-specificity override our broad * rule loses the cascade and the animation keeps trapping the modal. */ html.has-modal-open header.wp-block-template-part, html.has-modal-open header.wp-block-template-part :has(.wp-block-navigation__responsive-dialog) { backdrop-filter: none !important; transform: none !important; translate: none !important; filter: none !important; animation: none !important; } html.has-modal-open body:has(.entry-content > .ext-hero-section.ext-hero-section--full-screen:first-child) header.wp-block-template-part:has(.ext-header-sticky.ext-header-sticky--floating-pill.ext-header-glass) .ext-header-sticky.ext-header-sticky--floating-pill.ext-header-glass, html.has-modal-open body:not(:has(.entry-content > .ext-hero-section.ext-hero-section--full-screen:first-child)) header.wp-block-template-part:has(.ext-header-sticky.ext-header-sticky--floating-pill.ext-header-glass) .ext-header-sticky.ext-header-sticky--floating-pill.ext-header-glass { animation: none !important; backdrop-filter: none !important; translate: none !important; } /* * Mobile nav-extras: cloned by navigation-customization.js into the * responsive menu dialog so phone / CTA / social aren't visible in the * cramped top bar on small screens. We target the specific modifier * classes (.ext-nav-extras-phone, -btn, -social) rather than the * .ext-nav-extras wrapper, because some header parts use the wrapper * class around the nav block itself. * * On desktop the dialog is rendered inline (it's only "modal-shaped" * when the hamburger opens it), so the cloned extras must stay hidden * until WordPress sets .has-modal-open on . */ @media (max-width: 781px) { body:not(:has(.wp-block-navigation__responsive-container.disable-default-overlay)) header.wp-block-template-part :is(.ext-nav-extras-phone, .ext-nav-extras-btn, .ext-nav-extras-social):not(.ext-nav-extras-mobile *) { display: none; } /* Collapse the .ext-nav-extras wrapper too when its only children are the extras (no nav inside) — otherwise the empty wrapper holds a flex slot and the hamburger stays stuck in the middle instead of moving to the end of the row. */ header.wp-block-template-part .ext-nav-extras:not(:has(nav, .wp-block-navigation)) { display: none; } } .ext-nav-extras-mobile { display: none; } .has-modal-open .wp-block-navigation__responsive-dialog .ext-nav-extras-mobile { display: flex; flex-direction: column; align-items: stretch; gap: var(--wp--preset--spacing--20); margin-top: var(--wp--preset--spacing--30); } .has-modal-open .wp-block-navigation__responsive-dialog .ext-nav-extras-mobile .wp-block-button { width: 100%; } .has-modal-open .wp-block-navigation__responsive-dialog .ext-nav-extras-mobile .wp-block-button__link { display: block; text-align: center; width: 100%; } /* Match the nav-link typography (see rule above) on the cloned phone CTA. */ .has-modal-open .wp-block-navigation__responsive-dialog .ext-nav-extras-mobile .ext-nav-extras-phone, .has-modal-open .wp-block-navigation__responsive-dialog .ext-nav-extras-mobile .ext-nav-extras-phone a, .has-modal-open .wp-block-navigation__responsive-dialog .ext-nav-extras-mobile .ext-nav-extras-phone p { font-size: 1.25rem !important; font-weight: 600 !important; } /* Bigger, more tappable social icons in the menu. */ .has-modal-open .wp-block-navigation__responsive-dialog .ext-nav-extras-mobile .wp-block-social-link { width: 32px; height: 32px; } .has-modal-open .wp-block-navigation__responsive-dialog .ext-nav-extras-mobile .wp-social-link svg { width: 28px; height: 28px; } .wp-block-navigation .wp-block-navigation-item a:hover, .wp-block-navigation .wp-block-navigation-item a:focus { text-decoration: underline; text-decoration-style: solid; } /* Don't display the homepage in the Page List block, when located inside a navigation element. */ nav .wp-block-pages-list__item.wp-block-navigation-item.menu-item-home { display: none; } /* * Responsive menu container padding. * This ensures the responsive container inherits the same * spacing defined above. This behavior may be built into * the Block Editor in the future. */ .wp-block-navigation__responsive-container.is-menu-open:not(.disable-default-overlay) { padding-top: var(--wp--preset--spacing--30); padding-bottom: var(--wp--preset--spacing--30); padding-right: var(--wp--preset--spacing--30); padding-left: var(--wp--preset--spacing--30); } /* Temporary: WP core ships this padding as a 4-value clamp() shorthand that some browsers fail to parse — re-declare as individual props. */ .wp-block-navigation__responsive-container.is-menu-open:not(.disable-default-overlay) { padding-top: clamp(1rem, var(--wp--style--root--padding-top), 20rem); padding-right: clamp(1rem, var(--wp--style--root--padding-right), 20rem); padding-bottom: clamp(1rem, var(--wp--style--root--padding-bottom), 20rem); padding-left: clamp(1rem, var(--wp--style--root--padding-left), 20rem); } /* * -------------------------------------------------------- * Custom - blocks * -------------------------------------------------------- */ /* Button ----------------------------------------------------------*/ .wp-element-button { transition: background-color 0.15s ease; } .wp-block-button .wp-block-button__link.is-style-outline:not(.has-background):hover, .wp-block-button.is-style-outline > .wp-block-button__link:not(.has-background):hover { background-color: rgba(159, 159, 159, 0.2); } /* Table ----------------------------------------------------------*/ .wp-block-table.is-style-stripes tbody tr:nth-child(odd) { background-color: var(--wp--custom--blocks--core-table--variant-stripes--color--background, var(--wp--preset--color--tertiary)); } /* Template Part Block ----------------------------------------------------------*/ /* Temporary fix until template-part blocks support spacing */ footer.wp-block-template-part:not([style*="margin-top"]) { margin-top: 0; } /* Quote - 'Plain' variation ----------------------------------------------------------*/ blockquote:is(.is-style-plain) { border: none; padding-left: 0; } /* Search Block ----------------------------------------------------------*/ :where(.wp-block-search__button-inside .wp-block-search__inside-wrapper) { border-color: var(--wp--custom--elements--input--border--color); border-radius: var(--wp--custom--elements--button--border--radius); border-width: var(--wp--custom--elements--input--border--width); } :where(.wp-block-search__button-inside .wp-block-search__inside-wrapper) .wp-block-search__input { border-color: transparent; } .wp-block-search .wp-block-search__input { border-radius: var(--wp--custom--elements--button--border--radius); } /* Image ----------------------------------------------------------*/ .wp-block-image[style*="-radius"]:not([style*="overflow"]) { overflow: hidden; } /* * -------------------------------------------------------- * Custom - experimental * -------------------------------------------------------- */ .block-editor-block-list__block.wp-block.is-default-size.wp-block-site-logo .components-resizable-box__container, .wp-block-site-logo.is-default-size img { max-height: 42px !important; height: auto !important; width: auto !important; } /* Ensure default logo works well on light and dark backgrounds ----------------------------------------------------------*/ .wp-block-site-logo img[src*="extendify-demo-"], .wp-block-site-logo img[src*="ext-custom-logo-"] { filter: var(--wp--preset--duotone--primary-foreground); min-width: 40px; } /* * Remove all animations, transitions and smooth scroll * for people that prefer not to see them. */ @media (prefers-reduced-motion: reduce) { html:focus-within { scroll-behavior: auto; } *, *::before, *::after { animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; transition-duration: 0.01ms !important; scroll-behavior: auto !important; } } /* * Matching caret and focus outline colors. */ input, textarea { caret-color: inherit; outline-color: inherit; } /* * Matching input with outline button style. */ :where(.wp-block-post-comments-form) input:not([type="submit"]), :where(.wp-block-post-comments-form) textarea { background-color: var(--wp--preset--color--background); color: var(--wp--preset--color--foreground); border-color: inherit; } /* * Woocommerce temporarily customization until the woo blocks offer support */ .woocommerce-Tabs-panel--description h2, .woocommerce-Reviews-title { font-size: var(--wp--preset--font-size--medium); } .wp-block-button.wc-block-components-product-button { flex-direction: row; flex-wrap: wrap; justify-content: start; gap: 1rem; } .wp-block-button.wc-block-components-product-button a.added_to_cart { margin-top: 0; } .woocommerce-checkout.woocommerce-page header.wp-block-template-part nav.wp-block-navigation { visibility: hidden; } .wp-site-blocks .wp-block-group.woocommerce.product { margin-top: 0; margin-bottom: 0; } .wc-block-product-template__responsive { grid-row-gap: 2rem; } .wc-block-components-product-button__button { z-index: 1; } /* * Adds offset for sticky header overlap */ .sticky-header-offset-container .entry-content > .wp-block-group { scroll-margin-top: var(--wp--preset--spacing--60); } /* * Avoids parent/child color collision when child has no custom background. */ :not(.block-editor-block-preview__content-iframe) .has-tertiary-background-color.has-background [class*="is-style-ext-preset--group--"][class*="item-card-1"]:not(.has-background) { background-color: var(--wp--preset--color--background); } :not(.block-editor-block-preview__content-iframe) .has-tertiary-background-color.has-background [class*="is-style-ext-preset--group--"][class*="item-card-1"]:not(.has-background)::before { background-color: var(--wp--preset--color--background) !important; } :not(.block-editor-block-preview__content-iframe) .has-tertiary-background-color.has-background [class*="is-style-ext-preset--image--"]:not(.has-background)::before { background-color: var(--wp--preset--color--tertiary) !important; } :not(.block-editor-block-preview__content-iframe) .has-tertiary-background-color.has-background [class*="is-style-ext-preset--group--"][class*="item-card-1"]::before, :not(.block-editor-block-preview__content-iframe) .has-tertiary-background-color.has-background [class*="is-style-ext-preset--media-text--"]::before { background-color: var(--wp--preset--color--background) !important; } .block-editor-block-preview__content-iframe [class*="is-style-ext-preset--group--natural-1"][class*="item-card-1"] { background-color: transparent !important; } :root { --grid-vector-bg: url("data:image/svg+xml;base64,PHN2ZyB2aWV3Qm94PSIwIDAgMTQ0MCAxMDI0IiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciPgogIDxnIG9wYWNpdHk9IjAuMDkiIHN0cm9rZT0iY3VycmVudENvbG9yIiBzdHJva2Utb3BhY2l0eT0iMC43IiBzdHJva2Utd2lkdGg9IjEuMjYwNyI+CiAgICA8bGluZSB4MT0iLTUwLjYxNzIiIHkxPSI2MjQuOTk1IiB4Mj0iMTQ2MC45NiIgeTI9IjYyNC45OTUiIC8+CiAgICA8bGluZSB4MT0iLTUwLjYxNzIiIHkxPSI5NDcuNzMzIiB4Mj0iMTQ2MC45NiIgeTI9Ijk0Ny43MzMiIC8+CiAgICA8bGluZSB4MT0iLTUwLjYxNzIiIHkxPSIzMDIuMjU2IiB4Mj0iMTQ2MC45NiIgeTI9IjMwMi4yNTYiIC8+CiAgICA8bGluZSB4MT0iLTUwLjYxNzIiIHkxPSI0NjMuNjI0IiB4Mj0iMTQ2MC45NiIgeTI9IjQ2My42MjQiIC8+CiAgICA8bGluZSB4MT0iLTUwLjYxNzIiIHkxPSI3ODYuMzYyIiB4Mj0iMTQ2MC45NiIgeTI9Ijc4Ni4zNjIiIC8+CiAgICA8bGluZSB4MT0iLTUwLjYxNzIiIHkxPSIxNDAuODg1IiB4Mj0iMTQ2MC45NiIgeTI9IjE0MC44ODUiIC8+CiAgICA8bGluZSB4MT0iLTUwLjYxNzIiIHkxPSI1NDQuMzExIiB4Mj0iMTQ2MC45NiIgeTI9IjU0NC4zMTEiIC8+CiAgICA8bGluZSB4MT0iLTUwLjYxNzIiIHkxPSI4NjcuMDQ5IiB4Mj0iMTQ2MC45NiIgeTI9Ijg2Ny4wNDkiIC8+CiAgICA8bGluZSB4MT0iLTUwLjYxNzIiIHkxPSIyMjEuNTczIiB4Mj0iMTQ2MC45NiIgeTI9IjIyMS41NzMiIC8+CiAgICA8bGluZSB4MT0iLTUwLjYxNzIiIHkxPSIzODIuOTQiIHgyPSIxNDYwLjk2IiB5Mj0iMzgyLjk0IiAvPgogICAgPGxpbmUgeDE9Ii01MC42MTcyIiB5MT0iNzA1LjY4MiIgeDI9IjE0NjAuOTYiIHkyPSI3MDUuNjgyIiAvPgogICAgPGxpbmUgeDE9Ii01MC42MTcyIiB5MT0iNjAuMjAxNyIgeDI9IjE0NjAuOTYiIHkyPSI2MC4yMDE3IiAvPgogICAgPGxpbmUgeDE9IjY0Mi4xMzgiIHkxPSItNDguODQ3NyIgeDI9IjY0Mi4xMzgiIHkyPSIxMTE4LjU2IiAvPgogICAgPGxpbmUgeDE9IjMxOS4zOTgiIHkxPSItNDguODQ3NyIgeDI9IjMxOS4zOTgiIHkyPSIxMTE4LjU2IiAvPgogICAgPGxpbmUgeDE9Ijk2NC44NzQiIHkxPSItNDguODQ3NyIgeDI9Ijk2NC44NzQiIHkyPSIxMTE4LjU2IiAvPgogICAgPGxpbmUgeDE9IjEyODcuNjEiIHkxPSItNDguODQ3NyIgeDI9IjEyODcuNjEiIHkyPSIxMTE4LjU2IiAvPgogICAgPGxpbmUgeDE9IjE1OC4wMjgiIHkxPSItNDguODQ3NyIgeDI9IjE1OC4wMjgiIHkyPSIxMTE4LjU2IiAvPgogICAgPGxpbmUgeDE9IjgwMy41MDQiIHkxPSItNDguODQ3NyIgeDI9IjgwMy41MDQiIHkyPSIxMTE4LjU2IiAvPgogICAgPGxpbmUgeDE9IjQ4MC43NjgiIHkxPSItNDguODQ3NyIgeDI9IjQ4MC43NjgiIHkyPSIxMTE4LjU2IiAvPgogICAgPGxpbmUgeDE9IjExMjYuMjQiIHkxPSItNDguODQ3NyIgeDI9IjExMjYuMjQiIHkyPSIxMTE4LjU2IiAvPgogICAgPGxpbmUgeDE9Ijc3LjM0NTIiIHkxPSItNDguODQ3NyIgeDI9Ijc3LjM0NTEiIHkyPSIxMTE4LjU2IiAvPgogICAgPGxpbmUgeDE9IjcyMi44MjIiIHkxPSItNDguODQ3NyIgeDI9IjcyMi44MjIiIHkyPSIxMTE4LjU2IiAvPgogICAgPGxpbmUgeDE9IjQwMC4wODEiIHkxPSItNDguODQ3NyIgeDI9IjQwMC4wODEiIHkyPSIxMTE4LjU2IiAvPgogICAgPGxpbmUgeDE9IjEwNDUuNTYiIHkxPSItNDguODQ3NyIgeDI9IjEwNDUuNTYiIHkyPSIxMTE4LjU2IiAvPgogICAgPGxpbmUgeDE9IjEzNjguMyIgeTE9Ii00OC44NDc3IiB4Mj0iMTM2OC4zIiB5Mj0iMTExOC41NiIgLz4KICAgIDxsaW5lIHgxPSIyMzguNzE1IiB5MT0iLTQ4Ljg0NzciIHgyPSIyMzguNzE1IiB5Mj0iMTExOC41NiIgLz4KICAgIDxsaW5lIHgxPSI4ODQuMTkyIiB5MT0iLTQ4Ljg0NzciIHgyPSI4ODQuMTkyIiB5Mj0iMTExOC41NiIgLz4KICAgIDxsaW5lIHgxPSI1NjEuNDUxIiB5MT0iLTQ4Ljg0NzciIHgyPSI1NjEuNDUxIiB5Mj0iMTExOC41NiIgLz4KICAgIDxsaW5lIHgxPSIxMjA2LjkzIiB5MT0iLTQ4Ljg0NzciIHgyPSIxMjA2LjkzIiB5Mj0iMTExOC41NiIgLz4KICA8L2c+CiAgPGcgb3BhY2l0eT0iMC41IiBmaWxsPSJjdXJyZW50Q29sb3IiPgogICAgPHJlY3QgeD0iODAzLjU2MyIgeT0iNzg2LjMwNSIgd2lkdGg9IjgwLjIyNjIiIGhlaWdodD0iODAuMjI2MiIgZmlsbC1vcGFjaXR5PSIwLjQiIC8+CiAgICA8cmVjdCB4PSI0MDAuMTQiIHk9Ijc4Ni4zMDUiIHdpZHRoPSI4MC4yMjYyIiBoZWlnaHQ9IjgwLjIyNjIiIGZpbGwtb3BhY2l0eT0iMC4xOCIgLz4KICAgIDxyZWN0IHg9IjExMjYuNzYiIHk9IjIyMi40MyIgd2lkdGg9IjgwLjIyNjIiIGhlaWdodD0iNzkuMDgwMSIgZmlsbC1vcGFjaXR5PSIwLjA4IiAvPgogICAgPHJlY3QgeD0iNDgwLjM2NyIgeT0iNDY0LjIwMyIgd2lkdGg9IjgwLjIyNjIiIGhlaWdodD0iNzkuMDgwMSIgZmlsbC1vcGFjaXR5PSIwLjEzIiAvPgogICAgPHJlY3QgeD0iMTA0NS4zOSIgeT0iMzAyLjY1NiIgd2lkdGg9IjgwLjIyNjIiIGhlaWdodD0iNzkuMDgwMSIgZmlsbC1vcGFjaXR5PSIwLjAzIiAvPgogICAgPHJlY3QgeD0iMzk5Ljk5NCIgeT0iMjIyLjQzIiB3aWR0aD0iODAuMjI2MiIgaGVpZ2h0PSI3OS4wODAxIiBmaWxsLW9wYWNpdHk9IjAuMTMiIC8+CiAgICA8cmVjdCB4PSIxMDQ1LjM5IiB5PSIyMjIuNDMiIHdpZHRoPSI4MC4yMjYyIiBoZWlnaHQ9Ijc5LjA4MDEiIGZpbGwtb3BhY2l0eT0iMC4wOCIgLz4KICAgIDxyZWN0IHg9IjM5OS45OTQiIHk9IjQ2NC4yMDMiIHdpZHRoPSI4MC4yMjYyIiBoZWlnaHQ9Ijc5LjA4MDEiIGZpbGwtb3BhY2l0eT0iMC4xMyIgLz4KICAgIDxyZWN0IHg9IjMxOS45MTQiIHk9Ijc4Ni4zMDUiIHdpZHRoPSI4MC4yMjYyIiBoZWlnaHQ9IjgwLjIyNjIiIGZpbGwtb3BhY2l0eT0iMC4xOCIgLz4KICAgIDxyZWN0IHg9IjMxOS45MTQiIHk9Ijg2Ni41MzEiIHdpZHRoPSI4MC4yMjYyIiBoZWlnaHQ9IjgxLjM3MjMiIGZpbGwtb3BhY2l0eT0iMC4xOCIgLz4KICAgIDxyZWN0IHg9IjE1OC4zMTUiIHk9IjcwNi4wNzgiIHdpZHRoPSI4MC4yMjYyIiBoZWlnaHQ9IjgwLjIyNjIiIGZpbGwtb3BhY2l0eT0iMC4xOCIgLz4KICAgIDxyZWN0IHg9Ijk2NS4xNjIiIHk9IjYwLjgzMiIgd2lkdGg9IjgwLjIyNjIiIGhlaWdodD0iODAuMjI2MiIgZmlsbC1vcGFjaXR5PSIwLjEzIiAvPgogICAgPHJlY3QgeD0iODg0LjA1OSIgeT0iLTE5Ljg1NTUiIHdpZHRoPSI4MC4yMjYyIiBoZWlnaHQ9Ijc5LjUwNjIiIGZpbGwtb3BhY2l0eT0iMC4xMyIgLz4KICAgIDxyZWN0IHg9Ijg4NC4wNTkiIHk9IjYwLjQwMjMiIHdpZHRoPSI4MC4yMjYyIiBoZWlnaHQ9IjgwLjAyODUiIGZpbGwtb3BhY2l0eT0iMC4xMyIgLz4KICAgIDxyZWN0IHg9IjE1OC4zMTUiIHk9IjEzOS45MSIgd2lkdGg9IjgxLjM3MjMiIGhlaWdodD0iODIuNTE4NCIgZmlsbC1vcGFjaXR5PSIwLjE4IiAvPgogICAgPHJlY3QgeD0iNzYuOTQzNCIgeT0iNTkuNjgzNiIgd2lkdGg9IjgxLjM3MjMiIGhlaWdodD0iODAuMjI2MiIgZmlsbC1vcGFjaXR5PSIwLjE4IiAvPgogICAgPHJlY3QgeD0iLTMuMjgzMiIgeT0iNjAuODI4MSIgd2lkdGg9IjgxLjM3MjMiIGhlaWdodD0iODAuMjI2MiIgZmlsbC1vcGFjaXR5PSIwLjE4IiAvPgogICAgPHJlY3QgeD0iNzYuOTQzNCIgeT0iMTM5LjkxIiB3aWR0aD0iODEuMzcyMyIgaGVpZ2h0PSI4Mi41MTg0IiBmaWxsLW9wYWNpdHk9IjAuMTgiIC8+CiAgICA8cmVjdCB4PSI0MDAuMTQxIiB5PSItMjAuNTQzIiB3aWR0aD0iODEuMzcyMyIgaGVpZ2h0PSI4MC4yMjYyIiBmaWxsLW9wYWNpdHk9IjAuMiIgLz4KICAgIDxyZWN0IHg9IjE1OC4zMTUiIHk9IjMwMS41MDgiIHdpZHRoPSI4MC4yMjYyIiBoZWlnaHQ9IjgxLjM3MjMiIGZpbGwtb3BhY2l0eT0iMC4xOCIgLz4KICAgIDxyZWN0IHg9IjExMjYuNzYiIHk9IjcwNi4wNzgiIHdpZHRoPSI4MC4yMjYyIiBoZWlnaHQ9IjgwLjIyNjIiIGZpbGwtb3BhY2l0eT0iMC4xMyIgLz4KICAgIDxyZWN0IHg9IjEyMDYuOTkiIHk9Ijc4Ni4zMDUiIHdpZHRoPSI4MC4yMjYyIiBoZWlnaHQ9IjgwLjIyNjIiIGZpbGwtb3BhY2l0eT0iMC4xMyIgLz4KICA8L2c+Cjwvc3ZnPg=="); } /* * CSS related to prism vibe */ /* * CSS related to wave vibe */ [class*="is-style-ext-preset--group--"][class*="--section"].has-tertiary-background-color:has( + .has-background-background-color > .wp-block-cover.alignfull )::after { content: none !important; } [class*="is-style-ext-preset--group--"][class*="--section"].has-tertiary-background-color:has( + .has-background-background-color > .wp-block-cover.alignfull ) { margin-bottom: 0 !important; } [class*="is-style-ext-preset--group--"][class*="--section"].has-background-background-color:has(.wp-block-cover.alignfull) + .has-tertiary-background-color::before { content: none !important; } [class*="is-style-ext-preset--group--"][class*="--section"].has-background-background-color:has(.wp-block-cover.alignfull) + .has-tertiary-background-color { margin-top: 0 !important; } /* * utilities */ .m-0 { margin: 0 !important; } .z-0 { z-index: 0 !important; } .z-10 { z-index: 10 !important; } .z-20 { z-index: 20 !important; } .z-30 { z-index: 30 !important; } .d-none { display: none; } .d-block { display: block; } @media (min-width: 640px) { .sm-d-none { display: none; } .sm-d-block { display: block; } } @media (min-width: 768px) { .md-d-none { display: none; } .md-d-block { display: block; } } @media (min-width: 1024px) { .lg-d-none { display: none; } .lg-d-block { display: block; } } /* RTL-only fix for Gutenberg Group left justification */ [dir="rtl"] [class*="wp-container-core-group-is-layout-"].ext-is-logical-start.is-content-justification-left > :where(:not(.alignleft):not(.alignright):not(.alignfull)) { margin-inline-start: 0 !important; margin-inline-end: auto !important; } .no-underline, .no-underline a { text-decoration: none; } /* CSS for extendify-agent vibe previews */ .extendify-agent .preview-is-style-ext-preset--group--matrix-1--section .preview-is-style-ext-preset--group--matrix-1--item-card-1--align-center { border: solid 6px color-mix(in oklab, var(--wp--preset--color--foreground) 10%, transparent) !important; } .extendify-agent .preview-is-style-ext-preset--group--wave-1--section { --wave-ratio: 1440 / 80; overflow: visible; } .extendify-agent .preview-is-style-ext-preset--group--wave-1--section .preview-is-style-ext-preset--group--wave-1--item-card-1--align-center { position: relative; overflow: visible; } .extendify-agent .preview-is-style-ext-preset--group--wave-1--section .preview-is-style-ext-preset--group--wave-1--item-card-1--align-center::after { content: ""; position: absolute; width: 150%; left: 50%; transform: translateX(-35%); aspect-ratio: var(--wave-ratio); background-color: var(--wp--preset--color--background); -webkit-mask: var(--wave-mask) no-repeat center / 100% 100%; mask: var(--wave-mask) no-repeat center / 100% 100%; bottom: -1px; pointer-events: none; z-index: 1; } .extendify-agent .preview-is-style-ext-preset--group--wave-1--section .preview-is-style-ext-preset--group--wave-1--item-card-1--align-center::before { content: ""; position: absolute; width: 150%; left: 50%; transform: translateX(-65%) scale(-1, -1); aspect-ratio: var(--wave-ratio); background-color: var(--wp--preset--color--background); -webkit-mask: var(--wave-mask) no-repeat center / 100% 100%; mask: var(--wave-mask) no-repeat center / 100% 100%; top: -1px; pointer-events: none; z-index: 1; } /* * -------------------------------------------------------- * Modular Header System * -------------------------------------------------------- * * Layout (positioning): * - .ext-header-sticky → position: sticky + admin-bar handling * - .ext-header-overlay → hero section overlap (negative margin) * * Appearance: * - .ext-header-glass → static glassmorphism (bg + blur + radius) * - .ext-header--dark → dark color scheme: white text + dark scrim/glass tint * * Behavior: * - .ext-header-sticky--floating-pill → scroll-driven intensification of glass + layout shift * * Compositions: * - ext-header-sticky → just sticky, theme bg * - ext-header-overlay → overlay, transparent * - ext-header-overlay ext-header--dark → overlay + dark scrim + white text * - ext-header-sticky ext-header-glass → static glass header * - ext-header-sticky ext-header-glass ext-header--dark → static dark glass * - ext-header-sticky ext-header-overlay ext-header-glass ext-header-sticky--floating-pill → animated glass over hero * - + ext-header--dark on the above → animated DARK glass over hero */ :root { --ext-header-height: 96px; --ext-header-offset: 1rem; --ext-header-blur-start: 4px; --ext-header-blur-end: 12px; --ext-header-bg-opacity-start: 0.75; --ext-header-bg-opacity-end: 0.95; --ext-header-padding: 1.5rem; --ext-header-animation-distance: 100px; --ext-header-glass-tint-dark: #ffffff; --ext-header-glass-tint-dark-end: #101010; --ext-header-dark-logo-filter: brightness(0) invert(1); } body { timeline-scope: --ext-hero-timeline; } /* =========================================================== Layout: ext-header-sticky =========================================================== */ header.wp-block-template-part:has(.ext-header-sticky) { position: sticky; top: 0; z-index: 12; } /* Default bg for sticky headers without glass. Glass headers leave the wrapper transparent so the inner glass element shows through. */ header.wp-block-template-part:has(.ext-header-sticky):not(:has(.ext-header-glass)):not(.has-background) { background-color: var(--wp--preset--color--background); } body.admin-bar header.wp-block-template-part:has(.ext-header-sticky) { top: var(--wp-admin--admin-bar--position-offset, var(--wp-admin--admin-bar--height, 32px)); } @media (max-width: 782px) { body.admin-bar header.wp-block-template-part:has(.ext-header-sticky) { top:0; } } html:has(.ext-header-sticky) { scroll-padding-top: var(--ext-header-height); } /* =========================================================== Layout: ext-header-overlay (hero overlap) =========================================================== */ body:has(.entry-content > .ext-hero-section.ext-hero-section--full-screen:first-child) header.wp-block-template-part:has(.ext-header-overlay):not(:has(.ext-header-sticky)) { position: relative; top: 0; z-index: 12; } body:has(.ext-header-overlay) .entry-content > .ext-hero-section.ext-hero-section--full-screen:first-child { margin-top: calc(-1 * var(--ext-header-height)) !important; position: relative; z-index: 0; } /* Overlay over hero: wrapper goes transparent so the hero shows through. Reverts to default theme bg once .is-past-hero is added or on subpages without a hero. */ body:has(.entry-content > .ext-hero-section.ext-hero-section--full-screen:first-child) header.wp-block-template-part:has(.ext-header-overlay):not(.is-past-hero):not(:has(.ext-header-glass)) { background-color: transparent; } /* =========================================================== Appearance: ext-header-glass (static glassmorphism) - --ext-header-glass-color-start: tint during the frosted/initial state - --ext-header-glass-color-end: tint at the solid/scrolled state - Static glass shows the end state (most readable) =========================================================== */ .ext-header-glass { --ext-header-glass-color-start: var(--wp--preset--color--background); --ext-header-glass-color-end: var(--wp--preset--color--background); } header.wp-block-template-part:has(.ext-header-glass) .ext-header-glass { background-color: oklch(from var(--ext-header-glass-color-end) l c h / var(--ext-header-bg-opacity-end)); backdrop-filter: blur(var(--ext-header-blur-end)); border-radius: 1rem; } /* =========================================================== Color: ext-header--dark - Sets shared scrim/glass color variable - Wrapper gets white text when used with overlay or glass - Inner blocks reset their colors to inherit =========================================================== */ /* Dark variant only takes effect on pages with a fullscreen hero. On subpages, dark+glass falls back to the light glass defaults. */ body:has(.entry-content > .ext-hero-section.ext-hero-section--full-screen:first-child) .ext-header-glass.ext-header--dark { --ext-header-glass-color-start: var(--ext-header-glass-tint-dark); --ext-header-glass-color-end: var(--ext-header-glass-tint-dark-end); --ext-header-bg-opacity-start: 0.06; --ext-header-bg-opacity-end: 0.85; --ext-header-blur-start: 16px; --ext-header-blur-end: 24px; } body:has(.entry-content > .ext-hero-section.ext-hero-section--full-screen:first-child) header.wp-block-template-part:has(.ext-header-glass.ext-header--dark) .ext-header-glass { border: 1px solid rgb(255 255 255 / 0.12); } body:has(.entry-content > .ext-hero-section.ext-hero-section--full-screen:first-child) header.wp-block-template-part:not(.is-past-hero):has(.ext-header-overlay.ext-header--dark) { color: #fff; } /* Top-fade scrim on the hero's cover block — softer falloff than a header-bound gradient. Flat (non-nested) :has() check on body so the rule reliably matches on hero pages that use an overlay+dark header. Fades out via opacity once the smart-sticky JS adds .is-past-hero on the header, in sync with the header reverting to its default theme appearance. */ body:has(.ext-header-overlay.ext-header--dark) .ext-hero-section--full-screen .wp-block-cover::after { content: ""; position: absolute; inset: 0 0 auto 0; height: calc(var(--ext-header-height) * 3); transition: opacity 300ms ease; background: linear-gradient( to bottom, rgb(0 0 0 / 0.50) 0%, rgb(0 0 0 / 0.25) 50%, rgb(0 0 0 / 0.05) 80%, rgb(0 0 0 / 0) 100% ); pointer-events: none; z-index: 1; } /* Past-hero: fade the scrim out so the hero image returns to its natural look, matching the header reverting to default theme bg + colors. */ body:has(header.wp-block-template-part.is-past-hero) .ext-hero-section--full-screen .wp-block-cover::after { opacity: 0; } body:has(.entry-content > .ext-hero-section.ext-hero-section--full-screen:first-child) header.wp-block-template-part:has(.ext-header-glass.ext-header--dark) { color: #fff; } /* Inner-block dark overrides — fire only on hero pages with a dark backdrop. Overlay+dark drops out at .is-past-hero (header has reverted to default theme). Glass+dark keeps firing past-hero because the glass stays dark via its own animation. */ body:has(.entry-content > .ext-hero-section.ext-hero-section--full-screen:first-child) header.wp-block-template-part:not(.is-past-hero):has(.ext-header-overlay.ext-header--dark) :where(a, button, .wp-block-site-title):not(.has-background, .wp-block-button__link, .cloned-for-mobile, .cloned-for-mobile *), body:has(.entry-content > .ext-hero-section.ext-hero-section--full-screen:first-child) header.wp-block-template-part:has(.ext-header-glass.ext-header--dark) :where(a, button, .wp-block-site-title):not(.has-background, .wp-block-button__link, .cloned-for-mobile, .cloned-for-mobile *) { color: inherit; } body:has(.entry-content > .ext-hero-section.ext-hero-section--full-screen:first-child) header.wp-block-template-part:not(.is-past-hero):has(.ext-header-overlay.ext-header--dark) .wp-social-link:not(.cloned-for-mobile, .cloned-for-mobile *), body:has(.entry-content > .ext-hero-section.ext-hero-section--full-screen:first-child) header.wp-block-template-part:has(.ext-header-glass.ext-header--dark) .wp-social-link:not(.cloned-for-mobile, .cloned-for-mobile *) { color: #fff !important; } /* Phone CTA: force white over the dark hero. Needed because the paragraph carries WP's wp-elements-* link-color rule (preset primary), which beats .has-text-color inheritance on the inner . Drops out at .is-past-hero so the phone reverts to theme. */ body:has(.entry-content > .ext-hero-section.ext-hero-section--full-screen:first-child) header.wp-block-template-part:not(.is-past-hero):has(.ext-header-overlay.ext-header--dark) :is(.ext-nav-extras-phone, .ext-nav-extras-phone a):not(.cloned-for-mobile, .cloned-for-mobile *), body:has(.entry-content > .ext-hero-section.ext-hero-section--full-screen:first-child) header.wp-block-template-part:has(.ext-header-glass.ext-header--dark) :is(.ext-nav-extras-phone, .ext-nav-extras-phone a):not(.cloned-for-mobile, .cloned-for-mobile *) { color: #fff !important; } body:has(.entry-content > .ext-hero-section.ext-hero-section--full-screen:first-child) header.wp-block-template-part:not(.is-past-hero):has(.ext-header-overlay.ext-header--dark) svg:not(.cloned-for-mobile *), body:has(.entry-content > .ext-hero-section.ext-hero-section--full-screen:first-child) header.wp-block-template-part:has(.ext-header-glass.ext-header--dark) svg:not(.cloned-for-mobile *) { fill: currentColor; } body:has(.entry-content > .ext-hero-section.ext-hero-section--full-screen:first-child) header.wp-block-template-part:not(.is-past-hero):has(.ext-header-overlay.ext-header--dark) :is(.wp-block-site-logo, .wp-duotone-primary-foreground):not(.cloned-for-mobile, .cloned-for-mobile *), body:has(.entry-content > .ext-hero-section.ext-hero-section--full-screen:first-child) header.wp-block-template-part:has(.ext-header-glass.ext-header--dark) :is(.wp-block-site-logo, .wp-duotone-primary-foreground):not(.cloned-for-mobile, .cloned-for-mobile *) { filter: var(--ext-header-dark-logo-filter); } /* Nav-extras CTA: white pill + dark text for contrast against the dark hero scrim. Drops out at .is-past-hero so the button returns to its preset styling. */ body:has(.entry-content > .ext-hero-section.ext-hero-section--full-screen:first-child) header.wp-block-template-part:not(.is-past-hero):has(.ext-header-overlay.ext-header--dark) .ext-nav-extras-btn:not(.cloned-for-mobile, .cloned-for-mobile *) .wp-block-button__link, body:has(.entry-content > .ext-hero-section.ext-hero-section--full-screen:first-child) header.wp-block-template-part:has(.ext-header-glass.ext-header--dark) .ext-nav-extras-btn:not(.cloned-for-mobile, .cloned-for-mobile *) .wp-block-button__link { background-color: #fefefe !important; color: #060606 !important; } /* Sticky non-glass headers: smooth shadow/bg transitions (toggle on .is-scrolled / .is-past-hero) */ header.wp-block-template-part:has(.ext-header-sticky):not(:has(.ext-header-glass)) { transition: background-color 300ms ease, box-shadow 300ms ease; } /* Floating-pill: smooth the top change when .is-scrolled toggles, so the header doesn't snap up when scrolling past the admin bar. */ header.wp-block-template-part:has(.ext-header-sticky.ext-header-sticky--floating-pill) { transition: top 300ms ease; } /* Subpage elevation shadow: appears when user scrolls (no hero on the page) */ body:not(:has(.entry-content > .ext-hero-section.ext-hero-section--full-screen:first-child)) header.wp-block-template-part.is-scrolled:has(.ext-header-sticky):not(:has(.ext-header-glass)) { box-shadow: 0 4px 24px -8px rgb(0 0 0 / 0.08); } /* Smart sticky transitions: smooth color/filter changes when toggling .is-past-hero */ header.wp-block-template-part:has(.ext-header--dark) { transition: background-color 300ms ease, color 300ms ease, box-shadow 300ms ease, border-color 300ms ease; } header.wp-block-template-part:has(.ext-header--dark) :where(a, button, .wp-block-site-title, .wp-social-link) { transition: color 300ms ease; } header.wp-block-template-part:has(.ext-header--dark) .wp-block-site-logo { transition: filter 300ms ease; } /* Past-hero: any sticky+overlay gets solid theme bg + elevation shadow. Glass headers are excluded — they manage their own scroll visuals. */ header.wp-block-template-part.is-past-hero:has(.ext-header-sticky.ext-header-overlay):not(:has(.ext-header-glass)) { background-color: var(--wp--preset--color--background); box-shadow: 0 4px 24px -8px rgb(0 0 0 / 0.08); } /* Past-hero on dark variant: also revert white text / inverted logo / forced social color */ header.wp-block-template-part.is-past-hero:has(.ext-header-overlay.ext-header--dark):not(:has(.ext-header-glass)) { color: var(--wp--preset--color--foreground); } header.wp-block-template-part.is-past-hero:has(.ext-header-overlay.ext-header--dark):not(:has(.ext-header-glass)) :where(a, button, .wp-block-site-title):not(.has-background, .wp-block-button__link) { color: inherit; } header.wp-block-template-part.is-past-hero:has(.ext-header-overlay.ext-header--dark):not(:has(.ext-header-glass)) .wp-social-link { color: var(--wp--preset--color--foreground) !important; } header.wp-block-template-part.is-past-hero:has(.ext-header-overlay.ext-header--dark):not(:has(.ext-header-glass)) .wp-block-site-logo { filter: brightness(1) invert(0); } /* =========================================================== Hero timeline (for scroll-driven animations) =========================================================== */ @supports (animation-timeline: scroll()) { .entry-content > .ext-hero-section.ext-hero-section--full-screen:first-child { view-timeline: --ext-hero-timeline block; } } /* =========================================================== Behavior: ext-header-sticky--floating-pill - Layout shift: header wrapper goes transparent + constrained width - When combined with .ext-header-glass, animates glass intensity =========================================================== */ header.wp-block-template-part .ext-header-sticky--floating-pill.ext-animate { opacity: 1 !important; } header.wp-block-template-part:has(.ext-header-sticky.ext-header-sticky--floating-pill) { position: sticky; top: 0; z-index: 12; border-bottom: none; } body:has(.entry-content > .ext-hero-section.ext-hero-section--full-screen:first-child) header.wp-block-template-part:has(.ext-header-sticky.ext-header-sticky--floating-pill) { position: sticky; top: var(--ext-header-offset); max-width: var(--wp--style--global--wide-size); margin-left: auto; margin-right: auto; background-color: transparent; padding-inline: var(--wp--style--root--padding-right) var(--wp--style--root--padding-left); } /* Initial glass state (over hero): override static glass-end with start values */ body:has(.entry-content > .ext-hero-section.ext-hero-section--full-screen:first-child) header.wp-block-template-part:has(.ext-header-sticky.ext-header-sticky--floating-pill.ext-header-glass) .ext-header-sticky.ext-header-sticky--floating-pill.ext-header-glass { background-color: oklch(from var(--ext-header-glass-color-start) l c h / var(--ext-header-bg-opacity-start)); backdrop-filter: blur(var(--ext-header-blur-start)); } body.admin-bar:has(.entry-content > .ext-hero-section.ext-hero-section--full-screen:first-child) header.wp-block-template-part:has(.ext-header-sticky.ext-header-sticky--floating-pill) { top: calc(var(--ext-header-offset) + var(--wp-admin--admin-bar--position-offset, var(--wp-admin--admin-bar--height, 32px))); background-color: transparent; } @media (max-width: 782px) { body.admin-bar:has(.entry-content > .ext-hero-section.ext-hero-section--full-screen:first-child) header.wp-block-template-part:has(.ext-header-sticky.ext-header-sticky--floating-pill) { top: calc(var(--ext-header-offset) + var(--wp-admin--admin-bar--position-offset, var(--wp-admin--admin-bar--height, 46px))); } body.admin-bar:has(.entry-content > .ext-hero-section.ext-hero-section--full-screen:first-child) header.wp-block-template-part.is-scrolled:has(.ext-header-sticky.ext-header-sticky--floating-pill) { top:var(--ext-header-offset); } } @supports (animation-timeline: scroll()) { body:not(:has(.entry-content > .ext-hero-section.ext-hero-section--full-screen:first-child)) header.wp-block-template-part:has(.ext-header-sticky.ext-header-sticky--floating-pill) { max-width: calc(var(--wp--style--global--wide-size) + var(--wp--style--root--padding-right) + var(--wp--style--root--padding-left)); margin-left: auto; margin-right: auto; } @media (prefers-reduced-motion: no-preference) { body:has(.entry-content > .ext-hero-section.ext-hero-section--full-screen:first-child) header.wp-block-template-part:has(.ext-header-sticky.ext-header-sticky--floating-pill.ext-header-glass) .ext-header-sticky.ext-header-sticky--floating-pill.ext-header-glass { animation: ext-header-glass-intensify linear both !important; animation-timeline: --ext-hero-timeline !important; animation-range: exit 0% exit 80% !important; } body:not(:has(.entry-content > .ext-hero-section.ext-hero-section--full-screen:first-child)) header.wp-block-template-part:has(.ext-header-sticky.ext-header-sticky--floating-pill.ext-header-glass) .ext-header-sticky.ext-header-sticky--floating-pill.ext-header-glass { animation: ext-header-glass-intensify-no-hero linear forwards !important; animation-timeline: scroll() !important; animation-range: 0 var(--ext-header-animation-distance) !important; } } } @keyframes ext-header-glass-intensify { from { background-color: oklch(from var(--ext-header-glass-color-start) l c h / var(--ext-header-bg-opacity-start)); backdrop-filter: blur(var(--ext-header-blur-start)); } to { background-color: oklch(from var(--ext-header-glass-color-end) l c h / var(--ext-header-bg-opacity-end)); backdrop-filter: blur(var(--ext-header-blur-end)); box-shadow: 0 14px 28px -10px rgb(0 0 0 / 0.14), 0 -14px 28px -10px rgb(0 0 0 / 0.14); } } @keyframes ext-header-glass-intensify-no-hero { from { background-color: oklch(from var(--ext-header-glass-color-start) l c h / var(--ext-header-bg-opacity-start)); backdrop-filter: blur(var(--ext-header-blur-start)); box-shadow: none; translate: 0 0; max-width: 100%; margin-inline: auto; } to { background-color: oklch(from var(--ext-header-glass-color-end) l c h / var(--ext-header-bg-opacity-end)); backdrop-filter: blur(var(--ext-header-blur-end)); box-shadow: 0 14px 28px -10px rgb(0 0 0 / 0.14), 0 -14px 28px -10px rgb(0 0 0 / 0.14); translate: 0 var(--ext-header-offset); max-width: var(--wp--style--global--wide-size); margin-inline: var(--wp--style--root--padding-right) var(--wp--style--root--padding-left); border-radius: 1rem; } } /* =========================================================== Vibe/gradient fix ----------------------------------------------------------- Vibe block-style variations (e.g. is-style-ext-preset--group--*--header-1--N) paint a background gradient on the header. That gradient fights every over-hero / glass-tint / dark-scrim treatment we apply to overlay or glass headers, because the glass and overlay rules set background-COLOR while the variation sets a background-IMAGE that paints on top. Override the variation's background-image specifically (not the whole `background:` shorthand). That lets each header keep working in its natural design: - overlay non-glass: gets transparent bg over hero, theme bg past hero - glass: gets the glass tint (light by default, dark when --dark is set) On non-overlay / non-glass headers the variation gradient stays as-is. =========================================================== */ .ext-header-overlay[class*="is-style-ext-preset--"], .ext-header-glass[class*="is-style-ext-preset--"] { background-image: none !important; } /* Temporary: a few template parts (e.g. no-title-sticky-header.html) wrap our header in another sticky
. Scope the fix to the three new headers (atlas-beacon, catalina-skyline, ceadar-peak) — they're the only ones using .ext-header-overlay, so older headers that intentionally rely on the wrapper's positioning aren't affected. display: contents removes the wrapper from layout entirely so its bg/border/sticky/box-shadow/ wp-container-* styles don't apply. Remove once the upstream template stops wrapping. */ header:has(> header.wp-block-template-part :where(.ext-header-overlay)) { display: contents; } /* TecxZoo hero uses the original uploaded background image */ .tzx-home>.tzx-hero{position:relative;isolation:isolate;overflow:hidden;background:#f7edf7 url("https://tecxzoo.com/wp-content/uploads/2026/10/Pastel-Glass-Wave-Gradient.png") center center / cover no-repeat!important} .tzx-home>.tzx-hero:before,.tzx-home>.tzx-hero:after{display:none!important} @media(max-width:760px){ .tzx-home>.tzx-hero{background-position:center center;background-size:cover} } .tzx-home>.tzx-hero{position:relative;isolation:isolate;overflow:hidden;background:linear-gradient(105deg,#f8d8ee 0%,#f7e9f4 22%,#fbfbfd 48%,#e5f5fd 70%,#b9e5fb 100%)!important} .tzx-home>.tzx-hero:before{content:"";position:absolute;z-index:-1;inset:0;background:repeating-linear-gradient(90deg,transparent 0,transparent calc(5.2% - 1px),rgba(255,255,255,.55) 5.2%,rgba(255,255,255,.55) calc(5.2% + 1px));pointer-events:none} .tzx-home>.tzx-hero:after{content:"";position:absolute;z-index:-1;left:-8%;right:-8%;top:30%;height:78%;border-radius:0 0 50% 50%;transform:rotate(-2deg);background:linear-gradient(160deg,transparent 0 35%,rgba(255,255,255,.15) 35.2% 42%,rgba(255,255,255,.6) 42.2%,rgba(255,255,255,.16) 42.6% 50%,transparent 50.4%),linear-gradient(155deg,transparent 0 43%,rgba(255,255,255,.35) 43.2% 55%,rgba(255,255,255,.08) 55.2% 62%,transparent 62.4%);border-bottom:1px solid rgba(255,255,255,.55);pointer-events:none} @media(max-width:760px){.tzx-home>.tzx-hero{background:linear-gradient(105deg,#f8d8ee,#faf9fc 49%,#c5eafb)!important}.tzx-home>.tzx-hero:before{background:repeating-linear-gradient(90deg,transparent 0,transparent calc(10% - 1px),rgba(255,255,255,.5) 10%,rgba(255,255,255,.5) calc(10% + 1px))}} /* TecxZoo reference inspired navbar and hero */ .tzx-home{background:#f8f7f5;position:relative} .tzx-home>.tzx-nav{width:calc(100% - 9%);max-width:none;margin:20px auto 0;padding:20px 28px;min-height:88px;border:1px solid rgba(255,255,255,.8);border-radius:22px;background:linear-gradient(105deg,rgba(255,250,253,.91),rgba(255,255,255,.86) 48%,rgba(224,246,255,.88));backdrop-filter:blur(22px);-webkit-backdrop-filter:blur(22px);box-shadow:0 14px 35px rgba(32,48,82,.13);position:relative;z-index:10} .tzx-home>.tzx-nav .tzx-logo{font-size:clamp(22px,2vw,30px);letter-spacing:-1.2px;white-space:nowrap} .tzx-home>.tzx-nav .tzx-links{gap:clamp(16px,2.2vw,34px);font-size:15px} .tzx-home>.tzx-nav .tzx-links a{transition:color .2s} .tzx-home>.tzx-nav .tzx-links a:hover,.tzx-home>.tzx-nav .tzx-links a:focus{color:#1769ed} .tzx-home>.tzx-nav>.tzx-btn{background:transparent;color:#26364a!important;box-shadow:none;padding:12px 14px} .tzx-home>.tzx-nav>.tzx-btn:after{content:"↗";display:grid;place-items:center;width:38px;height:38px;border-radius:50%;background:#3478f6;color:#fff;font-size:18px;margin-left:5px} .tzx-home>.tzx-nav>.tzx-btn:hover{background:rgba(255,255,255,.6)} .tzx-home>.tzx-nav>.tzx-btn{font-size:14px} .tzx-home>.tzx-nav>.tzx-btn:first-letter{color:inherit} .tzx-home>.tzx-hero{width:100%;max-width:none;margin:0;padding:120px 0 105px;background:repeating-linear-gradient(90deg,rgba(255,255,255,0) 0,rgba(255,255,255,0) 5.25%,rgba(255,255,255,.25) 5.3%,rgba(255,255,255,.25) 5.42%),radial-gradient(ellipse at 15% 48%,rgba(244,169,220,.78),transparent 39%),radial-gradient(ellipse at 88% 43%,rgba(132,213,240,.72),transparent 39%),linear-gradient(100deg,#f5e7f1 0%,#f8f7f8 48%,#e3f4f8 100%)} .tzx-home>.tzx-hero .tzx-hero-grid{width:min(1120px,calc(100% - 44px));margin:auto;display:flex;flex-direction:column;text-align:center;gap:12px} .tzx-home>.tzx-hero .tzx-hero-copy{max-width:930px;margin:auto} .tzx-home>.tzx-hero .tzx-kicker{display:none} .tzx-home>.tzx-hero h1{font-size:clamp(48px,5.25vw,86px);line-height:1.08;letter-spacing:-3.5px;margin:0 auto 28px;max-width:1000px;font-weight:750;color:#111827} .tzx-home>.tzx-hero h1 br{display:block} .tzx-home>.tzx-hero h1 .tzx-gradient{display:inline-block;font-family:Georgia,"Times New Roman",serif;font-style:italic;font-weight:400;letter-spacing:-3.4px;background:none;color:#111827;line-height:1.12} .tzx-home>.tzx-hero .tzx-hero-copy>p{font-size:clamp(16px,1.25vw,21px);line-height:1.6;max-width:850px;margin:0 auto;color:#536174} .tzx-home>.tzx-hero .tzx-actions{justify-content:center;margin-top:34px} .tzx-home>.tzx-hero .tzx-btn{background:#2864ee;border-radius:12px;padding:15px 24px;font-size:16px;font-weight:600;box-shadow:none} .tzx-home>.tzx-hero .tzx-btn:hover{background:#174fd1;transform:translateY(-2px)} .tzx-home>.tzx-hero .tzx-btn.alt{display:none} .tzx-home>.tzx-hero .tzx-art{display:none} @media(max-width:760px){ .tzx-home>.tzx-nav{width:calc(100% - 28px);margin-top:12px;min-height:66px;padding:12px 15px;border-radius:17px} .tzx-home>.tzx-nav .tzx-links{display:none} .tzx-home>.tzx-nav>.tzx-btn{padding:7px 0 7px 8px;font-size:12px} .tzx-home>.tzx-nav>.tzx-btn:after{width:34px;height:34px} .tzx-home>.tzx-hero{padding:92px 0 85px;background:repeating-linear-gradient(90deg,transparent 0,transparent 10%,rgba(255,255,255,.25) 10.1%,rgba(255,255,255,.25) 10.5%),radial-gradient(ellipse at 12% 45%,rgba(244,169,220,.72),transparent 45%),radial-gradient(ellipse at 90% 45%,rgba(132,213,240,.7),transparent 45%),linear-gradient(100deg,#f5e7f1,#f8f7f8 48%,#e3f4f8)} .tzx-home>.tzx-hero .tzx-hero-grid{width:calc(100% - 30px)} .tzx-home>.tzx-hero h1{font-size:clamp(38px,10vw,58px);letter-spacing:-2px;margin-bottom:22px} .tzx-home>.tzx-hero h1 .tzx-gradient{letter-spacing:-1.8px} .tzx-home>.tzx-hero .tzx-hero-copy>p{font-size:16px;line-height:1.6} } /* TecxZoo homepage design */ .tzx-home{--blue:#38b9ff;--navy:#152338;--muted:#647184;--cream:#f8f7f3;--line:#e6e9ee;color:var(--navy);font-family:Inter,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;overflow:hidden;background:var(--cream)} .tzx-home *{box-sizing:border-box}.tzx-home a{text-decoration:none}.tzx-wrap{width:min(1160px,calc(100% - 40px));margin:auto}.tzx-nav{display:flex;align-items:center;justify-content:space-between;gap:20px;padding:18px 0}.tzx-logo{font-size:23px;font-weight:800;letter-spacing:-1px;color:var(--navy)}.tzx-logo span{color:#168de0}.tzx-links{display:flex;gap:28px;align-items:center;font-size:13px;font-weight:650}.tzx-links a{color:var(--navy)}.tzx-btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;padding:12px 18px;border-radius:999px;background:var(--navy);color:#fff!important;font-size:13px;font-weight:700;box-shadow:0 7px 18px #15233820;transition:transform .25s,background .25s}.tzx-btn:hover{transform:translateY(-2px);background:#1769b7}.tzx-btn.alt{background:#fff;color:var(--navy)!important;border:1px solid #cdd7e4;box-shadow:none} .tzx-hero{position:relative;padding:76px 0 70px;background:radial-gradient(ellipse at 78% 45%,#b8e5ffb8,transparent 35%),radial-gradient(ellipse at 12% 32%,#f4d8ef9c,transparent 34%),linear-gradient(115deg,#fbf8f7,#f4f9ff 65%,#f9f8f3)}.tzx-hero-grid{display:grid;grid-template-columns:1fr 1fr;align-items:center;gap:30px}.tzx-kicker{font-size:11px;letter-spacing:2px;text-transform:uppercase;color:#2786c9;font-weight:800}.tzx-home h1{font-size:clamp(40px,5.2vw,68px);line-height:.99;letter-spacing:-3px;margin:18px 0 20px;font-weight:800}.tzx-gradient{background:linear-gradient(95deg,#1875dd,#38b9ff 60%,#7a78ed);-webkit-background-clip:text;background-clip:text;color:transparent}.tzx-home p{line-height:1.7;color:var(--muted);font-size:15px}.tzx-actions{display:flex;flex-wrap:wrap;gap:10px;margin-top:25px}.tzx-art{height:350px;position:relative;display:grid;place-items:center;isolation:isolate}.tzx-orb{width:260px;height:260px;border-radius:42% 58% 60% 40%/44% 42% 58% 56%;background:linear-gradient(135deg,#0d67d6 3%,#53c2ff 38%,#e9f7ff 52%,#4c8df2 70%,#8c7bed);box-shadow:inset -20px -20px 38px #124a9b55,inset 12px 14px 30px #ffffffb5,0 30px 70px #368fe94a;transform:rotate(-18deg);animation:tzx-float 7s ease-in-out infinite}.tzx-orb:after{content:"";position:absolute;inset:27%;border-radius:50%;background:var(--cream);box-shadow:inset 8px 10px 24px #6e9acb50}.tzx-chip{position:absolute;padding:15px 17px;border:1px solid #ffffffc9;background:#ffffffd9;backdrop-filter:blur(16px);border-radius:16px;box-shadow:0 15px 38px #2c5c8c18;font-size:12px;font-weight:750}.tzx-chip small{display:block;color:var(--muted);font-weight:500;margin-top:5px}.tzx-chip.one{left:0;top:62px}.tzx-chip.two{right:0;bottom:40px}.tzx-bars{display:flex;gap:5px;align-items:end;height:30px;margin-top:9px}.tzx-bars i{display:block;width:7px;border-radius:4px;background:var(--blue)}.tzx-bars i:nth-child(1){height:12px}.tzx-bars i:nth-child(2){height:19px}.tzx-bars i:nth-child(3){height:25px}.tzx-bars i:nth-child(4){height:30px} .tzx-section{padding:76px 0}.tzx-white{background:#fff}.tzx-head{display:flex;justify-content:space-between;align-items:end;gap:24px;margin-bottom:32px}.tzx-head h2,.tzx-split h2,.tzx-dark h2{font-size:clamp(28px,3.4vw,42px);letter-spacing:-1.6px;line-height:1.08;margin:9px 0 0}.tzx-head p{max-width:390px;margin:0}.tzx-services{display:grid;grid-template-columns:1fr 1fr;gap:48px;align-items:center}.tzx-service{display:flex;align-items:center;gap:17px;padding:18px 4px;border-bottom:1px solid var(--line);font-size:18px;font-weight:750;color:var(--navy)}.tzx-service b{font-size:12px;color:#8190a1;width:24px}.tzx-service span{margin-left:auto;border:1px solid #d5e3f1;border-radius:50%;width:32px;height:32px;display:grid;place-items:center;color:#1479d2;transition:.25s}.tzx-service:hover span{background:var(--blue);color:#fff;transform:translateX(3px)}.tzx-panel{min-height:280px;border-radius:24px;padding:30px;background:linear-gradient(135deg,#e9f5ff,#fff 60%,#f8eefa);display:flex;flex-direction:column;justify-content:end;overflow:hidden;position:relative}.tzx-panel:before{content:"";position:absolute;width:240px;height:240px;border-radius:50%;background:radial-gradient(circle,#82d5ff9c,transparent 70%);top:-65px;right:-40px}.tzx-panel h3{font-size:27px;letter-spacing:-1px;max-width:310px;position:relative}.tzx-panel p{max-width:340px;position:relative}.tzx-split{display:grid;grid-template-columns:1fr 1fr;gap:55px;align-items:center}.tzx-photo{min-height:320px;border-radius:22px;background:linear-gradient(135deg,#d8eaf4,#f4eee8);display:grid;place-items:center;padding:35px;text-align:center}.tzx-photo-icon{font-size:64px}.tzx-photo strong{display:block;font-size:22px;margin-top:12px}.tzx-checks{padding:0;list-style:none;margin:22px 0}.tzx-checks li{padding:10px 0;border-bottom:1px solid var(--line);color:#46566b;font-size:14px}.tzx-checks li:before{content:"✓";display:inline-grid;place-items:center;width:22px;height:22px;border-radius:50%;background:#e3f4ff;color:#0879d2;margin-right:10px;font-weight:800} .tzx-grid4{display:grid;grid-template-columns:repeat(4,1fr);gap:14px}.tzx-card{padding:23px;border:1px solid #edf0f4;background:#fff;border-radius:18px;transition:transform .25s,box-shadow .25s}.tzx-card:hover{transform:translateY(-4px);box-shadow:0 18px 35px #1c35550d}.tzx-icon{display:grid;place-items:center;width:42px;height:42px;border-radius:13px;background:#e9f6ff;color:#117dd1;font-size:20px;margin-bottom:20px}.tzx-card h3{font-size:17px;margin:0 0 8px}.tzx-card p{font-size:13px;margin:0}.tzx-dark{background:#09111f;color:#fff;padding:76px 0;position:relative;overflow:hidden}.tzx-dark:before{content:"";position:absolute;right:-120px;top:-150px;width:400px;height:400px;background:radial-gradient(circle,#1367a855,transparent 70%)}.tzx-dark .tzx-wrap{position:relative}.tzx-dark .tzx-kicker{color:#79ceff}.tzx-dark h2{color:#fff}.tzx-dark p{color:#b7c2d1}.tzx-darkgrid{display:grid;grid-template-columns:repeat(3,1fr);gap:14px;margin-top:30px}.tzx-darkcard{padding:22px;border:1px solid #ffffff20;background:linear-gradient(145deg,#ffffff0e,#ffffff05);border-radius:16px}.tzx-darkcard h3{margin:0 0 8px;font-size:17px}.tzx-industries{display:grid;grid-template-columns:repeat(3,1fr);gap:14px}.tzx-industry{padding:22px;border-radius:16px;background:#f4f5f3;border:1px solid #eceeea}.tzx-industry span{font-size:23px}.tzx-industry h3{font-size:16px;margin:12px 0 6px}.tzx-tech{display:flex;flex-wrap:wrap;gap:10px;margin-top:25px}.tzx-tech span{background:#fff;border:1px solid var(--line);padding:12px 16px;border-radius:12px;font-size:13px;font-weight:700} .tzx-projects{display:grid;grid-template-columns:repeat(3,1fr);gap:16px}.tzx-project{border:1px solid var(--line);background:#fff;border-radius:18px;overflow:hidden}.tzx-project-visual{height:155px;padding:20px;display:flex;align-items:center;justify-content:center;background:linear-gradient(135deg,#d8edff,#f3eaf9)}.tzx-project:nth-child(2) .tzx-project-visual{background:linear-gradient(135deg,#e4f2df,#e8f3ff)}.tzx-project:nth-child(3) .tzx-project-visual{background:linear-gradient(135deg,#f7e4d7,#e4edff)}.tzx-project-visual div{background:#ffffffd9;border:1px solid #fff;border-radius:12px;padding:20px;text-align:center;font-size:13px;font-weight:800;box-shadow:0 12px 24px #1c355515}.tzx-project-copy{padding:18px}.tzx-project-copy small{color:#2386d1;font-weight:800;text-transform:uppercase;font-size:10px;letter-spacing:1px}.tzx-project-copy h3{font-size:17px;margin:8px 0}.tzx-steps{display:grid;grid-template-columns:repeat(5,1fr);gap:15px;margin-top:28px}.tzx-step{padding:18px 0;border-top:2px solid #b6e5ff}.tzx-step b{color:#2788d4;font-size:12px}.tzx-step h3{font-size:16px;margin:10px 0 5px}.tzx-faq{max-width:820px;margin:auto}.tzx-faq details{border-bottom:1px solid var(--line);padding:19px 0}.tzx-faq summary{font-weight:750;cursor:pointer;list-style:none;display:flex;justify-content:space-between;gap:15px}.tzx-faq summary:after{content:"+";font-size:20px;color:#1689df}.tzx-faq details[open] summary:after{content:"−"}.tzx-faq details p{padding-right:35px}.tzx-contact{display:grid;grid-template-columns:.9fr 1.1fr;gap:40px;align-items:center}.tzx-contactform{padding:25px;border:1px solid #ffffff20;border-radius:18px;background:#ffffff0b}.tzx-contactform p{font-size:13px}.tzx-contactform a{display:inline-flex;margin-top:10px;background:var(--blue);color:#071424!important;padding:13px 18px;border-radius:999px;font-weight:800;font-size:13px}.tzx-footer{background:#fff;padding:40px 0 25px}.tzx-footgrid{display:grid;grid-template-columns:1.5fr 1fr 1fr 1fr;gap:25px}.tzx-footer h4{margin:0 0 13px;font-size:13px}.tzx-footer p,.tzx-footer a{font-size:12px;color:#697587;line-height:1.9;display:block}.tzx-copy{border-top:1px solid var(--line);margin-top:28px;padding-top:18px;color:#8993a0;font-size:11px;display:flex;justify-content:space-between;gap:12px}.tzx-home section{scroll-margin-top:80px} @keyframes tzx-float{0%,100%{transform:translateY(0) rotate(-18deg)}50%{transform:translateY(-12px) rotate(-12deg)}}@media(max-width:760px){.tzx-wrap{width:min(100% - 28px,600px)}.tzx-links{display:none}.tzx-nav{padding:14px 0}.tzx-hero{padding:48px 0 35px}.tzx-hero-grid,.tzx-services,.tzx-split,.tzx-contact{grid-template-columns:1fr}.tzx-home h1{letter-spacing:-2px}.tzx-art{height:265px;order:-1}.tzx-orb{width:200px;height:200px}.tzx-chip.one{left:0;top:35px}.tzx-chip.two{right:0;bottom:20px}.tzx-section,.tzx-dark{padding:52px 0}.tzx-head{display:block}.tzx-head p{margin-top:14px}.tzx-grid4{grid-template-columns:repeat(2,1fr)}.tzx-darkgrid,.tzx-industries,.tzx-projects{grid-template-columns:1fr}.tzx-steps{grid-template-columns:1fr}.tzx-step{padding:12px 0}.tzx-footgrid{grid-template-columns:repeat(2,1fr)}.tzx-copy{display:block}.tzx-copy span{display:block;margin-top:8px}.tzx-photo{min-height:230px}}@media(prefers-reduced-motion:reduce){.tzx-home *{animation:none!important;transition:none!important;scroll-behavior:auto!important}} /* Navbar floating lower over the hero background, like the reference */ html body .tzx-home>.tzx-nav{ position:relative!important; z-index:30!important; margin-top:42px!important; margin-bottom:-98px!important; } html body .tzx-home>.tzx-hero{ padding-top:145px!important; } @media(max-width:760px){ html body .tzx-home>.tzx-nav{ margin-top:18px!important; margin-bottom:-76px!important; } html body .tzx-home>.tzx-hero{padding-top:110px!important} } /* Premium compact floating navbar with the original reference navigation options */ html body .tzx-home>.tzx-nav{ width:calc(100% - 9%)!important; max-width:1600px!important; margin:20px auto 0!important; padding:14px 28px!important; min-height:76px!important; border:1px solid rgba(255,255,255,.82)!important; border-radius:22px!important; background:linear-gradient(105deg,rgba(255,250,253,.93),rgba(255,255,255,.89) 48%,rgba(224,246,255,.91))!important; backdrop-filter:blur(22px)!important; -webkit-backdrop-filter:blur(22px)!important; box-shadow:0 14px 35px rgba(32,48,82,.13)!important; position:relative!important; z-index:20!important; display:flex!important; align-items:center!important; justify-content:space-between!important; gap:20px!important; } html body .tzx-home>.tzx-nav .tzx-logo{font-size:clamp(22px,2vw,30px)!important;white-space:nowrap!important} html body .tzx-home>.tzx-nav .tzx-links{display:flex!important;align-items:center!important;gap:clamp(16px,2.2vw,34px)!important;font-size:15px!important} html body .tzx-home>.tzx-nav .tzx-links a{color:#18263b!important;font-weight:650!important} html body .tzx-home>.tzx-nav .tzx-links a:hover{color:#1769ed!important} html body .tzx-home>.tzx-nav>.tzx-btn{display:inline-flex!important;align-items:center!important;gap:8px!important;background:transparent!important;color:#26364a!important;box-shadow:none!important;padding:7px 10px!important;white-space:nowrap!important} html body .tzx-home>.tzx-nav>.tzx-btn:after{content:"↗";display:grid;place-items:center;width:38px;height:38px;border-radius:50%;background:#3478f6;color:#fff;font-size:18px;margin-left:4px} @media(max-width:760px){ html body .tzx-home>.tzx-nav{width:calc(100% - 24px)!important;margin:12px auto 0!important;padding:10px 14px!important;min-height:62px!important;border-radius:17px!important;gap:10px!important} html body .tzx-home>.tzx-nav .tzx-links{display:none!important} html body .tzx-home>.tzx-nav>.tzx-btn{font-size:12px!important;padding:4px 0 4px 4px!important} html body .tzx-home>.tzx-nav>.tzx-btn:after{width:34px;height:34px} } html body .tzx-home>.tzx-nav{ width:calc(100% - 32px)!important; max-width:none!important; margin:20px 16px 0!important; } html body .tzx-home>.tzx-hero{ width:100vw!important; max-width:none!important; margin-left:calc(50% - 50vw)!important; margin-right:calc(50% - 50vw)!important; } @media(min-width:1200px){ html body .tzx-home>.tzx-nav{width:calc(100% - 48px)!important;margin:20px 24px 0!important} } @media(max-width:760px){ html body .tzx-home>.tzx-nav{width:calc(100% - 24px)!important;margin:12px 12px 0!important;padding:12px 15px!important} html body .tzx-home>.tzx-hero{width:100vw!important;margin-left:calc(50% - 50vw)!important;margin-right:calc(50% - 50vw)!important} } html,body{margin:0!important;padding:0!important} .wp-site-blocks{padding-top:0!important;padding-bottom:0!important} .wp-site-blocks main.tzx-page-main, main.tzx-page-main, .wp-site-blocks main.tzx-page-main>.wp-block-post-content{ width:100%!important;max-width:none!important;margin:0!important;padding:0!important } .wp-site-blocks main.tzx-page-main>.wp-block-post-content>*{max-width:none!important} html body .tzx-home{width:100%!important;max-width:none!important;margin:0!important;padding:0!important} html body .tzx-home>.tzx-hero{ width:100vw!important;max-width:none!important;margin-left:calc(50% - 50vw)!important;margin-right:calc(50% - 50vw)!important; min-height:calc(100vh - 145px)!important;min-height:calc(100svh - 145px)!important; background-size:cover!important;background-position:center center!important; } @media(max-width:760px){ html body .tzx-home>.tzx-hero{width:100vw!important;margin-left:calc(50% - 50vw)!important;margin-right:calc(50% - 50vw)!important;min-height:calc(100svh - 90px)!important} } /* TecxZoo full viewport hero refinement */ html body .tzx-home > .tzx-hero, html body .tzx-home .tzx-hero { min-height:calc(100vh - 130px) !important; min-height:calc(100svh - 130px) !important; display:flex !important; align-items:center !important; justify-content:center !important; padding:64px 0 !important; background-image:url("https://tecxzoo.com/wp-content/uploads/2026/10/Pastel-Glass-Wave-Gradient.png") !important; background-position:center center !important; background-size:cover !important; background-repeat:no-repeat !important; } html body .tzx-home .tzx-hero .tzx-hero-grid { width:min(1180px,calc(100% - 36px)) !important; max-width:none !important; margin:auto !important; display:flex !important; align-items:center !important; justify-content:center !important; text-align:center !important; } html body .tzx-home .tzx-hero .tzx-hero-copy { width:100% !important; max-width:1050px !important; margin:auto !important; } html body .tzx-home .tzx-hero .tzx-kicker { display:block !important; color:#286cf0 !important; margin:0 0 24px !important; font-size:clamp(11px,1vw,15px) !important; letter-spacing:3px !important; } html body .tzx-home .tzx-hero h1 { color:#111827 !important; font-size:clamp(42px,5.2vw,86px) !important; line-height:1.08 !important; letter-spacing:-2.8px !important; font-weight:760 !important; margin:0 auto 24px !important; max-width:1050px !important; } html body .tzx-home .tzx-hero h1 .tzx-gradient { display:inline-block !important; color:#111827 !important; background:none !important; -webkit-text-fill-color:#111827 !important; font-family:Georgia,"Times New Roman",serif !important; font-style:italic !important; font-weight:400 !important; letter-spacing:-2px !important; } html body .tzx-home .tzx-hero .tzx-hero-copy>p { max-width:850px !important; margin:0 auto !important; color:#4d5b70 !important; font-size:clamp(15px,1.25vw,21px) !important; line-height:1.65 !important; } html body .tzx-home .tzx-hero .tzx-actions, html body .tzx-home .tzx-hero .tzx-art {display:none !important} html body .tzx-home .tzx-hero:before, html body .tzx-home .tzx-hero:after {display:none !important;content:none !important} @media(max-width:760px) { html body .tzx-home > .tzx-hero, html body .tzx-home .tzx-hero { min-height:calc(100svh - 90px) !important; padding:50px 0 !important; background-position:center center !important; background-size:cover !important; } html body .tzx-home .tzx-hero .tzx-hero-grid {width:calc(100% - 32px) !important} html body .tzx-home .tzx-hero .tzx-kicker {letter-spacing:2px !important;margin-bottom:18px !important} html body .tzx-home .tzx-hero h1 {font-size:clamp(36px,9vw,54px) !important;letter-spacing:-1.6px !important;line-height:1.1 !important;margin-bottom:20px !important} html body .tzx-home .tzx-hero h1 .tzx-gradient {letter-spacing:-1.1px !important} html body .tzx-home .tzx-hero .tzx-hero-copy>p {font-size:15px !important;line-height:1.6 !important} } /* FINAL OVERRIDE: use the uploaded TecxZoo hero background image */ html body .tzx-home > .tzx-hero, html body .tzx-home .tzx-hero { background-image:url("https://tecxzoo.com/wp-content/uploads/2026/10/Pastel-Glass-Wave-Gradient.png") !important; background-position:center center !important; background-size:cover !important; background-repeat:no-repeat !important; } html body .tzx-home .tzx-hero:before, html body .tzx-home .tzx-hero:after {display:none !important;content:none !important;} @media(max-width:760px){ html body .tzx-home > .tzx-hero, html body .tzx-home .tzx-hero {background-position:center center !important;background-size:cover !important;} } /* Highest priority final navbar positioning: floating over the hero */ html body .tzx-home > .tzx-nav{ position:relative!important; z-index:50!important; margin-top:0!important; margin-bottom:-100px!important; } /* Remove the unwanted blank strip above the floating navbar */ html body .tzx-home{margin-top:0!important;padding-top:0!important} html body .wp-site-blocks:has(.tzx-home){padding-top:0!important;margin-top:0!important} html body .wp-site-blocks:has(.tzx-home) > *:first-child{margin-block-start:0!important} /* Correct DOM target: hero is nested inside main#top, not directly inside .tzx-home */ /* Final consolidated hero rule: full viewport, no subtractive height */ html body .tzx-home main#top > section.tzx-hero{ box-sizing:border-box!important; display:flex!important; align-items:center!important; width:100vw!important; max-width:none!important; margin-left:calc(50% - 50vw)!important; margin-right:calc(50% - 50vw)!important; min-height:100vh!important; min-height:100svh!important; height:100vh!important; height:100svh!important; padding:150px 0 100px!important; background-image:url("https://tecxzoo.com/wp-content/uploads/2026/10/Pastel-Glass-Wave-Gradient.png")!important; background-position:center center!important; background-size:cover!important; background-repeat:no-repeat!important; margin-bottom:0!important; flex-shrink:0!important; overflow:hidden!important; } html body .tzx-home main#top > section.tzx-hero + section.tzx-section{ margin-top:0!important; padding-top:76px!important; } html body .tzx-home main#top{ width:100%!important; max-width:none!important; margin:0!important; padding:0!important; } html body .tzx-home main#top > section.tzx-hero .tzx-hero-grid{ width:min(1120px,calc(100% - 44px))!important; margin:0 auto!important; } @media(max-width:760px){ html body .tzx-home main#top > section.tzx-hero{ min-height:100vh!important; min-height:100svh!important; padding:112px 0 60px!important; } html body .tzx-home main#top > section.tzx-hero .tzx-hero-grid{ width:calc(100% - 32px)!important; } } @media(max-width:760px){ html body .tzx-home > .tzx-nav{ margin-top:20px!important; margin-bottom:-78px!important; } /* TecxZoo reference inspired footer */ html body .tzx-home footer.tzx-footer{ background:#080808!important; color:#f7f7f7!important; padding:64px 0 22px!important; border-top:1px solid rgba(255,255,255,.08)!important; } html body .tzx-home footer.tzx-footer .tzx-wrap{ width:min(1180px,calc(100% - 48px))!important; max-width:1180px!important; margin:0 auto!important; } html body .tzx-home footer.tzx-footer .tzx-footgrid{ display:grid!important; grid-template-columns:minmax(220px,1.1fr) minmax(340px,1.8fr) minmax(220px,1fr)!important; gap:48px!important; align-items:start!important; } html body .tzx-home footer.tzx-footer .tzx-footgrid>div:nth-child(2){ display:grid!important; grid-template-columns:1fr 1fr!important; column-gap:24px!important; align-content:start!important; } html body .tzx-home footer.tzx-footer .tzx-footgrid>div:nth-child(2) h4{ grid-column:1/-1!important; } html body .tzx-home footer.tzx-footer .tzx-footgrid>div:nth-child(3), html body .tzx-home footer.tzx-footer .tzx-footgrid>div:nth-child(4){ display:flex!important; flex-direction:column!important; align-items:flex-start!important; } html body .tzx-home footer.tzx-footer .tzx-logo{ color:#f8f8f8!important; font-size:30px!important; font-weight:750!important; letter-spacing:-1.2px!important; } html body .tzx-home footer.tzx-footer .tzx-logo span{ color:#38b9ff!important; } html body .tzx-home .tzx-logo-image{display:block!important;width:172px!important;max-width:100%!important;height:auto!important;object-fit:contain!important} html body .tzx-home header.tzx-nav .tzx-logo-image{width:148px!important} html body .tzx-home footer.tzx-footer .tzx-logo-image{width:172px!important} html body .tzx-home footer.tzx-footer p, html body .tzx-home footer.tzx-footer a:not(.tzx-logo), html body .tzx-home footer.tzx-footer h4{ color:#f1f1f1!important; } html body .tzx-home footer.tzx-footer .tzx-footgrid p{ max-width:310px!important; line-height:1.7!important; color:#c9c9c9!important; } html body .tzx-home footer.tzx-footer h4{ margin:0 0 18px!important; font-size:13px!important; font-weight:700!important; letter-spacing:.08em!important; text-transform:uppercase!important; } html body .tzx-home footer.tzx-footer .tzx-footgrid a:not(.tzx-logo){ display:block!important; margin:0 0 12px!important; font-size:13px!important; line-height:1.5!important; text-decoration:none!important; opacity:.9!important; } html body .tzx-home footer.tzx-footer .tzx-footgrid a:hover{ color:#38b9ff!important; } html body .tzx-home footer.tzx-footer .tzx-copy{ display:flex!important; flex-direction:column!important; gap:14px!important; margin-top:44px!important; padding-top:0!important; border-top:0!important; text-align:center!important; color:#cfcfcf!important; } html body .tzx-home footer.tzx-footer .tzx-copy:before{ content:"TecXzoo"!important; display:block!important; width:100%!important; overflow:hidden!important; white-space:nowrap!important; text-align:center!important; font-size:clamp(76px,17.3vw,204px)!important; font-weight:850!important; letter-spacing:-.065em!important; line-height:.92!important; color:#fafafa!important; border-bottom:1px solid rgba(255,255,255,.72)!important; padding:0 0 18px!important; margin:0 0 10px!important; } html body .tzx-home footer.tzx-footer .tzx-copy span{ display:block!important; color:#cfcfcf!important; font-size:12px!important; } @media(max-width:900px){ html body .tzx-home footer.tzx-footer .tzx-footgrid{ grid-template-columns:1fr 1.4fr!important; gap:36px!important; } } @media(max-width:600px){ html body .tzx-home footer.tzx-footer{padding:42px 0 20px!important} html body .tzx-home footer.tzx-footer .tzx-wrap{width:calc(100% - 36px)!important} html body .tzx-home footer.tzx-footer .tzx-footgrid{grid-template-columns:1fr!important;gap:30px!important} html body .tzx-home footer.tzx-footer .tzx-footgrid>div:nth-child(2){grid-template-columns:1fr 1fr!important;column-gap:14px!important} html body .tzx-home footer.tzx-footer .tzx-copy:before{font-size:17vw!important;padding-bottom:12px!important} } html body .tzx-home > .tzx-hero{ padding-top:112px!important; min-height:100vh!important; min-height:100svh!important; background-position:center center!important; background-size:cover!important; } } /* TecxZoo footer desktop and mobile base styles */ html body .tzx-home footer.tzx-footer{background:#080808!important;color:#f7f7f7!important;padding:64px 0 22px!important;border-top:1px solid rgba(255,255,255,.08)!important} html body .tzx-home footer.tzx-footer .tzx-wrap{width:min(1180px,calc(100% - 48px))!important;max-width:1180px!important;margin:0 auto!important} html body .tzx-home footer.tzx-footer .tzx-footgrid{display:grid!important;grid-template-columns:minmax(220px,1.1fr) minmax(340px,1.8fr) minmax(220px,1fr)!important;gap:48px!important;align-items:start!important} html body .tzx-home footer.tzx-footer .tzx-footgrid>div:nth-child(2){display:grid!important;grid-template-columns:1fr 1fr!important;column-gap:24px!important;align-content:start!important} html body .tzx-home footer.tzx-footer .tzx-footgrid>div:nth-child(2) h4{grid-column:1/-1!important} html body .tzx-home footer.tzx-footer .tzx-footgrid>div:nth-child(3),html body .tzx-home footer.tzx-footer .tzx-footgrid>div:nth-child(4){display:flex!important;flex-direction:column!important;align-items:flex-start!important} html body .tzx-home footer.tzx-footer .tzx-logo{color:#f8f8f8!important;font-size:30px!important;font-weight:750!important;letter-spacing:-1.2px!important} html body .tzx-home footer.tzx-footer .tzx-logo span{color:#38b9ff!important} html body .tzx-home footer.tzx-footer p,html body .tzx-home footer.tzx-footer a:not(.tzx-logo),html body .tzx-home footer.tzx-footer h4{color:#f1f1f1!important} html body .tzx-home footer.tzx-footer .tzx-footgrid p{max-width:310px!important;line-height:1.7!important;color:#c9c9c9!important} html body .tzx-home footer.tzx-footer h4{margin:0 0 18px!important;font-size:13px!important;font-weight:700!important;letter-spacing:.08em!important;text-transform:uppercase!important} html body .tzx-home footer.tzx-footer .tzx-footgrid a:not(.tzx-logo){display:block!important;margin:0 0 12px!important;font-size:13px!important;line-height:1.5!important;text-decoration:none!important;opacity:.9!important} html body .tzx-home footer.tzx-footer .tzx-footgrid a:hover{color:#38b9ff!important} html body .tzx-home footer.tzx-footer .tzx-copy{display:flex!important;flex-direction:column!important;gap:14px!important;margin-top:44px!important;padding-top:0!important;border-top:0!important;text-align:center!important;color:#cfcfcf!important} html body .tzx-home footer.tzx-footer .tzx-copy:before{content:"TecXzoo"!important;display:block!important;width:100%!important;overflow:hidden!important;white-space:nowrap!important;text-align:center!important;font-size:clamp(76px,17.3vw,204px)!important;font-weight:850!important;letter-spacing:-.065em!important;line-height:.92!important;color:#fafafa!important;border-bottom:1px solid rgba(255,255,255,.72)!important;padding:0 0 18px!important;margin:0 0 10px!important} html body .tzx-home footer.tzx-footer .tzx-copy span{display:block!important;color:#cfcfcf!important;font-size:12px!important} @media(max-width:900px){html body .tzx-home footer.tzx-footer .tzx-footgrid{grid-template-columns:1fr 1.4fr!important;gap:36px!important}} @media(max-width:600px){html body .tzx-home footer.tzx-footer{padding:42px 0 20px!important}html body .tzx-home footer.tzx-footer .tzx-wrap{width:calc(100% - 36px)!important}html body .tzx-home footer.tzx-footer .tzx-footgrid{grid-template-columns:1fr!important;gap:30px!important}html body .tzx-home footer.tzx-footer .tzx-footgrid>div:nth-child(2){grid-template-columns:1fr 1fr!important;column-gap:14px!important}html body .tzx-home footer.tzx-footer .tzx-copy:before{font-size:17vw!important;padding-bottom:12px!important}} html body .tzx-home header.tzx-nav .tzx-logo{display:flex!important;align-items:center!important;flex:0 0 auto!important;line-height:0!important} html body .tzx-home header.tzx-nav .tzx-logo{align-self:stretch!important;display:flex!important;align-items:stretch!important;justify-content:flex-start!important;flex:0 0 88px!important;width:88px!important;max-width:88px!important;height:auto!important;margin:-10px 0!important;padding:0!important;overflow:hidden!important;line-height:0!important} html body .tzx-home header.tzx-nav .tzx-logo-image{display:block!important;width:100%!important;max-width:100%!important;height:calc(100% + 20px)!important;max-height:none!important;object-fit:cover!important;object-position:center!important} @media(max-width:760px){html body .tzx-home header.tzx-nav .tzx-logo{flex-basis:64px!important;width:64px!important;max-width:64px!important;margin:-8px 0!important}html body .tzx-home header.tzx-nav .tzx-logo-image{height:calc(100% + 16px)!important}} html body .tzx-home footer.tzx-footer .tzx-logo-image{display:block!important;width:172px!important;max-width:100%!important;height:auto!important;object-fit:contain!important} @media(max-width:760px){html body .tzx-home header.tzx-nav .tzx-logo-image{width:112px!important;max-width:112px!important}} /* Mobile navbar logo fix: constrain image to a compact icon, never viewport size */ @media(max-width:760px){ html body .tzx-home header.tzx-nav .tzx-logo{align-self:center!important;display:flex!important;flex:0 0 42px!important;width:42px!important;max-width:42px!important;height:42px!important;max-height:42px!important;margin:0!important;padding:0!important;overflow:hidden!important;line-height:0!important} html body .tzx-home header.tzx-nav .tzx-logo-image{display:block!important;flex:none!important;width:42px!important;max-width:42px!important;height:42px!important;max-height:42px!important;object-fit:contain!important;object-position:center!important} html body .tzx-home header.tzx-nav{gap:12px!important} } @media(max-width:380px){html body .tzx-home header.tzx-nav .tzx-logo{flex-basis:36px!important;width:36px!important;max-width:36px!important;height:36px!important;max-height:36px!important}html body .tzx-home header.tzx-nav .tzx-logo-image{width:36px!important;max-width:36px!important;height:36px!important;max-height:36px!important}} /* Mobile homepage overflow and hero recovery */ @media(max-width:760px){ html,body{max-width:100%!important;overflow-x:hidden!important} html body .tzx-home{width:100%!important;max-width:100%!important;overflow-x:clip!important} html body .tzx-home main#top{width:100%!important;max-width:100%!important;overflow:visible!important} html body .tzx-home main#top>section.tzx-hero{box-sizing:border-box!important;width:100%!important;max-width:100%!important;min-height:640px!important;height:auto!important;padding:112px 0 72px!important;margin-left:0!important;margin-right:0!important;overflow:hidden!important;background-size:cover!important;background-position:center center!important} html body .tzx-home main#top>section.tzx-hero .tzx-hero-grid{display:block!important;width:calc(100% - 36px)!important;max-width:100%!important;margin:0 auto!important} html body .tzx-home main#top>section.tzx-hero .tzx-hero-copy{display:block!important;width:100%!important;max-width:100%!important;position:relative!important;z-index:2!important;text-align:center!important} html body .tzx-home main#top>section.tzx-hero .tzx-hero-copy h1{font-size:clamp(34px,9vw,48px)!important;line-height:1.08!important;letter-spacing:-1.3px!important;overflow-wrap:normal!important} html body .tzx-home main#top>section.tzx-hero .tzx-hero-copy>p{max-width:100%!important;font-size:15px!important;line-height:1.65!important} html body .tzx-home .tzx-client-inner,html body .tzx-home .tzx-trust-wrap,html body .tzx-home .tzx-wrap{box-sizing:border-box!important;max-width:100%!important} html body .tzx-home .tzx-client-marquee,html body .tzx-home .tzx-trust-marquee{max-width:100vw!important} } @media(max-width:420px){html body .tzx-home main#top>section.tzx-hero{min-height:600px!important;padding-top:100px!important}} /* TecXzoo premium Forminator project inquiry form */ html body .tzx-home .tzx-contactform{position:relative!important;align-self:stretch!important;padding:clamp(24px,3.2vw,42px)!important;border:1px solid rgba(255,255,255,.16)!important;border-radius:28px!important;background:linear-gradient(145deg,rgba(255,255,255,.13),rgba(255,255,255,.055))!important;box-shadow:0 24px 70px rgba(0,0,0,.18)!important;backdrop-filter:blur(16px)!important;min-width:0!important} html body .tzx-home .tzx-contactform:before{content:"PROJECT INQUIRY"!important;display:inline-flex!important;align-items:center!important;gap:8px!important;margin:0 0 18px!important;padding:8px 12px!important;border:1px solid rgba(56,185,255,.3)!important;border-radius:999px!important;background:rgba(56,185,255,.1)!important;color:#7ed4ff!important;font-size:10px!important;font-weight:800!important;letter-spacing:.16em!important} html body .tzx-home .tzx-contactform .forminator-ui{margin:0!important;color:#fff!important} html body .tzx-home .tzx-contactform .forminator-ui .forminator-row{margin-bottom:17px!important} html body .tzx-home .tzx-contactform .forminator-ui .forminator-label{display:block!important;margin:0 0 8px!important;color:#f3f7ff!important;font-size:12px!important;font-weight:650!important;letter-spacing:.02em!important} html body .tzx-home .tzx-contactform .forminator-ui input:not([type=checkbox]):not([type=radio]):not([type=submit]),html body .tzx-home .tzx-contactform .forminator-ui select,html body .tzx-home .tzx-contactform .forminator-ui textarea{box-sizing:border-box!important;width:100%!important;min-height:50px!important;padding:14px 15px!important;border:1px solid rgba(255,255,255,.17)!important;border-radius:13px!important;background:rgba(9,19,39,.42)!important;color:#fff!important;font-family:inherit!important;font-size:14px!important;box-shadow:none!important;outline:none!important;transition:border-color .2s ease,background .2s ease,box-shadow .2s ease!important} html body .tzx-home .tzx-contactform .forminator-ui textarea{min-height:124px!important;resize:vertical!important} html body .tzx-home .tzx-contactform .forminator-ui input::placeholder,html body .tzx-home .tzx-contactform .forminator-ui textarea::placeholder{color:#aebbd0!important;opacity:1!important} html body .tzx-home .tzx-contactform .forminator-ui input:focus,html body .tzx-home .tzx-contactform .forminator-ui select:focus,html body .tzx-home .tzx-contactform .forminator-ui textarea:focus{border-color:#38b9ff!important;background:rgba(9,19,39,.62)!important;box-shadow:0 0 0 3px rgba(56,185,255,.13)!important} html body .tzx-home .tzx-contactform .forminator-ui .forminator-button-submit{display:inline-flex!important;align-items:center!important;justify-content:center!important;min-height:52px!important;padding:14px 24px!important;border:0!important;border-radius:999px!important;background:linear-gradient(110deg,#38b9ff,#3974ff)!important;color:#fff!important;font-size:14px!important;font-weight:750!important;box-shadow:0 10px 28px rgba(44,121,255,.25)!important;transition:transform .2s ease,box-shadow .2s ease!important} html body .tzx-home .tzx-contactform .forminator-ui .forminator-button-submit:hover{transform:translateY(-2px)!important;box-shadow:0 14px 34px rgba(44,121,255,.36)!important} html body .tzx-home .tzx-contactform .forminator-ui .forminator-error-message{color:#ffb8c1!important;font-size:12px!important} html body .tzx-home .tzx-contactform .forminator-ui .forminator-response-message{border-radius:14px!important} html body .tzx-home .tzx-contactform .forminator-ui .forminator-checkbox,html body .tzx-home .tzx-contactform .forminator-ui .forminator-radio{color:#d9e4f6!important} @media(max-width:760px){html body .tzx-home .tzx-contactform{padding:22px 17px!important;border-radius:21px!important}html body .tzx-home .tzx-contactform .forminator-ui .forminator-row{margin-bottom:14px!important}html body .tzx-home .tzx-contactform .forminator-ui .forminator-button-submit{width:100%!important}} /* Final top spacing fix for desktop and mobile */ html body .tzx-home > .tzx-nav{margin-top:0!important} @media(max-width:760px){html body .tzx-home > .tzx-nav{margin-top:0!important}} /* TecXzoo animated trust and technology strip */ html body .tzx-home .tzx-trust{position:relative!important;overflow:hidden!important;padding:88px 0 82px!important;background:linear-gradient(120deg,#fff8fc 0%,#f7faff 52%,#eefaff 100%)!important;border-top:1px solid rgba(22,35,58,.06)!important;border-bottom:1px solid rgba(22,35,58,.06)!important} html body .tzx-home .tzx-trust-wrap{width:min(1180px,calc(100% - 48px))!important;margin:0 auto!important;text-align:center!important} html body .tzx-home .tzx-trust-kicker{margin:0 0 14px!important;color:#2875f6!important;font-size:11px!important;font-weight:800!important;letter-spacing:.19em!important;text-transform:uppercase!important} html body .tzx-home .tzx-trust h2{margin:0 auto!important;color:#111827!important;font-size:clamp(34px,4.4vw,58px)!important;line-height:1.04!important;letter-spacing:-.055em!important;font-weight:800!important} html body .tzx-home .tzx-trust h2 span{font-family:Georgia,serif!important;font-style:italic!important;font-weight:500!important;letter-spacing:-.045em!important} html body .tzx-home .tzx-trust-intro{max-width:620px!important;margin:20px auto 0!important;color:#647084!important;font-size:16px!important;line-height:1.75!important} html body .tzx-home .tzx-trust-marquee{position:relative!important;overflow:hidden!important;margin:42px 0!important;padding:20px 0!important;width:100vw!important;left:50%!important;transform:translateX(-50%)!important;border-top:1px solid rgba(25,42,70,.08)!important;border-bottom:1px solid rgba(25,42,70,.08)!important;background:rgba(255,255,255,.54)!important;mask-image:linear-gradient(90deg,transparent 0%,#000 7%,#000 93%,transparent 100%)!important} html body .tzx-home .tzx-trust-track{display:flex!important;align-items:center!important;gap:56px!important;width:max-content!important;animation:tzx-trust-scroll 32s linear infinite!important;will-change:transform!important} html body .tzx-home .tzx-trust-marquee:hover .tzx-trust-track{animation-play-state:paused!important} html body .tzx-home .tzx-trust-logo{display:inline-flex!important;align-items:center!important;justify-content:center!important;white-space:nowrap!important;color:#334155!important;font-size:20px!important;font-weight:750!important;letter-spacing:-.045em!important;opacity:.72!important;transition:opacity .25s ease,transform .25s ease!important} html body .tzx-home .tzx-trust-logo:nth-child(3n){font-family:Georgia,serif!important;font-style:italic!important;font-weight:600!important} html body .tzx-home .tzx-trust-logo:hover{opacity:1!important;transform:translateY(-2px)!important} html body .tzx-home .tzx-trust-proof{display:flex!important;justify-content:center!important;align-items:center!important;flex-wrap:wrap!important;gap:12px!important;margin-top:28px!important} html body .tzx-home .tzx-trust-proof span{display:inline-flex!important;align-items:center!important;gap:8px!important;padding:10px 14px!important;border:1px solid rgba(28,47,78,.09)!important;border-radius:999px!important;background:rgba(255,255,255,.68)!important;color:#536176!important;font-size:12px!important;font-weight:600!important} html body .tzx-home .tzx-trust-proof b{color:#246ef5!important;font-weight:800!important} @keyframes tzx-trust-scroll{from{transform:translateX(0)}to{transform:translateX(-50%)}} @media(prefers-reduced-motion:reduce){html body .tzx-home .tzx-trust-track{animation:none!important;flex-wrap:wrap!important;justify-content:center!important;width:100%!important;white-space:normal!important}} @media(max-width:760px){html body .tzx-home .tzx-trust{padding:62px 0 58px!important}html body .tzx-home .tzx-trust-wrap{width:calc(100% - 32px)!important}html body .tzx-home .tzx-trust-intro{font-size:14px!important}html body .tzx-home .tzx-trust-marquee{margin-top:30px!important;margin-bottom:24px!important;padding:17px 0!important}html body .tzx-home .tzx-trust-track{gap:34px!important;animation-duration:24s!important}html body .tzx-home .tzx-trust-logo{font-size:17px!important}html body .tzx-home .tzx-trust-proof{gap:8px!important}html body .tzx-home .tzx-trust-proof span{font-size:11px!important;padding:9px 11px!important}} /* Final logo alignment: image fills the navbar height */ html body .tzx-home header.tzx-nav .tzx-logo{align-self:stretch!important;display:flex!important;align-items:stretch!important;flex:0 0 88px!important;width:88px!important;max-width:88px!important;margin:-10px 0!important;padding:0!important;overflow:hidden!important;line-height:0!important} html body .tzx-home header.tzx-nav .tzx-logo-image{display:block!important;width:100%!important;max-width:100%!important;height:calc(100% + 20px)!important;max-height:none!important;object-fit:cover!important;object-position:center!important} @media(max-width:760px){html body .tzx-home header.tzx-nav .tzx-logo{flex-basis:64px!important;width:64px!important;max-width:64px!important;margin:-8px 0!important}html body .tzx-home header.tzx-nav .tzx-logo-image{height:calc(100% + 16px)!important}} /* Premium contact section inspired by the supplied reference */ /* Contact section: light canvas, dark glass only behind the form */ html body .tzx-home #contact.tzx-dark{background:transparent!important;color:#111827!important} html body .tzx-home #contact.tzx-dark:before{background:radial-gradient(ellipse at 92% 8%,rgba(255,214,133,.22),transparent 32%),radial-gradient(ellipse at 5% 95%,rgba(56,185,255,.13),transparent 30%)!important} html body .tzx-home #contact .tzx-contact{background:transparent!important;border:0!important;box-shadow:none!important;padding:24px 0!important} html body .tzx-home #contact .tzx-contact-profile .tzx-kicker{color:#2875f6!important} html body .tzx-home #contact .tzx-contact-profile h2{color:#101828!important} html body .tzx-home #contact .tzx-contact-profile>p{color:#596579!important} html body .tzx-home #contact .tzx-contact-points li{color:#344054!important} html body .tzx-home #contact .tzx-contact-points li:before{border-color:rgba(22,34,55,.25)!important;color:#167b52!important} html body .tzx-home #contact .tzx-ceo-card strong{color:#111827!important} html body .tzx-home #contact .tzx-ceo-card span{color:#667085!important} html body .tzx-home #contact .tzx-contactform{background:rgba(12,14,18,.90)!important;border:1px solid rgba(255,255,255,.15)!important;box-shadow:0 18px 55px rgba(15,23,42,.18)!important;backdrop-filter:blur(18px)!important} html body .tzx-home #contact .tzx-contactform:before{color:#a8dfff!important} @media(max-width:760px){html body .tzx-home #contact .tzx-contact{padding:12px 0!important}} html body .tzx-home #contact.tzx-dark{position:relative!important;overflow:hidden!important;background:#08090b!important} html body .tzx-home #contact.tzx-dark:before{content:""!important;position:absolute!important;inset:0!important;pointer-events:none!important;background:radial-gradient(ellipse at 92% 8%,rgba(190,155,55,.30),transparent 35%),radial-gradient(ellipse at 4% 100%,rgba(56,185,255,.18),transparent 27%)!important} html body .tzx-home #contact .tzx-contact{position:relative!important;z-index:1!important;display:grid!important;grid-template-columns:minmax(0,.92fr) minmax(0,1.08fr)!important;gap:clamp(30px,5vw,76px)!important;align-items:center!important;max-width:1180px!important;padding:30px!important;border:1px solid rgba(255,255,255,.08)!important;border-radius:28px!important;background:linear-gradient(125deg,#090909 0%,#10100e 65%,#332a16 100%)!important;box-shadow:0 24px 80px rgba(0,0,0,.18)!important} html body .tzx-home #contact .tzx-contact-profile{min-width:0!important} html body .tzx-home #contact .tzx-contact-profile .tzx-kicker{color:#56d89a!important;font-size:10px!important;letter-spacing:.12em!important} html body .tzx-home #contact .tzx-contact-profile h2{max-width:450px!important;margin:14px 0 16px!important;color:#fff!important;font-size:clamp(30px,3.3vw,44px)!important;line-height:1.1!important;letter-spacing:-.045em!important} html body .tzx-home #contact .tzx-contact-profile>p{max-width:410px!important;color:#c5c5c5!important;font-size:14px!important;line-height:1.75!important} html body .tzx-home #contact .tzx-ceo-card{display:flex!important;align-items:center!important;gap:15px!important;margin:25px 0 20px!important} html body .tzx-home #contact .tzx-ceo-card img{display:block!important;width:94px!important;height:104px!important;flex:0 0 94px!important;object-fit:cover!important;object-position:center 30%!important;border-radius:16px!important;border:1px solid rgba(255,255,255,.16)!important;background:#25202e!important} html body .tzx-home #contact .tzx-ceo-card>div{display:flex!important;flex-direction:column!important;gap:5px!important} html body .tzx-home #contact .tzx-ceo-card strong{color:#fff!important;font-size:17px!important;font-weight:750!important} html body .tzx-home #contact .tzx-ceo-card span{color:#aeb4bf!important;font-size:12px!important} html body .tzx-home #contact .tzx-contact-points{display:grid!important;gap:10px!important;margin:18px 0 22px!important;padding:0!important;list-style:none!important} html body .tzx-home #contact .tzx-contact-points li{position:relative!important;padding-left:24px!important;color:#dedede!important;font-size:12px!important;line-height:1.5!important} html body .tzx-home #contact .tzx-contact-points li:before{content:"✓"!important;position:absolute!important;left:0!important;top:0!important;display:inline-flex!important;align-items:center!important;justify-content:center!important;width:15px!important;height:15px!important;border:1px solid rgba(255,255,255,.5)!important;border-radius:50%!important;color:#b9f8d5!important;font-size:10px!important} html body .tzx-home #contact .tzx-meeting-link{display:inline-flex!important;align-items:center!important;justify-content:space-between!important;gap:20px!important;min-height:48px!important;padding:13px 18px!important;border-radius:999px!important;background:linear-gradient(110deg,#38b9ff,#3673ff)!important;color:#fff!important;text-decoration:none!important;font-size:13px!important;font-weight:750!important;box-shadow:0 10px 28px rgba(40,110,255,.22)!important;transition:transform .2s ease,box-shadow .2s ease!important} html body .tzx-home #contact .tzx-meeting-link:hover{transform:translateY(-2px)!important;box-shadow:0 14px 34px rgba(40,110,255,.32)!important} html body .tzx-home #contact .tzx-meeting-link span{font-size:17px!important} html body .tzx-home #contact .tzx-contactform{box-sizing:border-box!important;min-width:0!important;width:100%!important;padding:clamp(20px,2.8vw,34px)!important;border:1px solid rgba(255,255,255,.14)!important;border-radius:22px!important;background:rgba(5,7,10,.64)!important;box-shadow:0 15px 48px rgba(0,0,0,.22)!important} html body .tzx-home #contact .tzx-contactform:before{content:"PROJECT INQUIRY"!important;display:block!important;margin:0 0 20px!important;color:#a8dfff!important;font-size:10px!important;font-weight:800!important;letter-spacing:.17em!important} html body .tzx-home #contact .tzx-contactform .forminator-ui{margin:0!important} html body .tzx-home #contact .tzx-contactform .forminator-ui .forminator-label{color:#f5f5f5!important} html body .tzx-home #contact .tzx-contactform .forminator-ui input:not([type=checkbox]):not([type=radio]):not([type=submit]),html body .tzx-home #contact .tzx-contactform .forminator-ui select,html body .tzx-home #contact .tzx-contactform .forminator-ui textarea{background:rgba(255,255,255,.045)!important;border-color:rgba(255,255,255,.19)!important;color:#fff!important} html body .tzx-home #contact .tzx-contactform .forminator-ui .forminator-button-submit{background:linear-gradient(110deg,#38b9ff,#3974ff)!important} @media(max-width:760px){html body .tzx-home #contact .tzx-contact{grid-template-columns:minmax(0,1fr)!important;gap:28px!important;padding:19px!important;border-radius:22px!important}html body .tzx-home #contact .tzx-contact-profile h2{font-size:34px!important}html body .tzx-home #contact .tzx-ceo-card img{width:82px!important;height:90px!important;flex-basis:82px!important}html body .tzx-home #contact .tzx-contactform{padding:20px 15px!important;border-radius:18px!important}} /* Refined light contact section with dark glass form card */ /* Contact headline repair: target the actual first column markup */ html body .tzx-home #contact .tzx-contact > div:first-child h2, html body .tzx-home #contact .tzx-contact > div:first-child h2 *{ position:static!important;float:none!important;display:inline!important; color:#111827!important;opacity:1!important;visibility:visible!important; transform:none!important;filter:none!important;text-shadow:none!important; white-space:normal!important;letter-spacing:-.045em!important; } html body .tzx-home #contact .tzx-contact > div:first-child h2{ display:block!important;width:100%!important;max-width:540px!important; margin:14px 0 16px!important;font-size:clamp(34px,3.6vw,48px)!important; font-weight:800!important;line-height:1.12!important; } html body .tzx-home #contact .tzx-contact > div:first-child h2 .tzx-contact-highlight{ color:#1684f8!important;font-weight:800!important; } html body .tzx-home #contact .tzx-contact > div:first-child .tzx-kicker{color:#1684f8!important} html body .tzx-home #contact .tzx-contact > div:first-child > p{color:#596579!important} @media(max-width:760px){html body .tzx-home #contact .tzx-contact > div:first-child h2{font-size:34px!important;line-height:1.12!important}} /* Fix contact headline wrapping and ensure readable text colors */ html body .tzx-home #contact .tzx-contact-profile h2{display:block!important;position:relative!important;width:100%!important;max-width:540px!important;color:#101828!important;font-size:clamp(34px,3.6vw,48px)!important;line-height:1.12!important;letter-spacing:-.045em!important;overflow:visible!important;white-space:normal!important} html body .tzx-home #contact .tzx-contact-profile h2 .tzx-contact-highlight{display:inline!important;position:static!important;float:none!important;width:auto!important;height:auto!important;margin:0!important;padding:0!important;color:#1684f8!important;font:inherit!important;font-weight:800!important;line-height:inherit!important;letter-spacing:inherit!important;white-space:normal!important;transform:none!important;opacity:1!important} html body .tzx-home #contact .tzx-contact-profile .tzx-kicker{color:#1684f8!important} html body .tzx-home #contact .tzx-contact-profile>p{color:#596579!important;font-size:15px!important;line-height:1.7!important} html body .tzx-home #contact .tzx-contact-points li{color:#344054!important;font-size:13px!important} html body .tzx-home #contact .tzx-ceo-card strong{color:#101828!important} html body .tzx-home #contact .tzx-ceo-card span{color:#667085!important} @media(max-width:760px){html body .tzx-home #contact .tzx-contact-profile h2{font-size:34px!important;line-height:1.12!important}} html body .tzx-home #contact.tzx-dark{background:#fff!important;color:#101828!important;padding:78px 0!important;overflow:hidden!important} html body .tzx-home #contact.tzx-dark:before{background:radial-gradient(ellipse at 12% 10%,rgba(255,205,130,.22),transparent 26%),radial-gradient(ellipse at 95% 80%,rgba(84,190,255,.22),transparent 32%),radial-gradient(ellipse at 4% 78%,rgba(179,152,255,.12),transparent 24%)!important} html body .tzx-home #contact .tzx-contact{display:grid!important;grid-template-columns:minmax(0,1fr) minmax(0,1fr)!important;align-items:center!important;gap:clamp(30px,4vw,64px)!important;max-width:1180px!important;margin:0 auto!important;padding:clamp(28px,3vw,48px)!important;border:1px solid rgba(17,24,39,.06)!important;border-radius:30px!important;background:rgba(255,255,255,.78)!important;box-shadow:0 20px 65px rgba(31,54,89,.12)!important;backdrop-filter:blur(18px)!important} html body .tzx-home #contact .tzx-contact-profile .tzx-kicker{color:#1684f8!important} html body .tzx-home #contact .tzx-contact-profile h2{color:#101828!important;font-size:clamp(32px,3.6vw,46px)!important;line-height:1.1!important;letter-spacing:-.05em!important} html body .tzx-home #contact .tzx-contact-highlight{color:#1684f8!important} html body .tzx-home #contact .tzx-contact-profile>p{color:#596579!important} html body .tzx-home #contact .tzx-ceo-card{margin:24px 0 20px!important} html body .tzx-home #contact .tzx-ceo-card img{width:96px!important;height:104px!important;flex-basis:96px!important;border-radius:16px!important;box-shadow:0 8px 24px rgba(15,23,42,.12)!important} html body .tzx-home #contact .tzx-ceo-card strong{color:#101828!important} html body .tzx-home #contact .tzx-ceo-card span{color:#667085!important} html body .tzx-home #contact .tzx-contact-points li{color:#344054!important} html body .tzx-home #contact .tzx-contact-points li:before{border-color:#1684f8!important;color:#1684f8!important} html body .tzx-home #contact .tzx-meeting-link{background:linear-gradient(110deg,#42b9ff,#3478ff)!important;box-shadow:0 12px 28px rgba(39,128,255,.24)!important} html body .tzx-home #contact .tzx-contactform{background:linear-gradient(145deg,rgba(26,37,55,.96),rgba(39,49,63,.96))!important;border:1px solid rgba(255,255,255,.34)!important;border-radius:22px!important;padding:clamp(22px,2.5vw,34px)!important;box-shadow:0 18px 45px rgba(25,51,85,.25)!important;backdrop-filter:blur(22px)!important} html body .tzx-home #contact .tzx-contactform:before{padding:10px 12px!important;border:1px solid rgba(56,185,255,.35)!important;border-radius:999px!important;background:rgba(56,185,255,.12)!important;color:#b8e8ff!important} html body .tzx-home #contact .tzx-contactform .forminator-ui input:not([type=checkbox]):not([type=radio]):not([type=submit]),html body .tzx-home #contact .tzx-contactform .forminator-ui select,html body .tzx-home #contact .tzx-contactform .forminator-ui textarea{background:rgba(255,255,255,.09)!important;border-color:rgba(255,255,255,.22)!important;color:#fff!important} @media(max-width:760px){html body .tzx-home #contact.tzx-dark{padding:48px 0!important}html body .tzx-home #contact .tzx-contact{grid-template-columns:minmax(0,1fr)!important;gap:28px!important;padding:22px 17px!important;border-radius:24px!important}html body .tzx-home #contact .tzx-contact-profile h2{font-size:34px!important}html body .tzx-home #contact .tzx-contactform{padding:22px 16px!important;border-radius:19px!important}} /* TecxZoo homepage: staggered hero entrance */ html body .tzx-home.tzx-motion-enabled .tzx-hero .tzx-kicker, html body .tzx-home.tzx-motion-enabled .tzx-hero h1, html body .tzx-home.tzx-motion-enabled .tzx-hero p{ opacity:0!important; transform:translate3d(0,18px,0)!important; transition:opacity .85s cubic-bezier(.2,.7,.2,1),transform .85s cubic-bezier(.2,.7,.2,1)!important; } html body .tzx-home.tzx-motion-enabled .tzx-hero.tzx-is-visible .tzx-kicker{ opacity:1!important;transform:translate3d(0,0,0)!important;transition-delay:.12s!important; } html body .tzx-home.tzx-motion-enabled .tzx-hero.tzx-is-visible h1{ opacity:1!important;transform:translate3d(0,0,0)!important;transition-delay:.28s!important; } html body .tzx-home.tzx-motion-enabled .tzx-hero.tzx-is-visible p{ opacity:1!important;transform:translate3d(0,0,0)!important;transition-delay:.44s!important; } @media(prefers-reduced-motion:reduce){ html body .tzx-home.tzx-motion-enabled .tzx-hero .tzx-kicker, html body .tzx-home.tzx-motion-enabled .tzx-hero h1, html body .tzx-home.tzx-motion-enabled .tzx-hero p{ opacity:1!important;transform:none!important;transition:none!important; } } /* TecxZoo premium homepage hero */ html body .tzx-home main#top>section.tzx-hero{ box-sizing:border-box!important; min-height:100svh!important; height:auto!important; padding:142px 0 82px!important; background-color:#f6f9ff!important; background-image: radial-gradient(ellipse at 82% 49%,rgba(70,173,255,.19) 0%,rgba(70,173,255,0) 43%), radial-gradient(ellipse at 13% 14%,rgba(203,187,255,.22) 0%,rgba(203,187,255,0) 40%), linear-gradient(125deg,#fbfcff 0%,#f4f8ff 54%,#f8f6ff 100%)!important; background-position:center!important; background-size:cover!important; } html body .tzx-home main#top>section.tzx-hero .tzx-hero-grid{ position:relative!important; isolation:isolate!important; display:grid!important; grid-template-columns:minmax(0,1.05fr) minmax(0,.95fr)!important; align-items:center!important; justify-content:initial!important; gap:clamp(28px,5vw,76px)!important; width:min(1220px,calc(100% - 64px))!important; max-width:1220px!important; min-height:min(700px,calc(100svh - 220px))!important; margin:0 auto!important; padding:0!important; text-align:left!important; } html body .tzx-home main#top>section.tzx-hero .tzx-hero-copy{ position:relative!important; z-index:2!important; grid-column:1!important; width:100%!important; max-width:680px!important; margin:0!important; text-align:left!important; } html body .tzx-home main#top>section.tzx-hero .tzx-kicker{ display:inline-flex!important; align-items:center!important; margin:0 0 25px!important; padding:10px 14px!important; border:1px solid rgba(22,132,248,.16)!important; border-radius:999px!important; background:rgba(255,255,255,.72)!important; box-shadow:0 8px 24px rgba(28,86,150,.06)!important; color:#1678e8!important; font-size:11px!important; font-weight:800!important; letter-spacing:.16em!important; } html body .tzx-home main#top>section.tzx-hero .tzx-hero-copy h1{ max-width:720px!important; margin:0 0 25px!important; color:#111827!important; font-size:clamp(52px,6.2vw,88px)!important; font-weight:800!important; line-height:1.01!important; letter-spacing:-.065em!important; text-align:left!important; } html body .tzx-home main#top>section.tzx-hero .tzx-hero-copy h1 .tzx-gradient{ display:inline-block!important; background:linear-gradient(100deg,#1478ed 3%,#31aaf3 49%,#7163e9 100%)!important; background-clip:text!important; -webkit-background-clip:text!important; color:transparent!important; -webkit-text-fill-color:transparent!important; font-family:Georgia,"Times New Roman",serif!important; font-style:italic!important; font-weight:500!important; letter-spacing:-.065em!important; } html body .tzx-home main#top>section.tzx-hero .tzx-hero-copy>p{ max-width:570px!important; margin:0!important; color:#4d5b70!important; font-size:clamp(16px,1.25vw,19px)!important; line-height:1.75!important; } html body .tzx-home main#top>section.tzx-hero .tzx-hero-grid:before, html body .tzx-home main#top>section.tzx-hero .tzx-hero-grid:after{ content:""!important; position:absolute!important; top:50%!important; right:1%!important; display:block!important; width:min(39vw,470px)!important; aspect-ratio:1!important; pointer-events:none!important; border-radius:50%!important; } html body .tzx-home main#top>section.tzx-hero .tzx-hero-grid:before{ z-index:0!important; border:1px solid rgba(56,153,239,.21)!important; box-shadow:0 0 0 18px rgba(56,153,239,.035),0 0 0 48px rgba(56,153,239,.025),0 0 0 82px rgba(56,153,239,.018)!important; transform:translateY(-50%) rotate(-22deg)!important; } html body .tzx-home main#top>section.tzx-hero .tzx-hero-grid:after{ z-index:0!important; right:5%!important; width:min(34vw,410px)!important; border:1px solid rgba(255,255,255,.9)!important; background: radial-gradient(circle at 50% 50%,rgba(255,255,255,.98) 0 6%,rgba(91,181,255,.88) 6.5% 7.5%,transparent 8%), radial-gradient(circle at 50% 50%,transparent 0 19%,rgba(255,255,255,.78) 19.4% 19.9%,transparent 20.4%), radial-gradient(circle at 35% 28%,rgba(255,255,255,.98) 0%,rgba(218,239,255,.82) 24%,rgba(170,207,255,.48) 52%,rgba(193,177,255,.27) 72%,rgba(255,255,255,.12) 100%)!important; box-shadow:inset -22px -28px 70px rgba(88,120,220,.12),inset 20px 18px 55px rgba(255,255,255,.92),0 32px 90px rgba(54,112,198,.16)!important; transform:translateY(-50%)!important; animation:tzxHeroFloat 9s ease-in-out infinite!important; } @keyframes tzxHeroFloat{0%,100%{translate:0 0}50%{translate:0 -9px}} @media(max-width:900px){ html body .tzx-home main#top>section.tzx-hero .tzx-hero-grid{ grid-template-columns:minmax(0,1fr)!important; min-height:0!important; padding-bottom:clamp(220px,45vw,330px)!important; } html body .tzx-home main#top>section.tzx-hero .tzx-hero-copy{max-width:760px!important} html body .tzx-home main#top>section.tzx-hero .tzx-hero-grid:before, html body .tzx-home main#top>section.tzx-hero .tzx-hero-grid:after{ top:auto!important; right:50%!important; bottom:0!important; width:min(62vw,330px)!important; transform:translateX(50%)!important; } html body .tzx-home main#top>section.tzx-hero .tzx-hero-grid:after{ right:50%!important; width:min(54vw,286px)!important; transform:translateX(50%)!important; } } @media(max-width:760px){ html body .tzx-home main#top>section.tzx-hero{ min-height:100svh!important; padding:124px 0 54px!important; } html body .tzx-home main#top>section.tzx-hero .tzx-hero-grid{ display:block!important; width:calc(100% - 36px)!important; padding-bottom:clamp(190px,48vw,250px)!important; text-align:left!important; } html body .tzx-home main#top>section.tzx-hero .tzx-hero-copy{ width:100%!important; max-width:680px!important; text-align:left!important; } html body .tzx-home main#top>section.tzx-hero .tzx-kicker{ margin-bottom:21px!important; padding:9px 12px!important; font-size:10px!important; letter-spacing:.13em!important; } html body .tzx-home main#top>section.tzx-hero .tzx-hero-copy h1{ max-width:600px!important; margin:0 0 19px!important; font-size:clamp(40px,8.5vw,60px)!important; line-height:1.05!important; letter-spacing:-.055em!important; } html body .tzx-home main#top>section.tzx-hero .tzx-hero-copy h1 .tzx-gradient{letter-spacing:-.055em!important} html body .tzx-home main#top>section.tzx-hero .tzx-hero-copy>p{ max-width:600px!important; font-size:15px!important; line-height:1.7!important; } } @media(max-width:420px){ html body .tzx-home main#top>section.tzx-hero .tzx-hero-copy h1{font-size:clamp(36px,9.7vw,43px)!important} } @media(prefers-reduced-motion:reduce){ html body .tzx-home main#top>section.tzx-hero .tzx-hero-grid:after{animation:none!important;translate:none!important} } /* TecxZoo global fixed social rail */ html body .tzx-social-rail{ position:fixed!important;z-index:99999!important;left:16px!important;top:50%!important; transform:translateY(-50%)!important;display:flex!important;flex-direction:column!important; align-items:center!important;gap:9px!important;padding:13px 8px!important; border:1px solid rgba(13,95,220,.15)!important;border-radius:999px!important; background:rgba(255,255,255,.94)!important;box-shadow:0 12px 36px rgba(18,55,105,.18)!important; backdrop-filter:blur(14px)!important;-webkit-backdrop-filter:blur(14px)!important; } html body .tzx-social-rail__label{ display:block!important;margin:0 0 2px!important;color:#1b65d8!important; font:700 9px/1 Arial,sans-serif!important;letter-spacing:.15em!important; writing-mode:vertical-rl!important;transform:rotate(180deg)!important; } html body .tzx-social-rail__item{ width:36px!important;height:36px!important;display:grid!important;place-items:center!important; border:1px solid rgba(20,102,225,.13)!important;border-radius:50%!important; background:#fff!important;color:#126be3!important; box-shadow:0 3px 10px rgba(18,87,175,.08)!important; transition:transform .22s ease,color .22s ease,box-shadow .22s ease!important; } html body .tzx-social-rail__item svg{width:16px!important;height:16px!important;display:block!important;fill:currentColor!important} html body .tzx-social-rail__item{cursor:pointer!important;text-decoration:none!important} html body .tzx-social-rail__item:hover{transform:translateY(-2px)!important;color:#075bd0!important;box-shadow:0 7px 16px rgba(18,87,175,.16)!important} html body .tzx-social-rail__item:focus-visible{outline:3px solid #1684f8!important;outline-offset:3px!important} @media(max-width:640px){ html body .tzx-social-rail, html body footer.wp-block-template-part .wp-block-social-links{display:none!important} } @media(prefers-reduced-motion:reduce){html body .tzx-social-rail__item{transition:none!important}}