/* source: components/post-card/box.php */ .archive-post-v2 { --card-accent: var(--theme-color, #eb144c); --card-bg: var(--bg-card, #ffffff); --card-border: var( --border-color, rgba(20,24,35,.08) ); --card-text: var( --text-primary, #1b1f2a ); --card-muted: var( --text-muted, #727986 ); --card-soft: color-mix( in srgb, var(--card-accent) 6%, transparent ); position: relative; display: block; width: 100%; height: 100%; overflow: hidden; isolation: isolate; border: 1px solid var(--card-border) !important; border-radius: 18px !important; background: linear-gradient( 145deg, var(--card-bg) 0%, var(--card-bg) 72%, color-mix( in srgb, var(--card-accent) 4%, var(--card-bg) ) 100% ); text-decoration: none !important; box-shadow: 0 2px 7px rgba(20,25,35,.025), 0 8px 22px rgba(20,25,35,.035); transition: transform .25s cubic-bezier(.2,.8,.2,1), box-shadow .25s ease, border-color .25s ease; } .archive-post-v2.has-mod:not(.has-new):not(.has-update) { --card-accent: #e53935; background: linear-gradient( 145deg, color-mix( in srgb, #e53935 4.5%, var(--card-bg) ), var(--card-bg) 70%, color-mix( in srgb, #e53935 7%, var(--card-bg) ) ); } .archive-post-v2.has-new:not(.has-mod):not(.has-update) { --card-accent: #2196f3; background: linear-gradient( 145deg, color-mix( in srgb, #2196f3 4.5%, var(--card-bg) ), var(--card-bg) 70%, color-mix( in srgb, #2196f3 7%, var(--card-bg) ) ); } .archive-post-v2.has-update:not(.has-mod):not(.has-new) { --card-accent: #20a05a; background: linear-gradient( 145deg, color-mix( in srgb, #20a05a 4.5%, var(--card-bg) ), var(--card-bg) 70%, color-mix( in srgb, #20a05a 7%, var(--card-bg) ) ); } .archive-post-v2.has-mod.has-new { --card-accent: #2196f3; background: radial-gradient( circle at 15% 50%, rgba(33,150,243,.10), transparent 54% ), linear-gradient( 145deg, color-mix( in srgb, #2196f3 5%, var(--card-bg) ), var(--card-bg) 68%, color-mix( in srgb, #2196f3 8%, var(--card-bg) ) ); border-color: rgba(33,150,243,.16) !important; } .archive-post-v2.has-mod.has-update { --card-accent: #20a05a; background: radial-gradient( circle at 15% 50%, rgba(32,160,90,.10), transparent 54% ), linear-gradient( 145deg, color-mix( in srgb, #20a05a 5%, var(--card-bg) ), var(--card-bg) 68%, color-mix( in srgb, #20a05a 8%, var(--card-bg) ) ); border-color: rgba(32,160,90,.16) !important; } .archive-post-v2.has-new.has-update { --card-accent: #2196f3; background: linear-gradient( 145deg, color-mix( in srgb, #2196f3 4%, var(--card-bg) ), var(--card-bg) 64%, color-mix( in srgb, #20a05a 6%, var(--card-bg) ) ); } .archive-post-v2.has-mod.has-new.has-update { --card-accent: #2196f3; background: linear-gradient( 110deg, color-mix( in srgb, #2196f3 7%, var(--card-bg) ), var(--card-bg) 48%, color-mix( in srgb, #20a05a 7%, var(--card-bg) ) ); border-color: rgba(33,150,243,.15) !important; } .archive-post-v2::before { content: ""; position: absolute; top: 0; right: 20px; left: 20px; height: 2px; border-radius: 0 0 12px 12px; background: linear-gradient( 90deg, transparent, var(--card-accent), transparent ); opacity: .45; transform: scaleX(.55); transition: transform .3s ease, opacity .3s ease; z-index: 8; } .archive-post-v2:hover { transform: translateY(-4px); border-color: color-mix( in srgb, var(--card-accent) 26%, var(--card-border) ) !important; box-shadow: 0 9px 24px rgba(20,25,35,.055), 0 16px 38px color-mix( in srgb, var(--card-accent) 9%, transparent ); } .archive-post-v2:hover::before { transform: scaleX(1); opacity: .85; } .archive-post-status { position: absolute; top: 50%; left: -14px; right: 0; z-index: 1; display: flex; align-items: center; justify-content: center; pointer-events: none; user-select: none; transform: translateY(-50%) translateX(-8px) rotate(-5deg); white-space: nowrap; direction: ltr; } .archive-post-status .status-word { display: inline-block; font-family: inherit; font-weight: 1000; line-height: .85; letter-spacing: -2px; white-space: nowrap; opacity: .10; text-shadow: 0 1px 1px rgba(255,255,255,.08); } .archive-post-status .status-mod { color: #e53935; font-size: 65px; } .archive-thumb-status { position: absolute; top: 7px; right: 7px; z-index: 12; display: flex; align-items: center; gap: 4px; direction: ltr; pointer-events: none; } .archive-thumb-status .thumb-status-label { display: inline-flex; align-items: center; justify-content: center; min-width: 43px; height: 21px; padding: 0 7px; border-radius: 7px; color: #fff; font-size: 9px; font-weight: 800; line-height: 1; letter-spacing: .15px; white-space: nowrap; border: 1px solid rgba(255,255,255,.20); box-shadow: 0 3px 9px rgba(0,0,0,.16); backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px); } .archive-thumb-status .thumb-status-new { background: linear-gradient( 135deg, #2196f3, #1976d2 ); } .archive-thumb-status .thumb-status-update { background: linear-gradient( 135deg, #20a05a, #188548 ); } .archive-post-v2 .archive-card-inner { position: relative; z-index: 3; display: flex; align-items: center; min-height: 132px; padding: 12px; } .archive-post-v2 .archive-thumb { position: relative; width: 108px; height: 108px; flex: 0 0 108px; margin-left: 13px; overflow: hidden; border-radius: 17px; background: var(--bg-light,#f2f4f7); box-shadow: 0 5px 14px rgba(0,0,0,.075); transform: translateZ(0); z-index: 4; } .archive-post-v2 .archive-thumb::after { content: ""; position: absolute; inset: 0; border-radius: inherit; border: 1px solid rgba(255,255,255,.24); pointer-events: none; z-index: 8; } .archive-post-v2 .archive-thumb img { display: block; width: 100%; height: 100%; object-fit: cover; border-radius: inherit; transition: transform .4s cubic-bezier(.2,.8,.2,1); } .archive-post-v2:hover .archive-thumb img { transform: scale(1.07); } .archive-post-v2 .archive-image-views { position: absolute; left: 6px; bottom: 6px; z-index: 9; display: inline-flex; align-items: center; justify-content: center; min-height: 21px; padding: 3px 6px; border-radius: 6px; color: #fff !important; background: rgba(12,16,23,.68); border: 1px solid rgba(255,255,255,.16); backdrop-filter: blur(7px); -webkit-backdrop-filter: blur(7px); font-size: 8.5px; font-weight: 700; line-height: 1; white-space: nowrap; box-shadow: 0 3px 9px rgba(0,0,0,.20); } .archive-post-v2 .archive-image-views svg { width: 10px; height: 10px; margin-left: 4px; flex: 0 0 10px; fill: currentColor !important; opacity: .9; } .archive-post-v2 .archive-image-views span { display: inline-flex; align-items: center; direction: ltr; white-space: nowrap; } .archive-post-v2 .archive-info { position: relative; z-index: 4; min-width: 0; flex: 1; display: flex; flex-direction: column; justify-content: center; gap: 6px; } .archive-post-v2 .archive-title { margin: 0 !important; color: var(--card-text); font-size: 14px; font-weight: 800; line-height: 1.45; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; transition: color .2s ease; } .archive-post-v2:hover .archive-title { color: var(--card-accent); } .archive-post-v2 .archive-version { display: flex; align-items: center; min-width: 0; color: var(--card-muted) !important; font-size: 9.5px; font-weight: 600; line-height: 1.45; white-space: nowrap; } .archive-post-v2 .archive-version-text { display: block; min-width: 0; overflow: hidden; text-overflow: ellipsis; } .archive-post-v2 .archive-size-box { display: block; min-width: 0; color: var(--card-muted) !important; font-size: 9.5px; font-weight: 600; line-height: 1.45; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .archive-post-v2 .archive-mod { display: flex; align-items: center; min-width: 0; color: #e53935 !important; font-size: 9.5px; font-weight: 700; line-height: 1.4; } .archive-post-v2 .archive-mod .mod-feature-text { min-width: 0; color: #e53935 !important; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .archive-post-v2 .archive-arrow { position: absolute; left: 10px; bottom: 10px; z-index: 6; display: flex; align-items: center; justify-content: center; width: 23px; height: 23px; border-radius: 8px; background: color-mix( in srgb, var(--card-accent) 7%, transparent ); color: var(--card-accent); opacity: 0; transform: translateX(4px); transition: opacity .22s ease, transform .22s ease; } .archive-post-v2 .archive-arrow svg { width: 9px; height: 9px; fill: currentColor !important; } .archive-post-v2:hover .archive-arrow { opacity: 1; transform: translateX(0); } body.dark-mode .archive-post-v2 { --card-bg: var(--bg-card,#1c2028); --card-text: #f1f3f5; --card-muted: #a7afb9; border-color: rgba(255,255,255,.075) !important; background: linear-gradient( 145deg, #1c2028, #1b1f26 72% ); box-shadow: 0 5px 18px rgba(0,0,0,.18); } body.dark-mode .archive-post-v2.has-mod.has-new { background: radial-gradient( circle at 15% 50%, rgba(33,150,243,.14), transparent 54% ), linear-gradient( 145deg, #1d2732, #1b1f26 70%, #1c2630 ); border-color: rgba(33,150,243,.21) !important; } body.dark-mode .archive-post-v2.has-mod.has-update { background: radial-gradient( circle at 15% 50%, rgba(32,160,90,.14), transparent 54% ), linear-gradient( 145deg, #1d2923, #1b1f26 70%, #1c2821 ); border-color: rgba(32,160,90,.21) !important; } body.dark-mode .archive-post-status .status-word { opacity: .125; } body.dark-mode .archive-post-status .status-mod { color: #ff4d4d; } body.dark-mode .archive-post-v2 .archive-thumb { background: #292e37; box-shadow: 0 5px 18px rgba(0,0,0,.38); } body.dark-mode .archive-post-v2 .archive-thumb::after { border-color: rgba(255,255,255,.08); } body.dark-mode .archive-post-v2 .archive-mod, body.dark-mode .archive-post-v2 .archive-mod .mod-feature-text { color: #ff4d4d !important; } @media (min-width: 992px) { .archive-post-v2 .archive-card-inner { min-height: 145px; padding: 14px; } .archive-post-v2 .archive-thumb { width: 112px; height: 112px; flex-basis: 112px; margin-left: 14px; border-radius: 18px; } .archive-post-status { left: -18px; transform: translateY(-50%) translateX(-12px) rotate(-5deg); } .archive-post-v2.status-one .archive-post-status .status-mod { font-size: 74px; } .archive-thumb-status { top: 8px; right: 8px; } .archive-thumb-status .thumb-status-label { min-width: 47px; height: 23px; padding: 0 8px; border-radius: 8px; font-size: 10px; } } @media (max-width: 991px) { .archive-post-v2 .archive-card-inner { min-height: 125px; padding: 10px; } .archive-post-v2 .archive-thumb { width: 100px; height: 100px; flex-basis: 100px; margin-left: 11px; border-radius: 16px; } .archive-post-status { left: -10px; transform: translateY(-50%) translateX(-8px) rotate(-5deg); } .archive-post-v2.status-one .archive-post-status .status-mod { font-size: 63px; } .archive-post-v2 .archive-title { font-size: 14px; } .archive-thumb-status { top: 7px; right: 7px; } .archive-thumb-status .thumb-status-label { min-width: 43px; height: 21px; padding: 0 7px; border-radius: 7px; font-size: 9px; } } @media (max-width: 767px) { .archive-post-v2 { border-radius: 15px !important; } .archive-post-v2 .archive-card-inner { min-height: 116px; padding: 8px; } .archive-post-v2 .archive-thumb { width: 96px; height: 96px; flex: 0 0 96px; margin-left: 10px; border-radius: 14px; } .archive-post-status { left: -7px; transform: translateY(-50%) translateX(-7px) rotate(-5deg); } .archive-post-v2.status-one .archive-post-status .status-mod { font-size: 52px; } .archive-thumb-status { top: 5px; right: 5px; gap: 3px; } .archive-thumb-status .thumb-status-label { min-width: 40px; height: 20px; padding: 0 6px; border-radius: 6px; font-size: 8px; box-shadow: 0 2px 7px rgba(0,0,0,.16); } .archive-post-v2 .archive-info { gap: 5px; } .archive-post-v2 .archive-title { font-size: 13px; line-height: 1.4; } .archive-post-v2 .archive-version, .archive-post-v2 .archive-size-box, .archive-post-v2 .archive-mod { font-size: 8.5px; } .archive-post-v2 .archive-image-views { left: 5px; bottom: 5px; min-height: 20px; padding: 3px 5px; font-size: 7.5px; border-radius: 6px; } .archive-post-v2 .archive-image-views svg { width: 9px; height: 9px; flex-basis: 9px; margin-left: 3px; } .archive-post-v2 .archive-arrow { display: none; } } @media (max-width: 480px) { .archive-post-v2 .archive-card-inner { min-height: 112px; padding: 7px; } .archive-post-v2 .archive-thumb { width: 94px; height: 94px; flex-basis: 94px; margin-left: 9px; border-radius: 13px; } .archive-post-status { left: -5px; transform: translateY(-50%) translateX(-6px) rotate(-5deg); } .archive-post-v2.status-one .archive-post-status .status-mod { font-size: 49px; } .archive-thumb-status { top: 5px; right: 5px; gap: 2px; } .archive-thumb-status .thumb-status-label { min-width: 38px; height: 18px; padding: 0 5px; border-radius: 5px; font-size: 7px; } .archive-post-v2 .archive-title { font-size: 12.5px; } .archive-post-v2 .archive-version, .archive-post-v2 .archive-size-box, .archive-post-v2 .archive-mod { font-size: 8px; } .archive-post-v2 .archive-image-views { left: 5px; bottom: 5px; min-height: 18px; padding: 2px 5px; font-size: 7px; border-radius: 5px; } .archive-post-v2 .archive-image-views svg { width: 8px; height: 8px; flex-basis: 8px; margin-left: 3px; } } @media (max-width: 350px) { .archive-post-v2 .archive-card-inner { padding: 6px; } .archive-post-v2 .archive-thumb { width: 88px; height: 88px; flex-basis: 88px; margin-left: 8px; } .archive-post-v2 .archive-title { font-size: 12px; } .archive-post-v2 .archive-version, .archive-post-v2 .archive-size-box, .archive-post-v2 .archive-mod { font-size: 7.5px; } } @media (prefers-reduced-motion: reduce) { .archive-post-v2, .archive-post-v2 *, .archive-post-v2::before { transition: none !important; animation: none !important; } } /* source: components/post-card/box-slider.php */ .hc-card { --hc-bg: var(--bg-card, #fff); --hc-border: var(--border-color, #e9e9e9); --hc-text: var(--text-primary, #202124); --hc-muted: var(--text-muted, #777); --hc-light: var(--bg-light, #f5f6f8); --hc-accent: var(--theme-color, #3b82f6); position: relative; width: 100%; min-width: 0; background: var(--hc-bg); border: 1px solid var(--hc-border); border-radius: 17px; overflow: hidden; box-shadow: 0 4px 16px rgba(0, 0, 0, .045); transition: transform .18s ease, box-shadow .18s ease; isolation: isolate; } .hc-card-link { display: block; color: inherit; text-decoration: none; } .hc-card-media { position: relative; margin: 10px 10px 0; aspect-ratio: 1 / 1; overflow: hidden; border-radius: 13px; background: var(--hc-light); } .hc-card-media img { display: block; width: 100%; height: 100%; object-fit: cover; border-radius: inherit; transition: transform .25s ease; } .hc-card:hover { transform: translateY(-3px); box-shadow: 0 10px 24px rgba(0, 0, 0, .09); } .hc-card:hover .hc-card-media img { transform: scale(1.035); } .hc-card-media::after { content: ""; position: absolute; inset: 0; background: linear-gradient( to top, rgba(0, 0, 0, .46), rgba(0, 0, 0, 0) 48% ); pointer-events: none; z-index: 1; } .hc-card-views { position: absolute; top: 9px; left: 9px; display: inline-flex; align-items: center; gap: 5px; height: 27px; padding: 0 8px; background: rgba(0, 0, 0, .66); color: #fff; border-radius: 8px; font-size: 10px; font-weight: 700; line-height: 1; z-index: 4; } .hc-card-views svg { width: 14px; height: 14px; flex: 0 0 auto; } .hc-card-image-status { position: absolute; top: 9px; right: 9px; display: inline-flex; align-items: center; z-index: 4; pointer-events: none; } .hc-card-image-status-label { display: inline-flex; align-items: center; justify-content: center; min-height: 27px; padding: 0 9px; border-radius: 8px; color: #fff; font-size: 9px; font-weight: 800; line-height: 1; white-space: nowrap; box-shadow: 0 3px 9px rgba(0, 0, 0, .16); } .hc-card-image-status-label.new { background: #2196f3; } .hc-card-image-status-label.updated { background: #16a36a; } .hc-card-badges { position: absolute; right: 9px; bottom: 9px; left: 9px; display: flex; align-items: center; justify-content: flex-end; gap: 6px; z-index: 4; } .hc-card-badge { display: inline-flex; align-items: center; justify-content: center; min-height: 24px; padding: 0 8px; border-radius: 7px; color: #fff; background: rgba(0, 0, 0, .64); font-size: 9px; font-weight: 800; line-height: 1; white-space: nowrap; } .hc-card-badge.mod { background: #e53935; color: #fff; box-shadow: 0 3px 10px rgba(229, 57, 53, .28); } .hc-card-badge.popular { background: #f59e0b; color: #fff; } .hc-card-body { padding: 12px 11px 11px; } .hc-card-title { margin: 0; color: var(--hc-text); font-size: 13.5px; font-weight: 800; line-height: 1.7; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; overflow: hidden; min-height: calc(13.5px * 1.7 * 2); } .hc-card-meta { display: flex; align-items: center; gap: 6px; margin-top: 9px; } .hc-card-meta-item { display: flex; align-items: center; gap: 5px; min-width: 0; padding: 6px 7px; border-radius: 8px; background: var(--hc-light); color: var(--hc-muted); font-size: 9px; line-height: 1.2; flex: 1; } .hc-card-meta-item svg { width: 13px; height: 13px; flex: 0 0 auto; color: var(--hc-accent); } .hc-card-meta-value { min-width: 0; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; color: var(--hc-text); font-weight: 700; } .hc-card-mod { display: flex; align-items: center; gap: 6px; margin-top: 7px; padding: 6px 7px; border-radius: 8px; background: var(--hc-light); color: var(--hc-muted); font-size: 9px; line-height: 1.4; } .hc-card-mod svg { width: 13px; height: 13px; flex: 0 0 auto; color: var(--hc-accent); } .hc-card-mod-text { min-width: 0; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; } .hc-card-mod-text strong { color: var(--hc-text); font-weight: 700; } .hc-card-footer { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin-top: 9px; padding-top: 8px; border-top: 1px solid var(--hc-border); } .hc-card-status { color: var(--hc-muted); font-size: 9px; font-weight: 700; white-space: nowrap; } .hc-card-arrow { display: flex; align-items: center; justify-content: center; width: 25px; height: 25px; flex: 0 0 25px; border-radius: 7px; background: var(--hc-light); color: var(--hc-accent); } .hc-card-arrow svg { width: 14px; height: 14px; } [data-theme="dark"] .hc-card, .dark-mode .hc-card { box-shadow: 0 6px 20px rgba(0, 0, 0, .22); } [data-theme="dark"] .hc-card-meta-item, .dark-mode .hc-card-meta-item, [data-theme="dark"] .hc-card-mod, .dark-mode .hc-card-mod, [data-theme="dark"] .hc-card-arrow, .dark-mode .hc-card-arrow { background: rgba(255,255,255,.055); } [data-theme="dark"] .hc-card-footer, .dark-mode .hc-card-footer { border-color: rgba(255,255,255,.09); } @media (max-width: 768px) { .hc-card { border-radius: 15px; box-shadow: 0 3px 13px rgba(0,0,0,.045); } .hc-card-media { margin: 8px 8px 0; border-radius: 12px; } .hc-card-body { padding: 10px 9px 9px; } .hc-card-title { font-size: 12.5px; line-height: 1.7; min-height: calc(12.5px * 1.7 * 2); } .hc-card-meta { margin-top: 8px; gap: 5px; } .hc-card-meta-item { padding: 5px 6px; font-size: 8.5px; } .hc-card-meta-item svg { width: 12px; height: 12px; } .hc-card-mod { margin-top: 6px; padding: 5px 6px; font-size: 8.5px; } .hc-card-mod svg { width: 12px; height: 12px; } .hc-card-footer { margin-top: 7px; padding-top: 7px; } .hc-card-status { font-size: 8.5px; } .hc-card-arrow { width: 23px; height: 23px; flex-basis: 23px; } .hc-card-views { top: 7px; left: 7px; height: 25px; padding: 0 7px; font-size: 9px; } .hc-card-views svg { width: 13px; height: 13px; } .hc-card-image-status { top: 7px; right: 7px; } .hc-card-image-status-label { min-height: 25px; padding: 0 7px; border-radius: 7px; font-size: 8px; } .hc-card-badges { right: 7px; bottom: 7px; left: 7px; } .hc-card-badge { min-height: 22px; padding: 0 7px; border-radius: 6px; font-size: 8px; } } @media (max-width: 480px) { .hc-card-media { margin: 7px 7px 0; border-radius: 11px; } .hc-card-body { padding: 9px 8px 8px; } .hc-card-title { font-size: 12px; } .hc-card-image-status-label { min-height: 23px; padding: 0 6px; font-size: 7.5px; } .hc-card-views { height: 23px; padding: 0 6px; font-size: 8px; } .hc-card-badge { min-height: 21px; font-size: 7.5px; padding: 0 6px; } } @media (prefers-reduced-motion: reduce) { .hc-card, .hc-card img { transition: none !important; } .hc-card:hover { transform: none; } .hc-card:hover .hc-card-media img { transform: none; } } /* source: components/post-card/card-1.php */ .cpt-archive-card { position: relative; display: block; height: 180px; border-radius: 12px; overflow: hidden; background: var(--bg-light, #f0f2f5); box-shadow: 0 2px 8px rgba(0,0,0,0.1); } .cpt-archive-card img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; } .cpt-archive-card-overlay { position: absolute; inset: 0; display: flex; align-items: flex-end; padding: 14px; background: linear-gradient(to top, rgba(0,0,0,0.75), transparent 65%); z-index: 2; } .cpt-archive-card-title { color: #fff; font-size: 0.9rem; font-weight: 700; margin: 0; line-height: 1.4; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; overflow: hidden; } /* source: components/post-card/card-2.php */ .sidebar-cpt-card { position: relative; display: block; height: 160px; border-radius: 10px; overflow: hidden; background: var(--bg-light, #f0f2f5); box-shadow: 0 2px 8px rgba(0,0,0,0.08); } .sidebar-cpt-card img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; } .sidebar-cpt-card-overlay { position: absolute; inset: 0; display: flex; align-items: flex-end; padding: 12px; background: linear-gradient(to top, rgba(0,0,0,0.75), transparent 65%); z-index: 2; } .sidebar-cpt-card-title { color: #fff; font-size: 0.875rem; font-weight: 700; margin: 0; line-height: 1.4; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; overflow: hidden; } /* source: components/sidebar/main-sidebar.php */ .sb{background:var(--bg-card,#fff);border-radius:16px;padding:14px;margin-bottom:10px;transition:box-shadow .3s} .sb:hover{box-shadow:0 8px 30px rgba(0,0,0,.06)} .sb-h{display:flex;align-items:center;justify-content:space-between;margin-bottom:12px} .sb-ttl{font-size:.95rem;font-weight:700;display:flex;align-items:center;gap:8px;margin:0;position:relative;padding-right:12px} .sb-ttl::before{content:'';position:absolute;right:0;top:50%;transform:translateY(-50%);width:3px;height:18px;background:var(--theme-color,#eb144c);border-radius:4px} .sb-ttl a{color:var(--text-primary,#222);text-decoration:none;transition:color .2s} .sb-ttl a:hover{color:var(--theme-color,#eb144c)} .sb-ttl svg{width:16px;height:16px;fill:var(--theme-color,#eb144c);flex-shrink:0;opacity:.8} .sb-btn{font-size:.7rem;font-weight:600;padding:5px 14px;border-radius:8px;background:var(--theme-color,#eb144c);color:var(--theme-contrast-text,#fff);text-decoration:none;transition:all .25s;white-space:nowrap;flex-shrink:0;letter-spacing:.3px;box-shadow:0 2px 8px rgba(235,20,76,.25)} .sb-btn:hover{transform:translateY(-1px);box-shadow:0 6px 20px rgba(235,20,76,.35);color:#fff;text-decoration:none} .sb-btn:focus-visible,.sb-ttl a:focus-visible{outline:2px solid var(--theme-color,#eb144c);outline-offset:2px} .sb-banner{display:block;position:relative;border-radius:12px;overflow:hidden;aspect-ratio:16/10;background:var(--bg-light,#e9ecef)} .sb-banner img.bnr{width:100%;height:100%;object-fit:cover;transition:transform .5s cubic-bezier(.4,0,.2,1),opacity .35s ease} .sb-banner:hover img.bnr{transform:scale(1.06)} .sb-banner .inf img{transition:opacity .3s ease} .sb-banner .ovl{position:absolute;inset:0;background:linear-gradient(to top,rgba(0,0,0,.85) 0%,rgba(0,0,0,.3) 50%,transparent 100%);display:flex;align-items:flex-end;padding:12px} .sb-banner .inf{display:flex;align-items:center;gap:8px;width:100%} .sb-banner .inf img{width:40px;height:40px;border-radius:10px;object-fit:cover;border:2px solid rgba(255,255,255,.3);flex-shrink:0} .sb-banner .inf .det{min-width:0;flex:1} .sb-banner .inf .det .nm{color:#fff;font-size:.78rem;font-weight:700;line-height:1.3;margin-bottom:2px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;text-shadow:0 1px 3px rgba(0,0,0,.4)} .sb-banner .inf .det .ver{color:rgba(255,255,255,.8);font-size:.65rem;margin-bottom:3px} .sb-banner .inf .det .tag{display:inline-block;font-size:.6rem;font-weight:700;padding:2px 7px;border-radius:5px;color:#fff;letter-spacing:.3px} .sb-grid{display:grid;grid-template-columns:1fr 1fr;gap:6px} .sb-pill{display:inline-flex;align-items:center;gap:5px;padding:8px 10px;border-radius:10px;background:var(--bg-light,#f5f7fa);color:var(--text-secondary,#444);font-size:.73rem;font-weight:600;text-decoration:none;transition:all .25s;border:1px solid transparent;max-width:100%} .sb-pill svg{width:12px;height:12px;fill:var(--text-muted,#aaa);flex-shrink:0;transition:fill .25s;opacity:.7} .sb-pill span{white-space:nowrap;overflow:hidden;text-overflow:ellipsis} .sb-pill:hover{background:rgba(235,20,76,.06);color:var(--theme-color,#eb144c);border-color:rgba(235,20,76,.12);transform:translateX(-3px);text-decoration:none} .sb-pill:hover svg{fill:var(--theme-color,#eb144c);opacity:1} .sb-empty{font-size:.75rem;color:var(--text-muted,#999);text-align:center;padding:10px 0;margin:0} body.dark-mode .sb{background:var(--bg-card,#1a1d24)!important} body.dark-mode .sb:hover{box-shadow:0 8px 30px rgba(0,0,0,.35)!important} body.dark-mode .sb-banner{background:var(--bg-light,#23272f)!important} body.dark-mode .sb-pill{background:var(--bg-light,#23272f)!important;color:var(--text-secondary,#adb5bd)!important;border-color:var(--border-color,rgba(255,255,255,.06))!important} body.dark-mode .sb-pill:hover{background:rgba(235,20,76,.15)!important;color:var(--theme-color,#eb144c)!important;border-color:rgba(235,20,76,.25)!important} @media(max-width:767px){.sb{padding:12px 10px;border-radius:14px}.sb-ttl{font-size:.88rem;padding-right:10px}.sb-ttl::before{width:3px;height:15px}.sb-btn{font-size:.66rem;padding:4px 10px;border-radius:6px}.sb-grid{grid-template-columns:1fr 1fr;gap:5px}.sb-pill{padding:7px 8px;font-size:.7rem}.sb-pill svg{width:11px;height:11px}} @media(max-width:380px){.sb-grid{grid-template-columns:1fr 1fr;gap:4px}.sb-pill{padding:6px 7px;font-size:.68rem;gap:3px}.sb-pill svg{width:10px;height:10px}} @media(prefers-reduced-motion:reduce){.sb,.sb-banner img.bnr,.sb-pill{animation:none!important;transition:none!important}} @media (min-width:992px){ #secondary.widget-area{align-self:flex-start;position:sticky;top:76px;} } body.dark-mode .sb{border-color:var(--border-color,rgba(255,255,255,.08))} /* source: components/sidebar/cpt-sidebar.php */ .cpt-sb{ background:var(--bg-card,#fff); border:1px solid var(--border-color,rgba(0,0,0,.06)); border-radius:16px;padding:14px;margin-bottom:10px; box-shadow:var(--shadow-card,0 2px 8px rgba(0,0,0,.04)); transition:box-shadow .25s ease,border-color .25s ease,background .25s ease; } .cpt-sb:hover{box-shadow:var(--shadow-elevated,0 10px 32px rgba(0,0,0,.08));border-color:rgba(var(--theme-color-rgb,235,20,76),.18)} .cpt-sb h2{ position:relative;margin:0 0 12px;padding:0 12px 12px 0; border-bottom:1px solid var(--border-color,rgba(0,0,0,.06)); color:var(--text-primary,#222);font-size:.95rem;font-weight:800; } .cpt-sb h2::before{content:"";position:absolute;right:0;top:1px;width:3px;height:18px;border-radius:4px;background:var(--theme-color,#eb144c)} .cpt-sb .sidebar-cpt-card{height:150px;border-radius:12px;background:var(--bg-light,#f0f2f5);box-shadow:none;border:1px solid var(--border-color,rgba(0,0,0,.05))} .cpt-sb .sidebar-cpt-card-title{font-size:.82rem;line-height:1.5} body.dark-mode .cpt-sb{background:var(--bg-card,#1a1d24);border-color:var(--border-color,rgba(255,255,255,.08))} @media(min-width:992px){#secondary.widget-area{align-self:flex-start;position:sticky;top:76px}} @media(max-width:767px){.cpt-sb{padding:12px 10px;border-radius:14px}.cpt-sb .sidebar-cpt-card{height:145px}}