/* * Pultz Core: fast kontaktbjælke i bunden på mobil. Tematiseres med custom properties: * * --pultz-bar-bg bjælkens baggrund (standard: --pultz-surface) * --pultz-bar-ink tekst og ikoner (standard: --pultz-ink) * --pultz-line skillelinjer * --pultz-brand baggrund på den primære knap (Book) * --pultz-brand-ink tekst på den primære knap * * Bjælken vises kun under 48em. Siden får klassen "has-pultz-bar" på , når bjælken er med. */ .pultz-bar { display: none; } @media (max-width: 47.99em) { .pultz-bar { --_bg: var(--pultz-bar-bg, var(--pultz-surface, #ffffff)); --_text: var(--pultz-bar-ink, var(--pultz-ink, #1f1f1f)); --_border: var(--pultz-line, rgba(0, 0, 0, 0.2)); background: var(--_bg); border-top: 1px solid var(--_border); bottom: 0; box-shadow: 0 -4px 16px rgba(0, 0, 0, 0.08); box-sizing: border-box; color: var(--_text); display: grid; font-family: var(--pultz-font, inherit); grid-auto-columns: 1fr; grid-auto-flow: column; left: 0; padding-bottom: env(safe-area-inset-bottom, 0); position: fixed; right: 0; z-index: 900; } .pultz-bar__link { align-items: center; border-left: 1px solid var(--_border); box-sizing: border-box; color: inherit; display: flex; font-size: 0.9375rem; font-weight: 700; gap: 0.45rem; justify-content: center; line-height: 1.2; min-height: 3.5rem; padding: 0.5rem 0.75rem; text-decoration: none; } .pultz-bar__link:first-child { border-left: 0; } .pultz-bar__link--book { background: var(--pultz-brand, #1f1f1f); border-left-color: transparent; color: var(--pultz-brand-ink, #ffffff); } .pultz-bar__link:focus-visible { outline: 3px solid var(--pultz-focus, currentColor); outline-offset: -3px; } .pultz-bar__icon { flex: none; } .pultz-bar.is-hidden { transform: translateY(110%); visibility: hidden; } /* Plads til bjælken, så den ikke dækker sidefoden. */ body.has-pultz-bar { padding-bottom: calc(3.5rem + env(safe-area-inset-bottom, 0px)); } } @media (max-width: 47.99em) and (prefers-reduced-motion: no-preference) { .pultz-bar { transition: transform 0.2s ease, visibility 0.2s ease; } } @media print { .pultz-bar { display: none !important; } }