.hello-bar{background-color:var(--clr-primary);color:var(--clr-white);padding:1.2rem}.hello-bar__container{align-items:center;display:flex;gap:2rem;justify-content:space-between;position:relative}.hello-bar__content{align-items:center;display:flex;flex:1;gap:clamp(.5rem,3vw,2rem);justify-content:center}.hello-bar__status-badge{background-color:var(--clr-green-200);border-radius:2rem;color:var(--clr-green-700);font-size:.8rem;font-weight:var(--fw-bold);padding:.5em 1em;text-transform:uppercase}.hello-bar__text{font-size:1rem;font-weight:var(--fw-semibold);line-height:var(--lh-normal);margin:0;width:auto}.hello-bar__link{color:var(--clr-white);flex-shrink:0;font-weight:var(--fw-semibold);line-height:var(--lh-tight);text-decoration:underline;text-underline-offset:.2em;&:focus,&:hover{color:var(--clr-white);text-decoration:none}}.hello-bar__close-button{align-items:center;background:var(--clr-white);border:none;border-radius:50%;display:flex;flex-shrink:0;height:1.5rem;justify-content:center;padding:0;transition:transform .2s ease-in-out;width:1.5rem;&:focus,&:hover{transform:scale(1.1)}svg{height:100%;width:100%;path{stroke:var(--clr-primary);fill:var(--clr-primary)}}}.sr-only{height:1px;margin:-1px;overflow:hidden;padding:0;position:absolute;width:1px;clip:rect(0,0,0,0);border:0}.hello-bar.is-hidden{display:none}@media (max-width:640px){.hello-bar{padding:.75rem}.hello-bar__status-badge{display:none}.hello-bar__content{flex-direction:column;gap:.5rem}.hello-bar__text{text-align:center}.hello-bar__link,.hello-bar__text{font-size:var(--fs-caption)}.hello-bar__link{flex-shrink:1}}