/* ========================================================================== HTECH Motion Solutions — Design System (Fase 5) Base: 02_brand_assets/htech/HTECH_Brand_Guide.md Cores: navy #1C3170 · azul #2879C4 · laranja #F5A400 Tipografia: Montserrat (display) + Inter (texto) ========================================================================== */ /* ---------- Fontes locais (self-hosted, sem request externo) ---------- */ @font-face { font-family:"Montserrat"; src:url("../fonts/Montserrat-Regular.woff2") format("woff2"); font-weight:400; font-style:normal; font-display:swap; } @font-face { font-family:"Montserrat"; src:url("../fonts/Montserrat-Medium.woff2") format("woff2"); font-weight:500; font-style:normal; font-display:swap; } @font-face { font-family:"Montserrat"; src:url("../fonts/Montserrat-SemiBold.woff2") format("woff2"); font-weight:600; font-style:normal; font-display:swap; } @font-face { font-family:"Montserrat"; src:url("../fonts/Montserrat-Bold.woff2") format("woff2"); font-weight:700; font-style:normal; font-display:swap; } @font-face { font-family:"Montserrat"; src:url("../fonts/Montserrat-ExtraBold.woff2") format("woff2"); font-weight:800; font-style:normal; font-display:swap; } @font-face { font-family:"Inter"; src:url("../fonts/Inter_24pt-Regular.woff2") format("woff2"); font-weight:400; font-style:normal; font-display:swap; } @font-face { font-family:"Inter"; src:url("../fonts/Inter_24pt-Medium.woff2") format("woff2"); font-weight:500; font-style:normal; font-display:swap; } @font-face { font-family:"Inter"; src:url("../fonts/Inter_24pt-Bold.woff2") format("woff2"); font-weight:700; font-style:normal; font-display:swap; } @font-face { font-family:"Inter"; src:url("../fonts/Inter_24pt-Italic.woff2") format("woff2"); font-weight:400; font-style:italic; font-display:swap; } /* ---------- Design tokens ---------- */ :root{ /* marca */ --navy:#1C3170; --navy-700:#152352; --navy-900:#0E1838; --blue:#2879C4; --blue-100:#EAF3FC; --orange:#F5A400; --orange-600:#D98D00; --white:#FFFFFF; /* neutros */ --ink:#1A1D26; --gray-700:#4B5566; --gray-500:#6B7686; --gray-300:#C9CFD8; --gray-200:#E4E8ED; --gray-100:#F1F3F6; --bg:#FFFFFF; --bg-alt:#F7F9FB; /* tipografia */ --font-display:"Montserrat", Arial, sans-serif; --font-body:"Inter", Arial, sans-serif; /* forma */ --radius-sm:6px; --radius-md:12px; --radius-lg:20px; --shadow-sm:0 1px 3px rgba(14,24,56,.08); --shadow-md:0 8px 24px rgba(14,24,56,.10); --shadow-lg:0 16px 40px rgba(14,24,56,.14); --container:1200px; } /* ---------- Reset base ---------- */ *, *::before, *::after{ box-sizing:border-box; } html{ scroll-behavior:smooth; } body{ margin:0; font-family:var(--font-body); color:var(--ink); background:var(--bg); line-height:1.6; -webkit-font-smoothing:antialiased; } img{ max-width:100%; display:block; } a{ color:inherit; text-decoration:none; } ul{ list-style:none; margin:0; padding:0; } h1,h2,h3,h4{ font-family:var(--font-display); color:var(--navy); line-height:1.2; margin:0 0 .5em; } h1{ font-size:clamp(1.9rem, 4vw, 3.1rem); font-weight:800; } h2{ font-size:clamp(1.5rem, 3vw, 2.15rem); font-weight:800; } h3{ font-size:1.05rem; font-weight:700; } p{ margin:0 0 1em; } .container{ max-width:var(--container); margin:0 auto; padding:0 20px; } section{ padding:64px 0; } .section-alt{ background:var(--bg-alt); } .eyebrow{ display:inline-block; font-family:var(--font-display); font-weight:700; font-size:.78rem; letter-spacing:.08em; text-transform:uppercase; color:var(--blue); margin-bottom:10px; } .section-head{ max-width:760px; margin:0 auto 40px; text-align:center; } .section-head p{ color:var(--gray-700); font-size:1.3rem; line-height:1.55; } .visually-hidden{ position:absolute; width:1px; height:1px; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; } .skip-link{ position:absolute; left:-999px; top:0; background:var(--navy); color:var(--white); padding:12px 20px; z-index:1000; border-radius:0 0 8px 0; } .skip-link:focus{ left:0; } /* ---------- Botões ---------- */ .btn{ display:inline-flex; align-items:center; justify-content:center; gap:8px; font-family:var(--font-display); font-weight:700; font-size:.95rem; padding:14px 26px; border-radius:999px; border:2px solid transparent; cursor:pointer; transition:transform .15s ease, box-shadow .15s ease, background-color .15s ease, color .15s ease; white-space:nowrap; } .btn:hover{ transform:translateY(-2px); } .btn-primary{ background:var(--orange); color:var(--navy-900); box-shadow:var(--shadow-sm); } .btn-primary:hover{ background:var(--orange-600); box-shadow:var(--shadow-md); } .btn-outline{ background:transparent; border-color:rgba(255,255,255,.55); color:var(--white); } .btn-outline:hover{ background:rgba(255,255,255,.12); border-color:var(--white); } .btn-outline-navy{ background:transparent; border-color:var(--navy); color:var(--navy); } .btn-outline-navy:hover{ background:var(--navy); color:var(--white); } .btn-block{ width:100%; } .btn-lg{ padding:17px 34px; font-size:1.05rem; } .btn-sm{ padding:10px 18px; font-size:.85rem; } .btn svg{ width:18px; height:18px; flex:none; } .microcopy{ font-size:1rem; color:var(--gray-500); margin-top:10px; } /* ---------- Header ---------- */ .site-header{ position:sticky; top:0; z-index:200; background:rgba(255,255,255,.96); backdrop-filter:blur(6px); border-bottom:1px solid var(--gray-200); } .site-header .container{ display:flex; align-items:center; gap:24px; height:92px; } .brand{ display:flex; align-items:center; flex:none; } .brand img{ height:56px; width:auto; transition:transform .3s cubic-bezier(.34,1.56,.64,1), filter .3s ease; will-change:transform; } .brand:hover img{ transform:scale(1.09) rotate(-1.5deg); filter:drop-shadow(0 6px 14px rgba(28,49,112,.35)); } .main-nav{ display:none; flex:1; } .main-nav ul{ display:flex; gap:28px; align-items:center; } .main-nav a{ font-family:var(--font-display); font-weight:600; font-size:.92rem; color:var(--navy); padding:8px 2px; position:relative; } .main-nav a:hover{ color:var(--blue); } .header-actions{ display:flex; align-items:center; gap:14px; margin-left:auto; } .header-actions .btn{ padding:11px 20px; font-size:.85rem; } .nav-toggle{ display:flex; margin-left:auto; background:none; border:2px solid var(--navy); border-radius:8px; width:44px; height:40px; align-items:center; justify-content:center; cursor:pointer; } .nav-toggle span, .nav-toggle span::before, .nav-toggle span::after{ content:""; display:block; width:20px; height:2px; background:var(--navy); position:relative; transition:.2s; } .nav-toggle span::before{ position:absolute; top:-6px; } .nav-toggle span::after{ position:absolute; top:6px; } .mobile-nav{ display:none; background:var(--white); border-bottom:1px solid var(--gray-200); } .mobile-nav.open{ display:block; } .mobile-nav ul{ padding:12px 20px 20px; display:flex; flex-direction:column; gap:2px; } .mobile-nav a{ display:block; padding:12px 4px; font-family:var(--font-display); font-weight:600; color:var(--navy); border-bottom:1px solid var(--gray-100); } .mobile-nav .btn{ margin-top:14px; } @media (min-width:960px){ .main-nav{ display:block; } .nav-toggle{ display:none; } .mobile-nav{ display:none !important; } } /* ---------- Hero ---------- */ .hero{ background:linear-gradient(155deg, var(--navy-900) 0%, var(--navy) 55%, var(--navy-700) 100%); color:var(--white); position:relative; overflow:hidden; padding:72px 0 88px; } .hero::before{ content:""; position:absolute; inset:0; opacity:.5; pointer-events:none; background-image: radial-gradient(circle at 85% 12%, rgba(245,164,0,.28), transparent 42%), radial-gradient(circle at 6% 90%, rgba(40,121,196,.35), transparent 45%); } .hero-grid{ position:relative; display:grid; gap:44px; align-items:center; } @media (min-width:960px){ .hero-grid{ grid-template-columns:1.15fr .85fr; } } .hero h1{ color:var(--white); margin-bottom:18px; } .hero p.lead{ color:rgba(255,255,255,.86); font-size:1.12rem; max-width:56ch; margin-bottom:30px; } .hero-ctas{ display:flex; flex-wrap:wrap; gap:14px; margin-bottom:14px; } /* ---------- Esfera 3D de minério (rotação em canvas) + badge HTECH estático ---------- */ .hero-art{ position:relative; perspective:900px; } .ore-sphere{ position:relative; width:100%; max-width:380px; margin:0 auto; aspect-ratio:1/1; border-radius:50%; background: radial-gradient(circle at 38% 30%, #b9cbe8 0%, #7f9cc6 16%, #4d6ea0 34%, #2c4876 52%, #1a2f5c 70%, #0d1c40 88%, #060f28 100%); box-shadow: inset -22px -26px 60px rgba(0,0,0,.6), inset 14px 14px 34px rgba(200,220,255,.16), 0 35px 80px rgba(4,9,24,.5); overflow:hidden; animation:sphere-float 7s ease-in-out infinite; } /* canvas: crateras/poros do minério, girando no eixo vertical (JS: main.js) */ .ore-sphere canvas{ position:absolute; inset:0; width:100%; height:100%; border-radius:50%; z-index:1; } /* iluminação direcional diagonal fixa, por cima da textura girando */ .ore-sphere::before{ content:""; position:absolute; inset:0; border-radius:50%; pointer-events:none; z-index:2; background:radial-gradient(circle at 26% 20%, rgba(255,255,255,.85), rgba(255,255,255,0) 20%); mix-blend-mode:soft-light; } .ore-sphere::after{ content:""; position:absolute; inset:0; border-radius:50%; pointer-events:none; z-index:2; background:linear-gradient(135deg, rgba(255,255,255,.22) 0%, rgba(255,255,255,0) 30%, rgba(0,0,0,0) 60%, rgba(0,0,0,.45) 100%); } @keyframes sphere-float{ 0%,100%{ transform:translateY(0);} 50%{ transform:translateY(-10px);} } /* badge HTECH: estático, sobreposto à esfera, com relevo 3D próprio */ .ore-badge{ position:absolute; left:50%; top:50%; transform:translate(-50%,-50%); width:52%; z-index:3; filter:drop-shadow(0 10px 22px rgba(4,9,24,.55)); } .ore-badge img{ width:100%; height:auto; display:block; } .hero-stats{ display:flex; gap:28px; margin-top:8px; flex-wrap:wrap; } .hero-stats div{ font-family:var(--font-display); } .hero-stats b{ display:block; font-size:1.75rem; color:var(--orange); font-weight:800; } .hero-stats span{ font-size:1rem; color:rgba(255,255,255,.8); } .hero-stats{ display:flex; gap:28px; margin-top:8px; flex-wrap:wrap; } .hero-stats div{ font-family:var(--font-display); } .hero-stats b{ display:block; font-size:1.75rem; color:var(--orange); font-weight:800; } .hero-stats span{ font-size:1rem; color:rgba(255,255,255,.8); } /* ---------- Cards genéricos ---------- */ .grid{ display:grid; gap:22px; } .grid-3{ grid-template-columns:1fr; } .grid-4{ grid-template-columns:1fr; } @media (min-width:640px){ .grid-3{ grid-template-columns:repeat(3,1fr);} .grid-4{ grid-template-columns:repeat(2,1fr);} } @media (min-width:960px){ .grid-4{ grid-template-columns:repeat(4,1fr);} } .card{ background:var(--white); border:1px solid var(--gray-200); border-radius:var(--radius-md); padding:26px; box-shadow:var(--shadow-sm); transition:box-shadow .2s ease, transform .2s ease, background-color .2s ease, border-color .2s ease; display:flex; flex-direction:column; gap:10px; height:100%; } .card:hover{ box-shadow:var(--shadow-md); transform:translateY(-3px); border-color:#F3C9A8; background:#FFF7EE; } .card:hover .icon{ background:var(--orange); color:var(--navy-900); } .card .icon{ width:48px; height:48px; border-radius:12px; background:var(--blue-100); color:var(--blue); display:flex; align-items:center; justify-content:center; flex:none; } .card .icon svg{ width:26px; height:26px; } .card h3{ margin:6px 0 2px; font-size:1.2rem; } .card p{ color:var(--gray-700); font-size:1.15rem; line-height:1.5; margin:0; } .card .card-link{ margin-top:auto; font-family:var(--font-display); font-weight:700; font-size:1.05rem; color:var(--blue); } /* .card-alert: o destaque laranja agora é só no :hover (ver .card:hover acima) — sem estado fixo que parecia "selecionado" (pedido do Max, QA Fase 7). A classe segue no HTML por compatibilidade, mas não pinta mais o card parado. */ /* categorias de produto — cards compactos */ .cat-card{ background:var(--white); border:1px solid var(--gray-200); border-radius:var(--radius-md); padding:18px; display:flex; flex-direction:column; gap:6px; transition:.2s; } .cat-card:hover{ border-color:var(--blue); box-shadow:var(--shadow-sm); transform:translateY(-2px); } .cat-card b{ font-family:var(--font-display); color:var(--navy); font-size:1.15rem; } .cat-card span{ font-size:1.05rem; color:var(--gray-700); line-height:1.45; } /* ---------- Faixa de marcas ---------- */ .brand-strip{ display:grid; grid-template-columns:repeat(2,1fr); gap:16px; align-items:center; } @media (min-width:640px){ .brand-strip{ grid-template-columns:repeat(3,1fr); } } @media (min-width:960px){ .brand-strip{ grid-template-columns:repeat(5,1fr); gap:18px; } } .brand-tile{ height:162px; background:var(--white); border:1px solid var(--gray-200); border-radius:var(--radius-sm); display:flex; align-items:center; justify-content:center; padding:16px 20px; transition:box-shadow .25s ease, border-color .25s ease, transform .25s ease; } .brand-tile:hover{ box-shadow:var(--shadow-md); border-color:var(--gray-300); transform:translateY(-3px); } .brand-tile img{ max-width:100%; max-height:100%; object-fit:contain; } .brand-tile.is-text{ font-family:var(--font-display); font-weight:700; color:var(--gray-700); font-size:1.05rem; text-align:center; filter:none; } .brand-tile.is-text:hover{ color:var(--navy); } /* ---------- Prova social ---------- */ .stats-row{ display:grid; gap:22px; grid-template-columns:1fr; text-align:center; } @media (min-width:768px){ .stats-row{ grid-template-columns:repeat(3,1fr);} } .stat{ background:var(--white); border:1px solid var(--gray-200); border-radius:var(--radius-md); padding:30px 20px; box-shadow:var(--shadow-sm); } .stat b{ display:block; font-family:var(--font-display); font-size:1.9rem; color:var(--navy); font-weight:800; } .stat span{ color:var(--gray-700); font-size:1.15rem; line-height:1.5; } /* ---------- Blog ---------- */ .blog-card{ background:var(--white); border:1px solid var(--gray-200); border-radius:var(--radius-md); overflow:hidden; box-shadow:var(--shadow-sm); transition:.2s; height:100%; display:flex; flex-direction:column; } .blog-card:hover{ box-shadow:var(--shadow-md); transform:translateY(-3px); } .blog-thumb{ height:120px; background:linear-gradient(135deg, var(--navy) 0%, var(--blue) 100%); position:relative; } .blog-thumb svg{ position:absolute; right:14px; bottom:-10px; width:64px; height:64px; opacity:.22; color:var(--white); } .blog-card .blog-body{ padding:20px 22px 24px; display:flex; flex-direction:column; gap:8px; flex:1; } .blog-card h3{ font-size:1.15rem; } .blog-card .card-link{ margin-top:auto; font-family:var(--font-display); font-weight:700; font-size:1.05rem; color:var(--blue); } /* card de serviço com foto real (ex.: montagem de painéis) */ .service-photo{ height:170px; border-radius:var(--radius-md) var(--radius-md) 0 0; position:relative; overflow:hidden; margin:-26px -26px 16px; background: repeating-linear-gradient(45deg, var(--gray-100), var(--gray-100) 12px, var(--gray-200) 12px, var(--gray-200) 24px); display:flex; align-items:center; justify-content:center; color:var(--gray-500); } .service-photo img{ width:100%; height:100%; object-fit:cover; } .service-photo .photo-pending{ display:flex; flex-direction:column; align-items:center; gap:6px; font-size:.82rem; text-align:center; padding:0 16px; } .service-photo .photo-pending svg{ width:30px; height:30px; opacity:.55; } /* ---------- CTA final ---------- */ .cta-final{ background:linear-gradient(120deg, var(--navy-900), var(--navy) 60%, var(--navy-700)); color:var(--white); border-radius:var(--radius-lg); padding:56px 32px; text-align:center; } .cta-final h2{ color:var(--white); } .cta-final p{ color:rgba(255,255,255,.85); max-width:56ch; margin:0 auto 26px; font-size:1.2rem; line-height:1.55; } .cta-final .btn-group{ display:flex; flex-wrap:wrap; gap:14px; justify-content:center; } .cta-final .alt-contact{ margin-top:22px; font-size:1.05rem; color:rgba(255,255,255,.7); } /* ---------- Footer ---------- */ .site-footer{ background:var(--navy-900); color:rgba(255,255,255,.8); padding:56px 0 22px; } .footer-grid{ display:grid; gap:32px; grid-template-columns:1fr; margin-bottom:36px; } @media (min-width:768px){ .footer-grid{ grid-template-columns:1.4fr 1fr 1fr 1fr 1.2fr; } } .footer-grid h4{ font-family:var(--font-display); color:var(--white); font-size:.95rem; text-transform:uppercase; letter-spacing:.06em; margin-bottom:14px; } .footer-grid li{ margin-bottom:8px; font-size:1.08rem; } .footer-grid a:hover{ color:var(--orange); } .footer-brand img{ height:34px; margin-bottom:14px; } .footer-brand p{ font-size:1.03rem; line-height:1.5; color:rgba(255,255,255,.6); max-width:32ch; } .footer-bottom{ border-top:1px solid rgba(255,255,255,.12); padding-top:20px; display:flex; flex-wrap:wrap; gap:12px; justify-content:space-between; font-size:.92rem; color:rgba(255,255,255,.55); } .footer-bottom a:hover{ color:var(--orange); } .social-row{ display:flex; gap:12px; margin-top:14px; } .social-row a{ width:36px; height:36px; border-radius:50%; border:1px solid rgba(255,255,255,.25); display:flex; align-items:center; justify-content:center; } .social-row a:hover{ background:var(--orange); border-color:var(--orange); color:var(--navy-900); } .social-row svg{ width:17px; height:17px; } /* ---------- WhatsApp flutuante ---------- */ .wa-float{ position:fixed; right:20px; bottom:20px; z-index:300; width:60px; height:60px; border-radius:50%; background:var(--orange); color:var(--navy-900); display:flex; align-items:center; justify-content:center; box-shadow:0 10px 26px rgba(14,24,56,.35); transition:transform .2s ease; } .wa-float:hover{ transform:scale(1.08); } .wa-float svg{ width:28px; height:28px; } /* ---------- Breadcrumb / util ---------- */ .crumb{ font-size:.82rem; color:var(--gray-500); padding:18px 0 0; } .crumb a:hover{ color:var(--blue); } /* ---------- Utilitários de espaçamento ---------- */ .mt-0{ margin-top:0; } .text-center{ text-align:center; } /* ========================================================================== PÁGINA DE CATEGORIA DE PRODUTO (template — Fase 5b) Reutilizável pelas 12 categorias /produtos/*. Base: produtos-*.md ========================================================================== */ /* ---------- Breadcrumb dentro do subhero ---------- */ .breadcrumb{ font-family:var(--font-body); font-size:.9rem; margin-bottom:16px; } .breadcrumb ol{ display:flex; flex-wrap:wrap; gap:8px; align-items:center; color:rgba(255,255,255,.6); } .breadcrumb li{ display:flex; align-items:center; gap:8px; } .breadcrumb li:not(:last-child)::after{ content:"›"; color:rgba(255,255,255,.4); } .breadcrumb a{ color:rgba(255,255,255,.78); } .breadcrumb a:hover{ color:var(--orange); } .breadcrumb [aria-current]{ color:var(--white); font-weight:600; } /* ---------- Subhero de categoria (menor que o hero da home) ---------- */ .subhero{ background:linear-gradient(155deg, var(--navy-900) 0%, var(--navy) 60%, var(--navy-700) 100%); color:var(--white); position:relative; overflow:hidden; padding:40px 0 66px; } .subhero::before{ content:""; position:absolute; inset:0; opacity:.5; pointer-events:none; background-image: radial-gradient(circle at 88% 18%, rgba(245,164,0,.24), transparent 44%), radial-gradient(circle at 4% 96%, rgba(40,121,196,.32), transparent 46%); } .subhero-grid{ position:relative; display:grid; gap:36px; align-items:center; } @media (min-width:900px){ .subhero-grid{ grid-template-columns:1.25fr .75fr; } } .subhero .eyebrow{ color:var(--orange); } .subhero h1{ color:var(--white); margin-bottom:16px; } .subhero p.lead{ color:rgba(255,255,255,.88); font-size:1.15rem; max-width:60ch; margin-bottom:26px; } .subhero-ctas{ display:flex; flex-wrap:wrap; gap:14px; } /* arte do subhero: cartão de vidro com ícone da categoria */ .subhero-art{ display:none; } @media (min-width:900px){ .subhero-art{ display:flex; align-items:center; justify-content:center; aspect-ratio:1/1; max-width:320px; margin-left:auto; border-radius:var(--radius-lg); background:rgba(255,255,255,.05); border:1px solid rgba(255,255,255,.14); box-shadow:inset 0 1px 0 rgba(255,255,255,.12), 0 30px 60px rgba(4,9,24,.4); backdrop-filter:blur(4px); } } .subhero-art svg{ width:52%; height:52%; color:var(--orange); opacity:.92; } /* ---------- Fase 5k — subhero-art clicável (link externo, sem embed) Uso: ilustração de vídeo de terceiro sem marca formal com a HTECH (ex.: rede de ar comprimido/redes-ar-comprimido). Não incorpora player/script de 3º — só abre o vídeo original em nova aba (mais simples e mais LGPD-safe que embutir SDK de terceiro só para uma ilustração sem vínculo de marca). ---------- */ .subhero-art.is-link{ cursor:pointer; text-decoration:none; position:relative; transition:transform .2s ease, box-shadow .2s ease; } .subhero-art.is-link:hover{ transform:translateY(-3px); box-shadow:inset 0 1px 0 rgba(255,255,255,.12), 0 38px 72px rgba(4,9,24,.5); } .subhero-art.is-link:focus-visible{ outline:3px solid var(--orange); outline-offset:3px; } .subhero-art-play{ position:absolute; right:-8px; bottom:-8px; width:44px; height:44px; border-radius:50%; background:var(--orange); color:var(--navy-900); display:flex; align-items:center; justify-content:center; box-shadow:0 10px 22px rgba(0,0,0,.4); transition:transform .2s ease, background-color .2s ease; } .subhero-art.is-link:hover .subhero-art-play{ transform:scale(1.08); background:var(--orange-600); } .subhero-art-play svg{ width:18px; height:18px; margin-left:2px; } /* ---------- Nav âncora (sticky) para páginas longas ---------- */ .anchor-nav{ position:sticky; top:92px; z-index:100; background:var(--white); border-bottom:1px solid var(--gray-200); box-shadow:var(--shadow-sm); } .anchor-nav ul{ display:flex; gap:6px; overflow-x:auto; padding:4px 0; scrollbar-width:none; } .anchor-nav ul::-webkit-scrollbar{ display:none; } .anchor-nav a{ display:inline-block; white-space:nowrap; font-family:var(--font-display); font-weight:600; font-size:.9rem; color:var(--gray-700); padding:14px 16px; border-bottom:3px solid transparent; } .anchor-nav a:hover{ color:var(--navy); } .anchor-nav a.is-active{ color:var(--navy); border-bottom-color:var(--orange); } /* ---------- Bloco de prosa (o que é / para que serve) ---------- */ .prose{ max-width:70ch; } .prose h2{ margin-bottom:.4em; } .prose p{ color:var(--gray-700); font-size:1.18rem; line-height:1.65; } .section-title{ max-width:760px; margin:0 0 32px; } .section-title .eyebrow{ margin-bottom:8px; } .section-title p{ color:var(--gray-700); font-size:1.2rem; line-height:1.55; margin:0; } /* ---------- Grid de linhas/itens da categoria ---------- */ .line-grid{ display:grid; gap:20px; grid-template-columns:1fr; } @media (min-width:640px){ .line-grid{ grid-template-columns:repeat(2,1fr); } } @media (min-width:980px){ .line-grid{ grid-template-columns:repeat(3,1fr); } } .line-card{ background:var(--white); border:1px solid var(--gray-200); border-radius:var(--radius-md); padding:26px 24px; box-shadow:var(--shadow-sm); display:flex; flex-direction:column; gap:10px; transition:box-shadow .2s ease, transform .2s ease, border-color .2s ease; } .line-card:hover{ box-shadow:var(--shadow-md); transform:translateY(-3px); border-color:var(--gray-300); } .line-card .icon{ width:52px; height:52px; border-radius:14px; background:var(--blue-100); color:var(--blue); display:flex; align-items:center; justify-content:center; flex:none; margin-bottom:4px; } .line-card .icon svg{ width:28px; height:28px; } .line-card h3{ font-size:1.2rem; color:var(--navy); margin:0; } .line-card p{ color:var(--gray-700); font-size:1.08rem; line-height:1.5; margin:0; } .line-card .card-link{ margin-top:auto; font-family:var(--font-display); font-weight:700; font-size:1rem; color:var(--blue); } /* ---------- Callout de marca (destaque horizontal) ---------- */ .brand-callout{ display:grid; gap:26px; align-items:center; grid-template-columns:1fr; background:var(--bg-alt); border:1px solid var(--gray-200); border-radius:var(--radius-lg); padding:34px 30px; } @media (min-width:760px){ .brand-callout{ grid-template-columns:300px 1fr; } } .brand-callout .brand-logo{ height:172px; background:var(--white); border:1px solid var(--gray-200); border-radius:var(--radius-md); display:flex; align-items:center; justify-content:center; padding:20px 26px; } .brand-callout .brand-logo img{ max-width:100%; max-height:100%; object-fit:contain; } .brand-callout h2{ margin-bottom:.35em; } .brand-callout p{ color:var(--gray-700); font-size:1.15rem; line-height:1.55; margin:0 0 14px; } /* ---------- Callout de reparo (faixa laranja suave) ---------- */ .repair-callout{ display:flex; flex-wrap:wrap; gap:20px 30px; align-items:center; justify-content:space-between; background:#FFF7EE; border:1px solid #F3C9A8; border-radius:var(--radius-lg); padding:30px 32px; } .repair-callout .rc-text{ flex:1 1 340px; } .repair-callout h2{ font-size:1.5rem; margin-bottom:.3em; } .repair-callout p{ color:var(--gray-700); font-size:1.12rem; line-height:1.5; margin:0; } .repair-callout .rc-icon{ width:56px; height:56px; border-radius:14px; background:var(--orange); color:var(--navy-900); display:flex; align-items:center; justify-content:center; flex:none; } .repair-callout .rc-icon svg{ width:30px; height:30px; } /* ---------- FAQ acordeão (schema FAQPage) ---------- */ .faq-list{ max-width:820px; margin:0 auto; display:flex; flex-direction:column; gap:12px; } .faq-item{ background:var(--white); border:1px solid var(--gray-200); border-radius:var(--radius-md); box-shadow:var(--shadow-sm); overflow:hidden; } .faq-item summary{ list-style:none; cursor:pointer; padding:20px 24px; font-family:var(--font-display); font-weight:700; font-size:1.12rem; color:var(--navy); display:flex; justify-content:space-between; align-items:center; gap:16px; } .faq-item summary::-webkit-details-marker{ display:none; } .faq-item summary::after{ content:""; flex:none; width:14px; height:14px; border-right:2.5px solid var(--blue); border-bottom:2.5px solid var(--blue); transform:rotate(45deg); transition:transform .2s ease; margin-top:-4px; } .faq-item[open] summary::after{ transform:rotate(-135deg); margin-top:4px; } .faq-item .faq-body{ padding:0 24px 22px; color:var(--gray-700); font-size:1.1rem; line-height:1.6; } .faq-item .faq-body a{ color:var(--blue); font-weight:600; } /* ---------- Faixa de interlinks (relacionados) ---------- */ .related-links{ display:grid; gap:18px; grid-template-columns:1fr; } @media (min-width:760px){ .related-links{ grid-template-columns:repeat(3,1fr); } } .related-col h4{ font-family:var(--font-display); color:var(--navy); font-size:1rem; text-transform:uppercase; letter-spacing:.05em; margin-bottom:12px; } .related-col li{ margin-bottom:8px; } .related-col a{ color:var(--gray-700); font-size:1.05rem; } .related-col a:hover{ color:var(--blue); } /* ========================================================================== VÍDEO DA MARCA (facade LGPD) + GALERIA + LOCKUP DE REPRESENTANTE — Fase 5b Facade: nada é carregado do YouTube antes do clique do visitante. ========================================================================== */ /* ---------- Lockup "Representante oficial" (subhero, sobre navy) ---------- */ .rep-badge{ display:flex; align-items:center; justify-content:space-between; gap:20px; margin-bottom:22px; width:100%; max-width:685px; background:rgba(255,255,255,.07); border:1px solid rgba(255,255,255,.16); border-radius:999px; padding:14px 34px 14px 30px; } .rep-badge .rep-label{ font-family:var(--font-display); font-weight:700; font-size:1rem; letter-spacing:.08em; text-transform:uppercase; color:rgba(255,255,255,.78); } .rep-badge img{ height:42px; width:auto; } /* variante compacta (logos quadrados) — não estica até o texto */ .rep-badge.is-compact{ width:auto; max-width:none; justify-content:flex-start; gap:18px; padding:12px 26px 12px 24px; } .rep-badge.is-compact img{ height:46px; } /* variante clara — bandeira branca, letras azuis, logo colorido (ex.: AVLIGHT) */ .rep-badge.is-light{ background:var(--white); border:1px solid rgba(255,255,255,.35); justify-content:flex-start; align-items:center; gap:26px; padding:16px 38px 16px 34px; box-shadow:0 8px 22px rgba(4,9,24,.28); } .rep-badge.is-light .rep-label{ color:var(--navy); font-size:.92rem; letter-spacing:.1em; flex:none; } .rep-badge.is-light .rep-lock{ display:inline-flex; align-items:center; gap:18px; margin-left:auto; flex:none; } .rep-badge.is-light .rep-desc{ font-family:var(--font-display); font-weight:800; font-size:1.45rem; color:var(--blue); line-height:1; white-space:nowrap; } .rep-badge.is-light img{ height:62px; width:auto; } /* variante wordmark (logo largo, ex.: Aselco): rótulo à esquerda, logo à direita, tudo numa linha só dentro da pílula (max-width da coluna, sem estourar) */ .rep-badge.is-light.is-wordmark{ width:fit-content; max-width:100%; justify-content:flex-start; gap:24px; padding:14px 30px; } .rep-badge.is-light.is-wordmark .rep-label{ flex:none; } .rep-badge.is-light.is-wordmark img{ height:42px; } @media (max-width:640px){ .rep-badge.is-light.is-wordmark{ flex-direction:row; align-items:center; padding:12px 20px; gap:14px; max-width:100%; } .rep-badge.is-light.is-wordmark .rep-label{ font-size:.8rem; } .rep-badge.is-light.is-wordmark img{ height:34px; } } @media (max-width:640px){ .rep-badge.is-light{ padding:16px 22px; gap:12px; } .rep-badge.is-light .rep-lock{ margin-left:0; gap:12px; } .rep-badge.is-light .rep-desc{ font-size:1.15rem; white-space:normal; } .rep-badge.is-light img{ height:44px; } } /* variante "revendedor" com duas marcas na mesma pílula (ex.: redes-ar-comprimido: AIGNEP alumínio + KPT PPR) — rótulo único à esquerda, dois logos à direita separados por um traço fino. Fase 5k. */ .rep-badge.is-light.is-dual .rep-logos{ display:flex; align-items:center; gap:18px; flex:none; } .rep-badge.is-light.is-dual .rep-logos img{ height:34px; width:auto; } .rep-badge.is-light.is-dual .rep-divider{ width:1px; height:30px; background:var(--gray-300); } @media (max-width:640px){ .rep-badge.is-light.is-dual{ flex-direction:row; flex-wrap:wrap; } .rep-badge.is-light.is-dual .rep-logos img{ height:26px; } .rep-badge.is-light.is-dual .rep-divider{ height:22px; } } @media (max-width:640px){ .rep-badge{ flex-direction:column; align-items:flex-start; justify-content:center; gap:12px; width:auto; max-width:100%; border-radius:22px; padding:16px 24px; } .rep-badge .rep-label{ font-size:.82rem; } .rep-badge img{ height:34px; } } /* ---------- Facade de vídeo (área destacada do subhero) ---------- */ .video-facade{ position:relative; width:100%; max-width:540px; margin-left:auto; aspect-ratio:16/10; border-radius:var(--radius-lg); overflow:hidden; cursor:pointer; background:linear-gradient(150deg, var(--navy-900) 0%, var(--navy) 70%, var(--navy-700) 100%); border:1px solid rgba(255,255,255,.16); box-shadow:inset 0 1px 0 rgba(255,255,255,.12), 0 30px 60px rgba(4,9,24,.45); transition:transform .2s ease, box-shadow .2s ease; } @media (max-width:899px){ .video-facade{ margin:0 auto; } } .video-facade:hover{ transform:translateY(-3px); box-shadow:0 38px 72px rgba(4,9,24,.55); } .video-facade:focus-visible{ outline:3px solid var(--orange); outline-offset:3px; } .video-facade .vf-cover{ position:absolute; right:4%; top:50%; transform:translateY(-50%); width:66%; height:auto; max-height:82%; object-fit:contain; z-index:1; filter:drop-shadow(0 16px 30px rgba(0,0,0,.5)); } /* capa full-bleed (páginas sem foto de produto: capa própria já composta) */ .video-facade .vf-cover.vf-cover--full{ inset:0; right:auto; top:auto; transform:none; width:100%; height:100%; max-height:none; object-fit:cover; filter:none; } .video-facade::before{ /* halo suave atrás do produto */ content:""; position:absolute; inset:0; z-index:0; pointer-events:none; background:radial-gradient(circle at 72% 45%, rgba(40,121,196,.35), transparent 55%); } .video-facade::after{ /* gradiente p/ legibilidade do texto à esquerda */ content:""; position:absolute; inset:0; z-index:2; pointer-events:none; background:linear-gradient(90deg, rgba(9,16,40,.72) 0%, rgba(9,16,40,.30) 45%, rgba(9,16,40,0) 70%); } .video-facade .vf-play{ position:absolute; left:50%; top:50%; transform:translate(-50%,-50%); z-index:3; width:74px; height:74px; border-radius:50%; background:var(--orange); color:var(--navy-900); display:flex; align-items:center; justify-content:center; box-shadow:0 12px 30px rgba(0,0,0,.4); transition:transform .2s ease, background-color .2s ease; } .video-facade:hover .vf-play{ transform:translate(-50%,-50%) scale(1.08); background:var(--orange-600); } .video-facade .vf-play svg{ width:30px; height:30px; margin-left:4px; } .video-facade .vf-label{ position:absolute; left:22px; bottom:18px; right:22px; z-index:3; text-align:left; } .video-facade .vf-label b{ display:block; font-family:var(--font-display); font-weight:700; font-size:1.02rem; color:var(--white); line-height:1.25; } .video-facade .vf-label small{ display:block; margin-top:4px; font-size:.78rem; color:rgba(255,255,255,.7); } /* iframe injetado no clique preenche o container */ .video-facade.is-playing{ cursor:default; } .video-facade.is-playing .vf-cover, .video-facade.is-playing .vf-play, .video-facade.is-playing .vf-label, .video-facade.is-playing::before, .video-facade.is-playing::after{ display:none; } .video-facade iframe{ position:absolute; inset:0; width:100%; height:100%; border:0; z-index:4; } /* nota de privacidade abaixo do vídeo */ .video-note{ margin-top:12px; font-size:.82rem; color:rgba(255,255,255,.6); text-align:center; } @media (min-width:900px){ .video-note{ text-align:right; max-width:540px; margin-left:auto; } } /* ---------- Galeria da linha da marca ---------- */ .km-gallery{ display:grid; gap:18px; grid-template-columns:repeat(2,1fr); } @media (min-width:640px){ .km-gallery{ grid-template-columns:repeat(3,1fr); } } @media (min-width:1000px){ .km-gallery{ grid-template-columns:repeat(5,1fr); } } .km-shot{ margin:0; background:var(--white); border:1px solid var(--gray-200); border-radius:var(--radius-md); overflow:hidden; box-shadow:var(--shadow-sm); transition:box-shadow .2s ease, transform .2s ease; } .km-shot:hover{ box-shadow:var(--shadow-md); transform:translateY(-3px); } .km-shot .ph{ aspect-ratio:4/3; display:flex; align-items:center; justify-content:center; padding:6px; background:linear-gradient(160deg, var(--white), var(--bg-alt)); overflow:hidden; } .km-shot .ph img{ max-width:100%; max-height:100%; object-fit:contain; transform:scale(1.22); transition:transform .3s ease; } .km-shot:hover .ph img{ transform:scale(1.34); } .km-shot figcaption{ padding:14px 16px 16px; font-family:var(--font-display); font-weight:700; font-size:1rem; color:var(--navy); border-top:1px solid var(--gray-100); } .km-shot figcaption span{ display:block; font-family:var(--font-body); font-weight:400; font-size:.9rem; color:var(--gray-500); margin-top:2px; } /* galeria de 6 produtos em 3 colunas (ex.: AVLIGHT) */ .km-gallery.is-3col{ grid-template-columns:repeat(2,1fr); } @media (min-width:760px){ .km-gallery.is-3col{ grid-template-columns:repeat(3,1fr); } } /* fotos normalizadas em tela 4:3 com respiro embutido: sem zoom, padding mínimo */ .km-gallery.is-3col .ph{ padding:10px; } .km-gallery.is-3col .ph img{ transform:none; width:100%; height:100%; object-fit:contain; } .km-gallery.is-3col .km-shot:hover .ph img{ transform:scale(1.04); } /* variante 4 colunas (2 no mobile) — usada na pneumática (8 famílias, espelha o site do parceiro) */ .km-gallery.is-4col{ grid-template-columns:repeat(2,1fr); } @media (min-width:680px){ .km-gallery.is-4col{ grid-template-columns:repeat(4,1fr); } } .km-gallery.is-4col .ph{ padding:10px; } .km-gallery.is-4col .ph img{ transform:none; width:100%; height:100%; object-fit:contain; } .km-gallery.is-4col .km-shot:hover .ph img{ transform:scale(1.04); } /* ============================================================ PÁGINA DE CATEGORIA — INSTRUMENTAÇÃO (Aselco) — Fase 5f ============================================================ */ /* painel de vidro do subhero: ilustração de medição de processo (substitui o vídeo-facade — não há vídeo/foto oficial Aselco) */ .proc-panel{ position:relative; border-radius:var(--radius-lg); margin-left:auto; max-width:440px; background:rgba(255,255,255,.05); border:1px solid rgba(255,255,255,.14); box-shadow:inset 0 1px 0 rgba(255,255,255,.12), 0 30px 60px rgba(4,9,24,.4); backdrop-filter:blur(4px); padding:24px 24px 18px; } .proc-panel svg{ width:100%; height:auto; display:block; } .proc-panel figcaption{ margin-top:14px; font-family:var(--font-body); font-size:.9rem; color:rgba(255,255,255,.68); text-align:center; line-height:1.4; } @media (max-width:899px){ .proc-panel{ max-width:480px; margin:8px auto 0; } } /* animações discretas da ilustração */ @keyframes proc-level{ 0%,100%{ transform:translateY(0); } 50%{ transform:translateY(-6px); } } @keyframes proc-needle{ 0%,100%{ transform:rotate(-32deg); } 50%{ transform:rotate(34deg); } } @keyframes proc-pulse{ 0%,100%{ opacity:.35; } 50%{ opacity:1; } } .proc-panel .lvl-fill{ animation:proc-level 5s ease-in-out infinite; } .proc-panel .gauge-needle{ animation:proc-needle 6s ease-in-out infinite; transform-box:view-box; transform-origin:286px 150px; } .proc-panel .sig-dot{ animation:proc-pulse 2.4s ease-in-out infinite; } .proc-panel .sig-dot.d2{ animation-delay:.6s; } .proc-panel .sig-dot.d3{ animation-delay:1.2s; } @media (prefers-reduced-motion:reduce){ .proc-panel .lvl-fill,.proc-panel .gauge-needle,.proc-panel .sig-dot{ animation:none; } } /* setores atendidos — chips */ .sector-chips{ display:flex; flex-wrap:wrap; gap:12px; } .sector-chips .chip{ display:inline-flex; align-items:center; gap:9px; background:var(--white); border:1px solid var(--gray-200); border-radius:999px; padding:11px 18px; font-family:var(--font-display); font-weight:600; color:var(--navy); font-size:1.02rem; box-shadow:var(--shadow-sm); } .sector-chips .chip svg{ width:20px; height:20px; color:var(--blue); flex:0 0 auto; } /* --- Fase 5f: fotos reais dos produtos nos cards de Medição de Nível --- */ #medicao-nivel .line-card{ overflow:hidden; } #medicao-nivel .line-card .lvl-media{ margin:-26px -24px 8px; height:190px; display:flex; align-items:center; justify-content:center; background:linear-gradient(160deg,#eef4fb 0%, #d9e6f5 100%); border-bottom:1px solid var(--gray-200); } #medicao-nivel .lvl-media img{ max-width:74%; max-height:160px; width:auto; object-fit:contain; mix-blend-mode:multiply; } #medicao-nivel .lvl-media.is-icon{ color:var(--blue); } #medicao-nivel .lvl-media.is-icon svg{ width:66px; height:66px; } #medicao-nivel .lvl-media .fallback-ic{ display:none; width:66px; height:66px; color:var(--blue); } #medicao-nivel .lvl-media.img-failed img{ display:none; } #medicao-nivel .lvl-media.img-failed .fallback-ic{ display:block; } #medicao-nivel .group-label{ margin:36px 0 16px; } #medicao-nivel .group-label:first-of-type{ margin-top:6px; } #medicao-nivel .group-label .eyebrow{ margin:0; } /* ============================================================ Fase 5h+ (27/07/2026) — subhero com vídeo AMPLIADO (~2x) Aplicado só onde há vídeo (classe .has-video no .subhero-grid), para não desbalancear as páginas de ilustração SVG (instrumentacao). ============================================================ */ @media (min-width:900px){ .subhero-grid.has-video{ grid-template-columns:1fr 1.12fr; gap:48px; } .subhero-grid.has-video .video-facade{ max-width:820px; } .subhero-grid.has-video .video-note{ max-width:none; text-align:right; } } /* rep-badge com logo real (.is-wordmark) dentro da coluna estreita do subhero com vídeo (.has-video): rótulo + logo não cabem lado a lado numa linha só nessa largura. Solução: pílula ocupa a largura da coluna (não fit-content), rótulo quebra em 2-3 linhas e ocupa o espaço flexível, logo fica à direita com tamanho fixo, os dois centralizados verticalmente (align-items:center). Combinação nova a partir da Fase 5j (HIWIN); não afeta is-wordmark noutras páginas (Aselco/Wireflex), que usam a coluna larga sem vídeo. */ .subhero-grid.has-video .rep-badge.is-light.is-wordmark{ flex-direction:row; align-items:center; justify-content:space-between; width:100%; max-width:100%; gap:20px; } .subhero-grid.has-video .rep-badge.is-light.is-wordmark .rep-label{ flex:1 1 auto; min-width:0; white-space:normal; } .subhero-grid.has-video .rep-badge.is-light.is-wordmark img{ flex:none; } /* mesmo ajuste para a variante "revendedor" de duas marcas (is-dual) — Fase 5k */ .subhero-grid.has-video .rep-badge.is-light.is-dual{ flex-direction:row; align-items:center; justify-content:space-between; width:100%; max-width:100%; gap:16px; } .subhero-grid.has-video .rep-badge.is-light.is-dual .rep-label{ flex:1 1 auto; min-width:0; white-space:normal; } .subhero-grid.has-video .rep-badge.is-light.is-dual .rep-logos{ flex:none; } /* rep-badge texto-only (.is-light, sem logo e sem duas marcas) na coluna estreita do subhero com vídeo: a pílula tinha max-width 685px e o nome com white-space:nowrap, então o nome da marca vazava para fora da pílula/coluna ("fora do enquadramento"). Correção: a pílula encolhe ao conteúdo, é limitada à largura da coluna, o par rótulo+nome pode quebrar linha e o nome volta a poder quebrar. Fase 7 (QA no ar). */ .subhero-grid.has-video .rep-badge.is-light:not(.is-wordmark):not(.is-dual){ width:fit-content; max-width:100%; gap:12px 18px; padding:14px 28px; flex-wrap:wrap; justify-content:flex-start; } .subhero-grid.has-video .rep-badge.is-light:not(.is-wordmark):not(.is-dual) .rep-lock{ margin-left:0; min-width:0; } .subhero-grid.has-video .rep-badge.is-light:not(.is-wordmark):not(.is-dual) .rep-desc{ white-space:normal; } /* legenda/play proporcionais ao player maior */ @media (min-width:1100px){ .subhero-grid.has-video .video-facade .vf-play{ width:88px; height:88px; } .subhero-grid.has-video .video-facade .vf-play svg{ width:36px; height:36px; } .subhero-grid.has-video .video-facade .vf-label{ left:26px; right:26px; bottom:22px; } .subhero-grid.has-video .video-facade .vf-label b{ font-size:1.14rem; } .subhero-grid.has-video .video-facade .vf-label small{ font-size:.84rem; } } /* ============================================================ Fase 5h+ — galeria de produtos Reitz (#linha-reitz) Padrão da galeria Balluff: .lvl-media ESCOPADA ao id da seção (ver GOTCHA 5g). Emoldura a foto; ícone só aparece se a foto falhar. ============================================================ */ /* banner oficial Reitz (lançamentos) — mostrado inteiro, full-width */ #linha-reitz .reitz-banner{ margin:0 0 30px; } #linha-reitz .reitz-banner img{ width:100%; height:auto; display:block; border-radius:var(--radius-lg); box-shadow:0 24px 50px rgba(4,9,24,.28); border:1px solid rgba(255,255,255,.08); } #linha-reitz .reitz-banner figcaption{ margin-top:12px; font-size:.86rem; color:var(--gray-600); text-align:center; } /* cards de destaque (só texto — a foto está no banner) */ #linha-reitz .line-card .lc-code{ display:inline-block; margin-bottom:8px; font-family:var(--font-display); font-weight:700; font-size:.72rem; letter-spacing:.04em; color:var(--blue); background:rgba(40,121,196,.10); border-radius:999px; padding:3px 11px; } /* ============================================================ Fase 5h+ — fotos de produto nos cards de família (#o-que-fornecemos) Fotos individuais Reitz (fundo branco) emolduradas; ícone só quando não há foto (.is-icon) ou se a foto falhar (.img-failed). .lvl-media ESCOPADA ao id (ver GOTCHA 5g). ============================================================ */ #o-que-fornecemos .line-card{ overflow:hidden; } #o-que-fornecemos .line-card .lvl-media{ margin:-26px -24px 14px; height:196px; display:flex; align-items:center; justify-content:center; background:linear-gradient(160deg,#eef4fb 0%, #d9e6f5 100%); border-bottom:1px solid var(--gray-200); } #o-que-fornecemos .lvl-media img{ max-width:84%; max-height:168px; width:auto; object-fit:contain; mix-blend-mode:multiply; } #o-que-fornecemos .lvl-media .fallback-ic{ display:none; width:60px; height:60px; color:var(--blue); } #o-que-fornecemos .lvl-media.is-icon .fallback-ic, #o-que-fornecemos .lvl-media.img-failed .fallback-ic{ display:block; } #o-que-fornecemos .lvl-media.img-failed img{ display:none; } /* ============================================================ Fase 5k — ilustrações dos cards de linha em redes-ar-comprimido (#linhas). Sem marca/fabricante — ilustrações próprias geradas (não fotos reais de produto), mesmo padrão visual .lvl-media das outras páginas (moldura com fundo gradiente, mix-blend multiply). .lvl-media ESCOPADA ao id (ver GOTCHA 5g). ============================================================ */ #linhas .line-card{ overflow:hidden; } #linhas .line-card .lvl-media{ margin:-26px -24px 14px; height:170px; display:flex; align-items:center; justify-content:center; background:linear-gradient(160deg,#eef4fb 0%, #d9e6f5 100%); border-bottom:1px solid var(--gray-200); } #linhas .lvl-media img{ max-width:88%; max-height:150px; width:auto; object-fit:contain; mix-blend-mode:multiply; } #linhas .lvl-media .fallback-ic{ display:none; width:56px; height:56px; color:var(--blue); } #linhas .lvl-media.img-failed .fallback-ic{ display:block; } #linhas .lvl-media.img-failed img{ display:none; } /* ============================================================ Fase 5l — eletrica-industrial (revenda Famatel + Giovenzana). Fotos hotlinkadas dos sites oficiais (28/07/2026) — ver GOTCHA 5g, .lvl-media ESCOPADA ao id de cada seção de marca. #famatel: fotos de produto isoladas em fundo branco/estúdio → mesmo tratamento contain + multiply das outras páginas. #giovenzana: imagens "cover" com fundo escuro/gráfico (não fundo branco isolado) → object-fit:cover sem multiply, senão o fundo escuro fica preto contra o gradiente claro do card. ============================================================ */ #famatel .line-card{ overflow:hidden; } #famatel .line-card .lvl-media{ margin:-26px -24px 14px; height:180px; display:flex; align-items:center; justify-content:center; background:linear-gradient(160deg,#eef4fb 0%, #d9e6f5 100%); border-bottom:1px solid var(--gray-200); } #famatel .lvl-media img{ max-width:82%; max-height:156px; width:auto; object-fit:contain; mix-blend-mode:multiply; } #famatel .lvl-media .fallback-ic{ display:none; width:58px; height:58px; color:var(--blue); } #famatel .lvl-media.img-failed .fallback-ic{ display:block; } #famatel .lvl-media.img-failed img{ display:none; } #giovenzana .line-card{ overflow:hidden; } #giovenzana .line-card .lvl-media{ margin:-26px -24px 14px; height:180px; display:flex; align-items:center; justify-content:center; background:var(--navy-900); border-bottom:1px solid var(--gray-200); } #giovenzana .lvl-media img{ width:100%; height:100%; object-fit:cover; } #giovenzana .lvl-media .fallback-ic{ display:none; width:58px; height:58px; color:var(--white); } #giovenzana .lvl-media.img-failed .fallback-ic{ display:block; } #giovenzana .lvl-media.img-failed img{ display:none; } /* ============================================================ Fase 5j — galeria de produtos HIWIN (#linha-hiwin) Fotos reais (Max, 27/07/2026) emolduradas, mesmo padrão Balluff/Reitz; ícone só quando a foto falhar (.img-failed). .lvl-media ESCOPADA ao id. ============================================================ */ #linha-hiwin .line-card{ overflow:hidden; } #linha-hiwin .line-card .lvl-media{ margin:-26px -24px 8px; height:196px; display:flex; align-items:center; justify-content:center; background:linear-gradient(160deg,#eef4fb 0%, #d9e6f5 100%); border-bottom:1px solid var(--gray-200); } #linha-hiwin .lvl-media img{ max-width:82%; max-height:168px; width:auto; object-fit:contain; mix-blend-mode:multiply; } #linha-hiwin .lvl-media .fallback-ic{ display:none; width:60px; height:60px; color:var(--blue); } #linha-hiwin .lvl-media.img-failed img{ display:none; } #linha-hiwin .lvl-media.img-failed .fallback-ic{ display:block; } /* ============================================================ Fase 5h+ — bloco de destaque "Solução para frigoríficos" (navy) Banda navy com texto + vídeo-facade (raspadeira). Não entra no zigue-zague claro (igual .cta-final), então não afeta a parity. ============================================================ */ .feature-band{ background:linear-gradient(150deg, var(--navy-900) 0%, var(--navy) 60%, var(--navy-700) 100%); color:var(--white); position:relative; overflow:hidden; } .feature-band::before{ content:""; position:absolute; inset:0; opacity:.5; pointer-events:none; background-image: radial-gradient(circle at 90% 15%, rgba(245,164,0,.20), transparent 44%), radial-gradient(circle at 6% 92%, rgba(40,121,196,.30), transparent 48%); } .feature-grid{ position:relative; display:grid; gap:44px; align-items:center; } @media (min-width:900px){ .feature-grid{ grid-template-columns:1fr 1.08fr; } } .feature-band .eyebrow{ color:var(--orange); } .feature-band h2{ color:var(--white); } .feature-band p{ color:rgba(255,255,255,.86); font-size:1.12rem; line-height:1.6; max-width:56ch; } .feature-band .feature-ctas{ display:flex; flex-wrap:wrap; gap:14px; margin-top:22px; } .feature-band .video-facade{ max-width:100%; margin-left:auto; } .feature-band .video-note{ margin-top:12px; font-size:.82rem; color:rgba(255,255,255,.6); text-align:right; } /* ============================================================ Fase 6 — Diagnóstico guiado (/diagnostico/) Peça central de conversão (ADR-001). Fluxo em `04_arquitetura/fluxo- diagnostico.md`, copy em `05_conteudo/paginas/diagnostico.md`. Subhero de 1 coluna (sem vídeo/arte) + card interativo abaixo. ============================================================ */ .subhero-grid.is-single{ grid-template-columns:1fr; max-width:760px; } .subhero .diag-microcopy{ color:rgba(255,255,255,.7); font-size:.92rem; margin:-10px 0 0; } .diag-section{ background:var(--bg-alt); } .diag-container{ display:flex; justify-content:center; } .diag-card{ background:var(--white); border-radius:var(--radius-lg); box-shadow:var(--shadow-lg); padding:40px 40px 44px; max-width:720px; width:100%; } @media (max-width:600px){ .diag-card{ padding:28px 20px 32px; } } .diag-top{ display:flex; align-items:center; justify-content:space-between; gap:16px; margin-bottom:18px; } .diag-back{ display:inline-flex; align-items:center; gap:6px; background:none; border:none; cursor:pointer; font-family:var(--font-display); font-weight:700; font-size:.9rem; color:var(--blue); padding:6px 0; } .diag-back:hover{ color:var(--navy); } .diag-back[hidden]{ display:none; } .diag-step-label{ font-family:var(--font-display); font-weight:700; font-size:.85rem; color:var(--gray-500); letter-spacing:.02em; } .diag-progress-track{ height:6px; border-radius:999px; background:var(--gray-200); overflow:hidden; margin-bottom:30px; } .diag-progress-track[hidden]{ display:none; } .diag-progress-fill{ display:block; height:100%; background:var(--orange); border-radius:999px; transition:width .35s ease; } .diag-screen h2{ font-size:1.5rem; margin:0 0 8px; } .diag-screen h2:focus{ outline:none; } /* foco programático a cada passo (leitor de tela); visual já muda de tela */ .diag-screen .diag-note{ color:var(--gray-700); font-size:1rem; line-height:1.5; margin:0 0 22px; } .diag-options{ display:grid; gap:14px; margin-bottom:6px; } .diag-option{ display:flex; align-items:center; gap:16px; text-align:left; width:100%; background:var(--bg-alt); border:2px solid var(--gray-200); border-radius:var(--radius-md); padding:18px 20px; cursor:pointer; font-family:var(--font-body); color:var(--ink); transition:border-color .15s ease, background .15s ease, transform .15s ease; } .diag-option:hover{ border-color:var(--blue); background:var(--blue-100); transform:translateY(-1px); } .diag-option:focus-visible{ outline:3px solid var(--orange); outline-offset:2px; } .diag-option.is-selected{ border-color:var(--orange); background:#FFF7E8; } .diag-option .diag-emoji{ font-size:1.6rem; line-height:1; flex:none; } .diag-option .diag-option-text{ flex:1 1 auto; min-width:0; } .diag-option .diag-option-text b{ display:block; font-family:var(--font-display); font-weight:700; font-size:1.05rem; color:var(--navy); } .diag-option .diag-option-text span{ display:block; color:var(--gray-700); font-size:.92rem; margin-top:2px; } .diag-option .diag-chevron{ flex:none; color:var(--gray-300); width:20px; height:20px; } .diag-option:hover .diag-chevron{ color:var(--blue); } .diag-option-note{ margin:-4px 0 14px; font-size:.85rem; color:var(--gray-500); padding-left:36px; } .diag-skip{ display:inline-block; margin-top:6px; font-family:var(--font-display); font-weight:700; font-size:.9rem; color:var(--gray-500); background:none; border:none; cursor:pointer; padding:0; } .diag-skip:hover{ color:var(--blue); } /* tela final */ .diag-final .diag-badge{ display:inline-flex; align-items:center; gap:8px; background:#FFF1D6; color:var(--orange-600); font-family:var(--font-display); font-weight:700; font-size:.85rem; padding:6px 14px; border-radius:999px; margin-bottom:14px; } .diag-final.is-urgent .diag-badge{ background:#FDE8E8; color:#C23B3B; } .diag-summary{ background:var(--bg-alt); border:1px solid var(--gray-200); border-radius:var(--radius-md); padding:18px 20px; margin:18px 0; color:var(--navy); font-size:1rem; line-height:1.6; } .diag-context-note{ font-size:.95rem; color:var(--gray-700); background:var(--blue-100); border-radius:var(--radius-md); padding:14px 18px; margin-bottom:22px; } .diag-final-cta{ display:flex; flex-direction:column; gap:10px; align-items:flex-start; } .diag-final-cta .btn{ width:100%; justify-content:center; } .diag-alt-row{ display:flex; flex-wrap:wrap; gap:10px 22px; align-items:center; margin-top:14px; font-size:.92rem; } .diag-alt-row a, .diag-alt-row button{ color:var(--blue); font-family:var(--font-display); font-weight:700; background:none; border:none; padding:0; cursor:pointer; font-size:.92rem; } .diag-alt-row a:hover, .diag-alt-row button:hover{ color:var(--navy); } .diag-lgpd{ margin-top:18px; font-size:.82rem; color:var(--gray-500); line-height:1.5; } .diag-lgpd a{ color:var(--gray-500); text-decoration:underline; } .diag-copy-feedback{ font-size:.85rem; color:var(--blue); margin-top:4px; min-height:1.2em; } /* animação leve de troca de tela */ .diag-screen{ animation:diagFadeIn .25s ease; } @keyframes diagFadeIn{ from{ opacity:0; transform:translateY(6px); } to{ opacity:1; transform:translateY(0); } } @media (prefers-reduced-motion: reduce){ .diag-screen{ animation:none; } } /* ============================================================ Fase 6b — Hub de Produtos/Serviços + páginas de Serviço Reutilizável pelas 7 páginas /servicos/* e pelos hubs /produtos/ e /servicos/. Base: produtos.md, servicos.md, servicos-*.md. ============================================================ */ /* lista de passos numerados ("Como trabalhamos" / "5 passos") */ .steps{ display:flex; flex-direction:column; gap:22px; max-width:760px; counter-reset:step; } .step{ display:flex; gap:20px; align-items:flex-start; } .step-num{ flex:none; width:42px; height:42px; border-radius:50%; background:var(--blue-100); color:var(--blue); font-family:var(--font-display); font-weight:800; font-size:1.05rem; display:flex; align-items:center; justify-content:center; } .steps.is-urgent .step-num{ background:var(--orange); color:var(--navy-900); } .step-body h3{ font-size:1.15rem; margin:0 0 4px; } .step-body p{ color:var(--gray-700); font-size:1.1rem; line-height:1.55; margin:0; } /* cards clicáveis de "o que fazemos/reparamos" (preenchem {equipamento} no WhatsApp) */ .tag-grid{ display:flex; flex-wrap:wrap; gap:12px; } .tag-chip{ display:inline-flex; align-items:center; gap:8px; background:var(--white); border:1.5px solid var(--gray-200); border-radius:999px; padding:12px 20px; font-family:var(--font-display); font-weight:600; font-size:1rem; color:var(--navy); transition:.2s; } .tag-chip:hover{ border-color:var(--orange); background:#FFF7EE; transform:translateY(-2px); } /* sinais de alerta (bloco "hora de chamar") */ .signal-list{ display:grid; gap:14px; grid-template-columns:1fr; max-width:820px; } @media (min-width:640px){ .signal-list{ grid-template-columns:repeat(2,1fr); } } .signal-item{ display:flex; gap:12px; align-items:flex-start; background:var(--white); border:1px solid var(--gray-200); border-radius:var(--radius-md); padding:16px 18px; box-shadow:var(--shadow-sm); } .signal-item svg{ flex:none; width:20px; height:20px; color:var(--orange); margin-top:2px; } .signal-item span{ color:var(--gray-700); font-size:1.05rem; line-height:1.45; } /* card de destaque do hub de serviços (reparo = maior urgência, 1º da grade) */ .hub-card-alert{ position:relative; } .hub-card-alert::before{ content:"Mais urgente"; position:absolute; top:-11px; left:22px; background:var(--orange); color:var(--navy-900); font-family:var(--font-display); font-weight:800; font-size:.72rem; letter-spacing:.03em; text-transform:uppercase; padding:4px 12px; border-radius:999px; box-shadow:var(--shadow-sm); } /* ============================================================ Fase 6c — Hub de Marcas (/marcas/) + páginas de marca Card do hub: logo real da marca + nome + resumo, reaproveitando a moldura do .cat-card já usado nos hubs de produtos/serviços. ============================================================ */ .cat-card .brand-logo-mini{ height:38px; width:auto; max-width:100%; object-fit:contain; align-self:flex-start; margin-bottom:4px; } @media (max-width:899px){ .feature-band .video-note{ text-align:center; } } /* ============================================================ Fase 6d — Blog (hub + artigos) + Sobre + Contato + Peritagem + Privacidade. Base: blog*.md, sobre.md, contato.md, peritagem.md, politica-de-privacidade.md. ============================================================ */ /* listas dentro de texto corrido (.prose) — o reset global remove list-style de