/* _topbar.css — Shared site header partial. Loaded by every public page (index, strategies, fairhorizons, reflections, compare, horizon, glossary{,_term}, about, disclaimer, sheet, builder). Two-mode operation, controlled by CSS custom properties on : Default (index family — sticky on scroll, taller logo): --topbar-position : sticky --topbar-padding-y : 18px --topbar-logo-height : 56px --topbar-cta-padding : 11px 26px --topbar-cta-radius : 7px --topbar-cta-fontsize: 11.5px Sheet pages (non-sticky, compact, doesn't compete with the printable): body.page-sheet sets each var to a compact value (see below). All colour values reference the :root vars defined in horizons.css (--paper, --ink, --line, --brand-red, --font-sans), so this partial relies on horizons.css being loaded first. */ .topbar { background: var(--paper); border-bottom: 1px solid var(--line); position: var(--topbar-position, sticky); top: 0; z-index: 50; } .topbar.is-scrolled { box-shadow: 0 2px 12px rgba(0, 0, 0, 0.06); } .topbar-inner { max-width: 1320px; margin: 0 auto; padding: var(--topbar-padding-y, 18px) 32px; display: flex; justify-content: space-between; align-items: center; } .brand { display: flex; align-items: center; gap: 12px; color: var(--ink); font-weight: 600; letter-spacing: 0.06em; } .brand-logo { height: var(--topbar-logo-height, 56px); width: auto; display: block; } .topbar-right { display: flex; align-items: center; gap: 18px; } /* Main navigation — sits between logo and Contact Us. */ .topbar-nav { display: flex; align-items: center; gap: 28px; flex: 1; justify-content: center; } .topbar-nav a { color: var(--ink); text-decoration: none; font-family: var(--font-sans); font-size: 11.5px; font-weight: 500; letter-spacing: 0.05em; text-transform: uppercase; padding: 6px 2px; border-bottom: 2px solid transparent; transition: color 0.12s, border-color 0.12s; } .topbar-nav a:hover { color: var(--brand-red); } .topbar-nav a.is-current { color: var(--brand-red); border-bottom-color: var(--brand-red); } @media screen and (max-width: 1000px) { .topbar-nav { gap: 18px; } .topbar-nav a { font-size: 11px; letter-spacing: 0.04em; } } /* Mobile hamburger — pure CSS, no JS. Hidden checkbox + label + sibling- selector trick reveals .topbar-nav as a vertical drawer below 800px. */ .topbar-burger-toggle { display: none; } .topbar-burger { display: none; } @media screen and (max-width: 800px) { .topbar-inner { position: relative; flex-wrap: nowrap; /* Tighten the padding too — at 32px each side the mobile topbar wastes horizontal room that we now need for the three right-side elements (lang toggle, KONTAKT button, hamburger). */ padding: 10px 14px; gap: 10px; } /* Brand logo shrinks on mobile so it doesn't dwarf the burger + CTA on a 390px-wide phone. Desktop variable defaults to 56px. */ .brand-logo { height: 36px; } /* Flex order: brand → (gap) → lang toggle → KONTAKT → hamburger. The hamburger sits at the rightmost position so it lands directly under the user's thumb on a phone (the iOS / Android thumb-zone heuristic). `margin-left: auto` on topbar-right pushes the whole right cluster against the right edge; `order: 2` on the burger moves it past the right cluster in visual order. */ .brand { order: 0; flex-shrink: 0; } .topbar-right { order: 1; margin-left: auto; gap: 10px; } .topbar-burger { order: 2; display: inline-flex; flex-direction: column; justify-content: center; align-items: center; gap: 4px; width: 36px; height: 36px; margin-left: 0; margin-right: 0; cursor: pointer; background: transparent; border: 1px solid var(--line); border-radius: 6px; flex-shrink: 0; } .topbar-burger > span { display: block; width: 18px; height: 2px; background: var(--ink); border-radius: 1px; transition: transform 0.15s, opacity 0.15s; } .topbar-burger-toggle:checked ~ .topbar-burger > span:nth-child(1) { transform: translateY(6px) rotate(45deg); } .topbar-burger-toggle:checked ~ .topbar-burger > span:nth-child(2) { opacity: 0; } .topbar-burger-toggle:checked ~ .topbar-burger > span:nth-child(3) { transform: translateY(-6px) rotate(-45deg); } .topbar-nav { display: none; position: absolute; top: 100%; left: 0; right: 0; flex-direction: column; align-items: stretch; justify-content: flex-start; gap: 0; background: var(--paper); border-bottom: 1px solid var(--line); box-shadow: 0 8px 24px rgba(0, 0, 0, 0.08); padding: 8px 0; z-index: 49; } .topbar-burger-toggle:checked ~ .topbar-nav { display: flex; } .topbar-nav a { padding: 12px 32px; border-bottom: none; border-left: 3px solid transparent; font-size: 13px; letter-spacing: 0.06em; } .topbar-nav a:hover { background: var(--bg); } .topbar-nav a.is-current { border-left-color: var(--brand-red); } } /* EN / DE language toggle — a quiet two-state pill that sits left of the Contact Us button. Uses the same typography rhythm as the nav (uppercase, letter-spaced) but renders in the muted ink so it doesn't compete with the brand-red CTA. Active language gets a brand-red underline. */ .lang-toggle { display: inline-flex; align-items: baseline; gap: 6px; font-family: var(--font-sans); font-size: 11px; font-weight: 600; letter-spacing: 0.14em; text-transform: uppercase; user-select: none; } .lang-toggle a { color: #8b8b8b; text-decoration: none; padding: 2px 0; border-bottom: 2px solid transparent; transition: color 0.12s, border-color 0.12s; } .lang-toggle a:hover { color: var(--ink); } .lang-toggle a.is-active { color: var(--ink); border-bottom-color: var(--brand-red); } .lang-toggle .lang-sep { color: #c7c7c7; font-weight: 400; letter-spacing: 0; } @media screen and (max-width: 800px) { /* On mobile the toggle stays in the topbar (outside the hamburger drawer) so users can switch language without opening the menu. */ .lang-toggle { font-size: 10.5px; gap: 5px; } } @media print { .lang-toggle { display: none !important; } } /* Sheet pages: print is the canonical view, but on-screen the toggle should sit tight against the compact topbar without breaking the line height. */ body.page-sheet .lang-toggle { font-size: 10.5px; } /* CONTACT US button — solid brand-red rectangle, white uppercase text. */ .contact-btn { display: inline-block; padding: var(--topbar-cta-padding, 11px 26px); background: var(--brand-red); color: #ffffff; font-family: var(--font-sans); font-size: var(--topbar-cta-fontsize, 11.5px); font-weight: 700; letter-spacing: 0.14em; text-transform: uppercase; text-decoration: none; border-radius: var(--topbar-cta-radius, 7px); box-shadow: 0 2px 4px rgba(var(--brand-red-rgb), 0.18); transition: background-color 0.12s, transform 0.06s; } .contact-btn:hover { background: var(--brand-red-hover); } .contact-btn:active { transform: translateY(1px); } /* CTA banner variant (cream gradient) — invert button so it reads on warm bg. */ .cta-banner .contact-btn { background: #ffffff; color: var(--brand-red); border: 1.5px solid var(--brand-red); box-shadow: none; } .cta-banner .contact-btn:hover { background: var(--brand-red); color: #ffffff; } /* Sheet pages hide the topbar in print so the printable two-pager is the sole content of the PDF output. */ @media print { body.page-sheet .topbar { display: none !important; } } /* Sheet-page variant: non-sticky, compact logo + button. */ body.page-sheet { --topbar-position : static; --topbar-padding-y : 8px; --topbar-logo-height : 36px; --topbar-cta-padding : 8px 20px; --topbar-cta-radius : 6px; --topbar-cta-fontsize: 11px; }