/* Header top bars — announcement strips above .rw-header. Bar 1 (.rw-topbar--1): yellow primary visual — Figma 1166:4609 / 1166:5301. Bar 2 (.rw-topbar--2): secondary variant — Figma 693:7994. */ .rw-topbar { background: #FFCE03; color: var(--rw-color-primary-green, #093B4D); font-family: var(--rw-font-text); } .rw-topbar__inner { min-height: 2.5rem; /* 40px */ display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 0.5rem; padding-block: 0.375rem; } .rw-topbar__eyebrow { display: inline-flex; align-items: center; gap: 0.5rem; font-family: var(--rw-font-mono); font-weight: 500; font-size: 0.875rem; line-height: 0.875rem; letter-spacing: 0.04em; text-transform: uppercase; color: var(--rw-color-grey-01, #646971); } .rw-topbar__dot { display: inline-block; width: 11px; height: 11px; background: var(--rw-color-primary-green, #093B4D); border-radius: 1px; } .rw-topbar__body { font-size: 0.875rem; line-height: 1rem; letter-spacing: -0.012em; color: var(--rw-color-primary-green, #093B4D); } .rw-topbar__link { font-weight: 600; font-size: 0.875rem; line-height: 0.875rem; color: var(--rw-color-primary-green, #093B4D); text-decoration: underline; text-underline-position: from-font; } .rw-topbar__link:hover { opacity: 0.85; } /* Bar 2 — secondary variant (Figma 693:7994). White background, dark green text, subtle bottom border. */ .rw-topbar--2 { background: #FFFFFF; color: var(--rw-color-primary-green, #093B4D); border-bottom: 1px solid var(--rw-color-border, #E5E7EB); } .rw-topbar--2 .rw-topbar__dot { background: var(--rw-color-primary-blue, #1E5BFF); } .rw-topbar--2 .rw-topbar__eyebrow { color: var(--rw-color-primary-green, #093B4D); } /* Overlay-header pages: header is absolutely positioned at top:0 of . Push it below each rendered topbar. Sibling selectors match actually rendered bars (1 or both). */ body.has-overlay-header .rw-header:not(.is-pinned) { top: 2.5rem; } body.has-overlay-header .rw-topbar--1 ~ .rw-topbar--2 ~ .rw-header:not(.is-pinned), body.has-overlay-header .rw-topbar--2 ~ .rw-topbar--1 ~ .rw-header:not(.is-pinned) { top: 5rem; } @media (max-width: 767px) { .rw-topbar__inner { flex-direction: column; gap: 0.25rem; padding-block: 0.75rem; text-align: center; } .rw-topbar__body, .rw-topbar__link { display: inline; } body.has-overlay-header .rw-header:not(.is-pinned), body.has-overlay-header .rw-topbar--1 ~ .rw-topbar--2 ~ .rw-header:not(.is-pinned), body.has-overlay-header .rw-topbar--2 ~ .rw-topbar--1 ~ .rw-header:not(.is-pinned) { top: auto; } }