* {
box-sizing: border-box;
}
html {
overflow-x: hidden;
-webkit-text-size-adjust: 100%;
-ms-text-size-adjust: 100%;
}
body {
overflow-x: hidden;
width: 100%;
max-width: 100vw;
position: relative;
}
@media (hover: none) and (pointer: coarse) {
.events-horizontal-scroll,
.events-category-filter-scroll,
.orga-banner-scroll,
.org-koaloo-carousel,
.org-bureau-carousel,
.koaloo-personalize-scroll-inner,
.community-stories-scroll {
overscroll-behavior-x: contain;
touch-action: pan-x;
}
.koaloo-personalize-scroll-inner .color-btn,
.koaloo-personalize-scroll-inner .glasses-btn,
.koaloo-personalize-scroll-inner .hat-btn,
.koaloo-personalize-scroll-inner .accessory-btn,
.koaloo-personalize-scroll-inner .bas-btn,
.koaloo-personalize-scroll-inner .chaussure-btn {
touch-action: manipulation;
}
.community-stories-scroll .community-story-item {
touch-action: pan-x;
}
.event-card-horizontal,
.events-category-filter-chip {
touch-action: manipulation;
}
#content-autour-moi .events-horizontal-scroll,
#content-autour-moi .events-category-filter-scroll {
touch-action: auto;
}
}
a, button, input, select, textarea,
[role="button"], summary {
touch-action: manipulation;
}
img, video, iframe {
max-width: 100%;
height: auto;
}
.container, .main-content, .content, header, footer {
max-width: 100%;
overflow-x: clip;
}
section, article {
max-width: 100%;
}
:root {
--primary: #B1AAFF;
--primary-dark: #0D1B2A;
--primary-light: #FFF8E7;
--secondary: #FF9201;
--secondary-dark: #FF9201;
--accent: #FF9201;
--accent-dark: #0D1B2A;
--accent-bright: #F8FF2C;
--success: #FF9201;
--success-dark: #FF9201;
--warning: #FF9201;
--warning-dark: #F80D94;
--danger: #F80D94;
--danger-dark: #0D1B2A;
--info: #B1AAFF;
--info-dark: #0D1B2A;
--background: #FFF8E7;
--surface: #FFFFFF;
--surface-secondary: #FFF8E7;
--text-primary: #0D1B2A;
--text-secondary: #FF9201;
--text-primaryOrange: #FF9201;
--text-muted: #B1AAFF;
--border: #B1AAFF;
--border-light: #FFF8E7;
--shadow-sm: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
--shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.1), 0 1px 2px 0 rgba(0, 0, 0, 0.06);
--shadow-md: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
--shadow-lg: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05);
--shadow-xl: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04);
--shadow-2xl: 0 25px 50px -12px rgba(0, 0, 0, 0.25);
--radius-sm: 6px;
--radius: 12px;
--radius-md: 16px;
--radius-lg: 20px;
--radius-xl: 24px;
--radius-full: 9999px;
--transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
--transition-fast: all 0.15s cubic-bezier(0.4, 0, 0.2, 1);
--transition-slow: all 0.5s cubic-bezier(0.4, 0, 0.2, 1);
--gradient-primary: linear-gradient(180deg, #FF9201 0%, #FF9201 400%);
--gradient-secondary: linear-gradient(135deg, #FF9201 0%, #FF9201 100%);
--gradient-surface: linear-gradient(135deg, #FFFFFF 0%, #FFF8E7 100%);
--gradient-header: linear-gradient(180deg, #FFF8E7 0%, #FFF8E7 400%);
--space-xs: 0.25rem;
--space-sm: 0.5rem;
--space: 1rem;
--space-md: 1.5rem;
--space-lg: 2rem;
--space-xl: 3rem;
--space-2xl: 4rem;
--font-family: 'Nunito', 'Bobby Jones', sans-serif;
--font-family-heading: 'Bobby Jones', 'Nunito', sans-serif;
--font-family-light: 'Bobby Jones Light', 'Nunito', sans-serif;
--font-size-xs: 0.75rem;
--font-size-sm: 0.875rem;
--font-size-base: 1rem;
--font-size-lg: 1.125rem;
--font-size-xl: 1.25rem;
--font-size-2xl: 1.5rem;
--font-size-3xl: 1.875rem;
--font-size-4xl: 2.25rem;
--bottom-nav-height: 68px;
--bottom-nav-extra-safe-pad: 4px;
--z-dropdown: 1000;
--z-sticky: 1020;
--z-fixed: 1030;
--z-modal-backdrop: 1040;
--z-modal: 1050;
--z-popover: 1060;
--z-tooltip: 1070;
--primary-color: var(--primary);
--secondary-color: var(--secondary);
--success-color: var(--success);
--bg-primary: var(--background);
--bg-secondary: var(--surface);
--bg-hover: var(--surface-secondary);
--border-color: var(--border);
--text-primary: var(--text-primary);
--text-tertiary: var(--text-muted);
}
[data-theme="dark"] {
--background: #0D1B2A;
--surface: #0D1B2A;
--surface-secondary: #0D1B2A;
--text-primary: #F1F5F9;
--text-primaryOrange: #F1F5F9;
--text-secondary: #CBD5E1;
--text-muted: #64748B;
--border: #334155;
--border-light: #475569;
--primary-light: #0D1B2A;
--primary: #FF9201;
--gradient-primary: linear-gradient(180deg, #B1AAFF 0%, #B1AAFF 400%);
--gradient-header: linear-gradient(180deg, #0D1B2A 0%, #FF9201 400%);
}
[data-theme="dark"] {
--shadow-sm: 0 1px 2px 0 rgba(0, 0, 0, 0.3);
--shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.4), 0 1px 2px 0 rgba(0, 0, 0, 0.3);
--shadow-md: 0 4px 6px -1px rgba(0, 0, 0, 0.4), 0 2px 4px -1px rgba(0, 0, 0, 0.3);
--shadow-lg: 0 10px 15px -3px rgba(0, 0, 0, 0.4), 0 4px 6px -2px rgba(0, 0, 0, 0.3);
--shadow-xl: 0 20px 25px -5px rgba(0, 0, 0, 0.4), 0 10px 10px -5px rgba(0, 0, 0, 0.2);
--shadow-2xl: 0 25px 50px -12px rgba(0, 0, 0, 0.5);
}
[data-theme="dark"] .profile-main-card {
background: var(--surface);
border-color: var(--border);
}
[data-theme="dark"] .stat-card {
background: var(--surface-secondary);
border-color: var(--border);
}
[data-theme="dark"] .event-card {
background: var(--surface-secondary);
border-color: var(--border);
}
[data-theme="dark"] .event-card:hover {
border-color: var(--primary);
}
[data-theme="dark"] .profile-stats-section {
border-color: var(--border);
}
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
*::before,
*::after {
box-sizing: border-box;
}
html {
scroll-behavior: smooth;
-webkit-text-size-adjust: 100%;
background-color: var(--background);
padding-top: env(safe-area-inset-top, 0);
}
html::before {
content: '';
position: fixed;
top: 0;
left: 0;
right: 0;
height: env(safe-area-inset-top, 0);
background-color: var(--background);
z-index: 9999;
pointer-events: none;
}
body {
font-family: var(--font-family);
background-color: var(--background);
color: var(--text-primary);
line-height: 1.6;
overflow-x: hidden;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
padding-bottom: calc(var(--bottom-nav-height, 68px) + var(--bottom-nav-extra-safe-pad, 4px) + env(safe-area-inset-bottom, 0px));
}
h1, h2, h3, h4, h5, h6,
.title, .heading,
.header-title, .page-title,
.section-header h3,
.hero-content h1, .hero-content h2 {
font-family: var(--font-family-heading);
}
.light-text, .subtitle {
font-family: var(--font-family-light);
}
#app {
min-height: 100vh;
display: flex;
flex-direction: column;
}
.header {
background: var(--gradient-header);
padding: var(--space-lg) var(--space-md);
top: 0;
z-index: var(--z-sticky);
backdrop-filter: blur(20px);
box-shadow: var(--shadow-lg);
transition: var(--transition);
color: white;
}
.header-content {
display: flex;
align-items: center;
justify-content: space-between;
max-width: 1200px;
margin: 0 auto;
gap: var(--space-lg);
}
.header-title {
display: flex;
flex-direction: column;
align-items: center;
flex: 1;
text-align: center;
}
.header-title h1 {
font-size: var(--font-size-3xl);
font-weight: 800;
color: white;
margin: 0;
text-shadow: 0 2px 10px rgba(0, 0, 0, 0.3);
}
.header-subtitle {
font-size: var(--font-size-sm);
color: rgba(255, 255, 255, 0.8);
margin: var(--space-xs) 0 0 0;
font-weight: 500;
}
.header-logo {
display: flex;
align-items: center;
}
.logo-image {
width: 65px;
height: 65px;
border-radius: var(--radius-md);
object-fit: cover;
box-shadow: var(--shadow-md);
}
.image-header {
width: 200px;
height: 50px;
}
.header-actions {
display: flex;
align-items: center;
gap: var(--space-sm);
}
@media (max-width: 1024px) {
.header {
padding: var(--space-md) var(--space-sm);
}
.header-title h1 {
font-size: var(--font-size-2xl);
}
.header-subtitle {
font-size: var(--font-size-xs);
}
.logo-image {
width: 40px;
height: 40px;
}
.image-header {
width: 150px;
height: 50px;
}
}
@media (max-width: 768px) {
.header {
padding: var(--space-sm) var(--space-xs);
}
.header-title h1 {
font-size: var(--font-size-xl);
}
.header-subtitle {
font-size: 10px;
}
.logo-image {
width: 35px;
height: 35px;
}
.image-header {
width: 120px;
height: 30px;
}
.header-content {
gap: var(--space-sm);
}
}
@media (max-width: 480px) {
.header {
display: none;
}
}
.back-btn {
display: flex;
align-items: center;
justify-content: center;
width: 40px;
height: 40px;
padding: var(--space-sm);
border-radius: var(--radius);
cursor: pointer;
transition: var(--transition);
color: #FF9201;
text-decoration: none;
white-space: nowrap;
}
.back-btn:hover {
transform: scale(1.05);
opacity: 0.8;
color: #B1AAFF;
}
.btn-icon {
background: #FF9201;
border: 1px solid #FF9201;
padding: var(--space-sm);
border-radius: var(--radius);
cursor: pointer;
transition: var(--transition);
display: flex;
align-items: center;
justify-content: center;
width: 40px;
height: 40px;
color: white;
}
.btn-icon:hover {
background: #FFF8E7;
color: #FF9201;
border-color: #FFF8E7;
transform: translateY(-1px);
box-shadow: var(--shadow-md);
}
.main-content {
flex: 1;
padding: var(--space-md);
max-width: 80vw;
margin: 0 auto;
width: 100%;
padding-bottom: 6rem;
background: var(--background);
}
.cta-card {
background: var(--gradient-secondary);
border-radius: var(--radius-xl);
padding: var(--space-xl);
margin-bottom: var(--space-xl);
text-align: center;
color: white;
position: relative;
overflow: hidden;
box-shadow: var(--shadow-lg);
}
.cta-card::before {
content: '';
position: absolute;
top: -50%;
right: -50%;
width: 200%;
height: 200%;
background: radial-gradient(circle, rgba(255, 255, 255, 0.1) 0%, transparent 70%);
animation: shimmer 3s ease-in-out infinite;
}
@keyframes shimmer {
0%, 100% { transform: translateX(-100%) translateY(-100%) rotate(0deg); }
50% { transform: translateX(0%) translateY(0%) rotate(180deg); }
}
.cta-content {
position: relative;
z-index: 1;
}
.cta-koala {
width: 80px;
height: 80px;
margin: 0 auto var(--space-lg);
background: var(--accent);
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
font-size: 2rem;
box-shadow: var(--shadow-md);
}
.cta-text {
font-size: var(--font-size-lg);
margin-bottom: var(--space-lg);
font-weight: 600;
line-height: 1.4;
}
.cta-button {
background: var(--accent);
color: white;
border: none;
padding: var(--space-lg) var(--space-xl);
border-radius: var(--radius-full);
font-weight: 700;
font-size: var(--font-size-lg);
cursor: pointer;
transition: var(--transition);
display: flex;
align-items: center;
justify-content: center;
gap: var(--space-sm);
margin: 0 auto;
box-shadow: var(--shadow-md);
}
.cta-button:hover {
transform: translateY(-2px);
box-shadow: var(--shadow-lg);
}
.events-section {
margin-bottom: var(--space-xl);
margin-top: var(--space-md);
}
.section-title {
font-size: var(--font-size-2xl);
font-weight: 700;
color: var(--text-primary);
margin-bottom: var(--space-lg);
text-align: center;
}
.achievements-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
gap: var(--space-lg);
}
.achievement-card {
background: var(--surface);
border-radius: var(--radius-lg);
padding: var(--space-xl);
box-shadow: var(--shadow);
border: 1px solid var(--border-light);
text-align: center;
transition: var(--transition);
}
.achievement-card:hover {
transform: translateY(-4px);
box-shadow: var(--shadow-lg);
}
.achievement-icon {
width: 60px;
height: 60px;
background: var(--gradient-primary);
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
margin: 0 auto var(--space-lg);
font-size: 1.5rem;
color: white;
}
.achievement-card h3 {
font-size: var(--font-size-lg);
font-weight: 700;
color: var(--text-primary);
margin-bottom: var(--space-sm);
}
.achievement-card p {
color: var(--text-secondary);
margin-bottom: var(--space-lg);
}
.achievement-progress {
display: flex;
align-items: center;
gap: var(--space-sm);
}
.progress-bar {
flex: 1;
height: 8px;
background: var(--border-light);
border-radius: var(--radius-full);
overflow: hidden;
}
.progress-fill {
height: 100%;
background: var(--gradient-primary);
transition: var(--transition);
}
.notifications-list {
display: flex;
flex-direction: column;
gap: var(--space);
}
.notification-item {
background: var(--surface);
border-radius: var(--radius-lg);
padding: var(--space-lg);
box-shadow: var(--shadow);
border: 1px solid var(--border-light);
display: flex;
align-items: flex-start;
gap: var(--space);
transition: var(--transition);
}
.notification-item:hover {
transform: translateY(-2px);
box-shadow: var(--shadow-md);
}
.notification-icon {
width: 40px;
height: 40px;
background: var(--gradient-secondary);
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
color: white;
flex-shrink: 0;
}
.notification-content {
flex: 1;
}
.notification-content h4 {
font-size: var(--font-size-lg);
font-weight: 700;
color: var(--text-primary);
margin-bottom: var(--space-xs);
}
.notification-content p {
color: var(--text-secondary);
margin-bottom: var(--space-xs);
line-height: 1.5;
}
.notification-time {
font-size: var(--font-size-xs);
color: var(--text-muted);
font-weight: 500;
}
.hero-section {
background: var(--gradient-primary);
color: white;
padding: var(--space-2xl) var(--space-lg);
border-radius: var(--radius-xl);
margin-bottom: var(--space-xl);
text-align: center;
position: relative;
overflow: hidden;
}
.hero-section::before {
content: '';
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
background: url('data:image/svg+xml,');
animation: float 6s ease-in-out infinite;
}
@keyframes float {
0%,
100% {
transform: translateY(0px);
}
50% {
transform: translateY(-10px);
}
}
.hero-content {
position: relative;
z-index: 1;
}
.hero-content h1 {
font-size: var(--font-size-4xl);
font-weight: 800;
margin-bottom: var(--space);
text-shadow: 0 4px 20px rgba(0, 0, 0, 0.3);
}
.hero-content p {
font-size: var(--font-size-lg);
opacity: 0.95;
margin-bottom: var(--space-xl);
max-width: 600px;
margin-left: auto;
margin-right: auto;
}
.events-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
gap: var(--space-lg);
margin-bottom: var(--space-xl);
}
.event-card {
background: var(--surface);
border-radius: var(--radius-lg);
overflow: hidden;
box-shadow: var(--shadow);
transition: var(--transition);
border: 1px solid var(--border-light);
cursor: pointer;
}
.event-card:hover {
transform: translateY(-8px);
box-shadow: var(--shadow-xl);
border-color: var(--primary-light);
}
.event-image {
position: relative;
width: 100%;
height: 200px;
overflow: hidden;
}
.event-image img {
width: 100%;
height: 100%;
object-fit: cover;
transition: var(--transition);
}
.event-card:hover .event-image img {
transform: scale(1.05);
}
.event-type-badge {
position: absolute;
top: var(--space-sm);
right: var(--space-sm);
background: var(--gradient-secondary);
color: white;
padding: var(--space-xs) var(--space-sm);
border-radius: var(--radius-full);
font-size: var(--font-size-xs);
font-weight: 600;
text-transform: uppercase;
box-shadow: var(--shadow-md);
}
.event-content {
padding: var(--space-lg);
}
.event-date {
display: inline-block;
background: var(--gradient-primary);
color: white;
padding: var(--space-xs) var(--space-sm);
border-radius: var(--radius-full);
font-size: var(--font-size-xs);
font-weight: 600;
margin-bottom: var(--space);
}
.event-title {
font-size: var(--font-size-xl);
font-weight: 700;
margin-bottom: var(--space-sm);
color: var(--text-primary);
line-height: 1.3;
}
.event-description {
color: var(--text-secondary);
font-size: var(--font-size-sm);
margin-bottom: var(--space-lg);
line-height: 1.6;
display: -webkit-box;
-webkit-line-clamp: 3;
-webkit-box-orient: vertical;
overflow: hidden;
}
.event-meta {
display: flex;
align-items: center;
justify-content: space-between;
margin-bottom: var(--space-lg);
}
.event-location,
.event-participants {
display: flex;
align-items: center;
gap: var(--space-xs);
color: var(--text-muted);
font-size: var(--font-size-sm);
}
.event-actions {
display: flex;
gap: var(--space-sm);
}
.btn-primary {
background: var(--gradient-primary);
color: white;
border: none;
padding: var(--space) var(--space-lg);
border-radius: var(--radius-xl);
font-weight: 600;
font-size: var(--font-size-base);
cursor: pointer;
transition: var(--transition);
display: flex;
align-items: center;
justify-content: center;
gap: var(--space-sm);
text-decoration: none;
box-shadow: var(--shadow);
min-height: 44px;
min-width: 44px;
}
.btn-primary:hover:not(:disabled) {
transform: translateY(-2px);
box-shadow: var(--shadow-lg);
}
.btn-primary:disabled {
opacity: 0.6;
cursor: not-allowed;
transform: none;
}
.btn-primary.btn-large {
padding: var(--space-lg) var(--space-xl);
font-size: var(--font-size-lg);
}
.btn-secondary {
background: var(--surface);
color: var(--primary);
border: 2px solid var(--primary);
padding: var(--space) var(--space-lg);
border-radius: var(--radius);
font-weight: 600;
font-size: var(--font-size-base);
cursor: pointer;
transition: var(--transition);
display: flex;
align-items: center;
justify-content: center;
gap: var(--space-sm);
text-decoration: none;
min-height: 44px;
min-width: 44px;
}
.btn-secondary:hover {
background: var(--primary);
color: white;
transform: translateY(-2px);
box-shadow: var(--shadow-md);
}
.btn-outline {
background: transparent;
color: var(--text-secondary);
border: 2px solid var(--border);
padding: var(--space) var(--space-lg);
border-radius: var(--radius);
font-weight: 600;
font-size: var(--font-size-base);
cursor: pointer;
transition: var(--transition);
display: flex;
align-items: center;
justify-content: center;
gap: var(--space-sm);
text-decoration: none;
min-height: 44px;
min-width: 44px;
}
.btn-outline:hover {
border-color: var(--primary);
color: var(--primary);
transform: translateY(-1px);
}
button[onclick*="remove"]:hover:not(.btn-primary),
button[onclick*="delete"]:hover:not(.btn-primary),
button[onclick*="supprimer"]:hover:not(.btn-primary),
button[onclick*="effacer"]:hover:not(.btn-primary),
button[onclick*="annuler"]:hover:not(.btn-primary),
button[onclick*="cancel"]:hover:not(.btn-primary),
button[onclick*="Annuler"]:hover:not(.btn-primary),
button[onclick*="Supprimer"]:hover:not(.btn-primary),
button[onclick*="Effacer"]:hover:not(.btn-primary),
.btn-outline[onclick*="remove"]:hover,
.btn-outline[onclick*="delete"]:hover,
.btn-outline[onclick*="supprimer"]:hover,
.btn-outline[onclick*="effacer"]:hover,
.btn-outline[onclick*="annuler"]:hover,
.btn-outline[onclick*="cancel"]:hover,
.btn-outline[onclick*="Annuler"]:hover,
.btn-outline[onclick*="Supprimer"]:hover,
.btn-outline[onclick*="Effacer"]:hover,
.btn-cancel:hover:not(.btn-primary),
.btn-delete:hover:not(.btn-primary),
.btn-remove:hover:not(.btn-primary) {
background-color: #ef4444 !important;
border-color: #ef4444 !important;
color: #ffffff !important;
}
.btn-danger {
background: var(--danger);
color: white;
border: none;
padding: var(--space) var(--space-lg);
border-radius: var(--radius);
font-weight: 600;
font-size: var(--font-size-base);
cursor: pointer;
transition: var(--transition);
display: flex;
align-items: center;
justify-content: center;
gap: var(--space-sm);
text-decoration: none;
min-height: 44px;
min-width: 44px;
}
.btn-danger:hover {
background: var(--danger-dark);
transform: translateY(-1px);
box-shadow: var(--shadow-md);
}
.bottom-nav {
position: fixed;
bottom: 0;
left: 0;
right: 0;
background: rgba(255, 248, 231, 0.97);
border-top: 1px solid rgba(177, 170, 255, 0.3);
display: flex;
padding: 6px var(--space-sm) calc(6px + var(--bottom-nav-extra-safe-pad, 4px) + env(safe-area-inset-bottom, 0px));
backdrop-filter: blur(20px);
-webkit-backdrop-filter: blur(20px);
z-index: var(--z-fixed);
box-shadow: 0 -6px 24px rgba(13, 27, 42, 0.08);
min-height: var(--bottom-nav-height, 68px);
box-sizing: border-box;
}
[data-theme="dark"] .bottom-nav {
background: rgba(13, 27, 42, 0.95);
border-top-color: var(--border);
box-shadow: var(--shadow-lg);
}
#koaloo-nav-progress {
position: fixed;
top: 0;
left: 0;
right: 0;
height: 3px;
z-index: 99999;
pointer-events: none;
opacity: 0;
transition: opacity 0.15s ease;
}
#koaloo-nav-progress.is-active {
opacity: 1;
}
.koaloo-nav-progress__inner {
height: 100%;
width: 35%;
margin-left: 0;
background: linear-gradient(90deg, #b1aaff, #667eea, #b1aaff);
border-radius: 0 2px 2px 0;
animation: koalooNavProgress 0.9s ease-in-out infinite;
}
#koaloo-nav-progress.is-complete .koaloo-nav-progress__inner {
animation: none;
width: 100%;
transition: width 0.18s ease;
}
@keyframes koalooNavProgress {
0% { transform: translateX(-100%); }
100% { transform: translateX(320%); }
}
@keyframes koaloo-swipe-blocked {
0%, 100% { transform: translateX(0); }
30% { transform: translateX(5px); }
70% { transform: translateX(-5px); }
}
html.koaloo-swipe-blocked #app {
animation: koaloo-swipe-blocked 0.22s ease;
}
.bottom-nav .nav-item {
flex: 1 1 0;
min-width: 0;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
gap: 4px;
padding: 6px 4px;
background: none;
border: none;
color: var(--text-muted);
cursor: pointer;
transition: var(--transition);
border-radius: var(--radius-sm);
text-decoration: none;
min-height: 58px;
box-sizing: border-box;
-webkit-tap-highlight-color: transparent;
}
.bottom-nav .nav-item:hover {
color: var(--primary);
background: rgba(255, 146, 1, 0.12);
transform: translateY(-2px);
}
.bottom-nav .nav-item.active {
color: var(--accent);
background: rgba(255, 146, 1, 0.1);
}
[data-theme="dark"] .bottom-nav .nav-item:hover {
background: rgba(99, 102, 241, 0.1);
}
.bottom-nav .nav-item__icon {
width: 28px;
height: 28px;
display: flex;
align-items: center;
justify-content: center;
flex-shrink: 0;
line-height: 1;
font-size: 28px;
}
.bottom-nav .nav-item__icon i {
font-size: 28px;
width: 28px;
height: 28px;
line-height: 1;
display: inline-flex;
align-items: center;
justify-content: center;
}
/* Font Awesome JS (profile, settings…) remplace les par des SVG : taille identique partout */
.bottom-nav .nav-item__icon svg,
.bottom-nav .nav-item__icon .svg-inline--fa {
width: 28px !important;
height: 28px !important;
max-width: none;
max-height: none;
display: block;
}
.bottom-nav .nav-item__icon .koala-icon,
.bottom-nav .nav-icon-koala .koala-icon {
width: 28px !important;
height: 28px !important;
max-width: none !important;
max-height: none !important;
border-radius: 50%;
object-fit: cover;
display: block;
flex-shrink: 0;
}
.bottom-nav .nav-icon-koala {
width: 28px;
height: 28px;
display: flex;
align-items: center;
justify-content: center;
}
.bottom-nav .nav-item__label {
display: block;
font-size: 11px;
font-weight: 600;
line-height: 1.1;
max-width: 100%;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
text-align: center;
}
@media screen and (max-width: 480px) {
.bottom-nav {
min-height: 64px;
padding: 4px var(--space-sm) calc(4px + var(--bottom-nav-extra-safe-pad, 4px) + env(safe-area-inset-bottom, 0px));
}
.bottom-nav .nav-item {
min-height: 52px;
padding: 4px 2px;
gap: 3px;
}
.bottom-nav .nav-item__label {
font-size: 10px;
}
}
.profile-hero {
background: var(--gradient-primary);
color: white;
padding: var(--space-xl) var(--space-lg);
border-radius: var(--radius-xl);
margin-bottom: var(--space-xl);
text-align: center;
position: relative;
overflow: hidden;
}
.profile-avatar-container {
position: relative;
display: inline-block;
margin-bottom: var(--space-lg);
}
.profile-avatar {
width: 120px;
height: 120px;
border-radius: 50%;
border: 4px solid rgba(255, 255, 255, 0.3);
overflow: hidden;
margin: 0 auto;
background: var(--gradient-secondary);
position: relative;
}
.profile-avatar img {
width: 100%;
height: 100%;
object-fit: cover;
border-radius: 50%;
display: block;
}
.profile-details {
display: flex;
flex-direction: column;
gap: var(--space-xs);
margin: var(--space) 0;
}
.profile-detail {
display: flex;
align-items: center;
gap: var(--space-sm);
font-size: var(--font-size-sm);
opacity: 0.9;
}
.profile-detail i {
width: 16px;
text-align: center;
}
.profile-social {
display: flex;
gap: var(--space);
margin: var(--space) 0;
flex-wrap: wrap;
}
.social-link {
display: flex;
align-items: center;
gap: var(--space-xs);
padding: var(--space-xs) var(--space-sm);
background: rgba(255, 255, 255, 0.1);
border-radius: var(--radius-full);
color: white;
text-decoration: none;
font-size: var(--font-size-sm);
transition: var(--transition);
backdrop-filter: blur(10px);
}
.social-link:hover {
background: rgba(255, 255, 255, 0.2);
transform: translateY(-2px);
}
.social-link.instagram:hover {
background: rgba(225, 48, 108, 0.3);
}
.social-link.spotify:hover {
background: rgba(30, 215, 96, 0.3);
}
.profile-bio {
font-size: var(--font-size-sm);
line-height: 1.6;
opacity: 0.9;
margin: var(--space) 0;
font-style: italic;
}
.profile-passions {
display: flex;
flex-wrap: wrap;
gap: var(--space-xs);
margin: var(--space) 0;
}
.passion-tag {
background: rgba(255, 255, 255, 0.2);
color: white;
padding: var(--space-xs) var(--space-sm);
border-radius: var(--radius-full);
font-size: var(--font-size-xs);
font-weight: 500;
backdrop-filter: blur(10px);
}
.edit-avatar-btn {
position: absolute;
bottom: 0;
right: 0;
background: var(--surface);
border: 2px solid var(--primary);
color: var(--primary);
width: 36px;
height: 36px;
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
cursor: pointer;
transition: var(--transition);
box-shadow: var(--shadow-md);
}
.edit-avatar-btn:hover {
background: var(--primary);
color: white;
transform: scale(1.1);
}
.profile-info {
margin-bottom: var(--space-lg);
}
.profile-name {
font-size: var(--font-size-3xl);
font-weight: 800;
margin-bottom: var(--space-sm);
text-shadow: 0 2px 10px rgba(0, 0, 0, 0.3);
}
.profile-username {
font-size: var(--font-size-lg);
opacity: 0.9;
margin-bottom: var(--space-xs);
}
.profile-email {
font-size: var(--font-size-base);
opacity: 0.8;
}
.profile-header-instagram {
display: flex;
gap: var(--space-xl);
margin-bottom: var(--space-xl);
padding: var(--space-xl);
background: var(--surface);
border-radius: var(--radius-lg);
box-shadow: var(--shadow);
border: 1px solid var(--border-light);
}
.profile-avatar-large {
width: 150px;
height: 150px;
border-radius: 50%;
overflow: hidden;
flex-shrink: 0;
border: 3px solid var(--border-light);
}
.profile-avatar-large img {
width: 100%;
height: 100%;
object-fit: cover;
border-radius: 50%;
display: block;
}
.profile-info-instagram {
flex: 1;
display: flex;
flex-direction: column;
gap: var(--space-lg);
}
.profile-name-section {
display: flex;
align-items: center;
gap: var(--space-lg);
flex-wrap: wrap;
}
.profile-name-instagram {
font-size: var(--font-size-2xl);
font-weight: 300;
color: var(--text-primary);
margin: 0;
}
.btn-edit-profile {
background: var(--surface-secondary);
border: 1px solid var(--border);
color: var(--text-primary);
padding: var(--space-sm) var(--space-lg);
border-radius: var(--radius);
font-size: var(--font-size-sm);
font-weight: 600;
cursor: pointer;
transition: var(--transition);
display: flex;
align-items: center;
gap: var(--space-xs);
}
.btn-edit-profile:hover {
background: var(--surface-tertiary);
border-color: var(--border-dark);
}
.profile-stats-instagram {
display: flex;
gap: var(--space-xl);
}
.stat-item-instagram {
display: flex;
flex-direction: column;
align-items: center;
gap: var(--space-xs);
}
.stat-number-instagram {
font-size: var(--font-size-xl);
font-weight: 600;
color: var(--text-primary);
line-height: 1;
}
.stat-label-instagram {
font-size: var(--font-size-sm);
color: var(--text-secondary);
font-weight: 400;
}
.profile-bio-section {
display: flex;
flex-direction: column;
gap: var(--space);
}
.profile-bio-instagram {
font-size: var(--font-size-base);
color: var(--text-primary);
line-height: 1.5;
}
.profile-details-instagram {
display: flex;
flex-direction: column;
gap: var(--space-xs);
}
.profile-detail-instagram {
display: flex;
align-items: center;
gap: var(--space-sm);
font-size: var(--font-size-sm);
color: var(--text-secondary);
}
.profile-detail-instagram i {
width: 16px;
color: var(--text-muted);
}
.profile-social-instagram {
display: flex;
gap: var(--space-lg);
flex-wrap: wrap;
}
.social-link-instagram {
display: flex;
align-items: center;
gap: var(--space-xs);
font-size: var(--font-size-sm);
color: var(--text-secondary);
text-decoration: none;
transition: var(--transition);
}
.social-link-instagram:hover {
color: var(--text-primary);
}
.social-link-instagram.instagram:hover {
color: #E4405F;
}
.social-link-instagram.spotify:hover {
color: #1DB954;
}
.profile-passions-instagram {
display: flex;
flex-wrap: wrap;
gap: var(--space-xs);
}
.passion-tag-instagram {
background: var(--surface-secondary);
color: var(--text-primary);
padding: var(--space-xs) var(--space-sm);
border-radius: var(--radius);
font-size: var(--font-size-xs);
font-weight: 500;
border: 1px solid var(--border-light);
}
.stats-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
gap: var(--space-lg);
}
.stat-card {
background: var(--surface);
border-radius: var(--radius-lg);
padding: var(--space-lg);
box-shadow: var(--shadow);
border: 1px solid var(--border-light);
transition: var(--transition);
text-align: center;
}
.stat-card:hover {
transform: translateY(-4px);
box-shadow: var(--shadow-lg);
border-color: var(--primary-light);
}
.stat-icon {
width: 60px;
height: 60px;
background: var(--gradient-primary);
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
margin: 0 auto var(--space);
font-size: 1.5rem;
color: white;
}
.stat-content {
display: flex;
flex-direction: column;
gap: var(--space-xs);
}
.stat-detail {
font-size: var(--font-size-xs);
color: var(--text-muted);
}
.content-tabs {
margin-bottom: var(--space-xl);
}
.tab-buttons {
display: flex;
gap: var(--space-sm);
margin-bottom: var(--space-lg);
overflow-x: auto;
padding-bottom: var(--space-sm);
}
.tab-btn {
background: var(--surface);
border: 2px solid var(--border);
color: var(--text-secondary);
padding: var(--space) var(--space-lg);
border-radius: var(--radius);
font-weight: 600;
cursor: pointer;
transition: var(--transition);
white-space: nowrap;
display: flex;
align-items: center;
gap: var(--space-sm);
}
.tab-btn:hover {
border-color: var(--primary);
color: var(--primary);
transform: translateY(-2px);
}
.tab-btn.active {
background: var(--primary);
border-color: var(--primary);
color: white;
}
.tab-content {
display: none;
animation: fadeIn 0.3s ease-out;
}
.tab-content.active {
display: block;
}
@keyframes fadeIn {
from {
opacity: 0;
transform: translateY(20px);
}
to {
opacity: 1;
transform: translateY(0);
}
}
.section-header {
display: flex;
align-items: center;
justify-content: space-between;
margin-bottom: var(--space-lg);
padding-bottom: var(--space);
border-bottom: 2px solid var(--border-light);
}
.section-header h3 {
font-size: var(--font-size-2xl);
font-weight: 700;
color: var(--text-primary);
display: flex;
align-items: center;
gap: var(--space-sm);
}
.event-count,
.games-count {
background: var(--gradient-primary);
color: white;
padding: var(--space-xs) var(--space-sm);
border-radius: var(--radius-full);
font-size: var(--font-size-sm);
font-weight: 600;
}
.empty-state {
text-align: center;
padding: var(--space-2xl) var(--space-lg);
color: var(--text-secondary);
}
.empty-icon {
font-size: 4rem;
margin-bottom: var(--space-lg);
opacity: 0.5;
}
.empty-state h4 {
font-size: var(--font-size-xl);
font-weight: 600;
margin-bottom: var(--space);
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
color: var(--text-primary);
}
.empty-state p {
margin-bottom: var(--space-lg);
line-height: 1.6;
}
.events-horizontal {
display: flex;
gap: var(--space);
overflow-x: auto;
padding: var(--space-sm) 0;
scrollbar-width: thin;
scrollbar-color: var(--primary) var(--border-light);
}
.events-horizontal::-webkit-scrollbar {
height: 6px;
}
.events-horizontal::-webkit-scrollbar-track {
background: var(--border-light);
border-radius: 3px;
}
.events-horizontal::-webkit-scrollbar-thumb {
background: var(--primary);
border-radius: 3px;
}
.event-card-horizontal {
background: var(--surface);
border-radius: var(--radius-lg);
overflow: hidden;
box-shadow: var(--shadow);
transition: var(--transition);
border: 1px solid var(--border-light);
cursor: pointer;
min-width: 280px;
max-width: 320px;
flex-shrink: 0;
}
.event-card-horizontal:hover {
transform: translateY(-4px);
box-shadow: var(--shadow-lg);
border-color: var(--primary-light);
}
.event-image-small {
position: relative;
width: 100%;
height: 120px;
overflow: hidden;
border-radius: var(--radius-lg) var(--radius-lg) 0 0;
margin: 0;
padding: 0;
}
.event-image-small img {
width: 100%;
height: 100%;
object-fit: cover;
transition: var(--transition);
border-radius: var(--radius-lg) var(--radius-lg) 0 0;
margin: 0;
padding: 0;
display: block;
}
.event-card-horizontal:hover .event-image-small img {
transform: scale(1.05);
}
.event-card-horizontal .event-image {
position: relative;
width: 100%;
height: 140px;
overflow: hidden;
border-radius: var(--radius-lg) var(--radius-lg) 0 0;
margin: 0;
padding: 0;
}
.event-card-horizontal .event-image img {
width: 100%;
height: 100%;
object-fit: cover;
border-radius: var(--radius-lg) var(--radius-lg) 0 0;
margin: 0;
padding: 0;
display: block;
}
.friends-avatars-container {
position: absolute;
bottom: -1rem;
right: 0.5rem;
display: flex;
align-items: center;
gap: -8px;
z-index: 15;
flex-direction: row-reverse;
animation: floatContainer 3s ease-in-out infinite;
}
@keyframes floatContainer {
0%, 100% {
transform: translateY(0);
}
50% {
transform: translateY(-4px);
}
}
.friend-avatar {
width: 28px !important;
height: 28px !important;
min-width: 28px !important;
min-height: 28px !important;
max-width: 28px !important;
max-height: 28px !important;
border-radius: 50%;
border: 2px solid var(--surface);
overflow: hidden;
background: var(--surface);
box-shadow: 0 2px 6px rgba(0, 0, 0, 0.3);
transition: var(--transition-fast);
margin-left: 10px;
cursor: pointer;
animation: floatAvatar 3s ease-in-out infinite;
position: relative;
}
.friend-avatar:nth-child(1) {
animation-delay: 0s;
}
.friend-avatar:nth-child(2) {
animation-delay: 0.2s;
}
.friend-avatar:nth-child(3) {
animation-delay: 0.4s;
}
.friend-avatar:nth-child(4) {
animation-delay: 0.6s;
}
.friend-avatar:nth-child(5) {
animation-delay: 0.8s;
}
@keyframes floatAvatar {
0%, 100% {
transform: translateY(0) translateX(0);
}
25% {
transform: translateY(-4px) translateX(1px);
}
50% {
transform: translateY(-6px) translateX(0);
}
75% {
transform: translateY(-4px) translateX(-1px);
}
}
.friend-avatar:first-child {
margin-left: 0;
}
.friend-avatar:hover {
transform: scale(1.2) translateY(-8px);
z-index: 20 !important;
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.4);
animation: none;
}
.friend-avatar img {
width: 100% !important;
height: 100% !important;
object-fit: cover;
display: block;
}
.event-ongoing-fire {
position: relative;
border: 2px solid #ff6b6b !important;
box-shadow: 0 0 20px rgba(255, 107, 107, 0.5), 0 4px 15px rgba(255, 107, 107, 0.3) !important;
animation: fireGlow 2s ease-in-out infinite;
}
@keyframes fireGlow {
0%, 100% {
box-shadow: 0 0 20px rgba(255, 107, 107, 0.5), 0 4px 15px rgba(255, 107, 107, 0.3);
border-color: #ff6b6b;
}
50% {
box-shadow: 0 0 30px rgba(255, 107, 107, 0.8), 0 4px 20px rgba(255, 107, 107, 0.5);
border-color: #ff8e53;
}
}
.fire-overlay {
position: absolute;
top: 0.5rem;
right: 0.5rem;
background: linear-gradient(135deg, #ff6b6b 0%, #ff8e53 100%);
color: white;
padding: 0.5rem 1rem;
border-radius: 999px;
font-size: 0.75rem;
font-weight: 700;
display: flex;
align-items: center;
gap: 0.5rem;
box-shadow: 0 4px 12px rgba(255, 107, 107, 0.4);
z-index: 10;
animation: firePulse 1.5s ease-in-out infinite;
}
@keyframes firePulse {
0%, 100% {
transform: scale(1);
box-shadow: 0 4px 12px rgba(255, 107, 107, 0.4);
}
50% {
transform: scale(1.05);
box-shadow: 0 6px 16px rgba(255, 107, 107, 0.6);
}
}
.fire-overlay i {
animation: fireFlicker 1s ease-in-out infinite;
}
@keyframes fireFlicker {
0%, 100% {
transform: scale(1) rotate(0deg);
}
25% {
transform: scale(1.1) rotate(-5deg);
}
75% {
transform: scale(1.1) rotate(5deg);
}
}
@keyframes pulse {
0%, 100% {
opacity: 1;
transform: scale(1);
}
50% {
opacity: 0.8;
transform: scale(1.1);
}
}
.event-header-new {
display: flex;
justify-content: space-between;
align-items: flex-start;
gap: var(--space-xs);
margin-bottom: var(--space-sm);
}
.event-title-new {
font-size: var(--font-size-base);
font-weight: 700;
color: var(--text-primary);
line-height: 1.3;
margin: 0;
flex: 1;
display: -webkit-box;
-webkit-line-clamp: 2;
-webkit-box-orient: vertical;
overflow: hidden;
}
.event-private-open-badge {
display: inline-flex;
align-items: center;
justify-content: center;
flex-shrink: 0;
margin-top: 1px;
color: #16a34a;
font-size: 13px;
opacity: 0.95;
}
.event-private-open-badge i {
font-size: 13px;
}
.event-participants-new {
display: flex;
align-items: center;
gap: 4px;
color: var(--text-primary);
font-size: var(--font-size-sm);
font-weight: 600;
flex-shrink: 0;
white-space: nowrap;
}
.event-participants-new i {
font-size: 12px;
color: var(--text-secondary);
}
.event-footer-new {
display: flex;
justify-content: space-between;
align-items: center;
}
.event-date-badge {
background: rgba(177, 170, 255, 0.2);
color: var(--text-primary);
padding: 6px var(--space-sm);
border-radius: var(--radius);
font-size: var(--font-size-xs);
font-weight: 600;
flex: 1;
text-align: center;
}
.event-favorite-btn-new {
background: transparent;
border: none;
cursor: pointer;
padding: 4px;
display: flex;
align-items: center;
justify-content: center;
transition: all 0.3s ease;
width: 42px;
height: 42px;
border-radius: 50%;
}
.event-favorite-btn-new:hover {
background: rgba(255, 255, 255, 0.1);
transform: scale(1.1);
}
.event-favorite-btn-new i {
font-size: 20px;
color: #999;
transition: all 0.3s ease;
}
.event-favorite-btn-new.active i,
.event-favorite-btn-new.active i.fas {
color: #ff4757;
}
.event-action-new {
display: flex;
justify-content: center;
}
.event-register-btn {
background: transparent;
border: 1px solid rgba(255, 255, 255, 0.3);
color: #FF8C42;
padding: var(--space-xs) var(--space-lg);
border-radius: var(--radius);
font-size: var(--font-size-sm);
font-weight: 600;
cursor: pointer;
transition: all 0.3s ease;
width: 100%;
max-width: 200px;
}
.event-register-btn:hover:not(:disabled) {
background: rgba(255, 140, 66, 0.1);
border-color: #FF8C42;
}
.event-register-btn:disabled {
opacity: 0.6;
cursor: not-allowed;
}
.event-type-badge-small {
position: absolute;
top: var(--space-xs);
right: var(--space-xs);
background: var(--gradient-secondary);
color: white;
padding: 2px var(--space-xs);
border-radius: var(--radius-full);
font-size: 0.6rem;
font-weight: 600;
text-transform: uppercase;
box-shadow: var(--shadow-sm);
}
.event-content-small {
padding: var(--space);
display: flex;
gap: var(--space-sm);
}
.event-date-small {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
background: var(--gradient-primary);
color: white;
padding: var(--space-xs);
border-radius: var(--radius);
min-width: 50px;
height: 50px;
flex-shrink: 0;
}
.event-date-small .day {
font-size: var(--font-size-lg);
font-weight: 700;
line-height: 1;
}
.event-date-small .month {
font-size: var(--font-size-xs);
font-weight: 600;
text-transform: uppercase;
}
.event-details-small {
flex: 1;
display: flex;
flex-direction: column;
gap: var(--space-xs);
}
.event-title-small {
font-size: var(--font-size-base);
font-weight: 700;
color: var(--text-primary);
line-height: 1.3;
margin: 0;
display: -webkit-box;
-webkit-line-clamp: 2;
-webkit-box-orient: vertical;
overflow: hidden;
}
.event-location-small {
color: var(--text-secondary);
font-size: var(--font-size-xs);
margin: 0;
display: flex;
align-items: center;
gap: var(--space-xs);
}
.event-location-small i {
font-size: 0.7rem;
}
.event-meta-small {
display: flex;
justify-content: space-between;
align-items: center;
margin-top: auto;
}
.participants-small {
display: flex;
align-items: center;
gap: var(--space-xs);
color: var(--text-muted);
font-size: var(--font-size-xs);
}
.participants-small i {
font-size: 0.7rem;
}
.status-small {
font-size: var(--font-size-xs);
font-weight: 600;
padding: 2px var(--space-xs);
border-radius: var(--radius-sm);
}
.status-small.upcoming {
background: rgba(16, 185, 129, 0.1);
color: var(--success);
}
.status-small.past {
background: rgba(107, 114, 128, 0.1);
color: var(--text-muted);
}
@media (max-width: 768px) {
.profile-header-instagram {
flex-direction: column;
text-align: center;
gap: var(--space-lg);
padding: var(--space-lg);
}
.profile-avatar-large {
width: 120px;
height: 120px;
}
.profile-stats {
justify-content: center;
gap: var(--space-lg);
}
.profile-actions {
flex-direction: column;
gap: var(--space-sm);
}
.profile-actions .btn-primary,
.profile-actions .btn-outline {
width: 100%;
justify-content: center;
}
.content-tabs {
margin: var(--space-lg) var(--space);
}
.tab-buttons {
flex-direction: column;
gap: var(--space-xs);
}
.tab-btn {
width: 100%;
justify-content: center;
}
.events-horizontal {
gap: var(--space-sm);
padding: var(--space-xs) 0;
}
.event-card-horizontal {
min-width: 200px;
max-width: 200px;
}
.profile-stats {
margin: 0 auto;
}
.profile-name-section {
justify-content: center;
flex-direction: column;
gap: var(--space);
}
.profile-stats-instagram {
justify-content: center;
gap: var(--space-lg);
}
.profile-social-instagram {
justify-content: center;
}
.profile-passions-instagram {
justify-content: center;
}
}
@media (max-width: 480px) {
.profile-header-instagram {
padding: var(--space);
gap: var(--space);
}
.profile-avatar-large {
width: 100px;
height: 100px;
}
.profile-name-instagram {
font-size: var(--font-size-xl);
}
.profile-stats-instagram {
gap: var(--space);
}
.stat-number-instagram {
font-size: var(--font-size-lg);
}
.stat-label-instagram {
font-size: var(--font-size-xs);
}
}
@media (max-width: 768px) {
.events-grid {
grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
gap: var(--space);
padding: 0 var(--space);
}
.event-card {
margin-bottom: var(--space);
}
.event-image {
height: 180px;
position: relative;
}
.event-favorite-btn {
position: absolute;
top: var(--space-sm);
right: var(--space-sm);
width: 36px;
height: 36px;
border-radius: 50%;
background: rgba(255, 255, 255, 0.9);
border: none;
display: flex;
align-items: center;
justify-content: center;
cursor: pointer;
transition: all 0.3s ease;
z-index: 10;
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
}
.event-favorite-btn:hover {
background: rgba(255, 255, 255, 1);
transform: scale(1.1);
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2);
}
.event-favorite-btn i {
color: #999;
font-size: 16px;
transition: all 0.3s ease;
}
.event-favorite-btn.active i {
color: #ff4757;
transform: scale(1);
}
.event-favorite-btn:hover i {
transform: scale(1.2);
}
.event-favorite-btn-large {
width: 48px;
height: 48px;
border-radius: 50%;
background: rgba(255, 255, 255, 0.95);
border: 2px solid rgba(255, 255, 255, 0.5);
display: flex;
align-items: center;
justify-content: center;
cursor: pointer;
transition: all 0.3s ease;
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2);
}
.event-favorite-btn-large:hover {
transform: scale(1.1);
box-shadow: 0 6px 16px rgba(0, 0, 0, 0.3);
}
.event-favorite-btn-large i {
color: #999;
font-size: 24px;
transition: all 0.3s ease;
}
.event-favorite-btn-large.active i {
color: #ff4757;
}
.event-favorite-btn-large:hover i {
transform: scale(1.2);
}
.event-content {
padding: var(--space);
}
.event-title {
font-size: var(--font-size-lg);
line-height: 1.3;
}
.event-description {
font-size: var(--font-size-sm);
line-height: 1.4;
-webkit-line-clamp: 3;
-webkit-box-orient: vertical;
overflow: hidden;
display: -webkit-box;
}
}
@media (max-width: 480px) {
.events-grid {
grid-template-columns: 1fr;
gap: var(--space-sm);
padding: 0 var(--space-sm);
}
.event-card {
margin-bottom: var(--space-sm);
}
.event-image {
height: 160px;
}
.event-content {
padding: var(--space-sm);
}
.event-title {
font-size: var(--font-size-base);
}
.event-description {
font-size: var(--font-size-xs);
-webkit-line-clamp: 2;
}
}
@media (max-width: 768px) {
.filter-chips {
display: flex;
gap: var(--space-xs);
padding: 0 var(--space);
overflow-x: auto;
scrollbar-width: none;
-ms-overflow-style: none;
}
.filter-chips::-webkit-scrollbar {
display: none;
}
.chip {
flex-shrink: 0;
padding: var(--space-xs) var(--space-sm);
font-size: var(--font-size-sm);
white-space: nowrap;
}
}
@media (max-width: 768px) {
.search-bar {
margin: var(--space);
padding: var(--space-sm);
}
.search-bar input {
font-size: var(--font-size-base);
padding: var(--space-sm) var(--space);
}
}
@media (max-width: 768px) {
.auth-container {
padding: var(--space);
}
.auth-card {
margin: var(--space-sm);
padding: var(--space-lg);
max-width: none;
}
.auth-header h1 {
font-size: var(--font-size-2xl);
}
.auth-header p {
font-size: var(--font-size-base);
}
.form-group {
margin-bottom: var(--space-lg);
}
.input-container {
padding: var(--space-sm) var(--space);
}
.input-container input {
font-size: var(--font-size-base);
padding: var(--space-sm) 0;
margin-left: var(--space-2xl);
}
.auth-btn {
padding: var(--space) var(--space-lg);
font-size: var(--font-size-base);
}
.floating-shapes {
display: none;
}
}
@media (max-width: 480px) {
.auth-container {
padding: var(--space-sm);
}
.auth-card {
margin: var(--space-xs);
padding: var(--space);
}
.auth-header h1 {
font-size: var(--font-size-xl);
}
.auth-header p {
font-size: var(--font-size-sm);
}
.form-group {
margin-bottom: var(--space);
}
.input-container {
padding: var(--space-xs) var(--space-sm);
}
.input-container input {
padding: 10px 10px 10px 35px;
}
.input-container textarea {
padding: 10px 35px 10px 35px;
}
.input-icon {
left: 12px;
}
.password-toggle {
right: var(--space-sm);
}
.auth-btn {
padding: var(--space-sm) var(--space);
font-size: var(--font-size-sm);
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
.auth-btn span {
font-size: var(--font-size-sm);
}
}
@media (max-width: 768px) {
.games-container {
padding: var(--space);
}
.games-title {
font-size: var(--font-size-2xl);
}
.games-subtitle {
font-size: var(--font-size-base);
}
.game-card {
height: 160px;
margin-bottom: var(--space);
}
.game-overlay {
padding: var(--space);
}
.game-name {
font-size: var(--font-size-xl);
}
.game-description {
font-size: var(--font-size-sm);
max-width: 300px;
}
.stats-grid {
grid-template-columns: repeat(3, 1fr);
gap: var(--space-sm);
}
.stat-item {
padding: var(--space-sm);
}
.stat-number {
font-size: var(--font-size-xl);
}
}
@media (max-width: 480px) {
.games-container {
padding: var(--space-sm);
}
.games-title {
font-size: var(--font-size-xl);
}
.game-card {
height: 140px;
}
.game-name {
font-size: var(--font-size-lg);
}
.game-description {
font-size: var(--font-size-xs);
max-width: 250px;
}
.stats-grid {
grid-template-columns: 1fr;
gap: var(--space-xs);
}
}
@media (max-width: 768px) {
.leaderboard-container {
padding: var(--space);
}
.leaderboard-title {
font-size: var(--font-size-xl);
}
.game-info {
flex-direction: column;
text-align: center;
gap: var(--space);
}
.user-score {
font-size: var(--font-size-2xl);
}
.leaderboard-header-row,
.leaderboard-item {
grid-template-columns: 60px 1fr 100px 100px;
gap: var(--space-sm);
padding: var(--space-sm);
}
.date {
display: none;
}
.filter-tabs {
flex-wrap: wrap;
gap: var(--space-xs);
}
.filter-tab {
flex: 1;
min-width: 120px;
text-align: center;
}
}
@media (max-width: 480px) {
.leaderboard-container {
padding: var(--space-sm);
}
.leaderboard-title {
font-size: var(--font-size-lg);
}
.leaderboard-header-row,
.leaderboard-item {
grid-template-columns: 50px 1fr 80px;
gap: var(--space-xs);
padding: var(--space-xs);
}
.reaction-time {
display: none;
}
.player-avatar {
width: 32px;
height: 32px;
font-size: var(--font-size-xs);
}
.rank {
font-size: var(--font-size-base);
}
.filter-tabs {
flex-direction: column;
}
.filter-tab {
min-width: auto;
}
}
@media (max-width: 768px) {
.search-section {
margin-bottom: var(--space-lg);
padding: 0 var(--space);
}
.search-box {
flex-direction: column;
gap: var(--space-sm);
}
.user-card {
flex-direction: column;
text-align: center;
padding: var(--space-md);
}
.user-card .user-info {
margin: var(--space-sm) 0;
}
.user-card .user-actions {
width: 100%;
}
.user-card .btn-add-friend,
.user-card .btn-friend {
width: 100%;
justify-content: center;
}
.friend-card {
flex-direction: column;
text-align: center;
padding: var(--space-md);
}
.friend-card .friend-info {
margin: var(--space-sm) 0;
}
.friend-card .friend-actions {
width: 100%;
justify-content: center;
gap: var(--space-sm);
}
.friend-card .btn-view-profile,
.friend-card .btn-remove-friend {
flex: 1;
min-width: 0;
}
.search-input {
font-size: var(--font-size-base);
padding: var(--space-sm) var(--space);
}
.search-btn {
padding: var(--space-sm) var(--space-lg);
font-size: var(--font-size-base);
}
.friend-card {
flex-direction: column;
text-align: center;
gap: var(--space-sm);
padding: var(--space-lg);
}
.friend-avatar {
width: 80px;
height: 80px;
margin: 0 auto;
}
.friend-info h3 {
font-size: var(--font-size-lg);
}
.friend-info p {
font-size: var(--font-size-base);
}
.user-details {
justify-content: center;
gap: var(--space);
}
.friend-actions {
justify-content: center;
gap: var(--space-sm);
}
.btn-action {
padding: var(--space-sm);
min-width: 44px;
min-height: 44px;
}
.stats-grid {
grid-template-columns: repeat(3, 1fr);
gap: var(--space-sm);
}
.stat-item {
padding: var(--space-sm);
}
.stat-value {
font-size: var(--font-size-xl);
}
}
@media (max-width: 480px) {
.search-section {
padding: 0 var(--space-sm);
}
.friend-card {
padding: var(--space);
}
.friend-avatar {
width: 60px;
height: 60px;
}
.friend-info h3 {
font-size: var(--font-size-base);
}
.friend-info p {
font-size: var(--font-size-sm);
}
.user-details {
flex-direction: column;
gap: var(--space-xs);
}
.stats-grid {
grid-template-columns: 1fr;
gap: var(--space-xs);
}
.stat-value {
font-size: var(--font-size-lg);
}
}
@media (max-width: 768px) {
.onboarding-container {
padding: var(--space);
}
.onboarding-card {
margin: var(--space-sm);
padding: var(--space-lg);
max-width: none;
}
.step-indicator {
gap: var(--space-xs);
margin-bottom: var(--space-lg);
}
.step-dot {
width: 8px;
height: 8px;
}
.step-title {
font-size: var(--font-size-xl);
}
.step-subtitle {
font-size: var(--font-size-base);
}
.step-input {
font-size: var(--font-size-base);
padding: var(--space-sm) var(--space);
}
.passions-grid {
grid-template-columns: repeat(2, 1fr);
gap: var(--space-sm);
}
.passion-card {
padding: var(--space-sm);
}
.passion-icon {
font-size: var(--font-size-lg);
}
.passion-name {
font-size: var(--font-size-sm);
}
.social-connect {
flex-direction: column;
text-align: center;
gap: var(--space-sm);
padding: var(--space-lg);
}
.social-icon {
width: 60px;
height: 60px;
font-size: var(--font-size-xl);
}
.social-text {
text-align: center;
}
.social-title {
font-size: var(--font-size-lg);
}
.social-subtitle {
font-size: var(--font-size-sm);
}
.step-buttons {
flex-direction: column;
gap: var(--space-sm);
}
.btn-step {
width: 100%;
padding: var(--space) var(--space-lg);
font-size: var(--font-size-base);
}
.avatar-upload-container {
gap: var(--space);
}
.avatar-preview {
width: 120px;
height: 120px;
}
.avatar-placeholder {
font-size: 2rem;
}
.floating-elements {
display: none;
}
}
@media (max-width: 480px) {
.onboarding-container {
padding: var(--space-sm);
}
.onboarding-card {
margin: var(--space-xs);
padding: var(--space);
}
.step-title {
font-size: var(--font-size-lg);
}
.step-subtitle {
font-size: var(--font-size-sm);
}
.passions-grid {
grid-template-columns: 1fr;
gap: var(--space-xs);
}
.passion-card {
padding: var(--space-xs);
}
.social-connect {
padding: var(--space);
}
.social-icon {
width: 50px;
height: 50px;
font-size: var(--font-size-lg);
}
.social-title {
font-size: var(--font-size-base);
}
.social-subtitle {
font-size: var(--font-size-xs);
}
.btn-step {
padding: var(--space-sm) var(--space);
font-size: var(--font-size-sm);
}
.avatar-preview {
width: 100px;
height: 100px;
}
.avatar-placeholder {
font-size: 1.5rem;
}
}
@media (max-width: 768px) {
.events-horizontal {
gap: var(--space-sm);
padding: var(--space-xs) 0;
}
.event-card-horizontal {
min-width: 220px;
max-width: 220px;
}
.event-image-small {
height: 100px;
border-radius: var(--radius-lg) var(--radius-lg) 0 0;
}
.event-image-small img {
border-radius: var(--radius-lg) var(--radius-lg) 0 0;
}
.event-content-small {
padding: var(--space-sm);
}
.event-title-small {
font-size: var(--font-size-sm);
}
}
@media (max-width: 480px) {
.event-card-horizontal {
min-width: 66.67vw;
max-width: 66.67vw;
width: 66.67vw;
}
.event-image-small {
height: 80px;
border-radius: var(--radius-lg) var(--radius-lg) 0 0;
}
.event-image-small img {
border-radius: var(--radius-lg) var(--radius-lg) 0 0;
}
.event-date-small {
min-width: 40px;
height: 40px;
}
.event-date-small .day {
font-size: var(--font-size-base);
}
.event-date-small .month {
font-size: 0.6rem;
}
.event-card-horizontal .event-image {
height: 120px;
border-radius: var(--radius-lg) var(--radius-lg) 0 0;
}
.event-card-horizontal .event-image img {
border-radius: var(--radius-lg) var(--radius-lg) 0 0;
margin: 0;
padding: 0;
display: block;
}
.friends-avatars-container {
bottom: -0.5rem;
right: 0.25rem;
flex-wrap: wrap;
justify-content: flex-end;
align-items: flex-end;
max-width: calc(100% - 0.5rem);
}
.friends-avatars-container .friend-avatar {
width: 24px !important;
height: 24px !important;
min-width: 24px !important;
min-height: 24px !important;
max-width: 24px !important;
max-height: 24px !important;
margin-left: 6px !important;
margin-bottom: 4px;
border-width: 2px;
position: relative;
}
.friends-avatars-container .friend-avatar:first-child {
margin-left: 0 !important;
}
.friends-avatars-container .friend-avatar:first-child {
margin-left: 0 !important;
}
}
.event-hero {
margin-bottom: var(--space-xl);
}
.event-image-container {
position: relative;
width: 100%;
height: 300px;
border-radius: var(--radius-xl);
overflow: hidden;
margin-bottom: var(--space-lg);
}
.event-hero-image {
width: 100%;
height: 100%;
object-fit: cover;
transition: var(--transition);
}
.event-image-link {
display: block;
position: relative;
width: 100%;
height: 100%;
cursor: pointer;
z-index: 1;
}
.event-hero-image.clickable {
cursor: pointer;
transition: transform 0.3s ease, filter 0.3s ease;
display: block;
width: 100%;
height: 100%;
}
.event-image-link:hover .event-hero-image.clickable {
transform: scale(1.05);
}
.event-image-overlay-hint {
position: absolute;
bottom: var(--space-lg);
left: 50%;
transform: translateX(-50%);
background: rgba(0, 0, 0, 0.8);
backdrop-filter: blur(10px);
color: white;
padding: var(--space-sm) var(--space-lg);
border-radius: var(--radius-full);
font-size: var(--font-size-sm);
font-weight: 600;
display: flex;
align-items: center;
gap: var(--space-xs);
opacity: 0;
transition: opacity 0.3s ease, transform 0.3s ease;
pointer-events: none;
z-index: 2;
}
.event-image-link:hover .event-image-overlay-hint {
opacity: 1;
transform: translateX(-50%) translateY(-5px);
}
.event-image-overlay-hint i {
font-size: var(--font-size-lg);
}
.event-overlay {
position: absolute;
top: var(--space);
right: var(--space);
display: flex;
flex-direction: column;
gap: var(--space-sm);
z-index: 3;
pointer-events: none;
}
.event-category-badge {
background: var(--primary);
color: var(--primary-light);
padding: var(--space-xs) var(--space-sm);
border-radius: var(--radius-full);
font-size: var(--font-size-xs);
font-weight: 600;
text-transform: uppercase;
box-shadow: var(--shadow-md);
display: flex;
align-items: center;
gap: var(--space-xs);
}
.event-status {
background: var(--primary);
color: var(--text-muted);
padding: var(--space-xs) var(--space-sm);
border-radius: var(--radius-full);
font-size: var(--font-size-xs);
font-weight: 600;
backdrop-filter: blur(10px);
display: flex;
align-items: center;
gap: var(--space-xs);
}
.event-status.upcoming {
background: var(--primary);
}
.event-status.ongoing {
background: linear-gradient(135deg, #ff6b6b 0%, #ff8e53 100%);
animation: fireGlow 2s ease-in-out infinite;
}
.event-status.past {
background: var(--primary);
}
.event-hero-content {
text-align: center;
}
.event-title {
font-size: var(--font-size-4xl);
font-weight: 800;
margin-bottom: var(--space);
color: var(--text-primary);
line-height: 1.2;
}
.event-author {
font-size: var(--font-size-lg);
color: var(--text-secondary);
display: flex;
align-items: center;
justify-content: center;
gap: var(--space-sm);
}
.event-stats {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
gap: var(--space-lg);
margin-bottom: var(--space-xl);
}
.stat-item {
background: var(--surface);
border-radius: var(--radius-lg);
padding: var(--space-lg);
box-shadow: var(--shadow);
border: 1px solid var(--border-light);
display: flex;
align-items: center;
gap: var(--space);
}
.stat-icon {
width: 50px;
height: 50px;
background: var(--primary);
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
font-size: 1.25rem;
color: white;
}
.stat-content {
display: flex;
flex-direction: column;
gap: var(--space-xs);
}
.stat-label {
font-size: var(--font-size-sm);
color: var(--text-secondary);
font-weight: 500;
}
.stat-value {
font-size: var(--font-size-lg);
font-weight: 700;
color: var(--text-primary);
}
.stat-value.available {
color: var(--success);
}
.stat-value.full {
color: var(--danger);
}
.event-section {
background: var(--surface);
border-radius: var(--radius-lg);
padding: var(--space-xl);
margin-bottom: var(--space-lg);
box-shadow: var(--shadow);
border: 1px solid var(--border-light);
}
.event-description {
line-height: 1.8;
color: var(--text-secondary);
}
.event-highlight {
background: var(--surface-secondary);
border-left: 4px solid var(--primary);
padding: var(--space-lg);
border-radius: var(--radius);
margin-top: var(--space-lg);
display: flex;
align-items: flex-start;
gap: var(--space);
}
.event-highlight i {
color: var(--warning);
font-size: 1.5rem;
margin-top: 2px;
}
.event-actions {
background: var(--surface);
border-radius: var(--radius-lg);
padding: var(--space-sm);
box-shadow: var(--shadow);
border: 1px solid var(--border-light);
margin-bottom: var(--space-lg);
}
.registration-status {
display: flex;
align-items: center;
gap: var(--space);
padding: var(--space-lg);
border-radius: var(--radius);
margin-bottom: var(--space-lg);
font-weight: 600;
}
.registration-status.registered {
background: rgba(16, 185, 129, 0.1);
color: var(--success);
border: 1px solid rgba(16, 185, 129, 0.2);
}
.registration-status.full {
background: rgba(239, 68, 68, 0.1);
color: var(--danger);
border: 1px solid rgba(239, 68, 68, 0.2);
}
.registration-status.past {
background: rgba(107, 114, 128, 0.1);
color: var(--text-muted);
border: 1px solid rgba(107, 114, 128, 0.2);
}
.spots-info {
text-align: center;
color: var(--text-secondary);
font-size: var(--font-size-sm);
margin-top: var(--space);
display: flex;
align-items: center;
justify-content: center;
gap: var(--space-xs);
}
.action-buttons {
display: flex;
gap: var(--space);
flex-wrap: wrap;
}
@media (max-width: 768px) {
.event-actions {
padding: var(--space-sm);
margin: 0 var(--space) var(--space-sm);
}
.registration-status {
padding: var(--space);
margin-bottom: var(--space);
font-size: var(--font-size-sm);
flex-direction: column;
text-align: center;
gap: var(--space-sm);
}
.registration-status i {
font-size: var(--font-size-lg);
}
.action-buttons {
flex-direction: column;
gap: var(--space-sm);
}
.btn-primary,
.btn-secondary,
.btn-outline {
width: 100%;
justify-content: center;
padding: var(--space) var(--space-lg);
font-size: var(--font-size-base);
}
.btn-primary.btn-large {
padding: var(--space-lg) var(--space-xl);
font-size: var(--font-size-lg);
}
.spots-info {
font-size: var(--font-size-xs);
margin-top: var(--space-sm);
}
}
@media (max-width: 480px) {
.event-actions {
padding: var(--space);
margin: 0 var(--space-sm) var(--space-sm);
border-radius: var(--radius);
}
.registration-status {
padding: var(--space-sm);
font-size: var(--font-size-xs);
flex-direction: column;
text-align: center;
gap: var(--space-xs);
}
.registration-status span {
line-height: 1.4;
}
.btn-primary,
.btn-secondary,
.btn-outline {
padding: var(--space-sm) var(--space);
font-size: var(--font-size-sm);
min-height: 44px;
}
.btn-primary.btn-large {
padding: var(--space) var(--space-lg);
font-size: var(--font-size-base);
min-height: 48px;
}
.spots-info {
font-size: var(--font-size-xs);
margin-top: var(--space-xs);
line-height: 1.3;
}
.btn-primary i,
.btn-secondary i,
.btn-outline i {
font-size: var(--font-size-sm);
}
}
@media (max-width: 320px) {
.event-actions {
padding: var(--space-sm);
margin: 0 var(--space-xs) var(--space-sm);
}
.registration-status {
padding: var(--space-xs);
font-size: 0.7rem;
}
.btn-primary,
.btn-secondary,
.btn-outline {
padding: var(--space-xs) var(--space-sm);
font-size: 0.75rem;
min-height: 40px;
}
.btn-primary.btn-large {
padding: var(--space-sm) var(--space);
font-size: var(--font-size-sm);
min-height: 44px;
}
.spots-info {
font-size: 0.7rem;
}
}
@media (min-width: 481px) and (max-width: 768px) {
.event-actions {
padding: var(--space-sm);
margin: 0 var(--space) var(--space-sm);
}
.action-buttons {
display: grid;
grid-template-columns: 1fr 1fr;
gap: var(--space);
}
.btn-primary.btn-large {
grid-column: 1 / -1;
}
}
.games-hero {
background: var(--gradient-primary);
color: white;
padding: var(--space-2xl) var(--space-lg);
border-radius: var(--radius-xl);
margin-bottom: var(--space-xl);
text-align: center;
position: relative;
overflow: hidden;
}
.hero-content h2 {
font-size: var(--font-size-3xl);
font-weight: 800;
margin-bottom: var(--space);
text-shadow: 0 2px 10px rgba(0, 0, 0, 0.3);
}
.hero-content p {
font-size: var(--font-size-lg);
opacity: 0.95;
margin-bottom: var(--space-xl);
max-width: 600px;
margin-left: auto;
margin-right: auto;
}
.hero-stats {
display: flex;
justify-content: center;
gap: var(--space-xl);
flex-wrap: wrap;
}
.hero-stat {
text-align: center;
}
.hero-stat .stat-number {
font-size: var(--font-size-3xl);
font-weight: 800;
display: block;
margin-bottom: var(--space-xs);
}
.hero-stat .stat-label {
font-size: var(--font-size-sm);
opacity: 0.9;
}
.hero-visual {
margin-top: var(--space-xl);
}
.game-icons {
display: flex;
justify-content: center;
gap: var(--space-lg);
flex-wrap: wrap;
}
.game-icon {
font-size: 3rem;
animation: float 3s ease-in-out infinite;
opacity: 0.8;
}
.game-icon:nth-child(2) {
animation-delay: 0.5s;
}
.game-icon:nth-child(3) {
animation-delay: 1s;
}
.game-icon:nth-child(4) {
animation-delay: 1.5s;
}
.user-stats-section {
margin-bottom: var(--space-xl);
}
.games-section {
margin-bottom: var(--space-xl);
}
.games-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
gap: var(--space-lg);
}
.game-card {
background: var(--surface);
border-radius: var(--radius-lg);
overflow: hidden;
box-shadow: var(--shadow);
transition: var(--transition);
border: 1px solid var(--border-light);
cursor: pointer;
}
.game-card:hover {
transform: translateY(-8px);
box-shadow: var(--shadow-xl);
border-color: var(--primary-light);
}
.game-card.played {
border-color: var(--success);
}
.game-image {
position: relative;
width: 100%;
height: 200px;
overflow: hidden;
}
.game-image img {
width: 100%;
height: 100%;
object-fit: cover;
transition: var(--transition);
}
.game-placeholder {
width: 100%;
height: 100%;
background: var(--gradient-secondary);
display: flex;
align-items: center;
justify-content: center;
font-size: 4rem;
color: white;
}
.game-overlay {
position: absolute;
top: var(--space-sm);
right: var(--space-sm);
display: flex;
flex-direction: column;
gap: var(--space-xs);
}
.game-difficulty {
background: rgba(0, 0, 0, 0.8);
color: white;
padding: var(--space-xs) var(--space-sm);
border-radius: var(--radius-full);
font-size: var(--font-size-xs);
font-weight: 600;
text-transform: uppercase;
backdrop-filter: blur(10px);
display: flex;
align-items: center;
gap: var(--space-xs);
}
.game-difficulty.facile {
background: rgba(16, 185, 129, 0.9);
}
.game-difficulty.moyen {
background: rgba(245, 158, 11, 0.9);
}
.game-difficulty.difficile {
background: rgba(239, 68, 68, 0.9);
}
.game-score {
background: rgba(139, 92, 246, 0.9);
color: white;
padding: var(--space-xs) var(--space-sm);
border-radius: var(--radius-full);
font-size: var(--font-size-xs);
font-weight: 600;
backdrop-filter: blur(10px);
display: flex;
align-items: center;
gap: var(--space-xs);
}
.game-content {
padding: var(--space-lg);
}
.game-header {
display: flex;
align-items: center;
justify-content: space-between;
margin-bottom: var(--space);
}
.game-title {
font-size: var(--font-size-xl);
font-weight: 700;
color: var(--text-primary);
margin: 0;
}
.game-type {
background: var(--surface-secondary);
color: var(--text-secondary);
padding: var(--space-xs) var(--space-sm);
border-radius: var(--radius-full);
font-size: var(--font-size-xs);
font-weight: 500;
display: flex;
align-items: center;
gap: var(--space-xs);
}
.game-description {
color: var(--text-secondary);
font-size: var(--font-size-sm);
margin-bottom: var(--space-lg);
line-height: 1.6;
}
.game-actions {
display: flex;
gap: var(--space-sm);
flex-wrap: wrap;
}
.quick-actions {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
gap: var(--space-lg);
margin-bottom: var(--space-xl);
}
.action-card {
background: var(--surface);
border-radius: var(--radius-lg);
padding: var(--space-xl);
box-shadow: var(--shadow);
border: 1px solid var(--border-light);
transition: var(--transition);
display: flex;
align-items: center;
gap: var(--space-lg);
}
.action-card:hover {
transform: translateY(-4px);
box-shadow: var(--shadow-lg);
border-color: var(--primary-light);
}
.action-icon {
width: 60px;
height: 60px;
background: var(--gradient-primary);
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
font-size: 1.5rem;
color: white;
flex-shrink: 0;
}
.action-content {
flex: 1;
}
.action-content h4 {
font-size: var(--font-size-lg);
font-weight: 700;
margin-bottom: var(--space-xs);
color: var(--text-primary);
}
.action-content p {
color: var(--text-secondary);
font-size: var(--font-size-sm);
margin-bottom: var(--space);
line-height: 1.6;
}
.auth-container {
min-height: 100vh;
display: flex;
align-items: center;
justify-content: center;
padding: var(--space);
background: var(--background);
position: relative;
overflow: hidden;
}
.auth-background {
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
z-index: 0;
}
.floating-shapes {
position: relative;
width: 100%;
height: 100%;
}
.shape {
position: absolute;
border-radius: 50%;
background: rgba(245, 241, 255, 0.24);
animation: float-shape 20s linear infinite;
}
.shape-1 {
width: 100px;
height: 100px;
top: 10%;
left: 10%;
animation-delay: 0s;
}
.shape-2 {
width: 150px;
height: 150px;
top: 20%;
right: 15%;
animation-delay: -5s;
}
.shape-3 {
width: 80px;
height: 80px;
bottom: 30%;
left: 20%;
animation-delay: -10s;
}
.shape-4 {
width: 120px;
height: 120px;
bottom: 20%;
right: 25%;
animation-delay: -15s;
}
@keyframes float-shape {
0% {
transform: translate(0, 0) rotate(0deg);
opacity: 0.1;
}
25% {
transform: translate(100px, -50px) rotate(90deg);
opacity: 0.3;
}
50% {
transform: translate(50px, 100px) rotate(180deg);
opacity: 0.1;
}
75% {
transform: translate(-50px, 50px) rotate(270deg);
opacity: 0.3;
}
100% {
transform: translate(0, 0) rotate(360deg);
opacity: 0.1;
}
}
.auth-card {
background: var(--surface);
border-radius: var(--radius-xl);
padding: var(--space-2xl);
box-shadow: var(--shadow-2xl);
width: 100%;
max-width: 450px;
position: relative;
z-index: 1;
backdrop-filter: blur(20px);
border: 1px solid rgba(255, 255, 255, 0.2);
}
.auth-header {
text-align: center;
margin-bottom: var(--space-xl);
}
.logo-container {
margin-bottom: var(--space-lg);
}
.auth-logo {
width: 80px;
height: 80px;
border-radius: 50%;
object-fit: cover;
box-shadow: var(--shadow-lg);
border: 3px solid var(--primary);
}
.koaloo-title {
margin-bottom: var(--space-sm);
}
.koaloo-title-image {
height: 60px;
width: auto;
max-width: 200px;
object-fit: contain;
}
.auth-header p {
color: var(--text-secondary);
font-size: var(--font-size-lg);
line-height: 1.6;
}
.error-message,
.success-message {
padding: var(--space-lg);
border-radius: var(--radius);
margin-bottom: var(--space-lg);
display: flex;
align-items: center;
gap: var(--space);
font-weight: 600;
}
.error-message {
background: rgba(239, 68, 68, 0.1);
color: var(--danger);
border: 1px solid rgba(239, 68, 68, 0.2);
}
.success-message {
background: rgba(16, 185, 129, 0.1);
color: var(--success);
border: 1px solid rgba(16, 185, 129, 0.2);
}
.success-actions {
margin-top: var(--space);
}
.auth-form {
margin-bottom: var(--space-lg);
}
.form-group {
margin-bottom: var(--space-lg);
}
.form-row {
display: flex;
gap: var(--space);
margin-bottom: var(--space-lg);
}
.form-row .form-group {
flex: 1;
margin-bottom: 0;
}
.input-container {
position: relative;
display: flex;
align-items: center;
}
.input-icon {
position: absolute !important;
left: 15px !important;
color: var(--text-muted) !important;
font-size: var(--font-size-lg) !important;
z-index: 10 !important;
pointer-events: none !Important;
top: 50% !important;
transform: translateY(-50%) !important;
padding: 0 !important;
margin: 0 !important;
}
.input-container input {
width: 100% !important;
padding: 12px 12px 12px 45px !important;
border: 2px solid var(--border) !important;
border-radius: var(--radius) !important;
background: var(--surface) !important;
color: var(--text-primary) !important;
font-size: var(--font-size-base) !important;
transition: var(--transition) !important;
font-family: inherit !important;
margin: 0 !important;
box-sizing: border-box !important;
}
.input-container:focus-within .input-icon,
.input-container:focus-within input {
border-color: var(--primary);
}
.input-container input:focus {
outline: none;
border-color: var(--primary);
box-shadow: 0 0 0 3px rgba(99, 102, 241, 0.1);
}
.input-container input::placeholder,
.input-container textarea::placeholder {
color: var(--text-muted);
font-size: 0.875rem;
}
.input-container input::-webkit-input-placeholder,
.input-container textarea::-webkit-input-placeholder {
font-size: 0.875rem;
}
.input-container input::-moz-placeholder,
.input-container textarea::-moz-placeholder {
font-size: 0.875rem;
}
.input-container textarea {
width: 100%;
padding: var(--space) var(--space) var(--space) calc(var(--space) * 3);
border: 2px solid var(--border);
border-radius: var(--radius);
background: var(--surface);
color: var(--text-primary);
font-size: var(--font-size-base);
transition: var(--transition);
font-family: inherit;
resize: vertical;
min-height: 80px;
}
.form-group textarea {
width: 100%;
padding: var(--space);
border: 2px solid var(--border);
border-radius: var(--radius);
background: var(--surface);
color: var(--text-primary);
font-size: var(--font-size-base);
transition: var(--transition);
font-family: inherit;
resize: vertical;
min-height: 80px;
}
.input-container textarea:focus {
outline: none;
border-color: var(--primary);
box-shadow: 0 0 0 3px rgba(99, 102, 241, 0.1);
}
.form-group textarea:focus {
outline: none;
border-color: var(--primary);
box-shadow: 0 0 0 3px rgba(99, 102, 241, 0.1);
}
.input-container.focused input {
border-color: var(--primary);
}
.input-container.error input {
border-color: var(--danger);
}
.password-toggle {
position: absolute;
right: var(--space);
background: none;
border: none;
color: var(--text-muted);
cursor: pointer;
padding: var(--space-xs);
border-radius: var(--radius-sm);
transition: var(--transition);
font-size: var(--font-size-base);
z-index: 10;
top: 50%;
transform: translateY(-50%);
}
.password-toggle:hover {
color: var(--primary);
background: rgba(99, 102, 241, 0.1);
}
.form-options {
display: flex;
justify-content: space-between;
align-items: center;
margin-bottom: var(--space-lg);
flex-wrap: wrap;
gap: var(--space);
}
.checkbox-container {
display: flex;
align-items: center;
gap: var(--space-sm);
cursor: pointer;
font-size: var(--font-size-sm);
color: var(--text-secondary);
}
.checkbox-container input[type="checkbox"] {
display: none;
}
.checkmark {
width: 15px;
height: 20px;
border: 2px solid var(--border);
border-radius: var(--radius-sm);
display: flex;
align-items: center;
justify-content: center;
transition: var(--transition);
background: var(--surface);
}
.checkbox-container input[type="checkbox"]:checked+.checkmark {
background: var(--primary);
border-color: var(--primary);
color: white;
}
.checkbox-container input[type="checkbox"]:checked+.checkmark::after {
content: '✓';
font-size: var(--font-size-sm);
font-weight: bold;
}
.forgot-password {
color: var(--primary);
text-decoration: none;
font-size: var(--font-size-sm);
font-weight: 500;
transition: var(--transition);
}
.forgot-password:hover {
text-decoration: underline;
color: var(--primary-dark);
}
.auth-btn {
width: 100%;
background: var(--primary);
color: white;
border: none;
padding: var(--space-lg) var(--space-xl);
border-radius: var(--radius);
font-weight: 700;
font-size: var(--font-size-lg);
cursor: pointer;
transition: var(--transition);
display: flex;
align-items: center;
justify-content: center;
gap: var(--space);
box-shadow: var(--shadow-lg);
font-family: inherit;
white-space: nowrap;
}
.auth-btn:hover:not(:disabled) {
transform: translateY(-2px);
box-shadow: var(--shadow-xl);
}
.auth-btn:disabled {
opacity: 0.6;
cursor: not-allowed;
transform: none;
}
.terms-link {
color: var(--primary);
text-decoration: underline;
font-weight: 600;
}
.terms-text {
color: var(--primary);
font-weight: 600;
}
.terms-link:hover {
color: var(--primary-dark);
}
.service-unavailable {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
min-height: 60vh;
text-align: center;
padding: var(--space-xl);
}
.unavailable-icon {
font-size: 4rem;
color: var(--primary);
margin-bottom: var(--space-lg);
opacity: 0.7;
}
.service-unavailable h1 {
font-size: var(--font-size-2xl);
color: var(--text-primary);
margin-bottom: var(--space);
font-weight: 700;
}
.service-unavailable p {
font-size: var(--font-size-lg);
color: var(--text-secondary);
margin-bottom: var(--space-xl);
max-width: 400px;
line-height: 1.6;
}
.tabs-container {
background: var(--surface);
border-radius: var(--radius-lg);
padding: var(--space-sm);
margin-bottom: var(--space-lg);
box-shadow: var(--shadow-light);
}
.tabs {
display: flex;
gap: var(--space-sm);
}
.tab-btn {
flex: 1;
display: flex;
align-items: center;
justify-content: center;
gap: var(--space-xs);
padding: var(--space-md) var(--space-lg);
background: transparent;
border: none;
border-radius: var(--radius);
color: var(--text-secondary);
font-size: var(--font-size-sm);
font-weight: 500;
cursor: pointer;
transition: var(--transition);
position: relative;
}
.tab-btn:hover {
background: var(--surface-light);
color: var(--text-primary);
}
.tab-btn.active {
background: var(--primary);
color: white;
box-shadow: var(--shadow);
}
.tab-badge {
background: var(--accent);
color: white;
font-size: var(--font-size-xs);
padding: 2px 6px;
border-radius: 10px;
min-width: 18px;
text-align: center;
}
.tab-btn.active .tab-badge {
background: rgba(255, 255, 255, 0.2);
}
.tab-content {
display: none;
}
.tab-content.active {
display: block;
}
.search-section {
margin-bottom: var(--space-lg);
}
.search-container {
position: relative;
background: var(--surface);
border-radius: var(--radius-lg);
box-shadow: var(--shadow-light);
overflow: hidden;
}
.search-container input {
width: 100%;
padding: var(--space-lg) var(--space-xl) var(--space-lg) var(--space-xl);
border: none;
background: transparent;
color: var(--text-primary);
font-size: var(--font-size-base);
outline: none;
}
.search-container input::placeholder {
color: var(--text-muted);
}
.search-icon {
position: absolute;
left: var(--space-lg);
top: 50%;
transform: translateY(-50%);
color: var(--text-muted);
font-size: var(--font-size-lg);
}
.search-clear {
position: absolute;
right: var(--space-lg);
top: 50%;
transform: translateY(-50%);
background: none;
border: none;
color: var(--text-muted);
cursor: pointer;
padding: var(--space-xs);
border-radius: var(--radius);
transition: var(--transition);
}
.search-clear:hover {
background: var(--surface-light);
color: var(--text-primary);
}
.search-results {
display: grid;
gap: var(--space-md);
}
.user-card, .friend-card {
background: var(--surface);
border-radius: var(--radius-lg);
padding: var(--space-lg);
box-shadow: var(--shadow-light);
transition: var(--transition);
display: flex;
align-items: center;
gap: var(--space-md);
}
.user-card:hover, .friend-card:hover {
box-shadow: var(--shadow);
transform: translateY(-2px);
}
.user-avatar, .friend-avatar {
width: 50px;
height: 50px;
border-radius: 50%;
overflow: hidden;
flex-shrink: 0;
}
.user-avatar img, .friend-avatar img {
width: 100%;
height: 100%;
object-fit: cover;
}
.user-info, .friend-info {
flex: 1;
min-width: 0;
}
.user-name, .friend-name {
font-size: var(--font-size-lg);
font-weight: 600;
color: var(--text-primary);
margin: 0 0 var(--space-xs) 0;
}
.user-username, .friend-username {
font-size: var(--font-size-sm);
color: var(--text-secondary);
margin: 0;
}
.friend-status {
font-size: var(--font-size-xs);
color: var(--text-muted);
margin: var(--space-xs) 0 0 0;
}
.user-actions, .friend-actions {
flex-shrink: 0;
}
.btn-add-friend, .btn-friend {
background: var(--primary);
color: white;
border: none;
border-radius: var(--radius);
padding: var(--space-sm) var(--space-md);
font-size: var(--font-size-sm);
font-weight: 500;
cursor: pointer;
transition: var(--transition);
display: flex;
align-items: center;
gap: var(--space-xs);
}
.btn-add-friend:hover, .btn-friend:hover {
background: var(--primary-dark);
transform: translateY(-1px);
}
.btn-friend {
background: var(--surface-light);
color: var(--text-primary);
border: 1px solid var(--border);
}
.btn-friend:hover {
background: var(--primary);
color: white;
border-color: var(--primary);
}
.friends-section {
margin-top: var(--space-lg);
}
.friends-list {
display: grid;
gap: var(--space-md);
}
.empty-state {
text-align: center;
padding: var(--space-xl);
color: var(--text-secondary);
}
.empty-state i {
font-size: 3rem;
color: var(--text-muted);
margin-bottom: var(--space-lg);
}
.empty-state h3 {
font-size: var(--font-size-xl);
color: var(--text-primary);
margin-bottom: var(--space-md);
}
.empty-state p {
font-size: var(--font-size-base);
margin-bottom: var(--space-lg);
}
.loading-state {
text-align: center;
padding: var(--space-xl);
color: var(--text-secondary);
}
.loading-spinner {
width: 40px;
height: 40px;
border: 3px solid var(--border);
border-top: 3px solid var(--primary);
border-radius: 50%;
animation: spin 1s linear infinite;
margin: 0 auto var(--space-lg);
}
@keyframes spin {
0% { transform: rotate(0deg); }
100% { transform: rotate(360deg); }
}
@media (max-width: 768px) {
.tabs {
flex-direction: column;
}
.tab-btn {
justify-content: flex-start;
}
.user-card, .friend-card {
flex-direction: column;
text-align: center;
gap: var(--space-sm);
}
.user-avatar, .friend-avatar {
width: 60px;
height: 60px;
}
.user-info, .friend-info {
text-align: center;
}
.user-actions, .friend-actions {
width: 100%;
}
.btn-add-friend, .btn-friend {
width: 100%;
justify-content: center;
}
}
.auth-divider {
text-align: center;
margin: var(--space-lg) 0;
position: relative;
}
.auth-divider::before {
content: '';
position: absolute;
top: 50%;
left: 0;
right: 0;
height: 1px;
background: var(--border);
}
.auth-divider span {
background: var(--surface);
padding: 0 var(--space);
color: var(--text-muted);
font-size: var(--font-size-sm);
font-weight: 500;
}
.social-auth {
display: flex;
flex-direction: column;
gap: var(--space);
margin-bottom: var(--space-lg);
}
.social-btn {
width: 100%;
padding: var(--space) var(--space-lg);
border: 2px solid var(--border);
border-radius: var(--radius);
background: var(--surface);
color: var(--text-primary);
font-weight: 600;
cursor: pointer;
transition: var(--transition);
display: flex;
align-items: center;
justify-content: center;
gap: var(--space);
font-family: inherit;
}
.social-btn.google:hover {
border-color: #DB4437;
background: rgba(219, 68, 55, 0.1);
color: #DB4437;
}
.social-btn.facebook:hover {
border-color: #4267B2;
background: rgba(66, 103, 178, 0.1);
color: #4267B2;
}
.social-btn.apple {
background: #000000;
color: #FFFFFF;
border-color: #000000;
}
.social-btn.apple:hover {
background: #333333;
border-color: #333333;
color: #FFFFFF;
}
.social-btn:disabled {
opacity: 0.6;
cursor: not-allowed;
}
.social-auth-buttons {
display: flex;
flex-direction: column;
gap: var(--space);
margin-top: var(--space-lg);
}
.social-oauth-unavailable-notice {
display: none;
margin: 0;
padding: 0.65rem 0.75rem;
border-radius: var(--radius);
font-size: var(--font-size-sm, 0.85rem);
line-height: 1.45;
text-align: center;
color: var(--text-secondary, #666);
background: rgba(0, 0, 0, 0.06);
border: 1px solid var(--border, rgba(0, 0, 0, 0.1));
}
.social-btn-paused-hint {
display: none;
font-size: 0.72rem;
font-weight: 600;
opacity: 0.85;
}
.social-auth-buttons.social-oauth-mobile-paused .social-btn {
flex-wrap: wrap;
}
.social-auth-buttons.social-oauth-mobile-paused .social-oauth-unavailable-notice {
display: block;
}
.social-auth-buttons.social-oauth-mobile-paused .social-btn.oauth-mobile-guard {
opacity: 0.5;
filter: grayscale(1);
cursor: not-allowed;
pointer-events: none;
}
.social-auth-buttons.social-oauth-mobile-paused .social-btn.apple.oauth-mobile-guard {
background: #444;
border-color: #444;
color: #ccc;
}
.social-auth-buttons.social-oauth-mobile-paused .social-btn-paused-hint {
display: block;
flex: 1 0 100%;
text-align: center;
margin-top: 0.15rem;
}
.social-auth-buttons.social-oauth-mobile-paused .social-btn-label {
flex: 1;
}
[data-theme="dark"] .social-oauth-unavailable-notice {
background: rgba(255, 255, 255, 0.06);
color: var(--text-secondary, #aaa);
}
.auth-divider {
display: flex;
align-items: center;
text-align: center;
margin: var(--space-lg) 0;
color: var(--text-secondary);
}
.auth-divider::before,
.auth-divider::after {
content: '';
flex: 1;
border-bottom: 1px solid var(--border);
}
.auth-divider span {
padding: 0 var(--space);
font-size: var(--font-size-sm);
color: var(--text-secondary);
}
.auth-footer {
text-align: center;
color: var(--text-secondary);
}
.auth-footer p {
margin-bottom: var(--space);
font-size: var(--font-size-sm);
}
.register-link,
.login-link {
color: var(--primary);
text-decoration: none;
font-weight: 600;
font-size: var(--font-size-base);
display: inline-flex;
align-items: center;
gap: var(--space-xs);
transition: var(--transition);
}
.register-link:hover,
.login-link:hover {
color: var(--primary-dark);
text-decoration: underline;
}
.features-preview {
position: absolute;
bottom: var(--space-lg);
left: 50%;
transform: translateX(-50%);
display: flex;
gap: var(--space-lg);
z-index: 1;
}
.feature-item {
display: flex;
align-items: center;
gap: var(--space-sm);
background: rgba(255, 255, 255, 0.1);
color: white;
padding: var(--space-sm) var(--space);
border-radius: var(--radius-full);
backdrop-filter: blur(10px);
border: 1px solid rgba(255, 255, 255, 0.2);
font-size: var(--font-size-sm);
font-weight: 500;
}
.toggle {
position: relative;
display: inline-block;
width: 30px;
height: 24px;
}
.toggle input {
opacity: 0;
width: 0;
height: 0;
}
.toggle-slider {
position: absolute;
cursor: pointer;
top: 0;
left: 0;
right: 80px;
bottom: 0;
background-color: var(--text-muted);
transition: var(--transition);
border-radius: 24px;
}
.toggle-slider:before {
position: absolute;
content: "";
height: 18px;
width: 8px;
left: 3px;
bottom: 3px;
background-color: white;
transition: var(--transition);
border-radius: 50%;
}
.toggle input:checked+.toggle-slider {
background-color: var(--primary);
}
.toggle input:checked+.toggle-slider:before {
transform: translateX(26px);
}
.settings-list {
background: var(--surface);
border-radius: var(--radius-xl);
overflow: hidden;
box-shadow: var(--shadow);
border: 1px solid var(--border-light);
}
.setting-item {
display: flex;
align-items: center;
justify-content: space-between;
padding: var(--space-lg);
border-bottom: 1px solid var(--border-light);
transition: var(--transition);
border-radius: var(--radius-md);
margin: var(--space-xs);
}
.setting-item:last-child {
border-bottom: none;
}
.setting-item:hover {
}
.setting-item:hover .setting-name,
.setting-item:hover .setting-desc {
color: #FF9201;
}
.setting-item:hover .setting-info i,
.setting-item:hover i.fas.fa-chevron-right {
color: #FF9201;
}
.setting-item.danger {
color: var(--danger);
justify-content: center;
align-items: center;
}
.setting-info {
display: flex;
align-items: center;
gap: var(--space);
font-weight: 500;
}
.setting-info i {
font-size: var(--font-size-lg);
width: 15px;
text-align: center;
}
.events-list,
.scores-list {
display: flex;
flex-direction: column;
gap: var(--space);
}
.notification {
position: fixed;
top: 20px;
right: 20px;
padding: var(--space) var(--space-lg);
border-radius: var(--radius-md);
color: white;
font-weight: 600;
display: flex;
align-items: center;
gap: var(--space-sm);
z-index: 1001;
animation: slideIn 0.3s ease-out;
max-width: 400px;
box-shadow: var(--shadow-xl);
}
.notification.success {
background: var(--gradient-primary);
}
.notification.error {
background: var(--gradient-secondary);
}
.notification.info {
background: var(--gradient-primary);
}
@keyframes slideIn {
from {
transform: translateX(100%);
opacity: 0;
}
to {
transform: translateX(0);
opacity: 1;
}
}
@media (max-width: 768px) {
.notification {
top: 10px;
right: 10px;
left: 10px;
max-width: none;
padding: var(--space-md);
border-radius: var(--radius-lg);
font-size: var(--font-size-sm);
backdrop-filter: blur(10px);
border: 1px solid rgba(255, 255, 255, 0.2);
}
.notification.success {
background: linear-gradient(135deg, #10B981, #059669);
}
.notification.error {
background: linear-gradient(135deg, #EF4444, #DC2626);
}
.notification.info {
background: linear-gradient(135deg, #3B82F6, #2563EB);
}
}
.search-bar {
display: flex;
align-items: center;
background: var(--surface);
border: 2px solid var(--border);
border-radius: var(--radius-lg);
padding: var(--space) var(--space-lg);
margin-bottom: var(--space-lg);
box-shadow: var(--shadow-sm);
transition: var(--transition);
backdrop-filter: blur(10px);
}
.search-bar:focus-within {
border-color: var(--primary);
box-shadow: 0 0 0 3px rgba(177, 170, 255, 0.2);
}
.search-bar svg {
color: var(--text-muted);
margin-right: var(--space);
flex-shrink: 0;
}
.search-bar input {
flex: 1;
border: none;
background: none;
color: var(--text-primary);
font-size: var(--font-size-base);
outline: none;
}
.search-bar input::placeholder {
color: var(--text-muted);
}
.filter-chips {
display: flex;
gap: var(--space-sm);
margin-bottom: var(--space-lg);
overflow-x: auto;
padding-bottom: var(--space-sm);
}
.chip {
background: var(--surface);
border: 2px solid var(--border);
color: var(--text-secondary);
padding: var(--space-sm) var(--space-lg);
border-radius: var(--radius-full);
font-weight: 600;
cursor: pointer;
transition: var(--transition);
white-space: nowrap;
font-size: var(--font-size-sm);
}
.chip:hover {
border-color: var(--primary);
color: var(--primary);
transform: translateY(-1px);
}
.chip.active {
background: var(--gradient-primary);
border-color: var(--primary);
color: white;
box-shadow: var(--shadow-sm);
}
.events-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
gap: var(--space-lg);
margin-bottom: var(--space-xl);
}
.event-card {
background: var(--surface);
border-radius: var(--radius-lg);
overflow: hidden;
box-shadow: var(--shadow);
transition: var(--transition);
border: 1px solid var(--border-light);
cursor: pointer;
}
.event-card:hover {
transform: translateY(-8px);
box-shadow: var(--shadow-xl);
border-color: var(--primary-light);
}
.event-image {
width: 100%;
height: 200px;
object-fit: cover;
transition: var(--transition);
}
.event-card:hover .event-image {
transform: scale(1.05);
}
.event-content {
padding: var(--space-lg);
}
.event-date {
display: inline-block;
background: var(--gradient-primary);
color: white;
padding: var(--space-xs) var(--space-sm);
border-radius: var(--radius-full);
font-size: var(--font-size-xs);
font-weight: 600;
margin-bottom: var(--space);
}
.event-title {
font-size: var(--font-size-xl);
font-weight: 700;
margin-bottom: var(--space-sm);
color: var(--text-primary);
line-height: 1.3;
}
.event-description {
color: var(--text-secondary);
font-size: var(--font-size-sm);
margin-bottom: var(--space-lg);
line-height: 1.6;
display: -webkit-box;
-webkit-line-clamp: 3;
-webkit-box-orient: vertical;
overflow: hidden;
}
.event-meta {
display: flex;
align-items: center;
justify-content: space-between;
margin-bottom: var(--space-lg);
}
.event-location,
.event-participants {
display: flex;
align-items: center;
gap: var(--space-xs);
color: var(--text-muted);
font-size: var(--font-size-sm);
}
.event-category {
background: var(--gradient-secondary);
color: white;
padding: var(--space-xs) var(--space-sm);
border-radius: var(--radius-full);
font-size: var(--font-size-xs);
font-weight: 600;
text-transform: uppercase;
}
.notification-container {
position: fixed;
top: var(--space-lg);
right: var(--space-lg);
z-index: var(--z-modal);
}
@media (max-width: 768px) {
.search-bar {
margin: var(--space);
border-radius: var(--radius);
}
.filter-chips {
margin: 0 var(--space) var(--space-lg);
}
.events-grid {
grid-template-columns: 1fr;
gap: var(--space);
margin: 0 var(--space) var(--space-xl);
}
.event-content {
padding: var(--space);
}
.event-title {
font-size: var(--font-size-lg);
}
.event-description {
font-size: var(--font-size-xs);
}
}
@media (max-width: 480px) {
.search-bar {
margin: var(--space-sm);
padding: var(--space-sm) var(--space);
}
.filter-chips {
margin: 0 var(--space-sm) var(--space-lg);
gap: var(--space-xs);
}
.chip {
padding: var(--space-xs) var(--space);
font-size: var(--font-size-xs);
}
.events-grid {
margin: 0 var(--space-sm) var(--space-xl);
grid-template-columns: 1fr;
gap: var(--space-sm);
}
.event-image {
height: 150px;
}
.event-content {
padding: var(--space-sm);
}
.event-title {
font-size: var(--font-size-base);
}
}
@media (max-width: 768px) {
body {
padding-bottom: calc(64px + var(--bottom-nav-extra-safe-pad, 4px) + env(safe-area-inset-bottom, 0px));
}
.main-content {
padding-bottom: 0;
max-width: 95vw;
padding-top: 10px;
}
.page-header {
flex-direction: column;
gap: var(--space-sm);
align-items: stretch;
padding: var(--space) var(--space-lg);
}
.page-header h2 {
font-size: var(--font-size-xl);
text-align: center;
}
.btn-secondary {
padding: var(--space-sm) var(--space-lg);
font-size: var(--font-size-sm);
min-height: 44px;
}
.section-header h3 {
font-size: var(--font-size-lg);
}
.empty-state,
.error-state {
padding: var(--space-lg);
}
.empty-icon,
.error-icon {
font-size: 3rem;
}
.empty-state h3,
.error-state h3 {
font-size: var(--font-size-lg);
}
}
@media (max-width: 480px) {
.main-content {
max-width: 95vw;
padding-bottom: 0;
padding-top: var(--space-sm);
}
.page-header {
padding: var(--space-sm) var(--space);
}
.page-header h2 {
font-size: var(--font-size-lg);
}
.btn-secondary {
padding: var(--space-xs) var(--space);
font-size: var(--font-size-xs);
min-height: 40px;
}
.section-header h3 {
font-size: var(--font-size-base);
}
.empty-state,
.error-state {
padding: var(--space);
}
.empty-icon,
.error-icon {
font-size: 2.5rem;
}
.empty-state h3,
.error-state h3 {
font-size: var(--font-size-base);
}
.event-card,
.profile-card,
.friend-card,
.achievement-card {
margin-bottom: var(--space-md);
}
.event-participants,
.participants-small,
.profile-details,
.profile-details-instagram {
gap: var(--space-sm);
}
.passion-tag,
.passion-tag-instagram,
.event-type-badge,
.event-type-badge-small {
padding: var(--space-sm) var(--space);
margin-bottom: var(--space-xs);
}
.social-link,
.social-link-instagram {
padding: var(--space-sm) var(--space);
margin-bottom: var(--space-xs);
}
.event-title,
.profile-name,
.friend-name,
.achievement-title {
font-size: var(--font-size-lg);
line-height: 1.3;
}
.event-description,
.profile-bio,
.achievement-description {
font-size: var(--font-size-sm);
line-height: 1.4;
}
.event-date,
.event-location,
.profile-detail,
.stat-label {
font-size: var(--font-size-sm);
}
}
.fade-in-up {
animation: fadeInUp 0.6s ease-out;
}
@keyframes fadeInUp {
from {
opacity: 0;
transform: translateY(30px);
}
to {
opacity: 1;
transform: translateY(0);
}
}
.float {
animation: float 3s ease-in-out infinite;
}
@keyframes bounce {
0%,
20%,
50%,
80%,
100% {
transform: translateY(0);
}
40% {
transform: translateY(-10px);
}
60% {
transform: translateY(-5px);
}
}
@media (prefers-contrast: high) {
:root {
--shadow: 0 2px 4px 0 rgba(0, 0, 0, 0.3);
--shadow-lg: 0 10px 15px -3px rgba(0, 0, 0, 0.3);
--shadow-xl: 0 20px 25px -5px rgba(0, 0, 0, 0.3);
}
}
@media (prefers-reduced-motion: reduce) {
* {
animation-duration: 0.01ms !important;
animation-iteration-count: 1 !important;
transition-duration: 0.01ms !important;
}
}
@media print {
.header,
.bottom-nav,
.auth-background,
.floating-shapes,
.features-preview {
display: none;
}
.main-content {
padding: 0;
max-width: none;
}
.event-card,
.game-card,
.stat-card {
break-inside: avoid;
margin-bottom: var(--space);
}
}
.event-hero {
position: relative;
margin-bottom: var(--space-lg);
border-radius: var(--radius-lg);
overflow: hidden;
}
.event-image-container {
position: relative;
height: 300px;
overflow: hidden;
}
.event-hero-image {
width: 100%;
height: 100%;
object-fit: cover;
transition: var(--transition);
}
.event-image-link {
display: block;
position: relative;
width: 100%;
height: 100%;
cursor: pointer;
}
.event-hero-image.clickable {
cursor: pointer;
transition: transform 0.3s ease, filter 0.3s ease;
}
.event-image-link:hover .event-hero-image.clickable {
transform: scale(1.05);
}
.event-image-overlay-hint {
position: absolute;
bottom: var(--space-lg);
left: 50%;
transform: translateX(-50%);
background: rgba(0, 0, 0, 0.8);
backdrop-filter: blur(10px);
color: white;
padding: var(--space-sm) var(--space-lg);
border-radius: var(--radius-full);
font-size: var(--font-size-sm);
font-weight: 600;
display: flex;
align-items: center;
gap: var(--space-xs);
opacity: 0;
transition: opacity 0.3s ease, transform 0.3s ease;
pointer-events: none;
z-index: 10;
}
.event-image-link:hover .event-image-overlay-hint {
opacity: 1;
transform: translateX(-50%) translateY(-5px);
}
.event-image-overlay-hint i {
font-size: var(--font-size-lg);
}
.event-overlay {
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
background: linear-gradient(135deg, rgba(177, 170, 255, 0.8) 0%, rgba(13, 27, 42, 0.6) 100%);
display: flex;
justify-content: space-between;
align-items: flex-start;
padding: var(--space-lg);
}
.event-category-badge {
background: var(--primary);
color: white;
padding: var(--space-sm) var(--space);
border-radius: var(--radius-full);
font-size: var(--font-size-sm);
font-weight: 600;
text-transform: uppercase;
display: flex;
align-items: center;
gap: var(--space-xs);
box-shadow: var(--shadow-md);
}
.event-status {
background: rgba(255, 255, 255, 0.9);
color: var(--text-primary);
padding: var(--space-sm) var(--space);
border-radius: var(--radius-full);
font-size: var(--font-size-sm);
font-weight: 600;
display: flex;
align-items: center;
gap: var(--space-xs);
backdrop-filter: blur(10px);
}
.event-status.upcoming {
background: var(--primary);
}
.event-status.ongoing {
background: linear-gradient(135deg, #ff6b6b 0%, #ff8e53 100%);
animation: fireGlow 2s ease-in-out infinite;
}
.event-status.past {
background: var(--primary);
}
.event-hero-content {
position: absolute;
bottom: 0;
left: 0;
right: 0;
padding: var(--space-xl) var(--space-lg) var(--space-lg);
color: white;
}
.event-hero-content .event-title {
font-size: var(--font-size-2xl);
font-weight: 800;
margin: 0 0 var(--space-sm) 0;
}
.event-author {
display: flex;
align-items: center;
gap: var(--space-sm);
font-size: var(--font-size-lg);
margin: 0;
opacity: 0.9;
}
.event-stats {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
gap: var(--space);
margin-bottom: var(--space-xl);
padding: var(--space-lg);
background: var(--surface);
border-radius: var(--radius-lg);
box-shadow: var(--shadow-sm);
}
.stat-item {
display: flex;
align-items: center;
gap: var(--space);
padding: var(--space);
background: var(--background);
border-radius: var(--radius-md);
transition: var(--transition);
}
.stat-item:hover {
transform: translateY(-2px);
box-shadow: var(--shadow-md);
}
.stat-icon {
width: 50px;
height: 50px;
background: var(--gradient-primary);
border-radius: var(--radius-full);
display: flex;
align-items: center;
justify-content: center;
color: white;
font-size: var(--font-size-lg);
flex-shrink: 0;
}
.stat-content {
display: flex;
flex-direction: column;
gap: var(--space-xs);
}
.stat-label {
font-size: var(--font-size-sm);
color: var(--text-muted);
font-weight: 500;
}
.stat-value {
font-size: var(--font-size-lg);
font-weight: 700;
color: var(--text-primary);
}
.stat-value.available {
color: var(--success);
}
.stat-value.full {
color: var(--secondary);
}
.event-section {
margin-bottom: var(--space-xl);
padding: var(--space-lg);
background: var(--surface);
border-radius: var(--radius-lg);
box-shadow: var(--shadow-sm);
}
.section-header {
display: flex;
align-items: center;
gap: var(--space-sm);
margin-bottom: var(--space-lg);
padding-bottom: var(--space);
border-bottom: 2px solid var(--border-light);
}
.section-header h3 {
font-size: var(--font-size-xl);
font-weight: 700;
color: var(--text-primary);
margin: 0;
display: flex;
align-items: center;
gap: var(--space-sm);
}
.event-description p {
font-size: var(--font-size-lg);
line-height: 1.6;
color: var(--text-secondary);
margin-bottom: var(--space-lg);
}
.event-highlight {
background: var(--gradient-primary);
padding: var(--space-lg);
border-radius: var(--radius-md);
color: var(--text-primary);
display: flex;
align-items: flex-start;
gap: var(--space);
box-shadow: var(--shadow-sm);
}
.event-highlight i {
font-size: var(--font-size-xl);
color: var(--accent-dark);
margin-top: var(--space-xs);
}
.event-actions {
margin-bottom: var(--space-sm);
padding: var(--space-sm);
background: var(--surface);
border-radius: var(--radius-lg);
box-shadow: var(--shadow-sm);
}
.registration-status {
display: flex;
align-items: center;
gap: var(--space-sm);
padding: var(--space-sm);
border-radius: var(--radius-md);
font-size: var(--font-size-lg);
font-weight: 600;
margin-bottom: var(--space-sm);
text-align: center;
justify-content: center;
}
.registration-status.registered {
background: rgba(248, 255, 44, 0.2);
color: var(--success-dark);
border: 2px solid var(--success);
}
.registration-status.full {
background: rgba(248, 13, 148, 0.2);
color: var(--secondary);
border: 2px solid var(--secondary);
}
.registration-status.past {
background: rgba(177, 170, 255, 0.2);
color: var(--primary-dark);
border: 2px solid var(--primary);
}
.btn-large {
width: 100%;
padding: var(--space-lg) var(--space-xl);
font-size: var(--font-size-xl);
font-weight: 700;
margin-bottom: var(--space-lg);
}
.spots-info {
text-align: center;
color: var(--text-muted);
font-size: var(--font-size-sm);
margin: 0;
display: flex;
align-items: center;
justify-content: center;
gap: var(--space-xs);
}
.action-buttons {
display: flex;
gap: var(--space);
flex-wrap: wrap;
}
.btn-outline {
flex: 1;
min-width: 200px;
}
.page-header {
margin-bottom: var(--space-lg);
padding: 0 var(--space-lg);
}
.page-header .back-btn {
display: inline-flex;
align-items: center;
gap: var(--space-sm);
padding: var(--space-sm) var(--space);
text-decoration: none;
font-weight: 600;
transition: var(--transition);
}
.page-header .back-btn:hover {
transform: translateY(-2px);
}
@media (max-width: 768px) {
.event-hero-content .event-title {
font-size: var(--font-size-xl);
}
.event-stats {
grid-template-columns: 1fr;
gap: var(--space-sm);
}
.stat-item {
padding: var(--space-sm);
}
.event-overlay {
padding: var(--space);
}
.event-hero-content {
padding: var(--space-lg) var(--space) var(--space);
}
.action-buttons {
flex-direction: column;
}
.btn-outline {
min-width: auto;
}
}
.page-header {
text-align: center;
margin-bottom: var(--space-xl);
padding: 0 var(--space-lg);
}
.page-header h1 {
font-size: var(--font-size-2xl);
font-weight: 800;
color: var(--text-primary);
margin: 0 0 var(--space-sm) 0;
background: var(--gradient-primary);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
background-clip: text;
}
.page-header p {
font-size: var(--font-size-lg);
color: var(--text-secondary);
margin: 0;
}
.tabs-container {
margin-bottom: var(--space-xl);
padding: 0 var(--space-lg);
}
.tabs {
display: flex;
background: var(--surface);
border-radius: var(--radius-lg);
padding: var(--space-xs);
box-shadow: var(--shadow-sm);
border: 1px solid var(--border-light);
}
.tab-btn {
flex: 1;
display: flex;
align-items: center;
justify-content: center;
gap: var(--space-sm);
padding: var(--space) var(--space-lg);
background: none;
border: none;
border-radius: var(--radius-md);
color: var(--text-muted);
font-weight: 600;
font-size: var(--font-size-md);
cursor: pointer;
transition: var(--transition);
position: relative;
}
.tab-btn:hover {
color: var(--text-primary);
background: rgba(177, 170, 255, 0.1);
}
.tab-btn.active {
background: var(--gradient-primary);
color: white;
box-shadow: var(--shadow-md);
}
.tab-badge {
background: var(--gradient-secondary);
color: white;
padding: var(--space-xs) var(--space-sm);
border-radius: var(--radius-full);
font-size: var(--font-size-xs);
font-weight: 700;
min-width: 20px;
text-align: center;
}
.tab-btn.active .tab-badge {
background: rgba(255, 255, 255, 0.2);
}
.tab-content {
display: none;
padding: 0 var(--space-lg);
}
.tab-content.active {
display: block;
}
.search-section {
margin-bottom: var(--space-xl);
}
.search-container {
position: relative;
display: flex;
align-items: center;
background: var(--surface);
border: 2px solid var(--border-light);
border-radius: var(--radius-lg);
padding: var(--space);
box-shadow: var(--shadow-sm);
transition: var(--transition);
}
.search-container:focus-within {
border-color: var(--primary);
box-shadow: 0 0 0 3px rgba(177, 170, 255, 0.1);
}
.search-icon {
color: var(--text-muted);
font-size: var(--font-size-lg);
margin-right: var(--space);
}
.search-container input {
flex: 1;
border: none;
outline: none;
background: none;
font-size: var(--font-size-lg);
color: var(--text-primary);
}
.search-container input::placeholder {
color: var(--text-muted);
}
.search-clear {
background: none;
border: none;
color: var(--text-muted);
cursor: pointer;
padding: var(--space-xs);
border-radius: var(--radius);
transition: var(--transition);
}
.search-clear:hover {
color: var(--text-primary);
background: var(--background);
}
.search-results {
display: flex;
flex-direction: column;
gap: var(--space);
}
.user-card {
display: flex;
align-items: center;
gap: var(--space);
padding: var(--space-lg);
background: var(--surface);
border-radius: var(--radius-lg);
box-shadow: var(--shadow-sm);
border: 1px solid var(--border-light);
transition: var(--transition);
}
.user-card:hover {
transform: translateY(-2px);
box-shadow: var(--shadow-md);
border-color: var(--primary);
}
.user-avatar {
width: 60px;
height: 60px;
border-radius: var(--radius-full);
overflow: hidden;
flex-shrink: 0;
border: 3px solid var(--border-light);
}
.user-avatar img {
width: 100%;
height: 100%;
object-fit: cover;
}
.user-info {
flex: 1;
min-width: 0;
}
.user-name {
font-size: var(--font-size-lg);
font-weight: 700;
color: var(--text-primary);
margin: 0 0 var(--space-xs) 0;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
.user-username {
font-size: var(--font-size-sm);
color: var(--text-muted);
margin: 0;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
.user-actions {
flex-shrink: 0;
}
.btn-add-friend {
background: var(--gradient-primary);
color: white;
border: none;
padding: var(--space-sm) var(--space-lg);
border-radius: var(--radius-md);
font-weight: 600;
cursor: pointer;
transition: var(--transition);
display: flex;
align-items: center;
gap: var(--space-xs);
}
.btn-add-friend:hover {
transform: translateY(-1px);
box-shadow: var(--shadow-md);
}
.btn-friend {
background: var(--gradient-primary);
color: var(--text-primary);
border: none;
padding: var(--space-sm) var(--space-lg);
border-radius: var(--radius-md);
font-weight: 600;
cursor: pointer;
transition: var(--transition);
display: flex;
align-items: center;
gap: var(--space-xs);
}
.btn-friend:hover {
transform: translateY(-1px);
box-shadow: var(--shadow-md);
}
.friends-section {
margin-bottom: var(--space-xl);
}
.friends-list {
display: flex;
flex-direction: column;
gap: var(--space);
}
.friend-card {
display: flex;
align-items: center;
gap: var(--space);
padding: var(--space-lg);
background: var(--surface);
border-radius: var(--radius-lg);
box-shadow: var(--shadow-sm);
border: 1px solid var(--border-light);
transition: var(--transition);
}
.friend-card:hover {
transform: translateY(-2px);
box-shadow: var(--shadow-md);
border-color: var(--primary);
}
.friend-avatar {
width: 60px;
height: 60px;
border-radius: var(--radius-full);
overflow: hidden;
flex-shrink: 0;
}
.friend-avatar img {
width: 100%;
height: 100%;
object-fit: cover;
}
.friend-info {
flex: 1;
min-width: 0;
}
.friend-name {
font-size: var(--font-size-lg);
font-weight: 700;
color: var(--text-primary);
margin: 0 0 var(--space-xs) 0;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
.friend-username {
font-size: var(--font-size-sm);
color: var(--text-muted);
margin: 0 0 var(--space-xs) 0;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
.friend-status {
font-size: var(--font-size-xs);
color: var(--success);
margin: 0;
font-weight: 500;
}
.friend-actions {
display: flex;
gap: var(--space-sm);
flex-shrink: 0;
}
.btn-view-profile {
background: var(--gradient-primary);
color: white;
border: none;
width: 40px;
height: 40px;
border-radius: var(--radius-full);
cursor: pointer;
transition: var(--transition);
display: flex;
align-items: center;
justify-content: center;
}
.btn-view-profile:hover {
transform: scale(1.1);
box-shadow: var(--shadow-md);
}
.btn-remove-friend {
background: var(--gradient-secondary);
color: white;
border: none;
width: 40px;
height: 40px;
border-radius: var(--radius-full);
cursor: pointer;
transition: var(--transition);
display: flex;
align-items: center;
justify-content: center;
}
.btn-remove-friend:hover {
transform: scale(1.1);
box-shadow: var(--shadow-md);
}
.empty-state {
text-align: center;
padding: var(--space-xl);
color: var(--text-muted);
}
.empty-state i {
font-size: 4rem;
color: var(--border-light);
margin-bottom: var(--space-lg);
}
.empty-state h3 {
font-size: var(--font-size-xl);
font-weight: 700;
color: var(--text-primary);
margin: 0 0 var(--space-sm) 0;
}
.empty-state p {
font-size: var(--font-size-lg);
margin: 0 0 var(--space-lg) 0;
}
.loading-state {
text-align: center;
padding: var(--space-xl);
color: var(--text-muted);
}
.loading-spinner {
width: 40px;
height: 40px;
border: 4px solid var(--border-light);
border-top: 4px solid var(--primary);
border-radius: 50%;
animation: spin 1s linear infinite;
margin: 0 auto var(--space-lg);
}
@keyframes spin {
0% { transform: rotate(0deg); }
100% { transform: rotate(360deg); }
}
.modal {
display: none;
position: fixed;
z-index: 1000;
left: 0;
top: 0;
width: 100%;
height: 100%;
background: rgba(0, 0, 0, 0.5);
backdrop-filter: blur(5px);
align-items: center;
justify-content: center;
padding: var(--space-lg);
}
.modal-content {
background: var(--surface);
border-radius: var(--radius-xl);
box-shadow: var(--shadow-xl);
max-width: 500px;
width: 100%;
max-height: 80vh;
overflow-y: auto;
}
.modal-header {
display: flex;
align-items: center;
justify-content: space-between;
padding: var(--space-lg);
border-bottom: 1px solid var(--border-light);
}
.modal-header h3 {
font-size: var(--font-size-xl);
font-weight: 700;
color: var(--text-primary);
margin: 0;
}
.modal-close {
background: none;
border: none;
color: var(--text-muted);
font-size: var(--font-size-lg);
cursor: pointer;
padding: var(--space-xs);
border-radius: var(--radius);
transition: var(--transition);
}
.modal-close:hover {
color: var(--text-primary);
background: var(--background);
}
.modal-body {
padding: var(--space-lg);
}
.friend-profile {
text-align: center;
}
.profile-header {
margin-bottom: var(--space-xl);
}
.profile-avatar {
width: 100px;
height: 100px;
border-radius: var(--radius-full);
overflow: hidden;
margin: 0 auto var(--space-lg);
border: 4px solid var(--success);
}
.profile-avatar img {
width: 100%;
height: 100%;
object-fit: cover;
}
.profile-info h2 {
font-size: var(--font-size-2xl);
font-weight: 800;
color: var(--text-primary);
margin: 0 0 var(--space-sm) 0;
}
.profile-username {
font-size: var(--font-size-lg);
color: var(--text-muted);
margin: 0 0 var(--space-sm) 0;
}
.profile-email {
font-size: var(--font-size-md);
color: var(--text-secondary);
margin: 0;
}
.profile-details {
display: flex;
flex-direction: column;
gap: var(--space);
}
.detail-item {
display: flex;
align-items: center;
gap: var(--space-sm);
padding: var(--space);
background: var(--background);
border-radius: var(--radius-md);
color: var(--text-secondary);
}
.detail-item i {
color: var(--primary);
font-size: var(--font-size-lg);
}
.error-state {
text-align: center;
padding: var(--space-xl);
color: var(--text-muted);
}
.error-state i {
font-size: 3rem;
color: var(--secondary);
margin-bottom: var(--space-lg);
}
.error-state h3 {
font-size: var(--font-size-xl);
font-weight: 700;
color: var(--text-primary);
margin: 0 0 var(--space-sm) 0;
}
.error-state p {
font-size: var(--font-size-lg);
margin: 0;
}
@media (max-width: 768px) {
.page-header {
padding: 0 var(--space);
}
.tabs-container {
padding: 0 var(--space);
}
.tab-content {
padding: 0 var(--space);
}
.user-card,
.friend-card {
padding: var(--space);
}
.user-avatar,
.friend-avatar {
width: 50px;
height: 50px;
}
.user-name,
.friend-name {
font-size: var(--font-size-md);
}
.btn-add-friend,
.btn-friend {
padding: var(--space-xs) var(--space);
font-size: var(--font-size-sm);
}
.modal {
padding: var(--space);
}
.modal-content {
max-height: 90vh;
}
}
.profile-edit-container {
max-width: 800px;
margin: 0 auto;
padding: 0 var(--space-lg);
}
.profile-edit-form {
background: var(--surface);
border-radius: var(--radius-lg);
box-shadow: var(--shadow-sm);
border: 1px solid var(--border-light);
overflow: hidden;
}
.form-section {
padding: var(--space-xl);
border-bottom: 1px solid var(--border-light);
}
.form-section:last-child {
border-bottom: none;
}
.form-section h3 {
font-size: var(--font-size-xl);
font-weight: 700;
color: var(--text-primary);
margin: 0 0 var(--space-lg) 0;
display: flex;
align-items: center;
gap: var(--space-sm);
}
.form-section h3 i {
color: var(--primary);
font-size: var(--font-size-lg);
}
.form-grid {
display: grid;
grid-template-columns: 1fr 1fr;
gap: var(--space-lg);
}
.form-group {
display: flex;
flex-direction: column;
gap: var(--space-xs);
}
.form-group.full-width {
grid-column: 1 / -1;
}
.form-group label {
font-size: var(--font-size-md);
font-weight: 600;
color: var(--text-primary);
margin-bottom: var(--space-xs);
}
.form-group input,
.form-group textarea {
padding: var(--space);
border: 2px solid var(--border-light);
border-radius: var(--radius-md);
font-size: var(--font-size-md);
color: var(--text-primary);
background: var(--background);
transition: var(--transition);
font-family: inherit;
}
.form-group input:focus,
.form-group textarea:focus {
outline: none;
border-color: var(--primary);
box-shadow: 0 0 0 3px rgba(177, 170, 255, 0.1);
}
.form-group textarea {
resize: vertical;
min-height: 100px;
}
.input-with-icon {
position: relative;
display: flex;
align-items: center;
}
.input-with-icon i {
position: absolute;
left: calc(var(--space) * 1.5);
color: var(--text-muted);
font-size: var(--font-size-lg);
z-index: 2;
pointer-events: none;
}
.input-with-icon input,
.input-with-icon select {
padding-left: calc(var(--space) * 3.5);
width: 100%;
}
.char-count {
text-align: right;
font-size: var(--font-size-xs);
color: var(--text-muted);
margin-top: var(--space-xs);
}
.form-error {
color: #ef4444;
font-size: var(--font-size-sm);
font-weight: 600;
display: none;
margin-top: var(--space-xs);
padding: 4px 8px;
background: rgba(239, 68, 68, 0.1);
border-left: 3px solid #ef4444;
border-radius: 0 4px 4px 0;
}
.field-error {
border-color: #ef4444 !important;
box-shadow: 0 0 0 2px rgba(239, 68, 68, 0.2) !important;
}
.avatar-upload {
display: flex;
align-items: center;
gap: var(--space-xl);
padding: var(--space-lg);
background: var(--background);
border-radius: var(--radius-md);
border: 2px dashed var(--border-light);
}
.avatar-preview {
position: relative;
width: 120px;
height: 120px;
border-radius: var(--radius-full);
overflow: hidden;
border: 4px solid var(--primary);
cursor: pointer;
transition: var(--transition);
}
.avatar-preview:hover {
transform: scale(1.05);
box-shadow: var(--shadow-md);
}
.avatar-preview img {
width: 100%;
height: 100%;
object-fit: cover;
}
.avatar-overlay {
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
background: rgba(0, 0, 0, 0.5);
display: flex;
align-items: center;
justify-content: center;
color: white;
font-size: var(--font-size-xl);
opacity: 0;
transition: var(--transition);
}
.avatar-preview:hover .avatar-overlay {
opacity: 1;
}
.avatar-actions {
display: flex;
flex-direction: column;
gap: var(--space-sm);
flex: 1;
}
.form-actions {
display: flex;
gap: var(--space);
justify-content: flex-end;
padding: var(--space-xl);
background: var(--background);
border-top: 1px solid var(--border-light);
}
.form-actions button {
display: flex;
align-items: center;
gap: var(--space-sm);
padding: var(--space) var(--space-xl);
border-radius: var(--radius-md);
font-weight: 600;
font-size: var(--font-size-md);
cursor: pointer;
transition: var(--transition);
border: 2px solid transparent;
}
.form-actions .btn-outline {
background: var(--surface);
color: var(--text-primary);
border-color: var(--border-light);
}
.form-actions .btn-outline:hover {
background: var(--background);
border-color: var(--text-muted);
}
.form-actions .btn-primary {
background: var(--gradient-primary);
color: white;
border-color: var(--primary);
}
.form-actions .btn-primary:hover {
transform: translateY(-2px);
box-shadow: var(--shadow-md);
}
.form-actions .btn-primary:disabled {
opacity: 0.6;
cursor: not-allowed;
transform: none;
}
@media (max-width: 768px) {
.profile-edit-container {
padding: 0 var(--space);
}
.form-section {
padding: var(--space-lg);
}
.form-grid {
grid-template-columns: 1fr;
gap: var(--space);
}
.avatar-upload {
flex-direction: column;
text-align: center;
gap: var(--space-lg);
}
.avatar-preview {
width: 100px;
height: 100px;
align-self: center;
}
.avatar-actions {
flex-direction: column;
gap: var(--space-sm);
}
.avatar-actions .btn-primary,
.avatar-actions .btn-outline {
width: 100%;
justify-content: center;
}
.form-actions {
flex-direction: column;
gap: var(--space-sm);
}
.form-actions .btn-primary,
.form-actions .btn-outline {
width: 100%;
justify-content: center;
}
}
.profile-hero {
background: var(--surface);
padding: var(--space-lg) 0;
margin-bottom: var(--space-lg);
}
.profile-container {
max-width: 1000px;
margin: 0 auto;
padding: 0 var(--space-lg);
}
.profile-header {
background: var(--surface);
border-radius: var(--radius-lg);
overflow: hidden;
box-shadow: var(--shadow);
border: 1px solid var(--border-light);
margin-bottom: var(--space-lg);
}
.profile-header-content {
display: flex;
align-items: flex-start;
gap: var(--space-lg);
padding: var(--space-lg);
}
.profile-avatar {
flex-shrink: 0;
width: 120px;
height: 120px;
border-radius: 50%;
overflow: hidden;
border: 3px solid var(--primary);
box-shadow: var(--shadow-md);
}
.profile-avatar img {
width: 100%;
height: 100%;
object-fit: cover;
transition: var(--transition);
}
.profile-avatar:hover img {
transform: scale(1.05);
}
.profile-info {
flex: 1;
display: flex;
flex-direction: column;
gap: var(--space-md);
}
.profile-name-section {
display: flex;
align-items: center;
justify-content: space-between;
flex-wrap: wrap;
gap: var(--space-md);
}
.profile-name {
font-size: var(--font-size-2xl);
font-weight: 700;
color: var(--text-primary);
margin: 0;
}
.btn-edit-profile {
background: var(--gradient-primary);
color: white;
border: none;
padding: var(--space-sm) var(--space-lg);
border-radius: var(--radius-full);
font-weight: 600;
cursor: pointer;
transition: var(--transition);
font-size: var(--font-size-sm);
box-shadow: var(--shadow-sm);
}
.btn-edit-profile:hover {
transform: translateY(-2px);
box-shadow: var(--shadow-md);
}
.profile-stats {
display: flex;
gap: var(--space-xl);
padding: var(--space-md) 0;
border-top: 1px solid var(--border-light);
border-bottom: 1px solid var(--border-light);
}
.stat-item {
display: flex;
flex-direction: column;
align-items: center;
gap: var(--space-xs);
}
.stat-number {
font-size: var(--font-size-xl);
font-weight: 700;
color: var(--primary);
}
.stat-label {
font-size: var(--font-size-sm);
color: var(--text-secondary);
font-weight: 500;
text-transform: uppercase;
letter-spacing: 0.5px;
}
.profile-bio-section {
display: flex;
flex-direction: column;
gap: var(--space-sm);
}
.profile-bio {
font-size: var(--font-size-base);
color: var(--text-primary);
line-height: 1.6;
}
.profile-details {
display: flex;
flex-wrap: wrap;
gap: var(--space-md);
}
.profile-detail {
display: flex;
align-items: center;
gap: var(--space-sm);
color: var(--text-secondary);
font-size: var(--font-size-sm);
font-weight: 500;
}
.profile-detail i {
color: var(--primary);
width: 16px;
}
.profile-social {
display: flex;
flex-wrap: wrap;
gap: var(--space-sm);
}
.social-link {
display: flex;
align-items: center;
gap: var(--space-sm);
padding: var(--space-sm) var(--space-md);
border-radius: var(--radius-full);
text-decoration: none;
font-weight: 500;
transition: var(--transition);
border: 2px solid var(--border);
background: var(--surface);
color: var(--text-primary);
font-size: var(--font-size-sm);
}
.social-link:hover {
border-color: var(--primary);
color: var(--primary);
transform: translateY(-1px);
}
.social-link.instagram {
background: linear-gradient(45deg, #f09433 0%, #e6683c 25%, #dc2743 50%, #cc2366 75%, #bc1888 100%);
color: white;
border: none;
}
.social-link.spotify {
background: #1db954;
color: white;
border: none;
}
.profile-passions {
display: flex;
flex-wrap: wrap;
gap: var(--space-sm);
}
.passion-tag {
background: var(--surface-secondary);
color: var(--text-primary);
padding: var(--space-xs) var(--space-md);
border-radius: var(--radius-full);
font-size: var(--font-size-sm);
font-weight: 500;
border: 1px solid var(--border-light);
transition: var(--transition);
}
.passion-tag:hover {
background: var(--primary);
color: white;
border-color: var(--primary);
}
.profile-koaloo-container {
display: grid;
grid-template-columns: 1fr 1.5fr 1fr;
gap: var(--space-xl);
padding: var(--space-xl) var(--space-lg);
max-width: 1400px;
margin: 0 auto;
align-items: start;
}
.profile-left-column {
display: flex;
flex-direction: column;
align-items: flex-start;
gap: var(--space-md);
}
.profile-info-wrapper {
display: flex;
flex-direction: column;
align-items: flex-start;
width: 100%;
gap: var(--space-sm);
}
.profile-avatar-wrapper {
position: relative;
display: flex;
align-items: center;
justify-content: center;
overflow: visible;
}
.profile-avatar-large {
width: 150px;
height: 150px;
border-radius: 50%;
overflow: visible;
border: 4px solid #FF8A00;
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2);
background: #fff;
position: relative;
}
.profile-avatar-image-wrapper {
width: 100%;
height: 100%;
border-radius: 50%;
overflow: hidden;
}
.profile-avatar-large > .profile-avatar-image-wrapper > img {
width: 100%;
height: 100%;
object-fit: cover;
display: block;
}
.profile-edit-icon {
position: absolute;
bottom: -5px;
right: -5px;
width: 25px;
height: 25px;
min-width: 25px;
min-height: 25px;
max-width: 25px;
max-height: 25px;
border-radius: 50%;
background: #FF8A00;
border: none;
display: flex;
align-items: center;
justify-content: center;
cursor: pointer;
transition: all 0.3s ease;
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.2);
z-index: 10;
overflow: hidden;
}
.profile-edit-icon:hover {
background: #FF9500;
transform: scale(1.1);
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
}
.profile-edit-icon i {
color: white;
font-size: 14px;
}
.profile-avatar-large img {
width: 100%;
height: 100%;
object-fit: cover;
border-radius: 50%;
display: block;
}
.profile-username-large {
font-size: var(--font-size-xl);
font-weight: 600;
color: var(--text-primary);
text-align: left;
}
.profile-details-list-large {
display: flex;
flex-direction: column;
gap: var(--space-sm);
width: 100%;
margin-top: var(--space-sm);
align-items: flex-start;
}
.profile-detail-item-large {
display: flex;
flex-direction: column;
gap: 2px;
width: 100%;
align-items: flex-start;
text-align: left;
}
.detail-label-large {
font-size: var(--font-size-sm);
color: var(--text-secondary);
font-weight: 500;
text-align: center;
}
.profile-detail-item-large .profile-detail-label {
text-align: left;
width: 100%;
}
.profile-instagram-link {
color: var(--primary, #B1AAFF);
font-weight: 600;
text-decoration: none;
display: inline-flex;
align-items: center;
gap: 0.35rem;
word-break: break-word;
}
.profile-instagram-link:hover {
text-decoration: underline;
}
.detail-value-large {
font-size: var(--font-size-base);
color: var(--text-primary);
font-weight: 400;
text-align: left;
display: flex;
align-items: center;
justify-content: flex-start;
gap: var(--space-xs);
}
.profile-center-column {
display: flex !important;
flex-direction: column;
align-items: center;
gap: var(--space-xl);
visibility: visible !important;
opacity: 1 !important;
width: 100%;
box-sizing: border-box;
}
.koaloo-mascotte-box {
width: 100%;
max-width: min(560px, calc(100% - 2rem));
margin-left: auto;
margin-right: auto;
aspect-ratio: 1;
background: #F5F1E8;
border-radius: 30px;
position: relative;
overflow: hidden;
box-shadow:
0 0 40px rgba(177, 170, 255, 0.2),
0 0 80px rgba(131, 97, 245, 0.15),
inset 0 0 40px rgba(255, 255, 255, 0.3);
border: 2px solid rgba(177, 170, 255, 0.2);
display: flex !important;
align-items: center;
justify-content: center;
padding: var(--space-sm);
visibility: visible !important;
opacity: 1 !important;
}
@media (max-width: 768px) {
.koaloo-mascotte-box {
background: #F5F1E8;
border-radius: 22px;
padding: 0.25rem;
max-width: min(400px, calc(100% - 2rem)) !important;
margin-left: auto;
margin-right: auto;
}
.koaloo-mascotte-stage .koaloo-layers {
inset: -18%;
}
}
@media (max-width: 480px) {
.koaloo-mascotte-box {
background: #F5F1E8;
border-radius: 18px;
padding: 0.1rem;
min-height: 0 !important;
max-width: min(320px, calc(100% - 2rem)) !important;
}
.koaloo-mascotte-stage .koaloo-layers {
inset: -24%;
}
.koaloo-mascotte-stage #koaloo-svg,
.koaloo-svg-wrapper #koaloo-svg {
transform: scale(1.14);
transform-origin: center center;
}
}
/* Profil — onglets Événements / Historique (mobile) */
@media (max-width: 768px) {
.main-content .content-tabs {
margin-left: 0;
margin-right: 0;
}
.main-content .content-tabs .tab-buttons {
flex-direction: row;
flex-wrap: nowrap;
overflow-x: auto;
-webkit-overflow-scrolling: touch;
scrollbar-width: none;
gap: 0.5rem;
padding-bottom: 0.35rem;
}
.main-content .content-tabs .tab-buttons::-webkit-scrollbar {
display: none;
}
.main-content .content-tabs .tab-btn {
width: auto;
flex: 0 0 auto;
min-height: 44px;
font-size: 0.82rem;
padding: 0.55rem 0.9rem;
justify-content: flex-start;
}
.main-content .content-tabs .section-header {
flex-wrap: wrap;
gap: 0.5rem;
}
.main-content .content-tabs .section-header h3 {
font-size: 1.05rem;
}
.main-content .content-tabs .events-horizontal-scroll {
padding-left: 0;
padding-right: 0;
margin-left: 0;
margin-right: 0;
}
.main-content .content-tabs .event-card-horizontal {
min-width: min(78vw, 260px);
max-width: min(78vw, 260px);
width: min(78vw, 260px);
}
}
.mascotte-decorations {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
pointer-events: none;
z-index: 1;
}
.musical-note {
position: absolute;
font-size: 32px;
color: rgba(177, 170, 255, 0.6);
animation: float 6s ease-in-out infinite;
}
.musical-note.note-1 {
top: 15%;
left: 10%;
animation-delay: 0s;
}
.musical-note.note-2 {
top: 20%;
right: 15%;
animation-delay: 2s;
font-size: 28px;
}
.musical-note.note-3 {
bottom: 20%;
left: 15%;
animation-delay: 4s;
font-size: 24px;
}
.sparkle {
position: absolute;
font-size: 20px;
color: rgba(255, 255, 255, 0.8);
animation: sparkle 3s ease-in-out infinite;
}
.sparkle.sparkle-1 {
top: 10%;
right: 20%;
animation-delay: 0.5s;
}
.sparkle.sparkle-2 {
top: 60%;
right: 10%;
animation-delay: 1.5s;
}
.sparkle.sparkle-3 {
bottom: 15%;
right: 25%;
animation-delay: 2.5s;
}
.sparkle.sparkle-4 {
top: 40%;
left: 8%;
animation-delay: 1s;
}
@keyframes float {
0%, 100% {
transform: translateY(0px) rotate(0deg);
opacity: 0.6;
}
50% {
transform: translateY(-20px) rotate(10deg);
opacity: 1;
}
}
@keyframes sparkle {
0%, 100% {
opacity: 0;
transform: scale(0.5);
}
50% {
opacity: 1;
transform: scale(1);
}
}
.koaloo-mascotte-inner {
position: relative;
z-index: 2;
width: 100%;
height: 100%;
flex: 1 1 auto;
align-self: stretch;
min-height: 0;
display: flex;
align-items: center;
justify-content: center;
}
.koaloo-mascotte-stage,
.koaloo-svg-wrapper {
position: relative;
z-index: 2;
width: 100%;
height: 100%;
aspect-ratio: 1;
display: block;
visibility: visible;
opacity: 1;
overflow: visible;
}
#koaloo-svg {
width: 100%;
height: 100%;
display: block;
visibility: visible;
}
#koaloo-svg image,
#koaloo-fallback {
width: 100%;
height: 100%;
display: block;
visibility: visible;
}
.mascotte-accessories {
position: absolute;
inset: 0;
pointer-events: none;
z-index: 3;
overflow: visible;
}
/* PNG Koaloo_profil : marge transparente compensée par un zoom léger */
.koaloo-layers {
position: absolute;
inset: -14%;
aspect-ratio: 1;
display: block;
overflow: visible;
}
.koaloo-layers .koaloo-layer {
position: absolute;
inset: 0;
width: 100%;
height: 100%;
object-fit: contain;
object-position: center center;
pointer-events: none;
user-select: none;
-webkit-user-select: none;
transform: translateZ(0);
}
.koaloo-layers--loading {
opacity: 0.85;
}
.accessory-prop {
position: absolute;
display: flex;
align-items: center;
justify-content: center;
pointer-events: none;
}
.accessory-prop img {
width: 100%;
height: auto;
object-fit: contain;
object-position: center center;
filter: none;
}
.accessory-prop--hat img,
.accessory-prop--accessories img,
.accessory-prop--chaussures img,
.accessory-prop--bas img,
.accessory-prop--badge img {
filter: drop-shadow(0 1px 2px rgba(0, 0, 0, 0.18));
}
.accessory-prop--glasses img {
filter: none;
}
.koaloo-customization-box {
width: 100%;
max-width: 450px;
background: var(--surface);
border-radius: var(--radius-xl);
padding: var(--space-lg);
box-shadow: var(--shadow-md);
border: 1px solid var(--border-light);
}
.customization-section {
margin-bottom: var(--space-xl);
padding: var(--space-md);
background: var(--surface-secondary);
border-radius: var(--radius-md);
border: 1px solid var(--border-light);
}
.customization-section:last-child {
margin-bottom: 0;
}
.customization-title {
font-size: var(--font-size-base);
font-weight: 600;
color: var(--text-primary);
margin-bottom: var(--space-md);
text-align: center;
display: flex;
align-items: center;
justify-content: center;
gap: var(--space-sm);
}
.customization-title i {
font-size: var(--font-size-lg);
color: var(--primary);
}
.customization-tabs {
display: flex;
gap: var(--space-xs);
margin-bottom: var(--space-lg);
border-bottom: 2px solid var(--border-light);
padding-bottom: 0;
}
.customization-tab {
flex: 1;
padding: var(--space-md) var(--space-sm);
background: transparent;
border: none;
border-bottom: 3px solid transparent;
cursor: pointer;
transition: all 0.3s ease;
color: var(--text-secondary);
font-size: var(--font-size-sm);
font-weight: 600;
display: flex;
align-items: center;
justify-content: center;
gap: var(--space-xs);
position: relative;
bottom: -2px;
white-space: nowrap;
}
@media (min-width: 480px) {
.customization-tab {
font-size: var(--font-size-base);
padding: var(--space-md) var(--space-lg);
}
}
.customization-tab:hover {
color: var(--text-primary);
background: var(--surface-secondary);
}
.customization-tab.active {
color: var(--primary);
border-bottom-color: var(--primary);
background: transparent;
}
.customization-tab i {
font-size: var(--font-size-lg);
}
.customization-tab-content {
display: none;
animation: fadeIn 0.3s ease;
}
.customization-tab-content.active {
display: block;
}
@keyframes fadeIn {
from {
opacity: 0;
transform: translateY(5px);
}
to {
opacity: 1;
transform: translateY(0);
}
}
.color-picker-buttons {
display: flex;
flex-wrap: wrap;
gap: var(--space-sm);
justify-content: center;
}
.color-btn {
width: 40px;
height: 40px;
border-radius: 50%;
border: 2px solid transparent;
cursor: pointer;
transition: all 0.3s ease;
box-shadow: 0 2px 6px rgba(0, 0, 0, 0.15);
}
.color-btn:hover {
transform: scale(1.1);
}
.color-btn.active {
border-color: var(--primary);
box-shadow: 0 0 0 3px rgba(74, 144, 226, 0.3);
}
.glasses-picker-buttons {
display: flex;
flex-wrap: wrap;
gap: var(--space-sm);
justify-content: center;
align-items: center;
}
.glasses-btn {
width: 120px;
height: 120px;
border-radius: var(--radius);
border: 2px solid transparent;
cursor: pointer;
transition: all 0.3s ease;
box-shadow: 0 2px 6px rgba(0, 0, 0, 0.15);
background: var(--surface-secondary);
display: flex;
align-items: center;
justify-content: center;
padding: 8px;
overflow: hidden;
position: relative;
}
.glasses-btn:hover {
transform: scale(1.1);
border-color: var(--primary);
}
.glasses-btn.active {
border-color: var(--primary);
box-shadow: 0 0 0 3px rgba(74, 144, 226, 0.3);
background: var(--surface);
}
.glasses-preview {
width: 140%;
height: 140%;
object-fit: contain;
object-position: center center;
display: block;
}
.glasses-option-text {
font-size: 0.75rem;
color: var(--text-secondary);
text-align: center;
}
.hat-picker-buttons {
display: flex;
flex-wrap: wrap;
gap: var(--space-sm);
justify-content: center;
align-items: center;
}
.hat-btn {
width: 120px;
height: 120px;
border-radius: var(--radius);
border: 2px solid transparent;
cursor: pointer;
transition: all 0.3s ease;
box-shadow: 0 2px 6px rgba(0, 0, 0, 0.15);
background: var(--surface-secondary);
display: flex;
align-items: center;
justify-content: center;
padding: 8px;
overflow: hidden;
position: relative;
}
.hat-btn:hover {
transform: scale(1.1);
border-color: var(--primary);
}
.hat-btn.active {
border-color: var(--primary);
box-shadow: 0 0 0 3px rgba(74, 144, 226, 0.3);
background: var(--surface);
}
.hat-preview {
width: 140%;
height: 140%;
object-fit: contain;
object-position: center center;
display: block;
}
.accessory-picker-buttons {
display: flex;
gap: var(--space-sm);
align-items: center;
}
.accessory-btn {
width: 120px;
height: 120px;
min-width: 120px;
border-radius: var(--radius);
border: 2px solid transparent;
cursor: pointer;
transition: all 0.3s ease;
box-shadow: 0 2px 6px rgba(0, 0, 0, 0.15);
background: var(--surface-secondary);
display: flex;
align-items: center;
justify-content: center;
overflow: hidden;
position: relative;
}
.accessory-btn:hover {
transform: scale(1.1);
border-color: var(--primary);
}
.accessory-btn.active {
border-color: var(--primary);
box-shadow: 0 0 0 3px rgba(74, 144, 226, 0.3);
background: var(--surface);
}
.chaussure-btn,
.bas-btn {
width: 120px;
height: 120px;
min-width: 120px;
border-radius: var(--radius);
border: 2px solid transparent;
cursor: pointer;
transition: all 0.3s ease;
box-shadow: 0 2px 6px rgba(0, 0, 0, 0.15);
background: var(--surface-secondary);
display: flex;
align-items: center;
justify-content: center;
overflow: hidden;
position: relative;
}
.chaussure-btn:hover,
.bas-btn:hover {
transform: scale(1.1);
border-color: var(--primary);
}
.chaussure-btn.active,
.bas-btn.active {
border-color: var(--primary);
box-shadow: 0 0 0 3px rgba(74, 144, 226, 0.3);
background: var(--surface);
}
.accessory-preview {
width: 85%;
height: 85%;
object-fit: contain;
object-position: center center;
display: block;
}
.badge-picker-buttons {
display: flex;
flex-wrap: wrap;
gap: var(--space-sm);
justify-content: center;
}
.badge-btn {
width: 120px;
height: 120px;
border-radius: var(--radius);
border: 2px solid transparent;
cursor: pointer;
transition: all 0.3s ease;
box-shadow: 0 2px 6px rgba(0, 0, 0, 0.15);
background: var(--surface-secondary);
display: flex;
align-items: center;
justify-content: center;
padding: var(--space-sm);
}
.badge-btn:hover {
transform: scale(1.1);
border-color: var(--primary);
}
.badge-btn.active {
border-color: var(--primary);
box-shadow: 0 0 0 3px rgba(74, 144, 226, 0.3);
background: var(--surface);
}
.badge-preview {
width: 100%;
height: 100%;
object-fit: contain;
object-position: center center;
display: block;
}
.accessory-hat,
.accessory-badge {
/* Legacy: le rendu réel utilise .accessory-prop + styles inline. */
display: none;
}
.color-btn.active {
border-color: var(--text-primary);
box-shadow: 0 0 0 2px var(--background), 0 0 0 4px var(--text-primary);
}
.accessory-buttons {
display: flex;
flex-wrap: wrap;
gap: var(--space-sm);
justify-content: center;
}
.accessory-buttons .accessory-btn {
display: flex;
flex-direction: column;
align-items: center;
gap: 4px;
padding: var(--space-sm);
background: var(--surface-secondary);
border: 2px solid var(--border-light);
border-radius: var(--radius-md);
cursor: pointer;
transition: all 0.3s ease;
min-width: 70px;
color: var(--text-primary);
font-size: var(--font-size-xs);
}
.accessory-buttons .accessory-btn i {
font-size: var(--font-size-lg);
}
.accessory-buttons .accessory-btn span {
font-size: var(--font-size-xs);
font-weight: 500;
}
.accessory-buttons .accessory-btn:hover {
background: var(--primary);
color: white;
border-color: var(--primary);
transform: translateY(-2px);
}
.accessory-buttons .accessory-btn.active {
background: var(--primary);
color: white;
border-color: var(--primary);
}
.customization-note {
text-align: center;
font-size: var(--font-size-xs);
color: var(--text-muted);
margin-top: var(--space-sm);
font-style: italic;
}
.profile-right-column {
display: flex;
flex-direction: column;
gap: var(--space-md);
align-items: center;
}
.action-btn-vertical {
width: 100%;
max-width: 180px;
padding: var(--space-md) var(--space-lg);
background: #FF8A00;
color: white;
border: none;
border-radius: 15px;
font-size: var(--font-size-base);
font-family: 'Nunito', sans-serif;
font-weight: 600;
cursor: pointer;
transition: all 0.3s ease;
display: flex;
align-items: center;
justify-content: center;
gap: var(--space-sm);
box-shadow: 0 4px 12px rgba(255, 138, 0, 0.3);
}
.action-btn-vertical i {
font-size: var(--font-size-lg);
}
.action-btn-vertical:hover {
background: #FF9500;
transform: translateY(-2px);
box-shadow: 0 6px 16px rgba(255, 138, 0, 0.4);
}
.action-btn-vertical:active {
transform: translateY(0);
}
.profile-stats-horizontal {
display: grid;
grid-template-columns: repeat(2, 1fr);
gap: var(--space-lg);
padding: 0;
margin: var(--space-md) 0;
width: 100%;
justify-items: flex-start;
}
.stat-box {
background: var(--surface-secondary);
border-radius: 20px;
padding: var(--space-md);
text-align: center;
}
.stat-box.clickable-stat {
cursor: pointer;
transition: all 0.3s ease;
}
.stat-box.clickable-stat:hover {
background: var(--surface);
transform: translateY(-2px);
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
}
.stat-number-large {
font-size: var(--font-size-xl);
font-weight: 700;
color: #FF8A00;
margin-bottom: var(--space-xs);
line-height: 1;
}
.stat-label-large {
font-size: var(--font-size-sm);
color: var(--text-primary);
font-weight: 500;
text-transform: uppercase;
letter-spacing: 0.5px;
}
[data-theme="dark"] .koaloo-mascotte-box {
background: rgba(177, 170, 255, 0.1);
border-color: rgba(177, 170, 255, 0.2);
}
[data-theme="dark"] .koaloo-customization-box,
[data-theme="dark"] .stat-box {
background: var(--surface-secondary);
border-color: var(--border);
}
@media (max-width: 1200px) {
.profile-koaloo-container {
grid-template-columns: 1fr 1.8fr 1fr;
gap: var(--space-lg);
}
}
@media (max-width: 968px) {
.profile-koaloo-container {
grid-template-columns: 1fr;
gap: var(--space-xl);
}
.profile-left-column,
.profile-right-column {
max-width: 400px;
margin: 0 auto;
align-items: center;
}
.profile-details-list-large {
align-items: center;
}
.profile-detail-item-large {
align-items: center;
text-align: center;
}
.detail-value-large {
justify-content: center;
text-align: center;
}
.profile-center-column {
max-width: 100%;
margin: 0 auto;
display: flex !important;
visibility: visible !important;
}
.koaloo-mascotte-box {
display: flex !important;
visibility: visible !important;
width: 100% !important;
max-width: min(560px, calc(100% - 2rem)) !important;
margin-left: auto !important;
margin-right: auto !important;
}
.profile-stats-horizontal {
grid-template-columns: 1fr;
gap: var(--space-md);
}
}
@media (max-width: 480px) {
.profile-left-column {
flex-direction: column;
align-items: flex-start;
gap: var(--space-md);
width: 100%;
position: relative;
}
.profile-avatar-large {
width: 85px;
height: 85px;
flex-shrink: 0;
margin: 0 auto;
position: relative;
z-index: 2;
}
.profile-edit-icon {
width: 20px;
height: 20px;
min-width: 20px;
min-height: 20px;
max-width: 20px;
max-height: 20px;
bottom: -3px;
right: -3px;
border: none;
border-radius: 50%;
box-shadow: 0 2px 6px rgba(0, 0, 0, 0.25);
overflow: hidden;
}
.profile-edit-icon i {
font-size: 8px;
}
.profile-avatar-wrapper {
position: relative;
width: 100%;
display: flex;
flex-direction: column;
align-items: center;
gap: var(--space-md);
margin-bottom: var(--space-md);
padding-bottom: var(--space-md);
}
.profile-stats-horizontal {
display: flex;
flex-direction: row;
gap: var(--space-xs);
padding: 0;
margin: 0;
width: 100%;
max-width: 100%;
align-items: flex-start;
justify-content: center;
position: relative;
top: auto;
left: auto;
transform: none;
z-index: 1;
margin-top: var(--space-sm);
}
.profile-info-wrapper {
width: 100%;
}
.stat-box {
padding: var(--space-xs) var(--space-sm);
border-radius: 12px;
min-width: 70px;
text-align: center;
background: var(--surface-secondary);
}
.stat-number-large {
font-size: var(--font-size-base);
font-weight: 700;
margin-bottom: 2px;
line-height: 1.2;
color: #FF8A00;
}
.stat-label-large {
font-size: 10px;
letter-spacing: 0.3px;
line-height: 1.2;
color: var(--text-primary);
font-weight: 500;
text-transform: uppercase;
}
}
@media (max-width: 360px) {
.profile-avatar-wrapper {
gap: var(--space-lg);
margin-bottom: var(--space-lg);
padding-bottom: var(--space-lg);
}
.profile-stats-horizontal {
margin-top: var(--space-md);
gap: var(--space-sm);
}
.profile-avatar-large {
width: 80px;
height: 80px;
}
.profile-info-content {
width: 100%;
display: flex;
flex-direction: column;
gap: var(--space-xs);
align-items: flex-start;
justify-content: flex-start;
padding-left: var(--space-sm);
}
.profile-username-large {
font-size: var(--font-size-base);
font-weight: 600;
text-align: left;
margin: 0;
width: 100%;
}
.profile-details-list-large {
align-items: flex-start;
margin-top: 0;
gap: var(--space-xs);
width: 100%;
display: flex;
flex-direction: column;
}
.profile-detail-item-large {
align-items: flex-start;
text-align: left;
width: 100%;
display: flex;
justify-content: flex-start;
}
.detail-value-large {
justify-content: flex-start;
text-align: left;
font-size: var(--font-size-sm);
line-height: 1.5;
width: 100%;
}
.profile-bio {
white-space: pre-wrap;
word-wrap: break-word;
}
}
@media (max-width: 480px) {
.profile-right-column:not(.profile-right-column--owner) .action-btn-vertical.qr-btn span,
.profile-right-column:not(.profile-right-column--owner) .action-btn-vertical.settings-btn span,
.profile-right-column:not(.profile-right-column--owner) .action-btn-vertical.admin-btn span,
.profile-right-column:not(.profile-right-column--owner) .action-btn-vertical.friend-btn span {
display: inline;
font-size: 0.78rem;
}
.profile-right-column:not(.profile-right-column--owner) .action-btn-vertical.qr-btn,
.profile-right-column:not(.profile-right-column--owner) .action-btn-vertical.settings-btn,
.profile-right-column:not(.profile-right-column--owner) .action-btn-vertical.admin-btn,
.profile-right-column:not(.profile-right-column--owner) .action-btn-vertical.friend-btn {
max-width: 130px;
min-width: 100px;
width: auto;
height: auto;
padding: 0.5rem 0.75rem;
border-radius: 10px;
font-size: 0.78rem;
gap: -0.8rem;
}
.profile-right-column:not(.profile-right-column--owner) .action-btn-vertical.qr-btn i,
.profile-right-column:not(.profile-right-column--owner) .action-btn-vertical.settings-btn i,
.profile-right-column:not(.profile-right-column--owner) .action-btn-vertical.admin-btn i,
.profile-right-column:not(.profile-right-column--owner) .action-btn-vertical.friend-btn i {
font-size: 2rem;
margin: 0;
}
.profile-right-column:not(.profile-right-column--owner) {
top: var(--space-xs);
right: var(--space-xs);
flex-direction: row;
gap: var(--space-xs);
z-index: 1000;
background: transparent;
padding: 0;
margin: 0;
max-width: none;
width: auto;
}
}
@media (max-width: 768px) {
.profile-right-column.profile-right-column--owner {
position: absolute;
top: 0;
right: 0;
flex-direction: row;
align-items: center;
gap: 0.15rem;
width: auto;
max-width: none;
z-index: 1000;
}
.profile-right-column.profile-right-column--owner .action-btn-vertical {
width: 36px !important;
min-width: 36px !important;
max-width: 36px !important;
height: 36px !important;
padding: 0 !important;
border-radius: 10px !important;
box-shadow: none !important;
background: transparent !important;
flex-shrink: 0;
touch-action: manipulation;
}
.profile-right-column.profile-right-column--owner .action-btn-vertical span {
display: none !important;
}
.profile-right-column.profile-right-column--owner .action-btn-vertical i {
font-size: 1.15rem !important;
margin: 0;
}
.profile-koaloo-container {
padding: var(--space-lg) var(--space);
gap: var(--space-lg);
position: relative;
}
.profile-center-column {
order: 2;
margin-bottom: var(--space-md);
display: flex !important;
visibility: visible !important;
align-items: center;
width: 100%;
padding-inline: max(0.75rem, env(safe-area-inset-left, 0px)) max(0.75rem, env(safe-area-inset-right, 0px));
box-sizing: border-box;
}
.koaloo-mascotte-box {
max-width: min(400px, calc(100% - 2rem)) !important;
width: 100%;
margin-left: auto;
margin-right: auto;
background: #F5F1E8;
padding: 0.25rem;
}
.profile-avatar-large {
width: 120px;
height: 120px;
}
.profile-left-column {
order: 1;
}
.profile-right-column {
order: 3;
}
}
@media (max-width: 480px) {
.profile-right-column:not(.profile-right-column--owner) {
top: var(--space-xs);
right: var(--space-xs);
flex-direction: row;
gap: var(--space-xs);
z-index: 1000;
background: transparent;
padding: 0;
margin: 0;
max-width: none;
width: auto;
}
.koaloo-mascotte-stage,
.koaloo-svg-wrapper {
display: block;
visibility: visible;
width: 100%;
height: 100%;
}
#koaloo-svg {
display: block;
visibility: visible;
width: 100%;
height: 100%;
}
}
@media (max-width: 480px) {
.profile-avatar-large {
width: 100px;
height: 100px;
}
.stat-number-large {
font-size: var(--font-size-2xl);
}
.profile-koaloo-container {
padding: var(--space-md) var(--space-sm);
gap: var(--space-md);
}
.profile-center-column {
padding-inline: max(1rem, env(safe-area-inset-left, 0px)) max(1rem, env(safe-area-inset-right, 0px));
}
.koaloo-mascotte-box {
background: #F5F1E8;
border-radius: 18px;
min-height: 0 !important;
display: flex !important;
visibility: visible !important;
max-width: min(320px, calc(100% - 2rem)) !important;
padding: 0.1rem !important;
margin-left: auto;
margin-right: auto;
}
.koaloo-mascotte-stage .koaloo-layers {
inset: -24%;
}
.koaloo-svg-wrapper,
.koaloo-mascotte-stage {
display: block;
visibility: visible;
width: 100%;
height: 100%;
}
#koaloo-svg {
display: block;
visibility: visible;
width: 100%;
height: 100%;
max-width: none;
max-height: none;
}
}
.offer-slider-container {
width: 100%;
margin-top: 1rem;
}
.offer-slider-track {
position: relative;
width: 100%;
height: 56px;
background: rgba(255, 255, 255, 0.2);
border-radius: 28px;
overflow: hidden;
cursor: pointer;
user-select: none;
-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
}
.offer-slider-thumb {
position: absolute;
left: 4px;
top: 4px;
width: 48px;
height: 48px;
background: white;
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.3);
cursor: grab;
transition: transform 0.3s ease, background 0.3s ease;
z-index: 2;
}
.offer-slider-thumb:active {
cursor: grabbing;
transform: scale(0.95);
}
.offer-slider-thumb i {
color: #667eea;
font-size: 1.2rem;
}
.offer-slider-label {
position: absolute;
left: 0;
right: 0;
top: 50%;
transform: translateY(-50%);
text-align: center;
color: white;
font-weight: 600;
font-size: 0.95rem;
pointer-events: none;
z-index: 1;
padding: 0 60px;
transition: opacity 0.3s ease;
}
.offer-slider-track:hover .offer-slider-thumb {
background: #f0f0f0;
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.4);
}
@keyframes offerSuccess {
0% {
transform: scale(1);
}
50% {
transform: scale(1.1);
}
100% {
transform: scale(1);
}
}
.offer-slider-thumb.success {
animation: offerSuccess 0.5s ease;
background: #4ade80;
}
.offer-slider-thumb.success i {
color: white;
}
@media (max-width: 768px) {
.offer-slider-track {
height: 52px;
}
.offer-slider-thumb {
width: 44px;
height: 44px;
}
.offer-slider-label {
font-size: 0.85rem;
padding: 0 55px;
}
}
.organizer-badge {
position: absolute;
top: 0.6rem;
right: 0.6rem;
background: rgba(255, 146, 1, 0.95);
color: #0D1B2A;
font-size: 0.65rem;
font-weight: 800;
letter-spacing: 0.05em;
text-transform: uppercase;
padding: 0.2rem 0.65rem;
border-radius: var(--radius-full);
z-index: 15;
box-shadow: var(--shadow-sm);
}
[data-theme="dark"] .organizer-badge {
background: rgba(177, 170, 255, 0.95);
color: #0D1B2A;
}
.creator-badge {
position: absolute;
top: 0.6rem;
right: 0.6rem;
background: linear-gradient(135deg, #FFD700 0%, #FFA500 100%);
color: #0D1B2A;
font-size: 1rem;
width: 36px;
height: 36px;
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
z-index: 15;
box-shadow: 0 2px 8px rgba(255, 215, 0, 0.4);
border: 2px solid rgba(255, 255, 255, 0.3);
}
[data-theme="dark"] .creator-badge {
background: linear-gradient(135deg, #FFD700 0%, #FF8C00 100%);
box-shadow: 0 2px 8px rgba(255, 215, 0, 0.5);
}
.creator-badge i {
filter: drop-shadow(0 1px 2px rgba(0, 0, 0, 0.3));
}
.admin-badge-event {
position: absolute;
top: 0.6rem;
right: 0.6rem;
background: rgba(99, 102, 241, 0.95);
color: white;
font-size: 0.65rem;
font-weight: 800;
letter-spacing: 0.05em;
text-transform: uppercase;
padding: 0.2rem 0.65rem;
border-radius: var(--radius-full);
z-index: 15;
box-shadow: var(--shadow-sm);
}
[data-theme="dark"] .admin-badge-event {
background: rgba(99, 102, 241, 0.95);
color: white;
}
.event-view-modal {
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
z-index: 10000;
display: flex;
align-items: center;
justify-content: center;
animation: fadeIn 0.2s ease-out;
}
.event-view-modal-overlay {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: rgba(0, 0, 0, 0.9);
}
.event-view-modal-content {
position: relative;
background: var(--surface);
border-radius: var(--radius-lg);
box-shadow: var(--shadow-xl);
max-width: 350px;
width: 90%;
margin: 1rem;
z-index: 10001;
padding: var(--space-lg);
}
.event-view-options {
display: flex;
flex-direction: column;
gap: var(--space-md);
}
.event-view-option {
display: flex;
align-items: center;
justify-content: center;
gap: var(--space-sm);
padding: var(--space-lg);
background: var(--surface-secondary);
border: 2px solid var(--border);
border-radius: var(--radius-lg);
cursor: pointer;
transition: var(--transition);
width: 100%;
font-size: var(--font-size-base);
font-weight: 600;
color: var(--text-primary);
}
.event-view-option:hover {
background: var(--primary);
color: white;
border-color: var(--primary);
transform: translateY(-2px);
box-shadow: var(--shadow-md);
}
.event-view-option i {
font-size: 1.25rem;
}
.event-view-option-admin {
background: var(--surface-secondary);
border-color: var(--border);
}
.event-view-option-admin:hover {
background: var(--primary);
color: white;
border-color: var(--primary);
}
@keyframes fadeIn {
from {
opacity: 0;
}
to {
opacity: 1;
}
}
@keyframes slideUp {
from {
opacity: 0;
transform: translateY(20px);
}
to {
opacity: 1;
transform: translateY(0);
}
}
[data-theme="dark"] .event-view-modal-content {
background: var(--surface);
}
[data-theme="dark"] .event-view-option {
background: var(--surface-secondary);
border-color: var(--border);
}
[data-theme="dark"] .event-view-option-admin {
background: var(--surface-secondary);
border-color: var(--border);
}
.organizer-status-badge {
display: inline-flex;
align-items: center;
gap: 0.35rem;
padding: 0.2rem 0.8rem;
border-radius: var(--radius-full);
font-size: 0.75rem;
font-weight: 700;
letter-spacing: 0.02em;
}
.organizer-status-badge.status-upcoming {
background: rgba(177, 170, 255, 0.15);
color: var(--primary);
}
.organizer-status-badge.status-ongoing {
background: rgba(255, 146, 1, 0.15);
color: var(--secondary);
}
.organizer-status-badge.status-past {
background: rgba(15, 23, 42, 0.1);
color: var(--text-muted);
}
.organized-events-panel {
margin-top: 2rem;
}
.organizer-card-actions {
display: flex;
flex-wrap: wrap;
gap: 0.5rem;
margin-top: 0.75rem;
}
.event-manage-btn {
flex: 1 1 180px;
border: none;
border-radius: var(--radius-md);
padding: 0.65rem 1rem;
font-weight: 700;
font-size: 0.9rem;
cursor: pointer;
display: inline-flex;
align-items: center;
justify-content: center;
gap: 0.4rem;
background: var(--gradient-primary);
color: #0D1B2A;
box-shadow: var(--shadow-sm);
transition: var(--transition-fast);
}
.event-manage-btn:hover {
transform: translateY(-2px);
}
.event-manage-btn.secondary {
background: transparent;
border: 2px solid var(--border);
color: var(--text-primary);
}
[data-theme="dark"] .event-manage-btn.secondary {
border-color: var(--border-light);
color: var(--text-primary);
}
@media (max-width: 768px) {
.event-manage-btn {
flex: 1 1 100%;
}
}
/* ��� Organisateur : bandes ouvertes (pas de cases blanches) ��� */
.ox-home-strip {
margin: 0.85rem 1rem 0;
padding: 0 0 0.9rem;
border-bottom: 1px solid rgba(13, 27, 42, 0.12);
display: flex;
flex-wrap: wrap;
align-items: center;
justify-content: space-between;
gap: 0.65rem;
background: transparent;
}
.ox-home-strip__text strong {
display: block;
font-size: 0.95rem;
color: var(--primary-dark, #0d1b2a);
}
.ox-home-strip__text span {
font-size: 0.82rem;
color: rgba(13, 27, 42, 0.55);
}
.ox-home-strip__actions {
display: flex;
gap: 0.5rem;
flex-wrap: wrap;
}
.ox-home-strip__primary,
.ox-commu-org-bar__primary {
padding: 0.5rem 1rem;
border-radius: 9999px;
background: var(--secondary, #ff9201);
color: #0d1b2a;
font-weight: 700;
font-size: 0.82rem;
text-decoration: none;
}
.ox-home-strip__ghost,
.ox-commu-org-bar__ghost {
padding: 0.5rem 1rem;
border-radius: 9999px;
border: 1.5px solid var(--primary, #b1aaff);
color: var(--primary-dark, #0d1b2a);
font-weight: 700;
font-size: 0.82rem;
text-decoration: none;
background: transparent;
}
.ox-commu-org-bar {
margin: 0.75rem 1rem 0.25rem;
padding: 0 0 0.85rem;
border-bottom: 1px solid rgba(13, 27, 42, 0.12);
display: flex;
gap: 0.55rem;
flex-wrap: wrap;
background: transparent;
}
[data-theme="dark"] .ox-home-strip,
[data-theme="dark"] .ox-commu-org-bar {
border-bottom-color: rgba(241, 245, 249, 0.14);
}
[data-theme="dark"] .ox-home-strip__text strong,
[data-theme="dark"] .ox-home-strip__ghost,
[data-theme="dark"] .ox-commu-org-bar__ghost {
color: var(--text-primary, #f1f5f9);
}
[data-theme="dark"] .ox-home-strip__text span {
color: rgba(241, 245, 249, 0.65);
}