/* ==================== */ /* CSS Variables - Inspiré de cxz.lol */ /* ==================== */ :root { --bg-primary: #fff9ef; --bg-secondary: #ffffff; --bg-tertiary: #f5f0e6; --bg-dark: #1d1d1b; --text-primary: #1d1d1b; --text-secondary: #5a5a58; --text-muted: #8a8a88; --accent-primary: #f1c800; --accent-secondary: #e5b800; --accent-hover: #d4a900; --border-color: #e5e0d6; --border-dark: #d8d5cd; --success: #22c55e; --error: #ef4444; --warning: #f59e0b; --radius-sm: 8px; --radius-md: 12px; --radius-lg: 16px; --radius-xl: 24px; --transition-fast: 0.15s ease; --transition-normal: 0.3s ease; --shadow-sm: 0 2px 8px rgba(0, 0, 0, 0.08); --shadow-md: 0 4px 16px rgba(0, 0, 0, 0.1); --shadow-lg: 0 8px 32px rgba(0, 0, 0, 0.12); } /* Dark mode variables applied when .dark-mode is present on */ .dark-mode { color-scheme: dark; --bg-primary: #0c0b07; --bg-secondary: #15120c; --bg-tertiary: #19160f; --bg-dark: #000000; --text-primary: #e6eef6; --text-secondary: #b6c3cf; --text-muted: #a29f8f; --accent-primary: #f1c800; --accent-secondary: #e5b800; --accent-hover: #d4a900; --border-color: #2a2218; --border-dark: #0f1720; --shadow-sm: 0 2px 10px rgba(0,0,0,0.7); --shadow-md: 0 6px 18px rgba(0,0,0,0.7); --shadow-lg: 0 10px 36px rgba(0,0,0,0.8); } .dark-mode input, .dark-mode select, .dark-mode textarea { background-color: var(--bg-tertiary); color: var(--text-primary); } .dark-mode input:-webkit-autofill, .dark-mode input:-webkit-autofill:hover, .dark-mode input:-webkit-autofill:focus, .dark-mode select:-webkit-autofill, .dark-mode textarea:-webkit-autofill { -webkit-text-fill-color: var(--text-primary); -webkit-box-shadow: 0 0 0px 1000px var(--bg-tertiary) inset; transition: background-color 5000s ease-in-out 0s; } /* ==================== */ /* Reset & Base */ /* ==================== */ *, *::before, *::after { margin: 0; padding: 0; box-sizing: border-box; } html { scroll-behavior: smooth; } body { font-family: 'Quicksand', 'Inter', -apple-system, BlinkMacSystemFont, sans-serif; background-color: var(--bg-primary); color: var(--text-primary); line-height: 1.6; overflow-x: hidden; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; } a { text-decoration: none; color: inherit; transition: all var(--transition-fast); } a:hover { text-decoration: underline; text-decoration-thickness: 2px; text-underline-offset: 4px; } /* Sidebar theme toggle button */ .theme-toggle { background: transparent; border: 1px solid var(--border-color); color: var(--text-primary); padding: 6px 8px; border-radius: 8px; font-size: 14px; display: inline-flex; align-items: center; justify-content: center; } .theme-toggle:hover { background: var(--bg-tertiary); } button { border: none; background: none; cursor: pointer; font-family: inherit; } input, textarea, select { font-family: inherit; font-size: inherit; } /* ==================== */ /* Auth Pages */ /* ==================== */ .auth-page { min-height: 100vh; display: flex; align-items: center; justify-content: center; padding: 24px; position: relative; background: var(--bg-primary); } .auth-page .landing-bg { position: fixed; } .auth-container { width: 100%; max-width: 440px; position: relative; z-index: 10; } .auth-card { background: var(--bg-secondary); border: 2px solid var(--border-color); border-radius: var(--radius-xl); padding: 40px; box-shadow: var(--shadow-lg); } .auth-header { text-align: center; margin-bottom: 32px; } .auth-header .logo { margin-bottom: 24px; display: block; } .auth-header h1 { font-size: 26px; font-weight: 700; margin-bottom: 8px; color: var(--text-primary); } .auth-header p { color: var(--text-secondary); font-weight: 500; } .auth-divider { display: flex; align-items: center; gap: 16px; margin: 24px 0; color: var(--text-muted); font-size: 14px; font-weight: 600; } .auth-divider::before, .auth-divider::after { content: ''; flex: 1; height: 2px; background: var(--border-color); border-radius: 1px; } .social-buttons { display: flex; flex-direction: column; gap: 12px; margin-bottom: 24px; } .btn-social { display: flex; align-items: center; justify-content: center; gap: 12px; padding: 14px; background: var(--bg-tertiary); border: 2px solid var(--border-color); border-radius: var(--radius-md); color: var(--text-primary); font-weight: 600; transition: all var(--transition-fast); width: 100%; cursor: pointer; } .btn-social:hover { border-color: var(--text-primary); transform: translateY(-2px); box-shadow: var(--shadow-sm); } .btn-social svg { width: 20px; height: 20px; } .btn-google:hover { border-color: #ea4335; background: rgba(234, 67, 53, 0.05); } .btn-discord:hover { border-color: #5865f2; background: rgba(88, 101, 242, 0.05); } /* Form styles */ .form-group { margin-bottom: 20px; } .form-label { display: block; margin-bottom: 8px; font-size: 14px; font-weight: 600; color: var(--text-primary); } .form-input { width: 100%; padding: 14px 16px; background: var(--bg-tertiary); border: 2px solid var(--border-color); border-radius: var(--radius-md); color: var(--text-primary); font-size: 16px; font-weight: 500; transition: all var(--transition-fast); } .form-input:focus { outline: none; border-color: var(--accent-primary); background: var(--bg-secondary); box-shadow: 0 0 0 4px rgba(241, 200, 0, 0.2); } .form-input::placeholder { color: var(--text-muted); font-weight: 400; } .form-error { color: var(--error); font-size: 13px; font-weight: 500; margin-top: 6px; } .form-hint { color: var(--text-muted); font-size: 13px; margin-top: 6px; } .auth-footer { text-align: center; margin-top: 24px; color: var(--text-secondary); font-size: 14px; font-weight: 500; } .auth-footer a { color: var(--text-primary); font-weight: 700; } /* Alert messages */ .alert { padding: 14px 16px; border-radius: var(--radius-md); margin-bottom: 20px; font-size: 14px; font-weight: 500; border: 2px solid; } .alert-error { background: rgba(239, 68, 68, 0.08); border-color: rgba(239, 68, 68, 0.3); color: #dc2626; } .alert-success { background: rgba(34, 197, 94, 0.08); border-color: rgba(34, 197, 94, 0.3); color: #16a34a; } /* ==================== */ /* Responsive */ /* ==================== */ /* Tablettes */ @media (max-width: 1024px) { .auth-page { padding: 20px; } .auth-container { max-width: 420px; } .auth-card { padding: 36px 32px; } } /* Petites tablettes et grands mobiles */ @media (max-width: 768px) { .landing-header { padding: 16px 24px; } .landing-footer { flex-wrap: wrap; gap: 16px; padding: 16px 24px; } .auth-page { padding: 16px; } .auth-container { max-width: 100%; } .auth-card { padding: 28px 24px; border-radius: var(--radius-lg); } .auth-header h1 { font-size: 24px; } .auth-header p { font-size: 14px; } .btn-social { padding: 12px; font-size: 15px; } .form-input { padding: 12px 14px; font-size: 15px; } } /* Mobiles */ @media (max-width: 640px) { .auth-page { padding: 12px; align-items: flex-start; padding-top: 24px; } .auth-card { padding: 24px 20px; } .auth-header { margin-bottom: 24px; } .auth-header h1 { font-size: 22px; margin-bottom: 6px; } .auth-header .logo { margin-bottom: 20px; } .social-buttons { gap: 10px; margin-bottom: 20px; } .btn-social { padding: 11px; font-size: 14px; } .btn-social svg { width: 18px; height: 18px; } .auth-divider { margin: 20px 0; font-size: 13px; gap: 12px; } .form-group { margin-bottom: 16px; } .form-label { font-size: 13px; margin-bottom: 6px; } .form-input { padding: 11px 13px; font-size: 14px; } .form-error, .form-hint { font-size: 12px; margin-top: 4px; } .alert { padding: 12px 14px; font-size: 13px; margin-bottom: 16px; } .auth-footer { margin-top: 20px; font-size: 13px; } } /* Petits mobiles */ @media (max-width: 480px) { .landing-cta { flex-direction: column; width: 100%; } .landing-cta .btn { width: 100%; } .header-actions .btn-ghost { display: none; } .auth-page { padding: 8px; padding-top: 16px; } .auth-card { padding: 20px 16px; border-width: 1px; } .auth-header { margin-bottom: 20px; } .auth-header h1 { font-size: 20px; } .auth-header p { font-size: 13px; } .auth-header .logo { margin-bottom: 16px; } .social-buttons { gap: 8px; margin-bottom: 16px; } .btn-social { padding: 10px; font-size: 13px; gap: 10px; } .btn-social svg { width: 16px; height: 16px; } .auth-divider { margin: 16px 0; font-size: 12px; gap: 10px; } .form-group { margin-bottom: 14px; } .form-input { padding: 10px 12px; } .auth-footer { margin-top: 16px; } } /* Très petits mobiles */ @media (max-width: 360px) { .auth-card { padding: 16px 12px; } .auth-header h1 { font-size: 18px; } .btn-social { padding: 9px; font-size: 12px; } .form-input { padding: 9px 11px; font-size: 13px; } } /* Touch devices - désactiver les hover effects */ @media (hover: none) and (pointer: coarse) { .btn-social:hover { transform: none; box-shadow: none; } .btn-social:active { transform: scale(0.98); } a:hover { text-decoration: none; } }