Spaces:
Running
Running
| /* ========================================================= | |
| InstaGroups - Exact Instagram Chat Pastel Lilac Theme | |
| ========================================================= */ | |
| :root { | |
| /* Exact pastel lilac-pink from the Instagram chat theme */ | |
| --bg: #FAF2FD; | |
| --surface: #FFFFFF; | |
| --surface-hover: #FDF9FF; | |
| --border: #E8D5F0; | |
| --border-hover: #CFB3DB; | |
| --text-main: #241432; | |
| --text-muted: #745E86; | |
| --text-dim: #9E88B0; | |
| --btn-primary-bg: #8B44EB; | |
| --btn-primary-text: #FFFFFF; | |
| --tag-bg: #F3E4FA; | |
| --tag-text: #6B29C5; | |
| --radius-sm: 6px; | |
| --radius-md: 10px; | |
| --radius-lg: 14px; | |
| } | |
| * { | |
| box-sizing: border-box; | |
| margin: 0; | |
| padding: 0; | |
| } | |
| body { | |
| background-color: var(--bg); | |
| background-image: | |
| radial-gradient(circle at 10% 20%, rgba(245, 215, 252, 0.8), transparent 40%), | |
| radial-gradient(circle at 90% 80%, rgba(235, 205, 250, 0.7), transparent 40%); | |
| background-attachment: fixed; | |
| color: var(--text-main); | |
| font-family: 'Comic Neue', 'Comic Sans MS', cursive, sans-serif; | |
| line-height: 1.5; | |
| -webkit-font-smoothing: antialiased; | |
| min-height: 100vh; | |
| } | |
| .container { | |
| max-width: 1000px; | |
| margin: 0 auto; | |
| padding: 0 20px; | |
| } | |
| /* Header / Navbar */ | |
| .header { | |
| border-bottom: 1px solid var(--border); | |
| background: rgba(250, 242, 253, 0.82); | |
| backdrop-filter: blur(20px) saturate(180%); | |
| -webkit-backdrop-filter: blur(20px) saturate(180%); | |
| position: sticky; | |
| top: 0; | |
| z-index: 100; | |
| box-shadow: 0 2px 14px rgba(139, 68, 235, 0.04); | |
| } | |
| .header-container { | |
| max-width: 1040px; | |
| margin: 0 auto; | |
| padding: 12px 20px; | |
| display: flex; | |
| justify-content: space-between; | |
| align-items: center; | |
| gap: 16px; | |
| } | |
| /* Brand */ | |
| .brand-wrap { | |
| display: flex; | |
| align-items: center; | |
| gap: 12px; | |
| } | |
| .brand { | |
| display: inline-flex; | |
| align-items: center; | |
| gap: 8px; | |
| text-decoration: none; | |
| color: var(--text-main); | |
| } | |
| .brand-icon { | |
| display: inline-flex; | |
| align-items: center; | |
| justify-content: center; | |
| line-height: 0; | |
| } | |
| .brand-name { | |
| font-size: 1.05rem; | |
| font-weight: 700; | |
| letter-spacing: -0.02em; | |
| } | |
| /* Nav Middle Links - Sleek Segmented Control */ | |
| .nav-links { | |
| display: flex; | |
| align-items: center; | |
| gap: 3px; | |
| background: rgba(255, 255, 255, 0.75); | |
| padding: 4px; | |
| border-radius: 9999px; | |
| border: 1px solid var(--border); | |
| box-shadow: inset 0 1px 2px rgba(139, 68, 235, 0.04); | |
| } | |
| .nav-link { | |
| padding: 6px 15px; | |
| font-size: 0.84rem; | |
| font-weight: 600; | |
| color: var(--text-muted); | |
| background: transparent; | |
| border: none; | |
| border-radius: 9999px; | |
| cursor: pointer; | |
| transition: all 0.15s ease; | |
| font-family: inherit; | |
| line-height: 1.2; | |
| } | |
| .nav-link:hover { | |
| color: var(--text-main); | |
| } | |
| .nav-link.active { | |
| color: var(--text-main); | |
| background: #FFFFFF; | |
| font-weight: 700; | |
| box-shadow: 0 2px 6px rgba(139, 68, 235, 0.12); | |
| } | |
| .header-actions { | |
| display: flex; | |
| align-items: center; | |
| gap: 8px; | |
| } | |
| @media (max-width: 768px) { | |
| .nav-links { display: none; } | |
| .status-pill { display: none; } | |
| } | |
| /* Buttons */ | |
| .btn { | |
| display: inline-flex; | |
| align-items: center; | |
| justify-content: center; | |
| gap: 9px; | |
| padding: 8px 16px; | |
| font-size: 0.9rem; | |
| font-weight: 700; | |
| border-radius: var(--radius-sm); | |
| cursor: pointer; | |
| border: none; | |
| text-decoration: none; | |
| transition: all 0.15s ease; | |
| font-family: inherit; | |
| line-height: 1; | |
| } | |
| .btn svg { | |
| flex-shrink: 0; | |
| display: inline-block; | |
| } | |
| .btn-primary { | |
| background: var(--btn-primary-bg); | |
| color: var(--btn-primary-text); | |
| box-shadow: 0 2px 8px rgba(139, 68, 235, 0.25); | |
| } | |
| .btn-primary:hover { | |
| background: #7835D4; | |
| } | |
| .btn-outline { | |
| background: var(--surface); | |
| color: var(--text-main); | |
| border: 1px solid var(--border); | |
| } | |
| .btn-outline:hover { | |
| border-color: var(--border-hover); | |
| background: #FFFFFF; | |
| } | |
| /* Animated Live Database Ticker Button */ | |
| .btn-ticker { | |
| min-width: 145px; | |
| height: 38px; | |
| overflow: hidden; | |
| position: relative; | |
| padding: 8px 14px; | |
| justify-content: center; | |
| border-radius: var(--radius-sm); | |
| transition: all 0.25s ease; | |
| } | |
| .ticker-icon { | |
| display: inline-flex; | |
| align-items: center; | |
| justify-content: center; | |
| transition: transform 0.3s ease; | |
| flex-shrink: 0; | |
| } | |
| .ticker-text { | |
| display: inline-block; | |
| white-space: nowrap; | |
| transition: opacity 0.28s ease, transform 0.28s ease; | |
| font-size: 0.88rem; | |
| font-weight: 700; | |
| } | |
| .ticker-text.fade-out { | |
| opacity: 0; | |
| transform: translateY(-8px); | |
| } | |
| .ticker-text.fade-in { | |
| opacity: 1; | |
| transform: translateY(0); | |
| } | |
| .btn-icon { | |
| background: none; | |
| border: none; | |
| color: var(--text-muted); | |
| font-size: 1.1rem; | |
| cursor: pointer; | |
| } | |
| .btn-icon:hover { color: var(--text-main); } | |
| /* Main Content */ | |
| .main { | |
| padding: 40px 0 80px; | |
| } | |
| /* Hero */ | |
| .hero-split { | |
| display: flex; | |
| justify-content: space-between; | |
| align-items: center; | |
| gap: 30px; | |
| margin-bottom: 28px; | |
| padding-bottom: 20px; | |
| border-bottom: 1px solid var(--border); | |
| } | |
| .hero-text { | |
| flex: 1; | |
| } | |
| .hero-title-wrap { | |
| display: inline-flex; | |
| align-items: center; | |
| gap: 10px; | |
| font-size: 1.85rem; | |
| font-weight: 700; | |
| letter-spacing: -0.02em; | |
| margin-bottom: 8px; | |
| color: var(--text-main); | |
| } | |
| .hero-title-icon { | |
| display: inline-flex; | |
| align-items: center; | |
| justify-content: center; | |
| flex-shrink: 0; | |
| } | |
| .hero-desc { | |
| font-size: 0.95rem; | |
| line-height: 1.6; | |
| color: var(--text-muted); | |
| max-width: 580px; | |
| } | |
| .hero-graphic { | |
| max-width: 300px; | |
| flex-shrink: 0; | |
| } | |
| .hero-img { | |
| width: 100%; | |
| height: auto; | |
| display: block; | |
| object-fit: contain; | |
| filter: drop-shadow(0 8px 20px rgba(139, 68, 235, 0.15)); | |
| } | |
| @media (max-width: 768px) { | |
| .hero-split { | |
| flex-direction: column-reverse; | |
| align-items: flex-start; | |
| gap: 16px; | |
| } | |
| .hero-graphic { | |
| max-width: 220px; | |
| margin: 0 auto; | |
| } | |
| } | |
| /* Toolbar & Filters */ | |
| .toolbar { | |
| margin-bottom: 16px; | |
| display: flex; | |
| flex-direction: column; | |
| gap: 12px; | |
| } | |
| .search-box { | |
| position: relative; | |
| width: 100%; | |
| display: flex; | |
| align-items: center; | |
| } | |
| .search-icon { | |
| position: absolute; | |
| left: 14px; | |
| color: var(--text-dim); | |
| pointer-events: none; | |
| } | |
| .search-box input { | |
| width: 100%; | |
| padding: 11px 40px 11px 40px; | |
| background: var(--surface); | |
| border: 1px solid var(--border); | |
| border-radius: var(--radius-md); | |
| color: var(--text-main); | |
| font-size: 0.9rem; | |
| font-family: inherit; | |
| outline: none; | |
| box-shadow: 0 1px 3px rgba(139, 68, 235, 0.03); | |
| transition: all 0.15s ease; | |
| } | |
| .search-box input:focus { | |
| border-color: var(--btn-primary-bg); | |
| box-shadow: 0 0 0 3px rgba(139, 68, 235, 0.1); | |
| } | |
| .btn-clear { | |
| position: absolute; | |
| right: 12px; | |
| background: none; | |
| border: none; | |
| color: var(--text-dim); | |
| font-size: 0.85rem; | |
| cursor: pointer; | |
| display: none; | |
| } | |
| .btn-clear:hover { color: var(--text-main); } | |
| /* Category Chips */ | |
| .category-chips { | |
| display: flex; | |
| gap: 6px; | |
| overflow-x: auto; | |
| padding: 2px 0 4px; | |
| scrollbar-width: none; | |
| } | |
| .category-chips::-webkit-scrollbar { display: none; } | |
| .chip { | |
| white-space: nowrap; | |
| padding: 6px 14px; | |
| font-size: 0.82rem; | |
| font-weight: 500; | |
| color: var(--text-muted); | |
| background: rgba(255, 255, 255, 0.5); | |
| border: 1px solid var(--border); | |
| border-radius: var(--radius-full, 9999px); | |
| cursor: pointer; | |
| transition: all 0.15s ease; | |
| font-family: inherit; | |
| } | |
| .chip:hover { | |
| color: var(--text-main); | |
| background: #FFFFFF; | |
| border-color: var(--border-hover); | |
| } | |
| .chip.active { | |
| background: #8B44EB; | |
| color: #FFFFFF; | |
| border-color: #8B44EB; | |
| box-shadow: 0 2px 6px rgba(139, 68, 235, 0.25); | |
| } | |
| /* List Meta */ | |
| .list-meta { | |
| display: flex; | |
| justify-content: space-between; | |
| align-items: center; | |
| margin-bottom: 16px; | |
| padding: 0 2px; | |
| } | |
| .meta-label { | |
| font-size: 0.8rem; | |
| font-weight: 500; | |
| color: var(--text-dim); | |
| } | |
| /* Status Bar */ | |
| .status-bar { | |
| display: flex; | |
| align-items: center; | |
| gap: 8px; | |
| font-size: 0.82rem; | |
| color: var(--text-muted); | |
| margin-bottom: 16px; | |
| padding: 8px 12px; | |
| background: var(--surface); | |
| border: 1px solid var(--border); | |
| border-radius: var(--radius-sm); | |
| } | |
| .spinner { | |
| width: 12px; | |
| height: 12px; | |
| border: 2px solid var(--border); | |
| border-top-color: var(--btn-primary-bg); | |
| border-radius: 50%; | |
| animation: spin 0.6s linear infinite; | |
| } | |
| @keyframes spin { to { transform: rotate(360deg); } } | |
| /* Groups Grid */ | |
| .groups-grid { | |
| display: grid; | |
| grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); | |
| gap: 12px; | |
| } | |
| /* Load More */ | |
| .load-more-wrap { | |
| display: flex; | |
| justify-content: center; | |
| margin-top: 32px; | |
| padding-bottom: 20px; | |
| } | |
| #btn-see-more { | |
| padding: 12px 32px; | |
| font-size: 0.95rem; | |
| font-weight: 700; | |
| border-radius: 9999px; | |
| box-shadow: 0 2px 8px rgba(139, 68, 235, 0.08); | |
| } | |
| #btn-see-more:hover { | |
| background: #8B44EB; | |
| color: #FFFFFF; | |
| border-color: #8B44EB; | |
| } | |
| /* Group Card */ | |
| .group-card { | |
| background: var(--surface); | |
| border: 1px solid var(--border); | |
| border-radius: var(--radius-md); | |
| padding: 16px; | |
| display: flex; | |
| flex-direction: column; | |
| justify-content: space-between; | |
| box-shadow: 0 2px 6px rgba(139, 68, 235, 0.04); | |
| transition: border-color 0.15s ease, transform 0.15s ease; | |
| } | |
| .group-card:hover { | |
| border-color: var(--border-hover); | |
| transform: translateY(-1px); | |
| box-shadow: 0 4px 12px rgba(139, 68, 235, 0.08); | |
| } | |
| .card-top { | |
| margin-bottom: 14px; | |
| } | |
| .card-header-row { | |
| display: flex; | |
| align-items: center; | |
| gap: 12px; | |
| margin-bottom: 10px; | |
| } | |
| .card-avatar-wrap { | |
| width: 46px; | |
| height: 46px; | |
| border-radius: 50%; | |
| overflow: hidden; | |
| flex-shrink: 0; | |
| background: linear-gradient(135deg, #f09433 0%, #e6683c 25%, #dc2743 50%, #cc2366 75%, #bc1888 100%); | |
| padding: 2.5px; | |
| display: flex; | |
| align-items: center; | |
| justify-content: center; | |
| box-sizing: border-box; | |
| } | |
| .card-avatar { | |
| width: 100%; | |
| height: 100%; | |
| object-fit: cover; | |
| border-radius: 50%; | |
| background: #FFFFFF; | |
| border: 2px solid #FFFFFF; | |
| box-sizing: border-box; | |
| } | |
| .card-avatar-fallback-wrapper { | |
| width: 100%; | |
| height: 100%; | |
| border-radius: 50%; | |
| display: flex; | |
| align-items: center; | |
| justify-content: center; | |
| border: 2px solid #FFFFFF; | |
| box-sizing: border-box; | |
| overflow: hidden; | |
| background: #FFFFFF; | |
| } | |
| .aesthetic-avatar { | |
| width: 100%; | |
| height: 100%; | |
| border-radius: 50%; | |
| display: flex; | |
| align-items: center; | |
| justify-content: center; | |
| position: relative; | |
| overflow: hidden; | |
| box-sizing: border-box; | |
| transition: transform 0.25s cubic-bezier(0.34, 1.56, 0.64, 1); | |
| } | |
| .avatar-glass-shine { | |
| position: absolute; | |
| top: 0; | |
| left: 0; | |
| right: 0; | |
| height: 48%; | |
| background: linear-gradient(180deg, rgba(255, 255, 255, 0.4) 0%, rgba(255, 255, 255, 0) 100%); | |
| border-top-left-radius: 50%; | |
| border-top-right-radius: 50%; | |
| pointer-events: none; | |
| } | |
| .avatar-monogram { | |
| color: #FFFFFF; | |
| font-family: var(--font-sans); | |
| font-size: 0.82rem; | |
| font-weight: 800; | |
| letter-spacing: -0.5px; | |
| text-shadow: 0 1px 3px rgba(0, 0, 0, 0.3); | |
| z-index: 1; | |
| user-select: none; | |
| } | |
| .avatar-vector-svg { | |
| display: block; | |
| filter: drop-shadow(0 1px 3px rgba(0, 0, 0, 0.25)); | |
| z-index: 1; | |
| transition: transform 0.25s cubic-bezier(0.34, 1.56, 0.64, 1); | |
| } | |
| .group-card:hover .aesthetic-avatar { | |
| transform: scale(1.08); | |
| } | |
| .group-card:hover .avatar-vector-svg { | |
| transform: scale(1.15) rotate(4deg); | |
| } | |
| .card-badges { | |
| display: flex; | |
| flex-wrap: wrap; | |
| gap: 6px; | |
| align-items: center; | |
| } | |
| .tag { | |
| font-size: 0.72rem; | |
| font-weight: 600; | |
| color: var(--tag-text); | |
| padding: 3px 8px; | |
| background: var(--tag-bg); | |
| border-radius: 9999px; | |
| } | |
| .tag-members { | |
| background: rgba(139, 68, 235, 0.1); | |
| color: #8B44EB; | |
| } | |
| .card-title { | |
| font-size: 1.02rem; | |
| font-weight: 700; | |
| color: var(--text-main); | |
| line-height: 1.3; | |
| margin-bottom: 4px; | |
| } | |
| .card-link-preview { | |
| font-size: 0.78rem; | |
| color: var(--text-dim); | |
| font-family: monospace; | |
| overflow: hidden; | |
| text-overflow: ellipsis; | |
| white-space: nowrap; | |
| } | |
| .card-bottom { | |
| display: flex; | |
| justify-content: space-between; | |
| align-items: center; | |
| padding-top: 12px; | |
| border-top: 1px solid var(--border); | |
| } | |
| .card-source { | |
| font-size: 0.75rem; | |
| color: var(--text-dim); | |
| } | |
| .card-join { | |
| font-size: 0.8rem; | |
| font-weight: 600; | |
| color: var(--primary); | |
| text-decoration: underline; | |
| text-underline-offset: 3px; | |
| transition: color 0.15s ease, opacity 0.15s ease; | |
| } | |
| .card-join:hover { | |
| color: var(--primary-hover); | |
| opacity: 0.8; | |
| } | |
| /* Empty State */ | |
| .empty-state { | |
| text-align: center; | |
| padding: 48px 0; | |
| color: var(--text-dim); | |
| font-size: 0.9rem; | |
| } | |
| /* Modal */ | |
| .modal { | |
| position: fixed; | |
| top: 0; | |
| left: 0; | |
| width: 100%; | |
| height: 100%; | |
| background: rgba(36, 20, 50, 0.4); | |
| backdrop-filter: blur(4px); | |
| z-index: 100; | |
| display: none; | |
| justify-content: center; | |
| align-items: center; | |
| padding: 20px; | |
| } | |
| .modal-content { | |
| background: var(--surface); | |
| border: 1px solid var(--border); | |
| border-radius: var(--radius-lg); | |
| width: 100%; | |
| max-width: 440px; | |
| padding: 24px; | |
| box-shadow: 0 10px 30px rgba(139, 68, 235, 0.15); | |
| } | |
| .modal-head { | |
| display: flex; | |
| justify-content: space-between; | |
| align-items: center; | |
| margin-bottom: 18px; | |
| } | |
| .modal-head h2 { | |
| font-size: 1.1rem; | |
| font-weight: 600; | |
| } | |
| .field { | |
| margin-bottom: 14px; | |
| } | |
| .field label { | |
| display: block; | |
| font-size: 0.8rem; | |
| font-weight: 500; | |
| color: var(--text-muted); | |
| margin-bottom: 5px; | |
| } | |
| .field input, .field select { | |
| width: 100%; | |
| padding: 9px 12px; | |
| background: #FAF5FD; | |
| border: 1px solid var(--border); | |
| border-radius: var(--radius-sm); | |
| color: var(--text-main); | |
| font-size: 0.88rem; | |
| font-family: inherit; | |
| outline: none; | |
| } | |
| .field input:focus, .field select:focus { | |
| border-color: var(--btn-primary-bg); | |
| } | |
| .modal-foot { | |
| display: flex; | |
| justify-content: flex-end; | |
| gap: 8px; | |
| margin-top: 20px; | |
| } | |
| /* Toast */ | |
| .toast { | |
| position: fixed; | |
| bottom: 20px; | |
| right: 20px; | |
| background: var(--surface); | |
| border: 1px solid var(--border); | |
| color: var(--text-main); | |
| padding: 10px 16px; | |
| border-radius: var(--radius-sm); | |
| font-size: 0.85rem; | |
| box-shadow: 0 4px 16px rgba(139, 68, 235, 0.12); | |
| opacity: 0; | |
| transform: translateY(10px); | |
| transition: all 0.2s ease; | |
| pointer-events: none; | |
| z-index: 200; | |
| } | |
| .toast.show { | |
| opacity: 1; | |
| transform: translateY(0); | |
| } | |
| /* Lucky Pick Highlight Animation */ | |
| .group-card.random-highlight { | |
| border-color: var(--btn-primary-bg) ; | |
| box-shadow: 0 0 0 3px rgba(139, 68, 235, 0.35), 0 8px 25px rgba(139, 68, 235, 0.2) ; | |
| transform: translateY(-4px) scale(1.02); | |
| transition: all 0.3s cubic-bezier(0.34, 1.56, 0.64, 1); | |
| } | |
| /* ========================================================================== | |
| SEO Informational & FAQ Section | |
| ========================================================================== */ | |
| .seo-section { | |
| margin-top: 60px; | |
| padding-top: 30px; | |
| border-top: 1px solid var(--border); | |
| } | |
| .seo-card { | |
| background: #FFFFFF; | |
| border: 1px solid var(--border); | |
| border-radius: var(--radius-lg); | |
| padding: 36px 32px; | |
| box-shadow: var(--shadow-sm); | |
| } | |
| .seo-card h2 { | |
| font-size: 1.45rem; | |
| font-weight: 700; | |
| color: var(--text-main); | |
| letter-spacing: -0.01em; | |
| margin-bottom: 12px; | |
| } | |
| .seo-desc { | |
| font-size: 0.94rem; | |
| line-height: 1.65; | |
| color: var(--text-muted); | |
| margin-bottom: 28px; | |
| } | |
| .seo-grid { | |
| display: grid; | |
| grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); | |
| gap: 20px; | |
| margin-bottom: 36px; | |
| } | |
| .seo-feature { | |
| background: #FAF5FD; | |
| border: 1px solid var(--border); | |
| border-radius: var(--radius-md); | |
| padding: 20px; | |
| transition: transform 0.2s ease; | |
| } | |
| .seo-feature:hover { | |
| transform: translateY(-2px); | |
| } | |
| .seo-feature-icon { | |
| font-size: 1.5rem; | |
| margin-bottom: 10px; | |
| } | |
| .seo-feature h3 { | |
| font-size: 1.05rem; | |
| font-weight: 700; | |
| color: var(--text-main); | |
| margin-bottom: 8px; | |
| } | |
| .seo-feature p { | |
| font-size: 0.86rem; | |
| line-height: 1.55; | |
| color: var(--text-muted); | |
| } | |
| /* FAQ Accordions */ | |
| .faq-container h3 { | |
| font-size: 1.2rem; | |
| font-weight: 700; | |
| color: var(--text-main); | |
| margin-bottom: 16px; | |
| } | |
| .faq-item { | |
| border: 1px solid var(--border); | |
| border-radius: var(--radius-sm); | |
| margin-bottom: 10px; | |
| background: #FFFFFF; | |
| overflow: hidden; | |
| transition: all 0.2s ease; | |
| } | |
| .faq-item[open] { | |
| border-color: var(--border-hover); | |
| background: #FAF5FD; | |
| } | |
| .faq-question { | |
| padding: 14px 18px; | |
| font-size: 0.92rem; | |
| font-weight: 600; | |
| color: var(--text-main); | |
| cursor: pointer; | |
| user-select: none; | |
| list-style: none; | |
| display: flex; | |
| justify-content: space-between; | |
| align-items: center; | |
| } | |
| .faq-question::-webkit-details-marker { | |
| display: none; | |
| } | |
| .faq-question::after { | |
| content: '+'; | |
| font-size: 1.2rem; | |
| font-weight: 700; | |
| color: var(--btn-primary-bg); | |
| transition: transform 0.2s ease; | |
| } | |
| .faq-item[open] .faq-question::after { | |
| content: '−'; | |
| } | |
| .faq-answer { | |
| padding: 0 18px 16px; | |
| font-size: 0.88rem; | |
| line-height: 1.6; | |
| color: var(--text-muted); | |
| } | |
| .faq-answer code { | |
| background: rgba(139, 68, 235, 0.1); | |
| color: var(--btn-primary-bg); | |
| padding: 2px 6px; | |
| border-radius: 4px; | |
| font-size: 0.82rem; | |
| } | |
| /* ========================================================================== | |
| Super SEO-Rich Modern Footer | |
| ========================================================================== */ | |
| .footer { | |
| background: #FFFFFF; | |
| border-top: 1px solid var(--border); | |
| padding: 60px 0 30px; | |
| margin-top: 60px; | |
| } | |
| .footer-grid { | |
| display: grid; | |
| grid-template-columns: 1.5fr 1fr 1.3fr 1fr; | |
| gap: 40px; | |
| margin-bottom: 40px; | |
| } | |
| @media (max-width: 900px) { | |
| .footer-grid { | |
| grid-template-columns: 1fr 1fr; | |
| gap: 30px; | |
| } | |
| } | |
| @media (max-width: 600px) { | |
| .footer-grid { | |
| grid-template-columns: 1fr; | |
| gap: 25px; | |
| } | |
| } | |
| .footer-brand-col { | |
| display: flex; | |
| flex-direction: column; | |
| gap: 12px; | |
| } | |
| .footer-brand { | |
| display: inline-flex; | |
| align-items: center; | |
| gap: 9px; | |
| text-decoration: none; | |
| } | |
| .footer-tagline { | |
| font-size: 0.88rem; | |
| line-height: 1.55; | |
| color: var(--text-muted); | |
| } | |
| .footer-badge-live { | |
| display: inline-flex; | |
| align-items: center; | |
| background: #FAF5FD; | |
| border: 1px solid var(--border); | |
| padding: 6px 14px; | |
| border-radius: 9999px; | |
| width: fit-content; | |
| margin-top: 6px; | |
| } | |
| .live-badge-text { | |
| font-size: 0.78rem; | |
| font-weight: 700; | |
| color: var(--text-main); | |
| } | |
| .footer-heading { | |
| font-size: 0.92rem; | |
| font-weight: 700; | |
| text-transform: uppercase; | |
| letter-spacing: 0.05em; | |
| color: var(--text-main); | |
| margin-bottom: 16px; | |
| } | |
| .footer-links { | |
| list-style: none; | |
| padding: 0; | |
| margin: 0; | |
| display: flex; | |
| flex-direction: column; | |
| gap: 10px; | |
| } | |
| .footer-links li a { | |
| font-size: 0.86rem; | |
| color: var(--text-muted); | |
| text-decoration: none; | |
| transition: color 0.15s ease, transform 0.15s ease; | |
| display: inline-block; | |
| } | |
| .footer-links li a:hover { | |
| color: var(--btn-primary-bg); | |
| transform: translateX(2px); | |
| } | |
| /* Footer Tag Cloud */ | |
| .footer-tag-cloud { | |
| display: flex; | |
| flex-wrap: wrap; | |
| gap: 6px; | |
| } | |
| .footer-chip { | |
| background: #FAF5FD; | |
| border: 1px solid var(--border); | |
| color: var(--text-main); | |
| padding: 4px 9px; | |
| border-radius: 6px; | |
| font-size: 0.75rem; | |
| font-weight: 600; | |
| cursor: pointer; | |
| transition: all 0.15s ease; | |
| } | |
| .footer-chip:hover { | |
| background: var(--btn-primary-bg); | |
| color: #FFFFFF; | |
| border-color: var(--btn-primary-bg); | |
| } | |
| /* Disclaimer */ | |
| .footer-disclaimer { | |
| background: #FAF5FD; | |
| border: 1px solid var(--border); | |
| border-radius: var(--radius-sm); | |
| padding: 14px 18px; | |
| font-size: 0.76rem; | |
| line-height: 1.5; | |
| color: var(--text-muted); | |
| margin-bottom: 24px; | |
| } | |
| /* Bottom Bar */ | |
| .footer-bottom { | |
| display: flex; | |
| justify-content: space-between; | |
| align-items: center; | |
| padding-top: 20px; | |
| border-top: 1px solid var(--border); | |
| font-size: 0.82rem; | |
| color: var(--text-muted); | |
| flex-wrap: wrap; | |
| gap: 12px; | |
| } | |
| .footer-bottom-links a { | |
| color: var(--btn-primary-bg); | |
| text-decoration: none; | |
| font-weight: 600; | |
| } | |
| .footer-bottom-links a:hover { | |
| text-decoration: underline; | |
| } | |