#wpadminbar { /* display: none; */ } .header-button__right.filled__button { padding: 12px 39px 12px 16px; position: relative; } .header-button__right::after { content: ""; position: absolute; right: 16px; top: 50%; transform: translateY(-50%); width: 15px; height: 15px; background-image: url("../icons/login.svg"); background-repeat: no-repeat; background-size: contain; background-position: center; } .header-wrapper { display: flex; align-items: center; } .header-wrapper > div { flex: 1; } .header-wrapper > nav { flex: 3; } .main-navigation { justify-content: center; display: flex; } .header-right { display: flex; justify-content: flex-end; } /* Desktop nav link styling now lives in mega-menu.css (.oda-nav / .oda-mega / * .oda-drop). The old `.main-navigation a` + `.menu-item-has-children > a::after` * rules were removed: `.main-navigation a` (0,1,1) was overriding every link in * the custom mega/dropdown, and the ::after arrow is replaced by an inline SVG. */ .site-logo { display: flex; align-items: center; max-width: 132px; } .site-logo img { width: 100%; object-fit: contain; } /* ---- Logo size ---- The logo file is a clean vector (34 paths, artwork fills 99% of its viewBox), so it is never blurry because of the file — it is blurry because of how small it is drawn. Measured at 132px wide: "OdA" renders 10px tall, but "Gesundheit und Soziales" only 4px and "Graubünden" 3px. A 3px letter has strokes thinner than a pixel, so anti-aliasing turns them into a red smudge. No SVG can fix that; only more pixels can. 150px is the compromise: enough to lift the wordmark off 4px, small enough that the header grows by 7px instead of 20px (180px made it too big on the page). The wrapper is in the selector on purpose (0,2,1): it has to outrank `.site-logo img` (0,1,1) in the Customizer's Additional CSS, which pins the logo to 132px and, being inline in , would otherwise win on source order. */ .site-logo-wrapper .site-logo { max-width: 150px; } .site-logo-wrapper .site-logo img { min-width: 150px; max-width: 150px; } .site-header { padding: 20px 0; background: #fff; border-bottom: 1px solid #e6e4e0; /* Fixed (not sticky): an ancestor (#page) has overflow-x:hidden, which disables position:sticky. Content is offset below by the header height. */ position: fixed; top: 0; left: 0; right: 0; z-index: 100; } /* OdADocAI (Foundry Agent Chat): a collapsed floating launcher instead of a 760px panel floating over page content. Hidden until the bubble is clicked. !important + top/left:auto override the inline position the plugin sets. */ .foundry-agent-chat { position: fixed !important; top: auto !important; left: auto !important; bottom: 90px !important; right: 20px !important; width: 380px !important; max-width: calc(100vw - 32px) !important; max-height: min(560px, 74vh); overflow: hidden; background: #fff !important; border: 1px solid #e6e4e0 !important; border-radius: 14px !important; box-shadow: 0 14px 44px rgba(15, 15, 16, 0.20); z-index: 99999 !important; display: none !important; } body.fac-open .foundry-agent-chat { display: flex !important; } /* Floating launcher bubble (bottom-right). */ .oda-fac-fab { position: fixed; bottom: 20px; right: 20px; width: 56px; height: 56px; padding: 0; border: 0; border-radius: 50%; background: #cc0000; color: #fff; cursor: pointer; z-index: 100000; display: inline-flex; align-items: center; justify-content: center; box-shadow: 0 6px 20px rgba(204, 0, 0, 0.35); } .oda-fac-fab svg { width: 26px; height: 26px; } @media (max-width: 782px) { .foundry-agent-chat { width: calc(100vw - 24px) !important; right: 12px !important; bottom: 82px !important; } .oda-fac-fab { bottom: 16px; right: 16px; } } /* Push page content below the fixed header. The number is not free-standing — it is the header's real height, so it has to be recomputed whenever the logo size changes: 20px padding + logo + 20px padding + 1px border. At the logo's 132:54 ratio a 150px logo is 61.4px tall, so 20 + 61.4 + 20 + 1 = 102px. (It was 95px for a 132px logo, which is where that number came from.) */ #page { padding-top: 102px; } /* Keep the fixed header below the WP admin bar when logged in. */ .admin-bar .site-header { top: 32px; } @media screen and (max-width: 782px) { .admin-bar .site-header { top: 46px; } } /* ===================================================================== * * Mobile hamburger + slide-in drawer (Figma "Hamb menu" 650:1115). * Drawer: 340px wide, #fff, left-side shadow, slides in from the right. * ===================================================================== */ .oda-burger { display: none; } .oda-mmenu { display: none; } @media (max-width: 991px) { /* Swap the desktop nav + login button for the hamburger. */ .main-navigation, .header-right .header-button__right { display: none; } .oda-burger { display: inline-flex; flex-direction: column; justify-content: center; gap: 5px; width: 42px; height: 42px; padding: 0 11px; border: 0; background: none; cursor: pointer; } .oda-burger span { display: block; width: 20px; height: 2px; border-radius: 999px; background: #0f0f10; } /* Drawer container (overlay + panel). */ .oda-mmenu { display: block; position: fixed; inset: 0; z-index: 1000; } .oda-mmenu[hidden] { display: none; } .oda-mmenu__overlay { position: absolute; inset: 0; background: rgba(15, 15, 16, 0.4); opacity: 0; transition: opacity 0.3s ease; } .oda-mmenu__panel { position: absolute; top: 0; right: 0; height: 100%; height: 100dvh; width: 100%; display: flex; flex-direction: column; background: #fff; box-shadow: -16px 0 48px 0 rgba(15, 15, 16, 0.15); transform: translateX(100%); transition: transform 0.3s ease; overflow-y: auto; } .oda-mmenu.is-open .oda-mmenu__overlay { opacity: 1; } .oda-mmenu.is-open .oda-mmenu__panel { transform: translateX(0); } /* Head: logo + close. */ .oda-mmenu__head { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 15px; border-bottom: 1px solid #e6e4e0; } .oda-mmenu__logo { display: block; max-width: 132px; } .oda-mmenu__logo img { width: 100%; object-fit: contain; } .oda-mmenu__close { flex: none; display: inline-flex; align-items: center; justify-content: center; width: 48px; height: 48px; padding: 0; border: 1px solid #e6e4e0; border-radius: 10px; background: #fff; cursor: pointer; } /* Nav list. */ .oda-mmenu__list { list-style: none; margin: 0; padding: 0; } .oda-mmenu__list > li { position: relative; } .oda-mmenu__list > li > a { display: block; /* Figma 650:1157 rows: pt-15 pb-16, line-height 22.5 → ~53px tall. Border stays full-width (edge to edge); text inset ~20px. */ padding: 15px 20px 16px; font-size: 15px; font-weight: 600; line-height: 22.5px; letter-spacing: -0.08px; color: #0f0f10; text-decoration: none; border-bottom: 1px solid #efeeec; } /* Suppress the desktop dropdown-arrow (::after) inside the drawer — the accordion uses its own injected chevron toggle instead. */ .oda-mmenu__list .menu-item-has-children > a::after { display: none; } /* Submenu toggle (chevron), injected by JS for items with children. */ .oda-mmenu__toggle { position: absolute; top: 0; right: 0; width: 48px; height: 100%; display: inline-flex; align-items: center; justify-content: center; padding: 0; border: 0; background: none; cursor: pointer; } .oda-mmenu__toggle svg { transition: transform 0.25s ease; } .oda-mmenu__list > li.is-open > .oda-mmenu__toggle svg { transform: rotate(180deg); } .oda-mmenu__list .sub-menu { list-style: none; margin: 0; padding: 0; max-height: 0; overflow: hidden; background: #f9f8f7; transition: max-height 0.3s ease; } .oda-mmenu__list > li.is-open > .sub-menu { max-height: 600px; } .oda-mmenu__list .sub-menu a { display: block; padding: 13px 24px; font-size: 16px; font-weight: 500; letter-spacing: -0.08px; color: #424248; text-decoration: none; } /* Foot: pinned to the bottom — Login + phone + email (Figma 650:1179: bg #f4f4f3, top border, pt-21 pb-20 px-20, gap-16). */ .oda-mmenu__foot { margin-top: auto; display: flex; flex-direction: column; align-items: stretch; gap: 16px; padding: 21px 20px 20px; background: #f4f4f3; border-top: 1px solid #e6e4e0; } /* Login: full-width red pill (Figma 650:1180 — w-full, px-18 py-14, 14px bold). display:flex + center so the label + arrow are truly centered (the base .filled__button computes to block here, which left-aligns the text). */ .oda-mmenu__login.filled__button { display: flex; align-items: center; justify-content: center; width: 100%; gap: 8px; padding: 14px 18px; font-size: 14px; font-weight: 700; text-align: center; } .oda-mmenu__contacts { display: flex; flex-direction: column; align-items: center; gap: 6px; } .oda-mmenu__contact { color: #424248; font-size: 13.5px; font-weight: 500; letter-spacing: -0.08px; text-decoration: none; } body.oda-mmenu-open { overflow: hidden; } /* Hide the floating chat bubble while the drawer is open (drawer is a modal). */ body.oda-mmenu-open .oda-fac-fab { display: none; } }