:root {
--ygo-primary: #0066FF;
--ygo-accent: #00D2D3;
--ygo-navy: #0A192F;
--ygo-surface: #FFFFFF;
--ygo-surface-subtle: #F8FAFC;
--ygo-text: #0F172A;
--ygo-text-muted: #64748B;
--ygo-border: rgba(0, 0, 0, 0.08);
--ygo-radius: 16px;
--ygo-radius-inner: 12px;
--ygo-title-color: #0F172A;
--ygo-title-hover-color: #0066FF;
--ygo-date-color: #64748B;
--ygo-desc-color: #475569;
--ygo-icon-color: #0066FF;
--ygo-icon-bg: rgba(255, 255, 255, 0.9);
--ygo-card-bg: #FFFFFF;
--ygo-card-border: rgba(0, 0, 0, 0.08);
--ygo-btn-bg: #FFFFFF;
--ygo-btn-color: #0F172A;
--ygo-shadow: 0 4px 20px -2px rgba(0, 0, 0, 0.05), 0 2px 6px -1px rgba(0, 0, 0, 0.03);
--ygo-shadow-hover: 0 16px 32px -4px rgba(0, 102, 255, 0.12), 0 4px 12px -2px rgba(0, 0, 0, 0.04);
--ygo-font: -apple-system, BlinkMacSystemFont, "SF Pro Display", "SF Pro Text", "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
--ygo-transition: all 0.3s cubic-bezier(0.16, 1, 0.3, 1);
} .ygo-container {
width: 100%;
margin: 1.5rem 0;
box-sizing: border-box;
font-family: var(--ygo-font);
color: var(--ygo-text);
-webkit-font-smoothing: antialiased;
}
.ygo-container * {
box-sizing: border-box;
} .ygo-container.ygo-theme-colors { --ygo-theme-accent: var(--ast-global-color-0, var(--e-global-color-accent, var(--wp--preset--color--accent, var(--wp--preset--color--primary, currentColor))));
--ygo-theme-accent-hover: var(--ast-global-color-1, var(--ast-global-color-0, var(--e-global-color-accent, var(--wp--preset--color--accent, currentColor))));
--ygo-theme-heading: var(--ast-global-color-2, var(--e-global-color-primary, var(--wp--preset--color--contrast, inherit)));
--ygo-theme-text: var(--ast-global-color-3, var(--e-global-color-text, inherit));
--ygo-theme-surface: var(--ast-global-color-5, var(--ast-global-color-4, var(--wp--preset--color--base, #FFFFFF)));
--ygo-theme-border: var(--ast-global-color-6, rgba(0, 0, 0, 0.08));
--ygo-theme-meta: var(--ast-global-color-7, var(--ast-global-color-3, #64748B)); --ygo-primary: var(--ygo-theme-accent);
--ygo-accent: var(--ygo-theme-accent-hover);
--ygo-title-color: var(--ygo-theme-heading);
--ygo-title-hover-color: var(--ygo-theme-accent-hover);
--ygo-icon-color: var(--ygo-theme-accent);
--ygo-icon-bg: rgba(255, 255, 255, 0.95);
--ygo-date-color: var(--ygo-theme-meta);
--ygo-card-bg: var(--ygo-theme-surface);
--ygo-card-border: var(--ygo-theme-border);
--ygo-border-hover: var(--ygo-theme-accent);
--ygo-btn-bg: var(--ygo-theme-surface);
--ygo-btn-color: var(--ygo-theme-text);
--ygo-font: inherit;
font-family: inherit;
color: var(--ygo-theme-text);
}
.ygo-container.ygo-theme-colors .ygo-card {
background: var(--ygo-theme-surface);
border-color: var(--ygo-theme-border);
}
.ygo-container.ygo-theme-colors .ygo-card:hover {
border-color: var(--ygo-theme-accent);
box-shadow: 0 12px 30px -4px rgba(0, 0, 0, 0.1);
}
.ygo-container.ygo-theme-colors .ygo-title {
font-family: inherit;
color: var(--ygo-theme-heading);
}
.ygo-container.ygo-theme-colors .ygo-title-link {
color: var(--ygo-theme-heading);
}
.ygo-container.ygo-theme-colors .ygo-title-link:hover {
color: var(--ygo-theme-accent-hover);
}
.ygo-container.ygo-theme-colors .ygo-date {
color: var(--ygo-theme-meta);
}
.ygo-container.ygo-theme-colors .ygo-play-button {
color: var(--ygo-theme-accent);
border-color: rgba(255, 255, 255, 0.8);
}
.ygo-container.ygo-theme-colors .ygo-facade:hover .ygo-play-button {
background: var(--ygo-theme-accent);
color: #FFFFFF;
box-shadow: 0 8px 25px rgba(0, 0, 0, 0.25);
border-color: transparent;
}
.ygo-container.ygo-theme-colors .ygo-btn-load-more {
font-family: inherit;
background: var(--ygo-theme-surface);
border-color: var(--ygo-theme-border);
color: var(--ygo-theme-text);
}
.ygo-container.ygo-theme-colors .ygo-btn-load-more:hover {
background: var(--ygo-theme-accent);
border-color: var(--ygo-theme-accent);
color: #FFFFFF;
} .ygo-layout-grid .ygo-items-wrapper {
display: grid;
gap: 1.5rem;
grid-template-columns: repeat(var(--ygo-cols, 3), minmax(0, 1fr));
}
.ygo-cols-1 .ygo-items-wrapper { grid-template-columns: 1fr; }
.ygo-cols-2 .ygo-items-wrapper { grid-template-columns: repeat(2, 1fr); }
.ygo-cols-3 .ygo-items-wrapper { grid-template-columns: repeat(3, 1fr); }
.ygo-cols-4 .ygo-items-wrapper { grid-template-columns: repeat(4, 1fr); }
@media (max-width: 1024px) {
.ygo-cols-4 .ygo-items-wrapper,
.ygo-cols-3 .ygo-items-wrapper {
grid-template-columns: repeat(2, 1fr);
}
}
@media (max-width: 640px) {
.ygo-layout-grid .ygo-items-wrapper,
.ygo-cols-4 .ygo-items-wrapper,
.ygo-cols-3 .ygo-items-wrapper,
.ygo-cols-2 .ygo-items-wrapper {
grid-template-columns: 1fr;
gap: 1.25rem;
}
} .ygo-layout-single .ygo-items-wrapper {
display: block;
width: 100%;
max-width: 100%;
}
.ygo-layout-single .ygo-card {
border: none;
box-shadow: var(--ygo-shadow);
}
.ygo-layout-single .ygo-card:hover {
box-shadow: var(--ygo-shadow-hover);
} .ygo-layout-list .ygo-items-wrapper {
display: flex;
flex-direction: column;
gap: 1rem;
}
.ygo-layout-list .ygo-card {
display: flex;
flex-direction: row;
align-items: center;
}
.ygo-layout-list .ygo-media-wrapper {
width: 320px;
flex-shrink: 0;
}
.ygo-layout-list .ygo-content {
flex-grow: 1;
padding: 1.25rem;
}
@media (max-width: 768px) {
.ygo-layout-list .ygo-card {
flex-direction: column;
}
.ygo-layout-list .ygo-media-wrapper {
width: 100%;
}
} .ygo-card {
position: relative;
background: var(--ygo-card-bg, var(--ygo-surface));
border: 1px solid var(--ygo-card-border, var(--ygo-border));
border-radius: var(--ygo-radius);
overflow: hidden;
transition: var(--ygo-transition);
display: flex;
flex-direction: column;
}
.ygo-card:hover {
transform: translateY(-4px);
box-shadow: var(--ygo-shadow-hover);
border-color: var(--ygo-border-hover, rgba(0, 102, 255, 0.25));
} .ygo-media-wrapper {
position: relative;
width: 100%;
aspect-ratio: 16 / 9;
background: #000;
overflow: hidden;
}
.ygo-facade {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
cursor: pointer;
overflow: hidden;
}
.ygo-thumbnail {
width: 100%;
height: 100%;
object-fit: cover;
display: block;
transition: transform 0.6s cubic-bezier(0.16, 1, 0.3, 1);
}
.ygo-card:hover .ygo-thumbnail,
.ygo-facade:hover .ygo-thumbnail {
transform: scale(1.05);
}
.ygo-overlay {
position: absolute;
inset: 0;
background: linear-gradient(180deg, rgba(10, 25, 47, 0.1) 0%, rgba(10, 25, 47, 0.45) 100%);
display: flex;
align-items: center;
justify-content: center;
transition: var(--ygo-transition);
}
.ygo-facade:hover .ygo-overlay {
background: linear-gradient(180deg, rgba(10, 25, 47, 0.05) 0%, rgba(10, 25, 47, 0.35) 100%);
} .ygo-play-button {
width: 58px;
height: 58px;
border-radius: 50%;
background: var(--ygo-icon-bg, rgba(255, 255, 255, 0.9));
backdrop-filter: blur(12px);
-webkit-backdrop-filter: blur(12px);
display: flex;
align-items: center;
justify-content: center;
color: var(--ygo-icon-color, var(--ygo-primary));
box-shadow: 0 4px 20px rgba(0, 0, 0, 0.25);
transition: var(--ygo-transition);
border: 1px solid rgba(255, 255, 255, 0.6);
}
.ygo-play-button svg {
margin-left: 3px;
transition: transform 0.3s ease;
}
.ygo-facade:hover .ygo-play-button {
transform: scale(1.15);
background: linear-gradient(135deg, var(--ygo-primary), var(--ygo-accent));
color: #FFFFFF;
box-shadow: 0 8px 30px rgba(0, 102, 255, 0.45);
border-color: transparent;
}
.ygo-facade:hover .ygo-play-button svg {
transform: scale(1.08);
}
.ygo-facade:focus {
outline: 2px solid var(--ygo-primary);
outline-offset: -2px;
} .ygo-iframe-player {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
border: none;
} .ygo-content {
padding: 1.15rem 1.25rem;
display: flex;
flex-direction: column;
flex-grow: 1;
}
.ygo-date {
display: inline-block;
font-size: 0.78rem;
font-weight: 500;
color: var(--ygo-date-color, var(--ygo-text-muted));
text-transform: uppercase;
letter-spacing: 0.04em;
margin-bottom: 0.45rem;
}
.ygo-title {
margin: 0 0 0.5rem 0;
font-size: 1.02rem;
line-height: 1.4;
font-weight: 600;
color: var(--ygo-title-color, var(--ygo-text));
}
.ygo-title-link {
color: inherit;
text-decoration: none;
transition: color 0.2s ease;
display: -webkit-box;
-webkit-line-clamp: 2;
-webkit-box-orient: vertical;
overflow: hidden;
}
.ygo-title-link:hover {
color: var(--ygo-title-hover-color, var(--ygo-primary));
}
.ygo-description {
font-size: 0.88rem;
line-height: 1.5;
color: var(--ygo-desc-color, var(--ygo-text-muted));
margin: 0;
display: -webkit-box;
-webkit-line-clamp: 2;
-webkit-box-orient: vertical;
overflow: hidden;
} .ygo-pagination-wrapper {
display: flex;
justify-content: center;
margin-top: 2.25rem;
width: 100%;
}
.ygo-btn-load-more {
display: inline-flex;
align-items: center;
gap: 0.6rem;
padding: 0.75rem 1.75rem;
border-radius: 9999px;
background: var(--ygo-btn-bg, var(--ygo-surface));
color: var(--ygo-btn-color, var(--ygo-text));
border: 1px solid var(--ygo-border);
font-family: inherit;
font-size: 0.92rem;
font-weight: 600;
cursor: pointer;
box-shadow: var(--ygo-shadow);
transition: var(--ygo-transition);
}
.ygo-btn-load-more:hover {
transform: translateY(-2px);
box-shadow: var(--ygo-shadow-hover);
border-color: var(--ygo-primary);
color: var(--ygo-primary);
}
.ygo-btn-load-more:active {
transform: translateY(0);
}
.ygo-btn-load-more.ygo-loading {
opacity: 0.75;
cursor: wait;
pointer-events: none;
}
.ygo-btn-load-more.ygo-loading .ygo-btn-icon svg {
animation: ygo-spin 0.8s linear infinite;
}
@keyframes ygo-spin {
from { transform: rotate(0deg); }
to { transform: rotate(360deg); }
}
.ygo-btn-icon svg {
transition: transform 0.2s ease;
}
.ygo-btn-load-more:hover .ygo-btn-icon svg {
transform: translateY(2px);
} .ygo-modal-backdrop {
position: fixed;
inset: 0;
z-index: 999999;
background: rgba(10, 25, 47, 0.78);
backdrop-filter: blur(16px);
-webkit-backdrop-filter: blur(16px);
display: flex;
align-items: center;
justify-content: center;
padding: 1.5rem;
opacity: 0;
visibility: hidden;
transition: opacity 0.3s ease, visibility 0.3s ease;
}
.ygo-modal-backdrop.ygo-active {
opacity: 1;
visibility: visible;
}
.ygo-modal-window {
position: relative;
width: 100%;
max-width: 920px;
background: #000;
border-radius: var(--ygo-radius);
overflow: hidden;
box-shadow: 0 25px 60px -15px rgba(0, 0, 0, 0.5);
border: 1px solid rgba(255, 255, 255, 0.1);
transform: scale(0.95);
transition: transform 0.35s cubic-bezier(0.16, 1, 0.3, 1);
}
.ygo-modal-backdrop.ygo-active .ygo-modal-window {
transform: scale(1);
}
.ygo-modal-video-container {
position: relative;
width: 100%;
aspect-ratio: 16 / 9;
}
.ygo-modal-video-container iframe {
position: absolute;
inset: 0;
width: 100%;
height: 100%;
border: none;
}
.ygo-modal-close {
position: absolute;
top: -46px;
right: 0;
width: 36px;
height: 36px;
border-radius: 50%;
background: rgba(255, 255, 255, 0.2);
border: none;
color: #FFFFFF;
display: flex;
align-items: center;
justify-content: center;
cursor: pointer;
transition: var(--ygo-transition);
}
.ygo-modal-close:hover {
background: rgba(255, 255, 255, 0.4);
transform: rotate(90deg);
}
.ygo-error-notice,
.ygo-empty-notice {
padding: 1rem 1.25rem;
border-radius: var(--ygo-radius);
background: #FEF2F2;
border: 1px solid #FCA5A5;
color: #991B1B;
font-size: 0.9rem;
margin: 1rem 0;
}