/* ============================================================ THEME — SNAPGET Solo tokens de marca. Para clonar el proyecto (ej. una web dedicada a TikTok o a Instagram) se reemplaza UNICAMENTE este archivo + app/site.py. Nada de esto se repite abajo. ============================================================ */ :root { /* --- Paleta base (oscuro) --- */ --bg: #0b0d12; --bg-soft: #11141c; --surface: #151926; --surface-2: #1c2130; --border: #262c3d; --border-strong: #364059; /* --- Texto --- */ --text: #eef1f8; --text-muted: #99a1b8; --text-dim: #6b7490; /* --- Acentos --- Estos dos mandan sobre TODA la interfaz: botones, enlaces, halos, badges. Cada subdominio los sobreescribe en , asi que tiktok.noxus.lat se ve rosa y youtube.noxus.lat rojo con el mismo CSS. Los derivados se calculan con color-mix para no repetir valores. */ --brand: #7c5cff; --brand-2: #22d3ee; --brand-soft: color-mix(in srgb, var(--brand) 14%, transparent); --brand-glow: color-mix(in srgb, var(--brand) 45%, transparent); /* --- Semanticos --- */ --success: #34d399; --danger: #f87171; --warning: #fbbf24; /* --- Colores por plataforma (chips y badges) --- */ --p-tiktok: #ff0050; --p-instagram: #e1306c; --p-facebook: #1877f2; --p-youtube: #ff0000; --p-twitter: #e7e9ea; --p-pinterest: #e60023; --p-reddit: #ff4500; --p-twitch: #9146ff; --p-generic: var(--brand); /* --- Formas --- */ --radius-sm: 8px; --radius: 14px; --radius-lg: 22px; --radius-full: 999px; /* --- Sombras --- */ --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.4); --shadow: 0 10px 30px rgba(0, 0, 0, 0.45); --shadow-brand: 0 8px 30px var(--brand-glow); /* --- Tipografia --- */ --font: "Plus Jakarta Sans", "Segoe UI", system-ui, -apple-system, sans-serif; /* --- Layout --- */ --container: 1120px; --header-h: 68px; /* --- Movimiento --- */ --ease: cubic-bezier(0.22, 1, 0.36, 1); --fast: 0.18s var(--ease); --normal: 0.32s var(--ease); /* --- Scrollbar --- */ --scroll-track: var(--bg-soft); --scroll-thumb: var(--border-strong); --scroll-thumb-hover: var(--brand); /* --- Z-index --- */ --z-header: 50; --z-modal: 90; --z-toast: 9999; } /* Tema claro: se activa con . El resto del CSS solo usa las variables, asi que no hay nada que duplicar. */ :root[data-theme="light"] { --bg: #f6f7fb; --bg-soft: #ffffff; --surface: #ffffff; --surface-2: #f1f3f9; --border: #e2e6f0; --border-strong: #cdd4e4; --text: #10131c; --text-muted: #5a6377; --text-dim: #8b93a7; --shadow: 0 10px 30px rgba(16, 19, 28, 0.1); --scroll-track: var(--surface-2); } * { box-sizing: border-box; } html { scroll-behavior: smooth; } body { margin: 0; background: var(--bg); color: var(--text); font-family: var(--font); line-height: 1.6; -webkit-font-smoothing: antialiased; } /* Fondo con dos halos de marca. Cambia --brand y cambia el ambiente entero. */ body::before { content: ""; position: fixed; inset: 0; z-index: -1; pointer-events: none; background: radial-gradient(60rem 40rem at 15% -10%, var(--brand-soft), transparent 60%), radial-gradient(45rem 35rem at 95% 0%, rgba(34, 211, 238, 0.1), transparent 60%); } a { color: inherit; text-decoration: none; } img { max-width: 100%; display: block; } ::selection { background: var(--brand); color: #fff; }