/* Theme Name: Renavac Theme URI: https://renavac.com Description: Tema à medida da Renavac — loja de equipamentos AVAC, fotovoltaico e bombas de calor. Child theme de GeneratePress, leve e otimizado. Author: Renavac Author URI: https://renavac.com Template: generatepress Version: 0.2.0 Text Domain: renavac */ /* ============================================================ 1. TOKENS ============================================================ */ :root { --rv-primary: #031f37; --rv-primary-2: #06283f; --rv-accent: #15573c; --rv-accent-2: #1c6e4d; --rv-sky: #75bae1; --rv-ink: #2e2e2e; --rv-mid: #5b6b78; --rv-surface: #f4f4f4; --rv-white: #ffffff; --rv-rule: #e6e9ec; --rv-font-head: "League Spartan", system-ui, -apple-system, sans-serif; --rv-font-body: "Montserrat", system-ui, -apple-system, sans-serif; --rv-radius: 10px; --rv-radius-lg: 14px; --rv-radius-pill: 10px; /* Escala de espaçamento formal (ui-ux-pro-max) */ --rv-space-xs: 4px; --rv-space-sm: 8px; --rv-space-md: 16px; --rv-space-lg: 24px; --rv-space-xl: 32px; --rv-space-2xl: 48px; --rv-space-3xl: 64px; --rv-shadow-sm: 0 4px 16px -8px rgba(3, 31, 55, .18); --rv-shadow: 0 14px 40px -16px rgba(3, 31, 55, .22); --rv-shadow-lg: 0 22px 60px -22px rgba(3, 31, 55, .28); --rv-shadow-cta: 0 10px 26px -8px rgba(21, 87, 60, .45); --rv-container: 1200px; --rv-ease: cubic-bezier(.22, .61, .36, 1); --rv-t: 220ms var(--rv-ease); } /* ============================================================ 2. BASE ============================================================ */ html { scroll-behavior: smooth; } body.wp-site-blocks, body { background: var(--rv-surface); color: var(--rv-ink); font-family: var(--rv-font-body); font-size: 16.5px; line-height: 1.7; -webkit-font-smoothing: antialiased; overflow-x: hidden; } h1, h2, h3, h4, h5, h6, .site-title { font-family: var(--rv-font-head); color: var(--rv-primary); line-height: 1.12; font-weight: 700; letter-spacing: -.01em; } a { color: var(--rv-accent); text-decoration: none; } a:hover { color: var(--rv-primary); } img { max-width: 100%; height: auto; } :focus-visible { outline: 2px solid var(--rv-accent); outline-offset: 3px; border-radius: 4px; } ::selection { background: var(--rv-accent); color: #fff; } /* ============================================================ 3. LAYOUT ============================================================ */ .rv-container { max-width: var(--rv-container); margin: 0 auto; padding: 0 22px; } .rv-section { padding: 84px 0; } .rv-section--tight { padding: 56px 0; } .rv-center { text-align: center; } .rv-eyebrow { display: inline-block; font-family: var(--rv-font-body); font-weight: 700; font-size: .78rem; letter-spacing: .16em; text-transform: uppercase; color: var(--rv-accent); margin-bottom: 14px; } .rv-title { font-size: clamp(1.7rem, 1rem + 2.4vw, 2.7rem); margin: 0 0 14px; } .rv-lead { color: var(--rv-mid); font-size: 1.08rem; max-width: 60ch; } .rv-center .rv-lead { margin-left: auto; margin-right: auto; } /* ============================================================ 4. BOTÕES ============================================================ */ .rv-btn { display: inline-flex; align-items: center; gap: 9px; padding: 11px 22px; border-radius: var(--rv-radius-pill); font-family: var(--rv-font-body); font-weight: 600; font-size: .92rem; cursor: pointer; border: 2px solid transparent; transition: transform var(--rv-t), box-shadow var(--rv-t), background var(--rv-t), color var(--rv-t); } .rv-btn .rv-ic { width: 17px; height: 17px; } /* CTAs mais compactos no telemóvel (tinham padding grande, sobretudo na homepage) */ @media (max-width: 768px) { .rv-btn { padding: 9px 17px; font-size: .87rem; } .rv-btn .rv-ic { width: 15px; height: 15px; } } .rv-btn--primary { background: var(--rv-accent); color: #fff; box-shadow: var(--rv-shadow-cta); } .rv-btn--primary:hover { background: var(--rv-accent-2); color: #fff; transform: translateY(-2px); box-shadow: 0 16px 34px -10px rgba(21, 87, 60, .55); } .rv-btn--light { background: #fff; color: var(--rv-primary); } .rv-btn--light:hover { transform: translateY(-2px); box-shadow: var(--rv-shadow); color: var(--rv-primary); } .rv-btn--ghost { background: transparent; color: #fff; border-color: rgba(255, 255, 255, .55); } .rv-btn--ghost:hover { background: rgba(255, 255, 255, .12); color: #fff; } .rv-btn--outline { background: transparent; color: var(--rv-accent); border-color: var(--rv-accent); } .rv-btn--outline:hover { background: var(--rv-accent); color: #fff; } /* ============================================================ 5. CARTÕES ============================================================ */ .rv-card { background: var(--rv-white); border: 1px solid var(--rv-rule); border-radius: var(--rv-radius-lg); padding: 28px; box-shadow: var(--rv-shadow-sm); transition: transform var(--rv-t), box-shadow var(--rv-t), border-color var(--rv-t); } .rv-card:hover { transform: translateY(-6px); box-shadow: var(--rv-shadow); border-color: rgba(21, 87, 60, .25); } .rv-ic-badge { width: 56px; height: 56px; border-radius: 16px; display: inline-flex; align-items: center; justify-content: center; background: linear-gradient(135deg, rgba(117, 186, 225, .22), rgba(21, 87, 60, .14)); color: var(--rv-accent); margin-bottom: 18px; } .rv-ic-badge .rv-ic { width: 28px; height: 28px; } /* ============================================================ 6. HEADER ============================================================ */ .site-header { background: #fff; box-shadow: 0 1px 0 var(--rv-rule); } /* .inside-header vem ANTES da nav no DOM (ambas z auto) → a nav tapava o dropdown da pesquisa. Elevar a stacking da inside-header acima da navegação. */ .site-header .inside-header { display: flex; align-items: center; gap: 32px; padding-top: 14px; padding-bottom: 14px; position: relative; z-index: 200; } .main-navigation .main-nav ul li > a { padding-left: 20px; padding-right: 20px; line-height: 50px; } .rv-utility { gap: 26px; } .site-header .site-logo { flex: 0 0 auto; } .site-logo img, .header-image, .site-header .header-image { max-height: 52px; width: auto; image-rendering: -webkit-optimize-contrast; } .main-title, .site-description { display: none; } /* Linha de topo: pesquisa + ações */ .rv-header-top { flex: 1; display: flex; align-items: center; gap: 24px; } .rv-search { display: flex; align-items: stretch; flex: 1 1 auto; max-width: 600px; background: var(--rv-surface); border: 1px solid var(--rv-rule); border-radius: var(--rv-radius-pill); overflow: hidden; } .rv-search input[type="search"] { flex: 1; border: 0; background: transparent; padding: 7px 18px; font-family: var(--rv-font-body); color: var(--rv-ink); font-size: .92rem; } .rv-search input[type="search"]:focus { outline: none; } .rv-search button { background: var(--rv-accent); border: 0; color: #fff; padding: 0 20px; cursor: pointer; display: flex; align-items: center; transition: background var(--rv-t); } .rv-search button:hover { background: var(--rv-primary); } .rv-search button .rv-ic { width: 20px; height: 20px; } /* Carrinho do header: só o carrinho (sem o número) + balão "adicionado" */ .rv-cart-pop { position: absolute; top: calc(100% + 14px); right: 0; z-index: 100001; display: inline-flex; align-items: center; gap: 8px; white-space: nowrap; background: var(--rv-accent); color: #fff; font-weight: 700; font-size: .85rem; padding: 11px 15px; border-radius: 12px; box-shadow: 0 16px 40px -14px rgba(3, 31, 55, .5); opacity: 0; transform: translateY(-8px) scale(.96); transform-origin: top right; transition: opacity .25s, transform .25s; pointer-events: none; } .rv-cart-pop.show { opacity: 1; transform: translateY(0) scale(1); } .rv-cart-pop::before { content: ""; position: absolute; top: -6px; right: 26px; width: 13px; height: 13px; background: var(--rv-accent); transform: rotate(45deg); border-radius: 2px; } .rv-cart-pop-ic { width: 18px; height: 18px; border-radius: 50%; background: rgba(255, 255, 255, .22); display: inline-flex; align-items: center; justify-content: center; font-size: .7rem; } .main-navigation, .main-navigation ul li a { font-family: var(--rv-font-body); font-weight: 600; } .main-navigation .main-nav ul li a { color: var(--rv-primary); } .main-navigation .main-nav ul li a:hover, .main-navigation .main-nav ul li.current-menu-item a { color: var(--rv-accent); } .rv-topbar { background: var(--rv-primary); color: rgba(255, 255, 255, .82); font-size: .84rem; } .rv-topbar-inner { display: flex; justify-content: space-between; align-items: center; padding-top: 10px; padding-bottom: 10px; flex-wrap: wrap; gap: 6px 20px; } .rv-utility { display: flex; gap: 22px; flex-wrap: wrap; } .rv-utility a { color: rgba(255, 255, 255, .82); font-weight: 500; } .rv-utility a:hover { color: var(--rv-sky); } .rv-topbar-meta { display: flex; gap: 18px; align-items: center; } .rv-topbar-meta a { color: rgba(255, 255, 255, .82); } .rv-topbar-meta a:hover { color: var(--rv-sky); } @media (max-width: 760px) { .rv-topbar-meta span { display: none; } .rv-topbar-inner { justify-content: space-between; flex-wrap: nowrap; gap: 10px; } .rv-utility { gap: 14px; } } /* Telemóvel: topbar sem email, menu centrado (em vez de quebrar para 2 linhas) */ @media (max-width: 600px) { .rv-topbar-meta { display: none !important; } .rv-topbar-inner { justify-content: center !important; flex-wrap: wrap; gap: 4px 16px; } .rv-utility { justify-content: center; flex-wrap: wrap; gap: 16px; width: 100%; } } body.is-scrolled .site-header { box-shadow: var(--rv-shadow-sm); } .rv-header-actions { display: flex; align-items: center; gap: 18px; flex: 0 0 auto; margin-left: auto; } .rv-header-actions .rv-h-link { display: inline-flex; align-items: center; gap: 8px; color: var(--rv-primary); font-weight: 600; font-size: .9rem; } .rv-header-actions .rv-h-link:hover { color: var(--rv-accent); } .rv-header-actions .rv-ic { width: 22px; height: 22px; } /* Conta: ícone + "Olá!" / "Iniciar sessão" (ou nome) */ .rv-h-account { display: inline-flex; align-items: center; gap: 9px; text-decoration: none; } .rv-h-account .rv-ic { width: 24px; height: 24px; color: var(--rv-primary); flex: 0 0 auto; } .rv-h-account:hover .rv-ic { color: var(--rv-accent); } .rv-h-acc-txt { display: flex; flex-direction: column; line-height: 1.15; } .rv-h-acc-top { font-size: .72rem; color: var(--rv-mid); } .rv-h-acc-bot { font-size: .9rem; font-weight: 800; color: var(--rv-primary); } .rv-h-account:hover .rv-h-acc-bot { color: var(--rv-accent); } /* Carrinho: ícone + bolha com o número */ button.rv-h-cart { font: inherit; cursor: pointer; background: none; border: 0; } .rv-h-cart { position: relative; display: inline-flex; align-items: center; justify-content: center; padding: 6px; color: var(--rv-primary); transition: color var(--rv-t), transform var(--rv-t); } .rv-h-cart .rv-ic { width: 26px; height: 26px; color: var(--rv-primary); } .rv-h-cart:hover { color: var(--rv-accent); transform: translateY(-1px); } .rv-h-cart:hover .rv-ic { color: var(--rv-accent); } .rv-cart-count { position: absolute; top: -4px; right: -6px; background: var(--rv-accent); color: #fff; font-family: var(--rv-font-body); font-size: .7rem; font-weight: 800; min-width: 20px; height: 20px; border-radius: 12px; border: 2px solid #fff; display: inline-flex; align-items: center; justify-content: center; padding: 0 4px; } .rv-cart-count[hidden] { display: none; } @media (max-width: 860px) { .rv-h-acc-txt { display: none; } .site-header .inside-header { flex-wrap: wrap; } .rv-header-top { order: 3; flex-basis: 100%; gap: 14px; } .rv-search { max-width: none; } } /* ============================================================ 7. HERO ============================================================ */ .rv-hero { position: relative; overflow: hidden; background: radial-gradient(1200px 600px at 80% -10%, rgba(117, 186, 225, .28), transparent 60%), linear-gradient(135deg, var(--rv-primary) 0%, var(--rv-primary-2) 55%, #0a3a3f 100%); color: #fff; padding: 96px 0 104px; } .rv-hero h1 { color: #fff; font-size: clamp(2.1rem, 1.2rem + 3.4vw, 3.6rem); margin: 0 0 18px; } .rv-hero .rv-eyebrow { color: var(--rv-sky); } .rv-hero p { color: rgba(255, 255, 255, .86); font-size: 1.12rem; max-width: 56ch; margin: 0 0 30px; } .rv-hero .rv-actions { display: flex; gap: 14px; flex-wrap: wrap; } /* ---- HERO CARROSSEL (deslize) ---- */ /* Largura limitada e centrada → ajusta-se a qualquer ecrã sem ficar gigante. Fade/transparência nas extremidades esq/dir via máscara de gradiente. */ .rv-hero-carousel { position: relative; overflow: hidden; background: var(--rv-surface); max-width: 1200px; margin: 26px auto 0; border-radius: var(--rv-radius-lg); box-shadow: var(--rv-shadow-sm); aspect-ratio: 1920 / 750; } .rv-slides-track { display: flex; height: 100%; transition: transform .6s var(--rv-ease); will-change: transform; } .rv-slide { flex: 0 0 100%; min-width: 100%; display: flex; align-items: center; min-height: clamp(440px, 42vw, 580px); color: #fff; } .rv-slide-inner { width: 100%; } .rv-slide-split { display: grid; grid-template-columns: 1.05fr .95fr; gap: 44px; align-items: center; padding: 44px 0; } .rv-slide-text .rv-eyebrow { color: var(--rv-sky); margin-bottom: 12px; } .rv-slide-text h1, .rv-slide-text h2 { color: #fff; font-family: var(--rv-font-head); font-weight: 700; font-size: clamp(1.9rem, 1.1rem + 2.6vw, 3rem); line-height: 1.08; margin: 0 0 16px; } .rv-slide-text p { color: rgba(255, 255, 255, .88); font-size: 1.08rem; max-width: 46ch; margin: 0 0 26px; } .rv-slide-text .rv-actions { display: flex; gap: 14px; flex-wrap: wrap; } /* Produto num cartão branco (resolve fundos brancos dos JPGs + destaca o produto) */ .rv-slide-media { justify-self: end; display: flex; align-items: center; justify-content: center; width: 100%; max-width: 430px; aspect-ratio: 4 / 3; background: radial-gradient(120% 120% at 50% 30%, #ffffff 52%, #e7ecf1 100%); border-radius: var(--rv-radius-lg); padding: 24px; box-shadow: 0 34px 70px -24px rgba(0, 0, 0, .5); transition: transform var(--rv-t), box-shadow var(--rv-t); } .rv-slide-media:hover { transform: translateY(-4px); box-shadow: 0 40px 80px -24px rgba(0, 0, 0, .55); } .rv-slide-media img { max-width: 100%; max-height: 100%; width: auto; height: auto; object-fit: contain; } /* Fundos por marca / categoria */ .rv-slide--clima { background: radial-gradient(900px 520px at 82% 130%, rgba(117, 186, 225, .42), transparent 60%), linear-gradient(135deg, #062b4d, #0a4a72); } .rv-slide--solar { background: radial-gradient(820px 480px at 82% -15%, rgba(255, 184, 77, .34), transparent 55%), linear-gradient(135deg, #04243f, #0a3a4a); } .rv-slide--heat { background: radial-gradient(820px 500px at 82% 130%, rgba(255, 140, 60, .28), transparent 60%), linear-gradient(135deg, #07331f, var(--rv-accent)); } .rv-slide--nipon { background: radial-gradient(840px 480px at 82% -15%, rgba(80, 200, 230, .36), transparent 55%), linear-gradient(135deg, #053246, #0a5c7a); } @media (prefers-reduced-motion: reduce) { .rv-slides-track { transition: none; } } /* Slides tipo BANNER — design COMPLETO, full-bleed (edge-to-edge, sem moldura, sem corte). A imagem ocupa toda a largura; o botão sobrepõe-se no canto inferior. */ .rv-slide--banner { position: relative; display: block; padding: 0; min-height: 0; height: 100%; } .rv-banner-link { display: block; height: 100%; } .rv-banner-img { display: block; width: 100%; height: 100%; object-fit: cover; } /* Slides de FOTO (lifestyle, sem texto na imagem) ganham scrim + título sobreposto */ .rv-slide--photo::before { content: ""; position: absolute; inset: 0; z-index: 2; pointer-events: none; background: linear-gradient(90deg, rgba(3, 31, 55, .6), rgba(3, 31, 55, .18) 45%, transparent 68%); } .rv-banner-overlay { position: absolute; left: 0; right: 0; bottom: 0; z-index: 3; pointer-events: none; display: flex; flex-direction: column; align-items: flex-start; gap: 14px; padding-bottom: 38px; } .rv-banner-overlay .rv-eyebrow { color: var(--rv-sky); margin: 0; } .rv-banner-title { color: #fff; font-family: var(--rv-font-head); font-weight: 700; font-size: clamp(1.7rem, 1rem + 2.2vw, 2.8rem); line-height: 1.08; margin: 0; max-width: 20ch; text-shadow: 0 2px 14px rgba(0, 0, 0, .4); } .rv-banner-overlay .rv-btn { display: none !important; } .rv-visually-hidden { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0 0 0 0); border: 0; white-space: nowrap; } @media (max-width: 680px) { .rv-hero-carousel { aspect-ratio: auto; height: 300px; margin-top: 16px; } .rv-banner-overlay { padding-bottom: 22px; } } /* Controlos */ .rv-carousel-arrow { position: absolute; top: 50%; transform: translateY(-50%); z-index: 5; width: 46px; height: 46px; border-radius: 12px; border: 0; background: rgba(255, 255, 255, .85); color: var(--rv-primary); cursor: pointer; display: inline-flex; align-items: center; justify-content: center; box-shadow: var(--rv-shadow-sm); transition: background var(--rv-t); } .rv-carousel-arrow:hover { background: #fff; } .rv-carousel-arrow .rv-ic { width: 22px; height: 22px; } .rv-carousel-prev { left: 18px; } .rv-carousel-next { right: 18px; } .rv-carousel-prev .rv-ic { transform: rotate(180deg); } .rv-carousel-dots { position: absolute; bottom: 16px; left: 50%; transform: translateX(-50%); z-index: 5; display: flex; gap: 9px; } .rv-dot { width: 11px; height: 11px; border-radius: 12px; border: 0; background: rgba(255, 255, 255, .55); cursor: pointer; padding: 0; transition: background var(--rv-t), width var(--rv-t); } .rv-dot.is-active { background: #fff; width: 26px; } @media (max-width: 860px) { .rv-slide-split { grid-template-columns: 1fr; gap: 22px; padding: 36px 0 48px; } .rv-slide-media { max-width: 280px; justify-self: start; padding: 18px; } .rv-carousel-arrow { display: none; } } @media (max-width: 520px) { .rv-slide-media { display: none; } } /* ============================================================ 8. GRELHAS ============================================================ */ .rv-grid { display: grid; gap: 22px; } .rv-grid--cats { grid-template-columns: repeat(3, 1fr); } @media (max-width: 820px) { .rv-grid--cats { grid-template-columns: repeat(2, minmax(0, 1fr)); } } @media (max-width: 520px) { .rv-grid--cats { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; } } .rv-grid--3 { grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); } @media (max-width: 600px) { .rv-grid--3 { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; } } .rv-section--alt { background: #fff; } .rv-section-head { display: flex; justify-content: space-between; align-items: flex-end; gap: 20px; margin-bottom: 36px; flex-wrap: wrap; } .rv-section-head .rv-title { margin: 0; } .rv-section-head .rv-eyebrow { margin-bottom: 8px; } .rv-home-products .products { margin-bottom: 0 !important; } @media (max-width: 640px) { .rv-section-head { align-items: flex-start; } } .rv-cat-card { display: flex; flex-direction: column; align-items: flex-start; text-align: left; } .rv-cat-card h3 { font-size: 1.18rem; margin: 0 0 6px; } .rv-cat-card p { color: var(--rv-mid); font-size: .92rem; margin: 0 0 16px; } .rv-cat-card .rv-more { margin-top: auto; display: inline-flex; align-items: center; gap: 7px; color: var(--rv-accent); font-weight: 600; font-size: .9rem; } .rv-cat-card:hover .rv-more .rv-ic { transform: translateX(4px); } .rv-cat-card .rv-more .rv-ic { width: 16px; height: 16px; transition: transform var(--rv-t); } /* Cards de categoria compactos no telemóvel (estavam altos/com muito espaço) */ @media (max-width: 600px) { .rv-grid--cats .rv-card { padding: 16px 14px; } .rv-grid--cats .rv-ic-badge { width: 42px; height: 42px; border-radius: 12px; margin-bottom: 10px; } .rv-grid--cats .rv-ic-badge .rv-ic { width: 22px; height: 22px; } .rv-grid--cats .rv-cat-card h3 { font-size: 1rem; margin-bottom: 4px; } .rv-grid--cats .rv-cat-card p { font-size: .82rem; margin-bottom: 10px; line-height: 1.35; } .rv-grid--cats .rv-cat-card .rv-more { font-size: .84rem; } } /* ============================================================ 9. BANDA / CTA / MARCAS ============================================================ */ .rv-band { background: radial-gradient(900px 400px at 100% 0, rgba(117, 186, 225, .22), transparent 60%), linear-gradient(120deg, var(--rv-primary), var(--rv-accent)); color: #fff; border-radius: var(--rv-radius-lg); padding: 48px 44px; display: flex; align-items: center; justify-content: space-between; gap: 28px; flex-wrap: wrap; } .rv-band h2 { color: #fff; margin: 0 0 8px; } .rv-band p { color: rgba(255, 255, 255, .85); margin: 0; max-width: 52ch; } .rv-brands { display: grid; grid-template-columns: repeat(4, 1fr); gap: 24px; } .rv-brand { background: #fff; border: 1px solid var(--rv-rule); border-radius: var(--rv-radius-lg); padding: 28px 24px; min-height: 168px; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 14px; box-shadow: var(--rv-shadow-sm); text-decoration: none; transition: transform var(--rv-t), box-shadow var(--rv-t), border-color var(--rv-t); } .rv-brand:hover { transform: translateY(-4px); box-shadow: var(--rv-shadow); border-color: rgba(21, 87, 60, .25); } /* Caixa de logótipo com altura fixa → todos alinhados na mesma linha de base */ .rv-brand-logo { display: flex; align-items: center; justify-content: center; height: 58px; width: 100%; } .rv-brand-logo img { max-height: 100%; max-width: 78%; width: auto; object-fit: contain; } /* Marcas com logótipo só-símbolo (Mitsubishi, Huawei): símbolo + nome por baixo */ .rv-brand--mark .rv-brand-logo { height: 50px; } .rv-brand--mark .rv-brand-logo img { max-height: 46px; max-width: 60%; } .rv-brand-name { font-family: var(--rv-font-head); font-weight: 700; color: var(--rv-primary); font-size: 1.08rem; letter-spacing: -.01em; line-height: 1; } .rv-brand:hover .rv-brand-name { color: var(--rv-accent); } @media (max-width: 820px) { .rv-brands { grid-template-columns: repeat(2, 1fr); } } @media (max-width: 460px) { .rv-brands { grid-template-columns: 1fr; } } /* ============================================================ 10. RODAPÉ ============================================================ */ .site-footer .site-info, .site-info { background: var(--rv-primary); color: rgba(255, 255, 255, .8); } .site-info a { color: #fff; } /* ============================================================ 11. REVEAL (animação leve) ============================================================ */ /* Animação à prova de falhas: animação CSS pura (fill-mode both → termina sempre visível, nunca depende de JS para o conteúdo aparecer). */ @keyframes rvFadeUp { from { opacity: 0; transform: translateY(22px); } to { opacity: 1; transform: none; } } .js [data-reveal] { animation: rvFadeUp .6s var(--rv-ease) both; } .js [data-reveal][data-delay="1"] { animation-delay: .08s; } .js [data-reveal][data-delay="2"] { animation-delay: .16s; } .js [data-reveal][data-delay="3"] { animation-delay: .24s; } @media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } .js [data-reveal] { animation: none; } .rv-btn, .rv-card { transition: none; } } /* ============================================================ 12. RESPONSIVE ============================================================ */ @media (max-width: 1024px) { .rv-section { padding: 56px 0; } .rv-hero { padding: 72px 0 76px; } .rv-band { padding: 36px 26px; } } /* ============================================================ 13. HOMEPAGE FULL WIDTH (sem caixa/sidebar) ============================================================ */ .rv-fullwidth-home #page, .rv-fullwidth-home #content, .rv-fullwidth-home .site-content, .rv-fullwidth-home .site-main { max-width: 100% !important; width: 100% !important; padding-left: 0 !important; padding-right: 0 !important; margin-left: 0 !important; margin-right: 0 !important; } /* #content do GP é flex (conteúdo + sidebar). Em block, o
preenche 100%. */ .rv-fullwidth-home #content { display: block !important; } .rv-fullwidth-home #renavac-home { width: 100% !important; flex: 1 1 100% !important; } /* Páginas de conteúdo: largura de leitura confortável */ .page:not(.rv-fullwidth-home) .entry-content, .page:not(.rv-fullwidth-home) .entry-header { max-width: 880px; margin-left: auto; margin-right: auto; } .page .entry-content h2 { margin-top: 1.6em; } .page .entry-content ul, .page .entry-content ol { padding-left: 1.2em; } .page .entry-content li { margin: .35em 0; } /* ============================================================ 14. MEGA MENU ============================================================ */ .main-navigation { position: relative; } .main-navigation .main-nav ul li.rv-has-mega { position: static; } .rv-megapanel { position: absolute; left: 0; right: 0; top: 100%; background: #fff; box-shadow: var(--rv-shadow-lg); border-top: 1px solid var(--rv-rule); border-radius: 0 0 var(--rv-radius-lg) var(--rv-radius-lg); padding: 26px 0 30px; z-index: 60; opacity: 0; visibility: hidden; transform: translateY(10px); pointer-events: none; transition: opacity var(--rv-t), transform var(--rv-t), visibility var(--rv-t); } /* Abre via classe .rv-open (controlada por JS ao ENTRAR no item) — não basta aproximar da área do painel. :focus-within mantém o acesso por teclado. */ .main-navigation .main-nav ul li.rv-has-mega.rv-open > .rv-megapanel, .main-navigation .main-nav ul li.rv-has-mega:focus-within > .rv-megapanel { opacity: 1; visibility: visible; transform: none; pointer-events: auto; } /* Cascata 3 níveis: topo (barra) → grupos N2 (rail esq.) → folhas N3 (centro) + cartão destaque (dir.) */ .rv-megapanel-inner { position: relative; display: flex; align-items: stretch; gap: 28px; text-align: left; min-height: 318px; } .rv-megapanel--simple .rv-megapanel-inner { min-height: 240px; } /* Rail esquerdo — grupos (nível 2) */ .rv-mega-rail { flex: 0 0 258px; display: flex; flex-direction: column; gap: 3px; padding-right: 26px; border-right: 1px solid var(--rv-rule); } .rv-megapanel--simple .rv-mega-rail { flex: 1; border-right: 0; padding-right: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; align-content: start; } .rv-mega-g { position: static; border-radius: 12px; } .rv-mega-g-link { display: flex; align-items: center; gap: 13px; padding: 10px 14px; border-radius: 12px; color: var(--rv-primary); font-family: var(--rv-font-head); font-weight: 600; font-size: 1.02rem; line-height: 1.2; transition: background var(--rv-t), color var(--rv-t); } .rv-mega-g-ic { flex: 0 0 auto; width: 38px; height: 38px; border-radius: 11px; display: inline-flex; align-items: center; justify-content: center; background: var(--rv-surface); color: var(--rv-accent); transition: background var(--rv-t), color var(--rv-t); } .rv-mega-g-ic .rv-ic { width: 20px; height: 20px; } .rv-mega-g-name { flex: 1 1 auto; } .rv-mega-g-link .rv-mega-chev { width: 16px; height: 16px; flex: 0 0 auto; opacity: .4; transition: transform var(--rv-t), opacity var(--rv-t); } /* Grupo selecionado (.rv-sub-open, gerido por JS) ou com foco de teclado → destacado */ .rv-mega-g.rv-sub-open > .rv-mega-g-link, .rv-mega-g.has-kids:focus-within > .rv-mega-g-link { background: rgba(21, 87, 60, .07); color: var(--rv-accent); } .rv-mega-g.rv-sub-open > .rv-mega-g-link .rv-mega-g-ic, .rv-mega-g.has-kids:focus-within > .rv-mega-g-link .rv-mega-g-ic { background: var(--rv-accent); color: #fff; } .rv-mega-g.rv-sub-open > .rv-mega-g-link .rv-mega-chev, .rv-mega-g.has-kids:focus-within > .rv-mega-g-link .rv-mega-chev { opacity: 1; transform: translateX(3px); } /* Painel simples (sem N3): grupos como mini-cartões */ .rv-megapanel--simple .rv-mega-g-link { border: 1px solid var(--rv-rule); } .rv-megapanel--simple .rv-mega-g-link:hover { border-color: rgba(21, 87, 60, .35); background: rgba(21, 87, 60, .05); color: var(--rv-accent); } .rv-megapanel--simple .rv-mega-g-link:hover .rv-mega-g-ic { background: var(--rv-accent); color: #fff; } /* Painel central — folhas (nível 3) */ .rv-mega-sub { position: absolute; left: 286px; top: 0; right: 312px; bottom: 0; display: flex; flex-direction: column; opacity: 0; visibility: hidden; transform: translateX(8px); transition: opacity var(--rv-t), transform var(--rv-t), visibility var(--rv-t); pointer-events: none; } .rv-mega-sub-head { display: flex; align-items: center; justify-content: space-between; gap: 14px; padding: 4px 6px 13px; margin-bottom: 8px; border-bottom: 1px solid var(--rv-rule); } .rv-mega-sub-head > span { font-family: var(--rv-font-head); font-weight: 700; color: var(--rv-primary); font-size: 1.04rem; } .rv-mega-sub-head a { display: inline-flex; align-items: center; gap: 6px; color: var(--rv-accent); font-weight: 600; font-size: .82rem; white-space: nowrap; } .rv-mega-sub-head a .rv-ic { width: 14px; height: 14px; } .rv-mega-sub-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); grid-auto-rows: min-content; gap: 2px 18px; align-content: start; } .rv-mega-leaf { display: flex; align-items: center; justify-content: space-between; gap: 10px; color: var(--rv-mid); font-weight: 500; font-size: .95rem; padding: 9px 12px; border-radius: 10px; transition: color var(--rv-t), background var(--rv-t); } .rv-mega-leaf:hover { color: var(--rv-accent); background: var(--rv-surface); } .rv-mega-leaf-chev { width: 15px; height: 15px; flex: 0 0 auto; opacity: 0; transform: translateX(-5px); transition: opacity var(--rv-t), transform var(--rv-t); } .rv-mega-leaf:hover .rv-mega-leaf-chev { opacity: .65; transform: none; } /* Sub-painel visível = grupo selecionado (.rv-sub-open, gerido por JS ao ENTRAR no grupo) OU com foco de teclado. Por ser baseado em classe (não :hover contínuo), o painel central NÃO desaparece ao atravessar o espaço entre o rail e o centro — por isso as subcategorias passam a ser clicáveis. Só vale com o painel aberto. */ .rv-has-mega.rv-open .rv-mega-g.rv-sub-open > .rv-mega-sub, .rv-has-mega:focus-within .rv-mega-g.has-kids:focus-within > .rv-mega-sub { opacity: 1; visibility: visible; transform: none; pointer-events: auto; } /* Cartão em destaque (direita) */ .rv-mega-feature { flex: 0 0 280px; margin-left: auto; align-self: stretch; display: flex; flex-direction: column; align-items: flex-start; padding: 24px; border-radius: var(--rv-radius-lg); text-decoration: none; overflow: hidden; color: #fff; background: radial-gradient(420px 220px at 100% 0, rgba(117, 186, 225, .34), transparent 62%), linear-gradient(150deg, var(--rv-primary), var(--rv-accent)); box-shadow: var(--rv-shadow-sm); transition: transform var(--rv-t), box-shadow var(--rv-t); } .rv-mega-feature:hover { transform: translateY(-3px); box-shadow: var(--rv-shadow); } .rv-mega-feature-ic { width: 50px; height: 50px; border-radius: 14px; background: rgba(255, 255, 255, .16); display: inline-flex; align-items: center; justify-content: center; } .rv-mega-feature-ic .rv-ic { width: 26px; height: 26px; color: #fff; } .rv-mega-feature-body { display: flex; flex-direction: column; margin-top: auto; } .rv-mega-feature-eyebrow { color: var(--rv-sky); font-weight: 700; font-size: .72rem; letter-spacing: .14em; text-transform: uppercase; margin-top: 16px; } .rv-mega-feature-title { font-family: var(--rv-font-head); font-size: 1.32rem; color: #fff; margin: 5px 0 7px; line-height: 1.1; } .rv-mega-feature-tag { color: rgba(255, 255, 255, .82); font-size: .86rem; line-height: 1.45; margin-bottom: 14px; } .rv-mega-feature-cta { display: inline-flex; align-items: center; gap: 7px; font-weight: 700; color: #fff; font-size: .92rem; } .rv-mega-feature-cta .rv-ic { width: 16px; height: 16px; transition: transform var(--rv-t); } .rv-mega-feature:hover .rv-mega-feature-cta .rv-ic { transform: translateX(4px); } .rv-mega-g-name { min-width: 0; } /* GeneratePress impõe display:block + padding L/R nos da navegação → quebra o layout flex (o chevron saltava para baixo). Neutralizar DENTRO do painel com especificidade suficiente para vencer `.main-navigation .main-nav ul li a`. */ .main-navigation .main-nav ul li .rv-megapanel a { padding: 0; line-height: 1.25; } .main-navigation .main-nav ul li .rv-megapanel .rv-mega-g-link { display: flex; padding: 10px 14px; } .main-navigation .main-nav ul li .rv-megapanel .rv-mega-leaf { display: flex; padding: 9px 12px; } .main-navigation .main-nav ul li .rv-megapanel .rv-mega-feature { display: flex; padding: 24px; } .main-navigation .main-nav ul li .rv-megapanel .rv-mega-sub-head a { display: inline-flex; } /* O megamenu não deve aparecer (nem por z-index) quando o carrinho/modal está aberto */ body.rv-no-scroll .rv-megapanel { opacity: 0 !important; visibility: hidden !important; pointer-events: none !important; } /* Neutralizar submenu nativo do GeneratePress dentro do mega menu */ .rv-megapanel ul { position: static !important; opacity: 1 !important; visibility: visible !important; transform: none !important; width: auto !important; min-width: 0 !important; background: none !important; box-shadow: none !important; left: auto !important; top: auto !important; } .rv-megapanel li { position: static !important; width: auto !important; float: none !important; } /* ============================================================ 15. CARRINHO FLUTUANTE + OFF-CANVAS ============================================================ */ .rv-cart-fab { position: fixed; right: 26px; bottom: 26px; left: auto; z-index: 90; width: 64px; height: 64px; border-radius: 12px; border: none; background: var(--rv-accent); color: #fff; cursor: pointer; box-shadow: 0 12px 30px -6px rgba(21, 87, 60, .5); display: inline-flex; align-items: center; justify-content: center; transition: transform var(--rv-t), box-shadow var(--rv-t), background var(--rv-t); } .rv-cart-fab:hover { transform: translateY(-3px) scale(1.05); background: var(--rv-accent-2); box-shadow: 0 18px 40px -8px rgba(21, 87, 60, .6); } .rv-cart-fab .rv-ic { width: 28px; height: 28px; } .rv-cart-fab .rv-fab-count { position: absolute; top: -4px; right: -4px; background: var(--rv-primary); color: #fff; border: 2px solid #fff; min-width: 24px; height: 24px; font-size: .76rem; } .rv-drawer-overlay { position: fixed; inset: 0; background: rgba(3, 31, 55, .5); -webkit-backdrop-filter: blur(3px); backdrop-filter: blur(3px); z-index: 1000; opacity: 0; transition: opacity var(--rv-t); } .rv-drawer-overlay:not([hidden]) { opacity: 1; } .rv-drawer { position: fixed; top: 0; right: 0; height: 100%; width: 410px; max-width: 92vw; background: var(--rv-surface); z-index: 1001; box-shadow: -16px 0 50px -16px rgba(3, 31, 55, .35); transform: translateX(100%); transition: transform .32s var(--rv-ease); display: flex; flex-direction: column; } .rv-drawer.is-open { transform: none; } .rv-drawer-head { display: flex; align-items: center; justify-content: space-between; padding: 18px 22px; background: var(--rv-primary); color: #fff; } .rv-drawer-title { display: inline-flex; align-items: center; gap: 10px; font-family: var(--rv-font-head); font-weight: 700; font-size: 1.15rem; } .rv-drawer-title .rv-ic { width: 22px; height: 22px; } .rv-drawer-close { background: none; border: 0; color: #fff; font-size: 1.7rem; line-height: 1; cursor: pointer; padding: 2px 8px; border-radius: 8px; transition: background var(--rv-t); } .rv-drawer-close:hover { background: rgba(255, 255, 255, .18); } .rv-drawer-body { padding: 18px; overflow-y: auto; flex: 1; } /* Badge de contagem no cabeçalho do drawer */ .rv-drawer-count { display: inline-flex; align-items: center; justify-content: center; min-width: 22px; height: 22px; padding: 0 6px; border-radius: 12px; background: var(--rv-sky); color: var(--rv-primary); font-family: var(--rv-font-body); font-weight: 700; font-size: .78rem; } .rv-drawer-count[hidden] { display: none; } /* Mini-carrinho — cartões ao estilo Lefe */ .rv-mc { display: flex; flex-direction: column; min-height: 100%; } .rv-mc-count { margin: 0 0 14px; color: var(--rv-mid); font-size: .9rem; font-weight: 600; } .rv-mc-list { list-style: none; margin: 0; padding: 0; } .rv-mc-item { display: grid; grid-template-columns: 64px 1fr auto; align-items: start; gap: 14px; background: #fff; border: 1px solid var(--rv-rule); border-radius: var(--rv-radius); padding: 12px; margin: 0 0 12px; } .rv-mc-thumb { width: 64px; height: 64px; } .rv-mc-thumb a, .rv-mc-thumb img { display: block; width: 64px !important; height: 64px; object-fit: contain; border-radius: 10px; background: #fff; border: 1px solid var(--rv-rule); float: none !important; margin: 0 !important; padding: 5px; } .rv-mc-info { display: flex; flex-direction: column; gap: 4px; min-width: 0; } .rv-mc-name { font-family: var(--rv-font-head); font-weight: 600; color: var(--rv-primary); font-size: .92rem; line-height: 1.25; text-decoration: none; } .rv-mc-name:hover { color: var(--rv-accent); } .rv-mc-cat { color: var(--rv-mid); font-size: .76rem; text-transform: uppercase; letter-spacing: .04em; } .rv-mc-row { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-top: 6px; } .rv-qty { display: inline-flex; align-items: center; border: 1px solid var(--rv-rule); border-radius: 12px; overflow: hidden; background: #fff; transition: opacity var(--rv-t); } .rv-qty.is-loading { opacity: .5; pointer-events: none; } .rv-qty-btn { width: 28px; height: 28px; border: 0; background: none; color: var(--rv-primary); font-size: 1.05rem; line-height: 1; cursor: pointer; display: inline-flex; align-items: center; justify-content: center; transition: background var(--rv-t), color var(--rv-t); } .rv-qty-btn:hover { background: var(--rv-surface); color: var(--rv-accent); } .rv-qty-n { min-width: 26px; text-align: center; font-weight: 700; font-size: .88rem; color: var(--rv-primary); } .rv-mc-price { font-weight: 700; color: var(--rv-accent); font-size: .9rem; white-space: nowrap; } .rv-mc-remove { align-self: start; color: var(--rv-mid) !important; display: inline-flex; padding: 4px; border-radius: 8px; background: none !important; transition: color var(--rv-t), background var(--rv-t); } .rv-mc-remove .rv-ic { width: 17px; height: 17px; } .rv-mc-remove:hover { color: #c62828 !important; background: rgba(198, 40, 40, .08) !important; } .rv-mc-clear { align-self: center; background: none; border: 0; color: var(--rv-mid); font-size: .82rem; font-weight: 600; cursor: pointer; padding: 4px 8px; margin: 2px 0 4px; text-decoration: underline; text-underline-offset: 3px; transition: color var(--rv-t); } .rv-mc-clear:hover { color: #c62828; } .rv-mc-total { display: flex; justify-content: space-between; align-items: center; border-top: 1px solid var(--rv-rule); margin-top: auto; padding-top: 16px; font-family: var(--rv-font-head); color: var(--rv-primary); } .rv-mc-total > span:first-child { font-weight: 600; } .rv-mc-total-val { font-size: 1.2rem; font-weight: 700; } .rv-mc-buttons { display: flex; gap: 10px; margin-top: 14px; } .rv-mc-buttons .rv-btn { flex: 1; justify-content: center; padding: 13px 14px; font-size: .9rem; } .rv-mc--empty { align-items: center; justify-content: center; text-align: center; gap: 16px; padding: 50px 10px; } .rv-mc-empty-ic { display: inline-flex; width: 64px; height: 64px; align-items: center; justify-content: center; border-radius: 12px; background: var(--rv-surface); color: var(--rv-accent); } .rv-mc-empty-ic .rv-ic { width: 30px; height: 30px; } .rv-mc-empty-msg { color: var(--rv-mid); margin: 0; } body.rv-no-scroll { overflow: hidden; } @media (max-width: 600px) { .rv-cart-fab { width: 58px; height: 58px; right: 16px; bottom: 16px; } } /* ============================================================ 16. WOOCOMMERCE — loja + cards de produto ============================================================ */ .woocommerce .woocommerce-products-header__title, .woocommerce-page h1.entry-title { font-size: clamp(1.7rem, 1rem + 2vw, 2.4rem); color: var(--rv-primary); } .woocommerce ul.products, .woocommerce-page ul.products { display: grid !important; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 32px; margin: 0 0 32px; padding: 0; } /* Remove o clearfix do WooCommerce que, num grid, cria uma célula vazia (o "primeiro card sem produto"). */ .woocommerce ul.products::before, .woocommerce ul.products::after, .woocommerce-page ul.products::before, .woocommerce-page ul.products::after { content: none !important; display: none !important; } .woocommerce ul.products li.product, .woocommerce-page ul.products li.product { float: none !important; width: auto !important; margin: 0 !important; background: #fff; border: 1px solid var(--rv-rule); border-radius: var(--rv-radius-lg); padding: 16px 16px 22px; box-shadow: var(--rv-shadow-sm); text-align: center; display: flex; flex-direction: column; transition: transform var(--rv-t), box-shadow var(--rv-t), border-color var(--rv-t); } .woocommerce ul.products li.product:hover { transform: translateY(-6px); box-shadow: var(--rv-shadow); border-color: rgba(21, 87, 60, .25); } .woocommerce ul.products li.product a img { border-radius: var(--rv-radius); display: block; margin: 0 auto 16px; background: #f5f6f8; border: 1px solid #e4e9ee; width: 100%; height: 210px; object-fit: contain; padding: 10px; } .woocommerce ul.products li.product > a:first-of-type { display: flex; flex-direction: column; flex: 1 1 auto; } .woocommerce ul.products li.product .star-rating { float: none; display: block; margin: 2px auto 10px; } .woocommerce ul.products li.product .woocommerce-loop-product__title { font-family: var(--rv-font-head); font-size: 1rem; line-height: 1.3; color: var(--rv-primary); padding: 0 0 10px; font-weight: 600; min-height: 2.6em; } .woocommerce ul.products li.product .price { color: var(--rv-accent); font-weight: 800; font-family: var(--rv-font-body); display: block; margin-top: auto; font-size: 1.4rem; line-height: 1.15; } .woocommerce ul.products li.product .price .rv-price-from { display: block; font-size: .72rem; font-weight: 600; color: var(--rv-mid); text-transform: lowercase; letter-spacing: .02em; margin-bottom: 1px; } .rv-loop-options { display: block; font-size: .78rem; color: var(--rv-mid); margin-top: 5px; } .rv-price-consult { color: var(--rv-mid); font-weight: 600; } .woocommerce ul.products li.product .button, .woocommerce ul.products li.product .added_to_cart { margin-top: 14px; } .woocommerce ul.products li.product .price del { color: var(--rv-mid); font-weight: 400; } .woocommerce ul.products li.product .button, .woocommerce ul.products li.product .added_to_cart { margin-top: 14px; border-radius: var(--rv-radius-pill) !important; background: var(--rv-accent) !important; color: #fff !important; font-weight: 600; text-align: center; transition: background var(--rv-t), transform var(--rv-t); } .woocommerce ul.products li.product .button:hover { background: var(--rv-primary) !important; transform: translateY(-2px); } .woocommerce ul.products li.product .button.rv-card-buy { display: inline-flex !important; align-items: center; justify-content: center; gap: 8px; } .rv-card-buy .rv-card-buy-ic { width: 16px; height: 16px; transition: transform var(--rv-t); } .rv-card-buy:hover .rv-card-buy-ic { transform: translateX(3px); } /* títulos de arquivo / breadcrumb */ .woocommerce .woocommerce-breadcrumb { color: var(--rv-mid); font-size: .85rem; margin-bottom: 18px; } .woocommerce .woocommerce-breadcrumb a { color: var(--rv-accent); } /* Loja no telemóvel: reduzir o espaçamento vertical (título, breadcrumb, contagem, grelha) */ @media (max-width: 1024px) { .woocommerce .woocommerce-breadcrumb { margin-bottom: 8px; } /* no produto individual o caminho é longo → esconder no telemóvel/tablet */ .single-product .woocommerce-breadcrumb { display: none !important; } .woocommerce-products-header { margin: 0 0 10px !important; padding: 0 !important; } .woocommerce .woocommerce-products-header__title, .woocommerce-page h1.entry-title { font-size: 1.65rem !important; margin: 0 0 4px !important; } .rv-shop-layout { gap: 12px !important; } .rv-shop-main .woocommerce-result-count { margin: 2px 0 10px !important; } .woocommerce ul.products, .woocommerce-page ul.products { margin: 0 0 18px !important; } .woocommerce-archive-wrapper .entry-content { padding-top: 6px !important; } /* GLOBAL no mobile/tablet: menos espaçamento lateral e de topo em TODAS as páginas * (cards maiores; corrige conta, carrinho, loja, etc. que tinham folga grande) */ .inside-article { padding-left: 14px !important; padding-right: 14px !important; padding-top: 16px !important; } .rv-container { padding-left: 14px; padding-right: 14px; } /* o .entry-content NÃO deve somar padding (senão fica 14+18=32 na conta/carrinho/checkout) */ .entry-content { padding-left: 0 !important; padding-right: 0 !important; } /* checkout: folga lateral mínima (mais largura para os cartões) */ body.woocommerce-checkout .inside-article { padding-left: 4px !important; padding-right: 4px !important; } } /* Paginação da loja */ .woocommerce nav.woocommerce-pagination { margin-top: 40px; text-align: center; } .woocommerce nav.woocommerce-pagination ul { display: inline-flex; gap: 8px; border: 0; } .woocommerce nav.woocommerce-pagination ul li { border: 0; margin: 0; overflow: visible; } .woocommerce nav.woocommerce-pagination ul li a.page-numbers, .woocommerce nav.woocommerce-pagination ul li span.page-numbers { display: inline-flex; align-items: center; justify-content: center; min-width: 44px; height: 44px; padding: 0 12px; border: 1px solid var(--rv-rule); border-radius: 12px; background: #fff; color: var(--rv-primary); font-weight: 600; font-size: .95rem; line-height: 1; transition: background var(--rv-t), color var(--rv-t), border-color var(--rv-t), transform var(--rv-t); } .woocommerce nav.woocommerce-pagination ul li a.page-numbers:hover { background: var(--rv-surface); border-color: var(--rv-accent); color: var(--rv-accent); transform: translateY(-2px); } .woocommerce nav.woocommerce-pagination ul li span.page-numbers.current { background: var(--rv-accent); border-color: var(--rv-accent); color: #fff; } .woocommerce nav.woocommerce-pagination ul li a.next, .woocommerce nav.woocommerce-pagination ul li a.prev { font-weight: 700; } .woocommerce .woocommerce-ordering select { border-radius: var(--rv-radius); border: 1px solid var(--rv-rule); padding: 8px 12px; } /* ---- Filtros da loja ---- */ .rv-shop-layout { display: grid; grid-template-columns: 252px minmax(0, 1fr); gap: 34px; align-items: start; } .rv-filters { position: sticky; top: 20px; } .rv-filters-toggle { display: none; align-items: center; gap: 8px; } .rv-filter-group { background: #fff; border: 1px solid var(--rv-rule); border-radius: var(--rv-radius); padding: 18px; margin-bottom: 16px; box-shadow: var(--rv-shadow-sm); } .rv-filter-group h3 { font-size: 1rem; margin: 0 0 12px; color: var(--rv-primary); font-family: var(--rv-font-head); } .rv-filter-group ul { list-style: none; margin: 0; padding: 0; } .rv-filter-cats > li { margin-bottom: 8px; } .rv-filter-cats > li > a { font-weight: 600; color: var(--rv-primary); } .rv-filter-cats ul { margin: 6px 0 10px; padding-left: 12px; border-left: 2px solid var(--rv-rule); } .rv-filter-cats ul li { margin: 4px 0; } .rv-filter-cats ul a, .rv-filter-brands a { color: var(--rv-mid); font-size: .9rem; } .rv-filter-cats a:hover, .rv-filter-brands a:hover { color: var(--rv-accent); } .rv-filter-brands li { margin: 6px 0; } .rv-price-row { display: flex; align-items: center; gap: 8px; margin-bottom: 12px; } .rv-price-row input { width: 100%; border: 1px solid var(--rv-rule); border-radius: var(--rv-radius); padding: 9px; } .rv-price-btn { padding: 9px 18px !important; width: 100%; justify-content: center; } @media (max-width: 1024px) { .rv-shop-layout { grid-template-columns: minmax(0, 1fr); } .rv-filters-toggle { display: inline-flex; margin-bottom: 14px; } .rv-filters .rv-filters-inner { display: none; } .rv-filters.is-open .rv-filters-inner { display: block; } } /* badges de promoção */ .woocommerce span.onsale { background: var(--rv-accent); color: #fff; border-radius: var(--rv-radius-pill); font-family: var(--rv-font-body); font-weight: 700; min-height: 0; min-width: 0; padding: 5px 14px; top: 18px; left: 18px; margin: 0; } /* ---- Página de produto individual ---- */ .single-product div.product .product_title { font-size: clamp(1.5rem, 1rem + 1.6vw, 2.2rem); margin-bottom: 12px; } .single-product div.product .woocommerce-product-gallery img { border-radius: var(--rv-radius-lg); border: 1px solid var(--rv-rule); background: #fff; } .single-product div.product p.price, .single-product div.product span.price { color: var(--rv-accent) !important; font-size: 1.5rem; font-weight: 700; } .single-product div.product p.price del { color: var(--rv-mid); font-size: 1.05rem; } .single-product .woocommerce-product-details__short-description { color: var(--rv-mid); line-height: 1.7; } .single-product .single_add_to_cart_button, .single-product .button.alt, .woocommerce #respond input#submit.alt { background: var(--rv-accent) !important; color: #fff !important; border-radius: var(--rv-radius-pill) !important; font-weight: 600 !important; padding: 14px 32px !important; font-size: 1rem !important; transition: all var(--rv-t); } .single-product .single_add_to_cart_button:hover, .single-product .button.alt:hover { background: var(--rv-primary) !important; transform: translateY(-2px); } .single-product .quantity input.qty { border-radius: var(--rv-radius); border: 1px solid var(--rv-rule); padding: 12px 8px; } .single-product table.variations td, .single-product table.variations th { padding: 8px 0; } .single-product table.variations select { border-radius: var(--rv-radius); border: 1px solid var(--rv-rule); padding: 10px 12px; } /* USPs no resumo do produto */ .rv-product-usps { display: grid; grid-template-columns: 1fr 1fr; gap: 12px 20px; margin: 24px 0 18px; padding: 18px 0; border-top: 1px solid var(--rv-rule); border-bottom: 1px solid var(--rv-rule); } .rv-product-usps .rv-usp { display: flex; align-items: center; gap: 10px; font-size: .9rem; color: var(--rv-ink); font-weight: 500; } .rv-product-usps .rv-usp .rv-ic { width: 22px; height: 22px; color: var(--rv-accent); flex: 0 0 auto; } .rv-quote-btn { margin-top: 6px; } /* Preço sob consulta */ .rv-sob-consulta { display: inline-block; font-weight: 600; color: var(--rv-accent); font-size: 1.05rem; } .woocommerce ul.products li.product .rv-sob-consulta { font-size: .98rem; } a.rv-quote-btn { display: inline-flex; align-items: center; gap: 8px; } a.rv-quote-btn .rv-ic { width: 18px; height: 18px; } .woocommerce ul.products li.product a.button.rv-quote-btn { background: var(--rv-accent); color: #fff; } /* Separadores */ .woocommerce-tabs { margin-top: 44px; clear: both; } .woocommerce-tabs ul.tabs { border: 0 !important; border-bottom: 2px solid var(--rv-rule) !important; padding: 0 !important; display: flex; gap: 30px; flex-wrap: wrap; margin: 0 0 28px !important; } .woocommerce-tabs ul.tabs::before, .woocommerce-tabs ul.tabs::after { display: none !important; } .woocommerce-tabs ul.tabs li { background: none !important; border: 0 !important; border-radius: 0 !important; margin: 0 0 -2px 0 !important; padding: 0 !important; } .woocommerce-tabs ul.tabs li::before, .woocommerce-tabs ul.tabs li::after { display: none !important; } .woocommerce-tabs ul.tabs li a { color: var(--rv-mid); font-weight: 600; font-size: 1.02rem; padding: 12px 2px !important; display: inline-block; border-bottom: 2px solid transparent; } .woocommerce-tabs ul.tabs li.active a { color: var(--rv-primary); border-bottom-color: var(--rv-accent); } .woocommerce table.shop_attributes { border: 1px solid var(--rv-rule); border-radius: var(--rv-radius); overflow: hidden; } .woocommerce table.shop_attributes th { background: var(--rv-surface); color: var(--rv-primary); } .related.products > h2, .upsells.products > h2 { font-family: var(--rv-font-head); color: var(--rv-primary); margin-top: 50px; } .related.products ul.products, .upsells.products ul.products { grid-template-columns: repeat(4, minmax(0, 1fr)) !important; } @media (max-width: 900px) { .related.products ul.products, .upsells.products ul.products { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; } } /* Especificações técnicas (cartões com ícones) */ .rv-specs { margin: 56px 0 60px; clear: both; } .single-product div.product::after { content: ""; display: table; clear: both; } /* Resumo do produto: respiro e alinhamento */ .single-product div.product .summary.entry-summary { padding-left: 8px; } .single-product div.product form.cart { margin: 22px 0 6px; } .single-product div.product .quantity { margin-right: 12px; } .single-product div.product .woocommerce-variation-add-to-cart { display: flex; align-items: center; flex-wrap: wrap; gap: 4px; } /* ---- Layout premium da página de produto (grid + galeria sticky) ---- */ .single-product div.product { display: grid !important; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 6px 56px; align-items: start; } .single-product div.product::before, .single-product div.product::after { content: none !important; display: none !important; } .single-product div.product > .woocommerce-product-gallery { float: none !important; width: auto !important; margin: 0 !important; position: sticky; top: 24px; } .single-product div.product > .summary { float: none !important; width: auto !important; margin: 0 !important; } .single-product div.product > .rv-specs, .single-product div.product > .rv-brandtech, .single-product div.product > .woocommerce-tabs, .single-product div.product > .rv-promo-banner, .single-product div.product > .rv-compat, .single-product div.product > .related, .single-product div.product > .upsells { grid-column: 1 / -1; } .single-product div.product .product_title { font-size: clamp(1.7rem, 1rem + 2vw, 2.5rem); margin-bottom: 14px; } .single-product div.product p.price, .single-product div.product span.price { font-size: 1.7rem; } @media (max-width: 900px) { .single-product div.product { grid-template-columns: minmax(0, 1fr); gap: 30px; } .single-product div.product > .woocommerce-product-gallery { position: static; } /* mais respiro entre a imagem e o título no telemóvel */ .single-product div.product > .summary { padding-top: 12px; } .single-product div.product .product_title { margin-top: 0; } } .rv-specs-title { font-family: var(--rv-font-head); color: var(--rv-primary); margin-bottom: 22px; font-size: clamp(1.4rem, 1rem + 1.4vw, 1.9rem); } /* Especificações em tiles visuais */ .rv-specgrid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 14px; } @media (max-width: 1000px) { .rv-specgrid { grid-template-columns: repeat(3, 1fr); } } @media (max-width: 720px) { .rv-specgrid { grid-template-columns: repeat(2, 1fr); } } .rv-spec { position: relative; overflow: hidden; display: flex; flex-direction: column; gap: 6px; background: #fff; border: 1px solid var(--rv-rule); border-radius: 14px; padding: 15px 16px; transition: transform .16s, box-shadow .16s, border-color .16s; } .rv-spec::before { content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 3px; background: var(--rv-accent); transform: scaleY(0); transform-origin: top; transition: transform .18s; } .rv-spec:hover { transform: translateY(-4px); box-shadow: 0 16px 34px -20px rgba(3, 31, 55, .55); border-color: rgba(21, 87, 60, .28); } .rv-spec:hover::before { transform: scaleY(1); } .rv-spec-ic { width: 44px; height: 44px; border-radius: 13px; display: inline-flex; align-items: center; justify-content: center; background: linear-gradient(135deg, rgba(117, 186, 225, .2), rgba(21, 87, 60, .14)); color: var(--rv-accent); } .rv-spec-ic .rv-ic, .rv-spec-ic svg { width: 22px; height: 22px; } .rv-spec-ic { order: 0; margin-bottom: 4px; } .rv-spec-k { order: 1; color: var(--rv-primary); font-size: .86rem; font-weight: 700; text-transform: none; letter-spacing: 0; line-height: 1.25; } .rv-spec-v { order: 2; color: var(--rv-ink, #243b4a); font-weight: 400; font-size: .86rem; line-height: 1.35; margin: 0; } .rv-spec--energy .rv-spec-v { display: flex; align-items: center; gap: 9px; flex-wrap: wrap; } .rv-spec-vtxt { font-weight: 500; color: var(--rv-mid); font-size: .9rem; } @media (max-width: 560px) { .rv-specgrid { grid-template-columns: 1fr 1fr; gap: 10px; } .rv-spec { padding: 14px; border-radius: 13px; } .rv-spec-v { font-size: .95rem; } } /* Características-chave em destaque (cartões grandes com gradiente) */ .rv-spechero { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; margin-bottom: 16px; } .rv-shero { position: relative; overflow: hidden; border-radius: 16px; padding: 22px; color: #fff; display: flex; flex-direction: column; gap: 4px; min-height: 150px; box-shadow: 0 16px 36px -22px rgba(3, 31, 55, .6); transition: transform .16s, box-shadow .16s; } .rv-shero:hover { transform: translateY(-4px); box-shadow: 0 22px 44px -20px rgba(3, 31, 55, .6); } .rv-shero--green { background: linear-gradient(140deg, #0c3b2c, #1f8a5c); } .rv-shero--blue { background: linear-gradient(140deg, #0d2f47, #2c7fb0); } .rv-shero--sky { background: linear-gradient(140deg, #134b66, #41a3d6); } .rv-shero--teal { background: linear-gradient(140deg, #133b3a, #2f9e86); } .rv-shero--indigo { background: linear-gradient(140deg, #232554, #4f53b0); } .rv-shero--purple { background: linear-gradient(140deg, #3a1f52, #8a47b0); } .rv-shero--orange { background: linear-gradient(140deg, #5a2a0a, #d97a23); } .rv-shero--amber { background: linear-gradient(140deg, #0d3f44, #1fa0a0); } .rv-shero--slate { background: linear-gradient(140deg, #1f2b38, #4a667f); } .rv-shero--dark { background: linear-gradient(140deg, #06182b, #234a6e); } .rv-shero--energybox { background: linear-gradient(140deg, #1f2b38, #3c5267); } .rv-shero-wm { position: absolute; right: -16px; bottom: -20px; opacity: .14; pointer-events: none; } .rv-shero-wm svg, .rv-shero-wm .rv-ic { width: 108px; height: 108px; color: #fff; } .rv-shero-ic { width: 46px; height: 46px; border-radius: 13px; background: rgba(255, 255, 255, .2); display: inline-flex; align-items: center; justify-content: center; } .rv-shero-ic svg, .rv-shero-ic .rv-ic { width: 23px; height: 23px; color: #fff; } .rv-shero-k { font-size: .74rem; text-transform: uppercase; letter-spacing: .07em; opacity: .82; font-weight: 700; margin-top: 12px; } .rv-shero-v { font-family: var(--rv-font-head); font-size: 1.5rem; font-weight: 800; line-height: 1.18; position: relative; z-index: 1; } .rv-shero-energy { display: inline-block; padding: 5px 14px; border-radius: 9px; color: #fff; font-weight: 900; font-size: 1.5rem; line-height: 1.1; box-shadow: 0 6px 16px -6px rgba(0, 0, 0, .4); } @media (max-width: 860px) { .rv-spechero { grid-template-columns: 1fr 1fr; } } @media (max-width: 560px) { .rv-spechero { gap: 10px; } .rv-shero { min-height: 124px; padding: 16px; border-radius: 15px; } .rv-shero-v { font-size: 1.15rem; } .rv-shero-wm svg, .rv-shero-wm .rv-ic { width: 84px; height: 84px; } } @media (max-width: 720px) { .rv-spectable { grid-template-columns: 1fr; gap: 0; padding: 6px 18px; } } /* Selo de classe energética */ .rv-energy { display: inline-flex; align-items: center; justify-content: center; min-width: 32px; height: 22px; padding: 0 13px 0 7px; color: #fff; font-weight: 800; font-size: .78rem; letter-spacing: .02em; line-height: 1; clip-path: polygon(0 0, calc(100% - 7px) 0, 100% 50%, calc(100% - 7px) 100%, 0 100%); filter: drop-shadow(0 1px 3px rgba(3, 31, 55, .3)); } .rv-card-energy { position: absolute; left: 26px; top: 196px; z-index: 3; pointer-events: none; } .rv-energy--chip { height: 22px; min-width: 42px; font-size: .8rem; } .rv-energyfilter .rv-checkitem { gap: 10px; } /* ---- Secção "Tecnologia {Marca}" ---- */ .rv-brandtech { margin: 56px 0 50px; padding: 36px 38px; border: 1px solid var(--rv-rule); border-radius: var(--rv-radius-lg); background: linear-gradient(180deg, #fff, var(--rv-surface)); box-shadow: var(--rv-shadow-sm); } .rv-brandtech-head { display: flex; align-items: center; gap: 22px; margin-bottom: 24px; flex-wrap: wrap; } .rv-brandtech .rv-brandtech-logo { height: 46px !important; width: auto !important; max-width: 180px !important; flex: 0 0 auto; object-fit: contain; } .rv-brandtech-head-txt .rv-eyebrow { margin: 0 0 2px; } .rv-brandtech-head-txt h2 { margin: 0; font-size: clamp(1.4rem, 1rem + 1.4vw, 1.9rem); color: var(--rv-primary); } .rv-brandtech-head-txt p { margin: 4px 0 0; color: var(--rv-mid); } .rv-brandtech-banner { display: block; width: 100%; height: auto; border-radius: var(--rv-radius); margin: 0 0 26px; } .rv-brandtech-video { position: relative; width: 100%; aspect-ratio: 16 / 9; margin: 0 0 26px; border-radius: var(--rv-radius); overflow: hidden; background: #000; } .rv-brandtech-video iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; } .rv-brandtech-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 18px; } .rv-brandtech-card { background: #fff; border: 1px solid var(--rv-rule); border-radius: var(--rv-radius); padding: 20px; transition: transform var(--rv-t), box-shadow var(--rv-t); } .rv-brandtech-card:hover { transform: translateY(-3px); box-shadow: var(--rv-shadow-sm); } .rv-brandtech-ic { display: inline-flex; align-items: center; justify-content: center; width: 44px; height: 44px; border-radius: 12px; background: linear-gradient(135deg, rgba(117, 186, 225, .22), rgba(21, 87, 60, .14)); color: var(--rv-accent); margin-bottom: 12px; } .rv-brandtech-ic .rv-ic { width: 22px; height: 22px; } .rv-brandtech-card strong { display: block; font-family: var(--rv-font-head); color: var(--rv-primary); font-size: 1.02rem; margin-bottom: 5px; } .rv-brandtech-card p { margin: 0; color: var(--rv-mid); font-size: .9rem; line-height: 1.5; } .rv-brandtech-actions { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 24px; } .rv-brandtech-ds .rv-ds-ic { width: 18px; height: 18px; } @media (max-width: 560px) { .rv-brandtech { padding: 26px 22px; } } /* ---- Avaliações (reviews) ---- */ #reviews { clear: both; } #reviews #comments > h2:first-child { display: none; } /* título redundante (a tab já diz "Avaliações") */ .woocommerce-noreviews { color: var(--rv-mid); background: var(--rv-surface); border-radius: var(--rv-radius); padding: 16px 20px; margin: 0 0 22px; } .woocommerce #reviews #comments ol.commentlist { margin: 0 0 28px; padding: 0; } .woocommerce #reviews #comments ol.commentlist li { background: #fff; border: 1px solid var(--rv-rule); border-radius: var(--rv-radius); padding: 18px 20px; margin-bottom: 14px; } .woocommerce #reviews #comments ol.commentlist li img.avatar { border-radius: 50%; border: 0; } #review_form_wrapper { background: #fff; border: 1px solid var(--rv-rule); border-radius: var(--rv-radius-lg); padding: 28px 30px; box-shadow: var(--rv-shadow-sm); max-width: 640px; } #review_form #reply-title { font-family: var(--rv-font-head); color: var(--rv-primary); font-size: 1.25rem; display: block; margin-bottom: 6px; } #review_form .comment-notes { color: var(--rv-mid); font-size: .9rem; margin-bottom: 16px; } #respond .comment-form-rating label { font-weight: 600; color: var(--rv-primary); display: block; margin-bottom: 6px; } #respond p.stars a { color: #f5a623 !important; } #respond .comment-form label { font-weight: 600; color: var(--rv-primary); } #respond .comment-form-comment textarea, #respond .comment-form-author input, #respond .comment-form-email input { border: 1px solid var(--rv-rule) !important; border-radius: var(--rv-radius) !important; padding: 12px 14px !important; width: 100%; background: var(--rv-surface); } #respond input#submit { background: var(--rv-accent) !important; color: #fff !important; border: 0 !important; border-radius: var(--rv-radius-pill) !important; font-weight: 600 !important; padding: 13px 32px !important; cursor: pointer; transition: background var(--rv-t), transform var(--rv-t); font-family: var(--rv-font-body); } #respond input#submit:hover { background: var(--rv-primary) !important; transform: translateY(-2px); } /* ---- Cards / banners de publicidade ---- */ .rv-promo-banner { display: flex; align-items: center; justify-content: space-between; gap: 24px; flex-wrap: wrap; clear: both; margin: 44px 0; padding: 32px 38px; border-radius: var(--rv-radius-lg); text-decoration: none; background: radial-gradient(700px 300px at 100% 0, rgba(117, 186, 225, .25), transparent 60%), linear-gradient(120deg, var(--rv-primary), var(--rv-accent)); color: #fff; } .rv-promo-banner .rv-eyebrow { color: var(--rv-sky); } .rv-promo-banner strong { display: block; font-family: var(--rv-font-head); font-size: 1.5rem; margin: 4px 0 6px; } .rv-promo-banner p { color: rgba(255, 255, 255, .85); margin: 0; max-width: 52ch; } .woocommerce ul.products li.product.rv-promo-card { background: linear-gradient(135deg, var(--rv-primary), var(--rv-accent)); border: 0; color: #fff; padding: 0; box-shadow: var(--rv-shadow); } .rv-promo-card a { display: flex; flex-direction: column; justify-content: center; height: 100%; padding: 28px 24px; color: #fff; text-decoration: none; text-align: left; } .rv-promo-card .rv-promo-eyebrow { color: var(--rv-sky); font-weight: 700; font-size: .76rem; letter-spacing: .14em; text-transform: uppercase; } .rv-promo-card strong { font-family: var(--rv-font-head); font-size: 1.3rem; margin: 8px 0; display: block; line-height: 1.2; } .rv-promo-card p { color: rgba(255, 255, 255, .85); font-size: .92rem; margin: 0 0 14px; } .rv-promo-card .rv-promo-cta { color: #fff; font-weight: 700; } .rv-filter-quick a { font-weight: 600 !important; color: var(--rv-primary) !important; } /* Card de publicidade nos filtros */ .rv-filter-promo { position: relative; overflow: hidden; display: block; background: radial-gradient(320px 180px at 100% 0, rgba(117, 186, 225, .35), transparent 60%), linear-gradient(140deg, var(--rv-primary), var(--rv-accent)); color: #fff; border-radius: var(--rv-radius-lg); padding: 20px; text-decoration: none; box-shadow: 0 14px 30px -18px rgba(3, 31, 55, .55); transition: box-shadow var(--rv-t), transform var(--rv-t); } .rv-filter-promo:hover { box-shadow: 0 20px 40px -18px rgba(3, 31, 55, .6); transform: translateY(-3px); } .rv-filter-promo-ic { width: 40px; height: 40px; border-radius: 12px; background: rgba(255, 255, 255, .18); display: inline-flex; align-items: center; justify-content: center; margin-bottom: 12px; } .rv-filter-promo-ic svg, .rv-filter-promo-ic .rv-ic { width: 20px; height: 20px; color: #fff; } .rv-filter-promo-eyebrow { display: block; color: #bfe2cc; font-weight: 800; font-size: .68rem; letter-spacing: .14em; text-transform: uppercase; } .rv-filter-promo strong { display: block; font-family: var(--rv-font-head); font-size: 1.12rem; margin: 5px 0 6px; line-height: 1.22; color: #fff; } .rv-filter-promo-txt { display: block; color: rgba(255, 255, 255, .85); font-size: .85rem; line-height: 1.45; margin-bottom: 14px; } .rv-filter-promo-cta { display: inline-flex; align-items: center; gap: 7px; color: #fff; font-weight: 700; font-size: .9rem; background: rgba(255, 255, 255, .14); padding: 9px 16px; border-radius: 12px; transition: background var(--rv-t); } .rv-filter-promo:hover .rv-filter-promo-cta { background: rgba(255, 255, 255, .24); } .rv-filter-promo-cta svg, .rv-filter-promo-cta .rv-ic { width: 15px; height: 15px; transition: transform var(--rv-t); } .rv-filter-promo:hover .rv-filter-promo-cta svg { transform: translateX(3px); } /* Promos que passaram a