/* ============================================================ TheriansHub — theme.css Variables, tokens, tipografía self-hosted y reset base. Modo claro por defecto + modo oscuro vía clase .dark en . Aplicado por assets/js/theme-toggle.js antes del pintado. ============================================================ */ /* ---------- Fuentes self-hosted (variable fonts) ---------- Esperan los siguientes archivos en assets/fonts/: plus-jakarta-sans.woff2 (un solo archivo cubre weight 200–800) fraunces.woff2 (un solo archivo cubre weight 100–900) */ @font-face { font-family: 'Plus Jakarta Sans'; src: url('../fonts/plus-jakarta-sans.woff2') format('woff2-variations'); font-weight: 200 800; font-style: normal; font-display: swap; } @font-face { font-family: 'Fraunces'; src: url('../fonts/fraunces.woff2') format('woff2-variations'); font-weight: 100 900; font-style: normal; font-display: swap; } /* ---------- Tokens (modo claro por defecto) ---------- */ :root { /* Marca */ --color-brand: #1D9E75; --color-brand-hover: #18895F; --color-brand-soft: rgba(29, 158, 117, 0.12); /* Superficies y texto */ --color-bg: #FFFFFF; --color-surface: #FAFAFA; --color-surface-2: #F3F4F6; --color-text: #0F1419; --color-text-muted: #57606A; --color-border: #E5E7EB; --color-accent: var(--color-brand); /* Acciones (feed) */ --color-like: #ED4956; --color-danger: var(--color-like); /* alias semántico p/ acciones destructivas (logout) */ /* Tipografía */ --font-sans: 'Plus Jakarta Sans', system-ui, -apple-system, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif; --font-serif: 'Fraunces', Georgia, 'Times New Roman', serif; /* Radios */ --radius-sm: 6px; --radius-md: 10px; --radius-lg: 16px; --radius-xl: 24px; --radius-full: 9999px; /* Espaciado (base 4) */ --space-1: 0.25rem; --space-2: 0.5rem; --space-3: 0.75rem; --space-4: 1rem; --space-5: 1.25rem; --space-6: 1.5rem; --space-8: 2rem; --space-10: 2.5rem; --space-12: 3rem; /* Sombras */ --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.04); --shadow-md: 0 4px 12px rgba(0, 0, 0, 0.06); --shadow-lg: 0 12px 32px rgba(0, 0, 0, 0.08); /* Movimiento */ --duration-fast: 120ms; --duration-base: 200ms; --ease: cubic-bezier(0.2, 0, 0.2, 1); } /* ---------- Modo oscuro ---------- */ html.dark { --color-bg: #0B0F0E; --color-surface: #131816; --color-surface-2: #1A211D; --color-text: #ECEDEE; --color-text-muted: #8B95A1; --color-border: #1F2A26; --color-accent: #2BB089; --color-brand-soft: rgba(43, 176, 137, 0.18); --color-like: #FF3B5C; --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.4); --shadow-md: 0 4px 12px rgba(0, 0, 0, 0.5); --shadow-lg: 0 12px 32px rgba(0, 0, 0, 0.6); } /* ---------- Reset / base ---------- */ *, *::before, *::after { box-sizing: border-box; } html { -webkit-text-size-adjust: 100%; text-rendering: optimizeLegibility; } body { margin: 0; font-family: var(--font-sans); font-size: 16px; line-height: 1.5; color: var(--color-text); background-color: var(--color-bg); -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; transition: background-color var(--duration-base) var(--ease), color var(--duration-base) var(--ease); } img, svg, video { max-width: 100%; height: auto; display: block; } a { color: var(--color-accent); text-decoration: none; } a:hover { text-decoration: underline; } h1, h2, h3, h4, h5, h6 { font-family: var(--font-sans); font-weight: 700; line-height: 1.2; margin: 0 0 var(--space-4); color: var(--color-text); } /* Acentos editoriales con serif (titulares destacados, citas, etc.) */ .serif, .acento-serif { font-family: var(--font-serif); font-weight: 600; } /* Accesibilidad: reduce-motion */ @media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; transition-duration: 0.01ms !important; scroll-behavior: auto !important; } } /* ============================================================ TEMPORAL — quitar cuando rediseñemos home/feed/paywall ------------------------------------------------------------ Astra y BuddyPress aplican el fondo verde oscuro del customizer a los contenedores estructurales con alta especificidad, así que nuestras variables --color-bg/--color-text no se ven hasta que forcemos el override aquí. Esto es solo para poder VALIDAR el toggle claro/oscuro visualmente; cuando home/feed/paywall tengan sus propias reglas, este bloque se elimina entero. Reglas: solo contenedores estructurales y wrappers de BP. NO toca botones, links, menús, headers, ni el verde corporativo. ============================================================ */ /* Contenedores base de Astra + wrappers de BuddyPress. !important justificado: Astra inyecta los colores del customizer con selectores muy específicos (p.ej. `body.ast-separate-container #content`, `html body...`). Sin !important nuestra variable pierde la batalla de cascada. Solo se usa aquí, y solo para background/color estructurales. */ body, #page, .site, .site-content, .site-main, main, .ast-container, .entry-content, #buddypress, .buddypress-wrap, .bp-wrap { background-color: var(--color-bg) !important; color: var(--color-text) !important; } /* ============================================================ /TEMPORAL ============================================================ */