/* ==================================================================== HEADER — LY Arquitectos Implementación exacta de Snøhetta: - Siempre transparente - mix-blend-mode: exclusion en el wrapper - Texto blanco — se invierte automáticamente sobre fondos claros - Sin fondo, sin blur, sin scroll state - pointer-events: none en wrapper, auto en links ==================================================================== */ .ly-header { position: fixed; top: 0; left: 0; right: 0; z-index: 1000; height: 72px; display: flex; align-items: center; padding: 0 var(--g); background: transparent; color: #ffffff; mix-blend-mode: exclusion; pointer-events: none; } .ly-header__inner { width: 100%; max-width: var(--max); margin: 0 auto; display: flex; align-items: center; justify-content: space-between; } /* LOGO — blanco, clickeable */ .ly-header__logo { text-decoration: none; display: flex; align-items: center; gap: 12px; flex-shrink: 0; pointer-events: auto; } .ly-logo-isotipo { height: 36px; width: auto; display: block; flex-shrink: 0; filter: brightness(0) invert(1); } .ly-logo-logotipo { height: 28px; width: auto; display: block; filter: brightness(0) invert(1); max-width: 200px; overflow: hidden; /* Animación: visible por defecto, desaparece al scrollear */ opacity: 1; transform: translateX(0); transition: opacity .3s var(--ease), max-width .35s var(--ease), transform .3s var(--ease); } /* Al hacer scroll: solo queda el isotipo */ .ly-header.is-scrolled .ly-logo-logotipo { opacity: 0; max-width: 0; transform: translateX(-8px); pointer-events: none; } /* ============================================================ HEADER SÓLIDO — en páginas sin hero (ej: archive proyectos) La clase .ly-header-solid se agrega al vía body_class ============================================================ */ .ly-header-solid .ly-header { background: var(--bg); mix-blend-mode: normal; color: var(--txt); border-bottom: 1px solid var(--bdr); } /* En header sólido los logos se ven en color normal */ .ly-header-solid .ly-header .ly-logo-isotipo, .ly-header-solid .ly-header .ly-logo-logotipo { filter: brightness(0); } .ly-dark-mode.ly-header-solid .ly-header .ly-logo-isotipo, .ly-dark-mode.ly-header-solid .ly-header .ly-logo-logotipo { filter: brightness(0) invert(1); } /* Botón menú en color normal */ .ly-header-solid .ly-header .ly-menu-btn { color: var(--txt); } /* En header sólido el logotipo NUNCA desaparece (no hay scroll state que importe) */ .ly-header-solid .ly-header.is-scrolled .ly-logo-logotipo { opacity: 1; max-width: 200px; transform: translateX(0); pointer-events: auto; } /* BOTÓN MENÚ — blanco, clickeable */ .ly-menu-btn { background: none; border: none; cursor: pointer; font-size: 20px; width: 40px; height: 40px; display: flex; align-items: center; justify-content: center; border-radius: 50%; color: #ffffff; transition: transform .3s var(--ease); flex-shrink: 0; pointer-events: auto; } .ly-menu-btn:not(.is-open) { transform: rotate(45deg); } .ly-menu-btn.is-open { transform: rotate(0deg); } /* ============================================================ OVERLAY MENÚ — 2 columnas centradas ============================================================ */ .ly-menu-overlay { position: fixed; inset: 0; z-index: 2000; background: rgba(255,255,255,.92); backdrop-filter: blur(20px); -webkit-backdrop-filter: blur(20px); opacity: 0; pointer-events: none; transition: opacity .25s var(--ease); display: flex; flex-direction: column; mix-blend-mode: normal; color: var(--txt); overflow-y: auto; } .ly-dark-mode .ly-menu-overlay { background: rgba(10,10,10,.92); } .ly-menu-overlay.open { opacity: 1; pointer-events: all; } .ly-menu-overlay__inner { display: flex; flex-direction: column; min-height: 100%; width: 100%; padding: 0 var(--g); max-width: var(--max); margin: 0 auto; } /* TOP */ .ly-menu-overlay__top { display: flex; align-items: center; justify-content: space-between; height: 72px; flex-shrink: 0; } .ly-menu-overlay__logo { display: flex; align-items: center; text-decoration: none; } .ly-menu-overlay__logo img { height: 32px; width: auto; filter: brightness(0); } .ly-dark-mode .ly-menu-overlay__logo img { filter: brightness(0) invert(1); } .ly-menu-close { background: none; border: none; cursor: pointer; font-size: 20px; color: var(--txt); opacity: .5; width: 40px; height: 40px; display: flex; align-items: center; justify-content: center; border-radius: 50%; transition: opacity .2s; } .ly-menu-close:hover { opacity: 1; } /* BODY — 2 columnas */ .ly-menu-body { flex: 1; display: flex; align-items: center; justify-content: center; padding: clamp(32px,5vh,64px) 0; } .ly-menu-cols { display: grid; grid-template-columns: 1fr 1px 1fr; gap: 0 clamp(40px,6vw,100px); width: 100%; max-width: 860px; align-items: start; } /* Divisor vertical */ .ly-menu-cols::before { content: ''; grid-column: 2; grid-row: 1; width: 1px; height: 100%; background: var(--bdr); justify-self: center; } /* COLUMNA IZQUIERDA */ .ly-menu-col--left { grid-column: 1; } .ly-menu-col--right { grid-column: 3; } /* Links principales */ .ly-menu-nav__link { display: block; font-family: var(--f); font-weight: 300; font-size: clamp(24px,3.5vw,48px); text-decoration: none; color: var(--txt); padding: 8px 0; opacity: .35; transition: opacity .15s; letter-spacing: -.02em; line-height: 1.1; } .ly-menu-nav__link:hover { opacity: 1; } .ly-menu-nav__link.active { opacity: 1; color: var(--acc); } /* Link Autónoma con logo */ .ly-menu-nav__link--autonoma { display: flex; align-items: center; padding: 10px 0; } .ly-menu-autonoma-logo { height: clamp(18px,2.5vw,28px); width: auto; display: block; filter: brightness(0); opacity: .35; transition: opacity .15s; } .ly-dark-mode .ly-menu-autonoma-logo { filter: brightness(0) invert(1); } .ly-menu-nav__link--autonoma:hover .ly-menu-autonoma-logo { opacity: 1; } .ly-menu-nav__link--autonoma.active .ly-menu-autonoma-logo { opacity: 1; filter: brightness(0) sepia(1) saturate(3) hue-rotate(5deg); } /* COLUMNA DERECHA */ .ly-menu-col__label { font-family: var(--f); font-size: 10px; font-weight: 600; text-transform: uppercase; letter-spacing: .12em; color: var(--muted); margin-bottom: 16px; } .ly-menu-nav__sub-link { display: block; font-family: var(--f); font-weight: 300; font-size: clamp(16px,2vw,24px); text-decoration: none; color: var(--txt); padding: 6px 0; opacity: .35; transition: opacity .15s; letter-spacing: -.01em; } .ly-menu-nav__sub-link:hover { opacity: 1; } .ly-menu-nav__sub-link.active { opacity: 1; color: var(--acc); } /* Búsqueda */ .ly-menu-search { display: flex; align-items: center; gap: 10px; border-top: 1px solid var(--bdr); margin-top: clamp(20px,3vh,36px); padding-top: clamp(16px,2vh,24px); } .ly-menu-search i { color: var(--muted); font-size: 14px; flex-shrink: 0; } .ly-menu-search__input { flex: 1; background: none; border: none; outline: none; font-family: var(--f); font-size: 14px; font-weight: 300; color: var(--txt); padding: 0; opacity: .5; } .ly-menu-search__input::placeholder { color: var(--txt); } .ly-menu-search__input:focus { opacity: 1; } /* FOOTER — separador + iconos */ .ly-menu-overlay__foot { padding: clamp(20px,3vh,32px) 0; border-top: 1px solid var(--bdr); flex-shrink: 0; } .ly-menu-foot__social { display: flex; align-items: center; gap: clamp(24px,3vw,40px); } .ly-menu-foot__social-icon { display: flex; align-items: center; justify-content: center; color: var(--txt); text-decoration: none; opacity: .35; transition: opacity .2s; font-size: 22px; } .ly-menu-foot__social-icon:hover { opacity: 1; } /* RESPONSIVE MOBILE */ @media (max-width: 768px) { .ly-menu-cols { grid-template-columns: 1fr; max-width: 100%; gap: 0; } /* Ocultar el divisor vertical en mobile */ .ly-menu-cols::before { display: none; } .ly-menu-col--left { grid-column: 1; } .ly-menu-col--right { grid-column: 1; border-top: 1px solid var(--bdr); padding-top: 24px; margin-top: 24px; } .ly-menu-nav__link { font-size: clamp(28px,7vw,40px); } .ly-menu-nav__sub-link { font-size: clamp(16px,4vw,20px); } .ly-menu-body { align-items: flex-start; padding: 24px 0; } } /* ============================================================ SETTINGS PANEL ============================================================ */ .ly-cfg-btn { position: fixed; bottom: 32px; left: 32px; z-index: 900; width: 40px; height: 40px; border-radius: 50%; background: rgba(244,241,235,.92); backdrop-filter: blur(12px); border: 1px solid rgba(0,0,0,.1); display: flex; align-items: center; justify-content: center; cursor: pointer; color: #111; font-size: 16px; transition: transform .2s; } .ly-cfg-btn:hover { transform: scale(1.08); } .ly-dark-mode .ly-cfg-btn { background: rgba(20,20,20,.92); border-color: rgba(255,255,255,.12); color: #f2f0eb; } .ly-cfg-panel { position: fixed; bottom: 84px; left: 32px; z-index: 900; width: 200px; background: rgba(244,241,235,.96); backdrop-filter: blur(16px); border: 1px solid rgba(0,0,0,.08); border-radius: 10px; overflow: hidden; opacity: 0; pointer-events: none; transform: translateY(6px); transition: opacity .2s, transform .2s; } .ly-cfg-panel.open { opacity: 1; pointer-events: all; transform: translateY(0); } .ly-dark-mode .ly-cfg-panel { background: rgba(20,20,20,.96); border-color: rgba(255,255,255,.1); } .ly-cfg-row { display: flex; justify-content: space-between; align-items: center; padding: 13px 16px; cursor: pointer; font-family: var(--f); font-size: 11px; font-weight: 600; text-transform: uppercase; letter-spacing: .07em; color: var(--txt); border-bottom: 1px solid rgba(0,0,0,.07); transition: background .15s; } .ly-cfg-row:last-child { border-bottom: none; } .ly-cfg-row:hover { background: rgba(0,0,0,.03); } .ly-dark-mode .ly-cfg-row { border-color: rgba(255,255,255,.08); } .ly-tog { width: 32px; height: 16px; border-radius: 8px; background: rgba(0,0,0,.15); position: relative; transition: background .2s; flex-shrink: 0; } .ly-tog::after { content: ''; position: absolute; width: 12px; height: 12px; border-radius: 50%; background: #888; top: 2px; left: 2px; transition: left .2s, background .2s; } .ly-tog.on { background: var(--acc); } .ly-tog.on::after { left: 18px; background: #fff; } /* RESPONSIVE */ @media (max-width: 768px) { .ly-menu-body { padding-left: 0; padding-top: 20px; } .ly-menu-overlay__foot { padding-left: 0; } .ly-menu-nav__link { font-size: clamp(24px,6vw,34px); } .ly-cfg-btn { bottom: 16px; left: 16px; width: 36px; height: 36px; font-size: 14px; } .ly-cfg-panel { left: 16px; bottom: 68px; } }