fanfuso/IDE-Demo-B
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

rf index

Browse Source
This commit is contained in:
fanfuso
2026-10-18 01:08:29 -03:00
parent 449a0ff43b
commit 03e9ee401b
6 changed files with 120 additions and 28 deletions
Download Patch File Download Diff File Expand all files Collapse all files
css/index.css
+8
View File
@@ -21,6 +21,14 @@
--eco-tab-duration: 250ms;
}
/* ---------- HERO ---------- */
.hero-title {
margin-bottom: 1rem;
line-height: 1;
color: #ffffff;
font-size: clamp(2.5rem, 8vw, 6.5rem);
}
css/styles.css
+74 -3
View File
@@ -47,7 +47,6 @@
--bg-body: #F8FAFB;
--bg-surface: #FFFFFF;
--bg-surface-elevated: #FFFFFF;
--bg-subtle: #EDF3F5;
--bg-card: #FFFFFF;
--bg-card-alt: #f8faff;
--ripple-color:#dbdfe2;
@@ -204,7 +203,7 @@ h1 {
font-size: 1.2rem;
text-transform: uppercase;
letter-spacing: 0.1em;
color: #4caf7a;
color: var(--ide-accent);
margin-bottom: 0.75rem;
}
.eyebrow-a {
@@ -669,6 +668,11 @@ p, li, .lead-text, .text-body, .text-muted {
[data-theme="dark"] .theme-icon-sun { display: block; }
[data-theme="dark"] .theme-icon-moon { display: none; }
/* Logos según tema (evita que se muestren ambos antes de ejecutar JS) */
.logo-dark-only { display: none; }
[data-theme="dark"] .logo-light-only { display: none; }
[data-theme="dark"] .logo-dark-only { display: block; }
/* --- Botón Hamburguesa Móvil --- */
.mobile-toggle-btn {
display: none;
@@ -774,6 +778,38 @@ p, li, .lead-text, .text-body, .text-muted {
font-weight: 600;
text-transform: uppercase;
}
/* Submenús dentro del menú móvil */
.mobile-submenu {
list-style: none;
display: flex;
flex-direction: column;
gap: 0.7rem;
margin: 0.7rem 0 0 0.25rem;
padding-left: 0.9rem;
border-left: 2px solid var(--border-color);
}
.mobile-submenu .nav-link {
font-size: 0.98rem;
font-weight: 500;
color: var(--text-muted);
}
/* --- Colapso de la navegación de escritorio --- */
@media (max-width: 1080px) {
.nav-links {
display: none;
}
.nav-actions .btn-cta-unificado {
display: none;
}
.mobile-toggle-btn {
display: flex;
}
}
/*====================================*/
/* Estilos para efecto en Hero */
/*====================================*/
@@ -1342,6 +1378,25 @@ p, li, .lead-text, .text-body, .text-muted {
gap: 0.7rem;
}
/* Colapso progresivo del grid de 5 columnas */
@media (max-width: 1100px) {
.grid-5 {
grid-template-columns: repeat(3, 1fr);
}
}
@media (max-width: 768px) {
.grid-5 {
grid-template-columns: repeat(2, 1fr);
}
}
@media (max-width: 520px) {
.grid-5 {
grid-template-columns: 1fr;
}
}
/* --- 8. Hero: La Doble Entrada (Home) --- */
.hero-grid {
@@ -1899,7 +1954,7 @@ p, li, .lead-text, .text-body, .text-muted {
position: fixed;
top: 0;
left: 0;
width: 100vw;
width: 100%;
height: 100vh;
background-color: rgba(10, 24, 32, 0.75);
backdrop-filter: blur(6px);
@@ -4289,6 +4344,22 @@ canvas {
}
}
/* ==========================================================================
ESCALA EN PANTALLAS GRANDES
Compensa monitores 1440p/4K a 100% (donde los rem base se ven pequeños)
========================================================================== */
@media (min-width: 1600px) {
html {
font-size: 17px;
}
}
@media (min-width: 1920px) {
html {
font-size: 18px;
}
}
includes/footer.html
+1 -1
View File
@@ -9,7 +9,7 @@
<!-- 1. Marca y Slogan -->
<div class="footer-brand">
<img src="assets/img/logo_verde.png" alt="IDE Consultores" class="footer-logo">
<img src="assets/img/logo_verde.webp" alt="IDE Consultores" class="footer-logo">
<p class="footer-slogan">
Convertimos la gestión en <br>una ventaja competitiva.
</p>
includes/header.html
+21 -10
View File
@@ -8,8 +8,8 @@
<!-- Logotipo Institucional -->
<a href="index.html" class="brand-logo-wrap" aria-label="IDE Consultores - Inicio">
<img src="assets/img/logo-on-light.png" alt="IDE Consultores" class="brand-logo-img logo-light-only">
<img src="assets/img/logo-on-dark.png" alt="IDE Consultores" class="brand-logo-img logo-dark-only">
<img src="assets/img/logo-on-light.webp" alt="IDE Consultores" class="brand-logo-img logo-light-only">
<img src="assets/img/logo-on-dark.webp" alt="IDE Consultores" class="brand-logo-img logo-dark-only">
</a>
<!-- Enlaces de Navegación de Escritorio -->
@@ -98,11 +98,11 @@
<div id="mobile-menu-overlay" class="mobile-menu-overlay"></div>
<!-- Drawer lateral -->
<div id="mobile-menu-drawer" class="mobile-menu-drawer" aria-hidden="true">
<div id="mobile-menu-drawer" class="mobile-menu-drawer" inert>
<div class="drawer-header">
<img src="assets/img/logo-on-light.png" alt="IDE Consultores" class="brand-logo-img logo-light-only" style="height:32px;">
<img src="assets/img/logo-on-dark.png" alt="IDE Consultores" class="brand-logo-img logo-dark-only" style="height:32px;">
<img src="assets/img/logo-on-light.webp" alt="IDE Consultores" class="brand-logo-img logo-light-only" style="height:32px;">
<img src="assets/img/logo-on-dark.webp" alt="IDE Consultores" class="brand-logo-img logo-dark-only" style="height:32px;">
<button id="drawer-close-btn" class="drawer-close-btn" aria-label="Cerrar menú">
<svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5" stroke-linecap="round">
<line x1="18" y1="6" x2="6" y2="18"></line>
@@ -113,13 +113,24 @@
<ul class="mobile-nav-links">
<li><a href="index.html" class="nav-link">Inicio</a></li>
<li><a href="desafios.html" class="nav-link">Desafíos</a></li>
<li><a href="desafios.html" class="nav-link">Punto de Partida</a></li>
<li><a href="soluciones.html" class="nav-link">Soluciones</a></li>
<li><a href="ecosistema.html" class="nav-link">Ecosistema</a></li>
<li><a href="ide-academy.html" class="nav-link">IDE Academy</a></li>
<li>
<a href="ecosistema.html" class="nav-link">Ecosistema</a>
<ul class="mobile-submenu">
<li><a href="ecosistema.html#eco-excellence" class="nav-link">Excellence</a></li>
<li><a href="ecosistema.html#eco-projects" class="nav-link">Projects</a></li>
<li><a href="ecosistema.html#eco-digital" class="nav-link">Digital</a></li>
<li><a href="ide-academy.html" class="nav-link">Academy</a></li>
</ul>
</li>
<li>
<a href="somos-ide.html" class="nav-link">Somos IDE</a>
<ul class="mobile-submenu">
<li><a href="trabaja-con-nosotros.html" class="nav-link">Trabaja con nosotros</a></li>
</ul>
</li>
<li><a href="insights.html" class="nav-link">Insights</a></li>
<li><a href="somos-ide.html" class="nav-link">Somos IDE</a></li>
<li><a href="trabaja-con-nosotros.html" class="nav-link">Trabaja con nosotros</a></li>
<li><a href="buscar.html" class="nav-link">Buscar en el sitio</a></li>
<li><a href="contacto.html" class="nav-link" style="color: var(--ide-accent);">Contacto Comercial</a></li>
</ul>
index.html
+1 -1
View File
@@ -37,7 +37,7 @@
<div>
<span class="eyebrow" style="text-transform: uppercase;">¿Qué pasa cuando dejamos de mirar los problemas por
separado?</span>
<h1 style="margin-bottom: 1rem; font-size: 6.5rem; line-height: 1; color: white;">
<h1 class="hero-title">
Conectamos <br> el todo
</h1>
<p class="lead-text" style="margin-bottom: 2.5rem;color:white">
js/main.js
+15 -13
View File
@@ -32,6 +32,13 @@ async function loadIncludes() {
const headerRes = await fetch('./includes/header.html', { cache: 'no-store' });
if (headerRes.ok) {
headerElem.innerHTML = await headerRes.text();
// Mover drawer y overlay fuera del header: #site-header usa
// backdrop-filter, que crea un "containing block" para position:fixed
// y rompía el dimensionado del drawer.
['mobile-menu-overlay', 'mobile-menu-drawer'].forEach(id => {
const el = document.getElementById(id);
if (el) document.body.appendChild(el);
});
highlightActiveNavLink();
attachHeaderEvents();
} else {
@@ -108,7 +115,7 @@ function attachHeaderEvents() {
function openDrawer() {
if (!drawer) return;
drawer.classList.add('is-open');
drawer.setAttribute('aria-hidden', 'false');
drawer.inert = false;
if (overlay) overlay.classList.add('is-open');
document.body.style.overflow = 'hidden'; // evita scroll del fondo
const btn = document.getElementById('mobile-menu-btn');
@@ -118,10 +125,12 @@ function attachHeaderEvents() {
function closeDrawer() {
if (!drawer) return;
drawer.classList.remove('is-open');
drawer.setAttribute('aria-hidden', 'true');
if (overlay) overlay.classList.remove('is-open');
document.body.style.overflow = '';
const btn = document.getElementById('mobile-menu-btn');
// Devolver el foco al botón antes de ocultar (evita el bloqueo de aria en foco)
if (btn && drawer.contains(document.activeElement)) btn.focus();
drawer.inert = true;
if (btn) btn.setAttribute('aria-expanded', 'false');
}
@@ -182,18 +191,11 @@ function updateThemeIcon(theme) {
}
function toggleLogoTheme(theme) {
const logoLight = document.querySelector('.logo-light-only');
const logoDark = document.querySelector('.logo-dark-only');
const logosLight = document.querySelectorAll('.logo-light-only');
const logosDark = document.querySelectorAll('.logo-dark-only');
if (logoLight && logoDark) {
if (theme === 'dark') {
logoLight.style.display = 'none';
logoDark.style.display = 'block';
} else {
logoLight.style.display = 'block';
logoDark.style.display = 'none';
}
}
logosLight.forEach(el => { el.style.display = theme === 'dark' ? 'none' : 'block'; });
logosDark.forEach(el => { el.style.display = theme === 'dark' ? 'block' : 'none'; });
}
/* ==========================================================================