-
-
-

-
- {% if profile.primary_game %}
-
{{ profile.primary_game.name }}
- {% endif %}
-
{{ profile.user.first_name }} {{ profile.user.last_name|slice:":1" }}.
-
{{ profile.location_city }}
+
+
+
+
+
No comms
+
Silence in the lobby leads to chaos in the match.
-
{{ profile.platform|upper|default:"BEAUTY" }} • {{ profile.rank|default:"Enthusiast" }}
-
{{ profile.bio }}
-
-
- {% for intent in profile.intents.all %}
-
{{ intent.name }}
- {% endfor %}
+
+
+
Role chaos
+
Three main DPS and no support? Every single time.
+
-
-
-
View Full Roster
+
+
+
Rank mismatch
+
Getting paired with players who aren't on your level.
+
+
+
+
+
Toxic lobbies
+
Dealing with griefers and throwers instead of playing.
+
+
+
Roster fixes that.
+
- {% empty %}
-
-
No profiles found yet.
+
+
+
+
+
+
+
+
+
How it works
+
Simple, automated, and effective.
+
+
+
+
+
01
+
Build your player profile
+
Tell us your game, rank, role, schedule, and playstyle. It takes 2 minutes.
+
- {% endfor %}
+
+
+
02
+
Get matched intelligently
+
Our algorithm finds players with overlapping schedules and compatible skill levels.
+
+
+
+
+
03
+
Lock in your squad
+
Message your matches, schedule sessions, and start climbing the ranks together.
+
+
+
+
+
+
+
+
+
+
+
The Roster Edge
+
Why settling for standard matchmaking is losing you Elo.
+
+
+
+
+
+
+
Compatibility Matching
+
+
+
+
+
+
+
Role Balancing
+
+
Limited
+
+
+
+
+
Schedule Overlap
+
Manual
+
+
+
+
+
+
Squad Building
+
Chaotic
+
+
+
+
+
+
Structured Sessions
+
+
+
+
+
+
+
+
+
+
+
+
Your next win starts with
the right squad.
+
diff --git a/core/templates/core/profile_detail.html b/core/templates/core/profile_detail.html
index 5eb016d..38a94a6 100644
--- a/core/templates/core/profile_detail.html
+++ b/core/templates/core/profile_detail.html
@@ -86,14 +86,14 @@
-
+
{% for tag in target_user.profile.value_tags.all %}
#{{ tag.name }}
{% empty %}
- No values shared
+ No traits shared
{% endfor %}
@@ -111,7 +111,7 @@
{% endif %}
- {{ target_user.profile.accountability_streak }} 🔥 Streak
+ {{ target_user.profile.win_streak }} 🔥 Win Streak
diff --git a/core/views.py b/core/views.py
index 5c7a769..210be49 100644
--- a/core/views.py
+++ b/core/views.py
@@ -29,7 +29,7 @@ def get_dashboard_context(request):
'pending_connections': ConnectionRequest.objects.filter(to_user=request.user, status='pending').count(),
'upcoming_events_count': request.user.rsvps.filter(status='going', event__start_datetime__gt=timezone.now()).count(),
'completion_percentage': request.user.profile.profile_completion_percentage,
- 'streak': request.user.profile.accountability_streak,
+ 'streak': request.user.profile.win_streak,
'followers_count': request.user.profile.followers_count,
'following_count': request.user.profile.following_count,
}
@@ -53,6 +53,7 @@ def get_dashboard_context(request):
"following_ids": following_ids,
"post_types": Post.POST_TYPE_CHOICES,
"current_time": timezone.now(),
+ "deployment_timestamp": int(timezone.now().timestamp()),
"project_name": "Roster",
}
@@ -62,10 +63,10 @@ def home(request):
# Simple logic to seed data for the first run
if not Intent.objects.exists():
intents_data = [
- ('Friendship', 'bi-people'),
- ('Networking', 'bi-briefcase'),
- ('Activity Partner', 'bi-bicycle'),
- ('Accountability', 'bi-check-circle')
+ ('Competitive', 'bi-trophy'),
+ ('Casual/Social', 'bi-controller'),
+ ('Ranked Climb', 'bi-graph-up-arrow'),
+ ('Co-op/Story', 'bi-people-fill')
]
for name, icon in intents_data:
Intent.objects.create(name=name, icon=icon)
@@ -76,8 +77,7 @@ def home(request):
p = Profile.objects.create(
user=demo_user,
professional_headline='Architect & Urban Planner',
- transition_status='new-in-town',
- bio='Passionate about sustainable cities. Recently moved here from Chicago and looking for local communities.',
+ bio='Passionate about competitive FPS. Recently moved here and looking for a long-term squad.',
location_city='Austin, TX',
)
p.intents.add(Intent.objects.get(name='Networking'))
@@ -86,8 +86,7 @@ def home(request):
p2 = Profile.objects.create(
user=demo_user2,
professional_headline='UX Researcher | Growth Mindset',
- transition_status='post-divorce',
- bio='Rediscovering my love for hiking and photography. Seeking authentic connections and shared growth.',
+ bio='Rediscovering my love for MOBAs. Seeking competitive matches and team coordination.',
location_city='Austin, TX',
)
p2.intents.add(Intent.objects.get(name='Friendship'))
@@ -122,7 +121,7 @@ def create_post(request):
if request.method == 'POST':
content = request.POST.get('content')
image = request.FILES.get('image')
- post_type = request.POST.get('post_type', 'reflection')
+ post_type = request.POST.get('post_type', 'lfg')
if content or image:
Post.objects.create(author=request.user, content=content, image=image, post_type=post_type)
return redirect('home')
@@ -354,7 +353,7 @@ def matches(request, tab=None):
if sort_by == 'newest':
queryset = queryset.order_by('-date_joined')
elif sort_by == 'aligned':
- queryset = queryset.order_by('-profile__accountability_streak')
+ queryset = queryset.order_by('-profile__win_streak')
queryset = queryset.select_related('profile').prefetch_related('profile__intents').distinct()
diff --git a/static/css/custom.css b/static/css/custom.css
index d534da1..531dc7c 100644
--- a/static/css/custom.css
+++ b/static/css/custom.css
@@ -1,21 +1,21 @@
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&family=Playfair+Display:ital,wght@0,400;0,700;1,400&display=swap');
:root {
- --r-navy-deep: #050A18;
- --r-navy-soft: #0C162D;
- --r-cyan: #00B4DB;
- --r-cyan-glow: rgba(0, 180, 219, 0.4);
- --r-neon-green: #39FF14;
- --r-neon-glow: rgba(57, 255, 20, 0.4);
- --r-silver: #E0E0E0;
- --r-silver-dim: #A0A0A0;
- --r-glass-bg: rgba(255, 255, 255, 0.03);
- --r-glass-border: rgba(224, 224, 224, 0.2);
- --r-transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
+ --r-navy-deep: #020b1a;
+ --r-navy-soft: #0a192f;
+ --r-cyan: #00d2ff;
+ --r-cyan-glow: rgba(0, 210, 255, 0.45);
+ --r-neon-green: #14ff00;
+ --r-neon-glow: rgba(20, 255, 0, 0.4);
+ --r-silver: #e6e7e8;
+ --r-silver-dim: #9ca3af;
+ --r-glass-bg: rgba(255, 255, 255, 0.04);
+ --r-glass-border: rgba(224, 224, 224, 0.15);
+ --r-transition: all 0.4s cubic-bezier(0.165, 0.84, 0.44, 1);
}
body {
- background: radial-gradient(circle at top center, #101B38 0%, var(--r-navy-deep) 100%);
+ background: radial-gradient(circle at 50% 0%, #0d2137 0%, var(--r-navy-deep) 100%);
background-attachment: fixed;
color: var(--r-silver);
font-family: 'Inter', sans-serif;
@@ -27,144 +27,368 @@ body {
h1, h2, h3, h4, .brand-font {
font-family: 'Playfair Display', serif;
- letter-spacing: -0.01em;
+ letter-spacing: -0.02em;
}
/* Metallic Text Effect */
.text-metallic {
- background: linear-gradient(135deg, #FFFFFF 0%, var(--r-silver) 50%, var(--r-silver-dim) 100%);
+ background: linear-gradient(to bottom, #ffffff 0%, var(--r-silver) 50%, #888888 100%);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
+ filter: drop-shadow(0 2px 4px rgba(0,0,0,0.3));
}
/* Glassmorphism Navbar */
.navbar {
- background: rgba(5, 10, 24, 0.85) !important;
- backdrop-filter: blur(20px);
- -webkit-backdrop-filter: blur(20px);
+ background: rgba(2, 11, 26, 0.8) !important;
+ backdrop-filter: blur(24px) saturate(180%);
+ -webkit-backdrop-filter: blur(24px) saturate(180%);
border-bottom: 1px solid var(--r-glass-border);
- padding: 1rem 0;
+ padding: 0.75rem 0;
}
.nav-link {
color: var(--r-silver-dim) !important;
- font-weight: 500;
+ font-weight: 600;
text-transform: uppercase;
- font-size: 0.85rem;
- letter-spacing: 1px;
+ font-size: 0.75rem;
+ letter-spacing: 1.5px;
transition: var(--r-transition);
+ opacity: 0.8;
}
.nav-link:hover, .nav-link.active {
color: var(--r-cyan) !important;
- text-shadow: 0 0 15px var(--r-cyan-glow);
+ opacity: 1;
+ text-shadow: 0 0 20px var(--r-cyan-glow);
}
/* Custom Buttons */
.btn-neon {
- background: linear-gradient(135deg, var(--r-cyan) 0%, #0083B0 100%);
- color: white !important;
+ background: linear-gradient(135deg, var(--r-cyan) 0%, #0076ad 100%);
+ color: #020b1a !important;
border: none;
- font-weight: 700;
- padding: 0.9rem 2.2rem;
- border-radius: 12px;
+ font-weight: 800;
+ padding: 0.9rem 2.4rem;
+ border-radius: 10px;
transition: var(--r-transition);
text-transform: uppercase;
- letter-spacing: 1px;
- box-shadow: 0 8px 20px var(--r-cyan-glow);
+ letter-spacing: 1.5px;
+ box-shadow: 0 0 20px var(--r-cyan-glow);
+ position: relative;
+ overflow: hidden;
+}
+
+.btn-neon::after {
+ content: '';
+ position: absolute;
+ top: -50%;
+ left: -50%;
+ width: 200%;
+ height: 200%;
+ background: linear-gradient(45deg, transparent, rgba(255,255,255,0.2), transparent);
+ transform: rotate(45deg);
+ transition: 0.8s;
+}
+
+.btn-neon:hover::after {
+ left: 120%;
}
.btn-neon:hover {
- transform: translateY(-3px);
- box-shadow: 0 12px 30px var(--r-cyan-glow);
+ transform: translateY(-4px) scale(1.02);
+ box-shadow: 0 0 35px var(--r-cyan-glow);
+ color: white !important;
}
.btn-outline-cg {
- border: 2px solid var(--r-silver-dim);
+ border: 1.5px solid var(--r-glass-border);
color: var(--r-silver);
- font-weight: 600;
- padding: 0.8rem 2rem;
- border-radius: 12px;
+ font-weight: 700;
+ padding: 0.8rem 2.2rem;
+ border-radius: 10px;
transition: var(--r-transition);
+ background: var(--r-glass-bg);
}
.btn-outline-cg:hover {
border-color: var(--r-neon-green);
- color: var(--r-neon-green);
- box-shadow: 0 0 20px var(--r-neon-glow);
- background: transparent;
+ color: var(--r-neon-green) !important;
+ box-shadow: 0 0 25px var(--r-neon-glow);
+ background: rgba(20, 255, 0, 0.05);
+ transform: translateY(-2px);
+}
+
+/* Primary CG Button (Follow/Post) */
+.btn-primary-cg {
+ background: var(--r-cyan);
+ color: #020b1a !important;
+ font-weight: 800;
+ border: none;
+ border-radius: 8px;
+ padding: 0.5rem 1.5rem;
+ transition: var(--r-transition);
+}
+
+.btn-primary-cg:hover {
+ box-shadow: 0 0 15px var(--r-cyan-glow);
+ transform: scale(1.05);
}
/* Cards & Panels */
-.card, .profile-card, .glass-panel {
- background: rgba(255, 255, 255, 0.02) !important;
- backdrop-filter: blur(15px);
- -webkit-backdrop-filter: blur(15px);
+.card, .profile-card, .glass-panel, .stat-widget {
+ background: rgba(10, 25, 47, 0.4) !important;
+ backdrop-filter: blur(16px);
+ -webkit-backdrop-filter: blur(16px);
border: 1px solid var(--r-glass-border) !important;
- border-radius: 28px;
+ border-radius: 20px;
transition: var(--r-transition);
color: var(--r-silver) !important;
+ box-shadow: 0 10px 30px rgba(0,0,0,0.2);
}
.card:hover {
- border-color: var(--r-cyan) !important;
- box-shadow: 0 20px 50px rgba(0, 0, 0, 0.5);
- background: rgba(255, 255, 255, 0.04) !important;
+ border-color: rgba(0, 210, 255, 0.3) !important;
+ background: rgba(10, 25, 47, 0.6) !important;
+ transform: translateY(-5px);
+ box-shadow: 0 20px 40px rgba(0,0,0,0.4);
+}
+
+/* Badges */
+.intent-badge, .post-badge {
+ background: rgba(20, 255, 0, 0.1);
+ color: var(--r-neon-green);
+ border: 1px solid rgba(20, 255, 0, 0.3);
+ padding: 0.25rem 0.75rem;
+ border-radius: 6px;
+ font-size: 0.7rem;
+ font-weight: 700;
+ text-transform: uppercase;
+ letter-spacing: 0.5px;
}
/* Hero Title */
.hero-title {
- font-size: 5rem;
- font-weight: 800;
- line-height: 1.1;
- margin-bottom: 2rem;
- background: linear-gradient(135deg, #FFFFFF 0%, var(--r-silver) 40%, var(--r-cyan) 100%);
+ font-size: 6rem;
+ font-weight: 900;
+ line-height: 1;
+ margin-bottom: 2.5rem;
+ background: linear-gradient(135deg, #ffffff 0%, var(--r-silver) 30%, var(--r-cyan) 100%);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
+ filter: drop-shadow(0 10px 20px rgba(0,0,0,0.4));
}
+@media (max-width: 991px) {
+ .hero-title { font-size: 3.5rem; }
+}
+
+/* Sidebar Nav */
+.sidebar-nav .nav-link {
+ display: flex;
+ align-items: center;
+ gap: 12px;
+ padding: 0.8rem 1rem;
+ border-radius: 10px;
+ margin-bottom: 0.5rem;
+ text-transform: none;
+ font-size: 0.9rem;
+ letter-spacing: 0;
+}
+
+.sidebar-nav .nav-link i {
+ font-size: 1.2rem;
+}
+
+.sidebar-nav .nav-link:hover, .sidebar-nav .nav-link.active {
+ background: rgba(0, 210, 255, 0.1);
+ color: var(--r-cyan) !important;
+ border-left: 3px solid var(--r-cyan);
+}
+
+/* Horizontal Scroll for Suggestions */
+.horizontal-scroll {
+ display: flex;
+ gap: 1.5rem;
+ overflow-x: auto;
+ padding: 1rem 0 2rem;
+ scrollbar-width: none;
+}
+
+.horizontal-scroll::-webkit-scrollbar { display: none; }
+
+.suggestion-card {
+ min-width: 160px;
+ background: rgba(255,255,255,0.02);
+ padding: 1.5rem;
+ border-radius: 20px;
+ border: 1px solid var(--r-glass-border);
+ transition: var(--r-transition);
+}
+
+.suggestion-card:hover {
+ background: rgba(0, 210, 255, 0.05);
+ border-color: var(--r-cyan);
+}
+
+/* Profile Avatars */
+.profile-avatar {
+ border: 2px solid var(--r-cyan);
+ box-shadow: 0 0 15px var(--r-cyan-glow);
+ border-radius: 12px;
+}
+
+/* Global Overrides */
+.bg-light, .bg-white { background-color: transparent !important; }
+.text-muted { color: var(--r-silver-dim) !important; }
+.text-cyan { color: var(--r-cyan) !important; }
+
/* Form Styling */
.form-control, .form-select {
- background: rgba(255, 255, 255, 0.05) !important;
+ background: rgba(255, 255, 255, 0.03) !important;
border: 1px solid var(--r-glass-border) !important;
- border-radius: 14px;
+ border-radius: 10px;
color: white !important;
- padding: 0.9rem 1.4rem;
}
.form-control:focus {
border-color: var(--r-cyan) !important;
- box-shadow: 0 0 15px var(--r-cyan-glow);
- background: rgba(255, 255, 255, 0.08) !important;
+ box-shadow: 0 0 20px var(--r-cyan-glow);
}
-/* Mobile Nav Enhancement */
-.bottom-nav {
- background: rgba(5, 10, 24, 0.95);
- backdrop-filter: blur(25px);
- border-top: 1px solid var(--r-glass-border);
- height: 80px;
+/* Gaming Native Landing Page Styles */
+.hero-gaming {
+ position: relative;
+ background: radial-gradient(circle at 50% 50%, #0a2e38 0%, #021a24 100%);
+ overflow: hidden;
}
-.bottom-nav-item {
- color: var(--r-silver-dim) !important;
- transition: var(--r-transition);
+.hero-gaming::before {
+ content: "";
+ position: absolute;
+ top: 0;
+ left: 0;
+ right: 0;
+ bottom: 0;
+ background-image:
+ linear-gradient(to right, rgba(0, 210, 255, 0.05) 1px, transparent 1px),
+ linear-gradient(to bottom, rgba(0, 210, 255, 0.05) 1px, transparent 1px);
+ background-size: 50px 50px;
+ mask-image: radial-gradient(circle at 50% 50%, black 30%, transparent 80%);
+ pointer-events: none;
}
-.bottom-nav-item.active {
- color: var(--r-cyan) !important;
- text-shadow: 0 0 10px var(--r-cyan-glow);
+.pain-section {
+ background: #010c12;
+ border-top: 1px solid rgba(20, 255, 0, 0.1);
+ border-bottom: 1px solid rgba(20, 255, 0, 0.1);
}
-/* Global Overrides */
-.bg-light, .bg-white {
- background-color: transparent !important;
+.pain-point {
+ background: rgba(255, 255, 255, 0.02);
+ border-left: 3px solid #ff4d4d;
+ padding: 1.5rem;
+ transition: transform 0.3s ease;
}
-.text-muted {
- color: var(--r-silver-dim) !important;
+.pain-point:hover {
+ transform: translateX(10px);
+ background: rgba(255, 77, 77, 0.05);
}
+.step-card {
+ background: rgba(255, 255, 255, 0.03);
+ border: 1px solid rgba(255, 255, 255, 0.05);
+ border-radius: 1rem;
+ padding: 2.5rem;
+ height: 100%;
+ transition: all 0.3s ease;
+}
+
+.step-card:hover {
+ border-color: var(--r-cyan);
+ box-shadow: 0 0 30px rgba(0, 210, 255, 0.1);
+}
+
+.step-number {
+ font-size: 3rem;
+ font-weight: 900;
+ color: rgba(255, 255, 255, 0.05);
+ line-height: 1;
+ margin-bottom: 1rem;
+}
+
+.diff-grid {
+ background: rgba(2, 26, 36, 0.5);
+ border-radius: 1.5rem;
+ overflow: hidden;
+ border: 1px solid rgba(230, 231, 232, 0.1);
+}
+
+.diff-header {
+ background: rgba(230, 231, 232, 0.05);
+ padding: 1.5rem;
+ font-weight: bold;
+ text-transform: uppercase;
+ letter-spacing: 1px;
+}
+
+.diff-row {
+ display: grid;
+ grid-template-columns: 2fr 1fr 1fr 1.2fr;
+ padding: 1.25rem 1.5rem;
+ border-bottom: 1px solid rgba(255, 255, 255, 0.05);
+ align-items: center;
+}
+
+.diff-row:last-child {
+ border-bottom: none;
+}
+
+.diff-label {
+ color: #e6e7e8;
+ font-weight: 500;
+}
+
+.diff-value {
+ text-align: center;
+ font-size: 1.2rem;
+}
+
+.diff-roster {
+ color: var(--r-green);
+ font-weight: bold;
+ text-shadow: 0 0 10px rgba(20, 255, 0, 0.3);
+}
+
+.cta-final {
+ background: linear-gradient(180deg, #021a24 0%, #00d2ff 400%);
+ padding: 8rem 0;
+}
+
+@media (max-width: 768px) {
+ .diff-row {
+ grid-template-columns: 1fr 1fr;
+ gap: 1rem;
+ }
+ .diff-label {
+ grid-column: span 2;
+ border-bottom: 1px solid rgba(255, 255, 255, 0.1);
+ padding-bottom: 0.5rem;
+ }
+}
+
+.text-neon-green { color: var(--r-neon-green) !important; }
+.text-cyan { color: var(--r-cyan) !important; }
+.text-silver { color: var(--r-silver) !important; }
+.bg-glass { background: var(--r-glass-bg) !important; backdrop-filter: blur(10px); }
+.border-glass { border: 1px solid var(--r-glass-border) !important; }
+
+/* Existing Sage/Sand Overrides */
+.text-sage { color: var(--r-neon-green) !important; }
+.bg-sage { background-color: var(--r-neon-green) !important; color: #020b1a !important; }
+.text-slate, .text-dark { color: var(--r-silver) !important; }
+
/* Scrollbar */
::-webkit-scrollbar { width: 10px; }
::-webkit-scrollbar-track { background: var(--r-navy-deep); }
diff --git a/staticfiles/css/custom.css b/staticfiles/css/custom.css
index d534da1..531dc7c 100644
--- a/staticfiles/css/custom.css
+++ b/staticfiles/css/custom.css
@@ -1,21 +1,21 @@
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&family=Playfair+Display:ital,wght@0,400;0,700;1,400&display=swap');
:root {
- --r-navy-deep: #050A18;
- --r-navy-soft: #0C162D;
- --r-cyan: #00B4DB;
- --r-cyan-glow: rgba(0, 180, 219, 0.4);
- --r-neon-green: #39FF14;
- --r-neon-glow: rgba(57, 255, 20, 0.4);
- --r-silver: #E0E0E0;
- --r-silver-dim: #A0A0A0;
- --r-glass-bg: rgba(255, 255, 255, 0.03);
- --r-glass-border: rgba(224, 224, 224, 0.2);
- --r-transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
+ --r-navy-deep: #020b1a;
+ --r-navy-soft: #0a192f;
+ --r-cyan: #00d2ff;
+ --r-cyan-glow: rgba(0, 210, 255, 0.45);
+ --r-neon-green: #14ff00;
+ --r-neon-glow: rgba(20, 255, 0, 0.4);
+ --r-silver: #e6e7e8;
+ --r-silver-dim: #9ca3af;
+ --r-glass-bg: rgba(255, 255, 255, 0.04);
+ --r-glass-border: rgba(224, 224, 224, 0.15);
+ --r-transition: all 0.4s cubic-bezier(0.165, 0.84, 0.44, 1);
}
body {
- background: radial-gradient(circle at top center, #101B38 0%, var(--r-navy-deep) 100%);
+ background: radial-gradient(circle at 50% 0%, #0d2137 0%, var(--r-navy-deep) 100%);
background-attachment: fixed;
color: var(--r-silver);
font-family: 'Inter', sans-serif;
@@ -27,144 +27,368 @@ body {
h1, h2, h3, h4, .brand-font {
font-family: 'Playfair Display', serif;
- letter-spacing: -0.01em;
+ letter-spacing: -0.02em;
}
/* Metallic Text Effect */
.text-metallic {
- background: linear-gradient(135deg, #FFFFFF 0%, var(--r-silver) 50%, var(--r-silver-dim) 100%);
+ background: linear-gradient(to bottom, #ffffff 0%, var(--r-silver) 50%, #888888 100%);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
+ filter: drop-shadow(0 2px 4px rgba(0,0,0,0.3));
}
/* Glassmorphism Navbar */
.navbar {
- background: rgba(5, 10, 24, 0.85) !important;
- backdrop-filter: blur(20px);
- -webkit-backdrop-filter: blur(20px);
+ background: rgba(2, 11, 26, 0.8) !important;
+ backdrop-filter: blur(24px) saturate(180%);
+ -webkit-backdrop-filter: blur(24px) saturate(180%);
border-bottom: 1px solid var(--r-glass-border);
- padding: 1rem 0;
+ padding: 0.75rem 0;
}
.nav-link {
color: var(--r-silver-dim) !important;
- font-weight: 500;
+ font-weight: 600;
text-transform: uppercase;
- font-size: 0.85rem;
- letter-spacing: 1px;
+ font-size: 0.75rem;
+ letter-spacing: 1.5px;
transition: var(--r-transition);
+ opacity: 0.8;
}
.nav-link:hover, .nav-link.active {
color: var(--r-cyan) !important;
- text-shadow: 0 0 15px var(--r-cyan-glow);
+ opacity: 1;
+ text-shadow: 0 0 20px var(--r-cyan-glow);
}
/* Custom Buttons */
.btn-neon {
- background: linear-gradient(135deg, var(--r-cyan) 0%, #0083B0 100%);
- color: white !important;
+ background: linear-gradient(135deg, var(--r-cyan) 0%, #0076ad 100%);
+ color: #020b1a !important;
border: none;
- font-weight: 700;
- padding: 0.9rem 2.2rem;
- border-radius: 12px;
+ font-weight: 800;
+ padding: 0.9rem 2.4rem;
+ border-radius: 10px;
transition: var(--r-transition);
text-transform: uppercase;
- letter-spacing: 1px;
- box-shadow: 0 8px 20px var(--r-cyan-glow);
+ letter-spacing: 1.5px;
+ box-shadow: 0 0 20px var(--r-cyan-glow);
+ position: relative;
+ overflow: hidden;
+}
+
+.btn-neon::after {
+ content: '';
+ position: absolute;
+ top: -50%;
+ left: -50%;
+ width: 200%;
+ height: 200%;
+ background: linear-gradient(45deg, transparent, rgba(255,255,255,0.2), transparent);
+ transform: rotate(45deg);
+ transition: 0.8s;
+}
+
+.btn-neon:hover::after {
+ left: 120%;
}
.btn-neon:hover {
- transform: translateY(-3px);
- box-shadow: 0 12px 30px var(--r-cyan-glow);
+ transform: translateY(-4px) scale(1.02);
+ box-shadow: 0 0 35px var(--r-cyan-glow);
+ color: white !important;
}
.btn-outline-cg {
- border: 2px solid var(--r-silver-dim);
+ border: 1.5px solid var(--r-glass-border);
color: var(--r-silver);
- font-weight: 600;
- padding: 0.8rem 2rem;
- border-radius: 12px;
+ font-weight: 700;
+ padding: 0.8rem 2.2rem;
+ border-radius: 10px;
transition: var(--r-transition);
+ background: var(--r-glass-bg);
}
.btn-outline-cg:hover {
border-color: var(--r-neon-green);
- color: var(--r-neon-green);
- box-shadow: 0 0 20px var(--r-neon-glow);
- background: transparent;
+ color: var(--r-neon-green) !important;
+ box-shadow: 0 0 25px var(--r-neon-glow);
+ background: rgba(20, 255, 0, 0.05);
+ transform: translateY(-2px);
+}
+
+/* Primary CG Button (Follow/Post) */
+.btn-primary-cg {
+ background: var(--r-cyan);
+ color: #020b1a !important;
+ font-weight: 800;
+ border: none;
+ border-radius: 8px;
+ padding: 0.5rem 1.5rem;
+ transition: var(--r-transition);
+}
+
+.btn-primary-cg:hover {
+ box-shadow: 0 0 15px var(--r-cyan-glow);
+ transform: scale(1.05);
}
/* Cards & Panels */
-.card, .profile-card, .glass-panel {
- background: rgba(255, 255, 255, 0.02) !important;
- backdrop-filter: blur(15px);
- -webkit-backdrop-filter: blur(15px);
+.card, .profile-card, .glass-panel, .stat-widget {
+ background: rgba(10, 25, 47, 0.4) !important;
+ backdrop-filter: blur(16px);
+ -webkit-backdrop-filter: blur(16px);
border: 1px solid var(--r-glass-border) !important;
- border-radius: 28px;
+ border-radius: 20px;
transition: var(--r-transition);
color: var(--r-silver) !important;
+ box-shadow: 0 10px 30px rgba(0,0,0,0.2);
}
.card:hover {
- border-color: var(--r-cyan) !important;
- box-shadow: 0 20px 50px rgba(0, 0, 0, 0.5);
- background: rgba(255, 255, 255, 0.04) !important;
+ border-color: rgba(0, 210, 255, 0.3) !important;
+ background: rgba(10, 25, 47, 0.6) !important;
+ transform: translateY(-5px);
+ box-shadow: 0 20px 40px rgba(0,0,0,0.4);
+}
+
+/* Badges */
+.intent-badge, .post-badge {
+ background: rgba(20, 255, 0, 0.1);
+ color: var(--r-neon-green);
+ border: 1px solid rgba(20, 255, 0, 0.3);
+ padding: 0.25rem 0.75rem;
+ border-radius: 6px;
+ font-size: 0.7rem;
+ font-weight: 700;
+ text-transform: uppercase;
+ letter-spacing: 0.5px;
}
/* Hero Title */
.hero-title {
- font-size: 5rem;
- font-weight: 800;
- line-height: 1.1;
- margin-bottom: 2rem;
- background: linear-gradient(135deg, #FFFFFF 0%, var(--r-silver) 40%, var(--r-cyan) 100%);
+ font-size: 6rem;
+ font-weight: 900;
+ line-height: 1;
+ margin-bottom: 2.5rem;
+ background: linear-gradient(135deg, #ffffff 0%, var(--r-silver) 30%, var(--r-cyan) 100%);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
+ filter: drop-shadow(0 10px 20px rgba(0,0,0,0.4));
}
+@media (max-width: 991px) {
+ .hero-title { font-size: 3.5rem; }
+}
+
+/* Sidebar Nav */
+.sidebar-nav .nav-link {
+ display: flex;
+ align-items: center;
+ gap: 12px;
+ padding: 0.8rem 1rem;
+ border-radius: 10px;
+ margin-bottom: 0.5rem;
+ text-transform: none;
+ font-size: 0.9rem;
+ letter-spacing: 0;
+}
+
+.sidebar-nav .nav-link i {
+ font-size: 1.2rem;
+}
+
+.sidebar-nav .nav-link:hover, .sidebar-nav .nav-link.active {
+ background: rgba(0, 210, 255, 0.1);
+ color: var(--r-cyan) !important;
+ border-left: 3px solid var(--r-cyan);
+}
+
+/* Horizontal Scroll for Suggestions */
+.horizontal-scroll {
+ display: flex;
+ gap: 1.5rem;
+ overflow-x: auto;
+ padding: 1rem 0 2rem;
+ scrollbar-width: none;
+}
+
+.horizontal-scroll::-webkit-scrollbar { display: none; }
+
+.suggestion-card {
+ min-width: 160px;
+ background: rgba(255,255,255,0.02);
+ padding: 1.5rem;
+ border-radius: 20px;
+ border: 1px solid var(--r-glass-border);
+ transition: var(--r-transition);
+}
+
+.suggestion-card:hover {
+ background: rgba(0, 210, 255, 0.05);
+ border-color: var(--r-cyan);
+}
+
+/* Profile Avatars */
+.profile-avatar {
+ border: 2px solid var(--r-cyan);
+ box-shadow: 0 0 15px var(--r-cyan-glow);
+ border-radius: 12px;
+}
+
+/* Global Overrides */
+.bg-light, .bg-white { background-color: transparent !important; }
+.text-muted { color: var(--r-silver-dim) !important; }
+.text-cyan { color: var(--r-cyan) !important; }
+
/* Form Styling */
.form-control, .form-select {
- background: rgba(255, 255, 255, 0.05) !important;
+ background: rgba(255, 255, 255, 0.03) !important;
border: 1px solid var(--r-glass-border) !important;
- border-radius: 14px;
+ border-radius: 10px;
color: white !important;
- padding: 0.9rem 1.4rem;
}
.form-control:focus {
border-color: var(--r-cyan) !important;
- box-shadow: 0 0 15px var(--r-cyan-glow);
- background: rgba(255, 255, 255, 0.08) !important;
+ box-shadow: 0 0 20px var(--r-cyan-glow);
}
-/* Mobile Nav Enhancement */
-.bottom-nav {
- background: rgba(5, 10, 24, 0.95);
- backdrop-filter: blur(25px);
- border-top: 1px solid var(--r-glass-border);
- height: 80px;
+/* Gaming Native Landing Page Styles */
+.hero-gaming {
+ position: relative;
+ background: radial-gradient(circle at 50% 50%, #0a2e38 0%, #021a24 100%);
+ overflow: hidden;
}
-.bottom-nav-item {
- color: var(--r-silver-dim) !important;
- transition: var(--r-transition);
+.hero-gaming::before {
+ content: "";
+ position: absolute;
+ top: 0;
+ left: 0;
+ right: 0;
+ bottom: 0;
+ background-image:
+ linear-gradient(to right, rgba(0, 210, 255, 0.05) 1px, transparent 1px),
+ linear-gradient(to bottom, rgba(0, 210, 255, 0.05) 1px, transparent 1px);
+ background-size: 50px 50px;
+ mask-image: radial-gradient(circle at 50% 50%, black 30%, transparent 80%);
+ pointer-events: none;
}
-.bottom-nav-item.active {
- color: var(--r-cyan) !important;
- text-shadow: 0 0 10px var(--r-cyan-glow);
+.pain-section {
+ background: #010c12;
+ border-top: 1px solid rgba(20, 255, 0, 0.1);
+ border-bottom: 1px solid rgba(20, 255, 0, 0.1);
}
-/* Global Overrides */
-.bg-light, .bg-white {
- background-color: transparent !important;
+.pain-point {
+ background: rgba(255, 255, 255, 0.02);
+ border-left: 3px solid #ff4d4d;
+ padding: 1.5rem;
+ transition: transform 0.3s ease;
}
-.text-muted {
- color: var(--r-silver-dim) !important;
+.pain-point:hover {
+ transform: translateX(10px);
+ background: rgba(255, 77, 77, 0.05);
}
+.step-card {
+ background: rgba(255, 255, 255, 0.03);
+ border: 1px solid rgba(255, 255, 255, 0.05);
+ border-radius: 1rem;
+ padding: 2.5rem;
+ height: 100%;
+ transition: all 0.3s ease;
+}
+
+.step-card:hover {
+ border-color: var(--r-cyan);
+ box-shadow: 0 0 30px rgba(0, 210, 255, 0.1);
+}
+
+.step-number {
+ font-size: 3rem;
+ font-weight: 900;
+ color: rgba(255, 255, 255, 0.05);
+ line-height: 1;
+ margin-bottom: 1rem;
+}
+
+.diff-grid {
+ background: rgba(2, 26, 36, 0.5);
+ border-radius: 1.5rem;
+ overflow: hidden;
+ border: 1px solid rgba(230, 231, 232, 0.1);
+}
+
+.diff-header {
+ background: rgba(230, 231, 232, 0.05);
+ padding: 1.5rem;
+ font-weight: bold;
+ text-transform: uppercase;
+ letter-spacing: 1px;
+}
+
+.diff-row {
+ display: grid;
+ grid-template-columns: 2fr 1fr 1fr 1.2fr;
+ padding: 1.25rem 1.5rem;
+ border-bottom: 1px solid rgba(255, 255, 255, 0.05);
+ align-items: center;
+}
+
+.diff-row:last-child {
+ border-bottom: none;
+}
+
+.diff-label {
+ color: #e6e7e8;
+ font-weight: 500;
+}
+
+.diff-value {
+ text-align: center;
+ font-size: 1.2rem;
+}
+
+.diff-roster {
+ color: var(--r-green);
+ font-weight: bold;
+ text-shadow: 0 0 10px rgba(20, 255, 0, 0.3);
+}
+
+.cta-final {
+ background: linear-gradient(180deg, #021a24 0%, #00d2ff 400%);
+ padding: 8rem 0;
+}
+
+@media (max-width: 768px) {
+ .diff-row {
+ grid-template-columns: 1fr 1fr;
+ gap: 1rem;
+ }
+ .diff-label {
+ grid-column: span 2;
+ border-bottom: 1px solid rgba(255, 255, 255, 0.1);
+ padding-bottom: 0.5rem;
+ }
+}
+
+.text-neon-green { color: var(--r-neon-green) !important; }
+.text-cyan { color: var(--r-cyan) !important; }
+.text-silver { color: var(--r-silver) !important; }
+.bg-glass { background: var(--r-glass-bg) !important; backdrop-filter: blur(10px); }
+.border-glass { border: 1px solid var(--r-glass-border) !important; }
+
+/* Existing Sage/Sand Overrides */
+.text-sage { color: var(--r-neon-green) !important; }
+.bg-sage { background-color: var(--r-neon-green) !important; color: #020b1a !important; }
+.text-slate, .text-dark { color: var(--r-silver) !important; }
+
/* Scrollbar */
::-webkit-scrollbar { width: 10px; }
::-webkit-scrollbar-track { background: var(--r-navy-deep); }