/* ============================================================ IEL Unified Header — shared across informativosenlinea.com and publisher.informativosenlinea.com Source of truth: /assets/iel-header.css ============================================================ */ :root { --iel-orange: #e55200; --iel-orange-light: #ff6b2b; --iel-orange-dim: rgba(229, 82, 0, 0.08); } /* ───────── Theme tokens applied to ───────── */ body[data-iel-theme="light"] { --iel-bg: #ffffff; --iel-surface: #f8f9fa; --iel-text: #0f172a; --iel-text-muted: #64748b; --iel-border: #e5e7eb; --iel-header-bg: rgba(255, 255, 255, 0.96); } body[data-iel-theme="dark"] { --iel-bg: #0a0a0a; --iel-surface: #161616; --iel-text: #f1f1f1; --iel-text-muted: #9a9a9a; --iel-border: #2a2a2a; --iel-header-bg: rgba(15, 15, 15, 0.96); } /* ───────── Header container ───────── */ .iel-header { position: sticky; top: 0; z-index: 9999; background: var(--iel-header-bg); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); border-bottom: 1px solid var(--iel-border); font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Arial, sans-serif; transition: background 0.2s, border-color 0.2s; } .iel-header * { box-sizing: border-box; } .iel-header-inner { max-width: 1280px; margin: 0 auto; padding: 0 24px; height: 64px; display: flex; align-items: center; justify-content: space-between; gap: 16px; } /* ───────── Logo (theme-aware) ───────── */ .iel-logo { display: inline-flex; align-items: center; text-decoration: none; flex-shrink: 0; } .iel-logo img { height: 32px; width: auto; display: block; } body[data-iel-theme="light"] .iel-logo-dark { display: none; } body[data-iel-theme="dark"] .iel-logo-light { display: none; } /* ───────── Nav ───────── */ .iel-nav { display: flex; align-items: center; gap: 4px; flex: 1; justify-content: center; } .iel-nav-link { color: var(--iel-text-muted); text-decoration: none; font-size: 13px; font-weight: 600; padding: 8px 14px; border-radius: 8px; transition: color 0.15s, background 0.15s; white-space: nowrap; display: inline-flex; flex-direction: column; align-items: center; line-height: 1.15; gap: 1px; } .iel-nav-link .iel-nav-sub { font-size: 10px; font-weight: 500; letter-spacing: 0.02em; color: var(--iel-text-muted); opacity: 0.75; text-transform: none; } .iel-nav-link:hover, .iel-nav-link.active { color: var(--iel-orange); background: var(--iel-orange-dim); } .iel-nav-link:hover .iel-nav-sub, .iel-nav-link.active .iel-nav-sub { color: var(--iel-orange); opacity: 0.85; } /* ───────── Right controls ───────── */ .iel-controls { display: flex; align-items: center; gap: 8px; flex-shrink: 0; } .iel-toggle-group { display: inline-flex; border: 1px solid var(--iel-border); border-radius: 8px; overflow: hidden; background: var(--iel-bg); } .iel-toggle-group button { background: transparent; border: none; color: var(--iel-text-muted); font-size: 12px; font-weight: 700; padding: 6px 11px; cursor: pointer; letter-spacing: 0.04em; transition: background 0.15s, color 0.15s; font-family: inherit; line-height: 1; } .iel-toggle-group button.active { background: var(--iel-orange); color: #fff; } .iel-theme-btn { font-size: 14px !important; padding: 6px 10px !important; } .iel-portal-btn { background: transparent; color: var(--iel-text); text-decoration: none; font-size: 12px; font-weight: 700; padding: 8px 14px; border-radius: 8px; border: 1px solid var(--iel-border); white-space: nowrap; transition: all 0.15s; } .iel-portal-btn:hover { color: var(--iel-orange); border-color: var(--iel-orange); background: var(--iel-orange-dim); } /* ───────── Mobile hamburger ───────── */ .iel-mobile-toggle { display: none; background: transparent; border: 1px solid var(--iel-border); border-radius: 8px; width: 36px; height: 36px; font-size: 18px; cursor: pointer; color: var(--iel-text); align-items: center; justify-content: center; } .iel-mobile-only { display: none; } /* ───────── Language span helpers ───────── */ .iel-en, .iel-es { display: none; } body[data-iel-lang="en"] .iel-en { display: inline; } body[data-iel-lang="es"] .iel-es { display: inline; } /* ───────── Responsive ───────── */ @media (max-width: 900px) { .iel-nav { display: none; } .iel-controls .iel-portal-btn { display: none; } .iel-mobile-toggle { display: inline-flex; } .iel-header.iel-mobile-open .iel-nav { display: flex; position: absolute; top: 64px; left: 0; right: 0; flex-direction: column; background: var(--iel-header-bg); border-bottom: 1px solid var(--iel-border); padding: 12px 24px 16px; gap: 4px; align-items: stretch; } .iel-header.iel-mobile-open .iel-nav-link { text-align: left; padding: 12px 14px; } .iel-header.iel-mobile-open .iel-mobile-only { display: flex; } }