/* Risk Raiders — camada visual. Não toca em dados nem em lógica. Instalar: no . Para desligar, apaga essa linha. */ /* Fontes: serve os .woff2 do teu domínio e declara os @font-face antes deste ficheiro. Space Grotesk é variável — um ficheiro cobre 400-700. */ :root { /* fundo */ --rr-bg: #07080C; --rr-bg-2: #0A0C12; --rr-bg-3: #0B1017; --rr-panel: #10141C; --rr-field: #0F131C; /* linhas */ --rr-line: #151A26; --rr-line-2: #1B2230; --rr-line-3: #1E2536; --rr-line-4: #26303F; /* texto */ --rr-ink: #F4F7FB; --rr-ink-2: #E8ECF5; --rr-ink-3: #C3CAD9; --rr-ink-4: #8D96AB; --rr-ink-5: #6E7789; /* acentos */ --rr-green: #4ADE80; --rr-green-2: #22C55E; --rr-green-3: #86EFAC; --rr-green-dim: #1E3A2A; --rr-amber: #E0B341; --rr-amber-2: #E9A23B; --rr-red: #F87171; --rr-red-dim: #3A1F22; --rr-blue: #6EA8FE; --rr-blue-2: #93C5FD; --rr-blue-3: #60A5FA; --rr-violet: #A78BFA; /* tipos */ --rr-sans: 'Space Grotesk', system-ui, sans-serif; --rr-mono: 'IBM Plex Mono', ui-monospace, monospace; /* forma */ --rr-r-sm: 7px; --rr-r: 9px; --rr-r-lg: 12px; --rr-r-xl: 14px; --rr-ease: cubic-bezier(.2, .7, .2, 1); } /* Nenhum selector de elemento: ligar o ficheiro não muda nada até aplicares uma classe. Para o fundo e o texto base usa o teu CSS. */ .rr-mono { font-family: var(--rr-mono); } .rr-h { font-family: var(--rr-sans); font-weight: 700; letter-spacing: -.02em; line-height: 1.06; text-wrap: balance; color: var(--rr-ink); } .rr-link { color: var(--rr-green); text-decoration: none; } .rr-link:hover { color: var(--rr-green-3); } /* ── rótulos de secção ─────────────────────────────────────── */ .rr-label { font-family: var(--rr-mono); font-size: 10px; font-weight: 500; letter-spacing: .14em; text-transform: uppercase; color: var(--rr-ink-4); } /* ── cards ─────────────────────────────────────────────────── */ .rr-card { border: 1px solid var(--rr-line-2); border-radius: var(--rr-r-lg); background: linear-gradient(180deg, #0D1017, var(--rr-bg-2)); padding: 20px; font-family: var(--rr-sans); color: var(--rr-ink-3); } /* só para cards novos: empilha com gap. Não apliques a cards que já têm layout próprio — aí o rr-card sozinho é o que queres. */ .rr-card--stack { display: flex; flex-direction: column; gap: 11px; } .rr-card--lift { transition: transform .26s var(--rr-ease), border-color .26s ease; } .rr-card--lift:hover { transform: translateY(-3px); border-color: var(--rr-line-4); } .rr-panel { font-family: var(--rr-sans); color: var(--rr-ink-3); border: 1px solid var(--rr-line-2); border-radius: var(--rr-r-xl); background: var(--rr-bg-3); padding: 26px; } .rr-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 230px), 1fr)); gap: 14px; } /* ── valores grandes ───────────────────────────────────────── */ .rr-value { font-family: var(--rr-sans); font-size: clamp(22px, 3vw, 32px); font-weight: 700; letter-spacing: -.03em; color: var(--rr-ink); } .rr-value--lg { font-size: clamp(30px, 5vw, 44px); line-height: 1.06; } .rr-value--fixed { font-size: 26px; } .rr-up { color: var(--rr-green); } .rr-down { color: var(--rr-red); } .rr-flat { color: var(--rr-amber); } /* ── badges e chips ────────────────────────────────────────── */ .rr-badge { display: inline-flex; align-self: flex-start; font-family: var(--rr-sans); align-items: center; gap: 7px; padding: 5px 12px; border-radius: 999px; font-size: 12px; font-weight: 500; white-space: nowrap; } .rr-badge--green { background: rgba(74, 222, 128, .12); color: var(--rr-green); } .rr-badge--amber { background: rgba(224, 179, 65, .12); color: var(--rr-amber); } .rr-badge--red { background: rgba(248, 113, 113, .12); color: var(--rr-red); } .rr-badge--blue { background: rgba(96, 165, 250, .12); color: var(--rr-blue-2); } .rr-badge--mute { background: #131926; color: var(--rr-ink-4); } .rr-badge__dot { width: 7px; height: 7px; border-radius: 50%; background: currentColor; flex: none; } .rr-chip { font-family: var(--rr-sans); padding: 9px 16px; border: 1px solid var(--rr-line-2); border-radius: 999px; background: transparent; font-size: 13px; color: var(--rr-ink-3); cursor: pointer; white-space: nowrap; transition: border-color .22s ease, background-color .22s ease, color .22s ease; } .rr-chip:hover { border-color: var(--rr-line-4); color: var(--rr-ink); } .rr-chip[aria-pressed="true"], .rr-chip.rr-on { border-color: var(--rr-green); background: rgba(74, 222, 128, .1); color: var(--rr-ink); } .rr-chips { display: flex; gap: 9px; flex-wrap: wrap; } /* ── botões ────────────────────────────────────────────────── */ .rr-btn { display: inline-flex; align-items: center; justify-content: center; gap: 9px; border: none; border-radius: var(--rr-r); background: var(--rr-green-2); color: #04120A; font-family: var(--rr-sans); font-weight: 700; font-size: 14px; padding: 14px 22px; cursor: pointer; transition: background-color .25s ease, transform .25s var(--rr-ease); } .rr-btn:hover { background: var(--rr-green); transform: translateY(-2px); } .rr-btn:disabled, .rr-btn[aria-disabled="true"] { background: #1A2130; color: #6B7385; cursor: not-allowed; transform: none; } .rr-btn--ghost { background: none; border: 1px solid var(--rr-line-3); color: var(--rr-ink-2); font-weight: 600; } .rr-btn--ghost:hover { background: none; border-color: var(--rr-green); } .rr-btn--danger { background: #EF4444; color: #FFF5F5; } .rr-btn--danger:hover { background: var(--rr-red); } /* ── campos ────────────────────────────────────────────────── */ .rr-field { background: var(--rr-field); border: 1px solid var(--rr-line-2); border-radius: 8px; color: var(--rr-ink-2); font-family: var(--rr-sans); font-size: 14px; padding: 12px 14px; transition: border-color .22s ease; } .rr-field:focus { outline: none; border-color: var(--rr-green); } .rr-field::placeholder { color: var(--rr-ink-5); } /* ── tabelas e listas ──────────────────────────────────────── */ .rr-row { display: grid; gap: 14px; align-items: center; padding: 13px 16px; border-bottom: 1px solid #0F131C; transition: background-color .2s ease; } .rr-row:hover { background: #0D1118; } .rr-list { font-family: var(--rr-sans); color: var(--rr-ink-3); border: 1px solid var(--rr-line-2); border-radius: var(--rr-r-lg); background: var(--rr-bg-2); overflow: hidden; } /* ── barra superior ───────────────────────────────────────── */ .rr-topbar { font-family: var(--rr-sans); color: var(--rr-ink-3); display: flex; align-items: center; justify-content: space-between; gap: 16px; flex-wrap: wrap; padding: 14px 26px; border-bottom: 1px solid var(--rr-line); background: rgba(7, 8, 12, .92); backdrop-filter: blur(8px); position: sticky; top: 0; z-index: 40; } /* ── grelha de fundo do banner ─────────────────────────────── */ .rr-banner { position: relative; overflow: hidden; border-bottom: 1px solid var(--rr-line); } .rr-banner::before { content: ''; position: absolute; inset: 0; background-image: linear-gradient(#0E1320 1px, transparent 1px), linear-gradient(90deg, #0E1320 1px, transparent 1px); background-size: 48px 48px; mask-image: radial-gradient(ellipse 70% 80% at 50% 50%, #000 10%, transparent 74%); -webkit-mask-image: radial-gradient(ellipse 70% 80% at 50% 50%, #000 10%, transparent 74%); pointer-events: none; } /* ── o lobo ────────────────────────────────────────────────── */ .rr-wolf { position: relative; width: 100%; max-width: 220px; height: auto; display: block; filter: drop-shadow(0 0 16px rgba(74, 222, 128, .4)); animation: rr-halo 6s ease-in-out infinite; } .rr-wolf-wrap { position: relative; display: flex; justify-content: center; } .rr-wolf-wrap::before { content: ''; position: absolute; top: 46%; left: 50%; width: 20vh; height: 20vh; transform: translate(-50%, -50%); background: radial-gradient(circle, rgba(74, 222, 128, .13) 0%, transparent 66%); filter: blur(18px); animation: rr-aura 7s ease-in-out infinite; pointer-events: none; } /* ── animações ─────────────────────────────────────────────── */ @keyframes rr-rise { from { opacity: 0; transform: translateY(18px); } to { opacity: 1; transform: none; } } @keyframes rr-fade { from { opacity: 0; } to { opacity: 1; } } @keyframes rr-halo { 0%, 100% { filter: drop-shadow(0 0 14px rgba(74, 222, 128, .34)); } 50% { filter: drop-shadow(0 0 28px rgba(74, 222, 128, .62)); } } @keyframes rr-aura { 0%, 100% { opacity: .5; transform: translate(-50%, -50%) scale(1); } 50% { opacity: 1; transform: translate(-50%, -50%) scale(1.14); } } @keyframes rr-blink { 0%, 100% { opacity: 1; } 50% { opacity: .25; } } @keyframes rr-draw { to { stroke-dashoffset: 0; } } @keyframes rr-glyph { 0% { opacity: 0; transform: translateY(8px) scale(.88); } 18% { opacity: 1; transform: translateY(0) scale(1); } 62% { opacity: 1; transform: translateY(-6px) scale(1); } 100% { opacity: 0; transform: translateY(-14px) scale(.92); } } @keyframes rr-ring { 0%, 100% { box-shadow: 0 0 0 0 currentColor; opacity: .9; } 50% { box-shadow: 0 0 0 5px currentColor; opacity: .25; } } @keyframes rr-glowbox { 0%, 100% { box-shadow: 0 0 0 0 rgba(74, 222, 128, 0); } 50% { box-shadow: 0 0 22px 0 rgba(74, 222, 128, .22); } } /* Revelação ao scroll. A regra que esconde depende de .rr-js, que o theme.js põe no como primeira instrução: sem o script, ou se ele falhar antes de arrancar, o conteúdo fica visível. */ .rr-js [data-rr-reveal] { opacity: 0; transform: translateY(18px); } [data-rr-reveal].rr-in { opacity: 1; transform: none; transition: opacity .6s ease, transform .6s var(--rr-ease); } /* marca a piscar, para a fase de ciclo activa */ .rr-active-ring { position: relative; } .rr-active-ring::after { content: ''; position: absolute; inset: -1px; border-radius: inherit; border: 1px solid currentColor; animation: rr-ring 2s ease-in-out infinite; pointer-events: none; } /* traçado dos gráficos — o JS junta o dasharray */ [data-rr-draw] { animation: rr-draw 2.2s var(--rr-ease) forwards; } @media (prefers-reduced-motion: reduce) { .rr-wolf, .rr-wolf-wrap::before, [data-rr-draw], .rr-active-ring::after { animation: none; } .rr-js [data-rr-reveal] { opacity: 1; transform: none; } }