/* ═══════════════════════════════════════════════════════════════════════ alexbreu.neocities.org — hoja de estilos principal ─────────────────────────────────────────────────────────────────────── ORGANIZACIÓN DEL ARCHIVO (busca estos títulos para navegar rápido): 01. VARIABLES — colores, fuentes, medidas. EDITA AQUÍ PRIMERO. 02. RESET — normalizaciones básicas 03. FONDO Y ESTRELLAS 04. TIPOGRAFÍA 05. LAYOUT — contenedor, secciones, paneles 06. ENCABEZADO — nombre, frase, toggle de idioma 07. LINKS Y BOTONES 08. SEPARADORES DECORATIVOS 09. NAVEGACIÓN (rejilla de subpáginas) 10. WIDGET DE STATUS 11. CHIPS DE INTERESES 12. BITÁCORA DE ACTUALIZACIONES 13. CHAT / LIBRO DE VISITAS 14. BOTONES 88x31 Y BLINKIES 15. PIE DE PÁGINA 16. SCROLLBAR PERSONALIZADO 17. SISTEMA BILINGÜE ES/EN 18. ACCESIBILIDAD Y MOVIMIENTO REDUCIDO ═══════════════════════════════════════════════════════════════════════ */ /* ═══ 01. VARIABLES ══════════════════════════════════════════════════════ Cambia estos valores para retocar TODA la paleta del sitio de un jalón. Paleta actual: "50/50 degradado azul → rosa". ────────────────────────────────────────────────────────────────────── */ :root { /* — Fondos — */ --bg: #070620; /* azul-morado casi negro: fondo base */ --bg-2: #17103F; /* morado profundo: segundo tono del degradado */ --bg-3: #0D0A2E; /* intermedio, para paneles */ /* — Acentos — */ --accent: #6E9BFF; /* AZUL: títulos, links, bordes */ --accent-2: #FF63C8; /* ROSA: hovers, detalles, énfasis */ --accent-3: #B48CFF; /* LAVANDA: puente entre azul y rosa */ /* — Texto — */ --text: #EBE6FF; /* texto principal (contraste 15:1 sobre --bg) */ --muted: #A79FD8; /* texto secundario (contraste 7.4:1) */ /* — Superficies y bordes — */ --panel: rgba(23, 16, 63, 0.55); /* fondo de los paneles */ --panel-solid: #120C33; /* versión opaca */ --border: rgba(180, 140, 255, 0.28); /* borde lavanda translúcido */ --border-hi: rgba(255, 99, 200, 0.55); /* borde resaltado (rosa) */ /* — Degradado de marca: se usa en títulos y líneas — */ --grad: linear-gradient(90deg, var(--accent) 0%, var(--accent-3) 50%, var(--accent-2) 100%); /* — Tipografía — */ --font-display: 'VT323', 'Courier New', monospace; /* títulos */ --font-body: 'Atkinson Hyperlegible', 'Segoe UI', system-ui, sans-serif; --font-mono: 'Atkinson Hyperlegible', ui-monospace, monospace; /* — Medidas — */ --ancho-max: 46rem; /* ancho máximo del contenido (~736px) */ --radio: 10px; /* redondeo de esquinas */ --espacio: 1.5rem; /* separación vertical estándar */ /* — Sombras de brillo (glow) — */ --glow-azul: 0 0 12px rgba(110, 155, 255, 0.55); --glow-rosa: 0 0 12px rgba(255, 99, 200, 0.55); color-scheme: dark; } /* ═══ 02. RESET ══════════════════════════════════════════════════════════ */ *, *::before, *::after { box-sizing: border-box; } html { /* Cursor personalizado. El "4 4" es el punto activo (la punta de la */ /* flecha). "auto" al final es el respaldo si el PNG no carga. */ cursor: url('../media/cursor.png') 4 4, auto; scroll-behavior: smooth; } body { margin: 0; padding: 0; min-height: 100vh; font-family: var(--font-body); font-size: 1rem; line-height: 1.7; color: var(--text); background: var(--bg); /* Evita el scroll horizontal accidental en celulares */ overflow-x: hidden; } img { max-width: 100%; height: auto; } /* ═══ 03. FONDO Y ESTRELLAS ══════════════════════════════════════════════ Tres capas apiladas, todas fijas (no se mueven al hacer scroll): a) el degradado profundo del b) .cielo — nebulosas suaves con radial-gradient c) .estrellas — puntos generados por /js/estrellas.js ────────────────────────────────────────────────────────────────────── */ /* (a) Degradado base: azul noche arriba → morado abajo */ body::before { content: ''; position: fixed; inset: 0; z-index: -3; background: linear-gradient(170deg, var(--bg) 0%, var(--bg-2) 55%, #1E0B33 100%); } /* (b) Nebulosas: dos manchas de color muy difusas, una azul y una rosa */ .cielo { position: fixed; inset: 0; z-index: -2; pointer-events: none; /* nunca bloquea clics */ background: radial-gradient(60rem 40rem at 15% 12%, rgba(110, 155, 255, 0.16), transparent 60%), radial-gradient(50rem 35rem at 85% 78%, rgba(255, 99, 200, 0.14), transparent 60%), radial-gradient(40rem 30rem at 50% 45%, rgba(180, 140, 255, 0.10), transparent 65%); } /* (c) Contenedor de estrellas. Los puntos los inserta el JS. */ .estrellas { position: fixed; inset: 0; z-index: -1; pointer-events: none; overflow: hidden; } /* Cada estrella es un cuadrito de 2px que late. El JS le asigna posición, tamaño, color y retraso de animación individuales. */ .estrella { position: absolute; width: 2px; height: 2px; background: var(--text); border-radius: 50%; opacity: 0.7; animation: parpadeo 4s ease-in-out infinite; } @keyframes parpadeo { 0%, 100% { opacity: 0.15; transform: scale(0.8); } 50% { opacity: 0.95; transform: scale(1.25); } } /* ═══ 04. TIPOGRAFÍA ═════════════════════════════════════════════════════ */ h1, h2, h3 { font-family: var(--font-display); font-weight: 400; line-height: 1.1; letter-spacing: 0.02em; margin: 0 0 0.6em; } /* Título principal: texto relleno con el degradado azul→rosa. El truco es pintar el degradado de fondo y recortarlo con la forma de las letras (background-clip: text). */ h1 { font-size: clamp(2.8rem, 13vw, 4.5rem); background: var(--grad); -webkit-background-clip: text; background-clip: text; color: transparent; /* Respaldo por si background-clip:text falla: */ -webkit-text-fill-color: transparent; } /* Títulos de sección: azul, en mayúsculas, con una estrellita antes */ h2 { font-size: clamp(1.7rem, 6.5vw, 2.2rem); color: var(--accent); text-transform: uppercase; display: flex; align-items: baseline; gap: 0.5rem; } h2::before { content: '✦'; font-size: 0.7em; color: var(--accent-2); /* Este símbolo es decorativo; lo ocultamos de los lectores de pantalla con aria-hidden no es posible en ::before, pero al ser contenido generado por CSS la mayoría de lectores ya lo ignoran. */ } h3 { font-size: 1.45rem; color: var(--accent-3); } p { margin: 0 0 1rem; } p:last-child { margin-bottom: 0; } /* Texto secundario / notas al pie de una sección */ .tenue { color: var(--muted); font-size: 0.9rem; } /* Resalta una palabra dentro de un párrafo */ mark, .resalte { background: none; color: var(--accent-2); font-weight: bold; } /* ═══ 05. LAYOUT ═════════════════════════════════════════════════════════ Mobile-first: todo es una sola columna. En pantallas grandes solo crece el ancho máximo; no hay layout de dos columnas a propósito, para que se lea igual de bien en el celular. ────────────────────────────────────────────────────────────────────── */ .envoltorio { width: 100%; max-width: var(--ancho-max); margin: 0 auto; padding: 1.25rem 1.1rem 4rem; } /* Cada bloque de contenido es un "panel": caja semitransparente con borde lavanda y desenfoque del fondo. */ .panel { background: var(--panel); border: 1px solid var(--border); border-radius: var(--radio); padding: 1.4rem 1.2rem; margin-bottom: var(--espacio); /* El desenfoque es un lujo: si el navegador no lo soporta, no pasa nada */ backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px); /* Brillo interior muy sutil en el borde superior */ box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.06); } /* Variante destacada: borde rosa. Úsala para la sección que quieras que salte a la vista (por ejemplo STATUS). */ .panel--destacado { border-color: var(--border-hi); box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.06), 0 0 24px rgba(255, 99, 200, 0.10); } /* ═══ 06. ENCABEZADO ═════════════════════════════════════════════════════ */ .encabezado { text-align: center; padding: 2.5rem 0 1.5rem; } /* La frase corta bajo el nombre */ .lema { font-family: var(--font-display); font-size: clamp(1.1rem, 4.5vw, 1.4rem); color: var(--accent-3); margin: 0.2rem 0 1.2rem; letter-spacing: 0.04em; } /* — Toggle de idioma ES/EN — */ .idioma { display: inline-flex; border: 1px solid var(--border); border-radius: 999px; overflow: hidden; background: rgba(7, 6, 32, 0.6); } .idioma button { font-family: var(--font-display); font-size: 1.15rem; line-height: 1; padding: 0.45rem 1rem; border: 0; background: transparent; color: var(--muted); cursor: url('../media/cursor-link.png') 8 8, pointer; transition: color 0.2s, background 0.2s; } .idioma button:hover { color: var(--text); } /* El idioma activo se pinta con el degradado */ .idioma button[aria-pressed="true"] { background: var(--grad); color: #0B0722; font-weight: bold; } /* Anillo de foco visible para navegación por teclado */ .idioma button:focus-visible { outline: 2px solid var(--accent-2); outline-offset: -2px; } /* ═══ 07. LINKS Y BOTONES ════════════════════════════════════════════════ */ a { color: var(--accent); text-decoration: none; cursor: url('../media/cursor-link.png') 8 8, pointer; /* El subrayado animado se dibuja con un degradado de fondo que crece de 0% a 100% de ancho al pasar el mouse. */ background-image: var(--grad); background-repeat: no-repeat; background-position: 0 100%; background-size: 0% 2px; transition: background-size 0.3s ease, color 0.2s ease, text-shadow 0.2s ease; padding-bottom: 2px; } a:hover, a:focus-visible { color: var(--accent-2); background-size: 100% 2px; /* el subrayado se despliega */ text-shadow: var(--glow-rosa); } a:focus-visible { outline: 2px solid var(--accent-2); outline-offset: 3px; border-radius: 3px; } /* — Botón genérico (se usa en el chat y donde haga falta) — */ .boton { display: inline-block; font-family: var(--font-display); font-size: 1.2rem; line-height: 1; padding: 0.6rem 1.4rem; color: var(--text); background: rgba(110, 155, 255, 0.12); border: 1px solid var(--border); border-radius: var(--radio); cursor: url('../media/cursor-link.png') 8 8, pointer; transition: all 0.25s ease; background-size: 0 0; /* anula el subrayado animado de */ } .boton:hover, .boton:focus-visible { background: rgba(255, 99, 200, 0.18); border-color: var(--border-hi); box-shadow: var(--glow-rosa); color: var(--text); text-shadow: none; background-size: 0 0; } /* ═══ 08. SEPARADORES DECORATIVOS ════════════════════════════════════════ Úsalos con moderación: uno entre bloques grandes, no entre cada párrafo. HTML: ────────────────────────────────────────────────────────────────────── */ .separador { text-align: center; color: var(--accent-3); letter-spacing: 0.8em; font-size: 0.9rem; margin: 2rem 0; opacity: 0.7; user-select: none; } /* Línea con degradado, alternativa más discreta al separador de símbolos */ .linea { height: 1px; border: 0; background: var(--grad); opacity: 0.4; margin: 2rem 0; } /* ═══ 09. NAVEGACIÓN (rejilla de subpáginas) ═════════════════════════════ */ .nav-rejilla { display: grid; /* auto-fit + minmax = 1 columna en celular, 2-3 en pantallas grandes, sin necesidad de media queries. */ grid-template-columns: repeat(auto-fit, minmax(11rem, 1fr)); gap: 0.8rem; list-style: none; margin: 0; padding: 0; } .nav-rejilla a { display: block; padding: 0.9rem 1rem; border: 1px solid var(--border); border-radius: var(--radio); background: rgba(7, 6, 32, 0.45); background-size: 0 0; /* sin subrayado animado aquí */ color: var(--text); height: 100%; transition: transform 0.2s ease, border-color 0.2s ease, box-shadow 0.2s ease; } .nav-rejilla a:hover, .nav-rejilla a:focus-visible { transform: translateY(-3px); border-color: var(--border-hi); box-shadow: 0 6px 20px rgba(255, 99, 200, 0.18); text-shadow: none; background-size: 0 0; } /* Nombre del enlace, en fuente pixel */ .nav-rejilla .nav-titulo { display: block; font-family: var(--font-display); font-size: 1.4rem; color: var(--accent); } .nav-rejilla a:hover .nav-titulo { color: var(--accent-2); } /* Descripción corta bajo el nombre */ .nav-rejilla .nav-desc { display: block; font-size: 0.85rem; color: var(--muted); line-height: 1.4; } /* ═══ 10. WIDGET DE STATUS ═══════════════════════════════════════════════ */ .status-lista { list-style: none; margin: 0; padding: 0; display: grid; gap: 0.7rem; } .status-lista li { display: grid; /* Etiqueta arriba, valor abajo en celular; lado a lado desde 30rem */ gap: 0.15rem; } @media (min-width: 30rem) { .status-lista li { grid-template-columns: 9rem 1fr; gap: 0.8rem; align-items: baseline; } } .status-etiqueta { font-family: var(--font-display); font-size: 1.15rem; color: var(--accent-3); text-transform: uppercase; letter-spacing: 0.05em; } .status-valor { color: var(--text); } /* Puntito que late, indicando "en vivo" */ .punto-vivo { display: inline-block; width: 0.55rem; height: 0.55rem; border-radius: 50%; background: var(--accent-2); margin-right: 0.4rem; vertical-align: middle; animation: latido 2s ease-in-out infinite; } @keyframes latido { 0%, 100% { box-shadow: 0 0 0 0 rgba(255, 99, 200, 0.7); opacity: 1; } 70% { box-shadow: 0 0 0 0.5rem rgba(255, 99, 200, 0); opacity: 0.75; } } /* ═══ 11. CHIPS DE INTERESES ═════════════════════════════════════════════ */ .chips { display: flex; flex-wrap: wrap; gap: 0.5rem; list-style: none; margin: 0; padding: 0; } .chips li { font-family: var(--font-display); font-size: 1.1rem; line-height: 1; padding: 0.45rem 0.8rem; border: 1px solid var(--border); border-radius: 999px; background: rgba(110, 155, 255, 0.10); color: var(--text); transition: all 0.2s ease; } .chips li:hover { border-color: var(--border-hi); background: rgba(255, 99, 200, 0.14); color: var(--accent-2); } /* ═══ 12. BITÁCORA DE ACTUALIZACIONES ════════════════════════════════════ */ .bitacora { list-style: none; margin: 0; padding: 0; /* Línea vertical del degradado a la izquierda */ border-left: 2px solid transparent; border-image: var(--grad) 1; padding-left: 1rem; } .bitacora li { margin-bottom: 1rem; } .bitacora li:last-child { margin-bottom: 0; } .bitacora time { display: block; font-family: var(--font-display); font-size: 1.1rem; color: var(--accent); letter-spacing: 0.05em; } /* ═══ 13. CHAT / LIBRO DE VISITAS ════════════════════════════════════════ */ /* Regla de seguridad: cualquier elemento con el atributo hidden se esconde de verdad. Sin el !important, una clase con "display" puede ganarle (pasa por especificidad) y el elemento seguiría visible. */ [hidden] { display: none !important; } /* El chat es una ventanita (iframe) servida por el Worker de Cloudflare. Sus estilos NO están aquí: viven dentro del propio Worker, en la función paginaWidget() de editor/cloudflare/worker.js. Si cambias un color de la paleta arriba, cámbialo también allá — son dos archivos porque están en dos servidores distintos. El alto lo ajusta solo el guion que está al final de home.html: la ventanita mide su contenido y lo reporta. min-height es solo para mientras carga, para que la página no dé un brinco. */ .chat-marco { display: block; width: 100%; min-height: 22rem; border: 0; overflow: hidden; color-scheme: dark; } /* ═══ 14. BOTONES 88x31 Y BLINKIES ═══════════════════════════════════════ */ .botones { display: flex; flex-wrap: wrap; gap: 0.55rem; align-items: center; padding: 0; margin: 0; list-style: none; } /* Los 88x31 son de tamaño fijo por tradición; image-rendering: pixelated evita que el navegador los suavice al escalarlos en pantallas retina. */ .boton88 { width: 88px; height: 31px; display: block; border: 1px solid var(--border); image-rendering: pixelated; transition: transform 0.15s ease, box-shadow 0.15s ease; } .botones a { background-size: 0 0; } .botones a:hover .boton88 { transform: scale(1.08); box-shadow: var(--glow-rosa); } /* Caja con el código HTML para que otros te enlacen */ .codigo-caja { width: 100%; font-family: ui-monospace, 'Courier New', monospace; font-size: 0.8rem; color: var(--muted); background: rgba(7, 6, 32, 0.8); border: 1px solid var(--border); border-radius: var(--radio); padding: 0.7rem; resize: vertical; min-height: 5rem; } /* ═══ 15. PIE DE PÁGINA ══════════════════════════════════════════════════ */ .pie { text-align: center; color: var(--muted); font-size: 0.85rem; padding-top: 2rem; } .pie a { color: var(--accent-3); } /* ═══ 16. SCROLLBAR PERSONALIZADO ════════════════════════════════════════ Dos sintaxis: la de WebKit (Chrome, Safari, Edge) y la estándar (Firefox). Ambas se declaran para cubrir todos los navegadores. ────────────────────────────────────────────────────────────────────── */ /* Firefox */ * { scrollbar-width: thin; scrollbar-color: var(--accent-3) var(--bg); } /* WebKit */ ::-webkit-scrollbar { width: 12px; height: 12px; } ::-webkit-scrollbar-track { background: var(--bg); border-left: 1px solid var(--border); } ::-webkit-scrollbar-thumb { background: var(--grad); border-radius: 999px; border: 3px solid var(--bg); /* margen que adelgaza visualmente la barra */ } ::-webkit-scrollbar-thumb:hover { background: var(--accent-2); } /* ═══ 17. SISTEMA BILINGÜE ES/EN ═════════════════════════════════════════ Cada texto se escribe dos veces en el HTML: HolaHello Por omisión se ve el español. El JS (js/idioma.js) pone la clase .lang-en en y entonces se invierte. Funciona igual con
,

,

  • , etc. ────────────────────────────────────────────────────────────────────── */ /* Ocultamos el idioma que NO toca. Se usa !important porque otras reglas del sitio (por ejemplo .nav-desc { display:block }) son más específicas y, sin él, ganarían y se verían los dos idiomas encimados. El idioma visible nunca se toca: conserva el display que le da su propia regla (block, flex, inline, lo que sea). */ html:not(.lang-en) [data-lang="en"] { display: none !important; } html.lang-en [data-lang="es"] { display: none !important; } /* ═══ 18. ACCESIBILIDAD Y MOVIMIENTO REDUCIDO ════════════════════════════ */ /* Enlace "saltar al contenido": invisible hasta que se enfoca con Tab. Es lo primero del para quien navega con teclado. */ .saltar { position: absolute; left: -9999px; top: 0; background: var(--accent-2); color: #0B0722; padding: 0.6rem 1rem; z-index: 100; border-radius: 0 0 var(--radio) 0; } .saltar:focus { left: 0; text-shadow: none; } /* Texto solo para lectores de pantalla */ .solo-lector { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; } /* Si el sistema del visitante pide menos movimiento, apagamos parpadeos, latidos y transiciones. La estética se mantiene. */ @media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: 0.001ms !important; animation-iteration-count: 1 !important; transition-duration: 0.001ms !important; scroll-behavior: auto !important; } .estrella { opacity: 0.6; } } /* ═══ 13b. CHAT — CONTROLES DE ADMINISTRADOR ═════════════════════════════ Solo se ven cuando entras con #admin al final de la dirección. ────────────────────────────────────────────────────────────────────── */ .chat-admin { display: flex; flex-wrap: wrap; gap: 0.5rem; margin-top: 0.7rem; padding-top: 0.7rem; border-top: 1px dashed var(--border); } .chat-admin input[type="text"] { flex: 1 1 12rem; font-family: var(--font-body); font-size: 0.95rem; color: var(--text); background: rgba(7, 6, 32, 0.7); border: 1px solid var(--border); border-radius: var(--radio); padding: 0.5rem 0.7rem; } .chat-admin .boton { font-size: 1rem; padding: 0.4rem 0.9rem; } /* Mensaje de confirmación / error bajo el formulario del chat */ #chat-aviso-envio { min-height: 1.4rem; font-size: 0.9rem; } /* ═══════════════════════════════════════════════════════════════════════ 19. LAYOUT ANCHO: MARCO Y REJILLA ─────────────────────────────────────────────────────────────────────── Esta es la estructura de home.html. La idea: ┌─ .marco ────────────────────────────────────┐ │ .marco-barra (nombre …………… idioma) │ ├──────────────────┬──────────────────────────┤ │ escena │ bienvenida │ ├──────────────────┼──────────────────────────┤ │ por qué │ links │ ├──────────────────┼──────────────────────────┤ │ intereses │ status │ ├──────────────────┴──────────────────────────┤ │ chat (celda ancha) │ ├─────────────────────────────────────────────┤ │ .marco-pie │ └─────────────────────────────────────────────┘ Las líneas divisorias NO son bordes: son el fondo del contenedor asomándose por huecos de 1px entre las celdas (gap: 1px). Así nunca se duplican ni se despegan, sin importar cuántas celdas haya. EN CELULAR todo se apila en una sola columna automáticamente. ═══════════════════════════════════════════════════════════════════════ */ /* Contenedor ancho, solo para home.html */ .envoltorio--ancho { max-width: 74rem; } /* Frase grande centrada, arriba del marco */ .epigrafe { text-align: center; font-family: var(--font-display); font-size: clamp(1.1rem, 3.6vw, 1.75rem); line-height: 1.35; letter-spacing: 0.06em; color: var(--accent-3); margin: 0 auto 1.6rem; max-width: 40ch; text-transform: uppercase; } .epigrafe .firma { display: block; font-size: 0.6em; color: var(--muted); letter-spacing: 0.14em; margin-top: 0.4rem; text-transform: none; } /* ── El marco ── */ .marco { border: 1px solid var(--border); border-radius: var(--radio); background: var(--border); /* este color es el que se ve en los huecos */ overflow: hidden; box-shadow: 0 0 40px rgba(110, 155, 255, 0.10); } /* ── Barra de título ── */ .marco-barra, .marco-pie { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 0.75rem; padding: 0.7rem 1.1rem; background: var(--panel-solid); font-family: var(--font-display); font-size: 1.15rem; letter-spacing: 0.06em; } .marco-barra { border-bottom: 1px solid var(--border); } .marco-pie { border-top: 1px solid var(--border); font-size: 1rem; color: var(--muted); text-transform: uppercase; } .marco-marca { color: var(--accent); } .marco-marca .destello { color: var(--accent-2); } /* ── La rejilla de celdas ── */ .marco-rejilla { display: grid; grid-template-columns: 1fr; /* móvil: una columna */ gap: 1px; /* los huecos = las líneas divisorias */ } /* Desde 60rem (≈960px) pasamos a dos columnas */ @media (min-width: 60rem) { .marco-rejilla { grid-template-columns: 1fr 1fr; } } .celda { background: var(--panel-solid); padding: 1.5rem 1.3rem; min-width: 0; /* evita que un texto largo estire la columna */ } /* Celda que ocupa el ancho completo (chat, blinkies) */ .celda--ancha { grid-column: 1 / -1; } /* Celda de la escena: sin relleno, para que el dibujo llegue a la orilla */ .celda--escena { padding: 0; display: flex; background: #04031A; } /* Dentro del marco los títulos son un poco más chicos, para que quepan dos columnas cómodamente */ .celda h2 { font-size: clamp(1.5rem, 4.2vw, 1.85rem); } /* ═══ 20. LA ESCENA DE LA CARRETERA ══════════════════════════════════════ Dibujo SVG inline (va escrito dentro del HTML). Al estar inline puede usar las variables de color del sitio y responder a "reducir movimiento". ────────────────────────────────────────────────────────────────────── */ .escena { display: block; width: 100%; height: 100%; min-height: 15rem; } /* Parpadeo de las estrellas del dibujo. Cada una trae su propio retraso en el atributo style (--d), para que no parpadeen todas a la vez. */ .escena-estrellas rect { animation: escena-titilar 3.4s ease-in-out infinite; animation-delay: var(--d, 0s); } @keyframes escena-titilar { 0%, 100% { opacity: 0.2; } 50% { opacity: 1; } } /* Ciclo del semáforo: 7 segundos. verde ████████░░░░░░░░ 0 % → 38 % ámbar ░░░░░░░░██░░░░░░ 38 % → 48 % rojo ░░░░░░░░░░██████ 48 % → 98 % steps(1,end) hace el cambio seco, sin desvanecido: como un semáforo real. El segundo semáforo usa --retraso para ir desfasado del primero. */ .semaforo .luz-verde { animation: sem-verde 7s steps(1, end) infinite; animation-delay: var(--retraso, 0s); } .semaforo .luz-ambar { animation: sem-ambar 7s steps(1, end) infinite; animation-delay: var(--retraso, 0s); } .semaforo .luz-rojo { animation: sem-rojo 7s steps(1, end) infinite; animation-delay: var(--retraso, 0s); } @keyframes sem-verde { 0% { opacity: 1; } 38% { opacity: 0.12; } 100% { opacity: 0.12; } } @keyframes sem-ambar { 0% { opacity: 0.12; } 38% { opacity: 1; } 48% { opacity: 0.12; } 100% { opacity: 0.12; } } @keyframes sem-rojo { 0% { opacity: 0.12; } 48% { opacity: 1; } 98% { opacity: 0.12; } 100% { opacity: 0.12; } } /* Si el visitante pidió menos movimiento, dejamos el semáforo fijo en verde en lugar de apagarlo a medias (que se vería como un error). */ @media (prefers-reduced-motion: reduce) { .semaforo .luz-ambar, .semaforo .luz-rojo { opacity: 0.12; } .semaforo .luz-verde { opacity: 1; } } /* ═══ 21. PÁGINA DE ENTRADA (splash) ═════════════════════════════════════ */ .entrada { min-height: 100vh; min-height: 100dvh; /* dvh = alto real en celulares, sin la barra */ display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 1.2rem; padding: 2rem 1.2rem; text-align: center; } /* El nombre en la portada respira más que en el resto del sitio */ .entrada h1 { font-size: clamp(3.5rem, 18vw, 8rem); margin: 0; line-height: 1; } .entrada .lema { margin: 0; max-width: 32ch; } /* Botón ENTRAR: grande, con brillo que late suavemente */ .boton-entrar { font-family: var(--font-display); font-size: clamp(1.5rem, 6vw, 2rem); letter-spacing: 0.22em; padding: 0.7rem 2.2rem 0.7rem 2.4rem; /* extra a la izquierda por el espaciado */ margin-top: 1rem; color: var(--text); background: rgba(110, 155, 255, 0.10); border: 1px solid var(--border); border-radius: 999px; background-size: 0 0; animation: respirar 3.5s ease-in-out infinite; transition: transform 0.25s ease, background 0.25s ease, border-color 0.25s ease; } .boton-entrar:hover, .boton-entrar:focus-visible { color: var(--text); background: rgba(255, 99, 200, 0.16); border-color: var(--border-hi); transform: scale(1.05); text-shadow: none; background-size: 0 0; } @keyframes respirar { 0%, 100% { box-shadow: 0 0 14px rgba(110, 155, 255, 0.25); } 50% { box-shadow: 0 0 26px rgba(255, 99, 200, 0.45); } } /* Nota chiquita al pie de la portada */ .entrada .nota { color: var(--muted); font-size: 0.85rem; margin: 0; } /* ═══ 22. AJUSTES PARA PANTALLAS CHICAS ══════════════════════════════════ Menos relleno y textos un poco más compactos, para aprovechar el ancho del celular sin que se sienta apretado. ────────────────────────────────────────────────────────────────────── */ @media (max-width: 30rem) { .envoltorio { padding: 1rem 0.75rem 3rem; } .celda { padding: 1.15rem 1rem; } .marco-barra, .marco-pie { padding: 0.6rem 0.9rem; font-size: 1rem; } .marco { border-radius: 8px; } body { line-height: 1.65; } .separador { margin: 1.4rem 0; letter-spacing: 0.6em; } /* La escena se recorta un poco más alta para no comerse la pantalla */ .escena { min-height: 11rem; max-height: 45vh; } } /* ═══ 23. VARIANTE COMPACTA DE LA REJILLA DE LINKS ═══════════════════════ La que se usa dentro del marco: solo el nombre, sin descripción, en dos columnas apretadas. La versión con descripción (.nav-rejilla a secas) se usa en las subpáginas, donde hay más espacio. ────────────────────────────────────────────────────────────────────── */ .nav-rejilla--compacta { grid-template-columns: repeat(auto-fit, minmax(8.5rem, 1fr)); gap: 0.55rem; } .nav-rejilla--compacta a { padding: 0.6rem 0.85rem; } .nav-rejilla--compacta .nav-titulo { font-size: 1.25rem; } /* ═══════════════════════════════════════════════════════════════════════ 24. BARRA DE NAVEGACIÓN SUPERIOR ─────────────────────────────────────────────────────────────────────── Va arriba de todo, en todas las páginas. En celular se envuelve sola en varias filas; no hay menú hamburguesa a propósito (menos JS, y con pocas secciones caben todas a la vista). ═══════════════════════════════════════════════════════════════════════ */ .nav-superior { display: flex; flex-wrap: wrap; justify-content: center; gap: 0.4rem; padding: 0.45rem; margin-bottom: 1.5rem; border: 1px solid var(--border); border-radius: 999px; background: rgba(7, 6, 32, 0.55); backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px); } .nav-superior a { font-family: var(--font-display); font-size: 1.15rem; line-height: 1; padding: 0.45rem 0.9rem; border-radius: 999px; color: var(--muted); background-size: 0 0; /* sin el subrayado animado de los links */ transition: color 0.2s, background 0.2s; } .nav-superior a:hover, .nav-superior a:focus-visible { color: var(--text); background: rgba(255, 99, 200, 0.14); text-shadow: none; background-size: 0 0; } /* La página en la que estás parado se marca con el degradado. aria-current="page" también se lo dice a los lectores de pantalla. */ .nav-superior a[aria-current="page"] { background: var(--grad); color: #0B0722; font-weight: bold; } /* En pantallas chicas: menos redondeo y letras un pelo más chicas */ @media (max-width: 30rem) { .nav-superior { border-radius: var(--radio); gap: 0.3rem; } .nav-superior a { font-size: 1.05rem; padding: 0.4rem 0.7rem; } } /* ═══ 25. BANNER DE PORTADA ══════════════════════════════════════════════ La escena panorámica con el nombre encima. ────────────────────────────────────────────────────────────────────── */ .banner { position: relative; border: 1px solid var(--border); border-radius: var(--radio); overflow: hidden; margin-bottom: var(--espacio); background: #04031A; line-height: 0; /* quita el espacio fantasma bajo el SVG */ } .banner .escena { height: clamp(10rem, 26vw, 19rem); min-height: 0; } /* Degradado oscuro abajo, para que el texto se lea sobre el dibujo */ .banner::after { content: ''; position: absolute; inset: 40% 0 0; background: linear-gradient(to bottom, transparent, rgba(4, 3, 26, 0.85)); pointer-events: none; } .banner-texto { position: absolute; left: 1.2rem; bottom: 1rem; z-index: 1; line-height: 1.1; } .banner-etiqueta { display: block; font-family: var(--font-display); font-size: 1rem; letter-spacing: 0.28em; text-transform: uppercase; color: var(--accent-2); margin-bottom: 0.1rem; } .banner-nombre { display: block; font-family: var(--font-display); font-size: clamp(2.4rem, 9vw, 4.5rem); color: var(--text); /* Sombra dura tipo pixel + resplandor azul, para despegarlo del cielo */ text-shadow: 3px 3px 0 rgba(4, 3, 26, 0.9), 0 0 22px rgba(110, 155, 255, 0.5); } /* ═══ 26. CABECERA DE SECCIÓN CON ENLACE "VER TODO" ══════════════════════ */ .cabecera-seccion { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 0.6rem; } .cabecera-seccion h2 { margin-bottom: 0.6rem; } .ver-todo { font-family: var(--font-display); font-size: 1.05rem; letter-spacing: 0.05em; color: var(--accent-3); white-space: nowrap; } /* ═══ 27. ARCHIVO (bitácora con scroll propio) ═══════════════════════════ Caja de alto fijo con su propia barra de desplazamiento. Así caben muchas entradas sin estirar la página. El enlace "ver todo" abre la página completa (pages/archivo.html). PARA AGREGAR UNA ENTRADA: copia un
    completo y ponlo HASTA ARRIBA de la caja. ────────────────────────────────────────────────────────────────────── */ .archivo-caja { max-height: 24rem; overflow-y: auto; /* Espacio a la derecha para que el texto no se pegue a la barra */ padding-right: 0.6rem; /* Aviso visual de que hay más abajo: el contenido se desvanece al llegar al borde inferior de la caja. */ mask-image: linear-gradient(to bottom, #000 calc(100% - 2rem), transparent); -webkit-mask-image: linear-gradient(to bottom, #000 calc(100% - 2rem), transparent); } .archivo-entrada { border: 1px solid var(--border); border-radius: var(--radio); padding: 0.85rem 1rem; margin-bottom: 0.8rem; background: rgba(7, 6, 32, 0.45); } .archivo-entrada:last-child { margin-bottom: 2rem; } /* aire para el desvanecido */ .archivo-entrada time { display: block; font-family: var(--font-display); font-size: 1.05rem; letter-spacing: 0.08em; color: var(--accent); margin-bottom: 0.3rem; } .archivo-entrada p { font-size: 0.95rem; } .archivo-entrada p:last-child { margin-bottom: 0; } /* ═══ 28. ALEX PICKS (recomendaciones de música) ═════════════════════════ Tarjetas de: carátula + artista/canción + por qué te gustó + enlace. Sin reproductor incrustado a propósito: carga al instante y ningún servicio externo ve quién visita tu sitio. PARA AGREGAR UN PICK: copia un
    completo y ponlo hasta arriba. Si no tienes carátula, deja el
    y se ve una plaquita con una estrella. ────────────────────────────────────────────────────────────────────── */ .picks { display: grid; gap: 0.9rem; } .pick { display: grid; grid-template-columns: 4.5rem 1fr; gap: 0.9rem; border: 1px solid var(--border); border-radius: var(--radio); padding: 0.85rem; background: rgba(7, 6, 32, 0.45); transition: border-color 0.2s ease; } .pick:hover { border-color: var(--border-hi); } .pick-caratula { width: 4.5rem; height: 4.5rem; border-radius: 6px; border: 1px solid var(--border); object-fit: cover; image-rendering: pixelated; /* si subes una carátula chiquita, se ve nítida */ } /* Placa de relleno cuando todavía no hay carátula */ .pick-caratula--vacia { display: grid; place-items: center; background: linear-gradient(135deg, #17103F, #2A1150); color: var(--accent-3); font-size: 1.6rem; } .pick-titulo { font-family: var(--font-display); font-size: 1.3rem; line-height: 1.15; color: var(--accent); margin: 0 0 0.15rem; } .pick-artista { color: var(--accent-2); } .pick-fecha { display: block; font-size: 0.78rem; color: var(--muted); letter-spacing: 0.06em; margin-bottom: 0.45rem; } /* Tu comentario de por qué te gustó */ .pick-porque { font-size: 0.93rem; font-style: italic; margin: 0 0 0.5rem; } .pick-escuchar { font-family: var(--font-display); font-size: 1.1rem; letter-spacing: 0.05em; } /* En pantallas muy chicas la carátula se encoge para dar aire al texto */ @media (max-width: 26rem) { .pick { grid-template-columns: 3.4rem 1fr; gap: 0.7rem; } .pick-caratula { width: 3.4rem; height: 3.4rem; } } /* ── La luna del banner es un enlace ────────────────────────────────── No lleva a ningún lado del menú. Lo único que la delata es que brilla un poco más cuando le pasas el cursor o cuando la enfocas con el teclado. Si quieres que no se note nada, borra estas tres reglas. ─────────────────────────────────────────────────────────────────── */ .luna-enlace { cursor: pointer; } .luna-enlace .luna-halo { transition: opacity 0.5s ease; } .luna-enlace:hover .luna-halo, .luna-enlace:focus-visible .luna-halo { opacity: 0.9; } .luna-enlace:focus-visible { outline: none; }