/* ============================================================ Prisma TI - Acesso Remoto :: Tech HUD design system v2 (FX) Temas via CSS variables (data-theme no ) ============================================================ */ @import url('https://fonts.googleapis.com/css2?family=Chakra+Petch:wght@400;500;600;700&family=JetBrains+Mono:wght@400;500;700&display=swap'); :root, [data-theme="prisma"] { --font-ui: "Chakra Petch", sans-serif; --font-mono: "JetBrains Mono", monospace; --bg: #060a12; --bg-2: #0a1120; --panel: rgba(13,22,38,.72); --panel-solid:#0c1525; --border: rgba(56,189,248,.16); --border-2: rgba(148,163,184,.10); --text:#e6edf6; --muted:#8193ad; --accent:#22d3ee; --accent-2:#a855f7; --accent-3:#ec4899; --ok:#34d399; --danger:#fb7185; --grid: rgba(56,189,248,.045); --glow: rgba(34,211,238,.5); --rain:#22d3ee; } [data-theme="matrix"] { --font-ui:"JetBrains Mono", monospace; --font-mono:"JetBrains Mono", monospace; --bg:#000400; --bg-2:#02140a; --panel:rgba(0,22,8,.6); --panel-solid:#02160b; --border:rgba(34,197,94,.28); --border-2:rgba(34,197,94,.12); --text:#c6f6d5; --muted:#4d8f63; --accent:#22c55e; --accent-2:#16a34a; --accent-3:#86efac; --ok:#4ade80; --danger:#f87171; --grid:rgba(34,197,94,.06); --glow:rgba(34,197,94,.6); --rain:#22c55e; } [data-theme="cyber"] { --font-ui:"Chakra Petch", sans-serif; --font-mono:"JetBrains Mono", monospace; --bg:#0a0512; --bg-2:#14091f; --panel:rgba(26,12,38,.66); --panel-solid:#160a22; --border:rgba(236,72,153,.24); --border-2:rgba(168,85,247,.12); --text:#fbe8ff; --muted:#a878b8; --accent:#f472b6; --accent-2:#22d3ee; --accent-3:#c084fc; --ok:#34d399; --danger:#fb7185; --grid:rgba(236,72,153,.05); --glow:rgba(244,114,182,.6); --rain:#e879f9; } [data-theme="light"] { --font-ui:"Chakra Petch", sans-serif; --font-mono:"JetBrains Mono", monospace; --bg:#eef2f7; --bg-2:#e3e9f2; --panel:rgba(255,255,255,.82); --panel-solid:#fff; --border:rgba(8,145,178,.20); --border-2:rgba(15,23,42,.08); --text:#0f1b2d; --muted:#5b6b82; --accent:#0891b2; --accent-2:#7c3aed; --accent-3:#db2777; --ok:#059669; --danger:#e11d48; --grid:rgba(8,145,178,.06); --glow:rgba(8,145,178,.4); --rain:#0891b2; } * { box-sizing: border-box; } body { margin:0; font-family:var(--font-ui); color:var(--text); background: linear-gradient(var(--grid) 1px, transparent 1px) 0 0 / 38px 38px, linear-gradient(90deg, var(--grid) 1px, transparent 1px) 0 0 / 38px 38px, var(--bg); background-attachment: fixed; transition: background-color .4s ease, color .3s ease; overflow-x: hidden; } /* blobs de luz a deriva */ body::before { content:""; position:fixed; inset:-25%; z-index:0; pointer-events:none; filter: blur(50px); background: radial-gradient(38% 38% at 28% 30%, color-mix(in srgb, var(--accent) 16%, transparent), transparent 70%), radial-gradient(38% 38% at 74% 72%, color-mix(in srgb, var(--accent-2) 16%, transparent), transparent 70%), radial-gradient(30% 30% at 60% 10%, color-mix(in srgb, var(--accent-3) 12%, transparent), transparent 70%); animation: drift 16s ease-in-out infinite alternate; } @keyframes drift { 0%{transform:translate(0,0) scale(1)} 100%{transform:translate(4%,-4%) scale(1.12)} } /* scanlines */ body::after { content:""; position:fixed; inset:0; z-index:1; pointer-events:none; background: repeating-linear-gradient(0deg, transparent 0 2px, rgba(0,0,0,.04) 2px 3px); mix-blend-mode: overlay; } #bg-canvas { position:fixed; inset:0; width:100%; height:100%; z-index:0; opacity:.16; pointer-events:none; } /* linha de varredura global */ .scan-sweep { position:fixed; left:0; right:0; height:140px; top:-140px; z-index:1; pointer-events:none; opacity:.5; background: linear-gradient(180deg, transparent, color-mix(in srgb, var(--accent) 10%, transparent), transparent); animation: scandown 7s linear infinite; } @keyframes scandown { 0%{top:-140px} 100%{top:100%} } .layer { position:relative; z-index:2; } /* tipografia */ .t-text{color:var(--text)} .t-muted{color:var(--muted)} .t-accent{color:var(--accent)} .mono{font-family:var(--font-mono)} .tracking{letter-spacing:.08em} .label{font-size:.68rem;text-transform:uppercase;letter-spacing:.16em;color:var(--muted)} .brand-text{ background:linear-gradient(120deg,var(--accent),var(--accent-2),var(--accent-3)); -webkit-background-clip:text; background-clip:text; color:transparent; } /* painel HUD */ .panel{ position:relative; background:var(--panel); border:1px solid var(--border); border-radius:14px; backdrop-filter:blur(10px); box-shadow:0 10px 40px -20px rgba(0,0,0,.7), inset 0 1px 0 rgba(255,255,255,.04); transition: transform .25s ease, box-shadow .3s ease, border-color .3s ease; } .panel:hover{ transform:translateY(-3px); border-color: color-mix(in srgb, var(--accent) 45%, transparent); box-shadow:0 22px 55px -24px var(--glow), 0 0 0 1px color-mix(in srgb, var(--accent) 22%, transparent), inset 0 1px 0 rgba(255,255,255,.06); } .panel.hud{ animation: breathe 4.5s ease-in-out infinite; } @keyframes breathe{ 0%,100%{ box-shadow:0 10px 40px -20px rgba(0,0,0,.7), inset 0 1px 0 rgba(255,255,255,.04); } 50% { box-shadow:0 12px 46px -18px var(--glow), inset 0 1px 0 rgba(255,255,255,.07); } } .panel.hud::before, .panel.hud::after{ content:""; position:absolute; width:16px; height:16px; pointer-events:none; border:2px solid var(--accent); filter: drop-shadow(0 0 5px var(--glow)); } .panel.hud::before{ top:-1px; left:-1px; border-right:0; border-bottom:0; border-top-left-radius:14px; } .panel.hud::after{ bottom:-1px; right:-1px; border-left:0; border-top:0; border-bottom-right-radius:14px; } /* botoes */ .btn{ font-family:var(--font-ui); font-weight:600; letter-spacing:.04em; border-radius:10px; padding:.6rem 1.1rem; cursor:pointer; border:1px solid transparent; transition:transform .12s, box-shadow .25s, background .2s; position:relative; overflow:hidden; } .btn:active{ transform:translateY(1px); } .btn-accent{ color:#03121a; background:linear-gradient(120deg,var(--accent),var(--accent-2)); box-shadow:0 0 0 1px color-mix(in srgb,var(--accent) 40%,transparent), 0 8px 24px -10px var(--glow); } .btn-accent:hover{ box-shadow:0 0 0 1px var(--accent), 0 12px 34px -8px var(--glow), 0 0 22px -4px var(--glow); } .btn-accent::after{ content:""; position:absolute; top:0; left:-70%; width:45%; height:100%; background:linear-gradient(120deg, transparent, rgba(255,255,255,.55), transparent); transform:skewX(-20deg); transition:left .55s ease; } .btn-accent:hover::after{ left:130%; } .btn-ghost{ color:var(--text); background:color-mix(in srgb,var(--text) 6%,transparent); border-color:var(--border-2); } .btn-ghost:hover{ border-color:var(--accent); box-shadow:0 0 16px -6px var(--glow); } .link-accent{ color:var(--accent); cursor:pointer; transition:text-shadow .2s; } .link-accent:hover{ text-shadow:0 0 14px var(--glow); } .link-danger{ color:var(--danger); cursor:pointer; } .link-danger:hover{ text-shadow:0 0 14px var(--danger); } /* inputs */ .input{ width:100%; font-family:var(--font-ui); background:color-mix(in srgb,var(--bg-2) 80%,transparent); border:1px solid var(--border-2); color:var(--text); border-radius:10px; padding:.6rem .8rem; outline:none; transition:border-color .2s, box-shadow .2s; } .input:focus{ border-color:var(--accent); box-shadow:0 0 0 3px color-mix(in srgb,var(--accent) 18%,transparent), 0 0 18px -6px var(--glow); } .input::placeholder{ color:var(--muted); } select.input{ appearance:none; } /* nav */ .nav-link{ display:flex; align-items:center; gap:.6rem; padding:.6rem .8rem; border-radius:10px; color:var(--muted); font-weight:500; letter-spacing:.03em; text-decoration:none; border:1px solid transparent; transition:all .18s; } .nav-link:hover{ color:var(--text); background:color-mix(in srgb,var(--accent) 8%,transparent); padding-left:1rem; } .nav-link.active{ color:var(--text); background:linear-gradient(100deg, color-mix(in srgb,var(--accent) 24%,transparent), color-mix(in srgb,var(--accent-2) 16%,transparent), color-mix(in srgb,var(--accent) 24%,transparent)); background-size:200% 100%; border-color:var(--border); box-shadow:inset 2px 0 0 var(--accent), 0 4px 20px -10px var(--glow); animation: sheen 5s linear infinite; } @keyframes sheen{ 0%{background-position:0% 0} 100%{background-position:200% 0} } .nav-link .dot{ width:6px; height:6px; border-radius:99px; background:currentColor; opacity:.5; } .nav-link.active .dot{ background:var(--accent); opacity:1; box-shadow:0 0 10px var(--accent); } /* stat */ .stat-value{ font-family:var(--font-mono); font-weight:700; font-size:2.5rem; line-height:1; animation: textglow 2.8s ease-in-out infinite; } @keyframes textglow{ 0%,100%{ text-shadow:0 0 14px var(--glow); } 50%{ text-shadow:0 0 28px var(--glow), 0 0 44px var(--glow); } } .glow-text{ text-shadow:0 0 18px var(--glow); } /* tabela */ .tbl{ width:100%; border-collapse:collapse; } .tbl thead th{ font-size:.7rem; text-transform:uppercase; letter-spacing:.12em; color:var(--muted); text-align:left; padding:.8rem 1rem; border-bottom:1px solid var(--border-2); } .tbl tbody td{ padding:.8rem 1rem; border-bottom:1px solid var(--border-2); } .tbl tbody tr{ transition: background .2s, box-shadow .2s; } .tbl tbody tr:hover{ background:color-mix(in srgb,var(--accent) 7%,transparent); box-shadow: inset 3px 0 0 var(--accent); } /* badges / status */ .badge{ font-size:.68rem; font-weight:600; padding:.15rem .6rem; border-radius:99px; letter-spacing:.05em; border:1px solid var(--border); } .badge-accent{ color:var(--accent); background:color-mix(in srgb,var(--accent) 12%,transparent); box-shadow:0 0 14px -6px var(--glow); } .badge-ok{ color:var(--ok); background:color-mix(in srgb,var(--ok) 12%,transparent); } .status-dot{ display:inline-block; width:8px; height:8px; border-radius:99px; background:var(--ok); box-shadow:0 0 10px var(--ok); animation:pulse 1.8s infinite; } @keyframes pulse{ 0%,100%{opacity:1; transform:scale(1)} 50%{opacity:.4; transform:scale(.8)} } /* theme switcher */ .theme-seg{ display:flex; gap:4px; padding:4px; border-radius:12px; background:color-mix(in srgb,var(--bg-2) 70%,transparent); border:1px solid var(--border-2); } .theme-seg button{ width:22px; height:22px; border-radius:7px; border:1px solid rgba(255,255,255,.15); cursor:pointer; padding:0; transition:transform .15s, box-shadow .2s; } .theme-seg button:hover{ transform:scale(1.15) rotate(3deg); } .theme-seg button[aria-pressed="true"]{ box-shadow:0 0 0 2px var(--text), 0 0 16px var(--glow); } .sw-prisma{ background:linear-gradient(135deg,#22d3ee,#a855f7,#ec4899); } .sw-matrix{ background:linear-gradient(135deg,#022c12,#22c55e); } .sw-cyber{ background:linear-gradient(135deg,#22d3ee,#f472b6); } .sw-light{ background:linear-gradient(135deg,#e2e8f0,#0891b2); } /* glitch (logo) */ .glitch{ animation: glitch 6s infinite steps(1); } @keyframes glitch{ 0%, 92%, 100%{ filter:none; transform:none; } 93%{ filter: drop-shadow(2px 0 var(--accent-3)) drop-shadow(-2px 0 var(--accent-2)); transform:translateX(2px); } 95%{ filter: drop-shadow(-2px 0 var(--accent-3)) drop-shadow(2px 0 var(--accent)); transform:translateX(-2px); } 97%{ filter:none; transform:none; } } /* reveal com blur+scale */ .reveal{ opacity:0; transform:translateY(14px) scale(.985); filter:blur(7px); animation: rise .6s cubic-bezier(.2,.7,.2,1) forwards; } @keyframes rise{ to{ opacity:1; transform:none; filter:none; } } /* IMPORTANTE: .panel.hud tem especificidade maior e define animation:breathe, sobrescrevendo o rise. Quando o elemento e os dois, rodar AS DUAS animacoes (senao o opacity:0 do reveal fica preso = elemento invisivel). */ .panel.hud.reveal{ animation: rise .6s cubic-bezier(.2,.7,.2,1) forwards, breathe 4.5s ease-in-out .6s infinite; } ::-webkit-scrollbar{ width:9px; height:9px; } ::-webkit-scrollbar-thumb{ background:linear-gradient(var(--accent), var(--accent-2)); border-radius:9px; } /* campo de senha com botao de olho */ .pwd-wrap{ position:relative; } .pwd-wrap .input{ padding-right:2.6rem; } .pwd-eye{ position:absolute; right:.5rem; top:50%; transform:translateY(-50%); background:none; border:0; padding:.25rem; cursor:pointer; color:var(--muted); display:flex; align-items:center; transition:color .2s; } .pwd-eye:hover{ color:var(--accent); } .pwd-eye .ico-off{ display:none; } .pwd-eye.shown .ico-on{ display:none; } .pwd-eye.shown .ico-off{ display:inline; } /* botao de copiar, ao lado do olho (campos so-leitura, ex: senhas por cliente) */ .pwd-wrap.has-copy .input{ padding-right:4.6rem; } .pwd-copy{ position:absolute; right:2.3rem; top:50%; transform:translateY(-50%); background:none; border:0; padding:.25rem; cursor:pointer; color:var(--muted); display:flex; align-items:center; transition:color .2s; } .pwd-copy:hover{ color:var(--accent); } .pwd-copy.copied{ color:var(--ok); } @media (prefers-reduced-motion: reduce){ *, *::before, *::after{ animation:none !important; } .reveal{ opacity:1 !important; transform:none !important; filter:none !important; } } /* fallback: garante que reveal nunca fique preso invisivel se a animacao nao rodar */ .reveal{ animation-fill-mode: both; }