/* ========================================================================== ZetaUno — base stylesheet Estilos estruturais (header/hero/grid/cards) para as páginas ainda não migradas para os componentes do design system oficial (static/design-system/zetauno-style.css, classes .zeta-*). Todas as cores abaixo usam os tokens de tema definidos lá (--bg-base, --surface, --text-primary etc.), então respeitam automaticamente o tema claro/escuro ativo via [data-theme] no . ========================================================================== */ :root { --container-width: 1140px; --space-1: 0.5rem; --space-2: 1rem; --space-3: 1.5rem; --space-4: 2.5rem; --space-5: 4rem; /* Ponta verde do gradiente da hero — bem clara no tema claro (padrão), bem escura no tema escuro (ver [data-theme="dark"] abaixo). */ --hero-accent: var(--zeta-green-100); } [data-theme="dark"] { --hero-accent: var(--zeta-green-900); } /* Reset leve (o reset de base — box-sizing, fontes, cor de fundo do body — já vem de zetauno-style.css) ------------------------------------------- */ html { scroll-behavior: smooth; } a { color: var(--accent-hover); text-decoration: none; } a:hover { color: var(--accent); text-decoration: underline; } h1, h2, h3, h4 { font-family: var(--font-display); line-height: 1.2; margin: 0 0 var(--space-2); } p { margin: 0 0 var(--space-2); } .sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; } .skip-link { position: absolute; left: -9999px; top: 0; background: var(--accent); color: var(--text-on-green); padding: var(--space-1) var(--space-2); z-index: 1000; } .skip-link:focus { left: 0; } /* Layout ------------------------------------------------------------------ */ .container { width: 100%; max-width: var(--container-width); margin-inline: auto; padding-inline: var(--space-3); } .section { padding-block: var(--space-5); } .section--muted { background: var(--surface); } .section__intro { color: var(--text-secondary); } .grid { display: grid; gap: var(--space-3); } .grid--3 { grid-template-columns: repeat(3, 1fr); } @media (max-width: 800px) { .grid--3 { grid-template-columns: 1fr; } } .grid--4 { grid-template-columns: repeat(4, 1fr); } @media (max-width: 1000px) { .grid--4 { grid-template-columns: repeat(2, 1fr); } } @media (max-width: 560px) { .grid--4 { grid-template-columns: 1fr; } } .card { border: 1px solid var(--border); border-radius: var(--radius-md); padding: var(--space-3); background: var(--surface-raised); } /* Destaques (ícone + texto com um trecho em cor de destaque) --------------- */ .highlight-card { display: flex; flex-direction: row; align-items: center; gap: var(--space-3); } .highlight-card__icon { display: inline-flex; align-items: center; justify-content: center; flex-shrink: 0; width: 48px; height: 48px; border-radius: var(--radius-md); background: var(--surface-sunken); color: var(--accent-hover); } .highlight-card__text { margin: 0; color: var(--text-secondary); font-size: var(--fs-body-lg); } /* Cabeçalho de card com ícone acima do título, alinhados à esquerda --------- */ .zeta-card__header--icon-top { flex-direction: column; align-items: flex-start; text-align: left; gap: var(--space-2); } .zeta-card__header--icon-top .highlight-card__icon { width: 64px; height: 64px; } .zeta-card__header--icon-top .zeta-card__title { font-size: var(--fs-h3); } /* O trecho em destaque quebra para a própria linha, um pouco maior */ .highlight-card__text strong { display: block; margin-bottom: 2px; font-family: var(--font-display); font-size: var(--fs-h3); } /* Header / nav -------------------------------------------------------------- */ .site-header { position: sticky; top: 0; z-index: 100; border-bottom: 1px solid var(--border); background: var(--surface); } .site-header__inner { display: flex; align-items: center; justify-content: space-between; padding-block: var(--space-2); } .site-header__logo { display: inline-flex; align-items: center; } .site-header__logo-img { height: 40px; } .site-header__logo-img--light { display: none; } [data-theme="light"] .site-header__logo-img--dark { display: none; } [data-theme="light"] .site-header__logo-img--light { display: block; } /* Agrupa nav + ações à direita, colado no fim da barra */ .site-nav { margin-inline-start: auto; } .site-nav__list { display: flex; align-items: center; gap: var(--space-3); list-style: none; margin: 0; padding: 0; } .site-nav__list a { color: var(--text-secondary); font-weight: 600; } .site-nav__list a:hover { color: var(--text-primary); text-decoration: none; } /* Item em destaque ("Fale Conosco"): usa o botão-pílula do design system */ .site-nav__list .site-nav__cta, .site-nav__list .site-nav__cta:hover { color: var(--text-on-green); text-decoration: none; } .site-header__actions { display: flex; align-items: center; gap: var(--space-2); margin-inline-start: var(--space-4); } .theme-toggle { color: var(--text-primary); } .theme-toggle__icon--moon { display: none; } [data-theme="light"] .theme-toggle__icon--moon { display: block; } [data-theme="light"] .theme-toggle__icon--sun { display: none; } .site-header__toggle { display: none; flex-direction: column; gap: 4px; background: none; border: 0; cursor: pointer; padding: var(--space-1); } .site-header__toggle-bar { width: 22px; height: 2px; background: var(--text-primary); } @media (max-width: 800px) { .site-header__inner { flex-wrap: wrap; } .site-header__toggle { display: flex; } .site-nav { order: 3; flex-basis: 100%; margin-inline-start: 0; display: none; } .site-nav.is-open { display: block; } .site-header__actions { order: 2; margin-inline-start: 0; } .site-nav__list { flex-direction: column; align-items: flex-start; gap: var(--space-2); padding-block: var(--space-2); } } /* Hero ------------------------------------------------------------------ */ .hero { min-height: 100vh; display: flex; align-items: center; padding-block: var(--space-5); /* Grade técnica (mesma trama de .zeta-grid) sobre um gradiente do tom atual da superfície até um verde bem escuro da marca. */ background-image: linear-gradient(var(--bg-grid) 1px, transparent 1px), linear-gradient(90deg, var(--bg-grid) 1px, transparent 1px), linear-gradient(120deg, var(--surface), var(--hero-accent)); background-size: var(--grid-size) var(--grid-size), var(--grid-size) var(--grid-size), 100% 100%; } .hero__grid { align-items: center; } .hero__media { display: flex; justify-content: center; } /* A foto é um recorte com fundo transparente: nada de moldura ou fundo atrás dela. A sombra usa drop-shadow (e não box-shadow) para seguir o contorno do produto em vez do retângulo da imagem. */ .hero__media img { display: block; width: auto; height: auto; max-width: 100%; max-height: 70vh; filter: drop-shadow(0 12px 24px rgb(0 0 0 / 0.18)); transform: scale(1); transition: transform var(--dur-base) var(--ease-out), filter var(--dur-base) var(--ease-out); } .hero__media img:hover { transform: scale(1.04); filter: drop-shadow(0 22px 34px rgb(0 0 0 / 0.24)); } @media (prefers-reduced-motion: reduce) { .hero__media img { transition: none; } .hero__media img:hover { transform: none; } } .hero__content { display: flex; flex-direction: column; align-items: flex-start; gap: var(--space-4); } .hero__subtitle { color: var(--text-secondary); font-size: clamp(1.125rem, 1rem + 0.6vw, 1.375rem); } /* Quem Somos ------------------------------------------------------------- */ .quem-somos__grid { align-items: center; } /* As duas fotos ficam empilhadas, sem moldura nem fundo: só as imagens. */ .quem-somos__photos { display: flex; flex-direction: column; gap: var(--space-3); } .quem-somos__photo img { display: block; width: 100%; height: auto; border-radius: var(--radius-lg); } .quem-somos__content { display: flex; flex-direction: column; align-items: flex-start; gap: var(--space-4); } .quem-somos__text { margin: 0; color: var(--text-secondary); font-size: var(--fs-body-lg); } .quem-somos__topics { display: flex; flex-direction: column; gap: var(--space-3); margin: 0; padding: 0; list-style: none; color: var(--text-secondary); } .quem-somos__topics li { position: relative; padding-left: 1.25rem; } .quem-somos__topics li::before { content: ""; position: absolute; left: 0; top: 0.55em; width: 8px; height: 8px; border-radius: 50%; background: var(--accent-hover); } /* Linha do tempo ------------------------------------------------------------ Linha pontilhada horizontal com um marcador (miniatura) por marco. Rola lateralmente em telas estreitas em vez de empilhar — a linha continua fazendo sentido como uma linha só, do início ao fim. Uso:
  1. …
*/ .timeline { position: relative; display: flex; list-style: none; margin: 0; padding: 0 0 var(--space-3); gap: var(--space-6); overflow-x: auto; } .timeline::before { content: ""; position: absolute; top: 28px; left: 0; right: 0; border-top: 2px dashed var(--border-strong); } .timeline__item { position: relative; z-index: 1; flex: 1 0 200px; display: flex; flex-direction: column; align-items: center; gap: var(--space-3); text-align: center; } .timeline__point { padding: 0; border: none; background: none; cursor: pointer; border-radius: var(--radius-pill); } .timeline__thumb { display: flex; align-items: center; justify-content: center; width: 56px; height: 56px; border-radius: var(--radius-pill); border: 2px dashed var(--border-strong); background: var(--surface-sunken); color: var(--text-muted); transition: transform var(--dur-base) var(--ease-out), border-color var(--dur-base) var(--ease-out), color var(--dur-base) var(--ease-out); } /* Marcos sem foto: só um ponto verde sobre a linha, sem interação alguma. Ocupa a mesma caixa da miniatura para o ponto cair em cima da linha. */ .timeline__dot { position: relative; width: 56px; height: 56px; } .timeline__dot::before { content: ""; position: absolute; top: 50%; left: 50%; width: 14px; height: 14px; transform: translate(-50%, -50%); border-radius: var(--radius-pill); background: var(--accent); } /* Miniatura que já tem foto: borda cheia e imagem preenchendo o círculo */ .timeline__thumb--photo { overflow: hidden; border-style: solid; border-color: var(--border-strong); padding: 0; } .timeline__thumb--photo img { width: 100%; height: 100%; object-fit: cover; border-radius: inherit; } .timeline__point:hover .timeline__thumb, .timeline__point:focus-visible .timeline__thumb { transform: scale(1.08); border-color: var(--accent-hover); color: var(--accent-hover); } .timeline__year { display: block; font-family: var(--font-display); font-weight: var(--fw-bold); font-size: var(--fs-h4); color: var(--text-primary); } .timeline__text { margin: var(--space-1) 0 0; color: var(--text-secondary); font-size: var(--fs-body-sm); } /* Imagem ampliada dentro do modal do marco clicado */ .timeline__modal-image { display: flex; align-items: center; justify-content: center; aspect-ratio: 4 / 3; overflow: hidden; border: 1.5px dashed var(--border-strong); border-radius: var(--radius-lg); background: var(--surface-sunken); color: var(--text-muted); font-weight: var(--fw-bold); } /* Com foto carregada, a moldura tracejada dá lugar à própria imagem */ .timeline__modal-image:has(img:not([hidden])) { border-style: solid; } .timeline__modal-image img { width: 100%; height: 100%; object-fit: cover; } .zeta-modal__dialog--image { max-width: 560px; } /* Trava o scroll da página por trás de um modal aberto */ body.zeta-modal-open { overflow: hidden; } /* Contato ------------------------------------------------------------------ */ .contato__grid { align-items: start; } .contato__content { display: flex; flex-direction: column; gap: var(--space-4); } .contato__subtitle { color: var(--text-secondary); } .contato__channels { display: flex; flex-direction: column; gap: var(--space-3); margin: 0; padding: 0; list-style: none; } .contato__channel { display: flex; align-items: center; gap: var(--space-2); } .contato__channel-icon { display: inline-flex; align-items: center; justify-content: center; flex-shrink: 0; width: 40px; height: 40px; border-radius: var(--radius-md); background: var(--surface-sunken); color: var(--accent-hover); } .contato__channel-text { color: var(--text-secondary); } .contato__channel-text a { color: inherit; } .contato__channel-text a:hover { color: var(--accent); } .contato__form-card { align-self: start; } .contato__form { display: flex; flex-direction: column; gap: var(--space-3); } /* Carrossel de parceiros ---------------------------------------------------- */ .carousel { display: flex; align-items: center; gap: var(--space-3); margin-top: var(--space-5); } .carousel__arrow { flex-shrink: 0; } .carousel__viewport { flex: 1; min-width: 0; overflow: hidden; } .carousel__track { display: flex; margin: 0; padding: 0; list-style: none; gap: var(--space-4); transition: transform 0.5s var(--ease-out); } .carousel__item { flex: 0 0 calc((100% - 2 * var(--space-4)) / 3); display: flex; align-items: center; justify-content: center; padding: var(--space-3); border: 1px solid var(--border); border-radius: var(--radius-md); /* Placa branca fixa nos dois temas. Os PNGs dos parceiros são mistos: uns têm fundo opaco embutido (branco no E-Volk/Villagio, azul no D1) e outros são transparentes com texto preto. Sobre a superfície escura do tema dark, os primeiros virariam retângulos brancos e os segundos sumiriam. */ background: #ffffff; } .carousel__item img { max-width: 100%; max-height: 56px; width: auto; } @media (max-width: 900px) { .carousel__item { flex-basis: calc((100% - var(--space-4)) / 2); } } @media (max-width: 560px) { .carousel__item { flex-basis: 100%; } } @media (prefers-reduced-motion: reduce) { .carousel__track { transition: none; } } /* Nossos Produtos ------------------------------------------------------------ */ .produtos__header { text-align: center; } /* Carrossel de produtos em destaque ----------------------------------------- */ .produtos-carousel { display: flex; align-items: center; gap: var(--space-3); margin-top: var(--space-5); } .produtos-carousel__arrow { flex-shrink: 0; } .produtos-carousel__viewport { flex: 1; min-width: 0; overflow: hidden; } .produtos-carousel__track { display: flex; align-items: center; justify-content: center; gap: var(--space-3); min-height: 480px; } .produto-destaque-card { display: none; flex-direction: column; align-items: center; width: 300px; overflow: hidden; border: 1px solid var(--border); border-radius: var(--radius-lg); background: var(--surface-raised); text-align: center; cursor: default; transition: transform var(--dur-base) var(--ease-out), width var(--dur-base) var(--ease-out), box-shadow var(--dur-base) var(--ease-out), background var(--dur-base) var(--ease-out), border-color var(--dur-base) var(--ease-out); } .produto-destaque-card.is-active { display: flex; } .produto-destaque-card--center { width: 380px; box-shadow: var(--shadow-lg); z-index: 1; } .produto-destaque-card.is-active:hover { transform: translateY(-8px); box-shadow: var(--shadow-lg); background: color-mix(in srgb, var(--surface-raised) 88%, var(--accent) 12%); border-color: color-mix(in srgb, var(--border) 40%, var(--accent) 60%); } .produto-destaque-card--center.is-active:hover { box-shadow: var(--shadow-xl); } .produto-destaque-card__media { display: flex; align-items: center; justify-content: center; width: 100%; aspect-ratio: 4 / 5; background: var(--surface-sunken); } .produto-destaque-card__media img { width: 100%; height: 100%; object-fit: contain; } .produto-destaque-card__body { display: flex; flex-direction: column; align-items: center; width: 100%; padding: var(--space-2); flex: 1; } .produto-destaque-card__title { margin: 0 0 var(--space-1); font-family: var(--font-display); font-size: var(--fs-h3); color: var(--text-primary); } .produto-destaque-card--center .produto-destaque-card__title { font-size: var(--fs-h2); } .produto-destaque-card__cta { margin-top: auto; } @media (max-width: 700px) { .produto-destaque-card:not(.produto-destaque-card--center) { display: none; } .produto-destaque-card--center { width: 100%; } } @media (prefers-reduced-motion: reduce) { .produto-destaque-card { transition: none; } } /* Perguntas Frequentes ------------------------------------------------------ */ .faq__grid { align-items: start; } .faq__media img { display: block; width: 100%; height: auto; border-radius: var(--radius-lg); } .faq__content { display: flex; flex-direction: column; gap: var(--space-4); } .faq__list { display: flex; flex-direction: column; } .faq__item { border-bottom: 1px solid var(--border); } .faq__item:first-child { border-top: 1px solid var(--border); } .faq__question { display: flex; align-items: center; justify-content: space-between; gap: var(--space-3); padding-block: var(--space-3); font-family: var(--font-display); font-weight: var(--fw-bold); font-size: var(--fs-body-lg); color: var(--text-primary); cursor: pointer; list-style: none; } .faq__question::-webkit-details-marker { display: none; } .faq__question:hover { color: var(--accent-hover); } .faq__question:focus-visible { outline: none; border-radius: var(--radius-xs); box-shadow: 0 0 0 4px var(--focus-ring); } .faq__icon { flex-shrink: 0; color: var(--accent-hover); transition: transform var(--dur-base) var(--ease-out); } .faq__item[open] .faq__icon { transform: rotate(180deg); } .faq__answer { margin: 0; padding-bottom: var(--space-4); color: var(--text-secondary); } /* Chamada final para contato (Home) ---------------------------------------- */ .cta-especialista { display: flex; flex-direction: column; align-items: center; gap: var(--space-3); text-align: center; } .cta-especialista__subtitle { margin: 0; color: var(--text-secondary); } /* Cabeçalho de página (título de páginas internas: Sobre, Produtos) -------- */ .page-header { position: relative; overflow: hidden; padding-block: var(--space-8); background-image: linear-gradient(120deg, var(--surface), var(--hero-accent)); } .page-header::before { content: ""; position: absolute; inset: 0; background-image: url("../img/backgrounds/titulo-pagina.png"); background-size: cover; background-position: center; opacity: 0.1; } .page-header .container { position: relative; z-index: 1; } /* Variante com foto de fundo (ex.: Sobre). A imagem chega pelo template em --page-header-image; o véu do ::after usa --surface para manter o contraste do título tanto no tema claro quanto no escuro. */ .page-header--photo { padding-block: var(--space-9); } .page-header--photo::before { background-image: var(--page-header-image); opacity: 0.5; } .page-header--photo::after { content: ""; position: absolute; inset: 0; background-image: linear-gradient( 100deg, var(--surface) 0%, color-mix(in srgb, var(--surface) 60%, transparent) 55%, color-mix(in srgb, var(--surface) 15%, transparent) 100% ); } /* Página de Produtos --------------------------------------------------------- */ .produtos__toolbar { display: flex; flex-wrap: wrap; align-items: flex-end; gap: var(--space-3); margin: var(--space-5) 0; } .produtos__search { flex: 1; min-width: 220px; } .produtos__sort { display: flex; flex-direction: column; gap: 6px; min-width: 220px; } .produtos__empty { margin-top: var(--space-4); } /* Página de Downloads --------------------------------------------------------- */ .downloads__toolbar { display: flex; flex-wrap: wrap; align-items: flex-end; gap: var(--space-3); margin: var(--space-5) 0; } .downloads__search { flex: 1; min-width: 220px; } /* Dois selects (Tipo e Categoria) dividem a linha com a busca; abaixo disso o flex-wrap da toolbar quebra cada um para sua própria linha. */ .downloads__filter { display: flex; flex-direction: column; gap: 6px; flex: 1 1 180px; min-width: 180px; } /* "Buscar" e "Limpar filtros" andam juntos: no desktop fecham a linha da toolbar, e quando ela quebra os dois descem lado a lado, não empilhados. */ .downloads__acoes { display: flex; gap: var(--space-2); } .downloads__empty { margin-top: var(--space-4); } .produto-card { position: relative; display: flex; flex-direction: column; overflow: hidden; border: 1px solid var(--border); border-radius: var(--radius-md); background: var(--surface-raised); transition: transform var(--dur-base) var(--ease-out), box-shadow var(--dur-base) var(--ease-out), background var(--dur-base) var(--ease-out), border-color var(--dur-base) var(--ease-out); } .produto-card:hover { transform: translateY(-4px); box-shadow: var(--shadow-md); background: color-mix(in srgb, var(--surface-raised) 88%, var(--accent) 12%); border-color: color-mix(in srgb, var(--border) 40%, var(--accent) 60%); } @media (prefers-reduced-motion: reduce) { .produto-card { transition: none; } } .produto-card__media { display: flex; align-items: center; justify-content: center; aspect-ratio: 4 / 3; background: var(--surface-sunken); } .produto-card__media img { width: 100%; height: 100%; padding: var(--space-3); object-fit: contain; } /* Em uma coluna o card ocupa a largura toda da tela, e a foto — que cresce junto — passava de 480px de altura, fazendo um único card encher o celular. O teto devolve ao card uma altura que deixa mais de um aparecer por vez. */ @media (max-width: 560px) { .produto-card__media { max-height: 280px; } } .produto-card__body { display: flex; flex-direction: column; align-items: flex-start; gap: var(--space-2); padding: var(--space-3); } .produto-card__title { margin: 0; font-family: var(--font-display); font-size: var(--fs-h3); color: var(--text-primary); } /* O link do título cobre o card inteiro, para o clique valer em qualquer ponto sem aninhar o card dentro de uma âncora. */ .produto-card__title a { color: inherit; } .produto-card__title a::after { content: ""; position: absolute; inset: 0; } .produto-card__title a:hover { color: var(--accent-hover); text-decoration: none; } .produto-card__summary { margin: 0; color: var(--text-secondary); font-size: var(--fs-body-sm); } .produto-card__power { margin: 0; font-family: var(--font-display); font-weight: var(--fw-bold); color: var(--accent-hover); } .produto-card__categories { display: flex; flex-wrap: wrap; gap: var(--space-1); } .produto-card__category { cursor: default; padding: 4px 10px; font-size: var(--fs-caption); } /* Página de detalhe do produto ------------------------------------------------ Primeira seção: galeria à esquerda (foto principal + miniaturas clicáveis que abrem a foto ampliada no modal) e informações à direita. Segunda seção: abas com a descrição e a ficha técnica. */ .produto-detalhe__voltar { display: inline-flex; align-items: center; gap: 6px; margin-bottom: var(--space-4); } .produto-detalhe__grid { grid-template-columns: 1fr 1fr; gap: var(--space-5); align-items: start; } @media (max-width: 900px) { .produto-detalhe__grid { grid-template-columns: 1fr; gap: var(--space-4); } } .produto-detalhe__galeria { display: flex; flex-direction: column; gap: var(--space-3); } /* Foto principal — é um botão para poder ser ampliada ao clique */ .produto-galeria__principal { position: relative; display: flex; align-items: center; justify-content: center; aspect-ratio: 1; padding: var(--space-4); overflow: hidden; border: 1px solid var(--border); border-radius: var(--radius-lg); background: var(--surface-sunken); cursor: zoom-in; transition: border-color var(--dur-base) var(--ease-out); } .produto-galeria__principal:hover { border-color: color-mix(in srgb, var(--accent) 55%, var(--border)); } .produto-galeria__principal img { width: 100%; height: 100%; object-fit: contain; } /* Selo de lupa no canto, indicando que a foto abre ampliada */ .produto-galeria__lupa { position: absolute; right: var(--space-2); bottom: var(--space-2); display: inline-flex; align-items: center; justify-content: center; width: 36px; height: 36px; border-radius: var(--radius-pill); background: var(--surface); border: 1px solid var(--border); color: var(--text-secondary); } .produto-galeria__principal:hover .produto-galeria__lupa { color: var(--accent-hover); border-color: var(--accent-hover); } .produto-galeria__miniaturas { display: grid; grid-template-columns: repeat(5, 1fr); gap: var(--space-2); margin: 0; padding: 0; list-style: none; } @media (max-width: 480px) { .produto-galeria__miniaturas { grid-template-columns: repeat(3, 1fr); } } .produto-galeria__miniatura { display: flex; align-items: center; justify-content: center; width: 100%; aspect-ratio: 1; padding: var(--space-1); overflow: hidden; border: 1px solid var(--border); border-radius: var(--radius-md); background: var(--surface-sunken); cursor: zoom-in; transition: border-color var(--dur-base) var(--ease-out), transform var(--dur-base) var(--ease-out); } .produto-galeria__miniatura:hover { transform: translateY(-2px); border-color: color-mix(in srgb, var(--accent) 55%, var(--border)); } .produto-galeria__miniatura img { width: 100%; height: 100%; object-fit: contain; } @media (prefers-reduced-motion: reduce) { .produto-galeria__principal, .produto-galeria__miniatura { transition: none; } } .produto-detalhe__info { display: flex; flex-direction: column; align-items: flex-start; gap: var(--space-3); } .produto-detalhe__titulo { margin: 0; } .produto-detalhe__resumo { margin: 0; color: var(--text-secondary); font-size: var(--fs-body-lg); } .produto-detalhe__potencia { margin: 0; font-family: var(--font-display); font-weight: var(--fw-bold); font-size: var(--fs-h3); color: var(--accent-hover); } /* Rótulo acima do valor (status, categorias) */ .produto-detalhe__meta { display: flex; flex-direction: column; align-items: flex-start; gap: var(--space-1); } .produto-detalhe__categorias { display: flex; flex-wrap: wrap; gap: var(--space-1); } /* Abas (descrição / ficha técnica) ------------------------------------------ */ .produto-abas__lista { display: flex; flex-wrap: wrap; gap: var(--space-4); border-bottom: 1px solid var(--border); } .produto-abas__aba { position: relative; padding: 0 0 var(--space-2); border: none; background: none; cursor: pointer; font-family: var(--font-display); font-weight: var(--fw-bold); font-size: var(--fs-h4); color: var(--text-secondary); transition: color var(--dur-base) var(--ease-out); } .produto-abas__aba:hover { color: var(--text-primary); } .produto-abas__aba:focus-visible { outline: none; border-radius: var(--radius-xs); box-shadow: 0 0 0 4px var(--focus-ring); } /* Sublinhado do item ativo, sobreposto à borda da lista */ .produto-abas__aba::after { content: ""; position: absolute; left: 0; right: 0; bottom: -1px; height: 2px; background: transparent; } .produto-abas__aba--ativa { color: var(--text-primary); } .produto-abas__aba--ativa::after { background: var(--accent); } .produto-abas__painel { padding-top: var(--space-4); } .produto-abas__painel:focus-visible { outline: none; } .produto-abas__descricao { color: var(--text-secondary); max-width: 70ch; } .produto-abas__descricao p:last-child { margin-bottom: 0; } /* Arquivos do produto — um botão por arquivo, que baixa o anexo direto */ .produto-arquivos { display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: var(--space-3); list-style: none; margin: 0; padding: 0; } .produto-arquivos__botao { display: flex; align-items: center; gap: var(--space-3); height: 100%; padding: var(--space-3); border: 1px solid var(--border); border-radius: var(--radius-md); background: var(--surface-raised); color: var(--text-primary); text-decoration: none; transition: transform var(--dur-base) var(--ease-out), border-color var(--dur-base) var(--ease-out), background var(--dur-base) var(--ease-out), box-shadow var(--dur-base) var(--ease-out); } .produto-arquivos__botao:hover { transform: translateY(-2px); border-color: color-mix(in srgb, var(--border) 40%, var(--accent) 60%); background: color-mix(in srgb, var(--surface-raised) 88%, var(--accent) 12%); box-shadow: var(--shadow-lg); } .produto-arquivos__botao:focus-visible { outline: none; box-shadow: 0 0 0 4px var(--focus-ring); } .produto-arquivos__icone { flex: none; color: var(--accent); } .produto-arquivos__texto { display: flex; flex-direction: column; gap: 2px; min-width: 0; } .produto-arquivos__nome { font-weight: var(--fw-bold); } .produto-arquivos__meta { font-size: var(--fs-body-sm); color: var(--text-secondary); } /* No toque, o link de voltar e as abas precisam de área maior que a altura do próprio texto — o dedo não mira tão fino quanto o ponteiro. */ @media (max-width: 800px) { .produto-detalhe__voltar { padding-block: 10px; margin-bottom: var(--space-2); } .produto-abas__aba { padding-top: 10px; padding-bottom: var(--space-2); } } /* Produtos relacionados ------------------------------------------------------ */ .relacionados__titulo { margin-bottom: var(--space-1); } .relacionados__intro { margin-bottom: var(--space-4); } /* Modal da foto ampliada — o diálogo é só a imagem, sem o cartão estreito padrão do design system. */ .zeta-modal__dialog--imagem { max-width: min(900px, 92vw); padding: var(--space-3); gap: 0; } .produto-zoom__imagem { width: 100%; max-height: 80vh; object-fit: contain; border-radius: var(--radius-md); } /* No celular a moldura do modal precisa encolher: com o respiro do desktop sobrava pouco mais de 200px para a foto — menos do que a própria página já mostrava, o que anula o motivo de ampliar. */ @media (max-width: 560px) { .produto-zoom { padding: var(--space-2); } .produto-zoom .zeta-modal__dialog--imagem { max-width: 100%; padding: var(--space-2); } .produto-zoom__imagem { max-height: 70vh; } } /* Footer ------------------------------------------------------------------ */ .site-footer { border-top: 1px solid var(--border); padding-block: var(--space-5); color: var(--text-secondary); } .site-footer__grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: var(--space-4); } .site-footer__brand p { margin: var(--space-1) 0 0; } .site-footer__heading { margin: 0 0 var(--space-2); font-family: var(--font-body); font-weight: var(--fw-bold); font-size: var(--fs-caption); letter-spacing: 0.06em; text-transform: uppercase; color: var(--text-muted); } .site-footer__col p { margin: 0 0 var(--space-1); } .site-footer__col a { color: var(--text-secondary); } .site-footer__col a:hover { color: var(--accent-hover); } .site-footer__social { display: inline-flex; align-items: center; justify-content: center; width: var(--control-h-md); height: var(--control-h-md); border: var(--border-width-strong) solid var(--border-strong); border-radius: var(--radius-pill); color: var(--text-secondary); } .site-footer__social:hover { color: var(--accent-hover); border-color: var(--accent-hover); } .site-footer__divider { margin: var(--space-5) 0 var(--space-4); border: none; border-top: 1px solid var(--border); } .site-footer__bottom { display: flex; flex-wrap: wrap; gap: var(--space-2) var(--space-4); justify-content: space-between; font-size: var(--fs-body-sm); } .site-footer__bottom p { margin: 0; }