/* ========================================================================= VIZIO SIGNAGE — ENGINE (folha única, agnóstica de marca) Um motor, skins por dados. Nada de cor/fonte/logo hardcoded aqui: tudo vem de variáveis definidas por signage.js a partir do content.json. Alvo: TV 16:9 (1920×1080), vista a 3–5 m. Margens TV-safe ~5%. ========================================================================= */ *,*::before,*::after{box-sizing:border-box;margin:0;padding:0} :root{ /* fallbacks neutros — o content.json sobrescreve via inline style no */ --bg:#0b0f14; --bg2:#121821; --ink:#f5f7fa; --muted:#aeb8c4; --accent:#4a9eff; --accent2:#8ec5ff; --grad:linear-gradient(120deg,#1a2634,#0b0f14); --font-display:'Georgia',serif; --font-body:system-ui,sans-serif; --pattern:none; /* geometria TV-safe: tudo escala com a menor dimensão da viewport */ --safe:5vh; /* margem de segurança de borda */ --u:1.2vh; /* unidade base de espaçamento vertical */ } html,body{height:100%;background:var(--bg);color:var(--ink); font-family:var(--font-body);overflow:hidden; -webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility} /* palco: 16:9 centralizado; letterbox se a tela não for 16:9 (TV vertical etc.) */ #signage{position:fixed;inset:0;background:var(--bg);overflow:hidden;cursor:none} /* ---------- CENA (todas empilhadas; só a ativa aparece) ---------- */ .sg-scene{ position:absolute;inset:0; display:grid;align-content:center; padding:var(--safe) calc(var(--safe) + 2vw); opacity:0;visibility:hidden; transform:scale(1.015); transition:opacity .9s ease, transform 1.2s ease, visibility 0s linear .9s; background:var(--bg); } .sg-scene.is-active{opacity:1;visibility:visible;transform:scale(1); transition:opacity 1s ease, transform 6s ease} .sg-scene::before{ /* textura de marca opcional, discreta */ content:"";position:absolute;inset:0;background:var(--pattern); background-size:cover;background-position:center;opacity:.05;pointer-events:none} /* fundo cheio (foto/gradiente) para cenas cover/gallery */ .sg-bg{position:absolute;inset:0;overflow:hidden;z-index:0} .sg-bg img{width:100%;height:100%;object-fit:cover;object-position:center; transform:scale(1.06);} .is-active .sg-bg.kenburns img{animation:sg-kb 12s ease-out forwards} @keyframes sg-kb{from{transform:scale(1.02)}to{transform:scale(1.14)}} .sg-scrim{position:absolute;inset:0;z-index:1; background:linear-gradient(180deg,rgba(0,0,0,.15) 0%,rgba(0,0,0,.35) 45%,rgba(0,0,0,.78) 100%)} .sg-scrim.side{background:linear-gradient(90deg,rgba(0,0,0,.82) 0%,rgba(0,0,0,.55) 45%,rgba(0,0,0,.12) 100%)} .sg-inner{position:relative;z-index:2;max-width:82vw} /* ---------- TIPOGRAFIA (grande, para leitura a distância) ---------- */ .sg-kicker{font-family:var(--font-body);font-weight:600; letter-spacing:.32em;text-transform:uppercase; font-size:clamp(14px,1.7vh,26px);color:var(--accent); display:flex;align-items:center;gap:.8em;margin-bottom:calc(var(--u)*1.6)} .sg-kicker::before{content:"";width:2.4em;height:2px;background:var(--accent);flex:none} .sg-title{font-family:var(--font-display);font-weight:700;line-height:1.02; font-size:clamp(40px,8.4vh,120px);letter-spacing:-.01em; color:var(--ink);text-wrap:balance} .sg-title em{font-style:italic;color:var(--accent)} .sg-title .grad{background:var(--grad);-webkit-background-clip:text; background-clip:text;color:transparent} .sg-lead{font-size:clamp(20px,3.1vh,44px);line-height:1.4;color:var(--muted); max-width:26ch;margin-top:calc(var(--u)*2)} .sg-scene.center{justify-items:center;text-align:center} .sg-scene.center .sg-kicker{justify-content:center} .sg-scene.center .sg-lead{max-width:34ch} /* ---------- COVER (abertura de marca) ---------- */ .sg-cover{justify-items:center;text-align:center} .sg-logo{display:block;height:auto;filter:drop-shadow(0 4px 24px rgba(0,0,0,.35))} .is-active .sg-logo{animation:sg-rise 1.2s ease both} @keyframes sg-rise{from{opacity:0;transform:translateY(24px) scale(.96)}to{opacity:1;transform:none}} .sg-cover .sg-title{margin-top:calc(var(--u)*2)} .sg-cover .sg-sub{font-size:clamp(18px,2.4vh,34px);color:var(--muted); letter-spacing:.04em;margin-top:calc(var(--u)*1.4)} /* ---------- PILARES / VALORES (grid) ---------- */ .sg-grid{display:grid;gap:calc(var(--u)*2.4);margin-top:calc(var(--u)*3);width:100%} .sg-grid.cols-2{grid-template-columns:repeat(2,1fr)} .sg-grid.cols-3{grid-template-columns:repeat(3,1fr)} .sg-grid.cols-4{grid-template-columns:repeat(4,1fr)} .sg-card{background:rgba(255,255,255,.04);border:1px solid rgba(255,255,255,.10); border-radius:18px;padding:calc(var(--u)*2.6) calc(var(--u)*2.2); display:flex;flex-direction:column;gap:calc(var(--u)*1.1); backdrop-filter:blur(2px)} .is-active .sg-card{animation:sg-rise .9s ease both} .is-active .sg-card:nth-child(2){animation-delay:.12s} .is-active .sg-card:nth-child(3){animation-delay:.24s} .is-active .sg-card:nth-child(4){animation-delay:.36s} .sg-card .ic{width:clamp(48px,7vh,88px);height:auto;object-fit:contain} .sg-card .ic-badge{width:clamp(48px,7vh,84px);height:clamp(48px,7vh,84px); border-radius:14px;display:grid;place-items:center; background:var(--grad);color:var(--bg);font-family:var(--font-display); font-weight:700;font-size:clamp(22px,3.4vh,40px)} .sg-card h3{font-family:var(--font-display);font-weight:700; font-size:clamp(22px,3.4vh,46px);line-height:1.05;color:var(--ink)} .sg-card p{font-size:clamp(15px,1.95vh,26px);line-height:1.4;color:var(--muted)} /* ---------- STATEMENT com imagem lateral ---------- */ .sg-split{display:grid;grid-template-columns:1.15fr .85fr;gap:5vw; align-items:center;width:100%} .sg-split .media{position:relative;aspect-ratio:4/3;border-radius:22px;overflow:hidden; box-shadow:0 30px 80px rgba(0,0,0,.45)} .sg-split .media img{width:100%;height:100%;object-fit:cover} .is-active .sg-split .media img{animation:sg-kb 14s ease-out forwards} /* ---------- PROFILE (card de profissional) ---------- */ .sg-profile{display:grid;grid-template-columns:.8fr 1.2fr;gap:5vw;align-items:center;width:100%} .sg-portrait{position:relative;aspect-ratio:3/4;border-radius:22px;overflow:hidden; background:var(--bg2);box-shadow:0 30px 80px rgba(0,0,0,.45); display:grid;place-items:center;text-align:center} .sg-portrait img{width:100%;height:100%;object-fit:cover} .sg-portrait .ph{padding:8%;color:var(--muted);display:grid;gap:1vh;place-items:center} .sg-portrait .ph svg{width:clamp(56px,9vh,120px);height:auto;opacity:.5} .sg-portrait .ph span{font-size:clamp(13px,1.7vh,22px);letter-spacing:.08em} .sg-portrait .ph b{display:block;font-size:clamp(15px,2vh,26px);color:var(--ink); font-family:var(--font-display);letter-spacing:0} .sg-cred{list-style:none;display:grid;gap:calc(var(--u)*1.2);margin-top:calc(var(--u)*2)} .sg-cred li{display:flex;gap:.7em;align-items:flex-start; font-size:clamp(16px,2.1vh,28px);color:var(--muted)} .sg-cred li b{color:var(--ink);font-weight:600} .sg-cred .tick{color:var(--accent);flex:none;font-weight:700} /* ---------- CONTACT ---------- */ .sg-contact{justify-items:center;text-align:center} .sg-lines{display:grid;gap:calc(var(--u)*1.6);margin-top:calc(var(--u)*3)} .sg-lines .row{display:flex;align-items:center;justify-content:center;gap:.7em; font-size:clamp(20px,3vh,42px);color:var(--ink)} .sg-lines .row svg{width:clamp(24px,3.4vh,44px);height:auto;color:var(--accent);flex:none} .sg-lines .row small{color:var(--muted);font-size:.62em;letter-spacing:.14em; text-transform:uppercase;display:block} /* ---------- HUD: progresso + dots + marca-d'água ---------- */ .sg-top{position:fixed;top:0;left:0;height:5px;z-index:50; background:var(--grad);width:0;box-shadow:0 0 18px var(--accent)} .sg-top.run{transition:width linear} .sg-dots{position:fixed;left:0;right:0;bottom:calc(var(--safe) * .5);z-index:50; display:flex;gap:12px;justify-content:center;pointer-events:none} .sg-dots i{width:10px;height:10px;border-radius:99px;background:rgba(255,255,255,.28); transition:all .5s ease} .sg-dots i.on{width:34px;background:var(--accent)} .sg-wm{position:fixed;right:calc(var(--safe)*.7);bottom:calc(var(--safe)*.5);z-index:50; font-size:clamp(11px,1.3vh,16px);letter-spacing:.22em;text-transform:uppercase; color:rgba(255,255,255,.28)} /* ---------- estados de carga / erro ---------- */ .sg-msg{position:fixed;inset:0;display:grid;place-items:center;text-align:center; color:var(--muted);font-size:clamp(16px,2.2vh,28px);padding:8vw;z-index:100} @media (prefers-reduced-motion:reduce){ .sg-bg img,.is-active .sg-bg.kenburns img,.is-active .sg-split .media img{animation:none!important;transform:none!important} .is-active .sg-logo,.is-active .sg-card{animation:none!important} .sg-scene{transition:opacity .6s ease} }