/* ==================== MODERN PROFESSIONAL THEME ==================== Applied when is set. Overrides all CSS custom properties from styles-theme.css. Navy / Gold / White — sophisticated shoe boutique aesthetic. ================================================================== */ @import url('https://fonts.googleapis.com/css2?family=Playfair+Display:wght@600;700;800&family=Inter:wght@400;500;600;700&display=swap'); body.theme-modern { /* ── Core palette ── */ --primary: #1a1a2e; --primary-strong: #0f0f1e; --secondary: #c9a84c; --accent: #f5f0e8; --surface: #fafafa; --surface-elevated: #ffffff; --text: #1a1a2e; --muted: #6b7280; --border: #e5e7eb; --danger: #dc2626; --success: #059669; /* ── Shadows ── */ --shadow-soft: 0 4px 20px rgba(26, 26, 46, 0.08); --shadow-medium: 0 8px 32px rgba(26, 26, 46, 0.12); --shadow-glow: 0 16px 48px rgba(201, 168, 76, 0.18); /* ── Radii ── */ --radius-sm: 4px; --radius-md: 8px; --radius-lg: 12px; /* ── Motion ── */ --motion-fast: 150ms ease; --motion-base: 250ms ease; --motion-slow: 380ms ease; /* ── Typography ── */ --font-body: 'Inter', 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif; --font-heading: 'Playfair Display', Georgia, 'Times New Roman', serif; /* ── Backward-compat aliases ── */ --primary-color: var(--primary); --secondary-color: var(--secondary); --accent-color: var(--accent); --text-color: var(--text); --light-text: var(--muted); --border-color: var(--border); --shadow: var(--shadow-soft); --transition: all var(--motion-base); --rosado-oscuro: var(--primary-strong); --rosado-claro: #c9a84c; --blanco-rosado: var(--surface); } /* ── Page background ── */ html:has(body.theme-modern) { background: radial-gradient(circle at 5% 5%, rgba(201, 168, 76, 0.06), transparent 40%), radial-gradient(circle at 95% 10%, rgba(26, 26, 46, 0.04), transparent 40%), linear-gradient(180deg, #fafafa 0%, #f5f5f5 100%); } body.theme-modern::before { background: radial-gradient(circle at 10% 20%, rgba(201, 168, 76, 0.06) 0, transparent 30%), radial-gradient(circle at 85% 5%, rgba(26, 26, 46, 0.04) 0, transparent 28%); animation: none; } body.theme-modern::after { background-image: radial-gradient(rgba(26, 26, 46, 0.04) 1px, transparent 1px); background-size: 32px 32px; opacity: 0.5; animation: none; } /* ── Navbar ── */ body.theme-modern .header, body.theme-modern .navbar { background: rgba(255, 255, 255, 0.97); border-bottom: 1px solid var(--border); box-shadow: 0 1px 8px rgba(26, 26, 46, 0.06); backdrop-filter: blur(12px); } body.theme-modern .logo-text { color: var(--primary); font-family: var(--font-heading); letter-spacing: 0.02em; } body.theme-modern .nav-link { color: var(--text); font-weight: 500; letter-spacing: 0.01em; } body.theme-modern .nav-link:hover, body.theme-modern .nav-link.active { color: var(--secondary); } body.theme-modern .nav-link.active::after { background: var(--secondary); } body.theme-modern .nav-currency-select { border: 1px solid var(--border); color: var(--text); background: var(--surface-elevated); } /* ── Hero section ── */ body.theme-modern .hero { background: linear-gradient(135deg, #1a1a2e 0%, #16213e 50%, #0f3460 100%); min-height: 85vh; position: relative; overflow: hidden; } body.theme-modern .hero::before { content: ''; position: absolute; inset: 0; background: radial-gradient(ellipse at 70% 50%, rgba(201, 168, 76, 0.15) 0, transparent 60%), radial-gradient(ellipse at 20% 80%, rgba(255, 255, 255, 0.04) 0, transparent 40%); pointer-events: none; } body.theme-modern .hero-content { background: rgba(255, 255, 255, 0.04); border: 1px solid rgba(201, 168, 76, 0.25); backdrop-filter: blur(16px); border-radius: var(--radius-lg); box-shadow: 0 24px 64px rgba(0, 0, 0, 0.3); } body.theme-modern .hero-title { color: #ffffff; font-family: var(--font-heading); font-size: clamp(2.2rem, 5vw, 3.8rem); font-weight: 800; letter-spacing: -0.01em; text-shadow: 0 2px 20px rgba(0, 0, 0, 0.3); } body.theme-modern .hero-subtitle { color: rgba(255, 255, 255, 0.8); font-size: 1.1rem; letter-spacing: 0.02em; } /* ── Buttons ── */ body.theme-modern .btn-primary, body.theme-modern .btn.btn-primary { background: var(--primary); color: #ffffff; border: 2px solid var(--primary); border-radius: var(--radius-sm); font-weight: 600; letter-spacing: 0.04em; text-transform: uppercase; font-size: 0.85rem; transition: background var(--motion-fast), color var(--motion-fast), border-color var(--motion-fast), box-shadow var(--motion-fast); } body.theme-modern .btn-primary:hover, body.theme-modern .btn.btn-primary:hover { background: var(--secondary); border-color: var(--secondary); color: var(--primary); box-shadow: 0 4px 16px rgba(201, 168, 76, 0.35); } body.theme-modern .btn-secondary, body.theme-modern .btn.btn-secondary { background: transparent; color: var(--primary); border: 2px solid var(--primary); border-radius: var(--radius-sm); font-weight: 600; letter-spacing: 0.04em; text-transform: uppercase; font-size: 0.85rem; } body.theme-modern .btn-secondary:hover, body.theme-modern .btn.btn-secondary:hover { background: var(--primary); color: #ffffff; } /* ── Trust section ── */ body.theme-modern .trust-section { background: var(--surface-elevated); border-top: 1px solid var(--border); border-bottom: 1px solid var(--border); } body.theme-modern .trust-card { background: var(--surface-elevated); border: 1px solid var(--border); border-radius: var(--radius-md); box-shadow: var(--shadow-soft); transition: box-shadow var(--motion-base), transform var(--motion-base); } body.theme-modern .trust-card:hover { box-shadow: var(--shadow-medium); transform: translateY(-2px); } body.theme-modern .trust-card h3 { color: var(--primary); } /* ── Section headers ── */ body.theme-modern .seccion-header h2, body.theme-modern h2 { color: var(--primary); font-family: var(--font-heading); } body.theme-modern .seccion-header p { color: var(--muted); } /* ── Product cards ── */ body.theme-modern .producto-card { background: var(--surface-elevated); border: 1px solid var(--border); border-radius: var(--radius-md); box-shadow: var(--shadow-soft); transition: box-shadow var(--motion-base), transform var(--motion-base); } body.theme-modern .producto-card:hover { box-shadow: var(--shadow-medium); transform: translateY(-4px); } body.theme-modern .producto-categoria { color: var(--secondary); font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; font-size: 0.72rem; } body.theme-modern .producto-nombre { color: var(--primary); font-family: var(--font-heading); } body.theme-modern .producto-precio { color: var(--primary); font-weight: 700; } body.theme-modern .producto-precio-original { color: var(--muted); } /* ── Sobre nosotros ── */ body.theme-modern .sobre-nosotros { background: var(--accent); } body.theme-modern .stat-number { color: var(--secondary); font-family: var(--font-heading); } body.theme-modern .placeholder-imagen { background: linear-gradient(135deg, var(--primary) 0%, #0f3460 100%); } /* ── Contacto ── */ body.theme-modern .contacto { background: var(--surface-elevated); } body.theme-modern .info-item h3 { color: var(--secondary); } body.theme-modern .info-icon { color: var(--secondary); } /* ── Footer ── */ body.theme-modern .footer { background: var(--primary); color: rgba(255, 255, 255, 0.85); } body.theme-modern .footer h3 { color: var(--secondary); font-family: var(--font-heading); } body.theme-modern .footer a { color: rgba(255, 255, 255, 0.7); } body.theme-modern .footer a:hover { color: var(--secondary); } body.theme-modern .footer-bottom { border-top: 1px solid rgba(255, 255, 255, 0.1); color: rgba(255, 255, 255, 0.5); } /* ── Tienda / Catálogo ── */ body.theme-modern .tienda-header { background: linear-gradient(135deg, #1a1a2e 0%, #16213e 100%); } body.theme-modern .tienda-header h1 { color: #ffffff; } body.theme-modern .tienda-header p { color: rgba(255, 255, 255, 0.75); } body.theme-modern .buscador-container input { border: 1px solid var(--border); background: var(--surface-elevated); color: var(--text); } body.theme-modern .buscador-container input:focus { border-color: var(--secondary); box-shadow: 0 0 0 3px rgba(201, 168, 76, 0.15); } body.theme-modern .filtros-sidebar { background: var(--surface-elevated); border: 1px solid var(--border); border-radius: var(--radius-md); } body.theme-modern .filtros-sidebar h3, body.theme-modern .filtros-sidebar .filtro-titulo { color: var(--secondary); } body.theme-modern .btn-grid.active, body.theme-modern .btn-lista.active { background: var(--primary); color: #ffffff; } /* ── Modal ── */ body.theme-modern .modal-content { background: var(--surface-elevated); border: 1px solid var(--border); border-radius: var(--radius-lg); box-shadow: 0 32px 80px rgba(26, 26, 46, 0.25); } body.theme-modern .modal-close { color: var(--muted); } body.theme-modern .modal-close:hover { color: var(--primary); } body.theme-modern .precio-valor { color: var(--primary); font-weight: 700; } body.theme-modern .talla-btn { border: 1px solid var(--border); color: var(--text); border-radius: var(--radius-sm); } body.theme-modern .talla-btn:hover, body.theme-modern .talla-btn.selected { background: var(--primary); color: #ffffff; border-color: var(--primary); } /* ── Stars / Rating ── */ body.theme-modern .stars .filled, body.theme-modern .star-filled { color: var(--secondary); } /* ── Loader ── */ body.theme-modern .spinner { border-top-color: var(--primary); border-right-color: var(--secondary); } /* ── Scrollbar ── */ body.theme-modern ::-webkit-scrollbar-thumb { background: var(--primary); } body.theme-modern ::-webkit-scrollbar-thumb:hover { background: var(--secondary); } /* ── Selection ── */ body.theme-modern ::selection { background: rgba(201, 168, 76, 0.25); color: var(--primary); }