.explore { box-sizing: border-box; width: 100%; max-width: 1420px; margin: 0 auto; padding: 24px 16px 120px; color: var(--color-text, #fdfdfd); } .ex-hero { padding: 32px 8px 20px; text-align: center; position: relative; } .ex-hero__title { font-size: clamp(32px, 5vw, 56px); margin: 0 0 8px; letter-spacing: -0.02em; background: linear-gradient(135deg, #fff 0%, #ff5e62 60%, #ff9966 100%); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; color: transparent; font-weight: 800; } .ex-hero__sub { color: var(--color-text-muted, #c4c4c4); margin: 0 0 20px; font-size: clamp(14px, 1.2vw, 16px); } .ex-hero__stats { display: inline-flex; flex-wrap: wrap; gap: 10px; justify-content: center; } .ex-stat { display: inline-flex; align-items: center; gap: 8px; padding: 10px 18px; border-radius: 999px; background: linear-gradient(145deg, #2a2a2a, #1c1c1c); border: 1px solid #3a3a3a; font-size: 14px; color: var(--color-text-muted, #c4c4c4); box-shadow: 0 2px 6px rgba(0, 0, 0, .35); } .ex-stat strong { color: #fff; font-weight: 700; } .ex-stat i { width: 16px; height: 16px; color: #ff5e62; } .ex-subnav { position: static; display: flex; flex-wrap: wrap; gap: 12px; align-items: center; justify-content: space-between; padding: 10px 8px; margin: 12px 0 20px; background: #131313; border-top: 1px solid #2a2a2a; border-bottom: 1px solid #2a2a2a; } .ex-subnav__tabs { display: flex; gap: 4px; flex-wrap: wrap; } .ex-tab { display: inline-flex; align-items: center; gap: 6px; padding: 10px 16px; border-radius: 10px; color: var(--color-text-muted, #c4c4c4) !important; text-decoration: none !important; font-weight: 600; font-size: 14px; transition: background 150ms ease, color 150ms ease, transform 150ms ease; border: 1px solid transparent; } .ex-tab i { width: 16px; height: 16px; } .ex-tab:hover { color: #fff !important; background: #1f1f1f; } .ex-tab.is-active { color: #fff !important; background: linear-gradient(135deg, #ff5e62, #e04448); border-color: #ff5e62; box-shadow: 0 4px 14px rgba(255, 94, 98, .35); } .ex-tab:focus-visible { outline: 2px solid #fff; outline-offset: 2px; } .ex-subnav__tools { display: flex; gap: 8px; flex: 1 1 280px; min-width: 0; justify-content: flex-end; } .ex-search { flex: 1 1 260px; max-width: 420px; display: flex; align-items: center; gap: 8px; padding: 0 12px; background: #1c1c1c; border: 1px solid #333; border-radius: 10px; transition: border-color 150ms ease, box-shadow 150ms ease; } .ex-search:focus-within { border-color: #ff5e62; box-shadow: 0 0 0 3px rgba(255, 94, 98, .18); } .ex-search i { width: 18px; height: 18px; color: #888; } .ex-search input { flex: 1; background: transparent; border: 0; color: #fff; padding: 11px 0; font-size: 14px; outline: none; min-width: 0; } .ex-sort-menu { position: relative; z-index: 5; flex: 0 0 auto; } .ex-sort-menu__toggle { min-height: 42px; display: inline-flex; align-items: center; gap: 9px; padding: 9px 12px; border: 1px solid #3a3a3a; border-radius: 10px; background: linear-gradient(145deg, #252525, #191919); color: #ddd; font: inherit; font-size: 13px; cursor: pointer; box-shadow: 0 2px 8px rgba(0, 0, 0, .25); transition: border-color 150ms ease, background 150ms ease, box-shadow 150ms ease; } .ex-sort-menu__toggle:hover, .ex-sort-menu.is-open .ex-sort-menu__toggle { border-color: #ff5e62; background: #262020; box-shadow: 0 0 0 3px rgba(255, 94, 98, .12); } .ex-sort-menu__toggle:focus-visible { outline: 2px solid #fff; outline-offset: 2px; } .ex-sort-menu__toggle > i { width: 16px; height: 16px; color: #ff7b7f; } .ex-sort-menu__toggle strong { color: #fff; font-weight: 700; } .ex-sort-menu__chevron { margin-left: 2px; transition: transform 150ms ease; } .ex-sort-menu.is-open .ex-sort-menu__chevron { transform: rotate(180deg); } .ex-sort-menu__options { position: absolute; top: calc(100% + 8px); right: 0; z-index: 60; width: 210px; padding: 6px; border: 1px solid #3b3b3b; border-radius: 12px; background: #181818; box-shadow: 0 18px 44px rgba(0, 0, 0, .65); } .ex-sort-menu__options[hidden] { display: none; } .ex-sort-menu__options button { width: 100%; display: flex; align-items: center; gap: 10px; padding: 10px 11px; border: 0; border-radius: 8px; background: transparent; color: #ddd; font: inherit; font-size: 14px; text-align: left; cursor: pointer; } .ex-sort-menu__options button i { width: 17px; height: 17px; color: #999; } .ex-sort-menu__options button:hover, .ex-sort-menu__options button[aria-selected="true"] { background: rgba(255, 94, 98, .14); color: #fff; } .ex-sort-menu__options button[aria-selected="true"] i { color: #ff7478; } .ex-section { margin: 20px 0 12px; min-height: 240px; } .ex-section[hidden] { display: none !important; } .ex-section:focus { outline: none; } .ex-section-head { display: flex; align-items: center; justify-content: space-between; margin: 0 8px 14px; } .ex-section-title { display: inline-flex; align-items: center; gap: 10px; font-size: clamp(20px, 2.2vw, 28px); margin: 0; font-weight: 700; color: #fff; } .ex-section-title i { width: 22px; height: 22px; color: #ff5e62; } .ex-count-badge { display: inline-flex; align-items: center; min-width: 32px; padding: 4px 10px; border-radius: 999px; background: rgba(255, 94, 98, .15); color: #ff8b8e; font-size: 13px; font-weight: 700; margin-left: 6px; } .ex-featured-wrap { margin: 8px 0 36px; } .ex-section-head--trending > div { min-width: 0; } .ex-trending-note { margin: 5px 0 0 32px; color: var(--color-text-muted, #c4c4c4); font-size: 12px; } .ex-featured { display: grid; grid-auto-flow: column; grid-auto-columns: minmax(260px, 1fr); gap: 12px; overflow-x: auto; padding: 4px 8px 16px; scroll-snap-type: x mandatory; scrollbar-width: thin; cursor: grab; overscroll-behavior-inline: contain; } .ex-featured.is-drag-scrolling { cursor: grabbing; scroll-snap-type: none; user-select: none; } .ex-featured.is-drag-scrolling .ex-featured__card { pointer-events: none; } .ex-featured::-webkit-scrollbar { height: 8px; } .ex-featured::-webkit-scrollbar-thumb { background: #333; border-radius: 4px; } .ex-featured__card { scroll-snap-align: start; background: linear-gradient(145deg, #303030 0%, #252525 100%); border: 1px solid #3a3a3a; border-radius: 14px; overflow: hidden; user-select: none; text-decoration: none !important; color: #fff !important; display: flex; flex-direction: column; transition: transform 280ms cubic-bezier(.5, 0, .1, 1), border-color 200ms, box-shadow 200ms; position: relative; box-shadow: 0 2px 6px rgba(0, 0, 0, .4); } .ex-featured__card:hover { transform: translateY(-4px); border-color: #ff5e62; box-shadow: 0 12px 28px rgba(0, 0, 0, .55), 0 0 0 1px rgba(255, 94, 98, .3); } .ex-featured__img { aspect-ratio: 16/9; overflow: hidden; position: relative; background: #111; } .ex-featured__img img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform 500ms ease; } .ex-featured__card:hover .ex-featured__img img { transform: scale(1.06); } .ex-featured__badge { position: absolute; top: 8px; right: 8px; width: 32px; height: 32px; display: inline-flex; align-items: center; justify-content: center; border-radius: 999px; background: rgba(0, 0, 0, .7); color: #fff; } .ex-featured__badge i { width: 18px; height: 18px; } .ex-featured__meta { padding: 10px 12px 14px; display: flex; flex-direction: column; gap: 4px; } .ex-featured__avatar { position: relative; width: 48px; height: 48px; margin: -34px 0 3px 1px; border: 3px solid #292929; border-radius: 50%; background: #151515; object-fit: cover; box-shadow: 0 4px 12px rgba(0, 0, 0, .55); } .ex-featured__name { font-weight: 700; color: #fff; font-size: 15px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .ex-featured__sub { font-size: 12px; color: var(--color-text-muted, #c4c4c4); } .ex-alpha { display: flex; flex-wrap: wrap; gap: 4px; padding: 8px; margin: 0 8px 16px; background: #141414; border: 1px solid #262626; border-radius: 12px; position: static; } .ex-alpha__letter { min-width: 28px; padding: 6px 10px; text-align: center; border-radius: 6px; border: 0; background: transparent; font-weight: 700; font-size: 13px; font-family: inherit; color: #ddd !important; text-decoration: none !important; cursor: pointer; transition: background 120ms ease, color 120ms ease; } .ex-alpha__letter:hover { background: #ff5e62; color: #fff !important; } .ex-alpha__letter.is-active { background: #ff5e62; color: #fff !important; box-shadow: 0 3px 10px rgba(255, 94, 98, .3); } .ex-alpha__letter:focus-visible { outline: 2px solid #fff; outline-offset: 2px; } .ex-alpha__letter.is-empty { color: #555 !important; pointer-events: none; opacity: .5; } .ex-studio-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: 16px; padding: 0 8px; } @media (max-width: 768px) { .ex-studio-grid { grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 12px; } } .ex-studio { display: flex; flex-direction: column; background: linear-gradient(145deg, #303030 0%, #252525 100%); border: 1px solid #3a3a3a; border-radius: 14px; overflow: hidden; text-decoration: none !important; color: #fff !important; transition: transform 280ms cubic-bezier(.5, 0, .1, 1), border-color 200ms, box-shadow 200ms; position: relative; box-shadow: 0 2px 6px rgba(0, 0, 0, .4); scroll-margin-top: 160px; } .ex-studio:hover { transform: translateY(-6px) scale(1.015); border-color: #ff5e62; box-shadow: 0 18px 38px rgba(0, 0, 0, .6), 0 0 0 1px rgba(255, 94, 98, .35); } .ex-studio__mosaic { display: grid; grid-template-columns: 1fr 1fr; grid-template-rows: 1fr 1fr; gap: 2px; aspect-ratio: 16/9; background: #111; position: relative; overflow: hidden; } .ex-studio__tile { overflow: hidden; background: #0d0d0d; } .ex-studio__tile img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform 500ms ease, opacity 200ms ease; } .ex-studio:hover .ex-studio__tile img { transform: scale(1.05); } .ex-studio__meta { padding: 12px 14px 14px; display: flex; flex-direction: column; gap: 4px; } .ex-studio__avatar { position: relative; width: 62px; height: 62px; margin: -45px 0 5px 1px; border: 4px solid #292929; border-radius: 50%; background: #151515; object-fit: cover; box-shadow: 0 5px 16px rgba(0, 0, 0, .6); } .ex-studio__name { font-size: 16px; font-weight: 700; color: #fff; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .ex-studio__sub { display: inline-flex; align-items: center; gap: 6px; color: var(--color-text-muted, #c4c4c4); font-size: 13px; } .ex-studio__sub i { width: 14px; height: 14px; color: #ff5e62; } .ex-studio__sub .ex-dot { opacity: .5; padding: 0 2px; } .ex-cat-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 14px; padding: 0 8px; } .ex-cat { background: linear-gradient(145deg, #2a2a2a 0%, #202020 100%); border: 1px solid #333; border-radius: 12px; overflow: hidden; text-decoration: none !important; color: #fff !important; display: flex; flex-direction: column; transition: transform 240ms ease, border-color 200ms, box-shadow 200ms; box-shadow: 0 2px 6px rgba(0, 0, 0, .35); } .ex-cat:hover { transform: translateY(-4px); border-color: #ff5e62; box-shadow: 0 12px 26px rgba(0, 0, 0, .55); } .ex-cat__img { aspect-ratio: 16/9; overflow: hidden; background: #111; position: relative; } .ex-cat__img img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform 500ms ease; } .ex-cat:hover .ex-cat__img img { transform: scale(1.06); } .ex-cat__meta { padding: 10px 12px 12px; display: flex; flex-direction: column; gap: 2px; } .ex-cat__name { font-weight: 700; font-size: 15px; } .ex-cat__count { font-size: 12px; color: var(--color-text-muted, #c4c4c4); } .ex-tag-cloud { display: flex; flex-wrap: wrap; gap: 8px; padding: 0 8px; } .ex-tag-pill { display: inline-flex; align-items: stretch; overflow: hidden; border-radius: 999px; background: linear-gradient(145deg, #2a2a2a, #1e1e1e); border: 1px solid #333; text-decoration: none !important; color: #fff !important; font-size: 14px; font-weight: 500; transition: transform 180ms ease, border-color 180ms ease, box-shadow 180ms ease; box-shadow: 0 2px 4px rgba(0, 0, 0, .3); } .ex-tag-pill:hover { transform: translateY(-2px); border-color: #ff5e62; box-shadow: 0 6px 14px rgba(0, 0, 0, .5), 0 0 0 1px rgba(255, 94, 98, .35); } .ex-tag-pill__name { padding: 8px 14px; } .ex-tag-pill__count { padding: 8px 12px; background: rgba(255, 94, 98, .18); color: #ff8b8e; font-weight: 700; font-size: 12px; display: inline-flex; align-items: center; } .ex-loadmore-wrap { padding: 18px 8px 0; text-align: center; } .ex-loadmore { display: inline-flex; align-items: center; gap: 8px; padding: 12px 22px; border-radius: 10px; background: linear-gradient(135deg, #ff5e62, #e04448); color: #fff; border: 0; font-weight: 700; font-size: 14px; cursor: pointer; transition: transform 180ms ease, box-shadow 180ms ease, filter 180ms ease; box-shadow: 0 6px 18px rgba(255, 94, 98, .35); } .ex-loadmore i { width: 16px; height: 16px; } .ex-loadmore:hover { transform: translateY(-2px); filter: brightness(1.05); } .ex-loadmore:disabled { opacity: .55; cursor: not-allowed; } .ex-empty { display: none; text-align: center; color: var(--color-text-dim, #999); padding: 28px 12px; margin: 12px 8px 0; border: 1px dashed #333; border-radius: 12px; } .ex-section.is-empty .ex-empty { display: block; } .is-hidden { display: none !important; } @media (max-width: 640px) { .explore { padding: 16px 10px 90px; } .ex-subnav { position: static; } .ex-subnav__tabs { width: 100%; flex-wrap: nowrap; } .ex-tab { flex: 1 1 0; justify-content: center; padding: 10px 8px; min-width: 0; } .ex-subnav__tools { flex-basis: 100%; } .ex-alpha { position: static; gap: 2px; padding: 6px; margin: 0 4px 14px; } .ex-alpha__letter { min-width: 24px; padding: 6px 7px; font-size: 12px; } .ex-section-head { margin: 0 4px 12px; } .ex-studio__name { font-size: 15px; } .ex-hero { padding: 20px 4px 10px; } .ex-sort-menu { flex: 0 0 auto; } .ex-sort-menu__toggle > span { display: none; } .ex-sort-menu__toggle { width: 42px; justify-content: center; padding: 9px; } .ex-sort-menu__chevron { display: none; } .ex-featured { gap: 10px; padding-inline: 6px; } .ex-studio-grid, .ex-tag-cloud { padding: 0 4px; } .ex-cat-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; padding: 0 4px; } } @media (prefers-reduced-motion: reduce) { .ex-studio, .ex-featured__card, .ex-cat, .ex-tag-pill, .ex-loadmore, .ex-studio__tile img, .ex-featured__img img, .ex-cat__img img { transition: none !important; } .ex-studio:hover, .ex-featured__card:hover, .ex-cat:hover, .ex-tag-pill:hover { transform: none; } } .ex-studio__desc { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; margin-top: 5px; color: #9a9a9a; font-size: 12.5px; line-height: 1.4; text-align: left; }