.sherafy-pulse {
--sherafy-pulse-bg: var(--ast-global-color-5, #f4f4f1);
--sherafy-pulse-ink: var(--ast-global-color-3, #242a2d);
--sherafy-pulse-muted: #56615e;
--sherafy-pulse-accent: var(--ast-global-color-0, #385b4d);
--sherafy-pulse-rule: rgba(36, 42, 45, 0.18);
background: var(--sherafy-pulse-bg);
border: 1px solid var(--sherafy-pulse-rule);
border-radius: 4px;
color: var(--sherafy-pulse-ink);
font-family: var(--ast-body-font-family, inherit);
font-size: 12px;
line-height: 1.35;
margin: 10px auto;
max-width: var(--ast-container-width, 1200px);
position: relative;
width: calc(100% - 32px);
z-index: 1;
}
.sherafy-pulse,
.sherafy-pulse * {
box-sizing: border-box;
}
.sherafy-pulse__inner {
align-items: center;
display: grid;
grid-template-areas:
"brand active"
"discovery latest";
grid-template-columns: minmax(0, 1fr) minmax(0, 1.4fr);
padding-inline: 12px;
}
.sherafy-pulse__brand,
.sherafy-pulse__slot {
align-items: center;
display: flex;
min-width: 0;
}
.sherafy-pulse__brand {
color: var(--sherafy-pulse-ink);
font-family: var(--ast-head-font-family, var(--ast-body-font-family, inherit));
font-size: 0.66rem;
font-weight: 700;
letter-spacing: 0.14em;
grid-area: brand;
padding-right: 10px;
text-decoration: none;
}
.sherafy-pulse__mark {
background: var(--sherafy-pulse-accent);
border-radius: 50%;
flex: 0 0 6px;
height: 6px;
margin-right: 8px;
width: 6px;
}
.sherafy-pulse__slot {
border-left: 1px solid var(--sherafy-pulse-rule);
gap: 0.45rem;
min-height: 32px;
padding: 5px 10px;
}
.sherafy-pulse__active {
grid-area: active;
justify-content: flex-end;
}
.sherafy-pulse__discovery,
.sherafy-pulse__latest {
align-items: flex-start;
border-left: 0;
border-top: 1px solid var(--sherafy-pulse-rule);
flex-direction: column;
grid-area: discovery;
justify-content: center;
min-height: 40px;
padding: 5px 8px;
}
.sherafy-pulse__latest {
border-left: 1px solid var(--sherafy-pulse-rule);
grid-area: latest;
}
.sherafy-pulse__label {
color: var(--sherafy-pulse-muted);
flex: 0 0 auto;
font-size: 0.57rem;
font-weight: 700;
letter-spacing: 0.075em;
line-height: 1.25;
text-transform: uppercase;
}
.sherafy-pulse__count {
color: var(--sherafy-pulse-accent);
font-size: 0.76rem;
font-weight: 700;
white-space: nowrap;
}
.sherafy-pulse__story {
color: var(--sherafy-pulse-ink);
display: block;
font-size: 0.76rem;
font-weight: 600;
min-width: 0;
text-decoration: none;
}
.sherafy-pulse__story > span {
display: block;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.sherafy-pulse__story:hover,
.sherafy-pulse__brand:hover {
color: var(--sherafy-pulse-accent);
}
.sherafy-pulse a:focus-visible {
border-radius: 2px;
outline: 2px solid var(--sherafy-pulse-accent);
outline-offset: 3px;
}
.sherafy-pulse [hidden] {
display: none !important;
}
.sherafy-pulse .screen-reader-text {
clip: rect(1px, 1px, 1px, 1px);
clip-path: inset(50%);
height: 1px;
overflow: hidden;
position: absolute;
white-space: nowrap;
width: 1px;
}
@media (max-width: 760px) {
.sherafy-pulse {
width: calc(100% - 24px);
}
.sherafy-pulse__inner {
grid-template-columns: minmax(0, 1fr) minmax(0, 1.4fr);
padding-inline: 9px;
}
.sherafy-pulse__brand {
padding-right: 8px;
}
.sherafy-pulse__active {
align-items: center;
flex-direction: row;
}
.sherafy-pulse__discovery,
.sherafy-pulse__latest {
align-items: flex-start;
flex-direction: column;
gap: 0.12rem;
padding: 5px 7px;
}
.sherafy-pulse__label {
font-size: 0.55rem;
}
.sherafy-pulse__story {
max-width: 100%;
font-size: 0.73rem;
width: 100%;
}
}
@media (max-width: 420px) {
.sherafy-pulse {
width: calc(100% - 20px);
}
.sherafy-pulse__inner {
grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr);
padding-inline: 6px;
}
.sherafy-pulse__discovery,
.sherafy-pulse__latest {
padding: 5px 5px;
}
.sherafy-pulse__story {
font-size: 0.7rem;
}
}
@media (prefers-reduced-motion: reduce) {
.sherafy-pulse,
.sherafy-pulse * {
scroll-behavior: auto !important;
transition: none !important;
}
}