/* ========================================================================== contact-cta.css — the refusing button. LOADED AFTER ui.css, and that is load-bearing rather than tidy. The hover rule below is `.bar__mail:hover`, exactly the same specificity as the one in ui.css that turns the chip grey. Equal specificity means the later sheet wins, so the order in is what makes the red apply. Move this line above ui.css and the button silently goes back to grey. ========================================================================== */ /* THE CHIP STAYS WHITE, THE WORDS GO RED. ui.css greys the whole chip on hover; the brief is a colour change, not a fill change, and red type on the white block is the louder of the two — the chip is already the brightest thing in the bar, so darkening it reads as it being pressed rather than as it warning you. */ .bar__mail:hover{ background: #fff; color: var(--ui-red); } /* THE FOOTER'S COPY OF THIS BUTTON IS NOT LISTED HERE. It sits on a black bar inside a red screen and has its own hover in css/footer.css; the rule above turns the chip white, which is right in the grey bar and wrong in there. The two rules below ARE shared, because they are about the label not re-wrapping and the scramble not being smeared by a transition — which is true wherever the button is. */ /* The little cross rides the same colour, since it is drawn with stroke="currentColor". Nothing to do but let it. */ /* THE LABEL IS A BLOCK SO IT CAN HOLD A WIDTH. js/contact-cta.js measures the longest of the four lines once the webfont has landed and pins min-width to it, so the chip does not resize four times on the way through the sequence. inline elements ignore min-width, which is why this is here and not left to the default. */ .bar__mail [data-label], .ftr__bar [data-label], .ftr__err [data-label]{ display: inline-block; /* Whatever glyph is mid-decode, the line never re-wraps. A phrase that wrapped for three frames in the middle of resolving would shift the whole bar. */ white-space: nowrap; } /* NO TRANSITION ON THE TEXT ITSELF. The scramble is doing the work a frame at a time; a CSS transition on top of it would smear two animations together and neither would read. Only the colour eases. */ .bar__mail, .ftr__bar{ transition: background .18s ease, color .18s ease; }