/* Theme Name: Monavaz Basic Author: Monavaz Author URI: https://monavaz.com Description: The basic theme made for Monavaz Sites. Any other use is strictly prohibited. Version: 5.0.103 Revision: C50420 Writer: Louis Clay Copyright © 2025 Monavaz, LLC. All Rights Reserved. Tested up to: 6.8 Requires at least: 6.7.2 Requires PHP: 8.4 */ html, html.light-mode { --monavaz-color-accent-a00: var(--wp--preset--color--light-accent-00) !important; --monavaz-color-accent-a10: var(--wp--preset--color--light-accent-10) !important; --monavaz-color-accent-a20: var(--wp--preset--color--light-accent-20) !important; --monavaz-color-accent-a30: var(--wp--preset--color--light-accent-30) !important; --monavaz-color-accent-a40: var(--wp--preset--color--light-accent-40) !important; --monavaz-color-accent-a50: var(--wp--preset--color--light-accent-50) !important; --monavaz-color-surface-a00: var(--wp--preset--color--light-surface-00) !important; --monavaz-color-surface-a10: var(--wp--preset--color--light-surface-10) !important; --monavaz-color-surface-a20: var(--wp--preset--color--light-surface-20) !important; --monavaz-color-surface-a30: var(--wp--preset--color--light-surface-30) !important; --monavaz-color-surface-a40: var(--wp--preset--color--light-surface-40) !important; --monavaz-color-surface-a50: var(--wp--preset--color--light-surface-50) !important; --monavaz-color-text-a00: var(--wp--preset--color--light-text-00) !important; --monavaz-color-text-a10: var(--wp--preset--color--light-text-10) !important; --monavaz-color-text-a20: var(--wp--preset--color--light-text-20) !important; --monavaz-color-text-a30: var(--wp--preset--color--light-text-30) !important; --monavaz-color-text-a40: var(--wp--preset--color--light-text-40) !important; --monavaz-color-text-a50: var(--wp--preset--color--light-text-50) !important; --monavaz-color-tonal-a00: var(--wp--preset--color--light-tonal-00) !important; --monavaz-color-tonal-a10: var(--wp--preset--color--light-tonal-10) !important; --monavaz-color-tonal-a20: var(--wp--preset--color--light-tonal-20) !important; --monavaz-color-tonal-a30: var(--wp--preset--color--light-tonal-30) !important; --monavaz-color-tonal-a40: var(--wp--preset--color--light-tonal-40) !important; --monavaz-color-tonal-a50: var(--wp--preset--color--light-tonal-50) !important; --header-shadow: 0 10px 15px 5px rgba(0, 0, 0, 3%); --inv-header-shadow: 0 -10px 15px 5px rgba(0, 0, 0, 3%); } html.dark-mode { --monavaz-color-accent-a00: var(--wp--preset--color--dark-accent-00) !important; --monavaz-color-accent-a10: var(--wp--preset--color--dark-accent-10) !important; --monavaz-color-accent-a20: var(--wp--preset--color--dark-accent-20) !important; --monavaz-color-accent-a30: var(--wp--preset--color--dark-accent-30) !important; --monavaz-color-accent-a40: var(--wp--preset--color--dark-accent-40) !important; --monavaz-color-accent-a50: var(--wp--preset--color--dark-accent-50) !important; --monavaz-color-surface-a00: var(--wp--preset--color--dark-surface-00) !important; --monavaz-color-surface-a10: var(--wp--preset--color--dark-surface-10) !important; --monavaz-color-surface-a20: var(--wp--preset--color--dark-surface-20) !important; --monavaz-color-surface-a30: var(--wp--preset--color--dark-surface-30) !important; --monavaz-color-surface-a40: var(--wp--preset--color--dark-surface-40) !important; --monavaz-color-surface-a50: var(--wp--preset--color--dark-surface-50) !important; --monavaz-color-text-a00: var(--wp--preset--color--dark-text-00) !important; --monavaz-color-text-a10: var(--wp--preset--color--dark-text-10) !important; --monavaz-color-text-a20: var(--wp--preset--color--dark-text-20) !important; --monavaz-color-text-a30: var(--wp--preset--color--dark-text-30) !important; --monavaz-color-text-a40: var(--wp--preset--color--dark-text-40) !important; --monavaz-color-text-a50: var(--wp--preset--color--dark-text-50) !important; --monavaz-color-tonal-a00: var(--wp--preset--color--dark-tonal-00) !important; --monavaz-color-tonal-a10: var(--wp--preset--color--dark-tonal-10) !important; --monavaz-color-tonal-a20: var(--wp--preset--color--dark-tonal-20) !important; --monavaz-color-tonal-a30: var(--wp--preset--color--dark-tonal-30) !important; --monavaz-color-tonal-a40: var(--wp--preset--color--dark-tonal-40) !important; --monavaz-color-tonal-a50: var(--wp--preset--color--dark-tonal-50) !important; --header-shadow: 0 10px 15px 5px rgba(0, 0, 0, 15%); --inv-header-shadow: 0 -10px 15px 5px rgba(0, 0, 0, 15%); } @media (prefers-color-scheme: dark) { html.default-colors { --monavaz-color-accent-a00: var(--wp--preset--color--dark-accent-00) !important; --monavaz-color-accent-a10: var(--wp--preset--color--dark-accent-10) !important; --monavaz-color-accent-a20: var(--wp--preset--color--dark-accent-20) !important; --monavaz-color-accent-a30: var(--wp--preset--color--dark-accent-30) !important; --monavaz-color-accent-a40: var(--wp--preset--color--dark-accent-40) !important; --monavaz-color-accent-a50: var(--wp--preset--color--dark-accent-50) !important; --monavaz-color-surface-a00: var(--wp--preset--color--dark-surface-00) !important; --monavaz-color-surface-a10: var(--wp--preset--color--dark-surface-10) !important; --monavaz-color-surface-a20: var(--wp--preset--color--dark-surface-20) !important; --monavaz-color-surface-a30: var(--wp--preset--color--dark-surface-30) !important; --monavaz-color-surface-a40: var(--wp--preset--color--dark-surface-40) !important; --monavaz-color-surface-a50: var(--wp--preset--color--dark-surface-50) !important; --monavaz-color-text-a00: var(--wp--preset--color--dark-text-00) !important; --monavaz-color-text-a10: var(--wp--preset--color--dark-text-10) !important; --monavaz-color-text-a20: var(--wp--preset--color--dark-text-20) !important; --monavaz-color-text-a30: var(--wp--preset--color--dark-text-30) !important; --monavaz-color-text-a40: var(--wp--preset--color--dark-text-40) !important; --monavaz-color-text-a50: var(--wp--preset--color--dark-text-50) !important; --monavaz-color-tonal-a00: var(--wp--preset--color--dark-tonal-00) !important; --monavaz-color-tonal-a10: var(--wp--preset--color--dark-tonal-10) !important; --monavaz-color-tonal-a20: var(--wp--preset--color--dark-tonal-20) !important; --monavaz-color-tonal-a30: var(--wp--preset--color--dark-tonal-30) !important; --monavaz-color-tonal-a40: var(--wp--preset--color--dark-tonal-40) !important; --monavaz-color-tonal-a50: var(--wp--preset--color--dark-tonal-50) !important; --header-shadow: 0 10px 15px 5px rgba(0, 0, 0, 15%); --inv-header-shadow: 0 -10px 15px 5px rgba(0, 0, 0, 15%); } } @media (prefers-color-scheme: light) { html.default-colors { --monavaz-color-accent-a00: var(--wp--preset--color--light-accent-00) !important; --monavaz-color-accent-a10: var(--wp--preset--color--light-accent-10) !important; --monavaz-color-accent-a20: var(--wp--preset--color--light-accent-20) !important; --monavaz-color-accent-a30: var(--wp--preset--color--light-accent-30) !important; --monavaz-color-accent-a40: var(--wp--preset--color--light-accent-40) !important; --monavaz-color-accent-a50: var(--wp--preset--color--light-accent-50) !important; --monavaz-color-surface-a00: var(--wp--preset--color--light-surface-00) !important; --monavaz-color-surface-a10: var(--wp--preset--color--light-surface-10) !important; --monavaz-color-surface-a20: var(--wp--preset--color--light-surface-20) !important; --monavaz-color-surface-a30: var(--wp--preset--color--light-surface-30) !important; --monavaz-color-surface-a40: var(--wp--preset--color--light-surface-40) !important; --monavaz-color-surface-a50: var(--wp--preset--color--light-surface-50) !important; --monavaz-color-text-a00: var(--wp--preset--color--light-text-00) !important; --monavaz-color-text-a10: var(--wp--preset--color--light-text-10) !important; --monavaz-color-text-a20: var(--wp--preset--color--light-text-20) !important; --monavaz-color-text-a30: var(--wp--preset--color--light-text-30) !important; --monavaz-color-text-a40: var(--wp--preset--color--light-text-40) !important; --monavaz-color-text-a50: var(--wp--preset--color--light-text-50) !important; --monavaz-color-tonal-a00: var(--wp--preset--color--light-tonal-00) !important; --monavaz-color-tonal-a10: var(--wp--preset--color--light-tonal-10) !important; --monavaz-color-tonal-a20: var(--wp--preset--color--light-tonal-20) !important; --monavaz-color-tonal-a30: var(--wp--preset--color--light-tonal-30) !important; --monavaz-color-tonal-a40: var(--wp--preset--color--light-tonal-40) !important; --monavaz-color-tonal-a50: var(--wp--preset--color--light-tonal-50) !important; --header-shadow: 0 10px 15px 5px rgba(0, 0, 0, 3%); --inv-header-shadow: 0 -10px 15px 5px rgba(0, 0, 0, 3%); } } @font-face{font-family: 'monavaz-sans'; src: url('assets/core/monavaz-sans.woff2') format('woff2'), url('assets/core/monavaz-sans.woff') format('woff'); font-weight: 500; font-style: normal; font-display: auto;} @font-face{font-family: 'monavaz-sans'; src: url('assets/core/monavaz-sans-bold.woff2') format('woff2'), url('assets/core/monavaz-sans-bold.woff') format('woff'); font-weight: 700; font-style: normal; font-display: auto;} @font-face{font-family: 'monavaz-sans'; src: url('assets/core/monavaz-sans-black.woff2') format('woff2'), url('assets/core/monavaz-sans-black.woff') format('woff'); font-weight: 900; font-style: normal; font-display: auto;} * { -webkit-tap-highlight-color: transparent !important; font-family: "monavaz-sans"; letter-spacing: -0.02em; direction: ltr; -moz-osx-font-smoothing: grayscale; -webkit-font-smoothing: antialiased; } html { --wp--preset--font-size--small: 0.875em !important; --wp--preset--font-size--normal: 1.125em !important; --wp--preset--font-size--medium: 1.25em !important; --wp--preset--font-size--large: 2.75em !important; --wp--preset--font-size--x-large: 3.75em !important; } html, body { width: 100vw; overflow-x: hidden; margin: 0; padding: 0; background: var(--monavaz-color-surface-a00); transition: all var(--wp--preset--animation_dur) ease-in-out; } .container { width: 100%; margin: 0 auto; max-width: 1440px; } .__site_banner { position: fixed; top: 0; left: 0; height: var(--wp--preset--banner_size); width: 100vw; z-index: 99999; background: #F82F60; color: white; direction: ltr; font-size: var(--wp--preset--font-size--small); display: flex; align-items: center; justify-content: center; } .__site_banner .mza-icon { --size: 24px; --color: white; --hov_color: #ff98b2; --weight: 2px; position: absolute; left: 10px; margin: 0; } /* XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX -- TEXT -- XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX */ h1, h2, h3, h4, h5, h6 { margin-top: 0; font-weight: 700; max-width: 600px; color: var(--monavaz-color-text-a00); } h1 { font-size: 3.5em; } h2 { font-size: 2.4em; margin: 0.67em auto; } h3 { font-size: 2em; margin: 0.67em auto; } p { font-size: var(--wp--preset--font-size--normal); line-height: 1.4em; font-weight: 500; margin: 1em auto; color: var(--monavaz-color-text-a30); } a { transition: all var(--wp--preset--animation_dur) ease-in-out; font-weight: inherit; text-decoration: none !important; color: inherit; position: relative; padding: 4px 0; width: fit-content; } a::after { content: ''; position: absolute; bottom: 0; left: 0; width: 100%; height: 2px; border-radius: 1px; background-color: var(--monavaz-color-tonal-a00); opacity: 1; transition: all var(--wp--preset--animation_dur) ease-in-out; transform: scale(0); transform-origin: center; } a[class^="__mza-icon-"], [class^="__mza-icon-"] a { display: inline-flex; justify-content: center; align-items: center; } [class^="__mza-icon-"] .mza-icon { --color: var(--monavaz-color-text-a30); --hov_color: var(--monavaz-color-text-a30); --size: 1em; --weight: 2.5px; margin: 0 5px; } .wp-block-list { font-size: var(--wp--preset--font-size--normal); text-align: left; color: var(--monavaz-color-text-a30); padding-left: 1em; display: flex; flex-direction: column; gap: 0.25em; } .is-skeleton-text { background: var(--monavaz-api-surface-a50); color: var(--monavaz-api-surface-a50); border-radius: 1em; padding: 0 0.5em; } .has-small-text { color: var(--monavaz-color-text-a50); font-size: var(--wp--preset--font-size--small) !important; text-align: center !important; margin: 2em auto; } .has-x-large-font-size { font-size: var(--wp--preset--font-size--x-large) !important; line-height: 1.05em !important; font-weight: 700 !important; margin: 0.67em auto !important; } .has-large-font-size { font-size: var(--wp--preset--font-size--large) !important; line-height: 1.05em !important; font-weight: 700 !important; margin: 0.67em auto !important; } .has-medium-font-size { font-size: var(--wp--preset--font-size--medium) !important; line-height: 1.4em !important; margin: 1em auto !important; } .has-small-font-size { font-size: var(--wp--preset--font-size--small) !important; line-height: 1.4em !important; margin: 0 auto !important; } sup { font-size: 0.625em !important; font-weight: 700; } sup.exponent { font-size: 0.875em !important; font-weight: 500; } @media (hover: none) { a.has-touch::after { opacity: 1; transform: scale(1); } } @media (hover: hover) { a:hover::after, a:focus::after { opacity: 1; transform: scale(1); } } /* XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX -- SIZES -- XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX */ .has__no_margin { margin: 0 !important; } .has__no_margin_inner > div { margin: 0 !important; } .has__margin_1 { margin: 1em !important; } .has__margin_2 { margin: 2em !important; } .has__margin_3 { margin: 3em !important; } .has__no_margin_top { margin-top: 0 !important; } .has__margin_top_1 { margin-top: 1em !important; } .has__margin_top_2 { margin-top: 2em !important; } .has__margin_top_3 { margin-top: 3em !important; } .has__no_margin_left { margin-left: 0 !important; } .has__margin_left_1 { margin-left: 1em !important; } .has__margin_left_2 { margin-left: 2em !important; } .has__margin_left_3 { margin-left: 3em !important; } .has__no_margin_right { margin-right: 0 !important; } .has__margin_right_1 { margin-right: 1em !important; } .has__margin_right_2 { margin-right: 2em !important; } .has__margin_right_3 { margin-right: 3em !important; } .has__no_margin_bottom { margin-bottom: 0 !important; } .has__margin_bottom_1 { margin-bottom: 1em !important; } .has__margin_bottom_2 { margin-bottom: 2em !important; } .has__margin_bottom_3 { margin-bottom: 3em !important; } .has__no_padding { padding: 0 !important; } .has__no_padding_inner > div { padding: 0 !important; } .has__padding_1 { padding: 1em !important; } .has__padding_2 { padding: 2em !important; } .has__padding_3 { padding: 3em !important; } .has__no_padding_top { padding-top: 0 !important; } .has__padding_top_1 { padding-top: 1em !important; } .has__padding_top_2 { padding-top: 2em !important; } .has__padding_top_3 { padding-top: 3em !important; } .has__no_padding_left { padding-left: 0 !important; } .has__padding_left_1 { padding-left: 1em !important; } .has__padding_left_2 { padding-left: 2em !important; } .has__padding_left_3 { padding-left: 3em !important; } .has__no_padding_right { padding-right: 0 !important; } .has__padding_right_1 { padding-right: 1em !important; } .has__padding_right_2 { padding-right: 2em !important; } .has__padding_right_3 { padding-right: 3em !important; } .has__no_padding_bottom { padding-bottom: 0 !important; } .has__padding_bottom_1 { padding-bottom: 1em !important; } .has__padding_bottom_2 { padding-bottom: 2em !important; } .has__padding_bottom_3 { padding-bottom: 3em !important; } .has__display_inline { display: inline; } .has__display_inline_block { display: inline-block; } .has__display_inline_flex { display: inline-flex; } .has-align-left { text-align: left !important; margin-left: 0 !important; margin-right: auto !important; } .has-text-align-left { text-align: left !important; margin-left: 0 !important; margin-right: auto !important; } .has-align-center { text-align: center !important; margin-left: auto !important; margin-right: auto !important; } .has-text-align-center { text-align: center !important; margin-left: auto !important; margin-right: auto !important; } .has-align-right { text-align: right !important; margin-left: auto !important; margin-right: 0 !important; } .has-text-align-right { text-align: right !important; margin-left: auto !important; margin-right: 0 !important; } /* XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX -- HEADER -- XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX */ header { position: fixed; z-index: 99; height: var(--wp--preset--header_size); padding: 0 2em; max-width: 100vw; width: calc(100vw - 4em); margin: 0; display: flex; align-items: center; background-color: var(--monavaz-color-surface-a00); transition: all var(--wp--preset--animation_dur) ease-in-out; } header.scrolled { box-shadow: var(--header-shadow); } header .main-shield { position: fixed; top: 0; bottom: 100vh; left: 0; right: 0; background-color: var(--monavaz-color-surface-a00); opacity: 0.001; z-index: -1; } header.opened .main-shield { bottom: 0; } header .site-logo { margin: 0 auto 0 0; height: calc(var(--wp--preset--header_size) - 0.5em); width: calc(var(--wp--preset--header_size) - 0.5em); padding: 0; outline: none; } header .site-logo::after { content: unset !important; } header .site-logo img { height: calc(var(--wp--preset--header_size) - 0.5em); width: calc(var(--wp--preset--header_size) - 0.5em); -webkit-tap-highlight-color: transparent; outline: none; } header .mza-icon { --color: var(--monavaz-color-text-a00); --hov_color: var(--monavaz-color-text-a30); --size: 2.5em; margin: 0; } header .header-icons { display: flex; flex-direction: row; gap: 1em; padding-left: 1em; margin-left: auto; } header .shop-button > svg { height: 28px; width: 28px; } header .shop-button.notify::after { content: ''; background: var(--wp--preset--color--radical-red); height: 10px; width: 10px; border-radius: 10px; transition: all var(--wp--preset--animation_dur) ease-in-out; } header .menu-hld { background-color: var(--monavaz-color-surface-a00); position: absolute; top: 0; left: 0; right: 0; display: flex; flex-direction: column; height: 0; margin: 0; overflow: hidden; padding-top: var(--wp--preset--header_size); z-index: -1; transition: height calc(var(--wp--preset--animation_dur) * 2) ease-in-out, background-color var(--wp--preset--animation_dur) ease-in-out; } header.opened .menu-hld { box-shadow: var(--header-shadow); height: var(--maxsize); } header .main-menu { position: relative; display: block; height: fit-content; position: relative; padding: 1em 3em 2em; opacity: 0; transition: all calc(var(--wp--preset--animation_dur) * 4) ease-in-out; transform: translateY(-1em); } header.opened .main-menu { opacity: 1; -webkit-transform: translateY(0); -moz-transform: translateY(0); -ms-transform: translateY(0); transform: translateY(0); } header .menu { padding: 0; list-style: none; text-align: left; display: flex; flex-direction: column; text-align: left; justify-content: center; margin: 0; gap: 1em; overflow-x: hidden; } header .menu li { color: var(--monavaz-color-text-a50); padding: 4px 0; } header .menu li a { color: inherit; text-align: inherit; margin: 0; font-size: 1.25em; } header .menu li.current-menu-item { color: var(--monavaz-color-text-a00); } header .menu li.current-menu-item a::after { transform: scale(1) !important; } header .menu-usr { display: flex; align-items: center; justify-content: flex-start; flex-direction: row; gap: 1em; margin-left: 3em; padding-bottom: 3em; opacity: 0; transition: all calc(var(--wp--preset--animation_dur) * 4) ease-in-out; transform: translateY(-1em); } header.opened .menu-usr { opacity: 1; -webkit-transform: translateY(0); -moz-transform: translateY(0); -ms-transform: translateY(0); transform: translateY(0); } header .menu-usr-hld{ display: flex; align-items: center; flex-direction: row; gap: 1em; } header .menu-usr-hld::after { content: var(--name); display: block; font-size: var(--wp--preset--font-size--normal); color: var(--monavaz-color-text-a00); } header .menu-usr img { height: 2em; width: 2em; border-radius: 2em; cursor: pointer; } header .login-butn { margin: 0 !important; } header .login-butn a { padding: 0.75em 2em; margin: 0 !important; } html.has_banner header { margin-top: var(--wp--preset--banner_size); } /* XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX -- MAIN & SECTIONS -- XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX */ main { --adjusted_header: calc(var(--wp--preset--header_size) + 2em); padding: var(--adjusted_header) 1em 3em; width: calc(100vw - 2em); min-height: calc(100svh - var(--adjusted_header) - 3em); transition: all var(--wp--preset--animation_dur) ease-in-out; } html.has_banner main { --adjusted_header: calc(var(--wp--preset--header_size) + 2em + var(--wp--preset--banner_size)); } section { width: 100%; } section.width_restricted { max-width: 800px; margin: 0 auto; } section.width_wide { max-width: 1200px; margin: 0 auto; } section.space_tall { margin: 100px auto; } section.space_short { margin: 50px auto; } span.divider { display: block; height: 2px; width: calc(100% - 2em); margin: 0 1em; background-color: var(--monavaz-color-surface-a20); border-radius: 1px; } .hidden { display: none !important; } .is-style-rounded { border-radius: var(--wp--preset--radius_size); } .constrained_columns { width: fit-content !important; margin-left: auto !important; margin-right: auto !important; gap: 0 !important; } .float-button { --bg_color: var(--monavaz-color-tonal-a00) !important; --color: var(--monavaz-color-surface-a00) !important; --hov_bg_color: var(--monavaz-color-tonal-a20) !important; --hov_color: var(--monavaz-color-surface-a00) !important; --size: 3em !important; position: fixed !important; bottom: 1em !important; right: 1em !important; margin: 0 !important; z-index: 999 !important; } #theme-button { --bg_color: var(--monavaz-color-surface-a20) !important; --color: var(--monavaz-color-text-a00) !important; --hov_bg_color: var(--monavaz-color-surface-a50) !important; --hov_color: var(--monavaz-color-text-a30) !important; } /* XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX -- SCROLLING -- XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX */ .has__no_scrolling { overflow: hidden; } .scroll_animation { animation-play-state: running; } .scroll_animation.paused { animation: none !important; } @supports (scrollbar-color:auto) { * { scrollbar-color: var(--monavaz-color-surface-a50) var(--monavaz-color-surface-a00); scrollbar-gutter: auto; scrollbar-width: thin; } } /* XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX -- FOOTER -- XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX */ footer { position: absolute; height: auto; padding: 0; max-width: 100vw; width: 100vw; margin: 0; transition: all var(--wp--preset--animation_dur) ease-in-out; } footer .container { position: relative; margin: 0 calc(50% - 50vw); padding: 2em 1em; max-width: 100vw !important; width: calc(100vw - 2em); border-radius: 0; background-color: var(--monavaz-color-surface-a10); display: flex; flex-direction: column; gap: 4em; transition: all var(--wp--preset--animation_dur) ease-in-out; } footer .divider { width: 100%; margin: 0; background-color: var(--monavaz-color-surface-a30); } footer a, footer p { font-size: 1em; text-align: inherit; color: var(--monavaz-color-text-a00); margin: 0; } footer .social-icons { display: flex; flex-direction: row; margin: 0; padding-top: 2em; } footer .social-icons > div { display: flex; align-items: center; justify-content: center; height: 100%; width: 100%; } footer .social-icons .mza-icon { --color: var(--monavaz-color-text-a00); --hov_color: var(--monavaz-color-text-a20); --size: 2em; margin: 0; } footer .menu { padding: 0; list-style: none; text-align: left; display: flex; flex-direction: row; margin: 0; gap: 4em; width: 100%; } footer .sub-menu { padding: 0; list-style: none; text-align: left; display: flex; flex-direction: column; margin-top: 0.5em; gap: 0.5em; } footer .menu-header { color: var(--monavaz-color-text-a50); } footer .copyright { width: 100%; display: flex; flex-direction: column; gap: 1.5em; } footer .copyright > div { display: flex; justify-content: flex-start; align-items: center; gap: 1em; width: 100%; } footer .copyright .mza-icon { --color: var(--monavaz-color-text-a00); --hov_color: var(--monavaz-color-text-a20); --size: 1.5em; margin: 0; } footer .copyright .mza-icon[data-icon="battery"] svg > path:nth-child(2) { --color: var(--wp--preset--color--radical-red) !important; --hov_color: var(--wp--preset--color--radical-red) !important; } footer .copyright .mza-icon[data-icon="battery"].on svg > path:nth-child(2) { --color: var(--wp--preset--color--shamrock) !important; --hov_color: var(--wp--preset--color--shamrock) !important; } /* XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX -- SCREEN SIZE -- XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX */ @media only screen and (min-width: 600px) { header .site-logo { margin-right: 2em; } header .menu-button { display: none; } header .menu-hld { align-items: center; height: auto; width: 100%; flex-direction: row; position: unset; background-color: transparent; padding-top: unset; z-index: unset; box-shadow: unset !important; } header .main-menu { padding: 0; opacity: 1; -webkit-transform: translateY(0); -moz-transform: translateY(0); -ms-transform: translateY(0); transform: translateY(0); } header .menu { flex-direction: row; } header .menu-usr { margin-left: auto; padding-bottom: 0; opacity: 1; -webkit-transform: translateY(0); -moz-transform: translateY(0); -ms-transform: translateY(0); transform: translateY(0); } header .menu-usr-hld { flex-direction: row-reverse; } header .menu-usr-hld::after { font-size: 1em; } header .menu li a { display: flex; justify-content: center; align-items: center; font-size: 1em; } footer .container { padding: 2em 4em; max-width: calc(100% - 8em); width: calc(100% - 8em); } footer .copyright { flex-direction: row; } footer .copyright > div { justify-content: center; } } @media only screen and (max-width: 734px) { .is_night_group, .is_gray_group { padding: 2em 1em; border-radius: 0; width: 100vw; max-width: 100vw !important; margin: 0 calc(50% - 50vw) !important; } } @media only screen and (min-width: 820px) { main:not(:has(.mza-grid-box)) { padding: var(--adjusted_header) 2em 3em; width: calc(100% - 4em); } .flexbox-mobile { flex-direction: row; gap: 2em; } } @media only screen and (min-width: 1068px) { html, body { --wp--preset--font-size--medium: 1.5em !important; --wp--preset--font-size--large: 4.25em !important; --wp--preset--font-size--x-large: 6em !important; --wp--preset--font-size--normal: 1.25em !important; } .wp-block-list, p { max-width: 875px; } } /* XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX -- COLORS -- XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX */ .has-text-color { color: var(--txt_color) !important; } .has-blaze-red-color { --txt_color: var(--wp--preset--color--blaze-red) !important; } .has-carnation-color { --txt_color: var(--wp--preset--color--carnation) !important; } .has-coral-color { --txt_color: var(--wp--preset--color--coral) !important; } .has-sienna-color { --txt_color: var(--wp--preset--color--sienna) !important; } .has-tangerine-color { --txt_color: var(--wp--preset--color--tangerine) !important; } .has-poppy-color { --txt_color: var(--wp--preset--color--poppy) !important; } .has-saffron-color { --txt_color: var(--wp--preset--color--saffron) !important; } .has-sunshine-color { --txt_color: var(--wp--preset--color--sunshine) !important; } .has-lemon-color { --txt_color: var(--wp--preset--color--lemon) !important; } .has-chartreuse-color { --txt_color: var(--wp--preset--color--chartreuse) !important; } .has-emerald-color { --txt_color: var(--wp--preset--color--emerald) !important; } .has-shamrock-color { --txt_color: var(--wp--preset--color--shamrock) !important; } .has-caribbean-sea-color { --txt_color: var(--wp--preset--color--caribbean-sea) !important; } .has-cerulean-color { --txt_color: var(--wp--preset--color--cerulean) !important; } .has-azure-color { --txt_color: var(--wp--preset--color--azure) !important; } .has-radiance-color { --txt_color: var(--wp--preset--color--radiance) !important; } .has-blue-ribbon-color { --txt_color: var(--wp--preset--color--blue-ribbon) !important; } .has-studio-color { --txt_color: var(--wp--preset--color--studio) !important; } .has-royal-purple-color { --txt_color: var(--wp--preset--color--royal-purple) !important; } .has-electric-violet-color { --txt_color: var(--wp--preset--color--electric-violet) !important; } .has-heliotrope-color { --txt_color: var(--wp--preset--color--heliotrope) !important; } .has-fuchsia-color { --txt_color: var(--wp--preset--color--fuchsia) !important; } .has-persian-color { --txt_color: var(--wp--preset--color--persian) !important; } .has-rose-color { --txt_color: var(--wp--preset--color--rose) !important; } .has-radical-red-color { --txt_color: var(--wp--preset--color--radical-red) !important; } .has-black-color { --txt_color: #000; } .has-asphalt-color { --txt_color: var(--wp--preset--color--asphalt) !important; } .has-shuttle-color { --txt_color: var(--wp--preset--color--shuttle) !important; } .has-concrete-color { --txt_color: var(--wp--preset--color--concrete) !important; } .has-iron-color { --txt_color: var(--wp--preset--color--iron) !important; } .has-white-color { --txt_color: #FFF; } .has-background { background-color: var(--bg_color) !important; } .has-blaze-red-background-color { --bg_color: var(--wp--preset--color--blaze-red) !important; } .has-carnation-background-color { --bg_color: var(--wp--preset--color--carnation) !important; } .has-coral-background-color { --bg_color: var(--wp--preset--color--coral) !important; } .has-sienna-background-color { --bg_color: var(--wp--preset--color--sienna) !important; } .has-tangerine-background-color { --bg_color: var(--wp--preset--color--tangerine) !important; } .has-poppy-background-color { --bg_color: var(--wp--preset--color--poppy) !important; } .has-saffron-background-color { --bg_color: var(--wp--preset--color--saffron) !important; } .has-sunshine-background-color { --bg_color: var(--wp--preset--color--sunshine) !important; } .has-lemon-background-color { --bg_color: var(--wp--preset--color--lemon) !important; } .has-chartreuse-background-color { --bg_color: var(--wp--preset--color--chartreuse) !important; } .has-emerald-background-color { --bg_color: var(--wp--preset--color--emerald) !important; } .has-shamrock-background-color { --bg_color: var(--wp--preset--color--shamrock) !important; } .has-caribbean-sea-background-color { --bg_color: var(--wp--preset--color--caribbean-sea) !important; } .has-cerulean-background-color { --bg_color: var(--wp--preset--color--cerulean) !important; } .has-azure-background-color { --bg_color: var(--wp--preset--color--azure) !important; } .has-radiance-background-color { --bg_color: var(--wp--preset--color--radiance) !important; } .has-blue-ribbon-background-color { --bg_color: var(--wp--preset--color--blue-ribbon) !important; } .has-studio-background-color { --bg_color: var(--wp--preset--color--studio) !important; } .has-royal-purple-background-color { --bg_color: var(--wp--preset--color--royal-purple) !important; } .has-electric-violet-background-color { --bg_color: var(--wp--preset--color--electric-violet) !important; } .has-heliotrope-background-color { --bg_color: var(--wp--preset--color--heliotrope) !important; } .has-fuchsia-background-color { --bg_color: var(--wp--preset--color--fuchsia) !important; } .has-persian-background-color { --bg_color: var(--wp--preset--color--persian) !important; } .has-rose-background-color { --bg_color: var(--wp--preset--color--rose) !important; } .has-radical-red-background-color { --bg_color: var(--wp--preset--color--radical-red) !important; } .has-black-background-color { --bg_color: #000; } .has-asphalt-background-color { --bg_color: var(--wp--preset--color--asphalt) !important; } .has-shuttle-background-color { --bg_color: var(--wp--preset--color--shuttle) !important; } .has-concrete-background-color { --bg_color: var(--wp--preset--color--concrete) !important; } .has-iron-background-color { --bg_color: var(--wp--preset--color--iron) !important; } .has-white-background-color { --bg_color: #FFF; } .has-dark-tonal-00-color { --txt_color: var(--wp--preset--dark-tonal-a00); } .has-dark-tonal-10-color { --txt_color: var(--wp--preset--dark-tonal-a10); } .has-dark-tonal-20-color { --txt_color: var(--wp--preset--dark-tonal-a20); } .has-dark-tonal-30-color { --txt_color: var(--wp--preset--dark-tonal-a30); } .has-dark-tonal-40-color { --txt_color: var(--wp--preset--dark-tonal-a40); } .has-dark-tonal-50-color { --txt_color: var(--wp--preset--dark-tonal-a50); } .has-dark-accent-00-color { --txt_color: var(--wp--preset--dark-accent-a00); } .has-dark-accent-10-color { --txt_color: var(--wp--preset--dark-accent-a10); } .has-dark-accent-20-color { --txt_color: var(--wp--preset--dark-accent-a20); } .has-dark-accent-30-color { --txt_color: var(--wp--preset--dark-accent-a30); } .has-dark-accent-40-color { --txt_color: var(--wp--preset--dark-accent-a40); } .has-dark-accent-50-color { --txt_color: var(--wp--preset--dark-accent-a50); } .has-dark-surface-00-color { --txt_color: var(--wp--preset--dark-surface-a00); } .has-dark-surface-10-color { --txt_color: var(--wp--preset--dark-surface-a10); } .has-dark-surface-20-color { --txt_color: var(--wp--preset--dark-surface-a20); } .has-dark-surface-30-color { --txt_color: var(--wp--preset--dark-surface-a30); } .has-dark-surface-40-color { --txt_color: var(--wp--preset--dark-surface-a40); } .has-dark-surface-50-color { --txt_color: var(--wp--preset--dark-surface-a50); } .has-dark-text-00-color { --txt_color: var(--wp--preset--dark-text-a00); } .has-dark-text-10-color { --txt_color: var(--wp--preset--dark-text-a10); } .has-dark-text-20-color { --txt_color: var(--wp--preset--dark-text-a20); } .has-dark-text-30-color { --txt_color: var(--wp--preset--dark-text-a30); } .has-dark-text-40-color { --txt_color: var(--wp--preset--dark-text-a40); } .has-dark-text-50-color { --txt_color: var(--wp--preset--dark-text-a50); } .has-light-tonal-00-color { --txt_color: var(--wp--preset--light-tonal-a00); } .has-light-tonal-10-color { --txt_color: var(--wp--preset--light-tonal-a10); } .has-light-tonal-20-color { --txt_color: var(--wp--preset--light-tonal-a20); } .has-light-tonal-30-color { --txt_color: var(--wp--preset--light-tonal-a30); } .has-light-tonal-40-color { --txt_color: var(--wp--preset--light-tonal-a40); } .has-light-tonal-50-color { --txt_color: var(--wp--preset--light-tonal-a50); } .has-light-accent-00-color { --txt_color: var(--wp--preset--light-accent-a00); } .has-light-accent-10-color { --txt_color: var(--wp--preset--light-accent-a10); } .has-light-accent-20-color { --txt_color: var(--wp--preset--light-accent-a20); } .has-light-accent-30-color { --txt_color: var(--wp--preset--light-accent-a30); } .has-light-accent-40-color { --txt_color: var(--wp--preset--light-accent-a40); } .has-light-accent-50-color { --txt_color: var(--wp--preset--light-accent-a50); } .has-light-surface-00-color { --txt_color: var(--wp--preset--light-surface-a00); } .has-light-surface-10-color { --txt_color: var(--wp--preset--light-surface-a10); } .has-light-surface-20-color { --txt_color: var(--wp--preset--light-surface-a20); } .has-light-surface-30-color { --txt_color: var(--wp--preset--light-surface-a30); } .has-light-surface-40-color { --txt_color: var(--wp--preset--light-surface-a40); } .has-light-surface-50-color { --txt_color: var(--wp--preset--light-surface-a50); } .has-light-text-00-color { --txt_color: var(--wp--preset--light-text-a00); } .has-light-text-10-color { --txt_color: var(--wp--preset--light-text-a10); } .has-light-text-20-color { --txt_color: var(--wp--preset--light-text-a20); } .has-light-text-30-color { --txt_color: var(--wp--preset--light-text-a30); } .has-light-text-40-color { --txt_color: var(--wp--preset--light-text-a40); } .has-light-text-50-color { --txt_color: var(--wp--preset--light-text-a50); } .has-dark-tonal-00-background-color { --bg_color: var(--wp--preset--dark-tonal-a00); } .has-dark-tonal-10-background-color { --bg_color: var(--wp--preset--dark-tonal-a10); } .has-dark-tonal-20-background-color { --bg_color: var(--wp--preset--dark-tonal-a20); } .has-dark-tonal-30-background-color { --bg_color: var(--wp--preset--dark-tonal-a30); } .has-dark-tonal-40-background-color { --bg_color: var(--wp--preset--dark-tonal-a40); } .has-dark-tonal-50-background-color { --bg_color: var(--wp--preset--dark-tonal-a50); } .has-dark-accent-00-background-color { --bg_color: var(--wp--preset--dark-accent-a00); } .has-dark-accent-10-background-color { --bg_color: var(--wp--preset--dark-accent-a10); } .has-dark-accent-20-background-color { --bg_color: var(--wp--preset--dark-accent-a20); } .has-dark-accent-30-background-color { --bg_color: var(--wp--preset--dark-accent-a30); } .has-dark-accent-40-background-color { --bg_color: var(--wp--preset--dark-accent-a40); } .has-dark-accent-50-background-color { --bg_color: var(--wp--preset--dark-accent-a50); } .has-dark-surface-00-background-color { --bg_color: var(--wp--preset--dark-surface-a00); } .has-dark-surface-10-background-color { --bg_color: var(--wp--preset--dark-surface-a10); } .has-dark-surface-20-background-color { --bg_color: var(--wp--preset--dark-surface-a20); } .has-dark-surface-30-background-color { --bg_color: var(--wp--preset--dark-surface-a30); } .has-dark-surface-40-background-color { --bg_color: var(--wp--preset--dark-surface-a40); } .has-dark-surface-50-background-color { --bg_color: var(--wp--preset--dark-surface-a50); } .has-dark-text-00-background-color { --bg_color: var(--wp--preset--dark-text-a00); } .has-dark-text-10-background-color { --bg_color: var(--wp--preset--dark-text-a10); } .has-dark-text-20-background-color { --bg_color: var(--wp--preset--dark-text-a20); } .has-dark-text-30-background-color { --bg_color: var(--wp--preset--dark-text-a30); } .has-dark-text-40-background-color { --bg_color: var(--wp--preset--dark-text-a40); } .has-dark-text-50-background-color { --bg_color: var(--wp--preset--dark-text-a50); } .has-light-tonal-00-background-color { --bg_color: var(--wp--preset--light-tonal-a00); } .has-light-tonal-10-background-color { --bg_color: var(--wp--preset--light-tonal-a10); } .has-light-tonal-20-background-color { --bg_color: var(--wp--preset--light-tonal-a20); } .has-light-tonal-30-background-color { --bg_color: var(--wp--preset--light-tonal-a30); } .has-light-tonal-40-background-color { --bg_color: var(--wp--preset--light-tonal-a40); } .has-light-tonal-50-background-color { --bg_color: var(--wp--preset--light-tonal-a50); } .has-light-accent-00-background-color { --bg_color: var(--wp--preset--light-accent-a00); } .has-light-accent-10-background-color { --bg_color: var(--wp--preset--light-accent-a10); } .has-light-accent-20-background-color { --bg_color: var(--wp--preset--light-accent-a20); } .has-light-accent-30-background-color { --bg_color: var(--wp--preset--light-accent-a30); } .has-light-accent-40-background-color { --bg_color: var(--wp--preset--light-accent-a40); } .has-light-accent-50-background-color { --bg_color: var(--wp--preset--light-accent-a50); } .has-light-surface-00-background-color { --bg_color: var(--wp--preset--light-surface-a00); } .has-light-surface-10-background-color { --bg_color: var(--wp--preset--light-surface-a10); } .has-light-surface-20-background-color { --bg_color: var(--wp--preset--light-surface-a20); } .has-light-surface-30-background-color { --bg_color: var(--wp--preset--light-surface-a30); } .has-light-surface-40-background-color { --bg_color: var(--wp--preset--light-surface-a40); } .has-light-surface-50-background-color { --bg_color: var(--wp--preset--light-surface-a50); } .has-light-text-00-background-color { --bg_color: var(--wp--preset--light-text-a00); } .has-light-text-10-background-color { --bg_color: var(--wp--preset--light-text-a10); } .has-light-text-20-background-color { --bg_color: var(--wp--preset--light-text-a20); } .has-light-text-30-background-color { --bg_color: var(--wp--preset--light-text-a30); } .has-light-text-40-background-color { --bg_color: var(--wp--preset--light-text-a40); } .has-light-text-50-background-color { --bg_color: var(--wp--preset--light-text-a50); } /* XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX -- END OF LOG -- XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX */ body.block-editor-iframe__body { padding: 1em; max-width: calc(100% - 2em); } body.block-editor-iframe__body a::after { content: unset !important; } header #overflow-menu { position: fixed; top: var(--wp--preset--header_size); right: 0; z-index: 100; } html.has_banner header #overflow-menu{ top: calc(var(--wp--preset--banner_size) + var(--wp--preset--header_size)); } header #overflow-menu > div { display: flex; max-height: 0; flex-direction: column; gap: 1em; background-color: var(--monavaz-color-surface-a00); min-width: 160px; border-radius: 0 0 0px 20px; color: var(--monavaz-color-text-a10); overflow: hidden; transition: all var(--wp--preset--animation_dur) ease-in-out; } header #overflow-menu.opened > div { max-height: 300px; padding: 1em 0; box-shadow: 0px 12px 16px 0px rgba(0, 0, 0, 0.1); } header #overflow-menu .option { color: inherit; margin: 16px 0 16px 20px; text-decoration: none; display: flex; justify-content: center; align-items: center; position: relative; padding: 4px 0; font-size: 14px; width: fit-content; box-sizing: border-box; border: none; background: transparent; text-align: left; cursor: pointer; } header #overflow-menu .option::after { content: ''; position: absolute; bottom: 0; left: 0; width: 100%; height: 2px; border-radius: 1px; background-color: var(--monavaz-color-tonal-a00); opacity: 1; transition: all var(--wp--preset--animation_dur) ease-in-out; transform: scale(0); transform-origin: center; } @media (hover: none) { header #overflow-menu .option:focus::after { opacity: 1; -webkit-transform: scale(1); -moz-transform: scale(1); -ms-transform: scale(1); transform: scale(1); } } @media (hover: hover) { header #overflow-menu .option:hover::after, header #overflow-menu .option:focus::after { opacity: 1; -webkit-transform: scale(1); -moz-transform: scale(1); -ms-transform: scale(1); transform: scale(1); } } .fluidity-section-list-header { color: var(--wp--preset--color--light-text-1); margin-bottom: 0; } .fluidity-section-list-content { font-size: 16px; opacity: .75; color: var(--wp--preset--color--light-text-2)!important; line-height: 24px; margin-top: 5px; margin-bottom: 1.5em; } .fluidity-list { text-align: left; color: var(--wp--preset--color--light-text-2); padding-inline-start: 1em; font-size: 1.15em; margin: 0.5em 0 2em; } .fluidity-list li { margin: 0 0 0.5em; } .fluidity-list.indented { padding-inline-start: 3em; } .fluidity-switcher { border-radius: 30px; display: flex; width: calc(100% - 4em); margin: 0 2em 1em; background-color: transparent; } .fluidity-switcher > button { background-color: transparent; border: none; color: var(--wp--preset--color--light-text-2); cursor: pointer; opacity: 0.35; outline: none; border-radius: 30px; height: fit-content; font-size: 1em; font-weight: 700; margin: 0; padding: 1em 0; width: 100%; transition: all var(--wp--preset--animation_dur) ease-in-out; -webkit-backface-visibility: hidden; backface-visibility: hidden; -webkit-tap-highlight-color: transparent; } .fluidity-switcher > button:not(.triggered):hover { color: var(--wp--preset--color--light-text-1); opacity: 1; } .fluidity-switcher > button.triggered { opacity: 1; color: var(--wp--preset--color--accent-1); } .fluidity-windows { position: relative; overflow: hidden; } .fluidity-windows__pane { --multi: 0; position: absolute; top: 0; left: 0; width: 100%; opacity: 0; display: inline-block; transition: all var(--wp--preset--animation_dur) ease-in-out; transform: translatex(var(--multi)); } .fluidity-windows__pane.triggered { position: relative; top: unset; z-index: 1; opacity: 1; -webkit-transform: translatex(0); -moz-transform: translatex(0); transform: translatex(0); } .mapboxgl-map { background-color: var(--wp--preset--color--light-site-2); box-shadow: none; border-radius: var(--wp--preset--radius_size); width: 100%; height: 100%; min-height: 300px; max-height: 1200px; mask-image: -webkit-radial-gradient(white, black); -webkit-mask-image: -webkit-radial-gradient(white, black); } .mapboxgl-popup-tip, .mapboxgl-popup-close-button { display: none !important;} .mapboxgl-popup { box-shadow: 0 0 8px rgba(0,0,0,0.05) !important; border-radius: var(--wp--preset--radius_size); max-width: 300px !important; width: 90%; } .mapboxgl-popup-content { position: relative; background: var(--wp--preset--color--light-site-2) !important; border-radius: 30px !important; box-shadow: 0 0 12px rgb(0 0 0 / 10%) !important; text-align: center; font-size: 1em; padding: 2em !important; } .mapboxgl-popup-content strong { font-size: 1.5em; color: var(--wp--preset--color--accent-1); margin: 0; } .mapboxgl-popup-content p { font-size: 1.25em; color: var(--wp--preset--color--light-text-2); margin: 0; } .mapboxgl-popup-content span { font-size: 1em !important; opacity: 0.75; } .form_columns { justify-content: center; gap: 1em !important; } .animate__typewriter { --color: var(--wp--preset--color--accent-1); --dur: 3s; --steps: 10; color: var(--color); border-right: 3px var(--wp--preset--color--accent-1) solid; font-family: monospace; font-size: 42px; font-weight: 700; letter-spacing: 0em; text-align: left; margin: 0.67em 0; white-space: nowrap; overflow: hidden; width: calc(var(--steps) * 1ch); -webkit-animation: animate__typewriter-typing var(--dur) steps(var(--steps)), animate__typewriter-blink 0.5s step-end infinite alternate; -moz-animation: animate__typewriter-typing var(--dur) steps(var(--steps)), animate__typewriter-blink 0.5s step-end infinite alternate; animation: animate__typewriter-typing var(--dur) steps(var(--steps)), animate__typewriter-blink 0.5s step-end infinite alternate; } .animate__typewriter-hld { --color: var(--wp--preset--color--accent-1); height: 60px; border: 3px var(--color) solid; border-radius: var(--wp--preset--radius_size); margin: 0 auto; max-width: 400px; } .animate__typewriter-hld > .animate__typewriter { font-size: 16px; margin: 21px; border-right: 2px var(--wp--preset--color--accent-1) solid; } @-moz-keyframes animate__typewriter-typing { from { width: 0 }} @-webkit-keyframes animate__typewriter-typing { from { width: 0 }} @keyframes animate__typewriter-typing { from { width: 0 }} @-moz-keyframes animate__typewriter-blink { 50% { border-color: transparent; }} @-webkit-keyframes animate__typewriter-blink { 50% { border-color: transparent; }} @keyframes animate__typewriter-blink { 50% { border-color: transparent; }} .animate__loading { position: relative; margin: 2em auto; display: flex; align-items: center; height: 60px; width: fit-content } .animate__loading-dot { height: 1em; width: 1em; border-radius: 50%; float: left; margin: 0 0.25em; background-color: var(--wp--preset--color--accent-1); -webkit-animation: animate__loading-bounce 2s infinite ease-in-out; -moz-animation: animate__loading-bounce 2s infinite ease-in-out; animation: animate__loading-bounce 2s infinite ease-in-out; } .animate__loading-dot:nth-child(1) { z-index: 1; } .animate__loading-dot:nth-child(2) { -webkit-animation-delay: 0.25s; animation-delay: 0.25s; } .animate__loading-dot:nth-child(3) { -webkit-animation-delay: 0.5s; animation-delay: 0.5s; } @-webkit-keyframes animate__loading-bounce { 0% {-webkit-transform: translate(0,0); } 12% {-webkit-transform: translate(0,-15px); opacity: 0.15; } 23% {-webkit-transform: translate(0,10px); } 25% {-webkit-transform: translate(0,0); } 50% { opacity: 1; } } @-moz-keyframes animate__loading-bounce { 0% {-moz-transform: translate(0,0); } 12% {-moz-transform: translate(0,-15px); opacity: 0.15; } 23% {-moz-transform: translate(0,10px); } 25% {-moz-transform: translate(0,0); } 50% { opacity: 1; } } @keyframes animate__loading-bounce { 0% {-webkit-transform: translate(0,0); transform: translate(0,0); } 12% {-webkit-transform: translate(0,-15px); transform: translate(0,-15px); opacity: 0.15; } 23% {-webkit-transform: translate(0,10px); transform: translate(0,10px); } 25% {-webkit-transform: translate(0,0); transform: translate(0,0); } 50% { opacity: 1; } }