/* ============================================================================ DESIGN SYSTEM - Ranking Padel Cargado AL FINAL del para sobrescribir clases ViserLab. Toca: paginas publicas + dashboards user/organizer. NO toca: panel admin. ============================================================================ */ /* IMPORT INTER FONT */ @import url('https://rsms.me/inter/inter.css'); /* ============================================================================ 1. VARIABLES (custom properties) ============================================================================ */ :root { /* Colores corporate */ --rp-primary: #0f172a; --rp-primary-2: #1e293b; --rp-accent: #16a34a; --rp-accent-d: #15803d; --rp-accent-l: rgba(22, 163, 74, 0.1); /* Texto */ --rp-text: #0f172a; --rp-text-2: #475569; --rp-text-3: #94a3b8; /* Fondos */ --rp-bg: #ffffff; --rp-bg-2: #f8fafc; --rp-bg-3: #f1f5f9; /* Bordes */ --rp-border: #e2e8f0; --rp-border-2: #cbd5e1; /* Estados */ --rp-success: #16a34a; --rp-warning: #d97706; --rp-danger: #dc2626; --rp-info: #0891b2; /* Sombras */ --rp-shadow-sm: 0 1px 2px 0 rgb(0 0 0 / 0.05); --rp-shadow: 0 4px 6px -1px rgb(0 0 0 / 0.08), 0 2px 4px -2px rgb(0 0 0 / 0.05); --rp-shadow-lg: 0 10px 15px -3px rgb(0 0 0 / 0.1), 0 4px 6px -4px rgb(0 0 0 / 0.05); /* Radios */ --rp-radius-sm: 6px; --rp-radius: 10px; --rp-radius-lg: 16px; /* Tipografia */ --rp-font: 'Inter var', 'Inter', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif; } /* ============================================================================ 2. RESET / BASE TYPOGRAPHY ============================================================================ */ /* Aplicar Inter al body para sobrescribir cualquier fuente de ViserLab */ body, html { font-family: var(--rp-font) !important; color: var(--rp-text); -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; font-feature-settings: "cv02","cv03","cv04","cv11"; } /* Headings con peso bold y letter-spacing tight (look profesional) */ h1, h2, h3, h4, h5, h6, .h1, .h2, .h3, .h4, .h5, .h6 { font-family: var(--rp-font) !important; font-weight: 700 !important; letter-spacing: -0.02em !important; color: var(--rp-text) !important; line-height: 1.2 !important; } h1, .h1 { font-size: 2.5rem !important; } h2, .h2 { font-size: 2rem !important; } h3, .h3 { font-size: 1.5rem !important; } h4, .h4 { font-size: 1.25rem !important; } h5, .h5 { font-size: 1.125rem !important; } h6, .h6 { font-size: 1rem !important; } p { color: var(--rp-text-2); line-height: 1.6; } a { color: var(--rp-accent-d); transition: color 0.2s; } a:hover { color: var(--rp-accent); } /* ============================================================================ 3. OVERRIDES DE VISERLAB (clases que ya usa el template) ============================================================================ */ /* Botones existentes de ViserLab */ .btn--base, .btn-base { background: var(--rp-primary) !important; border-color: var(--rp-primary) !important; color: white !important; border-radius: var(--rp-radius-sm) !important; font-weight: 600 !important; padding: 10px 22px !important; transition: all 0.2s !important; font-family: var(--rp-font) !important; } .btn--base:hover, .btn-base:hover { background: var(--rp-primary-2) !important; border-color: var(--rp-primary-2) !important; transform: translateY(-1px); box-shadow: var(--rp-shadow); } /* Body color theming basico */ .bg--base, .bg-base { background-color: var(--rp-accent) !important; } .text--base, .text-base { color: var(--rp-accent) !important; } /* Cards estilo ViserLab */ .card, .dashboard-card, .organizer-item, .event-item, .blog-item { border: 1px solid var(--rp-border) !important; border-radius: var(--rp-radius-lg) !important; box-shadow: var(--rp-shadow-sm) !important; transition: transform 0.2s, box-shadow 0.2s !important; background: white !important; } .card:hover, .organizer-item:hover, .event-item:hover, .blog-item:hover { transform: translateY(-2px); box-shadow: var(--rp-shadow); } /* Tablas */ .table { border-collapse: separate !important; border-spacing: 0 !important; border: 1px solid var(--rp-border); border-radius: var(--rp-radius); overflow: hidden; } .table thead th { background: var(--rp-bg-2) !important; color: var(--rp-text-3) !important; font-size: 12px !important; font-weight: 700 !important; text-transform: uppercase !important; letter-spacing: 0.05em !important; border-bottom: 1px solid var(--rp-border) !important; padding: 14px 16px !important; } .table tbody td { padding: 14px 16px !important; border-bottom: 1px solid var(--rp-border) !important; color: var(--rp-text) !important; font-size: 14px; } .table tbody tr:last-child td { border-bottom: none !important; } .table tbody tr:hover { background: var(--rp-bg-2) !important; } /* Badges ViserLab */ .badge { padding: 4px 10px !important; border-radius: 100px !important; font-size: 11px !important; font-weight: 700 !important; text-transform: uppercase !important; letter-spacing: 0.05em !important; } /* Forms */ .form-control, .form-select { border: 1px solid var(--rp-border-2) !important; border-radius: var(--rp-radius-sm) !important; padding: 10px 14px !important; font-size: 14px !important; color: var(--rp-text) !important; background: white !important; transition: border-color 0.2s, box-shadow 0.2s !important; font-family: var(--rp-font) !important; } .form-control:focus, .form-select:focus { border-color: var(--rp-accent) !important; box-shadow: 0 0 0 3px rgba(22, 163, 74, 0.15) !important; outline: none !important; } .form-label, label { font-weight: 600 !important; color: var(--rp-text) !important; font-size: 14px !important; margin-bottom: 6px !important; } /* Modals */ .modal-content { border: none !important; border-radius: var(--rp-radius-lg) !important; box-shadow: var(--rp-shadow-lg) !important; } .modal-header { border-bottom: 1px solid var(--rp-border) !important; padding: 20px 24px !important; } .modal-body { padding: 24px !important; } .modal-footer { border-top: 1px solid var(--rp-border) !important; padding: 16px 24px !important; } /* ============================================================================ 4. COMPONENTES NUEVOS (utility classes) ============================================================================ */ /* Hero section */ .rp-hero { padding: 80px 0 100px; background: linear-gradient(180deg, white 0%, var(--rp-bg-2) 100%); text-align: center; } .rp-hero h1 { font-size: 3.5rem !important; font-weight: 800 !important; letter-spacing: -0.03em !important; line-height: 1.1 !important; max-width: 900px; margin: 0 auto 24px; } .rp-hero h1 .accent { color: var(--rp-accent); } .rp-hero p { font-size: 1.25rem; color: var(--rp-text-2); max-width: 680px; margin: 0 auto 40px; } .rp-eyebrow { display: inline-block; background: var(--rp-accent-l); color: var(--rp-accent-d); padding: 6px 14px; border-radius: 100px; font-size: 13px; font-weight: 600; margin-bottom: 24px; } /* Section header */ .rp-section-eyebrow { color: var(--rp-accent-d); font-size: 13px; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; text-align: center; margin-bottom: 16px; } .rp-section-title { font-size: 2.5rem !important; font-weight: 800 !important; letter-spacing: -0.02em !important; text-align: center; color: var(--rp-text) !important; max-width: 700px; margin: 0 auto 16px !important; } .rp-section-subtitle { font-size: 1.125rem; color: var(--rp-text-2); text-align: center; max-width: 640px; margin: 0 auto 60px; } /* Stat card */ .rp-stat { background: white; border: 1px solid var(--rp-border); border-radius: var(--rp-radius); padding: 24px; transition: all 0.2s; } .rp-stat:hover { border-color: var(--rp-border-2); box-shadow: var(--rp-shadow); } .rp-stat-label { font-size: 11px; font-weight: 700; color: var(--rp-text-3); text-transform: uppercase; letter-spacing: 0.05em; margin-bottom: 8px; } .rp-stat-value { font-size: 2rem; font-weight: 800; color: var(--rp-text); letter-spacing: -0.02em; line-height: 1; } .rp-stat-meta { font-size: 13px; color: var(--rp-text-3); margin-top: 8px; } /* Card moderno */ .rp-card { background: white; border: 1px solid var(--rp-border); border-radius: var(--rp-radius-lg); padding: 28px; transition: transform 0.2s, box-shadow 0.2s; } .rp-card:hover { transform: translateY(-2px); box-shadow: var(--rp-shadow); } .rp-card-icon { width: 48px; height: 48px; background: var(--rp-bg-3); border-radius: 12px; display: flex; align-items: center; justify-content: center; margin-bottom: 18px; color: var(--rp-text-2); } /* Badges nuevos */ .rp-badge { display: inline-block; padding: 3px 10px; border-radius: 100px; font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.05em; } .rp-badge-success { background: rgba(22, 163, 74, 0.12); color: var(--rp-accent-d); } .rp-badge-warning { background: rgba(217, 119, 6, 0.12); color: var(--rp-warning); } .rp-badge-danger { background: rgba(220, 38, 38, 0.12); color: var(--rp-danger); } .rp-badge-info { background: rgba(8, 145, 178, 0.12); color: var(--rp-info); } .rp-badge-neutral { background: var(--rp-bg-3); color: var(--rp-text-2); } /* Avatar (para tabla ranking, etc.) */ .rp-avatar { width: 36px; height: 36px; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center; color: white; font-weight: 700; font-size: 13px; flex-shrink: 0; } .rp-avatar-sm { width: 28px; height: 28px; font-size: 11px; } .rp-avatar-lg { width: 48px; height: 48px; font-size: 16px; } /* Tabla ranking moderna */ .rp-ranking-table { width: 100%; border-collapse: separate; border-spacing: 0; background: white; border: 1px solid var(--rp-border); border-radius: var(--rp-radius-lg); overflow: hidden; } .rp-ranking-table thead th { background: var(--rp-bg-2); color: var(--rp-text-3); font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.05em; padding: 14px 18px; text-align: left; border-bottom: 1px solid var(--rp-border); } .rp-ranking-table tbody td { padding: 14px 18px; border-bottom: 1px solid var(--rp-border); color: var(--rp-text); font-size: 14px; vertical-align: middle; } .rp-ranking-table tbody tr:last-child td { border-bottom: none; } .rp-ranking-table tbody tr:hover { background: var(--rp-bg-2); } .rp-ranking-table .pos { font-weight: 800; font-size: 16px; width: 60px; } .rp-ranking-table .pos-1 { color: var(--rp-accent); } .rp-ranking-table .player { display: flex; align-items: center; gap: 12px; } .rp-ranking-table .player-name { font-weight: 600; } .rp-ranking-table .stat-up { color: var(--rp-success); font-weight: 700; } .rp-ranking-table .stat-down { color: var(--rp-danger); font-weight: 700; } .rp-ranking-table .stat-flat { color: var(--rp-text-3); font-weight: 700; } .rp-ranking-table .points { font-weight: 800; font-size: 16px; } /* Footer mejorado */ .rp-section-bg { background: var(--rp-bg-2); } .rp-section-dark { background: var(--rp-primary); color: white; } .rp-section-dark .rp-section-title { color: white !important; } .rp-section-dark .rp-section-subtitle { color: rgba(255,255,255,0.7); } .rp-section-dark .rp-section-eyebrow { color: var(--rp-accent); } /* ============================================================================ 5. UTILS ============================================================================ */ .rp-py-50 { padding-top: 50px !important; padding-bottom: 50px !important; } .rp-py-80 { padding-top: 80px !important; padding-bottom: 80px !important; } .rp-py-100 { padding-top: 100px !important; padding-bottom: 100px !important; } .rp-mt-0 { margin-top: 0 !important; } .rp-mt-2 { margin-top: 0.5rem !important; } .rp-mt-4 { margin-top: 1rem !important; } .rp-mb-0 { margin-bottom: 0 !important; } .rp-mb-4 { margin-bottom: 1rem !important; } /* Texto utilitario */ .rp-text-muted { color: var(--rp-text-3) !important; } .rp-text-2 { color: var(--rp-text-2) !important; } /* Animacion fade-in */ @keyframes rp-fadein { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: translateY(0); } } .rp-fade-in { animation: rp-fadein 0.5s ease-out; } /* ============================================================================ 6. RESPONSIVE ============================================================================ */ @media (max-width: 768px) { .rp-hero h1 { font-size: 2.25rem !important; } .rp-hero p { font-size: 1.05rem; } .rp-section-title { font-size: 1.75rem !important; } }