/** * Default marketing / landing theme — floating sticky navbar. * Loaded from public/ so it always deploys with the site (independent of extra/extensions). * Relies on --color-* variables from @theme/snippets/css.twig (injected earlier in ). */ .landing-nav-shell { position: sticky; top: 0; z-index: 100; pointer-events: none; overflow: visible; padding: 0.75rem 0.75rem 0.5rem; } @media (min-width: 640px) { .landing-nav-shell { padding: 1rem 1.5rem 0.75rem; } } @media (min-width: 768px) { .landing-nav-shell { padding-left: 2.5rem; padding-right: 2.5rem; } } .landing-nav-bar { pointer-events: auto; box-sizing: border-box; margin-left: auto; margin-right: auto; max-width: 72rem; width: 100%; display: flex; flex-wrap: wrap; align-items: center; gap: 1rem; overflow: visible; border-radius: 0.875rem; /* Visibly different from page bg (contrast-primary) */ border: 1px solid rgb(var(--color-line-primary) / 0.28); background: rgb(var(--color-contrast-secondary) / 1); box-shadow: 0 14px 44px -12px rgba(15, 23, 42, 0.14), 0 4px 14px -6px rgba(15, 23, 42, 0.08); padding: 0.5rem 1rem; -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px); } @media (min-width: 640px) { .landing-nav-bar { gap: 1.15rem; padding: 0.55rem 1.35rem; } } @media (min-width: 1024px) { .landing-nav-bar { gap: 2.25rem; padding: 0.55rem 1.75rem; } } :root[data-mode="dark"] .landing-nav-bar, html[data-mode="dark"] .landing-nav-bar { background: rgb(48 52 58); border-color: rgba(255, 255, 255, 0.18); box-shadow: 0 18px 50px -12px rgba(0, 0, 0, 0.65), 0 6px 20px -8px rgba(0, 0, 0, 0.4); } /* * Theme header toggles data-open on the .group wrapper; dropdown is a direct child .context-menu. * Without this, language/user panels stay display:none (theme CSS expects data-open on the menu node). */ .landing-nav-bar .group { position: relative; } .landing-nav-bar .group > .context-menu { display: none; position: absolute; top: 100%; margin-top: 0.25rem; inset-inline-end: 0; z-index: 70; box-sizing: border-box; border-radius: 0.5rem; border: 1px solid rgb(var(--color-line-primary) / 0.35); background: rgb(var(--color-contrast-secondary) / 1); box-shadow: 0 4px 6px -2px rgba(0, 0, 9, 0.04), 0 12px 16px -4px rgba(0, 0, 9, 0.08); } .landing-nav-bar .group[data-open] > .context-menu { display: block; } /* Same visible size as theme mode / language circles (theme CSS was shrinking the profile control). */ .landing-nav-bar .metudo-nav-actions { row-gap: 0.35rem; } .landing-nav-bar .metudo-nav-tray { display: flex; flex-flow: row nowrap; align-items: center; flex-shrink: 0; } .landing-nav-bar .metudo-nav-tray > mode-switcher { display: flex; flex-shrink: 0; } .landing-nav-bar .metudo-nav-tray mode-switcher > button, .landing-nav-bar button.metudo-nav-icon-btn { width: 2.5rem !important; height: 2.5rem !important; min-width: 2.5rem !important; min-height: 2.5rem !important; max-width: 2.5rem !important; max-height: 2.5rem !important; padding: 0 !important; box-sizing: border-box; flex-shrink: 0; border-radius: 9999px; } .landing-nav-bar button.metudo-nav-profile-btn { width: 2.3125rem !important; height: 2.3125rem !important; min-width: 2.3125rem !important; min-height: 2.3125rem !important; max-width: 2.3125rem !important; max-height: 2.3125rem !important; padding: 0 !important; margin: 0 !important; border: 0; box-sizing: border-box; flex-shrink: 0; border-radius: 9999px; cursor: pointer; position: relative; overflow: hidden; } .landing-nav-bar button.metudo-nav-profile-btn > img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; border-radius: 9999px; display: block; }