/* ==========================================================================
BASE.CSS — Variables, reset y fondo global
Proyecto: RelaxInGame
Primera hoja que carga TODA la pagina: aqui viven las variables que usan
las demas, asi que sin esto el resto del CSS se queda sin valores.
La navegacion, que antes tambien estaba aqui, vive en components/nav.css.
========================================================================== */
/* --------------------------------------------------------------------------
1. FUENTES
--------------------------------------------------------------------------
La fuente se carga ademas con en el de cada pagina. Ese
es el que manda: un @import dentro del CSS bloquea el renderizado
porque el navegador no lo descubre hasta haber bajado y parseado esta
hoja. Se deja como red de seguridad, pero el deberia ir siempre.
-------------------------------------------------------------------------- */
@import url('https://fonts.googleapis.com/css2?family=Plus+Jakarta+Sans:wght@400;600;700;800&family=Teko:wght@500;700&display=swap');
/* --------------------------------------------------------------------------
2. VARIABLES (tema oscuro por defecto)
-------------------------------------------------------------------------- */
:root {
/* Backgrounds */
--bg-dark: #141418;
--bg-card: #1c1c21;
--bg-input: #26262d;
/* Superficies derivadas. Antes no estaban declaradas: cada uso repetia
el color como valor de respaldo. Declaradas aqui para cambiarlas en
un solo sitio. */
--bg-elevated: rgba(255,255,255,.04);
--bg-secondary: rgba(255,255,255,.04);
--bg-hover: rgba(255,255,255,.06);
/* Marca */
--valorant-red: #ff4655;
/* Texto */
--text-white: #ffffff;
--text-gray: #9ca3af;
--text-muted: #64748b;
/* Acentos */
--green: #34d399;
--amber: #fbbf24;
--purple: #a78bfa;
--blue: #60a5fa;
/* Bordes */
--border: #2e2e36;
--border-subtle: rgba(255,255,255,.08);
--border-hover: rgba(255,255,255,.15);
/* Marca global (neutro, independiente de juego) */
--brand: #ffffff;
--brand-accent: #818cf8; /* indigo suave — swap por juego */
--brand-accent-hover: #6366f1;
/* Ancho maximo del contenido de pagina. Lo usan los contenedores de
perfil, val-home, lineups, leaderboard, nav, footer... Cambiar aqui el
ancho de todo el sitio de una vez. Las paginas estrechas a proposito
(landing, contacto, premium) NO lo usan. */
--page-max: 1440px;
/* ── Escala de espaciado (padding / margin / gap) ── */
--sp-1: 4px;
--sp-2: 6px;
--sp-3: 8px;
--sp-4: 10px;
--sp-5: 12px;
--sp-6: 14px;
--sp-7: 16px;
--sp-8: 20px;
--sp-9: 24px;
--sp-10: 32px;
--sp-11: 40px;
--sp-12: 48px;
/* Por encima de --sp-12 no hay token: los pocos valores mayores (56, 64,
80px) son alturas o margenes de seccion muy concretos, no espaciado
reutilizable, y se escriben directamente donde hacen falta. */
/* ── Escala de radios ──────────────────────────────────────────────
Multiplos de 4. La escala anterior (6/10/16) no coincidia con lo que
se usaba de verdad: el radio mas frecuente del proyecto era 8px y no
tenia token, asi que casi todo el CSS escribia el numero a pelo.
Los valores intermedios (6, 10, 14) se han redondeado al escalon mas
cercano. -------------------------------------------------------- */
--radius-xs: 4px; /* para etiuetas */
--radius-sm: 8px; /* el mas usado */
--radius-md: 12px; /* pala los botones */
--radius-lg: 16px; /* para las cards*/
--radius-xl: 20px;
--radius-2xl: 24px;
--radius-pill: 9999px;
--radius-circle: 50%;
/* ── Escala tipografica ────────────────────────────────────────────
El proyecto tenia 515 font-size con 64 valores distintos: solo entre
.6rem y .95rem convivian catorce escalones (.68, .7, .72, .73, .74,
.75...), diferencias de menos de un pixel imposibles de elegir con
criterio. Estos 13 pasos agrupan aquello; el redondeo maximo aplicado
fue de .05rem salvo en los titulos grandes.
------------------------------------------------------------------ */
--fs-3xs: .6rem; /* badges y etiquetas diminutas */
--fs-2xs: .65rem;
--fs-xs: .72rem; /* metadatos, subtitulos de tarjeta */
--fs-sm: .8rem; /* texto secundario */
--fs-md: .88rem; /* texto normal de la interfaz */
--fs-lg: .95rem;
--fs-xl: 1.1rem; /* titulo de seccion */
--fs-2xl: 1.3rem;
--fs-3xl: 1.5rem;
--fs-4xl: 1.75rem;
--fs-5xl: 2rem; /* titulo de pagina */
--fs-6xl: 2.5rem;
--fs-7xl: 3rem; /* hero */
/* ── Grosores de fuente ────────────────────────────────────────────
Ya estaban casi unificados (700 / 600 / 800 cubrian el 96%); esto
solo les pone nombre y absorbe los cuatro "bold" sueltos, que es
exactamente lo mismo que 700. ------------------------------------ */
--fw-medium: 500;
--fw-semibold: 600;
--fw-bold: 700; /* el mas usado */
--fw-extrabold: 800;
--fw-black: 900;
/* ── Transiciones ──────────────────────────────────────────────────
Habia 47 formas distintas para 114 usos, casi todas variaciones de
la misma duracion. Estas son las tres velocidades reales del sitio.
Se aplican a propiedades concretas, nunca a "all": animar all hace
que el navegador vigile propiedades que no queremos animar.
------------------------------------------------------------------ */
--t-fast: .15s; /* hovers y cambios de color */
--t-normal: .2s; /* botones y bordes */
--t-slow: .4s; /* barras de progreso, paneles */
/* ── Sombras ───────────────────────────────────────────────────────
Solo se tokenizan las de ELEVACION (la sombra negra que separa un
elemento del fondo) y el anillo de foco, que si se repiten. Los
resplandores de color —rareza de logro, medalla de podio, color de
agente— se quedan escritos donde estan: son parte del dato que
representan, no una decision de tema.
------------------------------------------------------------------ */
--shadow-sm: 0 4px 12px rgba(0,0,0,.2); /* sin usar aun; escalon bajo de la escala */
--shadow-md: 0 8px 24px rgba(0,0,0,.25); /* el mas usado */
--shadow-lg: 0 12px 40px rgba(0,0,0,.35);
--shadow-xl: 0 24px 64px rgba(0,0,0,.45);
--shadow-focus: 0 0 0 2px rgba(var(--brand-accent-rgb, 129,140,248), .35);
/* ── Capas (z-index) ───────────────────────────────────────────────
Antes cada componente elegia su numero a ojo y se veian saltos como
999 / 1000 / 1100 / 9999, senal de que alguien fue subiendo hasta que
funciono. Estos escalones respetan el orden que ya habia, dejando
hueco entre ellos para meter capas nuevas sin tocar las demas.
------------------------------------------------------------------ */
--z-behind: -1; /* decoracion detras del contenido */
--z-base: 1; /* contenido normal sobre el fondo */
--z-raised: 2; /* elemento elevado dentro de su tarjeta */
--z-tooltip: 10; /* tooltips de graficas y minimapa */
--z-sidenav: 20; /* nav lateral de perfil */
--z-subnav: 40; /* subnav de juego y de perfil */
--z-navbar: 50; /* barra superior fija */
--z-dropdown: 900; /* desplegables del nav */
--z-modal: 1000; /* overlay del modal de partida */
--z-modal-top: 1100;/* overlay del modal de lineup */
--z-notif: 1200; /* dropdown de notificaciones (sobre todo)*/
/* ── Tarjetas de perfil (Favorite Agents, Maps, Roles, Stats) ──────
No son una escala aparte, son un preset: dan nombre a la combinacion
concreta que usan estas tarjetas para poder ajustarlas todas a la vez.
Por eso apuntan a las escalas generales en vez de traer sus propios
numeros, que era lo que hacian antes (.9rem, .68rem, 13px: valores
sueltos que no coincidian con ningun escalon).
------------------------------------------------------------------ */
--pcard-pad: var(--sp-6); /* 14px, antes 13 */
--pcard-radius: var(--radius-md);
--pcard-icon: var(--sp-11); /* 40px */
--pcard-icon-radius: var(--radius-sm);
--pcard-name-fs: var(--fs-md); /* .88, antes .9 */
--pcard-sub-fs: var(--fs-xs); /* .72, igual */
--pcard-stat-fs: var(--fs-md); /* .88, antes .9 */
--pcard-stat-lbl-fs: var(--fs-2xs); /* .65, antes .68 */
--pcard-stat-pad: var(--sp-2) var(--sp-1);
}
/* ── Tema por juego ── */
.game-val {
--brand-accent: #ff4655;
--brand-accent-hover: #e03e4c;
--brand-accent-rgb: 255,70,85;
}
.game-2xko {
--brand-accent: #CDF564;
--brand-accent-hover: #AED055;
--brand-accent-rgb: 205,245,100;
}
.game-fortnite {
--brand-accent: #50C5F0;
--brand-accent-hover: #44A7CC;
--brand-accent-rgb: 80,197,240;
}
.game-minecraft {
--brand-accent: #6CBB3C;
--brand-accent-hover: #57A02F;
--brand-accent-rgb: 108,187,60;
}
/* El tema claro se ha eliminado: la web es solo oscura. Estaba a medias
(no redefinia --brand-accent ni los acentos de color, y las superficies
translucidas blancas eran invisibles sobre fondo claro) y no habia ningun
interruptor en la interfaz para activarlo. */
/* --------------------------------------------------------------------------
3. RESET & BASE
-------------------------------------------------------------------------- */
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
html {
scroll-behavior: smooth;
}
body {
font-family: 'Plus Jakarta Sans', sans-serif;
background-color: var(--bg-dark);
color: #e5e7eb;
min-height: 100vh;
overflow-x: hidden;
}
.valorant-font {
font-family: 'Teko', sans-serif;
}
/* --------------------------------------------------------------------------
4. FONDO ANIMADO
-------------------------------------------------------------------------- */
.gradient-bg {
position: relative;
}
.gradient-bg::before {
content: '';
position: fixed;
inset: 0;
pointer-events: none;
z-index: 0;
background:
radial-gradient(ellipse 70% 50% at 50% -10%, rgba(129, 140, 248, .14) 0%, transparent 65%),
radial-gradient(ellipse 40% 30% at 80% 80%, rgba(167, 139, 250, .05) 0%, transparent 60%);
}
.gradient-bg > * {
position: relative;
z-index: var(--z-base);
}
/* ── Barra de scroll global (modo oscuro, sin flechas de esquina) ── */
* {
scrollbar-width: thin; /* Firefox */
scrollbar-color: var(--border) transparent;
}
::-webkit-scrollbar {
width: 10px;
height: 10px;
}
::-webkit-scrollbar-track {
background: var(--bg-dark);
}
::-webkit-scrollbar-thumb {
background: var(--border);
border-radius: 6px;
border: 2px solid var(--bg-dark); /* deja aire alrededor del thumb */
}
::-webkit-scrollbar-thumb:hover {
background: var(--brand-accent);
}
::-webkit-scrollbar-corner {
background: var(--bg-dark);
}
/* Quita los botones de flecha de las esquinas (todas las variantes) */
::-webkit-scrollbar-button,
::-webkit-scrollbar-button:single-button,
::-webkit-scrollbar-button:double-button,
::-webkit-scrollbar-button:vertical:start,
::-webkit-scrollbar-button:vertical:end,
::-webkit-scrollbar-button:horizontal:start,
::-webkit-scrollbar-button:horizontal:end {
display: none !important;
width: 0;
height: 0;
}