.wb-portfolio-item--like {
position: relative;
}
.wb-portfolio-link {
display: block;
overflow: hidden;
border-radius: inherit;
line-height: 0;
transition: transform 0.15s ease, box-shadow 0.15s ease;
}
a.wb-portfolio-link:hover,
a.wb-portfolio-link:focus-visible {
transform: translateY(-2px);
box-shadow: 0 6px 18px rgba(0, 0, 0, 0.18);
}
a.wb-portfolio-link:focus-visible {
outline: 2px solid currentColor;
outline-offset: 2px;
}
.wb-like {
position: absolute;
right: 0.5rem;
bottom: 0.5rem;
z-index: 2;
display: inline-flex;
align-items: center;
gap: 0.35em;
margin: 0;
padding: 0.32em 0.6em;
border: 0;
border-radius: 999px;
font: inherit;
font-size: 0.8125rem;
font-variant-numeric: tabular-nums;
line-height: 1;
color: #fff;
background: rgba(12, 12, 14, 0.55);
-webkit-backdrop-filter: blur(6px);
backdrop-filter: blur(6px);
cursor: pointer;
transition: background-color 0.15s ease, transform 0.12s ease;
}
.wb-like:hover {
background: rgba(12, 12, 14, 0.75);
}
.wb-like:focus-visible {
outline: 2px solid #fff;
outline-offset: 2px;
}
.wb-like:active {
transform: scale(0.94);
}
.wb-like-heart {
width: 1.05em;
height: 1.05em;
flex: none;
fill: none;
stroke: currentColor;
stroke-width: 1.7;
transition: fill 0.18s ease, transform 0.18s ease;
}
.wb-like[aria-pressed="true"] {
color: var(--wb-like-on, #ff5b6e);
}
.wb-like[aria-pressed="true"] .wb-like-heart {
fill: currentColor;
stroke: currentColor;
}
.wb-like.is-beating .wb-like-heart {
animation: wb-like-beat 0.42s ease;
}
@keyframes wb-like-beat {
0% { transform: scale(1); }
35% { transform: scale(1.35); }
60% { transform: scale(0.92); }
100% { transform: scale(1); }
}
.wb-like.is-refused {
opacity: 0.55;
}
.wb-like-count {
min-width: 1ch;
}
.wb-like-solo {
display: flex;
justify-content: flex-end;
padding-top: 0.4rem;
}
.wb-like-solo .wb-like {
position: static;
color: inherit;
background: transparent;
-webkit-backdrop-filter: none;
backdrop-filter: none;
padding: 0.25em 0;
}
.wb-like-solo .wb-like:hover {
background: transparent;
opacity: 0.8;
}
.wb-like-solo .wb-like:focus-visible {
outline-color: currentColor;
}
.wb-rank {
position: absolute;
left: 0.5rem;
top: 0.5rem;
z-index: 2;
display: inline-flex;
align-items: center;
justify-content: center;
min-width: 1.75em;
height: 1.75em;
padding: 0 0.4em;
border-radius: 999px;
font-size: 0.75rem;
font-weight: 700;
font-variant-numeric: tabular-nums;
line-height: 1;
color: #fff;
background: rgba(12, 12, 14, 0.55);
-webkit-backdrop-filter: blur(6px);
backdrop-filter: blur(6px);
}
@media (prefers-reduced-motion: reduce) {
.wb-like,
.wb-like-heart,
.wb-portfolio-link {
transition: none;
}
.wb-like.is-beating .wb-like-heart {
animation: none;
}
}
.wb-top-periods {
display: flex;
flex-wrap: wrap;
gap: .4rem;
margin: 0 0 1.25rem;
}
.wb-top-period {
display: inline-flex;
align-items: center;
min-height: 2.4rem;
padding: .4rem 1rem;
border: 1px solid currentColor;
border-radius: 999px;
font-size: .76rem;
text-transform: uppercase;
letter-spacing: .1em;
text-decoration: none;
color: inherit;
opacity: .55;
transition: opacity .15s ease, border-color .15s ease;
}
.wb-top-period:hover { opacity: .9; }
.wb-top-period.is-active { opacity: 1; font-weight: 700; }
.wb-top-empty { opacity: .7; }
.gslide-media { position: relative; }
.wb-like--lightbox {
right: .75rem;
bottom: .75rem;
font-size: .9375rem;
padding: .45em .85em;
opacity: 1;
z-index: 3;
}
.wb-like--lightbox .wb-like-heart { width: 1.15em; height: 1.15em; }
@media (max-width: 40rem) {
.wb-like--lightbox { right: .5rem; bottom: .5rem; }
}