/* Theme Name: Bikows Engenharia Theme URI: https://bikows.com.br/ Author: Bikows Empreendimentos LTDA Description: Tema híbrido da Bikows Engenharia: templates renderizados no servidor (SEO/GEO) + edição por blocos via theme.json e patterns. HTML semântico renderizado no servidor, zero dependência externa, fontes locais, JSON-LD em PHP. Version: 5.4.0 Requires at least: 5.9 Requires PHP: 7.4 Text Domain: bikows */ /* Tokens — Manual de Marca v1.0 · DOC. BW-ID-001 */ :root{ --marinho:#0B1B33; --marinho-deep:#071224; --marinho-borda:#22334D; --azul:#1D4F8C; --vermelho:#C42B2B; --vermelho-hover:#A82323; --bordo:#8B2222; --apoio:#DCE6F2; --base:#F4F5F7; --branco:#fff; --texto:#4B5563; --texto-dark:#B8C2CE; --texto-dark-fraco:#8FA0B5; --borda:#D8DADE; --display:'Archivo',sans-serif; --body:'IBM Plex Sans',sans-serif; --mono:'IBM Plex Mono',monospace; --wrap:1280px; } @font-face{font-family:'Archivo';src:url('assets/fonts/archivo-var.woff2') format('woff2-variations');font-weight:700 900;font-display:swap} @font-face{font-family:'IBM Plex Sans';src:url('assets/fonts/ibmplexsans-var.woff2') format('woff2-variations');font-weight:400 600;font-display:swap} @font-face{font-family:'IBM Plex Mono';src:url('assets/fonts/ibmplexmono-600.woff2') format('woff2');font-weight:600;font-display:swap} *{box-sizing:border-box} body{margin:0;background:var(--base,#F4F5F7);color:var(--texto,#4B5563);font-family:var(--body,'IBM Plex Sans',sans-serif);font-size:17px;line-height:1.7;-webkit-font-smoothing:antialiased;overflow-x:hidden} h1,h2,h3,h4,h5{margin:0;font-family:var(--display,'Archivo',sans-serif);color:var(--marinho,#0B1B33);letter-spacing:-.6px;line-height:1.2} /* Código de norma não quebra no hífen. Nos títulos vindos do banco os dados já usam hífen inquebrável (U+2011); esta classe cobre título escrito no template. */ .nowrap{white-space:nowrap} h1{font-weight:900;font-size:clamp(34px,4.4vw,56px);letter-spacing:-1.2px;line-height:1.06} h2{font-weight:700;font-size:clamp(26px,3.2vw,38px);letter-spacing:-1px} h3{font-weight:800;font-size:20px} p,ul,ol,table{margin:0} ul.plain{list-style:none;padding:0} img{display:block;max-width:100%;height:auto} a{color:var(--azul,#1D4F8C);text-decoration:none} a:hover{color:var(--marinho,#0B1B33)} :focus-visible{outline:2px solid var(--vermelho,#C42B2B);outline-offset:3px} table{border-collapse:collapse;width:100%} .wrap{max-width:var(--wrap,1280px);margin:0 auto;padding:0 24px} .narrow{max-width:960px;margin:0 auto;padding:0 24px} .eyebrow{font-family:var(--mono,'IBM Plex Mono',monospace);font-size:12px;letter-spacing:2.5px;text-transform:uppercase;color:var(--texto,#4B5563);display:flex;align-items:center;gap:10px} /* Marcador quadrado bordô: OPT-IN, não global. No design ele aparece em 6 rótulos de 81 — aplicá-lo em todo eyebrow repete o grafismo em cada seção e duplica visualmente o título que vem logo abaixo. */ .eyebrow.com-marcador::before{content:"";width:8px;height:8px;background:var(--bordo,#8B2222);display:block;flex:0 0 auto} .on-dark .eyebrow,.dark .eyebrow{color:var(--texto-dark,#B8C2CE)} .stamp{font-family:var(--mono,'IBM Plex Mono',monospace);font-size:11px;letter-spacing:2px;text-transform:uppercase;border:1px solid var(--borda,#D8DADE);padding:5px 9px;display:inline-block} section{padding:80px 0} .dark{background:var(--marinho,#0B1B33);color:var(--texto-dark,#B8C2CE)} .dark h1,.dark h2,.dark h3,.dark strong{color:#fff} .surface{background:#fff} .support{background:var(--apoio,#DCE6F2)} .btn{display:inline-flex;align-items:center;gap:10px;font-family:var(--display,'Archivo',sans-serif);font-weight:700;font-size:16px;padding:16px 30px;min-height:48px;border:1.5px solid transparent;cursor:pointer} .btn-cta{background:var(--vermelho,#C42B2B);color:#fff} .btn-cta:hover{background:var(--vermelho-hover,#A82323);color:#fff} .btn-light{border-color:var(--borda,#D8DADE);color:var(--marinho,#0B1B33)} .btn-light:hover{border-color:var(--azul,#1D4F8C);color:var(--azul,#1D4F8C)} .btn-dark{border-color:#5A6B82;color:#fff} .btn-dark:hover{background:rgba(255,255,255,.08);color:#fff} .skip{position:absolute;left:-9999px;top:0;background:var(--marinho,#0B1B33);color:#fff;padding:12px 20px;z-index:200} .skip:focus{left:0} .topbar{background:var(--marinho-deep,#071224);color:var(--texto-dark-fraco,#8FA0B5);font-family:var(--mono,'IBM Plex Mono',monospace);font-size:11px;letter-spacing:.14em;text-transform:uppercase} .topbar .wrap{display:flex;justify-content:space-between;gap:16px;flex-wrap:wrap;padding:9px 24px} .topbar a{color:var(--texto-dark,#B8C2CE)} .site-header{position:sticky;top:0;z-index:100;background:#fff;border-bottom:1px solid var(--borda,#D8DADE)} .site-header .wrap{min-height:104px;display:flex;align-items:center;justify-content:space-between;gap:16px 36px;flex-wrap:wrap;padding-top:10px;padding-bottom:10px} .site-header .marca-logo{width:150px;height:auto;filter:none} /* Desktop: uma linha só. Medido: o nav soma 953px intrínsecos; com logo 150px, gap 36 e padding 48 o modo desktop precisa de 1187px — daí o colapso em 1220px (folga de ~33px). Ao acrescentar item de menu, refaça a conta aqui, em responsivo.css e no medeLargura() do arquivo de design. */ .nav{display:flex;align-items:center;gap:22px;flex-wrap:nowrap;white-space:nowrap;font-size:14.5px;font-weight:600;flex:1 1 auto;justify-content:flex-end} .nav-divisor{width:1px;height:26px;background:var(--borda,#D8DADE);flex:0 0 auto;display:block} .nav-portal{display:flex;align-items:center;gap:8px;color:var(--texto,#4B5563);font-size:14px} .nav-portal:hover{color:var(--azul,#1D4F8C)} .nav-cta{background:var(--marinho,#0B1B33);border-color:var(--marinho,#0B1B33);color:#fff;font-size:14.5px;padding:12px 22px} .nav-cta:hover{background:var(--azul,#1D4F8C);border-color:var(--azul,#1D4F8C);color:#fff} .nav a{color:var(--marinho,#0B1B33)} .nav [aria-current="page"]{color:var(--azul,#1D4F8C)} .nav-toggle{display:none;background:none;border:1px solid var(--borda,#D8DADE);width:48px;height:48px;align-items:center;justify-content:center;cursor:pointer} @media (max-width:1219px){ /* Sem JS o nav fica empilhado e visível — o menu nunca é inacessível. Este arquivo carrega DEPOIS do CSS crítico inlinado, com a mesma especificidade: sem o guard .bikows-js aqui também, esta regra venceria e anularia o fallback declarado lá. */ .nav{display:flex;width:100%;flex-direction:column;align-items:stretch;gap:2px;white-space:normal;font-size:16px;padding:14px 0 6px;border-top:1px solid var(--borda,#D8DADE);margin-top:12px} .bikows-js .nav{display:none} .bikows-js .nav.is-open{display:flex} .nav-toggle{display:flex} html:not(.bikows-js) .nav-toggle{display:none} .nav>a,.nav-portal{min-height:48px;display:flex;align-items:center;padding:0 2px;border-bottom:1px solid var(--base,#F4F5F7)} .nav-divisor{width:100%;height:1px;margin:8px 0} .nav-cta{justify-content:center;margin-top:12px} } .hero{position:relative;background:var(--marinho,#0B1B33);min-height:640px;display:flex;align-items:flex-end;overflow:hidden} .hero>img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover} .hero::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(11,27,51,.35) 0%,rgba(11,27,51,.72) 55%,rgba(11,27,51,.95) 100%)} .hero .wrap{position:relative;z-index:1;padding:120px 24px 64px;width:100%} .hero h1{color:#fff;max-width:20ch;margin-top:22px;text-wrap:balance} .hero p{color:rgba(255,255,255,.86);max-width:62ch;margin-top:24px;font-size:17px} .hero-ctas{display:flex;gap:14px;flex-wrap:wrap;margin-top:34px} .hero-selos{display:flex;gap:40px;flex-wrap:wrap;margin-top:48px;padding-top:26px;border-top:1px solid rgba(255,255,255,.18);color:#fff;font-size:14px} .numeros{background:#fff;border-bottom:1px solid var(--borda,#D8DADE)} /* Grade de colunas iguais, como no design: com flex-wrap os quatro números não formam colunas e em largura intermediária quebram desalinhados. */ .numeros .wrap{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(200px,100%),1fr));gap:28px 56px;padding:38px 24px} .numeros .wrap>span{display:flex;align-items:baseline;gap:12px} .numeros .wrap>span{font-size:13px} .numeros b{font-family:var(--display,'Archivo',sans-serif);font-weight:900;font-size:clamp(26px,2.6vw,34px);color:var(--marinho,#0B1B33)} .grid-1px{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(280px,100%),1fr));gap:1px;background:var(--borda,#D8DADE);border:1px solid var(--borda,#D8DADE)} .grid-1px>*{background:#fff;padding:30px 26px} .card-servico{border-top:3px solid var(--azul,#1D4F8C);display:flex;flex-direction:column;gap:10px;min-height:220px} .lista-plana{border-top:1px solid var(--borda,#D8DADE)} .lista-plana>*{display:flex;flex-wrap:wrap;gap:12px 28px;align-items:baseline;padding:24px 0;border-bottom:1px solid var(--borda,#D8DADE)} .marcadores{list-style:none;padding:0;display:grid;gap:12px} .marcadores li{display:flex;gap:12px;align-items:baseline} .marcadores li::before{content:"";width:7px;height:7px;background:var(--bordo,#8B2222);flex:0 0 auto;margin-top:9px} .duas{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(320px,100%),1fr));gap:56px;align-items:start} .tabela-norma th{text-align:left;font-family:var(--mono,'IBM Plex Mono',monospace);font-size:11px;letter-spacing:1.6px;text-transform:uppercase;color:var(--texto-dark-fraco,#8FA0B5);padding:10px 12px;border-bottom:1px solid #5A6B82} .tabela-norma td{padding:12px;border-bottom:1px solid var(--marinho-borda,#22334D);color:#fff;font-size:14px} .scroll-x{overflow-x:auto} details{border-bottom:1px solid var(--borda,#D8DADE);padding:20px 0} summary{display:flex;justify-content:space-between;gap:16px;align-items:baseline;cursor:pointer;list-style:none} summary::-webkit-details-marker{display:none} summary::after{content:"+";font-family:var(--mono,'IBM Plex Mono',monospace);color:var(--azul,#1D4F8C);font-size:18px} details[open] summary::after{content:"\2212"} .wp-block-rank-math-faq-block .rank-math-question{font-family:var(--display,'Archivo',sans-serif);font-weight:700;font-size:18px;color:var(--marinho,#0B1B33);margin-top:22px} .wp-block-rank-math-faq-block .rank-math-answer{margin-top:8px} .entry{max-width:72ch} .entry p,.entry ul,.entry ol{margin-top:1.1em} .entry h2{margin-top:2em;font-size:clamp(24px,2.6vw,30px)} .entry h3{margin-top:1.6em} .entry img{margin:2em 0} .sumario{background:#fff;border:1px solid var(--borda,#D8DADE);padding:24px 26px;margin-top:28px} .sumario ol{margin-top:12px;padding-left:20px} .site-footer{background:var(--marinho-deep,#071224);color:var(--texto-dark,#B8C2CE);padding:72px 0 28px;font-size:14px} .site-footer h2{font-family:var(--mono,'IBM Plex Mono',monospace);font-size:11px;letter-spacing:2px;text-transform:uppercase;color:var(--texto-dark-fraco,#8FA0B5);font-weight:600} /* Contagem de colunas fixa por faixa, igual ao resto do site. Com auto-fit e as 6 colunas atuais a última linha quebrava desigual e a coluna da marca ficava do mesmo tamanho das listas de link. A marca ocupa mais frações. */ .site-footer .cols{display:grid;grid-template-columns:1fr;gap:40px} .site-footer .cols>:first-child{grid-column:1 / -1} @media (min-width:640px){.site-footer .cols{grid-template-columns:repeat(2,minmax(0,1fr))}} @media (min-width:1000px){.site-footer .cols{grid-template-columns:2fr repeat(3,minmax(0,1fr))}.site-footer .cols>:first-child{grid-column:auto}} @media (min-width:1220px){.site-footer .cols{grid-template-columns:1.6fr repeat(5,minmax(0,1fr))}} .site-footer a{color:var(--texto-dark,#B8C2CE)} .site-footer a:hover{color:#fff} .site-footer .fim{margin-top:48px;padding-top:22px;border-top:1px solid var(--marinho-borda,#22334D);display:flex;justify-content:space-between;align-items:center;gap:16px;flex-wrap:wrap;font-family:var(--mono,'IBM Plex Mono',monospace);font-size:11px;letter-spacing:1.4px;text-transform:uppercase;color:var(--texto-dark-fraco,#8FA0B5)} .wa{position:fixed;right:22px;bottom:22px;z-index:150;background:var(--vermelho,#C42B2B);color:#fff;font-family:var(--display,'Archivo',sans-serif);font-weight:700;font-size:14px;padding:15px 22px;display:flex;align-items:center;gap:10px;border:1px solid var(--vermelho,#C42B2B);min-height:48px} .wa:hover{background:var(--vermelho-hover,#A82323);border-color:var(--vermelho-hover,#A82323);color:#fff} .breadcrumb{font-family:var(--mono,'IBM Plex Mono',monospace);font-size:11px;letter-spacing:1.6px;text-transform:uppercase;display:flex;gap:10px;flex-wrap:wrap} @media (prefers-reduced-motion:reduce){*{animation-duration:.001ms!important;transition-duration:.001ms!important}} /* Selo de conformidade NR-12 — amarelo de sinalização da norma, traço e texto pretos. Decisão explícita do cliente; não trocar por carimbo vazado. */ .stamp-nr12{background:#F5C400;border:1px solid #000;color:#000} /* Selo CREA na primeira coluna do rodapé, junto ao número do registro. */ .rodape-crea{display:flex;align-items:center;gap:10px;margin-top:14px;padding-top:14px;border-top:1px solid var(--marinho-borda,#22334D)} .rodape-crea span{font-family:var(--mono,'IBM Plex Mono',monospace);font-size:10px;letter-spacing:1.4px;text-transform:uppercase;color:var(--texto-dark-fraco,#8FA0B5);line-height:1.5} .rodape-crea img{flex:0 0 auto} /* CTA do cabeçalho. A classe do nav é .nav: ".nav a" (0,1,1) vencia ".nav-cta" (0,1,0) e pintava o texto de marinho sobre fundo marinho — botão invisível. Precisa de ".nav a.nav-cta" (0,2,1) para ganhar em cor e em fundo. Declarado nas duas folhas: style.css carrega depois do crítico inlinado. */ .nav a.nav-cta{background:var(--vermelho,#C42B2B);border:1.5px solid var(--vermelho,#C42B2B);color:#fff} .nav a.nav-cta:hover{background:var(--vermelho-hover,#A82323);border-color:var(--vermelho-hover,#A82323);color:#fff} /* Carrossel dentro do cartão de nível 1 em /solucoes/: ocupa a célula inteira do grid, sem margem (a margem padrão do carrossel existe para quando ele fica solto no fluxo, não encaixado como metade de um cartão). */ .n1-foto{display:flex;min-width:0} .n1-foto .carrossel{margin-top:0;border:0;width:100%;height:100%} .n1-foto .js-carrossel{min-height:300px} /* Par de serviços que fecha a grade da home. GRID DE UMA COLUNA, não flex com flex-basis: com "flex:1 1 220px" o resumo encolhia até recortar no meio de uma palavra e, quando o cartão esticava para fechar a linha, sobrava um vão alto embaixo. Em grid o nome ocupa a primeira linha, resumo e "ver serviço" a segunda, e nada recorta porque nenhuma faixa depende de base em px. */ .card-par{background:#fff;padding:26px 24px;display:grid;grid-template-columns:minmax(0,1fr) auto;gap:8px 20px;align-items:baseline;color:var(--marinho,#0B1B33)} .card-par:hover{background:var(--base,#F4F5F7)} .card-par-nome{grid-column:1 / -1;font-family:var(--display,'Archivo',sans-serif);font-weight:800;font-size:17px;color:var(--marinho,#0B1B33)} .card-par-resumo{font-size:14.5px;line-height:1.6;color:var(--texto,#4B5563);min-width:0} .card-par-ver{font-family:var(--display,'Archivo',sans-serif);font-weight:700;font-size:13.5px;color:var(--azul,#1D4F8C);white-space:nowrap} @media (max-width:639px){ .card-par{grid-template-columns:minmax(0,1fr)} .card-par-ver{white-space:normal} } /* Imagem que preenche a célula, sem esticar: usada onde o pai é position:relative com altura própria (cartão de carro-chefe, capas). */ .capa-cobre{position:absolute;inset:0;width:100%;height:100%;object-fit:cover} /* ---------- Painel de setor: foto + gradiente de proteção (igual ao design) ---------- A caixa cinza chapada era divergência: o design usa foto do setor em full-bleed com o gradiente marinho entrando pela direita, e o texto sobre a faixa escura. Sem a foto o painel esticava cinza até a altura da coluna de 11 abas e deixava um vão enorme. O texto fica em 54% para não invadir a zona clara do gradiente, onde perderia contraste. */ .setor-painel{position:relative;overflow:hidden;padding:0;min-height:380px} .setor-foto{position:absolute;inset:0;background:var(--apoio,#DCE6F2) center/cover no-repeat} .setor-protecao{position:absolute;inset:0;background:linear-gradient(270deg,rgba(11,27,51,.95) 0%,rgba(11,27,51,.95) 54%,rgba(11,27,51,.6) 68%,rgba(11,27,51,0) 82%)} .setor-texto{position:relative;min-height:380px;display:flex;flex-direction:column;justify-content:flex-end;align-items:flex-end;text-align:right;padding:44px 40px;min-width:0;max-width:54%;margin-left:auto;color:#fff} .setor-texto h3{color:#fff} .setor-texto p{color:var(--texto-dark,#B8C2CE);max-width:46ch} .setor-texto strong{color:#fff} .setor-texto .eyebrow{color:var(--texto-dark-fraco,#8FA0B5)} .setor-link{display:inline-block;margin-top:20px;font-family:var(--display,'Archivo',sans-serif);font-weight:700;font-size:14.5px;color:#fff} .setor-link:hover{color:var(--texto-dark,#B8C2CE)} /* Abaixo de 1000px o painel vira coluna cheia: 54% deixaria a linha com ~24 caracteres, e o gradiente lateral não faz sentido sem largura. */ @media (max-width:999px){ .setor-texto{max-width:100%;align-items:flex-start;text-align:left;min-height:300px} .setor-protecao{background:linear-gradient(180deg,rgba(11,27,51,.55) 0%,rgba(11,27,51,.95) 60%)} } /* Contêiner na proporção real das fotos — nada recortado. Com altura fixa e largura livre o contêiner ficava em ~2.9:1 contra fotos 4:3, descartando mais de metade da altura de cada uma. A proporção é medida do primeiro arquivo em bikows_carrossel e chega aqui como --carrossel-prop. O min-height continua como piso, para o bloco não colapsar antes das imagens carregarem. */ .carrossel[style*="--carrossel-prop"]{aspect-ratio:var(--carrossel-prop)} .carrossel[style*="--carrossel-prop"] .carrossel-slide img{width:100%;height:100%;object-fit:cover} /* O contador saía sobre a legenda: agora fica no canto oposto. */ .carrossel-contador{left:auto;right:12px;bottom:12px}