/* ========================================================= style.css — StreamHub Dark theme by default; [data-theme="light"] on overrides via the CSS custom properties below (see account.js theme toggle). ========================================================= */ :root { --bg: #0e0e10; --bg-elevated: #17181b; --bg-elevated-2: #1f2023; --border: #2a2b2f; --text: #ffffff; --text-muted: #9a9a9e; --accent: #53fc18; --accent-hover: #6dff3a; --accent-text: #0e0e10; --accent-soft: rgba(83, 252, 24, 0.1); --danger: #ff5c5c; --success: #53fc18; --radius: 10px; --header-h: 64px; --max-width: 1400px; --shadow: 0 4px 20px rgba(0,0,0,0.5); } html[data-theme="light"] { --bg: #f5f6f5; --bg-elevated: #ffffff; --bg-elevated-2: #eef0ee; --border: #dfe2df; --text: #101210; --text-muted: #62675f; --accent: #34c700; --accent-hover: #2eab00; --accent-text: #ffffff; --accent-soft: rgba(52, 199, 0, 0.08); --shadow: 0 4px 20px rgba(0,0,0,0.08); } * { box-sizing: border-box; } html, body { margin: 0; padding: 0; } html { -webkit-text-size-adjust: 100%; } /* stop iOS auto-zooming text on rotate */ body { background: var(--bg); color: var(--text); font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; line-height: 1.5; overflow-x: hidden; /* guards against any stray wide element forcing horizontal scroll on small screens */ } a { color: inherit; text-decoration: none; } img { max-width: 100%; display: block; } button, input, select { font-family: inherit; color: inherit; } .container { max-width: var(--max-width); margin: 0 auto; padding: 0 20px; } a:focus-visible, button:focus-visible, input:focus-visible, select:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; border-radius: 4px; } button { transition: background 0.15s ease, border-color 0.15s ease, color 0.15s ease; } /* ---------------- Header ---------------- */ .site-header { position: sticky; top: 0; z-index: 100; height: var(--header-h); background: var(--bg-elevated); border-bottom: 1px solid var(--border); } .header-inner { max-width: var(--max-width); margin: 0 auto; height: 100%; padding: 0 20px; display: flex; align-items: center; gap: 20px; } .brand { display: flex; align-items: center; gap: 10px; flex-shrink: 0; } .brand-logo { width: 34px; height: 34px; border-radius: 8px; background: var(--accent); color: var(--accent-text); font-weight: 800; display: flex; align-items: center; justify-content: center; } .brand-name { font-weight: 700; font-size: 18px; } .brand-name span { color: var(--accent); } .main-nav { display: flex; gap: 4px; flex-shrink: 0; } .main-nav a { padding: 8px 12px; border-radius: 8px; color: var(--text-muted); font-size: 14px; font-weight: 600; } .main-nav a:hover, .main-nav a.active { color: var(--text); background: var(--bg-elevated-2); } .search-box { flex: 1; max-width: 480px; position: relative; margin-left: auto; } .search-box input { width: 100%; padding: 10px 40px 10px 14px; border-radius: 999px; border: 1px solid var(--border); background: var(--bg-elevated-2); color: var(--text); font-size: 14px; outline: none; } .search-box input:focus { border-color: var(--accent); } .search-box .icon { position: absolute; right: 14px; top: 50%; transform: translateY(-50%); color: var(--text-muted); pointer-events: none; } .auth-area { flex-shrink: 0; } .auth-signin-btn, .load-more-btn { background: var(--accent); color: var(--accent-text); border: none; padding: 9px 18px; border-radius: 8px; font-weight: 700; font-size: 14px; cursor: pointer; } .auth-signin-btn:hover, .load-more-btn:hover { background: var(--accent-hover); } .auth-signin-btn:disabled, .load-more-btn:disabled { opacity: 0.6; cursor: default; } .hamburger { display: none; background: none; border: none; color: var(--text); cursor: pointer; width: 36px; height: 36px; } .hamburger svg { width: 22px; height: 22px; } /* Account avatar / dropdown */ .auth-account-wrap { position: relative; } .auth-account-btn { display: flex; align-items: center; gap: 8px; background: var(--bg-elevated-2); border: 1px solid var(--border); border-radius: 999px; padding: 5px 14px 5px 5px; cursor: pointer; } .auth-avatar { width: 28px; height: 28px; border-radius: 50%; background: var(--accent); color: var(--accent-text); display: flex; align-items: center; justify-content: center; font-weight: 700; font-size: 13px; overflow: hidden; } .auth-avatar img { width: 100%; height: 100%; object-fit: cover; } .auth-account-name { font-size: 13px; font-weight: 600; max-width: 120px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .auth-guest-badge { font-size: 10px; background: var(--bg-elevated); padding: 2px 6px; border-radius: 6px; color: var(--text-muted); } .auth-dropdown { position: absolute; right: 0; top: calc(100% + 8px); width: 240px; background: var(--bg-elevated); border: 1px solid var(--border); border-radius: var(--radius); box-shadow: var(--shadow); display: none; overflow: hidden; z-index: 200; } .auth-dropdown.show { display: block; } .auth-dropdown-header { padding: 14px 16px; border-bottom: 1px solid var(--border); } .auth-dropdown-name { font-weight: 700; font-size: 14px; } .auth-dropdown-email { font-size: 12px; color: var(--text-muted); margin-top: 2px; } .auth-dropdown-item { width: 100%; text-align: left; background: none; border: none; padding: 12px 16px; display: flex; align-items: center; gap: 10px; font-size: 14px; cursor: pointer; color: var(--text); } .auth-dropdown-item:hover { background: var(--bg-elevated-2); } .auth-dropdown-item.danger { color: var(--danger); } /* ---------------- Layout ---------------- */ /* Sidebar/ad-column widths step down at common laptop widths (1300px, 1100px) before the sidebar becomes a drawer at 840px, so the layout degrades smoothly across desktop -> laptop -> tablet -> phone instead of jumping straight from 3 columns to a mobile drawer. */ .layout { display: grid; grid-template-columns: 240px 1fr 180px; gap: 20px; padding-top: 24px; align-items: start; } .watch-layout { display: grid; grid-template-columns: 1fr 180px; gap: 20px; padding-top: 24px; align-items: start; } /* ---------------- Sidebar (grouped chip filters) ---------------- */ .sidebar { background: var(--bg-elevated); border: 1px solid var(--border); border-radius: 14px; padding: 18px 16px; display: flex; flex-direction: column; gap: 4px; } .sidebar-close { display: none; } .sidebar-section { padding: 14px 0; border-bottom: 1px solid var(--border); } .sidebar-section:first-child { padding-top: 2px; } .sidebar-section:last-of-type { border-bottom: none; } .sidebar-title { font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.08em; color: var(--text-muted); margin: 0 0 10px; } .chip-group { display: flex; flex-wrap: wrap; gap: 6px; } .filter-btn { display: inline-flex; align-items: center; gap: 6px; background: var(--bg-elevated-2); border: 1px solid var(--border); color: var(--text-muted); padding: 7px 12px; border-radius: 999px; font-size: 13px; font-weight: 600; cursor: pointer; transition: background 0.15s ease, color 0.15s ease, border-color 0.15s ease, transform 0.1s ease; } .filter-btn:hover { color: var(--text); border-color: var(--text-muted); } .filter-btn:active { transform: scale(0.97); } .filter-btn.active { background: var(--accent); color: var(--accent-text); border-color: var(--accent); font-weight: 700; } .select-field { width: 100%; padding: 9px 10px; border-radius: 8px; border: 1px solid var(--border); background: var(--bg-elevated-2); color: var(--text); font-size: 14px; cursor: pointer; } .select-field:focus { border-color: var(--accent); outline: none; } .tag-cloud { display: flex; flex-wrap: wrap; gap: 6px; } .tag-cloud-rest { display: contents; } .tag-cloud-rest[hidden] { display: none; } .tag-pill { background: var(--bg-elevated-2); border: 1px solid var(--border); color: var(--text-muted); padding: 5px 10px; border-radius: 999px; font-size: 12px; cursor: pointer; } .tag-pill:hover { color: var(--accent); border-color: var(--accent); } .tag-pill.active { color: var(--accent-text); background: var(--accent); border-color: var(--accent); } .tag-cloud-toggle { font-weight: 700; background: none; border-style: dashed; } .sidebar-native-ad { padding-top: 14px; } .sidebar-native-ad .ad-label { font-size: 10px; } .sidebar-overlay { display: none; position: fixed; inset: 0; background: rgba(0,0,0,0.5); z-index: 150; } .sidebar-overlay.show { display: block; } /* ---------------- Toolbar / grid ---------------- */ .toolbar { display: flex; align-items: baseline; justify-content: space-between; margin-bottom: 16px; } .toolbar h1 { font-size: 20px; margin: 0; } /* auto-fill instead of a fixed repeat(3,...) so the grid naturally adds/removes columns across laptop widths (13", 14", 15"+) without needing a pile of extra breakpoints — each card just won't go narrower than 220px before wrapping to fewer columns. */ .video-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 18px; } /* Card is now a plain container (not a link) — see config.js videoCardHtml(). It holds two separate links: .video-card-media (thumbnail + title -> watch page) and .video-card-author (author name -> profile page). Nesting a link inside a link isn't valid HTML, so they have to be siblings rather than one wrapping the other. */ .video-card { display: block; background: var(--bg-elevated); border: 1px solid var(--border); border-radius: var(--radius); overflow: hidden; transition: transform 0.15s ease, border-color 0.15s ease, box-shadow 0.15s ease; animation: card-in 0.25s ease both; } @keyframes card-in { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: translateY(0); } } .video-card:hover { transform: translateY(-2px); border-color: var(--accent); box-shadow: var(--shadow); } .video-card-media { display: block; color: inherit; } .video-card-media:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; } .video-thumb-wrap { position: relative; aspect-ratio: 16/9; background: var(--bg-elevated-2); } .video-thumb { width: 100%; height: 100%; object-fit: cover; } .video-preview { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; display: none; background: #000; } .video-duration { position: absolute; right: 6px; bottom: 6px; background: rgba(0,0,0,0.8); color: #fff; font-size: 11px; padding: 2px 6px; border-radius: 4px; } .video-card-title { padding: 10px 12px 4px; font-size: 14px; font-weight: 600; line-height: 1.3; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; } .video-card-author { display: block; padding: 0 12px 12px; font-size: 12px; color: var(--text-muted); } .video-card-author:hover { color: var(--accent); text-decoration: underline; } .video-card-author:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; border-radius: 4px; } .loader-wrap { text-align: center; padding: 24px 0; color: var(--text-muted); font-size: 14px; } .spinner { display: inline-block; width: 16px; height: 16px; border: 2px solid var(--border); border-top-color: var(--accent); border-radius: 50%; animation: spin 0.7s linear infinite; margin-right: 8px; vertical-align: -3px; } @keyframes spin { to { transform: rotate(360deg); } } .related-heading { font-size: 16px; margin: 28px 0 14px; } .more-videos-section { margin-top: 32px; } /* ---------------- Ads ---------------- */ .ad-column { display: flex; flex-direction: column; gap: 18px; } .ad-unit { background: var(--bg-elevated); border: 1px solid var(--border); border-radius: var(--radius); padding: 10px; text-align: center; } .ad-label { font-size: 10px; text-transform: uppercase; letter-spacing: 0.06em; color: var(--text-muted); margin-bottom: 8px; opacity: 0.8; } .ad-slot { min-height: 60px; display: flex; align-items: center; justify-content: center; color: var(--text-muted); font-size: 12px; } .inline-ad { max-width: 728px; margin: 20px auto; } /* In-feed ad card — default (unused now on index.html, kept for any other page that still wants a square native card) sized like a normal grid item. */ .video-grid .ad-card { grid-column: span 1; background: var(--bg-elevated); border: 1px solid var(--border); border-radius: var(--radius); padding: 12px; text-align: center; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 8px; min-height: 240px; } .video-grid .ad-card .ad-label { margin-bottom: 0; } .video-grid .ad-card .ad-slot { flex: 1; width: 100%; min-height: 0; display: flex; align-items: center; justify-content: center; overflow: hidden; } /* Full-row banner ad — spans every column in the grid ("1 / -1") and is thin, matching a 728x90 leaderboard rather than a square card. This is what videoGridBatchHtml() in config.js now inserts every ADS_AFTER_ROWS rows. */ .video-grid .ad-card.ad-card--row { grid-column: 1 / -1; flex-direction: row; min-height: 0; padding: 10px 16px; gap: 14px; } .video-grid .ad-card.ad-card--row .ad-label { margin-bottom: 0; flex-shrink: 0; writing-mode: horizontal-tb; } .video-grid .ad-card.ad-card--row .ad-slot { flex: 1 1 auto; min-height: 50px; width: 100%; max-width: 100%; overflow-x: auto; /* scrolls the fixed-width ad iframe instead of breaking layout if it's ever wider than the row */ } /* ---------------- Skeleton loading ---------------- */ .skeleton-card { pointer-events: none; } .skeleton-line { height: 12px; border-radius: 4px; margin: 6px 0; } .skeleton-shimmer { background: linear-gradient(90deg, var(--bg-elevated-2) 25%, var(--border) 37%, var(--bg-elevated-2) 63%); background-size: 400% 100%; animation: shimmer 1.4s ease infinite; } @keyframes shimmer { 0% { background-position: 100% 50%; } 100% { background-position: 0 50%; } } /* ---------------- Back to top ---------------- */ .back-to-top { position: fixed; right: 20px; bottom: 20px; z-index: 250; width: 44px; height: 44px; border-radius: 50%; border: 1px solid var(--border); background: var(--bg-elevated); color: var(--text); display: flex; align-items: center; justify-content: center; cursor: pointer; box-shadow: var(--shadow); opacity: 0; pointer-events: none; transform: translateY(8px); transition: opacity 0.2s ease, transform 0.2s ease, border-color 0.2s ease; } .back-to-top.show { opacity: 1; pointer-events: auto; transform: translateY(0); } .back-to-top:hover { border-color: var(--accent); color: var(--accent); } @media (max-width: 840px) { .back-to-top { bottom: 62px; } } .mobile-ad-bar { display: none; position: fixed; left: 0; right: 0; bottom: 0; z-index: 300; background: var(--bg-elevated); border-top: 1px solid var(--border); padding: 6px 32px 6px 6px; justify-content: center; align-items: center; } .mobile-ad-bar-close { position: absolute; right: 6px; top: 50%; transform: translateY(-50%); background: var(--bg-elevated-2); border: none; color: var(--text); width: 24px; height: 24px; border-radius: 50%; cursor: pointer; } /* ---------------- Watch page ---------------- */ .watch-main { min-width: 0; } /* Player size decreased: capped to a max width and centered instead of filling the whole main column. aspect-ratio is kept on the wrapper so it still resizes cleanly at narrower viewports (see the 1100px and 840px breakpoints below, where the ad column disappears and the main column becomes the full page width). */ .player-wrap { aspect-ratio: 16/9; display: flex; align-items: center; justify-content: center; max-width: 800px; margin: 0 0 0 20px; } .watch-player { width: 100%; height: 100%; } .player-loading, .player-error { color: var(--text-muted); font-size: 14px; padding: 20px; text-align: center; } .not-found-banner { background: var(--bg-elevated); border: 1px solid var(--border); border-radius: var(--radius); padding: 40px 20px; text-align: center; color: var(--text-muted); } .not-found-banner a { color: var(--accent); font-weight: 600; } .watch-title { font-size: 22px; margin: 18px 0 8px; } .watch-meta { display: flex; align-items: center; gap: 14px; color: var(--text-muted); font-size: 13px; flex-wrap: wrap; } .watch-author { font-weight: 700; color: var(--accent); } .watch-tags { display: flex; flex-wrap: wrap; gap: 6px; margin: 12px 0; } .watch-description { color: var(--text-muted); font-size: 14px; white-space: pre-wrap; } /* ---------------- Auth modal ---------------- */ .auth-modal { display: none; position: fixed; inset: 0; background: rgba(0,0,0,0.6); z-index: 500; align-items: center; justify-content: center; padding: 20px; } .auth-modal.show { display: flex; } .auth-modal-card { background: var(--bg-elevated); border-radius: 16px; padding: 32px; width: 100%; max-width: 400px; position: relative; box-shadow: var(--shadow); max-height: 90vh; overflow-y: auto; } .auth-modal-close { position: absolute; right: 16px; top: 16px; background: none; border: none; color: var(--text-muted); font-size: 16px; cursor: pointer; } .auth-modal-brand { display: flex; justify-content: center; margin-bottom: 12px; } .auth-modal-brand .brand-logo { width: 48px; height: 48px; font-size: 20px; } .auth-tabs { display: flex; gap: 4px; background: var(--bg-elevated-2); border-radius: 10px; padding: 4px; margin-bottom: 20px; } .auth-tab { flex: 1; background: none; border: none; padding: 9px; border-radius: 8px; font-weight: 600; font-size: 13px; color: var(--text-muted); cursor: pointer; } .auth-tab.active { background: var(--accent); color: var(--accent-text); } .auth-modal-title { text-align: center; font-size: 18px; margin: 0 0 16px; } .auth-modal-error { background: rgba(255,107,107,0.12); color: var(--danger); font-size: 13px; padding: 10px 12px; border-radius: 8px; margin-bottom: 14px; } .auth-form { display: flex; flex-direction: column; gap: 12px; } .auth-input-wrap { position: relative; } .auth-input-wrap input { width: 100%; padding: 11px 12px 11px 38px; border-radius: 8px; border: 1px solid var(--border); background: var(--bg-elevated-2); color: var(--text); font-size: 14px; } .auth-input-icon { position: absolute; left: 12px; top: 50%; transform: translateY(-50%); width: 16px; height: 16px; color: var(--text-muted); } .country-search-wrap { position: relative; } .country-search-dropdown { position: absolute; top: calc(100% + 4px); left: 0; right: 0; background: var(--bg-elevated-2); border: 1px solid var(--border); border-radius: 8px; max-height: 180px; overflow-y: auto; z-index: 10; display: none; } .country-search-dropdown.show { display: block; } .country-search-item { padding: 8px 12px; font-size: 13px; cursor: pointer; } .country-search-item:hover { background: var(--bg-elevated); } .auth-forgot-link { background: none; border: none; color: var(--accent); font-size: 12px; text-align: right; cursor: pointer; padding: 0; } .auth-divider { display: flex; align-items: center; gap: 10px; margin: 18px 0; color: var(--text-muted); font-size: 12px; } .auth-divider::before, .auth-divider::after { content: ""; flex: 1; height: 1px; background: var(--border); } .auth-google-btn { width: 100%; background: var(--bg-elevated-2); border: 1px solid var(--border); color: var(--text); padding: 10px; border-radius: 8px; font-weight: 600; font-size: 14px; cursor: pointer; } .auth-google-btn:hover { background: var(--bg-elevated); } /* ---------------- Account page ---------------- */ .account-layout { max-width: 720px; margin: 0 auto; padding: 32px 20px 60px; } .account-card { background: var(--bg-elevated); border: 1px solid var(--border); border-radius: var(--radius); padding: 28px; margin-bottom: 20px; } .account-card h2 { margin: 0 0 18px; font-size: 16px; } .account-avatar-row { display: flex; align-items: center; gap: 18px; margin-bottom: 20px; } .account-avatar-lg { width: 72px; height: 72px; border-radius: 50%; background: var(--accent); color: var(--accent-text); display: flex; align-items: center; justify-content: center; font-size: 26px; font-weight: 700; overflow: hidden; } .account-avatar-lg img { width: 100%; height: 100%; object-fit: cover; } .field-row { display: flex; flex-direction: column; gap: 6px; margin-bottom: 14px; } .field-row label { font-size: 12px; color: var(--text-muted); } .field-row input, .field-row select { padding: 10px 12px; border-radius: 8px; border: 1px solid var(--border); background: var(--bg-elevated-2); color: var(--text); font-size: 14px; } .account-actions { display: flex; gap: 10px; margin-top: 16px; } .btn-secondary { background: var(--bg-elevated-2); border: 1px solid var(--border); color: var(--text); padding: 9px 18px; border-radius: 8px; font-weight: 600; font-size: 14px; cursor: pointer; } .btn-secondary:hover { border-color: var(--accent); } .status-msg { font-size: 13px; margin-top: 10px; } .status-msg.ok { color: var(--success); } .status-msg.err { color: var(--danger); } .theme-toggle-row { display: flex; align-items: center; justify-content: space-between; } .toggle-switch { position: relative; width: 44px; height: 24px; } .toggle-switch input { opacity: 0; width: 0; height: 0; } .toggle-slider { position: absolute; inset: 0; background: var(--bg-elevated-2); border: 1px solid var(--border); border-radius: 999px; cursor: pointer; transition: 0.2s; } .toggle-slider::before { content: ""; position: absolute; width: 18px; height: 18px; left: 2px; top: 2px; background: var(--text-muted); border-radius: 50%; transition: 0.2s; } .toggle-switch input:checked + .toggle-slider { background: var(--accent); } .toggle-switch input:checked + .toggle-slider::before { transform: translateX(20px); background: #fff; } /* ---------------- Model / actor profile page ---------------- */ .profile-header { display: flex; align-items: center; gap: 20px; padding: 30px 0; } .profile-avatar { width: 96px; height: 96px; border-radius: 50%; object-fit: cover; background: var(--bg-elevated-2); } .profile-name { font-size: 24px; margin: 0 0 6px; } .profile-video-count { color: var(--text-muted); font-size: 13px; } /* ---------------- Footer ---------------- */ /* Redesigned: was a single centered line. Now a full multi-column footer (brand blurb + 3 link columns) with a divider and a slim copyright bar underneath — more breathing room, better use of the width, and groups the link list from the old markup into labeled columns instead of one long middot-separated line. */ .site-footer { border-top: 1px solid var(--border); padding: 48px 0 0; margin-top: 60px; color: var(--text-muted); font-size: 13px; } .footer-inner { display: grid; grid-template-columns: 1.6fr 1fr 1fr 1fr; gap: 32px; padding-bottom: 36px; } .footer-brand .brand { margin-bottom: 12px; } .footer-tagline { max-width: 280px; line-height: 1.6; margin: 0; } .footer-col { display: flex; flex-direction: column; gap: 10px; } .footer-col h4 { color: var(--text); font-size: 12px; text-transform: uppercase; letter-spacing: 0.06em; margin: 0 0 4px; } .footer-col a { color: var(--text-muted); } .footer-col a:hover { color: var(--accent); } .footer-bottom { border-top: 1px solid var(--border); padding: 18px 0; text-align: center; } .footer-bottom p { margin: 0; } @media (max-width: 840px) { .footer-inner { grid-template-columns: 1fr 1fr; } .footer-brand { grid-column: 1 / -1; margin-bottom: 8px; } } @media (max-width: 520px) { .footer-inner { grid-template-columns: 1fr; } } /* ---------------- Responsive ---------------- */ /* Common laptop width (13"–14" screens, ~1280–1366px) — trim the sidebar and ad column a bit before things get cramped, rather than jumping straight to the 1100px 2-column layout. */ @media (max-width: 1300px) { .layout { grid-template-columns: 220px 1fr 160px; gap: 16px; } .container { padding: 0 16px; } } @media (max-width: 1100px) { .layout { grid-template-columns: 220px 1fr; } .watch-layout { grid-template-columns: 1fr; } .ad-column { display: none; } } @media (max-width: 840px) { .main-nav { display: none; } .hamburger { display: flex; align-items: center; justify-content: center; } .layout { grid-template-columns: 1fr; gap: 0; padding-top: 16px; } .sidebar { position: fixed; top: 0; left: 0; bottom: 0; width: 280px; max-width: 85vw; z-index: 200; transform: translateX(-100%); transition: transform 0.2s ease; border-radius: 0; overflow-y: auto; } .sidebar.open { transform: translateX(0); } .sidebar-close { display: block; align-self: flex-end; background: none; border: none; color: var(--text); font-size: 16px; cursor: pointer; } .video-grid { grid-template-columns: repeat(2, 1fr); gap: 12px; } .video-grid .ad-card { min-height: 180px; } .video-grid .ad-card.ad-card--row { flex-direction: column; gap: 6px; padding: 10px; } .search-box { max-width: none; order: 3; flex-basis: 100%; margin: 8px 0 0; } .header-inner { flex-wrap: wrap; height: auto; padding: 10px 16px; } .site-header { height: auto; } body { padding-bottom: 50px; } /* room for mobile ad bar */ .container { padding: 0 12px; } .player-wrap { max-width: 100%; } } @media (max-width: 520px) { .video-grid { grid-template-columns: 1fr; gap: 12px; } .video-grid .ad-card { grid-column: span 1; min-height: 160px; } .video-grid .ad-card.ad-card--row { min-height: 90px; } .brand-name { display: none; } .toolbar h1 { font-size: 17px; } } .profile-tags-row { display: flex; flex-wrap: wrap; gap: 8px; margin: 16px 0 28px; padding-top: 4px; } .profile-tag-pill { display: inline-flex; align-items: center; appearance: none; -webkit-appearance: none; border: 1px solid transparent; background: var(--bg-elevated-2); color: var(--text); /* full-strength text, not muted */ padding: 6px 14px; border-radius: 999px; font-size: 0.82rem; font-weight: 600; line-height: 1.2; cursor: pointer; white-space: nowrap; box-shadow: inset 0 0 0 1px var(--border); /* crisp edge instead of a soft border */ transition: background 0.15s ease, box-shadow 0.15s ease, color 0.15s ease; } .profile-tag-pill:hover { background: var(--accent-soft); box-shadow: inset 0 0 0 1px var(--accent); color: var(--accent); } .profile-tag-pill.active { background: var(--accent); box-shadow: none; color: var(--accent-text); /* dark text on the bright green, guaranteed readable */ font-weight: 700; }