/* ============================================================ * v4.3 cover, author bar, actions, author card, nav, and related posts * The cover stays inside the content column with a fixed aspect ratio box. * ============================================================ */ /* ===== Cover (in-column ratio box) ===== */ .single-cover { position: relative; overflow: hidden; border-radius: var(--radius-2xl, 16px); box-shadow: var(--shadow-sm); margin-bottom: 20px; padding-bottom: var(--single-cover-scale, 35%); } .single-cover > .fit-cover, .single-cover > img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; } .single-cover__overlay { position: absolute; inset: 0; background: linear-gradient( to bottom, rgba(0, 0, 0, 0) 30%, rgba(0, 0, 0, 0.6) 100% ); pointer-events: none; } .single-cover__content { position: absolute; bottom: 0; left: 0; right: 0; padding: 24px; color: #fff; border-radius: 0 0 var(--radius-2xl, 16px) var(--radius-2xl, 16px); } .single-cover__title, .single-cover__content .article-title { font-size: clamp(1.125rem, 2.5vw, 1.5rem); font-weight: 700; margin: 0 0 6px; line-height: 1.35; text-shadow: 0 1px 4px rgba(0, 0, 0, 0.4); color: #fff; } .single-cover__meta, .single-cover__content .cover-meta { display: flex; flex-wrap: wrap; gap: 12px; font-size: 12px; opacity: 0.85; } .single-cover__meta span, .single-cover__content .cover-meta .meta-view { display: inline-flex; align-items: center; gap: 4px; } /* ===== Video Cover ===== */ .single-cover--video { background: #000; } .single-cover--video .single-cover__video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; } /* ===== Slide Cover ===== */ .single-cover--slide { background: var(--color-bg-2, #f5f5f5); } .single-cover__slides { position: absolute; inset: 0; width: 100%; height: 100%; } .single-cover__slide { position: absolute; inset: 0; opacity: 0; transition: opacity 0.6s ease; } .single-cover__slide.is-active { opacity: 1; } .single-cover__slide img { width: 100%; height: 100%; object-fit: cover; } .single-cover__dots { position: absolute; bottom: 14px; right: 18px; display: flex; gap: 8px; z-index: 2; } .single-cover__dot { width: 9px; height: 9px; border-radius: 50%; background: rgba(255, 255, 255, 0.45); border: 1px solid rgba(255, 255, 255, 0.32); transition: background 0.3s ease, transform 0.3s ease; cursor: pointer; } .single-cover__dot.is-active { background: #fff; transform: scale(1.12); } /* ===== 面包屑 ===== */ .post-breadcrumbs { margin-bottom: 12px; font-size: 13px; color: var(--color-ink-4, var(--color-ink-4)); } .article-title + .img-badge, .single-head-cover .img-badge.right, .article-header .img-badge.right { position: absolute; top: 14px; right: 14px; z-index: 2; } .article-avatar { position: relative; } .article-avatar .line-form-line, .article-avatar .line-form-line::before { position: absolute; top: 50%; left: calc(52px + 16px); right: 120px; height: 1px; transform: translateY(-50%); background: var(--color-line); } .article-avatar .line-form-line::before { content: ""; right: auto; width: 42px; background: var(--color-primary, #f04494); opacity: 0.3; } /* ===== Article Card ===== */ .article-card { margin-bottom: 16px; } .article-card__header { margin-bottom: 16px; padding-bottom: 12px; border-bottom: 1px solid var(--color-line); } .article-card__title { font-size: clamp(1.25rem, 3vw, 1.75rem); font-weight: 800; margin: 0; line-height: 1.35; color: var(--color-ink); } /* ===== Video footer (Zibll single-video-footer) ===== */ .single-head-cover .single-video-footer { padding: 12px 4px 4px; } .single-head-cover .single-video-footer .article-title { font-size: clamp(1.1rem, 2.4vw, 1.45rem); font-weight: 700; margin: 8px 0 0; line-height: 1.35; } .single-head-cover .featured-video-episode { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 10px; } .single-head-cover .featured-video-episode .switch-video { display: inline-flex; align-items: center; max-width: 100%; padding: 6px 10px; border-radius: 8px; background: var(--surface-2, rgba(0,0,0,.04)); color: var(--color-ink); font-size: 13px; } .single-head-cover .featured-video-episode .switch-video.active { background: var(--color-primary-soft, rgba(240, 68, 148, 0.12)); color: var(--color-primary); } .single-head-cover .cover-meta.single-metabox { display: flex; flex-wrap: wrap; gap: 8px 12px; font-size: 12px; color: var(--color-ink-4); } .aksrt-single-pay-box { margin: 16px 0 20px; } .aksrt-single-pay-box .pay-box, .aksrt-single-pay-box .aksrt-paywall { margin: 0; }