diff --git a/assets/pasted-20260203-232235-4f0779eb.png b/assets/pasted-20260203-232235-4f0779eb.png new file mode 100644 index 0000000..a6e8918 Binary files /dev/null and b/assets/pasted-20260203-232235-4f0779eb.png differ diff --git a/static/css/custom.css b/static/css/custom.css index 60207d4..153b702 100644 --- a/static/css/custom.css +++ b/static/css/custom.css @@ -15,10 +15,28 @@ body { font-family: 'Poppins', sans-serif; margin: 0; overflow-x: hidden; + position: relative; + min-height: 100vh; +} + +body::before { + content: ""; + position: fixed; + top: 0; + left: 0; + width: 100%; + height: 100%; + background-image: url('../images/background.png'); + background-size: cover; + background-position: center; + background-repeat: no-repeat; + opacity: 0.15; /* Sutil transparencia para no interferir con la legibilidad */ + z-index: -1; + pointer-events: none; } .navbar { - background-color: rgba(11, 13, 23, 0.95); + background-color: rgba(11, 13, 23, 0.8); backdrop-filter: blur(10px); border-bottom: 1px solid rgba(255, 255, 255, 0.1); } @@ -34,13 +52,15 @@ body { .hero-section { padding: 100px 0; position: relative; - background: radial-gradient(circle at top right, rgba(255, 0, 122, 0.1), transparent), - radial-gradient(circle at bottom left, rgba(0, 240, 255, 0.1), transparent); + /* Ajustado para ser más transparente y dejar ver el fondo */ + background: radial-gradient(circle at top right, rgba(255, 0, 122, 0.05), transparent), + radial-gradient(circle at bottom left, rgba(0, 240, 255, 0.05), transparent); } .card { - background-color: var(--bg-card); - border: 1px solid rgba(255, 255, 255, 0.05); + background-color: rgba(26, 30, 46, 0.7); /* Transparencia en las tarjetas */ + backdrop-filter: blur(5px); + border: 1px solid rgba(255, 255, 255, 0.1); border-radius: 15px; transition: transform 0.3s ease, box-shadow 0.3s ease; } @@ -48,6 +68,7 @@ body { .card:hover { transform: translateY(-5px); box-shadow: 0 10px 30px rgba(0, 0, 0, 0.5); + background-color: rgba(26, 30, 46, 0.85); } .btn-neon { @@ -162,4 +183,4 @@ body { .whatsapp-widget:hover .whatsapp-tooltip { opacity: 1; transform: translateY(0); -} +} \ No newline at end of file diff --git a/static/images/background.png b/static/images/background.png new file mode 100644 index 0000000..a6e8918 Binary files /dev/null and b/static/images/background.png differ diff --git a/staticfiles/css/custom.css b/staticfiles/css/custom.css index 108056f..153b702 100644 --- a/staticfiles/css/custom.css +++ b/staticfiles/css/custom.css @@ -1,21 +1,186 @@ - :root { - --bg-color-start: #6a11cb; - --bg-color-end: #2575fc; - --text-color: #ffffff; - --card-bg-color: rgba(255, 255, 255, 0.01); - --card-border-color: rgba(255, 255, 255, 0.1); + --bg-dark: #0B0D17; + --bg-card: #1A1E2E; + --neon-pink: #FF007A; + --neon-cyan: #00F0FF; + --text-main: #FFFFFF; + --text-muted: #A0A0A0; + --accent-gradient: linear-gradient(45deg, var(--neon-pink), var(--neon-cyan)); + --whatsapp-green: #25D366; } + body { + background-color: var(--bg-dark); + color: var(--text-main); + font-family: 'Poppins', sans-serif; margin: 0; - font-family: 'Inter', sans-serif; - background: linear-gradient(45deg, var(--bg-color-start), var(--bg-color-end)); - color: var(--text-color); - display: flex; - justify-content: center; - align-items: center; - min-height: 100vh; - text-align: center; - overflow: hidden; + overflow-x: hidden; position: relative; + min-height: 100vh; } + +body::before { + content: ""; + position: fixed; + top: 0; + left: 0; + width: 100%; + height: 100%; + background-image: url('../images/background.png'); + background-size: cover; + background-position: center; + background-repeat: no-repeat; + opacity: 0.15; /* Sutil transparencia para no interferir con la legibilidad */ + z-index: -1; + pointer-events: none; +} + +.navbar { + background-color: rgba(11, 13, 23, 0.8); + backdrop-filter: blur(10px); + border-bottom: 1px solid rgba(255, 255, 255, 0.1); +} + +.navbar-brand { + font-weight: 800; + background: var(--accent-gradient); + -webkit-background-clip: text; + -webkit-text-fill-color: transparent; + font-size: 1.5rem; +} + +.hero-section { + padding: 100px 0; + position: relative; + /* Ajustado para ser más transparente y dejar ver el fondo */ + background: radial-gradient(circle at top right, rgba(255, 0, 122, 0.05), transparent), + radial-gradient(circle at bottom left, rgba(0, 240, 255, 0.05), transparent); +} + +.card { + background-color: rgba(26, 30, 46, 0.7); /* Transparencia en las tarjetas */ + backdrop-filter: blur(5px); + border: 1px solid rgba(255, 255, 255, 0.1); + border-radius: 15px; + transition: transform 0.3s ease, box-shadow 0.3s ease; +} + +.card:hover { + transform: translateY(-5px); + box-shadow: 0 10px 30px rgba(0, 0, 0, 0.5); + background-color: rgba(26, 30, 46, 0.85); +} + +.btn-neon { + background: var(--accent-gradient); + border: none; + color: white; + font-weight: 600; + padding: 12px 30px; + border-radius: 30px; + transition: all 0.3s ease; +} + +.btn-neon:hover { + box-shadow: 0 0 20px rgba(255, 0, 122, 0.5); + transform: scale(1.05); + color: white; +} + +.form-control { + background-color: rgba(255, 255, 255, 0.05); + border: 1px solid rgba(255, 255, 255, 0.1); + color: white; + border-radius: 10px; +} + +.form-control:focus { + background-color: rgba(255, 255, 255, 0.1); + border-color: var(--neon-cyan); + color: white; + box-shadow: 0 0 10px rgba(0, 240, 255, 0.3); +} + +.live-badge { + background-color: var(--neon-pink); + color: white; + padding: 5px 15px; + border-radius: 20px; + font-size: 0.8rem; + font-weight: 700; + text-transform: uppercase; + animation: pulse 2s infinite; +} + +@keyframes pulse { + 0% { opacity: 1; } + 50% { opacity: 0.5; } + 100% { opacity: 1; } +} + +.schedule-item { + padding: 15px; + border-left: 3px solid var(--neon-cyan); + margin-bottom: 10px; + background: rgba(255, 255, 255, 0.02); +} + +.footer { + padding: 50px 0; + border-top: 1px solid rgba(255, 255, 255, 0.05); + text-align: center; + color: var(--text-muted); +} + +/* WhatsApp Widget */ +.whatsapp-widget { + position: fixed; + bottom: 30px; + right: 30px; + z-index: 1000; + display: flex; + flex-direction: column; + align-items: flex-end; +} + +.whatsapp-button { + width: 60px; + height: 60px; + background-color: var(--whatsapp-green); + border-radius: 50%; + display: flex; + align-items: center; + justify-content: center; + color: white; + text-decoration: none; + font-size: 30px; + box-shadow: 0 4px 15px rgba(0, 0, 0, 0.3); + transition: all 0.3s ease; +} + +.whatsapp-button:hover { + transform: scale(1.1); + color: white; + box-shadow: 0 6px 20px rgba(37, 211, 102, 0.4); +} + +.whatsapp-tooltip { + background: var(--bg-card); + color: white; + padding: 10px 15px; + border-radius: 10px; + margin-bottom: 15px; + font-size: 0.9rem; + box-shadow: 0 4px 15px rgba(0, 0, 0, 0.3); + border: 1px solid rgba(255, 255, 255, 0.1); + opacity: 0; + transform: translateY(10px); + transition: all 0.3s ease; + pointer-events: none; + white-space: nowrap; +} + +.whatsapp-widget:hover .whatsapp-tooltip { + opacity: 1; + transform: translateY(0); +} \ No newline at end of file diff --git a/staticfiles/images/background.png b/staticfiles/images/background.png new file mode 100644 index 0000000..a6e8918 Binary files /dev/null and b/staticfiles/images/background.png differ diff --git a/staticfiles/pasted-20260203-232235-4f0779eb.png b/staticfiles/pasted-20260203-232235-4f0779eb.png new file mode 100644 index 0000000..a6e8918 Binary files /dev/null and b/staticfiles/pasted-20260203-232235-4f0779eb.png differ