/* ════════════════════════════════════════════════════════════════════ Announcement / notification banners (top of page) Single source of truth for the `.pa-portal-notification*` banner styling. Loaded from the shared concordcms base (custom_assets), so it applies to BOTH the authenticated portal (announcements_widget.html) and the public website (public_announcements_widget.html) — the public banner therefore matches the dashboard banner exactly. Previously these rules lived only in dashboard.css, which the public site never loads, leaving public banners unstyled. Mobile first (frontend skill FE-3): the base rules are the phone layout and the `min-width` queries add the desktop one. ════════════════════════════════════════════════════════════════════ */ /* ── The strip ───────────────────────────────────────────────────────── Below lg the strip is part of the page, above the topbar, and scrolls away with it. It used to be fixed at every width, and on a phone a fixed strip IS the page: the renewal banner plus two announcements measured 1,592px on a 375×667 screen, so nothing under it could be reached — including the mobile menu, which drops down beneath it. From lg it is fixed, as designed, and the page is offset below it by `--pa-notification-bar-height` (published by _notification_bar_offset.html). The max-height is a safety net: a strip taller than 40% of the screen scrolls inside itself rather than covering the page. */ .pa-portal-notifications-bar { position: relative; } /* The last banner's rounded bottom corners show whatever is behind the strip. On the portal that must be the portal's own purple, at EVERY width: below lg the strip is in the flow above the portal, and from lg the portal is pushed down by --pa-notification-bar-height, so in neither case does the purple portal sit behind it. Behind it is the white , which read as a white gap between the banner and the topbar. (The strip used to overlay the portal from lg, which is why this was once transparent there.) */ .pa-portal-notifications-bar--portal { background-color: var(--bs-purple-dark); } /* Public site only (the public strip is a direct child of ; the portal's is inside #content). The navbar there is Bootstrap `fixed-top`, so with the strip in the flow above it the navbar would sit on top of the first banner — over its dismiss button. Below lg it is hung under the strip instead and scrolls with the page while a banner is showing; the widget removes the strip when the last banner is dismissed, which returns the navbar to fixed. */ body > .pa-portal-notifications-bar ~ .navbar.fixed-top { position: absolute; top: var(--pa-notification-bar-height, 0); } /* While an administrator is impersonating, zyrous_wagtail_core's own banner (templates/impersonation/banner.html) is fixed at top:0 above everything and pads down by 2.75rem. From lg this strip is fixed at top:0 too, so the two overlapped, and the page was pushed down twice — by the body padding AND by this strip's height — leaving a 2.75rem white band between the strip and the portal topbar. From lg the strip stacks under that banner instead. The value is the package's own body padding; if the package changes it, change this with it. Below lg the strip is in the flow, so the padding already puts it under the banner. */ body.impersonation-active { --pa-impersonation-bar-offset: 2.75rem; } @media (min-width: 992px) { .pa-portal-notifications-bar { position: fixed; top: var(--pa-impersonation-bar-offset, 0px); left: 0; right: 0; z-index: 1050; max-height: 40vh; overflow-y: auto; overscroll-behavior: contain; } /* Push the page down so the fixed strip covers nothing. */ .pa-portal-notifications-bar ~ .portal, body > .pa-portal-notifications-bar ~ #content { margin-top: var(--pa-notification-bar-height, 0); } /* Public site: the fixed navbar sits directly under the fixed strip rather than beneath it, where it was hidden while any announcement showed. */ body > .pa-portal-notifications-bar ~ .navbar.fixed-top { position: fixed; /* Under the impersonation banner as well, when there is one (above). */ top: calc(var(--pa-impersonation-bar-offset, 0px) + var(--pa-notification-bar-height, 0px)); } } /* ── One banner ──────────────────────────────────────────────────────── Phone layout: a grid of icon | text | dismiss, with every call to action on its own row under the text. The old single flex row kept each CTA at its full `nowrap` width, so the text column absorbed the whole squeeze — an announcement's title wrapped one word per line and a link labelled with its URL (the fallback when no link text is set) ran ~300px off the screen. */ .pa-portal-notification { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: start; column-gap: 12px; row-gap: 10px; /* The dismiss control carries its own 44px hit area, so the right edge is tighter than the left. */ padding: 12px 6px 12px 16px; color: var(--bs-white); font-size: 14px; line-height: 1.5; } .pa-portal-notifications-bar .pa-portal-notification:last-child { border-bottom-left-radius: 16px; border-bottom-right-radius: 16px; } .pa-portal-notification + .pa-portal-notification { border-top: 1px solid rgba(255, 255, 255, 0.15); } .pa-portal-notification__icon { grid-column: 1; grid-row: 1; flex-shrink: 0; display: flex; align-items: center; justify-content: center; width: 36px; height: 36px; border-radius: 50%; } /* No colour here — the wrapper's inline `color` (the priority's icon_color) must win so each priority renders in its configured colour. */ .pa-portal-notification__icon .icon { font-size: 18px; line-height: 1; } .pa-portal-notification__text { grid-column: 2; grid-row: 1; align-self: center; min-width: 0; /* Rich text can carry a pasted URL; it must wrap rather than widen the page. */ overflow-wrap: anywhere; } .pa-portal-notification__text a { color: var(--bs-white); font-weight: 700; transition: color 0.3s ease; } .pa-portal-notification__text a:hover { color: var(--bs-warning); } .pa-portal-notification__body { margin-top: 2px; } .pa-portal-notification__cta { grid-column: 2 / -1; justify-self: start; max-width: 100%; padding: 10px 24px; border-radius: 24px; font-weight: 700; font-size: 13px; line-height: 1.35; text-align: center; text-decoration: none; /* A label may be a bare URL; it wraps inside the pill instead of widening it. */ overflow-wrap: anywhere; background-color: #F472B6; color: var(--bs-white); transition: opacity 0.15s ease; } .pa-portal-notification__cta:hover { opacity: 0.9; text-decoration: none; color: var(--bs-white); } .pa-portal-notification__dismiss { grid-column: 3; grid-row: 1; display: inline-flex; align-items: center; justify-content: center; /* FE-11: a 44px target. The glyph stays its old size; the box around it grows. */ width: 44px; height: 44px; margin-top: -4px; padding: 0; background: none; border: none; border-radius: 50%; font-size: 26px; line-height: 1; cursor: pointer; color: var(--bs-white); opacity: 0.7; } .pa-portal-notification__dismiss:hover, .pa-portal-notification__dismiss:focus-visible { opacity: 1; } .pa-portal-notification__dismiss:focus-visible { outline: 2px solid currentColor; outline-offset: -4px; } /* Desktop: one row — icon, text, calls to action, dismiss — as designed. The row still wraps, so a long label moves under the text instead of squeezing it. */ @media (min-width: 992px) { .pa-portal-notification { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 16px; padding: 14px 14px 14px 24px; } .pa-portal-notification__icon { width: 44px; height: 44px; } .pa-portal-notification__icon .icon { font-size: 22px; } .pa-portal-notification__text { flex: 1 1 18rem; } .pa-portal-notification__cta { flex: 0 1 auto; max-width: 24rem; padding-inline: 28px; } .pa-portal-notification__dismiss { margin-top: 0; } } @media (prefers-reduced-motion: reduce) { .pa-portal-notification__text a, .pa-portal-notification__cta { transition: none; } } /* ── Announcement banners (share the notification banner look-and-feel) ── */ .pa-portal-notifications-bar .pa-portal-notification:last-of-type { border-bottom-left-radius: 16px; border-bottom-right-radius: 16px; } .pa-portal-notifications-bar .pa-portal-notification--announcement:last-of-type { /* Figma 2418-29033 — 24px bottom corner radius for announcements. */ border-bottom-left-radius: 24px; border-bottom-right-radius: 24px; } .pa-portal-notification--announcement .pa-portal-notification__body { font-weight: 700; /* Nunito-Bold body per Figma; rich-text spans keep their own weight */ } .pa-portal-notification--announcement .pa-portal-notification__body p:last-child { margin-bottom: 0; } /* CTA / acknowledge pill — Electric Violet per Figma */ .pa-portal-notification__cta--announcement, .pa-portal-notification__cta--acknowledge { background-color: var(--bs-primary); color: #F9F9F9; border: none; cursor: pointer; } .pa-portal-notification__cta--announcement:hover, .pa-portal-notification__cta--acknowledge:hover { color: #F9F9F9; opacity: 0.9; } .pa-portal-notification__cta--acknowledge:disabled { opacity: 0.6; cursor: default; } /* The dismiss × inherits the banner's contrasting text colour */ .pa-portal-notification--announcement .pa-portal-notification__dismiss { color: inherit; } /* ── Renewal banner and communications-paused notice (spec §7.11) ────────── Two more states of the same banner, added by the 24-month renewal protocol. They are rendered by renewal_widget.html from computed portal state rather than from an authored Announcement, so they carry no dismiss control — the banner goes when the renewal is recorded and the notice goes when the policy is re-tailored. Only the one thing the base component leaves undefined is set here: a CTA pill that reads on the banner's own background instead of the announcements' violet. Their narrow-screen layout used to be a special case here; it is now the base layout of every banner (above). */ .pa-portal-notification--renewal .pa-portal-notification__cta, .pa-portal-notification--suppressed .pa-portal-notification__cta { background-color: rgba(255, 255, 255, 0.95); color: var(--bs-biscay, #1b3a57); } .pa-portal-notification--renewal .pa-portal-notification__cta:hover, .pa-portal-notification--suppressed .pa-portal-notification__cta:hover { background-color: var(--bs-white); color: var(--bs-biscay, #1b3a57); }