*/
.gl-accent-top { position: relative; overflow: hidden; }
.gl-accent-top::before { content:""; position:absolute; top:0; left:0; right:0; height:3px; background: var(--grad-aurora); }
/* Texto com gradiente:
… */
.gl-grad-text {
background: var(--grad-aurora);
-webkit-background-clip: text; background-clip: text;
-webkit-text-fill-color: transparent; color: transparent;
}
/* (o .hl atual do site tambem pode passar a usar o aurora) */
.hl { background-image: var(--grad-aurora); }
/* ============================================================
SCROLL REVEAL — pareie com gleica-v2.js
Marque elementos com data-reveal no HTML.
============================================================ */
[data-reveal] { opacity: 0; transform: translateY(26px); transition: opacity .7s var(--ease-out), transform .7s var(--ease-out); }
[data-reveal].is-in { opacity: 1; transform: none; }
[data-reveal][data-d="1"] { transition-delay: .08s; }
[data-reveal][data-d="2"] { transition-delay: .16s; }
[data-reveal][data-d="3"] { transition-delay: .24s; }
/* ============================================================
BOTAO DE TEMA — opcional, estilize como quiser
============================================================ */
.gl-theme-btn {
display: inline-grid; place-items: center; width: 38px; height: 38px;
border-radius: var(--r-pill); border: 1px solid var(--border-strong);
background: var(--surface-2); color: var(--text); cursor: pointer; font-size: 16px;
transition: border-color var(--dur-2), background var(--dur-2);
}
.gl-theme-btn:hover { border-color: var(--cyan); }
/* ============================================================
KEYFRAMES
============================================================ */
@keyframes gl-grad-pan { 0% { background-position: 0% 50% } 100% { background-position: 200% 50% } }
@keyframes gl-float-y { 0%,100% { transform: translateY(0) } 50% { transform: translateY(-10px) } }
@keyframes gl-shimmer { 0% { background-position: -200% 0 } 100% { background-position: 200% 0 } }
@keyframes gl-reveal-up { from { opacity: 0; transform: translateY(28px); } to { opacity: 1; transform: translateY(0); } }
@keyframes gl-draw-line { to { stroke-dashoffset: 0; } }
/* ============================================================
HERO GRID OVERLAY — malha atmosférica com máscara radial
Adicione
como primeiro filho dentro do .hero
============================================================ */
.gl-hero-grid {
position: absolute; inset: 0; pointer-events: none; z-index: 0;
background-image:
linear-gradient(var(--hairline) 1px, transparent 1px),
linear-gradient(90deg, var(--hairline) 1px, transparent 1px);
background-size: 64px 64px;
-webkit-mask-image: radial-gradient(ellipse 80% 65% at 50% 42%, black, transparent 80%);
mask-image: radial-gradient(ellipse 80% 65% at 50% 42%, black, transparent 80%);
}
/* delay extra */
[data-reveal][data-d="4"] { transition-delay: .32s; }
@media (prefers-reduced-motion: reduce) {
[data-reveal] { opacity: 1 !important; transform: none !important; }
.btn--aurora { animation: none; }
}
/* ============================================================
BASE — transições de tema e qualidade global
============================================================ */
body {
transition: background var(--dur-3) var(--ease-out), color var(--dur-3) var(--ease-out);
}
::selection { background: rgba(34, 211, 238, 0.26); }
::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb {
background: var(--border-strong);
border-radius: 99px;
border: 3px solid var(--bg);
}
::-webkit-scrollbar-thumb:hover { background: var(--text-mute); }
/* ============================================================
CHIPS / TAGS — sistema v2 completo
============================================================ */
.gl-chips { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.gl-chip {
display: inline-flex; align-items: center; gap: 7px;
font-family: var(--font-mono); font-size: 11px;
padding: 5px 11px; border-radius: var(--r-xs); letter-spacing: 0.03em;
}
.gl-chip--cyan { background: rgba(34,211,238,0.12); color: var(--cyan); }
.gl-chip--magenta { background: rgba(232,121,249,0.14); color: var(--magenta); }
.gl-chip--orange { background: rgba(251,146,60,0.14); color: var(--orange); }
.gl-chip--blue { background: rgba(59,130,246,0.14); color: var(--blue); }
.gl-chip--violet { background: rgba(168,85,247,0.14); color: var(--violet); }
.gl-chip--success { background: rgba(52,211,153,0.12); color: var(--success); }
.gl-chip--outline { border: 1px solid var(--border-strong); color: var(--text-dim); }
.gl-chip--pill { border-radius: var(--r-pill); }
/* Status pill com ponto pulsante */
.gl-chip-status {
display: inline-flex; align-items: center; gap: 9px;
padding: 6px 14px; border-radius: var(--r-pill);
border: 1px solid rgba(52,211,153,0.35);
background: rgba(52,211,153,0.07);
font-family: var(--font-mono); font-size: 12px;
color: var(--text-dim); letter-spacing: 0.04em;
}
.gl-chip-dot {
width: 7px; height: 7px; border-radius: 50%;
background: var(--success);
box-shadow: 0 0 10px var(--success);
animation: pulse 2.4s ease-in-out infinite;
flex-shrink: 0;
}
/* ============================================================
INPUT — foco com glow v2
============================================================ */
.gl-input {
background: var(--bg);
border: 1px solid var(--border);
border-radius: var(--r-sm);
padding: 12px 14px;
color: var(--text);
font-size: 15px;
font-family: var(--font-body);
outline: none;
resize: none;
transition: border-color var(--dur-2), box-shadow var(--dur-2);
width: 100%;
}
.gl-input::placeholder { color: var(--text-mute); }
.gl-input:focus {
border-color: var(--cyan);
box-shadow: 0 0 0 3px rgba(34, 211, 238, 0.16);
}
/* ============================================================
TEMA CLARO — overrides de componentes com cores hardcoded
============================================================ */
[data-theme="light"] .nav { background: rgba(244, 241, 234, 0.88); }
[data-theme="light"] .nav--scrolled {
background: rgba(244, 241, 234, 0.97) !important;
box-shadow: 0 1px 0 var(--border), 0 4px 16px rgba(30,40,80,0.06) !important;
}
[data-theme="light"] .nav-dropdown-card {
background: var(--surface-2);
border-color: var(--border);
box-shadow: 0 12px 32px rgba(30,40,80,0.12), 0 2px 6px rgba(30,40,80,0.06);
}
[data-theme="light"] .nav-dropdown-card a { color: var(--text-dim); }
[data-theme="light"] .nav-dropdown-card a:hover {
background: rgba(30,80,200,0.07);
color: var(--text);
}
[data-theme="light"] .form input,
[data-theme="light"] .form textarea,
[data-theme="light"] .gl-input {
background: var(--surface);
border-color: var(--border);
color: var(--text);
}
[data-theme="light"] .form input::placeholder,
[data-theme="light"] .form textarea::placeholder,
[data-theme="light"] .gl-input::placeholder { color: var(--text-mute); }
[data-theme="light"] .gl-chip-status {
border-color: rgba(52,211,153,0.4);
background: rgba(52,211,153,0.09);
}
[data-theme="light"] .gl-chip--cyan { background: rgba(34,211,238,0.10); }
[data-theme="light"] .gl-chip--magenta { background: rgba(200,90,220,0.10); }
[data-theme="light"] .gl-chip--orange { background: rgba(251,146,60,0.10); }
[data-theme="light"] .gl-chip--blue { background: rgba(30,80,200,0.10); }
[data-theme="light"] ::-webkit-scrollbar-thumb { border-color: var(--bg); }