...` — Indico's message boxes, cards, modals, accordions, popups all use it). Semantic UI components only exist at runtime (React-mounted), so they never appear in the pre-React reference/*.html snapshots — styling bare `.header` looked safe against the snapshots but leaked the site-header treatment onto every Semantic UI `.header` in the live app (e.g. the registration form's "Lista de participantes" section header rendering as illegible green-on-green). The real site header div is confirmed (in every reference/prod-*.html snapshot AND on the live instance) to be a DIRECT CHILD of — `

` — which no nested Semantic UI `.header` ever is, so `body > .header` scopes correctly without needing an exclusion selector. */ /* --- Header shell --------------------------------------------------- */ body > .header { background: var(--utesa-green); border-bottom: 3px solid var(--utesa-gold); /* Indico sets `.header{color:var(--accent-highlight-color) !important}` (a dark blue in the default theme) as the inherited text color for anything in the header without its own color rule. That's unreadable on our green background. `body > .header` (0,1,1) is already more specific than Indico's bare `.header` (0,1,0), so among the two !important declarations ours wins on specificity — no need to also broaden what we override. */ color: #ffffff !important; /* overrides Indico's .header{color:var(--accent-highlight-color) !important} */ } /* Indico's own stylesheet sets `div.page-header{background-color:#007cac}` (element+class, specificity 0,1,1) — more specific than a plain `.page-header` class rule, so it wins regardless of load order. We match `div.page-header` (confirmed markup:

) to reach equal specificity and win on source order instead. */ .page-header, div.page-header { max-width: 1400px; margin: 0 auto; padding: var(--utesa-space-md) var(--utesa-space-lg); background: transparent; } /* --- Logo ------------------------------------------------------------ */ /* wraps , confirmed in reference/prod-home.html lines 92-98 (and equivalent in all snapshots). Brand mark is a 40x40 circular seal (utesa-logo.png / @2x), not a wide wordmark — no text lockup exists to pair it with in this markup, so the header shows the seal alone. */ #header-logo { display: inline-flex; align-items: center; } /* Indico's own stylesheet sets `div.page-header img.header-logo{margin:17px 0 10px 40px;height:60px}` (element+class element+class, specificity 0,2,2) — more specific than a plain `.header-logo` rule. We match that exact selector shape to reach equal specificity and win on source order. */ .header-logo, div.page-header img.header-logo { height: 40px; width: 40px; max-width: none; margin: 0; object-fit: contain; border-radius: 50%; } /* --- Session bar (timezone / language / login) ------------------------ */ .session-bar { color: #ffffff; } .session-bar .i-button { color: #ffffff; border-color: rgba(255, 255, 255, 0.55); background: transparent; } .session-bar .i-button:hover, .session-bar .i-button:focus { background: rgba(255, 255, 255, 0.14); border-color: #ffffff; color: #ffffff; } .session-bar .i-button:focus-visible { outline: 2px solid #ffffff; outline-offset: 2px; } /* Language dropdown menu (#language-list) pops over white, so it must not inherit the header's white-on-green text color. */ #language-list { background: var(--utesa-surface); border: 1px solid var(--utesa-border); border-radius: var(--utesa-radius-sm); box-shadow: var(--utesa-shadow-md); } #language-list button { color: var(--utesa-ink); } #language-list button:hover, #language-list button:focus { background: var(--utesa-green-light); color: var(--utesa-green-dark); } /* "Inicio de sesión" call-to-action button in the session bar (reference/prod-home.html: ) reads as the primary header action, so it gets the gold accent as a border/underline rather than a gold fill (gold-on-white/green fails contrast as text). */ .session-bar .i-button.icon-enter { border-color: var(--utesa-gold); } .session-bar .i-button.icon-enter:hover, .session-bar .i-button.icon-enter:focus { background: var(--utesa-gold); border-color: var(--utesa-gold); color: var(--utesa-ink); /* dark text on gold fill keeps contrast on hover state */ } /* Pre-existing accessibility issue, independent of any color we've set: the "Público" event-visibility badge (logged-in event managers only) is Indico's own `.i-button.accept` positive/success style -- `div.session-bar .i-button.protection-public:not(.label):not(.borderless) :not(.text-color){background:#00c851;color:#f9f9f9}` -- white-ish text on that saturated green computes to ~2.1:1, well under the 4.5:1 text minimum (confirmed via computed style: rgb(249,249,249) on rgb(0,200,81)). Recoloring to our brand dark green fixes contrast (>8:1) and stops it clashing with the rest of the palette. Same selector shape (3 classes + 3 :not() pseudo-classes on the button, scoped under div.session-bar) to match Indico's specificity and win on source order. */ div.session-bar .i-button.protection-public:not(.label):not(.borderless):not(.text-color) { background: var(--utesa-green-dark); border-color: var(--utesa-green-dark); color: #ffffff; } div.session-bar .i-button.protection-public:not(.label):not(.borderless):not(.text-color):hover, div.session-bar .i-button.protection-public:not(.label):not(.borderless):not(.text-color):focus, div.session-bar .i-button.protection-public:not(.label):not(.borderless):not(.text-color):active { background: var(--utesa-green); border-color: var(--utesa-green-dark); color: #ffffff; } /* --- Event page icon toolbar (.event-page-header, inside body > .header) - Confirmed markup: event pages nest