/* source: archive.php */ .archive-main-section { background: var(--bg-card, #fff); border: 1px solid var(--border-color, rgba(0,0,0,0.06)); border-radius: 16px; padding: 20px; margin-bottom: 24px; transition: background 0.3s ease, border-color 0.3s ease; } .archive-desc-box { margin-top: 28px; padding: 20px 24px; background: var(--bg-light, #f8fafc); border: 1px solid var(--border-color, rgba(0,0,0,0.06)); border-radius: 14px; position: relative; overflow: hidden; transition: background 0.3s ease, border-color 0.3s ease; } .archive-desc-box::before { content: ''; position: absolute; right: 0; top: 15%; bottom: 15%; width: 4px; background: var(--theme-color, #eb144c); border-radius: 4px 0 0 4px; } .archive-desc-title { font-size: 1rem; font-weight: 800; color: var(--text-primary, #222); margin-bottom: 12px; display: flex; align-items: center; gap: 8px; } .archive-desc-title svg { width: 20px; height: 20px; fill: var(--theme-color, #eb144c); flex-shrink: 0; } .archive-desc-content { font-size: 0.9rem; line-height: 2; color: var(--text-secondary, #555); text-align: justify; text-align-last: right; } .archive-desc-content p { margin-bottom: 0.8em; } .archive-desc-content p:last-child { margin-bottom: 0; } .archive-empty-msg { text-align: center; padding: 40px 20px; color: var(--text-muted, #737373); font-size: 0.95rem; font-weight: 600; } body.dark-mode .archive-desc-box { background: var(--bg-light, #23272f) !important; border-color: var(--border-color, rgba(255,255,255,0.08)) !important; } @media (max-width: 767px) { .archive-main-section { padding: 10px; border-radius: 12px; } .archive-desc-box { padding: 10px 7px; } .archive-desc-box::before { width: 3px; } .archive-desc-title { font-size: 0.9rem; } .archive-desc-content { font-size: 0.85rem; line-height: 1.9; } } /* source: search.php */ .search-results-section { background: #fff; border: 1px solid rgba(0,0,0,0.06); border-radius: 14px; padding: 20px 16px; margin-bottom: 20px; } .search-results-header { display: flex; align-items: center; gap: 10px; margin-bottom: 20px; padding-bottom: 14px; border-bottom: 1px solid rgba(0,0,0,0.05); flex-wrap: wrap; } .search-results-icon { width: 24px; height: 24px; fill: var(--theme-color, #eb144c); flex-shrink: 0; } .search-results-title { font-size: 1.05rem; font-weight: 800; color: #222; margin: 0; line-height: 1.5; } .search-results-query { color: var(--theme-color-safe, var(--theme-color, #eb144c)); } .search-results-count { font-size: 0.75rem; font-weight: 600; background: #f0f2f5; color: #666; padding: 3px 10px; border-radius: 10px; margin-right: auto; white-space: nowrap; } .search-no-results { text-align: center; padding: 40px 20px; } .search-no-results-icon { width: 80px; height: 80px; fill: #ddd; margin-bottom: 16px; } .search-no-results-title { font-size: 1.1rem; font-weight: 700; color: #444; margin-bottom: 8px; } .search-no-results-desc { font-size: 0.85rem; color: #999; line-height: 1.7; margin-bottom: 20px; } .search-retry-form { position: relative; max-width: 400px; margin: 0 auto; } .search-retry-input { width: 100%; padding: 12px 48px 12px 18px; border: 1.5px solid #e8eaed; border-radius: 50px; font-size: 0.88rem; background: #fafbfc; outline: none; transition: all 0.25s ease; font-family: inherit; box-sizing: border-box; } .search-retry-input:focus { border-color: var(--theme-color, #eb144c); background: #fff; box-shadow: 0 0 0 3px rgba(235,20,76,0.08); } .search-retry-btn { position: absolute; right: 6px; top: 50%; transform: translateY(-50%); width: 36px; height: 36px; border-radius: 50%; background: var(--theme-color, #eb144c); border: none; cursor: pointer; display: flex; align-items: center; justify-content: center; transition: filter 0.2s; } .search-retry-btn:hover { filter: brightness(1.1); } .search-retry-btn svg { width: 16px; height: 16px; fill: #fff; } .search-pagination { display: flex; justify-content: center; gap: 6px; margin-top: 24px; flex-wrap: wrap; } .search-pagination a, .search-pagination span { display: inline-flex; align-items: center; justify-content: center; min-width: 38px; height: 38px; padding: 0 10px; border-radius: 10px; font-size: 0.82rem; font-weight: 600; text-decoration: none; transition: all 0.2s ease; border: 1.5px solid #e8eaed; color: #555; background: #fff; } .search-pagination a:hover { border-color: var(--theme-color, #eb144c); color: var(--theme-color, #eb144c); background: rgba(235,20,76,0.04); } .search-pagination .current { background: var(--theme-color, #eb144c); border-color: var(--theme-color, #eb144c); color: #fff; } @media (max-width: 767px) { .search-results-section { padding: 14px 12px; border-radius: 12px; } .search-results-title { font-size: 0.95rem; } .search-results-header { gap: 8px; } .search-no-results { padding: 30px 16px; } .search-no-results-icon { width: 60px; height: 60px; } } /* source: archive-news.php */ :root { --vn-bg: var(--bg-light, #f6f7fb); --vn-card: var(--bg-card, #ffffff); --vn-text: var(--text-primary, #111827); --vn-text-2: var(--text-secondary, #667085); --vn-muted: var(--text-muted, #98a2b3); --vn-line: var(--border-color, rgba(17,24,39,.08)); --vn-accent: var(--theme-color, #eb144c); --vn-accent-2: color-mix(in srgb, var(--vn-accent) 64%, #6d28d9); --vn-radius-xl: 30px; --vn-radius-lg: 22px; --vn-radius-md: 16px; --vn-shadow-sm: 0 8px 28px rgba(15,23,42,.06); --vn-shadow: 0 20px 60px rgba(15,23,42,.10); --vn-ease: .28s cubic-bezier(.2,.7,.2,1); } body.dark-mode { --vn-bg: var(--bg-light, #111318); --vn-card: var(--bg-card, #1b1f27); --vn-text: var(--text-primary, #f5f7fb); --vn-text-2: var(--text-secondary, #b3bac7); --vn-muted: var(--text-muted, #7f8897); --vn-line: var(--border-color, rgba(255,255,255,.08)); --vn-shadow-sm: 0 8px 28px rgba(0,0,0,.18); --vn-shadow: 0 20px 60px rgba(0,0,0,.28); } .vn-page, .vn-page * { box-sizing:border-box; } #content.site-content, #primary.content-area { width:100%; max-width:100%; min-width:0; } .vn-page { position:relative; width:100%; max-width:1280px; min-width:0; margin:0 auto; padding:24px 18px 56px; overflow-x:hidden; color:var(--vn-text); } .vn-page::before { content:''; position:absolute; z-index:-1; top:-90px; left:-140px; width:420px; height:420px; border-radius:50%; background:radial-gradient(circle,color-mix(in srgb,var(--vn-accent) 14%,transparent),transparent 70%); } .vn-head { position:relative; overflow:hidden; margin-bottom:20px; padding:27px 30px; border:1px solid var(--vn-line); border-radius:var(--vn-radius-xl); background:linear-gradient(135deg,color-mix(in srgb,var(--vn-accent) 10%,var(--vn-card)),var(--vn-card) 62%); box-shadow:var(--vn-shadow-sm); } .vn-head::after { content:''; position:absolute; left:-90px; bottom:-130px; width:310px; height:310px; border-radius:50%; border:56px solid color-mix(in srgb,var(--vn-accent) 7%,transparent); pointer-events:none; } .vn-head-row { position:relative; z-index:1; display:flex; align-items:flex-end; justify-content:space-between; gap:18px; min-width:0; } .vn-title-wrap { min-width:0; max-width:100%; } .vn-title-wrap small { display:flex; align-items:center; gap:8px; margin-bottom:8px; color:var(--vn-accent); font-size:.68rem; font-weight:900; } .vn-title-wrap small::before { content:''; width:9px; height:9px; border-radius:99px; background:var(--vn-accent); box-shadow:0 0 0 6px color-mix(in srgb,var(--vn-accent) 12%,transparent); } .vn-title-wrap h1 { max-width:100%; overflow-wrap:anywhere; word-break:break-word; margin:0; color:var(--vn-text); font-size:clamp(1.45rem,3vw,2.15rem); line-height:1.35; font-weight:950; letter-spacing:-.035em; } .vn-title-wrap p { max-width:740px; margin:9px 0 0; color:var(--vn-text-2); font-size:.82rem; line-height:1.9; font-weight:560; } .vn-archive-desc { max-width:760px; margin:10px 0 0; color:var(--vn-text-2); font-size:.82rem; line-height:1.95; font-weight:560; } .vn-count { flex:0 0 auto; min-width:120px; padding:13px 16px; border:1px solid var(--vn-line); border-radius:17px; background:color-mix(in srgb,var(--vn-card) 90%,transparent); backdrop-filter:blur(10px); -webkit-backdrop-filter:blur(10px); text-align:center; } .vn-count strong { display:block; color:var(--vn-text); font-size:1.2rem; font-weight:950; } .vn-count span { display:block; margin-top:3px; color:var(--vn-muted); font-size:.64rem; font-weight:800; } .vn-ad { width:100%; max-width:100%; min-width:0; margin:16px 0; overflow:hidden; } .vn-ad img, .vn-ad iframe, .vn-ad video, .vn-ad ins { max-width:100% !important; } .vn-ad iframe { width:100% !important; } .vn-grid { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:14px; } .vn-card { position:relative; overflow:hidden; display:flex; flex-direction:column; min-width:0; border:1px solid var(--vn-line); border-radius:var(--vn-radius-lg); background:var(--vn-card); box-shadow:var(--vn-shadow-sm); transition:var(--vn-ease); } .vn-card:hover { transform:translateY(-5px); border-color:color-mix(in srgb,var(--vn-accent) 32%,var(--vn-line)); box-shadow:var(--vn-shadow); } .vn-card-media { position:relative; display:block; overflow:hidden; aspect-ratio:16/9; background:linear-gradient(135deg,color-mix(in srgb,var(--vn-accent) 10%,var(--vn-card)),var(--vn-bg)); } .vn-card-media img { width:100%; height:100%; object-fit:cover; display:block; transition:transform .65s cubic-bezier(.2,.7,.2,1); } .vn-card:hover .vn-card-media img { transform:scale(1.06); } .vn-card-media::after { content:''; position:absolute; inset:0; background:linear-gradient(180deg,transparent 55%,rgba(3,7,18,.28)); pointer-events:none; } .vn-tag { position:absolute; z-index:2; top:12px; right:12px; display:inline-flex; max-width:75%; padding:6px 10px; border:1px solid rgba(255,255,255,.22); border-radius:999px; background:rgba(17,24,39,.62); color:#fff; backdrop-filter:blur(10px); -webkit-backdrop-filter:blur(10px); font-size:.62rem; font-weight:850; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; } .vn-card-body { display:flex; flex-direction:column; flex:1; padding:16px; } .vn-card h2 { margin:0 0 9px; color:var(--vn-text); font-size:.94rem; line-height:1.7; font-weight:900; display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden; transition:color var(--vn-ease); } .vn-card h2 a { color:inherit; text-decoration:none; } .vn-card:hover h2 { color:var(--vn-accent); } .vn-excerpt { margin:0 0 14px; color:var(--vn-text-2); font-size:.75rem; line-height:1.85; display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden; } .vn-meta { margin-top:auto; padding-top:12px; border-top:1px solid var(--vn-line); display:flex; flex-wrap:wrap; gap:10px; color:var(--vn-muted); font-size:.64rem; font-weight:700; } .vn-meta span { display:inline-flex; align-items:center; gap:5px; } .vn-meta svg { width:12px; height:12px; fill:currentColor; } .vn-card:nth-child(1) { grid-column:span 2; display:grid; grid-template-columns:minmax(0,1.2fr) minmax(260px,.8fr); min-height:320px; } .vn-card:nth-child(1) .vn-card-media { aspect-ratio:auto; height:100%; } .vn-card:nth-child(1) .vn-card-body { justify-content:center; padding:24px; } .vn-card:nth-child(1) h2 { font-size:1.18rem; -webkit-line-clamp:3; } .vn-card:nth-child(1) .vn-excerpt { font-size:.8rem; -webkit-line-clamp:3; } .vn-empty { min-height:220px; display:flex; align-items:center; justify-content:center; padding:25px; border:1px dashed var(--vn-line); border-radius:var(--vn-radius-lg); background:var(--vn-card); color:var(--vn-text-2); text-align:center; font-size:.84rem; font-weight:750; } .vn-pagination { margin-top:28px; display:flex; justify-content:center; } .vn-pagination .pagination, .vn-pagination .page-numbers, .vn-pagination ul.page-numbers { display:flex; flex-wrap:wrap; align-items:center; justify-content:center; gap:6px; } .vn-pagination ul.page-numbers { margin:0; padding:0; list-style:none; } .vn-pagination a.page-numbers, .vn-pagination span.page-numbers, .vn-pagination .pagination a, .vn-pagination .pagination span { display:inline-flex; align-items:center; justify-content:center; min-width:40px; height:40px; padding:0 12px; margin:0 !important; border:1px solid var(--vn-line) !important; border-radius:12px !important; background:var(--vn-card) !important; color:var(--vn-text-2) !important; box-shadow:var(--vn-shadow-sm); text-decoration:none !important; font-size:.75rem; font-weight:850; transition:var(--vn-ease); } .vn-pagination a:hover { color:var(--vn-accent) !important; border-color:color-mix(in srgb,var(--vn-accent) 35%,var(--vn-line)) !important; transform:translateY(-2px); } .vn-pagination .current, .vn-pagination .active { border-color:transparent !important; background:linear-gradient(135deg,var(--vn-accent),var(--vn-accent-2)) !important; color:#fff !important; } .vn-footnote { margin-top:30px; padding:20px; border:1px solid var(--vn-line); border-radius:var(--vn-radius-lg); background:linear-gradient(135deg,color-mix(in srgb,var(--vn-accent) 7%,var(--vn-card)),var(--vn-card)); color:var(--vn-text-2); text-align:center; font-size:.75rem; font-weight:650; } @media (max-width: 1024px) { .vn-grid { grid-template-columns:repeat(2,minmax(0,1fr)); } .vn-card:nth-child(1) { grid-column:1/-1; } } @media (max-width: 767px) { #content.site-content, #primary.content-area { overflow-x:hidden; } .vn-page { width:100%; max-width:100%; padding:12px 10px 38px; overflow-x:hidden; } .vn-page::before { top:-46px; left:-74px; width:220px; height:220px; opacity:.72; } .vn-head { width:100%; max-width:100%; min-width:0; padding:19px 16px; border-radius:20px; } .vn-head::after { left:-80px; bottom:-120px; width:230px; height:230px; border-width:42px; } .vn-head-row { width:100%; max-width:100%; min-width:0; align-items:flex-start; flex-direction:column; gap:14px; } .vn-title-wrap, .vn-title-wrap h1, .vn-title-wrap p, .vn-archive-desc { width:100%; max-width:100%; min-width:0; } .vn-count { min-width:0; width:100%; max-width:100%; display:flex; align-items:center; justify-content:space-between; text-align:right; } .vn-count span { margin:0; } .vn-grid { width:100%; max-width:100%; min-width:0; grid-template-columns:minmax(0,1fr); gap:11px; } .vn-card, .vn-card:nth-child(1) { width:100%; max-width:100%; min-width:0; } .vn-card:nth-child(1) { display:flex; min-height:0; } .vn-card:nth-child(1) .vn-card-media { width:100%; aspect-ratio:16/9; height:auto; } .vn-card:nth-child(1) .vn-card-body { width:100%; min-width:0; padding:16px; } .vn-card:nth-child(1) h2 { font-size:.96rem; -webkit-line-clamp:2; } .vn-card:nth-child(1) .vn-excerpt { font-size:.75rem; -webkit-line-clamp:2; } .vn-card-body, .vn-meta, .vn-pagination { min-width:0; max-width:100%; } .vn-pagination .pagination, .vn-pagination .page-numbers, .vn-pagination ul.page-numbers { max-width:100%; } } @media (max-width: 420px) { .vn-page { padding-left:8px; padding-right:8px; } .vn-head { padding:17px 14px; border-radius:18px; } .vn-title-wrap h1 { font-size:1.35rem; } .vn-card-body { padding:14px; } .vn-pagination a.page-numbers, .vn-pagination span.page-numbers, .vn-pagination .pagination a, .vn-pagination .pagination span { min-width:34px; height:36px; padding:0 9px; } } /* source: archive-articles.php */ :root { --vm-bg: var(--bg-light, #f6f7fb); --vm-card: var(--bg-card, #ffffff); --vm-card-2: color-mix(in srgb, var(--vm-card) 92%, var(--vm-accent) 8%); --vm-text: var(--text-primary, #111827); --vm-text-2: var(--text-secondary, #667085); --vm-muted: var(--text-muted, #98a2b3); --vm-line: var(--border-color, rgba(17,24,39,.08)); --vm-accent: var(--theme-color, #eb144c); --vm-accent-2: color-mix(in srgb, var(--vm-accent) 66%, #6d28d9); --vm-success: #12b76a; --vm-warning: #f79009; --vm-radius-xl: 30px; --vm-radius-lg: 22px; --vm-radius-md: 16px; --vm-radius-sm: 12px; --vm-shadow-sm: 0 8px 28px rgba(15,23,42,.06); --vm-shadow: 0 20px 60px rgba(15,23,42,.10); --vm-shadow-accent: 0 18px 42px color-mix(in srgb, var(--vm-accent) 24%, transparent); --vm-ease: .28s cubic-bezier(.2,.7,.2,1); } body.dark-mode { --vm-bg: var(--bg-light, #111318); --vm-card: var(--bg-card, #1b1f27); --vm-text: var(--text-primary, #f5f7fb); --vm-text-2: var(--text-secondary, #b3bac7); --vm-muted: var(--text-muted, #7f8897); --vm-line: var(--border-color, rgba(255,255,255,.08)); --vm-shadow-sm: 0 8px 28px rgba(0,0,0,.18); --vm-shadow: 0 20px 60px rgba(0,0,0,.28); } .vm-shell, .vm-shell * { box-sizing: border-box; } .vm-shell { position: relative; max-width: 1280px; margin: 0 auto; padding: 24px 18px 56px; color: var(--vm-text); } .vm-shell::before { content: ''; position: absolute; z-index: -1; top: -80px; right: -140px; width: 420px; height: 420px; border-radius: 50%; background: radial-gradient(circle, color-mix(in srgb, var(--vm-accent) 16%, transparent), transparent 70%); pointer-events: none; } .vm-topbar { display: flex; align-items: stretch; justify-content: space-between; gap: 18px; margin-bottom: 18px; } .vm-intro { position: relative; flex: 1; overflow: hidden; min-height: 160px; padding: 28px 30px; border: 1px solid var(--vm-line); border-radius: var(--vm-radius-xl); background: linear-gradient(135deg, color-mix(in srgb, var(--vm-accent) 10%, var(--vm-card)), var(--vm-card) 55%), var(--vm-card); box-shadow: var(--vm-shadow-sm); } .vm-intro::after { content: ''; position: absolute; left: -70px; bottom: -95px; width: 260px; height: 260px; border-radius: 50%; border: 45px solid color-mix(in srgb, var(--vm-accent) 8%, transparent); pointer-events: none; } .vm-kicker { display: inline-flex; align-items: center; gap: 8px; margin-bottom: 12px; color: var(--vm-accent); font-size: .72rem; font-weight: 900; letter-spacing: .02em; } .vm-kicker::before { content: ''; width: 9px; height: 9px; border-radius: 99px; background: var(--vm-accent); box-shadow: 0 0 0 6px color-mix(in srgb, var(--vm-accent) 12%, transparent); } .vm-intro h1 { margin: 0 0 8px; font-size: clamp(1.65rem, 3vw, 2.45rem); line-height: 1.25; font-weight: 950; letter-spacing: -.04em; color: var(--vm-text); } .vm-intro h1 span { color: var(--vm-accent); } .vm-intro p { position: relative; z-index: 1; max-width: 700px; margin: 0; color: var(--vm-text-2); font-size: .91rem; line-height: 1.9; font-weight: 550; } .vm-stats { width: 100%; display: flex; align-items: center; justify-content: center; flex-wrap: wrap; gap: 0; margin-top: 22px; padding: 13px 16px; border-top: 1px solid var(--vm-line); border-bottom: 1px solid var(--vm-line); } .vm-stat { position: relative; display: inline-flex; align-items: baseline; justify-content: center; gap: 7px; min-height: 0; padding: 2px 22px; background: transparent; box-shadow: none; } .vm-stat + .vm-stat::before { content: ''; position: absolute; right: 0; top: 50%; width: 1px; height: 18px; background: var(--vm-line); transform: translateY(-50%); } .vm-stat strong { font-size: .92rem; line-height: 1; font-weight: 900; color: var(--vm-text); } .vm-stat span { margin: 0; color: var(--vm-muted); font-size: .68rem; line-height: 1.5; font-weight: 700; } .vm-cats { display: flex; align-items: center; gap: 8px; overflow-x: auto; margin: 0 0 20px; padding: 4px 2px 8px; scrollbar-width: none; } .vm-cats::-webkit-scrollbar { display:none; } .vm-cat { flex: 0 0 auto; display: inline-flex; align-items: center; gap: 8px; min-height: 42px; padding: 0 15px; border: 1px solid var(--vm-line); border-radius: 999px; background: var(--vm-card); color: var(--vm-text-2); text-decoration: none; font-size: .77rem; font-weight: 800; transition: var(--vm-ease); } .vm-cat:hover, .vm-cat.is-active { transform: translateY(-2px); border-color: transparent; background: var(--vm-accent); color: #fff; box-shadow: var(--vm-shadow-accent); } .vm-cat b { display: inline-flex; align-items: center; justify-content: center; min-width: 24px; height: 24px; padding: 0 6px; border-radius: 999px; background: color-mix(in srgb, currentColor 12%, transparent); font-size: .65rem; } .vm-hero { display: grid; grid-template-columns: minmax(0, 1.55fr) minmax(340px, .95fr); gap: 14px; margin-bottom: 26px; } .vm-feature, .vm-mini { position: relative; display: block; overflow: hidden; border: 1px solid color-mix(in srgb, var(--vm-line) 70%, transparent); background: var(--vm-card); text-decoration: none; isolation: isolate; } .vm-feature { min-height: 510px; border-radius: var(--vm-radius-xl); box-shadow: var(--vm-shadow); } .vm-feature img, .vm-mini img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; transition: transform .75s cubic-bezier(.2,.7,.2,1), filter .4s ease; } .vm-feature:hover img, .vm-mini:hover img { transform: scale(1.055); } .vm-feature::after, .vm-mini::after { content: ''; position: absolute; inset: 0; z-index: 1; background: linear-gradient(180deg, rgba(3,7,18,.02) 15%, rgba(3,7,18,.32) 52%, rgba(3,7,18,.94) 100%); } .vm-feature-body { position: absolute; z-index: 2; inset: auto 0 0; padding: 34px; color: #fff; } .vm-label { display: inline-flex; align-items: center; gap: 7px; margin-bottom: 12px; padding: 6px 11px; border: 1px solid rgba(255,255,255,.18); border-radius: 999px; background: rgba(255,255,255,.14); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); font-size: .68rem; font-weight: 850; } .vm-feature h2 { max-width: 850px; margin: 0 0 12px; color: #fff; font-size: clamp(1.35rem, 2.6vw, 2rem); line-height: 1.48; font-weight: 950; letter-spacing: -.03em; } .vm-feature p { max-width: 760px; margin: 0 0 16px; color: rgba(255,255,255,.78); font-size: .86rem; line-height: 1.9; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; } .vm-meta { display: flex; flex-wrap: wrap; align-items: center; gap: 12px; color: inherit; font-size: .69rem; font-weight: 700; opacity: .9; } .vm-meta span { display:inline-flex; align-items:center; gap:5px; } .vm-meta svg { width: 13px; height: 13px; fill: currentColor; } .vm-hero-side { display: grid; grid-template-columns: 1fr 1fr; grid-template-rows: 1fr 1fr; gap: 14px; } .vm-mini { min-height: 248px; border-radius: var(--vm-radius-lg); box-shadow: var(--vm-shadow-sm); } .vm-mini-body { position: absolute; z-index: 2; inset: auto 0 0; padding: 15px; color:#fff; } .vm-mini h3 { margin: 0 0 7px; color:#fff; font-size: .83rem; line-height: 1.62; font-weight: 850; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; } .vm-mini-rank { position:absolute; z-index:3; top:12px; right:12px; display:flex; align-items:center; justify-content:center; width:31px; height:31px; border-radius:11px; background: rgba(255,255,255,.92); color: var(--vm-accent); box-shadow: 0 8px 22px rgba(0,0,0,.18); font-size:.72rem; font-weight:950; } .vm-section-head { display:flex; align-items:flex-end; justify-content:space-between; gap:18px; margin: 30px 0 14px; } .vm-section-title { min-width:0; } .vm-section-title small { display:block; margin-bottom:4px; color:var(--vm-accent); font-size:.66rem; font-weight:900; } .vm-section-title h2 { margin:0; color:var(--vm-text); font-size:1.16rem; font-weight:950; letter-spacing:-.02em; } .vm-all-link { flex:0 0 auto; display:inline-flex; align-items:center; gap:7px; color:var(--vm-text-2); text-decoration:none; font-size:.75rem; font-weight:800; transition:var(--vm-ease); } .vm-all-link:hover { color:var(--vm-accent); transform:translateX(-3px); } .vm-all-link svg { width:14px; height:14px; fill:currentColor; } .vm-trending { display:grid; grid-template-columns: repeat(6, minmax(190px, 1fr)); gap:10px; overflow-x:auto; padding: 2px 2px 10px; scrollbar-width:thin; } .vm-trend { min-width:190px; display:flex; align-items:center; gap:12px; min-height:92px; padding:13px; border:1px solid var(--vm-line); border-radius:var(--vm-radius-md); background:var(--vm-card); box-shadow:var(--vm-shadow-sm); text-decoration:none; transition:var(--vm-ease); } .vm-trend:hover { transform:translateY(-4px); border-color:color-mix(in srgb, var(--vm-accent) 35%, var(--vm-line)); } .vm-trend-num { flex:0 0 auto; width:40px; height:40px; display:flex; align-items:center; justify-content:center; border-radius:13px; background:color-mix(in srgb, var(--vm-accent) 9%, var(--vm-card)); color:var(--vm-accent); font-size:1rem; font-weight:950; } .vm-trend-body { min-width:0; } .vm-trend h3 { margin:0 0 7px; color:var(--vm-text); font-size:.76rem; line-height:1.55; font-weight:820; display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden; } .vm-trend small { color:var(--vm-muted); font-size:.65rem; font-weight:700; } .vm-list { display:grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap:12px; } .vm-article { position:relative; display:grid; grid-template-columns: 128px minmax(0,1fr); gap:16px; min-height:142px; padding:12px; border:1px solid var(--vm-line); border-radius:var(--vm-radius-lg); background:var(--vm-card); box-shadow:var(--vm-shadow-sm); text-decoration:none; transition:var(--vm-ease); } .vm-article:hover { transform:translateY(-4px); border-color:color-mix(in srgb, var(--vm-accent) 32%, var(--vm-line)); box-shadow:var(--vm-shadow); } .vm-thumb { position:relative; overflow:hidden; width:128px; height:118px; border-radius:16px; background:linear-gradient(135deg, color-mix(in srgb, var(--vm-accent) 11%, var(--vm-card)), var(--vm-bg)); } .vm-thumb img { width:100%; height:100%; object-fit:cover; display:block; transition:transform .5s ease; } .vm-article:hover .vm-thumb img { transform:scale(1.06); } .vm-thumb::after { content:''; position:absolute; inset:0; box-shadow:inset 0 0 0 1px rgba(255,255,255,.08); border-radius:inherit; pointer-events:none; } .vm-article-body { min-width:0; padding:4px 4px 2px 0; } .vm-article-top { display:flex; align-items:center; gap:8px; margin-bottom:8px; } .vm-article-cat { display:inline-flex; max-width:140px; padding:4px 9px; border-radius:999px; background:color-mix(in srgb, var(--vm-accent) 9%, transparent); color:var(--vm-accent); font-size:.62rem; font-weight:850; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; } .vm-badge { display:inline-flex; padding:4px 8px; border-radius:999px; color:#fff; font-size:.59rem; font-weight:900; } .vm-badge.new { background:var(--vm-accent); } .vm-badge.update { background:var(--vm-success); } .vm-badge.hot { background:var(--vm-warning); } .vm-article h3 { margin:0 0 10px; color:var(--vm-text); font-size:.93rem; line-height:1.65; font-weight:900; display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden; transition:color var(--vm-ease); } .vm-article:hover h3 { color:var(--vm-accent); } .vm-article .vm-meta { color:var(--vm-muted); font-size:.65rem; opacity:1; } .vm-pagination-wrap { display:flex; flex-direction:column; align-items:center; gap:14px; margin-top:28px; } .vm-page-info { display:flex; flex-wrap:wrap; align-items:center; justify-content:center; gap:8px; padding:9px 15px; border:1px solid var(--vm-line); border-radius:999px; background:var(--vm-card); color:var(--vm-text-2); box-shadow:var(--vm-shadow-sm); font-size:.71rem; font-weight:750; } .vm-page-info strong { color:var(--vm-accent); font-weight:950; } .vm-pages { display:flex; flex-wrap:wrap; align-items:center; justify-content:center; gap:6px; } .vm-page { display:inline-flex; align-items:center; justify-content:center; min-width:40px; height:40px; padding:0 12px; border:1px solid var(--vm-line); border-radius:12px; background:var(--vm-card); color:var(--vm-text-2); text-decoration:none; font-size:.76rem; font-weight:850; box-shadow:var(--vm-shadow-sm); transition:var(--vm-ease); } .vm-page:hover { color:var(--vm-accent); border-color:color-mix(in srgb, var(--vm-accent) 35%, var(--vm-line)); transform:translateY(-2px); } .vm-page.current { color:#fff; border-color:transparent; background:linear-gradient(135deg,var(--vm-accent),var(--vm-accent-2)); box-shadow:var(--vm-shadow-accent); } .vm-page.disabled { opacity:.35; pointer-events:none; } .vm-dots { padding:0 3px; color:var(--vm-muted); font-weight:900; } .vm-load-more { position:relative; display:inline-flex; align-items:center; gap:10px; min-height:48px; padding:0 22px; border:0; border-radius:15px; background:linear-gradient(135deg,var(--vm-accent),var(--vm-accent-2)); color:#fff; box-shadow:var(--vm-shadow-accent); font-family:inherit; font-size:.78rem; font-weight:900; cursor:pointer; overflow:hidden; transition:var(--vm-ease); } .vm-load-more:hover { transform:translateY(-3px); } .vm-load-more.loading { opacity:.72; pointer-events:none; } .vm-load-more svg { width:16px; height:16px; fill:currentColor; } .vm-load-more.loading svg { animation:vm-spin .8s linear infinite; } .vm-load-more b { padding:3px 9px; border-radius:999px; background:rgba(255,255,255,.18); font-size:.67rem; } @keyframes vm-spin { to { transform:rotate(360deg); } } .vm-end, .vm-empty { display:flex; align-items:center; justify-content:center; gap:8px; padding:14px 18px; border:1px dashed var(--vm-line); border-radius:16px; background:var(--vm-card); color:var(--vm-text-2); font-size:.76rem; font-weight:800; } .vm-empty { min-height:180px; margin-top:18px; } .vm-end svg { width:16px; height:16px; fill:var(--vm-success); } .vm-outro { position:relative; overflow:hidden; margin-top:36px; padding:28px; border:1px solid var(--vm-line); border-radius:var(--vm-radius-xl); background: linear-gradient(135deg, color-mix(in srgb, var(--vm-accent) 10%, var(--vm-card)), var(--vm-card) 65%); box-shadow:var(--vm-shadow-sm); text-align:center; } .vm-outro::before { content:''; position:absolute; width:240px; height:240px; left:-90px; top:-140px; border-radius:50%; background:color-mix(in srgb, var(--vm-accent) 9%, transparent); } .vm-outro strong { position:relative; display:block; margin-bottom:7px; color:var(--vm-text); font-size:1.12rem; font-weight:950; } .vm-outro span { position:relative; color:var(--vm-text-2); font-size:.8rem; font-weight:600; } @media (max-width: 1100px) { .vm-topbar { flex-direction:column; } .vm-hero { grid-template-columns:1fr; } .vm-feature { min-height:430px; } .vm-hero-side { grid-template-columns:repeat(4,1fr); grid-template-rows:1fr; } .vm-mini { min-height:210px; } .vm-list { grid-template-columns:1fr; } } @media (max-width: 767px) { .vm-shell { padding:14px 12px 38px; } .vm-intro { min-height:auto; padding:22px 20px; border-radius:22px; } .vm-intro h1 { font-size:1.55rem; } .vm-intro p { font-size:.82rem; } .vm-stats { margin-top:18px; padding:11px 8px; } .vm-stat { flex:1 1 30%; padding:2px 10px; gap:5px; } .vm-stat strong { font-size:.84rem; } .vm-stat span { font-size:.62rem; } .vm-cats { margin-bottom:14px; } .vm-cat { min-height:38px; padding:0 13px; font-size:.72rem; } .vm-feature { min-height:355px; border-radius:20px; } .vm-feature-body { padding:22px; } .vm-feature h2 { font-size:1.18rem; } .vm-feature p { display:none; } .vm-hero-side { grid-template-columns:1fr 1fr; grid-template-rows:1fr 1fr; } .vm-mini { min-height:155px; border-radius:16px; } .vm-mini h3 { font-size:.72rem; } .vm-section-head { margin-top:24px; } .vm-trending { grid-template-columns:repeat(6, 210px); } .vm-article { grid-template-columns:92px minmax(0,1fr); min-height:116px; gap:12px; padding:10px; border-radius:17px; } .vm-thumb { width:92px; height:94px; border-radius:13px; } .vm-article-body { padding-top:1px; } .vm-article h3 { margin-bottom:7px; font-size:.8rem; line-height:1.55; } .vm-article .vm-meta span:nth-child(3) { display:none; } .vm-page { min-width:36px; height:36px; padding:0 10px; } } @media (max-width: 480px) { .vm-stats { justify-content:space-between; padding:10px 0; } .vm-stat { flex:1 1 33.333%; padding:2px 6px; flex-direction:column; align-items:center; gap:3px; text-align:center; } .vm-stat + .vm-stat::before { height:24px; } .vm-feature { min-height:300px; } .vm-feature-body { padding:18px; } .vm-hero-side { gap:9px; } .vm-mini { min-height:125px; } .vm-mini-body { padding:10px; } .vm-mini-rank { width:26px; height:26px; top:8px; right:8px; border-radius:9px; } .vm-article { grid-template-columns:78px minmax(0,1fr); } .vm-thumb { width:78px; height:84px; } .vm-article-cat { display:none; } .vm-article .vm-meta span:nth-child(2) { display:none; } .vm-page.optional { display:none; } }