📄 Source: style.css
/* ========== VARIABLES ========== */
:root {
--bg-primary: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
--bg-card: #ffffff;
--text-primary: #1e293b;
--text-secondary: #64748b;
--border-color: #e2e8f0;
--card-shadow: 0 10px 25px -5px rgba(0, 0, 0, 0.1), 0 8px 10px -6px rgba(0, 0, 0, 0.02);
--input-bg: #ffffff;
--input-border: #cbd5e1;
--input-text: #1e293b;
--input-focus: #667eea;
--btn-primary: linear-gradient(135deg, #667eea, #764ba2);
--btn-danger: linear-gradient(135deg, #ef4444, #dc2626);
--btn-success: linear-gradient(135deg, #10b981, #059669);
--btn-warning: linear-gradient(135deg, #f59e0b, #d97706);
--code-bg: #f1f5f9;
--success: #10b981;
--error: #ef4444;
--warning: #f59e0b;
--info: #3b82f6;
--option-bg: #f8fafc;
}
[data-theme="dark"] {
--bg-primary: linear-gradient(135deg, #1e1b4b 0%, #312e81 100%);
--bg-card: #1e293b;
--text-primary: #f1f5f9;
--text-secondary: #94a3b8;
--border-color: #334155;
--input-bg: #334155;
--input-border: #475569;
--input-text: #f1f5f9;
--input-focus: #818cf8;
--code-bg: #0f172a;
--option-bg: #334155;
}
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
body {
font-family: 'Inter', system-ui, -apple-system, sans-serif;
background: var(--bg-primary);
color: var(--text-primary);
min-height: 100vh;
padding: 1rem;
}
/* Theme Switcher */
.theme-switcher {
position: fixed;
bottom: 1rem;
right: 1rem;
display: flex;
gap: 0.5rem;
z-index: 1000;
background: var(--bg-card);
padding: 0.5rem;
border-radius: 3rem;
box-shadow: var(--card-shadow);
}
.theme-btn {
width: 40px;
height: 40px;
border-radius: 50%;
border: none;
cursor: pointer;
font-size: 1.2rem;
background: transparent;
transition: transform 0.2s;
}
.theme-btn:hover {
transform: scale(1.1);
}
.container {
max-width: 1000px;
width: 100%;
margin: 0 auto;
}
/* Header */
.header {
margin-bottom: 2rem;
padding: 1rem;
}
.header-top {
display: flex;
justify-content: space-between;
align-items: center;
flex-wrap: wrap;
gap: 1rem;
}
.header h1 {
font-size: 2rem;
font-weight: 800;
background: white;
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
text-shadow: 0 2px 10px rgba(0,0,0,0.1);
}
.header .subhead {
color: rgba(255,255,255,0.9);
margin-top: 0.5rem;
-webkit-text-fill-color: rgba(255,255,255,0.9);
}
.header-actions {
display: flex;
gap: 0.5rem;
flex-wrap: wrap;
align-items: center;
}
.user-greeting {
color: rgba(255,255,255,0.9);
font-weight: 500;
-webkit-text-fill-color: rgba(255,255,255,0.9);
}
/* Buttons */
.btn-primary, .btn-secondary {
padding: 0.5rem 1.2rem;
border: none;
border-radius: 2rem;
cursor: pointer;
font-weight: 600;
font-size: 0.9rem;
transition: all 0.2s;
text-decoration: none;
display: inline-block;
text-align: center;
}
.btn-primary {
background: var(--btn-primary);
color: white;
}
.btn-primary:hover {
transform: translateY(-2px);
box-shadow: 0 10px 20px -5px rgba(0,0,0,0.2);
}
.btn-secondary {
background: rgba(255,255,255,0.2);
color: white;
backdrop-filter: blur(10px);
}
.btn-secondary:hover {
background: rgba(255,255,255,0.3);
}
.btn-danger {
background: var(--btn-danger);
color: white;
border: none;
padding: 0.25rem 0.7rem;
border-radius: 2rem;
cursor: pointer;
font-size: 0.7rem;
}
.back-link {
color: white;
text-decoration: none;
-webkit-text-fill-color: white;
padding: 0.3rem 1rem;
border-radius: 2rem;
background: rgba(255,255,255,0.2);
}
/* Cards */
.form-card, .auth-card, .forum-card, .question-builder {
background: var(--bg-card);
border-radius: 1.5rem;
padding: 1.5rem;
margin-bottom: 1.5rem;
box-shadow: var(--card-shadow);
border: 1px solid var(--border-color);
}
/* Inputs */
.input-field {
margin-bottom: 1.2rem;
}
.input-field label {
display: block;
font-weight: 600;
margin-bottom: 0.5rem;
color: var(--text-primary);
font-size: 0.9rem;
}
.input-field input,
.input-field select,
.input-field textarea {
width: 100%;
padding: 0.9rem 1.2rem;
border: 2px solid var(--input-border);
border-radius: 1rem;
background: var(--input-bg);
color: var(--input-text);
font-size: 1rem;
font-family: inherit;
transition: all 0.2s ease;
}
.input-field input:focus,
.input-field select:focus,
.input-field textarea:focus {
outline: none;
border-color: var(--input-focus);
box-shadow: 0 0 0 3px rgba(102, 126, 234, 0.15);
}
/* Forums Grid */
.forums-grid {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
gap: 1.5rem;
}
.forum-card {
background: var(--bg-card);
border-radius: 1.5rem;
padding: 1.5rem;
box-shadow: var(--card-shadow);
border: 1px solid var(--border-color);
display: flex;
flex-direction: column;
}
.forum-header {
display: flex;
justify-content: space-between;
align-items: start;
gap: 0.5rem;
margin-bottom: 0.5rem;
}
.forum-header h3 {
font-size: 1.1rem;
font-weight: 700;
}
.forum-platform {
font-size: 0.7rem;
padding: 0.2rem 0.6rem;
border-radius: 2rem;
background: var(--code-bg);
white-space: nowrap;
}
.forum-description {
color: var(--text-secondary);
font-size: 0.9rem;
margin-bottom: 1rem;
flex: 1;
}
.forum-meta {
display: flex;
gap: 0.5rem;
flex-wrap: wrap;
font-size: 0.75rem;
color: var(--text-secondary);
margin-bottom: 1rem;
}
.apply-btn {
width: 100%;
text-align: center;
display: block;
}
.already-applied {
background: var(--success);
color: white;
padding: 0.5rem;
border-radius: 2rem;
text-align: center;
font-size: 0.9rem;
}
/* Auth */
.auth-container {
max-width: 440px;
margin: 0 auto;
}
.auth-card h2 {
text-align: center;
margin-bottom: 0.5rem;
}
.auth-sub {
text-align: center;
color: var(--text-secondary);
margin-bottom: 1.5rem;
}
.auth-divider {
display: flex;
align-items: center;
margin: 1.5rem 0;
color: var(--text-secondary);
font-size: 0.8rem;
}
.auth-divider::before,
.auth-divider::after {
content: '';
flex: 1;
height: 1px;
background: var(--border-color);
}
.auth-divider span {
padding: 0 1rem;
}
.oauth-buttons {
display: flex;
flex-direction: column;
gap: 0.5rem;
}
.oauth-btn {
padding: 0.7rem;
border: none;
border-radius: 1rem;
cursor: pointer;
font-weight: 600;
font-size: 0.9rem;
transition: all 0.2s;
color: white;
}
.oauth-btn:hover {
transform: translateY(-2px);
}
.discord-btn {
background: #5865F2;
}
.google-btn {
background: #EA4335;
}
.auth-footer {
text-align: center;
margin-top: 1.5rem;
font-size: 0.9rem;
color: var(--text-secondary);
}
.auth-footer a {
color: var(--info);
text-decoration: none;
font-weight: 600;
}
.auth-footer a:hover {
text-decoration: underline;
}
/* Messages */
.error-message {
background: rgba(239, 68, 68, 0.9);
color: white;
padding: 0.7rem 1rem;
border-radius: 1rem;
margin-bottom: 1rem;
}
.success-message {
background: rgba(16, 185, 129, 0.9);
color: white;
padding: 0.7rem 1rem;
border-radius: 1rem;
margin-bottom: 1rem;
}
.empty-state {
text-align: center;
padding: 3rem 1rem;
background: var(--bg-card);
border-radius: 1.5rem;
border: 1px solid var(--border-color);
}
.empty-state .icon {
font-size: 3rem;
margin-bottom: 1rem;
}
/* Footer */
.footer {
text-align: center;
font-size: 0.7rem;
color: rgba(255,255,255,0.7);
margin-top: 2rem;
padding: 1rem;
}
/* Responsive */
@media (max-width: 768px) {
.forums-grid {
grid-template-columns: 1fr;
}
.header-top {
flex-direction: column;
align-items: stretch;
text-align: center;
}
.header-actions {
justify-content: center;
}
.header h1 {
font-size: 1.5rem;
}
.container {
padding: 0;
}
.theme-switcher {
bottom: 0.5rem;
right: 0.5rem;
padding: 0.3rem;
}
.theme-btn {
width: 32px;
height: 32px;
font-size: 1rem;
}
.role-btn {
background: var(--option-bg);
border: 2px solid var(--border-color);
border-radius: 2rem;
padding: 0.4rem 1rem;
cursor: pointer;
transition: all 0.2s;
color: var(--text-primary);
font-size: 0.85rem;
}
.role-btn:hover {
background: var(--info);
color: white;
transform: scale(1.05);
}
.role-btn.selected {
background: var(--info);
color: white;
border-color: var(--info);
}
/* Emoji fallback - ensure emojis display properly */
.header h1,
.header .subhead,
.forum-card h3,
.dashboard-layout h2,
.sidebar-item,
.stat-box .number,
.submission-card .username,
.submission-card .status-badge {
font-family: 'Inter', 'Apple Color Emoji', 'Segoe UI Emoji', 'Noto Color Emoji', system-ui, -apple-system, sans-serif;
}
/* Ensure emojis are visible in all themes */
.theme-switcher .theme-btn {
font-family: 'Apple Color Emoji', 'Segoe UI Emoji', 'Noto Color Emoji', sans-serif;
}
/* Better contrast for text on colored backgrounds */
.header h1 {
color: white !important;
-webkit-text-fill-color: white !important;
text-shadow: 0 2px 10px rgba(0,0,0,0.3);
}
.header .subhead {
color: rgba(255,255,255,0.9) !important;
-webkit-text-fill-color: rgba(255,255,255,0.9) !important;
}
/* Fix emoji in dark mode */
[data-theme="dark"] .header h1 {
color: white !important;
-webkit-text-fill-color: white !important;
}
/* Status badges with emojis */
.status-pending, .status-approved, .status-rejected {
font-family: 'Inter', 'Apple Color Emoji', 'Segoe UI Emoji', 'Noto Color Emoji', sans-serif;
}
/* Toast animation */
@keyframes slideUp {
from {
opacity: 0;
transform: translateX(-50%) translateY(20px);
}
to {
opacity: 1;
transform: translateX(-50%) translateY(0);
}
}
/* Ensure emojis display properly */
* {
font-feature-settings: "liga" 1, "calt" 1;
}
/* Better contrast for status badges */
.status-pending, .status-approved, .status-rejected {
font-weight: 600;
}
}
← Back