preseleccion de sitio
This commit is contained in:
Binary file not shown.
|
After Width: | Height: | Size: 15 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 43 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 19 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 56 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 27 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 27 KiB |
@@ -0,0 +1,20 @@
|
||||
<svg xmlns="http://www.w3.org/2000/svg" width="180" height="180" viewBox="0 0 180 180">
|
||||
<g fill="none" stroke-linecap="round">
|
||||
<line x1="18" y1="28" x2="42" y2="12" stroke="#074F61" stroke-width="5"/>
|
||||
<line x1="96" y1="22" x2="118" y2="8" stroke="#18AB8D" stroke-width="4"/>
|
||||
<line x1="150" y1="40" x2="172" y2="26" stroke="#074F61" stroke-width="5"/>
|
||||
<line x1="8" y1="88" x2="30" y2="74" stroke="#18AB8D" stroke-width="4"/>
|
||||
<line x1="70" y1="96" x2="96" y2="80" stroke="#074F61" stroke-width="5"/>
|
||||
<line x1="128" y1="110" x2="150" y2="96" stroke="#18AB8D" stroke-width="4"/>
|
||||
<line x1="40" y1="150" x2="64" y2="134" stroke="#074F61" stroke-width="5"/>
|
||||
<line x1="108" y1="158" x2="132" y2="142" stroke="#18AB8D" stroke-width="4"/>
|
||||
</g>
|
||||
<g>
|
||||
<circle cx="58" cy="40" r="5" fill="#18AB8D"/>
|
||||
<circle cx="132" cy="52" r="4" fill="#A7A9AC"/>
|
||||
<circle cx="24" cy="118" r="3.5" fill="#A7A9AC"/>
|
||||
<circle cx="88" cy="128" r="5" fill="#18AB8D"/>
|
||||
<circle cx="160" cy="148" r="4" fill="#074F61"/>
|
||||
<circle cx="168" cy="78" r="3" fill="#18AB8D"/>
|
||||
</g>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 1.1 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 460 B |
Binary file not shown.
|
After Width: | Height: | Size: 4.5 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 3.6 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 4.1 KiB |
+307
-4
@@ -4,7 +4,7 @@
|
||||
<meta charset="UTF-8" />
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
||||
<title>IDE Consultores – Inicio</title>
|
||||
<link rel="stylesheet" href="styles.css" />
|
||||
<link rel="stylesheet" href="/styles/styles.css" />
|
||||
</head>
|
||||
<body>
|
||||
|
||||
@@ -33,6 +33,308 @@
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!-- CUESTIONARIO DE ORIENTACIÓN -->
|
||||
<!-- ============================================================
|
||||
BLOQUE QUIZ · también disponible en quiz-block.html
|
||||
Estilos y scripts están embebidos en ese archivo para revisión.
|
||||
En producción, mover CSS a styles.css y JS a scripts.js.
|
||||
============================================================ -->
|
||||
|
||||
<section class="quiz-section">
|
||||
<div class="container">
|
||||
|
||||
<div class="quiz-intro fade-in">
|
||||
<p class="eyebrow">Encontrá tu camino</p>
|
||||
<h2>¿Por dónde empezamos?</h2>
|
||||
<p>Cuatro preguntas para entender tu situación y orientarte hacia lo que realmente necesitás.</p>
|
||||
</div>
|
||||
|
||||
<div class="quiz-wrapper fade-in">
|
||||
|
||||
<!-- BARRA DE PROGRESO -->
|
||||
<div class="quiz-progress">
|
||||
<div class="quiz-progress__bar">
|
||||
<div class="quiz-progress__fill" id="quizProgressFill"></div>
|
||||
</div>
|
||||
<span class="quiz-progress__label" id="quizProgressLabel">Pregunta 1 de 4</span>
|
||||
</div>
|
||||
|
||||
<!-- PASO 1 -->
|
||||
<div class="quiz-step active" id="step-1">
|
||||
<p class="quiz-question">¿Qué describe mejor tu situación hoy?</p>
|
||||
<div class="quiz-options">
|
||||
<button class="quiz-opt" data-step="1" data-val="desafio">
|
||||
<span class="quiz-opt__icon">🔍</span>
|
||||
<span class="quiz-opt__body">
|
||||
<strong>Algo no está funcionando</strong>
|
||||
<span>Tengo un problema, pero no sé bien qué solución necesito.</span>
|
||||
</span>
|
||||
</button>
|
||||
<button class="quiz-opt" data-step="1" data-val="objetivo">
|
||||
<span class="quiz-opt__icon">🎯</span>
|
||||
<span class="quiz-opt__body">
|
||||
<strong>Sé qué quiero lograr</strong>
|
||||
<span>Tengo un objetivo claro, pero no sé cómo alcanzarlo.</span>
|
||||
</span>
|
||||
</button>
|
||||
<button class="quiz-opt" data-step="1" data-val="solucion">
|
||||
<span class="quiz-opt__icon">⚙️</span>
|
||||
<span class="quiz-opt__body">
|
||||
<strong>Sé exactamente qué necesito</strong>
|
||||
<span>Busco ISO, PMO, transformación digital u otra solución concreta.</span>
|
||||
</span>
|
||||
</button>
|
||||
<button class="quiz-opt" data-step="1" data-val="conocimiento">
|
||||
<span class="quiz-opt__icon">📚</span>
|
||||
<span class="quiz-opt__body">
|
||||
<strong>Quiero aprender o formarme</strong>
|
||||
<span>Busco formación, capacitación o conocimiento especializado.</span>
|
||||
</span>
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- PASO 2A · desafío -->
|
||||
<div class="quiz-step" id="step-2a">
|
||||
<p class="quiz-question">¿En qué área sentís que algo no funciona como debería?</p>
|
||||
<div class="quiz-options">
|
||||
<button class="quiz-opt" data-step="2a" data-val="gestion">
|
||||
<span class="quiz-opt__icon">📊</span>
|
||||
<span class="quiz-opt__body">
|
||||
<strong>Gestión y procesos</strong>
|
||||
<span>Los procesos no son eficientes o no están claros.</span>
|
||||
</span>
|
||||
</button>
|
||||
<button class="quiz-opt" data-step="2a" data-val="proyectos">
|
||||
<span class="quiz-opt__icon">📌</span>
|
||||
<span class="quiz-opt__body">
|
||||
<strong>Proyectos y resultados</strong>
|
||||
<span>Los proyectos no llegan a destino o se desvían.</span>
|
||||
</span>
|
||||
</button>
|
||||
<button class="quiz-opt" data-step="2a" data-val="personas">
|
||||
<span class="quiz-opt__icon">👥</span>
|
||||
<span class="quiz-opt__body">
|
||||
<strong>Personas y capacidades</strong>
|
||||
<span>El equipo necesita desarrollar nuevas habilidades.</span>
|
||||
</span>
|
||||
</button>
|
||||
<button class="quiz-opt" data-step="2a" data-val="tecnologia">
|
||||
<span class="quiz-opt__icon">🤖</span>
|
||||
<span class="quiz-opt__body">
|
||||
<strong>Tecnología e innovación</strong>
|
||||
<span>La organización necesita digitalizarse o incorporar IA.</span>
|
||||
</span>
|
||||
</button>
|
||||
<button class="quiz-opt" data-step="2a" data-val="nosabe">
|
||||
<span class="quiz-opt__icon">🌐</span>
|
||||
<span class="quiz-opt__body">
|
||||
<strong>No sé bien dónde está el problema</strong>
|
||||
<span>Algo no funciona, pero es difícil de identificar.</span>
|
||||
</span>
|
||||
</button>
|
||||
</div>
|
||||
<button class="quiz-back" onclick="goBack()">← Volver</button>
|
||||
</div>
|
||||
|
||||
<!-- PASO 2B · objetivo -->
|
||||
<div class="quiz-step" id="step-2b">
|
||||
<p class="quiz-question">¿Qué querés lograr?</p>
|
||||
<div class="quiz-options">
|
||||
<button class="quiz-opt" data-step="2b" data-val="mejorar-gestion">
|
||||
<span class="quiz-opt__icon">📈</span>
|
||||
<span class="quiz-opt__body">
|
||||
<strong>Mejorar la gestión y los procesos</strong>
|
||||
<span>Ordenar, optimizar y hacer más eficiente la operación.</span>
|
||||
</span>
|
||||
</button>
|
||||
<button class="quiz-opt" data-step="2b" data-val="profesionalizar-proyectos">
|
||||
<span class="quiz-opt__icon">🏗️</span>
|
||||
<span class="quiz-opt__body">
|
||||
<strong>Profesionalizar la gestión de proyectos</strong>
|
||||
<span>Que los proyectos se entreguen en tiempo y con los resultados esperados.</span>
|
||||
</span>
|
||||
</button>
|
||||
<button class="quiz-opt" data-step="2b" data-val="desarrollar-equipo">
|
||||
<span class="quiz-opt__icon">🌱</span>
|
||||
<span class="quiz-opt__body">
|
||||
<strong>Desarrollar las capacidades del equipo</strong>
|
||||
<span>Que las personas estén preparadas para los desafíos que vienen.</span>
|
||||
</span>
|
||||
</button>
|
||||
<button class="quiz-opt" data-step="2b" data-val="transformar-digital">
|
||||
<span class="quiz-opt__icon">⚡</span>
|
||||
<span class="quiz-opt__body">
|
||||
<strong>Transformar digitalmente la organización</strong>
|
||||
<span>Integrar tecnología e IA de manera estratégica y sostenible.</span>
|
||||
</span>
|
||||
</button>
|
||||
</div>
|
||||
<button class="quiz-back" onclick="goBack()">← Volver</button>
|
||||
</div>
|
||||
|
||||
<!-- PASO 2C · solución concreta -->
|
||||
<div class="quiz-step" id="step-2c">
|
||||
<p class="quiz-question">¿Qué solución estás buscando?</p>
|
||||
<div class="quiz-options">
|
||||
<button class="quiz-opt" data-step="2c" data-val="iso">
|
||||
<span class="quiz-opt__icon">✅</span>
|
||||
<span class="quiz-opt__body">
|
||||
<strong>ISO o sistema de gestión</strong>
|
||||
<span>ISO 9001, 14001, 45001 u otra norma de gestión.</span>
|
||||
</span>
|
||||
</button>
|
||||
<button class="quiz-opt" data-step="2c" data-val="pmo">
|
||||
<span class="quiz-opt__icon">📐</span>
|
||||
<span class="quiz-opt__body">
|
||||
<strong>PMO o gestión de proyectos</strong>
|
||||
<span>Implementar una oficina de proyectos o mejorar su gestión.</span>
|
||||
</span>
|
||||
</button>
|
||||
<button class="quiz-opt" data-step="2c" data-val="formacion">
|
||||
<span class="quiz-opt__icon">🎓</span>
|
||||
<span class="quiz-opt__body">
|
||||
<strong>Formación para mi organización</strong>
|
||||
<span>Capacitación in company o programas de desarrollo.</span>
|
||||
</span>
|
||||
</button>
|
||||
<button class="quiz-opt" data-step="2c" data-val="ia-digital">
|
||||
<span class="quiz-opt__icon">🤖</span>
|
||||
<span class="quiz-opt__body">
|
||||
<strong>Transformación digital e IA</strong>
|
||||
<span>Digitalización de procesos, automatización o IA aplicada.</span>
|
||||
</span>
|
||||
</button>
|
||||
</div>
|
||||
<button class="quiz-back" onclick="goBack()">← Volver</button>
|
||||
</div>
|
||||
|
||||
<!-- PASO 2D · conocimiento -->
|
||||
<div class="quiz-step" id="step-2d">
|
||||
<p class="quiz-question">¿Qué tipo de formación o conocimiento buscás?</p>
|
||||
<div class="quiz-options">
|
||||
<button class="quiz-opt" data-step="2d" data-val="iso-form">
|
||||
<span class="quiz-opt__icon">📋</span>
|
||||
<span class="quiz-opt__body">
|
||||
<strong>Normas ISO y sistemas de gestión</strong>
|
||||
<span>Auditoría interna, implementación de normas, mejora continua.</span>
|
||||
</span>
|
||||
</button>
|
||||
<button class="quiz-opt" data-step="2d" data-val="pm-form">
|
||||
<span class="quiz-opt__icon">📌</span>
|
||||
<span class="quiz-opt__body">
|
||||
<strong>Gestión de proyectos</strong>
|
||||
<span>Herramientas, metodologías, PMP, ágil, híbrido.</span>
|
||||
</span>
|
||||
</button>
|
||||
<button class="quiz-opt" data-step="2d" data-val="liderazgo-form">
|
||||
<span class="quiz-opt__icon">🧭</span>
|
||||
<span class="quiz-opt__body">
|
||||
<strong>Liderazgo y cambio organizacional</strong>
|
||||
<span>Desarrollo de líderes y gestión del cambio.</span>
|
||||
</span>
|
||||
</button>
|
||||
<button class="quiz-opt" data-step="2d" data-val="ia-form">
|
||||
<span class="quiz-opt__icon">🤖</span>
|
||||
<span class="quiz-opt__body">
|
||||
<strong>Inteligencia artificial y tecnología</strong>
|
||||
<span>IA aplicada, transformación digital para equipos no técnicos.</span>
|
||||
</span>
|
||||
</button>
|
||||
</div>
|
||||
<button class="quiz-back" onclick="goBack()">← Volver</button>
|
||||
</div>
|
||||
|
||||
<!-- PASO 3 · urgencia -->
|
||||
<div class="quiz-step" id="step-3">
|
||||
<p class="quiz-question">¿Cómo describirías el momento en que está tu organización?</p>
|
||||
<div class="quiz-options quiz-options--2col">
|
||||
<button class="quiz-opt quiz-opt--compact" data-step="3" data-val="explorando">
|
||||
<span class="quiz-opt__icon">🔭</span>
|
||||
<span class="quiz-opt__body">
|
||||
<strong>Estoy explorando</strong>
|
||||
<span>Todavía en etapa de análisis, sin decisiones tomadas.</span>
|
||||
</span>
|
||||
</button>
|
||||
<button class="quiz-opt quiz-opt--compact" data-step="3" data-val="evaluando">
|
||||
<span class="quiz-opt__icon">⚖️</span>
|
||||
<span class="quiz-opt__body">
|
||||
<strong>Estamos evaluando opciones</strong>
|
||||
<span>Comparando enfoques o proveedores antes de avanzar.</span>
|
||||
</span>
|
||||
</button>
|
||||
<button class="quiz-opt quiz-opt--compact" data-step="3" data-val="listo">
|
||||
<span class="quiz-opt__icon">🚀</span>
|
||||
<span class="quiz-opt__body">
|
||||
<strong>Queremos avanzar pronto</strong>
|
||||
<span>La decisión está tomada, necesitamos un socio para ejecutar.</span>
|
||||
</span>
|
||||
</button>
|
||||
<button class="quiz-opt quiz-opt--compact" data-step="3" data-val="requisito">
|
||||
<span class="quiz-opt__icon">📅</span>
|
||||
<span class="quiz-opt__body">
|
||||
<strong>Tenemos un requisito o plazo</strong>
|
||||
<span>Una certificación, licitación o cliente lo exige.</span>
|
||||
</span>
|
||||
</button>
|
||||
</div>
|
||||
<button class="quiz-back" onclick="goBack()">← Volver</button>
|
||||
</div>
|
||||
|
||||
<!-- PASO 4 · rol -->
|
||||
<div class="quiz-step" id="step-4">
|
||||
<p class="quiz-question">¿Cuál es tu rol en la organización?</p>
|
||||
<div class="quiz-options quiz-options--2col">
|
||||
<button class="quiz-opt quiz-opt--compact" data-step="4" data-val="direccion">
|
||||
<span class="quiz-opt__icon">🏢</span>
|
||||
<span class="quiz-opt__body">
|
||||
<strong>Dirección o Gerencia</strong>
|
||||
<span>CEO, director, gerente general.</span>
|
||||
</span>
|
||||
</button>
|
||||
<button class="quiz-opt quiz-opt--compact" data-step="4" data-val="responsable">
|
||||
<span class="quiz-opt__icon">📂</span>
|
||||
<span class="quiz-opt__body">
|
||||
<strong>Responsable de área</strong>
|
||||
<span>Jefe, coordinador, líder de proceso o proyecto.</span>
|
||||
</span>
|
||||
</button>
|
||||
<button class="quiz-opt quiz-opt--compact" data-step="4" data-val="rrhh">
|
||||
<span class="quiz-opt__icon">👥</span>
|
||||
<span class="quiz-opt__body">
|
||||
<strong>Recursos Humanos</strong>
|
||||
<span>Gestión de personas, formación y desarrollo.</span>
|
||||
</span>
|
||||
</button>
|
||||
<button class="quiz-opt quiz-opt--compact" data-step="4" data-val="otro">
|
||||
<span class="quiz-opt__icon">💼</span>
|
||||
<span class="quiz-opt__body">
|
||||
<strong>Otro rol</strong>
|
||||
<span>Consultor, proveedor, investigador, estudiante.</span>
|
||||
</span>
|
||||
</button>
|
||||
</div>
|
||||
<button class="quiz-back" onclick="goBack()">← Volver</button>
|
||||
</div>
|
||||
|
||||
<!-- RESULTADO -->
|
||||
<div class="quiz-step quiz-result" id="step-result">
|
||||
<div class="quiz-result__icon" id="resultIcon"></div>
|
||||
<p class="quiz-result__profile" id="resultProfile"></p>
|
||||
<h3 class="quiz-result__title" id="resultTitle"></h3>
|
||||
<p class="quiz-result__body" id="resultBody"></p>
|
||||
<div class="quiz-result__chips" id="resultChips"></div>
|
||||
<div class="quiz-result__actions">
|
||||
<a id="resultCTA" href="#" class="btn btn--primary">Ver contenido recomendado</a>
|
||||
<a href="contacto.html" class="btn btn--outline">Hablemos directamente</a>
|
||||
</div>
|
||||
<button class="quiz-restart" onclick="restartQuiz()">Volver a empezar</button>
|
||||
</div>
|
||||
|
||||
</div><!-- /.quiz-wrapper -->
|
||||
</div><!-- /.container -->
|
||||
</section>
|
||||
|
||||
<!-- LA TENSIÓN -->
|
||||
<section class="section section--surface">
|
||||
<div class="container">
|
||||
@@ -164,7 +466,8 @@
|
||||
|
||||
<div id="footer-slot"></div>
|
||||
|
||||
<script src="layout.js"></script>
|
||||
<script src="scripts.js"></script>
|
||||
<script src="scripts/layout.js"></script>
|
||||
<script src="scripts/scripts.js"></script>
|
||||
|
||||
</body>
|
||||
</html>
|
||||
</html>
|
||||
-178
@@ -1,178 +0,0 @@
|
||||
/* ============================================================
|
||||
IDE CONSULTORES – SCRIPTS GLOBALES
|
||||
============================================================ */
|
||||
|
||||
/* ── THEME TOGGLE ──────────────────────────────────────────── */
|
||||
(function () {
|
||||
const stored = localStorage.getItem('ide-theme') || 'light';
|
||||
document.documentElement.setAttribute('data-theme', stored);
|
||||
})();
|
||||
|
||||
function initThemeToggle() {
|
||||
const btn = document.querySelector('.theme-toggle');
|
||||
if (!btn) return;
|
||||
|
||||
function updateBtn() {
|
||||
const isDark = document.documentElement.getAttribute('data-theme') === 'dark';
|
||||
btn.textContent = isDark ? '☀ Claro' : '☾ Oscuro';
|
||||
}
|
||||
|
||||
updateBtn();
|
||||
|
||||
btn.addEventListener('click', () => {
|
||||
const current = document.documentElement.getAttribute('data-theme');
|
||||
const next = current === 'dark' ? 'light' : 'dark';
|
||||
document.documentElement.setAttribute('data-theme', next);
|
||||
localStorage.setItem('ide-theme', next);
|
||||
updateBtn();
|
||||
});
|
||||
}
|
||||
|
||||
/* ── HAMBURGER MENU ─────────────────────────────────────────── */
|
||||
function initHamburger() {
|
||||
const btn = document.querySelector('.hamburger');
|
||||
const menu = document.querySelector('.mobile-menu');
|
||||
if (!btn || !menu) return;
|
||||
|
||||
btn.addEventListener('click', () => {
|
||||
menu.classList.toggle('open');
|
||||
});
|
||||
|
||||
document.addEventListener('click', (e) => {
|
||||
if (!btn.contains(e.target) && !menu.contains(e.target)) {
|
||||
menu.classList.remove('open');
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
/* ── ACTIVE NAV LINK ─────────────────────────────────────────── */
|
||||
function initActiveNav() {
|
||||
const path = window.location.pathname.split('/').pop() || 'index.html';
|
||||
document.querySelectorAll('.navbar__links a, .mobile-menu a').forEach(a => {
|
||||
const href = a.getAttribute('href');
|
||||
if (href === path) a.classList.add('active');
|
||||
});
|
||||
}
|
||||
|
||||
/* ── SCROLL FADE-IN ─────────────────────────────────────────── */
|
||||
function initFadeIn() {
|
||||
const els = document.querySelectorAll('.fade-in');
|
||||
if (!els.length) return;
|
||||
|
||||
const obs = new IntersectionObserver((entries) => {
|
||||
entries.forEach(e => {
|
||||
if (e.isIntersecting) { e.target.classList.add('visible'); obs.unobserve(e.target); }
|
||||
});
|
||||
}, { threshold: 0.12 });
|
||||
|
||||
els.forEach(el => obs.observe(el));
|
||||
}
|
||||
|
||||
/* ── MODAL ────────────────────────────────────────────────────── */
|
||||
function openModal(id) {
|
||||
const overlay = document.getElementById(id);
|
||||
if (!overlay) return;
|
||||
overlay.classList.add('open');
|
||||
document.body.style.overflow = 'hidden';
|
||||
}
|
||||
|
||||
function closeModal(id) {
|
||||
const overlay = document.getElementById(id);
|
||||
if (!overlay) return;
|
||||
overlay.classList.remove('open');
|
||||
document.body.style.overflow = '';
|
||||
}
|
||||
|
||||
function initModals() {
|
||||
// Close on overlay click
|
||||
document.querySelectorAll('.modal-overlay').forEach(overlay => {
|
||||
overlay.addEventListener('click', (e) => {
|
||||
if (e.target === overlay) closeModal(overlay.id);
|
||||
});
|
||||
});
|
||||
// Close buttons
|
||||
document.querySelectorAll('.modal__close').forEach(btn => {
|
||||
btn.addEventListener('click', () => {
|
||||
const overlay = btn.closest('.modal-overlay');
|
||||
if (overlay) closeModal(overlay.id);
|
||||
});
|
||||
});
|
||||
// Escape key
|
||||
document.addEventListener('keydown', (e) => {
|
||||
if (e.key === 'Escape') {
|
||||
document.querySelectorAll('.modal-overlay.open').forEach(o => closeModal(o.id));
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
/* ── CONTACT FORM ─────────────────────────────────────────────── */
|
||||
function initContactForm() {
|
||||
const form = document.querySelector('.contact-form');
|
||||
if (!form) return;
|
||||
|
||||
form.addEventListener('submit', (e) => {
|
||||
e.preventDefault();
|
||||
const btn = form.querySelector('[type="submit"]');
|
||||
const original = btn.textContent;
|
||||
btn.textContent = '✓ ¡Enviado!';
|
||||
btn.disabled = true;
|
||||
btn.style.background = '#1E9A7F';
|
||||
setTimeout(() => {
|
||||
btn.textContent = original;
|
||||
btn.disabled = false;
|
||||
btn.style.background = '';
|
||||
form.reset();
|
||||
}, 3000);
|
||||
});
|
||||
}
|
||||
|
||||
/* ── ACCORDION / DESAFÍOS ─────────────────────────────────────── */
|
||||
function initAccordion() {
|
||||
document.querySelectorAll('.accordion-trigger').forEach(trigger => {
|
||||
trigger.addEventListener('click', () => {
|
||||
const panel = trigger.nextElementSibling;
|
||||
const isOpen = panel.classList.contains('open');
|
||||
|
||||
// Close all
|
||||
document.querySelectorAll('.accordion-panel').forEach(p => p.classList.remove('open'));
|
||||
document.querySelectorAll('.accordion-trigger').forEach(t => t.classList.remove('open'));
|
||||
|
||||
if (!isOpen) {
|
||||
panel.classList.add('open');
|
||||
trigger.classList.add('open');
|
||||
}
|
||||
});
|
||||
});
|
||||
}
|
||||
|
||||
/* ── FILTER TABS ──────────────────────────────────────────────── */
|
||||
function initFilterTabs() {
|
||||
document.querySelectorAll('.filter-tab').forEach(tab => {
|
||||
tab.addEventListener('click', () => {
|
||||
const group = tab.closest('.filter-tabs');
|
||||
group.querySelectorAll('.filter-tab').forEach(t => t.classList.remove('active'));
|
||||
tab.classList.add('active');
|
||||
|
||||
const filter = tab.dataset.filter;
|
||||
document.querySelectorAll('.filterable').forEach(item => {
|
||||
if (filter === 'all' || item.dataset.cat === filter) {
|
||||
item.style.display = '';
|
||||
} else {
|
||||
item.style.display = 'none';
|
||||
}
|
||||
});
|
||||
});
|
||||
});
|
||||
}
|
||||
|
||||
/* ── INIT ─────────────────────────────────────────────────────── */
|
||||
document.addEventListener('DOMContentLoaded', () => {
|
||||
initThemeToggle();
|
||||
initHamburger();
|
||||
initActiveNav();
|
||||
initFadeIn();
|
||||
initModals();
|
||||
initContactForm();
|
||||
initAccordion();
|
||||
initFilterTabs();
|
||||
});
|
||||
@@ -0,0 +1,338 @@
|
||||
/* ============================================================
|
||||
IDE CONSULTORES – SCRIPTS GLOBALES
|
||||
============================================================ */
|
||||
|
||||
/* ── THEME TOGGLE ──────────────────────────────────────────── */
|
||||
(function () {
|
||||
const stored = localStorage.getItem('ide-theme') || 'light';
|
||||
document.documentElement.setAttribute('data-theme', stored);
|
||||
})();
|
||||
|
||||
function initThemeToggle() {
|
||||
const btn = document.querySelector('.theme-toggle');
|
||||
if (!btn) return;
|
||||
|
||||
function updateBtn() {
|
||||
const isDark = document.documentElement.getAttribute('data-theme') === 'dark';
|
||||
btn.textContent = isDark ? '☀ Claro' : '☾ Oscuro';
|
||||
}
|
||||
|
||||
updateBtn();
|
||||
|
||||
btn.addEventListener('click', () => {
|
||||
const current = document.documentElement.getAttribute('data-theme');
|
||||
const next = current === 'dark' ? 'light' : 'dark';
|
||||
document.documentElement.setAttribute('data-theme', next);
|
||||
localStorage.setItem('ide-theme', next);
|
||||
updateBtn();
|
||||
});
|
||||
}
|
||||
|
||||
/* ── HAMBURGER MENU ─────────────────────────────────────────── */
|
||||
function initHamburger() {
|
||||
const btn = document.querySelector('.hamburger');
|
||||
const menu = document.querySelector('.mobile-menu');
|
||||
if (!btn || !menu) return;
|
||||
|
||||
btn.addEventListener('click', () => {
|
||||
menu.classList.toggle('open');
|
||||
});
|
||||
|
||||
document.addEventListener('click', (e) => {
|
||||
if (!btn.contains(e.target) && !menu.contains(e.target)) {
|
||||
menu.classList.remove('open');
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
/* ── ACTIVE NAV LINK ─────────────────────────────────────────── */
|
||||
function initActiveNav() {
|
||||
const path = window.location.pathname.split('/').pop() || 'index.html';
|
||||
document.querySelectorAll('.navbar__links a, .mobile-menu a').forEach(a => {
|
||||
const href = a.getAttribute('href');
|
||||
if (href === path) a.classList.add('active');
|
||||
});
|
||||
}
|
||||
|
||||
/* ── SCROLL FADE-IN ─────────────────────────────────────────── */
|
||||
function initFadeIn() {
|
||||
const els = document.querySelectorAll('.fade-in');
|
||||
if (!els.length) return;
|
||||
|
||||
const obs = new IntersectionObserver((entries) => {
|
||||
entries.forEach(e => {
|
||||
if (e.isIntersecting) { e.target.classList.add('visible'); obs.unobserve(e.target); }
|
||||
});
|
||||
}, { threshold: 0.12 });
|
||||
|
||||
els.forEach(el => obs.observe(el));
|
||||
}
|
||||
|
||||
/* ── MODAL ────────────────────────────────────────────────────── */
|
||||
function openModal(id) {
|
||||
const overlay = document.getElementById(id);
|
||||
if (!overlay) return;
|
||||
overlay.classList.add('open');
|
||||
document.body.style.overflow = 'hidden';
|
||||
}
|
||||
|
||||
function closeModal(id) {
|
||||
const overlay = document.getElementById(id);
|
||||
if (!overlay) return;
|
||||
overlay.classList.remove('open');
|
||||
document.body.style.overflow = '';
|
||||
}
|
||||
|
||||
function initModals() {
|
||||
// Close on overlay click
|
||||
document.querySelectorAll('.modal-overlay').forEach(overlay => {
|
||||
overlay.addEventListener('click', (e) => {
|
||||
if (e.target === overlay) closeModal(overlay.id);
|
||||
});
|
||||
});
|
||||
// Close buttons
|
||||
document.querySelectorAll('.modal__close').forEach(btn => {
|
||||
btn.addEventListener('click', () => {
|
||||
const overlay = btn.closest('.modal-overlay');
|
||||
if (overlay) closeModal(overlay.id);
|
||||
});
|
||||
});
|
||||
// Escape key
|
||||
document.addEventListener('keydown', (e) => {
|
||||
if (e.key === 'Escape') {
|
||||
document.querySelectorAll('.modal-overlay.open').forEach(o => closeModal(o.id));
|
||||
}
|
||||
});
|
||||
}
|
||||
/* ── QUIZ HOME ─────────────────────────────────────────────── */
|
||||
(function () {
|
||||
const FLOW = {
|
||||
1: { desafio:'2a', objetivo:'2b', solucion:'2c', conocimiento:'2d' },
|
||||
'2a': 3, '2b': 3, '2c': 3, '2d': 3,
|
||||
3: 4,
|
||||
4: 'result'
|
||||
};
|
||||
|
||||
function buildResult(answers) {
|
||||
const p1 = answers[1];
|
||||
const p2 = answers['2a'] || answers['2b'] || answers['2c'] || answers['2d'];
|
||||
const p3 = answers[3];
|
||||
|
||||
/* Perfil 4 · Requisito exigido */
|
||||
if (p3 === 'requisito' || p2 === 'iso' || p2 === 'iso-form') {
|
||||
return {
|
||||
icon:'📋', profile:'Perfil · Requisito o certificación',
|
||||
title:'La certificación puede ser el punto de partida.',
|
||||
body:'Comprendemos que tenés un requisito externo. En IDE no trabajamos para cumplir auditorías: trabajamos para que el sistema refleje cómo funciona tu organización y contribuya a gestionarla mejor.',
|
||||
chips:['IDE Excellence','ISO 9001 / 14001 / 45001','Sistemas de gestión'],
|
||||
cta:'Ver soluciones Excellence', url:'soluciones.html'
|
||||
};
|
||||
}
|
||||
|
||||
/* Perfil 5 · Conocimiento o formación */
|
||||
if (p1 === 'conocimiento') {
|
||||
const map = {
|
||||
'iso-form': { chips:['Auditoría interna','ISO 9001','Mejora continua'], extra:'IDE Excellence' },
|
||||
'pm-form': { chips:['Gestión de proyectos','Metodologías ágiles','PMP'], extra:'IDE Project' },
|
||||
'liderazgo-form':{ chips:['Liderazgo','Cambio organizacional','Cultura'], extra:'IDE Academy' },
|
||||
'ia-form': { chips:['IA aplicada','Transformación digital','Automatización'], extra:'IDE Digital' }
|
||||
};
|
||||
const m = map[p2] || { chips:['Formación','Desarrollo','Academy'], extra:'IDE Academy' };
|
||||
return {
|
||||
icon:'🎓', profile:'Perfil · Formación y conocimiento',
|
||||
title:'Desarrollamos las capacidades que hacen posible la transformación.',
|
||||
body:'IDE Academy diseña programas de formación alineados con los desafíos reales de las organizaciones. No dictamos cursos estándar: trabajamos desde el contexto de cada equipo.',
|
||||
chips:[...m.chips, m.extra], cta:'Conocer IDE Academy', url:'academy.html'
|
||||
};
|
||||
}
|
||||
|
||||
/* Perfil 3 · Sabe exactamente qué necesita */
|
||||
if (p1 === 'solucion') {
|
||||
const map = {
|
||||
iso: { title:'Respuesta concreta. Y algo más.', chips:['ISO 9001','ISO 14001','IDE Excellence'], cta:'Ver soluciones ISO', url:'soluciones.html', body:'Sí, implementamos y acompañamos certificaciones ISO. Y creemos que un sistema de gestión debe reflejar cómo funciona tu organización, no solo superar una auditoría.' },
|
||||
pmo: { title:'Proyectos que llegan a destino.', chips:['PMO','Gestión de proyectos','IDE Project'], cta:'Ver soluciones Project', url:'soluciones.html', body:'Diseñamos PMOs y acompañamos la dirección de proyectos para que se entreguen en tiempo, costo y con los resultados esperados.' },
|
||||
formacion: { title:'Formación desde el contexto real.', chips:['In Company','Capacitación','IDE Academy'], cta:'Ver IDE Academy', url:'academy.html', body:'Programas de formación diseñados para tu organización, sus desafíos y las capacidades que necesita desarrollar.' },
|
||||
'ia-digital':{ title:'Tecnología con propósito.', chips:['Transformación digital','IA aplicada','IDE Digital'], cta:'Ver soluciones Digital', url:'soluciones.html', body:'Te ayudamos a identificar dónde la IA y la digitalización generan valor real, y acompañamos su implementación de principio a fin.' }
|
||||
};
|
||||
const m = map[p2] || { title:'Encontramos lo que buscás.', chips:['Soluciones concretas','Ecosistema IDE'], cta:'Ver soluciones', url:'soluciones.html', body:'Tenemos la respuesta concreta que buscás. Y una mirada que asegura que esa solución genere valor en el conjunto de tu organización.' };
|
||||
return { icon:'⚙️', profile:'Perfil · Solución concreta', ...m };
|
||||
}
|
||||
|
||||
/* Perfil 2 · Sabe qué quiere lograr */
|
||||
if (p1 === 'objetivo') {
|
||||
const map = {
|
||||
'mejorar-gestion': { chips:['IDE Excellence','Mejora de procesos'], body:'Entendemos dónde querés llegar. Antes de proponer una solución, comprendemos tu operación para intervenir donde hay mayor impacto.' },
|
||||
'profesionalizar-proyectos':{ chips:['IDE Project','PMO'], body:'Traducimos tu objetivo en una estructura de gestión de proyectos adecuada a tu contexto, sin sobreingeniería.' },
|
||||
'desarrollar-equipo': { chips:['IDE Academy','Formación In Company'], body:'Desarrollamos capacidades alineadas con los desafíos reales de tu organización. La formación parte del contexto, no de un catálogo estándar.' },
|
||||
'transformar-digital': { chips:['IDE Digital','IA aplicada'], body:'Empezamos por entender tu organización para identificar dónde la tecnología realmente agrega valor, y avanzamos desde ahí.' }
|
||||
};
|
||||
const m = map[p2] || { chips:['Ecosistema IDE'], body:'Entendemos dónde querés llegar. Comprendemos el sistema para ayudarte a lograrlo.' };
|
||||
return {
|
||||
icon:'🎯', profile:'Perfil · Objetivo claro',
|
||||
title:'Entendemos dónde querés llegar. Te ayudamos a definir cómo.',
|
||||
body: m.body, chips: m.chips, cta:'Explorar por desafío', url:'desafios.html'
|
||||
};
|
||||
}
|
||||
|
||||
/* Perfil 1 · Desafío sin solución definida */
|
||||
const mapD = {
|
||||
gestion: { chips:['Procesos','Gestión','IDE Excellence'] },
|
||||
proyectos: { chips:['Proyectos','PMO','IDE Project'] },
|
||||
personas: { chips:['Capacidades','Equipo','IDE Academy'] },
|
||||
tecnologia:{ chips:['IA','Digital','IDE Digital'] },
|
||||
nosabe: { chips:['Diagnóstico sistémico','Ecosistema IDE'] }
|
||||
};
|
||||
const md = mapD[p2] || mapD.nosabe;
|
||||
return {
|
||||
icon:'🔍', profile:'Perfil · Desafío sin solución definida',
|
||||
title:'No necesitás tener la respuesta para empezar.',
|
||||
body:'Empezamos por comprender tu situación, no por ofrecerte una solución predeterminada. Eso diferencia una intervención puntual de una transformación real.',
|
||||
chips: md.chips, cta:'Explorar desafíos', url:'desafios.html'
|
||||
};
|
||||
}
|
||||
|
||||
let currentStep = 1;
|
||||
let stepHistory = [];
|
||||
let answers = {};
|
||||
const TOTAL = 4;
|
||||
|
||||
function showStep(id) {
|
||||
document.querySelectorAll('.quiz-step').forEach(s => s.classList.remove('active'));
|
||||
const el = document.getElementById('step-' + id);
|
||||
if (el) el.classList.add('active');
|
||||
updateProgress(id);
|
||||
}
|
||||
|
||||
function updateProgress(id) {
|
||||
const fill = document.getElementById('quizProgressFill');
|
||||
const label = document.getElementById('quizProgressLabel');
|
||||
const n = { 1:1, '2a':2, '2b':2, '2c':2, '2d':2, 3:3, 4:4, result:4 }[id] || 1;
|
||||
fill.style.width = (n / TOTAL * 100) + '%';
|
||||
label.textContent = id === 'result' ? '¡Listo!' : 'Pregunta ' + n + ' de ' + TOTAL;
|
||||
}
|
||||
|
||||
function renderResult(ans) {
|
||||
const r = buildResult(ans);
|
||||
document.getElementById('resultIcon').textContent = r.icon;
|
||||
document.getElementById('resultProfile').textContent = r.profile;
|
||||
document.getElementById('resultTitle').textContent = r.title;
|
||||
document.getElementById('resultBody').textContent = r.body;
|
||||
document.getElementById('resultChips').innerHTML = r.chips.map(c =>
|
||||
`<span class="result-chip">${c}</span>`).join('');
|
||||
const cta = document.getElementById('resultCTA');
|
||||
cta.textContent = r.cta;
|
||||
cta.href = r.url;
|
||||
showStep('result');
|
||||
}
|
||||
|
||||
function handleOption(btn) {
|
||||
const step = btn.dataset.step;
|
||||
const val = btn.dataset.val;
|
||||
btn.closest('.quiz-options').querySelectorAll('.quiz-opt')
|
||||
.forEach(b => b.classList.remove('selected'));
|
||||
btn.classList.add('selected');
|
||||
answers[step] = val;
|
||||
stepHistory.push(step);
|
||||
setTimeout(() => {
|
||||
const next = FLOW[step];
|
||||
if (!next) return;
|
||||
if (next === 'result') { renderResult(answers); return; }
|
||||
showStep(typeof next === 'object' ? (next[val] || '2a') : next);
|
||||
}, 220);
|
||||
}
|
||||
|
||||
window.goBack = function () {
|
||||
if (!stepHistory.length) return;
|
||||
const prev = stepHistory.pop();
|
||||
delete answers[prev];
|
||||
if (['2a','2b','2c','2d'].includes(prev)) {
|
||||
showStep(1);
|
||||
} else {
|
||||
showStep(stepHistory[stepHistory.length - 1] || 1);
|
||||
}
|
||||
};
|
||||
|
||||
window.restartQuiz = function () {
|
||||
answers = {}; stepHistory = [];
|
||||
document.querySelectorAll('.quiz-opt').forEach(b => b.classList.remove('selected'));
|
||||
showStep(1);
|
||||
};
|
||||
|
||||
document.addEventListener('DOMContentLoaded', function () {
|
||||
document.querySelectorAll('.quiz-opt').forEach(btn => {
|
||||
btn.addEventListener('click', () => handleOption(btn));
|
||||
});
|
||||
updateProgress(1);
|
||||
});
|
||||
})();
|
||||
/* ── CONTACT FORM ─────────────────────────────────────────────── */
|
||||
function initContactForm() {
|
||||
const form = document.querySelector('.contact-form');
|
||||
if (!form) return;
|
||||
|
||||
form.addEventListener('submit', (e) => {
|
||||
e.preventDefault();
|
||||
const btn = form.querySelector('[type="submit"]');
|
||||
const original = btn.textContent;
|
||||
btn.textContent = '✓ ¡Enviado!';
|
||||
btn.disabled = true;
|
||||
btn.style.background = '#1E9A7F';
|
||||
setTimeout(() => {
|
||||
btn.textContent = original;
|
||||
btn.disabled = false;
|
||||
btn.style.background = '';
|
||||
form.reset();
|
||||
}, 3000);
|
||||
});
|
||||
}
|
||||
|
||||
/* ── ACCORDION / DESAFÍOS ─────────────────────────────────────── */
|
||||
function initAccordion() {
|
||||
document.querySelectorAll('.accordion-trigger').forEach(trigger => {
|
||||
trigger.addEventListener('click', () => {
|
||||
const panel = trigger.nextElementSibling;
|
||||
const isOpen = panel.classList.contains('open');
|
||||
|
||||
// Close all
|
||||
document.querySelectorAll('.accordion-panel').forEach(p => p.classList.remove('open'));
|
||||
document.querySelectorAll('.accordion-trigger').forEach(t => t.classList.remove('open'));
|
||||
|
||||
if (!isOpen) {
|
||||
panel.classList.add('open');
|
||||
trigger.classList.add('open');
|
||||
}
|
||||
});
|
||||
});
|
||||
}
|
||||
|
||||
/* ── FILTER TABS ──────────────────────────────────────────────── */
|
||||
function initFilterTabs() {
|
||||
document.querySelectorAll('.filter-tab').forEach(tab => {
|
||||
tab.addEventListener('click', () => {
|
||||
const group = tab.closest('.filter-tabs');
|
||||
group.querySelectorAll('.filter-tab').forEach(t => t.classList.remove('active'));
|
||||
tab.classList.add('active');
|
||||
|
||||
const filter = tab.dataset.filter;
|
||||
document.querySelectorAll('.filterable').forEach(item => {
|
||||
if (filter === 'all' || item.dataset.cat === filter) {
|
||||
item.style.display = '';
|
||||
} else {
|
||||
item.style.display = 'none';
|
||||
}
|
||||
});
|
||||
});
|
||||
});
|
||||
}
|
||||
|
||||
/* ── INIT ─────────────────────────────────────────────────────── */
|
||||
document.addEventListener('DOMContentLoaded', () => {
|
||||
initThemeToggle();
|
||||
initHamburger();
|
||||
initActiveNav();
|
||||
initFadeIn();
|
||||
initModals();
|
||||
initContactForm();
|
||||
initAccordion();
|
||||
initFilterTabs();
|
||||
});
|
||||
@@ -492,7 +492,138 @@ p { color: var(--text-sub); max-width: 62ch; }
|
||||
border-color: var(--green);
|
||||
}
|
||||
.form-group textarea { resize: vertical; min-height: 100px; }
|
||||
/* ── QUIZ ────────────────────────────────────────────────── */
|
||||
.quiz-section {
|
||||
padding-block: 80px;
|
||||
background: var(--teal-dark);
|
||||
position: relative;
|
||||
overflow: hidden;
|
||||
}
|
||||
.quiz-section::before {
|
||||
content: '';
|
||||
position: absolute;
|
||||
inset: 0;
|
||||
background:
|
||||
radial-gradient(circle at 10% 50%, rgba(41,185,154,0.08) 0%, transparent 55%),
|
||||
radial-gradient(circle at 90% 20%, rgba(41,185,154,0.06) 0%, transparent 45%);
|
||||
pointer-events: none;
|
||||
}
|
||||
.quiz-section .container { position: relative; z-index: 1; }
|
||||
|
||||
.quiz-intro { text-align: center; margin-bottom: 2.5rem; }
|
||||
.quiz-intro h2 { color: var(--white); margin-bottom: 0.75rem; }
|
||||
.quiz-intro p { color: rgba(255,255,255,0.65); margin: 0 auto; }
|
||||
|
||||
.quiz-wrapper {
|
||||
background: var(--bg);
|
||||
border-radius: 16px;
|
||||
padding: 2.5rem;
|
||||
max-width: 720px;
|
||||
margin: 0 auto;
|
||||
box-shadow: 0 8px 40px rgba(0,0,0,0.25);
|
||||
transition: background var(--transition);
|
||||
}
|
||||
|
||||
.quiz-progress { display:flex; align-items:center; gap:1rem; margin-bottom:2rem; }
|
||||
.quiz-progress__bar { flex:1; height:4px; background:var(--border); border-radius:2px; overflow:hidden; }
|
||||
.quiz-progress__fill {
|
||||
height:100%; background:var(--green); border-radius:2px; width:25%;
|
||||
transition: width 0.45s cubic-bezier(.4,0,.2,1);
|
||||
}
|
||||
.quiz-progress__label {
|
||||
font-size:0.75rem; font-weight:600; color:var(--text-sub);
|
||||
white-space:nowrap; letter-spacing:0.05em;
|
||||
}
|
||||
|
||||
.quiz-step { display:none; animation: quizFadeIn 0.3s ease; }
|
||||
.quiz-step.active { display:block; }
|
||||
@keyframes quizFadeIn {
|
||||
from { opacity:0; transform:translateX(12px); }
|
||||
to { opacity:1; transform:translateX(0); }
|
||||
}
|
||||
|
||||
.quiz-question {
|
||||
font-size:1.12rem; font-weight:600; color:var(--text);
|
||||
margin-bottom:1.4rem; line-height:1.4; max-width:none;
|
||||
}
|
||||
|
||||
.quiz-options { display:flex; flex-direction:column; gap:0.65rem; margin-bottom:1.25rem; }
|
||||
.quiz-options--2col { display:grid; grid-template-columns:1fr 1fr; gap:0.65rem; }
|
||||
|
||||
.quiz-opt {
|
||||
display:flex; align-items:center; gap:1rem;
|
||||
padding:1rem 1.15rem;
|
||||
border:1.5px solid var(--border); border-radius:10px;
|
||||
background:var(--bg); cursor:pointer; text-align:left; width:100%;
|
||||
transition: border-color 0.2s, background 0.2s, transform 0.15s;
|
||||
}
|
||||
.quiz-opt:hover {
|
||||
border-color:var(--green);
|
||||
background:rgba(41,185,154,0.05);
|
||||
transform:translateX(3px);
|
||||
}
|
||||
.quiz-opt.selected { border-color:var(--green); background:rgba(41,185,154,0.1); }
|
||||
.quiz-opt--compact { padding:0.85rem 1rem; }
|
||||
|
||||
.quiz-opt__icon { font-size:1.3rem; flex-shrink:0; width:2rem; text-align:center; }
|
||||
.quiz-opt--compact .quiz-opt__icon { font-size:1.1rem; }
|
||||
|
||||
.quiz-opt__body { display:flex; flex-direction:column; gap:0.15rem; }
|
||||
.quiz-opt__body strong { font-size:0.9rem; color:var(--text); font-weight:600; }
|
||||
.quiz-opt__body span { font-size:0.78rem; color:var(--text-sub); line-height:1.35; }
|
||||
.quiz-opt--compact .quiz-opt__body strong { font-size:0.85rem; }
|
||||
.quiz-opt--compact .quiz-opt__body span { font-size:0.75rem; }
|
||||
|
||||
.quiz-back {
|
||||
background:none; border:none; font-size:0.8rem; color:var(--text-sub);
|
||||
cursor:pointer; padding:0; transition:color var(--transition); margin-top:0.25rem;
|
||||
}
|
||||
.quiz-back:hover { color:var(--green); }
|
||||
|
||||
.quiz-result { text-align:center; padding-top:0.5rem; }
|
||||
.quiz-result__icon { font-size:3rem; margin-bottom:1rem; animation:resultPop 0.4s ease; }
|
||||
@keyframes resultPop {
|
||||
from { transform:scale(0.5); opacity:0; }
|
||||
to { transform:scale(1); opacity:1; }
|
||||
}
|
||||
.quiz-result__profile {
|
||||
font-size:0.72rem; font-weight:700; letter-spacing:0.18em;
|
||||
text-transform:uppercase; color:var(--green); margin-bottom:0.5rem; max-width:none;
|
||||
}
|
||||
.quiz-result__title {
|
||||
font-size:1.35rem; font-weight:700; color:var(--text);
|
||||
margin-bottom:0.75rem; line-height:1.3;
|
||||
}
|
||||
.quiz-result__body {
|
||||
font-size:0.92rem; color:var(--text-sub);
|
||||
max-width:50ch; margin:0 auto 1.5rem; line-height:1.6;
|
||||
}
|
||||
.quiz-result__chips {
|
||||
display:flex; gap:0.5rem; flex-wrap:wrap;
|
||||
justify-content:center; margin-bottom:2rem;
|
||||
}
|
||||
.result-chip {
|
||||
padding:0.3rem 0.85rem; border-radius:99px;
|
||||
background:rgba(41,185,154,0.12); color:var(--green);
|
||||
font-size:0.75rem; font-weight:600; letter-spacing:0.07em; text-transform:uppercase;
|
||||
}
|
||||
.quiz-result__actions {
|
||||
display:flex; gap:0.75rem; justify-content:center;
|
||||
flex-wrap:wrap; margin-bottom:1.5rem;
|
||||
}
|
||||
.quiz-restart {
|
||||
background:none; border:none; font-size:0.78rem; color:var(--text-sub);
|
||||
cursor:pointer; text-decoration:underline; transition:color var(--transition);
|
||||
}
|
||||
.quiz-restart:hover { color:var(--text); }
|
||||
|
||||
@media (max-width: 640px) {
|
||||
.quiz-wrapper { padding:1.5rem 1.25rem; }
|
||||
.quiz-options--2col { grid-template-columns:1fr; }
|
||||
.quiz-result__actions { flex-direction:column; align-items:stretch; }
|
||||
.quiz-result__actions .btn { justify-content:center; }
|
||||
.quiz-opt:hover { transform:none; }
|
||||
}
|
||||
/* ── BLOG CARD ───────────────────────────────────────────── */
|
||||
.blog-card {
|
||||
border-radius: var(--radius-lg);
|
||||
Reference in New Issue
Block a user