/* inline wp-img-auto-sizes-contain-inline-css */ img:is([sizes="auto" i], [sizes^="auto," i]) { contain-intrinsic-size: 3000px 1500px; } /* https://pixbit3d.com/wp-content/plugins/chaty/dist/css/style.css?ver=3.6.31767576477 */ .chaty *, .chaty-chat-view *, .chaty-outer-forms * { box-sizing: border-box; } .chaty-agent-data, .chaty-whatsapp-field input[type="text"], .chaty-whatsapp-message, .chaty-whatsapp-message p { font-family: "Segoe UI", "Helvetica Neue", Helvetica, "Lucida Grande", Arial, Ubuntu, Cantarell, "Fira Sans", sans-serif; } .chaty-agent-header, .chaty-channel, .chaty-channels, .chaty-form-body, .chaty-tooltip { position: relative; } .chaty-tooltip .on-hover-text, .chaty-tooltip .on-hover-text::before, .chaty-tooltip::after, .chaty-tooltip::before { display: none; font-size: 0.9em; line-height: 1; opacity: 0; pointer-events: none; position: absolute; text-transform: none; user-select: none; } .chaty-i-trigger .chaty-tooltip .on-hover-text, .chaty-i-trigger .chaty-tooltip .on-hover-text::before, .chaty-i-trigger .chaty-tooltip::after, .chaty-tooltip::before { pointer-events: auto; } .on-hover-text p { font-size: unset; font-weight: 400; letter-spacing: inherit; line-height: unset; white-space: nowrap; } .on-hover-text { display: none; font-weight: 400; } .chaty-tooltip .on-hover-text::before, .chaty-tooltip::before { border: 5px solid transparent; content: ""; z-index: 1001; } .chaty-tooltip::after { content: attr(data-hover); } .chaty-tooltip .on-hover-text, .chaty-tooltip::after { background: rgb(255, 255, 255); border-radius: 10px; box-shadow: rgba(0, 0, 0, 0.15) 0px 1.93465px 7.73859px; color: rgb(51, 51, 51); font-size: 17px; line-height: 21px; max-width: 21em; min-width: 1em; overflow: hidden; padding: 5px 15px; text-align: center; text-overflow: ellipsis; white-space: nowrap; z-index: 1000; } .chaty-tooltip .on-hover-text { overflow: visible; white-space: pre; } .chaty-tooltip.active .on-hover-text, .chaty-tooltip.active .on-hover-text::before, .chaty-tooltip.active::after, .chaty-tooltip.active::before, .chaty-tooltip:hover .on-hover-text, .chaty-tooltip:hover .on-hover-text::before, .chaty-tooltip:hover::after, .chaty-tooltip:hover::before { display: block; opacity: 1; } .chaty-tooltip.active .on-hover-text, .chaty-tooltip.active .on-hover-text::before, .chaty-tooltip.active::after, .chaty-tooltip.active::before, .chaty-tooltip.pos-left:hover .on-hover-text, .chaty-tooltip.pos-left:hover .on-hover-text::before, .chaty-tooltip.pos-left:hover::after, .chaty-tooltip.pos-left:hover::before, .chaty-tooltip.pos-right:hover .on-hover-text, .chaty-tooltip.pos-right:hover .on-hover-text::before, .chaty-tooltip.pos-right:hover::after, .chaty-tooltip.pos-right:hover::before { animation: auto ease-out 0s 1 normal forwards running tooltips-horz; } .chaty-tooltip.has-on-hover::after, .chaty-tooltip.has-on-hover::before, .chaty-widget .chaty-i-trigger .chaty-cta-close.chaty-tooltip.chaty-tooltip:hover::after, .chaty-widget .chaty-i-trigger .chaty-cta-close.chaty-tooltip:hover::before, .chaty-widget.chaty-open .chaty-i-trigger .chaty-cta-main.chaty-tooltip::after, .chaty-widget.chaty-open .chaty-i-trigger .chaty-cta-main.chaty-tooltip::before, .chaty-widget.cssas-no-close-button.default-open .chaty-i-trigger, .on-hover-text:empty, [data-hover=""]::after, [data-hover=""]::before { display: none !important; } .chaty-tooltip.pos-left .on-hover-text::before, .chaty-tooltip.pos-left::before { border-left-color: rgb(255, 255, 255); border-right-width: 0px; left: -10px; top: 50%; transform: translate(-0.5em, -50%); } .chaty-tooltip.pos-left .on-hover-text::before { left: auto; right: -5px; } .chaty-tooltip.pos-left .on-hover-text, .chaty-tooltip.pos-left::after { right: calc(100% + 10px); top: 50%; transform: translate(-0.5em, -50%); } .chaty-tooltip.pos-right .on-hover-text::before, .chaty-tooltip.pos-right::before { border-left-width: 0px; border-right-color: rgb(255, 255, 255); right: -10px; top: 50%; transform: translate(0.5em, -50%); } .chaty-tooltip.pos-right .on-hover-text::before { left: -5px; right: auto; } .chaty-tooltip.pos-right .on-hover-text, .chaty-tooltip.pos-right::after { left: calc(100% + 10px); top: 50%; transform: translate(0.5em, -50%); } @-webkit-keyframes tooltips-vert { 100% { opacity: 1; transform: translate(-50%); } } @keyframes tooltips-vert { 100% { opacity: 1; transform: translate(-50%); } } @-webkit-keyframes tooltips-horz { 100% { opacity: 1; transform: translateY(-50%); } } @keyframes tooltips-horz { 100% { opacity: 1; transform: translateY(-50%); } } @-webkit-keyframes chaty-animation-shockwave { 0% { box-shadow: rgba(0, 0, 0, 0.3) 0px 0px 2px, rgba(0, 0, 0, 0.3) 0px 0px 1px inset; transform: scale(1); } 95% { box-shadow: transparent 0px 0px 50px, transparent 0px 0px 30px inset; } 100% { transform: scale(2.25); } } @keyframes chaty-animation-shockwave { 0% { box-shadow: rgba(0, 0, 0, 0.3) 0px 0px 2px, rgba(0, 0, 0, 0.3) 0px 0px 1px inset; transform: scale(1); } 95% { box-shadow: transparent 0px 0px 50px, transparent 0px 0px 30px inset; } 100% { transform: scale(2.25); } } @-webkit-keyframes chaty-animation-blink { 0%, 100% { opacity: 1; } 20% { opacity: 0.5; } } @keyframes chaty-animation-blink { 0%, 100% { opacity: 1; } 20% { opacity: 0.5; } } @-webkit-keyframes chaty-animation-pulse { 0% { border-radius: 50%; box-shadow: rgba(0, 0, 0, 0.2) 0px 2px 2px; transform: scale(1); } 100% { border-radius: 45%; box-shadow: rgba(0, 0, 0, 0.2) 0px 2px 2px; transform: scale(1.1); } } @keyframes chaty-animation-pulse { 0% { border-radius: 50%; transform: scale(1); } 100% { border-radius: 45%; transform: scale(1.1); } } @-webkit-keyframes chaty-animation-sheen { 20%, 100% { transform: rotate(60deg) translateY(-80px); } } @keyframes chaty-animation-sheen { 20%, 100% { transform: rotate(60deg) translateY(-80px); } } @-webkit-keyframes chaty-animation-fade { 15%, 5% { opacity: 0.25; } 10%, 20%, 100% { opacity: 1; } } @keyframes chaty-animation-fade { 15%, 5% { opacity: 0.25; } 10%, 20%, 100% { opacity: 1; } } @-webkit-keyframes chaty-animation-spin { 10% { animation-timing-function: ease; transform: rotate(-20deg); } 20%, 100% { transform: rotate(1turn); } } @keyframes chaty-animation-spin { 10% { animation-timing-function: ease; transform: rotate(-20deg); } 20%, 100% { transform: rotate(1turn); } } @-webkit-keyframes chaty-animation-bounce { 0%, 20%, 100% { transform: none; } 10% { transform: translateY(-1em); } } @keyframes chaty-animation-bounce { 0%, 20%, 100% { transform: none; } 10% { transform: translateY(-1em); } } @-webkit-keyframes chaty-animation-waggle { 0% { transform: none; } 10% { transform: rotate(-20deg) scale(1.2); } 13% { transform: rotate(25deg) scale(1.2); } 15% { transform: rotate(-15deg) scale(1.2); } 17% { transform: rotate(15deg) scale(1.2); } 20% { transform: rotate(-12deg) scale(1.2); } 22% { transform: rotate(0deg) scale(1.2); } 24%, 100% { transform: rotate(0deg) scale(1); } } @keyframes chaty-animation-waggle { 0% { transform: none; } 10% { transform: rotate(-20deg) scale(1.2); } 13% { transform: rotate(25deg) scale(1.2); } 15% { transform: rotate(-15deg) scale(1.2); } 17% { transform: rotate(15deg) scale(1.2); } 20% { transform: rotate(-12deg) scale(1.2); } 22% { transform: rotate(0deg) scale(1.2); } 24%, 100% { transform: rotate(0deg) scale(1); } } @-webkit-keyframes chaty-animation-floating { 0% { transform: translateZ(0px); } 50% { transform: translate3d(0px, -10px, 0px); } 100% { transform: translateZ(0px); } } @keyframes chaty-animation-floating { 0% { transform: translateZ(0px); } 50% { transform: translate3d(0px, -10px, 0px); } 100% { transform: translateZ(0px); } } .chaty { display: none; z-index: 99999; } .chaty-widget.chaty-open .chaty-i-trigger .chaty-cta-close.chaty-tooltip.chaty-tooltip:hover::after, .chaty-widget.chaty-open .chaty-i-trigger .chaty-cta-close.chaty-tooltip:hover::before, .chaty.active, .chaty.form-open .chaty-widget.cssas-no-close-button.default-open .chaty-i-trigger { display: block !important; } .chaty * { margin: 0px; padding: 0px; } .chaty .sr-only, .chaty-outer-forms .sr-only, .hide-cht-svg-bg { clip: rect(0px, 0px, 0px, 0px) !important; border: 0px !important; height: 1px !important; margin: -1px !important; outline: none !important; overflow: hidden !important; padding: 0px !important; position: absolute !important; width: 1px !important; } .chaty a, .chaty a:focus, .chaty a:hover, .chaty button { border-width: medium; border-style: none; border-color: currentcolor; border-image: none; box-shadow: none; outline: 0px; text-decoration: none; } .chaty-widget { bottom: 25px; position: fixed; right: 25px; z-index: 997; } .chaty-channel-list { align-items: flex-start; bottom: -4px; display: flex; flex-direction: column; height: 124px; pointer-events: none; position: absolute; right: 0px; width: 62px; } .chaty-channel-list .chaty-channel, .chaty-channel.single .chaty-svg { border-radius: 50%; box-shadow: rgba(73, 104, 126, 0.16) 0px 16px 24px 0px; cursor: pointer; display: inline-block; height: 54px; margin: 4px; width: 54px; } .chaty-channel-list .chaty-channel { bottom: 0px; opacity: 0; position: absolute; transition: 0.5s; } .chaty-channel.single .chaty-svg { margin: 0px; } .chaty-channel a, .chaty-channel button, .chaty-svg { border-radius: 50%; cursor: pointer; display: block; height: 54px; min-width: unset; outline: 0px; position: relative; width: 54px; } * .chaty-channel button { max-width: unset; min-width: unset; } .chaty-channel button { background: 0px 0px; border-radius: 50%; } .chaty-channel a:focus, .chaty-channel button:focus, .chaty-contact-form-box button.chaty-submit-button { outline: 0px; } .chaty-agent-icon svg, .chaty-channel svg, .chaty-view-channels .chaty-channel span svg { height: 100%; width: 100%; } .chaty-channel img { border-radius: 50%; height: 54px; object-fit: cover; width: 54px; } .chaty-i-trigger .chaty-channel { border-radius: 50%; bottom: 0px; cursor: pointer; position: absolute; right: 4px; transition: 0.5s; } .chaty-cta-button { border-radius: 50%; box-shadow: rgba(73, 104, 126, 0.16) 0px 16px 24px 0px; transition: 0.5s; } .chaty-widget .chaty-i-trigger .chaty-cta-close { pointer-events: none; } .chaty-widget .chaty-i-trigger .chaty-cta-close .chaty-cta-button { opacity: 0; visibility: hidden; z-index: 999; } .chaty-chat-view, .chaty-outer-forms { animation-delay: -2s; border-radius: 6px; bottom: -25px; box-shadow: rgba(0, 0, 0, 0.16) 0px 5px 40px; left: 25px; max-width: 90%; opacity: 0; padding: 0px; pointer-events: none; transition: 0.5s; vertical-align: bottom; visibility: hidden; width: 320px; z-index: -1; position: fixed !important; } .chaty-chat-view.pos-left, .chaty-outer-forms.pos-left { left: 25px; } .chaty-chat-view.pos-right, .chaty-outer-forms.pos-right { left: auto; right: 25px; } .chaty-outer-forms.active, .chaty:not(.form-open) .chaty-widget.chaty-open + .chaty-chat-view { bottom: 0px; opacity: 1; pointer-events: auto; transform: translateY(-93px); visibility: visible; z-index: 999999; } .chaty-whatsapp-body { min-height: 260px; padding: 0px; position: relative; z-index: 2; } .chaty-whatsapp-content { padding: 20px; } .chaty-popup-whatsapp-form .chaty-whatsapp-body { height: 260px; min-height: auto; } .chaty-popup-whatsapp-form .chaty-whatsapp-content { align-items: flex-start; display: flex; } .chaty-whatsapp-form { background-color: rgb(240, 237, 231); border-radius: 8px; margin: 0px; position: relative; } .chaty-whatsapp-form::before { background-image: url("https://pixbit3d.com/wp-content/plugins/chaty/dist/images/whatsapp.png"); content: ""; display: block; height: 100%; left: 0px; opacity: 0.035; position: absolute; top: 0px; width: 100%; z-index: 0; } .chaty-popup-whatsapp-form .chaty-whatsapp-body::before, .chaty-popup-whatsapp-form .chaty-whatsapp-footer::before { background-image: url("https://pixbit3d.com/wp-content/plugins/chaty/dist/images/whatsapp-welcome-popup.png"); opacity: 0.7; } .chaty-whatsapp-message { background-color: rgb(255, 255, 255); border: 1px solid rgba(34, 17, 71, 0.08); border-radius: 0px 10px 10px; font-family: "Segoe UI", "Helvetica Neue", Helvetica, "Lucida Grande", Arial, Ubuntu, Cantarell, "Fira Sans", sans-serif; font-size: 14px; line-height: 18px; margin-left: 0px; margin-top: 0px; max-width: calc(100% - 40px); padding: 7px 14px 6px; position: relative; transform-origin: center top; z-index: 2; } .chaty-whatsapp-message::before { border-bottom: 10px solid transparent; border-right: 12px solid rgb(255, 255, 255); border-top: 0px solid transparent; content: ""; display: none; height: 0px; left: -12px; position: absolute; top: 0px; width: 0px; } .chaty-whatsapp-message p { overflow-wrap: break-word; color: rgb(17, 27, 33); font-weight: 400; margin: 0px; padding: 0px; } .chaty-whatsapp-footer { padding: 20px 15px; position: relative; } .whatsapp-chaty-form { display: flex; margin: 0px; padding: 0px; } button.chaty-whatsapp-button-button, button.chaty-whatsapp-button-button:focus, button.chaty-whatsapp-button-button:hover { flex: 0 0 40px; background: rgb(198, 215, 227) !important; border-width: medium !important; border-style: none !important; border-color: currentcolor !important; border-image: none !important; border-radius: 20px !important; box-shadow: none !important; cursor: pointer !important; height: 40px !important; margin: 0px 0px 0px 10px !important; min-width: 1px !important; outline: none !important; padding: 0px !important; text-align: center !important; text-decoration: none !important; width: 40px !important; } button.chaty-whatsapp-button-button { background: rgb(198, 215, 227) !important; } button.chaty-whatsapp-button-button:focus, button.chaty-whatsapp-button-button:hover { background: rgb(168, 197, 218) !important; } .chaty-whatsapp-input:not(:placeholder-shown) + button.chaty-whatsapp-button-button { background: rgb(37, 211, 102) !important; } .chaty-whatsapp-input:not(:placeholder-shown) + button.chaty-whatsapp-button-button:focus, .chaty-whatsapp-input:not(:placeholder-shown) + button.chaty-whatsapp-button-button:hover { background: rgb(34, 191, 91) !important; } .chaty-whatsapp-data { display: flex; flex: 1 1 0%; z-index: 1; } .chaty-whatsapp-field { align-items: center; display: flex; flex: 1 1 0%; padding-right: 0px; position: relative; } .chaty-whatsapp-field input[type="text"] { border-radius: 24px; color: rgb(17, 27, 33); flex: 1 1 0%; font-size: 16px; line-height: normal; margin: 0px; outline: 0px; padding: 0px 10px 0px 15px; resize: none; width: 100%; background: rgb(255, 255, 255) !important; border-width: medium !important; border-style: none !important; border-color: currentcolor !important; border-image: none !important; box-shadow: none !important; height: 40px !important; } .chaty-whatsapp-field input[type="text"]:focus { color: rgb(17, 27, 33); margin: 0px; border-width: medium !important; border-style: none !important; border-color: currentcolor !important; border-image: none !important; box-shadow: none !important; outline: 0px !important; } .chaty-whatsapp-button-button:active, .chaty-whatsapp-button-button:focus, .chaty-whatsapp-button-button:hover { background: rgb(168, 197, 218) !important; } .chaty-whatsapp-message p + p { margin-top: 10px; } @-webkit-keyframes rotation { 0% { transform: rotate(0deg); } 100% { transform: rotate(359deg); } } @keyframes rotation { 0% { transform: rotate(0deg); } 100% { transform: rotate(359deg); } } .chaty-i-trigger.single-channel > .chaty-channel > .on-hover-text { display: none !important; } html[dir="rtl"] .chaty-input-field, html[dir="rtl"] .chaty-submit-button, html[dir="rtl"] .chaty-tooltip, html[dir="rtl"] .chaty-tooltip::after, html[dir="rtl"] .chaty-whatsapp-message, html[dir="rtl"] .on-hover-text { direction: rtl; } .chaty-outer-forms input[type="number"]::-webkit-inner-spin-button, .chaty-outer-forms input[type="number"]::-webkit-outer-spin-button { appearance: none; margin: 0px; } .chaty-whatsapp-header { align-items: center; background-color: rgb(74, 164, 133); border-top-left-radius: 6px; border-top-right-radius: 6px; box-shadow: rgba(26, 14, 53, 0.16) 0px 16px 32px 0px; display: flex; justify-content: space-between; padding: 10px 15px; position: relative; } .chaty-whatsapp-header .header-wp-icon { height: 30px; margin-right: 7px; width: 30px; } .chaty-whatsapp-header .header-wp-title { color: rgb(255, 255, 255); flex: 1 1 0%; font-size: 15px; padding-right: 8px; } .whatsapp-form-close-btn { cursor: pointer; flex: 0 0 16px; } .whatsapp-form-close-btn svg { height: 16px; width: 16px; } .chaty-form, .chaty-whatsapp-form { font-family: "Segoe UI", "Helvetica Neue", Helvetica, "Lucida Grande", Arial, Ubuntu, Cantarell, "Fira Sans", sans-serif; } .chaty-whatsapp-message-nickname { color: rgb(72, 157, 129); font-size: 10px; font-weight: 500; line-height: 14px; } .chaty-whatsapp-message-time { color: rgb(161, 161, 169); font-size: 10px; line-height: 12px; } .chaty-whatsapp-input::placeholder { color: rgb(131, 161, 183); opacity: 0.4; } button[type="button"].chaty-wp-emoji-input, button[type="button"].chaty-wp-emoji-input:focus, button[type="button"].chaty-wp-emoji-input:hover { cursor: pointer; left: 8px; top: 9px; background: none !important; border-width: medium !important; border-style: none !important; border-color: currentcolor !important; border-image: none !important; height: 24px !important; margin: 0px !important; min-width: 1px !important; outline: none !important; padding: 0px !important; position: absolute !important; width: 24px !important; } .chaty-whatsapp-field:not(.has_emoji) .chaty-wp-emoji-input { display: none !important; } .chaty-whatsapp-input { padding-left: 38px !important; } .chaty-whatsapp-field:not(.has_emoji) .chaty-whatsapp-input { padding-left: 15px !important; } .chaty-channel span.chaty-icon { display: block; } .chaty-whatsapp-button-button svg { display: inline-block; vertical-align: sub; } .chaty-wp-emoji-input:hover { background-color: transparent; border-color: transparent; } .chaty-wp-emoji-input:focus { outline: none; } .chaty-whatsapp-input[placeholder]:focus::-webkit-input-placeholder { transition: opacity 0.5s 0.5s; opacity: 0.4 !important; } [placeholder]:focus::-webkit-input-placeholder { transition: opacity 0.5s 0.5s; opacity: 1 !important; } .chaty-outer-forms form { margin: 0px; } .chaty, .chaty *, .chaty-form, .chaty-form *, .chaty-whatsapp-form, .chaty-whatsapp-form * { -webkit-tap-highlight-color: rgba(0, 0, 0, 0); } html[dir="rtl"] button[type="button"].chaty-wp-emoji-input, html[dir="rtl"] button[type="button"].chaty-wp-emoji-input:focus, html[dir="rtl"] button[type="button"].chaty-wp-emoji-input:hover { right: 8px; } html[dir="rtl"] .chaty-whatsapp-field input[type="text"] { padding: 0px 35px 0px 0px; } html[dir="rtl"] button.chaty-whatsapp-button-button, html[dir="rtl"] button.chaty-whatsapp-button-button:focus, html[dir="rtl"] button.chaty-whatsapp-button-button:hover { margin: 0px 10px 0px 0px !important; } html[dir="rtl"] button.chaty-whatsapp-button-button svg { transform: rotate(180deg); } /* inline */ /* inline wp-custom-css */ @import url("https://fonts.googleapis.com/css2?family=Bebas+Neue&display=swap"); :root { --pbx-orange: #FF5A1F; --pbx-orange-soft: #C7440A; --pbx-ink: #241A12; --pbx-dark: #1B1206; --pbx-muted: #6E5C4C; --pbx-line: #F0DAC0; --pbx-void: #FFF8F0; --pbx-surface-2: #FFEFDC; --pbx-display: "PbxBrunson","Anton","Arial Narrow",sans-serif; --pbx-body: "PbxKai","Baloo 2","Segoe UI",sans-serif; } body.home { background: var(--pbx-void); color: var(--pbx-ink); font-family: var(--pbx-body); } body.home .e-con.e-parent, body.home .elementor-top-section { padding-top: 72px; padding-bottom: 72px; } @media (max-width: 767px){ body.home .e-con.e-parent, body.home .elementor-top-section { padding-top: 48px; padding-bottom: 48px; } } @media (max-width: 767px){ html, body { overflow-x: hidden; } body.home .elementor-section .elementor-container, body.home .e-con { flex-wrap: wrap !important; } body.home .elementor-section:not(.elementor-top-section .elementor-inner-section) > .elementor-container > .elementor-column, body.home .elementor-inner-section .elementor-column { width: 100% !important; max-width: 100% !important; flex: 0 0 100% !important; } body.home .e-con.e-parent, body.home .elementor-top-section { padding: 40px 18px !important; } body.home .elementor-column > .elementor-widget-wrap { padding: 16px !important; } body.home .elementor-widget-wrap:has(.wpcf7) { padding: 0px !important; } } @media (max-width: 767px){ body.home .accent, body.home .price-amount, body.home h1 *, body.home h2 *, body.home h1, body.home h2 { text-shadow: none !important; } } @media (max-width: 767px){ html, body { overflow-x: hidden !important; max-width: 100%; } body.home h1, body.home h2, body.home .elementor-widget-heading .elementor-heading-title { font-size: 32px !important; line-height: 1.15 !important; } body.home h3 { font-size: 22px !important; line-height: 1.25 !important; } body.home p, body.home .elementor-widget-text-editor { font-size: 16px !important; line-height: 1.6 !important; } body.home img { max-width: 100%; height: auto; } body.home .pbx-wa, body.home .price-card, body.home .audience-card, body.home .trust-item, body.home [class*="pbx-card"] { box-sizing: border-box; padding: 20px 18px !important; } body.home [class*="-grid"] { gap: 16px !important; } } /* https://pixbit3d.com/wp-content/plugins/trx_addons/components/shortcodes/content/content.css */ [class*="sc_content_width_"] { box-sizing: border-box; } [class*="sc_content_width_"]:not([class*="sc_margin_"]) { margin-left: auto; margin-right: auto; } /* https://pixbit3d.com/wp-content/plugins/trx_addons/components/shortcodes/content/content.responsive.css */ /* inline */ .pxb { font-family: Fredoka, Nunito, "Trebuchet MS", sans-serif; } .elementor-widget-html:has(> .elementor-widget-container > .pxb), .e-con:has(.pxb) { --padding-top: 0px; --padding-bottom: 0px; --padding-left: 0px; --padding-right: 0px; --gap: 0px; } .pxb { --orange: #ff6400; --orange-deep: #a33d00; --blue: #1663e0; --blue-deep: #0d47a8; --green: #0d7448; --green-deep: #0a5c39; --ink: #1a1206; --paper: #f3f3f1; --surface: #e5e5e1; --st1: #4a1c00; --st2: #7a2f00; --st3: #b54600; --st4: #ff6400; --st5: #ffa066; --font: "Fredoka", "Nunito", "Trebuchet MS", sans-serif; --step-small: clamp(0.8125rem, 0.79rem + 0.1vw, 0.875rem); --step-body: clamp(1.0625rem, 1rem + 0.25vw, 1.1875rem); --step-lead: clamp(1.25rem, 1.1rem + 0.7vw, 1.625rem); --step-head: clamp(2.25rem, 0.9rem + 5.4vw, 6.25rem); --step-display: clamp(3rem, 0.5rem + 9.6vw, 11rem); --m: clamp(16px, 4.8vw, 72px); --ease-out: cubic-bezier(0.22, 1, 0.36, 1); --ease-expo: cubic-bezier(0.16, 1, 0.3, 1); } .pxb *, .pxb ::before, .pxb ::after { box-sizing: border-box; } .pxb { text-size-adjust: 100%; background: var(--orange); color-scheme: light; } .pxb { margin: 0px; background: var(--paper); color: var(--ink); font-family: var(--font); font-size: var(--step-body); line-height: 1.5; -webkit-font-smoothing: antialiased; overflow-x: hidden; } .pxb h1, .pxb h2, .pxb h3, .pxb p, .pxb figure, .pxb ul, .pxb ol { margin: 0px; } .pxb ul, .pxb ol { padding: 0px; list-style: none; } .pxb img, .pxb video { display: block; max-width: 100%; height: auto; } .pxb a { color: inherit; } .pxb button, .pxb input { font: inherit; color: inherit; } .pxb button { background: none; border: 0px; padding: 0px; cursor: pointer; } .pxb a, .pxb button, .pxb input { touch-action: manipulation; -webkit-tap-highlight-color: transparent; } .pxb h1, .pxb h2, .pxb h3, .pxb h4, .pxb p, .pxb li, .pxb dt, .pxb dd, .pxb figcaption, .pxb span, .pxb a, .pxb button, .pxb input, .pxb label, .pxb strong, .pxb b { font-family: inherit; color: inherit; text-transform: none; } .pxb h1, .pxb h2, .pxb h3, .pxb h4 { margin: 0px; } .pxb a:hover, .pxb a:focus { color: inherit; } .pxb img, .pxb video { border: 0px; border-radius: 0px; box-shadow: none; } .pxb h1, .pxb h2, .pxb h3 { font-weight: 600; letter-spacing: -0.025em; line-height: 1; text-wrap: balance; } .pxb :focus-visible { outline: 3px solid var(--ink); outline-offset: 3px; } .pxb .field-dark :focus-visible { outline-color: var(--paper); } .pxb ::selection { background: var(--ink); color: var(--orange); } .pxb .num { font-variant-numeric: tabular-nums; } .pxb [id] { scroll-margin-top: 16px; } .pxb .btn { display: inline-flex; align-items: center; gap: 0.6em; min-height: 60px; padding: 0px 30px; background: var(--ink); color: var(--paper); font-weight: 500; text-decoration: none; transition: transform 140ms var(--ease-out), background-color 180ms; } .pxb .btn:hover { background: rgb(58, 42, 20); } .pxb .btn:active { transform: scale(0.97); } .pxb .btn .arrow { transition: transform 180ms var(--ease-out); } .pxb .btn:hover .arrow { transform: translateX(5px); } .pxb .hero { position: relative; background: var(--ink); overflow: hidden; } .pxb .bar { position: relative; z-index: 6; display: flex; align-items: center; gap: clamp(20px, 3vw, 48px); padding: 14px var(--m); background: var(--paper); } .pxb .mark { display: inline-flex; align-items: center; gap: 10px; font-size: var(--step-lead); font-weight: 600; text-decoration: none; letter-spacing: -0.02em; } .pxb .mark .emblem { width: 40px; height: 40px; color: var(--orange); } .pxb .mark span { color: var(--orange-deep); } .pxb .bar nav { display: flex; gap: clamp(16px, 2.4vw, 36px); margin-left: auto; } .pxb .bar nav a { text-decoration: none; font-weight: 500; } .pxb .bar nav a:hover { text-decoration-line: underline; text-decoration-style: initial; text-decoration-color: var(--orange); text-decoration-thickness: 3px; text-underline-offset: 6px; } .pxb .bar .btn { min-height: 48px; padding: 0px 20px; background: var(--orange); color: var(--ink); } .pxb .bar .btn:hover { background: rgb(255, 125, 43); } .pxb .banner { position: relative; height: calc(-76px + 100svh); min-height: 620px; overflow: hidden; --px: 0; --py: 0; } .pxb .banner__bg { position: absolute; inset: -4%; transform: translate(calc(var(--px) * -14px), calc(var(--py) * -10px)) scale(1.02); transition: transform 300ms var(--ease-out); } .pxb .banner__bg img { width: 100%; height: 100%; object-fit: cover; } .pxb .banner__wash { position: absolute; inset: 0px; background: rgba(243, 243, 241, 0.42); } .pxb .emblem { display: block; overflow: visible; } .pxb .emblem .em-ring { transform-box: view-box; transform-origin: 50px 50px; animation: 28s linear 0s infinite normal none running spin; } .pxb .emblem .em-core { transform-box: fill-box; transform-origin: center center; animation: beat 2.4s var(--ease-out) infinite; } .pxb .emblem .em-nodes circle { transform-box: fill-box; transform-origin: center center; animation: 3s ease-in-out 0s infinite normal none running blink; } .pxb .emblem .em-nodes circle:nth-child(2) { animation-delay: 0.6s; } .pxb .emblem .em-nodes circle:nth-child(3) { animation-delay: 1.2s; } .pxb .emblem .em-nodes circle:nth-child(4) { animation-delay: 1.8s; } .pxb .emblem .em-lines { stroke-dasharray: 3, 2.2; animation: 1.6s linear 0s infinite normal none running flow; } @keyframes spin { 100% { transform: rotate(360deg); } } @keyframes beat { 0%, 100% { transform: scale(1); } 40% { transform: scale(1.18); } } @keyframes blink { 0%, 100% { transform: scale(1); } 50% { transform: scale(1.3); } } @keyframes flow { 100% { stroke-dashoffset: -10.4; } } .pxb .banner__emblem { position: absolute; z-index: 1; width: min(84svh, 58vw); aspect-ratio: 1 / 1; left: 64%; top: 54%; color: var(--orange); transform: translate(-50%, -50%) translate(calc(var(--px) * 18px), calc(var(--py) * 12px)) rotate(var(--rot, 0deg)); transition: transform 300ms var(--ease-out); } .pxb .banner__emblem .emblem { width: 100%; height: 100%; } .pxb .banner__word { position: absolute; z-index: 2; left: var(--m); right: var(--m); top: 5%; transform: translate(calc(var(--px) * 8px), 0); transition: transform 300ms var(--ease-out); } .pxb .banner__word svg { width: 100%; height: auto; display: block; overflow: visible; } .pxb .banner__word text { font-family: var(--font); font-weight: 600; fill: var(--ink); } .pxb .banner__word .w3d { fill: var(--paper); stroke: var(--orange); stroke-width: 7px; paint-order: stroke; } .pxb .banner__figs { position: absolute; z-index: 3; inset: 0px; pointer-events: none; } .pxb .banner__nino, .pxb .banner__ghost { position: absolute; bottom: 0px; transition: transform 300ms var(--ease-out); } .pxb .banner__nino { height: 80%; left: 52%; transform: translate(calc(var(--px) * -26px), calc(var(--py) * -6px)); } .pxb .banner__ghost { height: 44%; left: 74%; bottom: 1%; transform: translate(calc(var(--px) * -38px), calc(var(--py) * -8px)); } .pxb .banner__nino svg, .pxb .banner__ghost svg { height: 100%; width: auto; max-width: none; display: block; overflow: visible; } .pxb .banner__nino svg { aspect-ratio: 725 / 1426; } .pxb .banner__ghost svg { aspect-ratio: 430 / 773; } .pxb .eyes .lid { transition: transform 110ms var(--ease-out); } .pxb .hero__copy { position: absolute; z-index: 4; left: var(--m); bottom: 40px; width: min(680px, 46vw); background: var(--paper); padding: 32px 32px 28px; } .pxb .hero h1 { font-size: var(--step-head); } .pxb .hero__copy p { margin-top: 20px; font-size: var(--step-body); max-width: 40ch; } .pxb .hero__copy .btn { margin-top: 24px; } .pxb .hero__assure { font-size: var(--step-small) !important; margin-top: 14px !important; } .pxb .drop { animation: drop 1.2s var(--ease-expo) both; } @keyframes drop { 0% { opacity: 0; transform: translateY(40px); } } .pxb .belt { background: var(--ink); color: var(--orange); overflow: hidden; padding: 28px 0px; } .pxb .belt__track { display: flex; align-items: center; gap: 0.5em; width: max-content; font-size: var(--step-head); font-weight: 600; letter-spacing: -0.025em; line-height: 1; white-space: nowrap; animation: 38s linear 0s infinite normal none running drift; } .pxb .belt__track .emblem { height: 1em; width: 1em; color: var(--orange); } .pxb .belt__track span:nth-child(4n+3) { color: var(--paper); } .pxb .duo { display: grid; grid-template-columns: 1fr 1fr; } .pxb .panel { position: relative; min-height: 92svh; overflow: hidden; color: var(--paper); display: flex; flex-direction: column; } .pxb .panel--blue { background: var(--blue); } .pxb .panel--green { background: var(--green); } .pxb .panel h2 { position: relative; z-index: 2; font-size: var(--step-head); padding: 48px var(--m) 0; max-width: 9ch; box-sizing: content-box; } .pxb .panel__obj { position: absolute; z-index: 1; bottom: 104px; height: 60%; left: 50%; transform: translateX(-50%); transition: transform 600ms var(--ease-out); } .pxb .panel--blue .panel__obj { left: auto; right: 6%; transform: none; } .pxb .panel:hover .panel__obj { transform: translateX(-50%) translateY(-8px); } .pxb .panel--blue:hover .panel__obj { transform: translateY(-8px); } .pxb .panel__obj { width: 84%; } .pxb .panel--blue .panel__obj { width: 78%; } .pxb .panel__obj img { width: 100%; height: 100%; max-width: none; object-fit: contain; object-position: center bottom; } .pxb .panel__row { position: relative; z-index: 2; margin-top: auto; display: flex; justify-content: space-between; align-items: center; gap: 16px; padding: 0 var(--m) 32px; flex-wrap: wrap; } .pxb .panel__name { font-weight: 500; font-size: var(--step-lead); line-height: 1.2; } .pxb .panel__name span { display: block; font-weight: 400; font-size: var(--step-body); } .pxb .panel__acts { display: flex; gap: 8px; } .pxb .panel__acts a { min-height: 52px; padding: 0px 22px; display: inline-flex; align-items: center; text-decoration: none; font-weight: 500; transition: transform 140ms var(--ease-out), background-color 180ms; } .pxb .panel__acts a:active { transform: scale(0.97); } .pxb .panel__acts a:first-child { background: var(--ink); color: var(--paper); } .pxb .panel__acts a:first-child:hover { background: rgb(58, 42, 20); } .pxb .panel__acts a:last-child { background: var(--paper); color: var(--ink); } .pxb .panel__acts a:last-child:hover { background: rgb(255, 255, 255); } .pxb .maker { background: var(--ink); color: var(--paper); min-height: 92svh; padding: 120px var(--m); display: grid; grid-template-columns: 5fr 7fr; gap: 48px; align-items: center; } .pxb .maker h2 { font-size: var(--step-head); max-width: 8ch; } .pxb .maker__intro { margin-top: 32px; max-width: 34ch; } .pxb .maker__form { margin-top: 48px; display: grid; gap: 32px; max-width: 480px; } .pxb .lbl { display: block; font-weight: 500; margin-bottom: 10px; } .pxb .count { display: flex; gap: 8px; } .pxb .count button { min-width: 60px; min-height: 60px; background: rgb(46, 34, 20); color: var(--paper); font-weight: 600; font-size: var(--step-lead); transition: background-color 180ms, color 180ms, transform 140ms var(--ease-out); } .pxb .count button:hover { background: rgb(69, 51, 28); } .pxb .count button:active { transform: scale(0.94); } .pxb .count button[aria-pressed="true"] { background: var(--orange); color: var(--ink); } .pxb .name-in { width: 100%; min-height: 60px; padding: 0px 18px; background: rgb(46, 34, 20); color: var(--paper); border: 3px solid rgb(46, 34, 20); font-size: var(--step-lead); } .pxb .name-in::placeholder { color: rgb(185, 171, 150); } .pxb .name-in:focus { outline: none; border-color: var(--orange); } .pxb .maker__out { display: flex; flex-direction: column; align-items: center; text-align: center; } .pxb .base { width: min(100%, 640px); } .pxb .base svg { width: 100%; height: auto; display: block; } .pxb .base__text { font-family: var(--font); font-weight: 600; fill: var(--orange); letter-spacing: -0.01em; } .pxb .price { margin-top: 24px; font-size: var(--step-display); font-weight: 600; color: var(--orange); line-height: 0.9; letter-spacing: -0.03em; } .pxb .when { margin-top: 16px; max-width: 34ch; } .pxb .maker__out .btn { margin-top: 32px; background: var(--orange); color: var(--ink); } .pxb .maker__out .btn:hover { background: rgb(255, 125, 43); } .pxb .fine { margin-top: 14px; font-size: var(--step-small); color: rgb(207, 195, 177); max-width: 46ch; } .pxb .process { background: var(--paper); padding: 140px var(--m); } .pxb .process__intro { display: grid; grid-template-columns: 5fr 1fr 5fr 1fr; gap: 24px; align-items: end; } .pxb .process h2 { font-size: var(--step-head); grid-column: 1; } .pxb .process__intro p { grid-column: 3; max-width: 36ch; } .pxb .acc { margin-top: 64px; display: flex; height: 540px; } .pxb .stage { position: relative; flex: 1 1 0px; min-width: 0px; overflow: hidden; transition: flex-grow 450ms var(--ease-out); } .pxb .stage[data-open="true"] { flex-grow: 6; } .pxb .stage:nth-child(1) { background: var(--st1); color: var(--paper); } .pxb .stage:nth-child(2) { background: var(--st2); color: var(--paper); } .pxb .stage:nth-child(3) { background: var(--st3); color: var(--paper); } .pxb .stage:nth-child(4) { background: var(--st4); color: var(--ink); } .pxb .stage:nth-child(5) { background: var(--st5); color: var(--ink); } .pxb .stage__btn { position: absolute; inset: 0px; z-index: 2; display: flex; align-items: flex-end; justify-content: flex-start; padding: 24px; text-align: left; } .pxb .stage__btn span { writing-mode: vertical-rl; transform: rotate(180deg); font-weight: 600; font-size: var(--step-lead); white-space: nowrap; transition: opacity 200ms; } .pxb .stage[data-open="true"] .stage__btn { display: none; } .pxb .stage__body { position: absolute; inset: 0px; padding: 32px; display: grid; grid-template-columns: 1fr 1fr; gap: 32px; opacity: 0; visibility: hidden; pointer-events: none; transition: opacity 300ms 120ms, visibility; } .pxb .stage[data-open="true"] .stage__body { opacity: 1; visibility: visible; pointer-events: auto; } .pxb .stage__text { display: flex; flex-direction: column; justify-content: space-between; min-width: 0px; } .pxb .stage__text h3 { font-size: var(--step-lead); font-weight: 600; letter-spacing: -0.01em; } .pxb .stage__text p:first-of-type { font-size: var(--step-lead); line-height: 1.3; } .pxb .stage__text p { max-width: 34ch; } .pxb .stage__time { font-weight: 600; font-size: var(--step-lead); } .pxb .stage__media { min-width: 0px; display: flex; align-items: center; justify-content: center; overflow: hidden; } .pxb .stage__media video, .pxb .stage__media img { max-height: 476px; width: auto; max-width: 100%; object-fit: contain; } .pxb .prints { background: var(--blue); color: var(--paper); padding: 120px var(--m) 140px; overflow: hidden; text-align: center; } .pxb .prints h2 { font-size: var(--step-head); line-height: 0.95; } .pxb .occasion { margin-top: 40px; display: flex; flex-direction: column; align-items: center; gap: 8px; } .pxb .occasion__lead { font-size: var(--step-lead); font-weight: 500; } .pxb .occasion__word { display: inline-block; perspective: 800px; } .pxb .occasion__word span { display: inline-block; background: var(--orange); color: var(--ink); font-size: var(--step-display); font-weight: 600; letter-spacing: -0.035em; line-height: 1; padding: 0.08em 0.28em 0.14em; transform-origin: 50% 50% -0.4em; transition: transform 380ms var(--ease-out), opacity 380ms var(--ease-out); } .pxb .occasion__word span.out { transform: rotateX(90deg); opacity: 0; } .pxb .print-row { margin-top: 72px; display: flex; justify-content: center; align-items: flex-end; gap: clamp(16px, 3vw, 48px); } .pxb .print { background: var(--paper); padding: 10px 10px 4px; width: clamp(140px, 19vw, 300px); transition: transform 220ms var(--ease-out); } .pxb .print img { width: 100%; aspect-ratio: 3 / 4; object-fit: cover; transition: opacity 300ms; } .pxb .print figcaption { color: var(--ink); font-size: var(--step-small); padding: 8px 4px 6px; text-align: left; } .pxb .print--a { transform: rotate(-7deg) translateY(24px); } .pxb .print--b { transform: rotate(6deg) translateY(24px); } .pxb .print--main { width: clamp(180px, 25vw, 380px); transform: rotate(-1deg); } .pxb .print:hover { transform: rotate(0deg) translateY(-6px); } .pxb .print--main img.fade { opacity: 0; } .pxb .prints__note { margin: 48px auto 0px; max-width: 46ch; font-size: var(--step-body); } .pxb .biz { background: var(--ink); color: var(--paper); padding: 140px var(--m) 0; } .pxb .biz__head { display: grid; grid-template-columns: 7fr 5fr; gap: 48px; align-items: end; } .pxb .biz h2 { font-size: var(--step-head); max-width: 14ch; } .pxb .biz__head p { max-width: 40ch; } .pxb .biz__head .btn { margin-top: 28px; background: var(--orange); color: var(--ink); } .pxb .biz__head .btn:hover { background: rgb(255, 125, 43); } .pxb .biz__grid { margin-top: 72px; display: grid; grid-template-columns: 7fr 5fr; grid-template-rows: auto auto; gap: 12px; } .pxb .biz__grid figure { position: relative; overflow: hidden; background: rgb(42, 31, 18); } .pxb .biz__grid img { width: 100%; height: 100%; object-fit: cover; transition: transform 700ms var(--ease-out); } .pxb .biz__grid figure:hover img { transform: scale(1.04); } .pxb .biz__big { grid-row: span 2; aspect-ratio: 1110 / 1368; } .pxb .biz__grid figure:not(.biz__big) { aspect-ratio: 16 / 10; } .pxb .biz__grid figcaption { position: absolute; left: 0px; bottom: 0px; background: var(--paper); color: var(--ink); padding: 10px 16px; font-weight: 500; font-size: var(--step-body); } .pxb .biz__also { margin-top: 120px; } .pxb .biz__also h3 { font-size: var(--step-lead); letter-spacing: -0.01em; } .pxb .biz__words { margin-top: 20px; display: flex; flex-wrap: wrap; gap: 6px 0px; font-size: var(--step-head); font-weight: 600; letter-spacing: -0.025em; line-height: 1.1; } .pxb .biz__words li { color: var(--paper); } .pxb .biz__words li:nth-child(2n+1) { color: var(--orange); } .pxb .biz__words li:not(:last-child)::after { content: " · "; color: rgb(107, 90, 68); white-space: pre; } .pxb .tech { margin: 120px calc(var(--m) * -1) 0; display: grid; grid-template-columns: 1fr 1fr; } .pxb .tech h3 { font-size: var(--step-head); } .pxb .tech__lead { margin-top: 20px; font-size: var(--step-lead); line-height: 1.3; max-width: 26ch; } .pxb .tech ul { margin-top: 28px; display: grid; gap: 6px; } .pxb .tech li::before { content: "→ "; font-weight: 600; } .pxb .tech__intro { grid-column: 1 / -1; background: var(--surface); color: var(--ink); padding: 48px var(--m); display: flex; justify-content: space-between; align-items: end; gap: 32px; flex-wrap: wrap; } .pxb .tech__intro h3 { font-size: var(--step-head); max-width: 14ch; } .pxb .tech__intro p { max-width: 44ch; } .pxb .pricing { background: var(--paper); padding: 140px var(--m); } .pxb .tiles { position: relative; display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; align-items: end; min-height: 760px; } .pxb .tiles h2 { position: absolute; left: 0px; top: 0px; font-size: var(--step-head); max-width: 9ch; } .pxb .tile { display: flex; flex-direction: column; } .pxb .tile:nth-of-type(1) { height: 420px; background: var(--blue); color: var(--paper); } .pxb .tile:nth-of-type(2) { height: 540px; background: var(--orange); color: var(--ink); } .pxb .tile:nth-of-type(3) { height: 660px; background: var(--ink); color: var(--paper); } .pxb .tile__in { padding: 28px; flex: 1 1 0%; } .pxb .tile h3 { font-size: var(--step-lead); letter-spacing: -0.01em; } .pxb .tile__price { margin-top: 6px; font-size: var(--step-head); font-weight: 600; letter-spacing: -0.03em; line-height: 1; } .pxb .tile__price small { font-size: var(--step-body); font-weight: 400; letter-spacing: 0px; margin-right: 0.3em; } .pxb .tile ul { margin-top: 20px; display: grid; gap: 4px; } .pxb .tile__go { min-height: 64px; display: flex; align-items: center; justify-content: space-between; padding: 0px 28px; text-decoration: none; font-weight: 500; transition: padding 200ms var(--ease-out); } .pxb .tile__go:hover { padding-right: 20px; } .pxb .tile:nth-of-type(1) .tile__go { background: var(--blue-deep); } .pxb .tile:nth-of-type(2) .tile__go { background: var(--orange-deep); color: var(--paper); } .pxb .tile:nth-of-type(3) .tile__go { background: rgb(0, 0, 0); } .pxb .facts { background: var(--paper); padding: 140px var(--m); display: grid; grid-template-columns: 5fr 7fr; gap: 48px 64px; } .pxb .facts > div { display: contents; } .pxb .facts h2 { grid-column: 1 / -1; font-size: var(--step-head); } .pxb .facts__lead { align-self: start; } .pxb .facts__lead { margin-top: 0px; font-size: var(--step-lead); line-height: 1.35; max-width: 30ch; } .pxb .facts dl { margin: 0px; display: grid; grid-template-columns: auto 1fr; } .pxb .facts dt, .pxb .facts dd { margin: 0px; padding: 18px 0px; } .pxb .facts dt { font-weight: 600; padding-right: 32px; } .pxb .facts dt { font-size: var(--step-lead); line-height: 1.2; } .pxb .facts dd + dt, .pxb .facts dd + dt + dd { padding-top: 28px; } .pxb .faq__head { background: var(--orange); min-height: 32svh; display: flex; align-items: flex-end; padding: 0 var(--m) 40px; } .pxb .faq__head h2 { font-size: var(--step-head); } .pxb .contact { background: var(--green); color: var(--paper); min-height: 80svh; padding: 48px 0px 96px; overflow: hidden; } .pxb .strip-wrap { overflow: hidden; width: 100%; } .pxb .strip { display: flex; gap: 8px; width: max-content; animation: 60s linear 0s infinite normal none running drift; } .pxb .strip img { height: 150px; width: auto; object-fit: cover; } .pxb .strip img:nth-child(3n+1) { aspect-ratio: 3 / 4; } .pxb .strip img:nth-child(3n+2) { aspect-ratio: 1 / 1; } .pxb .strip img:nth-child(3n) { aspect-ratio: 3 / 2; } @keyframes drift { 100% { transform: translateX(-50%); } } .pxb .contact__in { padding: 0 var(--m); } .pxb .contact h2 { margin-top: 72px; font-size: var(--step-head); max-width: 12ch; } .pxb .cells { margin-top: 40px; display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; } .pxb .cells input, .pxb .cells a { min-height: 96px; background: var(--green-deep); color: var(--paper); border: 0px; text-align: center; font-size: var(--step-lead); padding: 0px 16px; transition: background-color 180ms; } .pxb .cells input::placeholder { color: rgb(191, 227, 207); } .pxb .cells input:focus { outline: none; background: rgb(20, 160, 102); } .pxb .cells a { display: flex; align-items: center; justify-content: center; gap: 0.5em; background: var(--paper); color: var(--ink); text-decoration: none; font-weight: 500; } .pxb .cells a:hover { background: rgb(255, 255, 255); } .pxb .cells__notes { margin-top: 14px; display: flex; gap: 32px; font-size: var(--step-small); } .pxb .foot { background: var(--orange); color: var(--ink); padding: 96px var(--m) 28px; } .pxb .foot__grid { display: grid; grid-template-columns: 5fr 2fr 3fr 2fr; gap: 40px; align-items: start; } .pxb .foot__brand { display: flex; flex-direction: column; gap: 24px; } .pxb .foot__brand .emblem { width: clamp(120px, 14vw, 200px); height: auto; aspect-ratio: 1 / 1; color: var(--ink); } .pxb .foot__brand p { font-size: var(--step-lead); font-weight: 500; line-height: 1.25; max-width: 18ch; } .pxb .foot__brand .btn { align-self: flex-start; } .pxb .foot h3 { font-size: var(--step-body); letter-spacing: 0px; font-weight: 600; margin-bottom: 14px; } .pxb .foot ul { display: grid; gap: 8px; } .pxb .foot a { text-decoration: none; } .pxb .foot li a:hover { text-decoration: underline 3px; text-underline-offset: 5px; } .pxb .foot__phone { font-size: var(--step-lead); font-weight: 600; } .pxb .foot__hrs { margin-top: 14px; padding: 10px 12px; border-radius: 12px; background: rgba(255, 100, 0, 0.07); border: 1px solid rgba(255, 100, 0, 0.28); font-size: var(--step-small); line-height: 1.45; max-width: 34ch; } .pxb .foot__hrs b { color: var(--ink); font-weight: 600; } .pxb .foot__legal { margin-top: 72px; padding-top: 20px; display: flex; justify-content: space-between; gap: 16px; flex-wrap: wrap; font-size: var(--step-small); background: none; } .pxb .foot__legal p:first-child { font-weight: 600; } .pxb.js .rise.pending { opacity: 0; transform: translateY(28px); transition: opacity 800ms var(--ease-out), transform 800ms var(--ease-out); transition-delay: calc(var(--i, 0) * 80ms); } .pxb.js .rise.pending.in { opacity: 1; transform: none; } @media (prefers-reduced-motion: reduce){ .pxb .emblem .em-ring, .pxb .emblem .em-core, .pxb .emblem .em-nodes circle, .pxb .emblem .em-lines { animation: auto ease 0s 1 normal none running none; } .pxb .drop { animation: auto ease 0s 1 normal none running none; } .pxb .occasion__word span { transition: none; } .pxb .belt__track { animation: auto ease 0s 1 normal none running none; } .pxb .strip { animation: auto ease 0s 1 normal none running none; } .pxb.js .rise.pending { opacity: 1; transform: none; transition: none; } .pxb .stage, .pxb .stage__body { transition: none; } } @media (max-width: 899px){ .pxb .bar nav { display: none; } .pxb .bar .btn { margin-left: auto; } .pxb .banner { height: 78svh; min-height: 460px; } .pxb .banner__emblem { width: 92vw; left: 50%; top: 58%; } .pxb .banner__word { top: 4%; } .pxb .banner__nino { height: 74%; left: 18%; } .pxb .banner__ghost { height: 40%; left: 62%; } .pxb .hero__copy { position: relative; left: auto; bottom: auto; width: auto; padding: 40px var(--m) 56px; } .pxb .belt { padding: 18px 0px; } .pxb .duo { grid-template-columns: 1fr; } .pxb .panel { min-height: 82svh; } .pxb .panel__obj { bottom: 160px; height: 50%; } .pxb .maker { grid-template-columns: 1fr; padding: 96px var(--m); } .pxb .process { padding: 96px var(--m); } .pxb .process__intro { grid-template-columns: 1fr; } .pxb .process h2, .pxb .process__intro p { grid-column: 1; } .pxb .acc { flex-direction: column; height: auto; } .pxb .stage { flex: 0 0 auto; } .pxb .stage__btn { position: relative; inset: auto; min-height: 64px; align-items: center; width: 100%; padding: 0px 20px; } .pxb .stage__btn span { writing-mode: horizontal-tb; transform: none; font-size: var(--step-body); } .pxb .stage__body { position: relative; inset: auto; display: none; grid-template-columns: 1fr; padding: 24px 20px 28px; gap: 20px; } .pxb .stage[data-open="true"] .stage__body { display: grid; } .pxb .stage__text { gap: 16px; } .pxb .stage__media video, .pxb .stage__media img { max-height: 360px; } .pxb .prints { padding: 96px var(--m) 110px; } .pxb .print-row { margin-top: 48px; } .pxb .print--a, .pxb .print--b { display: none; } .pxb .print--main { width: min(78vw, 320px); } .pxb .pricing { padding: 96px var(--m); } .pxb .facts { grid-template-columns: 1fr; padding: 96px var(--m); } .pxb .facts dl { grid-template-columns: 1fr; } .pxb .facts dt { padding: 24px 0px 4px; } .pxb .facts dd { padding: 0px; } .pxb .facts dd + dt + dd { padding-top: 0px; } .pxb .biz { padding-top: 96px; } .pxb .biz__head, .pxb .biz__grid, .pxb .tech { grid-template-columns: 1fr; } .pxb .biz__big { grid-row: auto; } .pxb .biz h2 { max-width: none; } .pxb .biz__also { margin-top: 80px; } .pxb .tech { margin-top: 80px; } .pxb .faq__head { min-height: 30svh; } .pxb .strip img { height: 110px; } .pxb .cells { grid-template-columns: 1fr; } .pxb .cells__notes { flex-direction: column; gap: 4px; } .pxb .cells input, .pxb .cells a { min-height: 64px; } .pxb .foot { padding-top: 72px; } .pxb .foot__grid { grid-template-columns: 1fr 1fr; gap: 36px 24px; } .pxb .foot__brand { grid-column: 1 / -1; } } @media (max-width: 1199px) and (min-width: 900px){ .pxb .banner { height: 74svh; } .pxb .hero__copy { position: relative; left: auto; bottom: auto; width: auto; display: grid; grid-template-columns: 1fr 1fr; gap: 0px 48px; align-items: end; padding: 48px var(--m) 56px; } .pxb .hero__copy h1 { grid-row: span 3; } .pxb .banner__nino { left: 40%; } .pxb .banner__ghost { left: 66%; } .pxb .banner__emblem { left: 56%; } } @media (max-width: 899px) and (min-width: 641px){ .pxb .tiles { min-height: 620px; } .pxb .tile:nth-of-type(1) { height: 400px; } .pxb .tile:nth-of-type(2) { height: 470px; } .pxb .tile:nth-of-type(3) { height: 540px; } .pxb .tile__in { padding: 20px; } } @media (max-width: 640px){ .pxb .tiles { grid-template-columns: 1fr; min-height: 0px; gap: 40px; } .pxb .tiles h2 { position: static; margin-bottom: 32px; } .pxb .tile:nth-of-type(n) { height: auto; } .pxb .tile__in { padding-bottom: 40px; } } .pxb .sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0px, 0px, 0px, 0px); white-space: nowrap; } .pxb .faq__body { background: var(--paper); display: grid; grid-template-columns: 8fr 4fr; gap: 48px; padding: 64px var(--m) 120px; align-items: start; } .pxb .faq__tools { display: flex; flex-wrap: wrap; gap: 16px; justify-content: space-between; align-items: center; margin-bottom: 28px; } .pxb .chips { display: flex; flex-wrap: wrap; gap: 8px; } .pxb .chip { min-height: 44px; padding: 0px 18px; border-radius: 999px; background: var(--surface); font-weight: 500; transition: background-color 200ms, color 200ms, transform 200ms var(--ease-out); } .pxb .chip:hover { transform: translateY(-2px); background: rgb(214, 214, 208); } .pxb .chip[aria-pressed="true"] { background: var(--ink); color: var(--paper); } .pxb .fsearch { display: flex; align-items: center; gap: 10px; min-height: 48px; padding: 0px 16px; background: rgb(255, 255, 255); border-radius: 999px; border: 2px solid var(--surface); flex: 1 1 260px; max-width: 360px; transition: border-color 200ms; } .pxb .fsearch:focus-within { border-color: var(--orange); } .pxb .fsearch svg { width: 20px; height: 20px; flex: 0 0 auto; } .pxb .fsearch input { border: 0px; outline: 0px; background: none; width: 100%; min-height: 44px; font-size: 1rem; } .pxb .fqs { display: grid; gap: 10px; } .pxb .fq { background: rgb(255, 255, 255); border-radius: 22px; transition: background-color 300ms, box-shadow 300ms, transform 300ms var(--ease-out); } .pxb .fq:hover { transform: translateX(4px); } .pxb .fq[hidden] { display: none; } .pxb .fq h3 { font-size: var(--step-lead); line-height: 1.2; letter-spacing: -0.01em; } .pxb .fq__btn { width: 100%; display: grid; grid-template-columns: auto 1fr auto; gap: 18px; align-items: center; text-align: left; padding: 22px 24px; min-height: 76px; } .pxb .fq__n { font-size: var(--step-small); font-weight: 600; color: var(--orange-deep); } .pxb .fq__ic { position: relative; width: 44px; height: 44px; border-radius: 50%; background: var(--orange); transition: transform 400ms var(--ease-expo), background-color 300ms; } .pxb .fq__ic::before, .pxb .fq__ic::after { content: ""; position: absolute; left: 50%; top: 50%; width: 18px; height: 3px; margin: -1.5px 0px 0px -9px; background: var(--ink); border-radius: 2px; } .pxb .fq__ic::after { transform: rotate(90deg); } .pxb .fq__p { display: grid; grid-template-rows: 1fr; } .pxb.js .fq__p { grid-template-rows: 0fr; transition: grid-template-rows 450ms var(--ease-expo); } .pxb .fq__p > div { overflow: hidden; } .pxb .fq__p p { padding: 0px 84px 26px 66px; max-width: 70ch; opacity: 1; transition: opacity 300ms 100ms; } .pxb.js .fq:not(.open) .fq__p p { opacity: 0; transition-delay: 0ms; } .pxb .fq__none { margin-top: 20px; font-size: var(--step-lead); } .pxb .faq__side { position: sticky; top: 24px; } .pxb .askcard { background: var(--blue); color: var(--paper); border-radius: 28px; padding: 32px; display: flex; flex-direction: column; gap: 16px; overflow: hidden; position: relative; } .pxb .askcard h3 { font-size: clamp(1.75rem, 1.2rem + 1.6vw, 2.6rem); max-width: 10ch; } .pxb .askcard__em { position: absolute; right: -40px; top: -40px; width: 170px; height: 170px; color: rgb(255, 255, 255); opacity: 0.22; animation: 24s linear 0s infinite normal none running pxspin; } .pxb .askcard .btn { background: var(--ink); align-self: flex-start; border-radius: 999px; } .pxb .askcard__num { font-weight: 600; } @keyframes pxspin { 100% { transform: rotate(360deg); } } .pxb .foot { padding: 0px 0px 28px; position: relative; } .pxb .foot__in { padding: 80px var(--m) 0; } .pxb .fcta { background: var(--ink); color: var(--paper); overflow: hidden; } .pxb .fcta__mq { overflow: hidden; padding: 16px 0px; background: var(--blue); } .pxb .fcta__track { display: flex; gap: 28px; width: max-content; font-size: var(--step-lead); font-weight: 600; animation: 34s linear 0s infinite normal none running drift; } .pxb .fcta__track .d { color: var(--orange); font-size: 0.7em; align-self: center; } .pxb .fcta__big { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: flex-end; gap: 24px; padding: 72px var(--m) 64px; text-decoration: none; } .pxb .fcta__t { font-size: var(--step-display); font-weight: 600; line-height: .92; letter-spacing: -0.035em; max-width: 9ch; background: linear-gradient(90deg, var(--orange) 0 50%, var(--paper) 50% 100%); background-size: 200% 100%; background-position: 100% 0; -webkit-background-clip: text; background-clip: text; color: transparent !important; transition: background-position 700ms var(--ease-expo); } .pxb .fcta__big:hover .fcta__t, .pxb .fcta__big:focus-visible .fcta__t { background-position: 0px 0px; } .pxb .fcta__go { display: inline-flex; align-items: center; gap: 0.6em; min-height: 64px; padding: 0px 30px; border-radius: 999px; background: var(--orange); font-weight: 600; font-size: var(--step-lead); transition: transform 300ms var(--ease-out); color: var(--ink) !important; } .pxb .fcta__go .arrow { transition: transform 200ms var(--ease-out); } .pxb .fcta__big:hover .fcta__go { transform: scale(1.05) rotate(-2deg); } .pxb .fcta__big:hover .fcta__go .arrow { transform: translateX(6px); } .pxb .foot__em { transition: transform 600ms var(--ease-expo); transform: rotate(var(--frot, 0deg)); } .pxb .foot__brand:hover .foot__em { transform: rotate(calc(var(--frot, 0deg) + 90deg)) scale(1.06); } .pxb .foot li a:hover { text-decoration: none; } .pxb .ulinks a, .pxb .foot__phone { background: linear-gradient(currentcolor, currentcolor) 0px 100% / 0px 3px no-repeat; padding-bottom: 2px; transition: background-size 350ms var(--ease-out); } .pxb .ulinks a:hover, .pxb .ulinks a:focus-visible, .pxb .foot__phone:hover { background-size: 100% 3px; } .pxb .soc { display: inline-flex; align-items: center; gap: 10px; transition: transform 250ms var(--ease-out); } .pxb .soc svg { width: 40px; height: 40px; padding: 9px; border-radius: 50%; background: var(--ink); color: var(--orange); transition: background-color 250ms, color 250ms, transform 250ms var(--ease-out); } .pxb .soc:hover { transform: translateY(-4px); } .pxb .soc:hover svg { background: var(--paper); color: var(--ink); transform: rotate(-8deg); } .pxb .foot__legal { border-top: 3px solid var(--ink); } .pxb .totop { position: fixed; right: 20px; bottom: 20px; z-index: 30; width: 56px; height: 56px; border-radius: 50%; background: var(--ink); color: var(--orange); display: grid; place-items: center; opacity: 0; transform: translateY(20px) scale(0.8); pointer-events: none; transition: opacity 300ms, transform 300ms var(--ease-out), background-color 200ms; } .pxb .totop svg { width: 24px; height: 24px; } .pxb .totop.show { opacity: 1; transform: none; pointer-events: auto; } .pxb .totop:hover { background: var(--orange); color: var(--ink); } @media (max-width: 899px){ .pxb .faq__body { grid-template-columns: 1fr; padding: 40px var(--m) 80px; gap: 32px; } .pxb .faq__side { position: static; } .pxb .chips { flex-wrap: nowrap; overflow-x: auto; margin: 0 calc(var(--m) * -1); padding: 0 var(--m); scrollbar-width: none; } .pxb .chip { flex: 0 0 auto; } .pxb .fsearch { max-width: none; } .pxb .fq__btn { padding: 18px 16px; gap: 12px; } .pxb .fq__ic { width: 36px; height: 36px; } .pxb .fq__p p { padding: 0px 16px 22px; } .pxb .fcta__big { padding: 48px var(--m); } .pxb .foot__in { padding-top: 56px; } } @media (prefers-reduced-motion: reduce){ .pxb .fcta__track, .pxb .askcard__em { animation: auto ease 0s 1 normal none running none; } .pxb.js .fq__p, .pxb .fq, .pxb .fq__ic, .pxb .fcta__t, .pxb .foot__em, .pxb .totop, .pxb .soc, .pxb .soc svg, .pxb .chip { transition: none; } } .pxb .faq__main, .pxb .faq__side { min-width: 0px; } .pxb .fcta__t { padding-bottom: 0.12em; } @media (max-width: 767px){ .pxb section.faq#preguntas { display: none !important; } .pxb a[href="#preguntas"] { display: none !important; } } .pxb .facts .fgrid { grid-column: 1 / -1; display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; } .pxb .fc { position: relative; border-radius: 26px; padding: 22px 22px 20px; background: var(--surface); color: var(--ink); display: flex; flex-direction: column; gap: 6px; min-width: 0px; transition: transform 260ms var(--ease-out); } .pxb .fc:hover { transform: translateY(-4px) rotate(-0.6deg); } .pxb .fc.wide { grid-column: span 2; } .pxb .fc__ic { width: 48px; height: 48px; border-radius: 16px; display: grid; place-items: center; background: var(--ink); color: var(--orange); margin-bottom: 8px; } .pxb .fc__ic svg { width: 28px; height: 28px; fill: none; stroke: currentcolor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; } .pxb .fc__l { margin: 0px; font-size: var(--step-small); font-weight: 500; text-transform: uppercase; letter-spacing: 0.06em; opacity: 0.75; } .pxb .fc__k { margin: 0px; font-size: clamp(1.4rem, 0.9rem + 1.1vw, 2rem); font-weight: 600; line-height: 1.05; letter-spacing: -0.02em; overflow-wrap: anywhere; } .pxb .fc__s { margin: 0px; font-size: var(--step-small); line-height: 1.35; } .pxb .fc__more { margin-top: auto; padding-top: 10px; font-size: var(--step-small); line-height: 1.4; } .pxb .fc__more summary { cursor: pointer; font-weight: 600; list-style: none; display: inline-flex; gap: 6px; align-items: center; } .pxb .fc__more summary::-webkit-details-marker { display: none; } .pxb .fc__more summary::after { content: "+"; font-size: 1.2em; line-height: 1; transition: transform 200ms; } .pxb .fc__more[open] summary::after { transform: rotate(45deg); } .pxb .fc__more p { margin: 8px 0px 0px; } .pxb .fc.c-orange { background: var(--orange); } .pxb .fc.c-orange .fc__ic { color: var(--orange); } .pxb .fc.c-blue { background: var(--blue); color: rgb(255, 255, 255); } .pxb .fc.c-blue .fc__ic { background: rgb(255, 255, 255); color: var(--blue); } .pxb .fc.c-green { background: var(--green); color: rgb(255, 255, 255); } .pxb .fc.c-green .fc__ic { background: rgb(255, 255, 255); color: var(--green); } .pxb .fc.c-ink { background: var(--ink); color: var(--paper); } .pxb .fc.c-ink .fc__ic { background: var(--orange); color: var(--ink); } .pxb .fc.c-ink .fc__k { color: var(--orange); } .pxb .fc.c-paper { background: rgb(255, 255, 255); box-shadow: inset 0 0 0 2px var(--surface); } @media (max-width: 1199px){ .pxb .facts .fgrid { grid-column: 1 / -1; } } @media (max-width: 640px){ .pxb .facts .fgrid { grid-template-columns: 1fr 1fr; gap: 10px; } .pxb .fc { padding: 16px 14px 14px; border-radius: 20px; gap: 4px; } .pxb .fc.wide { grid-column: span 2; } .pxb .fc__ic { width: 40px; height: 40px; border-radius: 13px; margin-bottom: 4px; } .pxb .fc__ic svg { width: 23px; height: 23px; } .pxb .fc__k { font-size: 1.3rem; } .pxb .fc__l { font-size: 0.72rem; } .pxb .facts__lead { font-size: 1.1rem; } } .pxb .fig { transition: transform 520ms var(--ease-expo); } .pxb .fig__in { transform-box: fill-box; transform-origin: 50% 100%; transform: scale(0); opacity: 0; transition: transform 460ms cubic-bezier(0.34, 1.56, 0.64, 1), opacity 200ms; } .pxb .fig.on .fig__in { transform: scale(1); opacity: 1; } .pxb .fig__bob { animation: 2.6s ease-in-out 0s infinite normal none running pxbBob; transform-box: fill-box; transform-origin: 50% 100%; } @keyframes pxbBob { 0%, 100% { transform: translateY(0px); } 50% { transform: translateY(-6px); } } @media (prefers-reduced-motion: reduce){ .pxb .fig, .pxb .fig__in { transition: none; } .pxb .fig__bob { animation: auto ease 0s 1 normal none running none; } } html:has(.pxb) { background: rgb(255, 100, 0); overscroll-behavior-y: none; } .pxb .foot { margin-bottom: 0px; } .pxb .ic { width: 1.25em; height: 1.25em; flex: 0 0 auto; fill: none; stroke: currentcolor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; } .pxb .irow { display: grid; gap: 8px; list-style: none; padding: 0px; } .pxb .irow li { display: flex; align-items: flex-start; gap: 10px; line-height: 1.3; } .pxb .irow li::before { content: none !important; } .pxb .irow .ic { margin-top: 0.05em; padding: 3px; box-sizing: content-box; border-radius: 8px; background: color-mix(in srgb, currentcolor 14%, transparent 86%); } .pxb .tile:nth-of-type(1) { height: auto; min-height: 420px; } .pxb .tile:nth-of-type(2) { height: auto; min-height: 540px; } .pxb .tile:nth-of-type(3) { height: auto; min-height: 660px; } .pxb .tile__ic { display: inline-grid; place-items: center; width: 56px; height: 56px; border-radius: 16px; background: color-mix(in srgb, currentcolor 14%, transparent 86%); margin-bottom: 14px; } .pxb .ic--lg { width: 30px; height: 30px; } .pxb .tile .irow { margin-top: 20px; } .pxb .tech__intro { align-items: center; } .pxb .tech__chips li, .pxb .fchips li { display: inline-flex; align-items: center; gap: 8px; padding: 8px 14px; border-radius: 999px; background: var(--paper); font-weight: 500; font-size: 0.95rem; } .pxb .fchips { grid-column: 2; align-self: start; display: flex; flex-wrap: wrap; gap: 10px; list-style: none; padding: 0px; margin: 0px; } .pxb .fchips li { background: color-mix(in srgb, var(--orange) 14%, transparent); color: var(--ink); } .pxb .fchips li:nth-child(3n+2) { background: color-mix(in srgb, var(--blue) 13%, transparent); } .pxb .fchips li:nth-child(3n) { background: color-mix(in srgb, var(--green) 13%, transparent); } .pxb .fchips .ic { color: var(--orange-deep); } .pxb .fchips li:nth-child(3n+2) .ic { color: var(--blue-deep); } .pxb .fchips li:nth-child(3n) .ic { color: var(--green-deep); } @media (max-width: 1100px){ .pxb .fchips { grid-column: 1 / -1; } } @media (max-width: 767px){ .pxb .tile:nth-of-type(n) { min-height: 0px; } .pxb .fchips li, .pxb .tech__chips li { font-size: 0.88rem; padding: 7px 12px; } } @media (prefers-reduced-motion: no-preference){ .pxb.js .anim .irow li, .pxb.js .anim.fchips li { opacity: 0; transform: translateY(8px); } .pxb.js .anim.on .irow li, .pxb.js .anim.on.fchips li { animation: pxbIn .5s var(--ease-out, ease-out) forwards; animation-delay: calc(var(--j, 0) * 70ms + 150ms); } .pxb.js .anim.on .tile__ic { animation: pxbPop .6s var(--ease-out, ease-out) both, pxbPulse 3.2s ease-in-out .8s infinite; } .pxb .tile:hover .tile__ic .ic, .pxb .fchips li:hover .ic { animation: 0.5s ease-in-out 0s 1 normal none running pxbWiggle; } } @keyframes pxbDraw { 100% { stroke-dashoffset: 0; } } @keyframes pxbFloat { 0%, 100% { transform: translateY(0px); } 50% { transform: translateY(-6px); } } @keyframes pxbDrip { 0% { transform: translateY(-14px); opacity: 0; } 30% { opacity: 1; } 100% { transform: translateY(8px); opacity: 0; } } @keyframes pxbSpin { 100% { transform: rotate(360deg); } } @keyframes pxbIn { 100% { opacity: 1; transform: none; } } @keyframes pxbPop { 0% { transform: scale(0.6); opacity: 0; } 100% { transform: none; opacity: 1; } } @keyframes pxbPulse { 0%, 100% { box-shadow: color-mix(in srgb, currentcolor 30%, transparent 70%) 0px 0px 0px 0px; } 50% { box-shadow: transparent 0px 0px 0px 8px; } } @keyframes pxbWiggle { 0%, 100% { transform: rotate(0deg); } 30% { transform: rotate(-12deg); } 60% { transform: rotate(9deg); } } .pxb .base { position: relative; } .pxb .base__gl { position: absolute; left: 0px; top: 0px; width: 100%; height: 76%; display: block; opacity: 0; transition: opacity 500ms; pointer-events: none; z-index: 1; } .pxb .base.gl .base__gl { opacity: 1; } .pxb .base.gl #figs { display: none; } .pxb .base svg { position: relative; } .pxb .tech.vs { display: block; background: var(--surface); padding-bottom: 72px; } .pxb .vs .tech__intro { padding-bottom: 32px; } .pxb .vs__grid { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; padding: 0 var(--m); } .pxb .vs__card { background: var(--paper); border-radius: 28px; padding: 28px; display: flex; flex-direction: column; min-width: 0px; box-shadow: rgba(0, 0, 0, 0.04) 0px 1px 0px, rgba(42, 38, 34, 0.35) 0px 18px 40px -24px; } .pxb .vs__card--resin { background: linear-gradient(180deg, #fff1e6, var(--paper) 55%); } .pxb .vs__card--fdm { background: linear-gradient(180deg, #e9f0fd, var(--paper) 55%); } .pxb .vs__stage { height: clamp(180px, 22vw, 280px); display: grid; place-items: center; } .pxb .vs__art { height: 100%; width: auto; max-width: 100%; overflow: visible; } .pxb .vs__tag { align-self: flex-start; margin-top: 8px; padding: 5px 12px; border-radius: 999px; font-size: 0.85rem; font-weight: 600; background: var(--orange); color: rgb(255, 255, 255); } .pxb .vs__card--fdm .vs__tag { background: var(--blue); } .pxb .vs__card h3 { margin-top: 10px; font-size: clamp(2rem, 1.2rem + 3vw, 3.75rem); } .pxb .vs .tech__lead { margin-top: 6px; max-width: 30ch; } .pxb .vs__meters { margin: 22px 0px 0px; display: grid; gap: 10px; } .pxb .vs__meters > div { display: grid; grid-template-columns: 7.5em 1fr; align-items: center; gap: 12px; } .pxb .vs__meters dt { font-weight: 600; font-size: 0.95rem; } .pxb .vs__meters dd { margin: 0px; display: flex; align-items: center; gap: 10px; } .pxb .vs__meters b { font-size: 0.8rem; opacity: 0.6; font-weight: 500; } .pxb .vs__bar { flex: 1 1 0%; height: 10px; border-radius: 99px; background: rgba(42, 38, 34, 0.1); overflow: hidden; } .pxb .vs__bar i { display: block; height: 100%; width: calc(var(--v) * 20%); border-radius: inherit; background: linear-gradient(90deg, #ffa066, var(--orange)); } .pxb .vs__card--fdm .vs__bar i { background: linear-gradient(90deg, #6ea2f5, var(--blue)); } .pxb .vs__pills { margin-top: 22px; display: flex; flex-wrap: wrap; gap: 8px; list-style: none; padding: 0px; } .pxb .tech .vs__pills li::before { content: none; } .pxb .vs__pills li { display: inline-flex; align-items: center; gap: 7px; padding: 7px 12px; border-radius: 999px; font-size: 0.9rem; background: rgba(255, 100, 0, 0.1); } .pxb .vs__card--fdm .vs__pills li { background: rgba(22, 99, 224, 0.1); } .pxb .vs__pills .ic { color: var(--orange-deep); } .pxb .vs__card--fdm .vs__pills .ic { color: var(--blue-deep); } .pxb .vs__combo { margin: 20px var(--m) 0; display: flex; align-items: center; gap: 10px; padding: 16px 22px; border-radius: 999px; background: var(--paper); flex-wrap: wrap; } .pxb .vs__combo p { margin: 0px; flex: 1 1 240px; } .pxb .vs__dot { width: 22px; height: 22px; border-radius: 50%; background: var(--orange); } .pxb .vs__dot--f { background: var(--blue); } .pxb .vs__plus { font-weight: 700; } .pxb .tech.vs .vs__combo, .pxb .tech.vs .vs__combo p { color: var(--ink); opacity: 1; } @media (max-width: 767px){ .pxb .vs__grid { grid-template-columns: 1fr; } .pxb .vs__card { padding: 22px; } .pxb .vs__combo { border-radius: 22px; } } @media (prefers-reduced-motion: no-preference){ .pxb.js .vs__card.anim .vs__bar i { width: 0; transition: width 1.1s var(--ease-out); transition-delay: calc(var(--j) * 120ms + 200ms); } .pxb.js .vs__card.anim.on .vs__bar i { width: calc(var(--v) * 20%); } .pxb.js .vs__card.anim .vs__pills li { opacity: 0; transform: translateY(8px); } .pxb.js .vs__card.anim.on .vs__pills li { animation: pxbIn .5s var(--ease-out) forwards; animation-delay: calc(var(--j) * 80ms + 500ms); } .pxb .vs__float { animation: 4.5s ease-in-out 0s infinite normal none running pxbFloat; } .pxb .vs__spark { animation: 2.4s ease-in-out 0s infinite normal none running pxbTw; transform-origin: center center; } .pxb .vs__shine { animation: 3s ease-in-out 0s infinite normal none running pxbTw; } .pxb.js .vs__card.anim .vs__ly { opacity: 0; } .pxb.js .vs__card.anim.on .vs__ly { animation-duration: 0.25s; animation-timing-function: linear; animation-iteration-count: 1; animation-direction: normal; animation-fill-mode: forwards; animation-play-state: running; animation-name: pxbIn; animation-timeline: auto; animation-range: normal; animation-delay: calc(var(--k) * 90ms); } .pxb.js .vs__card.anim.on .vs__nozzle { animation: 1.6s ease-in-out 0s infinite normal none running pxbNoz; } .pxb .vs__spool { animation: 6s linear 0s infinite normal none running pxbSpin; transform-box: fill-box; transform-origin: center center; } } @keyframes pxbTw { 0%, 100% { opacity: 0.35; } 50% { opacity: 1; } } @keyframes pxbNoz { 0%, 100% { transform: translateX(-26px); } 50% { transform: translateX(26px); } } .pxb .tech.vs .vs__card { color: var(--ink); position: relative; overflow: hidden; } .pxb .vs__stage { position: relative; } .pxb .vs__stage svg.vs__art { position: static; display: block; width: clamp(180px, 22vw, 280px); height: clamp(180px, 22vw, 280px); max-width: 100%; } .pxb .tech ul.vs__pills { display: flex; gap: 8px; margin-top: 22px; } .pxb .vs__card h3 { font-size: clamp(2rem, 1.2rem + 3vw, 3.75rem); } .pxb { --ink: #2a2622; --cream: #f7f2ea; --hot-bg: var(--cream); background: var(--cream); } html:has(.pxb) { background: rgb(247, 242, 234); } .pxb .belt { background: var(--cream); color: var(--orange); border-block: 1px solid rgba(42, 38, 34, 0.08); } .pxb .tile:nth-of-type(2) { background: var(--hot-bg); color: var(--ink); box-shadow: inset 0 6px 0 var(--orange); } .pxb .tile:nth-of-type(2) .tile__price { color: var(--orange); } .pxb .tile:nth-of-type(3) .tile__go { background: rgb(31, 28, 25); } .pxb .faq__head { background: var(--hot-bg); } .pxb .foot { background: var(--hot-bg); border-top: 6px solid var(--orange); } .pxb .fc.c-orange { background: rgb(255, 233, 217); } .pxb .fc.c-orange .fc__k { color: var(--orange-deep); } .pxb .maker .base ellipse[fill="#2e2214"], .pxb .maker .base ellipse[fill="#3a2b19"] { fill: rgb(58, 53, 48); } .pxb { --st1: #fdeee2; --st2: #fbe0cb; --st3: #f9d0b0; --st4: #ffbf8f; --st5: #ffe7d4; } .pxb .stage:nth-child(n) { color: var(--ink); } .pxb .stage { box-shadow: rgba(42, 38, 34, 0.08) 1px 0px 0px inset; } .pxb .biz { background: rgb(52, 48, 43); } .pxb .tile:nth-of-type(3) { background: rgb(52, 48, 43); } .pxb .tile:nth-of-type(3) .tile__go { background: rgb(42, 38, 34); } .pxb .fcta { background: rgb(239, 229, 216); color: var(--ink); } .pxb .fcta__t { background-image: linear-gradient(90deg, var(--orange-deep) 0 50%, var(--ink) 50% 100%); } .pxb .fc.c-ink { background: rgb(52, 48, 43); } .pxb .fc__pay { list-style: none; padding: 0px; margin: 10px 0px 0px; display: grid; grid-template-columns: 1fr 1fr; gap: 6px; } .pxb .fc__pay li { display: flex; align-items: center; gap: 6px; padding: 6px 8px; border-radius: 10px; background: rgba(42, 38, 34, 0.06); font-size: 0.82rem; font-weight: 500; line-height: 1.15; min-width: 0px; } .pxb .fc__pay li::before { content: none; } .pxb .fc__pay .ic { color: var(--orange-deep); width: 18px; height: 18px; } @media (max-width: 767px){ .pxb .fc--pay, .pxb .fc--pay + .fc { grid-column: 1 / -1; } } /* https://pixbit3d.com/wp-content/plugins/elementor/assets/lib/eicons/css/elementor-icons.min.css?ver=5.54.0 */ @font-face { font-family: eicons; src: url("https://pixbit3d.com/wp-content/plugins/elementor/assets/lib/eicons/fonts/eicons.woff2?5.54.0") format("woff2"), url("https://pixbit3d.com/wp-content/plugins/elementor/assets/lib/eicons/fonts/eicons.woff?5.54.0") format("woff"), url("https://pixbit3d.com/wp-content/plugins/elementor/assets/lib/eicons/fonts/eicons.ttf?5.54.0") format("truetype"); font-weight: 400; font-style: normal; } [class*=" eicon-"], [class^="eicon"] { display: inline-block; font-family: eicons; font-size: inherit; font-weight: 400; font-style: normal; font-variant: normal; line-height: 1; text-rendering: auto; -webkit-font-smoothing: antialiased; } @keyframes a { 0% { transform: rotate(0deg); } 100% { transform: rotate(359deg); } } /* https://pixbit3d.com/wp-content/uploads/elementor/css/custom-frontend.min.css?ver=1792681382 */ :root { --direction-multiplier: 1; } body.rtl, html[dir="rtl"] { --direction-multiplier: -1; } .elementor-screen-only, .screen-reader-text, .screen-reader-text span, .ui-helper-hidden-accessible { height: 1px; margin: -1px; overflow: hidden; padding: 0px; position: absolute; top: -10000em; width: 1px; clip: rect(0px, 0px, 0px, 0px); border: 0px; } .elementor *, .elementor ::after, .elementor ::before { box-sizing: border-box; } .elementor a { box-shadow: none; text-decoration: none; } .elementor img { border-width: medium; border-style: none; border-color: currentcolor; border-image: none; border-radius: 0px; box-shadow: none; height: auto; max-width: 100%; } .elementor .elementor-widget:not(.elementor-widget-text-editor):not(.elementor-widget-theme-post-content) figure { margin: 0px; } .elementor embed, .elementor iframe, .elementor object, .elementor video { border-width: medium; border-style: none; border-color: currentcolor; border-image: none; line-height: 1; margin: 0px; max-width: 100%; width: 100%; } .elementor-element { --flex-direction: initial; --flex-wrap: initial; --justify-content: initial; --align-items: initial; --align-content: initial; --gap: initial; --flex-basis: initial; --flex-grow: initial; --flex-shrink: initial; --order: initial; --align-self: initial; align-self: var(--align-self); flex-basis: var(--flex-basis); flex-grow: var(--flex-grow); flex-shrink: var(--flex-shrink); order: var(--order); } .elementor-element:where(.e-con-full, .elementor-widget) { align-content: var(--align-content); align-items: var(--align-items); flex-direction: var(--flex-direction); flex-wrap: var(--flex-wrap); gap: var(--row-gap) var(--column-gap); justify-content: var(--justify-content); } :root { --page-title-display: block; } @keyframes eicon-spin { 0% { transform: rotate(0deg); } 100% { transform: rotate(359deg); } } .elementor-section { position: relative; } .elementor-section .elementor-container { display: flex; margin-inline: auto; position: relative; } @media (max-width: 1279px){ .elementor-section .elementor-container { flex-wrap: wrap; } } .elementor-section.elementor-section-stretched { position: relative; width: 100%; } .elementor-widget-wrap { align-content: flex-start; flex-wrap: wrap; position: relative; width: 100%; } .elementor:not(.elementor-bc-flex-widget) .elementor-widget-wrap { display: flex; } .elementor-widget-wrap > .elementor-element { width: 100%; } .elementor-widget { position: relative; } .elementor-widget:not(:last-child) { margin-block-end: var(--kit-widget-spacing,20px); } .elementor-column { display: flex; min-height: 1px; position: relative; } @media (min-width: 768px){ .elementor-column.elementor-col-10, .elementor-column[data-col="10"] { width: 10%; } .elementor-column.elementor-col-11, .elementor-column[data-col="11"] { width: 11.111%; } .elementor-column.elementor-col-12, .elementor-column[data-col="12"] { width: 12.5%; } .elementor-column.elementor-col-14, .elementor-column[data-col="14"] { width: 14.285%; } .elementor-column.elementor-col-16, .elementor-column[data-col="16"] { width: 16.666%; } .elementor-column.elementor-col-20, .elementor-column[data-col="20"] { width: 20%; } .elementor-column.elementor-col-25, .elementor-column[data-col="25"] { width: 25%; } .elementor-column.elementor-col-30, .elementor-column[data-col="30"] { width: 30%; } .elementor-column.elementor-col-33, .elementor-column[data-col="33"] { width: 33.333%; } .elementor-column.elementor-col-40, .elementor-column[data-col="40"] { width: 40%; } .elementor-column.elementor-col-50, .elementor-column[data-col="50"] { width: 50%; } .elementor-column.elementor-col-60, .elementor-column[data-col="60"] { width: 60%; } .elementor-column.elementor-col-66, .elementor-column[data-col="66"] { width: 66.666%; } .elementor-column.elementor-col-70, .elementor-column[data-col="70"] { width: 70%; } .elementor-column.elementor-col-75, .elementor-column[data-col="75"] { width: 75%; } .elementor-column.elementor-col-80, .elementor-column[data-col="80"] { width: 80%; } .elementor-column.elementor-col-83, .elementor-column[data-col="83"] { width: 83.333%; } .elementor-column.elementor-col-90, .elementor-column[data-col="90"] { width: 90%; } .elementor-column.elementor-col-100, .elementor-column[data-col="100"] { width: 100%; } } @media (max-width: 767px){ .elementor-column { width: 100%; } } @media (min-width: 1280px){ #elementor-device-mode::after { content: "desktop"; } } @media (min-width:-1){ #elementor-device-mode::after { content: "widescreen"; } } @media (max-width:-1){ #elementor-device-mode::after { content: "laptop"; } } @media (max-width:-1){ #elementor-device-mode::after { content: "tablet_extra"; } } @media (max-width: 1279px){ #elementor-device-mode::after { content: "tablet"; } } @media (max-width:-1){ #elementor-device-mode::after { content: "mobile_extra"; } } @media (max-width: 767px){ #elementor-device-mode::after { content: "mobile"; } } @media (prefers-reduced-motion: no-preference){ html { scroll-behavior: smooth; } } .elementor-element:where(:not(.e-con)):where(:not(.e-div-block-base)) .elementor-widget-container, .elementor-element:where(:not(.e-con)):where(:not(.e-div-block-base)):not(:has(.elementor-widget-container)) { transition: background .3s,border .3s,border-radius .3s,box-shadow .3s,transform var(--e-transform-transition-duration,.4s); } @media (prefers-reduced-motion: reduce){ html * { transition-delay: 0s !important; transition-duration: 0s !important; } } /* inline elementor-frontend-inline-css */ .elementor-kit-15 { --e-global-color-primary: #6EC1E4; --e-global-color-secondary: #54595F; --e-global-color-text: #7A7A7A; --e-global-color-accent: #61CE70; --e-global-color-61c01e98: #4054B2; --e-global-color-69bf31ed: #23A455; --e-global-color-7a1ccbe5: #000; --e-global-color-13ed1179: #FFF; --e-global-color-d067b38: #020101; --e-global-typography-primary-font-family: "Roboto"; --e-global-typography-primary-font-weight: 600; --e-global-typography-secondary-font-family: "Roboto Slab"; --e-global-typography-secondary-font-weight: 400; --e-global-typography-text-font-family: "Roboto"; --e-global-typography-text-font-weight: 400; --e-global-typography-accent-font-family: "Roboto"; --e-global-typography-accent-font-weight: 500; } .elementor-widget:not(:last-child) { margin-block-end: 0px; } .elementor-element { --widgets-spacing: 0px 0px; --widgets-spacing-row: 0px; --widgets-spacing-column: 0px; } .elementor-23031 .elementor-element.elementor-element-c394c70 { margin-top: 0px; margin-bottom: 0px; padding: 0px; } .elementor-23031 .elementor-element.elementor-element-a8c42f9 > .elementor-element-populated { margin: 0px; --e-column-margin-right: 0px; --e-column-margin-left: 0px; } .elementor-23031 .elementor-element.elementor-element-a8c42f9 > .elementor-element-populated.elementor-widget-wrap { padding: 0px; } .elementor-23031 .elementor-element.elementor-element-4001c06 > .elementor-widget-container { margin: 0px; padding: 0px; } @media (max-width: 1279px){ .elementor-23031 .elementor-element.elementor-element-c394c70 { margin-top: 0px; margin-bottom: 0px; padding: 0px; } .elementor-23031 .elementor-element.elementor-element-a8c42f9 > .elementor-element-populated { margin: 0px; --e-column-margin-right: 0px; --e-column-margin-left: 0px; } .elementor-23031 .elementor-element.elementor-element-a8c42f9 > .elementor-element-populated.elementor-widget-wrap { padding: 0px; } .elementor-23031 .elementor-element.elementor-element-4001c06 > .elementor-widget-container { margin: 0px; padding: 0px; } } @media (max-width: 767px){ .elementor-23031 .elementor-element.elementor-element-c394c70 { margin-top: 0px; margin-bottom: 0px; padding: 0px; } .elementor-23031 .elementor-element.elementor-element-a8c42f9 > .elementor-element-populated { margin: 0px; --e-column-margin-right: 0px; --e-column-margin-left: 0px; } .elementor-23031 .elementor-element.elementor-element-a8c42f9 > .elementor-element-populated.elementor-widget-wrap { padding: 0px; } .elementor-23031 .elementor-element.elementor-element-4001c06 > .elementor-widget-container { margin: 0px; padding: 0px; } } /* inline custom-chaty-css */ #chaty-widget-0 .Whatsapp-channel .color-element { fill: rgb(73, 230, 112); color: rgb(73, 230, 112); } #chaty-widget-0 .channel-icon-Whatsapp .color-element { fill: rgb(73, 230, 112); color: rgb(73, 230, 112); } #chaty-widget-0 .Whatsapp-channel .chaty-svg { background-color: rgb(73, 230, 112); } #chaty-widget-0 .channel-icon-Whatsapp .chaty-svg { background-color: rgb(73, 230, 112); } #chaty-widget-0 .chaty-channel-list .chaty-channel { width: 54px; height: 54px; } #chaty-widget-0 .chaty-channel-list .chaty-channel > a { width: 54px; height: 54px; } #chaty-widget-0 .chaty-channel-list .chaty-channel button { width: 54px; height: 54px; margin: 0px; padding: 0px; outline: none; border-radius: 50%; } #chaty-widget-0 .chaty-channel-list .chaty-channel .chaty-svg { width: 54px; height: 54px; } #chaty-widget-0 .chaty-channel-list .chaty-channel .chaty-svg img { width: 54px; height: 54px; } #chaty-widget-0 .chaty-channel-list .chaty-channel span.chaty-icon { width: 54px; height: 54px; } #chaty-widget-0 .chaty-channel-list .chaty-channel a { width: 54px; height: 54px; } #chaty-widget-0 .chaty-i-trigger .chaty-cta-button { background-color: rgb(168, 134, 205); } #chaty-widget-0 .chaty-i-trigger .chaty-cta-button button { background-color: rgb(168, 134, 205); } #chaty-widget-0 .chaty-i-trigger .chaty-channel { width: 54px; height: 54px; } #chaty-widget-0 .chaty-i-trigger .chaty-channel > a { width: 54px; height: 54px; } #chaty-widget-0 .chaty-i-trigger .chaty-channel button { width: 54px; height: 54px; margin: 0px; padding: 0px; outline: none; border-radius: 50%; } #chaty-widget-0 .chaty-i-trigger .chaty-channel .chaty-svg { width: 54px; height: 54px; } #chaty-widget-0 .chaty-i-trigger .chaty-channel .chaty-svg img { width: 54px; height: 54px; } #chaty-widget-0 .chaty-i-trigger .chaty-channel span.chaty-icon { width: 54px; height: 54px; } #chaty-widget-0 .chaty-i-trigger .chaty-channel a { width: 54px; height: 54px; } #chaty-widget-0 .chaty-channel-list { height: 62px; } #chaty-widget-0 .chaty-channel-list { width: 62px; } #chaty-widget-0 .chaty-widget { bottom: 25px; } #chaty-widget-0 .chaty-widget { right: 25px; left: auto; } .chaty-outer-forms.pos-right.chaty-form-0 { right: 25px; left: auto; } .chaty-outer-forms.active.chaty-form-0 { transform: translateY(-94px); } #chaty-widget-0 .chaty-tooltip::after { background-color: rgb(255, 255, 255); color: rgb(51, 51, 51); } #chaty-widget-0 .chaty-tooltip.pos-left::before { border-left-color: rgb(255, 255, 255); } #chaty-widget-0 .chaty-tooltip.pos-right::before { border-right-color: rgb(255, 255, 255); } #chaty-widget-0 .on-hover-text { background-color: rgb(255, 255, 255); color: rgb(51, 51, 51); } #chaty-widget-0 .on-hover-text p { background-color: rgb(255, 255, 255); color: rgb(51, 51, 51); } #chaty-widget-0 .chaty-tooltip.pos-left .on-hover-text::before { border-left-color: rgb(255, 255, 255); } #chaty-widget-0 .chaty-tooltip.pos-right .on-hover-text::before { border-right-color: rgb(255, 255, 255); } #chaty-form-0-Whatsapp .chaty-whatsapp-body { max-height: calc(-229px + 100vh); overflow-y: auto; } #chaty-widget-0, #chaty-widget-0 .chaty-tooltip::after { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen-Sans, Ubuntu, Cantarell, "Helvetica Neue", sans-serif; } /* inline custom-advance-chaty-css */ /* ---- Hello glue (keeps Printo layout without its wrappers) ---- */ body.extra_bg_layout{position:relative;overflow-x:clip}