.elco-explore-page #main-content { padding-top: 0; max-width: none; } .explore-shell { width: 100%; max-width: none; margin-inline: 0; padding-inline: var(--ex-gutter); } .explore-page { --ex-gold: var(--elco-gold, #d4af37); --ex-gutter: clamp(0.85rem, 2.5vw, 1.75rem); --ex-navy: var(--elco-navy-deep, #0a1224); --ex-surface: rgba(15, 26, 50, 0.92); --ex-border: rgba(212, 175, 55, 0.18); --ex-muted: rgba(255, 255, 255, 0.68); --ex-radius: 18px; } .explore-hero { position: relative; overflow: hidden; padding: clamp(1.5rem, 4vw, 2.75rem) 0 clamp(1.25rem, 3vw, 2rem); background: radial-gradient(ellipse 80% 120% at 100% 0%, rgba(212, 175, 55, 0.14), transparent 55%), linear-gradient(155deg, #0a1224 0%, #0f1a32 45%, #162240 100%); border-bottom: 1px solid var(--ex-border); } .explore-hero__glow { position: absolute; inset: auto -20% -60% -20%; height: 70%; background: radial-gradient(circle, rgba(212, 175, 55, 0.12), transparent 65%); pointer-events: none; } .explore-hero__inner { position: relative; z-index: 1; } .explore-hero__crumb { display: flex; align-items: center; gap: 0.4rem; font-size: 0.78rem; margin-bottom: 1rem; color: var(--ex-muted); } .explore-hero__crumb a { color: rgba(255, 255, 255, 0.82); text-decoration: none; } .explore-hero__crumb a:hover { color: var(--ex-gold); } .explore-hero__badge { display: inline-flex; align-items: center; gap: 0.35rem; padding: 0.28rem 0.65rem; border-radius: 999px; border: 1px solid rgba(212, 175, 55, 0.35); background: rgba(212, 175, 55, 0.1); color: var(--ex-gold); font-size: 0.72rem; font-weight: 700; letter-spacing: 0.04em; margin-bottom: 0.65rem; } .explore-hero__title { margin: 0 0 0.45rem; font-size: clamp(1.75rem, 4vw, 2.5rem); font-weight: 800; color: #fff; letter-spacing: -0.02em; } .explore-hero__subtitle { margin: 0; max-width: 38rem; font-size: clamp(0.88rem, 2vw, 1rem); line-height: 1.75; color: var(--ex-muted); } .explore-hero__stats { margin-top: 1rem; } .explore-hero__stat { display: inline-flex; align-items: center; gap: 0.4rem; padding: 0.35rem 0.75rem; border-radius: 999px; background: rgba(255, 255, 255, 0.06); border: 1px solid rgba(255, 255, 255, 0.1); color: rgba(255, 255, 255, 0.88); font-size: 0.8rem; font-weight: 600; } .explore-body { padding-block: clamp(1.25rem, 3vw, 2rem) clamp(2.5rem, 5vw, 4rem); padding-inline: var(--ex-gutter); } .explore-body:has(.explore-grid) { padding-block-start: clamp(0.35rem, 1vw, 0.65rem); } .explore-grid { display: grid; width: 100%; grid-template-columns: repeat(auto-fill, minmax(min(100%, 180px), 1fr)); gap: clamp(0.25rem, 0.55vw, 0.5rem); justify-items: stretch; } html[dir="rtl"] .explore-grid { direction: rtl; } html[dir="ltr"] .explore-grid { direction: ltr; } @media (min-width: 576px) { .explore-grid { grid-template-columns: repeat(auto-fill, minmax(160px, 1fr)); } } @media (min-width: 768px) { .explore-grid { grid-template-columns: repeat(auto-fill, minmax(180px, 1fr)); } } @media (min-width: 1200px) { .explore-grid { grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); } } @media (min-width: 1600px) { .explore-grid { grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); } } .explore-card { min-width: 0; width: 100%; max-width: none; } .explore-card__trigger, .explore-card__link { width: 100%; border: 0; padding: 0; background: transparent; cursor: pointer; text-align: inherit; text-decoration: none; color: inherit; border-radius: var(--ex-radius); overflow: hidden; position: relative; display: block; box-shadow: 0 8px 28px rgba(0, 0, 0, 0.22); transition: transform 0.28s ease, box-shadow 0.28s ease; } .explore-card__trigger:hover, .explore-card__link:hover { transform: translateY(-4px); box-shadow: 0 16px 40px rgba(0, 0, 0, 0.32), 0 0 0 1px rgba(212, 175, 55, 0.25); } .explore-card__trigger:focus-visible, .explore-card__link:focus-visible { outline: 2px solid var(--ex-gold); outline-offset: 3px; } .explore-card__media { display: block; position: relative; aspect-ratio: 1 / 1; background: #0d1528; } .explore-card__media img, .explore-card__media video.explore-card__thumb-video { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform 0.35s ease; } .explore-card__thumb-fallback { display: block; width: 100%; height: 100%; background: linear-gradient(145deg, #1a2744 0%, #0d1528 100%); } .explore-card__trigger:hover .explore-card__media img, .explore-card__link:hover .explore-card__media img, .explore-card__trigger:hover .explore-card__media video.explore-card__thumb-video, .explore-card__link:hover .explore-card__media video.explore-card__thumb-video { transform: scale(1.06); } .explore-card__shade { position: absolute; inset: 0; background: linear-gradient(to top, rgba(0, 0, 0, 0.72) 0%, rgba(0, 0, 0, 0.08) 45%, transparent 70%); pointer-events: none; } .explore-card__play { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); width: 3rem; height: 3rem; border-radius: 50%; background: rgba(0, 0, 0, 0.55); border: 2px solid rgba(255, 255, 255, 0.85); color: #fff; display: flex; align-items: center; justify-content: center; font-size: 1.35rem; backdrop-filter: blur(4px); } .explore-card__footer { position: absolute; inset-inline: 0; bottom: 0; padding: 0.75rem 0.85rem; display: flex; flex-direction: column; gap: 0.35rem; z-index: 2; text-align: start; } .explore-card__caption { display: block; font-size: 0.78rem; line-height: 1.45; color: rgba(255, 255, 255, 0.92); font-weight: 600; } .explore-card__featured { position: absolute; top: 0.55rem; inset-inline-start: 0.55rem; z-index: 3; padding: 0.18rem 0.5rem; border-radius: 999px; background: rgba(212, 175, 55, 0.92); color: #1a2236; font-size: 0.62rem; font-weight: 800; letter-spacing: 0.02em; } .explore-card__stats { display: flex; gap: 0.75rem; font-size: 0.72rem; font-weight: 700; color: rgba(255, 255, 255, 0.78); } .explore-card__stats i { color: var(--ex-gold); margin-inline-end: 0.15rem; } .explore-empty { text-align: center; padding: clamp(2.5rem, 6vw, 4.5rem) 1.25rem; border-radius: var(--ex-radius); border: 1px dashed rgba(212, 175, 55, 0.28); background: rgba(15, 26, 50, 0.45); } .explore-empty__icon { width: 4rem; height: 4rem; margin: 0 auto 1rem; border-radius: 50%; display: flex; align-items: center; justify-content: center; background: rgba(212, 175, 55, 0.12); color: var(--ex-gold); font-size: 1.65rem; } .explore-empty__title { font-size: 1.15rem; font-weight: 800; margin-bottom: 0.35rem; } .explore-empty__text { color: var(--ex-muted); margin-bottom: 1.25rem; font-size: 0.9rem; } .explore-empty__btn { border-radius: 999px; padding-inline: 1.5rem; } .explore-load-more-wrap { display: flex; justify-content: center; margin-top: 1.5rem; } .explore-load-more { display: inline-flex; align-items: center; gap: 0.5rem; padding: 0.65rem 1.35rem; border-radius: 999px; border: 1px solid var(--ex-border); background: rgba(15, 26, 50, 0.65); color: #fff; font-weight: 700; font-size: 0.88rem; cursor: pointer; transition: background 0.2s ease, border-color 0.2s ease, transform 0.2s ease; } .explore-load-more:hover { background: rgba(212, 175, 55, 0.12); border-color: rgba(212, 175, 55, 0.45); transform: translateY(-1px); } .explore-load-more:disabled { opacity: 0.6; cursor: wait; } .page-explore-detail #main-content { padding: 0; background: var(--ex-detail-page-bg, var(--elco-navy-deep, #0a1224)); } .explore-detail { --ex-gold: var(--elco-gold, #d4af37); --ex-detail-page-bg: var(--elco-navy-deep, #0a1224); --ex-detail-topbar-bg: rgba(10, 18, 36, 0.92); --ex-detail-topbar-border: rgba(212, 175, 55, 0.14); --ex-detail-surface: linear-gradient(180deg, rgba(24, 31, 48, 0.98) 0%, rgba(16, 22, 36, 0.99) 100%); --ex-detail-media-bg: radial-gradient(circle at 50% 40%, rgba(212, 175, 55, 0.06), transparent 55%), #05070d; --ex-detail-text: #ffffff; --ex-muted: rgba(255, 255, 255, 0.68); --ex-detail-border: rgba(255, 255, 255, 0.08); --ex-detail-border-soft: rgba(255, 255, 255, 0.06); --ex-detail-control-bg: rgba(255, 255, 255, 0.04); --ex-detail-control-border: rgba(255, 255, 255, 0.12); --ex-detail-control-text: rgba(255, 255, 255, 0.9); --ex-detail-action-bg: rgba(0, 0, 0, 0.2); --ex-detail-composer-bg: rgba(8, 12, 22, 0.95); --ex-detail-topbar: 0rem; --ex-detail-media-col: minmax(260px, 40%); --ex-detail-panel-col: minmax(480px, 60%); min-height: calc(100vh - var(--elco-header-height, 72px)); min-height: calc(100dvh - var(--elco-header-height, 72px)); display: flex; flex-direction: column; color: var(--ex-detail-text); } .explore-detail__breadcrumb { padding: 0.55rem clamp(1rem, 3vw, 2rem) 0; } .explore-detail__breadcrumb-list { display: flex; flex-wrap: wrap; align-items: center; gap: 0.35rem; margin: 0; padding: 0; list-style: none; font-size: 0.74rem; color: var(--ex-muted); } .explore-detail__breadcrumb-list li { display: inline-flex; align-items: center; gap: 0.35rem; } .explore-detail__breadcrumb-list li + li::before { content: "/"; opacity: 0.45; } .explore-detail__breadcrumb-list a { color: inherit; text-decoration: none; } .explore-detail__breadcrumb-list a:hover { color: var(--ex-gold); } .explore-detail__topbar { flex-shrink: 0; border-bottom: 1px solid var(--ex-detail-topbar-border); background: var(--ex-detail-topbar-bg); backdrop-filter: blur(10px); position: sticky; top: 0; z-index: 20; } .explore-detail__topbar-inner { display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: 1rem; padding: 0.65rem clamp(1rem, 3vw, 2rem); max-width: 100%; } .explore-detail__back { display: inline-flex; align-items: center; gap: 0.4rem; padding: 0.4rem 0.85rem; border-radius: 999px; border: 1px solid var(--ex-detail-control-border); background: var(--ex-detail-control-bg); color: var(--ex-detail-control-text); text-decoration: none; font-size: 0.82rem; font-weight: 700; transition: border-color 0.2s ease, color 0.2s ease, background 0.2s ease; } .explore-detail__back:hover { color: var(--ex-gold); border-color: rgba(212, 175, 55, 0.4); background: rgba(212, 175, 55, 0.08); } .explore-detail__topbar-meta { text-align: center; min-width: 0; } .explore-detail__brand { display: block; font-size: 0.88rem; font-weight: 800; color: var(--ex-detail-text); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .explore-detail__date { display: block; margin-top: 0.1rem; font-size: 0.72rem; color: var(--ex-muted); } .explore-detail__share { width: 2.5rem; height: 2.5rem; border: 1px solid var(--ex-detail-control-border); border-radius: 50%; background: var(--ex-detail-control-bg); color: var(--ex-detail-control-text); display: inline-flex; align-items: center; justify-content: center; cursor: pointer; transition: border-color 0.2s ease, color 0.2s ease, background 0.2s ease; } .explore-detail__share:hover { color: var(--ex-gold); border-color: rgba(212, 175, 55, 0.4); background: rgba(212, 175, 55, 0.08); } .explore-detail__stage { flex: 1; display: grid; grid-template-columns: 1fr; min-height: 0; } @media (min-width: 992px) { .explore-detail__stage { grid-template-columns: var(--ex-detail-media-col) var(--ex-detail-panel-col); min-height: calc(100vh - var(--elco-header-height, 72px) - var(--ex-detail-topbar)); min-height: calc(100dvh - var(--elco-header-height, 72px) - var(--ex-detail-topbar)); } } .explore-detail__media { background: var(--ex-detail-media-bg); display: flex; align-items: center; justify-content: center; min-height: clamp(220px, 36vh, 420px); padding: clamp(0.75rem, 2vw, 1.25rem); border-bottom: 1px solid var(--ex-detail-border-soft); } @media (min-width: 992px) { .explore-detail__media { min-height: 0; height: 100%; border-bottom: 0; border-inline-end: 1px solid var(--ex-detail-border); padding: clamp(1rem, 2.5vw, 2rem); } } .explore-detail__media-inner { width: 100%; height: 100%; max-width: min(100%, 520px); max-height: min(52vh, 560px); display: flex; align-items: center; justify-content: center; } @media (min-width: 992px) { .explore-detail__media-inner { max-width: min(100%, 480px); max-height: calc(100vh - var(--elco-header-height, 72px) - var(--ex-detail-topbar) - 4rem); max-height: calc(100dvh - var(--elco-header-height, 72px) - var(--ex-detail-topbar) - 4rem); } } .explore-detail__image, .explore-detail__video { width: 100%; height: auto; max-height: min(52vh, 560px); object-fit: contain; display: block; border-radius: 12px; box-shadow: 0 16px 40px rgba(0, 0, 0, 0.28); } .explore-detail__embed-wrap { position: relative; width: 100%; aspect-ratio: 16 / 9; max-height: min(52vh, 560px); border-radius: 12px; overflow: hidden; box-shadow: 0 16px 40px rgba(0, 0, 0, 0.28); background: #000; } .explore-detail__embed { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; } @media (min-width: 992px) { .explore-detail__embed-wrap { max-height: calc(100vh - var(--elco-header-height, 72px) - var(--ex-detail-topbar) - 4rem); max-height: calc(100dvh - var(--elco-header-height, 72px) - var(--ex-detail-topbar) - 4rem); } } @media (min-width: 992px) { .explore-detail__image, .explore-detail__video { max-height: calc(100vh - var(--elco-header-height, 72px) - var(--ex-detail-topbar) - 4rem); max-height: calc(100dvh - var(--elco-header-height, 72px) - var(--ex-detail-topbar) - 4rem); } } .explore-detail__panel { display: flex; flex-direction: column; min-height: 0; min-width: 0; background: var(--ex-detail-surface); } @media (min-width: 992px) { .explore-detail__panel { max-height: calc(100vh - var(--elco-header-height, 72px) - var(--ex-detail-topbar)); max-height: calc(100dvh - var(--elco-header-height, 72px) - var(--ex-detail-topbar)); } } .explore-detail__panel-head { flex-shrink: 0; padding: 1rem clamp(1rem, 2.5vw, 1.35rem) 0; border-bottom: 1px solid var(--ex-detail-border-soft); } .explore-detail__actions-bar--head { margin-top: 0.85rem; padding: 0; border-top: 0; background: transparent; } .explore-detail__topic .explore-detail__meta { margin-top: 0.45rem; } .explore-detail__author { display: flex; align-items: center; gap: 0.75rem; margin-bottom: 0; } .explore-detail__avatar { width: 2.75rem; height: 2.75rem; border-radius: 50%; background: rgba(212, 175, 55, 0.14); border: 1px solid rgba(212, 175, 55, 0.35); color: var(--ex-gold); display: inline-flex; align-items: center; justify-content: center; flex-shrink: 0; font-size: 1.1rem; } .explore-detail__author-text { min-width: 0; } .explore-detail__author-name { margin: 0; font-size: 0.82rem; font-weight: 800; color: var(--ex-detail-text); } .explore-detail__meta { margin: 0.15rem 0 0; font-size: 0.72rem; color: var(--ex-muted); } .explore-detail__topic { padding: 0.85rem 0 0; border-top: 1px solid var(--ex-detail-border-soft); margin-top: 0.85rem; } .explore-detail__topic-label { display: block; margin-bottom: 0.35rem; font-size: 0.68rem; font-weight: 800; letter-spacing: 0.05em; text-transform: uppercase; color: var(--ex-gold); } .explore-detail__title { margin: 0; font-size: clamp(1rem, 2.2vw, 1.25rem); font-weight: 800; line-height: 1.55; color: var(--ex-detail-text); } .explore-detail__caption-block { padding: 0.15rem 0; } .explore-detail__caption-toggle { display: block; width: 100%; margin: 0; padding: 0; border: 0; background: transparent; color: inherit; text-align: inherit; cursor: pointer; } .explore-detail__caption-toggle:not(.is-truncated):not(.is-expanded) { cursor: default; } .explore-detail__caption { line-height: 1.85; font-size: 0.92rem; color: var(--ex-detail-text); opacity: 0.92; } .explore-detail__caption-toggle:not(.is-expanded) .explore-detail__caption { display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; } .explore-detail__caption-toggle.is-expanded .explore-detail__caption { display: block; overflow: visible; -webkit-line-clamp: unset; } .explore-detail__caption-more { display: none; margin-top: 0.2rem; font-size: 0.84rem; font-weight: 700; color: var(--ex-muted); } .explore-detail__caption-toggle.is-truncated:not(.is-expanded) .explore-detail__caption-more { display: inline; } .explore-detail__caption-toggle.is-truncated:not(.is-expanded):hover .explore-detail__caption-more, .explore-detail__caption-toggle.is-truncated:not(.is-expanded):hover .explore-detail__caption { color: var(--ex-detail-text); } .explore-detail__caption-empty { margin: 0; font-size: 0.86rem; color: var(--ex-muted); } .explore-detail__actions-bar { display: flex; align-items: center; gap: 0.65rem; padding: 0.75rem clamp(1rem, 2.5vw, 1.35rem) 1rem; border-top: 1px solid var(--ex-detail-border); background: var(--ex-detail-composer-bg); flex-shrink: 0; } .explore-detail__icon-btn { display: inline-flex; align-items: center; gap: 0.35rem; border: 1px solid var(--ex-detail-border); border-radius: 999px; background: var(--ex-detail-action-bg); color: var(--ex-detail-control-text); padding: 0.45rem 0.8rem; font-size: 0.82rem; font-weight: 700; cursor: pointer; transition: background 0.2s ease, border-color 0.2s ease, color 0.2s ease; } .explore-detail__icon-btn:hover, .explore-detail__icon-btn--comments.is-active { border-color: rgba(212, 175, 55, 0.35); background: rgba(212, 175, 55, 0.08); color: var(--ex-gold); } .explore-detail__icon-btn i { font-size: 1.05rem; } .explore-like-btn[data-liked="1"] { color: #ff5c7a; border-color: rgba(255, 92, 122, 0.35); background: rgba(255, 92, 122, 0.1); } .explore-like-btn[data-liked="1"] i { color: #ff5c7a; } .explore-like-btn[data-liked="1"] .bi-heart::before { content: "\f415"; } body.explore-comments-open { overflow: hidden; } @media (max-width: 991.98px) { html.explore-comments-open, body.explore-comments-open { overflow: hidden; } body.explore-comments-open { position: fixed; left: 0; right: 0; width: 100%; } body.explore-comments-open .mobile-bottom-nav { visibility: hidden; pointer-events: none; } } @keyframes exploreCommentsSheetIn { from { opacity: 0; transform: translateY(1.25rem); } to { opacity: 1; transform: translateY(0); } } @keyframes exploreCommentsSheetSlideUp { from { opacity: 0.75; transform: translateY(100%); } to { opacity: 1; transform: translateY(0); } } @keyframes exploreCommentsSheetInSide { from { opacity: 0; transform: translateX(calc(var(--ex-comments-slide, 1) * 1.5rem)); } to { opacity: 1; transform: translateX(0); } } .explore-comments-sheet { --ex-comments-slide: 1; --ex-cs-gold: var(--elco-gold, #d4af37); --ex-cs-panel-bg: #141c2e; --ex-cs-panel-border: rgba(255, 255, 255, 0.1); --ex-cs-text: #ffffff; --ex-cs-muted: rgba(255, 255, 255, 0.68); --ex-cs-border: rgba(255, 255, 255, 0.08); --ex-cs-border-soft: rgba(255, 255, 255, 0.06); --ex-cs-control-bg: rgba(255, 255, 255, 0.06); --ex-cs-control-border: rgba(255, 255, 255, 0.12); --ex-cs-control-text: rgba(255, 255, 255, 0.92); --ex-cs-bubble-bg: rgba(255, 255, 255, 0.08); --ex-cs-bubble-border: rgba(255, 255, 255, 0.1); --ex-cs-author: var(--ex-cs-gold); --ex-cs-backdrop: rgba(4, 8, 18, 0.72); --ex-cs-head-bg: linear-gradient(180deg, rgba(255, 255, 255, 0.03) 0%, transparent 100%); --ex-cs-empty-icon-bg: rgba(255, 255, 255, 0.05); --ex-cs-empty-icon-border: rgba(255, 255, 255, 0.16); --ex-cs-handle: rgba(255, 255, 255, 0.22); --ex-cs-close-hover: rgba(255, 255, 255, 0.08); --ex-cs-info-bg: rgba(33, 150, 243, 0.12); --ex-cs-info-border: rgba(100, 181, 246, 0.35); --ex-cs-info-text: rgba(255, 255, 255, 0.88); position: fixed; inset: 0; z-index: 1095; display: flex; align-items: flex-end; justify-content: center; } html[dir="rtl"] .explore-comments-sheet { --ex-comments-slide: -1; } .explore-comments-sheet[hidden] { display: none !important; } .explore-comments-sheet__backdrop { position: absolute; inset: 0; background: var(--ex-cs-backdrop); backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px); } .explore-comments-sheet__panel { position: relative; z-index: 1; width: min(100%, 520px); max-width: 100%; max-height: min(86dvh, 680px); box-sizing: border-box; display: grid; grid-template-rows: auto auto minmax(0, 1fr) auto; overflow: hidden; min-height: 0; background: var(--ex-cs-panel-bg); border: 1px solid var(--ex-cs-panel-border); border-bottom: 0; border-radius: 20px 20px 0 0; box-shadow: 0 -16px 48px rgba(0, 0, 0, 0.35); color: var(--ex-cs-text); animation: exploreCommentsSheetIn 0.28s ease; } @media (max-width: 991.98px) { .explore-comments-sheet { display: block; padding: 0; width: 100%; max-width: 100vw; height: 100%; height: 100dvh; max-height: 100dvh; overflow: hidden; overscroll-behavior: none; } .explore-comments-sheet__panel { position: fixed; left: 0; right: 0; bottom: 0; width: 100%; max-width: 100vw; height: min(88dvh, calc(100dvh - env(safe-area-inset-top, 0px))); max-height: min(88dvh, calc(100dvh - env(safe-area-inset-top, 0px))); margin: 0; display: flex; flex-direction: column; grid-template-rows: unset; border-radius: 20px 20px 0 0; border-inline: 0; animation: exploreCommentsSheetSlideUp 0.32s cubic-bezier(0.32, 0.72, 0, 1); z-index: 1096; } } @media (min-width: 992px) { .explore-comments-sheet { align-items: flex-end; justify-content: flex-end; padding-top: var(--elco-header-height, 72px); } .explore-comments-sheet__panel { width: min(100%, 440px); height: auto; max-height: calc(100dvh - var(--elco-header-height, 72px) - 0.5rem); grid-template-rows: auto minmax(0, 1fr) auto; border-radius: 16px 0 0 0; border-bottom: 0; border-inline-end: 0; border-inline-start: 1px solid var(--ex-cs-panel-border); box-shadow: -8px -12px 40px rgba(0, 0, 0, 0.28); animation: exploreCommentsSheetIn 0.28s ease; } html[dir="rtl"] .explore-comments-sheet__panel { border-radius: 0 16px 0 0; box-shadow: 8px -12px 40px rgba(0, 0, 0, 0.28); } } .explore-comments-sheet__handle { flex-shrink: 0; width: 2.75rem; height: 0.28rem; margin: 0.65rem auto 0; border-radius: 999px; background: var(--ex-cs-handle); touch-action: none; } @media (min-width: 992px) { .explore-comments-sheet__handle { display: none; } } .explore-comments-sheet__head { display: flex; align-items: flex-start; justify-content: space-between; gap: 0.75rem; padding: 0.85rem 1rem 0.95rem; border-bottom: 1px solid var(--ex-cs-border-soft); flex-shrink: 0; background: var(--ex-cs-head-bg); } .explore-comments-sheet__head-main { display: flex; align-items: flex-start; gap: 0.65rem; min-width: 0; flex: 1; overflow: hidden; } .explore-comments-sheet__head-main > div { min-width: 0; overflow: hidden; } .explore-comments-sheet__head-icon { width: 2.35rem; height: 2.35rem; border-radius: 12px; background: rgba(212, 175, 55, 0.14); border: 1px solid rgba(212, 175, 55, 0.32); color: var(--ex-cs-gold); display: inline-flex; align-items: center; justify-content: center; flex-shrink: 0; font-size: 1.05rem; } .explore-comments-sheet__title { margin: 0; font-size: 0.98rem; font-weight: 800; line-height: 1.35; color: var(--ex-cs-text); } .explore-comments-sheet__subtitle { margin: 0.15rem 0 0; font-size: 0.74rem; line-height: 1.45; color: var(--ex-cs-muted); display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; } .explore-comments-sheet__count { flex-shrink: 0; align-self: flex-start; min-width: 1.65rem; padding: 0.18rem 0.5rem; border-radius: 999px; background: rgba(212, 175, 55, 0.16); border: 1px solid rgba(212, 175, 55, 0.35); color: var(--ex-cs-gold); font-size: 0.72rem; font-weight: 800; text-align: center; } .explore-comments-sheet__close { width: 2.35rem; height: 2.35rem; border: 1px solid var(--ex-cs-control-border); border-radius: 50%; background: var(--ex-cs-control-bg); color: var(--ex-cs-control-text); display: inline-flex; align-items: center; justify-content: center; cursor: pointer; flex-shrink: 0; transition: background 0.2s ease, border-color 0.2s ease, transform 0.2s ease; } .explore-comments-sheet__close:hover { background: var(--ex-cs-close-hover); transform: scale(1.04); } .explore-comments-sheet__body { min-height: 0; display: flex; flex-direction: column; overflow: hidden; } .explore-comments-sheet__list-wrap { flex: 1; min-height: 0; display: flex; flex-direction: column; justify-content: flex-end; overflow: hidden; } .explore-comments-sheet__list-wrap:has(.explore-comments-sheet__empty) { justify-content: center; } .explore-comments-sheet__list-wrap[hidden] { display: none !important; } .explore-comments-sheet__list { flex: 0 1 auto; width: 100%; max-height: 100%; min-height: 0; overflow-y: auto; overflow-x: hidden; padding: 0 1rem 0.75rem; -webkit-overflow-scrolling: touch; scrollbar-width: thin; scrollbar-color: rgba(212, 175, 55, 0.28) transparent; } .explore-comments-sheet__list-inner { width: 100%; max-width: 100%; box-sizing: border-box; overflow-x: hidden; } .explore-comments-sheet__list::-webkit-scrollbar { width: 4px; } .explore-comments-sheet__list::-webkit-scrollbar-track { margin-block: 4px; background: transparent; } .explore-comments-sheet__list::-webkit-scrollbar-thumb { background: rgba(212, 175, 55, 0.28); border-radius: 999px; } .explore-comments-sheet__list::-webkit-scrollbar-thumb:hover { background: rgba(212, 175, 55, 0.48); } .explore-comments-sheet__list::-webkit-scrollbar-button { display: none; width: 0; height: 0; } .explore-comments-sheet__answers-head { flex-shrink: 0; margin: 0; padding: 0.65rem 1rem 0.55rem; border-bottom: 2px solid var(--ex-cs-gold); font-size: 0.95rem; font-weight: 700; color: var(--ex-cs-text); } .explore-comments-sheet__answers-head span { color: var(--ex-cs-gold); } @media (min-width: 992px) { .explore-comments-sheet__answers-head { display: none; } } .explore-comments-sheet__info-box { margin-bottom: 0.85rem; padding: 0.75rem 0.85rem; border-radius: 10px; border: 1px solid var(--ex-cs-info-border); background: var(--ex-cs-info-bg); color: var(--ex-cs-info-text); font-size: 0.78rem; line-height: 1.65; } .explore-comments-sheet__comment { display: flex; align-items: flex-start; gap: 0.65rem; } .explore-comments-sheet__avatar { width: 2.25rem; height: 2.25rem; border-radius: 50%; background: linear-gradient(145deg, rgba(212, 175, 55, 0.22), rgba(212, 175, 55, 0.08)); border: 1px solid rgba(212, 175, 55, 0.28); color: var(--ex-cs-gold); display: inline-flex; align-items: center; justify-content: center; flex-shrink: 0; font-size: 0.95rem; } .explore-comments-sheet__bubble { flex: 1; min-width: 0; padding: 0.65rem 0.85rem; border-radius: 14px; border-start-start-radius: 4px; background: var(--ex-cs-bubble-bg); border: 1px solid var(--ex-cs-bubble-border); } html[dir="ltr"] .explore-comments-sheet__bubble { border-start-start-radius: 14px; border-start-end-radius: 4px; } .explore-comments-sheet__comment-head { display: flex; flex-wrap: wrap; align-items: baseline; gap: 0.35rem 0.55rem; margin-bottom: 0.25rem; } .explore-comments-sheet__author { font-size: 0.8rem; font-weight: 800; color: var(--ex-cs-author); } .explore-comments-sheet__text { margin: 0; font-size: 0.9rem; line-height: 1.7; color: var(--ex-cs-text); word-break: break-word; } .explore-comments-sheet__empty { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 0.65rem; padding: 2rem 1.5rem; text-align: center; } .explore-comments-sheet__empty-icon { width: 3.25rem; height: 3.25rem; border-radius: 50%; background: var(--ex-cs-empty-icon-bg); border: 1px dashed var(--ex-cs-empty-icon-border); color: var(--ex-cs-muted); display: inline-flex; align-items: center; justify-content: center; font-size: 1.35rem; } .explore-comments-sheet__empty-text { margin: 0; max-width: 16rem; font-size: 0.88rem; line-height: 1.65; color: var(--ex-cs-muted); } .explore-comments-sheet__empty-hint { margin: 0; font-size: 0.8rem; color: var(--ex-cs-muted); opacity: 0.85; } .explore-comments-sheet__info-title { margin: 0 0 0.35rem; font-size: 0.82rem; font-weight: 700; } .explore-comments-sheet__info-list { margin: 0; padding-inline-start: 1.1rem; } .explore-comment-card { display: flex; gap: 0.75rem; padding: 0.85rem 0; border-bottom: 1px solid var(--ex-cs-border-soft); flex-shrink: 0; max-width: 100%; min-width: 0; box-sizing: border-box; overflow-wrap: anywhere; } .explore-comment-card__thread { display: block; margin-top: 0.15rem; padding-bottom: 0.25rem; max-width: 100%; box-sizing: border-box; overflow-x: hidden; } .explore-comment-card__thread[hidden] { display: none !important; } .explore-comment-card--reply { margin-inline-start: 1.35rem; padding-inline-start: 0.65rem; border-inline-start: 2px solid rgba(212, 175, 55, 0.35); } .explore-comment-card--staff { border-inline-end: 3px solid rgba(76, 175, 80, 0.75); padding-inline-end: 0.55rem; background: rgba(76, 175, 80, 0.08); border-radius: 12px; padding-top: 0.65rem; padding-bottom: 0.65rem; } .explore-comment-card__staff-badge { display: inline-flex; align-items: center; padding: 0.08rem 0.45rem; border-radius: 999px; background: rgba(76, 175, 80, 0.18); border: 1px solid rgba(76, 175, 80, 0.35); color: #81c784; font-size: 0.62rem; font-weight: 800; } .explore-comment-card__toggle-replies { display: inline-flex; align-items: center; gap: 0.45rem; margin: 0.35rem 0 0.15rem; padding: 0; border: 0; background: transparent; color: var(--ex-cs-muted); font-size: 0.76rem; font-weight: 700; cursor: pointer; } .explore-comment-card__toggle-replies:hover { color: var(--ex-cs-gold); } .explore-comment-card__toggle-line { width: 1.35rem; height: 1px; background: currentColor; opacity: 0.55; flex-shrink: 0; } .explore-comment-card__avatar-col { flex-shrink: 0; width: 3.5rem; text-align: center; } .explore-comment-card__avatar { width: 2.5rem; height: 2.5rem; margin: 0 auto 0.25rem; border-radius: 50%; display: flex; align-items: center; justify-content: center; background: rgba(100, 181, 246, 0.18); color: #90caf9; overflow: hidden; } .explore-comment-card--staff .explore-comment-card__avatar { background: rgba(76, 175, 80, 0.18); } .explore-comment-card__avatar img { width: 100%; height: 100%; object-fit: cover; } .explore-comment-card__author { font-size: 0.68rem; font-weight: 700; color: var(--ex-cs-muted); word-break: break-word; } .explore-comment-card__content { flex: 1; min-width: 0; } .explore-comment-card__meta { display: flex; justify-content: space-between; align-items: center; gap: 0.5rem; flex-wrap: wrap; margin-bottom: 0.45rem; padding-bottom: 0.45rem; border-bottom: 1px solid var(--ex-cs-border-soft); min-width: 0; } .explore-comment-card__role { font-size: 0.74rem; font-weight: 700; color: var(--ex-cs-author); min-width: 0; overflow: hidden; text-overflow: ellipsis; } .explore-comment-card__date { font-size: 0.72rem; color: var(--ex-cs-muted); } .explore-comment-card__body { font-size: 0.88rem; line-height: 1.75; color: var(--ex-cs-text); word-break: break-word; } .explore-comment-card__actions { display: flex; align-items: center; gap: 0.55rem; flex-wrap: wrap; margin-top: 0.55rem; } .explore-comment-card__reply-count { font-size: 0.72rem; color: var(--ex-cs-muted); } .explore-comment-card__reply-btn { border: 0; background: transparent; color: var(--ex-cs-gold); font-size: 0.76rem; font-weight: 700; padding: 0; display: inline-flex; align-items: center; gap: 0.25rem; cursor: pointer; } .explore-comment-card__reply-btn:hover { opacity: 0.85; } .explore-comments-sheet__cancel-reply { border: 1px solid var(--ex-cs-control-border); background: transparent; color: var(--ex-cs-muted); border-radius: 999px; padding: 0.35rem 0.75rem; font-size: 0.76rem; cursor: pointer; } .explore-comments-sheet__composer { flex-shrink: 0; position: relative; z-index: 2; padding: 0.85rem 1rem calc(0.85rem + env(safe-area-inset-bottom, 0px)); border-top: 1px solid var(--ex-cs-border); background: var(--ex-cs-panel-bg); display: flex; flex-direction: column; gap: 0.55rem; } .explore-comments-sheet__form { display: flex; flex-direction: column; gap: 0.55rem; width: 100%; } .explore-comments-sheet__form-actions { display: flex; align-items: center; justify-content: flex-end; gap: 0.45rem; flex-wrap: wrap; } .explore-comments-sheet__input-wrap { flex: 1; border: 1px solid var(--ex-cs-border); border-radius: 16px; background: var(--ex-cs-control-bg); padding: 0.55rem 0.95rem; transition: border-color 0.2s ease, box-shadow 0.2s ease; } .explore-comments-sheet__input-wrap:focus-within { border-color: rgba(212, 175, 55, 0.45); box-shadow: 0 0 0 3px rgba(212, 175, 55, 0.12); } .explore-comments-sheet__form textarea { width: 100%; border: 0; background: transparent; color: var(--ex-cs-text); resize: none; min-height: 1.55rem; max-height: 5.5rem; font-size: 0.9rem; line-height: 1.55; padding: 0; } .explore-comments-sheet__form textarea:focus { outline: none; } .explore-comments-sheet__form textarea::placeholder { color: var(--ex-cs-muted); opacity: 0.85; } .explore-comments-sheet__send { display: inline-flex; align-items: center; justify-content: center; gap: 0.35rem; min-height: 2.65rem; padding: 0 0.95rem; border: 0; border-radius: 999px; background: var(--ex-cs-gold); color: #0a1224; font-size: 0.78rem; font-weight: 800; cursor: pointer; flex-shrink: 0; transition: transform 0.2s ease, filter 0.2s ease; } .explore-comments-sheet__send:hover { transform: scale(1.03); filter: brightness(1.05); } .explore-comments-sheet__send:disabled { opacity: 0.55; cursor: not-allowed; transform: none; } .explore-comments-sheet__send-label { display: none; } @media (min-width: 576px) { .explore-comments-sheet__send { padding-inline: 1.1rem; } .explore-comments-sheet__send-label { display: inline; } } html[dir="rtl"] .explore-comments-sheet__send .bi-send-fill { transform: scaleX(-1); } .explore-comments-sheet__login-hint { margin: 0; text-align: center; font-size: 0.88rem; line-height: 1.65; color: var(--ex-cs-muted); } .explore-comments-sheet__login-hint a { color: var(--ex-cs-gold); font-weight: 700; } .explore-comments-sheet__success { display: flex; align-items: flex-start; gap: 0.75rem; padding: 0.85rem 0.95rem; border-radius: 14px; border: 1px solid rgba(212, 175, 55, 0.35); background: rgba(212, 175, 55, 0.12); } .explore-comments-sheet__success[hidden] { display: none !important; } .explore-comments-sheet__success-icon { flex-shrink: 0; font-size: 1.35rem; line-height: 1; color: var(--ex-cs-gold); } .explore-comments-sheet__success-copy { min-width: 0; } .explore-comments-sheet__success-title { display: block; margin: 0 0 0.25rem; font-size: 0.92rem; font-weight: 800; color: var(--ex-cs-text); } .explore-comments-sheet__success-text { margin: 0; font-size: 0.84rem; line-height: 1.65; color: var(--ex-cs-muted); } .explore-comments-sheet__comment--reply { margin-inline-start: 1.35rem; } .explore-comments-sheet__comment--reply .explore-comments-sheet__bubble { border-start-start-radius: 14px; } .explore-comments-sheet__time { font-size: 0.72rem; color: var(--ex-cs-muted); } .explore-comments-sheet__comment-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 0.45rem 0.65rem; margin-top: 0.45rem; } .explore-comments-sheet__more-hint, .explore-comments-sheet__reply-count { font-size: 0.72rem; color: var(--ex-cs-muted); } .explore-comments-sheet__reply-btn, .explore-comments-sheet__detail-reply-btn { border: 0; background: transparent; color: var(--ex-cs-gold); font-size: 0.76rem; font-weight: 700; padding: 0; cursor: pointer; } .explore-comments-sheet__comment[role="button"] { cursor: pointer; transition: transform 0.15s ease; } .explore-comments-sheet__comment[role="button"]:hover .explore-comments-sheet__bubble, .explore-comments-sheet__comment[role="button"]:focus-visible .explore-comments-sheet__bubble { border-color: rgba(212, 175, 55, 0.35); } .explore-comments-sheet__detail { flex: 1; min-height: 0; overflow: auto; padding: 0.85rem 1rem 1rem; display: flex; flex-direction: column; gap: 0.85rem; } .explore-comments-sheet__detail[hidden] { display: none !important; } .explore-comments-sheet__detail-back { display: inline-flex; align-items: center; gap: 0.35rem; border: 0; background: transparent; color: var(--ex-cs-gold); font-size: 0.82rem; font-weight: 700; padding: 0; cursor: pointer; align-self: flex-start; } html[dir="ltr"] .explore-comments-sheet__detail-back .bi-arrow-right { transform: scaleX(-1); } .explore-comments-sheet__detail-card { padding: 0.85rem; border-radius: 14px; border: 1px solid var(--ex-cs-bubble-border); background: var(--ex-cs-bubble-bg); } .explore-comments-sheet__detail-head { display: flex; align-items: flex-start; gap: 0.65rem; margin-bottom: 0.65rem; } .explore-comments-sheet__detail-body { margin: 0; font-size: 0.92rem; line-height: 1.75; color: var(--ex-cs-text); white-space: pre-wrap; word-break: break-word; } .explore-comments-sheet__detail-replies-title { margin: 0 0 0.45rem; font-size: 0.8rem; font-weight: 800; color: var(--ex-cs-muted); } .explore-comments-sheet__detail-replies { display: flex; flex-direction: column; gap: 0.55rem; } .explore-comments-sheet__detail-reply-item { padding: 0.55rem 0.65rem; border-radius: 12px; border: 1px solid var(--ex-cs-border-soft); background: rgba(255, 255, 255, 0.03); } html[data-color-scheme="light"] body.elco-theme-premium .explore-comments-sheet__detail-reply-item { background: #f8f9fb; } .explore-comments-sheet__detail-reply-btn { display: inline-flex; align-items: center; justify-content: center; gap: 0.35rem; width: 100%; min-height: 2.65rem; border-radius: 999px; border: 1px solid rgba(212, 175, 55, 0.35); background: rgba(212, 175, 55, 0.12); } .explore-comments-sheet__reply-context { margin: 0 0 0.55rem; font-size: 0.78rem; color: var(--ex-cs-gold); font-weight: 700; } .explore-comments-sheet__list[hidden] { display: none !important; } @media (max-width: 991.98px) { .explore-comments-sheet__backdrop { touch-action: none; } .explore-comments-sheet__handle, .explore-comments-sheet__head { flex-shrink: 0; touch-action: none; } .explore-comments-sheet.is-dragging .explore-comments-sheet__panel { animation: none; transition: none; } .explore-comments-sheet.is-dragging .explore-comments-sheet__backdrop { transition: none; } .explore-comments-sheet.is-closing .explore-comments-sheet__panel { animation: none; transition: transform 0.32s cubic-bezier(0.32, 0.72, 0, 1); } .explore-comments-sheet.is-closing .explore-comments-sheet__backdrop { transition: opacity 0.28s ease; } .explore-comments-sheet__head { padding: 0.65rem 0.85rem 0.75rem; } .explore-comments-sheet__head-icon { display: none; } .explore-comments-sheet__subtitle { -webkit-line-clamp: 1; } .explore-comments-sheet__answers-head { display: none; } .explore-comments-sheet__body { flex: 1 1 0; min-height: 0; overflow: hidden; max-width: 100%; } .explore-comments-sheet__list-wrap { flex: 1 1 0; min-height: 0; justify-content: flex-start; overflow: hidden; max-width: 100%; } .explore-comments-sheet__list { flex: 1 1 0; min-height: 0; max-height: none; max-width: 100%; overflow-x: hidden; overflow-y: auto; overscroll-behavior-y: contain; -webkit-overflow-scrolling: touch; touch-action: pan-y; padding: 0 0.85rem 0.65rem; } .explore-comments-sheet__composer { flex-shrink: 0; max-width: 100%; padding: 0.65rem 0.85rem calc(0.65rem + env(safe-area-inset-bottom, 0px)); } .explore-comments-sheet__info-box { display: none; } .explore-comments-sheet__form { flex-direction: row; align-items: flex-end; gap: 0.45rem; max-width: 100%; min-width: 0; } .explore-comments-sheet__input-wrap { flex: 1; min-width: 0; padding: 0.45rem 0.75rem; } .explore-comments-sheet__form textarea { min-height: 1.45rem; max-height: 3.5rem; font-size: 0.85rem; } .explore-comments-sheet__form-actions { flex-shrink: 0; margin: 0; } .explore-comments-sheet__send { min-height: 2.45rem; min-width: 2.45rem; padding: 0; } .explore-comments-sheet__send-label { display: none; } .explore-comment-card { gap: 0.55rem; padding: 0.7rem 0; } .explore-comment-card--staff { margin-inline: 0; max-width: 100%; } .explore-comment-card__avatar-col { width: 2.65rem; flex-shrink: 0; } .explore-comment-card__avatar { width: 2.1rem; height: 2.1rem; } .explore-comment-card__author { font-size: 0.6rem; line-height: 1.25; } .explore-comment-card__body { font-size: 0.84rem; line-height: 1.65; overflow-wrap: anywhere; word-break: break-word; } .explore-comment-card__meta { margin-bottom: 0.35rem; padding-bottom: 0.35rem; } .explore-comment-card--reply { margin-inline-start: 0.75rem; padding-inline-start: 0.45rem; max-width: calc(100% - 0.75rem); } .explore-comments-sheet__detail { flex: 1 1 0; padding: 0.65rem 0.85rem; max-width: 100%; overflow-x: hidden; } .explore-comments-sheet__empty { padding: 1.25rem 1rem; } } html[data-color-scheme="light"] body.elco-theme-premium .explore-comments-sheet { --ex-cs-panel-bg: #ffffff; --ex-cs-panel-border: rgba(72, 96, 140, 0.2); --ex-cs-text: #0c1833; --ex-cs-muted: #5c6370; --ex-cs-border: rgba(72, 96, 140, 0.16); --ex-cs-border-soft: rgba(72, 96, 140, 0.1); --ex-cs-control-bg: #f4f6fa; --ex-cs-control-border: rgba(72, 96, 140, 0.18); --ex-cs-control-text: #0c1833; --ex-cs-bubble-bg: #eef1f6; --ex-cs-bubble-border: rgba(72, 96, 140, 0.14); --ex-cs-author: #9a7b1a; --ex-cs-backdrop: rgba(12, 24, 51, 0.45); --ex-cs-head-bg: linear-gradient(180deg, rgba(212, 175, 55, 0.06) 0%, transparent 100%); --ex-cs-empty-icon-bg: #eef1f6; --ex-cs-empty-icon-border: rgba(72, 96, 140, 0.18); --ex-cs-handle: rgba(12, 24, 51, 0.14); --ex-cs-close-hover: rgba(12, 24, 51, 0.06); --ex-cs-info-bg: rgba(33, 150, 243, 0.1); --ex-cs-info-border: rgba(33, 150, 243, 0.28); --ex-cs-info-text: #0a3d6b; } html[data-color-scheme="light"] body.elco-theme-premium .explore-comments-sheet__list { scrollbar-color: rgba(154, 123, 26, 0.32) transparent; } html[data-color-scheme="light"] body.elco-theme-premium .explore-comments-sheet__list::-webkit-scrollbar-thumb { background: rgba(154, 123, 26, 0.28); } html[data-color-scheme="light"] body.elco-theme-premium .explore-comments-sheet__list::-webkit-scrollbar-thumb:hover { background: rgba(154, 123, 26, 0.45); } .explore-detail__actions { display: flex; gap: 0.55rem; } .explore-detail__action { flex: 1; display: inline-flex; align-items: center; justify-content: center; gap: 0.35rem; padding: 0.55rem 0.75rem; border: 1px solid var(--ex-detail-border); border-radius: 999px; background: var(--ex-detail-action-bg); color: var(--ex-detail-control-text); font-size: 0.78rem; font-weight: 600; cursor: pointer; transition: background 0.2s ease, border-color 0.2s ease, color 0.2s ease; } .explore-detail__action strong { font-size: 0.82rem; font-weight: 800; } .explore-detail__action:hover { background: rgba(255, 255, 255, 0.05); border-color: rgba(212, 175, 55, 0.25); } .explore-detail__action--static { cursor: default; } .explore-detail__action--static:hover { background: var(--ex-detail-action-bg); border-color: var(--ex-detail-border); } .explore-detail__action i { font-size: 1rem; color: var(--ex-gold); } .explore-like-btn[data-liked="1"] { color: #ff5c7a; border-color: rgba(255, 92, 122, 0.35); background: rgba(255, 92, 122, 0.1); } .explore-like-btn[data-liked="1"] i { color: #ff5c7a; } .explore-like-btn[data-liked="1"] .bi-heart::before { content: "\f415"; } .explore-detail__scroll { flex: 1; min-height: 0; overflow: auto; padding: 1rem clamp(1rem, 2.5vw, 1.35rem); scrollbar-width: thin; scrollbar-color: rgba(212, 175, 55, 0.35) transparent; } .explore-detail__comments { margin-bottom: 1rem; padding-bottom: 1rem; border-bottom: 1px solid var(--ex-detail-border-soft); } .explore-detail__comments-title, .explore-detail__caption-title { margin: 0 0 0.75rem; font-size: 0.78rem; font-weight: 800; letter-spacing: 0.04em; text-transform: uppercase; color: var(--ex-muted); } .explore-detail__caption-block { padding-top: 0.25rem; } .explore-detail__caption.product-prose > :last-child { margin-bottom: 0; } .explore-detail__comments-list { display: flex; flex-direction: column; gap: 0; } .explore-detail__comment { display: flex; gap: 0.65rem; padding: 0.75rem 0; border-bottom: 1px solid var(--ex-detail-border-soft); } .explore-detail__comment:last-child { border-bottom: 0; } .explore-detail__comment-avatar { width: 2rem; height: 2rem; border-radius: 50%; background: rgba(255, 255, 255, 0.08); color: rgba(255, 255, 255, 0.55); display: inline-flex; align-items: center; justify-content: center; flex-shrink: 0; } .explore-detail__comment-author { font-size: 0.78rem; font-weight: 800; margin-bottom: 0.2rem; color: var(--ex-detail-text); } .explore-detail__comment-body { margin: 0; font-size: 0.86rem; line-height: 1.65; color: var(--ex-detail-text); opacity: 0.86; } .explore-detail__comments-empty { margin: 0.5rem 0 0; font-size: 0.84rem; color: var(--ex-muted); text-align: center; padding: 1.25rem 0.5rem; } .explore-detail__comments-empty[hidden] { display: none !important; } .explore-detail__composer { flex-shrink: 0; padding: 0.75rem clamp(1rem, 2.5vw, 1.35rem) 1rem; border-top: 1px solid var(--ex-detail-border); background: var(--ex-detail-composer-bg); } .explore-detail__form { display: flex; align-items: flex-end; gap: 0.55rem; } .explore-detail__input-wrap { flex: 1; border: 1px solid var(--ex-detail-border); border-radius: 999px; background: var(--ex-detail-control-bg); padding: 0.4rem 0.95rem; } .explore-detail__form textarea { width: 100%; border: 0; background: transparent; color: var(--ex-detail-text); resize: none; min-height: 1.5rem; max-height: 5rem; font-size: 0.88rem; line-height: 1.5; padding: 0.15rem 0; } .explore-detail__form textarea:focus { outline: none; } .explore-detail__input-wrap:focus-within { border-color: rgba(212, 175, 55, 0.45); } .explore-detail__send { width: 2.55rem; height: 2.55rem; border: 0; border-radius: 50%; background: var(--ex-gold); color: #0a1224; display: inline-flex; align-items: center; justify-content: center; flex-shrink: 0; cursor: pointer; transition: transform 0.2s ease, filter 0.2s ease; } .explore-detail__send:hover { transform: scale(1.04); filter: brightness(1.05); } html[dir="rtl"] .explore-detail__send .bi-send-fill { transform: scaleX(-1); } .explore-detail__login-hint { margin: 0; text-align: center; font-size: 0.86rem; color: var(--ex-muted); } .explore-detail__login-hint a { color: var(--ex-gold); font-weight: 700; } .explore-detail__card { display: none; } .explore-line__tool-btn--link { text-decoration: none; } .explore-modal { position: fixed; inset: 0; z-index: 1080; display: flex; align-items: center; justify-content: center; padding: clamp(0.5rem, 2vw, 1.25rem); } .explore-modal[hidden] { display: none !important; } .explore-modal__backdrop { position: absolute; inset: 0; background: rgba(4, 8, 18, 0.9); backdrop-filter: blur(8px); } .explore-line__dialog { position: relative; z-index: 1; width: min(880px, 100%); height: min(88vh, 720px); max-height: min(88vh, 720px); background: #121826; border: 1px solid rgba(255, 255, 255, 0.08); border-radius: 16px; overflow: hidden; box-shadow: 0 24px 64px rgba(0, 0, 0, 0.5); display: flex; flex-direction: column; } .explore-line__layout { display: grid; grid-template-columns: 1fr; flex: 1; min-height: 0; } @media (min-width: 768px) { .explore-line__layout { grid-template-columns: minmax(260px, min(44%, 440px)) minmax(300px, 1fr); } } .explore-line__media { background: #05070d; display: flex; align-items: center; justify-content: center; min-height: 220px; min-width: 0; padding: 0.35rem; border-inline-end: 1px solid rgba(255, 255, 255, 0.08); } .explore-modal__image, .explore-modal__video { width: 100%; height: 100%; max-height: 100%; object-fit: contain; display: block; border-radius: 8px; } .explore-line__panel { display: flex; flex-direction: column; min-height: 0; min-width: 0; background: linear-gradient(180deg, #181f30 0%, #141a28 100%); } .explore-line__toolbar { display: grid; grid-template-columns: 2.5rem 1fr 2.5rem; align-items: center; gap: 0.5rem; padding: 0.55rem 0.65rem; border-bottom: 1px solid rgba(255, 255, 255, 0.08); background: rgba(0, 0, 0, 0.22); flex-shrink: 0; } .explore-line__toolbar-title { text-align: center; font-size: 0.82rem; font-weight: 800; color: rgba(255, 255, 255, 0.88); } .explore-line__tool-btn { width: 2.5rem; height: 2.5rem; border: 0; border-radius: 10px; background: transparent; color: rgba(255, 255, 255, 0.82); display: inline-flex; align-items: center; justify-content: center; cursor: pointer; transition: background 0.2s ease, color 0.2s ease; } .explore-line__tool-btn:hover { background: rgba(255, 255, 255, 0.06); color: var(--ex-gold); } .explore-line__post { padding: 0.85rem 1rem; flex-shrink: 0; } .explore-line__author { display: flex; align-items: center; gap: 0.65rem; margin-bottom: 0.75rem; } .explore-line__avatar { width: 2.5rem; height: 2.5rem; border-radius: 50%; background: rgba(212, 175, 55, 0.14); border: 1px solid rgba(212, 175, 55, 0.35); color: var(--ex-gold); display: inline-flex; align-items: center; justify-content: center; flex-shrink: 0; } .explore-line__name { margin: 0; font-size: 0.9rem; font-weight: 800; color: #fff; } .explore-line__brand, .explore-line__meta { margin: 0.1rem 0 0; font-size: 0.72rem; color: var(--ex-muted); } .explore-line__caption { white-space: pre-wrap; line-height: 1.75; font-size: 0.9rem; color: rgba(255, 255, 255, 0.92); margin-bottom: 0.85rem; padding: 0.65rem 0.75rem; border-radius: 12px; background: rgba(255, 255, 255, 0.04); border: 1px solid rgba(255, 255, 255, 0.06); } .explore-line__caption:empty { display: none; } .explore-line__actions { display: flex; align-items: stretch; gap: 0.5rem; } .explore-line__action { flex: 1; display: flex; flex-direction: row; align-items: center; justify-content: center; gap: 0.35rem; padding: 0.55rem 0.65rem; border: 1px solid rgba(255, 255, 255, 0.08); border-radius: 999px; background: rgba(0, 0, 0, 0.18); color: rgba(255, 255, 255, 0.85); cursor: pointer; transition: background 0.2s ease, color 0.2s ease, border-color 0.2s ease; } .explore-line__action + .explore-line__action { border-inline-start: 0; } .explore-line__action:hover { background: rgba(255, 255, 255, 0.04); } .explore-line__action--static { cursor: default; } .explore-line__action i { font-size: 1.1rem; } .explore-line__action-label { font-size: 0.65rem; font-weight: 700; color: var(--ex-muted); } .explore-line__action-count { font-size: 0.78rem; font-weight: 800; } .explore-like-btn[data-liked="1"] { color: #ff5c7a; } .explore-like-btn[data-liked="1"] .bi-heart::before { content: "\f415"; } .explore-line__divider { height: 1px; background: rgba(255, 255, 255, 0.08); flex-shrink: 0; } .explore-line__comments-wrap { flex: 1; min-height: 0; overflow: auto; padding: 0.75rem 1rem; } .explore-line__comments-title { margin: 0 0 0.65rem; font-size: 0.78rem; font-weight: 800; color: var(--ex-muted); } .explore-line__comments { display: flex; flex-direction: column; gap: 0; } .explore-line-comment { display: flex; gap: 0.65rem; padding: 0.65rem 0; border-bottom: 1px solid rgba(255, 255, 255, 0.06); } .explore-line-comment:last-child { border-bottom: 0; } .explore-line-comment__avatar { width: 1.85rem; height: 1.85rem; border-radius: 50%; background: rgba(255, 255, 255, 0.08); color: rgba(255, 255, 255, 0.55); display: inline-flex; align-items: center; justify-content: center; flex-shrink: 0; font-size: 0.85rem; } .explore-line-comment__author { font-size: 0.78rem; font-weight: 800; margin-bottom: 0.15rem; } .explore-line-comment__body { margin: 0; font-size: 0.84rem; line-height: 1.6; color: rgba(255, 255, 255, 0.86); } .explore-line__comments-empty { margin: 0.5rem 0 0; font-size: 0.82rem; color: var(--ex-muted); text-align: center; padding: 1rem 0.5rem; } .explore-line__comments-empty[hidden] { display: none !important; } .explore-line__composer { padding: 0.65rem 0.75rem 0.85rem; border-top: 1px solid rgba(255, 255, 255, 0.08); background: #121826; flex-shrink: 0; } .explore-line__form { display: flex; align-items: flex-end; gap: 0.5rem; } .explore-line__input-wrap { flex: 1; border: 1px solid rgba(255, 255, 255, 0.1); border-radius: 999px; background: rgba(255, 255, 255, 0.04); padding: 0.35rem 0.85rem; } .explore-line__form textarea { width: 100%; border: 0; background: transparent; color: #fff; resize: none; min-height: 1.5rem; max-height: 5rem; font-size: 0.86rem; line-height: 1.5; padding: 0.15rem 0; } .explore-line__form textarea:focus { outline: none; } .explore-line__input-wrap:focus-within { border-color: rgba(212, 175, 55, 0.45); } .explore-line__send { width: 2.45rem; height: 2.45rem; border: 0; border-radius: 50%; background: var(--ex-gold); color: #0a1224; display: inline-flex; align-items: center; justify-content: center; flex-shrink: 0; cursor: pointer; transition: transform 0.2s ease, filter 0.2s ease; } .explore-line__send:hover { transform: scale(1.04); filter: brightness(1.05); } html[dir="rtl"] .explore-line__send .bi-send-fill { transform: scaleX(-1); } .explore-line__login-hint { margin: 0; text-align: center; font-size: 0.84rem; color: var(--ex-muted); } .explore-line__login-hint a { color: var(--ex-gold); font-weight: 700; } .explore-back-link { color: inherit; text-decoration: none; display: inline-flex; align-items: center; gap: 0.35rem; } @media (max-width: 991.98px) { .explore-detail__topbar-meta { display: none; } } @media (max-width: 767.98px) { .explore-line__dialog { max-height: 100vh; height: 100%; border-radius: 0; width: 100%; } .explore-modal { padding: 0; } .explore-line__layout { max-height: 100vh; grid-template-rows: minmax(200px, 42vh) minmax(0, 1fr); } .explore-line__media { order: 1 !important; border-inline: 0 !important; border-bottom: 1px solid rgba(255, 255, 255, 0.08); } .explore-line__panel { order: 2 !important; } } .explore-hero--compact { padding: 1rem 0; } .explore-hero--compact .explore-back-link { color: rgba(255, 255, 255, 0.88); font-weight: 700; font-size: 0.88rem; text-decoration: none; } .explore-hero--compact .explore-back-link:hover { color: var(--ex-gold); } html[data-color-scheme="light"] body.elco-theme-premium.page-explore-detail #main-content { background: var(--elco-premium-bg, #eef0f3); } html[data-color-scheme="light"] body.elco-theme-premium .explore-detail { --ex-detail-page-bg: var(--elco-premium-bg, #eef0f3); --ex-detail-topbar-bg: rgba(255, 255, 255, 0.96); --ex-detail-topbar-border: rgba(72, 96, 140, 0.16); --ex-detail-surface: linear-gradient(180deg, #ffffff 0%, #f8f9fb 100%); --ex-detail-media-bg: linear-gradient(180deg, #f4f6f8 0%, #eef0f3 100%); --ex-detail-text: var(--elco-premium-text, #0c1833); --ex-muted: var(--elco-premium-muted, #5c6370); --ex-detail-border: rgba(72, 96, 140, 0.16); --ex-detail-border-soft: rgba(72, 96, 140, 0.1); --ex-detail-control-bg: #ffffff; --ex-detail-control-border: rgba(72, 96, 140, 0.18); --ex-detail-control-text: var(--elco-premium-text, #0c1833); --ex-detail-action-bg: rgba(255, 255, 255, 0.92); --ex-detail-composer-bg: rgba(255, 255, 255, 0.98); } html[data-color-scheme="light"] body.elco-theme-premium .explore-detail__avatar { background: rgba(212, 175, 55, 0.12); border-color: rgba(201, 162, 39, 0.35); } html[data-color-scheme="light"] body.elco-theme-premium .explore-detail__breadcrumb-list { color: var(--elco-premium-muted, #5c6370); } .explore-detail__featured-badge { display: inline-block; margin-bottom: 0.45rem; padding: 0.18rem 0.55rem; border-radius: 999px; background: rgba(212, 175, 55, 0.16); border: 1px solid rgba(212, 175, 55, 0.35); color: var(--ex-gold, #c9a227); font-size: 0.68rem; font-weight: 800; } .explore-detail__excerpt { margin: 0.55rem 0 0; color: var(--ex-muted); font-size: 0.86rem; line-height: 1.65; } .explore-detail__tags { display: flex; flex-wrap: wrap; gap: 0.4rem; margin-bottom: 0.85rem; } .explore-detail__tag { display: inline-flex; padding: 0.2rem 0.55rem; border-radius: 999px; background: rgba(255, 255, 255, 0.06); border: 1px solid var(--ex-detail-border-soft); font-size: 0.72rem; color: var(--ex-muted); text-decoration: none; transition: border-color 0.2s ease, color 0.2s ease, background 0.2s ease; } .explore-detail__tag:hover, .explore-detail__tag:focus { border-color: rgba(212, 175, 55, 0.45); color: var(--ex-gold, #d4af37); background: rgba(212, 175, 55, 0.08); } .explore-detail__related--end { margin-top: 1.25rem; padding-top: 1.25rem; border-top: 1px solid var(--ex-detail-border-soft); } .explore-hero__clear-tag { color: inherit; text-decoration: underline; text-underline-offset: 0.15em; } .explore-hero__clear-tag:hover { color: var(--ex-gold, #d4af37); } html[data-color-scheme="light"] body.elco-theme-premium .explore-detail__tag { background: rgba(15, 26, 50, 0.04); } html[data-color-scheme="light"] body.elco-theme-premium .explore-detail__tag:hover, html[data-color-scheme="light"] body.elco-theme-premium .explore-detail__tag:focus { background: rgba(201, 162, 39, 0.1); color: #8a6d18; } .explore-detail__related { margin-top: 1rem; padding-top: 1rem; border-top: 1px solid var(--ex-detail-border-soft); } .explore-detail__related-title { margin: 0 0 0.75rem; font-size: 0.78rem; font-weight: 800; letter-spacing: 0.04em; text-transform: uppercase; color: var(--ex-muted); } .explore-detail__related-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0.65rem; } .explore-detail__related-item { display: flex; flex-direction: column; gap: 0.35rem; padding: 0.55rem; border-radius: 12px; border: 1px solid var(--ex-detail-border-soft); background: rgba(255, 255, 255, 0.03); text-decoration: none; color: inherit; transition: border-color 0.2s ease, transform 0.2s ease; } .explore-detail__related-item:hover { border-color: rgba(212, 175, 55, 0.35); transform: translateY(-1px); } .explore-detail__related-item img { width: 100%; aspect-ratio: 1; object-fit: contain; border-radius: 8px; background: #fff; } .explore-detail__related-item span { font-size: 0.76rem; line-height: 1.45; font-weight: 600; } .explore-detail__cta-wrap { margin-top: 1rem; } .explore-detail__cta-wrap--panel { margin-top: 0; margin-bottom: 0.85rem; } .explore-detail__media-cta { padding: 1rem clamp(1rem, 3vw, 2rem) 0; } .explore-detail__cta--media { width: min(100%, 320px); } .explore-detail__cta { width: 100%; border-radius: 999px; font-weight: 700; } html[data-color-scheme="light"] body.elco-theme-premium.page-explore:not(.page-explore-detail) .explore-page { --ex-surface: rgba(255, 255, 255, 0.92); --ex-border: rgba(72, 96, 140, 0.18); --ex-muted: var(--elco-premium-muted, #5c6370); --ex-navy: var(--elco-premium-text, #0c1833); } html[data-color-scheme="light"] body.elco-theme-premium.page-explore:not(.page-explore-detail) .explore-hero { background: radial-gradient(ellipse 80% 120% at 100% 0%, rgba(201, 162, 39, 0.12), transparent 55%), radial-gradient(ellipse 60% 45% at 0% 100%, rgba(72, 96, 140, 0.06), transparent 50%), linear-gradient(180deg, #e4e8ee 0%, #eef0f3 100%); border-bottom-color: rgba(72, 96, 140, 0.14); } html[data-color-scheme="light"] body.elco-theme-premium.page-explore:not(.page-explore-detail) .explore-hero__glow { background: radial-gradient(circle, rgba(201, 162, 39, 0.08), transparent 65%); } html[data-color-scheme="light"] body.elco-theme-premium.page-explore:not(.page-explore-detail) .explore-hero__crumb { color: var(--elco-premium-muted, #5c6370); } html[data-color-scheme="light"] body.elco-theme-premium.page-explore:not(.page-explore-detail) .explore-hero__crumb a { color: var(--elco-premium-text, #0c1833); } html[data-color-scheme="light"] body.elco-theme-premium.page-explore:not(.page-explore-detail) .explore-hero__crumb a:hover { color: #8a6d18; } html[data-color-scheme="light"] body.elco-theme-premium.page-explore:not(.page-explore-detail) .explore-hero__badge { background: rgba(201, 162, 39, 0.1); border-color: rgba(201, 162, 39, 0.32); color: #8a6d18; } html[data-color-scheme="light"] body.elco-theme-premium.page-explore:not(.page-explore-detail) .explore-hero__title { color: var(--elco-premium-text, #0c1833); } html[data-color-scheme="light"] body.elco-theme-premium.page-explore:not(.page-explore-detail) .explore-hero__subtitle { color: var(--elco-premium-muted, #5c6370); } html[data-color-scheme="light"] body.elco-theme-premium.page-explore:not(.page-explore-detail) .explore-hero__stat { background: rgba(255, 255, 255, 0.88); border-color: rgba(72, 96, 140, 0.16); color: var(--elco-premium-text, #0c1833); } html[data-color-scheme="light"] body.elco-theme-premium.page-explore:not(.page-explore-detail) .explore-body { color: var(--elco-premium-text, #0c1833); } html[data-color-scheme="light"] body.elco-theme-premium.page-explore:not(.page-explore-detail) .explore-empty { background: rgba(255, 255, 255, 0.82); border-color: rgba(72, 96, 140, 0.18); box-shadow: var(--elco-light-shadow, 0 6px 20px rgba(12, 18, 36, 0.08)); } html[data-color-scheme="light"] body.elco-theme-premium.page-explore:not(.page-explore-detail) .explore-empty__title { color: var(--elco-premium-text, #0c1833); } html[data-color-scheme="light"] body.elco-theme-premium.page-explore:not(.page-explore-detail) .explore-empty__text { color: var(--elco-premium-muted, #5c6370); } html[data-color-scheme="light"] body.elco-theme-premium.page-explore:not(.page-explore-detail) .explore-load-more { background: #ffffff; color: var(--elco-premium-text, #0c1833); border-color: rgba(72, 96, 140, 0.2); box-shadow: 0 4px 14px rgba(12, 18, 36, 0.06); } html[data-color-scheme="light"] body.elco-theme-premium.page-explore:not(.page-explore-detail) .explore-load-more:hover { background: rgba(201, 162, 39, 0.08); border-color: rgba(201, 162, 39, 0.35); color: var(--elco-premium-text, #0c1833); } html[data-color-scheme="light"] body.elco-theme-premium.page-explore:not(.page-explore-detail) .explore-card__trigger, html[data-color-scheme="light"] body.elco-theme-premium.page-explore:not(.page-explore-detail) .explore-card__link { box-shadow: 0 8px 24px rgba(12, 18, 36, 0.1); } html[data-color-scheme="light"] body.elco-theme-premium.page-explore:not(.page-explore-detail) .explore-card__trigger:hover, html[data-color-scheme="light"] body.elco-theme-premium.page-explore:not(.page-explore-detail) .explore-card__link:hover { box-shadow: 0 16px 36px rgba(12, 18, 36, 0.14), 0 0 0 1px rgba(201, 162, 39, 0.28); } html[data-color-scheme="light"] body.elco-theme-premium.page-explore:not(.page-explore-detail) .explore-card__media { background: #e8eaee; }