diff --git a/app/public/assets/css/components/header.css b/app/public/assets/css/components/header.css index 3ea9b95..375ced3 100644 --- a/app/public/assets/css/components/header.css +++ b/app/public/assets/css/components/header.css @@ -15,72 +15,73 @@ header { var(--gradient-3) 66%, var(--gradient-4) 100% ); +} - .nav-logo { - text-decoration: none; - } +/* ── Navigation ────────────────────────────────────────────────────── */ - .nav-left-links, - .nav-right-links { - display: flex; - gap: var(--space-l); - align-items: center; - list-style: none; - margin: 0; - padding: 0; - } +header nav { + padding: var(--space-s) var(--space-s); + display: flex; + align-items: center; + justify-content: space-between; + font-size: var(--step-0); +} - nav { - padding: var(--space-s) var(--space-s); - display: flex; - align-items: center; - justify-content: space-between; - font-size: var(--step-0); +header nav ul { + display: flex; + gap: var(--space-l); + align-items: center; + list-style: none; + margin: 0; + padding: 0; +} - a { - font-family: var(--font-display); - letter-spacing: 0.12em; - text-transform: uppercase; - color: var(--accent-foreground); - text-decoration: none; - padding: var(--space-3xs) var(--space-xs); - border-radius: var(--radius); - text-shadow: - 0 0 16px var(--header-shadow-strong), - 0 0 32px var(--header-shadow-soft); - } +header nav ul a { + font-family: var(--font-display); + letter-spacing: 0.12em; + text-transform: uppercase; + color: var(--accent-foreground); + text-decoration: none; + padding: var(--space-3xs) var(--space-xs); + border-radius: var(--radius); + text-shadow: + 0 0 16px var(--header-shadow-strong), + 0 0 32px var(--header-shadow-soft); + transition: opacity 0.15s; +} - ul { - display: flex; - gap: var(--space-l); - align-items: center; - list-style: none; - margin: 0; - padding: 0; - } +header nav ul a:hover { + opacity: 1; +} - ul a { - transition: opacity 0.15s; - } +header nav ul a[aria-current="page"] { + opacity: 1; + border-bottom: 1px solid var(--header-nav-active-border); + padding-bottom: 1px; +} - ul a:hover { - opacity: 1; - } - } +/* ── Logo ───────────────────────────────────────────────────────────── */ - ul a[aria-current="page"] { - opacity: 1; - border-bottom: 1px solid var(--header-nav-active-border); - padding-bottom: 1px; - } +.nav-logo { + text-decoration: none; +} - .nav-top-row { - display: contents; - } +.nav-left-links, +.nav-right-links { + display: flex; + gap: var(--space-l); + align-items: center; + list-style: none; + margin: 0; + padding: 0; +} - .nav-mobile-links { - display: none; - } +.nav-top-row { + display: contents; +} + +.nav-mobile-links { + display: none; } /* ── Hamburger menu (pure CSS, checkbox trick) ──────────────────────── */