/* ============================================================================ PORTADA ---------------------------------------------------------------------------- Rework de la landing, que era el ultimo puerto del legacy en pie: index.css (40 KB) mas operations.css (15 KB, que es de la pagina de MISION y aqui solo se cargaba por una regla suelta sobre `body`), con la paleta morada de la maqueta vieja —#667eea -> #764ba2— mientras el resto del sitio ya iba en azul. Ahora comparte lenguaje con el SOP (sop.css), OPERACIONES (ops.css), PILOTOS (pilots.css), ESCUADRONES (squadrons.css) y las fichas (profile.css / mission.css): · fondo #0f172e con fotografia fija bajo un velo azul noche · paneles en degradado 150deg sobre azul noche · acento AZUL #60a5fa; boton principal #3b82f6 -> #6366f1 · rotulos en versalitas muy espaciadas (letter-spacing .2-.26em) · filete degradado rematando cada titulo de seccion (.hm-rule) · rejilla tecnica de 64px enmascarada · cifras con font-variant-numeric: tabular-nums Lo unico que NO es propio de este fichero son las tarjetas de operacion: son las de ops.css tal cual (), a proposito, para que lo que se enseña aqui sea identico a lo que se enseña en /operaciones. Por eso la portada carga tambien ops.css. ============================================================================ */ body.page-home { --hm-accent: #60a5fa; --hm-accent-soft: rgba(96, 165, 250, 0.13); --hm-accent-line: rgba(96, 165, 250, 0.30); /* Verde = objetivo cumplido / en curso; ambar = lo que aun no ha llegado. Los mismos que usan ops.css y sop.css para lo mismo. */ --hm-go: #4ade80; --hm-soon: #fbbf24; --hm-ink: #fff; --hm-body: #cbd5e1; --hm-muted: #8296b8; --hm-dim: #64748b; --hm-line: rgba(255, 255, 255, 0.08); --hm-panel: linear-gradient(150deg, rgba(30, 41, 59, 0.93), rgba(15, 23, 46, 0.96)); --hm-shadow: 0 30px 60px -25px rgba(0, 0, 0, 0.9); background-color: #0f172e; color: var(--hm-body); font-family: 'Oswald', sans-serif; } /* Fondo del documento: fotografia quieta bajo un velo azul noche, el mismo tratamiento que el resto del sitio. La foto es UNA DE LAS DEL HERO a proposito: ya se ha descargado para el pase de imagenes, asi que el fondo no cuesta un solo byte mas. El velo va mas cerrado que en las otras paginas (.93/.97) porque aqui la fotografia protagonista es la del hero y esta solo tiene que dar textura, no competir. VA EN UNA CAPA PROPIA y no en `background-attachment: fixed` del . Con `fixed` el navegador tiene que REPINTAR el fondo en cada fotograma de scroll —no puede componerlo—, y en una pagina tan larga como esta eso es justo el tiron que se notaba al bajar. Una capa `position: fixed` se rasteriza una vez y el compositor la deja quieta sola. */ body.page-home::before { content: ''; position: fixed; inset: 0; z-index: -1; background: linear-gradient(rgba(15, 23, 46, 0.93), rgba(15, 23, 46, 0.97)), url('../images/hero/bandits_17.webp'); background-size: cover; background-position: center; pointer-events: none; } .hm { padding-bottom: 0; } /* ═════════════════════════════════════════════════════════════════════ HERO ═ La fotografia manda: es lo que da la primera impresion y tiene que VERSE. Antes el titulo iba directamente sobre la foto con un velo flojisimo (rgba(0,0,0,.12)) y segun que imagen tocara se perdia; el primer intento de arreglarlo se paso al otro lado y oscurecio tanto que la foto desaparecio. El equilibrio esta en no oscurecer y desenfocar: el velo es ligero (.hm-hero-scrim), y lo que sostiene la lectura es el DESENFOQUE de la fotografia justo detras del texto (.hm-hero-plate::before, con mascara radial para que no se vea el borde del efecto) mas la sombra del propio texto. */ .hm-hero { position: relative; display: flex; align-items: center; justify-content: center; /* `svh` es la altura visible DESCONTANDO la barra del navegador móvil, que es la que de verdad se ve al abrir la página. La línea de `vh` va antes como respaldo para quien no entienda la unidad. */ min-height: min(100vh, 900px); min-height: min(100svh, 900px); overflow: hidden; isolation: isolate; } .hm-hero-slides { position: absolute; inset: 0; z-index: 0; background: #0b1120; } .hm-hero-slide { position: absolute; inset: 0; opacity: 0; transition: opacity 1.5s ease; } .hm-hero-slide.is-on { opacity: 1; } .hm-hero-slide img { width: 100%; height: 100%; object-fit: cover; display: block; /* Aqui habia un acercamiento lentisimo (@keyframes hm-kenburns) que corria sin parar: 13 s de animacion cada 9 s de pase, o sea SIEMPRE. Se retira por rendimiento, y el motivo es lo que tiene encima: el titular va sobre una capa con `backdrop-filter`, y un backdrop-filter tiene que rehacer el desenfoque cada vez que cambia algo por detras. Con la foto moviendose eternamente, el navegador estaba desenfocando 60 veces por segundo, para siempre, en la pagina mas visitada del sitio. El pase de fotografias ya da la sensacion de movimiento que se buscaba. */ transform: none; } .hm-hero-scrim { position: absolute; inset: 0; z-index: 1; /* Velo LIGERO. La primera versión iba tan cerrada (viñeta al 66 %, cabecera al 74 %) que la fotografía casi no se veía, que es justo lo contrario de lo que tiene que hacer un hero. Ahora la foto manda y quien sostiene la legibilidad del texto es el desenfoque de .hm-hero-plate, no el oscurecido. Lo único que se mantiene cerrado es el pie, para fundir con el documento. */ background: radial-gradient(ellipse 62% 60% at 50% 48%, rgba(6, 11, 26, 0.34), transparent 78%), linear-gradient(to bottom, rgba(15, 23, 46, 0.46) 0%, rgba(15, 23, 46, 0.06) 30%, rgba(15, 23, 46, 0.34) 70%, #0f172e 100%); pointer-events: none; } .hm-hero-grid { position: absolute; inset: 0; z-index: 2; background-image: linear-gradient(rgba(255, 255, 255, 0.04) 1px, transparent 1px), linear-gradient(90deg, rgba(255, 255, 255, 0.04) 1px, transparent 1px); background-size: 64px 64px; -webkit-mask-image: linear-gradient(to bottom, transparent 0%, rgba(0, 0, 0, 0.8) 42%, transparent 92%); mask-image: linear-gradient(to bottom, transparent 0%, rgba(0, 0, 0, 0.8) 42%, transparent 92%); pointer-events: none; } .hm-hero-inner { position: relative; z-index: 3; width: 100%; padding: 156px 0 108px; text-align: center; } /* La placa. Se desenfoca la FOTOGRAFÍA justo detrás del texto, no se pone una caja encima: por eso aquí no hay ni borde, ni sombra, ni fondo apenas. El desenfoque vive en un pseudo-elemento con una máscara radial, y ese es todo el truco: la máscara va apagando el efecto hacia los bordes, así que no se ve el rectángulo recortado sobre la imagen que se veía antes —era una caja con borde y sombra, y cantaba—. La primera versión aplicaba la máscara al propio elemento, lo que habría difuminado también el texto de los extremos; en el pseudo solo afecta al velo. */ .hm-hero-plate { position: relative; max-width: 880px; margin: 0 auto; padding: 42px clamp(22px, 4vw, 54px) 38px; } .hm-hero-plate::before { content: ''; position: absolute; /* Desborda el contenido para que el degradado de la máscara tenga sitio donde apagarse y no muera justo en el borde del texto. */ inset: -14% -9%; z-index: -1; background: rgba(10, 16, 34, 0.24); backdrop-filter: blur(14px) saturate(1.1); -webkit-backdrop-filter: blur(14px) saturate(1.1); -webkit-mask-image: radial-gradient(ellipse 62% 58% at 50% 50%, #000 40%, transparent 100%); mask-image: radial-gradient(ellipse 62% 58% at 50% 50%, #000 40%, transparent 100%); pointer-events: none; } .hm-hero-title { margin: 0; display: flex; flex-direction: column; gap: 16px; align-items: center; } /* KRINKES DECOR: la tipografía de la casa, la misma del rótulo de la cabecera. Es la que llevaba este titular desde siempre y el rework la había cambiado por Horizon. Se usa tal como está pensada —caja mixta y espaciado corto—: es una decorativa, y en versalitas con mucho tracking se destroza. Horizon se queda para los rótulos técnicos, que son los que comparte con el resto del sitio. */ .hm-hero-t1 { font-family: 'krinkes decor', 'krinkes', cursive; font-size: clamp(2.05rem, 7.8vw, 4.5rem); line-height: 1.04; letter-spacing: 1px; color: var(--hm-ink); text-shadow: 0 6px 26px rgba(0, 0, 0, 0.85), 0 2px 6px rgba(0, 0, 0, 0.6); } /* Segunda linea del h1: dice QUE es esto. Va en versalitas espaciadas y con un filete a cada lado, como los rotulos del resto del sitio. */ .hm-hero-t2 { display: flex; align-items: center; gap: 14px; max-width: 100%; font-size: clamp(0.6rem, 1.9vw, 0.78rem); font-weight: 400; letter-spacing: 0.26em; text-transform: uppercase; color: #dbe8fb; text-shadow: 0 2px 10px rgba(0, 0, 0, 0.8); } .hm-hero-t2::before, .hm-hero-t2::after { content: ''; flex: 1; min-width: 32px; height: 1px; background: linear-gradient(90deg, transparent, rgba(96, 165, 250, 0.55)); } .hm-hero-t2::after { background: linear-gradient(90deg, rgba(96, 165, 250, 0.55), transparent); } .hm-hero-sub { max-width: 62ch; margin: 22px auto 0; font-size: clamp(0.94rem, 1.9vw, 1.08rem); line-height: 1.7; color: #e4edfb; /* Con el velo más ligero, la sombra del texto es la que sostiene la lectura cuando la fotografía de turno trae una zona clara justo detrás. */ text-shadow: 0 2px 14px rgba(0, 0, 0, 0.85), 0 1px 3px rgba(0, 0, 0, 0.7); } .hm-hero-actions { display: flex; flex-wrap: wrap; gap: 14px; justify-content: center; margin-top: 30px; } /* ── Botones ──────────────────────────────────────────────────────────────── Los mismos que .pf-btn / .sop-btn: azul del sitio, nada de morado. */ .hm-btn { display: inline-flex; align-items: center; gap: 11px; padding: 14px 28px; border-radius: 12px; border: 1px solid transparent; font-family: 'Horizon', sans-serif; font-size: 0.76rem; letter-spacing: 0.13em; text-transform: uppercase; text-decoration: none !important; cursor: pointer; transition: transform 0.2s ease, background 0.2s ease, border-color 0.2s ease, box-shadow 0.2s ease; } .hm-btn i, .hm-btn img { font-size: 1.05em; width: 1.05em; height: 1.05em; object-fit: contain; } /* Talla pequeña, para cuando el botón va dentro de un panel y no suelto en la página (las respuestas de la FAQ). */ .hm-btn.is-sm { padding: 10px 18px; gap: 9px; font-size: 0.66rem; border-radius: 10px; } /* La flecha del final se separa del texto y se adelanta al pasar el ratón. */ .hm-btn-go { margin-left: 2px; opacity: 0.75; transition: transform 0.2s ease, opacity 0.2s ease; } .hm-btn:hover .hm-btn-go { opacity: 1; transform: translateX(3px); } .hm-btn.is-primary { background: linear-gradient(135deg, #3b82f6, #6366f1); color: #fff; box-shadow: 0 18px 40px -18px rgba(59, 130, 246, 0.9); } .hm-btn.is-primary:hover { background: linear-gradient(135deg, #2563eb, #4f46e5); transform: translateY(-2px); } /* Sin `backdrop-filter`: en el hero estos botones van DENTRO de la placa, que ya desenfoca la fotografia por detras, asi que era una segunda capa de desenfoque sobre algo ya desenfocado —coste doble y cero diferencia a la vista—. El fondo sube de opacidad para compensar. */ .hm-btn.is-ghost { border-color: rgba(255, 255, 255, 0.2); background: rgba(15, 23, 46, 0.62); color: #e2e8f0; } .hm-btn.is-ghost:hover { border-color: var(--hm-accent-line); background: rgba(96, 165, 250, 0.13); color: #fff; transform: translateY(-2px); } /* Acento: para los enlaces que llevan a otra página del sitio (escuadrones, pilotos, el panel, la galería). Más presencia que el fantasma —tiene relleno, color y resplandor propios— sin robarle el sitio al botón principal, que es el que lleva al Discord. */ .hm-btn.is-accent { border-color: rgba(96, 165, 250, 0.5); background: linear-gradient(135deg, rgba(96, 165, 250, 0.2), rgba(99, 102, 241, 0.14)); color: #dbeafe; box-shadow: 0 16px 34px -20px rgba(96, 165, 250, 0.85); } .hm-btn.is-accent i { color: var(--hm-accent); transition: color 0.2s ease; } .hm-btn.is-accent:hover { border-color: var(--hm-accent); background: linear-gradient(135deg, rgba(96, 165, 250, 0.34), rgba(99, 102, 241, 0.26)); color: #fff; transform: translateY(-2px); box-shadow: 0 22px 44px -18px rgba(96, 165, 250, 0.95); } .hm-btn.is-accent:hover i { color: #fff; } .hm-btn.is-discord { background: #5865f2; color: #fff; box-shadow: 0 18px 40px -18px rgba(88, 101, 242, 0.9); } .hm-btn.is-discord:hover { background: #4752c4; transform: translateY(-2px); } /* ── Franja de la proxima operacion ───────────────────────────────────────── Prueba de que el escuadron esta vivo, y lo primero que quiere saber quien llega: cuando se vuela. Sale del MISMO dato que /operaciones. Si no hay ninguna operacion futura convocada, esta franja no se pinta (ver la vista): una cuenta atras a cero seria peor que no tener franja. */ .hm-next { display: inline-flex; align-items: center; gap: 16px; max-width: 100%; margin-top: 30px; padding: 11px 20px 11px 18px; border-radius: 999px; border: 1px solid var(--hm-accent-line); background: rgba(10, 16, 34, 0.6); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); text-decoration: none !important; color: inherit; transition: border-color 0.2s ease, background 0.2s ease, transform 0.2s ease; } .hm-next:hover { border-color: rgba(96, 165, 250, 0.6); background: rgba(20, 32, 60, 0.72); transform: translateY(-2px); } .hm-next-dot { flex: none; width: 9px; height: 9px; border-radius: 50%; background: var(--hm-go); box-shadow: 0 0 0 0 rgba(74, 222, 128, 0.6); animation: hm-pulse 2.4s infinite; } @keyframes hm-pulse { 70% { box-shadow: 0 0 0 9px rgba(74, 222, 128, 0); } 100% { box-shadow: 0 0 0 0 rgba(74, 222, 128, 0); } } .hm-next-txt { display: flex; flex-direction: column; align-items: flex-start; gap: 3px; min-width: 0; text-align: left; } .hm-next-label { font-size: 0.58rem; letter-spacing: 0.24em; text-transform: uppercase; color: var(--hm-muted); } .hm-next-title { font-family: 'Horizon', sans-serif; font-size: 0.82rem; letter-spacing: 0.04em; color: var(--hm-ink); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 42vw; } .hm-next-cd { flex: none; padding: 7px 14px; border-radius: 999px; background: rgba(96, 165, 250, 0.14); border: 1px solid rgba(96, 165, 250, 0.28); font-family: 'Horizon', sans-serif; font-size: 0.78rem; letter-spacing: 0.05em; color: var(--hm-accent); font-variant-numeric: tabular-nums; white-space: nowrap; } /* Cuando la hora ya ha llegado deja de ser una cuenta atras: es un aviso. */ .hm-next-cd.is-reached { background: rgba(74, 222, 128, 0.15); border-color: rgba(74, 222, 128, 0.35); color: var(--hm-go); } .hm-next-go { flex: none; color: var(--hm-muted); transition: transform 0.2s ease, color 0.2s ease; } .hm-next:hover .hm-next-go { color: var(--hm-accent); transform: translateX(3px); } /* ── Indicador de scroll ──────────────────────────────────────────────────── Un hero de pantalla completa esconde que debajo hay pagina. El `bottom` tiene que dejar libre la franja que ocupan las cifras, que suben 52 px por encima del borde del hero (.hm-stats, margen negativo) y ademas van en un z-index mayor: con menos hueco, las tarjetas se montaban justo encima de este indicador y lo tapaban. */ .hm-scroll { position: absolute; z-index: 3; left: 50%; bottom: 68px; transform: translateX(-50%); display: flex; flex-direction: column; align-items: center; gap: 7px; font-size: 0.56rem; letter-spacing: 0.24em; text-transform: uppercase; color: var(--hm-muted); text-decoration: none !important; transition: color 0.2s ease; } .hm-scroll:hover { color: var(--hm-accent); } .hm-scroll i { animation: hm-bob 2.2s ease-in-out infinite; } @keyframes hm-bob { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(5px); } } /* ══════════════════════════════════════════════════════════ MAQUETA COMUN ══ */ .hm-section { padding: 76px 0; } .hm-section.is-tight { padding-top: 0; } .hm-head { display: flex; align-items: center; gap: 18px; margin-bottom: 30px; } .hm-head h2 { margin: 0; font-family: 'Horizon', sans-serif; font-size: clamp(1.05rem, 2.6vw, 1.45rem); letter-spacing: 1.5px; text-transform: uppercase; color: var(--hm-ink); white-space: nowrap; } .hm-head h2 i { color: var(--hm-accent); font-size: 0.82em; margin-right: 11px; } /* El filete que remata el titulo, igual que .ops-rule, .msn-rule y .sop-rule. */ .hm-rule { flex: 1; height: 1px; min-width: 20px; background: linear-gradient(90deg, rgba(96, 165, 250, 0.45), rgba(255, 255, 255, 0.05)); } /* Botón centrado bajo el contenido de una sección ("ver el panel completo", "ver la galería completa"). Sustituye a los enlaces pequeños que iban en la línea del título: se pidieron debajo, que es donde de verdad se buscan —cuando ya has visto lo que hay— y no antes de haberlo visto. */ .hm-more { display: flex; justify-content: center; margin-top: 28px; } /* Aparicion al entrar en pantalla. Sustituye al data-aos del legacy, que tenia una regla distinta por cada tipo de animacion; aqui hay una sola. */ .hm-reveal { opacity: 0; transform: translateY(22px); transition: opacity 0.6s ease, transform 0.6s ease; } .hm-reveal.is-in { opacity: 1; transform: none; } /* ═══════════════════════════════════════════════════════════════════ CIFRAS ═ Montadas a caballo del borde del hero: atan la portada con el contenido en vez de empezar una franja nueva de color plano, que es lo que hacia antes. */ .hm-stats { position: relative; z-index: 4; margin-top: -52px; display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 180px), 1fr)); gap: 14px; } .hm-stat { position: relative; overflow: hidden; padding: 26px 16px 22px; border-radius: 16px; border: 1px solid var(--hm-line); background: var(--hm-panel); box-shadow: var(--hm-shadow); text-align: center; } .hm-stat::before { content: ''; position: absolute; top: 0; left: 18%; right: 18%; height: 2px; background: linear-gradient(90deg, transparent, var(--hm-accent), transparent); opacity: 0.75; } .hm-stat-n { font-family: 'Horizon', sans-serif; font-size: clamp(1.6rem, 4.2vw, 2.25rem); line-height: 1; letter-spacing: 1px; color: var(--hm-ink); font-variant-numeric: tabular-nums; } .hm-stat-l { margin-top: 11px; font-size: 0.63rem; letter-spacing: 0.2em; text-transform: uppercase; color: var(--hm-muted); } /* ═════════════════════════════════════════════════════════════ QUIENES SOMOS ═ */ .hm-about { display: grid; grid-template-columns: 0.82fr 1.18fr; gap: clamp(30px, 5vw, 64px); align-items: center; } .hm-about-side { display: flex; flex-direction: column; align-items: center; gap: 22px; } .hm-emblem { position: relative; display: flex; align-items: center; justify-content: center; width: 100%; max-width: 320px; } /* El resplandor va DETRAS, en un pseudo-elemento con degradado radial: con box-shadow + border-radius:50% sobre el (que es lo que habia) el halo redondo se veia recortando por fuera de la silueta del emblema. */ .hm-emblem::before { content: ''; position: absolute; inset: -16%; background: radial-gradient(circle, rgba(96, 165, 250, 0.28) 0%, rgba(99, 102, 241, 0.14) 46%, transparent 70%); z-index: 0; pointer-events: none; } .hm-emblem img { position: relative; z-index: 1; width: 100%; height: auto; filter: drop-shadow(0 18px 34px rgba(0, 0, 0, 0.55)); } .hm-since { display: inline-flex; align-items: center; gap: 10px; padding: 8px 20px; border-radius: 999px; background: rgba(15, 23, 46, 0.6); border: 1px solid var(--hm-line); font-size: 0.66rem; letter-spacing: 0.2em; text-transform: uppercase; color: var(--hm-muted); } .hm-since strong { font-family: 'Horizon', sans-serif; font-size: 0.86rem; letter-spacing: 0.06em; color: var(--hm-ink); font-variant-numeric: tabular-nums; } /* Krinkes, como el titular del hero: los dos son titulares editoriales de la portada, no rótulos técnicos. */ .hm-about-title { margin: 0 0 18px; font-family: 'krinkes decor', 'krinkes', cursive; font-size: clamp(1.6rem, 4.2vw, 2.65rem); line-height: 1.15; letter-spacing: 0.5px; color: var(--hm-ink); text-wrap: balance; } .hm-lead { margin: 0; font-size: 1.02rem; line-height: 1.78; color: var(--hm-body); } .hm-lead strong { color: #e8eefb; font-weight: 600; } .hm-features { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 250px), 1fr)); gap: 12px; margin: 26px 0 28px; } .hm-feature { display: flex; align-items: flex-start; gap: 14px; padding: 15px 16px; border-radius: 14px; border: 1px solid var(--hm-line); background: rgba(15, 23, 46, 0.5); transition: border-color 0.2s ease, background 0.2s ease; } .hm-feature:hover { border-color: var(--hm-accent-line); background: rgba(96, 165, 250, 0.07); } /* Cada punto lleva SU icono y no cuatro palomitas iguales: el icono distingue de que habla cada tarjeta, que es informacion; un check repetido no dice nada. */ .hm-feature-ico { flex: none; display: grid; place-items: center; width: 38px; height: 38px; border-radius: 11px; background: var(--hm-accent-soft); border: 1px solid var(--hm-accent-line); color: var(--hm-accent); font-size: 0.95rem; } .hm-feature-txt { min-width: 0; } .hm-feature-txt strong { display: block; font-family: 'Horizon', sans-serif; font-size: 0.76rem; letter-spacing: 0.06em; text-transform: uppercase; color: var(--hm-ink); margin-bottom: 5px; } .hm-feature-txt span { display: block; font-size: 0.88rem; line-height: 1.55; color: var(--hm-muted); } .hm-actions { display: flex; flex-wrap: wrap; gap: 12px; } /* ══════════════════════════════════════════════════════════════ OPERACIONES ═ Las tarjetas son las de ops.css: aqui solo va el hueco vacio. */ .hm-empty { display: flex; flex-direction: column; align-items: center; gap: 12px; padding: 46px 24px; border-radius: 18px; border: 1px dashed rgba(255, 255, 255, 0.14); background: rgba(15, 23, 46, 0.5); text-align: center; } .hm-empty i { font-size: 1.7rem; color: var(--hm-dim); } .hm-empty strong { font-family: 'Horizon', sans-serif; font-size: 0.86rem; letter-spacing: 0.08em; text-transform: uppercase; color: var(--hm-body); } .hm-empty span { font-size: 0.9rem; color: var(--hm-muted); } /* ════════════════════════════════════════════════════════════════ EL CAMINO ═ Los cinco pasos de ingreso, en el mismo orden y con el mismo contenido que la seccion 02 del SOP (de donde salen). Aqui la numeracion SI dice algo: es una secuencia real, no una decoracion. */ .hm-path { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 195px), 1fr)); gap: 13px; } .hm-step { --hm-c: var(--hm-accent); position: relative; display: flex; flex-direction: column; gap: 12px; padding: 22px 20px 20px; border-radius: 16px; border: 1px solid var(--hm-line); background: var(--hm-panel); box-shadow: var(--hm-shadow); text-decoration: none !important; color: inherit; transition: transform 0.2s ease, border-color 0.2s ease; } .hm-step:hover { transform: translateY(-3px); border-color: color-mix(in srgb, var(--hm-c) 45%, transparent); } /* El ultimo paso no es un paso mas: es la meta. */ .hm-step.is-goal { --hm-c: var(--hm-go); border-color: color-mix(in srgb, var(--hm-go) 30%, transparent); background: linear-gradient(150deg, rgba(74, 222, 128, 0.10), rgba(15, 23, 46, 0.96)); } .hm-step-n { display: grid; place-items: center; width: 34px; height: 34px; border-radius: 50%; background: color-mix(in srgb, var(--hm-c) 16%, transparent); border: 1px solid color-mix(in srgb, var(--hm-c) 42%, transparent); font-family: 'Horizon', sans-serif; font-size: 0.82rem; color: var(--hm-c); font-variant-numeric: tabular-nums; } .hm-step strong { display: block; font-family: 'Horizon', sans-serif; font-size: 0.74rem; letter-spacing: 0.07em; text-transform: uppercase; color: var(--hm-ink); margin-bottom: 7px; } .hm-step p { margin: 0; font-size: 0.86rem; line-height: 1.55; color: var(--hm-muted); } /* Aviso destacado. Mismo patron que .sop-callout.is-key. */ .hm-callout { display: flex; align-items: flex-start; gap: 16px; margin-top: 16px; padding: 20px 24px; border-radius: 16px; border: 1px solid var(--hm-accent-line); border-left: 3px solid var(--hm-accent); background: linear-gradient(150deg, rgba(96, 165, 250, 0.11), rgba(15, 23, 46, 0.9)); } .hm-callout > i { flex: none; margin-top: 2px; font-size: 1.15rem; color: var(--hm-accent); } .hm-callout-txt { flex: 1 1 auto; min-width: 0; font-size: 0.94rem; line-height: 1.65; color: var(--hm-body); } .hm-callout-txt strong { color: var(--hm-ink); } .hm-callout .hm-btn { flex: none; align-self: center; } /* ══════════════════════════════════════════════════════════════════ EL SOP ══ La invitacion a leer el manual. Tres secciones destacadas en grande y el resto del indice como enlaces sueltos: es un indice de documento, no un menu de diez cosas todas igual de importantes. El texto de cada tarjeta NO se escribe aqui: sale de SopController::sections(), que es quien manda en el documento. */ /* A todo el ancho: con `max-width: 68ch` el párrafo cortaba a media caja y dejaba un vacío enorme a la derecha, justo debajo de un título que sí llega al final. Aquí no es texto de lectura larga, son tres líneas de entradilla. */ .hm-sop-lead { margin: -8px 0 26px; font-size: 1rem; line-height: 1.75; color: var(--hm-body); } .hm-sop-key { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 280px), 1fr)); gap: 15px; } .hm-sop-card { position: relative; display: flex; flex-direction: column; gap: 13px; overflow: hidden; padding: 26px 24px 24px; border-radius: 18px; border: 1px solid var(--hm-accent-line); background: linear-gradient(150deg, rgba(96, 165, 250, 0.09), rgba(15, 23, 46, 0.96)); box-shadow: var(--hm-shadow); text-decoration: none !important; color: inherit; transition: transform 0.22s ease, border-color 0.22s ease, box-shadow 0.22s ease; } .hm-sop-card::before { content: ''; position: absolute; top: 0; left: 0; right: 0; height: 3px; background: linear-gradient(90deg, var(--hm-accent), rgba(99, 102, 241, 0.5)); } .hm-sop-card:hover { transform: translateY(-4px); border-color: rgba(96, 165, 250, 0.6); box-shadow: 0 34px 64px -26px rgba(0, 0, 0, 0.95); } .hm-sop-ico { display: grid; place-items: center; width: 46px; height: 46px; border-radius: 13px; background: var(--hm-accent-soft); border: 1px solid var(--hm-accent-line); color: var(--hm-accent); font-size: 1.15rem; } .hm-sop-card h3 { margin: 0; font-family: 'Horizon', sans-serif; font-size: 0.92rem; letter-spacing: 0.09em; text-transform: uppercase; color: var(--hm-ink); } .hm-sop-card p { margin: 0; flex: 1 1 auto; font-size: 0.9rem; line-height: 1.6; color: var(--hm-muted); } /* Resto del indice. */ .hm-sop-rest { display: flex; flex-wrap: wrap; gap: 9px; margin-top: 18px; } .hm-sop-pill { display: inline-flex; align-items: center; gap: 9px; padding: 9px 16px; border-radius: 999px; border: 1px solid var(--hm-line); background: rgba(15, 23, 46, 0.55); font-size: 0.68rem; letter-spacing: 0.14em; text-transform: uppercase; color: var(--hm-muted); text-decoration: none !important; transition: color 0.2s ease, border-color 0.2s ease, background 0.2s ease; } .hm-sop-pill i { color: var(--hm-dim); transition: color 0.2s ease; } .hm-sop-pill:hover { color: var(--hm-ink); border-color: var(--hm-accent-line); background: rgba(96, 165, 250, 0.1); } .hm-sop-pill:hover i { color: var(--hm-accent); } .hm-sop-foot { display: flex; flex-wrap: wrap; align-items: center; gap: 14px; margin-top: 26px; } /* ══════════════════════════════════════════════════════════════════ GALERÍA ═ Aqui vivian una rejilla (.hm-gal-*) y un visor (.hm-viewer-*) propios. Se retiran: la portada monta ahora LOS DE /media —las mismas clases .gal-*, el mismo componente y el mismo gallery.js—, porque abrir la misma foto desde la portada y desde la galeria daba dos resultados distintos. Lo unico propio de la portada es que su rejilla lleva `is-home` (ocho piezas, cuatro columnas), y eso vive en gallery.css junto al resto. */ /* ══════════════════════════════════════════════════════════════ ÚLTIMOS VÍDEOS ═ Tarjetas con la miniatura de YouTube, mismo lenguaje visual que .hm-stat / .hm-event (panel en degradado, filete superior, sombra larga): no es una pieza aparte, es la familia de tarjetas de siempre con una miniatura de vídeo dentro. El rojo de YouTube se usa SOLO en el botón de play y el nombre del canal —el mismo criterio que el botón de Discord (.hm-btn.is-discord): la marca ajena se cita en su color, la página sigue en azul. */ .hm-videos { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 280px), 1fr)); gap: 18px; } .hm-video { display: flex; flex-direction: column; overflow: hidden; border-radius: 16px; border: 1px solid var(--hm-line); background: var(--hm-panel); box-shadow: var(--hm-shadow); text-decoration: none !important; color: inherit; transition: transform 0.25s ease, border-color 0.25s ease, box-shadow 0.25s ease; } .hm-video:hover, .hm-video:focus-visible { transform: translateY(-5px); border-color: rgba(255, 51, 51, 0.45); box-shadow: 0 30px 60px -22px rgba(255, 51, 51, 0.35), var(--hm-shadow); } .hm-video-thumb { position: relative; display: block; aspect-ratio: 16 / 9; overflow: hidden; background: #0b1120; } .hm-video-thumb img { width: 100%; height: 100%; object-fit: cover; transition: transform 0.5s ease; } .hm-video:hover .hm-video-thumb img, .hm-video:focus-visible .hm-video-thumb img { transform: scale(1.06); } /* Velo leve para que el circulo de play se lea igual sobre cualquier miniatura, clara u oscura. */ .hm-video-thumb::after { content: ''; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(6, 10, 22, 0) 55%, rgba(6, 10, 22, 0.55)); pointer-events: none; } .hm-video-play { position: absolute; z-index: 1; inset: 0; display: flex; align-items: center; justify-content: center; } .hm-video-play i { display: flex; align-items: center; justify-content: center; width: 54px; height: 54px; padding-left: 4px; border-radius: 50%; background: rgba(15, 10, 12, 0.55); border: 1px solid rgba(255, 255, 255, 0.35); backdrop-filter: blur(3px); -webkit-backdrop-filter: blur(3px); color: #fff; font-size: 1.05rem; transition: background 0.25s ease, transform 0.25s ease, border-color 0.25s ease; } .hm-video:hover .hm-video-play i, .hm-video:focus-visible .hm-video-play i { background: #ff0033; border-color: #ff0033; transform: scale(1.08); } .hm-video-body { display: flex; flex-direction: column; gap: 12px; padding: 16px 18px 18px; } .hm-video-title { font-size: 0.92rem; line-height: 1.4; font-weight: 500; color: var(--hm-ink); display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; } .hm-video-meta { display: flex; align-items: center; justify-content: space-between; gap: 10px; font-size: 0.62rem; letter-spacing: 0.08em; text-transform: uppercase; color: var(--hm-muted); } .hm-video-channel { display: flex; align-items: center; gap: 7px; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .hm-video-channel i { flex: none; color: #ff0033; } .hm-video-date { flex: none; font-variant-numeric: tabular-nums; } /* ═══════════════════════════════════════════════════════════════════ EVENTOS ═ */ .hm-events { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 330px), 1fr)); gap: 16px; } .hm-event { display: flex; flex-direction: column; overflow: hidden; border-radius: 18px; border: 1px solid var(--hm-line); background: var(--hm-panel); box-shadow: var(--hm-shadow); } .hm-event-banner { display: grid; place-items: center; padding: 28px 20px; background: radial-gradient(ellipse 70% 100% at 50% 100%, rgba(96, 165, 250, 0.16), transparent 70%), rgba(8, 13, 28, 0.55); border-bottom: 1px solid var(--hm-line); } .hm-event-banner img { max-height: 96px; width: auto; max-width: 100%; object-fit: contain; filter: drop-shadow(0 6px 16px rgba(0, 0, 0, 0.6)); } .hm-event-body { padding: 20px 22px 22px; } /* Con un solo evento en el palmarés —que es lo que hay hoy—, la tarjeta vertical se estiraba a lo ancho de la página y quedaba un banner de 1180 px con cuatro líneas debajo. Sola se pone en horizontal y ocupa la fila entera como es debido; en cuanto haya dos vuelven las dos columnas de tarjetas normales. */ .hm-event:only-child { grid-column: 1 / -1; flex-direction: row; align-items: stretch; } .hm-event:only-child .hm-event-banner { flex: 0 0 clamp(190px, 27%, 320px); border-bottom: 0; border-right: 1px solid var(--hm-line); } .hm-event:only-child .hm-event-body { flex: 1 1 auto; display: flex; flex-direction: column; justify-content: center; padding: 26px 30px; } .hm-event-top { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; margin-bottom: 12px; font-size: 0.64rem; letter-spacing: 0.18em; text-transform: uppercase; color: var(--hm-muted); } .hm-event-country { display: inline-flex; align-items: center; gap: 9px; } .hm-event-flag { display: block; width: 22px; height: 15px; border-radius: 3px; overflow: hidden; border: 1px solid rgba(255, 255, 255, 0.16); } .hm-event-flag svg { display: block; width: 100%; height: 100%; } .hm-event-date { display: inline-flex; align-items: center; gap: 8px; color: var(--hm-soon); } .hm-event h3 { margin: 0 0 10px; font-family: 'Horizon', sans-serif; font-size: 0.95rem; letter-spacing: 0.07em; text-transform: uppercase; color: var(--hm-ink); } .hm-event p { margin: 0; font-size: 0.9rem; line-height: 1.62; color: var(--hm-muted); } /* ═════════════════════════════════════════════════════════════════════ FAQ ══ Pregunta a la izquierda, respuesta a la derecha. Se ve TODO: es informacion que se busca, no algo que esconder tras un acordeon. Eran filas separadas por un filete y quedaban planas, todas iguales y sin jerarquia. Ahora cada una es un panel con su filete de acento a la izquierda —el mismo recurso que las tarjetas de unidad de squadrons.css— y remata, cuando toca, con el BOTON que lleva a la seccion del SOP donde esta contada entera. La respuesta de aqui es la corta a proposito; el boton es la puerta a la larga, y por eso tiene que verse como un boton y no como una nota al pie. */ .hm-faq { display: grid; gap: 12px; } .hm-faq-item { display: grid; grid-template-columns: 0.82fr 1.18fr; gap: clamp(18px, 3.6vw, 44px); padding: 24px clamp(20px, 3vw, 30px); border-radius: 16px; border: 1px solid var(--hm-line); background: var(--hm-panel); /* Filete de acento a la izquierda con `box-shadow: inset` y no con `border-left`: el borde lo recorta el radio en diagonal y se ve una cuña fea en las esquinas. */ box-shadow: inset 3px 0 0 var(--hm-accent-line); transition: border-color 0.22s ease, box-shadow 0.22s ease; } .hm-faq-item:hover { border-color: var(--hm-accent-line); box-shadow: inset 3px 0 0 var(--hm-accent); } .hm-faq-q { margin: 0; font-family: 'Horizon', sans-serif; /* Un punto mas grande que antes: es el titulo de la fila y competia de tu a tu con el cuerpo de la respuesta. */ font-size: 0.95rem; line-height: 1.5; letter-spacing: 0.04em; color: var(--hm-ink); text-wrap: balance; } .hm-faq-a { min-width: 0; } .hm-faq-a p { margin: 0; font-size: 0.97rem; line-height: 1.72; color: var(--hm-body); } .hm-faq-a p strong { color: var(--hm-ink); font-weight: 600; } .hm-faq-more { margin-top: 16px; } /* Aquí vivían .hm-mods/.hm-mod: los dos módulos del escuadrón pintados como distintivos con su icono, uno en el aviso de "cómo se entra" y otro encima de la respuesta del FAQ. Se retiran por decisión del mando: los nombres van ahora dentro del propio texto, que además es lo que se lleva el FAQPage de datos estructurados. */ /* ═══════════════════════════════════════════════════════════ LLAMADA FINAL ══ */ .hm-cta { position: relative; overflow: hidden; isolation: isolate; margin-top: 30px; border-top: 1px solid var(--hm-line); background: radial-gradient(ellipse 60% 120% at 50% 120%, rgba(96, 165, 250, 0.22), transparent 70%), linear-gradient(180deg, rgba(15, 23, 46, 0.4), rgba(10, 16, 34, 0.85)); } .hm-cta-grid { position: absolute; inset: 0; background-image: linear-gradient(rgba(255, 255, 255, 0.035) 1px, transparent 1px), linear-gradient(90deg, rgba(255, 255, 255, 0.035) 1px, transparent 1px); background-size: 64px 64px; -webkit-mask-image: radial-gradient(ellipse 70% 90% at 50% 100%, rgba(0, 0, 0, 0.9), transparent 72%); mask-image: radial-gradient(ellipse 70% 90% at 50% 100%, rgba(0, 0, 0, 0.9), transparent 72%); pointer-events: none; } .hm-cta-inner { position: relative; z-index: 2; display: flex; align-items: center; justify-content: center; gap: clamp(24px, 5vw, 60px); padding: 68px 0 76px; } .hm-cta-mascot { flex: none; width: clamp(140px, 20vw, 230px); height: auto; filter: drop-shadow(0 20px 40px rgba(0, 0, 0, 0.65)); } /* `flex: 1` para que el texto ocupe lo que queda tras la mascota en vez de encogerse a su ancho natural: sin esto el párrafo quedaba en una columna estrecha con medio contenedor vacío al lado. */ .hm-cta-txt { flex: 1 1 auto; min-width: 0; } .hm-cta-txt h2 { margin: 0 0 12px; font-family: 'krinkes decor', 'krinkes', cursive; font-size: clamp(1.7rem, 4.6vw, 2.9rem); line-height: 1.1; letter-spacing: 0.5px; color: var(--hm-ink); text-wrap: balance; } /* A todo el ancho de su columna: el `max-width: 46ch` que había aquí cortaba la frase a media caja y dejaba un hueco a la derecha, igual que pasaba en la entradilla de El manual. */ .hm-cta-txt p { margin: 0 0 24px; font-size: 1.02rem; line-height: 1.7; color: var(--hm-body); } .hm-cta-actions { display: flex; flex-wrap: wrap; gap: 13px; } /* ═══════════════════════════════════════════════════════════════ RESPONSIVE ═ */ @media (max-width: 900px) { .hm-about { grid-template-columns: 1fr; } .hm-emblem { max-width: 220px; } .hm-faq-item { grid-template-columns: 1fr; gap: 12px; } } @media (max-width: 720px) { .hm-hero-inner { padding: 128px 0 104px; } .hm-hero-plate { padding: 30px 14px 28px; } .hm-section { padding: 58px 0; } .hm-head { flex-wrap: wrap; gap: 12px; } .hm-head h2 { white-space: normal; } /* El filete no aporta nada cuando el titulo ya ocupa la linea entera. */ .hm-head .hm-rule { display: none; } .hm-stats { margin-top: -32px; grid-template-columns: repeat(2, 1fr); } /* Aquí las cifras solo suben 32 px, así que el indicador puede bajar. */ .hm-scroll { bottom: 46px; } .hm-next { flex-wrap: wrap; justify-content: center; border-radius: 20px; padding: 14px 18px; } .hm-next-title { max-width: 100%; white-space: normal; } .hm-cta-inner { flex-direction: column; text-align: center; padding: 52px 0 58px; } .hm-cta-actions { justify-content: center; } .hm-callout { flex-direction: column; align-items: flex-start; } /* En vertical no hay sitio para banner y texto uno al lado del otro. */ .hm-event:only-child { flex-direction: column; } .hm-event:only-child .hm-event-banner { flex: none; border-right: 0; border-bottom: 1px solid var(--hm-line); } .hm-event:only-child .hm-event-body { padding: 20px 22px 22px; } } /* Quien pide menos movimiento no ve ni el pase de imagenes, ni el latido del punto, ni las apariciones al hacer scroll. (El acercamiento del hero ya no existe para nadie: se retiro por rendimiento, ver .hm-hero-slide img.) */ @media (prefers-reduced-motion: reduce) { .hm-hero-slide, .hm-next-dot, .hm-scroll i, .hm-reveal { animation: none !important; transition: none !important; } .hm-reveal { opacity: 1; transform: none; } }