fills the remaining space. ========================================================================== */ body.cb-has-sidebar #primary { display: grid; grid-template-columns: var(--cb-sidebar-width) 1fr; gap: var(--cb-sidebar-gap); align-items: start; overflow: clip; } /* Prevent grid children from pushing 1fr column wider than available space */ body.cb-has-sidebar #primary > * { min-width: 0; } /* ========================================================================== SIDEBAR CONTAINER Scrolls with the page, sticks when its content ends. JS sets --cb-sidebar-top dynamically based on content height vs viewport. ========================================================================== */ .cb-sidebar { position: sticky; top: var(--cb-sidebar-top, 20px); display: flex; flex-direction: column; gap: 20px; padding: 0 0 10px; } /* ========================================================================== SECTION (title + tiles) ========================================================================== */ .cb-sidebar__section { display: flex; flex-direction: column; } .cb-sidebar__title { font-size: 14px; font-weight: 600; color: var(--cb-sidebar-text-label); letter-spacing: 0.3px; margin: 0 0 12px 0; padding: 0 4px; line-height: 1.3; } /* ========================================================================== SWIPEABLE TILES CONTAINER Horizontal scroll with hidden scrollbar and snap points. ========================================================================== */ .cb-sidebar__tiles { display: flex; gap: 10px; overflow-x: auto; scroll-snap-type: x mandatory; -webkit-overflow-scrolling: touch; scrollbar-width: none; /* Firefox */ padding: 2px; /* prevent clipping of box-shadows */ } .cb-sidebar__tiles::-webkit-scrollbar { display: none; /* Chrome / Safari */ } /* (grid layout removed — categories now use featured-single swipeable tiles) */ /* ========================================================================== TILE BASE (Glassmorphism) Shared styles for all tile variants. ========================================================================== */ .cb-sidebar__tile { flex-shrink: 0; scroll-snap-align: start; border-radius: var(--cb-sidebar-radius); overflow: hidden; text-decoration: none; color: var(--cb-sidebar-text); position: relative; transition: transform 0.2s ease, box-shadow 0.2s ease; /* Curved glass */ background: var(--cb-sidebar-glass-bg) !important; backdrop-filter: blur(12px) saturate(200%) brightness(110%) !important; -webkit-backdrop-filter: blur(12px) saturate(200%) brightness(110%) !important; border: 1px solid var(--cb-sidebar-glass-border) !important; border-top-color: rgba(255, 255, 255, 0.25) !important; box-shadow: inset 0 1px 1px rgba(255, 255, 255, 0.35), inset 0 -1px 1px rgba(0, 0, 0, 0.08) !important; } /* Glass distortion layer — captures backdrop then warps via SVG displacement */ .cb-sidebar__tile::before { content: ''; position: absolute; inset: 0; border-radius: inherit; backdrop-filter: blur(0px); -webkit-backdrop-filter: blur(0px); filter: url(#cb-glass-strong); pointer-events: none; z-index: 0; } .cb-sidebar__tile:hover { transform: translateY(-2px); box-shadow: var(--cb-sidebar-tile-shadow); border-color: var(--cb-sidebar-glass-border-hover); color: var(--cb-sidebar-text); text-decoration: none; } .cb-sidebar__tile:focus-visible { outline: 2px solid rgba(207, 0, 0, 0.8); outline-offset: 2px; } /* Remove dotted/dashed outline on click/drag */ .cb-sidebar__tile:focus:not(:focus-visible) { outline: none; } .cb-sidebar__tiles.is-grabbing .cb-sidebar__tile { outline: none; } /* ========================================================================== NEWS TILE (What's New) Full image background, text overlay at bottom, no border, shadow. ========================================================================== */ .cb-sidebar__tile--news { width: 100%; height: 160px; flex-shrink: 0; border: none; background: none; backdrop-filter: none !important; -webkit-backdrop-filter: none !important; box-shadow: 0 4px 16px rgba(0, 0, 0, 0.4); } .cb-sidebar__tile--news:hover { border: none; box-shadow: 0 8px 28px rgba(0, 0, 0, 0.5); } /* News tiles: one at a time, no preview of next */ .cb-sidebar__tiles--news { overflow: hidden; gap: 0; padding: 0; } .cb-sidebar__tiles--news .cb-sidebar__tile--news { min-width: 100%; } /* News overlay: text bold, vertically centered, left-aligned */ .cb-sidebar__tile--news .cb-sidebar__tile-overlay { inset: 0; background: linear-gradient(transparent 30%, rgba(0, 0, 0, 0.6)); justify-content: center; align-items: flex-start; padding: 16px; } .cb-sidebar__tile-img { position: absolute; inset: 0; width: 100%; height: 100%; background-size: cover; background-position: center; background-color: rgba(255, 255, 255, 0.05); /* placeholder tint */ z-index: 0; } .cb-sidebar__tile-title { font-size: 14px; font-weight: 700; color: var(--cb-sidebar-text); display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; line-height: 1.3; text-shadow: 0 1px 4px rgba(0, 0, 0, 0.6); } .cb-sidebar__tile-desc { font-size: 12px; font-weight: 600; color: var(--cb-sidebar-text); display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; line-height: 1.4; text-shadow: 0 1px 3px rgba(0, 0, 0, 0.5); } /* ========================================================================== FEATURED TILE ~160px wide, ~200px tall, full image bg with gradient overlay at bottom. ========================================================================== */ .cb-sidebar__tile--featured { width: 100%; height: 160px; border: none; background: none; backdrop-filter: none; -webkit-backdrop-filter: none; box-shadow: 0 4px 16px rgba(0, 0, 0, 0.4); } .cb-sidebar__tile--featured:hover { border: none; box-shadow: 0 8px 28px rgba(0, 0, 0, 0.5); } /* Featured tiles: one at a time, autoplay like news */ .cb-sidebar__tiles--featured-single { overflow: hidden; gap: 0; padding: 0; } .cb-sidebar__tiles--featured-single .cb-sidebar__tile { min-width: 100%; } /* Label: top-right corner, plain text */ .cb-sidebar__badge { position: absolute; top: 12px; right: 12px; font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.5px; z-index: 2; color: #fff; text-shadow: 0 1px 4px rgba(0, 0, 0, 0.6); } /* Featured overlay: name at bottom-left only */ .cb-sidebar__tile-overlay--bottom { top: auto; bottom: 0; left: 0; right: 0; padding: 24px 12px 12px; background: linear-gradient(transparent, rgba(0, 0, 0, 0.65)); justify-content: flex-end; align-items: flex-start; } .cb-sidebar__tile-overlay { position: absolute; bottom: 0; left: 0; right: 0; padding: 24px 12px 12px; background: linear-gradient(transparent, rgba(0, 0, 0, 0.7)); display: flex; flex-direction: column; gap: 4px; z-index: 1; } .cb-sidebar__tile-name { font-size: 14px; font-weight: 600; color: var(--cb-sidebar-text); line-height: 1.3; } .cb-sidebar__tile-role { font-size: 11px; font-weight: 600; text-transform: uppercase; letter-spacing: 0.5px; padding: 2px 8px; border-radius: 4px; width: fit-content; line-height: 1.4; } /* Role color variants */ .cb-sidebar__tile-role--host { background: var(--cb-sidebar-role-host); color: var(--cb-sidebar-text); } .cb-sidebar__tile-role--guest { background: var(--cb-sidebar-role-guest); color: var(--cb-sidebar-text); } .cb-sidebar__tile-role--both { background: rgba(207, 0, 0, 0.8); color: var(--cb-sidebar-text); } .cb-sidebar__tile-role--studio { background: var(--cb-sidebar-role-studio); color: var(--cb-sidebar-text); } /* ========================================================================== CATEGORY TILE (image-based, same format as featured) Full image background with fallback color, name + count at bottom-left. ========================================================================== */ .cb-sidebar__tile--category-img { width: 100%; height: 160px; min-width: 100%; border: none; background: none; backdrop-filter: none; -webkit-backdrop-filter: none; box-shadow: 0 4px 16px rgba(0, 0, 0, 0.4); position: relative; } .cb-sidebar__tile--category-img:hover { border: none; box-shadow: 0 8px 28px rgba(0, 0, 0, 0.5); } .cb-sidebar__tile-cat-count { font-size: 12px; color: rgba(255, 255, 255, 0.75); line-height: 1.3; text-shadow: 0 1px 3px rgba(0, 0, 0, 0.5); } /* ========================================================================== DRAG / SWIPE STATES (set by JS) ========================================================================== */ /* Tiles container is swipeable (idle state) */ .cb-sidebar__tiles[data-swipeable] { cursor: grab; } /* Actively being dragged */ .cb-sidebar__tiles.is-grabbing { cursor: grabbing; scroll-snap-type: none; /* disable snap during drag for smooth feel */ } .cb-sidebar__tiles.is-grabbing .cb-sidebar__tile { pointer-events: none; /* prevent accidental click during drag */ } /* ========================================================================== RESPONSIVE ========================================================================== */ /* Tablet: tighten sidebar width */ @media (max-width: 1024px) { :root { --cb-sidebar-width: 230px; } } /* Mobile: hide sidebar, restore single-column layout */ @media (max-width: 768px) { body.cb-has-sidebar #primary { grid-template-columns: 1fr; row-gap: 0; overflow: visible; } .cb-sidebar { display: none; } } /* ========================================================================== ACCESSIBILITY ========================================================================== */ @media (prefers-reduced-motion: reduce) { .cb-sidebar__tile { transition: none; } } /* High contrast mode: strengthen borders */ @media (forced-colors: active) { .cb-sidebar__tile { border: 2px solid ButtonText; } .cb-sidebar__tile-role { border: 1px solid ButtonText; } }