.lbr {
--lbr-cols: 3;
--lbr-lines: 6;
--lbr-gap: clamp(1.25rem, 2.5vw, 2.25rem);
--lbr-radius: 2px;
--lbr-star: #c9a45c;
--lbr-star-empty: rgba(127, 127, 127, .25);
--lbr-text: inherit;
--lbr-muted: rgba(127, 127, 127, .95);
--lbr-line: rgba(127, 127, 127, .22);
--lbr-bg: rgba(127, 127, 127, .06);
--lbr-avatar: 44px;
color: var(--lbr-text);
margin: 0 auto;
}
@supports (color: color-mix(in srgb, red 50%, blue)) {
.lbr {
--lbr-muted: color-mix(in srgb, currentColor 58%, transparent);
--lbr-line: color-mix(in srgb, currentColor 14%, transparent);
--lbr-bg: color-mix(in srgb, currentColor 4%, transparent);
}
}
.lbr *,
.lbr *::before,
.lbr *::after { box-sizing: border-box; }
.lbr__heading { margin: 0 0 1.25rem; text-align: center; } .lbr-summary {
display: flex;
flex-wrap: wrap;
justify-content: center;
align-items: center;
gap: 1rem 2.5rem;
margin: 0 0 calc(var(--lbr-gap) * 1.25);
}
.lbr-summary__item {
display: inline-flex;
align-items: center;
gap: .85rem;
color: inherit !important;
text-decoration: none !important;
border: 0 !important;
}
.lbr-summary__score {
font-size: 2.4em;
line-height: 1;
font-weight: 300;
letter-spacing: -.02em;
}
.lbr-summary__body { display: flex; flex-direction: column; gap: .3rem; }
.lbr-summary__label {
display: flex;
align-items: center;
gap: .45rem;
font-size: .82em;
color: var(--lbr-muted);
}
a.lbr-summary__item:hover .lbr-summary__count,
a.lbr-summary__item:focus-visible .lbr-summary__count { text-decoration: underline; }
.lbr-summary__ctas {
flex-basis: 100%;
display: flex;
flex-wrap: wrap;
justify-content: center;
gap: .5rem 1.5rem;
font-size: .82em;
}
.lbr-summary__cta {
color: inherit !important;
text-decoration: underline;
text-underline-offset: .2em;
text-decoration-color: var(--lbr-line);
}
.lbr-summary__cta:hover { text-decoration-color: currentColor; } .lbr-stars {
position: relative;
display: inline-block;
line-height: 0;
white-space: nowrap;
vertical-align: middle;
}
.lbr-stars svg { width: 1em; height: 1em; margin-right: .12em; }
.lbr-stars__bg svg { fill: var(--lbr-star-empty); }
.lbr-stars__fg { position: absolute; inset: 0 auto 0 0; overflow: hidden; }
.lbr-stars__fg svg { fill: var(--lbr-star); }
.lbr-summary .lbr-stars { font-size: 1.05em; } .lbr__grid {
display: grid;
grid-template-columns: repeat(var(--lbr-cols), minmax(0, 1fr));
gap: var(--lbr-gap);
} .lbr { container-type: inline-size; container-name: lbr; }
@container lbr (max-width: 900px) {
.lbr__grid { grid-template-columns: repeat(min(var(--lbr-cols), 2), minmax(0, 1fr)); }
}
@container lbr (max-width: 560px) {
.lbr__grid { grid-template-columns: minmax(0, 1fr); }
} @supports not (container-type: inline-size) {
@media (max-width: 1024px) {
.lbr__grid { grid-template-columns: repeat(min(var(--lbr-cols), 2), minmax(0, 1fr)); }
}
@media (max-width: 640px) {
.lbr__grid { grid-template-columns: minmax(0, 1fr); }
}
} .lbr-card {
display: flex;
flex-direction: column;
gap: .8rem;
min-width: 0;
padding: 1.5rem 0 0;
border-top: 1px solid var(--lbr-line);
font-size: .95em;
}
.lbr--bordered .lbr-card {
padding: 1.6rem;
border: 1px solid var(--lbr-line);
border-radius: var(--lbr-radius);
}
.lbr--soft .lbr-card {
padding: 1.6rem;
border: 0;
border-radius: var(--lbr-radius);
background: var(--lbr-bg);
}
.lbr-card--more { display: none; }
.lbr-card.is-revealed { animation: lbr-fade .45s ease both; }
@keyframes lbr-fade { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce) {
.lbr-card.is-revealed { animation: none; }
}
.lbr-card__head { display: flex; align-items: center; gap: .8rem; }
.lbr-card__avatar {
flex: 0 0 var(--lbr-avatar);
width: var(--lbr-avatar) !important;
height: var(--lbr-avatar) !important;
border-radius: 50%;
object-fit: cover;
margin: 0 !important;
}
.lbr-card__avatar--initial {
display: inline-flex;
align-items: center;
justify-content: center;
font-size: 1.05em;
color: #fff;
background: hsl(var(--lbr-hue, 30) 22% 52%);
user-select: none;
}
.lbr-card__who { display: flex; flex-direction: column; min-width: 0; flex: 1 1 auto; line-height: 1.3; }
.lbr-card__name {
font-weight: 600;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.lbr-card__name a { color: inherit !important; text-decoration: none !important; }
.lbr-card__name a:hover { text-decoration: underline !important; }
.lbr-card__date { font-size: .82em; color: var(--lbr-muted); }
.lbr-card__rating {
display: flex;
align-items: center;
justify-content: space-between;
gap: .75rem;
flex-wrap: wrap;
}
.lbr-card__source { flex: 0 0 auto; line-height: 1; }
.lbr-logo { display: inline-block; vertical-align: middle; }
img.lbr-logo { height: 18px; width: auto; margin: 0 !important; }
.lbr-logo--text {
font-size: .72em;
letter-spacing: .08em;
text-transform: uppercase;
color: var(--lbr-muted);
white-space: nowrap;
}
.lbr-card__title { margin: 0; font-weight: 600; }
.lbr-card__text { position: relative; line-height: 1.65; }
.lbr-card__text p { margin: 0 0 .7em; }
.lbr-card__text p:last-child { margin-bottom: 0; }
.lbr-card__text.is-clamped {
display: -webkit-box;
-webkit-box-orient: vertical;
-webkit-line-clamp: var(--lbr-lines);
line-clamp: var(--lbr-lines);
overflow: hidden;
}
.lbr-card__text.is-clamped p { display: inline; }
.lbr-card__text.is-clamped p + p::before { content: " "; }
.lbr-card__more,
.lbr__loadmore {
font: inherit;
color: inherit;
cursor: pointer;
}
.lbr-card__more {
align-self: flex-start;
margin: -.2rem 0 0;
padding: 0;
border: 0;
background: none;
font-size: .85em;
text-decoration: underline;
text-underline-offset: .2em;
text-decoration-color: var(--lbr-line);
}
.lbr-card__more:hover { text-decoration-color: currentColor; }
.lbr-card__more[hidden] { display: none; }
.lbr-card__note { margin: 0; font-size: .78em; color: var(--lbr-muted); font-style: italic; }
.lbr-card__reply {
margin-top: .2rem;
padding-left: .9rem;
border-left: 2px solid var(--lbr-line);
font-size: .9em;
color: var(--lbr-muted);
}
.lbr-card__reply p { margin: .25em 0 0; }
.lbr-card__reply-label { font-weight: 600; font-size: .9em; }
.lbr-card__foot { margin-top: auto; padding-top: .25rem; font-size: .8em; }
.lbr-card__foot a {
color: var(--lbr-muted) !important;
text-decoration: none !important;
}
.lbr-card__foot a:hover { color: inherit !important; text-decoration: underline !important; } .lbr__actions { display: flex; justify-content: center; margin-top: calc(var(--lbr-gap) * 1.25); }
.lbr__loadmore {
padding: .85em 2em;
border: 1px solid currentColor;
border-radius: var(--lbr-radius);
background: transparent;
font-size: .82em;
letter-spacing: .1em;
text-transform: uppercase;
transition: background-color .2s, color .2s;
}
.lbr__loadmore:hover { background: var(--lbr-bg); }
.lbr-card__more:focus-visible,
.lbr__loadmore:focus-visible,
.lbr a:focus-visible { outline: 2px solid currentColor; outline-offset: 3px; }
.lbr__empty { text-align: center; color: var(--lbr-muted); font-style: italic; }  .lbr--slider .lbr__grid { --lbr-view: var(--lbr-cols); }
@container lbr (max-width: 900px) {
.lbr--slider .lbr__grid { --lbr-view: min(var(--lbr-cols), 2); }
}
@container lbr (max-width: 560px) {
.lbr--slider .lbr__grid { --lbr-view: 1; }
}
@supports not (container-type: inline-size) {
@media (max-width: 1024px) { .lbr--slider .lbr__grid { --lbr-view: min(var(--lbr-cols), 2); } }
@media (max-width: 640px) { .lbr--slider .lbr__grid { --lbr-view: 1; } }
}
.lbr__viewport { position: relative; }
.lbr--slider .lbr__grid {
display: flex;
gap: var(--lbr-gap);
overflow-x: auto;
overscroll-behavior-x: contain;
scroll-snap-type: x mandatory;
scroll-behavior: smooth;
scrollbar-width: none;
-webkit-overflow-scrolling: touch;
}
.lbr--slider .lbr__grid::-webkit-scrollbar { display: none; } .lbr--slider .lbr__grid:focus-visible { outline: 2px solid currentColor; outline-offset: -2px; }
.lbr--slider .lbr-card a:focus-visible,
.lbr--slider .lbr-card button:focus-visible { outline-offset: -2px; }
.lbr--slider .lbr-card {
flex: 0 0 calc((100% - (var(--lbr-view) - 1) * var(--lbr-gap)) / var(--lbr-view));
scroll-snap-align: start;
min-width: 0;
}
.lbr--slider.is-dragging .lbr__grid { scroll-snap-type: none; scroll-behavior: auto; cursor: grabbing; user-select: none; }
@media (prefers-reduced-motion: reduce) {
.lbr--slider .lbr__grid { scroll-behavior: auto; }
}
.lbr__nav {
display: flex;
align-items: center;
justify-content: center;
gap: 1rem;
margin-top: calc(var(--lbr-gap) * 1.1);
}
.lbr__nav:empty,
.lbr__nav[hidden] { display: none; }
.lbr__arrow {
display: inline-flex;
align-items: center;
justify-content: center;
width: 2.75rem;
height: 2.75rem;
padding: 0;
border: 1px solid var(--lbr-line);
border-radius: 50%;
background: transparent;
color: inherit;
cursor: pointer;
transition: border-color .2s, opacity .2s, background-color .2s;
}
.lbr__arrow svg { width: 1.1rem; height: 1.1rem; fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
.lbr__arrow:hover { border-color: currentColor; background: var(--lbr-bg); }
.lbr__arrow[disabled] { opacity: .3; cursor: default; border-color: var(--lbr-line); background: transparent; }
.lbr__dots { display: flex; flex-wrap: wrap; justify-content: center; gap: .15rem; }
.lbr__dot {
position: relative;
width: 1.75rem;
height: 1.75rem; padding: 0;
border: 0;
background: transparent;
cursor: pointer;
}
.lbr__dot::before {
content: "";
position: absolute;
top: 50%;
left: 50%;
width: .45rem;
height: .45rem;
border-radius: 50%;
background: currentColor;
opacity: .25;
transform: translate(-50%, -50%);
transition: opacity .2s, transform .2s;
}
.lbr__dot:hover::before { opacity: .5; }
.lbr__dot[aria-current="true"]::before { opacity: .9; transform: translate(-50%, -50%) scale(1.3); }
.lbr__dot:focus-visible,
.lbr__arrow:focus-visible,
.lbr__pause:focus-visible { outline: 2px solid currentColor; outline-offset: 2px; }
.lbr__counter {
min-width: 4.5em;
text-align: center;
font-size: .85em;
letter-spacing: .08em;
color: var(--lbr-muted);
font-variant-numeric: tabular-nums;
}
.lbr__pause {
padding: .35em .8em;
border: 0;
background: none;
color: var(--lbr-muted);
font: inherit;
font-size: .78em;
letter-spacing: .06em;
text-transform: uppercase;
cursor: pointer;
}
.lbr__pause:hover { color: inherit; } .lbr-button-wrap { margin: 1.5rem 0; }
.lbr-button-wrap--center { text-align: center; }
.lbr-button-wrap--right { text-align: right; }
.lbr-button {
display: inline-block;
font-size: .85em;
letter-spacing: .1em;
text-transform: uppercase;
text-decoration: none !important;
transition: background-color .2s, color .2s, border-color .2s;
}
.lbr-button--outline,
.lbr-button--solid {
padding: .9em 2em;
border: 1px solid currentColor;
border-radius: 2px;
}
.lbr-button--outline { color: inherit !important; background: transparent; }
.lbr-button--outline:hover { background: rgba(127, 127, 127, .08); }
.lbr-button--solid { color: #fff !important; background: #1a1a1a; border-color: #1a1a1a; }
.lbr-button--solid:hover { background: #333; border-color: #333; }
.lbr-button--link {
padding: 0;
color: inherit !important;
text-transform: none;
letter-spacing: 0;
font-size: 1em;
text-decoration: underline !important;
text-underline-offset: .2em;
}
.lbr-button:focus-visible { outline: 2px solid currentColor; outline-offset: 3px; }