* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
body {
font-family: 'Red Hat Display', sans-serif;
background-color: #f5f5f5;
display: flex;
justify-content: center;
align-items: center;
min-height: 100vh;
padding: 40px;
}
.menu-container {
width: 100%;
display: flex;
flex-direction: column;
gap: 20px;
position: relative;
}
/* Barra Principal (Alineación Estricta) */
.main-menu {
background-color: #D3FF33;
height: 64px !important;
max-height: 64px !important;
border-radius: 80px;
display: flex !important;
flex-direction: row !important;
align-items: center !important;
justify-content: space-between !important;
padding: 0 30px !important;
color: #191919;
font-weight: 500;
cursor: pointer;
box-shadow: 0 4px 12px rgba(0,0,0,0.05);
position: relative;
z-index: 10;
overflow: hidden !important; /* Previene desbordamiento de imágenes */
}
.logo-container {
display: flex !important;
align-items: center !important;
height: 100% !important;
max-width: 60% !important;
}
/* Control estricto del tamaño del Logo SVG */
.logo-desktop {
height: 20px !important;
width: auto !important;
max-height: 20px !important;
object-fit: contain !important;
display: block !important;
}
.logo-mobile {
height: 32px !important;
width: 32px !important;
max-height: 32px !important;
object-fit: contain !important;
display: none !important;
}
.logo-spacer {
flex: 1 !important;
}
/* Hamburguesa GSAP */
.hamburger {
display: flex !important;
flex-direction: column !important;
justify-content: space-between !important;
width: 24px !important;
height: 16px !important;
cursor: pointer;
flex-shrink: 0 !important;
position: relative !important;
}
.hamburger-line {
height: 3px !important;
width: 100% !important;
background-color: #191919 !important;
border-radius: 2px !important;
position: absolute !important;
left: 0 !important;
}
.line-1 { top: 0 !important; }
.line-2 { top: 6px !important; }
.line-3 { top: 12px !important; }
/* Menú Expandido */
.expanded-menu {
display: flex;
border-radius: 24px;
overflow: hidden;
box-shadow: 0 15px 35px rgba(0, 0, 0, 0.12);
height: 0;
opacity: 0;
visibility: hidden;
position: relative;
}
.menu-section {
flex: 1;
padding: 40px;
display: flex;
flex-direction: column;
position: relative;
}
.section-left {
background-color: #D3FF33;
color: #191919;
}
.section-right {
background-color: #191919;
color: white;
}
.section-title {
font-weight: 700;
margin-bottom: 24px;
}
.menu-links {
display: flex;
flex-direction: column;
gap: 16px;
}
.expanded-menu .menu-link {
text-decoration: none !important;
display: inline-block !important;
opacity: 1 !important;
visibility: visible !important;
font-weight: 500 !important;
}
.section-left .menu-link,
.section-left a {
color: #191919 !important;
}
.section-right .menu-link,
.section-right a {
color: #ffffff !important;
}
/* Responsivo */
@media (min-width: 1000px) {
.menu-container { max-width: 1000px; }
.expanded-menu { flex-direction: row; }
.section-title { font-size: 56px; }
.menu-link { font-size: 24px; }
}
@media (min-width: 700px) and (max-width: 999px) {
.menu-container { max-width: 700px; }
.expanded-menu { flex-direction: row; }
.section-title { font-size: 48px; }
.menu-link { font-size: 22px; }
}
@media (max-width: 699px) {
.menu-container { max-width: 400px; }
.expanded-menu { flex-direction: column; }
body { padding: 40px 16px; }
.logo-desktop { display: none !important; }
.logo-mobile { display: block !important; }
.main-menu { padding: 0 20px !important; }
.section-title { font-size: 36px; }
.menu-link { font-size: 20px; }
}
document.addEventListener("DOMContentLoaded", function() {
const mainMenu = document.getElementById('mainMenu');
const expandedMenu = document.getElementById('expandedMenu');
const menuLinks = document.querySelectorAll('.menu-link');
const sectionTitles = document.querySelectorAll('.section-title');
let isOpen = false;
// Timeline de Despliegue GSAP
const menuTL = gsap.timeline({ paused: true, reversed: true });
// Animación de la hamburguesa a 'X'
menuTL.to('.line-1', { duration: 0.3, y: 6, rotate: 45, ease: 'power2.inOut' }, 0)
.to('.line-2', { duration: 0.2, opacity: 0, scaleX: 0, ease: 'power2.inOut' }, 0)
.to('.line-3', { duration: 0.3, y: -6, rotate: -45, ease: 'power2.inOut' }, 0);
// Despliegue fluido del contenedor
menuTL.to(expandedMenu, {
duration: 0.5,
height: 'auto',
opacity: 1,
visibility: 'visible',
ease: 'power3.out'
}, 0);
// Revelado progresivo de contenidos
menuTL.from(sectionTitles, { duration: 0.4, y: 20, opacity: 0, stagger: 0.1, ease: 'power2.out' }, 0.2);
menuTL.from(menuLinks, { duration: 0.4, y: 20, opacity: 0, stagger: 0.05, ease: 'power2.out' }, 0.3);
function toggleMenu() {
isOpen = !isOpen;
if (isOpen) {
menuTL.play();
} else {
menuTL.reverse();
}
}
mainMenu.addEventListener('click', toggleMenu);
// Hover suave en enlaces individuales
menuLinks.forEach(link => {
link.addEventListener('mouseenter', () => gsap.to(link, { x: 8, duration: 0.2, ease: 'power2.out' }));
link.addEventListener('mouseleave', () => gsap.to(link, { x: 0, duration: 0.2, ease: 'power2.out' }));
});
// Cerrar menú al hacer clic fuera
document.addEventListener('click', function(e) {
if (isOpen && !mainMenu.contains(e.target) && !expandedMenu.contains(e.target)) {
toggleMenu();
}
});
});
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
body {
font-family: 'Red Hat Display', sans-serif;
background-color: #f5f5f5;
display: flex;
justify-content: center;
align-items: center;
min-height: 100vh;
padding: 40px;
}
.menu-container {
width: 100%;
display: flex;
flex-direction: column;
gap: 20px;
position: relative;
}
/* Barra Principal (Alineación Estricta) */
.main-menu {
background-color: #D3FF33;
height: 64px !important;
max-height: 64px !important;
border-radius: 80px;
display: flex !important;
flex-direction: row !important;
align-items: center !important;
justify-content: space-between !important;
padding: 0 30px !important;
color: #191919;
font-weight: 500;
cursor: pointer;
box-shadow: 0 4px 12px rgba(0,0,0,0.05);
position: relative;
z-index: 10;
overflow: hidden !important; /* Previene desbordamiento de imágenes */
}
.logo-container {
display: flex !important;
align-items: center !important;
height: 100% !important;
max-width: 60% !important;
}
/* Control estricto del tamaño del Logo SVG */
.logo-desktop {
height: 20px !important;
width: auto !important;
max-height: 20px !important;
object-fit: contain !important;
display: block !important;
}
.logo-mobile {
height: 32px !important;
width: 32px !important;
max-height: 32px !important;
object-fit: contain !important;
display: none !important;
}
.logo-spacer {
flex: 1 !important;
}
/* Hamburguesa GSAP */
.hamburger {
display: flex !important;
flex-direction: column !important;
justify-content: space-between !important;
width: 24px !important;
height: 16px !important;
cursor: pointer;
flex-shrink: 0 !important;
position: relative !important;
}
.hamburger-line {
height: 3px !important;
width: 100% !important;
background-color: #191919 !important;
border-radius: 2px !important;
position: absolute !important;
left: 0 !important;
}
.line-1 { top: 0 !important; }
.line-2 { top: 6px !important; }
.line-3 { top: 12px !important; }
/* Menú Expandido */
.expanded-menu {
display: flex;
border-radius: 24px;
overflow: hidden;
box-shadow: 0 15px 35px rgba(0, 0, 0, 0.12);
height: 0;
opacity: 0;
visibility: hidden;
position: relative;
}
.menu-section {
flex: 1;
padding: 40px;
display: flex;
flex-direction: column;
position: relative;
}
.section-left {
background-color: #D3FF33;
color: #191919;
}
.section-right {
background-color: #191919;
color: white;
}
.section-title {
font-weight: 700;
margin-bottom: 24px;
}
.menu-links {
display: flex;
flex-direction: column;
gap: 16px;
}
.expanded-menu .menu-link {
text-decoration: none !important;
display: inline-block !important;
opacity: 1 !important;
visibility: visible !important;
font-weight: 500 !important;
}
.section-left .menu-link,
.section-left a {
color: #191919 !important;
}
.section-right .menu-link,
.section-right a {
color: #ffffff !important;
}
/* Responsivo */
@media (min-width: 1000px) {
.menu-container { max-width: 1000px; }
.expanded-menu { flex-direction: row; }
.section-title { font-size: 56px; }
.menu-link { font-size: 24px; }
}
@media (min-width: 700px) and (max-width: 999px) {
.menu-container { max-width: 700px; }
.expanded-menu { flex-direction: row; }
.section-title { font-size: 48px; }
.menu-link { font-size: 22px; }
}
@media (max-width: 699px) {
.menu-container { max-width: 400px; }
.expanded-menu { flex-direction: column; }
body { padding: 40px 16px; }
.logo-desktop { display: none !important; }
.logo-mobile { display: block !important; }
.main-menu { padding: 0 20px !important; }
.section-title { font-size: 36px; }
.menu-link { font-size: 20px; }
}
document.addEventListener("DOMContentLoaded", function() {
const mainMenu = document.getElementById('mainMenu');
const expandedMenu = document.getElementById('expandedMenu');
const menuLinks = document.querySelectorAll('.menu-link');
const sectionTitles = document.querySelectorAll('.section-title');
let isOpen = false;
// Timeline de Despliegue GSAP
const menuTL = gsap.timeline({ paused: true, reversed: true });
// Animación de la hamburguesa a 'X'
menuTL.to('.line-1', { duration: 0.3, y: 6, rotate: 45, ease: 'power2.inOut' }, 0)
.to('.line-2', { duration: 0.2, opacity: 0, scaleX: 0, ease: 'power2.inOut' }, 0)
.to('.line-3', { duration: 0.3, y: -6, rotate: -45, ease: 'power2.inOut' }, 0);
// Despliegue fluido del contenedor
menuTL.to(expandedMenu, {
duration: 0.5,
height: 'auto',
opacity: 1,
visibility: 'visible',
ease: 'power3.out'
}, 0);
// Revelado progresivo de contenidos
menuTL.from(sectionTitles, { duration: 0.4, y: 20, opacity: 0, stagger: 0.1, ease: 'power2.out' }, 0.2);
menuTL.from(menuLinks, { duration: 0.4, y: 20, opacity: 0, stagger: 0.05, ease: 'power2.out' }, 0.3);
function toggleMenu() {
isOpen = !isOpen;
if (isOpen) {
menuTL.play();
} else {
menuTL.reverse();
}
}
mainMenu.addEventListener('click', toggleMenu);
// Hover suave en enlaces individuales
menuLinks.forEach(link => {
link.addEventListener('mouseenter', () => gsap.to(link, { x: 8, duration: 0.2, ease: 'power2.out' }));
link.addEventListener('mouseleave', () => gsap.to(link, { x: 0, duration: 0.2, ease: 'power2.out' }));
});
// Cerrar menú al hacer clic fuera
document.addEventListener('click', function(e) {
if (isOpen && !mainMenu.contains(e.target) && !expandedMenu.contains(e.target)) {
toggleMenu();
}
});
});
The Discovery Workshop Freeze y Sometimes silence isn’t just quiet.
Navigation Home About me Projects Blog Follow me LinkedIn ↗ Behance ↗ Instagram ↗ Art projects ↗ Get in touch Go back The Discovery Workshop Freeze: Why Design Leadership Isn’t About Having All the Answers. About a year ago, I was leading my first discovery workshop for the Clarios project. I had meticulously prepared the…
Navigation Home About me Projects Blog Follow me LinkedIn ↗ Behance ↗ Instagram ↗ Art projects ↗ Get in touch Go back What UI Kits Don’t Teach You: 3 UX Lessons from Large-Scale Projects Over the past few months, I’ve been immersed in projects with very different dynamics: from restructuring the digital warranty ecosystem for…
Navigation Home About me Projects Blog Follow me LinkedIn ↗ Behance ↗ Instagram ↗ Art projects ↗ Get in touch Go back Sometimes, silence isn’t just quiet—it’s the start of disconnection. At work, communication isn’t just about meetings, briefs, or Slack messages. It’s also about respect, tone, and the little things we say (or don’t…