/* Shared sticky icon bar. Included on every page so navigation is always reachable without the back button. Class names are namespaced (.site-bar) because pages reuse generic names such as .header and .logo for their own hero sections. Sizes are in px so the bar looks identical regardless of each page's root font size. */ .site-bar { position: sticky; top: 0; z-index: 1000; /* Some pages pad to create page gutters; those stylesheets expose the value as --page-gutter so the bar can break out and stay edge to edge. */ margin: calc(var(--page-gutter, 0px) * -1) calc(var(--page-gutter, 0px) * -1) var(--page-gutter, 0px); background-color: #fffaf2; border-bottom: 3px solid #f1a868; box-shadow: 0 2px 12px rgba(0, 0, 0, 0.08); font-family: "Rubik", "Lato", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif; display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px; padding: 8px 20px; } .site-bar__brand { display: flex; align-items: center; gap: 12px; min-width: 0; } .site-bar__logo-link { display: flex; align-items: center; gap: 12px; text-decoration: none; min-width: 0; } .site-bar__logo { width: 44px; height: 44px; border-radius: 50%; flex-shrink: 0; box-shadow: 0 2px 8px rgba(241, 168, 104, 0.35); } .site-bar__name { font-size: 18px; font-weight: 700; letter-spacing: 0.4px; color: #2c4ea8; white-space: nowrap; } .site-bar__nav { margin-left: auto; } .site-bar__list { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; align-items: center; gap: 4px; } .site-bar__link { display: inline-flex; align-items: center; gap: 6px; padding: 8px 12px; border-radius: 999px; text-decoration: none; color: #3a2a1a; font-size: 14px; font-weight: 500; line-height: 1; white-space: nowrap; transition: background-color 0.25s ease, color 0.25s ease, transform 0.2s ease; } .site-bar__link ion-icon { font-size: 20px; flex-shrink: 0; } .site-bar__link:hover, .site-bar__link:focus-visible { background-color: #f1a868; color: #fff; transform: translateY(-1px); } .site-bar__link--active { background-color: #2c4ea8; color: #fff; } /* CSS-only mobile menu — no JavaScript needed */ .site-bar__toggle { position: absolute; opacity: 0; pointer-events: none; } .site-bar__toggle-btn { display: none; align-items: center; justify-content: center; width: 42px; height: 42px; border-radius: 8px; cursor: pointer; color: #2c4ea8; font-size: 30px; } .site-bar__toggle:focus-visible ~ .site-bar__brand .site-bar__toggle-btn { outline: 2px solid #2c4ea8; outline-offset: 2px; } .site-bar__toggle-btn .site-bar__icon-close { display: none; } .site-bar__toggle:checked ~ .site-bar__brand .site-bar__toggle-btn .site-bar__icon-open { display: none; } .site-bar__toggle:checked ~ .site-bar__brand .site-bar__toggle-btn .site-bar__icon-close { display: inline-block; } @media (max-width: 900px) { .site-bar__name { font-size: 15px; white-space: normal; } .site-bar__link { font-size: 13px; padding: 7px 9px; } } @media (max-width: 760px) { .site-bar { padding: 8px 14px; } .site-bar__brand { width: 100%; justify-content: space-between; } .site-bar__toggle-btn { display: inline-flex; } .site-bar__nav { width: 100%; margin-left: 0; max-height: 0; overflow: hidden; transition: max-height 0.35s ease; } .site-bar__toggle:checked ~ .site-bar__nav { max-height: 640px; } .site-bar__list { flex-direction: column; gap: 0; padding: 6px 0 4px; } .site-bar__list li { width: 100%; } .site-bar__link { width: 100%; border-radius: 6px; font-size: 15px; padding: 12px 10px; } }