/* Theme Name: BIMmetria Datum Theme URI: https://bimmetria.com.br Author: BIMmetria Arquitetura Description: Segunda geração do tema exclusivo da BIMmetria. O site inteiro é uma prancha técnica: moldura de folha de desenho, carimbo no rodapé e chave de modo claro/escuro que alterna entre papel de prancheta e varredura noturna — até a nuvem de pontos troca de cor. Tipos de conteúdo para Projetos e Certificados, seção Grupo (BIMmetria + Segóvia), carrossel de fotos do Diário de Obra, WooCommerce e campos prontos para visualização futura de nuvens de pontos e IFC. Version: 2.5.0 Requires at least: 6.0 Tested up to: 6.7 Requires PHP: 7.4 License: GNU General Public License v2 or later License URI: http://www.gnu.org/licenses/gpl-2.0.html Text Domain: bimmetria Tags: portfolio, architecture, dark, light, custom-colors, custom-logo, custom-menu, featured-images, e-commerce */ /* ========================================================= DATUM — sistema de dois planos (claro/escuro) grafite #252932 · laranja laser #FF6501 · índigo #2F3B6B O modo é definido em . ========================================================= */ :root{ --survey: #2F3B6B; --band: #232936; /* faixas sempre grafite (stats, carimbo) */ --band-txt: #F2F4F9; --font-display:'Chakra Petch', system-ui, sans-serif; --font-body: 'Manrope', system-ui, sans-serif; --font-mono: 'JetBrains Mono', ui-monospace, monospace; --container: 1360px; --pad: clamp(24px, 4vw, 56px); --radius: 2px; --t-fast: .22s cubic-bezier(.4,0,.2,1); --t-slow: .6s cubic-bezier(.22,1,.36,1); } /* ---------- PLANO ESCURO (varredura noturna) ---------- */ :root, :root[data-theme="dark"]{ --bg: #14171D; --bg-2: #181C23; --panel: #1E232C; --panel-2: #232936; --heading: #F2F4F9; --text: #C6CCDA; --muted: #828BA1; --line: rgba(139,151,201,.17); --line-soft: rgba(139,151,201,.09); --laser: #FF6501; --laser-soft:#FF8A3D; --survey-2: #8B97C9; --bg-rgb: 20,23,29; --shadow: 0 22px 60px -20px rgba(0,0,0,.55); /* nuvem de pontos */ --pc-idle: 139,151,201; --pc-dim: 47,59,107; --pc-hot: 255,200,140; color-scheme: dark; } /* ---------- PLANO CLARO (papel de prancheta) ---------- */ :root[data-theme="light"]{ --bg: #F3F4F7; --bg-2: #ECEEF3; --panel: #FFFFFF; --panel-2: #E4E7EE; --heading: #1C212C; --text: #3A4150; --muted: #687184; --line: rgba(47,59,107,.20); --line-soft: rgba(47,59,107,.10); --laser: #E85800; --laser-soft:#D24E00; --survey-2: #4C5A96; --bg-rgb: 243,244,247; --shadow: 0 20px 44px -18px rgba(37,41,50,.22); --pc-idle: 88,101,155; --pc-dim: 47,59,107; --pc-hot: 255,150,70; color-scheme: light; } /* ============ RESET / BASE ============ */ *,*::before,*::after{box-sizing:border-box} html{-webkit-text-size-adjust:100%;scroll-behavior:smooth} body{ margin:0; font-family:var(--font-body); font-size:17px; line-height:1.7; color:var(--text); background:var(--bg); -webkit-font-smoothing:antialiased; } /* transição suave ao alternar o plano */ body,.site-header,.sec,.stats,.svc-card,.proj-card,.post-card,.curso-card,.cert-card, .grupo-card,.ficha,.viewer-box,.site-footer,.page-hero,.hud,.carimbo,input,textarea,select{ transition:background-color .3s ease,color .3s ease,border-color .3s ease; } img{max-width:100%;height:auto;display:block} a{color:var(--survey-2);text-decoration:none;transition:color var(--t-fast)} a:hover{color:var(--laser)} h1,h2,h3,h4,h5,h6{ font-family:var(--font-display); font-weight:600; line-height:1.15; color:var(--heading); margin:0 0 .5em; text-wrap:balance; } p{margin:0 0 1.2em} :focus-visible{outline:2px solid var(--laser);outline-offset:3px} ::selection{background:var(--laser);color:#fff} .screen-reader-text{position:absolute!important;clip:rect(1px,1px,1px,1px);width:1px;height:1px;overflow:hidden} .skip-link{position:absolute;left:-9999px;top:0;background:var(--laser);color:#fff;padding:.6em 1em;z-index:9999} .skip-link:focus{left:0;color:#fff} .container{max-width:var(--container);margin:0 auto;padding:0 var(--pad)} /* malha milimetrada */ .grid-bg{ background-image: linear-gradient(var(--line-soft) 1px, transparent 1px), linear-gradient(90deg, var(--line-soft) 1px, transparent 1px); background-size:52px 52px; } /* ============ MOLDURA DA PRANCHA ============ */ .sheet-frame{ position:fixed;inset:10px;border:1px solid var(--line); pointer-events:none;z-index:1600; } .sheet-frame::before,.sheet-frame::after, .sheet-frame b::before,.sheet-frame b::after{ content:"";position:absolute;width:16px;height:16px; border-color:var(--laser);border-style:solid;opacity:.9; } .sheet-frame::before{top:-1px;left:-1px;border-width:2px 0 0 2px} .sheet-frame::after{bottom:-1px;right:-1px;border-width:0 2px 2px 0} .sheet-frame b::before{top:-1px;right:-1px;border-width:2px 2px 0 0} .sheet-frame b::after{bottom:-1px;left:-1px;border-width:0 0 2px 2px} .admin-bar .sheet-frame{top:42px} @media (max-width:899px){.sheet-frame{display:none}} /* barra de progresso — o laser lendo a folha */ .scan-progress{ position:fixed;top:0;left:0;height:2px;width:0; background:linear-gradient(90deg,var(--laser),var(--laser-soft)); box-shadow:0 0 10px rgba(255,101,1,.6); z-index:1700;transition:width .1s linear; } .admin-bar .scan-progress{top:32px} @media (max-width:782px){.admin-bar .scan-progress{top:46px}} /* ============ TIPOGRAFIA TÉCNICA ============ */ .eyebrow{ font-family:var(--font-mono); font-size:.74rem; letter-spacing:.18em; text-transform:uppercase; color:var(--laser); display:inline-flex; align-items:center; gap:.7em; margin-bottom:14px; } .eyebrow::before{content:"";width:26px;height:1px;background:var(--laser)} .dimline{position:relative;height:1px;background:var(--line);margin:26px 0 0} .dimline::before,.dimline::after{ content:"";position:absolute;top:-5px;width:1px;height:11px; background:var(--survey-2);transform:rotate(20deg); } .dimline::before{left:0} .dimline::after{right:0} /* cabeçalho de seção: título à esquerda, nº da folha à direita */ .sec-head{margin-bottom:54px} .sec-head .sh-row{display:flex;justify-content:space-between;align-items:flex-end;gap:24px} .sec-head .fl{ font-family:var(--font-mono);font-size:.7rem;letter-spacing:.2em; color:var(--muted);white-space:nowrap;padding-bottom:.6em; } .sec-head.center{text-align:center} .sec-head.center .eyebrow{justify-content:center} .sec-head.center .sh-row{justify-content:center} .sec-title{font-size:clamp(1.7rem,3.4vw,2.7rem);max-width:22ch} .sec-sub{color:var(--muted);font-size:1.05rem;max-width:64ch;margin-top:.4em} .sec-head.center .sec-sub{margin-left:auto;margin-right:auto} @media (max-width:639px){.sec-head .fl{display:none}} /* ============ SEÇÕES ============ */ .sec{padding:96px 0;position:relative;background:var(--bg)} .sec-dark{background:var(--bg-2)} .scan-divider{height:2px;background:linear-gradient(90deg,transparent,var(--laser) 35%,var(--laser) 65%,transparent);opacity:.5;max-width:var(--container);margin:0 auto} /* ============ BOTÕES ============ */ .btn{ display:inline-flex;align-items:center;gap:.6em; font-family:var(--font-display);font-weight:600;font-size:.95rem; letter-spacing:.04em;text-transform:uppercase; padding:.95em 1.9em;border:1px solid transparent;border-radius:var(--radius); cursor:pointer;transition:all var(--t-fast);line-height:1; } .btn-laser{background:var(--laser);color:#fff} .btn-laser:hover{background:#C94C00;color:#fff;transform:translateY(-2px);box-shadow:0 10px 24px -8px rgba(232,88,0,.5)} .btn-ghost,.btn-ink,.btn-outline{border-color:var(--line);color:var(--heading);background:transparent} .btn-ghost:hover,.btn-ink:hover,.btn-outline:hover{border-color:var(--laser);color:var(--laser);transform:translateY(-2px)} .btn .arrow{transition:transform var(--t-fast)} .btn:hover .arrow{transform:translateX(4px)} /* ============ HEADER ============ */ .site-header{ position:fixed;inset:0 0 auto;z-index:1500; transition:background var(--t-fast),box-shadow var(--t-fast); } .site-header.is-scrolled{background:rgba(var(--bg-rgb),.94);backdrop-filter:blur(10px);box-shadow:0 1px 0 var(--line)} .admin-bar .site-header{top:32px} @media (max-width:782px){.admin-bar .site-header{top:46px}} .sh-inner{display:flex;align-items:center;justify-content:space-between;gap:22px;height:78px} .sh-logo{display:flex;align-items:center;gap:12px;color:var(--heading);font-family:var(--font-display);font-weight:700;font-size:1.12rem;letter-spacing:.02em} .sh-logo:hover{color:var(--heading)} .sh-logo img{height:46px;width:auto;background:#fff;border-radius:3px;padding:3px;border:1px solid var(--line-soft)} .sh-logo .bim{color:var(--laser)} .sh-nav{display:flex;align-items:center} .sh-nav ul{display:flex;gap:6px;list-style:none;margin:0;padding:0} .sh-nav li{position:relative} .sh-nav a{display:block;padding:.65em .9em;color:var(--text);font-size:.92rem;font-weight:600;border-radius:var(--radius)} .sh-nav a:hover{color:var(--laser)} .sh-nav .current-menu-item>a,.sh-nav .current_page_item>a{color:var(--laser)} .sh-nav .sub-menu{ position:absolute;top:100%;left:0;min-width:240px; background:var(--panel);border:1px solid var(--line); padding:8px;display:none;flex-direction:column;gap:2px;box-shadow:var(--shadow); } .sh-nav li:hover>.sub-menu,.sh-nav li:focus-within>.sub-menu{display:flex} .sh-nav .sub-menu a{padding:.6em .8em;font-size:.88rem} .sh-cta{white-space:nowrap} /* chave claro/escuro */ .mode-toggle{ width:42px;height:42px;display:grid;place-items:center;flex:none; background:transparent;border:1px solid var(--line);border-radius:var(--radius); color:var(--heading);cursor:pointer;transition:all var(--t-fast); } .mode-toggle:hover{border-color:var(--laser);color:var(--laser)} .mode-toggle svg{width:18px;height:18px} [data-theme="dark"] .mode-toggle .i-moon{display:none} [data-theme="light"] .mode-toggle .i-sun{display:none} .sh-burger{display:none;background:none;border:1px solid var(--line);border-radius:var(--radius);cursor:pointer;padding:10px} .sh-burger span{display:block;width:22px;height:2px;background:var(--heading);margin:5px 0;transition:transform var(--t-fast),opacity var(--t-fast)} @media (max-width:1023px){ .sh-burger{display:block} .sh-cta{display:none} .sh-nav{ position:fixed;inset:78px 0 0 0;background:var(--bg); flex-direction:column;align-items:stretch;padding:24px; transform:translateX(100%);transition:transform var(--t-slow);overflow:auto; } .admin-bar .sh-nav{top:124px} .sh-nav.open{transform:translateX(0)} .sh-nav ul{flex-direction:column;gap:0} .sh-nav a{padding:1em .4em;font-size:1.05rem;border-bottom:1px solid var(--line-soft)} .sh-nav .sub-menu{position:static;display:flex;border:0;box-shadow:none;background:transparent;padding-left:18px} body.nav-open{overflow:hidden} .sh-burger.open span:nth-child(1){transform:translateY(7px) rotate(45deg)} .sh-burger.open span:nth-child(2){opacity:0} .sh-burger.open span:nth-child(3){transform:translateY(-7px) rotate(-45deg)} } /* ============ HERO — NUVEM DE PONTOS + HUD ============ */ .hero{ position:relative;min-height:100svh;display:flex;align-items:center; background:var(--bg);overflow:hidden; } #bm-pointcloud{position:absolute;inset:0;width:100%;height:100%;display:block} .hero::after{ content:"";position:absolute;inset:0;pointer-events:none; background:radial-gradient(120% 90% at 22% 50%, rgba(var(--bg-rgb),.88) 0%, rgba(var(--bg-rgb),.38) 42%, rgba(var(--bg-rgb),0) 72%); } .hero-inner{position:relative;z-index:2;padding:150px 0 130px;width:100%} .hero-eyebrow{ font-family:var(--font-mono);font-size:.78rem;letter-spacing:.22em;text-transform:uppercase; color:var(--laser);display:inline-flex;align-items:center;gap:.8em;margin-bottom:22px; } .hero-eyebrow .dot{width:7px;height:7px;border-radius:50%;background:var(--laser);box-shadow:0 0 12px var(--laser);animation:pulse 2.2s infinite} @keyframes pulse{0%,100%{opacity:1}50%{opacity:.35}} .hero-title{ font-size:clamp(2.3rem,5vw,4.6rem);font-weight:700;color:var(--heading); max-width:15ch;margin-bottom:.35em; } .hero-title em{font-style:normal;color:var(--laser)} .hero-sub{font-size:clamp(1rem,1.6vw,1.2rem);color:var(--muted);max-width:54ch;margin-bottom:2.2em} .hero-actions{display:flex;gap:16px;flex-wrap:wrap} /* HUD do instrumento */ .hud{ position:absolute;z-index:2;left:var(--pad);bottom:24px; display:flex;border:1px solid var(--line); background:rgba(var(--bg-rgb),.62);backdrop-filter:blur(8px); font-family:var(--font-mono); } .hud>div{padding:10px 18px;border-left:1px solid var(--line)} .hud>div:first-child{border-left:0} .hud .h-l{display:block;font-size:.58rem;letter-spacing:.22em;text-transform:uppercase;color:var(--muted)} .hud .h-v{font-size:.82rem;color:var(--laser);letter-spacing:.06em} .hero-scroll{ position:absolute;z-index:2;right:var(--pad);bottom:26px; font-family:var(--font-mono);font-size:.66rem;letter-spacing:.3em;color:var(--muted); text-transform:uppercase;display:flex;flex-direction:column;align-items:center;gap:8px; } .hero-scroll::after{content:"";width:1px;height:34px;background:linear-gradient(180deg,var(--laser),transparent);animation:drop 1.8s infinite} @keyframes drop{0%{transform:scaleY(0);transform-origin:top}60%{transform:scaleY(1)}100%{transform:scaleY(0);transform-origin:bottom}} @media (max-width:767px){ .hud{position:static;margin:34px var(--pad) 0;display:inline-flex} .hero-scroll{display:none} .hero-inner{padding:130px 0 60px} } /* ============ STATS — RÉGUA (sempre grafite) ============ */ .stats{background:var(--band);color:var(--band-txt);padding:0;border-block:1px solid var(--line-soft)} .stats-inner{display:grid;grid-template-columns:repeat(4,1fr)} .stat{padding:42px 28px;border-left:1px solid rgba(139,151,201,.18)} .stat:first-child{border-left:0} .stat-n{font-family:var(--font-display);font-weight:700;font-size:clamp(1.9rem,3.2vw,2.7rem);color:#FF6501;line-height:1} .stat-n sup{font-size:.5em;color:#FF8A3D} .stat-l{font-family:var(--font-mono);font-size:.72rem;letter-spacing:.16em;text-transform:uppercase;color:#8B97C9;margin-top:10px} @media (max-width:860px){.stats-inner{grid-template-columns:repeat(2,1fr)}.stat:nth-child(3){border-left:0}} /* ============ PAINEL DE CURSOS (faixa abaixo dos números) ============ */ .painel{ position:relative;background:var(--bg-2);padding:64px 0 72px; border-bottom:1px solid var(--line-soft);overflow:hidden; } .painel::before{ /* fio laser ligando a régua de números ao painel */ content:"";position:absolute;top:0;left:50%;transform:translateX(-50%); width:min(520px,60%);height:2px; background:linear-gradient(90deg,transparent,var(--laser),transparent); animation:painel-fio 3.2s ease-in-out infinite; } @keyframes painel-fio{0%,100%{opacity:.4;width:min(360px,40%)}50%{opacity:1;width:min(560px,64%)}} .painel-head{display:flex;align-items:baseline;gap:22px;flex-wrap:wrap;margin-bottom:34px} .painel-tag{ font-family:var(--font-mono);font-size:.7rem;letter-spacing:.22em;text-transform:uppercase; color:var(--laser);display:inline-flex;align-items:center;gap:.7em; } .painel-tag .dot{width:7px;height:7px;border-radius:50%;background:var(--laser);box-shadow:0 0 10px var(--laser);animation:pulse 2.2s infinite} .painel-title{font-size:clamp(1.3rem,2.4vw,1.8rem);margin:0} .painel-hint{margin-left:auto;font-family:var(--font-mono);font-size:.66rem;letter-spacing:.16em;text-transform:uppercase;color:var(--muted)} @media (max-width:767px){.painel-hint{display:none}} /* grade autoajustável: 6 a 9 chips se acomodam sozinhos */ .painel-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(148px,1fr));gap:14px} .curso-chip{ position:relative;display:flex;flex-direction:column;align-items:center;gap:10px; padding:22px 14px 18px;cursor:pointer;text-align:center; background:var(--panel);border:1px solid var(--line-soft);border-radius:var(--radius); color:var(--heading);font-family:var(--font-body); transition:transform var(--t-fast),border-color var(--t-fast),box-shadow var(--t-fast); } .curso-chip:hover,.curso-chip:focus-visible{transform:translateY(-4px);border-color:var(--laser);box-shadow:var(--shadow)} .chip-num{position:absolute;top:8px;left:10px;font-family:var(--font-mono);font-size:.58rem;letter-spacing:.16em;color:var(--muted);opacity:.7} .chip-logo{ width:56px;height:56px;display:grid;place-items:center; background:#fff;border:1px solid var(--line-soft);border-radius:4px;padding:8px; color:var(--survey); } .chip-logo img{max-width:100%;max-height:100%;object-fit:contain} .chip-nome{font-family:var(--font-display);font-weight:600;font-size:.92rem;line-height:1.25} .chip-preco{font-family:var(--font-mono);font-size:.66rem;letter-spacing:.08em;color:var(--laser)} /* entrada: varredura laser (clip da esquerda p/ direita) — só com html.js */ html.js .curso-chip.reveal{ opacity:0;transform:none; clip-path:inset(0 100% 0 0); transition:clip-path .7s cubic-bezier(.22,1,.36,1) var(--d,0s),opacity .5s var(--d,0s), border-color var(--t-fast),box-shadow var(--t-fast); } html.js .curso-chip.reveal.in{opacity:1;clip-path:inset(0 0 0 0)} html.js .curso-chip.reveal.in:hover{transform:translateY(-4px)} /* destaque cíclico: o "feixe" passa de curso em curso */ .curso-chip.is-live{border-color:var(--laser)} .curso-chip.is-live::after{ content:"";position:absolute;inset:-1px;border:1px solid var(--laser); border-radius:var(--radius);pointer-events:none; box-shadow:0 0 18px rgba(255,101,1,.35),inset 0 0 12px rgba(255,101,1,.12); animation:chip-live 1.2s ease-out; } @keyframes chip-live{from{opacity:0}30%{opacity:1}to{opacity:.8}} .curso-chip.is-live .chip-num{color:var(--laser);opacity:1} /* ---------- popup do curso ---------- */ .curso-modal{position:fixed;inset:0;z-index:2000;display:grid;place-items:center;padding:20px} .curso-modal[hidden]{display:none} .cm-backdrop{position:absolute;inset:0;background:rgba(10,12,16,.6);backdrop-filter:blur(6px)} .cm-panel{ position:relative;width:min(520px,100%);background:var(--panel); border:1px solid var(--line);box-shadow:var(--shadow);padding:34px; animation:cm-in .35s cubic-bezier(.22,1,.36,1); } @keyframes cm-in{from{opacity:0;transform:translateY(18px) scale(.98)}to{opacity:1;transform:none}} .cm-panel::before,.cm-panel::after{ content:"";position:absolute;width:16px;height:16px;border-color:var(--laser);border-style:solid; } .cm-panel::before{top:-1px;left:-1px;border-width:2px 0 0 2px} .cm-panel::after{bottom:-1px;right:-1px;border-width:0 2px 2px 0} .cm-close{ position:absolute;top:10px;right:10px;width:38px;height:38px; background:transparent;border:1px solid var(--line);color:var(--heading); font-size:1.2rem;line-height:1;cursor:pointer;transition:all var(--t-fast); } .cm-close:hover{border-color:var(--laser);color:var(--laser)} .cm-head{display:flex;gap:18px;align-items:center;margin-bottom:16px} .cm-logo{ flex:none;width:72px;height:72px;display:grid;place-items:center; background:#fff;border:1px solid var(--line-soft);border-radius:4px;padding:10px; } .cm-logo img{max-width:100%;max-height:100%;object-fit:contain} .cm-logo img[src=""]{display:none} .cm-tag{font-family:var(--font-mono);font-size:.62rem;letter-spacing:.2em;text-transform:uppercase;color:var(--laser)} .cm-head h3{margin:.2em 0 .1em;font-size:1.3rem} .cm-preco{font-family:var(--font-mono);font-size:.8rem;color:var(--laser)} .cm-desc{color:var(--muted);font-size:.95rem} .cm-actions{display:flex;gap:12px;flex-wrap:wrap;margin-top:22px} body.cm-open{overflow:hidden} @media (prefers-reduced-motion:reduce){ .painel::before{animation:none} html.js .curso-chip.reveal{clip-path:none;opacity:1} .cm-panel{animation:none} } /* ============ SERVIÇOS (cards clicáveis) ============ */ .svc-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(280px,1fr));gap:22px} a.svc-card{color:inherit} .svc-card{ position:relative;background:var(--panel);border:1px solid var(--line-soft); padding:34px 30px;display:flex;flex-direction:column; transition:transform var(--t-fast),box-shadow var(--t-fast),border-color var(--t-fast); } .svc-card::before,.svc-card::after{ content:"";position:absolute;width:14px;height:14px;border-color:var(--laser);border-style:solid;opacity:0;transition:opacity var(--t-fast); } .svc-card::before{top:-1px;left:-1px;border-width:2px 0 0 2px} .svc-card::after{bottom:-1px;right:-1px;border-width:0 2px 2px 0} .svc-card:hover{transform:translateY(-5px);box-shadow:var(--shadow);border-color:var(--line)} .svc-card:hover::before,.svc-card:hover::after{opacity:1} .svc-icon{ width:52px;height:52px;display:grid;place-items:center;margin-bottom:20px; border:1px solid var(--line);color:var(--survey-2);flex:none; } .svc-card:hover .svc-icon{color:var(--laser);border-color:var(--laser)} .svc-card h3{font-size:1.12rem;margin-bottom:.5em} .svc-card p{font-size:.95rem;color:var(--muted);margin:0 0 18px} .svc-num{position:absolute;top:26px;right:26px;font-family:var(--font-mono);font-size:.68rem;letter-spacing:.14em;color:var(--muted);opacity:.7} .svc-more{ margin-top:auto;font-family:var(--font-mono);font-size:.72rem;letter-spacing:.16em;text-transform:uppercase; color:var(--laser);opacity:0;transform:translateY(4px);transition:all var(--t-fast); } .svc-card:hover .svc-more{opacity:1;transform:none} /* ============ PROJETOS — mídia + barra de informações ============ */ .proj-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:22px} @media (max-width:1023px){.proj-grid{grid-template-columns:repeat(2,1fr)}} @media (max-width:639px){.proj-grid{grid-template-columns:1fr}} .proj-card{ display:flex;flex-direction:column;background:var(--panel); border:1px solid var(--line-soft);overflow:hidden; transition:transform var(--t-fast),box-shadow var(--t-fast),border-color var(--t-fast); } .proj-card:hover{transform:translateY(-5px);box-shadow:var(--shadow);border-color:var(--line)} .proj-media{position:relative;aspect-ratio:4/3;overflow:hidden;background:var(--panel-2)} .proj-media img{width:100%;height:100%;object-fit:cover;transition:transform .8s cubic-bezier(.22,1,.36,1),filter .8s;filter:saturate(.65)} .proj-card:hover .proj-media img{transform:scale(1.06);filter:saturate(1)} .proj-media .dots{ position:absolute;inset:0;pointer-events:none;opacity:.45;transition:opacity var(--t-fast); background-image:radial-gradient(rgba(139,151,201,.5) 1px, transparent 1.4px); background-size:14px 14px;mix-blend-mode:screen; } [data-theme="light"] .proj-media .dots{mix-blend-mode:multiply;opacity:.25} .proj-card:hover .proj-media .dots{opacity:.1} .proj-media .scan{ position:absolute;left:0;right:0;top:-12%;height:10%;pointer-events:none;opacity:0; background:linear-gradient(180deg,transparent,rgba(255,101,1,.35) 50%,transparent); border-bottom:1px solid rgba(255,101,1,.9); } .proj-card:hover .proj-media .scan{opacity:1;animation:scan 1.4s linear} @keyframes scan{from{top:-12%}to{top:108%}} .proj-body{padding:20px 22px;display:flex;justify-content:space-between;gap:14px;align-items:flex-start} .proj-tipo{font-family:var(--font-mono);font-size:.66rem;letter-spacing:.18em;text-transform:uppercase;color:var(--laser)} .proj-body h3{color:var(--heading);font-size:1.15rem;margin:.35em 0 0} .proj-body .loc{font-size:.84rem;color:var(--muted);margin-top:.25em} .proj-arrow{font-family:var(--font-mono);color:var(--muted);transition:all var(--t-fast);margin-top:4px} .proj-card:hover .proj-arrow{color:var(--laser);transform:translate(3px,-3px)} /* ============ CURSOS ============ */ .curso-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(290px,1fr));gap:22px} .curso-card{ background:var(--panel);border:1px solid var(--line-soft);display:flex;flex-direction:column; transition:transform var(--t-fast),box-shadow var(--t-fast),border-color var(--t-fast); } .curso-card:hover{transform:translateY(-5px);box-shadow:var(--shadow);border-color:var(--line)} .curso-thumb{aspect-ratio:16/9;overflow:hidden;background:var(--panel-2);display:grid;place-items:center} .curso-thumb img{width:100%;height:100%;object-fit:contain;padding:18px} .curso-body{padding:24px;display:flex;flex-direction:column;gap:10px;flex:1} .curso-body h3{font-size:1.1rem;margin:0} .curso-body h3 a{color:var(--heading)} .curso-body h3 a:hover{color:var(--laser)} .curso-price{font-family:var(--font-mono);color:var(--laser);font-size:.95rem;margin-top:auto} /* ============ CERTIFICADOS ============ */ .cert-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));gap:22px} .cert-card{ background:var(--panel);border:1px solid var(--line-soft);padding:28px; display:flex;flex-direction:column;gap:8px;transition:border-color var(--t-fast),transform var(--t-fast); } .cert-card:hover{border-color:var(--laser);transform:translateY(-4px)} .cert-card .selo{width:40px;height:40px;color:var(--laser);margin-bottom:8px} .cert-card h3{color:var(--heading);font-size:1.05rem;margin:0} .cert-card .inst{font-size:.86rem;color:var(--survey-2)} .cert-card .meta{font-family:var(--font-mono);font-size:.7rem;letter-spacing:.12em;color:var(--muted);text-transform:uppercase} .cert-card .ver{margin-top:10px;font-family:var(--font-mono);font-size:.74rem;letter-spacing:.12em;color:var(--laser);text-transform:uppercase} /* ============ GRUPO — BIMmetria + Segóvia ============ */ .grupo-grid{display:grid;grid-template-columns:1fr auto 1fr;gap:0;align-items:stretch} .grupo-card{ position:relative;background:var(--panel);border:1px solid var(--line-soft); padding:46px 42px;display:flex;flex-direction:column;gap:14px; transition:border-color var(--t-fast),transform var(--t-fast); } .grupo-card:hover{border-color:var(--line);transform:translateY(-4px)} .grupo-card::before,.grupo-card::after{ content:"";position:absolute;width:16px;height:16px;border-color:var(--laser);border-style:solid;opacity:.85; } .grupo-card::before{top:-1px;left:-1px;border-width:2px 0 0 2px} .grupo-card::after{bottom:-1px;right:-1px;border-width:0 2px 2px 0} .grupo-papel{font-family:var(--font-mono);font-size:.68rem;letter-spacing:.2em;text-transform:uppercase;color:var(--laser)} .grupo-marca{display:flex;align-items:center;gap:14px;min-height:64px} .grupo-marca img{max-height:64px;width:auto;background:#fff;border-radius:3px;padding:6px;border:1px solid var(--line-soft)} .grupo-wordmark{font-family:var(--font-display);font-weight:700;font-size:1.7rem;color:var(--heading);line-height:1.1} .grupo-wordmark .bim{color:var(--laser)} .grupo-wordmark small{display:block;font-family:var(--font-mono);font-size:.62rem;letter-spacing:.32em;text-transform:uppercase;color:var(--survey-2);margin-top:6px;font-weight:400} .grupo-card p{font-size:.95rem;color:var(--muted);margin:0;flex:1} .grupo-card .btn{align-self:flex-start;margin-top:8px} .grupo-bridge{ display:flex;flex-direction:column;align-items:center;justify-content:center; padding:0 34px;gap:12px; font-family:var(--font-mono);font-size:.64rem;letter-spacing:.26em;text-transform:uppercase; color:var(--survey-2); } .grupo-bridge .seta{color:var(--laser);font-size:1.1rem;letter-spacing:0;animation:bridge 2.4s ease-in-out infinite} @keyframes bridge{0%,100%{transform:translateX(0);opacity:.7}50%{transform:translateX(6px);opacity:1}} .grupo-bridge .fio{width:1px;flex:1;max-height:64px;background:linear-gradient(180deg,transparent,var(--line),transparent)} .grupo-bridge .lbl{writing-mode:vertical-rl;text-orientation:mixed} @media (max-width:900px){ .grupo-grid{grid-template-columns:1fr} .grupo-bridge{flex-direction:row;padding:26px 0} .grupo-bridge .fio{width:auto;height:1px;flex:1;max-height:none;max-width:90px;background:linear-gradient(90deg,transparent,var(--line),transparent)} .grupo-bridge .lbl{writing-mode:horizontal-tb} .grupo-bridge .seta{animation-name:bridgeV} @keyframes bridgeV{0%,100%{transform:translateY(0);opacity:.7}50%{transform:translateY(6px);opacity:1}} } /* ============ FOTOLOOP — Diário de obra ============ */ .fotoloop{ overflow:hidden;position:relative; -webkit-mask-image:linear-gradient(90deg,transparent,#000 6%,#000 94%,transparent); mask-image:linear-gradient(90deg,transparent,#000 6%,#000 94%,transparent); } .fotoloop-track{display:flex;width:max-content;animation:fotoloop var(--loop-dur,46s) linear infinite;will-change:transform} .fotoloop:hover .fotoloop-track{animation-play-state:paused} @keyframes fotoloop{to{transform:translateX(-50%)}} .fotoloop figure{ margin:0 18px 0 0;flex:none;width:min(360px,72vw);aspect-ratio:4/3; overflow:hidden;border:1px solid var(--line-soft);position:relative;background:var(--panel); } .fotoloop img{width:100%;height:100%;object-fit:cover;filter:saturate(.65);transition:filter var(--t-fast),transform .6s} .fotoloop figure:hover img{filter:saturate(1);transform:scale(1.04)} .fotoloop figcaption{ position:absolute;inset:auto 0 0;padding:14px 16px; font-family:var(--font-mono);font-size:.66rem;letter-spacing:.14em;text-transform:uppercase; color:#FF8A3D;background:linear-gradient(180deg,transparent,rgba(20,23,29,.9)); opacity:0;transition:opacity var(--t-fast); } .fotoloop figure:hover figcaption{opacity:1} @media (prefers-reduced-motion:reduce){ .fotoloop{-webkit-mask-image:none;mask-image:none;overflow-x:auto} .fotoloop-track{animation:none} } /* ============ BLOG ============ */ .post-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(300px,1fr));gap:22px} .post-card{background:var(--panel);border:1px solid var(--line-soft);overflow:hidden;transition:transform var(--t-fast),box-shadow var(--t-fast),border-color var(--t-fast)} .post-card:hover{transform:translateY(-5px);box-shadow:var(--shadow);border-color:var(--line)} .post-thumb{aspect-ratio:16/9;overflow:hidden;background:var(--panel-2)} .post-thumb img{width:100%;height:100%;object-fit:cover;transition:transform .7s} .post-card:hover .post-thumb img{transform:scale(1.05)} .post-body{padding:24px} .post-date{font-family:var(--font-mono);font-size:.7rem;letter-spacing:.16em;text-transform:uppercase;color:var(--laser)} .post-body h3{font-size:1.12rem;margin:.5em 0} .post-body h3 a{color:var(--heading)} .post-body h3 a:hover{color:var(--laser)} .post-body p{font-size:.92rem;color:var(--muted);margin:0} /* ============ CTA FINAL ============ */ .cta-sec{position:relative;overflow:hidden;background:var(--bg-2)} .cta-sec .cta-grid-bg{ position:absolute;inset:0;opacity:.5; background-image:radial-gradient(var(--line) 1px,transparent 1.5px); background-size:22px 22px; } .cta-inner{position:relative;text-align:center;max-width:760px;margin:0 auto} .cta-inner h2{font-size:clamp(1.8rem,3.6vw,2.8rem)} .cta-inner p{color:var(--muted);margin-bottom:2em} .cta-actions{display:flex;gap:16px;justify-content:center;flex-wrap:wrap} /* ============ FOOTER + CARIMBO ============ */ .site-footer{background:var(--bg);color:var(--muted);border-top:1px solid var(--line-soft)} .footer-top{display:grid;grid-template-columns:1.4fr 1fr 1fr 1.2fr;gap:44px;padding:72px 0 56px} @media (max-width:1023px){.footer-top{grid-template-columns:repeat(2,1fr)}} @media (max-width:639px){.footer-top{grid-template-columns:1fr}} .f-logo{display:flex;align-items:center;gap:12px;font-family:var(--font-display);font-weight:700;color:var(--heading);font-size:1.15rem;margin-bottom:16px} .f-logo img{height:44px;width:auto;background:#fff;border-radius:3px;padding:3px;border:1px solid var(--line-soft)} .f-logo .bim{color:var(--laser)} .site-footer p{font-size:.92rem} .f-title{font-family:var(--font-mono);font-size:.72rem;letter-spacing:.2em;text-transform:uppercase;color:var(--laser);margin-bottom:18px} .site-footer ul{list-style:none;margin:0;padding:0} .site-footer ul li{margin-bottom:10px} .site-footer ul a{color:var(--text);font-size:.93rem} .site-footer ul a:hover{color:var(--laser)} .f-contact li{display:flex;gap:10px;align-items:flex-start;font-size:.93rem} .f-contact svg{flex:none;margin-top:4px;color:var(--laser)} .f-social{display:flex;gap:10px;margin-top:18px} .f-social a{width:38px;height:38px;display:grid;place-items:center;color:var(--text);border:1px solid var(--line);transition:all var(--t-fast)} .f-social a:hover{color:#fff;border-color:var(--laser);background:var(--laser)} /* carimbo da prancha */ .carimbo{ border:1px solid var(--line);margin-bottom:34px; display:grid;grid-template-columns:2fr 1fr 1fr 1fr 1fr; background:var(--panel); } .carimbo>div{padding:14px 20px;border-left:1px solid var(--line)} .carimbo>div:first-child{border-left:0} .carimbo .c-l{display:block;font-family:var(--font-mono);font-size:.58rem;letter-spacing:.22em;text-transform:uppercase;color:var(--muted)} .carimbo .c-v{font-family:var(--font-display);font-weight:600;font-size:.9rem;color:var(--heading)} .carimbo .c-v .bim{color:var(--laser)} .carimbo .c-legal{grid-column:1/-1;border-left:0;border-top:1px solid var(--line)} .carimbo .c-legal .c-v{font-family:var(--font-mono);font-weight:400;font-size:.72rem;letter-spacing:.08em;color:var(--muted)} @media (max-width:900px){.carimbo{grid-template-columns:repeat(2,1fr)}.carimbo>div:nth-child(odd){border-left:0}.carimbo>div{border-top:1px solid var(--line)}.carimbo>div:nth-child(-n+2){border-top:0}} .footer-fim{padding-bottom:30px;font-family:var(--font-mono);font-size:.68rem;letter-spacing:.1em;color:var(--muted);display:flex;justify-content:space-between;gap:14px;flex-wrap:wrap} .footer-fim b{color:var(--laser);font-weight:500} /* ============ PÁGINAS INTERNAS ============ */ .page-hero{ background:var(--bg-2);padding:170px 0 80px;position:relative;overflow:hidden; border-bottom:1px solid var(--line-soft); } .page-hero .ph-dots{ position:absolute;inset:0;opacity:.5; background-image:radial-gradient(var(--line) 1px,transparent 1.5px); background-size:20px 20px; -webkit-mask-image:radial-gradient(80% 110% at 80% 0%,#000 30%,transparent 75%); mask-image:radial-gradient(80% 110% at 80% 0%,#000 30%,transparent 75%); } .page-hero .container{position:relative} .page-hero h1{font-size:clamp(1.9rem,4.2vw,3.1rem);max-width:22ch} .page-hero .ph-sub{color:var(--muted);max-width:62ch} .breadcrumb{font-family:var(--font-mono);font-size:.7rem;letter-spacing:.16em;text-transform:uppercase;color:var(--muted);margin-bottom:18px} .breadcrumb a{color:var(--laser)} .content-area{padding:80px 0} .entry-content{max-width:820px} .entry-content h2{font-size:1.7rem;margin-top:1.6em} .entry-content h3{font-size:1.3rem;margin-top:1.4em} .entry-content img{margin:1.5em 0} .entry-content blockquote{ border-left:3px solid var(--laser);margin:1.6em 0;padding:.4em 0 .4em 1.4em; color:var(--heading);font-family:var(--font-display);font-size:1.1rem; } .entry-content ul,.entry-content ol{padding-left:1.3em} .entry-content a{text-decoration:underline;text-underline-offset:3px;color:var(--laser)} .entry-content .wp-block-button__link{background:var(--laser);border-radius:var(--radius)} .entry-content table{border-collapse:collapse;width:100%;color:var(--text)} .entry-content td,.entry-content th{border:1px solid var(--line);padding:.6em .9em} .alignwide{max-width:1180px} .alignfull{max-width:none} /* ============ FICHA TÉCNICA (single projeto) ============ */ .proj-single-hero{position:relative;background:var(--bg);padding-top:78px} .proj-single-hero .img-wrap{position:relative;max-height:68vh;overflow:hidden} .proj-single-hero img{width:100%;max-height:68vh;object-fit:cover;filter:saturate(.85)} .proj-single-hero .img-wrap::after{ content:"";position:absolute;inset:0; background:linear-gradient(180deg,rgba(var(--bg-rgb),.4),transparent 35%,transparent 70%,rgba(var(--bg-rgb),.92)); } .proj-single-head{position:relative;margin-top:-110px;z-index:2;padding-bottom:56px} .proj-single-head h1{font-size:clamp(1.9rem,4vw,3rem);max-width:18ch} .proj-layout{display:grid;grid-template-columns:1fr 340px;gap:56px;align-items:start} @media (max-width:1023px){.proj-layout{grid-template-columns:1fr}} .ficha{position:sticky;top:110px;background:var(--panel);border:1px solid var(--line-soft)} .ficha-head{ background:var(--band);color:var(--band-txt);padding:16px 24px; font-family:var(--font-mono);font-size:.72rem;letter-spacing:.2em;text-transform:uppercase; display:flex;justify-content:space-between;align-items:center; } .ficha-head .laser-dot{width:8px;height:8px;border-radius:50%;background:#FF6501;box-shadow:0 0 10px #FF6501} .ficha dl{margin:0;padding:10px 24px 18px} .ficha .row{display:flex;justify-content:space-between;gap:14px;padding:11px 0;border-bottom:1px dashed var(--line)} .ficha .row:last-child{border-bottom:0} .ficha dt{font-family:var(--font-mono);font-size:.68rem;letter-spacing:.14em;text-transform:uppercase;color:var(--muted)} .ficha dd{margin:0;font-weight:700;font-family:var(--font-display);color:var(--heading);font-size:.92rem;text-align:right} .ficha-actions{padding:0 24px 24px;display:flex;flex-direction:column;gap:10px} .ficha-actions .btn{justify-content:center} .viewer-box{margin:48px 0;border:1px solid var(--line-soft);background:var(--panel)} .viewer-head{ display:flex;align-items:center;gap:12px;justify-content:space-between; padding:14px 20px;border-bottom:1px solid var(--line-soft); font-family:var(--font-mono);font-size:.72rem;letter-spacing:.18em;text-transform:uppercase;color:var(--survey-2); } .viewer-head .tag{color:var(--laser)} .viewer-box iframe,.viewer-box embed{width:100%;height:600px;border:0;display:block;background:var(--bg-2)} .viewer-soon{ padding:64px 24px;text-align:center;color:var(--muted); background-image:radial-gradient(var(--line) 1px,transparent 1.4px);background-size:16px 16px; } .viewer-soon b{font-family:var(--font-mono);font-size:.74rem;letter-spacing:.18em;text-transform:uppercase;color:var(--survey-2);display:block;margin-bottom:8px} /* ============ FILTROS / PAGINAÇÃO / NAV ============ */ .filtros{display:flex;gap:8px;flex-wrap:wrap;margin-bottom:42px} .filtros a{ font-family:var(--font-mono);font-size:.72rem;letter-spacing:.14em;text-transform:uppercase; padding:.7em 1.2em;border:1px solid var(--line);color:var(--muted); } .filtros a:hover,.filtros a.active{border-color:var(--laser);color:var(--laser)} .pagination{display:flex;gap:8px;justify-content:center;margin-top:56px} .pagination .page-numbers{ font-family:var(--font-mono);min-width:42px;height:42px;display:inline-grid;place-items:center; border:1px solid var(--line);color:var(--text);font-size:.85rem;padding:0 .6em; } .pagination .page-numbers.current{background:var(--laser);border-color:var(--laser);color:#fff} .pagination .page-numbers:hover{border-color:var(--laser);color:var(--laser)} .pagination .current:hover{color:#fff} .post-nav{display:flex;justify-content:space-between;gap:18px;margin-top:64px;border-top:1px solid var(--line-soft);padding-top:28px} .post-nav a{font-family:var(--font-display);font-weight:600;color:var(--heading);max-width:46%} .post-nav a:hover{color:var(--laser)} .post-nav .lbl{display:block;font-family:var(--font-mono);font-size:.66rem;letter-spacing:.18em;text-transform:uppercase;color:var(--muted);margin-bottom:6px} /* ============ 404 / BUSCA / FORMS ============ */ .err-404{min-height:72vh;display:grid;place-items:center;text-align:center;background:var(--bg);padding:140px 24px 90px;position:relative;overflow:hidden} .err-404 .code{font-family:var(--font-mono);font-size:clamp(4rem,14vw,9rem);color:var(--laser);line-height:1;letter-spacing:.06em;text-shadow:0 0 40px rgba(255,101,1,.35)} .err-404 p{color:var(--muted)} .search-form{display:flex;gap:0;max-width:520px} .search-form input[type=search]{ flex:1;padding:.95em 1.2em;border:1px solid var(--line);font-family:var(--font-body); font-size:.95rem;background:var(--panel);color:var(--heading); } .search-form input[type=search]::placeholder{color:var(--muted)} .search-form input[type=search]:focus{outline:2px solid var(--laser);outline-offset:0} .search-form button{border:0;background:var(--laser);color:#fff;padding:0 1.5em;cursor:pointer;font-family:var(--font-display);font-weight:600;text-transform:uppercase;font-size:.85rem} .err-404 .search-form{margin:28px auto 0} input[type=text],input[type=email],input[type=url],input[type=tel],input[type=number],input[type=password],textarea,select{ width:100%;padding:.85em 1em;border:1px solid var(--line);background:var(--panel); font-family:var(--font-body);font-size:.95rem;color:var(--heading);border-radius:var(--radius); } ::placeholder{color:var(--muted)} textarea{min-height:150px} input:focus,textarea:focus,select:focus{outline:2px solid var(--laser);outline-offset:0;border-color:transparent} .comment-list{list-style:none;padding:0} .comment-body{border:1px solid var(--line-soft);background:var(--panel);padding:22px;margin-bottom:16px} /* ============ WOOCOMMERCE ============ */ .woocommerce-page .content-area,.tribe-events-page-template .content-area{padding-top:80px} .woocommerce ul.products li.product{background:var(--panel);border:1px solid var(--line-soft);padding-bottom:18px} .woocommerce ul.products li.product .woocommerce-loop-product__title{font-family:var(--font-display);font-size:1.05rem;padding:0 18px;color:var(--heading)} .woocommerce ul.products li.product .price{color:var(--laser);font-family:var(--font-mono);padding:0 18px} .woocommerce ul.products li.product .button, .woocommerce a.button,.woocommerce button.button,.woocommerce input.button, .woocommerce #respond input#submit, .woocommerce a.button.alt,.woocommerce button.button.alt{ background:var(--laser);color:#fff;border-radius:var(--radius); font-family:var(--font-display);font-weight:600;text-transform:uppercase;font-size:.82rem;letter-spacing:.05em; } .woocommerce a.button:hover,.woocommerce button.button:hover{background:#C94C00;color:#fff} .woocommerce ul.products li.product .button{margin:12px 18px 0} .woocommerce div.product .product_title{color:var(--heading)} .woocommerce div.product p.price,.woocommerce div.product span.price{color:var(--laser);font-family:var(--font-mono)} .woocommerce span.onsale{background:var(--laser);border-radius:0;font-family:var(--font-mono)} .woocommerce .woocommerce-breadcrumb{font-family:var(--font-mono);font-size:.72rem;letter-spacing:.12em;text-transform:uppercase;color:var(--muted)} .woocommerce .woocommerce-breadcrumb a{color:var(--laser)} .woocommerce table.shop_table{border:1px solid var(--line);color:var(--text)} .woocommerce table.shop_table td,.woocommerce table.shop_table th{border-color:var(--line-soft)} .woocommerce-tabs .panel,.woocommerce .woocommerce-tabs ul.tabs li{background:var(--panel)!important;border-color:var(--line-soft)!important} .woocommerce .woocommerce-tabs ul.tabs li a{color:var(--text)!important} .woocommerce-info,.woocommerce-message,.woocommerce-error{background:var(--panel);color:var(--text)} /* ============ REVEAL / MOTION ============ */ /* Só anima quando o JS confirmou presença (html.js). Sem JS — ou com JS quebrado por otimizadores/cache — tudo permanece visível. */ html.js .reveal{opacity:0;transform:translateY(26px);transition:opacity .8s cubic-bezier(.22,1,.36,1),transform .8s cubic-bezier(.22,1,.36,1)} html.js .reveal.in{opacity:1;transform:none} .reveal-d1{transition-delay:.08s}.reveal-d2{transition-delay:.16s}.reveal-d3{transition-delay:.24s} .reveal-d4{transition-delay:.32s}.reveal-d5{transition-delay:.4s} @media (prefers-reduced-motion:reduce){ *,*::before,*::after{animation-duration:.001s!important;transition-duration:.001s!important;scroll-behavior:auto!important} .reveal{opacity:1;transform:none} } @media (max-width:767px){ .sec{padding:68px 0} }