feat: Rediseño de interfaz con temática de Halloween
- Actualización de estilos CSS en pixel-sections.css para reflejar una paleta de colores suave de Halloween, incluyendo cambios en gradientes, bordes y sombras. - Modificación de elementos en index.ejs para incluir decoraciones de Halloween como calabazas y fantasmas. - Ajustes en layout.ejs y navbar.ejs para incorporar iconos y tooltips relacionados con Halloween. - Creación de un nuevo archivo README para documentar los cambios y la nueva paleta de colores.
This commit is contained in:
379
README/SOFT_HALLOWEEN_PIXEL_ART.md
Normal file
379
README/SOFT_HALLOWEEN_PIXEL_ART.md
Normal file
@@ -0,0 +1,379 @@
|
|||||||
|
# 🎃 Rediseño Pixel Art Suave con Temática de Halloween
|
||||||
|
|
||||||
|
## 📋 Resumen del Cambio
|
||||||
|
|
||||||
|
Transformación del diseño web de Amayo Bot de un estilo "cozy witch" con tonos cálidos a un **pixel art suave con temática de Halloween**, utilizando una paleta de colores púrpura pastel y naranja calabaza.
|
||||||
|
|
||||||
|
---
|
||||||
|
|
||||||
|
## 🎨 Paleta de Colores Halloween
|
||||||
|
|
||||||
|
### Colores Base
|
||||||
|
```css
|
||||||
|
--pixel-bg-dark: #2d1b3d /* Púrpura oscuro (fondo principal) */
|
||||||
|
--pixel-bg-2: #3f2a4f /* Púrpura medio (contenedores) */
|
||||||
|
--pixel-bg-3: #544163 /* Púrpura claro (elementos elevados) */
|
||||||
|
--pixel-border: #6b4f7a /* Púrpura grisáceo (bordes) */
|
||||||
|
```
|
||||||
|
|
||||||
|
### Colores de Acento
|
||||||
|
```css
|
||||||
|
--pixel-pumpkin: #ff9a56 /* Naranja calabaza (CTA principal) */
|
||||||
|
--pixel-accent-2: #9b7bb5 /* Lavanda pastel (secundario) */
|
||||||
|
--pixel-accent-3: #ffc65c /* Amarillo suave (resaltados) */
|
||||||
|
--pixel-accent-4: #e89ac7 /* Rosa pastel (detalles) */
|
||||||
|
--pixel-accent-5: #8dd4a8 /* Menta suave (alternativo) */
|
||||||
|
--pixel-ghost: #e8dff5 /* Blanco fantasma (decoraciones) */
|
||||||
|
```
|
||||||
|
|
||||||
|
### Texto
|
||||||
|
```css
|
||||||
|
--pixel-text: #e8dff5 /* Texto principal (muy legible) */
|
||||||
|
--pixel-text-dim: #b8a8c7 /* Texto secundario */
|
||||||
|
```
|
||||||
|
|
||||||
|
---
|
||||||
|
|
||||||
|
## 🔧 Cambios Técnicos Realizados
|
||||||
|
|
||||||
|
### 1. **Archivo: `pixel-art.css`** (752 líneas)
|
||||||
|
|
||||||
|
#### Variables CSS
|
||||||
|
- ✅ Reemplazadas todas las variables de colores cálidos por la paleta Halloween
|
||||||
|
- ✅ Cambiados colores de fondo de marrón a púrpura
|
||||||
|
- ✅ Acentos cambiados de dorado a naranja calabaza
|
||||||
|
|
||||||
|
#### Tipografía
|
||||||
|
```css
|
||||||
|
h1: color: var(--pixel-pumpkin) con animación softGlow
|
||||||
|
h2: color: var(--pixel-accent-3) con sombra suave
|
||||||
|
h3: color: var(--pixel-accent-2)
|
||||||
|
```
|
||||||
|
|
||||||
|
#### Componentes Actualizados
|
||||||
|
- **`.pixel-box`**:
|
||||||
|
- Border radius: `8px` (suavizado)
|
||||||
|
- Box-shadow: Blur difuminado en lugar de sombras duras
|
||||||
|
- Gradiente púrpura de fondo
|
||||||
|
- Glow interno púrpura/naranja en hover
|
||||||
|
|
||||||
|
- **`.pixel-btn`**:
|
||||||
|
- Gradiente: naranja → púrpura
|
||||||
|
- Border radius: `8px`
|
||||||
|
- Sombras suaves con blur
|
||||||
|
- Hover: reverse gradient + glow naranja
|
||||||
|
- Active: translateY reducido para suavidad
|
||||||
|
|
||||||
|
- **`.pixel-badge`**:
|
||||||
|
- Gradiente naranja/lavanda
|
||||||
|
- Border radius: `6px`
|
||||||
|
- Glow naranja suave
|
||||||
|
- Animación `softFloat` (más lenta y suave)
|
||||||
|
|
||||||
|
- **`.pixel-navbar`**:
|
||||||
|
- Barra inferior con gradiente Halloween (naranja → lavanda → rosa)
|
||||||
|
- Animación `softScroll` (más lenta: 4s)
|
||||||
|
- Box-shadow con blur
|
||||||
|
|
||||||
|
#### Animaciones Nuevas
|
||||||
|
```css
|
||||||
|
@keyframes softGlow /* Brillo suave para títulos */
|
||||||
|
@keyframes softPulse /* Pulso delicado para fondos */
|
||||||
|
@keyframes softScroll /* Scroll suave para navbar */
|
||||||
|
@keyframes softBounce /* Rebote suave para calabazas */
|
||||||
|
@keyframes softFloat /* Flotación suave para fantasmas */
|
||||||
|
@keyframes softSparkle /* Centelleo suave para SVG */
|
||||||
|
@keyframes batFly /* Vuelo de murciélagos */
|
||||||
|
@keyframes twinkle /* Parpadeo de estrellas */
|
||||||
|
```
|
||||||
|
|
||||||
|
### 2. **Nuevas Decoraciones de Halloween**
|
||||||
|
|
||||||
|
#### Calabaza (`.pixel-pumpkin`)
|
||||||
|
- Círculo naranja con border radius 50%
|
||||||
|
- Tallo verde en la parte superior
|
||||||
|
- "Rostro" creado con pseudo-elementos
|
||||||
|
- Box-shadow con inset para profundidad
|
||||||
|
- Animación `softBounce`
|
||||||
|
|
||||||
|
#### Fantasma (`.pixel-ghost`)
|
||||||
|
- Forma redondeada en la parte superior
|
||||||
|
- Base ondulada con radial-gradients
|
||||||
|
- Color blanco fantasma con glow interno
|
||||||
|
- "Ojos y boca" con líneas negras
|
||||||
|
- Animación `softFloat`
|
||||||
|
|
||||||
|
#### Murciélago (`.pixel-bat`)
|
||||||
|
- Forma de alas con clip-path polygon
|
||||||
|
- Cuerpo central oscuro
|
||||||
|
- Movimiento de vuelo con `batFly`
|
||||||
|
- Drop-shadow suave
|
||||||
|
|
||||||
|
#### Estrella Halloween (`.pixel-star-halloween`)
|
||||||
|
- Símbolo ✦ con color amarillo suave
|
||||||
|
- Text-shadow con glow
|
||||||
|
- Animación `twinkle` (parpadeo)
|
||||||
|
|
||||||
|
### 3. **Archivo: `pixel-sections.css`** (381 líneas)
|
||||||
|
|
||||||
|
#### Secciones
|
||||||
|
- Background: gradiente púrpura (`bg-2` → `bg-3`)
|
||||||
|
- Border radius: `8px`
|
||||||
|
- Box-shadow: blur suave en lugar de sombra dura
|
||||||
|
- Glow naranja/púrpura en hover
|
||||||
|
|
||||||
|
#### Elementos de Sección
|
||||||
|
- **h2**: color amarillo suave con sombra difuminada
|
||||||
|
- **h3**: color lavanda pastel
|
||||||
|
- **h4**: color naranja calabaza
|
||||||
|
- **strong**: naranja calabaza
|
||||||
|
- **Listas**: bullets ✦ en color naranja
|
||||||
|
|
||||||
|
#### Botones en Secciones
|
||||||
|
- Gradiente naranja → lavanda
|
||||||
|
- Border radius: `8px`
|
||||||
|
- Hover: reverse gradient + glow naranja + translateY
|
||||||
|
- Transición suave de 0.3s
|
||||||
|
|
||||||
|
#### Cajas y Cards
|
||||||
|
- Border radius: `6px`
|
||||||
|
- Sombras con blur
|
||||||
|
- Glow interno púrpura
|
||||||
|
|
||||||
|
### 4. **Archivo: `index.ejs`**
|
||||||
|
|
||||||
|
#### Hero Section
|
||||||
|
```html
|
||||||
|
<!-- Badge con calabaza y fantasma -->
|
||||||
|
<span class="pixel-pumpkin"></span>
|
||||||
|
<div class="pixel-badge">...</div>
|
||||||
|
<span class="pixel-ghost"></span>
|
||||||
|
|
||||||
|
<!-- Decoraciones -->
|
||||||
|
<span class="pixel-bat"></span>
|
||||||
|
<span class="pixel-star-halloween">✦</span>
|
||||||
|
<span class="pixel-pumpkin"></span>
|
||||||
|
<span class="pixel-star-halloween">✦</span>
|
||||||
|
<span class="pixel-ghost"></span>
|
||||||
|
```
|
||||||
|
|
||||||
|
### 5. **Archivo: `layouts/layout.ejs`**
|
||||||
|
|
||||||
|
#### Footer
|
||||||
|
```html
|
||||||
|
<!-- Status bar con calabaza y fantasma -->
|
||||||
|
<span class="pixel-pumpkin"></span>
|
||||||
|
<span class="pixel-ghost"></span>
|
||||||
|
|
||||||
|
<!-- Copyright con murciélago y estrella -->
|
||||||
|
<span class="pixel-bat"></span>
|
||||||
|
<span class="pixel-star-halloween">✦</span>
|
||||||
|
|
||||||
|
<!-- Botón con emojis Halloween -->
|
||||||
|
<span>🎃</span> Volver arriba <span>👻</span>
|
||||||
|
```
|
||||||
|
|
||||||
|
### 6. **Archivo: `partials/navbar.ejs`**
|
||||||
|
|
||||||
|
#### Logo y Links
|
||||||
|
```html
|
||||||
|
<!-- Logo con calabaza -->
|
||||||
|
<div class="pixel-pumpkin"></div>
|
||||||
|
<span style="color: var(--pixel-pumpkin);">Amayo</span>
|
||||||
|
<span class="pixel-star-halloween">✦</span>
|
||||||
|
|
||||||
|
<!-- Tooltips con emojis -->
|
||||||
|
data-tooltip="🎃 Empieza aquí"
|
||||||
|
data-tooltip="👻 Ayuda"
|
||||||
|
```
|
||||||
|
|
||||||
|
---
|
||||||
|
|
||||||
|
## 🎯 Características del Diseño Suave
|
||||||
|
|
||||||
|
### Contraste Reducido
|
||||||
|
- Sombras con blur en lugar de offset duro
|
||||||
|
- Colores pastel en lugar de saturados
|
||||||
|
- Gradientes graduales de 3 paradas
|
||||||
|
|
||||||
|
### Bordes Redondeados
|
||||||
|
- `border-radius: 8px` en componentes principales
|
||||||
|
- `border-radius: 6px` en elementos pequeños
|
||||||
|
- `border-radius: 4px` en detalles
|
||||||
|
|
||||||
|
### Animaciones Suaves
|
||||||
|
- Duraciones aumentadas: 3-4s (antes 2-3s)
|
||||||
|
- Ease-in-out para transiciones naturales
|
||||||
|
- Movimientos sutiles (6-8px translateY)
|
||||||
|
|
||||||
|
### Grosor de Bordes
|
||||||
|
- Reducido de `4px` a `3px` en la mayoría de casos
|
||||||
|
- Reducido de `6px` a `4px` en sombras
|
||||||
|
|
||||||
|
### Blur y Glow
|
||||||
|
- Box-shadows con blur: `4px 4px 12px` (antes `8px 8px 0`)
|
||||||
|
- Text-shadows con blur: `1px 1px 2px` (antes `2px 2px 0`)
|
||||||
|
- Glows con opacity reducida: `0.1-0.15` (antes `0.15-0.25`)
|
||||||
|
|
||||||
|
---
|
||||||
|
|
||||||
|
## 🌟 Elementos Visuales Clave
|
||||||
|
|
||||||
|
### Degradados Halloween
|
||||||
|
```css
|
||||||
|
/* Botón principal */
|
||||||
|
background: linear-gradient(135deg, #ff9a56 0%, #9b7bb5 100%);
|
||||||
|
|
||||||
|
/* Botón hover */
|
||||||
|
background: linear-gradient(135deg, #9b7bb5 0%, #ff9a56 100%);
|
||||||
|
|
||||||
|
/* Secciones */
|
||||||
|
background: linear-gradient(135deg, #3f2a4f 0%, #544163 100%);
|
||||||
|
|
||||||
|
/* Navbar stripe */
|
||||||
|
background: repeating-linear-gradient(90deg,
|
||||||
|
#ff9a56 0px, #ff9a56 8px,
|
||||||
|
#9b7bb5 8px, #9b7bb5 16px,
|
||||||
|
#e89ac7 16px, #e89ac7 24px
|
||||||
|
);
|
||||||
|
```
|
||||||
|
|
||||||
|
### Efectos de Hover
|
||||||
|
- Buttons: `translateY(-3px)` + brightness(1.1) + glow naranja
|
||||||
|
- Boxes: `translateY(-3px)` + glow mixto púrpura/naranja
|
||||||
|
- Links: gradient underline + text-shadow glow
|
||||||
|
|
||||||
|
---
|
||||||
|
|
||||||
|
## 📱 Responsive
|
||||||
|
|
||||||
|
### Breakpoints Mantenidos
|
||||||
|
```css
|
||||||
|
@media (max-width: 768px) {
|
||||||
|
h1: 20px
|
||||||
|
h2: 16px
|
||||||
|
h3: 14px
|
||||||
|
.pixel-btn: 12px padding, 12px 24px
|
||||||
|
body: 18px
|
||||||
|
}
|
||||||
|
```
|
||||||
|
|
||||||
|
### Decoraciones Adaptativas
|
||||||
|
- Calabazas/fantasmas/murciélagos mantienen tamaño proporcional
|
||||||
|
- Animaciones suaves funcionan bien en móviles
|
||||||
|
|
||||||
|
---
|
||||||
|
|
||||||
|
## ✅ Checklist de Cambios Completos
|
||||||
|
|
||||||
|
### CSS Principal (`pixel-art.css`)
|
||||||
|
- [x] Variables CSS (paleta Halloween)
|
||||||
|
- [x] Tipografía (colores + sombras suaves)
|
||||||
|
- [x] `.pixel-box` (bordes redondeados + sombras suaves)
|
||||||
|
- [x] `.pixel-btn` (gradiente Halloween + hover suave)
|
||||||
|
- [x] `.pixel-badge` (colores Halloween + float suave)
|
||||||
|
- [x] `.pixel-navbar` (stripe Halloween + scroll suave)
|
||||||
|
- [x] Links (color naranja + glow)
|
||||||
|
- [x] Body gradient (púrpura 3-stop)
|
||||||
|
- [x] Grid background (grid púrpura + glow naranja)
|
||||||
|
- [x] Animaciones (todas suavizadas)
|
||||||
|
- [x] Decoración Halloween (calabaza, fantasma, murciélago, estrella)
|
||||||
|
|
||||||
|
### CSS Secciones (`pixel-sections.css`)
|
||||||
|
- [x] Secciones (gradiente púrpura + sombras suaves)
|
||||||
|
- [x] H2/H3/H4 (colores Halloween)
|
||||||
|
- [x] Listas (bullets ✦ naranja)
|
||||||
|
- [x] Botones (gradiente Halloween + hover)
|
||||||
|
- [x] Cards (border-radius + sombras)
|
||||||
|
- [x] Tablas (colores actualizados)
|
||||||
|
- [x] Code blocks (border-radius + colores)
|
||||||
|
|
||||||
|
### HTML Templates
|
||||||
|
- [x] `index.ejs` (decoraciones Halloween en hero)
|
||||||
|
- [x] `layout.ejs` (decoraciones Halloween en footer)
|
||||||
|
- [x] `navbar.ejs` (logo Halloween + tooltips)
|
||||||
|
|
||||||
|
---
|
||||||
|
|
||||||
|
## 🚀 Próximos Pasos
|
||||||
|
|
||||||
|
1. **Reiniciar servidor web** para ver cambios:
|
||||||
|
```bash
|
||||||
|
npm run server
|
||||||
|
```
|
||||||
|
|
||||||
|
2. **Validación visual**:
|
||||||
|
- Verificar paleta de colores
|
||||||
|
- Confirmar suavidad de sombras
|
||||||
|
- Revisar animaciones en diferentes dispositivos
|
||||||
|
- Validar legibilidad del texto
|
||||||
|
|
||||||
|
3. **Feedback del usuario**:
|
||||||
|
- Confirmar que el diseño es "más suave"
|
||||||
|
- Validar que la temática Halloween es apropiada
|
||||||
|
- Ajustar según preferencias
|
||||||
|
|
||||||
|
---
|
||||||
|
|
||||||
|
## 📝 Notas Técnicas
|
||||||
|
|
||||||
|
### Fuentes Usadas
|
||||||
|
- **Press Start 2P**: Títulos y botones (pixel art)
|
||||||
|
- **VT323**: Cuerpo de texto y código (monospace retro)
|
||||||
|
|
||||||
|
### Archivos CSS Creados
|
||||||
|
1. `pixel-art.css` (752 líneas) - Componentes y estilos base
|
||||||
|
2. `pixel-sections.css` (381 líneas) - Overrides para secciones
|
||||||
|
|
||||||
|
### Orden de Carga CSS
|
||||||
|
```html
|
||||||
|
<link rel="stylesheet" href="/assets/css/pixel-art.css">
|
||||||
|
<link rel="stylesheet" href="/assets/css/pixel-sections.css">
|
||||||
|
```
|
||||||
|
|
||||||
|
### Backup Original
|
||||||
|
- Ubicación: `/src/server/views.backup/`
|
||||||
|
- Contiene: Diseño original de glassmorphism
|
||||||
|
|
||||||
|
---
|
||||||
|
|
||||||
|
## 🎨 Comparación Visual
|
||||||
|
|
||||||
|
### Antes (Cozy Witch)
|
||||||
|
- Colores: Marrón, dorado, terracota
|
||||||
|
- Sombras: Duras y offset (8px 8px 0)
|
||||||
|
- Bordes: Cuadrados (border-radius: 0)
|
||||||
|
- Decoraciones: Velas, hojas, monedas
|
||||||
|
- Animaciones: Rápidas (2-3s)
|
||||||
|
|
||||||
|
### Después (Soft Halloween)
|
||||||
|
- Colores: Púrpura, naranja, lavanda
|
||||||
|
- Sombras: Suaves con blur (4px 4px 12px)
|
||||||
|
- Bordes: Redondeados (border-radius: 8px)
|
||||||
|
- Decoraciones: Calabazas, fantasmas, murciélagos
|
||||||
|
- Animaciones: Lentas (3-4s)
|
||||||
|
|
||||||
|
---
|
||||||
|
|
||||||
|
## 🔮 Decisiones de Diseño
|
||||||
|
|
||||||
|
### ¿Por qué púrpura en lugar de negro?
|
||||||
|
- Más suave y menos intimidante
|
||||||
|
- Mejor contraste con naranja
|
||||||
|
- Mantiene el mood de Halloween sin ser sombrío
|
||||||
|
|
||||||
|
### ¿Por qué border-radius en pixel art?
|
||||||
|
- "Soft pixel art" permite suavizar esquinas
|
||||||
|
- Mantiene estética pixelada en decoraciones
|
||||||
|
- Mejora usabilidad (más touch-friendly)
|
||||||
|
|
||||||
|
### ¿Por qué sombras con blur?
|
||||||
|
- Crea profundidad sin dureza
|
||||||
|
- Más moderno y accesible
|
||||||
|
- Reduce fatiga visual
|
||||||
|
|
||||||
|
---
|
||||||
|
|
||||||
|
**Fecha de actualización**: 2025
|
||||||
|
**Versión del diseño**: Soft Halloween Pixel Art v1.0
|
||||||
|
**Estado**: ✅ Completo - Pendiente de validación del usuario
|
||||||
@@ -6,30 +6,32 @@
|
|||||||
/* Fuentes Pixel Art */
|
/* Fuentes Pixel Art */
|
||||||
@import url('https://fonts.googleapis.com/css2?family=Press+Start+2P&family=VT323&display=swap');
|
@import url('https://fonts.googleapis.com/css2?family=Press+Start+2P&family=VT323&display=swap');
|
||||||
|
|
||||||
/* Variables de Color Pixel Art - Cozy Witch Theme */
|
/* Variables de Color Pixel Art - Soft Halloween Theme */
|
||||||
:root {
|
:root {
|
||||||
/* Tonos cálidos de madera y tierra */
|
/* Backgrounds suaves de Halloween */
|
||||||
--pixel-bg-dark: #3d2817; /* Madera oscura */
|
--pixel-bg-dark: #2d1b3d; /* Púrpura oscuro suave */
|
||||||
--pixel-bg-medium: #5c3d2e; /* Madera media */
|
--pixel-bg-medium: #3f2a4f; /* Púrpura medio */
|
||||||
--pixel-bg-light: #7a5243; /* Madera clara */
|
--pixel-bg-light: #544163; /* Lavanda oscuro */
|
||||||
|
|
||||||
/* Acentos mágicos y acogedores */
|
/* Acentos de Halloween suaves */
|
||||||
--pixel-accent-1: #ff6b6b; /* Rojo cálido (pociones) */
|
--pixel-accent-1: #ff9a56; /* Naranja calabaza suave */
|
||||||
--pixel-accent-2: #c77dff; /* Púrpura místico (magia) */
|
--pixel-accent-2: #9b7bb5; /* Púrpura pastel */
|
||||||
--pixel-accent-3: #ffd166; /* Dorado/amarillo (luz de velas) */
|
--pixel-accent-3: #ffc65c; /* Amarillo calabaza */
|
||||||
--pixel-accent-4: #06ffa5; /* Verde menta (hierbas) */
|
--pixel-accent-4: #8dd4a8; /* Verde menta suave */
|
||||||
--pixel-accent-5: #ff8fab; /* Rosa suave (flores) */
|
--pixel-accent-5: #e89ac7; /* Rosa Halloween */
|
||||||
--pixel-accent-6: #4ecdc4; /* Turquesa (cristales) */
|
--pixel-accent-6: #7ec4cf; /* Turquesa fantasma */
|
||||||
|
|
||||||
/* Tonos de texto */
|
/* Tonos de texto suaves */
|
||||||
--pixel-text: #f8e5d7; /* Beige cálido */
|
--pixel-text: #f5e6d3; /* Crema suave */
|
||||||
--pixel-text-dim: #c9a68a; /* Café con leche */
|
--pixel-text-dim: #d4b8a8; /* Beige rosado */
|
||||||
--pixel-border: #2a1810; /* Café muy oscuro */
|
--pixel-border: #4a2f5a; /* Púrpura oscuro borde */
|
||||||
--pixel-shadow: rgba(26, 13, 5, 0.8);
|
--pixel-shadow: rgba(29, 15, 41, 0.6);
|
||||||
|
|
||||||
/* Tonos especiales */
|
/* Tonos especiales Halloween */
|
||||||
--pixel-warm-glow: #ffb347; /* Naranja cálido */
|
--pixel-warm-glow: #ffb86c; /* Naranja brillante suave */
|
||||||
--pixel-night-sky: #4a3b5c; /* Púrpura del atardecer */
|
--pixel-night-sky: #564375; /* Cielo nocturno Halloween */
|
||||||
|
--pixel-pumpkin: #ff9a56; /* Calabaza */
|
||||||
|
--pixel-ghost: #e8dff5; /* Fantasma */
|
||||||
}
|
}
|
||||||
|
|
||||||
/* Reset y Base */
|
/* Reset y Base */
|
||||||
@@ -43,9 +45,9 @@ body {
|
|||||||
font-family: 'VT323', monospace;
|
font-family: 'VT323', monospace;
|
||||||
font-size: 20px;
|
font-size: 20px;
|
||||||
line-height: 1.4;
|
line-height: 1.4;
|
||||||
background: linear-gradient(180deg, var(--pixel-night-sky) 0%, var(--pixel-bg-dark) 100%);
|
background: linear-gradient(180deg, var(--pixel-night-sky) 0%, var(--pixel-bg-dark) 60%, #2a1a3a 100%);
|
||||||
color: var(--pixel-text);
|
color: var(--pixel-text);
|
||||||
text-shadow: 1px 1px 0px rgba(0, 0, 0, 0.3);
|
text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.3);
|
||||||
}
|
}
|
||||||
|
|
||||||
/* Headings Pixel Art */
|
/* Headings Pixel Art */
|
||||||
@@ -61,7 +63,8 @@ h1, h2, h3, h4, h5, h6 {
|
|||||||
h1 {
|
h1 {
|
||||||
font-size: 32px;
|
font-size: 32px;
|
||||||
line-height: 1.6;
|
line-height: 1.6;
|
||||||
animation: pixelGlow 2s ease-in-out infinite;
|
animation: softGlow 3s ease-in-out infinite;
|
||||||
|
color: var(--pixel-pumpkin);
|
||||||
}
|
}
|
||||||
|
|
||||||
h2 {
|
h2 {
|
||||||
@@ -69,14 +72,14 @@ h2 {
|
|||||||
line-height: 1.6;
|
line-height: 1.6;
|
||||||
color: var(--pixel-accent-3);
|
color: var(--pixel-accent-3);
|
||||||
text-shadow:
|
text-shadow:
|
||||||
2px 2px 0px var(--pixel-border),
|
2px 2px 0px rgba(0, 0, 0, 0.4),
|
||||||
0 0 15px var(--pixel-warm-glow);
|
0 0 20px rgba(255, 198, 92, 0.4);
|
||||||
}
|
}
|
||||||
|
|
||||||
h3 {
|
h3 {
|
||||||
font-size: 18px;
|
font-size: 18px;
|
||||||
line-height: 1.6;
|
line-height: 1.6;
|
||||||
color: var(--pixel-accent-5);
|
color: var(--pixel-accent-2);
|
||||||
}
|
}
|
||||||
|
|
||||||
/* Pixel Border Effect */
|
/* Pixel Border Effect */
|
||||||
@@ -97,16 +100,27 @@ h3 {
|
|||||||
}
|
}
|
||||||
|
|
||||||
/* Pixel Box (Contenedores) */
|
/* Pixel Box (Contenedores) */
|
||||||
|
/* Pixel Box Containers */
|
||||||
.pixel-box {
|
.pixel-box {
|
||||||
background: linear-gradient(135deg, var(--pixel-bg-medium) 0%, var(--pixel-bg-light) 100%);
|
background: linear-gradient(135deg,
|
||||||
border: 4px solid var(--pixel-border);
|
var(--pixel-bg-2) 0%,
|
||||||
border-radius: 0;
|
var(--pixel-bg-3) 100%);
|
||||||
box-shadow:
|
border: 3px solid var(--pixel-border);
|
||||||
8px 8px 0 0 rgba(0, 0, 0, 0.5),
|
border-radius: 8px;
|
||||||
inset 0 0 0 2px rgba(255, 179, 71, 0.1),
|
|
||||||
0 0 20px rgba(255, 179, 71, 0.2);
|
|
||||||
padding: 24px;
|
padding: 24px;
|
||||||
|
box-shadow:
|
||||||
|
4px 4px 12px rgba(0, 0, 0, 0.4),
|
||||||
|
inset 0 0 30px rgba(155, 123, 181, 0.1);
|
||||||
position: relative;
|
position: relative;
|
||||||
|
transition: all 0.3s ease;
|
||||||
|
}
|
||||||
|
|
||||||
|
.pixel-box:hover {
|
||||||
|
transform: translateY(-3px);
|
||||||
|
box-shadow:
|
||||||
|
6px 6px 16px rgba(0, 0, 0, 0.5),
|
||||||
|
inset 0 0 35px rgba(155, 123, 181, 0.15),
|
||||||
|
0 0 30px rgba(255, 154, 86, 0.2);
|
||||||
}
|
}
|
||||||
|
|
||||||
.pixel-box::before {
|
.pixel-box::before {
|
||||||
@@ -118,13 +132,13 @@ h3 {
|
|||||||
bottom: -2px;
|
bottom: -2px;
|
||||||
background: linear-gradient(
|
background: linear-gradient(
|
||||||
45deg,
|
45deg,
|
||||||
var(--pixel-warm-glow) 0%,
|
var(--pixel-pumpkin) 0%,
|
||||||
var(--pixel-accent-2) 50%,
|
var(--pixel-accent-2) 50%,
|
||||||
var(--pixel-accent-6) 100%
|
var(--pixel-accent-4) 100%
|
||||||
);
|
);
|
||||||
opacity: 0.15;
|
opacity: 0.1;
|
||||||
z-index: -1;
|
z-index: -1;
|
||||||
animation: cozyPulse 4s ease-in-out infinite;
|
animation: softPulse 4s ease-in-out infinite;
|
||||||
}
|
}
|
||||||
|
|
||||||
/* Botones Pixel Art */
|
/* Botones Pixel Art */
|
||||||
@@ -132,132 +146,135 @@ h3 {
|
|||||||
font-family: 'Press Start 2P', cursive;
|
font-family: 'Press Start 2P', cursive;
|
||||||
font-size: 14px;
|
font-size: 14px;
|
||||||
padding: 16px 32px;
|
padding: 16px 32px;
|
||||||
border: 4px solid var(--pixel-border);
|
border: 3px solid var(--pixel-border);
|
||||||
background: linear-gradient(180deg, var(--pixel-accent-3) 0%, var(--pixel-warm-glow) 100%);
|
background: linear-gradient(135deg, var(--pixel-pumpkin) 0%, var(--pixel-accent-2) 100%);
|
||||||
color: var(--pixel-bg-dark);
|
color: white;
|
||||||
text-transform: uppercase;
|
text-transform: uppercase;
|
||||||
cursor: pointer;
|
cursor: pointer;
|
||||||
position: relative;
|
position: relative;
|
||||||
transition: all 0.1s;
|
transition: all 0.3s ease;
|
||||||
|
border-radius: 8px;
|
||||||
box-shadow:
|
box-shadow:
|
||||||
6px 6px 0 0 rgba(0, 0, 0, 0.6),
|
4px 4px 10px rgba(0, 0, 0, 0.4),
|
||||||
inset -2px -2px 0 0 rgba(0, 0, 0, 0.3),
|
inset 2px 2px 4px rgba(255, 255, 255, 0.15),
|
||||||
inset 2px 2px 0 0 rgba(255, 255, 255, 0.4),
|
inset -2px -2px 4px rgba(0, 0, 0, 0.15);
|
||||||
0 0 15px rgba(255, 179, 71, 0.4);
|
|
||||||
font-weight: bold;
|
font-weight: bold;
|
||||||
overflow: visible;
|
overflow: visible;
|
||||||
|
text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.5);
|
||||||
}
|
}
|
||||||
|
|
||||||
/* Ornamentos decorativos del botón */
|
/* Ornamentos decorativos del botón */
|
||||||
.pixel-btn::before,
|
.pixel-btn::before,
|
||||||
.pixel-btn::after {
|
.pixel-btn::after {
|
||||||
content: '';
|
content: '✦';
|
||||||
position: absolute;
|
position: absolute;
|
||||||
width: 8px;
|
font-size: 12px;
|
||||||
height: 8px;
|
color: var(--pixel-accent-3);
|
||||||
background: var(--pixel-accent-5);
|
text-shadow: 0 0 10px var(--pixel-accent-3);
|
||||||
border: 2px solid var(--pixel-border);
|
opacity: 0.6;
|
||||||
transform: rotate(45deg);
|
transition: all 0.3s ease;
|
||||||
opacity: 0.7;
|
|
||||||
transition: all 0.3s;
|
|
||||||
}
|
}
|
||||||
|
|
||||||
.pixel-btn::before {
|
.pixel-btn::before {
|
||||||
top: -6px;
|
top: -8px;
|
||||||
left: 10px;
|
left: 10px;
|
||||||
}
|
}
|
||||||
|
|
||||||
.pixel-btn::after {
|
.pixel-btn::after {
|
||||||
top: -6px;
|
top: -8px;
|
||||||
right: 10px;
|
right: 10px;
|
||||||
}
|
}
|
||||||
|
|
||||||
.pixel-btn:hover::before,
|
.pixel-btn:hover::before,
|
||||||
.pixel-btn:hover::after {
|
.pixel-btn:hover::after {
|
||||||
opacity: 1;
|
opacity: 1;
|
||||||
transform: rotate(45deg) scale(1.2);
|
transform: scale(1.2);
|
||||||
box-shadow: 0 0 10px var(--pixel-accent-5);
|
text-shadow: 0 0 15px var(--pixel-accent-3);
|
||||||
}
|
}
|
||||||
|
|
||||||
/* SVG icons dentro de botones */
|
/* SVG icons dentro de botones */
|
||||||
.pixel-btn svg {
|
.pixel-btn svg {
|
||||||
filter: drop-shadow(1px 1px 0px rgba(0, 0, 0, 0.5));
|
filter: drop-shadow(1px 1px 2px rgba(0, 0, 0, 0.5));
|
||||||
animation: sparkle 3s ease-in-out infinite;
|
animation: softSparkle 3s ease-in-out infinite;
|
||||||
}
|
}
|
||||||
|
|
||||||
@keyframes sparkle {
|
@keyframes softSparkle {
|
||||||
0%, 100% {
|
0%, 100% {
|
||||||
transform: scale(1) rotate(0deg);
|
transform: scale(1) rotate(0deg);
|
||||||
opacity: 0.7;
|
opacity: 0.8;
|
||||||
}
|
}
|
||||||
50% {
|
50% {
|
||||||
transform: scale(1.1) rotate(5deg);
|
transform: scale(1.05) rotate(3deg);
|
||||||
opacity: 1;
|
opacity: 1;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
.pixel-btn:hover svg {
|
.pixel-btn:hover svg {
|
||||||
animation: sparkle 1.5s ease-in-out infinite;
|
animation: softSparkle 1.8s ease-in-out infinite;
|
||||||
}
|
}
|
||||||
|
|
||||||
/* Efecto de resplandor en hover para botones principales */
|
/* Efecto de resplandor en hover para botones principales */
|
||||||
.pixel-btn:hover {
|
.pixel-btn:hover {
|
||||||
background: linear-gradient(180deg, var(--pixel-warm-glow) 0%, var(--pixel-accent-3) 100%);
|
background: linear-gradient(135deg, var(--pixel-accent-2) 0%, var(--pixel-pumpkin) 100%);
|
||||||
transform: translate(2px, 2px);
|
transform: translateY(-3px);
|
||||||
box-shadow:
|
box-shadow:
|
||||||
4px 4px 0 0 rgba(0, 0, 0, 0.6),
|
6px 6px 16px rgba(0, 0, 0, 0.5),
|
||||||
inset -2px -2px 0 0 rgba(0, 0, 0, 0.3),
|
inset 2px 2px 6px rgba(255, 255, 255, 0.2),
|
||||||
inset 2px 2px 0 0 rgba(255, 255, 255, 0.4),
|
0 0 30px rgba(255, 154, 86, 0.5);
|
||||||
0 0 25px rgba(255, 179, 71, 0.7),
|
filter: brightness(1.1);
|
||||||
0 0 40px rgba(255, 179, 71, 0.3);
|
|
||||||
}
|
}
|
||||||
|
|
||||||
.pixel-btn:active {
|
.pixel-btn:active {
|
||||||
transform: translate(4px, 4px);
|
transform: translateY(-1px);
|
||||||
box-shadow:
|
box-shadow:
|
||||||
2px 2px 0 0 rgba(0, 0, 0, 0.6),
|
3px 3px 8px rgba(0, 0, 0, 0.5),
|
||||||
inset -1px -1px 0 0 rgba(0, 0, 0, 0.3),
|
inset 1px 1px 3px rgba(255, 255, 255, 0.1);
|
||||||
inset 1px 1px 0 0 rgba(255, 255, 255, 0.2);
|
filter: brightness(0.95);
|
||||||
}
|
}
|
||||||
|
|
||||||
.pixel-btn-secondary {
|
.pixel-btn-secondary {
|
||||||
background: linear-gradient(180deg, var(--pixel-accent-2) 0%, var(--pixel-accent-5) 100%);
|
background: linear-gradient(135deg, var(--pixel-accent-2) 0%, var(--pixel-accent-4) 100%);
|
||||||
border-color: var(--pixel-border);
|
border-color: var(--pixel-border);
|
||||||
color: white;
|
color: white;
|
||||||
}
|
}
|
||||||
|
|
||||||
.pixel-btn-secondary:hover {
|
.pixel-btn-secondary:hover {
|
||||||
background: linear-gradient(180deg, var(--pixel-accent-5) 0%, var(--pixel-accent-2) 100%);
|
background: linear-gradient(135deg, var(--pixel-accent-4) 0%, var(--pixel-accent-2) 100%);
|
||||||
color: white;
|
color: white;
|
||||||
|
transform: translateY(-3px);
|
||||||
|
box-shadow:
|
||||||
|
6px 6px 16px rgba(0, 0, 0, 0.5),
|
||||||
|
0 0 30px rgba(155, 123, 181, 0.4);
|
||||||
|
filter: brightness(1.1);
|
||||||
}
|
}
|
||||||
|
|
||||||
/* Navbar Pixel Art */
|
/* Navbar Pixel Art */
|
||||||
.pixel-navbar {
|
.pixel-navbar {
|
||||||
background: linear-gradient(180deg, var(--pixel-bg-medium) 0%, var(--pixel-bg-dark) 100%);
|
background: linear-gradient(180deg, var(--pixel-bg-2) 0%, var(--pixel-bg-dark) 100%);
|
||||||
border-bottom: 4px solid var(--pixel-border);
|
border-bottom: 3px solid var(--pixel-border);
|
||||||
box-shadow:
|
box-shadow:
|
||||||
0 8px 0 0 rgba(0, 0, 0, 0.5),
|
0 6px 12px rgba(0, 0, 0, 0.4),
|
||||||
0 0 20px rgba(255, 179, 71, 0.2);
|
0 0 25px rgba(155, 123, 181, 0.15);
|
||||||
position: relative;
|
position: relative;
|
||||||
}
|
}
|
||||||
|
|
||||||
.pixel-navbar::after {
|
.pixel-navbar::after {
|
||||||
content: '';
|
content: '';
|
||||||
position: absolute;
|
position: absolute;
|
||||||
bottom: -8px;
|
bottom: -6px;
|
||||||
left: 0;
|
left: 0;
|
||||||
right: 0;
|
right: 0;
|
||||||
height: 4px;
|
height: 3px;
|
||||||
background: repeating-linear-gradient(
|
background: repeating-linear-gradient(
|
||||||
90deg,
|
90deg,
|
||||||
var(--pixel-accent-3) 0px,
|
var(--pixel-pumpkin) 0px,
|
||||||
var(--pixel-accent-3) 8px,
|
var(--pixel-pumpkin) 8px,
|
||||||
var(--pixel-warm-glow) 8px,
|
var(--pixel-accent-2) 8px,
|
||||||
var(--pixel-warm-glow) 16px,
|
var(--pixel-accent-2) 16px,
|
||||||
var(--pixel-accent-1) 16px,
|
var(--pixel-accent-4) 16px,
|
||||||
var(--pixel-accent-1) 24px
|
var(--pixel-accent-4) 24px
|
||||||
);
|
);
|
||||||
animation: cozyScroll 3s linear infinite;
|
animation: softScroll 4s linear infinite;
|
||||||
}
|
}
|
||||||
|
|
||||||
/* Código Pixel Art */
|
/* Código Pixel Art */
|
||||||
@@ -280,15 +297,15 @@ pre {
|
|||||||
|
|
||||||
/* Links Pixel Art */
|
/* Links Pixel Art */
|
||||||
a {
|
a {
|
||||||
color: var(--pixel-accent-3);
|
color: var(--pixel-pumpkin);
|
||||||
text-decoration: none;
|
text-decoration: none;
|
||||||
position: relative;
|
position: relative;
|
||||||
transition: all 0.3s ease;
|
transition: all 0.3s ease;
|
||||||
}
|
}
|
||||||
|
|
||||||
a:hover {
|
a:hover {
|
||||||
color: var(--pixel-warm-glow);
|
color: var(--pixel-accent-3);
|
||||||
text-shadow: 0 0 10px var(--pixel-warm-glow);
|
text-shadow: 0 0 12px var(--pixel-accent-3);
|
||||||
}
|
}
|
||||||
|
|
||||||
a::after {
|
a::after {
|
||||||
@@ -298,7 +315,7 @@ a::after {
|
|||||||
left: 0;
|
left: 0;
|
||||||
width: 100%;
|
width: 100%;
|
||||||
height: 2px;
|
height: 2px;
|
||||||
background: linear-gradient(90deg, var(--pixel-accent-3), var(--pixel-warm-glow));
|
background: linear-gradient(90deg, var(--pixel-pumpkin), var(--pixel-accent-2));
|
||||||
transform: scaleX(0);
|
transform: scaleX(0);
|
||||||
transform-origin: right;
|
transform-origin: right;
|
||||||
transition: transform 0.3s ease;
|
transition: transform 0.3s ease;
|
||||||
@@ -307,7 +324,7 @@ a::after {
|
|||||||
a:hover::after {
|
a:hover::after {
|
||||||
transform: scaleX(1);
|
transform: scaleX(1);
|
||||||
transform-origin: left;
|
transform-origin: left;
|
||||||
box-shadow: 0 0 8px var(--pixel-warm-glow);
|
box-shadow: 0 0 10px var(--pixel-accent-2);
|
||||||
}
|
}
|
||||||
|
|
||||||
/* Badges Pixel Art */
|
/* Badges Pixel Art */
|
||||||
@@ -315,18 +332,19 @@ a:hover::after {
|
|||||||
font-family: 'Press Start 2P', cursive;
|
font-family: 'Press Start 2P', cursive;
|
||||||
font-size: 10px;
|
font-size: 10px;
|
||||||
padding: 8px 16px;
|
padding: 8px 16px;
|
||||||
background: linear-gradient(135deg, var(--pixel-accent-1) 0%, var(--pixel-accent-5) 100%);
|
background: linear-gradient(135deg, var(--pixel-pumpkin) 0%, var(--pixel-accent-2) 100%);
|
||||||
color: white;
|
color: white;
|
||||||
border: 2px solid var(--pixel-border);
|
border: 2px solid var(--pixel-border);
|
||||||
|
border-radius: 6px;
|
||||||
display: inline-block;
|
display: inline-block;
|
||||||
text-transform: uppercase;
|
text-transform: uppercase;
|
||||||
box-shadow:
|
box-shadow:
|
||||||
4px 4px 0 0 rgba(0, 0, 0, 0.5),
|
4px 4px 10px rgba(0, 0, 0, 0.4),
|
||||||
inset -1px -1px 0 0 rgba(0, 0, 0, 0.3),
|
inset 1px 1px 2px rgba(255, 255, 255, 0.2),
|
||||||
inset 1px 1px 0 0 rgba(255, 255, 255, 0.3),
|
0 0 20px rgba(255, 154, 86, 0.3);
|
||||||
0 0 15px var(--pixel-accent-1);
|
animation: softFloat 3.5s ease-in-out infinite;
|
||||||
animation: cozyFloat 3s ease-in-out infinite;
|
|
||||||
position: relative;
|
position: relative;
|
||||||
|
text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.5);
|
||||||
}
|
}
|
||||||
|
|
||||||
.pixel-badge::before {
|
.pixel-badge::before {
|
||||||
@@ -389,66 +407,59 @@ tr:hover td {
|
|||||||
}
|
}
|
||||||
|
|
||||||
/* Animaciones Pixel Art */
|
/* Animaciones Pixel Art */
|
||||||
@keyframes pixelGlow {
|
@keyframes softGlow {
|
||||||
0%, 100% {
|
0%, 100% {
|
||||||
text-shadow:
|
text-shadow:
|
||||||
3px 3px 0px rgba(0, 0, 0, 0.8),
|
2px 2px 2px rgba(0, 0, 0, 0.6),
|
||||||
0 0 20px var(--pixel-warm-glow);
|
0 0 25px rgba(255, 154, 86, 0.4);
|
||||||
}
|
}
|
||||||
50% {
|
50% {
|
||||||
text-shadow:
|
text-shadow:
|
||||||
3px 3px 0px rgba(0, 0, 0, 0.8),
|
2px 2px 2px rgba(0, 0, 0, 0.6),
|
||||||
0 0 40px var(--pixel-accent-3),
|
0 0 35px rgba(255, 154, 86, 0.6),
|
||||||
0 0 60px var(--pixel-warm-glow);
|
0 0 50px rgba(155, 123, 181, 0.3);
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
@keyframes cozyPulse {
|
@keyframes softPulse {
|
||||||
0%, 100% {
|
0%, 100% {
|
||||||
opacity: 0.15;
|
opacity: 0.1;
|
||||||
transform: scale(1);
|
transform: scale(1);
|
||||||
}
|
}
|
||||||
50% {
|
50% {
|
||||||
opacity: 0.25;
|
opacity: 0.15;
|
||||||
transform: scale(1.02);
|
transform: scale(1.01);
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
@keyframes cozyScroll {
|
@keyframes softScroll {
|
||||||
0% { background-position: 0 0; }
|
0% { background-position: 0 0; }
|
||||||
100% { background-position: 24px 0; }
|
100% { background-position: 24px 0; }
|
||||||
}
|
}
|
||||||
|
|
||||||
@keyframes pixelBounce {
|
@keyframes softBounce {
|
||||||
0%, 100% { transform: translateY(0); }
|
0%, 100% { transform: translateY(0); }
|
||||||
50% { transform: translateY(-4px); }
|
50% { transform: translateY(-6px); }
|
||||||
}
|
}
|
||||||
|
|
||||||
@keyframes pixelShake {
|
@keyframes softFloat {
|
||||||
0%, 100% { transform: translateX(0); }
|
|
||||||
10%, 30%, 50%, 70%, 90% { transform: translateX(-2px); }
|
|
||||||
20%, 40%, 60%, 80% { transform: translateX(2px); }
|
|
||||||
}
|
|
||||||
|
|
||||||
/* Floating Animation (cozy) */
|
|
||||||
@keyframes cozyFloat {
|
|
||||||
0%, 100% {
|
0%, 100% {
|
||||||
transform: translateY(0) rotate(0deg);
|
transform: translateY(0) rotate(0deg);
|
||||||
}
|
}
|
||||||
25% {
|
25% {
|
||||||
transform: translateY(-5px) rotate(1deg);
|
transform: translateY(-8px) rotate(2deg);
|
||||||
}
|
}
|
||||||
75% {
|
75% {
|
||||||
transform: translateY(5px) rotate(-1deg);
|
transform: translateY(8px) rotate(-2deg);
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
/* Grid Background Pixel */
|
/* Grid Background Pixel */
|
||||||
.pixel-grid-bg {
|
.pixel-grid-bg {
|
||||||
background:
|
background:
|
||||||
linear-gradient(rgba(255, 179, 71, 0.02) 1px, transparent 1px),
|
linear-gradient(rgba(155, 123, 181, 0.03) 1px, transparent 1px),
|
||||||
linear-gradient(90deg, rgba(255, 179, 71, 0.02) 1px, transparent 1px),
|
linear-gradient(90deg, rgba(155, 123, 181, 0.03) 1px, transparent 1px),
|
||||||
linear-gradient(180deg, var(--pixel-night-sky) 0%, var(--pixel-bg-dark) 50%, var(--pixel-bg-medium) 100%);
|
linear-gradient(180deg, var(--pixel-bg-dark) 0%, var(--pixel-bg-2) 50%, var(--pixel-bg-3) 100%);
|
||||||
background-size: 16px 16px, 16px 16px, 100% 100%;
|
background-size: 16px 16px, 16px 16px, 100% 100%;
|
||||||
position: relative;
|
position: relative;
|
||||||
}
|
}
|
||||||
@@ -462,8 +473,8 @@ tr:hover td {
|
|||||||
bottom: 0;
|
bottom: 0;
|
||||||
background: radial-gradient(
|
background: radial-gradient(
|
||||||
circle at 50% 20%,
|
circle at 50% 20%,
|
||||||
rgba(255, 179, 71, 0.1) 0%,
|
rgba(255, 154, 86, 0.08) 0%,
|
||||||
transparent 50%
|
transparent 60%
|
||||||
);
|
);
|
||||||
pointer-events: none;
|
pointer-events: none;
|
||||||
z-index: 0;
|
z-index: 0;
|
||||||
@@ -724,11 +735,187 @@ a[href="#primeros-pasos"] img {
|
|||||||
}
|
}
|
||||||
|
|
||||||
a[href="#primeros-pasos"]:hover img {
|
a[href="#primeros-pasos"]:hover img {
|
||||||
filter: drop-shadow(0 6px 20px rgba(255, 179, 71, 0.6)) brightness(1.1);
|
filter: drop-shadow(0 6px 25px rgba(255, 154, 86, 0.6)) brightness(1.15);
|
||||||
transform: translateY(-4px);
|
transform: translateY(-6px) scale(1.05);
|
||||||
}
|
}
|
||||||
|
|
||||||
a[href="#primeros-pasos"]:active img {
|
a[href="#primeros-pasos"]:active img {
|
||||||
transform: translateY(-2px);
|
transform: translateY(-3px) scale(1.02);
|
||||||
filter: drop-shadow(0 4px 15px rgba(255, 179, 71, 0.5));
|
filter: drop-shadow(0 4px 18px rgba(255, 154, 86, 0.5));
|
||||||
|
}
|
||||||
|
|
||||||
|
/* ========================================
|
||||||
|
DECORACIONES DE HALLOWEEN
|
||||||
|
======================================== */
|
||||||
|
|
||||||
|
/* Calabaza Pixel Art */
|
||||||
|
.pixel-pumpkin {
|
||||||
|
display: inline-block;
|
||||||
|
width: 32px;
|
||||||
|
height: 32px;
|
||||||
|
background: var(--pixel-pumpkin);
|
||||||
|
border-radius: 50%;
|
||||||
|
border: 3px solid var(--pixel-border);
|
||||||
|
position: relative;
|
||||||
|
box-shadow:
|
||||||
|
3px 3px 8px rgba(0, 0, 0, 0.4),
|
||||||
|
inset -2px -2px 6px rgba(0, 0, 0, 0.3),
|
||||||
|
inset 2px 2px 6px rgba(255, 255, 255, 0.2);
|
||||||
|
animation: softBounce 3s ease-in-out infinite;
|
||||||
|
}
|
||||||
|
|
||||||
|
.pixel-pumpkin::before {
|
||||||
|
content: '';
|
||||||
|
position: absolute;
|
||||||
|
top: -8px;
|
||||||
|
left: 50%;
|
||||||
|
transform: translateX(-50%);
|
||||||
|
width: 8px;
|
||||||
|
height: 10px;
|
||||||
|
background: var(--pixel-accent-5);
|
||||||
|
border: 2px solid var(--pixel-border);
|
||||||
|
border-radius: 2px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.pixel-pumpkin::after {
|
||||||
|
content: '';
|
||||||
|
position: absolute;
|
||||||
|
top: 50%;
|
||||||
|
left: 50%;
|
||||||
|
transform: translate(-50%, -50%);
|
||||||
|
width: 20px;
|
||||||
|
height: 16px;
|
||||||
|
background:
|
||||||
|
linear-gradient(to right, transparent 6px, var(--pixel-border) 6px, var(--pixel-border) 8px, transparent 8px, transparent 12px, var(--pixel-border) 12px, var(--pixel-border) 14px, transparent 14px),
|
||||||
|
linear-gradient(to bottom, transparent 4px, var(--pixel-border) 4px, var(--pixel-border) 6px, transparent 6px);
|
||||||
|
box-shadow:
|
||||||
|
-2px 10px 0 0 var(--pixel-border),
|
||||||
|
2px 10px 0 0 var(--pixel-border);
|
||||||
|
}
|
||||||
|
|
||||||
|
/* Fantasma Pixel Art */
|
||||||
|
.pixel-ghost {
|
||||||
|
display: inline-block;
|
||||||
|
width: 28px;
|
||||||
|
height: 36px;
|
||||||
|
background: var(--pixel-ghost);
|
||||||
|
border: 2px solid var(--pixel-border);
|
||||||
|
border-radius: 50% 50% 0 0;
|
||||||
|
position: relative;
|
||||||
|
box-shadow:
|
||||||
|
2px 2px 8px rgba(0, 0, 0, 0.3),
|
||||||
|
inset 0 0 15px rgba(255, 255, 255, 0.4);
|
||||||
|
animation: softFloat 3.5s ease-in-out infinite;
|
||||||
|
}
|
||||||
|
|
||||||
|
.pixel-ghost::before {
|
||||||
|
content: '';
|
||||||
|
position: absolute;
|
||||||
|
bottom: -4px;
|
||||||
|
left: 0;
|
||||||
|
right: 0;
|
||||||
|
height: 8px;
|
||||||
|
background:
|
||||||
|
radial-gradient(circle at 25% 0, transparent 40%, var(--pixel-ghost) 40%),
|
||||||
|
radial-gradient(circle at 75% 0, transparent 40%, var(--pixel-ghost) 40%);
|
||||||
|
border-left: 2px solid var(--pixel-border);
|
||||||
|
border-right: 2px solid var(--pixel-border);
|
||||||
|
}
|
||||||
|
|
||||||
|
.pixel-ghost::after {
|
||||||
|
content: '';
|
||||||
|
position: absolute;
|
||||||
|
top: 12px;
|
||||||
|
left: 6px;
|
||||||
|
width: 14px;
|
||||||
|
height: 6px;
|
||||||
|
background:
|
||||||
|
linear-gradient(to right, var(--pixel-border) 4px, transparent 4px, transparent 6px, var(--pixel-border) 6px, var(--pixel-border) 10px, transparent 10px);
|
||||||
|
box-shadow: 0 8px 0 0 var(--pixel-border);
|
||||||
|
}
|
||||||
|
|
||||||
|
/* Murciélago Pixel Art */
|
||||||
|
.pixel-bat {
|
||||||
|
display: inline-block;
|
||||||
|
width: 40px;
|
||||||
|
height: 20px;
|
||||||
|
position: relative;
|
||||||
|
animation: batFly 4s ease-in-out infinite;
|
||||||
|
}
|
||||||
|
|
||||||
|
.pixel-bat::before {
|
||||||
|
content: '';
|
||||||
|
position: absolute;
|
||||||
|
top: 6px;
|
||||||
|
left: 50%;
|
||||||
|
transform: translateX(-50%);
|
||||||
|
width: 8px;
|
||||||
|
height: 10px;
|
||||||
|
background: var(--pixel-border);
|
||||||
|
border-radius: 50%;
|
||||||
|
box-shadow: 0 2px 4px rgba(0, 0, 0, 0.4);
|
||||||
|
}
|
||||||
|
|
||||||
|
.pixel-bat::after {
|
||||||
|
content: '';
|
||||||
|
position: absolute;
|
||||||
|
top: 8px;
|
||||||
|
left: 0;
|
||||||
|
right: 0;
|
||||||
|
height: 8px;
|
||||||
|
background:
|
||||||
|
linear-gradient(to right,
|
||||||
|
transparent 0,
|
||||||
|
var(--pixel-border) 4px,
|
||||||
|
var(--pixel-border) 8px,
|
||||||
|
transparent 8px,
|
||||||
|
transparent 12px,
|
||||||
|
var(--pixel-border) 12px,
|
||||||
|
var(--pixel-border) 16px,
|
||||||
|
transparent 16px,
|
||||||
|
transparent 24px,
|
||||||
|
var(--pixel-border) 24px,
|
||||||
|
var(--pixel-border) 28px,
|
||||||
|
transparent 28px,
|
||||||
|
transparent 32px,
|
||||||
|
var(--pixel-border) 32px,
|
||||||
|
var(--pixel-border) 36px,
|
||||||
|
transparent 36px
|
||||||
|
);
|
||||||
|
clip-path: polygon(
|
||||||
|
0% 100%, 10% 0%, 20% 100%, 30% 50%, 50% 50%, 70% 50%, 80% 100%, 90% 0%, 100% 100%
|
||||||
|
);
|
||||||
|
filter: drop-shadow(0 2px 4px rgba(0, 0, 0, 0.3));
|
||||||
|
}
|
||||||
|
|
||||||
|
@keyframes batFly {
|
||||||
|
0%, 100% {
|
||||||
|
transform: translateX(0) translateY(0);
|
||||||
|
}
|
||||||
|
25% {
|
||||||
|
transform: translateX(-8px) translateY(-4px);
|
||||||
|
}
|
||||||
|
75% {
|
||||||
|
transform: translateX(8px) translateY(4px);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
/* Estrella Halloween */
|
||||||
|
.pixel-star-halloween {
|
||||||
|
display: inline-block;
|
||||||
|
color: var(--pixel-accent-3);
|
||||||
|
font-size: 20px;
|
||||||
|
animation: twinkle 2.5s ease-in-out infinite;
|
||||||
|
text-shadow: 0 0 12px var(--pixel-accent-3);
|
||||||
|
}
|
||||||
|
|
||||||
|
@keyframes twinkle {
|
||||||
|
0%, 100% {
|
||||||
|
opacity: 1;
|
||||||
|
transform: scale(1);
|
||||||
|
}
|
||||||
|
50% {
|
||||||
|
opacity: 0.4;
|
||||||
|
transform: scale(0.9);
|
||||||
|
}
|
||||||
}
|
}
|
||||||
|
|||||||
@@ -1,17 +1,17 @@
|
|||||||
/* ============================================
|
/* ============================================
|
||||||
COZY PIXEL ART - SECTIONS OVERRIDES
|
SOFT HALLOWEEN PIXEL ART - SECTIONS OVERRIDES
|
||||||
Diseño witchy/fantasy acogedor
|
Diseño suave con temática de Halloween
|
||||||
============================================ */
|
============================================ */
|
||||||
|
|
||||||
/* Secciones Principales */
|
/* Secciones Principales */
|
||||||
section {
|
section {
|
||||||
background: linear-gradient(135deg, var(--pixel-bg-medium) 0%, var(--pixel-bg-light) 100%) !important;
|
background: linear-gradient(135deg, var(--pixel-bg-2) 0%, var(--pixel-bg-3) 100%) !important;
|
||||||
border: 4px solid var(--pixel-border) !important;
|
border: 3px solid var(--pixel-border) !important;
|
||||||
border-radius: 0 !important;
|
border-radius: 8px !important;
|
||||||
box-shadow:
|
box-shadow:
|
||||||
8px 8px 0 0 rgba(0, 0, 0, 0.5) !important,
|
4px 4px 12px rgba(0, 0, 0, 0.4) !important,
|
||||||
inset 0 0 0 2px rgba(255, 179, 71, 0.15) !important,
|
inset 0 0 30px rgba(155, 123, 181, 0.1) !important,
|
||||||
0 0 20px rgba(255, 179, 71, 0.2) !important;
|
0 0 25px rgba(255, 154, 86, 0.15) !important;
|
||||||
padding: 32px !important;
|
padding: 32px !important;
|
||||||
margin-bottom: 32px;
|
margin-bottom: 32px;
|
||||||
position: relative;
|
position: relative;
|
||||||
@@ -25,7 +25,8 @@ section::before {
|
|||||||
left: 8px;
|
left: 8px;
|
||||||
right: 8px;
|
right: 8px;
|
||||||
bottom: 8px;
|
bottom: 8px;
|
||||||
border: 2px solid rgba(255, 179, 71, 0.1);
|
border: 2px solid rgba(155, 123, 181, 0.08);
|
||||||
|
border-radius: 4px;
|
||||||
pointer-events: none;
|
pointer-events: none;
|
||||||
}
|
}
|
||||||
|
|
||||||
@@ -40,8 +41,8 @@ section h2 {
|
|||||||
background-clip: unset !important;
|
background-clip: unset !important;
|
||||||
-webkit-text-fill-color: unset !important;
|
-webkit-text-fill-color: unset !important;
|
||||||
text-shadow:
|
text-shadow:
|
||||||
2px 2px 0px var(--pixel-border),
|
2px 2px 0px rgba(0, 0, 0, 0.4),
|
||||||
0 0 20px var(--pixel-warm-glow) !important;
|
0 0 20px rgba(255, 198, 92, 0.4) !important;
|
||||||
margin-bottom: 24px !important;
|
margin-bottom: 24px !important;
|
||||||
}
|
}
|
||||||
|
|
||||||
@@ -49,16 +50,16 @@ section h3 {
|
|||||||
font-family: 'Press Start 2P', cursive !important;
|
font-family: 'Press Start 2P', cursive !important;
|
||||||
font-size: 16px !important;
|
font-size: 16px !important;
|
||||||
line-height: 1.6 !important;
|
line-height: 1.6 !important;
|
||||||
color: var(--pixel-accent-5) !important;
|
color: var(--pixel-accent-2) !important;
|
||||||
margin-bottom: 16px !important;
|
margin-bottom: 16px !important;
|
||||||
text-shadow: 1px 1px 0px var(--pixel-border);
|
text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.3);
|
||||||
}
|
}
|
||||||
|
|
||||||
section h4 {
|
section h4 {
|
||||||
font-family: 'VT323', monospace !important;
|
font-family: 'VT323', monospace !important;
|
||||||
font-size: 22px !important;
|
font-size: 22px !important;
|
||||||
font-weight: bold !important;
|
font-weight: bold !important;
|
||||||
color: var(--pixel-accent-4) !important;
|
color: var(--pixel-pumpkin) !important;
|
||||||
margin-bottom: 12px !important;
|
margin-bottom: 12px !important;
|
||||||
}
|
}
|
||||||
|
|
||||||
@@ -69,34 +70,34 @@ section p {
|
|||||||
}
|
}
|
||||||
|
|
||||||
section p strong {
|
section p strong {
|
||||||
color: var(--pixel-accent-4) !important;
|
color: var(--pixel-pumpkin) !important;
|
||||||
font-weight: bold;
|
font-weight: bold;
|
||||||
}
|
}
|
||||||
|
|
||||||
/* Cajas de Información */
|
/* Cajas de Información */
|
||||||
section > div[class*="space-y"] {
|
section > div[class*="space-y"] {
|
||||||
background: var(--pixel-bg-light) !important;
|
background: var(--pixel-bg-3) !important;
|
||||||
border: 3px solid var(--pixel-border) !important;
|
border: 3px solid var(--pixel-border) !important;
|
||||||
border-radius: 0 !important;
|
border-radius: 6px !important;
|
||||||
padding: 20px !important;
|
padding: 20px !important;
|
||||||
box-shadow:
|
box-shadow:
|
||||||
inset 0 0 20px rgba(0, 0, 0, 0.3),
|
inset 0 0 20px rgba(0, 0, 0, 0.3),
|
||||||
4px 4px 0 0 rgba(0, 0, 0, 0.5) !important;
|
4px 4px 10px rgba(0, 0, 0, 0.4) !important;
|
||||||
}
|
}
|
||||||
|
|
||||||
section > div[class*="border-indigo"] {
|
section > div[class*="border-indigo"] {
|
||||||
border-color: var(--pixel-accent-3) !important;
|
border-color: var(--pixel-accent-2) !important;
|
||||||
background: var(--pixel-bg-light) !important;
|
background: var(--pixel-bg-3) !important;
|
||||||
}
|
}
|
||||||
|
|
||||||
/* Grid de Cards */
|
/* Grid de Cards */
|
||||||
section .grid > div {
|
section .grid > div {
|
||||||
background: var(--pixel-bg-light) !important;
|
background: var(--pixel-bg-3) !important;
|
||||||
border: 3px solid var(--pixel-border) !important;
|
border: 3px solid var(--pixel-border) !important;
|
||||||
border-radius: 0 !important;
|
border-radius: 6px !important;
|
||||||
box-shadow:
|
box-shadow:
|
||||||
4px 4px 0 0 rgba(0, 0, 0, 0.5),
|
4px 4px 10px rgba(0, 0, 0, 0.4),
|
||||||
inset 0 0 0 1px rgba(255, 255, 255, 0.05) !important;
|
inset 0 0 20px rgba(155, 123, 181, 0.08) !important;
|
||||||
padding: 20px !important;
|
padding: 20px !important;
|
||||||
}
|
}
|
||||||
|
|
||||||
@@ -114,10 +115,10 @@ section ul li {
|
|||||||
}
|
}
|
||||||
|
|
||||||
section ul li::before {
|
section ul li::before {
|
||||||
content: '■';
|
content: '✦';
|
||||||
position: absolute;
|
position: absolute;
|
||||||
left: 0;
|
left: 0;
|
||||||
color: var(--pixel-accent-4);
|
color: var(--pixel-pumpkin);
|
||||||
font-size: 12px;
|
font-size: 12px;
|
||||||
}
|
}
|
||||||
|
|
||||||
@@ -141,27 +142,27 @@ section ol li::before {
|
|||||||
left: 0;
|
left: 0;
|
||||||
font-family: 'Press Start 2P', cursive;
|
font-family: 'Press Start 2P', cursive;
|
||||||
font-size: 12px;
|
font-size: 12px;
|
||||||
color: var(--pixel-accent-4);
|
color: var(--pixel-pumpkin);
|
||||||
}
|
}
|
||||||
|
|
||||||
/* Code Blocks en Secciones */
|
/* Code Blocks en Secciones */
|
||||||
section code {
|
section code {
|
||||||
background: var(--pixel-bg-dark) !important;
|
background: var(--pixel-bg-dark) !important;
|
||||||
border: 2px solid var(--pixel-accent-2) !important;
|
border: 2px solid var(--pixel-accent-2) !important;
|
||||||
color: var(--pixel-accent-4) !important;
|
color: var(--pixel-accent-3) !important;
|
||||||
padding: 4px 8px !important;
|
padding: 4px 8px !important;
|
||||||
font-family: 'VT323', monospace !important;
|
font-family: 'VT323', monospace !important;
|
||||||
font-size: 18px !important;
|
font-size: 18px !important;
|
||||||
border-radius: 0 !important;
|
border-radius: 4px !important;
|
||||||
}
|
}
|
||||||
|
|
||||||
section pre {
|
section pre {
|
||||||
background: var(--pixel-bg-dark) !important;
|
background: var(--pixel-bg-dark) !important;
|
||||||
border: 3px solid var(--pixel-border) !important;
|
border: 3px solid var(--pixel-border) !important;
|
||||||
padding: 20px !important;
|
padding: 20px !important;
|
||||||
border-radius: 0 !important;
|
border-radius: 6px !important;
|
||||||
box-shadow:
|
box-shadow:
|
||||||
inset 4px 4px 0 0 rgba(0, 0, 0, 0.5) !important;
|
inset 3px 3px 8px rgba(0, 0, 0, 0.5) !important;
|
||||||
overflow-x: auto;
|
overflow-x: auto;
|
||||||
}
|
}
|
||||||
|
|
||||||
@@ -169,7 +170,7 @@ section pre code {
|
|||||||
background: transparent !important;
|
background: transparent !important;
|
||||||
border: none !important;
|
border: none !important;
|
||||||
padding: 0 !important;
|
padding: 0 !important;
|
||||||
color: var(--pixel-accent-4) !important;
|
color: var(--pixel-accent-3) !important;
|
||||||
}
|
}
|
||||||
|
|
||||||
/* Tablas en Secciones */
|
/* Tablas en Secciones */
|
||||||
@@ -189,13 +190,15 @@ section th {
|
|||||||
font-size: 12px !important;
|
font-size: 12px !important;
|
||||||
text-transform: uppercase !important;
|
text-transform: uppercase !important;
|
||||||
text-align: left !important;
|
text-align: left !important;
|
||||||
|
border-radius: 4px !important;
|
||||||
}
|
}
|
||||||
|
|
||||||
section td {
|
section td {
|
||||||
background: var(--pixel-bg-light) !important;
|
background: var(--pixel-bg-3) !important;
|
||||||
border: 3px solid var(--pixel-border) !important;
|
border: 3px solid var(--pixel-border) !important;
|
||||||
padding: 12px !important;
|
padding: 12px !important;
|
||||||
color: var(--pixel-text) !important;
|
color: var(--pixel-text) !important;
|
||||||
|
border-radius: 4px !important;
|
||||||
}
|
}
|
||||||
|
|
||||||
section tr:hover td {
|
section tr:hover td {
|
||||||
@@ -313,28 +316,29 @@ section a[class*="bg-"] {
|
|||||||
font-family: 'Press Start 2P', cursive !important;
|
font-family: 'Press Start 2P', cursive !important;
|
||||||
font-size: 12px !important;
|
font-size: 12px !important;
|
||||||
padding: 12px 24px !important;
|
padding: 12px 24px !important;
|
||||||
border: 4px solid var(--pixel-border) !important;
|
border: 3px solid var(--pixel-border) !important;
|
||||||
background: var(--pixel-accent-2) !important;
|
background: linear-gradient(135deg, var(--pixel-pumpkin), var(--pixel-accent-2)) !important;
|
||||||
color: white !important;
|
color: white !important;
|
||||||
text-transform: uppercase !important;
|
text-transform: uppercase !important;
|
||||||
cursor: pointer !important;
|
cursor: pointer !important;
|
||||||
border-radius: 0 !important;
|
border-radius: 8px !important;
|
||||||
box-shadow:
|
box-shadow:
|
||||||
6px 6px 0 0 rgba(0, 0, 0, 0.6) !important,
|
4px 4px 10px rgba(0, 0, 0, 0.4) !important,
|
||||||
inset -2px -2px 0 0 rgba(0, 0, 0, 0.3) !important,
|
inset 2px 2px 4px rgba(255, 255, 255, 0.15) !important;
|
||||||
inset 2px 2px 0 0 rgba(255, 255, 255, 0.2) !important;
|
transition: all 0.3s ease !important;
|
||||||
transition: all 0.1s !important;
|
|
||||||
backdrop-filter: none !important;
|
backdrop-filter: none !important;
|
||||||
|
text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.5) !important;
|
||||||
}
|
}
|
||||||
|
|
||||||
section button:hover,
|
section button:hover,
|
||||||
section a[class*="bg-"]:hover {
|
section a[class*="bg-"]:hover {
|
||||||
background: var(--pixel-accent-3) !important;
|
background: linear-gradient(135deg, var(--pixel-accent-2), var(--pixel-pumpkin)) !important;
|
||||||
transform: translate(2px, 2px) !important;
|
transform: translateY(-3px) !important;
|
||||||
box-shadow:
|
box-shadow:
|
||||||
4px 4px 0 0 rgba(0, 0, 0, 0.6) !important,
|
6px 6px 16px rgba(0, 0, 0, 0.5) !important,
|
||||||
inset -2px -2px 0 0 rgba(0, 0, 0, 0.3) !important,
|
inset 2px 2px 6px rgba(255, 255, 255, 0.2) !important,
|
||||||
inset 2px 2px 0 0 rgba(255, 255, 255, 0.2) !important;
|
0 0 30px rgba(255, 154, 86, 0.4) !important;
|
||||||
|
filter: brightness(1.1) !important;
|
||||||
}
|
}
|
||||||
|
|
||||||
/* Formularios */
|
/* Formularios */
|
||||||
|
|||||||
@@ -7,13 +7,13 @@
|
|||||||
<header class="relative overflow-hidden py-20 sm:py-28">
|
<header class="relative overflow-hidden py-20 sm:py-28">
|
||||||
<div class="container mx-auto px-4 sm:px-6 lg:px-8 relative">
|
<div class="container mx-auto px-4 sm:px-6 lg:px-8 relative">
|
||||||
<div class="max-w-5xl mx-auto text-center space-y-12">
|
<div class="max-w-5xl mx-auto text-center space-y-12">
|
||||||
<!-- Badge Pixel Art con decoración -->
|
<!-- Badge Pixel Art con decoración de Halloween -->
|
||||||
<div class="inline-block relative">
|
<div class="inline-block relative">
|
||||||
<span class="pixel-star absolute -left-8 top-0"></span>
|
<span class="pixel-pumpkin absolute -left-12 top-0"></span>
|
||||||
<div class="pixel-badge">
|
<div class="pixel-badge">
|
||||||
<%= appName %> • v<%= version %>
|
<%= appName %> • v<%= version %>
|
||||||
</div>
|
</div>
|
||||||
<span class="pixel-star absolute -right-8 top-0" style="animation-delay: 1s;"></span>
|
<span class="pixel-ghost absolute -right-12 top-0" style="animation-delay: 1s;"></span>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<!-- Título Principal -->
|
<!-- Título Principal -->
|
||||||
@@ -26,11 +26,13 @@
|
|||||||
</h2>
|
</h2>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<!-- Decoración con velas -->
|
<!-- Decoración de Halloween con murciélagos y estrellas -->
|
||||||
<div class="flex justify-center gap-8">
|
<div class="flex justify-center gap-8 items-center">
|
||||||
<span class="pixel-candle"></span>
|
<span class="pixel-bat"></span>
|
||||||
<span class="pixel-candle" style="animation-delay: 0.5s;"></span>
|
<span class="pixel-star-halloween">✦</span>
|
||||||
<span class="pixel-candle" style="animation-delay: 1s;"></span>
|
<span class="pixel-pumpkin" style="animation-delay: 0.5s;"></span>
|
||||||
|
<span class="pixel-star-halloween" style="animation-delay: 0.8s;">✦</span>
|
||||||
|
<span class="pixel-ghost" style="animation-delay: 1s;"></span>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<!-- Descripción -->
|
<!-- Descripción -->
|
||||||
|
|||||||
@@ -48,25 +48,25 @@
|
|||||||
|
|
||||||
<div class="pixel-border p-4 mb-6" style="background: linear-gradient(135deg, var(--pixel-bg-dark) 0%, var(--pixel-bg-medium) 100%);">
|
<div class="pixel-border p-4 mb-6" style="background: linear-gradient(135deg, var(--pixel-bg-dark) 0%, var(--pixel-bg-medium) 100%);">
|
||||||
<div class="pixel-status-bar justify-center">
|
<div class="pixel-status-bar justify-center">
|
||||||
<span class="pixel-star" style="width: 12px; height: 12px;"></span>
|
<span class="pixel-pumpkin" style="width: 16px; height: 16px;"></span>
|
||||||
<span>VER <%= version %></span>
|
<span>VER <%= version %></span>
|
||||||
<span>✦</span>
|
<span>✦</span>
|
||||||
<span>DJS <%= djsVersion %></span>
|
<span>DJS <%= djsVersion %></span>
|
||||||
<span>✦</span>
|
<span>✦</span>
|
||||||
<span><%= currentDateHuman %></span>
|
<span><%= currentDateHuman %></span>
|
||||||
<span class="pixel-star" style="width: 12px; height: 12px; animation-delay: 1.5s;"></span>
|
<span class="pixel-ghost" style="width: 16px; height: 20px; animation-delay: 1.5s;"></span>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<p class="text-center text-xs pixel-text-dim mb-6 flex items-center justify-center gap-2">
|
<p class="text-center text-xs pixel-text-dim mb-6 flex items-center justify-center gap-2">
|
||||||
<span class="pixel-coin" style="width: 16px; height: 16px;"></span>
|
<span class="pixel-bat" style="width: 24px; height: 12px;"></span>
|
||||||
<span>Amayo © <%= new Date().getFullYear() %> — Documentación para usuarios finales de Discord</span>
|
<span>Amayo © <%= new Date().getFullYear() %> — Documentación para usuarios finales de Discord</span>
|
||||||
<span class="pixel-candle" style="width: 8px; height: 12px;"></span>
|
<span class="pixel-star-halloween">✦</span>
|
||||||
</p>
|
</p>
|
||||||
|
|
||||||
<div class="text-center">
|
<div class="text-center">
|
||||||
<a class="pixel-btn-secondary pixel-btn inline-block" href="#primeros-pasos">
|
<a class="pixel-btn-secondary pixel-btn inline-block" href="#primeros-pasos">
|
||||||
<span aria-hidden="true">✦</span> Volver arriba <span aria-hidden="true">✦</span>
|
<span aria-hidden="true">🎃</span> Volver arriba <span aria-hidden="true">👻</span>
|
||||||
</a>
|
</a>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|||||||
@@ -1,15 +1,15 @@
|
|||||||
<nav class="fixed inset-x-0 top-0 z-50 pixel-navbar">
|
<nav class="fixed inset-x-0 top-0 z-50 pixel-navbar">
|
||||||
<div class="mx-auto max-w-[120rem] px-4 sm:px-6 lg:px-8 h-14 flex items-center justify-between">
|
<div class="mx-auto max-w-[120rem] px-4 sm:px-6 lg:px-8 h-14 flex items-center justify-between">
|
||||||
<a href="#" class="flex items-center gap-3">
|
<a href="#" class="flex items-center gap-3">
|
||||||
<div class="pixel-coin" style="width: 20px; height: 20px;"></div>
|
<div class="pixel-pumpkin" style="width: 20px; height: 20px;"></div>
|
||||||
<span class="font-['Press_Start_2P'] text-sm" style="color: var(--pixel-accent-3);"><%= appName %></span>
|
<span class="font-['Press_Start_2P'] text-sm" style="color: var(--pixel-pumpkin);"><%= appName %></span>
|
||||||
<span class="pixel-star" style="width: 12px; height: 12px;"></span>
|
<span class="pixel-star-halloween">✦</span>
|
||||||
</a>
|
</a>
|
||||||
<div class="hidden md:flex items-center gap-6">
|
<div class="hidden md:flex items-center gap-6">
|
||||||
<a href="#primeros-pasos" class="pixel-tooltip" data-tooltip="✨ Empieza aquí">Guía</a>
|
<a href="#primeros-pasos" class="pixel-tooltip" data-tooltip="🎃 Empieza aquí">Guía</a>
|
||||||
<a href="#minijuegos" class="pixel-tooltip" data-tooltip="🎮 Juega">Minijuegos</a>
|
<a href="#minijuegos" class="pixel-tooltip" data-tooltip="🎮 Juega">Minijuegos</a>
|
||||||
<a href="#economia" class="pixel-tooltip" data-tooltip="💰 Gana">Economía</a>
|
<a href="#economia" class="pixel-tooltip" data-tooltip="💰 Gana">Economía</a>
|
||||||
<a href="#faq" class="pixel-tooltip" data-tooltip="❓ Ayuda">FAQ</a>
|
<a href="#faq" class="pixel-tooltip" data-tooltip="👻 Ayuda">FAQ</a>
|
||||||
</div>
|
</div>
|
||||||
<button id="toggle-nav" class="md:hidden" aria-label="Abrir navegación">
|
<button id="toggle-nav" class="md:hidden" aria-label="Abrir navegación">
|
||||||
<svg class="w-6 h-6" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
<svg class="w-6 h-6" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
||||||
|
|||||||
Reference in New Issue
Block a user