/* 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; } .site-in { display: flex; align-items: center; justify-content: space-between; 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; } .site .brand b { font-weight: 800; font-size: 17px; letter-spacing: -.01em; } .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; } .site-nav a:hover { color: #1c1917; background: rgba(0,0,0,.05); } .site .toggle { border: 1px solid #e7e5e4; background: #fff; width: 36px; height: 36px; border-radius: 8px; cursor: pointer; font-size: 15px; line-height: 1; } .site-foot { background: transparent; border-top: 1px solid #e7e5e4; margin-top: 40px; padding: 22px 24px 40px; } .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; } @media (max-width: 560px) { .site-nav a.hide-sm { display: none; } }