diff --git a/assets/isotype-on-dark.png b/assets/isotype-on-dark.png new file mode 100644 index 0000000..69b2219 Binary files /dev/null and b/assets/isotype-on-dark.png differ diff --git a/assets/isotype-on-light.png b/assets/isotype-on-light.png new file mode 100644 index 0000000..fd9c604 Binary files /dev/null and b/assets/isotype-on-light.png differ diff --git a/assets/logo-on-dark.png b/assets/logo-on-dark.png new file mode 100644 index 0000000..da34048 Binary files /dev/null and b/assets/logo-on-dark.png differ diff --git a/assets/logo-on-light.png b/assets/logo-on-light.png new file mode 100644 index 0000000..32c0acd Binary files /dev/null and b/assets/logo-on-light.png differ diff --git a/assets/logo_clasico.png b/assets/logo_clasico.png new file mode 100644 index 0000000..3208e0a Binary files /dev/null and b/assets/logo_clasico.png differ diff --git a/assets/logo_verde.png b/assets/logo_verde.png new file mode 100644 index 0000000..adb34aa Binary files /dev/null and b/assets/logo_verde.png differ diff --git a/assets/pattern.svg b/assets/pattern.svg new file mode 100644 index 0000000..be7e0c5 --- /dev/null +++ b/assets/pattern.svg @@ -0,0 +1,20 @@ + + + + + + + + + + + + + + + + + + + + diff --git a/assets/placeholder-logo.png b/assets/placeholder-logo.png new file mode 100644 index 0000000..b4a0e02 Binary files /dev/null and b/assets/placeholder-logo.png differ diff --git a/assets/placeholder-photo.png b/assets/placeholder-photo.png new file mode 100644 index 0000000..e86b95f Binary files /dev/null and b/assets/placeholder-photo.png differ diff --git a/assets/placeholder-square.png b/assets/placeholder-square.png new file mode 100644 index 0000000..1ba2a7f Binary files /dev/null and b/assets/placeholder-square.png differ diff --git a/assets/placeholder-wide.png b/assets/placeholder-wide.png new file mode 100644 index 0000000..d31d89e Binary files /dev/null and b/assets/placeholder-wide.png differ diff --git a/index.html b/index.html index 6e00b9d..09ff4b1 100644 --- a/index.html +++ b/index.html @@ -4,7 +4,7 @@ IDE Consultores – Inicio - + @@ -33,6 +33,308 @@ + + + +
+
+ +
+

Encontrá tu camino

+

¿Por dónde empezamos?

+

Cuatro preguntas para entender tu situación y orientarte hacia lo que realmente necesitás.

+
+ +
+ + +
+
+
+
+ Pregunta 1 de 4 +
+ + +
+

¿Qué describe mejor tu situación hoy?

+
+ + + + +
+
+ + +
+

¿En qué área sentís que algo no funciona como debería?

+
+ + + + + +
+ +
+ + +
+

¿Qué querés lograr?

+
+ + + + +
+ +
+ + +
+

¿Qué solución estás buscando?

+
+ + + + +
+ +
+ + +
+

¿Qué tipo de formación o conocimiento buscás?

+
+ + + + +
+ +
+ + +
+

¿Cómo describirías el momento en que está tu organización?

+
+ + + + +
+ +
+ + +
+

¿Cuál es tu rol en la organización?

+
+ + + + +
+ +
+ + +
+
+

+

+

+
+
+ Ver contenido recomendado + Hablemos directamente +
+ +
+ +
+
+
+
@@ -164,7 +466,8 @@ - - + + + - + \ No newline at end of file diff --git a/scripts.js b/scripts.js deleted file mode 100644 index 3f058c6..0000000 --- a/scripts.js +++ /dev/null @@ -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(); -}); diff --git a/layout.js b/scripts/layout.js similarity index 100% rename from layout.js rename to scripts/layout.js diff --git a/scripts/scripts.js b/scripts/scripts.js new file mode 100644 index 0000000..37e02cf --- /dev/null +++ b/scripts/scripts.js @@ -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 => + `${c}`).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(); +}); diff --git a/styles.css b/styles/styles.css similarity index 77% rename from styles.css rename to styles/styles.css index 5d91399..b967732 100644 --- a/styles.css +++ b/styles/styles.css @@ -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);