/* ============================================================ MOTION — primitivos reutilizáveis de movimento e interação. Todos respeitam prefers-reduced-motion no bloco final do arquivo. ============================================================ */ /* ---------- REVEAL (extraído, idêntico nas 3 páginas-fonte) ---------- */ .reveal{opacity:0; transform:translateY(24px); transition:opacity .7s ease, transform .7s ease;} .reveal.in{opacity:1; transform:translateY(0);} .stagger-item{opacity:0; transform:translateY(14px); transition:opacity .55s ease, transform .55s ease;} .stagger-item.in{opacity:1; transform:translateY(0);} /* ---------- HOTSPOT ---------- Substitui as 3 implementações quase-idênticas que existiam (.cam3d-tag em Videotelemetria, .sp-wow-tag em Videotelemetria, .sp-heavy-tag em Telemetria). Uma manutenção, N usos. Uso:
Localização e geofencing
O posicionamento (top/left/right/bottom) é inline por natureza — cada foto tem composição própria, não faz sentido tokenizar isso. */ .hotspot{ position:absolute; z-index:2; display:inline-flex; align-items:center; gap:7px; background:rgba(18,14,10,.55); backdrop-filter:blur(10px); -webkit-backdrop-filter:blur(10px); border:1px solid rgba(255,255,255,.22); border-radius:999px; padding:8px 14px; font-size:12.5px; font-weight:600; color:#fff; white-space:nowrap; transition:background .25s ease, border-color .25s ease, transform .25s ease; } .hotspot-dot{width:6px; height:6px; border-radius:999px; background:var(--v-accent, var(--pink)); flex-shrink:0;} .hotspot:hover{background:rgba(var(--v-accent-rgb, 236,26,94),.35); border-color:rgba(var(--v-accent-rgb, 236,26,94),.6); transform:translateY(-2px);} /* ---------- JOURNEY (jornada com ativação de nó no scroll) ---------- Substitui a técnica portada manualmente 2x (Videotelemetria e Telemetria). Estrutura:
01

Verbo

Texto.

... (2 a 6 steps)
O timing de cada nó é calculado automaticamente pelo JS a partir do número de .journey-step (ver shared.js) — não hardcodar delay inline. */ .journey-track{position:relative;} .journey-progress{ position:absolute; top:0; left:0; height:1.5px; background:var(--v-accent, var(--pink)); width:0; transition:width 1.5s cubic-bezier(.22,1,.36,1); z-index:1; } .journey-track.in .journey-progress{width:100%;} .journey-steps{display:grid; grid-template-columns:repeat(var(--journey-cols, 5), 1fr); gap:18px;} .journey-step{ position:relative; display:flex; flex-direction:column; gap:12px; padding-top:18px; border-top:1.5px solid rgba(var(--v-accent-rgb, 236,26,94),.3); } .journey-step::before{ content:""; position:absolute; top:-5px; left:0; width:9px; height:9px; border-radius:999px; background:var(--v-accent, var(--pink)); box-shadow:0 0 0 4px rgba(var(--v-accent-rgb, 236,26,94),.22); transform:scale(1); transition:transform .45s cubic-bezier(.22,1,.36,1) var(--jd, 0s), box-shadow .45s ease var(--jd, 0s); } .journey-step:last-child::after{ content:""; position:absolute; top:-4px; right:0; width:7px; height:7px; border-radius:999px; background:var(--lavender); transform:scale(1); transition:transform .45s cubic-bezier(.22,1,.36,1) 1.5s, box-shadow .45s ease 1.5s; } .journey-step .num{font-family:'Switzer',sans-serif; font-weight:900; font-size:26px; color:var(--v-accent-soft, var(--lavender)); transition:color .4s ease var(--jd, 0s);} .journey-step h3{font-size:16px; font-weight:800; line-height:1.3; letter-spacing:.5px; text-transform:uppercase; transition:color .4s ease var(--jd, 0s);} .journey-step p{font-size:13px; color:rgba(255,255,255,.75); line-height:1.5;} .journey-track.in .journey-step::before{transform:scale(1.7); box-shadow:0 0 0 6px rgba(var(--v-accent-rgb, 236,26,94),.32), 0 0 16px 2px rgba(var(--v-accent-rgb, 236,26,94),.55);} .journey-track.in .journey-step:last-child::after{transform:scale(1.7); box-shadow:0 0 0 6px rgba(159,140,233,.3), 0 0 16px 2px rgba(159,140,233,.55);} .journey-track.in .journey-step .num{color:var(--v-accent, var(--pink));} .journey-track.in .journey-step h3{color:var(--v-accent-soft, var(--lavender));} /* ---------- GLASS PANEL (utilitário de composição) ---------- Cartão de vidro usado em copy-cards sobre foto full-bleed (ex: painel de texto sobre a seção "Telemetria além da estrada"). */ .glass-panel{ background:rgba(18,14,10,.5); backdrop-filter:blur(18px) saturate(160%); -webkit-backdrop-filter:blur(18px) saturate(160%); border:1px solid rgba(255,255,255,.14); border-radius:24px; padding:32px 36px; color:#fff; } /* Achado ao reusar .journey-track pela 1ª vez fora de onde nasceu (Sobre): a promoção pra motion.css preservou o timing automático mas esqueceu o colapso responsivo que cada versão hardcoded anterior (.sp-steps em Videotelemetria/Telemetria) já tinha individualmente. Corrigido na fonte — qualquer página que use .journey-track a partir de agora já herda isso, não precisa redeclarar por página. */ @media (max-width:900px){ .journey-steps{grid-template-columns:repeat(2,1fr); row-gap:28px;} } @media (max-width:640px){ .journey-steps{grid-template-columns:1fr;} } @media (prefers-reduced-motion: reduce){ .reveal, .stagger-item, .journey-progress, .journey-step::before, .journey-step:last-child::after, .journey-step .num, .journey-step h3{ transition:none !important; } } /* ============================================================ DISCOVERY POINTS — hotspot como investigação, não tooltip Régua: Dor → Revelação → Inteligência → Resultado → Por que Logos. Cada ponto é parte da cena (ancorado numa coordenada da IMAGEM, não da seção — o JS compensa o object-fit:cover). Ao abrir: a cena escurece em volta do ponto, o card de texto recua e o painel de vidro nasce de uma linha que sai do próprio ponto. Conteúdo em 4 camadas fixas: o que você vê → o que passa despercebido (a revelação, em destaque) → o que a Logos lê → o que isso muda. Contador recompensa quem investiga todos os pontos com a síntese da cena. Uso: container com [data-dsc] e data-dsc-img (seletor da ); .dsc-point (button) com data-ix/data-iy (0–1 na imagem) e aria-controls apontando para o .dsc-panel correspondente. ============================================================ */ [data-dsc]{--sx:50%; --sy:50%;} .dsc-spot{position:absolute; inset:0; z-index:2; pointer-events:none; opacity:0; transition:opacity .6s ease; background:radial-gradient(circle at var(--sx) var(--sy), rgba(4,8,12,0) 0, rgba(4,8,12,0) 70px, rgba(4,8,12,.62) 260px, rgba(4,8,12,.72) 100%);} [data-dsc].dsc-open .dsc-spot{opacity:1;} /* cenas em hero: data-dsc-hud="right" tira o contador do caminho do texto/breadcrumb; --dsc-hud-top afasta da navbar fixa */ [data-dsc][data-dsc-hud="right"] .dsc-hud{left:auto; right:80px;} [data-dsc].dsc-open .dsc-recede{opacity:.08; transform:translateY(8px); pointer-events:none; transition:opacity .5s ease, transform .5s ease;} .dsc-recede{transition:opacity .5s ease, transform .5s ease;} .dsc-hud{position:absolute; z-index:4; top:var(--dsc-hud-top,44px); left:80px; display:flex; align-items:center; gap:12px; flex-wrap:wrap; max-width:calc(100% - 160px); padding:10px 16px; border-radius:999px; background:rgba(6,12,16,.55); border:1px solid rgba(255,255,255,.16); backdrop-filter:blur(12px); -webkit-backdrop-filter:blur(12px); color:#fff; font-size:12.5px;} .dsc-hud-label{font-weight:600; color:rgba(255,255,255,.82);} .dsc-hud-count{font-weight:800; font-variant-numeric:tabular-nums; color:var(--v-accent);} .dsc-hud-done{display:none; font-weight:600; color:#fff;} [data-dsc].dsc-complete .dsc-hud{background:rgba(var(--v-accent-rgb),.22); border-color:rgba(var(--v-accent-rgb),.55);} [data-dsc].dsc-complete .dsc-hud-label,[data-dsc].dsc-complete .dsc-hud-count{display:none;} [data-dsc].dsc-complete .dsc-hud-done{display:inline;} .dsc-point{--pt-color:var(--v-accent); position:absolute; z-index:6; /* acima do painel: outros pontos seguem clicáveis mesmo quando o painel encosta neles */ left:0; top:0; width:38px; height:38px; margin:-19px 0 0 -19px; border-radius:999px; cursor:pointer; display:flex; align-items:center; justify-content:center; padding:0; color:#fff; font:800 11px/1 'Switzer',sans-serif; letter-spacing:.3px; background:rgba(6,12,16,.45); border:1.5px solid rgba(255,255,255,.9); backdrop-filter:blur(6px); -webkit-backdrop-filter:blur(6px); transition:transform .3s cubic-bezier(.22,1,.36,1), background .3s ease, border-color .3s ease, opacity .4s ease;} .dsc-point::after{content:""; position:absolute; inset:-1.5px; border-radius:999px; border:1.5px solid rgba(255,255,255,.7); animation:dscPing 2.8s ease-out infinite;} .dsc-point:hover,.dsc-point:focus-visible{transform:scale(1.12); background:color-mix(in srgb, var(--pt-color) 55%, transparent); outline:none;} .dsc-point:focus-visible{box-shadow:0 0 0 4px rgba(255,255,255,.35);} .dsc-point.is-seen{border-color:var(--pt-color);} .dsc-point.is-seen::after{animation:none; opacity:0;} .dsc-point[aria-expanded="true"]{background:var(--pt-color); border-color:#fff; transform:scale(1.15);} .dsc-point[aria-expanded="true"]::after{animation:none; opacity:0;} [data-dsc].dsc-open .dsc-point:not([aria-expanded="true"]){opacity:.35;} @keyframes dscPing{0%{transform:scale(1); opacity:.75;} 70%,100%{transform:scale(1.9); opacity:0;}} .dsc-line{position:absolute; z-index:4; height:1.5px; background:linear-gradient(90deg, rgba(255,255,255,.85), rgba(var(--v-accent-rgb),.9)); transform-origin:left center; transform:scaleX(0); transition:transform .35s cubic-bezier(.22,1,.36,1); pointer-events:none;} .dsc-line.to-left{transform-origin:right center;} [data-dsc].dsc-open .dsc-line{transform:scaleX(1);} /* ============================================================ FLOATING GLASS — linguagem de interface do ecossistema Logos Não é template: padroniza a SENSAÇÃO, não o layout. O vidro nasce do ponto que foi acionado (transform-origin no lado do ponto), pertence à cena e apresenta informação contextual. O conteúdo é livre: investigação em camadas, uma frase forte, uma imagem, um dado, uma timeline... Regras da linguagem: - nasce perto do que foi acionado; nunca alimenta uma área fixa distante; - superfície neutra e limpa; sem emoji, sem ícone ilustrativo; - marcadores de leitura = glyphs outline finos (.fg-glyph), orientação cognitiva, não decoração; - a única cor forte é o azul institucional, reservado ao olhar da Logos (.fg-logos / camada "O que a Logos identifica"); - o conteúdo entra em cascata curta, para a estrutura ser lida antes do texto. Peças: .fg (superfície) · .fg-close · .fg-kicker · .fg-label + .fg-glyph · .fg-lead (frase forte) · .fg-body · .fg-logos · .fg-media · .fg-note ============================================================ */ .fg{position:absolute; z-index:5; color:#fff; border-radius:18px; background:rgba(9,14,19,.76); border:1px solid rgba(255,255,255,.13); box-shadow:0 30px 70px -30px rgba(0,0,0,.72), inset 0 1px 0 rgba(255,255,255,.06); backdrop-filter:blur(22px) saturate(150%); -webkit-backdrop-filter:blur(22px) saturate(150%); opacity:0; transform:scale(.93); visibility:hidden; transition:opacity .32s ease .1s, transform .45s cubic-bezier(.22,1,.36,1) .1s, visibility 0s linear .6s;} .fg:not(.is-open){pointer-events:none;} /* durante a saída, o vidro já não captura toques */ .fg.is-open{opacity:1; transform:scale(1); visibility:visible; transition:opacity .32s ease .1s, transform .45s cubic-bezier(.22,1,.36,1) .1s, visibility 0s;} .fg.from-right{transform-origin:left 44px;} .fg.from-left{transform-origin:right 44px;} .fg.from-below{transform-origin:50% 0;} .fg.from-above{transform-origin:50% 100%;} .fg-close{position:absolute; top:12px; right:12px; z-index:2; width:28px; height:28px; border-radius:999px; border:1px solid rgba(255,255,255,.16); background:rgba(9,14,19,.4); color:rgba(255,255,255,.7); font-size:16px; line-height:1; cursor:pointer;} .fg-close:hover{color:#fff; border-color:rgba(255,255,255,.4);} .fg-kicker{display:block; font-size:11.5px; font-weight:700; letter-spacing:.9px; text-transform:uppercase; color:rgba(255,255,255,.6); margin:0 40px 14px 0;} /* cor de origem: o painel herda a cor do ponto que o abriu (padrão: acento da vertical). Os títulos de camada usam essa cor — continuidade entre ação e resposta (UX, não estética). Exceção deliberada: a camada da Logos fica no azul institucional. */ .fg{--fg-origin:var(--v-accent, #ffffff);} .fg-label{display:flex; align-items:center; gap:8px; font-size:10.5px; font-weight:700; letter-spacing:.7px; text-transform:uppercase; margin-bottom:7px; color:color-mix(in srgb, var(--fg-origin) 72%, #ffffff);} .fg-glyph{width:17px; height:17px; flex-shrink:0; fill:none; stroke:currentColor; stroke-width:1.1; stroke-linecap:round; stroke-linejoin:round;} .fg-glyph .fg-glyph-ring{stroke-opacity:.5;} .fg-lead{font-size:17px; line-height:1.4; font-weight:600; letter-spacing:-.2px; color:#fff;} .fg-body{font-size:13.5px; line-height:1.6; color:rgba(255,255,255,.76);} .fg-logos{padding-left:13px; border-left:1.5px solid var(--logos-blue);} .fg-logos .fg-label{color:var(--logos-blue-ink);} .fg-logos p{color:#fff;} .fg-media{position:relative; overflow:hidden; border-radius:12px; background:rgba(255,255,255,.04);} .fg-media img{display:block; width:100%; height:100%; object-fit:cover;} .fg-note{display:block; font-size:10.5px; color:rgba(255,255,255,.38); margin-top:8px;} .fg.is-open > :not(.fg-close){animation:fgIn .5s ease both;} .fg.is-open > :nth-child(2){animation-delay:.18s;} .fg.is-open > :nth-child(3){animation-delay:.32s;} .fg.is-open > :nth-child(4){animation-delay:.5s;} .fg.is-open > :nth-child(5){animation-delay:.7s;} .fg.is-open > :nth-child(6){animation-delay:.9s;} .fg.is-open > :nth-child(n+7){animation-delay:1.05s;} @keyframes fgIn{from{opacity:0; transform:translateY(6px);} to{opacity:1; transform:none;}} /* formato "investigação em camadas" (Discovery Points) — um dos formatos da linguagem */ .dsc-panel{left:0; top:0; width:min(380px, 42vw); max-height:calc(100% - 48px); overflow:auto; padding:24px 24px 22px;} .dsc-step{padding:12px 0; border-top:1px solid rgba(255,255,255,.08);} .dsc-kicker + .dsc-step{border-top:none; padding-top:0;} .dsc-step p{font-size:13.5px; line-height:1.55; color:rgba(255,255,255,.78);} .dsc-step.is-blind p{font-size:15.5px; line-height:1.5; font-weight:500; color:#fff;} /* a revelação: hierarquia tipográfica, não cor */ .dsc-step.is-logos{border-top:none; margin-top:4px; padding:12px 0 12px 13px; border-left:1.5px solid var(--logos-blue); background:linear-gradient(90deg, rgba(var(--logos-blue-rgb),.10), rgba(var(--logos-blue-rgb),0) 70%);} .dsc-step.is-logos .fg-label{color:var(--logos-blue-ink);} .dsc-step.is-logos p{color:#fff;} .dsc-step.is-logos + .dsc-step{border-top:none;} .dsc-step.is-change p{color:#fff;} @media (prefers-reduced-motion:reduce){ .dsc-point::after{animation:none;} .fg,.dsc-line,.dsc-spot{transition:none !important;} .fg.is-open > *{animation:none !important;} } @media (max-width:760px){ /* data-dsc-mobile="band": no celular a imagem vira uma faixa própria (onde os pontos ficam visíveis e tocáveis) e o conteúdo da cena desce para baixo dela. Ajustes por cena: --dsc-band (altura) e --dsc-focus (object-position). */ /* --dsc-band-top: em hero, a faixa começa abaixo da navbar fixa (ex.: 92px) */ [data-dsc][data-dsc-mobile="band"]{display:block; min-height:0 !important; padding-top:calc(var(--dsc-band-top,0px) + var(--dsc-band,92vw));} [data-dsc][data-dsc-mobile="band"] > [data-dsc-media]{top:var(--dsc-band-top,0px); height:var(--dsc-band,92vw); bottom:auto; object-position:var(--dsc-focus,50% 50%);} [data-dsc][data-dsc-mobile="band"] > [data-dsc-media] ~ [class*="wash"]{top:var(--dsc-band-top,0px); height:var(--dsc-band,92vw); bottom:auto;} [data-dsc][data-dsc-mobile="band"] .dsc-hud{top:calc(var(--dsc-band-top,0px) + 14px); left:16px; right:auto;} [data-dsc][data-dsc-mobile="band"] .dsc-recede{position:relative; margin:0 !important; max-width:none; border-radius:0; border:none; background:var(--dsc-recede-bg,#0B1518);} .dsc-hud{top:16px; left:16px; max-width:calc(100% - 32px); font-size:11.5px; padding:8px 12px;} .dsc-point{width:32px; height:32px; margin:-16px 0 0 -16px;} .dsc-line{display:none;} .dsc-panel,.fg.fg-sheet{position:fixed; left:12px !important; right:12px; top:auto !important; bottom:12px; width:auto; max-height:72vh; z-index:1200; transform:translateY(24px); background:rgba(8,16,20,.96);} .dsc-panel.is-open,.fg.fg-sheet.is-open{transform:none;} } /* ============================================================ TRILHA DA OPERAÇÃO (.otk) — momento exclusivo de segmento A operação como ela acontece: faixas com trechos num eixo (tempo, etapa ou temperatura). Trechos marcados abrem um Floating Glass ancorado neles; ao investigar todos, a trilha entrega a conclusão. Atmosfera própria: escuro tingido pelo acento do segmento (não repete o off-white + grafite). Conteúdo: src/tracks/.json · renderer: build_helpers/track.py ============================================================ */ .otk{--otk-rgb:var(--v-accent-rgb, 0,140,222); --otk-risk:255,138,122; position:relative; color:#fff; padding:110px 80px 96px; overflow:hidden; background:radial-gradient(120% 90% at 85% 0%, rgba(var(--otk-rgb),.22), rgba(var(--otk-rgb),0) 60%), linear-gradient(180deg, color-mix(in srgb, var(--v-accent-deep, #10264A) 46%, #070B10), #070B10 88%);} .otk-wrap{max-width:1180px; margin:0 auto;} .otk-head{max-width:760px; margin-bottom:44px;} .otk-kicker{display:inline-block; font-size:12px; font-weight:700; letter-spacing:1px; text-transform:uppercase; color:color-mix(in srgb, rgb(var(--otk-rgb)) 70%, #fff); margin-bottom:16px;} .otk-head h2{font-size:clamp(30px, 3.4vw, 44px); line-height:1.12; letter-spacing:-.8px; font-weight:700; margin-bottom:18px;} .otk-head p{font-size:17px; line-height:1.6; color:rgba(255,255,255,.72);} .otk-board{position:relative; padding:28px 28px 22px; border-radius:22px; border:1px solid rgba(255,255,255,.09); background:linear-gradient(180deg, rgba(255,255,255,.045), rgba(255,255,255,.015));} .otk-hud{display:flex; justify-content:flex-end; gap:10px; align-items:baseline; font-size:11.5px; letter-spacing:.6px; text-transform:uppercase; color:rgba(255,255,255,.5); margin-bottom:8px;} .otk-count{color:#fff; font-weight:700; letter-spacing:.4px;} .otk-axis{position:relative; margin:0 0 6px 188px; height:30px;} .otk-axis-rail{position:absolute; inset:0 0 auto 0; height:18px; border-bottom:1px solid rgba(255,255,255,.14);} .otk-tick{position:absolute; bottom:-1px; transform:translateX(-50%); padding-bottom:7px; font-size:11px; color:rgba(255,255,255,.55); white-space:nowrap;} .otk-tick::after{content:""; position:absolute; left:50%; bottom:-3px; width:1px; height:7px; background:rgba(255,255,255,.3);} .otk-tick:first-child{transform:none;} .otk-tick:first-child::after{left:0;} .otk-tick:last-child:not(:first-child){transform:translateX(-100%);} .otk-tick:last-child:not(:first-child)::after{left:auto; right:0;} .otk-axis-title{position:absolute; left:0; top:22px; font-size:10.5px; letter-spacing:.6px; text-transform:uppercase; color:rgba(255,255,255,.35);} .otk-lane{display:grid; grid-template-columns:172px 1fr; gap:16px; align-items:center; padding:10px 0;} .otk-lane + .otk-lane{border-top:1px dashed rgba(255,255,255,.07);} .otk-lane-label{font-size:14px; font-weight:600; color:#fff; line-height:1.25;} .otk-lane-label small{display:block; font-size:11.5px; font-weight:400; color:rgba(255,255,255,.5); margin-top:2px;} .otk-bar{position:relative; height:46px; border-radius:10px; background:rgba(255,255,255,.03);} .otk-bar.has-window{margin-top:26px;} .otk-seg{position:absolute; top:4px; bottom:4px; border-radius:7px; display:flex; align-items:center; padding:0 10px; min-width:0; overflow:hidden; font:inherit; font-size:12px; color:#fff; border:none; text-align:left; transform-origin:left center; transform:scaleX(0); transition:transform .7s cubic-bezier(.22,1,.36,1), box-shadow .25s ease, filter .25s ease;} .otk-lane.in .otk-seg{transform:scaleX(1);} .otk-seg-label{white-space:nowrap; overflow:hidden; text-overflow:ellipsis;} .otk-seg.is-narrow .otk-seg-label{display:none;} .k-work{background:rgba(var(--otk-rgb),.82);} .k-move{background:rgba(var(--otk-rgb),.3); box-shadow:inset 0 0 0 1px rgba(var(--otk-rgb),.45);} .k-wait{background:repeating-linear-gradient(135deg, rgba(255,255,255,.1) 0 5px, rgba(255,255,255,.03) 5px 10px); color:rgba(255,255,255,.7);} .k-risk{background:repeating-linear-gradient(135deg, rgba(var(--otk-risk),.42) 0 5px, rgba(var(--otk-risk),.14) 5px 10px); box-shadow:inset 0 0 0 1px rgba(var(--otk-risk),.7);} .k-range{background:linear-gradient(90deg, rgba(var(--otk-rgb),.55), rgba(var(--otk-rgb),.85)); box-shadow:inset 0 0 0 1px rgba(255,255,255,.25);} .k-owner{background:transparent; box-shadow:inset 0 0 0 1px rgba(255,255,255,.22); color:rgba(255,255,255,.75); justify-content:center;} .otk-seg.has-fg{cursor:pointer; padding-left:30px;} .otk-seg.has-fg.is-narrow{padding:0; justify-content:center;} .otk-mark{position:absolute; left:9px; top:50%; width:13px; height:13px; margin-top:-6.5px; border-radius:50%; border:1.2px solid #fff; flex-shrink:0;} .otk-mark::after{content:""; position:absolute; inset:3px; border-radius:50%; background:#fff;} .otk-seg.has-fg.is-narrow .otk-mark{left:50%; margin-left:-6.5px;} .otk-seg.has-fg::before{content:""; position:absolute; left:15.5px; top:50%; width:0; height:0; border-radius:50%; box-shadow:0 0 0 0 rgba(255,255,255,.5); animation:otkPulse 2.4s ease-out infinite;} .otk-seg.has-fg.is-narrow::before{left:50%;} .otk-seg.has-fg.is-seen::before{animation:none;} .otk-seg.has-fg.is-seen .otk-mark::after{background:transparent;} .otk-seg.has-fg:hover,.otk-seg.has-fg:focus-visible{filter:brightness(1.18); box-shadow:inset 0 0 0 1.5px #fff; outline:none;} .otk-seg.has-fg[aria-expanded="true"]{box-shadow:inset 0 0 0 1.5px #fff, 0 0 0 4px rgba(255,255,255,.12); z-index:2;} @keyframes otkPulse{0%{box-shadow:0 0 0 0 rgba(255,255,255,.45);} 70%{box-shadow:0 0 0 12px rgba(255,255,255,0);} 100%{box-shadow:0 0 0 0 rgba(255,255,255,0);}} .otk-board.fg-open .otk-seg:not([aria-expanded="true"]){filter:saturate(.5) brightness(.75);} .otk-window{position:absolute; top:-22px; bottom:-4px; border:1px solid rgba(255,255,255,.4); border-bottom:none; border-radius:6px 6px 0 0; pointer-events:none; background:linear-gradient(180deg, rgba(255,255,255,.06), rgba(255,255,255,0));} .otk-window span{position:absolute; left:8px; top:3px; font-size:10.5px; letter-spacing:.5px; text-transform:uppercase; color:rgba(255,255,255,.75); white-space:nowrap;} .otk-legend{display:flex; flex-wrap:wrap; gap:8px 22px; margin:18px 0 0 188px; font-size:12px; color:rgba(255,255,255,.6);} .otk-key{display:inline-flex; align-items:center; gap:8px;} .otk-swatch{display:inline-block; width:22px; height:10px; border-radius:3px;} .otk-swatch.k-window{background:none; border:1px solid rgba(255,255,255,.45); border-bottom:none; border-radius:3px 3px 0 0;} .otk-fg{width:340px; padding:22px 22px 20px; z-index:8;} .otk-fg .fg-lead{margin-bottom:10px;} .otk-fg .fg-body{margin-bottom:14px;} .otk-change{margin-top:14px; padding-top:12px; border-top:1px solid rgba(255,255,255,.08);} .otk-change p,.otk-fg .fg-logos p{font-size:13.5px; line-height:1.55; color:#fff;} .otk-done{max-width:820px; margin:34px 0 0; font-size:clamp(20px, 2.1vw, 26px); line-height:1.35; font-weight:600; letter-spacing:-.3px; min-height:1px; opacity:0; transform:translateY(10px); transition:opacity .6s ease, transform .6s ease;} .otk-done span{border-left:2px solid var(--logos-blue); padding-left:18px; display:block;} .otk.is-complete .otk-done{opacity:1; transform:none;} .otk-note{margin-top:22px; font-size:12px; color:rgba(255,255,255,.4);} .seg-evidence{padding:80px; background:#070B10; color:#fff;} .seg-evidence-wrap{max-width:1180px; margin:0 auto;} @media (prefers-reduced-motion:reduce){ .otk-seg{transform:none !important; transition:none;} .otk-seg.has-fg::before{animation:none;} .otk-done{transition:none;} } @media (max-width:900px){ .otk{padding:84px 24px 72px;} .otk-board{padding:20px 16px 18px;} .otk-axis,.otk-legend{margin-left:0;} .otk-lane{grid-template-columns:1fr; gap:8px;} } @media (max-width:640px){ /* no celular, cada faixa vira uma lista de trechos: a proporção continua visível (barra fina), mas o toque ganha área própria */ .otk-axis{display:none;} .otk-hud{justify-content:flex-start;} .otk-bar{height:auto; background:none; display:flex; flex-direction:column; gap:5px;} .otk-bar.has-window{margin-top:0;} .otk-window{position:relative; top:auto; bottom:auto; left:auto !important; width:auto !important; order:-1; border:none; background:none; padding:0 0 2px;} .otk-window span{position:static; color:rgba(255,255,255,.55);} .otk-seg{position:relative; left:auto !important; width:auto !important; top:auto; bottom:auto; min-height:38px; padding:8px 12px 12px; transform:none;} .otk-seg::after{content:""; position:absolute; left:12px; bottom:5px; height:2px; border-radius:2px; width:calc((100% - 24px) * var(--w) / 100); background:rgba(255,255,255,.55);} .otk-seg.is-narrow .otk-seg-label{display:inline;} .otk-seg.has-fg.is-narrow{padding:8px 12px 12px 30px; justify-content:flex-start;} .otk-seg.has-fg.is-narrow .otk-mark{left:9px; margin-left:0;} .otk-seg.has-fg.is-narrow::before{left:15.5px;} .otk-seg:not(.has-fg):not(:has(.otk-seg-label)){display:none;} .otk-legend{display:none;} .otk-lane{opacity:1;} } /* ============================================================ FICHA DA SOLUÇÃO (.ficha) — camada de CONSULTA A segunda leitura de cada página: objetiva, para quem já está comparando soluções. Não é narrativa nem experiência; é a seção de especificações de um produto premium. Superfície clara e calma, tipografia de tabela técnica, índice fixo à esquerda. Conteúdo: src/specs/*.json · build_helpers/specs.py ============================================================ */ .ficha{--ficha-accent:var(--v-accent, var(--logos-blue)); background:#F4F5F7; color:var(--chumbo); padding:104px 80px 96px; scroll-margin-top:80px;} .ficha-wrap{max-width:1220px; margin:0 auto; display:grid; grid-template-columns:minmax(260px, 340px) 1fr; gap:72px; align-items:start;} .ficha-head{position:sticky; top:112px;} .ficha-kicker{display:inline-flex; align-items:center; gap:10px; font-size:11.5px; font-weight:700; letter-spacing:1.1px; text-transform:uppercase; color:rgba(36,36,48,.55); margin-bottom:16px;} .ficha-kicker::before{content:""; width:18px; height:1.5px; background:var(--ficha-accent);} .ficha-head h2{font-size:clamp(26px, 2.6vw, 34px); line-height:1.15; letter-spacing:-.6px; font-weight:700; margin-bottom:14px;} .ficha-head p{font-size:15px; line-height:1.6; color:var(--ink);} .ficha-index{display:flex; flex-direction:column; gap:2px; margin-top:28px; border-left:1px solid rgba(36,36,48,.12);} .ficha-index a{font-size:13.5px; color:rgba(36,36,48,.62); padding:6px 0 6px 14px; margin-left:-1px; border-left:1.5px solid transparent; transition:color .2s, border-color .2s;} .ficha-index a:hover,.ficha-index a.is-current{color:var(--chumbo); border-left-color:var(--ficha-accent);} .ficha-group{border-top:1px solid rgba(36,36,48,.14); scroll-margin-top:110px;} .ficha-group:last-of-type{border-bottom:1px solid rgba(36,36,48,.14);} .ficha-group summary{list-style:none; display:flex; align-items:baseline; gap:14px; padding:22px 0 18px; cursor:pointer;} .ficha-group summary::-webkit-details-marker{display:none;} .ficha-group-n{font-size:11.5px; font-weight:700; letter-spacing:.6px; color:var(--ficha-accent); font-variant-numeric:tabular-nums;} .ficha-group-name{font-size:18px; font-weight:700; letter-spacing:-.2px; flex:1;} .ficha-group-count{font-size:12px; color:rgba(36,36,48,.45); font-variant-numeric:tabular-nums;} .ficha-group-count::after{content:" itens";} .ficha-group summary::after{content:""; width:9px; height:9px; border-right:1.4px solid rgba(36,36,48,.5); border-bottom:1.4px solid rgba(36,36,48,.5); transform:translateY(-3px) rotate(45deg); transition:transform .25s ease; margin-left:6px;} .ficha-group[open] summary::after{transform:translateY(2px) rotate(-135deg);} .ficha-items{display:grid; grid-template-columns:repeat(2, minmax(0,1fr)); gap:0 40px; padding:0 0 26px 40px;} .ficha-item{padding:14px 0; border-top:1px dashed rgba(36,36,48,.12);} .ficha-item:nth-child(-n+2){border-top:none;} .ficha-item dt{font-size:15.5px; font-weight:600; color:var(--chumbo); margin-bottom:4px;} .ficha-item dt a{color:var(--chumbo); text-decoration:none; border-bottom:1px solid rgba(36,36,48,.2);} .ficha-item dt a:hover{border-bottom-color:var(--ficha-accent);} .ficha-item dd{margin:0; font-size:14.5px; line-height:1.55; color:rgba(36,36,48,.68);} /* leitura escaneável: ícone + título curto + 1–2 linhas (glyph fino, mesma linguagem do Floating Glass; cor Logos — a camada "o que a Logos entrega") */ .ficha-item.has-ic{position:relative; padding-left:50px;} .ficha-item .ic-glyph{position:absolute; left:0; top:13px; width:34px; height:34px; color:var(--logos-blue);} .ic-glyph{fill:none; stroke:currentColor; stroke-width:1.05; stroke-linecap:round; stroke-linejoin:round;} .ic-glyph .ic-glyph-ring{stroke-opacity:.32; fill:rgba(0,140,222,.05);} .ficha-item.has-ic dt{min-height:20px;} .ficha-combines{display:flex; flex-wrap:wrap; align-items:center; gap:10px; margin-top:28px; font-size:13px;} .ficha-combines span{color:rgba(36,36,48,.55); margin-right:4px;} .ficha-combines a{padding:7px 14px; border-radius:999px; border:1px solid rgba(36,36,48,.16); color:var(--chumbo); background:#fff; transition:border-color .2s;} .ficha-combines a:hover{border-color:var(--ficha-accent);} .ficha-note{margin-top:22px; font-size:12.5px; line-height:1.55; color:rgba(36,36,48,.5); max-width:640px;} @media (max-width:980px){ .ficha{padding:80px 24px 72px;} .ficha-wrap{grid-template-columns:1fr; gap:28px;} .ficha-head{position:static;} .ficha-index{display:none;} .ficha-items{grid-template-columns:1fr; padding-left:0;} .ficha-item:nth-child(2){border-top:1px dashed rgba(36,36,48,.12);} } /* ===================================================================== PROVA EM CAMPO (.proof) — biblioteca de evidências distribuída Pequenas provas reais no contexto de cada página: indicador, trecho de depoimento, situação da operação, aprendizado, vídeo. O case completo fica em Conteúdos. Peças: .proof-head (kicker + título + link) · .pf-metric · .pf-quote · .pf-fact · .pf-video. Só material real. ===================================================================== */ .proof{--proof-accent:var(--v-accent, var(--logos-blue)); background:#fff; color:var(--chumbo); padding:76px 80px;} .proof-wrap{max-width:1220px; margin:0 auto; display:grid; grid-template-columns:minmax(220px, 300px) 1fr; gap:56px; align-items:start;} .proof-head{position:sticky; top:112px; display:flex; flex-direction:column; gap:14px;} .proof-kicker{display:inline-flex; align-items:center; gap:9px; font-size:11.5px; font-weight:700; letter-spacing:1.1px; text-transform:uppercase; color:var(--logos-blue);} .proof-head h3{font-size:clamp(22px, 2.1vw, 27px); line-height:1.2; letter-spacing:-.4px; font-weight:700; color:var(--chumbo);} .pf-link{font-size:13.5px; font-weight:600; color:var(--chumbo); text-decoration:none; border-bottom:1px solid rgba(36,36,48,.2); align-self:flex-start; padding-bottom:2px; transition:border-color .2s;} .pf-link:hover{border-bottom-color:var(--logos-blue);} .proof-items{display:grid; grid-template-columns:repeat(3, minmax(0,1fr)); gap:16px; align-items:stretch;} .proof-items.n1{grid-template-columns:1fr;} .proof-items.n2{grid-template-columns:repeat(2, minmax(0,1fr));} .pf-item{background:#F4F5F7; border-radius:16px; padding:24px; margin:0; display:flex; flex-direction:column; gap:6px;} .pf-item small{margin-top:auto; padding-top:12px; font-size:11px; font-weight:600; letter-spacing:.6px; text-transform:uppercase; color:rgba(36,36,48,.64);} .pf-metric strong{font-size:40px; line-height:1; font-weight:800; letter-spacing:-1.2px; color:var(--chumbo); font-variant-numeric:tabular-nums;} .pf-metric span{font-size:14.5px; font-weight:600; line-height:1.35; color:var(--chumbo); margin-top:6px;} .pf-metric em{font-style:normal; font-size:13px; color:rgba(36,36,48,.6);} .pf-quote{grid-column:span 2; background:#040434; color:#E6EFFA; padding:28px 30px; gap:18px;} .proof-items.n1 .pf-quote,.proof-items.n2 .pf-quote{grid-column:auto;} .pf-quote blockquote{margin:0; font-size:17px; line-height:1.55; font-weight:500; letter-spacing:-.1px; color:#F7F7F7;} .pf-quote figcaption{margin-top:auto; display:flex; flex-direction:column; gap:2px; font-size:13px;} .pf-quote figcaption b{color:#fff; font-weight:700;} .pf-quote figcaption span{color:#9FB3D4;} .pf-fact{flex-direction:row; gap:14px; align-items:flex-start;} .pf-fact > div{display:flex; flex-direction:column; gap:5px; height:100%;} .pf-fact .ic-glyph{width:34px; height:34px; flex-shrink:0; color:var(--logos-blue);} .pf-tag{font-size:10.5px; font-weight:700; letter-spacing:.9px; text-transform:uppercase; color:var(--logos-blue);} .pf-fact b{font-size:15px; line-height:1.35; color:var(--chumbo);} .pf-fact p{font-size:13.5px; line-height:1.55; color:rgba(36,36,48,.7);} .pf-video{grid-row:span 2; padding:12px; background:#040434; color:#E6EFFA;} .pf-video video{width:100%; aspect-ratio:9/16; max-height:560px; object-fit:cover; border-radius:10px; background:#000; display:block;} .pf-video figcaption{padding:10px 6px 4px; display:flex; flex-direction:column; gap:2px; font-size:13px;} .pf-video figcaption b{color:#fff;} .pf-video figcaption span{color:#9FB3D4;} @media (max-width:1100px){ .proof-items{grid-template-columns:repeat(2, minmax(0,1fr));} } @media (max-width:900px){ .proof{padding:60px 24px;} .proof-wrap{grid-template-columns:1fr; gap:24px;} .proof-head{position:static;} .proof-items,.proof-items.n2{grid-template-columns:1fr;} .pf-quote{grid-column:auto;} .pf-video{grid-row:auto; max-width:360px;} } .proof.has-video .proof-items{grid-template-columns:minmax(0,300px) minmax(0,1fr); grid-auto-rows:auto;} .proof.has-video .pf-video{grid-row:span 3;} @media (max-width:900px){ .proof.has-video .proof-items{grid-template-columns:1fr;} .proof.has-video .pf-video{grid-row:auto;} } .proof[data-kinds="quote"] .proof-items{grid-template-columns:repeat(2, minmax(0,1fr));} .proof[data-kinds="quote"] .pf-quote{grid-column:auto;} .proof[data-kinds="quote"] .pf-quote:first-child{grid-column:1 / -1;} .proof[data-kinds="quote"] .pf-quote:first-child blockquote{font-size:20px;} @media (max-width:900px){ .proof[data-kinds="quote"] .proof-items{grid-template-columns:1fr;} } /* ===================================================================== VEJA TAMBÉM (.seealso) — única navegação cruzada entre soluções. Sempre no fim da página, antes do CTA final (src/build_helpers/seealso.py). ===================================================================== */ .seealso{background:#F4F5F7; padding:72px 80px; color:var(--chumbo);} .seealso-wrap{max-width:1220px; margin:0 auto;} .seealso h2{font-size:clamp(22px, 2.2vw, 28px); font-weight:700; letter-spacing:-.4px; margin-bottom:24px;} .seealso-grid{display:grid; grid-template-columns:repeat(4, minmax(0,1fr)); gap:16px;} .seealso-card{position:relative; display:flex; flex-direction:column; gap:8px; padding:22px 22px 44px; border-radius:16px; background:#fff; border:1px solid rgba(36,36,48,.08); color:var(--chumbo); text-decoration:none; transition:transform .2s ease, box-shadow .2s ease, border-color .2s ease;} .seealso-card b{font-size:17px; font-weight:700; letter-spacing:-.2px;} .seealso-card span{font-size:13.5px; line-height:1.55; color:rgba(36,36,48,.68);} .seealso-card i{position:absolute; left:22px; bottom:16px; font-style:normal; color:var(--logos-blue); transition:transform .2s ease;} .seealso-card:hover,.seealso-card:focus-visible{transform:translateY(-3px); box-shadow:0 18px 36px -24px rgba(36,36,48,.4); border-color:rgba(0,140,222,.35);} .seealso-card:hover i{transform:translateX(4px);} @media (max-width:1100px){ .seealso-grid{grid-template-columns:repeat(2, minmax(0,1fr));} } @media (max-width:640px){ .seealso{padding:56px 24px;} .seealso-grid{grid-template-columns:1fr;} } /* ============================================================ CAMADA DE EXPERIÊNCIA — acabamento de comportamento do sistema existente. Nada novo de linguagem: dá tempo, resposta e profundidade aos componentes que já existem. Regra: rápido e quase imperceptível; o que é "momento" fica na Cidade (Soluções) e na Torre de Controle (Videotelemetria). ============================================================ */ :root{--ease-out:cubic-bezier(.22,1,.36,1); --ease-soft:cubic-bezier(.33,.8,.3,1);} /* REVEAL: curva editorial (desacelera longa), deslocamento menor. O JS escalona automaticamente os elementos que entram juntos (título → texto → imagem). */ .reveal{transform:translateY(18px); transition:opacity .8s var(--ease-soft), transform .9s var(--ease-out);} .stagger-item{transition:opacity .6s var(--ease-soft), transform .7s var(--ease-out);} /* mídia dentro de um wrapper com reveal: slow push-in ao entrar */ .reveal[class*="imgwrap"]{overflow:hidden;} .reveal[class*="imgwrap"] img{transform:scale(1.06); transition:transform 1.8s var(--ease-out);} .reveal.in[class*="imgwrap"] img{transform:scale(1);} /* BOTÕES E LINKS: seta acompanha a intenção; pressão física no clique */ .arr{display:inline-block; transition:transform .3s var(--ease-out);} a:hover > .arr, button:hover > .arr, a:focus-visible > .arr, a:hover .arr{transform:translateX(3px);} .primary:active,.secondary:active,.cta-nav:active,.dsc-cta:active{transform:translateY(0) scale(.98);} .cta-nav{transition:background .25s ease, transform .25s var(--ease-out);} .cta-nav:hover{transform:translateY(-1px);} :where(a, button, summary, [tabindex]):focus-visible{outline:2px solid rgba(0,140,222,.85); outline-offset:3px; border-radius:6px;} .dsc-point:focus-visible{outline:none;} /* CARDS: uma só física de elevação para todos os cards navegáveis */ html :is(.sol-card,.seh-card,.oq-card,.sp-seg-card,.sp-cont-card,.sp-pil-card,.gf-eco-card,.seealso-card,.ch-case,.ch-format-card,.seg-cap-card,.seg-related-card,.stub-card,.gf-trust-card){ transition:opacity .8s var(--ease-soft), transform .5s var(--ease-out), box-shadow .5s var(--ease-out), border-color .3s ease, background .3s ease;} @media (hover:hover){ html :is(.ch-case,.ch-format-card,.seg-cap-card,.seg-related-card,.gf-trust-card,.sp-cont-card):hover{transform:translateY(-3px); box-shadow:0 22px 44px -28px rgba(20,24,34,.38);} } /* MENU: dropdown desce com cascata curta dos itens */ .nav-sub{transition:opacity .22s ease, transform .3s var(--ease-out), visibility 0s linear .22s;} .has-sub:hover .nav-sub,.has-sub:focus-within .nav-sub,.has-sub.open .nav-sub{transition:opacity .22s ease, transform .3s var(--ease-out);} @media (min-width:1025px){ .nav-sub > a{opacity:0; transform:translateY(-3px); transition:opacity .25s ease, transform .3s var(--ease-out), background .15s ease;} .has-sub:hover .nav-sub > a,.has-sub:focus-within .nav-sub > a,.has-sub.open .nav-sub > a{opacity:1; transform:none;} .nav-sub > a:nth-child(2){transition-delay:.03s;} .nav-sub > a:nth-child(3){transition-delay:.06s;} .nav-sub > a:nth-child(4){transition-delay:.09s;} .nav-sub > a:nth-child(5){transition-delay:.12s;} .nav-sub > a:nth-child(6){transition-delay:.15s;} .nav-sub > a:nth-child(7){transition-delay:.18s;} .nav-sub > a:nth-child(n+8){transition-delay:.2s;} .nav-sub > a:hover{transition-delay:0s;} } .nav-link{transition:color .2s ease;} /* ---------- HOTSPOTS: a imagem se anuncia explorável ---------- 1) entrada progressiva dos pontos quando a cena entra na tela; 2) hover = o ponto reage, a cena "espia" (luz em volta do ponto) e um rótulo efêmero de vidro diz o que há ali — nunca permanente; 3) clique = a linha nasce do ponto e o Floating Glass entra pelo lado dela. */ [data-dsc].dsc-armed:not(.dsc-in) .dsc-point{opacity:0; transform:scale(.4);} [data-dsc].dsc-in .dsc-point{animation:dscEnter .8s var(--ease-out) calc(var(--pi,0) * 160ms + 250ms) backwards;} @keyframes dscEnter{0%{opacity:0; transform:scale(.4);} 60%{opacity:1; transform:scale(1.12);} 100%{opacity:1; transform:scale(1);}} [data-dsc].dsc-in .dsc-point::after{animation-delay:calc(var(--pi,0) * 160ms + 900ms);} [data-dsc].dsc-peek .dsc-spot{opacity:.42;} [data-dsc].dsc-open .dsc-spot{opacity:1;} .dsc-point::before{content:attr(data-title); position:absolute; left:calc(100% + 10px); top:50%; white-space:nowrap; pointer-events:none; padding:7px 12px 7px 11px; border-radius:999px; font:600 12px/1 'Switzer',system-ui,sans-serif; letter-spacing:.1px; color:#fff; background:rgba(9,14,19,.72); border:1px solid rgba(255,255,255,.16); box-shadow:inset 2px 0 0 var(--pt-color); backdrop-filter:blur(14px); -webkit-backdrop-filter:blur(14px); opacity:0; transform:translate(-6px,-50%) scale(.9); transform-origin:left center; transition:opacity .25s ease, transform .35s var(--ease-out);} .dsc-point.label-left::before{left:auto; right:calc(100% + 10px); transform-origin:right center; transform:translate(6px,-50%) scale(.9); box-shadow:inset -2px 0 0 var(--pt-color);} .dsc-point:not([data-title])::before,.dsc-point[data-title=""]::before{display:none;} @media (hover:hover){ [data-dsc]:not(.dsc-open) .dsc-point:hover::before,[data-dsc]:not(.dsc-open) .dsc-point:focus-visible::before{opacity:1; transform:translate(0,-50%) scale(.89);} /* .89 compensa o scale(1.12) do ponto: o rótulo fica no tamanho real */ } .dsc-point:hover::after{animation-duration:1.4s;} /* Floating Glass: entra deslizando a partir do lado do ponto (não só escala) */ .fg.from-right:not(.is-open){transform:translateX(-14px) scale(.95);} .fg.from-left:not(.is-open){transform:translateX(14px) scale(.95);} .dsc-panel.is-open{transition:opacity .35s ease .16s, transform .55s var(--ease-out) .16s, visibility 0s;} .dsc-line{transition:transform .4s var(--ease-out);} /* CTA dentro do vidro: leva da descoberta para o aprofundamento */ .dsc-cta{display:inline-flex; align-items:center; gap:8px; margin-top:14px; padding:11px 16px; border-radius:999px; font-size:13.5px; font-weight:600; color:#fff; text-decoration:none; background:color-mix(in srgb, var(--fg-origin) 22%, rgba(255,255,255,.04)); border:1px solid color-mix(in srgb, var(--fg-origin) 55%, transparent); transition:background .25s ease, border-color .25s ease, transform .25s var(--ease-out);} .dsc-cta:hover,.dsc-cta:focus-visible{background:color-mix(in srgb, var(--fg-origin) 40%, transparent); border-color:var(--fg-origin);} /* NÚMEROS: entrada progressiva (JS) — tabular para não "dançar" */ [data-countup],.pf-metric strong,.ch-case-metrics b{font-variant-numeric:tabular-nums;} @media (prefers-reduced-motion:reduce){ .reveal[class*="imgwrap"] img{transform:none !important; transition:none !important;} [data-dsc].dsc-armed:not(.dsc-in) .dsc-point{opacity:1; transform:none;} [data-dsc].dsc-in .dsc-point{animation:none;} .dsc-point::before,.arr,.nav-sub > a{transition:none !important;} .nav-sub > a{opacity:1 !important; transform:none !important;} html :is(.sol-card,.seh-card,.oq-card,.sp-seg-card,.sp-cont-card,.sp-pil-card,.gf-eco-card,.seealso-card,.ch-case,.ch-format-card,.seg-cap-card,.seg-related-card,.stub-card,.gf-trust-card){transition:none !important;} } [data-dsc].dsc-open .dsc-point.is-under{opacity:0 !important; pointer-events:none;} @media (max-width:760px){ body:has(.dsc-panel.is-open) .wa-float{opacity:0; pointer-events:none;} } /* ============================================================ FLOATING GLASS — DISPLAY (.fgx) O vidro não é card de texto: é uma interface contextual que revela o que aquele ponto tem de mais relevante, no formato certo (número, de/para, gráfico que se desenha, fluxo, estados, ocorrência, mídia, mapa, fala). Mesma superfície e comportamento (.fg); conteúdo modular (glass.py). Consistência no sistema, diversidade na experiência. ============================================================ */ .fg.fgx{padding:18px 20px 18px; display:flex; flex-direction:column; gap:14px;} .fg.fgx-s{width:min(300px, 40vw);} .fg.fgx-m{width:min(350px, 42vw);} .fg.fgx-l{width:min(430px, 46vw);} .fgx-head{display:flex; flex-direction:column; gap:6px; margin-right:34px;} .fgx-tag{display:inline-flex; align-items:center; gap:7px; font-size:10.5px; font-weight:700; letter-spacing:.8px; text-transform:uppercase; color:color-mix(in srgb, var(--fg-origin) 70%, #fff);} .fgx-tag::before{content:""; width:6px; height:6px; border-radius:999px; background:var(--fg-origin); box-shadow:0 0 0 3px color-mix(in srgb, var(--fg-origin) 30%, transparent);} .fgx-title{font-size:15px; font-weight:700; line-height:1.3; color:#fff; letter-spacing:-.1px;} .fgx-lead{font-size:14.5px; line-height:1.45; color:rgba(255,255,255,.86);} .fgx-note{font-size:11.5px; line-height:1.5; color:rgba(255,255,255,.5);} .fgx-illu{color:rgba(255,255,255,.38); font-style:normal;} .fgx-cite{display:block; font-style:normal; font-size:10.5px; color:rgba(255,255,255,.42); margin-top:8px;} /* número protagonista */ .fgx-kpi{display:flex; flex-direction:column; gap:2px;} .fgx-kpi b{font:800 46px/1 'Switzer',system-ui,sans-serif; letter-spacing:-1.5px; color:#fff; font-variant-numeric:tabular-nums;} .fgx-kpi span{font-size:14px; font-weight:600; color:#fff; margin-top:6px;} .fgx-kpi small{font-size:12px; color:rgba(255,255,255,.6);} /* de/para */ .fgx-compare{display:flex; flex-direction:column; gap:8px;} .fgx-cmp-head{display:flex; align-items:baseline; gap:10px; margin-bottom:4px;} .fgx-cmp-head b{font:800 34px/1 'Switzer',system-ui,sans-serif; letter-spacing:-1px; color:#fff; font-variant-numeric:tabular-nums;} .fgx-cmp-head span{font-size:13px; font-weight:600; color:rgba(255,255,255,.8); line-height:1.3;} .fgx-bar{display:grid; grid-template-columns:86px 1fr auto; align-items:center; gap:10px; font-size:12px;} .fgx-bar span{color:rgba(255,255,255,.55);} .fgx-bar i{position:relative; height:8px; border-radius:8px; background:rgba(255,255,255,.07); overflow:hidden;} .fgx-bar i::after{content:""; position:absolute; inset:0 auto 0 0; width:var(--w); border-radius:inherit; background:rgba(255,255,255,.32); transform-origin:left; transform:scaleX(0);} .fgx-bar.is-to i::after{background:var(--fg-origin);} .fgx-bar em{font-style:normal; font-weight:700; color:#fff; font-variant-numeric:tabular-nums; min-width:62px; text-align:right;} .fg.is-open .fgx-bar i::after{animation:fgxGrow .9s var(--ease-out) .45s forwards;} .fg.is-open .fgx-bar.is-to i::after{animation-delay:.75s;} @keyframes fgxGrow{to{transform:scaleX(1);}} /* gráficos ilustrativos que se desenham */ .fgx-chart,.fgx-map{margin:0; display:flex; flex-direction:column; gap:6px;} .fgx-chart svg,.fgx-map svg{width:100%; height:auto; overflow:visible;} .fgx-chart figcaption,.fgx-map figcaption{font-size:11px; color:rgba(255,255,255,.55);} .c-t{font:600 9.5px 'Switzer',system-ui,sans-serif; fill:rgba(255,255,255,.55); letter-spacing:.2px;} .c-hot-t{fill:color-mix(in srgb, var(--fg-origin) 75%, #fff);} .c-band{fill:rgba(255,255,255,.06); stroke:rgba(255,255,255,.12); stroke-dasharray:3 3;} .c-line{fill:none; stroke:#fff; stroke-width:1.6; stroke-linecap:round; stroke-linejoin:round; stroke-dasharray:700; stroke-dashoffset:700;} .c-hot{fill:var(--fg-origin); opacity:0;} .c-mark{stroke:var(--fg-origin); stroke-width:1; stroke-dasharray:2 3; opacity:0;} .c-tick{stroke:rgba(255,255,255,.4); stroke-width:1.4;} .c-seg,.c-col{transform-box:fill-box; transform-origin:left center; transform:scaleX(0);} .c-col{transform-origin:center bottom; transform:scaleY(0); fill:rgba(255,255,255,.28);} .c-col.is-hi{fill:var(--fg-origin);} .c-seg.s1{fill:rgba(255,255,255,.22);} .c-seg.s2{fill:rgba(255,255,255,.5);} .c-seg.s3{fill:var(--fg-origin);} .c-legend .s1{fill:rgba(255,255,255,.22);} .c-legend .s2{fill:rgba(255,255,255,.5);} .c-legend .s3,.c-legend .hi{fill:var(--fg-origin);} .c-legend rect{fill:rgba(255,255,255,.3);} .c-track{fill:rgba(255,255,255,.05);} .c-base{stroke:rgba(255,255,255,.18);} .c-ring{fill:none; stroke:rgba(255,255,255,.28); stroke-width:12; opacity:0; transform:rotate(-90deg);} .c-ring.is-hi{stroke:var(--fg-origin);} .c-cell{fill:rgba(255,255,255,.08);} .c-cell.is-hi{fill:rgba(255,255,255,.08);} .c-fence{fill:none; stroke:color-mix(in srgb, var(--fg-origin) 70%, #fff); stroke-dasharray:2 3; opacity:.8;} .fg.is-open .c-line{animation:fgxDraw 1.6s var(--ease-soft) .4s forwards;} .fg.is-open .c-hot{animation:fgxPop .5s var(--ease-out) 1.5s forwards;} .fg.is-open .c-mark{animation:fgxFade .4s ease 1.6s forwards;} .fg.is-open .c-seg{animation:fgxGrow .8s var(--ease-out) calc(var(--d,0s) + .4s) forwards;} .fg.is-open .c-col{animation:fgxGrowY .7s var(--ease-out) calc(var(--d,0s) + .4s) forwards;} .fg.is-open .c-ring{animation:fgxFade .5s ease calc(var(--d,0s) + .4s) forwards;} .fg.is-open .c-cell.is-hi{animation:fgxCell .5s ease calc(var(--d,0s) + .7s) forwards;} @keyframes fgxDraw{to{stroke-dashoffset:0;}} @keyframes fgxPop{from{opacity:0; transform:scale(.3);} to{opacity:1; transform:none;}} @keyframes fgxFade{to{opacity:1;}} @keyframes fgxGrowY{to{transform:scaleY(1);}} @keyframes fgxCell{to{fill:var(--fg-origin);}} .c-hot{transform-box:fill-box; transform-origin:center;} /* mapa */ .c-street{stroke:rgba(255,255,255,.08); stroke-width:6; fill:none;} .c-route{fill:none; stroke:var(--fg-origin); stroke-width:2.2; stroke-linecap:round; stroke-linejoin:round; stroke-dasharray:600; stroke-dashoffset:600;} .c-geo{fill:color-mix(in srgb, var(--fg-origin) 14%, transparent); stroke:color-mix(in srgb, var(--fg-origin) 70%, #fff); stroke-dasharray:2 3; transform-box:fill-box; transform-origin:center;} .c-veh{fill:#fff; opacity:0;} .c-stop{fill:rgba(255,255,255,.7); opacity:0;} .fg.is-open .c-route{animation:fgxDraw 1.6s var(--ease-soft) .4s forwards;} .fg.is-open .c-veh,.fg.is-open .c-stop{animation:fgxFade .4s ease 1.7s forwards;} .fg.is-open .c-geo{animation:fgxGeo 2.4s ease-in-out .6s infinite;} @keyframes fgxGeo{0%,100%{transform:scale(1); opacity:.9;} 50%{transform:scale(1.08); opacity:.6;}} /* fluxo que acende passo a passo */ .fgx-flow{list-style:none; margin:0; padding:0; display:flex; flex-wrap:wrap; gap:6px 0; align-items:center;} .fgx-flow li{display:flex; align-items:center; font-size:12px; font-weight:600; color:rgba(255,255,255,.4);} .fgx-flow li span{padding:7px 10px; border-radius:999px; border:1px solid rgba(255,255,255,.12); background:rgba(255,255,255,.03); transition:color .3s, border-color .3s, background .3s;} .fgx-flow li + li::before{content:""; width:14px; height:1.5px; background:rgba(255,255,255,.18);} .fg.is-open .fgx-flow li{animation:fgxStep .4s ease var(--d) forwards;} .fg.is-open .fgx-flow li.is-hi span{animation:fgxHi .5s ease calc(var(--d) + .1s) forwards;} @keyframes fgxStep{to{color:#fff;}} @keyframes fgxHi{to{background:color-mix(in srgb, var(--fg-origin) 30%, transparent); border-color:var(--fg-origin);}} /* estados com ícone */ .fgx-ic{width:18px; height:18px; flex-shrink:0; fill:none; stroke:currentColor; stroke-width:1.4; stroke-linecap:round; stroke-linejoin:round;} .fgx-states{list-style:none; margin:0; padding:0; display:grid; gap:6px;} .fgx-states li{display:grid; grid-template-columns:18px 1fr auto; align-items:center; gap:10px; padding:8px 10px; border-radius:10px; background:rgba(255,255,255,.04); font-size:12.5px; color:rgba(255,255,255,.8);} .fgx-states li svg{color:rgba(255,255,255,.65);} .fgx-states em{font-style:normal; font-size:11.5px; font-weight:700; padding:3px 8px; border-radius:999px; background:rgba(255,255,255,.07); color:rgba(255,255,255,.75);} .fgx-states .t-ok em{color:#7BE0B0; background:rgba(60,190,130,.14);} .fgx-states .t-warn em{color:#FFD27A; background:rgba(240,180,60,.14);} .fgx-states .t-alert{background:color-mix(in srgb, var(--fg-origin) 14%, transparent);} .fgx-states .t-alert svg{color:var(--fg-origin);} .fgx-states .t-alert em{color:#fff; background:var(--fg-origin);} /* ocorrência */ .fgx-occ{border-radius:12px; border:1px solid color-mix(in srgb, var(--fg-origin) 45%, transparent); background:color-mix(in srgb, var(--fg-origin) 9%, rgba(255,255,255,.02)); padding:12px 13px;} .fgx-occ-top{display:flex; align-items:center; gap:9px; margin-bottom:9px;} .fgx-occ-top svg{color:var(--fg-origin);} .fgx-occ-top b{font-size:13.5px; flex:1;} .fgx-occ-top em{font-style:normal; font-size:11px; font-weight:700; padding:3px 8px; border-radius:999px; background:rgba(255,255,255,.08); color:rgba(255,255,255,.8);} .fgx-occ dl{display:grid; gap:6px; margin:0;} .fgx-occ dl div{display:grid; grid-template-columns:92px 1fr; gap:8px; font-size:12px; line-height:1.4;} .fgx-occ dt{color:rgba(255,255,255,.5);} .fgx-occ dd{margin:0; color:#fff;} /* mídia, fala, Logos, capacidades */ .fgx-media{margin:0; border-radius:12px; overflow:hidden; background:#000;} .fgx-media img,.fgx-media video{display:block; width:100%; aspect-ratio:16/9; object-fit:cover;} .fgx-media figcaption{font-size:11.5px; color:rgba(255,255,255,.6); padding:8px 10px; background:rgba(9,14,19,.9);} .fgx-quote{margin:0; padding-left:12px; border-left:1.5px solid var(--fg-origin);} .fgx-quote p{font-size:14px; line-height:1.5; color:#fff; font-style:italic;} .fgx-quote cite{display:block; margin-top:6px; font-style:normal; font-size:11.5px; color:rgba(255,255,255,.55);} .fgx-logos{padding:10px 0 10px 12px; border-left:1.5px solid var(--logos-blue, #008CDE); background:linear-gradient(90deg, rgba(0,140,222,.10), rgba(0,140,222,0) 70%);} .fgx-logos .fg-label{color:var(--logos-blue-ink, #6CC4F5); margin-bottom:5px;} .fgx-logos p{font-size:13px; line-height:1.5; color:#fff;} .fgx-links{display:flex; flex-direction:column; gap:8px; padding-top:12px; border-top:1px solid rgba(255,255,255,.08);} .fgx-links-label{font-size:10.5px; font-weight:700; letter-spacing:.7px; text-transform:uppercase; color:rgba(255,255,255,.5);} .fgx-links > div{display:flex; flex-wrap:wrap; gap:6px;} .fgx-chip{display:inline-flex; align-items:center; gap:7px; padding:7px 11px; border-radius:999px; font-size:12px; font-weight:600; color:#fff; text-decoration:none; background:color-mix(in srgb, var(--c) 16%, transparent); border:1px solid color-mix(in srgb, var(--c) 50%, transparent); transition:background .2s ease, border-color .2s ease;} .fgx-chip i{width:7px; height:7px; border-radius:999px; background:var(--c);} .fgx-chip .arr{font-size:11px; opacity:.7;} .fgx-chip:hover,.fgx-chip:focus-visible{background:color-mix(in srgb, var(--c) 34%, transparent); border-color:var(--c);} .fg.is-open .fgx-chip{animation:fgxFade .01s;} /* sinais operacionais na cena: acontecem, avisam e somem */ .dsc-signal{position:absolute; z-index:3; width:0; height:0; pointer-events:none;} .dsc-signal i{position:absolute; left:-4px; top:-4px; width:8px; height:8px; border-radius:999px; background:#fff; opacity:0; box-shadow:0 0 0 0 rgba(255,255,255,.6);} .dsc-signal b{position:absolute; left:10px; top:-11px; white-space:nowrap; padding:5px 10px; border-radius:999px; font:600 11px/1 'Switzer',system-ui,sans-serif; color:#fff; background:rgba(9,14,19,.66); border:1px solid rgba(255,255,255,.14); backdrop-filter:blur(10px); -webkit-backdrop-filter:blur(10px); opacity:0; transform:translateX(-4px); transition:opacity .4s ease, transform .5s var(--ease-out);} .dsc-signal.label-left b{left:auto; right:10px; transform:translateX(4px);} .dsc-signal.is-on i{animation:sigPing 1.6s ease-out 2 forwards;} .dsc-signal.is-on b{opacity:1; transform:none; transition-delay:.15s;} @keyframes sigPing{0%{opacity:1; box-shadow:0 0 0 0 rgba(255,255,255,.55);} 100%{opacity:.85; box-shadow:0 0 0 12px rgba(255,255,255,0);}} [data-dsc].dsc-open .dsc-signal{opacity:0;} /* console: as camadas da Logos que a exploração revelou */ .dsc-console{position:absolute; z-index:4; right:48px; bottom:28px; display:flex; align-items:center; gap:6px; flex-wrap:wrap; justify-content:flex-end; max-width:calc(100% - 96px); padding:8px 8px 8px 16px; border-radius:999px; background:rgba(6,12,16,.55); border:1px solid rgba(255,255,255,.12); backdrop-filter:blur(14px); -webkit-backdrop-filter:blur(14px);} .dsc-console-label{font-size:11px; font-weight:700; letter-spacing:.7px; text-transform:uppercase; color:rgba(255,255,255,.5); margin-right:6px;} .dsc-console-chip{display:inline-flex; align-items:center; gap:7px; padding:7px 12px; border-radius:999px; font-size:12px; font-weight:600; color:rgba(255,255,255,.42); text-decoration:none; transition:color .4s ease, background .4s ease;} .dsc-console-chip i{width:7px; height:7px; border-radius:999px; border:1.5px solid rgba(255,255,255,.35); transition:background .4s ease, border-color .4s ease, box-shadow .4s ease;} .dsc-console-chip:hover{color:#fff;} .dsc-console-chip.is-lit{color:#fff; background:color-mix(in srgb, var(--c) 14%, transparent);} .dsc-console-chip.is-lit i{background:var(--c); border-color:var(--c); box-shadow:0 0 0 3px color-mix(in srgb, var(--c) 28%, transparent);} @media (max-width:760px){ .fg.fgx{width:auto !important;} .dsc-console{display:none;} .dsc-signal{display:none;} } @media (prefers-reduced-motion:reduce){ .c-line,.c-route{stroke-dashoffset:0 !important; animation:none !important;} .c-seg,.c-col{transform:none !important; animation:none !important;} .c-hot,.c-mark,.c-ring,.c-veh,.c-stop{opacity:1 !important; animation:none !important;} .c-cell.is-hi{fill:var(--fg-origin) !important;} .fgx-bar i::after{transform:none !important; animation:none !important;} .fgx-flow li{color:#fff !important; animation:none !important;} .fgx-flow li.is-hi span{background:color-mix(in srgb, var(--fg-origin) 30%, transparent) !important; border-color:var(--fg-origin) !important;} .c-geo{animation:none !important;} } /* ============================================================ ÓRBITA DO GESTOR (.gx) — o gestor no centro de um sistema de sinais. Sinais de tipos diferentes (KPI, gráfico, estado, alerta, mapa, fluxo, thumbnail, ícone) ligados a quem decide. Os acionáveis (+) abrem o Floating Glass de display. Conteúdo: src/orbits/*.json (orbit.py). ============================================================ */ .gx{background:#07090C; color:#fff; padding:110px 0 90px;} .gx-wrap{max-width:1320px; margin:0 auto; padding:0 40px;} .gx-head{max-width:640px; margin-bottom:34px;} .gx-head .kicker{display:block; font-size:12px; font-weight:700; letter-spacing:1.1px; text-transform:uppercase; color:var(--v-accent, #EC1A5E); margin-bottom:12px;} .gx-head h2{font-size:clamp(28px, 3vw, 38px); font-weight:700; letter-spacing:-.8px; line-height:1.12; margin-bottom:12px;} .gx-head p{font-size:16px; line-height:1.6; color:rgba(255,255,255,.72);} .gx-caption{margin-top:16px; font-size:12px; color:rgba(255,255,255,.42);} .gx-stage{position:relative; aspect-ratio:16/9; border-radius:24px; overflow:hidden; background:#07090C; isolation:isolate; box-shadow:inset 0 0 0 1px rgba(255,255,255,.06);} .gx-img{position:absolute; inset:0; width:100%; height:100%; object-fit:cover; z-index:0; transform:scale(1.04); transition:transform 2.4s var(--ease-out), opacity 1.2s ease; opacity:.0;} .gx-stage.is-in .gx-img{opacity:1; transform:scale(1);} .gx-wash{position:absolute; inset:0; z-index:1; pointer-events:none; background:radial-gradient(80% 100% at var(--ax) var(--ay), rgba(7,9,12,0) 0%, rgba(7,9,12,0) 40%, rgba(7,9,12,.55) 100%);} .gx-net{position:absolute; inset:0; width:100%; height:100%; z-index:2; pointer-events:none; overflow:visible;} .gx-net ellipse{fill:none; stroke:rgba(255,255,255,.12); stroke-width:.12; vector-effect:non-scaling-stroke; stroke-dasharray:2 6; opacity:0; transition:opacity 1.2s ease .3s;} .gx-net ellipse.r2{stroke:rgba(255,255,255,.06);} .gx-net line{stroke:rgba(255,255,255,.16); stroke-width:1; vector-effect:non-scaling-stroke; stroke-dasharray:1000; stroke-dashoffset:1000; transition:stroke-dashoffset 1.4s var(--ease-soft), stroke .3s ease; transition-delay:calc(var(--i) * 110ms + .4s), 0s;} .gx-stage.is-in .gx-net ellipse{opacity:1;} .gx-stage.is-in .gx-net line{stroke-dashoffset:0;} .gx-net line.is-hot{stroke:rgba(255,255,255,.55);} .gx-core{position:absolute; z-index:2; left:var(--ax); top:var(--ay); width:14px; height:14px; margin:-7px 0 0 -7px; border-radius:999px; background:#fff; box-shadow:0 0 0 6px rgba(255,255,255,.12), 0 0 28px 6px rgba(0,140,222,.45); opacity:0; transition:opacity .8s ease .2s;} .gx-stage.is-in .gx-core{opacity:1; animation:gxCore 3.2s ease-in-out 1.2s infinite;} @keyframes gxCore{50%{box-shadow:0 0 0 10px rgba(255,255,255,.06), 0 0 36px 10px rgba(0,140,222,.35);}} /* sinais: família visual comum, formatos diferentes */ .gx-item{--gx-c:#fff; position:absolute; z-index:3; transform:translate(-50%,-50%) translate(var(--mx,0px), var(--my,0px)); display:flex; align-items:center; gap:10px; padding:10px 14px; border-radius:14px; color:#fff; font:inherit; text-align:left; background:rgba(10,15,20,.62); border:1px solid rgba(255,255,255,.12); backdrop-filter:blur(14px) saturate(140%); -webkit-backdrop-filter:blur(14px) saturate(140%); box-shadow:0 18px 40px -24px rgba(0,0,0,.8); opacity:0; transition:opacity .6s ease, transform .9s var(--ease-out), border-color .3s ease, background .3s ease; transition-delay:calc(var(--i) * 110ms + .5s), 0s, 0s, 0s;} .gx-stage.is-in .gx-item{opacity:1;} button.gx-item{cursor:pointer;} .gx-item.is-action:hover,.gx-item.is-action:focus-visible,.gx-item[aria-expanded="true"]{border-color:color-mix(in srgb, var(--gx-c) 70%, transparent); background:rgba(10,15,20,.78);} .gx-more{position:absolute; top:-7px; right:-7px; width:18px; height:18px; border-radius:999px; display:grid; place-items:center; font-size:12px; font-weight:700; line-height:1; background:var(--gx-c); color:#0A0F14; box-shadow:0 0 0 3px rgba(7,9,12,.8);} .gx-lbl{font-size:12px; font-weight:600; color:rgba(255,255,255,.78); white-space:nowrap;} .gx-k-kpi{flex-direction:column; align-items:flex-start; gap:2px; padding:12px 16px;} .gx-num{font:800 30px/1 'Switzer',system-ui,sans-serif; letter-spacing:-1px; font-variant-numeric:tabular-nums;} .gx-k-kpi .gx-lbl{color:rgba(255,255,255,.62);} .gx-spark{width:120px; height:34px; display:block;} .gx-spark path{fill:none; stroke:#fff; stroke-width:1.6; stroke-linecap:round; stroke-dasharray:240; stroke-dashoffset:240; transition:stroke-dashoffset 1.8s var(--ease-soft) 1.4s;} .gx-stage.is-in .gx-spark path{stroke-dashoffset:0;} .gx-spark-wrap{display:flex;} .gx-spark{flex-shrink:0;} .gx-k-state{flex-direction:column; align-items:flex-start; gap:7px;} .gx-dots{display:flex; gap:5px;} .gx-dots i{width:9px; height:9px; border-radius:3px; background:rgba(255,255,255,.2);} .gx-dots .d-ok{background:#5FD39C;} .gx-dots .d-warn{background:#F2C14E;} .gx-dots .d-idle{background:rgba(255,255,255,.22);} .gx-k-alert{gap:11px;} .gx-alert-dot{width:10px; height:10px; border-radius:999px; background:var(--gx-c); box-shadow:0 0 0 0 color-mix(in srgb, var(--gx-c) 60%, transparent); animation:gxAlert 2.2s ease-out infinite;} @keyframes gxAlert{0%{box-shadow:0 0 0 0 color-mix(in srgb, var(--gx-c) 60%, transparent);} 100%{box-shadow:0 0 0 12px transparent;}} .gx-txt{display:flex; flex-direction:column; gap:2px;} .gx-txt b{font-size:12.5px;} .gx-txt small{font-size:11px; color:rgba(255,255,255,.55);} .gx-k-map{flex-direction:column; align-items:flex-start; gap:6px; padding:10px;} .gx-minimap{width:120px; height:64px; display:block; border-radius:8px; background:rgba(255,255,255,.03);} .gx-minimap .m-st{stroke:rgba(255,255,255,.08); stroke-width:5; fill:none;} .gx-minimap .m-rt{fill:none; stroke:var(--gx-c); stroke-width:2; stroke-linejoin:round;} .gx-minimap .m-geo{fill:color-mix(in srgb, var(--gx-c) 18%, transparent); stroke:var(--gx-c); stroke-dasharray:2 2;} .gx-minimap .m-veh{fill:#fff;} .gx-flow{display:flex; align-items:center; gap:6px; font-size:11.5px; font-weight:600; color:rgba(255,255,255,.7);} .gx-flow span + span::before{content:"→"; margin-right:6px; color:rgba(255,255,255,.35);} .gx-flow span:last-child{color:#fff;} .gx-thumb{position:relative; width:84px; aspect-ratio:16/10; border-radius:8px; overflow:hidden; flex-shrink:0;} .gx-thumb img{width:100%; height:100%; object-fit:cover; display:block;} .gx-thumb i{position:absolute; left:6px; top:6px; width:7px; height:7px; border-radius:999px; background:var(--gx-c);} .gx-ic{width:22px; height:22px; fill:none; stroke:var(--gx-c); stroke-width:1.4; stroke-linecap:round; stroke-linejoin:round;} .gx-panel{z-index:6;} .gx-figure{position:absolute; z-index:0; pointer-events:none;} @media (max-width:900px){ .gx{padding:80px 0 64px;} .gx-wrap{padding:0 20px;} .gx-stage{aspect-ratio:auto; display:grid; grid-template-columns:1fr 1fr; gap:10px; padding:min(56vw, 420px) 12px 12px; border-radius:18px;} .gx-img{height:min(56vw, 420px); bottom:auto;} .gx-wash{height:min(56vw, 420px); bottom:auto; background:linear-gradient(180deg, rgba(7,9,12,0) 50%, #07090C 100%);} .gx-net,.gx-core{display:none;} .gx-item{position:relative; left:auto !important; top:auto !important; transform:none; width:100%; min-width:0;} .gx-lbl{white-space:normal;} .gx-spark,.gx-minimap{width:100%;} .gx-k-spark{flex-direction:column; align-items:flex-start;} .gx-flow{flex-wrap:wrap; row-gap:4px;} } @media (prefers-reduced-motion:reduce){ .gx-img,.gx-item,.gx-net line,.gx-net ellipse,.gx-spark path{transition:none !important;} .gx-net line,.gx-spark path{stroke-dashoffset:0;} .gx-alert-dot,.gx-stage.is-in .gx-core{animation:none !important;} } /* ===================================================================== FLOATING GLASS DE REVELAÇÃO / EVIDÊNCIA (.sx) — família 2 do Glass. Sem estrutura comum obrigatória: o conteúdo decide formato e tamanho (vídeo, KPI que vira gráfico, painel de resultados, fala, cadeia, faixa térmica, planta, rota). Markup: src/build_helpers/evidence_glass.py ({{REVEAL:}}). Família 1 (contexto/overview, estrutura consistente) é o painel da Hub de Segmentos (.sov, segmentos.style.css). ===================================================================== */ .sx.fg{position:fixed; left:50%; top:calc(50% - 26px); translate:-50% -50%; max-height:calc(100vh - 150px); overflow:auto; scrollbar-width:thin; border-radius:24px; padding:30px; transform:scale(.96); background:rgba(9,14,19,.82);} .sx.fg.is-open{transform:none;} .sx-tag{display:inline-flex; align-items:center; gap:8px; font-size:11px; font-weight:700; letter-spacing:1px; text-transform:uppercase; color:rgba(255,255,255,.55);} .sx-tag::before{content:""; width:6px; height:6px; border-radius:999px; background:var(--logos-blue);} .sx-mega{display:block; font:800 clamp(52px, 6vw, 88px)/.95 'Switzer',system-ui,sans-serif; letter-spacing:-3px; font-variant-numeric:tabular-nums; color:#fff;} .sx-mega-label{display:block; font-size:17px; font-weight:600; color:#fff; margin-top:10px;} .sx-min{font-size:14px; line-height:1.6; color:rgba(255,255,255,.66);} .sx-cite{display:block; font-size:11px; color:rgba(255,255,255,.42);} .sx-illu{font-size:11px; color:rgba(255,255,255,.38);} .sx-cta{display:inline-flex; align-items:center; gap:9px; padding:12px 20px; border-radius:999px; background:#fff; color:#0B1016; font-size:13.5px; font-weight:700; text-decoration:none; white-space:nowrap; transition:transform .25s var(--ease-out), background .25s ease;} .sx-cta:hover{transform:translateY(-2px);} .sx-cta-ghost{background:transparent; color:#fff; padding:0; border-radius:0; font-weight:600; border-bottom:1px solid rgba(255,255,255,.3); padding-bottom:3px;} .sx-cta-ghost:hover{border-color:#fff;} .sx-foot{display:flex; align-items:center; justify-content:space-between; gap:20px; flex-wrap:wrap; margin-top:26px; padding-top:18px; border-top:1px solid rgba(255,255,255,.08);} .sx h3{font-size:22px; line-height:1.25; letter-spacing:-.4px; font-weight:700;} /* AGRONEGÓCIO — audiovisual: o vídeo é a experiência */ .x-cinema.fg{padding:0; width:min(1000px, 92vw); height:min(78vh, 720px); display:grid; grid-template-columns:auto 1fr; grid-template-rows:minmax(0, 1fr); overflow:hidden;} .sx-video{position:relative; height:100%; min-height:0; aspect-ratio:9/16; background:#000; overflow:hidden;} .sx-video video{width:100%; height:100%; object-fit:cover; display:block;} .sx-sound{position:absolute; left:14px; bottom:14px; padding:8px 12px; border-radius:999px; border:1px solid rgba(255,255,255,.3); background:rgba(0,0,0,.45); color:#fff; font:600 12px inherit; cursor:pointer; backdrop-filter:blur(8px);} .sx-sound[aria-pressed="true"]{background:#fff; color:#000;} .sx-cinema-side{display:flex; flex-direction:column; justify-content:flex-end; gap:14px; padding:40px 40px 36px; background:radial-gradient(120% 80% at 0% 100%, rgba(236,26,94,.16), transparent 60%);} .sx-cinema-side .sx-mega{font-size:clamp(44px, 5vw, 76px); margin-top:auto; white-space:nowrap;} .sx-cinema-side .sx-mega-label{font-size:19px; margin-top:0;} .sx-cinema-side .sx-cta-ghost{align-self:flex-start; margin-top:8px;} /* TRANSPORTADORAS — o litro que vai mais longe */ .x-gauge.fg{width:min(820px, 92vw); display:grid; grid-template-columns:240px 1fr; gap:10px 40px; padding:36px 38px 28px;} .sx-gauge-head{display:flex; flex-direction:column; gap:4px; justify-content:center;} .sx-gauge-head .sx-mega{margin-top:14px;} .sx-gauge-head .sx-mega-label{font-size:15px;} .sx-liter{display:flex; flex-direction:column; gap:26px; justify-content:center; padding-top:8px;} .sx-liter-title{font-size:11px; font-weight:700; letter-spacing:.8px; text-transform:uppercase; color:rgba(255,255,255,.5);} .sx-lane{display:grid; grid-template-columns:96px 1fr 70px; align-items:center; gap:14px; font-size:12.5px;} .sx-lane-k{color:rgba(255,255,255,.6);} .sx-lane em{font-style:normal; font-weight:700; text-align:right; font-variant-numeric:tabular-nums;} .sx-road{position:relative; height:14px; border-radius:14px; background:repeating-linear-gradient(90deg, rgba(255,255,255,.08) 0 14px, transparent 14px 22px);} .sx-road i{position:absolute; left:0; top:0; bottom:0; width:var(--to); border-radius:inherit; background:rgba(255,255,255,.35); transform-origin:left; transform:scaleX(0);} .is-after .sx-road i{background:linear-gradient(90deg, rgba(238,79,100,.55), #EE4F64);} .is-after .sx-road i::after{content:""; position:absolute; right:-7px; top:50%; width:14px; height:14px; margin-top:-7px; border-radius:999px; background:#fff; box-shadow:0 0 0 5px rgba(238,79,100,.35);} .sx-gain{position:absolute; top:-20px; line-height:1; font-size:11px; font-weight:800; color:#EE4F64; opacity:0; white-space:nowrap; padding:0 0 0 6px; border-left:1px dashed rgba(238,79,100,.7); height:34px;} .sx-scale{position:relative; height:16px; margin-left:110px; margin-right:84px; font-size:10px; color:rgba(255,255,255,.35);} .sx-scale span{position:absolute; translate:-50% 0;} .x-gauge .sx-foot{grid-column:1 / -1;} .x-gauge.is-open .is-before .sx-road i{animation:sxGrow 1s var(--ease-out) .4s forwards;} .x-gauge.is-open .is-after .sx-road i{animation:sxGrow 1.6s var(--ease-out) .7s forwards;} .x-gauge.is-open .sx-gain{animation:sxFade .5s ease 2.1s forwards;} @keyframes sxGrow{to{transform:scaleX(1);}} @keyframes sxFade{to{opacity:1;}} /* SERVIÇOS — a fala é a peça */ .x-quote.fg{width:min(760px, 92vw); padding:48px 52px 40px; overflow:hidden;} .sx-quote-bg{position:absolute; inset:0; z-index:-1; background-size:cover; background-position:70% 50%; opacity:.16; filter:grayscale(1) contrast(1.1); mask-image:linear-gradient(90deg, transparent 20%, #000 100%); -webkit-mask-image:linear-gradient(90deg, transparent 20%, #000 100%);} .x-quote.fg{isolation:isolate;} .sx-quote{margin:22px 0 28px; position:relative;} .sx-qmark{position:absolute; left:-10px; top:-46px; font:800 120px/1 Georgia, serif; color:rgba(0,140,222,.35);} .sx-quote p{font-size:clamp(22px, 2.3vw, 30px); line-height:1.32; letter-spacing:-.4px; font-weight:500; color:#fff;} .sx-person{display:flex; align-items:center; gap:14px;} .sx-avatar{width:46px; height:46px; border-radius:999px; display:grid; place-items:center; font-weight:800; font-size:14px; background:linear-gradient(135deg, #008CDE, #9F8CE9);} .sx-person b{display:block; font-size:15px;} .sx-person small{font-size:12.5px; color:rgba(255,255,255,.6);} .sx-learn{margin:28px 0 18px; padding-top:18px; border-top:1px solid rgba(255,255,255,.1); font-size:13.5px; line-height:1.55; color:rgba(255,255,255,.65); max-width:560px;} .sx-learn b{color:#fff; font-weight:600;} /* CONSTRUÇÃO — painel de resultados de um case real */ .x-results.fg{width:min(940px, 94vw); padding:34px 36px 26px;} .sx-res-head h3{margin-top:10px;} .sx-res-grid{display:grid; grid-template-columns:repeat(3, 1fr); gap:16px; margin-top:24px;} .sx-res{padding:20px; border-radius:16px; background:rgba(255,255,255,.035); border:1px solid rgba(255,255,255,.07); display:flex; flex-direction:column; gap:4px;} .sx-res > b{font:800 40px/1 'Switzer',system-ui,sans-serif; letter-spacing:-1.2px; font-variant-numeric:tabular-nums;} .sx-res > span{font-size:13px; color:rgba(255,255,255,.72); min-height:34px;} .sx-bars{display:flex; align-items:flex-end; gap:12px; height:110px; margin-top:12px; padding-bottom:2px; border-bottom:1px solid rgba(255,255,255,.12);} .sx-b{flex:1; height:100%; display:flex; flex-direction:column; justify-content:flex-end; align-items:stretch; position:relative;} .sx-b i{display:block; height:var(--h); border-radius:6px 6px 2px 2px; background:rgba(255,255,255,.22); transform-origin:bottom; transform:scaleY(0);} .sx-b.is-to i{background:#E8871E;} .sx-b em{position:absolute; left:0; right:0; bottom:calc(var(--h) + 6px); text-align:center; font-style:normal; font-size:11.5px; font-weight:700; opacity:0;} .sx-bars-k{display:flex; gap:12px; font-size:10.5px; color:rgba(255,255,255,.45);} .sx-bars-k span{flex:1; text-align:center;} .x-results.is-open .sx-b i{animation:sxGrowY .9s var(--ease-out) calc(var(--d) + .2s) forwards;} .x-results.is-open .sx-b.is-to i{animation-delay:calc(var(--d) + .55s);} .x-results.is-open .sx-b em{animation:sxFade .4s ease calc(var(--d) + 1.1s) forwards;} .sx-res{--d:0s;} @keyframes sxGrowY{to{transform:scaleY(1);}} .sx-pdf{display:inline-flex; align-items:center; gap:10px; font-size:13.5px; font-weight:600; color:#fff; text-decoration:none; border-bottom:1px solid rgba(255,255,255,.3); padding-bottom:3px;} .sx-pdf small{font-size:10px; font-weight:800; padding:2px 6px; border-radius:4px; background:rgba(255,255,255,.12);} /* CADEIA DO FRIO — faixa inferior: a cadeia e onde o frio se perde */ .x-chain.fg{top:auto; bottom:92px; translate:-50% 0; width:min(1120px, 94vw); display:grid; grid-template-columns:300px 1fr; gap:36px; align-items:center; padding:28px 34px;} .sx-chain-copy p{font-size:22px; line-height:1.25; letter-spacing:-.4px; font-weight:600; margin:12px 0 16px;} .sx-nodes{list-style:none; margin:0; padding:0; display:flex; justify-content:space-between; position:relative;} .sx-nodes::before{content:""; position:absolute; left:6%; right:6%; top:9px; height:1.5px; background:rgba(255,255,255,.14);} .sx-nodes li{position:relative; display:flex; flex-direction:column; align-items:center; gap:8px; font-size:12.5px; font-weight:600; color:rgba(255,255,255,.45); width:20%;} .sx-nodes li i{width:18px; height:18px; border-radius:999px; border:1.5px solid rgba(255,255,255,.35); background:#0B1218;} .x-chain.is-open .sx-nodes li{animation:sxNode .4s ease var(--d) forwards;} .x-chain.is-open .sx-nodes li i{animation:sxNodeI .4s ease var(--d) forwards;} .x-chain.is-open .sx-nodes li.is-hot i{animation:sxNodeHot .5s ease var(--d) forwards;} @keyframes sxNode{to{color:#fff;}} @keyframes sxNodeI{to{border-color:#4190C8; background:#4190C8;}} @keyframes sxNodeHot{to{border-color:#E94D35; background:#E94D35; box-shadow:0 0 0 6px rgba(233,77,53,.25);}} .sx-chain-line{width:100%; height:70px; display:block; margin-top:6px;} .sx-chain-line .c-band{fill:rgba(65,144,200,.08); stroke:rgba(65,144,200,.35); stroke-dasharray:3 3;} .sx-chain-line .c-line{fill:none; stroke:#fff; stroke-width:1.6; stroke-dasharray:900; stroke-dashoffset:900; vector-effect:non-scaling-stroke;} .sx-chain-line .c-hot{fill:#E94D35; opacity:0;} .x-chain.is-open .c-line{animation:fgxDraw 1.8s var(--ease-soft) .5s forwards;} .x-chain.is-open .c-hot{animation:sxFade .4s ease 1.6s forwards;} .sx-chain-note{display:block; margin-top:8px; font-size:12px; color:rgba(255,255,255,.6);} /* SAÚDE — uma faixa por equipamento */ .x-thermo.fg{width:min(540px, 92vw); padding:32px 34px 28px;} .x-thermo h3{margin:10px 0 22px; font-size:28px;} .sx-thermos{display:flex; justify-content:space-around; gap:20px; margin-bottom:22px;} .sx-thermo{display:flex; flex-direction:column; align-items:center; gap:8px;} .sx-tube{position:relative; width:26px; height:180px; border-radius:26px; background:rgba(255,255,255,.06); border:1px solid rgba(255,255,255,.12); overflow:hidden;} .sx-band{position:absolute; left:0; right:0; bottom:var(--lo); height:calc(var(--hi) - var(--lo)); background:rgba(123,224,176,.22); border-top:1px dashed rgba(123,224,176,.7); border-bottom:1px dashed rgba(123,224,176,.7);} .sx-read{position:absolute; left:50%; width:12px; height:12px; margin:0 0 -6px -6px; border-radius:999px; background:#fff; bottom:0; transition:bottom 1.4s var(--ease-out);} .x-thermo.is-open .sx-read{bottom:var(--v); transition-delay:var(--d);} .sx-thermo b{font-size:13px;} .sx-thermo em{font-style:normal; font-size:11px; font-weight:700; color:#7BE0B0;} .sx-thermo.is-alert em{color:#fff; background:#E94D35; padding:2px 8px; border-radius:999px;} .sx-thermo.is-alert .sx-read{background:#E94D35; box-shadow:0 0 0 5px rgba(233,77,53,.3);} .x-thermo .sx-cta{margin-top:18px;} /* INDÚSTRIA — a planta como território */ .x-plant.fg{width:min(860px, 94vw); display:grid; grid-template-columns:1.4fr 1fr; gap:30px; align-items:center; padding:28px;} .sx-plant{position:relative;} .sx-plant svg{width:100%; height:auto; display:block;} .sx-plant text{font:600 11px 'Switzer',system-ui,sans-serif; fill:rgba(255,255,255,.55);} .p-fence{fill:none; stroke:#4A6FA5; stroke-width:1.5; stroke-dasharray:6 5;} .p-zone{fill:rgba(255,255,255,.035); stroke:rgba(255,255,255,.1);} .p-zone.is-out{fill:rgba(233,77,53,.06); stroke:rgba(233,77,53,.3);} .p-path{fill:none; stroke:rgba(255,255,255,.12); stroke-dasharray:2 5;} .p-dot{fill:#fff;} .p-dot.is-alert{fill:#E94D35;} .p-ring{fill:none; stroke:#E94D35; transform-box:fill-box; transform-origin:center; animation:sxRing 1.8s ease-out infinite;} @keyframes sxRing{from{opacity:.9; transform:scale(.6);} to{opacity:0; transform:scale(1.6);}} .sx-plant-flag{position:absolute; right:4%; bottom:4%; font-size:11.5px; font-weight:700; padding:6px 10px; border-radius:999px; background:#E94D35;} .sx-plant-copy p{font-size:19px; line-height:1.35; font-weight:600; margin:12px 0 10px;} .sx-plant-copy .sx-cta-ghost{display:inline-flex; margin-top:20px;} /* VAREJO — a rota e as paradas que pesam */ .x-route.fg{width:min(760px, 92vw); padding:30px 32px 26px; display:flex; flex-direction:column; gap:18px;} .sx-route-copy p{font-size:19px; line-height:1.35; font-weight:600; margin-top:10px; max-width:520px;} .sx-route svg{width:100%; height:auto; display:block;} .r-street{stroke:rgba(255,255,255,.06); stroke-width:10; fill:none;} .r-cd{fill:#C9962C;} .sx-route text{font:600 11px 'Switzer',system-ui,sans-serif; fill:rgba(255,255,255,.55);} .r-line{fill:none; stroke:#C9962C; stroke-width:2.4; stroke-linejoin:round; stroke-dasharray:900; stroke-dashoffset:900;} .r-stop{opacity:0;} .r-stop circle{fill:#fff;} .r-stop rect{fill:rgba(255,255,255,.4);} .r-stop.is-long circle{fill:#E94D35;} .r-stop.is-long rect{fill:#E94D35;} .r-long{fill:#E94D35 !important; opacity:0;} .x-route.is-open .r-line{animation:fgxDraw 2.2s var(--ease-soft) .3s forwards;} .x-route.is-open .r-stop{animation:sxFade .3s ease var(--d) forwards;} .x-route.is-open .r-long{animation:sxFade .4s ease 1.6s forwards;} .x-route .sx-cta{align-self:flex-start;} @media (max-width:760px){ .sx.fg{left:10px; right:10px; top:auto; bottom:76px; translate:none; width:auto !important; max-height:calc(100vh - 140px); padding:22px;} .x-cinema.fg{grid-template-columns:1fr; height:auto; padding:0;} .sx-video{height:auto; width:100%; aspect-ratio:9/12;} .sx-cinema-side{padding:20px 22px 22px;} .x-gauge.fg,.x-plant.fg,.x-chain.fg{grid-template-columns:1fr; gap:18px;} .x-chain.fg{bottom:76px;} .sx-res-grid{grid-template-columns:1fr;} .sx-bars{height:70px;} .x-quote.fg{padding:30px 24px;} .sx-lane{grid-template-columns:76px 1fr 56px;} .sx-scale{margin-left:90px; margin-right:70px;} .sx-mega{font-size:52px !important;} } @media (prefers-reduced-motion:reduce){ .sx *{animation:none !important;} .sx-road i,.sx-b i{transform:none !important;} .sx-gain,.sx-b em,.r-stop,.r-long,.c-hot{opacity:1 !important;} .r-line,.sx-chain-line .c-line{stroke-dashoffset:0 !important;} .sx-read{transition:none !important; bottom:var(--v);} } /* ---------- EFEITOS DE CENA (vocabulário): trilha e anel ---------- Trilha: uma relação da operação que se desenha sobre a imagem (ex.: da usina à betoneira) e passa a "fluir". Anel: um ativo em funcionamento (ex.: o giro do balão), com rotação lenta. Entram com a cena (dsc-in) e recuam quando um vidro abre, para não competir com a revelação. */ .dsc-trail{position:absolute; inset:0; width:100%; height:100%; z-index:3; pointer-events:none; overflow:visible;} .dsc-trail path{fill:none; stroke:rgba(255,255,255,.85); stroke-width:1.6; stroke-linecap:round; stroke-dasharray:var(--len, 1200); stroke-dashoffset:var(--len, 1200); filter:drop-shadow(0 0 6px rgba(var(--v-accent-rgb, 255,255,255), .6));} [data-dsc].dsc-in .dsc-trail path{animation:dscTrail 2.4s var(--ease-soft) 1.6s forwards, dscTrailFlow 1.4s linear 4.2s infinite;} @keyframes dscTrail{to{stroke-dashoffset:0;}} @keyframes dscTrailFlow{from{stroke-dasharray:4 8; stroke-dashoffset:0;} to{stroke-dasharray:4 8; stroke-dashoffset:-24;}} .dsc-fxlabel{position:absolute; z-index:3; transform:translate(-50%, calc(-100% - 14px)); white-space:nowrap; pointer-events:none; font:600 11px/1 'Switzer',system-ui,sans-serif; color:#fff; padding:6px 10px; border-radius:999px; background:rgba(9,14,19,.7); border:1px solid rgba(255,255,255,.16); opacity:0; transition:opacity .5s ease;} [data-dsc].dsc-in .dsc-fxlabel{opacity:1; transition-delay:3.6s;} .dsc-ring{position:absolute; z-index:3; pointer-events:none; opacity:0; transition:opacity .8s ease 1.2s;} .dsc-ring svg{width:100%; height:100%; overflow:visible;} .dsc-ring ellipse{fill:none; stroke:var(--v-accent, #fff); stroke-width:1.4; vector-effect:non-scaling-stroke; stroke-dasharray:8 4.5; animation:dscRing 5s linear infinite;} .dsc-ring b{position:absolute; right:4%; top:2%; transform:translateX(50%); white-space:nowrap; font:600 11px/1 'Switzer',system-ui,sans-serif; color:#fff; padding:6px 10px; border-radius:999px; background:rgba(9,14,19,.7); border:1px solid color-mix(in srgb, var(--v-accent, #fff) 60%, transparent);} [data-dsc].dsc-in .dsc-ring{opacity:.95;} @keyframes dscRing{to{stroke-dashoffset:-100;}} [data-dsc].dsc-open .dsc-trail,[data-dsc].dsc-open .dsc-ring,[data-dsc].dsc-open .dsc-fxlabel{opacity:.12 !important; transition:opacity .4s ease;} @media (max-width:760px){ .dsc-fxlabel{display:none;} } @media (prefers-reduced-motion:reduce){ .dsc-trail path{stroke-dashoffset:0 !important; animation:none !important;} .dsc-ring ellipse{animation:none;} .dsc-ring,.dsc-fxlabel{opacity:1; transition:none;} } /* ============================================================ VOCABULÁRIO DE ACABAMENTO (15/10) — momentos de "isso respondeu". Cada página usa poucos e diferentes; nunca todos no mesmo lugar. ============================================================ */ /* LUZ DE PONTEIRO: um reflexo discreto acompanha o cursor num painel escuro */ [data-glow]{position:relative; --gx:50%; --gy:50%;} [data-glow]::before{content:""; position:absolute; inset:0; z-index:4; pointer-events:none; opacity:0; transition:opacity .6s ease; background:radial-gradient(420px circle at var(--gx) var(--gy), rgba(255,255,255,.10), rgba(255,255,255,.035) 35%, transparent 65%); mix-blend-mode:screen;} [data-glow].is-glow::before{opacity:1;} /* TRILHA GPS: o cursor deixa pings de posição que se apagam (área localizada) */ .trail-canvas{position:absolute; inset:0; width:100%; height:100%; z-index:1; pointer-events:none;} /* ÓRBITA: pacotes de informação viajam do sistema para o gestor; sinais próximos do cursor se aproximam */ .gx-net circle.gx-packet{fill:#fff; opacity:0;} .gx-item{transform:translate(-50%,-50%) translate(var(--mx,0px), var(--my,0px)) scale(var(--near-s, 1));} .gx-item.is-near{border-color:color-mix(in srgb, var(--gx-c) 55%, rgba(255,255,255,.2)); background:rgba(10,15,20,.74);} /* REVEAL DE LINHA EM ÍNDICE: a régua de cada linha se desenha ao entrar */ .draw-rule{position:relative;} .draw-rule::after{content:""; position:absolute; left:0; right:0; bottom:-1px; height:1px; background:currentColor; opacity:.0; transform:scaleX(0); transform-origin:left; transition:transform 1.2s var(--ease-out), opacity .6s ease;} .draw-rule.in::after{transform:scaleX(1); opacity:.18;} @media (prefers-reduced-motion:reduce){ [data-glow]::before{display:none;} .trail-canvas{display:none;} } @media (max-width:900px){ .gx-item{transform:none !important;} } .trail-canvas{z-index:1;} [data-trail] > .sp-hero-wash{z-index:0;} /* microcase: um episódio real, com dimensão certa (não um acumulado) */ .pf-case{gap:6px;} .pf-case b{font-size:16px; line-height:1.3; color:var(--chumbo); margin:2px 0 8px;} .pf-case strong{font-size:30px; line-height:1; font-weight:800; letter-spacing:-.8px; color:var(--chumbo); font-variant-numeric:tabular-nums;} .pf-case > span:not(.pf-tag){font-size:13px; color:rgba(36,36,48,.65);} .pf-case-link{margin-top:auto; padding-top:12px; font-size:13px; font-weight:700; color:var(--chumbo); text-decoration:none; border-bottom:1px solid rgba(36,36,48,.25); align-self:flex-start;} .pf-case-link:hover{border-color:var(--chumbo);} .proof-items.n4 > .pf-quote:last-child{grid-column:1 / -1;} /* ============================================================ HUD DE LEITURA OPERACIONAL (15/10) — o estado do ativo escrito na cena. Haste fina até o ativo + caixa compacta: ID, estado, detalhe/número/relógio. ============================================================ */ .dsc-hudtag{position:absolute; z-index:3; width:0; height:0; pointer-events:none; opacity:0; transition:opacity .6s ease var(--hd, .6s);} [data-dsc].dsc-in .dsc-hudtag{opacity:1;} [data-dsc].dsc-open .dsc-hudtag{opacity:.14; transition-delay:0s;} .hd-dot{position:absolute; left:-4px; top:-4px; width:8px; height:8px; border-radius:50%; background:#fff; box-shadow:0 0 0 4px rgba(255,255,255,.18);} .dsc-hudtag::before{content:""; position:absolute; left:0; bottom:4px; width:1px; height:30px; background:linear-gradient(0deg, rgba(255,255,255,.7), rgba(255,255,255,.15));} .hd-box{position:absolute; left:-14px; bottom:34px; display:grid; gap:3px; min-width:150px; padding:9px 12px 10px; border-radius:10px; white-space:nowrap; background:rgba(8,11,14,.72); border:1px solid rgba(255,255,255,.16); border-left:2px solid var(--v-accent, #fff); backdrop-filter:blur(10px); -webkit-backdrop-filter:blur(10px); box-shadow:0 14px 32px rgba(0,0,0,.35); font-family:'Switzer',system-ui,sans-serif; color:#fff;} .hd-id{font-size:10.5px; font-weight:700; letter-spacing:1.4px; color:rgba(255,255,255,.62);} .hd-state{display:flex; align-items:center; gap:7px; font-size:13.5px; font-weight:650;} .hd-state i{width:7px; height:7px; border-radius:50%; background:#5FD39C; box-shadow:0 0 0 3px rgba(95,211,156,.22); animation:hdPulse 2s ease-in-out infinite;} .hd-state.t-warn i{background:#F2C14E; box-shadow:0 0 0 3px rgba(242,193,78,.22);} @keyframes hdPulse{50%{box-shadow:0 0 0 6px rgba(95,211,156,.06);}} .hd-detail{font-size:12px; color:rgba(255,255,255,.78);} .hd-metric{font-size:13.5px; font-weight:650; font-variant-numeric:tabular-nums;} .hd-clock{font-size:20px; font-weight:650; letter-spacing:.5px; font-variant-numeric:tabular-nums; line-height:1.1;} @media (max-width:760px){ .hd-box{min-width:0; padding:6px 9px 7px; bottom:24px;} .dsc-hudtag::before{height:20px;} .hd-id{font-size:9px;} .hd-state,.hd-metric{font-size:11.5px;} .hd-detail{font-size:10.5px;} .hd-clock{font-size:15px;} } @media (prefers-reduced-motion:reduce){ .dsc-hudtag{opacity:1; transition:none;} .hd-state i{animation:none;} } /* ---------- Glass: balão (estado + sentido) ---------- */ .fgx-drum{display:grid; gap:12px;} .gd-svg{width:100%; height:auto; overflow:visible;} .gd-shell{fill:rgba(255,255,255,.07); stroke:rgba(255,255,255,.55); stroke-width:1.3;} .gd-end{fill:rgba(255,255,255,.04); stroke:rgba(255,255,255,.55); stroke-width:1.3;} .gd-stripe{fill:none; stroke:var(--fg-origin); stroke-width:2; stroke-linecap:round; opacity:.75; stroke-dasharray:10 8; animation:gdSpin 1.1s linear infinite;} @keyframes gdSpin{to{stroke-dashoffset:-36;}} .gd-arrow path{fill:none; stroke:#fff; stroke-width:1.6; stroke-linecap:round; stroke-linejoin:round;} .gd-a-dis,.gd-chute,.gd-s-dis{opacity:0;} .gd-chute path{stroke:rgba(255,255,255,.6); stroke-width:3; stroke-linecap:round;} .gd-chute circle{fill:var(--fg-origin);} .gd-s-mix .gd-stripe{animation:gdSpin 1.1s linear infinite;} .gd-s-dis .gd-stripe{animation:gdSpin 1.1s linear infinite reverse;} .gd-a-mix,.gd-s-mix{animation:gdA2 7s ease-in-out infinite;} .gd-a-dis,.gd-chute,.gd-s-dis{animation:gdB2 7s ease-in-out infinite;} @keyframes gdB2{0%,44%{opacity:0;} 50%,94%{opacity:1;} 100%{opacity:0;}} @keyframes gdA2{0%,44%{opacity:1;} 50%,94%{opacity:0;} 100%{opacity:1;}} .gd-read{display:grid; grid-template-columns:auto 1fr; align-items:center; gap:8px 12px; font-size:12px;} .gd-k{font-size:10.5px; font-weight:700; letter-spacing:.9px; text-transform:uppercase; color:rgba(255,255,255,.5);} .gd-pill{display:inline-flex; gap:4px;} .gd-pill i{font-style:normal; padding:4px 9px; border-radius:999px; border:1px solid rgba(255,255,255,.14); color:rgba(255,255,255,.4);} .gd-pill i.on{color:#fff; border-color:var(--fg-origin); background:color-mix(in srgb, var(--fg-origin) 22%, transparent);} .gd-dir{display:inline-flex; align-items:center; gap:8px;} .gd-dir b{font-weight:650; padding:4px 9px; border-radius:999px; background:rgba(255,255,255,.08);} .gd-dir em{font-style:normal; color:rgba(255,255,255,.45);} .gd-d-mix,.gd-d-dis{opacity:1;} .gd-d-mix{animation:gdHiA 7s ease-in-out infinite;} .gd-d-dis{animation:gdHiB 7s ease-in-out infinite;} @keyframes gdHiA{0%,44%{background:color-mix(in srgb, var(--fg-origin) 40%, transparent); color:#fff;} 50%,94%{background:rgba(255,255,255,.05); color:rgba(255,255,255,.45);} 100%{background:color-mix(in srgb, var(--fg-origin) 40%, transparent); color:#fff;}} @keyframes gdHiB{0%,44%{background:rgba(255,255,255,.05); color:rgba(255,255,255,.45);} 50%,94%{background:color-mix(in srgb, var(--fg-origin) 40%, transparent); color:#fff;} 100%{background:rgba(255,255,255,.05); color:rgba(255,255,255,.45);}} .gd-steps{list-style:none; margin:0; padding:0; display:grid; grid-template-columns:repeat(3,1fr); gap:6px;} .gd-steps li{display:grid; justify-items:start; gap:2px; padding:9px 10px; border-radius:9px; background:rgba(255,255,255,.04); border:1px solid rgba(255,255,255,.08); font-size:12px;} .gd-steps li.is-hi{border-color:color-mix(in srgb, var(--fg-origin) 70%, transparent); background:color-mix(in srgb, var(--fg-origin) 14%, transparent);} .gd-steps b{font-weight:650;} .gd-steps em{font-style:normal; font-size:11px; color:rgba(255,255,255,.6);} .gd-mini{width:16px; height:16px; border-radius:50%; border:1.5px solid rgba(255,255,255,.7); border-left-color:transparent; margin-bottom:3px; animation:gdMini 1.2s linear infinite;} .gd-mini.dis{border-left-color:rgba(255,255,255,.7); border-right-color:transparent; animation-direction:reverse; border-color:var(--fg-origin); border-right-color:transparent;} @keyframes gdMini{to{transform:rotate(360deg);}} .gd-line{margin:0; font-size:12.5px; line-height:1.5; color:rgba(255,255,255,.78);} /* ---------- Glass: horímetro (número + tempo) ---------- */ .fgx-hour{display:grid; gap:12px;} .gh-num{display:flex; align-items:baseline; gap:10px;} .gh-num b{font-size:44px; font-weight:650; letter-spacing:-1px; line-height:1; font-variant-numeric:tabular-nums;} .gh-num span{font-size:12.5px; color:rgba(255,255,255,.66); max-width:140px; line-height:1.3;} .gh-chart{display:grid; gap:8px;} .gh-row{display:grid; grid-template-columns:72px 1fr; align-items:center; gap:10px;} .gh-row em{font-style:normal; font-size:11px; color:rgba(255,255,255,.55);} .gh-track{position:relative; height:16px; border-radius:4px; background:rgba(255,255,255,.05);} .gh-win{position:absolute; top:0; bottom:0; border-radius:4px; background:repeating-linear-gradient(135deg, rgba(255,255,255,.14) 0 4px, rgba(255,255,255,.05) 4px 8px); border:1px solid rgba(255,255,255,.25);} .gh-seg{position:absolute; top:2px; bottom:2px; border-radius:3px; background:var(--fg-origin); transform-origin:left; transform:scaleX(0);} .fg.is-open .gh-seg,.fg[aria-hidden="false"] .gh-seg{animation:ghGrow .6s var(--ease-out, ease) var(--d) forwards;} @keyframes ghGrow{to{transform:none;}} .gh-seg.is-out{background:repeating-linear-gradient(135deg, #F2C14E 0 4px, rgba(242,193,78,.45) 4px 8px);} .gh-flag{position:absolute; bottom:calc(100% + 4px); transform:translateX(-50%); font-size:10px; font-weight:650; color:#F2C14E; white-space:nowrap;} .gh-axis{position:relative; height:14px; margin-left:82px;} .gh-axis span{position:absolute; transform:translateX(-50%); font-size:9.5px; color:rgba(255,255,255,.42); font-variant-numeric:tabular-nums;} .gh-uses{display:flex; flex-wrap:wrap; gap:6px;} .gh-uses span{font-size:11px; padding:4px 9px; border-radius:999px; border:1px solid rgba(255,255,255,.14); color:rgba(255,255,255,.78);} .gh-note{margin:0; font-size:11.5px; line-height:1.45; color:rgba(255,255,255,.6);} /* ---------- Glass: ciclo no local (linha do tempo) ---------- */ .fgx-tl{display:grid; gap:10px;} .gt-head{display:flex; align-items:baseline; justify-content:space-between;} .gt-head span{font-size:10.5px; font-weight:700; letter-spacing:1px; text-transform:uppercase; color:rgba(255,255,255,.55);} .gt-head b{font-size:30px; font-weight:650; letter-spacing:.5px; font-variant-numeric:tabular-nums;} .gt-track{position:relative; height:46px; margin-top:16px;} .gt-span{position:absolute; top:0; height:20px; border-radius:4px; transform-origin:left; transform:scaleX(0);} .fg[aria-hidden="false"] .gt-span{animation:ghGrow .7s var(--ease-out, ease) var(--d) forwards;} .gt-span.t-wait{background:repeating-linear-gradient(135deg, #F2C14E 0 5px, rgba(242,193,78,.5) 5px 10px);} .gt-span.t-work{background:var(--fg-origin); left:auto;} .gt-span b{position:absolute; left:4px; top:26px; font-size:12px; font-weight:650; white-space:nowrap;} .gt-span em{position:absolute; left:4px; top:42px; font-style:normal; font-size:11px; color:rgba(255,255,255,.6); white-space:nowrap;} .gt-span.t-wait b{color:#F2C14E;} .gt-dot{position:absolute; top:4px; left:0; width:12px; height:12px; margin-left:-6px; border-radius:50%; background:#fff; box-shadow:0 0 0 4px rgba(255,255,255,.2); opacity:0;} .fg[aria-hidden="false"] .gt-dot{animation:gtRun 5s linear 1.2s infinite;} @keyframes gtRun{0%{left:0; opacity:1;} 90%{left:100%; opacity:1;} 100%{left:100%; opacity:0;}} .gt-evs{position:relative; height:18px; margin-top:16px;} .gt-ev{position:absolute; top:0; display:flex; align-items:center; gap:6px; font-size:11px; color:rgba(255,255,255,.7); white-space:nowrap;} .gt-ev i{width:8px; height:8px; border-radius:50%; border:1.5px solid #fff;} .gt-ev.is-end{transform:translateX(-100%); flex-direction:row-reverse;} .gt-line{margin:0; font-size:12.5px; line-height:1.5; color:rgba(255,255,255,.78);} @media (prefers-reduced-motion:reduce){ .gd-stripe,.gd-mini,.gd-a-mix,.gd-a-dis,.gd-chute,.gd-d-mix,.gd-d-dis,.gd-s-mix,.gd-s-dis{animation:none !important;} .gd-a-dis,.gd-chute,.gd-s-dis{opacity:0;} .gd-d-mix{background:color-mix(in srgb, var(--fg-origin) 40%, transparent);} .gh-seg,.gt-span{transform:none; animation:none !important;} .gt-dot{display:none;} } .dsc-hudtag.is-left .hd-box{left:auto; right:-14px; border-left:1px solid rgba(255,255,255,.16); border-right:2px solid var(--v-accent, #fff); text-align:right; justify-items:end;} @media (max-width:760px){ .dsc-hudtag:not([data-for="1"]){display:none;} } /* ============================================================ SINAIS OPERACIONAIS COMO HOTSPOTS (15/10) — sem numeração. O sinal é o hotspot: o glyph diz a natureza do dado e cada um tem um microcomportamento próprio (valor que atualiza, câmera que pulsa uma vez, onda de posição, rota que se desenha, engrenagem que gira um passo, condição técnica). Instrumentação da cena, não ícones genéricos. ============================================================ */ .dsc-point.dsc-k{width:32px; height:32px; margin:-16px 0 0 -16px; padding:0; display:grid; place-items:center; color:#fff; background:rgba(7,11,15,.6); border:1px solid color-mix(in srgb, var(--pt-color) 75%, rgba(255,255,255,.6)); box-shadow:0 0 0 3px color-mix(in srgb, var(--pt-color) 22%, transparent), 0 6px 18px rgba(0,0,0,.35); backdrop-filter:blur(8px); -webkit-backdrop-filter:blur(8px); font-size:0;} .dsc-point.dsc-k::after{animation:none; opacity:0;} .dsc-kg{width:18px; height:18px; fill:none; stroke:#fff; stroke-width:1.35; stroke-linecap:round; stroke-linejoin:round; overflow:visible;} .dsc-point.dsc-k[aria-expanded="true"]{background:var(--pt-color);} /* rótulo de hover acima do sinal (as leituras ficam ao lado) */ .dsc-point.dsc-k::before,.dsc-point.dsc-k.label-left::before{left:50%; right:auto; top:auto; bottom:calc(100% + 9px); transform-origin:center bottom; transform:translate(-50%, 4px) scale(.9); box-shadow:inset 0 -2px 0 var(--pt-color);} @media (hover:hover){ [data-dsc]:not(.dsc-open) .dsc-point.dsc-k:hover::before,[data-dsc]:not(.dsc-open) .dsc-point.dsc-k:focus-visible::before{opacity:1; transform:translate(-50%, 0) scale(.89);} } /* leituras ao lado do sinal */ .dsc-kv,.dsc-kev,.dsc-kstat{position:absolute; left:calc(100% + 7px); top:50%; transform:translateY(-50%); display:flex; align-items:center; gap:7px; white-space:nowrap; pointer-events:none; padding:5px 9px; border-radius:7px; background:rgba(7,11,15,.66); border:1px solid rgba(255,255,255,.14); backdrop-filter:blur(8px); -webkit-backdrop-filter:blur(8px); font:600 11px/1 'Switzer',system-ui,sans-serif; color:#fff; letter-spacing:.1px; opacity:0; transition:opacity .5s ease;} .dsc-k.label-left .dsc-kv,.dsc-k.label-left .dsc-kev,.dsc-k.label-left .dsc-kstat{left:auto; right:calc(100% + 7px);} [data-dsc].dsc-in .dsc-kv,[data-dsc].dsc-in .dsc-kev,[data-dsc].dsc-in .dsc-kstat{opacity:1; transition-delay:calc(var(--pi,0) * 160ms + 1.1s);} [data-dsc].dsc-open .dsc-kv,[data-dsc].dsc-open .dsc-kev,[data-dsc].dsc-open .dsc-kstat,[data-dsc].dsc-open .dsc-ktrace{opacity:0 !important; transition-delay:0s;} /* temperatura: valor + faixa */ .dsc-kv b{font-variant-numeric:tabular-nums; font-weight:650; transition:opacity .35s ease;} .dsc-kv b.is-swap{opacity:.2;} .dsc-kv-band{position:relative; width:30px; height:4px; border-radius:3px; background:rgba(255,255,255,.18);} .dsc-kv-band::before{content:""; position:absolute; left:28%; width:44%; top:0; bottom:0; border-radius:3px; background:color-mix(in srgb, var(--pt-color) 70%, transparent);} .dsc-kv-band i{position:absolute; top:-2px; left:46%; width:2px; height:8px; border-radius:1px; background:#fff; transition:left .6s ease;} .dsc-k-temp .kg-fill{stroke:var(--pt-color); stroke-width:2.2; animation:kTemp 3.2s ease-in-out infinite;} @keyframes kTemp{50%{opacity:.45;}} /* câmera: pulsa uma vez quando a cena entra, com o evento registrado */ .dsc-k-cam .kg-rec{fill:var(--pt-color); stroke:none;} .dsc-k-cam::after{opacity:0;} [data-dsc].dsc-in .dsc-k-cam::after{opacity:1; border-color:var(--pt-color); animation:kCam 1.5s ease-out calc(var(--pi,0) * 160ms + 1.2s) 1 both;} @keyframes kCam{0%{transform:scale(1); opacity:.95;} 100%{transform:scale(2.4); opacity:0;}} .dsc-kev::before{content:""; width:6px; height:6px; border-radius:50%; background:var(--pt-color);} .dsc-kev.is-state::before{background:#5FD39C;} /* localização: ondas de transmissão */ .dsc-kwave{position:absolute; inset:-1px; border-radius:50%; border:1px solid color-mix(in srgb, var(--pt-color) 70%, #fff); opacity:0; pointer-events:none;} [data-dsc].dsc-in .dsc-kwave{animation:kWave 3.4s ease-out 1.4s infinite;} [data-dsc].dsc-in .dsc-kwave.w2{animation-delay:2.1s;} @keyframes kWave{0%{transform:scale(1); opacity:.8;} 70%,100%{transform:scale(2.6); opacity:0;}} /* rota: um trecho que se desenha */ .dsc-ktrace{position:absolute; left:calc(100% + 4px); top:-6px; width:58px; height:28px; overflow:visible; pointer-events:none; opacity:.9; transition:opacity .4s ease;} .dsc-k.label-left .dsc-ktrace{left:auto; right:calc(100% + 4px); transform:scaleX(-1);} .dsc-ktrace path{fill:none; stroke:color-mix(in srgb, var(--pt-color) 80%, #fff); stroke-width:1.6; stroke-linecap:round; stroke-dasharray:80; stroke-dashoffset:80;} [data-dsc].dsc-in .dsc-ktrace path{animation:kTrace 5s ease-in-out 1.6s infinite;} @keyframes kTrace{0%{stroke-dashoffset:80; opacity:1;} 45%,75%{stroke-dashoffset:0; opacity:1;} 100%{stroke-dashoffset:0; opacity:0;}} .dsc-k-route .kg-path{stroke:color-mix(in srgb, var(--pt-color) 80%, #fff);} /* estado do ativo: a engrenagem gira um passo */ .kg-gear{transform-origin:10px 10px; transform-box:view-box;} [data-dsc].dsc-in .dsc-k-gear .kg-gear{animation:kGear 3.6s cubic-bezier(.6,0,.3,1) 1.6s infinite;} @keyframes kGear{0%,70%{transform:rotate(0);} 100%{transform:rotate(45deg);}} /* manutenção: condição técnica */ .dsc-kstat i{width:4px; height:11px; border-radius:2px; background:rgba(255,255,255,.55);} .dsc-kstat i.hot{background:#F2C14E; animation:kStat 2.4s ease-in-out infinite;} .dsc-kstat b{font-weight:600; margin-left:3px;} @keyframes kStat{50%{opacity:.35;}} @media (max-width:760px){ .dsc-point.dsc-k{width:28px; height:28px; margin:-14px 0 0 -14px;} .dsc-kg{width:15px; height:15px;} .dsc-kev,.dsc-kstat,.dsc-ktrace{display:none;} .dsc-kv{padding:4px 6px; font-size:10px;} .dsc-kv-band{display:none;} } @media (prefers-reduced-motion:reduce){ .dsc-kwave,.dsc-k-cam::after{display:none;} .kg-gear,.dsc-ktrace path,.kg-fill,.dsc-kstat i.hot{animation:none !important;} .dsc-ktrace path{stroke-dashoffset:0;} .dsc-kv,.dsc-kev,.dsc-kstat{opacity:1;} } /* ---------- Glass: temperatura (valor + faixa) ---------- */ .fgx-thermo{display:grid; gap:10px;} .gth-top{display:flex; align-items:center; justify-content:space-between; gap:10px;} .gth-v{font-size:42px; font-weight:650; letter-spacing:-1px; line-height:1; font-variant-numeric:tabular-nums;} .gth-st{display:inline-flex; align-items:center; gap:7px; font-size:12px; font-weight:600; padding:5px 10px; border-radius:999px; background:rgba(95,211,156,.12); color:#9BE8C2; border:1px solid rgba(95,211,156,.35);} .gth-st i{width:7px; height:7px; border-radius:50%; background:#5FD39C;} .gth-gauge{position:relative; height:10px; margin:6px 0 16px; border-radius:6px; background:rgba(255,255,255,.08);} .gth-band{position:absolute; top:0; bottom:0; border-radius:6px; background:color-mix(in srgb, var(--fg-origin) 45%, transparent); border:1px solid color-mix(in srgb, var(--fg-origin) 80%, transparent);} .gth-mark{position:absolute; top:-5px; width:3px; height:20px; margin-left:-1.5px; border-radius:2px; background:#fff; box-shadow:0 0 0 3px rgba(255,255,255,.15);} .gth-gauge span{position:absolute; top:16px; transform:translateX(-50%); font-size:10.5px; color:rgba(255,255,255,.6); font-variant-numeric:tabular-nums;} .gth-cap{font-size:11px; color:rgba(255,255,255,.55);} /* ---------- Glass: frota no mapa (estado + trajetória) ---------- */ .fgx-fleet{margin:0; display:grid; gap:8px;} .fgx-fleet svg{width:100%; height:auto; overflow:visible;} .fm-trail{fill:none; stroke:color-mix(in srgb, var(--fg-origin) 80%, #fff); stroke-width:2; stroke-linecap:round; stroke-linejoin:round; stroke-dasharray:1; stroke-dashoffset:1;} .fg.is-open .fm-trail{animation:fmDraw 1.6s var(--ease-soft, ease) .3s forwards;} @keyframes fmDraw{to{stroke-dashoffset:0;}} .fm-v{stroke:#0B1015; stroke-width:2; opacity:0; transform-box:fill-box; transform-origin:center;} .fg.is-open .fm-v{animation:fmPop .5s var(--ease-out, ease) var(--d) forwards;} @keyframes fmPop{from{opacity:0; transform:scale(.3);} to{opacity:1; transform:none;}} .fm-v.fm-m{fill:var(--fg-origin);} .fm-v.fm-s{fill:rgba(255,255,255,.55);} .fm-v.fm-i{fill:#F2C14E;} .fgx-fleet figcaption{display:flex; flex-wrap:wrap; justify-content:space-between; gap:6px; font-size:11px; color:rgba(255,255,255,.55);} .fm-leg{display:flex; flex-wrap:wrap; gap:10px;} .fm-l{display:inline-flex; align-items:center; gap:5px; color:rgba(255,255,255,.75);} .fm-l i{width:8px; height:8px; border-radius:50%;} .fm-l.fm-m i{background:var(--fg-origin);} .fm-l.fm-s i{background:rgba(255,255,255,.55);} .fm-l.fm-i i{background:#F2C14E;} /* ---------- Glass: câmera de cabine (cidade → veículo → cabine → condutor → evento) ---------- */ .fgx-cam{display:grid; gap:12px;} .gc-path{list-style:none; margin:0; padding:0; display:flex; flex-wrap:wrap; align-items:center; gap:3px 6px; font-size:10px; font-weight:700; letter-spacing:.9px; text-transform:uppercase;} .gc-path li{color:rgba(255,255,255,.3); transition:color .3s ease;} .gc-path li + li::before{content:"›"; margin-right:6px; color:rgba(255,255,255,.25);} .fg.is-open .gc-path li{animation:gcCrumb .4s ease var(--d) forwards;} .fg.is-open .gc-path li:last-child{animation-name:gcCrumbHi;} @keyframes gcCrumb{to{color:rgba(255,255,255,.75);}} @keyframes gcCrumbHi{to{color:color-mix(in srgb, var(--fg-origin) 80%, #fff);}} .gc-frame{position:relative; margin:0; aspect-ratio:1376 / 768; border-radius:10px; overflow:hidden; background:#05080b; box-shadow:inset 0 0 0 1px rgba(255,255,255,.08);} .gc-from,.gc-img{position:absolute; inset:0; width:100%; height:100%; object-fit:cover; display:block;} .gc-from{transform:scale(3.4); opacity:0;} .gc-img{opacity:0; transform:scale(1.16); transform-origin:68% 52%;} .fg.is-open .gc-from{animation:gcFrom 1s ease-in .05s both;} .fg.is-open .gc-img{animation:gcIn .9s var(--ease-out, ease) .55s forwards;} @keyframes gcFrom{0%{opacity:1; transform:scale(3.4);} 70%{opacity:1;} 100%{opacity:0; transform:scale(7);}} @keyframes gcIn{to{opacity:1; transform:none;}} .gc-frame::after{content:""; position:absolute; inset:0; pointer-events:none; background:radial-gradient(ellipse at 50% 50%, transparent 55%, rgba(0,0,0,.45)); } .gc-hud{position:absolute; z-index:2; font:600 9.5px/1 ui-monospace,'SFMono-Regular',Menlo,monospace; letter-spacing:.8px; color:rgba(255,255,255,.88); padding:4px 6px; border-radius:4px; background:rgba(0,0,0,.45); opacity:0;} .gc-tl{left:8px; top:8px;} .gc-bl{left:8px; bottom:8px;} .fg.is-open .gc-hud{animation:gcFade .4s ease 1.1s forwards;} @keyframes gcFade{to{opacity:1;}} .gc-box{position:absolute; z-index:2; border:1.5px solid var(--fg-origin); border-radius:3px; box-shadow:0 0 0 1px rgba(0,0,0,.25), 0 0 18px color-mix(in srgb, var(--fg-origin) 45%, transparent); clip-path:inset(0 100% 100% 0);} .fg.is-open .gc-box{animation:gcBox .55s var(--ease-out, ease) 1.25s forwards;} @keyframes gcBox{to{clip-path:inset(-30px -200px -10px -10px);}} .gc-box b{position:absolute; left:-1.5px; bottom:calc(100% + 4px); white-space:nowrap; font-size:10.5px; font-weight:700; color:#fff; padding:4px 7px; border-radius:4px; background:var(--fg-origin); opacity:0;} .fg.is-open .gc-box b{animation:gcFade .3s ease 1.65s forwards;} .gc-illu{position:absolute; right:8px; bottom:8px; z-index:2; font-size:9.5px; color:rgba(255,255,255,.7); padding:3px 7px; border-radius:999px; background:rgba(0,0,0,.45);} .gc-meta{display:grid; grid-template-columns:repeat(3,1fr); gap:6px; margin:0;} .gc-meta div{padding:8px 10px; border-radius:8px; background:rgba(255,255,255,.04); border:1px solid rgba(255,255,255,.07);} .gc-meta dt{font-size:9.5px; font-weight:700; letter-spacing:.8px; text-transform:uppercase; color:rgba(255,255,255,.5);} .gc-meta dd{margin:3px 0 0; font-size:13px; font-weight:650; font-variant-numeric:tabular-nums;} .gc-tlx{display:grid; gap:6px;} .gc-tlx-k{font-size:10.5px; font-weight:700; letter-spacing:.8px; text-transform:uppercase; color:rgba(255,255,255,.55);} .gc-track{position:relative; height:4px; margin:30px 0 4px; border-radius:3px; background:rgba(255,255,255,.1);} .gc-track::before{content:""; position:absolute; inset:0; border-radius:3px; background:linear-gradient(90deg, rgba(255,255,255,.25), color-mix(in srgb, var(--fg-origin) 70%, #fff)); transform-origin:left; transform:scaleX(0);} .fg.is-open .gc-track::before{animation:ghGrow 1s var(--ease-out, ease) 1.3s forwards;} .gc-mk{position:absolute; top:50%; opacity:0;} .fg.is-open .gc-mk{animation:gcFade .35s ease var(--d) forwards;} .gc-mk i{position:absolute; left:-5px; top:-5px; width:10px; height:10px; border-radius:50%; background:#F2C14E; box-shadow:0 0 0 3px rgba(242,193,78,.2);} .gc-mk.is-now i{background:var(--fg-origin); box-shadow:0 0 0 3px color-mix(in srgb, var(--fg-origin) 30%, transparent);} .gc-mk b{position:absolute; bottom:12px; left:0; transform:translateX(-50%); white-space:nowrap; font-size:11px; font-weight:650;} .gc-mk em{position:absolute; top:10px; left:0; transform:translateX(-50%); font-style:normal; font-size:10px; color:rgba(255,255,255,.55); font-variant-numeric:tabular-nums;} .gc-mk.is-now b{transform:translateX(-90%);} .gc-mk.is-now em{transform:translateX(-90%);} .gc-ends{display:flex; justify-content:space-between; font-size:10px; color:rgba(255,255,255,.4); margin-top:12px; font-variant-numeric:tabular-nums;} @media (prefers-reduced-motion:reduce){ .gc-from{display:none;} .gc-img,.gc-hud,.gc-box b,.gc-mk{opacity:1; transform:none; animation:none !important;} .gc-box{clip-path:none; animation:none !important;} .gc-track::before{transform:none; animation:none !important;} .gc-path li{color:rgba(255,255,255,.75); animation:none !important;} .fm-trail{stroke-dashoffset:0; animation:none !important;} .fm-v{opacity:1; animation:none !important;} } .dsc-kv-st{font-style:normal; font-weight:500; color:rgba(255,255,255,.72); margin-left:-3px;} @media (max-width:760px){ .dsc-kv-st{display:none;} } .proof-items{grid-auto-flow:row dense;} .proof-items.n6 > .pf-fact:last-child{grid-column:1 / -1;} .proof-items.n4:has(> .pf-fact) > .pf-quote:not(:first-child){grid-column:1 / -1;} @media (max-width:900px){ .proof-items.n6 > .pf-fact:last-child{grid-column:auto;} }