.nfyt {
--nfyt-gap: 24px;
--nfyt-radius: 0;
--nfyt-btn-radius: 0;
--nfyt-btn-height: 48px;
--nfyt-dark: #000;
--nfyt-dark-text: #fff;
--nfyt-accent: #ff0033;
--nfyt-accent-text: #fff;
--nfyt-muted: #6b7280;
--nfyt-cols: 3;
}
.nfyt__header {
display: flex;
align-items: center;
justify-content: space-between;
gap: 16px;
margin-bottom: var(--nfyt-gap);
}
.nfyt__channel {
font-weight: 700;
font-size: 1.15em;
color: inherit;
text-decoration: none;
} .nfyt .nfyt__subscribe,
.nfyt .nfyt__btn {
display: inline-flex;
align-items: center;
justify-content: center;
box-sizing: border-box;
min-height: var(--nfyt-btn-height);
margin: 0;
padding: 0 22px;
border: 0;
border-radius: var(--nfyt-btn-radius);
background: var(--nfyt-accent);
color: var(--nfyt-accent-text);
font-family: inherit;
font-size: 11px;
font-weight: 800;
line-height: 1;
text-align: center;
text-decoration: none;
text-transform: uppercase;
letter-spacing: 2px;
box-shadow: none;
transition: opacity .2s;
}
.nfyt .nfyt__subscribe:hover,
.nfyt .nfyt__btn:hover,
.nfyt .nfyt__subscribe:focus,
.nfyt .nfyt__btn:focus {
background: var(--nfyt-accent);
color: var(--nfyt-accent-text);
opacity: .85;
}
.nfyt button.nfyt__btn { cursor: pointer; }
.nfyt .nfyt__btn--dark,
.nfyt .nfyt__btn--dark:hover,
.nfyt .nfyt__btn--dark:focus {
background: var(--nfyt-dark);
color: var(--nfyt-dark-text);
}
.nfyt__btn:focus-visible { outline: 3px solid var(--nfyt-accent); outline-offset: 2px; } .nfyt--grid .nfyt__list {
display: grid;
grid-template-columns: repeat(var(--nfyt-cols), minmax(0, 1fr));
gap: var(--nfyt-gap);
}
@media (max-width: 960px) {
.nfyt--grid .nfyt__list { grid-template-columns: repeat(min(var(--nfyt-cols), 2), minmax(0, 1fr)); }
}
@media (max-width: 600px) {
.nfyt--grid .nfyt__list { grid-template-columns: 1fr; }
} .nfyt--list .nfyt__list {
display: flex;
flex-direction: column;
gap: var(--nfyt-gap);
}
.nfyt--list .nfyt__item {
display: grid;
grid-template-columns: minmax(0, 2fr) minmax(0, 3fr);
gap: var(--nfyt-gap);
align-items: center;
}
@media (max-width: 600px) {
.nfyt--list .nfyt__item { grid-template-columns: 1fr; gap: 12px; }
} .nfyt__player {
position: relative;
aspect-ratio: 16 / 9;
overflow: hidden;
border-radius: var(--nfyt-radius);
background: #000;
}
.nfyt__play {
all: unset;
position: absolute;
inset: 0;
cursor: pointer;
display: block;
}
.nfyt__play img {
width: 100%;
height: 100%;
object-fit: cover; display: block;
transition: transform .4s ease;
}
.nfyt__play:hover img { transform: scale(1.04); }
.nfyt__play:focus-visible { outline: 3px solid var(--nfyt-accent); outline-offset: -3px; }
.nfyt__icon {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
line-height: 0;
}
.nfyt__icon-bg { fill: #212121; fill-opacity: .8; transition: fill .2s, fill-opacity .2s; }
.nfyt__play:hover .nfyt__icon-bg,
.nfyt__play:focus-visible .nfyt__icon-bg { fill: var(--nfyt-accent); fill-opacity: 1; }
.nfyt__player iframe {
position: absolute;
inset: 0;
width: 100%;
height: 100%;
border: 0;
} .nfyt__meta { margin-top: 12px; }
.nfyt--list .nfyt__meta { margin-top: 0; }
.nfyt__title {
margin: 0 0 4px;
font-size: 1em;
line-height: 1.35;
}
.nfyt__date {
display: block;
font-size: .85em;
color: var(--nfyt-muted);
}
.nfyt__desc {
margin: 8px 0 0;
font-size: .9em;
color: var(--nfyt-muted);
} .nfyt__item--enter {
animation: nfyt-in .55s cubic-bezier(.2, .7, .2, 1) both;
}
@keyframes nfyt-in {
from { opacity: 0; transform: translateY(18px); }
to   { opacity: 1; transform: none; }
} .nfyt .nfyt__loadmore { transition: opacity .3s, transform .3s; }
.nfyt .nfyt__loadmore.is-loading { pointer-events: none; opacity: .75; }
.nfyt__loadmore.is-loading::after {
content: "";
flex: none;
width: .9em;
height: .9em;
margin-left: .6em;
box-sizing: border-box;
border: 2px solid currentColor;
border-right-color: transparent;
border-radius: 50%;
animation: nfyt-spin .7s linear infinite;
}
.nfyt__loadmore.has-error { animation: nfyt-shake .4s; }
.nfyt .nfyt__loadmore.is-leaving { opacity: 0; transform: scale(.95); }
@keyframes nfyt-spin { to { transform: rotate(360deg); } }
@keyframes nfyt-shake {
25% { transform: translateX(-4px); }
75% { transform: translateX(4px); }
}
@media (prefers-reduced-motion: reduce) {
.nfyt__item--enter,
.nfyt__loadmore.is-loading::after,
.nfyt__loadmore.has-error { animation: none; }
}
.nfyt__more {
display: flex;
flex-wrap: wrap;
justify-content: center;
gap: 12px;
margin: var(--nfyt-gap) 0 0;
}
.nfyt-error {
padding: 12px 16px;
border-left: 4px solid #d63638;
background: #fcf0f1;
color: #1d2327;
}