@layer block { .top-bar { position: fixed; top: 0; left: 0; right: 0; z-index: var(--z-topbar); display: flex; align-items: center; justify-content: space-between; padding-block: var(--space-2); padding-inline: max(var(--space-page-mobile), calc((100% - var(--content-max-width)) / 2)); background: color-mix(in srgb, var(--color-bg) 85%, transparent); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); border-bottom: 1px solid var(--color-border); & .top-bar__logo { text-decoration: none; display: flex; align-items: center; } /* The wordmark's "slov" is grey on light and white on dark, so the theme swaps the file, not a colour. Two reasons this is a background image and one of the few dark-mode overrides written by hand: - media queries cannot see [data-theme], which the theme toggle writes on ; - a relative url() in a custom property resolves against the sheet that *uses* the variable, not the one that declares it, so a token in variables.css would 404 from here. */ & .top-bar__logo-image { display: block; height: 1.75rem; aspect-ratio: 792 / 310; background-image: url("../../images/logo/logo-light-vxQdVJm.svg"); background-position: left center; background-repeat: no-repeat; background-size: contain; } @media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) & .top-bar__logo-image { background-image: url("../../images/logo/logo-dark-XgCSSX6.svg"); } } [data-theme="dark"] & .top-bar__logo-image { background-image: url("../../images/logo/logo-dark-XgCSSX6.svg"); } & .top-bar__actions { display: flex; align-items: center; gap: var(--space-1); } & .top-bar__menu { position: relative; display: flex; } & .top-bar__account { display: flex; padding: 0; border: none; background: none; border-radius: 50%; cursor: pointer; &:focus-visible { outline: 2px solid var(--color-secondary); outline-offset: 2px; } } & .top-bar__dropdown { position: absolute; top: calc(100% + var(--space-1)); right: 0; z-index: 10; /* Wide enough for its own labels, never wide enough to wrap them. */ min-width: max-content; margin: 0; padding: 0.25rem; list-style: none; background: var(--color-bg-elevated); border: 1px solid var(--color-border); border-radius: var(--radius-lg); box-shadow: var(--shadow-md); & a { display: block; padding: var(--space-1) var(--space-2); border-radius: var(--radius-sm); font-family: var(--font-ui); font-size: var(--text-body-md); line-height: 1.4; white-space: nowrap; color: var(--color-text); text-decoration: none; &:hover, &:focus-visible { background: var(--color-surface-container-high); color: var(--color-ink); } } /* Signing out is an exit, not one more page — a hair quieter. */ & li:last-child a { color: var(--color-text-muted); } /* The admin panel is somewhere else, not one more account page. A rule above it is enough to say so without a second colour. */ & .top-bar__admin { margin-top: 0.25rem; border-top: 1px solid var(--color-border); border-radius: 0; } } & .top-bar__theme-toggle { display: flex; align-items: center; justify-content: center; width: 2rem; height: 2rem; border-radius: var(--radius-full); font-size: 1rem; color: var(--color-text-muted); transition: background var(--transition-fast), color var(--transition-fast); &:hover { background: var(--color-bg-subtle); color: var(--color-text); } } } }