/* ============================================================ THEME VARIABLES ? light is the default palette; [data-theme="dark"] on overrides it. Matches the app's existing convention of scoping dark mode via a data-theme attribute rather than a class. ============================================================ */ :root { --bg: #f4f6f9; --surface: #ffffff; --surface-alt: #eef1f6; --border: #dde3ea; --text: #232a33; --text-strong: #10151c; --text-muted: #626d7a; --accent: #2f7fd1; --accent-strong: #1f68b3; --accent-contrast: #ffffff; --danger: #d94f4f; --shadow: 0 8px 24px rgba(16, 21, 28, 0.08); --overlay: rgba(16, 21, 28, 0.55); } [data-theme="dark"] { --bg: #191b22; --surface: #22262e; --surface-alt: #1e2128; --border: #2d3139; --text: #d9e1e8; --text-strong: #f0f3f7; --text-muted: #9aa6b5; --accent: #6bc3ff; --accent-strong: #8ccfff; --accent-contrast: #191b22; --danger: #ff8080; --shadow: 0 8px 24px rgba(0, 0, 0, 0.4); --overlay: rgba(0, 0, 0, 0.6); } /* ----- RESET & BASE ----- */ * { margin: 0; padding: 0; box-sizing: border-box; } html { color-scheme: light; overflow-x: hidden; } html[data-theme="dark"] { color-scheme: dark; } body { overflow-x: hidden; background: var(--bg); color: var(--text); font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; line-height: 1.6; display: flex; flex-direction: column; align-items: center; min-height: 100vh; transition: background 0.15s ease, color 0.15s ease; } a { color: var(--accent); text-decoration: none; } a:hover { text-decoration: underline; } button { font-family: inherit; } /* ----- HEADER ----- */ .app-header { width: 100%; background: var(--surface); border-bottom: 1px solid var(--border); padding: 10px 20px; display: flex; justify-content: space-between; align-items: center; position: sticky; top: 0; z-index: 30; backdrop-filter: blur(4px); flex-wrap: wrap; gap: 8px; } .app-header .logo-link { font-size: 1.4rem; font-weight: 700; color: var(--text-strong); display: flex; align-items: center; gap: 8px; text-decoration: none; } .app-header .logo i { display: inline-block; width: 28px; height: 28px; background: var(--accent); border-radius: 6px; } /* ----- SEARCH + DROPDOWN ----- */ .app-header .search { position: relative; flex: 0 1 260px; min-width: 140px; margin: 0 16px; } .search-box { display: flex; align-items: center; gap: 6px; background: var(--surface-alt); border: 1px solid var(--border); border-radius: 20px; padding: 6px 14px; } .search-icon { color: var(--text-muted); flex-shrink: 0; } .search-box input { width: 100%; background: transparent; border: none; color: var(--text); font-size: 0.9rem; outline: none; } .search.active .search-box { border-color: var(--accent); } .search-dropdown { display: none; position: absolute; top: calc(100% + 8px); left: 0; right: 0; background: var(--surface); border: 1px solid var(--border); border-radius: 12px; box-shadow: var(--shadow); overflow: hidden; z-index: 40; } .search.active .search-dropdown { display: block; } .search-option { display: flex; align-items: center; gap: 10px; padding: 10px 14px; color: var(--text); } .search-option:hover { background: var(--surface-alt); text-decoration: none; } .search-option-icon { width: 32px; height: 32px; border-radius: 8px; background: var(--surface-alt); flex-shrink: 0; display: inline-block; background-color: var(--accent); opacity: 0.85; -webkit-mask-size: 18px; mask-size: 18px; -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat; -webkit-mask-position: center; mask-position: center; } .icon-communities { -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2'%3E%3Ccircle cx='9' cy='7' r='4'/%3E%3Cpath d='M2 21v-2a4 4 0 0 1 4-4h6a4 4 0 0 1 4 4v2'/%3E%3Cpath d='M17 3.13a4 4 0 0 1 0 7.75'/%3E%3Cpath d='M23 21v-2a4 4 0 0 0-3-3.87'/%3E%3C/svg%3E"); mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2'%3E%3Ccircle cx='9' cy='7' r='4'/%3E%3Cpath d='M2 21v-2a4 4 0 0 1 4-4h6a4 4 0 0 1 4 4v2'/%3E%3Cpath d='M17 3.13a4 4 0 0 1 0 7.75'/%3E%3Cpath d='M23 21v-2a4 4 0 0 0-3-3.87'/%3E%3C/svg%3E"); } .icon-groups { -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2'%3E%3Crect x='3' y='7' width='18' height='13' rx='2'/%3E%3Cpath d='M8 7V5a2 2 0 0 1 2-2h4a2 2 0 0 1 2 2v2'/%3E%3C/svg%3E"); mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2'%3E%3Crect x='3' y='7' width='18' height='13' rx='2'/%3E%3Cpath d='M8 7V5a2 2 0 0 1 2-2h4a2 2 0 0 1 2 2v2'/%3E%3C/svg%3E"); } .icon-people { -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2'%3E%3Ccircle cx='12' cy='8' r='4'/%3E%3Cpath d='M4 21v-1a8 8 0 0 1 16 0v1'/%3E%3C/svg%3E"); mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2'%3E%3Ccircle cx='12' cy='8' r='4'/%3E%3Cpath d='M4 21v-1a8 8 0 0 1 16 0v1'/%3E%3C/svg%3E"); } .search-option-text { display: flex; flex-direction: column; gap: 1px; } .search-option-title { font-size: 0.9rem; font-weight: 600; color: var(--text-strong); } .search-option-sub { font-size: 0.78rem; color: var(--text-muted); } /* ----- HEADER ACTIONS ----- */ .app-header .header-actions { display: flex; align-items: center; gap: 10px; flex-shrink: 0; } .theme-toggle { width: 34px; height: 34px; border-radius: 50%; border: 1px solid var(--border); background: var(--surface-alt); color: var(--text); display: flex; align-items: center; justify-content: center; cursor: pointer; flex-shrink: 0; } .theme-toggle:hover { border-color: var(--accent); color: var(--accent); } .theme-toggle .icon-sun { display: none; } .theme-toggle .icon-moon { display: block; } [data-theme="dark"] .theme-toggle .icon-sun { display: block; } [data-theme="dark"] .theme-toggle .icon-moon { display: none; } .btn { padding: 6px 16px; border-radius: 20px; border: none; font-weight: 600; font-size: 0.9rem; cursor: pointer; transition: background 0.2s, border-color 0.2s, color 0.2s; } .btn-signin { background: transparent; color: var(--text); border: 1px solid var(--accent); } .btn-signin:hover { background: var(--surface-alt); } .btn-signup { background: var(--accent); color: var(--accent-contrast); } .btn-signup:hover { background: var(--accent-strong); } .btn-follow { background: var(--surface-alt); color: var(--text); border: 1px solid var(--border); padding: 6px 14px; border-radius: 16px; font-size: 0.85rem; font-weight: 600; white-space: nowrap; } .btn-follow:hover { border-color: var(--accent); color: var(--accent); } .btn-follow.following { background: var(--accent); color: var(--accent-contrast); border-color: var(--accent); } .hamburger { display: none; flex-direction: column; gap: 4px; background: none; border: none; cursor: pointer; padding: 4px; } .hamburger span { display: block; width: 24px; height: 2px; background: var(--text); border-radius: 2px; } /* ----- MOBILE MENU OVERLAY ----- */ .mobile-menu-overlay { display: none; position: fixed; top: 0; left: 0; width: 100%; height: 100%; background: var(--overlay); z-index: 50; justify-content: flex-start; align-items: flex-start; padding: 70px 20px 20px; overflow-y: auto; } .mobile-menu-overlay.active { display: flex; } .mobile-menu-panel { background: var(--surface); border-radius: 12px; padding: 20px; width: 100%; max-width: 400px; box-shadow: var(--shadow); } .mobile-menu-panel .close-btn { background: none; border: none; color: var(--text); font-size: 1.8rem; float: right; cursor: pointer; } .mobile-menu-panel .sidebar-section { margin-bottom: 24px; } .see-all-link { font-size: 0.85rem; display: inline-block; margin-top: 4px; } /* ----- HERO BAND (landing page welcome strip) ----- */ .hero-band { width: 100%; position: relative; background: radial-gradient(720px 260px at 12% -20%, color-mix(in srgb, var(--accent) 22%, transparent), transparent), linear-gradient(135deg, var(--accent-strong) 0%, var(--accent) 100%); border-bottom: 1px solid var(--border); transition: opacity 0.2s ease, max-height 0.2s ease; overflow: hidden; } .hero-band.hero-hide { opacity: 0; } .hero-inner { max-width: 720px; margin: 0 auto; padding: 40px 24px 36px; text-align: center; display: flex; flex-direction: column; align-items: center; gap: 10px; } .hero-logo { display: flex; align-items: center; gap: 8px; color: var(--accent-contrast); font-weight: 700; font-size: 1.05rem; letter-spacing: 0.2px; margin-bottom: 6px; } .hero-logo i { display: inline-block; width: 26px; height: 26px; border-radius: 7px; background: var(--accent-contrast); } .hero-title { font-size: 1.9rem; line-height: 1.25; font-weight: 800; color: var(--accent-contrast); max-width: 620px; } .hero-subtitle { font-size: 1.05rem; color: var(--accent-contrast); opacity: 0.9; max-width: 520px; } .hero-actions { display: flex; gap: 10px; margin-top: 10px; flex-wrap: wrap; justify-content: center; } .hero-btn { padding: 9px 22px; font-size: 0.95rem; } .hero-actions .btn-signup { background: var(--accent-contrast); color: var(--accent-strong); } .hero-actions .btn-signup:hover { background: var(--accent-contrast); opacity: 0.9; } .hero-actions .btn-signin { background: transparent; border: 1px solid color-mix(in srgb, var(--accent-contrast) 55%, transparent); color: var(--accent-contrast); } .hero-actions .btn-signin:hover { background: color-mix(in srgb, var(--accent-contrast) 12%, transparent); } .hero-dismiss { position: absolute; top: 10px; right: 14px; width: 30px; height: 30px; border-radius: 50%; border: none; background: color-mix(in srgb, var(--accent-contrast) 18%, transparent); color: var(--accent-contrast); font-size: 1.3rem; line-height: 1; cursor: pointer; } .hero-dismiss:hover { background: color-mix(in srgb, var(--accent-contrast) 28%, transparent); } @media (max-width: 640px) { .hero-inner { padding: 32px 20px 28px; gap: 8px; } .hero-title { font-size: 1.4rem; } .hero-subtitle { font-size: 0.92rem; } .hero-btn { padding: 8px 16px; font-size: 0.88rem; } .hero-dismiss { top: 8px; right: 8px; width: 26px; height: 26px; font-size: 1.1rem; } } /* ----- LAYOUT: 3 columns ----- */ .app-layout { width: 100%; max-width: 1200px; display: grid; grid-template-columns: 240px 1fr 280px; gap: 24px; padding: 20px 24px; flex: 1; } .app-layout.two-col { grid-template-columns: 240px 1fr; } .app-layout.single-col { grid-template-columns: 1fr; max-width: 860px; } /* ----- SIDEBARS ----- */ .sidebar { background: var(--surface); border-radius: 12px; padding: 16px; border: 1px solid var(--border); align-self: start; position: sticky; top: 80px; } .sidebar h3 { font-size: 1rem; font-weight: 700; margin-bottom: 12px; color: var(--text-strong); letter-spacing: 0.3px; } .sidebar ul { list-style: none; padding: 0; } .sidebar ul li { border-bottom: 1px solid var(--border); font-size: 0.9rem; } .sidebar ul li:last-child { border-bottom: none; } .sidebar ul li a { display: flex; justify-content: space-between; padding: 6px 0; color: var(--text); } .sidebar ul li a:hover { color: var(--accent); text-decoration: none; } .sidebar ul li .badge, .mobile-menu-panel .badge { color: var(--text-muted); font-size: 0.75rem; } .sidebar .trending-tag, .mobile-menu-panel .trending-tag { display: inline-block; background: var(--surface-alt); padding: 2px 10px; border-radius: 16px; margin: 3px 4px 3px 0; font-size: 0.8rem; color: var(--accent); } .sidebar .about-text, .mobile-menu-panel .about-text { font-size: 0.9rem; color: var(--text-muted); line-height: 1.5; margin-top: 4px; } /* ----- MAIN FEED / CONTAINER ----- min-width: 0 overrides the grid item's default min-width: auto, which otherwise locks this column's minimum size to its widest unbreakable content (the tabs bar's 7 non-wrapping tab items). Without this, the grid track - and the whole page - gets forced wider than small viewports before public-sidebar.js's overflow measurement ever runs, which is what caused the horizontal scrollbar instead of tabs collapsing into the dropdown. */ .feed-container, .page-container { width: 100%; min-width: 0; } .page-heading { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; margin-bottom: 16px; flex-wrap: wrap; } .page-heading h1 { font-size: 1.4rem; color: var(--text-strong); } .page-heading .page-sub { color: var(--text-muted); font-size: 0.9rem; } /* ----- POST CARD ----- */ .post { display: flex; gap: 12px; padding: 16px 0; border-bottom: 1px solid var(--border); background: transparent; } .post:last-child { border-bottom: none; } .post-avatar { flex-shrink: 0; } .post-avatar img { width: 46px; height: 46px; border-radius: 50%; object-fit: cover; background: var(--surface-alt); } .post-body { flex: 1; min-width: 0; } .post-header { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 8px; font-size: 0.9rem; margin-bottom: 4px; } .display-name { font-weight: 700; color: var(--text-strong); } .username { color: var(--text-muted); } .timestamp { color: var(--text-muted); font-size: 0.8rem; } .post-content { font-size: 1rem; word-wrap: break-word; margin: 4px 0 8px 0; } .post-media { display: flex; flex-wrap: wrap; gap: 6px; margin: 8px 0 6px 0; border-radius: 12px; overflow: hidden; } .post-media img { max-width: 100%; max-height: 300px; object-fit: cover; border-radius: 8px; background: var(--surface-alt); flex: 1 1 auto; min-width: 0; } .post-actions { display: flex; gap: 20px; margin-top: 10px; font-size: 0.9rem; color: var(--text-muted); } .post-actions .action { display: inline-flex; align-items: center; gap: 4px; } .post-actions .action:hover { color: var(--text); } .post-actions .action i { display: inline-block; width: 18px; height: 18px; background-color: var(--text-muted); mask-size: contain; mask-repeat: no-repeat; mask-position: center; -webkit-mask-size: contain; -webkit-mask-repeat: no-repeat; -webkit-mask-position: center; } .icon-reply { mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M21 15a2 2 0 0 1-2 2H7l-4 4V5a2 2 0 0 1 2-2h14a2 2 0 0 1 2 2z'%3E%3C/path%3E%3C/svg%3E"); -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M21 15a2 2 0 0 1-2 2H7l-4 4V5a2 2 0 0 1 2-2h14a2 2 0 0 1 2 2z'%3E%3C/path%3E%3C/svg%3E"); } .icon-boost { mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M17 1l4 4-4 4'%3E%3C/path%3E%3Cpath d='M3 9V5a2 2 0 0 1 2-2h12'%3E%3C/path%3E%3Cpath d='M7 23l-4-4 4-4'%3E%3C/path%3E%3Cpath d='M21 15v4a2 2 0 0 1-2 2H7'%3E%3C/path%3E%3C/svg%3E"); -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M17 1l4 4-4 4'%3E%3C/path%3E%3Cpath d='M3 9V5a2 2 0 0 1 2-2h12'%3E%3C/path%3E%3Cpath d='M7 23l-4-4 4-4'%3E%3C/path%3E%3Cpath d='M21 15v4a2 2 0 0 1-2 2H7'%3E%3C/path%3E%3C/svg%3E"); } .icon-fav { mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 2l3.09 6.26L22 9.27l-5 4.87 1.18 6.88L12 17.77l-6.18 3.25L7 14.14 2 9.27l6.91-1.01L12 2z'%3E%3C/path%3E%3C/svg%3E"); -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 2l3.09 6.26L22 9.27l-5 4.87 1.18 6.88L12 17.77l-6.18 3.25L7 14.14 2 9.27l6.91-1.01L12 2z'%3E%3C/path%3E%3C/svg%3E"); } /* ----- LOADING INDICATOR ----- */ .loader { text-align: center; padding: 24px 0; color: var(--text-muted); font-size: 0.9rem; } .loader .spinner { display: inline-block; width: 24px; height: 24px; border: 3px solid var(--border); border-top-color: var(--accent); border-radius: 50%; animation: spin 0.8s linear infinite; margin-right: 8px; vertical-align: middle; } @keyframes spin { to { transform: rotate(360deg); } } /* ----- ENTITY CARDS (communities / groups) ----- */ .entity-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 16px; } .entity-card { display: block; background: var(--surface); border: 1px solid var(--border); border-radius: 14px; overflow: hidden; color: var(--text); transition: border-color 0.15s, transform 0.1s; } .entity-card:hover { border-color: var(--accent); text-decoration: none; } .entity-cover { height: 100px; background-color: var(--surface-alt); background-size: cover; background-position: center; } .entity-body { display: flex; gap: 10px; padding: 12px; align-items: flex-start; } .entity-icon { width: 42px; height: 42px; border-radius: 10px; object-fit: cover; background: var(--surface-alt); margin-top: -26px; border: 3px solid var(--surface); flex-shrink: 0; } .entity-icon-round { border-radius: 50%; } .entity-info { min-width: 0; flex: 1; } .entity-name { font-weight: 700; color: var(--text-strong); font-size: 0.95rem; display: flex; align-items: center; gap: 6px; flex-wrap: wrap; } .entity-desc { font-size: 0.82rem; color: var(--text-muted); margin: 3px 0 6px; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; } .entity-meta { font-size: 0.76rem; color: var(--text-muted); } .chip { font-size: 0.68rem; padding: 1px 8px; border-radius: 10px; font-weight: 600; background: var(--surface-alt); color: var(--text-muted); } .chip-private { color: var(--danger); } /* ----- PERSON CARDS ----- */ .person-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 14px; } .person-card { display: flex; align-items: center; gap: 12px; background: var(--surface); border: 1px solid var(--border); border-radius: 14px; padding: 14px; } .person-card-link { display: flex; align-items: center; gap: 12px; color: var(--text); flex: 1; min-width: 0; } .person-card-link:hover { text-decoration: none; } .person-card-link:hover .entity-name { color: var(--accent); } .person-avatar { width: 52px; height: 52px; border-radius: 50%; object-fit: cover; background: var(--surface-alt); flex-shrink: 0; } /* ----- PAGINATION ----- */ .pagination { display: flex; justify-content: center; align-items: center; gap: 6px; margin: 28px 0 12px; flex-wrap: wrap; } .page-link { padding: 6px 12px; border-radius: 8px; border: 1px solid var(--border); color: var(--text); font-size: 0.85rem; } .page-link:hover { border-color: var(--accent); color: var(--accent); text-decoration: none; } .page-link.current { background: var(--accent); border-color: var(--accent); color: var(--accent-contrast); font-weight: 700; } .page-link.disabled { color: var(--text-muted); pointer-events: none; opacity: 0.5; } .page-ellipsis { color: var(--text-muted); padding: 0 2px; } /* ----- DETAIL PAGE (community / group) ----- */ .detail-cover { width: 100%; height: 180px; border-radius: 16px; background-size: cover; background-position: center; background-color: var(--surface-alt); } .detail-header { display: flex; align-items: flex-end; gap: 16px; margin: -40px 16px 0; flex-wrap: wrap; } .detail-icon { width: 84px; height: 84px; border-radius: 16px; border: 4px solid var(--bg); object-fit: cover; background: var(--surface-alt); flex-shrink: 0; } .detail-icon-round { border-radius: 50%; } .detail-title-block { flex: 1; min-width: 200px; padding-bottom: 4px; } .detail-title-block h1 { font-size: 1.3rem; color: var(--text-strong); display: flex; align-items: center; gap: 8px; flex-wrap: wrap; } .detail-title-block .entity-meta { margin-top: 4px; } .detail-actions { padding-bottom: 4px; display: flex; gap: 8px; } /* ----- TABS ----- */ .tab-bar { display: flex; gap: 4px; border-bottom: 1px solid var(--border); margin: 20px 0 0; overflow-x: auto; scrollbar-width: none; } .tab-bar::-webkit-scrollbar { display: none; } .tab-btn { background: none; border: none; padding: 10px 16px; font-size: 0.9rem; font-weight: 600; color: var(--text-muted); cursor: pointer; border-bottom: 2px solid transparent; white-space: nowrap; flex-shrink: 0; } .tab-btn:hover { color: var(--text); } .tab-btn.active { color: var(--accent); border-bottom-color: var(--accent); } .tab-panel { display: none; padding: 18px 0; } .tab-panel.active { display: block; } .about-panel { max-width: 640px; color: var(--text); font-size: 0.95rem; line-height: 1.7; } .about-panel h3 { font-size: 0.95rem; color: var(--text-strong); margin: 16px 0 6px; } .about-panel h3:first-child { margin-top: 0; } .member-list { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 10px; } .member-row { display: flex; align-items: center; gap: 10px; background: var(--surface); border: 1px solid var(--border); border-radius: 10px; padding: 8px 10px; } .member-row img { width: 36px; height: 36px; border-radius: 50%; object-fit: cover; background: var(--surface-alt); } .member-row .entity-name { font-size: 0.85rem; } .member-role { font-size: 0.7rem; color: var(--text-muted); } .media-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); gap: 8px; } .media-grid img { width: 100%; height: 140px; object-fit: cover; border-radius: 10px; background: var(--surface-alt); } /* ----- PROFILE (user.php) ----- */ .profile-header { display: flex; gap: 16px; align-items: center; flex-wrap: wrap; } .profile-avatar { width: 84px; height: 84px; border-radius: 50%; object-fit: cover; background: var(--surface-alt); } .profile-name { font-size: 1.25rem; color: var(--text-strong); } .profile-bio { color: var(--text-muted); margin-top: 4px; max-width: 520px; } .profile-stats { display: flex; gap: 18px; margin-top: 10px; font-size: 0.85rem; color: var(--text-muted); } .profile-stats strong { color: var(--text-strong); } .empty-state { text-align: center; padding: 40px 20px; color: var(--text-muted); } /* ----- POST CONTENT CLAMP / SHOW MORE ----- */ .post-content-wrap { margin: 4px 0 8px 0; } .post-content.clamped { display: -webkit-box; -webkit-line-clamp: 4; -webkit-box-orient: vertical; overflow: hidden; } .show-more-btn { background: none; border: none; color: var(--accent); cursor: pointer; font-size: 0.88rem; font-weight: 600; padding: 4px 0 0; font-family: inherit; } .show-more-btn:hover { text-decoration: underline; } /* ----- POST TYPE BADGE / CHIPS ----- */ .post-badge { display: inline-block; background: color-mix(in srgb, var(--accent) 14%, transparent); color: var(--accent); font-size: 0.7rem; font-weight: 700; padding: 2px 9px; border-radius: 10px; margin-bottom: 6px; letter-spacing: 0.4px; text-transform: uppercase; } .post-type-chip { display: inline-block; background: var(--surface-alt); color: var(--text-muted); font-size: 0.72rem; font-weight: 600; padding: 1px 9px; border-radius: 10px; } .post-type-chip--shared { background: color-mix(in srgb, var(--accent) 14%, transparent); color: var(--accent); } /* ----- POST IMAGE GRID (X-style, namespaced as post-media-* so it doesn't collide with the generic .media-grid used for community/ group photo galleries elsewhere on the site) ----- */ .post-media-grid { display: grid; gap: 2px; border-radius: 14px; overflow: hidden; margin: 8px 0 6px 0; max-height: 420px; background: var(--surface-alt); } .post-media-grid.count-1 { grid-template-columns: 1fr; } .post-media-grid.count-2 { grid-template-columns: 1fr 1fr; } .post-media-grid.count-3 { grid-template-columns: 1fr 1fr; grid-template-rows: 1fr 1fr; } .post-media-grid.count-3 .post-media-item:first-child { grid-row: 1 / 3; } .post-media-grid.count-4 { grid-template-columns: 1fr 1fr; grid-template-rows: 1fr 1fr; } .post-media-item { position: relative; overflow: hidden; cursor: zoom-in; background: var(--surface-alt); min-height: 0; } .post-media-grid.count-1 .post-media-item { max-height: 420px; } .post-media-item img { width: 100%; height: 100%; min-height: 160px; object-fit: cover; display: block; transition: transform 0.2s ease; } .post-media-grid.count-1 .post-media-item img { min-height: 0; max-height: 420px; object-fit: contain; background: #000; } .post-media-item:hover img { transform: scale(1.03); } /* ----- VIDEO (X-style autoplay-on-scroll, click for sound in modal) ----- */ .post-video { position: relative; border-radius: 14px; overflow: hidden; margin: 8px 0 6px 0; background: #000; cursor: pointer; } .post-video video { width: 100%; max-height: 460px; display: block; background: #000; } .video-mute-btn { position: absolute; bottom: 10px; right: 10px; width: 34px; height: 34px; border-radius: 50%; border: none; background: rgba(0,0,0,0.6); cursor: pointer; display: flex; align-items: center; justify-content: center; } .video-mute-btn i { width: 16px; height: 16px; display: inline-block; background-color: #fff; mask-size: contain; mask-repeat: no-repeat; mask-position: center; -webkit-mask-size: contain; -webkit-mask-repeat: no-repeat; -webkit-mask-position: center; } .icon-mute { mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolygon points='11 5 6 9 2 9 2 15 6 15 11 19 11 5'%3E%3C/polygon%3E%3Cline x1='23' y1='9' x2='17' y2='15'%3E%3C/line%3E%3Cline x1='17' y1='9' x2='23' y2='15'%3E%3C/line%3E%3C/svg%3E"); -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolygon points='11 5 6 9 2 9 2 15 6 15 11 19 11 5'%3E%3C/polygon%3E%3Cline x1='23' y1='9' x2='17' y2='15'%3E%3C/line%3E%3Cline x1='17' y1='9' x2='23' y2='15'%3E%3C/line%3E%3C/svg%3E");} .icon-unmute { mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolygon points='11 5 6 9 2 9 2 15 6 15 11 19 11 5'%3E%3C/polygon%3E%3Cpath d='M15.54 8.46a5 5 0 0 1 0 7.07'%3E%3C/path%3E%3Cpath d='M19.07 4.93a10 10 0 0 1 0 14.14'%3E%3C/path%3E%3C/svg%3E"); -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolygon points='11 5 6 9 2 9 2 15 6 15 11 19 11 5'%3E%3C/polygon%3E%3Cpath d='M15.54 8.46a5 5 0 0 1 0 7.07'%3E%3C/path%3E%3Cpath d='M19.07 4.93a10 10 0 0 1 0 14.14'%3E%3C/path%3E%3C/svg%3E");} /* ----- POLL ----- */ .post-poll { margin: 8px 0 4px 0; } .poll-option { position: relative; border: 1px solid var(--border); border-radius: 8px; padding: 9px 12px; margin-bottom: 7px; cursor: pointer; overflow: hidden; font-size: 0.92rem; transition: border-color 0.15s; } .poll-option:hover { border-color: var(--accent); } .poll-fill { position: absolute; left: 0; top: 0; bottom: 0; width: 0; background: var(--surface-alt); z-index: 0; display: none; transition: width 0.4s ease; } .poll-option-row { position: relative; z-index: 1; display: flex; justify-content: space-between; gap: 8px; } .poll-option-pct { display: none; color: var(--text-muted); font-weight: 600; } .post-poll.voted .poll-option { cursor: default; } .post-poll.voted .poll-fill { display: block; } .post-poll.voted .poll-option-pct { display: inline; } .poll-meta { color: var(--text-muted); font-size: 0.8rem; margin-top: 2px; } /* ----- LINK CARD ----- */ .link-card { display: block; border: 1px solid var(--border); border-radius: 14px; overflow: hidden; margin: 8px 0 6px 0; color: inherit; text-decoration: none; } .link-card:hover { border-color: var(--accent); text-decoration: none; } .link-card img { width: 100%; max-height: 240px; object-fit: cover; display: block; background: var(--surface-alt); } .link-card-body { padding: 10px 14px; } .link-domain { color: var(--text-muted); font-size: 0.76rem; text-transform: uppercase; letter-spacing: 0.4px; } .link-title { font-weight: 700; color: var(--text-strong); margin: 3px 0; } .link-desc { color: var(--text-muted); font-size: 0.85rem; } /* ----- ARTICLE / NEWS CARD ----- */ .article-card { border: 1px solid var(--border); border-radius: 14px; overflow: hidden; margin: 8px 0 4px 0; } .article-card img { width: 100%; max-height: 280px; object-fit: cover; display: block; background: var(--surface-alt); } .article-body { padding: 12px 14px; } .article-title { font-weight: 700; font-size: 1.05rem; color: var(--text-strong); margin-bottom: 6px; } .article-full { color: var(--text-muted); font-size: 0.92rem; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; } .article-card.expanded .article-full { display: block; -webkit-line-clamp: unset; overflow: visible; } /* ----- SHARED / REPOSTED POST (quote card around the original post) ----- */ .shared-post-card { border: 1px solid var(--border); border-radius: 14px; padding: 10px 12px; margin: 8px 0 4px 0; } .shared-post-header { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 8px; font-size: 0.85rem; margin-bottom: 4px; } .shared-post-avatar { width: 24px; height: 24px; border-radius: 50%; object-fit: cover; background: var(--surface-alt); } /* ----- IMAGE LIGHTBOX ----- */ .lightbox-overlay { position: fixed; inset: 0; background: rgba(0,0,0,0.93); z-index: 100; display: none; align-items: center; justify-content: center; } .lightbox-overlay.active { display: flex; } .lightbox-img { max-width: 88vw; max-height: 82vh; object-fit: contain; transition: transform 0.25s ease; cursor: zoom-in; user-select: none; } .lightbox-img.zoomed { transform: scale(1.9); cursor: zoom-out; } .lightbox-close, .lightbox-nav { position: absolute; background: rgba(255,255,255,0.08); border: none; color: #fff; border-radius: 50%; cursor: pointer; display: flex; align-items: center; justify-content: center; transition: background 0.15s; } .lightbox-close:hover, .lightbox-nav:hover { background: rgba(255,255,255,0.2); } .lightbox-close { top: 18px; right: 18px; width: 40px; height: 40px; font-size: 1.6rem; line-height: 1; } .lightbox-nav { top: 50%; transform: translateY(-50%); width: 44px; height: 44px; font-size: 1.1rem; } .lightbox-prev { left: 18px; } .lightbox-next { right: 18px; } .lightbox-counter { position: absolute; bottom: 18px; left: 50%; transform: translateX(-50%); color: #d9e1e8; background: rgba(255,255,255,0.08); padding: 4px 14px; border-radius: 20px; font-size: 0.85rem; } /* ----- VIDEO MODAL ----- */ .video-modal-overlay { position: fixed; inset: 0; background: rgba(0,0,0,0.93); z-index: 100; display: none; align-items: center; justify-content: center; } .video-modal-overlay.active { display: flex; } .video-modal-player { max-width: 90vw; max-height: 86vh; background: #000; border-radius: 8px; } /* ----- FEED TABS ----- */ .tabs-bar { display: flex; align-items: stretch; border-bottom: 1px solid var(--border); min-width: 0; max-width: 100%; } .tabs-list { display: flex; flex: 1 1 auto; min-width: 0; overflow-x: auto; } .tab-item { flex-shrink: 0; } .tab-link { display: block; padding: 15px 18px; font-size: 0.92rem; font-weight: 600; color: var(--text-muted); text-decoration: none; border-bottom: 2px solid transparent; white-space: nowrap; cursor: pointer; } .tab-link:hover { color: var(--text-strong); text-decoration: none; } .tab-link.active { color: var(--text-strong); border-bottom-color: var(--accent); } .tab-panel { display: none; } .tab-panel.active { display: block; } .tab-panel-inner { padding: 16px 20px; display: flex; flex-wrap: wrap; gap: 8px; } .tab-panel-list { list-style: none; margin: 0; padding: 0; } .tab-panel-list li a { display: flex; justify-content: space-between; align-items: center; padding: 12px 20px; border-bottom: 1px solid var(--border); color: inherit; text-decoration: none; } .tab-panel-list li a:hover { background: var(--surface-alt); text-decoration: none; } .empty-list-item { padding: 12px 20px; color: var(--text-muted); font-size: 0.88rem; list-style: none; } /* ----- TABS OVERFLOW DROPDOWN (narrow screens) ----- */ .tabs-dropdown { position: relative; flex-shrink: 0; align-self: stretch; } .tabs-dropdown-toggle { width: 42px; height: 100%; display: flex; align-items: center; justify-content: center; background: transparent; border: none; border-left: 1px solid var(--border); color: var(--text-muted); cursor: pointer; } .tabs-dropdown-toggle:hover { color: var(--text-strong); } .tabs-dropdown-toggle svg { width: 18px; height: 18px; fill: currentColor; } .tabs-dropdown-menu { position: absolute; top: 100%; right: 0; min-width: 170px; background: var(--surface); border: 1px solid var(--border); border-radius: 10px; box-shadow: 0 8px 24px rgba(0,0,0,0.18); padding: 6px 0; margin-top: 4px; z-index: 50; display: none; } .tabs-dropdown-menu.open { display: block; } .tabs-dropdown-item { display: block; padding: 9px 16px; font-size: 0.88rem; font-weight: 500; color: var(--text); text-decoration: none; cursor: pointer; white-space: nowrap; } .tabs-dropdown-item:hover { background: var(--surface-alt); text-decoration: none; } .tabs-dropdown-item.active { color: var(--accent); font-weight: 700; } /* ----- LIST ROW (hashtags / groups / communities tabs) ----- */ .list-row a { display: flex; justify-content: space-between; align-items: center; gap: 10px; padding: 12px 20px; border-bottom: 1px solid var(--border); color: inherit; text-decoration: none; } .list-row a:hover { background: var(--surface-alt); text-decoration: none; } .list-row-main { display: flex; flex-direction: column; gap: 2px; min-width: 0; } .list-row-title { font-weight: 700; color: var(--text-strong); } .list-row-sub { font-size: 0.82rem; color: var(--text-muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .trend-indicator { font-size: 0.75rem; flex-shrink: 0; } .trend-indicator.trend-up { color: #2fa84f; } .trend-indicator.trend-down { color: #e0473e; } .trend-indicator.trend-steady { color: var(--text-muted); } /* ----- PEOPLE TAB ----- */ .person-row { border-bottom: 1px solid var(--border); } .person-row a { display: flex; align-items: center; text-decoration: none; color: inherit; } .person-row { display: flex; align-items: center; gap: 12px; padding: 12px 20px; } .person-row a.list-row-main { padding: 0; border: none; flex: 1 1 auto; } .person-avatar { width: 42px; height: 42px; border-radius: 50%; object-fit: cover; background: var(--surface-alt); flex-shrink: 0; } .person-bio { font-size: 0.82rem; color: var(--text-muted); margin-top: 2px; } /* ----- MEDIA TAB ----- */ .media-tab-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(110px, 1fr)); gap: 3px; padding: 10px; } .media-tile { position: relative; aspect-ratio: 1 / 1; cursor: pointer; overflow: hidden; background: var(--surface-alt); } .media-tile img { width: 100%; height: 100%; object-fit: cover; display: block; } .media-tile-play { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; color: #fff; font-size: 1.3rem; background: rgba(0,0,0,0.25); } /* ----- LOAD MORE ----- */ .load-more-btn { display: block; width: 100%; padding: 13px; background: none; border: none; border-top: 1px solid var(--border); color: var(--accent); font-weight: 600; font-size: 0.9rem; cursor: pointer; font-family: inherit; } .load-more-btn:hover { background: var(--surface-alt); } /* ----- RESPONSIVE ----- */ @media (max-width: 1024px) { .app-layout { grid-template-columns: 200px 1fr 240px; gap: 16px; padding: 16px; } .app-layout.two-col { grid-template-columns: 200px 1fr; } } @media (max-width: 820px) { .app-layout, .app-layout.two-col { grid-template-columns: 1fr; gap: 16px; padding: 12px; } .sidebar { display: none; } .hamburger { display: flex; } .app-header .search { order: 10; flex-basis: 100%; margin: 4px 0 0; } .app-header .header-actions .btn { font-size: 0.8rem; padding: 4px 12px; } } @media (max-width: 480px) { .app-header { padding: 8px 12px; } .app-header .logo-link { font-size: 1.2rem; } .app-header .logo i { width: 24px; height: 24px; } .post { gap: 8px; padding: 12px 0; } .post-avatar img { width: 36px; height: 36px; } .post-header { font-size: 0.8rem; } .post-content { font-size: 0.9rem; } .post-actions { gap: 12px; font-size: 0.8rem; } .post-media-grid { max-height: 300px; } .lightbox-nav { width: 38px; height: 38px; } .detail-header { margin-top: -30px; } .detail-icon { width: 64px; height: 64px; } .tab-btn { padding: 8px 12px; font-size: 0.85rem; } }