/* Header-specific styles for Irányóra */ .header-inner { display: flex; align-items: center; justify-content: space-between; padding-block: var(--space-3); gap: var(--space-4); } .header-brand { display: flex; align-items: center; } .header-logo { display: inline-flex; align-items: center; gap: var(--space-2); } .header-logo-mark { display: inline-flex; align-items: center; gap: 4px; } .header-logo-text { font-family: var(--font-display); font-weight: 600; font-size: 1.05rem; letter-spacing: 0.08em; text-transform: uppercase; } /* Mobile toggle */ .header-toggle { position: relative; display: inline-flex; flex-direction: column; justify-content: center; align-items: center; gap: 4px; width: 40px; height: 32px; border-radius: var(--radius-pill); border: 1px solid rgba(148, 163, 184, 0.7); background-color: rgba(255, 255, 255, 0.9); cursor: pointer; } .header-toggle-bar { width: 18px; height: 2px; border-radius: 999px; background-color: var(--color-gray-700); transition: transform var(--transition-fast), opacity var(--transition-fast); } /* Mobile nav default: hidden (enhanced by JS). Fallback: visible when no JS (see .no-js below). */ .header-nav { position: absolute; inset-inline: 0; top: 100%; background-color: rgba(255, 249, 244, 0.98); border-bottom: 1px solid rgba(148, 163, 184, 0.3); transform-origin: top; transform: scaleY(0.9); opacity: 0; visibility: hidden; pointer-events: none; transition: opacity var(--transition-fast), transform var(--transition-fast), visibility var(--transition-fast); } .header-nav-list { padding: var(--space-3) var(--space-4) var(--space-4); flex-direction: column; align-items: flex-start; } .header-nav-list .nav-item { width: 100%; } .header-nav-list .nav-link { display: inline-block; width: 100%; } .nav-item--cta { margin-top: var(--space-2); } .header-cta-btn { width: 100%; justify-content: center; } /* JS-enabled open state */ .header-nav--open { opacity: 1; visibility: visible; pointer-events: auto; transform: scaleY(1); } .header-menu-open .header-toggle-bar:nth-child(1) { transform: translateY(6px) rotate(45deg); } .header-menu-open .header-toggle-bar:nth-child(2) { opacity: 0; } .header-menu-open .header-toggle-bar:nth-child(3) { transform: translateY(-6px) rotate(-45deg); } /* Desktop layout */ @media (min-width: 768px) { .header-toggle { display: none; } .header-nav { position: static; opacity: 1; visibility: visible; pointer-events: auto; transform: none; background: transparent; border-bottom: none; } .header-nav-list { padding: 0; flex-direction: row; align-items: center; } .header-nav-list .nav-item { width: auto; } .header-cta-btn { width: auto; } .nav-item--cta { margin-top: 0; margin-left: var(--space-3); } } /* No-JS fallback: show nav and hide toggle when JS disabled. Add class .no-js to server-side; header.js will remove it on load. */ html.no-js .header-nav { position: static; opacity: 1; visibility: visible; pointer-events: auto; transform: none; background: transparent; border-bottom: none; } html.no-js .header-nav-list { padding: 0; flex-direction: row; align-items: center; } html.no-js .header-toggle { display: none; }