/* ============================================================ STUFLOVER SHARED NAV — STYLES Static stylesheet for the sl-top-nav / sl-bottom-tabs DOM injected by stuflover-nav.js. Linking this file in ensures nav styles apply before first paint (no flash of legacy nav, no nav rebuild on cross-document navigation). ============================================================ */ /* Cross-document view transitions: keep the nav visually stable when navigating between pages so it does not flash/rebuild. Supported in Chromium; older browsers ignore it harmlessly. */ @view-transition { navigation: auto; } ::view-transition-group(sl-top-nav), ::view-transition-group(sl-bottom-tabs) { animation-duration: 0ms; } ::view-transition-old(sl-top-nav), ::view-transition-new(sl-top-nav), ::view-transition-old(sl-bottom-tabs), ::view-transition-new(sl-bottom-tabs) { animation: none; mix-blend-mode: normal; } /* Hide legacy per-page nav immediately so it never flashes before sl-top-nav mounts. */ nav#mainNav, nav.sl-nav, .top-bar { display: none !important; } :root { --sl-nav-h: 60px; --sl-tabs-h: 62px; } body { padding-top: var(--sl-nav-h); } #sl-top-nav { position: fixed; top: 0; left: 0; right: 0; height: var(--sl-nav-h); display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 0 24px; z-index: 300; background: color-mix(in srgb, var(--sl-bg, #faf0f0) 92%, transparent); backdrop-filter: blur(18px) saturate(1.4); -webkit-backdrop-filter: blur(18px) saturate(1.4); border-bottom: 1px solid color-mix(in srgb, var(--sl-tx, #2a1a14) 12%, transparent); view-transition-name: sl-top-nav; } #sl-top-nav .sl-logo { font-family: "Barlow Condensed", sans-serif; font-weight: 900; font-size: 1.4rem; letter-spacing: 3px; text-transform: uppercase; color: var(--sl-tx, #2a1a14); text-decoration: none; white-space: nowrap; } #sl-top-nav .sl-left { display: flex; align-items: center; gap: 14px; min-width: 0; } #sl-top-nav .sl-back-chip { display: inline-flex; align-items: center; gap: 6px; padding: 7px 14px; border-radius: 999px; border: 1.5px solid color-mix(in srgb, var(--sl-tx, #2a1a14) 18%, transparent); font-family: "Barlow Condensed", sans-serif; font-weight: 800; font-size: 0.72rem; letter-spacing: 2px; text-transform: uppercase; color: var(--sl-tx, #2a1a14); text-decoration: none; white-space: nowrap; transition: border-color 180ms ease, background 180ms ease; } #sl-top-nav .sl-back-chip:hover { border-color: var(--sl-tx, #2a1a14); background: color-mix(in srgb, var(--sl-tx, #2a1a14) 6%, transparent); } #sl-top-nav .sl-tabs { display: flex; gap: 4px; flex-wrap: nowrap; } #sl-top-nav .sl-tab { display: inline-flex; align-items: center; gap: 8px; padding: 10px 18px; border-radius: 999px; font-family: "Barlow Condensed", sans-serif; font-weight: 800; font-size: 0.82rem; letter-spacing: 2.5px; text-transform: uppercase; color: var(--sl-tx, #2a1a14); text-decoration: none; white-space: nowrap; transition: background 180ms ease, color 180ms ease; } #sl-top-nav .sl-tab:hover { background: color-mix(in srgb, var(--sl-tx, #2a1a14) 8%, transparent); } #sl-top-nav .sl-tab.is-active { background: var(--sl-ac, #c87860); color: var(--sl-surface, #fff); } #sl-top-nav .sl-tab svg { width: 16px; height: 16px; flex-shrink: 0; } #sl-top-nav .sl-user { font-family: "Barlow Condensed", sans-serif; font-weight: 700; font-size: 0.72rem; letter-spacing: 2px; text-transform: uppercase; color: color-mix(in srgb, var(--sl-tx, #2a1a14) 60%, transparent); white-space: nowrap; max-width: 160px; overflow: hidden; text-overflow: ellipsis; } #sl-bottom-tabs { display: none !important; } /* Tablet / narrow desktop — drop the user greeting and tighten tab padding so tabs don't collide. */ @media (max-width: 999px) { #sl-top-nav .sl-user { display: none; } #sl-top-nav .sl-tab { padding: 9px 12px; letter-spacing: 1.5px; font-size: 0.78rem; gap: 6px; } #sl-top-nav .sl-tab svg { width: 15px; height: 15px; } } /* Mobile — keep tabs in the top bar so the nav stays at the top. */ @media (max-width: 760px) { #sl-top-nav { padding: 0 12px; gap: 8px; } #sl-top-nav .sl-logo { font-size: 1.15rem; letter-spacing: 1.8px; } #sl-top-nav .sl-tabs { gap: 2px; } #sl-top-nav .sl-tab { padding: 8px 10px; letter-spacing: 1px; font-size: 0.7rem; gap: 4px; } #sl-top-nav .sl-tab svg { width: 14px; height: 14px; } } /* Small phones — drop tab labels so all four tabs + logo fit. */ @media (max-width: 480px) { #sl-top-nav { padding: 0 10px; gap: 6px; } #sl-top-nav .sl-logo { font-size: 1.05rem; letter-spacing: 1.5px; } #sl-top-nav .sl-back-chip { padding: 6px 10px; font-size: 0.65rem; letter-spacing: 1.5px; } #sl-top-nav .sl-tab { padding: 8px; } #sl-top-nav .sl-tab span { display: none; } #sl-top-nav .sl-tab svg { width: 18px; height: 18px; } } /* Very small phones — shrink the logo further. */ @media (max-width: 360px) { #sl-top-nav .sl-logo { font-size: 0.95rem; letter-spacing: 1px; } #sl-top-nav .sl-tab { padding: 7px; } #sl-top-nav .sl-tab svg { width: 20px; height: 20px; } } /* Theme custom-override rules (formerly injected by stuflover-theme.js / stuflover-nav.js). Apply when the user has set a custom theme so per-page aesthetic palettes are overridden. */ html[data-sl-custom="on"] body { background-color: var(--sl-bg) !important; color: var(--sl-tx) !important; } html[data-sl-custom="on"] h1, html[data-sl-custom="on"] h2, html[data-sl-custom="on"] h3, html[data-sl-custom="on"] h4, html[data-sl-custom="on"] h5, html[data-sl-custom="on"] h6, html[data-sl-custom="on"] .bc, html[data-sl-custom="on"] .logo { color: var(--sl-tx) !important; } html[data-sl-custom="on"] a { color: var(--sl-ac); } html[data-sl-motion="off"] *, html[data-sl-motion="off"] *::before, html[data-sl-motion="off"] *::after { animation-duration: 0ms !important; animation-delay: 0ms !important; transition-duration: 0ms !important; transition-delay: 0ms !important; scroll-behavior: auto !important; } html[data-sl-texture="off"] body { background-image: none !important; }