/* Shared header + footer for the content pages (home-style chrome). Self-contained: transparent backgrounds inherit each page's body colour, so it blends whether or not the page also loads shared.css. Dark mode via body.dark-mode. */ /* On pages whose is a centered flex column (shared.css), stretch the bar to full width instead of shrinking to its content. Harmless on normal-flow bodies. */ .site, .site-foot { align-self: stretch; width: 100%; } .site { background: transparent; border-bottom: 1px solid #e7e5e4; position: relative; } .site-in { display: flex; align-items: center; justify-content: space-between; gap: 12px; height: 60px; max-width: 1080px; margin: 0 auto; padding: 0 24px; } .site .brand { display: flex; align-items: baseline; gap: 10px; text-decoration: none; color: #1c1917; flex: 0 1 auto; min-width: 0; } .site .brand b { font-weight: 800; font-size: 17px; letter-spacing: -.01em; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .site .brand .since { font-size: 12px; color: #6b6560; font-weight: 600; } .site-nav { display: flex; align-items: center; gap: 4px; } .site-nav a { text-decoration: none; color: #6b6560; font-weight: 600; font-size: 14px; padding: 7px 12px; border-radius: 8px; white-space: nowrap; } .site-nav a:hover { color: #1c1917; background: rgba(0,0,0,.05); } .site-actions { display: flex; align-items: center; gap: 8px; flex: 0 0 auto; } .site .toggle { border: 1px solid #e7e5e4; background: #fff; width: 36px; height: 36px; border-radius: 8px; cursor: pointer; font-size: 15px; line-height: 1; } /* Hamburger — hidden on desktop, shown on narrow screens */ .site .nav-toggle { display: none; align-items: center; justify-content: center; border: 1px solid #e7e5e4; background: #fff; color: #1c1917; width: 36px; height: 36px; border-radius: 8px; cursor: pointer; padding: 0; } body.dark-mode .site .nav-toggle { background: #242120; border-color: #3a3633; color: #f5f5f4; } /* Login / signed-in control in the shared nav. Self-contained so it works whether or not the page also loads shared.css. Populated by firebase-config.js updateUIForAuth(). */ .site-actions .btn-login { display: inline-flex; align-items: center; gap: 7px; height: 36px; padding: 0 12px; border: 1px solid #e7e5e4; background: #fff; color: #1c1917; border-radius: 8px; cursor: pointer; font-weight: 600; font-size: 13.5px; line-height: 1; transition: background .15s, border-color .15s; white-space: nowrap; } .site-actions .btn-login:hover { background: rgba(0,0,0,.05); border-color: #d6d3d1; } .site-actions .btn-login svg { width: 16px; height: 16px; flex: 0 0 auto; } .site-actions .btn-login-avatar { width: 22px; height: 22px; border-radius: 50%; object-fit: cover; flex: 0 0 auto; } .site-actions .btn-login-initial { display: inline-flex; align-items: center; justify-content: center; background: #0d9488; color: #fff; font-weight: 700; font-size: 11px; line-height: 1; } body.dark-mode .site-actions .btn-login { background: #242120; border-color: #3a3633; color: #f5f5f4; } body.dark-mode .site-actions .btn-login:hover { background: rgba(255,255,255,.07); border-color: #4a4642; } /* Narrow screens: keep the avatar, drop the name to save room */ @media (max-width: 560px) { .site-actions .btn-login .btn-login-name { display: none; } .site-actions .btn-login { padding: 0 8px; } } /* ---- Mobile nav: collapse the links behind the hamburger ---- */ @media (max-width: 720px) { .site .nav-toggle { display: inline-flex; } .site-nav { position: absolute; top: 60px; left: 0; right: 0; z-index: 60; flex-direction: column; align-items: stretch; gap: 2px; padding: 8px; background: #fff; border-bottom: 1px solid #e7e5e4; box-shadow: 0 12px 24px rgba(0,0,0,.08); /* collapsed by default */ display: none; } .site-nav.open { display: flex; } .site-nav a { padding: 12px 14px; font-size: 15px; border-radius: 10px; } body.dark-mode .site-nav { background: #1a1817; border-color: #3a3633; box-shadow: 0 12px 24px rgba(0,0,0,.4); } } /* Small phones: slim the brand so the bar never overflows. (This is what caused the wrapped name + horizontal scroll before.) */ @media (max-width: 560px) { .site-in { padding: 0 16px; gap: 8px; } .site .brand .since { display: none; } .site .brand b { font-size: 15px; } .site-actions { gap: 6px; } } @media (max-width: 360px) { .site .brand b { font-size: 13.5px; } } .site-foot { background: transparent; border-top: 1px solid #e7e5e4; margin-top: 40px; padding: 22px 24px 40px; } .site-foot-popular { margin-bottom: 14px; padding-bottom: 14px; border-bottom: 1px solid #efedec; } .site-foot-label { font-size: 11px; font-weight: 800; text-transform: uppercase; letter-spacing: .06em; color: #a8a29e; } body.dark-mode .site-foot-popular { border-color: #3a3633; } .site-foot-in { display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: 12px; max-width: 1080px; margin: 0 auto; color: #6b6560; font-size: 13.5px; } .site-foot-links { display: flex; gap: 16px; flex-wrap: wrap; } .site-foot a { color: #6b6560; text-decoration: none; } .site-foot a:hover { color: #1c1917; } /* Dark mode */ body.dark-mode .site { border-color: #3a3633; } body.dark-mode .site .brand { color: #f5f5f4; } body.dark-mode .site .brand .since, body.dark-mode .site-nav a, body.dark-mode .site-foot-in, body.dark-mode .site-foot a { color: #a8a29e; } body.dark-mode .site-nav a:hover { color: #f5f5f4; background: rgba(255,255,255,.07); } body.dark-mode .site-foot a:hover { color: #f5f5f4; } body.dark-mode .site .toggle { background: #242120; border-color: #3a3633; color: #f5f5f4; } body.dark-mode .site-foot { border-color: #3a3633; } /* --- Keyboard accessibility: skip link + visible focus for the shared chrome --- */ .skip-link { position: absolute; left: -9999px; top: 0; z-index: 1000; background: #0d9488; color: #fff; font-weight: 600; padding: 10px 16px; border-radius: 0 0 10px 0; text-decoration: none; } .skip-link:focus { left: 0; } .site-nav a:focus-visible, .site .toggle:focus-visible, .site .brand:focus-visible, .site .nav-toggle:focus-visible, .site-actions .btn-login:focus-visible, .site-foot a:focus-visible { outline: 2px solid #0d9488; outline-offset: 2px; }