/* * The ONE SSR topbar's stylesheet (templates/fragments/site-topbar.html), linked by every * Thymeleaf page — blog, templates, events — at /site-assets/site-topbar.css (WebConfig serves * classpath:/site-chrome/, the same directory the shared footer's sheet is packed into). The * React public pages keep their own LandingTopBar: two topbars by decision (2026-09-22), one * per renderer, never one per page. * * ONE palette, shared with the SPA: every --st-* value equals the matching --color-* token in * frontend/src/index.css (`:root` = the light `@theme` block, `html.dark` = the `.dark` block). * DesignTokenParityTest reads this file and compares each value against index.css, so a * hand-tuned colour here is a red run. The theme itself is picked by the anti-flash script each * page carries in (localStorage["litmemo-theme"] → OS preference → dark). */ :root { color-scheme: light; --st-bg: #faf8f5; /* background */ --st-fg: #1a1a1a; /* foreground */ --st-muted: #6b6159; /* muted-foreground */ --st-primary: #7d6340; /* primary */ --st-primary-fg: #ffffff; /* primary-foreground */ --st-border: #9e8e7e; /* border */ --st-card: #ffffff; /* card — the bar's translucent surface, the dropdowns */ --st-font: "Swei Spring Sugar", "Noto Sans TC", "PingFang TC", "Microsoft JhengHei", system-ui, sans-serif; } html.dark { color-scheme: dark; --st-bg: #0f0d0a; --st-fg: #e8e0d4; --st-muted: #978b7b; --st-primary: #c4a574; --st-primary-fg: #0f0d0a; --st-border: #504536; --st-card: #1a1610; } html[lang="ja"] { --st-font: "Swei Spring Sugar JP", "Hiragino Maru Gothic ProN", "Hiragino Sans", "Noto Sans JP", "Yu Gothic UI", system-ui, sans-serif; } html[lang="zh-Hans"] { --st-font: "Swei Spring Sugar SC", "Noto Sans SC", "PingFang SC", "Microsoft YaHei", system-ui, sans-serif; } /* ---- The bar: sticky, translucent card surface so the page shows through the blur ---- */ .st-topbar { position: sticky; top: 0; z-index: 50; font-family: var(--st-font); border-bottom: 1px solid var(--st-border); background: var(--st-card); background: color-mix(in srgb, var(--st-card) 85%, transparent); backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); } /* Logo on the LEFT, every action in ONE group on the RIGHT. Not space-between: with three children that strands the lone CTA midway on a phone; the auto margin on .st-nav parks all the leftover between the logo and the actions instead. */ .st-inner { display: flex; align-items: center; gap: 0.75rem; height: 3.5rem; max-width: 72rem; margin: 0 auto; padding: 0 1.25rem; } .st-logo { display: flex; align-items: center; gap: 0.375rem; min-width: 0; font-size: 1.25rem; font-weight: 700; letter-spacing: 0.02em; color: var(--st-primary); text-decoration: none; white-space: nowrap; } .st-logo:hover { opacity: 0.85; } .st-logo-img { height: 1.5rem; width: auto; } .st-nav { display: flex; align-items: center; gap: 1.25rem; margin-left: auto; } .st-link { font: inherit; font-size: 0.875rem; color: var(--st-muted); text-decoration: none; background: none; border: none; padding: 0; margin: 0; cursor: pointer; transition: color 0.15s; } .st-link:hover, .st-link.is-active { color: var(--st-primary); } .st-cta { display: inline-block; padding: 0.375rem 1rem; border-radius: 0.375rem; white-space: nowrap; font-size: 0.875rem; font-weight: 500; text-decoration: none; background: var(--st-primary); color: var(--st-primary-fg); } /* Hover darkens whatever primary is (brown in light, tan in dark) instead of a second hex. */ .st-cta:hover { filter: brightness(0.9); } .st-link:focus-visible, .st-cta:focus-visible, .st-burger:focus-visible, .st-lang > summary:focus-visible { outline: 2px solid var(--st-primary); outline-offset: 2px; } /* ---- Hamburger (phones only) ---- */ .st-burger { display: none; align-items: center; justify-content: center; width: 2.25rem; height: 2.25rem; background: none; border: none; padding: 0; cursor: pointer; color: var(--st-muted); } .st-burger:hover { color: var(--st-primary); } .st-burger svg { width: 1.375rem; height: 1.375rem; } /* ---- The phone menu: a column under the bar, opened by the burger (data-topbar-menu.is-open) ---- */ .st-menu { display: none; flex-direction: column; gap: 0.25rem; padding: 0.75rem 1.25rem 1rem; border-top: 1px solid var(--st-border); background: var(--st-card); background: color-mix(in srgb, var(--st-card) 95%, transparent); } .st-menu .st-link { display: block; padding: 0.5rem 0; text-align: left; width: 100%; } .st-menu .st-cta { display: block; text-align: center; margin-top: 0.375rem; } /* ---- Language switcher: a pure-CSS
. Desktop = globe + chevron with an absolute dropdown; in the phone menu = an inline accordion. ---- */ .st-lang > summary { list-style: none; cursor: pointer; display: inline-flex; align-items: center; gap: 0.3rem; font-size: 0.875rem; color: var(--st-muted); transition: color 0.15s; } .st-lang > summary::-webkit-details-marker { display: none; } .st-lang > summary::marker { content: ""; } .st-lang > summary:hover { color: var(--st-primary); } .st-lang-globe { width: 1.05rem; height: 1.05rem; flex-shrink: 0; } .st-lang-chevron { width: 0.8rem; height: 0.8rem; flex-shrink: 0; transition: transform 0.2s; } .st-lang[open] .st-lang-chevron { transform: rotate(180deg); } .st-lang-menu a { display: block; font-size: 0.875rem; color: var(--st-muted); text-decoration: none; transition: color 0.15s; } .st-lang-menu a:hover { color: var(--st-primary); } .st-lang-menu a[aria-current="true"] { color: var(--st-primary); font-weight: 600; } .st-nav .st-lang { position: relative; display: inline-flex; align-items: center; } .st-nav .st-lang-current { display: none; } .st-nav .st-lang-menu { position: absolute; top: calc(100% + 0.6rem); right: 0; min-width: 9rem; padding: 0.35rem 0; display: flex; flex-direction: column; background: var(--st-card); border: 1px solid var(--st-border); border-radius: 0.5rem; box-shadow: 0 8px 24px rgba(0, 0, 0, 0.14); } .st-nav .st-lang-menu a { padding: 0.5rem 1rem; } .st-menu .st-lang { display: block; } .st-menu .st-lang > summary { padding: 0.5rem 0; } .st-menu .st-lang-menu { display: flex; flex-direction: column; gap: 0.1rem; padding-left: 1.5rem; margin-top: 0.1rem; } .st-menu .st-lang-menu a { padding: 0.4rem 0; } /* ---- Light / dark toggle. Both glyphs are in the markup; html.dark decides which shows (the one for the theme a click switches TO), so the icon is right before any script runs. ---- */ .st-theme-toggle { display: inline-flex; align-items: center; gap: 0.35rem; text-align: left; } .st-theme-toggle svg { width: 1.05rem; height: 1.05rem; flex-shrink: 0; } .st-theme-sun { display: none; } html.dark .st-theme-sun { display: inline-block; } html.dark .st-theme-moon { display: none; } .st-nav .st-theme-label { display: none; } .st-menu .st-theme-toggle { display: flex; } /* ---- Below 768px: the row keeps only the CTA beside the burger; everything else moves into the menu. Measured 2026-09-22: at 640–767px the ja row (four links, globe, toggle, CTA) needs about 680px of a 640px viewport, so the collapse is at 768 and not the blog's old 640. ---- */ @media (max-width: 767px) { .st-nav { gap: 0.5rem; } .st-nav > *:not(.st-cta) { display: none; } .st-burger { display: flex; } .st-menu.is-open { display: flex; } .st-cta { font-size: 0.8125rem; padding: 0.3rem 0.75rem; } .st-logo-img { height: 1.25rem; } } /* ≤360px: the CTA gives up width so the full wordmark still fits — the brand rule forbids a truncated "LitMem", so the button shrinks, not the logo. */ @media (max-width: 360px) { .st-cta { font-size: 0.75rem; padding: 0.25rem 0.5rem; } .st-logo { font-size: 1.125rem; } .st-logo-img { height: 1.125rem; } } @media (prefers-reduced-motion: reduce) { .st-link, .st-lang > summary, .st-lang-menu a, .st-lang-chevron { transition: none; } }