/* * Consultation banner + cookie banner styles. * * Desktop (>1024px): banner sits in the content flow after the title. * When its top reaches the top of the viewport on scroll-down, * assets/banner.js adds .is-pinned → compact card fixed to the RIGHT * edge. Scrolling back up removes the class → banner returns to flow. * * Mobile (<=1024px): banner is a full-width fixed bottom bar with a * close button. banner.js adds bottom padding to so it never * covers the footer / footer menu links. */ /* ========================================================= Base banner (in-flow state, desktop) ========================================================= */ .snp-banner-sentinel { height: 1px; /* Observed by IntersectionObserver. */ } .snp-banner-wrap { margin: 0 0 30px; /* min-height is set by JS while pinned to avoid layout jump. */ } .snp-banner { display: flex; align-items: center; justify-content: space-between; gap: 18px; flex-wrap: wrap; background: linear-gradient(135deg, var(--snp-accent-soft) 0%, #f0f8f9 100%); border: 1px solid var(--snp-line); border-left: 4px solid var(--snp-accent); border-radius: var(--snp-radius); padding: 18px 22px; transition: box-shadow 0.25s ease, opacity 0.25s ease, transform 0.25s ease; } .snp-banner__text { display: flex; flex-direction: column; } .snp-banner__title { font-weight: 700; font-size: 1.05rem; color: var(--snp-ink); } .snp-banner__sub { font-size: 0.85rem; font-weight: 600; color: var(--snp-accent); letter-spacing: 0.08em; } .snp-banner__cta { white-space: nowrap; } /* Close button: hidden on desktop, shown on mobile. */ .snp-banner__close { display: none; background: none; border: none; font-size: 1.5rem; line-height: 1; color: var(--snp-ink-soft); cursor: pointer; padding: 6px 10px; } .snp-banner__close:hover { color: var(--snp-ink); } /* Short partner note directly under the banner. */ .snp-banner-note { font-size: 0.78rem; color: #5b6f77; margin: 8px 2px 0; } /* ========================================================= Desktop: pinned state (>1024px) ========================================================= */ @media (min-width: 1025px) { .snp-banner.is-pinned { position: fixed; right: 24px; top: 100px; z-index: 900; width: 280px; flex-direction: column; align-items: flex-start; gap: 12px; box-shadow: var(--snp-shadow); background: var(--snp-surface); } .snp-banner.is-pinned .snp-banner__cta { width: 100%; text-align: center; white-space: normal; } /* The note stays in flow; it only annotates the in-flow banner. */ } /* ========================================================= Mobile / tablet (<=1024px): fixed bottom bar ========================================================= */ @media (max-width: 1024px) { .snp-banner-sentinel { display: none; } .snp-banner-wrap { margin: 0; } .snp-banner { position: fixed; left: 0; right: 0; bottom: 0; z-index: 950; border-radius: 0; border-left: none; border-top: 1px solid var(--snp-line); background: var(--snp-surface); box-shadow: 0 -4px 18px rgba(22, 50, 60, 0.10); padding: 10px 14px; padding-bottom: calc(10px + env(safe-area-inset-bottom, 0px)); flex-wrap: nowrap; gap: 10px; } /* One line: "Telemeditsiini teenus · 24/7" */ .snp-banner__text { flex-direction: row; align-items: center; gap: 6px; min-width: 0; } .snp-banner__title { font-size: 0.88rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .snp-banner__title::after { content: " ·"; color: var(--snp-ink-soft); } .snp-banner__sub { font-size: 0.88rem; } .snp-banner__cta { padding: 9px 16px; font-size: 0.85rem; flex-shrink: 0; } .snp-banner__close { display: block; flex-shrink: 0; } /* Closed by user (state kept in sessionStorage). */ .snp-banner.is-closed { display: none; } /* While the cookie banner is open, the consultation banner sits directly ON TOP of it (stacked, both visible on a first visit). --snp-cookie-h is set by assets/cookie.js to the cookie banner's current height and drops back to 0 on accept/close. */ .snp-banner { bottom: var(--snp-cookie-h, 0px); transition: bottom 0.2s ease, box-shadow 0.25s ease; } body.snp-cookie-open .snp-banner { padding-bottom: 10px; /* Safe-area inset is handled by the cookie banner below. */ } /* The partner note is part of the fixed bar context on mobile: show it inside the flow just before the content instead. */ .snp-banner-note { margin: 0 0 22px; } } /* ========================================================= Cookie banner (all viewports) ========================================================= */ .snp-cookie { position: fixed; left: 0; right: 0; bottom: 0; z-index: 940; /* Just below the consultation banner (950): on mobile they stack, the consultation banner sits on top of the cookie banner. */ background: var(--snp-ink); color: #fff; display: flex; align-items: center; justify-content: center; gap: 18px; flex-wrap: wrap; padding: 14px 48px 14px 20px; /* Room on the right for the × button. */ padding-bottom: calc(14px + env(safe-area-inset-bottom, 0px)); } .snp-cookie[hidden] { display: none; } /* Dismiss for the current session (consent is NOT stored). */ .snp-cookie__close { position: absolute; top: 6px; right: 8px; background: none; border: none; color: #cfe6ea; font-size: 1.4rem; line-height: 1; padding: 6px 10px; cursor: pointer; } .snp-cookie__close:hover { color: #fff; } .snp-cookie__text { margin: 0; font-size: 0.85rem; line-height: 1.5; max-width: 720px; } .snp-cookie__actions { display: flex; align-items: center; gap: 16px; flex-shrink: 0; } .snp-cookie__accept { padding: 9px 22px; font-size: 0.88rem; } .snp-cookie__more { color: #cfe6ea; font-size: 0.85rem; } .snp-cookie__more:hover { color: #fff; } .snp-cookie a:focus-visible, .snp-cookie button:focus-visible { outline-color: #fff; } /* Mobile: keep the stacked pair (consultation bar + cookie banner) compact so together they don't take over the screen. */ @media (max-width: 1024px) { .snp-cookie { padding: 10px 44px 10px 14px; padding-bottom: calc(10px + env(safe-area-inset-bottom, 0px)); gap: 10px; justify-content: flex-start; } .snp-cookie__text { font-size: 0.78rem; line-height: 1.45; } .snp-cookie__accept { padding: 7px 16px; font-size: 0.82rem; } }