.elementor-kit-8{--e-global-color-primary:#161616;--e-global-color-secondary:#2E2C2C;--e-global-color-text:#585858;--e-global-color-accent:#D41414;--e-global-color-c4e6fb3:#161616;--e-global-color-fdbbab4:#2E2C2C;--e-global-color-3462e5f:#585858;--e-global-color-954627a:#F6F6F7;--e-global-color-da94023:#FFFFFF;--e-global-color-d550e6f:#B70E0E;--e-global-color-0d396cf:#970F0F;--e-global-color-36983da:#FFF1F1;--e-global-color-4098472:#DEDEE1;--e-global-color-8ab4651:#D1D1D6;--e-global-color-8ea6349:#A1A1A6;--e-global-color-80c8a19:#005FCC;--e-global-typography-primary-font-family:"Inter";--e-global-typography-primary-font-size:56px;--e-global-typography-primary-font-weight:700;--e-global-typography-primary-line-height:1.1em;--e-global-typography-primary-letter-spacing:-0.025em;--e-global-typography-secondary-font-family:"Inter";--e-global-typography-secondary-font-size:44px;--e-global-typography-secondary-font-weight:700;--e-global-typography-secondary-line-height:1.15em;--e-global-typography-secondary-letter-spacing:-0.02em;--e-global-typography-text-font-family:"Inter";--e-global-typography-text-font-size:15px;--e-global-typography-text-font-weight:400;--e-global-typography-text-line-height:1.65em;--e-global-typography-text-letter-spacing:0px;--e-global-typography-accent-font-family:"Inter";--e-global-typography-accent-font-size:15px;--e-global-typography-accent-font-weight:600;--e-global-typography-accent-line-height:1.2em;--e-global-typography-accent-letter-spacing:0px;--e-global-typography-a4f0c3d-font-family:"Inter";--e-global-typography-a4f0c3d-font-size:56px;--e-global-typography-a4f0c3d-font-weight:700;--e-global-typography-a4f0c3d-line-height:1.1em;--e-global-typography-a4f0c3d-letter-spacing:-0.025em;--e-global-typography-11e2ba0-font-family:"Inter";--e-global-typography-11e2ba0-font-size:44px;--e-global-typography-11e2ba0-font-weight:700;--e-global-typography-11e2ba0-line-height:1.15em;--e-global-typography-11e2ba0-letter-spacing:-0.02em;--e-global-typography-72515ec-font-family:"Inter";--e-global-typography-72515ec-font-size:28px;--e-global-typography-72515ec-font-weight:600;--e-global-typography-72515ec-line-height:1.25em;--e-global-typography-72515ec-letter-spacing:-0.015em;--e-global-typography-78967b2-font-family:"Inter";--e-global-typography-78967b2-font-size:20px;--e-global-typography-78967b2-font-weight:600;--e-global-typography-78967b2-line-height:1.35em;--e-global-typography-78967b2-letter-spacing:-0.01em;--e-global-typography-6d07e3b-font-family:"Inter";--e-global-typography-6d07e3b-font-size:20px;--e-global-typography-6d07e3b-font-weight:400;--e-global-typography-6d07e3b-line-height:1.6em;--e-global-typography-6d07e3b-letter-spacing:0px;--e-global-typography-560c969-font-family:"Inter";--e-global-typography-560c969-font-size:16px;--e-global-typography-560c969-font-weight:400;--e-global-typography-560c969-line-height:1.65em;--e-global-typography-560c969-letter-spacing:0px;--e-global-typography-08fceda-font-family:"Inter";--e-global-typography-08fceda-font-size:14px;--e-global-typography-08fceda-font-weight:400;--e-global-typography-08fceda-line-height:1.55em;--e-global-typography-08fceda-letter-spacing:0em;--e-global-typography-88d48bc-font-family:"Inter";--e-global-typography-88d48bc-font-size:12px;--e-global-typography-88d48bc-font-weight:600;--e-global-typography-88d48bc-text-transform:uppercase;--e-global-typography-88d48bc-font-style:normal;--e-global-typography-88d48bc-letter-spacing:0.1em;--e-global-typography-dbed798-font-family:"Inter";--e-global-typography-dbed798-font-size:15px;--e-global-typography-dbed798-font-weight:600;--e-global-typography-dbed798-line-height:1.2em;--e-global-typography-dbed798-letter-spacing:0px;--e-global-typography-d21e947-font-family:"Inter";--e-global-typography-d21e947-font-size:12px;--e-global-typography-d21e947-font-weight:400;--e-global-typography-d21e947-line-height:1.5em;--e-global-typography-d21e947-letter-spacing:0.01em;}.elementor-kit-8 button:hover,.elementor-kit-8 button:focus,.elementor-kit-8 input[type="button"]:hover,.elementor-kit-8 input[type="button"]:focus,.elementor-kit-8 input[type="submit"]:hover,.elementor-kit-8 input[type="submit"]:focus,.elementor-kit-8 .elementor-button:hover,.elementor-kit-8 .elementor-button:focus{background-color:#B70E0E;}.elementor-kit-8 e-page-transition{background-color:#FFBC7D;}.elementor-kit-8 a{color:#970F0F;}.elementor-kit-8 button,.elementor-kit-8 input[type="button"],.elementor-kit-8 input[type="submit"],.elementor-kit-8 .elementor-button{border-style:none;}.elementor-section.elementor-section-boxed > .elementor-container{max-width:1280px;}.e-con{--container-max-width:1280px;--container-default-padding-top:0px;--container-default-padding-right:0px;--container-default-padding-bottom:0px;--container-default-padding-left:0px;}.elementor-widget:not(:last-child){--kit-widget-spacing:20px;}.elementor-element{--widgets-spacing:20px 20px;--widgets-spacing-row:20px;--widgets-spacing-column:20px;}{}h1.entry-title{display:var(--page-title-display);}.site-header .site-branding{flex-direction:column;align-items:stretch;}.site-header{padding-inline-end:0px;padding-inline-start:0px;}.site-footer .site-branding{flex-direction:column;align-items:stretch;}@media(max-width:1366px){.elementor-kit-8{--e-global-typography-primary-font-size:52px;--e-global-typography-primary-line-height:1.1em;--e-global-typography-primary-letter-spacing:-0.025em;--e-global-typography-secondary-font-size:40px;--e-global-typography-secondary-line-height:1.15em;--e-global-typography-secondary-letter-spacing:-0.02em;--e-global-typography-text-font-size:16px;--e-global-typography-text-line-height:1.65em;--e-global-typography-text-letter-spacing:0px;--e-global-typography-accent-font-size:15px;--e-global-typography-accent-line-height:1.2em;--e-global-typography-accent-letter-spacing:0em;--e-global-typography-a4f0c3d-font-size:52px;--e-global-typography-a4f0c3d-line-height:1.1em;--e-global-typography-a4f0c3d-letter-spacing:-0.025em;--e-global-typography-11e2ba0-font-size:40px;--e-global-typography-11e2ba0-line-height:1.15em;--e-global-typography-11e2ba0-letter-spacing:-0.02em;--e-global-typography-72515ec-font-size:26px;--e-global-typography-72515ec-line-height:1.25em;--e-global-typography-72515ec-letter-spacing:-0.015em;--e-global-typography-78967b2-font-size:20px;--e-global-typography-78967b2-line-height:1.35em;--e-global-typography-78967b2-letter-spacing:-0.01em;--e-global-typography-6d07e3b-font-size:19px;--e-global-typography-6d07e3b-line-height:1.6em;--e-global-typography-6d07e3b-letter-spacing:0px;--e-global-typography-560c969-font-size:16px;--e-global-typography-560c969-line-height:1.65em;--e-global-typography-560c969-letter-spacing:0px;--e-global-typography-08fceda-font-size:14px;--e-global-typography-08fceda-line-height:1.55em;--e-global-typography-08fceda-letter-spacing:0em;--e-global-typography-88d48bc-font-size:12px;--e-global-typography-88d48bc-line-height:1.3em;--e-global-typography-88d48bc-letter-spacing:0.1em;--e-global-typography-dbed798-font-size:15px;--e-global-typography-dbed798-line-height:1.2em;--e-global-typography-dbed798-letter-spacing:0px;--e-global-typography-d21e947-font-size:12px;--e-global-typography-d21e947-line-height:1.5em;--e-global-typography-d21e947-letter-spacing:0.01em;}}@media(max-width:1024px){.elementor-kit-8{--e-global-typography-primary-font-size:44px;--e-global-typography-primary-line-height:1.1em;--e-global-typography-primary-letter-spacing:-0.025em;--e-global-typography-secondary-font-size:34px;--e-global-typography-secondary-line-height:1.15em;--e-global-typography-secondary-letter-spacing:-0.02em;--e-global-typography-text-font-size:16px;--e-global-typography-text-line-height:1.65em;--e-global-typography-text-letter-spacing:0px;--e-global-typography-accent-font-size:15px;--e-global-typography-accent-line-height:1.2em;--e-global-typography-accent-letter-spacing:0px;--e-global-typography-a4f0c3d-font-size:44px;--e-global-typography-a4f0c3d-line-height:1.1em;--e-global-typography-a4f0c3d-letter-spacing:-0.025em;--e-global-typography-11e2ba0-font-size:34px;--e-global-typography-11e2ba0-line-height:1.15em;--e-global-typography-11e2ba0-letter-spacing:-0.02em;--e-global-typography-72515ec-font-size:24px;--e-global-typography-72515ec-line-height:1.25em;--e-global-typography-72515ec-letter-spacing:-0.015em;--e-global-typography-78967b2-font-size:19px;--e-global-typography-78967b2-line-height:1.35em;--e-global-typography-78967b2-letter-spacing:-0.01em;--e-global-typography-6d07e3b-font-size:18px;--e-global-typography-6d07e3b-line-height:1.6em;--e-global-typography-6d07e3b-letter-spacing:0px;--e-global-typography-560c969-font-size:16px;--e-global-typography-560c969-line-height:1.65em;--e-global-typography-560c969-letter-spacing:0px;--e-global-typography-08fceda-font-size:14px;--e-global-typography-08fceda-line-height:1.55em;--e-global-typography-08fceda-letter-spacing:0em;--e-global-typography-88d48bc-font-size:12px;--e-global-typography-88d48bc-line-height:1.3em;--e-global-typography-88d48bc-letter-spacing:0.1em;--e-global-typography-dbed798-font-size:15px;--e-global-typography-dbed798-line-height:1.2em;--e-global-typography-dbed798-letter-spacing:0px;--e-global-typography-d21e947-font-size:12px;--e-global-typography-d21e947-line-height:1.5em;--e-global-typography-d21e947-letter-spacing:0.01em;}.elementor-section.elementor-section-boxed > .elementor-container{max-width:1024px;}.e-con{--container-max-width:1024px;}}@media(max-width:767px){.elementor-kit-8{--e-global-typography-primary-font-size:2.25rem;--e-global-typography-primary-line-height:1.12em;--e-global-typography-primary-letter-spacing:-0.02em;--e-global-typography-secondary-font-size:30px;--e-global-typography-secondary-line-height:1.15em;--e-global-typography-secondary-letter-spacing:-0.015em;--e-global-typography-text-font-size:16px;--e-global-typography-text-line-height:1.65em;--e-global-typography-text-letter-spacing:0px;--e-global-typography-accent-font-size:15px;--e-global-typography-accent-line-height:1.2em;--e-global-typography-accent-letter-spacing:0em;--e-global-typography-a4f0c3d-font-size:36px;--e-global-typography-a4f0c3d-line-height:1.1em;--e-global-typography-11e2ba0-font-size:30px;--e-global-typography-11e2ba0-line-height:1.15em;--e-global-typography-11e2ba0-letter-spacing:-0.02em;--e-global-typography-72515ec-font-size:22px;--e-global-typography-72515ec-line-height:1.25em;--e-global-typography-72515ec-letter-spacing:-0.015em;--e-global-typography-78967b2-font-size:18px;--e-global-typography-78967b2-line-height:1.35em;--e-global-typography-78967b2-letter-spacing:-0.01em;--e-global-typography-6d07e3b-font-size:18px;--e-global-typography-6d07e3b-line-height:1.6em;--e-global-typography-6d07e3b-letter-spacing:0px;--e-global-typography-560c969-font-size:16px;--e-global-typography-560c969-line-height:1.65em;--e-global-typography-560c969-letter-spacing:0px;--e-global-typography-08fceda-font-size:14px;--e-global-typography-08fceda-line-height:1.55em;--e-global-typography-08fceda-letter-spacing:0px;--e-global-typography-88d48bc-font-size:12px;--e-global-typography-88d48bc-line-height:1.3em;--e-global-typography-88d48bc-letter-spacing:0.1px;--e-global-typography-dbed798-font-size:15px;--e-global-typography-dbed798-line-height:1.2em;--e-global-typography-dbed798-letter-spacing:0px;--e-global-typography-d21e947-font-size:12px;--e-global-typography-d21e947-line-height:1.5em;--e-global-typography-d21e947-letter-spacing:0.01em;}.elementor-section.elementor-section-boxed > .elementor-container{max-width:767px;}.e-con{--container-max-width:767px;}}@media(min-width:2400px){.elementor-kit-8{--e-global-typography-primary-font-size:64px;--e-global-typography-primary-line-height:1.1em;--e-global-typography-primary-letter-spacing:-0.025em;--e-global-typography-secondary-font-size:2.75rem;--e-global-typography-secondary-line-height:1.18em;--e-global-typography-secondary-letter-spacing:-0.02em;--e-global-typography-text-font-size:18px;--e-global-typography-text-line-height:1.65em;--e-global-typography-text-letter-spacing:0px;--e-global-typography-accent-font-size:15px;--e-global-typography-accent-line-height:1.2em;--e-global-typography-accent-letter-spacing:0em;--e-global-typography-a4f0c3d-font-size:64px;--e-global-typography-a4f0c3d-line-height:1.1em;--e-global-typography-a4f0c3d-letter-spacing:-0.025em;--e-global-typography-6d07e3b-font-size:20px;--e-global-typography-6d07e3b-line-height:1.6em;--e-global-typography-6d07e3b-letter-spacing:0px;--e-global-typography-08fceda-font-size:14px;--e-global-typography-08fceda-line-height:1.55em;--e-global-typography-08fceda-letter-spacing:0em;--e-global-typography-88d48bc-font-size:12px;--e-global-typography-88d48bc-line-height:1.3em;--e-global-typography-88d48bc-letter-spacing:0.1em;--e-global-typography-dbed798-font-size:15px;--e-global-typography-dbed798-line-height:1.2em;--e-global-typography-dbed798-letter-spacing:0px;--e-global-typography-d21e947-font-size:12px;--e-global-typography-d21e947-line-height:1.5em;--e-global-typography-d21e947-letter-spacing:0.01px;}}:root { --Secondary:#2E2C2C; --Primary:#161616; --Accent:#D41414; --Text:#585858; --e-gv-df82044:#F6F6F7; --e-gv-b4d658a:#F6F6F6; --e-gv-e79f114:#a1a1a6; --e-gv-01d4a4c:#1c1c1e; --e-gv-912a6d5:#2a2a2d; --e-gv-67d48e6:#B70E0E; --e-gv-b061832:#F7F7F8; --e-gv-8a5750f:#161616; --e-gv-75d891c:#FFF1F1; --e-gv-875eab4:#FFE0E0; --e-gv-21f4fc6:#FF8A8A; --e-gv-5045afa:#970F0F; --e-gv-00dab6e:#6E6E75; --e-gv-f74785d:Inter; --color-ink:#161616; --color-graphite:#2E2C2C; --color-text:#585858; --color-accent:#d41414; --color-surface:#F6F6F7; --color-white:#ffffff; --color-accent-hover:#B70E0E; --color-accent-active:#970F0F; --color-accent-soft:#FFF1F1; --color-border:#DEDEE1; --color-on-dark:#D1D1D6; --color-on-dark-muted:#A1A1A6; --color-focus:#005FCC; --space-1:4px; --space-2:8px; --space-3:12px; --space-4:16px; --space-5:24px; --space-6:32px; --space-7:48px; --space-8:64px; --space-9:96px; --radius-control-4:4px; --radius-card:6px; --radius-media:0px; } /* Start custom CSS */:root { /* Marca */ --vf-red: #D41414; --vf-red-hover: #B70E0E; --vf-red-active: #970F0F; --vf-red-50: #FFF1F1; /* Neutros */ --vf-graphite: #1C1C1E; --vf-text: #38383D; --vf-text-2: #515157; --vf-muted: #6E6E75; --vf-border: #DEDEE1; --vf-border-hover: #C7C7CC; --vf-border-strong: #85858C; --vf-divider: #EFEFF0; --vf-canvas: #F7F7F8; /* Estados */ --vf-focus: #005FCC; --vf-success: #16794A; --vf-success-bg: #EAF8F1; --vf-whatsapp: #1C9B4A; --vf-whatsapp-hover: #178541; /* Forma e movimento */ --vf-radius: 4px; --vf-radius-ctl: 2px; --vf-ease: cubic-bezier(0.25, 1, 0.5, 1); --vf-ease-soft: cubic-bezier(0.16, 1, 0.3, 1); /* Cabecalho fixo: altura real e distancia dos elementos que "grudam" ao rolar */ --vf-header-h: 140px; --vf-sticky-top: calc(var(--vf-header-h) + 24px); /* Icones em mascara (herdam a cor do texto) */ --vf-icon-minus: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.25' stroke-linecap='square'%3E%3Cpath d='M5 12h14'/%3E%3C/svg%3E"); --vf-icon-plus: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.25' stroke-linecap='square'%3E%3Cpath d='M12 5v14M5 12h14'/%3E%3C/svg%3E"); --vf-icon-check: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.5' stroke-linecap='square'%3E%3Cpath d='M5 12.5l4.5 4.5L19 7.5'/%3E%3C/svg%3E"); --vf-icon-x: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='square'%3E%3Cpath d='M6 6l12 12M18 6L6 18'/%3E%3C/svg%3E"); --vf-icon-arrow-left: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='square'%3E%3Cpath d='M19 12H5M11 6l-6 6 6 6'/%3E%3C/svg%3E"); --vf-icon-arrow-up-right: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='square'%3E%3Cpath d='M7 17L17 7M9 7h8v8'/%3E%3C/svg%3E"); } @media (max-width: 1366px) { :root { --vf-header-h: 132px; } } @media (max-width: 1024px) { :root { --vf-header-h: 106px; } } /* -------------------------------------------------------------------------- 2. Base -------------------------------------------------------------------------- */ /* Cabecalho fixo no topo ao rolar */ .elementor-location-header { position: sticky; top: 0; z-index: 100; } /* ========================================================================== 3. Grade e card de produto -------------------------------------------------------------------------- Templates de Listing: "Listing de produto" e "Listing - Tambem viram". Classes nos widgets classicos do template (Avancado > Classes CSS): vf-product-card__media -> Imagem destacada (sem link) vf-product-card__category -> Shortcode [vf_card_category] vf-product-card__title -> Titulo h3, link para o produto vf-product-card__action -> Shortcode [vf_quote_button] Os dois Flexbox (card e corpo) nao precisam de classe. Listing Grid ao lado da barra de filtros: classe vf-product-grid--sidebar. Gerados pelo PHP: vf-product-category(__item, __sep), vf-quote-btn__label(--long, --short). ========================================================================== */ /* -------------------------------------------------------------------------- 0. Grade Colunas: Mobile 2 - Tablet 3 - Notebook 4 - Desktop 4 - Widescreen 4 Com barra lateral (>=1025): 3 -------------------------------------------------------------------------- */ .elementor-widget-jet-listing-grid:has(.vf-product-card__title):not(:has(.jet-listing-grid__slider)) { --vf-grid-cols: 4; --vf-grid-gap: 20px; } @media (min-width: 768px) and (max-width: 1024px) { .elementor-widget-jet-listing-grid:has(.vf-product-card__title):not(:has(.jet-listing-grid__slider)) { --vf-grid-cols: 3; } } @media (max-width: 767px) { .elementor-widget-jet-listing-grid:has(.vf-product-card__title):not(:has(.jet-listing-grid__slider)) { --vf-grid-cols: 2; --vf-grid-gap: 16px; } } @media (min-width: 1025px) { .elementor-widget-jet-listing-grid:has(.vf-product-card__title):not(:has(.jet-listing-grid__slider)).vf-product-grid--sidebar { --vf-grid-cols: 3; } } /* O widget ocupa toda a largura disponivel (em Flexbox atomico ele encolheria) */ .elementor-widget-jet-listing-grid:has(.vf-product-card__title):not(:has(.jet-listing-grid__slider)), .elementor-widget-jet-listing-grid:has(.vf-product-card__title):not(:has(.jet-listing-grid__slider)) > .elementor-widget-container, .elementor-widget-jet-listing-grid:has(.vf-product-card__title):not(:has(.jet-listing-grid__slider)) .jet-listing-grid { width: 100% !important; max-width: none !important; min-width: 0; flex: 1 1 100% !important; align-self: stretch !important; } .elementor-widget-jet-listing-grid:has(.vf-product-card__title):not(:has(.jet-listing-grid__slider)) .jet-listing-grid__items { display: grid !important; grid-template-columns: repeat(var(--vf-grid-cols), minmax(0, 1fr)); gap: var(--vf-grid-gap); width: 100% !important; margin: 0 !important; --columns: var(--vf-grid-cols) !important; } .elementor-widget-jet-listing-grid:has(.vf-product-card__title):not(:has(.jet-listing-grid__slider)) .jet-listing-grid__item { display: flex; width: auto !important; max-width: none !important; flex: none !important; margin: 0 !important; padding: 0 !important; } .elementor-widget-jet-listing-grid:has(.vf-product-card__title):not(:has(.jet-listing-grid__slider)) .jet-listing-grid__item > .jet-engine-listing-overlay-wrap, .elementor-widget-jet-listing-grid:has(.vf-product-card__title):not(:has(.jet-listing-grid__slider)) .jet-listing-grid__item .elementor[data-elementor-type="jet-listing-items"] { display: flex; flex-direction: column; width: 100%; height: 100%; } /* "Make listing item clickable" deve ficar desligado; isto e so uma protecao */ .elementor-widget-jet-listing-grid:has(.vf-product-card__title):not(:has(.jet-listing-grid__slider)) .jet-engine-listing-overlay-link { display: none !important; } /* Estado vazio (mensagem "Not found" do Listing Grid) */ .elementor-widget-jet-listing-grid:has(.vf-product-card__title):not(:has(.jet-listing-grid__slider)) .jet-listing-not-found { grid-column: 1 / -1; padding: 48px 24px; font: 400 1rem/1.6 "Inter", sans-serif; color: #515157; text-align: center; background: #F7F7F8; border: 1px dashed #C7C7CC; border-radius: 4px; } /* -------------------------------------------------------------------------- 1. Cores do botao do YITH iguais as do card (evita "flash" rosa no toque) -------------------------------------------------------------------------- */ .jet-listing-grid__item [data-elementor-type="jet-listing-items"] > .e-con:not(.vf-post-card) { --ywraq_layout_button_bg_color: var(--vf-red-50); --ywraq_layout_button_color: var(--vf-red-hover); --ywraq_layout_button_border_color: transparent; --ywraq_layout_button_bg_color_hover: var(--vf-red-50); --ywraq_layout_button_color_hover: var(--vf-red-hover); --ywraq_layout_button_border_color_hover: transparent; } /* -------------------------------------------------------------------------- 2. Card (sobrescreve os padroes do Flexbox atomico/classico) O card e um "container": o interior se adapta a LARGURA DO CARD, nao da tela - funciona igual com ou sem barra lateral. -------------------------------------------------------------------------- */ .jet-listing-grid__item [data-elementor-type="jet-listing-items"] > .e-con:not(.vf-post-card) { container-type: inline-size; container-name: vf-product-card; position: relative !important; display: flex !important; flex-direction: column !important; flex-wrap: nowrap !important; align-items: stretch !important; justify-content: flex-start !important; width: 100% !important; max-width: none !important; height: 100%; margin: 0 !important; padding: 0 !important; gap: 0 !important; background: #FFFFFF; border: 1px solid var(--vf-border) !important; border-radius: var(--vf-radius) !important; overflow: hidden; isolation: isolate; transition: border-color 160ms var(--vf-ease); } /* -------------------------------------------------------------------------- 3. Imagem - 1:1, produto inteiro, fundo cinza claro liso -------------------------------------------------------------------------- */ .jet-listing-grid__item [data-elementor-type="jet-listing-items"] > .e-con:not(.vf-post-card) > .vf-product-card__media { position: relative; flex: 0 0 auto; width: 100% !important; max-width: none !important; aspect-ratio: 1 / 1; margin: 0 !important; padding: 8%; background-color: var(--vf-canvas); background-image: none; border-bottom: 1px solid var(--vf-divider); overflow: hidden; } .jet-listing-grid__item [data-elementor-type="jet-listing-items"] > .e-con:not(.vf-post-card) > .vf-product-card__media .elementor-widget-container { display: block; width: 100%; height: 100%; } .jet-listing-grid__item [data-elementor-type="jet-listing-items"] > .e-con:not(.vf-post-card) > .vf-product-card__media img { display: block; width: 100% !important; height: 100% !important; max-width: none !important; object-fit: contain; mix-blend-mode: multiply; /* fundo branco da foto se integra ao cinza */ border-radius: 0; transition: transform 480ms var(--vf-ease-soft); } /* Linha de fluxo (2px) no divisor: vermelha no hover, verde quando incluido */ .jet-listing-grid__item [data-elementor-type="jet-listing-items"] > .e-con:not(.vf-post-card) > .vf-product-card__media::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 2px; background: var(--vf-red); transform: scaleX(0); transform-origin: left center; transition: transform 520ms var(--vf-ease-soft), background-color 160ms var(--vf-ease); pointer-events: none; } /* Indicador "ver produto": quadrado grafite com seta, canto superior direito (hover com mouse) */ .jet-listing-grid__item [data-elementor-type="jet-listing-items"] > .e-con:not(.vf-post-card) > .vf-product-card__media .elementor-widget-container::after { content: ""; position: absolute; top: 10px; right: 10px; width: 32px; height: 32px; border-radius: var(--vf-radius-ctl); background: var(--vf-graphite); opacity: 0; transform: translate(-4px, 4px); transition: opacity 200ms var(--vf-ease), transform 320ms var(--vf-ease-soft); pointer-events: none; } .jet-listing-grid__item [data-elementor-type="jet-listing-items"] > .e-con:not(.vf-post-card) > .vf-product-card__media .elementor-widget-container::before { content: ""; position: absolute; top: 18px; right: 18px; z-index: 1; width: 16px; height: 16px; background: #FFFFFF; -webkit-mask: var(--vf-icon-arrow-up-right) center / contain no-repeat; mask: var(--vf-icon-arrow-up-right) center / contain no-repeat; opacity: 0; transform: translate(-4px, 4px); transition: opacity 200ms var(--vf-ease), transform 320ms var(--vf-ease-soft); pointer-events: none; } /* Produto sem imagem: espaco reservado com o mesmo tamanho da imagem */ .jet-listing-grid__item [data-elementor-type="jet-listing-items"] > .e-con:not(.vf-post-card):not(:has(> .vf-product-card__media))::before { content: ""; display: block; flex: 0 0 auto; width: 100%; aspect-ratio: 1 / 1; background-color: var(--vf-canvas); background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23C7C7CC' stroke-width='1.5'%3E%3Crect x='3' y='5' width='18' height='14'/%3E%3Cpath d='M3 16l5-5 4 4 3-3 6 6'/%3E%3Ccircle cx='15.5' cy='9.5' r='1.5'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: center; background-size: 22% auto; border-bottom: 1px solid var(--vf-divider); } /* -------------------------------------------------------------------------- 4. Corpo + tokens adaptativos (container queries) compacto < 220px -> padding 12 - titulo 14px - botao 40px, rotulo curto medio 220-279px -> padding 16 - titulo 15px - botao 44px amplo >= 280px -> padding 16 - titulo 16px - botao 44px -------------------------------------------------------------------------- */ .jet-listing-grid__item [data-elementor-type="jet-listing-items"] > .e-con:not(.vf-post-card) > .e-con:has(> .vf-product-card__title) { --vf-card-pad: 12px; --vf-card-title-size: 0.875rem; /* 14px */ --vf-card-btn-h: 40px; --vf-card-cta-gap: 12px; position: static !important; display: flex !important; flex-direction: column !important; flex-wrap: nowrap !important; align-items: stretch !important; justify-content: flex-start !important; flex: 1 1 auto !important; width: 100% !important; max-width: none !important; margin: 0 !important; padding: var(--vf-card-pad) !important; gap: 0 !important; border: 0 !important; background: transparent; } @container vf-product-card (min-width: 220px) { .jet-listing-grid__item [data-elementor-type="jet-listing-items"] > .e-con:not(.vf-post-card) > .e-con:has(> .vf-product-card__title) { --vf-card-pad: 16px; --vf-card-title-size: 0.9375rem; --vf-card-btn-h: 44px; --vf-card-cta-gap: 16px; } } @container vf-product-card (min-width: 280px) { .jet-listing-grid__item [data-elementor-type="jet-listing-items"] > .e-con:not(.vf-post-card) > .e-con:has(> .vf-product-card__title) { --vf-card-title-size: 1rem; } } .jet-listing-grid__item [data-elementor-type="jet-listing-items"] > .e-con:not(.vf-post-card) > .e-con:has(> .vf-product-card__title) > .elementor-element { position: static; width: 100% !important; max-width: none !important; margin: 0 !important; } /* -------------------------------------------------------------------------- 5. Categoria (Tag) e titulo (H6) -------------------------------------------------------------------------- */ .jet-listing-grid__item [data-elementor-type="jet-listing-items"] > .e-con:not(.vf-post-card) > .e-con:has(> .vf-product-card__title) > .vf-product-card__category { margin-bottom: 4px !important; } .jet-listing-grid__item [data-elementor-type="jet-listing-items"] > .e-con:not(.vf-post-card) > .e-con:has(> .vf-product-card__title) > .vf-product-card__category :is(.jet-listing-dynamic-terms, .vf-product-category) { display: flex; align-items: center; gap: 6px; min-width: 0; white-space: nowrap; overflow: hidden; } /* marcador quadrado vermelho: identifica a categoria como dado tecnico */ .jet-listing-grid__item [data-elementor-type="jet-listing-items"] > .e-con:not(.vf-post-card) > .e-con:has(> .vf-product-card__title) > .vf-product-card__category :is(.jet-listing-dynamic-terms, .vf-product-category)::before { content: ""; flex: 0 0 6px; width: 6px; height: 6px; background: var(--vf-red); } .jet-listing-grid__item [data-elementor-type="jet-listing-items"] > .e-con:not(.vf-post-card) > .e-con:has(> .vf-product-card__title) > .vf-product-card__category :is(.jet-listing-dynamic-terms, .jet-listing-dynamic-terms__link, .jet-listing-dynamic-terms__delimiter, .vf-product-category, .vf-product-category__item, .vf-product-category__sep, .elementor-heading-title) { font-family: "Inter", sans-serif !important; font-size: 0.75rem !important; font-weight: 600 !important; line-height: 1.35 !important; letter-spacing: 0.05em !important; text-transform: uppercase !important; color: var(--vf-muted) !important; text-decoration: none !important; } /* Shortcode: "PRINCIPAL > ESPECIFICA" - a especifica fica mais escura e nunca some */ .jet-listing-grid__item [data-elementor-type="jet-listing-items"] > .e-con:not(.vf-post-card) > .e-con:has(> .vf-product-card__title) > .vf-product-card__category .vf-product-category__item { min-width: 0; overflow: hidden; text-overflow: ellipsis; } .jet-listing-grid__item [data-elementor-type="jet-listing-items"] > .e-con:not(.vf-post-card) > .e-con:has(> .vf-product-card__title) > .vf-product-card__category .vf-product-category__item:last-child { flex-shrink: 1; max-width: 100%; } .jet-listing-grid__item [data-elementor-type="jet-listing-items"] > .e-con:not(.vf-post-card) > .e-con:has(> .vf-product-card__title) > .vf-product-card__category .vf-product-category__sep { flex: 0 0 auto; color: #A1A1A1 !important; letter-spacing: 0 !important; } .jet-listing-grid__item [data-elementor-type="jet-listing-items"] > .e-con:not(.vf-post-card) > .e-con:has(> .vf-product-card__title) > .vf-product-card__category .elementor-shortcode { min-width: 0; } .jet-listing-grid__item [data-elementor-type="jet-listing-items"] > .e-con:not(.vf-post-card) > .e-con:has(> .vf-product-card__title) > .vf-product-card__title { position: static !important; } .jet-listing-grid__item [data-elementor-type="jet-listing-items"] > .e-con:not(.vf-post-card) > .e-con:has(> .vf-product-card__title) > .vf-product-card__title .elementor-heading-title { margin: 0; font-family: "Inter", sans-serif !important; font-size: var(--vf-card-title-size) !important; font-weight: 600 !important; line-height: 1.35 !important; letter-spacing: -0.005em !important; text-transform: none !important; color: var(--vf-graphite) !important; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; /* nome completo continua no HTML (SEO e leitores de tela) */ line-clamp: 2; overflow: hidden; text-wrap: pretty; transition: color 160ms var(--vf-ease); } .jet-listing-grid__item [data-elementor-type="jet-listing-items"] > .e-con:not(.vf-post-card) > .e-con:has(> .vf-product-card__title) > .vf-product-card__title a { color: inherit !important; text-decoration: none; outline: none; } /* Link esticado: o card inteiro abre o produto */ .jet-listing-grid__item [data-elementor-type="jet-listing-items"] > .e-con:not(.vf-post-card) > .e-con:has(> .vf-product-card__title) > .vf-product-card__title a::after { content: ""; position: absolute; inset: 0; z-index: 1; } /* -------------------------------------------------------------------------- 6. Botao "Adicionar a cotacao" -------------------------------------------------------------------------- */ .jet-listing-grid__item [data-elementor-type="jet-listing-items"] > .e-con:not(.vf-post-card) > .e-con:has(> .vf-product-card__title) > .vf-product-card__action { margin-top: auto !important; padding-top: var(--vf-card-cta-gap); } .jet-listing-grid__item [data-elementor-type="jet-listing-items"] > .e-con:not(.vf-post-card) :is(.elementor-shortcode, .yith-ywraq-add-to-quote) { position: static; margin: 0; text-align: left; } .jet-listing-grid__item [data-elementor-type="jet-listing-items"] > .e-con:not(.vf-post-card) .yith-ywraq-add-button { position: relative; z-index: 2; /* botao sempre clicavel, acima do link invisivel do card */ margin: 0; text-align: left; } .jet-listing-grid__item [data-elementor-type="jet-listing-items"] > .e-con:not(.vf-post-card) .clear { display: none; } .jet-listing-grid__item [data-elementor-type="jet-listing-items"] > .e-con:not(.vf-post-card) a.add-request-quote-button.button { position: relative; z-index: 2; /* acima do link esticado */ display: flex !important; align-items: center; justify-content: center; gap: 8px; width: 100% !important; min-width: 0; height: var(--vf-card-btn-h) !important; min-height: 0 !important; margin: 0 !important; padding: 0 12px !important; overflow: hidden; font-family: "Inter", sans-serif !important; font-size: 0.875rem !important; /* 14px */ font-weight: 600 !important; line-height: 1 !important; letter-spacing: 0.01em !important; text-transform: none !important; text-align: center !important; text-decoration: none !important; white-space: nowrap !important; border-radius: var(--vf-radius-ctl) !important; box-shadow: none !important; opacity: 1 !important; -webkit-tap-highlight-color: transparent; /* CTA tonal: presente sem pesar na grade; fica solido no hover (mouse) */ background-color: var(--vf-red-50) !important; color: var(--vf-red-hover) !important; border: 1px solid transparent !important; transition: background-color 160ms var(--vf-ease), color 160ms var(--vf-ease), border-color 160ms var(--vf-ease), transform 120ms var(--vf-ease); } /* Icone + */ .jet-listing-grid__item [data-elementor-type="jet-listing-items"] > .e-con:not(.vf-post-card) a.add-request-quote-button.button::before { content: ""; flex: 0 0 16px; width: 16px; height: 16px; background: currentColor; -webkit-mask: var(--vf-icon-plus) center / contain no-repeat; mask: var(--vf-icon-plus) center / contain no-repeat; } /* Rotulos (gerados pelo [vf_quote_button]): longo no desktop/tablet, curto no celular */ .jet-listing-grid__item [data-elementor-type="jet-listing-items"] > .e-con:not(.vf-post-card) a.add-request-quote-button.button .vf-quote-btn__label { display: block; min-width: 0; overflow: hidden; text-overflow: ellipsis; /* nunca vaza para fora do botao */ white-space: nowrap; } .jet-listing-grid__item [data-elementor-type="jet-listing-items"] > .e-con:not(.vf-post-card) a.add-request-quote-button.button .vf-quote-btn__label--short { display: none; } /* Celular (<=767px): botao compacto de 40px, rotulo "Adicionar" */ @media (max-width: 767px) { .jet-listing-grid__item [data-elementor-type="jet-listing-items"] > .e-con:not(.vf-post-card) a.add-request-quote-button.button { gap: 6px; padding: 0 10px !important; } .jet-listing-grid__item [data-elementor-type="jet-listing-items"] > .e-con:not(.vf-post-card) a.add-request-quote-button.button::before { flex-basis: 14px; width: 14px; height: 14px; } .jet-listing-grid__item [data-elementor-type="jet-listing-items"] > .e-con:not(.vf-post-card) a.add-request-quote-button.button .vf-quote-btn__label--long { display: none; } .jet-listing-grid__item [data-elementor-type="jet-listing-items"] > .e-con:not(.vf-post-card) a.add-request-quote-button.button .vf-quote-btn__label--short { display: block; } } /* Cards estreitos em outras telas (ex.: notebook com barra de filtros) */ @container vf-product-card (max-width: 219.98px) { .jet-listing-grid__item [data-elementor-type="jet-listing-items"] > .e-con:not(.vf-post-card) a.add-request-quote-button.button { gap: 6px; padding: 0 10px !important; } .jet-listing-grid__item [data-elementor-type="jet-listing-items"] > .e-con:not(.vf-post-card) a.add-request-quote-button.button .vf-quote-btn__label--long { display: none; } .jet-listing-grid__item [data-elementor-type="jet-listing-items"] > .e-con:not(.vf-post-card) a.add-request-quote-button.button .vf-quote-btn__label--short { display: block; } } /* Telas muito estreitas (<=359px): so o texto, sem icone */ @media (max-width: 359px) { .jet-listing-grid__item [data-elementor-type="jet-listing-items"] > .e-con:not(.vf-post-card) a.add-request-quote-button.button::before { display: none; } } .jet-listing-grid__item [data-elementor-type="jet-listing-items"] > .e-con:not(.vf-post-card) a.add-request-quote-button.button:active { background-color: var(--vf-red-active) !important; border-color: var(--vf-red-active) !important; color: #FFFFFF !important; transform: scale(0.98); } .jet-listing-grid__item [data-elementor-type="jet-listing-items"] > .e-con:not(.vf-post-card) :is(a.add-request-quote-button.button, .yith_ywraq_add_item_browse_message a):focus-visible { outline: none; box-shadow: 0 0 0 2px #FFFFFF, 0 0 0 5px var(--vf-focus) !important; } .jet-listing-grid__item [data-elementor-type="jet-listing-items"] > .e-con:not(.vf-post-card) a.add-request-quote-button.button.disabled { opacity: 1 !important; background-color: var(--vf-border) !important; border-color: var(--vf-border) !important; color: var(--vf-muted) !important; cursor: not-allowed; } .jet-listing-grid__item [data-elementor-type="jet-listing-items"] > .e-con:not(.vf-post-card) a.add-request-quote-button.button.disabled::before { display: none; } /* Carregando (o YITH insere apos o botao) */ .jet-listing-grid__item [data-elementor-type="jet-listing-items"] > .e-con:not(.vf-post-card) .ywraq-loader { display: none !important; } .jet-listing-grid__item [data-elementor-type="jet-listing-items"] > .e-con:not(.vf-post-card) a.add-request-quote-button.button:has(+ .ywraq-loader) { color: transparent !important; pointer-events: none; } .jet-listing-grid__item [data-elementor-type="jet-listing-items"] > .e-con:not(.vf-post-card) a.add-request-quote-button.button:has(+ .ywraq-loader)::before, .jet-listing-grid__item [data-elementor-type="jet-listing-items"] > .e-con:not(.vf-post-card) a.add-request-quote-button.button:has(+ .ywraq-loader) .vf-quote-btn__label { visibility: hidden; } .jet-listing-grid__item [data-elementor-type="jet-listing-items"] > .e-con:not(.vf-post-card) a.add-request-quote-button.button:has(+ .ywraq-loader)::after { content: ""; position: absolute; top: 50%; left: 50%; width: 16px; height: 16px; margin: -8px 0 0 -8px; border: 2px solid var(--vf-red); border-right-color: transparent; border-radius: 50%; animation: vf-spin 640ms linear infinite; } @keyframes vf-spin { to { transform: rotate(360deg); } } /* -------------------------------------------------------------------------- 7. Estados do YITH (labels configurados no plugin) "Adicionado" -> .yith_ywraq_add_item_product_message (logo apos clicar) "Incluido" -> .yith_ywraq_add_item_response_message (ja estava na lista) "Ver cotacao" -> .yith_ywraq_add_item_browse_message a (substitui o botao) -------------------------------------------------------------------------- */ .jet-listing-grid__item [data-elementor-type="jet-listing-items"] > .e-con:not(.vf-post-card) :is(.yith_ywraq_add_item_product_message, .yith_ywraq_add_item_response_message) { position: absolute; top: 10px; left: 10px; z-index: 2; display: inline-flex; align-items: center; gap: 6px; width: fit-content; max-width: calc(100% - 64px); margin: 0; padding: 5px 8px; font: 600 0.75rem/1.2 "Inter", sans-serif; letter-spacing: 0.04em; text-transform: uppercase; color: var(--vf-success); background: var(--vf-success-bg); border: 1px solid rgba(22, 121, 74, 0.28); border-radius: var(--vf-radius-ctl); animation: vf-badge-in 320ms var(--vf-ease-soft) both; } .jet-listing-grid__item [data-elementor-type="jet-listing-items"] > .e-con:not(.vf-post-card) :is(.yith_ywraq_add_item_product_message, .yith_ywraq_add_item_response_message)::before { content: ""; flex: 0 0 12px; width: 12px; height: 12px; background: currentColor; -webkit-mask: var(--vf-icon-check) center / contain no-repeat; mask: var(--vf-icon-check) center / contain no-repeat; } /* mensagens vazias nunca aparecem */ .jet-listing-grid__item [data-elementor-type="jet-listing-items"] > .e-con:not(.vf-post-card) :is(.yith_ywraq_add_item_product_message, .yith_ywraq_add_item_response_message):empty { display: none !important; } .jet-listing-grid__item [data-elementor-type="jet-listing-items"] > .e-con:not(.vf-post-card) .yith_ywraq_add_item_browse_message { position: relative; z-index: 2; /* acima do link invisivel do card (a animacao cria uma camada propria) */ margin: 0; animation: vf-cta-in 240ms var(--vf-ease) both; } .jet-listing-grid__item [data-elementor-type="jet-listing-items"] > .e-con:not(.vf-post-card) .yith_ywraq_add_item_browse_message a { position: relative; z-index: 2; display: flex; align-items: center; justify-content: center; gap: 8px; width: 100%; height: var(--vf-card-btn-h); min-width: 0; overflow: hidden; padding: 0 12px; font: 600 0.875rem/1 "Inter", sans-serif; white-space: nowrap; text-overflow: ellipsis; -webkit-tap-highlight-color: transparent; text-decoration: none; color: var(--vf-success); background: var(--vf-success-bg); border: 1px solid transparent; border-radius: var(--vf-radius-ctl); transition: background-color 160ms var(--vf-ease), color 160ms var(--vf-ease); } .jet-listing-grid__item [data-elementor-type="jet-listing-items"] > .e-con:not(.vf-post-card) .yith_ywraq_add_item_browse_message a .vf-quote-btn__label { display: block; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .jet-listing-grid__item [data-elementor-type="jet-listing-items"] > .e-con:not(.vf-post-card) .yith_ywraq_add_item_browse_message a::before { content: ""; flex: 0 0 16px; width: 16px; height: 16px; background: currentColor; -webkit-mask: var(--vf-icon-check) center / contain no-repeat; mask: var(--vf-icon-check) center / contain no-repeat; } /* Card compacto: selo so para leitores de tela (nao cobre o produto) */ @media (max-width: 767px) { .jet-listing-grid__item [data-elementor-type="jet-listing-items"] > .e-con:not(.vf-post-card) .yith_ywraq_add_item_browse_message a { padding: 0 10px; gap: 6px; } .jet-listing-grid__item [data-elementor-type="jet-listing-items"] > .e-con:not(.vf-post-card) .yith_ywraq_add_item_browse_message a::before { flex-basis: 14px; width: 14px; height: 14px; } } @media (max-width: 399px) { .jet-listing-grid__item [data-elementor-type="jet-listing-items"] > .e-con:not(.vf-post-card) .yith_ywraq_add_item_browse_message a::before { display: none; } } @container vf-product-card (max-width: 219.98px) { .jet-listing-grid__item [data-elementor-type="jet-listing-items"] > .e-con:not(.vf-post-card) :is(.yith_ywraq_add_item_product_message, .yith_ywraq_add_item_response_message) { position: absolute !important; width: 1px !important; height: 1px !important; padding: 0 !important; overflow: hidden !important; clip: rect(0 0 0 0) !important; white-space: nowrap !important; border: 0 !important; } .jet-listing-grid__item [data-elementor-type="jet-listing-items"] > .e-con:not(.vf-post-card) .yith_ywraq_add_item_browse_message a { padding: 0 10px; gap: 6px; } } /* Produto na cotacao: linha de fluxo verde fixa */ .jet-listing-grid__item [data-elementor-type="jet-listing-items"] > .e-con:not(.vf-post-card):has(.yith-ywraq-add-button.addedd) > .vf-product-card__media::after, .jet-listing-grid__item [data-elementor-type="jet-listing-items"] > .e-con:not(.vf-post-card):has(.yith_ywraq_add_item_browse_message:not(.hide)) > .vf-product-card__media::after, .jet-listing-grid__item [data-elementor-type="jet-listing-items"] > .e-con:not(.vf-post-card):has(.yith_ywraq_add_item_browse_message[style*="block"]) > .vf-product-card__media::after { transform: scaleX(1); background: var(--vf-success); } @keyframes vf-badge-in { from { opacity: 0; transform: translateY(-4px); } to { opacity: 1; transform: none; } } @keyframes vf-cta-in { from { opacity: 0; transform: translateY(4px); } to { opacity: 1; transform: none; } } /* -------------------------------------------------------------------------- 8. Foco e hover -------------------------------------------------------------------------- */ .jet-listing-grid__item [data-elementor-type="jet-listing-items"] > .e-con:not(.vf-post-card):has(.vf-product-card__title a:focus-visible) { outline: 3px solid var(--vf-focus); outline-offset: 2px; } @media (hover: hover) and (pointer: fine) { .jet-listing-grid__item [data-elementor-type="jet-listing-items"] > .e-con:not(.vf-post-card):hover { border-color: var(--vf-border-hover) !important; } .jet-listing-grid__item [data-elementor-type="jet-listing-items"] > .e-con:not(.vf-post-card):hover > .vf-product-card__media::after { transform: scaleX(1); } .jet-listing-grid__item [data-elementor-type="jet-listing-items"] > .e-con:not(.vf-post-card):hover > .vf-product-card__media img { transform: scale(1.04); } .jet-listing-grid__item [data-elementor-type="jet-listing-items"] > .e-con:not(.vf-post-card):hover > .vf-product-card__media .elementor-widget-container::after, .jet-listing-grid__item [data-elementor-type="jet-listing-items"] > .e-con:not(.vf-post-card):hover > .vf-product-card__media .elementor-widget-container::before { opacity: 1; transform: none; } .jet-listing-grid__item [data-elementor-type="jet-listing-items"] > .e-con:not(.vf-post-card):hover .vf-product-card__title .elementor-heading-title { color: #000 !important; } .jet-listing-grid__item [data-elementor-type="jet-listing-items"] > .e-con:not(.vf-post-card):hover a.add-request-quote-button.button:not(.disabled) { border-color: rgba(212, 20, 20, 0.32) !important; } .jet-listing-grid__item [data-elementor-type="jet-listing-items"] > .e-con:not(.vf-post-card) a.add-request-quote-button.button:not(.disabled):hover { background-color: var(--vf-red) !important; border-color: var(--vf-red) !important; color: #FFFFFF !important; } .jet-listing-grid__item [data-elementor-type="jet-listing-items"] > .e-con:not(.vf-post-card) .yith_ywraq_add_item_browse_message a:hover { background: var(--vf-success); color: #FFFFFF; } } /* -------------------------------------------------------------------------- 9. Movimento reduzido -------------------------------------------------------------------------- */ @media (prefers-reduced-motion: reduce) { .jet-listing-grid__item [data-elementor-type="jet-listing-items"] > .e-con:not(.vf-post-card), .jet-listing-grid__item [data-elementor-type="jet-listing-items"] > .e-con:not(.vf-post-card) > .vf-product-card__media img, .jet-listing-grid__item [data-elementor-type="jet-listing-items"] > .e-con:not(.vf-post-card) > .vf-product-card__media::after, .jet-listing-grid__item [data-elementor-type="jet-listing-items"] > .e-con:not(.vf-post-card) > .vf-product-card__media .elementor-widget-container::before, .jet-listing-grid__item [data-elementor-type="jet-listing-items"] > .e-con:not(.vf-post-card) > .vf-product-card__media .elementor-widget-container::after, .jet-listing-grid__item [data-elementor-type="jet-listing-items"] > .e-con:not(.vf-post-card) a.add-request-quote-button.button, .jet-listing-grid__item [data-elementor-type="jet-listing-items"] > .e-con:not(.vf-post-card) .yith_ywraq_add_item_browse_message a { transition: none !important; } .jet-listing-grid__item [data-elementor-type="jet-listing-items"] > .e-con:not(.vf-post-card):hover > .vf-product-card__media img { transform: none; } .jet-listing-grid__item [data-elementor-type="jet-listing-items"] > .e-con:not(.vf-post-card) :is(.yith_ywraq_add_item_product_message, .yith_ywraq_add_item_response_message, .yith_ywraq_add_item_browse_message) { animation: none; } } /* ========================================================================== 4. Botao flutuante do WhatsApp (.vf-wa-float) - todas as paginas O "x" minimiza numa aba pequena; clicar na aba traz o botao de volta. Some quando o rodape (.vf-footer) esta na tela e com a gaveta de menu aberta. ========================================================================== */ .vf-wa-float { position: fixed; right: max(24px, calc(env(safe-area-inset-right) + 16px)); bottom: max(32px, calc(env(safe-area-inset-bottom) + 24px)); z-index: 850; /* abaixo do header: nunca cobre a gaveta de menu */ display: flex; align-items: center; font-family: "Inter", system-ui, sans-serif; animation: vf-wa-in 520ms cubic-bezier(0.16, 1, 0.3, 1) var(--vf-wa-delay, 1500ms) both; transition: filter 240ms, translate 360ms cubic-bezier(0.25, 1, 0.5, 1), visibility 0s; } .vf-wa-float.no-intro { animation: none; } .vf-wa-float.is-away { /* rodape na tela: o botao sai (o rodape ja tem WhatsApp) */ filter: opacity(0); /* filter, e nao opacity: a animacao de entrada controla a opacity */ visibility: hidden; translate: 0 16px; transition: filter 200ms, translate 360ms cubic-bezier(0.25, 1, 0.5, 1), visibility 0s 200ms; } .vf-wa-float [hidden] { display: none !important; } .vf-wa-float .vf-wa-float__link { display: flex; align-items: center; gap: 12px; text-decoration: none !important; } .vf-wa-float .vf-wa-float__link:focus-visible { outline: none; } .vf-wa-float .vf-wa-float__link:focus-visible .vf-wa-float__btn { outline: 3px solid #4D94FF; outline-offset: 3px; } .vf-wa-float .vf-wa-float__bubble { padding: 12px 16px; font-size: 0.875rem; line-height: 1.2; white-space: nowrap; color: #38383D; background: #FFFFFF; border: 1px solid #DEDEE1; border-radius: 4px; box-shadow: 0 8px 24px -8px rgba(28, 28, 30, 0.2); animation: vf-wa-bubble-in 480ms cubic-bezier(0.16, 1, 0.3, 1) calc(var(--vf-wa-delay, 1500ms) + 500ms) both; transition: background-color 160ms; } .vf-wa-float .vf-wa-float__bubble strong { font-weight: 600; color: #1C1C1E; } .vf-wa-float .vf-wa-float__link:hover .vf-wa-float__bubble { background: #F7F7F8; } .vf-wa-float .vf-wa-float__btn { display: grid; place-items: center; width: 56px; height: 56px; color: #FFFFFF; background: var(--vf-whatsapp); border-radius: 50%; box-shadow: 0 10px 24px -8px rgba(28, 155, 74, 0.55), 0 2px 6px rgba(28, 28, 30, 0.12); transition: background-color 160ms, transform 320ms cubic-bezier(0.16, 1, 0.3, 1); } .vf-wa-float .vf-wa-float__btn .vf-wa-float__icon { width: 28px; height: 28px; } .vf-wa-float .vf-wa-float__link:hover .vf-wa-float__btn { background: var(--vf-whatsapp-hover); transform: translateY(-2px); } /* Botoes "x" e "aba": all:unset zera os estilos de botao do tema/Elementor (era isso que deixava o "x" branco sobre branco) */ .vf-wa-float .vf-wa-float__close, .vf-wa-float .vf-wa-float__restore { all: unset; box-sizing: border-box; display: grid; place-items: center; cursor: pointer; -webkit-tap-highlight-color: transparent; } .vf-wa-float .vf-wa-float__close { position: absolute; top: -8px; right: -6px; width: 24px; height: 24px; color: #1C1C1E; background: #FFFFFF; border: 1px solid #DEDEE1; border-radius: 50%; box-shadow: 0 2px 6px rgba(28, 28, 30, 0.18); transition: color 160ms, border-color 160ms; } .vf-wa-float .vf-wa-float__close::before { content: ""; position: absolute; inset: -10px; } /* area de toque de 44px */ .vf-wa-float .vf-wa-float__close::after { content: ""; width: 10px; height: 10px; background: currentColor; -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='3' stroke-linecap='square'%3E%3Cpath d='M5 5l14 14M19 5L5 19'/%3E%3C/svg%3E") center / contain no-repeat; mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='3' stroke-linecap='square'%3E%3Cpath d='M5 5l14 14M19 5L5 19'/%3E%3C/svg%3E") center / contain no-repeat; } .vf-wa-float .vf-wa-float__close:is(:hover, :focus) { /* o "x" fica branco sobre vermelho (o tema pintava o fundo e o "x" sumia) */ color: #FFFFFF; background: var(--vf-red); border-color: var(--vf-red); } /* Aba minimizada: 36px, encostada no canto, discreta ate receber o mouse */ .vf-wa-float .vf-wa-float__restore { width: 36px; height: 36px; color: #FFFFFF; background: var(--vf-whatsapp); border-radius: 50%; box-shadow: 0 6px 16px -6px rgba(28, 155, 74, 0.6); opacity: 0.85; animation: vf-wa-pop 360ms cubic-bezier(0.16, 1, 0.3, 1) both; transition: opacity 160ms, transform 320ms cubic-bezier(0.16, 1, 0.3, 1); } .vf-wa-float .vf-wa-float__restore .vf-wa-float__icon { width: 18px; height: 18px; } .vf-wa-float .vf-wa-float__restore:is(:hover, :focus) { opacity: 1; color: #FFFFFF; background: var(--vf-whatsapp-hover); transform: scale(1.08); } .vf-wa-float.is-min .vf-wa-float__link { animation: none; } .vf-wa-float :is(.vf-wa-float__close, .vf-wa-float__restore):focus-visible { outline: 2px solid #4D94FF; outline-offset: 2px; } @keyframes vf-wa-in { from { opacity: 0; transform: translateY(16px) scale(0.9); } to { opacity: 1; transform: none; } } @keyframes vf-wa-bubble-in { from { opacity: 0; transform: translateX(8px); } to { opacity: 1; transform: none; } } @keyframes vf-wa-pop { from { opacity: 0; transform: scale(0.6); } } @media (max-width: 767px) { .vf-wa-float { right: max(16px, calc(env(safe-area-inset-right) + 12px)); bottom: max(20px, calc(env(safe-area-inset-bottom) + 16px)); } .vf-wa-float .vf-wa-float__bubble { display: none; } /* no celular, so o botao: nao cobre o conteudo */ .vf-wa-float .vf-wa-float__btn { width: 52px; height: 52px; } .vf-wa-float .vf-wa-float__btn .vf-wa-float__icon { width: 26px; height: 26px; } } @media (prefers-reduced-motion: reduce) { .vf-wa-float, .vf-wa-float * { animation-duration: 1ms !important; animation-delay: 0ms !important; } } @media print { .vf-wa-float { display: none; } } html.vfh-lock .vf-wa-float { display: none; } /* gaveta do menu aberta */ body.e-off-canvas__no-scroll .vf-wa-float { display: none; } /* gaveta de menu aberta */ /* ========================================================================== 5. Pagina "Solicitacao recebida" Shortcode [vf_quote_number] -> "Pedido de cotacao #4187" ========================================================================== */ .vf-quote-number { margin: 0; padding-bottom: 20px; font: 400 1rem/1.5 "Inter", sans-serif; color: var(--vf-muted); text-align: center; text-wrap: balance; } .vf-quote-number strong { font-weight: 600; color: var(--vf-graphite); font-variant-numeric: tabular-nums; } /* ========================================================================== 6. Pagina Solicitar Orcamento (/solicitar-orcamento) YITH Request a Quote Premium: tabela de produtos + formulario padrao >=1025px tabela (flexivel) | formulario (360-400px, fixo abaixo do cabecalho) <=1024px tabela em cima, formulario embaixo, largura total <=767px cada produto vira um card (imagem - nome - quantidade - remover) Gerados pelo PHP: vf-quote-table__catalog (catalogo abaixo do nome) e vf-qty / vf-qty__btn (botoes - / + da quantidade). ========================================================================== */ .ywraq-wrapper { font-family: "Inter", sans-serif; color: var(--vf-text); } .ywraq-wrapper *, .ywraq-wrapper *::before, .ywraq-wrapper *::after { box-sizing: border-box; } /* -------------------------------------------------------------------------- 1. Layout geral (sobrescreve o grid 50/50 do YITH) -------------------------------------------------------------------------- */ .ywraq-wrapper .ywraq-form-table-wrapper, .ywraq-wrapper .ywraq-form-table-wrapper.wide, .ywraq-wrapper.ywraq-with-form .ywraq-form-table-wrapper.wide { display: grid !important; grid-template-columns: minmax(0, 1fr); grid-auto-rows: auto !important; gap: 32px !important; align-items: start; overflow: visible !important; } @media (min-width: 1025px) { .ywraq-wrapper.ywraq-with-form .ywraq-form-table-wrapper, .ywraq-wrapper.ywraq-with-form .ywraq-form-table-wrapper.wide { grid-template-columns: minmax(0, 1fr) clamp(360px, 32vw, 400px); gap: 40px !important; } } .ywraq-wrapper .ywraq-form-table-wrapper > form#yith-ywraq-form, .ywraq-wrapper .ywraq-form-table-wrapper > .yith-ywraq-mail-form-wrapper { min-width: 0; width: 100%; margin: 0 !important; flex-basis: auto !important; } /* -------------------------------------------------------------------------- 2. Tabela de produtos (tablet e desktop) -------------------------------------------------------------------------- */ .ywraq-wrapper #yith-ywraq-form table#yith-ywrq-table-list, .ywraq-wrapper #yith-ywraq-form table.shop_table { width: 100%; margin: 0 0 16px !important; border: 1px solid var(--vf-border) !important; border-collapse: separate !important; border-spacing: 0; border-radius: var(--vf-radius); overflow: hidden; table-layout: auto; background: #FFFFFF; } .ywraq-wrapper #yith-ywrq-table-list thead th { padding: 12px 16px !important; font-size: 0.75rem !important; font-weight: 600 !important; line-height: 1.35; letter-spacing: 0.05em; text-transform: uppercase; text-align: left !important; color: var(--vf-muted) !important; background: var(--vf-canvas) !important; border: 0 !important; border-bottom: 1px solid var(--vf-border) !important; } .ywraq-wrapper #yith-ywrq-table-list thead th.product-quantity { text-align: center !important; } .ywraq-wrapper #yith-ywrq-table-list tbody td { padding: 16px !important; vertical-align: middle !important; text-align: left !important; background: #FFFFFF; border: 0 !important; border-top: 1px solid var(--vf-divider) !important; } .ywraq-wrapper #yith-ywrq-table-list tbody tr:first-child td { border-top: 0 !important; } /* Remover */ .ywraq-wrapper #yith-ywrq-table-list td.product-remove { width: 56px; max-width: none !important; padding-right: 0 !important; } .ywraq-wrapper #yith-ywrq-table-list a.remove, .ywraq-wrapper #yith-ywrq-table-list a.yith-ywraq-item-remove { display: inline-flex !important; align-items: center; justify-content: center; width: 36px !important; /* area de toque confortavel, sem moldura visivel */ height: 36px !important; margin: 0 !important; padding: 0 !important; font-size: 0 !important; /* esconde o "x" de texto (fica torto conforme a fonte) */ line-height: 0 !important; color: #A1A1A1 !important; /* discreto: nao convida a excluir */ background: transparent !important; border: 0 !important; border-radius: var(--vf-radius-ctl) !important; box-shadow: none !important; text-decoration: none !important; transition: background-color 160ms var(--vf-ease), color 160ms var(--vf-ease); } /* "x" desenhado: sempre centralizado */ .ywraq-wrapper #yith-ywrq-table-list a.remove::before { content: ""; display: block; width: 14px; height: 14px; background: currentColor; -webkit-mask: var(--vf-icon-x) center / contain no-repeat; mask: var(--vf-icon-x) center / contain no-repeat; } .ywraq-wrapper #yith-ywrq-table-list a.remove:hover, .ywraq-wrapper #yith-ywrq-table-list a.remove:focus-visible { color: var(--vf-red-hover) !important; background: var(--vf-red-50) !important; } .ywraq-wrapper #yith-ywrq-table-list a.remove:focus-visible { outline: none; box-shadow: 0 0 0 2px #FFFFFF, 0 0 0 5px var(--vf-focus) !important; } .ywraq-wrapper #yith-ywrq-table-list .ajax-loading { width: 16px; height: 16px; margin-left: 6px; vertical-align: middle; } /* Miniatura */ .ywraq-wrapper #yith-ywrq-table-list td.product-thumbnail { display: table-cell; width: 96px; } .ywraq-wrapper #yith-ywrq-table-list td.product-thumbnail a, .ywraq-wrapper #yith-ywrq-table-list td.product-thumbnail > img { display: block; } .ywraq-wrapper #yith-ywrq-table-list td.product-thumbnail img { display: block; width: 64px !important; max-width: 64px !important; height: 64px !important; padding: 6px; object-fit: contain; background: var(--vf-canvas); border: 1px solid var(--vf-divider); border-radius: var(--vf-radius-ctl); mix-blend-mode: multiply; } /* Nome e variacoes (sempre inteiros, quebram linha) */ .ywraq-wrapper #yith-ywrq-table-list td.product-name { min-width: 0; font-size: 0.9375rem !important; font-weight: 600 !important; line-height: 1.4; color: var(--vf-graphite); overflow-wrap: anywhere; } .ywraq-wrapper #yith-ywrq-table-list td.product-name a { color: var(--vf-graphite) !important; font-weight: 600 !important; text-decoration: none !important; } .ywraq-wrapper #yith-ywrq-table-list td.product-name a:hover { color: var(--vf-red-hover) !important; text-decoration: underline !important; text-underline-offset: 3px; } .ywraq-wrapper #yith-ywrq-table-list td.product-name :is(dl.variation, .wc-item-meta, ul) { margin: 6px 0 0 !important; padding: 0 !important; font-size: 0.8125rem !important; font-weight: 400 !important; line-height: 1.5; color: var(--vf-text-2) !important; list-style: none; } .ywraq-wrapper #yith-ywrq-table-list td.product-name dl.variation :is(dt, dd) { display: inline; margin: 0 !important; float: none !important; } .ywraq-wrapper #yith-ywrq-table-list td.product-name dl.variation dt { margin-right: 4px !important; } .ywraq-wrapper #yith-ywrq-table-list td.product-name dl.variation dd p { display: inline; margin: 0; } .ywraq-wrapper #yith-ywrq-table-list td.product-name dl.variation dd::after { content: ""; display: block; } .ywraq-wrapper #yith-ywrq-table-list td.product-name .mobile-price { display: none !important; } /* Catalogo do produto abaixo do nome (estilo Caption: 12px / 400 / 1,5) */ .ywraq-wrapper #yith-ywrq-table-list td.product-name .vf-quote-table__catalog { display: block; margin-top: 4px; font-family: "Inter", sans-serif; font-size: 0.75rem !important; font-weight: 400 !important; line-height: 1.5 !important; letter-spacing: 0.01em; color: var(--vf-muted) !important; } /* Catalogo do produto (inserido pelo PHP, secao 6a), estilo Caption */ .ywraq-wrapper #yith-ywrq-table-list td.product-name .vf-quote-table__catalog { display: block; margin-top: 4px; font-family: "Inter", sans-serif !important; font-size: 0.75rem !important; /* 12px */ font-weight: 400 !important; line-height: 1.5 !important; letter-spacing: 0.01em; color: var(--vf-muted) !important; } /* Quantidade: - [ 1 ] + (botoes criados pelo PHP, secao 6c; vale tambem na pagina do produto) */ .ywraq-wrapper #yith-ywrq-table-list td.product-quantity { width: 168px; text-align: center !important; } :is(.ywraq-wrapper #yith-ywrq-table-list, .single-product .yith-ywraq-add-to-quote) .quantity { display: inline-flex; align-items: stretch; justify-content: center; height: 44px; margin: 0 !important; background: #FFFFFF; border: 1px solid var(--vf-border-strong); border-radius: var(--vf-radius-ctl); overflow: hidden; transition: border-color 160ms var(--vf-ease), box-shadow 160ms var(--vf-ease); } :is(.ywraq-wrapper #yith-ywrq-table-list, .single-product .yith-ywraq-add-to-quote) .quantity:focus-within { border-color: var(--vf-graphite); box-shadow: inset 0 0 0 1px var(--vf-graphite); } :is(.ywraq-wrapper #yith-ywrq-table-list, .single-product .yith-ywraq-add-to-quote) input.qty { width: 56px !important; height: 100% !important; margin: 0 !important; padding: 0 4px !important; font: 600 1rem/1 "Inter", sans-serif !important; font-variant-numeric: tabular-nums; text-align: center !important; color: var(--vf-graphite) !important; background: #FFFFFF !important; border: 0 !important; border-radius: 0 !important; box-shadow: none !important; -moz-appearance: textfield; appearance: textfield; } :is(.ywraq-wrapper #yith-ywrq-table-list, .single-product .yith-ywraq-add-to-quote) input.qty::-webkit-outer-spin-button, :is(.ywraq-wrapper #yith-ywrq-table-list, .single-product .yith-ywraq-add-to-quote) input.qty::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; } :is(.ywraq-wrapper #yith-ywrq-table-list, .single-product .yith-ywraq-add-to-quote) input.qty:focus { outline: none; } :is(.ywraq-wrapper #yith-ywrq-table-list, .single-product .yith-ywraq-add-to-quote) .vf-qty__btn { all: unset; box-sizing: border-box; display: grid; place-items: center; flex: 0 0 44px; width: 44px; color: var(--vf-graphite); background: var(--vf-canvas); cursor: pointer; -webkit-tap-highlight-color: transparent; transition: background-color 160ms var(--vf-ease), color 160ms var(--vf-ease); } :is(.ywraq-wrapper #yith-ywrq-table-list, .single-product .yith-ywraq-add-to-quote) .vf-qty__btn--minus { border-right: 1px solid var(--vf-border); } :is(.ywraq-wrapper #yith-ywrq-table-list, .single-product .yith-ywraq-add-to-quote) .vf-qty__btn--plus { border-left: 1px solid var(--vf-border); } :is(.ywraq-wrapper #yith-ywrq-table-list, .single-product .yith-ywraq-add-to-quote) .vf-qty__btn::before { content: ""; width: 14px; height: 14px; background: currentColor; -webkit-mask: var(--vf-icon-minus) center / contain no-repeat; mask: var(--vf-icon-minus) center / contain no-repeat; } :is(.ywraq-wrapper #yith-ywrq-table-list, .single-product .yith-ywraq-add-to-quote) .vf-qty__btn--plus::before { -webkit-mask-image: var(--vf-icon-plus); mask-image: var(--vf-icon-plus); } :is(.ywraq-wrapper #yith-ywrq-table-list, .single-product .yith-ywraq-add-to-quote) .vf-qty__btn:hover, :is(.ywraq-wrapper #yith-ywrq-table-list, .single-product .yith-ywraq-add-to-quote) .vf-qty__btn:focus { color: var(--vf-red); background: var(--vf-red-50); } :is(.ywraq-wrapper #yith-ywrq-table-list, .single-product .yith-ywraq-add-to-quote) .vf-qty__btn:active { color: #FFFFFF; background: var(--vf-red); } :is(.ywraq-wrapper #yith-ywrq-table-list, .single-product .yith-ywraq-add-to-quote) .vf-qty__btn:focus-visible { outline: 2px solid var(--vf-focus); outline-offset: -2px; } :is(.ywraq-wrapper #yith-ywrq-table-list, .single-product .yith-ywraq-add-to-quote) .quantity.blockUI, :is(.ywraq-wrapper #yith-ywrq-table-list, .single-product .yith-ywraq-add-to-quote) .blockOverlay { border-radius: var(--vf-radius-ctl); } /* Colunas de preco/total (se o preco voltar a ser exibido) */ .ywraq-wrapper #yith-ywrq-table-list :is(td, th):is(.product-price, .product-subtotal) { text-align: right !important; white-space: nowrap; font-variant-numeric: tabular-nums; } /* -------------------------------------------------------------------------- 3. Link de retorno (acima da tabela) e acoes abaixo da tabela -------------------------------------------------------------------------- */ /* Mensagens do YITH no topo: some quando vazia */ .ywraq-wrapper #yith-ywraq-message .ywraq-question-message:empty, .ywraq-wrapper #yith-ywraq-message:not(:has(.woocommerce-message, .woocommerce-error, .woocommerce-info)) { display: none; } /* "Retornar ao Catalogo" - link terciario com seta, fora do formulario */ .ywraq-wrapper .yith-ywraq-before-table { margin: 0 0 16px !important; text-align: left !important; } .ywraq-wrapper .yith-ywraq-before-table a.button.wc-backward, .ywraq-wrapper a.button.wc-backward { display: inline-flex !important; align-items: center; gap: 8px; min-height: 44px; margin: 0 !important; padding: 0 !important; font: 600 0.875rem/1.2 "Inter", sans-serif !important; text-transform: none !important; text-decoration: none !important; color: var(--vf-text-2) !important; background: transparent !important; border: 0 !important; box-shadow: none !important; float: none !important; } .ywraq-wrapper a.button.wc-backward::before { content: ""; flex: 0 0 16px; width: 16px; height: 16px; background: currentColor; -webkit-mask: var(--vf-icon-arrow-left) center / contain no-repeat; mask: var(--vf-icon-arrow-left) center / contain no-repeat; transition: transform 160ms var(--vf-ease); } .ywraq-wrapper a.button.wc-backward:hover { color: var(--vf-red-hover) !important; } .ywraq-wrapper a.button.wc-backward:hover::before { transform: translateX(-3px); } /* Barra de acoes: [Limpar Tudo] ........ [Atualizar Lista] */ .ywraq-wrapper #yith-ywraq-form .update-list-wrapper { display: flex !important; flex-wrap: wrap; align-items: center; justify-content: space-between !important; gap: 12px; margin: 0 !important; text-align: left !important; } .ywraq-wrapper #yith-ywraq-form .update-list-wrapper .after-table-right { display: flex; flex-wrap: wrap; gap: 12px; margin: 0; } /* Atualizar Lista - secundario */ .ywraq-wrapper #yith-ywraq-form .update-list-wrapper input[name="update_raq"], .ywraq-wrapper #yith-ywraq-form .update-list-wrapper :is(.button, button):not(.ywraq_clean_list) { display: inline-flex !important; align-items: center; justify-content: center; float: none !important; min-height: 44px; margin: 0 !important; padding: 0 16px !important; font: 600 0.875rem/1.2 "Inter", sans-serif !important; text-transform: none !important; color: var(--vf-graphite) !important; background: #FFFFFF !important; border: 1px solid var(--vf-border-strong) !important; border-radius: var(--vf-radius-ctl) !important; box-shadow: none !important; cursor: pointer; transition: background-color 160ms var(--vf-ease), border-color 160ms var(--vf-ease); } .ywraq-wrapper #yith-ywraq-form .update-list-wrapper input[name="update_raq"]:hover { background: var(--vf-canvas) !important; border-color: var(--vf-text-2) !important; } /* Limpar Tudo - acao destrutiva: discreta, vermelha so no hover */ .ywraq-wrapper #yith-ywraq-form button.ywraq_clean_list { display: inline-flex !important; align-items: center; gap: 8px; min-height: 44px; margin: 0 !important; padding: 0 4px !important; font: 600 0.875rem/1.2 "Inter", sans-serif !important; text-transform: none !important; color: var(--vf-text-2) !important; background: transparent !important; border: 0 !important; box-shadow: none !important; cursor: pointer; } .ywraq-wrapper #yith-ywraq-form button.ywraq_clean_list::before { content: ""; width: 16px; height: 16px; background: currentColor; -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='square'%3E%3Cpath d='M4 7h16M10 11v6M14 11v6M6 7l1 13h10l1-13M9 7V4h6v3'/%3E%3C/svg%3E") center / contain no-repeat; mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='square'%3E%3Cpath d='M4 7h16M10 11v6M14 11v6M6 7l1 13h10l1-13M9 7V4h6v3'/%3E%3C/svg%3E") center / contain no-repeat; } .ywraq-wrapper #yith-ywraq-form button.ywraq_clean_list:hover { color: var(--vf-red-hover) !important; } .ywraq-wrapper #yith-ywraq-form :is(.update-list-wrapper .button, button.ywraq_clean_list, input[name="update_raq"]):focus-visible, .ywraq-wrapper a.button.wc-backward:focus-visible { outline: none; box-shadow: 0 0 0 2px #FFFFFF, 0 0 0 5px var(--vf-focus) !important; } /* Texto so para leitores de tela (rotulo da quantidade) */ .ywraq-wrapper .screen-reader-text { position: absolute !important; width: 1px !important; height: 1px !important; padding: 0 !important; margin: -1px !important; overflow: hidden !important; clip: rect(0 0 0 0) !important; white-space: nowrap !important; border: 0 !important; } /* -------------------------------------------------------------------------- 4. Tabela no mobile: cada produto vira um card [imagem] Nome do produto completo [x] [ ] QUANTIDADE [ 10 ] -------------------------------------------------------------------------- */ @media (max-width: 767px) { .ywraq-wrapper #yith-ywraq-form table#yith-ywrq-table-list, .ywraq-wrapper #yith-ywrq-table-list tbody { display: block !important; width: 100%; } .ywraq-wrapper #yith-ywrq-table-list thead { display: none !important; } .ywraq-wrapper #yith-ywrq-table-list tbody tr.cart_item { display: grid !important; grid-template-columns: 64px minmax(0, 1fr) 36px; grid-template-areas: "thumb name remove" "thumb qty qty"; column-gap: 12px; row-gap: 12px; align-items: start; padding: 16px; border-top: 1px solid var(--vf-divider); } .ywraq-wrapper #yith-ywrq-table-list tbody tr.cart_item:first-child { border-top: 0; } .ywraq-wrapper #yith-ywrq-table-list tbody tr.cart_item > td { display: block !important; width: auto !important; max-width: none !important; padding: 0 !important; border: 0 !important; text-align: left !important; } /* neutraliza rotulos automaticos do WooCommerce (data-title) */ .ywraq-wrapper #yith-ywrq-table-list tbody td::before { content: none !important; } .ywraq-wrapper #yith-ywrq-table-list td.product-thumbnail { grid-area: thumb; display: block !important; } .ywraq-wrapper #yith-ywrq-table-list td.product-name { grid-area: name; font-size: 0.875rem !important; } .ywraq-wrapper #yith-ywrq-table-list td.product-remove { grid-area: remove; justify-self: end; } .ywraq-wrapper #yith-ywrq-table-list tbody tr.cart_item > td.product-quantity { grid-area: qty; display: flex !important; align-items: center; gap: 12px; } .ywraq-wrapper #yith-ywrq-table-list td.product-quantity::before { content: "Quantidade" !important; font-size: 0.75rem; font-weight: 600; letter-spacing: 0.05em; text-transform: uppercase; color: var(--vf-muted); } .ywraq-wrapper #yith-ywrq-table-list :is(td.product-price, td.product-subtotal) { grid-column: 2 / -1; text-align: left !important; } .ywraq-wrapper #yith-ywrq-table-list tr:not(.cart_item) { display: block; } .ywraq-wrapper #yith-ywrq-table-list tr:not(.cart_item) td { display: block !important; padding: 16px !important; } .ywraq-wrapper #yith-ywraq-form .update-list-wrapper { gap: 8px; } .ywraq-wrapper #yith-ywraq-form .update-list-wrapper input[name="update_raq"] { flex: 1 1 auto; max-width: 200px; } } /* -------------------------------------------------------------------------- 5. Formulario de envio -------------------------------------------------------------------------- */ .ywraq-wrapper .yith-ywraq-mail-form-wrapper { container-type: inline-size; container-name: vfform; margin-top: 0 !important; padding: 24px !important; background: var(--vf-canvas) !important; border: 1px solid var(--vf-border); border-radius: var(--vf-radius); } @media (min-width: 1025px) { .ywraq-wrapper.ywraq-with-form .yith-ywraq-mail-form-wrapper { position: sticky; top: var(--vf-sticky-top); } } @media (max-width: 767px) { .ywraq-wrapper .yith-ywraq-mail-form-wrapper { padding: 20px 16px !important; } } .ywraq-wrapper .yith-ywraq-mail-form-wrapper > :is(h2, h3, h4) { text-align: center !important; text-wrap: balance; margin: 0 0 20px !important; font-size: 1.25rem !important; font-weight: 600 !important; line-height: 1.3 !important; letter-spacing: -0.01em; color: var(--vf-graphite) !important; } #yith-ywraq-default-form { display: grid; grid-template-columns: minmax(0, 1fr); column-gap: 16px; row-gap: 16px; margin: 0; } #yith-ywraq-default-form > * { grid-column: 1 / -1; min-width: 0; } /* Formulario com 480px ou mais (tablet): pares lado a lado Nome | Sobrenome - Empresa (inteira) - E-mail | WhatsApp - Mensagem (inteira) */ @container vfform (min-width: 480px) { #yith-ywraq-default-form { grid-template-columns: repeat(2, minmax(0, 1fr)); } #yith-ywraq-default-form > :is(.form-row-first, #first_name_field, #email_field) { grid-column: 1; } #yith-ywraq-default-form > :is(.form-row-last, #last_name_field, #whatsapp_field) { grid-column: 2; } } #yith-ywraq-default-form .form-row { float: none !important; width: auto !important; margin: 0 !important; padding: 0 !important; } #yith-ywraq-default-form .form-row.form-row-wide { padding-top: 0 !important; } #yith-ywraq-default-form .form-row > label, #yith-ywraq-default-form .form-row label:not(.checkbox):not(.radio):not(.ywraq_acceptance_label) { display: block; margin: 0 0 6px !important; font-size: 0.875rem !important; font-weight: 600 !important; line-height: 1.4 !important; color: var(--vf-text) !important; } #yith-ywraq-default-form abbr.required, #yith-ywraq-default-form .required { color: var(--vf-red-hover) !important; text-decoration: none !important; border: 0 !important; } #yith-ywraq-default-form .woocommerce-input-wrapper { display: block; width: 100%; } #yith-ywraq-default-form .optional { display: none !important; } /* o rotulo ja diz "(opcional)" */ #yith-ywraq-default-form label.required_field { display: block; } /* Campos (16px de fonte evita zoom automatico no iPhone) */ #yith-ywraq-default-form :is(input[type="text"], input[type="email"], input[type="tel"], input[type="number"], input[type="url"], input[type="date"], input[type="password"], select, textarea), #yith-ywraq-default-form .select2-container .select2-selection--single { display: block; width: 100% !important; min-height: 48px; margin: 0 !important; padding: 0 14px !important; font: 400 1rem/1.4 "Inter", sans-serif !important; color: var(--vf-graphite) !important; background-color: #FFFFFF !important; border: 1px solid var(--vf-border-strong) !important; border-radius: var(--vf-radius-ctl) !important; box-shadow: none !important; transition: border-color 160ms var(--vf-ease), box-shadow 160ms var(--vf-ease); } #yith-ywraq-default-form textarea, #yith-ywraq-default-form textarea.input-text { min-height: 128px !important; padding: 12px 14px !important; resize: vertical; } #yith-ywraq-default-form .select2-container .select2-selection--single .select2-selection__rendered { padding: 0 !important; line-height: 46px !important; } #yith-ywraq-default-form .select2-container .select2-selection__arrow { height: 46px !important; right: 8px !important; } #yith-ywraq-default-form ::placeholder { color: var(--vf-muted) !important; opacity: 1; font-size: 1rem !important; } #yith-ywraq-default-form :is(input, select, textarea):hover { border-color: var(--vf-text-2) !important; } #yith-ywraq-default-form :is(input, select, textarea):focus, #yith-ywraq-default-form .select2-container--focus .select2-selection { outline: none !important; border-color: var(--vf-graphite) !important; box-shadow: inset 0 0 0 1px var(--vf-graphite) !important; } /* Upload de arquivo */ #yith-ywraq-default-form input[type="file"] { width: 100%; padding: 10px; font: 400 0.875rem/1.4 "Inter", sans-serif; background: #FFFFFF; border: 1px dashed var(--vf-border-strong); border-radius: var(--vf-radius-ctl); } #yith-ywraq-default-form input[type="file"]::file-.elementor-kit-8-button { margin-right: 12px; padding: 8px 12px; font: 600 0.8125rem "Inter", sans-serif; color: var(--vf-graphite); background: var(--vf-canvas); border: 1px solid var(--vf-border-strong); border-radius: var(--vf-radius-ctl); cursor: pointer; } /* Checkbox / radio / aceite */ #yith-ywraq-default-form :is(input[type="checkbox"], input[type="radio"]) { width: 20px; height: 20px; margin: 0 8px 0 0 !important; vertical-align: -4px; accent-color: var(--vf-red); } #yith-ywraq-default-form :is(label.checkbox, label.radio, label.ywraq_acceptance_label) { display: inline-block !important; margin: 0 16px 0 0 !important; font-size: 0.875rem !important; font-weight: 400 !important; line-height: 1.5 !important; color: var(--vf-text) !important; } #yith-ywraq-default-form .ywraq_acceptance_description { display: block; margin: 0 0 8px !important; font-size: 0.8125rem; line-height: 1.5; color: var(--vf-text-2); } #yith-ywraq-default-form .ywraq_acceptance_description a, #yith-ywraq-default-form label a { color: var(--vf-red-hover); text-underline-offset: 2px; } /* Erros de validacao */ #yith-ywraq-default-form span.ywraq_error { display: block; margin-top: 6px; font-size: 0.8125rem !important; line-height: 1.4; color: var(--vf-red-hover) !important; } #yith-ywraq-default-form span.ywraq_error:empty { display: none; } #yith-ywraq-default-form .form-row:has(span.ywraq_error:not(:empty)) :is(input, select, textarea) { border-color: var(--vf-red-hover) !important; } .ywraq-wrapper :is(.woocommerce-error, .woocommerce-message, .woocommerce-info) { grid-column: 1 / -1; margin: 0 0 16px !important; padding: 12px 16px !important; font-size: 0.875rem !important; line-height: 1.5; list-style: none; color: var(--vf-text) !important; background: #FFFFFF !important; border: 1px solid var(--vf-border) !important; border-left: 3px solid var(--vf-focus) !important; border-radius: var(--vf-radius-ctl); box-shadow: none !important; } .ywraq-wrapper .woocommerce-error { background: var(--vf-red-50) !important; border-left-color: var(--vf-red-hover) !important; } .ywraq-wrapper .woocommerce-message { background: var(--vf-success-bg) !important; border-left-color: var(--vf-success) !important; } .ywraq-wrapper :is(.woocommerce-error, .woocommerce-message, .woocommerce-info)::before { display: none !important; } /* Botao Enviar solicitacao */ #yith-ywraq-default-form .raq-send-request-row { position: relative; margin-top: 8px !important; text-align: left !important; } #yith-ywraq-default-form input.raq-send-request, #yith-ywraq-default-form .raq-send-request { display: block; width: 100% !important; min-height: 48px; margin: 0 !important; padding: 0 20px !important; font: 600 1rem/1.25 "Inter", sans-serif !important; letter-spacing: 0.01em; text-transform: none !important; color: #FFFFFF !important; background: var(--vf-red) !important; border: 1px solid var(--vf-red) !important; border-radius: var(--vf-radius-ctl) !important; box-shadow: none !important; cursor: pointer; transition: background-color 160ms var(--vf-ease), transform 120ms var(--vf-ease); } #yith-ywraq-default-form .raq-send-request:hover { background: var(--vf-red-hover) !important; border-color: var(--vf-red-hover) !important; } #yith-ywraq-default-form .raq-send-request:active { background: var(--vf-red-active) !important; transform: scale(0.99); } #yith-ywraq-default-form .raq-send-request:focus-visible { outline: none; box-shadow: 0 0 0 2px #FFFFFF, 0 0 0 5px var(--vf-focus) !important; } #yith-ywraq-default-form .raq-send-request:disabled { color: transparent !important; cursor: progress; } /* Enviando: troca o GIF do YITH por um spinner dentro do botao */ #yith-ywraq-default-form .raq-send-request-row .ywraq-loader { display: none !important; } #yith-ywraq-default-form .raq-send-request-row:has(.ywraq-loader)::after { content: ""; position: absolute; left: 50%; bottom: 14px; width: 20px; height: 20px; margin-left: -10px; border: 2px solid #FFFFFF; border-right-color: transparent; border-radius: 50%; animation: q-spin 640ms linear infinite; } @keyframes q-spin { to { transform: rotate(360deg); } } #yith-ywraq-default-form .g-recaptcha { margin: 0 !important; transform-origin: 0 0; } @container vfform (max-width: 320px) { #yith-ywraq-default-form .g-recaptcha { transform: scale(0.88); } } /* -------------------------------------------------------------------------- 6. Lista vazia -------------------------------------------------------------------------- */ .ywraq-wrapper .ywraq-before-form, .ywraq-wrapper.ywraq-empty .ywraq-before-form { padding: 48px 24px !important; text-align: center; background: var(--vf-canvas); border: 1px dashed #C7C7CC !important; border-radius: var(--vf-radius); } .ywraq-wrapper .ywraq-before-form::before { margin-top: 0 !important; width: 96px !important; height: 96px !important; background-size: contain !important; } .ywraq-wrapper .ywraq_list_empty_message { margin: 16px 0 !important; font-size: 1rem; line-height: 1.6; color: var(--vf-text-2); } /* Botao "Voltar para catalogos" da lista vazia. Usa a mesma classe (wc-backward) do link "Retornar ao Catalogo" e tambem recebe estilos de hover do tema/WooCommerce. As regras abaixo tem prioridade maior e definem TODOS os estados: normal, hover, foco e clique. */ body .return-to-shop a.button, body .return-to-shop a.button.wc-backward, body .ywraq-wrapper .return-to-shop a.button.wc-backward { display: inline-flex !important; align-items: center; justify-content: center; gap: 8px; min-height: 48px; margin: 0 !important; padding: 0 24px !important; font: 600 1rem/1.2 "Inter", sans-serif !important; text-transform: none !important; text-decoration: none !important; color: #FFFFFF !important; background: #D41414 !important; border: 0 !important; border-radius: 2px !important; box-shadow: none !important; transition: background-color 160ms cubic-bezier(0.25, 1, 0.5, 1); } body .return-to-shop a.button.wc-backward::before { display: none !important; } body .return-to-shop a.button:hover, body .return-to-shop a.button:focus, body .return-to-shop a.button.wc-backward:hover, body .return-to-shop a.button.wc-backward:focus, body .ywraq-wrapper .return-to-shop a.button.wc-backward:hover, body .ywraq-wrapper .return-to-shop a.button.wc-backward:focus { color: #FFFFFF !important; background: #B70E0E !important; } body .return-to-shop a.button:active, body .ywraq-wrapper .return-to-shop a.button.wc-backward:active { color: #FFFFFF !important; background: #970F0F !important; } body .return-to-shop a.button:focus-visible, body .ywraq-wrapper .return-to-shop a.button.wc-backward:focus-visible { outline: none; box-shadow: 0 0 0 2px #FFFFFF, 0 0 0 5px #005FCC !important; } /* -------------------------------------------------------------------------- 7. Movimento reduzido -------------------------------------------------------------------------- */ @media (prefers-reduced-motion: reduce) { .ywraq-wrapper *, .ywraq-wrapper *::before, .ywraq-wrapper *::after { transition: none !important; } #yith-ywraq-default-form .raq-send-request-row:has(.ywraq-loader)::after { animation-duration: 1.6s; } } /* ========================================================================== 7. Header - botao "Solicitar orcamento", previa da cotacao, menu Catalogos e painel de busca (lupa). Os estados (has-items, is-bump, is-open) vem do PHP, secao 8. ========================================================================== */ /* -------------------------------------------------------------------------- 7.1 Botao "Solicitar orcamento" O PHP (secao 8) desenha a prancheta dentro do SVG vf-header-quote__icon e controla os estados: sem itens -> prancheta vazia, sem numero com itens -> prancheta com linhas + numero discreto no canto do botao is-bump -> ao adicionar: um item cai na prancheta e o numero aparece -------------------------------------------------------------------------- */ .elementor .e-con.vf-header-quote { position: relative; gap: 10px; padding-inline: 18px 20px; overflow: visible; } .elementor .vf-header-quote .vf-header-quote__icon { display: flex; /* visivel em todas as telas */ flex: 0 0 22px; width: 22px; height: 22px; min-width: 22px; color: #FFFFFF; background: transparent; } .elementor .vf-header-quote .vf-header-quote__icon > svg:not(.vf-quote-icon) { visibility: hidden; } /* icone padrao do widget ate o script trocar */ .vf-quote-icon { width: 100%; height: 100%; overflow: visible; } .vf-quote-icon :is(.vf-quote-icon__board, .vf-quote-icon__drop) { transform-box: fill-box; } .vf-quote-icon :is(.vf-quote-icon__board path, .vf-quote-icon__lines) { fill: none; stroke: currentColor; stroke-width: 1.75; stroke-linecap: square; stroke-linejoin: miter; } .vf-quote-icon__lines { stroke-dasharray: 6; stroke-dashoffset: 6; /* sem itens: linhas escondidas */ transition: stroke-dashoffset 420ms var(--vf-ease-soft) 120ms; } .vf-header-quote.has-items .vf-quote-icon__lines { stroke-dashoffset: 0; } .vf-quote-icon__drop { fill: currentColor; opacity: 0; transform-origin: center; } .vf-quote-icon__board { transform-origin: 50% 100%; } /* Numero: bolinha discreta no canto do botao (some quando a lista esta vazia) */ .elementor .vf-header-quote .vf-badge { position: absolute; top: -8px; right: -8px; z-index: 1; width: auto; height: 20px; min-width: 20px; padding: 0 5px; font: 700 0.6875rem/1 "Inter", sans-serif; /* 11px */ color: var(--vf-red); background: #FFFFFF; border: 1.5px solid var(--vf-red); border-radius: 10px; box-shadow: 0 2px 6px rgba(22, 22, 22, 0.18); justify-content: center; align-items: center; pointer-events: none; transform: scale(0); transition: transform 280ms var(--vf-ease-soft); } .elementor .vf-header-quote.has-items .vf-badge { transform: scale(1); } :is(.vf-header-quote, .vf-drawer__quote) .vf-badge :is(.elementor-element, .elementor-widget-container, .elementor-shortcode, .ywraq_number_items) { display: flex; align-items: center; justify-content: center; width: auto; margin: 0; padding: 0; font: inherit; color: inherit; line-height: 1; font-variant-numeric: tabular-nums; } /* Gaveta (celular): o numero so aparece com itens */ .elementor .vf-drawer__quote .vf-badge { justify-content: center; align-items: center; } .elementor .vf-drawer__quote:not(.has-items) .vf-badge { display: none; } /* Ao adicionar: o item cai na prancheta, a prancheta "recebe" e o numero pula */ .vf-header-quote.is-bump .vf-quote-icon__drop { animation: vf-quote-drop 620ms var(--vf-ease) both; } .vf-header-quote.is-bump .vf-quote-icon__board { animation: vf-quote-catch 620ms var(--vf-ease-soft); } .elementor .vf-header-quote.is-bump .vf-badge, .elementor .vf-drawer__quote.is-bump .vf-badge { animation: vf-badge-pop 520ms var(--vf-ease-soft) 240ms; } .elementor .vf-header-quote.is-bump-down .vf-badge { animation: vf-badge-dip 360ms var(--vf-ease); } @keyframes vf-quote-drop { 0% { opacity: 0; transform: translateY(-12px) scale(0.6); } 25% { opacity: 1; transform: translateY(-9px) scale(1); } 60% { opacity: 1; transform: translateY(1px); } 100% { opacity: 0; transform: translateY(2px) scale(0.8); } } @keyframes vf-quote-catch { 0%, 50% { transform: none; } 65% { transform: translateY(1.5px) scaleY(0.94); } 82% { transform: translateY(-0.5px) scaleY(1.02); } 100% { transform: none; } } @keyframes vf-badge-pop { 0% { transform: scale(1); } 40% { transform: scale(1.35); } 100% { transform: scale(1); } } @keyframes vf-badge-dip { 0%, 100% { transform: scale(1); } 40% { transform: scale(0.75); } } /* Tablet e celular: botao quadrado so com a prancheta */ @media (max-width: 1024px) { .elementor .e-con.vf-header-quote { padding-inline: 13px; } } /* -------------------------------------------------------------------------- 7.2 Previa da cotacao (hover ou foco no botao, so computador e notebook) -------------------------------------------------------------------------- */ .vf-quote-peek-host { position: relative; } .vf-quote-peek { position: absolute; top: calc(100% + 12px); right: 0; z-index: 120; width: 360px; padding: 20px; font-family: "Inter", sans-serif; color: var(--vf-text); background: #FFFFFF; border: 1px solid var(--vf-border); border-top: 2px solid var(--vf-red); border-radius: 0 0 var(--vf-radius) var(--vf-radius); box-shadow: 0 24px 48px -24px rgba(22, 22, 22, 0.45); opacity: 0; transform: translateY(-6px); transition: opacity 180ms var(--vf-ease), transform 260ms var(--vf-ease-soft); } .vf-quote-peek::before { /* ponte: o mouse pode descer do botao ate a previa */ content: ""; position: absolute; inset: -14px 0 auto; height: 14px; } .vf-quote-peek.is-open { opacity: 1; transform: none; } .vf-quote-peek[hidden] { display: none; } .vf-quote-peek p { margin: 0; } .vf-quote-peek__head { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; padding-bottom: 12px; border-bottom: 1px solid var(--vf-divider); } .vf-quote-peek__title { font-size: 0.9375rem; font-weight: 600; color: var(--vf-graphite); } .vf-quote-peek__total { font-size: 0.75rem; font-weight: 600; letter-spacing: 0.06em; text-transform: uppercase; color: var(--vf-red); } .vf-quote-peek__list { margin: 0; padding: 0; list-style: none; } .vf-quote-peek__item { display: flex; align-items: center; gap: 12px; padding: 12px 0; border-bottom: 1px solid var(--vf-divider); animation: vf-peek-in 320ms var(--vf-ease-soft) both; animation-delay: calc(var(--i, 0) * 50ms); } .vf-quote-peek__thumb { flex: 0 0 44px; width: 44px; height: 44px; padding: 4px; background: var(--vf-canvas); border: 1px solid var(--vf-divider); border-radius: var(--vf-radius-ctl); } .vf-quote-peek__thumb img { display: block; width: 100%; height: 100%; object-fit: contain; mix-blend-mode: multiply; } .vf-quote-peek__info { display: flex; flex-direction: column; flex: 1 1 auto; min-width: 0; } .vf-quote-peek__name { font-size: 0.875rem; font-weight: 600; line-height: 1.3; color: var(--vf-graphite); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .vf-quote-peek__cat { font-size: 0.75rem; color: var(--vf-muted); } .vf-quote-peek__qty { flex: 0 0 auto; font-size: 0.8125rem; font-weight: 600; font-variant-numeric: tabular-nums; color: var(--vf-text-2); } .vf-quote-peek__more { padding-top: 10px; font-size: 0.8125rem; color: var(--vf-muted); } .vf-quote-peek__foot { padding-top: 16px; } .vf-quote-peek__btn { position: relative; display: flex; align-items: center; justify-content: center; gap: 8px; height: 44px; font-size: 0.9375rem; font-weight: 600; color: #FFFFFF !important; text-decoration: none !important; background: var(--vf-red); border-radius: var(--vf-radius-ctl); overflow: hidden; transition: background-color 160ms var(--vf-ease); } .vf-quote-peek__btn::after { content: ""; width: 16px; height: 16px; background: currentColor; -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='square'%3E%3Cpath d='M4 12h15M13 6l6 6-6 6'/%3E%3C/svg%3E") center / contain no-repeat; mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='square'%3E%3Cpath d='M4 12h15M13 6l6 6-6 6'/%3E%3C/svg%3E") center / contain no-repeat; transition: transform 240ms var(--vf-ease-soft); } .vf-quote-peek__btn:hover { background: var(--vf-red-hover); } .vf-quote-peek__btn:hover::after { transform: translateX(4px); } /* Lista vazia */ .vf-quote-peek__empty { text-align: center; padding: 8px 4px 4px; } .vf-quote-peek__empty-icon { display: block; width: 40px; height: 40px; margin: 0 auto 12px; color: var(--vf-muted); background: currentColor; -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.25' stroke-linecap='square'%3E%3Cpath d='M9 3.75h6v3H9z'/%3E%3Cpath d='M9 5.25H5.75v15.5h12.5V5.25H15'/%3E%3C/svg%3E") center / contain no-repeat; mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.25' stroke-linecap='square'%3E%3Cpath d='M9 3.75h6v3H9z'/%3E%3Cpath d='M9 5.25H5.75v15.5h12.5V5.25H15'/%3E%3C/svg%3E") center / contain no-repeat; } .vf-quote-peek__empty .vf-quote-peek__title { margin-bottom: 6px; } .vf-quote-peek__text { font-size: 0.875rem; line-height: 1.5; color: var(--vf-text-2); } .vf-quote-peek__links { display: grid; gap: 8px; margin-top: 16px; } .vf-quote-peek__link { display: flex; align-items: center; justify-content: space-between; padding: 12px 14px; font-size: 0.875rem; font-weight: 600; color: var(--vf-graphite) !important; text-decoration: none !important; border: 1px solid var(--vf-border); border-radius: var(--vf-radius-ctl); animation: vf-peek-in 320ms var(--vf-ease-soft) both; animation-delay: calc(80ms + var(--i, 0) * 60ms); transition: border-color 160ms var(--vf-ease), color 160ms var(--vf-ease); } .vf-quote-peek__link::after { content: "\2192"; /* seta (codigo, para nao depender da codificacao do arquivo) */ color: var(--vf-red); transition: transform 240ms var(--vf-ease-soft); } .vf-quote-peek__link:hover { color: var(--vf-red) !important; border-color: var(--vf-red); } .vf-quote-peek__link:hover::after { transform: translateX(4px); } @keyframes vf-peek-in { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } } /* -------------------------------------------------------------------------- 7.3 Menu Catalogos (mega menu): destaques em vermelho Ao abrir, os blocos sobem em sequencia. No hover de cada catalogo, uma linha vermelha corre sobre a borda, o rotulo fica vermelho e a seta anda. Na caixa escura, os numeros dos passos acendem em sequencia. -------------------------------------------------------------------------- */ .e-n-menu-content.e-active .vf-mega > * { animation: vf-mega-rise 420ms var(--vf-ease-soft) both; } .e-n-menu-content.e-active .vf-mega > :nth-child(2) { animation-delay: 60ms; } .e-n-menu-content.e-active .vf-mega > :nth-child(3) { animation-delay: 120ms; } .elementor .vf-mega-brand { position: relative; transition: background-color 200ms var(--vf-ease); } .vf-mega-brand::before { /* linha vermelha sobre a borda superior */ content: ""; position: absolute; top: -2px; left: 0; right: 0; height: 2px; background: var(--vf-red); transform: scaleX(0); transform-origin: left center; transition: transform 480ms var(--vf-ease-soft); } .vf-mega-brand:is(:hover, :focus-visible)::before { transform: scaleX(1); } .vf-mega-brand .vf-label { transition: color 160ms var(--vf-ease); } .vf-mega-brand:is(:hover, :focus-visible) .vf-label { color: var(--vf-red); } .vf-mega-brand .vf-mega-brand__title { transition: transform 320ms var(--vf-ease-soft); } .vf-mega-brand:is(:hover, :focus-visible) .vf-mega-brand__title { transform: translateX(4px); } .vf-mega-brand .vf-mega-brand__cta { display: inline-block; width: fit-content; background: linear-gradient(var(--vf-red), var(--vf-red)) left bottom / 0 2px no-repeat; transition: color 160ms var(--vf-ease), background-size 320ms var(--vf-ease-soft), letter-spacing 320ms var(--vf-ease-soft); } .vf-mega-brand:is(:hover, :focus-visible) .vf-mega-brand__cta { color: var(--vf-red); background-size: 100% 2px; letter-spacing: 0.01em; } .e-n-menu-content.e-active .vf-mega-step__num { animation: vf-step-on 900ms var(--vf-ease) both; } .e-n-menu-content.e-active .vf-mega-step:nth-of-type(2) .vf-mega-step__num { animation-delay: 160ms; } .e-n-menu-content.e-active .vf-mega-step:nth-of-type(3) .vf-mega-step__num { animation-delay: 320ms; } .e-n-menu-content.e-active .vf-mega-step:nth-of-type(4) .vf-mega-step__num { animation-delay: 480ms; } .vf-mega-step { transition: border-color 200ms var(--vf-ease); } .vf-mega-step .vf-mega-step__num { display: inline-block; transition: transform 240ms var(--vf-ease-soft); } .vf-mega-step:hover .vf-mega-step__num { transform: translateX(3px); } @keyframes vf-mega-rise { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } } @keyframes vf-step-on { 0% { opacity: 0.25; text-shadow: none; } 50% { opacity: 1; text-shadow: 0 0 14px rgba(212, 20, 20, 0.7); } 100% { opacity: 1; text-shadow: none; } } @media (prefers-reduced-motion: reduce) { .vf-header-quote *, .vf-quote-peek, .vf-quote-peek *, .vf-mega *, .vf-mega-brand::before { animation: none !important; transition: none !important; } } /* -------------------------------------------------------------------------- 7.4 Painel de busca (lupa -> off-canvas com o JetSearch, classe vf-search) Campo grande, botao vermelho do padrao, resultados em lista compacta com rolagem propria. O PHP (secao 8) poe o cursor no campo ao abrir. O painel ocupa meia tela, com respiro acima do campo e um rotulo vermelho. -------------------------------------------------------------------------- */ .elementor .e-con.vf-search-panel { --vf-search-h: 64px; /* altura do campo e do botao Buscar */ --vf-search-label: 30px; /* rotulo acima do campo (18px + 12px de espaco) */ min-height: max(50vh, 380px); min-height: max(50dvh, 380px); padding-block: clamp(56px, 13vh, 136px) 40px; align-items: flex-start; border-bottom: 2px solid var(--vf-red); } /* Botao de fechar alinhado ao meio do campo */ .elementor .vf-search-panel > .vf-icon-btn { align-self: flex-start; margin-top: calc(var(--vf-search-label) + (var(--vf-search-h) - 48px) / 2); } .elementor .vf-search-panel .vf-search-panel__field { position: relative; flex: 1 1 0%; min-width: 0; margin-top: var(--vf-search-label); padding: 0; } .elementor .vf-search-panel .vf-search-panel__field::before { /* rotulo "Buscar nos catalogos" */ content: "Buscar nos cat\E1logos"; /* "a" em codigo, pelo mesmo motivo */ position: absolute; inset: calc(-1 * var(--vf-search-label)) auto auto 0; display: flex; align-items: center; width: auto; height: 18px; background: none; border: 0; font: 600 0.75rem/1 "Inter", sans-serif; letter-spacing: 0.08em; text-transform: uppercase; color: var(--vf-red); } /* Ao abrir: rotulo, campo e dica sobem em sequencia */ .e-off-canvas[aria-hidden="false"] .vf-search-panel .vf-search-panel__field::before, .e-off-canvas[aria-hidden="false"] .vf-search-panel .vf-search-panel__field > * { animation: vf-search-rise 460ms var(--vf-ease-soft) backwards; } .e-off-canvas[aria-hidden="false"] .vf-search-panel .vf-search-panel__field > :nth-child(1) { animation-delay: 70ms; } .e-off-canvas[aria-hidden="false"] .vf-search-panel .vf-search-panel__field > :nth-child(2) { animation-delay: 140ms; } @keyframes vf-search-rise { from { opacity: 0; transform: translateY(12px); } to { opacity: 1; transform: none; } } .elementor .vf-search-panel .vf-search { position: relative; z-index: 2; } /* resultados por cima da dica */ .vf-search-panel .vf-search, .vf-search-panel .vf-search .elementor-widget-container, .vf-search-panel .vf-search .jet-ajax-search { width: 100%; } .vf-search-panel .vf-search .jet-ajax-search__form { display: flex; align-items: stretch; gap: 0; height: var(--vf-search-h); margin: 0; padding: 0; border: 0; background: transparent; } .vf-search-panel .vf-search .jet-ajax-search__fields-holder, .vf-search-panel .vf-search .jet-ajax-search__field-wrapper { flex: 1 1 auto; min-width: 0; height: 100%; } /* Campo */ .vf-search-panel .vf-search input.jet-ajax-search__field { width: 100% !important; height: 100% !important; margin: 0 !important; padding: 0 20px 0 56px !important; font: 400 1.25rem/1 "Inter", sans-serif !important; /* 20px */ color: var(--vf-graphite) !important; background: #FFFFFF url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%231C1C1E' stroke-width='2' stroke-linecap='square'%3E%3Ccircle cx='11' cy='11' r='6.5'/%3E%3Cpath d='M16 16l4.5 4.5'/%3E%3C/svg%3E") 20px center / 22px no-repeat !important; border: 1px solid var(--vf-border-strong) !important; border-right: 0 !important; border-radius: var(--vf-radius-ctl) 0 0 var(--vf-radius-ctl) !important; box-shadow: none !important; -webkit-appearance: none; appearance: none; } .vf-search-panel .vf-search input.jet-ajax-search__field::placeholder { color: var(--vf-muted) !important; opacity: 1; } .vf-search-panel .vf-search input.jet-ajax-search__field:focus { outline: none; border-color: var(--vf-graphite) !important; box-shadow: inset 0 0 0 1px var(--vf-graphite) !important; } .vf-search-panel .vf-search input.jet-ajax-search__field::-webkit-search-cancel-button { /* "limpar" vira um x cinza (era uma lupa) */ -webkit-appearance: none; width: 20px; height: 20px; background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%236E6E75' stroke-width='2' stroke-linecap='square'%3E%3Cpath d='M6 6l12 12M18 6L6 18'/%3E%3C/svg%3E") no-repeat 50% 50% / 16px !important; cursor: pointer; } /* Icone de "limpar" do JetSearch: o campo ja tem a lupa a esquerda */ .vf-search-panel .vf-search :is(.jet-ajax-search__field-clear, .jet-ajax-search__clear, .jet-ajax-search__field-icon) { display: none !important; } /* Botao Buscar */ .vf-search-panel .vf-search button.jet-ajax-search__submit { display: inline-flex !important; align-items: center; justify-content: center; gap: 8px; flex: 0 0 auto; height: 100% !important; margin: 0 !important; padding: 0 32px !important; font: 600 1rem/1 "Inter", sans-serif !important; color: #FFFFFF !important; background: var(--vf-red) !important; border: 0 !important; border-radius: 0 var(--vf-radius-ctl) var(--vf-radius-ctl) 0 !important; box-shadow: none !important; cursor: pointer; transition: background-color 160ms var(--vf-ease); } .vf-search-panel .vf-search button.jet-ajax-search__submit:hover { background: var(--vf-red-hover) !important; } .vf-search-panel .vf-search button.jet-ajax-search__submit:active { background: var(--vf-red-active) !important; } .vf-search-panel .vf-search button.jet-ajax-search__submit:focus-visible { outline: none; box-shadow: 0 0 0 2px #FFFFFF, 0 0 0 5px var(--vf-focus) !important; } .vf-search-panel .vf-search .jet-ajax-search__submit-icon { display: none; } .vf-search-panel .vf-search .jet-ajax-search__submit-icon svg { width: 18px; height: 18px; fill: currentColor; } /* Resultados */ .vf-search-panel .vf-search .jet-ajax-search__results-area { z-index: 10; /* fica sobre a dica abaixo do campo */ margin-top: 8px !important; background: #FFFFFF; border: 1px solid var(--vf-border) !important; border-radius: var(--vf-radius); box-shadow: 0 24px 48px -24px rgba(22, 22, 22, 0.35) !important; overflow: hidden; } .vf-search-panel .vf-search .jet-ajax-search__results-header { padding: 12px 16px !important; border-bottom: 1px solid var(--vf-divider); } .vf-search-panel .vf-search .jet-ajax-search__results-count { all: unset; font: 600 0.75rem/1.2 "Inter", sans-serif; letter-spacing: 0.08em; text-transform: uppercase; color: var(--vf-muted); cursor: pointer; } .vf-search-panel .vf-search .jet-ajax-search__results-count span { color: var(--vf-red); } .vf-search-panel .vf-search .jet-ajax-search__results-list { height: auto !important; /* o JetSearch fixa uma altura para o carrossel */ max-height: min(56vh, 480px); overflow-y: auto !important; overscroll-behavior: contain; } .vf-search-panel .vf-search .jet-ajax-search__results-list-inner { transform: none !important; } .vf-search-panel .vf-search .jet-ajax-search__results-slide { width: 100% !important; } .vf-search-panel .vf-search .jet-ajax-search__results-item { margin: 0 !important; padding: 0 !important; border-bottom: 1px solid var(--vf-divider); } .vf-search-panel .vf-search .jet-ajax-search__results-item:last-child { border-bottom: 0; } .vf-search-panel .vf-search .jet-ajax-search__item-link { display: flex !important; align-items: center; gap: 16px; padding: 12px 16px !important; text-decoration: none !important; background: #FFFFFF; transition: background-color 160ms var(--vf-ease); } .vf-search-panel .vf-search .jet-ajax-search__item-link:hover, .vf-search-panel .vf-search .jet-ajax-search__item-link:focus-visible { background: var(--vf-canvas); outline: none; } .vf-search-panel .vf-search .jet-ajax-search__item-thumbnail { flex: 0 0 56px; width: 56px !important; height: 56px !important; margin: 0 !important; padding: 6px; background: var(--vf-canvas); border: 1px solid var(--vf-divider); border-radius: var(--vf-radius-ctl); } .vf-search-panel .vf-search .jet-ajax-search__item-thumbnail img { width: 100% !important; height: 100% !important; object-fit: contain; mix-blend-mode: multiply; } .vf-search-panel .vf-search .jet-ajax-search__item-content-wrapper { flex: 1 1 auto; min-width: 0; } .vf-search-panel .vf-search .jet-ajax-search__item-title { margin: 0 !important; font: 600 0.9375rem/1.35 "Inter", sans-serif !important; /* 15px */ color: var(--vf-graphite) !important; } .vf-search-panel .vf-search .jet-ajax-search__item-title mark, .vf-search-panel .vf-search .jet-search-highlight { color: var(--vf-red) !important; background: transparent !important; font-weight: 700; } .vf-search-panel .vf-search .jet-ajax-search__item-content { display: none; } /* resumo vazio */ .vf-search-panel .vf-search .jet-ajax-search__results-footer { padding: 12px 16px !important; border-top: 1px solid var(--vf-divider); background: #FFFFFF; } .vf-search-panel .vf-search .jet-ajax-search__full-results { all: unset; font: 600 0.875rem/1.2 "Inter", sans-serif; color: var(--vf-red); cursor: pointer; } .vf-search-panel .vf-search .jet-ajax-search__full-results:hover { color: var(--vf-red-hover); text-decoration: underline; } .vf-search-panel .vf-search .jet-ajax-search__message { padding: 20px 16px !important; font: 400 0.9375rem/1.5 "Inter", sans-serif !important; color: var(--vf-text-2) !important; } /* Notebook: um pouco menor */ @media (max-width: 1366px) { .elementor .e-con.vf-search-panel { --vf-search-h: 56px; padding-block: clamp(40px, 9vh, 80px) 32px; } .vf-search-panel .vf-search input.jet-ajax-search__field { font-size: 1.125rem !important; } } /* Tablet e celular: campo 52px, botao so com a lupa */ @media (max-width: 1024px) { .elementor .e-con.vf-search-panel { --vf-search-h: 52px; min-height: max(50dvh, 320px); padding-block: 48px 24px; gap: 12px; } .vf-search-panel .vf-search input.jet-ajax-search__field { padding: 0 12px 0 44px !important; font-size: 1rem !important; background-position: 14px center !important; background-size: 20px !important; } .vf-search-panel .vf-search button.jet-ajax-search__submit { width: 52px; padding: 0 !important; } .vf-search-panel .vf-search .jet-ajax-search__submit-label { display: none; } .vf-search-panel .vf-search .jet-ajax-search__submit-icon { display: inline-flex; } .vf-search-panel .vf-search .jet-ajax-search__results-list { max-height: 60vh; } .vf-search-panel .vf-small { display: none; } } @media (max-width: 767px) { .elementor .e-con.vf-search-panel { padding-block: 32px 20px; } } @media (prefers-reduced-motion: reduce) { .vf-search-panel .vf-search-panel__field::before, .vf-search-panel .vf-search-panel__field > * { animation: none !important; } } /* -------------------------------------------------------------------------- 7.5 Menu do desktop (vf-megamenu): sublinhado vermelho e pagina escurecida No hover, no foco e na pagina atual, uma linha vermelha corre da esquerda sob o nome do item. Com o painel de Catalogos aberto, a pagina escurece. -------------------------------------------------------------------------- */ .vf-megamenu .e-n-menu-title-text { position: relative; } .vf-megamenu .e-n-menu-title-text::after { content: ""; position: absolute; left: 0; right: 0; bottom: -8px; height: 2px; background: var(--vf-red); transform: scaleX(0); transform-origin: left center; transition: transform 450ms var(--vf-ease-soft); } .vf-megamenu .e-n-menu-title:is(:hover, :focus-within, .is-current, .e-current) .e-n-menu-title-text::after, .vf-megamenu .e-n-menu-item:has(> .e-n-menu-content.e-active) .e-n-menu-title-text::after { transform: scaleX(1); } .vf-megamenu .e-n-menu-title:is(:hover, .is-current, .e-current) .e-n-menu-title-text { color: var(--vf-graphite); } .vf-megamenu .e-n-menu-dropdown-icon { transition: transform 450ms var(--vf-ease-soft); } .vf-megamenu .e-n-menu-item:has(> .e-n-menu-content.e-active) .e-n-menu-dropdown-icon { transform: rotate(180deg); } .vf-header::after { /* veu sobre a pagina com o painel aberto */ content: ""; position: fixed; left: 0; right: 0; bottom: 0; top: var(--vf-header-h); z-index: -1; background: rgba(22, 22, 22, 0.42); opacity: 0; visibility: hidden; pointer-events: none; transition: opacity 300ms var(--vf-ease), visibility 0s 300ms; } body:has(.vf-megamenu .e-n-menu-content.e-active) .vf-header::after { opacity: 1; visibility: visible; transition: opacity 300ms var(--vf-ease); } /* -------------------------------------------------------------------------- 7.6 Header compacto ao rolar (html.vf-scrolled, depois de 80px) A faixa preta sai por cima e a barra principal baixa para 64px, branca a 92% com desfoque. A margem compensa a diferenca: o conteudo da pagina nao pula. -------------------------------------------------------------------------- */ .elementor-location-header { transition: top 350ms var(--vf-ease), margin-bottom 350ms var(--vf-ease); } .elementor .vf-header .vf-mainbar { transition: height 350ms var(--vf-ease), min-height 350ms var(--vf-ease), background-color 350ms var(--vf-ease); } .elementor .vf-header .vf-logo { transition: transform 350ms var(--vf-ease); transform-origin: left center; } @media (min-width: 1025px) { html.vf-scrolled { --vf-header-h: 72px; } html.vf-scrolled .elementor-location-header { top: -44px; margin-bottom: 24px; } html.vf-scrolled .elementor .vf-header .vf-mainbar { height: 64px; min-height: 64px; background-color: rgba(255, 255, 255, 0.92); -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px); } html.vf-scrolled .elementor .vf-header .vf-logo { transform: scale(0.86); } } @media (min-width: 1025px) and (max-width: 1366px) { html.vf-scrolled .elementor-location-header { margin-bottom: 16px; } } @media (max-width: 1024px) { html.vf-scrolled { --vf-header-h: 70px; } html.vf-scrolled .elementor-location-header { top: -36px; } } /* -------------------------------------------------------------------------- 7.7 Regua (vf-ruler): tracinhos a cada 8px, maior a cada 64px, e o preenchimento vermelho (vf-ruler__fill) acompanha a rolagem da pagina. -------------------------------------------------------------------------- */ .elementor .vf-ruler { background-color: #FFFFFF; background-image: repeating-linear-gradient(90deg, var(--vf-border) 0 1px, transparent 1px 8px), repeating-linear-gradient(90deg, var(--vf-border-strong) 0 1px, transparent 1px 64px); background-size: 100% 3px, 100% 6px; background-repeat: no-repeat; background-position: 0 100%, 0 100%; } .elementor .e-con.vf-ruler__fill { width: 100%; max-width: none; transform: scaleX(var(--vf-progress, 0)); transform-origin: left center; will-change: transform; } /* -------------------------------------------------------------------------- 7.8 Horario ao vivo (.vf-status): o PHP poe is-live e, no horario comercial, is-open (bolinha verde pulsando + "Atendendo agora - ate 17h30"). -------------------------------------------------------------------------- */ .vf-status.is-live { display: inline-flex; align-items: center; gap: 8px; } .vf-status.is-live::before { content: ""; flex: none; width: 7px; height: 7px; border-radius: 50%; background: #8E8E93; box-shadow: 0 0 0 3px rgba(142, 142, 147, 0.2); } .vf-status.is-open::before { background: #3CCB7F; animation: vf-status-pulse 2.4s var(--vf-ease-soft) infinite; } .vf-topbar .vf-status.is-open { color: #FFFFFF; } @keyframes vf-status-pulse { 0% { box-shadow: 0 0 0 0 rgba(60, 203, 127, 0.55); } 70%, 100% { box-shadow: 0 0 0 7px rgba(60, 203, 127, 0); } } /* -------------------------------------------------------------------------- 7.9 Gaveta do celular: os itens entram um depois do outro ao abrir -------------------------------------------------------------------------- */ .e-off-canvas[aria-hidden="false"] .vf-drawer__nav > *, .e-off-canvas[aria-hidden="false"] .vf-drawer__foot { animation: vf-drawer-in 480ms var(--vf-ease-soft) backwards; } .e-off-canvas[aria-hidden="false"] .vf-drawer__nav > :nth-child(1) { animation-delay: 120ms; } .e-off-canvas[aria-hidden="false"] .vf-drawer__nav > :nth-child(2) { animation-delay: 165ms; } .e-off-canvas[aria-hidden="false"] .vf-drawer__nav > :nth-child(3) { animation-delay: 210ms; } .e-off-canvas[aria-hidden="false"] .vf-drawer__nav > :nth-child(4) { animation-delay: 255ms; } .e-off-canvas[aria-hidden="false"] .vf-drawer__nav > :nth-child(5) { animation-delay: 300ms; } .e-off-canvas[aria-hidden="false"] .vf-drawer__nav > :nth-child(6) { animation-delay: 345ms; } .e-off-canvas[aria-hidden="false"] .vf-drawer__foot { animation-delay: 400ms; } @keyframes vf-drawer-in { from { opacity: 0; transform: translateX(24px); } to { opacity: 1; transform: none; } } @media (prefers-reduced-motion: reduce) { .vf-megamenu .e-n-menu-title-text::after, .vf-header::after, .elementor-location-header, .elementor .vf-header .vf-mainbar, .elementor .vf-header .vf-logo { transition: none !important; } .vf-status.is-open::before, .e-off-canvas .vf-drawer__nav > *, .e-off-canvas .vf-drawer__foot { animation: none !important; } } /* ========================================================================== 8. Foco: anel azul so para quem navega pelo teclado (acessibilidade) No clique, no toque e no hover o anel nao aparece. Com Tab ele aparece normalmente (estado "focus" das classes globais e regras :focus-visible). Campos de texto: borda grafite ao clicar; anel azul so com Tab (o PHP, secao 8, poe a classe vf-kbd no enquanto o Tab e usado). ========================================================================== */ html :focus:not(:focus-visible) { outline: none; } html .elementor :is(.vf-btn, .vf-social, .vf-icon-btn, .vf-mega-brand):focus:not(:focus-visible) { outline: none !important; box-shadow: none !important; } /* Campos de texto com teclado: anel azul */ html.vf-kbd #yith-ywraq-default-form :is(input, select, textarea):focus, html.vf-kbd #yith-ywraq-default-form .select2-container--focus .select2-selection, html.vf-kbd .vf-search-panel .vf-search input.jet-ajax-search__field:focus, html.vf-kbd body .e-con:not(.vf-section):has(> [class*="elementor-widget-jet-smart-filters"]:not(.elementor-widget-jet-smart-filters-pagination)) :is(.jet-filter-items-search__input, .jet-search-filter__input):focus { outline: none !important; border-color: var(--vf-focus) !important; box-shadow: 0 0 0 3px rgba(0, 95, 204, 0.24) !important; } html.vf-kbd .ywraq-wrapper #yith-ywrq-table-list .quantity:focus-within { border-color: var(--vf-focus); box-shadow: 0 0 0 3px rgba(0, 95, 204, 0.24); } /* Campos de filtro dos catalogos (o CSS das paginas de catalogo usa azul): grafite ao clicar */ html body .e-con:not(.vf-section):has(> [class*="elementor-widget-jet-smart-filters"]:not(.elementor-widget-jet-smart-filters-pagination)) :is(.jet-filter-items-search__input, .jet-search-filter__input):focus { outline: none; border-color: var(--vf-graphite) !important; box-shadow: inset 0 0 0 1px var(--vf-graphite) !important; } /* ========================================================================== 9. Movimento das paginas Classes aplicadas no Elementor (Avancado > Classes CSS, ou classe global). O PHP (secao 9) poe is-in quando o elemento entra na tela. So esconde o que vai animar quando o tem vf-js; se o script nao rodar, tudo aparece sozinho em 3,5 s. ========================================================================== */ /* 9.1 Entrada ao rolar: vf-reveal (o proprio elemento) e vf-reveal-group (os filhos) */ html.vf-js .vf-reveal:not(.is-in), html.vf-js .vf-reveal-group:not(.is-in) > * { opacity: 0; animation: vf-show 0s 3.5s forwards; } .vf-reveal.is-in, .vf-reveal-group.is-in > * { animation: vf-rise 700ms var(--vf-ease-soft) backwards; animation-delay: calc(var(--i, 0) * 70ms); } @keyframes vf-rise { from { opacity: 0; transform: translateY(16px); } to { opacity: 1; transform: none; } } @keyframes vf-show { to { opacity: 1; } } /* 9.2 Titulo palavra por palavra (vf-title-reveal) */ html.vf-js .vf-title-reveal:not([data-vf-split]) { opacity: 0; animation: vf-show 0s 3.5s forwards; } .vf-title-reveal .vf-w { display: inline-block; overflow: hidden; vertical-align: top; /* folga em volta da palavra: com o espacamento negativo entre letras, a ultima letra passava da caixa e era cortada (o "corte no fim das palavras") */ padding: 0.02em 0.12em 0.14em 0.06em; margin: -0.02em -0.12em -0.14em -0.06em; } .vf-title-reveal .vf-w > span { display: inline-block; } html.vf-js .vf-title-reveal:not(.is-in) .vf-w > span { transform: translateY(110%); animation: vf-word-show 0s 3.5s forwards; } .vf-title-reveal.is-in .vf-w > span { animation: vf-word 800ms var(--vf-ease-soft) backwards; animation-delay: calc(var(--i, 0) * 55ms); } @keyframes vf-word { from { transform: translateY(110%); } to { transform: none; } } @keyframes vf-word-show { to { transform: none; } } /* 9.3 Revelacao de imagem (vf-clip) */ html.vf-js .vf-clip:not(.is-in) { clip-path: inset(100% 0 0 0); animation: vf-clip-show 0s 3.5s forwards; } .vf-clip.is-in { animation: vf-clip 1000ms var(--vf-ease-soft) backwards; } @keyframes vf-clip { from { clip-path: inset(100% 0 0 0); } to { clip-path: inset(0 0 0 0); } } @keyframes vf-clip-show { to { clip-path: inset(0 0 0 0); } } /* 9.4 Numero que conta (vf-count): so numeros tabulares, para a largura nao pular */ .vf-count { font-variant-numeric: tabular-nums; } /* 9.5 Faixa que corre (vf-marquee). Velocidade constante: aqui a curva linear e proposital */ .elementor .vf-marquee { overflow: hidden; flex-wrap: nowrap; } .vf-marquee__track { display: flex; flex: none; width: max-content; animation: vf-marquee var(--vf-marquee-dur, 30s) linear infinite; } .vf-marquee__group { display: flex; flex: none; align-items: center; } .vf-marquee:hover .vf-marquee__track { animation-play-state: paused; } @keyframes vf-marquee { to { transform: translateX(-50%); } } /* 9.6 Tubulacao do passo a passo (vf-pipeline) Estrutura no Elementor: Flexbox/Grade vf-pipeline > 4x vf-pipeline__step (cada um com o Flexbox vf-pipeline__valve > Div vf-valve vf-valve--lg, e os textos). A linha cinza e o vermelho que corre sao criados pelo PHP, do centro da primeira valvula ao centro da ultima: na horizontal ou, com os passos empilhados, na vertical. */ .elementor .vf-pipeline { position: relative; } .vf-pipeline__track { /* posicao e tamanho calculados pelo PHP */ position: absolute; z-index: 0; border-radius: 3px; background: #EDEDF0; overflow: hidden; pointer-events: none; } .vf-pipeline__fill { position: absolute; inset: 0; background: var(--vf-red); transform: scaleX(0); transform-origin: left center; } .vf-pipeline.is-in .vf-pipeline__fill { animation: vf-fill-x 1800ms var(--vf-ease-soft) 200ms forwards; } .elementor .vf-pipeline__step { position: relative; z-index: 1; } .elementor .vf-pipeline__valve { width: 68px; height: 68px; min-width: 68px; border-radius: 6px; background: #FFFFFF; box-shadow: inset 0 0 0 2px var(--vf-border); display: flex; align-items: center; justify-content: center; } .vf-pipeline__valve .vf-valve { background: #B4B4B9; } .vf-pipeline.is-in .vf-pipeline__valve { animation: vf-valve-box 500ms var(--vf-ease) forwards; animation-delay: calc(300ms + var(--i, 0) * 420ms); } .vf-pipeline.is-in .vf-pipeline__valve .vf-valve { animation: vf-valve-open 700ms var(--vf-ease-soft) forwards; animation-delay: calc(300ms + var(--i, 0) * 420ms); } @keyframes vf-fill-x { to { transform: scaleX(1); } } @keyframes vf-fill-y { to { transform: scaleY(1); } } @keyframes vf-valve-box { to { background: var(--vf-red); box-shadow: inset 0 0 0 2px var(--vf-red); } } @keyframes vf-valve-open { to { background: #FFFFFF; transform: rotate(90deg); } } /* Vertical: quando os passos ficam um embaixo do outro (celular, ou Grade de 1 coluna) */ .vf-pipeline__track.is-vertical .vf-pipeline__fill { transform: scaleY(0); transform-origin: center top; } .vf-pipeline.is-in .vf-pipeline__track.is-vertical .vf-pipeline__fill { animation-name: vf-fill-y; } /* 9.7 Lista com foto que segue o mouse (vf-hover-list) */ .elementor .vf-hover-list__row { position: relative; } .elementor .vf-hover-list__name { transition: transform 500ms var(--vf-ease-soft), color 200ms var(--vf-ease); } .elementor .vf-hover-list__img { display: none; } @media (hover: hover) and (pointer: fine) and (min-width: 1025px) { .elementor .vf-hover-list__row:hover .vf-hover-list__name { transform: translateX(28px); color: var(--vf-red); } .elementor .vf-hover-list__img { display: block; position: fixed; left: 0; top: 0; z-index: 30; width: 240px; height: 170px; border-radius: 8px; overflow: hidden; pointer-events: none; opacity: 0; box-shadow: 0 30px 60px -20px rgba(22, 22, 22, 0.45); transform: translate3d(calc(var(--x, -999px) + 24px), calc(var(--y, -999px) - 85px), 0) rotate(-3deg) scale(0.92); transition: opacity 250ms var(--vf-ease), scale 400ms var(--vf-ease-soft); } .elementor .vf-hover-list__row:hover .vf-hover-list__img { opacity: 1; scale: 1.08; } .vf-hover-list__img img { width: 100%; height: 100%; object-fit: cover; } } /* 9.8 Paineis que crescem no hover (vf-split) e sanfona de setores (vf-split--accordion) */ @media (hover: hover) and (min-width: 1025px) { .elementor .vf-split > * { flex: 1 1 0% !important; transition: flex-grow 700ms var(--vf-ease-soft); min-width: 0; } .elementor .vf-split > :is(:hover, :focus-within) { flex-grow: 1.35 !important; } .elementor .vf-split--accordion > :first-child { flex-grow: 2.4 !important; } .elementor .vf-split--accordion:hover > :first-child:not(:hover) { flex-grow: 1 !important; } .elementor .vf-split--accordion > :is(:hover, :focus-within) { flex-grow: 2.4 !important; } .elementor .vf-split--accordion .vf-split__more { opacity: 0; transition: opacity 300ms var(--vf-ease); } .elementor .vf-split--accordion > :first-child .vf-split__more, .elementor .vf-split--accordion > :hover .vf-split__more { opacity: 1; transition-delay: 200ms; } .elementor .vf-split--accordion:hover > :first-child:not(:hover) .vf-split__more { opacity: 0; transition-delay: 0s; } } /* 9.9 Foto que aproxima no hover do card (vf-zoom no card; a imagem precisa de um Flexbox com "Overflow: oculto") */ .vf-zoom img { transition: transform 800ms var(--vf-ease-soft); } @media (hover: hover) { .vf-zoom:hover img, .vf-split > :hover img { transform: scale(1.05); } } /* ========================================================================== 10. Componentes de pagina ========================================================================== */ /* 10.1 Simbolo da valvula (Div vazio com a classe vf-valve) */ .elementor .vf-valve { display: block; padding: 0; flex: none; width: 14px; height: 10px; min-width: 14px; background: var(--vf-red); clip-path: polygon(0 0, 50% 50%, 100% 0, 100% 100%, 50% 50%, 0 100%); } .elementor .vf-valve--lg { width: 30px; height: 22px; min-width: 30px; } .elementor .vf-valve--white { background: #FFFFFF; } /* 10.2 Rotulo de secao "01 - Titulo" (Flexbox vf-eyebrow > Paragrafo vf-eyebrow__num + Div vf-valve + Paragrafo) */ .elementor .vf-eyebrow { display: flex; align-items: center; gap: 12px; font: 600 0.75rem/1.2 "Inter", sans-serif; letter-spacing: 0.14em; text-transform: uppercase; color: var(--vf-text-2); } .elementor .vf-eyebrow > * { margin: 0; font: inherit; letter-spacing: inherit; color: inherit; } .elementor .vf-eyebrow .vf-eyebrow__num { color: var(--vf-red); } .elementor .vf-eyebrow--on-dark { color: #A1A1A6; } /* 10.2c Componentes sem o recheio padrao do Elementor 4 (Flexbox, Grade e Div atomicos nascem com 10px de preenchimento). O preenchimento local do painel continua valendo por cima disto. */ .elementor :is(.vf-eyebrow, .vf-marquee, .vf-pipeline, .vf-pipeline__step, .vf-hover-list, .vf-split, .vf-reveal-group) { padding: 0; } .elementor .vf-eyebrow { flex-wrap: nowrap; } .elementor .vf-eyebrow > :last-child { min-width: 0; } /* 10.2d Rotulo sobre fundo vermelho (Home 08): numero, valvula e texto em branco */ .elementor .vf-eyebrow--on-accent { color: rgba(255, 255, 255, 0.85); } .elementor .vf-eyebrow--on-accent .vf-eyebrow__num { color: #FFFFFF; } .elementor .vf-eyebrow--on-accent .vf-valve { background: #FFFFFF; } /* 10.2f Elementos atomicos: o CSS base do Elementor 4 carrega DEPOIS deste e devolvia 10px de preenchimento e largura minima de 30px as valvulas (ficavam com o dobro do tamanho) e mostrava as fotos da lista 04 no celular. Estas regras ganham dele. */ :root .elementor .e-div-block-base.vf-valve { padding: 0; min-width: 14px; } :root .elementor .e-div-block-base.vf-valve--lg { min-width: 30px; } :root .elementor .e-flexbox-base.vf-pipeline__valve { padding: 0; } :root .elementor .e-image-base.vf-hover-list__img { display: none; } @media (hover: hover) and (pointer: fine) and (min-width: 1025px) { :root .elementor .e-image-base.vf-hover-list__img { display: block; } } /* 10.2e Rede de seguranca: imagem atomica nunca passa da largura do pai (sem isso, uma Imagem sem largura definida estoura a tela no tamanho original) */ .elementor .e-image-base { max-width: 100%; } /* 10.2b Destaque em vermelho dentro de titulos e paragrafos (classe vf-accent) No Titulo/Paragrafo atomico, marque as palavras em negrito; com vf-accent elas ficam vermelhas, no mesmo peso do texto. Funciona junto com vf-title-reveal. */ .elementor .vf-accent :is(strong, b) { color: var(--vf-red); font-weight: inherit; } /* 10.3 Lista com o simbolo da valvula (no Editor de texto: classe vf-list-valve) */ .vf-list-valve ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 0; } .vf-list-valve li { display: flex; align-items: baseline; gap: 16px; padding: 18px 0; border-top: 1px solid var(--vf-divider); } .vf-list-valve li:last-child { border-bottom: 1px solid var(--vf-divider); } .vf-list-valve li::before { content: ""; flex: none; width: 14px; height: 10px; background: var(--vf-red); clip-path: polygon(0 0, 50% 50%, 100% 0, 100% 100%, 50% 50%, 0 100%); transform: translateY(-1px); } /* 10.4 Perguntas frequentes: classe vf-faq no widget Acordeao. Acordeao do Elementor 4 (atomico): este CSS desenha tudo - linhas entre as perguntas, tipografia, o "+" (que gira e vira "x") e a resposta subindo ao abrir. No painel, so escreva as perguntas e as respostas; nao precisa de icone nem de estilo. Acordeao classico (Pro): continua funcionando com as mesmas regras de giro. */ .elementor .vf-faq.e-accordion-base { gap: 0; padding: 0; border-top: 1px solid #D9D9DD; } .elementor .vf-faq .e-accordion-item-base { border-bottom: 1px solid #D9D9DD; } .elementor .vf-faq .e-accordion-item-header-base { padding: 24px 0; gap: 24px; list-style: none; cursor: pointer; } .elementor .vf-faq .e-accordion-item-header-base::-webkit-details-marker { display: none; } .elementor .vf-faq .e-accordion-item-title-base, .elementor .vf-faq .e-accordion-item-title-base :is(.e-paragraph-base, .e-heading-base, p, span) { margin: 0; padding: 0; font-family: Inter, sans-serif; font-size: 20px; font-weight: 600; line-height: 1.3; letter-spacing: -0.01em; color: #161616; transition: color 160ms var(--vf-ease); } .elementor .vf-faq .e-accordion-item-header-base:hover .e-accordion-item-title-base, .elementor .vf-faq .e-accordion-item-header-base:hover .e-accordion-item-title-base :is(.e-paragraph-base, p, span), .elementor .vf-faq details[open] .e-accordion-item-title-base, .elementor .vf-faq details[open] .e-accordion-item-title-base :is(.e-paragraph-base, p, span) { color: var(--vf-red); } .elementor .vf-faq .e-accordion-item-icon-base { position: relative; flex: 0 0 32px; width: 32px; height: 32px; padding: 0; border: 1px solid #D9D9DD; border-radius: 4px; transition: transform 400ms var(--vf-ease-soft), background-color 200ms var(--vf-ease), border-color 200ms var(--vf-ease); } .elementor .vf-faq .e-accordion-item-icon-base > * { display: none; } .elementor .vf-faq .e-accordion-item-icon-base::before, .elementor .vf-faq .e-accordion-item-icon-base::after { content: ""; position: absolute; left: 50%; top: 50%; width: 12px; height: 2px; margin: -1px 0 0 -6px; background: #161616; transition: background-color 200ms var(--vf-ease); } .elementor .vf-faq .e-accordion-item-icon-base::after { transform: rotate(90deg); } .elementor .vf-faq .e-accordion-item-header-base:hover .e-accordion-item-icon-base { border-color: #161616; } .elementor .vf-faq details[open] .e-accordion-item-icon-base { transform: rotate(45deg); background: var(--vf-red); border-color: var(--vf-red); } .elementor .vf-faq details[open] .e-accordion-item-icon-base::before, .elementor .vf-faq details[open] .e-accordion-item-icon-base::after { background: #FFFFFF; } .elementor .vf-faq .e-accordion-item-content-base { padding: 0 56px 28px 0; font-family: Inter, sans-serif; font-size: 16px; line-height: 1.6; color: #585858; } .elementor .vf-faq .e-accordion-item-content-base :is(.e-paragraph-base, p) { max-width: 68ch; margin: 0; font-size: inherit; line-height: inherit; color: inherit; } .elementor .vf-faq details[open] > .e-accordion-item-content-base { animation: vf-rise 400ms var(--vf-ease-soft) backwards; } @media (max-width: 767px) { .elementor .vf-faq .e-accordion-item-title-base, .elementor .vf-faq .e-accordion-item-title-base :is(.e-paragraph-base, .e-heading-base, p, span) { font-size: 18px; } .elementor .vf-faq .e-accordion-item-header-base { padding: 20px 0; gap: 16px; } .elementor .vf-faq .e-accordion-item-content-base { padding: 0 0 24px; } } /* Acordeao classico (Pro) */ .vf-faq .e-n-accordion-item-title-icon { transition: transform 400ms var(--vf-ease-soft); } .vf-faq details[open] .e-n-accordion-item-title-icon { transform: rotate(45deg); } .vf-faq details[open] > [role="region"] { animation: vf-rise 400ms var(--vf-ease-soft) backwards; } /* 10.5 Linha de fluxo (criada pelo PHP, telas a partir de 1280px) */ .vf-flow { position: fixed; left: 22px; top: var(--vf-header-h); bottom: 0; z-index: 40; width: 1px; background: rgba(212, 20, 20, 0.18); pointer-events: none; transition: top 350ms var(--vf-ease); } .vf-flow::after { content: ""; position: absolute; inset: 0; background: var(--vf-red); transform: scaleY(var(--vf-progress, 0)); transform-origin: center top; } @media (max-width: 1279px) { .vf-flow { display: none; } } /* 10.6 Barra de leitura dos posts */ .vf-read-progress { position: fixed; left: 0; right: 0; top: var(--vf-header-h); z-index: 90; height: 3px; background: var(--vf-divider); pointer-events: none; transition: top 350ms var(--vf-ease); } .vf-read-progress::after { content: ""; position: absolute; inset: 0; background: var(--vf-red); transform: scaleX(var(--vf-progress, 0)); transform-origin: left center; } /* 10.7 Mapa leve [vf_map]: endereco desenhado; o Google Maps so carrega no clique */ /* O widget Shortcode dentro de um Flexbox (linha) ficava com largura 0: o mapa sumia */ /* Zoom da foto do produto (WooCommerce) nao pode vazar a tela no celular */ .woocommerce-product-gallery, .woocommerce-product-gallery__image { overflow: hidden; } :has(> img.zoomImg) { overflow: hidden; } /* Carrossel de relacionados: os cards fora da tela nao criam rolagem lateral */ .jet-listing-grid__slider { overflow-x: clip; } .elementor-widget:has(.vf-map) { width: 100%; flex: 1 1 100%; align-self: stretch; } .vf-map { position: relative; height: var(--vf-map-h, 520px); overflow: hidden; font-family: "Inter", sans-serif; background-color: #E4E4E7; background-image: linear-gradient(#D9D9DD 1px, transparent 1px), linear-gradient(90deg, #D9D9DD 1px, transparent 1px); background-size: 64px 64px; } .vf-map__pin { position: absolute; left: 50%; top: 44%; display: flex; flex-direction: column; align-items: center; transform: translate(-50%, -100%); } .vf-map__label { padding: 10px 14px; border-radius: var(--vf-radius); background: #161616; color: #FFFFFF; font-size: 14px; font-weight: 600; white-space: nowrap; } .vf-map__stem { width: 2px; height: 28px; background: var(--vf-red); } .vf-map__dot { width: 14px; height: 14px; border-radius: 50%; background: var(--vf-red); box-shadow: 0 0 0 8px rgba(212, 20, 20, 0.18); } .vf-map__actions { position: absolute; left: 16px; right: 16px; bottom: 32px; display: flex; flex-wrap: wrap; justify-content: center; gap: 12px; } .vf-map__load, .vf-map__route { display: inline-flex; align-items: center; gap: 8px; height: 52px; padding: 0 24px; border-radius: var(--vf-radius); font: 600 15px/1 "Inter", sans-serif; text-decoration: none; cursor: pointer; transition: background-color 160ms var(--vf-ease), color 160ms var(--vf-ease); } .vf-map .vf-map__load { border: 0; background: #161616; color: #FFFFFF; } .vf-map .vf-map__load:is(:hover, :focus) { background: var(--vf-red); color: #FFFFFF; } .vf-map .vf-map__route { border: 1px solid #161616; background: #FFFFFF; color: #161616; } .vf-map .vf-map__route:hover { background: #161616; color: #FFFFFF; } .vf-map__address { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; } .vf-map iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; } .vf-map.is-loaded :is(.vf-map__pin, .vf-map__actions) { display: none; } /* 10.8 Migalhas (Rank Math): widget Shortcode [rank_math_breadcrumb] com a classe vf-crumb */ .vf-crumb .rank-math-breadcrumb p { margin: 0; display: flex; flex-wrap: wrap; gap: 4px 10px; font: 400 0.8125rem/1.4 "Inter", sans-serif; color: var(--vf-muted); } .vf-crumb .rank-math-breadcrumb a { color: var(--vf-muted); text-decoration: none; transition: color 160ms var(--vf-ease); } .vf-crumb .rank-math-breadcrumb a:hover { color: var(--vf-red); } .vf-crumb .rank-math-breadcrumb .last { color: var(--vf-graphite); } .vf-crumb--on-dark .rank-math-breadcrumb p, .vf-crumb--on-dark .rank-math-breadcrumb a { color: #9A9AA0; } .vf-crumb--on-dark .rank-math-breadcrumb .last { color: #FFFFFF; } /* 10.9 Selos de texto (vf-chip) e catalogo do produto [vf_catalog_label] */ .vf-chips { display: inline-flex; flex-wrap: wrap; gap: 8px; } .vf-chip { display: inline-flex; align-items: center; height: 30px; padding: 0 12px; border: 1px solid var(--vf-border); border-radius: var(--vf-radius); font: 600 0.75rem/1 "Inter", sans-serif; color: var(--vf-text-2); background: #FFFFFF; text-decoration: none; white-space: nowrap; } a.vf-chip:hover { border-color: var(--vf-graphite); color: var(--vf-graphite); } .vf-chip--catalog { border-color: var(--vf-graphite); color: var(--vf-graphite); } /* 10.10 Pagina do produto: abas (widget Abas de dados do produto, classe vf-tabs) e botao do YITH */ .vf-tabs .woocommerce-tabs ul.tabs { display: flex; gap: 40px; margin: 0 0 48px !important; padding: 0 !important; border-bottom: 1px solid var(--vf-border); overflow-x: auto; } .vf-tabs .woocommerce-tabs ul.tabs::before, .vf-tabs .woocommerce-tabs ul.tabs li::before, .vf-tabs .woocommerce-tabs ul.tabs li::after { display: none !important; } .vf-tabs .woocommerce-tabs ul.tabs li { margin: 0 !important; padding: 0 !important; border: 0 !important; background: none !important; } .vf-tabs .woocommerce-tabs ul.tabs li a { position: relative; display: block; padding: 0 0 18px !important; font: 500 1.0625rem/1.2 "Inter", sans-serif; color: var(--vf-muted) !important; white-space: nowrap; } .vf-tabs .woocommerce-tabs ul.tabs li a::after { content: ""; position: absolute; left: 0; right: 0; bottom: -1px; height: 2px; background: var(--vf-red); transform: scaleX(0); transform-origin: left center; transition: transform 450ms var(--vf-ease-soft); } .vf-tabs .woocommerce-tabs ul.tabs li:is(.active, :hover) a { color: var(--vf-graphite) !important; } .vf-tabs .woocommerce-tabs ul.tabs li.active a { font-weight: 600; } .vf-tabs .woocommerce-tabs ul.tabs li.active a::after { transform: scaleX(1); } .vf-tabs .woocommerce-Tabs-panel { max-width: 75ch; font: 400 1.125rem/1.7 "Inter", sans-serif; color: var(--vf-text); } .vf-tabs .woocommerce-Tabs-panel > h2:first-child { display: none; } /* o titulo da aba repete o nome da aba */ /* Pagina do produto: campo de quantidade (criado pelo PHP) + botao do YITH lado a lado. Funciona com ou sem o Flexbox vf-product-buy em volta. */ .single-product .yith-ywraq-add-to-quote.vf-has-qty { display: flex !important; flex-wrap: wrap; align-items: stretch; gap: 12px; margin-top: 0; } .single-product .yith-ywraq-add-to-quote.vf-has-qty .quantity { height: 56px; } .single-product .yith-ywraq-add-to-quote.vf-has-qty > :is(.yith_ywraq_add_item_product_message, .yith_ywraq_add_item_response_message, .yith_ywraq_add_item_browse_message) { flex-basis: 100%; } .single-product .yith-ywraq-add-to-quote.vf-has-qty:has(.yith-ywraq-add-button[style*="none"]) .quantity { display: none !important; } .single-product .yith-ywraq-add-to-quote.vf-has-qty .yith-ywraq-add-button { margin: 0 !important; } .single-product .yith-ywraq-add-to-quote.vf-has-qty .yith-ywraq-add-button[style*="block"] { display: flex !important; } .single-product .yith-ywraq-add-to-quote.vf-has-qty .add-request-quote-button.button { margin: 0 !important; } .single-product .yith-ywraq-add-to-quote.vf-has-qty .yith_ywraq_add_item_product_message { font: 600 0.9375rem/1.4 "Inter", sans-serif; color: var(--vf-success); } .single-product .yith-ywraq-add-to-quote.vf-has-qty .yith_ywraq_add_item_browse_message a { font: 600 0.9375rem/1.4 "Inter", sans-serif; color: var(--vf-graphite); text-decoration: underline; text-decoration-color: var(--vf-red); text-underline-offset: 3px; } .single-product .yith-ywraq-add-to-quote.vf-has-qty .add-request-quote-button.button, .single-product .vf-product-buy :is(.add-request-quote-button.button, .yith_ywraq_add_item_browse_message a) { display: inline-flex; align-items: center; justify-content: center; min-height: 56px; padding: 0 28px; border-radius: var(--vf-radius); font: 600 1rem/1 "Inter", sans-serif; color: #FFFFFF !important; background: var(--vf-red) !important; text-decoration: none; transition: background-color 160ms var(--vf-ease); } .single-product .yith-ywraq-add-to-quote.vf-has-qty .add-request-quote-button.button:hover, .single-product .vf-product-buy .add-request-quote-button.button:hover { background: var(--vf-red-hover) !important; } /* Pagina Valeflux Solucoes: sem os selos da Valeflux Industria no header */ .vf-no-seals .vf-topbar .vf-seal, .vf-no-seals .vf-topbar .vf-topbar__label + .vf-divider { display: none; } /* 10.11 Texto longo (Conteudo do post, Conteudo da pagina, Editor de texto): classe vf-prose */ .vf-prose { max-width: 720px; font: 400 1.1875rem/1.75 "Inter", sans-serif; color: var(--vf-text); } .vf-prose > * + * { margin-top: 1.25em; } .vf-prose :is(h2, h3) { margin-top: 2em; font-weight: 600; letter-spacing: -0.03em; line-height: 1.15; color: var(--vf-graphite); scroll-margin-top: calc(var(--vf-header-h) + 24px); } .vf-prose h2 { font-size: 2rem; } .vf-prose h3 { font-size: 1.5rem; } .vf-prose a { color: var(--vf-graphite); text-decoration: underline; text-decoration-color: var(--vf-red); text-underline-offset: 3px; } .vf-prose a:hover { color: var(--vf-red); } .vf-prose ul { list-style: none; padding: 0; } .vf-prose ul li { position: relative; padding-left: 30px; } .vf-prose ul li + li { margin-top: 0.6em; } .vf-prose ul li::before { content: ""; position: absolute; left: 0; top: 0.62em; width: 14px; height: 10px; background: var(--vf-red); clip-path: polygon(0 0, 50% 50%, 100% 0, 100% 100%, 50% 50%, 0 100%); } .vf-prose ol { padding-left: 1.4em; } .vf-prose blockquote { margin: 1.5em 0; padding: 4px 0 4px 28px; border-left: 3px solid var(--vf-red); font-size: 1.5rem; font-weight: 500; line-height: 1.45; letter-spacing: -0.015em; color: var(--vf-graphite); } .vf-prose img { max-width: 100%; height: auto; border-radius: 8px; } .vf-prose figcaption { margin-top: 10px; font-size: 0.875rem; color: var(--vf-muted); } .vf-prose table { width: 100%; border-collapse: collapse; font-size: 0.9375rem; } .vf-prose :is(th, td) { padding: 14px 16px; border-bottom: 1px solid var(--vf-border); text-align: left; } .vf-prose th { background: var(--vf-canvas); font-weight: 600; color: var(--vf-graphite); } /* 10.12 Blog: no Listing Grid dos posts (classe vf-blog-grid), o primeiro card da primeira pagina vira destaque (largura toda, foto e texto lado a lado). O card do Listing e um Flexbox vf-post-card > vf-post-card__media + vf-post-card__body */ @media (min-width: 1025px) { body:not(.paged) .vf-blog-grid .jet-listing-grid__item:first-child { width: 100% !important; max-width: 100% !important; flex: 0 0 100% !important; } body:not(.paged) .vf-blog-grid .jet-listing-grid__item:first-child .vf-post-card { flex-direction: row !important; align-items: stretch; gap: 0; padding: 0; } body:not(.paged) .vf-blog-grid .jet-listing-grid__item:first-child .vf-post-card__media { flex: 0 0 58%; } body:not(.paged) .vf-blog-grid .jet-listing-grid__item:first-child .vf-post-card__body { flex: 1 1 auto; min-width: 0; } } /* 10.13 Abas entre paginas (Legais): links com a classe vf-tab-link; a pagina atual ganha is-current pelo PHP */ .elementor .vf-tab-link { position: relative; color: var(--vf-muted); transition: color 160ms var(--vf-ease); } .elementor .vf-tab-link::after { content: ""; position: absolute; left: 0; right: 0; bottom: -1px; height: 2px; background: var(--vf-red); transform: scaleX(0); transform-origin: left center; transition: transform 450ms var(--vf-ease-soft); } .elementor .vf-tab-link:hover, .elementor .vf-tab-link.is-current { color: var(--vf-graphite); } .elementor .vf-tab-link.is-current { font-weight: 600; } .elementor .vf-tab-link:is(:hover, .is-current)::after { transform: scaleX(1); } /* 10.14 Busca: titulo [vf_search_title] e bloco sem resultados [vf_search_empty] */ .vf-search-title { margin: 0; font: 600 clamp(2.25rem, 4.6vw, 4.25rem)/1.04 "Inter", sans-serif; letter-spacing: -0.035em; color: var(--vf-graphite); } .vf-search-title__term { color: var(--vf-red); } .vf-search-count { margin: 16px 0 0; font: 400 0.9375rem/1.5 "Inter", sans-serif; color: var(--vf-text-2); } .vf-search-count strong { color: var(--vf-graphite); } .vf-search-empty { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: 72px; align-items: center; padding: 72px 0; font-family: "Inter", sans-serif; } .vf-search-empty__title { margin: 28px 0 0; font-size: clamp(2rem, 3.6vw, 3.25rem); font-weight: 600; letter-spacing: -0.035em; line-height: 1.05; color: var(--vf-graphite); } .vf-search-empty__text > p { margin: 18px 0 0; max-width: 52ch; font-size: 1.125rem; line-height: 1.6; color: var(--vf-text-2); } .vf-search-empty__tries { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; } .vf-search-empty__tries > span { margin-right: 4px; font-size: 0.875rem; } .vf-search-empty__links { display: grid; gap: 12px; } .vf-search-empty__link, .vf-search-empty__wa { display: flex; justify-content: space-between; align-items: center; padding: 24px; border-radius: 6px; font-size: 1.125rem; font-weight: 600; text-decoration: none; transition: border-color 160ms var(--vf-ease), background-color 160ms var(--vf-ease), color 160ms var(--vf-ease); } .vf-search-empty__link { border: 1px solid var(--vf-border); color: var(--vf-graphite); background: #FFFFFF; } .vf-search-empty__link span { color: var(--vf-red); } .vf-search-empty__link:hover { border-color: var(--vf-graphite); color: var(--vf-graphite); } .vf-search-empty__wa { color: #FFFFFF; background: var(--vf-red); } .vf-search-empty__wa:hover { color: #FFFFFF; background: var(--vf-red-hover); } @media (max-width: 1024px) { .vf-search-empty { grid-template-columns: minmax(0, 1fr); gap: 40px; padding: 48px 0; } } @media (prefers-reduced-motion: reduce) { html.vf-js .vf-reveal:not(.is-in), html.vf-js .vf-reveal-group:not(.is-in) > *, html.vf-js .vf-title-reveal:not([data-vf-split]) { opacity: 1; } html.vf-js .vf-title-reveal .vf-w > span, html.vf-js .vf-clip { transform: none; clip-path: none; } .vf-reveal, .vf-reveal-group > *, .vf-title-reveal .vf-w > span, .vf-clip, .vf-marquee__track, .vf-pipeline__fill, .vf-pipeline__valve, .vf-pipeline__valve .vf-valve, .vf-faq details > [role="region"] { animation: none !important; } .vf-pipeline__fill { transform: none; } .elementor .vf-pipeline__valve { background: var(--vf-red); box-shadow: none; } .elementor .vf-pipeline__valve .vf-valve { background: #FFFFFF; } .vf-split > *, .vf-zoom img, .vf-hover-list__name, .vf-flow, .vf-read-progress { transition: none !important; } } /* -------------------------------------------------------------------------- 11. Botoes (vf-btn) - v12.8 Todo Botao com a classe vf-btn ganha o bloco da seta a direita. Hover: o botao escurece, sobe 1px e a seta "anda para a frente" (sai pela direita e volta pela esquerda). Clique: o botao afunda e a seta da um passo. vf-btn -> vermelho, bloco escuro com seta branca vf-btn vf-btn--secondary -> contorno grafite; no hover enche de grafite vf-btn vf-btn--on-dark -> contorno claro sobre fundo escuro vf-btn vf-btn--light -> fundo branco, bloco vermelho (sobre vermelho ou foto) vf-btn vf-btn--no-arrow -> sem a seta Os valores daqui vencem o painel: nao precisa configurar altura, fonte nem cantos. -------------------------------------------------------------------------- */ :root { --vf-arrow-white: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23FFFFFF' stroke-width='2' stroke-linecap='square'%3E%3Cpath d='M4 12h14M13 6l6 6-6 6'/%3E%3C/svg%3E"); --vf-arrow-dark: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23161616' stroke-width='2' stroke-linecap='square'%3E%3Cpath d='M4 12h14M13 6l6 6-6 6'/%3E%3C/svg%3E"); --vf-btn-h: 52px; } :root .elementor .e-button-base.vf-btn { --vf-arrow: var(--vf-arrow-white); --vf-arrow-bg: rgba(0, 0, 0, 0.2); display: inline-flex; align-items: center; justify-content: space-between; gap: 18px; width: auto; height: var(--vf-btn-h); min-height: var(--vf-btn-h); padding: 0 6px 0 22px; font-family: Inter, sans-serif; font-size: 15px; font-weight: 600; line-height: 1; letter-spacing: 0.005em; text-decoration: none; white-space: nowrap; border-radius: 4px; box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.14), 0 10px 22px -14px rgba(212, 20, 20, 0.9); transition: background-color 240ms var(--vf-ease), color 240ms var(--vf-ease), border-color 240ms var(--vf-ease), box-shadow 240ms var(--vf-ease), transform 160ms var(--vf-ease); } :root .elementor .e-button-base.vf-btn::after { content: ""; flex: 0 0 auto; width: 40px; height: 40px; border-radius: 3px; background: var(--vf-arrow) 50% 50% / 18px 18px no-repeat, var(--vf-arrow-bg); transition: background-color 240ms var(--vf-ease); } :root .elementor .e-button-base.vf-btn:is(:hover, :focus-visible) { transform: translateY(-1px); box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.14), 0 16px 28px -16px rgba(212, 20, 20, 0.95); } :root .elementor .e-button-base.vf-btn:active { transform: translateY(1px); box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.1); } /* Variacoes */ :root .elementor .e-button-base.vf-btn.vf-btn--secondary { --vf-arrow: var(--vf-arrow-dark); --vf-arrow-bg: rgba(22, 22, 22, 0.06); box-shadow: none; } :root .elementor .e-button-base.vf-btn.vf-btn--secondary:is(:hover, :focus-visible) { --vf-arrow: var(--vf-arrow-white); --vf-arrow-bg: rgba(255, 255, 255, 0.14); box-shadow: 0 14px 26px -16px rgba(22, 22, 22, 0.7); } :root .elementor .e-button-base.vf-btn.vf-btn--on-dark { --vf-arrow-bg: rgba(255, 255, 255, 0.1); box-shadow: none; } :root .elementor .e-button-base.vf-btn.vf-btn--on-dark:is(:hover, :focus-visible) { --vf-arrow: var(--vf-arrow-dark); --vf-arrow-bg: rgba(22, 22, 22, 0.08); } :root .elementor .e-button-base.vf-btn.vf-btn--light { color: #161616; background-color: #FFFFFF; --vf-arrow-bg: var(--vf-red); box-shadow: 0 12px 26px -16px rgba(0, 0, 0, 0.55); } :root .elementor .e-button-base.vf-btn.vf-btn--light:is(:hover, :focus-visible) { color: #161616; background-color: #F6F6F7; --vf-arrow-bg: var(--vf-red-hover); } :root .elementor .e-button-base.vf-btn.vf-btn--no-arrow { padding: 0 24px; justify-content: center; } :root .elementor .e-button-base.vf-btn.vf-btn--no-arrow::after { content: none; } /* A seta anda: sai pela direita e volta pela esquerda */ @keyframes vf-arrow-go { 0% { background-position: 50% 50%, 0 0; } 42% { background-position: 260% 50%, 0 0; } 43% { background-position: -160% 50%, 0 0; } 100% { background-position: 50% 50%, 0 0; } } @keyframes vf-arrow-push { 0%, 100% { background-position: 50% 50%, 0 0; } 50% { background-position: 90% 50%, 0 0; } } :root .elementor .e-button-base.vf-btn:is(:hover, :focus-visible)::after { animation: vf-arrow-go 520ms var(--vf-ease-soft); } :root .elementor .e-button-base.vf-btn:active::after { animation: vf-arrow-push 260ms var(--vf-ease); } /* Botoes de Flexbox com icone SVG (rodape: vf-btn--arrow) */ @keyframes vf-arrow-svg { 0% { transform: none; opacity: 1; } 42% { transform: translateX(14px); opacity: 0; } 43% { transform: translateX(-14px); opacity: 0; } 100% { transform: none; opacity: 1; } } .elementor .vf-btn--arrow { overflow: hidden; transition: background-color 240ms var(--vf-ease), transform 160ms var(--vf-ease); } .elementor .vf-btn--arrow:is(:hover, :focus-visible) { transform: translateY(-1px); } .elementor .vf-btn--arrow:is(:hover, :focus-visible) > .e-svg-base:last-child, .elementor .vf-btn--arrow:is(:hover, :focus-visible) > svg:last-child { animation: vf-arrow-svg 520ms var(--vf-ease-soft); } .elementor .vf-btn--arrow:active { transform: translateY(1px); } /* Celular: botao de largura total, texto a esquerda e seta na ponta */ @media (max-width: 767px) { :root .elementor .e-button-base.vf-btn { padding-left: 20px; max-width: 100%; height: auto; white-space: normal; text-align: left; line-height: 1.25; padding-block: 6px; } :root .elementor .vf-actions > .e-button-base.vf-btn { width: 100%; } } /* -------------------------------------------------------------------------- 12. Utilitarios de estrutura (v12.8) Classes de uma palavra que resolvem os erros mais comuns do painel. vf-stack -> textos um embaixo do outro (Coluna). O espacamento do painel vale. vf-sticky -> acompanha a rolagem (computador). Use no lugar de Posicao "Fixo". -------------------------------------------------------------------------- */ :root .elementor .e-con.vf-stack { flex-direction: column; flex-wrap: nowrap; } @media (min-width: 1025px) { :root .elementor .vf-sticky { position: sticky; top: var(--vf-sticky-top); align-self: start; z-index: 2; } } @media (max-width: 1024px) { :root .elementor .vf-sticky { position: static; } } /* -------------------------------------------------------------------------- 13. Home -------------------------------------------------------------------------- */ /* 13.1 Lista numerada interativa (Home 01): classe vf-steplist no Flexbox "Lista". Cada linha (Grade com numero, textos e seta) acende quando passa pelo meio da tela: o numero vira um quadrado vermelho, o titulo ganha a cor da marca, a seta anda e um fio vermelho preenche a lateral. No computador o mouse tambem acende. */ :root .elementor .vf-steplist { position: relative; display: flex; flex-direction: column; gap: 0; padding: 0; } .elementor .vf-steplist::before { content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 2px; background: #E4E4E7; } .elementor .vf-steplist::after { content: ""; position: absolute; left: 0; top: 0; width: 2px; height: calc(var(--vf-step, 0) * 100%); background: var(--vf-red); transition: height 600ms var(--vf-ease-soft); } .elementor .vf-steplist > * { position: relative; padding-left: 28px !important; transition: background-color 300ms var(--vf-ease); cursor: default; } .elementor .vf-steplist > * > :first-child { display: flex; align-items: center; justify-content: center; width: 44px; height: 44px; border: 1px solid #D9D9DD; border-radius: 4px; font-variant-numeric: tabular-nums; font-weight: 700; color: var(--vf-red); background: #FFFFFF; transition: background-color 300ms var(--vf-ease), color 300ms var(--vf-ease), border-color 300ms var(--vf-ease), transform 400ms var(--vf-ease-soft); } .elementor .vf-steplist > * :is(h3, .e-heading-base) { transition: color 300ms var(--vf-ease), transform 400ms var(--vf-ease-soft); } .elementor .vf-steplist > * > :last-child { transition: transform 400ms var(--vf-ease-soft), color 300ms var(--vf-ease); } .elementor .vf-steplist > .is-active, .elementor .vf-steplist > :hover { background: linear-gradient(90deg, rgba(212, 20, 20, 0.05), rgba(212, 20, 20, 0) 70%); } .elementor .vf-steplist > .is-active > :first-child, .elementor .vf-steplist > :hover > :first-child { color: #FFFFFF; background: var(--vf-red); border-color: var(--vf-red); transform: scale(1.06); } .elementor .vf-steplist > .is-active :is(h3, .e-heading-base), .elementor .vf-steplist > :hover :is(h3, .e-heading-base) { color: var(--vf-red); } .elementor .vf-steplist > .is-active > :last-child, .elementor .vf-steplist > :hover > :last-child { transform: translateX(6px); color: var(--vf-red); } @media (max-width: 767px) { .elementor .vf-steplist > * { padding-left: 18px !important; } .elementor .vf-steplist > * > :first-child { width: 36px; height: 36px; font-size: 13px; } } /* 13.2 Duas frentes (Home 02, vf-split): paineis sempre com o conteudo embaixo, foto que aproxima no hover e a seta do "Ver catalogo" que anda. */ :root .elementor .vf-split > .e-con { position: relative; display: flex; flex-direction: column; justify-content: flex-end; gap: 14px; overflow: hidden; text-decoration: none; transition: box-shadow 400ms var(--vf-ease), transform 400ms var(--vf-ease-soft), flex-grow 700ms var(--vf-ease-soft); } .elementor .vf-split > .e-con:hover { box-shadow: 0 30px 60px -30px rgba(22, 22, 22, 0.45); } .elementor .vf-split > .e-con .e-image-base { transition: transform 900ms var(--vf-ease-soft); } .elementor .vf-split > .e-con:hover .e-image-base { transform: scale(1.04); } .elementor .vf-split > .e-con .vf-link { width: max-content; } .elementor .vf-split > .e-con:hover .vf-link { color: var(--vf-red); } .elementor .vf-split > .e-con:hover .vf-link.vf-on-dark { color: #FFFFFF; } @media (max-width: 1024px) { :root .elementor .vf-split { flex-direction: column; } :root .elementor .vf-split > .e-con { min-height: 460px; } } /* 13.3 Lista das familias (Home 04, vf-hover-list): selo e seta no tamanho certo */ :root .elementor .vf-hover-list__row { display: flex; flex-direction: row; align-items: center; gap: 24px; } :root .elementor .vf-hover-list__row > .vf-stack { flex: 1 1 auto; min-width: 0; } :root .elementor .vf-hover-list__row .vf-chip { flex: 0 0 auto; display: inline-flex; flex-direction: row; padding: 0 12px; } .elementor .vf-hover-list__row > .e-paragraph-base:not(.vf-chip) { flex: 0 0 auto; transition: transform 400ms var(--vf-ease-soft), color 200ms var(--vf-ease); } .elementor .vf-hover-list__row:hover > .e-paragraph-base:not(.vf-chip) { transform: translateX(6px); color: var(--vf-red); } @media (max-width: 767px) { :root .elementor .vf-hover-list__row .vf-chip { display: none; } :root .elementor .vf-hover-list__row { gap: 16px; } } /* 13.4 Faixa de chamada (classe vf-cta-strip): Home 04 "Nao encontrou a linha", Catalogos "Nao sabe por onde comecar". Cartao grafite, icone de conversa, texto forte e botoes a direita. Dentro: Paragrafo (texto) + Flexbox com os botoes. */ :root .elementor .vf-cta-strip { position: relative; display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: 32px; padding: 32px 32px 32px 104px; border: 0; border-radius: 8px; background: #161616 radial-gradient(120% 140% at 100% 0%, rgba(212, 20, 20, 0.28), rgba(212, 20, 20, 0) 55%); overflow: hidden; } .elementor .vf-cta-strip::before { content: ""; position: absolute; left: 32px; top: 50%; width: 48px; height: 48px; margin-top: -24px; border-radius: 6px; background: var(--vf-red) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23FFFFFF' stroke-width='1.8' stroke-linejoin='round'%3E%3Cpath d='M4 5h16v11H9l-5 4z'/%3E%3Cpath d='M8 9.5h8M8 12.5h5'/%3E%3C/svg%3E") center / 24px no-repeat; } :root .elementor .vf-cta-strip > .e-paragraph-base, :root .elementor .vf-cta-strip > .e-heading-base { flex: 1 1 auto; min-width: 0; max-width: 560px; margin: 0; font-family: Inter, sans-serif; font-size: 22px; font-weight: 600; line-height: 1.3; letter-spacing: -0.015em; color: #FFFFFF; } :root .elementor .vf-cta-strip > .e-con { width: auto; max-width: none; flex-direction: row; flex-wrap: wrap; justify-content: flex-end; gap: 12px; padding: 0; } :root .elementor .vf-cta-strip .e-button-base.vf-btn.vf-btn--secondary { color: #FFFFFF; border-color: rgba(255, 255, 255, 0.4); --vf-arrow: var(--vf-arrow-white); --vf-arrow-bg: rgba(255, 255, 255, 0.1); } :root .elementor .vf-cta-strip .e-button-base.vf-btn.vf-btn--secondary:is(:hover, :focus-visible) { color: #161616; background: #FFFFFF; border-color: #FFFFFF; --vf-arrow: var(--vf-arrow-dark); --vf-arrow-bg: rgba(22, 22, 22, 0.08); } @media (max-width: 1024px) { :root .elementor .vf-cta-strip { grid-template-columns: minmax(0, 1fr); align-items: start; padding: 96px 24px 28px; gap: 24px; } :root .elementor .vf-cta-strip > .e-con { justify-content: flex-start; } .elementor .vf-cta-strip::before { left: 24px; top: 28px; margin-top: 0; } :root .elementor .vf-cta-strip > .e-paragraph-base, :root .elementor .vf-cta-strip > .e-heading-base { font-size: 20px; } } @media (max-width: 767px) { :root .elementor .vf-cta-strip > .e-con { width: 100%; flex-direction: column; } :root .elementor .vf-cta-strip > .e-con .vf-btn { width: 100%; } } /* 13.5 Tubulacao do passo a passo (Home 05, Catalogos): cada passo com o texto alinhado, sempre em coluna, e a valvula ativa com brilho. */ :root .elementor .vf-pipeline__step { display: flex; align-items: flex-start; } :root .elementor .vf-pipeline__step > .e-con:not(.vf-pipeline__valve) { display: flex; flex-direction: column; align-items: flex-start; gap: 8px; padding: 0; min-width: 0; } :root .elementor .vf-pipeline__step > .e-con:not(.vf-pipeline__valve) > * { margin: 0; } @media (min-width: 768px) { :root .elementor .vf-pipeline:not(:has(.vf-pipeline__track.is-vertical)) .vf-pipeline__step { flex-direction: column; gap: 20px; } } @media (max-width: 767px) { :root .elementor .vf-pipeline__step { flex-direction: row; gap: 20px; } } .vf-pipeline.is-in .vf-pipeline__valve { box-shadow: 0 0 0 6px rgba(212, 20, 20, 0.12); } /* 13.6 Cartoes de diferenciais (Home 06, fundo escuro): classe vf-feature no Card. Numero grande vazado ao fundo, fio vermelho que corre no topo, brilho que segue o mouse e titulo que sobe no hover. Dentro do Card, como ja esta: Paragrafo numero + Flexbox (titulo + texto) + Flexbox dos selos (opcional). */ :root .elementor .e-con.vf-feature { position: relative; display: flex; flex-direction: column; justify-content: space-between; gap: 28px; min-height: 360px; padding: 32px; border: 1px solid #2A2A2D; border-radius: 8px; background: #1C1C1E; overflow: hidden; isolation: isolate; transition: transform 500ms var(--vf-ease-soft), border-color 300ms var(--vf-ease), box-shadow 500ms var(--vf-ease); } .elementor .e-con.vf-feature::before { content: ""; position: absolute; inset: 0; z-index: -1; background: radial-gradient(360px circle at var(--mx, 50%) var(--my, -20%), rgba(212, 20, 20, 0.22), rgba(212, 20, 20, 0) 60%); opacity: 0; transition: opacity 400ms var(--vf-ease); } .elementor .e-con.vf-feature::after { content: ""; position: absolute; left: 0; top: 0; height: 3px; width: 100%; background: var(--vf-red); transform: scaleX(0.18); transform-origin: left; transition: transform 700ms var(--vf-ease-soft); } :root .elementor .e-con.vf-feature > :first-child { position: absolute; right: 20px; top: 6px; z-index: -1; margin: 0; font-family: Inter, sans-serif; font-size: 120px; font-weight: 700; line-height: 1; letter-spacing: -0.06em; color: transparent; -webkit-text-stroke: 1px rgba(255, 255, 255, 0.12); transition: -webkit-text-stroke-color 400ms var(--vf-ease), transform 700ms var(--vf-ease-soft); } .elementor .e-con.vf-feature > .e-con { flex-direction: column; gap: 10px; padding: 0; margin-top: auto; } .elementor .e-con.vf-feature > .e-con:last-child:not(:nth-child(2)) { flex-direction: row; flex-wrap: wrap; gap: 8px; margin-top: 0; } .elementor .e-con.vf-feature :is(h3, .e-heading-base) { margin: 0; font-size: 22px; font-weight: 600; line-height: 1.25; color: #FFFFFF; transition: transform 500ms var(--vf-ease-soft); } .elementor .e-con.vf-feature > .e-con .e-paragraph-base:not(.vf-chip) { font-size: 14px; line-height: 1.6; color: #A1A1A6; } .elementor .e-con.vf-feature .vf-chip { height: 28px; color: #FFFFFF; background: rgba(255, 255, 255, 0.06); border-color: rgba(255, 255, 255, 0.16); } .elementor .e-con.vf-feature:hover { transform: translateY(-4px); border-color: #3A3A3F; box-shadow: 0 30px 60px -30px rgba(0, 0, 0, 0.9); } .elementor .e-con.vf-feature:hover::before { opacity: 1; } .elementor .e-con.vf-feature:hover::after { transform: scaleX(1); } :root .elementor .e-con.vf-feature:hover > :first-child { -webkit-text-stroke-color: rgba(212, 20, 20, 0.6); transform: translateY(6px); } .elementor .e-con.vf-feature:hover :is(h3, .e-heading-base) { transform: translateY(-4px); } @media (max-width: 767px) { :root .elementor .e-con.vf-feature { min-height: 0; padding: 28px 24px; gap: 40px; } :root .elementor .e-con.vf-feature > :first-child { font-size: 88px; } } /* -------------------------------------------------------------------------- 14. Certificacoes: substituida pela secao 17.7 (v12.9) -------------------------------------------------------------------------- */ /* -------------------------------------------------------------------------- 15. Catalogo: barra de filtros (JetSmartFilters) + grade (Listing do JetEngine) Antes ficava no CSS das paginas Industria e Solucoes: APAGUE o CSS personalizado dessas duas paginas (e da categoria/busca, se tiver colado). Agora vale para qualquer pagina com filtro + Listing (catalogos, categoria, busca). >= 1025px: barra de 300px que acompanha a rolagem, lista com rolagem propria. <= 1024px: botao "Filtrar por categoria" que abre a lista; ao escolher, a lista fecha e a pagina vai para os produtos. -------------------------------------------------------------------------- */ .e-con:has(> .e-con > .elementor-widget-jet-listing-grid):has(> .e-con > [class*="elementor-widget-jet-smart-filters"]:not(.elementor-widget-jet-smart-filters-pagination)) { display: grid !important; grid-template-columns: minmax(0, 1fr); gap: 24px !important; align-items: start !important; } @media (min-width: 1025px) { .e-con:has(> .e-con > .elementor-widget-jet-listing-grid):has(> .e-con > [class*="elementor-widget-jet-smart-filters"]:not(.elementor-widget-jet-smart-filters-pagination)) { grid-template-columns: 300px minmax(0, 1fr); gap: 32px !important; } } /* Barra */ .e-con:not(.vf-section):has(> [class*="elementor-widget-jet-smart-filters"]:not(.elementor-widget-jet-smart-filters-pagination)) { display: flex !important; flex-direction: column !important; align-items: stretch !important; gap: 16px !important; width: 100% !important; max-width: none !important; min-width: 0; margin: 0 !important; padding: 20px !important; background: #FFFFFF !important; border: 1px solid var(--vf-border); border-radius: 8px; box-shadow: 0 20px 40px -32px rgba(22, 22, 22, 0.35); } @media (min-width: 1025px) { .e-con:not(.vf-section):has(> [class*="elementor-widget-jet-smart-filters"]:not(.elementor-widget-jet-smart-filters-pagination)) { position: sticky !important; top: var(--vf-sticky-top); max-height: calc(100vh - var(--vf-sticky-top) - 24px); overflow: hidden; } } .e-con:not(.vf-section):has(> [class*="elementor-widget-jet-smart-filters"]:not(.elementor-widget-jet-smart-filters-pagination)) > * { width: 100% !important; max-width: none !important; margin: 0 !important; min-width: 0; } /* Titulo e rotulo dentro da barra ficam pequenos (o titulo grande vai acima da grade) */ .e-con:not(.vf-section):has(> [class*="elementor-widget-jet-smart-filters"]:not(.elementor-widget-jet-smart-filters-pagination)) > .vf-eyebrow { font-size: 11px; } .e-con:not(.vf-section):has(> [class*="elementor-widget-jet-smart-filters"]:not(.elementor-widget-jet-smart-filters-pagination)) > :is(h2, h3, .e-heading-base, .elementor-widget-heading) { font-size: 18px !important; line-height: 1.3 !important; padding-bottom: 14px !important; border-bottom: 1px solid var(--vf-divider); } .e-con:not(.vf-section):has(> [class*="elementor-widget-jet-smart-filters"]:not(.elementor-widget-jet-smart-filters-pagination)) > .elementor-widget-heading .elementor-heading-title { font-size: 18px !important; margin: 0 !important; } /* Widget do filtro ocupa o espaco que sobra e rola por dentro */ .e-con:not(.vf-section):has(> [class*="elementor-widget-jet-smart-filters"]:not(.elementor-widget-jet-smart-filters-pagination)) > [class*="elementor-widget-jet-smart-filters"] { display: flex; flex-direction: column; min-height: 0; flex: 1 1 auto; } .e-con:not(.vf-section):has(> [class*="elementor-widget-jet-smart-filters"]:not(.elementor-widget-jet-smart-filters-pagination)) :is(.elementor-widget-container, .jet-smart-filters-checkboxes, .jet-checkboxes-list) { display: flex; flex-direction: column; min-height: 0; flex: 1 1 auto; } .e-con:not(.vf-section):has(> [class*="elementor-widget-jet-smart-filters"]:not(.elementor-widget-jet-smart-filters-pagination)) .jet-checkboxes-list { font-family: "Inter", sans-serif; } .e-con:not(.vf-section):has(> [class*="elementor-widget-jet-smart-filters"]:not(.elementor-widget-jet-smart-filters-pagination)) .jet-checkboxes-list-wrapper { margin: 0 !important; padding: 0 !important; border: 0 !important; min-width: 0; min-height: 0; display: flex; flex-direction: column; flex: 1 1 auto; } .e-con:not(.vf-section):has(> [class*="elementor-widget-jet-smart-filters"]:not(.elementor-widget-jet-smart-filters-pagination)) .jet-list-tree { min-height: 0; max-height: 340px; overflow-y: auto; overscroll-behavior: auto; margin-right: -10px; padding-right: 10px; scrollbar-width: thin; scrollbar-color: #C7C7CC transparent; } @media (min-width: 1025px) { .e-con:not(.vf-section):has(> [class*="elementor-widget-jet-smart-filters"]:not(.elementor-widget-jet-smart-filters-pagination)) .jet-list-tree { max-height: none; flex: 1 1 auto; } } /* Busca dentro da lista */ .e-con:not(.vf-section):has(> [class*="elementor-widget-jet-smart-filters"]:not(.elementor-widget-jet-smart-filters-pagination)) .jet-filter-items-search { position: relative; margin: 0 0 12px !important; flex: 0 0 auto; } .e-con:not(.vf-section):has(> [class*="elementor-widget-jet-smart-filters"]:not(.elementor-widget-jet-smart-filters-pagination)) .jet-filter-items-search__input { width: 100% !important; height: 44px !important; margin: 0 !important; padding: 0 36px 0 38px !important; font: 400 0.875rem/1 "Inter", sans-serif !important; color: var(--vf-graphite) !important; background: #F6F6F7 url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%236E6E75' stroke-width='2' stroke-linecap='square'%3E%3Ccircle cx='11' cy='11' r='6.5'/%3E%3Cpath d='M16 16l4.5 4.5'/%3E%3C/svg%3E") 12px center / 16px no-repeat !important; border: 1px solid transparent !important; border-radius: 6px !important; box-shadow: none !important; } .e-con:not(.vf-section):has(> [class*="elementor-widget-jet-smart-filters"]:not(.elementor-widget-jet-smart-filters-pagination)) .jet-filter-items-search__input::placeholder { color: var(--vf-muted); opacity: 1; } .e-con:not(.vf-section):has(> [class*="elementor-widget-jet-smart-filters"]:not(.elementor-widget-jet-smart-filters-pagination)) .jet-filter-items-search__input:focus { outline: none; background-color: #FFFFFF !important; border-color: var(--vf-focus) !important; box-shadow: 0 0 0 3px rgba(0, 95, 204, 0.2) !important; } .e-con:not(.vf-section):has(> [class*="elementor-widget-jet-smart-filters"]:not(.elementor-widget-jet-smart-filters-pagination)) .jet-filter-items-search__clear { position: absolute; top: 50%; right: 10px; width: 20px; height: 20px; transform: translateY(-50%); display: flex; align-items: center; justify-content: center; cursor: pointer; } .e-con:not(.vf-section):has(> [class*="elementor-widget-jet-smart-filters"]:not(.elementor-widget-jet-smart-filters-pagination)) .jet-filter-items-search__clear svg { display: none !important; } .e-con:not(.vf-section):has(> [class*="elementor-widget-jet-smart-filters"]:not(.elementor-widget-jet-smart-filters-pagination)) .jet-filter-items-search__clear::before { content: ""; width: 10px; height: 10px; background: var(--vf-muted); -webkit-mask: var(--vf-icon-x) center / contain no-repeat; mask: var(--vf-icon-x) center / contain no-repeat; } /* Linhas */ .e-con:not(.vf-section):has(> [class*="elementor-widget-jet-smart-filters"]:not(.elementor-widget-jet-smart-filters-pagination)) .jet-checkboxes-list__row { margin: 0 !important; padding: 0 !important; } .e-con:not(.vf-section):has(> [class*="elementor-widget-jet-smart-filters"]:not(.elementor-widget-jet-smart-filters-pagination)) .jet-checkboxes-list__item { display: block; margin: 0 !important; cursor: pointer; } .e-con:not(.vf-section):has(> [class*="elementor-widget-jet-smart-filters"]:not(.elementor-widget-jet-smart-filters-pagination)) .jet-checkboxes-list__button { display: flex !important; align-items: center; gap: 10px; min-height: 38px; margin: 0 !important; padding: 6px 8px !important; font-size: 0.875rem !important; line-height: 1.35 !important; color: var(--vf-text) !important; background: transparent !important; border: 0 !important; border-radius: 4px; transition: background-color 120ms var(--vf-ease); } .e-con:not(.vf-section):has(> [class*="elementor-widget-jet-smart-filters"]:not(.elementor-widget-jet-smart-filters-pagination)) .jet-checkboxes-list__item:hover .jet-checkboxes-list__button { background: var(--vf-canvas) !important; } .e-con:not(.vf-section):has(> [class*="elementor-widget-jet-smart-filters"]:not(.elementor-widget-jet-smart-filters-pagination)) .jet-checkboxes-list__label { flex: 1 1 auto; min-width: 0; font-weight: 400; overflow-wrap: anywhere; } .e-con:not(.vf-section):has(> [class*="elementor-widget-jet-smart-filters"]:not(.elementor-widget-jet-smart-filters-pagination)) .jet-list-tree__parent > .jet-checkboxes-list__item .jet-checkboxes-list__label { font-weight: 600; color: var(--vf-graphite); } .e-con:not(.vf-section):has(> [class*="elementor-widget-jet-smart-filters"]:not(.elementor-widget-jet-smart-filters-pagination)) .jet-checkboxes-list__decorator { position: relative; flex: 0 0 18px; width: 18px !important; height: 18px !important; margin: 0 !important; display: flex !important; align-items: center; justify-content: center; line-height: 0 !important; font-size: 0 !important; box-sizing: border-box !important; background: #FFFFFF !important; border: 1px solid var(--vf-border-strong) !important; border-radius: 3px !important; transition: background-color 120ms var(--vf-ease), border-color 120ms var(--vf-ease); } .e-con:not(.vf-section):has(> [class*="elementor-widget-jet-smart-filters"]:not(.elementor-widget-jet-smart-filters-pagination)) .jet-checkboxes-list__checked-icon { display: none !important; } .e-con:not(.vf-section):has(> [class*="elementor-widget-jet-smart-filters"]:not(.elementor-widget-jet-smart-filters-pagination)) .jet-checkboxes-list__decorator::after { content: ""; display: block; width: 12px; height: 12px; background: #FFFFFF; -webkit-mask: var(--vf-icon-check) center / contain no-repeat; mask: var(--vf-icon-check) center / contain no-repeat; opacity: 0; transform: scale(0.6); transition: opacity 120ms var(--vf-ease), transform 160ms var(--vf-ease); } .e-con:not(.vf-section):has(> [class*="elementor-widget-jet-smart-filters"]:not(.elementor-widget-jet-smart-filters-pagination)) .jet-checkboxes-list__input:checked + .jet-checkboxes-list__button .jet-checkboxes-list__decorator { background: var(--vf-red) !important; border-color: var(--vf-red) !important; } .e-con:not(.vf-section):has(> [class*="elementor-widget-jet-smart-filters"]:not(.elementor-widget-jet-smart-filters-pagination)) .jet-checkboxes-list__input:checked + .jet-checkboxes-list__button .jet-checkboxes-list__decorator::after { opacity: 1; transform: none; } .e-con:not(.vf-section):has(> [class*="elementor-widget-jet-smart-filters"]:not(.elementor-widget-jet-smart-filters-pagination)) .jet-checkboxes-list__input:checked + .jet-checkboxes-list__button { background: rgba(212, 20, 20, 0.06) !important; } .e-con:not(.vf-section):has(> [class*="elementor-widget-jet-smart-filters"]:not(.elementor-widget-jet-smart-filters-pagination)) .jet-checkboxes-list__input:checked + .jet-checkboxes-list__button .jet-checkboxes-list__label { color: var(--vf-graphite); font-weight: 600; } .e-con:not(.vf-section):has(> [class*="elementor-widget-jet-smart-filters"]:not(.elementor-widget-jet-smart-filters-pagination)) .jet-checkboxes-list__input:focus-visible + .jet-checkboxes-list__button { outline: 3px solid var(--vf-focus); outline-offset: -1px; } /* Contador como etiqueta */ .e-con:not(.vf-section):has(> [class*="elementor-widget-jet-smart-filters"]:not(.elementor-widget-jet-smart-filters-pagination)) .jet-filters-counter { flex: 0 0 auto; margin-left: auto; min-width: 26px; padding: 3px 7px; border-radius: 999px; font-size: 11px !important; font-weight: 600; line-height: 1; text-align: center; font-variant-numeric: tabular-nums; color: var(--vf-text-2) !important; background: var(--vf-canvas); } /* Subcategorias com fio-guia */ .e-con:not(.vf-section):has(> [class*="elementor-widget-jet-smart-filters"]:not(.elementor-widget-jet-smart-filters-pagination)) .jet-list-tree__children { margin: 0 0 4px 16px !important; padding: 0 0 0 8px !important; border-left: 1px solid var(--vf-divider); } .e-con:not(.vf-section):has(> [class*="elementor-widget-jet-smart-filters"]:not(.elementor-widget-jet-smart-filters-pagination)) .jet-list-tree__children:empty, .e-con:not(.vf-section):has(> [class*="elementor-widget-jet-smart-filters"]:not(.elementor-widget-jet-smart-filters-pagination)) .jet-list-tree__children:not(:has(.jet-filter-row:not(.jet-filter-row-hide))) { display: none; } .e-con:not(.vf-section):has(> [class*="elementor-widget-jet-smart-filters"]:not(.elementor-widget-jet-smart-filters-pagination)) .jet-filter-row-disable { opacity: 0.45; pointer-events: none; } /* Busca de produtos (widget Search do JetSmartFilters, se usado) */ .e-con:not(.vf-section):has(> [class*="elementor-widget-jet-smart-filters"]:not(.elementor-widget-jet-smart-filters-pagination)) .jet-search-filter { display: flex; gap: 8px; } .e-con:not(.vf-section):has(> [class*="elementor-widget-jet-smart-filters"]:not(.elementor-widget-jet-smart-filters-pagination)) .jet-search-filter__input { flex: 1 1 auto; min-width: 0; height: 44px !important; padding: 0 12px !important; font: 400 1rem/1 "Inter", sans-serif !important; color: var(--vf-graphite) !important; background: #FFFFFF !important; border: 1px solid var(--vf-border-strong) !important; border-radius: 6px !important; } .e-con:not(.vf-section):has(> [class*="elementor-widget-jet-smart-filters"]:not(.elementor-widget-jet-smart-filters-pagination)) .jet-search-filter__submit { flex: 0 0 44px; height: 44px; padding: 0 !important; color: #FFFFFF !important; background: var(--vf-graphite) !important; border: 0 !important; border-radius: 6px !important; } /* Coluna da grade */ /* so na coluna da grade que fica ao lado do filtro (nao afeta outras secoes com Listing) */ .e-con:has(> .e-con [class*="elementor-widget-jet-smart-filters"]) > .e-con:not(.vf-section):has(> .elementor-widget-jet-listing-grid) { display: flex !important; flex-direction: column !important; align-items: stretch !important; gap: 24px !important; width: 100% !important; max-width: none !important; min-width: 0; margin: 0 !important; padding: 0 !important; } .jet-listing-grid.jet-listing-grid-loading .jet-listing-grid__items, .jet-listing-grid__items.jet-listing-grid-loading { opacity: 0.45; pointer-events: none; transition: opacity 160ms ease; } /* Carregar mais (Listing Grid) e paginacao */ .jet-listing-grid__loader + .jet-listing-grid__load-more, .jet-listing-grid__load-more, .jet-filters-pagination__link { font-family: "Inter", sans-serif; } .jet-listing-grid__more-wrap { display: flex; justify-content: center; margin-top: 32px; } .jet-listing-grid__more { display: inline-flex; align-items: center; gap: 12px; height: 52px; padding: 0 24px; border: 1px solid #161616; border-radius: 4px; font: 600 15px/1 Inter, sans-serif; color: #161616; background: transparent; cursor: pointer; transition: background-color 200ms var(--vf-ease), color 200ms var(--vf-ease); } .jet-listing-grid__more:hover { color: #FFFFFF; background: #161616; } .jet-filters-pagination { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; margin-top: 32px; font-family: "Inter", sans-serif; } .jet-filters-pagination__item .jet-filters-pagination__link { display: inline-flex; align-items: center; justify-content: center; min-width: 40px; height: 40px; padding: 0 12px; font-size: 0.875rem; font-weight: 600; color: #38383D; background: #FFFFFF; border: 1px solid #DEDEE1; border-radius: 4px; cursor: pointer; } .jet-filters-pagination__item .jet-filters-pagination__link:hover { border-color: #85858C; } .jet-filters-pagination__current .jet-filters-pagination__link { color: #FFFFFF; background: #1C1C1E; border-color: #1C1C1E; } /* Celular e tablet: botao que abre e fecha a lista (criado pelo PHP) */ .vf-filter-toggle { display: none; } @media (max-width: 1024px) { .vf-filter-toggle { display: flex; align-items: center; justify-content: space-between; gap: 12px; width: 100%; height: 52px; padding: 0 16px; border: 1px solid #161616; border-radius: 6px; font: 600 15px/1 Inter, sans-serif; color: #FFFFFF; background: #161616; cursor: pointer; } .vf-filter-toggle__label { display: inline-flex; align-items: center; gap: 10px; } .vf-filter-toggle__label::before { content: ""; width: 18px; height: 18px; background: currentColor; -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='square'%3E%3Cpath d='M4 6h16M7 12h10M10 18h4'/%3E%3C/svg%3E") center / contain no-repeat; mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='square'%3E%3Cpath d='M4 6h16M7 12h10M10 18h4'/%3E%3C/svg%3E") center / contain no-repeat; } .vf-filter-toggle__count { min-width: 24px; height: 24px; padding: 0 7px; border-radius: 999px; font-size: 12px; line-height: 24px; text-align: center; color: #FFFFFF; background: var(--vf-red); } .vf-filter-toggle__count:empty { display: none; } .vf-filter-toggle__chev { width: 12px; height: 12px; border-right: 2px solid currentColor; border-bottom: 2px solid currentColor; transform: rotate(45deg) translate(-3px, -3px); transition: transform 200ms var(--vf-ease); } .vf-filter-open .vf-filter-toggle__chev { transform: rotate(-135deg); } .e-con.vf-filter-host:not(.vf-filter-open) :is(.jet-filter-items-search, .jet-checkboxes-list-wrapper) { display: none !important; } .e-con.vf-filter-host.vf-filter-open .jet-checkboxes-list-wrapper { animation: vf-rise 300ms var(--vf-ease-soft); } } @media (prefers-reduced-motion: reduce) { .e-con:not(.vf-section):has(> [class*="elementor-widget-jet-smart-filters"]:not(.elementor-widget-jet-smart-filters-pagination)) * { transition: none !important; } } /* -------------------------------------------------------------------------- 16. Blog 16.1 Card do post no Listing (Flexbox vf-post-card > vf-post-card__media + vf-post-card__body). Estrutura garantida pelo CSS: foto 16:10, data, titulo em 2 linhas, resumo em 3 linhas e "Ler artigo" com seta. -------------------------------------------------------------------------- */ :root .elementor .vf-post-card { display: flex; flex-direction: column; gap: 0; height: 100%; padding: 0; border: 1px solid #E4E4E7; border-radius: 8px; background: #FFFFFF; overflow: hidden; text-decoration: none; transition: transform 400ms var(--vf-ease-soft), box-shadow 400ms var(--vf-ease), border-color 300ms var(--vf-ease); } .elementor .vf-post-card:hover { transform: translateY(-4px); border-color: #D9D9DD; box-shadow: 0 30px 50px -34px rgba(22, 22, 22, 0.45); } :root .elementor .vf-post-card__media { position: relative; width: 100%; aspect-ratio: 16 / 10; padding: 0; overflow: hidden; border-radius: 0; background: #ECECEE; } .elementor .vf-post-card__media img { width: 100% !important; height: 100% !important; object-fit: cover; transition: transform 900ms var(--vf-ease-soft); } .elementor .vf-post-card:hover .vf-post-card__media img { transform: scale(1.05); } :root .elementor .vf-post-card__body { display: flex; flex-direction: column; gap: 10px; flex: 1 1 auto; padding: 22px 24px 24px !important; overflow: visible; } :root .elementor .vf-post-card__body .e-con { display: flex; flex-direction: column; gap: 10px; padding: 0; } .elementor .vf-post-card__body .vf-eyebrow { font-size: 11px; color: #77777D; } .elementor .vf-post-card__title, .elementor .vf-post-card__body :is(h2, h3) { margin: 0; font-family: Inter, sans-serif; font-size: 20px !important; font-weight: 600 !important; line-height: 1.3 !important; letter-spacing: -0.015em; color: #161616 !important; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; transition: color 200ms var(--vf-ease); } .elementor .vf-post-card:hover :is(.vf-post-card__title, h2, h3) { color: var(--vf-red) !important; } .elementor .vf-post-card__body .vf-small { display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; } .elementor .vf-post-card__body::after { content: "Ler artigo"; margin-top: auto; padding-top: 8px; padding-right: 24px; width: max-content; font: 600 14px/1.4 Inter, sans-serif; color: #161616; background: var(--vf-arrow-dark) right center / 16px no-repeat; transition: padding-right 300ms var(--vf-ease-soft), color 200ms var(--vf-ease); } .elementor .vf-post-card:hover .vf-post-card__body::after { padding-right: 30px; color: var(--vf-red); } /* 16.2 Grade do blog (classe vf-blog-grid no Listing Grid): o primeiro post da pagina 1 vira destaque horizontal (regra 10.12); espacamento uniforme. */ .vf-blog-grid .jet-listing-grid__items { row-gap: 24px; } @media (min-width: 1025px) { body:not(.paged) .vf-blog-grid .jet-listing-grid__item:first-child .vf-post-card__body { padding: 40px !important; justify-content: center; } body:not(.paged) .vf-blog-grid .jet-listing-grid__item:first-child .vf-post-card__media { aspect-ratio: auto; min-height: 380px; } body:not(.paged) .vf-blog-grid .jet-listing-grid__item:first-child .vf-post-card__title { -webkit-line-clamp: 3; font-size: 32px !important; } } /* 16.3 Pagina do post: linha de dados (vf-meta), barra lateral (vf-post-aside) com cartoes (vf-aside-card, vf-aside-card--dark) e banners que alternam sozinhos (vf-rotator). */ :root .elementor .vf-meta { display: flex; flex-direction: row; flex-wrap: wrap; align-items: center; gap: 8px 0; padding: 0; } .elementor .vf-meta > * { display: inline-flex; align-items: center; font-size: 14px; color: #585858; } .elementor .vf-meta > * + *::before { content: ""; width: 4px; height: 4px; margin: 0 12px; border-radius: 50%; background: #C7C7CC; } :root .elementor .vf-post-aside { display: flex; flex-direction: column; gap: 16px; padding: 0; } @media (min-width: 1025px) { :root .elementor .vf-post-aside { position: sticky; top: var(--vf-sticky-top); align-self: start; } } :root .elementor .vf-aside-card { display: flex; flex-direction: column; gap: 12px; padding: 24px; border: 1px solid #E4E4E7; border-radius: 8px; background: #FFFFFF; } :root .elementor .vf-aside-card.vf-aside-card--dark { border-color: #161616; background: #161616 radial-gradient(120% 120% at 100% 0%, rgba(212, 20, 20, 0.3), rgba(212, 20, 20, 0) 55%); } .elementor .vf-aside-card--dark :is(h3, h4, .e-heading-base) { color: #FFFFFF !important; } .elementor .vf-aside-card--dark .e-paragraph-base { color: #A1A1A6 !important; } .elementor .vf-aside-card :is(h3, h4, .e-heading-base) { margin: 0; font-size: 20px; font-weight: 600; line-height: 1.3; color: #161616; } .elementor .vf-aside-card .e-paragraph-base { margin: 0; font-size: 14px; line-height: 1.55; color: #585858; } .elementor .vf-aside-card .e-button-base.vf-btn { width: 100%; } .elementor .vf-aside-card .e-image-base { width: 100%; aspect-ratio: 16 / 10; object-fit: cover; border-radius: 6px; } /* Banners que alternam: Flexbox vf-rotator com 2 a 4 cartoes dentro */ :root .elementor .vf-rotator { position: relative; display: grid; padding: 0; gap: 0; } :root .elementor .vf-rotator > * { grid-area: 1 / 1; transition: opacity 600ms var(--vf-ease), transform 600ms var(--vf-ease-soft); } html.vf-js .elementor .vf-rotator > :not(.is-current) { opacity: 0; transform: translateY(8px); pointer-events: none; visibility: hidden; } .vf-rotator__dots { display: flex; justify-content: center; gap: 6px; margin-top: 12px; } .vf-rotator__dot { width: 8px; height: 8px; padding: 0; border: 0; border-radius: 999px; background: #D9D9DD; cursor: pointer; transition: width 300ms var(--vf-ease), background-color 300ms var(--vf-ease); } .vf-rotator__dot.is-current { width: 22px; background: var(--vf-red); } /* Indice do artigo (widget Indice/Table of contents com a classe vf-toc) */ .vf-toc .elementor-toc { padding: 0 !important; border: 0 !important; border-radius: 0 !important; background: none !important; box-shadow: none !important; } .vf-toc .elementor-toc__toggle-button { display: none !important; } .vf-toc .elementor-toc__list-wrapper .elementor-toc__list-wrapper { padding-left: 12px !important; } .vf-toc .elementor-toc__list-item { margin: 0 !important; } .vf-toc .elementor-toc__list-item-text-wrapper::before { display: none !important; } .vf-toc .elementor-toc__header { padding: 0 0 12px !important; border: 0 !important; background: none !important; } .vf-toc .elementor-toc__header-title { font: 600 11px/1 Inter, sans-serif !important; letter-spacing: 0.12em; text-transform: uppercase; color: #77777D !important; } .vf-toc .elementor-toc__body { padding: 0 !important; } .vf-toc .elementor-toc__list-item-text { display: block; padding: 8px 0 8px 14px; border-left: 2px solid #E4E4E7; font: 500 14px/1.4 Inter, sans-serif !important; color: #585858 !important; text-decoration: none !important; transition: color 200ms var(--vf-ease), border-color 200ms var(--vf-ease); } .vf-toc .elementor-toc__list-item-text:hover, .vf-toc .elementor-toc__list-item-text.elementor-item-active { color: #161616 !important; border-left-color: var(--vf-red); } .vf-toc .elementor-toc__list-wrapper { padding: 0 !important; margin: 0 !important; list-style: none !important; } @media (prefers-reduced-motion: reduce) { .vf-steplist *, .vf-feature, .vf-feature *, .vf-cert, .vf-cert *, .vf-post-card, .vf-post-card *, .vf-rotator > * { transition: none !important; animation: none !important; } } /* -------------------------------------------------------------------------- 17. Acabamento final (v12.9) Padroes que valem para o site inteiro + componentes novos. Tudo aqui vence os estilos locais sem !important (seletores com :root). -------------------------------------------------------------------------- */ /* 17.1 Tipografia: sem palavras sozinhas e linhas equilibradas - Titulos: as linhas ficam com tamanhos parecidos (balance). - Textos: o navegador evita deixar uma palavra sozinha na ultima linha (pretty). - O PHP v12.9 junta as duas ultimas palavras com espaco fixo (navegadores antigos). */ :root .elementor :is(h1, h2, h3, h4, h5, h6) { font-family: "Inter", sans-serif; text-wrap: balance; } :root .elementor :is(.vf-lead, .e-paragraph-base, .vf-prose p, .elementor-widget-text-editor p) { text-wrap: pretty; } :root .elementor p.vf-lead, :root .elementor .vf-lead { text-wrap: balance; max-width: 58ch; } :root .elementor .vf-section-head .vf-lead { max-width: 56ch; } /* H1 dos Heros (todas as paginas): tamanho unico, sem palavras isoladas. Vence o tamanho e a largura colocados no chip local do titulo. */ :root .elementor .vf-section h1.e-heading-base { width: auto; max-width: 20ch; font-family: "Inter", sans-serif; font-size: clamp(2.375rem, 1.45rem + 2.6vw, 4rem); font-weight: 600; line-height: 1.04; letter-spacing: -0.045em; } :root .elementor .vf-section--dark h1.e-heading-base { color: #FFFFFF; } /* H1 curto (nome do catalogo, da categoria, "Catalogos"): pode crescer um pouco */ :root .elementor .vf-section h1.e-heading-base.vf-h1--xl { max-width: none; font-size: clamp(2.75rem, 1.5rem + 3.6vw, 5rem); } /* H2 das secoes: tamanho unico (32 a 48 px) e linhas equilibradas. Nao afeta titulos de cards, de listagens e de banners grandes. */ :root .elementor .vf-section h2.e-heading-base:not(.vf-post-card__title):not(.jet-listing-grid *):not(.vf-card *):not(.vf-banner-fx *):not(.vf-aside-card *) { max-width: 20ch; font-family: "Inter", sans-serif; font-size: clamp(1.875rem, 1.3rem + 1.5vw, 2.75rem); font-weight: 600; line-height: 1.08; letter-spacing: -0.035em; } /* Topo de secao com o titulo a esquerda e o texto a direita: o titulo usa a largura toda da coluna */ :root .elementor .vf-section-head:has(> .e-con) h2.e-heading-base { max-width: none; } /* Banner de destaque (Home 08 e afins): titulo grande, mas equilibrado */ :root .elementor .vf-banner-fx { container-type: inline-size; } :root .elementor .vf-banner-fx h2.e-heading-base { max-width: 15ch; font-size: clamp(2rem, 7cqi, 4rem); overflow-wrap: break-word; font-weight: 600; line-height: 1.02; letter-spacing: -0.045em; } /* Paragrafo grande de apresentacao ("Sobre esta frente"): ver 17.10 */ /* 17.2 Ritmo vertical padrao Rotulo -> titulo 16 px | titulo -> texto 16 px | texto -> botoes 32 px. Nas secoes em que rotulo e titulo ficam soltos dentro da vf-section (espaco de 48 px), o titulo sobe para ficar a 16 px do rotulo. O PHP v12.9 faz o mesmo nos outros blocos. */ /* (o ajuste e feito pelo PHP v12.9, que le o espacamento real de cada bloco) */ /* Linha vermelha decorativa entre titulo e texto (Hero de Catalogos e Categoria) */ :root .elementor .vf-section > .e-div-block-base.vf-reveal { width: 72px; height: 3px; min-width: 0; padding: 0; background: var(--vf-red); } /* 17.3 Home 02 - Duas frentes: textos alinhados entre os cards Os textos comecam na mesma altura nos dois cards; a foto recortada do card B fica no alto, a direita, sem empurrar o texto. */ @media (min-width: 1025px) { :root .elementor .vf-split:not(.vf-split--accordion) > .e-con { justify-content: flex-start; padding: clamp(260px, 22vw, 330px) 48px 48px; gap: 14px; } :root .elementor .vf-split:not(.vf-split--accordion) > .e-con > .e-image-base:first-child { position: absolute; top: 40px; right: 40px; width: min(58%, 380px); height: auto; margin: 0; pointer-events: none; } } :root .elementor .vf-split:not(.vf-split--accordion) > .e-con :is(h2, h3, .e-heading-base) { max-width: 19ch; font-size: clamp(2rem, 1.3rem + 1.5vw, 2.75rem); line-height: 1.06; letter-spacing: -0.035em; } :root .elementor .vf-split:not(.vf-split--accordion) > .e-con .e-paragraph-base:not(.vf-link):not(.vf-small) { max-width: 42ch; font-size: 15px; line-height: 1.6; } :root .elementor .vf-split:not(.vf-split--accordion) > .e-con > .vf-link { margin-top: 10px; } @media (max-width: 1024px) { :root .elementor .vf-split:not(.vf-split--accordion) > .e-con { justify-content: flex-end; padding: 32px 28px; } :root .elementor .vf-split:not(.vf-split--accordion) > .e-con > .e-image-base:first-child { width: 70%; margin: 0 0 auto auto; } } /* 17.4 Home 05 - Tubulacao: textos mais legiveis e do mesmo tamanho */ :root .elementor .vf-pipeline__step .vf-small { font-size: 15px; line-height: 1.55; color: #45454B; max-width: 30ch; } :root .elementor .vf-pipeline__step :is(h3, .e-heading-base) { font-size: 20px; } @media (min-width: 768px) { :root .elementor .vf-pipeline__step > .e-con:not(.vf-pipeline__valve) { min-height: 140px; } } /* Selo de tranquilidade: "Sem pagamento e sem compromisso" Classe vf-assurance no Paragrafo que fica ao lado do botao. */ :root .elementor .vf-assurance { position: relative; display: inline-block; width: auto; max-width: 560px; margin: 0; padding: 12px 20px 12px 54px; font: 500 15px/1.4 "Inter", sans-serif; color: #1C1C1E; background: #FFFFFF; border: 1px solid #DEDEE1; border-radius: 999px; box-shadow: 0 14px 30px -24px rgba(22, 22, 22, 0.45); } :root .elementor .vf-assurance::before { content: ""; position: absolute; left: 10px; top: 50%; width: 32px; height: 32px; margin-top: -16px; border-radius: 50%; background: #EAF8F1 url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2316794A' stroke-width='2' stroke-linejoin='round'%3E%3Cpath d='M12 3l7 3v5c0 4.5-3 8.3-7 10-4-1.7-7-5.5-7-10V6z'/%3E%3Cpath d='M8.5 12l2.5 2.5 4.5-5'/%3E%3C/svg%3E") center / 18px no-repeat; } :root .elementor .vf-assurance strong { font-weight: 700; } :root .elementor .vf-section--dark .vf-assurance { color: #FFFFFF; background: rgba(255, 255, 255, 0.06); border-color: rgba(255, 255, 255, 0.16); box-shadow: none; } :root .elementor .vf-actions:has(> .vf-assurance) { align-items: center; gap: 16px 20px; flex-wrap: wrap; } @media (max-width: 767px) { :root .elementor .vf-assurance { width: 100%; max-width: none; border-radius: 12px; font-size: 14px; } } /* 17.5 Fundos com "tchan": vf-banner-fx (banners vermelhos) e vf-hero-fx (Heros escuros) vf-banner-fx: vermelho em profundidade + linhas de tubulacao em movimento lento + valvula gigante vazada no canto. Vai no Flexbox do banner. vf-banner-fx--dark: mesma ideia em grafite (para banners claros que devem escurecer). vf-hero-fx: grade tecnica sutil + brilho vermelho + linha de fluxo que atravessa. O conteudo fica sempre por cima (z-index). */ :root .elementor .vf-banner-fx { position: relative; overflow: hidden; isolation: isolate; background: radial-gradient(90% 120% at 100% 0%, #E8312F 0%, rgba(232, 49, 47, 0) 55%), linear-gradient(135deg, #D41414 0%, #B10F12 100%); } :root .elementor .vf-banner-fx.vf-banner-fx--dark { background: radial-gradient(80% 120% at 100% 0%, rgba(212, 20, 20, 0.35) 0%, rgba(212, 20, 20, 0) 55%), #161616; } .elementor .vf-banner-fx::before { content: ""; position: absolute; inset: 0; z-index: -1; background: repeating-linear-gradient(0deg, rgba(255, 255, 255, 0.06) 0 1px, transparent 1px 56px), repeating-linear-gradient(90deg, rgba(255, 255, 255, 0.035) 0 1px, transparent 1px 56px); -webkit-mask: linear-gradient(90deg, transparent 0%, #000 45%, #000 100%); mask: linear-gradient(90deg, transparent 0%, #000 45%, #000 100%); animation: vf-grid-flow 18s linear infinite; } .elementor .vf-banner-fx::after { content: ""; position: absolute; right: -4%; bottom: -38%; z-index: -1; width: min(48vw, 460px); aspect-ratio: 1; background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100' fill='none' stroke='%23FFFFFF' stroke-opacity='0.14' stroke-width='0.8'%3E%3Cpath d='M8 22l42 28L8 78z'/%3E%3Cpath d='M92 22L50 50l42 28z'/%3E%3Ccircle cx='50' cy='50' r='4'/%3E%3Cpath d='M50 46V20M42 20h16'/%3E%3C/svg%3E") center / contain no-repeat; transform-origin: 50% 50%; animation: vf-valve-float 14s var(--vf-ease) infinite alternate; } .elementor .vf-banner-fx > * { position: relative; z-index: 1; } :root .elementor .vf-banner-fx :is(h1, h2, h3, .e-heading-base) { color: #FFFFFF; } :root .elementor .vf-banner-fx .e-paragraph-base:not(.vf-btn):not(.vf-eyebrow) { color: rgba(255, 255, 255, 0.9); } :root .elementor .vf-banner-fx .vf-eyebrow { color: #FFFFFF; } :root .elementor .vf-banner-fx:not(.vf-banner-fx--dark) .vf-eyebrow__num { color: #FFFFFF; } :root .elementor .vf-banner-fx:not(.vf-banner-fx--dark) .vf-eyebrow .vf-valve { background: #FFFFFF; } /* Linha de "fluxo" que corre por baixo do titulo */ .elementor .vf-banner-fx :is(h2, .e-heading-base)::after { content: ""; display: block; width: 96px; height: 3px; margin-top: 24px; background: linear-gradient(90deg, #FFFFFF 0 40%, rgba(255, 255, 255, 0.35) 40% 100%); background-size: 200% 100%; animation: vf-flow-dash 2.4s linear infinite; } @keyframes vf-grid-flow { to { background-position: 0 56px, 56px 0; } } @keyframes vf-valve-float { from { transform: translateY(0) rotate(-4deg); } to { transform: translateY(-4%) rotate(4deg); } } @keyframes vf-flow-dash { from { background-position: 100% 0; } to { background-position: -100% 0; } } /* Hero escuro com textura (Catalogos, Categoria, Post, Industria) */ :root .elementor .vf-hero-fx { position: relative; overflow: hidden; isolation: isolate; } .elementor .vf-hero-fx::before { content: ""; position: absolute; inset: 0; z-index: 0; pointer-events: none; background: radial-gradient(60% 80% at 85% 10%, rgba(212, 20, 20, 0.28), rgba(212, 20, 20, 0) 60%), linear-gradient(90deg, rgba(22, 22, 22, 0.92) 0%, rgba(22, 22, 22, 0.55) 55%, rgba(22, 22, 22, 0.2) 100%), repeating-linear-gradient(0deg, rgba(255, 255, 255, 0.045) 0 1px, transparent 1px 64px), repeating-linear-gradient(90deg, rgba(255, 255, 255, 0.045) 0 1px, transparent 1px 64px); } .elementor .vf-hero-fx::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; z-index: 0; height: 3px; pointer-events: none; background: linear-gradient(90deg, transparent 0%, var(--vf-red) 20%, #FF5A4F 50%, var(--vf-red) 80%, transparent 100%); background-size: 50% 100%; background-repeat: no-repeat; animation: vf-hero-line 6s var(--vf-ease) infinite; } .elementor .vf-hero-fx > * { position: relative; z-index: 1; } @keyframes vf-hero-line { 0% { background-position: -60% 0; } 100% { background-position: 160% 0; } } @media (prefers-reduced-motion: reduce) { .elementor .vf-banner-fx::before, .elementor .vf-banner-fx::after, .elementor .vf-hero-fx::after, .elementor .vf-banner-fx :is(h2, .e-heading-base)::after { animation: none; } } /* 17.5b O Elementor usa o ::before de todo Flexbox para a sobreposicao de fundo (posicao, tamanho, borda). Nos componentes abaixo o ::before e nosso: zera o dele. */ .elementor :is(.vf-banner-fx, .vf-hero-fx, .vf-pillar, .vf-cta-card, .vf-post-hero, .e-con.vf-cert)::before { border: 0; mix-blend-mode: normal; opacity: 1; transition: none; } .elementor :is(.vf-pillar, .vf-cta-card)::before { left: auto; top: auto; } .elementor :is(.vf-banner-fx, .vf-hero-fx, .vf-post-hero)::before { width: auto; height: auto; border-radius: 0; } /* 17.6 Quem Somos vf-signature: assinatura da trajetoria em destaque (Paragrafo "Assinatura"). vf-pillar: cards de Missao e Visao (fundo escuro, alvo animado, brilho). vf-cta-card: card que fecha a grade de valores (card 8) com mais forca. */ :root .elementor .vf-signature { position: relative; margin: 8px 0 0; padding: 28px 32px 28px 92px; font: 600 clamp(1.25rem, 1rem + 0.8vw, 1.625rem)/1.3 "Inter", sans-serif; letter-spacing: -0.02em; color: #161616; background: linear-gradient(90deg, #FFFFFF 0%, rgba(255, 255, 255, 0.6) 100%); border: 1px solid #E4E4E7; border-left: 4px solid var(--vf-red); border-radius: 0 10px 10px 0; box-shadow: 0 30px 50px -40px rgba(22, 22, 22, 0.35); } :root .elementor .vf-signature::before { content: ""; position: absolute; left: 28px; top: 28px; width: 40px; height: 40px; border-radius: 8px; background: var(--vf-red) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%23FFFFFF'%3E%3Cpath d='M3 6l9 6-9 6zM21 6l-9 6 9 6z'/%3E%3C/svg%3E") center / 22px no-repeat; box-shadow: 0 10px 24px -10px rgba(212, 20, 20, 0.7); } :root .elementor .vf-signature strong, :root .elementor .vf-signature em { color: var(--vf-red); font-style: normal; } @media (max-width: 767px) { :root .elementor .vf-signature { padding: 76px 22px 22px; } :root .elementor .vf-signature::before { left: 22px; top: 22px; } } :root .elementor .vf-pillar { position: relative; overflow: hidden; isolation: isolate; display: flex; flex-direction: column; gap: 16px; min-height: 300px; padding: 44px; background: linear-gradient(160deg, #232326 0%, #1A1A1C 100%); border: 1px solid #2E2E32; border-radius: 10px; transition: transform 500ms var(--vf-ease-soft), border-color 300ms var(--vf-ease), box-shadow 500ms var(--vf-ease); } .elementor .vf-pillar::before { content: ""; position: absolute; right: -70px; top: -70px !important; z-index: -1; width: 280px; height: 280px; border-radius: 50%; background: radial-gradient(circle, rgba(212, 20, 20, 0.5) 0 6px, transparent 7px), repeating-radial-gradient(circle, rgba(255, 255, 255, 0.07) 0 1px, transparent 1px 28px); transition: transform 900ms var(--vf-ease-soft); } .elementor .vf-pillar::after { content: ""; position: absolute; left: 0; bottom: 0; height: 3px; width: 100%; background: var(--vf-red); transform: scaleX(0.25); transform-origin: left; transition: transform 700ms var(--vf-ease-soft); } :root .elementor .vf-pillar .vf-eyebrow { color: var(--vf-red); } :root .elementor .vf-pillar :is(h3, .e-heading-base) { max-width: 18ch; font-size: clamp(1.5rem, 1.1rem + 1vw, 2rem); line-height: 1.15; letter-spacing: -0.03em; color: #FFFFFF; } :root .elementor .vf-pillar .e-paragraph-base:not(.vf-eyebrow) { max-width: 46ch; font-size: 16px; line-height: 1.6; color: #A1A1A6; } .elementor .vf-pillar:hover { transform: translateY(-4px); border-color: #3A3A3F; box-shadow: 0 40px 70px -40px rgba(0, 0, 0, 0.9); } .elementor .vf-pillar:hover::before { transform: scale(1.12) rotate(20deg); transition: transform 900ms var(--vf-ease-soft); } .elementor .vf-pillar:hover::after { transform: scaleX(1); } @media (max-width: 767px) { :root .elementor .vf-pillar { min-height: 0; padding: 30px 24px; } } :root .elementor .vf-cta-card { position: relative; overflow: hidden; isolation: isolate; display: flex; flex-direction: column; justify-content: space-between; gap: 16px; padding: 32px; background: radial-gradient(120% 100% at 100% 0%, #EC3B35 0%, rgba(236, 59, 53, 0) 60%), linear-gradient(150deg, #D41414 0%, #A80E10 100%); border-radius: 10px; box-shadow: 0 30px 60px -30px rgba(212, 20, 20, 0.65); transition: transform 500ms var(--vf-ease-soft), box-shadow 500ms var(--vf-ease); } .elementor .vf-cta-card::before { content: ""; position: absolute; right: -40px; bottom: -50px; z-index: -1; width: 220px; border-radius: 0; height: 220px; background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100' fill='none' stroke='%23FFFFFF' stroke-opacity='0.22' stroke-width='1'%3E%3Cpath d='M8 22l42 28L8 78z'/%3E%3Cpath d='M92 22L50 50l42 28z'/%3E%3C/svg%3E") center / contain no-repeat; transition: transform 900ms var(--vf-ease-soft); } :root .elementor .vf-cta-card :is(h3, .e-heading-base) { font-size: 22px; line-height: 1.2; color: #FFFFFF; } :root .elementor .vf-cta-card .e-paragraph-base:not(.vf-btn) { font-size: 15px; line-height: 1.55; color: rgba(255, 255, 255, 0.9); } :root .elementor .vf-cta-card .vf-btn { align-self: flex-start; } .elementor .vf-cta-card:hover { transform: translateY(-4px); box-shadow: 0 40px 70px -30px rgba(212, 20, 20, 0.8); } .elementor .vf-cta-card:hover::before { transform: rotate(-12deg) scale(1.1); } /* 17.7 Credenciais (vf-cert) - v12.9: cartao grande com selo em destaque Estrutura do Card (classe vf-card vf-cert ou so vf-cert): Imagem do selo + Flexbox "textos" (Paragrafo vf-caption, Titulo, Paragrafo, link opcional) O CSS monta: selo em um painel claro a esquerda (com anel que gira no hover), etiqueta "Verificado" verde e textos a direita. No celular, selo em cima. */ :root .elementor .e-con.vf-cert { position: relative; display: grid; grid-template-columns: 168px minmax(0, 1fr); grid-auto-rows: min-content; align-items: center; align-content: center; gap: 0 28px; min-height: 0; padding: 24px 32px 24px 24px; background: #FFFFFF; border: 1px solid #E4E4E7; border-radius: 12px; box-shadow: 0 30px 60px -45px rgba(22, 22, 22, 0.45); overflow: hidden; isolation: isolate; transition: transform 500ms var(--vf-ease-soft), box-shadow 500ms var(--vf-ease), border-color 300ms var(--vf-ease); } .elementor .e-con.vf-cert::before { content: "Verificado"; position: absolute; top: 18px; right: 18px; left: auto; width: auto; height: 26px; display: inline-flex; align-items: center; gap: 6px; padding: 0 10px 0 26px; font: 600 11px/1 "Inter", sans-serif; letter-spacing: 0.08em; text-transform: uppercase; color: #16794A; background: #EAF8F1 url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2316794A' stroke-width='3' stroke-linecap='square'%3E%3Cpath d='M5 12.5l4.5 4.5L19 7.5'/%3E%3C/svg%3E") 9px center / 11px no-repeat; border-radius: 999px; z-index: 2; } .elementor .e-con.vf-cert::after { content: ""; position: absolute; inset: 0 auto 0 0; width: 4px; background: var(--vf-red); transform: scaleY(0.3); transform-origin: top; transition: transform 700ms var(--vf-ease-soft); } /* Painel do selo */ :root .elementor .e-con.vf-cert > .e-image-base, :root .elementor .e-con.vf-cert > .elementor-widget-image { grid-column: 1; grid-row: 1 / span 6; width: 168px !important; height: 168px !important; max-width: none; margin: 0; padding: 18px; align-self: center; object-fit: contain; background: radial-gradient(circle at 50% 40%, #FFFFFF 0%, #F3F3F5 70%); border: 1px solid #ECECEF; border-radius: 10px; box-shadow: inset 0 0 0 6px #FFFFFF, inset 0 0 0 7px #EFEFF1; transition: transform 700ms var(--vf-ease-soft); } :root .elementor .e-con.vf-cert > :not(.e-image-base):not(.elementor-widget-image) { grid-column: 2; min-width: 0; padding-right: 0; } :root .elementor .e-con.vf-cert > :not(.e-image-base):not(.elementor-widget-image) + :not(.e-image-base) { margin-top: 8px; } :root .elementor .e-con.vf-cert > .e-con { display: flex; flex-direction: column; gap: 8px; padding: 0 0 0 0; } :root .elementor .e-con.vf-cert :is(h3, h4, .e-heading-base) { margin: 0; max-width: 24ch; padding-right: 0; font: 700 clamp(1.25rem, 1.05rem + 0.6vw, 1.5rem)/1.2 "Inter", sans-serif; letter-spacing: -0.02em; color: #161616; } :root .elementor .e-con.vf-cert:not(:has(.vf-caption)) :is(h3, h4, .e-heading-base) { padding-right: 112px; } :root .elementor .e-con.vf-cert .vf-caption { order: -1; padding-right: 112px; font: 600 11px/1.2 "Inter", sans-serif; letter-spacing: 0.12em; text-transform: uppercase; color: var(--vf-red); } :root .elementor .e-con.vf-cert .e-paragraph-base:not(.vf-caption):not(.vf-link) { max-width: 48ch; font-size: 15px; line-height: 1.6; color: #515157; } :root .elementor .e-con.vf-cert .vf-link { margin-top: 6px; font-weight: 600; color: #161616; } .elementor .e-con.vf-cert:hover { transform: translateY(-4px); border-color: #D9D9DD; box-shadow: 0 40px 70px -40px rgba(22, 22, 22, 0.5); } .elementor .e-con.vf-cert:hover::after { transform: scaleY(1); } .elementor .e-con.vf-cert:hover > :is(.e-image-base, .elementor-widget-image) { transform: scale(1.04) rotate(-2deg); } /* Fundo escuro */ :root .elementor .e-con.vf-cert.vf-cert--dark { background: #1C1C1E; border-color: #2E2E32; } :root .elementor .e-con.vf-cert.vf-cert--dark :is(h3, h4, .e-heading-base) { color: #FFFFFF; } :root .elementor .e-con.vf-cert.vf-cert--dark .e-paragraph-base:not(.vf-caption) { color: #A1A1A6; } @media (max-width: 767px) { :root .elementor .e-con.vf-cert { grid-template-columns: minmax(0, 1fr); gap: 20px; padding: 22px; } :root .elementor .e-con.vf-cert > :is(.e-image-base, .elementor-widget-image) { grid-row: auto; width: 120px !important; height: 120px !important; padding: 18px; } :root .elementor .e-con.vf-cert > :not(.e-image-base):not(.elementor-widget-image) { grid-column: 1; } :root .elementor .e-con.vf-cert :is(h3, h4, .e-heading-base) { padding-right: 0; } } /* Grade dos selos: dois cards largos lado a lado */ :root .elementor .e-con:has(> .e-con.vf-cert) { gap: 20px; } /* 17.8 Cards dos catalogos: "Ver catalogo" sempre no pe do card */ :root .elementor .vf-card { height: 100%; } :root .elementor .vf-card > .vf-card__body { flex: 1 1 auto; display: flex; flex-direction: column; } :root .elementor .vf-card > .vf-card__body > .vf-link:last-child { margin-top: auto; padding-top: 16px; } /* 17.9 Filtro: titulo dentro OU fora da caixa Dentro: o topo (Flexbox vf-section-head) fica compacto, com uma linha embaixo. Fora (direto na linha do catalogo): ocupa a largura toda, acima do filtro e da grade. */ :root .elementor .e-con:not(.vf-section):has(> [class*="elementor-widget-jet-smart-filters"]:not(.elementor-widget-jet-smart-filters-pagination)) > .vf-section-head { gap: 6px !important; max-width: none; padding: 0 0 14px !important; border-bottom: 1px solid var(--vf-divider); } :root .elementor .e-con:not(.vf-section):has(> [class*="elementor-widget-jet-smart-filters"]:not(.elementor-widget-jet-smart-filters-pagination)) > .vf-section-head :is(h2, .e-heading-base) { max-width: none; font-size: 18px !important; line-height: 1.3 !important; letter-spacing: -0.01em; margin: 0 !important; } :root .elementor .e-con:has(> .e-con > [class*="elementor-widget-jet-smart-filters"]:not(.elementor-widget-jet-smart-filters-pagination)) > .vf-section-head, :root .elementor .e-con:has(> .e-con > [class*="elementor-widget-jet-smart-filters"]:not(.elementor-widget-jet-smart-filters-pagination)) > .vf-eyebrow, :root .elementor .e-con:has(> .e-con > [class*="elementor-widget-jet-smart-filters"]:not(.elementor-widget-jet-smart-filters-pagination)) > :is(h2, .e-heading-base) { grid-column: 1 / -1; width: 100%; margin-bottom: 8px; } /* 17.10 Apresentacao do catalogo ("Sobre esta frente" / "Apresentacao") vf-statement (no Paragrafo grande): texto forte com as palavras em negrito sublinhadas por um traco vermelho que se desenha ao aparecer, e um fio vertical a esquerda. vf-chip-grid (no Flexbox dos chips): os chips viram blocos graficos com a valvula, em grafite, com hover vermelho. */ :root .elementor .vf-statement { position: relative; max-width: 30ch; margin: 0; padding-left: clamp(20px, 3vw, 40px); font: 500 clamp(1.625rem, 1.1rem + 1.7vw, 2.75rem)/1.18 "Inter", sans-serif; letter-spacing: -0.025em; color: #161616; text-wrap: balance; } :root .elementor .vf-statement::before { content: ""; position: absolute; left: 0; top: 0.15em; bottom: 0.15em; width: 4px; border-radius: 2px; background: linear-gradient(180deg, var(--vf-red) 0%, rgba(212, 20, 20, 0.15) 100%); } :root .elementor .vf-statement strong { font-weight: 600; color: var(--vf-red); background: linear-gradient(90deg, rgba(212, 20, 20, 0.16), rgba(212, 20, 20, 0.16)) 0 92% / 0% 0.28em no-repeat; transition: background-size 1200ms var(--vf-ease-soft) 300ms; } :root .elementor .vf-statement.is-in strong, html:not(.vf-js) .elementor .vf-statement strong { background-size: 100% 0.28em; } @media (min-width: 1025px) { :root .elementor .vf-statement { max-width: 34ch; } } :root .elementor .vf-chip-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(210px, 1fr)); gap: 12px; width: 100%; padding: 0; } :root .elementor .vf-chip-grid > .vf-chip { position: relative; display: flex; align-items: flex-end; min-height: 112px; height: auto; margin: 0; padding: 18px 18px 18px 18px; font: 600 15px/1.3 "Inter", sans-serif; letter-spacing: -0.005em; text-transform: none; white-space: normal; color: #FFFFFF; background: linear-gradient(160deg, #262629 0%, #19191B 100%); border: 1px solid #2E2E32; border-radius: 10px; overflow: hidden; transition: transform 400ms var(--vf-ease-soft), border-color 300ms var(--vf-ease), background 300ms var(--vf-ease); } :root .elementor .vf-chip-grid > .vf-chip::before { content: ""; position: absolute; top: 16px; left: 18px; width: 30px; height: 30px; border-radius: 6px; background: rgba(212, 20, 20, 0.16) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%23FF4B42'%3E%3Cpath d='M4 7l8 5-8 5zM20 7l-8 5 8 5z'/%3E%3C/svg%3E") center / 16px no-repeat; transition: background-color 300ms var(--vf-ease); } :root .elementor .vf-chip-grid > .vf-chip::after { content: ""; position: absolute; top: 22px; right: 18px; width: 16px; height: 16px; background: rgba(255, 255, 255, 0.35); -webkit-mask: var(--vf-icon-arrow-up-right) center / contain no-repeat; mask: var(--vf-icon-arrow-up-right) center / contain no-repeat; transition: transform 300ms var(--vf-ease-soft), background-color 300ms var(--vf-ease); } .elementor .vf-chip-grid > .vf-chip:hover { transform: translateY(-3px); border-color: var(--vf-red); background: linear-gradient(160deg, #2C1719 0%, #1B1112 100%); } .elementor .vf-chip-grid > .vf-chip:hover::before { background-color: var(--vf-red); background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%23FFFFFF'%3E%3Cpath d='M4 7l8 5-8 5zM20 7l-8 5 8 5z'/%3E%3C/svg%3E"); } .elementor .vf-chip-grid > .vf-chip:hover::after { transform: translate(2px, -2px); background-color: #FFFFFF; } @media (max-width: 767px) { :root .elementor .vf-chip-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; } :root .elementor .vf-chip-grid > .vf-chip { min-height: 96px; font-size: 14px; padding: 14px; } :root .elementor .vf-chip-grid > .vf-chip::before { top: 14px; left: 14px; } } /* 17.11 Cartoes de passos (vf-feature) com icone automatico Classe vf-feature-steps na Grade que guarda os cards vf-feature: o 1o card ganha o icone "adicionar", o 2o "quantidade", o 3o "enviar", o 4o "conversa". Dentro de cada card: Paragrafo numero + Flexbox (titulo + texto). */ :root .elementor .vf-feature-steps > .e-con.vf-feature { align-items: stretch; text-align: left; min-height: 280px; } :root .elementor .vf-feature-steps > .e-con.vf-feature > .e-con { display: flex; flex-direction: column; align-items: flex-start; margin-top: auto; gap: 10px; padding: 0; } :root .elementor .vf-feature-steps > .e-con.vf-feature > .e-con::before { content: ""; position: relative; inset: auto; z-index: auto; flex: 0 0 auto; opacity: 1; border: 0; display: block; width: 48px; height: 48px; margin-bottom: 14px; border-radius: 10px; background-color: var(--vf-red); background-position: center; background-size: 24px; background-repeat: no-repeat; box-shadow: 0 14px 30px -14px rgba(212, 20, 20, 0.8); transition: transform 500ms var(--vf-ease-soft); } .elementor .vf-feature-steps > .e-con.vf-feature:nth-child(1) > .e-con::before { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23FFFFFF' stroke-width='1.8'%3E%3Crect x='4' y='4' width='16' height='16' rx='2'/%3E%3Cpath d='M12 8v8M8 12h8'/%3E%3C/svg%3E"); } .elementor .vf-feature-steps > .e-con.vf-feature:nth-child(2) > .e-con::before { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23FFFFFF' stroke-width='1.8'%3E%3Cpath d='M9 6h11M9 12h11M9 18h11'/%3E%3Cpath d='M4 6h1M4 12h1M4 18h1' stroke-width='2.4' stroke-linecap='round'/%3E%3C/svg%3E"); } .elementor .vf-feature-steps > .e-con.vf-feature:nth-child(3) > .e-con::before { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23FFFFFF' stroke-width='1.8' stroke-linejoin='round'%3E%3Cpath d='M21 3L3 10.5l7 2.5 2.5 7z'/%3E%3Cpath d='M21 3L10 13'/%3E%3C/svg%3E"); } .elementor .vf-feature-steps > .e-con.vf-feature:nth-child(4) > .e-con::before { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23FFFFFF' stroke-width='1.8' stroke-linejoin='round'%3E%3Cpath d='M4 5h16v11H9l-5 4z'/%3E%3C/svg%3E"); } .elementor .vf-feature-steps > .e-con.vf-feature:hover > .e-con::before { transform: translateY(-3px) rotate(-4deg); } :root .elementor .vf-feature-steps > .e-con.vf-feature :is(h3, .e-heading-base) { font-size: 20px; } :root .elementor .vf-feature-steps > .e-con.vf-feature > .e-con .e-paragraph-base { font-size: 14px; line-height: 1.6; color: #A1A1A6; text-align: left; } @media (max-width: 767px) { :root .elementor .vf-feature-steps > .e-con.vf-feature { min-height: 0; } } /* 17.12 Pagina do produto a) Material (gerado pelo PHP v12.9): botoes de escolha. b) Quantidade + "Adicionar a cotacao" na mesma linha, botao no padrao vf-btn. c) vf-btn--link: botao discreto (texto + icone), para "Duvida sobre este item?". d) Detalhes (abas): cartao branco com abas em pilula e tabela de especificacoes. e) vf-product-hero (secao 00): fundo com profundidade em vez de branco liso. */ .vf-quote-form { display: flex; flex-direction: column; gap: 18px; margin: 0; } .vf-material { margin: 0; padding: 0; border: 0; min-width: 0; } .vf-material__label { display: flex; align-items: center; gap: 8px; margin: 0 0 10px; padding: 0; font: 600 13px/1.2 "Inter", sans-serif; letter-spacing: 0.08em; text-transform: uppercase; color: #161616; } .vf-material__hint { font-weight: 500; letter-spacing: 0.02em; text-transform: none; color: #77777D; } .vf-material__options { display: flex; flex-wrap: wrap; gap: 8px; } .vf-material__opt { position: relative; cursor: pointer; } .vf-material__opt input { position: absolute; inset: 0; opacity: 0; margin: 0; cursor: pointer; } .vf-material__opt span { display: inline-flex; align-items: center; gap: 8px; height: 42px; padding: 0 16px; font: 500 14px/1 "Inter", sans-serif; color: #38383D; background: #FFFFFF; border: 1px solid #D9D9DD; border-radius: 6px; transition: border-color 200ms var(--vf-ease), background-color 200ms var(--vf-ease), color 200ms var(--vf-ease), box-shadow 200ms var(--vf-ease); } .vf-material__opt span::before { content: ""; width: 16px; height: 16px; border: 1.5px solid #B4B4B9; border-radius: 50%; transition: border-color 200ms var(--vf-ease), box-shadow 200ms var(--vf-ease); } .vf-material__opt:hover span { border-color: #85858C; } .vf-material__opt input:checked + span { color: #161616; background: #FFF4F4; border-color: var(--vf-red); box-shadow: 0 0 0 1px var(--vf-red); font-weight: 600; } .vf-material__opt input:checked + span::before { border-color: var(--vf-red); box-shadow: inset 0 0 0 4px #FFFFFF, inset 0 0 0 8px var(--vf-red); } .vf-material__opt input:focus-visible + span { outline: 3px solid var(--vf-focus); outline-offset: 2px; } .vf-material--single { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; } .vf-material--single .vf-material__label { margin: 0; } .vf-material__fixed { display: inline-flex; align-items: center; height: 34px; padding: 0 14px; font: 600 14px/1 "Inter", sans-serif; color: #161616; background: #F3F3F5; border: 1px solid #E4E4E7; border-radius: 6px; } /* b) Quantidade + botao */ .single-product .vf-quote-form .yith-ywraq-add-to-quote { display: flex; flex-wrap: wrap; align-items: stretch; gap: 12px; } .single-product .vf-quote-form .yith-ywraq-add-button { flex: 1 1 220px; } .single-product .vf-quote-form .add-request-quote-button.button { position: relative; display: inline-flex !important; align-items: center; justify-content: space-between; gap: 18px; width: 100%; height: 52px !important; padding: 0 6px 0 22px !important; font: 600 15px/1 "Inter", sans-serif !important; color: #FFFFFF !important; background: var(--vf-red) !important; border: 0 !important; border-radius: 4px !important; box-shadow: 0 14px 30px -14px rgba(212, 20, 20, 0.75); transition: background-color 200ms var(--vf-ease), transform 300ms var(--vf-ease-soft), box-shadow 300ms var(--vf-ease); } .single-product .vf-quote-form .add-request-quote-button.button::after { content: ""; flex: 0 0 40px; height: 40px; border-radius: 3px; background: rgba(0, 0, 0, 0.16) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23FFFFFF' stroke-width='2' stroke-linecap='square'%3E%3Cpath d='M12 6v12M6 12h12'/%3E%3C/svg%3E") center / 18px no-repeat; transition: transform 300ms var(--vf-ease-soft); } .single-product .vf-quote-form .add-request-quote-button.button::before { display: none !important; } .single-product .vf-quote-form .add-request-quote-button.button:hover { background: var(--vf-red-hover) !important; transform: translateY(-1px); box-shadow: 0 18px 34px -14px rgba(212, 20, 20, 0.85); } .single-product .vf-quote-form .add-request-quote-button.button:hover::after { transform: rotate(90deg); } .single-product .vf-quote-form .add-request-quote-button.button:active { transform: translateY(1px); } .single-product .vf-quote-form .vf-qty-product { flex: 0 0 auto; } .single-product .vf-quote-form .yith_ywraq_add_item_browse_message a { height: 52px !important; } /* c) Botao discreto: texto + icone, sem caixa (vf-btn--link) */ :root .elementor .e-button-base.vf-btn.vf-btn--link { height: auto; min-height: 0; padding: 6px 0 !important; gap: 10px; font-size: 14px; font-weight: 600; color: #161616; background: none !important; border: 0 !important; box-shadow: none !important; white-space: normal; text-align: left; justify-content: flex-start; width: auto; align-self: flex-start; } :root .elementor .e-button-base.vf-btn.vf-btn--link::before { content: ""; flex: 0 0 32px; height: 32px; border-radius: 50%; background: #EAF8F1 url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%231C9B4A'%3E%3Cpath d='M12 2a10 10 0 0 0-8.6 15.1L2 22l5-1.3A10 10 0 1 0 12 2zm0 18.2a8.2 8.2 0 0 1-4.2-1.2l-.3-.2-3 .8.8-2.9-.2-.3A8.2 8.2 0 1 1 12 20.2zm4.5-6.1c-.2-.1-1.5-.7-1.7-.8-.2-.1-.4-.1-.6.1l-.8 1c-.1.2-.3.2-.5.1a6.7 6.7 0 0 1-3.3-2.9c-.3-.4.3-.4.7-1.3.1-.2 0-.3 0-.4l-.8-1.8c-.2-.5-.4-.4-.6-.4h-.5a1 1 0 0 0-.7.3 3 3 0 0 0-.9 2.2 5.2 5.2 0 0 0 1.1 2.7 11.8 11.8 0 0 0 4.5 4c1.7.7 2.3.8 3.2.6a2.7 2.7 0 0 0 1.8-1.2 2.2 2.2 0 0 0 .1-1.2c0-.1-.2-.2-.4-.3z'/%3E%3C/svg%3E") center / 18px no-repeat; } :root .elementor .e-button-base.vf-btn.vf-btn--link::after { width: 18px; height: 18px; background: var(--vf-arrow-dark) 50% 50% / 16px 16px no-repeat; border-radius: 0; } :root .elementor .e-button-base.vf-btn.vf-btn--link:hover { color: var(--vf-red); transform: none; } /* d) Detalhes do produto (widget Abas de dados do produto com a classe vf-tabs) */ :root .elementor .vf-tabs .woocommerce-tabs { padding: 0; } :root .elementor .vf-tabs .woocommerce-tabs ul.tabs { display: inline-flex !important; gap: 4px; margin: 0 0 20px !important; padding: 4px !important; background: #FFFFFF; border: 1px solid #E4E4E7 !important; border-radius: 10px; } :root .elementor .vf-tabs .woocommerce-tabs ul.tabs li a { display: block; padding: 10px 18px !important; font: 600 14px/1 "Inter", sans-serif !important; color: #6E6E75 !important; border-radius: 7px; transition: background-color 200ms var(--vf-ease), color 200ms var(--vf-ease); } :root .elementor .vf-tabs .woocommerce-tabs ul.tabs li a::after { display: none !important; } :root .elementor .vf-tabs .woocommerce-tabs ul.tabs li.active a { color: #FFFFFF !important; background: #161616; } :root .elementor .vf-tabs .woocommerce-tabs ul.tabs li:not(.active) a:hover { color: #161616 !important; background: #F3F3F5; } :root .elementor .vf-tabs .woocommerce-Tabs-panel { max-width: none; margin: 0 !important; padding: clamp(24px, 3vw, 44px) !important; font: 400 1.0625rem/1.75 "Inter", sans-serif; color: #38383D; background: #FFFFFF; border: 1px solid #E4E4E7; border-radius: 12px; box-shadow: 0 30px 60px -50px rgba(22, 22, 22, 0.45); } :root .elementor .vf-tabs .woocommerce-Tabs-panel > * { max-width: 72ch; } :root .elementor .vf-tabs .woocommerce-Tabs-panel p + p { margin-top: 1em; } :root .elementor .vf-tabs table.shop_attributes { width: 100%; max-width: 720px; margin: 0; border: 0; border-collapse: separate; border-spacing: 0; border: 1px solid #E4E4E7; border-radius: 10px; overflow: hidden; } :root .elementor .vf-tabs table.shop_attributes :is(th, td) { padding: 16px 20px !important; border: 0 !important; border-bottom: 1px solid #EFEFF0 !important; background: none !important; font-size: 15px; text-align: left; vertical-align: top; } :root .elementor .vf-tabs table.shop_attributes tr:last-child :is(th, td) { border-bottom: 0 !important; } :root .elementor .vf-tabs table.shop_attributes th { width: 34%; font-weight: 600; color: #161616; background: #F7F7F8 !important; } :root .elementor .vf-tabs table.shop_attributes td p { margin: 0; } /* e) Secao 00 do produto com profundidade (classe vf-product-hero) */ :root .elementor .vf-product-hero { position: relative; background: radial-gradient(60% 50% at 0% 0%, rgba(212, 20, 20, 0.06), rgba(212, 20, 20, 0) 70%), linear-gradient(180deg, #F7F7F8 0%, #FFFFFF 60%); } :root .elementor .vf-product-hero .woocommerce-product-gallery { border-radius: 12px; overflow: hidden; } :root .elementor .vf-product-hero .e-con:has(> .elementor-widget-woocommerce-product-images) { background: radial-gradient(circle at 50% 45%, #FFFFFF 0%, #F1F1F3 75%); border: 1px solid #E8E8EB; border-radius: 12px; box-shadow: 0 40px 70px -55px rgba(22, 22, 22, 0.5); } :root .elementor .vf-product-hero .elementor-widget-woocommerce-product-title .product_title { font: 600 clamp(2rem, 1.4rem + 1.6vw, 3rem)/1.08 "Inter", sans-serif !important; letter-spacing: -0.035em; color: #161616; text-wrap: balance; } :root .elementor .vf-product-hero .vf-list-valve ul { display: grid; gap: 8px; margin: 0; padding: 0; } :root .elementor .vf-product-hero .vf-list-valve li { padding: 12px 14px 12px 40px !important; background: #FFFFFF; border: 1px solid #EFEFF0; border-radius: 8px; font-size: 14px; } :root .elementor .vf-product-hero .vf-list-valve li::before { left: 14px !important; } /* 17.13 Topo do post (classe vf-post-hero na secao "00 Cabecalho") Fundo grafite com grade tecnica e brilho vermelho, titulo branco grande, linha de dados clara e a foto de destaque "saindo" do topo para o texto. */ :root .elementor .vf-post-hero { position: relative; isolation: isolate; overflow: hidden; background: #161616; } .elementor .vf-post-hero::before { content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none; background: radial-gradient(50% 70% at 90% 0%, rgba(212, 20, 20, 0.32), rgba(212, 20, 20, 0) 65%), repeating-linear-gradient(0deg, rgba(255, 255, 255, 0.045) 0 1px, transparent 1px 64px), repeating-linear-gradient(90deg, rgba(255, 255, 255, 0.045) 0 1px, transparent 1px 64px); } :root .elementor .vf-post-hero :is(h1, .elementor-heading-title, .e-heading-base) { max-width: 22ch; margin: 0; color: #FFFFFF !important; font-size: clamp(2.25rem, 1.3rem + 2.8vw, 4rem) !important; line-height: 1.05 !important; letter-spacing: -0.04em; } :root .elementor .vf-post-hero .vf-eyebrow { color: #FFFFFF; } :root .elementor .vf-post-hero :is(.vf-meta > *, .vf-small, .vf-reading-time) { color: #C9C9CE !important; } :root .elementor .vf-post-hero .vf-meta > * + *::before { background: rgba(255, 255, 255, 0.35); } :root .elementor .vf-post-hero .vf-crumb, :root .elementor .vf-post-hero .vf-crumb a { color: #A1A1A6 !important; } :root .elementor .vf-post-hero > :is(.e-image-base, .elementor-widget-image):last-child { width: 100%; margin-top: 16px; border-radius: 12px; box-shadow: 0 50px 80px -50px rgba(0, 0, 0, 0.9); } /* 17.14 Paginas legais (Privacidade, Cookies, Termos) vf-legal no Flexbox da coluna do texto (Editor de texto com a classe vf-prose): cartao branco, titulos numerados, tabelas e links legiveis. vf-legal-nav: coluna do indice fixa ao rolar (computador). */ :root .elementor .vf-legal { padding: clamp(24px, 4vw, 56px); background: #FFFFFF; border: 1px solid #E4E4E7; border-radius: 12px; box-shadow: 0 40px 70px -60px rgba(22, 22, 22, 0.45); } :root .elementor .vf-legal .vf-prose, :root .elementor .vf-legal .elementor-widget-text-editor { max-width: 72ch; font-size: 1.0625rem; line-height: 1.75; color: #38383D; } :root .elementor .vf-legal :is(h2) { counter-increment: vf-legal; margin: 2.2em 0 0.6em; padding-top: 0; font: 600 1.5rem/1.25 "Inter", sans-serif; letter-spacing: -0.02em; color: #161616; scroll-margin-top: calc(var(--vf-header-h) + 24px); } :root .elementor .vf-legal :is(h2):first-child { margin-top: 0; } :root .elementor .vf-legal h2::before { content: counter(vf-legal, decimal-leading-zero) " "; color: var(--vf-red); font-variant-numeric: tabular-nums; white-space: pre; } :root .elementor .vf-legal { counter-reset: vf-legal; } :root .elementor .vf-legal h3 { margin: 1.6em 0 0.4em; font: 600 1.125rem/1.3 "Inter", sans-serif; color: #161616; } :root .elementor .vf-legal :is(p, li) { color: #45454B; } :root .elementor .vf-legal a { color: #161616; text-decoration: underline; text-decoration-color: var(--vf-red); text-underline-offset: 3px; } :root .elementor .vf-legal table { width: 100%; margin: 1.2em 0; border-collapse: separate; border-spacing: 0; border: 1px solid #E4E4E7; border-radius: 10px; overflow: hidden; font-size: 0.9375rem; } :root .elementor .vf-legal :is(th, td) { padding: 12px 14px; border-bottom: 1px solid #EFEFF0; text-align: left; vertical-align: top; } :root .elementor .vf-legal tr:last-child :is(th, td) { border-bottom: 0; } :root .elementor .vf-legal th { font-weight: 600; color: #161616; background: #F7F7F8; } :root .elementor .vf-legal .vf-legal__note { padding: 16px 18px; background: #F7F7F8; border-left: 3px solid var(--vf-red); border-radius: 0 8px 8px 0; font-size: 0.9375rem; } @media (max-width: 767px) { :root .elementor .vf-legal table { display: block; overflow-x: auto; } } :root .elementor .vf-legal-nav { display: flex; flex-direction: column; gap: 14px; padding: 24px; background: #FFFFFF; border: 1px solid #E4E4E7; border-radius: 12px; } @media (min-width: 1025px) { :root .elementor .vf-legal-nav { position: sticky; top: var(--vf-sticky-top); align-self: start; } } @media (max-width: 1024px) { :root .elementor .vf-legal-nav { display: none; } } /* Abas entre as paginas legais */ :root .elementor .e-con:has(> .vf-tab-link) { flex-wrap: wrap; gap: 8px; padding: 0 0 0 0; border: 0; } :root .elementor .vf-tab-link { display: inline-flex; align-items: center; height: 40px; padding: 0 16px; font: 500 14px/1 "Inter", sans-serif; color: #515157; background: #FFFFFF; border: 1px solid #E4E4E7; border-radius: 999px; text-decoration: none; transition: color 200ms var(--vf-ease), border-color 200ms var(--vf-ease), background-color 200ms var(--vf-ease); } :root .elementor .vf-tab-link::after { display: none; } :root .elementor .vf-tab-link:hover { color: #161616; border-color: #85858C; } :root .elementor .vf-tab-link.is-current { color: #FFFFFF; font-weight: 600; background: #161616; border-color: #161616; } /* 17.15 Etapas da cotacao (classe vf-steps no Flexbox "etapas") Cada Etapa: Paragrafo numero + Paragrafo nome. A etapa atual leva vf-step--current; as concluidas, vf-step--done (vira um "check"). As outras ficam cinza. */ :root .elementor .vf-steps { display: flex; flex-direction: row; flex-wrap: nowrap; align-items: center; gap: 0; width: 100%; max-width: 720px; padding: 0; counter-reset: none; } :root .elementor .vf-steps > .e-con { flex: 0 0 auto; width: auto; display: flex; flex-direction: row; align-items: center; gap: 10px; padding: 0; background: none; border: 0 !important; } :root .elementor .vf-steps > .e-con + .e-con { margin-left: 14px; padding-left: clamp(36px, 6vw, 72px) !important; background: linear-gradient(#D9D9DD, #D9D9DD) 0 50% / calc(clamp(36px, 6vw, 72px) - 14px) 2px no-repeat !important; } :root .elementor .vf-steps > .e-con > .e-paragraph-base:first-child { display: flex; align-items: center; justify-content: center; width: 32px !important; height: 32px !important; margin: 0; font: 700 14px/1 "Inter", sans-serif !important; color: #77777D !important; background: #FFFFFF; border: 2px solid #D9D9DD; border-radius: 50% !important; } :root .elementor .vf-steps > .e-con > .e-paragraph-base:last-child { margin: 0; font: 600 15px/1.2 "Inter", sans-serif !important; color: #77777D !important; white-space: nowrap; } :root .elementor .vf-steps > .e-con.vf-step--current > .e-paragraph-base:first-child { color: #FFFFFF !important; background: var(--vf-red); border-color: var(--vf-red); box-shadow: 0 0 0 5px rgba(212, 20, 20, 0.14); } :root .elementor .vf-steps > .e-con.vf-step--current > .e-paragraph-base:last-child { color: #161616 !important; } :root .elementor .vf-steps > .e-con.vf-step--done > .e-paragraph-base:first-child { font-size: 0 !important; background: #161616 url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23FFFFFF' stroke-width='3' stroke-linecap='square'%3E%3Cpath d='M5 12.5l4.5 4.5L19 7.5'/%3E%3C/svg%3E") center / 14px no-repeat; border-color: #161616; } :root .elementor .vf-steps > .e-con.vf-step--done > .e-paragraph-base:last-child { color: #161616 !important; } :root .elementor .vf-steps > .e-con.vf-step--done + .e-con { background-image: linear-gradient(#161616, #161616) !important; } :root .elementor .vf-section--dark .vf-steps > .e-con > .e-paragraph-base:last-child { color: #A1A1A6 !important; } :root .elementor .vf-section--dark .vf-steps > .e-con:is(.vf-step--current, .vf-step--done) > .e-paragraph-base:last-child { color: #FFFFFF !important; } :root .elementor .vf-section--dark .vf-steps > .e-con > .e-paragraph-base:first-child { background: transparent; border-color: #3A3A3F; } :root .elementor .vf-section--dark .vf-steps > .e-con.vf-step--done > .e-paragraph-base:first-child { background-color: #FFFFFF; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23161616' stroke-width='3' stroke-linecap='square'%3E%3Cpath d='M5 12.5l4.5 4.5L19 7.5'/%3E%3C/svg%3E"); border-color: #FFFFFF; } @media (max-width: 767px) { :root .elementor .vf-steps > .e-con + .e-con { margin-left: 8px; padding-left: 30px !important; background-size: 22px 2px !important; } :root .elementor .vf-steps > .e-con > .e-paragraph-base:last-child { font-size: 13px !important; } :root .elementor .vf-steps > .e-con:not(.vf-step--current) > .e-paragraph-base:last-child { display: none; } } /* 17.16 Solicitacao recebida: linha do tempo do que acontece agora Classe vf-timeline no Flexbox "Linha do tempo". Cada Etapa: Flexbox "caixa" (com o icone) + Flexbox de textos (Titulo + Paragrafo). A 1a etapa ja esta feita. */ :root .elementor .vf-timeline { display: flex; flex-direction: column; gap: 0; padding: 0; } :root .elementor .vf-timeline > .e-con { position: relative; display: grid; grid-template-columns: 44px minmax(0, 1fr); align-items: start; gap: 18px; margin: 0 !important; padding: 0 0 32px !important; border: 0 !important; } :root .elementor .vf-timeline > .e-con::before { content: ""; position: absolute; left: 21px; top: 44px; bottom: 0; width: 2px; background: linear-gradient(180deg, rgba(255, 255, 255, 0.28), rgba(255, 255, 255, 0.08)); } :root .elementor .vf-timeline > .e-con:last-child { padding-bottom: 0 !important; } :root .elementor .vf-timeline > .e-con:last-child::before { display: none; } :root .elementor .vf-timeline > .e-con > .e-con:first-child { display: flex; align-items: center; justify-content: center; width: 44px !important; height: 44px !important; padding: 0; color: #FFFFFF; background: rgba(255, 255, 255, 0.06); border: 1px solid rgba(255, 255, 255, 0.18); border-radius: 50%; } :root .elementor .vf-timeline > .e-con:first-child > .e-con:first-child { background: var(--vf-red); border-color: var(--vf-red); box-shadow: 0 0 0 6px rgba(212, 20, 20, 0.18); } :root .elementor .vf-timeline > .e-con > .e-con:first-child svg { width: 20px; height: 20px; } :root .elementor .vf-timeline > .e-con > .e-con:nth-child(2) { display: flex; flex-direction: column; gap: 6px; padding: 8px 0 0; } :root .elementor .vf-timeline :is(h3, .e-heading-base) { margin: 0; font: 600 18px/1.3 "Inter", sans-serif; color: #FFFFFF; } :root .elementor .vf-timeline .e-paragraph-base { margin: 0; font-size: 15px; line-height: 1.55; color: #A1A1A6; } :root .elementor .vf-section--dark .vf-quote-number { color: #C9C9CE; } :root .elementor .vf-section--dark .vf-quote-number strong { color: #FFFFFF; } /* 17.17 Seguranca do movimento: se o script atrasar (cache/otimizacao), nada fica escondido. Depois de 2,5 s tudo aparece mesmo sem o script. */ @keyframes vf-failsafe-in { to { opacity: 1; transform: none; clip-path: inset(0 0 0 0); } } html.vf-js:not(.vf-motion-ready) .vf-reveal:not(.is-in), html.vf-js:not(.vf-motion-ready) .vf-reveal-group:not(.is-in) > *, html.vf-js:not(.vf-motion-ready) .vf-clip:not(.is-in) { animation: vf-failsafe-in 600ms var(--vf-ease) 2.5s forwards; } @media (prefers-reduced-motion: reduce) { html.vf-js .vf-reveal:not(.is-in), html.vf-js .vf-reveal-group:not(.is-in) > *, html.vf-js .vf-clip:not(.is-in) { animation: none; opacity: 1; transform: none; clip-path: none; } } /* ========================================================================== 18. Revisao final (v12.10 - 09/10/2026) Correcoes encontradas na revisao do backup de 09/10. Nada aqui pede classe nova, exceto as indicadas no guia (aba "Revisao 5"). ========================================================================== */ /* 18.1 Celular: imagens com vf-clip e selos vf-chip voltam a aparecer. No Hero da Home a foto (Flexbox vf-clip) fica no topo, de ponta a ponta, e os textos descem para baixo dela. A classe global vf-clip estava com "Exibicao: nenhum" no celular (sumia a foto do Hero da Home, do Quem Somos, do banner da Industria e a capa dos posts). */ @media (max-width: 767px) { :root .elementor .e-con.vf-clip { display: flex; } :root .elementor .vf-clip:not(.e-con) { display: block; } :root .elementor .e-con.vf-feature .vf-chip { display: inline-flex; } :root .elementor .vf-section:has(> .e-con.vf-clip) { flex-direction: column; flex-wrap: nowrap; align-items: stretch; gap: 32px; } :root .elementor .vf-section > .e-con.vf-clip { width: calc(100% + 40px) !important; max-width: none; margin-inline: -20px; flex: 0 0 auto; } } /* 18.2 Etapas da cotacao (vf-steps): mesmo que mais de uma etapa esteja marcada como atual, nada passa da tela. No celular aparece so o nome da ultima etapa atual. */ :root .elementor .vf-steps { min-width: 0; } :root .elementor .vf-steps > .e-con { min-width: 0; } @media (max-width: 767px) { :root .elementor .vf-steps > .e-con.vf-step--current ~ .e-con.vf-step--current > .e-paragraph-base:last-child { display: none; } :root .elementor .vf-steps > .e-con + .e-con { margin-left: 6px; padding-left: 26px !important; background-size: 18px 2px !important; } } /* 18.3 Cartoes vf-feature (Home 06): titulos alinhados na mesma altura em todos os cartoes; selos (quando houver) descem para a base do cartao. */ :root .elementor .e-con.vf-feature { justify-content: flex-start; } :root .elementor .e-con.vf-feature > .e-con:nth-child(2) { margin-top: clamp(96px, 9vw, 132px); } :root .elementor .e-con.vf-feature > .e-con:last-child:not(:nth-child(2)) { margin-top: auto; padding-top: 8px; } @media (max-width: 767px) { :root .elementor .e-con.vf-feature { gap: 20px; } :root .elementor .e-con.vf-feature > .e-con:nth-child(2) { margin-top: 64px; } } /* 18.4 Catalogos: a regra da coluna de filtros (fixa ao rolar, com altura maxima) valia tambem para a secao que tem a paginacao (Blog e Busca) e cortava os cards. Corrigido no seletor da secao 15; aqui garantimos a secao inteira. */ :root .elementor .vf-section:has(> .elementor-widget-jet-listing-grid) { max-height: none; overflow: visible; position: relative; top: auto; } /* 18.5 Pagina do produto: categoria acima do titulo ("CONEXOES > CAP") */ :root .elementor .vf-product-hero .vf-product-category { display: inline-flex; flex-wrap: wrap; align-items: center; gap: 8px; font: 600 12px/1.3 "Inter", sans-serif; letter-spacing: 0.1em; text-transform: uppercase; color: #77777D; } :root .elementor .vf-product-hero .vf-product-category__sep { color: var(--vf-red); letter-spacing: 0; } :root .elementor .vf-product-hero .vf-product-category__item:last-child { color: #161616; } /* 18.6 Post: linha de dados no celular, indice do artigo e posts relacionados */ @media (max-width: 767px) { :root .elementor .vf-meta > * { font-size: 13px; } :root .elementor .vf-meta > * + *::before { margin: 0 8px; } .elementor .jet-listing-grid__items:has(.vf-post-card) > .jet-listing-grid__item { width: 100% !important; max-width: 100% !important; flex: 0 0 100% !important; } } /* No celular o indice do post fica escondido (o artigo e curto e a barra de leitura ja orienta). */ @media (max-width: 767px) { :root .elementor .e-con:not(.vf-legal-nav):has(> .elementor-widget-table-of-contents.vf-toc) { display: none; } } .elementor-widget-table-of-contents.vf-toc { padding: 20px 20px 12px; background: #FFFFFF; border: 1px solid #E4E4E7 !important; border-radius: 12px; } .vf-legal-nav .elementor-widget-table-of-contents.vf-toc { padding: 0; background: none; border: 0 !important; border-radius: 0; } .vf-legal-nav .vf-toc .elementor-toc__header { display: none !important; } :root .elementor .vf-legal-nav.vf-legal { max-width: none; padding: 24px; box-shadow: none; } /* 18.7 Solicitacao recebida: circulos da linha do tempo mais visiveis no fundo escuro */ :root .elementor .vf-timeline > .e-con > .e-con:first-child { background: rgba(255, 255, 255, 0.08); border-color: rgba(255, 255, 255, 0.28); } /* 18.8 Formulario de Contato (Elementor Pro): opcoes e aceite no padrao do site */ .elementor-form .elementor-field-subgroup { gap: 10px 20px; } .elementor-form .elementor-field-subgroup .elementor-field-option { display: inline-flex; align-items: center; gap: 8px; margin: 0; } .elementor-form :is(input[type="radio"], input[type="checkbox"]) { width: 18px; height: 18px; margin: 0; accent-color: var(--vf-red); cursor: pointer; flex: 0 0 auto; } .elementor-form .elementor-field-type-acceptance .elementor-field-option { align-items: flex-start; } .elementor-form .elementor-field-type-acceptance a { color: var(--vf-red); text-decoration: underline; text-underline-offset: 2px; } .elementor-form .elementor-field-option label { font-size: 15px; line-height: 1.4; cursor: pointer; } /* 18.9 Pagina do produto: foto ocupa toda a moldura e o bloco de cotacao fica colado ao botao de duvida (sem os 88px de sobra do formulario do WooCommerce) */ :root .elementor .vf-product-hero .elementor-widget-woocommerce-product-images { width: 100%; flex: 1 1 100%; min-width: 0; } :root .elementor .vf-product-hero .woocommerce-product-gallery { width: 100% !important; margin: 0 !important; } :root .elementor .vf-product-hero .woocommerce-product-gallery :is(.flex-viewport, .woocommerce-product-gallery__wrapper, .woocommerce-product-gallery__image, .woocommerce-product-gallery__image > a) { width: 100% !important; } :root .elementor .vf-product-hero .woocommerce-product-gallery__image img.wp-post-image { width: 100% !important; height: auto; aspect-ratio: 1 / 1; object-fit: contain; background: #FFFFFF; } :root .elementor .vf-product-buy form.vf-quote-form { display: flex; flex-direction: column; gap: 16px; margin: 0 !important; padding: 0 !important; } :root .elementor .vf-product-buy form.vf-quote-form > .clear { display: none; } :root .elementor .vf-product-buy .yith-ywraq-add-to-quote { margin: 0 !important; } /* 18.10 Pagina de resultados da busca: campo e botao no padrao do site (o botao vinha azul, cor padrao do JetSearch) */ .elementor-location-archive .jet-ajax-search { max-width: 640px; } .elementor-location-archive .jet-ajax-search__form { display: flex; align-items: stretch; gap: 8px; padding: 0; border: 0; background: none; } .elementor-location-archive .jet-ajax-search__fields-holder { flex: 1 1 auto; min-width: 0; } .elementor-location-archive .jet-ajax-search__field { height: 52px; padding: 0 16px !important; font: 400 16px/1.2 "Inter", sans-serif !important; color: #161616; background: #FFFFFF !important; border: 1px solid #D9D9DD !important; border-radius: 4px !important; box-shadow: none !important; } .elementor-location-archive .jet-ajax-search__field:focus { border-color: var(--vf-focus) !important; box-shadow: 0 0 0 3px rgba(0, 95, 204, 0.2) !important; outline: none; } .elementor-location-archive .jet-ajax-search__submit { flex: 0 0 auto; height: 52px; min-width: 52px; padding: 0 20px; margin: 0; color: #FFFFFF !important; background: var(--vf-red) !important; border: 0 !important; border-radius: 4px !important; cursor: pointer; transition: background-color 200ms var(--vf-ease); } .elementor-location-archive .jet-ajax-search__submit:hover { background: #B70F0F !important; } .elementor-location-archive .jet-ajax-search__submit-icon svg { width: 18px; height: 18px; fill: currentColor; } /* ========================================================================== 19. Acabamento para aprovacao (v12.11 - 09/10/2026) Escala tipografica unica, "tchan" nos blocos que ainda estavam simples e padroes automaticos (nada aqui pede classe nova, salvo onde indicado no guia). ========================================================================== */ /* 19.1 Escala tipografica (computador / celular) H1 dos Heros ...... 60 px / 38 px (nome curto de catalogo: 76 px / 44 px) H2 das secoes ..... 42 px / 30 px H3 de cards ....... 20 a 24 px Texto de abertura . 18 a 20 px, linhas equilibradas (sem palavra sozinha) Os tamanhos ficam nas secoes 17.1 (H1/H2) e aqui (ajustes finos). */ :root .elementor .vf-section--dark:has(> .e-con.vf-clip) > .e-con:not(.vf-clip) { max-width: 660px; } :root .elementor .vf-section-head .vf-lead { max-width: 54ch; } /* 19.2 Rotulo dos Heros de modelo (Categoria): "CATALOGO" vira rotulo padrao, colado no titulo (16 px), mesmo sem a classe vf-eyebrow. */ :root .elementor .vf-hero-fx > .e-paragraph-base.vf-on-dark:not(.vf-lead):not(.vf-eyebrow) { display: inline-flex; align-items: center; gap: 10px; margin: 0 0 -32px; font: 600 12px/1.2 "Inter", sans-serif; letter-spacing: 0.14em; text-transform: uppercase; color: #FFFFFF; } :root .elementor .vf-hero-fx > .e-paragraph-base.vf-on-dark:not(.vf-lead):not(.vf-eyebrow)::before { content: ""; width: 14px; height: 10px; background: var(--vf-red); clip-path: polygon(0 0, 50% 50%, 100% 0, 100% 100%, 50% 50%, 0 100%); } /* 19.3 Heros escuros dos catalogos, da categoria e do contato ganham a mesma textura do vf-hero-fx (grade, brilho vermelho e linha de fluxo), sem classe nova. */ :root [data-elementor-type] > .vf-section.vf-section--dark:first-child:not(.vf-hero-fx):not(:has(> .e-con.vf-clip)) { position: relative; overflow: hidden; isolation: isolate; } .elementor[data-elementor-type] > .vf-section.vf-section--dark:first-child:not(.vf-hero-fx):not(:has(> .e-con.vf-clip))::before { content: ""; position: absolute; inset: 0; z-index: 0; width: auto; height: auto; border: 0; border-radius: 0; opacity: 1; mix-blend-mode: normal; pointer-events: none; background: radial-gradient(55% 80% at 88% 8%, rgba(212, 20, 20, 0.30), rgba(212, 20, 20, 0) 62%), linear-gradient(90deg, rgba(22, 22, 22, 0.88) 0%, rgba(22, 22, 22, 0.5) 55%, rgba(22, 22, 22, 0.15) 100%), repeating-linear-gradient(0deg, rgba(255, 255, 255, 0.045) 0 1px, transparent 1px 64px), repeating-linear-gradient(90deg, rgba(255, 255, 255, 0.045) 0 1px, transparent 1px 64px); } .elementor[data-elementor-type] > .vf-section.vf-section--dark:first-child:not(.vf-hero-fx):not(:has(> .e-con.vf-clip))::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; z-index: 0; height: 3px; pointer-events: none; background: linear-gradient(90deg, transparent 0%, var(--vf-red) 20%, #FF5A4F 50%, var(--vf-red) 80%, transparent 100%) no-repeat; background-size: 50% 100%; animation: vf-hero-line 6s var(--vf-ease) infinite; } .elementor[data-elementor-type] > .vf-section.vf-section--dark:first-child:not(.vf-hero-fx):not(:has(> .e-con.vf-clip)) > * { position: relative; z-index: 1; } /* 19.4 Home 05 - tubulacao e selo "Sem pagamento" com mais destaque */ :root .elementor .vf-pipeline__step .vf-small { font-size: 15px; line-height: 1.55; color: #3A3A3F; max-width: 28ch; } :root .elementor .vf-pipeline__step :is(h3, .e-heading-base) { font-size: 20px; letter-spacing: -0.01em; } @media (min-width: 768px) { :root .elementor .vf-pipeline__step > .e-con:not(.vf-pipeline__valve) { min-height: 150px; } } :root .elementor .vf-assurance { padding: 16px 24px 16px 64px; font-size: 16px; line-height: 1.45; color: #161616; background: linear-gradient(90deg, #EFFAF3 0%, #FFFFFF 70%); border: 1px solid #BFE5CD; border-radius: 14px; box-shadow: 0 18px 40px -28px rgba(22, 121, 74, 0.55); } :root .elementor .vf-assurance::before { left: 14px; width: 38px; height: 38px; margin-top: -19px; background-color: #16794A; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23FFFFFF' stroke-width='2' stroke-linejoin='round'%3E%3Cpath d='M12 3l7 3v5c0 4.5-3 8.3-7 10-4-1.7-7-5.5-7-10V6z'/%3E%3Cpath d='M8.5 12l2.5 2.5 4.5-5'/%3E%3C/svg%3E"); box-shadow: 0 0 0 5px rgba(22, 121, 74, 0.12); } :root .elementor .vf-assurance strong { color: #16794A; } :root .elementor .vf-section--dark .vf-assurance { color: #FFFFFF; background: rgba(22, 121, 74, 0.14); border-color: rgba(122, 214, 160, 0.35); } :root .elementor .vf-section--dark .vf-assurance strong { color: #8BE0AE; } /* 19.5 Home 07 - Setores: card "E mais" no mesmo peso visual dos outros */ :root .elementor .vf-split--accordion > .e-con:last-child:not([style*="background-image"]):has(> .vf-body) { position: relative; overflow: hidden; isolation: isolate; background: radial-gradient(90% 80% at 100% 0%, rgba(212, 20, 20, 0.35), rgba(212, 20, 20, 0) 60%), linear-gradient(160deg, #232326 0%, #161616 100%) !important; border-color: #2E2E32 !important; } :root .elementor .vf-split--accordion > .e-con:last-child:has(> .vf-body)::after { content: ""; position: absolute; right: -30px; top: 24px; z-index: -1; width: 180px; height: 180px; background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100' fill='none' stroke='%23FFFFFF' stroke-opacity='0.12' stroke-width='1'%3E%3Cpath d='M8 22l42 28L8 78z'/%3E%3Cpath d='M92 22L50 50l42 28z'/%3E%3C/svg%3E") center / contain no-repeat; } :root .elementor .vf-split--accordion > .e-con:last-child:has(> .vf-body) :is(h3, .e-heading-base) { color: #FFFFFF; } :root .elementor .vf-split--accordion > .e-con:last-child:has(> .vf-body) .vf-body { color: #C9C9CE; } :root .elementor .vf-split--accordion .vf-split__more { font-size: 15px; line-height: 1.55; max-width: 34ch; } /* 19.6 Banners vermelhos (vf-banner-fx com duas colunas): a coluna do texto vira um painel grafite translucido, com ponto de luz pulsando e linha de fluxo. */ :root .elementor .vf-banner-fx > .e-grid-base > .e-con:last-child:not(:only-child) { position: relative; padding: 32px !important; background: rgba(22, 22, 22, 0.42); border: 1px solid rgba(255, 255, 255, 0.16); border-radius: 14px; -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); box-shadow: 0 40px 80px -40px rgba(0, 0, 0, 0.6); } :root .elementor .vf-banner-fx > .e-grid-base > .e-con:last-child:not(:only-child)::before { content: ""; position: absolute; top: 22px; right: 22px; left: auto; width: 10px; height: 10px; border: 0; opacity: 1; border-radius: 50%; background: #FFFFFF; box-shadow: 0 0 0 0 rgba(255, 255, 255, 0.6); animation: vf-pulse 2.4s var(--vf-ease) infinite; } :root .elementor .vf-banner-fx > .e-grid-base > .e-con:last-child:not(:only-child)::after { content: ""; position: absolute; left: 32px; right: 32px; top: 0; height: 2px; background: linear-gradient(90deg, transparent, #FFFFFF, transparent) no-repeat; background-size: 40% 100%; animation: vf-hero-line 4.5s var(--vf-ease) infinite; } :root .elementor .vf-banner-fx > .e-grid-base { align-items: center !important; } @keyframes vf-pulse { 0% { box-shadow: 0 0 0 0 rgba(255, 255, 255, 0.55); } 70% { box-shadow: 0 0 0 14px rgba(255, 255, 255, 0); } 100% { box-shadow: 0 0 0 0 rgba(255, 255, 255, 0); } } /* Banner vermelho ao lado de uma foto (Industria 05): ponto de luz e fluxo no rodape do painel */ :root .elementor .e-grid-base > .vf-banner-fx:not(.vf-section) { justify-content: center; } :root .elementor .e-grid-base > .vf-banner-fx:not(.vf-section) .vf-btn { box-shadow: 0 18px 30px -18px rgba(0, 0, 0, 0.6); } @media (max-width: 767px) { :root .elementor .vf-banner-fx > .e-grid-base > .e-con:last-child:not(:only-child) { padding: 24px !important; } } /* 19.7 Quem Somos - assinatura da trajetoria (vf-signature) em painel grafite */ :root .elementor .vf-signature { overflow: hidden; isolation: isolate; padding: 32px 36px 32px 100px; color: #FFFFFF; background: radial-gradient(80% 140% at 100% 0%, rgba(212, 20, 20, 0.35), rgba(212, 20, 20, 0) 60%), linear-gradient(135deg, #232326 0%, #161616 100%); border: 1px solid #2E2E32; border-left: 4px solid var(--vf-red); border-radius: 0 14px 14px 0; box-shadow: 0 40px 70px -40px rgba(22, 22, 22, 0.7); } :root .elementor .vf-signature::after { content: ""; position: absolute; right: -40px; bottom: -60px; z-index: -1; width: 220px; height: 220px; background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100' fill='none' stroke='%23FFFFFF' stroke-opacity='0.10' stroke-width='1'%3E%3Cpath d='M8 22l42 28L8 78z'/%3E%3Cpath d='M92 22L50 50l42 28z'/%3E%3C/svg%3E") center / contain no-repeat; animation: vf-valve-float 14s var(--vf-ease) infinite alternate; } :root .elementor .vf-signature::before { left: 32px; top: 32px; width: 44px; height: 44px; box-shadow: 0 0 0 6px rgba(212, 20, 20, 0.18), 0 10px 24px -10px rgba(212, 20, 20, 0.8); } :root .elementor .vf-signature :is(strong, em) { color: #FF5A4F; } @media (max-width: 767px) { :root .elementor .vf-signature { padding: 84px 22px 24px; } } /* 19.8 Quem Somos - Missao e Visao (vf-pillar): numero/rotulo gigante vazado, cantoneiras e brilho que segue a borda. */ :root .elementor .vf-pillar { padding: 48px 48px 52px; min-height: 320px; justify-content: flex-end; } :root .elementor .vf-pillar > .vf-eyebrow { position: absolute; top: 40px; left: 48px; } :root .elementor .vf-pillar :is(h3, .e-heading-base) { font-size: clamp(1.625rem, 1.2rem + 1.1vw, 2.25rem); } :root .elementor .vf-pillar { background: linear-gradient(#FF5A4F, #FF5A4F) left 24px top 24px / 18px 2px no-repeat, linear-gradient(#FF5A4F, #FF5A4F) left 24px top 24px / 2px 18px no-repeat, linear-gradient(rgba(255,255,255,.25), rgba(255,255,255,.25)) right 24px bottom 24px / 18px 2px no-repeat, linear-gradient(rgba(255,255,255,.25), rgba(255,255,255,.25)) right 24px bottom 24px / 2px 18px no-repeat, radial-gradient(70% 90% at 0% 100%, rgba(212, 20, 20, 0.22), rgba(212, 20, 20, 0) 60%), linear-gradient(160deg, #232326 0%, #1A1A1C 100%); } @media (max-width: 767px) { :root .elementor .vf-pillar { padding: 72px 24px 32px; min-height: 0; } :root .elementor .vf-pillar > .vf-eyebrow { top: 32px; left: 24px; } } /* 19.9 Cards numerados (Valores, Quem Somos 03): numero em cima, titulos alinhados na mesma altura e texto embaixo, em todos os cards. */ :root .elementor .e-con.vf-card:has(> .e-paragraph-base:first-child + .e-heading-base) { justify-content: flex-start; gap: 10px; } :root .elementor .e-con.vf-card:has(> .e-paragraph-base:first-child + .e-heading-base) > .e-heading-base { margin-top: auto; min-height: 2.5em; display: flex; align-items: flex-end; } :root .elementor .e-con.vf-card:has(> .e-paragraph-base:first-child + .e-heading-base) > .e-paragraph-base:first-child { font-size: 44px !important; line-height: 1 !important; letter-spacing: -0.04em; color: transparent !important; -webkit-text-stroke: 1.5px var(--vf-red); } :root .elementor .e-con.vf-card:has(> .e-paragraph-base:first-child + .e-heading-base) > .e-paragraph-base:last-child { min-height: 3.2em; } :root .elementor .e-con.vf-card:has(> .e-paragraph-base:first-child + .e-heading-base):hover > .e-paragraph-base:first-child { color: var(--vf-red) !important; } /* Card 8 (vf-cta-card): fecha a grade com mais forca */ :root .elementor .vf-cta-card { padding: 36px 32px; box-shadow: 0 40px 70px -30px rgba(212, 20, 20, 0.75); } :root .elementor .vf-cta-card :is(h3, .e-heading-base) { font-size: 26px; letter-spacing: -0.02em; } :root .elementor .vf-cta-card::after { content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none; background: linear-gradient(115deg, transparent 30%, rgba(255, 255, 255, 0.22) 45%, transparent 60%) no-repeat; background-size: 250% 100%; background-position: 150% 0; animation: vf-shine 5s var(--vf-ease) infinite; } :root .elementor .vf-cta-card .vf-btn { background: #FFFFFF !important; color: var(--vf-red) !important; } @keyframes vf-shine { 0%, 55% { background-position: 150% 0; } 100% { background-position: -60% 0; } } /* 19.10 Credenciais (vf-cert) - versao premium, em coluna Selo grande num painel branco no topo, etiqueta "Verificado" verde ao lado, e os textos com a largura toda do cartao (nada de titulo espremido). */ :root .elementor .e-con.vf-cert { display: flex !important; flex-direction: column; align-items: flex-start; gap: 10px; padding: 32px 32px 36px; background: radial-gradient(70% 90% at 100% 0%, #FFF1F0 0%, rgba(255, 241, 240, 0) 60%), #FFFFFF; border: 1px solid #E4E4E7; border-radius: 16px; box-shadow: 0 40px 80px -50px rgba(22, 22, 22, 0.55); } :root .elementor .e-con.vf-cert > :is(.e-image-base, .elementor-widget-image) { width: 136px !important; height: 136px !important; padding: 18px; margin: 0 0 14px; background: radial-gradient(circle at 50% 35%, #FFFFFF 0%, #F4F4F6 75%); border-radius: 14px; box-shadow: inset 0 0 0 1px #ECECEF, 0 24px 40px -28px rgba(22, 22, 22, 0.5); } :root .elementor .e-con.vf-cert > :not(.e-image-base):not(.elementor-widget-image) { width: 100%; margin-top: 0 !important; } :root .elementor .e-con.vf-cert :is(h3, h4, .e-heading-base), :root .elementor .e-con.vf-cert:not(:has(.vf-caption)) :is(h3, h4, .e-heading-base) { max-width: none; padding-right: 0; font-size: clamp(1.375rem, 1.1rem + 0.7vw, 1.75rem); } :root .elementor .e-con.vf-cert .vf-caption { padding-right: 0; font-size: 12px; } :root .elementor .e-con.vf-cert .e-paragraph-base:not(.vf-caption):not(.vf-link) { max-width: 56ch; font-size: 16px; color: #3A3A3F; } .elementor .e-con.vf-cert::before { top: 32px; right: 32px; height: 30px; padding: 0 14px 0 30px; color: #FFFFFF; background-color: #16794A; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23FFFFFF' stroke-width='3' stroke-linecap='square'%3E%3Cpath d='M5 12.5l4.5 4.5L19 7.5'/%3E%3C/svg%3E"); background-position: 11px center; box-shadow: 0 8px 18px -8px rgba(22, 121, 74, 0.8); } .elementor .e-con.vf-cert::after { width: 5px; transform: scaleY(0.45); } :root .elementor .e-con:has(> .e-con.vf-cert) { gap: 24px; align-items: stretch; } @media (max-width: 767px) { :root .elementor .e-con.vf-cert { padding: 24px; } :root .elementor .e-con.vf-cert > :is(.e-image-base, .elementor-widget-image) { width: 112px !important; height: 112px !important; padding: 14px; } .elementor .e-con.vf-cert::before { top: 24px; right: 24px; } } /* Hero com foto ao lado (Quem Somos): textos centralizados na altura da foto */ :root .elementor[data-elementor-type] > .vf-section:first-child > .e-grid-base { align-items: center !important; } /* 19.11 "Sobre esta frente" (vf-statement): fio vermelho animado e a valvula grande vazada ao lado, para dar peso a apresentacao do catalogo. */ :root .elementor .e-con:has(> .vf-statement) { position: relative; isolation: isolate; overflow-x: clip; } :root .elementor .e-con:has(> .vf-statement)::after { content: ""; position: absolute; right: 0; top: 50%; z-index: -1; width: clamp(180px, 26vw, 380px); aspect-ratio: 1; transform: translateY(-50%); background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100' fill='none' stroke='%23D41414' stroke-opacity='0.10' stroke-width='0.7'%3E%3Cpath d='M8 22l42 28L8 78z'/%3E%3Cpath d='M92 22L50 50l42 28z'/%3E%3Ccircle cx='50' cy='50' r='4'/%3E%3Cpath d='M50 46V20M42 20h16'/%3E%3C/svg%3E") center / contain no-repeat; animation: vf-valve-float 14s var(--vf-ease) infinite alternate; pointer-events: none; } @media (max-width: 1024px) { :root .elementor .e-con:has(> .vf-statement)::after { display: none; } } /* 19.12 Pagina do produto: fundo com textura leve, escolha de material mais clara e a aba de detalhes no padrao do site. */ :root .elementor .vf-product-hero { background: radial-gradient(50% 60% at 0% 0%, rgba(212, 20, 20, 0.06), rgba(212, 20, 20, 0) 60%), repeating-linear-gradient(0deg, rgba(22, 22, 22, 0.03) 0 1px, transparent 1px 64px), repeating-linear-gradient(90deg, rgba(22, 22, 22, 0.03) 0 1px, transparent 1px 64px), #FAFAFB !important; } .vf-material__opt span { min-height: 44px; padding: 0 18px 0 42px !important; font-size: 15px !important; } .vf-material { padding: 16px 18px !important; background: #FFFFFF !important; border: 1px solid #E4E4E7 !important; border-radius: 10px; } .vf-material--single { padding: 12px 16px !important; } .vf-material > legend.vf-material__label { float: left; width: 100%; margin: 0 0 12px; padding: 0; } .vf-material > legend.vf-material__label + * { clear: both; } :root .elementor .vf-tabs .woocommerce-Tabs-panel { position: relative; overflow: hidden; isolation: isolate; border-top: 3px solid var(--vf-red) !important; } :root .elementor .vf-tabs .woocommerce-Tabs-panel::after { content: ""; position: absolute; right: -40px; bottom: -40px; z-index: -1; width: 260px; height: 260px; background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100' fill='none' stroke='%23161616' stroke-opacity='0.06' stroke-width='0.8'%3E%3Cpath d='M8 22l42 28L8 78z'/%3E%3Cpath d='M92 22L50 50l42 28z'/%3E%3C/svg%3E") center / contain no-repeat; } :root .elementor .vf-tabs .woocommerce-Tabs-panel :is(h2, h3, h4) { margin: 1.6em 0 0.6em; font: 600 22px/1.25 "Inter", sans-serif; letter-spacing: -0.02em; color: #161616; } :root .elementor .vf-tabs .woocommerce-Tabs-panel p > strong:only-child { display: block; margin-top: 1.4em; font: 600 20px/1.3 "Inter", sans-serif; letter-spacing: -0.015em; color: #161616; } :root .elementor .vf-tabs .woocommerce-Tabs-panel ul { list-style: none; margin: 1em 0 0; padding: 0; display: grid; gap: 10px; } :root .elementor .vf-tabs .woocommerce-Tabs-panel ul li { position: relative; padding: 14px 18px 14px 50px; font-size: 16px; line-height: 1.5; background: #F7F7F8; border: 1px solid #EFEFF1; border-radius: 10px; } :root .elementor .vf-tabs .woocommerce-Tabs-panel ul li::before { content: ""; position: absolute; left: 18px; top: 19px; width: 16px; height: 11px; background: var(--vf-red); clip-path: polygon(0 0, 50% 50%, 100% 0, 100% 100%, 50% 50%, 0 100%); } /* 19.13 Topo do post: o modelo "Pagina postagem" ganha o visual escuro do vf-post-hero automaticamente (titulo, dados e foto bem perto um do outro). */ :root [data-elementor-type="single-post"] > .vf-section:first-child { position: relative; isolation: isolate; overflow: hidden; background: #161616; gap: 20px !important; } .elementor[data-elementor-type="single-post"] > .vf-section:first-child::before { content: ""; position: absolute; inset: 0; z-index: -1; width: auto; height: auto; border: 0; border-radius: 0; opacity: 1; pointer-events: none; background: radial-gradient(50% 70% at 90% 0%, rgba(212, 20, 20, 0.32), rgba(212, 20, 20, 0) 65%), repeating-linear-gradient(0deg, rgba(255, 255, 255, 0.045) 0 1px, transparent 1px 64px), repeating-linear-gradient(90deg, rgba(255, 255, 255, 0.045) 0 1px, transparent 1px 64px); } :root [data-elementor-type="single-post"] > .vf-section:first-child :is(h1, .elementor-heading-title) { max-width: 22ch; margin: 0; color: #FFFFFF !important; font-size: clamp(2.25rem, 1.3rem + 2.6vw, 3.75rem) !important; line-height: 1.06 !important; letter-spacing: -0.04em; text-wrap: balance; } :root [data-elementor-type="single-post"] > .vf-section:first-child .vf-eyebrow { color: #FFFFFF; } :root [data-elementor-type="single-post"] > .vf-section:first-child :is(.vf-meta > *, .vf-small, .vf-reading-time) { color: #C9C9CE !important; } :root [data-elementor-type="single-post"] > .vf-section:first-child .vf-meta > * + *::before { background: rgba(255, 255, 255, 0.35); } :root [data-elementor-type="single-post"] > .vf-section:first-child .vf-crumb :is(a, span) { color: #A1A1A6 !important; } :root [data-elementor-type="single-post"] > .vf-section:first-child > .vf-meta { margin-top: 4px; } :root [data-elementor-type="single-post"] > .vf-section:first-child > :is(.e-image-base, img):last-child { margin-top: 20px; border-radius: 14px; box-shadow: 0 50px 80px -50px rgba(0, 0, 0, 0.9), 0 0 0 1px rgba(255, 255, 255, 0.08); } /* 19.14 Pagina Solicitar orcamento: topo estruturado Esquerda: rotulo, titulo e texto. Direita: as 3 etapas num painel. Fundo com grade tecnica e brilho vermelho, linha de fluxo no pe. */ :root .elementor .vf-section:has(> .vf-steps) { display: grid !important; grid-template-columns: minmax(0, 1fr) auto; align-items: end; gap: 32px 48px !important; padding-bottom: 56px !important; margin-bottom: 0; position: relative; isolation: isolate; overflow: hidden; background: radial-gradient(45% 90% at 100% 0%, rgba(212, 20, 20, 0.10), rgba(212, 20, 20, 0) 65%), repeating-linear-gradient(0deg, rgba(22, 22, 22, 0.035) 0 1px, transparent 1px 56px), repeating-linear-gradient(90deg, rgba(22, 22, 22, 0.035) 0 1px, transparent 1px 56px), #F7F7F8 !important; border-bottom: 1px solid #E4E4E7; } :root .elementor .vf-section:has(> .vf-steps)::after { content: ""; position: absolute; left: 0; right: 0; bottom: -1px; height: 3px; pointer-events: none; background: linear-gradient(90deg, transparent 0%, var(--vf-red) 20%, #FF5A4F 50%, var(--vf-red) 80%, transparent 100%) no-repeat; background-size: 40% 100%; animation: vf-hero-line 6s var(--vf-ease) infinite; } :root .elementor .vf-section:has(> .vf-steps) > .vf-stack { gap: 0; } :root .elementor .vf-section:has(> .vf-steps) > .vf-stack .vf-caption { margin-top: 16px; max-width: 46ch; font-size: 18px; line-height: 1.55; color: #45454B; } :root .elementor .vf-section:has(> .vf-steps) > .vf-steps { width: auto; max-width: none; padding: 18px 24px !important; background: #FFFFFF; border: 1px solid #E4E4E7; border-radius: 14px; box-shadow: 0 30px 60px -40px rgba(22, 22, 22, 0.45); } :root .elementor .vf-section:has(> .vf-steps) + .vf-section { padding-top: 40px !important; } @media (max-width: 1024px) { :root .elementor .vf-section:has(> .vf-steps) { grid-template-columns: minmax(0, 1fr); align-items: start; padding-bottom: 32px !important; margin-bottom: 0; } :root .elementor .vf-section:has(> .vf-steps) > .vf-steps { width: 100%; justify-content: space-between; padding: 14px 16px !important; } } /* 19.15 Solicitacao recebida: topo e linha do tempo com mais presenca */ :root .elementor .vf-section--dark:has(.vf-timeline) { position: relative; isolation: isolate; overflow: hidden; } .elementor .vf-section--dark:has(.vf-timeline)::before { content: ""; position: absolute; inset: 0; z-index: -1; width: auto; height: auto; border: 0; border-radius: 0; opacity: 1; pointer-events: none; background: radial-gradient(40% 70% at 0% 0%, rgba(22, 121, 74, 0.22), rgba(22, 121, 74, 0) 60%), radial-gradient(45% 80% at 100% 100%, rgba(212, 20, 20, 0.25), rgba(212, 20, 20, 0) 60%), repeating-linear-gradient(0deg, rgba(255, 255, 255, 0.04) 0 1px, transparent 1px 64px), repeating-linear-gradient(90deg, rgba(255, 255, 255, 0.04) 0 1px, transparent 1px 64px); } :root .elementor .vf-timeline { padding: 32px !important; background: rgba(255, 255, 255, 0.04); border: 1px solid rgba(255, 255, 255, 0.12); border-radius: 16px; } :root .elementor .vf-timeline > .e-con:first-child > .e-con:first-child { background: #16794A; border-color: #16794A; box-shadow: 0 0 0 6px rgba(22, 121, 74, 0.25); } :root .elementor .vf-timeline > .e-con:nth-child(2) > .e-con:first-child { border-color: rgba(255, 255, 255, 0.5); animation: vf-pulse 2.4s var(--vf-ease) infinite; } :root .elementor .vf-section--dark .vf-quote-number { display: inline-flex; align-items: center; gap: 8px; padding: 8px 14px; background: rgba(255, 255, 255, 0.06); border: 1px solid rgba(255, 255, 255, 0.14); border-radius: 999px; } @media (max-width: 767px) { :root .elementor .vf-timeline { padding: 22px !important; } } /* 19.16 Filtro do catalogo no celular: fechado, so o botao (sem caixa vazia) */ @media (max-width: 1024px) { .e-con.vf-filter-host:not(.vf-filter-open) { gap: 0 !important; padding: 0 !important; background: none !important; border: 0 !important; box-shadow: none !important; } .e-con.vf-filter-host:not(.vf-filter-open) > [class*="elementor-widget-jet-smart-filters"] { display: none !important; } .e-con.vf-filter-host.vf-filter-open { padding: 16px !important; } } /* Rotulo e titulo fora da caixa do filtro: alinhados a borda da grade */ :root .elementor .e-con:has(> .e-con > [class*="elementor-widget-jet-smart-filters"]:not(.elementor-widget-jet-smart-filters-pagination)) > .vf-section-head { padding: 0 !important; } /* 19.17 Celular: protecoes de layout - Grade da trajetoria (Quem Somos 01) sempre em 1 coluna - Card "E mais" sem altura sobrando - Selo das credenciais alinhado a esquerda */ @media (max-width: 767px) { :root .elementor .vf-section > .e-con:has(> .e-con > .vf-count) { display: flex !important; flex-direction: column !important; grid-template-columns: minmax(0, 1fr) !important; } :root .elementor .vf-split--accordion > .e-con:last-child:has(> .vf-body) { min-height: 0 !important; height: auto !important; flex: 0 0 auto !important; } :root .elementor .e-con.vf-cert > :is(.e-image-base, .elementor-widget-image) { align-self: flex-start !important; margin-left: 0 !important; } } /* 19.18 Faixa de selos dos catalogos (fora da Home): texto discreto no celular */ @media (max-width: 1024px) { body:not(.home) .vf-marquee .e-paragraph-base { font-size: 15px !important; letter-spacing: 0 !important; } } /* 19.19 Paginas legais no celular: cartao sem margem dupla e tabela legivel */ @media (max-width: 767px) { :root .elementor .vf-legal:not(.vf-legal-nav) { padding: 20px 16px !important; border-radius: 12px; } :root .elementor .vf-legal table { display: block; overflow-x: auto; -webkit-overflow-scrolling: touch; } :root .elementor .vf-legal table :is(th, td) { min-width: 150px; font-size: 13px; padding: 10px 12px !important; } :root .elementor .vf-legal h2 { font-size: 20px !important; } } /* 19.20 Post: colunas do indice e da lateral acompanham a leitura sem sair da grade (corrige "Posicao: fixa" colocada no Flexbox C1) */ @media (min-width: 1025px) { :root [data-elementor-type="single-post"] .e-grid-base > .e-con.vf-sticky { position: sticky !important; top: var(--vf-sticky-top) !important; left: auto !important; align-self: start; width: auto !important; } } @media (max-width: 1024px) { :root [data-elementor-type="single-post"] .e-grid-base > .e-con.vf-sticky { position: static !important; } } /* 19.21 Filtro dos catalogos (v12.12): a caixa acompanha a rolagem, mas nunca esconde categorias. Se a lista for maior que a tela, a propria caixa rola (barra fina) e, ao chegar no fim, a rolagem segue para a pagina. */ @media (min-width: 1025px) { .e-con:not(.vf-section):has(> [class*="elementor-widget-jet-smart-filters"]:not(.elementor-widget-jet-smart-filters-pagination)) { max-height: calc(100vh - var(--vf-sticky-top) - 24px); overflow-x: hidden !important; overflow-y: auto !important; overscroll-behavior: auto; scrollbar-width: thin; scrollbar-color: #C7C7CC transparent; } .e-con:not(.vf-section):has(> [class*="elementor-widget-jet-smart-filters"]:not(.elementor-widget-jet-smart-filters-pagination)) :is(.elementor-widget-container, .jet-smart-filters-checkboxes, .jet-checkboxes-list, .jet-checkboxes-list-wrapper, .jet-list-tree) { flex: 0 0 auto !important; min-height: auto !important; max-height: none !important; overflow: visible !important; } } @media (prefers-reduced-motion: reduce) { .elementor *::before, .elementor *::after { animation: none !important; } }/* End custom CSS */